/* Calculatrice « Ton ménage de boîte tient combien de jours ? » (/triago/calculatrice, lot 6 du 2026-004).
   Reprise telle quelle de la page du 2026-024 (commit b4bc735) : la CSP du site (style-src 'self') refuse
   un <style> en ligne, le style vit donc ici. Fraunces vient de fonts.css (aucun appel a Google). */

/* Palette du site éditeur : encre #0b1f4d, bleu #1e56e0, or #f3cd52. Tout passe par des variables. */
:root {
  --fond: #f4f7fd;
  --carte: #ffffff;
  --encre: #0b1f4d;
  --texte-doux: #3f4d75;
  --bleu: #1e56e0;
  --or: #f3cd52;
  --vert: #0b7a4b;
  --bordure: #d3dbee;
  --erreur: #b3261e;
  --fond-erreur: #fdecea;
  --fond-doux: #eaf0fc;
  --bouton-texte: #0b1f4d;
  --ombre: 0 1px 2px rgba(11, 31, 77, 0.08), 0 6px 20px rgba(11, 31, 77, 0.06);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fond: #0a1128;
    --carte: #121b3a;
    --encre: #eef1fb;
    --texte-doux: #b3bde0;
    --bleu: #8fadff;
    --or: #f3cd52;
    --vert: #5fdba3;
    --bordure: #2c3965;
    --erreur: #ff9d95;
    --fond-erreur: #3a1d24;
    --fond-doux: #1a2650;
    --bouton-texte: #0b1f4d;
    --ombre: 0 1px 2px rgba(0, 0, 0, 0.4);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --fond: #0a1128;
  --carte: #121b3a;
  --encre: #eef1fb;
  --texte-doux: #b3bde0;
  --bleu: #8fadff;
  --or: #f3cd52;
  --vert: #5fdba3;
  --bordure: #2c3965;
  --erreur: #ff9d95;
  --fond-erreur: #3a1d24;
  --fond-doux: #1a2650;
  --bouton-texte: #0b1f4d;
  --ombre: 0 1px 2px rgba(0, 0, 0, 0.4);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.55;
}
h1, h2, h3 {
  font-family: "Fraunces", Georgia, "Times New Roman", serif;
  line-height: 1.2;
  margin: 0;
  color: var(--encre);
}
p { margin: 0; }

.page { width: 100%; max-width: 1080px; margin: 0 auto; padding: 24px 16px 48px; }
.entete { margin-bottom: 20px; }
.entete .etiquette {
  display: inline-block; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--bleu); margin-bottom: 8px;
}
.entete h1 { font-size: clamp(1.6rem, 5.5vw, 2.5rem); font-weight: 700; }
.entete .sous-titre { margin-top: 10px; color: var(--texte-doux); max-width: 46rem; }

.grille { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 960px) {
  .grille { grid-template-columns: 340px minmax(0, 1fr); gap: 24px; }
  /* La carte des trois chiffres reste collée en haut de sa colonne (plus de position sticky : elle suivait
     le défilement et laissait un grand trou blanc au-dessus d'elle dès qu'on descendait vers l'étape 3). */
  .grille > .carte-saisie { align-self: start; }
}

.carte {
  background: var(--carte); border: 1px solid var(--bordure); border-radius: 14px;
  padding: 20px 16px; box-shadow: var(--ombre); min-width: 0;
}
@media (min-width: 768px) { .carte { padding: 24px; } }
.etape { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; }
.etape .pastille {
  flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--or); color: #0b1f4d;
  display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.9375rem;
}
.etape h2 { font-size: 1.1875rem; }

.etiquette-exemple {
  display: inline-block; margin-bottom: 14px; padding: 4px 12px; border-radius: 999px;
  background: var(--or); color: #0b1f4d; font-size: 0.875rem; font-weight: 700;
}

.champ { margin-bottom: 16px; }
.champ label { display: block; font-weight: 600; margin-bottom: 4px; }
.champ .aide { display: block; font-size: 0.875rem; color: var(--texte-doux); margin-bottom: 6px; }
.champ input {
  width: 100%; min-height: 48px; padding: 10px 12px; font: inherit; color: var(--encre);
  background: var(--carte); border: 2px solid var(--bordure); border-radius: 10px;
}
.champ input:focus-visible, button:focus-visible {
  outline: 3px solid var(--bleu); outline-offset: 2px;
}
.champ input[aria-invalid="true"] { border-color: var(--erreur); background: var(--fond-erreur); }
.champ .message-erreur { color: var(--erreur); font-size: 0.9375rem; margin-top: 6px; font-weight: 600; }
.champ .message-erreur:empty { display: none; }

.bouton {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px;
  padding: 10px 22px; border: 0; border-radius: 10px; background: var(--or); color: var(--bouton-texte);
  font: inherit; font-weight: 700; cursor: pointer; width: 100%;
}
.bouton:hover { filter: brightness(0.96); }
@media (min-width: 480px) { .bouton.auto { width: auto; } }

.resultat-vide { color: var(--texte-doux); }
.resultat h2 { font-size: clamp(1.4rem, 4.5vw, 1.9rem); }
.resultat .explication { margin-top: 8px; color: var(--texte-doux); }
.resultat .explication strong { color: var(--encre); }

.courbe-boite { margin-top: 16px; width: 100%; }
.courbe-boite svg { display: block; width: 100%; height: auto; overflow: visible; }
.courbe-boite text { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; font-size: 12px; fill: var(--texte-doux); }
.courbe-boite .axe { stroke: var(--bordure); stroke-width: 1; }
.courbe-boite .axe-fort { stroke: var(--texte-doux); stroke-width: 1.5; }
.courbe-boite .ligne-retard { fill: none; stroke: var(--bleu); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.courbe-boite .ligne-tri { fill: none; stroke: var(--vert); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.courbe-boite .bande-tri { fill: var(--vert); fill-opacity: 0.4; stroke: none; }
.courbe-boite .ligne-niveau { fill: none; stroke: var(--encre); stroke-width: 1.75; stroke-dasharray: 6 5; }
.courbe-boite .repere { stroke: var(--texte-doux); stroke-width: 1; stroke-dasharray: 2 4; }
.courbe-boite .point { fill: var(--or); stroke: var(--encre); stroke-width: 2.5; }
/* La valeur du niveau d'avant le ménage s'écrit sur l'axe, en gras ; l'étiquette du point a un contour
   de la couleur de la carte : la ligne bleue ne la raye pas. */
.courbe-boite .graduation-niveau { fill: var(--encre); font-weight: 700; }
.courbe-boite .etiquette-point { fill: var(--encre); font-weight: 700; font-size: 13px; paint-order: stroke; stroke: var(--carte); stroke-width: 5px; stroke-linejoin: round; }

.legende { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 6px; font-size: 0.9375rem; }
.legende li { display: flex; gap: 10px; align-items: center; }
.legende .trait { flex: none; width: 28px; height: 0; border-top: 3px solid; }
.legende .trait.retard { border-color: var(--bleu); }
.legende .trait.tri { border-color: var(--vert); }
.legende .trait.niveau { border-top: 2px dashed var(--encre); }

.phrase-tri { margin-top: 12px; color: var(--texte-doux); }

.temps-sauve { margin-top: 16px; padding: 14px 16px; border-radius: 12px; background: var(--fond-doux); }
.temps-sauve .titre { font-weight: 700; }
.temps-sauve .valeur { font-family: "Fraunces", Georgia, serif; font-size: 1.375rem; font-weight: 700; margin-top: 2px; }
.temps-sauve .estime { font-size: 0.875rem; color: var(--texte-doux); margin-top: 4px; }
.temps-sauve .note { margin-top: 10px; font-size: 0.9375rem; }

/* L'etape 3 se detache de la carte du resultat (l'attribut style="margin-top:16px" de la page du 024) */
.plan { margin-top: 16px; }
.plan form { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); }
.plan .champ { margin-bottom: 0; }
.plan .case { display: flex; gap: 10px; align-items: flex-start; font-size: 0.9375rem; cursor: pointer; }
.plan .case input { flex: none; width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--bleu); cursor: pointer; }
.plan .case input:focus-visible { outline: 3px solid var(--bleu); outline-offset: 2px; }
.plan .confidentialite { font-size: 0.875rem; color: var(--texte-doux); }
.plan .confidentialite a { color: var(--bleu); }
.plan .mention-lcap { font-size: 0.8125rem; color: var(--texte-doux); margin: -4px 0 0 32px; }
.plan .bouton[disabled] { opacity: 0.6; cursor: wait; }
/* Le champ piège : hors de l'écran et hors du clavier ; une personne ne le voit jamais, un robot le remplit. */
.piege { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.plan .intro { color: var(--texte-doux); margin-bottom: 14px; }
.plan .retour { margin-top: 12px; font-weight: 700; color: var(--encre); }
.plan .retour:empty { display: none; }
.plan .retour { padding: 10px 12px; border-radius: 10px; background: var(--fond-doux); }

.pied { margin-top: 20px; font-size: 0.875rem; color: var(--texte-doux); }
[hidden] { display: none !important; }