/* TAPCODE. Marine pour agir, beige pour lire. Verre liquide réservé aux objets qui flottent
   (barre du haut, barre d'action du bas, carte-code). Mono = codes, numéros, mesures. Aucun tiret cadratin. */
@font-face{font-family:"Bricolage Grotesque";src:url(fonts/bricolage-grotesque.woff2) format("woff2");font-weight:700 800;font-stretch:84% 100%;font-display:swap}
@font-face{font-family:"Brico repli";src:local("Avenir Next Condensed"),local("Arial Narrow"),local("Arial");size-adjust:105%;ascent-override:93%;descent-override:27%;line-gap-override:0%}
@font-face{font-family:"Hanken Grotesk";src:url(fonts/hanken-grotesk.woff2) format("woff2");font-weight:400 700;font-display:swap}
@font-face{font-family:"Spline Sans Mono";src:url(fonts/spline-sans-mono.woff2) format("woff2");font-weight:400;font-display:swap}

:root{
  color-scheme:light;
  --navy:#0a1f33;--navy-2:#0e2a45;--navy-3:#143553;--beige:#ede6d8;--beige-2:#f6f1e7;--beige-3:#ddd2bc;--beige-4:#c9bca0;
  --ink-2:rgb(10 31 51/.74);--ink-3:rgb(10 31 51/.66);--line:rgb(10 31 51/.14);
  --on-2:rgb(237 230 216/.8);--on-3:rgb(237 230 216/.68);--on-line:rgb(237 230 216/.16);
  --vert:#23663e;--orange:#8f4d0c;--rouge:#b0372b;--gris:#6b7178;
  --vert-n:#7fd3a0;--orange-n:#f2b56b;--rouge-n:#f39a8f;--gris-n:#b7bcc2;
  --f-d:"Bricolage Grotesque","Brico repli",sans-serif;
  --f-b:"Hanken Grotesk",-apple-system,"Segoe UI",sans-serif;
  --f-m:"Spline Sans Mono",ui-monospace,Menlo,monospace;
  --ease:cubic-bezier(.16,1,.3,1);--rebond:cubic-bezier(.34,1.56,.64,1);
  --gut:clamp(16px,4vw,48px);--r:1.75rem;
}
*{box-sizing:border-box}
@media (max-width:760px){html{scroll-padding-bottom:96px}}
html:has(.onglets){scroll-padding-bottom:110px}
html{background:var(--beige);scroll-padding-top:96px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--beige);color:var(--navy);font:400 16px/1.6 var(--f-b);-webkit-font-smoothing:antialiased;min-height:100vh}
::selection{background:var(--navy);color:var(--beige)}
.on-navy ::selection{background:var(--beige);color:var(--navy)}
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:rgb(10 31 51/.26);border-radius:10px;border:2px solid var(--beige)}::-webkit-scrollbar-track{background:transparent}
a{color:inherit;text-underline-offset:3px;text-decoration-thickness:1px}
h1,h2,h3,h4{font-family:var(--f-d);font-weight:700;margin:0;text-wrap:balance;letter-spacing:-.02em}
p{margin:0}
ul,ol{margin:0;padding:0}
img{max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
input,textarea{caret-color:currentColor}
.mono{font-family:var(--f-m);font-variant-numeric:tabular-nums}
.num{font-variant-numeric:tabular-nums}
.w{max-width:1180px;margin-inline:auto;padding-inline:var(--gut)}
.w-s{max-width:760px;margin-inline:auto;padding-inline:var(--gut)}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px solid var(--navy);outline-offset:3px;border-radius:6px}
.on-navy :focus-visible{outline-color:var(--beige)}
[hidden]{display:none!important}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Bandeau d information */
.strip{background:var(--navy);color:var(--beige);font:500 13px/1.4 var(--f-m);padding:8px var(--gut);display:flex;gap:6px 16px;flex-wrap:wrap;justify-content:center;text-align:center}
.strip a{color:var(--beige)}
@media (max-width:520px){.strip{font-size:13px;padding:6px 12px}.strip .long{display:none}}

/* Marque : invite, TAP en gras, curseur plein */
.wm{display:inline-flex;align-items:center;font:500 18px/1 var(--f-m);letter-spacing:.02em;text-decoration:none;white-space:nowrap;color:inherit}
.wm b{font-weight:700}
.wm .p{opacity:.66;margin-right:.45ch}
.wm .c{display:inline-block;width:.55em;height:1.05em;background:currentColor;margin-left:.2ch;border-radius:1px;vertical-align:-.15em}
.m .wm .c{animation:clig 1.1s steps(1) infinite}
@keyframes clig{50%{opacity:0}}

/* Barre du haut en verre */
.hdr{position:sticky;top:calc(env(safe-area-inset-top,0px) + 10px);z-index:40;padding-inline:10px;margin-top:10px}
.nav{max-width:1180px;margin-inline:auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:7px 7px 7px 20px;border-radius:999px;
  background:linear-gradient(150deg,rgb(246 241 231/.86),rgb(246 241 231/.7));-webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);
  border:1px solid rgb(10 31 51/.13);box-shadow:inset 0 1.5px 0 rgb(255 255 255/.9),0 18px 40px -22px rgb(10 31 51/.32)}
.nav nav{display:flex;gap:2px;align-items:center}
.nav nav a{font-size:14.5px;font-weight:500;color:var(--ink-2);text-decoration:none;padding:10px 13px;border-radius:999px;transition:background .2s,color .2s}
.nav nav a:hover,.nav nav a[aria-current=page]{color:var(--navy);background:rgb(10 31 51/.07)}
.nav .cnx{font-weight:600;color:var(--navy)}
@media (max-width:820px){.nav nav a.opt{display:none}}
@media (prefers-reduced-transparency:reduce){.nav{background:var(--beige-2);-webkit-backdrop-filter:none;backdrop-filter:none}}

/* Boutons : pilules, un seul principal par écran */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font:600 16px/1.1 var(--f-b);padding:15px 26px;min-height:52px;border-radius:999px;border:0;background:var(--navy);color:var(--beige);cursor:pointer;text-decoration:none;text-align:center;transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .2s}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 28px -14px rgb(3 10 18/.55)}
.btn:active{transform:scale(.975)}
.btn[disabled]{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}
.on-navy .btn{background:var(--beige);color:var(--navy)}
.btn.full{width:100%}
.btn.ghost{background:transparent;color:var(--navy);box-shadow:inset 0 0 0 1.5px rgb(10 31 51/.32)}
.btn.ghost:hover{box-shadow:inset 0 0 0 1.5px var(--navy)}
.on-navy .btn.ghost{background:transparent;color:var(--beige);box-shadow:inset 0 0 0 1.5px rgb(237 230 216/.4)}
.on-navy .btn.ghost:hover{box-shadow:inset 0 0 0 1.5px var(--beige)}
.btn.sm{min-height:44px;padding:11px 18px;font-size:15px}
.btn svg{width:18px;height:18px;flex:none}
.lien{font:500 15px/1.4 var(--f-b);background:none;border:0;padding:12px 2px;min-height:44px;color:var(--ink-2);cursor:pointer;text-decoration:underline;text-decoration-color:rgb(10 31 51/.3);display:inline-flex;align-items:center;gap:6px}
.lien:hover{color:var(--navy);text-decoration-color:currentColor}
.on-navy .lien{color:var(--on-2);text-decoration-color:rgb(237 230 216/.35)}
.on-navy .lien:hover{color:var(--beige)}
.actions{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center}

/* Panneaux */
.navy{background:var(--navy);color:var(--beige)}
.panel{margin:12px;border-radius:2rem;padding:clamp(28px,5vw,72px) 0}
@media (max-width:520px){.panel{margin:8px;border-radius:1.6rem}}
.caus{position:relative;overflow:hidden;isolation:isolate}
.caus::before{content:"";position:absolute;inset:-35%;z-index:-1;pointer-events:none;background:radial-gradient(40% 32% at 28% 22%,rgb(64 120 170/.3),transparent 70%),radial-gradient(34% 30% at 76% 70%,rgb(46 96 142/.22),transparent 70%)}

@keyframes drift{from{transform:translate3d(-4%,-3%,0) scale(1)}to{transform:translate3d(4%,3%,0) scale(1.1)}}
.sec{padding:clamp(48px,8vw,104px) 0}
.sec-t{font-size:clamp(30px,4.6vw,52px);line-height:1.02;letter-spacing:-.03em;font-variation-settings:"wdth" 88;max-width:18ch}
.lead{font-size:clamp(17px,1.5vw,19px);line-height:1.55;color:var(--ink-2);max-width:56ch}
.on-navy .lead{color:var(--on-2)}
.muted{color:var(--ink-2)}
.on-navy .muted{color:var(--on-2)}
.small{font-size:14px;line-height:1.5}
.stack>*+*{margin-top:var(--s,16px)}

/* Repères de prix */
.av{display:inline-block;font:500 13px/1.35 var(--f-m);letter-spacing:.02em;padding:2px 7px;border-radius:6px;border:1px dashed currentColor;white-space:normal;overflow-wrap:anywhere;vertical-align:middle;opacity:.92;max-width:100%}
.ex{display:inline-flex;align-items:center;gap:6px;font:600 13px/1.2 var(--f-m);letter-spacing:.04em;text-transform:uppercase;padding:5px 9px;border-radius:999px;background:rgb(10 31 51/.08);color:var(--navy)}
.on-navy .ex{background:rgb(237 230 216/.14);color:var(--beige)}

/* Étiquette de code, carte-code, tampon */
.tag{display:inline-flex;align-items:center;gap:8px;font:500 13px/1 var(--f-m);letter-spacing:.08em;text-transform:uppercase;padding:8px 12px;border-radius:999px;border:1px solid var(--line);background:rgb(255 255 255/.45);white-space:nowrap}
.on-navy .tag{border-color:rgb(237 230 216/.26);background:rgb(255 255 255/.06)}
.unlocked{display:inline-block;font:800 clamp(22px,3vw,30px)/1 var(--f-d);letter-spacing:.08em;text-transform:uppercase;background:var(--beige);color:var(--navy);padding:13px 20px 11px;border-radius:8px;transform:rotate(-6deg);box-shadow:0 18px 34px -12px rgb(3 10 18/.7)}
.unlocked.marine{background:var(--navy);color:var(--beige)}

/* Voyants du Registre : couleur + mot, jamais la couleur seule */
.voy{display:inline-flex;align-items:center;gap:8px;font:600 13.5px/1 var(--f-b);white-space:nowrap}
.voy::before{content:"";width:11px;height:11px;border-radius:50%;background:var(--c);box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 22%,transparent)}
.voy.vert{--c:var(--vert)}.voy.orange{--c:var(--orange)}.voy.rouge{--c:var(--rouge)}.voy.gris{--c:var(--gris)}
.on-navy .voy.vert{--c:var(--vert-n)}.on-navy .voy.orange{--c:var(--orange-n)}.on-navy .voy.rouge{--c:var(--rouge-n)}.on-navy .voy.gris{--c:var(--gris-n)}

/* Champs */
.champ{display:grid;gap:8px}
.champ label,.lbl{font-weight:600;font-size:15px}
.inp{width:100%;min-height:52px;padding:14px 16px;font-size:18px;border-radius:14px;border:1.5px solid rgb(10 31 51/.28);background:#fffdf8;color:var(--navy);transition:border-color .2s,box-shadow .2s}
.inp:focus{border-color:var(--navy);box-shadow:0 0 0 4px rgb(10 31 51/.12)}
.inp:focus-visible{outline:3px solid var(--navy);outline-offset:2px}
.on-navy .inp:focus-visible{outline-color:var(--beige)}
.ctrl input:focus-visible,.opt input:focus-visible,input[type=range]:focus-visible{outline:3px solid var(--navy);outline-offset:3px}
.on-navy .ctrl input:focus-visible,.on-navy input[type=range]:focus-visible{outline-color:var(--beige)}
.inp::placeholder{color:rgb(10 31 51/.58)}
.on-navy .inp{background:rgb(3 10 18/.35);border-color:rgb(237 230 216/.3);color:var(--beige)}
.on-navy .inp:focus{border-color:var(--beige);box-shadow:0 0 0 4px rgb(237 230 216/.16)}
.on-navy .inp::placeholder{color:rgb(237 230 216/.62)}
.aide{font-size:14px;color:var(--ink-2)}
.on-navy .aide{color:var(--on-3)}
textarea.inp{min-height:150px;resize:vertical;font:400 15px/1.55 var(--f-m)}

/* Cases à cocher (contrôles) */
.ctrl{list-style:none;display:grid;gap:10px}
.ctrl label{display:grid;grid-template-columns:28px 1fr;gap:12px;align-items:start;padding:14px 16px;border-radius:16px;border:1.5px solid var(--line);background:rgb(255 255 255/.5);cursor:pointer;transition:border-color .2s,background .2s}
.ctrl input{appearance:none;-webkit-appearance:none;margin:2px 0 0;width:26px;height:26px;border-radius:8px;border:2px solid rgb(10 31 51/.45);background:#fffdf8;display:grid;place-items:center;cursor:pointer;transition:background .2s,border-color .2s}
.ctrl input::after{content:"";width:12px;height:7px;border:2.5px solid var(--beige);border-top:0;border-right:0;transform:translateY(-2px) rotate(-45deg) scale(.4);opacity:0;transition:transform .3s var(--ease),opacity .2s}
.ctrl input:checked{background:var(--navy);border-color:var(--navy)}
.ctrl input:checked::after{opacity:1;transform:translateY(-2px) rotate(-45deg) scale(1)}
.ctrl label:has(input:checked){border-color:var(--navy);background:#fffdf8}
.ctrl b{display:block;font-weight:700}
.ctrl span span{display:block;color:var(--ink-2);font-size:15px;margin-top:2px}
.on-navy .ctrl label{border-color:rgb(237 230 216/.2);background:rgb(255 255 255/.04)}
.on-navy .ctrl input{border-color:rgb(237 230 216/.55);background:transparent}
.on-navy .ctrl input::after{border-color:var(--navy)}
.on-navy .ctrl input:checked{background:var(--beige);border-color:var(--beige)}
.on-navy .ctrl label:has(input:checked){border-color:var(--beige);background:rgb(255 255 255/.08)}
.on-navy .ctrl span span{color:var(--on-3)}

/* Puces de choix */
.puces{display:flex;flex-wrap:wrap;gap:8px}
.puce{min-height:44px;padding:10px 16px;border-radius:999px;border:1.5px solid var(--line);background:rgb(255 255 255/.4);font:500 15px/1.2 var(--f-b);cursor:pointer;color:var(--navy);transition:background .2s,border-color .2s,color .2s}
.puce:hover{border-color:rgb(10 31 51/.4)}
.puce[aria-pressed=true],.puce[aria-checked=true]{background:var(--navy);border-color:var(--navy);color:var(--beige)}
.on-navy .puce{border-color:rgb(237 230 216/.28);background:transparent;color:var(--beige)}
.on-navy .puce:hover{border-color:rgb(237 230 216/.6)}
.on-navy .puce[aria-pressed=true],.on-navy .puce[aria-checked=true]{background:var(--beige);color:var(--navy);border-color:var(--beige)}

/* Surfaces de lecture */
.feuille{background:var(--beige-2);border:1px solid var(--line);border-radius:22px;padding:clamp(18px,2.6vw,28px)}
.on-navy .feuille{background:rgb(255 255 255/.05);border-color:var(--on-line)}
.verre{background:linear-gradient(140deg,rgb(255 255 255/.14),rgb(255 255 255/.04));-webkit-backdrop-filter:blur(22px) saturate(150%);backdrop-filter:blur(22px) saturate(150%);border:1px solid rgb(237 230 216/.22);box-shadow:inset 0 1px 0 rgb(255 255 255/.24),0 28px 56px -22px rgb(3 10 18/.6)}
.verre-c{background:linear-gradient(150deg,rgb(255 255 255/.66),rgb(255 255 255/.3) 60%,rgb(10 31 51/.04));-webkit-backdrop-filter:blur(14px) saturate(130%);backdrop-filter:blur(14px) saturate(130%);border:1px solid rgb(10 31 51/.14);box-shadow:inset 0 1.5px 0 rgb(255 255 255/.9),0 20px 44px -20px rgb(10 31 51/.3)}
.sep{border:0;border-top:1px solid var(--line);margin:0}
.on-navy .sep{border-top-color:var(--on-line)}
.pre{font:400 14px/1.6 var(--f-m);white-space:pre-wrap;overflow-wrap:anywhere;margin:0}
.pre mark{background:var(--beige);color:var(--navy);border-radius:4px;padding:0 3px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
details>summary{cursor:pointer;list-style:none;min-height:44px;display:flex;align-items:center;gap:10px;font-weight:600}
details>summary::-webkit-details-marker{display:none}
details>summary::before{content:"";width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);transition:transform .25s var(--ease);flex:none;margin-left:2px}
details[open]>summary::before{transform:rotate(45deg)}

/* Tableaux de données */
.tbl{width:100%;border-collapse:collapse;font-size:15px}
.tbl th{text-align:left;font:600 13px/1.3 var(--f-m);letter-spacing:.04em;color:var(--ink-2);padding:10px 12px;border-bottom:1.5px solid rgb(10 31 51/.22)}
.tbl td{padding:14px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.tbl tr:hover td{background:rgb(255 255 255/.35)}
.tbl .r{text-align:right}

/* Barre d'action du bas (verre), mobile */
.basbar{position:fixed;left:10px;right:10px;bottom:calc(env(safe-area-inset-bottom,0px) + 10px);z-index:45;border-radius:999px;padding:7px;display:none;
  background:linear-gradient(150deg,rgb(14 42 69/.86),rgb(10 31 51/.8));-webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%);border:1px solid rgb(237 230 216/.2);box-shadow:0 18px 40px -16px rgb(3 10 18/.6);transform:translateY(130%);transition:transform .45s var(--ease)}
.basbar.on{transform:none}
.basbar .btn{width:100%;background:var(--beige);color:var(--navy);min-height:50px}
@media (max-width:760px){.basbar{display:block}}

/* Toast */
.toast{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 84px);transform:translate(-50%,20px);opacity:0;z-index:60;background:var(--navy);color:var(--beige);padding:13px 18px;border-radius:14px;font-weight:600;font-size:15px;box-shadow:0 18px 40px -14px rgb(3 10 18/.6);transition:opacity .25s,transform .35s var(--ease);max-width:calc(100vw - 32px);pointer-events:none}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* Pied de page */
.pied{padding:44px 0 calc(env(safe-area-inset-bottom,0px) + 96px);font-size:14px;color:var(--ink-2)}
.pied .w{display:grid;gap:14px}
.pied nav{display:flex;flex-wrap:wrap;gap:4px 18px}
.pied nav a{color:var(--navy);text-decoration:none;font-weight:500;min-height:44px;display:inline-flex;align-items:center}
.pied nav a:hover{text-decoration:underline}

/* Onglets de l'espace membre */
.onglets{position:fixed;left:10px;right:10px;bottom:calc(env(safe-area-inset-bottom,0px) + 10px);z-index:45;display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:6px;border-radius:24px;
  background:linear-gradient(150deg,rgb(246 241 231/.9),rgb(246 241 231/.78));-webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);border:1px solid rgb(10 31 51/.14);box-shadow:inset 0 1.5px 0 rgb(255 255 255/.9),0 18px 40px -20px rgb(10 31 51/.4);max-width:520px;margin-inline:auto}
.onglets a{display:grid;justify-items:center;gap:3px;padding:8px 4px;border-radius:18px;text-decoration:none;font:600 13px/1.2 var(--f-b);color:var(--ink-2);min-height:52px}
.onglets a svg{width:22px;height:22px}
.onglets a[aria-current=page]{background:var(--navy);color:var(--beige)}

/* Animations : une seule entrée, depuis un état déjà visible */
.m .apparait{animation:ap .7s var(--ease) both}
@keyframes ap{from{opacity:.001;transform:translateY(10px)}}

/* ===== TAPCODE Équipe : sobre, sans jeu ===== */
.tl{list-style:none;display:grid;border-top:1px solid var(--line)}
.tl li a{display:grid;gap:6px;padding:14px 2px;border-bottom:1px solid var(--line);text-decoration:none}
.tl li a:hover .tl-t{text-decoration:underline}
.tl-t{font-weight:600;font-size:16.5px;line-height:1.35}
.tl-m{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;font-size:13.5px;color:var(--ink-2)}
.tl-m .mono{font-size:13px}
.on-navy .tl{border-top-color:var(--on-line)}.on-navy .tl li a{border-bottom-color:var(--on-line)}.on-navy .tl-m{color:var(--on-3)}
.parcours{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;padding:2px;margin:0;list-style:none}
.parcours::-webkit-scrollbar{display:none}
.parcours li{flex:none}
.parcours a,.parcours span{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 14px;border-radius:999px;font:500 14px/1 var(--f-b);text-decoration:none;color:var(--ink-2);white-space:nowrap}
.parcours a:hover{background:rgb(10 31 51/.06);color:var(--navy)}
.parcours i{font:600 13px/1 var(--f-m);font-style:normal;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;border:1.5px solid currentColor}
.parcours [aria-current=step]{background:var(--navy);color:var(--beige)}
.parcours .fait i{background:var(--navy);color:var(--beige);border-color:var(--navy)}
.eq-h{padding:clamp(22px,4vw,48px) 0 clamp(20px,3vw,36px)}
.eq-h h1{font-size:clamp(36px,6vw,76px);line-height:.95;letter-spacing:-.035em;font-variation-settings:"wdth" 86;font-weight:800;margin-top:18px;max-width:17ch}
.eq-h .lead{margin-top:16px}
.fictif{display:inline-flex;align-items:center;gap:8px;font:600 13px/1.2 var(--f-m);padding:6px 11px;border-radius:999px;border:1.5px dashed currentColor}
.chiffre{font:800 clamp(40px,7vw,84px)/.95 var(--f-d);letter-spacing:-.04em;font-variation-settings:"wdth" 86}
.barre{height:12px;border-radius:6px;background:rgb(10 31 51/.1);overflow:hidden}
.barre i{display:block;height:100%;background:var(--navy);border-radius:6px}
.on-navy .barre{background:rgb(237 230 216/.14)}.on-navy .barre i{background:var(--beige)}
.prix-l{font:500 15px/1.5 var(--f-m)}
.chiffre+.prix-l{margin-left:.4ch}
.deux{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(22px,4vw,56px)}
@media (max-width:860px){.deux{grid-template-columns:1fr}}

/* Coche dessinée (série en semaines) */
.semaines i.on::after,.grille i.on::after{content:"";width:40%;height:22%;border:2.2px solid currentColor;border-top:0;border-right:0;transform:translateY(-15%) rotate(-45deg)}
.grille i.on{color:var(--navy)}
@media (max-width:520px){.pied{padding-top:32px;font-size:13.5px}.pied nav{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}.pied .w{gap:10px}}
@media (max-width:520px){.sec{padding:40px 0}}

.pastille{font:600 13px/1 var(--f-m);padding:4px 7px;border-radius:999px;background:var(--beige-3);color:var(--navy);white-space:nowrap}

/* ===== Mouvement de marque (transform et opacity seulement ; rien sans .m, donc rien sous prefers-reduced-motion) ===== */
/* Volet : l'ancien texte sort par le haut, le nouveau entre par le bas (aucun chiffre intermédiaire). */
.volet{display:inline-grid;overflow:clip;vertical-align:baseline}
.volet>span{grid-area:1/1;display:inline-flex;white-space:nowrap}
.volet>span>span{display:inline-block}
.m .volet .entre>span{animation:vol-in .5s var(--ease) both;animation-delay:calc(var(--k)*50ms + 80ms)}
.m .volet .vol-a>span{animation:vol-out .2s cubic-bezier(.4,0,1,1) both;animation-delay:calc(var(--k)*20ms)}
@keyframes vol-in{from{opacity:0;transform:translateY(.9em)}}
@keyframes vol-out{to{opacity:0;transform:translateY(-.9em)}}
@keyframes efface{to{opacity:0}}
/* Apparition au défilement : visible sans JS ; seulement armé par le script quand le mouvement est permis. */
.m .arme[data-revele]{opacity:0;transform:translateY(14px)}
.m .arme[data-revele].vu{opacity:1;transform:none;transition:opacity .6s var(--ease),transform .7s var(--ease);transition-delay:var(--retard,0s)}
/* Appui : micro-réaction au doigt et au clic. */
.btn,.puce,.cp,.porte{-webkit-tap-highlight-color:transparent}
.puce:active,.cp:active,.porte:active{transform:scale(.97);transition:transform .12s}
/* Transitions entre pages (navigateurs qui savent le faire), la barre du haut reste en place. */
@view-transition{navigation:auto}
.hdr{view-transition-name:barre}
::view-transition-old(root){animation:vt-sort .16s cubic-bezier(.4,0,1,1) both}
::view-transition-new(root){animation:vt-entre .26s var(--ease) .06s both}
::view-transition-group(recap){animation-duration:.45s;animation-timing-function:var(--ease)}
@keyframes vt-sort{to{opacity:0;transform:translateY(-8px)}}
@keyframes vt-entre{from{opacity:0;transform:translateY(12px)}}
@media (prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}

/* ===== 06-ui et 05-motion : matière, touche, bascule, curseur ===== */
:root{
  --arete:inset 0 1px 0 rgb(255 255 255/.85);
  --ombre-beige:0 1px 2px rgb(10 31 51/.08),0 8px 16px -6px rgb(10 31 51/.14),0 28px 48px -26px rgb(10 31 51/.30);
  --ombre-marine:inset 0 1px 0 rgb(237 230 216/.22),inset 0 0 0 1px rgb(237 230 216/.06),0 2px 4px rgb(3 10 18/.2),0 18px 32px -12px rgb(3 10 18/.45),0 44px 70px -34px rgb(3 10 18/.7);
}
/* Grain de papier, statique, sur les surfaces marine (une image SVG intégrée, aucune requête). */
.caus::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.07;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .93 0 0 0 0 .9 0 0 0 0 .85 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
@media (prefers-reduced-transparency:reduce){.caus::after{display:none}}
/* Le bouton s'enfonce comme une touche de clavier : au doigt comme à la souris. */
.btn{touch-action:manipulation}
.btn:active{transform:translateY(2px);box-shadow:0 4px 10px -8px rgb(3 10 18/.5);transition-duration:90ms}
@media (hover:none){.btn:hover{transform:none;box-shadow:none}}
/* Curseur de saisie en bloc, comme un terminal (navigateurs qui le savent). */
input,textarea{caret-shape:block}

/* Frappe de marque : chaque lettre apparaît d'un coup, comme tapée (steps), sans glisser. */
.m .arme-frappe .c{opacity:0}
.m .frappe .c{animation:lettre 1ms linear both}
@keyframes lettre{from{opacity:0}to{opacity:1}}
/* Surlignage de marque : le beige s'étale de gauche à droite derrière le mot (transform). */
mark.sur{position:relative;isolation:isolate;background:none;color:var(--navy);padding:0 .08em;white-space:nowrap}
mark.sur::before{content:"";position:absolute;inset:.06em -.02em -.02em;z-index:-1;background:var(--beige);border-radius:.08em;transform-origin:left;transform:scaleX(1)}
.on-navy mark.sur{color:var(--navy)}
.m .arme-frappe mark.sur::before{transform:scaleX(0)}
.m .arme-frappe mark.sur{color:inherit}
.m .arme-frappe mark.sur .c{color:var(--beige)}
.m .tape-fini mark.sur::before{transform:scaleX(1);transition:transform .3s linear}
.m .tape-fini mark.sur,.m .tape-fini mark.sur .c{color:var(--navy);transition:color 0s linear var(--dc,0s)}
/* Titres de section : affichés d'un coup ; seul le mot clé se surligne quand il arrive à l'écran. */
.m .arme-sur mark.sur::before{transform:scaleX(0)}
.m .sur-vu mark.sur::before{transform:scaleX(1);transition:transform .32s var(--ease) .1s}
:not(.on-navy)>* mark.sur::before,:not(.on-navy) mark.sur::before{background:var(--beige-3)}
.on-navy mark.sur::before{background:var(--beige)}

.un-curseur .m .wm .c,.m.un-curseur .wm .c{animation:none}
/* Barre du haut : verre plus dense, le texte dessous ne se lit plus. */
.nav{background:linear-gradient(150deg,rgb(246 241 231/.97),rgb(246 241 231/.94));-webkit-backdrop-filter:blur(24px) saturate(140%);backdrop-filter:blur(24px) saturate(140%)}
/* Effacement puis frappe d'un prix */
.m .efface>span{animation:efface 1ms linear both;animation-delay:calc((var(--n) - var(--k))*28ms)}
.m .tape-prix>span{animation:lettre 1ms linear both;animation-delay:calc(var(--k)*55ms)}
.curs-prix{display:inline-block;width:.42em;height:.72em;margin-left:.06em;background:currentColor;border-radius:2px;vertical-align:-.02em}

.m mark.sur.redessine::before{animation:redessine .34s var(--ease) both}
@keyframes redessine{0%{transform:scaleX(0)}100%{transform:scaleX(1)}}