/* Le jardin de Cécile — feuille de style.
   Principe (Tricot, 2020) : le décor ludique reste sur l'accueil et le bilan.
   Pendant une question, l'écran ne montre que la question : l'attention va à
   la tâche d'apprentissage, pas au décor. */

:root {
  --fond: #f6f3ea;
  --surface: #fffdf7;
  --surface-2: #efeadc;
  --encre: #1f2a24;
  --encre-douce: #5b665f;
  --trait: #ddd6c4;
  --vert: #2f5d46;
  --vert-clair: #dcebdc;
  --vert-vif: #3f8a5f;
  --terre: #b5651d;
  --terre-clair: #f7e3cf;
  --rouge: #b23a3a;
  --rouge-clair: #f6dcdc;
  --or: #c99a2e;
  --or-clair: #f8eccb;
  --graine: #c9bfa6;
  --pousse: #a9cf8f;
  --jeune: #6fb37a;
  --plante: #3f8a5f;
  --arbre: #24553b;
  --ombre: 0 1px 2px rgba(31, 42, 36, .06), 0 4px 16px rgba(31, 42, 36, .06);
  --rayon: 18px;
  --titre: "Fraunces", Georgia, serif;
  --texte: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fond: #141a17; --surface: #1c2420; --surface-2: #232d28; --encre: #eef2ec;
    --encre-douce: #a6b2aa; --trait: #2f3a34; --vert: #8fd0a8; --vert-clair: #213a2d;
    --vert-vif: #79c595; --terre: #e3a46a; --terre-clair: #3a2a1c; --rouge: #ef8f8f;
    --rouge-clair: #3c2222; --or: #e6c165; --or-clair: #3a321a; --graine: #5d574a;
    --pousse: #6e9a5a; --jeune: #4f9a63; --plante: #6cc28c; --arbre: #a6e2bc;
    --ombre: 0 1px 2px rgba(0, 0, 0, .3); color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --fond: #141a17; --surface: #1c2420; --surface-2: #232d28; --encre: #eef2ec;
  --encre-douce: #a6b2aa; --trait: #2f3a34; --vert: #8fd0a8; --vert-clair: #213a2d;
  --vert-vif: #79c595; --terre: #e3a46a; --terre-clair: #3a2a1c; --rouge: #ef8f8f;
  --rouge-clair: #3c2222; --or: #e6c165; --or-clair: #3a321a; --graine: #5d574a;
  --pousse: #6e9a5a; --jeune: #4f9a63; --plante: #6cc28c; --arbre: #a6e2bc;
  --ombre: 0 1px 2px rgba(0, 0, 0, .3); color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fond); color: var(--encre);
  font: 16px/1.5 var(--texte);
  padding: env(safe-area-inset-top, 0) 0 env(safe-area-inset-bottom, 0);
}
main { max-width: 560px; margin: 0 auto; padding: 20px 16px 48px; }
h1, h2, h3 { font-family: var(--titre); font-weight: 700; line-height: 1.15; margin: 0; letter-spacing: -.01em; }
h1 { font-size: 30px; }
h2 { font-size: 21px; margin: 28px 0 12px; }
h3 { font-size: 17px; }
p { margin: 0 0 10px; }
a { color: var(--vert); }
button { font: inherit; color: inherit; }
.doux { color: var(--encre-douce); }
.petit { font-size: 14px; }

/* ------------------------------------------------------------ en-tête */
.entete { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; margin-bottom: 18px; }
.entete .date { font-size: 14px; color: var(--encre-douce); }
.entete .date::first-letter { text-transform: uppercase; }
.retour {
  background: none; border: 0; padding: 6px 0; margin-bottom: 8px; color: var(--vert);
  font-weight: 600; cursor: pointer;
}

/* ------------------------------------------------------------ cartes de l'accueil */
.bloc {
  background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon);
  box-shadow: var(--ombre); padding: 18px;
}
.hero { background: var(--vert); color: #fff; border: 0; position: relative; overflow: hidden; }
:root[data-theme="dark"] .hero { color: #10231a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hero { color: #10231a; } }
.hero h2 { margin: 0 0 4px; font-size: 24px; }
.hero p { opacity: .9; }
.hero .deco { position: absolute; right: -6px; bottom: -14px; font-size: 92px; opacity: .22; pointer-events: none; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 20px; border-radius: 14px; border: 1px solid transparent;
  font-weight: 600; cursor: pointer; text-decoration: none; transition: transform .08s ease;
}
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.btn-principal { background: var(--vert); color: #fff; }
:root[data-theme="dark"] .btn-principal { color: #10231a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn-principal { color: #10231a; } }
.hero .btn-principal { background: #fff; color: var(--vert); }
:root[data-theme="dark"] .hero .btn-principal { background: #10231a; color: var(--vert); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hero .btn-principal { background: #10231a; color: var(--vert); } }
.btn-second { background: var(--surface); border-color: var(--trait); color: var(--encre); }
.btn-plein { width: 100%; }
.rangee { display: flex; gap: 10px; flex-wrap: wrap; }
.rangee > .btn { flex: 1 1 0; }

.semaine { display: flex; gap: 8px; margin-top: 14px; }
.semaine .j { flex: 1; text-align: center; font-size: 12px; color: var(--encre-douce); }
.semaine .pt {
  display: block; width: 28px; height: 28px; margin: 4px auto 0; border-radius: 50%;
  background: var(--surface-2); border: 1px dashed var(--trait); line-height: 26px; font-size: 15px;
}
.semaine .actif .pt { background: var(--vert-clair); border: 1px solid var(--vert-vif); }
.semaine .auj { font-weight: 700; color: var(--encre); }

.examens { display: grid; gap: 12px; }
.examen { display: block; width: 100%; text-align: left; cursor: pointer; }
.examen .haut { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 6px; }
.etiquette {
  display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase;
  color: var(--terre); background: var(--terre-clair); padding: 3px 9px; border-radius: 99px;
}
.compte { font-size: 13px; font-weight: 600; padding: 3px 10px; border-radius: 99px; background: var(--surface-2); white-space: nowrap; }
.compte.proche { background: var(--or-clair); color: var(--terre); }
.compte.passe { color: var(--encre-douce); }
.jardin { display: flex; height: 12px; border-radius: 99px; overflow: hidden; background: var(--surface-2); margin: 12px 0 8px; }
.jardin span { display: block; height: 100%; }
.s-graine { background: var(--graine); } .s-pousse { background: var(--pousse); } .s-jeune { background: var(--jeune); }
.s-plante { background: var(--plante); } .s-arbre { background: var(--arbre); }
.legende { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; color: var(--encre-douce); margin-top: 6px; }
.legende i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }

.liens { display: grid; gap: 8px; margin-top: 26px; }
.lien {
  display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 14px 16px;
  background: var(--surface); border: 1px solid var(--trait); border-radius: 14px; cursor: pointer; text-align: left;
}

/* ------------------------------------------------------------ objectifs */
.objectifs { display: grid; gap: 10px; }
.objectif { display: grid; grid-template-columns: 28px 1fr auto; gap: 10px; align-items: center; }
.objectif .n {
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface-2); font-size: 13px; font-weight: 600;
}
.objectif .barre { height: 6px; background: var(--surface-2); border-radius: 99px; overflow: hidden; margin-top: 5px; }
.objectif .barre span { display: block; height: 100%; background: var(--plante); border-radius: 99px; }
.objectif .chiffre { font-size: 13px; color: var(--encre-douce); white-space: nowrap; }

/* ------------------------------------------------------------ séance */
.progression { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.progression .piste { flex: 1; height: 8px; background: var(--surface-2); border-radius: 99px; overflow: hidden; }
.progression .piste span { display: block; height: 100%; background: var(--vert-vif); transition: width .3s ease; }
.quitter { background: none; border: 0; font-size: 22px; line-height: 1; padding: 4px 6px; cursor: pointer; color: var(--encre-douce); }
.contexte { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: 13px; color: var(--encre-douce); margin-bottom: 10px; }
.question { font-family: var(--titre); font-weight: 500; font-size: 21px; line-height: 1.3; margin: 0 0 8px; }
.aide { font-size: 14px; color: var(--encre-douce); margin-bottom: 12px; }
.choix { display: grid; gap: 10px; margin: 16px 0; }
.choix button, .puce {
  text-align: left; padding: 14px 16px; min-height: 52px; border-radius: 14px; cursor: pointer;
  background: var(--surface); border: 1.5px solid var(--trait);
}
.choix button[aria-pressed="true"] { border-color: var(--vert-vif); background: var(--vert-clair); }
.choix button.juste { border-color: var(--vert-vif); background: var(--vert-clair); }
.choix button.faux { border-color: var(--rouge); background: var(--rouge-clair); }
.choix button:disabled { cursor: default; color: var(--encre); opacity: 1; }
.choix .expl { display: block; font-size: 14px; margin-top: 6px; color: var(--encre-douce); }
.rappel-d-abord {
  border: 1.5px dashed var(--trait); border-radius: 14px; padding: 18px; text-align: center; margin: 16px 0;
}
.rappel-d-abord .gros { font-size: 32px; display: block; margin-bottom: 6px; }

.classer { display: grid; gap: 12px; margin: 16px 0; }
.classer .ligne { background: var(--surface); border: 1.5px solid var(--trait); border-radius: 14px; padding: 12px 14px; }
.classer .ligne.juste { border-color: var(--vert-vif); }
.classer .ligne.faux { border-color: var(--rouge); }
.classer .ligne .texte { font-weight: 600; margin-bottom: 8px; }
.segments { display: flex; flex-wrap: wrap; gap: 6px; }
.segments button {
  padding: 8px 12px; min-height: 40px; border-radius: 99px; border: 1.5px solid var(--trait);
  background: var(--surface-2); cursor: pointer; font-size: 14px;
}
.segments button[aria-pressed="true"] { background: var(--vert); border-color: var(--vert); color: #fff; }
:root[data-theme="dark"] .segments button[aria-pressed="true"] { color: #10231a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .segments button[aria-pressed="true"] { color: #10231a; } }
.correction { font-size: 13px; margin-top: 6px; color: var(--rouge); }
/* Explication d'un élément à classer : même allure que celle d'un choix. */
.classer .expl { font-size: 14px; margin-top: 6px; color: var(--encre-douce); }
/* Un « \n » dans une question ou une explication va à la ligne (colonnes de tables de vérité). */
.question, .expl { white-space: pre-line; }

.ordre .cases { display: grid; gap: 8px; margin: 16px 0 12px; counter-reset: c; }
.ordre .case {
  display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 12px; border-radius: 12px;
  border: 1.5px dashed var(--trait); background: var(--surface); cursor: pointer; text-align: left; width: 100%;
}
.ordre .case::before { counter-increment: c; content: counter(c); font-weight: 700; color: var(--encre-douce); width: 18px; }
.ordre .case.pleine { border-style: solid; }
.ordre .case.juste { border-color: var(--vert-vif); background: var(--vert-clair); }
.ordre .case.faux { border-color: var(--rouge); background: var(--rouge-clair); }
.ordre .reserve { display: flex; flex-wrap: wrap; gap: 8px; }
.ordre .reserve button { padding: 10px 14px; border-radius: 99px; border: 1.5px solid var(--trait); background: var(--surface-2); cursor: pointer; }

.valider { position: sticky; bottom: 0; padding: 12px 0 calc(8px + env(safe-area-inset-bottom, 0)); background: linear-gradient(to top, var(--fond) 75%, transparent); }
.valider .rangee .btn { min-height: 54px; }
.valider .indice { text-align: center; font-size: 13px; color: var(--encre-douce); margin-bottom: 8px; }

/* ------------------------------------------------------------ retour après réponse */
.verdict { border-radius: var(--rayon); padding: 16px 18px; margin: 4px 0 14px; }
.verdict.ok { background: var(--vert-clair); }
.verdict.ko { background: var(--rouge-clair); }
.verdict h3 { font-size: 20px; margin-bottom: 4px; }
.memo { background: var(--or-clair); border-radius: 14px; padding: 14px 16px; margin: 14px 0; }
.memo strong { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--terre); margin-bottom: 4px; }
.pousse { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--trait); margin: 14px 0; font-size: 15px; }
.pousse .icones { font-size: 26px; white-space: nowrap; }
.pilotage { margin: 18px 0 8px; }
.pilotage .titre-pilotage { font-size: 13px; color: var(--encre-douce); margin-bottom: 8px; }
.pilotage .boutons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pilotage button {
  display: flex; align-items: center; gap: 8px; padding: 10px 12px; min-height: 46px; border-radius: 12px;
  border: 1.5px solid var(--trait); background: var(--surface); cursor: pointer; font-size: 14px; text-align: left;
}
.pilotage button[aria-pressed="true"] { border-color: var(--or); background: var(--or-clair); }
.pilotage .note { font-size: 13px; color: var(--encre-douce); margin-top: 8px; min-height: 1.4em; }

/* ------------------------------------------------------------ bilan */
.score { text-align: center; padding: 26px 18px; }
.score .bilan-image { display: block; width: 120px; height: auto; margin: 0 auto 12px; border-radius: 18px; }
.score .grand { font-family: var(--titre); font-size: 54px; font-weight: 700; line-height: 1; }
.chiffres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 14px 0; }
.chiffres .bloc { padding: 14px 10px; text-align: center; }
.chiffres .val { font-family: var(--titre); font-size: 26px; font-weight: 700; }
.chiffres .lib { font-size: 12px; color: var(--encre-douce); }

/* ------------------------------------------------------------ pages de texte */
.texte-long .bloc { margin-bottom: 12px; }
.texte-long h3 { margin-bottom: 6px; }
.champ { display: grid; gap: 6px; margin-bottom: 14px; }
.champ label { font-weight: 600; font-size: 14px; }
.champ input, .champ select {
  font: inherit; padding: 12px 14px; border-radius: 12px; border: 1.5px solid var(--trait);
  background: var(--surface); color: var(--encre); min-height: 48px; width: 100%;
}
.interrupteur { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.interrupteur input { width: 24px; height: 24px; accent-color: var(--vert); }
.avis { background: var(--or-clair); border-radius: 12px; padding: 12px 14px; font-size: 14px; margin: 12px 0; }
.erreur { background: var(--rouge-clair); border-radius: 12px; padding: 14px; }
.vide { text-align: center; padding: 30px 10px; color: var(--encre-douce); }
.archive-ligne { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--trait); }
.archive-ligne:last-child { border-bottom: 0; }

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

/* ------------------------------------------------------------ coup de sac, vérification, flair */
.rangee-hero { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.btn-sac { background: transparent; color: inherit; border: 1.5px solid currentColor; opacity: .92; }
.verif {
  background: var(--or-clair); border-left: 4px solid var(--or); border-radius: 10px;
  padding: 10px 12px; margin-bottom: 12px; font-size: 14px;
}
.flair { margin-top: 18px; }
.flair h3 { margin-bottom: 8px; }
.flair p { font-size: 15px; margin-bottom: 8px; }
.flair p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------ date du test, conseil de rythme */
.date-test { margin-top: 18px; }
.date-test input[type="date"] {
  flex: 1 1 auto; font: inherit; padding: 10px 12px; min-height: 48px; border-radius: 12px;
  border: 1.5px solid var(--trait); background: var(--surface); color: var(--encre);
}
.lien-texte { background: none; border: 0; padding: 0; color: var(--vert); text-decoration: underline; cursor: pointer; font: inherit; }
.conseil-carte { margin: 2px 0 8px; color: var(--encre); }
.date-test .btn { flex: 0 0 auto; white-space: nowrap; }

/* ------------------------------------------------------------ paquets en pause */
.pauses { margin-top: 14px; background: var(--surface); border: 1px solid var(--trait); border-radius: 14px; padding: 12px 16px; }
.pauses summary { cursor: pointer; font-weight: 600; color: var(--encre-douce); }
.pause-ligne { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 0 0; }

/* ------------------------------------------------------------ ambiance « cochon » (la porcherie d'Agathe)
   Mêmes variables que le jardin (leurs noms viennent du vert d'origine), autres
   teintes : framboise et rose. Le stade « solide » reste le plus foncé. */
:root[data-ambiance="cochon"] {
  --fond: #fbf3f5; --surface: #fffafb; --surface-2: #f6e6eb; --encre: #2b1d22;
  --encre-douce: #6e5a61; --trait: #ecd5dc; --vert: #b8336a; --vert-clair: #f9dde7;
  --vert-vif: #d4557f; --terre: #8a4b14; --terre-clair: #f6e3cf;
  --graine: #e5cfd6; --pousse: #f2a7bd; --jeune: #e0789a; --plante: #c44d77; --arbre: #8e2a55;
}
@media (prefers-color-scheme: dark) {
  :root[data-ambiance="cochon"]:not([data-theme="light"]) {
    --fond: #1b1316; --surface: #251a1e; --surface-2: #2f2126; --encre: #f6ecef;
    --encre-douce: #c0a9b1; --trait: #3d2b31; --vert: #f08cae; --vert-clair: #3f1f2c;
    --vert-vif: #f39bb5; --terre: #e3a46a; --terre-clair: #3a2a1c;
    --graine: #5a4249; --pousse: #9c5a70; --jeune: #c06b8a; --plante: #e88aab; --arbre: #f7c0d2;
  }
}
:root[data-ambiance="cochon"][data-theme="dark"] {
  --fond: #1b1316; --surface: #251a1e; --surface-2: #2f2126; --encre: #f6ecef;
  --encre-douce: #c0a9b1; --trait: #3d2b31; --vert: #f08cae; --vert-clair: #3f1f2c;
  --vert-vif: #f39bb5; --terre: #e3a46a; --terre-clair: #3a2a1c;
  --graine: #5a4249; --pousse: #9c5a70; --jeune: #c06b8a; --plante: #e88aab; --arbre: #f7c0d2;
}

/* ------------------------------------------------------------ le cochon rieur (porcherie) */
.emoji-svg { display: inline-block; width: 1.25em; height: 1.25em; vertical-align: -0.28em; }
.legende .emoji-svg { width: 1.15em; height: 1.15em; }
.hero .deco .deco-svg { width: 104px; height: 104px; }
.fete { position: relative; height: 176px; display: flex; justify-content: center; align-items: flex-end; overflow: hidden; margin: -6px -10px 6px; }
.fete-cochon { width: 156px; height: 156px; transform-origin: 50% 92%; animation: cochon-rebond 0.9s ease-in-out infinite; }
@keyframes cochon-rebond {
  0%, 100% { transform: translateY(0) rotate(-5deg) scale(1, 1); }
  25%      { transform: translateY(-22px) rotate(4deg) scale(1.04, 0.98); }
  50%      { transform: translateY(0) rotate(6deg) scale(1.06, 0.92); }
  75%      { transform: translateY(-10px) rotate(-3deg) scale(0.98, 1.04); }
}
.confettis { position: absolute; inset: 0; pointer-events: none; }
.confettis i {
  position: absolute; top: -16px; width: 8px; height: 14px; border-radius: 2px; opacity: .9;
  animation-name: confetti-tombe; animation-timing-function: linear; animation-iteration-count: infinite;
}
@keyframes confetti-tombe {
  from { transform: translateY(-20px) rotate(0deg); }
  to   { transform: translateY(200px) rotate(620deg); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .fete-cochon, .confettis i { animation: none; }
  .confettis { display: none; }
}
/* Le GIF du bilan au milieu des confettis : au-dessus d'eux, et qui rebondit un peu. */
.fete .bilan-image { position: relative; z-index: 1; margin-bottom: 0; animation: cochon-rebond 0.9s ease-in-out infinite; transform-origin: 50% 92%; }
@media (prefers-reduced-motion: reduce) { .fete .bilan-image { animation: none; } }