/* =====================================================================
   COLOTI TRANSPORT — Feuille de style
   Direction artistique : bleu nuit & orange, cartes blanches sur fond
   gris-bleu. Sobre, corporate, lisible.
   ---------------------------------------------------------------------
   SOMMAIRE
    00. Polices
    01. Variables (couleurs, typo, espacements)
    02. Réinitialisation & base
    03. Typographie
    04. Mise en page (wrap, section, grid)
    05. Boutons, liens, pastilles
    06. En-tête, navigation, menu mobile, barre d'onglets
    07. Hero (accueil) + bandeau d'atouts
    08. Bandeau défilant (villes)
    09. En-tête des pages intérieures + fil d'Ariane
    10. Panneaux & blocs éditoriaux
    11. Chiffres (statband, stats)
    12. Bloc vidéo
    13. Services (svc)
    14. Cartes (card, pcard, step, spec)
    15. Listes à coches, tags
    16. Accordéon (FAQ)
    17. Chronologie & fiche légale
    18. Formulaire & coordonnées
    19. Bandeau d'appel à l'action
    20. Pied de page
    21. Bouton « retour en haut »
    22. Animations d'apparition
    23. Responsive
    24. Impression & préférences système
   ===================================================================== */

/* ====================================================== 00. Polices
   Polices hébergées sur le site : aucune requête vers un service tiers,
   aucun cookie. Fichiers dans assets/fonts/ (licence SIL OFL, incluse).
   Fichiers « variables » : une seule requête couvre toutes les graisses.
   ------------------------------------------------------------------ */
@font-face{
  font-family:'Plus Jakarta Sans';
  font-style:normal; font-weight:200 800; font-display:swap;
  src:url('../fonts/plus-jakarta-sans-latin.woff2') format('woff2-variations');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
                U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,
                U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Plus Jakarta Sans';
  font-style:normal; font-weight:200 800; font-display:swap;
  src:url('../fonts/plus-jakarta-sans-latin-ext.woff2') format('woff2-variations');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
                U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,
                U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Inter';
  font-style:normal; font-weight:100 900; font-display:swap;
  src:url('../fonts/inter-latin.woff2') format('woff2-variations');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
                U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,
                U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Inter';
  font-style:normal; font-weight:100 900; font-display:swap;
  src:url('../fonts/inter-latin-ext.woff2') format('woff2-variations');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
                U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,
                U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ============================================================ 01. Variables */
:root{
  /* — Fonds — */
  --bg:        #F1F5F9;   /* fond général, gris-bleu clair */
  --bg-2:      #F8FAFC;   /* sections alternées */
  --card:      #FFFFFF;

  /* — Bleu nuit (bandeaux, pied de page) — */
  --navy:      #0F172A;
  --navy-2:    #1B2A44;
  --navy-3:    #27395A;

  /* — Texte — */
  --fg:        #0F172A;   /* titres */
  --fg-2:      #475569;   /* texte courant */
  --muted:     #5A6B7D;   /* mentions, légendes */
  --line:      #E2E8F0;   /* filets */
  --line-2:    #CBD5E1;
  --line-d:    rgba(255,255,255,.14);

  /* — Orange : accent principal —
     Deux valeurs volontairement différentes. L'orange vif sert aux icônes
     et aux aplats décoratifs ; l'orange profond sert dès qu'il y a du
     texte (bouton, lien), pour rester lisible (contraste AA). */
  --or:        #EA580C;   /* icônes, filets, aplats */
  --or-d:      #C2410C;   /* boutons, liens, texte orange sur fond clair */
  --or-dd:     #9A3412;   /* survol des boutons */
  --or-l:      #FB923C;   /* orange sur fond bleu nuit */
  --or-08:     rgba(234,88,12,.09);
  --or-14:     rgba(234,88,12,.16);

  /* — Bleu : accent secondaire — */
  --blue:      #1D4ED8;
  --blue-2:    #2563EB;
  --blue-08:   rgba(29,78,216,.08);
  --blue-14:   rgba(29,78,216,.15);

  /* — Typographie — */
  --ff-display:'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ff-body:   'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* — Formes — */
  --r-sm:      8px;
  --r:         12px;
  --r-md:      16px;
  --radius-lg: 22px;
  --r-pill:    999px;

  /* — Rythme — */
  --wrap:      1240px;
  --gutter:    clamp(18px, 4vw, 40px);
  --sec:       clamp(56px, 7.2vw, 104px);
  --overlap:   clamp(0px, 5vw, 56px);   /* débord du bandeau d'atouts */

  /* — Ombres — */
  --sh-sm:     0 1px 2px rgba(15,23,42,.05), 0 1px 1px rgba(15,23,42,.03);
  --sh:        0 2px 4px rgba(15,23,42,.04), 0 10px 26px -16px rgba(15,23,42,.30);
  --sh-lg:     0 4px 8px rgba(15,23,42,.05), 0 24px 54px -26px rgba(15,23,42,.42);

  --ease:      cubic-bezier(.22,.61,.36,1);
}

/* ================================================= 02. Réinitialisation */
*,*::before,*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:96px;
}

body{
  margin:0;
  background:var(--bg);
  color:var(--fg-2);
  font-family:var(--ff-body);
  font-size:16px;
  line-height:1.68;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

img,video{ max-width:100%; display:block; }
svg{ display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; }
ul,ol{ margin:0; padding:0; list-style:none; }
figure{ margin:0; }
dl,dd{ margin:0; }

::selection{ background:var(--blue); color:#fff; }

:focus-visible{
  outline:3px solid var(--blue-2);
  outline-offset:2px;
  border-radius:4px;
}
.dark :focus-visible,
.footer :focus-visible,
.hero :focus-visible,
.pagehead :focus-visible,
.cta-band :focus-visible{ outline-color:var(--or-l); }

.skip:focus{
  position:fixed !important;
  left:16px !important; top:16px !important;
  z-index:999;
  background:var(--or-d); color:#fff;
  padding:12px 20px; border-radius:var(--r-sm);
  font-weight:700;
}

/* =================================================== 03. Typographie */
h1,h2,h3,h4{
  font-family:var(--ff-display);
  font-weight:800;
  line-height:1.16;
  letter-spacing:-.022em;
  color:var(--fg);
  margin:0;
  text-wrap:balance;
}

h1{ font-size:clamp(1.95rem, 3.5vw, 2.9rem); line-height:1.12; letter-spacing:-.03em; }
h2{ font-size:clamp(1.55rem, 2.5vw, 2.3rem); letter-spacing:-.028em; }
h3{ font-size:clamp(1.02rem, 1.25vw, 1.16rem); line-height:1.32; letter-spacing:-.015em; }
h4{ font-size:.95rem; }

p{ margin:0 0 1em; color:var(--fg-2); }
p:last-child{ margin-bottom:0; }

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

/* mot mis en valeur dans un titre */
.hl{ color:var(--or-l); }

.lead{
  font-size:clamp(.96rem, 1.05vw, 1.05rem);
  line-height:1.72;
  color:var(--fg-2);
  max-width:66ch;
}
.lead--light{ color:rgba(255,255,255,.75); }

/* Sur-titre */
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-family:var(--ff-body);
  font-size:.735rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--or-d);
  margin-bottom:14px;
}
.eyebrow::before{
  content:"";
  width:18px; height:3px; border-radius:2px;
  background:currentColor;
  flex:none;
}
.eyebrow--light{ color:var(--or-l); }

.title-bar{ position:relative; }

/* =============================================== 04. Mise en page */
.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.wrap--narrow{ max-width:880px; }

.section{
  position:relative;
  padding-block:var(--sec);
  background:var(--card);
}
.section--tight{ padding-block:clamp(30px,3.6vw,48px); }
.section + .section--tight{ padding-top:0; }
.section--soft{ background:var(--bg); }

/* Sections bleu nuit */
.dark{
  position:relative;
  background:var(--navy);
  color:#fff;
  isolation:isolate;
  overflow:hidden;
}
.dark::before{
  content:"";
  position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(900px 420px at 12% 0%, rgba(37,99,235,.20), transparent 62%),
    radial-gradient(700px 360px at 92% 100%, rgba(234,88,12,.16), transparent 60%);
}
.dark h1,.dark h2,.dark h3,.dark h4{ color:#fff; }
.dark p{ color:rgba(255,255,255,.75); }
.dark strong,.dark b{ color:#fff; }

.section-head{ max-width:62ch; margin-bottom:clamp(28px,3.2vw,44px); }
.section-head.center{ margin-inline:auto; text-align:center; }
.section-head.center .eyebrow{ justify-content:center; }
.section-head .lead{ margin-top:14px; }

.grid{ display:grid; gap:clamp(16px,1.8vw,24px); }
.grid-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.grid-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.grid-4{ grid-template-columns:repeat(4,minmax(0,1fr)); }

/* ==================================== 05. Boutons, liens, pastilles */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  padding:13px 24px;
  background:var(--or-d);
  color:#fff;
  font-family:var(--ff-body);
  font-weight:600;
  font-size:.92rem;
  letter-spacing:-.005em;
  border:1.5px solid var(--or-d);
  border-radius:var(--r-pill);
  cursor:pointer;
  box-shadow:0 8px 20px -12px rgba(194,65,12,.8);
  transition:background .22s var(--ease), border-color .22s var(--ease),
             transform .22s var(--ease), box-shadow .22s var(--ease);
}
.btn svg{ width:16px; height:16px; flex:none; transition:transform .28s var(--ease); }
.btn:hover{
  background:var(--or-dd); border-color:var(--or-dd);
  transform:translateY(-2px);
  box-shadow:0 14px 26px -14px rgba(154,52,18,.85);
}
.btn:hover svg{ transform:translateX(3px); }
.btn:active{ transform:translateY(0); }

.btn--outline-light{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.55);
  color:#fff;
  box-shadow:none;
}
.btn--outline-light:hover{
  background:#fff; border-color:#fff; color:var(--navy);
  box-shadow:0 12px 26px -16px rgba(15,23,42,.7);
}

.btn--ghost{
  background:transparent;
  border-color:var(--line-2);
  color:var(--fg);
  box-shadow:none;
}
.btn--ghost:hover{ background:var(--navy); border-color:var(--navy); color:#fff; }

.btn-row{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
  margin-top:24px;
}

/* Lien fléché : libellé + pastille ronde */
.link-arrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-weight:600;
  font-size:.875rem;
  color:var(--or-d);
}
.link-arrow svg{
  width:32px; height:32px;
  padding:8px;
  border:1.5px solid var(--or-14);
  background:var(--or-08);
  border-radius:var(--r-pill);
  transition:background .22s var(--ease), color .22s var(--ease),
             border-color .22s var(--ease), transform .22s var(--ease);
}
.link-arrow:hover svg{
  background:var(--or-d); border-color:var(--or-d); color:#fff;
  transform:translateX(3px);
}

/* Pastille d'accroche */
.badge{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:8px 16px 8px 13px;
  border:1px solid rgba(255,255,255,.26);
  border-radius:var(--r-pill);
  background:rgba(255,255,255,.1);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  font-size:.735rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#fff;
}
.badge__dot{
  width:7px; height:7px; flex:none;
  background:var(--or-l);
  border-radius:var(--r-pill);
}

/* Pastille icône ronde */
.ring{
  width:44px; height:44px; flex:none;
  display:grid; place-items:center;
  background:var(--or-08);
  color:var(--or);
  border-radius:var(--r-pill);
}
.ring svg{ width:20px; height:20px; }
.dark .ring,
.footer .ring{
  background:rgba(251,146,60,.14);
  color:var(--or-l);
}

/* Bloc icône carré arrondi */
.icon-box{
  width:50px; height:50px;
  display:grid; place-items:center;
  color:var(--or);
  background:var(--or-08);
  border-radius:var(--r);
  margin-bottom:18px;
}
.icon-box svg{ width:24px; height:24px; }
.dark .icon-box{ color:var(--or-l); background:rgba(251,146,60,.14); }

/* ============================ 06. En-tête, navigation, menu mobile */
.header{
  position:sticky; top:0; z-index:90;
  background:var(--card);
  border-bottom:1px solid var(--line);
  transition:box-shadow .3s var(--ease);
}
.header.is-stuck{ box-shadow:0 10px 30px -22px rgba(15,23,42,.6); }

.header__inner{
  display:flex;
  align-items:center;
  gap:clamp(14px,2.4vw,36px);
  height:clamp(66px,5.6vw,80px);
}

.brand{ display:flex; align-items:center; gap:11px; flex:none; }
.brand__mark{ width:38px; height:38px; color:var(--navy); flex:none; }
.brand__mark svg{ width:100%; height:100%; }
.brand__txt{ display:flex; flex-direction:column; line-height:1.1; }
.brand__name{
  font-family:var(--ff-display);
  font-weight:800;
  font-size:1.22rem;
  letter-spacing:-.03em;
  color:var(--navy);
}
.brand__sub{
  font-size:.605rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
}

.nav{ display:flex; gap:clamp(10px,1.5vw,26px); margin-left:auto; }
.nav__link{
  position:relative;
  font-size:.885rem;
  font-weight:500;
  color:var(--fg-2);
  padding:8px 2px;
  transition:color .22s var(--ease);
}
.nav__link::after{
  content:"";
  position:absolute; left:0; right:0; bottom:2px;
  height:2.5px; border-radius:2px;
  background:var(--or);
  opacity:0;
  transform:scaleX(.4);
  transition:opacity .22s var(--ease), transform .22s var(--ease);
}
.nav__link:hover{ color:var(--navy); }
.nav__link.is-active{ color:var(--or-d); font-weight:600; }
.nav__link.is-active::after{ opacity:1; transform:scaleX(1); }

.header__cta{ display:flex; align-items:center; gap:12px; flex:none; }
.header__cta .btn{ padding:11px 20px; font-size:.845rem; }

.burger{
  display:none;
  width:44px; height:44px;
  background:none; border:none; cursor:pointer;
  padding:0;
  flex-direction:column; justify-content:center; align-items:center; gap:5px;
}
.burger span{
  display:block; width:22px; height:2px; border-radius:2px;
  background:var(--navy);
  transition:transform .3s var(--ease), opacity .25s var(--ease);
}
.burger.is-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger.is-open span:nth-child(2){ opacity:0; }
.burger.is-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* Panneau de navigation mobile */
.mobile-menu{
  position:fixed; inset:0; z-index:85;
  background:var(--navy);
  display:flex; flex-direction:column;
  gap:2px;
  padding:clamp(86px,14vw,104px) var(--gutter) 34px;
  transform:translateX(100%);
  visibility:hidden;
  transition:transform .38s var(--ease), visibility .38s;
  overflow-y:auto;
}
.mobile-menu::before{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(700px 400px at 100% 0%, rgba(37,99,235,.22), transparent 60%);
  pointer-events:none;
}
.mobile-menu.is-open{ transform:translateX(0); visibility:visible; }
.m-link{
  position:relative;
  display:flex; align-items:center; gap:14px;
  font-family:var(--ff-display);
  font-size:1.02rem;
  font-weight:600;
  color:#fff;
  padding:15px 4px;
  border-bottom:1px solid var(--line-d);
}
.m-link svg{ width:20px; height:20px; color:var(--or-l); flex:none; }
.m-link:hover{ color:var(--or-l); }
.mobile-menu .btn{ margin-top:26px; }
.mobile-menu__foot{
  margin-top:24px;
  display:flex; flex-direction:column; gap:6px;
  position:relative;
}
.mobile-menu__foot span{
  font-size:.68rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--or-l);
  margin-bottom:4px;
}
.mobile-menu__foot a{ color:rgba(255,255,255,.82); font-weight:500; font-size:.92rem; }

/* en-tête pendant l'ouverture du menu */
body.menu-open .header{ background:transparent; border-bottom-color:transparent; box-shadow:none; }
body.menu-open .brand__name{ color:#fff; }
body.menu-open .brand__sub{ color:rgba(255,255,255,.6); }
body.menu-open .brand__mark{ color:#fff; }
/* sur fond bleu nuit le carré devient blanc : l'arc doit repasser en foncé */
body.menu-open .brand__mark svg path{ stroke:var(--navy); }
body.menu-open .burger span{ background:#fff; }

/* Barre d'onglets, en bas de l'écran sur mobile */
.tabbar{
  display:none;
  position:fixed; left:0; right:0; bottom:0; z-index:84;
  background:var(--card);
  border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom);
  box-shadow:0 -6px 22px -18px rgba(15,23,42,.8);
}
.tabbar__inner{ display:grid; grid-template-columns:repeat(4,1fr); }
.tabbar__item{
  display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:9px 4px 8px;
  font-size:.66rem;
  font-weight:600;
  color:var(--muted);
  transition:color .2s var(--ease);
}
.tabbar__item svg{ width:21px; height:21px; }
.tabbar__item.is-active{ color:var(--or-d); }
.tabbar__item:hover{ color:var(--navy); }

/* ================================= 07. Hero (accueil) & atouts */
.hero{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  min-height:clamp(430px, 50vw, 600px);
  padding-top:clamp(56px,7vw,92px);
  overflow:visible;
  z-index:2;
  color:#fff;
  background:var(--navy);
}
.hero__bg{ position:absolute; inset:0; z-index:-2; overflow:hidden; }
.hero__bg img{
  width:100%; height:100%;
  object-fit:cover; object-position:50% 48%;
}
.hero::before{
  content:"";
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(90deg, rgba(15,23,42,.94) 0%, rgba(15,23,42,.78) 38%, rgba(15,23,42,.18) 78%),
    linear-gradient(180deg, rgba(15,23,42,.5) 0%, transparent 34%, rgba(15,23,42,.6) 100%);
}
.hero__content{
  max-width:min(560px, 100%);
  padding-bottom:clamp(38px,5vw,74px);
}
.hero h1{ margin-top:18px; color:#fff; }
.hero__lead{
  margin-top:18px;
  font-size:clamp(.95rem,1.1vw,1.06rem);
  line-height:1.7;
  color:rgba(255,255,255,.8);
  max-width:46ch;
}
.hero .btn-row{ margin-top:28px; }

/* Bandeau d'atouts, en débord sur la section suivante */
.hero__strip{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  box-shadow:var(--sh-lg);
  overflow:hidden;
  position:relative;
  z-index:5;
  margin-bottom:calc(-1 * var(--overlap));
}
.hero__strip-item{
  display:flex; align-items:flex-start; gap:13px;
  padding:22px clamp(14px,1.5vw,22px);
  border-left:1px solid var(--line);
}
.hero__strip-item:first-child{ border-left:none; }
.hero__strip-item > span:last-child{ display:flex; flex-direction:column; gap:2px; }
.hero__strip-item b{
  font-family:var(--ff-display);
  font-size:.945rem;
  font-weight:700;
  letter-spacing:-.015em;
  color:var(--fg);
}
.hero__strip-item span span{
  font-size:.795rem;
  line-height:1.45;
  color:var(--muted);
}

/* ==================================== 08. Bandeau défilant (villes) */
.marquee{
  position:relative;
  z-index:1;
  background:var(--bg-2);
  border-bottom:1px solid var(--line);
  overflow:hidden;
  padding-block:15px;
  position:relative;
}
.hero + .marquee{ padding-top:calc(15px + var(--overlap)); }
.marquee::before,
.marquee::after{
  content:"";
  position:absolute; top:0; bottom:0; width:70px; z-index:2;
  pointer-events:none;
}
.marquee::before{ left:0;  background:linear-gradient(90deg, var(--bg-2), transparent); }
.marquee::after{  right:0; background:linear-gradient(270deg, var(--bg-2), transparent); }
.marquee__track{
  position:relative;
  z-index:1;
  display:flex;
  width:max-content;
  animation:marquee 48s linear infinite;
}
.marquee__item{
  display:inline-flex;
  align-items:center;
  font-family:var(--ff-display);
  font-size:.92rem;
  font-weight:600;
  color:var(--muted);
  padding-inline:clamp(16px,2vw,28px);
}
.marquee__item::after{
  content:"";
  width:5px; height:5px; border-radius:var(--r-pill);
  margin-left:clamp(16px,2vw,28px);
  background:var(--or);
  flex:none;
}
@keyframes marquee{ to{ transform:translateX(-50%); } }

/* ================== 09. En-tête des pages intérieures + fil d'Ariane */
.pagehead{
  position:relative;
  isolation:isolate;
  color:#fff;
  padding-block:clamp(52px,6.4vw,88px);
  overflow:hidden;
  background:var(--navy);
}
.pagehead__bg{ position:absolute; inset:0; z-index:-2; }
.pagehead__bg img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:var(--pos,50% 35%);
}
.pagehead::before{
  content:"";
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(90deg, rgba(15,23,42,.95) 0%, rgba(15,23,42,.8) 42%, rgba(15,23,42,.3) 85%),
    linear-gradient(180deg, rgba(15,23,42,.35), rgba(15,23,42,.55));
}
.pagehead__inner{ max-width:60ch; }
.pagehead h1{ color:#fff; margin-bottom:12px; }
.pagehead p{
  font-size:clamp(.95rem,1.08vw,1.05rem);
  line-height:1.65;
  color:rgba(255,255,255,.8);
  max-width:56ch;
  margin:0;
}

/* Fil d'Ariane, sur une bande claire sous la bannière */
.crumbbar{
  background:var(--card);
  border-bottom:1px solid var(--line);
}
.crumbbar .wrap{
  display:flex; align-items:center; gap:9px;
  padding-block:13px;
  font-size:.815rem;
  color:var(--muted);
}
.crumbbar a{ color:var(--or-d); font-weight:600; }
.crumbbar a:hover{ text-decoration:underline; text-underline-offset:3px; }
.crumbbar span[aria-hidden]{ color:var(--line-2); }
.crumbbar .crumbbar__cur{ color:var(--fg); font-weight:600; }

/* ================================ 10. Panneaux & blocs éditoriaux */
.panel{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(24px,3.4vw,56px);
  align-items:center;
}
/* image à gauche, texte dans un panneau clair à droite */
.panel--bleed .panel__media{ order:1; }
.panel--bleed .panel__body{
  order:2;
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  padding:clamp(24px,2.8vw,40px);
}
.panel__media{
  position:relative;
  border-radius:var(--r-md);
  overflow:hidden;
  background:var(--bg);
  box-shadow:var(--sh);
}
.panel__media img{
  width:100%; height:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  transition:transform .7s var(--ease);
}
.panel__media:hover img{ transform:scale(1.03); }

/* ==================================== 11. Chiffres & indicateurs */
.statband{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  border:1px solid var(--line);
  border-radius:var(--r-md);
  background:var(--card);
  box-shadow:var(--sh);
  overflow:hidden;
}
.statband__item{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:10px;
  padding:clamp(24px,2.6vw,34px) clamp(14px,1.6vw,24px);
  border-left:1px solid var(--line);
}
.statband__item:first-child{ border-left:none; }
.statband__item > span:last-child{ display:flex; flex-direction:column; }
.statband__item b{
  font-family:var(--ff-display);
  font-size:clamp(1.45rem,2vw,1.95rem);
  font-weight:800;
  letter-spacing:-.035em;
  line-height:1.1;
  color:var(--navy);
}
.statband__item span span{
  font-size:.79rem;
  line-height:1.45;
  color:var(--muted);
  margin-top:3px;
}

.stats{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(14px,1.8vw,22px);
}
.stat{
  text-align:center;
  padding:clamp(26px,3vw,40px) 16px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  box-shadow:var(--sh-sm);
}
.stat b{
  display:block;
  font-family:var(--ff-display);
  font-size:clamp(1.9rem,3.1vw,2.7rem);
  font-weight:800;
  letter-spacing:-.04em;
  line-height:1;
  color:var(--or-d);
}
.stat span{
  display:block;
  margin-top:10px;
  font-size:.845rem;
  line-height:1.5;
  color:var(--muted);
}

/* ================================================ 12. Bloc vidéo */
.videoblock{
  display:grid;
  grid-template-columns:.94fr 1.06fr;
  gap:clamp(28px,3.6vw,58px);
  align-items:center;
  position:relative;
  z-index:2;
}
.videoblock__player{
  position:relative;
  border-radius:var(--r-md);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  background:#000;
  box-shadow:var(--sh-lg);
}
.videoblock__player video{
  width:100%;
  aspect-ratio:16/10;
  object-fit:cover;
  display:block;
}
.videoblock__sound{
  position:absolute; right:13px; bottom:13px;
  width:44px; height:44px;
  display:grid; place-items:center;
  background:rgba(15,23,42,.7);
  border:1px solid rgba(255,255,255,.28);
  border-radius:var(--r-pill);
  color:#fff;
  cursor:pointer;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  transition:background .22s var(--ease), transform .22s var(--ease);
}
.videoblock__sound:hover{ background:var(--or-d); transform:scale(1.06); }
.videoblock__sound svg{ width:19px; height:19px; }
.videoblock__sound-on{ display:none; }
.videoblock__player.has-sound .videoblock__sound-on{ display:block; }
.videoblock__player.has-sound .videoblock__sound-off{ display:none; }

/* ================================================== 13. Services */
.svc{
  display:grid;
  grid-template-columns:.95fr 1.05fr;
  gap:0;
  align-items:stretch;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  box-shadow:var(--sh-sm);
  overflow:hidden;
  margin-bottom:clamp(18px,2vw,26px);
}
.svc:last-of-type{ margin-bottom:0; }
.svc--rev .svc__media{ order:2; }

.svc__media{
  position:relative;
  overflow:hidden;
  background:var(--bg);
  min-height:260px;
}
.svc__media img{
  width:100%; height:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  transition:transform .7s var(--ease);
}
.svc:hover .svc__media img{ transform:scale(1.035); }
.num{
  position:absolute; left:18px; top:18px; z-index:3;
  display:grid; place-items:center;
  width:44px; height:44px;
  background:var(--or-d);
  color:#fff;
  border-radius:var(--r);
  font-family:var(--ff-display);
  font-size:1rem;
  font-weight:800;
  box-shadow:0 10px 22px -12px rgba(15,23,42,.9);
}
.svc__body{ padding:clamp(24px,2.8vw,40px); }
.svc__body h3{
  font-size:clamp(1.22rem,1.7vw,1.55rem);
  margin-bottom:12px;
}
.svc__body .lead{ margin-bottom:16px; }

/* ========================================= 14. Cartes & étapes */
.card{
  position:relative;
  padding:clamp(22px,2.3vw,28px);
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  box-shadow:var(--sh-sm);
  transition:transform .26s var(--ease), box-shadow .26s var(--ease),
             border-color .26s var(--ease);
}
.card:hover{
  transform:translateY(-4px);
  border-color:var(--line-2);
  box-shadow:var(--sh);
}
.card h3{ margin-bottom:9px; }
.card p{ font-size:.895rem; line-height:1.64; margin:0; }
.section--soft .card{ box-shadow:var(--sh-sm); }
.dark .card{
  background:rgba(255,255,255,.055);
  border-color:rgba(255,255,255,.12);
  box-shadow:none;
}
.dark .card:hover{
  background:rgba(255,255,255,.09);
  border-color:rgba(251,146,60,.35);
  box-shadow:none;
}

/* Carte illustrée */
.pcard{
  display:flex;
  flex-direction:column;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  box-shadow:var(--sh-sm);
  overflow:hidden;
  transition:transform .26s var(--ease), box-shadow .26s var(--ease),
             border-color .26s var(--ease);
}
.pcard:hover{
  transform:translateY(-5px);
  border-color:var(--line-2);
  box-shadow:var(--sh);
}
.pcard__vis{ position:relative; overflow:hidden; background:var(--bg); }
.pcard__vis img{
  width:100%;
  aspect-ratio:16/10;
  object-fit:cover;
  transition:transform .65s var(--ease);
}
.pcard:hover .pcard__vis img{ transform:scale(1.05); }
.pcard__badge{
  position:absolute; left:14px; top:14px; z-index:2;
  padding:6px 13px;
  background:rgba(15,23,42,.82);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  color:#fff;
  border-radius:var(--r-pill);
  font-size:.665rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.pcard__body{
  padding:clamp(18px,2vw,24px);
  display:flex; flex-direction:column;
  flex:1;
}
.pcard__body h3{ margin-bottom:8px; }
.pcard__body p{ font-size:.885rem; line-height:1.62; }
.pcard__body .link-arrow{ align-self:flex-start; margin-top:auto; padding-top:14px; }
.dark .pcard{ background:rgba(255,255,255,.055); border-color:rgba(255,255,255,.12); }

/* Ligne de caractéristique (flotte) */
.spec{
  display:flex; justify-content:space-between; gap:14px;
  padding:9px 0;
  border-top:1px solid var(--line);
  font-size:.82rem;
}
.spec span:first-child{ color:var(--muted); }
.spec span:last-child{ color:var(--fg); font-weight:600; text-align:right; }
.pcard__body .spec:first-of-type{ margin-top:12px; }

/* Étape numérotée */
.step{
  text-align:center;
  padding:clamp(24px,2.6vw,32px) clamp(18px,2vw,24px);
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  box-shadow:var(--sh-sm);
}
.step__num{
  display:grid; place-items:center;
  width:54px; height:54px;
  margin:0 auto 16px;
  background:var(--or-08);
  color:var(--or-d);
  border-radius:var(--r);
  font-family:var(--ff-display);
  font-size:1.1rem;
  font-weight:800;
  letter-spacing:-.02em;
}
.step h3{ margin-bottom:8px; }
.step p{ font-size:.875rem; line-height:1.62; margin:0; }

/* ============================== 15. Listes à coches & tags */
.checks{ display:flex; flex-direction:column; gap:10px; margin-top:18px; }
.checks li{
  position:relative;
  padding-left:29px;
  font-size:.915rem;
  line-height:1.6;
  color:var(--fg-2);
}
.checks li::before{
  content:"";
  position:absolute; left:0; top:.33em;
  width:18px; height:18px;
  border-radius:var(--r-pill);
  background:var(--blue-08) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231D4ED8' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/11px no-repeat;
}
.checks--light li{ color:rgba(255,255,255,.78); }
.checks--light li::before{
  background:rgba(251,146,60,.18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FDBA74' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/11px no-repeat;
}

.tag-list{ display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.tag{
  padding:6px 14px;
  border:1px solid var(--line);
  border-radius:var(--r-pill);
  font-size:.76rem;
  font-weight:600;
  color:var(--fg-2);
  background:var(--bg-2);
}
.dark .tag{
  border-color:rgba(255,255,255,.18);
  color:rgba(255,255,255,.8);
  background:rgba(255,255,255,.06);
}

/* ================================================ 16. Accordéon */
.acc{ display:flex; flex-direction:column; gap:12px; }
.acc__item{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r);
  box-shadow:var(--sh-sm);
  overflow:hidden;
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.acc__item.is-open{ border-color:var(--or-14); box-shadow:var(--sh); }
.acc__btn{
  width:100%;
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:18px clamp(18px,2vw,24px);
  background:none; border:none;
  text-align:left;
  cursor:pointer;
  font-family:var(--ff-display);
  font-size:clamp(.95rem,1.15vw,1.05rem);
  font-weight:700;
  letter-spacing:-.015em;
  line-height:1.4;
  color:var(--fg);
  transition:color .22s var(--ease);
}
.acc__btn:hover{ color:var(--or-d); }
.acc__ico{
  position:relative;
  width:30px; height:30px; flex:none;
  border-radius:var(--r-pill);
  background:var(--or-08);
  transition:background .26s var(--ease), transform .26s var(--ease);
}
.acc__ico::before,
.acc__ico::after{
  content:"";
  position:absolute; left:50%; top:50%;
  background:var(--or-d);
  border-radius:2px;
  transform:translate(-50%,-50%);
  transition:opacity .22s var(--ease), background .22s var(--ease);
}
.acc__ico::before{ width:11px; height:2px; }
.acc__ico::after{ width:2px; height:11px; }
.acc__item.is-open .acc__ico{ background:var(--or-d); transform:rotate(180deg); }
.acc__item.is-open .acc__ico::before{ background:#fff; }
.acc__item.is-open .acc__ico::after{ opacity:0; }
.acc__panel{
  max-height:0;
  overflow:hidden;
  transition:max-height .4s var(--ease);
}
.acc__panel p{
  padding:0 clamp(18px,2vw,24px) 20px;
  padding-right:clamp(48px,6vw,66px);
  font-size:.9rem;
  line-height:1.72;
  margin:0;
}

/* ====================================== 17. Chronologie & fiche légale */
.timeline{
  margin-top:32px;
  padding-left:26px;
  border-left:2px solid var(--line);
}
.tl-item{ position:relative; padding-bottom:26px; }
.tl-item:last-child{ padding-bottom:0; }
.tl-item::before{
  content:"";
  position:absolute; left:-33px; top:6px;
  width:12px; height:12px;
  border-radius:var(--r-pill);
  background:var(--or-d);
  border:3px solid var(--card);
  box-sizing:content-box;
}
.tl-item time{
  display:block;
  font-size:.695rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--blue);
  margin-bottom:6px;
}
.tl-item h3{ font-size:1.02rem; margin-bottom:6px; }
.tl-item p{ font-size:.885rem; line-height:1.62; margin:0; }

.legal-card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  box-shadow:var(--sh-sm);
  padding:clamp(20px,2.4vw,30px);
}
.legal-card__head{ margin-bottom:16px; }
.legal-card__head h3{ font-size:1.16rem; }
.legal-row{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:16px;
  padding:11px 0;
  border-top:1px solid var(--line);
}
.legal-row:first-child{ border-top:none; padding-top:0; }
.legal-row dt{
  font-size:.795rem;
  color:var(--muted);
}
.legal-row dd{
  font-size:.885rem;
  font-weight:600;
  color:var(--fg);
  line-height:1.5;
}

/* ================================== 18. Formulaire & coordonnées */
.form-wrap{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  box-shadow:var(--sh-sm);
  padding:clamp(22px,2.6vw,34px);
}
.form{ display:flex; flex-direction:column; gap:15px; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:15px; }
.field{ display:flex; flex-direction:column; gap:6px; }
.field label{
  font-size:.79rem;
  font-weight:600;
  color:var(--fg);
}
.field label span{ color:var(--or-d); }
.field input,
.field select,
.field textarea{
  width:100%;
  padding:12px 14px;
  background:var(--bg-2);
  border:1.5px solid var(--line);
  border-radius:var(--r-sm);
  font-family:var(--ff-body);
  font-size:.92rem;
  color:var(--fg);
  transition:border-color .22s var(--ease), background .22s var(--ease),
             box-shadow .22s var(--ease);
}
.field textarea{ min-height:124px; resize:vertical; }
.field input::placeholder,
.field textarea::placeholder{ color:#64748B; }
.field input:focus,
.field select:focus,
.field textarea:focus{
  outline:none;
  border-color:var(--blue-2);
  background:var(--card);
  box-shadow:0 0 0 4px var(--blue-08);
}
.field select{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A6B7D' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 13px center;
  background-size:17px;
  padding-right:40px;
}
.form .btn{ width:100%; }
.form-status{
  display:none;
  padding:13px 15px;
  border-radius:var(--r-sm);
  background:var(--or-08);
  border:1px solid var(--or-14);
  border-left:3px solid var(--or-d);
  font-size:.875rem;
  line-height:1.6;
  color:var(--fg);
}
.form-status.is-visible{ display:block; }
.form-note{
  font-size:.785rem;
  line-height:1.6;
  color:var(--muted);
  margin:2px 0 0;
}

/* Panneau clair « Nos coordonnées » */
.panel-soft{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  box-shadow:var(--sh-sm);
  padding:clamp(22px,2.6vw,34px);
}
.info-item{
  display:flex; gap:14px;
  padding:14px 0;
  border-top:1px solid var(--line);
}
.info-item:first-of-type{ border-top:none; padding-top:0; }
.info-item h4{
  font-family:var(--ff-body);
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--or-d);
  margin-bottom:4px;
}
.info-item p{
  font-size:.9rem;
  line-height:1.6;
  margin:0;
  color:var(--fg-2);
}
.info-item a:hover{ color:var(--or-d); text-decoration:underline; text-underline-offset:3px; }

/* ================================= 19. Bandeau d'appel à l'action */
.cta-band{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  border-radius:var(--radius-lg);
  padding:clamp(38px,5vw,72px) clamp(24px,4.5vw,66px);
  text-align:center;
  color:#fff;
  background:var(--navy);
}
.cta-band__bg{ position:absolute; inset:0; z-index:-2; }
.cta-band__bg img{ width:100%; height:100%; object-fit:cover; object-position:50% 55%; }
.cta-band::before{
  content:"";
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(100deg, rgba(15,23,42,.95) 8%, rgba(15,23,42,.8) 52%, rgba(15,23,42,.62) 100%),
    radial-gradient(600px 300px at 88% 110%, rgba(234,88,12,.3), transparent 62%);
}
.cta-band .eyebrow{ justify-content:center; }
.cta-band h2{ color:#fff; max-width:22ch; margin-inline:auto; }
.cta-band p{
  margin:16px auto 0;
  max-width:62ch;
  font-size:clamp(.94rem,1.08vw,1.04rem);
  line-height:1.68;
  color:rgba(255,255,255,.78);
}
.cta-band .btn-row{ justify-content:center; margin-top:28px; }

/* =============================================== 20. Pied de page */
.footer{
  position:relative;
  background:var(--navy);
  color:#fff;
  padding-top:clamp(44px,5.2vw,72px);
  overflow:hidden;
  isolation:isolate;
}
.footer::before{
  content:"";
  position:absolute; inset:0; z-index:-1;
  background:radial-gradient(800px 380px at 8% 0%, rgba(37,99,235,.18), transparent 62%);
}
.footer__top{
  display:grid;
  grid-template-columns:1.7fr 1fr 1.2fr 1.6fr;
  gap:clamp(24px,3.2vw,50px);
  padding-bottom:clamp(32px,4vw,52px);
}
.footer__brand{ max-width:38ch; }
.footer__mark{
  display:block;
  width:46px; height:46px;
  color:#fff;
  margin-bottom:18px;
}
.footer__mark svg{ width:100%; height:100%; }
.footer__brand p{
  font-size:.875rem;
  line-height:1.66;
  color:rgba(255,255,255,.7);
  margin:0;
}
.footer h4{
  font-family:var(--ff-body);
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--or-l);
  margin-bottom:16px;
}
.footer ul{ display:flex; flex-direction:column; gap:9px; }
.footer ul a{
  display:flex;
  align-items:flex-start;
  gap:9px;
  font-size:.875rem;
  line-height:1.5;
  color:rgba(255,255,255,.72);
  transition:color .2s var(--ease);
}
.footer ul a svg{ width:16px; height:16px; flex:none; margin-top:3px; color:var(--or-l); }
.footer ul a:hover{ color:#fff; }
.footer__bottom{
  display:flex; flex-wrap:wrap;
  align-items:center; justify-content:space-between;
  gap:12px;
  padding-block:20px;
  border-top:1px solid var(--line-d);
  font-size:.79rem;
  color:rgba(255,255,255,.58);
}
.footer__legal{ display:flex; flex-wrap:wrap; gap:16px; align-items:center; }
.footer__legal a:hover{ color:var(--or-l); }
@media (min-width:821px){ .footer__bottom{ padding-right:74px; } }

/* ======================================= 21. Retour en haut */
.totop{
  position:fixed; right:18px; bottom:18px; z-index:80;
  width:46px; height:46px;
  display:grid; place-items:center;
  background:var(--or-d);
  color:#fff;
  border:none;
  border-radius:var(--r-pill);
  cursor:pointer;
  opacity:0;
  visibility:hidden;
  transform:translateY(12px);
  transition:opacity .28s var(--ease), transform .28s var(--ease),
             visibility .28s, background .22s var(--ease);
  box-shadow:0 12px 30px -14px rgba(15,23,42,.9);
}
.totop.is-visible{ opacity:1; visibility:visible; transform:translateY(0); }
.totop:hover{ background:var(--navy); }
.totop svg{ width:19px; height:19px; }

/* ================================= 22. Animations d'apparition */
[data-anim]{
  opacity:0;
  transition:opacity .7s var(--ease), transform .7s var(--ease);
  will-change:opacity, transform;
}
[data-anim="up"]{    transform:translateY(28px); }
[data-anim="left"]{  transform:translateX(-28px); }
[data-anim="right"]{ transform:translateX(28px); }
[data-anim="zoom"]{  transform:scale(.97); }
[data-anim].is-in{ opacity:1; transform:none; }

.anim-in{ opacity:0; animation:fadeUp .8s var(--ease) forwards; }
.hero .badge.anim-in{ animation-delay:.08s; }
.hero h1.anim-in{ animation-delay:.2s; }
.hero .hero__lead.anim-in{ animation-delay:.32s; }
.hero .btn-row.anim-in{ animation-delay:.44s; }
@keyframes fadeUp{
  from{ opacity:0; transform:translateY(22px); }
  to{ opacity:1; transform:none; }
}

/* ================================================ 23. Responsive */
@media (max-width:1100px){
  .footer__top{ grid-template-columns:1fr 1fr; }
  .footer__brand{ grid-column:1 / -1; max-width:60ch; }
  .statband{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .statband__item:nth-child(odd){ border-left:none; }
  .statband__item:nth-child(n+3){ border-top:1px solid var(--line); }
  .hero__strip{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .hero__strip-item:nth-child(odd){ border-left:none; }
  .hero__strip-item:nth-child(n+3){ border-top:1px solid var(--line); }
}

@media (max-width:1020px){
  /* tout s'empile : les entrées latérales deviennent verticales, ce qui
     supprime tout risque de débordement horizontal sur petit écran */
  [data-anim="left"],
  [data-anim="right"]{ transform:translateY(24px); }

  .nav{ display:none; }
  .burger{ display:flex; }
  .header__cta .btn{ display:none; }
  .header__inner{ justify-content:space-between; }
  .header__cta{ margin-left:auto; }

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

  .panel,
  .svc,
  .videoblock{ grid-template-columns:1fr; }
  .svc--rev .svc__media{ order:0; }
  .panel--bleed .panel__media{ order:0; }
  .panel--bleed .panel__body{ order:1; }
  .svc__media{ min-height:0; }

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

  /* barre d'onglets en bas d'écran */
  .tabbar{ display:block; }
  body{ padding-bottom:62px; }
  .totop{ bottom:76px; }
}

@media (max-width:820px){
  .grid-2{ grid-template-columns:1fr; }
  .legal-row{ grid-template-columns:1fr; gap:3px; }
  .acc__panel p{ padding-right:clamp(18px,2vw,24px); }
}

@media (max-width:600px){
  .grid-3,
  .grid-4,
  .stats{ grid-template-columns:1fr; }
  .form-row{ grid-template-columns:1fr; }
  .statband{ grid-template-columns:1fr; }
  .statband__item{ border-left:none; flex-direction:row; text-align:left; align-items:center; }
  .statband__item:nth-child(n+2){ border-top:1px solid var(--line); }
  .statband__item > span:last-child{ align-items:flex-start; }
  .hero__strip{ grid-template-columns:1fr; }
  .hero__strip-item{ border-left:none; padding-block:16px; }
  .hero__strip-item:nth-child(n+2){ border-top:1px solid var(--line); }
  .hero{ min-height:auto; }
  .hero::before{
    background:linear-gradient(180deg, rgba(15,23,42,.72) 0%,
      rgba(15,23,42,.62) 45%, rgba(15,23,42,.9) 100%);
  }
  .hero__content{ max-width:100%; padding-bottom:34px; }
  .btn{ width:100%; }
  .btn-row{ flex-direction:column; align-items:stretch; }
  .link-arrow{ width:auto; }
  .footer__top{ grid-template-columns:1fr; }
  .footer__bottom{ flex-direction:column; align-items:flex-start; }
  .timeline{ padding-left:22px; }
  .tl-item::before{ left:-29px; }
}

/* ============================ 24. Impression & préférences système */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  [data-anim]{ opacity:1 !important; transform:none !important; }
  .anim-in{ opacity:1; animation:none; }
  .marquee__track{ animation:none; }
}

@media print{
  .header,.mobile-menu,.tabbar,.totop,.marquee,.burger,
  .videoblock__player,.cta-band,.hero__strip{ display:none !important; }
  body{ background:#fff; color:#000; font-size:11pt; padding-bottom:0; }
  .hero,.pagehead{ min-height:auto; padding:22pt 0; color:#000; background:#fff; }
  .hero::before,.pagehead::before,
  .hero__bg,.pagehead__bg{ display:none; }
  .hero h1,.pagehead h1,.dark h2,.dark h3{ color:#000 !important; }
  .dark,.dark p,.lead--light,.checks--light li{ background:#fff !important; color:#000 !important; }
  .dark::before,.footer::before{ display:none; }
  .section{ padding-block:16pt; }
  a{ text-decoration:underline; }
  [data-anim]{ opacity:1 !important; transform:none !important; }
}