/* TAPCODE : pages cadeaux, offre, liste des cadeaux, pages légales, guides et espace membre. Mêmes teintes que l'accueil :
   marine et beige, la lumière remplace la couleur. */
:root{
  color-scheme:light;
  --navy:#0a1f33;--navy-2:#0e2a45;--beige:#ede6d8;--beige-2:#f6f1e7;--beige-3:#ddd2bc;
  --f-d:"Bricolage Grotesque","Avenir Next Condensed","Arial Narrow",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);
  --gut:clamp(16px,4vw,48px);
}
*{box-sizing:border-box}
html{background:var(--beige)}
body{margin:0;background:var(--beige);color:var(--navy);font-family:var(--f-b);font-size:16px;line-height:1.625;-webkit-font-smoothing:antialiased;overflow-x:hidden}
::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/.28);border-radius:10px;border:2px solid var(--beige)}::-webkit-scrollbar-track{background:transparent}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important}}
a{color:inherit;text-underline-offset:3px}
h1,h2,h3{font-family:var(--f-d);font-weight:700;margin:0;text-wrap:balance;letter-spacing:-.02em}
p{margin:0}
:focus-visible{outline:2px solid var(--navy);outline-offset:3px;border-radius:4px}
.on-navy :focus-visible{outline-color:var(--beige)}
.w{max-width:1180px;margin-inline:auto;padding-inline:var(--gut)}
.etroit{max-width:820px}
.lab{font-family:var(--f-m);font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase}
.todo{border-bottom:1px dashed currentColor;opacity:.85}

/* En-tête */
.hdr{padding:12px 12px 0}
.nav{max-width:1180px;margin-inline:auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 8px 8px 20px;border-radius:999px;background:var(--beige-2);border:1px solid rgb(10 31 51/.14)}
.wm{display:inline-flex;align-items:center;gap:.32em;font-family:var(--f-d);font-weight:800;font-size:18px;letter-spacing:-.01em;text-transform:uppercase;text-decoration:none;white-space:nowrap}
.wm-p{font:500 .86em var(--f-m);opacity:.6}
.wm-c{display:inline-block;width:.5em;height:.95em;background:currentColor;margin-left:.08em;border-radius:1px}
.nav nav{display:flex;gap:2px;align-items:center}
.nav nav a{font-size:14px;font-weight:500;color:rgb(10 31 51/.7);text-decoration:none;padding:8px 12px;border-radius:999px}
.nav nav a:hover{background:rgb(10 31 51/.06);color:var(--navy)}
@media (max-width:560px){.nav{border-radius:1.25rem;padding-left:14px}.nav nav a.secondaire{display:none}}
@media (max-width:440px){.wm{font-size:15px}.nav nav a:not(.btn){display:none}}

/* Boutons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font:600 15px/1 var(--f-b);padding:15px 26px;min-height:50px;border-radius:999px;border:0;background:var(--navy);color:var(--beige);cursor:pointer;text-decoration:none;transition:transform .3s var(--ease)}
.btn:hover{transform:scale(1.03)}
.btn.sm{padding:11px 18px;min-height:42px;font-size:14px}
.on-navy .btn{background:var(--beige);color:var(--navy)}
.btn.contour{background:transparent;color:inherit;border:1px solid currentColor}
.on-navy .btn.contour{background:transparent;color:var(--beige)}
button[disabled]{opacity:.55;cursor:wait}

/* Panneau marine */
.panneau{margin:12px;border-radius:2rem;background:var(--navy);color:var(--beige);padding:clamp(24px,5vw,56px) 0}
.panneau .sub{color:rgb(237 230 216/.75);max-width:62ch}
.panneau h1{font-size:clamp(2.1rem,5.2vw,3.8rem);line-height:1.02;margin:10px 0 14px;max-width:22ch}
.panneau h2{font-size:clamp(1.7rem,3.6vw,2.6rem);line-height:1.05;margin:8px 0 12px}
.rang{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:22px}

/* Contenu du cadeau */
.contenu{margin-top:26px;border-radius:1.25rem;background:rgb(255 255 255/.06);border:1px solid rgb(237 230 216/.16)}
.contenu .barre{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 18px;border-bottom:1px solid rgb(237 230 216/.14);font:12.5px var(--f-m);color:rgb(237 230 216/.7)}
pre{margin:0;white-space:pre-wrap;word-break:break-word;font:13px/1.65 var(--f-m);padding:18px;overflow-x:auto}
.contenu pre{max-height:min(70vh,640px);overflow:auto;color:var(--beige)}
details.fichier{margin-top:12px;border-radius:1.25rem;border:1px solid rgb(237 230 216/.16)}
details.fichier summary{cursor:pointer;padding:14px 18px;font:500 13.5px var(--f-m);list-style:none;display:flex;justify-content:space-between;gap:12px}
details.fichier summary::after{content:"+";opacity:.7}
details.fichier[open] summary::after{content:"−"}
details.fichier .rang{margin:0;padding:0 18px 14px}

/* Sections claires */
.sec{padding:clamp(36px,6vw,72px) 0}
.sec h2{font-size:clamp(1.6rem,3.2vw,2.3rem);line-height:1.08;margin-bottom:16px}
.prose{max-width:68ch;color:rgb(10 31 51/.82)}
.prose > * + *{margin-top:14px}
.prose h2{margin-top:36px;font-size:clamp(1.35rem,2.6vw,1.75rem)}
.prose h3{margin-top:26px;font-size:1.15rem}
.prose code{font:13.5px var(--f-m);background:rgb(10 31 51/.07);padding:1px 6px;border-radius:6px}
.prose pre{background:var(--beige-2);border:1px solid rgb(10 31 51/.12);border-radius:1rem}
.prose ul,.prose ol{padding-left:22px}
.prose li + li{margin-top:6px}
.prose table{border-collapse:collapse;width:100%;font-size:14.5px;display:block;overflow-x:auto}
.prose th,.prose td{border:1px solid rgb(10 31 51/.15);padding:8px 10px;text-align:left;vertical-align:top}
.petit{font-size:13.5px;color:rgb(10 31 51/.6)}

/* Formulaire */
.carte{border-radius:1.5rem;background:var(--beige-2);border:1px solid rgb(10 31 51/.14);padding:clamp(20px,4vw,32px);display:grid;gap:14px;max-width:640px}
.carte h2{margin:0;font-size:clamp(1.4rem,3vw,1.9rem)}
.champ{display:flex;gap:10px;flex-wrap:wrap}
input[type=email]{font:500 16px var(--f-b);padding:12px 18px;border:1px solid rgb(10 31 51/.25);background:#fff;color:var(--navy);border-radius:999px;min-width:0;flex:1 1 220px}
.cgv{display:grid;grid-template-columns:20px 1fr;gap:10px;font-size:14px;color:rgb(10 31 51/.78);align-items:start}
.cgv input{margin-top:4px;width:17px;height:17px;accent-color:var(--navy)}
.cgv em{font-style:normal;opacity:.7}
.ts:not(:empty){min-height:65px}
.ok{font:13px var(--f-m);min-height:1.2em}
.ok[data-etat=erreur]{color:#9a2a1a}
.notice{font-size:12.5px;line-height:1.55;color:rgb(10 31 51/.62)}

/* Grille des cadeaux */
.grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;margin-top:24px}
.cadeau{display:grid;gap:6px;padding:20px;border-radius:1.25rem;background:var(--beige-2);border:1px solid rgb(10 31 51/.14);text-decoration:none;transition:transform .3s var(--ease)}
.cadeau:hover{transform:translateY(-2px)}
.cadeau .lab{color:rgb(10 31 51/.55)}
.cadeau strong{font-family:var(--f-d);font-size:19px;line-height:1.2}
.cadeau span:last-child{font-size:14px;color:rgb(10 31 51/.7)}
.on-navy .cadeau{background:rgb(255 255 255/.06);border-color:rgb(237 230 216/.16)}
.on-navy .cadeau .lab,.on-navy .cadeau span:last-child{color:rgb(237 230 216/.7)}

/* Pied */
footer{padding:40px 0 48px;font-size:13.5px;color:rgb(10 31 51/.62)}
footer .w{display:grid;gap:10px}
footer nav{display:flex;flex-wrap:wrap;gap:8px 16px}
footer a{color:rgb(10 31 51/.75);text-decoration:none}
footer a:hover{text-decoration:underline}
.nav nav a.btn{color:var(--beige);background:var(--navy);margin-left:4px}
.nav nav a.btn:hover{background:var(--navy-2);color:var(--beige)}

/* Espace membre */
.sortie{margin:0}
.onglets{max-width:1180px;margin:12px auto 0;padding:0 12px;display:flex;flex-wrap:wrap;gap:6px}
.onglets a{font-size:14px;font-weight:500;color:rgb(10 31 51/.7);text-decoration:none;padding:8px 14px;border-radius:999px;border:1px solid rgb(10 31 51/.14);background:var(--beige-2)}
.onglets a[aria-current=page]{background:var(--navy);color:var(--beige);border-color:var(--navy)}
.t-page{font-size:clamp(1.9rem,4.4vw,3rem);line-height:1.05;margin:8px 0 12px}
.sec .lab{color:rgb(10 31 51/.55)}
.intro{max-width:62ch;color:rgb(10 31 51/.78);margin-bottom:8px}
.vide{margin-top:18px;padding:22px;border-radius:1.25rem;border:1px dashed rgb(10 31 51/.25);color:rgb(10 31 51/.7)}
.tuiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:12px;margin-top:24px}
.tuile{display:grid;gap:6px;align-content:start;padding:20px;border-radius:1.25rem;background:var(--beige-2);border:1px solid rgb(10 31 51/.14);min-width:0}
.tuile strong{font-family:var(--f-d);font-size:21px;line-height:1.2}
.tuile span:last-child,.tuile a{font-size:14px;color:rgb(10 31 51/.72)}
.jauge{height:6px;border-radius:6px;background:rgb(10 31 51/.1);overflow:hidden;margin-top:6px}
.jauge i{display:block;height:100%;background:var(--navy)}
.liste{list-style:none;margin:20px 0 0;padding:0;border-top:1px solid rgb(10 31 51/.14)}
.ligne{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 24px;padding:18px 4px;border-bottom:1px solid rgb(10 31 51/.14)}
.ligne > div{display:grid;gap:4px;min-width:0;flex:1 1 280px}
.ligne strong{font-family:var(--f-d);font-size:19px;line-height:1.2}
.ligne > div > span:last-child{font-size:14.5px;color:rgb(10 31 51/.7)}
.ligne.fermee strong{opacity:.6}
.verrou-t{font:12.5px var(--f-m);color:rgb(10 31 51/.6)}
.lien-retour{font-size:14px;color:rgb(10 31 51/.7);text-decoration:none}
.lecon{margin-top:28px;padding-top:22px;border-top:1px solid rgb(10 31 51/.14);display:grid;gap:14px}
.lecon-t{display:flex;gap:12px;align-items:center}
.fait{font:500 12px var(--f-m);background:var(--navy);color:var(--beige);padding:3px 10px;border-radius:999px}
.t-cat{margin-top:30px}
details.prompt{margin-top:12px;border-radius:1.25rem;border:1px solid rgb(10 31 51/.14);background:var(--beige-2);padding:0 18px}
details.prompt summary{cursor:pointer;padding:16px 0;font-weight:600}
details.prompt .prose{padding-bottom:12px}
details.prompt .rang{margin:0 0 16px}
.etapes-p{margin:22px 0;padding-left:22px;display:grid;gap:26px;max-width:72ch}
.etapes-p h2{font-size:1.25rem;margin-bottom:6px}
.etapes-p p{color:rgb(10 31 51/.8);margin-bottom:10px}
.cmd{background:var(--navy);color:var(--beige);border-radius:1rem;margin:8px 0}
.depot{margin-top:12px}
.etapes-p code,.carte code{font:13px var(--f-m);background:rgb(10 31 51/.07);padding:1px 6px;border-radius:6px;word-break:break-word}
input[type=text]{font:500 16px var(--f-b);padding:12px 18px;border:1px solid rgb(10 31 51/.25);background:#fff;color:var(--navy);border-radius:999px;min-width:0;flex:1 1 220px}
.infos{margin:20px 0;display:grid;gap:0;max-width:640px;border-top:1px solid rgb(10 31 51/.14)}
.infos > div{display:grid;grid-template-columns:minmax(0,160px) minmax(0,1fr);gap:12px;padding:12px 0;border-bottom:1px solid rgb(10 31 51/.14)}
.infos dt{font:500 11px var(--f-m);letter-spacing:.14em;text-transform:uppercase;color:rgb(10 31 51/.55);padding-top:4px}
.infos dd{margin:0;overflow-wrap:anywhere}
.carte + .petit,.infos + .carte{margin-top:18px}
.carte > p{color:rgb(10 31 51/.8)}
.bandeau-projet{max-width:68ch;margin:0 0 28px;padding:14px 16px;border:1px solid rgb(10 31 51/.35);border-radius:10px;background:rgb(10 31 51/.04);font-size:14.5px;line-height:1.55;color:rgb(10 31 51/.85)}

/* ---------- Grammaire « cheat code » ---------- */
/* Étiquette de code : CODE #03 en mono majuscules dans une pilule de verre clair. */
.tag-code{display:inline-flex;align-items:center;gap:8px;font:500 12px/1 var(--f-m);letter-spacing:.12em;text-transform:uppercase;padding:8px 12px;border-radius:999px;background:linear-gradient(150deg,rgb(255 255 255/.62),rgb(255 255 255/.3));border:1px solid rgb(10 31 51/.16);box-shadow:inset 0 1px 0 rgb(255 255 255/.9);color:var(--navy);white-space:nowrap}
.on-navy .tag-code{background:linear-gradient(135deg,rgb(255 255 255/.16),rgb(255 255 255/.05));border-color:rgb(237 230 216/.28);box-shadow:inset 0 1px 0 rgb(255 255 255/.25);color:var(--beige)}
.tag-code b{font-weight:500;opacity:.6}
/* Tampon UNLOCKED : pavé beige plein, texte marine, légèrement incliné. Seulement après la relecture. */
.unlocked{display:inline-block;font:800 15px/1 var(--f-d);letter-spacing:.08em;text-transform:uppercase;background:var(--beige);color:var(--navy);padding:9px 14px 8px;border-radius:6px;transform:rotate(-5deg);box-shadow:0 10px 24px -10px rgb(3 10 18/.6)}
.clair .unlocked,.unlocked.marine{background:var(--navy);color:var(--beige)}
/* Barre de niveau : 5 segments de verre ; atteints en beige plein, en cours à 40 %. */
.niv-barre{display:grid;gap:7px;min-width:0}
.niv-nom{font:500 11.5px var(--f-m);letter-spacing:.14em;text-transform:uppercase}
.niv-seg{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;max-width:260px}
.niv-seg i{height:9px;border-radius:3px;border:1px solid rgb(10 31 51/.22);background:rgb(255 255 255/.4)}
.niv-seg i.plein{background:var(--navy);border-color:var(--navy)}
.niv-seg i.courant{background:rgb(10 31 51/.4);border-color:rgb(10 31 51/.4)}
.on-navy .niv-seg i{border-color:rgb(237 230 216/.28);background:rgb(255 255 255/.05)}
.on-navy .niv-seg i.plein{background:var(--beige);border-color:var(--beige)}
.on-navy .niv-seg i.courant{background:rgb(237 230 216/.4);border-color:rgb(237 230 216/.4)}
/* Marqueur de texte provisoire. */
.a-valider{display:inline-block;font:500 11px/1.4 var(--f-m);letter-spacing:.06em;padding:2px 7px;border-radius:5px;border:1px dashed currentColor;opacity:.8;white-space:nowrap;vertical-align:middle}
/* Invite de commande « > » */
.invite{font-family:var(--f-m);opacity:.6;margin-right:.6ch;user-select:none}

/* Page cadeau */
.cad-tete{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.cad-tete .pub{font:500 12px var(--f-m);color:rgb(237 230 216/.62)}
.contenu.console{background:linear-gradient(135deg,rgb(255 255 255/.1),rgb(255 255 255/.03));border-color:rgb(237 230 216/.22);box-shadow:inset 0 1px 0 rgb(255 255 255/.2),0 28px 56px -24px rgb(3 10 18/.7)}
.console .barre{align-items:center}
.console .barre .pts{display:inline-flex;gap:6px}.console .barre .pts i{width:9px;height:9px;border-radius:50%;border:1px solid rgb(237 230 216/.4)}
.voisins{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:28px}
.voisins a{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-size:14.5px;color:rgb(237 230 216/.8);padding:6px 0}
.voisins a:hover{color:var(--beige)}
.controles-fin{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;margin-top:22px;padding:18px 20px;border-radius:1.25rem;border:1px solid rgb(10 31 51/.16);background:var(--beige-2);max-width:68ch}
.controles-fin p{color:rgb(10 31 51/.8);flex:1 1 260px}

/* Liste des cadeaux */
.groupe + .groupe{margin-top:48px}
.groupe > p{color:rgb(10 31 51/.7);max-width:62ch}
.cadeau .tag-code{justify-self:start;padding:6px 10px;font-size:11px}
.cadeau{align-content:start}

/* Page offre */
.niveaux{display:grid;gap:12px;margin-top:8px}
.niveau{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:18px 40px;padding:clamp(22px,4vw,36px);border-radius:1.75rem;background:var(--beige-2);border:1px solid rgb(10 31 51/.14);scroll-margin-top:24px}
.niveau.on-navy{background:var(--navy);color:var(--beige);border-color:var(--navy)}
.niveau h2{font-size:clamp(2rem,4vw,3rem);line-height:1;letter-spacing:-.03em;margin:12px 0 10px}
.niveau .prix{font:500 15px/1.5 var(--f-m);font-variant-numeric:tabular-nums}
.niveau .prix b{font:700 clamp(1.6rem,3vw,2.2rem)/1.1 var(--f-d);letter-spacing:-.02em;display:block}
.niveau .pour{margin-top:12px;opacity:.78}
.niveau dl{margin:0;display:grid;gap:0}
.niveau dl > div{padding:14px 0;border-bottom:1px solid rgb(10 31 51/.12)}
.niveau.on-navy dl > div{border-color:rgb(237 230 216/.14)}
.niveau dl > div:first-child{padding-top:0}
.niveau dt{font:500 11px var(--f-m);letter-spacing:.14em;text-transform:uppercase;opacity:.6}
.niveau dd{margin:6px 0 0}
.niveau ul{margin:6px 0 0;padding-left:18px}
.niveau li + li{margin-top:4px}
.niveau .rang{margin-top:18px}
@media (max-width:820px){.niveau{grid-template-columns:1fr}}
.tab-p{width:100%;border-collapse:collapse;font-size:15px}
.tab-p th,.tab-p td{text-align:left;padding:12px 8px;border-bottom:1px solid rgb(10 31 51/.13);vertical-align:baseline}
.tab-p th{font:500 11px var(--f-m);letter-spacing:.14em;text-transform:uppercase;color:rgb(10 31 51/.55)}
.tab-p td.n,.tab-p td.px{font:500 13.5px var(--f-m);white-space:nowrap;font-variant-numeric:tabular-nums}
.tab-p td.st{font-size:13.5px;color:rgb(10 31 51/.65);white-space:nowrap}
.tab-p tr.venir td:not(.st){color:rgb(10 31 51/.6)}
@media (max-width:640px){.tab-p thead{display:none}.tab-p tr{display:grid;grid-template-columns:auto 1fr auto;gap:2px 12px;padding:12px 0;border-bottom:1px solid rgb(10 31 51/.13)}.tab-p td{border:0;padding:0}.tab-p td.titre{grid-column:2}.tab-p td.st{grid-column:2;grid-row:2}}
.encart{margin-top:18px;padding:18px 20px;border-radius:1.25rem;border:1px solid rgb(10 31 51/.16);max-width:76ch;color:rgb(10 31 51/.82)}
.t-groupe{font-size:clamp(1.3rem,2.4vw,1.7rem);margin-bottom:6px}
@media (max-width:520px){.console .barre .pts{display:none}}