/* ==========================================================================
   N'oubliez pas les casseroles — habillage FunKey « Groove Machine »
   Usage numérique uniquement (projection + poste de régie).

   Ce fichier ne contient QUE de l'apparence. Tous les noms de classes et
   d'identifiants utilisés par les scripts sont conservés à l'identique.
   Trois pages, trois ambiances (classe posée sur <body>) :
     .ecran-lancement  écran de titre / configuration de la partie
     .ecran-joueurs    écran à projeter (lisible à 10 mètres, unités en vh)
     .ecran-regie      poste de l'animateur (dense, sans décor, police Outfit)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Polices — fichiers WOFF2 hébergés dans le projet (le jeu peut tourner
   sans accès aux serveurs de polices). Chaque police est cherchée d'abord
   dans  assets/fonts/  puis, si ce jeu est installé dans le dossier FunKey,
   dans le dossier  fonts/  situé à la racine de FunKey.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Shrikhand";
  src: local("Shrikhand"), local("Shrikhand-Regular"),
       url("../fonts/Shrikhand-Regular.woff2") format("woff2"),
       url("../../../fonts/Shrikhand-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Righteous";
  src: local("Righteous"), local("Righteous-Regular"),
       url("../fonts/Righteous-Regular.woff2") format("woff2"),
       url("../../../fonts/Righteous-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Outfit";
  src: local("Outfit"),
       url("../fonts/Outfit-Variable.woff2") format("woff2"),
       url("../../../fonts/Outfit-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   Variables
   -------------------------------------------------------------------------- */
:root {
  /* Palette commune FunKey */
  --fk-chocolat: #3B1F14;   /* fond des écrans joueurs */
  --fk-expresso: #2A150D;   /* fond profond, régie, vignettage */
  --fk-caramel:  #4E2A1B;   /* surfaces : panneaux, cases */
  --fk-creme:    #F5E6C8;   /* tout le texte */
  --fk-sable:    #C9B08A;   /* texte secondaire */

  /* Accents des 4 jeux (couleurs des équipes + rayures 70s) */
  --fk-turquoise: #2BB3A7;
  --fk-moutarde:  #E3A82B;
  --fk-rose:      #E84A8A;
  --fk-orange:    #E8662A;

  /* États */
  --fk-ok:     #7CC46A;
  --fk-erreur: #E5483D;

  /* Couleur de CE jeu : N'oubliez pas les casseroles = turquoise */
  --jeu:        #2BB3A7;
  --jeu-clair:  #5FD3C8;
  --jeu-fonce:  #1D7A72;

  /* Typographies (avec polices de secours si les fichiers sont absents) */
  --fk-titre:     "Shrikhand", "Arial Black", Impact, sans-serif;
  --fk-jeu-texte: "Righteous", "Trebuchet MS", Verdana, sans-serif;
  --fk-regie:     "Outfit", "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  /* Formes */
  --fk-rayon:   24px;
  --fk-contour: 4px;

  /* Mouvement */
  --fk-rebond: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Noms hérités : certains styles écrits directement par les scripts
     (verdict de La Même Chanson) s'y réfèrent. À ne pas supprimer. */
  --police-affiche: var(--fk-titre);
  --succes: var(--fk-ok);
  --echec:  var(--fk-erreur);
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

[hidden] { display: none !important; }

html { background: var(--fk-expresso); }

body {
  margin: 0;
  min-height: 100vh;
  isolation: isolate;
  overflow-x: hidden;
  background: var(--fk-chocolat);
  color: var(--fk-creme);
  font-family: var(--fk-jeu-texte);
  font-size: 1rem;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}

body.ecran-regie {
  background: var(--fk-expresso);
  font-family: var(--fk-regie);
}

h1, h2, h3, .chiffre {
  font-family: var(--fk-titre);
  font-weight: 400;
  letter-spacing: 0.3px;
}

/* Righteous n'existe qu'en une graisse : on évite le faux gras */
strong { font-weight: 400; color: var(--jeu-clair); }
.ecran-regie strong { font-weight: 700; }

.centre { text-align: center; }

/* --------------------------------------------------------------------------
   Fond signature : sunburst chocolat/caramel + vignettage + grain pellicule
   (écrans de lancement et joueurs uniquement — jamais sur la régie)
   -------------------------------------------------------------------------- */
.fk-fond {
  position: fixed;
  inset: 0;
  z-index: -3;
  overflow: hidden;
  background: var(--fk-expresso);
  pointer-events: none;
}

.fk-sunburst {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 170vmax;
  height: 170vmax;
  margin: -85vmax 0 0 -85vmax;
  background: repeating-conic-gradient(
    from 0deg,
    var(--fk-chocolat) 0deg 7.5deg,
    var(--fk-caramel)  7.5deg 15deg
  );
  animation: fk-tourne 120s linear infinite;
}

.fk-fond::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at center,
    rgba(42, 21, 13, 0) 38%,
    rgba(42, 21, 13, 0.92) 100%
  );
}

.fk-grain {
  position: fixed;
  inset: -50%;
  z-index: 50;
  pointer-events: none;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: fk-grain 1s steps(6) infinite;
}

@keyframes fk-tourne { to { transform: rotate(360deg); } }

@keyframes fk-grain {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-3%, 2%); }
  40%  { transform: translate(2%, -3%); }
  60%  { transform: translate(-2%, -1%); }
  80%  { transform: translate(3%, 3%); }
  100% { transform: translate(0, 0); }
}

/* Pendant la lecture du karaoké : on fige le décor pour laisser toute la
   puissance de l'ordinateur à la vidéo et ne rien mettre sur l'image. */
.ecran-joueurs:has(.cadre-video) .fk-sunburst { animation-play-state: paused; }
.ecran-joueurs:has(.cadre-video) .fk-grain    { display: none; }

/* --------------------------------------------------------------------------
   Boutons : pilules, contour crème, texte foncé
   -------------------------------------------------------------------------- */
button {
  font-family: var(--fk-jeu-texte);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.2;
  cursor: pointer;
  padding: 0.65rem 1.4rem;
  border: var(--fk-contour) solid var(--fk-creme);
  border-radius: 999px;
  background: var(--jeu);
  color: var(--fk-expresso);
  transition: transform 0.2s var(--fk-rebond), background-color 0.15s ease-out, border-color 0.15s ease-out;
}
.ecran-regie button { font-family: var(--fk-regie); font-weight: 700; }

button:hover:not(:disabled)  { transform: scale(1.04); }
button:active:not(:disabled) { transform: scale(0.97); }
button:disabled { opacity: 0.35; cursor: not-allowed; }

button:focus-visible,
.ligne-categorie:focus-visible,
.bandeau-mc:focus-visible {
  outline: var(--fk-contour) solid var(--fk-creme);
  outline-offset: 3px;
}

.btn-or      { background: var(--jeu); }
.btn-or:hover:not(:disabled)      { background: var(--jeu-clair); }
.btn-corail  { background: var(--fk-orange); }
.btn-corail:hover:not(:disabled)  { background: #F2915F; }
.btn-succes  { background: var(--fk-ok); }
.btn-succes:hover:not(:disabled)  { background: #9AD88A; }
.btn-echec   { background: var(--fk-erreur); }
.btn-echec:hover:not(:disabled)   { background: #EE7168; }
.btn-fantome {
  background: transparent;
  color: var(--fk-creme);
  border: 3px dashed var(--fk-sable);
}
.btn-fantome:hover:not(:disabled) { background: var(--fk-caramel); }

/* --------------------------------------------------------------------------
   En-tête : marque FunKey (disque vinyle + nom) · titre du jeu
   -------------------------------------------------------------------------- */
.entete {
  position: relative;
  display: grid;
  align-items: center;
  gap: 1rem;
  padding: 0.9rem 1.6rem;
}

.marque {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  justify-self: start;
  color: var(--fk-creme);
}

/* disque vinyle dessiné en CSS : étiquette orange, sillons, trou central */
.marque-disque {
  flex: none;
  width: 2.5rem;
  aspect-ratio: 1;
  border: 3px solid var(--fk-creme);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, var(--fk-chocolat) 0 7%, var(--fk-orange) 8% 30%, transparent 31%),
    repeating-radial-gradient(circle at 50% 50%, var(--fk-expresso) 0 2px, var(--fk-chocolat) 2px 4px);
}

.marque-nom {
  font-family: var(--fk-titre);
  font-size: 1.7rem;
  line-height: 1;
  color: var(--fk-creme);
  text-shadow: 2px 2px 0 var(--fk-orange);
}

.titre-jeu {
  margin: 0;
  font-size: 1.6rem;
  line-height: 1.05;
  color: var(--fk-creme);
  text-shadow: 3px 3px 0 var(--jeu-fonce);
}

.sous-titre {
  font-family: var(--fk-jeu-texte);
  color: var(--fk-sable);
  font-size: 1.15rem;
}

/* séparateur : les 4 rayures 70s, une par jeu */
.ecran-lancement .entete::after,
.ecran-joueurs .entete::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 14px;
  background: linear-gradient(
    to bottom,
    var(--fk-orange)    0 25%,
    var(--fk-moutarde) 25% 50%,
    var(--fk-rose)     50% 75%,
    var(--fk-turquoise) 75% 100%
  );
}

.badge-regie {
  padding: 0.3rem 0.85rem;
  border-radius: 999px;
  background: var(--fk-chocolat);
  color: var(--fk-creme);
  font-family: var(--fk-regie);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 1px;
}

/* --------------------------------------------------------------------------
   Scène + pastilles d'équipes
   -------------------------------------------------------------------------- */
.scene { max-width: 1180px; margin: 0 auto; padding: 1.2rem 1.6rem 3rem; }

.tableau-scores {
  display: flex;
  flex-wrap: wrap;
  gap: 1.1rem;
  justify-content: center;
  align-items: center;
  margin: 1.2rem 0 1.8rem;
}

.carte-equipe {
  --eq: var(--fk-orange);
  --eq-fonce: #A8461A;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 0.9rem;
  padding: 0.4rem 0.45rem 0.4rem 1.3rem;
  border: var(--fk-contour) solid var(--fk-creme);
  border-radius: 999px;
  background: var(--eq);
  color: var(--fk-chocolat);
  box-shadow: 6px 6px 0 var(--eq-fonce);
  transition: transform 0.3s var(--fk-rebond), box-shadow 0.2s ease-out;
}
/* une couleur par équipe, tirée des 4 accents */
.carte-equipe:nth-child(4n+2) { --eq: var(--fk-moutarde);  --eq-fonce: #A6791A; }
.carte-equipe:nth-child(4n+3) { --eq: var(--fk-rose);      --eq-fonce: #A8305F; }
.carte-equipe:nth-child(4n+4) { --eq: var(--fk-turquoise); --eq-fonce: #1D7A72; }

.carte-equipe .nom-equipe {
  max-width: 12em;
  font-size: 1.1rem;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.carte-equipe .score {
  min-width: 2.1em;
  padding: 0.12em 0.45em;
  border-radius: 999px;
  background: var(--fk-chocolat);
  color: var(--fk-creme);
  font-family: var(--fk-jeu-texte);
  font-size: 1.6rem;
  line-height: 1.25;
  text-align: center;
}

/* l'équipe qui a la main : pastille agrandie, contour lumineux, flèche
   (la flèche garantit que l'info ne repose pas sur la couleur seule) */
.carte-equipe.active {
  position: relative;
  z-index: 1;
  transform: scale(1.1);
  outline: var(--fk-contour) solid var(--fk-creme);
  outline-offset: 4px;
  box-shadow: 0 0 0 10px rgba(245, 230, 200, 0.22), 6px 6px 0 var(--eq-fonce);
}
.carte-equipe.active .nom-equipe::before { content: "▶ "; }

/* --------------------------------------------------------------------------
   Joker « initiales » : pastille « J » sur les équipes qui l'ont encore,
   et bouton de la régie
   -------------------------------------------------------------------------- */
.joker-badge {
  display: grid;
  place-items: center;
  flex: none;
  width: 1.75em;
  aspect-ratio: 1;
  border: 2px solid var(--fk-chocolat);
  border-radius: 50%;
  background: var(--fk-creme);
  color: var(--fk-chocolat);
  font-family: var(--fk-jeu-texte);
  font-size: 0.95rem;
  line-height: 1;
}

.btn-joker { background: var(--fk-moutarde); }
.btn-joker:hover:not(:disabled) { background: #F2C960; }

.aide-option {
  margin: 0.4rem 0 0 2.2rem;
  color: var(--fk-sable);
  font-size: 0.92rem;
  line-height: 1.35;
}

/* --------------------------------------------------------------------------
   Bandeau « La Même Chanson »
   -------------------------------------------------------------------------- */
.bandeau-mc {
  max-width: 40rem;
  margin: 0 auto 1.6rem;
  padding: 0.85rem 1rem;
  border: 3px dashed var(--fk-sable);
  border-radius: var(--fk-rayon);
  background: transparent;
  color: var(--fk-sable);
  font-family: var(--fk-jeu-texte);
  letter-spacing: 1px;
  text-align: center;
}

.bandeau-mc.deverrouille {
  border: var(--fk-contour) solid var(--fk-creme);
  background: var(--fk-creme);
  color: var(--fk-chocolat);
  box-shadow: 6px 6px 0 var(--jeu);
}

.bandeau-mc.jouee {
  border: 3px solid var(--fk-ok);
  background: transparent;
  color: var(--fk-ok);
  box-shadow: none;
}

.bandeau-mc.cliquable { cursor: pointer; transition: transform 0.2s var(--fk-rebond), background-color 0.15s; }
.bandeau-mc.cliquable:hover,
.bandeau-mc.cliquable:focus-visible { background: var(--jeu-clair); transform: scale(1.03); }

/* --------------------------------------------------------------------------
   Indicateur « T1 » (régie)
   -------------------------------------------------------------------------- */
.indicateur-t1 {
  max-width: 40rem;
  margin: 0 auto 1.2rem;
  padding: 0.6rem 1rem;
  border-radius: 999px;
  font-family: var(--fk-regie);
  font-weight: 700;
  font-size: 0.98rem;
  text-align: center;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.indicateur-t1.visible { background: var(--fk-caramel); color: var(--fk-creme); border: 3px solid var(--fk-sable); }
.indicateur-t1.masque  { background: var(--fk-moutarde); color: var(--fk-expresso); border: 3px solid var(--fk-creme); }

/* --------------------------------------------------------------------------
   Liste des 5 catégories (50 en haut)
   -------------------------------------------------------------------------- */
.liste-categories {
  max-width: 40rem;
  margin: 1.4rem auto;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.ligne-categorie {
  position: relative;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: var(--fk-contour) solid var(--fk-creme);
  border-radius: var(--fk-rayon);
  background: var(--jeu);
  color: var(--fk-chocolat);
  font-family: var(--fk-jeu-texte);
  font-size: 1.5rem;
  box-shadow: 6px 6px 0 var(--jeu-fonce);
  transition: transform 0.2s var(--fk-rebond), background-color 0.15s ease-out;
}
.ligne-categorie .valeur-points { letter-spacing: 1px; }

.ligne-categorie.cliquable { cursor: pointer; }
.ligne-categorie.cliquable:hover,
.ligne-categorie.cliquable:focus-visible { background: var(--jeu-clair); transform: scale(1.04); outline-offset: 5px; }

/* catégorie déjà jouée : « case éteinte » en pointillés + coche
   (distincte des disponibles par la forme, pas seulement par la couleur) */
.ligne-categorie.jouee {
  border: 3px dashed var(--fk-sable);
  background: var(--fk-caramel);
  color: var(--fk-sable);
  box-shadow: none;
  opacity: 0.6;
}
.ligne-categorie.jouee::after {
  content: "✓";
  position: absolute;
  right: 22px;
  font-size: 1.4rem;
}
.ligne-categorie.ouverte { border-color: var(--fk-orange); }

/* --------------------------------------------------------------------------
   Zone de manche : panneau + cartes de propositions
   -------------------------------------------------------------------------- */
.zone-manche {
  max-width: 56rem;
  margin: 1.4rem auto 0;
  padding: 1.4rem;
  border: var(--fk-contour) solid var(--fk-creme);
  border-radius: var(--fk-rayon);
  background: var(--fk-caramel);
  box-shadow: 8px 8px 0 var(--jeu-fonce);
}

.propositions { display: flex; gap: 1.2rem; flex-wrap: wrap; justify-content: center; }

.carte-proposition {
  min-width: 220px;
  padding: 1.3rem 1.6rem;
  border: var(--fk-contour) solid var(--fk-sable);
  border-radius: var(--fk-rayon);
  background: var(--fk-chocolat);
  color: var(--fk-creme);
  font-family: inherit;
  font-size: 1rem;
  text-align: center;
  box-shadow: 6px 6px 0 var(--fk-expresso);
  transition: transform 0.2s var(--fk-rebond), border-color 0.15s ease-out;
}
button.carte-proposition:hover:not(:disabled),
button.carte-proposition:focus-visible { border-color: var(--jeu); }
.carte-proposition.choisie { border-color: var(--fk-ok); }

.carte-proposition .titre   { font-size: 1.2rem; margin-bottom: 0.25rem; }
.carte-proposition .artiste { margin-bottom: 0.5rem; color: var(--fk-sable); }
.carte-proposition .nombre-mots {
  display: inline-block;
  margin-top: 0.2rem;
  padding: 0.2em 0.9em;
  border-radius: 999px;
  background: var(--fk-expresso);
  color: var(--jeu-clair);
  font-size: 0.92rem;
}
.carte-proposition .statut-choisie { margin-top: 0.7rem; color: var(--fk-ok); }

.cover-proposition {
  display: block;
  width: 120px;
  height: 120px;
  margin: 0 auto 0.9rem;
  object-fit: cover;
  border: var(--fk-contour) solid var(--fk-creme);
  border-radius: 16px;
}
.cover-proposition.cover-manquante {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px dashed var(--fk-sable);
  background: var(--fk-caramel);
  font-size: 2.2rem;
}

/* --------------------------------------------------------------------------
   Lecteur karaoké + calque « mots à trous » (écran joueurs)
   Le calque doit rester 100 % opaque : il cache les paroles de la vidéo.
   -------------------------------------------------------------------------- */
.cadre-video {
  position: relative;
  width: 100%;
  max-width: 760px;
  aspect-ratio: 16 / 9;
  margin: 0 auto;
  overflow: hidden;
  container-type: inline-size;
  border: var(--fk-contour) solid var(--fk-creme);
  border-radius: var(--fk-rayon);
  background: var(--fk-expresso);
  box-shadow: 8px 8px 0 var(--jeu-fonce);
}
/* le lecteur seul remplit le cadre (le calque et la plaque ont leurs propres règles) */
.cadre-video iframe, .cadre-video > #lecteur-yt { width: 100%; height: 100%; border: 0; display: block; }

.cache-paroles {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: none;                 /* le script l'affiche en display:flex */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.4cqw;
  padding: 3cqw;
  text-align: center;
  background: repeating-conic-gradient(
    from 0deg at 50% 50%,
    var(--fk-chocolat) 0deg 7.5deg,
    var(--fk-caramel)  7.5deg 15deg
  );
}

.cache-paroles .nb-mots-cache {
  margin: 0;
  font-family: var(--fk-titre);
  font-size: 4.6vh;
  font-size: calc(min(5vh, 5.4cqw) * var(--fk-texte-doux, 1));
  line-height: 1.1;
  color: var(--jeu-clair);
  text-shadow: 3px 3px 0 var(--fk-expresso);
}

.cache-paroles .contexte {
  margin: 0;
  max-width: 92%;
  font-size: 3.2vh;
  font-size: calc(min(3.4vh, 3.6cqw) * var(--fk-texte-doux, 1));
  color: var(--fk-sable);
}

.cache-paroles .blancs { display: flex; flex-direction: column; gap: 1.6cqw; align-items: center; max-width: 100%; }
.cache-paroles .ligne-blancs { display: flex; flex-wrap: wrap; gap: 1.1cqw; justify-content: center; align-items: center; }

/* case cachée : caramel, pointillés sable, point d'interrogation en filigrane */
.cache-paroles .blanc-mot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 7.4cqw;
  height: 5cqw;
  border: 0.4cqw dashed var(--fk-sable);
  border-radius: 1.2cqw;
  background: var(--fk-caramel);
  color: rgba(201, 176, 138, 0.55);
  font-size: 3.4cqw;
  line-height: 1;
}
.cache-paroles .blanc-mot::after { content: "?"; }

/* mot déjà tapé par la régie (pas encore jugé) */
.cache-paroles .mot-tape {
  display: inline-block;
  padding: 0.5cqw 1.5cqw;
  border: 0.4cqw solid var(--fk-sable);
  border-radius: 1.2cqw;
  background: var(--fk-caramel);
  color: var(--fk-creme);
  font-size: 3.2vh;
  font-size: calc(min(3.5vh, 3.8cqw) * var(--fk-texte-doux, 1));
  line-height: 1.2;
}

/* joker « initiales » : la case vide montre la première lettre du mot attendu
   (case révélée : couleur du jeu, texte chocolat) */
.cache-paroles .blanc-mot.initiale {
  border: 0.4cqw solid var(--fk-creme);
  background: var(--jeu);
  color: var(--fk-chocolat);
  font-size: 3.4vh;
  font-size: calc(min(3.6vh, 3.9cqw) * var(--fk-texte-doux, 1));
}
.cache-paroles .blanc-mot.initiale::after { content: none; }

.cache-paroles .joker-actif {
  margin: 0;
  padding: 0.5cqw 2.2cqw;
  border: 0.45cqw solid var(--fk-creme);
  border-radius: 999px;
  background: var(--fk-moutarde);
  color: var(--fk-expresso);
  font-size: 3.2vh;
  font-size: calc(min(3.4vh, 3.6cqw) * var(--fk-texte-doux, 1));
  line-height: 1.2;
}

/* phrase jugée : verte + ✔, rouge + ✘, ou révélée en crème */
.cache-paroles .phrase-complete {
  display: inline-block;
  padding: 0.8cqw 2cqw;
  border: 0.45cqw solid var(--fk-creme);
  border-radius: 2.4cqw;
  background: var(--fk-caramel);
  color: var(--fk-creme);
  font-size: 3.4vh;
  font-size: calc(min(3.5vh, 3.8cqw) * var(--fk-texte-doux, 1));
  line-height: 1.2;
}
.cache-paroles .ligne-blancs.valide .phrase-complete { background: var(--fk-ok);      color: var(--fk-expresso); }
.cache-paroles .ligne-blancs.valide .phrase-complete::before { content: "✔ "; }
.cache-paroles .ligne-blancs.refuse .phrase-complete { background: var(--fk-erreur);  color: var(--fk-expresso); }
.cache-paroles .ligne-blancs.refuse .phrase-complete::before { content: "✘ "; }
.cache-paroles .ligne-blancs.revele .phrase-complete { background: var(--fk-creme);   color: var(--fk-chocolat); }
.cache-paroles .ligne-blancs.revele .phrase-complete::before { content: "➜ "; }

/* La Même Chanson : message plein calque */
.message-mc {
  margin: 0;
  font-family: var(--fk-titre);
  font-size: 5vh;
  font-size: calc(min(6vh, 6.8cqw) * var(--fk-texte-doux, 1));
  line-height: 1.15;
  text-shadow: 3px 3px 0 var(--fk-expresso);
}
.message-mc.attente  { color: var(--jeu-clair); }
.message-mc.reussite { color: var(--fk-ok); }
.message-mc.echec    { color: var(--fk-erreur); }

/* ==========================================================================
   ÉCRAN DE LANCEMENT (index.html) — écran de titre + formulaire
   ========================================================================== */
.ecran-lancement .entete {
  grid-template-columns: 1fr;
  justify-items: center;
  gap: 0.5rem;
  padding: 2.2rem 1.6rem 2rem;
  text-align: center;
}
.ecran-lancement .marque { justify-self: center; }
.ecran-lancement .titre-jeu {
  font-size: clamp(2.1rem, 5.2vw, 4rem);
  text-shadow: 4px 4px 0 var(--jeu-fonce);
}

.formulaire-config {
  max-width: 560px;
  margin: 2rem auto 3rem;
  padding: 2rem;
  border: var(--fk-contour) solid var(--fk-creme);
  border-radius: var(--fk-rayon);
  background: var(--fk-caramel);
  box-shadow: 8px 8px 0 var(--jeu-fonce);
}

.logo-camping {
  display: block;
  width: min(100%, 500px);
  height: auto;
  margin: 0 auto 1rem;
}

.titre-formulaire { margin: 0 0 0.4rem; font-size: 1.9rem; color: var(--fk-creme); }

.formulaire-config label {
  display: block;
  margin: 0.9rem 0 0.4rem;
  color: var(--fk-sable);
  font-size: 1.05rem;
}

.formulaire-config input[type="text"],
.formulaire-config input[type="number"] {
  width: 100%;
  padding: 0.65rem 1rem;
  border: 3px solid var(--fk-sable);
  border-radius: 14px;
  background: var(--fk-expresso);
  color: var(--fk-creme);
  font-family: var(--fk-jeu-texte);
  font-size: 1.1rem;
}
.formulaire-config input[type="text"]:focus,
.formulaire-config input[type="number"]:focus {
  outline: none;
  border-color: var(--jeu-clair);
  box-shadow: 0 0 0 4px rgba(43, 179, 167, 0.35);
}

.ligne-equipe { display: flex; gap: 0.5rem; margin-bottom: 0.55rem; align-items: center; }
.ligne-equipe input { flex: 1; }
.ligne-equipe .btn-retirer {
  flex: none;
  width: 2.6rem;
  height: 2.6rem;
  padding: 0;
  border: 3px solid var(--fk-erreur);
  background: transparent;
  color: var(--fk-erreur);
  font-size: 1.5rem;
  line-height: 1;
}

.ligne-option { display: flex; align-items: center; gap: 0.7rem; margin-top: 1.2rem; }
.ligne-option input[type="checkbox"] { width: 1.5rem; height: 1.5rem; accent-color: var(--jeu); }
.ligne-option label { margin: 0; color: var(--fk-creme); }

.btn-lancer { width: 100%; margin-top: 1.4rem; padding: 0.9rem; font-size: 1.4rem; }

.message-erreur {
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  border: 3px solid var(--fk-erreur);
  border-radius: 14px;
  background: rgba(229, 72, 61, 0.18);
  color: var(--fk-creme);
  font-size: 0.98rem;
}
.message-erreur::before { content: "⚠ "; color: var(--fk-erreur); }

.bandeau-reprise {
  max-width: 560px;
  margin: 1.5rem auto 0;
  padding: 1.1rem 1.4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  border: var(--fk-contour) solid var(--fk-moutarde);
  border-radius: var(--fk-rayon);
  background: var(--fk-caramel);
}
.bandeau-reprise p { margin: 0; }
.actions-reprise { display: flex; gap: 0.6rem; flex-wrap: wrap; }

/* ==========================================================================
   ÉCRAN JOUEURS (joueurs.html) — projection, lisible à 10 mètres
   Tout est en vh : on conçoit pour 1920×1080 et ça s'adapte à tout écran.
   Rien de plus petit que ~3,5 vh (≈ 38 px en 1080p).
   Marges de sécurité de 5 % : certains projecteurs rognent les bords.
   ========================================================================== */
.ecran-joueurs {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.ecran-joueurs .entete {
  grid-template-columns: 1fr auto 1fr;
  min-height: 11vh;
  padding: 1.2vh 5vw 2.2vh;
}
.ecran-joueurs .marque { grid-column: 1; gap: 1.2vh; }
.ecran-joueurs .marque-disque { width: 5.6vh; }
.ecran-joueurs .marque-nom { font-size: calc(4vh * var(--fk-texte-doux, 1)); }
.ecran-joueurs .titre-jeu {
  grid-column: 2;
  font-size: min(6.2vh, 3.3vw);
  text-align: center;
}

.ecran-joueurs .scene {
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 1.2vh 5vw 1.4vh;
}

/* le plateau (bandeau + catégories ou manche) est centré entre l'en-tête
   et le bandeau des scores, qui reste collé en bas */
.ecran-joueurs .plateau {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.4vh;
}

.ecran-joueurs .bandeau-mc {
  width: min(100%, 100vh);
  max-width: none;
  margin: 0 auto;
  padding: 0.9vh 2vh;
  border-width: 0.5vh;
  border-radius: 3vh;
  font-size: calc(3.4vh * var(--fk-texte-doux, 1));
  line-height: 1.2;
}
.ecran-joueurs .bandeau-mc.deverrouille { box-shadow: 0.9vh 0.9vh 0 var(--jeu); }

.ecran-joueurs .liste-categories {
  width: min(100%, 110vh);
  max-width: none;
  margin: 0 auto;
  gap: 1.3vh;
}
.ecran-joueurs .ligne-categorie {
  height: 8vh;
  border-width: 0.5vh;
  border-radius: 3vh;
  font-size: calc(4.6vh * var(--fk-texte-doux, 1));
  line-height: 1;
  box-shadow: 0.9vh 0.9vh 0 var(--jeu-fonce);
}
.ecran-joueurs .ligne-categorie.jouee { border-width: 0.4vh; box-shadow: none; }
.ecran-joueurs .ligne-categorie.jouee::after { right: 4vh; font-size: 4vh; }

.ecran-joueurs .zone-manche {
  width: min(100%, 130vh);
  max-width: none;
  margin: 0 auto;
  padding: 1.8vh 3vh 2.4vh;
  border-width: 0.5vh;
  border-radius: 3vh;
  box-shadow: 1vh 1vh 0 var(--jeu-fonce);
  font-size: calc(3.7vh * var(--fk-texte, 1));
}
.ecran-joueurs .zone-manche > p { margin: 0 0 1.2vh; font-size: calc(3.7vh * var(--fk-texte, 1)); line-height: 1.2; }

.ecran-joueurs .propositions { gap: 3vh; }
.ecran-joueurs .carte-proposition {
  width: min(56vh, 44vw);
  min-width: 0;
  padding: 1.8vh 2.4vh 2.2vh;
  border-width: 0.5vh;
  border-radius: 3vh;
  box-shadow: 0.9vh 0.9vh 0 var(--fk-expresso);
  font-size: calc(3.7vh * var(--fk-texte, 1));
}
.ecran-joueurs .carte-proposition .titre   { font-size: calc(3.9vh * var(--fk-texte, 1)); line-height: 1.1; margin-bottom: 0.5vh; }
.ecran-joueurs .carte-proposition .artiste { font-size: calc(3.4vh * var(--fk-texte, 1)); margin-bottom: 1vh; }
.ecran-joueurs .carte-proposition .nombre-mots { font-size: calc(3.4vh * var(--fk-texte-doux, 1)); white-space: nowrap; }
.ecran-joueurs .cover-proposition {
  width: 16vh;
  height: 16vh;
  margin-bottom: 1.4vh;
  border-width: 0.5vh;
  border-radius: 2vh;
  font-size: 7vh;
}

/* lecteur : aussi grand que la hauteur d'écran le permet */
.ecran-joueurs .cadre-video {
  width: min(100%, 94vh);
  max-width: none;
  border-width: 0.5vh;
  border-radius: 3vh;
  box-shadow: 1vh 1vh 0 var(--jeu-fonce);
}

/* bandeau des scores, en bas : pastilles d'équipes */
.ecran-joueurs .tableau-scores {
  gap: 2.2vh;
  margin: 0;
  padding-top: 1.2vh;
}
.ecran-joueurs .carte-equipe {
  gap: 1.8vh;
  padding: 0.7vh 0.8vh 0.7vh 2.8vh;
  border-width: 0.5vh;
  box-shadow: 0.9vh 0.9vh 0 var(--eq-fonce);
}
.ecran-joueurs .carte-equipe.active {
  outline-width: 0.5vh;
  outline-offset: 0.6vh;
  box-shadow: 0 0 0 1.4vh rgba(245, 230, 200, 0.22), 0.9vh 0.9vh 0 var(--eq-fonce);
}
.ecran-joueurs .carte-equipe .nom-equipe { font-size: calc(3.6vh * var(--fk-texte-doux, 1)); }
.ecran-joueurs .carte-equipe .joker-badge { font-size: calc(3vh * var(--fk-texte-doux, 1)); border-width: 0.4vh; }
.ecran-joueurs .carte-equipe .score      { font-size: calc(4.8vh * var(--fk-texte-doux, 1)); }

/* 5 équipes ou plus : tout se resserre pour que rien ne sorte de l'écran */
.ecran-joueurs:has(.carte-equipe:nth-child(5)) .cadre-video { width: min(100%, 80vh); }
.ecran-joueurs:has(.carte-equipe:nth-child(5)) .carte-equipe { padding-left: 2vh; gap: 1.2vh; }
.ecran-joueurs:has(.carte-equipe:nth-child(5)) .carte-equipe .nom-equipe { font-size: 3vh; }
.ecran-joueurs:has(.carte-equipe:nth-child(5)) .carte-equipe .score      { font-size: 4vh; }

/* ==========================================================================
   POSTE DE RÉGIE (regie.html) — dense, sans décor : police Outfit, fond
   expresso. Seule la couleur du jeu apparaît, dans l'en-tête.
   ========================================================================== */
.ecran-regie .entete {
  grid-template-columns: auto 1fr auto;
  padding: 0.7rem 1.4rem;
  background: var(--jeu);
  color: var(--fk-chocolat);
}
.ecran-regie .marque-nom { color: var(--fk-chocolat); text-shadow: none; font-size: 1.5rem; }
.ecran-regie .marque-disque { border-color: var(--fk-chocolat); width: 2.2rem; }
.ecran-regie .titre-jeu {
  font-family: var(--fk-regie);
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--fk-chocolat);
  text-shadow: none;
}

.ecran-regie .tableau-scores { margin: 1rem 0 1.4rem; gap: 0.8rem; }
.ecran-regie .carte-equipe { box-shadow: none; padding: 0.3rem 0.35rem 0.3rem 1rem; gap: 0.7rem; }
.ecran-regie .carte-equipe .nom-equipe { font-size: 1rem; }
.ecran-regie .carte-equipe .joker-badge { font-size: 0.85rem; }
.ecran-regie .carte-equipe .score { font-size: 1.3rem; }
.ecran-regie .carte-equipe.active { box-shadow: 0 0 0 8px rgba(245, 230, 200, 0.2); }

.ecran-regie .bandeau-mc { font-size: 0.95rem; box-shadow: none; }
.ecran-regie .bandeau-mc.deverrouille { box-shadow: none; }

.ecran-regie .ligne-categorie { height: 58px; font-size: 1.4rem; box-shadow: none; }

.ecran-regie .zone-manche {
  border: 3px solid var(--fk-sable);
  box-shadow: none;
  padding: 1.2rem;
}
.ecran-regie .zone-manche .artiste { color: var(--fk-sable); }
.ecran-regie .carte-proposition { box-shadow: none; font-family: var(--fk-regie); }
.ecran-regie .carte-proposition .titre { font-weight: 700; }
.ecran-regie .carte-proposition .nombre-mots { font-weight: 600; }

/* La Même Chanson : paroles cliquables */
.paroles-cliquables {
  max-width: 720px;
  margin: 0 auto 0.5rem;
  text-align: center;
  line-height: 2.6;
  font-size: 1.1rem;
}
.mot-cliquable {
  display: inline-block;
  margin: 0.1rem;
  padding: 0.15rem 0.5rem;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.12s ease;
}
.mot-cliquable:hover { background: var(--fk-chocolat); }
.mot-cliquable.trouve { background: rgba(124, 196, 106, 0.18); color: var(--fk-ok); font-weight: 700; }
.mot-cliquable.echec {
  background: rgba(229, 72, 61, 0.2);
  color: var(--fk-erreur);
  font-weight: 700;
  text-decoration: underline wavy;
  text-underline-offset: 5px;
}
.mot-cliquable.non-atteint { opacity: 0.4; }

/* Réponses de l'animateur */
.reponses-regie { max-width: 640px; margin: 0 auto 1rem; display: flex; flex-direction: column; gap: 0.7rem; }
.ligne-reponse-regie { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; justify-content: center; }

.champ-reponse {
  flex: 1;
  min-width: 220px;
  padding: 0.55rem 0.9rem;
  border: 3px solid var(--fk-sable);
  border-radius: 14px;
  background: var(--fk-expresso);
  color: var(--fk-creme);
  font-family: var(--fk-regie);
  font-size: 1rem;
}
.champ-reponse:focus { outline: none; border-color: var(--jeu-clair); box-shadow: 0 0 0 4px rgba(43, 179, 167, 0.3); }
.champ-reponse:disabled { opacity: 0.6; }

.ligne-reponse-regie button { padding: 0.45rem 1rem; font-size: 0.9rem; border-width: 3px; white-space: nowrap; }
.btn-valider { background: var(--fk-ok); }
.btn-valider:hover:not(:disabled) { background: #9AD88A; }
.btn-refuser { background: var(--fk-erreur); }
.btn-refuser:hover:not(:disabled) { background: #EE7168; }
.btn-afficher-reponse { background: var(--fk-creme); }
.btn-afficher-reponse:hover:not(:disabled) { background: #fff3da; }

/* Réponse attendue (visible de l'animateur seulement) */
.reponse-attendue {
  max-width: 640px;
  margin: 0 auto 1rem;
  padding: 0.7rem 1rem;
  border-left: 6px solid var(--jeu);
  border-radius: 8px;
  background: var(--fk-expresso);
  font-family: var(--fk-regie);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--fk-creme);
}

.controles { display: flex; gap: 0.8rem; flex-wrap: wrap; justify-content: center; }

/* --------------------------------------------------------------------------
   Accessibilité : « réduire les animations » → décor figé, pas de mouvement
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* Petits écrans (fenêtre de régie réduite, tablette) */
@media (max-width: 720px) {
  .ecran-lancement .formulaire-config { margin-inline: 1rem; padding: 1.4rem; }
  .ecran-regie .entete { grid-template-columns: 1fr auto; }
  .ecran-regie .marque { display: none; }
}

/* ==========================================================================
   Réglages communs FunKey lus par le jeu (posés sur <html> par js/reglages.js)
   - texte       : --fk-texte (textes libres) et --fk-texte-doux (éléments à dimensions
                   serrées : plafonné pour que rien ne sorte de l'écran projeté)
   - contraste   : palette resserrée sur les extrêmes, contours épais
   - animations  : calmes = décor figé · aucune = plus aucun mouvement
   Sans js/reglages.js (jeu ouvert seul), rien de tout cela ne s'applique : le jeu garde son aspect normal.
   ========================================================================== */
:root { --fk-texte: 1; --fk-texte-doux: 1; }
html[data-texte="grand"]      { --fk-texte: 1.15; --fk-texte-doux: 1.1; }
html[data-texte="tres-grand"] { --fk-texte: 1.3;  --fk-texte-doux: 1.15; }

/* Lancement et régie sont dimensionnés en rem : on agrandit la base. (L'écran joueurs, en vh, utilise les variables ci-dessus.) */
html:has(body.ecran-regie),
html:has(body.ecran-lancement) { font-size: calc(100% * var(--fk-texte, 1)); }

html[data-contraste="fort"] {
  --fk-chocolat: #24110A;
  --fk-expresso: #150904;
  --fk-caramel:  #3A1E12;
  --fk-creme:    #FFF6E0;
  --fk-sable:    #E6D2AC;
  --fk-contour:  6px;
}

html[data-animations="calmes"] .fk-sunburst,
html[data-animations="calmes"] .fk-grain { animation: none !important; }

html[data-animations="aucune"] *,
html[data-animations="aucune"] *::before,
html[data-animations="aucune"] *::after {
  animation-duration: 0.001ms !important;
  animation-delay: 0s !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
  transition-delay: 0s !important;
  scroll-behavior: auto !important;
}

/* ==========================================================================
   Écran de projection, menu FunKey, messages, rappel du son
   ========================================================================== */
.entete-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.6rem;
}
.ecran-lancement .entete-actions { position: absolute; top: 1rem; right: 1.6rem; }

.btn-projection,
.lien-menu {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.4em 1em;
  border: 3px solid var(--fk-creme);
  border-radius: 999px;
  background: var(--fk-caramel);
  color: var(--fk-creme);
  font-family: var(--fk-jeu-texte);
  font-size: 0.9rem;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.2s var(--fk-rebond), background-color 0.15s;
}
.ecran-regie .btn-projection,
.ecran-regie .lien-menu { font-family: var(--fk-regie); font-weight: 700; }
.btn-projection:hover,
.lien-menu:hover { background: var(--fk-chocolat); transform: scale(1.04); }
.lien-menu { background: transparent; border-style: dashed; border-color: var(--fk-sable); }
.ecran-regie .lien-menu { border-color: var(--fk-chocolat); color: var(--fk-chocolat); }
.ecran-regie .lien-menu:hover { background: rgba(36, 17, 10, 0.15); }

/* voyant : anneau vide = fermé, rond plein vert = ouvert (la forme change, pas seulement la couleur) */
.btn-projection .voyant {
  flex: none;
  width: 0.95em;
  aspect-ratio: 1;
  border: 3px solid var(--fk-creme);
  border-radius: 50%;
  background: var(--fk-expresso);
}
.btn-projection[data-etat="ouvert"] .voyant {
  background: var(--fk-ok);
  box-shadow: 0 0 0 3px rgba(124, 196, 106, 0.35);
}

.info {
  position: fixed;
  left: 50%;
  bottom: 1.4rem;
  z-index: 40;
  translate: -50% 0;
  max-width: min(92vw, 46rem);
  margin: 0;
  padding: 0.7rem 1.2rem;
  border: 3px solid var(--fk-creme);
  border-radius: 20px;
  background: var(--fk-chocolat);
  color: var(--fk-creme);
  font-family: var(--fk-jeu-texte);
  font-size: 0.98rem;
  line-height: 1.3;
  text-align: center;
}
.ecran-regie .info { font-family: var(--fk-regie); font-weight: 600; }

.rappel-son {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  max-width: 56rem;
  margin: 0.8rem auto 0;
  padding: 0.6rem 1rem;
  border: 3px solid var(--fk-moutarde);
  border-radius: 14px;
  background: rgba(227, 168, 43, 0.14);
  font-size: 0.95rem;
  text-align: center;
}
.rappel-son button { padding: 0.35rem 1rem; font-size: 0.88rem; border-width: 3px; }

/* ==========================================================================
   Fin de partie : classement final (écran joueurs et régie)
   ========================================================================== */
.classement-final { text-align: center; }
.titre-classement {
  margin: 0 0 0.9rem;
  font-size: 2.1rem;
  line-height: 1.1;
  color: var(--fk-creme);
  text-shadow: 3px 3px 0 var(--jeu-fonce);
}

.classement {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  max-width: 38rem;
  margin: 0 auto 1rem;
  padding: 0;
  list-style: none;
}

.rang {
  --eq: var(--fk-orange);
  --eq-fonce: #A8461A;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.45rem 0.5rem 0.45rem 1.3rem;
  border: var(--fk-contour) solid var(--fk-creme);
  border-radius: 999px;
  background: var(--eq);
  color: var(--fk-chocolat);
  font-family: var(--fk-jeu-texte);
  font-size: 1.15rem;
  box-shadow: 5px 5px 0 var(--eq-fonce);
  text-align: left;
}
.rang.eq-1 { --eq: var(--fk-moutarde);  --eq-fonce: #A6791A; }
.rang.eq-2 { --eq: var(--fk-rose);      --eq-fonce: #A8305F; }
.rang.eq-3 { --eq: var(--fk-turquoise); --eq-fonce: #1D7A72; }
.rang-premier { transform: scale(1.04); }

.rang-num { flex: none; min-width: 3.4em; line-height: 1.05; }
.rang-num small { display: block; font-size: 0.55em; }
.rang-nom { flex: 1; min-width: 0; overflow-wrap: anywhere; line-height: 1.1; }
.rang-score {
  flex: none;
  min-width: 2.3em;
  padding: 0.1em 0.5em;
  border-radius: 999px;
  background: var(--fk-chocolat);
  color: var(--fk-creme);
  font-size: 1.25em;
  text-align: center;
}
.ecran-regie .rang { box-shadow: none; }

/* écran joueurs : le classement remplace tout le plateau (plus de bandeau, plus de scores en bas) */
.ecran-joueurs:has(.classement-final) .tableau-scores,
.ecran-joueurs:has(.classement-final) .bandeau-mc { display: none; }

.ecran-joueurs .titre-classement { margin-bottom: 1.4vh; font-size: calc(6.4vh * var(--fk-texte-doux, 1)); line-height: 1; }
.ecran-joueurs .classement { gap: 1.4vh; max-width: 100vh; }
.ecran-joueurs .rang {
  gap: 2.4vh;
  padding: 0.7vh 0.9vh 0.7vh 3.2vh;
  border-width: 0.5vh;
  box-shadow: 0.8vh 0.8vh 0 var(--eq-fonce);
  font-size: calc(4.2vh * var(--fk-texte-doux, 1));
  line-height: 1.1;
}
.ecran-joueurs .rang-num { min-width: 4.8em; }
.ecran-joueurs .rang-num small { display: inline; margin-left: 0.5em; font-size: 0.5em; }
.ecran-joueurs .rang-score { font-size: 0.95em; line-height: 1.25; }

/* 5 équipes ou plus, puis 7 ou plus : le classement se resserre pour toujours tenir à l'écran */
.ecran-joueurs .classement:has(.rang:nth-child(5)) { gap: 1vh; }
.ecran-joueurs .classement:has(.rang:nth-child(5)) .rang { font-size: calc(3.6vh * var(--fk-texte-doux, 1)); padding-top: 0.5vh; padding-bottom: 0.5vh; box-shadow: 0.6vh 0.6vh 0 var(--eq-fonce); }
.ecran-joueurs .classement:has(.rang:nth-child(7)) { gap: 0.7vh; }
.ecran-joueurs .classement:has(.rang:nth-child(7)) .rang { font-size: calc(3vh * var(--fk-texte-doux, 1)); padding-top: 0.3vh; padding-bottom: 0.3vh; border-width: 0.4vh; }

/* ==========================================================================
   Écran joueurs pendant la chanson : la VIDÉO D'ABORD
   Les paroles de la vidéo doivent être lisibles de loin : la vidéo prend toute la place possible.
   Rien n'est posé par-dessus l'image, sauf le calque qui cache les paroles à la coupure (règle du jeu).
   - Karaoké en plein écran (option du lancement) : la vidéo seule, bord à bord, en 16:9
     (bandes noires en haut et en bas sur un écran 16:10 ou 4:3).
   - Sinon : plus d'en-tête ni de bandeau, la vidéo au plus grand, les scores en bande fine en dessous.
   ========================================================================== */

/* la plaque « Vous jouez pour… » ne s'affiche plus sur la vidéo */
.plaque-jeu { display: none !important; }

/* --- Sans plein écran : vidéo au plus grand + bande des scores --- */
.ecran-joueurs:has(.cadre-video) .entete,
.ecran-joueurs:has(.cadre-video) .bandeau-mc,
.ecran-joueurs:has(.cadre-video) .zone-manche > p { display: none; }
.ecran-joueurs:has(.cadre-video) { height: 100vh; overflow: hidden; }
.ecran-joueurs:has(.cadre-video) .scene { padding: 2vh 2vw 1.2vh; min-height: 0; }
.ecran-joueurs:has(.cadre-video) .plateau { min-height: 0; gap: 0; }
.ecran-joueurs .zone-manche:has(.cadre-video) {
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.ecran-joueurs .cadre-video,
.ecran-joueurs:has(.carte-equipe:nth-child(5)) .cadre-video {
  width: min(96vw, calc((100vh - 15vh) * 16 / 9));
  border-width: 0.4vh;
  border-radius: 1.6vh;
  box-shadow: 0.8vh 0.8vh 0 var(--jeu-fonce);
}
.ecran-joueurs:has(.cadre-video) .tableau-scores { flex: none; gap: 1.6vh; padding-top: 1.4vh; }
.ecran-joueurs:has(.cadre-video) .carte-equipe { padding-top: 0.4vh; padding-bottom: 0.4vh; }
.ecran-joueurs:has(.cadre-video) .carte-equipe .nom-equipe { font-size: calc(3vh * var(--fk-texte-doux, 1)); }
.ecran-joueurs:has(.cadre-video) .carte-equipe .score      { font-size: calc(3.8vh * var(--fk-texte-doux, 1)); }
.ecran-joueurs:has(.cadre-video) .carte-equipe .joker-icone { font-size: calc(2.4vh * var(--fk-texte-doux, 1)); }

/* --- Karaoké en plein écran : la vidéo seule --- */
body.ecran-joueurs.mode-karaoke { overflow: hidden; background: #000; }
.ecran-joueurs.mode-karaoke .fk-fond,
.ecran-joueurs.mode-karaoke .fk-grain,
.ecran-joueurs.mode-karaoke .entete,
.ecran-joueurs.mode-karaoke .bandeau-mc,
.ecran-joueurs.mode-karaoke .tableau-scores,
.ecran-joueurs.mode-karaoke .zone-manche > p { display: none !important; }
.ecran-joueurs.mode-karaoke .scene { height: 100vh; padding: 0; }
.ecran-joueurs.mode-karaoke .plateau { gap: 0; }
.ecran-joueurs.mode-karaoke .zone-manche {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: #000;
  box-shadow: none;
}
.ecran-joueurs.mode-karaoke .cadre-video {
  width: min(100vw, calc(100vh * 16 / 9)) !important;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* ==========================================================================
   Joker « initiales » : le dessin (bouffon), son icône sur les équipes, ses cases X___
   ========================================================================== */
.joker-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.joker-svg .jt {
  stroke: var(--fk-chocolat);
  stroke-width: 4.5;
  stroke-linejoin: round;
  paint-order: stroke;
}

/* icône sur les pastilles d'équipe (régie et écran joueurs) : remplace l'ancienne pastille « J » */
.joker-icone {
  flex: none;
  width: 1.9em;
  height: 1.9em;
  font-size: 0.95rem;
  filter: drop-shadow(2px 2px 0 rgba(42, 21, 13, 0.45));
}
.ecran-joueurs .carte-equipe .joker-icone { font-size: calc(3vh * var(--fk-texte-doux, 1)); }
.ecran-regie .carte-equipe .joker-icone   { font-size: 0.85rem; }

/* petite icône dans la pilule « Joker : les initiales ! » du calque */
.joker-mini {
  display: inline-block;
  width: 1.35em;
  height: 1.35em;
  margin-right: 0.4em;
  vertical-align: -0.28em;
}

/* conteneur du calque (réduit par le script s'il dépasse) */
.cache-paroles .calque-contenu {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.4cqw;
  max-width: 100%;
  transform-origin: center center;
}

/* case avec indice : même case, l'initiale (en vert) suivie d'un tiret bas par lettre restante */
.cache-paroles .blanc-mot.avec-indice {
  width: auto;
  min-width: 7.4cqw;
  padding: 0 1.2cqw;
  color: var(--fk-creme);
  font-size: calc(min(3.5vh, 3.8cqw) * var(--fk-texte-doux, 1));
  white-space: nowrap;
}
.cache-paroles .blanc-mot.avec-indice::after { content: none; }
.cache-paroles .blanc-mot .ini { font-weight: 400; color: var(--fk-ok); text-shadow: 0.2cqw 0.2cqw 0 var(--fk-expresso); }
.cache-paroles .blanc-mot .tirets { letter-spacing: 0.12em; color: var(--fk-sable); }
.cache-paroles .blanc-mot .ponct { color: var(--fk-creme); }
.cache-paroles .blanc-mot.revele-joker { animation: revele-joker 0.55s var(--fk-rebond) both; animation-delay: calc(var(--k, 0) * 70ms + 900ms); }
@keyframes revele-joker {
  0%   { transform: scale(0.4) rotateY(90deg); background: var(--fk-moutarde); }
  60%  { transform: scale(1.15) rotateY(0); background: var(--fk-moutarde); }
  100% { transform: none; }
}

/* ==========================================================================
   Animation d'activation du joker (par-dessus la vidéo)
   ========================================================================== */
.joker-anim {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  overflow: hidden;
  pointer-events: none;
}
.joker-anim > div { position: absolute; inset: 0; }
.joker-anim .ja-flash { background: var(--fk-creme); animation: flash-sortie 0.5s ease-out both; }
.joker-anim .ja-rayons {
  inset: -50vmax;
  background: repeating-conic-gradient(from 0deg, rgba(227, 168, 43, 0.55) 0deg 10deg, transparent 10deg 20deg);
  animation: rayons-entree 0.5s ease-out both, fk-tourne 9s linear infinite;
}
.joker-anim .ja-voile { background: radial-gradient(circle, rgba(42, 21, 13, 0.25) 0%, rgba(42, 21, 13, 0.88) 70%); }
.joker-anim .ja-scene {
  position: relative;
  inset: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5vmin;
  text-align: center;
}
.joker-anim .ja-joker {
  width: 34vmin;
  height: 34vmin;
  filter: drop-shadow(1.2vmin 1.2vmin 0 rgba(42, 21, 13, 0.7));
  animation: joker-jaillit 0.9s var(--fk-rebond) both, joker-danse 0.6s ease-in-out 0.9s 3 alternate;
}
.joker-anim .ja-titre {
  margin: 0;
  font-family: var(--fk-titre);
  font-size: 14vmin;
  line-height: 1;
  color: var(--fk-moutarde);
  text-shadow: 0.8vmin 0.8vmin 0 var(--fk-chocolat), 1.4vmin 1.4vmin 0 var(--fk-rose);
  animation: titre-tampon 0.6s var(--fk-rebond) 0.35s both;
}
.joker-anim .ja-equipe {
  margin: 0;
  padding: 0.6vmin 3vmin;
  border: 0.5vmin solid var(--fk-creme);
  border-radius: 999px;
  background: var(--fk-chocolat);
  color: var(--fk-creme);
  font-family: var(--fk-jeu-texte);
  font-size: 4.5vmin;
  animation: monte 0.5s ease-out 0.7s both;
}
.joker-anim.sortie { animation: fondu-sortie 0.5s ease-in both; }
.joker-anim.calme .ja-rayons { animation: rayons-entree 0.4s ease-out both; }
.joker-anim.calme .ja-joker,
.joker-anim.calme .ja-titre,
.joker-anim.calme .ja-equipe { animation: fondu-entree 0.4s ease-out both; }

@keyframes joker-jaillit {
  0%   { opacity: 0; transform: translateY(40vh) scale(0.2) rotate(-40deg); }
  70%  { opacity: 1; transform: translateY(-3vh) scale(1.12) rotate(8deg); }
  100% { transform: none; }
}
@keyframes joker-danse { to { transform: rotate(-7deg) scale(1.04); } }

/* ==========================================================================
   Confettis (créés et animés par effets.js)
   ========================================================================== */
.confettis {
  position: fixed;
  inset: 0;
  z-index: 80;
  overflow: hidden;
  pointer-events: none;
}
.confettis .confetti {
  position: absolute;
  left: 0;
  top: 0;
  margin: -6px 0 0 -6px;
  border-radius: 2px;
  will-change: transform, opacity;
}

/* ==========================================================================
   Annonce de « La Même Chanson » (écran joueurs et régie)
   Tailles en vmin : même spectacle sur l'écran projeté et dans la fenêtre de régie.
   Classes : .calme (animations calmes : fondus, décor immobile) · .fige (animations « aucune »)
   ========================================================================== */
.annonce {
  position: fixed;
  inset: 0;
  z-index: 55;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: var(--fk-creme);
  font-family: var(--fk-jeu-texte);
  text-align: center;
  animation: fondu-entree 0.3s ease-out both;
}
.annonce > div { position: absolute; }

/* fond : soleil tournant aux 4 couleurs, assombri sur les bords */
.annonce-fond { inset: 0; background: var(--fk-expresso); overflow: hidden; }
.annonce-fond::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 180vmax;
  height: 180vmax;
  margin: -90vmax 0 0 -90vmax;
  background: repeating-conic-gradient(from 0deg,
    #5A2E1C 0deg 7.5deg, var(--fk-chocolat) 7.5deg 15deg,
    #2E6E5F 15deg 22.5deg, var(--fk-chocolat) 22.5deg 30deg,
    #7A5A1E 30deg 37.5deg, var(--fk-chocolat) 37.5deg 45deg,
    #74304F 45deg 52.5deg, var(--fk-chocolat) 52.5deg 60deg);
  animation: fk-tourne 40s linear infinite;
}
.annonce-fond::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(42, 21, 13, 0.15) 25%, rgba(42, 21, 13, 0.95) 100%);
}

/* projecteurs : 4 faisceaux qui balaient la scène depuis le bas */
.annonce-faisceaux { inset: 0; mix-blend-mode: screen; }
.annonce-faisceaux .fx {
  position: absolute;
  bottom: -10vh;
  width: 26vmin;
  height: 150vh;
  margin-left: -13vmin;
  transform-origin: 50% 100%;
  clip-path: polygon(46% 100%, 54% 100%, 100% 0, 0 0);
  opacity: 0;
  filter: blur(6px);
  animation: faisceau-allume 0.6s ease-out 0.4s forwards, faisceau-balaie 3.2s ease-in-out 0.4s infinite alternate;
}
.annonce-faisceaux .fx-0 { left: 8%;  background: linear-gradient(to top, rgba(43, 179, 167, 0.75), transparent 85%); --a: -28deg; --b: 12deg; }
.annonce-faisceaux .fx-1 { left: 32%; background: linear-gradient(to top, rgba(227, 168, 43, 0.7), transparent 85%);  --a: -12deg; --b: 22deg; animation-delay: 0.5s, 0.9s; }
.annonce-faisceaux .fx-2 { left: 68%; background: linear-gradient(to top, rgba(232, 74, 138, 0.7), transparent 85%);  --a: 12deg;  --b: -22deg; animation-delay: 0.6s, 0.6s; }
.annonce-faisceaux .fx-3 { left: 92%; background: linear-gradient(to top, rgba(232, 102, 42, 0.75), transparent 85%); --a: 28deg;  --b: -12deg; animation-delay: 0.7s, 1.2s; }
@keyframes faisceau-allume { to { opacity: 0.85; } }
@keyframes faisceau-balaie {
  from { transform: rotate(var(--a)); }
  to   { transform: rotate(var(--b)); }
}

/* reflets de la boule à facettes qui glissent sur les murs */
.annonce-spots { inset: 0; }
.annonce-spots span {
  position: absolute;
  top: calc(12% + var(--k) * 11%);
  left: -10%;
  width: 3.2vmin;
  height: 3.2vmin;
  border-radius: 50%;
  background: var(--fk-creme);
  box-shadow: 0 0 2vmin 0.6vmin rgba(245, 230, 200, 0.7);
  opacity: 0;
  animation: spot-glisse calc(5s + var(--k) * 0.7s) linear calc(1.2s + var(--k) * 0.35s) infinite;
}
.annonce-spots span:nth-child(4n+1) { background: var(--fk-turquoise); box-shadow: 0 0 2vmin 0.6vmin rgba(43, 179, 167, 0.7); }
.annonce-spots span:nth-child(4n+2) { background: var(--fk-rose);      box-shadow: 0 0 2vmin 0.6vmin rgba(232, 74, 138, 0.7); }
.annonce-spots span:nth-child(4n+3) { background: var(--fk-moutarde);  box-shadow: 0 0 2vmin 0.6vmin rgba(227, 168, 43, 0.7); }
@keyframes spot-glisse {
  0%   { opacity: 0; transform: translateX(0); }
  10%  { opacity: 0.9; }
  90%  { opacity: 0.9; }
  100% { opacity: 0; transform: translateX(125vw); }
}

.annonce-flash { inset: 0; background: var(--fk-creme); animation: flash-sortie 0.7s ease-out both; }

/* cadre d'ampoules de music-hall, qui clignotent en chenillard */
.annonce-ampoules { inset: 2.2vmin; }
.annonce-ampoules .rg { position: absolute; display: flex; justify-content: space-between; }
.annonce-ampoules .rg.h { left: 0; right: 0; top: 0; }
.annonce-ampoules .rg.h.bas { top: auto; bottom: 0; }
.annonce-ampoules .rg.v { top: 5vmin; bottom: 5vmin; flex-direction: column; }
.annonce-ampoules .rg.v.g { left: 0; }
.annonce-ampoules .rg.v.d { right: 0; }
.annonce-ampoules i {
  display: block;
  width: 2.4vmin;
  height: 2.4vmin;
  border-radius: 50%;
  background: var(--fk-moutarde);
  box-shadow: 0 0 1.6vmin 0.4vmin rgba(227, 168, 43, 0.8);
  animation: ampoule 0.9s steps(1) infinite;
  animation-delay: calc(var(--k) * -0.15s);
}
@keyframes ampoule {
  0%  { opacity: 1; }
  50% { opacity: 0.22; box-shadow: none; }
}

/* boule à facettes qui descend du plafond */
.annonce-boule { top: 0; left: 50%; width: 15vmin; margin-left: -7.5vmin; animation: boule-descend 1.1s var(--fk-rebond) 0.3s both; }
.annonce-boule .fil { display: block; width: 0.5vmin; height: 7vmin; margin: 0 auto; background: var(--fk-sable); }
.annonce-boule .corps {
  display: block;
  width: 15vmin;
  height: 15vmin;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.95) 0 6%, transparent 7%),
    repeating-linear-gradient(0deg, transparent 0 1.6vmin, rgba(42, 21, 13, 0.45) 1.6vmin 1.9vmin),
    repeating-linear-gradient(90deg, #E9DCC2 0 1.6vmin, #9C8C74 1.6vmin 1.9vmin, #F5E6C8 1.9vmin 3.5vmin, #C9B08A 3.5vmin 3.8vmin);
  box-shadow: 0 0 5vmin 1vmin rgba(245, 230, 200, 0.45), inset -2vmin -2vmin 3vmin rgba(42, 21, 13, 0.55);
  animation: boule-facettes 2.5s linear infinite;
}
@keyframes boule-descend { from { transform: translateY(-30vmin); } }
@keyframes boule-facettes { to { background-position: 0 0, 0 0, 3.8vmin 0; } }

/* vinyle géant qui tourne derrière le titre */
.annonce-vinyle { left: 50%; top: 50%; width: 92vmin; height: 92vmin; margin: -46vmin 0 0 -46vmin; animation: vinyle-entree 0.9s var(--fk-rebond) 0.5s both; }
.annonce-vinyle .tour {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background:
    repeating-radial-gradient(circle, #1B0D07 0 0.5vmin, #2A150D 0.5vmin 0.9vmin),
    #1B0D07;
  box-shadow: 0 0 0 0.8vmin rgba(245, 230, 200, 0.12), 0 2vmin 6vmin rgba(0, 0, 0, 0.6);
  opacity: 0.72;
  animation: fk-tourne 5s linear infinite;
}
.annonce-vinyle .etiquette {
  width: 26%;
  height: 26%;
  border-radius: 50%;
  background: conic-gradient(var(--fk-orange) 0 25%, var(--fk-moutarde) 0 50%, var(--fk-rose) 0 75%, var(--fk-turquoise) 0);
  box-shadow: inset 0 0 0 1vmin var(--fk-creme);
}
@keyframes vinyle-entree { from { opacity: 0; transform: scale(0.2) rotate(-90deg); } }

/* onde de choc à l'arrivée du titre */
.annonce-onde {
  left: 50%;
  top: 50%;
  width: 20vmin;
  height: 20vmin;
  margin: -10vmin 0 0 -10vmin;
  border: 1.2vmin solid var(--fk-creme);
  border-radius: 50%;
  opacity: 0;
  animation: onde 1s ease-out 1.95s both;
}
@keyframes onde {
  0%   { opacity: 0.9; transform: scale(0.3); }
  100% { opacity: 0; transform: scale(7); border-width: 0.2vmin; }
}

/* égaliseur aux 4 couleurs, en bas de l'écran */
.annonce-egaliseur {
  left: 6vmin;
  right: 6vmin;
  bottom: 5vmin;
  height: 14vmin;
  display: flex;
  align-items: flex-end;
  gap: 0.8vmin;
  opacity: 0.85;
  animation: monte 0.6s ease-out 2.2s both;
}
.annonce-egaliseur i {
  flex: 1;
  height: 100%;
  border-radius: 0.6vmin 0.6vmin 0 0;
  background: var(--fk-turquoise);
  transform-origin: bottom;
  animation: egaliseur 0.5s ease-in-out infinite alternate;
  animation-delay: calc(var(--k) * -83ms);
}
.annonce-egaliseur i:nth-child(3n+1) { animation-duration: 0.62s; }
.annonce-egaliseur i:nth-child(5n+2) { animation-duration: 0.41s; }
.annonce-egaliseur i:nth-child(7n+3) { animation-duration: 0.77s; }
.annonce-egaliseur i:nth-child(4n+2) { background: var(--fk-moutarde); }
.annonce-egaliseur i:nth-child(4n+3) { background: var(--fk-rose); }
.annonce-egaliseur i:nth-child(4n+4) { background: var(--fk-orange); }
@keyframes egaliseur {
  from { transform: scaleY(0.12); }
  to   { transform: scaleY(1); }
}

/* contenu : textes et boutons */
.annonce-contenu {
  position: relative !important;
  z-index: 2;
  max-width: 92vw;
  padding: 0 4vmin;
}
.annonce-kicker {
  margin: 0;
  font-size: 5vmin;
  color: var(--fk-sable);
  letter-spacing: 0.08em;
  animation: monte 0.5s ease-out 0.7s both;
}
.annonce-titre {
  margin: 0.5vmin 0 0;
  font-family: var(--fk-titre);
  font-size: 15vmin;
  line-height: 1;
  color: var(--fk-moutarde);
  text-shadow: 0.6vmin 0.6vmin 0 var(--fk-chocolat), 1.2vmin 1.2vmin 0 var(--fk-rose), 1.8vmin 1.8vmin 0 var(--fk-turquoise);
  animation: neon 3s ease-in-out 2.6s infinite;
}
.annonce-titre .mot { display: inline-block; white-space: nowrap; }
.annonce-titre .l {
  display: inline-block;
  animation: lettre-tombe 0.55s var(--fk-rebond) both;
  animation-delay: calc(1s + var(--i) * 65ms);
}
.annonce-sous {
  display: inline-block;
  margin: 2vmin 0 0;
  padding: 0.6vmin 3.5vmin;
  border: 0.6vmin solid var(--fk-creme);
  border-radius: 999px;
  background: var(--fk-rose);
  color: var(--fk-chocolat);
  font-family: var(--fk-titre);
  font-size: 6vmin;
  line-height: 1.2;
  transform: rotate(-3deg);
  box-shadow: 0.8vmin 0.8vmin 0 var(--fk-chocolat);
  animation: titre-tampon 0.55s var(--fk-rebond) 2.05s both;
}
.annonce-qui {
  margin: 3vmin 0 0;
  font-size: 5.2vmin;
  animation: monte 0.5s ease-out 2.5s both;
}
.annonce-qui b { font-weight: 400; color: var(--jeu-clair); }
.annonce-regle {
  margin: 1.2vmin auto 0;
  max-width: 70ch;
  font-size: 3.6vmin;
  color: var(--fk-sable);
  animation: monte 0.5s ease-out 2.8s both;
}
.annonce-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.2rem;
  margin-top: 3vmin;
  animation: monte 0.5s ease-out 3.1s both;
}
.annonce-cta,
.annonce-plus-tard {
  padding: 0.7rem 1.8rem;
  border: 4px solid var(--fk-creme);
  border-radius: 999px;
  font-family: var(--fk-regie);
  font-size: 1.25rem;
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.2s var(--fk-rebond), background-color 0.15s;
}
.annonce-cta { background: var(--fk-moutarde); color: var(--fk-chocolat); box-shadow: 5px 5px 0 var(--fk-chocolat); animation: pulse-cta 1.4s ease-in-out 3.6s infinite; }
.annonce-plus-tard { background: transparent; color: var(--fk-creme); border-style: dashed; font-size: 1rem; }
.annonce-cta:hover, .annonce-cta:focus-visible { background: #F2C960; transform: scale(1.05); }
.annonce-plus-tard:hover, .annonce-plus-tard:focus-visible { background: rgba(245, 230, 200, 0.12); }
.annonce-cta:focus-visible, .annonce-plus-tard:focus-visible { outline: 4px solid var(--jeu-clair); outline-offset: 4px; }

.annonce.sortie { animation: fondu-sortie 0.5s ease-in both; }

/* animations calmes : tout apparaît en fondu, rien ne tourne ni ne balaie */
.annonce.calme *,
.annonce.calme *::before,
.annonce.calme *::after { animation-name: fondu-entree !important; animation-duration: 0.4s !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; animation-timing-function: ease-out !important; }
.annonce.calme .annonce-flash, .annonce.calme .annonce-onde, .annonce.calme .annonce-spots { display: none; }
.annonce.calme .annonce-faisceaux .fx { opacity: 0.6; transform: rotate(var(--a)); }
.annonce.calme .annonce-egaliseur i,
.annonce.fige .annonce-egaliseur i { transform: scaleY(0.45); }
.annonce.calme .annonce-egaliseur i:nth-child(3n+1),
.annonce.fige .annonce-egaliseur i:nth-child(3n+1) { transform: scaleY(0.8); }
.annonce.calme .annonce-egaliseur i:nth-child(5n+2),
.annonce.fige .annonce-egaliseur i:nth-child(5n+2) { transform: scaleY(0.25); }
.annonce.calme.sortie { animation: fondu-sortie 0.4s ease-in both; }
/* animations « aucune » : image fixe */
.annonce.fige .annonce-flash, .annonce.fige .annonce-onde, .annonce.fige .annonce-spots { display: none; }
.annonce.fige .annonce-faisceaux .fx { opacity: 0.6; transform: rotate(var(--a)); }

/* ==========================================================================
   « Carton plein ! » (écran joueurs, par-dessus la vidéo)
   ========================================================================== */
.carton-plein {
  position: fixed;
  inset: 0;
  z-index: 65;
  display: grid;
  place-items: center;
  overflow: hidden;
  pointer-events: none;
  text-align: center;
}
.carton-plein > div { position: absolute; }
.cp-voile { inset: 0; background: radial-gradient(circle, rgba(59, 31, 20, 0.9) 0%, rgba(42, 21, 13, 0.97) 70%); animation: fondu-entree 0.3s ease-out both; }
.cp-rayons {
  left: 50%;
  top: 50%;
  width: 150vmax;
  height: 150vmax;
  margin: -75vmax 0 0 -75vmax;
  background: repeating-conic-gradient(from 0deg,
    rgba(232, 102, 42, 0.6) 0deg 7.5deg, transparent 7.5deg 15deg,
    rgba(227, 168, 43, 0.6) 15deg 22.5deg, transparent 22.5deg 30deg,
    rgba(232, 74, 138, 0.6) 30deg 37.5deg, transparent 37.5deg 45deg,
    rgba(43, 179, 167, 0.6) 45deg 52.5deg, transparent 52.5deg 60deg);
  -webkit-mask-image: radial-gradient(circle, transparent 9%, #000 16%, rgba(0, 0, 0, 0.5) 35%, transparent 50%);
          mask-image: radial-gradient(circle, transparent 9%, #000 16%, rgba(0, 0, 0, 0.5) 35%, transparent 50%);
  animation: rayons-entree 0.5s ease-out 0.15s both, fk-tourne 12s linear infinite;
}
.cp-flash { inset: 0; background: var(--fk-creme); animation: flash-sortie 0.6s ease-out both; }

.cp-etoiles { left: 50%; top: 45%; width: 0; height: 0; }
.cp-etoiles span {
  position: absolute;
  left: 0;
  top: 0;
  margin: -3vmin 0 0 -3vmin;
  font-size: 6vmin;
  line-height: 1;
  color: var(--fk-moutarde);
  text-shadow: 0.4vmin 0.4vmin 0 var(--fk-chocolat);
  opacity: 0;
  animation: etoile-jaillit 1.4s cubic-bezier(0.15, 0.7, 0.35, 1) calc(0.35s + var(--k) * 30ms) both;
}
.cp-etoiles span:nth-child(3n+1) { color: var(--fk-rose); }
.cp-etoiles span:nth-child(3n+2) { color: var(--fk-turquoise); }
@keyframes etoile-jaillit {
  0%   { opacity: 1; transform: rotate(calc(var(--k) * 30deg)) translateY(0) scale(0.3); }
  70%  { opacity: 1; }
  100% { opacity: 0; transform: rotate(calc(var(--k) * 30deg + 90deg)) translateY(-42vmin) scale(1.2); }
}

.cp-scene { position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: center; gap: 2vmin; }
.cp-scene::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 50%;
  width: 120vmin;
  height: 90vmin;
  margin: -45vmin 0 0 -60vmin;
  background: radial-gradient(ellipse, rgba(42, 21, 13, 0.9) 30%, transparent 70%);
}
.cp-titre {
  display: flex;
  flex-direction: column;
  margin: 0;
  font-family: var(--fk-titre);
  font-size: 19vmin;
  line-height: 0.95;
  transform: rotate(-5deg);
}
.cp-titre span { display: block; text-shadow: 0.7vmin 0.7vmin 0 var(--fk-creme), 1.5vmin 1.5vmin 0 var(--fk-chocolat); }
.cp-l1 { color: var(--fk-moutarde); animation: carton-tampon 0.6s var(--fk-rebond) 0.1s both; }
.cp-l2 { color: var(--fk-rose); margin-left: 12vmin; animation: carton-tampon 0.6s var(--fk-rebond) 0.35s both, carton-vibre 0.5s ease-in-out 1.2s 4 alternate; }
.cp-equipe {
  margin: 1vmin 0 0;
  padding: 0.6vmin 3.5vmin;
  border: 0.6vmin solid var(--fk-creme);
  border-radius: 999px;
  background: var(--fk-turquoise);
  color: var(--fk-chocolat);
  font-family: var(--fk-jeu-texte);
  font-size: 5.4vmin;
  box-shadow: 0.8vmin 0.8vmin 0 var(--fk-chocolat);
  animation: monte 0.5s ease-out 0.8s both;
}
.cp-detail { margin: 0; color: var(--fk-creme); font-family: var(--fk-jeu-texte); font-size: 3.8vmin; animation: monte 0.5s ease-out 1.1s both; }
.carton-plein.sortie { animation: fondu-sortie 0.5s ease-in both; }
.carton-plein.calme *,
.carton-plein.calme *::before { animation-name: fondu-entree !important; animation-duration: 0.4s !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; }
.carton-plein.calme .cp-flash, .carton-plein.calme .cp-etoiles,
.carton-plein.fige .cp-flash, .carton-plein.fige .cp-etoiles { display: none; }
.carton-plein.calme.sortie { animation: fondu-sortie 0.4s ease-in both; }

@keyframes carton-tampon {
  0%   { opacity: 0; transform: scale(3.2) rotate(10deg); }
  60%  { opacity: 1; transform: scale(0.92) rotate(-2deg); }
  100% { transform: none; }
}
@keyframes carton-vibre { to { transform: scale(1.06) rotate(2deg); } }

/* verdict gardé sur le calque après l'animation */
.message-mc.carton { color: var(--fk-moutarde); font-size: calc(min(8vh, 9cqw) * var(--fk-texte-doux, 1)); }

/* régie : état du Carton plein sous le verdict */
.etat-carton { margin: 0 0 0.6rem; font-weight: 600; color: var(--fk-moutarde); }
.etat-carton.fait { color: var(--fk-ok); }

/* ==========================================================================
   Victoire : animation du classement final (écran joueurs)
   Les lignes arrivent de la dernière place à la première (--delai posé par effets.js),
   puis les gagnants : projecteurs, trophée qui se balance, halo qui pulse, confettis.
   ========================================================================== */
.classement-final.victoire .titre-classement { animation: titre-tombe 0.6s var(--fk-rebond) both; }
.classement-final.victoire .rang { animation: rang-entree 0.6s var(--fk-rebond) var(--delai, 0ms) both; }
.classement-final.victoire .rang-premier {
  animation: gagnant-entree 0.9s var(--fk-rebond) var(--delai, 0ms) both,
             gagnant-halo 1.6s ease-in-out calc(var(--delai, 0ms) + 0.9s) infinite;
}
.classement-final.victoire .rang-premier .rang-nom { display: inline-block; transform-origin: 30% 80%; animation: trophee 0.8s ease-in-out calc(var(--delai, 0ms) + 0.9s) 4 alternate; }
.classement-final.victoire.calme .titre-classement,
.classement-final.victoire.calme .rang,
.classement-final.victoire.calme .rang-premier { animation: fondu-entree 0.45s ease-out var(--delai, 0ms) both; }
.classement-final.victoire.calme .rang-premier .rang-nom { animation: none; }

@keyframes rang-entree {
  from { opacity: 0; transform: translateX(-60vw) rotate(-6deg); }
  to   { opacity: 1; transform: none; }
}
@keyframes gagnant-entree {
  0%   { opacity: 0; transform: scale(0.2); }
  60%  { opacity: 1; transform: scale(1.18) rotate(-2deg); }
  100% { opacity: 1; transform: scale(1.04); }
}
@keyframes gagnant-halo {
  0%, 100% { transform: scale(1.04); box-shadow: 0.8vh 0.8vh 0 var(--eq-fonce), 0 0 0 0 rgba(245, 230, 200, 0.55); }
  50%      { transform: scale(1.08); box-shadow: 0.8vh 0.8vh 0 var(--eq-fonce), 0 0 0 2.4vh rgba(245, 230, 200, 0); }
}
@keyframes trophee { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }
@keyframes titre-tombe {
  from { opacity: 0; transform: translateY(-30vh) scale(1.4); }
  to   { opacity: 1; transform: none; }
}

/* deux projecteurs qui se croisent sur les gagnants */
.victoire-projecteurs {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  mix-blend-mode: screen;
}
.victoire-projecteurs .vp {
  position: absolute;
  bottom: -10vh;
  width: 40vmin;
  height: 140vh;
  margin-left: -20vmin;
  transform-origin: 50% 100%;
  clip-path: polygon(45% 100%, 55% 100%, 100% 0, 0 0);
  filter: blur(8px);
  opacity: 0;
  animation: faisceau-allume 0.5s ease-out var(--delai-gagnant, 0ms) forwards, faisceau-balaie 2.4s ease-in-out var(--delai-gagnant, 0ms) 3 alternate;
}
.victoire-projecteurs .vp.g { left: 12%; background: linear-gradient(to top, rgba(227, 168, 43, 0.6), transparent 80%); --a: 30deg; --b: 8deg; }
.victoire-projecteurs .vp.d { left: 88%; background: linear-gradient(to top, rgba(232, 74, 138, 0.6), transparent 80%); --a: -30deg; --b: -8deg; }

/* ==========================================================================
   Animations communes aux effets
   ========================================================================== */
@keyframes fondu-entree { from { opacity: 0; } }
@keyframes fondu-sortie { to { opacity: 0; } }
@keyframes flash-sortie { from { opacity: 0.95; } to { opacity: 0; } }
@keyframes rayons-entree { from { opacity: 0; } }
@keyframes monte { from { opacity: 0; transform: translateY(4vmin); } }
@keyframes titre-tampon {
  0%   { opacity: 0; transform: scale(2.6) rotate(8deg); }
  60%  { opacity: 1; transform: scale(0.94) rotate(-4deg); }
  100% { opacity: 1; }
}
@keyframes lettre-tombe {
  0%   { opacity: 0; transform: translateY(-70vh) rotate(-25deg); }
  70%  { opacity: 1; transform: translateY(1.5vmin) rotate(4deg); }
  100% { opacity: 1; transform: none; }
}
@keyframes neon {
  0%, 18%, 22%, 25%, 53%, 57%, 100% {
    color: var(--fk-moutarde);
    text-shadow: 0.6vmin 0.6vmin 0 var(--fk-chocolat), 1.2vmin 1.2vmin 0 var(--fk-rose), 1.8vmin 1.8vmin 0 var(--fk-turquoise),
                 0 0 4vmin rgba(227, 168, 43, 0.75);
  }
  20%, 24%, 55% {
    color: #8A6418;
    text-shadow: 0.6vmin 0.6vmin 0 var(--fk-chocolat), 1.2vmin 1.2vmin 0 var(--fk-rose), 1.8vmin 1.8vmin 0 var(--fk-turquoise);
  }
}
@keyframes pulse-cta { 50% { transform: scale(1.06); } }

/* ==========================================================================
   Jugement des phrases (écran joueurs) : la phrase qui vient d'être jugée s'anime une fois
   validée : rebond + confettis (effets.js) · refusée : vibration de gauche à droite + flash rouge
   ========================================================================== */
.cache-paroles .ligne-blancs.vient-valide .phrase-complete { animation: phrase-validee 0.6s var(--fk-rebond) both; }
.cache-paroles .ligne-blancs.vient-refuse .phrase-complete { animation: phrase-refusee 0.65s ease-in-out both; }
@keyframes phrase-validee {
  0%   { transform: scale(0.6); }
  60%  { transform: scale(1.12); box-shadow: 0 0 0 1.4cqw rgba(124, 196, 106, 0.45); }
  100% { transform: none; box-shadow: 0 0 0 2.4cqw rgba(124, 196, 106, 0); }
}
@keyframes phrase-refusee {
  0%, 100% { transform: none; }
  10%, 50%, 90% { transform: translateX(-1.6cqw) rotate(-1deg); }
  30%, 70%      { transform: translateX(1.6cqw) rotate(1deg); }
  20% { filter: brightness(1.5); }
}
html[data-animations="calmes"] .cache-paroles .ligne-blancs.vient-valide .phrase-complete,
html[data-animations="calmes"] .cache-paroles .ligne-blancs.vient-refuse .phrase-complete { animation: fondu-entree 0.4s ease-out both; }

/* ==========================================================================
   La Même Chanson : carte de présentation (avant la vidéo)
   ========================================================================== */
.carte-mc { text-align: center; }
.carte-mc-tete {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.6rem 1rem;
  margin: 0 0 1rem;
}
.carte-mc-equipe {
  --eq: var(--fk-orange);
  --eq-fonce: #A8461A;
  padding: 0.2em 0.9em;
  border: var(--fk-contour) solid var(--fk-creme);
  border-radius: 999px;
  background: var(--eq);
  color: var(--fk-chocolat);
  font-family: var(--fk-titre);
  box-shadow: 5px 5px 0 var(--eq-fonce);
}
.carte-mc-equipe.eq-1 { --eq: var(--fk-moutarde);  --eq-fonce: #A6791A; }
.carte-mc-equipe.eq-2 { --eq: var(--fk-rose);      --eq-fonce: #A8305F; }
.carte-mc-equipe.eq-3 { --eq: var(--fk-turquoise); --eq-fonce: #1D7A72; }
.carte-mc-manche { color: var(--fk-sable); }
.carte-mc-corps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  padding: 1.4rem 2rem;
  border: var(--fk-contour) solid var(--fk-sable);
  border-radius: var(--fk-rayon);
  background: var(--fk-chocolat);
  box-shadow: 6px 6px 0 var(--fk-expresso);
  text-align: left;
}
.carte-mc-corps .cover-proposition { flex: none; margin: 0; }
.carte-mc-infos .titre { font-family: var(--fk-titre); line-height: 1.05; color: var(--fk-creme); }
.carte-mc-infos .artiste { margin-top: 0.3em; color: var(--fk-sable); }
.carte-mc-infos .nombre-mots {
  display: inline-block;
  margin-top: 0.7em;
  padding: 0.15em 0.8em;
  border-radius: 999px;
  background: var(--jeu);
  color: var(--fk-chocolat);
}
.carte-mc-pied { margin: 1rem 0 0; color: var(--jeu-clair); }

.ecran-joueurs .carte-mc { width: min(100%, 130vh); }
.ecran-joueurs .carte-mc-tete { gap: 1.2vh 2.4vh; margin-bottom: 2.4vh; font-size: calc(3.6vh * var(--fk-texte-doux, 1)); }
.ecran-joueurs .carte-mc-equipe { border-width: 0.5vh; box-shadow: 0.8vh 0.8vh 0 var(--eq-fonce); font-size: calc(4.4vh * var(--fk-texte-doux, 1)); }
.ecran-joueurs .carte-mc-corps { gap: 4vh; padding: 3vh 4vh; border-width: 0.5vh; border-radius: 3vh; box-shadow: 0.9vh 0.9vh 0 var(--fk-expresso); }
.ecran-joueurs .carte-mc-corps .cover-proposition { width: 30vh; height: 30vh; font-size: 12vh; border-width: 0.5vh; border-radius: 2.4vh; }
.ecran-joueurs .carte-mc-infos { min-width: 0; }
.ecran-joueurs .carte-mc-infos .titre { font-size: calc(7vh * var(--fk-texte-doux, 1)); overflow-wrap: anywhere; }
.ecran-joueurs .carte-mc-infos .artiste { font-size: calc(4.2vh * var(--fk-texte, 1)); }
.ecran-joueurs .carte-mc-infos .nombre-mots { font-size: calc(4.2vh * var(--fk-texte-doux, 1)); }
.ecran-joueurs .carte-mc-pied { margin-top: 2.6vh; font-size: calc(3.8vh * var(--fk-texte, 1)); }

/* entrée de la carte (une seule fois, à son affichage) */
.carte-mc .carte-mc-tete  { animation: monte 0.5s ease-out 0.1s both; }
.carte-mc .carte-mc-corps { animation: carte-mc-entree 0.7s var(--fk-rebond) 0.3s both; }
.carte-mc .carte-mc-pied  { animation: fondu-entree 0.6s ease-out 1s both, carte-mc-attente 1.8s ease-in-out 1.6s infinite; }
@keyframes carte-mc-entree { from { opacity: 0; transform: scale(0.6) rotate(-3deg); } }
@keyframes carte-mc-attente { 50% { opacity: 0.45; } }
html[data-animations="calmes"] .carte-mc * { animation: fondu-entree 0.4s ease-out both !important; }

/* ==========================================================================
   La Même Chanson : écran « Décroché ! » sur le calque (4 mots avant, le mot raté, 4 mots après, bilan)
   ========================================================================== */
.decroche {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.4cqw;
  max-width: 100%;
}
.decroche-titre {
  margin: 0;
  font-family: var(--fk-titre);
  font-size: calc(min(8vh, 9cqw) * var(--fk-texte-doux, 1));
  line-height: 1;
  color: var(--fk-erreur);
  text-shadow: 0.35cqw 0.35cqw 0 var(--fk-creme), 0.8cqw 0.8cqw 0 var(--fk-expresso);
  animation: decroche-tombe 0.6s var(--fk-rebond) both, phrase-refusee 0.6s ease-in-out 0.6s both;
}
.decroche-passage {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1cqw 1.2cqw;
  max-width: 94%;
  margin: 0;
  font-size: calc(min(4.4vh, 4.6cqw) * var(--fk-texte-doux, 1));
  line-height: 1.2;
}
.decroche-passage span { display: inline-block; animation: fondu-entree 0.35s ease-out both; animation-delay: calc(0.9s + var(--k, 0) * 90ms); }
.decroche-passage .ok    { color: var(--fk-ok); }
.decroche-passage .suite { color: var(--fk-sable); opacity: 0.8; }
.decroche-passage .rate {
  padding: 0.3cqw 1.4cqw;
  border: 0.45cqw solid var(--fk-creme);
  border-radius: 1.2cqw;
  background: var(--fk-erreur);
  color: var(--fk-creme);
  animation: mot-rate 0.8s var(--fk-rebond) both, phrase-refusee 0.6s ease-in-out both;
  animation-delay: calc(0.9s + var(--k, 0) * 90ms), calc(1.5s + var(--k, 0) * 90ms);
}
.bilan-mc {
  margin: 0;
  padding: 0.6cqw 2.4cqw;
  border: 0.45cqw solid var(--fk-creme);
  border-radius: 999px;
  background: var(--fk-caramel);
  color: var(--fk-creme);
  font-size: calc(min(3.8vh, 4cqw) * var(--fk-texte-doux, 1));
  animation: monte 0.5s ease-out 2.2s both;
}
.bilan-mc b { font-weight: 400; color: var(--jeu-clair); }
.message-mc.carton + .bilan-mc { animation-delay: 0.3s; }
@keyframes decroche-tombe { from { opacity: 0; transform: translateY(-20cqw) rotate(-8deg); } }
@keyframes mot-rate {
  0%   { opacity: 0; transform: scale(2.4); }
  60%  { opacity: 1; transform: scale(0.9); }
  100% { opacity: 1; transform: none; }
}
html[data-animations="calmes"] .decroche *,
html[data-animations="calmes"] .bilan-mc { animation: fondu-entree 0.4s ease-out both !important; }