/* ============================================================
   style.css — toutes les couleurs et la mise en page du jeu
   ============================================================ */


/* --- Les couleurs ---
   On les range dans des « variables ». C'est comme des pots de peinture
   avec une étiquette dessus : si on change la couleur dans le pot,
   elle change partout dans le jeu d'un seul coup ! */
:root {
  color-scheme: dark;       /* le jeu est toujours sombre : les barres de défilement et les curseurs aussi */
  --fond: #0B0B0D;          /* le fond de la page */
  --carte: #141417;         /* les cadres */
  --bordure: #2E2B27;       /* le contour des cadres */
  --texte: #F2EEE6;         /* le texte principal */
  --texte-doux: #A39E95;    /* les petits textes */
  --dore: #D4A64A;          /* la couleur spéciale */
  --dore-clair: #E9C979;    /* le doré quand la souris passe dessus */
  --rouge-doux: #E08A7A;    /* pour « Perdu », ou le roi en échec */
  --vert: #7FD68A;          /* pour « Gagné » */
  --gris-defaite: #6E6A63;  /* les défaites, dans les graphiques des stats */

  /* Les cases du plateau (thème « Bois doré » ; les Réglages peuvent les changer) */
  --case-claire: #CFC3A8;
  --case-foncee: #6E6455;

  /* Les cases du dernier coup joué */
  --dernier-claire: #E2C27A;
  --dernier-foncee: #B08A3E;

  /* Les pièces */
  --piece-blanche: #FAF7F0;
  --piece-noire: #141312;

  /* La taille du plateau : on prend la plus petite de ces 3 tailles,
     comme ça le plateau rentre toujours dans l'écran (on garde de la place
     pour le menu, le titre et les barres des joueurs). Mais jamais moins de 260 px.
     (vw = largeur de l'écran, vh = hauteur de l'écran) */
  --taille-plateau: max(260px, min(100vw - 180px, 100vh - 310px, 600px));
}


/* --- La page --- */
* {
  box-sizing: border-box;
}

/* Tout ce qui a « hidden » est caché, même si une autre règle dit le contraire */
[hidden] {
  display: none !important;
}

body {
  margin: 0;
  min-height: 100vh;
  /* Un fond noir, avec une petite lueur dorée tout en haut */
  background:
    radial-gradient(ellipse at top, color-mix(in srgb, var(--dore) 10%, transparent), transparent 60%),
    var(--fond);
  color: var(--texte);
  font-family: "Manrope", "Segoe UI", sans-serif;
}

.page {
  padding: 24px 16px;
}

/* Une page où tout est centré, les choses empilées de haut en bas */
.page-centree {
  display: flex;
  flex-direction: column;
  align-items: center;
}


/* --- Le titre --- */
.titre {
  margin: 0 0 20px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 600;
  font-size: clamp(32px, 6vw, 52px);
  line-height: 1.1;
  text-align: center;
}

/* Le mot important du titre : en doré et penché */
.titre em {
  color: var(--dore);
  font-style: italic;
}

.sous-titre {
  margin: 10px 0 32px;
  color: var(--texte-doux);
  letter-spacing: 0.03em;
}


/* --- L'écran de partie : le plateau à gauche, le panneau à droite ---
   Si l'écran est trop étroit, le panneau passe en dessous (« wrap »). */
.ecran-partie {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 24px;
}


/* --- Le cadre autour du plateau (avec les barres des joueurs) --- */
.cadre-plateau {
  display: flex;
  flex-direction: column;   /* les choses s'empilent de haut en bas */
  gap: 14px;
  padding: 18px;
  background: var(--carte);
  border: 1px solid var(--bordure);
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}


/* --- Le plateau ---
   C'est une « grille » de 8 colonnes et 8 lignes, comme une feuille à carreaux. */
.plateau {
  width: var(--taille-plateau);
  height: var(--taille-plateau);
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
  border-radius: 6px;
  overflow: hidden;
  /* Un fin trait doré autour du plateau */
  outline: 1px solid color-mix(in srgb, var(--dore) 50%, transparent);
  outline-offset: 5px;
}


/* --- Les cases --- */
.case {
  position: relative;       /* pour pouvoir placer les lettres et chiffres dans les coins */
  display: flex;
  align-items: center;      /* la pièce est au milieu de la case */
  justify-content: center;
  cursor: pointer;          /* la souris devient une petite main : on peut cliquer */
  touch-action: manipulation;           /* sur un téléphone : pas de zoom quand on tape deux fois vite */
  -webkit-tap-highlight-color: transparent;   /* pas de rectangle gris quand on tape sur une case */
}

.claire {
  background: var(--case-claire);
}

.foncee {
  background: var(--case-foncee);
}

/* Les deux cases du dernier coup joué : coloriées en doré */
.claire.dernier-coup {
  background: var(--dernier-claire);
}

.foncee.dernier-coup {
  background: var(--dernier-foncee);
}

/* Les réglages qui cachent des choses (reglages.js met ces classes sur toute la page) */
.sans-coordonnees .coordonnee {
  display: none;
}

.sans-dernier-coup .claire.dernier-coup {
  background: var(--case-claire);
}

.sans-dernier-coup .foncee.dernier-coup {
  background: var(--case-foncee);
}

.sans-indications .point,
.sans-indications .cercle {
  display: none;
}

/* La case du roi en échec : une lueur rouge autour du roi */
.case.en-danger {
  background-image: radial-gradient(
    circle,
    var(--rouge-doux) 0%,
    var(--rouge-doux) 35%,
    color-mix(in srgb, var(--rouge-doux) 60%, transparent) 60%,
    transparent 90%
  );
}

/* Les deux cases de l'indice : un cadre doré clair qui clignote doucement */
.conseil {
  animation: clignoter 0.8s ease-in-out infinite alternate;
}

/* L'animation « clignoter » : le cadre passe de presque invisible à bien visible */
@keyframes clignoter {
  from { box-shadow: inset 0 0 0 4px color-mix(in srgb, var(--dore-clair) 20%, transparent); }
  to   { box-shadow: inset 0 0 0 4px var(--dore-clair); }
}

/* La case de la pièce qu'on a choisie : un cadre doré à l'intérieur */
.choisie {
  box-shadow: inset 0 0 0 4px var(--dore);
}


/* --- Les cases où la pièce choisie a le droit d'aller --- */

/* Sur une case vide : un petit point sombre au milieu */
.point {
  position: absolute;
  inset: 0;                 /* avec « margin: auto », ça place le point pile au milieu */
  margin: auto;
  width: 28%;
  height: 28%;
  border-radius: 50%;       /* 50 % = un rond parfait */
  background: rgba(21, 18, 12, 0.3);
  pointer-events: none;     /* le clic passe à travers, jusqu'à la case */
}

/* Sur une pièce qu'on peut manger : un rond sombre tout autour */
.cercle {
  position: absolute;
  inset: 5%;
  border-radius: 50%;
  border: calc(var(--taille-plateau) / 90) solid rgba(21, 18, 12, 0.3);
  pointer-events: none;
}


/* --- Les lettres (a à h) et les chiffres (1 à 8) au bord du plateau --- */
.coordonnee {
  position: absolute;
  font-size: max(9px, calc(var(--taille-plateau) / 48));
  font-weight: 600;
  line-height: 1;
  user-select: none;        /* on ne peut pas les sélectionner avec la souris */
}

/* Les chiffres en haut à gauche de la case */
.chiffre {
  top: 4px;
  left: 4px;
}

/* Les lettres en bas à droite de la case */
.lettre {
  bottom: 4px;
  right: 4px;
}

/* Sur une case claire on écrit en foncé, sur une case foncée on écrit en clair */
.claire .coordonnee {
  color: var(--case-foncee);
}

.foncee .coordonnee {
  color: var(--case-claire);
}


/* --- Le message sous le plateau : échec, mat, pat… --- */
.message {
  min-height: 1.5em;        /* il garde sa place même quand il est vide */
  margin: 0;
  font-size: 16px;
  text-align: center;
  color: var(--texte-doux);
}

/* Le mot « Blancs » ou « Noirs » en doré */
.message em {
  color: var(--dore);
  font-style: normal;
  font-weight: 600;
}

/* « Tu as gagné » en vert, « L'IA a gagné » en rouge doux */
.message em.gagne {
  color: var(--vert);
}

.message em.perdu {
  color: var(--rouge-doux);
}


/* --- Les petites étiquettes, par exemple « COUPS JOUÉS » --- */
.etiquette {
  margin: 0 0 10px;
  color: var(--texte-doux);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;   /* écrit en MAJUSCULES */
}


/* --- Le choix de l'adversaire --- */
.boutons-adversaire {
  display: flex;
  flex-wrap: wrap;          /* s'il n'y a pas la place, les boutons passent à la ligne */
  gap: 8px;
}

/* Un bouton en forme de pilule, avec un fin contour */
.bouton-pilule {
  padding: 10px 18px;
  border: 1px solid var(--bordure);
  border-radius: 999px;     /* très très arrondi : ça fait une pilule */
  background: transparent;
  color: var(--texte);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background 0.2s;   /* les couleurs changent en douceur */
}

/* Quand la souris passe dessus */
.bouton-pilule:hover {
  border-color: var(--dore);
  color: var(--dore-clair);
}

/* Le bouton choisi : rempli de doré, avec un texte presque noir */
.bouton-pilule.actif,
.bouton-pilule.actif:hover {
  background: var(--dore);
  border-color: var(--dore);
  color: #15120C;
}

/* Le petit dessin (SVG) dans un bouton : un dessin au trait, de la couleur du texte */
.bouton-pilule svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;     /* « currentColor » = la même couleur que le texte */
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Le bouton « Abandonner » : en rouge doux */
.bouton-rouge {
  color: var(--rouge-doux);
}

.bouton-rouge:hover {
  border-color: var(--rouge-doux);
  color: var(--rouge-doux);
}


/* --- Les barres des joueurs (au-dessus et en dessous du plateau) --- */
.barre-joueur {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Le petit rond qui montre la couleur du joueur */
.pastille {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--bordure);
}

.pastille.blancs {
  background: var(--piece-blanche);
}

.pastille.noirs {
  background: var(--piece-noire);
  border-color: #4A453D;
}

/* Le nom et le petit texte en dessous, l'un sur l'autre */
.joueur-infos {
  display: flex;
  flex-direction: column;
  flex: 1;                  /* prend toute la place libre : le chrono est poussé à droite */
}

.joueur-nom {
  font-weight: 600;
}

.joueur-detail {
  color: var(--texte-doux);
  font-size: 13px;
}

/* Quand c'est au tour de ce joueur, le petit texte devient doré */
.joueur-detail.son-tour {
  color: var(--dore);
  font-weight: 600;
}

/* Le chrono */
.chrono {
  min-width: 76px;
  padding: 6px 14px;
  border: 1px solid var(--bordure);
  border-radius: 999px;
  font-size: 18px;
  font-weight: 600;
  text-align: center;
  font-variant-numeric: tabular-nums;   /* les chiffres ont tous la même largeur : ça ne tremble pas */
}

/* Le chrono du joueur qui doit jouer : tout doré */
.chrono.actif {
  background: var(--dore);
  border-color: var(--dore);
  color: #15120C;
}

/* Moins de 30 secondes : le chrono devient rouge doux */
.chrono.presque-fini {
  background: var(--rouge-doux);
  border-color: var(--rouge-doux);
  color: #15120C;
}


/* --- Le panneau de droite --- */
.panneau {
  display: flex;
  flex-direction: column;
  gap: 22px;
  width: min(340px, 100%);
  padding: 22px;
  background: var(--carte);
  border: 1px solid var(--bordure);
  border-radius: 20px;
}

/* La liste des coups : 3 colonnes (numéro, coup des Blancs, coup des Noirs) */
.liste-coups {
  display: grid;
  grid-template-columns: 36px 1fr 1fr;
  align-content: start;
  row-gap: 4px;
  height: 180px;
  margin-top: -6px;
  overflow-y: auto;         /* s'il y a trop de coups, on peut faire défiler */
  font-variant-numeric: tabular-nums;
}

.numero-coup {
  color: var(--texte-doux);
}

/* Le tout dernier coup joué, en doré */
.liste-coups .dernier {
  color: var(--dore);
  font-weight: 600;
}

.liste-vide {
  grid-column: 1 / -1;      /* prend les 3 colonnes */
  color: var(--texte-doux);
  font-size: 14px;
}

/* La barre de force de l'IA : 10 petits traits, allumés en doré selon le niveau */
.barre-force {
  display: flex;
  gap: 4px;
}

.barre-force span {
  flex: 1;
  height: 8px;
  border-radius: 4px;
  background: var(--bordure);
}

.barre-force span.allume {
  background: var(--dore);
}

.texte-force {
  margin: 8px 0 0;
  font-size: 14px;
}

.texte-force em {
  color: var(--dore);
  font-style: normal;
  font-weight: 600;
}

/* La phrase qui décrit le style de l'IA, sur sa propre ligne */
.phrase-style {
  display: block;
  margin-top: 4px;
  color: var(--texte-doux);
}

/* Les 4 boutons, rangés en 2 colonnes */
.boutons-partie {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.boutons-partie .bouton-pilule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 12px;
}

/* L'astuce */
.astuce p {
  margin: 0;
  color: var(--texte-doux);
  font-size: 14px;
  line-height: 1.5;
}

.astuce em {
  color: var(--dore);
  font-style: normal;
  font-weight: 600;
}


/* --- Les pièces --- */
.piece {
  font-family: "Noto Sans Symbols 2", "Segoe UI Symbol", sans-serif;
  /* Une pièce prend les trois quarts de la case */
  font-size: calc(var(--taille-plateau) / 8 * 0.75);
  line-height: 1;
  user-select: none;
}

/* Pièce blanche : coloriée en blanc, avec un fin contour sombre tout autour */
.blanche {
  color: var(--piece-blanche);
  text-shadow:
    -1px -1px 0 #2B2620,
     1px -1px 0 #2B2620,
    -1px  1px 0 #2B2620,
     1px  1px 0 #2B2620,
     0 3px 6px rgba(0, 0, 0, 0.45);
}

/* Pièce noire : coloriée en noir, avec un fin contour clair tout autour */
.noire {
  color: var(--piece-noire);
  text-shadow:
    -1px -1px 0 rgba(250, 247, 240, 0.4),
     1px -1px 0 rgba(250, 247, 240, 0.4),
    -1px  1px 0 rgba(250, 247, 240, 0.4),
     1px  1px 0 rgba(250, 247, 240, 0.4),
     0 3px 6px rgba(0, 0, 0, 0.35);
}


/* ============================================================
   L'appli : le menu à gauche, les pages à droite
   ============================================================ */
.appli {
  display: flex;
  min-height: 100vh;
}

/* Le menu */
.menu {
  position: sticky;         /* le menu reste en place quand on fait défiler la page */
  top: 0;
  height: 100vh;
  width: 100px;
  flex-shrink: 0;           /* le menu ne rétrécit jamais */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 24px 10px;
  overflow-y: auto;         /* si la fenêtre est trop basse pour les 8 liens, on peut faire défiler */
  border-right: 1px solid var(--bordure);
  background: color-mix(in srgb, var(--carte) 60%, transparent);
}

/* Un lien du menu : le petit dessin au-dessus, le mot en dessous */
.lien-menu {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 12px 4px;
  border: 1px solid transparent;
  border-radius: 16px;
  color: var(--texte-doux);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;    /* pas de soulignement */
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}

.lien-menu:hover {
  color: var(--texte);
}

/* Le lien de la page qu'on regarde : en doré, dans un petit cadre */
.lien-menu.actif {
  color: var(--dore);
  border-color: color-mix(in srgb, var(--dore) 60%, transparent);
  background: color-mix(in srgb, var(--dore) 8%, transparent);
}

/* Les petits dessins au trait (SVG) */
.icone {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* La zone des pages, à droite du menu */
.contenu {
  flex: 1;
  min-width: 0;             /* elle peut rétrécir sans déborder */
}


/* ============================================================
   La page d'accueil
   ============================================================ */
#page-accueil {
  max-width: 1100px;
  margin: 0 auto;
  padding: 32px 32px 48px;
}

/* Le haut : le texte à gauche, le grand roi à droite (une grille de 2 colonnes) */
.accueil-haut {
  display: grid;
  grid-template-columns: 1fr minmax(0, 440px);
  align-items: center;
  gap: 24px;
}

/* « Bonsoir, Nathan » et la petite couronne */
.salut {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 18px;
  color: var(--texte-doux);
}

.couronne {
  width: 18px;
  height: 18px;
  fill: var(--dore);
}

/* Le grand titre « Chaque coup prépare ta victoire. » */
.grand-titre {
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 600;
  font-size: clamp(44px, 6vw, 76px);
  line-height: 1.02;
}

.grand-titre em {
  color: var(--dore);
  font-style: italic;
}

.accueil-texte .sous-titre {
  font-size: 18px;
}

.boutons-accueil {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.boutons-accueil .bouton-pilule {
  padding: 14px 24px;
}

/* Le gros bouton doré « Jouer maintenant » */
.bouton-dore {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border: none;
  border-radius: 999px;
  background: var(--dore);
  color: #15120C;
  font-family: inherit;     /* un <button> garde la même écriture que le reste */
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s;
}

.bouton-dore:hover {
  background: var(--dore-clair);
}

.bouton-dore .icone {
  width: 18px;
  height: 18px;
}

/* Un bouton pilule qui est un lien (balise <a>) : pas de soulignement */
a.bouton-pilule {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

/* Le grand roi : ses bords se fondent dans le noir.
   Le « masque » garde l'image au milieu, et l'efface doucement vers les bords. */
.grand-roi {
  display: block;
  width: 100%;
  height: auto;
  -webkit-mask-image: radial-gradient(ellipse at center, black 45%, transparent 72%);
  mask-image: radial-gradient(ellipse at center, black 45%, transparent 72%);
}

/* Les titres des parties : « CHOISIS TON MODE », « TES PROGRÈS »… */
.titre-section {
  margin: 44px 0 14px;
}

/* Une carte : un cadre arrondi */
.carte {
  padding: 20px;
  background: var(--carte);
  border: 1px solid var(--bordure);
  border-radius: 20px;
}


/* --- Choisis ton mode : 3 cartes côte à côte --- */
.cartes-modes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.carte-mode {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  font: inherit;            /* un bouton garde la même écriture que le reste */
  color: var(--texte);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.2s, transform 0.2s;
}

/* Quand la souris passe dessus, la carte monte un tout petit peu */
.carte-mode:hover {
  border-color: var(--dore);
  transform: translateY(-2px);
}

.carte-mode .icone {
  width: 30px;
  height: 30px;
  margin-bottom: 6px;
  color: var(--dore);
}

.carte-titre {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 24px;
  font-weight: 600;
}

.carte-texte {
  color: var(--texte-doux);
  font-size: 14px;
}


/* --- Tes progrès : 4 cartes --- */
.cartes-progres {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.carte-progres {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 140px;
}

.carte-progres .etiquette {
  margin: 0;
}

.grand-chiffre {
  font-size: 36px;
  font-weight: 600;
  line-height: 1.1;
  white-space: nowrap;      /* le chiffre ne se coupe jamais en deux lignes */
}

.grand-chiffre small {
  color: var(--texte-doux);
  font-size: 18px;
  font-weight: 400;
}

/* La petite courbe des victoires */
.courbe {
  width: 100%;
  height: 36px;
  margin-top: auto;         /* poussée tout en bas de la carte */
}

.courbe polyline {
  fill: none;
  stroke: var(--dore);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;   /* le trait garde la même épaisseur */
}

/* La carte avec le cercle des défis */
.carte-cercle {
  flex-direction: row;
  align-items: center;
  gap: 14px;
}

.cercle-progres {
  width: 92px;
  height: 92px;
  flex-shrink: 0;
  transform: rotate(-90deg);   /* on tourne le cercle pour que le doré commence tout en haut */
}

.cercle-fond {
  fill: none;
  stroke: var(--bordure);
  stroke-width: 8;
}

/* Le rond doré : « stroke-dasharray » dit quelle longueur du tour est dessinée.
   Le tour complet mesure environ 264. Ici 0 : on ne voit rien (0 %). */
.cercle-dore {
  fill: none;
  stroke: var(--dore);
  stroke-width: 8;
  stroke-dasharray: 0 264;
}

.cercle-texte {
  display: flex;
  flex-direction: column;
  gap: 2px;
}


/* --- Le défi du jour --- */
.carte-defi {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 28px;
}

/* Le petit plateau : 8 × 8 cases de 22 px */
.mini-plateau {
  display: grid;
  grid-template-columns: repeat(8, 22px);
  grid-template-rows: repeat(8, 22px);
  border-radius: 6px;
  overflow: hidden;
}

.mini-plateau > div {
  display: flex;
  align-items: center;
  justify-content: center;
}

.mini-plateau .piece {
  font-size: 18px;
}

.defi-texte h3 {
  margin: 0 0 6px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 26px;
  font-weight: 600;
}

.defi-texte p {
  margin: 0 0 16px;
  color: var(--texte-doux);
}

/* Un bouton pilule avec un contour doré */
.bouton-contour-dore {
  border-color: var(--dore);
  color: var(--dore);
}

.defi-recompense {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-left: 28px;
  border-left: 1px solid var(--bordure);
}

.recompense {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 24px;
  font-weight: 600;
}

.etoile {
  width: 22px;
  height: 22px;
  fill: var(--dore);
}

/* La phrase tout en bas : « Réfléchis aujourd'hui, gagne demain. » */
.phrase-fin {
  margin: 48px 0 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 28px;
  text-align: center;
}

.phrase-fin em {
  color: var(--dore);
  font-style: italic;
}


/* ============================================================
   La page de partie : la flèche pour revenir à l'accueil
   ============================================================ */
.entete-partie {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}

.entete-partie .titre {
  margin: 0;
}

.retour {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--bordure);
  border-radius: 50%;
  color: var(--texte);
  transition: border-color 0.2s, color 0.2s;
}

.retour:hover {
  border-color: var(--dore);
  color: var(--dore);
}


/* ============================================================
   La page « Mes IA »
   ============================================================ */

/* Une page large, comme l'accueil, avec le titre à gauche */
.page-large {
  max-width: 1100px;
  margin: 0 auto;
  padding: 32px 32px 48px;
}

.page-large .titre {
  text-align: left;
}

/* Le bilan : 2 cartes côte à côte */
.bilan {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.bilan-carte {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 220px;
}

.bilan-carte .etiquette {
  margin: 0;
}

/* La carte du match IA contre IA */
.carte-match {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.choix-match {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

/* Une IA du match : sa pastille, le bouton −, son nom, le bouton + */
.choix-ia {
  display: flex;
  align-items: center;
  gap: 10px;
}

.choix-ia-nom {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 130px;         /* la largeur ne bouge pas quand le nom change */
}

.choix-ia-nom .etiquette {
  margin: 0;
}

/* Le mot « contre », en doré et penché */
.contre {
  color: var(--dore);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 22px;
  font-style: italic;
}

/* Les boutons ronds − et + */
.bouton-rond {
  width: 36px;
  height: 36px;
  border: 1px solid var(--bordure);
  border-radius: 50%;
  background: transparent;
  color: var(--texte);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}

.bouton-rond:hover {
  border-color: var(--dore);
  color: var(--dore);
}

.choix-vitesse {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.choix-vitesse .etiquette {
  margin: 0;
}

.boutons-vitesse {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Les 10 cartes des IA : autant de colonnes que possible, chacune d'au moins 230 px */
.cartes-ia {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 16px;
}

.carte-ia {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* La phrase de style prend la place libre : les barres et les boutons s'alignent en bas */
.carte-ia .carte-texte {
  flex: 1;
}

.carte-ia-haut {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.carte-ia-haut .etiquette {
  margin: 0;
}

.score-ia {
  color: var(--texte-doux);
  font-size: 14px;
}

.score-ia em {
  color: var(--texte);
  font-style: normal;
  font-weight: 600;
}

.carte-ia .bouton-pilule {
  align-self: flex-start;
}

/* Les étiquettes de couleur : « Battue », « Prochain défi »…
   (« border: 1px solid » sans couleur : le contour prend la couleur du texte) */
.badge {
  padding: 3px 10px;
  border: 1px solid;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.badge-battue {
  color: var(--vert);
}

.badge-defi {
  color: var(--dore);
}

.badge-a-battre {
  color: var(--rouge-doux);
}

.badge-jamais {
  color: var(--texte-doux);
  border-color: var(--bordure);
}

.badge-bientot {
  color: var(--texte-doux);
  border-color: var(--bordure);
  border-style: dashed;     /* un contour en pointillés */
}

/* Un bouton qu'on ne peut pas encore utiliser : à moitié transparent */
.bouton-pilule:disabled,
.bouton-pilule:disabled:hover {
  opacity: 0.45;
  border-color: var(--bordure);
  color: var(--texte);
  cursor: not-allowed;
}


/* ============================================================
   La page « Défi du jour »
   ============================================================ */

/* Le nom du défi, par exemple « Le couloir » */
.titre-defi {
  margin: 0 0 6px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 30px;
  font-weight: 600;
}

.consigne-defi {
  margin: 0;
  color: var(--texte-doux);
  line-height: 1.5;
}

.consigne-defi em {
  color: var(--dore);
  font-style: normal;
  font-weight: 600;
}

/* Les 3 boutons « Défi 1 », « Défi 2 », « Défi 3 » */
.choix-defis {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.choix-defis .bouton-pilule {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Un défi réussi : un contour vert et une petite étoile */
.choix-defis .reussi {
  border-color: var(--vert);
}

.etoile-petite {
  width: 13px;
  height: 13px;
  fill: currentColor;
}

/* Le message sous le plateau du défi peut être un peu long : il passe à la ligne */
#message-defi {
  max-width: var(--taille-plateau);
}


/* ============================================================
   La page « Apprendre » (apprendre.js)
   ============================================================ */

/* L'explication de la leçon */
.texte-lecon {
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 1.6;
}

.texte-lecon em {
  color: var(--dore);
  font-style: normal;
  font-weight: 600;
}

/* Le bouton « Leçon suivante » prend toute la largeur, sous les deux autres boutons */
.bouton-lecon-suivante {
  grid-column: 1 / -1;
}

/* Le titre de chaque groupe de leçons : « Les pièces », « Les règles »… */
.groupe-lecons {
  margin: 14px 0 8px;
  color: var(--texte-doux);
  font-size: 13px;
  font-weight: 600;
}

.liste-lecons .groupe-lecons:first-child {
  margin-top: 0;
}

.liste-lecons .choix-defis {
  margin-bottom: 0;
}

/* Un bouton de leçon : un peu plus petit que les autres, avec le dessin de la pièce */
.bouton-lecon {
  padding: 7px 12px;
  font-size: 13px;
}

.piece-lecon {
  font-family: "Noto Sans Symbols 2", "Segoe UI Symbol", sans-serif;
  font-size: 16px;
  line-height: 1;
}

/* Le message sous le plateau de la leçon peut être long : il passe à la ligne */
#message-lecon {
  max-width: var(--taille-plateau);
}

/* L'étoile à ramasser : au milieu de la case, elle grossit et rapetisse doucement */
.etoile-lecon {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 60%;
  height: 60%;
  pointer-events: none;     /* le clic passe à travers, jusqu'à la case */
  animation: briller 1s ease-in-out infinite alternate;
}

.etoile-lecon svg {
  width: 100%;
  height: 100%;
  fill: var(--dore);
  stroke: #15120C;          /* un fin contour sombre, pour bien la voir sur les cases claires */
  stroke-width: 1;
}

/* Sur une pièce à manger : l'étoile est petite, dans le coin en haut à droite */
.etoile-lecon.sur-piece {
  inset: 4% 4% auto auto;
  margin: 0;
  width: 34%;
  height: 34%;
}

@keyframes briller {
  from { transform: scale(0.85); }
  to   { transform: scale(1.05); }
}

/* Si l'ordi demande moins d'animations, l'étoile reste tranquille */
@media (prefers-reduced-motion: reduce) {
  .etoile-lecon {
    animation: none;
  }
}


/* ============================================================
   La page « Amis » (amis.js)
   ============================================================ */

.intro-amis {
  max-width: 640px;
  margin: -6px 0 24px;
  color: var(--texte-doux);
  line-height: 1.6;
}

.intro-amis em {
  color: var(--dore);
  font-style: normal;
  font-weight: 600;
}

/* La carte « Ajouter un ami » */
.ajouter-ami {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 520px;
}

.ajouter-ami .etiquette {
  margin: 0;
}

/* La case du prénom et le bouton « Ajouter », côte à côte */
.ligne-ajouter {
  display: flex;
  gap: 10px;
}

.ligne-ajouter input {
  flex: 1;
  min-width: 0;             /* elle peut rétrécir sur un petit écran */
  padding: 12px 18px;
  border: 1px solid var(--bordure);
  border-radius: 999px;
  background: transparent;
  color: var(--texte);
  font-family: inherit;
  font-size: 15px;
}

.ligne-ajouter input:focus {
  outline: none;
  border-color: var(--dore);
}

/* Le petit message : en vert si tout va bien, en rouge doux sinon */
.message-amis {
  margin: 0;
  color: var(--vert);
  font-size: 13px;
}

.message-amis.erreur {
  color: var(--rouge-doux);
}

.message-amis:empty {
  display: none;
}

/* Le rond avec la première lettre du prénom */
.avatar-ami {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid color-mix(in srgb, var(--dore) 60%, transparent);
  border-radius: 50%;
  background: color-mix(in srgb, var(--dore) 12%, transparent);
  color: var(--dore);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 24px;
  font-weight: 600;
}

/* Les boutons « Jouer ensemble » et « Retirer » */
.boutons-ami {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}


/* ============================================================
   La page « Stats »
   ============================================================ */

/* Le message quand il n'y a encore aucune partie */
.message-vide {
  margin: 0 0 16px;
  color: var(--texte-doux);
}

/* Les 4 chiffres */
.cartes-chiffres {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.carte-chiffre {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.carte-chiffre .etiquette {
  margin: 0;
}

/* La légende du graphique : un petit carré de couleur devant chaque mot */
.legende {
  display: flex;
  gap: 18px;
  margin-bottom: 16px;
  color: var(--texte-doux);
  font-size: 13px;
}

.legende > span {
  display: flex;
  align-items: center;
  gap: 6px;
}

.carre-legende {
  width: 10px;
  height: 10px;
  border-radius: 3px;
}

/* Les couleurs : doré pour les victoires, gris pour les défaites */
.carre-legende.victoire,
.barre.victoire {
  background: var(--dore);
}

.carre-legende.defaite,
.barre.defaite {
  background: var(--gris-defaite);
}

/* Le graphique : l'axe à gauche, les semaines à droite */
.carte-graphique {
  position: relative;       /* pour placer la bulle par-dessus */
}

.graphique {
  display: flex;
  gap: 10px;
}

/* L'axe de gauche : le plus grand nombre en haut, 0 en bas (à la hauteur des barres) */
.axe-y {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 160px;
  color: var(--texte-doux);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.graphique-semaines {
  flex: 1;
  display: flex;
}

/* Une semaine : ses deux barres, et sa date en dessous */
.semaine {
  flex: 1;
  cursor: default;
}

.semaine:focus {
  outline: none;
}

/* La zone des barres : un fin trait en haut (le plus grand nombre) et en bas (le zéro) */
.barres {
  display: flex;
  justify-content: center;
  align-items: flex-end;    /* les barres partent du bas */
  gap: 2px;                 /* un petit espace entre les deux barres */
  height: 160px;
  border-top: 1px solid color-mix(in srgb, var(--bordure) 60%, transparent);
  border-bottom: 1px solid var(--bordure);
  transition: background 0.15s;
}

/* Quand la souris passe sur une semaine (ou avec Tab), sa colonne s'éclaire un peu */
.semaine:hover .barres,
.semaine:focus-visible .barres {
  background: color-mix(in srgb, var(--texte) 5%, transparent);
}

/* Une barre : fine, avec le haut arrondi */
.barres .barre {
  width: 14px;
  border-radius: 4px 4px 0 0;
}

.nom-semaine {
  display: block;
  margin-top: 8px;
  color: var(--texte-doux);
  font-size: 12px;
  text-align: center;
}

/* La bulle d'information, au-dessus de la semaine survolée */
.bulle-graphique {
  position: absolute;
  z-index: 5;
  padding: 6px 10px;
  border: 1px solid var(--bordure);
  border-radius: 8px;
  background: #1E1E22;
  font-size: 13px;
  white-space: nowrap;
  pointer-events: none;     /* la souris passe à travers */
  transform: translate(-50%, calc(-100% - 6px));   /* centrée, juste au-dessus */
}

/* Une ligne par IA : son nom, sa barre, son score */
.barres-ia {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ligne-ia {
  display: grid;
  grid-template-columns: 170px 1fr 80px;
  align-items: center;
  gap: 12px;
  font-size: 14px;
}

.nom-ia small,
.tableau-parties small {
  color: var(--texte-doux);
}

/* La piste : le fond gris foncé de la barre */
.piste {
  display: flex;
  gap: 2px;
  height: 10px;
  overflow: hidden;
  border-radius: 5px;
  background: color-mix(in srgb, var(--bordure) 60%, transparent);
}

.piste .barre {
  height: 100%;
}

.score-ligne {
  color: var(--texte-doux);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* Le tableau des dernières parties */
.tableau-conteneur {
  padding: 8px 20px;
  overflow-x: auto;         /* sur un petit écran, on peut faire défiler le tableau */
}

.tableau-parties {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.tableau-parties th {
  padding: 10px 8px;
  border-bottom: 1px solid var(--bordure);
  color: var(--texte-doux);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-align: left;
  text-transform: uppercase;
}

.tableau-parties td {
  padding: 10px 8px;
  border-bottom: 1px solid color-mix(in srgb, var(--bordure) 60%, transparent);
  white-space: nowrap;
}

.tableau-parties tr:last-child td {
  border-bottom: none;
}

.case-vide {
  color: var(--texte-doux);
}


/* ============================================================
   La page « Réglages »
   ============================================================ */

/* La page : les réglages à gauche, l'aperçu à droite */
.contenu-reglages {
  display: grid;
  grid-template-columns: 1fr 250px;
  align-items: start;
  gap: 16px;
}

/* L'aperçu reste visible quand on fait défiler la page (« sticky » = collant) */
.carte-apercu {
  order: 2;                 /* à droite, après les réglages */
  position: sticky;
  top: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.carte-apercu .etiquette {
  margin: 0;
}

/* Le petit plateau de l'aperçu : 8 × 8 cases de 26 px */
.apercu-plateau {
  display: grid;
  grid-template-columns: repeat(8, 26px);
  grid-template-rows: repeat(8, 26px);
  align-self: center;
  border-radius: 6px;
  overflow: hidden;
}

.apercu-plateau > div {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.apercu-plateau .piece {
  font-size: 21px;
}

.apercu-plateau .coordonnee {
  font-size: 8px;
}

.apercu-plateau .chiffre {
  top: 1px;
  left: 2px;
}

.apercu-plateau .lettre {
  bottom: 1px;
  right: 2px;
}

.apercu-plateau .choisie {
  box-shadow: inset 0 0 0 2px var(--dore);
}

.texte-apercu {
  margin: 0;
  color: var(--texte-doux);
  font-size: 13px;
  line-height: 1.5;
}

.texte-apercu em {
  color: var(--dore);
  font-style: normal;
  font-weight: 600;
}

/* Les 4 blocs : 2 par ligne */
.grille-reglages {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.bloc-reglages {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.bloc-reglages .etiquette {
  margin: 0;
}

/* Le nom d'un réglage, au-dessus de ses boutons */
.nom-reglage {
  margin: 4px 0 -4px;
  font-size: 14px;
}

/* Un groupe de boutons : on en choisit un seul */
.choix-reglage {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.choix-reglage .bouton-pilule {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* L'aperçu d'un thème : un petit damier de 2 × 2 cases
   (« conic-gradient » dessine des parts de gâteau de couleur : ici 4 quarts) */
.apercu-theme {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  background: conic-gradient(var(--c1) 0 25%, var(--c2) 0 50%, var(--c1) 0 75%, var(--c2) 0);
}

/* Une pastille ronde de couleur */
.pastille-couleur {
  width: 14px;
  height: 14px;
  border: 1px solid color-mix(in srgb, var(--texte) 40%, transparent);   /* un contour clair : on voit même la pastille noire */
  border-radius: 50%;
  background: var(--c);
}

/* Une ligne : le nom à gauche, le réglage à droite */
.ligne-reglage {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 14px;
}

/* Le curseur du volume, colorié avec la couleur spéciale */
.ligne-reglage input[type="range"] {
  flex: 1;
  max-width: 220px;
  accent-color: var(--dore);
}

/* La case pour écrire son prénom */
.ligne-prenom input {
  flex: 1;
  max-width: 220px;
  padding: 10px 14px;
  border: 1px solid var(--bordure);
  border-radius: 12px;
  background: transparent;
  color: var(--texte);
  font-family: inherit;
  font-size: 15px;
}

.ligne-prenom input:focus {
  outline: none;
  border-color: var(--dore);
}

/* L'interrupteur : la vraie case à cocher est cachée, on dessine une glissière à la place */
.interrupteur {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 14px;
  cursor: pointer;
}

.interrupteur input {
  position: absolute;
  opacity: 0;               /* invisible, mais toujours là (on peut l'utiliser au clavier) */
  pointer-events: none;
}

/* La glissière : un rectangle arrondi… */
.glissiere {
  position: relative;
  flex-shrink: 0;
  width: 44px;
  height: 24px;
  border-radius: 12px;
  background: var(--bordure);
  transition: background 0.2s;
}

/* … avec un rond qui glisse (« ::after » ajoute un petit dessin dans la glissière) */
.glissiere::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--texte);
  transition: transform 0.2s;
}

/* Quand c'est coché : la glissière devient de la couleur spéciale, et le rond va à droite */
.interrupteur input:checked + .glissiere {
  background: var(--dore);
}

.interrupteur input:checked + .glissiere::after {
  transform: translateX(20px);
}

.interrupteur input:focus-visible + .glissiere {
  outline: 2px solid var(--dore-clair);
  outline-offset: 2px;
}

.bouton-effacer {
  align-self: flex-start;
  margin-top: 6px;
}

/* Le petit message « C'est enregistré ! » */
.message-reglages {
  margin: 0;
  color: var(--vert);
  font-size: 13px;
  line-height: 1.5;
}

.message-reglages:empty {
  display: none;            /* pas de message : on ne garde pas de place vide */
}


/* ============================================================
   L'invitation (amis.js)
   ============================================================ */

/* Un fond sombre par-dessus le jeu, avec la carte d'invitation au milieu */
.ecran-invitation {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  padding: 24px 16px;
  overflow-y: auto;
  background: rgba(5, 5, 7, 0.85);
}

.carte-invitation {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: min(440px, 100%);
  margin: auto;             /* bien au milieu de l'écran */
  padding: 32px 28px;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.carte-invitation .titre {
  margin: 0;
  font-size: 36px;
}

/* « C'est à Léo de répondre : » en doré */
.consigne-invitation {
  margin: 0;
  color: var(--dore);
  font-weight: 600;
}

.boutons-invitation {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

/* Le rond de ton ami bouge un peu, comme une sonnette qui sonne : « Dring ! » */
.carte-invitation .grand-avatar {
  animation: sonner 1.4s ease-in-out infinite;
}

@keyframes sonner {
  0%, 50%, 100% { transform: rotate(0deg); }
  10% { transform: rotate(-10deg); }
  20% { transform: rotate(10deg); }
  30% { transform: rotate(-6deg); }
  40% { transform: rotate(6deg); }
}

/* Si l'ordi demande moins d'animations, le rond reste tranquille */
@media (prefers-reduced-motion: reduce) {
  .carte-invitation .grand-avatar {
    animation: none;
  }
}


/* ============================================================
   L'écran de connexion (connexion.js)
   ============================================================ */

/* Il couvre tout l'écran, par-dessus le jeu et le menu */
.ecran-connexion {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  padding: 24px 16px;
  overflow-y: auto;         /* sur un petit écran, on peut faire défiler */
  background:
    radial-gradient(ellipse at top, color-mix(in srgb, var(--dore) 14%, transparent), transparent 60%),
    var(--fond);
}

.carte-connexion {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: min(420px, 100%);
  margin: auto;             /* bien au milieu de l'écran */
  padding: 32px 28px;
}

.couronne-connexion {
  align-self: center;
  width: 44px;
  height: 44px;
  fill: none;
  stroke: var(--dore);
  stroke-width: 1.6;
  stroke-linejoin: round;
}

.carte-connexion .titre {
  margin: 0;
  font-size: 40px;
}

.texte-connexion {
  margin: 0 0 6px;
  color: var(--texte-doux);
  line-height: 1.5;
  text-align: center;
}

.texte-connexion em {
  color: var(--dore);
  font-style: normal;
  font-weight: 600;
}

/* Une case à remplir, avec son nom au-dessus */
.champ-connexion {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--texte-doux);
  font-size: 13px;
  font-weight: 600;
}

.champ-connexion input {
  padding: 12px 18px;
  border: 1px solid var(--bordure);
  border-radius: 999px;
  background: transparent;
  color: var(--texte);
  font-family: inherit;
  font-size: 16px;          /* 16 px : sur un téléphone, l'écran ne zoome pas quand on tape */
}

.champ-connexion input:focus {
  outline: none;
  border-color: var(--dore);
}

.montrer-mot-de-passe {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--texte-doux);
  font-size: 13px;
  cursor: pointer;
}

.montrer-mot-de-passe input {
  accent-color: var(--dore);
}

/* Le message quand quelque chose ne va pas : en rouge doux */
.erreur-connexion {
  margin: 0;
  color: var(--rouge-doux);
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
}

.erreur-connexion:empty {
  display: none;
}

.carte-connexion .bouton-dore {
  justify-content: center;
}

/* « Mot de passe oublié ? » : un petit lien souligné */
.lien-oubli {
  align-self: center;
  border: none;
  background: none;
  color: var(--texte-doux);
  font-family: inherit;
  font-size: 13px;
  text-decoration: underline;
  cursor: pointer;
}

.lien-oubli:hover {
  color: var(--dore);
}

/* Le bouton « Annuler » (quand on vient de la page Mon compte) */
.bouton-annuler-connexion {
  align-self: center;
}


/* ============================================================
   La page « Mon compte » (compte.js)
   ============================================================ */

/* Ta carte de joueur : le grand rond, ton nom, et « Me déconnecter » */
.carte-joueur {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
}

.grand-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border: 1px solid color-mix(in srgb, var(--dore) 60%, transparent);
  border-radius: 50%;
  background: color-mix(in srgb, var(--dore) 12%, transparent);
  color: var(--dore);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 40px;
  font-weight: 600;
}

/* Le grand rond est un bouton : on peut cliquer dessus pour changer d'icône */
button.grand-avatar {
  position: relative;       /* pour placer le petit crayon dans son coin */
  padding: 0;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}

button.grand-avatar:hover {
  border-color: var(--dore);
  background: color-mix(in srgb, var(--dore) 22%, transparent);
}

/* Le petit crayon doré en bas à droite du rond : il dit « tu peux me changer ! »
   (« ::after » ajoute un petit dessin après le contenu du bouton) */
button.grand-avatar::after {
  content: "✎";
  position: absolute;
  right: -2px;
  bottom: -2px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--dore);
  color: #15120C;
  font-family: "Noto Sans Symbols 2", "Segoe UI Symbol", sans-serif;
  font-size: 13px;
  font-weight: 400;
}

.infos-joueur {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 4px;
  min-width: 160px;
}

/* Les boutons « Changer mon icône » et « Me déconnecter » */
.boutons-joueur {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Tes chiffres : autant de colonnes que possible, chacune d'au moins 150 px */
.chiffres-compte {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 16px;
}

/* Les cartes « Changer de compte » et « Changer mon mot de passe » */
.bloc-compte {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 560px;
}

.bloc-compte .carte-texte {
  margin: 0;
  line-height: 1.5;
}

.bloc-compte .bouton-pilule,
.bloc-compte .bouton-dore {
  align-self: flex-start;
}

/* Les boutons des autres comptes, avec leur petit rond */
.boutons-comptes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.bouton-compte {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.avatar-petit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--dore) 18%, transparent);
  color: var(--dore);
  font-size: 12px;
}

/* Le choix de l'icône : des boutons ronds, à la suite */
.choix-icone {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.bouton-icone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--bordure);
  border-radius: 50%;
  background: transparent;
  color: var(--dore);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 24px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}

.bouton-icone:hover {
  border-color: var(--dore);
}

/* L'icône choisie : un rond doré tout autour */
.bouton-icone.actif {
  border-color: var(--dore);
  background: color-mix(in srgb, var(--dore) 18%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--dore) 40%, transparent);
}

/* Les icônes-symboles ont besoin de l'écriture des symboles (la même que les pièces du plateau),
   et d'une taille un peu différente dans chaque rond */
.avec-symbole {
  font-family: "Noto Sans Symbols 2", "Segoe UI Symbol", sans-serif;
  font-weight: 400;
}

.grand-avatar.avec-symbole {
  font-size: 38px;
}

.avatar-petit.avec-symbole {
  font-size: 13px;
}

.avatar-menu.avec-symbole {
  font-size: 14px;
}

/* Dans le menu : le rond avec ta lettre (ou ton icône), à la place d'un dessin */
.avatar-menu {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 1.8px solid currentColor;
  border-radius: 50%;
  font-size: 12px;
  line-height: 1;
}

/* Sur l'ordi, « Mon compte » est tout en bas du menu */
.lien-compte {
  margin-top: auto;
}

/* « Mon compte » sur l'ordi, « Compte » sur le téléphone (il y a moins de place) */
.sur-telephone {
  display: none;
}


/* ============================================================
   Les confettis (confettis.js)
   ============================================================ */

/* La boîte des confettis : par-dessus toute la page (même le menu),
   et les clics passent à travers, pour qu'on puisse continuer à jouer */
.pluie-confettis {
  position: fixed;
  inset: 0;
  z-index: 100;
  overflow: hidden;         /* les confettis qui sortent de l'écran sont cachés */
  pointer-events: none;
}

/* Un confetti : un petit rectangle, juste au-dessus de l'écran au départ */
.confetti {
  position: absolute;
  top: -20px;
  border-radius: 2px;
  animation-name: tomber;
  animation-timing-function: linear;    /* il tombe toujours à la même vitesse */
  animation-fill-mode: both;            /* il attend en haut, puis reste caché à la fin */
}

/* L'animation « tomber » : le confetti descend jusqu'en bas de l'écran (110vh = un peu plus
   que la hauteur de l'écran), poussé par le vent, en se balançant, en tournant et en se retournant.
   Les nombres viennent des variables CSS de chaque confetti (--vent, --balancement…). */
@keyframes tomber {
  0% {
    transform: translate(0, 0) rotate(0deg) rotateY(0deg);
  }
  25% {
    transform: translate(calc(var(--vent) * 0.25 + var(--balancement)), 27vh)
               rotate(calc(var(--tours) * 0.25)) rotateY(calc(var(--retournements) * 0.25));
  }
  50% {
    transform: translate(calc(var(--vent) * 0.5 - var(--balancement)), 55vh)
               rotate(calc(var(--tours) * 0.5)) rotateY(calc(var(--retournements) * 0.5));
  }
  75% {
    transform: translate(calc(var(--vent) * 0.75 + var(--balancement)), 82vh)
               rotate(calc(var(--tours) * 0.75)) rotateY(calc(var(--retournements) * 0.75));
    opacity: 1;
  }
  100% {
    transform: translate(var(--vent), 110vh)
               rotate(var(--tours)) rotateY(var(--retournements));
    opacity: 0;             /* il disparaît doucement à la fin */
  }
}


/* ============================================================
   Les pages qui arrivent bientôt
   ============================================================ */
.bientot {
  max-width: 520px;
  margin: 0;
  color: var(--texte-doux);
  line-height: 1.6;
  text-align: center;
}

.bientot em {
  color: var(--dore);
  font-style: normal;
  font-weight: 600;
}


/* ============================================================
   Les écrans plus petits
   « @media (max-width: …) » = ces règles marchent seulement
   quand l'écran est moins large que ce nombre.
   ============================================================ */

/* Écran moyen : le roi passe sous le texte, les progrès sur 2 colonnes */
@media (max-width: 1000px) {
  .accueil-haut {
    grid-template-columns: 1fr;
  }

  .grand-roi {
    max-width: 380px;
    margin: 0 auto;
  }

  .cartes-progres,
  .cartes-chiffres {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Réglages : l'aperçu passe tout en haut, à côté de son texte */
  .contenu-reglages {
    grid-template-columns: 1fr;
  }

  .carte-apercu {
    order: 0;
    position: static;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
  }

  .carte-apercu .etiquette {
    grid-column: 1 / -1;
  }

  .apercu-plateau {
    grid-row: span 2;
  }
}

/* Petit écran (téléphone) : le menu passe en bas, et le plateau prend toute la largeur. */
@media (max-width: 760px) {
  :root {
    /* Sur un téléphone, on fait défiler la page : le plateau peut prendre toute la largeur
       (l'écran moins les marges de la page et du cadre) */
    --taille-plateau: max(260px, min(100vw - 58px, 560px));
  }

  .menu {
    position: fixed;        /* collé en bas de l'écran */
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10;            /* au-dessus de tout le reste */
    width: auto;
    height: auto;
    flex-direction: row;
    justify-content: space-around;
    gap: 0;
    /* « env(safe-area-inset-bottom) » : la place de la barre tout en bas des iPhone */
    padding: 6px 0 calc(6px + env(safe-area-inset-bottom));
    border-right: none;
    border-top: 1px solid var(--bordure);
    background: var(--carte);
  }

  /* 9 liens sur la largeur d'un téléphone : chacun prend la même place, en tout petit */
  .lien-menu {
    flex: 1;
    min-width: 0;
    padding: 6px 0;
    font-size: 9px;
    letter-spacing: -0.04em;   /* les lettres un peu plus serrées */
    white-space: nowrap;       /* un mot ne passe jamais à la ligne */
  }

  .lien-menu .icone {
    width: 20px;
    height: 20px;
  }

  /* Le lien « Compte » : à sa place dans la barre, avec un rond un peu plus petit */
  .lien-compte {
    margin-top: 0;
  }

  .avatar-menu {
    width: 20px;
    height: 20px;
    font-size: 11px;
  }

  .sur-ordi {
    display: none;
  }

  .sur-telephone {
    display: inline;
  }

  .contenu {
    padding-bottom: calc(80px + env(safe-area-inset-bottom));   /* de la place pour le menu du bas */
  }

  /* Le cadre du plateau : moins de marge, pour laisser plus de place au plateau */
  .cadre-plateau {
    padding: 12px;
    border-radius: 16px;
  }

  .page {
    padding: 16px 12px;
  }

  /* L'en-tête de la partie : un titre un peu plus petit */
  .entete-partie .titre {
    font-size: 30px;
  }

  .retour {
    width: 36px;
    height: 36px;
  }

  /* Le panneau de la partie prend toute la largeur */
  .panneau {
    width: 100%;
    padding: 18px;
  }

  /* Le match IA contre IA : les deux IA l'une sous l'autre */
  .choix-match {
    flex-direction: column;
    align-items: flex-start;
  }

  .carte-match .bouton-dore {
    width: 100%;
    justify-content: center;
  }

  #page-accueil,
  .page-large {
    padding: 24px 16px 40px;
  }

  .cartes-modes,
  .grille-reglages {
    grid-template-columns: 1fr;
  }

  /* La carte du cercle : le cercle au-dessus, le texte en dessous */
  .carte-cercle {
    flex-direction: column;
    align-items: flex-start;
  }

  .cercle-progres {
    width: 70px;
    height: 70px;
  }

  .carte-defi {
    grid-template-columns: 1fr;
    justify-items: start;
  }

  .defi-recompense {
    padding-left: 0;
    border-left: none;
  }

  .ligne-ia {
    grid-template-columns: 110px 1fr 64px;
    gap: 8px;
    font-size: 13px;
  }

  /* Réglages : l'aperçu au-dessus de son texte */
  .carte-apercu {
    display: flex;
  }
}


/* ============================================================
   Le jeu en ligne : l'écran de connexion, la page Admin
   ============================================================ */

/* « Qui es-tu ? » : une grande case, avec les mêmes bords que les autres */
.champ-connexion textarea {
  padding: 12px 18px;
  border: 1px solid var(--bordure);
  border-radius: 18px;
  background: transparent;
  color: var(--texte);
  font-family: inherit;
  font-size: 16px;
  resize: vertical;
}

.champ-connexion textarea:focus {
  outline: none;
  border-color: var(--dore);
}

/* Le piège à robots : la case existe, mais elle est très loin, hors de l'écran */
.piege-a-robots {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

/* Le bouton doré pendant qu'on attend le serveur */
.bouton-dore:disabled {
  opacity: 0.6;
  cursor: wait;
}

/* La case du pseudo, dans une demande de compte */
.champ-admin {
  padding: 10px 16px;
  border: 1px solid var(--bordure);
  border-radius: 999px;
  background: transparent;
  color: var(--texte);
  font-family: inherit;
  font-size: 15px;
}

.champ-admin:focus {
  outline: none;
  border-color: var(--dore);
}

/* La boîte du code d'invitation (ou du mot de passe provisoire), avec un contour doré en pointillés */
.zone-secret {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px;
  border: 1px dashed var(--dore);
  border-radius: 14px;
}

.zone-secret:empty {
  display: none;
}

.secret-admin {
  color: var(--dore);
  font-family: ui-monospace, "Consolas", monospace;
  font-size: 24px;
  letter-spacing: 0.06em;
  user-select: all;          /* un clic sélectionne tout le code, pour le copier */
  overflow-wrap: anywhere;
}

/* Le journal : une ligne par action, et on peut faire défiler */
.liste-journal {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 360px;
  overflow-y: auto;
}

.ligne-journal {
  margin: 0;
  color: var(--texte);
  font-size: 14px;
  line-height: 1.5;
}

.ligne-journal .etiquette {
  margin-right: 6px;
}


/* ============================================================
   Le jeu en ligne : les amis, les notifications, la partie à distance et le chat
   ============================================================ */

/* Le message d'accueil du club, sur l'écran de connexion */
.accueil-club {
  margin: 0;
  padding: 10px 14px;
  border: 1px dashed color-mix(in srgb, var(--dore) 60%, transparent);
  border-radius: 14px;
  color: var(--texte);
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
}

/* Le rond d'un ami, avec le petit point « en ligne » en bas à droite */
.avatar-avec-point {
  position: relative;
  display: inline-flex;
}

.point-en-ligne {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 13px;
  height: 13px;
  border: 2px solid var(--carte);
  border-radius: 50%;
  background: var(--gris-defaite);
}

.point-en-ligne.allume {
  background: var(--dore);
  box-shadow: 0 0 8px color-mix(in srgb, var(--dore) 70%, transparent);
}

/* Les demandes d'amis : une petite carte par demande */
.demandes-amis {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 8px;
}

.demandes-amis:empty {
  display: none;
}

.demande-ami {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
}

.demande-ami .carte-texte {
  flex: 1;
  min-width: 150px;
}

/* « En attente de sa réponse… [Annuler l'invitation] » */
.attente-invitation {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

/* Les notifications : de petites cartes empilées en bas à droite */
.zone-notifications {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 70;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(340px, calc(100vw - 32px));
  pointer-events: none;      /* on peut cliquer à travers la zone vide */
}

.notification {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 16px 40px 16px 18px;
  border-color: color-mix(in srgb, var(--dore) 50%, var(--bordure));
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
  pointer-events: auto;
  animation: notification-arrive 0.25s ease-out;
}

@keyframes notification-arrive {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

.texte-notification {
  margin: 0;
  color: var(--texte);
  font-size: 14px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

/* La petite croix pour fermer (une notification, ou le chat) */
.fermer-notification {
  position: absolute;
  top: 8px;
  right: 10px;
  border: none;
  background: none;
  color: var(--texte-doux);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.fermer-notification:hover {
  color: var(--dore);
}

/* Les boutons « D'accord » / « Non, on continue » dans le message sous le plateau */
.message .bouton-pilule {
  margin: 6px 4px 0;
  font-size: 14px;
}

/* Le bloc « Messages » d'une partie en ligne */
.bloc-messages {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bloc-messages .etiquette {
  margin: 0;
}

.boutons-rapides {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.bouton-rapide {
  padding: 6px 12px;
  font-size: 13px;
}

.fil-partie {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.fil-partie:empty {
  display: none;
}

.ligne-fil {
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.ligne-fil.de-lui {
  color: var(--dore);
}

.ligne-fil.de-moi {
  color: var(--texte-doux);
}

.ligne-fil.erreur {
  color: var(--rouge-doux);
}

/* La fenêtre de chat : en bas à droite, on peut continuer à jouer pendant qu'on discute */
.fenetre-chat {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(360px, calc(100vw - 32px));
  max-height: min(520px, calc(100vh - 32px));
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
}

.fenetre-chat[hidden] {
  display: none;
}

.entete-chat {
  position: relative;
  padding-right: 28px;
}

.entete-chat .etiquette {
  margin: 0;
}

.entete-chat em {
  color: var(--dore);
  font-style: normal;
}

.entete-chat .fermer-notification {
  top: -4px;
  right: -4px;
}

.liste-chat {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 8px;
  min-height: 120px;
  overflow-y: auto;
}

/* Une bulle de message : la tienne à droite en doré, celle de ton ami à gauche */
.bulle-chat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-width: 82%;
  padding: 8px 12px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.bulle-chat.de-moi {
  align-self: flex-end;
  background: color-mix(in srgb, var(--dore) 22%, transparent);
  border-bottom-right-radius: 4px;
}

.bulle-chat.de-lui {
  align-self: flex-start;
  background: color-mix(in srgb, var(--texte) 8%, transparent);
  border-bottom-left-radius: 4px;
}

.pied-bulle {
  color: var(--texte-doux);
  font-size: 11px;
}

.lien-signaler {
  padding: 0;
  border: none;
  background: none;
  color: var(--texte-doux);
  font-family: inherit;
  font-size: 11px;
  text-decoration: underline;
  cursor: pointer;
}

.lien-signaler:hover {
  color: var(--rouge-doux);
}

.consigne-chat {
  margin: 0;
  color: var(--texte-doux);
  font-size: 12px;
  line-height: 1.4;
}

/* Le chat d'un joueur, dans la page Admin */
.bloc-chat-admin {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--bordure);
}

/* Sur un téléphone : le chat et les notifications passent au-dessus du menu du bas */
@media (max-width: 760px) {
  .zone-notifications,
  .fenetre-chat {
    right: 8px;
    bottom: calc(76px + env(safe-area-inset-bottom));
    width: calc(100vw - 16px);
  }
  .fenetre-chat {
    max-height: calc(100vh - 110px);
  }
}