@font-face{font-family:"Bricolage Grotesque";font-weight:200 800;font-display:swap;src:url(f/br.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212}
@font-face{font-family:"Bricolage Grotesque";font-weight:200 800;font-display:swap;src:url(f/br-ext.woff2) format("woff2");unicode-range:U+0100-0130,U+0132-0151,U+0154-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+A720-A7FF}
@font-face{font-family:"Inter Tight";font-weight:100 900;font-display:swap;src:url(f/it.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2190-2199,U+2212}
@font-face{font-family:"Inter Tight";font-weight:100 900;font-display:swap;src:url(f/it-ext.woff2) format("woff2");unicode-range:U+0100-0130,U+0132-0151,U+0154-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+A720-A7FF}
@font-face{font-family:"Urbanist";font-style:italic;font-weight:100 900;font-display:swap;src:url(f/ur-i.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212}
@font-face{font-family:"Urbanist";font-style:italic;font-weight:100 900;font-display:swap;src:url(f/ur-i-ext.woff2) format("woff2");unicode-range:U+0100-0130,U+0132-0151,U+0154-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+A720-A7FF}

/* ==========================================================================
   FILL · identité lavande et corail
   Deux familles, chacune en trois nuances (foncée, principale, claire), et trois neutres.
   La cible donne sa famille : lavande pour les collectivités, corail pour les entreprises.
   Les compositions sont ton sur ton : un fond, ses motifs plus clairs ou plus foncés.
   Héritage Studio ES : Bricolage Grotesque, Inter Tight, Urbanist italique, cartes et feuilles.
   ========================================================================== */
:root{
  --lav-f:#7052B3;--lav:#B8A4FF;--lav-c:#E9E1FF;
  --cor-f:#B95543;--cor:#FF8A6B;--cor-c:#FFE0D5;
  --encre:#1A1A1A;--sable:#F8F5F2;--gris:#E2DBD3;--blanc:#FFFFFF;
  /* la cible : collectivité par défaut */
  --cible:var(--lav-f);--cible3:var(--lav);--cible2:var(--lav-c);
  --cible-t:#5B3F9C; /* texte sur fond clair, contraste renforcé */
  /* accent d'interaction : le corail du logo */
  --fil:var(--cible3);--fil-f:var(--cible);--fil-c:var(--cible2);
  --mu:rgba(26,26,26,.72);--fa:rgba(26,26,26,.66);--ln:rgba(26,26,26,.1);--ln2:rgba(26,26,26,.2);
  --ntx:#F8F5F2;--nmu:rgba(248,245,242,.78);--nln:rgba(248,245,242,.2);
  /* alias des anciens noms, gardés pour les composants */
  --creme:var(--sable);--creme2:var(--gris);--nuit:var(--encre);--aubergine:var(--lav-f);
  --papier:var(--sable);--papier2:var(--gris);--fill:var(--cible3);--fill2:var(--cible2);--rouge:var(--cor);--vermillon:var(--cor);
  --d:"Bricolage Grotesque","Arial Black",sans-serif;--f:"Inter Tight","Helvetica Neue",Arial,sans-serif;--sf:"Urbanist","Avenir Next","Helvetica Neue",sans-serif;
  --g:clamp(16px,3.4vw,52px);--max:1360px;--r:26px;--r2:16px;--fr:40px;
  --e:cubic-bezier(.16,1,.3,1);--io:cubic-bezier(.65,0,.35,1);--sp:cubic-bezier(.34,1.45,.64,1);
  --t-mega:clamp(46px,8.2vw,128px);--t-h2:clamp(36px,5.2vw,78px);
  color-scheme:light;
}
html[data-cible="e"]{--cible:#B95543;--cible3:#FF8A6B;--cible2:#FFE0D5;--cible-t:#9A4232}
@property --cible{syntax:'<color>';inherits:true;initial-value:#7052B3}
@property --cible2{syntax:'<color>';inherits:true;initial-value:#E9E1FF}
@property --cible3{syntax:'<color>';inherits:true;initial-value:#B8A4FF}
html{transition:--cible .6s var(--e),--cible2 .6s var(--e),--cible3 .6s var(--e)}
@media (max-width:860px){:root{--fr:26px;--r:22px}}

*,*::before,*::after{box-sizing:border-box}
html{background:var(--creme);-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:96px}
body{position:relative;margin:0;background:var(--creme);color:var(--encre);font:400 17px/1.55 var(--f);letter-spacing:-.008em;-webkit-font-smoothing:antialiased;overflow-x:clip}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
p,h1,h2,h3,h4,h5,ul,ol,figure,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
[hidden]{display:none!important}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--cible);outline-offset:3px;border-radius:10px}
.evite{position:absolute;left:12px;top:-60px;z-index:100;background:var(--encre);color:var(--ntx);padding:10px 16px;border-radius:999px}
.evite:focus{top:12px}
.w{width:min(100% - 2*var(--g),var(--max));margin-inline:auto}
.d{font-family:var(--d);font-weight:650;letter-spacing:-.028em;line-height:1}
.it{font-family:var(--sf);font-style:italic;font-weight:300;letter-spacing:-.012em}
svg.i{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.num{font-variant-numeric:tabular-nums}
.mu{color:var(--mu)}
.note{font-size:14px;color:var(--fa);line-height:1.55;max-width:780px}
.fictif{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:999px;background:var(--blanc);box-shadow:inset 0 0 0 1px var(--ln);color:var(--mu);font-size:12.5px;font-weight:550;white-space:nowrap}
.nw{white-space:nowrap}
.cap{font-size:12.5px;font-weight:600;letter-spacing:.02em;color:var(--fa)}

/* chapitres sombres : tout s'inverse d'un coup */
.dk{color:var(--ntx);--mu:var(--nmu);--fa:rgba(248,245,242,.66);--ln:var(--nln);--ln2:rgba(248,245,242,.28)}
.dk :focus-visible{outline-color:var(--ntx)}

/* les filets de paragraphe : des bandes nettes, posées sous la ligne de base et légèrement décalées,
   à la manière d'un filet InDesign. Elles s'étendent au défilement (--k, réglé par le script). */
.trait,.surligne{position:relative;display:inline-block;isolation:isolate;white-space:nowrap;padding:0;background:none}
.trait::after,.surligne::after{content:"";position:absolute;z-index:-1;left:.14em;right:-.22em;bottom:.02em;height:.24em;background:var(--filet,var(--cible3));transform:scaleX(var(--k,1));transform-origin:0 50%;pointer-events:none}
.trait.v2::after{left:-.08em;right:.18em;bottom:-.07em;height:.17em}
.trait.v3::after{left:.3em;right:-.3em;bottom:-.03em;height:.2em}
.js .trait::after{transform:scaleX(var(--k,0))}
.trait.sans::after{display:none}
.lav-c,.cible2{--filet:var(--cible3)}

/* boutons : l'encre ; au survol le fond passe au rouge du fil et la flèche avance d'un cran */
.bt{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.6em;min-height:50px;padding:0 1.35em;border-radius:999px;background:var(--encre);color:var(--ntx);font-weight:550;font-size:15.5px;letter-spacing:-.006em;white-space:nowrap;transition:background-color .35s var(--e),color .35s,box-shadow .35s,transform .4s var(--sp)}
.bt .ar{position:relative;display:grid;place-items:center;width:26px;height:26px;margin-right:-.55em;border-radius:50%;background:rgba(255,255,255,.14);overflow:hidden;transition:background .35s}
.bt .ar svg{transition:transform .45s var(--e)}
.bt .ar::after{content:"";position:absolute;inset:0;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/13px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/13px no-repeat;transform:translateX(-140%);transition:transform .45s var(--e)}
.bt:is(:hover,:focus-visible) .ar svg{transform:translateX(140%)}
.bt:is(:hover,:focus-visible) .ar::after{transform:none}
@media (hover:hover){.bt:hover{background:var(--cible);color:#fff}}
.bt:focus-visible{background:var(--cible);color:#fff}
.bt:active{transform:scale(.97)}
.bt.cl{background:transparent;color:var(--encre);box-shadow:inset 0 0 0 1.5px var(--encre)}
.bt.cl .ar{background:rgba(26,26,26,.07)}
@media (hover:hover){.bt.cl:hover{background:var(--encre);color:var(--ntx);box-shadow:inset 0 0 0 1.5px var(--encre)}}
.bt.cl:focus-visible{background:var(--encre);color:var(--ntx)}
.bt.sm{min-height:42px;font-size:14.5px;padding:0 1.1em}
.bt.lg2{min-height:56px;font-size:16px;padding:0 1.5em}
.bt[aria-disabled=true],.bt:disabled{opacity:.36;cursor:not-allowed}
.dk .bt{background:var(--ntx);color:var(--encre)}.dk .bt .ar{background:rgba(26,26,26,.08)}
.dk .bt.cl{background:transparent;color:var(--ntx);box-shadow:inset 0 0 0 1.5px var(--ntx)}
@media (hover:hover){.dk .bt:hover{background:var(--cible3);color:var(--encre)}.dk .bt.cl:hover{background:var(--ntx);color:var(--encre)}}
.rouge .bt{background:var(--encre);color:var(--ntx)}
@media (hover:hover){.rouge .bt:hover{background:var(--cible);color:#fff}}
.bts{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.ic{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--blanc);box-shadow:inset 0 0 0 1px var(--ln);font-size:18px;transition:transform .4s var(--sp),background .3s}
.ic:active{transform:scale(.9)}
.dk .ic{background:rgba(255,255,255,.06);color:var(--ntx)}

/* liens : un filet désaxé sous le lien ; au survol il glisse et la flèche avance */
.lien{position:relative;display:inline-flex;align-items:center;gap:.4em;font-weight:550;padding-bottom:4px}
.lien::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;background:currentColor;transform:rotate(-.6deg);transform-origin:0 50%;transition:transform .5s var(--e),background .3s}
.lien svg{transition:transform .45s var(--e)}
.lien:is(:hover,:focus-visible)::after{background:var(--fil);transform:rotate(.4deg) translateX(3px) scaleX(.96)}
.lien:is(:hover,:focus-visible) svg{transform:translateX(4px)}
.dk .lien:is(:hover,:focus-visible)::after{background:var(--fil)}

/* ---------- le mot-symbole : « fi » typographique, « ll » d'un seul geste manuscrit, le second part en fil ---------- */
.lg{display:inline-flex;align-items:center;color:var(--encre)}
.lg svg{height:30px;width:auto;overflow:visible}
.lg .lg-fi{fill:currentColor}
.lg :is(.lg-l1,.lg-l2){fill:none;stroke-linecap:round;stroke-linejoin:round}
.lg .lg-l1{stroke:currentColor}
.lg .lg-l2{stroke:var(--fil)}
@media (prefers-reduced-motion:no-preference){
  .js .lg.anim :is(.lg-l1,.lg-l2){stroke-dasharray:1 2;stroke-dashoffset:1}
  .js .lg.anim .lg-l1{animation:logo-l .55s cubic-bezier(.55,0,.6,1) .25s forwards}
  .js .lg.anim .lg-l2{animation:logo-l .85s cubic-bezier(.2,0,.15,1) .78s forwards}
  .lg:is(:hover,:focus-visible) .lg-l2{animation:logo-re 1s var(--io)}
}
@keyframes logo-l{to{stroke-dashoffset:0}}
@keyframes logo-re{0%{stroke-dasharray:1 2;stroke-dashoffset:0}45%{stroke-dasharray:1 2;stroke-dashoffset:-1}46%{stroke-dashoffset:1}100%{stroke-dasharray:1 2;stroke-dashoffset:0}}

/* ---------- en-tête : une bande opaque qui prend la couleur de la rubrique traversée ---------- */
.hd{position:fixed;z-index:50;top:0;left:0;right:0;padding-top:env(safe-area-inset-top,0px);background:var(--hd-bg,var(--creme));color:var(--hd-tx,var(--encre));transition:transform .5s var(--e),background-color .45s var(--e),color .35s}
.hd>.w{position:relative;display:flex;align-items:center;justify-content:space-between;gap:14px;height:64px}
.hd.on{box-shadow:0 1px 0 var(--hd-ln,rgba(26,26,26,.1))}
.hd.cache{transform:translateY(-105%)}
.hd.menu-ouvert{transform:none;--hd-bg:var(--nuit);--hd-tx:var(--ntx)}
.hd .lg{color:inherit}
.hd-prog{position:absolute;left:0;right:0;bottom:-1px;height:3px;pointer-events:none}
.hd-prog i{display:block;height:100%;background:var(--fil);transform-origin:0 50%;transform:scaleX(0)}
.nav{display:none}
.hd-d{display:flex;align-items:center;gap:8px}
.hd-d .bt .court{display:none}
.hd.sombre .hd-d .bt{background:var(--ntx);color:var(--encre)}
.hd.rouge .hd-d .bt{background:var(--encre);color:var(--ntx)}
.menu{position:relative;z-index:2}
.menu span{position:absolute;left:13px;right:13px;height:2px;border-radius:2px;background:currentColor;transition:transform .5s var(--sp),top .4s var(--e)}
.menu span:first-child{top:17px}.menu span:last-child{top:25px}
.menu[aria-expanded=true] span:first-child{top:21px;transform:rotate(45deg)}
.menu[aria-expanded=true] span:last-child{top:21px;transform:rotate(-45deg)}
.hd .ic{background:transparent;box-shadow:inset 0 0 0 1.5px currentColor;color:inherit}
@media (max-width:520px){.hd-d .bt .long{display:none}.hd-d .bt .court{display:inline}.hd-d .bt{padding:0 1em}.hd-d .bt .ar{display:none}}
@media (min-width:980px){
  .hd.cache{transform:none}
  .nav{display:flex;gap:30px;position:absolute;left:50%;transform:translateX(-50%)}
  .nav a{position:relative;padding:8px 0;font-size:15px;font-weight:500;opacity:.72;transition:opacity .3s}
  .nav a::after{content:"";position:absolute;left:-2px;right:-3px;bottom:2px;height:3px;border-radius:3px;background:var(--fil);transform:rotate(-1.5deg) scaleX(0);transform-origin:0 50%;transition:transform .45s var(--e)}
  .nav a:is(:hover,:focus-visible){opacity:1}
  .nav a[aria-current]{opacity:1;font-weight:650}
  .nav a[aria-current]::after,.nav a:is(:hover,:focus-visible)::after{transform:rotate(-1.5deg) scaleX(1)}
  .hd.rouge .nav a::after{background:var(--encre)}
  .menu{display:none}
}

/* menu plein écran (mobile) : le fil s'enroule, la feuille s'ouvre */
.mn{position:fixed;inset:0;z-index:45;background:var(--nuit);color:var(--ntx);padding:calc(env(safe-area-inset-top,0px) + 96px) max(var(--g),env(safe-area-inset-right,0px)) calc(env(safe-area-inset-bottom,0px) + 28px) max(var(--g),env(safe-area-inset-left,0px));display:flex;flex-direction:column;justify-content:space-between;gap:28px;overflow-y:auto;clip-path:circle(0 at calc(100% - 44px) 38px);visibility:hidden;transition:clip-path .7s var(--io),visibility 0s linear .7s}
.mn.ouvert{clip-path:circle(150% at calc(100% - 44px) 38px);visibility:visible;transition:clip-path .8s var(--io)}
.mn nav{display:grid}
.mn nav a{font-family:var(--d);font-weight:600;font-size:clamp(34px,9vw,58px);letter-spacing:-.025em;line-height:1.12;padding:2px 0;opacity:0;transform:translateY(30px);transition:transform .7s var(--e),opacity .4s,color .3s}
.mn nav a[aria-current]{color:var(--cible3)}
.mn.ouvert nav a{opacity:1;transform:none;transition-delay:calc(.18s + var(--k,0)*40ms)}
.mn .mn-b{display:grid;gap:14px;opacity:0;transition:opacity .5s}
.mn.ouvert .mn-b{opacity:1;transition-delay:.5s}
.mn .mn-b p{font-size:14.5px;color:var(--nmu)}
.mn .bt{background:var(--fil);color:var(--encre)}
.hd.menu-ouvert{color:var(--ntx)}.hd.menu-ouvert .lg{color:var(--ntx)}.hd.menu-ouvert .hd-d .bt{opacity:0;pointer-events:none}
.hd.menu-ouvert .ic{background:rgba(255,255,255,.08);color:var(--ntx)}
@media (min-width:980px){.mn{display:none}}

/* ---------- chapitres : chaque grande rubrique a sa feuille, sa couleur, son entrée ---------- */
main{display:block}
.sec{position:relative;padding:clamp(80px,9vw,140px) 0}
.sec.serre{padding-top:clamp(26px,4vw,52px)}
.feuille{position:relative;z-index:1;margin-top:calc(var(--fr)*-1);border-radius:var(--fr) var(--fr) 0 0;padding-bottom:calc(var(--fr) + clamp(64px,8vw,128px));background:var(--creme);box-shadow:0 -24px 48px -36px rgba(26,26,26,.35)}
.feuille.papier2,.feuille.paper2,.feuille.sable{background:var(--sable)}
.feuille.blanc{background:var(--blanc)}
.feuille.dk,.feuille.nuit{background:var(--nuit)}
.feuille.aubergine{background:var(--aubergine)}
.feuille.rouge{background:var(--cible3);color:var(--encre)}
.feuille.fill{background:var(--cible2)}
.chap-l{display:flex;align-items:center;gap:12px;margin-bottom:18px;font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--fa)}
.chap-l b{display:grid;place-items:center;min-width:34px;height:24px;padding:0 8px;border-radius:999px;background:var(--fil);color:var(--encre);font-weight:650;letter-spacing:.04em}
.rouge .chap-l{color:var(--mu)}.rouge .chap-l b{background:var(--encre);color:var(--ntx)}
.sec-t{position:relative;display:grid;gap:16px 56px;align-items:end;align-content:start;margin-bottom:clamp(30px,4vw,56px)}
@media (min-width:900px){.sec-t{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}}
.sec-t h2{font-size:var(--t-h2);font-weight:600;letter-spacing:-.03em;line-height:1;text-wrap:balance}
.sec-t h2 .it{font-weight:300;letter-spacing:-.02em}
.sec-t .chap-l{grid-column:1/-1;margin-bottom:-4px}
.lead{font-size:clamp(17px,1.4vw,19.5px);line-height:1.52;color:var(--mu);max-width:32em}
.sec-t .lead{max-width:28em}
.rouge .lead{color:var(--mu)}

/* entêtes des pages intérieures : texte et photographie, le fil passe entre les deux */
.ph{position:relative;padding:calc(76px + clamp(40px,6.4vw,96px)) 0 clamp(34px,4.6vw,64px)}
.ph h1{font-size:clamp(42px,6.6vw,100px);font-weight:650;letter-spacing:-.032em;line-height:.98;text-wrap:balance}
.ph h1 .it{display:block;font-weight:300;font-size:.62em;letter-spacing:-.018em;line-height:1.1;margin-top:.12em}
.ph .lead{margin-top:24px}
.ph .bts{margin-top:28px}
.ph .faits{margin-top:28px}
.ph.court{padding-bottom:18px}
.ph.court h1{font-size:clamp(38px,5vw,72px)}
.ph-g{display:grid;gap:clamp(28px,4vw,64px);align-items:center}
@media (min-width:980px){.ph-g{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr)}}
.ph-ph{position:relative;aspect-ratio:4/4.6;border-radius:calc(var(--r) + 6px);overflow:hidden;background:var(--creme2)}
.ph-ph img{width:100%;height:100%;object-fit:cover}
@media (max-width:979px){.ph-ph{aspect-ratio:4/3}}
.ariane{display:flex;gap:8px;margin-bottom:22px;font-size:13.5px;color:var(--fa)}
.ariane a{position:relative}
.ariane a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:currentColor;opacity:.5}
.faits{display:flex;flex-wrap:wrap;gap:12px 30px;font-size:13.5px;color:var(--fa);line-height:1.3}
.faits li{min-width:7.5em}
.faits b{display:block;font-family:var(--d);font-weight:600;font-size:26px;letter-spacing:-.025em;color:var(--encre);line-height:1.08}
.dk .faits b,.rouge .faits b{color:inherit}
@media (max-width:520px){.faits{gap:10px 16px}.faits li{min-width:0;flex:1}.faits b{font-size:22px}}

/* photographies : une apparition simple, la photo se pose */
.ph-r{position:relative;overflow:hidden;isolation:isolate}
.ph-r>img{transition:transform 1.2s var(--e),opacity .9s ease}
@media (prefers-reduced-motion:no-preference){
  .js .ph-r>img{opacity:0;transform:scale(1.06)}
  .js .ph-r.on>img{opacity:1;transform:none}
}

/* la bascule collectivité / entreprise : un vrai sélecteur, une surface qui glisse */
.cible{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}
.cible-l{font-size:15px;font-weight:550;color:var(--mu)}
.tg{position:relative;display:inline-grid;grid-auto-flow:column;grid-auto-columns:max-content;padding:5px;border-radius:999px;background:var(--blanc);box-shadow:inset 0 0 0 1.5px var(--ln2),0 14px 34px -22px rgba(26,26,26,.45)}
.tg button{position:relative;z-index:1;display:inline-flex;align-items:center;gap:9px;padding:11px 20px 11px 16px;border-radius:999px;font-family:var(--f);font-style:normal;font-weight:600;font-size:15.5px;letter-spacing:-.005em;color:var(--mu);white-space:nowrap;transition:color .35s}
.tg button .i{width:19px;height:19px;stroke-width:1.7;transition:transform .45s var(--sp)}
.tg button[aria-pressed=true]{color:#fff}
.tg button[aria-pressed=true] .i{transform:rotate(-8deg) scale(1.08)}
.tg button:not([aria-pressed=true]):is(:hover,:focus-visible){color:var(--encre)}
.tg button:focus-visible{outline:2px solid var(--encre);outline-offset:2px}
.tg .ind{position:absolute;z-index:0;top:5px;bottom:5px;left:0;width:0;border-radius:999px;background:var(--cible);box-shadow:0 8px 18px -10px var(--cible);transition:transform .5s cubic-bezier(.34,1.3,.5,1),width .5s cubic-bezier(.34,1.3,.5,1)}
.dk .tg{background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1.5px var(--nln)}
.dk .tg button{color:var(--nmu)}.dk .tg button[aria-pressed=true]{color:#fff}
.roule{display:inline-block}
@media (prefers-reduced-motion:no-preference){.roule.go{animation:roule .42s var(--e)}}
@keyframes roule{0%{opacity:0;transform:translateY(.35em)}100%{opacity:1;transform:none}}
/* sélecteur secondaire (calendrier, simulateur) */
.tg.sm{padding:4px}
.tg.sm button{padding:8px 15px;font-size:14.5px;font-weight:550}
.tg.sm .ind{top:4px;bottom:4px}

/* ---------- passage d'une page à l'autre : le fil de l'en-tête court jusqu'au bout, la page suivante entre derrière lui ---------- */
@media (prefers-reduced-motion:no-preference){
  html.part main{opacity:0;transform:translateX(-14px);transition:opacity .2s ease,transform .26s var(--io)}
  html.part .hd-prog i{transform:scaleX(1)!important;transition:transform .24s var(--io)}
  html.entre main{animation:entre-p .5s var(--e) both}
  html.entre .hd-prog i{animation:fil-sort .55s var(--io) both}
}
@keyframes entre-p{from{opacity:0;transform:translateX(16px)}}
@keyframes fil-sort{from{transform:scaleX(1);transform-origin:100% 50%}to{transform:scaleX(0);transform-origin:100% 50%}}

/* ---------- retour : toujours savoir comment revenir ---------- */
.retour{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;margin-bottom:22px;font-size:14px}
.retour a.rt{display:inline-flex;align-items:center;gap:8px;font-weight:600}
.retour a.rt i{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;box-shadow:inset 0 0 0 1.5px currentColor;font-style:normal;transition:transform .45s var(--e),background .3s,color .3s}
.retour a.rt:is(:hover,:focus-visible) i{transform:translateX(-4px);background:var(--encre);color:var(--ntx)}
.retour .ariane{margin:0}

/* ---------- fenêtre de rendez-vous (Cal.com, sans quitter le site) ---------- */
.rdv{position:fixed;inset:0;z-index:150;display:grid;place-items:center;padding:clamp(10px,3vw,40px);visibility:hidden;pointer-events:none}
.rdv.on{visibility:visible;pointer-events:auto}
.rdv-f{position:absolute;inset:0;background:rgba(26,26,26,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;transition:opacity .45s}
.rdv.on .rdv-f{opacity:1}
.rdv-b{position:relative;display:grid;grid-template-rows:auto minmax(0,1fr) auto;width:min(100%,980px);height:min(100%,760px);border-radius:var(--r);background:var(--blanc);overflow:hidden;box-shadow:0 40px 90px -30px rgba(0,0,0,.6);transform:translateY(40px) scale(.97);opacity:0;transition:transform .6s var(--e),opacity .4s}
.rdv.on .rdv-b{transform:none;opacity:1}
.rdv-h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 14px 14px 22px;border-bottom:1px solid var(--ln)}
.rdv-h b{font-family:var(--d);font-weight:600;font-size:20px;letter-spacing:-.02em}
.rdv-h small{display:block;font-size:13px;color:var(--fa)}
.rdv iframe{width:100%;height:100%;border:0;background:var(--creme)}
.rdv-p{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;padding:10px 22px;border-top:1px solid var(--ln);font-size:13px;color:var(--fa)}
.rdv-p a{color:var(--encre);border-bottom:1px solid var(--ln2)}
.rdv-c{position:absolute;inset:60px 0 44px;display:grid;place-items:center;pointer-events:none;color:var(--fa);font-size:14px}
html.rdv-ouvert{overflow:hidden}
/* ==========================================================================
   ACCUEIL
   ========================================================================== */

/* ---------- l'ouverture : une promesse, une description, un choix, une action, une composition ---------- */
.hero{position:relative;padding:calc(64px + clamp(40px,6.2vw,96px)) 0 clamp(70px,8vw,120px);overflow:hidden;background:var(--creme)}
.hero-g{position:relative;z-index:2;display:grid;gap:clamp(44px,5vw,80px);align-items:center}
@media (min-width:980px){.hero-g{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr)}}
.hero-a{display:grid;gap:30px;align-content:center}
.hero-t{font-family:var(--d);font-weight:650;font-size:clamp(46px,6.5vw,104px);letter-spacing:-.036em;line-height:.96;margin:0 0 calc(var(--ep,18px)*1.6 + 14px) -.04em}
.hero-t .l{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.hero-t .l>span{display:inline-block}
.hero-t .l2{font-family:var(--sf);font-style:italic;font-weight:300;font-size:.84em;letter-spacing:-.022em;line-height:1.04;overflow:visible}
.hero-t .mf{position:relative;display:inline-block;font-family:var(--d);font-style:normal;font-weight:650;letter-spacing:-.03em;transition:transform .7s cubic-bezier(.34,1.5,.5,1)}
.hero.fil-mot .hero-t .mf{transform:translateY(-.07em)}
.hero-s{font-size:clamp(17.5px,1.38vw,20.5px);line-height:1.5;color:var(--mu);max-width:31em}
.hero-act{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px}
.hero-px{font-size:15px;color:var(--mu)}
.hero-px b{color:var(--encre);font-weight:650}
@media (prefers-reduced-motion:no-preference){
  .js .hero-t .l>span{transform:translateY(105%);animation:monte-l 1s var(--e) .12s forwards}
  .js .hero-t .l2>span{animation-delay:.24s}
  .js .hero-a>*:not(h1){opacity:0;transform:translateY(18px);animation:monte .9s var(--e) forwards;animation-delay:calc(.5s + var(--k,0)*.09s)}
}
@keyframes monte-l{to{transform:none}}
@keyframes monte{to{opacity:1;transform:none}}
/* la composition : la campagne, et un second support posé devant */
.hero-v{position:relative;aspect-ratio:1/1.12;max-width:620px;justify-self:end;width:100%}
.hv-m{position:absolute;right:0;top:0;width:84%;height:91%;margin:0;border-radius:calc(var(--r) + 10px);overflow:hidden;background:var(--creme2);box-shadow:0 50px 90px -60px rgba(26,26,26,.6)}
.hv-m svg{display:block;width:100%;height:100%}
.hv-m figcaption,.hv-c figcaption{position:absolute;z-index:3;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.94);color:var(--encre);font-size:12.5px;font-weight:600;letter-spacing:-.005em}
.hv-m figcaption{right:16px;bottom:16px}
.hv-c figcaption{left:10px;bottom:10px;font-size:11.5px}
html:not([data-cible=e]) .pour-e,html[data-cible=e] .pour-c{display:none}
.hv-c{position:absolute;left:0;bottom:0;z-index:2;width:39%;aspect-ratio:4/5;margin:0;border-radius:20px;overflow:hidden;background:var(--creme2);box-shadow:0 0 0 6px var(--creme),0 34px 60px -30px rgba(26,26,26,.65);transform:rotate(-4deg)}
.hv-c img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--e)}
@media (prefers-reduced-motion:no-preference){
  .js .hv-m .pinceau{stroke-dasharray:1;stroke-dashoffset:1}
  .js .hv-c{opacity:0;transform:translate(-30px,40px) rotate(-12deg) scale(.9);transition:opacity .6s ease,transform .95s cubic-bezier(.3,1.35,.5,1)}
  .js .hv-c.pose{opacity:1;transform:rotate(-4deg)}
  .hero-v:hover .hv-c.pose{transform:rotate(-1.5deg) translateY(-6px)}
  .hero-v:hover .hv-c img{transform:scale(1.05)}
}
@media (max-width:979px){.hero-v{aspect-ratio:1/1.02;max-width:560px;justify-self:center}.hv-m{width:82%;height:88%}.hv-c{width:42%}}

/* le fil de l'ouverture : deux plans, devant et derrière la grande photographie */
.fil-h{position:absolute;left:0;top:0;pointer-events:none;overflow:visible}
.fil-arr{z-index:1}.fil-av{z-index:3}
.fil-h path,.fil-pont path{fill:none;stroke:var(--fil);stroke-linecap:round;stroke-linejoin:round}
.fil-h path.effile{fill:var(--fil);stroke:none}
.fil-h mask path{stroke:#fff}
.fil-pont{position:absolute;left:0;top:0;pointer-events:none;overflow:visible;transition:opacity .25s}
.fil-pont.loin{opacity:0}

/* ---------- le passage : la caméra suit le fil, puis plonge dedans ---------- */
.passage{position:relative;height:150vh;height:150svh;background:var(--creme);margin-top:-1px}
.passage-s{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:grid;align-items:end}
.passage-s.plein{background:var(--nuit)}
.passage svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.passage path{fill:none;stroke:var(--fil);stroke-linecap:round;stroke-linejoin:round}
.passage-t{position:relative;z-index:2;display:grid;gap:18px 56px;align-items:end;padding-bottom:clamp(36px,7vh,84px);color:var(--ntx)}
@media (min-width:980px){.passage-t{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}}
.passage-t h2{font-size:var(--t-h2);font-weight:600;letter-spacing:-.03em;line-height:1}
.passage-t h2 .it{font-weight:300;letter-spacing:-.02em}
.passage-t .lead{color:var(--nmu);max-width:28em}
.js .passage-t{opacity:0}
html:not(.js) .passage,.passage.fixe{height:auto}
html:not(.js) .passage-s,.passage.fixe .passage-s{position:relative;height:auto;padding-top:clamp(90px,10vw,150px);background:var(--nuit)}
.passage.fixe svg{display:none}
.passage.fixe .passage-t{opacity:1!important;transform:none!important}
@media (max-width:979px){.passage{height:140vh;height:140svh}}
#realisations{padding-top:clamp(8px,2vw,24px)}

/* ---------- les liaisons : le même fil, rendu dans chaque rubrique qu'il traverse ---------- */
.fil-hote{position:relative}
.fil-hote>.w{position:relative;z-index:1}
.fil-s{position:absolute;left:0;top:0;width:100%;height:100%;z-index:0;pointer-events:none;overflow:hidden;border-radius:inherit}
.fil-s path{fill:none;stroke:var(--fil);stroke-linecap:round;stroke-linejoin:round}
/* la crue : tant que le fil gonfle, la rubrique garde la couleur de la précédente */
.feuille.crue-av{background:var(--crue-av);box-shadow:none}
.feuille.crue-av>.w{opacity:calc(var(--crue,1) * 2.4 - 1.3)}

/* ---------- une information, plusieurs supports ---------- */
.nuit-sec{background:var(--nuit);margin-top:-1px}
.gal{display:grid;gap:12px}
@media (min-width:900px){
  .gal{grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:repeat(2,clamp(190px,16vw,240px));grid-auto-flow:dense}
  .gal-c{grid-column:span 1;grid-row:span 1}
  .gal-c.l{grid-column:span 2;grid-row:span 2}
  .gal-c.lar{grid-column:span 2}
  .gal.c5{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:899px){
  .gal{grid-auto-flow:column;grid-auto-columns:min(74vw,310px);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--g);margin-inline:calc(-1*var(--g));padding:4px var(--g) 8px;scrollbar-width:none}
  .gal::-webkit-scrollbar{display:none}
  .gal-c{scroll-snap-align:start;aspect-ratio:4/5}
}
.gal-c{position:relative;margin:0;border-radius:var(--r2);overflow:hidden;background:rgba(255,255,255,.05);outline:none;cursor:default}
.gal-c img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--e),filter .6s}
.gal-c::before{content:"";position:absolute;inset:35% 0 0;z-index:2;background:linear-gradient(transparent,rgba(26,26,26,.78));pointer-events:none;transition:inset .6s var(--e)}
.gal-c figcaption{position:absolute;left:12px;right:12px;bottom:12px;z-index:3;display:grid;gap:4px;color:#fff;font-size:13px;line-height:1.3}
.gal-c figcaption .t{display:flex;justify-content:space-between;align-items:center;gap:8px}
.gal-c figcaption b{font-family:var(--d);font-weight:600;font-size:16px;letter-spacing:-.012em}
.gal-c figcaption .dsc{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .5s var(--e),opacity .4s}
.gal-c figcaption .dsc>span{overflow:hidden;opacity:.86}
.gal-c .u{flex:none;padding:4px 9px;border-radius:999px;background:rgba(255,255,255,.16);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-size:12px;font-weight:600;white-space:nowrap;transition:background .35s,color .35s}
.gal-c:is(:hover,:focus-visible) img{transform:scale(1.045)}
.gal-c:is(:hover,:focus-visible)::before{inset:10% 0 0}
.gal-c:is(:hover,:focus-visible) figcaption .dsc{grid-template-rows:1fr;opacity:1}
.gal-c:is(:hover,:focus-visible) .u{background:var(--fil)}
.gal-c:focus-visible{box-shadow:0 0 0 3px var(--fil)}
.gal-c.l figcaption b{font-size:20px}
@media (hover:none){.gal-c figcaption .dsc{grid-template-rows:1fr;opacity:1}}
.gal.clair .gal-c{background:var(--creme2)}

/* ---------- vous demandez, Fill s'occupe du reste : une séquence en quatre temps ---------- */
.mm{display:grid;gap:clamp(30px,4vw,64px)}
@media (min-width:1000px){.mm{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:start}.mm>.mm-v{position:sticky;top:96px}}
.et4{--p:0;position:relative;display:grid;gap:4px;padding-left:44px}
.et4::before,.et4::after{content:"";position:absolute;left:calc(12px - var(--ep,18px)/2);top:14px;width:var(--ep,18px);border-radius:999px}
.et4::before{bottom:calc(var(--last,70px));background:rgba(26,26,26,.09)}
.et4::after{height:calc((100% - 14px - var(--last,70px)) * var(--p));background:var(--fil);transition:height .7s var(--io)}
.et4-b{position:relative;display:grid;gap:2px;justify-items:start;width:100%;padding:12px 0 12px 8px;text-align:left;color:var(--fa);transition:color .35s}
.et4-b::before{content:"";position:absolute;z-index:1;left:-46px;top:12px;width:28px;height:28px;border-radius:50%;background:var(--sable);box-shadow:inset 0 0 0 3px rgba(26,26,26,.28);transition:background .4s,box-shadow .4s,transform .45s var(--sp)}
.et4-b.fait::before{background:var(--fil);box-shadow:inset 0 0 0 3px var(--fil),0 0 0 5px var(--sable)}
.et4-b[aria-selected=true]::before{background:var(--blanc);box-shadow:inset 0 0 0 7px var(--fil),0 0 0 5px var(--sable);transform:scale(1.18)}
.et4-b .n2{font-size:12.5px;font-weight:650;letter-spacing:.1em;text-transform:uppercase}
.et4-b b{font-family:var(--d);font-weight:600;font-size:clamp(24px,2.3vw,32px);letter-spacing:-.025em;line-height:1.05}
.et4-b .info{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--e)}
.et4-b .info>span{overflow:hidden}
.et4-b .info p{padding-top:8px;font-size:16px;line-height:1.45;color:var(--mu);max-width:26em}
.et4-b .info em{display:inline-flex;align-items:baseline;gap:8px;margin-top:10px;font-style:normal;font-size:14px;font-weight:600;color:var(--encre)}
.et4-b .info em::before{content:"";width:18px;height:3px;border-radius:3px;background:var(--fil);transform:translateY(-3px) rotate(-6deg)}
.et4-b[aria-selected=true]{color:var(--encre)}
.et4-b[aria-selected=true] .info{grid-template-rows:1fr}
.et4-b:is(:hover,:focus-visible){color:var(--encre)}
.et4-fin{margin-top:18px}
.mm-v{position:relative;display:grid;gap:16px;justify-items:center}
.scene4{position:relative;width:min(100%,400px);display:grid;justify-items:center}
.canaux{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;min-height:40px;max-width:420px}
.canaux button{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.55);box-shadow:inset 0 0 0 1.5px rgba(26,26,26,.18);font-size:14px;font-weight:550;transition:background .3s,box-shadow .3s,color .3s,transform .35s var(--sp)}
.canaux button[aria-pressed=true]{background:var(--encre);color:var(--ntx);box-shadow:none}
.canaux button:active{transform:scale(.95)}
.canaux button i{width:8px;height:8px;border-radius:50%;background:currentColor;opacity:.35;transition:opacity .3s,background .3s}
.canaux button[aria-pressed=true] i{opacity:1;background:var(--fil)}
.canaux-t{font-size:13.5px;color:var(--fa);text-align:center}
.perso{display:grid;gap:6px;width:min(100%,380px)}
.perso label{font-size:13px;color:var(--fa)}
.perso input{height:46px;padding:0 18px;border-radius:999px;border:0;background:rgba(255,255,255,.65);box-shadow:inset 0 0 0 1px var(--ln2);font-size:15px}
.perso input:focus{outline:none;box-shadow:inset 0 0 0 2px var(--fil);background:#fff}
/* étape 1 : la saisie */
.curseur{display:inline-block;width:2px;height:1.05em;margin-left:1px;vertical-align:-.15em;background:var(--fil);animation:clign 1s steps(1) infinite}
@keyframes clign{50%{opacity:0}}
.piece mark{background:var(--cible2);color:inherit;border-radius:.2em;padding:0 .08em;transition:background .5s}
/* étape 3 : l'épreuve et sa validation */
.epreuve{position:absolute;inset:0;z-index:6;pointer-events:none}
.epreuve .pin{position:absolute;right:9%;top:46%;display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:14px 14px 14px 4px;background:var(--encre);color:var(--ntx);font-size:13px;box-shadow:0 14px 30px -12px rgba(0,0,0,.5);opacity:0;transform:translateY(8px) scale(.92)}
.epreuve .ok-b{position:absolute;left:50%;bottom:-22px;transform:translateX(-50%);display:inline-flex;align-items:center;gap:8px;padding:11px 20px;border-radius:999px;background:var(--blanc);box-shadow:0 14px 30px -14px rgba(0,0,0,.45),inset 0 0 0 1.5px var(--encre);font-weight:600;font-size:14.5px;white-space:nowrap;opacity:0}
.epreuve .ok-b.fait{background:var(--fil);color:var(--encre);box-shadow:0 14px 30px -14px rgba(185,85,67,.5)}
.epreuve .souris{position:absolute;left:20%;top:20%;width:22px;height:22px;opacity:0}
.epreuve .souris svg{width:22px;height:22px;fill:var(--encre);stroke:#fff;stroke-width:1.5}
.epreuve .cadre{position:absolute;inset:-8px;border-radius:30px;box-shadow:inset 0 0 0 2px var(--encre);opacity:0}
.epreuve .cadre::after{content:"Épreuve";position:absolute;left:18px;top:-11px;padding:2px 10px;border-radius:999px;background:var(--encre);color:var(--ntx);font-size:12px;font-weight:600}
/* étape 4 : la publication vers les canaux */
.dests{display:flex;justify-content:center;gap:12px;min-height:0}
.dest{position:relative;display:grid;justify-items:center;gap:6px;width:92px;font-size:12.5px;font-weight:600;color:var(--mu)}
.dest .ec{position:relative;width:76px;height:76px;border-radius:18px;background:var(--blanc);box-shadow:0 12px 26px -16px rgba(0,0,0,.4),inset 0 0 0 1px var(--ln);overflow:hidden}
.dest .ec::after{content:"";position:absolute;right:6px;top:6px;width:16px;height:16px;border-radius:50%;background:var(--fil) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A1A1A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/10px no-repeat;transform:scale(0);transition:transform .45s var(--sp)}
.dest.ok .ec::after{transform:scale(1)}
.dest .mini{position:absolute;inset:8px;border-radius:8px;background:var(--cible2) center/cover no-repeat;opacity:0;transform:scale(.6);transition:opacity .3s,transform .45s var(--sp)}
.dest.ok .mini{opacity:1;transform:none}
.vol{position:fixed;z-index:60;pointer-events:none;border-radius:12px;background:var(--blanc) center/cover no-repeat;box-shadow:0 20px 40px -20px rgba(0,0,0,.5)}

/* la pièce : les mêmes éléments, quatre mises en page */
.piece-w{position:relative;container-type:inline-size;width:min(100%,380px)}
.piece{position:relative;display:flex;flex-wrap:wrap;align-content:flex-start;width:100%;aspect-ratio:4/5;padding:7cqi;border-radius:22px;background:var(--blanc);color:var(--encre);overflow:hidden;box-shadow:0 40px 70px -40px rgba(26,26,26,.55),0 0 0 1px rgba(26,26,26,.05);font:400 4.3cqi/1.45 var(--f);letter-spacing:-.01em;transition:background-color .8s var(--io);user-select:none}
.piece [data-k]{display:block;flex:0 0 100%;min-width:0;transform-origin:0 0}
.piece [data-k=vis]{background:var(--creme2) center/cover no-repeat;border-radius:2.4cqi}
.piece [data-k=de]{display:flex;align-items:center;gap:2.6cqi}
.piece .av{display:grid;place-items:center;flex:none;width:9cqi;height:9cqi;border-radius:50%;background:var(--cible);color:#fff;font-weight:700;font-size:3.2cqi;letter-spacing:0}
.piece .nm{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.piece [data-k=tete],.piece [data-k=cta]{display:none}
.piece[data-f=brut] [data-k=de]{margin-bottom:6cqi;padding-bottom:4.4cqi;border-bottom:1px solid var(--ln);font-size:3.8cqi;color:var(--mu)}
.piece[data-f=brut] .av{width:7cqi;height:7cqi;font-size:2.8cqi}
.piece[data-f=brut] :is([data-k=c1],[data-k=titre],[data-k=date],[data-k=heure],[data-k=lieu]){flex:0 0 auto;margin-right:.32em}
.piece[data-f=brut] :is([data-k=titre],[data-k=date],[data-k=heure]){margin-right:0}
.piece[data-f=brut] :is([data-k=titre],[data-k=date],[data-k=heure])::after{content:",\00a0"}
.piece[data-f=brut] [data-k=lieu]::after{content:"."}
.piece[data-f=brut] [data-k=texte]{margin-top:.5em}
.piece[data-f=brut] [data-k=vis]{flex:0 0 30cqi;height:21cqi;margin-top:7cqi}
.piece[data-f=brut] [data-k=c2]{flex:1 1 0;align-self:flex-end;margin-left:4cqi;font-size:3.7cqi;color:var(--fa)}
.piece[data-f=post]{padding:0;font-size:4cqi;line-height:1.38}
.piece[data-f=post] :is([data-k=c1],[data-k=c2]){display:none}
.piece[data-f=post] [data-k=de]{order:0;padding:4.6cqi 5.4cqi;font-weight:650}
.piece[data-f=post] .de-l{display:none}
.piece[data-f=post] [data-k=vis]{order:1;height:54cqi;border-radius:0}
.piece[data-f=post] [data-k=titre]{order:2;padding:4.4cqi 5.4cqi 0;font-weight:700;font-size:4.8cqi}
.piece[data-f=post] [data-k=texte]{order:3;padding:1cqi 5.4cqi 0;color:var(--mu)}
.piece[data-f=post] :is([data-k=date],[data-k=heure],[data-k=lieu]){order:4;flex:0 0 auto;margin-top:2.6cqi;font-size:3.5cqi;font-weight:600;color:var(--fa)}
.piece[data-f=post] [data-k=date]{margin-left:5.4cqi}
.piece[data-f=post] :is([data-k=date],[data-k=heure])::after{content:"\00a0·\00a0"}
.piece[data-f=affiche]{flex-direction:column;flex-wrap:nowrap;justify-content:flex-end;padding:8cqi;background:var(--cible);color:#fff}
.piece[data-f=affiche] [data-k]{flex:none}
.piece[data-f=affiche] :is([data-k=c1],[data-k=c2],[data-k=texte]){display:none}
.piece[data-f=affiche] [data-k=vis]{position:absolute;top:7cqi;right:7cqi;width:42cqi;height:42cqi;border-radius:50%}
.piece[data-f=affiche] [data-k=titre]{font-family:var(--d);font-weight:700;font-size:14cqi;line-height:.9;letter-spacing:-.04em;max-width:6.5em}
.piece[data-f=affiche] [data-k=date]{margin-top:6cqi;font-family:var(--d);font-weight:650;font-size:6.2cqi;letter-spacing:-.02em;line-height:1}
.piece[data-f=affiche] :is([data-k=heure],[data-k=lieu]){font-size:4.4cqi;line-height:1.35}
.piece[data-f=affiche] [data-k=heure]{margin-top:1.6cqi}
.piece[data-f=affiche] [data-k=de]{order:9;margin-top:6cqi;padding-top:3cqi;border-top:.5cqi solid #fff;font-size:3.4cqi;font-weight:650}
.piece[data-f=affiche] :is(.av,.de-l){display:none}
.piece[data-f=news]{flex-direction:column;flex-wrap:nowrap;padding:6.4cqi}
.piece[data-f=news] [data-k]{flex:none}
.piece[data-f=news] :is([data-k=c1],[data-k=c2],[data-k=de],[data-k=heure]){display:none}
.piece[data-f=news] [data-k=tete]{order:0;display:block;padding-bottom:3.6cqi;border-bottom:.6cqi solid var(--cible);font-family:var(--d);font-weight:650;font-size:5.2cqi;letter-spacing:-.02em;line-height:1.05}
.piece[data-f=news] [data-k=vis]{order:1;height:32cqi;margin:5cqi 0 4.4cqi}
.piece[data-f=news] [data-k=titre]{order:2;font-family:var(--d);font-weight:650;font-size:8.4cqi;letter-spacing:-.03em;line-height:.98}
.piece[data-f=news] :is([data-k=date],[data-k=lieu]){order:3;margin-top:1.6cqi;font-size:3.5cqi;font-weight:650;color:var(--fa)}
.piece[data-f=news] [data-k=lieu]{order:4;margin-top:0}
.piece[data-f=news] [data-k=texte]{order:5;margin-top:2.6cqi;font-size:3.8cqi;color:var(--mu);line-height:1.4}
.piece[data-f=news] [data-k=cta]{order:6;display:block;align-self:flex-start;margin-top:auto;padding:2cqi 5cqi;border-radius:99px;background:var(--encre);color:var(--blanc);font-size:3.5cqi;font-weight:600}
.sous-pas{display:flex;gap:6px;justify-content:center;min-height:8px}
.sous-pas i{width:8px;height:8px;border-radius:4px;background:rgba(26,26,26,.18);transition:width .45s var(--e),background .3s}
.sous-pas i.on{width:24px;background:var(--fil)}

/* ---------- 03 · les formules ---------- */
.fos{display:grid;gap:14px}
@media (min-width:900px){.fos{grid-template-columns:repeat(3,minmax(0,1fr));align-items:start}}
@media (max-width:899px){
  .fos{grid-auto-flow:column;grid-auto-columns:min(82vw,350px);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--g);margin-inline:calc(-1*var(--g));padding:4px var(--g) 10px;scrollbar-width:none;align-items:start}
  .fos::-webkit-scrollbar{display:none}
  .fo{scroll-snap-align:start}
}
.fo{position:relative;display:grid;gap:18px;padding:28px 26px 24px;border-radius:var(--r);background:var(--creme);transition:transform .6s var(--e),box-shadow .5s}
.fo{box-shadow:inset 0 0 0 1px transparent;transition:box-shadow .45s var(--e),background .4s}
.fo::after{content:"";position:absolute;left:26px;top:-2px;width:46px;height:5px;border-radius:5px;background:var(--fil);transform:rotate(-2deg) scaleX(0);transform-origin:0 50%;transition:transform .5s var(--e)}
.fo:is(:hover,:focus-within){box-shadow:inset 0 0 0 1.5px var(--encre)}
.fo:is(:hover,:focus-within)::after{transform:rotate(-2deg) scaleX(1)}
.fo-a{display:grid;gap:4px}
.fo h3{font-family:var(--d);font-weight:650;font-size:clamp(30px,2.6vw,38px);letter-spacing:-.03em;line-height:1}
.fo-c{font-family:var(--sf);font-style:italic;font-weight:300;font-size:19px;letter-spacing:-.01em;line-height:1.2;color:var(--mu)}
.fo-p{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;padding-top:16px;border-top:1px solid var(--ln)}
.fo-p b{font-family:var(--d);font-weight:650;font-size:clamp(38px,3.2vw,48px);letter-spacing:-.035em;line-height:1}
.fo-p span{font-size:14px;color:var(--fa)}
.fo-u{display:grid;gap:3px;font-size:15px}
.fo-u b{font-weight:650}
.fo-u span{font-size:14px;color:var(--fa)}
.fo-act{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}
.fo-plus{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;font-weight:600}
.fo-plus i{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;box-shadow:inset 0 0 0 1.5px currentColor;font-style:normal;font-size:16px;transition:transform .5s var(--sp),background .3s,color .3s}
.fo.ouvert .fo-plus i{transform:rotate(45deg);background:var(--encre);color:var(--ntx)}
.fo-det{display:grid;grid-template-rows:0fr;transition:grid-template-rows .6s var(--e)}
.fo-det>div{overflow:hidden}
.fo.ouvert .fo-det{grid-template-rows:1fr}
.fo-d{display:grid;gap:8px;padding-top:4px;font-size:14px}
.fo-d div{display:flex;justify-content:space-between;gap:16px;padding:7px 0;border-bottom:1px solid var(--ln)}
.fo-d dt{color:var(--fa)}
.fo-d dd{text-align:right;font-weight:550}
.fo-ex{margin-top:12px;font-size:14px;color:var(--mu)}
.fo-ex b{color:var(--encre);font-weight:600}
.p3{display:grid;gap:8px;font-size:15px}
.p3 li{display:flex;gap:10px;align-items:flex-start}
.p3 svg{margin-top:.2em;color:var(--fil)}
.fos-note{display:flex;flex-wrap:wrap;gap:8px 26px;align-items:center;margin-top:22px;font-size:14px;color:var(--mu)}
.fos-fin{display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center;justify-content:space-between;margin-top:26px;padding-top:22px;border-top:1px solid var(--ln)}
.fos-note b{color:var(--encre);font-weight:650}
.dots{display:flex;justify-content:center;gap:6px;margin-top:16px;color:inherit}
.dots button{width:7px;height:7px;border-radius:4px;background:currentColor;opacity:.22;transition:width .45s var(--e),opacity .3s}
.dots button[aria-current=true]{width:22px;opacity:.85}

/* ---------- 04 · selon votre situation ---------- */
.sits{display:grid;gap:14px}
@media (min-width:900px){.sits{grid-template-columns:repeat(2,minmax(0,1fr))}}
.sit{position:relative;display:grid;gap:10px;align-content:start;padding:clamp(24px,2.6vw,34px);border-radius:var(--r);background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px var(--nln);transition:background .4s,transform .5s var(--sp)}
.sit .q{font-family:var(--sf);font-style:italic;font-weight:300;font-size:19px;color:var(--nmu);padding-right:52px}
.sit b{font-family:var(--d);font-weight:600;font-size:clamp(26px,2.5vw,36px);letter-spacing:-.025em;line-height:1.02}
.sit>span:not(.go):not(.q){font-size:15.5px;color:var(--nmu);max-width:30em}
.sit .go{position:absolute;right:20px;top:20px;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.1);transition:transform .5s var(--sp),background .3s}
@media (hover:hover){.sit:hover{background:rgba(255,255,255,.1)}.sit:hover .go{background:var(--fil);transform:translateX(3px)}}
.sit:active{transform:scale(.985)}
.sit.relais{--mu:rgba(26,26,26,.7);--fa:rgba(26,26,26,.54);--ln:rgba(26,26,26,.11);grid-column:1/-1;display:grid;gap:18px 40px;background:var(--creme);color:var(--encre);box-shadow:none;overflow:hidden}
@media (min-width:900px){.sit.relais{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:center}}
.sit.relais .q{color:var(--mu)}
.sit.relais .go{background:var(--encre);color:var(--ntx)}
.sit.relais .faits b{color:var(--encre)}
.sit.relais>div>span{display:block;margin-top:10px;font-size:15.5px;color:var(--mu);max-width:30em}
@media (hover:hover){.sit.relais:hover{background:#fff}}
.sit .tag{justify-self:start;padding:4px 10px;border-radius:999px;background:var(--fil);color:var(--encre);font-size:12px;font-weight:650;letter-spacing:.02em}

/* ---------- 05 · estimer ou en parler ---------- */
.portes{display:grid;gap:14px}
@media (min-width:860px){.portes{grid-template-columns:1fr 1fr}}
.porte{position:relative;display:grid;gap:10px;padding:clamp(24px,2.6vw,34px);border-radius:var(--r);background:var(--blanc);color:var(--encre);transition:transform .5s var(--sp),box-shadow .4s}
.porte .q{font-family:var(--sf);font-style:italic;font-weight:300;font-size:20px;color:var(--mu);line-height:1.2;padding-right:56px}
.porte b{font-family:var(--d);font-weight:650;font-size:clamp(30px,3vw,44px);letter-spacing:-.03em;line-height:1}
.porte span.d2{font-size:15.5px;color:var(--mu);max-width:26em}
.porte .go,.ca .go{position:absolute;right:20px;top:20px;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--creme);font-size:19px;transition:transform .5s var(--sp),background .3s,color .3s}
@media (hover:hover){.porte:hover{box-shadow:0 30px 50px -30px rgba(0,0,0,.4)}.porte:hover .go{transform:translateX(4px);background:var(--fil);color:var(--encre)}}
.porte:active,.ca:active{transform:scale(.985)}
.fin{display:grid;gap:14px;margin-top:14px}
@media (min-width:900px){.fin{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) minmax(0,1fr)}.fin .ca.pr{order:-1}}
.ca{position:relative;display:grid;align-content:start;gap:8px;padding:26px 74px 26px 26px;border-radius:var(--r);background:var(--blanc);color:var(--encre);transition:transform .5s var(--sp),box-shadow .4s}
.ca b{font-family:var(--d);font-weight:650;font-size:clamp(24px,2.2vw,32px);letter-spacing:-.025em;line-height:1.02}
.ca>span:not(.go){font-size:15px;color:var(--mu)}
@media (hover:hover){.ca:hover .go{transform:translateX(3px);background:var(--fil);color:var(--encre)}}
.ca.pr{align-content:end;min-height:210px;background:var(--encre);color:var(--ntx)}
.ca.pr b{font-size:clamp(32px,3.2vw,48px)}
.ca.pr>span:not(.go){color:var(--nmu)}
.ca.pr .go{background:var(--fil);color:var(--encre)}
.rouge .ca:not(.pr),.rouge .porte{background:var(--blanc)}
.dk .ca:not(.pr){background:rgba(255,255,255,.06);color:var(--ntx)}.dk .ca:not(.pr)>span:not(.go){color:var(--nmu)}.dk .ca .go{background:rgba(255,255,255,.1)}
.rass{display:grid;gap:12px;align-content:center;padding:26px;border-radius:var(--r);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.5);font-size:15px}
.rass li{display:flex;gap:10px;align-items:flex-start}
.rass svg{margin-top:.2em;flex:none}
.feuille:not(.rouge) .rass{box-shadow:inset 0 0 0 1px var(--ln2)}
.qui{display:grid;gap:22px;align-items:center;margin-top:clamp(30px,4vw,56px)}
@media (min-width:800px){.qui{grid-template-columns:150px minmax(0,1fr)}}
.qui-ph{width:150px;aspect-ratio:1;border-radius:50%;overflow:hidden;background:rgba(255,255,255,.2)}
.qui-ph img{width:100%;height:100%;object-fit:cover}
.qui p{max-width:50em;font-size:16.5px;line-height:1.6}
.rouge .qui p{color:var(--encre)}
.qui p b{font-weight:650}

.cal-l{margin-top:16px;font-size:15px;color:var(--mu)}
/* pagination discrète des cartes défilantes */
.dots{display:flex;justify-content:center;gap:6px;margin-top:18px;color:inherit}
.dots button{width:7px;height:7px;border-radius:4px;background:currentColor;opacity:.22;transition:width .45s var(--e),opacity .3s}
.dots button[aria-current=true]{width:22px;opacity:.85}

/* contour qui se trace au survol */
.contour{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:4}
.contour rect{x:1px;y:1px;width:calc(100% - 2px);height:calc(100% - 2px);rx:var(--r);ry:var(--r);fill:none;stroke:var(--encre);stroke-width:2;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1s var(--io)}
@media (hover:hover){.trace:hover>.contour rect,.trace:focus-visible>.contour rect{stroke-dashoffset:0}}
.dk .contour rect,.fo.relais .contour rect{stroke:var(--ntx)}

/* ---------- blocs génériques des pages intérieures ---------- */
.duo{display:grid;gap:clamp(28px,4vw,60px)}
@media (min-width:980px){.duo{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}.duo .sec-t{grid-template-columns:1fr}}
.duo .sec-t h2{font-size:clamp(36px,4.6vw,68px)}
@media (min-width:980px){.duo>.sec-t{position:sticky;top:96px;align-self:start}}
.prose{display:grid;gap:14px;max-width:44em;font-size:16.5px;line-height:1.62}
.prose h3{margin-top:16px;font-family:var(--d);font-weight:650;font-size:24px;letter-spacing:-0.02em}
.prose ul{display:grid;gap:8px}
.prose ul li{position:relative;padding-left:20px}
.prose ul li::before{content:"";position:absolute;left:0;top:.72em;width:10px;height:2px;background:var(--encre)}
.prose a{border-bottom:1px solid currentColor}
.pts{display:grid;gap:12px}
@media (min-width:800px){.pts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.pts.t3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.pt{position:relative;display:grid;gap:10px;align-content:start;padding:24px;border-radius:var(--r);background:var(--blanc)}
.pt h3{font-family:var(--d);font-weight:650;font-size:24px;letter-spacing:-0.022em;line-height:1.02}
.pt p{font-size:15.5px;color:var(--mu)}
.dk .pt{background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px var(--nln)}.dk .pt p{color:var(--nmu)}
.n{font-family:var(--sf);font-style:italic;font-size:16px;color:var(--fa)}
.dk .n{color:var(--nmu)}
.etapes{display:grid;counter-reset:e}
.et{position:relative;display:grid;grid-template-columns:58px minmax(0,1fr);gap:6px 18px;padding:22px 0;border-top:1px solid var(--ln)}
.et::before{counter-increment:e;content:counter(e,decimal-leading-zero);font-family:var(--d);font-weight:650;font-size:24px;letter-spacing:-0.025em;line-height:1.1}
.et h3{font-family:var(--d);font-weight:650;font-size:23px;letter-spacing:-0.022em;line-height:1.12}
.et p{grid-column:2;color:var(--mu);font-size:15.5px}
.et .qd{grid-column:2;width:max-content;max-width:100%;padding:3px 10px;border-radius:999px;background:var(--fill2);color:var(--encre);font-size:13px;font-weight:600}
.dk .et{border-color:var(--nln)}.dk .et p{color:var(--nmu)}.dk .et .qd{background:var(--fill)}
.qas{display:grid;gap:8px}
.qa{border-radius:var(--r2);background:var(--blanc);transition:box-shadow .4s}
.qa summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:19px 22px;font-weight:550;font-size:16.5px;line-height:1.35}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"";flex:none;width:22px;height:22px;border-radius:50%;background:var(--papier) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A1A1A' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 7v10M7 12h10'/%3E%3C/svg%3E") center/14px no-repeat;transition:transform .5s var(--sp),background-color .4s}
.qa[open] summary::after{transform:rotate(45deg);background-color:var(--fill)}
.qa>div{display:grid;gap:10px;padding:0 22px 20px;color:var(--mu);font-size:15.5px;line-height:1.6}
.qa>div a{color:var(--encre);border-bottom:1px solid currentColor}
.dk .qa{background:rgba(255,255,255,.05)}.dk .qa>div{color:var(--nmu)}
.chiffres{display:flex;flex-wrap:wrap;gap:12px 32px;margin-top:30px}
.chiffres div{display:grid;gap:2px}
.chiffres b{font-family:var(--d);font-weight:650;font-size:clamp(26px,2.6vw,34px);letter-spacing:-0.025em;line-height:1}
.chiffres span{font-size:13.5px;color:var(--fa);line-height:1.3}
.tab-wrap{overflow-x:auto;border-radius:var(--r2)}
.tab{width:100%;border-collapse:collapse;font-size:15px;background:var(--blanc)}
.tab th,.tab td{padding:13px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--ln)}
.tab thead th{font-size:13px;font-weight:550;color:var(--fa);background:var(--papier)}
.tab tbody th[colspan]{font-family:var(--d);font-weight:650;font-size:18px;letter-spacing:-.03em;background:var(--blanc);padding-top:20px}
.tab td.u{white-space:nowrap;font-weight:650}
.tab tr:last-child td{border-bottom:0}
.cmp{display:grid;gap:10px}
.cmp-r{display:grid;background:var(--blanc);border-radius:var(--r2);overflow:hidden}
.cmp-tete{display:none}
.cmp-r>div{padding:14px 18px;border-top:1px solid var(--ln);font-size:15px;line-height:1.4}
.cmp-r>div:first-child{border-top:0;font-family:var(--d);font-weight:650;font-size:20px;letter-spacing:-0.02em}
.cmp-r>div[data-l]::before{content:attr(data-l);display:block;margin-bottom:2px;font-size:12.5px;color:var(--fa)}
.cmp-r.nous{background:var(--fill)}
@media (min-width:980px){
  .cmp{gap:0;background:var(--blanc);border-radius:var(--r);overflow:hidden}
  .cmp-tete,.cmp-r{display:grid;grid-template-columns:1.1fr repeat(4,minmax(0,1fr));border-radius:0;background:none}
  .cmp-tete>div{padding:16px 18px;font-size:13px;color:var(--fa);border-bottom:1px solid var(--ln)}
  .cmp-r>div{border-top:0;border-bottom:1px solid var(--ln)}
  .cmp-r>div[data-l]::before{display:none}
  .cmp-r.nous{background:var(--fill)}
  .cmp-r:last-child>div{border-bottom:0}
}

/* coût comparé */
.cout{display:grid;gap:24px;padding:clamp(22px,3vw,36px);border-radius:var(--r);background:var(--blanc)}
@media (min-width:900px){.cout{grid-template-columns:.9fr 1.1fr;align-items:center}}
.cout .reg{display:grid;gap:14px}
.barres{display:grid;gap:16px}
.barre-c{display:grid;gap:6px}
.barre-c p{display:flex;justify-content:space-between;gap:12px;font-size:14.5px}
.barre-c p b{font-weight:600}
.barre-c .tr{height:18px;border-radius:6px;background:var(--papier2);overflow:hidden}
.barre-c .tr i{display:block;height:100%;width:0;border-radius:6px;background:var(--encre);transition:width 1s var(--e)}
.barre-c.t .tr i{background:var(--fill)}

/* champs de formulaire */
.champ{display:grid;gap:6px;min-width:0}
.champ>label,.champ>.lb{font-size:14px;font-weight:550}
.champ small{font-size:13px;color:var(--fa)}
.in,select.in,textarea.in{width:100%;min-height:52px;padding:13px 16px;border:0;border-radius:14px;background:var(--blanc);box-shadow:inset 0 0 0 1px var(--ln2);font-size:16px;transition:box-shadow .25s}
textarea.in{min-height:120px;resize:vertical;line-height:1.5}
.in:focus{outline:0;box-shadow:inset 0 0 0 2px var(--encre)}
.champ.err .in{box-shadow:inset 0 0 0 2px var(--vermillon)}
.champ .msg-err{color:#A23B2A;font-size:13.5px;font-weight:550}
.grille2{display:grid;gap:16px}
@media (min-width:700px){.grille2{grid-template-columns:1fr 1fr}.grille2 .pl{grid-column:1/-1}}
.miel{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
input[type=range]{-webkit-appearance:none;appearance:none;height:28px;background:transparent;cursor:pointer;--tc:var(--encre);--tr:var(--papier2)}
input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:linear-gradient(90deg,var(--tc) var(--p,0%),var(--tr) var(--p,0%))}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;margin-top:-9px;border-radius:50%;background:var(--blanc);box-shadow:0 2px 8px rgba(0,0,0,.25),inset 0 0 0 2px var(--tc)}
input[type=range]::-moz-range-track{height:4px;border-radius:2px;background:var(--tr)}
input[type=range]::-moz-range-progress{height:4px;border-radius:2px;background:var(--tc)}
input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--blanc);border:2px solid var(--tc)}
.dk input[type=range]{--tc:var(--fill);--tr:rgba(255,255,255,.14)}
.choix{display:flex;flex-wrap:wrap;gap:8px}
.choix label{position:relative;cursor:pointer}
.choix input{position:absolute;inset:0;opacity:0;cursor:pointer}
.choix span{display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:10px 16px;border-radius:14px;background:var(--blanc);box-shadow:inset 0 0 0 1px var(--ln2);font-size:15px;line-height:1.3;transition:background .3s,box-shadow .3s,transform .35s var(--sp)}
.choix input:checked+span{background:var(--fill);box-shadow:inset 0 0 0 1.5px var(--encre)}
.choix input:focus-visible+span{outline:2px solid var(--encre);outline-offset:2px}
.choix label:active span{transform:scale(.97)}
.choix.gros{display:grid;gap:10px}
@media (min-width:640px){.choix.gros{grid-template-columns:1fr 1fr}}
.choix.gros span{width:100%;min-height:66px;padding:14px 18px;font-size:16px;border-radius:16px;font-weight:500}
.choix.gros span small{display:block;font-size:13px;color:var(--fa);font-weight:400}
.sw{display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-size:14.5px}
.sw input{position:absolute;opacity:0;width:1px;height:1px}
.sw .tr{position:relative;flex:none;width:46px;height:28px;border-radius:999px;background:var(--papier2);box-shadow:inset 0 0 0 1px var(--ln2);transition:background .3s}
.sw .tr::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:var(--blanc);box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .45s var(--sp)}
.sw input:checked+.tr{background:var(--encre)}
.sw input:checked+.tr::after{transform:translateX(18px)}
.sw input:focus-visible+.tr{outline:2px solid var(--encre);outline-offset:2px}
.sw small{display:block;color:var(--fa);font-size:13px}

/* grille d'unités (une case = une unité, elle se remplit) */
.gu{display:grid;grid-template-columns:repeat(var(--c,15),minmax(0,1fr));gap:var(--gg,4px)}
.gu i{aspect-ratio:1;border-radius:28%;background:var(--papier2);transition:background .45s var(--e),transform .45s var(--sp)}
.gu i.u{background:var(--encre)}
.gu i.x{background:var(--vermillon)}
.gu i.pop{transform:scale(1.25)}

/* ---------- simulateur ---------- */
.sim{display:grid;gap:22px;align-items:start}
@media (min-width:1000px){.sim{grid-template-columns:minmax(0,1fr) 400px}}
.presets{display:flex;flex-wrap:wrap;gap:8px}
.presets button{padding:9px 15px;border-radius:999px;background:var(--blanc);box-shadow:inset 0 0 0 1px var(--ln2);font-size:14px;font-weight:550;transition:background .3s,box-shadow .3s}
.presets button[aria-pressed=true]{background:var(--fill);box-shadow:inset 0 0 0 1.5px var(--encre)}
.cat{border-radius:var(--r);background:var(--blanc);overflow:hidden}
.cat+.cat{margin-top:12px}
.cat>h3{display:flex;align-items:baseline;gap:10px;padding:20px 22px 10px;font-family:var(--d);font-weight:650;font-size:24px;letter-spacing:-0.022em}
.cat>h3 .it{font-size:16px;color:var(--fa);letter-spacing:-.01em}
.ligne{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 14px;align-items:center;padding:13px 22px;border-top:1px solid var(--ln);transition:background .35s}
.ligne.on{background:var(--fill2)}
.ligne .t b{display:block;font-weight:550;line-height:1.3}
.ligne .t small{display:block;margin-top:2px;font-size:13px;color:var(--fa);line-height:1.35}
.ligne .t .ub{display:inline-block;margin-left:7px;padding:1px 7px;border-radius:6px;background:var(--papier);font-size:12px;font-weight:650;vertical-align:1px}
.ligne.on .t .ub{background:var(--blanc)}
.pas{display:flex;align-items:center;gap:2px;padding:3px;border-radius:999px;background:var(--papier)}
.pas button{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;font-size:17px;transition:background .2s,transform .35s var(--sp)}
.pas button:active{transform:scale(.86)}
@media (hover:hover){.pas button:hover{background:var(--blanc)}}
.pas button:disabled{opacity:.3;cursor:default}
.pas output{min-width:30px;text-align:center;font-weight:650;font-variant-numeric:tabular-nums}
.recap{position:relative;display:grid;gap:18px;padding:24px;border-radius:var(--r);background:var(--encre);color:var(--ntx)}
@media (min-width:1000px){.recap{position:sticky;top:96px}}
.recap h2{font-family:var(--d);font-weight:650;font-size:22px;letter-spacing:-0.02em}
.recap .gu{--c:15;--gg:4px}
.recap .gu i{background:rgba(255,255,255,.08)}
.recap .gu i.u{background:var(--fill)}
.recap .gu i.x{background:var(--vermillon)}
.recap .gu i.r{background:rgba(255,255,255,.2)}
.tot{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.tot>span:first-child{color:var(--nmu);font-size:14px}
.tot b{font-family:var(--d);font-weight:650;font-size:40px;letter-spacing:-0.028em;line-height:1}
.recap .tot .prix{font-size:46px}
.reco{display:grid;gap:8px;padding:16px;border-radius:16px;background:rgba(255,255,255,.06)}
.reco .nm{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.reco .nm b{font-family:var(--d);font-weight:650;font-size:28px;letter-spacing:-0.025em}
.reco .nm span{font-size:13.5px;color:var(--nmu)}
.reco p{font-size:14px;color:var(--nmu);line-height:1.45}
.reco .alt{padding-top:8px;border-top:1px solid var(--nln);font-size:13.5px}
.lig{display:grid;gap:6px;font-size:14px}
.lig div{display:flex;justify-content:space-between;gap:10px}
.lig div span:first-child{color:var(--nmu)}
.lig .fort{padding-top:8px;border-top:1px solid var(--nln);font-weight:600}
.recap .bt,.sel-r .bt{width:100%;background:var(--fill);color:var(--encre)}
.recap .bt::before,.sel-r .bt::before{background:var(--ntx)}
.recap .bt .ar,.sel-r .bt .ar{background:rgba(18,18,18,.1)}
.recap .act,.sel-r .act{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.recap .act .bt,.sel-r .act .bt{min-height:44px;font-size:14px;padding:0 .8em;background:transparent;color:var(--ntx);box-shadow:inset 0 0 0 1px var(--nln)}
@media (hover:hover){.recap .act .bt:hover,.sel-r .act .bt:hover{color:var(--encre)}}
.panier{display:flex;flex-wrap:wrap;gap:5px;min-height:28px}
.panier li{padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.08);font-size:12.5px}
@media (prefers-reduced-motion:no-preference){.panier li{animation:pop .45s var(--sp) both}}
.panier .vide{padding:4px 0;background:none;color:var(--nmu)}
@keyframes pop{from{opacity:0;transform:translateY(6px) scale(.94)}}
.prix{position:relative;display:inline-block;font-family:var(--d);font-weight:650;letter-spacing:-0.025em;line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap}
.prix .v{display:inline-block}
.prix .v i{display:inline-block;font-style:normal;white-space:pre;animation:entre .7s var(--e) both;animation-delay:calc(var(--k)*32ms)}
.prix .v.sort{position:absolute;left:0;top:0;pointer-events:none;animation:sort .45s ease forwards}
.prix .v.sort i{animation:none}
@keyframes entre{from{opacity:0;transform:translateY(.42em) rotate(4deg);filter:blur(5px)}}
@keyframes sort{to{opacity:0;transform:translateY(-.35em);filter:blur(5px)}}
.recap-mob{display:none}
@media (max-width:999px){
  body[data-rub=simulateur]{padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}
  .recap-mob{position:fixed;z-index:44;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom,0px));display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 8px 8px 16px;border-radius:20px;background:rgba(18,18,18,.94);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);color:var(--ntx);box-shadow:0 20px 40px -20px rgba(0,0,0,.5)}
  .recap-mob .rm-t{flex:1;min-width:0;text-align:left;font-size:12.5px;color:var(--nmu);line-height:1.25}
  .recap-mob .rm-t b{display:block;color:var(--ntx);font-size:15.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .recap-mob .bt{min-height:46px;font-size:14px;background:var(--fill);color:var(--encre);flex:none}
  .recap-mob .bt .ar{background:rgba(18,18,18,.1)}
}

/* comparateur par profil */
.cmpf{display:grid;gap:16px}
.cmpf-g{display:grid;gap:12px}
@media (min-width:900px){.cmpf-g{grid-template-columns:repeat(3,minmax(0,1fr))}}
.cf{display:grid;gap:12px;align-content:start;padding:22px;border-radius:var(--r);background:var(--blanc);transition:box-shadow .4s}
.cf.adapt{background:var(--fill)}
.cf h3{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--d);font-weight:650;font-size:26px;letter-spacing:-0.025em}
.cf h3 span{font-family:var(--f);font-weight:550;font-size:14.5px;letter-spacing:-.01em}
.cf .couv{display:grid;gap:6px}
.cf .couv .tr{position:relative;height:10px;border-radius:5px;background:var(--papier2);overflow:hidden}
.cf.adapt .couv .tr{background:rgba(255,255,255,.55)}
.cf .couv .tr i{position:absolute;left:0;top:0;bottom:0;border-radius:5px;background:var(--encre);transition:width .9s var(--e)}
.cf .couv p{font-size:14px;color:var(--mu)}
.cf .verdict{display:flex;gap:8px;align-items:flex-start;font-size:14.5px;font-weight:550}
.cf .verdict svg{margin-top:3px}
.cf .verdict.non svg{color:var(--vermillon)}
.cf dl{display:grid;gap:6px;padding-top:12px;border-top:1px solid var(--ln);font-size:14px}
.cf dl div{display:flex;justify-content:space-between;gap:10px}
.cf dt{color:var(--fa)}
.cf dd{font-weight:550;text-align:right}
.ecart{font-size:13.5px;color:var(--fa)}

/* ---------- diagnostic ---------- */
.dg{max-width:860px;margin-inline:auto}
.dg-p{display:flex;gap:6px;margin-bottom:26px}
.dg-p i{position:relative;flex:1;height:3px;border-radius:2px;background:var(--papier2);overflow:hidden}
.dg-p i::after{content:"";position:absolute;inset:0;background:var(--encre);transform:scaleX(0);transform-origin:0 50%;transition:transform .7s var(--e)}
.dg-p i.on::after{transform:none}
.dg-q{display:grid;gap:24px}
.dg-q h2{font-family:var(--d);font-weight:650;font-size:clamp(32px,4.4vw,54px);letter-spacing:-0.028em;line-height:1}
.dg-q h2 small{display:block;margin-top:10px;font-family:var(--sf);font-style:italic;font-weight:300;font-size:.42em;letter-spacing:-.01em;color:var(--fa)}
.dg-n{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:6px}
@media (prefers-reduced-motion:no-preference){.dg-q.entre{animation:dgin .6s var(--e) both}.dg-q.entre-g{animation:dgout .6s var(--e) both}}
@keyframes dgin{from{opacity:0;transform:translateX(30px)}}
@keyframes dgout{from{opacity:0;transform:translateX(-30px)}}
.dg-r{display:grid;gap:14px}
.dg-r .bloc{display:grid;gap:12px;padding:clamp(22px,3vw,32px);border-radius:var(--r);background:var(--blanc)}
.dg-r .bloc.nuit{background:var(--fill)}
.dg-r .bloc.nuit p{color:var(--encre)}
.dg-r h3{font-family:var(--d);font-weight:650;font-size:24px;letter-spacing:-0.022em}
.dg-r ol{display:grid;gap:10px;counter-reset:p}
.dg-r ol li{display:grid;grid-template-columns:30px 1fr;gap:8px;font-size:15.5px}
.dg-r ol li::before{counter-increment:p;content:counter(p);display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--fill2);font-weight:700;font-size:13px}
.dg-r .gros{font-family:var(--d);font-weight:650;font-size:clamp(42px,5vw,64px);letter-spacing:-0.03em;line-height:.92}

/* ---------- relais ---------- */
.rl{display:grid;gap:22px}
@media (min-width:1000px){.rl{grid-template-columns:360px minmax(0,1fr);align-items:start}}
.rl-c{display:grid;gap:22px;padding:24px;border-radius:var(--r);background:var(--blanc)}
@media (min-width:1000px){.rl-c{position:sticky;top:96px}}
.rl-c .champ>.lb{display:flex;justify-content:space-between}
.rl-c .champ>.lb output{font-weight:650}
.frise{display:grid;gap:22px;padding:clamp(20px,3vw,32px);border-radius:var(--r);background:var(--encre);color:var(--ntx);overflow:hidden}
.fr-ent{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:16px}
.fr-ent b{font-family:var(--d);font-weight:650;font-size:clamp(38px,4.4vw,56px);letter-spacing:-0.03em;line-height:1}
.fr-ent>span{font-size:14px;color:var(--nmu);max-width:440px}
.frise .n{color:var(--nmu)}
.pistes{display:grid;gap:10px}
.piste{display:grid;grid-template-columns:100px minmax(0,1fr);gap:12px;align-items:center}
.piste>p{font-size:12.5px;color:var(--nmu);line-height:1.25}
.voie{position:relative;height:34px;border-radius:10px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px var(--nln)}
.seg{position:absolute;top:4px;bottom:4px;display:flex;align-items:center;padding:0 9px;border-radius:7px;font-size:11.5px;font-weight:600;white-space:nowrap;overflow:hidden;transition:left .8s var(--e),width .8s var(--e)}
.seg.a{background:var(--vermillon);color:var(--encre)}
.seg.t{background:var(--fill);color:var(--encre)}
.seg.t2{background:rgba(255,255,255,.18);color:var(--ntx)}
.seg.v{background:rgba(255,255,255,.3)}
.seg.p{background:var(--ntx);color:var(--encre)}
.echelle{display:flex;justify-content:space-between;margin-left:112px;font-size:11.5px;color:var(--nmu)}
.jalons{display:grid}
.jalon{display:grid;grid-template-columns:90px minmax(0,1fr);gap:4px 14px;padding:14px 0;border-top:1px solid var(--nln)}
.jalon>span{font-family:var(--sf);font-style:italic;font-size:15px;color:var(--fill)}
.jalon b{font-weight:600}
.jalon p{grid-column:2;font-size:14.5px;color:var(--nmu)}
@media (max-width:560px){.piste{grid-template-columns:1fr}.echelle{margin-left:0}.jalon{grid-template-columns:1fr}.jalon p{grid-column:1}}
.prep{display:grid;gap:8px}
.prep label{display:flex;gap:12px;align-items:flex-start;padding:15px 16px;border-radius:14px;background:var(--blanc);cursor:pointer;font-size:15px;line-height:1.4;transition:background .3s}
.prep input{flex:none;width:18px;height:18px;margin-top:3px;accent-color:var(--encre)}
.prep label:has(input:checked){background:var(--fill)}
.prep small{display:block;font-size:13px;color:var(--fa)}

/* ---------- demande, états ---------- */
.dem{display:grid;gap:22px;align-items:start}
@media (min-width:1000px){.dem{grid-template-columns:minmax(0,1fr) 400px}}
@media (max-width:999px){.dem .sel-r{order:-1}}
.sel-r{display:grid;gap:14px;padding:24px;border-radius:var(--r);background:var(--encre);color:var(--ntx)}
@media (min-width:1000px){.sel-r{position:sticky;top:96px}}
.sel-r h2{font-family:var(--d);font-weight:650;font-size:22px;letter-spacing:-0.02em}
.sel-r .n{color:var(--nmu)}
.sel-r .vide{color:var(--nmu);font-size:15px}
.sel-r .gu i{background:rgba(255,255,255,.08)}.sel-r .gu i.u{background:var(--fill)}.sel-r .gu i.r{background:rgba(255,255,255,.2)}
.sel-r .note{color:var(--nmu)}
.sel-r .act{display:flex;flex-wrap:wrap}
.etat{display:grid;gap:12px;justify-items:start;padding:28px;border-radius:var(--r);background:var(--blanc)}
.etat .ok{display:grid;place-items:center;width:54px;height:54px;border-radius:50%;background:var(--fill);font-size:24px}
@media (prefers-reduced-motion:no-preference){.etat .ok{animation:pop .7s var(--sp) both}}
.etat h2{font-family:var(--d);font-weight:650;font-size:clamp(30px,3.6vw,44px);letter-spacing:-0.028em;line-height:1}
.etat.apercu{box-shadow:inset 0 0 0 2px var(--encre)}
.etat.apercu .ok{background:var(--papier2)}
.etat.apercu ul{display:grid;gap:4px;font-size:14px;color:var(--mu)}
.charge{display:inline-block;width:18px;height:18px;border-radius:50%;border:2px solid rgba(255,255,255,.35);border-top-color:currentColor;animation:tourne .8s linear infinite}
@keyframes tourne{to{transform:rotate(360deg)}}

/* note imprimable */
.note-doc{display:grid;gap:22px;max-width:820px;margin:0 auto;padding:clamp(24px,5vw,56px);border-radius:var(--r2);background:var(--blanc);font-size:15px;line-height:1.55}
.note-doc h1{font-family:var(--d);font-weight:650;font-size:34px;letter-spacing:-0.022em;line-height:1}
.note-doc h2{margin-bottom:6px;font-family:var(--d);font-weight:650;font-size:19px;letter-spacing:-.03em}
.note-doc table{width:100%;border-collapse:collapse;font-size:14px}
.note-doc th,.note-doc td{padding:7px 4px;text-align:left;border-bottom:1px solid var(--ln)}
.note-doc .r{text-align:right}
.note-doc .ent{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding-bottom:16px;border-bottom:2px solid var(--encre)}
.note-doc .pdp{padding-top:12px;border-top:1px solid var(--ln);font-size:12.5px;color:var(--fa)}
.note-bar{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-bottom:24px}


/* ---------- calendrier ---------- */
.cal-g{display:grid;grid-auto-flow:column;grid-auto-columns:min(84vw,360px);gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--g);margin-inline:calc(-1*var(--g));padding:4px var(--g) 8px;scrollbar-width:none}
.cal-g::-webkit-scrollbar{display:none}
@media (min-width:1000px){.cal-g{grid-auto-flow:row;grid-template-columns:repeat(3,minmax(0,1fr));overflow:visible;margin:0;padding:0;gap:16px}}
.mo{position:relative;scroll-snap-align:start;display:grid;gap:10px;align-content:start;padding:24px 22px 20px;border-radius:var(--r);background:var(--blanc)}
.mo h3{font-family:var(--d);font-weight:650;font-size:clamp(40px,4.4vw,62px);letter-spacing:-0.033em;line-height:.88}
.mo-u{font-size:14px;color:var(--fa);margin-bottom:6px}
.mo-u b{font-family:var(--d);font-weight:650;font-size:22px;letter-spacing:-0.02em;color:var(--encre)}
.ev3{position:relative;display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:12px;align-items:start;padding:11px 0;border-top:1px solid var(--ln);cursor:pointer}
.ev3 input{position:absolute;opacity:0;width:1px;height:1px}
.ev3 .k{width:20px;height:20px;margin-top:1px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--encre);transition:background .4s,box-shadow .4s,transform .5s var(--sp)}
.ev3 input:checked+.k,.ev3 .k.on{background:var(--cible);box-shadow:inset 0 0 0 2px var(--cible);transform:scale(1.08)}
.ev3 input:focus-visible+.k{outline:2px solid var(--encre);outline-offset:3px}
.ev3 b{display:block;font-weight:600;font-size:15px;line-height:1.3}
.ev3 small{display:block;font-size:13px;color:var(--fa)}
.ev3 .u{font-size:12px;font-weight:650;padding:2px 8px;border-radius:7px;background:var(--fill2);white-space:nowrap}
.ev3 .u.x{display:grid;place-items:center;width:28px;height:28px;padding:0;border-radius:50%;background:var(--papier);font-size:14px}
.ev3.aj{cursor:default}
.ajout{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;margin-top:8px}
.ajout input,.ajout select{height:44px;border:0;border-radius:12px;background:var(--papier);padding:0 12px;font-size:14.5px;min-width:0}
.ajout input{grid-column:1/-1}
.ajout select{appearance:none}
.ajout .ic{width:44px;height:44px;background:var(--encre);color:var(--ntx);box-shadow:none}
.cal-h{display:grid;gap:12px;margin-bottom:24px}
.cal-b{display:grid;gap:18px;margin-top:22px;padding:24px;border-radius:var(--r);background:var(--blanc)}
@media (min-width:900px){.cal-b{grid-template-columns:minmax(0,1fr) auto;align-items:center}}
.cal-s p{font-size:16px;max-width:46em}
.cal-s b{font-weight:650}


/* ==========================================================================
   ESTIMER : un seul parcours, du diagnostic à la proposition
   ========================================================================== */
.est{display:grid;gap:clamp(22px,3vw,36px)}
.est-p{--p:0;position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;counter-reset:ep}
.est-p::before,.est-p::after{content:"";position:absolute;left:12px;top:13px;height:5px;border-radius:5px}
.est-p::before{right:calc(25% - 12px);background:rgba(26,26,26,.1)}
.est-p::after{width:calc((75% - 24px + 12px) * var(--p));background:var(--fil);transition:width .6s var(--io)}
.est-p li{position:relative;z-index:1}
.est-p button{display:grid;justify-items:start;gap:8px;width:100%;padding:0 10px 0 0;text-align:left;font-size:14px;font-weight:600;color:var(--fa);transition:color .3s}
.est-p button::before{counter-increment:ep;content:counter(ep);display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--creme);box-shadow:inset 0 0 0 2px rgba(26,26,26,.25);font-size:13px;color:var(--fa);transition:background .35s,color .35s,box-shadow .35s,transform .4s var(--sp)}
.est-p button.fait{color:var(--encre)}
.est-p button.fait::before{background:var(--fil);color:var(--encre);box-shadow:inset 0 0 0 2px var(--fil)}
.est-p button[aria-current=step]{color:var(--encre)}
.est-p button[aria-current=step]::before{background:var(--encre);color:var(--ntx);box-shadow:none;transform:scale(1.12)}
.est-p button:disabled{cursor:default}
@media (max-width:640px){.est-p button span{display:none}.est-p button[aria-current=step] span{display:block;white-space:nowrap}}
.est-z{position:relative}
.est-e{display:grid;gap:22px}
@media (prefers-reduced-motion:no-preference){.est-e.entre{animation:est-in .5s var(--e) both}.est-e.entre-g{animation:est-in-g .5s var(--e) both}}
@keyframes est-in{from{opacity:0;transform:translateX(26px)}}
@keyframes est-in-g{from{opacity:0;transform:translateX(-26px)}}
.est-n{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;padding-top:6px}
.est-retour{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:14.5px}
.est-retour i{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;box-shadow:inset 0 0 0 1.5px currentColor;font-style:normal;transition:transform .45s var(--e),background .3s,color .3s}
.est-retour:is(:hover,:focus-visible) i{transform:translateX(-4px);background:var(--encre);color:var(--ntx)}
/* étape 0 : deux entrées */
.entrees{display:grid;gap:14px}
@media (min-width:860px){.entrees{grid-template-columns:1fr 1fr}}
.entree{position:relative;display:grid;gap:10px;align-content:start;padding:clamp(24px,2.6vw,34px);border-radius:var(--r);background:var(--blanc);text-align:left;box-shadow:inset 0 0 0 1px transparent;transition:box-shadow .4s,transform .4s var(--sp)}
.entree .q{font-family:var(--sf);font-style:italic;font-weight:300;font-size:19px;color:var(--mu);padding-right:56px}
.entree b{font-family:var(--d);font-weight:650;font-size:clamp(28px,2.8vw,40px);letter-spacing:-.028em;line-height:1}
.entree span.d2{font-size:15.5px;color:var(--mu);max-width:28em}
.entree .go{position:absolute;right:20px;top:20px;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--creme);transition:transform .45s var(--e),background .3s,color .3s}
.entree:is(:hover,:focus-visible){box-shadow:inset 0 0 0 1.5px var(--encre)}
.entree:is(:hover,:focus-visible) .go{transform:translateX(4px);background:var(--fil);color:var(--encre)}
.entree:active{transform:scale(.985)}
.entree.princ{background:var(--encre);color:var(--ntx)}
.entree.princ .q,.entree.princ span.d2{color:var(--nmu)}
.entree.princ .go{background:var(--fil);color:var(--encre)}
/* étape 2 : la recommandation */
.reco2{display:grid;gap:14px}
@media (min-width:980px){.reco2{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:start}}
.reco2 .carte{display:grid;gap:12px;padding:clamp(24px,3vw,34px);border-radius:var(--r);background:var(--encre);color:var(--ntx)}
.reco2 .carte .nmf{font-family:var(--d);font-weight:650;font-size:clamp(40px,4.6vw,64px);letter-spacing:-.035em;line-height:.95}
.reco2 .carte .px{font-family:var(--d);font-weight:600;font-size:22px;letter-spacing:-.015em}
.reco2 .carte p{color:var(--nmu);font-size:15.5px}
.reco2 .carte ul{display:flex;flex-wrap:wrap;gap:6px}
.reco2 .carte ul li{padding:5px 11px;border-radius:999px;background:rgba(255,255,255,.1);font-size:13px}
.reco2 .bloc{display:grid;gap:12px;padding:clamp(22px,2.6vw,30px);border-radius:var(--r);background:var(--blanc)}
.reco2 h3{font-family:var(--d);font-weight:600;font-size:22px;letter-spacing:-.02em}
.reco2 ol{display:grid;gap:10px;counter-reset:p}
.reco2 ol li{display:grid;grid-template-columns:28px 1fr;gap:8px;font-size:15px;line-height:1.45}
.reco2 ol li::before{counter-increment:p;content:counter(p);display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--cible2);font-weight:700;font-size:12.5px}
.affine{display:grid;gap:10px}
.affine .choix span{min-height:40px;padding:8px 13px;font-size:14px}
/* étape 4 : la proposition */
.prop{display:grid;gap:14px}
@media (min-width:980px){.prop{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}}
.prop .carte{display:grid;gap:12px;padding:clamp(24px,3vw,34px);border-radius:var(--r);background:var(--blanc)}
.prop .carte .nmf{font-family:var(--d);font-weight:650;font-size:clamp(34px,3.6vw,52px);letter-spacing:-.03em;line-height:1}
.prop .lig2{display:grid;gap:7px;font-size:14.5px}
.prop .lig2 div{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px solid var(--ln)}
.prop .lig2 div span:first-child{color:var(--fa)}
.prop .lig2 .fort{font-weight:650}
.prop .panier2{display:flex;flex-wrap:wrap;gap:6px}
.prop .panier2 li{padding:5px 11px;border-radius:999px;background:var(--creme);font-size:13px}
.prop .suite{display:grid;gap:12px;align-content:start}
.est .sim{margin-top:4px}
.est [data-e="3"] .recap{top:84px}

/* ==========================================================================
   FORMULAIRE EN TROIS ÉCRANS
   ========================================================================== */
.pf{display:grid;gap:22px;max-width:720px}
.pf-p{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:8px}
.pf-p span{display:grid;gap:8px;font-size:13px;font-weight:600;color:var(--fa);transition:color .3s}
.pf-p span::before{content:"";height:5px;border-radius:5px;background:rgba(26,26,26,.12);transition:background .45s var(--e)}
.pf-p span.fait,.pf-p span.on{color:var(--encre)}
.pf-p span.fait::before,.pf-p span.on::before{background:var(--fil)}
.pf-e{display:grid;gap:18px;border:0;padding:0;margin:0;min-width:0}
.pf-e legend{padding:0;margin-bottom:6px;font-family:var(--d);font-weight:600;font-size:clamp(28px,3vw,40px);letter-spacing:-.025em;line-height:1.05}
.pf-e legend small{display:block;margin-top:8px;font-family:var(--f);font-weight:400;font-size:15.5px;letter-spacing:0;color:var(--mu)}
@media (prefers-reduced-motion:no-preference){.pf-e.entre{animation:est-in .45s var(--e) both}.pf-e.entre-g{animation:est-in-g .45s var(--e) both}}
.pf-n{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-top:6px}
.pf-r{display:grid;gap:8px;padding:18px 20px;border-radius:var(--r2);background:var(--blanc);font-size:14.5px}
.pf-r div{display:flex;justify-content:space-between;gap:14px}
.pf-r div span:first-child{color:var(--fa)}
.pf-r div b{font-weight:600;text-align:right}
.pf-r .mod{justify-self:start;font-size:13.5px;font-weight:600;border-bottom:1.5px solid currentColor}
.pf .etat{margin-top:4px}
.pf-ctx{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:14px 16px;border-radius:var(--r2);background:var(--cible2);font-size:14.5px}
.pf-ctx b{font-weight:650}
.pf-ctx a{margin-left:auto;font-weight:600;font-size:13.5px;border-bottom:1.5px solid currentColor}

/* ---------- deux portes : diagnostic et configurateur ---------- */
.deux-portes{display:inline-flex;flex-wrap:wrap;gap:4px;padding:4px;margin-top:26px;border-radius:999px;background:var(--blanc);box-shadow:inset 0 0 0 1px var(--ln2)}
.deux-portes a{display:grid;gap:1px;padding:9px 18px;border-radius:999px;font-size:14.5px;font-weight:600;line-height:1.2;transition:background .35s,color .35s}
.deux-portes a small{font-weight:400;font-size:12.5px;color:var(--fa)}
.deux-portes a[aria-current]{background:var(--encre);color:var(--ntx)}
.deux-portes a[aria-current] small{color:var(--nmu)}
@media (hover:hover){.deux-portes a:not([aria-current]):hover{background:var(--creme)}}

/* tableau du calendrier : unités consommées et reportées, mois par mois */
.cal-t{width:100%;border-collapse:collapse;font-size:14.5px;margin-top:6px}
.cal-t th,.cal-t td{padding:9px 10px;text-align:right;border-bottom:1px solid var(--ln);white-space:nowrap}
.cal-t th:first-child,.cal-t td:first-child{text-align:left}
.cal-t thead th{font-size:12.5px;font-weight:600;color:var(--fa)}
.cal-t td.x{color:var(--cible-t);font-weight:650}
.cal-t tfoot td{font-weight:650;border-bottom:0}
.cal-wrap{overflow-x:auto}

/* ---------- pied de page ---------- */
.ft{position:relative;z-index:2;padding:80px 0 calc(40px + env(safe-area-inset-bottom,0px));background:var(--nuit);color:var(--ntx)}
.ft .w{display:grid;gap:34px}
@media (min-width:900px){.ft .w{grid-template-columns:1.6fr 1fr 1fr 1fr}}
.ft .lg{color:var(--ntx)}
.ft .lg svg{height:64px}
.ft-a p{margin-top:18px;max-width:22em;font-size:15px;color:var(--nmu)}
.ft-a p a{color:var(--ntx);border-bottom:1px solid var(--nln)}
.ft .h5{margin-bottom:12px;font-size:12.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:rgba(248,245,242,.5)}
.ft ul{display:grid;gap:8px;font-size:15px}
.ft ul a{position:relative}
.ft ul a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1.5px;background:var(--fil);transform:scaleX(0);transform-origin:100% 50%;transition:transform .5s var(--e)}
@media (hover:hover){.ft ul a:hover::after{transform:scaleX(1);transform-origin:0 50%}}
.ft .bas{grid-column:1/-1;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding-top:22px;border-top:1px solid var(--nln);font-size:13.5px;color:rgba(248,245,242,.5)}
.ft .bas span{display:flex;gap:18px}

/* message éphémère */
.toast{position:fixed;z-index:210;left:50%;top:84px;max-width:calc(100% - 32px);padding:12px 18px;border-radius:999px;background:var(--encre);color:var(--ntx);font-size:14.5px;text-align:center;opacity:0;pointer-events:none;transform:translate(-50%,-30px);transition:opacity .4s,transform .55s var(--sp)}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* page introuvable */
.p404{display:grid;place-items:center;min-height:72vh;padding:150px 0 90px;text-align:center}
.p404 h1{font-size:clamp(44px,7vw,100px);letter-spacing:-.03em;line-height:.98}
.p404 h1 .it{display:block;font-size:.5em;margin-top:.2em}
.p404 .lead{margin:22px auto 30px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important}
}
@media print{
  .hd,.ft,.toast,.note-bar,.evite,.recap-mob,.mn,.ph,.voile,.rdv{display:none!important}
  html,body{background:#fff}
  .note-doc{padding:0;max-width:none}
  @page{margin:16mm}
}

/* ajustements de contexte */
@media (prefers-reduced-motion:no-preference){html:focus-within{scroll-behavior:smooth}}
.fo{background:var(--blanc)}
.feuille.blanc .fo{background:var(--creme)}
.sim.hors [data-pxs]{display:none}
.recap .tot .prix{font-size:44px}
.feuille.blanc .qa{background:var(--creme)}
.feuille.blanc .pt{background:var(--creme)}
.sec-t h2.d{font-weight:600}
.dk .lead{color:var(--nmu)}
.dk .n{color:var(--nmu)}
.dk .et .qd{background:var(--cible3);color:var(--encre)}
.ph-g h1{font-size:clamp(40px,5.2vw,82px)}
.choix span{transition:background .3s,box-shadow .3s,transform .35s var(--sp)}
.choix label:hover span{box-shadow:inset 0 0 0 1.5px var(--encre)}
.qa summary{transition:color .3s}
.qa:hover summary{color:var(--cible-t)}
.pt{transition:box-shadow .4s}
.pt:hover{box-shadow:inset 0 0 0 1.5px var(--encre)}
.dk .pt:hover{box-shadow:inset 0 0 0 1.5px var(--ntx)}
.sit,.porte,.ca{box-shadow:inset 0 0 0 1px transparent}
.porte:is(:hover,:focus-visible),.ca:is(:hover,:focus-visible){box-shadow:inset 0 0 0 1.5px var(--encre)}
.ca.pr:is(:hover,:focus-visible){box-shadow:inset 0 0 0 1.5px var(--fil)}
.sit:is(:hover,:focus-visible){box-shadow:inset 0 0 0 1.5px var(--ntx)}
.sit.relais:is(:hover,:focus-visible){box-shadow:inset 0 0 0 1.5px var(--encre)}
.est-plus{display:flex;flex-wrap:wrap;gap:12px 28px;margin:4px 0 0}
.tab th small{display:block;margin-top:3px;font-size:12.5px;font-weight:400;color:var(--fa)}

/* ==========================================================================
   V5 : des réponses graphiques précises, sans bulles
   ========================================================================== */
/* boutons : la flèche avance d'un cran, le fond passe au rouge */
.bt .ar{width:auto;height:auto;margin-right:-.2em;border-radius:0;background:none!important;overflow:visible}
.bt .ar svg{width:18px;height:18px;transition:transform .55s cubic-bezier(.34,1.6,.5,1)}
.bt .ar::after{display:none}
.bt:is(:hover,:focus-visible) .ar svg{transform:translateX(5px)}
/* flèches des cartes : un trait, pas un disque */
.sit .go,.porte .go,.ca .go,.entree .go{width:auto;height:auto;border-radius:0;background:none!important;color:inherit!important;right:26px;top:26px;transform:none}
.sit .go .i,.porte .go .i,.ca .go .i,.entree .go .i{width:26px;height:26px;stroke-width:1.6;transition:transform .6s cubic-bezier(.34,1.6,.5,1)}
:is(.sit,.porte,.ca,.entree):is(:hover,:focus-visible) .go{transform:none!important}
:is(.sit,.porte,.ca,.entree):is(:hover,:focus-visible) .go .i{transform:translateX(7px)}
/* le titre d'une carte reçoit un filet au survol */
:is(.sit,.porte,.ca,.entree)>b,:is(.sit,.porte,.ca,.entree)>div>b{width:fit-content;padding:0 .12em;margin-left:-.12em;background:linear-gradient(var(--filet,var(--cible3)),var(--filet,var(--cible3))) no-repeat .2em calc(100% - .06em)/0% .26em;transition:background-size .6s var(--e)}
:is(.sit,.porte,.ca,.entree):is(:hover,:focus-visible)>b,:is(.sit,.porte,.ca,.entree):is(:hover,:focus-visible)>div>b{background-size:100% .26em}
.ca.pr{--filet:color-mix(in srgb,var(--cible3) 55%,transparent)}

/* la galerie : la photographie glisse dans son cadre, le cadre se resserre, un fil passe */
.gal-c{clip-path:inset(0 round var(--r2));transition:clip-path .7s cubic-bezier(.3,1.2,.4,1)}
.gal-c img{transition:transform 1.1s var(--e),filter .6s}
.gal-c:is(:hover,:focus-visible){clip-path:inset(6px round 30px 30px 30px 72px)}
.gal-c:is(:hover,:focus-visible) img{transform:scale(1.09) translate(-2.5%,-2%)}
.gal-c figcaption{transition:transform .6s var(--e)}
.gal-c:is(:hover,:focus-visible) figcaption{transform:translate(6px,-6px)}
.gal-c .gf{position:absolute;inset:0;z-index:4;width:100%;height:100%;pointer-events:none;overflow:visible}
.gal-c .gf path{fill:none;stroke:var(--fil);stroke-width:3;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .8s var(--io)}
.gal-c:is(:hover,:focus-visible) .gf path{stroke-dashoffset:0;transition-delay:.08s}
@media (hover:none){.gal-c{clip-path:none}}
.gal-c:focus-visible{box-shadow:none;outline:3px solid var(--fil);outline-offset:3px}

/* pied de page : un logo qui respire, trois colonnes égales, la maison sur sa propre ligne */
.ft{padding:clamp(72px,8vw,120px) 0 calc(36px + env(safe-area-inset-bottom,0px))}
.ft .w{gap:44px 40px}
@media (min-width:900px){.ft .w{grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr))}}
.ft .lg svg{height:clamp(56px,6vw,84px)}
.ft-a{display:grid;align-content:start;justify-items:start;gap:0}
.ft-a p{margin-top:22px;max-width:24em;font-size:16px;line-height:1.5;color:var(--nmu)}
.ft-a .ft-m{margin-top:14px;padding-top:14px;border-top:1px solid var(--nln);font-size:14.5px;color:var(--ntx);min-width:min(100%,19em)}
.ft-a .ft-bt{margin-top:26px}
.ft .h5{margin-bottom:16px}
.ft ul{gap:11px;font-size:15.5px}
.ft .bas{margin-top:12px}
@media (max-width:899px){.ft .w{grid-template-columns:1fr 1fr;gap:40px 20px}.ft-a,.ft .w>div:nth-child(4),.ft .bas{grid-column:1/-1}}
main>.feuille:last-child{padding-bottom:clamp(64px,8vw,110px)}

/* étapes parcourues par le fil : le numéro devient un nœud */
.etapes[data-fil] .et{grid-template-columns:44px minmax(0,1fr);gap:6px 22px;border-top:0;padding:18px 0 26px}
.etapes[data-fil] .et::before{position:relative;z-index:1;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--sec-bg,var(--creme));box-shadow:inset 0 0 0 2.5px rgba(26,26,26,.22);font-size:15px;letter-spacing:0;transition:background .45s,color .45s,box-shadow .45s,transform .6s cubic-bezier(.34,1.6,.5,1)}
.etapes[data-fil] .et.passe::before{background:var(--fil);color:var(--encre);box-shadow:inset 0 0 0 2.5px var(--fil);transform:scale(1.06)}
.etapes[data-fil] .et h3{align-self:center}
.dk .etapes[data-fil] .et::before{box-shadow:inset 0 0 0 2.5px var(--nln)}
.sable{--sec-bg:var(--sable)}.blanc{--sec-bg:var(--blanc)}.nuit,.dk{--sec-bg:var(--nuit)}.aubergine{--sec-bg:var(--aubergine)}

/* les engagements en chiffres, puis le détail replié */
ul.chiffres{display:grid;gap:12px;margin:0 0 18px;padding:0;list-style:none}
@media (min-width:760px){ul.chiffres{grid-template-columns:repeat(4,minmax(0,1fr))}}
ul.chiffres li{position:relative;display:grid;align-content:space-between;gap:26px;min-height:170px;padding:24px 24px 22px;border-radius:var(--r);background:var(--creme);overflow:hidden;transition:transform .6s cubic-bezier(.34,1.5,.5,1)}
ul.chiffres li b{font-family:var(--d);font-weight:650;font-size:clamp(44px,4.6vw,68px);letter-spacing:-.04em;line-height:.9}
ul.chiffres li span{font-size:15px;color:var(--mu);max-width:15em}
ul.chiffres li::after{content:"";position:absolute;left:24px;top:calc(24px + clamp(44px,4.6vw,68px)*.84);width:52%;height:.32em;background:var(--cible3);z-index:0;transform:scaleX(.24);transform-origin:0 50%;transition:transform .7s var(--e)}
ul.chiffres li b{position:relative;z-index:1}
@media (hover:hover){ul.chiffres li:hover{transform:translateY(-4px)}ul.chiffres li:hover::after{transform:none}}
.tab-d{margin-bottom:6px}
.tab-d>div{padding-top:6px}
.ph-ph.pc>img{opacity:0}
.ph-ph .pc-s{position:absolute;inset:0;width:100%;height:100%}
.ph-ph .pinceau{stroke-dasharray:1;stroke-dashoffset:1}
.ph-ph.ph-r>img{transition:none}

/* entreprises : une ouverture vert pâle, un bandeau de résultats qui défile */
.ph.pme{background:var(--cible2)}
.ph.pme .hv-c{box-shadow:0 0 0 6px var(--cible2),0 34px 60px -30px rgba(26,26,26,.65)}
.resultats{padding-bottom:clamp(70px,8vw,120px)}
.bandeau{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(240px,22vw,320px);gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px max(var(--g),calc((100vw - var(--max))/2 + var(--g))) 14px;scroll-padding-inline:max(var(--g),calc((100vw - var(--max))/2 + var(--g)));scrollbar-width:none}
.bandeau::-webkit-scrollbar{display:none}
.bd-c{margin:0;display:grid;gap:12px;scroll-snap-align:start;outline:none}
.bd-c img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r2);clip-path:inset(0 round var(--r2));transition:clip-path .7s cubic-bezier(.3,1.2,.4,1),transform 1s var(--e)}
.bd-c figcaption{display:grid;gap:2px}
.bd-c figcaption b{width:fit-content;font-family:var(--d);font-weight:600;font-size:19px;letter-spacing:-.015em;padding-bottom:.1em;background:linear-gradient(var(--cible3),var(--cible3)) no-repeat .2em calc(100% - .05em)/0% .26em;transition:background-size .6s var(--e)}
.bd-c figcaption span{font-size:14.5px;color:var(--mu)}
.bd-c:is(:hover,:focus-visible) img{clip-path:inset(8px round 34px 34px 34px 90px)}
.bd-c:is(:hover,:focus-visible) figcaption b{background-size:100% .26em}
.bd-c:focus-visible img{outline:3px solid var(--fil);outline-offset:3px}
.resultats .dots{margin-top:6px}

/* formules : le prix d'abord, puis une jauge au fil qui compare les volumes */
.fo{padding:30px 28px 26px;gap:16px;transition:box-shadow .45s var(--e),transform .7s cubic-bezier(.34,1.4,.5,1),background .4s}
@media (hover:hover){.fo:hover{transform:translateY(-6px)}}
.fo h3{font-size:clamp(32px,2.8vw,42px)}
.fo-p b{font-size:clamp(48px,4.4vw,70px);letter-spacing:-.045em;font-variant-numeric:tabular-nums}
.fo-p b small{font-size:.5em;letter-spacing:0;vertical-align:.55em;margin-left:.05em}
.fo-g{height:26px;margin:-2px 0 -6px}
.fo-g svg{display:block;width:100%;height:100%;overflow:visible}
.fo-g path{fill:none;stroke-width:7;stroke-linecap:round}
.fo-g .fond{stroke:rgba(26,26,26,.08)}
.fo-g .val{stroke:var(--fil);stroke-dasharray:1 2;stroke-dashoffset:1;transition:stroke-dashoffset 1.2s cubic-bezier(.6,0,.2,1) calc(var(--i,0)*.12s)}
.fo.vu .fo-g .val{stroke-dashoffset:calc(1 - var(--v,0))}
@media (hover:hover){.fo:hover .fo-g .val{stroke-dashoffset:calc(1 - var(--v,0) - .04)}}
.fo-u b{font-size:16px}
/* comparateur : les barres deviennent des fils, les cartes changent d'état ensemble */
.cf{transition:box-shadow .45s,transform .6s cubic-bezier(.34,1.4,.5,1),background .45s}
.cf.adapt{background:var(--cible2);box-shadow:inset 0 0 0 2px var(--cible)}
.cf .couv .tr{height:12px;border-radius:999px;background:rgba(26,26,26,.07)}
.cf .couv .tr i{border-radius:999px;background:var(--fil)}
.cf.adapt .couv .tr i{background:var(--cible)}
@media (prefers-reduced-motion:no-preference){.cmpf-g.anime .cf{animation:cf-in .6s var(--e) both;animation-delay:calc(var(--i,0)*.07s)}}
@keyframes cf-in{from{opacity:0;transform:translateY(14px)}}

/* la frise du relais : jalons reliés par le fil */
.jalons{position:relative}
.jl-f{position:absolute;left:0;top:0;pointer-events:none;overflow:visible}
.jl-f path{fill:none;stroke:var(--fil);stroke-width:var(--ep,16px);stroke-linecap:round;stroke-linejoin:round}
.jalon{position:relative;border-top:0;padding:16px 0;grid-template-columns:104px minmax(0,1fr)}
.jalon>span{position:relative;z-index:1;justify-self:start;align-self:start;min-width:58px;padding:5px 12px;border-radius:999px;background:var(--encre);box-shadow:inset 0 0 0 1.5px var(--nln);font-family:var(--f);font-style:normal;font-size:13px;font-weight:650;color:var(--ntx);text-align:center;transition:background .45s,color .45s,box-shadow .45s,transform .6s cubic-bezier(.34,1.6,.5,1)}
.jalon.on>span{background:var(--fil);box-shadow:none;transform:scale(1.06)}
.jalon b,.jalon p{transition:opacity .5s,transform .6s var(--e)}
.js .jalon:not(.on) b,.js .jalon:not(.on) p{opacity:.38}
@media (max-width:560px){.jalon{grid-template-columns:1fr;padding-left:0}.jalon>span{margin-bottom:6px}}

/* votre trimestre : un outil de planification éditorial */
.mo{gap:8px;padding:26px 24px 22px;box-shadow:inset 0 0 0 1px transparent;transition:box-shadow .45s,transform .6s cubic-bezier(.34,1.4,.5,1)}
.mo.plein{box-shadow:inset 0 0 0 1.5px var(--encre)}
.mo h3{font-size:clamp(46px,4.8vw,70px)}
.mo-u b{font-size:28px}
.mo-g{height:24px;margin:-4px 0 6px}
.mo-g svg{display:block;width:100%;height:100%;overflow:visible}
.mo-g path{fill:none;stroke-width:7;stroke-linecap:round}
.mo-g .fond{stroke:rgba(26,26,26,.08)}
.mo-g .val{stroke:var(--fil);stroke-dasharray:1 2;stroke-dashoffset:calc(1 - var(--v,0));transition:stroke-dashoffset .9s cubic-bezier(.34,1.3,.5,1),stroke .4s}
.mo-g .val.hors{stroke:var(--encre)}
.ev3{border-radius:12px;margin:0 -10px;padding:11px 10px;border-top:0;transition:background .35s}
.ev3:has(input:checked){background:var(--cible2)}
@media (hover:hover){.ev3:hover{background:rgba(26,26,26,.04)}.ev3:has(input:checked):hover{background:var(--cible2)}}
.ev3 .k{width:22px;height:22px}
.ev3 input:checked+.k{animation:pop .5s cubic-bezier(.34,1.8,.5,1)}
@keyframes pop{50%{transform:scale(1.35)}}

/* estimer : des réponses qui se posent, une progression au fil */
.est-p::before,.est-p::after{top:calc(16px - var(--ep,16px)/2 + 1px);height:var(--ep,16px);border-radius:999px}
.est-p::before{background:rgba(26,26,26,.07)}
.est-p button::before{width:34px;height:34px;font-size:14px;transition:background .45s,color .45s,box-shadow .45s,transform .6s cubic-bezier(.34,1.6,.5,1)}
.est-p button[aria-current=step]::before{background:var(--blanc);color:var(--encre);box-shadow:inset 0 0 0 6px var(--fil);transform:scale(1.15)}
.dg-p{gap:8px}
.dg-p i{height:8px;border-radius:999px;background:rgba(26,26,26,.08)}
.dg-p i::after{background:var(--fil);border-radius:999px}
.dg-q h2{font-size:clamp(36px,5vw,64px);letter-spacing:-.035em}
.choix.gros span{position:relative;min-height:78px;padding:16px 56px 16px 20px;font-size:17px;font-weight:550;border-radius:18px;transition:background .35s,box-shadow .35s,color .35s,transform .5s cubic-bezier(.34,1.5,.5,1)}
.choix.gros span::after{content:"";position:absolute;right:18px;top:50%;width:24px;height:24px;margin-top:-12px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--ln2);transition:background .35s,box-shadow .35s,transform .5s cubic-bezier(.34,1.8,.5,1)}
.choix.gros input:checked+span{background:var(--encre);color:var(--ntx);box-shadow:none}
.choix.gros input:checked+span small{color:var(--nmu)}
.choix.gros input:checked+span::after{background:var(--fil) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A1A1A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8'/%3E%3C/svg%3E") center/16px no-repeat;box-shadow:none;transform:scale(1.15)}
@media (hover:hover){.choix.gros label:hover span{transform:translateY(-3px);box-shadow:inset 0 0 0 1.5px var(--encre)}.choix.gros label:hover input:checked+span{box-shadow:none}}
.choix input:checked+span{background:var(--cible2);box-shadow:inset 0 0 0 1.5px var(--cible)}
@media (prefers-reduced-motion:no-preference){
  .js .reco2 .carte>*,.js .prop .carte>*{opacity:0;transform:translateY(14px);animation:monte .7s var(--e) both}
  .reco2 .carte>*:nth-child(2),.prop .carte>*:nth-child(2){animation-delay:.06s}
  .reco2 .carte>*:nth-child(3),.prop .carte>*:nth-child(3){animation-delay:.12s}
  .reco2 .carte>*:nth-child(n+4),.prop .carte>*:nth-child(n+4){animation-delay:.18s}
  .js .reco2 .bloc{opacity:0;transform:translateY(14px);animation:monte .8s var(--e) .15s both}
}
.reco2 .carte .px{font-family:var(--d);font-weight:650;font-size:clamp(28px,2.6vw,38px);letter-spacing:-.03em}

/* formulaire progressif : des étapes lisibles, des champs généreux */
.pf-p span::before{height:8px;border-radius:999px}
.pf-e legend{font-size:clamp(30px,3.6vw,46px);letter-spacing:-.03em}
.pf .in{font-size:16.5px;border-radius:16px}
.pf-r{border-radius:var(--r)}
.pf-g{display:grid;gap:40px;align-items:start}
@media (min-width:1000px){.pf-g{grid-template-columns:minmax(0,1fr) 340px;gap:72px}.pf-a{position:sticky;top:96px}}
.pf-a{display:grid;gap:16px;padding:22px;border-radius:var(--r);background:var(--blanc)}
.pf-a img{width:86px;height:86px;border-radius:50%;object-fit:cover;filter:grayscale(1)}
.pf-a p{font-size:15.5px;color:var(--mu)}
.pf-a p b{color:var(--encre)}
.pf-a .rass{box-shadow:none!important;padding:0;gap:8px;font-size:14px}
.tr-fil{position:fixed;inset:0;z-index:58;width:100%;height:100%;pointer-events:none}
.tr-fil path{fill:none;stroke:var(--fil);stroke-linecap:round;stroke-linejoin:round}
@media (max-width:979px){.hv-m figcaption{top:14px;bottom:auto;right:14px}}
@media (prefers-reduced-motion:no-preference){
  .hero-v .hv-c.vient{animation:carte-v .8s cubic-bezier(.34,1.4,.5,1) both}
  .hero-v .hv-c.sort{z-index:1;opacity:0;transform:translate(40px,-16px) rotate(8deg) scale(.9);transition:opacity .35s ease,transform .45s var(--e)}
}
@keyframes carte-v{from{opacity:0;transform:translate(-36px,46px) rotate(-14deg) scale(.88)}to{opacity:1;transform:rotate(-4deg)}}
.pf input.in{min-height:56px;font-size:16.5px}

/* ==========================================================================
   V6 · IDENTITÉ LAVANDE ET CORAIL
   Compositions ton sur ton : chaque rubrique a un fond, ses motifs sont la même
   couleur, plus claire ou plus foncée. Le monogramme « ll » sert de motif éditorial.
   ========================================================================== */
body{background:var(--sable)}
html{background:var(--sable)}

/* le logotype : « fi » à l'encre, « ll » d'un seul fil, lavande puis corail */
.lg svg{height:30px;overflow:visible}
.lg .lg-fi{fill:currentColor}
.lg .lg-l1{stroke:var(--lav)}
.lg .lg-l2{stroke:var(--cor)}
.lg.mono .lg-ll path{stroke:currentColor}
.hd.ton:not(.sombre) .lg .lg-l1{stroke:var(--lav-f)}.hd.ton:not(.sombre) .lg .lg-l2{stroke:var(--cor-f)}
@media (prefers-reduced-motion:no-preference){
  .js .lg.anim .lg-ll path{stroke-dasharray:1 2;stroke-dashoffset:1}
  .js .lg.anim .lg-l1{animation:logo-l .6s cubic-bezier(.55,0,.6,1) .2s forwards}
  .js .lg.anim .lg-l2{animation:logo-l .8s cubic-bezier(.2,0,.15,1) .74s forwards}
  .lg:is(:hover,:focus-visible) .lg-l2{animation:logo-re 1s var(--io)}
}
.ft .lg svg{height:clamp(54px,5.6vw,80px)}

/* le motif : le monogramme, en grand, une nuance au-dessus ou au-dessous du fond */
.motif{position:absolute;z-index:0;pointer-events:none;aspect-ratio:610/720;background:var(--motif,var(--cible3));-webkit-mask:url(ll.svg) center/contain no-repeat;mask:url(ll.svg) center/contain no-repeat}
.sec>.w,.hero>.w,.feuille>.w{position:relative;z-index:1}

/* ---------- l'ouverture : fond clair de la cible, monogramme en filigrane ---------- */
.hero{background:var(--cible2);transition:background-color .6s var(--e);overflow:hidden;padding-bottom:clamp(64px,7vw,110px)}
.hero-m{right:-2vw;top:11%;height:84%;opacity:.42;--motif:var(--cible3);transform:rotate(-6deg)}
@media (max-width:979px){.hero-m{right:-30vw;top:auto;bottom:-10%;height:80%}}
.hero-t{margin-bottom:12px}
.hero-t .mf{font-family:var(--d);font-style:normal;font-weight:650;letter-spacing:-.03em}
.hero-s{max-width:29em}
.hero .tg{background:rgba(255,255,255,.72)}
.hero-v{position:relative;width:100%;max-width:640px;aspect-ratio:1/1.04;justify-self:end;--px:0;--py:0}
@media (max-width:979px){.hero-v{max-width:520px;justify-self:center;aspect-ratio:1/1.06}}
.hv{position:absolute;margin:0;transition:transform .9s var(--e),opacity .5s,filter .5s}
.hv img{display:block;width:100%;height:auto;aspect-ratio:var(--ar);object-fit:cover;border-radius:18px;box-shadow:0 40px 70px -40px rgba(26,26,26,.55);background:var(--gris)}
.hv figcaption{position:absolute;left:10px;bottom:10px;display:flex;align-items:center;gap:8px;padding:6px 6px 6px 12px;border-radius:999px;background:var(--blanc);font-size:12.5px;line-height:1;box-shadow:0 10px 24px -14px rgba(26,26,26,.5)}
.hv figcaption b{font-weight:650}
.hv figcaption span{padding:4px 8px;border-radius:999px;background:var(--cible2);color:var(--cible-t);font-weight:600;font-size:11.5px}
.hv-1{left:17%;top:0;width:52%;z-index:1;transform:translate(calc(var(--px)*-10px),calc(var(--py)*-8px))}
.hv-2{left:0;bottom:6%;width:33%;z-index:2;transform:translate(calc(var(--px)*16px),calc(var(--py)*12px)) rotate(-3deg)}
.hv-3{right:0;bottom:0;width:37%;z-index:3;transform:translate(calc(var(--px)*24px),calc(var(--py)*18px)) rotate(2.5deg)}
.hv-2[data-pour=e]{width:27%;bottom:4%}
.hv-1 figcaption{left:auto;right:10px;top:10px;bottom:auto}
@media (hover:hover){
  .hero-v:hover .hv{filter:saturate(.85);opacity:.9}
  .hero-v .hv:hover{filter:none;opacity:1;z-index:4}
  .hero-v .hv-1:hover{transform:translate(calc(var(--px)*-10px),calc(var(--py)*-8px - 8px)) scale(1.02)}
  .hero-v .hv-2:hover{transform:translate(calc(var(--px)*16px),calc(var(--py)*12px - 10px)) rotate(0deg) scale(1.04)}
  .hero-v .hv-3:hover{transform:translate(calc(var(--px)*24px),calc(var(--py)*18px - 10px)) rotate(0deg) scale(1.04)}
}
@media (prefers-reduced-motion:no-preference){
  .js .hero .hv:not([hidden]){animation:hv-in 1.1s var(--e) both}
  .js .hero .hv-1{animation-delay:.35s!important}.js .hero .hv-2{animation-delay:.5s!important}.js .hero .hv-3{animation-delay:.65s!important}
  .hero .hv.vient{animation:hv-in .8s var(--e) both!important}
  .hero .hv.vient.hv-2{animation-delay:.08s!important}.hero .hv.vient.hv-3{animation-delay:.16s!important}
  .hero .hv.sort{animation:hv-out .4s var(--io) both!important;z-index:0}
}
@keyframes hv-in{from{opacity:0;translate:0 40px;scale:.94}}
@keyframes hv-out{to{opacity:0;translate:0 -24px;scale:.96}}

/* ---------- les passages : le fond de départ, puis celui de la rubrique suivante ---------- */
.passage{background:var(--de,var(--cible2));transition:background-color .6s var(--e)}
.passage-s.plein{background:var(--vers,var(--cible))}
.passage path{stroke:var(--trait)}
.passage.p2{height:130vh;height:130svh}
.p2 .passage-t{color:var(--encre)}.p2 .passage-t .lead{color:var(--mu)}
html:not(.js) .passage-s,.passage.fixe .passage-s{background:var(--vers,var(--cible))}
.passage-t{--filet:color-mix(in srgb,var(--cible3) 70%,transparent)}
.p2 .passage-t{--filet:var(--cible2)}

/* ---------- les réalisations : fond foncé de la cible, monogramme plus clair ---------- */
.ton-f{background:var(--cible);color:#fff;--mu:rgba(255,255,255,.9);--fa:rgba(255,255,255,.8);--ln:rgba(255,255,255,.2);--filet:color-mix(in srgb,var(--cible3) 70%,transparent);margin-top:-1px;overflow:hidden;transition:background-color .6s var(--e)}
#realisations{padding:clamp(20px,3vw,40px) 0 calc(var(--fr) + clamp(70px,8vw,120px))}
.re-m{left:-14vw;bottom:-12%;height:80%;opacity:.22;--motif:var(--cible3);transform:rotate(8deg)}
.gal{display:block;columns:4 250px;column-gap:18px}
.gal-c{position:relative;display:grid;gap:12px;margin:0 0 26px;break-inside:avoid;outline:none;background:none;border-radius:0;clip-path:none!important;overflow:visible}
.gal-c::before{display:none}
.gal-i{position:relative;border-radius:var(--r2);overflow:hidden;background:rgba(255,255,255,.08);clip-path:inset(0 round var(--r2));transition:clip-path .7s cubic-bezier(.3,1.2,.4,1)}
.gal-i img{display:block;width:100%;height:auto;aspect-ratio:var(--ar);object-fit:cover;transition:transform 1.1s var(--e)}
.gal-c figcaption{position:static;display:grid;gap:5px;color:inherit;transform:none!important}
.gal-c figcaption .t{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.gal-c figcaption b{font-family:var(--d);font-weight:600;font-size:18px;letter-spacing:-.015em;line-height:1.15}
.gal-c figcaption .dsc{display:block;opacity:1;font-size:14px;line-height:1.45;color:var(--mu)}
.gal-c .u{flex:none;padding:4px 9px;border-radius:999px;background:rgba(255,255,255,.14);color:#fff;font-size:12px;font-weight:600;-webkit-backdrop-filter:none;backdrop-filter:none;transition:background .35s,color .35s}
.gal-c .gf{position:absolute;inset:0;z-index:2;width:100%;height:100%;pointer-events:none}
.gal-c .gf path{stroke:var(--cible3);stroke-width:3.5}
.gal-c:is(:hover,:focus-visible) .gal-i{clip-path:inset(6px round 26px 26px 26px 60px)}
.gal-c:is(:hover,:focus-visible) .gal-i img{transform:scale(1.07) translate(-1.5%,-1.5%)}
.gal-c:is(:hover,:focus-visible) .gf path{stroke-dashoffset:0}
.gal-c:is(:hover,:focus-visible) .u{background:var(--cible3);color:var(--encre)}
.gal-c:focus-visible{outline:3px solid #fff;outline-offset:4px;border-radius:var(--r2)}
.gal-c:is(:hover,:focus-visible) img{filter:none}
@media (max-width:899px){
  .gal{display:grid;columns:auto;grid-auto-flow:column;grid-auto-columns:min(72vw,300px);align-items:start;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--g);margin-inline:calc(-1*var(--g));padding:4px var(--g) 8px;scrollbar-width:none}
  .gal-c{scroll-snap-align:start;aspect-ratio:auto;margin:0}
}
.gal.clair .gal-i{background:var(--gris)}
/* galeries sur fond clair (pages intérieures) */
.feuille:not(.ton-f):not(.dk) .gal-c .u{background:var(--cible2);color:var(--cible-t)}
.feuille:not(.ton-f):not(.dk) .gal-c:is(:hover,:focus-visible) .u{background:var(--cible);color:#fff}

/* ---------- les rubriques : alternance claire, colorée, contrastée ---------- */
.feuille.lav-c{background:var(--cible2);--sec-bg:var(--cible2);transition:background-color .6s var(--e)}
.feuille.sable,.feuille.papier2{background:var(--sable);--sec-bg:var(--sable)}
.feuille.encre,.feuille.dk,.feuille.nuit{background:var(--encre);--sec-bg:var(--encre)}
.feuille.aubergine{background:var(--cible);--sec-bg:var(--cible);color:#fff}
.dk{--filet:color-mix(in srgb,var(--cible3) 55%,transparent)}
.feuille{box-shadow:0 -24px 48px -36px rgba(26,26,26,.32)}
.sec.rouge,.feuille.rouge{background:var(--cible3);color:var(--encre);--mu:rgba(26,26,26,.75);--filet:var(--cible2);transition:background-color .6s var(--e)}
#commencer{position:relative;overflow:hidden;padding-top:clamp(20px,3vw,40px)}
.go-m{right:-8vw;top:-20%;height:120%;opacity:.16;--motif:var(--cible);transform:rotate(-10deg)}

/* étapes : les nœuds sur le fond de la rubrique */
.et4-b::before{background:var(--sec-bg,var(--sable));box-shadow:inset 0 0 0 3px rgba(26,26,26,.24)}
.et4-b.fait::before{background:var(--cible);box-shadow:inset 0 0 0 3px var(--cible),0 0 0 5px var(--sec-bg,var(--sable))}
.et4-b[aria-selected=true]::before{background:var(--blanc);box-shadow:inset 0 0 0 7px var(--cible),0 0 0 5px var(--sec-bg,var(--sable))}
.et4::after{background:var(--cible)}
.et4::before{background:rgba(26,26,26,.08)}
.et4-b .info em::before{background:var(--cible);transform:translateY(-3px);height:4px;border-radius:0}
.et4-t{position:absolute;left:8px;right:12%;bottom:4px;height:3px;background:var(--cible3);transform:scaleX(0);transform-origin:0 50%;pointer-events:none}
.et4-b[aria-selected=false] .et4-t{opacity:0}
.mm-v .piece-w{transition:transform .8s var(--e)}
.lav-c .canaux button{background:rgba(255,255,255,.7)}
.lav-c .perso input{background:rgba(255,255,255,.8)}
.piece mark{background:var(--cible2)}

/* ---------- les formules : cartes sable, une réglette d'unités au lieu d'une jauge ---------- */
.fo::after{display:none}
.fo:is(:hover,:focus-within){box-shadow:inset 0 0 0 1.5px var(--cible);background:var(--cible2)}
.feuille.blanc .fo{background:var(--sable)}
.feuille.blanc .fo:is(:hover,:focus-within){background:var(--cible2)}
.fo-g{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:2px;height:16px;margin:2px 0 -4px;align-items:end}
.fo-g i{display:block;height:9px;border-radius:1.5px;background:rgba(26,26,26,.08);transition:height .45s var(--e),background .5s}
.fo-g i.u{background:rgba(26,26,26,.16)}
.fo.vu .fo-g i.u{background:var(--cible);transition-delay:calc(var(--j)*14ms)}
@media (hover:hover){.fo:hover .fo-g i.u{height:16px;transition:height .5s var(--sp) calc(var(--j)*10ms),background .5s}}
.p3 svg{color:var(--cible)}
.fo-plus i{transition:transform .5s var(--sp),background .3s,color .3s}
.fo.ouvert .fo-plus i{background:var(--cible);color:#fff}

/* ---------- ce que couvre l'abonnement ---------- */
#perimetre{overflow:hidden}
.pe-m{right:-10vw;bottom:-30%;height:110%;opacity:.07;--motif:var(--cible3);transform:rotate(12deg)}
.peri{display:grid;gap:14px}
@media (min-width:980px){.peri{grid-template-columns:minmax(0,1.15fr) minmax(0,1.15fr) minmax(0,.9fr)}}
.pr{position:relative;display:grid;align-content:start;gap:14px;padding:clamp(24px,2.6vw,34px);border-radius:var(--r);color:var(--ntx)}
.pr h3{font-family:var(--d);font-weight:600;font-size:clamp(26px,2.4vw,34px);letter-spacing:-.025em;line-height:1.02}
.pr-k{font-size:13px;font-weight:650;letter-spacing:.08em;text-transform:uppercase;color:var(--cible3)}
.pr ul{display:grid;gap:9px;font-size:16px}
.pr li{position:relative;padding-left:22px}
.pr li::before{content:"";position:absolute;left:0;top:.62em;width:12px;height:4px;background:var(--cible3)}
.pr-in{background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px var(--nln)}
.pr-dv{box-shadow:inset 0 0 0 1.5px rgba(248,245,242,.3);background:repeating-linear-gradient(-45deg,transparent 0 14px,rgba(255,255,255,.025) 14px 15px)}
.pr-dv li::before{background:transparent;box-shadow:inset 0 0 0 1.5px var(--nmu);height:6px;top:.55em}
.pr-n{font-size:14.5px;color:var(--nmu);padding-top:12px;border-top:1px solid var(--nln)}
.pr-rl{background:var(--cible3);color:var(--encre);transition:background .45s,transform .6s var(--sp)}
.pr-rl .pr-k{color:var(--cible-t)}
.pr-rl p{font-size:15.5px;color:rgba(26,26,26,.78)}
.pr-px{margin-top:auto;font-size:14px}.pr-px b{font-family:var(--d);font-weight:650;font-size:30px;letter-spacing:-.03em;margin-right:4px;color:var(--encre)}
.pr-rl .go{position:absolute;right:24px;top:24px}
.pr-rl .go .i{width:24px;height:24px;stroke-width:1.6;transition:transform .6s cubic-bezier(.34,1.6,.5,1)}
@media (hover:hover){.pr-rl:hover{background:var(--cible2)}.pr-rl:hover .go .i{transform:translateX(6px)}}
.pr-rl>h3{width:fit-content;padding:0 .12em;margin-left:-.12em;background:linear-gradient(var(--cible),var(--cible)) no-repeat .2em calc(100% - .04em)/0% .2em;transition:background-size .6s var(--e)}
.pr-rl:is(:hover,:focus-visible)>h3{background-size:100% .2em}
.peri-l{display:flex;flex-wrap:wrap;gap:12px 32px;margin-top:28px}
.dk .lien{color:var(--ntx)}

/* ---------- appel final ---------- */
.fin{display:grid;gap:14px;margin-top:0}
@media (min-width:900px){.fin{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr)}.fin .ca.pr{order:0}}
.rouge .ca:not(.pr){background:rgba(255,255,255,.62)}
@media (hover:hover){.rouge .ca:not(.pr):hover{background:#fff}}
.ca.pr{background:var(--encre);color:var(--ntx)}
.fin-b{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 40px;margin-top:22px;padding:22px 0;border-top:1px solid rgba(26,26,26,.16);border-bottom:1px solid rgba(26,26,26,.16)}
.fin-b .rass{display:flex;flex-wrap:wrap;gap:10px 28px;padding:0;box-shadow:none!important;font-size:14.5px}
.fin-l{font-size:15px;color:var(--mu)}
.fin-l .lien{color:var(--encre);margin-left:6px}
.qui-ph{background:rgba(255,255,255,.4)}

/* ---------- boutons, liens, sélecteur, en-tête ---------- */
.bt{background:var(--encre);color:var(--ntx)}
.bt.cl{box-shadow:inset 0 0 0 1.5px var(--encre)}
.hd-prog i{background:var(--cible3)}
.hd.sombre .hd-prog i{background:var(--cible3)}
.nav a::after{background:var(--cible3)!important;height:4px!important;border-radius:0!important;transform:scaleX(0)!important;bottom:4px!important}
.nav a[aria-current]::after,.nav a:is(:hover,:focus-visible)::after{transform:none!important}
.hd.ton .nav a::after{background:var(--cible)!important}
.lien::after{transform:none;height:2px;border-radius:0}
.lien:is(:hover,:focus-visible)::after{background:var(--cible3);height:4px;transform:translateY(1px)}
.tg .ind{background:var(--cible);box-shadow:0 8px 18px -10px var(--cible)}
.mn{background:var(--cible)}
.mn .bt{background:var(--sable);color:var(--encre)}
.mn nav a[aria-current]{color:var(--cible2)}
.ft{background:var(--encre)}
.ft ul a::after{background:var(--cible3);height:3px}
.ft-a p{color:var(--nmu)}
.tr-fil path{stroke:var(--cible3)}
.toast{background:var(--encre)}
.rdv-f{background:rgba(26,26,26,.55)}

/* ---------- pages intérieures : ouverture teintée, monogramme en filigrane ---------- */
.ph{background:var(--cible2);overflow:hidden;transition:background-color .6s var(--e)}
.ph::after{content:"";position:absolute;z-index:0;right:-5vw;top:-10%;height:120%;aspect-ratio:610/720;background:var(--cible3);opacity:.45;-webkit-mask:url(ll.svg) center/contain no-repeat;mask:url(ll.svg) center/contain no-repeat;transform:rotate(-8deg);pointer-events:none}
.ph>.w{position:relative;z-index:1}
.ph.pme{background:var(--cible2)}
.ph .hv-c{box-shadow:0 0 0 6px var(--cible2),0 34px 60px -30px rgba(26,26,26,.6)!important}
.ph-ph{background:var(--gris)}

/* cartes et blocs génériques */
.pt,.qa,.cout,.tab,.cmp{background:var(--blanc)}
.feuille.blanc :is(.pt,.qa){background:var(--sable)}
.feuille.lav-c :is(.pt,.qa,.cout){background:rgba(255,255,255,.75)}
.etapes[data-fil] .et.passe::before{background:var(--cible);color:#fff;box-shadow:inset 0 0 0 2.5px var(--cible)}
.fil-s path,.jl-f path{stroke:var(--cible3)}
.jalon.on>span{background:var(--cible);color:#fff}
.est-p::after,.est-p button.fait::before{background:var(--cible)}
.est-p button.fait::before{color:#fff;box-shadow:inset 0 0 0 2px var(--cible)}
.est-p button[aria-current=step]::before{box-shadow:inset 0 0 0 6px var(--cible)}
.dg-p i::after{background:var(--cible)}
.pf-p span.fait::before,.pf-p span.on::before{background:var(--cible)}
.choix.gros input:checked+span{background:var(--cible);color:#fff}
.choix.gros input:checked+span::after{background-color:var(--cible3)}
.choix input:checked+span{background:var(--cible2);box-shadow:inset 0 0 0 1.5px var(--cible)}
.in:focus{box-shadow:inset 0 0 0 2px var(--cible)}
.perso input:focus{box-shadow:inset 0 0 0 2px var(--cible)}
.cf .couv .tr i{background:var(--cible3)}
.cf.adapt{background:var(--cible2);box-shadow:inset 0 0 0 2px var(--cible)}
.cf.adapt .couv .tr i{background:var(--cible)}
.mo-g path{stroke-width:8;stroke-linecap:butt}
.mo-g .val{stroke:var(--cible)}
.mo-g .val.hors{stroke:var(--encre)}
.mo.plein{box-shadow:inset 0 0 0 1.5px var(--cible)}
.ev3:has(input:checked){background:var(--cible2)}
.canaux button[aria-pressed=true] i{background:var(--cible3)}
.dest .ec::after{background-color:var(--cible3)}
.epreuve .ok-b.fait{background:var(--cible);color:#fff}
.curseur{background:var(--cible)}
.sous-pas i.on{background:var(--cible)}
.pf-ctx{background:var(--cible2)}
.gu i.u{background:var(--cible)}
.p404 h1 .it{color:var(--cible)!important}
.gu i.x,.recap .gu i.x{background:transparent;box-shadow:inset 0 0 0 2px var(--cible3)}
.pa-m{right:4vw;top:12%;height:62%;--motif:var(--cible3);opacity:calc(var(--zt,0)*.22);transform:rotate(-8deg) translateY(calc((1 - var(--zt,0))*40px))}
.passage.fixe .pa-m,html:not(.js) .pa-m{opacity:.2}
.gal.clair .gal-c{background:none}
.gal.clair .u{background:var(--cible2);color:var(--cible-t)}
.gal.clair .gal-c:is(:hover,:focus-visible) .u{background:var(--cible);color:#fff}
.gal.clair .dsc{color:var(--mu)}

/* ==========================================================================
   V7 · retours mobiles et petits détails d'usage
   ========================================================================== */
/* calendrier : la largeur reste celle de l'écran, seul le tableau défile */
.cal-b{grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){.cal-b{grid-template-columns:minmax(0,1fr) auto}}
.cal-s,.cal-wrap{min-width:0;max-width:100%}
@media (max-width:600px){.cal-t{font-size:13px}.cal-t th,.cal-t td{padding:8px 7px}.cal-b{padding:20px 16px}}

/* menu mobile : une feuille claire de la cible, l'encre dessus */
.mn{background:var(--cible3);color:var(--encre)}
.mn nav a{color:rgba(26,26,26,.74);transition:transform .7s var(--e),opacity .4s,color .25s}
.mn nav a[aria-current]{color:var(--encre)}
.mn nav a:is(:hover,:active,:focus-visible){color:var(--encre);transform:translateX(6px)!important}
.mn nav a:active{color:var(--cible)!important}
.mn .bt{background:var(--encre);color:var(--ntx)}
.hd.menu-ouvert{--hd-bg:var(--cible3);--hd-tx:var(--encre);color:var(--encre)!important;box-shadow:none}
.hd.menu-ouvert .lg{color:var(--encre)!important}
.hd.menu-ouvert .lg .lg-l1{stroke:var(--lav-f)}.hd.menu-ouvert .lg .lg-l2{stroke:var(--cor-f)}
.hd.menu-ouvert .ic{background:rgba(255,255,255,.4);color:var(--encre);box-shadow:inset 0 0 0 1.5px var(--encre)}

/* barre d'avancement : toujours visible, sous l'en-tête quand il est là, en haut de l'écran sinon */
.hd-prog{position:fixed;z-index:52;left:0;right:0;top:calc(env(safe-area-inset-top,0px) + 64px);bottom:auto;height:3px;pointer-events:none;transition:top .5s var(--e)}
html.hd-cache .hd-prog{top:env(safe-area-inset-top,0px)}
@media (min-width:980px){html.hd-cache .hd-prog{top:calc(env(safe-area-inset-top,0px) + 64px)}}
.mn.ouvert~.hd-prog,html.rdv-ouvert .hd-prog{opacity:0}

/* retour en haut (mobile) */
.haut{position:fixed;z-index:44;right:max(14px,env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--encre);color:var(--ntx);box-shadow:0 12px 26px -12px rgba(26,26,26,.6);opacity:0;transform:translateY(20px) scale(.8);pointer-events:none;transition:opacity .35s,transform .5s var(--sp),bottom .4s var(--e)}
.haut .i{width:20px;height:20px;transform:rotate(-90deg)}
.haut.on{opacity:1;transform:none;pointer-events:auto}
.haut:active{transform:scale(.9);background:var(--cible)}
.haut.haut-recap{bottom:calc(92px + env(safe-area-inset-bottom,0px))}
@media (min-width:980px){.haut{display:none}}

/* retours tactiles : un appui se voit, sans effet appuyé */
.lien:active,.ft ul a:active,.ariane a:active,.retour a.rt:active{color:var(--cible-t)}
.dk .lien:active,.ft ul a:active{color:var(--cible3)}
:is(.ca,.porte,.sit,.pr-rl,.fo,.pt,.gal-c):active{transform:scale(.985)}
:is(.ca,.porte,.sit,.pr-rl){transition:transform .35s var(--sp),background-color .35s}
.bt:active{transform:scale(.96)}
.choix label:active span{transform:scale(.98)}
.qa summary:active{color:var(--cible-t)}

/* plus d'encadré noir au survol : la carte s'éclaire, la flèche avance */
.porte:is(:hover,:focus-visible),.ca:is(:hover,:focus-visible),.ca.pr:is(:hover,:focus-visible),.sit:is(:hover,:focus-visible),.sit.relais:is(:hover,:focus-visible),.pt:hover,.dk .pt:hover,.fo:is(:hover,:focus-within){box-shadow:none}
:is(.sit,.porte,.ca,.entree)>b,:is(.sit,.porte,.ca,.entree)>div>b,.pr-rl>h3{background:none!important}
@media (hover:hover){
  .rouge .ca:not(.pr):hover{background:#fff}
  .ca.pr:hover{background:#2a2a2a}
  .pt:hover{background:var(--cible2)}
  .sit.relais:hover{background:var(--cible2)}
}
:is(.ca,.porte,.sit,.pr-rl):focus-visible{outline:2px solid var(--encre);outline-offset:3px}
.sit .go{top:clamp(22px,2.6vw,32px);right:clamp(22px,2.6vw,32px)}
.sit.relais .tag{line-height:1.25}

/* appels finaux : compacts sur mobile, une ligne par action */
@media (max-width:899px){
  .fin{gap:8px}
  .ca,.ca.pr{min-height:0;padding:16px 58px 16px 18px;gap:3px;align-content:center}
  .ca b,.ca.pr b{font-size:20px}
  .ca>span:not(.go){font-size:13.5px}
  .ca .go{top:50%!important;right:18px!important;margin-top:-12px}
  .ca .go .i{width:22px;height:22px}
  .fin-b{flex-direction:column;align-items:flex-start;gap:14px;padding:18px 0}
  .fin-b .rass{flex-direction:column;gap:6px;font-size:13.5px}
  .qui{gap:14px}.qui-ph{width:84px}.qui p{font-size:15px}
}

/* mentions sous les formules : une seule ligne discrète */
.fos-fin{gap:12px 24px}
.fos-note{display:block;margin:0;font-size:12.5px;line-height:1.5;color:var(--fa);max-width:46em}
.fos-note span:not(:last-child)::after{content:" · "}
.fos-note b{font-weight:600;color:var(--mu)}

/* l'interrupteur de cible : deux libellés, une glissière, un curseur qui saute */
.tg.sw{display:inline-flex;align-items:center;gap:2px;padding:5px 8px;border-radius:999px;background:rgba(255,255,255,.75);box-shadow:inset 0 0 0 1px var(--ln),0 12px 30px -22px rgba(26,26,26,.5)}
.tg.sw button{order:0;padding:9px 8px;gap:7px;color:var(--fa);font-weight:600;font-size:15px;transition:color .35s}
.tg.sw button[data-v=e]{order:2}
.tg.sw button[aria-pressed=true]{color:var(--encre)}
.tg.sw button .i{transform:none!important;transition:color .35s}
.tg.sw button[aria-pressed=true] .i{color:var(--cible)}
.tg.sw .ind{order:1;position:relative;inset:auto;flex:none;width:56px;height:32px;margin:0 4px;border-radius:999px;background:var(--cible);box-shadow:inset 0 1px 3px rgba(0,0,0,.28);transform:none!important;cursor:pointer;transition:background-color .6s var(--e)}
.tg.sw .ind::after{content:"";position:absolute;top:3px;left:3px;width:26px;height:26px;border-radius:50%;background:#fff;box-shadow:0 3px 8px rgba(0,0,0,.28);transition:translate .55s cubic-bezier(.34,1.56,.64,1)}
html[data-cible=e] .tg.sw .ind::after{translate:24px 0}
@media (prefers-reduced-motion:no-preference){.tg.sw.bouge .ind::after{animation:curseur .55s cubic-bezier(.3,0,.2,1)}}
@keyframes curseur{35%{scale:1.32 .82}70%{scale:.94 1.06}}
.tg.sw .ind:active::after{scale:1.15 .9}
.dk .tg.sw{background:rgba(255,255,255,.1)}.dk .tg.sw button{color:var(--nmu)}.dk .tg.sw button[aria-pressed=true]{color:#fff}
@media (max-width:420px){.tg.sw button{font-size:14px;padding:8px 5px}.tg.sw button .i{display:none}.tg.sw .ind{width:50px;height:30px}.tg.sw .ind::after{width:24px;height:24px}html[data-cible=e] .tg.sw .ind::after{translate:20px 0}}

/* galerie : un seul effet au survol, le fil qui passe ; le cadre ne bouge plus */
.gal-c:is(:hover,:focus-visible) .gal-i{clip-path:inset(0 round var(--r2))}
.gal-c:is(:hover,:focus-visible) .gal-i img{transform:none}
@media (max-width:899px){
  .gal-i{aspect-ratio:1/1;display:grid;place-items:center;padding:12px;background:rgba(255,255,255,.1)}
  .gal-i img{width:100%;height:100%;aspect-ratio:auto;object-fit:contain}
  .gal.clair .gal-i{background:rgba(26,26,26,.05)}
}

/* ouverture sur mobile : le titre, les visuels, puis la description */
@media (max-width:979px){
  .hero{padding-top:calc(64px + 28px)}
  .hero-g{display:flex;flex-direction:column;align-items:stretch;gap:20px}
  .hero-a{display:contents}
  .hero-t{order:1;margin:0}
  .hero-v{order:2;width:100%;max-width:520px;aspect-ratio:1/.7;justify-self:auto;align-self:center}
  .hero-s{order:3}.hero .cible{order:4}.hero-act{order:5}
  .hv-1{left:31%;top:0;width:38%}
  .hv-2{left:0;bottom:2%;top:auto;width:35%}
  .hv-3{right:0;bottom:0;width:35%}
  .hv-2[data-pour=e]{width:24%;left:4%}
  .hv img{border-radius:14px}
}
.hv{container-type:inline-size}
.hv figcaption{max-width:calc(100% - 16px);white-space:nowrap;overflow:hidden}
@container (max-width:170px){.hv figcaption span{display:none}.hv figcaption{padding:5px 10px;font-size:11.5px;left:8px;bottom:8px}.hv-1 figcaption{top:8px;right:8px;left:auto;bottom:auto}}

/* la démonstration : sur mobile, les étapes en haut, leur texte, puis l'exemple */
.et4-d{display:none}
.sec-t .perso{display:grid;gap:8px;align-self:end;width:min(100%,380px);justify-self:start}
.sec-t .perso label{font-size:14px;font-weight:550;color:var(--mu)}
.perso-c{position:relative;display:block}
.perso-c input{width:100%;height:52px;padding:0 48px 0 20px;border:0;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--ln2),0 12px 30px -24px rgba(26,26,26,.5);font-size:16px;transition:box-shadow .3s}
.perso-c input:focus{outline:0;box-shadow:inset 0 0 0 2px var(--cible)}
.perso-c .i{position:absolute;right:18px;top:50%;margin-top:-9px;width:18px;height:18px;color:var(--cible);transition:transform .5s var(--sp)}
.perso-c input:focus+.i{transform:translateX(4px)}
@media (max-width:999px){
  #fonctionnement .mm{gap:14px}
  .et4{grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;padding-left:0}
  .et4::before,.et4::after{top:10px;left:12.5%;bottom:auto;width:auto;height:6px}
  .et4::before{right:12.5%}
  .et4::after{right:auto;height:6px;width:calc(75% * var(--p));transition:width .7s var(--io)}
  .et4-b{justify-items:center;text-align:center;padding:36px 0 6px;gap:1px}
  .et4-b::before{left:50%;top:-1px;margin-left:-14px}
  .et4-b .n2{font-size:10px;letter-spacing:.06em}
  .et4-b b{font-size:15px;line-height:1.15}
  .et4-b .info{display:none}
  .et4-t{left:20%;right:20%;bottom:0}
  .et4-d{display:block;padding:14px 16px;border-radius:16px;background:rgba(255,255,255,.62);font-size:15px;line-height:1.45;min-height:96px}
  .et4-d p{color:var(--mu)}
  .et4-d em{display:inline-flex;align-items:baseline;gap:8px;margin-top:6px;font-style:normal;font-size:13.5px;font-weight:600}
  .et4-d em::before{content:"";width:16px;height:4px;background:var(--cible);transform:translateY(-3px)}
  .et4-d.vient{animation:monte .45s var(--e) both}
  .et4-fin{display:none}
  .piece-w{width:min(76vw,320px)}
  .mm-v{gap:10px}
}
@media (min-width:1000px){.sec-t .perso{margin-top:6px}}

/* comparateur : filtres en pastilles de la cible, sur mobile seule la formule adaptée */
.presets button{transition:background .3s,box-shadow .3s,color .3s,transform .3s var(--sp)}
.presets button[aria-pressed=true]{background:var(--cible);color:#fff;box-shadow:none}
.presets button:active{transform:scale(.95)}
.cf.adapt{box-shadow:none;background:var(--cible2)}
@media (max-width:899px){.cmpf-g .cf:not(.adapt){display:none}.cmpf-g{gap:0}}

/* relais : sur mobile, le fil longe la marge, les jalons s'écartent du texte */
@media (max-width:560px){
  .jalons{padding-left:28px}
  .jl-f path{stroke-width:6px}
  .jalon>span{margin-left:-28px;position:relative;z-index:1}
}
.hd.menu-ouvert{background:var(--cible3)!important}
.hd.menu-ouvert .hd-prog{opacity:0}
.haut{box-shadow:0 12px 26px -12px rgba(26,26,26,.6),inset 0 0 0 1.5px rgba(248,245,242,.28)}

/* ==========================================================================
   V8 · écran d'ouverture, cartes de la galerie, ajustements
   ========================================================================== */
/* l'écran d'ouverture : une feuille de la cible qui se lève sur la page */
html.intro,html.intro body{background:var(--cible2);overflow:hidden}
html.intro body>*:not(.intro-e){visibility:hidden}
.intro-e{position:fixed;inset:0;z-index:300;display:grid;place-items:center;align-content:center;gap:clamp(18px,3vh,30px);padding:24px;background:var(--cible2);overflow:hidden;cursor:pointer;transition:transform .8s cubic-bezier(.76,0,.24,1),border-radius .8s cubic-bezier(.76,0,.24,1)}
.intro-e.sort{transform:translateY(-104%);border-radius:0 0 46% 46% / 0 0 140px 140px}
.intro-m{position:absolute;left:50%;top:50%;height:150vh;aspect-ratio:610/720;background:var(--cible3);opacity:0;-webkit-mask:url(ll.svg) center/contain no-repeat;mask:url(ll.svg) center/contain no-repeat;transform:translate(-50%,-50%) rotate(-22deg) scale(.62);transition:transform 2.6s cubic-bezier(.16,1,.3,1),opacity 1s ease}
.intro-e.go .intro-m{opacity:.5;transform:translate(-46%,-50%) rotate(-6deg) scale(1)}
.intro-l{position:relative;width:min(58vw,400px)}
.intro-l svg{display:block;width:100%;height:auto;overflow:visible}
.intro-l .lg-fi{fill:var(--encre);opacity:0;transform:translateY(40px);transition:opacity .5s ease .05s,transform .8s cubic-bezier(.34,1.4,.5,1) .05s}
.intro-l .lg-ll path{stroke-dasharray:1 2;stroke-dashoffset:1}
.intro-l .lg-l1{stroke:var(--lav)}.intro-l .lg-l2{stroke:var(--cor)}
.intro-e.go .intro-l .lg-fi{opacity:1;transform:none}
.intro-e.go .intro-l .lg-l1{animation:logo-l .45s cubic-bezier(.55,0,.6,1) .3s forwards}
.intro-e.go .intro-l .lg-l2{animation:logo-l .65s cubic-bezier(.2,0,.15,1) .68s forwards}
.intro-t{position:relative;font-family:var(--d);font-weight:600;font-size:clamp(17px,1.6vw,21px);letter-spacing:-.015em;color:var(--encre);opacity:0;transform:translateY(12px);transition:opacity .5s ease .85s,transform .7s var(--e) .85s}
.intro-t i{font-family:var(--sf);font-weight:300}
.intro-e.go .intro-t{opacity:1;transform:none}
.intro-e.sort .intro-l,.intro-e.sort .intro-t{opacity:0;transform:translateY(-30px);transition:opacity .4s,transform .7s var(--io)}
/* la page n'a plus d'animation d'entrée propre : l'ouverture s'en charge */
.js .hero-t .l>span{transform:none!important;animation:none!important}
.js .hero-a>*:not(h1){opacity:1!important;transform:none!important;animation:none!important}
.js .hero .hv:not([hidden]){animation:none}
html.intro-fin .hero .hv{animation:hv-in 1s var(--e) .25s both!important}
html.intro-fin .hero .hv-2{animation-delay:.35s!important}html.intro-fin .hero .hv-3{animation-delay:.45s!important}

/* galerie : des cartes blanches à la manière des cartes Pantone de studioes.fr */
.gal{display:grid;columns:auto;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
@media (max-width:1100px) and (min-width:900px){.gal{grid-template-columns:repeat(3,minmax(0,1fr))}}
.gal-c{display:flex;flex-direction:column;gap:0;margin:0;padding:10px;border-radius:22px;background:#fff!important;color:var(--encre);box-shadow:0 24px 50px -36px rgba(26,26,26,.55);transition:transform .45s var(--sp),box-shadow .45s}
.gal-i,.gal.clair .gal-i{aspect-ratio:4/5;padding:0;border-radius:15px;background:var(--cible2);clip-path:none!important}
.gal-i img,.gal.clair .gal-i img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover}
.gal-i.pay{display:grid;place-items:center;padding:12px}
.gal-i.pay img{height:auto;max-height:100%;object-fit:contain;border-radius:8px;box-shadow:0 14px 30px -18px rgba(26,26,26,.45)}
.gal-c figcaption{padding:12px 6px 4px;gap:4px}
.gal-c figcaption b{font-size:17px;color:var(--encre)}
.gal-c figcaption .dsc,.ton-f .gal-c figcaption .dsc{color:rgba(26,26,26,.66);font-size:13.5px}
.gal-c .u,.ton-f .gal-c .u,.gal.clair .u{background:var(--cible2);color:var(--cible-t)}
.gal-c:is(:hover,:focus-visible) .u,.gal.clair .gal-c:is(:hover,:focus-visible) .u{background:var(--cible);color:#fff}
@media (hover:hover){.gal-c:hover{transform:translateY(-4px);box-shadow:0 30px 60px -36px rgba(26,26,26,.6)}}
.gal-c:focus-visible{outline:3px solid var(--encre);outline-offset:3px}
@media (max-width:899px){
  .gal{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:min(70vw,280px);align-items:stretch;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--g);margin-inline:calc(-1*var(--g));padding:6px var(--g) 18px;scrollbar-width:none}
  .gal-i,.gal.clair .gal-i{aspect-ratio:4/5;display:block;padding:0;background:var(--cible2)}
  .gal-i.pay{display:grid;padding:10px}
  .gal-i img{object-fit:cover;width:100%;height:100%}
  .gal-i.pay img{object-fit:contain;height:auto}
}
.ton-f .dots{color:#fff}

/* démonstration sur mobile : l'encadré suit la longueur du texte */
@media (max-width:999px){.et4-d{min-height:0}}

/* relais : trois repères de dates à la place des pistes */
.dates-r{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 0;padding:0;list-style:none}
.dates-r li{display:grid;gap:1px;padding:10px 14px;border-radius:14px;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px var(--nln);min-width:0}
.dates-r span{font-size:12.5px;color:var(--nmu)}
.dates-r b{font-family:var(--d);font-weight:600;font-size:18px;letter-spacing:-.015em}

/* ==========================================================================
   V9 · composition, typographie, motifs, formules, menu
   ========================================================================== */
/* typographie : titres plus serrés, italique un peu plus nourrie, placement régulier */
.sec-t{margin-bottom:clamp(32px,4.2vw,60px);gap:18px 64px}
.sec-t h2,.passage-t h2{font-weight:620;letter-spacing:-.034em;line-height:.98}
.sec-t h2 .it,.passage-t h2 .it,.ph h1 .it,.hero-t .l2{font-weight:340;letter-spacing:-.016em}
.sec-t .lead{align-self:end;padding-bottom:.35em;font-size:clamp(16px,1.25vw,18px)}
.ph h1{letter-spacing:-.036em;line-height:.96}
.lead{text-wrap:pretty}

/* les filets : une bande nette, épaisse, posée sous la ligne de base et un peu décalée */
.trait::after,.surligne::after{left:.1em;right:-.18em;bottom:-.17em;height:.15em;border-radius:0}
.trait.v2::after{left:-.05em;right:.16em;bottom:-.2em;height:.12em}
.trait.v3::after{left:.26em;right:-.28em;bottom:-.14em;height:.17em;opacity:1}
.trait{padding-bottom:.06em}

/* ---------- ouverture : un éventail de trois supports ---------- */
.hero-v{aspect-ratio:1/1.02;max-width:660px}
.hv{width:auto}
.hv img{aspect-ratio:4/5;border-radius:16px}
.hv-1{left:28%;top:3%;width:44%;z-index:3;transform:translate(calc(var(--px)*-8px),calc(var(--py)*-6px))}
.hv-2{left:0;top:16%;bottom:auto;width:37%;z-index:1;transform:translate(calc(var(--px)*14px),calc(var(--py)*10px)) rotate(-7deg)}
.hv-3{right:0;left:auto;top:21%;bottom:auto;width:37%;z-index:2;transform:translate(calc(var(--px)*20px),calc(var(--py)*14px)) rotate(6deg)}
.hv-2[data-pour=e]{width:37%;left:0;bottom:auto}
.hv-1 figcaption{left:10px;right:auto;top:auto;bottom:10px}
@media (hover:hover){
  .hero-v:hover .hv{filter:none;opacity:1}
  .hero-v .hv-1:hover{transform:translate(calc(var(--px)*-8px),calc(var(--py)*-6px - 10px)) scale(1.02)}
  .hero-v:has(.hv-2:hover) .hv-2{z-index:4;transform:translate(-14px,-8px) rotate(-3deg) scale(1.05)}
  .hero-v:has(.hv-3:hover) .hv-3{z-index:4;transform:translate(14px,-8px) rotate(2deg) scale(1.05)}
  .hero-v:has(.hv-2:hover) .hv-1,.hero-v:has(.hv-3:hover) .hv-1{transform:scale(.97)}
}
@media (max-width:979px){
  .hero{padding-top:calc(64px + 22px);padding-bottom:40px}
  .hero-g{gap:16px}
  .hero-t{font-size:clamp(40px,11vw,64px)}
  .hero-v{aspect-ratio:1/.52;max-width:440px;margin:4px auto 2px}
  .hv-1{left:31%;top:0;width:38%}
  .hv-2,.hv-2[data-pour=e]{left:3%;top:14%;width:31%}
  .hv-3{right:3%;top:16%;width:31%}
  .hv img{border-radius:11px}
  .hero-s{font-size:16.5px}
  .hero .cible{gap:8px 12px}
  .hero .cible-l{display:none}
  .hero-act{gap:10px 18px}
  .hero-act .bt{width:100%;justify-content:space-between}
}
@container (max-width:200px){.hv figcaption{padding:4px 9px;font-size:11px;left:7px;bottom:7px}.hv figcaption span{display:none}}

/* ---------- galerie : composition éditoriale sur ordinateur, carrousel sur mobile ---------- */
.gal-c{position:relative}
.gal-i{position:relative;aspect-ratio:4/5;overflow:hidden}
.gal-i picture{display:contents}
.gal-i img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.gal-c .ex{position:absolute;right:10px;top:10px;padding:4px 9px;border-radius:999px;background:rgba(255,255,255,.92);color:var(--encre);font-size:11.5px;font-weight:600}
@media (min-width:900px){
  .gal{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-flow:dense;align-items:stretch}
  .gal-c.g-big{grid-column:span 2;grid-row:span 2}
  .gal-c.g-big .gal-i{aspect-ratio:auto;flex:1;min-height:0}
  .gal-c.g-big .gal-i img{object-position:50% 0}
  .gal-c.g-big figcaption b{font-size:22px}
  .gal-c.g-wide{grid-column:span 2}
  .gal-c.g-wide .gal-i{aspect-ratio:auto;flex:1}
}
@media (max-width:1100px) and (min-width:900px){.gal{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:899px){.gal-c .gal-i,.gal.clair .gal-i{aspect-ratio:4/5}}
/* la distribution : les cartes partent d'une pile et prennent leur place */
.gal.distribue .gal-c{transition:none}

/* ---------- motifs : un même signe, des cadrages différents selon la rubrique ---------- */
.re-m{left:auto;right:-9vw;top:-6%;bottom:auto;height:58%;opacity:.16;transform:rotate(96deg)}
.pe-m{right:auto;left:-14vw;bottom:-46%;height:150%;opacity:.07;transform:rotate(-14deg) scaleX(-1)}
.go-m{right:-4vw;top:auto;bottom:-38%;height:96%;opacity:.2;transform:rotate(-90deg)}
.ph::after{display:none}
body[data-rub=collectivites] .ph::after,body[data-rub=entreprises] .ph::after,body[data-rub=formules] .ph::after,body[data-rub=fonctionnement] .ph::after,body[data-rub=relais] .ph::after{display:block}
body[data-rub=collectivites] .ph::after{right:-6vw;top:-14%;height:118%;transform:rotate(-8deg);opacity:.42}
body[data-rub=entreprises] .ph::after{right:auto;left:42%;top:auto;bottom:-46%;height:120%;transform:rotate(14deg) scaleX(-1);opacity:.5}
body[data-rub=formules] .ph::after{right:-18vw;top:-40%;height:190%;transform:rotate(-2deg);opacity:.22}
body[data-rub=fonctionnement] .ph::after{right:-2vw;top:auto;bottom:-60%;height:110%;transform:rotate(90deg);opacity:.35}
body[data-rub=relais] .ph::after{right:auto;left:-10vw;top:-20%;height:90%;transform:rotate(-20deg);opacity:.3}

/* ---------- formules : trois différences claires, pas de réglette ---------- */
.fo-g{display:none}
.fo-at{display:grid;gap:9px;padding:14px 0 4px;border-top:1px solid var(--ln);font-size:15px}
.fo-at li{display:flex;gap:10px;align-items:flex-start;line-height:1.35}
.fo-at li .i{margin-top:.18em;color:var(--cible);flex:none}
.fo-at b{font-weight:650}
@media (hover:hover){.fo:hover .fo-at li{transform:translateX(3px);transition:transform .45s var(--sp) calc(var(--k)*50ms)}}
.fo-at li{transition:transform .45s var(--e)}
.fo-p b{transition:transform .5s var(--sp)}
@media (hover:hover){.fo:hover .fo-p b{transform:translateY(-3px)}}
/* engagement : deux options lisibles d'un coup d'œil */
.eng{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-width:640px}
.eng-o{display:grid;gap:3px;padding:12px 16px;border-radius:14px;background:var(--sable);font-size:13px;line-height:1.4;color:var(--mu)}
.feuille.blanc .eng-o{background:var(--sable)}
.eng-o b{font-family:var(--d);font-weight:650;font-size:19px;letter-spacing:-.02em;color:var(--encre)}
.eng-o.on{background:var(--cible2);color:rgba(26,26,26,.78)}
.eng-n{grid-column:1/-1;font-size:12.5px;color:var(--fa)}
@media (max-width:560px){.eng{grid-template-columns:1fr 1fr}.eng-o{padding:10px 12px;font-size:12px}}

/* ---------- en-tête : un seul contour au focus, le menu aussi sur ordinateur ---------- */
.hd .bt:focus-visible{outline:2px solid var(--encre);outline-offset:3px;background:var(--cible);color:#fff;box-shadow:none}
@media (min-width:980px){
  .menu{display:grid}
  .hd-d{gap:12px}
  .mn{display:flex;padding:calc(env(safe-area-inset-top,0px) + 120px) max(var(--g),calc((100vw - var(--max))/2 + var(--g))) 48px;flex-direction:row;align-items:flex-end;justify-content:space-between;clip-path:circle(0 at calc(100% - 60px) 32px)}
  .mn.ouvert{clip-path:circle(150% at calc(100% - 60px) 32px)}
  .mn nav{grid-template-columns:repeat(2,minmax(0,auto));gap:4px 72px}
  .mn nav a{font-size:clamp(40px,4.4vw,64px)}
  .mn .mn-b{justify-items:end}
  .hd.menu-ouvert .nav{opacity:0;pointer-events:none}
}
.voile-c{position:fixed;inset:0;z-index:40;pointer-events:none;mix-blend-mode:multiply}
@media (min-width:980px){
  .hero-g{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .hero-v{aspect-ratio:1/.9;max-width:700px;align-self:center}
  .hv-1{left:25%;top:0;width:50%}
  .hv-2,.hv-2[data-pour=e]{left:0;top:17%;width:41%}
  .hv-3{right:0;top:22%;width:41%}
}

/* V9 : configurateur, deux engagements lisibles */
.eng-t{margin:14px 0 6px;font-size:12.5px;color:var(--nmu)}
.eng2{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 4px}
.eng2 p{margin:0;padding:11px 12px;border-radius:14px;border:1px solid rgba(255,255,255,.16);display:grid;gap:2px;line-height:1.25}
.eng2 b{font-size:13px;font-weight:600}
.eng2 span{font-size:17px;font-weight:700;font-variant-numeric:tabular-nums}
.eng2 small{font-size:12px;opacity:.75}
.eng2 p.on{background:var(--cible2);color:var(--encre);border-color:transparent}
.prop .eng2 p{border-color:var(--gris,#E2DBD3)}
html:not(.est-compose) body:has(#est) .recap-mob{display:none}
.recap .lig .eng2,.prop .eng2{display:grid;grid-template-columns:1fr 1fr;gap:8px;border:0;padding:0}
.recap .lig .eng2 p{display:grid}

/* V9 : Votre trimestre, hiérarchie éditoriale */
.mo-i{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--fa);font-weight:600}
.mo-u{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.mo-u em{font-style:normal;margin-left:auto;font-size:13px;color:var(--fa)}
.mo-st{font-size:13.5px;font-weight:600;color:var(--cible-t);margin:-4px 0 8px}
.mo-st.x{color:var(--encre)}
.mo:not(.plein) .mo-st{color:var(--fa);font-weight:500}
.cal-b{grid-template-columns:minmax(0,1fr)!important}
.cal-b .bts{justify-content:flex-start}
.cal-r{display:grid;gap:10px;margin:10px 0 4px}
@media (min-width:700px){.cal-r{grid-template-columns:1fr 1fr}}
.cal-r>div{display:grid;gap:3px;padding:18px 20px;border-radius:18px;background:var(--sable,#F8F5F2)}
.cal-r>div:first-child{background:var(--cible3);color:var(--encre)}
.cal-r>div.x{background:var(--encre);color:#fff}
.cal-r>div.x .cap{color:rgba(255,255,255,.7)}
.cal-r b{font-family:var(--d);font-size:clamp(26px,2.6vw,34px);letter-spacing:-.025em;line-height:1.05}
.cal-r span{font-size:16px;font-weight:600}
.cal-r small{font-size:13px;opacity:.75}
.cal-d{margin-top:10px}
.cal-d summary{cursor:pointer;font-weight:600;font-size:14.5px;padding:8px 0;list-style:none;display:inline-flex;gap:8px;align-items:center}
.cal-d summary::-webkit-details-marker{display:none}
.cal-d summary::after{content:"+";font-size:18px;line-height:1;transition:transform .3s}
.cal-d[open] summary::after{transform:rotate(45deg)}

/* V9 : Relais, frise alignée et fine sur ordinateur */
@media (min-width:561px){
  .jalon{grid-template-columns:128px minmax(0,1fr)}
  .jalon>span{justify-self:center;white-space:nowrap;text-align:center}
  .jl-f path{stroke-width:5px}
}

/* V9 : contact harmonisé avec la demande */
@media (min-width:900px){.ct-g{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:end}}
.fin-v{grid-template-columns:1fr!important;gap:10px}
.fin-v .ca{min-height:0;padding:20px 22px}
.fin-v .ca b{font-size:clamp(20px,1.8vw,24px)}

/* V9 : accessibilité, filet de sécurité pour les mouvements réduits */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
.faits{color:var(--mu)}
@media (min-width:1px){.nav a{opacity:.82}}
.pr-rl .pr-k{color:var(--encre)}
.fin-l{color:var(--encre)}
.tag{color:var(--encre)!important}

/* V10 : page 404 dans l'identité */
.p404{position:relative;overflow:hidden;display:block;min-height:auto;text-align:left;padding:clamp(130px,16vw,190px) 0 clamp(60px,8vw,110px)}
.p404 .w{position:relative;z-index:1}
.p4-n{font-family:var(--d);font-weight:700;font-size:clamp(120px,22vw,300px);line-height:.8;letter-spacing:-.06em;color:var(--cible2);margin-bottom:.12em}
.p404 h1{font-size:clamp(40px,6vw,84px)}
.p404 h1 .it{display:block;font-size:inherit;margin-top:0;color:inherit!important}
.p404 .lead{margin:18px 0 34px;max-width:32em}
.p4-l{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))!important}
.p4-m{position:absolute;right:-6%;top:8%;width:min(52vw,620px);aspect-ratio:1;background:var(--cible2);opacity:.35;-webkit-mask:url(ll.svg) center/contain no-repeat;mask:url(ll.svg) center/contain no-repeat;transform:rotate(-12deg);pointer-events:none}
.p404 .p4-n{color:color-mix(in srgb,var(--cible) 17%,var(--cible3))}
.p404 .p4-m{--motif:color-mix(in srgb,var(--cible) 16%,var(--cible3));opacity:1;aspect-ratio:610/720}

.rdv-c.lent{pointer-events:auto;align-content:center;gap:14px;text-align:center;color:var(--encre);background:var(--blanc)}
@media (max-width:699px){.rdv{padding:0}.rdv-b{width:100%;height:100%;border-radius:0}.rdv-p{flex-direction:column;gap:4px;padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px))}}

/* V10 : réponses du diagnostic modifiables une à une */
.reps{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:18px}
.reps .cap{width:100%;margin-bottom:2px}
.rep{display:grid;gap:1px;text-align:left;padding:9px 14px;border-radius:14px;background:var(--blanc);box-shadow:inset 0 0 0 1px var(--ln);font-size:14px;font-weight:600;color:var(--encre);max-width:100%;transition:box-shadow .25s}
.rep small{font-size:12px;font-weight:500;color:var(--fa)}
.rep:is(:hover,:focus-visible){box-shadow:inset 0 0 0 1.5px var(--encre)}

/* V10 : engagement lisible et détaché des formules */
.eng{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1fr) minmax(0,1fr);gap:12px;max-width:none;margin-top:clamp(34px,5vw,60px);padding-top:clamp(22px,3vw,30px);border-top:1px solid var(--ln);align-items:stretch}
.eng-h{font-family:var(--d);font-weight:650;font-size:clamp(22px,2.2vw,30px);letter-spacing:-.025em;line-height:1.05;color:var(--encre)}
.eng-o{display:grid;align-content:start;gap:4px;padding:18px 20px;border-radius:18px;font-size:14px;line-height:1.4}
.eng-o b{font-size:clamp(22px,2vw,26px)}
.eng-o span{font-weight:600;color:var(--encre);font-size:15px}
.eng-o em{font-style:normal;font-size:13.5px;color:var(--mu)}
.eng-o.on em{color:rgba(26,26,26,.75)}
.eng-n{grid-column:2/-1;font-size:13px}
@media (max-width:760px){.eng{grid-template-columns:1fr;gap:10px}.eng-h br{display:none}.eng-n{grid-column:1}.eng-o{padding:16px 18px}}
/* Relais présenté comme les formules, dans sa propre section */
.rl-g{display:grid;gap:clamp(20px,4vw,56px);align-items:center}
@media (min-width:900px){.rl-g{grid-template-columns:minmax(0,380px) minmax(0,1fr)}}
.fo-rl{background:var(--blanc);color:var(--encre)}
.rl-t .lead{color:var(--ntx);max-width:30em}
.rl-l{display:grid;gap:0;margin-top:22px;max-width:520px}
.rl-l li{display:flex;justify-content:space-between;gap:14px;padding:12px 0;border-top:1px solid var(--nln);font-size:15px}
.rl-l b{font-weight:600}.rl-l span{color:var(--nmu);text-align:right}
.fo-rl{--mu:rgba(26,26,26,.72);--fa:rgba(26,26,26,.66);--ln:rgba(26,26,26,.1)}
.fo-rl .bt{background:var(--encre);color:var(--ntx)}
.fo-rl .bt:is(:hover,:focus-visible){background:var(--cible);color:#fff}
@media (max-width:560px){.rl-l li{flex-direction:column;gap:2px}.rl-l span{text-align:left}}

/* V10 : trimestre, un résultat lisible en cinq repères */
.cal-r4{display:grid;gap:8px;margin:12px 0 6px}
@media (min-width:700px){.cal-r4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.cal-r4{grid-template-columns:repeat(5,minmax(0,1fr))}}
.cal-r4>div{display:grid;gap:6px;align-content:start;padding:16px 18px;border-radius:18px;background:var(--sable)}
.cal-r4 dt{font-size:12.5px;font-weight:600;color:var(--fa)}
.cal-r4 dd{display:grid;gap:2px;margin:0}
.cal-r4 b{font-family:var(--d);font-weight:650;font-size:clamp(20px,1.8vw,25px);letter-spacing:-.02em;line-height:1.1;font-variant-numeric:tabular-nums}
.cal-r4 span{font-size:13px;color:var(--mu);line-height:1.35}
.cal-r4 .fc{background:var(--cible3)}
.cal-r4 .x{background:var(--encre);color:#fff}.cal-r4 .x dt,.cal-r4 .x span{color:rgba(255,255,255,.75)}
.cal-r4 .tt{background:var(--cible2)}
.cal-r4 .tt span,.cal-r4 .fc span{color:rgba(26,26,26,.75)}

.ajout{display:grid!important;grid-template-columns:minmax(0,1fr) auto;gap:8px;margin-top:10px;padding-top:14px;border-top:1px dashed var(--ln2)}
.ajout .aj-h{grid-column:1/-1;font-size:13px;font-weight:600}
.ajout input{grid-column:1/-1}
.ajout .bt{min-height:44px}

@media (min-width:900px){.gal.g6{grid-template-columns:repeat(3,minmax(0,1fr))!important}}
.gal.g6 .gal-i{aspect-ratio:4/5!important;height:auto!important}
.gal.g6 .gal-i img{object-position:center top}
.gal.g6{grid-auto-rows:auto!important;grid-template-rows:none!important}.gal.g6 .gal-c{height:auto!important}.gal.g6 .gal-i{flex:none!important}
.rl-l span{color:#fff}

.rdv-z{width:100%;height:100%;overflow:auto;-webkit-overflow-scrolling:touch;background:var(--creme)}
.rdv-z iframe{width:100%!important;min-height:100%}
.rdv-z{background:#fff}
.eng .eng-o.on{background:var(--cible2)!important}
.fos-fin .eng{border-top:0;padding-top:0;margin-top:0}