/* Styles communs du site My-Pixelia (08/11/2026) : accueil, page de jeu, pause et pub.
   Les classes « serpent-… » et « salle-… » viennent de la salle de jeux de Mon Univers :
   les jeux s'en servent (terrain, scores, boutons), il ne faut pas les renommer. */

/* Police du titre « My Pixelia » (13/11/2026, son choix) : Bungee, libre (SIL Open Font License, voir polices/Bungee-OFL.txt),
   rangée dans le site : rien n'est chargé chez Google pour les joueurs. Lettres de base + accents latins. */
@font-face {
  font-family: "Bungee";
  src: url("./polices/bungee.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
  --fond: #07060f;
  --texte: #eef0ff;
  --doux: #c9ccf5;
  --bord: #4b3a8f;
  --menthe: #5ef2c2;
  --bleu: #7aa8ff;
  --violet: #c38bff;
  --rose: #ff5d73;
  --degrade: linear-gradient(90deg, var(--menthe), var(--bleu), var(--violet));
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: var(--fond); color: var(--texte); font: 15px/1.4 "Segoe UI", Arial, sans-serif; }
a { color: inherit; }
button { font: inherit; }
:focus-visible { outline: 2px solid var(--menthe); outline-offset: 2px; }

/* ---------- Accueil ---------- */
.accueil { min-height: 100vh; background: radial-gradient(90% 60% at 50% 0%, #2c1d63 0%, #150f33 50%, var(--fond) 100%); }
.accueil-haut { max-width: 1100px; margin: 0 auto; padding: 18px 16px 0; display: flex; align-items: center; gap: 12px; }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.logo svg { width: 36px; height: 36px; }
.logo b { font: 800 22px "Segoe UI", Arial, sans-serif; letter-spacing: .5px; background: var(--degrade);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.espace { flex: 1; }
.bouton-compte { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--bord); background: #ffffff10; color: var(--doux);
  font-weight: 600; font-size: 13px; cursor: pointer; text-decoration: none; white-space: nowrap; }
.bouton-compte:hover { border-color: var(--menthe); color: #fff; }
.bouton-compte.connecte, .lien-compte.connecte { color: var(--menthe); border-color: #5ef2c266; }

/* ---------- Page « Mon compte » ---------- */
.page-compte { max-width: 560px; margin: 0 auto; padding: 28px 16px 40px; display: flex; flex-direction: column; gap: 14px; }
.page-compte [hidden] { display: none !important; }
.page-compte section { display: flex; flex-direction: column; gap: 14px; }
.compte-chargement { text-align: center; color: var(--doux); }
.carte-formulaire { padding: 20px; border-radius: 20px; border: 1px solid var(--bord); background: linear-gradient(180deg, #ffffff12, #ffffff05); }
.carte-formulaire h2 { margin: 0 0 10px; font: 800 18px "Segoe UI", Arial, sans-serif; }
.onglets { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 4px; margin-bottom: 18px; border-radius: 999px; background: #0006; }
.onglets button { padding: 9px 10px; border: 0; border-radius: 999px; background: transparent; color: var(--doux); font-weight: 700; cursor: pointer; }
.onglets button[aria-selected="true"] { background: linear-gradient(90deg, var(--menthe), var(--bleu)); color: #10122b; }
.formulaire { display: flex; flex-direction: column; gap: 14px; }
.formulaire label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: 14px; }
.formulaire input:not([type="checkbox"]) { padding: 11px 14px; border-radius: 12px; border: 1px solid var(--bord); background: #0c0a1f;
  color: var(--texte); font: 15px "Segoe UI", Arial, sans-serif; }
.formulaire input:focus { outline: 2px solid var(--menthe); outline-offset: 1px; border-color: transparent; }
/* 13/11 : mot de passe avec son petit œil (afficher / cacher), et état de la confirmation. */
.champ-mdp { position: relative; display: block; }
.champ-mdp input { width: 100%; padding-right: 48px !important; }
.oeil { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; display: grid; place-items: center;
  border: 0; border-radius: 10px; background: transparent; color: var(--doux); cursor: pointer; }
.oeil:hover, .oeil:focus-visible { background: #ffffff14; color: #fff; }
.oeil svg { width: 22px; height: 22px; }
.confirmation-etat { font-weight: 600 !important; }
.confirmation-etat.ok { color: var(--menthe) !important; }
.confirmation-etat.ko { color: var(--rose) !important; }
.formulaire small { font-weight: 400; color: #8d90c0; font-size: 12px; }
.formulaire .case { flex-direction: row; align-items: center; gap: 8px; font-weight: 400; color: var(--doux); }
.formulaire .case input { width: 18px; height: 18px; accent-color: var(--menthe); }
.formulaire p { margin: 0; }
.salle-bouton.gros { padding: 12px 18px; font-size: 16px; }
.salle-bouton:disabled { opacity: .5; cursor: default; }
.message-erreur { color: var(--rose); font-weight: 600; font-size: 14px; }
.message-erreur:empty { display: none; }
/* 13/11 : confirmation de l'adresse, mot de passe oublié */
.message-ok { color: var(--menthe); font-weight: 600; font-size: 14px; }
.lien-simple { background: none; border: 0; padding: 0; color: #c9ccf5; font: inherit; text-decoration: underline; cursor: pointer; }
.lien-simple:hover { color: var(--menthe); }
[data-vue="attente"] h1, [data-vue="nouveau"] h1 { margin: 0 0 10px; font-size: 22px; color: var(--menthe); }
.texte-attente { font-size: 16px; line-height: 1.5; }
.texte-attente b { color: #fff; overflow-wrap: anywhere; }
.rangee-boutons { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.rangee-boutons a.salle-bouton { text-decoration: none; }
.petit { color: #8d90c0; font-size: 12px; }
.avantages { margin: 0; padding: 12px 14px 12px 32px; border-radius: 14px; background: #5ef2c212; color: var(--doux); font-size: 14px; }
.avantages li::marker { color: var(--menthe); }
.profil { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.avatar { width: 56px; height: 56px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--degrade);
  color: #10122b; font: 800 26px "Segoe UI", Arial, sans-serif; }
.profil-texte { flex: 1; min-width: 160px; }
.profil-texte h1 { margin: 0; font: 800 22px "Segoe UI", Arial, sans-serif; overflow-wrap: anywhere; }
.profil-texte p { margin: 2px 0 0; color: var(--doux); font-size: 13px; overflow-wrap: anywhere; }
.statut { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.statut h2 { margin-bottom: 4px; }
.statut p { margin: 0; color: var(--doux); font-size: 14px; }
.liste-records { display: grid; gap: 10px; }
.record-jeu { padding: 12px 14px; border-radius: 14px; background: #0005; border: 1px solid #ffffff10; }
.record-jeu a { font-weight: 800; text-decoration: none; color: #fff; }
.record-jeu a:hover { color: var(--menthe); }
.record-jeu dl { margin: 6px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 3px 14px; font-size: 14px; }
.record-jeu dt { color: var(--doux); }
.record-jeu dd { margin: 0; font-weight: 700; color: var(--menthe); text-align: right; }
details.carte-formulaire summary { cursor: pointer; font-weight: 700; }
details.carte-formulaire[open] summary { margin-bottom: 14px; }
details.danger { border-color: #ff5d7355; }
details.danger summary { color: var(--rose); }
.bouton-danger { padding: 10px 18px; border-radius: 999px; border: 1px solid var(--rose); background: #ff5d7322; color: #fff; font-weight: 700; cursor: pointer; }
.bulle-info { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 50; padding: 10px 18px; border-radius: 999px;
  background: var(--menthe); color: #10122b; font-weight: 700; box-shadow: 0 10px 30px #0008; }

/* Bandeau « crée un compte pour garder ton record » (page de jeu) */
.bandeau-compte { width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 14px; border-radius: 14px;
  background: #5ef2c21f; border: 1px solid #5ef2c255; font-size: 13px; }
.bandeau-compte[hidden] { display: none; }
.bandeau-compte span { flex: 1; }
.bandeau-compte a { color: var(--menthe); font-weight: 700; }
.bandeau-compte button { width: 30px; height: 30px; border: 0; border-radius: 10px; background: #ffffff14; color: var(--texte); cursor: pointer; }
/* 13/11 : en-tête de l'accueil — grand logo à gauche, nom au centre (vraiment centré), langue et compte à droite. */
.entete-pixelia { max-width: 1100px; margin: 0 auto; padding: 18px 16px 0; display: grid; grid-template-columns: 1fr auto 1fr;
  grid-template-areas: "logo titre actions"; align-items: center; gap: 12px; }
/* Le logo est une simple image (sur l'accueil, un lien vers l'accueil ne servait à rien). */
.logo-grand { grid-area: logo; justify-self: start; line-height: 0; }
.logo-grand img { width: 140px; height: 140px; display: block; filter: drop-shadow(0 12px 30px #5ef2c233) drop-shadow(0 4px 12px #0009); }
/* 14/11 (sa demande) : retour à la première police du titre (Segoe UI très gras) ; Bungee n'est plus utilisée. */
.titre-site { grid-area: titre; margin: 0; text-align: center; font: 800 clamp(34px, 6vw, 58px)/1.05 "Segoe UI", Arial, sans-serif;
  letter-spacing: -.5px; white-space: nowrap; }
.titre-site .nom-site { background: var(--degrade); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 4px 18px #7aa8ff40); }
.entete-actions { grid-area: actions; justify-self: end; display: flex; align-items: center; gap: 10px; }
.accroche { max-width: 1100px; margin: 0 auto; padding: 18px 16px 22px; text-align: center; }
.accroche-texte { margin: 0; font: 700 clamp(16px, 2.6vw, 22px)/1.3 "Segoe UI", Arial, sans-serif; color: var(--texte); }
.accroche-texte .degrade { background: var(--degrade); -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (max-width: 620px) {
  /* Téléphone : logo et boutons sur la première ligne, le nom centré en dessous. */
  .entete-pixelia { grid-template-columns: auto 1fr; grid-template-areas: "logo actions" "titre titre"; row-gap: 6px; }
  .logo-grand img { width: 80px; height: 80px; }
  .titre-site { font-size: clamp(30px, 10vw, 42px); }
  .accroche { padding-top: 10px; }
}
.filtres { max-width: 1100px; margin: 0 auto; padding: 0 16px 18px; display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.filtres button { padding: 7px 16px; border-radius: 999px; border: 1px solid var(--bord); background: transparent; color: var(--doux);
  font-weight: 600; font-size: 13px; cursor: pointer; }
.filtres button[aria-pressed="true"] { background: linear-gradient(90deg, var(--menthe), var(--bleu)); color: #10122b; border-color: transparent; }
.grille-jeux { max-width: 1100px; margin: 0 auto; padding: 0 16px 40px; display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.carte-jeu { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: 20px; text-decoration: none;
  border: 1px solid var(--bord); background: linear-gradient(180deg, #ffffff14, #ffffff05); transition: transform .15s, border-color .15s, box-shadow .15s; }
.carte-jeu:hover, .carte-jeu:focus-visible { transform: translateY(-3px); border-color: var(--menthe); box-shadow: 0 10px 30px #0008, 0 0 0 2px #5ef2c233; }
.carte-icone { width: 100%; aspect-ratio: 16 / 10; display: grid; place-items: center; border-radius: 14px;
  background: radial-gradient(80% 80% at 50% 30%, #2c1d63, #120d2c); border: 1px solid #ffffff10; }
.carte-icone svg { width: 64px; height: 64px; filter: drop-shadow(0 4px 12px #0008); }
.carte-jeu b { font: 800 18px "Segoe UI", Arial, sans-serif; }
.carte-jeu span { color: var(--doux); font-size: 13px; line-height: 1.35; }
.carte-genre { position: absolute; top: 24px; right: 24px; padding: 2px 8px; border-radius: 999px; background: #0009; color: var(--doux);
  font-size: 11px; font-weight: 600; font-style: normal; }
.carte-jeu[hidden] { display: none; }
.pied { max-width: 1100px; margin: 0 auto; padding: 20px 16px 30px; color: #8d90c0; font-size: 12px; text-align: center;
  border-top: 1px solid #ffffff10; }

/* ---------- Page de jeu ---------- */
.serpent { height: 100vh; height: 100dvh; display: grid; place-items: center; padding: 6px; background: var(--fond); color: var(--texte); }
.serpent-telephone { position: relative; width: min(100%, 460px); height: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 14px 14px calc(16px + env(safe-area-inset-bottom, 0px)); overflow: hidden; border-radius: 26px;
  background: radial-gradient(120% 70% at 50% 0%, #2c1d63 0%, #150f33 55%, #0c0a1f 100%);
  border: 1px solid var(--bord); box-shadow: 0 20px 80px #000c, inset 0 1px 0 #ffffff14; }
.serpent-haut { width: 100%; display: flex; align-items: center; gap: 8px; }
.serpent-haut h2 { margin: 0; flex: 1; font: 800 24px "Segoe UI", Arial, sans-serif; letter-spacing: .5px; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; background: var(--degrade); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bouton-rond { height: 44px; min-width: 44px; padding: 0 10px; display: grid; place-items: center; border: 1px solid var(--bord); border-radius: 14px;
  background: #ffffff12; color: var(--texte); font: 700 18px/1 Arial, sans-serif; cursor: pointer; text-decoration: none; }
.salle-zone { flex: 1; min-height: 0; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.serpent-scores { width: 100%; display: flex; gap: 8px; }
.serpent-scores span { flex: 1; padding: 6px 10px; border-radius: 12px; background: #ffffff0f; border: 1px solid #ffffff14;
  font: 600 13px "Segoe UI", Arial, sans-serif; color: var(--doux); text-align: center; }
.serpent-scores b { color: #fff; font-size: 16px; margin-left: 4px; }
.serpent-modes { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.serpent-modes button { padding: 6px 14px; border-radius: 999px; border: 1px solid var(--bord); background: transparent; color: var(--doux);
  font: 600 13px "Segoe UI", Arial, sans-serif; cursor: pointer; }
.serpent-modes button[aria-pressed="true"] { background: linear-gradient(90deg, var(--menthe), var(--bleu)); color: #10122b; border-color: transparent; }
.serpent-terrain { flex: 1; min-height: 0; width: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.serpent canvas { display: block; border-radius: 16px; border: 1px solid #ffffff1f; box-shadow: 0 10px 40px #0009, 0 0 0 4px #ffffff08;
  touch-action: none; cursor: pointer; }
.serpent-croix { display: grid; grid-template-columns: repeat(3, 68px); grid-template-rows: repeat(2, 56px); gap: 8px; }
.serpent-croix button { border: 1px solid #ffffff1f; border-radius: 16px; background: linear-gradient(180deg, #ffffff1c, #ffffff08);
  color: var(--texte); font: 20px Arial, sans-serif; cursor: pointer; touch-action: manipulation; box-shadow: 0 4px 14px #0006; }
.serpent-croix button:active { transform: translateY(1px); background: linear-gradient(180deg, #5ef2c255, #7aa8ff33); }
.serpent-croix [data-dir="haut"] { grid-column: 2; } .serpent-croix [data-dir="gauche"] { grid-column: 1; grid-row: 2; }
.serpent-croix [data-dir="bas"] { grid-column: 2; grid-row: 2; } .serpent-croix [data-dir="droite"] { grid-column: 3; grid-row: 2; }
.salle-bouton { padding: 8px 16px; border-radius: 999px; border: 0; background: linear-gradient(90deg, var(--menthe), var(--bleu)); color: #10122b;
  font: 700 14px "Segoe UI", Arial, sans-serif; cursor: pointer; }
.salle-chargement { margin: auto; color: var(--doux); }

/* ---------- Pause et pub (par-dessus le jeu) ---------- */
.voile { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  padding: 24px; text-align: center; border-radius: inherit; background: #0c0a1ff0; backdrop-filter: blur(8px); }
.voile[hidden] { display: none; }
.voile h3 { margin: 0; font: 800 28px "Segoe UI", Arial, sans-serif; }
.voile p { margin: 0; color: var(--doux); max-width: 300px; }
.voile .salle-bouton { padding: 12px 28px; font-size: 16px; }
.pub-cadre { width: 100%; max-width: 340px; aspect-ratio: 4 / 3; display: grid; place-items: center; border-radius: 16px;
  border: 2px dashed var(--bord); background: #ffffff08; color: var(--doux); font-weight: 600; }
.pub-etiquette { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: #8d90c0; }
.pub-compte { font: 700 14px "Segoe UI", Arial, sans-serif; color: var(--menthe); }
.voile-confirmer { z-index: 8; }
.voile-confirmer p { font-size: 17px; font-weight: 700; color: var(--texte); }
.confirmer-boutons { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.confirmer-boutons .bouton-rond { font-size: 14px; padding: 0 18px; }

/* ---------- Top 10 ---------- */
.barre-top10 { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: -4px 0 -4px; }
.barre-top10 .bouton-top10 { margin-left: auto; }
.bouton-top10 { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid #ffd66b66; background: #ffd66b14; color: #ffe39a; font: 700 13px "Segoe UI", Arial, sans-serif; }
.bouton-top10:hover { background: #ffd66b26; border-color: #ffd66b; }
.voile-top10 { z-index: 6; justify-content: flex-start; padding: 18px 16px; gap: 12px; }
.top10-haut { width: 100%; display: flex; align-items: center; gap: 10px; }
.top10-haut h3 { flex: 1; display: flex; align-items: center; gap: 8px; font-size: 24px; text-align: left; }
.top10-liste { width: 100%; margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; overflow: auto; }
.top10-ligne { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px;
  background: #ffffff0c; border: 1px solid #ffffff10; text-align: left; }
.top10-rang { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: #ffffff14; font-weight: 800; font-size: 13px; }
.top10-1 .top10-rang { background: linear-gradient(160deg, #ffe39a, #e0a52a); color: #2b1d00; }
.top10-2 .top10-rang { background: linear-gradient(160deg, #f0f2ff, #a7abc9); color: #1c1d2b; }
.top10-3 .top10-rang { background: linear-gradient(160deg, #f4b98a, #b06a35); color: #2b1300; }
.top10-pseudo { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top10-valeur { font-weight: 800; color: var(--menthe); white-space: nowrap; }
.top10-moi { border-color: var(--menthe); background: #5ef2c21c; box-shadow: 0 0 0 1px #5ef2c255; }
.top10-separation { text-align: center; color: #8d90c0; line-height: 1; }
.top10-vide { padding: 20px 10px; color: var(--doux); text-align: center; }
.top10-pied p { max-width: none; font-size: 14px; }
.top10-pied a { color: var(--menthe); font-weight: 700; }

/* ---------- Menu des langues ---------- */
.menu-langues { position: relative; }
.bouton-langue { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--bord); background: #ffffff10; color: var(--doux); font: 700 12px "Segoe UI", Arial, sans-serif; }
.bouton-langue:hover { border-color: var(--menthe); color: #fff; }
.drapeau { width: 20px; height: 14px; border-radius: 2px; flex: none; box-shadow: 0 0 0 1px #0004; }
.liste-langues { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; margin: 0; padding: 6px; list-style: none; min-width: 170px;
  border-radius: 14px; border: 1px solid var(--bord); background: #151032; box-shadow: 0 14px 40px #000a; }
.liste-langues[hidden] { display: none; }
.liste-langues button { width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 0; border-radius: 10px;
  background: transparent; color: var(--texte); font: 600 14px "Segoe UI", Arial, sans-serif; cursor: pointer; text-align: left; }
.liste-langues button:hover, .liste-langues button:focus-visible { background: #ffffff14; }
.liste-langues button[aria-checked="true"] { color: var(--menthe); }
.pause-langue { margin-top: 6px; }
.pause-langue .liste-langues { right: 50%; transform: translateX(50%); top: auto; bottom: calc(100% + 6px); }

@media (max-width: 520px) {
  .grille-jeux { grid-template-columns: 1fr 1fr; gap: 10px; }
  .carte-jeu { padding: 10px; border-radius: 16px; gap: 6px; }
  .carte-icone svg { width: 44px; height: 44px; }
  .carte-jeu b { font-size: 16px; }
  .carte-jeu span { font-size: 12px; }
  .carte-genre { top: 16px; right: 16px; font-size: 10px; }
  .accroche { padding-top: 24px; }
}
.logo b { white-space: nowrap; }
@media (max-width: 420px) {
  .accueil-haut { gap: 8px; }
  .logo { gap: 6px; min-width: 0; }
  .logo img { width: 28px; height: 28px; }
  .logo b { font-size: 17px; overflow: hidden; text-overflow: ellipsis; }
  .bouton-compte { padding: 7px 10px; font-size: 12px; }
  .accueil-haut .bouton-langue span, .entete-pixelia .bouton-langue span { display: none; } /* le drapeau suffit, place gardée pour le logo */
}
@media (max-width: 700px) { .serpent { padding: 0; } .serpent-telephone { width: 100%; border: 0; border-radius: 0; box-shadow: none; } }
@media (max-height: 640px) { .serpent-croix { grid-template-rows: repeat(2, 44px); } .serpent-modes button { padding: 4px 10px; } }

/* 13/11 : fenêtre de confirmation aux couleurs de My Pixelia (remplace le petit panneau de Windows) */
.fenetre-voile { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px;
  background: #07060fcc; backdrop-filter: blur(6px); animation: fenetre-apparait .15s ease-out; }
.fenetre-boite { width: min(420px, 100%); padding: 24px 22px 20px; border-radius: 20px; border: 1px solid var(--bord);
  background: linear-gradient(180deg, #221a4d, #150f33); box-shadow: 0 20px 60px #000a, 0 0 0 1px #ffffff10 inset; text-align: center; }
.fenetre-boite::before { content: ""; display: block; height: 4px; margin: -24px -22px 18px; border-radius: 20px 20px 0 0; background: var(--degrade); }
.fenetre-boite.danger::before { background: linear-gradient(90deg, var(--rose), var(--violet)); }
.fenetre-boite h2 { margin: 0 0 10px; font: 800 20px "Segoe UI", Arial, sans-serif; color: var(--menthe); }
.fenetre-boite.danger h2 { color: var(--rose); }
.fenetre-boite p { margin: 0 0 20px; color: var(--texte); font-size: 16px; line-height: 1.45; }
.fenetre-boutons { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.fenetre-boutons button { min-width: 130px; padding: 10px 18px; font-size: 15px; }
.fenetre-non { border-radius: 999px; border: 1px solid var(--bord); background: #ffffff0d; color: var(--texte); font-weight: 600; cursor: pointer; }
.fenetre-non:hover { border-color: var(--menthe); }
.fenetre-boite .bouton-danger:hover { background: #ff5d7344; }
@keyframes fenetre-apparait { from { opacity: 0; } }

/* ---------- 13/11 : couronne de l'administrateur (même principe que dans My Univers) ---------- */
.couronne { position: relative; display: inline-grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 50%;
  border: 1px solid #ffd66b66; background: #ffd66b14; color: #ffd66b; text-decoration: none; }
.couronne svg, .admin-titre svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.couronne:hover, .couronne:focus-visible { border-color: #ffd66b; background: #ffd66b26; }
.couronne-alerte { color: #fff; background: linear-gradient(135deg, var(--rose), var(--violet)); border-color: #ffb3c0;
  animation: couronne-pulse 1.8s ease-in-out infinite; }
.couronne-pastille { position: absolute; top: -6px; right: -7px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px;
  background: #fff; color: #d8344f; font: 800 12px/20px "Segoe UI", Arial, sans-serif; text-align: center; box-shadow: 0 1px 4px #0008; }
.couronne-petite { width: 44px; height: 44px; border-radius: 14px; }
@keyframes couronne-pulse { 50% { box-shadow: 0 0 0 6px #ff5d7333; } }
.bulles-admin { position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 120; display: grid; gap: 8px; width: min(440px, calc(100% - 24px)); }
.bulle-admin { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: #1f1748f2; border: 1px solid #ffd66b;
  color: var(--texte); font-size: 14px; box-shadow: 0 10px 30px #000a; animation: bulle-admin-entree .3s ease-out; transition: opacity .3s, transform .3s; }
.bulle-admin span { flex: 1; }
.bulle-admin a { color: #ffd66b; font-weight: 700; }
.bulle-admin button { border: 0; background: none; color: inherit; font-size: 20px; line-height: 1; cursor: pointer; padding: 0 4px; }
.bulle-admin.partie { opacity: 0; transform: translateY(-10px); }
@keyframes bulle-admin-entree { from { transform: translateY(-14px); } }
@media (prefers-reduced-motion: reduce) { .couronne-alerte, .bulle-admin { animation: none; } }

/* ---------- 13/11 : page d'administration ---------- */
.page-admin { width: min(1100px, 100%); margin: 0 auto; padding: 16px 16px 40px; display: grid; gap: 14px; }
.admin-titre { display: flex; align-items: center; gap: 10px; margin: 6px 0 0; font: 800 26px "Segoe UI", Arial, sans-serif; color: #ffd66b; }
.admin-titre svg { width: 30px; height: 30px; }
.admin-onglets { max-width: 760px; grid-template-columns: repeat(6, 1fr); }
.admin-compteur { display: inline-block; min-width: 20px; padding: 0 6px; margin-left: 4px; border-radius: 999px; background: var(--rose); color: #fff; font-size: 12px; line-height: 20px; }
.admin-compteur[hidden] { display: none; }
.admin-barre { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.admin-boite { margin-left: auto; }
.courrier { display: grid; grid-template-columns: minmax(240px, 340px) 1fr; gap: 14px; align-items: start; }
.courrier-liste { list-style: none; margin: 0; padding: 6px; max-height: 70vh; overflow: auto; }
.courrier-attente { padding: 10px; }
.courrier-ligne { width: 100%; display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; padding: 10px; border: 0; border-radius: 12px;
  background: none; color: var(--doux); text-align: left; font: inherit; cursor: pointer; }
.courrier-ligne:hover { background: #ffffff0d; }
.courrier-ligne.ouvert { background: #5ef2c21a; }
.courrier-ligne.non-lu { color: #fff; }
.courrier-ligne.non-lu .courrier-de::before { content: "● "; color: var(--rose); }
.courrier-ligne.non-lu .courrier-de, .courrier-ligne.non-lu .courrier-sujet { font-weight: 700; }
.courrier-de { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.courrier-date { font-size: 12px; color: #8d90c0; }
.courrier-sujet { grid-column: 1 / -1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.courrier-lecture { min-height: 300px; display: grid; gap: 8px; align-content: start; }
.courrier-lecture h2 { margin: 0; overflow-wrap: anywhere; }
.courrier-entete { margin: 0; color: var(--doux); font-size: 13px; overflow-wrap: anywhere; }
.courrier-texte { margin: 6px 0; padding: 14px; border-radius: 12px; background: #0c0a1f; white-space: pre-wrap; overflow-wrap: anywhere;
  font: 14px/1.5 "Segoe UI", Arial, sans-serif; max-height: 55vh; overflow: auto; }
.courrier-vide { margin: auto; }
.page-admin textarea { width: 100%; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--bord); background: #0c0a1f; color: var(--texte);
  font: 14px/1.5 "Segoe UI", Arial, sans-serif; resize: vertical; }
.page-admin textarea:focus { outline: 2px solid var(--menthe); outline-offset: 1px; border-color: transparent; }
.admin-recherche { flex: 1; min-width: 200px; max-width: 420px; padding: 10px 14px; border-radius: 999px; border: 1px solid var(--bord);
  background: #0c0a1f; color: var(--texte); font: inherit; }
.joueurs-liste { display: grid; gap: 10px; }
.joueur { display: grid; gap: 6px; padding: 14px 16px; }
.joueur.bloque { border-color: #ff5d7388; }
.joueur-haut { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.joueur-pseudo { font-size: 17px; }
.joueur p { margin: 0; overflow-wrap: anywhere; }
.etiquette { padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; border: 1px solid; }
.etiquette.ok { color: var(--menthe); border-color: #5ef2c266; }
.etiquette.attente { color: #ffd66b; border-color: #ffd66b66; }
.etiquette.ko { color: var(--rose); border-color: #ff5d7388; }
.etiquette.admin { color: #ffd66b; border-color: #ffd66b66; }
.joueur-scores { width: 100%; border-collapse: collapse; font-size: 13px; }
.joueur-scores td { padding: 5px 6px; border-top: 1px solid #ffffff14; }
.joueur-scores .valeur { color: var(--menthe); font-weight: 700; text-align: right; }
.admin-barre .bouton-danger { padding: 8px 14px; font-size: 14px; }
.petit-bouton, .admin-barre .petit-bouton { padding: 4px 10px; font-size: 12px; }
.chiffres-tuiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.tuile { display: grid; gap: 2px; padding: 14px 16px; }
.tuile b { font-size: 28px; color: var(--menthe); }
.tuile span { color: var(--doux); font-size: 13px; }
.chiffres-jeux { width: 100%; border-collapse: collapse; }
.chiffres-jeux th, .chiffres-jeux td { padding: 8px 6px; text-align: left; border-top: 1px solid #ffffff14; }
.chiffres-jeux th { color: #8d90c0; font-size: 12px; font-weight: 600; border-top: 0; }
@media (max-width: 720px) {
  .courrier { grid-template-columns: 1fr; }
  .courrier-liste { max-height: 40vh; }
  .admin-boite { margin-left: 0; }
}

/* 13/11 : jeux cachés (visibles seulement par l'administrateur) */
.carte-cachee { opacity: .62; border-style: dashed; }
.carte-cadenas { position: absolute; left: 10px; top: 10px; font-style: normal; font-size: 14px; }
.carte-jeu { position: relative; }
/* 13/11 : onglet « Jeux » de l'administration */
.admin-jeux { display: grid; gap: 8px; }
.admin-jeu { display: flex; align-items: center; gap: 12px; padding: 10px 14px; }
.admin-jeu svg { width: 28px; height: 28px; flex: none; }
.admin-jeu b { flex: 1; }
.admin-jeu .petit { margin: 0; }

/* 13/11 : page d'invitation (site réservé aux invités pendant les essais) */
.invitation { flex: 1; display: grid; place-items: center; padding: 24px 16px; }
.invitation-carte { width: min(420px, 100%); display: grid; gap: 14px; justify-items: center; text-align: center; padding: 28px 22px; }
.invitation-logo { width: 120px; height: 120px; filter: drop-shadow(0 0 18px #7aa8ff66); }
.invitation-accroche { margin: 0; color: var(--doux); font-size: 16px; }
.invitation-carte .formulaire { width: 100%; text-align: left; }
/* 14/11 : dans la carte, le titre n'est plus placé comme sur l'accueil (il partait à droite sur téléphone). */
.invitation-carte .titre-site { grid-area: auto; justify-self: center; white-space: normal; font-size: clamp(32px, 9vw, 46px); }
.page-invitation .accueil-haut { justify-content: flex-end; }
@media (max-width: 480px) {
  .invitation { padding: 12px 12px 20px; align-items: start; }
  .invitation-carte { padding: 22px 16px; gap: 12px; }
  .invitation-logo { width: 96px; height: 96px; }
}
.invitation-carte input[name="code"] { text-transform: uppercase; letter-spacing: 2px; font-family: Consolas, "Courier New", monospace; text-align: center; }
.invitation-carte a { color: var(--menthe); }

/* 13/11 : administration → invités et sécurité */
.invite-code { margin: 6px 0; font: 800 22px Consolas, "Courier New", monospace; letter-spacing: 2px; color: var(--menthe); user-select: all; }
.invites-liste { display: grid; gap: 8px; }
.invite { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 14px; }
.invite b { flex: 1; }
.securite ol { margin: 6px 0 10px; padding-left: 20px; line-height: 1.6; }
.securite-secret { font-family: Consolas, "Courier New", monospace; letter-spacing: 1px; color: var(--menthe); user-select: all; }
@media (max-width: 720px) { .admin-onglets { grid-template-columns: repeat(3, 1fr); border-radius: 18px; } }