/* Carnet CS Caprin. Repris de la maquette : une colonne de lecture, onglets en haut,
   repères en forme de boucle d'oreille jaune (boucle d'identification caprine). */
:root{
  --bg:#eef1ec;        /* petit-lait */
  --paper:#f9faf7;
  --ink:#1f2a27;
  --muted:#56625c;
  --line:#d3dad4;
  --tag:#f2c230;       /* jaune boucle */
  --tag-ink:#2a2306;
  --accent:#2f6b57;    /* vert prairie */
  --accent-soft:#dcebe3;
  --good:#2f7a46; --bad:#a83a2c;
  --f-display:"Gloock", Georgia, "Times New Roman", serif;
  --f-body:"Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-data:"IBM Plex Mono", ui-monospace, Menlo, monospace;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#141a18; --paper:#1b2321; --ink:#e7ece8; --muted:#a3b0a9; --line:#2e3a36;
  --tag:#e8b923; --tag-ink:#231c02; --accent:#7fc3a6; --accent-soft:#213a31; --good:#6cc287; --bad:#ec8a7b; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#141a18; --paper:#1b2321; --ink:#e7ece8; --muted:#a3b0a9; --line:#2e3a36;
  --tag:#e8b923; --tag-ink:#231c02; --accent:#7fc3a6; --accent-soft:#213a31; --good:#6cc287; --bad:#ec8a7b; color-scheme:dark}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:18px;line-height:1.55}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--paper)}
.wrap{max-width:720px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
a{color:var(--accent)}
[hidden]{display:none !important}

header.top{background:var(--paper);border-bottom:1px solid var(--line);position:sticky;top:env(safe-area-inset-top,0px);z-index:5}
header.top .wrap{padding-block:12px 0}
.brand{display:flex;align-items:center;gap:10px}
.brand h1{font-family:var(--f-display);font-weight:400;font-size:1.45rem;margin:0;letter-spacing:.01em}
.brand small{color:var(--muted);font-size:.85rem}
.brand .moi{margin-left:auto;font-size:.85rem;color:var(--muted);text-decoration:none;white-space:nowrap}
nav.tabs{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;margin-top:8px}
nav.tabs::-webkit-scrollbar{display:none}
nav.tabs a{flex:none;text-decoration:none;color:var(--muted);padding:8px 11px 10px;border-bottom:3px solid transparent;font-weight:700;font-size:.95rem;white-space:nowrap}
nav.tabs a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--tag)}
nav.tabs a:focus-visible,button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

main .wrap{padding-block:24px 72px}
section.view{display:flex;flex-direction:column;gap:22px}
h2{font-family:var(--f-display);font-weight:400;font-size:2rem;line-height:1.15;margin:0;text-wrap:balance}
h3{font-size:1.12rem;margin:0 0 6px}
p{margin:0}
.lead{font-size:1.06rem;color:var(--muted);max-width:62ch}
.petit{font-size:.9rem;color:var(--muted)}
.eyebrow{font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:700;margin:0}

/* boucle d'identification */
.tag{display:inline-grid;place-items:center;min-width:38px;height:44px;padding:0 8px;background:var(--tag);color:var(--tag-ink);
  font-family:var(--f-data);font-size:.95rem;border-radius:12px 12px 18px 18px;position:relative;flex:none}
.tag::before{content:"";position:absolute;top:5px;width:7px;height:7px;border-radius:50%;background:var(--bg)}
.tag span{margin-top:8px}
.tag.gris{background:var(--line);color:var(--muted)}
.tag.ok{background:var(--good);color:var(--paper)}

.block{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:18px}
.block > * + *{margin-top:10px}
.calm{background:var(--accent-soft);border-radius:14px;padding:16px 18px}
.calm p + p,.calm p + ul,.calm ul + p{margin-top:8px}
ul.facts{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
ul.facts li{display:grid;grid-template-columns:1fr auto;gap:12px;border-bottom:1px dashed var(--line);padding-bottom:8px}
ul.facts li:last-child{border-bottom:0;padding-bottom:0}
ul.facts b{font-family:var(--f-data);font-weight:500;text-align:right;white-space:nowrap}
ul.plain{margin:0;padding-left:1.2em}
ul.plain li + li{margin-top:4px}
.num{font-family:var(--f-data);font-weight:500}

.chapters{display:grid;grid-template-columns:1fr;gap:10px}
.chapters a,.chapters .bientot{display:flex;gap:14px;align-items:center;text-decoration:none;color:inherit;background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:14px}
.chapters a:hover{border-color:var(--accent)}
.chapters .bientot{opacity:.65;border-style:dashed}
.chapters div{min-width:0}
.chapters small{color:var(--muted);display:block}

/* planning */
.days{display:flex;flex-direction:column;gap:6px}
.day{display:grid;grid-template-columns:62px 1fr;gap:12px;padding:10px 12px;border-radius:10px;background:var(--paper);border:1px solid var(--line)}
.day.today{border-color:var(--tag);box-shadow:0 0 0 2px var(--tag) inset}
.day.past{opacity:.55}
.day .d{font-family:var(--f-data);font-size:.85rem;color:var(--muted);line-height:1.3}
.day .d strong{display:block;color:var(--ink);font-size:1.05rem}
.day .c{min-width:0;display:flex;flex-direction:column;gap:2px}
.day .c a{font-size:.92rem}
.day .moment{font-size:.78rem;color:var(--muted);font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.day.off{background:transparent;border-style:dashed}
.day.entreprise{background:var(--accent-soft);border-color:transparent}
.day.epreuve{border-color:var(--bad);box-shadow:0 0 0 2px var(--bad) inset}
.day .aujourdhui{font-weight:700}
.semaine-nav{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.semaine-nav h3{margin:0 auto 0 0}
.cles{display:flex;flex-direction:column;gap:6px}
.cles li{list-style:none;display:flex;gap:10px;align-items:baseline}
.cles{margin:0;padding:0}
.cles .num{min-width:5.5em}

/* tables */
.tbl{overflow-x:auto;border:1px solid var(--line);border-radius:12px;background:var(--paper)}
table{border-collapse:collapse;width:100%;font-size:.95rem}
th,td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
tr:last-child td{border-bottom:0}
td:first-child{font-weight:700;white-space:nowrap}
.tbl.suivi td{white-space:nowrap}

/* cycle 21 jours */
.cycle{display:flex;height:46px;border-radius:10px;overflow:hidden;font-size:.85rem;font-weight:700}
.cycle div{display:grid;place-items:center;padding:0 6px;text-align:center;line-height:1.15}
.cycle .fol{flex:3.5;background:var(--tag);color:var(--tag-ink)}
.cycle .lut{flex:17.5;background:var(--accent);color:var(--paper)}
.scale{display:flex;justify-content:space-between;font-family:var(--f-data);font-size:.78rem;color:var(--muted);margin-top:4px}

/* chaîne hormonale */
.chain{display:flex;flex-direction:column;gap:0;align-items:stretch}
.chain .n{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:10px 14px}
.chain .n b{display:block}
.chain .arrow{align-self:center;color:var(--muted);font-family:var(--f-data);font-size:.85rem;padding:4px 0}

/* protocole éponge */
.steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.steps li{display:flex;gap:12px;align-items:center}
.steps li div{min-width:0}

/* mots et livret */
dl.mots{margin:0;display:flex;flex-direction:column;gap:10px}
dl.mots dt{font-weight:700}
dl.mots dd{margin:0;color:var(--muted)}
.livret{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.livret li{display:flex;gap:12px;align-items:flex-start}
.livret li > div{min-width:0;flex:1}
.livret details{margin-top:4px}
.livret summary{cursor:pointer;color:var(--accent);font-size:.92rem;font-weight:700}
.livret .aide{border-left:4px solid var(--tag);padding:6px 10px;margin-top:6px;font-size:.95rem}
.pastille{display:inline-block;font-family:var(--f-data);font-size:.75rem;color:var(--muted)}

/* fiches */
.card-wrap{perspective:1000px}
.flash{width:100%;min-height:240px;border:0;padding:0;background:none;cursor:pointer;color:inherit;font:inherit;text-align:left}
.flash .inner{position:relative;min-height:240px;transition:transform .45s;transform-style:preserve-3d}
.flash.flipped .inner{transform:rotateY(180deg)}
.flash .face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:16px;padding:22px;display:flex;flex-direction:column;justify-content:center;gap:10px;border:1px solid var(--line)}
.flash .front{background:var(--paper)}
.flash .back{background:var(--accent-soft);transform:rotateY(180deg)}
.flash .q{font-family:var(--f-display);font-size:1.4rem;line-height:1.25}
.flash .hint{font-size:.85rem;color:var(--muted)}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.btn{font:inherit;font-weight:700;border-radius:999px;border:1px solid var(--line);background:var(--paper);color:var(--ink);padding:10px 18px;cursor:pointer;text-decoration:none;display:inline-block;line-height:1.3}
.btn.primary{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn.petit{padding:6px 12px;font-size:.88rem}
.btn[disabled]{opacity:.5;cursor:default}
.btn.fait{background:var(--good);border-color:var(--good);color:var(--paper)}
.counter{font-family:var(--f-data);color:var(--muted);font-size:.9rem;margin-left:auto}
.puces{display:flex;gap:6px;flex-wrap:wrap}
.puce{font:inherit;font-size:.9rem;font-weight:700;border-radius:999px;border:1px solid var(--line);background:var(--paper);color:var(--muted);padding:6px 12px;cursor:pointer}
.puce[aria-pressed="true"]{background:var(--tag);color:var(--tag-ink);border-color:var(--tag)}

/* quiz */
.opts{display:flex;flex-direction:column;gap:8px}
.opt{font:inherit;text-align:left;padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:var(--paper);color:var(--ink);cursor:pointer}
.opt.right{border-color:var(--good);box-shadow:0 0 0 2px var(--good) inset}
.opt.wrong{border-color:var(--bad);box-shadow:0 0 0 2px var(--bad) inset}
.opt[disabled]{cursor:default}
.expl{border-left:4px solid var(--tag);padding:8px 12px;background:var(--paper);border-radius:0 10px 10px 0}
.progress{height:6px;background:var(--line);border-radius:4px;overflow:hidden}
.progress div{height:100%;background:var(--tag);transition:width .3s}
.score{font-family:var(--f-display);font-size:3rem;line-height:1}

/* listes à cocher */
.coches{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.coches li{display:flex;gap:12px;align-items:flex-start;background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.coches li > div{flex:1;min-width:0}
.coches input[type=checkbox]{width:24px;height:24px;margin:2px 0 0;accent-color:var(--good);flex:none}
.coches .fait{color:var(--muted)}
.acquis{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.acquis li{display:flex;gap:10px;align-items:baseline}
.acquis li::before{content:"✓";color:var(--good);font-weight:700}

/* formulaires */
form.pile{display:flex;flex-direction:column;gap:12px}
label{font-weight:700;display:flex;flex-direction:column;gap:6px}
input[type=text],input[type=password],select,textarea{font:inherit;font-weight:400;padding:11px 12px;border-radius:10px;border:1px solid var(--line);background:var(--paper);color:var(--ink);width:100%}
textarea{min-height:90px;resize:vertical}
.erreur{color:var(--bad);font-weight:700}
.ok-msg{color:var(--good);font-weight:700}
.depot{border:2px dashed var(--line);border-radius:14px;padding:18px;display:flex;flex-direction:column;gap:12px;background:var(--paper)}
.docs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.docs li{display:flex;gap:12px;align-items:center;background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.docs li > div{flex:1;min-width:0}
.docs a.nom{font-weight:700;word-break:break-word}

/* connexion */
.connexion{max-width:420px;margin:12vh auto 0;display:flex;flex-direction:column;gap:18px}
.connexion .brand{justify-content:center}

/* suivi */
.chiffres{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
.chiffres div{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:12px}
.chiffres b{font-family:var(--f-display);font-weight:400;font-size:1.6rem;display:block;line-height:1.1}
.chiffres span{font-size:.88rem;color:var(--muted)}

/* ---------- logo ---------- */
.logo{width:52px;height:52px;flex:none;display:block}
.logo.grand{width:96px;height:96px}

/* ---------- le troupeau ---------- */
.chevre{color:var(--ink);flex:none}
.pre{display:flex;flex-wrap:wrap;gap:2px;align-items:center;min-height:30px}
.pre.grand{gap:4px;background:var(--accent-soft);border-radius:14px;padding:14px}
.pre .plus{font-family:var(--f-data);font-size:.9rem;color:var(--muted);margin-left:6px}
.troupeau-bandeau{display:flex;flex-direction:column;gap:6px;text-decoration:none;color:inherit;background:var(--accent-soft);border-radius:14px;padding:12px 16px}
.troupeau-bandeau:hover{outline:2px solid var(--accent)}
.badges{display:grid;grid-template-columns:1fr;gap:8px}
.badge{display:flex;gap:12px;align-items:center;background:var(--paper);border:1px dashed var(--line);border-radius:12px;padding:10px 12px;opacity:.7}
.badge.gagne{border-style:solid;border-color:var(--tag);opacity:1}
.badge small{display:block;color:var(--muted)}
.badge-neuf{background:var(--tag);color:var(--tag-ink);border-radius:10px;padding:8px 12px;display:inline-block;animation:pop .5s ease-out}
.gain{font-weight:700;color:var(--good)}
@media (min-width:640px){.badges{grid-template-columns:1fr 1fr}}

/* ---------- accueil ---------- */
.carte-soir{display:flex;gap:14px;align-items:center;text-decoration:none;color:var(--tag-ink);background:var(--tag);border-radius:16px;padding:16px 18px;box-shadow:0 2px 0 rgba(0,0,0,.12)}
.carte-soir .chevre{color:var(--tag-ink)}
.carte-soir strong{display:block;font-size:1.15rem}
.carte-soir span{display:block;font-size:.95rem}
.carte-soir.faite{background:var(--accent-soft);color:var(--ink)}
.carte-soir.faite .chevre{color:var(--ink)}
.carte-soir:active{transform:translateY(1px)}
.pratique{border-left:6px solid var(--accent)}
.pratique h3{font-family:var(--f-display);font-weight:400;font-size:1.5rem;margin:0}
.pratique ul.facts b{font-family:var(--f-body);font-weight:700;font-size:.82rem;color:var(--muted)}
.epreuve-txt{color:var(--bad);font-weight:700}
details summary{cursor:pointer;color:var(--accent);font-weight:700;margin-top:8px}

/* ---------- cours ---------- */
.idee{background:var(--paper);border-left:6px solid var(--tag);border-radius:0 14px 14px 0;padding:12px 16px;font-size:1.08rem}
.idee p{margin-top:4px}
.module .row{flex-wrap:nowrap}
.jauge{height:8px;background:var(--line);border-radius:4px;overflow:hidden}
.jauge div{height:100%;background:var(--accent)}

/* ---------- jeux ---------- */
.jeux-grille{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.jeux-grille a{display:flex;flex-direction:column;gap:2px;text-decoration:none;color:inherit;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:12px;min-height:76px}
.jeux-grille a:hover{border-color:var(--accent)}
.jeux-grille small{color:var(--muted);font-size:.85rem;line-height:1.3}
.jeu{display:flex;flex-direction:column;gap:12px}
.defs{display:flex;flex-direction:column;gap:8px}
.mots-jeu .puce{font-size:1rem;padding:8px 14px}
.mots-jeu .puce.trouve{opacity:.35;text-decoration:line-through}
ol.suite{margin:0;padding-left:1.6em;display:flex;flex-direction:column;gap:6px}
ol.suite li{background:var(--accent-soft);border-radius:10px;padding:8px 12px;animation:pop .3s ease-out}
.opt.wrong{animation:secoue .4s}
.bravo{color:var(--good);font-weight:700}
.pose{display:flex;flex-direction:column;gap:14px}
.fin{text-align:center;display:flex;flex-direction:column;gap:10px;align-items:center}
.fin .pre{justify-content:center}
.etapes-soir{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.etapes-soir li{display:flex;gap:12px;align-items:center;background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:8px 12px}
.etapes-soir li.en-cours{border-color:var(--tag);box-shadow:0 0 0 2px var(--tag) inset}
.etapes-soir small{display:block;color:var(--muted)}
@keyframes secoue{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
@keyframes pop{0%{transform:scale(.9);opacity:0}100%{transform:scale(1);opacity:1}}
@media (prefers-reduced-motion:reduce){.opt.wrong,ol.suite li,.badge-neuf{animation:none}}

/* tableau du livret déjà rempli par Valentine : replié, pour se vérifier */
details.verif{background:var(--paper);border:1px dashed var(--line);border-radius:12px;padding:10px 14px}
details.verif summary{margin:0}
details.verif[open] summary{margin-bottom:10px}

/* historique (suivi) */
ul.historique{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
ul.historique li{display:flex;flex-direction:column;gap:1px;border-bottom:1px dashed var(--line);padding-bottom:6px}
ul.historique li:last-child{border-bottom:0}
ul.historique li strong::first-letter{text-transform:uppercase}
.compte ul.facts b{font-family:var(--f-body);font-size:.9rem}

@media (min-width:640px){.chapters{grid-template-columns:1fr 1fr}}
@media (prefers-reduced-motion:reduce){.flash .inner,.progress div{transition:none}}
@media print{header.top{display:none}}