/* Nakama : première impression (audit du 04/11/2026), dans l'habillage « Hebdo ».
   Feuille à part, chargée après app.css et mouvements.css : premier lancement guidé, attente de
   l'ouverture, cadeau reçu qui mène à l'action, bilan qui montre le progrès, « Comment ça
   marche », tampons hors du visage, compteurs du haut expliqués, chiffres lisibles.
   Politique de sécurité stricte : aucun style en ligne, tout est ici. */

/* Chiffres lisibles : dans Bangers, le « 7 » se lit comme un « 1 ». Les chiffres des compteurs
   passent en Figtree 800 (déjà embarquée), le reste du texte garde Bangers. */
@font-face{font-family:"Nakama chiffres";font-style:normal;font-weight:400;font-display:swap;src:url("/polices/figtree-800.woff2") format("woff2");unicode-range:U+0030-0039,U+002F,U+002B,U+00D7}
:root{--chiffres:"Nakama chiffres","Bangers",Impact,"Arial Narrow",sans-serif}

/* ---------- Premier lancement guidé ---------- */
.decouverte{position:fixed;inset:0;z-index:110;overflow-y:auto;overscroll-behavior:contain;display:grid;justify-items:center;align-content:start;padding:calc(64px + env(safe-area-inset-top)) 16px calc(28px + env(safe-area-inset-bottom));background:var(--rouge);animation:apparait .3s ease-out}
.decouverte::before{content:"";position:fixed;inset:-60%;background:repeating-conic-gradient(from var(--angle),rgba(255,212,0,.35) 0deg 7deg,transparent 7deg 16deg);animation:tourne 24s linear infinite;pointer-events:none}
.decouverte>*{position:relative}
.decouverte>.bouton-son-celebration{position:absolute;top:calc(12px + env(safe-area-inset-top));right:max(16px,env(safe-area-inset-right));z-index:1}
.decouverte-passer{position:absolute;top:calc(14px + env(safe-area-inset-top));left:max(16px,env(safe-area-inset-left));min-height:40px;padding:4px 14px;background:#fff;border:3px solid var(--encre);border-radius:8px;font:800 15px/1 var(--texte);color:var(--encre);cursor:pointer}
.decouverte-passer:hover{background:var(--jaune)}
.decouverte-etape{width:min(100%,560px);display:grid;gap:14px;justify-items:start;background:var(--jaune);border:4px solid var(--encre);box-shadow:8px 8px 0 var(--encre);padding:22px 20px;animation:pop .4s cubic-bezier(.2,1.2,.4,1)}
.decouverte-etape h2{font-family:var(--titre);font-weight:400;font-size:clamp(38px,11vw,64px);line-height:.95;letter-spacing:.02em;text-shadow:3px 3px 0 #fff;overflow-wrap:anywhere}
.decouverte-etape h2:focus{outline:none}
.decouverte-etape h2:focus-visible{outline:3px solid var(--bleu);outline-offset:4px}
.decouverte-etape h3{font-family:var(--titre);font-weight:400;font-size:24px;letter-spacing:.04em;line-height:1}
.decouverte-chapo{font-weight:800;font-size:17px;line-height:1.35;max-width:46ch}
.decouverte-etape .actions{width:100%}
.decouverte-etape .btn{white-space:normal;text-align:center}
.decouverte-msg{font-weight:800;min-height:1.4em}
.decouverte-msg:empty{min-height:0}
.options-cadeau{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:16px;width:100%}
.option-cadeau{display:grid;gap:6px;justify-items:center;text-align:center;padding:18px 14px;background:var(--rouge);color:#fff;border:4px solid var(--encre);box-shadow:6px 6px 0 var(--encre);transform:skew(-4deg);cursor:pointer;font:inherit}
.option-cadeau.super{background:var(--encre);color:var(--jaune);box-shadow:6px 6px 0 var(--rouge)}
.option-cadeau b{font-family:var(--titre);font-weight:400;font-size:30px;letter-spacing:.04em;line-height:1}
.option-cadeau span{font-weight:800;font-size:16px}
.option-cadeau:hover:not(:disabled),.option-cadeau:focus-visible{translate:0 -3px;outline:3px solid #fff;outline-offset:3px}
.option-cadeau:active:not(:disabled){translate:3px 3px;box-shadow:2px 2px 0 var(--encre)}
.option-cadeau:disabled{opacity:.6;cursor:default}

/* ---------- Comment ça marche (premier lancement et réglages) ---------- */
.comment-ca-marche{display:grid;gap:10px;max-width:62ch}
.comment-ca-marche>div{display:grid;grid-template-columns:minmax(0,9.5em) minmax(0,1fr);gap:4px 12px;align-items:baseline}
.comment-ca-marche dt{font-family:var(--titre);font-size:19px;letter-spacing:.04em;line-height:1.05}
.comment-ca-marche dd{font-size:14.5px;line-height:1.4}
.pastilles-rarete{display:inline-flex;flex-wrap:wrap;gap:4px;margin-right:4px;vertical-align:1px}
.pastilles-rarete .tag{font-size:12px;padding:1px 6px}
@container app (max-width: 520px){
  .comment-ca-marche>div{grid-template-columns:minmax(0,1fr)}
}

/* ---------- Ouverture : attente du serveur ---------- */
.paquet.attend{animation:secoue .6s ease-in-out infinite}
.attente-ouverture{color:#fff;font-weight:800;font-size:16px;text-align:center;max-width:44ch;background:var(--encre);border:3px solid #fff;padding:6px 14px;transform:skew(-6deg);animation:apparait .25s ease-out}
.attente-ouverture.lente{background:#fff;color:var(--encre);border-color:var(--encre);box-shadow:4px 4px 0 var(--encre)}
.attente-ouverture[hidden]{display:none}

/* ---------- Cadeau reçu : une petite fête et l'action ---------- */
.recu-fete{display:grid;justify-items:center;gap:12px;padding:14px 12px 18px;background:var(--jaune);border:3px solid var(--encre);box-shadow:5px 5px 0 var(--encre);text-align:center;animation:pop .4s cubic-bezier(.2,1.2,.4,1);scroll-margin:90px}
.recu-titre{font-family:var(--titre);font-size:30px;letter-spacing:.04em;line-height:1;text-shadow:2px 2px 0 #fff}
.recu-fete .actions{justify-content:center}
.recu-fete .btn{white-space:normal;text-align:center}
.fete-paquets{display:flex;justify-content:center;gap:6px;height:70px;align-items:end}
.fete-paquets .paquet{--lp:42px;animation:tombe .6s cubic-bezier(.3,1.4,.5,1) backwards}
.fete-paquets .paquet:nth-child(2){animation-delay:.12s;rotate:6deg}
.fete-paquets .paquet:nth-child(3){animation-delay:.24s;rotate:-5deg}
.fete-paquets .paquet:nth-child(4){animation-delay:.36s;rotate:4deg}
.fete-paquets .paquet-corps::before{font-size:calc(var(--lp)*.4)}
@keyframes tombe{from{translate:0 -60px;opacity:0}}
@keyframes pop{from{transform:scale(.85);opacity:0}}


/* ---------- Bilan d'une ouverture : le progrès ---------- */
.bilan{display:grid;gap:12px;justify-items:center;width:min(100%,520px)}
.bilan-texte{display:block}
.progres{display:grid;gap:8px;width:100%;background:#fff;color:var(--encre);border:3px solid var(--encre);box-shadow:5px 5px 0 var(--encre);padding:10px 14px;text-align:left;font-weight:700}
.progres-ligne{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;align-items:baseline}
.progres-titre{font-weight:800;min-width:0;overflow-wrap:anywhere}
.progres-chiffres{white-space:nowrap}
.progres-chiffres b,.progres-garantie b{font-family:var(--chiffres);font-weight:400;font-size:19px;letter-spacing:.02em;color:var(--rouge)}
.progres-chiffres small{color:var(--sourd);font-weight:700}
.progres-barre{grid-column:1/-1;display:block;height:10px;background:var(--creme);border:2px solid var(--encre);border-radius:999px;overflow:hidden}
.progres-barre i{display:block;height:100%;width:0;background:var(--jaune);border-right:2px solid var(--encre);transition:width .9s cubic-bezier(.2,.8,.3,1) .3s}
.progres-garantie{font-weight:800;text-align:center}
.progres-garantie b{color:var(--rouge)}

/* ---------- Cadeau de bienvenue lisible ---------- */
.cadeau.au-choix .btn{white-space:normal;flex-direction:column;gap:2px;text-align:center}
.cadeau.au-choix .btn small{font-size:13px}

/* ---------- Résultat : tampons hors du visage, exemplaires regroupés ---------- */
/* Le tampon « DOOON ! » se pose en biais sur le coin haut gauche du cadre, pas sur le visage. */
.tampon{inset:auto;top:calc(var(--l)*-.07);left:calc(var(--l)*-.1);display:block;transform-origin:20% 50%}
.tampon::before{font-size:calc(var(--l)*.15);-webkit-text-stroke:2px var(--encre);text-shadow:2px 2px 0 var(--encre)}
.rapide .tampon{transform:rotate(-12deg)}
.emplacement .fois{position:absolute;right:calc(var(--l)*-.06);bottom:calc(var(--l)*.3);z-index:7;background:var(--encre);color:var(--jaune);border:2px solid var(--jaune);border-radius:6px;padding:0 6px;font-family:var(--chiffres);font-size:max(12px,calc(var(--l)*.12));line-height:1.3;transform:skew(-8deg)}

/* ---------- Compteurs du haut : un toucher les explique ---------- */
button.compteur{cursor:pointer;font:inherit;font-family:var(--titre);font-size:20px;letter-spacing:.04em;line-height:1.2}
button.compteur[aria-expanded="true"]{background:var(--jaune)}
.bulle-compteur{position:absolute;top:calc(100% + 8px);right:max(12px,env(safe-area-inset-right));z-index:60;width:min(320px,calc(100vw - 24px));display:grid;gap:8px;background:#fff;color:var(--encre);border:3px solid var(--encre);border-radius:10px;box-shadow:5px 5px 0 var(--encre);padding:12px 14px;font-size:14.5px;line-height:1.4;animation:apparait .15s ease-out}
.bulle-compteur[hidden]{display:none}
.bulle-compteur a{font-weight:800;text-decoration:underline;text-underline-offset:3px;margin-right:12px}

/* ---------- Chiffres lisibles (le « 7 » de Bangers ressemble à un « 1 ») ---------- */
.compteur span,.pastille,.tuile .chiffre,.nombre output,.garantie b,.bilan b,.jour b,.solde b,.offre-achat .prix b,.classement .rang,.classement .score,.recu-titre,.option-cadeau b,.decouverte-etape h2{font-family:var(--chiffres)}
.compteur small{font-family:var(--texte)}

/* =====================================================================================
   Accueil « B · Distributeurs » (maquettes/accueil-telephone-04-11.html, choisie le 04/11/2026) :
   une case par paquet (réserve, jauge à crans, recharge, bouton), le cadeau du jour au-dessus du
   pli, les chiffres de la collection sur une ligne. À 1 300 px : cases et cadeau côte à côte.
   ===================================================================================== */
.accueil-b{gap:16px}
.bandeau-titre{position:relative;isolation:isolate;overflow:clip;display:grid;gap:8px;justify-items:start;padding:2px 10px 9px 0}
.bandeau-titre h1{font-family:var(--titre);font-weight:400;font-size:clamp(19px,6.7cqi,40px);white-space:nowrap;line-height:1;letter-spacing:.03em;background:var(--jaune);border:3px solid var(--encre);box-shadow:5px 5px 0 var(--encre);padding:4px 12px 1px;transform:skew(-6deg);margin-left:4px;max-width:calc(100% - 10px)}
.bandeau-titre h1:focus{outline:none}
.garantie-b{font-size:13px;font-weight:700;color:var(--sourd);padding-left:6px}
.garantie-b b{font-family:var(--chiffres);font-weight:400;font-size:18px;color:var(--rouge);letter-spacing:.03em}
/* Le DOOON du fond, discret, derrière le titre (il tombe à l'arrivée, mouvements). */
.bandeau-titre::after{content:"DOOON";position:absolute;right:0;top:-18px;z-index:-1;font-family:var(--titre);font-size:64px;line-height:1;color:transparent;-webkit-text-stroke:2px rgba(21,21,21,.12);transform:rotate(-9deg);pointer-events:none}
.accueil-b>.etat-erreur:not([hidden]){display:grid;gap:8px;justify-items:start}

.distributeurs{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}
.distrib{grid-template-columns:minmax(0,1fr);position:relative;overflow:clip;background:#fff;border:3px solid var(--encre);box-shadow:5px 5px 0 var(--encre);padding:10px 10px 14px;display:grid;gap:8px;align-content:start;min-width:0}
.distrib.super{background:var(--encre);color:#fff;box-shadow:5px 5px 0 var(--rouge)}
.distrib::before{content:"";position:absolute;inset:0;background:radial-gradient(rgba(230,0,18,.16) 2px,transparent 2.4px) 0 0/10px 10px;-webkit-mask:linear-gradient(160deg,#000 0%,transparent 55%);mask:linear-gradient(160deg,#000 0%,transparent 55%);pointer-events:none}
.distrib.super::before{background-image:radial-gradient(rgba(255,212,0,.22) 2px,transparent 2.4px)}
.distrib>*{position:relative}
.distrib-haut{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:center}
.paquets.paquets-case{display:block;min-height:0;margin:2px 0 0 2px}
.paquets-case .paquet{--lp:46px}
.paquets.paquets-case .paquet.normal{transform:rotate(-6deg)}
.paquets.paquets-case .paquet.super{transform:rotate(5deg)}
.paquets-case .paquet-titre b{font-size:calc(var(--lp)*.2)}
.distrib.super .paquet-bord,.distrib.super .paquet-corps,.distrib.super .paquet-titre{border-color:var(--jaune)}
.distrib .chiffre{display:block;font-family:var(--chiffres);font-size:38px;line-height:1;letter-spacing:.02em;color:var(--rouge);white-space:nowrap}
.distrib.super .chiffre{color:var(--jaune)}
.distrib .chiffre small{font-size:22px;color:var(--encre)}
.distrib.super .chiffre small{color:#fff}
.distrib .lib{display:block;font-size:12px;font-weight:700;line-height:1.2}
.distrib.super .lib{color:var(--creme)}
.jauge{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:3px;height:14px;padding:0 3px}
.jauge>i{display:block;border:2px solid var(--encre);background:#fff;transform:skew(-14deg);transform-origin:0 50%}
.jauge>i.p{background:var(--rouge)}
.jauge>i.continue{overflow:hidden}
.jauge>i.continue>i{display:block;height:100%;background:var(--rouge)}
.distrib.super .jauge>i{border-color:var(--jaune);background:transparent}
.distrib.super .jauge>i.p,.distrib.super .jauge>i.continue>i{background:var(--jaune)}
.recharge-b{display:grid;font-size:12px;font-weight:700;line-height:1.25;min-height:2.5em}
.distrib.super .recharge-b{color:var(--creme)}
.distrib .btn{justify-self:start;font-size:20px;padding:4px 8px;gap:8px;margin-right:4px;max-width:calc(100% - 4px)}
.distrib.super .btn-super{background:var(--jaune);color:var(--encre);box-shadow:4px 4px 0 var(--rouge)}
.distrib.super .btn-super .pastille{background:var(--encre);color:var(--jaune);border-color:var(--encre)}

.cadeau-jour{padding:14px;gap:10px}
.cadeau-jour .connexion{gap:10px}
.tete-ligne{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.tete-ligne h3{font-family:var(--titre);font-weight:400;font-size:24px;letter-spacing:.04em;line-height:1.1}
.tete-ligne h3:focus{outline:none}
.tete-ligne small{font-size:13px;font-weight:700;color:var(--sourd);white-space:nowrap}
.cadeaux-jours.frise{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x mandatory;padding:2px 4px 6px 2px;margin:0 -4px 0 -2px}
.cadeaux-jours.frise::-webkit-scrollbar{display:none}
.frise .jour{flex:0 0 60px;scroll-snap-align:start;font-size:10.5px}
.frise .jour b{font-size:16px}
.cadeau-jour .connexion>.btn{justify-self:stretch;margin-right:5px;font-size:21px;white-space:normal;text-align:center}
.cadeau-jour .cadeaux-attente{border-top:2px dashed var(--encre);padding-top:12px}

.bilan-accueil{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:#fff;border:3px solid var(--encre);box-shadow:6px 6px 0 var(--encre)}
.bilan-accueil>div{display:grid;align-content:start;gap:1px;padding:10px 6px 10px 10px;min-width:0}
.bilan-accueil>div+div{border-left:2px dashed var(--encre)}
.bilan-accueil b{font-family:var(--chiffres);font-weight:400;font-size:26px;line-height:1.05;color:var(--rouge);letter-spacing:.02em}
.bilan-accueil span,.bilan-accueil a{font-size:11.5px;color:var(--sourd);line-height:1.25;overflow-wrap:anywhere}
.bilan-accueil a{font-weight:800;color:var(--encre)}

/* Très petit écran : chiffres de la collection sur deux lignes, cases plus serrées. */
@container app (max-width: 359px){
  .distributeurs{gap:10px}
  .distrib{padding:8px 7px 12px}
  .distrib-haut{gap:6px}
  .paquets-case .paquet{--lp:36px}
  .distrib .chiffre{font-size:32px}
  .distrib .btn{font-size:16px;padding:3px 6px;gap:5px}
  .distrib .pastille{min-width:24px;height:24px;font-size:15px;padding:0 4px}
  .bilan-accueil{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bilan-accueil>div:nth-child(3){border-left:0}
  .bilan-accueil>div:nth-child(n+3){border-top:2px dashed var(--encre)}
}
/* Grand écran : l'esprit de B, cases à gauche, cadeau du jour à droite, chiffres en bas. */
@container app (min-width: 900px){
  .accueil-b{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);column-gap:22px;align-items:start}
  .accueil-b>.bandeau-titre,.accueil-b>.etat-erreur,.accueil-b>.bilan-accueil{grid-column:1/-1}
  .distrib{padding:16px 16px 18px;gap:12px}
  .paquets-case .paquet{--lp:74px}
  .distrib .chiffre{font-size:54px}
  .distrib .chiffre small{font-size:28px}
  .distrib .lib,.recharge-b{font-size:14px}
  .jauge{height:18px}
  .distrib .btn{font-size:24px;padding:6px 14px}
  .bandeau-titre::after{font-size:120px;top:-40px}
  .bilan-accueil b{font-size:34px}
  .bilan-accueil span,.bilan-accueil a{font-size:13px}
}

/* Mouvements de l'accueil B (repris de ceux du bandeau) ; rien en mouvements réduits. */
.mv-entree>.distributeurs,.mv-entree>.bilan-accueil{animation:none}
.mv-entree .bandeau-titre>*{animation:mv-reduit .26s var(--mv-net) backwards}
.mv-entree .bandeau-titre>:nth-child(2){animation-delay:.06s}
.mv-entree .bandeau-titre::before{content:"";position:absolute;inset:10% -40px 40%;z-index:-1;pointer-events:none;opacity:0;background:repeating-linear-gradient(180deg,transparent 0 9px,rgba(21,21,21,.2) 9px 11px,transparent 11px 17px,rgba(230,0,18,.22) 17px 18px);animation:mv-vitesse .42s ease-out .05s}
.mv-entree .bandeau-titre::after{animation:mv-dooon .4s var(--mv-claque) .18s backwards}
.mv-entree .distrib,.mv-entree .bilan-accueil>div{animation:mv-pop .3s var(--mv-claque) backwards}
.mv-entree .distrib:nth-child(1),.mv-entree .bilan-accueil>div:nth-child(1){animation-delay:.12s}
.mv-entree .distrib:nth-child(2),.mv-entree .bilan-accueil>div:nth-child(2){animation-delay:.16s}
.mv-entree .bilan-accueil>div:nth-child(3){animation-delay:.2s}
.mv-entree .bilan-accueil>div:nth-child(4){animation-delay:.24s}
@media (prefers-reduced-motion: reduce){
  .mv-entree .bandeau-titre>*,.mv-entree .bandeau-titre::after,.mv-entree .distrib,.mv-entree .bilan-accueil>div{animation:none!important}
  .mv-entree .bandeau-titre::before{content:none!important;animation:none!important}
}

/* Texte lu par le lecteur d'écran seulement (le message d'un cadeau reçu, que la fête dit en grand). */
.lu-seulement{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}