/* Polices auto-hébergées : aucune requête vers un service tiers */
@font-face{font-family:"Familjen Grotesk";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/familjen-grotesk-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Familjen Grotesk";font-style:normal;font-weight:500;font-display:swap;src:url("/fonts/familjen-grotesk-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Familjen Grotesk";font-style:normal;font-weight:700;font-display:swap;src:url("/fonts/familjen-grotesk-latin-700-normal.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/inter-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url("/fonts/inter-latin-500-normal.woff2") format("woff2")}


:root{
  --indigo:#4F46E5;
  --indigo-light:#818CF8;
  --indigo-dark:#312E81;
  --orange:#F6924C;
  --ink:#0F172A;
  --ink-deep:#0A1120;
  --slate:#738196;
  --slate-light:#94A3B8;
  --cloud:#F1F5F9;
  --white:#FFFFFF;
  --line:rgba(129,140,248,.14);
  --title:"Familjen Grotesk",sans-serif;
  --body:"Inter",sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--ink-deep);
  color:var(--cloud);
  font-family:var(--body);
  font-size:16px;
  line-height:1.6;
  overflow-x:hidden;
}
::selection{background:var(--indigo);color:#fff}

/* Scrollbar fine */
::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-track{background:var(--ink-deep)}
::-webkit-scrollbar-thumb{background:var(--indigo-dark);border-radius:99px}
::-webkit-scrollbar-thumb:hover{background:var(--indigo)}

/* ---------- Grain subtil ---------- */
.grain{
  position:fixed;inset:-50%;width:200%;height:200%;pointer-events:none;z-index:900;
  opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  animation:grain 8s steps(10) infinite;
}
@keyframes grain{
  0%,100%{transform:translate(0,0)}10%{transform:translate(-3%,2%)}30%{transform:translate(2%,-3%)}
  50%{transform:translate(-2%,3%)}70%{transform:translate(3%,-2%)}90%{transform:translate(-3%,-3%)}
}


/* ---------- Header ---------- */
header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;justify-content:space-between;align-items:center;
  padding:20px 5vw;
  backdrop-filter:blur(12px);
  background:rgba(10,17,32,.55);
  border-bottom:1px solid var(--line);
  transition:transform .5s cubic-bezier(.76,0,.24,1);
}
header.hidden{transform:translateY(-101%)}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none}
.logo svg{width:32px;height:32px;transition:transform .6s cubic-bezier(.34,1.56,.64,1)}
.logo:hover svg{transform:rotate(90deg)}
.logo span{font-family:var(--title);font-weight:700;font-size:1.2rem;letter-spacing:-.02em}
.logo .a{color:var(--white)}
.logo .d{color:var(--indigo-light)}
nav{display:flex;gap:34px}
nav a{
  color:var(--slate-light);text-decoration:none;font-size:.9rem;font-weight:500;
  position:relative;transition:color .25s;
}
nav a::after{
  content:"";position:absolute;left:0;bottom:-6px;height:1px;width:0;
  background:var(--orange);transition:width .3s;
}
nav a:hover{color:var(--white)}
nav a:hover::after{width:100%}
nav a sup{font-size:.6rem;color:var(--indigo-light);margin-left:3px}
.cta-pill{
  font-family:var(--title);font-weight:500;font-size:.9rem;
  color:var(--ink);background:var(--white);border:none;
  padding:12px 26px;border-radius:999px;text-decoration:none;
  position:relative;overflow:hidden;display:inline-block;
}
.cta-pill span{position:relative;z-index:1;transition:color .35s}
.cta-pill::before{
  content:"";position:absolute;inset:0;background:var(--indigo);
  border-radius:999px;transform:scaleY(0);transform-origin:bottom;
  transition:transform .35s cubic-bezier(.76,0,.24,1);
}
.cta-pill:hover::before{transform:scaleY(1)}
.cta-pill:hover span{color:#fff}
nav a.lang-switch{border:1px solid var(--line);border-radius:999px;padding:5px 12px;font-size:.72rem;letter-spacing:.12em;color:var(--slate-light)}
nav a.lang-switch:hover{border-color:var(--indigo-light);color:var(--white)}
nav a.lang-switch::after{display:none}
/* ---------- Bouton burger et menu mobile ---------- */
/* 44 px de cote : seuil de confort tactile. La marge negative rattrape l'alignement
   visuel sur le bord sans reduire la surface touchable. */
.burger{
  display:none;background:none;border:0;padding:0;cursor:pointer;z-index:101;
  width:44px;height:44px;flex-direction:column;align-items:center;justify-content:center;
}
.burger span{
  display:block;width:26px;height:2px;border-radius:2px;background:var(--cloud);
  transition:transform .35s cubic-bezier(.76,0,.24,1),opacity .2s;
}
.burger span + span{margin-top:6px}
body.nav-open .burger span:nth-child(1){transform:translateY(8px) rotate(45deg)}
body.nav-open .burger span:nth-child(2){opacity:0}
body.nav-open .burger span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
.burger:focus-visible{outline:2px solid var(--indigo-light);outline-offset:2px;border-radius:6px}

/* Le menu passe au bouton burger sous 1200 pixels, et non plus sous 820.
   Relevé le 10 septembre 2026 en préparant le mode clair : entre 821 et
   environ 1150 pixels, tablettes à l'horizontale et petits portables, la
   barre ne tenait pas sur une ligne. Le logo se coupait en deux, « À propos »
   aussi, et le bouton de contact sortait de l'écran sous 900 pixels.
   Seul l'en-tête change de seuil ; le reste de la page garde le sien. */
@media(max-width:1199px){
  /* Le backdrop-filter fait de l'en-tete un bloc conteneur pour ses descendants
     en position:fixed : le panneau se calait sur la barre au lieu de l'ecran.
     Le retirer corrige le menu et allege le defilement, ce flou etant couteux sur mobile. */
  header{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(10,17,32,.94)}
  .burger{display:flex;order:1;margin-right:-8px}   /* dernier de la barre, comme partout ailleurs */
  /* Le bouton de contact rejoint le burger à droite : avec le seuil relevé à
     1200 pixels, il flottait seul au milieu d'une barre de tablette. */
  .cta-pill{margin-left:auto;margin-right:14px}
  body.nav-open{overflow:hidden}
  nav{
    position:fixed;inset:0;z-index:99;
    flex-direction:column;justify-content:flex-start;align-items:flex-start;
    gap:0;padding:0 8vw 40px;overflow-y:auto;overscroll-behavior:contain;
    scroll-padding-top:100px;scroll-padding-bottom:40px;
    background:var(--ink-deep);
    transform:translateX(100%);visibility:hidden;
    transition:transform .45s cubic-bezier(.76,0,.24,1),visibility .45s;
  }
  body.nav-open nav{transform:none;visibility:visible}
  /* Téléphone à l'horizontale, relevé le 10 septembre 2026 par la vérification
     du mode clair : le panneau centré ne tenait pas en hauteur, le haut sortait
     de l'écran sans pouvoir défiler. Le panneau défile désormais. Les marges
     automatiques le centrent tant qu'il y a la place, et ne deviennent jamais
     négatives. En haut, un cache collant de 100 pixels remplace l'ancienne
     marge : il masque la barre, et les liens s'y effacent en défilant au lieu
     de passer derrière le logo ; il absorbe aussi les touchers, pour qu'un
     lien caché dessous ne s'ouvre pas au doigt. Le scroll-padding garde un
     lien qui reçoit le focus au clavier sous ce cache, jamais dessous. */
  nav::before{content:"";position:sticky;top:0;z-index:2;flex:0 0 100px;align-self:stretch;
    background:linear-gradient(to bottom,var(--ink-deep) 86px,transparent)}
  nav>:first-child{margin-top:auto}
  nav>:last-child{margin-bottom:auto}
  /* Le panneau est un enfant de l'en-tete : sans z-index propre, il recouvrirait
     le logo et le bouton de contact, qui sont ses freres. */
  body.nav-open .logo{position:relative;z-index:101}
  body.nav-open .cta-pill{opacity:0;pointer-events:none;transition:opacity .2s}
  nav a{
    font-family:var(--title);font-weight:500;letter-spacing:-.02em;
    font-size:clamp(1.7rem,7vw,2.4rem);color:var(--cloud);
    width:100%;padding:14px 0;border-bottom:1px solid var(--line);
  }
  nav a::after{display:none}
  nav a sup{font-size:.55em;vertical-align:super}
  nav a.lang-switch{
    align-self:flex-start;width:auto;margin-top:28px;border-bottom:1px solid var(--line);
    font-size:.8rem;padding:8px 18px;
  }
  nav a[aria-current="page"]{color:var(--orange)}
}
@media(prefers-reduced-motion:reduce){
  nav{transition:none}
  .burger span{transition:none}
}

/* ---------- Filets de section ---------- */
.rule{
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px 20px;
  border-top:1px solid var(--line);padding-top:16px;margin-bottom:42px;
  font-size:.78rem;letter-spacing:.25em;text-transform:uppercase;
  color:var(--slate);font-weight:500;
}
.rule .idx{color:var(--indigo-light)}

/* ---------- Hero ---------- */
.hero{
  min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  padding:150px 5vw 90px;position:relative;
}
.hero .eyebrow{
  font-size:.82rem;letter-spacing:.25em;text-transform:uppercase;
  color:var(--indigo-light);margin-bottom:30px;font-weight:500;
}
.hero h1{
  font-family:var(--title);font-weight:700;
  font-size:clamp(3rem,9.5vw,8.5rem);
  line-height:1.02;letter-spacing:-.03em;color:var(--white);
}
.hero h1 .accent{color:var(--orange)}
/* Révélation ligne par ligne */
.line{display:block;overflow:hidden}
/* Les états cachés d'avant l'animation n'existent que si JavaScript tourne : theme.js pose la
   classe js sur la racine avant l'affichage. Sans lui, la page s'affiche telle quelle. Nuit du
   10 au 11 septembre 2026 : sans JavaScript, l'accueil était une page vide. */
.line-inner{display:block;transition:transform 1s cubic-bezier(.76,0,.24,1)}
.js .line-inner{transform:translateY(110%)}
body.loaded .line-inner{transform:none}
body.loaded .line:nth-child(2) .line-inner{transition-delay:.1s}
.hero .sub{
  margin-top:38px;max-width:520px;color:var(--slate-light);font-size:1.05rem;
  transition:opacity .8s .5s,transform .8s .5s;
}
.js .hero .sub{opacity:0;transform:translateY(20px)}
body.loaded .hero .sub{opacity:1;transform:none}
.hero .actions{
  margin-top:44px;display:flex;gap:18px;flex-wrap:wrap;align-items:center;
  transition:opacity .8s .65s,transform .8s .65s;
}
.js .hero .actions{opacity:0;transform:translateY(20px)}
body.loaded .hero .actions{opacity:1;transform:none}
.btn-primary{
  font-family:var(--title);font-weight:500;font-size:.95rem;letter-spacing:.01em;
  color:var(--cloud);text-decoration:none;
  padding:13px 26px;border-radius:999px;
  border:1px solid rgba(129,140,248,.45);background:rgba(79,70,229,.12);
  display:inline-flex;align-items:center;gap:10px;
  transition:border-color .3s,background .3s,color .3s;
}
.btn-primary .arr{
  display:inline-block;transition:transform .35s cubic-bezier(.34,1.56,.64,1);
  color:var(--orange);font-size:1.05em;line-height:1;
}
.btn-primary:hover{border-color:var(--orange);background:rgba(79,70,229,.25);color:#fff}
.btn-primary:hover .arr{transform:translate(4px,-4px)}
.btn-ghost{
  font-family:var(--title);font-weight:500;font-size:1rem;
  color:var(--cloud);text-decoration:none;padding:16px 6px;
  border-bottom:1px solid rgba(129,140,248,.4);transition:color .3s,border-color .3s;
}
.btn-ghost:hover{color:var(--orange);border-color:var(--orange)}
.hero .meta{
  position:absolute;right:5vw;bottom:110px;text-align:right;
  font-size:.85rem;color:var(--slate-light);line-height:1.8;
  transition:opacity 1s .9s;
}
.js .hero .meta{opacity:0}
body.loaded .hero .meta{opacity:1}
.hero .meta strong{color:var(--cloud);font-weight:500}
.hero .meta a{
  color:var(--indigo-light);text-decoration:none;transition:color .3s;
}
.hero .meta a:hover{color:var(--orange)}
/* Correctif du 17 août. La règle .hero>*:not(#hero3d):not(.glow) plus bas a une spécificité
   de (1,2,0) à cause du :not(#hero3d), et écrasait ce position:static de spécificité (0,2,0).
   Le bloc signature restait donc positionné en relatif avec ses décalages right/bottom,
   ce qui le faisait chevaucher le bouton sur mobile. Sélecteur remonté à (1,3,0). */
@media(max-width:820px){.hero>.meta:not(#hero3d):not(.glow){
  position:relative;right:auto;bottom:auto;z-index:1;text-align:left;margin-top:48px}}
.hero .glow{
  position:absolute;top:20%;right:-10%;width:55vw;height:55vw;border-radius:50%;
  background:radial-gradient(circle,rgba(79,70,229,.18) 0%,transparent 65%);
  pointer-events:none;
}
/* Nuit du 10 au 11 septembre 2026 : ce halo déborde à droite de 10 % de la largeur. Sur téléphone,
   le navigateur élargissait la page d'autant, et le burger sortait de l'écran. Le haut de page le
   coupe désormais à sa largeur, sans rien couper en hauteur. */
.hero{overflow-x:clip}
#hero3d{
  /* Aligné verticalement sur les deux lignes du titre */
  position:absolute;top:24%;right:0;left:auto;width:52%;height:62%;z-index:0;pointer-events:none;
  opacity:0;transition:opacity 1.8s ease .4s;
}
@media(max-width:820px){#hero3d{left:0;width:100%;top:0;height:100%}}
body.loaded #hero3d.on{opacity:1}
.hero>*:not(#hero3d):not(.glow){position:relative;z-index:1}
/* Nuit du 10 au 11 septembre 2026. La règle ci-dessus, de spécificité (1,2,0), rendait aussi le
   bloc signature relatif au-dessus de 820 pixels : il redevenait un bloc pleine largeur, remonté
   de 110 pixels, posé sur le bouton « Demander l'audit gratuit », qui ne répondait plus au clic
   que sur ses derniers pixels. Il reprend ici sa position absolue, en bas à droite. */
@media(min-width:821px){.hero>.meta:not(#hero3d):not(.glow){position:absolute;z-index:1}}
/* ---------- Marquee ---------- */
.marquee{
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  overflow:hidden;padding:38px 0;background:rgba(15,23,42,.5);
}
.marquee-track{display:flex;align-items:center;width:max-content;animation:scroll 22s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee span{
  font-family:var(--title);font-weight:700;
  font-size:clamp(1.6rem,3vw,2.6rem);
  line-height:1;letter-spacing:-.01em;text-transform:uppercase;
  color:var(--white);padding:0 44px;white-space:nowrap;
}
@keyframes scroll{to{transform:translateX(-50%)}}

/* ---------- Sections ---------- */
section{padding:40px 5vw}
.statement{
  font-family:var(--title);font-weight:500;
  font-size:clamp(1.7rem,4vw,3.2rem);
  line-height:1.2;letter-spacing:-.02em;color:var(--white);max-width:1000px;
}
.statement em{font-style:normal;color:var(--indigo-light)}
.two-col{
  display:grid;grid-template-columns:1fr 1fr;gap:60px;margin-top:60px;
  color:var(--slate-light);font-size:1rem;
}
.two-col p{max-width:440px}
.two-col .signature{
  font-family:var(--title);color:var(--cloud);font-size:1.1rem;margin-top:24px;
}
@media(max-width:820px){.two-col{grid-template-columns:1fr}}

/* ---------- Reveal ---------- */
.reveal{transition:opacity .8s ease,transform .8s ease}
.js .reveal{opacity:0;transform:translateY(40px)}
.reveal.visible{opacity:1;transform:none}

/* ---------- Stats ---------- */
.stats-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:16px;margin-top:54px;
}
.stat-card{
  background:rgba(15,23,42,.7);border:1px solid var(--line);
  border-radius:20px;padding:34px 28px;position:relative;overflow:hidden;
  transition:transform .35s,border-color .35s;
}
.stat-card::before{
  content:attr(data-idx);position:absolute;top:22px;right:24px;
  font-family:var(--title);font-size:.75rem;color:var(--slate);letter-spacing:.15em;
}
.stat-card::after{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:0;
  background:linear-gradient(90deg,var(--indigo),var(--orange));transition:width .5s;
}
.stat-card:hover{transform:translateY(-6px);border-color:var(--indigo)}
.stat-card:hover::after{width:100%}
.stat-card .big{
  font-family:var(--title);font-weight:700;
  font-size:clamp(2.2rem,4vw,3.2rem);color:var(--white);line-height:1;
  white-space:nowrap;
}
.stat-card .big i{font-style:normal;color:var(--orange);font-size:.5em}
.stat-card p{margin-top:14px;color:var(--slate-light);font-size:.92rem}

/* ---------- Services ---------- */
.services-intro{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap;margin-bottom:70px}
.services-intro h2{
  font-family:var(--title);font-weight:700;
  font-size:clamp(2.6rem,6vw,5rem);letter-spacing:-.03em;color:var(--white);line-height:1.05;
}
/* Le titre monte à 5rem et son espace de descendante vaut environ 1rem,
   celui du paragraphe un cinquième. Alignés par le bas de leur boîte, les
   deux textes ne le sont pas optiquement : le paragraphe est remonté pour
   que sa dernière ligne s'aligne sur celle du titre. Corrigé le 11 septembre 2026. */
.services-intro p{max-width:380px;color:var(--slate-light);margin-bottom:.55rem}
/* Sommaire des deux domaines */
.domains-summary{
  display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin:0 0 90px;
}
.domain-card{
  display:block;text-decoration:none;position:relative;
  padding:34px 32px 30px;border-radius:20px;
  border:1px solid var(--line);background:rgba(255,255,255,.02);
  transition:border-color .35s ease,background .35s ease,transform .35s ease;
}
.domain-card:hover{border-color:rgba(129,140,248,.55);background:rgba(79,70,229,.07);transform:translateY(-3px)}
.domain-card .dc-num{
  font-family:var(--title);font-weight:700;font-size:.82rem;letter-spacing:.18em;
  color:var(--indigo-light);
}
.domain-card h3{
  margin:14px 0 12px;font-family:var(--title);font-weight:700;
  font-size:clamp(1.25rem,2.1vw,1.7rem);line-height:1.15;letter-spacing:-.02em;color:var(--white);
}
.domain-card p{color:var(--slate-light);font-size:.95rem;margin-bottom:18px}
.domain-card .dc-meta{
  display:inline-block;font-size:.82rem;letter-spacing:.04em;color:var(--slate);
  border-top:1px solid var(--line);padding-top:14px;width:100%;
}
.domain-card::after{
  content:"↓";position:absolute;top:30px;right:30px;
  color:var(--slate);font-size:1rem;transition:color .35s ease,transform .35s ease;
}
.domain-card:hover::after{color:var(--indigo-light);transform:translateY(4px)}

/* Blocs de domaine */
.domain-block{
  position:relative;padding:46px 34px 10px;margin-bottom:56px;
  border:1px solid var(--line);border-radius:22px;
  background:linear-gradient(180deg,rgba(79,70,229,.09),rgba(79,70,229,0) 55%);
}
.domain-block.alt{
  background:linear-gradient(180deg,rgba(129,140,248,.09),rgba(129,140,248,0) 55%);
}
.domain-block:last-child{margin-bottom:0}

/* En-têtes de groupes de services */
.group-head{
  display:grid;grid-template-columns:auto 1fr;gap:6px 22px;align-items:center;
  margin:0 0 26px;padding:0 0 24px;border-bottom:1px solid var(--line);
}
.group-head .g-num{
  grid-row:span 2;align-self:center;
  font-family:var(--title);font-weight:700;line-height:1;
  font-size:clamp(2rem,3.6vw,2.9rem);letter-spacing:-.03em;
  color:transparent;-webkit-text-stroke:1.2px var(--indigo-light);
}
.domain-block.alt .group-head .g-num{-webkit-text-stroke:1.4px rgba(129,140,248,.85)}
.group-head .g-label{
  font-family:var(--title);font-weight:700;
  font-size:clamp(1.35rem,2.8vw,2.2rem);letter-spacing:-.025em;color:var(--white);line-height:1.1;
}
.group-head .g-note{font-size:.88rem;color:var(--slate-light);max-width:520px}
@media(max-width:820px){
  .domains-summary{grid-template-columns:1fr;gap:16px;margin-bottom:60px}
  .domain-block{padding:34px 20px 8px;margin-bottom:40px}
  .group-head{grid-template-columns:1fr;gap:10px}
  .group-head .g-num{grid-row:auto}
}
.service{border-top:1px solid var(--line);overflow:hidden}
.service:last-of-type{border-bottom:1px solid var(--line)}
.service-head{
  display:grid;grid-template-columns:70px 1fr auto 40px;align-items:center;gap:20px;
  padding:32px 8px;cursor:pointer;transition:padding .3s,background .3s;
}
.service-head:hover{padding-left:22px;background:rgba(49,46,129,.08)}
.service-head .num{
  font-family:var(--title);font-size:.85rem;color:var(--slate-light);letter-spacing:.1em;
}
.service-head h3{
  font-family:var(--title);font-weight:500;
  font-size:clamp(1.4rem,3.2vw,2.4rem);color:var(--cloud);letter-spacing:-.02em;
  transition:color .3s,transform .3s;
}
.service-head:hover h3{color:var(--orange);transform:translateX(6px)}
.service-head .price{
  font-family:var(--title);font-size:.92rem;color:var(--slate-light);white-space:nowrap;
  border:1px solid var(--line);padding:8px 18px;border-radius:999px;
  transition:border-color .3s,color .3s;
}
.service-head:hover .price{border-color:var(--orange);color:var(--cloud)}
.service-head .plus{
  font-family:var(--title);font-size:1.6rem;color:var(--indigo-light);
  transition:transform .35s;text-align:center;
}
.service.open .plus{transform:rotate(45deg)}
.service-body{transition:max-height .5s ease;overflow:hidden}
.js .service-body{max-height:0}
.ouverture-instantanee .service-body{transition:none!important}
.service.open .service-body{max-height:650px}
.service-body-inner{
  padding:6px 8px 44px 90px;display:grid;grid-template-columns:1.2fr 1fr;gap:40px;
}
@media(max-width:820px){
  .service-head{grid-template-columns:1fr auto 30px}
  .service-head .num{display:none}
  .service-body-inner{grid-template-columns:1fr;padding-left:8px}
}
.service-body p{color:var(--slate-light);max-width:520px}
.service-body ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.service-body li{
  color:var(--cloud);font-size:.95rem;padding-left:22px;position:relative;
}
.service-body li::before{content:"✦";position:absolute;left:0;color:var(--orange);font-size:.7rem;top:5px}
/* ---------- Outils ---------- */
.tools{display:flex;flex-wrap:wrap;gap:14px;margin-top:60px}
.tool{
  font-family:var(--title);font-weight:500;font-size:.95rem;
  border:1px solid rgba(129,140,248,.25);border-radius:999px;
  padding:12px 28px;color:var(--cloud);
  transition:background .3s,color .3s,border-color .3s,transform .3s;
}
.tool:hover{background:var(--indigo);border-color:var(--indigo);color:#fff;transform:translateY(-3px)}
.tools-note{margin-top:22px;font-size:.92rem;color:var(--slate)}

/* ---------- Méthode ---------- */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin-top:54px}
.step{
  background:rgba(15,23,42,.7);border:1px solid var(--line);
  border-radius:20px;padding:44px 32px;position:relative;overflow:hidden;
  transition:transform .35s,border-color .35s;
}
.step .ghost{
  position:absolute;right:-10px;bottom:-30px;
  font-family:var(--title);font-weight:700;font-size:9rem;line-height:1;
  color:rgba(129,140,248,.06);pointer-events:none;
  transition:color .4s,transform .4s;
}
.step:hover{transform:translateY(-6px);border-color:var(--orange)}
.step:hover .ghost{color:rgba(246,146,76,.1);transform:translateY(-8px)}
.step .num{
  font-family:var(--title);font-weight:700;font-size:.8rem;
  color:var(--indigo-light);letter-spacing:.2em;text-transform:uppercase;
}
.step h3{
  font-family:var(--title);font-weight:700;font-size:1.6rem;
  color:var(--white);margin:18px 0 14px;
}
.step p{color:var(--slate-light);font-size:.95rem;position:relative;z-index:1}
.step .free{
  position:absolute;top:26px;right:26px;z-index:1;
  font-family:var(--title);font-size:.72rem;font-weight:700;letter-spacing:.08em;
  background:var(--orange);color:var(--ink);padding:6px 14px;border-radius:999px;
}

/* ---------- Footer ---------- */
footer{
  padding:130px 5vw 40px;background:var(--ink);
  border-top:1px solid var(--line);position:relative;overflow:hidden;
}
.avail{
  display:inline-flex;align-items:center;gap:10px;
  font-size:.82rem;letter-spacing:.15em;text-transform:uppercase;color:var(--slate-light);
  border:1px solid var(--line);border-radius:999px;padding:10px 22px;margin-bottom:40px;
}
.avail .dot{
  width:8px;height:8px;border-radius:50%;background:var(--orange);
  animation:pulse 1.6s ease-in-out infinite;
}
@keyframes pulse{50%{opacity:.3;transform:scale(.8)}}
footer .big-cta{
  font-family:var(--title);font-weight:700;
  font-size:clamp(3rem,10vw,9rem);letter-spacing:-.03em;line-height:1;
  color:var(--white);text-decoration:none;display:inline-flex;align-items:center;gap:3vw;
  transition:color .3s;
}
footer .big-cta:hover{color:var(--orange)}
footer .big-cta .dot{color:var(--orange)}
footer .big-cta svg{
  width:clamp(40px,7vw,90px);height:auto;flex-shrink:0;
  transition:transform .5s cubic-bezier(.34,1.56,.64,1);
}
footer .big-cta:hover svg{transform:translate(10px,-10px) rotate(45deg)}
.footer-cta{margin-top:54px}
.legal{
  margin-top:70px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;
  color:var(--slate);font-size:.82rem;border-top:1px solid var(--line);padding-top:26px;
}
.legal .clock{color:var(--slate-light);font-variant-numeric:tabular-nums}

/* ---------- Formulaire de contact ---------- */
.contact-grid{margin-top:54px;display:grid;grid-template-columns:1.3fr .7fr;gap:clamp(30px,5vw,80px);align-items:start}
@media(max-width:820px){.contact-grid{grid-template-columns:1fr}}
.cform{display:flex;flex-direction:column;gap:18px;max-width:640px}
.cform .hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:560px){.frow{grid-template-columns:1fr}}
.cform label{display:flex;flex-direction:column;gap:8px}
.cform label>span{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--slate-light)}
.cform input,.cform textarea{
  font-family:var(--body);font-size:1rem;color:var(--cloud);width:100%;
  background:rgba(129,140,248,.05);border:1px solid var(--line);border-radius:12px;
  padding:14px 16px;transition:border-color .3s,background .3s;resize:vertical;
}
.cform input::placeholder,.cform textarea::placeholder{color:var(--slate)}
.cform input:focus,.cform textarea:focus{border-color:var(--indigo-light);background:rgba(79,70,229,.12)}
.cform input:focus-visible,.cform textarea:focus-visible{outline:2px solid var(--indigo-light);outline-offset:2px}
.cform button.btn-primary{cursor:pointer;align-self:flex-start;margin-top:6px}
.cform button[disabled]{opacity:.55;cursor:progress}
.fnote{font-size:.8rem;color:var(--slate);line-height:1.5}
.fmsg{font-size:.95rem;min-height:1.3em;font-weight:500}
.fmsg.ok{color:var(--orange)}
.fmsg.ko{color:#F87171}
.cdirect{border-left:1px solid var(--line);padding-left:clamp(20px,3vw,44px)}
@media(max-width:820px){.cdirect{border-left:none;padding-left:0;border-top:1px solid var(--line);padding-top:34px;margin-top:10px}}
.clbl{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--slate-light);margin-bottom:16px}
.cline{display:block;color:var(--cloud);text-decoration:none;font-size:1.02rem;padding:12px 0;border-bottom:1px solid var(--line);transition:color .3s}
.cline:hover{color:var(--orange)}
.cprivacy{margin-top:22px;font-size:.78rem;color:var(--slate);line-height:1.55}

/* ---------- Pages interieures ---------- */
.page-head{padding:150px 5vw 60px;background:var(--ink-deep);position:relative}
.page-head h1{font-family:var(--title);font-weight:700;letter-spacing:-.03em;line-height:1.04;
  font-size:clamp(2.6rem,6.5vw,5.2rem);color:var(--white);max-width:18ch}
.page-head h1 .accent{color:var(--orange)}
.page-head .lede{margin-top:26px;max-width:60ch;color:var(--slate-light);font-size:1.05rem}
.portrait-head .portrait-bloc{display:flex;align-items:flex-start;justify-content:space-between;gap:48px}
.portrait-head .portrait-texte{min-width:0;flex:1 1 auto}
.portrait-head .portrait{flex:0 0 auto;width:220px;height:220px;border-radius:20px;object-fit:cover;
  border:1px solid var(--line);box-shadow:0 18px 40px rgba(0,0,0,.45)}
@media (max-width:820px){
  .portrait-head .portrait-bloc{flex-direction:column-reverse;align-items:flex-start;gap:28px}
  .portrait-head .portrait{width:132px;height:132px;border-radius:16px}
}
.faq-wrap{padding:0 5vw 40px;background:var(--ink-deep)}
.faq-list{display:grid;gap:2px;max-width:1000px;border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line);padding:34px 0}
.faq-item h2{font-family:var(--title);font-weight:500;font-size:clamp(1.15rem,2.2vw,1.5rem);
  color:var(--white);letter-spacing:-.01em;line-height:1.3;display:flex;gap:18px}
.faq-item h2 .n{color:var(--indigo-light);font-size:.8rem;font-weight:700;letter-spacing:.1em;
  padding-top:.55em;flex-shrink:0;font-variant-numeric:tabular-nums}
.faq-item p{margin-top:14px;margin-left:calc(18px + 2.2ch);color:var(--cloud);opacity:.82;max-width:72ch}
@media(max-width:560px){.faq-item p{margin-left:0}}
.faq-item p strong{color:var(--white);opacity:1;font-weight:500}
.faq-item p a{color:var(--indigo-light);text-decoration:none;border-bottom:1px solid var(--line);
  transition:color .3s,border-color .3s}
.faq-item p a:hover{color:var(--orange);border-color:var(--orange)}
.faq-item p a:focus-visible{outline:2px solid var(--indigo-light);outline-offset:3px}
.faq-cta{padding:70px 5vw 110px;background:var(--ink-deep);border-top:1px solid var(--line)}
.faq-cta p{color:var(--slate-light);margin:34px 0 26px;max-width:56ch}
footer.slim{padding:48px 5vw 40px}
footer.slim .legal{margin-top:0}

/* ---------- Liens du pied de page ---------- */
.legal a{color:var(--slate-light);text-decoration:none;border-bottom:1px solid var(--line);transition:color .3s}
.legal a:hover{color:var(--orange)}

/* ---------- Reseaux sociaux ---------- */
/* Pastilles aux couleurs officielles des marques, glyphes blancs.
   Les SVG sont en ligne : la Content-Security-Policy interdit toute image tierce. */
.social{display:flex;gap:12px;flex-wrap:wrap;margin-top:70px}
.social + .legal{margin-top:26px}
footer.slim .social{margin-top:0}
footer.slim .social + .legal{margin-top:26px}
.social a{
  width:42px;height:42px;flex-shrink:0;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1),filter .3s,box-shadow .3s;
}
.social a:hover{transform:translateY(-3px);filter:brightness(1.12);box-shadow:0 10px 22px rgba(0,0,0,.45)}
.social a:focus-visible{outline:2px solid var(--indigo-light);outline-offset:3px}
.social svg{display:block}
.social .fb{background:#1877F2}
.social .li{background:#0A66C2}
.social .ig{background:radial-gradient(circle at 28% 106%,#FDF497 0%,#FDF497 5%,#FD5949 45%,#D6249F 60%,#285AEB 90%)}
@media(prefers-reduced-motion:reduce){
  .social a{transition:filter .3s,box-shadow .3s}
  .social a:hover{transform:none}
}

/* ---------- Pages de texte long ---------- */
.prose{padding:0 5vw 40px;background:var(--ink-deep);max-width:900px}
.prose h2{font-family:var(--title);font-weight:500;color:var(--white);letter-spacing:-.01em;
  font-size:clamp(1.2rem,2.4vw,1.6rem);margin:52px 0 16px;padding-top:30px;border-top:1px solid var(--line)}
.prose h2:first-child{border-top:none;padding-top:0;margin-top:0}
.prose p{color:var(--cloud);opacity:.82;margin-bottom:14px;max-width:72ch}
.prose ol,.prose ul{color:var(--cloud);opacity:.82;margin:0 0 14px 22px;max-width:72ch}
.prose li{margin-bottom:9px}
.prose strong{color:var(--white);opacity:1;font-weight:500}
.prose table{width:100%;border-collapse:collapse;margin:18px 0 22px;font-size:.94rem}
.prose th{text-align:left;color:var(--slate-light);font-weight:500;font-size:.74rem;letter-spacing:.14em;
  text-transform:uppercase;padding:0 14px 10px 0;border-bottom:1px solid var(--line);vertical-align:bottom}
.prose td{color:var(--cloud);opacity:.82;padding:13px 14px 13px 0;border-bottom:1px solid var(--line);vertical-align:top}
.prose .maj{color:var(--slate-light);opacity:1;font-size:.85rem;margin-top:40px}
.prose a{color:var(--indigo-light);text-decoration:none;border-bottom:1px solid rgba(129,140,248,.4);transition:color .3s,border-color .3s}
.prose a:hover{color:var(--orange);border-color:var(--orange)}

/* ---------- Page 404 ---------- */
.err{min-height:72vh;display:flex;flex-direction:column;justify-content:center;padding:120px 5vw 80px;background:var(--ink-deep)}
.err .code{font-family:var(--title);font-weight:700;font-size:clamp(5rem,18vw,13rem);line-height:1;
  color:var(--indigo-light);letter-spacing:-.04em}
.err h1{font-family:var(--title);font-weight:700;letter-spacing:-.03em;line-height:1.05;
  font-size:clamp(2rem,5vw,3.6rem);color:var(--white);margin-top:14px;max-width:20ch}
.err p{color:var(--slate-light);margin:22px 0 34px;max-width:56ch}
.err .links{display:flex;flex-wrap:wrap;gap:14px}

/* ---------- Respect du reglage systeme de reduction des animations ---------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  .grain{display:none}
  .marquee-track{transform:none}
}

/* ====================================================================
   Pages « Concrètement », ajoutées le 10 septembre 2026
   --------------------------------------------------------------------
   Deux ensembles, et une raison de les tenir séparés.

   1. La constellation animée (.flux*), pilotée par schema-cas-usage.js.
      Ces noms de classes sont préfixés flux-, ils ne peuvent croiser
      personne.

   2. Le tableau des vingt-quatre stations. Ses noms de classes viennent
      d'une maquette autonome et sont très courts : doc, zone, st, p,
      leg, cc. Laissés à la racine, ils entreraient en collision avec le
      reste du site le jour où quelqu'un écrit une classe .p ou .zone.
      Ils sont donc tous cantonnés sous .tableau-large, qui n'existe que
      sur ces pages. Ne jamais en sortir une règle.

   Les deux règles sur .faq-list et .faq-item sont cantonnées à
   body.cas-usage : sans cela, la foire aux questions du site
   s'élargirait elle aussi.
   ==================================================================== */

/* ---------- Réglages de page ---------- */
body.cas-usage .faq-wrap .faq-list{max-width:1300px;grid-template-columns:minmax(0,1fr)}
body.cas-usage .faq-item{min-width:0}
body.cas-usage .faq-cta p{max-width:74ch}

/* ---------- Constellation animée ---------- */
.flux{margin:26px 0 0;margin-left:calc(18px + 2.2ch);max-width:none}
@media(max-width:560px){.flux{margin-left:0}}
.flux-scene{position:relative;margin-top:6px}
.flux-toile{display:block;width:100%;height:clamp(340px,42vw,520px);
  border:1px solid var(--line);border-radius:20px;background:var(--ink-deep)}
.flux-panneau{margin-top:18px;min-height:96px}
.flux-jalon{font-family:var(--title);font-weight:700;font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--indigo-light)}
.flux-legende{margin-top:7px;font-size:.98rem;line-height:1.55;color:var(--cloud);opacity:.88;max-width:70ch}
.flux-stations{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:7px}
.flux-stations li{display:flex;align-items:center;gap:8px;font-size:.8rem;color:var(--slate-light);
  border:1px solid var(--line);border-radius:10px;padding:7px 11px;background:rgba(129,140,248,.04)}
.flux-sn{font-family:var(--title);font-weight:700;font-size:.62rem;letter-spacing:.1em;color:var(--indigo-light)}
.flux-p{font-family:var(--title);font-weight:700;font-size:.56rem;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;
  padding:2px 7px;border-radius:99px}
.flux-p.ad{background:#4F46E5;color:#fff}
.flux-p.cl{border:1px solid rgba(129,140,248,.55);color:#A5B4FC}
.flux-p.mk{border:1px solid rgba(148,163,184,.5);color:#94A3B8}
.flux-p.ot{border:1px dashed rgba(100,116,139,.55);color:#7C8AA3}
.flux-p.vs{background:#F6924C;color:#20130A}

.flux-compte{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-top:20px}
.flux-cc{border:1px solid var(--line);border-radius:14px;padding:13px 14px;background:rgba(129,140,248,.04);
  transition:border-color .35s ease,background .35s ease}
.flux-cc.fort{border-color:rgba(129,140,248,.45);background:linear-gradient(180deg,rgba(79,70,229,.18),rgba(79,70,229,.04))}
.flux-cc.hum{border-color:rgba(246,146,76,.4);background:linear-gradient(180deg,rgba(246,146,76,.13),rgba(246,146,76,.03))}
.flux-cn{font-family:var(--title);font-weight:700;font-size:1.7rem;line-height:1;color:#fff;letter-spacing:-.02em}
/* « / 24 » passe au gris clair le 10 septembre 2026 : en gris ardoise, il tombait à 3,5 pour 1 sur le fond du compteur. */
.flux-cn em{font-style:normal;font-size:.8rem;color:var(--slate-light);font-weight:500;margin-left:5px}
.flux-cq{margin-top:7px;font-family:var(--title);font-weight:700;font-size:.62rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--indigo-light)}
.flux-cc.hum .flux-cq{color:var(--orange)}
@keyframes flux-bat{0%{transform:translateY(0)}30%{transform:translateY(-4px)}100%{transform:translateY(0)}}
.flux-cc.bat{animation:flux-bat .5s ease}
.flux-cc.bat .flux-cn{color:#fff}
@media(max-width:700px){.flux-compte{grid-template-columns:repeat(2,1fr)}}

.flux-commandes{display:flex;gap:8px;margin-top:18px;flex-wrap:wrap}
.flux-btn{font-family:var(--body);font-size:.78rem;color:var(--slate-light);cursor:pointer;
  background:transparent;border:1px solid var(--line);border-radius:99px;padding:8px 16px;min-height:36px;
  transition:color .2s ease,border-color .2s ease}
.flux-btn:hover{color:var(--cloud);border-color:rgba(129,140,248,.4)}
.flux-btn:focus-visible{outline:2px solid var(--indigo-light);outline-offset:3px}
.flux figcaption{margin-top:18px;font-size:.82rem;line-height:1.5;color:var(--slate);
  border-left:2px solid var(--line);padding-left:12px}
.flux-anime .flux-etapes{position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;margin:0;padding:0}

/* ---------- Tableau des vingt-quatre stations ----------
   Tout ce qui suit est cantonné sous .tableau-large. */
.tableau-large{margin-top:22px;margin-left:calc(18px + 2.2ch);overflow-x:auto;
  border:1px solid var(--line);border-radius:20px;padding:26px 26px 30px;
  background:radial-gradient(120% 90% at 20% 0%, #101A33 0%, #0B1224 50%, #0A1120 100%)}
@media(max-width:560px){.tableau-large{margin-left:0;padding:18px}}

/* Le tableau vit à l'intérieur d'un .faq-item, dont la règle .faq-item p
   impose une marge gauche, une largeur et une opacité. Remise à zéro ici
   pour tous les paragraphes du tableau, une bonne fois. */
.tableau-large p{margin:0;max-width:none;opacity:1}

.tableau-large .doc{width:100%;min-width:1040px;background:none}
.tableau-large .zone{display:grid;grid-template-columns:174px minmax(0,1fr) 226px;gap:18px;align-items:start;
  padding:20px 0;border-top:1px solid rgba(129,140,248,.12)}
.tableau-large .zone:first-child{border-top:none}
.tableau-large .znum{font-family:var(--title);font-weight:700;font-size:11px;letter-spacing:.16em;color:#818CF8}
.tableau-large .ztitre{font-family:var(--title);font-weight:700;font-size:23px;line-height:1.12;
  margin-top:7px;color:#fff;letter-spacing:-.01em}
.tableau-large .zsous{margin-top:7px;font-size:12.5px;line-height:1.45;color:#8E9AB5}

.tableau-large .stations{display:flex;flex-wrap:wrap;gap:9px}
.tableau-large .st{flex:1 1 214px;min-width:0;border:1px solid rgba(129,140,248,.18);border-radius:12px;
  padding:12px 13px;background:rgba(129,140,248,.045)}
.tableau-large .st i{font-style:normal;font-family:var(--title);font-weight:700;font-size:10.5px;
  letter-spacing:.12em;color:#818CF8;display:block}
.tableau-large .st b{display:block;margin-top:6px;font-family:var(--title);font-weight:500;
  font-size:14.5px;line-height:1.25;color:#fff}
.tableau-large .st>span{display:block;margin-top:5px;font-size:12.2px;line-height:1.45;color:#8E9AB5}
.tableau-large .st.cle{border-color:rgba(129,140,248,.55);
  background:linear-gradient(180deg,rgba(79,70,229,.22),rgba(79,70,229,.07));
  box-shadow:0 0 0 1px rgba(129,140,248,.10),0 10px 34px -18px rgba(79,70,229,.9)}
.tableau-large .st.cle i{color:#A5B4FC}
.tableau-large .st.regle{border-style:dashed}
.tableau-large .st.humain{border-color:rgba(246,146,76,.5);
  background:linear-gradient(180deg,rgba(246,146,76,.16),rgba(246,146,76,.05))}
.tableau-large .st.humain i{color:#F6924C}

.tableau-large .sortie{border:1px solid rgba(246,146,76,.42);border-radius:12px;padding:12px 13px;
  background:rgba(246,146,76,.07)}
.tableau-large .sortie i{font-style:normal;font-family:var(--title);font-weight:700;font-size:10.5px;
  letter-spacing:.12em;color:#F6924C;display:block}
.tableau-large .sortie b{display:block;margin-top:6px;font-family:var(--title);font-weight:500;
  font-size:14px;line-height:1.25;color:#FFE6D2}
.tableau-large .sortie>span{display:block;margin-top:5px;font-size:12px;line-height:1.45;color:#C79B7C}
.tableau-large .vide{border:1px dashed rgba(129,140,248,.10);border-radius:12px;height:100%;min-height:44px}

.tableau-large .qui{margin-top:9px;margin-left:0;display:flex;flex-wrap:wrap;gap:5px;max-width:none}
.tableau-large .p{font-family:var(--title);font-weight:700;font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;padding:3px 8px;border-radius:99px;white-space:nowrap}
.tableau-large .p.ad{background:#4F46E5;color:#fff}
.tableau-large .p.cl{border:1px solid rgba(129,140,248,.55);color:#A5B4FC}
.tableau-large .p.mk{border:1px solid rgba(100,116,139,.6);color:#94A3B8}
.tableau-large .p.ot{border:1px dashed rgba(100,116,139,.55);color:#7C8AA3}
.tableau-large .p.vs{background:#F6924C;color:#20130A}

.tableau-large .compte{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin:30px 0 4px}
.tableau-large .cc{border:1px solid rgba(129,140,248,.16);border-radius:14px;padding:16px 16px 15px;
  background:rgba(129,140,248,.04)}
.tableau-large .cc.fort{border-color:rgba(129,140,248,.5);
  background:linear-gradient(180deg,rgba(79,70,229,.2),rgba(79,70,229,.05))}
.tableau-large .cc.hum{border-color:rgba(246,146,76,.45);
  background:linear-gradient(180deg,rgba(246,146,76,.14),rgba(246,146,76,.04))}
.tableau-large .cc .n{font-family:var(--title);font-weight:700;font-size:34px;line-height:1;color:#fff;
  letter-spacing:-.02em;padding-top:0;flex-shrink:0}
.tableau-large .cc .n em{font-style:normal;font-size:15px;color:#8E9AB5;font-weight:500}
.tableau-large .cc .q{margin-top:9px;margin-left:0;font-family:var(--title);font-weight:700;font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;color:#818CF8;max-width:none}
.tableau-large .cc.hum .q{color:#F6924C}
.tableau-large .cc .t{margin-top:8px;margin-left:0;font-size:12.4px;line-height:1.5;color:#8E9AB5;max-width:none}

.tableau-large .pied{margin-top:34px;padding-top:24px;border-top:1px solid rgba(129,140,248,.16);
  display:grid;grid-template-columns:1fr 1fr 1fr;gap:26px}
.tableau-large .leg{font-size:12.5px;line-height:1.55;color:#8E9AB5;margin:0;max-width:none}
.tableau-large .leg b{display:block;font-family:var(--title);font-weight:700;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:#818CF8;margin-bottom:7px}
.tableau-large .puce{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:7px;vertical-align:1px}
.tableau-large .mention{margin:26px 0 0;border-left:2px solid rgba(129,140,248,.28);padding-left:14px;
  font-size:13px;line-height:1.55;color:#8E9AB5;max-width:100ch}

/* ---------- Bibliothèque : la page d'entrée et le bloc de découverte ---------- */
/* Une carte close plutôt qu'une case de tableau : la grille doit tenir
   debout avec une seule carte comme avec vingt. */
.cas-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:18px;max-width:1300px}
/* Quatre cartes depuis le 12 septembre 2026. Entre 1030 et 1390 pixels, la
   grille tenait trois cartes par ligne et laissait la quatrième seule en
   dessous, sur les portables 1280 et 1366, les plus courants. Deux colonnes
   dans cette bande : les cartes s'y rangent deux par deux. */
@media (min-width:1030px) and (max-width:1399px){
  .cas-grille{grid-template-columns:repeat(2,1fr)}
}
.cas-carte{display:block;text-decoration:none;border:1px solid var(--line);border-radius:18px;
  padding:26px 24px 28px;background:rgba(129,140,248,.035);
  transition:border-color .35s ease,background .35s ease}
.cas-carte:hover{border-color:rgba(129,140,248,.42);background:rgba(129,140,248,.07)}
.cas-carte:focus-visible{outline:2px solid var(--indigo-light);outline-offset:3px}
.cas-carte .fam{font-family:var(--title);font-weight:700;font-size:.62rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--indigo-light)}
.cas-carte h2,.cas-carte h3{font-family:var(--title);font-weight:500;font-size:1.18rem;line-height:1.25;
  color:var(--white);margin-top:12px;letter-spacing:-.01em}
.cas-carte p{margin-top:10px;font-size:.9rem;line-height:1.55;color:var(--slate-light)}
.cas-carte .fleche{display:inline-block;margin-top:16px;color:var(--orange);font-size:.85rem}
.cas-carte.bientot{opacity:.55;pointer-events:none}
.cas-carte.bientot .fleche{color:var(--slate)}

/* Le bloc de découverte de l'accueil reprend le rythme des autres sections
   de la page : ni fond ni filet propres, le .rule fait la séparation. */
.decouvrir .intro{color:var(--slate-light);max-width:64ch;margin-top:26px}
.decouvrir .cas-grille{margin-top:40px}
.decouvrir .suite{margin-top:26px;font-size:.92rem;color:var(--slate);max-width:92ch}
.decouvrir .suite a{color:var(--indigo-light);text-decoration:none;
  border-bottom:1px solid var(--line);transition:color .3s,border-color .3s}
.decouvrir .suite a:hover{color:var(--orange);border-color:var(--orange)}
.decouvrir .suite a:focus-visible{outline:2px solid var(--indigo-light);outline-offset:3px}

/* ---------- Téléphone et tablette, ajouté le 10 septembre 2026 ----------
   Relevé par Xavier sur la page des devis en ligne. Sur téléphone, le
   tableau des stations restait large de 1040 pixels dans une fenêtre de
   350, à faire défiler de côté sans que rien ne l'annonce, et sur tablette
   il en cachait encore plus de 400. Le schéma, lui, étalait ses cinq
   compteurs sur plus de 500 pixels de haut, sous des stations écrasées par
   leurs pastilles. Rien ne change sur un écran assez large pour le tableau. */

/* Le tableau se replie selon la largeur dont il dispose vraiment, et non
   selon celle de l'écran : c'est la seule mesure qui ne se trompe pas. */
.tableau-large{container-type:inline-size}
@container (max-width:1039px){
  .tableau-large .doc{min-width:0}
  .tableau-large .zone{grid-template-columns:minmax(0,1fr);gap:12px}
  .tableau-large .vide{display:none}
  .tableau-large .compte{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
  .tableau-large .pied{grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px}
}
@container (max-width:560px){
  .tableau-large .zone{gap:10px;padding:16px 0}
  .tableau-large .ztitre{font-size:20px}
  .tableau-large .zsous{margin-top:4px}
  .tableau-large .stations{gap:7px}
  .tableau-large .st{flex:1 1 100%}
  /* Plus serré : le numéro sur la ligne du titre, des marges réduites.
     Vingt-quatre stations en une colonne restent longues, elles ne doivent
     pas l'être davantage. */
  .tableau-large .st,.tableau-large .sortie{padding:10px 12px;line-height:1.3}
  .tableau-large .st i,.tableau-large .sortie i{display:inline;margin-right:7px}
  .tableau-large .st b,.tableau-large .sortie b{display:inline;margin-top:0}
  .tableau-large .st>span,.tableau-large .sortie>span{margin-top:4px}
  .tableau-large .qui{margin-top:7px}
  .tableau-large .compte{grid-template-columns:minmax(0,1fr);gap:8px;margin-top:24px}
  .tableau-large .cc{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:14px;
    align-items:baseline;padding:14px}
  .tableau-large .cc .n{grid-row:1 / span 2;font-size:28px}
  .tableau-large .cc .q{grid-column:2;margin-top:0}
  .tableau-large .cc .t{grid-column:2;margin-top:6px}
  .tableau-large .pied{grid-template-columns:minmax(0,1fr);gap:18px;margin-top:26px}
}

@media(max-width:700px){
  .flux,.tableau-large{margin-left:0}
  .tableau-large{padding:16px 14px 20px;border-radius:16px}

  /* Constellation : le panneau garde sa hauteur d'une zone à l'autre, pour
     que les compteurs ne sautent pas pendant la séquence. */
  .flux-panneau{min-height:300px}
  .flux-stations li{display:block;line-height:1.5;padding:8px 11px}
  .flux-stations li .flux-sn{margin-right:7px}
  .flux-stations li .flux-p{display:inline-block;margin:5px 0 0 6px;vertical-align:1px}
  .flux-compte{grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;margin-top:14px}
  .flux-cc{padding:9px 5px 8px;border-radius:10px;text-align:center}
  .flux-cn{font-size:1.25rem}
  .flux-cn em{display:block;margin:3px 0 0;font-size:.6rem}
  .flux-cq{margin-top:6px;font-size:.6rem;line-height:1.2;letter-spacing:.03em;overflow-wrap:anywhere}
}

/* Sans JavaScript, ou pour qui a demandé moins de mouvement, la liste du
   schéma s'affiche seule. Elle se lisait d'un bloc, le titre de chaque
   zone collé à sa phrase. Ajouté le même jour. */
.flux-etapes{margin:0;padding:0 0 0 1.2em}
.flux-etapes>li{margin-top:14px}
.flux-etapes>li>b{display:block;font-family:var(--title);color:var(--white)}
.flux-etapes>li>span{display:block;margin-top:4px;color:var(--slate-light)}
.flux-etapes ul{margin:8px 0 0;padding-left:1.1em;color:var(--slate-light);font-size:.9rem}

/* ====================================================================
   Mode clair, ajouté le 10 septembre 2026
   --------------------------------------------------------------------
   Sur la remarque d'un prospect : le site en sombre est difficile à lire.
   Le thème est posé sur la balise racine par theme.js, chargé en tête de
   page. Par défaut il suit le réglage de l'appareil ; le bouton de
   l'en-tête permet de choisir l'autre mode.

   Le principe : le mode sombre garde son dessin. Ce qui y change le même
   jour, chaque point commenté à sa place : le bouton de bascule ; l'en-tête
   qui passe au burger sous 1200 pixels, son panneau qui défile, le bouton de
   contact poussé à droite, logo et bouton qui ne se coupent plus en 320 ;
   sept gris trop pâles remontés ; les tableaux des pages de texte sur
   téléphone ; color-scheme, qui déclare le sombre aux contrôles natifs.
   Le mode clair redéfinit les variables selon leur rôle, pas selon leur nom : --white
   est la couleur des titres, elle devient l'encre ; --ink-deep est le fond
   de page, il devient blanc. Ce qui était écrit en dur est repris plus bas,
   règle par règle.

   Trois couleurs nouvelles, et pourquoi.
   - L'abricot foncé #B95109, même teinte que l'orange de la marque, ajouté
     à la charte le 10 septembre 2026 à la demande de Xavier. L'orange
     #F6924C sur blanc ne donne que 2,3 pour 1, illisible pour un texte ;
     l'abricot foncé donne 4,95 sur blanc et 4,52 sur Nuage. Tout ce qui
     passait par la variable --orange, textes, filets et points, le prend ;
     l'orange de la marque reste tel quel sur les surfaces pleines écrites
     en dur, comme la pastille « Votre équipe » ou l'étiquette « Gratuit ».
     Sur les fonds teintés d'orange, l'abricot foncé tombe à 4,2 pour 1 :
     les libellés y sont en brun #7C2D12.
   - Deux gris de la même famille que le gris ardoise, #334155 pour le texte
     courant et #475569 pour les libellés, parce que le gris ardoise de la
     charte tombe sous le seuil de lecture sur fond Nuage.

   Le schéma animé reste une toile de nuit dans les deux modes : c'est une
   illustration, et ses étoiles n'ont pas de sens sur du blanc. Tout ce qui
   se lit autour, stations, compteurs, tableau, passe en clair.
   ==================================================================== */

:root{color-scheme:dark}
:root[data-theme="clair"]{
  color-scheme:light;
  --ink-deep:#FFFFFF;
  --white:#0F172A;
  --cloud:#1E293B;
  --slate-light:#334155;
  --slate:#475569;
  --indigo-light:#4F46E5;
  --orange:#B95109;
  --line:rgba(15,23,42,.12);
}

/* ---------- Bouton de bascule, dans la navigation ---------- */
.theme-bascule{
  flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  width:30px;height:30px;padding:0;border-radius:999px;cursor:pointer;
  background:transparent;border:1px solid var(--line);color:var(--slate-light);
  transition:color .25s,border-color .25s;
}
.theme-bascule:hover{color:var(--white);border-color:var(--indigo-light)}
.theme-bascule:focus-visible{outline:2px solid var(--indigo-light);outline-offset:2px}
.theme-bascule svg{width:16px;height:16px;display:block;flex-shrink:0}
.theme-bascule .ic-lune{display:none}
[data-theme="clair"] .theme-bascule .ic-lune{display:block}
[data-theme="clair"] .theme-bascule .ic-soleil{display:none}
/* Le libellé en toutes lettres ne paraît que dans le menu du téléphone. */
.theme-bascule .t-clair,.theme-bascule .t-sombre{display:none!important}
@media(max-width:1199px){
  .theme-bascule{width:auto;height:44px;padding:0 18px;margin:14px 0 0;font-family:var(--body);font-size:.8rem}
  .theme-bascule .t-clair{display:inline!important}
  [data-theme="clair"] .theme-bascule .t-clair{display:none!important}
  [data-theme="clair"] .theme-bascule .t-sombre{display:inline!important}
}

/* Sans JavaScript, le thème n'est jamais posé : le bouton ne ferait rien, il ne s'affiche pas. */
html:not([data-theme]) .theme-bascule{display:none}

/* ---------- Mode clair, ce qui était écrit en dur ---------- */
[data-theme="clair"] ::-webkit-scrollbar-thumb{background:#CBD5E1}
[data-theme="clair"] .grain{opacity:.03}
[data-theme="clair"] header{background:rgba(255,255,255,.82)}
@media(max-width:1199px){[data-theme="clair"] header{background:rgba(255,255,255,.96)}}
[data-theme="clair"] .cta-pill{color:#fff}
[data-theme="clair"] .btn-primary{border-color:rgba(79,70,229,.45);background:rgba(79,70,229,.07)}
[data-theme="clair"] .btn-primary:hover{background:#4F46E5;border-color:#4F46E5;color:#fff}
[data-theme="clair"] .btn-primary:hover .arr{color:#fff}
[data-theme="clair"] .btn-ghost{border-bottom-color:rgba(79,70,229,.4)}
[data-theme="clair"] .hero .glow{background:radial-gradient(circle,rgba(79,70,229,.10) 0%,transparent 65%)}
[data-theme="clair"] .marquee{background:#F1F5F9}
[data-theme="clair"] .stat-card,[data-theme="clair"] .step{background:#F8FAFC}
[data-theme="clair"] .step .ghost{color:rgba(79,70,229,.06)}
[data-theme="clair"] .step .free{background:#F6924C;color:#20130A}
[data-theme="clair"] .domain-card{background:#FFFFFF}
[data-theme="clair"] .domain-card:hover{background:rgba(79,70,229,.05)}
[data-theme="clair"] .domain-block{background:linear-gradient(180deg,rgba(79,70,229,.06),rgba(79,70,229,0) 55%)}
[data-theme="clair"] .domain-block.alt{background:linear-gradient(180deg,rgba(79,70,229,.04),rgba(79,70,229,0) 55%)}
[data-theme="clair"] .domain-block.alt .group-head .g-num{-webkit-text-stroke:1.4px rgba(79,70,229,.75)}
[data-theme="clair"] .service-head:hover{background:rgba(79,70,229,.05)}
[data-theme="clair"] .tool{border-color:rgba(79,70,229,.25)}
[data-theme="clair"] footer{background:#F1F5F9}
[data-theme="clair"] .cform input,[data-theme="clair"] .cform textarea{background:#FFFFFF;border-color:rgba(15,23,42,.18)}
[data-theme="clair"] .cform input::placeholder,[data-theme="clair"] .cform textarea::placeholder{color:#64748B}
[data-theme="clair"] .cform input:focus,[data-theme="clair"] .cform textarea:focus{background:#FFFFFF}
[data-theme="clair"] .fmsg.ko{color:#DC2626}
[data-theme="clair"] .portrait-head .portrait{box-shadow:0 14px 34px rgba(15,23,42,.14)}
[data-theme="clair"] .social a:hover{box-shadow:0 10px 22px rgba(15,23,42,.18)}
[data-theme="clair"] .prose a{border-bottom-color:rgba(79,70,229,.35)}

/* Les paragraphes longs étaient éclaircis par une opacité de .82, pensée pour
   le fond noir. Sur blanc, elle ternit aussi les liens qu'ils contiennent,
   qui tombaient à 4,37 pour 1. En clair, la couleur est posée franchement. */
[data-theme="clair"] .faq-item>p,[data-theme="clair"] .prose p,[data-theme="clair"] .prose ol,
[data-theme="clair"] .prose ul,[data-theme="clair"] .prose td,[data-theme="clair"] .flux-legende{opacity:1;color:#334155}

/* ---------- Mode clair, section « Concrètement » ---------- */
[data-theme="clair"] .cas-carte{background:#FFFFFF}
[data-theme="clair"] .cas-carte:hover{border-color:rgba(79,70,229,.42);background:rgba(79,70,229,.04)}
/* La toile reste de nuit, et le reste du schéma se lit sur la page. */
[data-theme="clair"] .flux-toile{background:#0A1120;border-color:#0A1120}
[data-theme="clair"] .flux-stations li{background:#F8FAFC}
[data-theme="clair"] .flux-cc{background:#F8FAFC}
[data-theme="clair"] .flux-cc.fort{border-color:rgba(79,70,229,.45);background:linear-gradient(180deg,rgba(79,70,229,.12),rgba(79,70,229,.03))}
[data-theme="clair"] .flux-cc.hum{border-color:rgba(185,81,9,.4);background:linear-gradient(180deg,rgba(246,146,76,.16),rgba(246,146,76,.04))}
[data-theme="clair"] .flux-cc .flux-cn,[data-theme="clair"] .flux-cc.bat .flux-cn{color:#0F172A}
[data-theme="clair"] .flux-p.cl{border-color:rgba(79,70,229,.5);color:#4338CA}
[data-theme="clair"] .flux-p.mk{border-color:rgba(71,85,105,.45);color:#475569}
[data-theme="clair"] .flux-p.ot{border-color:rgba(71,85,105,.5);color:#475569}
[data-theme="clair"] .flux-btn:hover{border-color:rgba(79,70,229,.4)}

/* Le tableau des stations : cantonné sous .tableau-large, comme ses règles d'origine. */
[data-theme="clair"] .tableau-large{background:#F8FAFC}
[data-theme="clair"] .tableau-large .zone{border-top-color:rgba(15,23,42,.10)}
[data-theme="clair"] .tableau-large .znum,[data-theme="clair"] .tableau-large .st i,
[data-theme="clair"] .tableau-large .cc .q,[data-theme="clair"] .tableau-large .leg b{color:#4F46E5}
[data-theme="clair"] .tableau-large .ztitre,[data-theme="clair"] .tableau-large .st b,
[data-theme="clair"] .tableau-large .cc .n{color:#0F172A}
[data-theme="clair"] .tableau-large .zsous,[data-theme="clair"] .tableau-large .st>span,
[data-theme="clair"] .tableau-large .cc .t,[data-theme="clair"] .tableau-large .leg,
[data-theme="clair"] .tableau-large .mention,[data-theme="clair"] .tableau-large .cc .n em{color:#475569}
[data-theme="clair"] .tableau-large .st{background:#FFFFFF;border-color:rgba(79,70,229,.18)}
[data-theme="clair"] .tableau-large .st.cle{border-color:rgba(79,70,229,.5);
  background:linear-gradient(180deg,rgba(79,70,229,.10),rgba(79,70,229,.03));
  box-shadow:0 0 0 1px rgba(79,70,229,.08),0 10px 30px -20px rgba(79,70,229,.6)}
[data-theme="clair"] .tableau-large .st.cle i{color:#4338CA}
[data-theme="clair"] .tableau-large .st.humain{border-color:rgba(185,81,9,.4);
  background:linear-gradient(180deg,rgba(246,146,76,.14),rgba(246,146,76,.04))}
[data-theme="clair"] .tableau-large .sortie i{color:#B95109}
[data-theme="clair"] .tableau-large .st.humain i,[data-theme="clair"] .tableau-large .cc.hum .q,
[data-theme="clair"] .flux-cc.hum .flux-cq{color:#7C2D12}
[data-theme="clair"] .tableau-large .sortie{border-color:rgba(185,81,9,.38);background:#FFF7F0}
[data-theme="clair"] .tableau-large .sortie b{color:#7C2D12}
[data-theme="clair"] .tableau-large .sortie>span{color:#9A3412}
[data-theme="clair"] .tableau-large .vide{border-color:rgba(15,23,42,.10)}
[data-theme="clair"] .tableau-large .p.cl{border-color:rgba(79,70,229,.5);color:#4338CA}
[data-theme="clair"] .tableau-large .p.mk{border-color:rgba(71,85,105,.45);color:#475569}
[data-theme="clair"] .tableau-large .p.ot{border-color:rgba(71,85,105,.5);color:#475569}
[data-theme="clair"] .tableau-large .cc{background:#FFFFFF;border-color:rgba(79,70,229,.16)}
[data-theme="clair"] .tableau-large .cc.fort{border-color:rgba(79,70,229,.45);background:linear-gradient(180deg,rgba(79,70,229,.12),rgba(79,70,229,.03))}
[data-theme="clair"] .tableau-large .cc.hum{border-color:rgba(185,81,9,.4);background:linear-gradient(180deg,rgba(246,146,76,.16),rgba(246,146,76,.04))}
[data-theme="clair"] .tableau-large .pied{border-top-color:rgba(15,23,42,.10)}
[data-theme="clair"] .tableau-large .mention{border-left-color:rgba(79,70,229,.28)}

/* ---------- Tableaux des pages de texte long, sur téléphone ----------
   Relevé le 10 septembre 2026 : en 320 pixels, le tableau des prestataires
   de la page des données personnelles débordait de 53 pixels. */
@media(max-width:560px){
  .prose table{font-size:.86rem}
  .prose th,.prose td{padding-right:10px;overflow-wrap:break-word}
  .prose th{letter-spacing:.04em}
}

/* ---------- En-tête sur les plus petits téléphones ----------
   Relevé le même jour, défaut antérieur au mode clair : en 320 pixels, le
   logo se coupait en « Aide / Digital » et le bouton en « Parlons- / en ». */
.logo span,.cta-pill{white-space:nowrap}
@media(max-width:380px){
  .logo{gap:8px}
  .logo svg{width:28px;height:28px}
  .logo span{font-size:1.05rem}
  .cta-pill{padding:10px 16px;font-size:.85rem;margin-right:8px}
}

/* ====================================================================
   Corrections de la nuit du 10 au 11 septembre 2026
   --------------------------------------------------------------------
   Après les défauts relevés par Xavier sur le site en ligne, et l'audit
   de comportement qui a suivi. Chaque règle dit ce qu'elle corrige.
   ==================================================================== */

/* Schéma : la ligne qui dit ce que comptent les compteurs. */
.flux-compte-titre{margin:22px 0 0;font-family:var(--title);font-weight:700;font-size:.66rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--slate-light)}
.flux-compte-titre+.flux-compte{margin-top:10px}
/* Schéma : les sorties nommées dans le panneau, en orange comme sur la toile. */
.flux-stations li.flux-sortie{border-color:rgba(246,146,76,.45);background:rgba(246,146,76,.06)}
.flux-stations li.flux-sortie .flux-sn{color:var(--orange)}
[data-theme="clair"] .flux-stations li.flux-sortie{border-color:rgba(185,81,9,.38);background:#FFF7F0;color:#7C2D12}
[data-theme="clair"] .flux-stations li.flux-sortie .flux-sn{color:#7C2D12}
/* Schéma : la toile se parcourt au clavier. */
.flux-toile:focus{outline:none}
.flux-toile:focus-visible{outline:2px solid var(--indigo-light);outline-offset:3px}
/* Liste de repli, sans JavaScript : les zones numérotées comme dans le tableau,
   le nœud du dernier mot sans numéro, et le numéro de chaque station. */
.flux-etapes{list-style:none;padding-left:0;counter-reset:zone}
.flux-etapes>li:not([data-role="humain"]){counter-increment:zone}
.flux-etapes>li:not([data-role="humain"])>b::before{content:"Zone " counter(zone) " · ";color:var(--indigo-light)}
.flux-etapes>li[data-role="humain"]>b{color:var(--orange)}
.flux-etapes ul>li[data-n]::before{content:attr(data-n) " · ";font-weight:700;color:var(--indigo-light)}

/* Liens vers une section : le titre arrive sous la barre, pas dessous. */
[id]{scroll-margin-top:96px}

/* Menu de bureau : la page où l'on est se voit. */
@media(min-width:1200px){
  nav a[aria-current="page"]{color:var(--white)}
  nav a[aria-current="page"]::after{width:100%}
}
/* Menu ouvert : le bouton de contact, invisible, ne prend plus le focus. */
body.nav-open .cta-pill{visibility:hidden}

/* Services sur téléphone : le prix passe sous le titre, la croix reste visible. */
@media(max-width:480px){
  .service-head{grid-template-columns:minmax(0,1fr) 30px;row-gap:10px;padding:26px 4px}
  .service-head h3{grid-column:1;grid-row:1}
  .service-head .price{grid-column:1;grid-row:2;justify-self:start}
  .service-head .plus{grid-column:2;grid-row:1 / span 2;align-self:center}
}
.service-head:focus-visible{outline:2px solid var(--indigo-light);outline-offset:-2px;border-radius:12px}

/* « Lancez-vous. » : le point colle au mot. L'écart de 3vw vaut pour la flèche seulement. */
footer .big-cta .dot{margin-left:-3vw}

/* Le réseau du haut de page sur téléphone et tablette : il passait derrière le
   surtitre et le titre sous 820 pixels, et derrière le paragraphe de 821 à 1199. Proposition du 11 septembre au matin, à valider par
   Xavier : il reste en fond, beaucoup plus discret. L'autre voie est de ne pas
   l'afficher du tout sous 820 pixels. */
@media(max-width:1199px){
  body.loaded #hero3d.on{opacity:.22}
  [data-theme="clair"] body.loaded #hero3d.on{opacity:.16}
}

/* Schéma : un élément masqué l'est vraiment, même s'il a son propre affichage. */
.flux-scene [hidden]{display:none!important}
/* Schéma : l'ordre change, les compteurs viennent sous la toile. */
.flux-scene .flux-compte-titre{margin-top:18px}
.flux-scene .flux-panneau{margin-top:22px}
@media(max-width:700px){.flux-compte-titre{min-height:2.7em;line-height:1.35}}

/* Pied de page : « Lancez-vous. » ne se coupe plus sur petit téléphone. */
footer .big-cta{white-space:nowrap}
@media(max-width:380px){footer .big-cta{font-size:2.5rem}}
/* Sans JavaScript, les services sont tous dépliés : leur signe « + » ne sert à rien. */
html:not(.js) .service .plus{display:none}
/* Réseau du haut de page : aussi discret sur un téléphone couché. */
@media(max-height:500px) and (max-width:1199px){
  body.loaded #hero3d.on{opacity:.22}
  [data-theme="clair"] body.loaded #hero3d.on{opacity:.16}
}

/* Troisième passe de la nuit, 11 septembre 2026 au petit matin.
   Schéma : ses paragraphes héritaient de la règle .faq-item p (marge gauche,
   marge haute, opacité), comme le tableau avant sa remise à zéro. Les chiffres
   des compteurs se décalaient, et « 13 / 24 » passait à la ligne de 768 à 820
   pixels : le bloc grandissait pendant la séquence et la page sautait. */
.faq-item .flux-scene p{margin:0;max-width:none;opacity:1}
.faq-item .flux-scene .flux-compte-titre{margin-top:18px}
.faq-item .flux-scene .flux-legende{margin-top:7px;max-width:70ch;opacity:.88}
[data-theme="clair"] .faq-item .flux-scene .flux-legende{opacity:1}
.faq-item .flux-scene .flux-cq{margin-top:7px}
.flux-cn{white-space:nowrap}
/* Liste de repli, sans JavaScript : les sorties sont nommées et numérotées
   sous leur zone, dans la liste elle-même (paragraphe flux-sorties). */
.faq-item .flux-etapes .flux-sorties{margin:8px 0 0;max-width:none;opacity:1;font-size:.85rem;color:var(--orange)}
.flux-etapes .flux-sorties span{display:block}
[data-theme="clair"] .faq-item .flux-etapes .flux-sorties{color:#7C2D12}

/* Le contact est le pied de page, qui commence par 130 pixels de marge :
   arrivé par un lien, son titre tombait 90 pixels plus bas que les autres. */
#contact{scroll-margin-top:6px}

/* Le surtitre des pages intérieures n'avait aucun style : texte courant,
   collé au titre au-dessus de 1200 pixels. Il reprend celui de l'accueil. */
.page-head .eyebrow{font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--indigo-light);margin-bottom:22px;font-weight:500}
/* Avec « moins de mouvement », la règle générale change toute transition en
   une transition très courte, mais réelle : la hauteur de la toile, relue
   juste après avoir été changée, rendait encore l'ancienne. La toile n'a
   aucune transition. */
.flux-toile{transition:none!important}

/* Décisions de Xavier du 11 septembre 2026, au matin.
   Services : deux filets se suivaient, celui du titre de groupe puis celui du
   premier service, et en bas celui du dernier service puis le cadre du bloc.
   Le filet du titre de groupe sert désormais de premier séparateur, et le
   cadre du bloc de dernier. */
.group-head{margin-bottom:0}
.group-head+.service{border-top:0}
.domain-block .service:last-of-type{border-bottom:0}

/* Sans JavaScript, ou si site.js n'a pas pu tourner : sous 1200 pixels, le
   burger n'ouvrait rien et le site n'avait plus de navigation. Les liens
   s'affichent alors dans l'en-tête, qui reprend sa place dans la page au lieu
   de rester fixé en haut. Décision de Xavier du 11 septembre 2026, point 14. */
@media(max-width:1199px){
  html:not(.js) header{position:relative;flex-wrap:wrap;row-gap:12px}
  html:not(.js) .burger{display:none}
  html:not(.js) nav{position:static;inset:auto;transform:none;visibility:visible;order:2;width:100%;
    flex-direction:row;flex-wrap:wrap;align-items:center;gap:4px 18px;padding:0;overflow:visible;
    background:none;transition:none}
  html:not(.js) nav::before{display:none}
  html:not(.js) nav>:first-child,html:not(.js) nav>:last-child{margin:0}
  html:not(.js) nav a{font-family:inherit;font-size:.85rem;letter-spacing:0;width:auto;padding:4px 0;border-bottom:0}
  html:not(.js) nav a.lang-switch{margin-top:0;padding:4px 10px;font-size:.72rem}
  html:not(.js) .cta-pill{margin-right:0}
}
/* Liste de repli : les stations portent déjà leur numéro, la puce du
   navigateur en faisait un second repère. 11 septembre 2026. */
.flux-etapes ul{list-style:none;padding-left:1.2em}