/* 100pc — toutes les valeurs viennent de tokens.css */

@font-face { font-family: "Poppins"; font-weight: 400; font-display: swap; src: url("fonts/Poppins-400-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poppins"; font-weight: 400; font-display: swap; src: url("fonts/Poppins-400-latin-ext.woff2") format("woff2"); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Poppins"; font-weight: 500; font-display: swap; src: url("fonts/Poppins-500-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poppins"; font-weight: 500; font-display: swap; src: url("fonts/Poppins-500-latin-ext.woff2") format("woff2"); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Poppins"; font-weight: 600; font-display: swap; src: url("fonts/Poppins-600-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poppins"; font-weight: 600; font-display: swap; src: url("fonts/Poppins-600-latin-ext.woff2") format("woff2"); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; }
/* Repli aux métriques de Poppins pour éviter le saut au chargement */
@font-face { font-family: "Poppins-repli"; src: local("Arial"); size-adjust: 112%; ascent-override: 93%; descent-override: 31%; line-gap-override: 9%; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--police);
  font-size: var(--t-corps);
  line-height: var(--lh-corps);
  min-height: 100dvh;
}
h1, h2 { font-weight: 600; text-wrap: balance; margin: 0; }
h1 { font-size: var(--t-titre); line-height: var(--lh-titre); letter-spacing: -0.01em; }
p { text-wrap: pretty; margin: 0; }
a { color: inherit; }
[hidden] { display: none !important; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
input[type=number] { -moz-appearance: textfield; appearance: textfield; }
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.pictos { position: absolute; }
svg use, .bouton-retirer svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Thèmes ---------- */
.page-craie { background: var(--craie); color: var(--ardoise); }
.page-ardoise { background: var(--ardoise); color: var(--craie); }
.page-ardoise::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; opacity: var(--grain-opacite);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}
.page-craie :focus-visible { outline: var(--focus); outline-color: var(--ardoise); outline-offset: 2px; }
.page-ardoise :focus-visible { outline: var(--focus); outline-offset: 3px; }

.marque { font-weight: 600; text-decoration: none; letter-spacing: -0.01em; }

/* ---------- Boutons et champs ---------- */
.bouton-primaire, .bouton-secondaire {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2);
  min-height: 2.75rem; padding: var(--e-2) var(--e-5);
  border-radius: var(--r-champ); font-weight: 600; text-decoration: none; border: 0;
  transition: transform var(--duree-courte);
}
.bouton-primaire { background: var(--minuterie); color: var(--ardoise); }
.bouton-primaire:disabled { background: var(--ardoise-haute); color: var(--craie-sourde); cursor: not-allowed; }
.bouton-secondaire { background: transparent; border: var(--filet-clair); }
.page-craie .bouton-secondaire { border-color: var(--ardoise); }
.bouton-primaire:active:not(:disabled), .bouton-secondaire:active { transform: translateY(1px); }
.bouton-lien { background: none; border: 0; padding: var(--e-2) 0; text-decoration: underline; text-underline-offset: 3px; font-size: var(--t-petit); }

.formulaire { display: grid; gap: var(--e-4); }
.formulaire label, .ajout-joueur label { display: grid; gap: var(--e-1); font-size: var(--t-petit); font-weight: 500; }
input[type=text], input[type=email], input[type=password], select {
  width: 100%; min-height: 2.75rem; padding: var(--e-2) var(--e-3);
  border-radius: var(--r-champ); font-size: var(--t-corps); font-weight: 400;
}
.page-craie input, .page-craie select { background: var(--craie); border: var(--filet-clair); color: var(--ardoise); }
.page-ardoise input, .page-ardoise select { background: var(--ardoise-haute); border: 1px solid var(--ardoise-haute); color: var(--craie); }
.page-ardoise input:hover, .page-ardoise select:hover { border-color: var(--craie-sourde); }
.erreur { color: var(--alerte); font-weight: 500; }
.page-craie .erreur { color: var(--ardoise); border-left: 4px solid var(--alerte); padding-left: var(--e-3); }
.formulaire > .bouton-primaire { justify-self: start; }

/* Mot de passe : œil, jauge, correspondance (mdp.js) */
.mdp { position: relative; display: block; }
.mdp input { padding-right: 3rem; }
.mdp-oeil { position: absolute; right: var(--e-1); top: 50%; transform: translateY(-50%); background: none; border: 0; padding: var(--e-2); color: var(--craie-sourde); }
.mdp-oeil svg { display: block; fill: none; stroke: currentColor; stroke-width: 2; }
.mdp-info { font-size: var(--t-petit); font-weight: 400; color: var(--craie-sourde); min-height: 1.45em; }
.mdp-info[data-ok="0"] { color: var(--alerte); }
.mdp-jauge { display: block; height: 4px; border-radius: var(--r-pastille); background: var(--ardoise-haute); overflow: hidden; }
.mdp-jauge span { display: block; height: 100%; background: var(--minuterie); transition: width var(--duree-courte); }

/* ---------- Entrée (connexion) ---------- */
.entree {
  min-height: 100dvh; display: grid; align-content: center; gap: var(--e-7);
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  padding: var(--e-7) clamp(var(--e-4), 6vw, var(--e-8));
}
.entree-titre { display: grid; gap: var(--e-4); align-content: center; max-width: 34rem; }
.entree-titre .marque { color: var(--minuterie); font-size: var(--t-intertitre); }
.entree-titre h1 { font-size: var(--t-titre); }
.entree-titre p:last-child { color: var(--craie-sourde); }
.entree-forms { display: grid; gap: var(--e-4); align-content: start; max-width: 24rem; width: 100%; }
.onglets { display: flex; gap: var(--e-5); border-bottom: var(--filet); }
.onglets a { padding: var(--e-2) 0; text-decoration: none; color: var(--craie-sourde); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.onglets a[aria-selected="true"] { color: var(--craie); border-bottom-color: var(--minuterie); }
@media (max-width: 760px) {
  .entree { grid-template-columns: 1fr; align-content: start; gap: var(--e-6); padding: var(--e-6) var(--e-4); }
}

/* ---------- Pages animateur ---------- */
.barre { display: flex; justify-content: space-between; align-items: center; gap: var(--e-4); padding: var(--e-3) clamp(var(--e-4), 4vw, var(--e-7)); border-bottom: var(--filet-clair); }
.barre-compte { display: flex; align-items: center; gap: var(--e-4); font-size: var(--t-petit); }
.contenu { padding: var(--e-6) clamp(var(--e-4), 4vw, var(--e-7)); max-width: var(--largeur-contenu); display: grid; gap: var(--e-5); }
.contenu-etroit { max-width: var(--largeur-etroite); }
.contenu-tete { display: flex; justify-content: space-between; align-items: center; gap: var(--e-4); flex-wrap: wrap; }
.liste-parties { list-style: none; margin: 0; padding: 0; border-top: var(--filet-clair); }
.liste-parties a {
  display: grid; grid-template-columns: 1fr auto; gap: var(--e-1) var(--e-4);
  padding: var(--e-4) 0; border-bottom: var(--filet-clair); text-decoration: none;
}
.liste-parties a:hover .lp-nom { text-decoration: underline; text-underline-offset: 3px; }
.lp-nom { font-weight: 600; }
.lp-meta { grid-column: 1; font-size: var(--t-petit); color: var(--ardoise-haute); }
.lp-statut { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: var(--t-petit); font-weight: 500; }
.lp-question, .lp-correction { padding: var(--e-1) var(--e-3); border-radius: var(--r-pastille); background: var(--minuterie); }

.rangee { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-4); }
.participants { border: 0; padding: 0; margin: 0; display: grid; gap: var(--e-3); }
.participants legend { font-weight: 600; font-size: var(--t-intertitre); padding: 0; margin-bottom: var(--e-3); }
.participants ol { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-3); counter-reset: j; }
.joueur { display: grid; grid-template-columns: 1.6fr 1fr auto; gap: var(--e-3); align-items: end; }
.bouton-retirer { width: 2.75rem; height: 2.75rem; display: grid; place-items: center; border: 0; background: none; border-radius: var(--r-champ); color: var(--ardoise); }
.bouton-retirer:hover { background: var(--craie-sourde); }
.participants .bouton-secondaire { justify-self: start; }
@media (max-width: 480px) {
  .joueur { grid-template-columns: 1fr auto; }
  .joueur label:nth-child(2) { grid-column: 1; }
  .joueur .bouton-retirer { grid-row: 1; grid-column: 2; }
}

/* ---------- Minuterie : le geste ---------- */
.minuterie { position: fixed; top: 0; left: 0; right: 0; z-index: 5; height: var(--hauteur-minuterie); background: var(--ardoise-haute); }
.minuterie-barre { height: 100%; width: 100%; background: var(--minuterie); transform-origin: left; }
.minuterie-etiquettes { position: absolute; top: 100%; left: 0; right: 0; }
.minuterie-etiquette {
  position: absolute; top: var(--e-1); transform: translateX(-100%);
  padding: var(--e-1) var(--e-2); border-left: 2px solid var(--minuterie);
  font-size: var(--t-petit); font-weight: 600; color: var(--minuterie); white-space: nowrap;
}


/* ---------- Écran commun ---------- */
.ecran { display: grid; grid-template-rows: auto 1fr auto; min-height: 100dvh; }
.ecran-tete {
  display: flex; align-items: baseline; gap: var(--e-5); flex-wrap: wrap;
  padding: calc(var(--hauteur-minuterie) + var(--e-6)) clamp(var(--e-4), 4vw, var(--e-8)) var(--e-4);
  color: var(--craie-sourde); font-size: var(--t-corps);
}
.ecran-titre { flex: 1; }
.ecran-titre .marque { color: var(--craie); }
.ecran-compteur { font-weight: 600; color: var(--craie); font-variant-numeric: tabular-nums; }
.ecran-corps { padding: var(--e-4) clamp(var(--e-4), 4vw, var(--e-8)) var(--e-6); display: grid; align-content: start; }

/* Salle d'attente */
#vue-attente { display: grid; gap: var(--e-6); }
.attente-tete { display: flex; justify-content: space-between; align-items: center; gap: var(--e-4); flex-wrap: wrap; }
.grille-qr { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--taille-qr), 1fr)); gap: var(--e-6) var(--e-5); }
.qr { display: grid; gap: var(--e-2); justify-items: start; position: relative; }
.qr img { width: var(--taille-qr); height: var(--taille-qr); max-width: 100%; background: var(--craie); border-radius: var(--r-champ); display: block; }
.qr-pseudo { font-weight: 600; font-size: var(--t-intertitre); line-height: 1.3; overflow-wrap: anywhere; }
.qr-etat { font-size: var(--t-petit); color: var(--craie-sourde); display: flex; align-items: center; gap: var(--e-2); }
.qr-etat::before { content: ""; width: var(--pastille); height: var(--pastille); border-radius: var(--r-pastille); border: 2px solid var(--craie-sourde); }
.qr.connecte img { opacity: 0.25; }
.qr.connecte .qr-etat { color: var(--craie); }
.qr.connecte .qr-etat::before { background: var(--minuterie); border-color: var(--minuterie); }
.qr-retirer { position: absolute; top: calc(-1 * var(--e-2)); left: calc(var(--taille-qr) - var(--e-5)); width: 2rem; height: 2rem; border-radius: var(--r-pastille); border: 0; background: var(--ardoise-haute); color: var(--craie); display: grid; place-items: center; }
.qr-retirer svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.ajout-joueur { display: grid; justify-content: start; grid-template-columns: minmax(0, 14rem) minmax(0, 10rem) auto; gap: var(--e-3); align-items: end; padding-top: var(--e-5); border-top: var(--filet); }
@media (max-width: 600px) { .ajout-joueur { grid-template-columns: 1fr 1fr; } .ajout-joueur button { grid-column: 1 / -1; justify-self: start; } }

/* Question */
#vue-question { display: grid; gap: var(--e-6); align-content: start; padding-top: var(--e-5); }
.question { font-size: var(--t-question); line-height: var(--lh-serre); letter-spacing: -0.015em; font-weight: 600; max-width: var(--largeur-question); white-space: pre-line; text-wrap: balance; }
.reponses { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-4); max-width: var(--largeur-question); }
.reponse {
  display: grid; grid-template-columns: auto 1fr; gap: var(--e-2) var(--e-4); align-items: baseline;
  padding: var(--e-4) var(--e-5); border-radius: var(--r-reponse); background: var(--ardoise-haute);
  font-size: var(--t-reponse); line-height: 1.25; transition: opacity var(--duree-courte);
}
.reponse-lettre { font-weight: 600; color: var(--craie-sourde); }
.reponse-qui { grid-column: 2; font-size: var(--t-petit); color: var(--ardoise); font-weight: 500; min-height: 1.45em; }
.correction .reponse:not(.bonne) :is(.reponse-lettre, .reponse-texte) { opacity: 0.35; }
.correction .reponse.bonne { opacity: 1; background: var(--minuterie); color: var(--ardoise); }
.correction .reponse.bonne .reponse-lettre { color: var(--ardoise); }
.correction .reponse:not(.bonne) .reponse-qui { color: var(--craie); }
.pourquoi { max-width: var(--largeur-question); font-size: var(--t-intertitre); color: var(--craie-sourde); }
.bouton-passer { justify-self: start; color: var(--craie-sourde); }

/* Bande des participants */
.bande { border-top: var(--filet); padding: var(--e-4) clamp(var(--e-4), 4vw, var(--e-8)); }
.bande ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--e-3) var(--e-5); }
.bande li { display: flex; align-items: center; gap: var(--e-2); color: var(--craie-sourde); }
.bande li::before { content: ""; width: var(--pastille); height: var(--pastille); border-radius: var(--r-pastille); border: 2px solid var(--craie-sourde); }
.bande li.a-agi { color: var(--craie); }
.bande li.a-agi::before { background: var(--craie); border-color: var(--craie); }
.bande li.juste { color: var(--craie); }
.bande li.juste::before { background: var(--minuterie); border-color: var(--minuterie); }
.bande li.absent { opacity: 0.45; }
.bande .mention { font-size: var(--t-petit); }

/* Classement */
#vue-fin { display: grid; gap: var(--e-5); align-content: start; max-width: var(--largeur-contenu); }
.classement { list-style: none; margin: 0; padding: 0; border-top: var(--filet); }
.classement li { display: grid; grid-template-columns: 3rem 1fr auto auto; gap: var(--e-4); align-items: baseline; padding: var(--e-4) 0; border-bottom: var(--filet); font-size: var(--t-intertitre); }
.cl-rang { color: var(--craie-sourde); font-variant-numeric: tabular-nums; }
.cl-pseudo { font-weight: 600; overflow-wrap: anywhere; }
.cl-detail { font-size: var(--t-petit); color: var(--craie-sourde); }
.cl-pct { font-weight: 600; font-variant-numeric: tabular-nums; }
.classement li:first-child .cl-pct { color: var(--minuterie); }
.fin-actions { display: flex; gap: var(--e-3); flex-wrap: wrap; }
@media (max-width: 600px) { .classement li { grid-template-columns: 2rem 1fr auto; } .cl-detail { grid-column: 2; grid-row: 2; } }

/* ---------- Téléphone ---------- */
.tel-page { min-height: 100dvh; }
.tel { min-height: 100dvh; display: grid; grid-template-rows: auto 1fr auto; gap: var(--e-5); padding: calc(var(--hauteur-minuterie) + var(--e-4)) var(--e-4) calc(var(--e-4) + env(safe-area-inset-bottom)); max-width: 32rem; margin: 0 auto; }
.tel-tete { display: flex; justify-content: space-between; align-items: baseline; gap: var(--e-3); }
.tel-pseudo { font-weight: 600; overflow-wrap: anywhere; }
.tel-compteur { font-size: var(--t-petit); color: var(--craie-sourde); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tel-message { align-self: center; display: grid; gap: var(--e-3); }
.tel-message p { color: var(--craie-sourde); }
.tel-message .gros { font-size: var(--t-titre); font-weight: 600; color: var(--craie); }
#vue-question { align-content: start; }
.tel-question { font-size: var(--t-intertitre); line-height: 1.35; font-weight: 500; white-space: pre-line; text-wrap: balance; }
.tel-reponses { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-3); }
.tel-reponses button {
  width: 100%; min-height: var(--hauteur-reponse-tel); display: grid; grid-template-columns: 2rem 1fr; align-items: center; gap: var(--e-3);
  padding: var(--e-3) var(--e-4); border-radius: var(--r-reponse); border: 2px solid var(--ardoise-haute);
  background: var(--ardoise-haute); text-align: left; font-size: var(--t-corps); font-weight: 500;
}
.tel-reponses button:disabled { cursor: default; }
.tel-reponses .lettre { font-weight: 600; color: var(--craie-sourde); }
.tel-reponses .choisie { border-color: var(--craie); }
.tel-reponses.verrou button:not(.choisie):not(.bonne) { opacity: 0.4; }
.tel-reponses .bonne { background: var(--minuterie); border-color: var(--minuterie); color: var(--ardoise); }
.tel-reponses .bonne .lettre { color: var(--ardoise); }
.tel-etat { font-weight: 500; min-height: 1.55em; }
.tel-etat.juste { color: var(--minuterie); }
.tel-atouts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-3); }
.atout {
  display: flex; align-items: center; justify-content: center; gap: var(--e-2);
  min-height: 3.25rem; padding: 0 var(--e-2); border-radius: var(--r-champ); border: var(--filet-clair); background: transparent; font-weight: 500; white-space: nowrap;
}
.atout svg { flex: none; }
.atout:disabled { opacity: 0.35; cursor: not-allowed; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}