/* Apres — registre sobre. Aucune couleur vive, aucune recompense, aucun classement. */
:root{
  --fond:#faf9f7; --carte:#fff; --encre:#1a1a1a; --encre-doux:#5c5852;
  --trait:#e3dfd8; --accent:#3d5a5c; --retard:#8c3b3b; --tardif:#8a6d3b; --argent:#4a6b46;
  --r:10px; --ombre:0 1px 2px rgba(0,0,0,.05), 0 4px 12px rgba(0,0,0,.04);
}
@media (prefers-color-scheme: dark){
  :root{ --fond:#16171a; --carte:#1e2024; --encre:#eceae6; --encre-doux:#9b968e;
         --trait:#2e3138; --accent:#8fb3b5; --retard:#d98a8a; --tardif:#c9a866; --argent:#93bd8d;
         --ombre:0 1px 2px rgba(0,0,0,.3), 0 4px 14px rgba(0,0,0,.25); }
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--fond); color:var(--encre);
  font:16px/1.6 ui-serif, Georgia, "Iowan Old Style", serif;
  padding:0 0 4rem; -webkit-font-smoothing:antialiased;
}
.tete{padding:2.5rem 1.25rem 1.25rem; max-width:44rem; margin:0 auto}
.tete h1{font-size:1.9rem; margin:0; letter-spacing:-.02em; font-weight:600}
.sous{margin:.2rem 0 0; color:var(--encre-doux); font-size:1rem}

.ecran{display:none; max-width:44rem; margin:0 auto; padding:0 1.25rem}
.ecran.actif{display:block}

.carte{background:var(--carte); border:1px solid var(--trait); border-radius:var(--r);
  padding:1.25rem; margin:0 0 1rem; box-shadow:var(--ombre)}
.carte.discret{background:transparent; box-shadow:none}
.carte h2{font-size:1rem; margin:0 0 .6rem; letter-spacing:.01em; font-weight:600}
.intro{font-size:1.05rem; margin-top:0}
.note{color:var(--encre-doux); font-size:.86rem}

.champ{display:block; margin:1.2rem 0 .8rem}
.champ span{display:block; font-size:.86rem; color:var(--encre-doux); margin-bottom:.35rem}
.champ input{width:100%; padding:.75rem; font:inherit; font-size:1rem;
  background:var(--fond); color:var(--encre);
  border:1px solid var(--trait); border-radius:8px}

button{font:inherit; cursor:pointer}
.principal{width:100%; padding:.85rem; font-size:1rem; font-weight:600;
  background:var(--accent); color:var(--fond); border:0; border-radius:8px}
.lien{display:block; width:100%; margin-top:.5rem; padding:.6rem; background:none;
  border:0; color:var(--encre-doux); text-decoration:underline; font-size:.9rem}
.lien.danger{color:var(--retard)}

/* progression — le produit, pas un ornement */
.progression{margin:.5rem 0 1.25rem}
.barre{height:5px; background:var(--trait); border-radius:3px; overflow:hidden}
.remplie{height:100%; width:0; background:var(--accent); transition:width .35s ease}
.compte{margin:.5rem 0 0; font-size:.88rem; color:var(--encre-doux)}

.filtres{display:flex; gap:.4rem; flex-wrap:wrap; margin-bottom:1rem}
.filtre{padding:.4rem .75rem; font-size:.85rem; border-radius:999px;
  border:1px solid var(--trait); background:var(--carte); color:var(--encre-doux)}
.filtre.actif{background:var(--accent); color:var(--fond); border-color:var(--accent)}

.groupe{margin:0 0 1.5rem}
.groupe > h2{font-size:.8rem; text-transform:uppercase; letter-spacing:.08em;
  color:var(--encre-doux); margin:0 0 .6rem; font-family:system-ui, sans-serif}

.item{display:flex; gap:.85rem; align-items:flex-start; background:var(--carte);
  border:1px solid var(--trait); border-left:3px solid var(--trait);
  border-radius:var(--r); padding:.9rem 1rem; margin-bottom:.5rem; box-shadow:var(--ombre)}
.item.retard{border-left-color:var(--retard)}
.item.tardif{border-left-color:var(--tardif)}
.item.argent{border-left-color:var(--argent)}
.item.faite{opacity:.5}
.item.faite .titre{text-decoration:line-through}
.coche{flex:0 0 auto; width:22px; height:22px; margin-top:.15rem; accent-color:var(--accent)}
.corps{flex:1; min-width:0}
.titre{font-weight:600; display:block}
.meta{font-size:.82rem; color:var(--encre-doux); margin-top:.15rem;
  font-family:system-ui, sans-serif}
.meta .r{color:var(--retard); font-weight:600}
.meta .o{color:var(--tardif); font-weight:600}
.meta .a{color:var(--argent); font-weight:600}
.avoir{font-size:.8rem; color:var(--encre-doux); background:none; border:0;
  text-decoration:underline; padding:.2rem 0; font-family:system-ui, sans-serif}

.pieges ul{margin:0; padding-left:1.1rem}
.pieges li{margin-bottom:.5rem; font-size:.94rem}

/* fiche */
/* L'attribut `hidden` ne suffit PAS : la regle `[hidden]{display:none}` du
   navigateur perd contre `.voile{display:flex}` (specificite egale, feuille
   auteur prioritaire). Sans la ligne ci-dessous, le voile sombre reste affiche
   en permanence par-dessus toute la page, avec le panneau vide au milieu.
   Constate le 02/08 : je l'avais d'abord pris pour un artefact de capture. */
.voile[hidden]{display:none}
.voile{position:fixed; inset:0; background:rgba(0,0,0,.45);
  display:flex; align-items:flex-end; justify-content:center; z-index:20}
.panneau{background:var(--carte); width:100%; max-width:44rem; max-height:88vh;
  overflow:auto; border-radius:var(--r) var(--r) 0 0; padding:1.5rem 1.25rem 2.5rem}
.panneau h2{margin-top:0}
.panneau .bloc{margin:1rem 0}
.panneau .bloc h3{font-size:.78rem; text-transform:uppercase; letter-spacing:.08em;
  color:var(--encre-doux); margin:0 0 .3rem; font-family:system-ui, sans-serif}
.avert{border-left:3px solid var(--retard); padding-left:.8rem; color:var(--encre)}
.reserve{font-size:.85rem; color:var(--encre-doux); border:1px dashed var(--trait);
  border-radius:8px; padding:.7rem}
.journal textarea{width:100%; min-height:5rem; padding:.6rem; font:inherit; font-size:.92rem;
  background:var(--fond); color:var(--encre); border:1px solid var(--trait); border-radius:8px}

.pied{max-width:44rem; margin:2.5rem auto 0; padding:0 1.25rem;
  color:var(--encre-doux); font-size:.8rem; text-align:center;
  font-family:system-ui, sans-serif}
.pied .v{opacity:.6}
@media (min-width:640px){ .voile{align-items:center} .panneau{border-radius:var(--r)} }