/* ==========================================================================
   SuperHumAIn — Priscilla Alarie
   superhumain.css — système de design unique, sans dépendance.

   Filiation : architecture, rythme et micro-interactions repris du modèle
   « Jünger / glacial noir » (archive.css + glacial-noir.css +
   design-restoration.css), consolidés en une seule couche et réétalonnés
   sur la charte SuperHumAIn : navy profond, bleu électrique, crème.

   Ordre : tokens · reset · helpers · nav · hero · cartes · citation ·
           étapes · prose · article · contact · footer · animations ·
           responsive · impression.
   ========================================================================== */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */
:root {
  /* --- Charte SuperHumAIn (source : brand-guide) --- */
  --brand-dark:      #040b1c;   /* foncé de la charte graphique */
  --brand-navy-logo: #0e1520;   /* encre figée dans le SVG du logo — ne pas modifier */
  --brand-abyss:     #000719;   /* fond du logo footer */
  --brand-blue:      #234fe8;   /* primaire de la charte graphique */
  --brand-blue-logo: #0a3fd0;   /* valeur figée dans le SVG du logo — ne pas modifier */
  --brand-cream:     #fef5ee;   /* fond clair de la marque */
  --brand-beige:     #d9d0c3;

  /* --- Profondeurs (fond → surfaces) --- */
  /* Toute la famille est dérivée du foncé de la charte : mêmes proportions
     de teinte, luminance échelonnée du pied de page aux surfaces relevées. */
  --abyss:      #02060f;
  --bg:         #040b1c;
  --bg-2:       #071129;
  --surface:    #0a1730;
  --surface-2:  #0f2040;

  /* --- Lumière (texte) --- */
  --text:       #e7edf7;
  --text-bright:#f6f9ff;
  --muted:      #93a2bb;
  --muted-soft: #b4c0d4;

  /* --- Accent : le bleu de la charte, sans retouche --- */
  /* Sur les bandes sombres, les textes bleus portent le #234fe8 de la charte
     exactement. Ce bleu y tient 3,1:1 : sous le seuil AA des textes courants,
     au-dessus du seuil des éléments d'interface. C'est un arbitrage de marque
     assumé — la fidélité du bleu prime sur le contraste. */
  --accent:      var(--brand-blue);
  --accent-soft: var(--brand-blue);
  --accent-deep: var(--brand-blue);
  --accent-ink:  #04102e;       /* texte posé sur aplat bleu */
  /* Le liseré de focus ne suit PAS cet arbitrage : c'est le seul repère du
     clavier, et il doit rester franchement visible sur la nuit. */
  --focus:       #8fa9ff;

  /* --- Filets & halos --- */
  --line:        rgba(160, 190, 235, 0.14);
  --line-strong: rgba(160, 190, 235, 0.28);
  --line-lit:    rgba(35, 79, 232, 0.48);
  --glow:        rgba(35, 79, 232, 0.32);

  /* --- Ombres --- */
  --shadow-soft: 0 2px 14px rgba(2, 6, 14, 0.45);
  --shadow-card: 0 18px 48px rgba(2, 6, 14, 0.58), 0 2px 6px rgba(2, 6, 14, 0.4);
  --shadow-media: 0 24px 60px rgba(2, 6, 14, 0.55);

  /* --- Dégradés de surface (relief des panneaux) --- */
  --surface-grad:   #050d20;    /* bas de carte au repos */
  --surface-grad-2: #0a1832;    /* bas de carte au survol */
  --cta-grad:       #050e21;
  --cta-halo:       rgba(61, 120, 255, 0.14);
  --chip-bg:        rgba(10, 23, 48, 0.5);
  --chip-bg-hover:  rgba(61, 120, 255, 0.12);
  --media-veil:     rgba(2, 6, 15, 0.5);
  --media-veil-2:   rgba(4, 11, 28, 0.85);
  --inset-lit:      rgba(255, 255, 255, 0.05);

  /* --- Typographie ---
     Une seule grotesque, Inter, du titre au texte : un serif en titre est le
     signal éditorial le plus fort qui soit, et il tirait la page vers le
     magazine. Inter porte l'échelle entière avec un crénage négatif marqué
     dans les grands corps — c'est la signature typographique du logiciel
     contemporain. DM Mono reste sur les étiquettes, les durées et les
     chiffres : c'est lui qui dit « instrument » plutôt que « publication ». */
  --font-display: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --h1: clamp(2.2rem, 5vw, 4rem);
  --h2: clamp(1.7rem, 2.9vw, 2.45rem);
  --h3: clamp(1.12rem, 1.5vw, 1.35rem);

  /* --- Mesures --- */
  --container: 75rem;
  --container-wide: 86rem;
  --radius: 10px;
  --radius-sm: 6px;
  --gutter: clamp(1.1rem, 4vw, 2.2rem);
  --section-y: clamp(3rem, 5.4vw, 5.2rem);
  --nav-h: 76px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* --------------------------------------------------------------------------
   BANDE CLAIRE — le jour de la marque.
   Une section porte .sh-light : elle redéfinit les mêmes rôles sémantiques
   sur le fond crème SuperHumAIn. Tous les composants suivent sans le savoir.
   Le sombre devient alors ponctuation (hero, charnières, citation, appel
   final, pied de page) et le clair porte tout ce qui se lit.
   -------------------------------------------------------------------------- */
.sh-light {
  /* Blanc chaud : teinte 33°, donc dans le beige ivoire et non dans les
     pêche. Les cartes blanches ne s'en détachent que de 1,05:1 — c'est le
     filet, et non l'écart de clarté, qui porte la séparation. */
  --bg:         #fdf9f4;
  --bg-2:       #f5efe6;
  --surface:    #ffffff;
  --surface-2:  #ffffff;

  --text:        #1b2433;
  --text-bright: #0b111c;
  --muted:       #5c6779;
  --muted-soft:  #3b4557;

  /* Primaire de la charte : 6,26:1 sur blanc, et blanc sur lui 6,26:1 — AA
     plein dans les deux sens, ce qui n'était pas le cas des bleus précédents.
     --accent-soft en est une nuance assombrie, pour les plus petits textes. */
  --accent:      var(--brand-blue);
  --accent-soft: #1c40bd;
  --accent-ink:  #ffffff;
  --focus:       #1c40bd;

  --line:        rgba(0, 0, 0, 0.11);
  --line-strong: rgba(0, 0, 0, 0.19);
  --line-lit:    rgba(35, 79, 232, 0.42);
  --glow:        rgba(35, 79, 232, 0.22);

  --shadow-soft:  0 1px 2px rgba(14, 21, 32, 0.05);
  --shadow-card:  0 8px 24px rgba(14, 21, 32, 0.09), 0 1px 2px rgba(14, 21, 32, 0.05);
  --shadow-media: 0 22px 52px rgba(14, 21, 32, 0.16);

  --surface-grad:   #ffffff;
  --surface-grad-2: #ffffff;
  --cta-grad:       #fdfaf6;
  --cta-halo:       rgba(35, 79, 232, 0.10);
  --chip-bg:        #ffffff;
  --chip-bg-hover:  rgba(35, 79, 232, 0.08);
  --media-veil:     rgba(14, 21, 32, 0.18);
  --media-veil-2:   rgba(14, 21, 32, 0.55);
  --inset-lit:      rgba(14, 21, 32, 0.03);

  background: var(--bg);
  color: var(--text);
}
/* Le filet de section et le halo du hero sont pensés pour la nuit :
   sur le jour, la frontière se fait par le changement de fond lui-même. */
.sh-light.sh-section--rule::before { opacity: 0.45; }
/* Le visuel d'un article reste sombre : on lui redonne un cadre sur le crème. */
.sh-light .sh-split-media::after { box-shadow: inset 0 0 0 1px rgba(14, 21, 32, 0.14); }
/* Sur le jour, aucun texte ne repose sur la vignette d'article : le voile
   d'assombrissement n'a plus de raison d'être, et les visuels retrouvent
   leur densité d'origine. */
.sh-light .sh-post-media::after { display: none; }
.sh-light .sh-post-media img,
.sh-light .sh-post:hover .sh-post-media img { filter: none; }

/* ==========================================================================
   2. RESET / BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 1rem);
  scrollbar-width: thin;
  scrollbar-color: #1b2b47 var(--bg);
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.65;
  letter-spacing: -0.002em;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, svg, video { max-width: 100%; display: block; }
img, video { height: auto; }
a { color: inherit; text-decoration: none; transition: color 0.22s var(--ease); }
button { font: inherit; cursor: pointer; }
/* Compensation optique : un serif à contraste s'amincit sur fond sombre.
   On l'épaissit légèrement dans la nuit, on le rend à son poids dans le jour. */
/* Le serif éditorial porte les deux premiers niveaux — la voix. En dessous,
   la grotesque prend le relais : c'est ce qui fait basculer la page du registre
   du magazine vers celui du cabinet, sans rien retirer au grand titre. */
h1, h2 {
  font-family: var(--font-display); font-weight: 620; line-height: 1.06; margin: 0;
  letter-spacing: -0.03em; font-optical-sizing: auto;
}
h3, h4 {
  font-family: var(--font-display); font-weight: 600; line-height: 1.3;
  letter-spacing: -0.014em; margin: 0;
}
/* Même compensation pour les textes en display qui ne vivent que dans la nuit :
   citations, charnières, signature du hero, chiffres des repères, baseline. */
.sh-quote-text, .sh-statement p, .sh-footer-tag { font-weight: 500; }
p { margin: 0 0 1.1em; }
ul { margin: 0; }
::selection { background: var(--accent); color: #fff; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: #1b2b47; border: 3px solid var(--bg); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #2a3f66; }

/* Profondeur atmosphérique : lueur haute + vignette cinématographique */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(120% 75% at 50% -8%, rgba(20, 46, 104, 0.55), transparent 62%),
    radial-gradient(85% 55% at 100% 2%, rgba(61, 120, 255, 0.10), transparent 58%),
    radial-gradient(135% 110% at 50% 40%, transparent 50%, rgba(2, 5, 12, 0.62) 100%);
}
body::after {
  content: "";
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60% 30% at 50% 0%, rgba(61, 120, 255, 0.08), transparent 70%),
    radial-gradient(40% 24% at 88% 8%, rgba(120, 160, 230, 0.05), transparent 70%);
  mix-blend-mode: screen;
}

/* Accès clavier */
.sh-skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--accent); color: #fff; padding: 0.8rem 1.2rem;
  font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.1em;
}
.sh-skip:focus { left: 0; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 4px; }

/* ==========================================================================
   3. HELPERS
   ========================================================================== */
.sh-container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.sh-container--wide { max-width: var(--container-wide); }
.sh-section { padding: var(--section-y) 0; position: relative; }
.sh-section--tight { padding: clamp(2.6rem, 6vw, 4.6rem) 0; }
.sh-hidden { display: none !important; }
.sh-center { text-align: center; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Filet de section : dégradé lumineux au centre plutôt qu'un trait plat */
.sh-section--rule::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: var(--line-strong);
}

/* Sur-titre — étiquette simple. Ni filet tracé ni point d'épingle : ces
   marqueurs relevaient du dispositif d'archive, pas du registre corporatif. */
.sh-kicker {
  display: inline-block;
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--accent-soft);
}

/* En-tête de section */
.sh-section-head { max-width: 48rem; margin-bottom: clamp(1.9rem, 3.2vw, 2.8rem); position: relative; }
.sh-section-head.is-center { margin-left: auto; margin-right: auto; text-align: center; }
.sh-section-head.is-center .sh-kicker::before { display: none; }
.sh-section-title {
  font-size: var(--h2); letter-spacing: -0.011em; margin: 0.9rem 0 0;
  color: var(--text-bright); text-wrap: balance;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
}
.sh-section-lead { color: var(--muted); margin-top: 1.05rem; font-size: 1.02rem; }
.sh-section-lead strong { color: var(--text); font-weight: 500; }

/* ==========================================================================
   4. BOUTONS
   ========================================================================== */
.sh-btn {
  display: inline-flex; align-items: center; gap: 0.65rem;
  font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.14em;
  text-transform: uppercase; padding: 0.82rem 1.35rem; border-radius: 8px;
  border: 1px solid transparent; white-space: nowrap;
  position: relative; overflow: hidden; isolation: isolate;
  transition: background 0.24s var(--ease), color 0.24s var(--ease),
              border-color 0.24s var(--ease), box-shadow 0.24s var(--ease),
              transform 0.24s var(--ease);
}
.sh-btn--primary {
  background: var(--accent); color: #fff; border-color: var(--accent);
  box-shadow: 0 1px 2px rgba(6, 14, 32, 0.16);
}
.sh-btn--primary:hover {
  background: #0e4ae8; border-color: #0e4ae8; transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(6, 14, 32, 0.2);
}
.sh-btn--primary::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(120deg, transparent 20%, rgba(255, 255, 255, 0.42) 50%, transparent 80%);
  transform: translateX(-120%); transition: transform 0.7s var(--ease-out);
}
.sh-btn--primary:hover::after { transform: translateX(120%); }

.sh-btn--ghost { background: transparent; color: var(--text); border-color: var(--line-strong); }
.sh-btn--ghost:hover { background: rgba(61, 120, 255, 0.10); border-color: var(--accent); color: var(--accent-soft); }

/* Taille réduite, pour les appels d'action posés dans une carte : une vraie
   affordance de bouton, sans peser autant qu'un appel de section. */
.sh-btn--sm {
  padding: 0.6rem 1rem; font-size: 0.67rem; letter-spacing: 0.1em; gap: 0.45rem;
}
.sh-card .sh-btn--sm { margin-top: 0.2rem; }
/* Dans une carte, le bouton se distingue du fond blanc par un filet plus net. */
.sh-card .sh-btn--ghost { border-color: var(--line-strong); background: var(--bg); }
.sh-card .sh-btn--ghost:hover { border-color: var(--accent); color: var(--accent); background: var(--chip-bg-hover); }
.sh-btn--cream { background: var(--brand-cream); color: var(--brand-dark); border-color: var(--brand-cream); }
.sh-btn--cream:hover { background: #fff; border-color: #fff; transform: translateY(-2px); box-shadow: 0 14px 32px rgba(2, 6, 14, 0.45); }

/* Lien fléché discret */
.sh-arrow-link {
  font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--accent-soft);
  display: inline-flex; align-items: center; gap: 0.5rem;
  transition: gap 0.4s var(--ease), color 0.3s var(--ease);
}
.sh-arrow-link:hover { gap: 0.9rem; color: var(--text-bright); }

/* ==========================================================================
   5. NAVIGATION
   ========================================================================== */
/* En haut de page, la barre n'est plus totalement transparente : un voile crème
   à 13 % la pose sur l'image sans la masquer. C'est assez pour que les libellés
   du menu cessent de flotter dans le visuel, et trop peu pour se lire comme un
   bandeau. Au défilement, `is-scrolled` le remplace par un fond franc. */
.sh-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: rgba(253, 249, 244, 0.13);
  border-bottom: 1px solid transparent;
  transition: background 0.4s var(--ease), border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.sh-nav.is-scrolled {
  background: rgba(4, 11, 28, 0.74);
  -webkit-backdrop-filter: saturate(140%) blur(18px);
  backdrop-filter: saturate(140%) blur(18px);
  border-bottom-color: var(--line);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.45);
}
.sh-nav-row { display: flex; align-items: center; justify-content: space-between; height: var(--nav-h); gap: 1rem; }

/* --------------------------------------------------------------------------
   SIGNATURE DE MARQUE — lockup officiel « SUPER HUM AI ».
   Deux fichiers, jamais redessinés : logo.svg (officiel, sur fond clair)
   et logo-inverse.svg (mêmes tracés, valeurs inversées, sur fond sombre).
   La barre bascule de l'un à l'autre selon la bande qu'elle survole.
   -------------------------------------------------------------------------- */
.sh-logo { position: relative; display: inline-flex; align-items: center; }
.sh-logo-img {
  height: 47px; width: auto;
  transition: opacity 0.35s var(--ease);
}
.sh-logo-img--official {
  position: absolute; left: 0; top: 50%; transform: translateY(-50%); opacity: 0;
}
/* Le temps du tout premier calcul de la barre : la bascule est instantanée, donc
   invisible. Sans ça, une correction au chargement se lirait comme un fondu. */
.sh-nav.is-instant .sh-logo-img { transition: none; }
.sh-nav.is-on-light .sh-logo-img--inverse { opacity: 0; }
.sh-nav.is-on-light .sh-logo-img--official { opacity: 1; }
.sh-logo--footer .sh-logo-img { height: 52px; }

/* Barre claire — lorsqu'elle survole une bande .sh-light */
.sh-nav.is-on-light.is-scrolled {
  background: rgba(253, 249, 244, 0.9);
  border-bottom-color: rgba(14, 21, 32, 0.12);
  box-shadow: 0 10px 30px rgba(14, 21, 32, 0.08);
}
.sh-nav.is-on-light .sh-nav-link { color: #5c6779; }
.sh-nav.is-on-light .sh-nav-link:hover,
.sh-nav.is-on-light .sh-nav-link.is-active { color: #0b111c; }
.sh-nav.is-on-light .sh-nav-link.is-active::after {
  background: var(--accent); box-shadow: 0 0 8px rgba(35, 79, 232, 0.45);
}
.sh-nav.is-on-light .sh-burger span { background: #0b111c; }
.sh-nav.is-on-light .sh-nav-cta {
  background: var(--brand-blue); border-color: var(--brand-blue);
  box-shadow: 0 1px 2px rgba(6, 14, 32, 0.18);
}

.sh-nav-links { display: flex; align-items: center; gap: 1.7rem; list-style: none; padding: 0; margin: 0; }
.sh-nav-link {
  font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted); position: relative; padding: 0.3rem 0;
}
.sh-nav-link:hover, .sh-nav-link.is-active { color: var(--text); }
.sh-nav-link.is-active::after {
  content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 1px;
  background: var(--accent); box-shadow: 0 0 8px rgba(61, 120, 255, 0.6);
}
.sh-nav-right { display: flex; align-items: center; gap: 1rem; }
.sh-nav-cta { padding: 0.6rem 1.05rem; font-size: 0.68rem; border-radius: 6px; }
/* Sur le jour, l'appel de la barre passe en encre : c'est le traitement de sa
   maquette, et c'est le registre du conseil plutôt que celui de l'application. */
.sh-nav.is-on-light .sh-nav-cta.sh-btn--primary {
  background: var(--brand-dark); border-color: var(--brand-dark); color: #fff;
  box-shadow: 0 1px 2px rgba(6, 14, 32, 0.18);
}
.sh-nav.is-on-light .sh-nav-cta.sh-btn--primary:hover {
  background: #0c1a35; border-color: #0c1a35;
  box-shadow: 0 4px 12px rgba(6, 14, 32, 0.22);
}

.sh-burger { display: none; flex-direction: column; gap: 5px; background: transparent; border: 0; padding: 6px; }
.sh-burger span { width: 22px; height: 1.5px; background: var(--text); transition: transform 0.3s var(--ease), opacity 0.3s; }
.sh-burger.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.sh-burger.is-open span:nth-child(2) { opacity: 0; }
.sh-burger.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ==========================================================================
   6. HERO (accueil) + EN-TÊTE DE PAGE INTÉRIEURE
   ========================================================================== */
/* HERO CLAIR — le registre corporatif de la maquette cliente : le texte tient
   la moitié gauche sur un aplat presque blanc, l'animation de marque déborde à
   droite. Elle est composée sur fond clair d'origine : plus aucun voile, plus
   aucune correction — elle fonctionne enfin telle qu'elle a été produite. */
.sh-hero {
  /* La hauteur n'est plus une simple fraction de l'écran : elle réserve une
     hauteur fixe à la bande de signature qui suit. `100svh - 220px` garantit
     220 px de bande visible sans défiler, soit 84 % de ses 260 px — et ce sur
     toutes les hauteurs d'écran, ce qu'aucune valeur en svh ne peut faire (la
     bande, elle, ne se mesure pas en pourcentage de l'écran).
     Le `min(78svh, …)` conserve le plafond d'origine : sur un très grand écran
     la bande tient de toute façon, inutile d'étirer le hero davantage.
     À revoir si la hauteur de la bande change — c'est le 220 qui la suit. */
  position: relative; min-height: min(78svh, calc(100svh - 220px)); display: flex; align-items: flex-start;
  overflow: hidden; background: var(--bg);
}
/* Le miroir est porté par le conteneur, pas par l'image : la parallaxe écrit
   un `transform` en ligne sur l'image et effacerait un scaleX() posé là. */
.sh-hero-bg { position: absolute; inset: 0; z-index: 0; transform: scaleX(-1); }
.sh-hero-bg img, .sh-hero-bg video {
  /* Image retournée horizontalement : sa partie claire, à l'origine en haut à
     gauche, vient ainsi sous le texte passé à droite. Aucun texte dans
     l'image, le miroir ne se voit pas.
     Cadrage redescendu sur le navy : c'est la boîte de texte, et non un voile
     général, qui assure désormais la lisibilité — l'image garde ses couleurs. */
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 70%;
}
.sh-hero-bg picture { display: contents; }
/* L'animation est déjà claire à gauche — luminance mesurée à 206/255, stable
   sur toute la boucle. Le voile n'a donc pas à masquer le visuel : il raccorde
   seulement le blanc cassé de la page au dégradé chaud de l'image, et pose
   juste ce qu'il faut de contraste sous le texte. */
.sh-hero-bg::after {
  content: ""; position: absolute; inset: 0; z-index: 2;
  /* Voile haut seulement. Le dégradé du bas, qui reblanchissait l'image sur ses
     derniers 13 %, a été retiré : il servait à raccorder le hero au fond crème
     de la page, or le hero est suivi d'une bande sombre — le raccord n'avait
     plus d'objet et se lisait comme une brume beige posée sur le visuel. */
  background:
    linear-gradient(180deg, rgba(253, 249, 244, 0.55) 0%, rgba(253, 249, 244, 0) 13%);
}
/* Une seule colonne depuis que la vidéo et la signature sont descendues dans le
   bandeau : le panneau de texte se pose sur la moitié claire de l'image, la
   moitié navy reste nue. La grille est conservée — `justify-self` sur l'enfant
   est ce qui le tient à droite, et le passage à une colonne se fait alors sans
   toucher au reste. */
.sh-hero-inner {
  position: relative; z-index: 2; width: 100%;
  max-width: var(--container); margin: 0 auto;
  padding-top: calc(var(--nav-h) + 0.9rem); padding-bottom: clamp(1.5rem, 2.8vw, 2.4rem);
  display: grid; grid-template-columns: minmax(0, 1fr);
  /* Le calage en haut est porté par `.sh-hero` (conteneur flex) : c'est lui qui
     centrait le bloc. Ici, `align-items` n'aurait rien changé — la rangée de
     grille fait déjà la hauteur de son contenu. Seul le rembourrage haut
     ci-dessus décolle le bloc de la barre de navigation. */
  align-items: start;
}
/* Plus de panneau sur grand écran : le texte se pose à même l'image. Il ne
   reste donc plus de rembourrage à déduire, le contenu prend toute la largeur.
   Le palier 940 px rétablit une boîte pleine — voir la section RESPONSIVE.

   Pas de `margin-left: auto` ici. Il servait à coller le contenu au bord droit
   du panneau ; sans panneau, il produisait un bord GAUCHE en dents de scie —
   chaque bloc ayant sa propre mesure (19ch pour le titre, 62ch pour le
   paragraphe), chacun se décalait différemment. Le paragraphe partait 67 px
   plus à droite que le titre. C'est la boîte qui est calée à droite ; à
   l'intérieur, tout part du même bord gauche. */
.sh-hero-text > * { max-width: 50rem; }
.sh-hero-text {
  justify-self: end;
  /* `width` et non `max-width` : avec `justify-self: end`, la boîte se réduit
     au plus large de ses contenus et un simple plafond ne l'élargit jamais.

     51,8125rem = 829 px : la distance entre le bord gauche de « ACCUEIL » dans
     le menu et le bord droit du conteneur du hero. Le bloc de texte démarre
     ainsi exactement sous le premier élément de menu.
     Cette distance est constante — mesurée identique à 1280, 1440 et 1920 px,
     les deux conteneurs étant centrés et le groupe de droite de la barre ayant
     une largeur fixe. Elle dépend en revanche des LIBELLÉS du menu : changer
     « Accueil » en « Page d'accueil » déplacerait le repère. À remesurer dans
     ce cas.

     La boîte est élargie d'UN rembourrage, pas deux : c'est le TEXTE qui doit
     tomber sur « ACCUEIL », et le bord droit de la boîte reste sur la gouttière
     du conteneur. La boîte déborde donc à gauche de la largeur du rembourrage,
     et le texte retrouve exactement les 829 px. Le même `--marge` sert au calcul
     et au rembourrage : l'alignement tient à toute largeur. */
  --marge: clamp(1.1rem, 1.8vw, 1.6rem);
  width: min(calc(51.8125rem + var(--marge)), 100%);
  padding: var(--marge);
  /* Même crème que la barre de navigation, mais deux fois plus dense : la barre
     reste à 0,13, la boîte passe à 0,25. Une seule déclaration pour toutes les
     largeurs — l'exception opaque du mobile a été retirée. */
  background: rgba(253, 249, 244, 0.25);
  border-radius: var(--radius);
}
.sh-hero-title {
  font-size: var(--h1); letter-spacing: -0.016em; line-height: 1.06;
  max-width: 19ch; margin: 0; color: var(--text-bright); text-wrap: balance;
}
.sh-hero-title em { font-style: normal; color: var(--accent-soft); }
/* Sous-titre du hero : les quatre domaines, passés sous le titre. Ce n'est pas
   un titre au sens du document — le balisage reste un paragraphe, seule la
   composition emprunte le calibre d'un h4. Graisse et chasse le distinguent du
   paragraphe qui suit, sans lui disputer le bleu du titre. */
.sh-hero-tagline {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1rem, 1.35vw, 1.16rem); line-height: 1.3;
  letter-spacing: -0.012em; color: var(--text-bright);
  margin: 0.85rem 0 0;
}
.sh-hero-sub {
  color: var(--muted-soft); font-size: clamp(1.02rem, 1.6vw, 1.18rem);
  margin-top: 1.1rem; max-width: 62ch;
}
/* Les deux appels à l'action, à droite du bandeau sombre. Ils y remplacent la
   rangée qui vivait dans le hero : la bande devient le pied du premier écran,
   avec la marque à gauche et l'action à droite. */
/* Empilés plutôt que côte à côte. Côte à côte, la rangée réclamait 547 px et
   comprimait la marque de 79 px — assez pour couper « L'IA amplifie. L'humain
   décide. » en deux lignes. Empilés, ils n'en prennent que 285 et la devise
   retrouve son seul tenant. `stretch` leur donne la même largeur : deux boutons
   de longueurs différentes alignés à droite feraient un bord en escalier. */
.sh-band-cta {
  display: flex; flex-direction: column; align-items: stretch;
  gap: 0.85rem; flex: 0 0 auto;
}
.sh-band-cta .sh-btn { justify-content: center; }
/* Signature, désormais dans le bandeau sombre, à droite de la vidéo. Plus de
   panneau : sur un aplat, le verre givré n'aurait rien à filtrer. Elle est
   composée en texte et non en image — sélectionnable, indexable, et elle suit
   la mise à l'échelle du navigateur. */
/* Les interlignes sont posés au cas par cas plutôt qu'avec une gouttière
   uniforme : le sigle appelle plus d'air sous lui que la ligne française sous
   la sienne, sinon les trois lignes se lisent comme un bloc compact au lieu
   d'une signature. */
.sh-signature { display: grid; }
.sh-signature p { margin: 0; }
.sh-signature .sh-sign-fr { margin-top: clamp(0.55rem, 1vw, 0.85rem); }
.sh-signature .sh-sign-en { margin-top: clamp(0.45rem, 0.8vw, 0.68rem); }
/* Le sigle reprend la coupe du logo : graisse pleine, chasse resserrée, et le
   « AI » au bleu de la charte. C'est une composition typographique — le fichier
   du logo, lui, n'est pas touché. */
.sh-sign-mark {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.6rem, 3vw, 2.6rem); line-height: 1;
  letter-spacing: -0.035em; color: var(--text-bright);
}
.sh-sign-mark b { font-weight: inherit; color: var(--accent-soft); }
.sh-sign-fr {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(0.98rem, 1.5vw, 1.3rem); line-height: 1.25;
  letter-spacing: -0.008em; color: var(--text); text-wrap: balance;
}
/* Retour au jeton `--muted` : la signature est passée sur fond sombre, où le
   gris foncé qu'elle portait auparavant serait devenu illisible. */
.sh-sign-en {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(0.6rem, 0.78vw, 0.72rem); text-transform: uppercase;
  letter-spacing: 0.26em; color: var(--muted);
}
/* Indice de défilement */
.sh-hero::after {
  content: ""; position: absolute; left: 50%; bottom: 1.6rem; width: 1px; height: 46px;
  background: linear-gradient(180deg, transparent, var(--line-lit));
  transform: translateX(-50%); transform-origin: bottom; z-index: 2;
  animation: shScrollCue 2.6s var(--ease) infinite;
}
@keyframes shScrollCue {
  0%, 100% { opacity: 0.15; transform: translateX(-50%) scaleY(0.55); }
  50%      { opacity: 0.9;  transform: translateX(-50%) scaleY(1); }
}

/* Bandeau de crédibilité sous le hero. Seule bande sombre entre le hero et les
   six signaux, tous deux clairs : elle sépare les deux et donne au chapelet de
   titres le poids d'un socle plutôt que d'une ligne de service. */
.sh-credentials {
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: var(--bg-2);
}
/* .sh-credentials-row porte aussi .sh-container : on ne touche qu'au padding
   vertical, sinon le raccourci `padding` effacerait la gouttière. */
.sh-credentials-row {
  display: flex; align-items: center; justify-content: space-between;
  /* `nowrap` : le repli se décide sur la taille idéale des blocs, AVANT toute
     compression. Avec `wrap`, la marque réclamait 624 px et les boutons 547 —
     9 px de trop — et les boutons décrochaient sur une deuxième rangée sans
     que `min-width: 0` n'ait la moindre chance d'agir. En interdisant le repli,
     la marque se comprime et la rangée tient. Le passage à la colonne est
     confié au palier 1080, pas au hasard du repli. */
  flex-wrap: nowrap; gap: clamp(1.4rem, 2.6vw, 2.4rem);
  padding-top: clamp(1.8rem, 3.4vw, 3rem);
  padding-bottom: clamp(1.8rem, 3.4vw, 3rem);
}
/* Vidéo et signature, calées sur le bord gauche du bandeau — donc alignées sur
   la gouttière du conteneur, comme les titres de toutes les sections en
   dessous. Le cadre de la vidéo est sobre : posé sur un aplat sombre et non sur
   une image, il n'a pas besoin d'ombre portée pour se détacher. */
/* `min-width: 0` : sans lui, un élément flex refuse de descendre sous sa
   largeur minimale de contenu — la ligne « L'IA amplifie… » gardait sa mesure
   d'un seul tenant, le total dépassait de 9 px et les boutons décrochaient sur
   une deuxième rangée. Avec, la signature se replie et la rangée tient. */
.sh-band-aside {
  display: flex; align-items: center; min-width: 0;
  gap: clamp(1.3rem, 2.6vw, 2.4rem);
}
.sh-band-media {
  width: clamp(180px, 20vw, 286px);
  border-radius: var(--radius-sm); overflow: hidden;
  border: 1px solid var(--line-lit);
}
.sh-band-media video { width: 100%; height: auto; display: block; }

/* Sous 1080 px, la marque et les boutons ne tiennent plus sur la même ligne
   sans écraser la signature : ils s'empilent, tous deux calés à gauche. */
@media (max-width: 1080px) {
  .sh-credentials-row { flex-direction: column; align-items: flex-start; }
  .sh-band-cta { justify-content: flex-start; }
}
/* Sous 560 px, la vidéo et la signature ne tiennent plus côte à côte : elles
   s'empilent, la vidéo sur toute la largeur du conteneur et la signature
   centrée sous elle. `align-items: stretch` est ce qui donne la pleine largeur
   — sans lui, la colonne flex ramènerait chaque bloc à son contenu. */
@media (max-width: 560px) {
  .sh-band-aside { flex-direction: column; align-items: stretch; }
  .sh-band-media { width: 100%; }
  .sh-signature { justify-items: center; text-align: center; }
  /* Les boutons passent pleine largeur plutôt que de se serrer à droite : à
     cette taille, une cible d'appui doit être franche. */
  .sh-band-cta { width: 100%; justify-content: stretch; }
  .sh-band-cta .sh-btn { flex: 1 1 100%; justify-content: center; }
}

/* En-tête de page intérieure — reprend le motif du hero en sourdine.
   Une bande fixe extraite de l'animation elle-même, déjà étalonnée froid dans
   le fichier : 12 Ko, plutôt qu'une seconde vidéo à décoder sur chaque page.
   Même géométrie que le hero — le visuel à droite, le texte sur l'aplat. */
.sh-page-hero {
  padding: calc(var(--nav-h) + clamp(2.1rem, 4.4vw, 3.4rem)) 0 clamp(1.4rem, 2.8vw, 2.1rem);
  border-bottom: 1px solid var(--line); position: relative; overflow: hidden;
  background: var(--bg);
}
.sh-page-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url("../images/brand/bande-entete.webp") right center / cover no-repeat;
  opacity: 0.5;
}
.sh-page-hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(96deg,
    #fdf9f4 0%, rgba(253, 249, 244, 0.93) 32%,
    rgba(253, 249, 244, 0.52) 58%, rgba(253, 249, 244, 0) 86%);
}
.sh-page-hero > .sh-container { position: relative; z-index: 2; }
.sh-page-hero .sh-section-title { font-size: var(--h1); letter-spacing: -0.016em; margin: 0.9rem 0 0; }
.sh-page-hero .sh-section-lead { max-width: 52rem; }
@media (max-width: 1080px) {
  /* Colonne unique : la bande recule pour ne jamais gêner le titre. */
  .sh-page-hero::before { opacity: 0.34; }
  .sh-page-hero::after {
    background: linear-gradient(96deg, #fdf9f4 0%, rgba(253, 249, 244, 0.94) 44%,
      rgba(253, 249, 244, 0.6) 74%, rgba(253, 249, 244, 0.1) 100%);
  }
}
.sh-back {
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted); display: inline-flex; gap: 0.5rem;
  transition: color 0.3s var(--ease), gap 0.3s var(--ease);
}
.sh-back:hover { color: var(--accent-soft); gap: 0.85rem; }

/* Fil d'Ariane */
.sh-crumbs {
  list-style: none; padding: 0; margin: 0 0 1.2rem; display: flex; flex-wrap: wrap; gap: 0.5rem;
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted);
}
.sh-crumbs li + li::before { content: "/"; margin-right: 0.5rem; opacity: 0.5; }
.sh-crumbs a:hover { color: var(--accent-soft); }

/* ==========================================================================
   7. GRILLES & CARTES
   ========================================================================== */
.sh-grid { display: grid; gap: 1.15rem; }
.sh-grid--4 { grid-template-columns: repeat(4, 1fr); }
.sh-grid--3 { grid-template-columns: repeat(3, 1fr); }
.sh-grid--2 { grid-template-columns: repeat(2, 1fr); }

.sh-card {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface-grad) 100%);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.75rem 1.65rem;
  box-shadow: var(--shadow-soft), inset 0 1px 0 var(--inset-lit);
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease),
              border-color 0.5s var(--ease), background 0.5s var(--ease);
}
.sh-card:hover {
  background: linear-gradient(180deg, var(--surface-2) 0%, var(--surface-grad-2) 100%);
  border-color: var(--line-lit); transform: translateY(-6px);
  box-shadow: var(--shadow-card), inset 0 1px 0 var(--glow);
}

.sh-card-index { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.14em; color: var(--accent-soft); }
.sh-card-title { font-size: var(--h3); margin: 0.85rem 0 0.6rem; color: var(--text-bright); }
/* Carte sans titre (les six signaux) : le texte reprend l'air du titre absent. */
.sh-card-index + .sh-card-text { margin-top: 1.1rem; }
/* Les six signaux, et eux seuls : le numéro devient un chiffre d'appel, gros et
   plein, dans un gris clair qui le tient derrière le texte. Il change de rôle —
   ce n'est plus une étiquette technique en petites capitales, c'est un repère
   visuel qui donne le rythme de la grille.
   Portée limitée à #signaux : les mêmes `.sh-card-index` servent ailleurs
   (services.html, 404) où ils doivent rester discrets. */
#signaux .sh-card-index {
  display: block;
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2.1rem, 3.1vw, 2.75rem);
  line-height: 0.88; letter-spacing: -0.045em;
  color: #d4d8de;
}
#signaux .sh-card-index + .sh-card-text { margin-top: 1.35rem; }
.sh-card-text { color: var(--muted); font-size: 0.95rem; margin: 0; }
.sh-card-text strong { color: var(--text); font-weight: 500; }
.sh-card-note {
  margin: 1.1rem 0 0; padding-top: 0.9rem; border-top: 1px solid var(--line);
  color: var(--muted-soft); font-size: 0.88rem; font-style: italic;
}

/* Carte-lien (accès) */
.sh-card--link { display: flex; flex-direction: column; min-height: 235px; justify-content: space-between; }
.sh-card--link .sh-arrow-link { margin-top: 1.4rem; }

/* Carte offre : durée + punch */
.sh-offer-duration {
  display: inline-block; padding: 0.24rem 0.62rem; border-radius: 999px;
  border: 1px solid var(--line-strong); background: var(--bg);
  font-family: var(--font-mono); font-size: 0.63rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted-soft);
}
.sh-offer-punch {
  margin: 1.1rem 0 0; padding-left: 0.9rem; border-left: 2px solid var(--accent);
  font-family: var(--font-display); font-size: 1.05rem; line-height: 1.45; color: var(--text);
}

/* Carte article (perspectives) */
.sh-post {
  display: flex; flex-direction: column; overflow: hidden;
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface-grad) 100%);
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease), border-color 0.5s var(--ease);
}
.sh-post:hover { transform: translateY(-6px); box-shadow: var(--shadow-card); border-color: var(--line-lit); }
/* Les visuels sources sont verticaux, mais un cadre 4/3 rendait les cartes
   trop hautes : en 3/2 on garde l'essentiel du visuel et la grille respire. */
.sh-post-media { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--bg-2); }
.sh-post-media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.7) brightness(0.85); transition: transform 0.7s var(--ease), filter 0.5s var(--ease); }
.sh-post:hover .sh-post-media img { transform: scale(1.05); filter: saturate(0.95) brightness(1); }
.sh-post-media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 40%, var(--media-veil-2) 100%);
}
.sh-post-body { padding: 1.15rem 1.25rem 1.3rem; display: flex; flex-direction: column; gap: 0.55rem; flex: 1; }
.sh-post-meta {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1rem;
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--accent-soft);
}
.sh-post-meta .sh-post-time { color: var(--muted); }
.sh-post-title { font-size: 1.1rem; line-height: 1.4; color: var(--text-bright); font-family: var(--font-body); font-weight: 600; letter-spacing: -0.008em; }
.sh-post-excerpt { color: var(--muted); font-size: 0.92rem; margin: 0; }
.sh-post .sh-arrow-link { margin-top: auto; padding-top: 0.6rem; }

/* --------------------------------------------------------------------------
   RÉSEAU DE SIGNAUX — la démonstration plutôt que l'énumération.
   Les liens sont tracés SOUS les cartes : opaques, elles les masquent, et on
   ne les aperçoit que dans les interstices de la grille. Sous la dernière
   rangée, les six fils convergent vers un point unique qui pointe vers la
   charnière « Ils ne le sont pas ». La relation préexiste ; ce sont les
   silos qui la rendent invisible.
   Géométrie calculée en JS (offsetLeft/offsetTop : insensibles aux
   transformations de révélation) et recalculée au redimensionnement.
   -------------------------------------------------------------------------- */
.sh-network { position: relative; }
.sh-network > .sh-grid { position: relative; z-index: 1; }
.sh-net-svg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 0; pointer-events: none; overflow: visible;
}
.sh-net-space { height: clamp(76px, 9vw, 124px); }
.sh-section--converge { padding-bottom: clamp(1.4rem, 3vw, 2.4rem); }

.sh-net-line {
  fill: none; stroke: var(--line-lit); stroke-width: 1; stroke-linecap: round;
  stroke-dasharray: var(--len); stroke-dashoffset: var(--len);
  transition: stroke-dashoffset 1.5s var(--ease-out);
}
.sh-network.is-drawn .sh-net-line { stroke-dashoffset: 0; }

.sh-net-node, .sh-net-hub { fill: var(--accent); opacity: 0; transition: opacity 0.7s var(--ease); }
.sh-network.is-drawn .sh-net-node { opacity: 0.8; }
.sh-network.is-drawn .sh-net-hub { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .sh-net-line { stroke-dashoffset: 0; transition: none; }
  .sh-net-node, .sh-net-hub { opacity: 0.8; transition: none; }
}

/* --------------------------------------------------------------------------
   MATRICE IMPACT / EFFORT — l'instrument, dessiné une fois.
   Le livrable réel du Diagnostic 5.0. Sobre par construction : deux axes,
   deux médianes, un quadrant teinté, six points. Aucune couleur décorative.
   La figure porte role="img" + title/desc ; la légende reprend l'information
   en texte, donc rien n'est réservé à ceux qui voient le dessin.
   -------------------------------------------------------------------------- */
.sh-matrix-wrap {
  display: grid; grid-template-columns: 1.3fr 0.85fr;
  gap: clamp(2rem, 4vw, 3.5rem); align-items: start;
}
.sh-matrix { margin: 0; }
.sh-matrix svg { width: 100%; height: auto; overflow: visible; }
.sh-matrix .sh-figure-cap { margin-top: 1.1rem; }

.sh-mx-zone { fill: var(--accent); opacity: 0.075; }
.sh-mx-axis { stroke: var(--line-strong); stroke-width: 1; }
.sh-mx-mid { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 5; }
.sh-mx-quad {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; fill: var(--muted);
}
.sh-mx-quad--out { opacity: 0.6; }
.sh-mx-axis-label {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.24em; fill: var(--text);
}
.sh-mx-scale {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.14em; fill: var(--muted); opacity: 0.8;
}
.sh-mx-dot { fill: var(--accent); }
.sh-mx-dot--out { fill: none; stroke: var(--accent); stroke-width: 1.4; opacity: 0.75; }
.sh-mx-num { font-family: var(--font-mono); font-size: 11px; fill: var(--text); }
.sh-mx-num--out { fill: var(--muted); }
/* Les chantiers se posent un à un, comme on les relève. */
.sh-mx-point { opacity: 0; transition: opacity 0.7s var(--ease); }
.sh-reveal.is-in .sh-mx-point { opacity: 1; }

.sh-matrix-legend .sh-contact-label { margin-bottom: 1.4rem; }
.sh-matrix-legend ol { list-style: none; padding: 0; margin: 0; }
.sh-matrix-legend li {
  display: grid; grid-template-columns: auto 1fr; gap: 0.95rem; align-items: baseline;
  padding: 0 0 0.85rem; margin-bottom: 0.85rem; border-bottom: 1px solid var(--line);
}
.sh-matrix-legend li:last-of-type { border-bottom: 0; }
.sh-matrix-key {
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; color: var(--accent-soft);
}
.sh-matrix-name { display: block; color: var(--text); font-size: 0.98rem; line-height: 1.45; }
.sh-matrix-tag {
  display: block; margin-top: 0.28rem; font-family: var(--font-mono);
  font-size: 0.63rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted);
}
.sh-matrix-legend li.is-out .sh-matrix-key { color: var(--muted); }
.sh-matrix-legend li.is-out .sh-matrix-name { color: var(--muted); }
.sh-matrix-note {
  margin: 1.4rem 0 0; padding-top: 1.2rem; border-top: 1px solid var(--line);
  font-family: var(--font-display); font-size: 1.04rem; line-height: 1.5; color: var(--text);
}

@media (max-width: 940px) {
  .sh-matrix-wrap { grid-template-columns: 1fr; }
  .sh-matrix { max-width: 40rem; }
  /* La figure rétrécit : on regrossit son étiquetage dans le viewBox. */
  .sh-mx-quad, .sh-mx-axis-label { font-size: 13px; }
  .sh-mx-scale { font-size: 12px; }
  .sh-mx-num { font-size: 14px; }
}
@media (max-width: 620px) {
  .sh-mx-quad, .sh-mx-axis-label { font-size: 17px; letter-spacing: 0.12em; }
  .sh-mx-scale { font-size: 15px; }
  .sh-mx-num { font-size: 18px; }
  .sh-mx-dot, .sh-mx-dot--out { r: 7; }
}
@media (prefers-reduced-motion: reduce) {
  .sh-mx-point { opacity: 1; transition: none; }
}

/* --------------------------------------------------------------------------
   PROPOSITION DE CONTENU — bloc provisoire, signalé comme tel.
   Bordure tiretée et pastille : rien ici ne doit passer pour du contenu validé.
   Le découpage est fait de fragments de ses propres phrases ; seuls les deux
   intitulés de colonne viennent de l'agence.
   -------------------------------------------------------------------------- */
.sh-proposal {
  position: relative; border: 1px dashed var(--line-strong); border-radius: var(--radius);
  background: var(--bg-2);
  display: grid; grid-template-columns: 0.72fr 1.28fr;
  gap: clamp(1.5rem, 3vw, 2.6rem);
  padding: clamp(1.5rem, 3vw, 2.2rem);
}
/* Le visuel accompagne une longue liste : il colle au défilement plutôt que
   de s'étirer sur toute la hauteur, ce qui écraserait le cadrage du portrait. */
.sh-proposal-media { margin: 0; align-self: start; position: sticky; top: calc(var(--nav-h) + 1rem); }
.sh-proposal-media img {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 22%;
  border-radius: var(--radius-sm);
}
.sh-proposal-media figcaption {
  margin-top: 0.7rem; font-family: var(--font-mono); font-size: 0.62rem;
  line-height: 1.55; letter-spacing: 0.04em; color: var(--muted);
}
@media (max-width: 940px) {
  .sh-proposal { grid-template-columns: 1fr; }
  .sh-proposal-media { position: static; max-width: 18rem; }
}
.sh-proposal-tag {
  display: inline-block; margin: 0 0 1.1rem;
  padding: 0.3rem 0.7rem; border-radius: 4px;
  background: var(--brand-dark); color: #fff;
  font-family: var(--font-mono); font-size: 0.6rem;
  letter-spacing: 0.16em; text-transform: uppercase;
}
.sh-proposal-note {
  max-width: 56ch; margin: 0.9rem 0 clamp(1.8rem, 3.4vw, 2.6rem);
  color: var(--muted); font-size: 0.92rem;
}
.sh-proposal-note strong { color: var(--text); }

.sh-prop-item { padding-top: 1.4rem; border-top: 1px solid var(--line); }
.sh-prop-item + .sh-prop-item { margin-top: 1.4rem; }
.sh-prop-item > h3 {
  font-size: 1.02rem; color: var(--text-bright); margin-bottom: 1rem;
}
.sh-prop-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem 2rem; }
.sh-prop-col h4 {
  font-family: var(--font-mono); font-size: 0.62rem; font-weight: 400;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-soft);
  margin-bottom: 0.7rem;
}
.sh-prop-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.42rem; }
.sh-prop-col li {
  position: relative; padding-left: 1.35rem; color: var(--muted-soft);
  font-size: 0.9rem; line-height: 1.5;
}
.sh-prop-col li::before {
  content: ""; position: absolute; left: 0; top: 0.38em;
  width: 9px; height: 5px; border-left: 1.6px solid var(--accent);
  border-bottom: 1.6px solid var(--accent); transform: rotate(-45deg);
}
.sh-prop-manque { margin: 0; color: var(--muted); font-size: 0.86rem; font-style: italic; opacity: 0.8; }
@media (max-width: 680px) { .sh-prop-cols { grid-template-columns: 1fr; } }

/* Puces / listes d'industries */
.sh-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; padding: 0; margin: 0; }
.sh-chip {
  border: 1px solid var(--line-strong); border-radius: 6px; padding: 0.4rem 0.85rem;
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em; color: var(--muted-soft);
  background: var(--chip-bg);
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease), background 0.3s var(--ease);
}
.sh-chip:hover { border-color: var(--accent); color: var(--text-bright); background: var(--chip-bg-hover); }
/* Les technologies qu'elle cite sont extraites de ses phrases et rendues comme
   des étiquettes : aucun mot ajouté, mais elles cessent d'être noyées dans un
   paragraphe. C'est le seul signal « technique » que le contenu fournissait
   déjà sans qu'on l'exploite. */
.sh-chips--tech { margin: 0 0 0.95rem; gap: 0.38rem; }
.sh-chips--tech .sh-chip {
  font-size: 0.66rem; padding: 0.3rem 0.62rem; letter-spacing: 0.06em;
  color: var(--muted-soft); border-color: var(--line);
}
.sh-chips--tech .sh-chip:hover { color: var(--accent-soft); border-color: var(--line-lit); background: transparent; }

/* ==========================================================================
   8. BANDEAU CHARNIÈRE / CITATION
   ========================================================================== */
.sh-quote {
  text-align: center; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(10, 23, 48, 0.72) 0%, var(--bg) 100%);
}
/* Une référence citée une fois, attribuée. Pas un carrousel : une preuve. */
.sh-testimonial { max-width: 52rem; margin: 1.15rem auto 0; }
.sh-quote-text {
  font-family: var(--font-display); font-size: clamp(1.2rem, 2.2vw, 1.72rem);
  line-height: 1.45; max-width: 46ch; margin: 0 auto; color: var(--text-bright);
  text-wrap: balance; hanging-punctuation: first last;
}
.sh-quote-author {
  display: block; margin-top: 1.1rem; font-family: var(--font-mono);
  font-size: 0.72rem; letter-spacing: 0.14em; color: var(--accent-soft); text-transform: uppercase; font-style: normal;
}
.sh-quote-author small { display: block; color: var(--muted); letter-spacing: 0.1em; margin-top: 0.35rem; text-transform: none; }

/* Bandeau d'affirmation (pas une citation d'auteur) */
.sh-statement { text-align: center; }
.sh-statement p {
  font-family: var(--font-display); font-size: clamp(1.35rem, 2.7vw, 2.05rem);
  line-height: 1.32; max-width: 24ch; margin: 0 auto; color: var(--text-bright); text-wrap: balance;
}
.sh-statement p + p { margin-top: 1.2rem; color: var(--accent-soft); }
.sh-statement p.sh-statement-note {
  max-width: 44rem; margin: 2.2rem auto 0; color: var(--muted);
  font-family: var(--font-body); font-size: 1.02rem; line-height: 1.75;
}

/* ==========================================================================
   9. ÉTAPES / PROCESSUS
   ========================================================================== */
.sh-steps { position: relative; margin-left: 0.5rem; padding-left: 2.2rem; border-left: 1px solid var(--line-strong); }
.sh-step { position: relative; padding: 0 0 2.3rem; }
.sh-step:last-child { padding-bottom: 0; }
.sh-step::before {
  content: ""; position: absolute; left: calc(-2.2rem - 5px); top: 8px; width: 9px; height: 9px;
  border-radius: 50%; background: var(--bg); border: 1.5px solid var(--accent);
  box-shadow: 0 0 12px var(--glow);
}
.sh-step-index { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.18em; color: var(--accent-soft); text-transform: uppercase; }
.sh-step-title { font-size: var(--h3); margin: 0.35rem 0 0.5rem; color: var(--text-bright); }
.sh-step-text { color: var(--muted); margin: 0; max-width: 58ch; }

/* ==========================================================================
   10. PROSE / SPLIT ÉDITORIAL
   ========================================================================== */
.sh-prose { max-width: 44rem; }
.sh-prose p { color: var(--muted-soft); font-size: 1.06rem; }
.sh-prose p.sh-lead { font-size: 1.28rem; color: var(--text); font-family: var(--font-display); line-height: 1.5; }
.sh-prose h3 { font-size: 1.18rem; margin: 2.2rem 0 0.7rem; color: var(--text-bright); }
.sh-prose a:not(.sh-btn) { color: var(--accent-soft); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.sh-prose a:not(.sh-btn):hover { color: var(--text-bright); }
.sh-prose .sh-section-title { margin-bottom: clamp(1.4rem, 3vw, 2rem); }
.sh-prose .sh-section-title + .sh-lead, .sh-prose .sh-section-title + p { margin-top: 0; }

.sh-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.sh-split--portrait { grid-template-columns: 0.85fr 1.15fr; }
.sh-split-media {
  position: relative; overflow: hidden; border-radius: var(--radius);
  box-shadow: var(--shadow-media);
}
.sh-split-media img { width: 100%; border-radius: inherit; filter: saturate(0.82) contrast(1.04); }
.sh-split-media::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, transparent 52%, var(--media-veil) 100%);
  box-shadow: inset 0 0 0 1px var(--line);
}
.sh-figure-cap { margin-top: 0.7rem; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.06em; color: var(--muted); }

/* Encadré */
.sh-note {
  border: 1px solid var(--line-strong); border-left: 2px solid var(--accent);
  border-radius: var(--radius-sm); padding: 1.3rem 1.5rem;
  background: var(--surface); color: var(--muted-soft); font-size: 0.94rem;
}
.sh-note strong { color: var(--text); }

/* Liste de faits (diplômes, distinctions) */
.sh-facts { list-style: none; padding: 0; margin: 1.8rem 0 0; display: flex; flex-direction: column; gap: 0.55rem; }
.sh-facts li {
  display: flex; gap: 0.8rem; align-items: baseline;
  font-family: var(--font-mono); font-size: 0.76rem; letter-spacing: 0.06em; color: var(--muted-soft);
}
.sh-facts li::before { content: "▚"; color: var(--accent); font-size: 0.62rem; }

/* ==========================================================================
   11. ARTICLE (perspectives)
   ========================================================================== */
.sh-article { max-width: 44rem; margin: 0 auto; }
.sh-article p { color: var(--muted-soft); font-size: 1.08rem; line-height: 1.78; }
.sh-article > p:first-of-type { font-size: 1.24rem; color: var(--text); font-family: var(--font-display); line-height: 1.55; }
.sh-article h2 {
  font-size: clamp(1.5rem, 2.6vw, 2rem); color: var(--text-bright);
  margin: clamp(2.6rem, 5vw, 3.6rem) 0 1rem; letter-spacing: -0.008em; text-wrap: balance;
}
.sh-article h3 { font-size: 1.18rem; color: var(--text-bright); margin: 2rem 0 0.7rem; }
.sh-article ul { padding-left: 0; margin: 0 0 1.6rem; list-style: none; }
.sh-article ul li {
  position: relative; padding-left: 1.5rem; margin-bottom: 0.6rem; color: var(--muted-soft); font-size: 1.04rem;
}
.sh-article ul li::before {
  content: ""; position: absolute; left: 0; top: 0.72em; width: 7px; height: 1px; background: var(--accent);
}
.sh-article blockquote {
  margin: 2rem 0; padding: 1.4rem 1.6rem;
  border-left: 2px solid var(--accent); background: var(--surface); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.sh-article blockquote p { margin: 0; font-family: var(--font-display); font-size: 1.16rem; color: var(--text); line-height: 1.55; }
.sh-article-punch {
  margin: 2.4rem 0; padding: 1.5rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  font-family: var(--font-display); font-size: clamp(1.24rem, 2.4vw, 1.7rem); line-height: 1.4;
  color: var(--text-bright); text-wrap: balance;
}
.sh-article-meta {
  display: flex; flex-wrap: wrap; gap: 0.6rem 1.4rem; margin-top: 1.4rem;
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
}

/* ==========================================================================
   12. CONTACT / CTA
   ========================================================================== */
.sh-cta-box {
  text-align: center; max-width: 46rem; margin: 0 auto;
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  padding: clamp(2.2rem, 4.4vw, 3.2rem) clamp(1.6rem, 4vw, 3rem);
  background:
    radial-gradient(120% 120% at 50% 0%, var(--cta-halo), transparent 62%),
    linear-gradient(180deg, var(--surface) 0%, var(--cta-grad) 100%);
  box-shadow: var(--shadow-card);
}
.sh-cta-box .sh-section-title { margin-top: 0.95rem; }
/* Le titre et le paragraphe se touchaient : le titre n'a pas de marge basse
   et le paragraphe n'avait pas de marge haute. */
.sh-cta-box .sh-section-title + p { margin-top: 1.25rem; }
.sh-cta-box p { color: var(--muted-soft); max-width: 46ch; margin-left: auto; margin-right: auto; }
.sh-cta-actions { display: flex; flex-wrap: wrap; gap: 0.9rem; justify-content: center; margin-top: 2rem; }

.sh-contact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin-top: clamp(2rem, 4vw, 3rem); }
.sh-contact-item {
  border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem 1.6rem; background: var(--surface);
}
.sh-contact-label {
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--accent-soft); margin: 0 0 0.6rem;
}
.sh-contact-value { margin: 0; color: var(--text); font-size: 1.02rem; }
.sh-contact-value a { border-bottom: 1px solid transparent; transition: border-color 0.3s var(--ease), color 0.3s var(--ease); }
.sh-contact-value a:hover { color: var(--accent-soft); border-bottom-color: var(--accent); }
.sh-mail-big {
  display: inline-block; margin-top: 1.4rem; font-family: var(--font-display);
  font-size: clamp(1.3rem, 3vw, 2rem); color: var(--accent-soft);
  border-bottom: 1px solid transparent; transition: border-color 0.3s var(--ease);
  word-break: break-word;
}
.sh-mail-big:hover { border-bottom-color: var(--accent); }

/* FAQ */
.sh-faq { border-top: 1px solid var(--line); }
.sh-faq details { border-bottom: 1px solid var(--line); padding: 1.2rem 0; }
.sh-faq summary {
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 1.5rem;
  font-family: var(--font-display); font-size: 1.1rem; color: var(--text-bright);
}
.sh-faq summary::-webkit-details-marker { display: none; }
.sh-faq summary::after { content: "+"; color: var(--accent-soft); font-family: var(--font-mono); transition: transform 0.3s var(--ease); }
.sh-faq details[open] summary::after { transform: rotate(45deg); }
.sh-faq details p { margin: 0.9rem 0 0; color: var(--muted); max-width: 60ch; }

/* ==========================================================================
   13. FOOTER
   ========================================================================== */
.sh-footer {
  position: relative; border-top: 1px solid var(--line);
  padding: clamp(3rem, 6vw, 5rem) 0 2.5rem;
  background: linear-gradient(180deg, var(--bg-2) 0%, var(--abyss) 100%);
}
.sh-footer::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: var(--line-strong);
}
.sh-footer-grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr; gap: 2.5rem; }
.sh-footer-desc { color: var(--muted); font-size: 0.92rem; max-width: 36ch; margin-top: 1.2rem; }
.sh-footer-tag { font-family: var(--font-display); color: var(--text); margin-top: 0.9rem; }
.sh-footer-tag span { display: block; color: var(--muted); font-family: var(--font-body); font-style: italic; font-size: 0.9rem; }
.sh-footer-col h2 {
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--accent-soft); margin-bottom: 1.1rem; font-weight: 400;
}
.sh-footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.7rem; }
.sh-footer-col a { color: var(--muted); font-size: 0.9rem; position: relative; display: inline-block; }
.sh-footer-col a:hover { color: var(--text); }
.sh-footer-col a::after {
  content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 1px; background: var(--accent);
  transform: scaleX(0); transform-origin: left center; transition: transform 0.4s var(--ease);
}
.sh-footer-col a:hover::after { transform: scaleX(1); }
.sh-footer-bottom {
  margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 1.6rem; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 0.6rem 2rem; justify-content: space-between;
}
.sh-footer-bottom p { color: rgba(147, 162, 187, 0.72); font-size: 0.8rem; margin: 0; }

/* Retour en haut */
.sh-to-top {
  position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 90; width: 46px; height: 46px;
  border-radius: 50%; background: var(--surface); border: 1px solid var(--line-strong); color: var(--text);
  display: grid; place-items: center; opacity: 0; pointer-events: none; transform: translateY(10px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease), border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.sh-to-top.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
.sh-to-top:hover { border-color: var(--accent); color: var(--accent-soft); }
.sh-to-top::before { content: "↑"; font-size: 1.1rem; }

/* ==========================================================================
   14. RÉVÉLATIONS
   ========================================================================== */
.sh-reveal {
  opacity: 0; transform: translateY(30px) scale(0.992);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}
.sh-reveal:not(.is-in) { will-change: opacity, transform; }
.sh-reveal.is-in { opacity: 1; transform: none; }
.sh-reveal[data-delay="1"] { transition-delay: 0.08s; }
.sh-reveal[data-delay="2"] { transition-delay: 0.16s; }
.sh-reveal[data-delay="3"] { transition-delay: 0.24s; }
.sh-parallax { will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .sh-reveal { opacity: 1 !important; transform: none !important; transition: none; }
  .sh-hero::after { animation: none; opacity: 0.4; }
  .sh-section-head::after, .sh-kicker::before { transform: none !important; transition: none; }
  .sh-btn--primary::after { display: none; }
  .sh-parallax { transform: none !important; }
  main::after { opacity: 0.016; }
}

/* ==========================================================================
   15. RESPONSIVE
   ========================================================================== */
/* Sous 1200 px, le panneau cesse d'être calé à droite : la colonne d'image
   restante ne suffit plus à porter la composition, il prend toute la largeur. */
@media (max-width: 1200px) {
  /* `width: auto` et non `max-width: none` : la largeur est imposée par
     `width` plus haut, qu'un plafond ne peut pas défaire. */
  .sh-hero-text { justify-self: stretch; width: auto; }
  .sh-hero-text > * { margin-left: 0; }
  /* Tablette et mobile : le conteneur devient étroit et haut, le recadrage
     « cover » écarte donc une grande part de la largeur. On garde la moitié
     CLAIRE de l'image — c'est elle qui doit porter le texte, la boîte étant
     désormais translucide ici aussi.
     Attention à la valeur : le conteneur est miroité (scaleX(-1)), si bien que
     la droite à l'écran correspond au bord GAUCHE de l'image source. `0%` est
     donc bien ce qui aligne à droite une fois rendu — `100%` ferait l'inverse. */
  .sh-hero-bg img { object-position: 0% 62%; }
}
@media (max-width: 1080px) {
  .sh-hero-bg::after {
    background:
      linear-gradient(96deg, rgba(253, 249, 244, 0.92) 0%, rgba(253, 249, 244, 0.78) 38%,
        rgba(253, 249, 244, 0.4) 70%, rgba(253, 249, 244, 0.06) 96%),
      linear-gradient(180deg, rgba(253, 249, 244, 0.92) 0%, rgba(253, 249, 244, 0) 15%);
  }
  .sh-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .sh-nav-links { gap: 1.15rem; }
  .sh-nav-link { font-size: 0.7rem; letter-spacing: 0.08em; }
}
@media (max-width: 940px) {
  .sh-nav-cta { display: none; }
  .sh-nav-links {
    position: fixed; inset: var(--nav-h) 0 auto 0; flex-direction: column; align-items: flex-start; gap: 0;
    background: linear-gradient(180deg, #050d20 0%, #02060f 100%);
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.55);
    border-bottom: 1px solid var(--line); padding: 0.5rem var(--gutter) 1.6rem;
    transform: translateY(-12px); opacity: 0; pointer-events: none;
    transition: transform 0.35s var(--ease), opacity 0.35s var(--ease);
    max-height: calc(100svh - var(--nav-h)); overflow-y: auto;
  }
  .sh-nav.is-on-light .sh-nav-links {
    background: linear-gradient(180deg, #fffdfa 0%, #f2ece2 100%);
    box-shadow: 0 24px 48px rgba(14, 21, 32, 0.16);
    border-bottom-color: rgba(14, 21, 32, 0.12);
  }
  .sh-nav.is-on-light .sh-nav-link { border-bottom-color: rgba(14, 21, 32, 0.1); }
  .sh-nav-links.is-open { transform: none; opacity: 1; pointer-events: auto; }
  .sh-nav-links li { width: 100%; }
  .sh-nav-link { display: block; width: 100%; padding: 0.95rem 0; border-bottom: 1px solid var(--line); font-size: 0.82rem; }
  .sh-burger { display: flex; }
  .sh-grid--3, .sh-grid--2 { grid-template-columns: repeat(2, 1fr); }
  .sh-split, .sh-split--portrait { grid-template-columns: 1fr; }
  .sh-split-media { order: -1; max-width: 30rem; }
  .sh-contact-grid { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .sh-grid--4, .sh-grid--3, .sh-grid--2 { grid-template-columns: 1fr; }
  .sh-footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  /* Plus de hauteur imposée : le hero épouse son contenu. Les 94svh laissaient
     300 px d'image nue sous la boîte — un vide qui n'existait que parce que la
     hauteur était fixée à la fenêtre, alors que le contenu, une fois empilé,
     n'en réclame que la moitié. */
  .sh-hero { min-height: auto; }
  .sh-hero-title { max-width: 100%; }
  .sh-steps { padding-left: 1.6rem; }
  .sh-step::before { left: calc(-1.6rem - 5px); }
  .sh-logo-img { height: 37px; }
  .sh-logo--footer .sh-logo-img { height: 42px; }
}

/* ==========================================================================
   16. IMPRESSION
   ========================================================================== */
@media print {
  body { background: #fff; color: #111; }
  body::before, body::after, main::after, .sh-nav, .sh-to-top, .sh-hero-bg, .sh-footer { display: none !important; }
  .sh-reveal { opacity: 1 !important; transform: none !important; }
  a { color: #111; }
  .sh-article p, .sh-prose p { color: #222; }
}