@font-face{font-family:"NLM";src:local("Grandview"),url(/assets/fonts/barlow-normal-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"NLM";src:local("Grandview"),url(/assets/fonts/barlow-normal-500.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"NLM";src:local("Grandview Bold"),url(/assets/fonts/barlow-normal-600.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"NLM";src:local("Grandview Bold"),url(/assets/fonts/barlow-normal-700.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"NLM";src:local("Grandview Italic"),url(/assets/fonts/barlow-italic-400.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"NLM";src:local("Grandview Italic"),url(/assets/fonts/barlow-italic-500.woff2) format("woff2");font-weight:500;font-style:italic;font-display:swap}
@font-face{font-family:"NLM";src:local("Grandview Bold Italic"),url(/assets/fonts/barlow-italic-600.woff2) format("woff2");font-weight:600;font-style:italic;font-display:swap}
@font-face{font-family:"NLM Display";src:local("Grandview Display"),url(/assets/fonts/barlow-normal-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"NLM Display";src:local("Grandview Display"),url(/assets/fonts/barlow-normal-400.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"NLM Display";src:local("Grandview Display"),url(/assets/fonts/barlow-normal-500.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"NLM Display";src:local("Grandview Display Italic"),url(/assets/fonts/barlow-italic-400.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"NLM Display";src:local("Grandview Display Italic"),url(/assets/fonts/barlow-italic-400.woff2) format("woff2");font-weight:500;font-style:italic;font-display:swap}

/* =====================================================================
   MAQUETTE 7 — « Signal »
   Trois moments de très grande typographie (ouverture, 100 €, signature
   en pied de page) ; tout le reste reste calme et mesuré.
   Signature graphique : le carré jaune (bouton, repères, puces).
   Aucune pastille, aucun bouton arrondi.
   Espacements : grille de 8 px — 8 · 16 · 24 · 32 · 48 · 64 · 96 · 128
   ===================================================================== */
:root{
  --night:#0B1830;--navy:#132A55;--cream:#F5F2EA;--stone:#EBE6DB;--white:#FFFFFF;
  --ink:#0B1830;--mut:#5A6276;--line:rgba(11,24,48,.14);
  --on:#F5F2EA;--on-mut:rgba(245,242,234,.62);--on-line:rgba(245,242,234,.16);
  --acc:#FFD43B;--acc-ink:#0B1830;
  --sans:"Instrument Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --serif:"Instrument Serif",ui-serif,Georgia,"Times New Roman",serif;
  --logo:"Barlow","Instrument Sans",ui-sans-serif,system-ui,sans-serif;
  --gut:clamp(20px,4vw,56px);
  --max:1440px;
  --sec:128px;
  --hd:80px;
  --ease:cubic-bezier(.19,1,.22,1);
  --ease2:cubic-bezier(.65,0,.35,1);
  --t-display:clamp(52px,8.4vw + 6px,132px);
  --t-h2:clamp(32px,2.4vw + 14px,50px);
  --t-h3:clamp(22px,.8vw + 14px,28px);
  --t-big:clamp(26px,2vw + 12px,42px);
  color-scheme:light;
}
:root[data-acc="corail"]{--acc:#FF6B4A}
:root[data-acc="ciel"]{--acc:#7CD3FF}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip}
::selection{background:var(--acc);color:var(--acc-ink)}
h1,h2,h3,p,dl,dd,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
h1,h2,h3{font-weight:500;text-wrap:balance}
em.s{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0;padding:0}
img{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--acc);outline-offset:4px}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
.dark{background:var(--night);color:var(--on)}
.stone{background:var(--stone)}
.sec{padding-block:var(--sec)}
.grain{position:relative;isolation:isolate}
.grain::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.07;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
svg.i{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:square}

/* repère de section : carré jaune + numéro + intitulé */
.lab{display:flex;align-items:center;gap:12px;font-size:12px;line-height:16px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.lab::before{content:"";width:8px;height:8px;background:var(--acc);flex:none}
.lab b{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.dark .lab{color:var(--on-mut)}.dark .lab b{color:var(--on)}

/* ---------- action principale : carré jaune qui s'étire ---------- */
.cta{position:relative;isolation:isolate;display:inline-flex;align-items:center;gap:18px;height:56px;padding-right:22px;font-weight:500;font-size:17px;text-decoration:none;white-space:nowrap}
.cta::before{content:"";position:absolute;inset:0 auto 0 0;width:56px;background:var(--acc);z-index:-1;transition:width .7s var(--ease)}
.cta .sq{width:56px;height:56px;display:grid;place-items:center;color:var(--acc-ink)}
.cta .sq svg{transition:transform .6s var(--ease)}
.cta .tx{transition:color .35s}
.cta:hover::before{width:100%}
.cta:hover .tx{color:var(--acc-ink)}
.cta:hover .sq svg{transform:rotate(-45deg)}
.cta.sm{height:44px;gap:14px;padding-right:16px;font-size:15px}
.cta.sm::before{width:44px}.cta.sm .sq{width:44px;height:44px}
.cta.sm:hover::before{width:100%}

/* lien secondaire : soulignement qui se dessine */
.lnk{display:inline-flex;align-items:center;gap:10px;font-weight:500;font-size:16px;text-decoration:none;padding-block:6px;background:linear-gradient(currentColor,currentColor) 100% 100%/0 1px no-repeat;transition:background-size .6s var(--ease)}
.lnk:hover{background-size:100% 1px;background-position:0 100%}
.lnk svg{transition:transform .5s var(--ease)}
.lnk:hover svg{transform:translateX(4px)}

/* texte qui roule au survol */
.roll{display:inline-block;overflow:hidden;vertical-align:top;height:1.4em;line-height:1.4em}
.roll > span{display:block;transition:transform .55s var(--ease)}
.roll > span::after{content:attr(data-t);display:block}
a:hover .roll > span,button:hover .roll > span{transform:translateY(-50%)}

/* ===== en-tête ===== */
.hd{position:fixed;inset:0 0 auto 0;top:env(safe-area-inset-top,0px);z-index:60;color:var(--ink);transition:transform .6s var(--ease),color .4s,background-color .4s}
.hd.ondark{color:var(--on)}
.hd.solid{background:color-mix(in srgb,var(--cream) 84%,transparent);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2)}
.hd.solid.ondark{background:color-mix(in srgb,var(--night) 80%,transparent)}
.hd.hide{transform:translateY(-110%)}
.hd .wrap{height:var(--hd);display:flex;align-items:center;gap:40px}
.lm{display:inline-flex;align-items:baseline;gap:.24em;white-space:nowrap;font-size:31px;line-height:1;text-decoration:none;color:inherit;flex:none}
.wm{font-family:var(--logo);font-weight:700;letter-spacing:-.022em;line-height:.78;white-space:nowrap;display:inline-block}
.wm .k1{margin-left:-.055em}
.wm .k2{margin-left:-.012em}
.wm .sp{display:inline-block;width:.2em}
.av{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em;line-height:.78}
.lm .av{font-size:1.06em}
.lm .wm,.lm .av{line-height:1}
.lo{display:flex;flex-direction:column;align-items:flex-start;font-family:var(--logo);line-height:1;text-decoration:none;flex:none}
.lo-n{font-weight:700;font-size:31px;letter-spacing:-.005em}
.lo-a{font-weight:600;font-size:19px;margin-top:5px;padding-left:1px}
.lo-t{font-weight:400;font-size:11.6px;letter-spacing:.06em;text-transform:uppercase;margin-top:4px;padding-left:1px;opacity:.85}
.logo{display:flex;align-items:baseline;text-decoration:none;font-family:var(--logo);flex:none;font-size:28px;line-height:1}
.logo-m{width:.5em;height:.5em;background:var(--acc);margin-right:.32em;align-self:center;transform:translateY(.04em);transition:transform .6s var(--ease)}
.logo:hover .logo-m{transform:translateY(.04em) rotate(90deg)}
.logo-n{font-weight:700;letter-spacing:-.012em}
.logo-a{font-weight:500;margin-left:.22em;opacity:.72;letter-spacing:-.01em}
.logo-sep{width:1px;height:28px;background:currentColor;opacity:.25}
.logo-s{display:flex;flex-direction:column;gap:2px}
.logo-s b{font-weight:600;font-size:13.6px;line-height:14px}
.logo-s span{font-weight:600;font-size:10px;line-height:12px;letter-spacing:.12em;text-transform:uppercase;opacity:.6}
.nav{display:flex;gap:28px;margin-left:auto;font-size:15px;font-weight:500}
.nav a{text-decoration:none;position:relative;padding-block:6px}
.nav a[aria-current="page"]::before{content:"";position:absolute;left:-14px;top:50%;width:6px;height:6px;margin-top:-3px;background:var(--acc)}
.hd .rdv{display:inline-flex;align-items:center;gap:10px;font-size:15px;font-weight:600;text-decoration:none;padding-block:6px}
.hd .rdv::before{content:"";width:10px;height:10px;background:var(--acc);transition:transform .5s var(--ease)}
.hd .rdv:hover::before{transform:rotate(45deg)}
.menu-b{display:none;align-items:center;gap:12px;margin-left:auto;font-size:15px;font-weight:600;height:44px}
.menu-b .bars{width:22px;height:10px;position:relative}
.menu-b .bars::before,.menu-b .bars::after{content:"";position:absolute;left:0;right:0;height:1.6px;background:currentColor;transition:transform .5s var(--ease),top .5s var(--ease)}
.menu-b .bars::before{top:0}.menu-b .bars::after{top:8px}
.menu-b[aria-expanded="true"] .bars::before{top:4px;transform:rotate(45deg)}
.menu-b[aria-expanded="true"] .bars::after{top:4px;transform:rotate(-45deg)}

/* menu plein écran (tablette, téléphone) */
.ov{position:fixed;inset:0;z-index:58;background:var(--night);color:var(--on);display:flex;flex-direction:column;justify-content:flex-end;padding:calc(var(--hd) + 24px) var(--gut) 32px;clip-path:inset(0 0 100% 0);transition:clip-path .8s var(--ease2);visibility:hidden}
.ov.open{clip-path:inset(0 0 0 0);visibility:visible}
.ov ol{display:flex;flex-direction:column;gap:4px}
.ov a.it{display:flex;align-items:baseline;gap:16px;font-size:clamp(34px,9vw,64px);line-height:1.08;font-weight:500;letter-spacing:-.035em;text-decoration:none;overflow:hidden}
.ov a.it span.n{font-size:13px;letter-spacing:.1em;color:var(--on-mut);font-variant-numeric:tabular-nums;width:24px;flex:none}
.ov a.it span.w{display:block;transform:translateY(105%);transition:transform .9s var(--ease)}
.ov.open a.it span.w{transform:none;transition-delay:calc(var(--i)*60ms + 250ms)}
.ov .foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;margin-top:48px;font-size:14px;color:var(--on-mut)}
@media (max-width:1120px){.nav,.hd .rdv{display:none}.menu-b{display:inline-flex}}
@media (min-width:1121px){.ov{display:none}}

/* ===== ouverture ===== */
.hero{min-height:max(720px,100svh);display:flex;flex-direction:column;justify-content:flex-end;padding-top:calc(var(--hd) + 48px);overflow:hidden}
.hero .por{position:absolute;right:0;top:0;width:min(46vw,680px);height:112%;z-index:-1;pointer-events:none;mix-blend-mode:screen;will-change:transform}
.hero .por img{width:100%;height:100%;object-fit:cover;object-position:50% 8%;filter:contrast(1.08) brightness(.92);-webkit-mask-image:linear-gradient(to right,transparent 0,#000 30%),linear-gradient(to top,transparent 0,#000 22%);mask-image:linear-gradient(to right,transparent 0,#000 30%),linear-gradient(to top,transparent 0,#000 22%);-webkit-mask-composite:source-in;mask-composite:intersect}
.hero > .wrap{width:100%}
.hero .top{display:flex;flex-direction:column;gap:32px;padding-bottom:56px}
.hero h1{font-size:var(--t-display);line-height:.94;letter-spacing:-.045em;font-weight:500}
.hero h1 em.s{letter-spacing:-.02em}
.ln{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.ln > span{display:block}
.js .ln > span{transform:translateY(108%);transition:transform 1.2s var(--ease)}
.js .ready .ln > span{transform:none}
.js .ready .ln:nth-child(2) > span{transition-delay:.09s}
.hero .row{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px;align-items:end}
.rot{font-size:clamp(20px,1.2vw + 12px,28px);line-height:1.35;letter-spacing:-.015em;max-width:30ch}
.rot .slot{display:block;font-size:1.1em;height:1.3em;overflow:hidden;position:relative}
.rot .slot .sl{display:block;transition:transform .9s var(--ease)}
.rot .slot .sl > span{display:block;width:max-content;height:1.3em;line-height:1.3em;white-space:nowrap;font-family:var(--serif);font-style:italic;color:var(--acc)}
.rot .rest{display:block;color:var(--on-mut)}
.hero .acts{display:flex;flex-wrap:wrap;align-items:center;gap:16px 32px;justify-content:flex-end}
.hero .bar{display:flex;flex-wrap:wrap;align-items:center;gap:12px 40px;padding-block:22px 26px;border-top:1px solid var(--on-line);font-size:14px;color:var(--on-mut)}
.hero .bar b{color:var(--on);font-weight:600}
.hero .bar .sc{margin-left:auto;display:inline-flex;align-items:center;gap:12px}
.hero .bar .sc i{display:block;width:1px;height:28px;background:var(--on-line);position:relative;overflow:hidden}
.hero .bar .sc i::after{content:"";position:absolute;left:0;top:-100%;width:1px;height:100%;background:var(--acc);animation:drop 2.2s var(--ease2) infinite}
@keyframes drop{to{top:100%}}

/* ===== bandeau défilant ===== */
.mq{padding-block:40px;overflow:hidden;border-bottom:1px solid var(--line)}
.mq-t{display:flex;width:max-content;will-change:transform}
.mq-t span{display:inline-flex;align-items:center;gap:40px;padding-right:40px;font-size:clamp(36px,4.4vw,72px);line-height:1;letter-spacing:-.035em;font-weight:500;white-space:nowrap}
.mq-t span em.s{color:var(--mut)}
.mq-t span i{width:14px;height:14px;background:var(--acc);display:block;flex:none}

/* ===== en-tête de section ===== */
.sh{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:24px 48px;align-items:start;margin-bottom:64px}
.sh h2{font-size:var(--t-h2);line-height:1.04;letter-spacing:-.035em;max-width:20ch}
.sh .side{display:flex;flex-direction:column;gap:24px;align-items:flex-start}
.sh .side p{color:var(--mut);max-width:52ch}
.dark .sh .side p{color:var(--on-mut)}

/* ===== bascule particulier / employeur (le titre est l'interrupteur) ===== */
.sh h2.who{font-size:var(--t-h2);line-height:1.1;letter-spacing:-.035em;max-width:none}
.who button{font-weight:500;letter-spacing:inherit;position:relative;color:var(--mut);transition:color .4s;text-align:left}
.who button::after{content:"";position:absolute;left:0;right:0;bottom:.04em;height:.1em;background:var(--acc);transform:scaleX(0);transform-origin:right;transition:transform .7s var(--ease)}
.who button[aria-pressed="true"]{color:var(--ink)}
.who button[aria-pressed="true"]::after{transform:scaleX(1);transform-origin:left}
.who button:hover{color:var(--ink)}
.who .or{color:var(--mut);font-family:var(--serif);font-style:italic;font-weight:400;margin-inline:.18em}
.hint{font-size:14px;color:var(--mut);display:flex;align-items:center;gap:10px}

/* ===== index des démarches ===== */
.idx{margin-inline:-20px;border-bottom:1px solid var(--line)}
.ix{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:72px minmax(0,1fr) minmax(0,.9fr) 56px;gap:24px;align-items:center;padding:30px 20px;border-top:1px solid var(--line);text-decoration:none;color:inherit;transition:color .45s}
.ix::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--night);transform:scaleY(0);transform-origin:50% 100%;transition:transform .7s var(--ease)}
.ix:hover{color:var(--on)}
.ix:hover::before{transform:scaleY(1)}
.ix .n{font-size:13px;letter-spacing:.08em;color:var(--mut);font-variant-numeric:tabular-nums;transition:color .45s}
.ix h3{font-size:clamp(24px,1.4vw + 12px,34px);line-height:1.15;letter-spacing:-.03em;font-weight:500;transition:transform .7s var(--ease)}
.ix p{font-size:15px;line-height:24px;color:var(--mut);transition:color .45s;max-width:44ch}
.ix .ar{justify-self:end;width:48px;height:48px;display:grid;place-items:center;transition:transform .7s var(--ease),color .45s,background-color .45s}
.ix .ar svg{width:22px;height:22px}
.ix:hover .n,.ix:hover p{color:var(--on-mut)}
.ix:hover h3{transform:translateX(12px)}
.ix:hover .ar{background:var(--acc);color:var(--acc-ink);transform:rotate(-45deg)}
.idx.swap .ix{animation:up .8s var(--ease) both;animation-delay:calc(var(--i)*50ms)}
@keyframes up{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}

/* ===== étapes : colonne fixe + défilement ===== */
.proc{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px}
.proc .stick{position:sticky;top:calc(var(--hd) + 40px);align-self:start;display:flex;flex-direction:column;gap:32px}
.proc h2{font-size:var(--t-h2);line-height:1.04;letter-spacing:-.035em;max-width:16ch}
.cnt{display:flex;align-items:flex-end;gap:12px;font-family:var(--serif);font-style:italic;line-height:.8}
.cnt .d{height:.82em;overflow:hidden;font-size:clamp(96px,10vw,168px);color:var(--acc)}
#cnt{transition:transform .9s var(--ease)}
#cnt > div{height:.82em;line-height:.82}
.cnt small{font-size:28px;color:var(--on-mut);padding-bottom:6px}
.steps{display:flex;flex-direction:column}
.st{display:grid;grid-template-columns:72px minmax(0,1fr);gap:8px 24px;padding-block:48px;border-top:1px solid var(--on-line);opacity:.28;transition:opacity .8s var(--ease)}
.st:last-child{border-bottom:1px solid var(--on-line)}
.st.on{opacity:1}
.st .n{font-size:13px;letter-spacing:.08em;color:var(--on-mut);padding-top:10px;font-variant-numeric:tabular-nums}
.st h3{font-size:var(--t-h3);line-height:1.2;letter-spacing:-.025em}
.st p{grid-column:2;color:var(--on-mut);max-width:46ch}

/* ===== honoraires : le chiffre ===== */
.fee{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:48px;align-items:end}
.big{display:flex;align-items:flex-start;line-height:.78;font-weight:500;letter-spacing:-.07em}
.big .v{font-size:clamp(132px,17vw,264px);font-variant-numeric:tabular-nums}
.big .u{display:flex;flex-direction:column;gap:14px;padding-top:.3em;margin-left:.12em;font-size:clamp(40px,4.4vw,72px);letter-spacing:-.04em}
.big .u small{font-size:14px;letter-spacing:.14em;font-weight:600;line-height:1;text-transform:uppercase}
.fee .cap{margin-top:24px;font-size:var(--t-h3);line-height:1.3;letter-spacing:-.02em;max-width:24ch}
.fee .cap em.s{background:linear-gradient(var(--acc),var(--acc)) 0 88%/100% .32em no-repeat}
.kv{border-top:1px solid var(--line)}
.kv > div{display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr);gap:8px 24px;padding-block:24px;border-bottom:1px solid var(--line)}
.kv dt{font-weight:600;font-size:16px}
.kv dd{font-size:15px;line-height:24px;color:var(--mut)}
.fee .right{display:flex;flex-direction:column;gap:32px;align-items:flex-start}
.fee .right h2{font-size:var(--t-h2);line-height:1.04;letter-spacing:-.035em}

/* ===== cabinet : texte qui s'allume au défilement ===== */
.say{font-size:var(--t-big);line-height:1.22;letter-spacing:-.03em;font-weight:500;max-width:30ch}
.say .w{opacity:.16;transition:opacity .25s linear}
.say .w.on{opacity:1}
.figs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px;margin-top:96px}
.figs > div{display:flex;flex-direction:column;gap:12px;padding-top:24px;border-top:1px solid var(--line)}
.figs b{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(48px,4.4vw,72px);line-height:1;letter-spacing:-.02em}
.figs p{font-size:15px;line-height:24px;color:var(--mut);max-width:34ch}

/* ===== questions ===== */
.fq{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:48px}
.fq .stick{position:sticky;top:calc(var(--hd) + 40px);align-self:start;display:flex;flex-direction:column;gap:32px;align-items:flex-start}
.fq .stick h2{font-size:var(--t-h2);line-height:1.04;letter-spacing:-.035em}
.acc{border-top:1px solid var(--line)}
.qa{border-bottom:1px solid var(--line)}
.q{width:100%;display:grid;grid-template-columns:56px minmax(0,1fr) 32px;gap:16px;align-items:start;padding-block:28px;text-align:left;font-weight:500;font-size:clamp(19px,.6vw + 14px,24px);line-height:1.3;letter-spacing:-.02em}
.q .n{font-size:13px;letter-spacing:.08em;font-weight:500;color:var(--mut);padding-top:6px;font-variant-numeric:tabular-nums}
.q .pm{position:relative;width:32px;height:32px}
.q .pm::before,.q .pm::after{content:"";position:absolute;left:8px;right:8px;top:15px;height:1.6px;background:currentColor;transition:transform .6s var(--ease)}
.q .pm::after{transform:rotate(90deg)}
.qa.open .q .pm::after{transform:rotate(0)}
.qa.open .q .pm::before{background:var(--ink)}
.a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .7s var(--ease)}
.a > div{overflow:hidden}
.a p{padding:0 48px 32px 72px;color:var(--mut);max-width:72ch}
.qa.open .a{grid-template-rows:1fr}
.fq-g{display:flex;flex-direction:column;gap:64px}
.fq-g section{scroll-margin-top:calc(var(--hd) + 24px)}
.fq-g h2{font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);margin-bottom:16px}
.fq-nav{display:flex;flex-direction:column;gap:4px}
.fq-nav a{font-size:16px;text-decoration:none;color:var(--mut);display:flex;align-items:center;gap:12px;padding-block:4px;transition:color .3s}
.fq-nav a::before{content:"";width:8px;height:8px;background:var(--acc);transform:scale(0);transition:transform .5s var(--ease)}
.fq-nav a.on,.fq-nav a:hover{color:var(--ink)}
.fq-nav a.on::before{transform:scale(1)}

/* ===== blog ===== */
.posts{border-top:1px solid var(--line)}
.po{display:grid;grid-template-columns:minmax(0,160px) minmax(0,200px) minmax(0,1fr) 40px;gap:24px;align-items:baseline;padding-block:32px;border-bottom:1px solid var(--line);text-decoration:none;color:inherit}
.po .d{font-size:14px;color:var(--mut);font-variant-numeric:tabular-nums}
.po .c{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--mut);display:flex;align-items:center;gap:10px}
.po .c::before{content:"";width:6px;height:6px;background:var(--acc)}
.po h3{font-size:clamp(20px,.8vw + 14px,28px);line-height:1.2;letter-spacing:-.025em;transition:transform .7s var(--ease)}
.po h3 small{display:block;margin-top:8px;font-size:15px;line-height:24px;letter-spacing:0;color:var(--mut);font-weight:400}
.po .ar{justify-self:end;transition:transform .7s var(--ease)}
.po:hover h3{transform:translateX(12px)}
.po:hover .ar{transform:rotate(-45deg)}
.filt{display:flex;flex-wrap:wrap;gap:8px 32px;margin-bottom:40px;font-size:16px}
.filt button{color:var(--mut);display:inline-flex;align-items:baseline;gap:6px;transition:color .3s;position:relative;padding-block:6px}
.filt button sup{font-size:11px;font-variant-numeric:tabular-nums}
.filt button::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--acc);transform:scaleX(0);transform-origin:right;transition:transform .6s var(--ease)}
.filt button[aria-pressed="true"]{color:var(--ink)}
.filt button[aria-pressed="true"]::after{transform:scaleX(1);transform-origin:left}
.posts.swap .po{animation:up .8s var(--ease) both;animation-delay:calc(var(--i)*50ms)}

/* ===== pages intérieures ===== */
.ph{padding-top:calc(var(--hd) + 96px);padding-bottom:96px}
.ph .t{display:flex;flex-direction:column;gap:32px;align-items:flex-start}
.ph h1{font-size:clamp(48px,6vw + 6px,100px);line-height:.96;letter-spacing:-.045em;max-width:14ch}
.ph .lead{font-size:clamp(18px,.4vw + 15px,21px);line-height:1.55;color:var(--mut);max-width:52ch}
.ph.dark .lead{color:var(--on-mut)}
.ph-split{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px;align-items:end}
.clip{overflow:hidden;aspect-ratio:4/5;max-height:620px;background:#111}
.clip img{width:100%;height:100%;object-fit:cover;object-position:50% 10%}
.js .clip{clip-path:inset(100% 0 0 0);transition:clip-path 1.4s var(--ease)}
.js .clip.in{clip-path:inset(0 0 0 0)}
.js .clip img{transform:scale(1.15);transition:transform 1.8s var(--ease)}
.js .clip.in img{transform:none}
.offers{border-top:1px solid var(--line)}
.of{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,3fr) minmax(0,5fr);gap:24px 48px;align-items:baseline;padding-block:40px;border-bottom:1px solid var(--line)}
.of h3{font-size:var(--t-h3);letter-spacing:-.025em;line-height:1.2}
.of .p{font-size:clamp(28px,2.4vw,40px);letter-spacing:-.04em;font-weight:500;line-height:1}
.of .p em.s{font-size:.8em;color:var(--mut)}
.of p{color:var(--mut);font-size:16px;line-height:26px}
.prose{display:flex;flex-direction:column;gap:20px}
.prose p{max-width:58ch}
.dark .prose p{color:var(--on-mut)}
.dark .prose strong{color:var(--on);font-weight:600}
.good{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px;border-top:1px solid var(--line)}
.good li{display:grid;grid-template-columns:56px minmax(0,1fr);gap:16px;padding-block:24px;border-bottom:1px solid var(--line)}
.good li span{font-size:13px;letter-spacing:.08em;color:var(--mut);padding-top:3px;font-variant-numeric:tabular-nums}
.tl{border-top:1px solid var(--on-line)}
.tl li{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:8px 48px;padding-block:32px;border-bottom:1px solid var(--on-line)}
.tl .y{font-family:var(--serif);font-style:italic;font-size:clamp(32px,2.6vw,44px);line-height:1;color:var(--acc)}
.tl h3{font-size:var(--t-h3);line-height:1.2;letter-spacing:-.025em}
.tl p{color:var(--on-mut);margin-top:8px;max-width:52ch}
.three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px}
.three > div{display:flex;flex-direction:column;gap:16px;padding-top:24px;border-top:1px solid var(--line)}
.three h3{font-size:var(--t-h3);line-height:1.2;letter-spacing:-.025em}
.three p{font-size:15px;line-height:24px;color:var(--mut)}

/* ===== pied de page ===== */
.ft{padding-block:var(--sec) 24px;overflow:hidden}
.ft .top{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px 96px;align-items:start}
.ft h2{font-size:var(--t-h2);line-height:1.04;letter-spacing:-.035em;max-width:14ch}
.ft .t{display:flex;flex-direction:column;gap:32px;align-items:flex-start}
.ft .t p{color:var(--on-mut);max-width:44ch}
.co{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;width:100%}
.co > div:last-child{grid-column:1/-1}
.co a{color:inherit;text-decoration:none;background:linear-gradient(var(--acc),var(--acc)) 0 100%/0 1px no-repeat;transition:background-size .5s var(--ease)}.co a:hover{background-size:100% 1px}
.co dd{overflow-wrap:anywhere}
.co dt{font-size:13px;color:var(--on-mut)}
.co dd{font-weight:500;user-select:all}
.form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 32px}
.form .f{position:relative;display:block;padding-top:22px}
.form .full{grid-column:1/-1}
.form input,.form textarea,.form select{width:100%;border:0;border-bottom:1px solid var(--on-line);background:transparent;color:var(--on);font:400 19px/1.4 var(--sans);padding:10px 0 12px;border-radius:0;outline:0;transition:border-color .4s}
.form textarea{min-height:220px;height:220px;resize:vertical;line-height:1.55;overflow:hidden}
.form .f-hint{grid-column:1/-1;font-size:13px;line-height:20px;color:var(--on-mut);margin-top:8px}
.form select{appearance:none;cursor:pointer}
.form select option{color:var(--ink)}
.form .f span{position:absolute;left:0;top:34px;font-size:19px;color:var(--on-mut);pointer-events:none;transform-origin:left top;transition:transform .5s var(--ease),color .3s}
.form .f.up span,.form .f:focus-within span{transform:translateY(-30px) scale(.7);color:var(--on-mut)}
.form .f::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--acc);transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease)}
.form .f:focus-within::after{transform:scaleX(1)}
.form .send{grid-column:1/-1;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;margin-top:32px}
.form .send small{font-size:13px;color:var(--on-mut)}
.ft .mid{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px 32px;margin-top:128px;padding-block:24px;border-top:1px solid var(--on-line);font-size:14px;color:var(--on-mut)}
.ft .mid nav{display:flex;flex-wrap:wrap;gap:8px 28px}
.ft .mid a{text-decoration:none;color:var(--on)}
.wm-wrap{overflow:hidden}

/* ===== transitions, apparition, curseur ===== */
.js [data-r]{opacity:0;transform:translateY(28px);transition:opacity 1s var(--ease),transform 1.2s var(--ease);transition-delay:calc(var(--i,0)*80ms)}
.js [data-r].in{opacity:1;transform:none}
.cur{position:fixed;left:0;top:0;z-index:120;width:12px;height:12px;margin:-6px 0 0 -6px;background:#fff;mix-blend-mode:difference;pointer-events:none;transition:width .4s var(--ease),height .4s var(--ease),margin .4s var(--ease),opacity .3s;opacity:0}
.cur.on{opacity:1}
.cur.big{width:56px;height:56px;margin:-28px 0 0 -28px}
.curtain{position:fixed;inset:0;z-index:110;background:var(--night);color:var(--on);display:grid;place-items:center;transform:translateY(100%);pointer-events:none}
.curtain .cl{font-size:clamp(56px,9vw,140px);line-height:1;display:flex;align-items:baseline;gap:.24em}
.curtain .cl > span{display:block;overflow:hidden;padding-block:.06em .12em}
.curtain .cl i{display:inline-block;font-style:normal}
.curtain .cl .wm i.k1{margin-left:-.055em}
.curtain .cl .wm i.k2{margin-left:-.012em}
.curtain .cl .wm i.sp{width:.2em}
.curtain .cl .av{font-size:1.06em}
.curtain .cl .av i{font-style:italic}
.js .curtain.intro{transform:none}
.curtain.intro .cl i{animation:intro 1s var(--ease) both;animation-delay:calc(var(--i)*45ms)}
.curtain.intro .cl .av i{animation-delay:480ms;animation-duration:1.15s}
@keyframes intro{from{transform:translateY(110%)}to{transform:none}}

/* ===== réglages maquette ===== */
.mk{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:90;display:flex;align-items:center;gap:10px;padding:8px 10px;background:var(--white);color:var(--ink);font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;box-shadow:0 10px 30px -12px rgba(11,24,48,.4)}
.mk button{width:20px;height:20px;outline:1px solid transparent;outline-offset:2px}
.mk button[aria-pressed="true"]{outline-color:var(--ink)}
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));z-index:95;transform:translate(-50%,24px);opacity:0;pointer-events:none;max-width:calc(100% - 32px);padding:14px 20px;background:var(--acc);color:var(--acc-ink);font-size:14px;font-weight:500;transition:opacity .35s,transform .6s var(--ease)}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* ===== tablette ===== */
@media (max-width:1024px){
  :root{--sec:96px}
  .sh,.proc,.fee,.fq,.ft .top,.ph-split{grid-template-columns:minmax(0,1fr)}
  .proc .stick,.fq .stick{position:static}
  .hero .row{grid-template-columns:minmax(0,1fr)}
  .hero .acts{justify-content:flex-start}
  .hero .por{width:70vw;height:70%;opacity:.75}
  .ix{grid-template-columns:56px minmax(0,1fr) 48px}
  .ix p{grid-column:2}
  .ix .ar{grid-row:1;grid-column:3}
  .figs,.three{grid-template-columns:minmax(0,1fr);gap:32px}
  .figs{margin-top:64px}
  .of{grid-template-columns:minmax(0,1fr) auto}
  .of p{grid-column:1/-1}
  .po{grid-template-columns:minmax(0,1fr) 32px;gap:8px 16px}
  .po .d,.po .c{grid-column:1}
  .po h3{grid-column:1}
  .po .ar{grid-row:1/4;grid-column:2;align-self:center}
  .fq-nav{flex-direction:row;flex-wrap:wrap;gap:8px 24px}
  .clip{max-height:520px}
}
/* ===== téléphone ===== */
@media (max-width:640px){
  :root{--sec:80px;--hd:68px}
  .lm{font-size:25px}
  .logo-sep,.logo-s{display:none}
  .hero{min-height:max(640px,100svh)}
  .hero{padding-top:0}
  .hero .por{position:relative;order:-1;width:auto;height:52svh;min-height:340px;margin-inline:calc(var(--gut)*-1);margin-bottom:-72px;opacity:1}
  .hero .por img{object-position:60% 12%;-webkit-mask-image:linear-gradient(to top,transparent 0,#000 45%);mask-image:linear-gradient(to top,transparent 0,#000 45%)}
  .hero .top{gap:24px;padding-bottom:40px}
  .hero .acts{gap:20px}
  .hero .bar .sc{display:none}
  .hero .bar{gap:8px 24px}
  .ix{grid-template-columns:40px minmax(0,1fr) 40px;gap:8px 16px;padding-block:24px}
  .ix .ar{width:40px;height:40px}
  .kv > div,.tl li,.good li{grid-template-columns:minmax(0,1fr)}
  .good{grid-template-columns:minmax(0,1fr)}
  .q{grid-template-columns:36px minmax(0,1fr) 32px}
  .a p{padding:0 0 28px 52px}
  .form{grid-template-columns:minmax(0,1fr)}
  .co{grid-template-columns:minmax(0,1fr)}
  .st{grid-template-columns:minmax(0,1fr);padding-block:32px}
  .st p{grid-column:1}
  .st .n{padding-top:0}
  .ft .mid{margin-top:80px}
  .mk span{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js [data-r],.js .ln > span,.js .wm .l{opacity:1;transform:none}
  .js .clip{clip-path:none}.js .clip img{transform:none}
  .say .w{opacity:1}.st{opacity:1}
}

/* ===== Version Squarespace : blog vide, modèle d'article, mentions légales ===== */
.empty{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:32px 48px;padding-block:48px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);align-items:start}
.empty h3{font-size:var(--t-h3);line-height:1.2;letter-spacing:-.025em;max-width:22ch}
.empty p{color:var(--mut);max-width:52ch}
.empty .r{display:flex;flex-direction:column;gap:24px;align-items:flex-start}
.cats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 32px;width:100%;border-top:1px solid var(--line)}
.cats div{display:flex;flex-direction:column;gap:6px;padding-block:20px;border-bottom:1px solid var(--line)}
.cats b{font-size:16px;font-weight:600;display:flex;align-items:center;gap:10px}
.cats b::before{content:"";width:6px;height:6px;background:var(--acc);flex:none}
.cats span{font-size:14px;line-height:22px;color:var(--mut)}
.tpl{display:inline-flex;align-items:center;gap:10px;padding:6px 10px;background:var(--acc);color:var(--acc-ink);font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.ph-meta{display:flex;flex-wrap:wrap;gap:8px 24px;font-size:14px;color:var(--mut)}
.ph-meta b{color:var(--ink);font-weight:600}
.art{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,7fr) minmax(0,2fr);gap:48px;align-items:start}
.art .aside{position:sticky;top:calc(var(--hd) + 24px);display:flex;flex-direction:column;gap:16px;font-size:14px;color:var(--mut)}
.art .aside a{color:var(--ink);text-decoration:none;display:inline-flex;align-items:center;gap:8px}
.art .aside a .i{transform:scaleX(-1)}
.ab{display:flex;flex-direction:column;gap:24px;min-width:0}
.ab h2{font-size:clamp(26px,1.2vw + 18px,36px);line-height:1.12;letter-spacing:-.03em;margin-top:24px}
.ab p{max-width:62ch}
.ab .ph-txt{color:var(--mut)}
.ab figure{margin:0;aspect-ratio:16/9;max-width:100%;background:var(--stone);display:grid;place-items:center;text-align:center;padding:24px;color:var(--mut);font-size:14px;border:1px dashed rgba(11,24,48,.25)}
.key{background:var(--night);color:var(--on);padding:32px;display:flex;flex-direction:column;gap:16px}
.key .lab{color:var(--on-mut)}.key .lab b{color:var(--on)}
.key ul{display:flex;flex-direction:column;gap:12px;padding:0;margin:0;list-style:none}
.key li{display:grid;grid-template-columns:16px minmax(0,1fr);gap:12px;color:var(--on-mut)}
.key li::before{content:"";width:8px;height:8px;background:var(--acc);margin-top:9px}
.dec{display:flex;flex-direction:column;gap:12px;padding:24px 0 24px 28px;border-left:4px solid var(--acc)}
.dec .sum{font-weight:600}
.dec blockquote{margin:0;font-family:var(--serif);font-size:clamp(20px,.6vw + 16px,24px);line-height:1.45;color:var(--ink)}
.dec blockquote strong{font-weight:400;background:linear-gradient(color-mix(in srgb,var(--acc) 55%,transparent),color-mix(in srgb,var(--acc) 55%,transparent)) 0 85%/100% .45em no-repeat}
.dec cite{font-style:normal;font-size:14px;color:var(--mut)}
.dec cite em{font-style:italic}
.art-end{display:flex;flex-direction:column;align-items:flex-start;gap:24px;padding:32px;background:var(--stone);margin-top:24px}
.art-end p{font-size:18px;line-height:1.5}
.art-end p span{display:block;font-size:15px;color:var(--mut);margin-top:8px;overflow-wrap:anywhere}
.art-end p{min-width:0;max-width:100%}
.ml{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:48px;align-items:start}
.ml nav{position:sticky;top:calc(var(--hd) + 24px);display:flex;flex-direction:column;gap:10px;font-size:15px}
.ml nav a{color:var(--mut);text-decoration:none}.ml nav a:hover{color:var(--ink)}
.ml section + section{margin-top:64px}
.ml h2{font-size:var(--t-h3);line-height:1.2;letter-spacing:-.025em;margin-bottom:24px}
.ml .kv dd a{color:var(--ink)}
.ml .kv dd + dd{margin-top:8px}
.todo{background:color-mix(in srgb,var(--acc) 45%,transparent);color:var(--ink);padding:0 4px}
@media (max-width:1024px){
  .empty,.art,.ml{grid-template-columns:minmax(0,1fr)}
  .art .aside,.ml nav{position:static}
  .art .aside{flex-direction:row;flex-wrap:wrap;gap:8px 24px}
  .ml nav{flex-direction:row;flex-wrap:wrap;gap:8px 20px}
}
@media (max-width:640px){
  .cats{grid-template-columns:minmax(0,1fr)}
  .art-end{grid-template-columns:minmax(0,1fr);padding:24px}
  .key{padding:24px}
  .dec{padding-left:20px}
}

/* ===== articles ===== */
.ph h1.a-h1{font-size:clamp(34px,2.8vw + 16px,62px);line-height:1.06;letter-spacing:-.035em;max-width:24ch;text-wrap:balance}
.ab-c{display:flex;flex-direction:column;gap:20px}
.ab-c h2{font-size:clamp(26px,1.2vw + 18px,36px);line-height:1.12;letter-spacing:-.03em;margin-top:28px}
.ab-c h3{font-size:20px;line-height:1.3;font-weight:600;margin-top:8px}
.ab-c p,.ab-c li{max-width:64ch}
.ab-c strong{font-weight:600}
.ab-c ul{display:flex;flex-direction:column;gap:14px;padding:0;margin:0;list-style:none}
.ab-c li{position:relative;padding-left:24px}
.ab-c li::before{content:"";position:absolute;left:0;top:10px;width:7px;height:7px;background:var(--acc)}
.ab-c .ref{margin-top:16px;padding-top:16px;border-top:1px solid var(--line);font-size:15px;color:var(--mut)}
.ab-c a{color:var(--ink)}
.po{cursor:pointer}

/* ===== extraits de textes et de décisions dans les articles ===== */
.ab-c .dec,.ab-c .txt{display:flex;flex-direction:column;gap:10px;padding:20px 0 20px 24px;border-left:4px solid var(--acc);margin-block:4px}
.ab-c .txt{border-left-color:var(--navy);background:none}
.ab-c .dec cite,.ab-c .txt cite{font-style:normal;font-size:14px;line-height:1.45;font-weight:600;color:var(--ink)}
.ab-c .dec cite span{font-weight:400;color:var(--mut)}
.ab-c .dec cite a,.ab-c .txt cite a{color:inherit;text-decoration-color:var(--acc);text-underline-offset:3px}
.ab-c .dec .sum{font-weight:600;font-size:16px;line-height:1.55;max-width:64ch}
.ab-c .dec blockquote,.ab-c .txt blockquote{margin:0;font-family:var(--sans);font-size:15px;line-height:1.7;color:var(--mut);max-width:68ch}
.ab-c .dec blockquote strong,.ab-c .txt blockquote strong{color:var(--ink);font-weight:600;background:linear-gradient(color-mix(in srgb,var(--acc) 45%,transparent),color-mix(in srgb,var(--acc) 45%,transparent)) 0 88%/100% .38em no-repeat}
.ab-c .refs{margin-top:24px;padding-top:20px;border-top:1px solid var(--line)}
.ab-c .refs h3{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--mut);margin:0 0 12px}
.ab-c .refs ul{gap:8px}
.ab-c .refs li{font-size:14px;line-height:1.5;color:var(--mut)}
.a p a{color:inherit;text-decoration-color:var(--acc);text-underline-offset:3px}
@media (max-width:640px){.ab-c .dec,.ab-c .txt{padding-left:16px}}

/* ===== Palette retenue : Marine, jaune & bleu électrique ===== */
:root{--night:#0C1A36;--ink:#0C1A36;--acc:#FFD43B;--acc2:#5B7CFF}
.dark em.s{color:var(--acc2)}
.tl .y{color:var(--acc2)}
.who button::after{background:var(--acc2)}
.fee .cap em.s{background:linear-gradient(var(--acc2),var(--acc2)) 0 92%/100% .12em no-repeat}
.filt button::after{background:var(--acc2)}
.co a{background-image:linear-gradient(var(--acc2),var(--acc2))}
.ab-c .dec blockquote strong,.ab-c .txt blockquote strong{background:linear-gradient(color-mix(in srgb,var(--acc2) 26%,transparent),color-mix(in srgb,var(--acc2) 26%,transparent)) 0 88%/100% .42em no-repeat}
.ab-c .dec cite a,.ab-c .txt cite a,.a p a{text-decoration-color:var(--acc2)}
.ab-c .txt{border-left-color:var(--acc2)}

/* ===== Police : Grandview partout (Barlow en secours, proche dessin DIN) ===== */
:root{
  --sans:"NLM",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --display:"NLM Display","NLM",ui-sans-serif,system-ui,"Segoe UI",sans-serif;
  --serif:var(--display);
}
body,button,input,select,textarea{font-family:var(--sans)}
h1,h2,h3,.big,.who,.say,.cnt,.tl .y,.of .p,.mq-t,.ix h3,.po h3,.qa .q,.curtain .cl-a{font-family:var(--display)}
em.s,.rot .slot .sl > span,.tl .y{font-family:var(--display);font-style:italic;letter-spacing:0}
.hero h1{letter-spacing:-.025em;font-weight:500;font-size:clamp(46px,6.6vw + 4px,112px)}
.ph h1{letter-spacing:-.025em}
.sh h2,.sh h2.who,.fee h2,.proc h2,.fq h2,.ft h2,.ab-c h2,.ph h1.a-h1{letter-spacing:-.015em}
.big{letter-spacing:-.03em}
/* le logo validé garde son dessin */
.lm .wm,.curtain .cl .wm{font-family:var(--logo)}
.lm .av,.curtain .cl .av{font-family:"Instrument Serif",ui-serif,Georgia,serif;font-style:italic}

/* ===== Trame de carrés (motif propre au cabinet) et étiquettes surlignées ===== */
.band{display:block;width:100%;height:var(--bh,72px);overflow:hidden;line-height:0}
.band svg{display:block;width:100%;height:100%}
.band-hero{background:var(--night);--bh:64px}
.band-ft{--bh:56px;margin-bottom:-1px}
.tag{display:inline-flex;align-items:center;padding:3px 8px 2px;font-size:11px;line-height:16px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;background:var(--tg,var(--acc));color:var(--tc,var(--acc-ink));white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.tag.blue{--tg:var(--acc2);--tc:#fff}
.tag.navy{--tg:var(--night);--tc:#F5F2EA}
.hl{background:linear-gradient(color-mix(in srgb,var(--acc) 70%,transparent),color-mix(in srgb,var(--acc) 70%,transparent)) 0 90%/100% .5em no-repeat;padding-inline:.05em}
.dark .hl{background:none;color:var(--acc)}
.hl-b{background:linear-gradient(color-mix(in srgb,var(--acc2) 30%,transparent),color-mix(in srgb,var(--acc2) 30%,transparent)) 0 90%/100% .5em no-repeat}
.hero .bar .tag{margin-right:6px}
/* cartes d'articles */
.posts.cards{border-top:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.pc{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line);text-decoration:none;color:inherit;transition:transform .6s var(--ease),box-shadow .6s var(--ease);min-width:0}
.pc:hover{transform:translateY(-6px);box-shadow:0 24px 40px -28px rgba(12,26,54,.45)}
.pc .in{display:flex;flex-direction:column;gap:16px;padding:24px 24px 28px;flex:1}
.pc .meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;font-size:13px;color:var(--mut);font-variant-numeric:tabular-nums}
.pc h3{font-size:clamp(20px,.6vw + 15px,24px);line-height:1.22;letter-spacing:-.01em;margin:0}
.pc p{margin:0;font-size:15px;line-height:1.55;color:var(--mut)}
.pc .go{margin-top:auto;display:inline-flex;align-items:center;gap:10px;font-size:14px;font-weight:600}
.pc .go svg{transition:transform .5s var(--ease)}
.pc:hover .go svg{transform:translateX(5px)}
.pc .band{--bh:64px;border-top:1px solid var(--line)}
.posts.cards.swap .pc{animation:up .8s var(--ease) both;animation-delay:calc(var(--i)*60ms)}
.fq-g h2{display:inline-flex}
.fq-g h2 .tag{font-size:12px}
.a-band{--bh:72px;margin-top:8px}
.lab:has(.tag)::before{display:none}
@media (max-width:1024px){.posts.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.posts.cards{grid-template-columns:minmax(0,1fr)}.band-hero{--bh:48px}}

/* ===== Logo retenu : piste 4 « L'accent » (Grandview) ===== */
.lm .wm,.curtain .cl .wm{font-family:var(--display);font-weight:700;letter-spacing:-.025em}
.lm .av,.curtain .cl .av{font-family:var(--sans);font-style:italic;font-weight:500;letter-spacing:0;color:var(--acc2);font-size:1em}
.lm .wm .k1,.curtain .cl .wm i.k1{margin-left:-.045em}
.lm .wm .k2,.curtain .cl .wm i.k2{margin-left:-.01em}
.curtain .cl .av i{font-style:italic}

/* trame retirée ; filet de couleur de rubrique en haut des cartes */
.pc{border-top:4px solid var(--cc,var(--acc2))}

/* ===== Logo vectoriel (Grandview, contours) ===== */
.lm{display:inline-flex!important;align-items:center;height:auto}
.lm .lsvg{display:block;height:26px;width:auto;overflow:visible}
.lsvg .lav{fill:var(--acc2)}
.curtain .cl{display:block}
.curtain .clm{display:block;overflow:hidden;padding-block:.1em}
.curtain .clm .lsvg{height:clamp(44px,7vw,96px);width:auto;color:var(--on)}
.curtain.intro .clm .lsvg{animation:intro 1.1s var(--ease) both;animation-delay:.15s}
@media (max-width:640px){.lm .lsvg{height:21px}}

/* ===== Bandeaux guillochés, étiquettes lisibles ===== */
.band-hero{--bh:72px;background:var(--night);padding-block:4px}
.band-ft{--bh:64px}
.pc{border-top:0}
.pc .band{--bh:56px;border-top:1px solid var(--line)}
.tag{font-size:12px;font-weight:700;letter-spacing:.05em;padding:4px 9px 3px}
.tag.blue{--tg:#3E5BEF;--tc:#fff}
.hero .bar .tag{font-size:13px;letter-spacing:.02em;text-transform:none;padding:5px 10px 4px}
.hero .bar{color:rgba(245,242,234,.82)}
.lm .lsvg{transform:translateY(-2px)}
.hero .bar b.tag{color:var(--acc-ink)}

/* ===== Marqueurs (remplacent les bandeaux) ===== */
.rule{display:flex;align-items:center;align-self:stretch;width:100%;max-width:100%;margin-top:8px;color:var(--ink)}
.rule::before{content:"";flex:1;height:1px;background:currentColor;opacity:.28}
.rule::after{content:"";width:10px;height:10px;background:var(--acc);margin-left:10px;flex:none}
.dark .rule{color:var(--on)}
.ph .rule{margin-top:40px}
/* chiffres-repères */
.kfigs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:72px}
.kfigs-h{grid-column:1/-1;font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);margin:0}
.kfig{display:flex;flex-direction:column;gap:10px;border-top:2px solid var(--ink);padding-top:16px;min-width:0}
.kfig b{font-family:var(--display);font-style:normal;font-weight:600;font-size:clamp(48px,4.4vw + 12px,84px);line-height:.95;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--ink)}
.kfig b small{font-size:.36em;font-weight:500;letter-spacing:0;margin-left:6px}
.kfig.y b{color:var(--ink);background:linear-gradient(var(--acc),var(--acc)) 0 100%/100% 10px no-repeat;align-self:flex-start;padding-inline:2px}
.kfig span{font-size:15px;line-height:1.45;color:var(--mut);max-width:30ch}
@media (max-width:640px){.kfigs{grid-template-columns:minmax(0,1fr);gap:28px;margin-top:56px}}
/* grand guillemet */
.ab-c .gq{display:block;position:relative;margin:0 0 12px;padding:4px 0 4px clamp(56px,6vw,84px);border:0}
.ab-c .gq::before{content:"«";position:absolute;left:-4px;top:-.3em;font-family:var(--display);font-weight:700;font-size:clamp(88px,8vw,128px);line-height:1;color:var(--acc2)}
.ab-c .gq p{margin:0;font-family:var(--display);font-style:italic;font-weight:400;font-size:clamp(21px,1vw + 15px,27px);line-height:1.35;color:var(--ink);max-width:40ch}
.ab-c .gq cite{display:block;margin-top:14px;font-style:normal;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
/* notes en marge */
.ab-c{counter-reset:nt}
.ab-c .dec,.ab-c .txt{counter-increment:nt;position:relative}
.ab-c .dec .sum::before,.ab-c .txt blockquote::before{content:counter(nt);display:inline-block;vertical-align:super;font-family:var(--sans);font-style:normal;font-size:11px;font-weight:700;line-height:1;color:#3E5BEF;margin-right:6px}
.ab-c .dec cite,.ab-c .txt cite{display:flex;flex-direction:column;gap:4px;border-left:2px solid var(--acc2);padding-left:12px;font-weight:500!important;font-size:13px!important;line-height:1.45!important}
.ab-c .dec cite::before,.ab-c .txt cite::before{content:counter(nt) " · La décision";font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#3E5BEF}
.ab-c .txt cite::before{content:counter(nt) " · Le texte"}
@media (min-width:1025px){
  .ab-c .dec cite,.ab-c .txt cite{position:absolute;top:22px;left:calc(100% + 48px);width:calc(100% * 2 / 7 - 6px)}
}
/* flèche carrée */
.pc .go .i,.art .aside a .i{box-sizing:content-box;width:16px;height:16px;padding:9px;background:var(--night);color:var(--acc);transition:transform .45s var(--ease),background-color .45s,color .45s}
.pc:hover .go .i{transform:translateX(6px);background:#3E5BEF;color:#fff}
.art .aside a:hover .i{transform:scaleX(-1) translateX(6px);background:#3E5BEF;color:#fff}
.pc .go{gap:14px}
.pc .go svg{transition:transform .45s var(--ease),background-color .45s,color .45s}

/* ===== version publiée ===== */
.skip{position:fixed;left:16px;top:-80px;z-index:300;background:var(--acc);color:var(--acc-ink);padding:12px 16px;font-weight:600;text-decoration:none;transition:top .2s}
.skip:focus{top:16px}
.hp{display:none!important}
.fq-g h2{display:inline-flex;margin:0}
.fq-g h2 .tag{font-size:12px}
.form .f-err{margin:0;font-size:14px;color:var(--acc)}
.merci{min-height:60vh;display:flex;align-items:center}
.ft .co > div:nth-child(3){grid-column:1/-1}
.hero .bar b.tag{--tg:#5B7CFF;--tc:#0C1A36;background:#5B7CFF;color:#0C1A36}
.ft .map{position:relative;display:block;width:100%;align-self:stretch;margin-top:32px;aspect-ratio:2/1;max-width:100%;overflow:hidden;border:1px solid rgba(245,242,234,.14);text-decoration:none;color:var(--on);background:#0C1A36}
.ft .map img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.ft .map:hover img{transform:scale(1.04)}
.ft .map .pin{position:absolute;left:50%;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;background:var(--acc);box-shadow:0 0 0 5px rgba(255,212,59,.28),0 6px 18px rgba(0,0,0,.45)}
.ft .map .go{position:absolute;left:12px;bottom:12px;display:inline-flex;align-items:center;gap:8px;padding:8px 12px;background:var(--acc);color:var(--acc-ink);font-size:14px;font-weight:600}
.ft .map .go .i{width:14px;height:14px}
.ft .map .osm{position:absolute;right:8px;bottom:6px;font-size:10px;color:rgba(245,242,234,.6)}
.ft .co a.li{display:inline-flex;align-items:center;gap:10px}
.ft .co a.li svg{width:20px;height:20px;flex:none;color:var(--on)}
.ft .co dd a{overflow-wrap:anywhere}
@media (max-width:640px){.curtain .clm .lsvg{height:auto;width:calc(100vw - 64px)}}