/* ═══════════════════════════════════════════════════════════════════════════
   Prompt Masters — feuille de base, commune à toutes les pages (session S0)

   L'identité visuelle du prototype de Florent (2ISD), reprise de sa feuille de
   style : couleurs, Orbitron et Rajdhani, fond en grille, cartes, boutons,
   champs. Les composants propres à une page (buzzer, chargement « Matrix »,
   podium, écran géant, régie…) vivent dans la feuille de cette page.

   Chaque page la charge en premier :
     <link rel="stylesheet" href="assets/css/base.css">
     <link rel="stylesheet" href="assets/css/equipe.css">

   Règles :
   - aucun style en ligne : la CSP n'a pas 'unsafe-inline'. Un style qui dépend
     d'une donnée (la couleur d'une équipe, la largeur d'un chrono) passe par
     une variable posée depuis le JavaScript :
       el.style.setProperty('--couleur', equipe.couleur);
     et la feuille s'en sert : .chip-equipe { border-color: var(--couleur); } ;
   - un élément se cache par la classe .hidden (PM.afficher) ;
   - cible : Safari d'iPadOS 15 et plus, d'où les préfixes -webkit- gardés.
   ═══════════════════════════════════════════════════════════════════════════ */


/* ── 1. Polices, servies par le site ──────────────────────────────────────────
   Le réseau du lieu peut filtrer fonts.googleapis.com : sans Orbitron, le titre
   et toute l'identité s'effondrent. Rapatriées de Google Fonts le 22/10/2026
   (licence SIL Open Font License 1.1), sous-ensembles latin et latin-ext ;
   versions et empreintes dans docs/livraison/mise-en-service.md.
   Orbitron est une police variable : un seul fichier sert toutes les graisses. */

@font-face {
  font-family: 'Orbitron';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('../fonts/orbitron-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Rajdhani';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/rajdhani-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+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Rajdhani';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/rajdhani-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Rajdhani';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/rajdhani-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+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Rajdhani';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/rajdhani-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Rajdhani';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/rajdhani-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+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Rajdhani';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/rajdhani-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Rajdhani';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/rajdhani-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Rajdhani';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/rajdhani-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* ── 2. Couleurs et polices ───────────────────────────────────────────────────
   Les valeurs du prototype, au chiffre près. */

:root {
  --bg: #070a1c;
  --bg2: #0a1030;
  --scene: #05081c;                    /* fond d'une image ou d'une vidéo */
  --panel: rgba(16, 24, 64, .55);
  --line: rgba(85, 140, 255, .28);
  --grid: rgba(80, 130, 255, .07);

  --blue: #1e9bff;
  --cyan: #37e0ff;
  --violet: #b14dff;
  --magenta: #e83bff;
  --red: #ff2b3e;
  --red-hi: #ff6a78;
  --ok: #34e0a8;
  --warn: #ffb14d;
  --gold: #ffd166;

  --ink: #dde7ff;                      /* texte */
  --dim: #8fa3d8;                      /* texte secondaire */

  --police-titre: 'Orbitron', system-ui, sans-serif;
  --police-texte: 'Rajdhani', system-ui, sans-serif;
  --police-code: ui-monospace, Menlo, Consolas, monospace;

  --rayon: 14px;
  color-scheme: dark;
}


/* ── 3. Socle de la page ──────────────────────────────────────────────────────
   Le fond du prototype : deux halos et un dégradé, puis une grille fine qui
   s'efface vers les bords. Posés sur deux calques fixes derrière le contenu,
   et non en background-attachment: fixed, que Safari d'iPadOS ignore. */

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

html,
body {
  height: 100%;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--police-texte);
  font-size: 16px;
  line-height: 1.4;
  color: var(--ink);
  background: var(--bg);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}

body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

body::before {
  background:
    radial-gradient(1100px 700px at 50% -10%, rgba(60, 90, 220, .30), transparent 60%),
    radial-gradient(900px 700px at 90% 110%, rgba(180, 60, 255, .18), transparent 55%),
    linear-gradient(180deg, var(--bg), var(--bg2));
}

body::after {
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(1000px 800px at 50% 30%, #000 40%, transparent 85%);
  mask-image: radial-gradient(1000px 800px at 50% 30%, #000 40%, transparent 85%);
}

img,
video {
  max-width: 100%;
}

a {
  color: var(--cyan);
}

/* Cacher : par cette classe seulement (PM.afficher). */
.hidden {
  display: none !important;
}

/* Lu par les lecteurs d'écran, invisible à l'œil. */
.lecteur-seul {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}


/* ── 4. Mise en page ──────────────────────────────────────────────────────── */

/* La colonne centrale des pages simples (tablette, back-office, essais). */
.wrap {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
  padding: 18px 18px 40px;
}

/* L'en-tête : la marque à gauche, le reste à droite. */
.hud {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}

.hud .brand {
  font-size: 19px;
}

.hud .right {
  margin-left: auto;
  display: flex;
  gap: 8px;
  align-items: center;
}

.row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 14px;
}


/* ── 5. Typographie ───────────────────────────────────────────────────────── */

.orb {
  font-family: var(--police-titre);
}

/* La marque : PROMPT MASTERS en dégradé cyan → blanc → violet. */
.brand {
  font-family: var(--police-titre);
  font-weight: 900;
  letter-spacing: 1.5px;
  white-space: nowrap;
  color: transparent;
  background: linear-gradient(90deg, var(--cyan), #fff 40%, var(--violet));
  -webkit-background-clip: text;
  background-clip: text;
}

.brand small {
  display: block;
  font-family: var(--police-texte);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 3px;
  color: var(--dim);
  -webkit-text-fill-color: var(--dim);
}

h1 {
  font-family: var(--police-titre);
  font-weight: 900;
  font-size: 26px;
  line-height: 1.1;
  margin: 0 0 10px;
}

h1 .glow {
  color: #fff;
  text-shadow: 0 0 22px rgba(120, 170, 255, .7);
}

h2 {
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.2;
  margin: 0 0 10px;
}

/* Le surtitre : petites capitales espacées, en bleu. */
.eyebrow {
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--blue);
  margin: 0 0 8px;
}

.lead {
  color: var(--dim);
  font-size: 16px;
  line-height: 1.45;
  margin: 0 0 14px;
}

.note {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--dim);
  border-top: 1px solid rgba(120, 150, 255, .14);
  padding-top: 12px;
  margin-top: 14px;
}

.note code,
code {
  font-family: var(--police-code);
  font-size: .92em;
  color: var(--cyan);
}


/* ── 6. Cartes ────────────────────────────────────────────────────────────── */

.card {
  position: relative;
  overflow: hidden;
  padding: 20px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--rayon);
  box-shadow: 0 18px 50px -20px rgba(0, 30, 120, .7);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
}

/* Le filet lumineux en haut de chaque carte. */
.card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--blue), var(--violet), transparent);
}

.card + .card {
  margin-top: 14px;
}


/* ── 7. Boutons ───────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;                    /* cible tactile minimale */
  padding: 13px 20px;
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1px;
  line-height: 1.1;
  color: var(--ink);
  background: rgba(20, 30, 70, .5);
  border: 1px solid var(--line);
  border-radius: 11px;
  cursor: pointer;
  text-decoration: none;
  transition: border-color .18s, color .18s, filter .18s, opacity .18s;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;          /* pas de délai ni de zoom au double tap */
}

.btn:hover {
  border-color: var(--cyan);
  color: var(--cyan);
}

.btn.primary {
  color: #fff;
  background: linear-gradient(135deg, var(--blue), var(--violet));
  border-color: transparent;
  box-shadow: 0 0 26px -6px var(--violet);
}

.btn.primary:hover {
  color: #fff;
  filter: brightness(1.08);
}

.btn.ghost {
  background: transparent;
}

.btn.warn {
  color: var(--red-hi);
  border-color: rgba(255, 80, 100, .4);
}

.btn.ok {
  color: var(--ok);
  border-color: rgba(52, 224, 168, .4);
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: .4;
  cursor: not-allowed;
  filter: grayscale(.4);
}

.btn.full {
  flex: 1;
}

.btn.sm {
  min-height: 36px;
  padding: 9px 13px;
  font-size: 11px;
}

.btn.xl {
  padding: 20px 24px;
  font-size: 16px;
  border-radius: var(--rayon);
}

.btn:focus-visible,
.chip:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}


/* ── 8. Champs ────────────────────────────────────────────────────────────── */

.lbl {
  display: block;
  margin: 14px 0 7px;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--dim);
}

/* 17 px : en dessous de 16, Safari d'iPadOS zoome sur le champ touché. */
.field {
  width: 100%;
  padding: 13px 15px;
  font-family: var(--police-texte);
  font-weight: 600;
  font-size: 17px;
  color: var(--ink);
  background: rgba(8, 14, 38, .7);
  border: 1px solid var(--line);
  border-radius: 12px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

.field:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(55, 224, 255, .15);
}

.field::placeholder {
  color: rgba(143, 163, 216, .55);
  font-style: italic;
  font-weight: 500;
}

.field[aria-invalid="true"] {
  border-color: var(--red-hi);
}

textarea.field {
  min-height: 84px;
  line-height: 1.4;
  resize: vertical;
}

/* Un code à taper (code admin, code d'équipe) : chasse fixe, grand, espacé. */
.field.code {
  font-family: var(--police-titre);
  font-weight: 700;
  letter-spacing: 3px;
  text-align: center;
}


/* ── 9. Pastilles, badges, encadrés ───────────────────────────────────────── */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  font-weight: 700;
  font-size: 13px;
  color: var(--cyan);
  background: rgba(20, 30, 70, .5);
  border: 1px solid var(--line);
  border-radius: 999px;
}

.chip.sel {
  color: #fff;
  background: linear-gradient(135deg, var(--blue), var(--violet));
  border-color: transparent;
}

.chip.pick {
  cursor: pointer;
}

.chip.gold {
  color: var(--gold);
  border-color: rgba(255, 209, 102, .4);
}

/* Le badge vert « en ligne », avec son point lumineux. */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--ok);
}

.badge::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 10px var(--ok);
}

/* L'encadré d'avertissement orange, et sa variante d'erreur. */
.warnbox {
  margin: 12px 0;
  padding: 12px 14px;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.4;
  color: var(--warn);
  background: rgba(60, 40, 0, .35);
  border: 1px solid rgba(255, 177, 77, .45);
  border-radius: 12px;
}

.warnbox b {
  font-family: var(--police-titre);
  font-size: 12px;
  letter-spacing: 1.5px;
}

.warnbox.erreur {
  color: var(--red-hi);
  background: rgba(60, 0, 12, .35);
  border-color: rgba(255, 80, 100, .45);
}

/* Le sélecteur de langue FR/EN (regles-du-jeu.md §10) : des boutons .chip.pick
   dans un .langues ; la langue affichée porte .sel.
     <div class="langues" role="group" data-t-aria-label="langue.choisir">
       <button class="chip pick" data-action="langue" data-langue="fr" data-t="langue.fr"></button>
       <button class="chip pick" data-action="langue" data-langue="en" data-t="langue.en"></button>
     </div> */
.langues {
  display: inline-flex;
  gap: 6px;
}

.langues .chip {
  min-height: 32px;
  font-family: var(--police-titre);
  font-size: 11px;
  letter-spacing: 1px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  touch-action: manipulation;
}

.langues .chip:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}

/* L'indicateur de temps réel (PM.tempsReel), mode posé en data-mode :
   el.dataset.mode = 'direct' | 'connexion' | 'degrade' | 'arret'. */
.temps-reel {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--dim);
}

.temps-reel::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 10px currentColor;
}

.temps-reel[data-mode="direct"] {
  color: var(--ok);
}

.temps-reel[data-mode="connexion"] {
  color: var(--cyan);
}

.temps-reel[data-mode="degrade"] {
  color: var(--warn);
}

.temps-reel[data-mode="arret"] {
  color: var(--red-hi);
}


/* ── 10. Scènes : image ou vidéo ──────────────────────────────────────────── */

.stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  overflow: hidden;
  background: var(--scene);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.stage img,
.stage video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.stage.contain img,
.stage.contain video {
  object-fit: contain;
}

/* L'étiquette posée dans le coin d'une scène. */
.tag {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 6px 10px;
  font-family: var(--police-titre);
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--cyan);
  background: rgba(5, 8, 28, .75);
  border: 1px solid var(--line);
  border-radius: 8px;
}


/* ── 11. Chrono ───────────────────────────────────────────────────────────────
   La largeur de la barre vient du JavaScript, par une variable :
     barre.style.setProperty('--avance', '42%'); */

.timer {
  height: 8px;
  margin-top: 12px;
  overflow: hidden;
  background: rgba(120, 150, 255, .16);
  border-radius: 99px;
}

.timer i {
  display: block;
  width: var(--avance, 100%);
  height: 100%;
  background: linear-gradient(90deg, var(--violet), var(--magenta));
  transition: width .25s linear;
}

.timer.urgent i {
  background: linear-gradient(90deg, var(--red), var(--red-hi));
}


/* ── 12. Animations communes, et ceux qui n'en veulent pas ────────────────── */

@keyframes rise {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: none; }
}

@keyframes pulse {
  50% { opacity: .6; }
}

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