/* Méthode : comment le pré-diagnostic est calculé. Classes préfixées .methode- ; tout le reste vient de dt.css.
   Couleurs : uniquement les variables --dt-* (jour et nuit). Pas de max-width sur le texte : la largeur vient des grilles. */

/* La première section suit l'en-tête : une respiration plus courte qu'entre deux sections */
.methode-premiere { padding-top: clamp(16px, 3vw, 40px); }

.methode-maj { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; color: var(--dt-ink-2); }
.methode-maj svg { flex: none; width: 20px; height: 20px; color: var(--dt-accent); }
.methode-maj strong { color: var(--dt-ink); font-weight: 600; }

/* ---------- À qui ça s'adresse ---------- */
.methode-publics { margin-top: var(--esp-7); }
.cartes.c2.methode-publics { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.methode-public-tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.methode-publics .carte-p p + p { margin-top: 2px; }
.methode-publics .carte-p p.methode-question { margin-top: auto; padding-top: var(--esp-5); border-top: 2px dashed var(--dt-surface-alt-2); font: 800 clamp(24px, 2.3vw, 32px)/1.1 var(--display); letter-spacing: -0.025em; color: var(--dt-ink); }
.methode-publics .carte-p:last-child { background: transparent; box-shadow: inset 0 0 0 3px var(--dt-ink); }

/* ---------- Le parcours : trois temps, et l'extrait du film ---------- */
.methode-parcours { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--esp-8); align-items: start; margin-top: var(--esp-7); }
.methode-parcours .etapes h3 { font-size: 22px; }
.methode-parcours .etapes p { font-size: 17px; }
.methode-cote { display: grid; gap: var(--esp-6); }
@media (min-width: 1000px) { .methode-cote { position: sticky; top: 104px; } }
.methode-sans .lien { display: table; margin: 8px 0 0; font-weight: 600; }
.methode-film { padding: var(--esp-5); border-radius: var(--r-panel); background: var(--dt-paper); box-shadow: var(--ombre-decoupe); transform: rotate(-0.8deg); }
.methode-film-ecran { position: relative; display: block; border-radius: 12px; transition: transform 140ms var(--ease); }
.methode-film-ecran:hover { transform: translateY(-2px) rotate(0.6deg); }
.methode-film-ecran .film-dessin { display: block; width: 100%; height: auto; }
.methode-film-ecran .pastille { position: absolute; right: 14px; bottom: 16px; }
.methode-film h3 { margin-top: var(--esp-4); font-size: 24px; line-height: 1.15; letter-spacing: -0.02em; }
.methode-film p { margin-top: 6px; font-size: 16px; color: var(--dt-ink-2); }

/* ---------- Les sources ---------- */
.methode-sources { margin-top: var(--esp-7); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.methode-site { margin-top: auto; padding-top: 6px; font: 700 15px/1.2 var(--display); color: var(--dt-ink); text-decoration: underline; text-decoration-color: var(--dt-accent); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.methode-prix { display: flex; flex-direction: column; gap: var(--esp-3); }
.methode-prix .objet { width: 96px; height: 72px; }
.methode-prix p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--dt-ink-2); }
.methode-prix strong { display: block; margin-bottom: var(--esp-3); font: 800 22px/1.15 var(--display); letter-spacing: -0.015em; color: var(--dt-ink); }

.methode-moyennes { margin-top: var(--esp-8); }
.methode-moyennes-tete { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "titre texte" "legende texte"; gap: var(--esp-3) var(--esp-8); align-items: start; padding-top: var(--esp-5); border-top: 3px solid var(--dt-ink); }
.methode-moyennes-tete h3 { grid-area: titre; font-size: clamp(24px, 2.4vw, 32px); line-height: 1.08; letter-spacing: -0.025em; }
.methode-moyennes-tete p { grid-area: texte; font-size: 17px; color: var(--dt-ink-2); }
.methode-table { margin-top: var(--esp-5); }
.methode-table th:nth-child(1) { width: 22%; }
.methode-table th:nth-child(2) { width: 16%; }
.methode-table th:nth-child(3) { width: 14%; }
.methode-table td { vertical-align: middle; }
.methode-table td.n { font: 700 17px/1.2 var(--display); }
/* Même langage que la page Fiabilité : la plage habituelle en papier pétrole, la médiane en repère encre (échelle 0 à 350 kWh/m²/an) */
.methode-moyennes-tete p.methode-legende { grid-area: legende; display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: var(--esp-2); font-size: 14px; font-weight: 600; color: var(--dt-ink-2); }
.methode-legende > span { display: inline-flex; align-items: center; gap: 8px; }
.methode-legende i { display: inline-block; flex: none; }
.methode-legende-bande { width: 34px; height: 14px; border-radius: 3px; background: var(--dt-il-cadre); box-shadow: 2px 2px 0 var(--dt-shadow); }
.methode-legende-repere { width: 5px; height: 20px; border-radius: 2px; background: var(--dt-ink); }
.methode-piste { position: relative; display: block; height: 30px; background:
  linear-gradient(var(--dt-surface-alt-2), var(--dt-surface-alt-2)) 0 50% / 100% 2px no-repeat,
  repeating-linear-gradient(90deg, var(--dt-surface-alt-2) 0 2px, transparent 2px 14.2857%); }
.methode-bande { position: absolute; top: 7px; bottom: 7px; left: var(--de); width: calc(var(--a) - var(--de)); border-radius: 3px 5px 3px 4px; background: var(--dt-il-cadre); box-shadow: 2px 2px 0 var(--dt-shadow); }
.methode-repere { position: absolute; top: 2px; bottom: 2px; left: var(--x); width: 5px; margin-left: -2.5px; border-radius: 2px; background: var(--dt-ink); box-shadow: 0 0 0 2px var(--dt-paper); }
.methode-echelle { position: relative; }
.methode-graduation { position: relative; display: block; height: 16px; }
.methode-graduation i { position: absolute; left: var(--x); font-style: normal; font-size: 12px; font-weight: 600; color: var(--dt-ink-2); white-space: nowrap; transform: translateX(-50%); font-variant-numeric: tabular-nums; }
.methode-graduation i:first-child { transform: none; }
.methode-reglette { display: none; }
.methode-source { margin-top: var(--esp-4); font-size: 14px; color: var(--dt-ink-2); }
.methode-guides { margin-top: var(--esp-3); font-size: 16px; color: var(--dt-ink-2); }

/* ---------- Pré-diagnostic, DPE ou audit ---------- */
/* Mêmes rubriques dans les trois colonnes, lignes en face : chaque colonne reprend les rangées de la grille (subgrid) */
.methode-compare { margin-top: var(--esp-7); grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(8, auto); row-gap: 0; }
.methode-compare > div { display: grid; grid-row: span 8; grid-template-rows: subgrid; align-content: start; }
.methode-compare dl { display: contents; }
.methode-compare .pastille { justify-self: start; }
.methode-compare h3 { margin-top: var(--esp-4); font-size: 26px; }
.methode-compare dd { font-weight: 600; }
.methode-compare dd + dt { margin-top: var(--esp-4); }
.methode-note { margin-top: var(--esp-5); font-size: 16px; color: var(--dt-ink-2); }

/* ---------- Limites ---------- */
.methode-marge { margin-top: var(--esp-7); font: 800 22px/1.2 var(--display); letter-spacing: -0.015em; }
.methode-limites { margin-top: var(--esp-5); grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--esp-7); }
.methode-limites .carte-p { padding: var(--esp-4) 0 0; border-radius: 0; background: transparent; box-shadow: none; border-top: 3px solid var(--dt-ink); }
.methode-cadre { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--esp-7); align-items: start; margin-top: var(--esp-7); }
.methode-suite p { font-size: 17px; line-height: 1.6; color: var(--dt-ink-2); }
.methode-suite p + p { margin-top: 1em; }

/* ---------- Tablette et téléphone ---------- */
@media (max-width: 999px) {
  .methode-parcours, .methode-cadre { grid-template-columns: minmax(0, 1fr); gap: var(--esp-6); }
  .cartes.c2.methode-publics, .methode-sources, .methode-limites { grid-template-columns: minmax(0, 1fr); }
  .methode-limites { row-gap: var(--esp-5); }
  .methode-moyennes-tete { grid-template-columns: minmax(0, 1fr); grid-template-areas: "titre" "texte" "legende"; }
  .methode-compare { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: var(--esp-5); }
  .methode-compare > div { display: block; }
  .methode-film { transform: none; }
}
@media (max-width: 760px) {
  .methode-publics, .methode-parcours, .methode-sources, .methode-compare { margin-top: var(--esp-6); }
  .methode-parcours .etapes h3 { font-size: 19px; }
  .methode-parcours .etapes p { font-size: 15px; }
  .methode-publics .carte-p p.methode-question { font-size: 19px; }
  .methode-sources .carte-p, .methode-limites .carte-p { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--esp-3) var(--esp-4); align-items: center; }
  .methode-sources .carte-p > :not(.ico), .methode-limites .carte-p > :not(.ico) { grid-column: 1 / -1; }
  .methode-sources .carte-p > .ico + h3, .methode-limites .carte-p > .ico + h3 { grid-column: 2; }
  .methode-sources .methode-site { justify-self: start; }
  .methode-moyennes { margin-top: var(--esp-7); }
  /* Le tableau devient une liste : secteur et médiane, la plage, puis la piste */
  .methode-table thead { display: none; }
  .methode-reglette { display: block; margin-top: var(--esp-4); }
  .methode-table, .methode-table tbody, .methode-table tr, .methode-table td { display: block; }
  .methode-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; padding: 14px 0; border-top: 2px solid var(--dt-ink); }
  .methode-table tbody tr:last-child { border-bottom: 2px solid var(--dt-ink); }
  .methode-table td, .methode-table tbody tr:last-child td { padding: 0; border: 0; }
  .methode-table td.n { text-align: right; }
  .methode-table td:nth-child(3) { grid-column: 1 / -1; text-align: left; font: 400 15px/1.3 var(--text); color: var(--dt-ink-2); }
  .methode-table td:nth-child(3)::before { content: "25ᵉ à 75ᵉ percentile\00a0: "; }
  .methode-table .methode-visu { grid-column: 1 / -1; }
}
@media (forced-colors: active) {
  .methode-film { border: 2px solid CanvasText; }
  .methode-bande, .methode-repere { background: CanvasText; }
}