/* Apparence de la page : couleurs, tailles, animations. */

:root {
  --fond: #0d0b1a;
  --texte: #f6f3ff;
  --discret: #a39fbf;
  --or: #f5c542;
  --or-clair: #ffe9a3;
  --or-fonce: #b8862b;
  --verre: rgba(255, 255, 255, .06);
  --verre-bord: rgba(255, 255, 255, .12);
  --police-titre: "Fredoka", "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

/* Un élément marqué « hidden » reste caché, même s'il a un autre affichage défini plus bas */
[hidden] { display: none !important; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--fond);
  color: var(--texte);
  font-family: "Nunito", "Segoe UI", sans-serif;
  text-align: center;
  overflow-x: hidden;
}

button { font: inherit; cursor: pointer; }

/* ================= Décor de fond ================= */

.ciel {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 120%, #2b1d4d 0%, #120e26 45%, var(--fond) 100%);
}

/* Grandes taches de couleur floues qui dérivent lentement */
.aurore {
  position: absolute;
  width: 60vmax;
  height: 60vmax;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .35;
  animation: derive 22s ease-in-out infinite alternate;
}
.a1 { background: #6d3df5; left: -15vmax; top: -20vmax; }
.a2 { background: #f5a623; right: -20vmax; top: 10vmax; animation-duration: 28s; opacity: .2; }
.a3 { background: #1fb6ff; left: 20vmax; bottom: -35vmax; animation-duration: 34s; opacity: .22; }

@keyframes derive {
  to { transform: translate(8vmax, 6vmax) scale(1.15); }
}

/* Petites étoiles qui scintillent */
.etoiles {
  position: absolute;
  inset: -50%;
  background-image:
    radial-gradient(1.5px 1.5px at 20px 30px, #fff, transparent),
    radial-gradient(1px 1px at 90px 120px, #fff, transparent),
    radial-gradient(1.5px 1.5px at 160px 60px, #ffe9a3, transparent),
    radial-gradient(1px 1px at 230px 180px, #fff, transparent),
    radial-gradient(1px 1px at 300px 90px, #cfe3ff, transparent);
  background-size: 340px 220px;
  opacity: .55;
  animation: scintille 6s ease-in-out infinite alternate, monte 120s linear infinite;
}
@keyframes scintille { to { opacity: .25; } }
@keyframes monte { to { transform: translateY(-220px); } }

/* ================= En-tête ================= */

/* Trois colonnes : logo à gauche, menu au centre, compteur à droite */
.entete {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 16px 32px;
}

.logo { display: flex; align-items: center; gap: 10px; justify-self: start; color: inherit; text-decoration: none; }
.entete-droite { justify-self: end; }

/* ================= Menu ================= */

.menu {
  display: flex;
  gap: 4px;
  padding: 5px;
  border-radius: 999px;
  background: var(--verre);
  border: 1px solid var(--verre-bord);
  backdrop-filter: blur(10px);
}
.menu a {
  display: flex;
  align-items: center;
  white-space: nowrap;
  gap: 8px;
  padding: 9px 18px;
  border-radius: 999px;
  color: var(--discret);
  font-family: var(--police-titre);
  font-weight: 500;
  font-size: .98rem;
  text-decoration: none;
  transition: color .2s, background .2s;
}
.menu a:hover { color: var(--texte); background: rgba(255,255,255,.07); }
.menu svg,
.page-a-venir svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Page affichée : bouton doré */
.menu a[aria-current="page"] {
  background: linear-gradient(180deg, var(--or-clair), var(--or) 50%, var(--or-fonce));
  color: #3a2605;
  font-weight: 600;
  box-shadow: 0 4px 16px rgba(245, 197, 66, .35);
}

/* ================= Pages à venir ================= */

.page-a-venir {
  max-width: 460px;
  margin: 12vh auto 0;
  padding: 44px 36px;
  border-radius: 24px;
  background: var(--verre);
  border: 1px solid var(--verre-bord);
  backdrop-filter: blur(10px);
  animation: page-arrive .4s cubic-bezier(.2,1.2,.4,1);
}
.page-a-venir svg {
  width: 56px;
  height: 56px;
  stroke: var(--or);
  stroke-width: 1.4;
  filter: drop-shadow(0 0 14px rgba(245,197,66,.5));
}
.page-a-venir h2 {
  margin: 14px 0 8px;
  font-family: var(--police-titre);
  font-size: 1.8rem;
  font-weight: 600;
}
.page-a-venir p { margin: 0 0 22px; color: var(--discret); line-height: 1.5; }
.bientot {
  padding: 5px 14px;
  border-radius: 999px;
  border: 1px solid var(--or);
  color: var(--or);
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
}
@keyframes page-arrive {
  from { transform: translateY(20px); opacity: 0; }
}
.logo-texte {
  font-family: var(--police-titre);
  font-size: 1.9rem;
  font-weight: 700;
  letter-spacing: .5px;
}
.logo-texte span {
  background: linear-gradient(180deg, var(--or-clair), var(--or) 55%, var(--or-fonce));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.pastille {
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--verre);
  border: 1px solid var(--verre-bord);
  color: var(--discret);
  font-size: .85rem;
  backdrop-filter: blur(8px);
}
.pastille strong { color: var(--or); }

main { padding: 0 32px 48px; }

/* ================= Boutons ================= */

.bouton {
  padding: 12px 26px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--or-clair), var(--or) 45%, var(--or-fonce));
  color: #3a2605;
  font-family: var(--police-titre);
  font-weight: 600;
  font-size: 1rem;
  box-shadow: 0 6px 20px rgba(245, 197, 66, .35), inset 0 1px 0 rgba(255,255,255,.6);
  transition: transform .15s, box-shadow .15s;
}
.bouton:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(245, 197, 66, .5), inset 0 1px 0 rgba(255,255,255,.6); }
.bouton:active { transform: translateY(1px); }
.bouton.secondaire {
  background: var(--verre);
  border: 1px solid var(--verre-bord);
  color: var(--texte);
  box-shadow: none;
}
.bouton.secondaire:hover { background: rgba(255,255,255,.12); box-shadow: none; }

/* ================= Le booster ================= */

/* L'écran du booster occupe toute la hauteur disponible, booster centré au milieu */
#ecran-booster {
  min-height: calc(100vh - 130px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: crosshair;
  user-select: none;
}
/* Pendant l'ouverture, le paquet qui tombe ne doit pas faire apparaître de barre de défilement */
#ecran-booster.en-cours { overflow: clip; }

/* Onglets de choix de l'extension, au-dessus du booster */
.choix-extension {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 0 0 18px;
}
.onglet-extension {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 8px;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  color: var(--discret);
  font: inherit;
  font-size: .9rem;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.onglet-extension img { height: 30px; width: auto; filter: grayscale(.6); transition: filter .2s; }
.onglet-extension:hover { color: #fff; border-color: rgba(255,255,255,.35); }
.onglet-extension[aria-pressed="true"] { color: var(--or-clair); border-color: var(--or); background: rgba(245,197,66,.12); }
.onglet-extension[aria-pressed="true"] img { filter: none; }
#ecran-booster.en-cours .choix-extension { visibility: hidden; }

.sur-titre {
  margin: 0 0 22px;
  font-family: var(--police-titre);
  font-size: .9rem;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--or);
  opacity: .85;
}

/* La « scène » donne la profondeur 3D quand on incline le booster */
#scene {
  position: relative;
  z-index: 2;
  perspective: 900px;
  width: 260px;
  height: 474px; /* mêmes proportions que l'image du paquet */
  margin: 0 auto;
}

#booster {
  --incline-x: 0deg;
  --incline-y: 0deg;
  --souris-x: 50%;
  --souris-y: 30%;
  --hauteur-bande: 30px; /* hauteur de la bande du haut, celle qu'on déchire */
  position: relative;
  width: 100%;
  height: 100%;
  transform: rotateX(var(--incline-x)) rotateY(var(--incline-y));
  transition: transform .15s ease-out;
  filter: drop-shadow(0 25px 30px rgba(0,0,0,.55)) drop-shadow(0 0 30px rgba(245,197,66,.25));
  animation: flotte 3.5s ease-in-out infinite;
}
#booster.anime { animation: none; transform: none; }

@keyframes flotte {
  50% { translate: 0 -12px; }
}

/* Halo lumineux posé « au sol » sous le booster */
.socle {
  width: 300px;
  height: 46px;
  margin: -6px auto 0;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(245,197,66,.45), rgba(245,197,66,.08) 55%, transparent 70%);
  animation: socle 3.5s ease-in-out infinite;
  transition: opacity .4s;
}
@keyframes socle { 50% { transform: scale(.85); opacity: .7; } }
#ecran-booster.en-cours .socle { opacity: 0; }

/* Le paquet = une seule image, découpée en deux morceaux superposés */
.booster-haut,
.booster-corps {
  position: absolute;
  left: 0;
  right: 0;
  background: var(--image-booster, url(images/booster.png)) no-repeat;
  background-size: 100% auto;
}

/* Bande du haut : on n'affiche que le haut de l'image */
.booster-haut {
  z-index: 3;
  top: 0;
  height: var(--hauteur-bande);
  background-position: 0 0;
  transition: transform .6s cubic-bezier(.2,.8,.3,1), opacity .6s;
}

/* Corps : le reste de l'image, décalé pour se raccorder pile sous la bande */
.booster-corps {
  z-index: 2;
  top: var(--hauteur-bande);
  bottom: 0;
  background-position: 0 calc(-1 * var(--hauteur-bande));
  transition: transform .5s cubic-bezier(.55,0,.9,.45);
}

/* Reflet métallisé qui suit la souris (limité à la forme du paquet grâce au masque) */
.reflet {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at var(--souris-x) var(--souris-y), rgba(255,255,255,.6), transparent 45%),
    linear-gradient(115deg, transparent 20%, rgba(255,255,255,.18) 45%, transparent 55%);
  mix-blend-mode: overlay;
  -webkit-mask: var(--image-booster, url(images/booster.png)) no-repeat 0 calc(-1 * var(--hauteur-bande)) / 100% auto;
          mask: var(--image-booster, url(images/booster.png)) no-repeat 0 calc(-1 * var(--hauteur-bande)) / 100% auto;
}

/* Les cartes cachées dans le paquet */
.pile-cartes {
  position: absolute;
  z-index: 1;
  left: 30px;
  top: 70px;
  width: 200px;
  aspect-ratio: 63 / 88;
  transition: transform .4s cubic-bezier(.2,.9,.3,1.1);
}
.dos-pile {
  position: absolute;
  inset: 0;
  border-radius: 9px;
  background: url(images/dos-carte.png) center / cover;
  box-shadow: 0 0 30px rgba(255, 233, 163, .6);
}

/* Lumière qui filtre par la soudure : un éventail de rayons au-dessus du paquet */
.fuite {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: var(--hauteur-bande);
  width: 420px;
  height: 260px;
  margin-left: -210px;
  transform: translateY(-100%) scaleY(0);
  transform-origin: 50% 100%;
  background:
    repeating-conic-gradient(from -60deg at 50% 100%, rgba(255,240,190,.75) 0 4deg, transparent 4deg 11deg);
  -webkit-mask: radial-gradient(ellipse at 50% 100%, #000 10%, transparent 70%);
          mask: radial-gradient(ellipse at 50% 100%, #000 10%, transparent 70%);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  opacity: 0;
  pointer-events: none;
  transition: transform .5s ease-out, opacity .5s ease-out;
}
/* Au survol, un peu de lumière filtre déjà : ça donne envie de couper */
#booster:not(.anime):hover .fuite { opacity: .4; transform: translateY(-100%) scaleY(.55); }

/* Guide de découpe : pointillés lumineux + ciseaux, sur la soudure */
.guide-coupe {
  position: absolute;
  z-index: 5;
  left: -14px;
  right: -14px;
  top: calc(var(--hauteur-bande) - 1px);
  height: 0;
  border-top: 2px dashed rgba(255, 233, 163, .85);
  filter: drop-shadow(0 0 4px var(--or));
  opacity: 0;
  transition: opacity .25s;
  pointer-events: none;
}
.guide-coupe span {
  position: absolute;
  left: -26px;
  top: -15px;
  font-size: 1.3rem;
  color: var(--or-clair);
  animation: ciseaux 1.4s ease-in-out infinite;
}
@keyframes ciseaux { 50% { transform: translateX(12px); } }
#booster:not(.anime):hover .guide-coupe,
#ecran-booster.invite .guide-coupe { opacity: 1; }

/* Traînée de la lame qui suit la souris */
#lame {
  position: fixed;
  inset: 0;
  /* Taille imposée : sans elle, le calque prenait la taille de son image (2 à 3 fois l'écran sur téléphone)
     et la traînée se dessinait loin du doigt */
  width: 100%;
  height: 100%;
  z-index: 50;
  pointer-events: none;
}

/* Ligne lumineuse de découpe */
.ligne-coupe {
  position: absolute;
  z-index: 5;
  left: 0;
  top: calc(var(--hauteur-bande) - 2px);
  height: 4px;
  width: 0;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 0 10px 3px #fff, 0 0 30px 10px var(--or);
  opacity: 0;
}

/* Éclat de lumière à l'ouverture */
.eclat {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: var(--hauteur-bande);
  width: 340px;
  height: 340px;
  margin: -170px 0 0 -170px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, rgba(255,240,180,.95) 15%, rgba(245,197,66,.45) 40%, transparent 70%);
  transform: scale(0);
  opacity: 0;
  pointer-events: none;
}

/* --- Étapes de l'animation (classes ajoutées une à une par app.js) --- */

/* 1. Coupé ! La ligne de découpe s'illumine et la bande s'envole du côté du coup de lame */
#booster.ouvert .ligne-coupe { width: 100%; animation: coupe .45s ease-out forwards; }
@keyframes coupe {
  0% { opacity: 1; }
  100% { opacity: 0; }
}
#booster.ouvert .booster-haut {
  transform: translate(calc(var(--sens, 1) * 120px), -200px) rotate(calc(var(--sens, 1) * 40deg));
  opacity: 0;
}
#booster.ouvert .fuite { opacity: 1; transform: translateY(-100%) scaleY(1); }
#booster.ouvert .eclat { animation: eclat .9s ease-out forwards; }
@keyframes eclat {
  0% { transform: scale(0); opacity: 0; }
  25% { opacity: 1; }
  100% { transform: scale(2.6); opacity: 0; }
}

/* 2. Les cartes dépassent du paquet */
#booster.sortie .pile-cartes { transform: translateY(-110px); }
#booster.sortie .fuite { opacity: 0; }

/* 3. Le paquet descend hors de l'écran ; les cartes restent sur place */
#booster.fin .booster-corps { transform: translateY(110vh) rotate(4deg); }

.aide {
  display: inline-block;
  margin-top: 18px;
  padding: 8px 18px;
  border-radius: 999px;
  background: var(--verre);
  border: 1px solid var(--verre-bord);
  color: var(--discret);
  font-size: .9rem;
  animation: respire 2.4s ease-in-out infinite;
  transition: opacity .3s;
}
@keyframes respire { 50% { opacity: .55; } }
#ecran-booster.en-cours .aide { opacity: 0; animation: none; }
/* Le message d'aide se secoue si on clique sans trancher */
#ecran-booster.invite .aide { animation: insiste .5s; color: var(--or-clair); border-color: var(--or); }
@keyframes insiste {
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}

/* Secousse de l'écran (plus ou moins forte) */
body.secousse-1 main { animation: secousse .3s linear; --force: 3px; }
body.secousse-2 main { animation: secousse .45s linear; --force: 6px; }
body.secousse-3 main { animation: secousse .7s linear; --force: 10px; }
@keyframes secousse {
  10%, 50%, 90% { transform: translate(calc(-1 * var(--force)), var(--force)); }
  30%, 70%      { transform: translate(var(--force), calc(-1 * var(--force))); }
}

/* ================= Particules (étincelles et confettis) ================= */

.particule {
  position: fixed;
  z-index: 30;
  width: var(--taille);
  height: var(--taille);
  margin: calc(var(--taille) / -2) 0 0 calc(var(--taille) / -2);
  pointer-events: none;
  animation: particule var(--duree) cubic-bezier(.15,.7,.4,1) forwards;
}
.particule.etincelle {
  border-radius: 50%;
  background: var(--couleur);
  box-shadow: 0 0 6px 2px var(--couleur);
}
.particule.confetti {
  height: calc(var(--taille) * .45);
  border-radius: 2px;
  background: var(--couleur);
}
.particule.etoile {
  background: var(--couleur);
  clip-path: polygon(50% 0, 61% 38%, 100% 50%, 61% 62%, 50% 100%, 39% 62%, 0 50%, 39% 38%);
  filter: drop-shadow(0 0 4px var(--couleur));
}
@keyframes particule {
  0%   { transform: translate(0, 0) rotate(0) scale(1); opacity: 1; }
  70%  { opacity: 1; }
  100% { transform: translate(var(--dx), calc(var(--dy) + var(--gravite))) rotate(var(--rot)) scale(.4); opacity: 0; }
}

/* Onde de choc : un anneau qui s'agrandit */
.onde {
  position: fixed;
  z-index: 25;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  border-radius: 50%;
  border: 4px solid var(--couleur);
  box-shadow: 0 0 25px var(--couleur), inset 0 0 25px var(--couleur);
  pointer-events: none;
  animation: onde 1s ease-out forwards;
}
@keyframes onde {
  to { transform: scale(18); opacity: 0; border-width: 1px; }
}

/* ================= La pile de cartes ================= */

#zone-pile {
  position: relative;
  user-select: none; /* évite qu'un glisser de carte sélectionne du texte et bloque le geste */
  z-index: 20; /* au-dessus du voile sombre des célébrations */
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 64px; /* place réservée au grand titre des célébrations */
}

#pile {
  --largeur: 260px;
  position: relative;
  width: var(--largeur);
  aspect-ratio: 63 / 88; /* proportions d'une vraie carte */
  perspective: 1200px;
}

/* Rayons de lumière qui tournent derrière la pile lors d'un hit */
.rayons {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 50%;
  width: 900px;
  height: 900px;
  margin: -450px 0 0 -450px;
  border-radius: 50%;
  background: repeating-conic-gradient(var(--lueur, #fff) 0 7deg, transparent 7deg 20deg);
  -webkit-mask: radial-gradient(circle, #000 12%, transparent 62%);
          mask: radial-gradient(circle, #000 12%, transparent 62%);
  opacity: 0;
  transform: scale(.4);
  transition: opacity .5s, transform .8s cubic-bezier(.2,1.4,.4,1);
  animation: tourne 14s linear infinite;
  pointer-events: none;
}
#pile.avec-rayons .rayons { opacity: .55; transform: scale(1); }
#pile.arc-en-ciel .rayons {
  background: repeating-conic-gradient(#ff4d4d 0 7deg, transparent 7deg 20deg, #ffd84d 20deg 27deg, transparent 27deg 40deg, #4dff88 40deg 47deg, transparent 47deg 60deg, #4dc3ff 60deg 67deg, transparent 67deg 80deg, #b84dff 80deg 87deg, transparent 87deg 100deg);
  animation: tourne 6s linear infinite;
}
@keyframes tourne { to { rotate: 360deg; } }

/* Lueur qui « filtre » sous la carte du dessus quand un hit se cache juste en dessous */
.lueur-dessous {
  position: absolute;
  z-index: 0;
  inset: 4px;
  border-radius: 12px;
  box-shadow: 0 0 calc(var(--soulevement, 0) * 60px) calc(var(--soulevement, 0) * 14px) var(--lueur-dessous, transparent);
  pointer-events: none;
}

/* La pile entière peut pivoter : le dos d'un côté, les faces de l'autre */
.pile-interieur {
  position: absolute;
  z-index: 1;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform .7s cubic-bezier(.4,.2,.2,1);
}
#pile.retournee .pile-interieur { transform: rotateY(180deg); }

.pile-dos,
.pile-faces {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
}

/* Côté dos : la carte retournée du dessus (les autres sont parfaitement alignées dessous) */
.pile-dos {
  cursor: pointer;
  border-radius: 12px;
  background: url(images/dos-carte.png) center / cover;
  box-shadow: 0 25px 45px rgba(0,0,0,.55), 0 0 40px rgba(245,197,66,.25);
  transition: transform .2s, box-shadow .2s;
}
.pile-dos:hover { transform: translateY(-6px); box-shadow: 0 30px 50px rgba(0,0,0,.55), 0 0 55px rgba(245,197,66,.45); }

/* Glissement de la pile depuis l'endroit où étaient les cartes dans le booster */
#pile.glisse-en-place { transition: transform .45s cubic-bezier(.3,.9,.35,1); }

.pile-faces { transform: rotateY(180deg); }

/* Une fois retournée, on fige la pile « à plat » pour pouvoir glisser les cartes normalement */
#pile.fixe .pile-interieur { transition: none; transform: none; }
#pile.fixe .pile-faces { transform: none; }
#pile.fixe .pile-dos { display: none; }

/* Chaque carte de la pile */
.carte-pile {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  overflow: hidden;
  background: #222;
  box-shadow: 0 18px 35px rgba(0,0,0,.5);
  user-select: none;
  touch-action: none;
}
.carte-pile img {
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}
.carte-pile.dessus { cursor: grab; }
.carte-pile.dessus:active { cursor: grabbing; }
.carte-pile.retour { transition: transform .35s cubic-bezier(.3,1.5,.5,1); }
.carte-pile.envol { transition: transform .45s ease-in, opacity .45s ease-in; opacity: 0; pointer-events: none; }

/* Carte « hit » : lueur colorée et reflet qui passe */
.carte-pile.brillante,
.carte-resume.brillante .visuel {
  box-shadow: 0 0 22px 5px var(--lueur), 0 0 60px 14px var(--lueur);
}
.carte-pile.brillante::after,
.carte-resume.brillante .visuel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.6) 50%, transparent 70%);
  background-size: 250% 100%;
  animation: reflet 2.2s linear infinite;
  mix-blend-mode: overlay;
  pointer-events: none;
}
@keyframes reflet {
  from { background-position: 150% 0; }
  to { background-position: -50% 0; }
}

/* La carte « saute » à l'apparition, d'autant plus haut que la carte est rare */
.carte-pile.saute-1 { animation: saute .6s ease-out; --hauteur: 1.06; }
.carte-pile.saute-2 { animation: saute .7s ease-out; --hauteur: 1.1; }
.carte-pile.saute-3 { animation: saute .9s ease-out; --hauteur: 1.16; }
.carte-pile.saute-4 { animation: saute 1s ease-out; --hauteur: 1.2; }
.carte-pile.saute-5 { animation: saute 1.2s ease-out; --hauteur: 1.25; }
@keyframes saute {
  0% { scale: .9; }
  40% { scale: var(--hauteur); rotate: -2deg; }
  70% { scale: calc(var(--hauteur) - .04); rotate: 1deg; }
  100% { scale: 1; rotate: 0deg; }
}

/* Panneau d'informations sous la pile */
/* Contenu centré verticalement, hauteur fixe pour que le panneau ne « saute » pas quand le texte change */
.panneau-infos {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 76px;
  margin-top: 26px;
  padding: 12px 22px;
  min-width: 380px;
  border-radius: 16px;
  background: var(--verre);
  border: 1px solid var(--verre-bord);
  backdrop-filter: blur(10px);
}
#infos-carte {
  margin: 0 0 4px;
  font-size: 1.1rem;
  min-height: 1.6em;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
#infos-carte strong { font-family: var(--police-titre); font-weight: 600; font-size: 1.2rem; }
#infos-carte:empty { display: none; } /* avant de retourner le paquet, seule la consigne s'affiche */
.prix { color: var(--or); font-weight: 800; }
.source-prix {
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(255,255,255,.08);
  color: var(--discret);
  font-size: .65rem;
  font-weight: 600;
  vertical-align: 1px;
  cursor: help;
}
#consigne { margin: 0; color: var(--discret); font-size: .85rem; }

/* Petite étiquette colorée de rareté */
.puce {
  padding: 2px 10px;
  border-radius: 999px;
  border: 1px solid var(--c);
  color: var(--c);
  background: color-mix(in srgb, var(--c) 15%, transparent);
  font-size: .75rem;
  font-weight: 800;
  white-space: nowrap;
}
.puce.arc-en-ciel {
  border-color: transparent;
  background: linear-gradient(90deg, #ff4d4d, #ffd84d, #4dff88, #4dc3ff, #b84dff);
  color: #111;
}

/* Les cartes déjà vues, en petit */
#deja-vues {
  display: flex;
  justify-content: center;
  gap: 10px;
  min-height: 96px;
  margin-top: 18px;
}
.mini {
  width: 64px;
  aspect-ratio: 63 / 88;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0,0,0,.45);
  animation: mini-arrive .4s cubic-bezier(.2,1.4,.4,1);
}
.mini.brillante { box-shadow: 0 0 10px 3px var(--lueur); }
.mini img { width: 100%; height: 100%; display: block; }
.mini .sans-image { font-size: .5rem; padding: 4px; }
.mini .sans-image .nom { font-size: .7rem; }
@keyframes mini-arrive {
  from { transform: translateY(24px) scale(.5); opacity: 0; }
}

/* Carte sans image disponible */
.sans-image {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  background: linear-gradient(135deg, #ff4d4d, #ffd84d, #4dff88, #4dc3ff, #b84dff);
  color: #111;
  font-weight: 800;
}
.sans-image .nom { font-family: var(--police-titre); font-size: 1.6rem; }
.sans-image small { font-weight: 400; }

/* ================= Célébrations ================= */

/* Voile sombre qui met la carte en valeur */
#voile {
  position: fixed;
  inset: 0;
  z-index: 10;
  background: radial-gradient(circle at 50% 40%, transparent 10%, rgba(5, 3, 15, .85) 65%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .5s;
}
body.celebration #voile { opacity: 1; }

/* Grand titre qui s'affiche au-dessus de la carte */
#banniere {
  position: fixed;
  z-index: 40;
  left: 0;
  right: 0;
  top: 64px;
  line-height: 1;
  pointer-events: none;
  font-family: var(--police-titre);
  font-weight: 700;
  letter-spacing: 1px;
  opacity: 0;
}
#banniere.visible { animation: banniere var(--duree, 2s) cubic-bezier(.2,1.2,.4,1) forwards; }
#banniere span {
  display: inline-block;
  padding: 0 .3em;
  background: linear-gradient(180deg, #fff, var(--couleur) 60%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 18px var(--couleur)) drop-shadow(0 4px 0 rgba(0,0,0,.5));
}
#banniere.niveau-1 { font-size: 1.8rem; }
#banniere.niveau-2 { font-size: 2.4rem; }
#banniere.niveau-3 { font-size: 3rem; }
#banniere.niveau-4 { font-size: 3.6rem; }
#banniere.niveau-5 { font-size: 4.4rem; }
#banniere.niveau-5 span {
  background: linear-gradient(90deg, #ff4d4d, #ffd84d, #4dff88, #4dc3ff, #b84dff, #ff4d4d);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: defile 1.2s linear infinite;
}
@keyframes defile { to { background-position: 200% 0; } }
@keyframes banniere {
  0%   { opacity: 0; transform: scale(.3) translateY(30px); }
  15%  { opacity: 1; transform: scale(1.1); }
  25%  { transform: scale(1); }
  80%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.05) translateY(-10px); }
}

/* Flash plein écran */
.flash {
  position: fixed;
  inset: 0;
  z-index: 35;
  pointer-events: none;
  background: radial-gradient(circle, #fff 0%, var(--lueur) 30%, transparent 75%);
  animation: flash .9s ease-out forwards;
}
@keyframes flash {
  from { opacity: .9; }
  to { opacity: 0; }
}

/* ================= Le récapitulatif ================= */

#recap { position: relative; z-index: 20; }
.recap-titre {
  margin: 4px 0 18px;
  font-family: var(--police-titre);
  font-size: 1.5rem;
  font-weight: 600;
}

#cartes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  max-width: 1150px;
  margin: 0 auto;
}

.carte-resume {
  width: 190px;
  animation: resume-arrive .55s cubic-bezier(.2,1.2,.3,1) backwards;
  transition: transform .2s;
}
.carte-resume:hover { transform: translateY(-8px) scale(1.04); }
.carte-resume .visuel {
  position: relative;
  aspect-ratio: 63 / 88;
  border-radius: 10px;
  overflow: hidden;
  background: #222;
  box-shadow: 0 10px 22px rgba(0,0,0,.45);
}
.carte-resume img { width: 100%; height: 100%; display: block; }
@keyframes resume-arrive {
  from { transform: translateY(40px) rotate(-6deg) scale(.85); opacity: 0; }
}

.etiquette {
  margin-top: 10px;
  font-size: .8rem;
  color: var(--discret);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}
.etiquette strong { color: var(--texte); font-family: var(--police-titre); font-weight: 600; font-size: .95rem; }

/* ================= Barre du bas ================= */

.barre {
  position: relative;
  z-index: 20;
  margin-top: 26px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}
#resume:empty { display: none; }
#resume {
  padding: 10px 20px;
  border-radius: 16px;
  background: var(--verre);
  border: 1px solid var(--verre-bord);
  font-size: .95rem;
  color: var(--discret);
}
#resume strong {
  display: block;
  font-family: var(--police-titre);
  font-size: 1.7rem;
  color: var(--or);
  text-shadow: 0 0 18px rgba(245,197,66,.45);
}

/* ================= Ma collection : l'étagère ================= */

.titre-page {
  margin: 0;
  font-family: var(--police-titre);
  font-size: 1.7rem;
  font-weight: 600;
}

#etagere { padding-top: 24px; }
#etagere .titre-page { margin-bottom: 26px; }

#liste-classeurs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 32px;
}

/* Couverture d'un classeur : la photo du vrai classeur de la collection (images/classeur-30.jpg) */
.couverture {
  position: relative;
  width: 280px;
  aspect-ratio: 600 / 754; /* mêmes proportions que la photo */
  padding: 0;
  border: none;
  border-radius: 6px 10px 10px 6px;
  background: var(--image) center / 100% 100% no-repeat;
  filter: drop-shadow(0 22px 26px rgba(0,0,0,.55));
  transition: transform .25s, filter .25s;
}
.couverture:hover { transform: translateY(-8px) rotate(-1deg); filter: drop-shadow(0 30px 32px rgba(0,0,0,.6)) drop-shadow(0 0 30px rgba(255,201,60,.35)); }
/* Progression et valeur, juste sous le classeur */
.couverture-stats {
  position: absolute;
  top: calc(100% + 16px);
  left: 0;
  right: 0;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--verre);
  border: 1px solid var(--verre-bord);
  color: var(--texte);
}
.couverture-nom {
  display: block;
  margin-bottom: 8px;
  font-family: var(--police-titre);
  font-size: .95rem;
  letter-spacing: 1px;
  color: var(--or-clair);
}
.couverture { margin-bottom: 112px; }
.couverture .chiffres { flex-direction: column; align-items: center; gap: 3px; }

/* Barre de progression et chiffres */
.progression {
  height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.1);
  overflow: hidden;
}
.progression span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--or-fonce), var(--or), var(--or-clair));
  box-shadow: 0 0 10px rgba(245,197,66,.6);
}
.chiffres {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 7px;
  font-size: .8rem;
  color: var(--discret);
}
.chiffres strong { color: var(--texte); }

.option {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 34px;
  color: var(--discret);
  font-size: .85rem;
  cursor: pointer;
}
.option input { accent-color: var(--or); width: 16px; height: 16px; cursor: pointer; }

/* ================= Ma collection : un classeur ouvert ================= */

.entete-classeur {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
  max-width: 1000px;
  margin: 6px auto 18px;
}
.entete-classeur > :first-child { justify-self: start; }
.entete-classeur > :last-child { justify-self: end; }
.entete-classeur .stats { width: 360px; margin-top: 8px; }

.navigation-classeur {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 22px;
}
.fleche {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid var(--verre-bord);
  background: var(--verre);
  color: var(--texte);
  font-size: 2rem;
  line-height: 1;
  transition: background .2s, transform .15s;
}
.fleche:hover:not(:disabled) { background: rgba(245,197,66,.2); transform: scale(1.08); }
.fleche:disabled { opacity: .25; cursor: default; }

/* Dimensions du classeur : tout découle de la taille d'une pochette */
.classeur {
  --poche: min(118px, calc((100vh - 330px) / 3 * .716));
  --ecart: 8px;
  --marge: 14px;
  --reliure: 24px;
  --largeur-page: calc(3 * var(--poche) + 2 * var(--ecart) + 2 * var(--marge));
  --hauteur-page: calc(3 * var(--poche) * 1.397 + 2 * var(--ecart) + 2 * var(--marge) + 18px);
  position: relative;
  width: calc(2 * var(--largeur-page) + var(--reliure));
  height: var(--hauteur-page);
  perspective: 2400px;
  user-select: none;
}
/* L'intérieur de la couverture, qui dépasse autour des pages : blanc, comme sur le vrai classeur */
.classeur::before {
  content: "";
  position: absolute;
  inset: -16px;
  border-radius: 16px;
  background: linear-gradient(160deg, #ffffff, #e9e9ee);
  box-shadow: 0 30px 60px rgba(0,0,0,.6);
}

.page-classeur {
  position: absolute;
  top: 0;
  width: var(--largeur-page);
  height: var(--hauteur-page);
  padding: var(--marge);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.05), transparent 60%),
    #17142a;
  box-shadow: inset 0 0 30px rgba(0,0,0,.5);
}
.page-classeur.gauche { left: 0; border-radius: 10px 3px 3px 10px; }
.page-classeur.droite { left: calc(var(--largeur-page) + var(--reliure)); border-radius: 3px 10px 10px 3px; }

/* La reliure, avec ses anneaux */
.reliure {
  position: absolute;
  top: 0;
  left: var(--largeur-page);
  width: var(--reliure);
  height: 100%;
  background:
    linear-gradient(90deg, #c9c9d0, #f4f4f7 50%, #c9c9d0);
}

.grille {
  display: grid;
  grid-template-columns: repeat(3, var(--poche));
  gap: var(--ecart);
}

/* Une pochette du classeur */
.pochette {
  position: relative;
  width: var(--poche);
  aspect-ratio: 63 / 88;
  border-radius: 6px;
  overflow: hidden;
  background: rgba(255,255,255,.035);
  outline: 1px solid rgba(255,255,255,.08);
}
.pochette img { width: 100%; height: 100%; display: block; }
/* Reflet du plastique de la pochette */
.pochette::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(130deg, rgba(255,255,255,.16), transparent 30%, transparent 75%, rgba(255,255,255,.07));
  pointer-events: none;
}
.pochette.vide { background: transparent; outline: 1px dashed rgba(255,255,255,.05); }
.pochette.manquante img { filter: grayscale(1) brightness(.55); opacity: .2; }
.pochette.manquante .sans-image { filter: grayscale(1); opacity: .2; }
.pochette.possedee { cursor: zoom-in; transition: transform .2s, box-shadow .2s; }
/* Seulement avec une souris : sur un écran tactile, le « survol » reste collé là où on a appuyé */
@media (hover: hover) {
  .pochette.possedee:hover { transform: translateY(-3px) scale(1.05); z-index: 2; box-shadow: 0 10px 20px rgba(0,0,0,.5); }
}
.pochette.brillante { box-shadow: 0 0 10px 2px var(--lueur); }
.pochette .sans-image { font-size: .55rem; padding: 6px; gap: 2px; }
.pochette .sans-image .nom { font-size: .85rem; }

.numero-carte {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--police-titre);
  font-size: 1.1rem;
  color: rgba(255,255,255,.35);
}
.possedee .numero-carte { display: none; }
.exemplaires {
  position: absolute;
  top: 4px;
  right: 4px;
  padding: 1px 6px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--or-clair), var(--or));
  color: #3a2605;
  font-size: .65rem;
  font-weight: 800;
  box-shadow: 0 2px 6px rgba(0,0,0,.5);
}
.numero-page {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 5px;
  font-size: .68rem;
  color: rgba(255,255,255,.3);
}

/* Feuille qui tourne : elle pivote autour de la reliure, recto d'un côté, verso de l'autre */
.feuille {
  position: absolute;
  z-index: 5;
  top: 0;
  width: var(--largeur-page);
  height: var(--hauteur-page);
  transform-style: preserve-3d;
  transition: transform .38s cubic-bezier(.45,.05,.3,1); /* même durée que DUREE_PAGE (collection.js) */
}
.feuille.vers-gauche { left: calc(var(--largeur-page) + var(--reliure)); transform-origin: calc(var(--reliure) / -2) 50%; }
.feuille.vers-gauche.tourne { transform: rotateY(-180deg); }
.feuille.vers-droite { left: 0; transform-origin: calc(var(--largeur-page) + var(--reliure) / 2) 50%; }
.feuille.vers-droite.tourne { transform: rotateY(180deg); }
.feuille .page-classeur { left: 0; backface-visibility: hidden; border-radius: 6px; }
.feuille .verso { transform: rotateY(180deg); }

/* Carte agrandie */
#zoom-carte {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(5, 3, 15, .85);
  backdrop-filter: blur(6px);
  cursor: zoom-out;
  animation: apparait .25s ease-out;
}
@keyframes apparait { from { opacity: 0; } }
.zoom-contenu { display: flex; align-items: center; gap: 36px; text-align: left; }
.zoom-visuel {
  width: min(340px, 60vh * .716);
  aspect-ratio: 63 / 88;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(0,0,0,.6);
  animation: zoom-arrive .35s cubic-bezier(.2,1.3,.4,1);
}
.zoom-visuel img { width: 100%; height: 100%; display: block; }
.zoom-visuel.manquante { filter: grayscale(1) brightness(.5); }
@keyframes zoom-arrive { from { transform: scale(.7); opacity: 0; } }
.zoom-infos { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.zoom-infos h3 { margin: 0; font-family: var(--police-titre); font-size: 2rem; font-weight: 600; }
.zoom-infos p { margin: 0; }
.zoom-numero { color: var(--discret); font-size: .9rem; }
.zoom-exemplaires strong { color: var(--or); }

/* ================= Rangement animé après un booster ================= */

#rangement {
  position: fixed;
  inset: 0;
  z-index: 45;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 28px;
  background: rgba(5, 3, 15, .9);
  backdrop-filter: blur(8px);
  animation: apparait .3s ease-out;
}
.rangement-titre {
  margin: 0;
  font-family: var(--police-titre);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--or-clair);
}
.rangement-actions { display: flex; align-items: center; gap: 24px; }
.rangement-actions .option { margin-top: 0; }

.carte-volante {
  position: absolute; /* placée par rapport à la fenêtre de rangement (voir envolerVersPochette) */
  z-index: 46;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0,0,0,.6), 0 0 30px rgba(255,233,163,.5);
  pointer-events: none;
}
.carte-volante img { width: 100%; height: 100%; display: block; }
.carte-volante.en-vol { transition: transform .75s cubic-bezier(.35,.85,.3,1); will-change: transform; }

/* La carte se pose (taille normale, exactement là où la carte volante a atterri), puis un petit rebond */
.pochette.arrivee { animation: arrivee .45s ease-out; box-shadow: 0 0 16px 4px rgba(255,233,163,.8); }
@keyframes arrivee {
  0%, 100% { transform: scale(1); }
  40% { transform: scale(1.07); }
}
.badge-nouvelle {
  position: absolute;
  left: 50%;
  bottom: 6px;
  transform: translateX(-50%);
  padding: 2px 7px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--or-clair), var(--or));
  color: #3a2605;
  font-size: .6rem;
  font-weight: 800;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0,0,0,.5);
}

/* Étiquette « Nouvelle ! » pendant la révélation et dans le récapitulatif */
.puce-nouvelle {
  padding: 2px 9px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--or-clair), var(--or));
  color: #3a2605;
  font-size: .72rem;
  font-weight: 800;
}

/* ================= Chat général ================= */

#bouton-chat {
  position: fixed;
  z-index: 50;
  right: 24px;
  bottom: 24px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--or-clair), var(--or) 45%, var(--or-fonce));
  color: #3a2605;
  font-family: var(--police-titre);
  font-weight: 600;
  font-size: 1rem;
  box-shadow: 0 8px 24px rgba(0,0,0,.45), 0 0 20px rgba(245,197,66,.3);
  transition: transform .15s;
}
#bouton-chat:hover { transform: translateY(-2px); }
#bouton-chat.actif { background: var(--verre); color: var(--texte); border: 1px solid var(--verre-bord); backdrop-filter: blur(10px); }
#bouton-chat svg,
.bouton-partage svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linejoin: round;
  stroke-linecap: round;
}
#non-lus {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: #e8352d;
  color: #fff;
  font-family: "Nunito", sans-serif;
  font-size: .72rem;
  font-weight: 800;
  line-height: 20px;
}

#panneau-chat {
  position: fixed;
  z-index: 55;
  right: 24px;
  bottom: 86px;
  width: 360px;
  height: min(560px, calc(100vh - 200px));
  display: flex;
  flex-direction: column;
  border-radius: 20px;
  background: rgba(22, 18, 40, .94);
  border: 1px solid var(--verre-bord);
  backdrop-filter: blur(14px);
  box-shadow: 0 24px 60px rgba(0,0,0,.6);
  text-align: left;
  overflow: hidden;
  animation: chat-arrive .25s cubic-bezier(.2,1.2,.4,1);
}
@keyframes chat-arrive { from { transform: translateY(20px) scale(.96); opacity: 0; } }

.chat-entete {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid var(--verre-bord);
  font-family: var(--police-titre);
  font-size: 1.1rem;
}
.chat-fermer {
  border: none;
  background: none;
  color: var(--discret);
  font-size: 1.6rem;
  line-height: 1;
}
.chat-fermer:hover { color: var(--texte); }
.chat-note {
  margin: 0;
  padding: 7px 18px;
  background: rgba(245,197,66,.08);
  color: var(--discret);
  font-size: .72rem;
}

#fil-chat {
  flex: 1;
  overflow-y: auto;
  padding: 14px 14px 6px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.chat-vide { margin: auto; color: var(--discret); font-size: .9rem; text-align: center; }

.message {
  max-width: 85%;
  padding: 8px 12px;
  border-radius: 14px 14px 14px 4px;
  background: rgba(255,255,255,.07);
  align-self: flex-start;
}
.message.moi { align-self: flex-end; border-radius: 14px 14px 4px 14px; background: rgba(245,197,66,.16); }
.message-entete { display: flex; gap: 8px; align-items: baseline; font-size: .75rem; color: var(--discret); }
.message-entete strong { color: var(--or-clair); font-size: .82rem; }
.message p { margin: 4px 0 0; font-size: .92rem; line-height: 1.35; word-wrap: break-word; }

/* Carte partagée dans un message */
.carte-partagee {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  padding: 6px;
  border: 1px solid var(--verre-bord);
  border-radius: 10px;
  background: rgba(0,0,0,.25);
  color: var(--texte);
  text-align: left;
  cursor: zoom-in;
}
.carte-partagee-visuel {
  width: 64px;
  aspect-ratio: 63 / 88;
  border-radius: 5px;
  overflow: hidden;
  flex-shrink: 0;
}
.carte-partagee.brillante .carte-partagee-visuel { box-shadow: 0 0 12px 3px var(--lueur); }
.carte-partagee-visuel img { width: 100%; height: 100%; display: block; }
.carte-partagee-visuel .sans-image { font-size: .45rem; padding: 3px; }
.carte-partagee-infos { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; font-size: .85rem; }

.chat-saisie {
  display: flex;
  gap: 8px;
  padding: 12px 14px;
  border-top: 1px solid var(--verre-bord);
}
.chat-saisie input {
  flex: 1;
  min-width: 0;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--verre-bord);
  background: rgba(255,255,255,.06);
  color: var(--texte);
  font: inherit;
  font-size: .9rem;
  outline: none;
}
.chat-saisie input:focus { border-color: var(--or); }
.chat-saisie .bouton { padding: 9px 16px; font-size: .9rem; }
#choix-pseudo { border-top: 1px solid var(--verre-bord); }
#choix-pseudo label { display: block; padding: 12px 14px 0; font-size: .85rem; color: var(--discret); }
#choix-pseudo .chat-saisie { border-top: none; }

/* Bouton « Partager dans le chat » sous les cartes */
.bouton-partage {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid rgba(245,197,66,.5);
  background: rgba(245,197,66,.12);
  color: var(--or-clair);
  font-size: .78rem;
  font-weight: 700;
  transition: background .2s;
}
.bouton-partage:hover { background: rgba(245,197,66,.25); }
.bouton-partage svg { width: 14px; height: 14px; }

/* Fenêtre de partage */
#fenetre-partage {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(5, 3, 15, .8);
  backdrop-filter: blur(6px);
  animation: apparait .2s ease-out;
}
.partage-contenu {
  width: 420px;
  padding: 24px;
  border-radius: 20px;
  background: rgba(22, 18, 40, .97);
  border: 1px solid var(--verre-bord);
  box-shadow: 0 30px 60px rgba(0,0,0,.6);
}
.partage-titre { margin: 0 0 16px; font-family: var(--police-titre); font-size: 1.3rem; font-weight: 600; }
#apercu-partage { display: flex; align-items: center; gap: 16px; text-align: left; margin-bottom: 16px; }
.partage-visuel { width: 110px; aspect-ratio: 63 / 88; border-radius: 8px; overflow: hidden; flex-shrink: 0; }
.partage-visuel.brillante { box-shadow: 0 0 16px 4px var(--lueur); }
.partage-visuel img { width: 100%; height: 100%; display: block; }
.partage-infos { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.partage-infos strong { font-family: var(--police-titre); font-size: 1.2rem; font-weight: 600; }
#champ-partage {
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--verre-bord);
  background: rgba(255,255,255,.06);
  color: var(--texte);
  font: inherit;
  font-size: .92rem;
  resize: none;
  outline: none;
}
#champ-partage:focus { border-color: var(--or); }
.partage-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }

/* ================= Notifications du chat ================= */

/* Le bouton Chat pulse doucement quand des messages attendent */
#bouton-chat.a-des-messages:not(.actif) { animation: appel 2s ease-in-out infinite; }
@keyframes appel {
  0%, 100% { box-shadow: 0 8px 24px rgba(0,0,0,.45), 0 0 0 0 rgba(232,53,45,.6); }
  50% { box-shadow: 0 8px 24px rgba(0,0,0,.45), 0 0 0 10px rgba(232,53,45,0); }
}

#notifications-chat {
  position: fixed;
  z-index: 52;
  right: 24px;
  bottom: 86px;
  display: flex;
  flex-direction: column-reverse;
  gap: 10px;
  width: 320px;
  pointer-events: none;
}
.notification-chat {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 16px;
  border: 1px solid rgba(245,197,66,.4);
  background: rgba(22, 18, 40, .96);
  color: var(--texte);
  text-align: left;
  box-shadow: 0 14px 34px rgba(0,0,0,.55);
  pointer-events: auto;
  animation: notification-arrive .4s cubic-bezier(.2,1.3,.4,1);
  transition: opacity .4s, transform .4s;
}
.notification-chat:hover { border-color: var(--or); }
.notification-chat.disparait { opacity: 0; transform: translateX(30px); }
@keyframes notification-arrive { from { opacity: 0; transform: translateX(40px) scale(.9); } }
.notification-carte {
  width: 40px;
  aspect-ratio: 63 / 88;
  border-radius: 4px;
  overflow: hidden;
  flex-shrink: 0;
}
.notification-carte img { width: 100%; height: 100%; display: block; }
.notification-carte .sans-image { font-size: .3rem; padding: 2px; }
.notification-texte { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: .85rem; }
.notification-texte strong { color: var(--or-clair); }
.notification-texte span {
  color: var(--discret);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* Cloche « notifications du bureau » dans l'en-tête du chat */
.chat-entete-actions { display: flex; align-items: center; gap: 6px; }
.chat-cloche {
  display: flex;
  padding: 5px;
  border: none;
  border-radius: 8px;
  background: none;
  color: var(--discret);
}
.chat-cloche:hover { color: var(--texte); background: rgba(255,255,255,.07); }
.chat-cloche.actif { color: var(--or); }
.chat-cloche svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.chat-cloche.actif svg { fill: rgba(245,197,66,.25); }

/* Étiquette « ×2 doublon » pendant la révélation et dans le récapitulatif */
.puce-doublon {
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid rgba(159,196,255,.6);
  background: rgba(159,196,255,.12);
  color: #cfe0ff;
  font-size: .72rem;
  font-weight: 800;
  white-space: nowrap;
}

/* ================= En-tête : puce de profil ================= */

.entete-droite { display: flex; align-items: center; gap: 12px; }
.entete-droite .pastille { white-space: nowrap; }
#puce-profil {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 14px 4px 4px;
  border-radius: 999px;
  background: var(--verre);
  border: 1px solid var(--verre-bord);
  color: var(--texte);
  font-family: var(--police-titre);
  font-weight: 500;
  font-size: .9rem;
  text-decoration: none;
  transition: background .2s;
}
#puce-profil:hover { background: rgba(255,255,255,.12); }

/* Avatar rond : illustration du Pokémon sur un fond doré, ou de la couleur choisie par le membre
   (--fond-avatar, posée par styleAvatar dans chat.js) : plus clair au centre, plus sombre au bord */
.avatar, .message-avatar, .avatar-classement[style] {
  --fond-avatar: #f5c542;
  background: radial-gradient(circle at 50% 35%, #fff4c9, #f5c542 60%, #b8862b);
  background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--fond-avatar) 25%, white), var(--fond-avatar) 60%, color-mix(in srgb, var(--fond-avatar) 70%, black));
}
.avatar {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  border: 2px solid rgba(245,197,66,.7);
  border: 2px solid color-mix(in srgb, var(--fond-avatar) 70%, transparent);
  overflow: hidden;
  padding: 0;
  flex-shrink: 0;
}
.avatar img { width: 112%; height: 112%; object-fit: contain; }
.avatar.petit { width: 32px; height: 32px; }
.avatar.grand { width: 130px; height: 130px; cursor: pointer; box-shadow: 0 10px 30px rgba(0,0,0,.4), 0 0 30px rgba(245,197,66,.3); transition: transform .2s; }
.avatar.grand:hover { transform: scale(1.05) rotate(-3deg); }
.message-avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: contain;
  align-self: center;
}

/* ================= Page Mon compte ================= */

#page-compte { padding-top: 18px; }
#page-compte .titre-page { margin-bottom: 22px; }

.grille-compte {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  max-width: 980px;
  margin: 0 auto;
  text-align: left;
}
.carte-compte {
  padding: 22px 24px;
  border-radius: 20px;
  background: var(--verre);
  border: 1px solid var(--verre-bord);
  backdrop-filter: blur(10px);
}
.carte-compte h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  font-family: var(--police-titre);
  font-size: 1.2rem;
  font-weight: 600;
}
.carte-compte.profil { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; }
.discret { color: var(--discret); font-size: .85rem; margin: 0; }
.lien { border: none; background: none; color: var(--or); font-size: .85rem; font-weight: 700; padding: 0; }
.lien:hover { text-decoration: underline; }

.champ-groupe { display: flex; flex-direction: column; gap: 6px; width: 100%; margin-top: 12px; text-align: left; }
.champ-groupe label { font-size: .82rem; color: var(--discret); font-weight: 700; }
.champ-groupe input {
  width: 100%;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid var(--verre-bord);
  background: rgba(255,255,255,.06);
  color: var(--texte);
  font: inherit;
  font-size: .95rem;
  outline: none;
}
.champ-groupe input:focus { border-color: var(--or); }
.champ-groupe input:disabled { opacity: .45; cursor: not-allowed; }
.ligne-champ { display: flex; gap: 8px; }
.ligne-champ .bouton { padding: 9px 16px; font-size: .9rem; white-space: nowrap; }
.deux-colonnes { flex-direction: row; gap: 12px; }
.deux-colonnes > div { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.message-champ { margin: 0; min-height: 1.2em; font-size: .8rem; }
.message-champ.succes { color: #6fdc8c; }
.message-champ.erreur { color: #ff7a7a; }
.bientot-actif .bouton { margin-top: 16px; }
.bouton:disabled { opacity: .4; cursor: not-allowed; transform: none; box-shadow: none; }

/* Statistiques en tuiles */
.statistiques { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.statistique {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.05);
}
.statistique strong { font-family: var(--police-titre); font-size: 1.5rem; font-weight: 600; }
.statistique strong small { font-size: .85rem; color: var(--discret); }
.statistique > span { font-size: .75rem; color: var(--discret); }
.meilleure-carte {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px;
  border: 1px solid rgba(245,197,66,.35);
  border-radius: 14px;
  background: rgba(245,197,66,.08);
  color: var(--texte);
  text-align: left;
  cursor: zoom-in;
}
.meilleure-carte > span:last-child { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.meilleure-carte strong { font-family: var(--police-titre); font-size: 1.1rem; font-weight: 600; }
.meilleure-visuel { width: 56px; aspect-ratio: 63 / 88; border-radius: 5px; overflow: hidden; flex-shrink: 0; }
.meilleure-visuel img { width: 100%; height: 100%; display: block; }

/* Interrupteurs (cases à cocher) des préférences */
.interrupteur { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; cursor: pointer; font-size: .9rem; }
.interrupteur input { appearance: none; flex-shrink: 0; width: 40px; height: 22px; border-radius: 999px; background: rgba(255,255,255,.15); position: relative; cursor: pointer; transition: background .2s; }
.interrupteur input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .2s; }
.interrupteur input:checked { background: var(--or); }
.interrupteur input:checked::after { transform: translateX(18px); }

/* Zone sensible */
.carte-compte.danger { border-color: rgba(255,122,122,.3); }
.bouton.danger { margin-top: 14px; background: linear-gradient(180deg, #ff8a8a, #e8352d); color: #fff; box-shadow: 0 6px 20px rgba(232,53,45,.3); }

/* Choix de l'avatar */
#fenetre-avatar {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(5, 3, 15, .8);
  backdrop-filter: blur(6px);
  animation: apparait .2s ease-out;
}
.avatar-contenu {
  width: 560px;
  padding: 24px;
  border-radius: 20px;
  background: rgba(22, 18, 40, .97);
  border: 1px solid var(--verre-bord);
  box-shadow: 0 30px 60px rgba(0,0,0,.6);
}
/* La fenêtre tient dans l'écran : seule la grille des avatars défile */
#fenetre-avatar .avatar-contenu { display: flex; flex-direction: column; max-height: calc(100dvh - 32px); }
#grille-avatars { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; justify-items: center; min-height: 0; overflow-x: hidden; overflow-y: auto; padding: 8px 4px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.25) transparent; }
.titre-couleurs-avatar { margin: 16px 0 8px; font-weight: 800; font-size: .85rem; color: var(--discret); text-align: center; }
#couleurs-avatar { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; align-items: center; }
.pastille-couleur {
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.25);
  background: var(--fond-avatar);
  cursor: pointer;
  padding: 0;
  transition: transform .15s;
}
.pastille-couleur:hover { transform: scale(1.1); }
.pastille-couleur.choisie { border-color: #fff; box-shadow: 0 0 0 3px var(--or); }
/* « Couleur de ton choix » : arc-en-ciel, et le vrai sélecteur de couleur invisible par-dessus */
.pastille-couleur.libre { background: conic-gradient(#e8352d, #f5c542, #4cc36b, #3aa0e8, #9b5de5, #e8352d); }
.pastille-couleur.libre input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0; }
.avatar.choix { width: 72px; height: 72px; cursor: pointer; transition: transform .15s; }
.avatar.choix:hover { transform: scale(1.1); }
.avatar.choix.choisi { border-color: #fff; box-shadow: 0 0 0 3px var(--or), 0 0 20px rgba(245,197,66,.6); }

/* ================= Badges ================= */

.carte-compte.large { grid-column: 1 / -1; }

/* Médaille : un disque métallique de la couleur du palier, avec l'icône au centre */
.medaille {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,.75), transparent 45%),
    radial-gradient(circle, var(--couleur) 0 58%, color-mix(in srgb, var(--couleur) 55%, #000) 60% 100%);
  box-shadow: 0 4px 12px rgba(0,0,0,.4), 0 0 14px color-mix(in srgb, var(--couleur) 50%, transparent);
  flex-shrink: 0;
}
.medaille-icone { font-size: 1.6rem; filter: drop-shadow(0 2px 2px rgba(0,0,0,.35)); }
.medaille.legendaire { animation: legendaire 3s linear infinite; }
@keyframes legendaire { to { filter: hue-rotate(360deg); } }
.medaille.verrouillee { filter: grayscale(1) brightness(.45); box-shadow: none; animation: none; }
.medaille-cadenas { position: absolute; right: -2px; bottom: -2px; font-size: .9rem; filter: grayscale(0) brightness(2); }

.theme-badges + .theme-badges { margin-top: 18px; }
.theme-badges h4 {
  margin: 0 0 10px;
  font-size: .8rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--or);
}
.liste-badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 14px 10px;
  border-radius: 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid transparent;
  text-align: center;
}
.badge.obtenu { background: rgba(245,197,66,.07); border-color: rgba(245,197,66,.25); }
.badge strong { font-family: var(--police-titre); font-weight: 600; font-size: .95rem; }
.badge:not(.obtenu) strong { color: var(--discret); }
.badge-description { font-size: .72rem; color: var(--discret); line-height: 1.3; }
.badge-date { font-size: .68rem; color: var(--or); }
.progression.petite { width: 80%; height: 5px; margin-top: 3px; }
.badge-avancement { font-size: .68rem; color: var(--discret); }

/* Notification « Badge débloqué ! » */
#notification-badge {
  position: fixed;
  z-index: 65;
  top: 78px;
  left: 50%;
  transform: translateX(-50%);
}
.notif-badge {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 24px 14px 16px;
  border-radius: 20px;
  border: 2px solid var(--couleur);
  background: rgba(22, 18, 40, .97);
  color: var(--texte);
  text-align: left;
  box-shadow: 0 20px 50px rgba(0,0,0,.6), 0 0 40px color-mix(in srgb, var(--couleur) 40%, transparent);
  animation: notif-badge-arrive .6s cubic-bezier(.2,1.4,.4,1);
  transition: opacity .4s, transform .4s;
}
.notif-badge.sortie { opacity: 0; transform: translateY(-20px) scale(.95); }
@keyframes notif-badge-arrive { from { opacity: 0; transform: translateY(-40px) scale(.8); } }
.notif-badge .medaille { width: 64px; height: 64px; animation: medaille-tourne 1s cubic-bezier(.2,1.2,.4,1); }
@keyframes medaille-tourne { from { transform: rotateY(540deg) scale(.4); } }
.notif-badge-texte { display: flex; flex-direction: column; gap: 2px; }
.notif-badge-titre { font-size: .72rem; letter-spacing: 2px; text-transform: uppercase; color: var(--couleur); font-weight: 800; }
.notif-badge-texte strong { font-family: var(--police-titre); font-size: 1.3rem; font-weight: 600; }
.notif-badge-texte span:last-child { font-size: .85rem; color: var(--discret); }

/* ================= Écran de connexion / inscription ================= */

#ecran-auth {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  justify-content: center;
  align-items: center;
  background: radial-gradient(ellipse at 50% 0%, rgba(43,29,77,.92), rgba(13,11,26,.97) 70%);
  backdrop-filter: blur(10px);
}
.auth-contenu {
  width: 420px;
  padding: 32px 30px 26px;
  border-radius: 24px;
  background: rgba(22, 18, 40, .95);
  border: 1px solid var(--verre-bord);
  box-shadow: 0 30px 70px rgba(0,0,0,.6), 0 0 60px rgba(245,197,66,.12);
  animation: page-arrive .4s cubic-bezier(.2,1.2,.4,1);
}
.auth-logo { margin: 0 0 22px; font-size: 2.2rem; }
.auth-onglets {
  display: flex;
  gap: 4px;
  padding: 4px;
  margin-bottom: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
}
.auth-onglets button {
  flex: 1;
  padding: 9px;
  border: none;
  border-radius: 999px;
  background: none;
  color: var(--discret);
  font-family: var(--police-titre);
  font-weight: 500;
}
.auth-onglets button.actif { background: linear-gradient(180deg, var(--or-clair), var(--or) 50%, var(--or-fonce)); color: #3a2605; font-weight: 600; }
.auth-formulaire { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: left; }
.auth-formulaire .bouton { width: 100%; margin-top: 16px; }
.auth-formulaire .lien { margin-top: 10px; }
.auth-formulaire > .discret { align-self: stretch; margin-top: 8px; }
.auth-message {
  margin: 16px 0 0;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: .85rem;
  text-align: left;
  line-height: 1.4;
}
.auth-message.erreur { background: rgba(255,122,122,.12); border: 1px solid rgba(255,122,122,.4); color: #ffb3b3; }
.auth-message.succes { background: rgba(111,220,140,.12); border: 1px solid rgba(111,220,140,.4); color: #b6f0c6; }

/* Mon compte : bouton de déconnexion et carte grisée en mode local */
.deconnexion { margin-top: 18px; width: 100%; }
#carte-securite input:disabled,
#carte-securite button:disabled { opacity: .4; cursor: not-allowed; }
#formulaire-mdp .bouton { margin-top: 6px; }

/* Boosters restants aujourd'hui, et paquet grisé quand la limite est atteinte */
.restants { margin: 10px 0 0; color: var(--discret); font-size: .9rem; }
.restants strong { color: var(--or); }
#ecran-booster.epuise #booster { filter: grayscale(.85) brightness(.6); cursor: not-allowed; animation: none; }
#ecran-booster.epuise .aide,
#ecran-booster.epuise .guide-coupe,
#ecran-booster.epuise .socle { display: none; }
#ecran-booster.epuise .restants { color: var(--or-clair); font-size: 1rem; }

/* Extension annoncée (EXTENSIONS_BIENTOT) : le booster est montré en couleur, avec un ruban, sans découpe */
.pastille-bientot {
  padding: 1px 7px;
  border-radius: 999px;
  background: linear-gradient(180deg, #ff8ad8, #b84dff);
  color: #fff;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.onglet-extension.a-venir { border-style: dashed; }
.ruban-bientot, .message-bientot { display: none; }
#ecran-booster.a-venir .ruban-bientot {
  display: block;
  position: absolute;
  z-index: 3;
  left: -24px;
  right: -24px;
  top: 46%;
  padding: 10px 0;
  transform: rotate(-12deg);
  background: linear-gradient(90deg, #b84dff, #ff4dd2 50%, #b84dff);
  box-shadow: 0 8px 24px rgba(0,0,0,.45), 0 0 0 2px rgba(255,255,255,.35) inset;
  color: #fff;
  font-family: var(--police-titre);
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 2px 6px rgba(0,0,0,.35);
  pointer-events: none;
}
#ecran-booster.a-venir #booster { filter: none; cursor: not-allowed; }
#ecran-booster.a-venir .aide,
#ecran-booster.a-venir .guide-coupe,
#ecran-booster.a-venir .restants { display: none; }
#ecran-booster.a-venir .message-bientot { display: block; margin: 14px 0 0; color: var(--or-clair); font-size: 1rem; }

/* ================= Visionneuse de classeur : filtres, choix de page, flèches ================= */

.entete-centre { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.aller-page {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--discret);
  font-size: .85rem;
}
.aller-page select {
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--verre-bord);
  background: rgba(22, 18, 40, .9);
  color: var(--texte);
  font: inherit;
  font-size: .85rem;
  cursor: pointer;
}
.filtres {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  max-width: 1000px;
  margin: 0 auto 22px;
}
.filtre {
  --c: var(--or);
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--c) 45%, transparent);
  background: transparent;
  color: var(--discret);
  font-size: .78rem;
  font-weight: 700;
  transition: background .15s, color .15s;
}
.filtre:hover { color: var(--texte); background: color-mix(in srgb, var(--c) 12%, transparent); }
.filtre.actif { background: color-mix(in srgb, var(--c) 25%, transparent); color: var(--texte); border-color: var(--c); }
.fleches { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.fleche.petite { width: 38px; height: 38px; font-size: 1.2rem; }
.classeur-vide { margin: 18px 0 0; color: var(--discret); }

/* ================= Collectionneurs ================= */

#page-collectionneurs { padding-top: 18px; }
#vue-membres .titre-page { margin-bottom: 6px; }
.recherche {
  width: min(380px, 100%);
  margin: 16px 0 22px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid var(--verre-bord);
  background: rgba(255,255,255,.06);
  color: var(--texte);
  font: inherit;
  outline: none;
}
.recherche:focus { border-color: var(--or); }
#liste-membres {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  max-width: 1100px;
  margin: 0 auto;
}
.membre {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
  border-radius: 20px;
  border: 1px solid var(--verre-bord);
  background: var(--verre);
  color: var(--texte);
  text-align: left;
  backdrop-filter: blur(10px);
  transition: transform .2s, border-color .2s, box-shadow .2s;
}
.membre:hover { transform: translateY(-4px); border-color: rgba(245,197,66,.5); box-shadow: 0 14px 30px rgba(0,0,0,.4); }
.membre.moi { border-color: rgba(245,197,66,.4); background: rgba(245,197,66,.06); }
.membre-haut { display: flex; align-items: center; gap: 12px; }
.avatar.moyen { width: 52px; height: 52px; }
.membre-nom { display: flex; flex-direction: column; gap: 2px; }
.membre-nom strong { font-family: var(--police-titre); font-size: 1.15rem; font-weight: 600; }
.toi { padding: 1px 7px; border-radius: 999px; background: var(--or); color: #3a2605; font-family: "Nunito", sans-serif; font-size: .65rem; vertical-align: 2px; }
.membre-chiffres { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px; font-size: .78rem; color: var(--discret); }
.membre-chiffres strong { color: var(--texte); }
.membre-meilleure { display: flex; align-items: center; gap: 10px; font-size: .82rem; }
.membre-meilleure-visuel { width: 42px; aspect-ratio: 63 / 88; border-radius: 4px; overflow: hidden; flex-shrink: 0; }
.membre-meilleure-visuel img { width: 100%; height: 100%; display: block; }
#vue-membre .entete-centre .avatar { margin-bottom: 2px; }

/* ================= Réactions emoji du chat ================= */

.reactions { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 6px; }
.reaction {
  padding: 1px 7px;
  border-radius: 999px;
  border: 1px solid var(--verre-bord);
  background: rgba(255,255,255,.06);
  color: var(--texte);
  font-size: .78rem;
}
.reaction:hover { background: rgba(255,255,255,.12); }
.reaction.mienne { border-color: var(--or); background: rgba(245,197,66,.18); }
.ajouter-reaction {
  padding: 0 6px;
  border: none;
  border-radius: 999px;
  background: none;
  color: var(--discret);
  font-size: .9rem;
  opacity: 0;
  transition: opacity .15s;
}
.ajouter-reaction small { font-size: .65rem; }
.message:hover .ajouter-reaction,
.ajouter-reaction:focus { opacity: 1; }
.ajouter-reaction:hover { color: var(--texte); }
.choix-reactions {
  position: absolute;
  z-index: 3;
  bottom: calc(100% + 4px);
  left: 0;
  display: flex;
  gap: 2px;
  padding: 4px 6px;
  border-radius: 999px;
  background: rgba(30, 25, 55, .98);
  border: 1px solid var(--verre-bord);
  box-shadow: 0 8px 20px rgba(0,0,0,.5);
}
.message.moi .choix-reactions { left: auto; right: 0; }
.choix-reactions button {
  padding: 2px 4px;
  border: none;
  background: none;
  font-size: 1.2rem;
  transition: transform .12s;
}
.choix-reactions button:hover { transform: scale(1.3); }
/* Bulle « qui a réagi », ouverte en touchant une réaction */
.qui-reaction {
  position: absolute;
  z-index: 3;
  bottom: calc(100% + 4px);
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-width: 150px;
  max-width: 240px;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(30, 25, 55, .98);
  border: 1px solid var(--verre-bord);
  box-shadow: 0 8px 20px rgba(0,0,0,.5);
  font-size: .82rem;
}
.qui-reaction[hidden] { display: none; }
.message.moi .qui-reaction { left: auto; right: 0; align-items: flex-end; }
.qui-reaction strong { font-size: 1.1rem; }
.qui-reaction ul { margin: 0; padding: 0; list-style: none; }
.qui-reaction li { padding: 1px 0; }
.qui-reaction button {
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--or);
  background: rgba(245,197,66,.15);
  color: var(--texte);
  font-size: .78rem;
}

/* =====================================================================
   Téléphones (écrans de moins de 720 px de large)
   ===================================================================== */

/* Sur tous les écrans tactiles : un glissement sur le booster sert à le trancher, pas à faire défiler la page */
/* Autour : on peut toujours faire défiler la page de haut en bas (les gestes horizontaux tranchent) ;
   sur le paquet lui-même, tous les gestes servent à trancher. Plus de booster aujourd'hui : rien à trancher. */
#ecran-booster { touch-action: pan-y; }
#ecran-booster #scene { touch-action: none; }
#ecran-booster.epuise, #ecran-booster.epuise #scene { touch-action: auto; }

@media (max-width: 720px) {
  main { padding: 0 14px 90px; }

  /* En-tête sur deux lignes : logo + profil, puis le menu sur toute la largeur */
  .entete {
    grid-template-columns: 1fr auto;
    gap: 10px;
    padding: 12px 14px 8px;
  }
  .logo-texte { font-size: 1.5rem; }
  .menu {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-content: space-between;
    width: 100%;
  }
  .menu a { flex: 1; flex-direction: column; gap: 2px; padding: 7px 4px; font-size: .68rem; }
  .menu svg { width: 20px; height: 20px; }
  .entete-droite .pastille { display: none; }
  #puce-profil { padding: 3px 10px 3px 3px; font-size: .8rem; }

  /* Booster un peu plus petit pour tenir à l'écran avec le message */
  #ecran-booster { min-height: calc(100vh - 170px); }
  #scene { transform: scale(.82); margin: -40px auto; }
  .aide { font-size: .8rem; }

  /* Pile de cartes et récapitulatif */
  #pile { --largeur: min(240px, 66vw); }
  .panneau-infos { min-width: 0; width: 100%; padding: 10px 14px; }
  #infos-carte { flex-wrap: wrap; font-size: .95rem; }
  .mini { width: 48px; }
  .carte-resume { width: calc(50% - 10px); }
  #cartes { gap: 12px; }
  .barre { gap: 12px; }
  #banniere.niveau-3 { font-size: 2rem; }
  #banniere.niveau-4 { font-size: 2.3rem; }
  #banniere.niveau-5 { font-size: 2.6rem; }

  /* Classeur : les deux pages l'une sous l'autre, sans animation de page */
  .classeur {
    --poche: min(108px, calc((100vw - 92px) / 3));
    height: auto;
    width: var(--largeur-page);
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .page-classeur.gauche,
  .page-classeur.droite { position: relative; left: 0; border-radius: 10px; }
  .reliure, .feuille { display: none; }
  .navigation-classeur { gap: 6px; align-items: flex-start; }
  .navigation-classeur .fleches { position: sticky; top: 40vh; }
  .fleche { width: 36px; height: 36px; font-size: 1.4rem; }
  .fleche.petite { width: 30px; height: 30px; font-size: 1rem; }
  .entete-classeur { grid-template-columns: 1fr; justify-items: center; }
  .entete-classeur > :first-child,
  .entete-classeur > :last-child { justify-self: center; }
  .entete-classeur .stats { width: min(360px, 90vw); }
  .filtres { gap: 5px; }
  .filtre { padding: 4px 10px; font-size: .72rem; }
  /* Sans flou d'arrière-plan : trop lourd pour un téléphone pendant le vol des cartes (le fond est presque opaque) */
  #rangement { gap: 14px; overflow-y: auto; justify-content: flex-start; padding: 20px 0; backdrop-filter: none; background: rgba(5, 3, 15, .96); }

  /* Étagère, carte agrandie */
  .couverture { width: min(260px, 80vw); }
  .zoom-contenu { flex-direction: column; gap: 16px; text-align: center; padding: 20px; }
  .zoom-infos { align-items: center; }
  .zoom-visuel { width: min(260px, 70vw); }

  /* Mon compte et Collectionneurs : une seule colonne */
  .grille-compte { grid-template-columns: 1fr; }
  .statistiques { grid-template-columns: repeat(2, 1fr); }
  .deux-colonnes { flex-direction: column; }
  #grille-avatars { grid-template-columns: repeat(4, 1fr); gap: 10px; }
  .avatar.choix { width: 62px; height: 62px; }
  .avatar-contenu, .partage-contenu, .auth-contenu { width: calc(100vw - 28px); padding: 20px; }
  #liste-membres { grid-template-columns: 1fr; }

  /* Chat en plein écran */
  #bouton-chat { right: 14px; bottom: 14px; padding: 11px 16px; }
  #panneau-chat { inset: 0; width: auto; height: auto; border-radius: 0; z-index: 75; }
  #zoom-carte { z-index: 78; } /* une carte agrandie depuis le chat passe devant lui */
  #notifications-chat { right: 14px; left: 14px; width: auto; bottom: 74px; }
  .ajouter-reaction { opacity: 1; } /* pas de survol sur un écran tactile */
  #notification-badge { width: calc(100vw - 28px); top: 110px; }
  .notif-badge { width: 100%; }
}

/* Boutons « Écouter » des préférences de son */
.essai-sons { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 0 0 10px 52px; }
.essai-sons button {
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--verre-bord);
  background: rgba(255,255,255,.06);
  color: var(--texte);
  font-size: .75rem;
  font-weight: 700;
}
.essai-sons button:hover { border-color: var(--or); background: rgba(245,197,66,.15); }
@media (max-width: 720px) { .essai-sons { padding-left: 0; } }

/* ================= Échanges ================= */

/* Pastille sur « Collectionneurs » dans le menu : propositions qui attendent ma réponse */
.menu a { position: relative; }
.pastille-menu {
  position: absolute;
  top: 2px;
  right: 6px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #e8352d;
  color: #fff;
  font-family: "Nunito", sans-serif;
  font-size: .68rem;
  font-weight: 800;
  line-height: 18px;
  text-align: center;
}

#zone-echanges { max-width: 1100px; margin: 18px auto 0; text-align: left; }
#zone-echanges h3 { margin: 0 0 12px; font-family: var(--police-titre); font-weight: 600; }
#zone-echanges details { margin-top: 12px; }
#zone-echanges summary { cursor: pointer; color: var(--discret); font-size: .85rem; margin-bottom: 10px; }
.echange {
  padding: 14px;
  border-radius: 16px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--verre-bord);
}
.echange + .echange { margin-top: 10px; }
.echange.en_attente { border-color: rgba(245,197,66,.4); }
.echange-entete { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.echange-entete strong { font-family: var(--police-titre); font-weight: 600; }
.echange-cartes { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.echange-fleche { font-size: 1.6rem; color: var(--or); }
.echange-fleche.grande { font-size: 2.2rem; align-self: center; }
.minis-echange { display: flex; gap: 6px; margin-top: 4px; }
.mini-echange {
  width: 52px;
  aspect-ratio: 63 / 88;
  padding: 0;
  border: none;
  border-radius: 4px;
  overflow: hidden;
  cursor: zoom-in;
  background: none;
}
.mini-echange.brillante { box-shadow: 0 0 8px 2px var(--lueur); }
.mini-echange img { width: 100%; height: 100%; display: block; }
.echange-message { margin: 10px 0 0; font-style: italic; color: var(--discret); }
.echange-actions { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.echange-actions .bouton { padding: 8px 18px; font-size: .9rem; }
.statut-echange { font-weight: 700; font-size: .85rem; }
.statut-echange.acceptee { color: #6fdc8c; }
.statut-echange.refusee { color: #ff9a9a; }
.statut-echange.annulee { color: var(--discret); }
.proposer-echange { margin: 6px 0 4px; padding: 8px 18px; font-size: .9rem; }

/* Fenêtre « Proposer un échange » */
#fenetre-echange {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(5, 3, 15, .82);
  backdrop-filter: blur(6px);
  animation: apparait .2s ease-out;
}
.echange-contenu {
  width: min(920px, calc(100vw - 28px));
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  padding: 24px;
  border-radius: 20px;
  background: rgba(22, 18, 40, .97);
  border: 1px solid var(--verre-bord);
  box-shadow: 0 30px 60px rgba(0,0,0,.6);
  text-align: left;
}
.colonnes-echange { display: flex; gap: 16px; margin: 16px 0; }
.colonne-echange { flex: 1; min-width: 0; }
.colonne-echange h4 { margin: 0 0 10px; font-family: var(--police-titre); font-weight: 600; }
/* Recherche et filtres au-dessus de chaque colonne */
.outils-echange { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.recherche-echange { width: 100%; margin: 0; padding: 8px 16px; font-size: 1rem; } /* 16 px : l'iPhone ne zoome pas */
.filtres-echange { display: flex; flex-wrap: wrap; gap: 6px; }
.compte-echange { margin: 0; font-size: .8rem; }
.aucun-resultat { margin: 12px 4px; font-size: .9rem; }
.choix-cartes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  grid-auto-rows: max-content; /* sans ça, Safari (iPhone) écrase les rangées et les cartes se chevauchent */
  align-items: start;
  gap: 8px;
  max-height: 46vh;
  overflow-y: auto;
  padding: 4px;
}
.choix-carte[hidden] { display: none; }
.choix-carte {
  position: relative;
  aspect-ratio: 63 / 88;
  height: auto;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 6px;
  overflow: hidden;
  background: none;
  opacity: .6;
  transition: opacity .15s, transform .15s, border-color .15s;
}
.choix-carte img { width: 100%; height: auto; aspect-ratio: 63 / 88; display: block; }
.choix-carte:hover { opacity: .9; transform: translateY(-2px); }
.choix-carte.choisie { opacity: 1; border-color: var(--or); box-shadow: 0 0 12px rgba(245,197,66,.6); }
.total-echange { margin: 8px 0 0; font-size: .85rem; color: var(--or); min-height: 1.2em; }
#message-echange {
  width: 100%;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid var(--verre-bord);
  background: rgba(255,255,255,.06);
  color: var(--texte);
  font: inherit;
  font-size: .9rem;
  resize: none;
  outline: none;
}
@media (max-width: 720px) {
  .colonnes-echange { flex-direction: column; }
  .echange-fleche.grande { transform: rotate(90deg); }
  .pastille-menu { right: 14px; }
}

/* Carte dont on ne possède qu'un exemplaire, dans la fenêtre d'échange */
.dernier-exemplaire {
  position: absolute;
  top: 3px;
  right: 3px;
  padding: 1px 5px;
  border-radius: 999px;
  background: rgba(232, 53, 45, .9);
  color: #fff;
  font-size: .55rem;
  font-weight: 800;
}

/* Séparation entre les filtres d'état et les filtres de rareté */
.separateur-filtres { width: 1px; align-self: stretch; margin: 0 4px; background: var(--verre-bord); }

/* Étapes pour installer l'app (Mon compte) */
.etapes-installation { margin: 10px 0 0; padding-left: 22px; text-align: left; line-height: 1.6; font-size: .92rem; }
.etapes-installation li + li { margin-top: 4px; }
.icone-partage { display: inline-block; padding: 0 6px; border-radius: 6px; background: rgba(255,255,255,.1); color: #4da3ff; font-weight: 800; }

/* =====================================================================
   Téléphone, version 2 : barre d'onglets en bas, comme une application
   ===================================================================== */

/* Rien ne doit dépasser sur les côtés (pas de défilement horizontal). « clip » plutôt que « hidden » :
   « hidden » empêcherait l'en-tête de rester collé en haut pendant le défilement. */
html, body { overflow-x: clip; }

/* L'onglet Chat n'existe que sur téléphone ; sur ordinateur, c'est le bouton flottant */
.lien-chat { display: none !important; }

/* Le message d'aide parle de souris ou de doigt selon l'écran */
.pour-doigt { display: none; }
@media (pointer: coarse) {
  .pour-souris { display: none; }
  .pour-doigt { display: inline; }
}

@media (max-width: 720px) {
  :root { --barre-onglets: calc(62px + env(safe-area-inset-bottom)); }

  /* En-tête compact qui reste en haut : logo et profil seulement */
  .entete {
    position: sticky;
    top: 0;
    z-index: 40;
    grid-template-columns: 1fr auto;
    /* sur iPhone, la page passe sous l'heure et la batterie : on laisse cette place libre */
    padding: calc(8px + env(safe-area-inset-top)) 14px 8px;
    /* pas de flou ici : il « piégerait » la barre d'onglets (fixe) à l'intérieur de l'en-tête */
    background: rgba(13, 11, 26, .97);
    border-bottom: 1px solid var(--verre-bord);
  }
  .logo-texte { font-size: 1.3rem; }
  #puce-profil { font-size: .78rem; }

  /* Le menu devient une barre d'onglets fixée en bas de l'écran */
  .menu {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 80;
    grid-column: auto;
    grid-row: auto;
    gap: 2px;
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
    border: none;
    border-top: 1px solid var(--verre-bord);
    border-radius: 0;
    background: rgba(16, 13, 32, .94);
    backdrop-filter: blur(14px);
  }
  .menu a, .menu .lien-chat {
    position: relative;
    flex: 1;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    min-width: 0;
    padding: 6px 2px;
    border-radius: 14px;
    font-size: .64rem;
  }
  .menu svg { width: 22px; height: 22px; }
  .menu a[aria-current="page"] {
    background: rgba(245, 197, 66, .14);
    color: var(--or-clair);
    box-shadow: none;
  }
  .menu a[aria-current="page"] svg { stroke: var(--or); }
  /* Chat ouvert : seul l'onglet Chat est en surbrillance */
  .menu:has(.lien-chat[aria-current]) a[data-page][aria-current] { background: none; color: var(--discret); }
  .menu:has(.lien-chat[aria-current]) a[data-page][aria-current] svg { stroke: currentColor; }
  /* Pastilles rouges (messages non lus, échanges en attente) au coin de l'icône */
  .lien-chat:not([data-non-lus=""])[data-non-lus]::after {
    content: attr(data-non-lus);
    position: absolute;
    top: 1px;
    left: calc(50% + 5px);
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: #e8352d;
    color: #fff;
    font: 800 .66rem/18px "Nunito", sans-serif;
  }
  .pastille-menu { top: 1px; right: auto; left: calc(50% + 5px); }

  /* Plus de bouton Chat flottant par-dessus le contenu : le chat est un onglet */
  #bouton-chat { display: none; }
  #panneau-chat { inset: 0 0 var(--barre-onglets) 0; padding-top: env(safe-area-inset-top); }
  #notifications-chat { bottom: calc(var(--barre-onglets) + 10px); }

  main { padding: 0 14px 24px; }

  /* Marge sous le contenu pour qu'il ne passe pas sous la barre d'onglets */
  main { padding-bottom: calc(var(--barre-onglets) + 20px); }

  /* ----- Booster fermé ----- */
  #ecran-booster { min-height: calc(100svh - 58px - var(--barre-onglets)); padding: 8px 0 4px; }
  .choix-extension { gap: 8px; margin-bottom: 10px; }
  .onglet-extension { padding: 5px 12px 5px 6px; font-size: .8rem; }
  .onglet-extension img { height: 24px; }
  .sur-titre { margin-bottom: 8px; font-size: .75rem; letter-spacing: 3px; }
  #scene { transform: scale(.8); margin: -46px auto; }
  .socle { width: 220px; }
  .aide { margin-top: 10px; padding: 7px 14px; font-size: .78rem; }

  /* ----- Révélation : carte plus grande, infos compactes ----- */
  #zone-pile { padding-top: 48px; }
  #pile { --largeur: min(270px, 72vw, calc((100svh - 400px) * .716)); }
  .panneau-infos { margin-top: 16px; min-height: 0; }
  #deja-vues { gap: 6px; min-height: 0; margin-top: 12px; flex-wrap: wrap; }
  .mini { width: 40px; }

  /* ----- Récapitulatif : 3 cartes par ligne, barre d'action collée en bas ----- */
  .recap-titre { margin: 0 0 10px; font-size: 1.25rem; }
  #cartes { gap: 12px 8px; }
  .carte-resume { width: calc((100% - 16px) / 3); }
  .carte-resume:hover { transform: none; }
  .etiquette { margin-top: 6px; gap: 3px; font-size: .62rem; }
  .etiquette strong { font-size: .74rem; line-height: 1.1; }
  .etiquette .puce { padding: 1px 6px; font-size: .56rem; }
  .etiquette .source-prix { display: none; }
  .etiquette .puce-nouvelle, .etiquette .puce-doublon { padding: 1px 7px; font-size: .58rem; }
  .etiquette .bouton-partage { padding: 3px 8px; font-size: .6rem; }
  .barre { margin-top: 14px; }
  /* Une fois le récapitulatif affiché : valeur et bouton restent visibles en bas */
  #recap:not([hidden]) + .barre {
    position: sticky;
    bottom: calc(var(--barre-onglets) + 8px);
    flex-wrap: nowrap;
    justify-content: center;
    gap: 10px;
    padding: 8px;
    border-radius: 18px;
    background: rgba(16, 13, 32, .88);
    border: 1px solid var(--verre-bord);
    backdrop-filter: blur(12px);
  }
  #resume { padding: 0 4px; border: none; background: none; font-size: .7rem; text-align: left; line-height: 1.2; }
  #resume strong { font-size: 1.15rem; }
  .barre .bouton { padding: 10px 16px; font-size: .88rem; white-space: nowrap; }

  /* ----- Classeur : pochettes à la largeur de l'écran, flèches au-dessus ----- */
  .classeur {
    --marge: 10px;
    --ecart: 6px;
    --poche: min(112px, calc((100vw - 28px - 16px - 2 * var(--marge) - 2 * var(--ecart)) / 3));
  }
  .classeur::before { inset: -8px; border-radius: 12px; }
  .navigation-classeur {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "avant . apres" "classeur classeur classeur";
    gap: 14px 0;
  }
  .navigation-classeur .fleches { position: static; flex-direction: row; gap: 6px; }
  .navigation-classeur .fleches:has(.precedente) { grid-area: avant; }
  .navigation-classeur .fleches:has(.suivante) { grid-area: apres; }
  .navigation-classeur .zone-classeur { grid-area: classeur; justify-self: center; }
  .entete-classeur { gap: 10px; margin-bottom: 12px; }
  .entete-classeur .titre-page { font-size: 1.35rem; }
  /* Filtres sur une seule ligne, qu'on fait défiler du doigt */
  .filtres {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    margin: 0 -14px 14px;
    padding: 2px 14px;
    scrollbar-width: none;
  }
  .filtres::-webkit-scrollbar { display: none; }
  .filtre { flex-shrink: 0; }

  /* ----- Collectionneurs et échanges : moins de marges imbriquées ----- */
  .echange { padding: 10px; }
}

/* =====================================================================
   Téléphone, version 3 : une interface pensée pour le mobile
   ===================================================================== */

/* Éléments qui n'existent que sur téléphone */
.bouton-filtres, .voile-filtres, .titre-filtres, .fermer-filtres, .indicateur-page, .onglets-mobile, .points-carrousel { display: none; }

@media (max-width: 720px) {
  .titre-page { font-size: 1.4rem; }

  /* ----- Boosters : tout l'écran tient sans défiler ----- */
  #ecran-booster {
    min-height: calc(100svh - 58px - env(safe-area-inset-top) - var(--barre-onglets));
    justify-content: center;
    padding: 6px 0;
  }
  /* Choix de l'extension : un sélecteur en colonnes égales (image au-dessus, nom dessous), sur toute la largeur */
  .choix-extension {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 0;
    width: 100%;
    max-width: 360px;
    margin: 0 auto 10px;
    padding: 4px;
    border-radius: 18px;
    background: var(--verre);
    border: 1px solid var(--verre-bord);
  }
  .onglet-extension {
    flex-direction: column;
    justify-content: flex-start;
    gap: 3px;
    padding: 6px 2px;
    border: none;
    border-radius: 14px;
    background: none;
    font-size: .72rem;
    line-height: 1.15;
    text-align: center;
  }
  .onglet-extension[aria-pressed="true"] {
    background: linear-gradient(180deg, var(--or-clair), var(--or) 50%, var(--or-fonce));
    border: none;
    color: #3a2605;
    font-weight: 700;
  }
  .onglet-extension img { height: 26px; }
  .onglet-extension.a-venir { border: none; }
  .pastille-bientot { padding: 0 5px; font-size: .52rem; }
  /* Taille du paquet calculée par app.js selon la hauteur de l'écran */
  #scene { transform: scale(var(--echelle, .8)); margin: calc(-237px * (1 - var(--echelle, .8))) auto; }
  .socle { display: none; }
  .restants { margin-top: 6px; }

  /* ----- Révélation : la carte en grand, sa fiche juste dessous ----- */
  #zone-pile { padding-top: 34px; }
  #pile { --largeur: min(84vw, calc((100svh - 58px - var(--barre-onglets) - 240px) * .716)); }
  .panneau-infos { margin-top: 12px; padding: 10px 12px; }
  #infos-carte { justify-content: center; gap: 6px; }
  #consigne { font-size: .78rem; }
  #deja-vues { display: none; }
  .barre { margin-top: 10px; }
  #tout-reveler { padding: 8px 18px; font-size: .85rem; }

  /* ----- Classeur : une seule page à la fois, qui glisse sur le côté ----- */
  .classeur.simple { display: block; width: var(--largeur-page); height: var(--hauteur-page); }
  .classeur.simple .droite,
  .classeur.simple .reliure,
  .classeur.simple .feuille { display: none !important; }
  .classeur.simple .gauche { position: relative; left: 0; transition: transform .16s ease-in, opacity .16s; }
  .classeur.simple .gauche.sort-gauche { transform: translateX(-40%); opacity: 0; }
  .classeur.simple .gauche.sort-droite { transform: translateX(40%); opacity: 0; }
  .classeur.simple .gauche.arrive-droite { animation: page-arrive-droite .16s ease-out; }
  .classeur.simple .gauche.arrive-gauche { animation: page-arrive-gauche .16s ease-out; }
  @keyframes page-arrive-droite { from { transform: translateX(40%); opacity: 0; } }
  @keyframes page-arrive-gauche { from { transform: translateX(-40%); opacity: 0; } }

  /* Flèches et « Page 3 / 12 » au-dessus de la page ; plus besoin du menu « Aller à » */
  .navigation-classeur { grid-template-areas: "avant info apres" "classeur classeur classeur"; align-items: center; }
  .indicateur-page { display: block; grid-area: info; font-family: var(--police-titre); font-size: .95rem; }
  .entete-classeur .aller-page { display: none; }
  .entete-classeur .retour { justify-self: start !important; padding: 6px 14px; font-size: .85rem; }

  /* Filtres : un bouton, qui ouvre un panneau montant du bas de l'écran */
  .bouton-filtres {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 auto 12px;
    padding: 8px 18px;
    border-radius: 999px;
    border: 1px solid var(--verre-bord);
    background: var(--verre);
    color: var(--texte);
    font-weight: 700;
  }
  .nb-filtres:not(:empty) {
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--or);
    color: #3a2605;
    font-size: .72rem;
    line-height: 20px;
  }
  .filtres {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 0;
    padding: 18px 16px calc(18px + env(safe-area-inset-bottom));
    overflow: visible;
    border-radius: 22px 22px 0 0;
    background: #1a1630;
    border-top: 1px solid var(--verre-bord);
    box-shadow: 0 -20px 50px rgba(0,0,0,.5);
    transform: translateY(110%);
    transition: transform .25s ease;
  }
  .filtres-ouverts .filtres { transform: none; }
  .titre-filtres { display: block; width: 100%; margin: 0 0 4px; font-family: var(--police-titre); font-size: 1.1rem; }
  .filtre { padding: 7px 14px; font-size: .85rem; }
  .separateur-filtres { width: 100%; height: 1px; margin: 2px 0; }
  .fermer-filtres { display: block; width: 100%; margin-top: 10px; }
  .voile-filtres {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 89;
    background: rgba(0,0,0,.55);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s;
  }
  .filtres-ouverts .voile-filtres { opacity: 1; pointer-events: auto; }

  /* Étagère : les classeurs en carrousel, on glisse de gauche à droite (le suivant dépasse un peu) */
  #etagere { padding-top: 14px; }
  #etagere .titre-page { margin-bottom: 14px; }
  #liste-classeurs {
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 16px;
    margin: 0 -14px;
    padding: 0 calc((100vw - 70vw) / 2) 4px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  #liste-classeurs::-webkit-scrollbar { display: none; }
  #liste-classeurs .couverture { flex: 0 0 70vw; width: 70vw; scroll-snap-align: center; margin-bottom: 150px; }
  #liste-classeurs .couverture:hover { transform: none; }
  .points-carrousel { display: flex; justify-content: center; gap: 8px; margin-top: -4px; }
  .points-carrousel span { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.25); transition: background .2s, width .2s; }
  .points-carrousel span.actif { width: 22px; border-radius: 999px; background: var(--or); }
  #etagere .option { margin-top: 18px; }

  /* Carte agrandie : elle occupe l'écran */
  .zoom-visuel { width: min(78vw, calc(52svh * .716)); }

  /* ----- Collectionneurs : onglets Membres / Échanges, une ligne compacte par membre ----- */
  .onglets-mobile {
    display: flex;
    max-width: 360px;
    margin: 12px auto;
    padding: 4px;
    border-radius: 999px;
    background: var(--verre);
    border: 1px solid var(--verre-bord);
  }
  .onglets-mobile button {
    flex: 1;
    padding: 8px;
    border: none;
    border-radius: 999px;
    background: none;
    color: var(--discret);
    font-family: var(--police-titre);
    font-weight: 600;
  }
  .onglets-mobile button[aria-pressed="true"] { background: linear-gradient(180deg, var(--or-clair), var(--or) 50%, var(--or-fonce)); color: #3a2605; }
  .onglets-mobile .nb:not(:empty) {
    display: inline-block;
    min-width: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: #e8352d;
    color: #fff;
    font: 800 .68rem/18px "Nunito", sans-serif;
  }
  #vue-membres:not([data-onglet="echanges"]) #zone-echanges { display: none; }
  #vue-membres[data-onglet="echanges"] #recherche-membre,
  #vue-membres[data-onglet="echanges"] #liste-membres { display: none; }
  #zone-echanges { margin-top: 0; padding: 14px; }
  #liste-membres { gap: 8px; }
  .membre { gap: 8px; padding: 10px 12px; border-radius: 14px; }
  .membre:hover { transform: none; }
  .membre-haut { gap: 10px; }
  .membre .avatar.moyen { width: 40px; height: 40px; }
  .membre-nom strong { font-size: 1rem; }
  .membre-nom .discret, .membre-meilleure { display: none; }
  .membre .progression { height: 5px; }
  .membre-chiffres { justify-content: flex-start; gap: 4px 12px; font-size: .72rem; }

  /* ----- Mon compte : sections repliables (on touche le titre) ----- */
  .grille-compte { gap: 10px; }
  .carte-compte { padding: 16px; }
  .carte-compte:not(.profil, #classement-course) h3 { cursor: pointer; }
  .carte-compte:not(.profil, #classement-course) h3::after {
    content: "›";
    margin-left: auto;
    color: var(--discret);
    font-size: 1.5rem;
    transform: rotate(90deg);
    transition: transform .2s;
  }
  .carte-compte.repliee h3 { margin-bottom: 0; }
  .carte-compte.repliee h3::after { transform: none; }
  .carte-compte.repliee > :not(h3) { display: none !important; }
}


/* ================= Page « Jeu » : les mini-jeux ================= */

#page-jeu { max-width: 760px; margin: 0 auto; padding: 24px 16px 40px; }
.sous-titre-jeu { margin: 6px 0 16px; }
.aide-jeu { margin-top: 12px; }

.cadre-jeu {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--verre-bord);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .45);
  /* Pas de zoom, de sélection ni de menu quand on tapote vite sur le jeu */
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.toile-jeu { display: block; width: 100%; aspect-ratio: 4 / 3; cursor: pointer; }

.ecran-jeu {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px;
  background: rgba(13, 11, 26, .55);
  backdrop-filter: blur(2px);
}
.ecran-jeu p { margin: 0; }
.ecran-jeu .discret { color: rgba(255, 255, 255, .85); text-shadow: 0 1px 4px rgba(0, 0, 0, .7); }
.plus-d-essai { font-weight: 800; color: var(--or); text-shadow: 0 1px 4px rgba(0, 0, 0, .7); }
.ecran-jeu[data-type="accueil"] { background: linear-gradient(180deg, rgba(13, 11, 26, .1), rgba(13, 11, 26, .6)); }
.titre-ecran-jeu { font-family: var(--police-titre); font-size: 1.8rem; font-weight: 700; text-shadow: 0 2px 8px rgba(0,0,0,.5); }
.score-jeu { font-family: var(--police-titre); font-size: 2.6rem; font-weight: 700; color: var(--or-clair); line-height: 1; }
.score-jeu span { font-size: 1rem; color: var(--texte); }
.record-jeu { font-weight: 800; color: var(--or); animation: battement 0.9s ease-in-out infinite alternate; }
@keyframes battement { to { transform: scale(1.08); } }

@media (max-width: 720px) {
  #page-jeu { padding: 14px 16px 24px; }
  .sous-titre-jeu { margin-bottom: 12px; }
  .cadre-jeu { border-radius: 14px; }
  .titre-ecran-jeu { font-size: 1.4rem; }
  .score-jeu { font-size: 2rem; }
  .ecran-jeu { gap: 7px; font-size: .9rem; }
  .aide-jeu { display: none; }
}

/* Tableau des meilleurs scores */
#classement-course { margin-top: 22px; text-align: left; }
#classement-course h3 { margin-bottom: 12px; }
.periodes-classement { display: flex; gap: 6px; margin-bottom: 10px; }
.periodes-classement button {
  flex: 1;
  padding: 7px 4px;
  border: 1px solid var(--verre-bord);
  border-radius: 999px;
  background: none;
  color: var(--discret);
  font-weight: 800;
  font-size: .82rem;
}
.periodes-classement button[aria-pressed="true"] { background: rgba(245, 197, 66, .16); border-color: rgba(245, 197, 66, .5); color: var(--or-clair); }
#recompense-classement { margin-bottom: 10px; }
#liste-classement { list-style: none; margin: 0; padding: 0; }
#liste-classement li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px;
  border-radius: 12px;
}
#liste-classement li:nth-child(odd) { background: rgba(255, 255, 255, .03); }
#liste-classement li.moi { background: rgba(245, 197, 66, .12); box-shadow: inset 0 0 0 1px rgba(245, 197, 66, .35); }
#liste-classement .rang { width: 28px; text-align: center; font-weight: 800; color: var(--discret); font-size: 1rem; }
.avatar-classement { width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,.08); object-fit: contain; }
.pseudo-classement { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 800; }
.pokemon-classement { width: 32px; height: 30px; image-rendering: pixelated; }
.score-classement { font-family: var(--police-titre); font-size: 1.1rem; color: var(--or-clair); min-width: 56px; text-align: right; }
#liste-classement .classement-vide { display: block; color: var(--discret); text-align: center; padding: 14px 8px; background: none; }

/* Menu : noms courts des onglets quand la place manque (téléphone, petit écran d'ordinateur) */
@media (max-width: 1180px) {
  .menu .libelle { font-size: 0; }
  .menu .libelle::after { content: attr(data-court); font-size: .88rem; }
}
@media (max-width: 720px) {
  .menu .libelle::after { font-size: .64rem; }
  /* Le jeu prend toute la largeur de l'écran */
  .cadre-jeu { margin: 0 -16px; border-radius: 0; border-left: none; border-right: none; }
  #classement-course { margin-top: 16px; padding: 16px 12px; }
}

/* Choix du mini-jeu : PokéRun, PokéInvader ou PokéSafari */
.choix-jeu { display: flex; justify-content: center; gap: 8px; margin-top: 10px; }
.choix-jeu button {
  padding: 8px 16px;
  border: 1px solid var(--verre-bord);
  border-radius: 999px;
  background: var(--verre);
  color: var(--discret);
  font-weight: 800;
  font-size: .9rem;
}
.choix-jeu button[aria-pressed="true"] { background: rgba(245, 197, 66, .16); border-color: rgba(245, 197, 66, .6); color: var(--or-clair); }
#cadre-invasion .toile-jeu, #cadre-safari .toile-jeu { cursor: crosshair; }
@media (max-width: 720px) {
  .choix-jeu { margin-top: 6px; }
  .choix-jeu { gap: 6px; }
  .choix-jeu button { flex: 1; padding: 7px 4px; font-size: .78rem; white-space: nowrap; }
}

/* Choix du Pokémon des mini-jeux */
#choix-pokemon { display: flex; justify-content: center; gap: 8px; margin-bottom: 6px; }
#choix-pokemon button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 92px;
  padding: 6px 4px;
  border: 1px solid var(--verre-bord);
  border-radius: 14px;
  background: var(--verre);
  color: var(--texte);
  font-size: .76rem;
  font-weight: 800;
  transition: transform .15s, background .2s;
}
#choix-pokemon button:hover { transform: translateY(-2px); }
#choix-pokemon button[aria-pressed="true"] { background: rgba(245, 197, 66, .16); border-color: rgba(245, 197, 66, .6); color: var(--or-clair); }
#choix-pokemon img { width: 48px; height: 45px; image-rendering: pixelated; }
#choix-pokemon .verrouille { position: relative; color: var(--discret); }
#choix-pokemon .verrouille::after { content: "🔒"; position: absolute; top: 4px; right: 5px; font-size: .7rem; }
#choix-pokemon .verrouille img { filter: brightness(0) opacity(.35); }
#indice-pokemon { min-height: 1.2em; margin-bottom: 8px; color: var(--or-clair); }
.bonus-boosters { color: var(--or-clair); font-weight: 800; white-space: nowrap; }

@media (max-width: 720px) {
  #choix-pokemon { gap: 4px; margin: 0 -8px 4px; }
  #choix-pokemon button { flex: 1; width: auto; min-width: 0; padding: 5px 2px; font-size: .6rem; border-radius: 12px; }
  #choix-pokemon button span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #choix-pokemon img { width: 40px; height: 37px; }
}

/* ================= Missions de découverte ================= */

#bouton-missions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 8px 16px;
  border: 1px solid var(--verre-bord);
  border-radius: 999px;
  background: var(--verre);
  color: var(--texte);
  font-weight: 800;
  font-size: .9rem;
}
#bouton-missions:hover { background: rgba(255, 255, 255, .1); }
#bouton-missions.a-recuperer {
  border-color: rgba(245, 197, 66, .7);
  background: rgba(245, 197, 66, .16);
  color: var(--or-clair);
  animation: appel-missions 1.4s ease-in-out infinite;
}
@keyframes appel-missions { 50% { box-shadow: 0 0 0 6px rgba(245, 197, 66, .15); } }
.avancement-missions { color: var(--discret); font-weight: 600; }
.nb-missions { font-weight: 800; }

#fenetre-missions {
  position: fixed;
  inset: 0;
  z-index: 75;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 16px;
  background: rgba(5, 3, 15, .8);
  backdrop-filter: blur(6px);
  animation: apparait .2s ease-out;
}
.missions-contenu {
  position: relative;
  width: 520px;
  max-width: 100%;
  max-height: 100%;
  overflow-y: auto;
  padding: 22px 20px 16px;
  border-radius: 22px;
  background: #1a1531;
  border: 1px solid var(--verre-bord);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
  text-align: left;
}
.missions-titre { margin: 0 0 4px; font-family: var(--police-titre); font-size: 1.5rem; font-weight: 600; }
.fermer-missions {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  color: var(--texte);
}
#avancement-missions { display: flex; align-items: center; gap: 10px; margin: 14px 0 10px; font-weight: 800; color: var(--or-clair); }
.barre-missions { flex: 1; height: 8px; border-radius: 99px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.barre-missions span { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--or-fonce), var(--or)); transition: width .4s; }
#liste-missions { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
#liste-missions li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid transparent;
}
#liste-missions li.faite { border-color: rgba(245, 197, 66, .5); background: rgba(245, 197, 66, .08); }
#liste-missions li.reussie { opacity: .55; }
.icone-mission { font-size: 1.5rem; width: 32px; text-align: center; }
.texte-mission { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.texte-mission small { color: var(--discret); font-size: .8rem; line-height: 1.3; }
#liste-missions .bouton { padding: 8px 14px; font-size: .82rem; white-space: nowrap; }
.mission-ok { font-size: 1.3rem; padding: 0 8px; }

@media (max-width: 720px) {
  #fenetre-missions { align-items: flex-end; padding: 0; }
  .missions-contenu { width: 100%; max-height: 88vh; border-radius: 22px 22px 0 0; padding: 20px 14px calc(16px + env(safe-area-inset-bottom)); }
  #liste-missions li { gap: 10px; padding: 9px 10px; }
  #liste-missions .bouton { padding: 7px 10px; font-size: .76rem; }
}
.fin-periode { display: block; margin-top: 3px; font-size: .78rem; color: var(--discret); }
/* Petite image de booster à côté des récompenses de missions */
.mini-booster { height: 1.5em; width: auto; vertical-align: middle; margin: -.3em 0 -.2em 2px; transform: rotate(-10deg); filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .45)); }
.bouton .mini-booster { height: 2.3em; margin: -.75em -4px -.75em 4px; }
#liste-missions .bouton:has(.mini-booster) { padding-right: 10px; }

/* Téléphone : textes d'au moins 16 px dans les champs de saisie. En dessous, l'iPhone zoome tout seul
   quand on touche le champ et reste zoomé ensuite, ce qui décalait le trait de découpe et les animations. */
@media (max-width: 720px) {
  input, textarea, select { font-size: 16px !important; }
}