/* salix — l'app des apprentis gardiens.
 *
 * Deux contraintes dictent presque tout ici :
 *  - l'utilisateur a cinq ans et tient un téléphone : des cibles énormes, une
 *    seule chose par écran, aucun geste à apprendre ;
 *  - la CSP est `style-src 'self'`, donc aucun attribut style= n'est appliqué :
 *    toute largeur variable passe par les classes .w-* de la fin du fichier.
 */

:root {
  --nuit: #1e3f28;
  --foret: #2f5d3a;
  --creme: #fdf6e3;
  --bois: #8d6748;
  --encre: #3a2f22;
  --or: #d9a326;
  --feuille: #4f9147;
  --rayon: 22px;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

/* Le fond, en trois couches empilées et non en un aplat : un aplat vert sombre
 * avec un seul dégradé se lit comme un écran d'application, alors que l'app
 * raconte un jardin. De haut en bas : la lueur chaude d'un début d'après-midi,
 * le ciel, puis (en SVG, .decor) les collines et les saules au loin. */
body {
  min-height: 100vh;
  background-color: #7fb069;
  background-image:
    radial-gradient(70% 46% at 76% 4%, rgba(255, 226, 150, 0.55), rgba(255, 226, 150, 0) 68%),
    linear-gradient(180deg, #eaf6dd 0%, #dceec9 22%, #bfe1b2 48%, #9ed296 72%, #7fb069 100%);
  background-attachment: fixed;
  color: var(--encre);
  font-family: "Trebuchet MS", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 18px;
  line-height: 1.5;
}

/* Le décor est fixe et derrière tout : il ne défile pas avec une carte longue,
 * et il n'intercepte aucun geste — un enfant tape à côté d'une tuile une fois
 * sur trois. */
.decor {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Ancré en bas, hauteur libre : le décor garde ses proportions au lieu d'être
 * agrandi et rogné. Sur un téléphone de 390 px, il occupe le bas de l'écran ;
 * sur un grand écran, il monte jusqu'aux oiseaux. Dans les deux cas, une
 * colline reste une colline. */
.decor-svg {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: auto;
  display: block;
}

/* Une vignette très douce : elle ramène l'œil au centre sans assombrir le vert. */
.decor::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 50% 42%, rgba(0, 0, 0, 0) 55%, rgba(20, 45, 25, 0.22) 100%);
}

/* Les feuilles dérivent lentement. Neuf feuilles, neuf réglages : un seul et
 * même mouvement pour toutes se verrait comme un motif. */
.feuille {
  transform-box: fill-box;
  transform-origin: center;
  animation: derive 22s ease-in-out infinite alternate;
}

.feuille.f1 { animation-duration: 19s; animation-delay: -2s; }
.feuille.f2 { animation-duration: 26s; animation-delay: -7s; }
.feuille.f3 { animation-duration: 23s; animation-delay: -13s; }
.feuille.f4 { animation-duration: 31s; animation-delay: -4s; }
.feuille.f5 { animation-duration: 21s; animation-delay: -17s; }
.feuille.f6 { animation-duration: 28s; animation-delay: -9s; }
.feuille.f7 { animation-duration: 24s; animation-delay: -21s; }
.feuille.f8 { animation-duration: 33s; animation-delay: -11s; }
.feuille.f9 { animation-duration: 20s; animation-delay: -15s; }

@keyframes derive {
  0%   { transform: translate(0, 0) rotate(-8deg); }
  50%  { transform: translate(26px, 34px) rotate(14deg); }
  100% { transform: translate(-18px, 66px) rotate(-6deg); }
}

/* Un système réglé sur « moins d'animations » n'a pas à voir tomber des
 * feuilles : elles restent, immobiles. */
@media (prefers-reduced-motion: reduce) {
  .feuille { animation: none; }
}

.scene {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.carte {
  width: 100%;
  max-width: 560px;
  background: var(--creme);
  border: 4px solid var(--bois);
  border-radius: var(--rayon);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
  padding: 22px 20px 26px;
  text-align: center;
}

.carte.large { max-width: 860px; text-align: left; }

.saule { width: 100%; max-width: 260px; height: auto; display: block; margin: 0 auto; }

.titre {
  font-size: 1.9rem;
  margin: 6px 0 10px;
  color: var(--nuit);
}

.conte { margin: 8px 0; }
.conte.fort { font-weight: bold; font-size: 1.15rem; }

.detail { color: #6b5b45; font-size: 0.95rem; }

.etiquette {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.75rem;
  color: #7a6a52;
  margin: 0 0 4px;
}

/* Le départ : un champ, un bouton. Le champ est facultatif — un enfant qui ne
 * sait pas encore écrire son prénom ne doit pas rester bloqué là. */
.depart { display: flex; flex-direction: column; gap: 12px; margin: 14px 0 6px; }

.champ {
  font: inherit;
  font-size: 1.2rem;
  padding: 14px 16px;
  border: 3px solid var(--bois);
  border-radius: 14px;
  background: #fffdf6;
  text-align: center;
}

.champ:focus-visible { outline: 4px solid var(--or); outline-offset: 2px; }

/* Le pot de miel. Hors écran plutôt que display:none : certains robots savent
 * ignorer un champ caché, aucun ne résiste à un champ qu'il croit visible. */
.miel { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.bouton {
  font: inherit;
  font-size: 1.25rem;
  font-weight: bold;
  padding: 18px 22px;
  min-height: 64px;
  border: none;
  border-radius: 16px;
  background: var(--or);
  color: #3a2a08;
  cursor: pointer;
  box-shadow: 0 6px 0 #a87c14;
}

.bouton:active { transform: translateY(3px); box-shadow: 0 3px 0 #a87c14; }
.bouton.petit { font-size: 1rem; min-height: 48px; padding: 12px 18px; }

.lien { color: #2f6fbf; }

.erreur { color: #b3261e; font-weight: bold; margin: 0; }

/* ── Le jeu ───────────────────────────────────────────────────────────────── */

.trace { display: flex; gap: 8px; justify-content: center; margin-bottom: 10px; }

.pastille {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(0, 0, 0, 0.25);
  background: #e6dcc4;
  display: inline-block;
}

/* Une pastille ne prend sa couleur de gemme qu'une fois la question répondue :
 * la couleur EST la récompense. */
.pastille.prise.g-rubis { background: #d1495b; }
.pastille.prise.g-emeraude { background: #2e8b57; }
.pastille.prise.g-ambre { background: #e08b2e; }
.pastille.prise.g-topaze { background: #e5c027; }
.pastille.prise.g-perle { background: #f7f3e4; }
.pastille.prise.g-amethyste { background: #8e6bbf; }
.pastille.prise.g-saphir { background: #2f6fbf; }
.pastille.prise.g-turquoise { background: #3fbfbf; }
.pastille.prise.g-or { background: #d9a326; }
.pastille.prise.g-opale { background: #cfd8e3; }

.question {
  font-size: 1.5rem;
  line-height: 1.25;
  margin: 6px 0 16px;
  color: var(--nuit);
}

.grille {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.grille-menu { grid-template-columns: repeat(5, 1fr); gap: 8px; }

.tuile {
  font: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 118px;
  padding: 12px 8px;
  border: 3px solid var(--bois);
  border-radius: 18px;
  background: #fffdf6;
  color: var(--encre);
  cursor: pointer;
}

.tuile:active { background: #f6ecd2; transform: translateY(2px); }
.tuile:focus-visible { outline: 4px solid var(--or); outline-offset: 2px; }

.tuile-emoji { font-size: 2.6rem; line-height: 1; }
.tuile-texte { font-size: 1rem; font-weight: bold; }

.grille-menu .tuile { min-height: 74px; border-radius: 14px; }
.grille-menu .tuile-emoji { font-size: 1.5rem; }
.grille-menu .tuile-texte { font-size: 0.9rem; }

.aide { color: #6b5b45; font-size: 0.9rem; margin: 14px 0 0; }

.adulte { border-style: dashed; }
.tuile.oui { background: #eaf6e6; }
.tuile.non { background: #f6eaea; }

/* ── La carte d'apprenti ──────────────────────────────────────────────────── */

.apprenti { border-width: 6px; }
.apprenti .prenom { font-size: 2.1rem; margin: 4px 0 0; color: var(--nuit); }
.apprenti .nom-gardien { font-size: 1.2rem; font-style: italic; margin: 0 0 12px; }

.gemme-confiee {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #fffdf6;
  border: 2px dashed var(--bois);
  border-radius: 14px;
  padding: 10px 12px;
  margin-bottom: 14px;
}

.gemme-emoji { font-size: 2rem; }

.badges { display: grid; gap: 8px; margin: 0 0 14px; text-align: left; }

.badge {
  background: #fffdf6;
  border: 2px solid #e0d3b5;
  border-radius: 12px;
  padding: 8px 12px;
}

.badge dt { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: #7a6a52; }
.badge dd { margin: 2px 0 0; font-size: 1.05rem; font-weight: bold; }

.rdv { font-size: 1.05rem; margin: 0 0 10px; }

.actions { display: flex; gap: 14px; align-items: center; justify-content: center; margin-top: 8px; }

/* La carte tient la couleur de la gemme confiée, en liseré. */
.apprenti.g-rubis { border-color: #d1495b; }
.apprenti.g-emeraude { border-color: #2e8b57; }
.apprenti.g-ambre { border-color: #e08b2e; }
.apprenti.g-topaze { border-color: #c9a80f; }
.apprenti.g-perle { border-color: #b9ae90; }
.apprenti.g-amethyste { border-color: #8e6bbf; }
.apprenti.g-saphir { border-color: #2f6fbf; }
.apprenti.g-turquoise { border-color: #2f9f9f; }
.apprenti.g-or { border-color: #d9a326; }
.apprenti.g-opale { border-color: #9fb0c4; }

/* ── La page des parents ─────────────────────────────────────────────────── */

.chiffres { font-size: 1.2rem; }
.depouille { margin-top: 22px; }
.depouille h2 { font-size: 1.1rem; margin: 0 0 8px; color: var(--nuit); }

.ligne { display: grid; grid-template-columns: 1fr 40% 2.5rem; gap: 10px; align-items: center; margin-bottom: 6px; }
.ligne-n { text-align: right; font-weight: bold; }

.jauge { background: #e6dcc4; border-radius: 8px; height: 14px; overflow: hidden; }
.jauge-plein { display: block; height: 100%; background: var(--feuille); }

.liste { width: 100%; border-collapse: collapse; }
.liste th, .liste td { text-align: left; padding: 6px 8px; border-bottom: 1px solid #e0d3b5; }
.liste th { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; color: #7a6a52; }

/* ── Largeurs (la CSP interdit style="width:…") ──────────────────────────── */

.w-0 { width: 0; }
.w-5 { width: 5%; }
.w-10 { width: 10%; }
.w-15 { width: 15%; }
.w-20 { width: 20%; }
.w-25 { width: 25%; }
.w-30 { width: 30%; }
.w-35 { width: 35%; }
.w-40 { width: 40%; }
.w-45 { width: 45%; }
.w-50 { width: 50%; }
.w-55 { width: 55%; }
.w-60 { width: 60%; }
.w-65 { width: 65%; }
.w-70 { width: 70%; }
.w-75 { width: 75%; }
.w-80 { width: 80%; }
.w-85 { width: 85%; }
.w-90 { width: 90%; }
.w-95 { width: 95%; }
.w-100 { width: 100%; }

/* ── Petits écrans ──────────────────────────────────────────────────────── */

@media (max-width: 380px) {
  body { font-size: 17px; }
  .question { font-size: 1.3rem; }
  .tuile { min-height: 104px; }
  .tuile-emoji { font-size: 2.2rem; }
  .grille-menu { grid-template-columns: repeat(4, 1fr); }
}

/* ── Impression de la carte d'apprenti ──────────────────────────────────── */

@media print {
  body { background: #fff; background-image: none; }
  .decor { display: none; }
  .scene { padding: 0; min-height: auto; }
  .carte { box-shadow: none; max-width: 100%; }
  .actions, .aide { display: none; }
}

/* ── Le bandeau : l'occasion et le rendez-vous, sur chaque écran ──────────── */

/* C'est ce que les parents viennent chercher. Il est donc au-dessus de la carte
 * et pas en petit à l'intérieur, et il porte l'heure autant que le jour : « ça
 * commence à quelle heure » est la question posée à chaque anniversaire. */
.bandeau {
  width: 100%;
  max-width: 560px;
  margin: 0 auto 12px;
  padding: 10px 16px;
  text-align: center;
  background: rgba(253, 246, 227, 0.92);
  border: 3px solid var(--or);
  border-radius: 18px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}

.bandeau-occasion {
  display: block;
  font-size: 1.15rem;
  font-weight: bold;
  color: var(--nuit);
  line-height: 1.2;
}

.bandeau-quand {
  display: block;
  margin-top: 2px;
  font-size: 1rem;
  color: #6b5b45;
}

/* La scène empile le bandeau et la carte, et reste centrée. */
.scene {
  flex-direction: column;
}

/* ── L'encadré du rendez-vous, sur l'accueil ─────────────────────────────── */

.rdv-bloc {
  margin: 16px 0 0;
  padding: 12px 14px;
  background: #fffdf6;
  border: 3px dashed var(--feuille);
  border-radius: 16px;
}

.rdv-bloc .etiquette { margin: 0 0 2px; }
.rdv-lieu { margin: 0; font-size: 1.15rem; font-weight: bold; color: var(--nuit); }

@media print {
  .bandeau { box-shadow: none; }
}

/* Le pied de la page des parents : qui est connecté, et par où sortir. */
.sortie {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 10px 0 0;
  flex-wrap: wrap;
}