@charset "UTF-8";
/* ==========================================================================
   COCKPIT-SOLUTION — Systeme de design
   Fichier unique. Mobile-first. Breakpoints 375 / 768 / 1280.
   Aucune dependance, aucune police distante, aucune requete tierce.
   Documentation d'usage : _docs/DESIGN-SPEC.md
   --------------------------------------------------------------------------
   SOMMAIRE
   01. Reset moderne compact
   02. Tokens globaux (:root)
   03. Contexte de surface — le mecanisme central
   04. Base typographique
   05. Accessibilite (skip-link, sr-only, focus)
   06. Layout (container, section, divider)
   07. En-tete + navigation
   08. Hero
   09. Grilles et cartes
   10. Feature / Stat / Steps
   11. Prose
   12. Boutons et liens
   13. Reveal (fade-up) et compteurs
   14. Accordeon
   15. Marker, Notice
   16. Formulaire
   17. Pied de page
   18. Mouvement reduit
   19. Impression
   ========================================================================== */

/* ==========================================================================
   01. RESET MODERNE COMPACT
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Compense le header collant pour les ancres internes */
  scroll-padding-top: 5.5rem;
}

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd, ul, ol {
  margin: 0;
}

ul[class], ol[class] { list-style: none; padding: 0; }

body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.65;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

input, button, textarea, select { font: inherit; color: inherit; }

button { background: none; border: 0; }

a { color: inherit; }

table { border-collapse: collapse; width: 100%; }

:target { scroll-margin-top: 5.5rem; }


/* ==========================================================================
   02. TOKENS GLOBAUX
   ========================================================================== */

:root {

  /* --- Palette de reference (brief — hex non negociables) --------------- */
  --anthracite:   #14171C;   /* fond principal            */
  --acier:        #1F252E;   /* fond secondaire           */
  --blanc-tech:   #F4F6F7;   /* fond clair                */
  --texte-2:      #6B7480;   /* gris de reference         */
  --texte-1:      #1A1F26;   /* texte sur fond clair      */
  --ambre:        #E8730C;   /* accent / signalisation    */
  --vert:         #1F7A5A;   /* validation / conformite   */

  /* --- Derives de lisibilite (tableau de contraste : DESIGN-SPEC.md) ----
     Chaque derive existe pour une raison de contraste mesuree, pas pour une
     raison esthetique. Ne pas les substituer aux couleurs de reference. */
  --ambre-texte:  #B05509;   /* ambre lisible sur fond clair   4,66:1 */
  --ambre-fonce:  #8E4406;   /* etat presse sur fond clair            */
  --ambre-clair:  #F08A2E;   /* survol sur fond sombre         7,17:1 */
  --vert-clair:   #35A57B;   /* vert lisible sur fond sombre   5,83:1 */
  --gris-clair:   #B4BCC6;   /* texte secondaire / fond sombre 5,04:1 */
  --gris-sombre:  #5F6771;   /* texte secondaire / fond clair  5,29:1 */

  /* --- Surfaces derivees ------------------------------------------------ */
  --carte-sombre: #1B212A;
  --carte-acier:  #252C37;
  --carte-claire: #FFFFFF;
  --blanc-2:      #E9EDEF;
  --ligne-sombre: #2A323D;
  --ligne-acier:  #333C48;
  --ligne-claire: #D3D9DE;
  --inerte-sombre:#2A323D;
  --inerte-clair: #E2E6E9;

  /* --- Typographie ------------------------------------------------------ */
  --police: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
            Arial, "Noto Sans", "Liberation Sans", sans-serif;
  --police-tech: ui-monospace, SFMono-Regular, "SF Mono", "Cascadia Mono",
            Consolas, "Liberation Mono", Menlo, monospace;

  --fs-100: 0.75rem;    /* 12px — mentions, legendes           */
  --fs-200: 0.8125rem;  /* 13px — eyebrow, notes de formulaire */
  --fs-300: 0.9375rem;  /* 15px — texte dense, footer          */
  --fs-400: 1rem;       /* 16px — corps mobile (plancher)      */
  --fs-500: 1.0625rem;  /* 17px — corps desktop                */
  --fs-600: clamp(1.125rem, 0.95rem + 0.7vw, 1.375rem);  /* chapo     */
  --fs-700: clamp(1.25rem, 1.10rem + 0.6vw, 1.5rem);     /* h3        */
  --fs-800: clamp(1.5rem,  1.25rem + 1.1vw, 2.125rem);   /* h2        */
  --fs-900: clamp(1.875rem, 1.4rem + 2.1vw, 3.25rem);    /* h1 / hero */

  --lh-serre: 1.18;
  --lh-titre: 1.28;
  --lh-corps: 1.65;
  --lh-dense: 1.5;

  /* --- Espacement (echelle 4px) ----------------------------------------- */
  --e-1: 0.25rem;
  --e-2: 0.5rem;
  --e-3: 0.75rem;
  --e-4: 1rem;
  --e-5: 1.5rem;
  --e-6: 2rem;
  --e-7: 2.5rem;
  --e-8: 3.5rem;
  --e-9: 5rem;

  /* --- Rayons — coherents, industriels, jamais ronds -------------------- */
  --r-1: 3px;   /* puces, filets, petits badges */
  --r-2: 6px;   /* boutons, champs              */
  --r-3: 10px;  /* cartes, encarts              */
  --r-4: 14px;  /* blocs larges                 */

  /* --- Ombres douces ---------------------------------------------------- */
  --ombre-1: 0 1px 2px rgba(6, 8, 11, .22);
  --ombre-2: 0 4px 14px rgba(6, 8, 11, .26), 0 1px 3px rgba(6, 8, 11, .18);
  --ombre-3: 0 14px 34px rgba(6, 8, 11, .34), 0 3px 8px rgba(6, 8, 11, .20);
  --ombre-claire-1: 0 1px 2px rgba(26, 31, 38, .07);
  --ombre-claire-2: 0 4px 14px rgba(26, 31, 38, .09), 0 1px 3px rgba(26, 31, 38, .06);
  --ombre-claire-3: 0 14px 34px rgba(26, 31, 38, .13), 0 3px 8px rgba(26, 31, 38, .07);

  /* --- Transitions ------------------------------------------------------ */
  --t-rapide: 140ms cubic-bezier(.4, 0, .2, 1);
  --t-normal: 240ms cubic-bezier(.4, 0, .2, 1);
  --t-lent:   420ms cubic-bezier(.22, .61, .36, 1);
  --t-reveal: 560ms cubic-bezier(.16, .84, .44, 1);

  /* --- Layout ----------------------------------------------------------- */
  --largeur-max: 1200px;
  --largeur-texte: 68ch;
  --gouttiere: 1.25rem;
  --header-h: 4rem;

  /* --- Focus ------------------------------------------------------------ */
  --focus-epaisseur: 3px;
  --focus-decalage: 2px;
}


/* ==========================================================================
   03. CONTEXTE DE SURFACE — LE MECANISME CENTRAL
   --------------------------------------------------------------------------
   Les composants (.card, .btn, .prose, .form, .notice...) ne referencent
   JAMAIS une couleur brute. Ils lisent uniquement les tokens --sur-*.
   Chaque variante de section redefinit ces tokens ; un composant pose dans
   n'importe quelle section est donc automatiquement lisible et conforme AA.
   Consequence pratique : ne jamais coder une couleur en dur dans le HTML.
   Changer .section--dark en .section--light suffit, tout suit.
   ========================================================================== */

:root,
.section--dark {
  --sur-fond:       var(--anthracite);
  --sur-fond-2:     var(--acier);
  --sur-carte:      var(--carte-sombre);
  --sur-carte-2:    #212936;
  --sur-texte:      var(--blanc-tech);
  --sur-texte-2:    var(--gris-clair);
  --sur-accent:     var(--ambre);
  --sur-accent-2:   var(--ambre-clair);
  --sur-vert:       var(--vert-clair);
  --sur-ligne:      var(--ligne-sombre);
  --sur-ligne-2:    var(--ligne-acier);
  --sur-focus:      var(--ambre);
  --sur-ombre-1:    var(--ombre-1);
  --sur-ombre-2:    var(--ombre-2);
  --sur-ombre-3:    var(--ombre-3);
  --sur-inerte:     var(--inerte-sombre);
  --sur-champ:      #101318;
  --sur-voile:      rgba(244, 246, 247, .06);
  --sur-voile-fort: rgba(244, 246, 247, .11);
}

.section--steel {
  --sur-fond:       var(--acier);
  --sur-fond-2:     #232A35;
  --sur-carte:      var(--carte-acier);
  --sur-carte-2:    #2B3441;
  --sur-texte:      var(--blanc-tech);
  --sur-texte-2:    var(--gris-clair);
  --sur-accent:     var(--ambre);
  --sur-accent-2:   var(--ambre-clair);
  --sur-vert:       var(--vert-clair);
  --sur-ligne:      var(--ligne-acier);
  --sur-ligne-2:    #3D4855;
  --sur-focus:      var(--ambre);
  --sur-ombre-1:    var(--ombre-1);
  --sur-ombre-2:    var(--ombre-2);
  --sur-ombre-3:    var(--ombre-3);
  --sur-inerte:     #313A46;
  --sur-champ:      #171C24;
  --sur-voile:      rgba(244, 246, 247, .06);
  --sur-voile-fort: rgba(244, 246, 247, .12);
}

.section--light {
  --sur-fond:       var(--blanc-tech);
  --sur-fond-2:     var(--blanc-2);
  --sur-carte:      var(--carte-claire);
  --sur-carte-2:    var(--blanc-2);
  --sur-texte:      var(--texte-1);
  --sur-texte-2:    var(--gris-sombre);
  --sur-accent:     var(--ambre-texte);   /* jamais --ambre ici : 2,81:1 */
  --sur-accent-2:   var(--ambre-fonce);
  --sur-vert:       var(--vert);
  --sur-ligne:      var(--ligne-claire);
  --sur-ligne-2:    #C2CAD1;
  --sur-focus:      var(--ambre-texte);
  --sur-ombre-1:    var(--ombre-claire-1);
  --sur-ombre-2:    var(--ombre-claire-2);
  --sur-ombre-3:    var(--ombre-claire-3);
  --sur-inerte:     var(--inerte-clair);
  --sur-champ:      #FFFFFF;
  --sur-voile:      rgba(26, 31, 38, .04);
  --sur-voile-fort: rgba(26, 31, 38, .07);
}


/* ==========================================================================
   04. BASE TYPOGRAPHIQUE
   ========================================================================== */

body {
  font-family: var(--police);
  font-size: var(--fs-400);
  line-height: var(--lh-corps);
  color: var(--sur-texte);
  background-color: var(--sur-fond);
  /* Degrade subtil anthracite -> acier. Statique : aucun cout par frame. */
  background-image: linear-gradient(178deg, #14171C 0%, #171B22 46%, #1F252E 100%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: var(--lh-titre);
  letter-spacing: -0.01em;
  color: var(--sur-texte);
  text-wrap: balance;
}

h1 { font-size: var(--fs-900); line-height: var(--lh-serre); letter-spacing: -0.022em; }
h2 { font-size: var(--fs-800); letter-spacing: -0.018em; }
h3 { font-size: var(--fs-700); }
h4 { font-size: var(--fs-500); letter-spacing: 0; }

p { text-wrap: pretty; }

strong, b { font-weight: 700; color: var(--sur-texte); }

small { font-size: var(--fs-200); }

::selection { background: var(--ambre); color: var(--anthracite); }

hr {
  border: 0;
  height: 1px;
  background: var(--sur-ligne);
  margin: var(--e-6) 0;
}


/* ==========================================================================
   05. ACCESSIBILITE
   ========================================================================== */

/* .sr-only — masque visuellement, reste annonce par les lecteurs d'ecran */
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* .skip-link — doit etre le tout premier element focalisable du <body> */
.skip-link {
  position: absolute;
  top: 0;
  left: var(--e-4);
  z-index: 200;
  transform: translateY(-150%);
  display: inline-flex;
  align-items: center;
  padding: var(--e-3) var(--e-5);
  min-height: 44px;
  font-size: var(--fs-300);
  font-weight: 700;
  text-decoration: none;
  color: var(--anthracite);
  background: var(--ambre);
  border-radius: 0 0 var(--r-2) var(--r-2);
  box-shadow: var(--ombre-3);
  transition: transform var(--t-normal);
}
.skip-link:focus,
.skip-link:focus-visible { transform: translateY(0); }

/* Focus visible — unique, net, ambre, sur TOUS les elements interactifs.
   La couleur suit la surface : #E8730C sur fond sombre (5,90:1) et
   #B05509 sur fond clair (4,66:1). L'ambre pur sur fond clair ne fait que
   2,81:1 et ne satisferait pas le seuil de 3:1 des indicateurs de focus. */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: var(--focus-epaisseur) solid var(--sur-focus);
  outline-offset: var(--focus-decalage);
  border-radius: var(--r-1);
  /* Halo de secours : garantit la visibilite du contour meme par-dessus une
     image ou un bouton de teinte proche. */
  box-shadow: 0 0 0 calc(var(--focus-epaisseur) + var(--focus-decalage) + 1px)
              rgba(6, 8, 11, .55);
}
.section--light :where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  box-shadow: 0 0 0 calc(var(--focus-epaisseur) + var(--focus-decalage) + 1px)
              rgba(244, 246, 247, .92);
}
/* Le clic souris ne dessine pas le contour ; le clavier oui. */
:where(a, button, input, textarea, select, summary, [tabindex]):focus:not(:focus-visible) {
  outline: none;
}

a[href], button, [role="button"], summary, label[for] {
  touch-action: manipulation;
}


/* ==========================================================================
   06. LAYOUT
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--largeur-max);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

.section {
  position: relative;
  padding-block: var(--e-8);
  color: var(--sur-texte);
  background-color: var(--sur-fond);
}

/* Les trois variantes de surface. Elles ne font que peindre le fond :
   toute la logique de couleur vit dans les tokens --sur-* du bloc 03. */
.section--dark {
  background-image: linear-gradient(180deg, #14171C 0%, #171C23 100%);
}
.section--steel {
  background-image: linear-gradient(180deg, #1F252E 0%, #232A35 100%);
}
.section--light {
  background-image: linear-gradient(180deg, #F4F6F7 0%, #EDF1F2 100%);
}

/* En-tete de section */
.section__head {
  max-width: var(--largeur-texte);
  margin-bottom: var(--e-7);
}
.section__head--centre {
  margin-inline: auto;
  text-align: center;
}

/* Sur-titre. Toujours accompagne d'un filet ambre : la couleur seule ne
   doit jamais porter l'information (WCAG 1.4.1). */
.section__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  margin-bottom: var(--e-3);
  font-family: var(--police-tech);
  font-size: var(--fs-200);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sur-accent);
}
.section__eyebrow::before {
  content: "";
  flex: 0 0 auto;
  width: 26px;
  height: 2px;
  background: var(--sur-accent);
  border-radius: var(--r-1);
}
.section__head--centre .section__eyebrow { justify-content: center; }

.section__title { margin-bottom: var(--e-4); }

.section__intro {
  font-size: var(--fs-600);
  line-height: 1.55;
  color: var(--sur-texte-2);
}
.section__intro > * + * { margin-top: var(--e-4); }

/* Separateur elegant : filet degrade, accent ambre au centre */
.divider {
  position: relative;
  height: 1px;
  margin-block: var(--e-7);
  border: 0;
  background: linear-gradient(90deg,
              transparent 0%,
              var(--sur-ligne-2) 18%,
              var(--sur-ligne-2) 82%,
              transparent 100%);
}
.divider::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 34px;
  height: 3px;
  transform: translate(-50%, -50%);
  background: var(--sur-accent);
  border-radius: var(--r-1);
}


/* ==========================================================================
   07. EN-TETE + NAVIGATION
   --------------------------------------------------------------------------
   .site-header est TOUJOURS une surface sombre, sur toutes les pages, y
   compris au-dessus d'une section claire. C'est un choix assume : un seul
   etat de contraste a garantir. Le degrade de fond assure >= 14:1 pour le
   texte, meme si une image tres claire defile dessous.
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  /* Voile degrade : opaque en haut, s'estompe vers le bas. Le texte de la
     barre repose donc toujours sur ~94% d'anthracite. */
  background: linear-gradient(to bottom,
              rgba(20, 23, 28, .94) 0%,
              rgba(20, 23, 28, .70) 62%,
              rgba(20, 23, 28, 0) 100%);
  border-bottom: 1px solid transparent;
  transition: background var(--t-normal),
              border-color var(--t-normal),
              box-shadow var(--t-normal);
}

.site-header > .container {
  display: flex;
  align-items: center;
  gap: var(--e-4);
  min-height: var(--header-h);
  padding-block: var(--e-2);
}

/* Etat au defilement : glassmorphism discret.
   backdrop-filter s'applique a une barre de 64px de haut qui ne bouge pas
   pendant le scroll : le flou n'est recalcule qu'a la composition, jamais
   par frame d'animation. */
.site-header--scrolled {
  background: rgba(20, 23, 28, .86);
  border-bottom-color: var(--ligne-sombre);
  box-shadow: var(--ombre-2);
}
@supports (backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px)) {
  .site-header--scrolled {
    background: rgba(20, 23, 28, .72);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    backdrop-filter: blur(12px) saturate(140%);
  }
}

/* Le logo occupe la premiere cellule ; .nav pousse a droite */
.site-header .logo,
.site-header__logo {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.site-header .logo img,
.site-header__logo img { height: 34px; width: auto; }

/* --- Navigation ------------------------------------------------------- */

.nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--e-4);
}

/* Bouton hamburger — visible sous 768px uniquement.
   Contenu HTML attendu : uniquement <span class="sr-only">Menu</span>.
   Les trois barres sont entierement dessinees en CSS (::before porte la
   barre du haut ET, via box-shadow, celle du milieu ; ::after celle du bas).
   Aucun element decoratif a ecrire dans le HTML.
   REPLI SANS JS : le bouton est masque par defaut. Il n'apparait que sous
   html.js, c'est-a-dire quand le script capable de le faire fonctionner est
   la. Sans JavaScript, aucun bouton inerte n'est propose au visiteur. */
.nav__toggle {
  position: relative;
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  color: var(--blanc-tech);
  background: var(--sur-voile);
  border: 1px solid var(--ligne-acier);
  border-radius: var(--r-2);
  cursor: pointer;
  transition: background var(--t-rapide), border-color var(--t-rapide);
}
html.js .nav__toggle { display: inline-flex; }
.nav__toggle:hover { background: var(--sur-voile-fort); border-color: var(--ambre); }

.nav__toggle::before,
.nav__toggle::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 20px;
  height: 2px;
  margin-left: -10px;
  margin-top: -1px;
  background: currentColor;
  border-radius: var(--r-1);
  transition: transform var(--t-normal), box-shadow var(--t-rapide);
}
/* Barre du haut + barre du milieu peinte en ombre portee */
.nav__toggle::before { transform: translateY(-6px); box-shadow: 0 6px 0 0 currentColor; }
.nav__toggle::after  { transform: translateY(6px); }

/* Micro-animation en croix a l'ouverture */
.nav--open .nav__toggle::before { transform: rotate(45deg);  box-shadow: 0 6px 0 0 transparent; }
.nav--open .nav__toggle::after  { transform: rotate(-45deg); }

/* Liste de navigation.
   --------------------------------------------------------------------------
   ETAT PAR DEFAUT = SANS JAVASCRIPT : liste empilee, entierement visible,
   dans le flux de la barre. Aucun lien n'est jamais inatteignable.
   Le panneau deroulant escamotable n'existe que sous html.js. */
.nav__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-1);
}

/* Etat ferme du panneau — uniquement quand le script est present */
html.js .nav__list {
  flex-wrap: nowrap;
  flex-direction: column;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  padding: var(--e-3) var(--gouttiere) var(--e-5);
  background: rgba(20, 23, 28, .97);
  border-top: 1px solid var(--ligne-sombre);
  border-bottom: 1px solid var(--ligne-sombre);
  box-shadow: var(--ombre-3);
  /* transform + opacity uniquement : aucun reflow, aucun CLS */
  transform: translateY(-8px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: transform var(--t-normal), opacity var(--t-normal),
              visibility 0s linear var(--t-normal);
}
@supports (backdrop-filter: blur(14px)) {
  html.js .nav__list { background: rgba(20, 23, 28, .90);
                       -webkit-backdrop-filter: blur(14px);
                       backdrop-filter: blur(14px); }
}

html.js .nav--open .nav__list {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: transform var(--t-normal), opacity var(--t-normal),
              visibility 0s;
}

.nav__link {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: var(--e-2) var(--e-3);
  font-size: var(--fs-300);
  font-weight: 600;
  text-decoration: none;
  color: var(--gris-clair);
  border-radius: var(--r-2);
  border-left: 3px solid transparent;
  transition: color var(--t-rapide), background var(--t-rapide),
              border-color var(--t-rapide);
}
.nav__link:hover {
  color: var(--blanc-tech);
  background: var(--sur-voile);
  border-left-color: var(--ambre);
}
.nav__link--active {
  color: var(--blanc-tech);
  border-left-color: var(--ambre);
  background: var(--sur-voile);
}

/* Le bouton d'appel reste visible dans la barre en permanence, y compris
   menu ferme. Il se resserre sur mobile pour laisser passer le hamburger. */
.nav > .btn {
  min-height: 44px;
  padding-inline: var(--e-3);
  font-size: var(--fs-200);
}
@media (min-width: 768px) {
  .nav > .btn { padding-inline: var(--e-4); font-size: var(--fs-300); }
}


/* ==========================================================================
   08. HERO
   ========================================================================== */

.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: min(78svh, 640px);
  /* Le header est sticky et non fixed : pas de compensation a prevoir ici,
     mais on remonte le hero sous la barre pour le voile degrade. */
  margin-top: calc(var(--header-h) * -1 - var(--e-2) * 2);
  padding-top: calc(var(--header-h) + var(--e-8));
  padding-bottom: var(--e-8);
  overflow: hidden;
  background-color: var(--anthracite);
  color: var(--blanc-tech);
}

/* Variante compacte pour les pages internes */
.hero--page {
  min-height: 0;
  padding-top: calc(var(--header-h) + var(--e-7));
  padding-bottom: var(--e-7);
}

/* Media de fond. Reserve sa place : position absolute + inset -> il ne
   participe jamais au flux, donc CLS nul quelle que soit la date d'arrivee
   de l'image. Prevoir width/height sur le <img> pour l'aspect-ratio. */
.hero__media {
  position: absolute;
  inset: -6% 0 -6% 0;   /* marge verticale : reserve de course du parallax */
  z-index: -2;
  will-change: transform;
}
.hero__media img,
.hero__media picture,
.hero__media > * {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Voile sombre. Calibre pour que --blanc-tech reste >= 6,5:1 meme si
   l'image sous-jacente est blanc pur a l'endroit le plus clair du voile. */
.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(105deg, rgba(20, 23, 28, .94) 0%, rgba(20, 23, 28, .58) 72%,
                    rgba(20, 23, 28, .70) 100%),
    linear-gradient(180deg, rgba(20, 23, 28, .82) 0%, rgba(20, 23, 28, .62) 42%,
                    rgba(20, 23, 28, .92) 100%);
}

.hero__inner {
  position: relative;
  width: 100%;
  max-width: var(--largeur-max);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

.hero__title {
  max-width: 20ch;
  margin-bottom: var(--e-4);
  color: var(--blanc-tech);
}

.hero__sub {
  max-width: 56ch;
  margin-bottom: var(--e-6);
  font-size: var(--fs-600);
  line-height: 1.55;
  color: var(--gris-clair);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3);
}
.hero__actions > * { flex: 1 1 auto; }


/* ==========================================================================
   09. GRILLES ET CARTES
   ========================================================================== */

.grid {
  display: grid;
  gap: var(--e-4);
  grid-template-columns: 1fr;
}
/* Les modificateurs ne s'appliquent qu'a partir de 768px (bloc responsive). */

/* --- Carte ------------------------------------------------------------- */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  padding: var(--e-5);
  color: var(--sur-texte);
  background-color: var(--sur-carte);
  background-image: linear-gradient(160deg, var(--sur-carte-2) 0%, var(--sur-carte) 62%);
  border: 1px solid var(--sur-ligne);
  border-radius: var(--r-3);
  box-shadow: var(--sur-ombre-1);
  transition: transform var(--t-normal), box-shadow var(--t-normal),
              border-color var(--t-normal);
}

/* Filet ambre superieur, revele au survol. Decoratif : il double une
   information deja portee par le titre, il ne la porte pas seul. */
.card::before {
  content: "";
  position: absolute;
  inset: -1px -1px auto -1px;
  height: 3px;
  background: var(--sur-accent);
  border-radius: var(--r-3) var(--r-3) 0 0;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-lent);
}

/* --- Carte cliquable : <a class="card card--link"> ---------------------- */

.card--link {
  text-decoration: none;
  cursor: pointer;
}
.card--link:hover,
.card--link:focus-visible {
  transform: translateY(-4px);
  border-color: var(--sur-ligne-2);
  box-shadow: var(--sur-ombre-3);
}
.card--link:hover::before,
.card--link:focus-visible::before { transform: scaleX(1); }
.card--link:active { transform: translateY(-1px); }

/* Chevron discret : signale l'affordance sans le mot "cliquez" */
.card--link .card__title::after {
  content: "";
  display: inline-block;
  width: .42em;
  height: .42em;
  margin-left: .5em;
  border-right: 2px solid var(--sur-accent);
  border-top: 2px solid var(--sur-accent);
  transform: translateY(-.06em) rotate(45deg);
  transition: transform var(--t-normal);
}
.card--link:hover .card__title::after,
.card--link:focus-visible .card__title::after {
  transform: translate(3px, -.06em) rotate(45deg);
}

.card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--sur-accent);
  background: var(--sur-voile);
  border: 1px solid var(--sur-ligne);
  border-radius: var(--r-2);
  transition: transform var(--t-normal), background var(--t-normal),
              border-color var(--t-normal);
}
.card__icon svg { width: 22px; height: 22px; }
.card--link:hover .card__icon,
.card--link:focus-visible .card__icon {
  transform: translateY(-2px);
  background: var(--sur-voile-fort);
  border-color: var(--sur-accent);
}

.card__title {
  font-size: var(--fs-500);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.005em;
  color: var(--sur-texte);
}

.card__text {
  font-size: var(--fs-300);
  line-height: var(--lh-corps);
  color: var(--sur-texte-2);
}
.card__text > * + * { margin-top: var(--e-3); }

/* Media de carte : le ratio est fige en CSS, l'image ne decale rien. */
.card__media {
  position: relative;
  overflow: hidden;
  margin: calc(var(--e-5) * -1) calc(var(--e-5) * -1) var(--e-2);
  aspect-ratio: 16 / 10;
  border-radius: var(--r-3) var(--r-3) 0 0;
  background-color: var(--sur-carte-2);
}
.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-lent);
}
/* Voile sombre sur image : contexte industriel, jamais de photo criarde */
.card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 23, 28, .12) 0%,
              rgba(20, 23, 28, .46) 100%);
  transition: opacity var(--t-lent);
}
.card--link:hover .card__media img,
.card--link:focus-visible .card__media img { transform: scale(1.045); }
.card--link:hover .card__media::after,
.card--link:focus-visible .card__media::after { opacity: .72; }


/* ==========================================================================
   10. FEATURE / STAT / STEPS
   ========================================================================== */

/* --- .feature : ligne numerotee, pour une liste d'arguments ------------ */

.feature {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--e-3) var(--e-4);
  align-items: start;
  padding-block: var(--e-4);
  border-top: 1px solid var(--sur-ligne);
}
.feature:first-child { border-top: 0; padding-top: 0; }
.feature > :not(.feature__num) { grid-column: 2; }

.feature__num {
  grid-row: span 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  height: 2.25rem;
  padding-inline: .4rem;
  font-family: var(--police-tech);
  font-size: var(--fs-300);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--sur-accent);
  background: var(--sur-voile);
  border: 1px solid var(--sur-ligne-2);
  border-radius: var(--r-2);
}

/* --- .stat : chiffre-cle ----------------------------------------------- */

.stat {
  display: flex;
  flex-direction: column;
  gap: var(--e-1);
  padding: var(--e-5) var(--e-4);
  text-align: center;
  background: var(--sur-voile);
  border: 1px solid var(--sur-ligne);
  border-radius: var(--r-3);
}

.stat__value {
  font-family: var(--police-tech);
  font-size: clamp(1.75rem, 1.3rem + 1.9vw, 2.75rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  /* tabular-nums : la largeur des chiffres ne varie pas pendant le comptage */
  font-variant-numeric: tabular-nums;
  color: var(--sur-accent);
}

.stat__label {
  font-size: var(--fs-200);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sur-texte-2);
}

/* --- .steps / .step : processus numerote ------------------------------- */

.steps {
  position: relative;
  display: grid;
  gap: var(--e-5);
  grid-template-columns: 1fr;
  counter-reset: cockpit-step;
}

.step {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--e-3) var(--e-4);
  align-items: start;
  padding-bottom: var(--e-5);
}
.step > :not(.step__num) { grid-column: 2; }
.step > * + * { margin-top: 0; }
.step h3, .step .step__title { font-size: var(--fs-500); margin-bottom: var(--e-2); }
.step p { font-size: var(--fs-300); color: var(--sur-texte-2); }

/* Trait de liaison vertical entre les etapes */
.step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 1.375rem;
  top: 2.75rem;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--sur-ligne-2), transparent);
}

.step__num {
  grid-row: span 3;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  font-family: var(--police-tech);
  font-size: var(--fs-400);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--anthracite);
  background: var(--sur-accent);
  border-radius: var(--r-2);
  box-shadow: var(--sur-ombre-1);
}
/* Sur fond clair, --sur-accent vaut #B05509 : le texte anthracite dessus
   n'est plus lisible. On bascule sur du blanc technique. */
.section--light .step__num { color: var(--blanc-tech); }


/* ==========================================================================
   11. PROSE — bloc de texte long (mentions legales, CGV, articles)
   ========================================================================== */

.prose {
  max-width: var(--largeur-texte);
  font-size: var(--fs-400);
  line-height: var(--lh-corps);
  color: var(--sur-texte-2);
}
.prose > * + * { margin-top: var(--e-4); }

.prose h2 {
  margin-top: var(--e-7);
  padding-top: var(--e-5);
  border-top: 1px solid var(--sur-ligne);
  font-size: var(--fs-700);
  color: var(--sur-texte);
}
.prose > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

.prose h3 {
  margin-top: var(--e-6);
  font-size: var(--fs-500);
  color: var(--sur-texte);
}

.prose h4 {
  margin-top: var(--e-5);
  font-size: var(--fs-400);
  color: var(--sur-texte);
}

.prose p { color: var(--sur-texte-2); }

.prose strong { color: var(--sur-texte); }

.prose a {
  color: var(--sur-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--t-rapide), text-decoration-color var(--t-rapide);
}
.prose a:hover { color: var(--sur-accent-2); text-decoration-thickness: 2px; }

.prose ul, .prose ol {
  padding-left: var(--e-5);
  display: grid;
  gap: var(--e-2);
}
.prose ul { list-style: none; padding-left: 0; }
.prose ul > li {
  position: relative;
  padding-left: var(--e-5);
}
.prose ul > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 7px;
  height: 7px;
  background: var(--sur-accent);
  border-radius: var(--r-1);
}
.prose ol { list-style: decimal; }
.prose ol > li::marker {
  color: var(--sur-accent);
  font-family: var(--police-tech);
  font-weight: 700;
}

.prose blockquote {
  padding: var(--e-4) var(--e-5);
  border-left: 4px solid var(--sur-accent);
  background: var(--sur-voile);
  border-radius: 0 var(--r-2) var(--r-2) 0;
  color: var(--sur-texte);
}

.prose code, .prose kbd {
  font-family: var(--police-tech);
  font-size: .92em;
  padding: .12em .4em;
  background: var(--sur-voile-fort);
  border-radius: var(--r-1);
  color: var(--sur-texte);
}

/* Tableaux — defilent dans leur propre conteneur, jamais la page.
   Envelopper dans <div class="prose__scroll"> si le tableau est large. */
.prose__scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--sur-ligne);
  border-radius: var(--r-2);
}
.prose table {
  font-size: var(--fs-300);
  min-width: 32rem;
}
.prose th, .prose td {
  padding: var(--e-3) var(--e-4);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--sur-ligne);
}
.prose thead th {
  font-size: var(--fs-200);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sur-texte);
  background: var(--sur-voile);
  border-bottom: 2px solid var(--sur-ligne-2);
}
.prose tbody tr:last-child td { border-bottom: 0; }

.prose dl { display: grid; gap: var(--e-3); }
.prose dt { font-weight: 700; color: var(--sur-texte); }
.prose dd { margin: 0; }

.prose figure { margin: var(--e-5) 0; }
.prose figcaption {
  margin-top: var(--e-2);
  font-size: var(--fs-200);
  color: var(--sur-texte-2);
}


/* ==========================================================================
   12. BOUTONS ET LIENS
   ========================================================================== */

.btn {
  --btn-fond: transparent;
  --btn-texte: var(--sur-texte);
  --btn-bord: var(--sur-ligne-2);
  --btn-glow: transparent;

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  min-height: 48px;              /* > 44px : cible tactile confortable */
  padding: var(--e-3) var(--e-5);
  font-size: var(--fs-300);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  color: var(--btn-texte);
  background-color: var(--btn-fond);
  border: 2px solid var(--btn-bord);
  border-radius: var(--r-2);
  transition: transform var(--t-rapide), background-color var(--t-rapide),
              border-color var(--t-rapide), color var(--t-rapide),
              box-shadow var(--t-normal);
}
.btn svg { width: 18px; height: 18px; flex: 0 0 auto; }

.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); transition-duration: 60ms; }

/* --- Primaire : fond ambre, texte anthracite (5,90:1) ------------------ */
.btn--primary {
  --btn-fond: var(--ambre);
  --btn-texte: var(--anthracite);
  --btn-bord: var(--ambre);
  --btn-glow: rgba(232, 115, 12, .34);
  box-shadow: var(--sur-ombre-1);
}
.btn--primary:hover {
  --btn-fond: var(--ambre-clair);
  --btn-bord: var(--ambre-clair);
  /* Glow discret : une seule ombre coloree, jamais de halo demonstratif */
  box-shadow: 0 6px 20px var(--btn-glow), var(--sur-ombre-1);
}
.btn--primary:active { --btn-fond: #D06509; --btn-bord: #D06509; }

/* --- Appel : la contre-forme du primaire ------------------------------- */
.btn--call {
  --btn-fond: var(--blanc-tech);
  --btn-texte: var(--texte-1);
  --btn-bord: var(--blanc-tech);
  box-shadow: var(--sur-ombre-1);
}
.btn--call svg { color: var(--ambre-texte); }
.btn--call:hover {
  --btn-fond: #FFFFFF;
  --btn-bord: #FFFFFF;
  box-shadow: 0 6px 20px rgba(6, 8, 11, .34);
}
/* Sur fond clair, l'inversion s'inverse : anthracite plein. */
.section--light .btn--call {
  --btn-fond: var(--anthracite);
  --btn-texte: var(--blanc-tech);
  --btn-bord: var(--anthracite);
}
.section--light .btn--call svg { color: var(--ambre); }
.section--light .btn--call:hover { --btn-fond: #22272F; --btn-bord: #22272F; }

/* --- Fantome : contour, pour l'action secondaire ----------------------- */
.btn--ghost {
  --btn-fond: transparent;
  --btn-texte: var(--sur-texte);
  --btn-bord: var(--sur-ligne-2);
}
.btn--ghost:hover {
  --btn-fond: var(--sur-voile);
  --btn-bord: var(--sur-accent);
  --btn-texte: var(--sur-texte);
}
.btn--ghost:active { --btn-fond: var(--sur-voile-fort); }

/* --- Etat desactive ----------------------------------------------------
   Objectif : clairement INOPERANT, jamais "casse". Aplat mat, pas d'ombre,
   pas de survol, curseur explicite, opacite non ecrasee (le texte reste
   lisible : ~4,2:1). Le bouton d'envoi du formulaire vit dans cet etat
   tant que l'adresse e-mail publique n'est pas connue. */
.btn:disabled,
.btn[disabled],
.btn[aria-disabled="true"] {
  --btn-fond: var(--sur-inerte);
  --btn-texte: var(--sur-texte-2);
  --btn-bord: var(--sur-ligne-2);
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
  /* Hachures fines : lecture immediate "hors service", sans couleur seule */
  background-image: repeating-linear-gradient(135deg,
                    transparent 0 7px,
                    var(--sur-voile) 7px 8px);
}
.btn:disabled:hover,
.btn[disabled]:hover,
.btn[aria-disabled="true"]:hover { transform: none; box-shadow: none; }
/* aria-disabled reste focalisable : le contour de focus doit fonctionner. */
.btn[aria-disabled="true"] { pointer-events: auto; }

/* --- Lien a soulignement anime ----------------------------------------- */
.link-underline {
  position: relative;
  display: inline;
  color: var(--sur-accent);
  font-weight: 600;
  text-decoration: none;
  /* Le trait est peint en background : aucune reservation de place a
     prevoir, aucun decalage au survol. */
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 2px;
  padding-bottom: 2px;
  transition: background-size var(--t-normal), color var(--t-rapide);
}
.link-underline:hover,
.link-underline:focus-visible {
  background-size: 100% 2px;
  color: var(--sur-accent-2);
}
/* Sans JS ni survol (lecteur, impression), le lien reste identifiable :
   il est en gras et en couleur d'accent, et souligne au clavier. */
@media (hover: none) {
  .link-underline { background-size: 100% 1px; }
}


/* ==========================================================================
   13. REVEAL (fade-up) ET COMPTEURS
   --------------------------------------------------------------------------
   MECANIQUE DE REPLI SANS JAVASCRIPT — POINT CRITIQUE
   L'etat par defaut de .reveal est VISIBLE. L'etat masque n'existe que sous
   le selecteur html.js, classe ajoutee par un script inline dans le <head>.
   Consequences :
     - JS desactive         -> la classe .js n'est jamais posee -> tout visible
     - JS en erreur         -> idem, la page reste lisible
     - Script inline absent -> idem (degradation silencieuse, pas de page vide)
   C'est l'inverse d'un `no-js` retire : ici l'echec par defaut est la
   visibilite, jamais l'invisibilite.
   Le script inline a placer dans le <head> AVANT la feuille de style :
     <script>document.documentElement.classList.add('js');</script>
   ========================================================================== */

/* Etat final / etat par defaut. Aucune propriete de mise en page : seules
   opacity et transform sont animees -> zero reflow, zero CLS. */
.reveal {
  opacity: 1;
  transform: none;
}

html.js .reveal {
  transition: opacity var(--t-reveal), transform var(--t-reveal);
  transition-delay: var(--reveal-delay, 0ms);
}

/* Etat initial : uniquement si JS est actif ET que l'element n'est pas
   encore entre dans le viewport. */
html.js .reveal:not(.reveal--in) {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
}

.reveal--in {
  opacity: 1;
  transform: none;
}

/* Apparition en cascade — automatique dans .grid et .steps.
   Delais courts et plafonnes : au-dela de 6 elements, tout part ensemble
   pour ne pas faire attendre le lecteur. */
html.js .grid > .reveal:nth-child(2)  { --reveal-delay:  70ms; }
html.js .grid > .reveal:nth-child(3)  { --reveal-delay: 140ms; }
html.js .grid > .reveal:nth-child(4)  { --reveal-delay: 210ms; }
html.js .grid > .reveal:nth-child(5)  { --reveal-delay: 280ms; }
html.js .grid > .reveal:nth-child(n+6){ --reveal-delay: 340ms; }

html.js .steps > .reveal:nth-child(2) { --reveal-delay:  80ms; }
html.js .steps > .reveal:nth-child(3) { --reveal-delay: 160ms; }
html.js .steps > .reveal:nth-child(4) { --reveal-delay: 240ms; }
html.js .steps > .reveal:nth-child(n+5){ --reveal-delay: 300ms; }

/* Compteur. min-width est pose par le JS avant l'animation, a partir de la
   largeur rendue de la valeur finale : la largeur ne bouge jamais. */
.js-counter {
  display: inline-block;
  font-variant-numeric: tabular-nums;
}


/* ==========================================================================
   14. ACCORDEON (FAQ)
   --------------------------------------------------------------------------
   Repli sans JS : les panneaux sont OUVERTS par defaut. Ils ne se replient
   que sous html.js. L'attribut hidden est pose par le JS, jamais dans le
   HTML source — sinon le contenu disparaitrait sans JS.
   ========================================================================== */

.accordion {
  display: grid;
  gap: var(--e-2);
  max-width: var(--largeur-texte);
}

.accordion__item {
  background: var(--sur-carte);
  border: 1px solid var(--sur-ligne);
  border-radius: var(--r-3);
  overflow: hidden;
  transition: border-color var(--t-normal), background var(--t-normal);
}
.accordion__item:hover { border-color: var(--sur-ligne-2); }
.accordion__item:has(.accordion__trigger[aria-expanded="true"]) {
  border-color: var(--sur-ligne-2);
  background: var(--sur-carte-2);
}

.accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  width: 100%;
  min-height: 56px;
  padding: var(--e-4) var(--e-5);
  font-size: var(--fs-400);
  font-weight: 700;
  line-height: 1.4;
  text-align: left;
  color: var(--sur-texte);
  cursor: pointer;
  transition: color var(--t-rapide), background var(--t-rapide);
}
.accordion__trigger:hover { color: var(--sur-accent); background: var(--sur-voile); }

/* Chevron. Micro-animation : rotation seule, sur le compositeur. */
.accordion__trigger::after {
  content: "";
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  margin-right: 2px;
  border-right: 2px solid var(--sur-accent);
  border-bottom: 2px solid var(--sur-accent);
  transform: translateY(-3px) rotate(45deg);
  transition: transform var(--t-normal);
}
.accordion__trigger[aria-expanded="true"]::after {
  transform: translateY(2px) rotate(225deg);
}

.accordion__panel {
  padding: 0 var(--e-5) var(--e-5);
  font-size: var(--fs-300);
  line-height: var(--lh-corps);
  color: var(--sur-texte-2);
}
.accordion__panel > * + * { margin-top: var(--e-3); }

/* Repli : l'attribut hidden est la seule source de verite. Il retire le
   panneau de l'arbre d'accessibilite en meme temps que de l'affichage —
   ce qu'une simple hauteur nulle ne ferait pas. Il est pose et retire par
   le JS uniquement : jamais ecrit dans le HTML source, sinon le contenu
   disparaitrait pour un visiteur sans JavaScript. */
.accordion__panel[hidden] { display: none; }

/* A l'ouverture, le contenu monte en fondu. Seuls opacity et transform
   sont animes : la hauteur, elle, s'etablit d'un coup. Aucune propriete de
   mise en page n'est donc animee, et l'ouverture ne coute pas un reflow
   par frame. */
@keyframes cockpit-panel-in {
  from { opacity: 0; transform: translate3d(0, -6px, 0); }
  to   { opacity: 1; transform: none; }
}
html.js .accordion__panel {
  animation: cockpit-panel-in var(--t-normal) cubic-bezier(.16, .84, .44, 1) both;
}


/* ==========================================================================
   15. MARKER — donnee a completer
   --------------------------------------------------------------------------
   Regle absolue du dossier : aucune donnee legale n'est inventee. Toute
   valeur manquante est rendue par ce composant, jamais par une valeur
   plausible. Il doit sauter aux yeux du client en relecture : il est donc
   volontairement bruyant, et non masquable par une surcharge accidentelle
   (les proprietes decisives sont marquees !important).
   ========================================================================== */

.marker {
  display: inline;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  padding: .1em .5em .16em;
  font-family: var(--police-tech) !important;
  font-size: .92em;
  font-weight: 700 !important;
  letter-spacing: 0.02em;
  color: var(--anthracite) !important;
  background-color: var(--ambre) !important;
  border-radius: var(--r-1);
  text-decoration: none;
  /* Liseres sombres : le bloc reste delimite meme sur fond clair, ou
     l'ambre seul ne fait que 2,81:1 contre le fond. */
  box-shadow: inset 0 0 0 1px rgba(20, 23, 28, .45);
}
.marker::before {
  content: "\25B2\00A0";   /* triangle plein + espace insecable */
  font-size: .82em;
}

/* Variante bloc : un paragraphe entier a completer. */
.marker--block {
  display: block;
  box-decoration-break: slice;
  -webkit-box-decoration-break: slice;
  margin-block: var(--e-4);
  padding: var(--e-4) var(--e-5);
  font-size: var(--fs-300);
  line-height: var(--lh-dense);
  border-radius: var(--r-2);
  border-left: 6px solid var(--anthracite);
  box-shadow: inset 0 0 0 1px rgba(20, 23, 28, .45), var(--ombre-1);
}
.marker--block::before {
  content: "\25B2\00A0\00C0 COMPL\00C9TER\00A0\2014\00A0";
  font-weight: 700;
  letter-spacing: 0.06em;
}

/* Anti-masquage : meme si une regle tierce tente de le cacher, il revient. */
.marker[hidden],
.marker--block[hidden] { display: revert !important; }


/* ==========================================================================
   15b. NOTICE — encart d'information
   ========================================================================== */

.notice {
  --notice-accent: var(--sur-accent);
  position: relative;
  padding: var(--e-4) var(--e-5);
  padding-left: calc(var(--e-5) + 6px);
  font-size: var(--fs-300);
  line-height: var(--lh-corps);
  color: var(--sur-texte-2);
  background: var(--sur-voile);
  border: 1px solid var(--sur-ligne);
  border-left: 6px solid var(--notice-accent);
  border-radius: 0 var(--r-3) var(--r-3) 0;
}
.notice > * + * { margin-top: var(--e-3); }
.notice strong { color: var(--sur-texte); }
.notice a { color: var(--sur-accent); text-underline-offset: 3px; }

/* Titre optionnel de l'encart */
.notice__title,
.notice > h2,
.notice > h3,
.notice > h4 {
  font-size: var(--fs-400);
  font-weight: 700;
  color: var(--sur-texte);
  margin-bottom: var(--e-2);
}

/* Variante reglementaire : vert de conformite.
   Porte le bloc "Cadre d'intervention" et l'avis sur le formulaire inactif.
   Le vert dit "cadre pose", pas "alerte" : c'est un encart de clarte, pas
   un avertissement. Le brief interdit toute imagerie anxiogene. */
.notice--legal {
  --notice-accent: var(--sur-vert);
  background: var(--sur-voile);
}
.section--light .notice--legal { background: #EAF3EF; border-color: #C9E0D6; }
.section--dark  .notice--legal,
.section--steel .notice--legal { background: rgba(53, 165, 123, .09);
                                 border-color: rgba(53, 165, 123, .26); }
.notice--legal .notice__title,
.notice--legal > h2, .notice--legal > h3, .notice--legal > h4 {
  color: var(--sur-vert);
}
.notice--legal .notice__title::before,
.notice--legal > h3::before {
  content: "";
  display: inline-block;
  width: .55em;
  height: .3em;
  margin-right: .55em;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-.16em) rotate(-45deg);
}


/* ==========================================================================
   16. FORMULAIRE
   --------------------------------------------------------------------------
   Ce formulaire N'A PAS de destination tant que l'adresse e-mail publique
   n'est pas fournie. Le bouton d'envoi reste desactive et .form__note
   l'annonce en clair. Le formulaire ne doit rien pretendre envoyer.
   ========================================================================== */

.form {
  display: grid;
  gap: var(--e-4);
  max-width: 40rem;
  padding: var(--e-5);
  background: var(--sur-carte);
  border: 1px solid var(--sur-ligne);
  border-radius: var(--r-3);
  box-shadow: var(--sur-ombre-1);
}

.form__row {
  display: grid;
  gap: var(--e-2);
}
/* Une colonne sur mobile, toujours. Deux colonnes possibles a partir de
   768px via .form__row--2 (voir bloc responsive). */

.form__label {
  font-size: var(--fs-300);
  font-weight: 700;
  color: var(--sur-texte);
}
/* Marque d'obligation : caractere ET couleur, jamais la couleur seule.
   S'active en posant l'attribut data-requis sur le <label>. Le champ doit
   par ailleurs porter required + aria-required="true". */
.form__label[data-requis]::after {
  content: " *";
  color: var(--sur-accent);
  font-weight: 700;
}

.form__input,
.form__textarea {
  width: 100%;
  min-height: 48px;
  padding: var(--e-3) var(--e-4);
  font-size: var(--fs-400);     /* 16px : empeche le zoom auto sur iOS */
  line-height: 1.5;
  color: var(--sur-texte);
  background: var(--sur-champ);
  border: 1px solid var(--sur-ligne-2);
  border-radius: var(--r-2);
  transition: border-color var(--t-rapide), background var(--t-rapide),
              box-shadow var(--t-rapide);
}
.form__textarea {
  min-height: 8.5rem;
  resize: vertical;
}
.form__input::placeholder,
.form__textarea::placeholder { color: var(--sur-texte-2); opacity: 1; }

.form__input:hover,
.form__textarea:hover { border-color: var(--sur-accent); }

/* L'etat de focus du champ combine le contour global et un liseré interne */
.form__input:focus-visible,
.form__textarea:focus-visible {
  border-color: var(--sur-accent);
  background: var(--sur-fond-2);
}

.form__input:disabled,
.form__textarea:disabled {
  color: var(--sur-texte-2);
  background: var(--sur-inerte);
  border-color: var(--sur-ligne);
  cursor: not-allowed;
}

/* Note du formulaire — porte l'avis d'inactivite. Discrete en taille, pas
   en contraste : --sur-texte-2 fait >= 4,6:1 sur toutes les surfaces. */
.form__note {
  font-size: var(--fs-200);
  line-height: var(--lh-dense);
  color: var(--sur-texte-2);
}
.form__note > * + * { margin-top: var(--e-2); }
.form__note a { color: var(--sur-accent); text-underline-offset: 3px; }

/* Le bouton d'envoi occupe toute la largeur du formulaire */
.form .btn { width: 100%; }


/* ==========================================================================
   17. PIED DE PAGE
   ========================================================================== */

.site-footer {
  padding-block: var(--e-8) var(--e-5);
  font-size: var(--fs-300);
  color: var(--gris-clair);
  background: var(--anthracite);
  background-image: linear-gradient(180deg, #1A1F27 0%, #14171C 100%);
  border-top: 1px solid var(--ligne-sombre);
}
/* Le footer est toujours sombre : on rebascule les tokens de surface pour
   que .link-underline, .marker et .btn s'y comportent correctement. */
.site-footer {
  --sur-texte: var(--blanc-tech);
  --sur-texte-2: var(--gris-clair);
  --sur-accent: var(--ambre);
  --sur-accent-2: var(--ambre-clair);
  --sur-ligne: var(--ligne-sombre);
  --sur-ligne-2: var(--ligne-acier);
  --sur-focus: var(--ambre);
  --sur-voile: rgba(244, 246, 247, .06);
  --sur-voile-fort: rgba(244, 246, 247, .11);
}

.site-footer > .container {
  display: grid;
  gap: var(--e-6);
  grid-template-columns: 1fr;
}

.footer__col { display: grid; gap: var(--e-3); align-content: start; }

.footer__col h2,
.footer__col h3,
.footer__col .footer__title {
  font-size: var(--fs-200);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ambre);
}

.footer__col ul { display: grid; gap: var(--e-1); }

.footer__col a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  color: var(--gris-clair);
  text-decoration: none;
  transition: color var(--t-rapide);
}
.footer__col a:hover { color: var(--blanc-tech); text-decoration: underline;
                       text-underline-offset: 3px; }

.footer__col img { max-width: 220px; }

/* Barre legale, en bas.
   grid-column: 1 / -1 lui permet de vivre DANS la grille du footer et d'y
   occuper toute la largeur. Elle fonctionne aussi placee dans un second
   .container, en dehors de la grille. Les deux montages sont valides. */
.footer__legal {
  grid-column: 1 / -1;
  margin-top: var(--e-6);
  padding-top: var(--e-4);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-2) var(--e-4);
  font-size: var(--fs-100);
  line-height: var(--lh-dense);
  color: var(--gris-clair);
  border-top: 1px solid var(--ligne-sombre);
}
.footer__legal a {
  color: var(--gris-clair);
  text-decoration: none;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
}
.footer__legal a:hover { color: var(--blanc-tech); text-decoration: underline;
                         text-underline-offset: 3px; }
.footer__legal p { margin: 0; }


/* ==========================================================================
   RESPONSIVE — 375 / 768 / 1280
   ========================================================================== */

/* --- >= 375px : respiration minimale ---------------------------------- */
@media (min-width: 375px) {
  :root { --gouttiere: 1.5rem; }
  .hero__actions > * { flex: 0 1 auto; }
}

/* --- >= 768px : tablette / navigation horizontale ---------------------- */
@media (min-width: 768px) {

  :root {
    --gouttiere: 2rem;
    --header-h: 4.5rem;
    --fs-400: var(--fs-500);
  }

  .section { padding-block: var(--e-9); }
  .section__head { margin-bottom: var(--e-8); }


  /* Grilles */
  .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid { gap: var(--e-5); }

  .steps { gap: var(--e-6); }

  .form { padding: var(--e-6); }
  .form__row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-4); }
  .form__row--2 > .form__row { gap: var(--e-2); }
  .form .btn { width: auto; justify-self: start; min-width: 16rem; }

  .hero__actions { gap: var(--e-4); }

  .site-footer > .container {
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: var(--e-7);
  }
  .footer__legal { margin-top: var(--e-7); }
}

/* --- >= 1280px : desktop large ---------------------------------------- */
@media (min-width: 1280px) {

  :root { --gouttiere: 2.5rem; }

  .section { padding-block: 6rem; }

  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .hero { min-height: min(76svh, 700px); }
  .hero__title { max-width: 18ch; }

  .site-footer > .container {
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
  }

  /* Le titre de section et son chapo peuvent cohabiter en deux colonnes */
  .section__head--large {
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--e-8);
    align-items: end;
  }
  .section__head--large .section__eyebrow,
  .section__head--large .section__title { grid-column: 1; }
  .section__head--large .section__intro { grid-column: 2; grid-row: 1 / span 2; }
}


/* ==========================================================================
   18. MOUVEMENT REDUIT
   --------------------------------------------------------------------------
   Neutralise animations, parallax et compteurs. Le JS lit la meme requete
   media et n'attache ni l'observateur de parallax ni les compteurs.
   Rien ne disparait : tout arrive directement a l'etat final.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }

  /* Le fade-up est purement et simplement supprime : tout est visible
     immediatement, meme si l'observateur n'a pas encore declenche. */
  html.js .reveal,
  html.js .reveal:not(.reveal--in) {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  /* Parallax neutralise : la valeur posee par le JS est ecrasee. */
  .hero__media { transform: none !important; will-change: auto; }

  .btn:hover,
  .card--link:hover { transform: none !important; }

  .card--link:hover .card__media img { transform: none !important; }
}


/* ==========================================================================
   19. IMPRESSION
   ========================================================================== */

@media print {
  body {
    background: #FFFFFF !important;
    color: #000000;
    font-size: 11pt;
  }
  .site-header, .nav, .skip-link, .hero__media, .hero__overlay { display: none !important; }
  .section, .hero { background: none !important; color: #000; padding-block: 1rem; }
  .card, .form, .notice, .accordion__item { border: 1px solid #999; box-shadow: none; }
  .accordion__panel { display: block !important; }
  .accordion__panel[hidden] { display: block !important; }
  /* Le marqueur doit rester visible sur une relecture papier. */
  .marker, .marker--block {
    background: #E8730C !important;
    color: #000 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}

/* ===========================================================================
   CORRECTIFS D'INTEGRATION
   Ajoutes lors de l'assemblage des pages, apres mesure dans le navigateur.
   =========================================================================== */

/* --- 1. Debordement de l'en-tete sur telephone -----------------------------
   Mesure a 360 px de large : logo 181 + bouton d'appel 145 + hamburger 44
   + gouttieres = 426 px demandes pour 360 disponibles. Le hamburger se
   retrouvait entierement hors champ (382 -> 426) : la navigation devenait
   INATTEIGNABLE sur telephone, sans aucun signe visible du probleme.

   Correctif : sous 30rem le logo se contracte et le bouton d'appel passe en
   icone seule. Son libelle textuel est retire de l'affichage mais le lien
   porte un aria-label explicite, donc les lecteurs d'ecran continuent
   d'annoncer le numero complet. */
@media (max-width: 30rem) {
  .site-header__logo { flex: 0 1 auto; min-width: 0; }
  .site-header__logo img { width: auto; max-width: 100%; height: 1.75rem; }

  .nav { min-width: 0; }

  .site-header .btn--call { padding-inline: 0; width: 2.75rem; }
  .site-header .btn--call .btn__label { display: none; }
}

/* Le libelle reste affiche partout ailleurs, y compris dans le pied de page. */
.btn__label { display: inline; }

/* --- 2. Cesure des entrees de navigation -----------------------------------
   Entre 768 et 1279 px, « À propos » se coupait en deux lignes au milieu de
   la barre. Un libelle de navigation ne se cesure pas. */
.nav__link { white-space: nowrap; }


/* --- 3. Bascule de la navigation portee de 768 a 1024 px -------------------
   Mesure a 768 px : l'en-tete reclamait 976 px pour 753 disponibles, et le
   dernier lien (« Contact ») sortait du champ a 785 px. Six entrees plus un
   bouton d'appel ne tiennent pas sur une seule ligne a cette largeur.
   Le menu escamotable est donc conserve jusqu'a 1024 px ; au-dela, la barre
   horizontale reprend. Les regles ci-dessous sont celles qui vivaient dans le
   palier 768 px : elles ont ete deplacees telles quelles, sans modification. */
@media (min-width: 64rem) {
  /* Navigation horizontale : le hamburger disparait, la liste redevient
     un simple flux en ligne. .nav--open n'a plus d'effet. */
  .nav { gap: var(--e-5); }
  .nav__toggle,
  html.js .nav__toggle { display: none; }
  /* Le selecteur html.js est repris ici : sans lui, la regle mobile
     html.js .nav__list (specificite superieure) continuerait de gagner. */
  .nav__list,
  html.js .nav__list {
    position: static;
    flex-wrap: nowrap;
    flex-direction: row;
    align-items: center;
    gap: var(--e-1);
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
    transform: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .nav__link {
    min-height: 40px;
    padding: var(--e-2) var(--e-3);
    border-left: 0;
    border-bottom: 2px solid transparent;
    border-radius: var(--r-2) var(--r-2) 0 0;
  }
  .nav__link:hover,
  .nav__link--active { border-left: 0; border-bottom-color: var(--ambre); }
}