/* ================================
   FV Maths — Boutons & Grille (opt.)
   Remplace ton style_boutons.css
   ================================ */

:root{
  --radius: 18px;
  --gap: 20px;
  --btn-min-h: 56px;                 /* confort tactile */
  --shadow: 0 4px 8px rgba(0,0,0,.40);
  --shadow-hover: 0 6px 14px rgba(0,0,0,.25);
  --border-light: 1px solid rgba(255,255,255,.30);
}
.wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;     /* centrage horizontal */
  justify-content: center; /* centrage vertical */
}
/* Grille responsive, stable et compacte */
.button-container{
  display: grid;
  grid-template-columns: repeat(2, minmax(240px, 1fr));
  gap: 10px;
  padding: 10px;
  max-width: 600px;   /* 2 cartes confortables côte à côte */
  margin: 0 auto;
 grid-auto-rows: 1fr;
  align-items: stretch; /* ← étire chaque bouton dans sa cellule */


}

/* Bouton générique */
.bouton-jeu{
  /* layout */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
 height: 100%; 
  inline-size: 100%;
  block-size: 100%;
  min-block-size: var(--btn-min-h);
  padding: 10px 14px;
  box-sizing: border-box;

  /* style */
  border-radius: var(--radius) !important;
  border: var(--border-light);
   min-height: 72px;     /* confort tactile + texte sur 1–2 lignes */
  font-size: 1.0em;
  line-height: 1.3;
  padding: 16px 16px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);

  /* interactions */
  transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease, opacity .2s ease;
  -webkit-tap-highlight-color: transparent;
}

.bouton-jeu:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}

.bouton-jeu:active{
  transform: scale(.98);
  box-shadow: inset 0 3px 6px rgba(0,0,0,.20);
}

.bouton-jeu:focus-visible{
  outline: 2px solid #0ea5e9;
  outline-offset: 3px;
}

/* Icône dans les boutons */
.bouton-jeu img{
  height: 1.6em;
  width: auto;
  flex: none;
}

/* Variantes de couleur / thème
   (on garde tes teintes et dégradés) */
.bouton-jeu.rouge{
  background: #e74c3c;
  color: #fff;
}
.bouton-jeu.bleu{
  color: #fff;
  background: linear-gradient(145deg, rgba(110, 171, 212, 0.85), rgb(41, 127, 185));
}
.bouton-jeu.vert{
  color: #000;
  background: #3bad6ad3;
}
.bouton-jeu.jaune{
  color: #111;
  background: #fbc12db9;
}
.bouton-jeu.violet{
  color: #fff;
  background: linear-gradient(145deg, rgba(174, 88, 191, 0.85), rgb(140, 50, 160));
}
.bouton-jeu.blanc{
  color: #000;
  background: rgba(255,255,255,.80);
}
.bouton-jeu.gold{
  color: #fff;
  background: linear-gradient(145deg, rgba(203, 194, 89, 0.85), rgb(201, 188, 40));
}
.bouton-jeu.creme{
  color: #000;
  background: linear-gradient(145deg, #e7e5e1, #E6DAC6);
}

/* Bordure or optionnelle (tu l’utilises déjà) */
.bordure-or{
  border: 3px solid #d4af37 !important;
  box-shadow: 3px 5px 10px rgba(0,0,0,.35) !important;
}
.bordure-ord{
  border: 3px dashed #d4af37 !important;
  box-shadow: 3px 5px 10px rgba(0,0,0,.35) !important;
}
/* Lien en bouton */
a.bouton-jeu{ text-decoration: none; }

/* Effets coûteux → atténués sur mobile */
@media (max-width: 768px){
  .bouton-jeu{
    /* ombre plus légère + blur réduit = moins de charge GPU */
    box-shadow: 0 3px 8px rgba(0,0,0,.24);
    backdrop-filter: blur(6px);
  }
}

/* Accessibilité : réduit les effets si l’utilisateur le demande */
@media (prefers-reduced-motion: reduce){
  .bouton-jeu{ transition: none !important; }
  .bouton-jeu:hover, .bouton-jeu:active{ transform: none !important; }
}

/* 2 colonnes sur tablette */
@media (max-width: 1024px){
  .button-container{
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 1 colonne sur mobile */
@media (max-width: 600px){
  .button-container{
    grid-template-columns: 1fr;
    max-width: 520px;
  }
}
/* Petits raffinements au clavier/tactile */
.bouton-jeu:disabled,
.bouton-jeu[aria-disabled="true"]{
  opacity: .6;
  pointer-events: none;
}
:root{
  --ring-blue:#0EA5E9;     /* focus par défaut */
  --ring-bleu:#60A5FA;
  --ring-vert:#34D399;
  --ring-violet:#C4B5FD;
  --ring-creme:#D6B78B;
  --ring-blanc:#94A3B8;
  --ring-gold:#F1C40F;
}

/* Focus adaptatif selon la variante posée sur .bouton-jeu */
.bouton-jeu:focus-visible{ outline-width:3px; outline-offset:3px; }
.bouton-jeu.bleu:focus-visible   { outline-color: var(--ring-bleu); }
.bouton-jeu.vert:focus-visible   { outline-color: var(--ring-vert); }
.bouton-jeu.violet:focus-visible { outline-color: var(--ring-violet); }
.bouton-jeu.creme:focus-visible  { outline-color: var(--ring-creme); }
.bouton-jeu.blanc:focus-visible  { outline-color: var(--ring-blanc); }
.bouton-jeu.gold:focus-visible   { outline-color: var(--ring-gold); }

/* === Contraste & lisibilité (sans toucher au rendu global) === */

/* Blanc : forcer une bordure visible + micro-ombre pour détacher sur fond clair */
.bouton-jeu.blanc{
  border-color: rgba(15,23,42,.15);
  box-shadow: 0 4px 10px rgba(15,23,42,.08);
  color:#0F172A; /* texte sombre assuré */
}

/* Crème (Thalès) : texte plus sombre pour atteindre ~7:1, bordure chaude */
.bouton-jeu.creme{
  color:#3B2F1C;               /* lisible sur crème */
  border-color:#E7D8C7;        /* garde ton esprit crème */
}

/* Doré (Succès) : lisibilité renforcée + léger relief métal */
.bouton-jeu.gold{
  color:#2F2400;               /* meilleur contraste que #fff sur doré */
  background:
    linear-gradient(145deg, rgba(248, 232, 166, 0.92), rgba(201, 188, 40, 0.96));
  border-color: rgba(160, 128, 0, .45);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    0 6px 14px rgba(0,0,0,.24);
}

/* Bleu & Violet : rien à changer sur le fond, on renforce juste l’icône si besoin */
.bouton-jeu.bleu img,
.bouton-jeu.violet img{ filter: drop-shadow(0 1px 0 rgba(0,0,0,.25)); }

/* Vert (Géométrie & Nombres) : texte noir OK, on augmente légèrement l’opacité du fond */
.bouton-jeu.vert{ background: #3bad6aee; }

/* Amélioration bordure-or */
.bouton-jeu.bordure-or {
  position: relative;
  border: 3px solid #d4af37 !important; /* or métal */
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.2), /* halo clair interne */
    3px 5px 10px rgba(0,0,0,.35) !important; /* ombre externe */
}

/* Focus spécifique sur bordure-or */
.bouton-jeu.bordure-or:focus-visible {
  outline: 3px solid #f5d547; /* anneau doré clair */
  outline-offset: 4px;
}

/* Optionnel : animation douce au hover */
.bouton-jeu.bordure-or:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.2),
    4px 6px 14px rgba(0,0,0,.4) !important;
}
/* iPad & tablettes : boutons plus grands et plus lisibles */
@media (min-width: 768px) and (max-width: 1180px) {
  .bouton-jeu{
    min-height: 84px;        /* +12 px de hauteur tactile */
    padding: 18px 22px;      /* un peu plus d’air */
    font-size: 1.12em;       /* texte légèrement plus grand */
  }
  .bouton-jeu img{
    height: 2.0em;           /* icône up pour suivre la typo */
  }

  /* Grille un poil plus large pour éviter les retours à la ligne des labels */
  .button-container{
    grid-template-columns: repeat(2, minmax(300px, 1fr));
    max-width: 720px;
  }
}

/* iPad en paysage “grand” (Pro) */
@media (min-width: 1024px) and (max-width: 1370px) and (orientation: landscape){
  .bouton-jeu{ min-height: 88px; font-size: 1.3em; padding: 20px 24px; }
  .button-container{ grid-template-columns: repeat(2, minmax(280px, 1fr)); max-width: 980px; }
}

/* Bonus : sur écrans tactiles (sans hover), on augmente un peu la cible */
@media (hover: none) and (pointer: coarse){
  .bouton-jeu{ min-height: 84px; }
}
@media (min-width: 768px) and (max-width: 1380px){
  .menu{
    display: grid;
    grid-template-columns: repeat(2, minmax(300px, 1fr));
    gap: 20px;
  }
  .menu .bouton-jeu{ width: 100%; }
}
/* ===== Loader Firebase ===== */
.loading-overlay[hidden] { display: none !important; }
.loading-overlay {
  position: fixed; inset: 0; display: grid; place-items: center;
  background: color-mix(in srgb, #000 60%, transparent);
  z-index: 9999; backdrop-filter: blur(2px);
}
.loading-box {
  min-width: 240px; padding: 16px 20px; border-radius: 16px;
  background: rgba(24,24,27,.9);
  color: #fff; box-shadow: 0 10px 30px rgba(0,0,0,.35);
  display: grid; gap: 10px; justify-items: center;
}
.spinner {
  width: 40px; height: 40px; border-radius: 50%;
  border: 4px solid rgba(255,255,255,.25);
  border-top-color: #ffd166; /* doré discret */
  animation: spin 1s linear infinite;
}
.loading-progress {
  width: 100%; height: 6px; border-radius: 999px; appearance: none;
}
.loading-progress::-webkit-progress-bar { background: rgba(255,255,255,.15); border-radius: 999px; }
.loading-progress::-webkit-progress-value { background: #ffd166; border-radius: 999px; }
.loading-progress::-moz-progress-bar { background: #ffd166; border-radius: 999px; }

@keyframes spin { to { transform: rotate(360deg); } }

/* Diminuer les animations si l’utilisateur a réduit les mouvements */
@media (prefers-reduced-motion: reduce) {
  .spinner { animation: none; border-top-color: #ffd166; }
}
/* === Nouvelle variante Géométrie === */
:root{
  /* anneau de focus pour la géométrie */
  --ring-geo:#22d3ee; /* turquoise vif, cohérent avec fond */
}

/* Turquoise / Bleu canard pour la géométrie */
.bouton-jeu.geometrie{
  color:#062024; /* texte très sombre pour contraste AA/AAA */
  background:
    linear-gradient(145deg, rgba(34, 211, 238, 0.92), rgba(12, 143, 177, 0.96)); /* #22d3ee -> #0c8fb1 */
  border-color: rgba(7, 100, 122, .35);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.30),
    0 6px 14px rgba(0,0,0,.24);
}
.bouton-jeu.geometrie img{ filter: drop-shadow(0 1px 0 rgba(0,0,0,.25)); }
.bouton-jeu.geometrie:focus-visible{ outline-color: var(--ring-geo); }
/* === Nouvelle variante Probabilités / Statistiques === */
:root{
  --ring-proba:#ef4444; /* rouge vif */
}

.bouton-jeu.proba{
  color:#2b0a0a; /* texte sombre pour contraste */
  background:
    linear-gradient(145deg, rgba(239,68,68,0.95), rgba(185,28,28,0.96)); /* rouge vif -> rouge sombre */
  border-color: rgba(120,15,15,.4);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.25),
    0 6px 14px rgba(0,0,0,.25);
}
.bouton-jeu.proba img{ filter: drop-shadow(0 1px 0 rgba(0,0,0,.3)); }
.bouton-jeu.proba:focus-visible{ outline-color: var(--ring-proba); }

/* === Nouvelle variante Info === */
:root{
  --ring-info:#3B82F6; /* bleu vif */
}

.bouton-jeu.info{
  color:#0f172a; /* texte sombre pour contraste AA+ */
  background:
    linear-gradient(145deg, rgba(191, 219, 254, 0.95), rgba(96, 165, 250, 0.96));
    /* bleu ciel -> bleu moyen */
  border-color: rgba(59,130,246,.4);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    0 6px 14px rgba(0,0,0,.22);
}

.bouton-jeu.info img{
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.25));
}

.bouton-jeu.info:focus-visible{
  outline-color: var(--ring-info);
}
/* === Nouvelle variante Calcul littéral === */
:root{
  --ring-litteral:#f97316; /* orange vif */
}

.bouton-jeu.litteral{
  color:#1c1917; /* texte brun très sombre (lisible AA/AAA) */
  background:
    linear-gradient(145deg, rgba(251,146,60,0.95), rgba(194,65,12,0.96));
    /* orange clair -> orange foncé */
  border-color: rgba(120,53,15,.45);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.25),
    0 6px 14px rgba(0,0,0,.25);
}

.bouton-jeu.litteral img{
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.3));
}

.bouton-jeu.litteral:focus-visible{
  outline-color: var(--ring-litteral);
}
:root{
  --ring-fun:#f43f5e; /* rose/rouge flashy pour focus */
}

.bouton-jeu.fun{
  color:#fff;
  background:
    linear-gradient(145deg, rgba(244,63,94,0.95), rgba(236,72,153,0.96));
    /* rose vif -> rose-magenta */
  border-color: rgba(136,19,55,.45);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.25),
    0 6px 14px rgba(0,0,0,.3);
}

.bouton-jeu.fun img{
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.3));
}

.bouton-jeu.fun:focus-visible{
  outline-color: var(--ring-fun);
}
/* Boutons page index */
.bouton-jeu.index{
  color:#fff;
  background: linear-gradient(145deg, #597fb1, #194488); /* acier */  border-color: rgba(8, 58, 140, .45);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 6px 14px rgba(0,0,0,.26);
}
:root{ --ring-bleu:#7aa7ff; }

.bouton-jeu.index:hover{
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,.32);
}

.bouton-jeu.index:focus-visible{
  outline-color: var(--ring-index);
}