/* Chrome de l'application UNIQUEMENT : écrans, navigation, boutons, saisie.
 *
 * ⚠ AUCUN sélecteur du rapport ici. La feuille du rapport a UNE source, et
 * c'est js/report-style.js. Bilan QA et le Bilan de l'Estime de Soi gardent
 * la leur en double avec un avertissement « toute retouche se fait aux deux
 * endroits » — c'est-à-dire qu'ils comptent sur la vigilance là où un banc
 * suffit. Le banc d'interface vérifie ici l'ABSENCE de ces sélecteurs, y
 * compris dans les commentaires : ne pas les citer, même en exemple. */

:root {
  --fond: #f1f4f2; --carte: #fff; --texte: #16201f; --doux: #5f6c69;
  --trait: #d3dbd8; --ferme: #a85c50; --ouvre: #517d76; --repere: #4a6fa5;
  --sur-repere: #ffffff;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --serif: Georgia, 'Iowan Old Style', 'Times New Roman', serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="clair"]) {
    --fond: #111817; --carte: #18211f; --texte: #e2e8e6; --doux: #8d9995;
    --trait: #2b3634; --ferme: #d08b7e; --ouvre: #7fb3a9; --repere: #7b9fd4;
    --sur-repere: #111817;
  }
}
:root[data-theme="sombre"] {
  --fond: #111817; --carte: #18211f; --texte: #e2e8e6; --doux: #8d9995;
  --trait: #2b3634; --ferme: #d08b7e; --ouvre: #7fb3a9; --repere: #7b9fd4;
  --sur-repere: #111817;
}

* { box-sizing: border-box; }
body {
  margin: 0; padding: 0 1rem 5rem; background: var(--fond); color: var(--texte);
  font: 17px/1.6 var(--sans); -webkit-font-smoothing: antialiased;
}
main { max-width: 44rem; margin: 0 auto; }
main:focus { outline: none; }
/* Quand le focus fait défiler (une question manquante, une tuile à ranger), l'élément
   ne doit pas se retrouver sous la barre collante. */
main, fieldset, .tuiles { scroll-margin-top: 4rem; }
h1, h2, h3 { text-wrap: balance; line-height: 1.2; }
h1 { font-family: var(--serif); font-weight: 400; font-size: 2.1rem; margin: 2rem 0 .4rem; }
h2 { font-size: 1.25rem; margin: 2rem 0 .6rem; }
.doux { color: var(--doux); }

/* --- barre de progression --- */
.entete {
  position: sticky; top: 0; background: var(--fond); padding: .75rem 0 .6rem;
  border-bottom: 1px solid var(--trait); z-index: 5;
}
.progression { display: flex; align-items: center; gap: .75rem; font-size: .82rem; color: var(--doux); }
.piste { flex: 1; height: .4rem; background: var(--trait); }
.piste > span { display: block; width: 0; height: 100%; background: var(--repere); }
/* Sans style="…" en ligne : la CSP de production (style-src 'self') les bloque. */
.actions.serre { margin: 0; }
.compte { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* --- questions --- */
.consigne {
  font-family: var(--serif); font-size: 1.1rem; margin: 1.4rem 0 1rem;
  padding-left: .9rem; border-left: 3px solid var(--repere);
}
fieldset { border: 1px solid var(--trait); background: var(--carte); margin: 0 0 1rem; padding: 1rem 1.1rem; }
fieldset.manque { border-color: var(--ferme); }

/* La légende FLOTTE, et ce n'est pas un détail de goût.
 *
 * Une <legend> par défaut interrompt la bordure du haut du cadre. Tant que
 * l'énoncé tient sur une ligne, c'est joli. Dès qu'il passe à deux — et
 * beaucoup des dix faits et des cinq couvertures de domaine sont longs — la seconde ligne retombe à l'intérieur
 * du cadre et chevauche le trait. Vu à l'écran, invisible dans les bancs.
 *
 * Flottée sur toute la largeur, la légende redevient un bloc ordinaire à
 * l'intérieur du cadre : la bordure se dessine proprement autour de tout, quel
 * que soit le nombre de lignes. L'élément reste une <legend>, donc son rôle
 * d'étiquette de groupe pour les lecteurs d'écran ne bouge pas. */
legend { float: left; width: 100%; padding: 0; margin: 0 0 .2rem; font-size: 1.02rem; }
/* `.choix` est un conteneur flex, donc un contexte de formatage à part : il
   CONTOURNE le flottant au lieu de passer dessous, et les réponses se
   retrouvent coincées à droite de la légende. Le `clear` est indissociable du
   `float` ci-dessus — ne pas retirer l'un sans l'autre. */
.choix, .rappel-manque { clear: both; }
fieldset::after { content: ''; display: table; clear: both; }
.rappel-manque { color: var(--ferme); font-size: .8rem; margin: .4rem 0 0; }
.choix { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .8rem; }
.choix label {
  flex: 1 1 8rem; border: 1px solid var(--trait); padding: .55rem .7rem; cursor: pointer;
  font-size: .88rem; display: flex; align-items: center; gap: .5rem; background: var(--fond);
}
.choix input { margin: 0; }
.choix label:hover { border-color: var(--repere); }
.choix input:checked + span { font-weight: 600; }
.choix label:has(input:checked) { border-color: var(--repere); background: var(--carte); }
.choix input:focus-visible { outline: 2px solid var(--repere); outline-offset: 2px; }

/* --- champs libres et curseurs --- */
label.bloc { display: block; margin: 1rem 0 .3rem; font-size: .95rem; }
textarea, input[type="text"], input[type="date"] {
  width: 100%; font: inherit; font-size: .96rem; padding: .6rem .7rem;
  border: 1px solid var(--trait); background: var(--carte); color: var(--texte);
}
textarea { min-height: 4.5rem; resize: vertical; }
/* Les listes déroulantes du carnet : fréquence d'un critère, anti-valeur du
   soir, ce qu'elle a coûté. Même cadre que les champs libres. */
select {
  font: inherit; padding: .5rem .6rem; border: 1px solid var(--trait);
  background: var(--carte); color: var(--texte); width: 100%;
}
.curseur { display: grid; grid-template-columns: 1fr 3rem; gap: .8rem; align-items: center; }
.curseur input[type="range"] { width: 100%; }
.curseur output { font-variant-numeric: tabular-nums; text-align: right; color: var(--doux); }

/* --- boutons --- */
.actions { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.6rem 0; }
button {
  font: inherit; font-size: .93rem; padding: .6rem 1.1rem; cursor: pointer;
  border: 1px solid var(--trait); background: var(--carte); color: var(--texte);
}
/* Le texte du bouton principal est un JETON, pas un littéral. L'accent
   s'éclaircit en thème sombre : du blanc dessus tombe à 2,71:1, très en
   dessous du minimum de 4,5. Le banc d'interface calcule ces deux rapports
   et échoue si l'un repasse sous le seuil. */
button.principal { background: var(--repere); border-color: var(--repere); color: var(--sur-repere); }
button:hover { border-color: var(--repere); }
button:focus-visible { outline: 2px solid var(--repere); outline-offset: 2px; }
button[disabled] { opacity: .45; cursor: default; }

/* --- témoins et bandeaux --- */
.temoin { font-size: .8rem; color: var(--doux); min-height: 1.2em; }
.bandeau {
  border: 1px solid var(--ferme); background: var(--carte); padding: .8rem 1rem;
  margin: 1rem 0; font-size: .92rem;
}
/* La confirmation d'effacement : le trait épais à gauche la sort du flux sans
   la déplacer. Elle se rend sous le bouton, là où le regard vient d'aller. */
.bandeau.alerte { border-left-width: 4px; }
.bandeau.alerte .actions { margin: .7rem 0 0; }
.liste-bilans { list-style: none; padding: 0; display: grid; gap: .6rem; }
.liste-bilans li {
  display: flex; flex-wrap: wrap; gap: .6rem; align-items: center;
  justify-content: space-between; border: 1px solid var(--trait);
  background: var(--carte); padding: .7rem .9rem;
}
.reglages { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; font-size: .85rem; }

/* Le piège de la semaine, en pied de chaque écran du programme : détaché du
   corps du texte sans être un avertissement. */
.piege { border-left: 2px solid var(--trait); padding-left: .8rem; font-size: .93rem; }

/* --- scénarios : deux cartes côte à côte, puis l'intensité sous celle choisie --- */
.cartes { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 37.5rem) { .cartes { grid-template-columns: 1fr; } }
.scenario + .scenario { margin-top: 2rem; }
.carte { width: 100%; text-align: left; padding: .8rem .9rem; font-size: .95rem; }
.carte.choisie { border-color: var(--repere); background: var(--carte); box-shadow: inset 0 0 0 2px var(--repere); }
.intensite { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin: .8rem 0 0; }
/* Sans ça, cliquer « nettement moi » ne changeait rien à l'écran : le bouton
   choisi porte la classe, mais rien ne la lisait. */
.intensite button.choisie { border-color: var(--repere); background: var(--carte); font-weight: 600; }
/* Une situation où il manque une réponse (pas de carte, ou pas d'intensité) :
   même liseré que les fieldsets incomplets, en bordure gauche puisque la
   section n'a pas de cadre propre. */
.scenario.manque { border-left: 3px solid var(--ferme); padding-left: .9rem; }
.temoin-page { font-size: .85rem; color: var(--doux); }

@media print { .entete, .actions, .reglages, .liste-bilans button { display: none; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }