/* base.css — Fondations PARTAGÉES (landing + jeu) : palette, reset, blobs,
   header, boutons bonbon, bannière cookies, keyframes communs. */
:root {
  --coral: #FF5C8A;
  --grape: #7C5CFF;
  --sky:   #35B6FF;
  --lime:  #37D9A0;
  --sun:   #FFC24B;

  --ink:      #3B2E52;   /* texte principal */
  --ink-soft: #7C7191;   /* texte secondaire */
  --card:     #FFFFFF;
  --line:     #EFE7F5;

  --bg1: #FFF4E8;        /* crème */
  --bg2: #FFE7F1;        /* rose poudré */
  --bg3: #EAF3FF;        /* bleu très clair */

  --r-lg: 28px;
  --r-md: 18px;
  --r-sm: 13px;
  --shadow-card: 0 14px 34px rgba(93, 61, 120, 0.13);
  --shadow-soft: 0 6px 16px rgba(93, 61, 120, 0.14);
  --ease: cubic-bezier(.34, 1.36, .5, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

html, body {
  margin: 0;
  min-height: 100%;
  font-family: "Nunito", system-ui, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(1200px 700px at 12% -8%, var(--bg2), transparent 60%),
    radial-gradient(1100px 800px at 100% 0%, var(--bg3), transparent 55%),
    linear-gradient(160deg, var(--bg1), #FFF9F0 60%, var(--bg2));
  background-attachment: fixed;
}

/* Bulles décoratives en fond */
.blobs { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.blob { position: absolute; border-radius: 50%; filter: blur(6px); opacity: .28; }
.b1 { width: 240px; height: 240px; background: var(--coral); top: 8%; right: 6%; }
.b2 { width: 180px; height: 180px; background: var(--sky);  bottom: 12%; left: 4%; }
.b3 { width: 140px; height: 140px; background: var(--sun);  top: 40%; left: 46%; opacity:.18; }
.b4 { width: 200px; height: 200px; background: var(--lime); bottom: 4%; right: 18%; opacity:.2; }

/* ---------------- HEADER ---------------- */
.hero {
  position: relative; z-index: 30;   /* au-dessus du contenu landing/jeu (z-index:1) → le menu langue reste cliquable */
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 22px 34px 10px;
}
.hero-logo { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.hero-emoji {
  width: 56px; height: 56px; display: block;
  border-radius: 18px; box-shadow: var(--shadow-soft);
  transform: rotate(-6deg);
}
.hero-brand {
  font-family: "Fredoka", system-ui, sans-serif; font-weight: 700;
  font-size: 30px; line-height: 1; letter-spacing: .3px;
  background: linear-gradient(100deg, var(--coral), var(--grape) 55%, var(--sky));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-tag {
  font-family: "Fredoka", system-ui, sans-serif; font-weight: 500; font-size: 13px;
  color: var(--grape); background: #fff; padding: 8px 14px;
  border-radius: 999px; box-shadow: var(--shadow-soft);
}

/* ===== "Le site qui vit" ===== */
/* micro-rebond des gros boutons au survol */
@keyframes candyBounce { 0%{transform:translateY(0)} 35%{transform:translateY(-4px)} 70%{transform:translateY(-1px)} 100%{transform:translateY(-2px)} }
.candy.big:hover { animation: candyBounce .32s var(--ease); }

/* ===== BANNIÈRE COOKIES ===== */
.cookie-banner {
  position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%);
  z-index: 100; width: min(720px, calc(100% - 24px));
  background: #fff; border-radius: var(--r-md); box-shadow: var(--shadow-card);
  padding: 14px 18px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  animation: popInX .3s var(--ease);
}
.ck-txt { flex: 1; min-width: 220px; font-family: "Nunito", system-ui, sans-serif; font-weight: 700; font-size: 13.5px; color: var(--ink); line-height: 1.4; }
.ck-txt b { color: var(--grape); }
.ck-btns { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.ck-link { font-family: "Fredoka", system-ui, sans-serif; font-weight: 600; font-size: 13px; color: var(--ink-soft); text-decoration: none; }
.ck-link:hover { color: var(--grape); text-decoration: underline; }
.ck-b { font-family: "Fredoka", system-ui, sans-serif; font-weight: 700; font-size: 13.5px; padding: 9px 16px; border-radius: 999px; cursor: pointer; border: none; }
.ck-refuse { background: #fff; color: var(--ink-soft); border: 2px solid var(--line); }
.ck-accept { background: var(--lime); color: #08402e; box-shadow: 0 3px 0 #21b585; }
.ck-accept:hover { filter: brightness(1.03); }
@media (max-width: 560px) { .ck-btns { width: 100%; justify-content: flex-end; margin-left: 0; } }
/* ---------------- BOUTONS "BONBON" ---------------- */
.candy {
  font-family: "Fredoka", system-ui, sans-serif; font-weight: 600;
  font-size: 15px; color: #fff;
  border: none; border-radius: var(--r-md);
  padding: 13px 18px; cursor: pointer;
  box-shadow: 0 5px 0 rgba(0,0,0,.14), var(--shadow-soft);
  transition: transform .14s ease-out, box-shadow .14s ease-out, filter .14s ease-out;
  position: relative;
  /* Un bouton bonbon n'est jamais souligné, qu'il soit <button> ou <a>. Sans
     cette ligne, tout <a class="candy"> hérite du soulignement des liens : la
     nav le masquait par hasard (.hero-nav a), pas les autres pages. */
  text-decoration: none;
}
/* Un <a> est en ligne par défaut : ses marges internes ne réservent pas de
   hauteur et le texte ne se centre pas. En flex, il se comporte enfin comme
   le <button> dont il copie l'allure. */
a.candy { display: inline-flex; align-items: center; justify-content: center; text-align: center; }
.candy::before {   /* reflet du dessus */
  content: ""; position: absolute; inset: 3px 3px auto 3px; height: 42%;
  border-radius: 14px 14px 20px 20px;
  background: linear-gradient(#ffffff70, #ffffff00);
  pointer-events: none;
}
.candy:hover { filter: brightness(1.05); transform: translateY(-1px); }
.candy:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(0,0,0,.14), var(--shadow-soft); }
.candy:disabled { filter: grayscale(.5) brightness(1.05); opacity: .55; cursor: not-allowed; box-shadow: 0 5px 0 rgba(0,0,0,.1); }
.candy.full { width: 100%; }
.candy.big { font-size: 17px; padding: 16px 18px; }

.candy-coral { background: var(--coral); box-shadow: 0 5px 0 #d63e6c, var(--shadow-soft); }
.candy-grape { background: var(--grape); box-shadow: 0 5px 0 #5b3fd6, var(--shadow-soft); }
.candy-sky   { background: var(--sky);   box-shadow: 0 5px 0 #1f92d6, var(--shadow-soft); }
.candy-lime  { background: var(--lime);  box-shadow: 0 5px 0 #21b585, var(--shadow-soft); color: #08402e; }
.candy-sun   { background: var(--sun);   box-shadow: 0 5px 0 #e0a01f, var(--shadow-soft); color: #5b3d00; }
.candy-ghost {
  background: #fff; color: var(--ink);
  box-shadow: 0 3px 0 var(--line), var(--shadow-soft);
  border: 2px solid var(--line);
}
.candy-ghost:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--line), var(--shadow-soft); }
.kbd {
  font-family: "Fredoka", system-ui, sans-serif; font-size: 11px; font-weight: 600;
  background: var(--line); color: var(--ink-soft);
  padding: 2px 7px; border-radius: 7px; margin-left: 4px;
}

@keyframes shakeX {
  10%,90%{transform:translateX(-1px)} 20%,80%{transform:translateX(2px)}
  30%,50%,70%{transform:translateX(-5px)} 40%,60%{transform:translateX(5px)}
}
.shake { animation: shakeX .4s; }
/* keyframes partagés (utilisés par la bannière cookies et la 404) */
/* =========================================================================
   ANIMATIONS D'APPARITION — une règle : elles ne portent JAMAIS le
   positionnement de l'élément.

   L'ancienne « tipIn » embarquait translate(-50%), qui n'est pas un effet mais
   le décalage d'un élément posé à left:50%. Appliquée à un élément non centré,
   elle le poussait vers la gauche de la moitié de sa largeur pendant toute
   l'animation, puis il sautait à sa place. Sur une fenêtre plein écran, cela
   faisait un glissement de la moitié de l'écran.

   Trois variantes selon le centrage de l'élément, et rien d'autre :
     popIn    → élément déjà à sa place
     popInX   → élément centré horizontalement (left:50%)
     popInXY  → élément centré dans les deux sens
   Toutes font la même chose : un fondu et un léger agrandissement.
   ========================================================================= */
@keyframes fadeIn   { from { opacity: 0; } to { opacity: 1; } }
@keyframes popIn    { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
@keyframes popInX   { from { opacity: 0; transform: translateX(-50%) scale(.96); } to { opacity: 1; transform: translateX(-50%) scale(1); } }
@keyframes popInXY  { from { opacity: 0; transform: translate(-50%, -50%) scale(.94); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }

/* Conservée pour compatibilité, mais réservée aux éléments à left:50%. */
@keyframes tipIn { from { opacity: 0; transform: translateX(-50%) scale(.96); } to { opacity: 1; transform: translateX(-50%) scale(1); } }
@keyframes missPop { 0%{opacity:0; transform:translate(-50%,-50%) scale(.5) rotate(-6deg)} 60%{opacity:1; transform:translate(-50%,-50%) scale(1.12)} 100%{transform:translate(-50%,-50%) scale(1)} }

/* ===== Sélecteur de langue déroulant (scalable N langues) ===== */
.lang-menu { position: relative; display: inline-block; }
.lang-btn { display: inline-flex; align-items: center; gap: 5px; font-family: "Fredoka", system-ui, sans-serif; font-weight: 700; font-size: 13px; color: var(--ink); background: #fff; border: 1.5px solid var(--line); border-radius: 999px; padding: 6px 11px; cursor: pointer; box-shadow: var(--shadow-soft); transition: border-color .14s; }
.lang-btn:hover { border-color: var(--grape); }
.lang-globe { font-size: 14px; }
.lang-caret { font-size: 10px; color: var(--ink-soft); transition: transform .16s; }
.lang-menu.open .lang-caret { transform: rotate(180deg); }
.lang-list { position: absolute; top: calc(100% + 6px); right: 0; z-index: 80; margin: 0; padding: 6px; list-style: none; min-width: 168px; background: #fff; border: 1.5px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-card); transform-origin: top right; animation: popIn .16s var(--ease); }
.lang-list li { margin: 0; }
.lang-opt { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; border: none; background: transparent; cursor: pointer; font-family: "Fredoka", system-ui, sans-serif; font-weight: 600; font-size: 14px; color: var(--ink); padding: 9px 11px; border-radius: 10px; transition: background .12s; }
.lang-opt:hover { background: rgba(124, 92, 255, .09); }
.lang-opt.on { color: var(--grape); }
.lang-opt.on::after { content: '✓'; margin-left: auto; font-weight: 700; }
.lang-flag { font-size: 16px; line-height: 1; }

/* ===== ZONE B — header/footer partagés (chargés sur TOUTES les pages) ===== */

/* Emplacement du bouton de connexion. Tant que les comptes ne sont pas
   configurés il reste vide, sans largeur : le header ne bouge pas d'un pixel. */
.hero-auth { display: inline-flex; align-items: center; }

/* Compteur live discret du header de JEU (play — base.css est chargé ici,
   landing.css non). Même esprit que .hero-live mais plus sobre. */
.game-live {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: "Nunito", system-ui, sans-serif; font-weight: 800; font-size: 12.5px;
  color: #1c7a5a; background: rgba(55, 217, 160, .14);
  padding: 5px 11px; border-radius: 999px; white-space: nowrap;
}
.game-live[hidden] { display: none; }

/* Réseaux sociaux — FOOTER public uniquement (landing, légal, 404). Monochromes,
   couleur du texte du footer, teinte de marque au survol. Jamais dans le header. */
.lf-social { display: flex; gap: 12px; justify-content: center; align-items: center; margin: 4px 0 12px; }
.social-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 10px; color: var(--ink-soft);
  transition: color .14s, background .14s, transform .12s;
}
.social-link:hover { color: var(--grape); background: rgba(124, 92, 255, .10); transform: translateY(-1px); }
.social-ico { width: 20px; height: 20px; display: block; }


/* Footer COMPACT du jeu (play) : une ligne discrète, ne gêne jamais le canvas. */
.game-footer {
  position: relative; z-index: 1; text-align: center;
  padding: 14px 20px 20px; margin-top: 8px;
  font-family: "Fredoka", system-ui, sans-serif; font-size: 12.5px;
  display: flex; gap: 14px; justify-content: center; align-items: center; flex-wrap: wrap;
}
.game-footer .gf-link { color: var(--grape); text-decoration: none; font-weight: 600; }
.game-footer .gf-link:hover { text-decoration: underline; }
.game-footer .gf-copy { color: var(--ink-soft); font-weight: 600; }

/* ===== MOBILE : header compact (le desktop n'est pas touché) =====
   Le header prenait ~96px de haut sur téléphone, au détriment du canvas
   (qui est collé juste en dessous en jeu). On le resserre. */
@media (max-width: 900px) {
  .hero { padding: 10px 12px 4px; gap: 10px; }
  .hero-logo { gap: 9px; }
  .hero-emoji { width: 40px; height: 40px; border-radius: 13px; }
  .hero-brand { font-size: 21px; }
  .hero-nav { gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
  .hero-tag { display: none; }              /* baseline décorative : place au contenu */
  .lang-btn { padding: 8px 12px; }          /* cible tactile confortable */
  .game-live, .hero-live { font-size: 12px; padding: 5px 10px; }
  /* footer public : liens aérés et pouce-compatibles */
  .lf-social { gap: 10px; }
  .cookie-banner { padding: 12px 14px; gap: 10px; }
  .ck-txt { font-size: 13px; }
  .ck-b { padding: 11px 15px; }             /* Refuser / Accepter : cibles ≥44px */
  .ck-link { padding: 8px 4px; }
}

/* Compteur live : chiffres à largeur fixe pour ne pas décaler le header */
.hero-live, .game-live { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* =========================================================================
   COMPTES — bouton du header, modales, page /compte
   Le compte est optionnel : ces styles ne s'appliquent qu'à des éléments
   créés par auth-ui.js, donc uniquement quand les comptes sont configurés.
   ========================================================================= */

/* ---- Bouton / pastille du header --------------------------------------- */
.auth-btn {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: "Fredoka", system-ui, sans-serif; font-weight: 600; font-size: 14px;
  color: var(--ink); text-decoration: none;
  background: #fff; border: 2px solid var(--line); border-radius: 999px;
  padding: 8px 15px; cursor: pointer;
  box-shadow: var(--shadow-soft);
  transition: transform .16s var(--ease), border-color .16s ease;
  /* Hauteur figée : le passage « Connexion » → pseudo ne change pas le header. */
  min-height: 40px; white-space: nowrap;
}
.auth-btn:hover { transform: translateY(-1px); border-color: var(--grape); }
.auth-btn:active { transform: translateY(1px); }
.auth-me .auth-nom {
  /* Tronqué pour que la pastille fasse exactement la largeur du bouton
     « Connexion » : passer de déconnecté à connecté ne décale rien. */
  max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.auth-badge { font-size: 14px; line-height: 1; }

/* ---- Modale ------------------------------------------------------------- */
.auth-overlay {
  position: fixed; inset: 0; z-index: 9000;
  display: flex; align-items: center; justify-content: center;
  padding: 18px;
  background: rgba(59, 46, 82, .46);
  backdrop-filter: blur(3px);
  animation: authFade .18s ease both;
}
@keyframes authFade { from { opacity: 0; } to { opacity: 1; } }
.auth-modal {
  position: relative;
  width: min(420px, 100%);
  max-height: calc(100dvh - 36px); overflow-y: auto;
  background: var(--card); border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  padding: 26px 24px 22px;
  animation: authPop .26s var(--ease) both;
}
@keyframes authPop { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
.auth-x {
  position: absolute; top: 12px; right: 12px;
  width: 34px; height: 34px; border-radius: 50%;
  border: none; background: var(--line); color: var(--ink-soft);
  font-size: 15px; cursor: pointer; line-height: 1;
}
.auth-x:hover { background: #E6DAF0; color: var(--ink); }

.auth-h {
  font-family: "Fredoka", system-ui, sans-serif; font-weight: 700;
  font-size: 22px; margin: 0 0 6px; color: var(--ink);
}
.auth-sub { margin: 0 0 18px; font-size: 14px; line-height: 1.5; color: var(--ink-soft); }
.auth-lab {
  display: block; margin: 0 0 6px;
  font-family: "Fredoka", system-ui, sans-serif; font-weight: 600; font-size: 13.5px;
}
.auth-in {
  width: 100%; padding: 13px 14px; margin-bottom: 12px;
  font-family: "Nunito", system-ui, sans-serif; font-weight: 700; font-size: 15px;
  color: var(--ink); background: #FCFAFE;
  border: 2px solid var(--line); border-radius: var(--r-sm);
  outline: none; transition: border-color .16s ease;
}
.auth-in:focus { border-color: var(--grape); background: #fff; }
.auth-modal .candy { width: 100%; justify-content: center; }
.auth-google { display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
.auth-or {
  display: flex; align-items: center; gap: 12px;
  margin: 16px 0; color: var(--ink-soft); font-size: 12.5px; font-weight: 700;
}
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 2px; background: var(--line); border-radius: 2px; }
.auth-note { margin: 12px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-soft); }

/* Zone de message à hauteur réservée : afficher une erreur ne fait pas sauter
   le bouton en dessous (règle « aucune zone ne change de taille »). */
.auth-msg {
  margin: 10px 0 0; min-height: 38px;
  font-size: 13.5px; font-weight: 700; line-height: 1.4;
  display: flex; align-items: center;
}
.auth-msg.ok  { color: #1E9E74; }
.auth-msg.err { color: #D6376A; }

/* ---- Page /compte ------------------------------------------------------- */
.cpt-wrap { max-width: 640px; margin: 0 auto; padding: 40px 20px 70px; }
.cpt-card {
  background: var(--card); border-radius: var(--r-lg);
  box-shadow: var(--shadow-card); padding: 30px 28px;
}
.cpt-infos { margin: 18px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 10px 18px; align-items: baseline; }
.cpt-infos dt { font-family: "Fredoka", system-ui, sans-serif; font-weight: 600; font-size: 13.5px; color: var(--ink-soft); }
.cpt-infos dd { margin: 0; font-size: 15px; font-weight: 700; word-break: break-word; }
.cpt-actions { margin-top: 22px; }
.cpt-actions .candy { width: auto; }

/* Suppression de compte : visuellement à part, jamais confondue avec le reste. */
.cpt-danger {
  margin-top: 30px; padding: 20px 18px;
  border: 2px solid #FBD9E4; border-radius: var(--r-md); background: #FFF7FA;
}
.cpt-danger h2 { margin: 0 0 8px; font-family: "Fredoka", system-ui, sans-serif; font-size: 16px; color: #C22E5F; }
.cpt-danger p { margin: 0 0 14px; font-size: 13.5px; line-height: 1.55; color: var(--ink-soft); }
.cpt-del {
  font-family: "Fredoka", system-ui, sans-serif; font-weight: 600; font-size: 14px;
  color: #C22E5F; background: #fff; border: 2px solid #F3B9CC; border-radius: 999px;
  padding: 11px 20px; cursor: pointer; transition: background .16s ease, color .16s ease;
}
.cpt-del:hover { background: #FDECF2; }
.cpt-del.armed { background: #D6376A; border-color: #D6376A; color: #fff; }
.cpt-del:disabled { opacity: .55; cursor: not-allowed; }

@media (max-width: 620px) {
  .auth-modal { padding: 24px 18px 18px; }
  .auth-h { font-size: 20px; }
  .cpt-card { padding: 24px 18px; }
  .cpt-infos { grid-template-columns: 1fr; gap: 3px 0; }
  .cpt-infos dd { margin-bottom: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .auth-overlay, .auth-modal { animation: none; }
}

/* Le bouton de connexion prend de la place dans le header. La classe .has-auth
   est posée sur <html> AVANT tout rendu (auth-ui.js), donc ces règles s'appliquent
   dès le premier pixel : la largeur est réservée et rien ne saute quand la session
   se résout. Sans comptes configurés, aucune de ces règles ne s'applique et le
   header reste exactement comme avant. */
.hero-nav a { white-space: nowrap; }
.auth-ico { display: none; font-size: 16px; line-height: 1; }
/* Le slot ne se laisse jamais écraser par ses voisins et garde une largeur
   constante : « Connexion » et le pseudo occupent la même place. */
.has-auth .hero-auth { flex: 0 0 auto; width: 160px; justify-content: flex-end; }
.has-auth .auth-btn { min-width: 160px; max-width: 160px; justify-content: center; }

@media (max-width: 1080px) { .has-auth .hero-live { display: none; } }
/* Enfant DIRECT : la pastille de compte, elle, vit dans .hero-auth et reste. */
@media (max-width: 1000px) { .has-auth .hero-nav > a:not(.nav-cta) { display: none; } }

/* Sous 820 px le header n'a plus la place d'un libellé : le bouton devient une
   pastille (👤 déconnecté, 🖌️ connecté). Le nom reste lisible par les lecteurs
   d'écran via aria-label. */
@media (max-width: 820px) {
  .has-auth .hero-auth { width: 44px; min-width: 44px; }
  /* landing.css masque tous les liens de la nav sous 820 px : on remet celui du
     compte, qui n'est pas un lien de navigation mais l'accès à son espace. */
  .has-auth .hero-auth a.auth-btn { display: inline-flex; }
  /* Largeur FIXE : la pastille fait exactement la même taille connecté ou non. */
  /* Cible tactile de 44 px de côté, comme le reste de l'interface mobile. */
  .has-auth .auth-btn { width: 44px; min-width: 44px; min-height: 44px; padding: 0; gap: 0; }
  .has-auth .auth-txt, .has-auth .auth-me .auth-nom { display: none; }
  .has-auth .auth-ico { display: inline; }
}
/* Sur les plus petits écrans, le mot-symbole cède sa place au bouton : le logo
   seul suffit à identifier le site, et tout tient sur une ligne. */
@media (max-width: 520px) { .has-auth .hero-brand { display: none; } }

/* Bloc avatar de la page « Mon compte ». */
.cpt-avatar { margin-top: 26px; padding-top: 22px; border-top: 2px solid var(--line); }
.cpt-avatar h2 { margin: 0 0 14px; font-family: "Fredoka", system-ui, sans-serif; font-size: 16px; }
.cpt-av-ligne { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.cpt-av-img {
  width: 96px; height: 96px; flex: 0 0 auto;
  border-radius: 50%; background: #F6F1FB; border: 3px solid var(--line);
  object-fit: contain; padding: 6px;
}
.cpt-av-defaut { opacity: .55; }
.cpt-av-txt { flex: 1 1 220px; }
.cpt-av-btns { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
/* (le soulignement et l'alignement sont désormais réglés sur .candy lui-même) */


/* Mouvement réduit : les apparitions deviennent instantanées. Le fondu seul
   reste acceptable, mais l'agrandissement est un mouvement. */
@media (prefers-reduced-motion: reduce) {
  .cookie-banner, .lang-list, .auth-overlay, .auth-modal,
  .howto-modal, .howto-box, .tip, .toast, .bigtoast, .cp, .reveal-miss {
    animation: none !important;
  }
}

/* Pseudo verrouillé : un joueur connecté joue sous le pseudo de son compte.
   Le champ reste LISIBLE (pas grisé au point d'être illisible), mais il se
   voit d'un coup d'œil qu'il ne s'édite pas ici. */
.pseudo-verrouille { background: #F6F1FB; cursor: not-allowed; color: var(--ink); }
.pseudo-compte {
  display: block; margin-top: 5px;
  font-family: "Nunito", system-ui, sans-serif; font-weight: 700; font-size: 12px;
  color: var(--ink-soft);
}
.pseudo-compte a { color: var(--grape); }
/* Petit lien d'action dans « Mon compte », à côté d'une valeur. */
.cpt-lien {
  border: none; background: none; cursor: pointer; padding: 2px 6px; border-radius: 7px;
  font-family: "Fredoka", system-ui, sans-serif; font-weight: 600; font-size: 12.5px;
  color: var(--grape);
}
.cpt-lien:hover { background: var(--line); }


/* =========================================================================
   CARTE DE PROFIL (profil-vue.js)

   Dans base.css et non dans landing.css : la page de JEU ne charge que
   base.css, et c'est elle qui affiche la carte en fenêtre quand on clique le
   nom d'un joueur. Poser ces règles dans landing.css donnerait une popup nue
   en pleine partie.
   ========================================================================= */
/* La PAGE qui accueille la carte (le jeu, lui, la met dans .pf-fenetre). */
.pf-page { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; padding: 34px 20px 70px; }
/* NOM COMPLET, pas « .pf » : landing.css utilise déjà cette classe pour les
   pastilles rondes de 42 px du bloc partenaires. La collision transformait
   toute la carte de profil en pastille. */
.pf-carte { max-width: 720px; margin: 0 auto; }

/* ---- bandeau d'identité ---- */
.pf-hero {
  position: relative; text-align: center; overflow: hidden;
  border-radius: var(--r-lg) var(--r-lg) 26px 26px;
  padding: 34px 26px 26px;
  background: linear-gradient(135deg, #FF5C8A, #7C5CFF 52%, #35B6FF);
  box-shadow: var(--shadow-card);
}
/* Voile clair en bas : le nom reste lisible quel que soit le dégradé. */
.pf-hero::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 62%;
  background: linear-gradient(#0000, rgba(20, 12, 34, .28)); pointer-events: none;
}
.pf-av-cadre { position: relative; display: inline-block; z-index: 1; }
.pf-av {
  width: 124px; height: 124px; display: block; border-radius: 34px;
  object-fit: contain; background: #fff; padding: 8px;
  box-shadow: 0 14px 30px rgba(20, 12, 34, .28);
}
/* Lio générique : on l'atténue pour qu'il ne passe pas pour une création. */
.pf-av-defaut { opacity: .78; }
.pf-av-pinceau {
  position: absolute; right: -8px; bottom: -8px;
  width: 42px; height: 42px; border-radius: 50%;
  background: #fff; box-shadow: var(--shadow-soft);
  display: grid; place-items: center; font-size: 21px;
}
/* Le clap d'un partenaire, à la place du pinceau. Un liseré violet le
   distingue du badge ordinaire sans changer la géométrie de l'avatar. */
.pf-av-clap { box-shadow: 0 0 0 3px var(--grape, #7C5CFF), var(--shadow-soft); }

/* --- BANDEAU PARTENAIRE, sous le pseudo -------------------------------------
   Posé sur l'en-tête coloré du profil : les couleurs y sont inversées, d'où
   le fond translucide clair plutôt que le violet habituel. */
.pf-part { position: relative; z-index: 1; margin: 10px 0 2px; }
.pf-part-tag {
  display: inline-block; font-size: 12px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .05em;
  background: rgba(255, 255, 255, .22); color: #fff;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 999px; padding: 4px 12px;
}
.pf-part-liens { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; margin-top: 10px; }
/* 40px : on reste au-dessus du seuil tactile, sur un en-tête déjà chargé. */
.pf-part-lien {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px;
  padding: 0 14px; border-radius: 999px; text-decoration: none;
  font-weight: 700; font-size: 14px;
  background: rgba(255, 255, 255, .92); color: #2c2a3a;
  transition: transform .12s ease, background .12s ease;
}
.pf-part-lien:hover { background: #fff; transform: translateY(-1px); }
/* Le seul lien qui ramène au jeu : on le distingue des chaînes externes. */
.pf-part-salle { background: var(--lime, #37D9A0); color: #10352a; }
.pf-part-salle:hover { background: #2FCB94; }
@media (max-width: 480px) {
  .pf-part-lien { font-size: 13px; padding: 0 12px; }
}

.pf-nom {
  position: relative; z-index: 1; margin: 16px 0 2px;
  font-family: "Fredoka", system-ui, sans-serif; font-weight: 700;
  font-size: 33px; line-height: 1.1; color: #fff;
  text-shadow: 0 2px 12px rgba(20, 12, 34, .3);
  word-break: break-word;
}
.pf-depuis {
  position: relative; z-index: 1; margin: 0;
  font-family: "Nunito", system-ui, sans-serif; font-weight: 700;
  font-size: 13.5px; color: rgba(255, 255, 255, .92);
}

/* ---- le taux de réussite, en vedette ---- */
.pf-vedette {
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  background: #fff; border-radius: var(--r-lg); padding: 22px 26px;
  box-shadow: var(--shadow-card); margin-top: 14px;
}
.pf-anneau { flex: 0 0 auto; }
.pf-vedette-txt { flex: 1 1 180px; min-width: 0; }
.pf-vedette-txt strong {
  display: block; font-family: "Fredoka", system-ui, sans-serif;
  font-weight: 700; font-size: 21px; color: var(--ink); margin-bottom: 4px;
}
.pf-vedette-txt span {
  font-family: "Nunito", system-ui, sans-serif; font-weight: 700;
  font-size: 14px; color: var(--ink-soft); line-height: 1.45;
}

/* ---- quatre tuiles ---- */
.pf-tuiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 12px; }
.pf-tuile {
  border-radius: var(--r-md); padding: 16px 12px; text-align: center;
  box-shadow: var(--shadow-soft);
}
.t-rose   { background: #FFE1EC; }
.t-violet { background: #EDE7FF; }
.t-bleu   { background: #E1F0FF; }
.t-vert   { background: #DFF7EE; }
.pf-ico { display: block; font-size: 20px; line-height: 1; margin-bottom: 6px; }
.pf-val {
  display: block; font-family: "Fredoka", system-ui, sans-serif; font-weight: 700;
  font-size: 25px; line-height: 1.1; color: var(--ink);
}
.pf-lib {
  display: block; margin-top: 4px;
  font-family: "Nunito", system-ui, sans-serif; font-weight: 800;
  font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-soft);
}

/* ---- pose et décor préférés, en images ---- */
.pf-gouts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.pf-gout {
  display: flex; align-items: center; gap: 14px;
  background: #fff; border-radius: var(--r-md); padding: 12px 14px;
  box-shadow: var(--shadow-soft); min-width: 0;
}
.pf-gout-img {
  flex: 0 0 auto; width: 68px; height: 68px; border-radius: 14px;
  overflow: hidden; background: var(--line); display: grid; place-items: center;
}
.pf-gout-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* La pose est un dessin sur fond transparent : elle se contient, elle ne se rogne pas. */
.pf-gout-pose { background: #F6F1FB; }
.pf-gout-pose img { object-fit: contain; padding: 7px; }
.pf-gout-txt { min-width: 0; }
.pf-gout-txt strong {
  display: block; font-family: "Fredoka", system-ui, sans-serif; font-weight: 700;
  font-size: 17px; color: var(--ink); line-height: 1.2; word-break: break-word;
}

/* ---- succès ---- */
.pf-succes { background: #fff; border-radius: var(--r-lg); padding: 22px 26px; box-shadow: var(--shadow-card); margin-top: 12px; }
.pf-succes h2 { font-family: "Fredoka", system-ui, sans-serif; font-weight: 700; font-size: 19px; margin: 0 0 12px; color: var(--ink); }
/* Les succès se lisent en grille, obtenus ET à obtenir. Chaque case porte son
   nom et sa condition : c'est la condition qui donne envie de rejouer, un nom
   seul reste une énigme. Les non-obtenus s'effacent sans disparaitre. */
.pf-succ-grille {
  display: grid; gap: 9px;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
.pf-succ {
  display: flex; flex-direction: column; gap: 2px;
  border-radius: var(--r-md); padding: 10px 13px;
  background: var(--line); color: var(--ink);
  font-family: "Fredoka", system-ui, sans-serif;
}
.pf-succ b { font-weight: 600; font-size: 13.5px; }
.pf-succ small {
  font-family: "Nunito", system-ui, sans-serif; font-weight: 700;
  font-size: 11.5px; line-height: 1.35; color: var(--ink-soft);
}
/* Obtenu : la médaille se voit, sans clignoter. */
.pf-succ-ok {
  background: linear-gradient(120deg, #FFF6E0, #FFEFD0);
  box-shadow: inset 0 0 0 2px rgba(255, 194, 75, .55);
}
/* Emplacement à venir : un cadenas dit « il y aura quelque chose ici ».
   Un bloc vide dit « il n'y a rien ». Ce n'est pas le même message. */
.pf-succ-vide { opacity: .55; }
.pf-succ-compte { margin: 12px 0 0; font-family: "Nunito", system-ui, sans-serif; font-weight: 700; font-size: 13px; color: var(--ink-soft); }

.pf-note {
  margin: 18px 0 0; text-align: center; opacity: .85;
  font-family: "Nunito", system-ui, sans-serif; font-weight: 700; font-size: 12px; color: var(--ink-soft);
}

/* ---- profil inexistant ---- */
.pf-vide { background: #fff; border-radius: var(--r-lg); padding: 44px 28px; text-align: center; box-shadow: var(--shadow-card); max-width: 620px; margin: 0 auto; }
.pf-vide img { opacity: .5; margin-bottom: 10px; }
.pf-vide h1 { font-family: "Fredoka", system-ui, sans-serif; font-weight: 700; font-size: 25px; margin: 0 0 8px; color: var(--ink); }
.pf-vide p { font-family: "Nunito", system-ui, sans-serif; font-weight: 700; font-size: 15px; color: var(--ink-soft); margin: 0 0 22px; }
.pf-vide-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.pf-vide-note { margin: 16px 0 0 !important; font-size: 12.5px !important; opacity: .85; }

/* ---- chargement ---- */
.pf-chargement { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 60px 20px; font-family: "Nunito", system-ui, sans-serif; font-weight: 700; color: var(--ink-soft); }
.pf-spin { width: 20px; height: 20px; border: 3px solid var(--line); border-top-color: var(--grape); border-radius: 50%; animation: pfSpin .7s linear infinite; }
@keyframes pfSpin { to { transform: rotate(360deg); } }

/* ---- la même carte, en fenêtre par-dessus le jeu ---- */
.pf-overlay {
  position: fixed; inset: 0; z-index: 120;
  background: rgba(24, 15, 40, .58); backdrop-filter: blur(3px);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 26px 16px; overflow: auto;
  animation: fadeIn .18s ease-out;
}
.pf-fenetre {
  position: relative; width: min(720px, 100%);
  animation: popIn .22s var(--ease);
}
.pf-fermer {
  position: absolute; top: 10px; right: 10px; z-index: 3;
  width: 38px; height: 38px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(255, 255, 255, .92); color: var(--ink);
  font-size: 17px; line-height: 1; box-shadow: var(--shadow-soft);
}
.pf-fermer:hover { background: #fff; }
/* Le lien vers la vraie page, sous la carte : la fenêtre dépanne, la page se
   partage. */
.pf-lien-page { display: block; text-align: center; margin-top: 14px; font-family: "Fredoka", system-ui, sans-serif; font-weight: 600; font-size: 13.5px; color: #fff; text-decoration: none; opacity: .92; }
.pf-lien-page:hover { text-decoration: underline; }

@media (max-width: 620px) {
  .pf-tuiles { grid-template-columns: 1fr 1fr; }
  .pf-gouts { grid-template-columns: 1fr; }
  .pf-nom { font-size: 27px; }
  .pf-hero { padding: 28px 18px 22px; }
  .pf-vedette { padding: 18px; gap: 16px; justify-content: center; text-align: center; }
  .pf-vedette-txt { flex-basis: 100%; }
  .pf-succes, .pf-vedette { border-radius: var(--r-md); }
}

@media (prefers-reduced-motion: reduce) {
  .pf-overlay, .pf-fenetre { animation: none; }
  .pf-spin { animation-duration: 2s; }
}

/* =========================================================================
   MON COMPTE — mise en page revue.

   L'ancienne version empilait tout dans une carte unique : titre, liste de
   définitions, avatar, actions, suppression, au même poids visuel. On ne
   savait pas où regarder, et l'avatar peint — la seule chose que le joueur ait
   réellement créée — arrivait en troisième position derrière son e-mail.

   Maintenant : une identité en en-tête, puis des blocs distincts, du plus
   utile au plus dangereux.
   ========================================================================= */

/* ---- en-tête d'identité ---- */
.cpt-tete {
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  background: linear-gradient(135deg, #FFF0F5, #F2ECFF 55%, #E9F4FF);
  border-radius: var(--r-lg); padding: 24px 26px; margin-bottom: 16px;
  border: 1px solid var(--line);
}
.cpt-tete-av { position: relative; flex: 0 0 auto; }
.cpt-tete-av img {
  width: 104px; height: 104px; display: block; border-radius: 28px;
  object-fit: contain; background: #fff; padding: 7px; box-shadow: var(--shadow-soft);
}
.cpt-tete-pinceau {
  position: absolute; right: -7px; bottom: -7px;
  width: 36px; height: 36px; border-radius: 50%; background: #fff;
  display: grid; place-items: center; font-size: 18px; box-shadow: var(--shadow-soft);
}
.cpt-tete-txt { flex: 1 1 200px; min-width: 0; }
.cpt-tete-txt h1 {
  font-family: "Fredoka", system-ui, sans-serif; font-weight: 700;
  font-size: 30px; line-height: 1.15; margin: 0 0 3px; color: var(--ink);
  word-break: break-word;
}
.cpt-tete-txt p { margin: 0 0 10px; font-family: "Nunito", system-ui, sans-serif; font-weight: 700; font-size: 13px; color: var(--ink-soft); }

/* ---- blocs ---- */
.cpt-bloc { background: #fff; border-radius: var(--r-lg); padding: 20px 24px; box-shadow: var(--shadow-soft); margin-bottom: 14px; }
.cpt-bloc-tete { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.cpt-bloc h2 { font-family: "Fredoka", system-ui, sans-serif; font-weight: 700; font-size: 17px; margin: 0; color: var(--ink); }
.cpt-lien-fort { font-family: "Fredoka", system-ui, sans-serif; font-weight: 600; font-size: 13.5px; color: var(--grape); text-decoration: none; white-space: nowrap; }
.cpt-lien-fort:hover { text-decoration: underline; }

/* ---- aperçu des statistiques ---- */
.cpt-mini { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.cpt-mini-case { background: #F8F5FC; border-radius: var(--r-sm); padding: 12px 8px; text-align: center; }
.cpt-mini-v { display: block; font-family: "Fredoka", system-ui, sans-serif; font-weight: 700; font-size: 22px; color: var(--grape); line-height: 1.1; }

/* ---- partage ---- */
.cpt-partage { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.cpt-url {
  flex: 1 1 220px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  background: #F8F5FC; border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 12px 14px; font-family: ui-monospace, Menlo, monospace; font-size: 13px; color: var(--ink-soft);
}

/* ---- accès ---- */
.cpt-ligne { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.cpt-cle { font-family: "Nunito", system-ui, sans-serif; font-weight: 800; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-soft); }
.cpt-val { font-family: "Nunito", system-ui, sans-serif; font-weight: 700; font-size: 15px; color: var(--ink); word-break: break-all; }
.cpt-bloc .candy-ghost { margin-top: 6px; }

/* ---- zone dangereuse : séparée, teintée, jamais confondue avec le reste ---- */
.cpt-danger {
  margin-top: 22px; background: #FFF6F9; border: 1.5px solid #F6D3DF;
  border-radius: var(--r-lg); padding: 20px 24px;
}
.cpt-danger h2 { font-family: "Fredoka", system-ui, sans-serif; font-weight: 700; font-size: 16px; margin: 0 0 6px; color: #B32B57; }
.cpt-danger p { font-family: "Nunito", system-ui, sans-serif; font-weight: 700; font-size: 13.5px; color: #8A5468; margin: 0 0 14px; line-height: 1.5; }
/* Le message de retour ne prend de la place que lorsqu'il a quelque chose à
   dire : un vide de 38 px sous un bouton rouge, ça ressemble à une panne. */
.cpt-danger .auth-msg:empty { display: none; }

@media (max-width: 620px) {
  .cpt-tete { justify-content: center; text-align: center; padding: 22px 18px; }
  .cpt-tete-txt { flex-basis: 100%; }
  .cpt-mini { grid-template-columns: 1fr 1fr; }
  .cpt-bloc, .cpt-danger { padding: 18px; }
}

/* L'URL du profil se copie aussi en cliquant dessus : c'est le geste naturel
   quand on voit une adresse à l'écran. */
.cpt-url { cursor: pointer; transition: border-color .14s, background .14s; }
.cpt-url:hover { border-color: var(--grape); background: #fff; }
/* Confirmation de copie : le bouton passe au vert le temps de le dire. */
.cpt-copie { background: var(--lime) !important; color: #08402e !important; box-shadow: 0 5px 0 #21b585, var(--shadow-soft) !important; }

/* Le formulaire de la modale n'ajoute aucune boîte : il n'est là que pour que
   les gestionnaires de mots de passe reconnaissent le champ d'adresse. */
.auth-form { display: contents; }