:root {
  --fond: #fbfaf6;
  --carte: #ffffff;
  --texte: #1f1f1d;
  --doux: #5f5e5a;
  --bord: #e3e1d8;
  --vert: #0f6e56;
  --vert-clair: #e1f5ee;
  --vert-fonce: #085041;
  --ambre-clair: #faeeda;
  --ambre-fonce: #633806;
  --rouge: #a32d2d;
  --rouge-clair: #fcebeb;
  --sur-vert: #ffffff;
}
/*
 * Mode sombre : choix « داكن » de l'espace parent (data-theme="dark" sur <html>, posé par index.html avant l'affichage),
 * ou réglage du téléphone quand le choix est « تلقائي » (pas de data-theme). Fonds alignés sur le back-office.
 * Les deux blocs doivent rester identiques.
 */
:root[data-theme="dark"] {
  --fond: #0d1513; --carte: #17221f; --texte: #e2ebe7; --doux: #9db0a8; --bord: #2a3a35;
  --vert: #5dcaa5; --vert-clair: #0b3d31; --vert-fonce: #9fe1cb; --sur-vert: #04342c;
  --ambre-clair: #4a3205; --ambre-fonce: #fac775; --rouge: #f09595; --rouge-clair: #4a1b1b;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fond: #0d1513; --carte: #17221f; --texte: #e2ebe7; --doux: #9db0a8; --bord: #2a3a35;
    --vert: #5dcaa5; --vert-clair: #0b3d31; --vert-fonce: #9fe1cb; --sur-vert: #04342c;
    --ambre-clair: #4a3205; --ambre-fonce: #fac775; --rouge: #f09595; --rouge-clair: #4a1b1b;
  }
}
* { box-sizing: border-box; }
/* l'attribut hidden doit gagner sur les display: block / flex ci-dessous (bouton d'écoute masqué après chargement) */
[hidden] { display: none !important; }
html, body { margin: 0; background: var(--fond); color: var(--texte); }
body { font-family: Tahoma, "Noto Naskh Arabic", "Segoe UI", sans-serif; font-size: 18px; line-height: 1.7; }
#app { max-width: 520px; margin: 0 auto; padding: 16px 16px calc(24px + env(safe-area-inset-bottom)); }

h1 { font-size: 1.4rem; margin: .3rem 0 1rem; font-weight: 500; }
h2 { font-size: 1.1rem; margin: 1.2rem 0 .5rem; font-weight: 500; }
p { margin: .4rem 0; }
.doux { color: var(--doux); font-size: .9rem; }

.barre { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.barre .titre { font-weight: 500; }
.pastille { background: var(--ambre-clair); color: var(--ambre-fonce); border-radius: 99px; padding: 2px 12px; font-size: .9rem; white-space: nowrap; }

.carte { background: var(--carte); border: 1px solid var(--bord); border-radius: 16px; padding: 14px 16px; margin-bottom: 12px; }
.enonce { font-size: 1.25rem; line-height: 1.9; }
.fennec { background: var(--ambre-clair); color: var(--ambre-fonce); border-radius: 14px; padding: 10px 14px; margin: 10px 0; }
.fennec::before { content: "🦊 "; }

button, .bouton {
  display: block; width: 100%; min-height: 52px; margin: 8px 0; padding: 10px 16px;
  border-radius: 14px; border: 1px solid var(--bord); background: var(--carte); color: var(--texte);
  font: inherit; font-size: 1.05rem; cursor: pointer; text-align: center; text-decoration: none;
}
button.principal { background: var(--vert); border-color: var(--vert); color: var(--sur-vert); }
.choix-theme { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }

/* Lecture à voix haute : petit bouton 🔊 en début de bloc (côté fin de ligne), ⏹ pendant la lecture */
button.voix {
  display: inline-flex; align-items: center; justify-content: center; float: inline-end;
  width: 44px; min-height: 44px; margin: 0 0 6px; margin-inline-start: 8px; padding: 0;
  font-size: 1.2rem; border-radius: 50%; line-height: 1;
}
button.voix.en-lecture { border-color: var(--vert); background: var(--vert-clair); }
.voix-message { display: block; clear: both; font-size: .85rem; color: var(--doux); }
.voix-essai { overflow: hidden; padding: 6px 0; }

/* Petites classes (1AP, classe « petits » sur #app) : gros caractères, gros chiffres, moins de texte */
.petits .secondaire { display: none; }
.petits .enonce { font-size: 1.7rem; line-height: 1.8; }
.petits button { min-height: 60px; font-size: 1.3rem; }
.petits button.voix { width: 56px; min-height: 56px; font-size: 1.5rem; }
.petits .fennec { display: flex; align-items: center; justify-content: space-between; }
.petits .fennec button.voix { margin: 0; }
.petits .indice .etiquette { font-size: 1.1rem; }
.petits .choix-reponses { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 12px; }
.petits .choix-reponses button { min-height: 96px; font-size: 2.6rem; }
.petits #reponse { font-size: 2rem; min-height: 64px; text-align: center; }
.petits .liste-ex { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
.petits .liste-ex button { min-height: 88px; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; }
.petits .page-ex { font-size: .8rem; color: var(--doux); }
.petits .liste-ex button.fait .page-ex { color: inherit; }
.petits .num-ex { font-size: 2.2rem; font-weight: 600; }

/* Réponse à choisir (petites classes) : grosses cases faciles à toucher */
.choix-reponses { display: grid; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); gap: 10px; margin: 6px 0; }
.choix-reponses button { margin: 0; min-height: 76px; font-size: 1.9rem; font-weight: 600; border-width: 2px; }

/* Aide de l'espace parent : questions repliables */
.aide-question { border-top: 1px solid var(--bord); padding: 8px 0; }
.aide-question summary { cursor: pointer; font-weight: 600; }
.aide-question p { margin: 6px 0 0; color: var(--doux); }

/* Visite de bienvenue du fennec : voile, élément mis en avant, bulle en bas de l'écran (centrée sans élément) */
.visite-voile { position: fixed; inset: 0; background: rgba(0, 0, 0, .55); z-index: 1000; }
.visite-cible { position: relative; z-index: 1001; box-shadow: 0 0 0 4px var(--vert); background: var(--carte); border-radius: 14px; }
.visite-bulle {
  position: fixed; z-index: 1002; left: 50%; transform: translateX(-50%);
  bottom: calc(16px + env(safe-area-inset-bottom)); width: min(488px, calc(100% - 32px));
  background: var(--ambre-clair); color: var(--ambre-fonce); border-radius: 16px; padding: 14px 16px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .25);
}
.visite-bulle.centree { bottom: auto; top: 50%; transform: translate(-50%, -50%); }
.visite-bulle p { margin: 0 0 10px; font-size: 1.05rem; }
.visite-bulle p::before { content: "🦊 "; }
.visite-pied { display: flex; align-items: center; gap: 8px; }
.visite-pied .doux { margin-inline-end: auto; color: var(--ambre-fonce); }
.visite-pied button { width: auto; min-height: 44px; margin: 0; }
.visite-pied button.lien { color: var(--ambre-fonce); }
.choix-theme button { margin: 0; min-height: 48px; font-size: .95rem; }
button.lien { border: none; background: none; min-height: 0; width: auto; display: inline; color: var(--vert); padding: 4px; margin: 0; font-size: .95rem; }
button:active { transform: scale(.98); }
button.rate { opacity: .5; text-decoration: line-through; }
button.etape-fausse { border-color: var(--rouge); background: var(--rouge-clair); color: var(--rouge); }
button[data-action="etapeFennec"] { display: flex; align-items: center; gap: 10px; text-align: start; }
.num-etape { flex: none; width: 1.8em; height: 1.8em; line-height: 1.8em; border-radius: 50%; background: var(--fond); border: 1px solid var(--bord); text-align: center; font-size: .9rem; }
button[disabled] { cursor: default; }
button[disabled]:active { transform: none; }

input, select {
  width: 100%; min-height: 52px; padding: 8px 14px; border-radius: 14px; border: 1px solid var(--bord);
  background: var(--carte); color: var(--texte); font: inherit; font-size: 1.2rem;
}
label { display: block; margin: 12px 0 4px; color: var(--doux); font-size: .95rem; }
.erreur { color: var(--rouge); font-size: .95rem; min-height: 1.4em; }
.succes { background: var(--vert-clair); color: var(--vert-fonce); border-radius: 14px; padding: 12px 14px; font-size: 1.1rem; }

.indice { border: 1px solid var(--bord); border-radius: 12px; padding: 8px 12px; margin: 8px 0; }
.indice.ouvert { border-color: var(--vert); }
.indice .etiquette { color: var(--doux); font-size: .85rem; display: block; }

.liste-ex { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.liste-ex button { margin: 0; min-height: 64px; font-size: .95rem; line-height: 1.3; }
.liste-ex button.fait { background: var(--vert-clair); color: var(--vert-fonce); border-color: var(--vert); }
.liste-ex button.en-cours { border-color: var(--ambre-fonce); }

.chiffres { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.chiffre { background: var(--carte); border: 1px solid var(--bord); border-radius: 14px; padding: 10px 12px; }
.chiffre span { display: block; color: var(--doux); font-size: .85rem; }
.chiffre strong { font-size: 1.5rem; font-weight: 500; }
.progression { height: 8px; background: var(--bord); border-radius: 4px; overflow: hidden; }
.progression div { height: 8px; background: var(--vert); }
.hors-ligne { background: var(--rouge-clair); color: var(--rouge); border-radius: 10px; padding: 4px 12px; font-size: .85rem; margin-bottom: 8px; text-align: center; }