/* Ludijour : style commun à tout le site.
   Idée : l'accueil ressemble à une page d'éphéméride (calendrier qu'on arrache chaque jour). */
:root {
  --fond: #F3F5FB;
  --surface: #FFFFFF;
  --encre: #1B2340;
  --doux: #5A6385;
  --ligne: #D9DDEA;
  --accent: #2F4BD8;
  --accent-texte: #FFFFFF;
  --soleil: #FFC93C;
  --ok: #2E9E5B;
  --ok-clair: #8FD3A8;
  --rate: #D64545;
  --presque: #D9A400;
  --absent: #AEB4C8;
  --f-titre: "Bricolage Grotesque", "Trebuchet MS", system-ui, sans-serif;
  --f-texte: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
  --rayon: 14px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fond: #11152A; --surface: #1B2140; --encre: #EEF0F8; --doux: #A3AAC6; --ligne: #2E3659;
    --accent: #7D93FF; --accent-texte: #11152A; --soleil: #FFC93C;
    --ok: #3DBE72; --ok-clair: #2C6E47; --rate: #F06464; --presque: #E6B526; --absent: #4A5277; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --fond: #11152A; --surface: #1B2140; --encre: #EEF0F8; --doux: #A3AAC6; --ligne: #2E3659;
  --accent: #7D93FF; --accent-texte: #11152A; --soleil: #FFC93C;
  --ok: #3DBE72; --ok-clair: #2C6E47; --rate: #F06464; --presque: #E6B526; --absent: #4A5277; color-scheme: dark;
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--fond); color: var(--encre);
  font: 17px/1.5 var(--f-texte);
}
.page { max-width: 760px; margin: 0 auto; padding-inline: 16px; padding-block: 0 48px; display: flex; flex-direction: column; gap: 28px; }
h1, h2, h3 { font-family: var(--f-titre); line-height: 1.15; text-wrap: balance; margin: 0; }
h2 { font-size: 1.35rem; }
a { color: var(--accent); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
button { font: inherit; color: inherit; cursor: pointer; }

/* En-tête */
.entete { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: 16px 0; flex-wrap: wrap; }
.logo { font-family: var(--f-titre); font-weight: 800; font-size: 1.6rem; text-decoration: none; color: var(--encre); letter-spacing: -0.02em; }
.logo span { color: var(--accent); }
.pseudo-chip { border: 1px solid var(--ligne); background: var(--surface); border-radius: 999px; padding: 6px 14px; font-size: 0.95rem; }
.pseudo-chip strong { color: var(--accent); }
.entete-boutons { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.rond { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--ligne); background: var(--surface); display: grid; place-items: center; font-size: 1.1rem; text-decoration: none; padding: 0; }

/* Boutons */
.btn { border: 0; border-radius: 12px; padding: 12px 20px; font-weight: 700; min-height: 48px; }
.btn-plein { background: var(--accent); color: var(--accent-texte); }
.btn-clair { background: transparent; border: 2px solid var(--ligne); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* Emplacements pub (vides pour l'instant) */
.pub { border: 1.5px dashed var(--ligne); border-radius: var(--rayon); min-height: 90px; display: grid; place-items: center; color: var(--doux); font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; }

/* Fenêtre pseudo */
.voile { position: fixed; inset: 0; background: rgb(10 14 30 / 0.55); display: grid; place-items: center; padding: 16px; z-index: 10; }
.boite { background: var(--surface); border-radius: var(--rayon); padding: 24px; width: min(420px, 100%); display: flex; flex-direction: column; gap: 14px; }
.boite input { font: inherit; padding: 12px 14px; border-radius: 10px; border: 2px solid var(--ligne); background: var(--fond); color: var(--encre); }

.pied { color: var(--doux); font-size: 0.85rem; text-align: center; }

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

/* Éléments communs aux pages de jeu */
.jeu-zone { max-width: 440px; width: 100%; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.titre-jeu { display: flex; flex-direction: column; gap: 4px; }
.titre-jeu h1 { font-size: 1.8rem; }
.legende { color: var(--doux); margin: 0; font-size: 0.95rem; }
.modes { display: flex; gap: 6px; background: var(--surface); border: 1px solid var(--ligne); border-radius: 12px; padding: 4px; }
.modes button { flex: 1; border: 0; background: transparent; border-radius: 9px; padding: 10px; font-weight: 700; color: var(--doux); }
.modes button[aria-pressed="true"] { background: var(--accent); color: var(--accent-texte); }
.fin { background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--rayon); padding: 18px; display: flex; flex-direction: column; gap: 12px; text-align: center; }
.fin h2 { font-size: 1.5rem; }
.fin p { margin: 0; }
.partage { white-space: pre-wrap; font-size: 1.1rem; line-height: 1.3; background: var(--fond); border-radius: 10px; padding: 10px; user-select: all; overflow-x: auto; }
.visuel-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Outils de test (à retirer avant la mise en ligne) */
.etat-test:empty { display: none; }
.etat-test { color: var(--presque); font-weight: 700; }

/* Barre d'infos des jeux (niveau, compteur, chrono) */
.barre-jeu { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; font-variant-numeric: tabular-nums; }
.niveau { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; background: var(--soleil); color: #1B2340; }
.chrono { font-weight: 700; font-size: 1.1rem; }
.info { font-weight: 700; color: var(--doux); }

/* Règles de chaque jeu */
.regles { background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--rayon); padding: 12px 16px; }
.regles summary { cursor: pointer; font-weight: 700; font-family: var(--f-titre); font-size: 1.05rem; }
.regles ul { margin: 10px 0 2px; padding-left: 1.2em; display: flex; flex-direction: column; gap: 6px; }
.regles li { line-height: 1.45; }
.regles .astuce { list-style: "💡 "; color: var(--doux); }

/* Choix du niveau en entraînement */
.niveaux-entr { display: flex; flex-wrap: wrap; gap: 6px; }
.niveaux-entr button { border: 1.5px solid var(--ligne); background: var(--surface); border-radius: 999px; padding: 6px 12px; font-weight: 700; font-size: 0.9rem; color: var(--doux); min-height: 36px; }
.niveaux-entr button[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }

.bonus-jour { margin: 0; font-size: 0.85rem; font-weight: 700; color: var(--encre); background: color-mix(in srgb, var(--soleil) 25%, var(--surface)); border-radius: 999px; padding: 4px 12px; align-self: flex-start; }

.intro-jeu { margin: 0; color: var(--doux); font-size: 0.95rem; }
.a-propos { display: flex; flex-direction: column; gap: 10px; color: var(--doux); font-size: 0.95rem; }
.a-propos h2 { color: var(--encre); font-size: 1.15rem; }
.a-propos p { margin: 0; max-width: 65ch; }

/* Indice */
.indice-zone { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.indice-zone .btn { min-height: 40px; padding: 8px 16px; }
.indice-msg { margin: 0; color: var(--doux); font-size: 0.95rem; flex: 1; min-width: 12em; }
.indice-msg:empty { display: none; }
.eclaire { animation: eclaire 1.4s ease; }
@keyframes eclaire { 0%, 60% { box-shadow: inset 0 0 0 4px var(--soleil), 0 0 0 3px var(--soleil); } 100% { box-shadow: none; } }

[hidden] { display: none !important; }
#legende:empty { display: none; }

/* Barre « Jour simulé » (outil de test, à retirer avant la mise en ligne). */

/* Puzzle du jour : grille cachée tant qu'on n'a pas cliqué sur « Commencer ». */
.avec-depart { position: relative; }
.voile-depart { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; padding: 16px; background: var(--surface); border: 1px solid var(--ligne); border-radius: 12px; }
.voile-depart p { margin: 0; color: var(--doux); font-size: 0.9rem; }
.voile-depart .btn { font-size: 1.1rem; padding: 12px 28px; }

/* ---- Pages de jeu (5 octobre) : bandeau de pub en haut, puis le jeu tout de suite, les règles en dessous ---- */
.page:has(.jeu-zone) { gap: 14px; }
.pub-bandeau { min-height: 56px; border-radius: 10px; }
.titre-jeu h1 { font-size: 1.45rem; }
.apropos { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.apropos .intro-jeu { padding-inline: 4px; }
@media (max-width: 480px) {
  .entete { padding-block: 10px 0; gap: 8px; }
  .entete .logo { font-size: 1.35rem; }
  .entete .rond { width: 36px; height: 36px; font-size: 1rem; }
  .pseudo-chip { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 5px 11px; }
}

/* Grande fenêtre de fin de partie */
.bravo-voile { position: fixed; inset: 0; z-index: 50; background: rgb(10 14 30 / 0.5); display: grid; place-items: center; padding: 16px; animation: bravo-fond .25s ease; }
.bravo-boite { background: var(--surface); border-radius: 20px; padding: 22px 20px 18px; width: min(380px, 100%); text-align: center; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 16px 50px rgb(0 0 0 / 0.35); animation: bravo-entree .4s cubic-bezier(.2,1.4,.4,1); }
.bravo-fete { font-size: 3rem; line-height: 1; }
.bravo-boite h2 { font-size: 1.6rem; }
.bravo-lignes p { margin: 0 0 4px; color: var(--doux); }
.bravo-points { margin: 0; font-family: var(--f-titre); font-size: 1.5rem; font-weight: 800; color: var(--ok); }
.bravo-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
@keyframes bravo-entree { from { transform: scale(.8); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes bravo-fond { from { opacity: 0; } }
/* Mini tableau des points sous la fin de partie (5 octobre, kaki). */
.pts-tableau { text-align: left; border: 1px solid var(--ligne); border-radius: 12px; overflow: hidden; }
.pts-titre { margin: 0; padding: 8px 12px; font-weight: 700; background: color-mix(in srgb, var(--ok) 14%, var(--surface)); }
.pts-tableau table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.pts-tableau th, .pts-tableau td { padding: 7px 12px; border-top: 1px solid var(--ligne); vertical-align: top; }
.pts-tableau th { font-weight: 400; }
.pts-tableau th small { display: block; color: var(--doux); font-size: .78rem; margin-top: 2px; }
.pts-tableau td { text-align: right; white-space: nowrap; font-weight: 700; font-variant-numeric: tabular-nums; }
.pts-tableau tr.moins td { color: var(--rate); }
.pts-tableau tr.sous th, .pts-tableau tr.sous td { color: var(--doux); }
.pts-tableau tr.total th, .pts-tableau tr.total td { font-weight: 800; font-size: 1.05rem; color: var(--ok); background: color-mix(in srgb, var(--ok) 8%, var(--surface)); }
.fin-suite { display: flex; flex-direction: column; gap: 8px; }

/* Cases « Emplacement publicitaire » : visibles seulement dans la version de travail (pas encore de pub). */
.pub { display: none !important; }