@charset "UTF-8";
/* ==================================================================
   LAMKATAA TRANS — Feuille de style unique
   Direction artistique : minimalisme suisse / industriel — SOBRE
   Bleu marine dominant · blanc respirant · jaune strictement en accent
   Hairlines 1px · rayons 3–4px · aucune ombre portée floue
   Mobile first — points de rupture 640 / 860 / 1024 / 1280 px
   ------------------------------------------------------------------
   SOMMAIRE
   01 — JETONS (:root)                          [§6.1]
   02 — RESET & BASE
   03 — UTILITAIRES                             [§6.2]
   04 — BANDEAU SUPÉRIEUR & EN-TÊTE             [§6.3]
   05 — BOUTONS                                 [§6.5]
   06 — EYEBROW & EN-TÊTE DE SECTION            [§6.6]
   07 — HERO D’ACCUEIL                          [§6.7]
   08 — HERO DE PAGE & FIL D’ARIANE             [§6.8]
   09 — GRILLES & CARTES                        [§6.9]
   10 — CHIFFRES CLÉS                           [§6.10]
   11 — LOGOS PARTENAIRES                       [§6.11]
   12 — FICHE PARTENAIRE                        [§6.12]
   13 — DÉTAIL DE SERVICE                       [§6.13]
   14 — ÉTAPES / PROCESS                        [§6.14]
   15 — COUVERTURE GÉOGRAPHIQUE                 [§6.15]
   16 — BANDE D’APPEL À L’ACTION                [§6.16]
   17 — FAQ                                     [§6.17]
   18 — FORMULAIRE                              [§6.18]
   19 — CONTACT / INFO-CARD / CARTE             [§6.19]
   20 — CONTENU LONG (.prose)                   [§6.20]
   21 — DIVERS                                  [§6.21]
   22 — PIED DE PAGE                            [§6.4]
   23 — ACCESSIBILITÉ, MOTION RÉDUITE, IMPRESSION
   ================================================================== */


/* ==================================================================
   01 — JETONS (:root)                                        [§6.1]
   ================================================================== */
:root{
  --navy-900:#061C3F;
  --navy-800:#0B2A5B;
  --navy-700:#123C7F;
  --navy-600:#1B4FA3;
  --navy-100:#E7EDF7;

  --yellow-500:#FFC72C;
  --yellow-400:#FFD75E;
  --yellow-600:#E8A900;

  --ink:#0E1520;
  --muted:#5A667A;
  --line:#DDE3ED;
  --surface:#F4F6F9;
  --white:#FFFFFF;

  --ok:#1B7F4B;
  --err:#C02626;

  --font-sans:'Archivo','Segoe UI',system-ui,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,'Courier New',monospace;

  --r:3px;
  --r-lg:4px;

  --container:1200px;
  --gutter:clamp(16px,4vw,32px);
  --ease:cubic-bezier(.2,.7,.3,1);
  --header-h:76px;

  /* Dérivés internes (aucune classe nouvelle, simples commodités) */
  --line-dark:rgba(255,255,255,.16);
  --on-navy:rgba(255,255,255,.76);
  --on-navy-soft:rgba(255,255,255,.60);
  --field-border:#7C8AA3;
  --t:.2s var(--ease);
}


/* ==================================================================
   02 — RESET & BASE
   ================================================================== */
*,
*::before,
*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + 16px);
}

body{
  margin:0;
  font-family:var(--font-sans);
  font-size:clamp(15px,.35vw + 14.2px,17px);
  font-weight:400;
  line-height:1.65;
  color:var(--ink);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

[hidden]{display:none !important}

h1,h2,h3,h4,h5,h6{
  margin:0 0 .5em;
  font-family:var(--font-sans);
  font-weight:600;
  line-height:1.15;
  letter-spacing:-.01em;
  color:var(--navy-900);
}
h1{font-weight:700;line-height:1.05;letter-spacing:-.02em}
h2{font-weight:700;line-height:1.12;letter-spacing:-.02em}

p{margin:0 0 1em}
p:last-child{margin-bottom:0}

a{color:var(--navy-800)}
a[href^="mailto:"],
a[href^="tel:"]{overflow-wrap:anywhere}

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

ul,ol{margin:0 0 1em;padding-left:1.15em}

strong,b{font-weight:600}

hr{border:0;border-top:1px solid var(--line);margin:0}

address{font-style:normal}

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

table{border-collapse:collapse}

::selection{background:var(--yellow-500);color:var(--navy-900)}

/* Focus visible — navy 2px sur fond clair, blanc sur fond navy */
:focus-visible{
  outline:2px solid var(--navy-800);
  outline-offset:2px;
  border-radius:2px;
}
.topbar :focus-visible,
.hero :focus-visible,
.page-hero :focus-visible,
.section--navy :focus-visible,
.cta-band :focus-visible,
.card--dark :focus-visible,
.info-card--dark :focus-visible,
.stats--navy :focus-visible,
.site-footer :focus-visible,
.site-nav :focus-visible{outline-color:var(--white)}

/* Le bouton jaune reçoit un contour navy pour rester perceptible */
.btn--accent:focus-visible{outline-color:var(--navy-900)}

@media (min-width:1024px){
  /* Navigation horizontale sur fond blanc : le contour redevient navy */
  .site-nav :focus-visible{outline-color:var(--navy-800)}
}


/* ==================================================================
   03 — UTILITAIRES                                           [§6.2]
   ================================================================== */
.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.section{padding-block:clamp(48px,7vw,96px)}
.section--tight{padding-block:clamp(26px,3.6vw,44px)}
.section--flush-top{padding-top:0}

.section--surface{background:var(--surface)}

.section--navy{background:var(--navy-800);color:var(--on-navy)}
.section--navy h2,
.section--navy h3,
.section--navy h4{color:var(--white)}
.section--navy a{color:var(--white)}

/* Filet horizontal façon marquage routier */
.rule{
  display:block;
  width:100%;
  height:3px;
  border:0;
  margin:0;
  background:repeating-linear-gradient(90deg,var(--yellow-500) 0 14px,transparent 14px 28px);
}
.section--navy .rule,
.cta-band .rule,
.site-footer .rule{opacity:.9}

.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{
  position:absolute;
  top:-72px;
  left:16px;
  z-index:300;
  padding:10px 16px;
  background:var(--yellow-500);
  color:var(--navy-900);
  font-size:14px;
  font-weight:600;
  text-decoration:none;
  border-radius:var(--r);
  transition:top .18s var(--ease);
}
.skip-link:focus{top:12px}

/* Révélations au scroll (JS ajoute .is-visible) */
.reveal{
  opacity:0;
  transform:translateY(16px);
  transition:opacity .5s var(--ease),transform .5s var(--ease);
  will-change:opacity,transform;
}
.reveal.is-visible{opacity:1;transform:none;will-change:auto}

.stack-sm>*+*{margin-top:12px}
.stack-md>*+*{margin-top:24px}

.text-center{text-align:center}
.text-center .eyebrow{justify-content:center}
.text-center .check-list__item{text-align:left}


/* ==================================================================
   04 — BANDEAU SUPÉRIEUR & EN-TÊTE                           [§6.3]
   ================================================================== */

/* --- 04.a Bandeau supérieur (masqué sous 860px) --- */
.topbar{display:none;background:var(--navy-900);color:var(--on-navy-soft)}
@media (min-width:860px){.topbar{display:block}}

.topbar__inner{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:8px 24px;
  min-height:38px;
}
.topbar__item{
  margin:0;
  font-size:12.5px;
  line-height:1.5;
  color:rgba(255,255,255,.66);
  min-width:0;
}
.topbar__label{
  display:inline-block;
  margin-right:8px;
  font-family:var(--font-mono);
  font-size:10.5px;
  font-weight:500;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--yellow-500);
}
.topbar__link{
  color:rgba(255,255,255,.78);
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color var(--t),border-color var(--t);
}
.topbar__link:hover{color:var(--white);border-bottom-color:var(--yellow-500)}

/* --- 04.b En-tête collé --- */
.site-header{
  position:sticky;
  top:0;
  z-index:100;
  background:var(--white);
  border-bottom:1px solid var(--line);
  transition:background-color var(--t),border-color var(--t);
}
.site-header.is-scrolled{
  background:rgba(255,255,255,.96);
  border-bottom-color:#C6D0E2;
}
/* Le flou n’est appliqué qu’à partir de 1024px : en dessous, toute valeur de
   backdrop-filter autre que none ferait de l’en-tête le bloc conteneur de
   .site-nav (position:fixed), ce qui casserait le panneau de navigation. */
@media (min-width:1024px){
  .site-header.is-scrolled{
    -webkit-backdrop-filter:saturate(140%) blur(8px);
    backdrop-filter:saturate(140%) blur(8px);
  }
}
.site-header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  min-height:var(--header-h);
}
.site-header__actions{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  gap:10px;
}
/* Le bouton « Demande de devis » de l’en-tête n’apparaît qu’à partir de 640px */
.site-header__actions>.btn{display:none}
@media (min-width:640px){.site-header__actions>.btn{display:inline-flex}}

.brand{display:inline-flex;align-items:center;text-decoration:none;flex:none}
.brand__img{
  display:block;
  width:auto;
  height:38px;
  max-width:170px;
}
@media (min-width:640px){
  .brand__img{height:44px;max-width:208px}
}

/* --- 04.c Navigation : panneau latéral sous 1024px --- */
.site-nav{
  position:fixed;
  inset:0 0 0 auto;
  z-index:1;
  display:flex;
  flex-direction:column;
  gap:24px;
  width:min(360px,86vw);
  padding:calc(var(--header-h) + 28px) var(--gutter) 32px;
  background:var(--navy-800);
  color:var(--white);
  overflow-y:auto;
  overscroll-behavior:contain;
  transform:translateX(100%);
  visibility:hidden;
  transition:transform .24s var(--ease),visibility .24s var(--ease);
}
body.nav-open .site-nav{transform:translateX(0);visibility:visible}

.site-nav__list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
}
.site-nav__item{border-bottom:1px solid rgba(255,255,255,.14)}
.site-nav__link{
  position:relative;
  display:block;
  padding:14px 0;
  font-size:17px;
  font-weight:600;
  color:rgba(255,255,255,.88);
  text-decoration:none;
  transition:color var(--t);
}
.site-nav__link::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height:2px;
  background:var(--yellow-500);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform var(--t);
}
.site-nav__link:hover,
.site-nav__link:focus-visible{color:var(--white)}
.site-nav__link:hover::after,
.site-nav__link:focus-visible::after,
.site-nav__link.is-active::after{transform:scaleX(1)}
.site-nav__link.is-active{color:var(--yellow-500)}

.site-nav__mobile-cta{
  display:grid;
  gap:10px;
  margin-top:auto;
  padding-top:16px;
  border-top:1px solid rgba(255,255,255,.14);
}

/* Bouton hamburger */
.nav-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:46px;
  height:46px;
  padding:0;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r);
  color:var(--navy-800);
  transition:border-color var(--t),background-color var(--t);
}
.nav-toggle:hover{border-color:var(--navy-800)}
.nav-toggle__bars{position:relative;display:block;width:20px;height:14px}
.nav-toggle__bars i{
  position:absolute;
  left:0;
  right:0;
  top:6px;
  height:2px;
  background:currentColor;
  transition:transform .2s var(--ease),opacity .2s var(--ease),top .2s var(--ease);
}
.nav-toggle__bars i:nth-child(1){top:0}
.nav-toggle__bars i:nth-child(2){top:6px}
.nav-toggle__bars i:nth-child(3){top:12px}
body.nav-open .nav-toggle__bars i:nth-child(1){top:6px;transform:rotate(45deg)}
body.nav-open .nav-toggle__bars i:nth-child(2){opacity:0}
body.nav-open .nav-toggle__bars i:nth-child(3){top:6px;transform:rotate(-45deg)}

/* Voile — placé sous l’en-tête (z-index 90) pour laisser le bouton cliquable */
.nav-backdrop{
  position:fixed;
  inset:0;
  z-index:90;
  background:rgba(6,28,63,.55);
  animation:lt-fade .2s var(--ease) both;
}
@keyframes lt-fade{from{opacity:0}to{opacity:1}}

body.nav-open{overflow:hidden}

/* Téléphone d’exploitation (≥1280px) */
.header-phone{
  display:none;
  flex-direction:column;
  gap:1px;
  padding-right:14px;
  margin-right:4px;
  border-right:1px solid var(--line);
  text-decoration:none;
}
.header-phone__label{
  font-family:var(--font-mono);
  font-size:10px;
  font-weight:500;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
}
.header-phone__number{
  font-size:15px;
  font-weight:600;
  color:var(--navy-800);
  border-bottom:1px solid transparent;
  transition:color var(--t),border-color var(--t);
}
.header-phone:hover .header-phone__number{color:var(--navy-600);border-bottom-color:var(--yellow-500)}
@media (min-width:1280px){.header-phone{display:inline-flex}}

/* --- 04.d Navigation horizontale (≥1024px) --- */
@media (min-width:1024px){
  .site-nav{
    position:static;
    z-index:auto;
    flex-direction:row;
    align-items:center;
    gap:0;
    width:auto;
    padding:0;
    background:none;
    color:inherit;
    overflow:visible;
    transform:none;
    visibility:visible;
    transition:none;
  }
  .site-nav__list{flex-direction:row;align-items:center;gap:clamp(14px,2vw,30px)}
  .site-nav__item{border-bottom:0}
  .site-nav__link{
    padding:8px 0;
    font-size:15px;
    font-weight:500;
    color:var(--ink);
  }
  .site-nav__link::after{bottom:0}
  .site-nav__link:hover,
  .site-nav__link:focus-visible{color:var(--navy-800)}
  .site-nav__link.is-active{color:var(--navy-800);font-weight:600}
  .site-nav__mobile-cta{display:none}
  .nav-toggle{display:none}
  .nav-backdrop{display:none}
  body.nav-open{overflow:visible}
}


/* ==================================================================
   05 — BOUTONS                                               [§6.5]
   ================================================================== */
.btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:46px;
  padding:12px 20px;
  font-family:var(--font-sans);
  font-size:15px;
  font-weight:600;
  line-height:1.2;
  text-align:center;
  text-decoration:none;
  border:1px solid transparent;
  border-radius:var(--r);
  background:transparent;
  color:var(--ink);
  transition:background-color var(--t),border-color var(--t),color var(--t),transform var(--t);
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}

.btn--accent{background:var(--yellow-500);border-color:var(--yellow-500);color:var(--navy-900)}
.btn--accent:hover{background:var(--yellow-400);border-color:var(--yellow-400)}

.btn--primary{background:var(--navy-800);border-color:var(--navy-800);color:var(--white)}
.btn--primary:hover{background:var(--navy-700);border-color:var(--navy-700)}

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

.btn--ghost{background:transparent;border-color:rgba(255,255,255,.45);color:var(--white)}
.btn--ghost:hover{background:rgba(255,255,255,.10);border-color:var(--white)}

.btn--link{
  min-height:0;
  padding:0;
  border:0;
  border-bottom:1px solid transparent;
  border-radius:0;
  color:var(--navy-800);
}
.btn--link:hover{transform:none;color:var(--navy-600);border-bottom-color:var(--yellow-500)}

.btn--sm{min-height:38px;padding:8px 14px;font-size:13.5px}
.btn--lg{min-height:56px;padding:16px 28px;font-size:16px}
.btn--block{display:flex;width:100%}

.btn__arrow{display:inline-block;transition:transform var(--t)}
.btn:hover .btn__arrow{transform:translateX(4px)}

.btn.is-loading{
  pointer-events:none;
  color:rgba(14,21,32,.45);
  border-color:currentColor;
}
.btn--accent.is-loading{background:var(--yellow-400);color:rgba(6,28,63,.45);border-color:var(--yellow-400)}
.btn--primary.is-loading{background:var(--navy-700);color:rgba(255,255,255,.45);border-color:var(--navy-700)}
.btn.is-loading .btn__arrow{display:none}
.btn.is-loading::after{
  content:"";
  width:16px;
  height:16px;
  border:2px solid currentColor;
  border-top-color:transparent;
  border-radius:50%;
  animation:lt-spin .7s linear infinite;
}
@keyframes lt-spin{to{transform:rotate(360deg)}}


/* ==================================================================
   06 — EYEBROW & EN-TÊTE DE SECTION                          [§6.6]
   ================================================================== */
.eyebrow{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 16px;
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:500;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--navy-700);
}
.eyebrow__dot{
  flex:none;
  width:8px;
  height:8px;
  background:var(--yellow-500);
}
.eyebrow--light{color:rgba(255,255,255,.72)}

.section-head{margin:0 0 clamp(28px,4vw,48px);max-width:72ch}
.section-head__title{
  margin:0;
  font-size:clamp(26px,3.4vw,40px);
  font-weight:700;
  line-height:1.12;
  letter-spacing:-.02em;
  color:var(--navy-900);
}
.section-head__text{
  margin:14px 0 0;
  max-width:64ch;
  color:var(--muted);
  font-size:clamp(15px,1.1vw,17px);
}

.section-head--center{margin-inline:auto;text-align:center}
.section-head--center .eyebrow{justify-content:center}
.section-head--center .section-head__text{margin-inline:auto}

.section-head--light .section-head__title{color:var(--white)}
.section-head--light .section-head__text{color:rgba(255,255,255,.72)}

.section-head--split{max-width:none}
@media (min-width:860px){
  .section-head--split{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    column-gap:clamp(24px,4vw,64px);
    row-gap:0;
    align-items:end;
  }
  .section-head--split .eyebrow{grid-column:1;grid-row:1}
  .section-head--split .section-head__title{grid-column:1;grid-row:2}
  .section-head--split .section-head__text{grid-column:2;grid-row:2;margin:0}
}


/* ==================================================================
   07 — HERO D’ACCUEIL                                        [§6.7]
   ================================================================== */
.hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:var(--navy-800);
  color:var(--white);
}
/* Trame : hero-pattern.svg + voile de lisibilité + diagonales jaunes + grille fine */
.hero__bg{
  position:absolute;
  inset:0;
  z-index:-1;
  background-color:var(--navy-800);
  background-repeat:no-repeat;
  background-position:center;
  background-size:cover;
  background-image:
    url("../img/hero-pattern.svg"),
    radial-gradient(115% 105% at 6% 42%,rgba(6,28,63,.92) 0%,rgba(6,28,63,.46) 42%,rgba(6,28,63,0) 74%),
    repeating-linear-gradient(135deg,rgba(255,199,44,.06) 0 2px,rgba(255,199,44,0) 2px 24px),
    repeating-linear-gradient(90deg,rgba(255,255,255,.04) 0 1px,rgba(255,255,255,0) 1px 72px),
    repeating-linear-gradient(0deg,rgba(255,255,255,.04) 0 1px,rgba(255,255,255,0) 1px 72px),
    radial-gradient(120% 90% at 82% 6%,rgba(27,79,163,.42) 0%,rgba(27,79,163,0) 62%),
    linear-gradient(180deg,var(--navy-800) 0%,var(--navy-900) 100%);
}
.hero__inner{
  position:relative;
  display:grid;
  gap:clamp(32px,5vw,56px);
  padding-block:clamp(48px,8vw,104px);
}
.hero__content{min-width:0}

.hero__title{
  margin:0;
  font-size:clamp(32px,5.2vw,60px);
  font-weight:700;
  line-height:1.05;
  letter-spacing:-.02em;
  color:var(--white);
}
.hero__title-accent{color:var(--yellow-500)}

.hero__text{
  margin:20px 0 0;
  max-width:58ch;
  font-size:clamp(16px,1.2vw,18.5px);
  color:rgba(255,255,255,.78);
}
.hero__actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:28px;
}
.hero__meta{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
  list-style:none;
  margin:36px 0 0;
  padding:24px 0 0;
  border-top:1px solid rgba(255,255,255,.18);
}
.hero__meta-item{display:flex;flex-direction:column;gap:4px;min-width:0}
.hero__meta-value{
  font-family:var(--font-mono);
  font-size:clamp(22px,3vw,30px);
  font-weight:600;
  line-height:1.1;
  letter-spacing:-.01em;
  color:var(--yellow-500);
}
.hero__meta-label{
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(255,255,255,.60);
}

/* Panneau blanc « Un tarif sous 24 h » */
.hero__panel{
  min-width:0;
  padding:clamp(22px,3vw,32px);
  background:var(--white);
  color:var(--ink);
  border:1px solid var(--line);
  border-top:3px solid var(--yellow-500);
  border-radius:var(--r-lg);
}
.hero__panel-index{
  margin:0;
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:500;
  letter-spacing:.12em;
  color:var(--navy-700);
}
.hero__panel-index::after{
  content:"";
  display:block;
  width:24px;
  height:2px;
  margin-top:8px;
  background:var(--yellow-500);
}
.hero__panel-title{
  margin:14px 0 0;
  font-size:clamp(20px,2vw,26px);
  font-weight:600;
  color:var(--navy-900);
}
.hero__panel-text{margin:10px 0 0;font-size:15.5px;color:var(--muted)}
.hero__panel-list{
  display:grid;
  gap:10px;
  list-style:none;
  margin:18px 0;
  padding:18px 0 0;
  border-top:1px solid var(--line);
}
.hero__panel-list li{position:relative;padding-left:22px;font-size:15px;color:var(--ink)}
.hero__panel-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:.55em;
  width:9px;
  height:9px;
  background:var(--yellow-500);
}
.hero__panel-note{
  margin:14px 0 0;
  font-size:13.5px;
  color:var(--muted);
  text-align:center;
}
.hero__panel-note a{
  font-weight:600;
  color:var(--navy-800);
  text-decoration:none;
  border-bottom:1px solid var(--yellow-500);
}
.hero__panel-note a:hover{color:var(--navy-600)}

@media (min-width:1024px){
  .hero__inner{
    grid-template-columns:1.25fr .9fr;
    align-items:center;
    gap:clamp(40px,5vw,72px);
  }
}


/* ==================================================================
   08 — HERO DE PAGE & FIL D’ARIANE                           [§6.8]
   ================================================================== */
.page-hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:var(--navy-800);
  color:var(--white);
}
.page-hero__bg{
  position:absolute;
  inset:0;
  z-index:-1;
  background-color:var(--navy-800);
  background-image:
    radial-gradient(110% 120% at 4% 50%,rgba(6,28,63,.88) 0%,rgba(6,28,63,.40) 46%,rgba(6,28,63,0) 78%),
    repeating-linear-gradient(135deg,rgba(255,199,44,.05) 0 2px,rgba(255,199,44,0) 2px 28px),
    repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,rgba(255,255,255,0) 1px 88px),
    repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,rgba(255,255,255,0) 1px 88px),
    linear-gradient(180deg,var(--navy-800) 0%,var(--navy-900) 100%);
}
.page-hero__inner{position:relative;padding-block:clamp(34px,5vw,64px)}
.page-hero__title{
  margin:0;
  font-size:clamp(28px,4.2vw,46px);
  font-weight:700;
  line-height:1.08;
  letter-spacing:-.02em;
  color:var(--white);
}
.page-hero__text{
  margin:16px 0 0;
  max-width:64ch;
  font-size:clamp(15.5px,1.1vw,17.5px);
  color:rgba(255,255,255,.76);
}

.breadcrumb{margin:0 0 20px}
.breadcrumb__list{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  list-style:none;
  margin:0;
  padding:0;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.breadcrumb__item{
  display:flex;
  align-items:center;
  gap:8px;
  color:rgba(255,255,255,.62);
}
.breadcrumb__item+.breadcrumb__item::before{content:"/";color:var(--yellow-500)}
.breadcrumb__item a{
  color:rgba(255,255,255,.78);
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color var(--t),border-color var(--t);
}
.breadcrumb__item a:hover{color:var(--white);border-bottom-color:var(--yellow-500)}
.breadcrumb__item[aria-current="page"]{color:var(--white)}


/* ==================================================================
   09 — GRILLES & CARTES                                      [§6.9]
   ================================================================== */
.grid{
  display:grid;
  gap:clamp(16px,2vw,24px);
  list-style:none;
  margin:0;
  padding:0;
}
.grid>*{min-width:0}
.grid>li{display:flex;flex-direction:column}
.grid>li>*{flex:1 1 auto}

@media (min-width:640px){
  .grid--2,
  .grid--3,
  .grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:1024px){
  .grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
}

.card{
  position:relative;
  display:flex;
  flex-direction:column;
  height:100%;
  padding:clamp(20px,2.4vw,28px);
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  transition:border-color var(--t),transform var(--t),background-color var(--t);
}
.card::after{
  content:"";
  position:absolute;
  top:-1px;
  left:-1px;
  right:-1px;
  height:3px;
  background:var(--yellow-500);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform var(--t);
}
.card:hover{transform:translateY(-2px);border-color:#C6D0E2}
.card:hover::after,
.card:focus-within::after{transform:scaleX(1)}

.card__index{
  margin:0 0 14px;
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:500;
  letter-spacing:.12em;
  color:var(--navy-700);
}
.card__index::after{
  content:"";
  display:block;
  width:22px;
  height:2px;
  margin-top:8px;
  background:var(--yellow-500);
}
.card__icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  margin-bottom:16px;
  color:var(--navy-700);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r);
}
.card__title{
  margin:0 0 8px;
  font-size:19px;
  font-weight:600;
  line-height:1.25;
  color:var(--navy-900);
}
.card__text{margin:0;font-size:15.5px;color:var(--muted)}
.card__link{
  display:inline-flex;
  align-items:center;
  align-self:flex-start;
  gap:8px;
  margin-top:auto;
  padding-top:16px;
  font-size:14.5px;
  font-weight:600;
  color:var(--navy-800);
  text-decoration:none;
  transition:color var(--t);
}
.card__link span{display:inline-block;transition:transform var(--t)}
.card:hover .card__link,
.card__link:hover{color:var(--navy-600)}
.card:hover .card__link span,
.card__link:hover span{transform:translateX(4px)}

/* Variante sans bordure : simple filet haut */
.card--plain{
  padding:22px 0 0;
  background:transparent;
  border:0;
  border-top:1px solid var(--line);
  border-radius:0;
}
.card--plain::after{left:0;right:0;top:-1px}
.card--plain:hover{transform:none;background:transparent}

/* Variante sur fond navy */
.card--dark{
  background:rgba(255,255,255,.04);
  border-color:var(--line-dark);
  color:var(--on-navy);
}
.card--dark:hover{border-color:rgba(255,255,255,.34)}
.card--dark .card__index{color:rgba(255,255,255,.72)}
.card--dark .card__icon{
  color:var(--yellow-500);
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.18);
}
.card--dark .card__title{color:var(--white)}
.card--dark .card__text{color:rgba(255,255,255,.70)}
.card--dark .card__link{color:var(--yellow-500)}
.card--dark:hover .card__link{color:var(--yellow-400)}


/* ==================================================================
   10 — CHIFFRES CLÉS                                         [§6.10]
   ================================================================== */
.stats{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px;
  list-style:none;
  margin:0;
  padding:0;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  overflow:hidden;
}
.stat{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
  padding:clamp(18px,2.4vw,28px);
  background:var(--white);
}
.stat__value{
  font-family:var(--font-mono);
  font-size:clamp(28px,4vw,44px);
  font-weight:600;
  line-height:1;
  letter-spacing:-.02em;
  color:var(--navy-800);
}
.stat__label{
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
}

.stats--yellow{background:var(--yellow-600);border-color:var(--yellow-600)}
.stats--yellow .stat{background:var(--yellow-500)}
.stats--yellow .stat__value{color:var(--navy-900)}
.stats--yellow .stat__label{color:rgba(6,28,63,.72)}

.stats--navy{background:var(--line-dark);border-color:var(--line-dark)}
.stats--navy .stat{background:var(--navy-800)}
.stats--navy .stat__value{color:var(--yellow-500)}
.stats--navy .stat__label{color:rgba(255,255,255,.62)}

@media (min-width:860px){
  .stats{grid-template-columns:repeat(4,minmax(0,1fr))}
}


/* ==================================================================
   11 — LOGOS PARTENAIRES                                     [§6.11]
   ================================================================== */
.logo-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px;
  list-style:none;
  margin:0;
  padding:0;
  /* Fond blanc et filets portés par chaque cellule (outline) : quand la
     dernière rangée est incomplète — 7 logos sur 4 colonnes — l’emplacement
     libre reste blanc au lieu d’afficher un bloc gris. */
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  overflow:hidden;
}
.logo-grid__item{
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:0;
  padding:clamp(16px,2vw,26px);
  background:var(--white);
  outline:1px solid var(--line);
}
.logo-grid__img{
  width:auto;
  max-width:100%;
  max-height:44px;
  filter:grayscale(1);
  opacity:.62;
  transition:filter var(--t),opacity var(--t);
}
.logo-grid__item:hover .logo-grid__img,
.logo-grid__item:focus-within .logo-grid__img{filter:none;opacity:1}

.logo-grid--compact .logo-grid__item{padding:clamp(12px,1.6vw,18px)}
.logo-grid--compact .logo-grid__img{max-height:34px}

@media (min-width:640px){
  .logo-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .logo-grid--compact{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (min-width:1024px){
  .logo-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .logo-grid--compact{grid-template-columns:repeat(7,minmax(0,1fr))}
}


/* ==================================================================
   12 — FICHE PARTENAIRE                                      [§6.12]
   ================================================================== */
.partner{
  display:grid;
  gap:clamp(18px,3vw,32px);
  padding:clamp(24px,3.2vw,36px) 0;
  border-top:1px solid var(--line);
  scroll-margin-top:calc(var(--header-h) + 24px);
}
.partner__logo{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  min-height:92px;
  padding:16px;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
}
.partner__logo img{width:auto;max-width:100%;max-height:52px}
.partner__body{min-width:0}
.partner__index{
  margin:0 0 10px;
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:500;
  letter-spacing:.12em;
  color:var(--navy-700);
}
.partner__index::after{
  content:"";
  display:block;
  width:22px;
  height:2px;
  margin-top:8px;
  background:var(--yellow-500);
}
.partner__name{
  margin:0;
  font-size:clamp(20px,2.4vw,27px);
  font-weight:700;
  letter-spacing:-.01em;
  color:var(--navy-900);
}
.partner__role{
  margin:7px 0 0;
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--navy-700);
}
.partner__text{margin:14px 0 0;max-width:72ch;color:var(--muted)}
.partner__text+.tag-list{margin-top:16px}

@media (min-width:860px){
  .partner{grid-template-columns:200px minmax(0,1fr);align-items:start}
}


/* ==================================================================
   13 — DÉTAIL DE SERVICE                                     [§6.13]
   ================================================================== */
.service{
  display:grid;
  gap:clamp(18px,3vw,36px);
  padding:clamp(30px,4.4vw,56px) 0;
  border-top:1px solid var(--line);
  scroll-margin-top:calc(var(--header-h) + 24px);
}
.service__aside{display:flex;align-items:center;gap:14px}
.service__index{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:none;
  width:52px;
  height:52px;
  margin:0;
  font-family:var(--font-mono);
  font-size:15px;
  font-weight:600;
  letter-spacing:.08em;
  color:var(--yellow-500);
  background:var(--navy-800);
  border-radius:var(--r);
}
.service__icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:none;
  width:52px;
  height:52px;
  color:var(--navy-700);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r);
}
.service__body{min-width:0}
.service__title{
  margin:0;
  font-size:clamp(22px,2.8vw,32px);
  font-weight:700;
  line-height:1.12;
  letter-spacing:-.02em;
  color:var(--navy-900);
}
.service__lead{margin:12px 0 20px;max-width:74ch;font-size:16px;color:var(--muted)}

@media (min-width:640px){
  .service__body .check-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:860px){
  .service{grid-template-columns:auto minmax(0,1fr)}
  .service__aside{flex-direction:column;align-items:flex-start;width:88px}
}


/* ==================================================================
   14 — ÉTAPES / PROCESS                                      [§6.14]
   ================================================================== */
.steps{
  display:grid;
  gap:clamp(20px,3vw,28px);
  list-style:none;
  margin:0;
  padding:0;
  counter-reset:none;
}
.step{
  position:relative;
  min-width:0;
  padding-top:24px;
  border-top:1px solid var(--line);
}
/* Amorce jaune sur le filet haut */
.step::before{
  content:"";
  position:absolute;
  top:-1px;
  left:0;
  width:40px;
  height:3px;
  background:var(--yellow-500);
}
.step__num{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  margin-bottom:14px;
  font-family:var(--font-mono);
  font-size:14px;
  font-weight:600;
  letter-spacing:.08em;
  color:var(--yellow-500);
  background:var(--navy-800);
  border-radius:var(--r);
}
.step__title{
  margin:0 0 6px;
  font-size:17.5px;
  font-weight:600;
  color:var(--navy-900);
}
.step__text{margin:0;font-size:15.5px;color:var(--muted)}

.section--navy .step{border-top-color:var(--line-dark)}
.section--navy .step__num{color:var(--navy-900);background:var(--yellow-500)}
.section--navy .step__title{color:var(--white)}
.section--navy .step__text{color:rgba(255,255,255,.70)}

@media (min-width:640px){
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:1024px){
  .steps{grid-template-columns:repeat(4,minmax(0,1fr))}
  /* Trait de liaison entre les pastilles */
  .step::after{
    content:"";
    position:absolute;
    top:46px;
    left:56px;
    right:calc(-1 * clamp(20px,3vw,28px));
    height:1px;
    background:var(--line);
  }
  .step:last-child::after{display:none}
  .section--navy .step::after{background:var(--line-dark)}
}


/* ==================================================================
   15 — COUVERTURE GÉOGRAPHIQUE                               [§6.15]
   ================================================================== */
.coverage{
  display:grid;
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  overflow:hidden;
}
.coverage__col{
  min-width:0;
  padding:clamp(20px,3vw,32px);
  background:var(--white);
}
.coverage__title{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 16px;
  font-family:var(--font-mono);
  font-size:13px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--navy-900);
}
.coverage__title::before{
  content:"";
  flex:none;
  width:10px;
  height:10px;
  background:var(--yellow-500);
}
.section--navy .coverage{background:var(--line-dark);border-color:var(--line-dark)}
.section--navy .coverage__col{background:var(--navy-800)}
.section--navy .coverage__title{color:var(--white)}

@media (min-width:860px){
  .coverage{grid-template-columns:repeat(2,minmax(0,1fr))}
}


/* ==================================================================
   16 — BANDE D’APPEL À L’ACTION                              [§6.16]
   ================================================================== */
.cta-band{
  position:relative;
  isolation:isolate;
  background:var(--navy-900);
  color:var(--on-navy);
}
.cta-band::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:3px;
  background:repeating-linear-gradient(90deg,var(--yellow-500) 0 14px,transparent 14px 28px);
}
.cta-band__inner{
  display:grid;
  gap:28px;
  padding-block:clamp(40px,6vw,72px);
}
.cta-band__text{min-width:0}
.cta-band__title{
  margin:0;
  font-size:clamp(24px,3.2vw,38px);
  font-weight:700;
  line-height:1.1;
  letter-spacing:-.02em;
  color:var(--white);
}
.cta-band__sub{margin:12px 0 0;max-width:60ch;color:rgba(255,255,255,.74)}
.cta-band__actions{display:flex;flex-wrap:wrap;gap:12px}

@media (min-width:1024px){
  .cta-band__inner{
    grid-template-columns:minmax(0,1.4fr) auto;
    align-items:center;
    gap:clamp(32px,4vw,56px);
  }
}


/* ==================================================================
   17 — FAQ                                                   [§6.17]
   ================================================================== */
.faq{border-top:1px solid var(--line)}
.faq__item{border-bottom:1px solid var(--line)}
.faq__question{
  position:relative;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  padding:20px 0;
  font-size:clamp(16px,1.3vw,18px);
  font-weight:600;
  line-height:1.4;
  color:var(--navy-900);
  cursor:pointer;
  list-style:none;
  transition:color var(--t);
}
.faq__question::-webkit-details-marker{display:none}
.faq__question::marker{content:""}
.faq__question:hover{color:var(--navy-600)}

.faq__sign{position:relative;flex:none;width:18px;height:18px;margin-top:4px}
.faq__sign::before,
.faq__sign::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  background:var(--yellow-600);
  transform:translate(-50%,-50%);
}
.faq__sign::before{width:14px;height:2px}
.faq__sign::after{width:2px;height:14px;transition:transform var(--t)}
.faq__item[open] .faq__question{color:var(--navy-800)}
.faq__item[open] .faq__sign::after{transform:translate(-50%,-50%) scaleY(0)}

.faq__answer{padding:0 0 22px;max-width:78ch;color:var(--muted)}
.faq__answer p{margin:0 0 12px}
.faq__answer p:last-child{margin-bottom:0}

.section--navy .faq,
.section--navy .faq__item{border-color:var(--line-dark)}
.section--navy .faq__question{color:var(--white)}
.section--navy .faq__answer{color:rgba(255,255,255,.72)}
.section--navy .faq__sign::before,
.section--navy .faq__sign::after{background:var(--yellow-500)}


/* ==================================================================
   18 — FORMULAIRE                                            [§6.18]
   ================================================================== */
.form{min-width:0}

.form__fieldset{
  min-width:0;
  margin:0 0 20px;
  padding:clamp(18px,2.6vw,28px);
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
}
.form__legend{
  display:flex;
  align-items:center;
  gap:12px;
  margin-left:-10px;
  padding:0 10px;
  font-size:clamp(17px,1.5vw,20px);
  font-weight:600;
  color:var(--navy-900);
}
.form__legend-num{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:34px;
  height:26px;
  padding:0 7px;
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:600;
  letter-spacing:.12em;
  color:var(--yellow-500);
  background:var(--navy-800);
  border-radius:var(--r);
}
.form__grid{display:grid;gap:18px;margin-top:18px}
.form__actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:16px 20px;
  margin-top:8px;
}
.form__required-note{margin:0;font-size:13px;color:var(--muted)}

.form__status{margin:16px 0 0;font-size:14.5px}
.form__status:empty{margin:0;padding:0;border:0}
.form__status--ok{
  padding:11px 14px;
  color:var(--ok);
  background:rgba(27,127,75,.06);
  border:1px solid rgba(27,127,75,.24);
  border-left:3px solid var(--ok);
  border-radius:0 var(--r) var(--r) 0;
}
.form__status--err{
  padding:11px 14px;
  color:var(--err);
  background:rgba(192,38,38,.05);
  border:1px solid rgba(192,38,38,.22);
  border-left:3px solid var(--err);
  border-radius:0 var(--r) var(--r) 0;
}

/* --- 18.a Champs --- */
.field{display:flex;flex-direction:column;gap:7px;min-width:0}
.field__label{
  display:inline-flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:6px;
  font-size:13.5px;
  font-weight:600;
  line-height:1.45;
  color:var(--navy-900);
}
.field__req{color:var(--err);font-weight:700}
.field__opt{font-size:12.5px;font-weight:400;color:var(--muted)}

.field__input,
.field__textarea,
.field__select{
  width:100%;
  min-height:46px;
  padding:11px 13px;
  font-family:var(--font-sans);
  font-size:15.5px;
  line-height:1.4;
  color:var(--ink);
  background:var(--white);
  border:1px solid var(--field-border);
  border-radius:var(--r);
  transition:border-color .18s var(--ease),background-color .18s var(--ease);
}
.field__input:hover,
.field__textarea:hover,
.field__select:hover{border-color:#5A667A}
.field__input:focus,
.field__textarea:focus,
.field__select:focus{border-color:var(--navy-600)}
.field__input::placeholder,
.field__textarea::placeholder{color:var(--muted)}

.field__textarea{min-height:132px;line-height:1.55;resize:vertical}

.field__select-wrap{position:relative;display:block;min-width:0}
.field__select{
  -webkit-appearance:none;
  appearance:none;
  padding-right:42px;
  cursor:pointer;
}
.field__select-wrap::after{
  content:"";
  position:absolute;
  right:16px;
  top:50%;
  width:8px;
  height:8px;
  border-right:2px solid var(--navy-700);
  border-bottom:2px solid var(--navy-700);
  transform:translateY(-70%) rotate(45deg);
  pointer-events:none;
}

.field__hint{margin:0;font-size:12.5px;line-height:1.5;color:var(--muted)}
.field__error{
  display:flex;
  gap:8px;
  margin:0;
  font-size:12.5px;
  font-weight:500;
  line-height:1.5;
  color:var(--err);
}
.field__error::before{
  content:"";
  flex:none;
  width:3px;
  background:var(--err);
}

.field.is-invalid .field__input,
.field.is-invalid .field__textarea,
.field.is-invalid .field__select{
  border-color:var(--err);
  background:rgba(192,38,38,.03);
}
.field.is-invalid .field__label{color:var(--err)}

/* --- 18.b Choix exclusifs (radios) --- */
.choice-group{display:grid;gap:10px}
.choice{position:relative;display:block;min-width:0}
.choice__input{
  position:absolute;
  width:1px;
  height:1px;
  margin:0;
  opacity:0;
  pointer-events:none;
}
.choice__box{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:3px;
  height:100%;
  padding:14px 16px 14px 44px;
  background:var(--white);
  border:1px solid var(--field-border);
  border-radius:var(--r);
  cursor:pointer;
  transition:border-color .18s var(--ease),background-color .18s var(--ease),box-shadow .18s var(--ease);
}
.choice__box::before{
  content:"";
  position:absolute;
  left:16px;
  top:17px;
  width:16px;
  height:16px;
  background:var(--white);
  border:1px solid var(--field-border);
  border-radius:50%;
  transition:border-color .18s var(--ease);
}
.choice__box::after{
  content:"";
  position:absolute;
  left:21px;
  top:22px;
  width:6px;
  height:6px;
  background:var(--navy-800);
  border-radius:50%;
  transform:scale(0);
  transition:transform .15s var(--ease);
}
.choice__box:hover{border-color:#5A667A}
.choice__input:checked+.choice__box{
  border-color:var(--navy-800);
  background:#F7F9FC;
  box-shadow:inset 3px 0 0 var(--yellow-500);
}
.choice__input:checked+.choice__box::before{border-color:var(--navy-800)}
.choice__input:checked+.choice__box::after{transform:scale(1)}
.choice__input:focus-visible+.choice__box{
  outline:2px solid var(--navy-800);
  outline-offset:2px;
}
.choice__title{font-size:14.5px;font-weight:600;color:var(--navy-900)}
.choice__desc{font-size:12.5px;line-height:1.45;color:var(--muted)}

.field.is-invalid .choice__box{border-color:rgba(192,38,38,.55)}

@media (min-width:640px){
  .choice-group{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* --- 18.c Cases à cocher --- */
.check{
  position:relative;
  display:flex;
  align-items:flex-start;
  gap:12px;
  min-width:0;
  font-size:14.5px;
  line-height:1.5;
  color:var(--ink);
  cursor:pointer;
}
.check__input{
  position:absolute;
  width:1px;
  height:1px;
  margin:0;
  opacity:0;
  pointer-events:none;
}
.check__box{
  position:relative;
  flex:none;
  width:20px;
  height:20px;
  margin-top:2px;
  background:var(--white);
  border:1px solid var(--field-border);
  border-radius:var(--r);
  transition:border-color .18s var(--ease),background-color .18s var(--ease);
}
.check__box::after{
  content:"";
  position:absolute;
  left:6px;
  top:2px;
  width:5px;
  height:10px;
  border:2px solid var(--navy-900);
  border-top:0;
  border-left:0;
  opacity:0;
  transform:rotate(45deg) scale(.6);
  transition:opacity .15s var(--ease),transform .15s var(--ease);
}
.check:hover .check__box{border-color:#5A667A}
.check__input:checked+.check__box{background:var(--yellow-500);border-color:var(--yellow-600)}
.check__input:checked+.check__box::after{opacity:1;transform:rotate(45deg) scale(1)}
.check__input:focus-visible+.check__box{
  outline:2px solid var(--navy-800);
  outline-offset:2px;
}
.check__text{min-width:0}
.field.is-invalid .check__box{border-color:var(--err)}

/* --- 18.d Confirmation d’envoi --- */
.form-success{
  padding:clamp(24px,3vw,38px);
  text-align:center;
  background:var(--surface);
  border:1px solid var(--line);
  border-top:3px solid var(--ok);
  border-radius:var(--r-lg);
}
.form-success__mark{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:52px;
  height:52px;
  font-size:26px;
  line-height:1;
  color:var(--white);
  background:var(--ok);
  border-radius:50%;
}
.form-success__title{
  margin:18px 0 0;
  font-size:clamp(21px,2.4vw,28px);
  color:var(--navy-900);
}
.form-success__text{margin:10px auto 0;max-width:58ch;color:var(--muted)}
.form-success__ref{
  display:inline-block;
  margin:18px 0 0;
  padding:8px 14px;
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--navy-800);
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r);
}
.form-success__actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:12px;
  margin-top:22px;
}

/* --- 18.e Grille du formulaire (§10) --- */
@media (min-width:640px){
  .form__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .field--full{grid-column:1 / -1}
}


/* ==================================================================
   19 — CONTACT / INFO-CARD / CARTE                           [§6.19]
   ================================================================== */
.contact-grid{display:grid;gap:clamp(24px,4vw,44px)}
.contact-grid__main{min-width:0}
.contact-grid__aside{
  display:grid;
  align-content:start;
  gap:20px;
  min-width:0;
}

.info-card{
  padding:clamp(20px,2.6vw,28px);
  background:var(--white);
  border:1px solid var(--line);
  border-top:3px solid var(--yellow-500);
  border-radius:var(--r-lg);
}
.info-card__title{
  margin:0 0 16px;
  font-size:18px;
  font-weight:600;
  color:var(--navy-900);
}
.info-card--dark{
  background:var(--navy-800);
  border-color:var(--line-dark);
  border-top-color:var(--yellow-500);
  color:var(--on-navy);
}
.info-card--dark .info-card__title{color:var(--white)}
.info-card--dark .info-list__icon{
  color:var(--yellow-500);
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.18);
}
.info-card--dark .info-list__label{color:rgba(255,255,255,.60)}
.info-card--dark .info-list__body,
.info-card--dark .info-list__body a{color:var(--white)}
.info-card--dark .check-list__item{color:rgba(255,255,255,.76)}

.info-list{display:grid;gap:16px;list-style:none;margin:0;padding:0}
.info-list__item{display:flex;align-items:flex-start;gap:14px;min-width:0}
.info-list__icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:none;
  width:38px;
  height:38px;
  color:var(--navy-700);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r);
}
.info-list__body{
  display:flex;
  flex-direction:column;
  gap:3px;
  min-width:0;
  font-size:15px;
  overflow-wrap:anywhere;
}
.info-list__label{
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
}
.info-list__body a{
  font-weight:600;
  color:var(--navy-800);
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color var(--t),border-color var(--t);
}
.info-list__body a:hover{color:var(--navy-600);border-bottom-color:var(--yellow-500)}

.map{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  overflow:hidden;
}
.map__frame{
  display:block;
  width:100%;
  min-height:360px;
  aspect-ratio:16 / 9;
  border:0;
  filter:grayscale(.35);
}

@media (min-width:1024px){
  .contact-grid{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);align-items:start}
}


/* ==================================================================
   20 — CONTENU LONG (.prose)                                 [§6.20]
   ================================================================== */
.prose{max-width:78ch;color:var(--ink)}
.prose>*:first-child{margin-top:0}
.prose h2{
  margin:40px 0 12px;
  padding-top:22px;
  font-size:clamp(20px,2.2vw,26px);
  font-weight:700;
  letter-spacing:-.01em;
  color:var(--navy-900);
  border-top:1px solid var(--line);
}
.prose h2:first-child{padding-top:0;border-top:0}
.prose h3{
  margin:26px 0 8px;
  font-size:17px;
  font-weight:600;
  color:var(--navy-800);
}
.prose p{margin:0 0 14px;color:var(--muted)}
.prose ul,
.prose ol{margin:0 0 16px;padding-left:20px;color:var(--muted)}
.prose li{margin-bottom:7px}
.prose li::marker{color:var(--yellow-600)}
.prose strong{color:var(--ink)}
.prose a{
  color:var(--navy-800);
  text-decoration:none;
  border-bottom:1px solid var(--yellow-500);
  transition:color var(--t),background-color var(--t);
}
.prose a:hover{color:var(--navy-600);background:rgba(255,199,44,.16)}


/* ==================================================================
   21 — DIVERS                                                [§6.21]
   ================================================================== */

/* --- 21.a Encadré --- */
.callout{
  padding:clamp(16px,2vw,22px);
  font-size:15px;
  color:var(--muted);
  background:var(--surface);
  border:1px solid var(--line);
  border-left:3px solid var(--yellow-500);
  border-radius:0 var(--r) var(--r) 0;
}
.callout>*:first-child{margin-top:0}
.callout>*:last-child{margin-bottom:0}
.section--navy .callout{
  color:rgba(255,255,255,.76);
  background:rgba(255,255,255,.04);
  border-color:var(--line-dark);
  border-left-color:var(--yellow-500);
}

/* --- 21.b Badge --- */
.badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:5px 10px;
  font-family:var(--font-mono);
  font-size:10.5px;
  font-weight:500;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--navy-800);
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r);
}
.badge::before{
  content:"";
  width:7px;
  height:7px;
  background:var(--yellow-500);
}
.section--navy .badge,
.card--dark .badge{
  color:rgba(255,255,255,.82);
  background:transparent;
  border-color:var(--line-dark);
}

/* --- 21.c Liste à coches --- */
.check-list{display:grid;gap:10px;list-style:none;margin:0;padding:0}
.check-list__item{
  position:relative;
  min-width:0;
  padding-left:28px;
  font-size:15.5px;
  color:var(--muted);
}
.check-list__item::before{
  content:"";
  position:absolute;
  left:3px;
  top:.34em;
  width:6px;
  height:11px;
  border:2px solid var(--yellow-600);
  border-top:0;
  border-left:0;
  transform:rotate(45deg);
}
.section--navy .check-list__item,
.card--dark .check-list__item,
.cta-band .check-list__item{color:rgba(255,255,255,.76)}
.section--navy .check-list__item::before,
.card--dark .check-list__item::before,
.info-card--dark .check-list__item::before,
.cta-band .check-list__item::before{border-color:var(--yellow-500)}

/* --- 21.d Étiquettes --- */
.tag-list{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  list-style:none;
  margin:0;
  padding:0;
}
.tag{
  padding:5px 10px;
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--navy-800);
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r);
}
.section--navy .tag,
.card--dark .tag,
.cta-band .tag{
  color:rgba(255,255,255,.80);
  background:transparent;
  border-color:var(--line-dark);
}

/* --- 21.e Liste de caractéristiques --- */
.spec-list{display:grid;margin:22px 0 0;border-top:1px solid var(--line)}
.spec-list__row{
  display:grid;
  gap:4px;
  padding:12px 0;
  border-bottom:1px solid var(--line);
}
.spec-list dt{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
}
.spec-list dd{margin:0;min-width:0;font-size:15px;color:var(--ink)}
.section--navy .spec-list,
.section--navy .spec-list__row{border-color:var(--line-dark)}
.section--navy .spec-list dt{color:rgba(255,255,255,.58)}
.section--navy .spec-list dd{color:var(--white)}

@media (min-width:640px){
  .spec-list__row{
    grid-template-columns:190px minmax(0,1fr);
    gap:20px;
    align-items:baseline;
  }
}

/* --- 21.f Deux colonnes texte / visuel --- */
.split{display:grid;gap:clamp(24px,4vw,56px);align-items:center}
.split__media{min-width:0}
.split__body{min-width:0}
@media (min-width:860px){
  .split{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* --- 21.g Bloc visuel --- */
.figure-block{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0;
  padding:clamp(18px,2.6vw,32px);
  overflow:hidden;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
}
.figure-block::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    repeating-linear-gradient(90deg,rgba(11,42,91,.05) 0 1px,transparent 1px 32px),
    repeating-linear-gradient(0deg,rgba(11,42,91,.05) 0 1px,transparent 1px 32px);
  pointer-events:none;
}
.figure-block>*{position:relative;max-width:100%}
.figure-block svg{display:block;width:100%;height:auto}
.section--navy .figure-block{background:rgba(255,255,255,.04);border-color:var(--line-dark)}
.section--navy .figure-block::before{
  background-image:
    repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px 32px),
    repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 32px);
}

/* --- 21.h Citation --- */
.quote{
  max-width:72ch;
  margin:0;
  padding:4px 0 4px clamp(18px,3vw,28px);
  border-left:3px solid var(--yellow-500);
}
.quote__text{
  margin:0;
  font-size:clamp(18px,2.1vw,24px);
  font-weight:500;
  line-height:1.4;
  letter-spacing:-.01em;
  color:var(--navy-900);
}
.quote__author{
  margin:14px 0 0;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
}
.section--navy .quote__text{color:var(--white)}
.section--navy .quote__author{color:rgba(255,255,255,.60)}

/* --- 21.i Barre de liens d’ancres --- */
.anchor-nav{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:0;
  padding:14px 0;
  list-style:none;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.anchor-nav ul{display:contents;list-style:none;margin:0;padding:0}
.anchor-nav li{list-style:none;min-width:0}
.anchor-nav a{
  display:inline-flex;
  align-items:center;
  padding:7px 12px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--navy-800);
  text-decoration:none;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r);
  transition:background-color var(--t),color var(--t),border-color var(--t),transform var(--t);
}
.anchor-nav a:hover{
  color:var(--yellow-500);
  background:var(--navy-800);
  border-color:var(--navy-800);
  transform:translateY(-2px);
}
.section--navy .anchor-nav{border-color:var(--line-dark)}
.section--navy .anchor-nav a{
  color:rgba(255,255,255,.82);
  background:transparent;
  border-color:var(--line-dark);
}
.section--navy .anchor-nav a:hover{color:var(--navy-900);background:var(--yellow-500);border-color:var(--yellow-500)}


/* ==================================================================
   22 — PIED DE PAGE                                          [§6.4]
   ================================================================== */
.site-footer{background:var(--navy-900);color:rgba(255,255,255,.70)}

.site-footer__top{
  display:grid;
  gap:clamp(28px,4vw,44px);
  padding-block:clamp(40px,6vw,72px);
}
.site-footer__brand{min-width:0}
.site-footer__logo{
  width:auto;
  height:40px;
  max-width:208px;
  margin-bottom:18px;
}
.site-footer__baseline{
  margin:0 0 22px;
  max-width:46ch;
  font-size:14.5px;
  color:rgba(255,255,255,.66);
}
.site-footer__col{min-width:0}
.site-footer__title{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 16px;
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:500;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--yellow-500);
}
.site-footer__title::before{
  content:"";
  flex:none;
  width:8px;
  height:8px;
  background:var(--yellow-500);
}
.site-footer__list{display:grid;gap:9px;list-style:none;margin:0;padding:0}
.site-footer__list a{
  font-size:14.5px;
  color:rgba(255,255,255,.72);
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color var(--t),border-color var(--t);
}
.site-footer__list a:hover{color:var(--white);border-bottom-color:var(--yellow-500)}

.site-footer__address{
  display:grid;
  gap:14px;
  font-size:14.5px;
  line-height:1.6;
  overflow-wrap:anywhere;
}
.site-footer__address p{margin:0;color:rgba(255,255,255,.70)}
.site-footer__tag{
  display:block;
  margin-bottom:4px;
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--yellow-500);
}
.site-footer__address a{
  color:rgba(255,255,255,.82);
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color var(--t),border-color var(--t);
}
.site-footer__address a:hover{color:var(--white);border-bottom-color:var(--yellow-500)}

.site-footer__bottom{border-top:1px solid rgba(255,255,255,.14)}
.site-footer__bottom-inner{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:10px 24px;
  padding-block:18px;
  font-size:13px;
  color:rgba(255,255,255,.55);
}
.site-footer__bottom-inner p{margin:0}
.site-footer__legal{
  display:flex;
  flex-wrap:wrap;
  gap:18px;
  list-style:none;
  margin:0;
  padding:0;
}
.site-footer__legal a{
  color:rgba(255,255,255,.62);
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color var(--t),border-color var(--t);
}
.site-footer__legal a:hover{color:var(--white);border-bottom-color:var(--yellow-500)}

@media (min-width:640px){
  .site-footer__top{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:1024px){
  .site-footer__top{grid-template-columns:1.5fr 1fr 1fr 1.2fr}
  .site-footer__logo{height:44px}
}


/* ==================================================================
   23 — ACCESSIBILITÉ, MOTION RÉDUITE, IMPRESSION
   ================================================================== */

/* Cible d’ancre : liseré jaune à gauche */
.service:target,
.partner:target{
  border-left:3px solid var(--yellow-500);
  padding-left:clamp(14px,2vw,22px);
}

/* Préférence système : mouvement réduit */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,
  *::before,
  *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    animation-delay:0ms !important;
    transition-duration:.001ms !important;
    transition-delay:0ms !important;
    scroll-behavior:auto !important;
  }
  .reveal{opacity:1;transform:none}
  .btn:hover,
  .card:hover,
  .anchor-nav a:hover{transform:none}
}

/* Impression */
@media print{
  .topbar,
  .site-header,
  .site-nav,
  .nav-toggle,
  .nav-backdrop,
  .skip-link,
  .cta-band,
  .site-footer,
  .map,
  .anchor-nav{display:none !important}

  html{scroll-padding-top:0}

  *,
  *::before,
  *::after{
    color:#000 !important;
    background:transparent !important;
    box-shadow:none !important;
    filter:none !important;
  }

  body{font-size:11pt;line-height:1.45}

  .hero,
  .page-hero,
  .section--navy{border:1px solid #000}
  .hero__bg,
  .page-hero__bg{display:none}

  .card,
  .info-card,
  .form__fieldset,
  .stats,
  .coverage,
  .logo-grid{border:1px solid #999 !important}

  .section,
  .section--tight{padding-block:14pt}

  .reveal{opacity:1 !important;transform:none !important}

  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt}

  .service,
  .partner,
  .step,
  .faq__item{break-inside:avoid}
}