/* Nakama : habillage « B · Hebdo » (le magazine du lundi : jaune, rouge, bandeaux en biais).
   Repris de la maquette v2 validée par Ilhan (maquettes/maquettes-nakama-v2.html) et de la
   carte ULTRA « A · Full art » (maquettes/maquettes-nakama-ultra.html).
   Politique de sécurité stricte : aucun style en ligne, tout est ici. */

/* Polices libres (SIL Open Font License, voir polices/LICENCES.txt), embarquées. */
@font-face{font-family:"Bangers";font-style:normal;font-weight:400;font-display:swap;src:url("/polices/bangers-400.woff2") format("woff2")}
@font-face{font-family:"Figtree";font-style:normal;font-weight:400;font-display:swap;src:url("/polices/figtree-400.woff2") format("woff2")}
@font-face{font-family:"Figtree";font-style:normal;font-weight:600;font-display:swap;src:url("/polices/figtree-600.woff2") format("woff2")}
@font-face{font-family:"Figtree";font-style:normal;font-weight:800;font-display:swap;src:url("/polices/figtree-800.woff2") format("woff2")}

@property --angle{syntax:"<angle>";inherits:false;initial-value:0deg}

:root{
  --fond:#FFF4CF;--encre:#151515;--sourd:#4E4838;--rouge:#E60012;--jaune:#FFD400;--bleu:#0057B8;--vert:#00A651;--violet:#7B2CBF;--creme:#EDE6CC;--vert-fonce:#00843F;
  --etoile-burst:polygon(50% 0%,61% 18%,82% 10%,79% 32%,100% 40%,84% 56%,96% 76%,74% 78%,68% 100%,50% 86%,32% 100%,26% 78%,4% 76%,16% 56%,0% 40%,21% 32%,18% 10%,39% 18%);
  --etoile5:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
  --titre:"Bangers",Impact,"Arial Narrow",sans-serif;
  --texte:"Figtree",Arial,sans-serif;
  --kanji:"Yu Gothic","Hiragino Sans","Hiragino Kaku Gothic ProN","Meiryo",sans-serif;
  color-scheme:light;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--fond)}
body{background:var(--fond);color:var(--encre);font-family:var(--texte);font-size:15px;line-height:1.45;min-height:100vh;min-height:100dvh}
button,input{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
button:disabled{cursor:not-allowed;opacity:.5}
img{display:block;max-width:100%}
a{color:inherit}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--bleu);outline-offset:2px}
.symboles{position:absolute;width:0;height:0;overflow:hidden}
.ico{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}
.evitement{position:absolute;left:8px;top:-60px;z-index:100;background:var(--jaune);border:3px solid var(--encre);padding:6px 12px;font-weight:800}
.evitement:focus{top:8px}
.annonce-ecran{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ============ Coquille ============ */
.app{container:app/inline-size;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;overflow-x:clip}
.haut{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:20px;padding:12px max(22px,env(safe-area-inset-right)) 12px max(22px,env(safe-area-inset-left));padding-top:calc(12px + env(safe-area-inset-top));background:var(--rouge);color:#fff;border-bottom:4px solid var(--encre)}
.logo{font-family:var(--titre);font-size:38px;line-height:1;letter-spacing:.05em;color:var(--jaune);text-shadow:3px 3px 0 var(--encre);transform:skew(-8deg);display:flex;align-items:center;gap:10px;white-space:nowrap;text-decoration:none}
.marque{display:grid;place-items:center;width:34px;height:34px;background:var(--jaune);color:var(--encre);border:3px solid var(--encre);border-radius:6px;text-shadow:none;font-family:var(--kanji);font-weight:700;font-size:17px}
.liens{display:flex;gap:16px}
.liens a{color:#fff;text-decoration:none;font-family:var(--titre);font-size:22px;letter-spacing:.06em;white-space:nowrap;padding:0 8px;border-radius:4px;transform:skew(-8deg)}
.liens a:hover{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:4px}
/* Onglet actif : jaune sur une pastille noire (12,8:1 ; le jaune sur le rouge ne fait que 3,35:1). */
.liens a[aria-current="page"]{color:var(--jaune);background:var(--encre)}
.compteurs{margin-left:auto;display:flex;gap:8px;align-items:center}
.compteur{display:flex;align-items:center;gap:6px;padding:4px 10px;background:#fff;color:var(--encre);border:3px solid var(--encre);border-radius:8px;font-family:var(--titre);font-size:20px;letter-spacing:.04em;white-space:nowrap}
.compteur.super{background:var(--jaune)}

.contenu{flex:1;width:100%;max-width:1228px;margin:0 auto;grid-template-columns:minmax(0,1fr);padding:24px max(24px,env(safe-area-inset-right)) 48px max(24px,env(safe-area-inset-left));display:grid;gap:34px;align-content:start;min-width:0}
.contenu:focus{outline:none}
.ecran{display:grid;grid-template-columns:minmax(0,1fr);gap:22px;min-width:0}
.chargement{display:grid;justify-items:center;gap:10px;padding:80px 0;font-weight:700;color:var(--sourd)}
.chargement-titre{font-family:var(--titre);font-size:54px;letter-spacing:.05em;color:var(--rouge);text-shadow:3px 3px 0 var(--encre);transform:skew(-8deg)}

.bas{display:none}

/* ============ Éléments communs ============ */
.sec-tete{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;min-width:0}
.sec-titre{font-family:var(--titre);font-weight:400;font-size:38px;line-height:1.1;letter-spacing:.04em;background:var(--jaune);border:3px solid var(--encre);padding:2px 16px 0;box-shadow:5px 5px 0 var(--encre);transform:skew(-6deg);max-width:100%;overflow-wrap:anywhere}
.sec-titre:focus{outline:none}
.sec-aide{color:var(--sourd);font-size:14px}
.fil-ariane{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;font-weight:800;font-size:14px}
.fil-ariane a{display:inline-flex;align-items:center;gap:2px;text-decoration:none;border-bottom:2px solid transparent}
.fil-ariane a:hover{border-bottom-color:var(--rouge)}
.fil-ariane .ico{width:16px;height:16px}
.bloc{background:#fff;border:3px solid var(--encre);box-shadow:6px 6px 0 var(--encre);padding:18px;display:grid;gap:12px;align-content:start;min-width:0}
.bloc h3{font-family:var(--titre);font-weight:400;font-size:26px;letter-spacing:.04em;line-height:1.1}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;line-height:1.1;font-family:var(--titre);letter-spacing:.05em;border:3px solid var(--encre);transform:skew(-8deg);white-space:nowrap;text-decoration:none;color:inherit}
.btn-principal{background:var(--rouge);color:#fff;font-size:26px;padding:6px 20px;box-shadow:5px 5px 0 var(--encre)}
.btn-principal:active:not(:disabled){transform:skew(-8deg) translate(3px,3px);box-shadow:2px 2px 0 var(--encre)}
.btn-second{background:#fff;font-size:22px;padding:5px 16px;box-shadow:4px 4px 0 var(--encre)}
.btn-second:active:not(:disabled){transform:skew(-8deg) translate(2px,2px);box-shadow:2px 2px 0 var(--encre)}
.actions{display:flex;flex-wrap:wrap;gap:14px 18px;align-items:center}
.tag{display:inline-block;padding:1px 7px;font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;border:2px solid var(--encre);border-radius:4px;transform:skew(-8deg);background:#fff;vertical-align:1px;white-space:nowrap}
.tag.r-R{background:var(--bleu);color:#fff}.tag.r-SR{background:var(--vert-fonce);color:#fff}.tag.r-SSR{background:var(--rouge);color:#fff}.tag.r-UR{background:var(--violet);color:#fff}.tag.r-LR{background:var(--jaune)}.tag.r-ULTRA{background:var(--encre);color:var(--jaune)}
.surtitre{justify-self:start;background:var(--rouge);color:#fff;padding:4px 12px;transform:skew(-10deg);font-weight:800;font-size:13px;letter-spacing:.08em;text-transform:uppercase;text-decoration:none}
a.surtitre:hover{background:var(--encre)}
.barre{height:10px;margin-top:6px;background:#fff;border:2px solid var(--encre);border-radius:6px;overflow:hidden}
.barre i{display:block;height:100%;width:0;background:var(--rouge)}
.message{display:grid;gap:12px;justify-items:start;max-width:62ch}
.message p{font-weight:600}

/* ============ Accueil ============ */
.hero{position:relative;overflow:clip;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:20px;align-items:center;padding:30px;background:var(--jaune);border:4px solid var(--encre);box-shadow:8px 8px 0 var(--encre)}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(rgba(230,0,18,.22) 2px,transparent 2.4px) 0 0/12px 12px;-webkit-mask:linear-gradient(105deg,transparent 45%,#000 75%);mask:linear-gradient(105deg,transparent 45%,#000 75%);pointer-events:none}
.hero::after{content:"DOOON";position:absolute;right:-14px;bottom:-34px;font-family:var(--titre);font-size:170px;line-height:1;color:transparent;-webkit-text-stroke:3px rgba(21,21,21,.14);transform:rotate(-9deg);pointer-events:none}
.hero-txt{position:relative;z-index:1;display:grid;gap:12px;justify-items:start}
.hero h1{font-family:var(--titre);font-weight:400;font-size:70px;line-height:.92;letter-spacing:.02em;text-shadow:4px 4px 0 #fff}
.hero h1:focus{outline:none}
.hero p{max-width:46ch;font-weight:600}
.hero-cartes{position:relative;z-index:1;display:flex;justify-content:center;align-items:center;min-height:270px;--l:min(150px,11cqi)}
.hero-cartes .carte{--l:inherit}
.hero-cartes .carte:nth-child(1){transform:rotate(-8deg) translateX(30px)}
.hero-cartes .carte:nth-child(2){z-index:1;transform:translateY(-10px)}
.hero-cartes .carte:nth-child(3){transform:rotate(8deg) translateX(-30px)}
.tuiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:14px}
.tuile{background:#fff;border:3px solid var(--encre);box-shadow:6px 6px 0 var(--encre);padding:12px 14px;display:grid;gap:2px;align-content:start}
.tuile .chiffre{font-family:var(--titre);font-size:32px;letter-spacing:.03em;color:var(--rouge);line-height:1.1}
.tuile .lib{font-size:13px;color:var(--sourd)}
.tuile .tag{justify-self:start}

/* ============ Collection : liste des œuvres ============ */
.recherche{display:flex;align-items:center;gap:8px;background:#fff;border:3px solid var(--encre);border-radius:8px;padding:6px 12px;box-shadow:4px 4px 0 var(--encre);max-width:520px;width:100%}
.recherche input{flex:1;min-width:0;border:0;background:none;font-size:16px;font-weight:600;padding:4px 0}
.recherche input:focus{outline:none}
.recherche:focus-within{outline:3px solid var(--bleu);outline-offset:2px}
.oeuvres{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:18px;list-style:none}
.oeuvre-tuile{display:grid;grid-template-columns:84px 1fr;gap:14px;align-items:center;height:100%;padding:10px 14px 10px 10px;background:#fff;border:3px solid var(--encre);box-shadow:5px 5px 0 var(--encre);text-decoration:none;transition:transform .15s,box-shadow .15s}
.oeuvre-tuile:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--encre)}
.oeuvre-tuile:active{transform:translate(2px,2px);box-shadow:3px 3px 0 var(--encre)}
.oeuvre-couv{width:84px;aspect-ratio:3/4;border:3px solid var(--encre);border-radius:6px;overflow:hidden;transform:rotate(-3deg)}
.oeuvre-infos{display:grid;gap:4px;min-width:0}
.oeuvre-nom{font-family:var(--titre);font-weight:400;font-size:24px;letter-spacing:.03em;line-height:1.05;overflow-wrap:anywhere}
.oeuvre-compte{font-size:13px;font-weight:700;color:var(--sourd)}
.oeuvre-raretes{display:flex;flex-wrap:wrap;gap:4px 6px}
.resultats-titre{font-family:var(--titre);font-weight:400;font-size:26px;letter-spacing:.04em;border-bottom:3px solid var(--encre)}
.vide-liste{font-weight:700;color:var(--sourd)}

/* ============ Œuvre ============ */
.oeuvre-mise{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"tete ultra" "groupes ultra";grid-template-rows:auto 1fr;gap:22px 28px;align-items:start}
.oeuvre-mise.sans-ultra{grid-template-columns:minmax(0,1fr);grid-template-areas:"tete" "groupes"}
.oeuvre-tete-txt{grid-area:tete;display:grid;gap:14px;min-width:0}
.oeuvre-mise>.groupes{grid-area:groupes}
.ultra-bloc{grid-area:ultra;position:sticky;top:92px;display:grid;justify-items:center;gap:10px;padding:18px 22px 14px;background:var(--encre);color:#fff;border:3px solid var(--encre);box-shadow:6px 6px 0 var(--rouge);max-width:240px}
.ultra-bloc h3{font-family:var(--titre);font-weight:400;font-size:24px;letter-spacing:.05em;color:var(--jaune);line-height:1}
.ultra-bloc p{font-size:13px;text-align:center;color:#EDE6CC;max-width:30ch}
.ultra-bloc .ultra{--l:170px}
.filtres{display:flex;flex-wrap:wrap;gap:8px}
.filtre{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border:3px solid var(--encre);border-radius:8px;background:#fff;font-weight:800;font-size:14px;transform:skew(-6deg)}
.filtre small{font-weight:600;color:var(--sourd)}
.filtre[aria-pressed="true"]{background:var(--encre);color:var(--jaune)}
.filtre[aria-pressed="true"] small{color:#EDE6CC}
.groupes{display:grid;gap:28px}
.groupe{display:grid;gap:12px;min-width:0}
.groupe h3{font-family:var(--titre);font-weight:400;font-size:26px;letter-spacing:.04em;border-bottom:3px solid var(--encre);overflow-wrap:anywhere}
.groupe h3 small{font-family:var(--texte);font-size:13px;font-weight:700;color:var(--sourd);letter-spacing:0;margin-left:8px}
.grille{display:flex;flex-wrap:wrap;gap:18px 14px;--l:142px;list-style:none}
.grille .carte{--l:inherit}
.lien-carte{display:block;text-decoration:none;color:inherit;border-radius:10px;transition:transform .15s}
.lien-carte:hover{transform:translateY(-4px) rotate(-1deg)}
.lien-carte:focus-visible{outline-offset:4px}

/* ============ Cartes ============ */
.carte{--l:170px;width:var(--l);aspect-ratio:5/7;position:relative;flex:none;--rc:#fff;--rb:#E2E2E2;--rt:var(--encre)}
.r-R{--rc:var(--bleu);--rb:var(--bleu);--rt:#fff}
.r-SR{--rc:var(--vert);--rb:var(--vert-fonce);--rt:#fff}
.r-SSR{--rc:var(--rouge);--rb:var(--rouge);--rt:#fff}
.r-UR{--rc:var(--violet);--rb:var(--violet);--rt:#fff}
.r-LR{--rc:var(--jaune);--rb:var(--rouge);--rt:var(--jaune)}
.c-cadre{position:absolute;inset:0;display:flex;flex-direction:column;background:var(--rc);border:3px solid var(--encre);border-radius:calc(var(--l)*.06);padding:calc(var(--l)*.035);overflow:hidden;isolation:isolate}
.r-UR .c-cadre{background-image:radial-gradient(rgba(255,255,255,.25) 1.5px,transparent 1.9px);background-size:8px 8px}
.r-LR .c-cadre{background:repeating-conic-gradient(from 0deg at 50% 38%,#FFD400 0deg 7deg,#FF9F00 7deg 14deg)}
.c-art{flex:1;min-height:0;position:relative;z-index:1;overflow:hidden;border:3px solid var(--encre);border-radius:calc(var(--l)*.03);background:#fff radial-gradient(rgba(21,21,21,.16) 1.4px,transparent 1.8px) 0 0/8px 8px}
.c-art img,.oeuvre-couv img,.u-in img{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .25s}
.c-art img.charge,.oeuvre-couv img.charge,.u-in img.charge{opacity:1}
.illisible{position:relative}
.illisible::after{content:"Image indisponible";position:absolute;inset:0;display:grid;place-items:center;padding:6px;text-align:center;font-weight:800;font-size:max(9px,calc(var(--l,140px)*.07));line-height:1.15;color:var(--sourd)}
.oeuvre-couv.illisible::after{font-size:10px}
.c-pied{position:relative;z-index:1;display:flex;flex-direction:column;min-width:0;background:#fff;border:3px solid var(--encre);border-radius:calc(var(--l)*.03);margin-top:calc(var(--l)*.03);padding:calc(var(--l)*.015) calc(var(--l)*.045) calc(var(--l)*.02);transform:skew(-6deg)}
.c-nom{font-family:var(--titre);font-weight:400;font-size:max(11px,calc(var(--l)*.098));letter-spacing:.03em;line-height:1.05;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.c-version{font-weight:800;font-size:max(8.5px,calc(var(--l)*.056));line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.c-version.oeuvre{font-weight:600;opacity:.75}
.c-rar{position:absolute;top:calc(var(--l)*-.02);right:calc(var(--l)*-.02);width:calc(var(--l)*.31);aspect-ratio:1;background:var(--encre);clip-path:var(--etoile-burst);z-index:4}
.c-rar i{position:absolute;inset:calc(var(--l)*.02);background:var(--rb);clip-path:var(--etoile-burst);display:grid;place-items:center;font-family:var(--titre);font-style:normal;font-size:calc(var(--l)*.085);letter-spacing:.02em;color:var(--rt);padding-top:calc(var(--l)*.008)}
.r-N .c-rar i{background:#E5E5E5}
.c-etoiles{position:absolute;left:calc(var(--l)*.06);bottom:calc(var(--l)*.27);display:flex;gap:calc(var(--l)*.01);z-index:4;background:var(--encre);border:2px solid #fff;border-radius:999px;padding:calc(var(--l)*.012) calc(var(--l)*.03)}
.c-etoiles i{width:calc(var(--l)*.1);aspect-ratio:1;clip-path:var(--etoile5);background:#5A5A5A}
.c-etoiles i.pleine{background:var(--jaune)}
.et-0 .c-etoiles{display:none}
/* Étoiles (cadrage §4) : 1 contour renforcé, 2 contour brillant, 3 carte animée */
.et-1 .c-cadre,.et-2 .c-cadre,.et-3 .c-cadre{border-width:calc(var(--l)*.03)}
.et-2 .c-cadre,.et-3 .c-cadre{box-shadow:0 0 0 calc(var(--l)*.016) var(--jaune),0 0 0 calc(var(--l)*.03) var(--encre)}
.et-2 .c-cadre::after,.et-3 .c-cadre::after{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.95) 50%,transparent 62%);background-size:300% 100%;animation:reflet 2.8s linear infinite;pointer-events:none}
.et-3 .c-art img{animation:respire 3.6s ease-in-out infinite}
.et-3{animation:aura 2.4s ease-in-out infinite}
.r-N.et-3{--rb:#151515}
/* Shiny : cadre métal, reflet holo, paillettes */
.shiny .c-cadre{background:linear-gradient(135deg,#9a6b00,#ffe27a 22%,#b8860b 42%,#fff2b8 58%,#a87400 78%,#ffd95a)}
.shiny.r-UR .c-cadre{background:linear-gradient(135deg,#7d7d8c,#f4f4ff 22%,#a2a2b3 42%,#ffffff 58%,#85859a 78%,#e6e6f2)}
.shiny .c-art::after{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(115deg,transparent 12%,rgba(255,0,170,.6) 28%,rgba(0,240,255,.6) 40%,rgba(255,240,60,.6) 52%,rgba(120,255,120,.55) 62%,transparent 78%);background-size:260% 100%;background-position:var(--mx,0%) 50%;mix-blend-mode:color-dodge;opacity:.75;animation:holo 4.5s linear infinite;pointer-events:none}
.c-shiny{display:none;position:absolute;top:calc(var(--l)*.07);left:calc(var(--l)*.07);z-index:4;background:var(--encre);color:var(--jaune);font-family:var(--titre);letter-spacing:.08em;font-size:max(10px,calc(var(--l)*.07));padding:1px 7px;border-radius:4px;transform:skew(-8deg)}
.shiny .c-shiny{display:block}
/* Possession inconnue : la carte du catalogue telle quelle. Connue et absente : le « ? » de
   l'album (.vide) ou l'image grisée (.absente), selon public/js/choix-affichage.js. */
.vide{--rb:#E2E2E2;--rt:var(--encre);width:var(--l);aspect-ratio:5/7;position:relative;display:grid;place-items:center;align-content:center;gap:4px;text-align:center;padding:10px;border:3px dashed var(--encre);border-radius:calc(var(--l)*.06);background:#fff}
.vide.r-R{--rb:var(--bleu);--rt:#fff}.vide.r-SR{--rb:var(--vert-fonce);--rt:#fff}.vide.r-SSR{--rb:var(--rouge);--rt:#fff}.vide.r-UR{--rb:var(--violet);--rt:#fff}.vide.r-LR{--rb:var(--rouge);--rt:var(--jaune)}
.vide .q{font-family:var(--titre);font-size:calc(var(--l)*.3);line-height:1;color:var(--rouge)}
.vide .n{font-weight:800;font-size:max(10.5px,calc(var(--l)*.085));line-height:1.2;overflow-wrap:anywhere}
.vide .v{font-size:max(9.5px,calc(var(--l)*.075));line-height:1.2;color:var(--sourd);overflow-wrap:anywhere}
.vide .c-rar{opacity:.9}
.fiche>.vide{--l:290px}
.carte.absente .c-art img{filter:grayscale(1) contrast(.9);opacity:.45}

/* ============ Carte ULTRA (A · Full art, style retenu le 26/10) ============ */
.ultra{--l:220px;width:var(--l);aspect-ratio:5/7;position:relative;flex:none;isolation:isolate;transition:transform .15s ease-out;transform-style:preserve-3d}
.ultra .u-in{position:absolute;inset:0;overflow:hidden;border:calc(var(--l)*.02) solid var(--encre);border-radius:calc(var(--l)*.065);background:#000}
.ultra::before{content:"";position:absolute;inset:calc(var(--l)*-.022);z-index:-1;border-radius:calc(var(--l)*.08);background:conic-gradient(from var(--angle),#FFD400,#FFF6C2,#B8860B,#FFD400,#FF9F00,#FFF6C2,#FFD400);animation:tourne 3s linear infinite}
.ultra .u-in img{filter:contrast(1.08)}
.u-label{position:absolute;top:calc(var(--l)*.05);left:calc(var(--l)*-.02);z-index:5;background:var(--encre);color:var(--jaune);font-family:var(--titre);font-size:calc(var(--l)*.1);letter-spacing:.08em;padding:0 calc(var(--l)*.05) 0 calc(var(--l)*.06);border:2px solid var(--jaune);transform:skew(-10deg)}
.u-vert{position:absolute;top:calc(var(--l)*.06);right:calc(var(--l)*.05);z-index:5;writing-mode:vertical-rl;font-family:var(--kanji);font-weight:900;font-size:calc(var(--l)*.11);color:var(--jaune);-webkit-text-stroke:1.5px var(--encre);paint-order:stroke fill;letter-spacing:.1em}
.u-nom{position:absolute;left:calc(var(--l)*-.02);right:calc(var(--l)*.14);bottom:calc(var(--l)*.07);z-index:5;background:var(--encre);border:2px solid var(--jaune);transform:skew(-8deg);padding:calc(var(--l)*.012) calc(var(--l)*.05) calc(var(--l)*.02)}
.u-nom b{display:block;font-family:var(--titre);font-weight:400;font-size:calc(var(--l)*.12);letter-spacing:.04em;line-height:1.05;color:var(--jaune);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.u-nom span{display:block;font-weight:800;font-size:max(9px,calc(var(--l)*.05));color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.u-reflet{position:absolute;inset:0;z-index:6;pointer-events:none;border-radius:calc(var(--l)*.065);background:linear-gradient(115deg,transparent 30%,rgba(255,236,150,.55) 45%,rgba(255,255,255,.75) 50%,rgba(255,236,150,.55) 55%,transparent 70%);background-size:300% 100%;mix-blend-mode:soft-light;animation:reflet 3.4s linear infinite}
.ultra.suit .u-reflet{animation:none;background-position:var(--mx,50%) 50%}

/* ============ Fiche ============ */
.fiche{display:grid;grid-template-columns:auto minmax(0,1fr);gap:30px;align-items:start;padding:26px;background:#fff;border:3px solid var(--encre);box-shadow:6px 6px 0 var(--encre)}
.fiche>.carte{--l:290px}
.fiche>.ultra{--l:280px;margin:8px}
.fiche-infos{display:grid;gap:14px;min-width:0}
.fiche-infos h2{font-family:var(--titre);font-weight:400;font-size:60px;line-height:.95;letter-spacing:.03em;overflow-wrap:anywhere}
.fiche-infos h2:focus{outline:none}
.fiche-infos h2 small{display:block;font-size:28px;color:var(--rouge)}
.bio{font-size:16px;max-width:68ch}
.bio.manque{color:var(--sourd)}
.infos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3px;background:var(--encre);border:3px solid var(--encre);border-radius:8px;overflow:hidden}
.infos div{background:#fff;padding:9px 13px;display:grid;gap:2px;min-width:0}
.infos div:nth-child(4n+1),.infos div:nth-child(4n+4){background:var(--fond)}
.infos dt{font-size:12px;color:var(--sourd);letter-spacing:.04em;text-transform:uppercase}
.infos dd{font-weight:800;overflow-wrap:anywhere}
.versions{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.versions a,.versions span{border:2px solid var(--encre);border-radius:6px;padding:2px 8px;font-size:12px;font-weight:800;background:#fff;text-decoration:none}
.versions a:hover{background:var(--jaune)}
.versions [aria-current="page"]{background:var(--encre);color:var(--jaune)}
.sources{display:grid;gap:4px;font-size:13px}
.sources ul{list-style:none;display:flex;flex-wrap:wrap;gap:4px 12px}
.sources a{font-weight:700;color:var(--bleu);overflow-wrap:anywhere}
.sources .doute{color:var(--rouge);font-weight:700}
.fiche-nav{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.fiche-nav .btn-second{font-size:20px}
.fiche-nav .ico{width:18px;height:18px}

/* ============ Animations ============ */
@keyframes holo{to{background-position:200% 50%}}
@keyframes reflet{from{background-position:150% 0}to{background-position:-50% 0}}
@keyframes respire{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
@keyframes aura{0%,100%{filter:drop-shadow(0 0 0 transparent)}50%{filter:drop-shadow(0 0 calc(var(--l)*.07) var(--rb))}}
@keyframes tourne{to{--angle:360deg}}

/* ============ Téléphone (largeur de l'appli, pas de l'écran) ============ */
/* Moins de 900 px : carte ULTRA en bandeau sous le titre, avant les cartes. */
@container app (max-width: 900px){
  .oeuvre-mise{grid-template-columns:minmax(0,1fr);grid-template-areas:"tete" "ultra" "groupes";grid-template-rows:auto}
  .oeuvre-mise.sans-ultra{grid-template-areas:"tete" "groupes"}
  .ultra-bloc{position:static;max-width:none;width:100%;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"carte titre" "carte texte";justify-items:start;align-items:center;gap:6px 18px;padding:16px 14px 16px 18px}
  .ultra-bloc h3{grid-area:titre;align-self:end}
  .ultra-bloc .lien-carte{grid-area:carte}
  .ultra-bloc p{grid-area:texte;align-self:start;text-align:left}
  .ultra-bloc .ultra{--l:130px}
}

@container app (max-width: 620px){
  .haut{padding:9px 12px;padding-top:calc(9px + env(safe-area-inset-top));gap:8px}
  .liens{display:none}
  .logo{font-size:28px;gap:8px}
  .marque{width:28px;height:28px;font-size:14px}
  .compteur{padding:3px 7px;font-size:16px;gap:4px}
  .contenu{padding:16px max(16px,env(safe-area-inset-right)) 28px max(16px,env(safe-area-inset-left));gap:28px}
  .ecran{gap:18px}
  .sec-titre{font-size:30px}
  .hero{grid-template-columns:minmax(0,1fr);padding:20px 16px;gap:10px}
  .hero h1{font-size:44px}
  .hero::after{font-size:110px}
  .hero-cartes{order:-1;min-height:0;--l:min(104px,25cqi)}
  .hero-cartes .carte:nth-child(1){transform:rotate(-8deg) translateX(18px)}
  .hero-cartes .carte:nth-child(3){transform:rotate(8deg) translateX(-18px)}
  .tuiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .oeuvres{grid-template-columns:1fr;gap:12px}
  .oeuvre-tuile{grid-template-columns:64px 1fr;gap:12px;padding:8px 12px 8px 8px}
  .oeuvre-couv{width:64px}
  .oeuvre-nom{font-size:21px}
  .ultra-bloc .ultra{--l:118px}
  .grille{--l:100px;gap:14px 9px}
  .groupe h3{font-size:23px}
  .fiche{grid-template-columns:1fr;justify-items:center;padding:16px;gap:16px}
  .fiche>.carte,.fiche>.vide{--l:min(240px,70cqi)}
  .fiche>.ultra{--l:min(230px,66cqi)}
  .fiche-infos{justify-self:stretch}
  .fiche-infos h2{font-size:40px}.fiche-infos h2 small{font-size:22px}
  .infos{grid-template-columns:1fr}
  .infos div:nth-child(4n+1),.infos div:nth-child(4n+4){background:#fff}
  .infos div:nth-child(odd){background:var(--fond)}
  .fiche-nav .btn-second{font-size:18px;padding:4px 12px}
  .bas{display:flex;position:sticky;bottom:0;z-index:30;justify-content:space-around;padding:8px 4px calc(10px + env(safe-area-inset-bottom));background:var(--rouge);color:#fff;border-top:4px solid var(--encre)}
  .bas a{display:grid;justify-items:center;gap:2px;padding:3px 6px;border-radius:8px;font-family:var(--titre);font-size:13px;letter-spacing:.05em;color:inherit;text-decoration:none}
  .bas a[aria-current="page"]{color:var(--jaune);background:var(--encre)}
}
/* Nouvelle version prête (js/mise-a-jour.js) : bandeau au-dessus de la barre du bas. */
.maj{position:fixed;z-index:50;left:50%;bottom:calc(18px + env(safe-area-inset-bottom));transform:translateX(-50%);width:max-content;max-width:calc(100% - 32px);display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding:10px 12px 10px 16px;background:var(--jaune);color:var(--encre);border:3px solid var(--encre);box-shadow:5px 5px 0 var(--encre);font-weight:800;line-height:1.25}
.maj p{min-width:0;flex:1 1 200px}
.maj-actions{display:flex;gap:12px;flex:none}
.maj .btn{flex:none}
/* Hauteur du bandeau réservée sous le contenu : le bas de chaque écran reste touchable (D2). */
.avec-maj .contenu{padding-bottom:calc(var(--hauteur-maj, 0px) + 44px)}
@container app (max-width: 620px){
  .maj{bottom:calc(84px + env(safe-area-inset-bottom));gap:8px 10px;padding:8px 10px 10px 12px;font-size:14px}
}
@container app (max-width: 360px){
  .grille{--l:92px;gap:12px 8px}
  .bas a{font-size:12px}
}

/* =====================================================================================
   Étape 6b : écrans du joueur (accueil, ouverture, collection possédée, boutique,
   recyclage, réglages). Repris de la maquette v2 (« Ouverture », « Accueil », « Album »).
   ===================================================================================== */

/* Compteurs du haut (liens vers les boosters et la boutique) */
/* Barre du haut : les compteurs passent à la ligne quand la place manque (entre 620 et 1 000 px). */
.haut{flex-wrap:wrap;row-gap:8px}
a.compteur{text-decoration:none}
a.compteur:hover{background:var(--jaune)}
a.compteur.super:hover{background:#fff}
.compteur .ico{width:18px;height:18px}
.compteur small{font-family:var(--texte);font-size:11px;font-weight:800;margin-left:2px;vertical-align:2px}

/* Boutons et petits éléments */
.btn-super{background:var(--encre);color:var(--jaune);font-size:26px;padding:6px 20px;box-shadow:5px 5px 0 var(--rouge)}
.btn-super:active:not(:disabled){transform:skew(-8deg) translate(3px,3px);box-shadow:2px 2px 0 var(--rouge)}
.btn-petit{font-size:18px;padding:3px 12px;box-shadow:3px 3px 0 var(--encre)}
.btn small{font-family:var(--texte);font-size:12px;font-weight:800;letter-spacing:0}
.btn:disabled{opacity:.45}
.pastille{display:inline-grid;place-items:center;min-width:28px;height:28px;padding:0 6px;border-radius:999px;background:var(--jaune);color:var(--encre);border:2px solid var(--encre);font-size:18px}
.btn-super .pastille{background:var(--rouge);color:#fff;border-color:var(--jaune)}
.tag.sh{box-shadow:inset 0 -3px 0 var(--jaune)}
.retour{font-weight:800;min-height:1.45em}
.retour[data-genre="refus"]{color:var(--rouge)}
.solde{font-weight:700}
.solde b{font-family:var(--titre);font-weight:400;font-size:24px;letter-spacing:.03em;color:var(--rouge)}
.liens-plus{display:flex;flex-wrap:wrap;gap:12px 16px}
.reglage{display:inline-flex;border:3px solid var(--encre);border-radius:8px;overflow:hidden;background:#fff;max-width:100%}
.reglage button{padding:5px 12px;font-weight:800;font-size:13px;min-height:34px}
.reglage button[aria-pressed="true"]{background:var(--encre);color:var(--jaune)}
.nombre{display:inline-flex;align-items:center;gap:6px}
.nombre button{display:grid;place-items:center;min-width:38px;height:38px;padding:0 8px;border:3px solid var(--encre);border-radius:8px;background:#fff;font-weight:800;font-size:20px;line-height:1}
.nombre button.tout{font-size:14px}
.nombre output{min-width:2ch;text-align:center;font-family:var(--titre);font-size:30px;letter-spacing:.03em}

/* Paquets (maquette v2), dessinés sans image */
.paquet{--lp:150px;width:var(--lp);position:relative;display:block;flex:none;transition:transform .25s}
.paquet.super{--lp:160px}
.paquet-bord{display:block;height:calc(var(--lp)*.09);background:repeating-linear-gradient(90deg,var(--encre) 0 3px,var(--jaune) 3px 6px);border:3px solid var(--encre)}
.paquet.super .paquet-bord{background:repeating-linear-gradient(90deg,var(--encre) 0 3px,var(--rouge) 3px 6px)}
.paquet-corps{position:relative;display:block;aspect-ratio:3/4;overflow:hidden;border:3px solid var(--encre);border-block:0;background:var(--rouge) radial-gradient(rgba(255,212,0,.45) 2px,transparent 2.4px) 0 0/11px 11px}
.paquet.super .paquet-corps{background:var(--encre) radial-gradient(rgba(255,212,0,.35) 2px,transparent 2.4px) 0 0/11px 11px}
.paquet-corps::before{content:"仲";position:absolute;left:50%;top:38%;translate:-50% -50%;font-family:var(--kanji);font-weight:900;font-size:calc(var(--lp)*.42);color:var(--jaune);-webkit-text-stroke:2px var(--encre);paint-order:stroke fill}
.paquet-titre{position:absolute;left:0;right:0;bottom:0;padding:6px 8px;display:grid;gap:1px;background:var(--rouge);color:var(--jaune);border-top:3px solid var(--encre)}
.paquet.super .paquet-titre{background:var(--encre)}
.paquet-titre b{font-family:var(--titre);font-weight:400;font-size:calc(var(--lp)*.18);letter-spacing:.05em;line-height:1;text-shadow:2px 2px 0 var(--encre)}
.paquet.super .paquet-titre b{text-shadow:2px 2px 0 var(--rouge)}
.paquet-titre span{color:#fff;font-size:max(9px,calc(var(--lp)*.065));font-weight:800;letter-spacing:.04em;text-transform:uppercase;overflow-wrap:anywhere}
.paquet.secoue{animation:secoue .6s ease-in-out}
[data-ouvrir-paquet]{cursor:pointer}
[data-ouvrir-paquet]:hover{translate:0 -6px}

/* Accueil */
.paquets{position:relative;z-index:1;display:flex;justify-content:center;align-items:center;gap:6px;min-height:270px;text-decoration:none;--lp:min(160px,13cqi)}
.paquets .paquet.normal{transform:rotate(-6deg)}
.paquets .paquet.super{transform:rotate(5deg) translateY(10px)}
.recharge{font-size:13px;font-weight:700;display:grid;gap:2px}
.etat-erreur{display:grid;gap:8px;justify-items:start}
.etat-erreur p{color:var(--rouge)}
.tuile a.lib{font-weight:800;color:var(--bleu)}
.bloc .btn{white-space:normal;text-align:center}
.cadeaux-bloc{gap:16px}
.cadeaux-bloc h4{font-family:var(--titre);font-weight:400;font-size:22px;letter-spacing:.04em}
.cadeaux-bloc h4 small{font-family:var(--texte);font-size:13px;font-weight:700;color:var(--sourd);letter-spacing:0;margin-left:6px}
.connexion{display:grid;gap:10px}
.cadeaux-jours{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:6px;list-style:none}
.jour{border:3px solid var(--encre);border-radius:6px;padding:6px 4px;text-align:center;display:grid;gap:2px;background:#fff;font-size:12px;font-weight:700;line-height:1.2;overflow-wrap:anywhere;min-width:0}
.jour b{font-family:var(--titre);font-weight:400;font-size:18px;letter-spacing:.03em}
.jour.pris{background:var(--creme)}
.jour.pris b::after{content:" ✓"}
.jour.auj{background:var(--jaune);box-shadow:3px 3px 0 var(--rouge)}
.cadeaux-attente{list-style:none;display:grid;gap:12px}
.cadeau{display:grid;gap:10px;padding:12px;border:3px dashed var(--encre);border-radius:8px;background:var(--fond)}
.cadeau.au-choix{border-style:solid;background:var(--jaune);box-shadow:4px 4px 0 var(--rouge)}
.cadeau-titre{display:grid;gap:2px;overflow-wrap:anywhere}
.cadeau .btn{font-size:22px;white-space:normal;text-align:center}
.recu-carte{display:grid;justify-items:center;gap:12px;padding:8px 0 20px}
.recu-carte .carte{--l:min(150px,42cqi)}
.recu-carte .etiquette{position:static;transform:skew(-8deg);opacity:1}

/* Ouverture */
.tirage-zone{position:relative;overflow:clip;display:grid;gap:18px;justify-items:center;align-content:center;min-height:380px;padding:28px 16px;background:var(--rouge);border:4px solid var(--encre);box-shadow:8px 8px 0 var(--encre);scroll-margin-top:96px}
.tirage-zone::before{content:"";position:absolute;inset:-50%;background:repeating-conic-gradient(from 0deg,rgba(255,212,0,.28) 0deg 6deg,transparent 6deg 15deg);pointer-events:none}
.tirage-zone>*{position:relative}
.depart{display:flex;flex-wrap:wrap;gap:26px 34px;justify-content:center;align-items:end;max-width:100%}
.offre{display:grid;justify-items:center;gap:12px;min-width:0}
.offre .nombre{background:#fff;border:3px solid var(--encre);border-radius:10px;padding:4px 6px}
.offre .stock{color:#fff;font-weight:800;text-align:center;display:grid;gap:2px}
.offre .stock small{font-weight:700;opacity:.95}
.garantie{color:#fff;font-weight:700;font-size:14px;text-align:center}
.garantie b{font-family:var(--titre);font-weight:400;font-size:20px;letter-spacing:.04em;color:var(--jaune)}
.en-scene .garantie{display:none}
.tirage{display:flex;flex-wrap:wrap;justify-content:center;gap:44px 16px;padding-bottom:34px;perspective:1100px;--l:160px;max-width:960px;list-style:none}
.tirage.dix{--l:138px;gap:44px 12px;max-width:760px}
.tirage.beaucoup{--l:110px;gap:40px 10px;max-width:1000px}
.tirage.paquet-seul{padding:10px 0 0;min-height:200px;align-items:center}
.compteur-booster{flex-basis:100%;text-align:center;color:#fff;font-family:var(--titre);font-size:22px;letter-spacing:.05em}
.emplacement{width:var(--l);aspect-ratio:5/7;position:relative;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.2,.75,.25,1);animation:distribue .45s cubic-bezier(.2,.8,.3,1) backwards}
.emplacement:nth-child(2){animation-delay:70ms}.emplacement:nth-child(3){animation-delay:140ms}.emplacement:nth-child(4){animation-delay:210ms}.emplacement:nth-child(5){animation-delay:280ms}.emplacement:nth-child(6){animation-delay:350ms}.emplacement:nth-child(n+7){animation-delay:420ms}
.emplacement .face,.emplacement .dos{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.emplacement .face{transform:rotateY(180deg)}
.emplacement .face>.carte,.emplacement .face>.vide{--l:inherit;width:100%}
.emplacement.retournee{transform:rotateY(180deg)}
/* La face cachée ne capte pas le toucher (certains moteurs la touchent malgré backface-visibility) */
.emplacement:not(.retournee) .face,.emplacement.retournee .dos{pointer-events:none}
.rapide .emplacement{animation:none;transition:none}
.dos{display:block;width:100%;cursor:pointer;overflow:hidden;background:var(--rouge);border:3px solid var(--encre);border-radius:calc(var(--l)*.06)}
.dos:disabled{opacity:1;cursor:default}
.dos::before{content:"";position:absolute;inset:0;background:radial-gradient(rgba(255,212,0,.35) 2px,transparent 2.4px) 0 0/10px 10px}
.dos::after{content:"NAKAMA";position:absolute;left:-20%;right:-20%;top:42%;background:var(--jaune);color:var(--encre);border-block:3px solid var(--encre);font-family:var(--titre);font-size:calc(var(--l)*.17);letter-spacing:.06em;text-align:center;transform:rotate(-18deg)}
/* Annonce de la rareté au dos (à partir du réglage ouverture.annonce_a_partir_de) */
.signal[data-r="SSR"] .dos{--lueur:rgba(230,0,18,.9);animation:lueurDos 1.1s ease-in-out infinite;border-color:#fff}
.signal[data-r="UR"] .dos{--lueur:rgba(123,44,191,.95);animation:lueurDos .9s ease-in-out infinite;border-color:#fff;background:var(--violet)}
.signal[data-r="LR"] .dos{--lueur:rgba(255,212,0,1);animation:lueurDos .7s ease-in-out infinite,vibre .35s linear infinite;border-color:var(--jaune);background:var(--encre)}
.gogo{display:none;position:absolute;inset:0;z-index:2;pointer-events:none;font-family:var(--kanji);font-weight:900;color:var(--jaune);-webkit-text-stroke:1px var(--encre);font-size:calc(var(--l)*.16);line-height:1}
.gogo span{position:absolute;animation:clignote .5s steps(2) infinite}
.gogo span:nth-child(1){left:6%;top:8%}.gogo span:nth-child(2){right:6%;top:24%;animation-delay:.25s}.gogo span:nth-child(3){left:10%;bottom:10%;animation-delay:.12s}
.signal[data-r="LR"] .gogo{display:block}
.etiquette{position:absolute;left:50%;top:calc(100% + 8px);transform:translateX(-50%) skew(-8deg);padding:2px 9px;background:#fff;border:3px solid var(--encre);border-radius:6px;font-family:var(--titre);letter-spacing:.05em;font-size:15px;line-height:1.15;white-space:nowrap;z-index:6;opacity:0;transition:opacity .3s .45s}
.etiquette.nouv{background:var(--jaune)}
.etiquette.top{background:var(--rouge);color:#fff}
.etiquette.sh{background:var(--encre);color:var(--jaune)}
.retournee .etiquette,.rapide .etiquette{opacity:1}
.tampon{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;z-index:7;opacity:0}
.tampon::before{content:attr(data-texte);font-family:var(--titre);font-size:calc(var(--l)*.22);letter-spacing:.04em;color:var(--jaune);-webkit-text-stroke:3px var(--encre);paint-order:stroke fill;text-shadow:4px 4px 0 var(--encre);white-space:nowrap}
.retournee .tampon{animation:tampon .7s .5s cubic-bezier(.2,1.4,.4,1) forwards}
.rapide .tampon{opacity:1;transform:rotate(-10deg);animation:none}
.emplacement.r-LR.retournee{animation:vibre .3s .45s 3}
.rapide .emplacement.r-LR.retournee{animation:none}
.flash{position:absolute;inset:0;z-index:20;display:grid;place-items:center;pointer-events:none;animation:flash 1.5s ease-out forwards}
.flash b{font-family:var(--titre);font-weight:400;font-size:clamp(48px,14cqi,150px);letter-spacing:.04em;color:#fff;-webkit-text-stroke:4px var(--encre);paint-order:stroke fill;text-shadow:7px 7px 0 var(--encre);transform:rotate(-8deg);animation:boum .5s cubic-bezier(.2,1.5,.4,1);white-space:nowrap}
.flash.f-SSR,.flash.f-SR,.flash.f-R,.flash.f-N{background:var(--rouge)}
.flash.f-UR{background:var(--violet)}
.flash.f-LR{background:var(--encre)}
.flash.f-LR b{color:var(--jaune);font-family:var(--kanji);font-weight:900}
.eclair{position:absolute;width:70px;height:260px;background:var(--jaune);clip-path:polygon(45% 0,100% 0,62% 42%,90% 42%,25% 100%,42% 55%,10% 55%);animation:foudre 1.5s ease-out forwards,vibre .3s linear infinite}
.eclair:nth-child(1){left:8%;top:6%;rotate:-12deg}
.eclair:nth-child(2){right:9%;top:16%;rotate:14deg}
.tirage-actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
.tirage-actions:empty{display:none}
.bilan{color:#fff;font-weight:700;text-align:center;min-height:1.5em;max-width:60ch}
.bilan:empty{display:none}
.bilan b{font-family:var(--titre);font-weight:400;font-size:20px;letter-spacing:.03em;color:var(--jaune)}

/* Célébration d'une ULTRA (maquette « ULTRA », moment de la récompense) */
.recompense{position:fixed;inset:0;z-index:100;display:grid;place-items:center;align-content:center;gap:18px;padding:20px 16px;overflow:hidden;background:var(--rouge);animation:apparait .3s ease-out}
.recompense::before{content:"";position:absolute;inset:-60%;background:repeating-conic-gradient(from var(--angle),rgba(255,212,0,.45) 0deg 7deg,transparent 7deg 16deg);animation:tourne 18s linear infinite}
.recompense>*{position:relative}
.recompense h3{font-family:var(--titre);font-weight:400;font-size:clamp(32px,7vw,72px);letter-spacing:.04em;line-height:1;text-align:center;color:var(--jaune);-webkit-text-stroke:3px var(--encre);paint-order:stroke fill;text-shadow:5px 5px 0 var(--encre);transform:rotate(-4deg);animation:boum .5s .15s cubic-bezier(.2,1.5,.4,1) backwards;max-width:100%;overflow-wrap:anywhere}
.recompense .ultra{--l:min(300px,62vw,38vh);animation:arrivee 1.3s .35s cubic-bezier(.2,.9,.25,1) backwards}
.recompense p{background:#fff;border:3px solid var(--encre);padding:6px 14px;font-weight:800;text-align:center;transform:skew(-6deg);box-shadow:4px 4px 0 var(--encre);animation:apparait .4s 1.4s backwards;max-width:100%}
.recompense .btn{animation:apparait .4s 1.6s backwards}

/* Collection possédée */
.c-doubles,.c-engage{position:absolute;z-index:5;font-weight:800;line-height:1.1;border:2px solid var(--encre);white-space:nowrap}
.c-doubles{right:calc(var(--l)*.05);bottom:calc(var(--l)*.27);background:var(--jaune);color:var(--encre);border-radius:999px;padding:1px 7px;font-size:max(10px,calc(var(--l)*.075))}
.c-engage{left:50%;top:40%;translate:-50% -50%;background:var(--bleu);color:#fff;border-color:#fff;border-radius:6px;padding:2px 6px;font-size:max(9px,calc(var(--l)*.065));transform:skew(-8deg)}
.paillettes{display:none;position:absolute;inset:0;pointer-events:none;z-index:5}
.shiny .paillettes{display:block}
.paillettes i{position:absolute;width:calc(var(--l)*.075);aspect-ratio:1;background:#fff;clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);filter:drop-shadow(0 0 2px #fff);opacity:0;animation:scintille 2.2s ease-in-out infinite}
.paillettes i:nth-child(1){left:12%;top:18%}
.paillettes i:nth-child(2){left:72%;top:30%;animation-delay:.4s}
.paillettes i:nth-child(3){left:30%;top:55%;animation-delay:.9s;width:calc(var(--l)*.05)}
.paillettes i:nth-child(4){left:80%;top:62%;animation-delay:1.3s}
.paillettes i:nth-child(5){left:50%;top:8%;animation-delay:1.7s;width:calc(var(--l)*.05)}
.paillettes i:nth-child(6){left:8%;top:78%;animation-delay:.6s}
/* Reflet holo : suit la souris ou le doigt (.suit), ou l'inclinaison du téléphone (.holo-capteur) */
.carte.suit .c-art::after,.holo-capteur .shiny .c-art::after{animation:none}
.ultra-bloc.gagnee{box-shadow:6px 6px 0 var(--jaune)}
.ultra-bloc.gagnee h3::after{content:" ✓"}
.rangement{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-weight:800;font-size:14px}
.rangement button{padding:4px 12px;border:3px solid var(--encre);border-radius:8px;background:#fff;font-weight:800;font-size:14px;transform:skew(-6deg)}
.rangement button[aria-pressed="true"]{background:var(--encre);color:var(--jaune)}
.btn-petit.btn-second{font-size:18px}

/* Boutique */
.offres-achat{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:22px}
.offre-achat .prix b{font-family:var(--titre);font-weight:400;font-size:30px;letter-spacing:.03em;color:var(--rouge)}
.offre-achat .plafond{font-weight:700;color:var(--sourd)}
.offre-achat .btn{white-space:normal;text-align:center}

/* Recyclage */
.tout-recycler{background:var(--jaune);box-shadow:6px 6px 0 var(--rouge)}
.lignes-recyclage{list-style:none;display:grid;gap:10px}
.ligne-recyclage{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px 12px;padding:8px 10px;background:#fff;border:3px solid var(--encre);border-radius:8px}
.ligne-recyclage .qte{font-weight:800;overflow-wrap:anywhere}
.ligne-recyclage .qte small{font-weight:600;color:var(--sourd)}
.ligne-recyclage .btn{white-space:normal;text-align:center}
.option{display:flex;align-items:center;gap:10px;font-weight:700}
.option input{width:22px;height:22px;accent-color:var(--rouge);flex:none}
.grille-recyclage .recyclable{display:grid;justify-items:center;gap:8px}

/* Taux et historique */
.taux-grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:22px}
.chances{list-style:none;display:flex;flex-wrap:wrap;gap:6px 14px;font-weight:700}
.emplacement-taux{display:grid;gap:4px}
.historique{list-style:none;display:grid;gap:10px}
.ouverture-passee{display:grid;gap:4px;padding:10px 12px;background:#fff;border:3px solid var(--encre);border-radius:8px;overflow-wrap:anywhere}
.ouverture-passee .comptes{display:flex;flex-wrap:wrap;gap:4px 6px}
.notables{list-style:none;font-weight:700;font-size:14px}
.notables small{color:var(--sourd);font-weight:600}
.ultra-gagnee{font-weight:800;color:var(--rouge)}

/* Réglages */
.reglages{gap:18px}
.reglages>*{min-width:0}
.choix-reglage .reglage{flex-wrap:wrap}
.choix-reglage{display:grid;gap:8px;justify-items:start;min-width:0}
.choix-reglage h3{font-size:22px;overflow-wrap:anywhere}

@keyframes secoue{0%,100%{rotate:0deg}20%{rotate:-6deg;scale:1.04}40%{rotate:5deg;scale:1.06}60%{rotate:-5deg;scale:1.08}80%{rotate:4deg;scale:1.08}}
@keyframes distribue{from{transform:translateY(-40px) scale(.7);opacity:0}}
@keyframes tampon{0%{opacity:0;transform:scale(2.2) rotate(-14deg)}100%{opacity:1;transform:scale(1) rotate(-10deg)}}
@keyframes scintille{0%,100%{opacity:0;transform:scale(.3) rotate(0)}50%{opacity:1;transform:scale(1) rotate(45deg)}}
@keyframes lueurDos{0%,100%{box-shadow:0 0 0 0 var(--lueur)}50%{box-shadow:0 0 30px 8px var(--lueur)}}
@keyframes vibre{0%,100%{translate:0 0}25%{translate:-3px 2px}50%{translate:3px -2px}75%{translate:-2px -1px}}
@keyframes clignote{50%{opacity:0}}
/* Éclairs de l'annonce LR : ils frappent (lueur qui grandit), une seule baisse, puis tiennent : au plus 2 éclats
   sur 1,5 s (WCAG 2.3.1 : jamais plus de 3 éclats par seconde ; avant, clignote .18s = 5,5 par seconde).
   L'énergie vient du tremblement (vibre, sans changer la luminosité), pas du clignotement. */
@keyframes foudre{0%{opacity:0;scale:.55}7%{opacity:1;scale:1.12}18%{scale:1}42%{opacity:1}50%{opacity:.35}58%{opacity:1}100%{opacity:1}}
@keyframes flash{0%{opacity:0}8%{opacity:1}75%{opacity:1}100%{opacity:0}}
@keyframes boum{from{transform:rotate(-8deg) scale(2.6);opacity:0}}
@keyframes apparait{from{opacity:0}}
@keyframes arrivee{0%{transform:rotateY(900deg) scale(.2);opacity:0}60%{opacity:1}100%{transform:rotateY(0) scale(1)}}

/* Téléphone : écrans de l'étape 6b */
@container app (max-width: 620px){
  .tirage-zone{padding:20px 8px;min-height:300px;scroll-margin-top:72px}
  .depart{gap:22px 18px}
  .paquet{--lp:min(120px,34cqi)}
  .paquet.super{--lp:min(128px,36cqi)}
  .paquets{order:-1;min-height:0;gap:0;--lp:min(118px,30cqi)}
  .tirage{--l:min(126px,38cqi);gap:40px 12px}
  .tirage.dix{--l:min(94px,27cqi);gap:40px 8px}
  .tirage.beaucoup{--l:min(76px,22cqi);gap:38px 6px}
  .etiquette{font-size:11px;padding:1px 5px;border-width:2px;white-space:normal;width:max-content;max-width:calc(var(--l) + 10px);text-align:center}
  .compteur-booster{font-size:18px}
  .btn-principal,.btn-super{font-size:22px;padding:5px 16px}
  .cadeaux-jours{grid-template-columns:repeat(auto-fill,minmax(62px,1fr))}
  .jour{font-size:10.5px;padding:5px 2px}
  .jour b{font-size:16px}
  .cadeau .btn{font-size:19px}
  .ligne-recyclage{grid-template-columns:auto minmax(0,1fr)}
  .ligne-recyclage .btn{grid-column:1/-1;justify-self:start}
  .rangement{font-size:13px}
  .rangement button{font-size:13px;padding:3px 10px}
}
@container app (max-width: 440px){
  .logo-nom{display:none}
}
@container app (max-width: 360px){
  .compteur:not(.berries) .ico{display:none}
  .nombre button{min-width:34px;height:34px}
}

/* Mouvements réduits : paquets et cartes immobiles, reflet des shiny figé */
@media (prefers-reduced-motion: reduce){
  [data-ouvrir-paquet]:hover{translate:none}
  .emplacement,.emplacement.retournee{transition:none}
}

/* Mouvements réduits : aucune animation qui boucle, aucune transition. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .lien-carte:hover,.oeuvre-tuile:hover{transform:none}
}

/* =====================================================================================
   Étape 6c : entre potes (collection d'un pote, « chez qui », échanges, classement, fil,
   profil). Repris de la maquette v2 (sections « Entre potes » et « Ton profil »).
   ===================================================================================== */
.potes{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:18px}
.attente{color:var(--sourd);font-weight:700}
.avatar{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--jaune);border:3px solid var(--encre);font-weight:800;font-size:14px;flex:none}
.avatar.moi{background:var(--rouge);color:#fff}
.classement{list-style:none;display:grid;gap:6px}
.classement a{display:grid;grid-template-columns:28px 34px minmax(0,1fr) auto;gap:10px;align-items:center;padding:7px 10px;background:#fff;border:3px solid var(--encre);border-radius:8px;text-decoration:none}
.classement a:hover{background:var(--fond)}
.classement li.moi a{background:var(--jaune)}
.classement .rang,.classement .score{font-family:var(--titre);font-size:22px;letter-spacing:.03em;text-align:center}
.classement li:first-child .rang{color:var(--rouge)}
.classement .qui{display:grid;line-height:1.25;min-width:0;overflow-wrap:anywhere}
.classement .qui small{color:var(--sourd);font-size:12px}
.fil{list-style:none;display:grid;gap:10px}
.fil li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center}
.fil li>span:nth-child(2){min-width:0;overflow-wrap:anywhere}
.fil .quand{font-size:12px;color:var(--sourd);white-space:nowrap}
.fil .tag{margin-left:4px}
.fil .voir{margin-left:8px;font-weight:800;text-decoration:underline}
.fil .lien-carte{display:inline}
.tag.t-ULTRA,.tag.ultra-tag{background:var(--encre);color:var(--jaune)}
.tag.t-shiny_LR{background:var(--jaune)}
.tag.t-premiere_LR_du_groupe{background:var(--rouge);color:#fff}
.echange-titre{overflow-wrap:anywhere}
.echange-mini{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:10px;align-items:center}
.echange-mini .sens{display:grid;justify-items:center;gap:2px;font-size:12px;color:var(--sourd)}
.echange-mini .sens .ico{width:28px;height:28px;color:var(--rouge)}
.cote{display:grid;gap:6px;min-width:0;align-content:start}
.cote small{font-weight:800;color:var(--sourd)}
.cartes-echange{display:flex;flex-wrap:wrap;gap:8px;--l:84px;list-style:none;min-width:0}
.echange-mini .cote{--l:84px;display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.echange-mini .cote small{flex-basis:100%;text-align:center}
.cartes-echange .carte,.cartes-echange .ultra,.cartes-echange .vide,.echange-mini .carte,.echange-mini .ultra,.echange-mini .vide{--l:inherit}
.echanges{list-style:none;display:grid;gap:14px}
.echange-ligne{display:grid;gap:10px;padding:12px;border:3px solid var(--encre);border-radius:8px;background:var(--fond);min-width:0}
.echange-ligne.ouvert{background:#fff;box-shadow:4px 4px 0 var(--jaune)}
.expire{font-weight:800;color:var(--rouge)}
.statut{font-weight:800}
.statut.s-accepte{color:var(--vert-fonce)}
.quand{color:var(--sourd);font-size:13px}
.avertissements{list-style:none;display:grid;gap:4px;padding:8px 10px;background:var(--jaune);border:2px solid var(--encre);border-radius:6px;font-weight:700}
.avertissements li::before{content:"★ ";color:var(--rouge)}
.gain-ultra{font-weight:800;color:var(--rouge)}
.confirmer,.confirmer-nettoyage{display:grid;gap:8px;padding:10px;border:3px dashed var(--rouge);border-radius:8px;background:#fff}
.confirmer[hidden],.confirmer-nettoyage[hidden]{display:none}
.ecran .actions .btn{white-space:normal;text-align:center;max-width:100%}
.composition{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.composition h3 small,.edition-profil h3 small{font-family:var(--texte);font-size:14px;color:var(--sourd);margin-left:6px;letter-spacing:0}
.choisies li{display:grid;justify-items:center;gap:4px}
.choisies .fois{font-weight:800}
.retirer{font-size:13px;font-weight:800;text-decoration:underline;color:var(--rouge);padding:2px 4px}
.onglets{display:flex;flex-wrap:wrap;gap:8px}
.onglets button{font-family:var(--titre);font-size:18px;letter-spacing:.04em;padding:3px 14px;border:3px solid var(--encre);border-radius:6px;background:#fff}
.onglets button[aria-pressed="true"]{background:var(--encre);color:var(--jaune)}
.choix-oeuvre{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-weight:800}
.choix-oeuvre select{font:inherit;font-weight:600;max-width:100%;min-width:0;padding:6px 8px;border:3px solid var(--encre);border-radius:6px;background:#fff;color:var(--encre)}
.candidats{--l:104px}
.choix-carte{display:grid;justify-items:center;gap:4px;padding:4px;border:3px solid transparent;border-radius:10px}
.choix-carte:hover{border-color:var(--jaune)}
.choix-carte.pris{border-color:var(--rouge);background:var(--jaune)}
.choix-carte .carte,.choix-carte .ultra{--l:inherit}
.exemplaires{font-size:12px;font-weight:800;color:var(--sourd)}
.profil{grid-template-columns:auto minmax(0,1fr);gap:22px;align-items:start}
.profil-avatar{--l:150px}
.profil-avatar .carte,.profil-avatar .ultra{--l:inherit}
.profil-avatar.sans .avatar{width:96px;height:96px;font-size:40px}
.profil-infos{display:grid;gap:14px;min-width:0}
.profil-infos h3{overflow-wrap:anywhere}
.profil-infos h3 small{display:block;font-family:var(--texte);font-size:14px;color:var(--sourd);letter-spacing:0}
.vitrine{display:flex;flex-wrap:wrap;gap:10px;--l:92px;list-style:none;margin-top:6px}
.vitrine .carte,.vitrine .ultra{--l:inherit}
.oeuvres-pote{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.oeuvres-pote a{display:grid;gap:4px;padding:10px 12px;background:#fff;border:3px solid var(--encre);border-radius:8px;text-decoration:none;min-width:0}
.oeuvres-pote a:hover{background:var(--fond)}
.oeuvres-pote .oeuvre-nom{font-family:var(--titre);font-size:20px;letter-spacing:.03em;overflow-wrap:anywhere}
.oeuvres-pote .tag{justify-self:start}
.selection-profil li{position:relative}
.plus-a-toi{font-size:12px;font-weight:800;color:#fff;background:var(--rouge);border:2px solid var(--encre);border-radius:4px;padding:0 5px}
.chez-qui{display:grid;gap:8px}
html{scroll-padding-top:110px}
@media (max-width: 620px){html{scroll-padding-bottom:84px}}
a.inactif{opacity:.5;pointer-events:none}
.echange-ligne [data-msg-geste]:focus{outline:3px solid var(--bleu);outline-offset:2px}
.detenteurs{list-style:none;display:grid;gap:8px}
.detenteurs li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center}
.detenteurs .qui{display:grid;min-width:0;overflow-wrap:anywhere}
.detenteurs .qui small{color:var(--sourd)}

@container app (max-width: 900px){
  .potes{grid-template-columns:minmax(0,1fr)}
}
@container app (max-width: 620px){
  .composition{grid-template-columns:minmax(0,1fr)}
  .cartes-echange,.echange-mini .cote{--l:70px;gap:6px}
  .echange-mini{gap:6px}
  .candidats{--l:92px}
  .profil{grid-template-columns:minmax(0,1fr);justify-items:center}
  .profil-avatar{--l:min(150px,44cqi)}
  .vitrine{--l:58px;gap:6px;justify-content:center}
  .profil-infos{justify-items:center;text-align:center;justify-self:stretch}
  .oeuvres-pote{grid-template-columns:minmax(0,1fr)}
  .detenteurs li{grid-template-columns:auto minmax(0,1fr)}
  .detenteurs li .btn{grid-column:2;justify-self:start}
  .classement .rang,.classement .score{font-size:19px}
  .classement a{grid-template-columns:24px 30px minmax(0,1fr) auto;gap:8px;padding:6px 8px}
  .avatar{width:30px;height:30px}
}
@container app (max-width: 360px){
  .cartes-echange,.echange-mini .cote{--l:60px}
  .candidats{--l:84px}
  .fil li{grid-template-columns:auto minmax(0,1fr)}
  .fil .quand{grid-column:2}
}

/* ============ Son (étape 11) ============ */
/* Bouton de l'en-tête : couper ou remettre le son en un geste, sur tous les écrans. */
.bouton-son{display:grid;place-items:center;width:40px;height:40px;flex:none;padding:0;background:#fff;color:var(--encre);border:3px solid var(--encre);border-radius:8px;cursor:pointer}
.bouton-son .ico{width:22px;height:22px}
.bouton-son[aria-pressed="true"]{background:var(--encre);color:var(--jaune)}
.bouton-son:hover{background:var(--jaune)}
.bouton-son[aria-pressed="true"]:hover{background:var(--encre)}
.compteurs[hidden]+.bouton-son{margin-left:auto}
.volume{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;max-width:100%}
.volume input[type="range"]{width:min(240px,100%);min-height:34px;accent-color:var(--rouge)}
.volume output{font-weight:800;min-width:4.5ch}
@container app (max-width: 620px){
  .bouton-son{width:34px;height:34px;border-radius:7px}
  .bouton-son .ico{width:19px;height:19px}
}
@container app (max-width: 360px){
  .bouton-son{width:32px;height:32px}
}
/* Bouton du son dans la célébration ULTRA, qui recouvre l'en-tête (un geste pour couper, partout). */
.recompense>.bouton-son-celebration{position:absolute;top:calc(12px + env(safe-area-inset-top));right:max(16px,env(safe-area-inset-right));z-index:1}

/* ============ Connexion (étape 2) ============ */
.bloc-connexion{max-width:560px}
.connexion-intro{font-weight:800;font-size:18px}
.actions-google{width:100%}
.btn-google{width:100%;justify-content:center;font-size:24px;padding:14px 18px}
.option-connexion{width:100%;border-top:3px solid var(--encre);padding-top:4px}
.option-connexion>summary{display:flex;align-items:center;gap:8px;min-height:44px;font-weight:800;cursor:pointer;list-style:none}
.option-connexion>summary::-webkit-details-marker{display:none}
.option-connexion>summary::after{content:"";margin-left:auto;width:10px;height:10px;border-right:3px solid var(--encre);border-bottom:3px solid var(--encre);transform:rotate(45deg);transition:transform .15s}
.option-connexion[open]>summary::after{transform:rotate(-135deg)}
.option-connexion>summary:focus-visible{outline:3px solid var(--bleu);outline-offset:2px}
.option-connexion>.form-code{padding:4px 0 12px}
.connexion-appli{margin-top:4px}
/* Connexion sans code (04/11) : « Tu es invité » en encart, le code en secours, plus discret. */
.invitation-recue{width:100%;display:grid;gap:4px;background:var(--jaune);border:3px solid var(--encre);box-shadow:4px 4px 0 var(--encre);padding:12px 14px}
.invitation-titre{font-family:var(--titre);font-size:28px;line-height:1.05;letter-spacing:.03em}
.option-lien{margin:0}
.option-secours{border-top-width:1px;border-top-color:var(--sourd);margin-top:6px}
.option-secours>summary{font-weight:700;color:var(--sourd);min-height:44px}
.option-secours>summary::after{width:8px;height:8px;border-width:0 2px 2px 0;border-color:var(--sourd)}
.form-code>.sec-aide{max-width:44ch}
@media (prefers-reduced-motion: reduce){.option-connexion>summary::after{transition:none}}
.form-code{display:grid;gap:8px;justify-items:start}
.form-code label{font-weight:800}
.champ{width:100%;max-width:360px;border:3px solid var(--encre);background:#fff;padding:10px 12px;font-size:18px;border-radius:0;box-shadow:3px 3px 0 var(--encre)}
.champ:focus-visible{outline:3px solid var(--bleu);outline-offset:2px}
.champ-code{font-weight:800;font-variant-numeric:tabular-nums;font-size:24px;letter-spacing:.12em;text-transform:uppercase}
.champ-pseudo{display:grid;gap:8px;width:100%}
.lien-discret{font-weight:700;text-decoration:underline;text-underline-offset:3px;padding:8px 0}
.code-appareil{font-variant-numeric:tabular-nums;font-size:34px;font-weight:800;letter-spacing:.14em;background:var(--jaune);border:3px solid var(--encre);padding:6px 14px;box-shadow:4px 4px 0 var(--encre);user-select:all;-webkit-user-select:all;overflow-wrap:anywhere}
.appareil{display:grid;gap:10px;justify-items:start}
.page-seule .contenu{padding-bottom:calc(32px + env(safe-area-inset-bottom))}
.etapes{display:grid;gap:12px;padding-left:1.4em;max-width:62ch}
.etapes li{padding-left:4px}
.page-seule .bloc{max-width:640px}
[data-code-montre]{display:grid;gap:10px;justify-items:start}