/* EX’SIE — l’atelier projet (projet.html) : en-tête, diagnostic et sa fiche, checklist, simulation et son calendrier.
   À plat : aplats, bordures fines, coins arrondis. Seuls transform, opacity et filter s’animent (plus le tracé d’un trait SVG).
   Trois largeurs : bureau (≥ 1021 px), panneau d’aperçu et tablette (761 à 1020 px), téléphone (≤ 760 px). */
.entete-page { padding-block: clamp(48px, 7vw, 104px) clamp(48px, 6vw, 88px); }

/* ---------- En-tête : les trois outils, en accès direct ---------- */
.ancres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: clamp(36px, 5vw, 64px); border-top: 1px solid var(--line-fort); }
.ancre {
  position: relative; display: grid; grid-template-columns: 2.4rem minmax(0, 1fr) 20px; grid-template-areas: "n nom fleche" ". quoi fleche";
  align-items: baseline; gap: 2px 0; padding: 22px 24px 4px 0;
}
.ancre + .ancre { padding-left: 24px; border-left: 1px solid var(--line); }
.ancre::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--accent);
  transform: scaleX(0); transform-origin: left center; transition: transform var(--d-3) var(--c-elan);
}
.ancre:hover::before, .ancre:focus-visible::before { transform: scaleX(1); }
.ancre-n { grid-area: n; font-size: var(--t-petit); font-weight: 700; color: var(--accent-texte); font-variant-numeric: tabular-nums; }
.ancre-nom { grid-area: nom; font-size: var(--t-h3); font-weight: 600; color: var(--ink); line-height: 1.3; }
.ancre-quoi { grid-area: quoi; font-size: var(--t-petit); color: var(--muted); }
.ancre-fleche {
  grid-area: fleche; align-self: center; width: 20px; height: 20px; fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform var(--d-3) var(--c-elan);
}
.ancre:hover .ancre-fleche, .ancre:focus-visible .ancre-fleche { transform: translateY(5px); }
.ancre:last-child { padding-right: 0; }
@media (max-width: 1020px) {
  /* Panneau d’aperçu, tablette, téléphone : trois lignes */
  .ancres { grid-template-columns: 1fr; }
  .ancre, .ancre + .ancre { padding: 16px 0; border-left: 0; border-bottom: 1px solid var(--line); }
}

/* Arrivée par une ancre : le haut de l’outil se cale en haut de l’écran, son sur-titre juste sous l’en-tête collant
   (la marge annule le retrait commun de base.css ; l’espace du haut est au moins celui de l’en-tête). */
#diagnostic, #checklist, #simulation {
  scroll-margin-top: calc(-1 * (var(--h-entete) + 24px));
  padding-top: max(var(--section), calc(var(--h-entete) + 24px));
}

/* ---------- 1. Le diagnostic ---------- */
.diag-grille {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 28.75rem); grid-template-areas: "questions cote" "resultat cote";
  column-gap: clamp(32px, 5vw, 80px); align-items: start;
}
.diag-questions { grid-area: questions; display: grid; gap: var(--e-6); }
.diag-cote { grid-area: cote; position: sticky; top: calc(var(--h-entete) + 24px); }
.diag-resultat { grid-area: resultat; }
html:not(.js) .diag-grille { grid-template-columns: minmax(0, 46rem); grid-template-areas: "questions"; }
html:not(.js) .diag-cote { display: none; }

/* Une question : un vrai groupe de boutons radio. Le bouton natif est masqué, le libellé est le choix. */
.diag-q { min-width: 0; margin: 0; padding: 0; border: 0; }
.diag-q legend { margin-bottom: 14px; padding: 0; font-size: var(--t-h3); font-weight: 600; color: var(--ink); line-height: 1.3; letter-spacing: -.005em; }
.diag-n { display: inline-block; width: 2.4rem; font-size: var(--t-petit); font-weight: 700; letter-spacing: 0; color: var(--accent-texte); font-variant-numeric: tabular-nums; }
.choix-groupe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.choix { position: relative; display: block; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.choix input { position: absolute; left: 16px; top: 50%; width: 1px; height: 1px; margin: 0; opacity: 0; }
.choix-in {
  position: relative; display: flex; align-items: center; gap: 12px; height: 100%; min-height: 58px; padding: 12px 16px;
  border-radius: var(--r-2); background: var(--surface); border: 1px solid var(--line-fort);
  font-size: .97rem; font-weight: 600; line-height: 1.35; color: var(--ink);
}
/* Le contour du choix retenu : un second trait, à l’intérieur, qui ne décale rien */
.choix-in::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; border: 2px solid var(--accent);
  opacity: 0; transition: opacity var(--d-2); pointer-events: none;
}
.choix-point { position: relative; flex: none; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--muted); background: var(--surface); }
.choix-point::before { content: ""; position: absolute; inset: -1.5px; border-radius: 50%; background: var(--accent); opacity: 0; transition: opacity var(--d-2); }
.choix-point::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px; border-radius: 50%; background: #fff;
  transform: scale(0); transition: transform var(--d-3) var(--c-elan);
}
.choix:hover .choix-point { border-color: var(--ink); }
.choix input:checked + .choix-in::after { opacity: 1; }
.choix input:checked + .choix-in .choix-point::before { opacity: 1; }
.choix input:checked + .choix-in .choix-point::after { transform: none; }
.choix input:focus-visible + .choix-in { outline: 2px solid var(--accent); outline-offset: 3px; }

/* La fiche et, au même endroit, ce qu’elle devient : la carte du bouton qui l’emporte */
.fiche-zone { position: relative; display: grid; }
.fiche-zone > * { grid-area: 1 / 1; min-width: 0; }
.fiche-scene { position: relative; z-index: 1; pointer-events: none; }
.diag-envoi {
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: var(--e-4);
  padding: clamp(22px, 2.6vw, 34px); border-radius: var(--r-3); background: var(--surface); border: 1px solid var(--line); opacity: 0;
}
.diag-pret { font-size: var(--t-h3); font-weight: 300; line-height: 1.3; color: var(--ink); }
.diag-envoi .btn { gap: 14px; }
/* La fiche pliée, logée dans le bouton */
.diag-pli { position: relative; flex: none; width: 24px; height: 17px; border-radius: 3px; background: #fff; opacity: 0; }
.diag-pli::before, .diag-pli::after { content: ""; position: absolute; left: 4px; right: 4px; height: 1.5px; border-radius: 1px; background: var(--accent-fonce); }
.diag-pli::before { top: 5px; }
.diag-pli::after { top: 10px; right: 10px; }

/* La fiche de cadrage (décor construit par scene-fiche.js). Trois volets égaux de deux rangs : elle se plie en trois. */
.fi {
  --fi-r: 78px; --fi-m: 26px; --fi-lib: 15px; --fi-val: 33px; --fi-regle: 13px; --fi-tampon: 35px;
  position: relative; display: grid; grid-template-rows: repeat(3, calc(var(--fi-r) * 2)); color: var(--ink); will-change: transform, opacity;
}
.fi-volet { position: relative; z-index: 1; }
.fi-v3 { z-index: 2; transform-origin: 50% 0; }
.fi-v1 { z-index: 3; transform-origin: 50% 100%; }
.fi-face, .fi-dos { position: absolute; inset: 0; background: var(--surface); border-inline: 1px solid var(--line-fort); }
.fi-face { display: grid; grid-template-rows: 1fr 1fr; }
.fi-v1 .fi-face { border-top: 1px solid var(--line-fort); border-radius: var(--r-3) var(--r-3) 0 0; }
.fi-v2 .fi-face { border-block: 1px dashed var(--line); } /* les deux plis */
.fi-v3 .fi-face { border-bottom: 1px solid var(--line-fort); border-radius: 0 0 var(--r-3) var(--r-3); }
/* Le dos d’un volet : ce qu’on voit une fois qu’il est rabattu (le texte est retourné pour se lire à l’endroit) */
.fi-dos {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-inline: var(--fi-m);
  border: 1px solid var(--line-fort); border-radius: var(--r-2); background: var(--surface-2); opacity: 0; transform: scaleY(-1);
}
.fi.est-pliee .fi-v2, .fi.est-pliee .fi-v3 { visibility: hidden; }
.fi.est-pliee .fi-dos { box-shadow: var(--flottant); } /* pliée, la fiche est en main : la seule ombre de la scène, neutre */
.fi-volet.est-rabattu .fi-face { opacity: 0; }
.fi-volet.est-rabattu .fi-dos { opacity: 1; }

.fi-tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-inline: var(--fi-m); border-bottom: 2px solid var(--ink); }
.fi-titre { font-size: 1.08rem; font-weight: 700; letter-spacing: -.005em; white-space: nowrap; }
.fi-compte { font-size: var(--t-petit); font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fi-ligne, .fi-pied { position: relative; margin-inline: var(--fi-m); }
.fi-lib { position: absolute; left: 0; top: var(--fi-lib); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; line-height: 1.2; color: var(--muted); white-space: nowrap; }
.fi-lib b { display: inline-block; width: 1.9rem; font-weight: 700; letter-spacing: 0; color: var(--accent-texte); font-variant-numeric: tabular-nums; }
.fi-val { position: absolute; left: 0; right: 0; top: var(--fi-val); height: 1.4em; font-size: 1rem; font-weight: 700; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fi-regle, .fi-trait { position: absolute; left: 0; right: 0; bottom: var(--fi-regle); height: 1px; background: var(--line-fort); }
.fi-trait { bottom: calc(var(--fi-regle) - .5px); height: 2px; border-radius: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left center; }
.fi-coche { position: absolute; right: 0; top: calc(var(--fi-lib) - 2px); width: 16px; height: 16px; overflow: visible; fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.fi-coche path { stroke-dasharray: 1; stroke-dashoffset: 1; }
/* Le témoin : vide tant que la fiche n’est pas complète, puis l’orientation, en aplat */
.fi-tampon {
  position: absolute; left: 0; top: var(--fi-tampon); isolation: isolate; display: grid; place-items: center; min-width: 9.5rem; height: 28px; padding-inline: 14px;
  border-radius: var(--r-pilule); border: 1px dashed var(--line-fort); font-size: var(--t-petit); font-weight: 700; line-height: 1; color: transparent; white-space: nowrap; transform-origin: left center;
}
.fi-tampon::before { content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; background: var(--accent-fonce); opacity: 0; transition: opacity var(--d-2); }
.fi-tampon.est-pose { color: #fff; }
.fi-tampon.est-pose::before { opacity: 1; }

/* Le résultat : du vrai texte, qui apparaît en place */
.diag-resultat { margin-top: var(--e-7); padding-top: var(--e-6); border-top: 1px solid var(--line-fort); }
.diag-resultat:not([hidden]) { animation: panneau-entree var(--d-3) var(--c-entree) both; }
.diag-recap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--e-5); margin: var(--e-4) 0 0; }
.diag-recap > div { padding-block: 12px; border-bottom: 1px solid var(--line); }
.diag-recap dt { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.diag-recap dd { margin: 0; font-weight: 700; line-height: 1.45; color: var(--ink); }
.diag-blocs { display: grid; gap: var(--e-6); margin-top: var(--e-6); }
.diag-bloc h3 { margin-bottom: 8px; font-size: 1.12rem; }
.diag-voie .lien { margin-top: var(--e-3); }
.diag-lire { border-top: 1px solid var(--line); }
.diag-lire a { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); align-items: baseline; gap: 0 12px; padding-block: 12px; border-bottom: 1px solid var(--line); }
.lire-genre { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.lire-titre { font-weight: 700; line-height: 1.45; color: var(--accent-texte); text-decoration: underline; text-decoration-color: var(--line-fort); text-underline-offset: 4px; }
.diag-lire a:hover .lire-titre, .diag-lire a:focus-visible .lire-titre { text-decoration-color: currentColor; }
.diag-apporter { display: grid; gap: 6px; }
.diag-apporter li { position: relative; padding-left: 22px; }
.diag-apporter li::before { content: ""; position: absolute; left: 2px; top: .78em; width: 7px; height: 7px; background: var(--accent); }

@media (max-width: 1020px) {
  .diag-grille { grid-template-columns: minmax(0, 1fr) minmax(0, 21.5rem); column-gap: var(--e-6); }
  .choix-groupe { grid-template-columns: 1fr; }
  .choix-in { min-height: 52px; }
  .fi { --fi-r: 66px; --fi-m: 20px; --fi-lib: 11px; --fi-val: 27px; --fi-regle: 10px; --fi-tampon: 30px; }
  .fi-tampon { height: 26px; }
  .fi-val { font-size: .875rem; }
  .fi-titre { font-size: 1rem; }
  .diag-recap { grid-template-columns: 1fr; }
  .diag-envoi .btn { padding-inline: 20px; gap: 10px; }
}
@media (max-width: 760px) {
  /* Téléphone : la fiche est posée sous les questions, le bouton qui l’emporte vient au même endroit, puis le résultat. */
  .diag-grille { grid-template-columns: minmax(0, 1fr); grid-template-areas: "questions" "cote" "resultat"; }
  .diag-cote { position: static; width: 100%; max-width: 26rem; margin-top: var(--e-7); }
  .diag-recap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 440px) {
  .diag-recap { grid-template-columns: 1fr; }
  .diag-lire a { grid-template-columns: 1fr; }
}

/* ---------- 2. La checklist ---------- */
.lp { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); grid-template-areas: "tete themes" "bilan themes"; grid-template-rows: auto 1fr; column-gap: clamp(28px, 5vw, 72px); align-items: start; }
.lp-tete { grid-area: tete; display: flex; flex-direction: column; gap: var(--e-4); align-items: flex-start; }
.lp-corps { display: contents; }
.lp-themes { grid-area: themes; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-6); align-items: start; }
/* Le bilan suit la lecture de la liste : compteur, anneau et actions restent à portée */
.lp-bilan { grid-area: bilan; position: sticky; top: calc(var(--h-entete) + 32px); display: grid; gap: var(--e-5); justify-items: start; margin-top: var(--e-6); }
html:not(.js) .lp-bilan { display: none; }

.lp-suivi { display: flex; align-items: center; gap: var(--e-5); }
.lp-anneau { position: relative; flex: none; display: grid; place-items: center; width: 112px; height: 112px; }
.lp-crans { position: absolute; inset: 0; }
.lp-crans svg { width: 100%; height: 100%; overflow: visible; fill: none; stroke-width: 7; stroke-linecap: round; }
.lp-cran-fond { stroke: var(--line-fort); }
/* Un cran se trace quand un point est coché (tracé d’un trait SVG : la seule exception à transform / opacity / filter) */
.lp-cran { stroke: var(--accent); stroke-dashoffset: var(--cran); transition: stroke-dashoffset var(--d-3) var(--c-trajet); }
.lp-cran.est-plein { stroke-dashoffset: 0; }
.lp-compte { position: relative; max-width: none; font-weight: 700; line-height: 1; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lp-compte b { font-size: 2rem; font-weight: 700; color: var(--ink); }
.lp-etat { max-width: 17rem; font-weight: 600; }
.lp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.lp-ico { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

.lp-theme { display: grid; border-top: 2px solid var(--ink); }
.lp-theme h3 { padding-block: 14px; font-size: 1.2rem; }
.lp-num { display: inline-block; width: 2.4rem; font-size: var(--t-petit); font-weight: 700; color: var(--accent-texte); font-variant-numeric: tabular-nums; }
.lp-point { position: relative; padding-block: 16px; border-top: 1px solid var(--line); }
.lp-dit { display: block; min-width: 0; }
.lp-texte { display: block; font-size: 1rem; font-weight: 600; line-height: 1.45; color: var(--ink); }
.lp-aide { display: block; margin-top: 4px; font-size: var(--t-petit); line-height: 1.5; color: var(--muted); }
.lp-imprime { display: none; }

@media (max-width: 1020px) {
  .lp { grid-template-columns: minmax(0, 17.5rem) minmax(0, 1fr); column-gap: var(--e-6); }
  .lp-themes { grid-template-columns: 1fr; gap: var(--e-5); }
  .lp-suivi { flex-direction: column; align-items: flex-start; gap: var(--e-4); }
}
@media (max-width: 760px) {
  /* Téléphone : le titre, la liste, puis le bilan. Pendant qu’on coche, le compteur reste en bas de l’écran. */
  .lp { display: block; }
  .lp-corps { display: block; margin-top: var(--e-6); }
  .lp-bilan { display: contents; }
  .lp-suivi {
    position: sticky; bottom: 12px; z-index: 3; flex-direction: row; align-items: center; gap: var(--e-4); margin-top: var(--e-5); padding: 10px 16px 10px 10px;
    border-radius: var(--r-3); background: var(--surface); border: 1px solid var(--line-fort); box-shadow: var(--flottant);
  }
  .lp-anneau { width: 60px; height: 60px; }
  .lp-crans svg { stroke-width: 9; }
  .lp-compte { font-size: .7rem; }
  .lp-compte b { font-size: 1.05rem; }
  .lp-etat { max-width: none; font-size: .8rem; line-height: 1.45; }
  .lp-actions { margin-top: var(--e-5); }
  /* Une case atteinte au clavier ne reste pas cachée sous le compteur */
  .lp-point, .lp-point input { scroll-margin-bottom: 200px; }
}

/* ---------- 3. La simulation ---------- */
.sim {
  display: grid; grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr); grid-template-areas: "reglages cal" "resultat cal"; grid-template-rows: auto 1fr;
  column-gap: clamp(28px, 5vw, 72px); row-gap: var(--e-7); align-items: start;
}
.sim-reglages { grid-area: reglages; display: grid; gap: var(--e-5); }
.sim-reglage { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 6px 16px; }
.sim-reglage label { font-weight: 600; line-height: 1.4; color: var(--ink); }
.sim-reglage output { font-size: 1.12rem; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sim-reglage .reglage, .sim-aide { grid-column: 1 / -1; }
.sim-resultat { grid-area: resultat; display: flex; flex-direction: column; align-items: flex-start; gap: var(--e-4); }
.sim-chiffre { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; max-width: none; font-size: var(--t-h3); font-weight: 600; color: var(--ink); line-height: 1.1; }
.sim-chiffre b { font-size: clamp(3.2rem, 2.4rem + 3vw, 4.6rem); font-weight: 700; letter-spacing: -.02em; color: var(--accent); font-variant-numeric: tabular-nums; }
.sim-formule { display: grid; gap: 2px; text-wrap: balance; padding: 12px 16px; border-radius: var(--r-2); border: 1px solid var(--line-fort); font-size: var(--t-petit); font-weight: 700; line-height: 1.5; color: var(--ink); font-variant-numeric: tabular-nums; }
.sim-formule-lib { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

/* Le calendrier (décor construit par scene-calendrier.js) : douze mois de vingt cases */
.cal {
  grid-area: cal; position: sticky; top: calc(var(--h-entete) + 24px); display: grid; gap: var(--e-5);
  padding: clamp(20px, 2.8vw, 36px); border-radius: var(--r-4); background: var(--surface); border: 1px solid var(--line);
}
html:not(.js) .cal { display: none; }
html:not(.js) .sim { grid-template-columns: minmax(0, 34rem); grid-template-areas: "reglages" "resultat"; }
.cal-tete { display: flex; align-items: center; gap: var(--e-4); }
.cal-cle { font-size: clamp(3rem, 2.2rem + 2.6vw, 4.2rem); font-weight: 700; line-height: 1; letter-spacing: -.02em; color: var(--accent); font-variant-numeric: tabular-nums; }
.cal-cle-lib { font-size: 1.05rem; font-weight: 700; line-height: 1.3; color: var(--ink); }
.cal-cle-lib span { display: block; font-size: var(--t-petit); font-weight: 600; color: var(--muted); }
.cal-annee { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 22px; }
.cal-mois-nom { display: block; margin-bottom: 6px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; line-height: 1.2; color: var(--muted); }
.cal-cases { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
/* Une case : le reste de l’année (fond), une journée répétitive (encre), une journée libérée (accent). Les états se superposent en fondu. */
.cal-case { position: relative; aspect-ratio: 1; border-radius: 4px; background: var(--line); }
.cal-case::before, .cal-case::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; opacity: 0; transform: scale(.3);
  transition: opacity var(--d-2) var(--cd, 0ms), transform var(--d-3) var(--c-elan) var(--cd, 0ms);
}
.cal-case::before { background: var(--ink); }
.cal-case::after { background: var(--accent); }
.cal-case.est-repetitif::before, .cal-case.est-libere::after { opacity: 1; transform: none; }
.cal-legende { max-width: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; padding-top: var(--e-4); border-top: 1px solid var(--line); font-size: var(--t-petit); font-weight: 600; color: var(--text); }
.cal-legende span { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.cal-legende i { width: 12px; height: 12px; border-radius: 3px; background: var(--line); }
.cal-legende .l-repetitif i { background: var(--ink); }
.cal-legende .l-libere i { background: var(--accent); }
.cal-echelle { margin-left: auto; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }

@media (max-width: 1020px) {
  .sim { column-gap: var(--e-6); }
  .cal-annee { gap: 14px 14px; }
  .cal-cases { gap: 3px; }
  .cal-case { border-radius: 3px; }
  .cal-echelle { margin-left: 0; }
}
@media (max-width: 760px) {
  /* Téléphone : les curseurs, puis l’année en deux rangées de six mois (cases en quatre colonnes), puis le résultat. */
  .sim { grid-template-columns: minmax(0, 1fr); grid-template-areas: "reglages" "cal" "resultat"; row-gap: var(--e-6); }
  .cal { position: static; padding: 18px 16px; border-radius: var(--r-3); gap: var(--e-4); }
  .cal-annee { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px 10px; }
  .cal-cases { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.5px; }
  .cal-case { border-radius: 2px; }
  .cal-mois-nom { font-size: 10px; letter-spacing: .04em; }
}

/* ---------- Mouvement réduit : les états changent par simple fondu, sans cascade ni rotation ---------- */
@media (prefers-reduced-motion: reduce) {
  .cal-case::before, .cal-case::after { transform: none; transition: opacity var(--d-3); }
  .choix-point::after { transition-duration: var(--d-1); }
}

/* ---------- Impression : la checklist seule, noir sur blanc ---------- */
@media print {
  :root, :root[data-theme="dark"], :root:not([data-theme="light"]) {
    color-scheme: light; --bg: #fff; --bg-doux: #fff; --surface: #fff; --ink: #000; --text: #111; --muted: #444; --line: #bbb; --line-fort: #777;
    --accent: #176b8b; --accent-fonce: #176b8b; --accent-texte: #176b8b;
  }
  .bandeau, .entete, .menu-m, .pied, .appel, .evitement, main > section:not(#checklist), .lp-actions, .lp-tete .surtitre, .lp-tete h2 { display: none !important; }
  body { background: #fff; font-size: 11pt; }
  #checklist { padding: 0; border: 0; }
  .lp, .lp-corps { display: block; }
  .lp-imprime { display: block; max-width: none; }
  .lp-tete { margin-bottom: 14pt; }
  .lp-tete .chapo { max-width: none; font-size: 10.5pt; line-height: 1.5; }
  .lp-tete .lp-imprime { font-size: 18pt; font-weight: 700; color: #000; }
  .lp-imprime--pied { margin-top: 18pt; padding-top: 10pt; border-top: 1px solid #777; font-size: 9.5pt; }
  .lp-bilan { display: block; position: static; margin: 10pt 0 14pt; }
  .lp-suivi { position: static; flex-direction: row; align-items: center; gap: 14pt; padding: 0; border: 0; box-shadow: none; }
  .lp-anneau { width: 64px; height: 64px; }
  .lp-crans svg { stroke-width: 9; }
  .lp-compte { font-size: 8pt; }
  .lp-compte b { font-size: 12pt; }
  .lp-etat { max-width: none; font-size: 10pt; }
  .lp-themes { grid-template-columns: 1fr 1fr; gap: 14pt 22pt; }
  .lp-theme { break-inside: avoid; }
  .lp-theme h3 { padding-block: 6pt; font-size: 12pt; }
  .lp-point { padding-block: 7pt; }
  .lp-texte { font-size: 10.5pt; }
  .lp-aide { font-size: 9pt; }
  .case-boite, .case input:checked + .case-boite { background: #fff; border-color: #000; }
  .case input:checked + .case-boite svg { stroke: #000; }
  .case-boite path, .lp-cran { transition: none; }
  .lp-cran, .lp-cran-fond { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}