/* ============================================================
   Palette et systeme releves au CSS sur dust.tt le 07/09/2026
   ============================================================ */
:root{
  --blanc:#FFFFFF; --creme:#FAFAFA; --encre:#111418; --nuit:#0A0F1C;
  --gris:#616C7A; --gris2:#8A94A1; --ligne:#E7EAEE; --ligne2:#D5DAE1;
  --bleu:#1C91FF; --bleu-h:#007FD4; --bleu-pale:#EAF4FF;
  /* les accents pastel de dust */
  --rose:#FFC4D9; --citron:#E5F58D; --ciel:#96D3FF;
  --orange:#FFAA0D; --orange2:#FF9F1C; --corail:#EE5338; --vert:#489467;
  --f:"Geist",-apple-system,system-ui,sans-serif;
  --m:"Geist Mono",ui-monospace,monospace;
  --s:"Source Serif 4",Georgia,serif;
  --r:15px;       /* boutons — le rayon exact de dust */
  --r2:26px;      /* gros panneaux */
  --r3:20px;      /* cartes */
  --rp:999px;     /* pilules */
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--blanc);color:var(--encre);font-family:var(--f);
  font-size:16.5px;line-height:1.58;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

/* --- l'echelle de dust : graisses legeres, tracking tres serre --- */
h1,h2,h3{text-wrap:balance;letter-spacing:-.04em;line-height:1.03}
h1{font-size:clamp(38px,5.2vw,61px);font-weight:550}
h2{font-size:clamp(29px,3.8vw,48px);font-weight:450}
h3{font-size:19.5px;font-weight:550;letter-spacing:-.028em;line-height:1.25}
.lead{font-size:clamp(17px,1.45vw,19px);line-height:1.5;color:var(--gris);font-weight:400}
.kick{font-family:var(--m);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--bleu)}
.mut{color:var(--gris)}
.wrap{max-width:1220px;margin:0 auto;padding:0 clamp(20px,4vw,40px)}
.stack{display:flex;flex-direction:column}
.g16{gap:16px}.g24{gap:24px}.g48{gap:48px}

/* --- bandeau + header --- */
.annonce{background:var(--bleu);color:#fff;font-size:13.5px;text-align:center;padding:9px 20px}
.annonce b{font-weight:600}
.annonce .tag{font-family:var(--m);font-size:10px;letter-spacing:.08em;background:rgba(255,255,255,.22);
  padding:2px 9px;border-radius:var(--rp);margin-right:9px;text-transform:uppercase}
.hdr{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.85);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--ligne)}
.hdr__in{max-width:1220px;margin:0 auto;padding:12px clamp(20px,4vw,40px);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px}
.logo{display:flex;align-items:center;gap:3px;font-size:17px;font-weight:600;letter-spacing:-.045em}
/* le glouton du logo : bouche ouverte vers le A, il croque au survol */
.logo i{position:relative;width:21px;height:21px;flex-shrink:0;display:block;
  --m1:#5FB2FF;--m2:#1C91FF}
.logo i .machoire{width:21px;height:10.5px}
.logo i .machoire--h{border-radius:21px 21px 0 0;animation:none;transform:rotate(-26deg)}
.logo i .machoire--b{border-radius:0 0 21px 21px;animation:none;transform:rotate(26deg)}
.logo i::after{content:"";position:absolute;left:9.24px;top:3.64px;width:3.92px;height:3.92px;border-radius:50%;background:#fff;z-index:2}
.logo:hover i .machoire--h{animation:mordH .3s ease-in-out infinite alternate}
.logo:hover i .machoire--b{animation:mordB .3s ease-in-out infinite alternate}
@media(prefers-reduced-motion:reduce){.logo:hover i .machoire{animation:none!important}}
.nav{display:flex;gap:26px;justify-self:center;font-size:14.5px;color:var(--gris)}
.nav > a{white-space:nowrap}
.nav a:hover{color:var(--encre)}
.hdr__r{justify-self:end;display:flex;align-items:center;gap:12px}
.btn__env{display:none;width:19px;height:16px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--f);font-size:15px;font-weight:500;letter-spacing:-.012em;
  padding:11px 19px;border-radius:var(--r);border:1px solid transparent;
  cursor:pointer;transition:.16s;white-space:nowrap}
.btn--p{background:var(--bleu);color:#fff}
.btn--p:hover{background:var(--bleu-h)}
.btn--g{border-color:var(--ligne2);color:var(--encre);background:#fff}
.btn--g:hover{border-color:var(--gris2);background:var(--creme)}
.btn--t{color:var(--gris);padding-left:6px;padding-right:6px}
.btn--t:hover{color:var(--encre)}
.btn--lg{padding:14px 24px;font-size:16px}

.sec{padding:clamp(70px,8.5vw,110px) 0}
.sec--pale{background:var(--creme);border-top:1px solid var(--ligne);border-bottom:1px solid var(--ligne)}
.sec__h{max-width:770px;display:flex;flex-direction:column;gap:15px}

/* ============================================================
   HERO — texte a gauche, grappe de modeles en 3D a droite
   ============================================================ */
.hero{padding:clamp(50px,6vw,80px) 0 0}
/* chez dust le H1 tient sur 2-3 lignes : on donne de la largeur au texte */
.hero__g{display:grid;grid-template-columns:1.22fr .78fr;gap:clamp(28px,3.4vw,48px);align-items:center}
.hero__t{display:flex;flex-direction:column;gap:21px;max-width:700px}
.hero__cta{display:flex;gap:11px;flex-wrap:wrap;padding-top:5px}
.hero__note{font-family:var(--m);font-size:11.5px;color:var(--gris2);letter-spacing:.01em}

/* --- la grappe 3D --- */
.grappe{position:relative;aspect-ratio:1/.92;min-height:360px;
  display:flex;align-items:center;justify-content:center}
.grappe::before{content:"";position:absolute;inset:8% 6%;border-radius:50%;
  background:radial-gradient(circle at 50% 45%,rgba(28,145,255,.11),rgba(28,145,255,0) 68%)}
.jeton{position:absolute;z-index:3;transform:translate(-50%,-50%);
  animation:flotte 7s ease-in-out infinite}
.jeton__p{border-radius:29%;position:relative;display:flex;align-items:center;justify-content:center;
  /* le volume : degrade oblique + rebord clair en haut + ombre coloree portee */
  box-shadow:inset 0 3px 0 rgba(255,255,255,.72), inset 0 -6px 12px rgba(0,0,0,.07),
             0 20px 30px -14px var(--ombre), 0 3px 7px rgba(17,20,24,.07)}
.jeton__p::after{content:"";position:absolute;left:13%;top:9%;width:44%;height:26%;border-radius:50%;
  background:linear-gradient(180deg,rgba(255,255,255,.62),rgba(255,255,255,0));filter:blur(1px)}
.jeton__p svg{position:relative;z-index:2}
.jeton b{position:absolute;top:calc(100% + 9px);left:50%;transform:translateX(-50%);
  font-family:var(--m);font-size:11px;font-weight:500;letter-spacing:-.01em;color:var(--gris);
  white-space:nowrap}

.j1{left:50%;top:19%;--ombre:rgba(28,145,255,.5);animation-delay:0s}
.j1 .jeton__p{width:104px;height:104px;background:linear-gradient(146deg,#BFE0FF,#1C91FF)}
.j2{left:14%;top:37%;--ombre:rgba(255,196,217,.75);animation-delay:-1.1s}
.j2 .jeton__p{width:82px;height:82px;background:linear-gradient(146deg,#FFE6EE,#FFA9C6)}
.j3{left:86%;top:34%;--ombre:rgba(229,245,141,.85);animation-delay:-2.3s}
.j3 .jeton__p{width:88px;height:88px;background:linear-gradient(146deg,#F3FBC8,#D7EE6A)}
.j4{left:21%;top:75%;--ombre:rgba(255,170,13,.5);animation-delay:-3.4s}
.j4 .jeton__p{width:80px;height:80px;background:linear-gradient(146deg,#FFDFA6,#FFAA0D)}
.j5{left:79%;top:77%;--ombre:rgba(150,211,255,.7);animation-delay:-4.6s}
.j5 .jeton__p{width:92px;height:92px;background:linear-gradient(146deg,#D6EDFF,#96D3FF)}
.j6{left:50%;top:56%;--ombre:rgba(72,148,103,.42);animation-delay:-5.7s}
.j6 .jeton__p{width:70px;height:70px;background:linear-gradient(146deg,#B6DCC5,#489467)}
@keyframes flotte{0%,100%{transform:translate(-50%,-50%)}50%{transform:translate(-50%,calc(-50% - 11px))}}


/* le maillage : des pointilles qui circulent entre les modeles */
.liens{position:absolute;inset:0;width:100%;height:100%;z-index:1;overflow:visible}
.liens path{fill:none;stroke:rgba(28,145,255,.45);stroke-width:.42;
  stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:1.5 2.4;animation:flux 1.9s linear infinite}
.liens .l2{stroke:rgba(150,211,255,.5);animation-delay:-.5s}
.liens .l3{stroke:rgba(72,148,103,.34);animation-delay:-1.1s}
@keyframes flux{to{stroke-dashoffset:-3.9}}
@media(prefers-reduced-motion:reduce){.liens path{animation:none}}
.grappe__l{position:absolute;bottom:-6px;left:50%;transform:translateX(-50%);
  font-family:var(--m);font-size:10.5px;color:var(--gris2);letter-spacing:.05em;
  white-space:nowrap;text-align:center}

/* --- le releve : l'objet "produit" de la page --- */
.releve{margin-top:clamp(44px,5vw,64px);border:1px solid var(--ligne);border-radius:var(--r2);
  background:#fff;overflow:hidden;
  box-shadow:0 1px 2px rgba(17,20,24,.04),0 14px 36px -16px rgba(17,20,24,.16)}
.releve__bar{display:flex;align-items:center;gap:12px;padding:12px 16px;
  border-bottom:1px solid var(--ligne);background:var(--creme)}
.releve__dots{display:flex;gap:5px}
.releve__dots i{width:9px;height:9px;border-radius:50%;background:var(--ligne2);display:block}
.releve__t{font-family:var(--m);font-size:11.5px;color:var(--gris)}
.releve__t b{color:var(--encre);font-weight:500}
.releve__lg{margin-left:auto;display:flex;gap:14px;font-family:var(--m);font-size:10.5px;color:var(--gris)}
.releve__lg span{display:flex;align-items:center;gap:5px}
.pt{width:8px;height:8px;border-radius:2px;display:block}
.pt--f{background:var(--ligne2)}.pt--e{background:var(--orange)}.pt--o{background:var(--bleu)}
.grid10{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--ligne)}
.sys{background:#fff;padding:17px 16px 18px;display:flex;flex-direction:column;gap:8px;min-height:142px}
.sys__h{display:flex;align-items:center;gap:9px}
.sys__h .pt{margin-left:auto}
.sys__n{font-family:var(--m);font-size:10.5px;color:var(--gris2)}
.sys h3{font-size:15.5px}
.sys p{font-size:12.8px;line-height:1.45;color:var(--gris)}

/* une couleur par systeme : la grille etait la seule zone neutre de la page */
.sys{position:relative}
.sys::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:var(--teinte);opacity:.55;transition:.16s}
.sys:hover::before{opacity:1}
.sys__i{width:29px;height:29px;border-radius:9px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.55),0 4px 9px -4px rgba(17,20,24,.3)}
.s01{--teinte:#59B4FF}
.s01 .sys__i{background:linear-gradient(146deg,#B9E2FF,#59B4FF)}
.s02{--teinte:#FF9EC2}
.s02 .sys__i{background:linear-gradient(146deg,#FFDCE9,#FF9EC2)}
.s03{--teinte:#CDE95F}
.s03 .sys__i{background:linear-gradient(146deg,#EFFAC4,#CDE95F)}
.s04{--teinte:#1C91FF}
.s04 .sys__i{background:linear-gradient(146deg,#BEDFFF,#1C91FF)}
.s05{--teinte:#FFAA0D}
.s05 .sys__i{background:linear-gradient(146deg,#FFE3B0,#FFAA0D)}
.s06{--teinte:#A78BFA}
.s06 .sys__i{background:linear-gradient(146deg,#DED6FF,#A78BFA)}
.s07{--teinte:#FF9067}
.s07 .sys__i{background:linear-gradient(146deg,#FFD9C7,#FF9067)}
.s08{--teinte:#5FC194}
.s08 .sys__i{background:linear-gradient(146deg,#C7EBD8,#5FC194)}
.s09{--teinte:#7C93F0}
.s09 .sys__i{background:linear-gradient(146deg,#CFD9FF,#7C93F0)}
.s00{--teinte:#DDA92F}
.s00 .sys__i{background:linear-gradient(146deg,#F7E0B4,#DDA92F)}
.sys--o{background:var(--bleu-pale)}
.etat{font-family:var(--m);font-size:10px;letter-spacing:.05em;text-transform:uppercase;
  padding:3px 9px;border-radius:var(--rp);margin-top:auto;align-self:flex-start}
.etat--f{background:#F2F4F6;color:var(--gris)}
.etat--e{background:#FFF3DC;color:#9A6608}
.etat--o{background:#DCEBFF;color:var(--bleu-h)}

/* --- confiance --- */
.conf{display:flex;flex-direction:column;gap:20px;align-items:center;text-align:center}
.conf__l{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.conf__l{gap:10px 34px}
.conf__m{font-size:17px;font-weight:550;letter-spacing:-.04em;color:#7E8896;
  padding:8px 0;transition:.16s;cursor:default}
.conf__l{gap:14px 38px;align-items:center}
.conf__i{height:var(--h);width:auto;max-width:150px;object-fit:contain;
  /* une seule teinte pour que huit chartes differentes tiennent ensemble.
     --b se regle logo par logo : un lettrage or vire au gris tres clair une
     fois desature, et disparait sur fond blanc si on ne l'assombrit pas. */
  filter:grayscale(1) brightness(var(--b,.78)) contrast(1.2) opacity(.82);
  transition:filter .18s}
.conf__i:hover{filter:none}
@media(max-width:620px){.conf__l{gap:12px 26px}.conf__i{height:calc(var(--h) * .82)}}
.conf__m:hover{color:var(--encre)}
.conf__m em{font-style:normal;color:#B2BAC4;font-weight:450}

.duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,70px);align-items:center}
.duo__t{display:flex;flex-direction:column;gap:17px;max-width:52ch}
.fig{border:1px solid var(--ligne);border-radius:var(--r2);background:var(--creme);padding:30px;
  display:flex;flex-direction:column;gap:12px}
.ligne{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:11px 0;border-bottom:1px solid var(--ligne)}
.ligne:last-child{border-bottom:none}
.ligne span{font-size:14.5px;color:var(--gris)}
.ligne b{font-family:var(--m);font-size:14.5px;font-weight:500;font-variant-numeric:tabular-nums}
.ligne b.v{color:var(--bleu-h)}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(256px,1fr));gap:16px}
.card{border:1px solid var(--ligne);border-radius:var(--r3);padding:26px 24px;
  display:flex;flex-direction:column;gap:10px;background:#fff;transition:.16s}
.card:hover{border-color:var(--ligne2);box-shadow:0 8px 24px -14px rgba(17,20,24,.2)}
.card p{font-size:14.5px;color:var(--gris);line-height:1.52}
.card__n{font-family:var(--m);font-size:11px;color:var(--bleu)}

.temps{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--ligne);
  border:1px solid var(--ligne);border-radius:var(--r2);overflow:hidden}
.tp{background:#fff;padding:26px 22px;display:flex;flex-direction:column;gap:8px}
.tp__n{font-family:var(--m);font-size:11px;color:var(--bleu)}
.tp p{font-size:14px;color:var(--gris);line-height:1.5}

.lim{display:flex;flex-direction:column;border-top:1px solid var(--ligne)}
.lim__i{display:grid;grid-template-columns:40px 1fr;gap:18px;padding:21px 0;
  border-bottom:1px solid var(--ligne);align-items:start}
.lim__c{width:28px;height:28px;border-radius:10px;background:#F3F5F7;
  display:flex;align-items:center;justify-content:center;margin-top:2px}
.lim__c::after{content:"";width:11px;height:1.5px;background:var(--gris2);display:block}
.lim__t{display:flex;flex-direction:column;gap:5px}
.lim__t p{font-size:14.8px;color:var(--gris)}

/* --- citation : chez dust, le serif ne sert QU'A CA --- */
.cit{max-width:800px;display:flex;flex-direction:column;gap:21px}
.cit blockquote{font-family:var(--s);font-size:clamp(20px,2.2vw,27px);line-height:1.42;
  letter-spacing:-.012em;font-weight:400}
.cit__a{display:flex;align-items:center;gap:12px}
.cit__av{width:38px;height:38px;border-radius:50%;background:var(--bleu-pale);flex-shrink:0;
  border:1px dashed var(--ligne2)}
.cit__a b{font-size:14.5px;font-weight:550;letter-spacing:-.01em}
.cit__a span{font-size:13px;color:var(--gris);display:block}

/* --- l'unique section sombre de la page --- */
.fin{background:#0B72D6;color:#fff;position:relative;overflow:hidden;
  padding:clamp(78px,9.5vw,124px) 0}
.fin__halo{position:absolute;inset:0;z-index:1;
  background:radial-gradient(720px 440px at 84% 16%,rgba(255,255,255,.17),rgba(11,114,214,0) 66%),
             radial-gradient(420px 320px at 12% 96%,rgba(255,255,255,.09),rgba(11,114,214,0) 70%)}
.fin .wrap{position:relative;z-index:3}
.fin__t{max-width:720px;display:flex;flex-direction:column;gap:19px}
.fin h2{color:#fff}
.fin .lead{color:#fff}
.fin .kick{color:#fff;opacity:.86}
.fin .btn--p{background:#fff;color:#0B5FAF}
.fin .btn--p:hover{background:#EAF3FF}
.fin .btn--g{background:transparent;border-color:rgba(255,255,255,.5);color:#fff}
.fin .btn--g:hover{background:rgba(255,255,255,.14);border-color:#fff}

.ftr{padding:54px 0 38px;border-top:1px solid var(--ligne)}
.ftr__g{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:32px}
.ftr h4{font-size:12.5px;font-weight:550;letter-spacing:-.01em;margin-bottom:13px}
.ftr ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.ftr a{font-size:14px;color:var(--gris)}
.ftr a:hover{color:var(--encre)}
.ftr__b{margin-top:38px;padding-top:20px;border-top:1px solid var(--ligne);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-family:var(--m);font-size:11px;color:var(--gris2)}

.note{position:fixed;right:14px;bottom:14px;z-index:200;max-width:314px;
  background:var(--encre);color:#fff;border-radius:12px;padding:14px 16px;
  font-size:12.5px;line-height:1.5;box-shadow:0 14px 40px -12px rgba(0,0,0,.5)}
.note b{font-weight:600;display:block;margin-bottom:5px;font-size:12px}
.note span{color:#9AA5B2}


/* ============================================================
   FLUX — le motif de dust : panneau pastel tres arrondi,
   carte en tete, filet vertical, etapes empilees
   ============================================================ */
.flux{border-radius:var(--r2);padding:clamp(28px,3.4vw,44px);
  display:flex;flex-direction:column;align-items:center;gap:0}
.flux--bleu{background:#E9F3FF}
.flux--rose{background:#FFF1F6}
.flux--citron{background:#F8FCE6}
.flux__tete{width:96px;height:96px;border-radius:22px;background:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 1px 2px rgba(17,20,24,.05),0 10px 22px -12px rgba(17,20,24,.18)}
.flux__tete b{font-family:var(--m);font-size:10px;color:var(--gris);letter-spacing:.04em}
.flux__fil{width:1.5px;height:26px;background:var(--bleu);opacity:.4}
.flux__e{width:100%;max-width:400px;background:#fff;border-radius:14px;
  padding:13px 16px;display:flex;align-items:center;gap:12px;
  box-shadow:0 1px 2px rgba(17,20,24,.05),0 6px 16px -10px rgba(17,20,24,.16)}
.flux__e span{font-size:14.5px;letter-spacing:-.01em}
.flux__e em{font-style:normal;font-family:var(--m);font-size:11px;color:var(--gris2);margin-left:auto;
  white-space:nowrap}
.ico{width:26px;height:26px;border-radius:8px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center}
.ico--b{background:#DCEBFF}.ico--r{background:#FFE0EC}.ico--c{background:#EEF7C9}
.ico--o{background:#FFEECF}.ico--v{background:#DCEFE3}
.flux__note{font-family:var(--m);font-size:11px;color:var(--gris2);margin-top:20px;text-align:center}

/* --- cartes d'agent --- */
.agents{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:18px}
.agent{border:1px solid var(--ligne);border-radius:var(--r3);background:#fff;overflow:hidden;
  display:flex;flex-direction:column;transition:.16s}
.agent:hover{border-color:var(--ligne2);box-shadow:0 10px 28px -16px rgba(17,20,24,.24)}
.agent__h{padding:20px 22px 16px;display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--ligne)}
.agent__p{width:38px;height:38px;border-radius:12px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.65)}
.agent__p--b{background:linear-gradient(146deg,#BFE0FF,#1C91FF)}
.agent__p--r{background:linear-gradient(146deg,#FFE6EE,#FFA9C6)}
.agent__p--c{background:linear-gradient(146deg,#F3FBC8,#D7EE6A)}
.agent__p--o{background:linear-gradient(146deg,#FFDFA6,#FFAA0D)}
.agent__h b{font-size:15.5px;font-weight:550;letter-spacing:-.025em;display:block}
.agent__h span{font-family:var(--m);font-size:10.5px;color:var(--gris2)}
.agent__c{padding:18px 22px 22px;display:flex;flex-direction:column;gap:13px}
.agent__l{display:flex;flex-direction:column;gap:6px}
.agent__l u{text-decoration:none;font-family:var(--m);font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--gris2)}
.agent__l p{font-size:13.8px;color:var(--gris);line-height:1.48}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tag2{font-family:var(--m);font-size:10.5px;padding:3px 9px;border-radius:var(--rp);
  background:var(--creme);border:1px solid var(--ligne);color:var(--gris)}
.agent__no{font-size:12.8px;color:var(--gris2);padding-top:11px;border-top:1px solid var(--ligne);
  line-height:1.45}
@media(max-width:620px){.flux{padding:24px 18px}.flux__tete{width:80px;height:80px}}

/* ============================================================
   LES PETITS AGENTS — personnages pastel qui travaillent tout seuls
   ============================================================ */
.bonhommes{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.bh{border-radius:var(--r2);padding:26px 20px 24px;display:flex;flex-direction:column;
  align-items:center;gap:14px;text-align:center;position:relative;overflow:hidden}
.bh--b{background:#E9F3FF}.bh--r{background:#FFF1F6}
.bh--c{background:#F8FCE6}.bh--o{background:#FFF6E8}
.bh svg{width:132px;height:auto;overflow:visible}
.bh__corps{animation:rebond 4.2s ease-in-out infinite;transform-origin:70px 130px}
.bh--r .bh__corps{animation-delay:-1.05s}
.bh--c .bh__corps{animation-delay:-2.1s}
.bh--o .bh__corps{animation-delay:-3.15s}
.bh__objet{animation:agite 4.2s ease-in-out infinite;transform-origin:center}
.bh--r .bh__objet{animation-delay:-1.05s}
.bh--c .bh__objet{animation-delay:-2.1s}
.bh--o .bh__objet{animation-delay:-3.15s}
@keyframes rebond{0%,100%{transform:translateY(0) scaleY(1)}
  45%{transform:translateY(-7px) scaleY(1.015)}
  55%{transform:translateY(-7px) scaleY(1.015)}}
@keyframes agite{0%,100%{transform:rotate(-4deg) translateY(0)}
  50%{transform:rotate(5deg) translateY(-3px)}}
.bh__t{display:flex;flex-direction:column;gap:5px}
.bh__t b{font-size:15.5px;font-weight:550;letter-spacing:-.025em}
.bh__t span{font-size:13.5px;color:var(--gris);line-height:1.45}
.bh__q{font-family:var(--m);font-size:10.5px;color:var(--gris2);letter-spacing:.04em;
  background:rgba(255,255,255,.72);padding:4px 10px;border-radius:var(--rp)}
@media(max-width:960px){.bonhommes{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.bonhommes{grid-template-columns:1fr}}

/* ============================================================
   COMPARAISON — un lot de gestes, deux facons de l'absorber
   ============================================================ */
.vs{border:1px solid var(--ligne);border-radius:var(--r2);background:#fff;overflow:hidden}
.vs__tw{overflow-x:auto}
.vs table{border-collapse:collapse;width:100%;min-width:660px}
.vs th,.vs td{text-align:left;padding:15px 20px;border-bottom:1px solid var(--ligne);
  vertical-align:top;font-size:14.8px;line-height:1.45}
.vs tr:last-child td{border-bottom:none}
.vs thead th{background:var(--creme);font-size:11px;font-weight:550;letter-spacing:.09em;
  text-transform:uppercase;color:var(--gris);border-bottom:1px solid var(--ligne2);padding:13px 20px}
.vs .c1{width:29%;color:var(--gris)}
.vs .c2{width:35.5%}
.vs .c3{width:35.5%;color:var(--gris)}
/* la colonne agents est teintee sur toute la hauteur */
.vs th.c2,.vs td.c2{background:#F2F8FF;border-left:1px solid #DCEBFF;border-right:1px solid #DCEBFF}
.vs thead th.c2{color:var(--bleu-h)}
.vs td.c2 b{font-weight:550}
.vs__p{font-family:var(--m);font-size:19px;font-weight:500;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;display:block;margin-bottom:3px}
.vs td.c2 .vs__p{color:var(--bleu-h)}
.vs td.c3 .vs__p{color:var(--encre)}
.vs__n{font-size:12.6px;color:var(--gris2);display:block;line-height:1.4}
.vs__tot td{background:#FAFCFF;border-top:1px solid var(--ligne2)}
.vs__lim td{background:var(--creme);font-size:14px;color:var(--gris)}
.vs__lim b{color:var(--encre);font-weight:550}

/* les gestes tenus en continu */
.h24{display:grid;grid-template-columns:repeat(auto-fit,minmax(252px,1fr));gap:1px;
  background:var(--ligne);border:1px solid var(--ligne);border-radius:var(--r2);overflow:hidden;
  margin-top:18px}
.h24__i{background:#fff;padding:17px 19px;display:flex;align-items:flex-start;gap:11px}
.h24__i i{width:22px;height:22px;border-radius:50%;flex-shrink:0;margin-top:1px;
  background:linear-gradient(146deg,#BEDFFF,#1C91FF);position:relative}
.h24__i i::after{content:"";position:absolute;left:10px;top:5px;width:1.4px;height:6px;
  background:#fff;border-radius:1px;transform-origin:bottom center;
  animation:aiguille 6s linear infinite}
@keyframes aiguille{to{transform:rotate(360deg)}}
.h24__i span{font-size:14px;line-height:1.45}
.h24__i em{font-style:normal;display:block;font-family:var(--m);font-size:11px;
  color:var(--gris2);margin-top:3px}
.h24__t{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-top:34px}
.h24__t b{font-size:17px;font-weight:550;letter-spacing:-.03em}
.h24__t span{font-family:var(--m);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--bleu);background:var(--bleu-pale);padding:3px 10px;border-radius:var(--rp)}
.vs__src{font-family:var(--m);font-size:11px;color:var(--gris2);line-height:1.6;
  margin-top:16px;max-width:82ch}
@media(prefers-reduced-motion:reduce){.h24__i i::after{animation:none}}

/* ============================================================
   PERTE / GAIN — la colonne rouge chiffre ce que coute l'inaction,
   la bleue ce que rend l'ouverture d'un systeme.
   Contrastes verifies : 6,04:1 et 5,77:1.
   ============================================================ */
.bal{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.bal__c{border-radius:var(--r2);padding:26px 26px 22px;display:flex;flex-direction:column;gap:15px}
.bal--r{background:#FFF1EE;border:1px solid #FBD5CB}
.bal--b{background:#EAF4FF;border:1px solid #CFE4FF}
.bal__t{display:flex;align-items:center;gap:11px}
.bal__t i{width:27px;height:27px;border-radius:9px;flex-shrink:0;display:flex;
  align-items:center;justify-content:center;box-shadow:inset 0 1.5px 0 rgba(255,255,255,.45)}
.bal--r .bal__t i{background:linear-gradient(146deg,#FF9478,#EE5338)}
.bal--b .bal__t i{background:linear-gradient(146deg,#7FC0FF,#1C91FF)}
.bal__t b{font-size:16px;font-weight:550;letter-spacing:-.03em}
.bal--r .bal__t b{color:#A8331E}
.bal--b .bal__t b{color:#0B5FAF}
.bal__l{display:flex;flex-direction:column}
.bal__i{display:flex;align-items:baseline;justify-content:space-between;gap:18px;
  padding:11px 0;border-bottom:1px solid rgba(17,20,24,.08)}
.bal__i:last-child{border-bottom:none}
.bal__i span{font-size:14.5px;line-height:1.4}
.bal__i b{font-family:var(--m);font-size:14.5px;font-weight:500;white-space:nowrap;
  font-variant-numeric:tabular-nums}
.bal--r .bal__i b{color:#A8331E}
.bal--b .bal__i b{color:#0B5FAF}
.bal__f{margin-top:auto;padding-top:14px;border-top:1px solid rgba(17,20,24,.12);
  display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.bal__f span{font-family:var(--m);font-size:11px;letter-spacing:.04em;text-transform:uppercase}
.bal__f b{font-size:21px;font-weight:550;letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.bal--r .bal__f span,.bal--r .bal__f b{color:#A8331E}
.bal--b .bal__f span,.bal--b .bal__f b{color:#0B5FAF}
.bal__src{font-family:var(--m);font-size:11px;color:var(--gris2);line-height:1.6;max-width:84ch}
@media(max-width:760px){.bal{grid-template-columns:1fr}}

/* ============================================================
   TROIS PISTES — le glouton traverse la journee, sort a droite,
   revient a gauche de la piste suivante, et ainsi de suite.
   Forme geometrique maison, pas un personnage existant.
   ============================================================ */
.jour{border-radius:var(--r2);background:#E9F3FF;padding:clamp(24px,3vw,34px) 0 0;overflow:hidden;
  --acc:#1C91FF; --fil:rgba(28,145,255,.34); --rail:rgba(28,145,255,.22);
  --m1:#5FB2FF; --m2:#1C91FF; --oeil:#0B4F8C; --halo:rgba(28,145,255,.24)}
.jour__in{padding:0 clamp(20px,2.6vw,32px)}
.jour__t{display:block;font-family:var(--m);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--acc);padding:0 clamp(20px,2.6vw,32px) 4px}

/* deux cases asymetriques sous la grande barre */
.pistes{display:grid;grid-template-columns:1.44fr 1fr;gap:16px;margin-top:16px}
.piste{border-radius:var(--r2);padding:clamp(20px,2.4vw,26px) 0 0;overflow:hidden}
.piste--j{background:#FFF6E4;
  --acc:#B07A0C; --fil:rgba(214,150,20,.42); --rail:rgba(214,150,20,.28);
  --m1:#FFD37A; --m2:#F5A814; --oeil:#7A5307; --halo:rgba(245,168,20,.26)}
.piste--r{background:#FFF0F6;
  --acc:#C05B84; --fil:rgba(224,128,167,.42); --rail:rgba(224,128,167,.3);
  --m1:#FFD3E3; --m2:#FF92BC; --oeil:#9E3D64; --halo:rgba(255,146,188,.28)}

.scene{position:relative;height:178px}
.scene--s{height:150px}

/* la ligne du temps */
.rail{position:absolute;left:0;right:0;top:130px;height:2px;background:var(--rail);border-radius:2px}
.scene--s .rail{top:104px}
.rail::before,.rail::after{content:"";position:absolute;top:-3px;width:8px;height:8px;border-radius:50%;
  background:var(--rail)}
.rail::before{left:-2px}.rail::after{right:-2px}
.heures{position:absolute;left:0;right:0;top:144px;display:flex;justify-content:space-between;
  font-family:var(--m);font-size:10.5px;color:var(--gris2);letter-spacing:.04em}

/* une tache posee sur la ligne */
.tj{position:absolute;top:0;height:134px;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;white-space:nowrap;
  animation-duration:31.0s;animation-timing-function:linear;animation-iteration-count:infinite}
.scene--s .tj{height:108px}
.tj b{background:#fff;border-radius:var(--rp);padding:8px 14px;font-size:12.8px;font-weight:400;
  letter-spacing:-.01em;box-shadow:0 1px 2px rgba(17,20,24,.06),0 7px 16px -10px rgba(17,20,24,.24)}
.scene--s .tj b{font-size:12.2px;padding:7px 13px}
.tj b u{text-decoration:none;font-family:var(--m);font-size:10.5px;color:var(--acc);margin-right:9px}
.tj b i{font-style:normal;font-family:var(--m);font-size:10.5px;color:var(--gris2);margin-left:9px}
/* le filet qui relie l'etiquette a la ligne du temps */
.tj s{text-decoration:none;width:1px;flex:1;background:var(--fil);margin-top:6px}
.tj::after{content:"";width:8px;height:8px;border-radius:50%;background:#fff;
  border:2px solid var(--m2);box-shadow:0 1px 3px rgba(17,20,24,.14);margin-bottom:-6px}

/* le glouton */
.gl2{position:absolute;top:105px;width:54px;height:54px;z-index:5;margin-left:-27px;
  animation-duration:31.0s;animation-timing-function:linear;animation-iteration-count:infinite}
.scene--s .gl2{top:81px;width:46px;height:46px;margin-left:-23px}
/* un seul degrade court sur les DEUX machoires (200% de haut, ancre en haut puis en bas) :
   sinon il redemarre sur chaque moitie et trace une ligne au milieu du corps.
   Le lisere clair ne va que sur la machoire haute : c'est le vrai bord du personnage. */
.machoire{position:absolute;left:0;background:linear-gradient(150deg,var(--m1),var(--m2));
  background-size:100% 200%}
.machoire--h{top:0;background-position:top;transform-origin:50% 100%;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.4);
  animation:mordH .34s ease-in-out infinite alternate}
.machoire--b{bottom:0;background-position:bottom;transform-origin:50% 0;
  animation:mordB .34s ease-in-out infinite alternate}
@keyframes mordH{from{transform:rotate(0)}to{transform:rotate(-31deg)}}
@keyframes mordB{from{transform:rotate(0)}to{transform:rotate(31deg)}}
.gl2 .machoire{width:54px;height:27px}
.gl2 .machoire--h{border-radius:54px 54px 0 0}
.gl2 .machoire--b{border-radius:0 0 54px 54px}
.scene--s .gl2 .machoire{width:46px;height:23px}
.scene--s .gl2 .machoire--h{border-radius:46px 46px 0 0}
.scene--s .gl2 .machoire--b{border-radius:0 0 46px 46px}
.gl2 i{position:absolute;left:31px;top:11px;width:6px;height:6px;border-radius:50%;
  background:var(--oeil);z-index:6}
.scene--s .gl2 i{left:27px;top:9px;width:5px;height:5px}
.gl2::after{content:"";position:absolute;inset:-14px -9px -14px -12px;border-radius:50%;
  background:radial-gradient(circle,var(--halo),rgba(255,255,255,0) 70%);z-index:-1}

/* le bilan qui s'incremente a chaque bouchee */
.bilan{margin-top:4px;border-top:1px solid var(--rail);
  padding:14px clamp(20px,2.6vw,32px) 18px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.bilan span{font-family:var(--m);font-size:11.5px;color:var(--gris);letter-spacing:.04em}
.bilan em{font-style:normal;display:inline-flex;height:27px;overflow:hidden}
.bilan em u{text-decoration:none;display:flex;flex-direction:column}
.bilan em u b{height:27px;line-height:27px;font-size:21px;font-weight:500;
  color:var(--acc);letter-spacing:-.03em;font-variant-numeric:tabular-nums;white-space:nowrap}
.piste .bilan em u b{font-size:18px}
.bilan .ap{margin-left:auto;font-family:var(--m);font-size:10.5px;color:var(--gris2)}

.tj.b1{animation-name:avale_b1}
.tj.b2{animation-name:avale_b2}
.tj.b3{animation-name:avale_b3}
.tj.b4{animation-name:avale_b4}
.tj.b5{animation-name:avale_b5}
.tj.b6{animation-name:avale_b6}
.tj.b7{animation-name:avale_b7}
.tj.b8{animation-name:avale_b8}
.tj.j1{animation-name:avale_j1}
.tj.j2{animation-name:avale_j2}
.tj.j3{animation-name:avale_j3}
.tj.r1{animation-name:avale_r1}
.tj.r2{animation-name:avale_r2}
.tj.b1{padding-top:0px}
.tj.b2{padding-top:33px}
.tj.b3{padding-top:66px}
.tj.b4{padding-top:0px}
.tj.b5{padding-top:33px}
.tj.b6{padding-top:66px}
.tj.b7{padding-top:0px}
.tj.b8{padding-top:33px}
.tj.j1{padding-top:0px}
.tj.j2{padding-top:33px}
.tj.j3{padding-top:66px}
.tj.r1{padding-top:0px}
.tj.r2{padding-top:33px}

/* l'etat 'nettoye' : evite qu'une piste videe reste vide trop longtemps */
.fini{position:absolute;left:50%;top:46px;transform:translate(-50%,4px);opacity:0;
  display:flex;align-items:center;gap:9px;white-space:nowrap;
  background:#fff;border-radius:var(--rp);padding:9px 17px;
  box-shadow:0 1px 2px rgba(17,20,24,.06),0 8px 20px -12px rgba(17,20,24,.26);
  animation-duration:31.0s;animation-timing-function:ease-out;animation-iteration-count:infinite}
.scene--s .fini{top:34px;padding:8px 14px}
.fini i{width:17px;height:17px;border-radius:50%;background:var(--m2);flex-shrink:0;
  display:flex;align-items:center;justify-content:center}
.fini i::after{content:"";width:7px;height:4px;border-left:1.8px solid #fff;
  border-bottom:1.8px solid #fff;transform:rotate(-45deg);margin-top:-2px}
.fini span{font-size:13px;letter-spacing:-.01em}
.scene--s .fini span{font-size:12.2px}
.fini b{font-family:var(--m);font-size:11.5px;color:var(--acc);font-weight:500}

@media(max-width:960px){.fini{display:none}}
@media(prefers-reduced-motion:reduce){.fini{animation:none!important;opacity:1!important;
  transform:translate(-50%,0)!important}}

@keyframes avale_b1{0%,5.64%{opacity:1;transform:translateX(-50%) scale(1)}7.24%{opacity:0;transform:translateX(-50%) scale(.2)}100%{opacity:0;transform:translateX(-50%) scale(.2)}}
@keyframes avale_b2{0%,10.6%{opacity:1;transform:translateX(-50%) scale(1)}12.2%{opacity:0;transform:translateX(-50%) scale(.2)}100%{opacity:0;transform:translateX(-50%) scale(.2)}}
@keyframes avale_b3{0%,15.55%{opacity:1;transform:translateX(-50%) scale(1)}17.15%{opacity:0;transform:translateX(-50%) scale(.2)}100%{opacity:0;transform:translateX(-50%) scale(.2)}}
@keyframes avale_b4{0%,20.06%{opacity:1;transform:translateX(-50%) scale(1)}21.66%{opacity:0;transform:translateX(-50%) scale(.2)}100%{opacity:0;transform:translateX(-50%) scale(.2)}}
@keyframes avale_b5{0%,26.82%{opacity:1;transform:translateX(-50%) scale(1)}28.42%{opacity:0;transform:translateX(-50%) scale(.2)}100%{opacity:0;transform:translateX(-50%) scale(.2)}}
@keyframes avale_b6{0%,31.78%{opacity:1;transform:translateX(-50%) scale(1)}33.38%{opacity:0;transform:translateX(-50%) scale(.2)}100%{opacity:0;transform:translateX(-50%) scale(.2)}}
@keyframes avale_b7{0%,36.74%{opacity:1;transform:translateX(-50%) scale(1)}38.34%{opacity:0;transform:translateX(-50%) scale(.2)}100%{opacity:0;transform:translateX(-50%) scale(.2)}}
@keyframes avale_b8{0%,42.15%{opacity:1;transform:translateX(-50%) scale(1)}43.75%{opacity:0;transform:translateX(-50%) scale(.2)}100%{opacity:0;transform:translateX(-50%) scale(.2)}}
@keyframes trav_b{0%,0%{left:-3%;opacity:0}0%{left:-3%;opacity:1}47.78%{left:103%;opacity:1}47.83%,100%{left:103%;opacity:0}}
@keyframes compte_b{0%{transform:translateY(0)}5.64%{transform:translateY(-0px)}6.64%{transform:translateY(-27px)}10.6%{transform:translateY(-27px)}11.6%{transform:translateY(-54px)}15.55%{transform:translateY(-54px)}16.55%{transform:translateY(-81px)}20.06%{transform:translateY(-81px)}21.06%{transform:translateY(-108px)}26.82%{transform:translateY(-108px)}27.82%{transform:translateY(-135px)}31.78%{transform:translateY(-135px)}32.78%{transform:translateY(-162px)}36.74%{transform:translateY(-162px)}37.74%{transform:translateY(-189px)}42.15%{transform:translateY(-189px)}43.15%{transform:translateY(-216px)}100%{transform:translateY(-216px)}}
@keyframes fini_b{0%,48.18%{opacity:0;transform:translate(-50%,4px)}50.78%,97%{opacity:1;transform:translate(-50%,0)}98%,100%{opacity:0;transform:translate(-50%,0)}}
@keyframes avale_j1{0%,54.5%{opacity:1;transform:translateX(-50%) scale(1)}56.1%{opacity:0;transform:translateX(-50%) scale(.2)}100%{opacity:0;transform:translateX(-50%) scale(.2)}}
@keyframes avale_j2{0%,62.78%{opacity:1;transform:translateX(-50%) scale(1)}64.38%{opacity:0;transform:translateX(-50%) scale(.2)}100%{opacity:0;transform:translateX(-50%) scale(.2)}}
@keyframes avale_j3{0%,71.06%{opacity:1;transform:translateX(-50%) scale(1)}72.66%{opacity:0;transform:translateX(-50%) scale(.2)}100%{opacity:0;transform:translateX(-50%) scale(.2)}}
@keyframes trav_j{0%,49.73%{left:-3%;opacity:0}49.78%{left:-3%;opacity:1}76.37%{left:103%;opacity:1}76.42%,100%{left:103%;opacity:0}}
@keyframes compte_j{0%{transform:translateY(0)}54.5%{transform:translateY(-0px)}55.5%{transform:translateY(-27px)}62.78%{transform:translateY(-27px)}63.78%{transform:translateY(-54px)}71.06%{transform:translateY(-54px)}72.06%{transform:translateY(-81px)}100%{transform:translateY(-81px)}}
@keyframes fini_j{0%,76.77%{opacity:0;transform:translate(-50%,4px)}79.37%,97%{opacity:1;transform:translate(-50%,0)}98%,100%{opacity:0;transform:translate(-50%,0)}}
@keyframes avale_r1{0%,83.16%{opacity:1;transform:translateX(-50%) scale(1)}84.76%{opacity:0;transform:translateX(-50%) scale(.2)}100%{opacity:0;transform:translateX(-50%) scale(.2)}}
@keyframes avale_r2{0%,90.15%{opacity:1;transform:translateX(-50%) scale(1)}91.75%{opacity:0;transform:translateX(-50%) scale(.2)}100%{opacity:0;transform:translateX(-50%) scale(.2)}}
@keyframes trav_r{0%,78.32%{left:-3%;opacity:0}78.37%{left:-3%;opacity:1}96%{left:103%;opacity:1}96.05%,100%{left:103%;opacity:0}}
@keyframes compte_r{0%{transform:translateY(0)}83.16%{transform:translateY(-0px)}84.16%{transform:translateY(-27px)}90.15%{transform:translateY(-27px)}91.15%{transform:translateY(-54px)}100%{transform:translateY(-54px)}}
@keyframes fini_r{0%,96.4%{opacity:0;transform:translate(-50%,4px)}97%,97%{opacity:1;transform:translate(-50%,0)}98%,100%{opacity:0;transform:translate(-50%,0)}}
@media(max-width:900px){
  .pistes{grid-template-columns:1fr}
}
@media(max-width:960px){
  .pistes{grid-template-columns:1fr}
  .scene,.scene--s{height:auto;padding-bottom:6px}
  .rail,.heures,.gl2{display:none}
  .tj{position:static;transform:none;animation:none;opacity:1;padding-top:0!important;
    align-items:flex-start;margin-bottom:9px}
  .scene .tj,.scene--s .tj{height:auto}
  .tj s,.tj::after{display:none}
  .tj b,.scene--s .tj b{white-space:nowrap;font-size:12px;padding:7px 12px}
  .tj b u{margin-right:7px}
  .tj b i{margin-left:7px}
  .jour__in{overflow-x:auto;overscroll-behavior-x:contain}
  .bilan em u{animation:none!important;transform:translateY(calc(var(--fin) * -1))}
}
@media(prefers-reduced-motion:reduce){
  .tj{animation:none!important;opacity:1!important}
  .gl2{animation:none!important;left:103.0%!important;opacity:1!important}
  .bilan em u{animation:none!important;transform:translateY(calc(var(--fin) * -1))!important}
}


@media(max-width:1100px){
  .hero__g{grid-template-columns:1fr}
  .grappe{max-width:460px;margin:0 auto;min-height:330px}
  .grid10{grid-template-columns:repeat(3,1fr)}
  .temps{grid-template-columns:repeat(2,1fr)}
  .duo{grid-template-columns:1fr}
  .ftr__g{grid-template-columns:1fr 1fr}
  .nav{display:none}
}
@media(max-width:620px){
  .grid10{grid-template-columns:repeat(2,1fr)}
  .temps{grid-template-columns:1fr}
  .hdr__r .btn--t{display:none}
  .btn{width:100%}
  .hero__cta{flex-direction:column}
  .note{display:none}
  .releve__lg{display:none}
  .grappe{min-height:290px}
  .jeton__p{transform:scale(.82)}
}

/* ============================================================
   NAV MOBILE, LANGUES, ACCESSIBILITE, DEBORDEMENTS (10/09)
   ============================================================ */
.skip{position:absolute;left:-999px;top:8px;z-index:100;background:#fff;padding:10px 14px;
  border-radius:var(--r);border:1px solid var(--ligne);font-size:14px}
.skip:focus{left:12px}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,
select:focus-visible,summary:focus-visible,label:focus-visible{outline:2px solid var(--bleu);outline-offset:3px}
.menu__t{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px}
.menu__b{display:none;width:44px;height:44px;border:1px solid var(--ligne);border-radius:var(--r);
  background:#fff;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px;flex-shrink:0}
.menu__b span{display:block;width:18px;height:2px;background:var(--encre);border-radius:2px;transition:.16s}
.nav a.on{color:var(--encre)}
.lang{position:relative;margin-left:4px;padding-left:12px;border-left:1px solid var(--ligne)}
.lang summary{list-style:none;display:flex;align-items:center;gap:7px;cursor:pointer;padding:5px 8px;
  border-radius:9px;color:var(--encre);font:500 13px/1 var(--f);letter-spacing:.01em;height:34px;white-space:nowrap}
.lang summary::-webkit-details-marker{display:none}
.lang summary::marker{content:"";display:none}
.lang summary b{font:inherit;font-weight:600}
.lang summary:hover{background:var(--creme)}
.lang summary::after{content:"";width:6px;height:6px;border-right:1.5px solid var(--gris);
  border-bottom:1.5px solid var(--gris);transform:rotate(45deg) translateY(-2px);margin-left:1px;transition:.16s}
.lang[open] summary::after{transform:rotate(-135deg) translateY(2px)}
.lang svg{width:20px;height:14px;border-radius:4px;box-shadow:0 0 0 1px rgba(17,20,24,.10);flex-shrink:0;display:block}
.lang__l{position:absolute;top:calc(100% + 8px);right:0;min-width:172px;background:#fff;border:1px solid var(--ligne);
  border-radius:var(--r);box-shadow:0 18px 40px rgba(17,20,24,.10);padding:6px;margin:0;list-style:none;z-index:70}
.lang__l a{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:8px;color:var(--encre);
  font-size:14px;white-space:nowrap}
.lang__l a:hover{background:var(--creme)}
.lang--p{display:flex;gap:14px;flex-wrap:wrap;font-size:12.5px}
.lang--p a{display:inline-flex;align-items:center;gap:6px;color:var(--gris2)}
.lang--p a.on{color:var(--encre)}
.lang--p svg{width:16px;height:11px;border-radius:3px;box-shadow:0 0 0 1px rgba(17,20,24,.10)}
.desc{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.desc a{display:block;padding:15px 17px;border:1px solid var(--ligne);border-radius:var(--r);
  background:#fff;color:var(--encre);transition:.16s}
.desc a:hover{border-color:var(--bleu);transform:translateY(-1px)}
.desc a b{display:block;font-weight:550;letter-spacing:-.02em}
.desc a span{display:block;font-size:13.5px;color:var(--gris);margin-top:3px;line-height:1.4}
.desc--v{margin-top:12px}
.desc__h{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:28px 0 12px}
.desc__h h3{font-size:17px;font-weight:550;letter-spacing:-.02em}
.desc__h a{font-size:14px;color:var(--bleu-h)}
.bal{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.bal__c{min-width:0}
@media(max-width:1100px){
  .menu__b{display:flex}
  .menu__t:checked ~ .nav{display:flex;flex-direction:column;gap:0;position:absolute;left:0;right:0;top:100%;
    background:#fff;border-bottom:1px solid var(--ligne);padding:6px clamp(20px,4vw,40px) 14px;font-size:16px;
    color:var(--encre);box-shadow:0 18px 40px rgba(17,20,24,.08)}
  .menu__t:checked ~ .nav a{padding:13px 0;border-bottom:1px solid var(--ligne)}
  .menu__t:checked ~ .nav .lang{border-left:none;padding:8px 0 0;margin:0}
  .menu__t:checked ~ .nav .lang summary{padding:8px 0;font-size:15px}
  .menu__t:checked ~ .nav .lang__l{position:static;box-shadow:none;border:none;padding:0 0 4px 6px;min-width:0}
  .menu__t:checked ~ .nav .lang__l a{border:none;padding:9px 6px}
  .menu__t:checked ~ .hdr__r .menu__b span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .menu__t:checked ~ .hdr__r .menu__b span:nth-child(2){opacity:0}
  .menu__t:checked ~ .hdr__r .menu__b span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .desc{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
  .bal__c{padding:20px 18px 18px}
  .bal__i{flex-wrap:wrap;gap:6px 14px}
  .bal__i b{white-space:normal;text-align:right}
  .bal__f{flex-wrap:wrap;gap:4px 14px}
  .bal__f b{font-size:19px;min-width:0}
  .ftr ul a{display:inline-block;padding:9px 0}
  .fil a{display:inline-block;padding:11px 0}
  .kick{font-size:12px}
  .bal__src,.bal__f span,.grappe__l,.vs thead th{font-size:12px}
}
@media(max-width:620px){
  .grappe__l{position:static;transform:none;white-space:normal;display:block;margin-top:10px;padding:0 8px}
  .hdr__in{gap:12px}
  .hdr__r .btn{width:auto;padding:10px 14px;font-size:14px}
  .hdr__r .btn--p{padding:11px 13px}
  .hdr__r .btn--p .btn__lab{display:none}
  .hdr__r .btn--p .btn__env{display:block}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* Sous 360px, deux planchers de largeur poussaient la page a 335px :
   le libelle du gros bouton, en nowrap, et .grappe dont l'aspect-ratio
   multiplie le min-height. Les enfants de grille gardent min-width:auto,
   donc ces planchers deviennent ceux de la colonne entiere. */
@media(max-width:360px){
  .hero__t,.grappe{min-width:0}
  .hero__cta .btn{white-space:normal}
  .grappe{min-height:250px;max-width:100%}
}

/* ============================================================
   GABARITS INTERNES — ville, hub, article, contact, legales
   ============================================================ */
.nav a.on{color:var(--encre)}
.fil{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-family:var(--m);font-size:11px;
  color:var(--gris2);letter-spacing:.03em;padding-bottom:20px}
.fil a{color:var(--gris2)}
.fil a:hover{color:var(--encre)}
.fil a::after{content:"/";margin-left:8px;color:var(--ligne2)}
.fil span{color:var(--gris)}

/* tete de page interne */
.tete{padding:clamp(30px,4vw,44px) 0 clamp(40px,5vw,60px);border-bottom:1px solid var(--ligne)}
.tete__g{display:grid;grid-template-columns:1.35fr .65fr;gap:clamp(28px,4vw,56px);align-items:end}
.tete h1{font-size:clamp(33px,4.4vw,52px);font-weight:550;letter-spacing:-.04em;line-height:1.04;
  text-wrap:balance}
.tete .lead{margin-top:16px;max-width:60ch}
.tete__c{display:flex;flex-direction:column;gap:11px}
.chiffre{border:1px solid var(--ligne);border-radius:var(--r3);padding:15px 18px;background:#fff}
.chiffre b{display:block;font-size:23px;font-weight:550;letter-spacing:-.035em;
  font-variant-numeric:tabular-nums}
.chiffre span{font-size:12.8px;color:var(--gris);line-height:1.4;display:block;margin-top:2px}
.faits{display:flex;flex-wrap:wrap;gap:7px 24px;padding-top:18px;font-family:var(--m);
  font-size:11.5px;color:var(--gris2);letter-spacing:.02em}
.faits b{color:var(--encre);font-weight:500}

/* grille de villes */
.reg{display:flex;flex-direction:column;gap:12px}
.reg__t{font-family:var(--m);font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--gris2);padding-bottom:2px;border-bottom:1px solid var(--ligne)}
.villes{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.ville{border:1px solid var(--ligne);border-radius:var(--r3);padding:17px 19px;background:#fff;
  display:flex;flex-direction:column;gap:6px;transition:.16s}
.ville:hover{border-color:var(--ligne2);box-shadow:0 8px 22px -14px rgba(17,20,24,.22)}
.ville b{font-size:16px;font-weight:550;letter-spacing:-.03em}
.ville span{font-size:13px;color:var(--gris)}
.ville em{font-style:normal;font-family:var(--m);font-size:10.5px;color:var(--gris2);margin-top:4px}
.ville--sr{background:var(--creme);border-style:dashed}
.ville--sr b{color:var(--gris)}

/* article */
.art{display:grid;grid-template-columns:220px minmax(0,1fr);gap:clamp(28px,4vw,64px);
  align-items:start;padding-top:clamp(34px,4vw,52px)}
.somm{position:sticky;top:78px;display:flex;flex-direction:column;gap:9px}
.somm b{font-family:var(--m);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--gris2);margin-bottom:3px}
.somm a{font-size:13.5px;color:var(--gris);line-height:1.4;padding:3px 0;
  border-left:2px solid var(--ligne);padding-left:12px;margin-left:-2px}
.somm a:hover{color:var(--encre);border-color:var(--bleu)}
.corps{max-width:70ch}
.corps h2{font-size:clamp(23px,2.4vw,30px);font-weight:550;letter-spacing:-.035em;
  margin:44px 0 14px;scroll-margin-top:86px}
.corps h3{font-size:18.5px;font-weight:550;letter-spacing:-.03em;margin:30px 0 10px}
.corps p{margin-bottom:17px;color:#2C333C}
.corps ul,.corps ol{margin:0 0 19px 0;padding-left:20px;display:flex;flex-direction:column;gap:8px}
.corps li{color:#2C333C}
.corps a{color:var(--bleu-h);text-decoration:underline;text-underline-offset:2px}
.chapo{font-size:19px;line-height:1.5;color:var(--gris);margin-bottom:26px}
.meta{display:flex;flex-wrap:wrap;gap:8px 20px;font-family:var(--m);font-size:11px;
  color:var(--gris2);letter-spacing:.03em;padding-top:14px}
.encadre{border:1px solid var(--ligne);border-left:3px solid var(--bleu);border-radius:0 var(--r3) var(--r3) 0;
  background:var(--bleu-pale);padding:20px 22px;margin:26px 0}
.encadre b{display:block;font-weight:550;letter-spacing:-.02em;margin-bottom:6px}
.encadre p{margin:0;font-size:14.8px;color:#2C333C}
.cite{font-family:var(--s);font-size:21px;line-height:1.45;letter-spacing:-.012em;
  border-left:2px solid var(--ligne2);padding-left:22px;margin:28px 0;color:var(--encre)}
.suite{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px;margin-top:20px}

/* formulaire */
.form{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(28px,4vw,60px);align-items:start;
  padding-top:clamp(34px,4vw,52px)}
.champs{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.champ{display:flex;flex-direction:column;gap:7px}
.champ--l{grid-column:1/-1}
.champ label{font-size:13.5px;font-weight:500;letter-spacing:-.01em}
.champ label em{font-style:normal;color:var(--gris2);font-weight:400}
.champ input,.champ select,.champ textarea{font-family:var(--f);font-size:15px;color:var(--encre);
  background:#fff;border:1px solid var(--ligne2);border-radius:var(--r);padding:12px 14px;
  width:100%;transition:.14s}
.champ textarea{min-height:132px;resize:vertical;line-height:1.5}
.champ input:focus,.champ select:focus,.champ textarea:focus{outline:none;border-color:var(--bleu);
  box-shadow:0 0 0 3px rgba(28,145,255,.15)}
.champ small{font-size:12.2px;color:var(--gris2)}
.form__c{border:1px solid var(--ligne);border-radius:var(--r2);padding:26px 24px;background:var(--creme);
  display:flex;flex-direction:column;gap:20px}
.etape{display:grid;grid-template-columns:26px 1fr;gap:13px;align-items:start}
.etape i{width:26px;height:26px;border-radius:50%;background:var(--bleu-pale);color:var(--bleu-h);
  display:flex;align-items:center;justify-content:center;font-family:var(--m);font-size:11px;
  font-weight:500;font-style:normal}
.etape b{display:block;font-size:14.5px;font-weight:550;letter-spacing:-.02em;margin-bottom:3px}
.etape p{font-size:13.5px;color:var(--gris);line-height:1.45}
.consent{grid-column:1/-1;display:flex;gap:11px;align-items:flex-start;font-size:13px;
  color:var(--gris);line-height:1.45}
.consent input{width:17px;height:17px;margin-top:1px;flex-shrink:0;accent-color:var(--bleu)}

/* FAQ */
.faq{display:flex;flex-direction:column;border-top:1px solid var(--ligne)}
.faq details{border-bottom:1px solid var(--ligne)}
.faq summary{cursor:pointer;padding:19px 0;font-size:17px;font-weight:550;letter-spacing:-.028em;
  list-style:none;display:flex;align-items:center;justify-content:space-between;gap:18px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";width:11px;height:11px;flex-shrink:0;
  border-right:1.8px solid var(--gris2);border-bottom:1.8px solid var(--gris2);
  transform:rotate(45deg);margin-top:-5px;transition:.18s}
.faq details[open] summary::after{transform:rotate(225deg);margin-top:3px}
.faq details p{padding:0 0 20px;max-width:76ch;color:var(--gris);font-size:15.2px;line-height:1.55}

/* pages legales */
.legal{max-width:74ch;padding-top:clamp(30px,4vw,44px)}
.legal h2{font-size:20px;font-weight:550;letter-spacing:-.03em;margin:36px 0 12px;
  padding-top:22px;border-top:1px solid var(--ligne)}
.legal h2:first-of-type{border-top:none;padding-top:0;margin-top:0}
.legal p{margin-bottom:14px;color:#2C333C;font-size:15.5px}
.legal dl{display:grid;grid-template-columns:auto 1fr;gap:9px 24px;margin-bottom:18px;font-size:15px}
.legal dt{font-family:var(--m);font-size:11.5px;color:var(--gris2);letter-spacing:.04em;
  text-transform:uppercase;padding-top:3px}
.legal dd{color:#2C333C}
.avalider{background:#FFF6E4;border:1px dashed #E0BC72;border-radius:var(--r3);
  padding:15px 18px;margin:16px 0;font-size:14px;color:#7A5307;line-height:1.5}
.avalider b{font-weight:550}

/* ---- mini-glouton pose a droite des hero de pages internes ---- */
.mini{background:#E9F3FF;border-radius:var(--r2);padding:20px 18px 14px;position:relative;
  --m1:#5FB2FF;--m2:#1C91FF;--oeil:#0B4F8C}
.mini--j{background:#FFF6E4;--m1:#FFD37A;--m2:#F5A814;--oeil:#7A5307}
.mini--r{background:#FFF0F6;--m1:#FFD3E3;--m2:#FF92BC;--oeil:#9E3D64}
.mini__s{position:relative;height:126px}
.mini__rail{position:absolute;left:0;right:0;top:94px;height:2px;border-radius:2px;
  background:color-mix(in srgb,var(--m2) 26%,transparent)}
.mini__t{position:absolute;top:0;height:98px;transform:translateX(-50%);white-space:nowrap;
  display:flex;flex-direction:column;align-items:center;
  animation-duration:9s;animation-timing-function:linear;animation-iteration-count:infinite}
.mini__t b{background:#fff;border-radius:var(--rp);padding:6px 12px;font-size:11.8px;font-weight:400;
  letter-spacing:-.01em;box-shadow:0 1px 2px rgba(17,20,24,.06),0 6px 14px -9px rgba(17,20,24,.26)}
.mini__t s{text-decoration:none;width:1px;flex:1;margin-top:5px;
  background:color-mix(in srgb,var(--m2) 38%,transparent)}
.mini__t::after{content:"";width:7px;height:7px;border-radius:50%;background:#fff;
  border:2px solid var(--m2);margin-bottom:-5px}
.mini__t.p1{padding-top:0}.mini__t.p2{padding-top:25px}.mini__t.p3{padding-top:50px}
@media(max-width:620px){.mini__t b{font-size:11px;padding:5px 9px}.mini__t.p1{transform:translateX(-25%)}.mini__t.p3{transform:translateX(-78%)}}
.mini__g{position:absolute;top:72px;width:44px;height:44px;margin-left:-22px;z-index:5;
  animation:trav_m 9s linear infinite}
.mini__g .machoire{width:44px;height:22px}
.mini__g .machoire--h{border-radius:44px 44px 0 0}
.mini__g .machoire--b{border-radius:0 0 44px 44px}
.mini__g i{position:absolute;left:26px;top:9px;width:5px;height:5px;border-radius:50%;
  background:var(--oeil);z-index:6}
.mini__n{font-family:var(--m);font-size:10.5px;color:var(--gris2);text-align:center;
  letter-spacing:.03em;line-height:1.4}
@keyframes trav_m{0%{left:-8%}100%{left:108%}}
@keyframes avale_m1{0%,29.9%{opacity:1;transform:translateX(-50%) scale(1)}
  31.9%,100%{opacity:0;transform:translateX(-50%) scale(.2)}}
@keyframes avale_m2{0%,55.7%{opacity:1;transform:translateX(-50%) scale(1)}
  57.7%,100%{opacity:0;transform:translateX(-50%) scale(.2)}}
@keyframes avale_m3{0%,81.6%{opacity:1;transform:translateX(-50%) scale(1)}
  83.6%,100%{opacity:0;transform:translateX(-50%) scale(.2)}}
.mini__t.p1{animation-name:avale_m1}
.mini__t.p2{animation-name:avale_m2}
.mini__t.p3{animation-name:avale_m3}
@media(prefers-reduced-motion:reduce){
  .mini__t{animation:none!important;opacity:1!important}
  .mini__g{animation:none!important;left:108%!important}
}
@media(max-width:900px){.mini{max-width:440px}}

/* ---- teintes reutilisables, reprises du releve des dix systemes ---- */
.t1{--c1:#B9E2FF;--c2:#59B4FF}  .t2{--c1:#FFDCE9;--c2:#FF9EC2}
.t3{--c1:#EFFAC4;--c2:#CDE95F}  .t4{--c1:#FFE3B0;--c2:#FFAA0D}
.t5{--c1:#DED6FF;--c2:#A78BFA}  .t6{--c1:#C7EBD8;--c2:#5FC194}
.t7{--c1:#FFD9C7;--c2:#FF9067}  .t8{--c1:#CFD9FF;--c2:#7C93F0}
.pastille{width:31px;height:31px;border-radius:10px;flex-shrink:0;
  background:linear-gradient(146deg,var(--c1),var(--c2));
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.55),0 4px 9px -4px rgba(17,20,24,.3)}
/* carte teintee : liseret en tete, comme les dix systemes */
.card--t{position:relative;overflow:hidden;gap:12px}
.card--t::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:var(--c2);opacity:.6;transition:.16s}
.card--t:hover::before{opacity:1}
.card--t .card__n{color:var(--gris2)}

/* le hub : une teinte par region */
.reg__t{display:flex;align-items:center;gap:10px}
.reg__t .pastille{width:19px;height:19px;border-radius:6px}
/* le filet de teinte : clippe sur le rayon de la carte (sinon il depasse des coins
   arrondis), et couvre la bordure haut/bas au lieu de la seule boite de padding */
.ville{position:relative;padding-left:20px;overflow:hidden}
.ville::before{content:"";position:absolute;left:-1px;top:-1px;bottom:-1px;width:3px;
  background:var(--c2);opacity:.6}
.ville--sr::before{opacity:.24}

/* le contact : des etapes qui portent la couleur */
.etape i{background:linear-gradient(146deg,var(--c1,#BEDFFF),var(--c2,#1C91FF));color:#fff;
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.5)}
.form__c{background:#F4F9FF;border-color:#DCEBFF}

/* l'article : une ouverture coloree */
.ouv{border-radius:var(--r2);background:#E9F3FF;padding:24px 26px;margin:6px 0 26px;
  display:flex;align-items:center;gap:18px}
.ouv .pastille{width:44px;height:44px;border-radius:14px}
.ouv b{display:block;font-size:15.5px;font-weight:550;letter-spacing:-.025em;margin-bottom:3px}
.ouv span{font-size:13.8px;color:var(--gris);line-height:1.45}

/* ---- carte de France : contour reel (france-geojson) simplifie ---- */
.carte-w{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(26px,4vw,56px);
  align-items:center}
.carte{width:100%;height:auto;max-height:560px;display:block}
.c-f{fill:#F1F7FD;stroke:#D2E2F2;stroke-width:1.1;stroke-linejoin:round}
.c-v text{font-family:var(--m);font-size:11px;fill:var(--gris);letter-spacing:-.01em}
.c-v .c-p{fill:#C3CFDC}
.c-v .c-h{fill:transparent}
.c-v--on .c-p{fill:var(--bleu)}
.c-v--on text{fill:var(--encre);font-weight:500}
.c-v--on{cursor:pointer}
.c-v--on .c-h{fill:rgba(28,145,255,.14);transform:scale(.55);transform-origin:center;transform-box:fill-box;
  transition:transform .18s}
.c-v--on:hover .c-h{transform:scale(1)}
.c-v--on:hover .c-p{fill:var(--bleu-h)}
.c-v--on:focus-visible{outline:2px solid var(--bleu);outline-offset:3px;border-radius:4px}
.carte-l{display:flex;flex-direction:column;gap:14px}
.carte-l__i{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--gris)}
.carte-l__i i{width:11px;height:11px;border-radius:50%;flex-shrink:0}
.carte-l__i i.on{background:var(--bleu)}
.carte-l__i i.sr{background:#C3CFDC}
@media(max-width:860px){.carte-w{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.c-v--on .c-h{transition:none}}

/* ---- le formulaire prend un fond, les champs restent blancs dessus ---- */
.champs{background:#EAF4FF;border:1px solid #CFE4FF;border-radius:var(--r2);
  padding:clamp(22px,2.6vw,30px)}
.form__c{background:#fff;border-color:var(--ligne)}

/* ---- le hub du blog ---- */
.rubs{display:flex;flex-wrap:wrap;gap:9px}
.rub{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--ligne2);
  border-radius:var(--rp);padding:8px 16px;font-size:13.5px;transition:.16s;background:#fff}
.rub:hover{border-color:var(--gris2);background:var(--creme)}
.rub i{width:9px;height:9px;border-radius:50%;background:var(--c2);display:block;flex-shrink:0}
.une{display:grid;grid-template-columns:.85fr 1.15fr;border:1px solid var(--ligne);
  border-radius:var(--r2);overflow:hidden;background:#fff}
.une__v{background:#E9F3FF;padding:34px;display:flex;align-items:center;justify-content:center}
.une__v .pastille{width:64px;height:64px;border-radius:20px}
.une__t{padding:32px 34px;display:flex;flex-direction:column;gap:12px;justify-content:center}
.une__t h2{font-size:clamp(21px,2.2vw,27px);font-weight:550;letter-spacing:-.035em;line-height:1.2}
.une__t p{font-size:15px;color:var(--gris);line-height:1.5}
.arts{display:grid;grid-template-columns:repeat(auto-fill,minmax(296px,1fr));gap:16px}
.art-c{border:1px solid var(--ligne);border-radius:var(--r3);background:#fff;padding:22px;
  display:flex;flex-direction:column;gap:9px;position:relative;overflow:hidden;transition:.16s}
.art-c::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:var(--c2);opacity:.6}
.art-c:hover{border-color:var(--ligne2);box-shadow:0 8px 24px -14px rgba(17,20,24,.2)}
.art-c__r{font-family:var(--m);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--gris2)}
.art-c h3{font-size:16.5px;font-weight:550;letter-spacing:-.03em;line-height:1.28}
.art-c p{font-size:13.8px;color:var(--gris);line-height:1.5}
.art-c__m{margin-top:auto;padding-top:13px;font-family:var(--m);font-size:10.5px;color:var(--gris2)}
.art-c--sr{background:var(--creme);border-style:dashed}
.art-c--sr h3{color:var(--gris)}
.art-c--sr::before{opacity:.28}
@media(max-width:720px){.une{grid-template-columns:1fr}}

/* les titres de section legale prennent un filet colore */
.legal h2{padding-left:15px;border-left:3px solid #59B4FF;border-top:none;
  padding-top:0;margin-top:38px}
.legal h2:first-of-type{margin-top:0}
.legal h2:nth-of-type(4n+2){border-left-color:#FF9EC2}
.legal h2:nth-of-type(4n+3){border-left-color:#CDE95F}
.legal h2:nth-of-type(4n+4){border-left-color:#FFAA0D}

@media(max-width:900px){
  .tete__g{grid-template-columns:1fr}
  .art{grid-template-columns:1fr}
  .somm{position:static;flex-direction:row;flex-wrap:wrap;gap:8px}
  .somm b{width:100%}
  .form{grid-template-columns:1fr}
}
@media(max-width:620px){
  .champs{grid-template-columns:1fr}
  .legal dl{grid-template-columns:1fr;gap:3px}
  .legal dt{padding-top:10px}
}

/* ============================================================
   BIBLIOTHEQUE VISUELLE — schemas d'automatisation, pas des captures
   ============================================================ */
.toile{border:1px solid var(--ligne);border-radius:var(--r2);overflow:hidden;background:#fff}
.toile__bar{display:flex;align-items:center;gap:12px;padding:12px 18px;
  border-bottom:1px solid var(--ligne);background:var(--creme)}
.toile__dots{display:flex;gap:5px;flex-shrink:0}
.toile__dots i{width:8px;height:8px;border-radius:50%;background:var(--ligne2)}
.toile__t{font-family:var(--m);font-size:11px;color:var(--gris);letter-spacing:.02em}
.toile__t b{color:var(--encre);font-weight:500}
.toile__c{padding:clamp(22px,3vw,34px);background-color:var(--creme);
  background-image:radial-gradient(var(--ligne2) 1px,transparent 1px);
  background-size:17px 17px;display:flex;flex-wrap:wrap;align-items:stretch;gap:0}
.toile__n{padding:12px 18px;border-top:1px solid var(--ligne);background:#fff;
  font-family:var(--m);font-size:10.5px;color:var(--gris2);letter-spacing:.03em}

/* les noeuds */
.nd{display:flex;align-items:center;gap:11px;background:#fff;border:1px solid var(--ligne);
  border-radius:14px;padding:12px 15px;min-width:184px;flex:1 1 184px;
  box-shadow:0 6px 18px -12px rgba(17,20,24,.28)}
.nd i{width:29px;height:29px;border-radius:9px;flex-shrink:0;display:grid;place-items:center;
  font-family:var(--m);font-size:11px;font-weight:500;color:#fff}
.nd--b i{background:linear-gradient(150deg,#5FB4FF,#1C7FE0)}
.nd--r i{background:linear-gradient(150deg,#FFC4D9,#E58AAE)}
.nd--c i{background:linear-gradient(150deg,#E5F58D,#BFD44F);color:#4A5510}
.nd--o i{background:linear-gradient(150deg,#FFC96B,#F0980A)}
.nd--v i{background:linear-gradient(150deg,#79C79B,#3E8460)}
.nd--g i{background:linear-gradient(150deg,#C6CDD6,#8A94A1)}
.nd b{display:block;font-size:13.5px;font-weight:550;letter-spacing:-.025em;line-height:1.3}
.nd em{font-style:normal;font-family:var(--m);font-size:10px;color:var(--gris2);
  letter-spacing:.03em;text-transform:uppercase}
/* le noeud qui decide : un losange a la place du carre */
.nd--q i{background:linear-gradient(150deg,#FFC96B,#F0980A);border-radius:5px;
  transform:rotate(45deg)}
.nd--q i span{transform:rotate(-45deg);display:block}

/* le connecteur : trait pointille qui coule, avec une pointe.
   pointille = degrade repete et PAS border-style:dashed — on n'anime pas
   le defilement d'une bordure. */
.cx{flex:0 0 34px;align-self:center;height:16px;position:relative}
.cx::before{content:"";position:absolute;top:50%;left:0;right:6px;height:1.6px;
  margin-top:-.8px;
  background-image:repeating-linear-gradient(90deg,var(--ligne2) 0 6px,transparent 6px 12px);
  background-size:12px 1.6px;
  animation:coule .9s linear infinite}
.cx::after{content:"";position:absolute;top:50%;right:0;width:6px;height:6px;
  margin-top:-3px;border-top:1.6px solid var(--gris2);border-right:1.6px solid var(--gris2);
  transform:rotate(45deg)}
@keyframes coule{to{background-position:12px 0}}
@keyframes coule-v{to{background-position:0 12px}}
.cx--v{flex:0 0 26px;align-self:stretch;width:100%;height:26px}
.cx--v::before{top:0;bottom:6px;left:24px;right:auto;width:1.6px;height:auto;
  margin:0 0 0 -.8px;
  background-image:repeating-linear-gradient(180deg,var(--ligne2) 0 6px,transparent 6px 12px);
  background-size:1.6px 12px;
  animation:coule-v .9s linear infinite}
.cx--v::after{top:auto;bottom:0;left:24px;right:auto;margin:0 0 0 -3px;
  transform:rotate(135deg)}

/* le scenario qui decide : une condition, deux sorties */
.toile__c--br{flex-direction:column;align-items:stretch}
/* cette toile est en colonne a TOUTES les largeurs : flex-basis y pilote la
   hauteur, donc les noeuds de la tige s'etirent a 184px sans ce reset. Il ne
   vise que les enfants directs — ceux des branches restent en ligne. */
.toile__c--br > .nd{flex:0 0 auto}
.br{display:flex;flex-direction:column;gap:14px;padding-left:24px;margin-top:14px;
  border-left:1.6px solid var(--ligne2)}
.br__l{display:flex;align-items:flex-start;gap:12px;position:relative}
.br__l::before{content:"";position:absolute;left:-24px;top:19px;width:18px;height:1.6px;
  background:var(--ligne2)}
.br__tag{flex-shrink:0;margin-top:11px;font-family:var(--m);font-size:10px;
  letter-spacing:.06em;text-transform:uppercase;padding:4px 10px;border-radius:var(--rp)}
.br__tag--o{background:#E3F3E9;color:#2E7150}
.br__tag--n{background:#FDE7E2;color:#B23B22}
.br__f{flex:1;display:flex;flex-wrap:wrap;align-items:center;gap:0}

/* l'agent qui repond, avec ses sources */
.conv{border:1px solid var(--ligne);border-radius:var(--r2);overflow:hidden;background:#fff}
.conv__l{padding:clamp(20px,2.6vw,28px);display:flex;flex-direction:column;gap:16px;
  background:var(--creme)}
.msg{max-width:min(560px,88%);border-radius:16px;padding:14px 17px;background:#fff;
  border:1px solid var(--ligne)}
.msg b{display:block;font-family:var(--m);font-size:10px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--gris2);margin-bottom:6px}
.msg p{margin:0;font-size:14.5px;line-height:1.55;color:#2C333C}
.msg--u{align-self:flex-start;border-top-left-radius:5px}
.msg--a{align-self:flex-end;border-top-right-radius:5px;background:var(--bleu-pale);
  border-color:#DCEBFF}
.msg--a b{color:var(--bleu-h)}
.srcs{display:flex;flex-wrap:wrap;gap:6px;margin-top:11px;padding-top:11px;
  border-top:1px solid #DCEBFF}
.srcs span{font-family:var(--m);font-size:10px;color:var(--bleu-h);background:#fff;
  border:1px solid #DCEBFF;border-radius:var(--rp);padding:3px 9px}

/* le journal des passages */
.runs{border:1px solid var(--ligne);border-radius:var(--r2);overflow:hidden;background:#fff}
.runs__w{overflow-x:auto}
.runs table{width:100%;border-collapse:collapse;min-width:520px}
.runs th{font-family:var(--m);font-size:10px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--gris2);text-align:left;font-weight:400;padding:11px 18px;
  border-bottom:1px solid var(--ligne);background:var(--creme)}
.runs td{padding:13px 18px;border-bottom:1px solid var(--ligne);font-size:14px;
  color:#2C333C;vertical-align:middle}
.runs tr:last-child td{border-bottom:0}
.runs td:first-child{font-family:var(--m);font-size:12px;color:var(--gris)}
.et{display:inline-flex;align-items:center;gap:6px;font-family:var(--m);font-size:10.5px;
  letter-spacing:.04em;padding:4px 10px;border-radius:var(--rp);white-space:nowrap}
.et::before{content:"";width:6px;height:6px;border-radius:50%}
.et--ok{background:#E3F3E9;color:#2E7150}
.et--ok::before{background:#489467}
.et--ko{background:#FDE7E2;color:#B23B22}
.et--ko::before{background:#EE5338}
.et--h{background:#FFF1D9;color:#8A5A03}
.et--h::before{background:#FFAA0D}

/* le bandeau de ville — la seule photo de la DA, tenue en bande large
   pour qu'elle ponctue la page au lieu de la dominer */
.vue{display:block;margin:0}
.vue img{display:block;width:100%;height:auto;aspect-ratio:2.2/1;object-fit:cover;
  border-radius:var(--r2);border:1px solid var(--ligne);background:var(--creme)}
.vue figcaption{display:flex;flex-wrap:wrap;gap:4px 14px;justify-content:space-between;
  padding-top:10px;font-family:var(--m);font-size:10.5px;color:var(--gris2);
  letter-spacing:.03em}
.vue figcaption a{color:var(--gris2);text-decoration:underline;
  text-decoration-color:var(--ligne2);text-underline-offset:2px}
.vue figcaption a:hover{color:var(--gris)}

@media(max-width:900px){
  .toile__c{flex-direction:column}
  /* en colonne, flex-basis pilote la HAUTEUR : sans ce reset chaque noeud
     s'etire a 184px de haut. */
  .nd{flex:0 0 auto;width:100%}
  .cx{flex:0 0 26px;align-self:stretch;width:100%;height:26px}
  .cx::before{top:0;bottom:6px;left:24px;right:auto;width:1.6px;height:auto;
  margin:0 0 0 -.8px;
  background-image:repeating-linear-gradient(180deg,var(--ligne2) 0 6px,transparent 6px 12px);
  background-size:1.6px 12px;
  animation:coule-v .9s linear infinite}
  .cx::after{top:auto;bottom:0;left:24px;right:auto;margin:0 0 0 -3px;
  transform:rotate(135deg)}
  .br__f{flex-direction:column;align-items:stretch}
  .br__l{flex-direction:column;gap:6px}
  .br__l::before{display:none}
  .br__tag{margin-top:0;align-self:flex-start}
  .msg{max-width:100%}
}
@media(prefers-reduced-motion:reduce){.cx::before{animation:none}}