/* ==========================================================================
   THE ICON MARKETING : Design System Swiss / Brutaliste moderne
   ========================================================================== */

/* ---------- Fonts ---------- */
@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo-variable.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-display: swap;
}
/* Licence "personal use" (voir assets/fonts/LICENSE-HansonBold.txt) : usage
   commercial à valider auprès de hansonmethod.com/hansonbold avant mise en ligne */
@font-face {
  font-family: 'Hanson Bold';
  src: url('../fonts/hanson-bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
}
/* Aucune licence fournie avec les fichiers source : à vérifier avant mise en ligne commerciale */
/* Version droite (non penchée), utilisée pour la nav */

/* ---------- Tokens ---------- */
/* Palette alignée sur "The Icon Marketing - Charte Graphique.html" */
:root {
  --onyx: #0D0D0D;
  --black: #000000;
  --white: #FFFFFF;
  --paper: #F3F3F5;
  --silver: #BFC0C7;
  --steel: #6E6E78;
  --anthracite: #1A1A1D;
  --line-dark: rgba(191, 192, 199, 0.16);
  --line-light: #E4E4E8;
  /* Nuances additionnelles de la charte */
  --pearl: #C9C9CF;
  --silver-light: #DEDEE3;
  --silver-dark: #8B8C95;
  /* Accent rare, réservé à quelques détails signature (cf. charte : "gaufrage, détail premium") */
  --champagne: #C8B68F;
  --silver-sheen: linear-gradient(125deg, #8c8d96 0%, #e9e9ee 26%, #b6b7bf 48%, #f3f3f6 62%, #9a9ba4 82%, #cfd0d6 100%);

  /* Deux familles, et deux seulement.
     --font-title : Hanson Bold, la police du hero de l'accueil, promue police
       de titre de tout le site le 2026-09-08. Elle porte le bas de casse et
       les accents français, elle ne se limite donc pas aux capitales.
     --font-display / --font-mono : Archivo, le corps et toute l'interface.
       Les deux noms désignent la même famille depuis longtemps ; ils sont
       gardés parce qu'une soixantaine de règles s'y réfèrent.
     Space Mono était chargée sans jamais être appelée, 191 Ko pour rien, et
     Aero Medium ne servait qu'au menu : les deux sont retirées. */
  --font-title: 'Hanson Bold', Arial, sans-serif;
  --font-display: 'Archivo', system-ui, sans-serif;
  --font-mono: 'Archivo', system-ui, sans-serif;

  --pad-x: clamp(1.25rem, 4vw, 4rem);
  /* Deux paliers, et deux seulement. Le standard sépare deux sections de plein
     droit ; le resserré vaut pour celles qui prolongent la précédente plutôt
     que d'ouvrir un nouveau sujet (le constat après le hero, la preuve, la
     FAQ, le bandeau d'outils). Avant, chacune de ces quatre sections portait
     son propre clamp : 96, 86, 80 et 80 px sur un écran de 1440, pour un
     standard à 144. Quatre valeurs pour une même intention. */
  --section-gap: clamp(3.5rem, 7vw, 7rem);
  --section-gap-tight: clamp(2.75rem, 5.5vw, 5.5rem);
  /* Hauteur réservée en haut d'une page pour passer sous l'en-tête fixe.
     Trois blocs faisaient ce même travail avec trois valeurs différentes :
     112 px pour le hero de page de service, 120 pour les calculateurs, 135
     pour les pages légales et contact. */
  --page-top: clamp(7rem, 12vh, 9.5rem);
}

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Pas de scroll-behavior:smooth ici : Lenis pilote le défilement et les deux entrent en conflit */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  font-family: var(--font-display);
  font-weight: 400;
  background: var(--paper);
  color: var(--onyx);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
/* Liens vers des pages pas encore en ligne : on retire le href au lieu de
   pointer vers un 404 ou une ancre vide. Sans href, l'élément n'est plus un
   lien (aucune navigation, pas de focus clavier, pas annoncé comme lien par
   les lecteurs d'écran) alors que son rendu ne bouge pas d'un pixel.
   data-href conserve la destination prévue : rebrancher = renommer l'attribut.
   Seul le curseur redevient une flèche, pour ne pas promettre un clic. */
a[data-inactive] { cursor: default; }
ul, ol { list-style: none; }

.mono {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
}

:focus-visible { outline: 2px solid var(--champagne); outline-offset: 3px; }

/* ---------- Curseur personnalisé : anneau qui suit la souris ---------- */
/* mix-blend-mode: difference sur un anneau blanc s'inverse tout seul selon
   le fond (noir devient blanc, blanc devient noir) : pas besoin de gérer
   les sections claires/sombres séparément. */
.cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  width: 56px;
  height: 56px;
  margin: -28px 0 0 -28px;
  border: 1px solid var(--white);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  mix-blend-mode: difference;
  opacity: 0;
  transition: opacity 0.25s ease;
  will-change: transform;
}
.cursor-ring.is-visible { opacity: 1; }
@media (pointer: coarse) {
  .cursor-ring { display: none; }
}

/* ==========================================================================
   ÉCRAN DE CHARGEMENT
   Le contenu n'apparaît qu'une fois les polices et l'image du hero chargées :
   plus de bascule de police ni d'éléments qui se replacent.
   ========================================================================== */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  background: var(--onyx);
  transition: background-color 0.9s ease 0.1s;
}
.js-loading .preloader { display: flex; }
/* Dès qu'il s'efface, le calque ne doit plus intercepter les clics :
   il reste dans le DOM le temps du fondu. */
.preloader.is-clearing { background-color: transparent; pointer-events: none; }

.preloader-word {
  font-family: var(--font-display);
  font-weight: 850;
  font-size: clamp(2.6rem, 9vw, 7rem);
  letter-spacing: -0.03em;
  line-height: 0.82;
  color: var(--white);
  white-space: nowrap;
  will-change: transform;
}
.preloader-word span {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.3em);
  animation: pl-letter 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
.preloader-word span:nth-child(1) { animation-delay: 0.05s; }
.preloader-word span:nth-child(2) { animation-delay: 0.12s; }
.preloader-word span:nth-child(3) { animation-delay: 0.19s; }
.preloader-word span:nth-child(4) { animation-delay: 0.26s; }
.preloader-word span:nth-child(5) { animation-delay: 0.33s; }
.preloader-word span:nth-child(6) { animation-delay: 0.40s; }
.preloader-word span:nth-child(7) { animation-delay: 0.47s; }
.preloader-word span:nth-child(8) { animation-delay: 0.54s; }
.preloader-word .pl-space { animation: none; opacity: 1; transform: none; }
@keyframes pl-letter {
  to { opacity: 1; transform: none; }
}

/* Le site attend, sans disparaître du flux : les mesures restent justes.
   Il revient d'un coup, sans fondu : le calque opaque le couvre encore, et un
   contenu semi-transparent laisserait voir le fond clair de la page. */
.js-loading body > *:not(.preloader) { opacity: 0; }
/* Fond sombre sous le calque : aucun blanc ne transparaît pendant la bascule */
.js-loading body { background: var(--onyx); }
/* Le titre du hero ne se montre qu'une fois le mot arrivé à sa place */
.pl-moving .hero-giant { opacity: 0; }
/* L'image de fond se dévoile de haut en bas au lieu de surgir d'un coup
   quand le calque disparaît (clip-path plutôt qu'un fondu) */
.hero-img { transition: clip-path 1.6s cubic-bezier(0.22, 0.61, 0.36, 1); clip-path: inset(0 0 0 0); }
.js-loading .hero-img { clip-path: inset(0 0 100% 0); }
.js-loading, .js-loading body { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .preloader-word span { animation: none; opacity: 1; transform: none; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.9rem 1.8rem;
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: color 0.35s ease, border-color 0.35s ease, transform 0.3s ease;
}
.btn .notch { font-family: var(--font-mono); font-weight: 400; }

/* Pilule en contour, fond transparent : se remplit au survol */
.btn-champagne { background: transparent; color: var(--white); border-color: var(--white); }
.btn-champagne:hover { background: var(--white); color: var(--onyx); transform: translateY(-2px); }
/* Carte pricing sur fond blanc : le bouton s'inverse pour rester noir sur blanc */
.price-card-featured .btn-champagne { background: var(--onyx); color: var(--white); border-color: var(--onyx); }
.price-card-featured .btn-champagne:hover { background: var(--anthracite); border-color: var(--anthracite); }

.btn-dark { background: var(--onyx); color: var(--white); }
.btn-dark:hover { background: var(--anthracite); transform: translateY(-2px); }

.btn-outline { background: transparent; color: var(--onyx); border-color: var(--onyx); }
.btn-outline:hover { background: var(--onyx); color: var(--white); }

.badge-champagne {
  background: var(--champagne);
  color: var(--onyx);
  padding: 0.2rem 0.55rem;
  border-radius: 2px;
  font-weight: 700;
}

/* ---------- Section chrome ---------- */
.section { padding: var(--section-gap) var(--pad-x); position: relative; }

/* Séparation diagonale du bord inférieur, comme le hero : droite au repos,
   s'incline quand la section sort de l'écran et révèle le blanc dessous (JS) */
/* La découpe diagonale remonte au bord droit jusqu'à la valeur animée par
   main.js. Elle mange donc le bas de la section du côté droit, et le contenu
   qui s'y trouve disparaît avant d'avoir été lu. La coupe étant exprimée en
   vh et le rembourrage en vw, l'un grandissait sans l'autre : sur un écran
   haut, la coupe passait sous le dernier texte. max() garantit que la section
   réserve toujours au moins la hauteur que la diagonale va prendre, sans
   ajouter de vide quand le rembourrage suffit déjà. Deux vh de plus que la
   coupe : sans cette marge, un élément calé pile en bas à droite perd ses
   derniers pixels. */
.architecture {
  --diag-cut: 0vh;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--diag-cut)), 0 100%);
  padding-bottom: max(var(--section-gap), 14vh);
}
/* La bannière reste droite ; le clip sert uniquement à fenêtrer son image fixe */
.banner { clip-path: inset(0); }
.section.light { background: var(--paper); color: var(--onyx); }
.section.dark { background: var(--onyx); color: var(--white); }

/* --steel sur fond sombre tombe à 3,85:1 (sous le seuil AA de 4,5:1 pour du
   texte courant) : voir le commentaire au-dessus de --steel dans les tokens.
   Surcharge locale à chaque conteneur sombre plutôt qu'un changement du
   token en :root, qui casserait le contraste (déjà correct) sur fond clair. */
.dark, .header { --steel: var(--silver-dark); }

.section-head {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  padding-bottom: 1.25rem;
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
  border-bottom: 1px solid var(--line-light);
}
.dark .section-head { border-bottom-color: var(--line-dark); }
.sec-tag {
  font-size: 0.88rem;
  letter-spacing: 0.06em;
  padding: 0.3rem 0.8rem;
}

/* ==========================================================================
   HEADER
   ========================================================================== */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  padding: 0.9rem var(--pad-x);
  background: transparent;
  color: var(--white);
  transition: background 0.4s ease, backdrop-filter 0.4s ease;
}
/* Le flou n'apparaît qu'une fois du contenu scrollé sous le header, sinon il
   ternit l'image du hero dès le chargement alors qu'on veut un header net. */
.header.is-scrolled {
  background: rgba(13, 13, 13, 0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
/* Grille 3 zones : les colonnes réservent leur espace, donc la nav centrale ne
   peut jamais chevaucher la zone droite (contrairement à un centrage absolu) */
.header-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 2rem;
}
.header-inner > .header-right { justify-self: end; }

.brand { display: flex; flex-direction: column; line-height: 1.05; }
/* Reflet argent du logotype, comme la version "digital" de la charte graphique */
.brand-name {
  font-weight: 800;
  font-size: 1.9rem;
  letter-spacing: 0.02em;
  background: var(--silver-sheen);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--silver);
}
.brand-sub { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.42em; color: var(--silver); }

.nav {
  display: flex;
  gap: 1.8rem;
  align-items: baseline;
  white-space: nowrap;
}
.nav-link {
  font-family: var(--font-mono);
  font-weight: 600;
  font-style: normal;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--silver);
  position: relative;
  padding-bottom: 3px;
  transition: color 0.3s ease;
}
.nav-link, .nav-link * {
  font-size: calc(8.2069px + 0.34483vw);
}
.nav-link::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--champagne);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}
.nav-link:hover { color: var(--white); }
.nav-link:hover::after { transform: scaleX(1); }

/* Dropdowns (Digital, Offres) */
.nav-item { position: relative; }
.nav-parent {
  background: none;
  border: none;
  cursor: pointer;
  line-height: inherit;
  vertical-align: baseline;
}
.nav-caret {
  color: var(--champagne);
  font-size: 0.8rem;
  display: inline-block;
  transition: transform 0.3s ease;
}
.nav-item:hover .nav-caret,
.nav-item:focus-within .nav-caret { transform: rotate(45deg); }

.nav-menu {
  position: absolute;
  top: calc(100% + 0.9rem);
  left: 50%;
  transform: translate(-50%, 8px);
  min-width: 240px;
  background: rgba(13, 13, 13, 0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--line-dark);
  border-radius: 3px;
  padding: 0.5rem 0;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
}
/* pont invisible pour garder le survol entre le lien et le menu */
.nav-menu::before {
  content: '';
  position: absolute;
  top: -1rem;
  left: 0; right: 0;
  height: 1rem;
}
.nav-item:hover .nav-menu,
.nav-item:focus-within .nav-menu {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
.nav-menu a {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.5rem;
  padding: 0.6rem 1.2rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--silver);
  white-space: nowrap;
  transition: color 0.25s ease, background 0.25s ease, padding-left 0.25s ease;
}
.nav-menu a:hover {
  color: var(--white);
  background: rgba(255, 255, 255, 0.05);
  padding-left: 1.5rem;
}

/* Entrée « outil » du menu Digital. Un calculateur n'est pas une page de
   service de plus : il est détaché des six autres par un filet et signalé par
   une pastille. Ces deux règles vivent ici et non dans calculateur.css, parce
   que le menu est partagé par toutes les pages du site. */
.nav-menu a.nav-menu-tool {
  border-top: 1px solid var(--line-dark);
  margin-top: 0.45rem;
  padding-top: 0.85rem;
}
/* Deux outils se suivent : un seul filet les sépare des pages de service,
   sinon le second en porterait un deuxième, à un demi-cadratin du premier. */
.nav-menu a.nav-menu-tool + a.nav-menu-tool {
  border-top: 0;
  margin-top: 0;
  padding-top: 0;
}
.nav-tag {
  font-family: var(--font-mono);
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--onyx);
  background: var(--champagne);
  border-radius: 2px;
  padding: 0.12rem 0.36rem;
}

.header-right { display: flex; align-items: center; gap: 1.4rem; }
.lang-switch { font-family: var(--font-mono); font-size: 0.7rem; color: var(--steel); }
.lang.active { color: var(--white); font-weight: 700; }
.lang-sep { margin: 0 0.35rem; }

.status-widget {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  color: var(--silver);
}
.status-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--champagne);
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

.btn-header { padding: 0.65rem 1.1rem; font-size: 0.68rem; white-space: nowrap; }

/* Burger classique : 3 barres qui se transforment en croix à l'ouverture */
.menu-toggle {
  display: none;
  background: none;
  border: none;
  padding: 0.5rem;
  margin-right: -0.5rem;
  cursor: pointer;
  color: var(--white);
  z-index: 95;
}
.burger {
  display: block;
  width: 26px;
  height: 16px;
  position: relative;
}
.burger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.2s ease;
}
.burger span:nth-child(1) { top: 0; }
.burger span:nth-child(2) { top: 7px; }
.burger span:nth-child(3) { top: 14px; }

.menu-toggle[aria-expanded="true"] .burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .burger span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] .burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Drawer mobile */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--onyx);
  color: var(--white);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  overflow-y: auto;
  padding: 6rem var(--pad-x) 3rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}
.drawer.open { opacity: 1; visibility: visible; }
.drawer-nav { display: flex; flex-direction: column; gap: 1.1rem; }
.drawer-nav > * {
  transform: scale(0.95);
  opacity: 0;
  transition: transform 0.45s ease, opacity 0.45s ease;
}
.drawer.open .drawer-nav > * { transform: scale(1); opacity: 1; }
.drawer.open .drawer-nav > *:nth-child(2) { transition-delay: 0.06s; }
.drawer.open .drawer-nav > *:nth-child(3) { transition-delay: 0.12s; }
.drawer.open .drawer-nav > *:nth-child(4) { transition-delay: 0.18s; }
.drawer.open .drawer-nav > *:nth-child(5) { transition-delay: 0.24s; }
.drawer.open .drawer-nav > *:nth-child(6) { transition-delay: 0.3s; }
/* Les entrées de 1er niveau (liens et titres de groupe) partagent le même style */
.drawer-link,
.drawer-group-title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 6vw, 2.4rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--white);
}
.drawer-group {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.drawer-group-title { margin-bottom: 0.5rem; }
/* Les sous-entrées sont indentées sous leur titre */
.drawer-group a {
  margin-left: 1.1rem;
  padding-left: 1rem;
  border-left: 1px solid var(--line-dark);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--silver);
}
.drawer-group a:active { color: var(--white); }
.drawer-foot {
  margin-top: 4rem;
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--silver);
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  position: relative;
  /* Sur mobile, 100vh vaut la hauteur barre d'URL *masquée* : le bas du hero
     (« THE ICON ») tombait sous la ligne de flottaison et n'apparaissait qu'au
     scroll. 100svh = hauteur réellement visible, barre d'URL affichée.
     min-height + height auto plutôt qu'une hauteur fixe : si le contenu déborde
     quand même (petit écran, texte qui passe à 3 lignes), le hero grandit au
     lieu d'être rogné par overflow: hidden. */
  min-height: 100vh;
  min-height: 100svh;
  background: var(--onyx);
  color: var(--white);
  overflow: hidden;
  display: flex;
  align-items: center;
  /* Réserve la bande du bandeau : sur écran peu haut, le bloc centré
     remontait sous « DEUX PÔLES · UN SEUL SYSTÈME » */
  padding-top: 10rem;
  /* Bord inférieur diagonal : --hero-cut grandit au scroll (JS), le blanc apparaît dessous */
  --hero-cut: 0vh;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--hero-cut)), 0 100%);
}
/* Le plancher de 640px n'a de sens que sur grand écran : sur un petit
   téléphone (~480-560px visibles) il forçait à lui seul le débordement. */
@media (min-width: 861px) {
  .hero { min-height: max(640px, 100svh); }
  /* Le centrage vertical laissait un grand vide sous le bandeau sur les
     écrans classiques : on ancre le bloc juste sous « DEUX PÔLES... »
     avec un espace constant, au lieu qu'il grandisse avec la hauteur d'écran. */
  .hero-intro { align-self: flex-start; margin-top: 1rem; }
}
/* Parallaxe rideau : l'image reste fixe dans le viewport, les sections défilent par-dessus.
   Ici on veut la hauteur barres RÉTRACTÉES, l'inverse du hero : un fond fixe
   doit couvrir l'écran en permanence, y compris à l'instant où la barre d'URL
   et la barre d'outils du bas s'escamotent. lvh dit exactement ça ; vh reste
   en repli et vaut déjà la même chose sur mobile. */
.hero-media {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 100vh;
  height: 100lvh;
  z-index: 0;
}
.hero-img {
  width: 100%; height: 100%;
  object-fit: cover;
  will-change: transform;
  transform: scale(1.0);
}
.hero-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(13,13,13,0.72) 0%, rgba(13,13,13,0.35) 45%, rgba(13,13,13,0.85) 100%);
}

.hero-meta {
  position: absolute;
  top: 7rem;
  left: var(--pad-x);
  color: var(--champagne);
  font-weight: 700;
  letter-spacing: 0.18em;
  z-index: 2;
}

/* Intro typographique ouverte, sans encart : entrée en cascade */
@keyframes hero-rise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}
.hero-intro {
  position: relative;
  z-index: 2;
  margin-left: var(--pad-x);
  margin-right: var(--pad-x);
  /* garde le CTA au-dessus du titre géant (svh : cf. .hero) */
  margin-bottom: 12vh;
  margin-bottom: 12svh;
  max-width: 880px;
}
/* Entrée en fondu, décalée d'un élément à l'autre */
.hero-meta,
.hero-intro > * {
  opacity: 0;
  animation: hero-rise 1.2s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
.hero-meta { animation-delay: 0.1s; }
.hero-intro > *:nth-child(1) { animation-delay: 0.32s; }
.hero-intro > *:nth-child(2) { animation-delay: 0.62s; }

/* Mise en pause pendant le chargement : sans cela l'entrée se jouerait
   derrière le calque et le hero surgirait d'un bloc à sa levée. */
.js-loading .hero-meta,
.js-loading .hero-intro > * { animation-play-state: paused; }

.hero-title {
  font-family: var(--font-title);
  font-weight: 800;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  /* Filet de sécurité : sur très petits écrans, un mot long casse plutôt que
     d'être rogné par le overflow:hidden du hero (invisible, donc "moche") */
  overflow-wrap: anywhere;
}
/* Un seul titre de page pour tout le site, accueil compris : même police,
   même taille, même interlettrage, même mécanique de contour et de
   remplissage. Les autres pages avaient leur propre échelle (3,5vw, un
   interlettrage à 0,05em et un interligne à 1,12), assez proche pour qu'on ne
   voie pas la différence page à page, assez loin pour qu'on la voie en
   passant de l'une à l'autre. */
.hero-title, .hero-title *,
.svc-hero-title, .svc-hero-title *,
.calc-h1, .calc-h1 *,
.page-intro h1, .page-intro h1 * {
  /* Plancher choisi pour que "CROISSANCE"/"TERRAIN" tiennent sur une ligne dès
     ~360px de large sans forcer la coupure du filet de sécurité ci-dessus ;
     au-delà de ~950px la formule fluide d'origine reprend à l'identique */
  font-size: clamp(1.75rem, calc(4px + 3.3vw), 20rem);
  line-height: 1em;
  /* em plutôt que px : même rendu qu'avant sur bureau, mais le tracking suit
     le plancher mobile au lieu de faire déborder un mot comme "CROISSANCE" */
  letter-spacing: 0.09em;
}
.svc-hero-title, .calc-h1, .page-intro h1 {
  font-family: var(--font-title);
  font-weight: 800;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
/* Première ligne : contour seul au départ, un remplissage plein anime la
   lecture de haut en bas (double du texte via attr(), superposé au contour) */
.hero-line {
  position: relative;
  display: block;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--white);
}
.hero-line::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  color: var(--white);
  -webkit-text-stroke: 0;
  text-transform: inherit;
  clip-path: inset(0 0 100% 0);
  animation: hero-fill 1.3s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
  animation-delay: 0.75s;
}
.js-loading .hero-line::after { animation-play-state: paused; }
@keyframes hero-fill {
  /* Le clip part du bas (bottom: 100%, rien de visible) et remonte vers le
     haut (bottom: 0%) : la zone visible s'étend depuis le haut, donc le
     remplissage se lit de haut en bas. */
  from { clip-path: inset(0 0 100% 0); }
  to { clip-path: inset(0 0 0 0); }
}
/* Deuxième ligne en contour, décalée dans la pente des diagonales : la dualité digital / terrain */
.hero-line-outline {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--white);
  margin-left: clamp(2rem, 6vw, 5rem);
}
/* Sur écran étroit, le décalage de la ligne en contour prenait assez de
   largeur pour couper un mot en deux (« AUTOMATIQU / E. ») : les titres des
   pages de service sont plus longs que celui de l'accueil, qui n'a que « et
   sur » et « le terrain » en contour. Le décalage disparaît, le retrait
   visuel reste porté par le contour lui-même. */
@media (max-width: 620px) {
  .hero-line-outline { margin-left: 0; }
}

/* Ligne de base : phrase à gauche, CTA à droite, sous un filet */
.hero-baseline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
  margin-top: 2.2rem;
  padding-top: 1.7rem;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
}
.hero-sub {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  color: var(--silver);
  display: none;
}

.hero-giant {
  position: absolute;
  bottom: 2rem;
  right: var(--pad-x);
  z-index: 1;
  font-weight: 850;
  font-size: clamp(4rem, 13.5vw, 14rem);
  letter-spacing: -0.03em;
  line-height: 0.82;
  white-space: nowrap;
  color: var(--white);
  will-change: transform, opacity;
  pointer-events: none;
}


/* ==========================================================================
   SECTION 01 : POSITION
   ========================================================================== */
.position-grid {
  display: grid;
  grid-template-columns: minmax(280px, 5fr) 7fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}

.position-media {
  position: sticky;
  top: 7rem;
  overflow: hidden;
  border-radius: 2px;
}
.position-media img {
  width: 100%;
  height: min(72vh, 640px);
  object-fit: cover;
  will-change: transform;
}
.position-media figcaption,
.proof-portrait figcaption,
.faq-media figcaption {
  padding-top: 0.7rem;
  color: var(--steel);
  font-size: 0.65rem;
}

.position-h1 {
  font-size: clamp(1.9rem, 3.6vw, 2.65rem);
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: -0.02em;
  margin-bottom: 1.8rem;
}
/* Le masque de l'animation ligne par ligne est calé sur line-height. La
   police de titre a une boîte de glyphe plus haute qu'Archivo : à 1,15 elle
   passait sous le bord et le bas des lettres était coupé. Le retrait rend au
   masque la hauteur qui manque, la marge négative le reprend pour que
   l'interligne visible ne bouge pas. */
.split-lines .line { display: block; overflow: hidden; padding-bottom: 0.22em; margin-bottom: -0.22em; }
.split-lines .line-inner { display: block; will-change: transform; }

.position-body {
  font-size: 1.02rem;
  color: var(--anthracite);
  max-width: 58ch;
  margin-bottom: 2.5rem;
}
.position-body-intro { margin-bottom: 1.1rem; }

/* ==========================================================================
   POINTS CLÉS (composant partagé, toutes pages)
   Casse les paragraphes denses : une idée par ligne, l'amorce en gras.
   ========================================================================== */
.key-points {
  list-style: none;
  margin: 0 0 1.8rem;
  padding: 0;
  max-width: 62ch;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.key-points li {
  position: relative;
  padding-left: 1.3rem;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--anthracite);
}
.key-points li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--champagne);
}
.key-points b,
.key-points strong { color: var(--onyx); font-weight: 700; }
.dark .key-points li { color: var(--silver); }
.dark .key-points b,
.dark .key-points strong { color: var(--white); }
/* Une phrase d'amorce suivie de sa liste forme un seul bloc : on resserre
   l'écart pour que la liste soit lue comme la suite de la phrase, pas comme
   un bloc séparé. Les amorces de FAQ sont exclues, elles ont déjà leur règle. */
p:has(+ .key-points):not(.faq-lead) { margin-bottom: 1.1rem; }

/* Phrase de bascule mise en évidence après une liste ou un paragraphe */
.lead-out { font-weight: 700; color: var(--onyx); }
/* Pages Offres : offres.css est chargé après style.css, donc à specificité
   égale la couleur de .fmt-lede / .herit-text l'emportait sur .lead-out et la
   phrase de bascule perdait son contraste. Deux classes, la règle reprend la
   main. Reste avant la variante sombre, qui doit continuer à primer. */
.fmt-lede.lead-out,
.herit-text.lead-out,
.case-lede.lead-out { color: var(--onyx); }
/* Même cause dans les contextes qui colorent leurs paragraphes (réponses FAQ,
   pages légales) : la phrase de bascule doit garder le contraste de l'emphase,
   pas celui du corps de texte. */
.faq-answer p.lead-out,
.legal-body p.lead-out { color: var(--onyx); }
.dark .lead-out { color: var(--white); }

/* Pages légales : .legal-body impose ses propres marges de liste (service.css,
   chargé après). On rétablit celles du composant, sinon double indentation. */
.legal-body .key-points { padding-left: 0; }
.legal-body .key-points li { margin-bottom: 0; padding-left: 1.3rem; }

/* Amorce en gras dans les réponses FAQ : donne un point d'entrée au regard */
.faq-answer p b,
.faq-answer p strong { color: var(--onyx); font-weight: 700; }
.dark .faq-answer p b,
.dark .faq-answer p strong { color: var(--white); }
/* Réponse FAQ construite en liste : mêmes marges internes que le paragraphe */
.faq-answer p.faq-lead { padding-bottom: 0.7rem; }
.faq-answer .key-points { padding: 0 0.3rem 0.7rem; margin-bottom: 0; }
.faq-answer .key-points:last-child { padding-bottom: 1.6rem; }

/* Amorce en gras dans les paragraphes des pages de service : même contraste
   que les listes voisines, dont les <b> montent déjà en onyx. */
.case-lede b,
.pain-verdict b { color: var(--onyx); }
/* Carte sombre posée dans une section claire : l'amorce y passe en blanc. */
.toolband-text b { color: var(--white); }
/* Lève-objections du formulaire : la section devis est sombre, le gras seul
   ne suffit pas à détacher, on remonte en blanc comme pour .key-points. */
.form-assure b { color: var(--white); }

.position-poles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid var(--line-light);
  border-bottom: 1px solid var(--line-light);
  margin-bottom: 2.5rem;
}
.pole { padding: 1.6rem 1.6rem 1.6rem 0; }
.pole + .pole { border-left: 1px solid var(--line-light); padding-left: 1.6rem; }
.pole-tag { font-weight: 700; display: inline-block; margin-bottom: 0.7rem; }
.pole-tag-champagne { background: var(--champagne); color: var(--onyx); padding: 0.15rem 0.5rem; border-radius: 2px; }
.pole p { font-size: 0.92rem; color: var(--anthracite); }

.position-kpis { display: flex; gap: 3.5rem; margin-bottom: 2.5rem; }
.kpi { display: flex; flex-direction: column; gap: 0.4rem; }
.kpi-value { font-size: clamp(1.9rem, 3.4vw, 2.4rem); font-weight: 700; line-height: 1; }
.kpi-label { color: var(--steel); font-size: 0.68rem; max-width: 24ch; }

/* Marquee */
.marquee {
  margin-top: var(--section-gap);
  border-top: 1px solid var(--line-light);
  border-bottom: 1px solid var(--line-light);
  overflow: hidden;
  padding: 1.4rem 0;
  margin-left: calc(-1 * var(--pad-x));
  margin-right: calc(-1 * var(--pad-x));
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 80s linear infinite;
  will-change: transform;
}
/* Deux groupes strictement identiques : -50% = exactement un groupe, boucle sans raccord */
.marquee-group {
  display: flex;
  align-items: center;
  gap: 3rem;
  padding-right: 3rem;
  flex-shrink: 0;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee-item { font-size: 1rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; }
.marquee-dot { color: var(--champagne); font-family: var(--font-mono); }

/* ==========================================================================
   CAS CLIENTS : TROIS HISTOIRES (accueil, juste après le hero)
   ==========================================================================
   Remplace le bandeau de logos clients, retiré le 2026-09-08 à la demande du
   client : un logo qui défile ne dit pas ce qui a été réglé, et il expose le
   nom de l'entreprise accompagnée. Une carte nomme donc le dirigeant par son
   prénom, décrit le problème, ce que nous avons fait, et ce que ça a donné.
   L'entreprise, elle, n'est jamais nommée. */
.stories-intro {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: end;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.stories-intro-main {
  display: block;
  font-size: clamp(1.9rem, 3.6vw, 2.65rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.stories-intro-sub {
  display: block;
  font-size: clamp(1.15rem, 1.9vw, 1.45rem);
  line-height: 1.5;
  color: var(--steel);
  font-weight: 500;
  max-width: 36ch;
}

.stories-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  align-items: stretch;
}

.story-card {
  background: var(--white);
  border: 1px solid var(--line-light);
  border-radius: 3px;
  padding: 2rem 1.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.story-card:hover {
  transform: translateY(-8px) scale(1.01);
  box-shadow: 0 24px 60px rgba(13, 13, 13, 0.1);
}

/* Le prénom porte la carte : c'est lui qui remplace le logo. */
.story-who {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
}
.story-sector {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--steel);
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--line-light);
}
.story-card p { margin: 0; font-size: 0.92rem; line-height: 1.6; color: var(--anthracite); }
.story-card p b { color: var(--onyx); }
/* margin-top: auto colle le résultat et le lien au bas de la carte, quelle
   que soit la longueur des deux paragraphes au-dessus : les trois cartes
   alignent leur ligne de résultat. Sélecteur à deux classes, sinon
   .story-card p { margin: 0 } l'emporte en spécificité. */
.story-card .story-result {
  margin-top: auto;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line-light);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.story-out {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--onyx);
  width: fit-content;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--line-light);
  transition: color 0.3s ease, border-color 0.3s ease;
}
.story-out:hover { color: var(--steel); border-bottom-color: var(--champagne); }

.stories-more { margin-top: clamp(1.8rem, 3vw, 2.6rem); text-align: center; }

/* Même point de bascule que .pricing-grid, l'autre grille à trois colonnes de
   l'accueil : deux seuils différents sur une même page se liraient comme un
   bug. */
@media (max-width: 860px) {
  .stories-grid { grid-template-columns: 1fr; }
  .stories-intro { grid-template-columns: 1fr; align-items: start; }
}

/* ==========================================================================
   SECTION 02 : DÉMONSTRATION PINNED
   ========================================================================== */
.demo-grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}

.demo-panel {
  position: sticky;
  top: 120px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.4rem;
}
.demo-kicker { color: var(--steel); font-weight: 700; letter-spacing: 0.12em; }
.demo-title {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.02em;
}
.demo-text { color: var(--anthracite); max-width: 40ch; }
.demo-legend { display: flex; align-items: center; gap: 0.9rem; font-size: 0.72rem; }
.legend-sans { color: var(--steel); }
.legend-vs { color: var(--anthracite); font-weight: 700; }
.legend-avec {
  background: var(--champagne);
  color: var(--onyx);
  padding: 0.2rem 0.55rem;
  border-radius: 2px;
  font-weight: 700;
}

.demo-cards { display: flex; flex-direction: column; }

.stack-card {
  position: sticky;
  background: var(--white);
  border: 1px solid var(--line-light);
  border-radius: 3px;
  padding: 1.8rem;
  will-change: transform, opacity, filter;
  box-shadow: 0 18px 50px rgba(13, 13, 13, 0.07);
}
.stack-card:nth-child(1) { top: 130px; z-index: 1; }
.stack-card:nth-child(2) { top: 154px; z-index: 2; margin-top: clamp(1.5rem, 4vw, 3rem); }
.stack-card:nth-child(3) { top: 178px; z-index: 3; margin-top: clamp(1.5rem, 4vw, 3rem); }
.stack-card:nth-child(4) { top: 202px; z-index: 4; margin-top: clamp(1.5rem, 4vw, 3rem); }

.stack-head {
  display: flex;
  gap: 0.8rem;
  font-weight: 700;
  font-size: 0.95rem;
  padding-bottom: 1.1rem;
  margin-bottom: 1.3rem;
  border-bottom: 1px solid var(--line-light);
}
.stack-head span:first-child { color: var(--steel); }

.stack-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
.stack-label { display: block; font-size: 0.62rem; font-weight: 700; margin-bottom: 0.6rem; letter-spacing: 0.1em; }
.stack-sans { color: var(--steel); }
.stack-sans .stack-label { color: var(--steel); }
.stack-sans p { font-size: 0.9rem; }
.stack-avec {
  border: 1px solid var(--champagne);
  border-radius: 2px;
  padding: 0.9rem 1rem;
  margin: -0.9rem -1rem -0.9rem 0;
  background: rgba(200, 182, 143, 0.08);
  box-shadow: 0 8px 24px rgba(200, 182, 143, 0.18);
}
.stack-avec .stack-label { color: var(--onyx); background: var(--champagne); display: inline-block; padding: 0.12rem 0.45rem; border-radius: 2px; }
.stack-avec p { font-size: 0.9rem; color: var(--onyx); }

/* ==========================================================================
   SECTION 03 : ARCHITECTURE (dark)
   ========================================================================== */
/* Intro éditoriale 2 colonnes, mêmes tailles que les autres sections */
.arch-intro {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: end;
  margin-bottom: clamp(3rem, 6vw, 5rem);
}
.arch-intro-main {
  display: block;
  font-size: clamp(1.9rem, 3.6vw, 2.65rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.arch-intro-sub {
  display: block;
  font-size: clamp(1.15rem, 1.9vw, 1.45rem);
  line-height: 1.5;
  color: var(--steel);
  font-weight: 500;
  max-width: 34ch;
}

@media (max-width: 860px) {
  .arch-intro { grid-template-columns: 1fr; align-items: start; }
}

.arch-block {
  border-top: 1px solid var(--line-dark);
  padding: clamp(2rem, 4vw, 3.5rem) 0;
}

.arch-block-head {
  display: grid;
  grid-template-columns: auto 1fr minmax(200px, 320px);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.arch-num {
  font-size: clamp(4rem, 9vw, 7.5rem);
  font-weight: 850;
  line-height: 0.9;
  color: transparent;
  -webkit-text-stroke: 1px var(--steel);
}
.arch-num-champagne { -webkit-text-stroke: 1px var(--champagne); }
.arch-tag { color: var(--silver); font-weight: 700; display: inline-block; margin-bottom: 0.7rem; }
.arch-tag-champagne { color: var(--onyx); background: var(--champagne); padding: 0.15rem 0.5rem; border-radius: 2px; }
.arch-title { font-size: clamp(1.3rem, 2.4vw, 1.9rem); font-weight: 700; letter-spacing: -0.01em; }
.arch-media { overflow: hidden; border-radius: 2px; border: 1px solid var(--line-dark); }
.arch-media img { width: 100%; height: 170px; object-fit: cover; filter: grayscale(30%); transition: transform 0.6s ease; }
.arch-block:hover .arch-media img { transform: scale(1.06); }

/* ---- Pôle Digital : ligne de système, les stations sur un filet ---- */
.metro { position: relative; padding: 0.5rem 0; }
.metro-line {
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  height: 1px;
  background: var(--line-dark);
}
.metro-line::after {
  content: '▸';
  position: absolute;
  right: -2px;
  top: 50%;
  transform: translateY(-52%);
  color: var(--champagne);
  font-size: 0.85rem;
  line-height: 1;
}
.metro-stops {
  position: relative;
  display: grid;
  /* Une colonne par station, quel que soit leur nombre. La grille était figée
     à 7 colonnes alors que la frise compte 8 étapes : la dernière passait à
     la ligne. En colonnes automatiques, ajouter ou retirer une station ne
     casse plus la frise. */
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 1.2rem;
}
.metro-stop {
  display: grid;
  grid-template-rows: minmax(155px, 1fr) auto minmax(155px, 1fr);
  justify-items: start;
}
.metro-dot {
  grid-row: 2;
  width: 11px;
  height: 11px;
  border: 2px solid var(--champagne);
  border-radius: 50%;
  background: var(--onyx);
  z-index: 1;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}
.metro-label { display: flex; flex-direction: column; gap: 0.35rem; }
/* alternance : libellés au-dessus puis en dessous de la ligne */
.metro-stop:nth-child(odd) .metro-label { grid-row: 1; align-self: end; padding-bottom: 1.1rem; }
.metro-stop:nth-child(even) .metro-label { grid-row: 3; align-self: start; padding-top: 1.1rem; }
.metro-label .mono { color: var(--champagne); font-weight: 700; font-size: 0.65rem; }
.metro-label strong {
  font-size: clamp(0.95rem, 1.3vw, 1.1rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
  transition: color 0.3s ease;
}
.metro-label em {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.01em;
  line-height: 1.5;
  color: var(--steel);
}
.metro-stop:hover .metro-dot {
  background: var(--champagne);
  box-shadow: 0 0 0 6px rgba(200, 182, 143, 0.2);
}
.metro-stop:hover strong { color: var(--champagne); }

/* ---- Pôle Terrain : escalier diagonal, dans la pente du site ---- */
.stairs {
  --step: clamp(0rem, 6vw, 5rem);
  display: flex;
  flex-direction: column;
}
.stair {
  display: flex;
  align-items: baseline;
  gap: 1.2rem;
  padding: 1.1rem 0;
  transition: padding-left 0.35s ease;
}
.stair:nth-child(1) { margin-left: 0; }
.stair:nth-child(2) { margin-left: var(--step); }
.stair:nth-child(3) { margin-left: calc(var(--step) * 2); }
.stair:nth-child(4) { margin-left: calc(var(--step) * 3); }
.stair:nth-child(5) { margin-left: calc(var(--step) * 4); }
.stair .mono { color: var(--champagne); font-weight: 700; font-size: 0.68rem; }
.stair strong {
  font-size: clamp(1.25rem, 2.4vw, 1.9rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.2;
  transition: color 0.3s ease;
}
.stair-line {
  flex: 1;
  min-width: 2.5rem;
  height: 1px;
  background: var(--line-dark);
  align-self: center;
  transition: background 0.3s ease;
}
.stair em {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  line-height: 1.55;
  color: var(--steel);
  max-width: 32ch;
}
.stair:hover { padding-left: 0.7rem; }
.stair:hover strong { color: var(--champagne); }
.stair:hover .stair-line { background: var(--champagne); }

/* En-tête du bloc Terrain inversé : image à gauche, numéro à droite */
.arch-block-terrain .arch-block-head {
  grid-template-columns: minmax(200px, 320px) 1fr auto;
}
.arch-block-terrain .arch-block-head .arch-media { order: 1; }
.arch-block-terrain .arch-block-head > div { order: 2; }
.arch-block-terrain .arch-block-head .arch-num { order: 3; }

@media (max-width: 1100px) {
  /* En dessous de 1100px la frise s'empile : on annule les colonnes
     automatiques du bureau, sinon les stations restent sur une seule ligne. */
  .metro-stops { grid-auto-flow: row; grid-template-columns: 1fr; gap: 1.4rem; }
  .metro-line { left: 5px; right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
  .metro-line::after { content: '▾'; right: auto; left: 50%; top: auto; bottom: -4px; transform: translateX(-46%); }
  .metro-stop { grid-template-rows: none; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; }
  .metro-dot { grid-row: auto; margin-top: 0.3rem; }
  .metro-stop:nth-child(odd) .metro-label,
  .metro-stop:nth-child(even) .metro-label { grid-row: auto; align-self: auto; padding: 0; }
  .arch-block-terrain .arch-block-head { grid-template-columns: auto 1fr; }
  .stair { flex-wrap: wrap; row-gap: 0.35rem; border-bottom: 1px solid var(--line-dark); }
  .stair-line { display: none; }
  .stair em { flex-basis: 100%; max-width: none; }
}

/* ==========================================================================
   SECTION 04 : PRICING
   ========================================================================== */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  align-items: stretch;
}

.price-card {
  position: relative;
  background: var(--white);
  border: 1px solid var(--line-light);
  border-radius: 3px;
  padding: 2.2rem 1.9rem;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.price-card:hover {
  transform: translateY(-8px) scale(1.01);
  box-shadow: 0 24px 60px rgba(13, 13, 13, 0.1);
}
/* Seule carte à porter l'accent champagne : signale l'offre "détail premium" de la charte */
.price-card-featured { border: 1px solid var(--champagne); box-shadow: 0 12px 40px rgba(200, 182, 143, 0.22); }

.badge-reco {
  position: absolute;
  top: -0.8rem;
  left: 1.9rem;
  background: var(--champagne);
  color: var(--onyx);
  padding: 0.3rem 0.7rem;
  font-weight: 700;
  border-radius: 2px;
  font-size: 0.65rem;
}

.price-pack { color: var(--steel); font-weight: 700; letter-spacing: 0.1em; }
.price-desc { color: var(--anthracite); font-size: 0.95rem; }

.price-list {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  font-size: 0.72rem;
  color: var(--anthracite);
  border-top: 1px solid var(--line-light);
  padding-top: 1.2rem;
  flex-grow: 1;
}
.price-list li::before { content: '⌝ '; color: var(--champagne); font-weight: 700; }

/* ==========================================================================
   SECTION 05 : PREUVE
   ========================================================================== */
/* Section resserrée : la citation est courte, un padding pleine hauteur créait un grand vide */
.proof { padding-top: var(--section-gap-tight); padding-bottom: var(--section-gap-tight); }
/* La FAQ prolonge la section qui la précède plutôt que d'ouvrir un sujet :
   même palier resserré. La règle vivait dans service.css, donc l'accueil, qui
   ne charge pas cette feuille, gardait le palier standard pour la même
   section. */
.faq { padding-top: var(--section-gap-tight); padding-bottom: var(--section-gap-tight); }
.proof-grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.proof-portrait { overflow: hidden; border-radius: 2px; margin-bottom: 1.5rem; }
.proof-portrait img { width: 100%; height: 250px; object-fit: cover; }
.proof-kpis { display: flex; gap: 2.5rem; }

.proof-quote { position: relative; padding-left: clamp(2rem, 4vw, 3.5rem); }
.proof-mark {
  position: absolute;
  left: 0; top: -1rem;
  font-size: 5rem;
  color: var(--champagne);
  line-height: 1;
}
.proof-quote p {
  font-size: clamp(1.4rem, 2.6vw, 1.95rem);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.01em;
}
.proof-author {
  display: block;
  margin-top: 1.6rem;
  color: var(--steel);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
}

/* ==========================================================================
   SECTION 06 : PROCESSUS
   ========================================================================== */
.process-title {
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.process-table { border-top: 1px solid var(--line-light); }
.process-row {
  display: grid;
  grid-template-columns: 3.5rem 1.4fr 2fr;
  gap: 1.5rem;
  align-items: center;
  padding: 1.5rem 0.5rem;
  border-bottom: 1px solid var(--line-light);
  cursor: default;
  transition: background 0.3s ease, padding-left 0.3s ease;
}
.process-row:hover { background: var(--white); padding-left: 1.1rem; }
.p-num { color: var(--steel); font-weight: 700; }
.process-row:hover .p-num { color: var(--onyx); background: var(--champagne); text-align: center; border-radius: 2px; }
.p-name { font-weight: 700; font-size: 1.05rem; }
.p-desc { color: var(--anthracite); font-size: 0.92rem; }

/* ==========================================================================
   SECTION : LE FONDATEUR
   ========================================================================== */
.founder-grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}
.founder-media { border-radius: 2px; overflow: hidden; }
.founder-media img,
.founder-media video {
  width: 100%;
  height: clamp(360px, 42vw, 560px);
  object-fit: cover;
  object-position: 50% 15%;
  display: block;
}
/* notre-agence.html réutilise .founder-grid pour des photos de bureaux, pas
   des portraits : le cadrage haut du fondateur (15%) leur coupait le sujet. */
.founder-media-wide img,
.founder-media-wide video { object-position: 50% 35%; }
/* Inverse l'ordre des colonnes (texte à gauche, photo à droite) sans dupliquer
   la grille : le HTML inverse déjà l'ordre des deux enfants. */
.founder-grid-reverse { grid-template-columns: 7fr 5fr; }
.founder-content { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(1.6rem, 3vw, 2.4rem); }
.founder-title {
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.3;
  max-width: 26ch;
}

/* #fondateur de notre-agence.html : la photo (portrait podcast) a été retirée
   le 2026-09-11, il ne reste qu'un titre et un bouton. Sans elle, la section
   n'a plus de raison de tenir la hauteur pensée pour un portrait (jusqu'à
   560px, .founder-media) ni la grille à deux colonnes : une colonne centrée,
   un padding ramené au token compact. Ne touche que cette section : les deux
   .founder-grid avec photo (#histoire, #conviction) gardent leur épaisseur. */
.founder-podcast { padding-top: var(--section-gap-tight); padding-bottom: var(--section-gap-tight); }
.founder-podcast .founder-grid { grid-template-columns: 1fr; justify-items: center; text-align: center; }
.founder-podcast .founder-content { align-items: center; }

/* ==========================================================================
   BANNIÈRE
   ========================================================================== */
.banner {
  position: relative;
  min-height: 72vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--white);
  text-align: center;
}
/* Effet rideau : image fixe dans le viewport, révélée par la fenêtre de la
   section. Même raison que .hero-media pour lvh : le fond doit couvrir l'écran
   barres rétractées, sinon une bande vide apparaît en bas pendant le
   défilement. */
.banner-media {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 100vh;
  height: 100lvh;
  z-index: 0;
}
.banner-img { width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.banner-scrim { position: absolute; inset: 0; background: rgba(13, 13, 13, 0.72); }

.banner-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  padding: 4rem var(--pad-x);
}
.banner-title {
  font-size: clamp(1.9rem, 4.2vw, 3.3rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  max-width: 24ch;
}

/* ==========================================================================
   SECTION 07 : FAQ
   ========================================================================== */
.faq-grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.faq-media { overflow: hidden; border-radius: 2px; position: sticky; top: 7rem; }
.faq-media img { width: 100%; height: min(60vh, 520px); object-fit: cover; will-change: transform; }

.faq-list { border-top: 1px solid var(--line-light); }
.faq-item { border-bottom: 1px solid var(--line-light); }
.faq-item summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  padding: 1.5rem 0.3rem;
  font-weight: 700;
  font-size: clamp(1rem, 1.8vw, 1.2rem);
  cursor: pointer;
  list-style: none;
  transition: color 0.3s ease;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--steel); }
.faq-icon {
  font-family: var(--font-mono);
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--champagne);
  transition: transform 0.35s ease;
  flex-shrink: 0;
}
.faq-item[open] .faq-icon { transform: rotate(45deg); }
.faq-answer { overflow: hidden; transition: max-height 0.4s ease; }
.faq-answer p {
  padding: 0 0.3rem 1.6rem;
  color: var(--anthracite);
  font-size: 0.95rem;
  max-width: 62ch;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer {
  position: relative;
  background: var(--onyx);
  color: var(--white);
  padding: var(--section-gap) var(--pad-x) 0;
  overflow: hidden;
}

.footer-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.6rem;
  padding-bottom: clamp(3rem, 6vw, 5rem);
  border-bottom: 1px solid var(--line-dark);
  margin-bottom: clamp(3rem, 6vw, 5rem);
}
.footer-kicker { color: var(--champagne); font-weight: 700; }
.footer-title {
  font-size: clamp(1.8rem, 3.6vw, 2.9rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  max-width: 26ch;
}
.footer-email {
  font-size: clamp(1.5rem, 4.5vw, 3.4rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  position: relative;
  display: inline-block;
  transition: transform 0.35s ease;
  word-break: break-all;
}
.footer-email::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0.05em;
  width: 100%; height: 3px;
  background: var(--champagne);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
}
.footer-email:hover { transform: scale(1.02); }
.footer-email:hover::after { transform: scaleX(1); }

.footer-actions { display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; }
.footer-phone { color: var(--silver); font-size: 0.9rem; transition: color 0.3s ease; }
.footer-phone:hover { color: var(--champagne); }

.footer-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  padding-bottom: clamp(3rem, 6vw, 5rem);
}
.footer-col { display: flex; flex-direction: column; gap: 0.7rem; }
.footer-col-title { color: var(--steel); font-weight: 700; margin-bottom: 0.5rem; letter-spacing: 0.1em; }
.footer-col a {
  font-size: 0.88rem;
  color: var(--silver);
  transition: color 0.3s ease, transform 0.3s ease;
  width: fit-content;
}
.footer-col a:hover { color: var(--white); transform: translateX(6px); }

.footer-legal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1.2rem 0;
  border-top: 1px solid var(--line-dark);
  color: var(--steel);
  font-size: 0.65rem;
}
.footer-legal-links a:hover { color: var(--champagne); }

.footer-giant {
  position: relative;
  text-align: center;
  font-weight: 850;
  font-size: clamp(4rem, 16vw, 17rem);
  letter-spacing: -0.03em;
  line-height: 0.9;
  padding-bottom: clamp(1.5rem, 3vw, 3rem);
  color: rgba(255, 255, 255, 0.96);
  user-select: none;
}
.footer-giant-sub {
  display: block;
  font-size: clamp(0.55rem, 1vw, 0.8rem);
  font-weight: 400;
  letter-spacing: 0.5em;
  color: var(--steel);
  margin-top: 1.2rem;
  line-height: 1;
}

/* ==========================================================================
   Reveal helpers (JS toggles .in)
   ========================================================================== */
.reveal, .reveal-block { opacity: 0; transform: translateY(28px); }
.reveal.in, .reveal-block.in { opacity: 1; transform: none; transition: opacity 0.45s ease, transform 0.45s ease; }
.no-js .reveal, .no-js .reveal-block { opacity: 1; transform: none; }

/* ==========================================================================
   Responsive
   ========================================================================== */
/* Sous 1560px, le widget cède la place : la nav reste centrée et le bouton
   du header tient sur une seule ligne */
@media (max-width: 1560px) {
  .status-widget { display: none; }
}

@media (max-width: 1100px) {
  .nav { display: none; }
  .lang-switch { display: none; }
  .btn-header { display: none; }
  .menu-toggle { display: block; }
  /* La nav masquée libère sa colonne : le burger doit rester collé à droite */
  .header-inner { grid-template-columns: 1fr auto; }

  .arch-block-head { grid-template-columns: auto 1fr; }
  .arch-media { display: none; }
}

@media (max-width: 860px) {
  .position-grid, .demo-grid, .proof-grid, .faq-grid, .founder-grid { grid-template-columns: 1fr; }
  .founder-media img,
  .founder-media video { height: 320px; }
  .position-media, .faq-media { position: static; }
  .position-media img { height: 52vh; }
  .demo-panel { position: static; }
  .pricing-grid { grid-template-columns: 1fr; }
  .price-card-featured { order: -1; }
  .stack-compare { grid-template-columns: 1fr; }
  .stack-avec { margin: 0; }
  .stack-card:nth-child(n) { top: 110px; }
  .process-row { grid-template-columns: 2.5rem 1fr; row-gap: 0.3rem; }
  .p-desc { grid-column: 2; }
  .hero-meta { display: none; }
  /* Le bandeau « DEUX PÔLES » étant masqué ici, la bande de 10rem qu'il se
     réservait n'a plus lieu d'être : elle poussait le contenu et « THE ICON »
     hors de l'écran. On ne garde que la hauteur du header fixe. */
  .hero { padding-top: 5.5rem; }
  .hero-intro {
    margin-bottom: 7vh;
    margin-bottom: 7svh;
  }

  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .position-kpis, .proof-kpis { flex-wrap: wrap; gap: 1.6rem; }
  /* Le guillemet passe en flux au-dessus du texte au lieu de le chevaucher */
  .proof-quote { padding-left: 0; }
  .proof-mark {
    position: static;
    display: block;
    font-size: 3.2rem;
    line-height: 0.7;
    margin-bottom: 0.6rem;
  }
  .position-poles { grid-template-columns: 1fr; }
  .pole + .pole { border-left: none; border-top: 1px solid var(--line-light); padding-left: 0; padding-top: 1.6rem; }
}

@media (max-width: 520px) {
  .footer-grid { grid-template-columns: 1fr; }
}

/* Écrans très courts (vieux iPhone SE, barre d'URL affichée) : le titre passe à
   5 lignes et le hero dépassait encore la hauteur visible. On resserre le bloc
   pour que le CTA et « THE ICON » restent au-dessus de la ligne de flottaison. */
@media (max-width: 860px) and (max-height: 500px) {
  .hero-title { font-size: clamp(1.75rem, 7.2vw, 2.4rem); }
  /* En paysage, la bande verticale libre est trop courte pour que le CTA passe
     au-dessus du titre géant : on rétrécit ce dernier pour qu'il se range à
     droite du bouton au lieu de passer dessous. */
  .hero-giant { font-size: clamp(2.5rem, 7vw, 5rem); }
  .hero-baseline { margin-top: 1.4rem; padding-top: 1.1rem; gap: 1rem; }
  .hero-intro {
    margin-bottom: 4vh;
    margin-bottom: 4svh;
  }
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .marquee-track { animation: none; }
  .reveal, .reveal-block { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}