/* ValueCHECK — styles du parcours (wizard) et du rapport imprimable */

/* ---- Wizard ---- */
.steps { display: flex; gap: 8px; margin-bottom: 26px; }
.steps .step { flex: 1; text-align: center; font-size: 0.82rem; font-weight: 700; color: var(--ink-soft); padding: 4px 6px 10px; border: none; border-bottom: 3px solid var(--line); border-radius: 3px; background: none; font-family: inherit; cursor: pointer; transition: color 0.25s, border-color 0.25s, transform 0.25s, background 0.15s; }
.steps .step:hover { color: var(--brand); background: var(--info-wash); }
.steps .step.active { color: var(--brand); border-color: var(--brand); transform: translateY(-2px); }
.steps .step.done { color: var(--accent); border-color: var(--accent); }
@media (max-width: 560px) { .steps { flex-wrap: wrap; } .steps .step { font-size: 0.76rem; } }
.wizard-actions { display: flex; justify-content: space-between; gap: 12px; margin-top: 24px; }
.detected { background: var(--green-wash); border: 1px solid var(--accent); border-radius: 10px; padding: 12px 14px; margin-top: 10px; font-size: 0.9rem; color: var(--green-ink); }
.detected b { color: var(--green-ink); }

/* Grille de photos (upload) */
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; margin-top: 12px; }
.photo-thumb { position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); }
.photo-thumb img { width: 100%; height: 100%; object-fit: cover; }
/* 30 px visuel + zone de frappe étendue (::after) ≈ 42 px : la croix de 24 px
   était trop petite pour être visée au doigt sans supprimer la mauvaise photo. */
.photo-thumb button { position: absolute; top: 4px; right: 4px; width: 30px; height: 30px; border-radius: 50%; border: none; background: rgba(0,0,0,.6); color: #fff; cursor: pointer; font-weight: 700; font-size: 1rem; display: flex; align-items: center; justify-content: center; }
.photo-thumb button::after { content: ''; position: absolute; inset: -6px; }
.photo-thumb button:focus-visible { outline: 3px solid rgba(var(--brand-rgb), 0.7); outline-offset: 1px; }
.dropzone { border: 2px dashed var(--line); border-radius: var(--radius-s); padding: 26px; text-align: center; color: var(--ink-soft); cursor: pointer; transition: border-color .15s, background .15s, transform .15s; }
.dropzone:hover, .dropzone.drag { border-color: var(--brand); background: var(--info-wash); transform: scale(1.01); }

.optional-tag { font-weight: 600; font-size: 0.78rem; color: var(--accent); background: var(--green-wash); padding: 2px 8px; border-radius: 999px; margin-left: 6px; }

/* ---- Animations de fluidité ----
   Toutes sont brèves (< 0,5 s), en `ease-out`, et neutralisées par la règle
   globale prefers-reduced-motion : elles guident l'œil sans jamais retarder
   l'action de l'utilisateur. */

/* Passage d'une étape du parcours à la suivante : la carte glisse et s'éclaircit. */
@keyframes stepIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
/* Tache 8 — correction : le `both` figeait `transform` a `none` en PERMANENCE
   apres la fin de l'animation d'entree (le fill-mode « both/forwards » d'une
   animation CSS l'emporte sur toute regle normale de la cascade, y compris
   .card:hover ajoute ci-dessous dans styles.css — verifie au navigateur :
   .card levait bien son ombre au survol dans le tunnel, mais ne se soulevait
   jamais, contrairement a la meme carte sur /#/connexion, hors de portee de
   cette animation). Sans fill-mode, l'etat page d'arrivee (opacity 1,
   transform none) est identique a l'etat de repos naturel de .card : rien ne
   change a l'entree, et .card:hover reprend la main ensuite. */
.wrap-wizard .card { animation: stepIn .32s cubic-bezier(.22,.7,.3,1); }
/* Les blocs thématiques arrivent en cascade légère (max 6 : au-delà, aucun délai). */
@keyframes blocIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.wiz-bloc { animation: blocIn .34s ease-out both; }
.wiz-bloc:nth-of-type(2) { animation-delay: .05s; }
.wiz-bloc:nth-of-type(3) { animation-delay: .10s; }
.wiz-bloc:nth-of-type(4) { animation-delay: .15s; }
.wiz-bloc:nth-of-type(5) { animation-delay: .20s; }
.wiz-bloc:nth-of-type(6) { animation-delay: .25s; }

/* Onglets d'étape : le soulignement de l'étape active glisse au lieu de sauter. */
.steps .step { transition: color .25s, border-color .25s, transform .25s, background .18s; }
.steps .step.active { transform: translateY(-2px); }

/* Vignette d'annexe : la superficie se déplie au lieu d'apparaître sèchement. */
@keyframes deplier { from { opacity: 0; max-height: 0; } to { opacity: 1; max-height: 220px; } }
.annexe-body:not(.hidden) { animation: deplier .28s ease-out both; overflow: hidden; }

/* Croquis : les pièces se dessinent l'une après l'autre (lecture du plan). */
@keyframes pieceIn { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
.plan-svg g { animation: pieceIn .42s ease-out both; transform-origin: center; }
.plan-svg g:nth-child(2) { animation-delay: .04s; }
.plan-svg g:nth-child(3) { animation-delay: .08s; }
.plan-svg g:nth-child(4) { animation-delay: .12s; }
.plan-svg g:nth-child(5) { animation-delay: .16s; }
.plan-svg g:nth-child(6) { animation-delay: .20s; }
.plan-svg g:nth-child(7) { animation-delay: .24s; }
.plan-svg g:nth-child(8) { animation-delay: .28s; }
.plan-svg g:nth-child(n+9) { animation-delay: .32s; }

/* Galerie photo : arrivée en cascade + léger zoom au survol. */
@keyframes photoIn { from { opacity: 0; transform: scale(.96) translateY(8px); } to { opacity: 1; transform: none; } }
.photo-grid-report figure { animation: photoIn .38s ease-out both; }
.photo-grid-report figure:nth-child(2) { animation-delay: .06s; }
.photo-grid-report figure:nth-child(3) { animation-delay: .12s; }
.photo-grid-report figure:nth-child(4) { animation-delay: .18s; }
.photo-grid-report figure:nth-child(n+5) { animation-delay: .24s; }
.photo-grid-report img { transition: transform .25s ease, box-shadow .25s ease; }
.photo-grid-report figure:hover img { transform: scale(1.03); box-shadow: 0 10px 24px rgba(6,25,55,.16); }

/* Carte de validation d'un diagnostic : elle se pose en douceur. */
.diag-validate { animation: stepIn .34s cubic-bezier(.22,.7,.3,1) both; }

/* Demande de numéro de voie : elle attire l'œil sans agresser. */
@keyframes numIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.num-requis { animation: numIn .3s ease-out both; }

/* ---- Croquis du logement (issu du DPE / de l'attestation Carrez) ---- */
.plan-wrap, .plan-apercu { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px; margin-top: 10px; }
.plan-svg { display: block; max-width: 620px; margin: 0 auto; height: auto; }
.plan-note { margin: 10px 2px 0; font-size: .82rem; line-height: 1.5; }
.diag-plan { margin: 12px 0 16px; }
.diag-pieces { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.diag-piece { font-size: .8rem; background: var(--info-wash); color: var(--brand-dark); border-radius: 999px; padding: 3px 10px; }
.diag-piece b { font-weight: 800; }
/* Le croquis reste LISIBLE en mode sombre : fond clair conservé (c'est un plan). */
@media (prefers-color-scheme: dark) {
  .plan-wrap, .plan-apercu { background: var(--plan-bg); }
  .diag-piece { background: var(--surface-active); color: var(--plan-piece-ink); }
}

/* ---- Galerie photos du rapport (page dédiée) ---- */
.photo-grid-report { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; margin-top: 14px; }
/* aspect-ratio porté par l'IMAGE (et non par le conteneur, qui masque le
   débordement) : sinon la légende passait sous le bord et disparaissait. */
.photo-grid-report .photo-thumb { aspect-ratio: auto; overflow: visible; border: none; margin: 0; }
.photo-grid-report .photo-thumb img { aspect-ratio: 4 / 3; height: auto; border-radius: 10px; border: 1px solid var(--line); }
.photo-grid-report figcaption { font-size: .74rem; color: var(--ink-soft); text-align: center; padding: 4px 0 0; }

/* ---- Rapport ---- */
.report-toolbar { position: sticky; top: 64px; z-index: 400; display: flex; justify-content: space-between; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 18px; margin-bottom: 22px; box-shadow: var(--shadow); }

.report { max-width: 900px; margin: 0 auto; }
.page {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 38px 44px; margin-bottom: 22px; box-shadow: var(--shadow);
  position: relative; min-height: 200px;
  animation: fadeUp 0.5s ease both;
}
.page:nth-child(2) { animation-delay: 0.08s; }
.page:nth-child(3) { animation-delay: 0.16s; }
.page:nth-child(4) { animation-delay: 0.24s; }
.page-head { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 2px solid var(--line); padding-bottom: 10px; margin-bottom: 20px; }
.page-head h2 { margin: 0; font-size: 1.35rem; }
.page-head .pnum { color: var(--ink-soft); font-size: 0.8rem; font-weight: 700; }
.page-kicker { color: var(--brand); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; font-size: .72rem; }

/* Couverture */
.cover { background: linear-gradient(135deg, var(--navy-deep), var(--navy) 60%, var(--green) 140%); color: #fff; border: none; }
.cover .brand-line { font-weight: 800; font-size: 1.2rem; opacity: .95; }
.check-lite { color: var(--mint); } /* CHECK vert clair, lisible sur la couverture */
.cover h1 { font-size: 2rem; margin: 6px 0 4px; }
.cover .sub { opacity: .9; }
#aerial, #sectorMap { height: 300px; border-radius: 12px; overflow: hidden; z-index: 1; }
.cover-figures { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 20px; }
.cover-fig { background: rgba(255,255,255,.14); border-radius: 12px; padding: 18px; }
.cover-fig .l { font-size: .8rem; opacity: .85; text-transform: uppercase; letter-spacing: .04em; }
.cover-fig .v { font-size: 1.8rem; font-weight: 800; margin-top: 4px; }
.cover-fig .r { font-size: .9rem; opacity: .9; }
/* Avertissement de couverture : il doit se lire, donc il ne doit pas être discret.
   Fond plus clair que les cartes de chiffres et filet à gauche pour l'accrocher,
   sans virer au rouge — ce n'est pas une erreur, c'est le mode d'emploi du montant.
   Contraste vérifié sur le dégradé de la couverture (texte blanc plein, pas d'opacité
   réduite comme .cover-meta). */
.cover-avert { margin-top: 16px; background: rgba(255,255,255,.16); border-left: 4px solid var(--mint); border-radius: 8px; padding: 12px 16px; font-size: .86rem; line-height: 1.45; }
.cover-avert-t { font-weight: 800; text-transform: uppercase; letter-spacing: .04em; font-size: .78rem; margin-bottom: 6px; }
.cover-avert ul { margin: 0; padding-left: 18px; }
.cover-avert li + li { margin-top: 5px; }
.cover-meta { margin-top: 22px; font-size: .9rem; opacity: .9; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; }

/* Blocs data */
.kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.kv .item { border: 1px solid var(--line); border-radius: var(--radius-s); padding: 13px 16px; transition: border-color 0.15s; }
.kv .item:hover { border-color: var(--line); }
.kv .item .k { font-size: .78rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .03em; }
.kv .item .v { font-weight: 700; margin-top: 3px; }

.dpe-badge { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; color: #fff; padding: 6px 14px; border-radius: 8px; }
/* ===== ILLUSTRATION — debut : couleurs reglementaires des classes DPE (A a G),
   fixees par le diagnostic — pas des jetons d'interface, cf. tests-internes/couleurs.js. */
.dpe-A{background:#319834}.dpe-B{background:#33cc31}.dpe-C{background:#cbdd2a}.dpe-D{background:#f6eb1a}.dpe-D,.dpe-C{color:#333}.dpe-E{background:#f9b016}.dpe-F{background:#e77e1d}.dpe-G{background:#d0231b}
/* ===== ILLUSTRATION — fin */

.adj-table { width: 100%; border-collapse: collapse; }
.adj-table td { padding: 9px 8px; border-bottom: 1px solid var(--line); }
.adj-table .pos { color: var(--green); font-weight: 700; text-align: right; }
.adj-table .neg { color: var(--danger); font-weight: 700; text-align: right; }
.adj-table .base td { font-weight: 700; background: var(--info-wash); }
.adj-table .total td { font-weight: 800; border-top: 2px solid var(--ink); font-size: 1.05rem; }
/* SOUS-TOTAL, et non un terme de plus. Sans séparation visuelle, la ligne
   « Effet cumulé retenu » se lisait comme un quatrième pourcentage à ajouter aux
   précédents : un lecteur pouvait additionner les critères, la modération ET le
   cumul, et doubler le total. Un filet et un fond la détachent des lignes de
   détail qu'elle résume. */
.adj-table .cumul td { border-top: 1px solid var(--ink-soft); background: var(--info-wash); }

.report .photo-grid img { border-radius: 10px; }

.big-number { font-size: 2.4rem; font-weight: 800; color: var(--brand-dark); }
.rent-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; }

.legend { display: flex; gap: 18px; flex-wrap: wrap; font-size: .85rem; color: var(--ink-soft); margin-top: 10px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
/* ===== ILLUSTRATION — debut : legende du graphique du rapport, appariee aux
   series tracees dans app.js — spec §4.3, couleurs volontairement hors jetons. */
.dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.dot-blue { background: #1666d4; } .dot-green { background: #12b28c; }
/* ===== ILLUSTRATION — fin */

.method p { color: var(--ink-soft); font-size: .92rem; }

/* DETAIL DE LA FIABILITE DANS LE RAPPORT (F-0, tache 10) — UNE seule regle, et
   elle ne porte que sur le NIVEAU DE TITRE.
   Le bloc est le meme composant que sur l'ecran resultat : ses classes .fb-*
   sont definies une fois pour toutes dans styles.css sous `.bloc-fiabilite`, et
   elles s'appliquent ici telles quelles. Rien n'est redefini, aucune couleur
   n'est introduite — la barriere tests-internes/couleurs.js reste a zero
   couleur hors jetons, et aucune paire de contraste nouvelle n'apparait.
   CE QUI CHANGE, ET POURQUOI. Dans le rapport, la page porte deja son <h2> et
   reserve <h3> a ses sections : le bloc descend donc d'un cran (<h3> pour lui,
   <h4> pour ses deux listes, cf. detailFiabiliteHtml). Le selecteur de
   styles.css nomme `h3` ; sans la ligne ci-dessous le <h4> retomberait sur les
   defauts du navigateur — mesure au navigateur le 26/09/2026 : 16 px et 21,28 px
   de marge haute ET basse, contre 15,2 px et 0/6 px pour le meme titre sur
   l'ecran resultat. Le MEME composant se serait affiche de deux facons, ce qui
   est exactement ce que la reutilisation de la fonction sert a eviter.
   CE N'EST PAS UNE CORRECTION DE PAGINATION : mesure au navigateur, aucune
   variante de mise en page (listes en deux colonnes, panneaux en deux colonnes)
   ne ramene la page 3 sous sa capacite de deux feuilles A4. */
.bloc-fiabilite .fb-listes h4 { margin: 0 0 6px; font-size: .95rem; color: var(--ink); }

/* ---- Impression ---- */
@media print {
  @page { size: A4; margin: 12mm; }
  body { background: #fff; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .topbar, .footer, .report-toolbar, #nav, .archive-note, #blocProfil { display: none !important; }
  .wrap { padding: 0; max-width: none; }
  .report { max-width: none; }
  .page { border: none; box-shadow: none; border-radius: 0; margin: 0; padding: 0 0 8mm; page-break-after: always; break-after: page; }
  .page:last-child { page-break-after: auto; }
  .cover { -webkit-print-color-adjust: exact; print-color-adjust: exact; padding: 20mm; }
  .dpe-badge, .cover-fig, .adj-table .base td, .badge { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  #aerial, #sectorMap { height: 240px; }
  /* Blocs INSÉCABLES : une fiche, une tuile, une ligne de tableau ou une carte
     coupée à cheval sur deux pages A4 rendait le PDF brouillon. */
  .kv .item, .cover-fig, .spec, .visual-card, .stat, .adj-table tr, table.comps tr,
  .photo-thumb, .dpe-badge, .estimate-box, .agrement-card { break-inside: avoid; page-break-inside: avoid; }
  h2, h3 { break-after: avoid; page-break-after: avoid; }
}

@media (max-width: 640px) {
  .page { padding: 24px 20px; }
  .cover-figures, .result-head { grid-template-columns: 1fr; }
  /* Montants du rapport sur petit écran : réduits, jamais débordants. */
  .big-number { font-size: 1.9rem; }
  .cover-fig .v { font-size: 1.45rem; }
  .cover h1 { font-size: 1.5rem; }
}

/* ---- Cases à cocher (consentements RGPD) ---- */
.check-row { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0; font-size: 0.9rem; line-height: 1.45; cursor: pointer; }
.check-row input[type="checkbox"] { margin-top: 3px; width: 17px; height: 17px; flex: none; accent-color: var(--brand); cursor: pointer; }
.check-row i { color: var(--ink-soft); }

/* ---- Sous-titres du wizard ---- */
.wiz-h { margin: 22px 0 10px; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--brand-dark); border-bottom: 1px solid var(--line); padding-bottom: 6px; }
.wiz-h:first-of-type { margin-top: 4px; }

/* ---- Blocs thématiques du formulaire (étape 2) ---- */
.wiz-bloc {
  border: 1px solid var(--line); border-radius: var(--radius-s);
  padding: 20px 20px 6px; margin-bottom: 18px; background: var(--surface);
  animation: fadeUp 0.4s ease both;
}
.wiz-bloc > header { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 16px; }
.wiz-bloc > header .ic { color: var(--brand); margin-top: 1px; }
.wiz-bloc > header h4 { margin: 0; font-size: 1.02rem; color: var(--ink); }
.wiz-bloc .bloc-sub { margin: 3px 0 0; font-size: 0.83rem; color: var(--ink-soft); line-height: 1.4; }
.wiz-bloc .dropzone { padding: 20px; }

/* Champ numérique avec unité intégrée */
.input-wrap { position: relative; }
.input-wrap input { padding-right: 46px; }
.input-wrap .unit {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  color: var(--ink-soft); font-size: 0.85rem; font-weight: 700; pointer-events: none;
}
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 620px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } }

/* ---- Grandes cartes (publique / admin) ---- */
.bigmap { height: 520px; border-radius: var(--radius); border: 1px solid var(--line); z-index: 1; }
@media (max-width: 640px) { .bigmap { height: 380px; } }

/* ---- Présentation visuelle du bien ---- */
.spec-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 14px; }
.spec { border: 1px solid var(--line); border-radius: var(--radius-s); padding: 16px 12px; text-align: center; background: var(--surface); }
.spec-ico { font-size: 2rem; line-height: 1; }
.spec-v { font-weight: 800; font-size: 1.15rem; margin-top: 8px; color: var(--ink); }
.spec-k { font-size: 0.72rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 2px; }
.visual-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-top: 16px; }
.visual-card { border: 1px solid var(--line); border-radius: var(--radius-s); padding: 14px 10px 12px; text-align: center; background: #fff; }
.visual-cap { font-weight: 700; font-size: 0.88rem; margin-top: 4px; color: var(--ink); }

/* Validation des diagnostics */
.diag-validate { border-color: var(--accent); margin-top: 12px; }
.diag-validate h3 { color: var(--green-ink); }

/* Chips (travaux) */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.chip { border: 1.5px solid var(--line); background: #fff; border-radius: 999px; padding: 8px 14px; font-weight: 600; font-size: 0.9rem; cursor: pointer; font-family: inherit; color: var(--ink-soft); transition: border-color .12s, background .12s, transform .12s; }
.chip:hover { border-color: var(--accent); transform: translateY(-2px); }
.chip.active { border-color: var(--accent); background: var(--green-wash); color: var(--green-ink); }
.chips-static .chip { cursor: default; }
.chips-static .chip:hover { transform: none; }

/* Vignettes d'annexes : logo + case à cocher qui déverrouille la superficie */
.annexes-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(162px, 1fr)); gap: 12px; }
@media (max-width: 620px) { .annexes-grid { grid-template-columns: repeat(2, 1fr); } }
.annexe-card { border: 1.5px solid var(--line); background: #fff; border-radius: var(--radius-s); padding: 11px 13px; transition: border-color .14s, background .14s, transform .14s; }
.annexe-card.active { border-color: var(--accent); background: var(--green-wash); }
.annexe-card:hover { border-color: var(--accent); }
.annexe-head { display: flex; align-items: center; gap: 9px; cursor: pointer; font-weight: 600; font-size: 0.92rem; color: var(--ink); user-select: none; }
.annexe-head input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--accent); cursor: pointer; flex-shrink: 0; }
.annexe-logo { font-size: 1.3rem; line-height: 1; }
.annexe-lbl { flex: 1; }
.annexe-body { margin-top: 10px; animation: popIn 0.16s ease both; }
.annexe-body .field { margin-top: 8px; margin-bottom: 0; }
/* Case "je ne sais pas" (troisieme etat, sous la superficie) : sans ces regles
   elle heritait du rendu natif du navigateur, sans marge, a cote d'une case
   stylee a 18 px dans la meme carte (constat de revue de la tache 4, reporte
   ici). Case plus petite que .annexe-head : c'est une option secondaire. */
.annexe-nsp { display: flex; align-items: center; gap: 7px; margin-top: 8px; font-size: 0.82rem; color: var(--ink-soft); cursor: pointer; user-select: none; }
.annexe-nsp input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; flex-shrink: 0; }

/* Vignettes d'agrément (maison) : icône + menu + superficie révélée */
.agrements-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
@media (max-width: 620px) { .agrements-grid { grid-template-columns: 1fr; } }
.agrement-card { border: 1.5px solid var(--line); background: #fff; border-radius: var(--radius-s); padding: 11px 13px; transition: border-color .14s; }
.agrement-card:hover { border-color: var(--accent); }
.agrement-head { display: flex; align-items: center; gap: 9px; font-weight: 600; margin-bottom: 8px; }
.agrement-surf { margin-top: 9px; animation: popIn 0.16s ease both; }

/* Micro-interactions des tuiles et cartes visuelles (round 1 : vocabulaire du
   niveau 2, perspective retiree — meme courbe que .card. Tuiles plus petites
   que .feature (.spec : minmax 130px, .visual-card : minmax 190px) : scale(1.02),
   coherent avec .feature plutot qu'avec le 1,012 de .card, une carte pleine
   largeur bien plus grande). */
.spec, .visual-card { transition: transform 0.22s cubic-bezier(.2, .7, .3, 1), box-shadow 0.22s ease; }
.spec:hover, .visual-card:hover { transform: translateY(-5px) scale(1.02); box-shadow: var(--shadow); }
/* `backwards`, pas `both` : meme raisonnement que .features .feature dans
   styles.css — delai non nul selon nth-child, `both` figeait `transform` a
   `none` en permanence et bloquait .spec:hover/.visual-card:hover (verifie
   au navigateur), `backwards` tient l'etat de depart pendant le delai sans
   figer l'arrivee. */
.spec-grid .spec { animation: rise3d 0.55s ease backwards; }
.spec-grid .spec:nth-child(2) { animation-delay: 0.07s; }
.spec-grid .spec:nth-child(3) { animation-delay: 0.14s; }
.spec-grid .spec:nth-child(4) { animation-delay: 0.21s; }
.visual-row .visual-card { animation: rise3d 0.55s ease backwards; }
.visual-row .visual-card:nth-child(2) { animation-delay: 0.1s; }
.visual-row .visual-card:nth-child(3) { animation-delay: 0.2s; }
.spec-ico { color: var(--brand-dark); }

/* Trois blocs chiffres côte à côte (page calcul) */
.cover-figures.three { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 820px) { .cover-figures.three { grid-template-columns: 1fr; } }
.photo-thumb img { transition: transform 0.25s; }
.photo-thumb:hover img { transform: scale(1.06); }

/* ---- Barre de progression de l'estimation ---- */
.loader-overlay {
  position: fixed; inset: 0; z-index: 900;
  background: rgba(240, 245, 251, 0.9); backdrop-filter: blur(5px);
  display: flex; align-items: center; justify-content: center; padding: 20px;
  animation: popIn 0.22s ease both;
}
.loader-panel {
  width: min(470px, 100%); background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 34px 32px; box-shadow: var(--shadow-hover); text-align: center;
}
.loader-mark { color: var(--brand); animation: floaty 3s ease-in-out infinite; }
.loader-pct { font-size: 1.8rem; font-weight: 800; color: var(--brand-dark); font-variant-numeric: tabular-nums; }
.loader-track { height: 10px; background: var(--info-wash); border-radius: 999px; overflow: hidden; margin: 12px 0 12px; }
.loader-fill {
  height: 100%; width: 0; border-radius: 999px;
  background: linear-gradient(90deg, var(--brand), var(--accent));
  transition: width 0.12s linear;
}
.loader-step { color: var(--ink-soft); font-size: 0.92rem; min-height: 2.6em; line-height: 1.35; }
@media (prefers-reduced-motion: reduce) { .loader-mark { animation: none !important; } }

/* ---- Pages légales ---- */
.legal { max-width: 780px; }
.legal h1 { font-size: 1.7rem; }
.legal h2 { font-size: 1.15rem; margin-top: 28px; }
.legal p, .legal li { color: var(--ink); font-size: 0.95rem; }
.legal ul { padding-left: 22px; }
.legal h3 { font-size: 1rem; margin: 20px 0 6px; color: var(--brand-dark); }
.legal-table { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: 0.88rem; }
.legal-table th, .legal-table td { border: 1px solid var(--line); padding: 10px 12px; text-align: left; vertical-align: top; }
.legal-table th { background: var(--info-wash); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--ink-soft); }
.legal-table td { color: var(--ink); }
@media (max-width: 640px) { .legal-table { font-size: 0.8rem; } .legal-table th, .legal-table td { padding: 7px 8px; } }

/* Bloc photos du wizard : classe dédiée (l'ancien style inline empêchait toute
   adaptation au thème sombre). */
.wiz-bloc.photos { background: var(--green-wash); border-color: var(--accent); }

/* ---- Adaptation MODE SOMBRE des composants wizard + pages légales ----
   (le RAPPORT .report/.page reste clair via le ré-épinglage de variables de
   styles.css). Les surfaces claires codées en dur passent en sombre + texte clair.
   Les .chip du wizard sont scopées sous .wiz-bloc pour NE PAS toucher les chips
   « statiques » du rapport (fond clair préservé). */
@media (prefers-color-scheme: dark) {
  .wiz-bloc { background: var(--panel-bg); border-color: var(--line); }
  .wiz-bloc.photos { background: var(--success-bg); border-color: var(--detected-border); }
  .annexe-card, .agrement-card, .wiz-bloc .chip { background: var(--surface-raised); }
  .annexe-card.active { background: var(--success-bg); border-color: var(--report-active-border); }
  .wiz-bloc .chip.active { background: var(--success-bg); border-color: var(--report-active-border); color: var(--detected-ink); }
  .legal p, .legal li, .legal-table td { color: var(--ink); }
  .legal-table th { background: var(--surface-raised); color: var(--ink-soft); }
  .legal-table th, .legal-table td { border-color: var(--line); }
}

/* Reprise depuis styles.css : .detected y est redefini par CETTE feuille, qui
   est chargee APRES (index.html l.15-16). A specificite egale, la derniere
   gagne — les valeurs sombres doivent donc etre posees ici pour s'appliquer. */
@media (prefers-color-scheme: dark) {
  .detected { background: var(--success-bg); border-color: var(--detected-border); color: var(--detected-ink); }
  .detected b { color: var(--detected-ink-b); }
}