/* ─────────────────────────────────────────────────────────────────────────
   Pages de zones (Nombres, Calculs, Géométrie… et leurs sous-menus)
   Gabarit commun : main > h1 + .grid-panel > div > .section-titre + .button-container
   Couche de style partagée, chargée APRÈS le <style> propre à chaque page
   (qui garde son image de fond). Pensée d'abord pour la TABLETTE :
   pas d'effet de survol « collé » après un appui, cibles larges, 3 colonnes
   en portrait.
   ───────────────────────────────────────────────────────────────────────── */

/* Police arrondie du système (SF Rounded sur iPad/Mac), jamais en mode dys */
:root:not(.fv-dys) body {
  font-family: ui-rounded, "SF Pro Rounded", "Nunito", system-ui, -apple-system,
    "Segoe UI", Roboto, sans-serif;
}

/* ─── Titre de la zone ─── */
main > h1 {
  font-weight: 800;
  letter-spacing: 0.01em;
  text-wrap: balance;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.35), 0 4px 22px rgba(0, 0, 0, 0.6);
}

/* ─── Panneau vitré ─── */
.grid-panel {
  box-sizing: border-box; /* sinon width:100% + padding déborde de l'écran sur tablette */
  background: linear-gradient(180deg, rgba(12, 18, 36, 0.5), rgba(12, 18, 36, 0.38));
  backdrop-filter: blur(10px) saturate(1.15);
  -webkit-backdrop-filter: blur(10px) saturate(1.15);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 26px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  gap: 30px;
}

/* ─── Titres de section : lisibles, avec un filet qui s'efface ─── */
.grid-panel .section-titre {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #fff;
  font-size: 0.86em;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
  border-bottom: none;
  padding-bottom: 0;
  margin: 0 0 14px;
}
.grid-panel .section-titre::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fcd34d;
  box-shadow: 0 0 8px rgba(252, 211, 77, 0.8);
}
.grid-panel .section-titre::after {
  content: "";
  flex: 1;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0));
}

/* ─── Boutons : cibles larges pour le doigt ─── */
.grid-panel .button-container {
  gap: 14px;
}
.grid-panel .bouton-jeu {
  /* taille du texte : celle de style_boutons.css (agrandie sur tablette) */
  border-radius: 18px;
  touch-action: manipulation;
  /* Icône à cheval sur le bord : un mot long (« multiplications », « Transmutations »)
     ne pouvait pas passer à la ligne ; le contenu centré débordait des deux côtés
     et la tuile (overflow:hidden) coupait l'icône. Marges et écart resserrés pour
     que ces mots tiennent, césure si le navigateur sait la faire (iPad : oui), coupure
     du mot en dernier recours, et « safe center » garde l'icône toujours visible. */
  justify-content: safe center;
  padding-left: 10px;
  padding-right: 10px;
  gap: 0.45rem;
  -webkit-hyphens: auto;
  hyphens: auto;
  overflow-wrap: anywhere; /* dernier recours si la césure n'est pas disponible */
}
.grid-panel .bouton-jeu picture img {
  height: 2em;
}
/* Téléphone (2 colonnes étroites) : l'icône passe au-dessus du texte, qui garde
   toute la largeur de la tuile au lieu de revenir à la ligne mot par mot. */
@media (max-width: 560px) {
  .grid-panel .bouton-jeu {
    flex-direction: column;
    padding: 12px 8px;
    gap: 0.35rem;
  }
  /* Le bouton « Retour » (fixe, en haut à droite) recouvrait la fin du titre. */
  body > .top-right ~ main {
    padding-top: 112px;
  }
}

/* ─── Tablette / tactile : un appui ne laisse pas le bouton « soulevé » ─── */
@media (hover: none) {
  .grid-panel .bouton-jeu:hover {
    transform: none;
  }
  .grid-panel .bouton-jeu.bordure-or:hover {
    border-color: #e2b931 !important;
    box-shadow:
      0 0 0 1px rgba(212, 175, 55, 0.18),
      inset 0 1px 0 rgba(255, 255, 255, 0.28),
      0 5px 14px rgba(0, 0, 0, 0.38),
      0 0 7px rgba(212, 175, 55, 0.32) !important;
  }
  .grid-panel .bouton-jeu:hover::after {
    left: -110%;
    transition: none;
  }
  .grid-panel .bouton-jeu:active {
    transform: scale(0.96);
    filter: brightness(1.12);
  }
}

/* ─── Tablette en portrait : 3 colonnes bien pleines ─── */
@media (min-width: 600px) and (max-width: 900px) {
  .grid-panel .button-container {
    grid-template-columns: repeat(3, 1fr);
  }
  .grid-panel {
    padding: 24px 20px;
  }
}

/* ─── Arrivée en douceur des sections ─── */
@media (prefers-reduced-motion: no-preference) {
  .grid-panel > div {
    animation: zone-entree 0.45s ease both;
  }
  .grid-panel > div:nth-child(2) { animation-delay: 0.06s; }
  .grid-panel > div:nth-child(3) { animation-delay: 0.12s; }
  .grid-panel > div:nth-child(4) { animation-delay: 0.18s; }
  .grid-panel > div:nth-child(n + 5) { animation-delay: 0.24s; }
}
@keyframes zone-entree {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}