/*
 * jeu.v1.css — 08/11/2026, lot 1 du « registre de jeu » (avis du conseil du 08/11, docs/echanges/pour-claude-code/2026-11-08-avis-conseil-design.md).
 * Chargée par layout.v17 sur toutes les pages, APRÈS arqualea.v2.css et site.v1.css, qui restent inchangées.
 *  - deux registres : le récit garde Cinzel, l'or et la nuit ; le jeu (chrono, points, victoire, erreurs, boutons « Jouer ») prend
 *    une couleur d'énergie réservée (--c-energy, braise ; le cyan reste possible, choix sur maquettes), de gros chiffres en Space Mono gras,
 *    une grotesque condensée (Barlow Condensed, SIL OFL 1.1) et du mouvement utile ;
 *  - typographie : Cinzel sort des boutons ; Cormorant n'est plus chargée, l'italique de récit passe en Source Sans 3 italique ;
 *  - accueil : premier écran visible tout de suite (l'apparition n'ajoute que du mouvement), bandeau refermable, secondes au compte à rebours,
 *    ligne du champion de la Saison 1 ;
 *  - « réduire les animations » : le rendu fixe reste complet (arqualea.v2.css coupe déjà animations et transitions).
 * Sommaire : polices · jetons · typographie · boutons · accueil · registre de jeu · énigme du jour · écran de victoire · mouvement.
 */

/* ---------- Polices ---------- */
@font-face { font-family: "Barlow Condensed"; src: url("../fonts/barlow-condensed-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("../fonts/barlow-condensed-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("../fonts/barlow-condensed-latin-800-normal.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url("../fonts/source-sans-3-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url("../fonts/source-sans-3-latin-500-italic.woff2") format("woff2"); font-weight: 500; font-style: italic; font-display: swap; }

/* ---------- Jetons ---------- */
:root {
  --c-energy: #FF7A45;          /* braise : chrono, points, boutons « Jouer » ; #070C24 dessus ≈ 7,6:1 */
  --c-energy-hi: #FF9A6B;       /* survol */
  --c-energy-soft: rgba(255, 122, 69, .16);
  --c-hot: #FF4D4D;             /* jauge en fin de course */
  --c-win: #F4D27A;             /* éclat de victoire (or chaud) */
  --f-action: "Barlow Condensed", "Arial Narrow", "Source Sans 3", sans-serif;
  --f-accent: "Source Sans 3", "Segoe UI", sans-serif;   /* remplace Cormorant Garamond (italique de récit) */
}

/* ---------- Typographie : italique de récit en Source Sans (tailles reprises pour un œil plus grand que Cormorant) ---------- */
.motto { font-size: 18px; font-weight: 400; }
.fact .v-text { font-size: 17px; }
.honour-head p { font-size: 14.5px; }
.board-empty { font-size: 16px; }
.quote { font-size: 19px; }
.foot .about p { font-size: 15.5px; }

/* ---------- Boutons : grotesque condensée, plus de Cinzel ---------- */
.btn { font: 700 15px/1 var(--f-action); letter-spacing: .07em; }
.btn-sm { font-size: 14px; }
.btn-lg { font-size: 17px; }
/* boutons « Jouer » et d'action en jeu : couleur d'énergie (l'or garde le prestige) */
.pg-card .btn-gold, .reg-jeu .pg-board .btn-gold, .reg-jeu .pg-intro .btn-gold, .reg-jeu .btn-play {
  background: var(--c-energy); border-color: var(--c-energy); color: var(--c-space);
  box-shadow: 0 0 0 1px rgba(255, 122, 69, .25), 0 10px 30px -12px rgba(255, 122, 69, .7);
}
.pg-card .btn-gold:hover, .reg-jeu .pg-board .btn-gold:hover, .reg-jeu .pg-intro .btn-gold:hover, .reg-jeu .btn-play:hover {
  background: var(--c-energy-hi); border-color: var(--c-energy-hi); color: var(--c-space);
}
/* titres d'action (pages de jeu ; le Championnat reste au registre du récit) */
.reg-jeu .pg-head h1, .reg-jeu .page-head h1 { font: 800 clamp(34px, 5vw, 54px)/1 var(--f-action); letter-spacing: .02em; text-transform: uppercase; }
.reg-jeu .pg-card h2 { font: 700 22px/1.1 var(--f-action); letter-spacing: .03em; }

/* ---------- Accueil ---------- */
/* premier écran visible tout de suite : l'apparition ne joue plus que sur la position (avant : opacité 0 jusqu'à 1,45 s) */
@keyframes rise { from { transform: translateY(14px); } to { transform: none; } }
/* bandeau des anciens comptes : refermable */
.notice .wrap { display: flex; align-items: flex-start; gap: 12px; }
.notice .wrap p { flex: 1 1 auto; }
.notice-close { flex: none; margin: 6px 0; width: 32px; height: 32px; display: grid; place-items: center; background: transparent; border: var(--rule-steel); border-radius: var(--radius-s); color: var(--c-steel); cursor: pointer; font: 400 18px/1 var(--f-body); }
.notice-close:hover { color: var(--c-ivory); border-color: var(--c-steel); }
/* compte à rebours : les secondes bougent */
.countdown [data-u="s"] { color: var(--c-energy); }
/* champion de la Saison 1, en une ligne */
.champ-line { display: flex; align-items: center; gap: 12px; margin: 26px 0 0; color: var(--c-steel); font-size: 15px; }
.champ-line .crest { width: 26px; height: 26px; color: var(--c-gold); flex: none; }
.champ-line b { color: var(--c-gold); font-weight: 600; }
.champ-line a { margin-left: 4px; }
@media (min-width: 1024px) { .hero-inner.is-archive { grid-template-areas: "intro season"; } }

/* ---------- Registre de jeu : gros chiffres ---------- */
.score, .time { font: 700 clamp(36px, 7vw, 52px)/1 var(--f-num); letter-spacing: -.02em; }
.score { color: var(--c-energy); }
.score-k { font: 700 13px/1.2 var(--f-action); letter-spacing: .14em; color: var(--c-steel); }
.score.drop { color: var(--c-hot); }
.time.hurry { color: var(--c-hot); }
@media (max-width: 380px) { .score, .time { font-size: 32px; } }
/* jauge : passe de l'or à la braise puis au rouge, et bat dans les dernières secondes */
.gauge { height: 8px; border-radius: 4px; background: rgba(159, 178, 216, .14); margin-top: 14px; }
.gauge span { border-radius: 4px; background: linear-gradient(90deg, var(--c-gold), #F1DFB6); transition: transform .3s linear, background .6s; }
.gauge.is-warm span { background: linear-gradient(90deg, var(--c-energy), #FFB38F); }
.gauge.is-hot span { background: linear-gradient(90deg, var(--c-hot), var(--c-energy)); }
.gauge.is-pulse { animation: gauge-pulse .8s ease-in-out infinite; }
@keyframes gauge-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 77, 77, 0); } 50% { box-shadow: 0 0 0 4px rgba(255, 77, 77, .35); } }
/* secousse sur une erreur, éclair sur une perte de points */
.shake { animation: shake .42s cubic-bezier(.36, .07, .19, .97); }
@keyframes shake { 10%, 90% { transform: translateX(-2px); } 20%, 80% { transform: translateX(4px); } 30%, 50%, 70% { transform: translateX(-7px); } 40%, 60% { transform: translateX(7px); } }
.score.hit { animation: hit .5s ease-out; }
@keyframes hit { 0% { transform: scale(1.12); color: var(--c-hot); } 100% { transform: none; } }
.reg-jeu .feedback:not(:empty), .reg-jeu .pg-feedback:not(:empty) { color: var(--c-hot); font-weight: 600; }

/* ---------- Écran de victoire (énigme du jour) ---------- */
.vic { position: relative; display: grid; gap: 18px; justify-items: center; text-align: center; padding: 34px 20px 26px; margin-top: 8px;
  border: 1px solid rgba(255, 122, 69, .35); border-radius: 6px; overflow: hidden; isolation: isolate;
  background: radial-gradient(ellipse at 50% 0%, rgba(255, 122, 69, .22), transparent 60%), var(--c-night); }
.vic.is-lost { border-color: rgba(159, 178, 216, .25); background: radial-gradient(ellipse at 50% 0%, rgba(159, 178, 216, .12), transparent 60%), var(--c-night); }
.vic-burst { position: absolute; inset: -40% -10% auto; height: 120%; z-index: -1; pointer-events: none;
  background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(244, 210, 122, .10) 0 6deg, transparent 6deg 18deg);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0, transparent 60%); mask-image: radial-gradient(circle at 50% 50%, #000 0, transparent 60%);
  animation: burst 18s linear infinite; }
.vic.is-lost .vic-burst { display: none; }
@keyframes burst { to { transform: rotate(360deg); } }
.vic-medal { width: 84px; height: 84px; color: var(--c-win); filter: drop-shadow(0 6px 18px rgba(255, 122, 69, .45)); animation: medal .7s cubic-bezier(.2, 1.4, .4, 1) both; }
.vic.is-lost .vic-medal { color: var(--c-steel); filter: none; }
@keyframes medal { from { transform: scale(.3) rotate(-25deg); opacity: 0; } to { transform: none; opacity: 1; } }
.vic-title { margin: 0; font: 800 clamp(30px, 6vw, 44px)/1 var(--f-action); letter-spacing: .03em; text-transform: uppercase; color: var(--c-ivory); }
.vic-points { margin: 0; font: 700 clamp(56px, 13vw, 88px)/1 var(--f-num); letter-spacing: -.03em; color: var(--c-energy); font-variant-numeric: tabular-nums; }
.vic-points small { display: block; margin-top: 6px; font: 700 14px/1 var(--f-action); letter-spacing: .2em; text-transform: uppercase; color: var(--c-steel); }
.vic-answer { margin: 0; color: var(--c-steel); }
.vic-answer b { color: var(--c-ivory); }
.vic-stats { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 10px; width: 100%; max-width: 560px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.vic-stats li { padding: 14px 12px; border: 1px solid rgba(159, 178, 216, .2); border-radius: 4px; background: rgba(7, 12, 36, .55); display: grid; gap: 6px; align-content: start; }
.vic-k { font: 700 12px/1.2 var(--f-action); letter-spacing: .16em; text-transform: uppercase; color: var(--c-steel); }
.vic-v { font: 700 24px/1.1 var(--f-num); color: var(--c-ivory); font-variant-numeric: tabular-nums; }
.vic-v small { font: 400 13px/1 var(--f-body); color: var(--c-steel); margin-left: 4px; }
.vic-ai .vic-v { font-size: 17px; }
.vic-ai .seal { margin-right: 6px; vertical-align: middle; }
.vic-ai-verdict { font: 700 14px/1.2 var(--f-action); letter-spacing: .06em; text-transform: uppercase; color: var(--c-steel); }
.vic-ai.is-beaten { border-color: rgba(255, 122, 69, .55); }
.vic-ai.is-beaten .vic-ai-verdict { color: var(--c-energy); }
.vic-streak .vic-v { display: inline-flex; align-items: center; justify-content: center; gap: 6px; color: var(--c-energy); }
.flame { width: 22px; height: 26px; flex: none; transform-origin: 50% 90%; animation: flame 1.6s ease-in-out infinite; }
@keyframes flame { 0%, 100% { transform: scale(1) rotate(-2deg); } 50% { transform: scale(1.08, 1.14) rotate(2deg); } }
.vic-note { margin: 0; font-size: 13.5px; color: var(--c-steel); }
.vic-share { display: grid; gap: 10px; justify-items: center; width: 100%; max-width: 560px; padding-top: 14px; border-top: 1px solid rgba(159, 178, 216, .16); }
.vic .pg-share { margin: 0; text-align: left; }
.vic .pg-result { font: 600 15px/1.4 var(--f-body); color: var(--c-steel); }
/* série sur la page de l'énigme, avant la partie */
.pill-streak { display: inline-flex; align-items: center; gap: 6px; color: var(--c-energy); border-color: rgba(255, 122, 69, .45); font: 700 13px/1 var(--f-action); letter-spacing: .08em; text-transform: uppercase; }
.pill-streak .flame { width: 14px; height: 17px; }

/* ---------- Mouvement réduit : rendu fixe complet ---------- */
@media (prefers-reduced-motion: reduce) {
  .vic-burst { display: none; }
  .gauge.is-pulse { box-shadow: 0 0 0 3px rgba(255, 77, 77, .35); }
}

/* ---------- Retouches après captures (08/11) ---------- */
.vic-stats { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.vic-ai .vic-v { font: 700 20px/1.15 var(--f-action); letter-spacing: .02em; }
.vic-streak .vic-v { font: 800 24px/1 var(--f-action); letter-spacing: .03em; }
.pg-game.is-over .scorebar, .pg-game.is-over .gauge, .pg-game.is-over .demo-next { display: none; }
.vic, .vic > *, .vic-share { min-width: 0; max-width: 100%; }
.vic .pg-share { white-space: pre-wrap; overflow-wrap: anywhere; max-width: 100%; }
@media (max-width: 480px) { .vic { padding: 26px 14px 20px; } .vic-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }