/* ==========================================================================
   FunKey · Groove Machine — socle de la charte graphique
   Usage numérique uniquement (projection, TV, écran de régie).
   Ce fichier est partagé par l'accueil et par les 4 jeux : on n'y met que
   ce qui est commun (variables, polices, fond, ruban, volet de transition).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Polices — hébergées dans le projet (l'appli doit marcher sans Internet).
   Fichiers attendus dans ./fonts/ :
     Shrikhand-Regular.woff2 · Righteous-Regular.woff2 · Outfit-Variable.woff2
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Shrikhand";
  src: local("Shrikhand"), local("Shrikhand-Regular"),
       url("../fonts/Shrikhand-Regular.woff2?v=1") 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?v=1") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

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

/* --------------------------------------------------------------------------
   Variables
   -------------------------------------------------------------------------- */
:root {
  /* Palette commune */
  --fk-chocolat: #3B1F14;   /* fond principal */
  --fk-expresso: #2A150D;   /* fond profond, régie, vignettage */
  --fk-caramel:  #4E2A1B;   /* surfaces, cartes */
  --fk-creme:    #F5E6C8;   /* texte */
  --fk-sable:    #C9B08A;   /* texte secondaire */

  /* Accents des jeux */
  --fk-turquoise: #2BB3A7;  /* N'oubliez pas les casseroles */
  --fk-moutarde:  #E3A82B;  /* Mot Mystère */
  --fk-rose:      #E84A8A;  /* La Roue */
  --fk-orange:    #E8662A;  /* Les 100 Sondés + accent FunKey */

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

  /* Couleur du jeu en cours — redéfinie par [data-jeu] ou par chaque jeu */
  --jeu:        var(--fk-orange);
  --jeu-clair:  #F2915F;
  --jeu-fonce:  #A8461A;

  /* Typographies (avec polices de secours) */
  --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;
  --fk-ombre:   8px 8px 0 rgba(0, 0, 0, 0.35);

  /* Mouvement */
  --fk-rebond: cubic-bezier(0.34, 1.56, 0.64, 1);
  --fk-sortie: cubic-bezier(0.7, 0, 0.3, 1);
}

/* Couleur propre à chaque jeu : on pose data-jeu="..." sur un conteneur */
[data-jeu="casseroles"]  { --jeu: #2BB3A7; --jeu-clair: #5FD3C8; --jeu-fonce: #1D7A72; }
[data-jeu="mot-mystere"] { --jeu: #E3A82B; --jeu-clair: #F2C960; --jeu-fonce: #A6791A; }
[data-jeu="roue"]        { --jeu: #E84A8A; --jeu-clair: #F27DAA; --jeu-fonce: #A8305F; }
[data-jeu="sondes"]      { --jeu: #E8662A; --jeu-clair: #F2915F; --jeu-fonce: #A8461A; }

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

[hidden] { display: none !important; }

.fk-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

:focus-visible {
  outline: var(--fk-contour) solid var(--fk-creme);
  outline-offset: 6px;
}

/* --------------------------------------------------------------------------
   Fond signature : sunburst chocolat/caramel qui tourne très lentement
   Usage : <div class="fk-fond"><div class="fk-sunburst"></div></div>
   -------------------------------------------------------------------------- */
.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;
}

/* Vignettage des bords en expresso */
.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%
  );
}

/* Grain pellicule très léger (4 %) — à ne pas mettre sur la régie */
.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;
}

/* --------------------------------------------------------------------------
   Ruban de rayures 70s : 4 bandes ondulées aux couleurs des 4 jeux
   -------------------------------------------------------------------------- */
.fk-ruban {
  --h: 6.5vh;
  width: 100%;
  height: var(--h);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='64' viewBox='0 0 240 64'%3E%3Cg fill='none' stroke-width='9'%3E%3Cpath d='M0 10C60 -6 180 26 240 10' stroke='%23E8662A'/%3E%3Cpath d='M0 22C60 6 180 38 240 22' stroke='%23E3A82B'/%3E%3Cpath d='M0 34C60 18 180 50 240 34' stroke='%23E84A8A'/%3E%3Cpath d='M0 46C60 30 180 62 240 46' stroke='%232BB3A7'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: calc(var(--h) * 3.75) var(--h);
  animation: fk-defile 16s linear infinite;
}

/* --------------------------------------------------------------------------
   Volet de rayures 70s (transition entre écrans, 700 ms)
   - .entre    : les bandes recouvrent l'écran (on part vers un autre écran)
   - .traverse : les bandes balaient l'écran de part en part (ouverture)
   -------------------------------------------------------------------------- */
.fk-volet {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  grid-template-rows: repeat(4, 1fr);
  visibility: hidden;
  pointer-events: none;
}

.fk-volet > i {
  display: block;
  background: var(--c);
  border-right: var(--fk-contour) solid var(--fk-creme);
  transform: translateX(-101%);
  transition: transform 0.52s var(--fk-sortie);
  transition-delay: calc(var(--n) * 60ms);
}

.fk-volet > i:nth-child(1) { --c: var(--fk-orange);    --n: 0; }
.fk-volet > i:nth-child(2) { --c: var(--fk-moutarde);  --n: 1; }
.fk-volet > i:nth-child(3) { --c: var(--fk-rose);      --n: 2; }
.fk-volet > i:nth-child(4) { --c: var(--fk-turquoise); --n: 3; }

.fk-volet.entre,
.fk-volet.traverse {
  visibility: visible;
  pointer-events: auto;
}

.fk-volet.entre > i { transform: translateX(0); }

.fk-volet.traverse > i {
  transition: none;
  animation: fk-traverse 1.3s var(--fk-sortie) both;
  animation-delay: calc(var(--n) * 70ms);
}

/* --------------------------------------------------------------------------
   Keyframes communes
   -------------------------------------------------------------------------- */
@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); }
}

@keyframes fk-defile {
  to { background-position-x: calc(var(--h) * -3.75); }
}

@keyframes fk-traverse {
  0%   { transform: translateX(-101%); }
  35%  { transform: translateX(0); }
  65%  { transform: translateX(0); }
  100% { transform: translateX(101%); }
}

/* --------------------------------------------------------------------------
   Réglages communs (posés sur <html> par reglages.js)
   - data-texte      : taille du texte, via --fk-texte (les pages en vh la multiplient)
   - data-contraste  : « fort » = palette resserrée sur les extrêmes, contours épais
                       (projecteur peu lumineux)
   - data-animations : completes | calmes (décor figé) | aucune (plus aucun mouvement)
   -------------------------------------------------------------------------- */
:root { --fk-texte: 1; }
html[data-texte="grand"]       { --fk-texte: 1.15; }
html[data-texte="tres-grand"]  { --fk-texte: 1.3; }

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

/* Animations « calmes » : le décor permanent s'immobilise (les transitions restent) */
html[data-animations="calmes"] .fk-sunburst,
html[data-animations="calmes"] .fk-grain,
html[data-animations="calmes"] .fk-ruban,
html[data-animations="calmes"] .reflets,
html[data-animations="calmes"] .spot,
html[data-animations="calmes"] .pendule,
html[data-animations="calmes"] .facettes,
html[data-animations="calmes"] .halo { animation: none !important; }

/* Animations « aucune » : comme « réduire les animations » du système */
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;
}
html[data-animations="aucune"] .fk-volet > i {
  transform: none;
  opacity: 0;
  transition: opacity 0.15s !important;
}
html[data-animations="aucune"] .fk-volet.entre > i { opacity: 1; }
html[data-animations="aucune"] .fk-volet.traverse  { visibility: hidden; }

/* --------------------------------------------------------------------------
   Accessibilité : « réduire les animations » → fondus simples, plus de
   mouvement permanent.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::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;
  }

  .fk-volet > i {
    transform: none;
    opacity: 0;
    transition: opacity 0.15s !important;
  }

  .fk-volet.entre > i { opacity: 1; }
  .fk-volet.traverse  { visibility: hidden; }
}