/* Quiz by Marjo — styles des quatre pages */

@font-face { font-family: 'Titan One'; src: url('fonts/titan-one.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Rubik'; src: url('fonts/rubik.woff2') format('woff2'); font-weight: 300 900; font-display: swap; }

:root {
  --nuit: #24103d;
  --enseigne: #3d1c66;
  --enseigne-claire: #57298f;
  --ketchup: #e3261b;
  --ketchup-fonce: #9c130b;
  --mayo: #ffe487;
  --mayo-fonce: #5c3f00;
  --pain: #f6a921;
  --cornichon: #96d455;
  --cornichon-fonce: #173408;
  --sel: #fff8ec;
  --titre: 'Titan One', 'Arial Rounded MT Bold', 'Arial Black', sans-serif;
  --texte: 'Rubik', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--nuit);
  color: var(--sel);
  font-family: var(--texte);
  line-height: 1.35;
}
h1, h2, h3, p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
img { max-width: 100%; display: block; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--pain); outline-offset: 2px; }

.enseigne {
  font-family: var(--titre);
  font-weight: 400;
  color: var(--mayo);
  text-shadow: 0.07em 0.07em 0 var(--ketchup);
  line-height: 1;
  letter-spacing: 0.01em;
}

.lien {
  position: fixed; left: 50%; bottom: 12px; transform: translateX(-50%);
  background: var(--sel); color: var(--nuit); font-weight: 600;
  padding: 8px 14px; border-radius: 999px; font-size: 14px; z-index: 50;
  box-shadow: 0 4px 0 rgba(0, 0, 0, .35);
}

/* ============================================================
   Écran projeté
   ============================================================ */

html.ecran { font-size: min(1.25vw, 2.22vh); height: 100%; }
.ecran body {
  height: 100%; overflow: hidden; display: flex; flex-direction: column;
  background:
    repeating-conic-gradient(from 0deg at 50% 118%, rgba(255, 255, 255, .035) 0deg 6deg, transparent 6deg 12deg),
    radial-gradient(120% 90% at 50% 110%, var(--enseigne-claire) 0%, var(--nuit) 62%);
}
.ecran body.repos { cursor: none; }

.barre { display: flex; align-items: stretch; height: 6.2rem; flex: none; }
.barre-theme { flex: 1; min-width: 0; display: flex; align-items: center; padding: 0 2.4rem; }
.manche { font-family: var(--titre); font-size: 2.3rem; color: var(--pain); line-height: 1.05; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tuiles { display: flex; }
.tuile { display: flex; align-items: center; gap: 1rem; padding: 0 1.8rem 0 3.4rem; margin-left: -1.7rem; clip-path: polygon(1.9rem 0, 100% 0, 100% 100%, 0 100%); }
.tuile-nom { font-family: var(--titre); font-size: 1.7rem; white-space: nowrap; }
.tuile.tete .tuile-nom::before { content: '★ '; }
.tuile-pts { font-family: var(--titre); font-size: 3.8rem; line-height: 1; min-width: 1.2em; text-align: center; }
.tuile-pts.saute { animation: saute .5s ease; }
@keyframes saute { 40% { transform: scale(1.35); } }

.scene { flex: 1; min-height: 0; padding: 2rem 3.2rem 2.4rem; display: flex; flex-direction: column; justify-content: center; }

/* Question */
.q { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); gap: 3rem; align-items: center; min-height: 0; flex: 1; }
.q.avec-photo { grid-template-columns: minmax(0, 44%) minmax(0, 1fr); }
.q-corps { display: flex; flex-direction: column; gap: 1.4rem; min-width: 0; }
.q:not(.avec-photo) .q-corps { max-width: 62rem; margin: 0 auto; width: 100%; }
.q-texte { font-weight: 600; line-height: 1.14; text-wrap: balance; }
.q-texte.t0 { font-size: 4.6rem; }
.q-texte.t1 { font-size: 3.7rem; }
.q-texte.t2 { font-size: 3rem; }
.q-texte.t3 { font-size: 2.3rem; }
.q-aide { font-size: 1.5rem; opacity: .8; font-weight: 500; }
.q.avec-photo .q-texte.t0, .q.avec-photo .q-texte.t1 { font-size: 3rem; }
.q.avec-photo .q-texte.t2 { font-size: 2.5rem; }
.q.avec-photo .q-texte.t3 { font-size: 2.1rem; }
.q.avec-photo .option { font-size: 1.6rem; padding: .65rem 1rem; }
.q.avec-photo .option-l { width: 2.5rem; height: 2.5rem; font-size: 1.4rem; }

.photo { justify-self: center; background: var(--sel); padding: .7rem; border-radius: .5rem; transform: rotate(-1.3deg); box-shadow: 0 1.1rem 0 rgba(0, 0, 0, .28); max-width: 100%; }
.photo-vue { overflow: hidden; border-radius: .2rem; background: #000; }
.photo img, .photo video { max-height: calc(100vh - 13rem); max-width: 100%; width: auto; height: auto; display: block; }
.photo.floue img { filter: blur(calc(var(--flou, 0) * 1vmin)); transform: scale(1.08); }
.photo.floue.nette img { transition: filter .6s ease; }

.options { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
.options.colonne { grid-template-columns: 1fr; }
.option { display: flex; align-items: center; gap: 1rem; background: var(--enseigne); border-radius: 1rem; padding: .85rem 1.2rem; font-size: 1.9rem; font-weight: 600; line-height: 1.15; min-width: 0; }
.option-l { flex: none; width: 3rem; height: 3rem; border-radius: 50%; display: grid; place-items: center; background: var(--pain); color: var(--nuit); font-family: var(--titre); font-size: 1.7rem; }
.option-nb { margin-left: auto; flex: none; font-size: 1.15rem; font-weight: 500; opacity: .85; padding-left: .8rem; white-space: nowrap; }
.option.bonne { background: var(--cornichon); color: var(--cornichon-fonce); }
.option.bonne .option-l { background: var(--cornichon-fonce); color: var(--cornichon); }
.option.autre { opacity: .4; }
.option.cachee { visibility: hidden; }
.option.apparait { animation: apparait .45s cubic-bezier(.2, .9, .3, 1.25) both; }
@keyframes apparait { from { opacity: 0; transform: translateY(1rem) scale(.9); } }
@keyframes fondu { from { opacity: 0; } }

.options.rangee { display: flex; gap: 1.2rem; }
.options.rangee .option { flex: 1; flex-direction: column; justify-content: center; text-align: center; gap: .4rem; padding: 1.8rem 1rem; font-family: var(--titre); font-weight: 400; font-size: 2.6rem; background: var(--enseigne-claire); }
.options.rangee .option.bonne { background: var(--cornichon); color: var(--cornichon-fonce); }
.options.rangee .option-l { display: none; }
.options.rangee .option-nb { margin: 0; padding: 0; font-family: var(--texte); }
.q.avec-photo .options.rangee .option { font-size: 2rem; padding: 1.2rem .8rem; }
.anecdote { font-size: 1.55rem; font-weight: 500; line-height: 1.3; border-left: .35rem solid var(--pain); padding: .15rem 0 .15rem 1.2rem; text-wrap: pretty; }

.chrono { display: flex; align-items: center; gap: 1.2rem; }
.chrono-sec { font-family: var(--titre); font-size: 3.4rem; line-height: 1; min-width: 2ch; text-align: right; color: var(--pain); }
.chrono-barre { flex: 1; height: 1.1rem; border-radius: 1rem; background: var(--enseigne); overflow: hidden; }
.chrono-barre i { display: block; height: 100%; background: var(--pain); transform-origin: left center; border-radius: 1rem; }
.chrono.urgent .chrono-sec { color: var(--ketchup); }
.chrono.urgent .chrono-barre i { background: var(--ketchup); }

.compte { display: flex; gap: .8rem; flex-wrap: wrap; }
.pastille { display: inline-flex; align-items: center; gap: .5rem; padding: .35rem 1rem; border-radius: 999px; font-size: 1.25rem; font-weight: 600; }
.pastille.neutre { background: var(--enseigne); }

.bilan { display: grid; gap: .55rem; }
.bilan-ligne { display: grid; grid-template-columns: 9rem 1fr auto; align-items: center; gap: 1rem; font-size: 1.4rem; font-weight: 600; }
.bilan-piste { height: 1.9rem; background: var(--enseigne); border-radius: .6rem; overflow: hidden; }
.bilan-piste i { display: block; height: 100%; border-radius: .6rem; transition: width .9s cubic-bezier(.2, .8, .2, 1); }
.bilan-detail { font-weight: 500; white-space: nowrap; }
.gain { display: inline-block; font-family: var(--titre); padding: .15rem .8rem; border-radius: .6rem; margin-left: .6rem; }

.reponse { background: var(--sel); color: var(--nuit); border-radius: 1.2rem; padding: 1.1rem 1.6rem 1.3rem; }
.reponse small { display: block; font-size: 1.15rem; font-weight: 500; opacity: .75; margin-bottom: .2rem; }
.reponse strong { display: block; font-size: 2.7rem; font-weight: 700; line-height: 1.12; text-wrap: balance; }
.precision { font-size: 1.4rem; font-weight: 500; opacity: .9; }
.verdict { font-size: 1.7rem; font-weight: 600; display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; }

.bandeau { align-self: flex-start; font-size: 1.8rem; font-weight: 700; padding: .6rem 1.4rem; border-radius: 1rem; }

/* La main levée : le moment fort de l'écran */
.levee { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; text-align: center; pointer-events: none; animation: levee 1.9s cubic-bezier(.2, .9, .2, 1) forwards; }
.levee-nom { font-family: var(--titre); font-size: 11rem; line-height: .95; overflow-wrap: anywhere; padding: 0 2rem; }
.levee-sous { font-size: 2.6rem; font-weight: 600; margin-top: 1rem; }
@keyframes levee {
  0% { clip-path: circle(0% at 50% 50%); }
  18% { clip-path: circle(80% at 50% 50%); }
  78% { clip-path: circle(80% at 50% 50%); opacity: 1; }
  100% { clip-path: circle(80% at 50% 50%); opacity: 0; visibility: hidden; }
}

/* Cartons de manche */
.carton { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 2rem; max-width: 64rem; margin: 0 auto; }
.carton h1 { font-size: 8.5rem; }
.carton p { font-size: 2.2rem; font-weight: 500; line-height: 1.25; text-wrap: balance; }
.q.avec-photo .carton { text-align: left; align-items: flex-start; }
.q.avec-photo .carton h1 { font-size: 5.5rem; }

/* Accueil */
.accueil { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); grid-template-rows: minmax(0, 1fr); gap: 3.5rem; align-items: center; flex: 1; min-height: 0; }
.accueil h1 { font-size: 5.6rem; text-wrap: balance; }
.accueil-entree { display: flex; align-items: center; gap: 2rem; margin-top: 2.6rem; }
.qr { background: var(--sel); padding: .9rem; border-radius: 1rem; flex: none; width: 15rem; height: 15rem; }
.qr svg, .qr img { width: 100%; height: 100%; display: block; }
.accueil-texte { font-size: 1.9rem; font-weight: 600; line-height: 1.2; }
.accueil-url { font-size: 1.35rem; font-weight: 500; margin-top: .8rem; opacity: .85; overflow-wrap: anywhere; }
.equipes { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: minmax(0, 1fr); gap: 1.2rem; align-self: stretch; min-height: 0; }
.equipe { border-radius: 1.4rem; padding: 1.3rem 1.4rem; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.equipe h2 { font-family: var(--titre); font-weight: 400; font-size: 2.6rem; line-height: 1; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .3rem 1rem; }
.equipe h2 span { font-size: 1.4rem; font-family: var(--texte); font-weight: 600; white-space: nowrap; }
.equipe ul { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; align-content: flex-start; }
.equipe li { background: rgba(0, 0, 0, .16); padding: .25rem .8rem; border-radius: 999px; font-size: 1.3rem; font-weight: 600; }
.equipe.dense ul { gap: .4rem; }
.equipe.dense li { font-size: 1.1rem; padding: .18rem .65rem; }
.equipe.tres-dense ul { gap: .3rem; }
.equipe.tres-dense li { font-size: .92rem; padding: .12rem .55rem; }
.equipe .vide { font-size: 1.3rem; font-weight: 500; opacity: .85; margin-top: 1rem; }

/* Défi final */
.defi { display: flex; flex-direction: column; gap: 1.4rem; flex: 1; min-height: 0; justify-content: center; }
.defi-lecture { text-align: center; max-width: 60rem; margin: 0 auto; }
.defi-lecture .num { font-family: var(--titre); font-size: 2.4rem; color: var(--pain); }
.defi-lecture .txt { font-size: 4rem; font-weight: 600; line-height: 1.12; margin-top: 1rem; text-wrap: balance; }
.defi-liste { display: grid; grid-template-columns: 1fr 1fr; grid-auto-flow: column; gap: .7rem 1.6rem; }
.ligne { display: flex; align-items: center; gap: 1rem; background: var(--enseigne); border-radius: .9rem; padding: .55rem 1rem; min-height: 4.6rem; border: .22rem solid transparent; min-width: 0; }
.ligne-n { flex: none; width: 2.6rem; height: 2.6rem; border-radius: 50%; display: grid; place-items: center; font-family: var(--titre); font-size: 1.4rem; background: var(--enseigne-claire); }
.ligne-corps { min-width: 0; flex: 1; }
.ligne-q { font-size: 1.05rem; font-weight: 500; opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ligne-r { font-size: 1.55rem; font-weight: 700; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ligne-signe { flex: none; font-family: var(--titre); font-size: 2rem; width: 2rem; text-align: center; }
.ligne.attente .ligne-r { opacity: .45; font-weight: 500; }
.ligne.ok { border-color: var(--cornichon); }
.ligne.ok .ligne-signe { color: var(--cornichon); }
.ligne.ko { border-color: var(--ketchup); }
.ligne.ko .ligne-signe { color: #ff8a82; }
/* Manche Menus */
.menus { display: flex; flex-direction: column; align-items: center; gap: 1.6rem; width: 100%; max-width: 76rem; margin: 0 auto; text-align: center; }
.menus h1 { font-size: 5.5rem; }
.menus .bandeau { align-self: center; }
.menus-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1.2rem; width: 100%; }
.menus-grille.serree { grid-template-columns: repeat(3, 1fr); }
.menu-carte { background: var(--enseigne); border-radius: 1.2rem; padding: 1.6rem 1.2rem; min-height: 9rem; display: flex; flex-direction: column; justify-content: center; gap: .6rem; border: .25rem solid var(--enseigne-claire); }
.menu-carte-titre { font-family: var(--titre); font-size: 2.4rem; line-height: 1.1; color: var(--mayo); text-wrap: balance; }
.menu-carte.pris { opacity: .55; border-color: var(--c); background: var(--enseigne); color: inherit; }
.menu-carte.pris .menu-carte-titre { color: inherit; text-decoration: line-through; text-decoration-thickness: .15rem; }
.menu-carte-pris { font-size: 1.3rem; font-weight: 600; }
.menu-jeu { display: flex; flex-direction: column; gap: 1.6rem; width: 100%; max-width: 70rem; margin: 0 auto; }
.menu-jeu-tete { display: flex; align-items: center; gap: 1.2rem; font-size: 1.6rem; font-weight: 600; opacity: .95; flex-wrap: wrap; }
.menu-reponse.ok { background: var(--cornichon); color: var(--cornichon-fonce); }
.menu-reponse.ko { background: var(--sel); }
.menu-suivi { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.menu-pastille { width: 3rem; height: 3rem; border-radius: 50%; display: grid; place-items: center; background: var(--enseigne); font-family: var(--titre); font-size: 1.3rem; }
.menu-pastille.ici { outline: .2rem solid var(--pain); }
.menu-pastille.ok { background: var(--cornichon); color: var(--cornichon-fonce); }
.menu-pastille.ko { background: var(--ketchup); color: #fff; }
.menu-suivi .gain { margin-left: .8rem; font-size: 1.6rem; }
.menu-bilan.eq { display: grid; grid-template-columns: 12rem 1fr auto; gap: 1.4rem; align-items: center; background: var(--enseigne); color: inherit; border-radius: 1rem; padding: .9rem 1.4rem; border-left: .8rem solid var(--c); font-size: 1.8rem; }
.menu-bilan-eq { font-family: var(--titre); font-size: 2rem; }
.menu-bilan-titre { font-weight: 700; }
.menu-bilan-titre small { display: block; font-size: 1.2rem; font-weight: 500; opacity: .8; }
.menu-bilan-score { font-family: var(--titre); font-size: 2rem; white-space: nowrap; }
.defi-total { font-family: var(--titre); font-size: 3rem; color: var(--pain); text-align: center; }

/* Classement */
.classement { display: grid; gap: .9rem; width: min(62rem, 100%); margin: 0 auto; }
.classement h1 { font-size: 4.6rem; text-align: center; margin-bottom: 1.6rem; text-wrap: balance; }
.rang { display: grid; grid-template-columns: 3.2rem 1fr; align-items: center; gap: 1.2rem; }
.rang-n { font-family: var(--titre); font-size: 2.6rem; color: var(--pain); text-align: right; }
.rang-barre { border-radius: 1rem; padding: .7rem 1.4rem; display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; font-family: var(--titre); font-size: 2.2rem; white-space: nowrap; transition: width 1s cubic-bezier(.2, .8, .2, 1); }

/* Fin */
.fin { text-align: center; margin: 0 auto; }
.fin { width: 100%; }
.fin h1 { font-size: 6.4rem; text-wrap: balance; margin-bottom: 2.4rem; }
.fin p { font-size: 2.6rem; font-weight: 600; margin-top: 2rem; }
#confettis { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 15; }

.demarrer {
  position: fixed; inset: 0; z-index: 40; border: 0; background: rgba(36, 16, 61, .93); color: var(--sel);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.2rem; text-align: center; padding: 2rem;
}
.demarrer strong { font-family: var(--titre); font-weight: 400; font-size: 4rem; color: var(--mayo); }
.demarrer span { font-size: 1.5rem; font-weight: 500; max-width: 40rem; }

@media (prefers-reduced-motion: reduce) {
  .levee { animation-duration: .01s; animation-delay: 1.6s; animation-fill-mode: both; }
  .score-pts.saute { animation: none; }
  .bilan-piste i { transition: none; }
  .option.apparait { animation: fondu .2s ease both; }
}

/* ============================================================
   Boutons et champs communs (téléphone, régie, éditeur)
   ============================================================ */

.btn {
  border: 0; border-radius: 14px; padding: 14px 18px; font-weight: 700; font-size: 17px; line-height: 1.15;
  background: var(--enseigne-claire); color: var(--sel); box-shadow: 0 4px 0 rgba(0, 0, 0, .3);
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0, 0, 0, .3); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.btn.principal { background: var(--pain); color: var(--nuit); }
.btn.bon { background: var(--cornichon); color: var(--cornichon-fonce); }
.btn.mauvais { background: var(--ketchup); color: #fff; }
.btn.discret { background: transparent; box-shadow: none; border: 2px solid var(--enseigne-claire); }
.btn.petit { padding: 8px 12px; font-size: 14px; border-radius: 10px; }
.btn.large { width: 100%; }
a.btn { display: block; text-align: center; text-decoration: none; }

.champ { display: grid; gap: 6px; }
.champ > span, .champ > label { font-size: 14px; font-weight: 600; }
.champ input[type=text], .champ input[type=number], .champ input[type=password], .champ textarea, .champ select {
  width: 100%; background: var(--nuit); border: 2px solid var(--enseigne-claire); border-radius: 10px; padding: 10px 12px; font-size: 16px;
}
.champ textarea { resize: vertical; min-height: 70px; }
.champ small { font-size: 13px; opacity: .75; }

/* ============================================================
   Téléphone des joueurs
   ============================================================ */

html.joueur, .joueur body { height: 100%; }
.joueur body { overscroll-behavior: none; -webkit-user-select: none; user-select: none; touch-action: manipulation; }
.joueur #app { min-height: 100%; display: flex; flex-direction: column; padding: 16px 18px calc(18px + env(safe-area-inset-bottom, 0px)); max-width: 520px; margin: 0 auto; }

.entree { display: flex; flex-direction: column; gap: 22px; flex: 1; justify-content: center; }
.entree h1 { font-size: clamp(34px, 11vw, 52px); text-wrap: balance; }
.entree input { user-select: text; -webkit-user-select: text; font-size: 20px !important; padding: 14px !important; }
.choix-equipe { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.choix-equipe.impair .btn:last-child { grid-column: 1 / -1; }
.choix-equipe .btn { padding: 22px 10px; font-family: var(--titre); font-weight: 400; font-size: 24px; display: grid; gap: 4px; }
.choix-equipe .btn small { font-family: var(--texte); font-size: 13px; font-weight: 600; }
.erreur { color: #ffb3ad; font-weight: 600; font-size: 15px; min-height: 1.3em; }

.moi { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 15px; font-weight: 600; }
.moi-nom { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.moi-nom b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.puce { width: 14px; height: 14px; border-radius: 50%; flex: none; }
.moi-scores { font-family: var(--titre); white-space: nowrap; }
.moi button { background: none; border: 0; text-decoration: underline; font-size: 14px; padding: 6px 0; opacity: .8; }

.zone { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 18px; padding: 18px 0; text-align: center; }
.zone h2 { font-family: var(--titre); font-weight: 400; font-size: clamp(30px, 9vw, 44px); line-height: 1.05; color: var(--mayo); text-wrap: balance; }
.zone p { font-size: 18px; font-weight: 500; text-wrap: balance; }
.zone .question { font-size: 19px; font-weight: 600; text-align: left; }

.buzzer {
  width: min(78vw, 56vh, 360px); aspect-ratio: 1; border-radius: 50%; margin: 0 auto; border: 0;
  font-family: var(--titre); font-size: clamp(40px, 14vw, 64px); display: grid; place-items: center;
  box-shadow: 0 14px 0 rgba(0, 0, 0, .35), inset 0 -10px 0 rgba(0, 0, 0, .18), inset 0 10px 0 rgba(255, 255, 255, .22);
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.buzzer:active { transform: translateY(10px); box-shadow: 0 4px 0 rgba(0, 0, 0, .35), inset 0 -6px 0 rgba(0, 0, 0, .18); }
.buzzer:disabled { filter: grayscale(.8) brightness(.7); transform: none; }

.reponses { display: grid; gap: 12px; }
.reponses .btn { display: flex; align-items: center; gap: 14px; text-align: left; padding: 16px; font-size: 19px; min-height: 68px; background: var(--enseigne); }
.reponses .btn .option-l { width: 40px; height: 40px; font-size: 22px; }
.reponses .btn.choisie { background: var(--pain); color: var(--nuit); }
.reponses .btn.choisie .option-l { background: var(--nuit); color: var(--pain); }
.reponses .btn:disabled { opacity: .5; }
.reponses .btn.choisie:disabled { opacity: 1; }
.reponses .btn.bonne, .reponses .btn.bonne:disabled { background: var(--cornichon); color: var(--cornichon-fonce); opacity: 1; }
.reponses .btn.bonne .option-l { background: var(--cornichon-fonce); color: var(--cornichon); }
.reponses .btn.ratee, .reponses .btn.ratee:disabled { background: var(--ketchup); color: #fff; opacity: 1; }
.mini-chrono { height: 8px; border-radius: 8px; background: var(--enseigne); overflow: hidden; }
.mini-chrono i { display: block; height: 100%; background: var(--pain); transform-origin: left center; }


/* ============================================================
   Régie
   ============================================================ */

.regie body, .editeur body { font-size: 16px; }
.regie #app { max-width: 620px; margin: 0 auto; padding: 12px 14px 40px; display: grid; gap: 14px; }
.porte { max-width: 380px; margin: 12vh auto 0; padding: 0 18px; display: grid; gap: 16px; }
.porte h1 { font-size: 40px; }

.scores { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.scores .bloc { border-radius: 14px; padding: 10px 12px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; }
.scores .bloc > div { text-align: center; }
.scores .bloc b { display: block; font-family: var(--titre); font-weight: 400; font-size: 34px; line-height: 1; }
.scores .bloc small { font-weight: 600; font-size: 13px; }
.scores .bloc button { width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, .2); font-size: 24px; font-weight: 700; line-height: 1; touch-action: manipulation; }

.fiche { background: var(--enseigne); border-radius: 16px; padding: 14px 16px; display: grid; gap: 10px; }
.fiche-tete { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; font-weight: 600; color: var(--pain); }
.fiche-q { font-size: 20px; font-weight: 600; line-height: 1.2; }
.fiche-rep { background: var(--sel); color: var(--nuit); border-radius: 10px; padding: 8px 12px; font-weight: 700; font-size: 18px; }
.fiche-rep small { display: block; font-weight: 500; font-size: 13px; opacity: .75; }
.fiche ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: 16px; }
.fiche ol li.bonne { font-weight: 700; color: var(--cornichon); }
.fiche img { max-height: 140px; border-radius: 8px; }
.etat { font-size: 17px; font-weight: 600; text-align: center; padding: 4px 0; min-height: 1.5em; }
.actions { display: grid; gap: 10px; }
.actions .btn.geant { padding: 22px 18px; font-size: 21px; }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.suite { font-size: 14px; opacity: .8; text-align: right; margin-top: -4px; }
.regie details { background: var(--enseigne); border-radius: 14px; padding: 4px 14px; }
.regie summary { font-weight: 700; padding: 10px 0; cursor: pointer; }
.regie details .contenu { display: grid; gap: 8px; padding: 4px 0 14px; }
.bilan-serveur { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 14px; }
.bilan-serveur li { display: grid; grid-template-columns: 1.4em 1fr; gap: 4px; background: var(--nuit); border-radius: 10px; padding: 8px 10px; }
.bilan-serveur li.oui span { color: var(--cornichon); font-weight: 700; }
.bilan-serveur li.non { outline: 2px solid var(--ketchup); }
.bilan-serveur li.non span { color: #ff8a82; font-weight: 700; }
.plan { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.plan button { width: 100%; text-align: left; background: var(--nuit); border: 2px solid transparent; border-radius: 10px; padding: 8px 10px; font-size: 14px; display: grid; grid-template-columns: 2em 1fr; gap: 6px; }
.plan button.ici { border-color: var(--pain); }
.plan button span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plan .entete button { background: var(--enseigne-claire); font-weight: 700; }
.defi-regie { display: grid; gap: 8px; }
.defi-regie .rang-b { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center; background: var(--nuit); border-radius: 10px; padding: 8px 10px; font-size: 15px; }
.defi-regie .rang-b b { display: block; color: var(--cornichon); }
.defi-regie .rang-b.fait-1 { outline: 2px solid var(--cornichon); }
.defi-regie .rang-b.fait-0 { outline: 2px solid var(--ketchup); }
.defi-regie .btn { padding: 10px 14px; }
.defi-regie .rang-b.ici { outline: 2px solid var(--pain); }
.defi-regie .rang-b:has(> span:only-child) { grid-template-columns: 1fr; }
.menus-regie { display: grid; gap: 8px; }
.menu-regie { display: grid; gap: 2px; text-align: left; background: var(--nuit); border: 2px solid var(--enseigne-claire); border-radius: 12px; padding: 12px 14px; font-weight: 700; font-size: 17px; cursor: pointer; }
.menu-regie small { font-weight: 500; font-size: 14px; opacity: .8; }
.menu-regie.pris { opacity: .5; cursor: default; }
.btn.choisi { outline: 3px solid var(--sel); outline-offset: 2px; }

/* ============================================================
   Éditeur
   ============================================================ */

.editeur #app { max-width: 1180px; margin: 0 auto; padding: 14px 16px 60px; }
.ed-tete { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; position: sticky; top: 0; background: var(--nuit); padding: 10px 0 12px; z-index: 5; }
.ed-tete .champ { flex: 1 1 260px; }
.ed-etat { font-size: 14px; font-weight: 600; min-width: 9em; text-align: right; }
.ed-corps { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 18px; align-items: start; margin-top: 6px; }
@media (max-width: 820px) { .ed-corps { grid-template-columns: 1fr; } }
.ed-liste { display: grid; gap: 6px; }
.ed-item { display: grid; grid-template-columns: 2em 1fr auto; gap: 8px; align-items: center; background: var(--enseigne); border: 2px solid transparent; border-radius: 12px; padding: 8px 10px; text-align: left; width: 100%; }
.ed-item.actif { border-color: var(--pain); }
.ed-item.entete { background: var(--enseigne-claire); }
.ed-item .n { font-family: var(--titre); opacity: .7; }
.ed-item .l { min-width: 0; }
.ed-item .l small { display: block; font-size: 12px; font-weight: 600; color: var(--pain); }
.ed-item .l span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
.ed-item img { width: 38px; height: 38px; object-fit: cover; border-radius: 6px; }
.ed-ajout { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ed-form { background: var(--enseigne); border-radius: 16px; padding: 18px; display: grid; gap: 14px; }
#ed-detail { position: sticky; top: 92px; max-height: calc(100vh - 108px); overflow: auto; border-radius: 16px; }
@media (max-width: 820px) { #ed-detail { position: static; max-height: none; overflow: visible; } }
.ed-form h2 { font-family: var(--titre); font-weight: 400; font-size: 24px; color: var(--mayo); }
.ed-outils { display: flex; flex-wrap: wrap; gap: 8px; }
.ed-options { display: grid; gap: 8px; }
.ed-option { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; }
.ed-option input[type=radio] { width: 22px; height: 22px; accent-color: var(--cornichon); }
.ed-rang { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ed-photo { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.ed-photo img { width: 110px; height: 82px; object-fit: cover; border-radius: 8px; background: #000; }
.ed-coche { display: flex; gap: 10px; align-items: center; font-size: 15px; font-weight: 500; }
.ed-coche input { width: 20px; height: 20px; accent-color: var(--pain); }
.ed-defi { display: grid; gap: 8px; }
.ed-defi .rang-b { display: grid; grid-template-columns: 1.6em 1.3fr 1fr; gap: 8px; align-items: center; }
.ed-vide { opacity: .8; padding: 30px 10px; text-align: center; }

dialog.phototheque { border: 0; border-radius: 18px; background: var(--enseigne); color: var(--sel); width: min(960px, 94vw); max-height: 88vh; padding: 0; }
dialog.phototheque::backdrop { background: rgba(10, 4, 20, .75); }
.ph-tete { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 16px 18px; position: sticky; top: 0; background: var(--enseigne); }
.ph-tete h2 { font-family: var(--titre); font-weight: 400; font-size: 24px; color: var(--mayo); }
.ph-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; padding: 0 18px 18px; }
.ph-vignette { position: relative; }
.ph-vignette button.choisir { display: block; width: 100%; padding: 0; border: 3px solid transparent; border-radius: 10px; overflow: hidden; background: #000; }
.ph-vignette button.choisir:hover, .ph-vignette button.choisir:focus-visible { border-color: var(--pain); }
.ph-vignette img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.ph-vignette .suppr { position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, .7); color: #fff; font-weight: 700; line-height: 1; }
.ph-info { padding: 0 18px 14px; font-size: 14px; font-weight: 500; }

/* ============================================================
   Sons de la régie, réglages et médiathèque de l'éditeur
   ============================================================ */
.sons { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.sons li { display: grid; grid-template-columns: 1fr auto auto; gap: 6px; align-items: center; background: var(--nuit); border-radius: 10px; padding: 6px 6px 6px 12px; font-size: 14px; }
.sons li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fiche-anecdote { font-size: 15px; border-left: 3px solid var(--pain); padding-left: 10px; }
.trio { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.ed-reglages { background: var(--enseigne); border-radius: 16px; padding: 14px 18px; display: grid; gap: 12px; margin: 8px 0 14px; }
.ed-reglages summary { font-weight: 700; cursor: pointer; }
.ed-aide { font-size: 14px; opacity: .8; }
.ed-menu { background: var(--nuit); border-radius: 12px; padding: 10px 14px; }
.ed-menu summary { font-weight: 600; cursor: pointer; }
.ed-menu-corps { display: grid; gap: 12px; padding-top: 12px; }
.ed-defi .ed-menu-ligne { grid-template-columns: 1.6em 1.3fr 1fr auto; }
.ed-equipes { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.ed-equipes .champ > span { display: flex; align-items: center; gap: 8px; }
.ph-liste { list-style: none; margin: 0; padding: 0 18px 18px; display: grid; gap: 8px; }
.ph-liste li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center; background: var(--nuit); border-radius: 10px; padding: 8px 10px; }
.ph-liste audio { height: 34px; max-width: 100%; }
.ph-liste video { width: 160px; border-radius: 6px; background: #000; }
.ph-liste .nom { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ed-media { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 14px; }

/* ============================================================
   Couleurs des équipes (jusqu'à quatre)
   ============================================================ */
.eq-a { --c: #e3261b; --ct: #ffffff; }
.eq-b { --c: #ffe066; --ct: #4d3500; }
.eq-c { --c: #3db8ff; --ct: #04263d; }
.eq-d { --c: #ff8ad0; --ct: #4a0b33; }
.eq { background: var(--c); color: var(--ct); }
.bilan-ligne.eq { background: none; color: inherit; }
.bilan-ligne.eq .bilan-piste i { background: var(--c); }
.puce.eq { outline: 2px solid rgba(255, 255, 255, .5); }
.joueur body.flash { background: var(--c); color: var(--ct); }
.joueur body.flash .zone h2 { color: inherit; }
.moi-scores { color: var(--mayo); }
.scores .bloc { border-radius: 14px; }