/* Xperience by Ambassia — feuille de styles commune (xperience.ambassia.net) */

/* ── Jetons ─────────────────────────────────────────── */
:root{
  color-scheme:light;
  --bg:#F4F1E8;--bg2:#ECE8DC;--surface:#FFFFFF;--surface2:#FBFAF6;
  --ink:#121214;--ink2:#3A3A42;--mute:#6B6B74;--faint:#9A9AA2;
  --acid:#EFE85A;--acid2:#E4DC3C;
  --mint:#D6EBDF;--teal:#CBE3DF;--lilac:#E2E0F4;--peach:#F8DEC9;
  --red:#9A3412;--redbg:#FCE9E0;
  --amber:#8A4B00;--amberbg:#FFE9C7;
  --green:#1F6B4A;--greenbg:#E3F1E8;
  --line:rgba(18,18,20,.08);--line2:rgba(18,18,20,.14);
  --font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --display:"Inter Tight","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --sh1:0 1px 1px rgba(18,18,20,.03),0 2px 6px -2px rgba(18,18,20,.06);
  --sh2:0 1px 2px rgba(18,18,20,.04),0 12px 32px -12px rgba(18,18,20,.14);
  --sh3:0 2px 4px rgba(18,18,20,.04),0 28px 64px -24px rgba(18,18,20,.24);
  --r:20px;--r2:14px;
  --ease:cubic-bezier(.2,.7,.2,1);
}

/* ── Base ───────────────────────────────────────────── */
*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:96px;-webkit-text-size-adjust:100%}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}}
body{font-family:var(--font);font-feature-settings:"cv11","ss01";background:var(--bg);color:var(--ink);
  -webkit-font-smoothing:antialiased;font-size:16.5px;line-height:1.62;letter-spacing:-.006em}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
::selection{background:var(--acid)}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:8px}
b,strong{font-weight:640}
.skip{position:absolute;left:-999px;top:10px;background:var(--ink);color:#fff;padding:9px 14px;border-radius:10px;z-index:60}
.skip:focus{left:10px}

/* ── En-tête ────────────────────────────────────────── */
.top{position:sticky;top:0;z-index:40;background:rgba(244,241,232,.82);
  backdrop-filter:saturate(1.4) blur(16px);-webkit-backdrop-filter:saturate(1.4) blur(16px);
  border-bottom:1px solid transparent;transition:border-color .25s,box-shadow .25s}
.top.scrolled{border-bottom-color:var(--line);box-shadow:0 6px 24px -18px rgba(18,18,20,.4)}
.topin{max-width:1120px;margin:0 auto;height:64px;padding:0 20px;display:flex;align-items:center;gap:20px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex:none}
.logo{width:30px;height:30px;flex:none;display:block}
.brand b{font-family:var(--display);font-size:18px;font-weight:700;letter-spacing:-.035em}
.brand i{font-style:normal;font-size:12px;color:var(--mute);font-weight:500;margin-left:-3px;padding-top:2px}
.nav{display:flex;gap:2px;margin-left:auto}
.nav a{font-size:14.5px;font-weight:540;text-decoration:none;color:var(--ink2);padding:8px 12px;border-radius:10px;
  white-space:nowrap;transition:background .2s,color .2s}
.nav a:hover{background:rgba(18,18,20,.055);color:var(--ink)}
.nav a[aria-current=page]{color:var(--ink);background:rgba(18,18,20,.07)}
.topcta{font-size:14.5px;font-weight:620;text-decoration:none;background:var(--ink);color:#fff;
  padding:9px 15px;border-radius:12px;white-space:nowrap;flex:none;transition:transform .2s var(--ease),background .2s}
.topcta:hover{background:#000;transform:translateY(-1px)}
.menubtn{display:none;margin-left:auto;width:42px;height:42px;border:0;border-radius:12px;background:transparent;cursor:pointer;
  align-items:center;justify-content:center}
.menubtn span{display:block;width:18px;height:2px;background:var(--ink);border-radius:2px;position:relative;transition:background .2s}
.menubtn span:before,.menubtn span:after{content:"";position:absolute;left:0;width:18px;height:2px;background:var(--ink);border-radius:2px;transition:transform .3s var(--ease)}
.menubtn span:before{top:-6px}.menubtn span:after{top:6px}
.menu-open .menubtn span{background:transparent}
.menu-open .menubtn span:before{transform:translateY(6px) rotate(45deg)}
.menu-open .menubtn span:after{transform:translateY(-6px) rotate(-45deg)}
@media(max-width:880px){
  .topin{height:58px;padding:0 16px}
  .menubtn{display:inline-flex}
  .nav,.topcta{display:none}
  .sheet{position:fixed;inset:58px 0 auto 0;z-index:39;background:var(--bg);border-bottom:1px solid var(--line);
    padding:10px 16px 20px;box-shadow:0 30px 60px -30px rgba(18,18,20,.35);
    transform:translateY(-8px);opacity:0;visibility:hidden;transition:opacity .25s var(--ease),transform .3s var(--ease),visibility .3s}
  .menu-open .sheet{transform:none;opacity:1;visibility:visible}
  .sheet a{display:flex;justify-content:space-between;align-items:center;padding:14px 4px;font-size:18px;font-weight:600;
    letter-spacing:-.02em;text-decoration:none;border-bottom:1px solid var(--line)}
  .sheet a:after{content:"→";color:var(--faint);font-weight:400;display:inline-block}
  .sheet a[aria-current=page]{text-decoration:underline;text-decoration-color:var(--acid2);text-decoration-thickness:3px;text-underline-offset:6px}
  .sheet .btn{margin-top:16px;width:100%;justify-content:center;border-bottom:0}
  .sheet .btn:after{content:none}
}
@media(min-width:881px){.sheet{display:none}}

/* ── Mise en page ───────────────────────────────────── */
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
.narrow{max-width:780px}
@media(max-width:600px){.wrap{padding:0 16px}}
main{padding-bottom:16px}
.hero{padding:72px 0 40px}
.pill{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:560;color:var(--ink2);background:var(--surface);
  padding:6px 12px 6px 8px;border-radius:999px;box-shadow:var(--sh1);border:1px solid var(--line);margin-bottom:22px}
.pill i{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:var(--greenbg);color:var(--green);font-style:normal;font-size:11px;font-weight:800}
h1{font-family:var(--display);font-size:clamp(40px,7.2vw,74px);font-weight:700;letter-spacing:-.045em;line-height:1.01;text-wrap:balance}
h2{font-family:var(--display);font-size:clamp(28px,4.4vw,44px);font-weight:700;letter-spacing:-.04em;line-height:1.06;margin:10px 0 12px;text-wrap:balance}
h3{font-family:var(--display);font-size:19px;font-weight:650;letter-spacing:-.025em;line-height:1.25}
.mk{background:linear-gradient(transparent 60%,var(--acid) 60%,var(--acid) 92%,transparent 92%);padding:0 .04em;
  box-decoration-break:clone;-webkit-box-decoration-break:clone}
.lead{font-size:clamp(17.5px,2vw,20px);color:var(--ink2);margin-top:20px;max-width:56ch;line-height:1.55;text-wrap:pretty}
.meta{font-size:13.5px;color:var(--mute);margin-top:14px}
.kicker{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:650;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.kicker:before{content:"";width:16px;height:2px;border-radius:2px;background:var(--acid2)}
section.block{padding:72px 0 0}
section.block.tight{padding-top:40px}
.intro{color:var(--ink2);max-width:60ch;margin-bottom:28px;font-size:17px;text-wrap:pretty}
p+p{margin-top:10px}
.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
@media(max-width:600px){
  .hero{padding:40px 0 24px}
  section.block{padding-top:56px}
  .actions .btn{width:100%;justify-content:center}
}

/* ── Boutons ────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:10px;font:inherit;font-size:15.5px;font-weight:620;letter-spacing:-.012em;
  padding:14px 22px;border:0;border-radius:14px;background:var(--ink);color:#fff;text-decoration:none;cursor:pointer;
  transition:transform .2s var(--ease),box-shadow .2s,background .2s;box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 10px 24px -12px rgba(18,18,20,.55)}
.btn:hover{transform:translateY(-1px);background:#000}
.btn:active{transform:none}
.btn.light{background:var(--surface);color:var(--ink);box-shadow:var(--sh1);border:1px solid var(--line)}
.btn.light:hover{background:#fff;box-shadow:var(--sh2)}
.btn.acid{background:var(--acid);color:var(--ink);box-shadow:0 10px 24px -12px rgba(160,150,20,.7)}
.btn.acid:hover{background:var(--acid2)}
.btn.small{font-size:14px;padding:10px 15px;border-radius:12px}
.btn:disabled{opacity:.55;cursor:default;transform:none}
.arrow:after{content:"→";font-weight:400;transition:transform .2s var(--ease)}
.arrow:hover:after{transform:translateX(3px)}

/* ── Surfaces ───────────────────────────────────────── */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:26px;box-shadow:var(--sh1)}
.card+.card{margin-top:12px}
.card p,.card li{font-size:15.5px;color:var(--ink2)}
.card h3+p{margin-top:8px}
.card ul,.card ol{padding-left:20px;margin-top:8px}
.card li+li{margin-top:6px}
@media(max-width:600px){.card{padding:20px}}
.grid{display:grid;gap:14px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:900px){.g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.g2,.g3,.g4{grid-template-columns:1fr}}

/* tuiles de couleur */
.tile{position:relative;border-radius:var(--r);padding:24px;border:1px solid rgba(18,18,20,.05);display:flex;flex-direction:column;
  text-decoration:none;color:inherit;overflow:hidden;transition:transform .3s var(--ease),box-shadow .3s}
.tile.mint{background:var(--mint)}.tile.teal{background:var(--teal)}.tile.lilac{background:var(--lilac)}.tile.peach{background:var(--peach)}
.tile .k{font-size:12px;font-weight:650;letter-spacing:.08em;text-transform:uppercase;color:rgba(18,18,20,.5)}
.tile h3{margin:10px 0 8px}
.tile p{font-size:15px;color:rgba(18,18,20,.72)}
.tile .more{margin-top:auto;padding-top:18px;font-size:14.5px;font-weight:620}
a.tile:hover{transform:translateY(-3px);box-shadow:var(--sh2)}
.num{font-family:var(--mono);font-size:12.5px;font-weight:600;width:32px;height:32px;border-radius:10px;
  background:var(--ink);color:var(--acid);display:inline-flex;align-items:center;justify-content:center;margin-bottom:14px}

/* encadré mis en avant */
.feature{position:relative;overflow:hidden;border-radius:26px;padding:34px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh2)}
.feature:before{content:"";position:absolute;right:-80px;top:-120px;width:340px;height:340px;border-radius:50%;
  background:radial-gradient(circle,var(--acid) 0%,rgba(239,232,90,0) 68%);opacity:.55;pointer-events:none}
.feature h2{margin-top:6px;position:relative}
.feature p{color:var(--ink2);max-width:60ch;position:relative}
.feature .actions{position:relative;align-items:center}
.url{font-family:var(--mono);font-size:13px;color:var(--mute);margin-left:4px}
@media(max-width:600px){.feature{padding:24px;border-radius:22px}.url{margin:0;width:100%;text-align:center}}

/* bandeau sombre */
.dark{position:relative;overflow:hidden;background:var(--ink);color:#fff;border-radius:28px;padding:44px 36px;box-shadow:var(--sh3)}
.dark:after{content:"";position:absolute;right:-60px;bottom:-140px;width:360px;height:360px;border-radius:50%;
  background:radial-gradient(circle,rgba(239,232,90,.35),rgba(239,232,90,0) 65%);pointer-events:none}
.dark h2{color:#fff;margin-top:0;max-width:20ch;position:relative}
.dark p{color:rgba(255,255,255,.72);max-width:56ch;position:relative}
.dark .actions{position:relative}
@media(max-width:600px){.dark{padding:30px 22px;border-radius:22px}}

/* listes */
.check,.nope{list-style:none;padding:0!important;margin:0}
.check li,.nope li{position:relative;padding-left:34px}
.check li+li,.nope li+li{margin-top:14px}
.check li:before{content:"";position:absolute;left:0;top:2px;width:22px;height:22px;border-radius:7px;background:var(--ink)
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23EFE85A' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}
.nope li:before{content:"";position:absolute;left:0;top:2px;width:22px;height:22px;border-radius:7px;background:var(--redbg)
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 8l8 8M16 8l-8 8' fill='none' stroke='%239A3412' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center/16px no-repeat}

/* ── Marqueurs de confiance ─────────────────────────── */
.ok,.tbc{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:650;padding:2px 9px 2px 7px;border-radius:999px;
  white-space:nowrap;vertical-align:1px;letter-spacing:0;font-style:normal;line-height:1.6}
.ok{background:var(--greenbg);color:var(--green)}
.ok:before{content:"✓";font-size:11px}
.tbc{background:var(--amberbg);color:var(--amber)}
.tbc:before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.src{position:relative;padding-left:22px;font-size:13px;color:var(--mute);margin-top:14px;line-height:1.5}
.src:before{content:"";position:absolute;left:0;top:2px;width:14px;height:14px;border-radius:4px;background:var(--greenbg)
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%231F6B4A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/11px no-repeat}
.src a{color:var(--mute)}
.warn{border-color:rgba(154,52,18,.18);background:linear-gradient(180deg,#FFF6F1,#FFFFFF)}
.warn h3{color:var(--red)}
.note{font-size:14px;color:var(--mute);margin-top:14px;max-width:68ch}

/* ── Tableaux ───────────────────────────────────────── */
.tw{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh1);overflow-x:auto}
table{width:100%;border-collapse:collapse}
th{font-size:11.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--mute);font-weight:650;text-align:left;
  padding:16px 20px 12px;vertical-align:bottom;background:var(--surface2)}
td{padding:14px 20px;border-top:1px solid var(--line);font-size:15px;vertical-align:top}
tbody tr{transition:background .15s}
tbody tr:hover{background:var(--surface2)}
td.n,th.n{text-align:right}
td.n{font-family:var(--mono);font-size:14.5px;font-weight:550;white-space:nowrap;width:1%}
.tw.wide table{min-width:720px}
td .ex{display:block;font-size:13.5px;color:var(--mute);margin-top:3px;line-height:1.45}
.tw caption{caption-side:bottom;text-align:left;font-size:13px;color:var(--mute);padding:12px 20px 16px;border-top:1px solid var(--line);line-height:1.5}
@media(max-width:600px){th,td{padding-left:14px;padding-right:14px}td{font-size:14.5px}}

/* ── Questions dépliables ───────────────────────────── */
.q{background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden;transition:box-shadow .25s,border-color .25s}
.q+.q{margin-top:8px}
.q:hover{border-color:var(--line2)}
.q[open]{box-shadow:var(--sh2);border-color:var(--line2)}
.q summary{list-style:none;cursor:pointer;padding:16px 18px;display:grid;grid-template-columns:1fr auto 18px;gap:14px;align-items:center}
.q summary::-webkit-details-marker{display:none}
.q summary:after{content:"";width:9px;height:9px;border-right:2px solid var(--faint);border-bottom:2px solid var(--faint);
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .3s var(--ease);justify-self:center}
.q[open] summary:after{transform:rotate(225deg) translate(-2px,-2px)}
.q .qt{font-size:15.5px;font-weight:600;letter-spacing:-.012em;line-height:1.35}
.q .qs{display:block;font-size:11.5px;font-weight:650;color:var(--faint);text-transform:uppercase;letter-spacing:.08em;margin-bottom:3px}
.ans{font-size:13px;font-weight:650;background:var(--acid);padding:5px 11px;border-radius:999px;white-space:nowrap}
.ans.var{background:var(--bg2);color:var(--ink2)}
.q .body{padding:0 18px 18px;font-size:15.5px;color:var(--ink2)}
.q .body:before{content:"";display:block;height:1px;background:var(--line);margin:0 0 14px}
.q[open] .body{animation:open .35s var(--ease)}
@keyframes open{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media(max-width:600px){.q summary{grid-template-columns:1fr 14px;gap:8px 10px}.q .ans{grid-column:1;grid-row:2;justify-self:start}.q summary:after{grid-column:2;grid-row:1/span 2}}
.group{font-size:12px;font-weight:650;text-transform:uppercase;letter-spacing:.09em;color:var(--mute);margin:30px 0 12px;display:flex;align-items:center;gap:10px}
.group:after{content:"";flex:1;height:1px;background:var(--line)}
.toolbar{display:flex;justify-content:flex-end;margin:-8px 0 4px}
.linkbtn{font:inherit;font-size:14px;font-weight:600;color:var(--ink2);background:none;border:0;cursor:pointer;padding:6px 2px;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line2)}
.linkbtn:hover{color:var(--ink);text-decoration-color:currentColor}

/* ── Page en deux colonnes avec sommaire ────────────── */
.layout{display:grid;grid-template-columns:200px minmax(0,780px);gap:64px;align-items:start;justify-content:center}
.toc{position:sticky;top:100px;font-size:14px;padding-top:6px}
.toc p{font-size:12px;font-weight:650;text-transform:uppercase;letter-spacing:.08em;color:var(--mute);margin-bottom:10px}
.toc a{display:block;text-decoration:none;color:var(--mute);padding:7px 0 7px 14px;border-left:2px solid var(--line);transition:color .2s,border-color .2s}
.toc a:hover{color:var(--ink)}
.toc a.on{color:var(--ink);border-left-color:var(--ink);font-weight:600}
.toc .btn{margin-top:20px;width:100%;justify-content:center}
.toc{max-height:calc(100vh - 120px);overflow:auto;scrollbar-width:thin}
.toc .toc-part{font-size:11.5px;font-weight:650;text-transform:none;letter-spacing:0;color:var(--ink2);margin:18px 0 6px}
.part{margin:88px 0 -36px;padding:22px 0 0;border-top:2px solid var(--ink);display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.part span{font-family:var(--mono);font-size:13px;font-weight:600;background:var(--acid);padding:3px 9px;border-radius:8px}
.part h2{margin:0;font-size:clamp(30px,4.6vw,48px)}
@media(max-width:600px){.part{margin:64px 0 -24px}}
.only-mobile{display:none}
@media(max-width:1020px){.only-mobile{display:flex}.only-mobile .btn{width:auto!important}.layout{grid-template-columns:minmax(0,780px);gap:0}.toc{display:none}}

/* ── Frise ──────────────────────────────────────────── */
.tl{list-style:none}
.tl li{position:relative;padding:0 0 32px 54px}
.tl li:before{content:attr(data-n);position:absolute;left:0;top:-3px;width:34px;height:34px;border-radius:11px;
  background:var(--ink);color:var(--acid);font-family:var(--mono);font-size:13px;font-weight:600;display:flex;align-items:center;justify-content:center}
.tl li:after{content:"";position:absolute;left:16px;top:38px;bottom:6px;width:2px;background:linear-gradient(var(--line2),transparent)}
.tl li:last-child{padding-bottom:0}
.tl li:last-child:after{display:none}
.tl li.you:before{background:var(--red);color:#fff}
.tl p{font-size:16px;color:var(--ink2);margin-top:6px}
.who{display:inline-block;font-family:var(--font);font-size:11px;font-weight:650;text-transform:uppercase;letter-spacing:.07em;
  color:var(--mute);background:var(--bg2);padding:2px 8px;border-radius:999px;margin-left:6px;vertical-align:3px;white-space:nowrap}
.tl li.you .who{color:var(--red);background:var(--redbg)}

/* ── Calculateur ────────────────────────────────────── */
.calc{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:14px;align-items:stretch}
.calc{grid-template-columns:1fr}
.calc>.card:first-child{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.calc>.card:first-child .field+.field{margin-top:0}
@media(max-width:600px){.calc>.card:first-child{grid-template-columns:1fr}}
.field label{display:block;font-size:13px;font-weight:620;color:var(--ink2);margin:0 0 7px}
.field label small{font-weight:500;color:var(--mute)}
.field+.field{margin-top:16px}
.field input,.field select,.field textarea{width:100%;font:inherit;font-size:16px;padding:13px 14px;border-radius:12px;
  border:1px solid var(--line2);background:var(--surface2);color:var(--ink);transition:border-color .2s,box-shadow .2s,background .2s;-webkit-appearance:none;appearance:none;min-height:50px}
.field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5' fill='none' stroke='%236B6B74' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:20px;padding-right:40px}
.field input:hover,.field select:hover,.field textarea:hover{border-color:rgba(18,18,20,.25)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--ink);background:#fff;box-shadow:0 0 0 4px rgba(18,18,20,.08)}
.dates,.card .dates{list-style:none;padding:0;margin:0}
.dates li{display:grid;grid-template-columns:1fr auto;gap:3px 16px;padding:16px 0;border-top:1px solid var(--line);align-items:center}
.dates li:first-child{border-top:0;padding-top:0}
.dates li:last-child{padding-bottom:0}
.dates b{font-size:15.5px;font-weight:620}
.dates span{font-size:13.5px;color:var(--mute);grid-column:1}
.dates time{grid-row:1/span 2;grid-column:2;font-family:var(--mono);font-size:14px;font-weight:600;
  background:var(--acid);padding:6px 11px;border-radius:10px;white-space:nowrap}
.dates time.na{background:var(--bg2);font-family:var(--font);font-size:13px;color:var(--ink2)}
.dates time.flash{animation:flash .5s var(--ease)}
@keyframes flash{from{opacity:.2;transform:translateY(3px)}to{opacity:1;transform:none}}
@media(max-width:600px){.dates li{grid-template-columns:1fr}.dates time{grid-row:auto;grid-column:1;justify-self:start;margin-top:8px}}

/* ── Accueil : en-tête en deux colonnes et aperçu ───── */
.herogrid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:64px;align-items:center}
@media(max-width:1020px){.herogrid{grid-template-columns:1fr;gap:40px}}
.herogrid h1{font-size:clamp(40px,5.4vw,68px)}
.preview{position:relative;padding:0 0 70px 28px}
.preview .card{border-radius:24px;padding:24px;box-shadow:var(--sh3)}
.preview .head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:18px}
.preview .head span{font-size:12px;font-weight:650;letter-spacing:.07em;text-transform:uppercase;color:var(--mute)}
.preview .float{position:absolute;left:0;bottom:0;z-index:1;background:var(--ink);color:rgba(255,255,255,.78);border-radius:16px;padding:14px 16px;
  box-shadow:var(--sh3);font-size:13.5px;max-width:250px;line-height:1.45}
.preview .float b{color:var(--acid);font-weight:620}
@media(max-width:600px){.preview .dates li{grid-template-columns:1fr auto}.preview .dates time{grid-row:1/span 2;grid-column:2;margin-top:0}}
@media(max-width:1020px){.preview{padding:0}.preview .float{position:static;margin-top:12px;max-width:none}}

/* ── Formulaire d'accompagnement ────────────────────── */
.xf{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.xf .full{grid-column:1/-1}
.xf .field+.field{margin-top:0}
.xf textarea{min-height:110px;resize:vertical}
.fine{font-size:13px;color:var(--mute);line-height:1.55}
.err{display:none;font-size:14.5px;color:var(--red);font-weight:560}
.err a{color:inherit}
.okmsg{display:none;background:var(--greenbg);color:var(--green);border-radius:16px;padding:20px;font-weight:560}
@media(max-width:600px){.xf{grid-template-columns:1fr}.xf .btn{width:100%;justify-content:center}}

/* ── Apparition au défilement ───────────────────────── */
.js .rv{opacity:0;transform:translateY(16px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js .rv.in{opacity:1;transform:none}

/* ── Pied de page ───────────────────────────────────── */
footer{margin-top:104px;border-top:1px solid var(--line)}
.footin{max-width:1120px;margin:0 auto;padding:44px 20px 56px;display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:32px;font-size:14px;color:var(--mute)}
.footin .brand{margin-bottom:14px;color:var(--ink)}
.footin p+p{margin-top:8px}
.footin nav{display:flex;flex-direction:column;gap:9px}
.footin nav strong{font-size:12px;font-weight:650;text-transform:uppercase;letter-spacing:.08em;color:var(--ink2);margin-bottom:4px}
.footin nav a{text-decoration:none}
.footin nav a:hover{color:var(--ink);text-decoration:underline}
@media(max-width:760px){.footin{grid-template-columns:1fr 1fr}.footin>div{grid-column:1/-1}}
@media print{
  @page{margin:16mm 14mm}
  body{background:#fff;font-size:11pt}
  .top,.sheet,footer,.dark,.toc,.actions,.skip,.toolbar,#calc,.calc{display:none!important}
  .layout{display:block}
  .js .rv{opacity:1!important;transform:none!important}
  .card,.tile,.tw,.q,.feature{box-shadow:none!important;break-inside:avoid}
  .q summary:after{display:none}
  .q:not([open]) .body{display:block}
  section.block{padding-top:28px}
  .part{break-before:page;margin-top:0}
  a{text-decoration:none}
  h1{font-size:30pt}h2{font-size:20pt}
}