/* Hallmark · shape: la ville à l’heure bleue, de la façade allumée jusqu’au salon · genre: editorial · theme: custom · job: read (magazine : lire la question de la semaine) · idea: "La Ville est Belle se lit à l’heure bleue : chaque fenêtre allumée de la ville est une question de logement à laquelle Léo répond" · vibe: "heure bleue, fenêtres allumées, pierre chaude, salon"
 * paper: oklch(29% 0.045 257) · accent: oklch(81% 0.105 22) · display: Besley · body: Golos Text · hero: la photographie d’un immeuble d’angle à l’heure bleue en plein écran, le nom du magazine posé en bas à gauche, la question de la semaine en bas à droite · nav: nom du magazine à gauche, cinq liens texte à droite, sans bouton ni filet, posés sur la photo · footer: le salon, une photographie d’intérieur le soir qui porte la description et les quatre derniers articles, puis une ligne de liens · imagery: photographs, Pexels 6 (règle du parc : Pexels autorisé), warm, plus le portrait réel de Léo · signature: l’immeuble des trente derniers articles, une semaine par étage, une rubrique par colonne, les fenêtres allumées là où un article est paru
 * axes: dark/slab-serif/warm · posture: Restrained · contrast: pass · fold: pass · copy: verbatim (titres des 30 articles et bio de Léo repris du site) · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S5 R4 V5 · weakest: E, trente titres réels tiennent mal au budget de mots ; rangés dans six étages à trois colonnes pour que l’œil lise d’abord la forme de la façade */
/* Hallmark · waive 38iii · le em est toute la seconde ligne du h1, romaine, même couleur, à une seconde taille · la règle du parc impose un em pour la ligne qui dit « magazine » sous le nom La Ville est Belle */
/* Hallmark · dismissed 42 · la barre n’a ni bouton ni filet : le « CTA » lu est le bouton Menu, masqué au-dessus de 60rem, et le liseré est la bordure transparente des liens au survol */
/* Hallmark · dismissed 49 · chaque ligne de l’observatoire est une rangée de tableau cliquable (nom, barre, loyer, évolution) : le nom d’agglomération officiel passe sur deux lignes, jamais le chiffre */
/* Hallmark · dismissed 41 · la bande des quartiles de la dossier ne porte aucun texte, c’est une barre de données */
/* Hallmark · answered F15 · trois écarts de colonne pour trois natures : la façade (64px), les blocs de données du relevé, de l’IRL et du seuil des outils (96px), la rangée des sujets de Léo (40px) ; au portage, la colonne d’article de 900 px (règle du parc) et les listes en deux colonnes (24px) */
/* Hallmark · waive 78 · les h2 du contact, du registre des rubriques et du plan sont des intitulés de bloc (25 à 31 px) sous un h1 de page · une page de service n’a pas de sections à titrer au niveau de l’accueil */
/* Hallmark · waive 79 · le titre de l’article tient en haut de page et la photo à la une commence au premier écran, sous la ligne des métadonnées · règle du parc : fil d’ariane, titre et métadonnées au même fer, puis l’image pleine colonne */
/* Hallmark · waive 72 · le bloc FAQ fermé de la chaîne de contenu garde sa réponse masquée dans le details, mesurée hors de la boîte · le contenu injecté par la chaîne n’est pas réécrit par le thème */
/* Hallmark · posture note · une seule couleur d’accent (rose du couchant) ; la surface --color-lit, lumière de lampe en haut des fenêtres de l’immeuble, est une surface déclarée, pas un accent */
/* Hallmark · waive 24b · margin-top -10px et -5px sur la pastille et la coche des points à retenir de la chaîne de contenu · règle du parc : pictogramme centré par top 50 % et une demi-hauteur négative, vérifiée par verifie-article.sh */
/* Hallmark · posture note · la page article passe en plein jour (body.lvb-jour) : mêmes noms de jetons, valeurs claires, accent rose foncé du même couchant ; aucune bascule en cours de page */
/*
Theme Name: La Ville est Belle
Theme URI: https://www.lavilleestbelle.fr/
Author: La Ville est Belle
Description: Thème du magazine La Ville est Belle, « l’heure bleue » : immeuble à la tombée du jour, fenêtres allumées, rose du couchant. Lecture des articles sur fond clair.
Version: 1.0.1
Requires PHP: 8.0
Text Domain: la-ville-est-belle
*/

/* ===== jetons (maquette B, tokens.css) ===== */
/* Contrastes WCAG calculés (OKLCH vers sRGB) : encre sur papier 12,6:1 ; encre2 9,9:1 ; gris 7,3:1 (6,1:1 sur papier2, 9,0:1 sur nuit) ; accent rose sur papier 7,5:1 ; encre-accent sur bouton rose 8,7:1 ; encre sur fenêtre allumée 6,5:1, encre2 5,1:1 ; anneau de focus 7,1:1. Tout passe AA. */
:root {
  --space-3xs: 2px; --space-2xs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 24px; --space-xl: 40px; --space-2xl: 64px; --space-3xl: 96px; --space-4xl: 144px;
  --text-xs: 0.8125rem; --text-sm: 0.875rem; --text-md: 1rem; --text-lg: 1.25rem; --text-xl: 1.5625rem; --text-2xl: 1.953rem; --text-3xl: 2.441rem;
  --text-display-s: clamp(2.5rem, 3.6vw + 1rem, 4.25rem); --text-display: clamp(3.25rem, 6vw + 1rem, 6.5rem); --text-figure: clamp(3.5rem, 5vw + 1.5rem, 6rem);
  --text-section: clamp(2rem, 2.5vw + 1rem, 3.5rem); --text-title: clamp(1.25rem, 0.75vw + 0.875rem, 1.625rem); --text-lead: clamp(1.125rem, 0.35vw + 1rem, 1.375rem);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.7, 0, 0.84, 0); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms; --dur-short: 220ms; --dur-long: 420ms;
  --color-error: oklch(52% 0.19 27); --color-success: oklch(50% 0.12 150);
  --container: 1440px; --measure-wide: 1200px; --gutter: 64px; --gap-columns: 32px; --section-gap-s: 120px; --section-gap: 144px; --section-gap-l: 176px;
  --z-base: 1; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; --z-sticky-nav: 300; --z-modal: 400; --z-toast: 500; --z-tooltip: 600;
  --color-paper: oklch(29% 0.045 257); --color-paper-2: oklch(34% 0.047 257); --color-paper-3: oklch(39% 0.045 257); --color-night: oklch(22% 0.038 260); --color-lit: oklch(46% 0.075 62); --color-lit-2: oklch(40% 0.05 50);
  --color-ink: oklch(96% 0.014 78); --color-ink-2: oklch(88% 0.02 250); --color-muted: oklch(79% 0.03 250); --color-scrim: oklch(18% 0.035 260);
  --color-rule: oklch(47% 0.04 257); --color-rule-soft: oklch(39% 0.042 257);
  --color-accent: oklch(81% 0.105 22); --color-accent-ink: oklch(24% 0.045 257); --color-focus: oklch(83% 0.15 22);
  --font-display: "Besley", Georgia, ui-serif, serif; --font-body: "Golos Text", ui-sans-serif, system-ui, sans-serif; --font-outlier: var(--font-body);
  --radius-card: 4px; --radius-input: 4px; --radius-pill: 999px; --rule-hair: 1px; --shadow-card: none;
  --tracking-display: -0.02em;
  --color-veil: rgba(0, 0, 0, 0.65); /* voile minimal des en-têtes photographiques de rubrique (règle du parc) */
  /* plein jour, pour la page article (body.lvb-jour) : contrastes notés plus bas */
  --color-day-paper: oklch(98.5% 0.006 80); --color-day-paper-2: oklch(95.5% 0.01 80); --color-day-paper-3: oklch(91% 0.012 80);
  --color-day-ink: oklch(25% 0.04 257); --color-day-ink-2: oklch(38% 0.035 257); --color-day-muted: oklch(48% 0.03 257);
  --color-day-rule: oklch(80% 0.015 257); --color-day-rule-soft: oklch(89% 0.012 257); --color-day-scrim: oklch(70% 0.02 257);
  --color-day-accent: oklch(50% 0.14 22); --color-day-focus: oklch(50% 0.16 22);
}

/* Valeurs par défaut des variables de données que les gabarits posent en
   attribut style (largeurs de barres, quartiles, rang de révélation, part
   d'une rubrique, nombre de colonnes de l'immeuble). */
:root { --a: 0; --b: 1; --m: 0; --v: 0; --i: 0; --part: 1; --cols: 3; --h: 50%; --rang: 0; }

/* ===== socle (maquette B, base.css) ===== */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { scrollbar-color: var(--color-muted) var(--color-paper); scroll-padding-top: var(--space-3xl); }
body { margin: 0; background: var(--color-paper); color: var(--color-ink); font-family: var(--font-body); font-size: var(--text-md); line-height: 1.55; -webkit-font-smoothing: antialiased; caret-color: var(--color-accent); }
::selection { background: color-mix(in oklab, var(--color-accent) 22%, transparent); color: var(--color-ink); }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.16em; }
h1, h2, h3 { margin: 0; font-family: var(--font-display); font-synthesis: none; overflow-wrap: break-word; min-width: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
p:not([class]) { max-width: 65ch; }
img, video { max-width: 100%; height: auto; display: block; }
svg { display: block; }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; }
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); box-sizing: border-box; }
.num, .figure, td.num { font-variant-numeric: tabular-nums; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 60rem) { :root { --gutter: 24px; --section-gap-s: 80px; --section-gap: 96px; --section-gap-l: 120px; } }
@media (max-width: 40rem) { :root { --gutter: 16px; --section-gap-s: 56px; --section-gap: 72px; --section-gap-l: 96px; --gap-columns: 16px; } }
@media (prefers-reduced-motion: reduce) { *:not(.keep-motion), *:not(.keep-motion)::before, *:not(.keep-motion)::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }

/* ---------- socle ---------- */
html { color-scheme: dark; overflow-x: clip; max-width: 100%; }
body { max-width: 100%; line-height: 1.6; }
a { text-decoration-color: var(--color-rule); transition: color var(--dur-micro) var(--ease-out), text-decoration-color var(--dur-micro) var(--ease-out); }
a:hover { text-decoration-color: var(--color-accent); }
h1, h2, h3 { font-weight: 500; letter-spacing: -0.015em; line-height: 1.08; color: var(--color-ink); }
.num { font-variant-numeric: tabular-nums lining-nums; }
.evitement { position: absolute; left: var(--space-md); top: calc(-1 * var(--space-3xl)); z-index: var(--z-modal); padding: var(--space-sm) var(--space-md); background: var(--color-accent); color: var(--color-accent-ink); border-radius: var(--radius-card); }
.evitement:focus-visible { top: var(--space-md); }

.section { padding-block: var(--section-gap) 0; }
.intertitre { display: grid; gap: var(--space-md); margin-bottom: var(--space-2xl); max-width: 46rem; }
.intertitre h2 { font-size: var(--text-section); max-width: 18ch; }
.tete__ligne { color: var(--color-ink-2); font-size: var(--text-lead); max-width: 52ch; }
.intertitre--droite { margin-left: auto; text-align: right; justify-items: end; }

/* les photographies couvrent leur cadre, sous le voile ::after */
.facade__photo > img, .toits__photo > img, .porte__photo > img, .salon__photo > img, .irl__photo > img, .leo__portrait > img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; }

/* ---------- bandeau ---------- */
.bandeau { position: relative; z-index: var(--z-raised); }
.bandeau--photo { position: absolute; inset: 0 0 auto 0; }
.bandeau__ligne { display: flex; align-items: center; justify-content: space-between; min-height: 80px; gap: var(--space-lg); }
.enseigne { font-family: var(--font-display); font-weight: 500; font-size: var(--text-xl); letter-spacing: -0.015em; color: var(--color-ink); text-decoration: none; white-space: nowrap; }
.rideau ul { display: flex; gap: var(--space-lg); list-style: none; margin: 0; padding: 0; }
.rideau a { color: var(--color-ink); text-decoration: none; font-size: var(--text-sm); white-space: nowrap; padding-block: var(--space-xs); border-bottom: 1px solid transparent; transition: border-color var(--dur-micro) var(--ease-out); }
.rideau a:hover { border-bottom-color: var(--color-accent); }
.rideau a[aria-current="page"] { border-bottom-color: var(--color-accent); }
.rideau a:focus-visible, .enseigne:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.bandeau__menu, .plan__fermer { display: none; }

/* ---------- la façade ---------- */
.facade { position: relative; min-height: max(640px, min(100svh, 980px)); display: grid; align-items: end; isolation: isolate; }
.facade__photo { position: absolute; inset: 0; z-index: -1; background: var(--color-night); }
.facade__photo::after { content: ""; position: absolute; inset: 0; z-index: 2; background:
  linear-gradient(to bottom, color-mix(in oklab, var(--color-scrim) 70%, transparent) 0, transparent 22%),
  linear-gradient(to top, color-mix(in oklab, var(--color-scrim) 92%, transparent) 0, color-mix(in oklab, var(--color-scrim) 55%, transparent) 34%, transparent 62%); }
.facade__texte { position: relative; display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--space-2xl); align-items: end; padding-bottom: var(--space-2xl); padding-top: var(--space-4xl); }
.facade h1 { font-size: clamp(3.25rem, 5.6vw + 0.5rem, 6rem); line-height: 0.98; letter-spacing: -0.025em; max-width: none; text-shadow: 0 2px 24px var(--color-scrim); }
.facade h1 em { display: block; font-style: normal; font-size: var(--text-2xl); line-height: 1.2; letter-spacing: -0.01em; margin-top: var(--space-md); max-width: 38ch; }
.facade__phrase { margin-top: var(--space-lg); font-size: var(--text-lead); color: var(--color-ink); max-width: 40ch; text-shadow: 0 1px 12px var(--color-scrim); }
.une { display: grid; gap: var(--space-sm); justify-items: start; padding: var(--space-lg); background: color-mix(in oklab, var(--color-night) 82%, transparent); border-radius: var(--radius-card); text-decoration: none; box-shadow: 0 18px 40px -12px color-mix(in oklab, var(--color-scrim) 80%, transparent); transition: background-color var(--dur-short) var(--ease-out); }
.une:hover { background: var(--color-night); }
.une:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.une time { font-size: var(--text-sm); color: var(--color-muted); }
.une__titre { font-family: var(--font-display); font-weight: 500; font-size: var(--text-xl); line-height: 1.2; color: var(--color-ink); text-wrap: balance; }
.bouton { display: inline-flex; align-items: center; min-height: 48px; padding: 0 var(--space-lg); margin-top: var(--space-xs); border-radius: var(--radius-card); background: var(--color-accent); color: var(--color-accent-ink); font-weight: 600; white-space: nowrap; transition: background-color var(--dur-micro) var(--ease-out); }
.une:hover .bouton { background: var(--color-focus); }
.une:active .bouton { transform: translateY(1px); }

/* ---------- l’immeuble ---------- */
.immeuble__grille { display: grid; grid-template-columns: minmax(0, 10rem) repeat(var(--cols, 3), minmax(0, 1fr)); column-gap: var(--space-md); }
.immeuble__tete, .etage { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; }
.immeuble__tete { padding-bottom: var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); }
.etage { padding-block: var(--space-md); border-top: 1px solid var(--color-rule-soft); }
.etage__nom { display: grid; align-content: start; gap: var(--space-2xs); font-family: var(--font-display); font-size: var(--text-lg); line-height: 1.2; padding-top: var(--space-sm); }
.etage__nom span { font-family: var(--font-body); font-size: var(--text-sm); color: var(--color-muted); }
.fenetre { list-style: none; margin: 0; padding: var(--space-xs); border-radius: var(--radius-card); background: linear-gradient(172deg, var(--color-lit) 0, var(--color-paper-2) 78%); box-shadow: 0 14px 30px -18px var(--color-scrim); display: grid; gap: var(--space-2xs); align-content: start; }
.fenetre--eteinte { background: var(--color-night); box-shadow: inset 0 2px 10px color-mix(in oklab, var(--color-scrim) 60%, transparent); }
.fenetre a { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: var(--space-sm); padding: var(--space-sm); border-radius: var(--radius-card); text-decoration: none; transition: background-color var(--dur-micro) var(--ease-out); }
.fenetre a:hover { background: color-mix(in oklab, var(--color-night) 35%, transparent); }
.fenetre a:hover .fenetre__titre { text-decoration-color: var(--color-accent); }
.fenetre a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 0; }
.fenetre time { font-size: var(--text-sm); color: var(--color-ink-2); padding-top: var(--space-3xs); white-space: nowrap; }
.fenetre__rub { display: none; }
.fenetre__titre { font-size: var(--text-md); line-height: 1.4; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.18em; text-decoration-thickness: 1px; transition: text-decoration-color var(--dur-micro) var(--ease-out); }

/* la seule révélation : les fenêtres s’allument étage par étage */
.js .immeuble .fenetre:not(.fenetre--eteinte) { opacity: 0.35; transition: opacity var(--dur-long) var(--ease-out); transition-delay: calc(var(--i, 0) * 70ms); }
.js .immeuble.allume .fenetre { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .js .immeuble .fenetre:not(.fenetre--eteinte) { opacity: 1; transition: none; } }

/* ---------- trois entrees ---------- */
/* la largeur de chaque porte suit le nombre d’articles de sa rubrique (--part, posé par home.php) */
.portes__rang { display: flex; gap: var(--space-xs); }
.porte { flex: var(--part, 1) 1 0%; min-width: 0; position: relative; display: grid; align-items: end; min-height: 600px; border-radius: var(--radius-card); overflow: hidden; text-decoration: none; isolation: isolate; box-shadow: 0 30px 60px -30px var(--color-scrim); }
.porte__photo { position: absolute; inset: 0; z-index: -1; background: var(--color-paper-2); }
.porte__photo::after { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(to top, color-mix(in oklab, var(--color-scrim) 88%, transparent) 0, color-mix(in oklab, var(--color-scrim) 30%, transparent) 40%, transparent 65%); transition: opacity var(--dur-short) var(--ease-out); }
.porte:hover .porte__photo::after { opacity: 0.85; }
.porte:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.porte__texte { display: grid; gap: var(--space-2xs); padding: var(--space-lg); }
.porte__nom { font-family: var(--font-display); font-weight: 500; font-size: var(--text-2xl); line-height: 1.1; color: var(--color-ink); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.14em; text-decoration-thickness: 2px; transition: text-decoration-color var(--dur-micro) var(--ease-out); }
.porte:hover .porte__nom { text-decoration-color: var(--color-accent); }
.porte__nb { font-size: var(--text-sm); color: var(--color-ink-2); }
.porte:first-child .porte__nom { font-size: var(--text-section); }
.porte:not(:first-child) .porte__texte { padding: var(--space-md); }
.porte:not(:first-child) .porte__nom { font-size: var(--text-xl); }

/* ---------- le relevé ---------- */
.releve { padding-bottom: 0; }
.releve__grille { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-3xl); align-items: center; padding-block: var(--space-3xl); background: var(--color-night); border-radius: var(--radius-card); padding-inline: var(--space-3xl); max-width: calc(var(--container) - 2 * var(--gutter)); }
.releve__gauche { display: grid; gap: var(--space-lg); justify-items: start; }
.releve h2 { font-size: var(--text-section); max-width: 14ch; }
.saisie { display: grid; gap: var(--space-xs); width: 100%; max-width: 26rem; font-size: var(--text-sm); color: var(--color-ink-2); }
.saisie input { min-height: 48px; padding: 0 var(--space-md); border: 1px solid var(--color-muted); border-radius: var(--radius-input); background: var(--color-paper); color: var(--color-ink); font-size: var(--text-md); }
.saisie input::placeholder { color: var(--color-muted); }
.saisie input:hover { border-color: var(--color-ink-2); }
.saisie input:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.saisie input:disabled { opacity: 0.55; cursor: not-allowed; }
.renvoi { color: var(--color-accent); font-weight: 600; text-decoration: underline; text-decoration-color: currentColor; text-underline-offset: 0.2em; }
.renvoi:hover { color: var(--color-focus); }
.renvoi:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.releve__chiffre { display: grid; gap: var(--space-md); padding-left: var(--space-2xl); border-left: 1px solid var(--color-rule-soft); }
.releve__nom { font-family: var(--font-display); font-size: var(--text-xl); }
.releve__m2 { font-family: var(--font-display); font-size: var(--text-figure); line-height: 1; letter-spacing: -0.02em; }
.releve__unite { font-family: var(--font-body); font-size: var(--text-lg); color: var(--color-ink-2); letter-spacing: 0; }
.releve__faits { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.3fr); margin: var(--space-md) 0 0; }
.releve__faits div { padding-inline: var(--space-md); border-left: 1px solid var(--color-rule-soft); }
.releve__faits div:first-child { padding-left: 0; border-left: 0; }
.releve__faits dt { font-size: var(--text-sm); color: var(--color-muted); }
.releve__faits dd { margin: var(--space-2xs) 0 0; font-size: var(--text-lg); font-weight: 600; }
.releve__faits dd small { display: block; font-size: var(--text-sm); font-weight: 400; color: var(--color-ink-2); }

/* ---------- Léo ---------- */
.leo { padding-bottom: var(--section-gap-l); }
.leo__corps { display: grid; gap: var(--space-2xl); }
.leo__lettre { display: grid; grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); column-gap: var(--space-3xl); row-gap: var(--space-lg); align-items: end; }
.leo__portrait { position: relative; overflow: hidden; grid-row: 1 / span 2; margin: 0; aspect-ratio: 4 / 5; border-radius: var(--radius-card); box-shadow: 0 28px 50px -24px var(--color-scrim); transform: rotate(-2deg); }
.leo__portrait > img { outline: 1px solid color-mix(in oklab, var(--color-ink) 10%, transparent); outline-offset: -1px; border-radius: var(--radius-card); }
.leo h2 { font-size: var(--text-section); max-width: 16ch; }
.leo__chapo { font-family: var(--font-display); font-size: var(--text-2xl); line-height: 1.35; color: var(--color-ink); max-width: 40ch; }
.leo__sujets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-xl); margin: 0; padding-top: var(--space-xl); border-top: 1px solid var(--color-rule-soft); }
.leo__sujets dt { font-weight: 600; margin-bottom: var(--space-2xs); }
.leo__sujets dd { margin: 0; color: var(--color-ink-2); }

/* ---------- le salon (pied de page) ---------- */
.salon { position: relative; isolation: isolate; background: var(--color-night); }
.salon__photo { position: absolute; inset: 0 0 auto 0; height: 100%; z-index: -1; background: var(--color-night); }
.salon__photo::after { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(to right, color-mix(in oklab, var(--color-scrim) 90%, transparent) 0, color-mix(in oklab, var(--color-scrim) 62%, transparent) 50%, color-mix(in oklab, var(--color-scrim) 30%, transparent) 100%), linear-gradient(to top, var(--color-night) 0, color-mix(in oklab, var(--color-night) 85%, transparent) 30%, transparent 60%); }
.salon__haut { display: grid; gap: var(--space-lg); padding-block: var(--space-4xl) var(--space-2xl); }
.salon__marque { font-family: var(--font-display); font-size: var(--text-display-s); line-height: 1.02; letter-spacing: -0.02em; }
.salon__desc { font-size: var(--text-lead); color: var(--color-ink); max-width: 46ch; }
.salon__derniers { margin-top: var(--space-2xl); }
.salon__derniers ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap-columns); }
.salon__derniers li { border-top: 1px solid var(--color-rule); }
.salon__derniers a { display: grid; gap: var(--space-xs); padding-top: var(--space-md); text-decoration: none; }
.salon__derniers a:hover span { text-decoration: underline; text-decoration-color: var(--color-accent); text-underline-offset: 0.18em; }
.salon__derniers a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.salon__derniers time { font-size: var(--text-sm); color: var(--color-ink-2); }
.salon__derniers span { font-family: var(--font-display); font-size: var(--text-lg); line-height: 1.3; text-wrap: balance; }
.salon__bas { padding-block: var(--space-lg) var(--space-xl); }
.salon__liens { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-md) var(--space-2xl); padding-top: var(--space-lg); border-top: 1px solid var(--color-rule-soft); }
.salon__liens nav { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); }
.salon__liens a { color: var(--color-ink-2); white-space: nowrap; }
.salon__liens a:hover { color: var(--color-ink); }
.salon__liens a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.salon__copy { margin-left: auto; color: var(--color-muted); font-size: var(--text-sm); }
.salon__credits { margin-top: var(--space-md); color: var(--color-muted); font-size: var(--text-xs); }

/* ---------- observatoire ---------- */
.toits { position: relative; min-height: max(560px, min(72svh, 760px)); display: grid; align-items: end; isolation: isolate; }
.toits__photo { position: absolute; inset: 0; z-index: -1; background: var(--color-night); }
.toits__photo::after { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(to bottom, color-mix(in oklab, var(--color-scrim) 65%, transparent) 0, transparent 25%), linear-gradient(to top, var(--color-paper) 0, color-mix(in oklab, var(--color-scrim) 72%, transparent) 38%, transparent 70%); }
.toits__texte { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-2xl); align-items: end; padding-bottom: var(--space-2xl); }
.toits h1 { font-size: var(--text-display-s); line-height: 1.02; max-width: 12ch; text-shadow: 0 2px 24px var(--color-scrim); }
.toits__phrase { margin-top: var(--space-md); font-size: var(--text-lead); max-width: 40ch; }
.toits .saisie { max-width: none; color: var(--color-ink); }
.toits .saisie input { min-height: 52px; font-size: var(--text-lg); background: var(--color-night); }

.atlas { padding-top: var(--section-gap-s); }
.atlas__grille { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--space-2xl); align-items: start; }
.ordre { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); border: 0; margin: 0 0 var(--space-md); padding: 0; }
.ordre legend { float: left; margin-right: var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); }
.ordre input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ordre label { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-md); border: 1px solid var(--color-rule); border-radius: var(--radius-card); font-size: var(--text-sm); cursor: pointer; white-space: nowrap; transition: background-color var(--dur-micro) var(--ease-out); }
.ordre label:hover { background: var(--color-paper-2); }
.ordre input:checked + label { background: var(--color-ink); color: var(--color-paper); border-color: var(--color-ink); }
.ordre input:focus-visible + label { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.atlas__compte { font-size: var(--text-sm); color: var(--color-muted); margin-bottom: var(--space-xs); min-height: 1lh; }
.villes { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--color-rule-soft); }
.ville { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 6rem) 4.5rem 5.5rem; gap: var(--space-md); align-items: center; width: 100%; min-height: 44px; padding: var(--space-2xs) var(--space-sm); border: 0; border-bottom: 1px solid var(--color-rule-soft); background: transparent; color: var(--color-ink); text-align: left; cursor: pointer; transition: background-color var(--dur-micro) var(--ease-out); }
.ville:hover { background: var(--color-paper-2); }
.ville:active { background: var(--color-paper-3); }
.ville:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.ville[aria-pressed="true"] { background: var(--color-paper-2); box-shadow: inset 3px 0 0 var(--color-accent); }
.ville__nom { font-size: var(--text-md); line-height: 1.25; }
.ville__barre { height: 6px; border-radius: var(--radius-card); background: var(--color-rule-soft); position: relative; overflow: hidden; }
.ville__barre::before { content: ""; position: absolute; inset: 0; transform-origin: left; transform: scaleX(var(--v)); background: var(--color-ink-2); }
.ville[aria-pressed="true"] .ville__barre::before { background: var(--color-accent); }
.ville__m2 { text-align: right; font-weight: 600; }
.ville__evo { text-align: right; font-size: var(--text-sm); color: var(--color-ink-2); }
.villes__vide { padding: var(--space-lg) var(--space-sm); color: var(--color-ink-2); }

.dossier { position: sticky; top: var(--space-lg); display: grid; gap: var(--space-md); padding: var(--space-xl); background: var(--color-night); border-radius: var(--radius-card); box-shadow: 0 30px 60px -32px var(--color-scrim); }
.fiche__nom { font-size: var(--text-3xl); line-height: 1.1; }
.fiche__chiffre { font-family: var(--font-display); font-size: var(--text-figure); line-height: 1; letter-spacing: -0.02em; }
.fiche__unite { font-family: var(--font-body); font-size: var(--text-md); color: var(--color-ink-2); letter-spacing: 0; }
.fiche__legende, .fiche__q { color: var(--color-ink-2); font-size: var(--text-sm); }
.fiche__q strong { color: var(--color-ink); }
.fourchette { position: relative; height: 12px; border-radius: var(--radius-card); background: var(--color-paper-2); }
.fourchette__bande { position: absolute; top: 0; bottom: 0; left: calc(var(--a) * 100%); right: calc((1 - var(--b)) * 100%); border-radius: var(--radius-card); background: var(--color-paper-3); box-shadow: inset 0 0 0 1px var(--color-muted); }
.fourchette__med { position: absolute; top: calc(-1 * var(--space-2xs)); bottom: calc(-1 * var(--space-2xs)); left: calc(var(--m) * 100%); width: 3px; margin-left: -1px; background: var(--color-accent); border-radius: var(--radius-card); }
.fiche__faits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); margin: 0; padding-block: var(--space-md); border-block: 1px solid var(--color-rule-soft); }
.fiche__faits dt { font-size: var(--text-sm); color: var(--color-muted); }
.fiche__faits dd { margin: 0; font-size: var(--text-lg); font-weight: 600; }
.pieces { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.pieces caption { text-align: left; color: var(--color-muted); padding-bottom: var(--space-xs); }
.pieces th { text-align: left; font-weight: 600; width: 3.5rem; padding-block: var(--space-2xs); }
.pieces td { padding-block: var(--space-2xs); }
.pieces td.num { text-align: right; width: 6.5rem; }
.pieces__barre { display: block; height: 8px; border-radius: var(--radius-card); background: var(--color-ink-2); transform-origin: left; transform: scaleX(var(--v)); }
.fiche__source { font-size: var(--text-sm); color: var(--color-muted); }

.irl { padding-block: var(--section-gap) var(--section-gap); }
.irl__grille { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-3xl); align-items: center; }
.irl__photo { position: relative; overflow: hidden; margin: 0; aspect-ratio: 3 / 2; min-height: 440px; border-radius: var(--radius-card); box-shadow: 0 30px 60px -30px var(--color-scrim); }
.irl__texte { display: grid; gap: var(--space-lg); }
.irl h2 { font-size: var(--text-section); max-width: 14ch; }
.irl__valeur { font-family: var(--font-display); font-size: var(--text-figure); line-height: 1; letter-spacing: -0.02em; }
.irl__valeur span:not(.num) { display: block; margin-top: var(--space-xs); font-family: var(--font-body); font-size: var(--text-lg); color: var(--color-ink-2); letter-spacing: 0; }

.methode { padding-bottom: var(--section-gap); }
.journal__grille { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--space-3xl); padding-top: var(--space-xl); border-top: 1px solid var(--color-rule); }
.methode h2 { font-size: var(--text-section); }
.methode dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--space-sm) var(--space-xl); margin: 0; }
.methode dt { color: var(--color-muted); font-size: var(--text-sm); padding-top: var(--space-3xs); }
.methode dd { margin: 0; max-width: 60ch; }

/* ---------- téléphone et tablette ---------- */
@media (max-width: 60rem) {
  .bandeau__menu { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-md); border: 1px solid var(--color-ink); border-radius: var(--radius-card); background: transparent; color: var(--color-ink); cursor: pointer; }
  .bandeau__menu:hover { background: color-mix(in oklab, var(--color-ink) 12%, transparent); }
  .bandeau__menu:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
  .rideau { position: fixed; inset: 0; z-index: var(--z-modal); display: none; padding: var(--space-lg) var(--gutter); background: var(--color-night); }
  .rideau.ouvert { display: grid; align-content: start; gap: var(--space-2xl); }
  .plan__fermer { display: inline-flex; justify-self: end; align-items: center; min-height: 44px; padding: 0 var(--space-md); border: 1px solid var(--color-ink); border-radius: var(--radius-card); background: transparent; color: var(--color-ink); cursor: pointer; }
  .plan__fermer:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
  .rideau ul { flex-direction: column; gap: var(--space-md); }
  .rideau a { font-family: var(--font-display); font-size: var(--text-2xl); color: var(--color-ink) !important; }

  .facade__texte, .toits__texte { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .immeuble__grille { grid-template-columns: minmax(0, 1fr); }
  .immeuble__tete { display: none; }
  .etage { grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); }
  .fenetre--eteinte { display: none; }
  .fenetre a { display: flex; flex-wrap: wrap; column-gap: var(--space-sm); row-gap: var(--space-3xs); }
  .fenetre__rub { display: inline; font-size: var(--text-sm); color: var(--color-ink-2); }
  .fenetre__titre { flex-basis: 100%; }
  .portes__rang { flex-direction: column; }
  .porte { flex: none; }
  .porte { min-height: 300px; }
  .porte:first-child { min-height: 420px; }
  .intertitre--droite { margin-left: 0; text-align: left; justify-items: start; }
  .releve__grille { grid-template-columns: minmax(0, 1fr); padding: var(--space-xl) var(--space-lg); gap: var(--space-xl); }
  .releve__chiffre { padding-left: 0; border-left: 0; padding-top: var(--space-xl); border-top: 1px solid var(--color-rule-soft); }
  .leo__lettre { grid-template-columns: minmax(0, 9rem) minmax(0, 1fr); column-gap: var(--space-lg); }
  .leo__portrait { grid-row: 1; }
  .leo__chapo { grid-column: 1 / -1; }
  .leo__sujets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .salon__haut { padding-block: var(--space-3xl) var(--space-xl); }
  .salon__derniers ol { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-lg); }
  .salon__copy { margin-left: 0; }
  .atlas__grille, .irl__grille, .journal__grille { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .dossier { position: static; order: -1; padding: var(--space-lg); }
  .villes { max-height: none; }
  .irl__photo { min-height: 0; aspect-ratio: 4 / 3; }
}
@media (max-width: 40rem) {
  .enseigne { font-size: var(--text-lg); }
  .leo__lettre { grid-template-columns: minmax(0, 7rem) minmax(0, 1fr); }
  .leo h2 { font-size: var(--text-2xl); }
  .leo__chapo { font-size: var(--text-xl); }
  .salon__photo::after { background: linear-gradient(to bottom, color-mix(in oklab, var(--color-scrim) 88%, transparent) 0, color-mix(in oklab, var(--color-scrim) 80%, transparent) 50%, var(--color-night) 100%); }
  .bandeau__ligne { gap: var(--space-sm); }
  .releve__faits { grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); }
  .releve__faits div { padding-left: 0; border-left: 0; }
  .leo__sujets { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
  .ville { grid-template-columns: minmax(0, 1fr) 4.5rem 4.5rem; }
  .ville__barre { display: none; }
  .ordre { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); min-inline-size: 0; }
  .ordre label { justify-content: center; }
  .ordre legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .salon__derniers ol { grid-template-columns: minmax(0, 1fr); }
  .une { padding: var(--space-md); }
}
.salon--court { border-top: 1px solid var(--color-rule-soft); }
.salon--court .salon__haut { padding-block: var(--space-3xl) var(--space-xl); }

/* =====================================================================
   PORTAGE WORDPRESS : ce qui n'existait pas dans la maquette B
   ===================================================================== */

/* ---------- l'enseigne : la façade à une fenêtre allumée, puis le nom ---------- */
.enseigne { display: inline-flex; align-items: center; gap: var(--space-xs); }
.enseigne__icone { width: 1.15em; height: 1.15em; flex: none; color: var(--color-ink); }
.enseigne__fenetre { fill: var(--color-accent); }

/* ---------- fil d'ariane ---------- */
.fil { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-3xs) var(--space-xs); margin-bottom: var(--space-md); font-size: var(--text-sm); color: var(--color-ink-2); }
.fil a { color: inherit; text-decoration-color: var(--color-rule); }
.fil a:hover { color: var(--color-ink); text-decoration-color: var(--color-accent); }
.fil a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.fil__sep { color: var(--color-muted); }
.fil [aria-current] { color: var(--color-muted); }

/* ---------- le seuil : l'interphone des outils (accueil) ----------
   Une plaque de sonnettes à l'entrée de l'immeuble : une étiquette éclairée
   par outil, son usage en une phrase, le bouton qui s'allume au survol. */
.seuil__grille { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-3xl); align-items: end; }
.seuil__mots { display: grid; gap: var(--space-lg); justify-items: start; padding-bottom: var(--space-xl); }
.seuil h2 { font-size: var(--text-section); max-width: 12ch; }
.interphone { padding: var(--space-lg); border-radius: var(--radius-card); background: linear-gradient(168deg, var(--color-paper-3) 0, var(--color-paper-2) 55%, var(--color-night) 100%); box-shadow: 0 30px 60px -30px var(--color-scrim), inset 0 1px 0 color-mix(in oklab, var(--color-ink) 14%, transparent); }
.interphone ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-xs); }
.sonnette { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) 2.75rem; gap: var(--space-md); align-items: center; padding: var(--space-xs) var(--space-xs) var(--space-xs) var(--space-xs); border-radius: var(--radius-card); background: var(--color-night); text-decoration: none; box-shadow: inset 0 2px 8px color-mix(in oklab, var(--color-scrim) 55%, transparent); transition: background-color var(--dur-micro) var(--ease-out); }
.sonnette:hover { background: color-mix(in oklab, var(--color-night) 70%, var(--color-paper-2)); }
.sonnette:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.sonnette__nom { padding: var(--space-sm) var(--space-md); border-radius: var(--radius-card); background: linear-gradient(172deg, var(--color-lit) 0, var(--color-lit-2) 100%); font-family: var(--font-display); font-size: var(--text-lg); line-height: 1.2; color: var(--color-ink); text-wrap: balance; }
.sonnette__phrase { font-size: var(--text-sm); line-height: 1.45; color: var(--color-ink-2); }
.sonnette__bouton { position: relative; width: 2.75rem; height: 2.75rem; border: 1px solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-paper); box-shadow: inset 0 -3px 0 var(--color-scrim); }
.sonnette__bouton::after { content: ""; position: absolute; inset: 34%; border-radius: var(--radius-card); background: var(--color-muted); transition: background-color var(--dur-short) var(--ease-out); }
.sonnette:hover .sonnette__bouton::after, .sonnette:focus-visible .sonnette__bouton::after { background: var(--color-accent); }
.sonnette:active .sonnette__bouton { box-shadow: inset 0 -1px 0 var(--color-scrim); }
.leo__fiche { margin-left: var(--space-2xs); font-family: var(--font-body); font-size: var(--text-md); color: var(--color-accent); font-weight: 600; text-decoration-color: currentColor; }
.leo__fiche:hover { color: var(--color-focus); }
.leo__fiche:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }

/* ---------- le pignon : en-tête des rubriques et des pages ---------- */
.pignon { position: relative; isolation: isolate; padding-block: var(--space-2xl) var(--space-xl); }
.pignon h1 { font-size: var(--text-display-s); line-height: 1.02; max-width: 18ch; }
.pignon__texte { display: grid; gap: var(--space-sm); }
.pignon__texte--court { gap: 0; }
.pignon__texte .fil { margin-bottom: var(--space-xs); }
.pignon--photo { min-height: max(520px, min(64svh, 680px)); display: grid; align-items: end; padding-block: var(--space-4xl) var(--space-lg); }
.pignon__photo { position: absolute; inset: 0; z-index: -1; background: var(--color-night); }
.pignon__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Voile d'au moins rgba(0,0,0,.65) sur toute la photo (règle du parc), puis
   le fondu vers le papier en bas pour que le registre prenne la suite. */
.pignon__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, var(--color-paper) 0, transparent 38%), var(--color-veil); }
.pignon--photo h1 { text-shadow: 0 2px 24px var(--color-scrim); }
.pignon__compte { font-size: var(--text-lead); color: var(--color-ink-2); }
.pignon__desc { max-width: 60ch; color: var(--color-ink); font-size: var(--text-md); }
.pignon__desc p { color: var(--color-ink); }
.pignon__desc p + p { margin-top: var(--space-xs); }

/* ---------- le registre : tous les articles d'une rubrique, mois par mois ---------- */
.registre { padding-block: var(--section-gap-s) 0; }
.registre + .registre { padding-top: var(--space-xl); }
.registre__mois { display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); gap: var(--space-xl); padding-block: var(--space-xl); }
.registre__mois + .registre__mois { padding-top: var(--space-lg); }
.registre__nom { position: sticky; top: var(--space-lg); align-self: start; display: grid; gap: var(--space-2xs); font-size: var(--text-xl); line-height: 1.15; }
.registre__nom span { font-family: var(--font-body); font-size: var(--text-sm); color: var(--color-muted); letter-spacing: 0; }
.registre__liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap-columns); }
.registre__liste--annee a { grid-template-columns: 6rem minmax(0, 1fr); }
.registre__liste--seule { grid-template-columns: minmax(0, 1fr); max-width: 52rem; }
.registre__liste li { border-top: 1px solid var(--color-rule-soft); }
.registre__liste a { display: grid; grid-template-columns: 4.75rem minmax(0, 1fr); gap: var(--space-sm); padding-block: var(--space-sm); text-decoration: none; }
.registre__liste time { padding-top: var(--space-3xs); font-size: var(--text-sm); color: var(--color-muted); white-space: nowrap; }
.registre__liste span { line-height: 1.4; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.18em; transition: text-decoration-color var(--dur-micro) var(--ease-out); }
.registre__liste a:hover span { text-decoration-color: var(--color-accent); }
.registre__liste a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.registre__vide { padding-block: var(--space-xl); color: var(--color-ink-2); }
.registre__vide a { color: var(--color-accent); }

/* ---------- le palier : bloc de bas de rubrique ---------- */
.palier { padding-block: var(--section-gap-s); }
.palier__corps { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--space-md) var(--space-3xl); align-items: start; padding-top: var(--space-xl); border-top: 1px solid var(--color-rule); }
.palier__corps > * { grid-column: 2; max-width: 46rem; }
.palier__corps > h2 { grid-column: 1; grid-row: 1 / span 12; font-size: var(--text-section); line-height: 1.08; }
.palier p { color: var(--color-ink-2); }
.palier ul { margin: 0; padding-left: 1.2em; color: var(--color-ink-2); }
.palier li + li { margin-top: var(--space-2xs); }
.palier strong { color: var(--color-ink); font-weight: 600; }
.palier a { color: var(--color-accent); }

/* ---------- le carnet : texte d'une page (charte, corrections, mentions) ---------- */
.carnet { padding-block: var(--space-3xl) var(--section-gap); }
.carnet__texte { max-width: 46rem; }
.carnet__texte > * + * { margin-top: var(--space-md); }
.carnet__texte h2 { margin-top: var(--space-2xl); font-size: var(--text-2xl); line-height: 1.15; }
.carnet__texte h3 { margin-top: var(--space-xl); font-size: var(--text-xl); line-height: 1.2; }
.carnet__texte p, .carnet__texte li { color: var(--color-ink-2); }
.carnet__texte strong { color: var(--color-ink); font-weight: 600; }
.carnet__texte a { color: var(--color-accent); text-decoration-color: currentColor; }
.carnet__texte a:hover { color: var(--color-focus); }
.carnet__texte ul, .carnet__texte ol { padding-left: 1.2em; }
.carnet__texte img, .carnet__texte picture { border-radius: var(--radius-card); }
.carnet__texte--legal h2 { font-size: var(--text-xl); }
.carnet__texte--legal h2 span { font-weight: inherit !important; }

/* ---------- le courrier : page contact ---------- */
.courrier { padding-block: var(--space-3xl) var(--section-gap); }
.courrier__grille { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-3xl); align-items: start; }
.courrier__mots { display: grid; gap: var(--space-md); }
.courrier__mots h2 { font-size: var(--text-xl); line-height: 1.2; }
.courrier__mots h2:not(:first-child) { margin-top: var(--space-lg); }
.courrier__mots p { color: var(--color-ink-2); }
.courrier__mots a { color: var(--color-accent); }
.courrier__form { padding: var(--space-xl); border-radius: var(--radius-card); background: var(--color-night); box-shadow: 0 30px 60px -32px var(--color-scrim); }
.wpcf7-form p { display: flex; flex-direction: column; gap: var(--space-2xs); margin: 0 0 var(--space-md); }
.wpcf7-form br { display: none; }
.wpcf7-form label { display: grid; gap: var(--space-2xs); font-size: var(--text-sm); color: var(--color-ink-2); }
.wpcf7-form input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]), .wpcf7-form textarea { width: 100%; min-height: 48px; padding: var(--space-sm) var(--space-md); border: 1px solid var(--color-muted); border-radius: var(--radius-input); background: var(--color-paper); color: var(--color-ink); font-size: var(--text-md); }
.wpcf7-form textarea { min-height: 180px; resize: vertical; }
.wpcf7-form input::placeholder, .wpcf7-form textarea::placeholder { color: var(--color-muted); }
.wpcf7-form input:hover, .wpcf7-form textarea:hover { border-color: var(--color-ink-2); }
.wpcf7-form input:focus-visible, .wpcf7-form textarea:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
input.wpcf7-submit { align-self: flex-start; min-height: 48px; padding: 0 var(--space-lg); border: 0; border-radius: var(--radius-input); background: var(--color-accent); color: var(--color-accent-ink); font-weight: 600; cursor: pointer; transition: background-color var(--dur-micro) var(--ease-out); }
input.wpcf7-submit:hover { background: var(--color-focus); }
input.wpcf7-submit:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
input.wpcf7-submit:disabled { opacity: 0.55; cursor: not-allowed; }
.wpcf7-spinner { margin: var(--space-xs) 0 0; }
.wpcf7-not-valid-tip { margin-top: var(--space-2xs); font-size: var(--text-sm); color: var(--color-accent); }
.wpcf7 form .wpcf7-response-output { margin: var(--space-md) 0 0; padding: var(--space-sm) var(--space-md); border: 1px solid var(--color-rule); border-radius: var(--radius-input); color: var(--color-ink); }

/* ---------- le cadastre : plan du site ---------- */
.cadastre { padding-block: var(--space-3xl) var(--section-gap); }
.cadastre__grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: var(--space-2xl) var(--gap-columns); align-items: start; }
.cadastre__lot h2 { display: grid; gap: var(--space-2xs); padding-bottom: var(--space-sm); font-size: var(--text-xl); border-bottom: 1px solid var(--color-rule); }
.cadastre__lot h2 a { text-decoration: none; }
.cadastre__lot h2 a:hover { text-decoration: underline; text-decoration-color: var(--color-accent); }
.cadastre__lot h2 span { font-family: var(--font-body); font-size: var(--text-sm); color: var(--color-muted); letter-spacing: 0; }
.cadastre__lot ul { list-style: none; margin: 0; padding: 0; }
.cadastre__lot li { padding-block: var(--space-xs); font-size: var(--text-sm); line-height: 1.4; }
.cadastre__lot li a { color: var(--color-ink-2); text-decoration-color: transparent; }
.cadastre__lot li a:hover { color: var(--color-ink); text-decoration-color: var(--color-accent); }
.cadastre__lot ul ul { padding: var(--space-2xs) 0 0 var(--space-md); }

/* ---------- la fiche de Léo ---------- */
.leo--fiche { padding-top: 0; padding-bottom: var(--space-xl); }
.leo--fiche .leo__lettre { align-items: start; }
.leo--fiche h1 { font-size: var(--text-display-s); line-height: 1.02; }
.leo__role { display: block; margin-top: var(--space-sm); font-family: var(--font-body); font-size: var(--text-lead); line-height: 1.4; color: var(--color-ink-2); letter-spacing: 0; }
.leo__bio { display: grid; gap: var(--space-md); max-width: 44rem; font-size: var(--text-lead); line-height: 1.55; }
.leo__bio ul { margin: 0; padding-left: 1.2em; color: var(--color-ink-2); }
.leo__bio li + li { margin-top: var(--space-2xs); }
.leo__bio strong { color: var(--color-ink); font-weight: 600; }
.leo__sujets--reperes dd { font-size: var(--text-lg); color: var(--color-ink); }
.leo__sujets--reperes a { color: var(--color-accent); }

/* =====================================================================
   LA PAGE ARTICLE : en plein jour
   La lecture quitte l'heure bleue (règle de Florian du 10/09/2026). Les
   jetons sont redéfinis sur le corps de la page, donc toute la page change,
   en-tête et pied compris : un seul thème par page.
   Contrastes sur papier #fcfaf6 : encre 15,3:1 ; encre2 9,6:1 ; gris 6,3:1
   (5,0:1 sur papier3) ; accent rose foncé 6,2:1 (4,9:1 sur papier3) ;
   papier sur bouton accent 6,2:1. Tout passe AA.
   ===================================================================== */
html:has(body.lvb-jour) { color-scheme: light; scrollbar-color: var(--color-day-muted) var(--color-day-paper); }
body.lvb-jour {
  --color-paper: var(--color-day-paper); --color-paper-2: var(--color-day-paper-2); --color-paper-3: var(--color-day-paper-3);
  --color-night: var(--color-day-paper-2); --color-ink: var(--color-day-ink); --color-ink-2: var(--color-day-ink-2); --color-muted: var(--color-day-muted);
  --color-rule: var(--color-day-rule); --color-rule-soft: var(--color-day-rule-soft); --color-scrim: var(--color-day-scrim);
  --color-accent: var(--color-day-accent); --color-accent-ink: var(--color-day-paper); --color-focus: var(--color-day-focus);
}
.lecture { padding-bottom: var(--section-gap-s); }
.colonne { width: 100%; max-width: calc(900px + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.lecture__tete { display: grid; gap: var(--space-md); padding-block: var(--space-xl); }
.lecture__tete .fil { margin-bottom: 0; }
.lecture__rubrique a { font-size: var(--text-sm); font-weight: 600; color: var(--color-accent); text-decoration: none; }
.lecture__rubrique a:hover { text-decoration: underline; }
.lecture__tete h1 { font-size: var(--text-section); line-height: 1.08; max-width: 24ch; }
.lecture__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-lg); padding-top: var(--space-md); border-top: 1px solid var(--color-rule-soft); font-size: var(--text-sm); color: var(--color-ink-2); }
.lecture__meta a { color: var(--color-ink); }
.lecture__etoiles .kk-star-ratings { margin: 0; }
.lecture__image { margin-block: 0 var(--space-xl); margin-inline: 0; }
.lecture__image img { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; border-radius: var(--radius-card); }
.lecture__resume { margin-bottom: var(--space-lg); }
.lecture__tags { display: flex; flex-wrap: wrap; gap: var(--space-xs); list-style: none; margin: var(--space-2xl) 0 0; padding: 0; }
.lecture__tags a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 var(--space-sm); border: 1px solid var(--color-rule); border-radius: var(--radius-card); font-size: var(--text-sm); color: var(--color-ink-2); text-decoration: none; }
.lecture__tags a:hover { border-color: var(--color-accent); color: var(--color-ink); }

/* le corps : pleine largeur de la colonne, comme l'image au-dessus */
.feuillet { color: var(--color-ink); font-size: var(--text-md); line-height: 1.7; }
.feuillet > * + * { margin-top: var(--space-md); }
.feuillet > :first-child { margin-top: 0; }
.feuillet p { max-width: none; }
.feuillet h2 { margin-top: var(--space-2xl); font-size: var(--text-2xl); line-height: 1.15; }
.feuillet h3 { margin-top: var(--space-xl); font-size: var(--text-xl); line-height: 1.2; }
.feuillet h4 { margin-top: var(--space-lg); font-size: var(--text-lg); font-family: var(--font-body); font-weight: 600; }
.feuillet a { color: var(--color-accent); text-decoration-color: currentColor; }
.feuillet a:hover { color: var(--color-focus); }
.feuillet strong { font-weight: 600; }
.feuillet img { border-radius: var(--radius-card); }
.feuillet figure { margin-left: 0; margin-right: 0; }
.feuillet figcaption { margin-top: var(--space-xs); font-size: var(--text-sm); color: var(--color-muted); }
.feuillet blockquote { margin-left: 0; margin-right: 0; padding-left: var(--space-lg); border-left: 2px solid var(--color-accent); font-family: var(--font-display); font-size: var(--text-xl); line-height: 1.35; }
.feuillet ul, .feuillet ol { padding-left: 1.2em; }
.feuillet li + li { margin-top: var(--space-2xs); }
.feuillet table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.feuillet th, .feuillet td { padding: var(--space-sm); text-align: left; border-bottom: 1px solid var(--color-rule); }
.feuillet th { font-weight: 600; border-bottom-color: var(--color-ink-2); }
.feuillet #ez-toc-container { width: 100%; padding: var(--space-md) var(--space-lg); border: 1px solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-paper-2); box-shadow: none; }
.feuillet #ez-toc-container .ez-toc-title { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 500; color: var(--color-ink); }
.feuillet #ez-toc-container a { color: var(--color-ink-2); text-decoration: none; }
.feuillet #ez-toc-container a:hover { color: var(--color-accent); text-decoration: underline; }

/* ---------- la chaîne de contenu (préfixe cmp aujourd'hui) ----------
   Sélecteurs sur la FIN du nom de classe, toujours qualifiés par .feuillet :
   le préfixe change à chaque version de la chaîne. Les pictogrammes passent
   en mask-image et prennent l'accent ; ils sont centrés sur leur ligne. */
.feuillet [class$="-key"] { margin: var(--space-xl) 0; border: 1px solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-paper); box-shadow: none; overflow: hidden; }
.feuillet [class$="-key-bar"] { height: 4px; background: var(--color-accent); }
.feuillet [class$="-key-in"] { position: relative; padding: var(--space-lg); }
.feuillet [class$="-key-top"] { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-sm); }
.feuillet [class$="-kick"], .feuillet [class$="-cnt"] { display: block; margin: 0 0 var(--space-xs); font-size: var(--text-sm); font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--color-accent); }
.feuillet [class$="-key-h"] { margin: 0 0 var(--space-sm); font-family: var(--font-display); font-weight: 500; font-size: var(--text-xl); line-height: 1.25; color: var(--color-ink); }
.feuillet [class$="-key"] ul { list-style: none; margin: var(--space-sm) 0 0; padding: 0; }
.feuillet [class$="-key"] li { position: relative; margin: 0; padding: var(--space-sm) 0 var(--space-sm) 36px; border-bottom: 1px solid var(--color-rule-soft); color: var(--color-ink-2); line-height: 1.55; }
.feuillet [class$="-key"] li:last-child { border-bottom: 0; }
/* la pastille, puis la coche, toutes deux centrées sur le point à savoir */
.feuillet [class$="-key"] li::before { content: ""; position: absolute; left: 0; top: 50%; margin-top: -10px; width: 20px; height: 20px; border-radius: var(--radius-card); background: color-mix(in oklab, var(--color-accent) 14%, transparent); color: transparent; font-size: 0; line-height: 0; opacity: 1; }
.feuillet [class$="-key"] li::after { content: ""; position: absolute; left: 4px; top: 50%; margin-top: -5px; width: 12px; height: 10px; border: 0; transform: none; background-color: var(--color-accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 5.2l3.2 3.1L11 1.4' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 5.2l3.2 3.1L11 1.4' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.feuillet [class$="-badge"] { display: inline-flex; align-items: center; gap: var(--space-2xs); min-height: 28px; padding: 0 var(--space-sm); border: 1px solid var(--color-accent); border-radius: var(--radius-card); background: transparent; font-size: var(--text-xs); font-weight: 600; line-height: 1; color: var(--color-accent); white-space: nowrap; }
.feuillet [class$="-badge"]::before { content: ""; width: 14px; height: 14px; flex: 0 0 auto; background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E") center / contain no-repeat; }
.feuillet [class$="-foot"] { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); margin: var(--space-md) 0 0; padding-top: var(--space-sm); border-top: 1px solid var(--color-rule-soft); font-size: var(--text-xs); color: var(--color-muted); }
.feuillet [class$="-foot"] span { display: inline-flex; align-items: center; gap: var(--space-xs); }
.feuillet [class$="-foot"] span::before { content: ""; width: 14px; height: 14px; flex: 0 0 auto; background-color: var(--color-accent); }
.feuillet [class$="-foot"] span:nth-child(1)::before { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat; }
.feuillet [class$="-foot"] span:nth-child(2)::before { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='8' width='13' height='13' rx='2'/%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='8' width='13' height='13' rx='2'/%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'/%3E%3C/svg%3E") center / contain no-repeat; }
.feuillet [class$="-foot"] span:nth-child(3)::before { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpolyline points='12 7 12 12 15.5 14'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpolyline points='12 7 12 12 15.5 14'/%3E%3C/svg%3E") center / contain no-repeat; }
.feuillet [class$="-grid"] { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: var(--space-md); margin: var(--space-xl) 0; }
.feuillet [class$="-card"] { position: relative; padding: var(--space-lg); border: 1px solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-paper); color: var(--color-ink); box-shadow: none; transform: none; }
.feuillet [class$="-num"] { position: absolute; top: var(--space-xs); right: var(--space-sm); font-family: var(--font-display); font-size: var(--text-2xl); line-height: 1; color: var(--color-rule); opacity: 1; font-variant-numeric: tabular-nums; }
.feuillet [class$="-ico"] { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin: 0 0 var(--space-sm); border-radius: var(--radius-card); background: var(--color-paper-2); color: var(--color-accent); }
.feuillet [class$="-ico"] svg { width: 22px; height: 22px; }
.feuillet [class$="-card-t"] { margin: 0 0 var(--space-2xs); font-weight: 600; font-size: var(--text-md); color: var(--color-ink); }
.feuillet [class$="-card-x"] { margin: 0; font-size: var(--text-sm); line-height: 1.6; color: var(--color-ink-2); }
.feuillet [class$="-quote"], .feuillet [class$="-out"] { margin: var(--space-xl) 0; padding: var(--space-md) var(--space-lg); border: 0; border-left: 2px solid var(--color-accent); border-radius: 0; background: var(--color-paper-2); color: var(--color-ink); font-style: normal; }
.feuillet [class$="-out"] { margin-top: var(--space-md); }
.feuillet [class$="-out"]:empty { display: none; }
.feuillet [class$="-tool"] { margin: var(--space-xl) 0; padding: var(--space-lg); border: 1px solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-paper); box-shadow: none; }
.feuillet [class$="-tool"] label { display: block; margin: 0 0 var(--space-2xs); font-size: var(--text-sm); font-weight: 600; color: var(--color-ink); }
.feuillet [class$="-rng"] { width: 100%; margin: var(--space-2xs) 0 var(--space-md); accent-color: var(--color-accent); }
.feuillet [class$="-val"] { font-family: var(--font-display); font-size: var(--text-2xl); line-height: 1.1; color: var(--color-accent); }
.feuillet [class$="-gauge"] { height: 10px; margin: var(--space-sm) 0; border-radius: var(--radius-card); background: var(--color-paper-3); overflow: hidden; }
.feuillet [class$="-gauge"] i { display: block; height: 100%; background: var(--color-accent); }
.feuillet [class$="-pick"] { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin: var(--space-2xs) 0 var(--space-md); }
.feuillet [class$="-pick"] button { flex: 1 1 8rem; min-height: 44px; padding: var(--space-sm); border: 1px solid var(--color-rule) !important; border-radius: var(--radius-card); background: var(--color-paper) !important; color: var(--color-ink) !important; font-size: var(--text-sm); font-weight: 600; text-decoration: none; cursor: pointer; box-shadow: none !important; transition: border-color var(--dur-micro) var(--ease-out); }
.feuillet [class$="-pick"] button:hover { border-color: var(--color-accent) !important; }
.feuillet [class$="-pick"] button:focus-visible { outline: 2px solid var(--color-focus) !important; outline-offset: 2px; }
.feuillet [class$="-pick"] button.on { border-color: var(--color-accent) !important; background: var(--color-paper-2) !important; box-shadow: inset 0 0 0 1px var(--color-accent) !important; }
.feuillet [class$="-pick"] button:disabled { cursor: default; background: var(--color-paper) !important; color: var(--color-ink) !important; }
/* -step, -nav et -done prennent la classe « on » : le nom ne finit plus par
   le suffixe, d'où *= au lieu de $= (toujours qualifié par .feuillet). */
.feuillet [class*="-step"]:not(.on) { display: none; }
.feuillet [class*="-step"].on { display: block; }
.feuillet [class*="-nav"]:not(.on), .feuillet [class*="-done"]:not(.on) { display: none; }
.feuillet [class*="-nav"].on { display: block; margin: var(--space-md) 0 0; text-align: right; }
.feuillet [class*="-nav"] button { min-height: 44px; padding: 0 var(--space-lg); border: 0; border-radius: var(--radius-card); background: var(--color-accent) !important; color: var(--color-accent-ink) !important; font-weight: 600; text-decoration: none; cursor: pointer; opacity: 1 !important; }
.feuillet [class*="-nav"] button:hover { background: var(--color-focus) !important; }
.feuillet [class*="-nav"] button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.feuillet [class*="-done"].on { display: block; margin: var(--space-md) 0 0; padding: var(--space-sm) var(--space-md); border: 0; border-left: 2px solid var(--color-accent); border-radius: 0; background: var(--color-paper-2); color: var(--color-ink); font-weight: 600; }
.feuillet [class$="-quiz-item"] { margin: var(--space-md) 0; padding-bottom: var(--space-md); border-bottom: 1px solid var(--color-rule-soft); }
.feuillet [class$="-quiz-item"]:last-child { border-bottom: 0; padding-bottom: 0; }
.feuillet [class$="-quiz-item"] > p { margin: 0 0 var(--space-xs); font-weight: 600; }
.feuillet [class$="-faq"] { margin: var(--space-xl) 0; }
.feuillet [class$="-q"] { margin: 0 0 var(--space-xs); padding: var(--space-md) var(--space-lg); border: 1px solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-paper); }
.feuillet [class$="-q"][open] { border-color: var(--color-ink-2); background: var(--color-paper-2); }
.feuillet [class$="-q"] summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); list-style: none; cursor: pointer; }
.feuillet [class$="-q"] summary::-webkit-details-marker { display: none; }
.feuillet [class$="-q"] summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.feuillet [class$="-q"] summary h3 { margin: 0; font-family: var(--font-body); font-size: var(--text-md); font-weight: 600; color: var(--color-ink); }
.feuillet [class$="-q"] summary::after { content: ""; flex: none; width: 9px; height: 9px; border: 0; border-right: 2px solid var(--color-accent); border-bottom: 2px solid var(--color-accent); transform: rotate(45deg); transition: transform var(--dur-short) var(--ease-out); }
.feuillet [class$="-q"][open] summary::after { transform: rotate(-135deg); }
.feuillet [class$="-q"] p { margin: var(--space-sm) 0 0; color: var(--color-ink-2); }
.feuillet [class$="-src"] { margin: var(--space-xl) 0; padding: var(--space-lg); border: 1px solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-paper-2); }
.feuillet [class$="-src"] h2 { margin: 0 0 var(--space-sm); font-size: var(--text-lg); color: var(--color-ink); }
.feuillet [class$="-src"] ul { list-style: none; margin: 0; padding: 0; }
.feuillet [class$="-src"] li { margin: 0; padding-block: var(--space-sm); border-bottom: 1px solid var(--color-rule-soft); }
.feuillet [class$="-src"] li:last-child { border-bottom: 0; }
.feuillet [class$="-src"] a { color: var(--color-ink); font-weight: 600; font-size: var(--text-sm); text-decoration-color: var(--color-rule); }
.feuillet [class$="-src"] a:hover { color: var(--color-accent); text-decoration-color: currentColor; }
.feuillet [class$="-tag"] { display: inline-block; margin: 0 var(--space-xs) 0 0; padding: var(--space-3xs) var(--space-xs); border-radius: var(--radius-card); background: var(--color-paper-3); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--color-ink-2); }
/* Tableaux : texte toujours foncé sur clair, !important contre le CSS en
   ligne des anciens articles. */
.feuillet [class$="-tab"] { width: 100%; margin: var(--space-xl) 0; border-collapse: collapse; font-size: var(--text-sm); background: var(--color-paper); }
.feuillet [class$="-tab"] th { padding: var(--space-sm); background: var(--color-paper-2) !important; color: var(--color-ink) !important; text-align: left; font-weight: 600; border-bottom: 2px solid var(--color-ink-2); }
.feuillet [class$="-tab"] td { padding: var(--space-sm); background: transparent; color: var(--color-ink-2) !important; border-bottom: 1px solid var(--color-rule-soft); }
.feuillet [class$="-tab"] tr:nth-child(even) td { background: var(--color-paper-2) !important; }
.feuillet [class$="-img"] { max-width: 100%; height: auto; border-radius: var(--radius-card); }
.feuillet [class$="-key-in"] > *:first-child, .feuillet [class$="-quote"] > *:first-child, .feuillet [class$="-out"] > *:first-child, .feuillet [class$="-tool"] > *:first-child { margin-top: 0; }
.feuillet [class$="-key-in"] > *:last-child, .feuillet [class$="-quote"] > *:last-child, .feuillet [class$="-out"] > *:last-child, .feuillet [class$="-tool"] > *:last-child { margin-bottom: 0; }

/* ---------- le signataire : bloc auteur ---------- */
.signataire { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: var(--space-lg); align-items: start; margin-top: var(--space-2xl); padding-top: var(--space-xl); border-top: 1px solid var(--color-rule); }
.signataire__photo { width: 7.5rem; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; border-radius: var(--radius-card); transform: rotate(-2deg); box-shadow: 0 18px 30px -18px var(--color-scrim); }
.signataire__texte { display: grid; gap: var(--space-xs); }
.signataire__nom { font-size: var(--text-xl); line-height: 1.2; }
.signataire__titre { font-size: var(--text-sm); color: var(--color-muted); }
.signataire__bio { color: var(--color-ink-2); }
.signataire__bio p + p { margin-top: var(--space-xs); }
.signataire__liens { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); margin-top: var(--space-xs); font-size: var(--text-sm); }
.signataire__liens a { color: var(--color-accent); font-weight: 600; }

/* ---------- les voisins : trois articles de la même rubrique ----------
   Une grande à gauche avec sa photo, deux en texte à droite : jamais trois
   cases égales. */
.voisins { padding-top: var(--section-gap-s); }
.voisins h2 { margin-bottom: var(--space-lg); font-size: var(--text-2xl); }
.voisins__liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); grid-template-rows: auto 1fr; gap: 0 var(--gap-columns); }
.voisins__liste li:first-child { grid-row: span 2; }
.voisins__liste li:not(:first-child) { border-top: 1px solid var(--color-rule-soft); }
.voisins__liste li:not(:first-child) .voisins__vignette { display: none; }
.voisins__liste a { display: grid; gap: var(--space-xs); padding-block: var(--space-md); text-decoration: none; }
.voisins__liste li:first-child a { padding-top: 0; }
.voisins__vignette img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius-card); }
.voisins__vignette:empty { display: none; }
.voisins h3 { font-size: var(--text-lg); line-height: 1.3; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.16em; transition: text-decoration-color var(--dur-micro) var(--ease-out); }
.voisins__liste li:first-child h3 { font-size: var(--text-xl); }
.voisins__liste a:hover h3 { text-decoration-color: var(--color-accent); }
.voisins__liste a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.voisins__date { font-size: var(--text-sm); color: var(--color-muted); }

/* ---------- téléphone et tablette, pour ce qui précède ---------- */
@media (min-width: 60.0625rem) { .feuillet { font-size: var(--text-lg); } }
@media (max-width: 60rem) {
  .seuil__grille, .courrier__grille { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .seuil__mots { padding-bottom: 0; }
  .sonnette { grid-template-columns: minmax(0, 1fr) 2.75rem; row-gap: var(--space-xs); }
  .sonnette__nom { grid-column: 1; }
  .sonnette__phrase { grid-column: 1; grid-row: 2; padding-inline: var(--space-xs); padding-bottom: var(--space-2xs); }
  .sonnette__bouton { grid-column: 2; grid-row: 1 / span 2; }
  .registre__mois { grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); padding-block: var(--space-lg); }
  .registre__nom { position: static; }
  .registre__liste { grid-template-columns: minmax(0, 1fr); }
  .courrier__form { padding: var(--space-lg); }
  .palier__corps { grid-template-columns: minmax(0, 1fr); }
  .palier__corps > *, .palier__corps > h2 { grid-column: 1; grid-row: auto; }
  .palier__corps > h2 { font-size: var(--text-2xl); }
  .voisins__liste { grid-template-columns: minmax(0, 1fr); }
  .voisins__liste li:first-child { grid-row: auto; }
}
@media (max-width: 40rem) {
  .interphone { padding: var(--space-sm); }
  .signataire { grid-template-columns: 5rem minmax(0, 1fr); gap: var(--space-md); }
  .signataire__photo { width: 5rem; }
  .pignon--photo { min-height: 440px; padding-top: var(--space-4xl); }
  .registre__liste a { grid-template-columns: 4rem minmax(0, 1fr); }
}

/* OUTILS : section fusionnée par l'orchestrateur */
/* OUTILS : feuille des cinq outils et de leur index (chantier des outils).
   À fusionner par l'orchestrateur à la fin de style.css, sous le repère
   « OUTILS : section fusionnée par l'orchestrateur ». Seuls les jetons de
   maquettes/lavilleestbelle/b/tokens.css sont employés ; toutes les classes
   commencent par outil-. Un seul accent (rose du couchant), un seul rayon
   (4 px, --radius-card et --radius-input), thème sombre de B sur toute la
   page. Aucun overflow sur html ou body ; la frise défile dans son propre
   cadre. Contrastes (valeurs de tokens.css) : encre sur papier 12,6:1,
   encre2 9,9:1, gris 7,3:1, accent sur papier 7,5:1, encre-accent sur
   accent 8,7:1, encre sur nuit plus de 14:1. */

/* ---------- commun ---------- */
.outil-page { padding-bottom: var(--section-gap-s); }
.outil-haut { padding-top: var(--space-lg); }
.outil-fil { font-size: var(--text-sm); color: var(--color-ink-2); }
.outil-page h1 { font-size: var(--text-display-s); font-weight: 500; line-height: 1.04; letter-spacing: var(--tracking-display); max-width: 20ch; }
.outil-page h2 { font-weight: 500; }
.outil-chapo { margin-top: var(--space-md); max-width: 52ch; font-size: var(--text-lead); line-height: 1.45; color: var(--color-ink-2); }
.outil-page p a, .outil-page li a, .outil-page td a, .outil-page dd a { color: var(--color-ink); text-decoration-color: var(--color-accent); }
.outil-page p a:hover, .outil-page li a:hover, .outil-page td a:hover, .outil-page dd a:hover { color: var(--color-accent); }

.outil-champ { display: grid; gap: var(--space-2xs); min-width: 0; }
.outil-champ__lib { font-size: var(--text-sm); color: var(--color-ink-2); }
.outil-champ__ligne { display: flex; align-items: center; gap: var(--space-sm); color: var(--color-ink-2); font-size: var(--text-sm); }
.outil-champ input, .outil-curseur--taux input { width: 100%; min-width: 0; min-height: 48px; padding: 0 var(--space-sm); border: 1px solid var(--color-rule); border-radius: var(--radius-input); background: var(--color-night); color: var(--color-ink); font-size: var(--text-md); font-variant-numeric: tabular-nums; color-scheme: dark; transition: border-color var(--dur-micro) var(--ease-out); }
.outil-champ__ligne input { max-width: 12rem; }
.outil-champ input:hover, .outil-curseur--taux input:hover { border-color: var(--color-muted); }
.outil-champ input:focus-visible, .outil-curseur--taux input:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-color: var(--color-ink); }
.outil-champ input::placeholder, .outil-curseur--taux input::placeholder { color: var(--color-muted); }
.outil-page [aria-invalid="true"] { border-color: var(--color-error); box-shadow: inset 3px 0 0 var(--color-error); }
.outil-erreur { display: block; padding-left: var(--space-sm); border-left: 2px solid var(--color-error); font-size: var(--text-sm); color: var(--color-ink); }

.outil-coche { display: flex; align-items: flex-start; gap: var(--space-sm); min-height: 44px; padding-block: var(--space-xs); cursor: pointer; font-size: var(--text-md); line-height: 1.4; }
.outil-coche input { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--color-accent); cursor: pointer; }
.outil-coche input:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.outil-coche input:disabled { cursor: not-allowed; }
.outil-coche small { display: block; margin-top: var(--space-3xs); font-size: var(--text-sm); color: var(--color-ink-2); }

.outil-bouton { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 var(--space-lg); border: 1px solid var(--color-accent); border-radius: var(--radius-card); background: var(--color-accent); color: var(--color-accent-ink); font-weight: 600; cursor: pointer; transition: background-color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out); }
.outil-bouton:hover { background: var(--color-focus); border-color: var(--color-focus); }
.outil-bouton:active { transform: translateY(1px); }
.outil-bouton:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.outil-bouton--discret { background: transparent; border-color: var(--color-rule); color: var(--color-ink); font-weight: 400; }
.outil-bouton--discret:hover { background: var(--color-paper-2); border-color: var(--color-muted); }

.outil-lire { margin-top: var(--space-lg); font-size: var(--text-sm); color: var(--color-ink-2); }
.outil-source { margin-top: var(--section-gap-s); font-size: var(--text-sm); color: var(--color-ink-2); }
.outil-vide { padding-block: var(--space-2xl); }

/* ---------- index : le registre ---------- */
.outil-registre { padding-top: var(--space-xl); }
.outil-registre__cadre { margin-top: var(--space-2xl); }
.outil-registre__table { width: 100%; border-collapse: collapse; }
.outil-registre__table thead th { padding: 0 var(--space-md) var(--space-sm) 0; border-bottom: 1px solid var(--color-rule); font-size: var(--text-sm); font-weight: 400; text-align: left; color: var(--color-muted); }
.outil-registre__table tbody th, .outil-registre__table td { padding: var(--space-lg) var(--space-md) var(--space-lg) 0; border-bottom: 1px solid var(--color-rule-soft); vertical-align: top; text-align: left; }
.outil-registre__table tbody th { width: 30%; font-family: var(--font-display); font-size: var(--text-xl); font-weight: 500; line-height: 1.2; }
.outil-registre__table tbody th a { color: var(--color-ink); text-decoration: none; background: linear-gradient(var(--color-accent), var(--color-accent)) 0 100% / 0 1px no-repeat; transition: background-size var(--dur-short) var(--ease-out); }
.outil-registre__table tbody th a:hover { background-size: 100% 1px; }
.outil-registre__table tbody th a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.outil-registre__table td { color: var(--color-ink-2); }
.outil-registre__table td.num { white-space: nowrap; color: var(--color-muted); }
.outil-methode { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--space-2xl); margin-top: var(--section-gap-s); }
.outil-methode h2 { font-size: var(--text-section); line-height: 1.08; }
.outil-methode__texte { display: grid; gap: var(--space-md); color: var(--color-ink-2); }

/* ---------- 1. révision : la frise ---------- */
.outil-irl__tete { padding-top: var(--space-xl); }
.outil-irl__frise { margin-top: var(--space-2xl); }
.outil-irl__legende { font-family: var(--font-body); font-size: var(--text-sm); font-weight: 400; color: var(--color-muted); }
.outil-irl__piste { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(48px, 1fr); gap: var(--space-2xs); height: 280px; margin-top: var(--space-md); padding-bottom: var(--space-2xs); overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; }
.outil-irl__trim { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: var(--space-2xs); height: 100%; padding: 0; border: 0; background: none; color: var(--color-ink-2); font: inherit; cursor: pointer; }
.outil-irl__val { order: -1; font-size: var(--text-xs); text-align: center; color: var(--color-muted); }
.outil-irl__barre { align-self: end; height: var(--h, 50%); border-radius: var(--radius-card) var(--radius-card) 0 0; background: var(--color-paper-3); transition: background-color var(--dur-micro) var(--ease-out); }
.outil-irl__nom { padding-top: var(--space-2xs); border-top: 1px solid var(--color-rule); font-size: var(--text-xs); text-align: center; white-space: nowrap; }
.outil-irl__nom b { display: block; font-weight: 600; color: var(--color-ink); }
.outil-irl__trim:not(.outil-irl__trim--an):not(:first-child) .outil-irl__nom { padding-bottom: calc(var(--text-xs) * 1.55); }
.outil-irl__trim:hover .outil-irl__barre { background: var(--color-muted); }
.outil-irl__trim[aria-checked="true"] .outil-irl__barre { background: var(--color-accent); }
.outil-irl__trim[aria-checked="true"] .outil-irl__val { color: var(--color-ink); font-weight: 600; }
.outil-irl__trim[aria-checked="true"] .outil-irl__nom { color: var(--color-ink); border-top-color: var(--color-accent); }
.outil-irl__trim:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: var(--radius-card); }
.outil-irl__aide { margin-top: var(--space-sm); font-size: var(--text-xs); color: var(--color-muted); }
.outil-irl__releve { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-xs) var(--space-3xl); align-items: start; margin-top: var(--space-2xl); }
.outil-irl__saisies { display: grid; gap: var(--space-md); }
.outil-irl__lignes { margin: 0; }
.outil-irl__lignes div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-md); padding-block: var(--space-sm); border-bottom: 1px solid var(--color-rule-soft); }
.outil-irl__lignes dt { color: var(--color-ink-2); }
.outil-irl__lignes dd { margin: 0; text-align: right; }
.outil-irl__lignes .outil-irl__total { border-bottom: 0; padding-top: var(--space-md); }
.outil-irl__total dt { color: var(--color-ink); font-weight: 600; }
.outil-irl__total dd { font-family: var(--font-display); font-size: var(--text-figure); line-height: 1; color: var(--color-accent); }
.outil-irl__phrase { grid-column: 2; font-size: var(--text-md); color: var(--color-ink-2); }
.outil-irl--vide .outil-irl__total dd { color: var(--color-muted); }
.outil-irl__texte { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2xl); margin-top: var(--section-gap-s); padding-top: var(--space-2xl); border-top: 1px solid var(--color-rule); }
.outil-irl__texte h2 { font-size: var(--text-xl); }
.outil-irl__texte h2:not(:first-child) { margin-top: var(--space-xl); }
.outil-irl__texte p { margin-top: var(--space-sm); color: var(--color-ink-2); }
.outil-source dl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-lg); margin: 0; }
.outil-source dt { color: var(--color-muted); }
.outil-source dd { margin: var(--space-3xs) 0 0; }

/* ---------- 2. dépôt : le pas à pas ---------- */
.outil-depot__grille { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-3xl); align-items: start; padding-top: var(--space-xl); }
.outil-depot__tete { position: sticky; top: var(--space-lg); }
.outil-depot__tete h1 { font-size: var(--text-section); line-height: 1.06; }
.outil-depot__loi { margin: var(--space-xl) 0 0; padding-left: var(--space-lg); border-left: 2px solid var(--color-accent); }
.outil-depot__loi p { font-family: var(--font-display); font-size: var(--text-lg); line-height: 1.4; }
.outil-depot__loi footer { margin-top: var(--space-xs); font-size: var(--text-sm); color: var(--color-muted); }
.outil-depot__pas { display: grid; gap: var(--space-lg); padding: var(--space-xl); border-radius: var(--radius-card); background: var(--color-night); }
.outil-depot__progres { display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); font-size: var(--text-sm); color: var(--color-ink-2); }
.outil-depot__jauge { display: flex; gap: var(--space-2xs); }
.outil-depot__jauge i { width: 32px; height: 4px; border-radius: var(--radius-card); background: var(--color-rule); transition: background-color var(--dur-short) var(--ease-out); }
.outil-depot__jauge i.fait { background: var(--color-accent); }
.outil-depot__q { display: grid; gap: var(--space-md); min-width: 0; margin: 0; padding: 0; border: 0; }
.outil-depot__q legend { padding: 0; margin-bottom: var(--space-xs); font-family: var(--font-display); font-size: var(--text-2xl); line-height: 1.15; }
.outil-depot__aide { font-size: var(--text-sm); color: var(--color-ink-2); }
.outil-depot__choix { display: grid; gap: var(--space-sm); }
.outil-depot__choix label { display: flex; gap: var(--space-md); align-items: flex-start; padding: var(--space-md) var(--space-lg); border: 1px solid var(--color-rule); border-radius: var(--radius-card); cursor: pointer; transition: border-color var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out); }
.outil-depot__choix label:hover { border-color: var(--color-muted); }
.outil-depot__choix label:has(input:checked) { border-color: var(--color-accent); background: var(--color-paper); }
.outil-depot__choix input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--color-accent); }
.outil-depot__choix input:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.outil-depot__choix span { color: var(--color-ink-2); font-size: var(--text-sm); }
.outil-depot__choix b { display: block; font-size: var(--text-md); font-weight: 600; color: var(--color-ink); }
.outil-depot__duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }
.outil-depot__nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-sm); }
.outil-depot__nav [data-action="suite"] { margin-left: auto; }
.outil-depot__fin { display: grid; gap: var(--space-md); }
.outil-depot__fin:focus { outline: none; }

.outil-depot__echeance span { display: block; font-size: var(--text-sm); color: var(--color-ink-2); }
.outil-depot__echeance time { display: block; margin-top: var(--space-2xs); font-family: var(--font-display); font-size: var(--text-3xl); line-height: 1.05; color: var(--color-ink); }
.outil-depot__etat { color: var(--color-ink); }
.outil-depot__somme { margin: 0; }
.outil-depot__somme div { display: flex; justify-content: space-between; gap: var(--space-md); padding-block: var(--space-xs); border-bottom: 1px solid var(--color-rule-soft); }
.outil-depot__somme dt { color: var(--color-ink-2); }
.outil-depot__somme dd { margin: 0; text-align: right; }
.outil-depot__somme .outil-depot__total { border-bottom: 0; padding-top: var(--space-sm); align-items: baseline; }
.outil-depot__total dt { color: var(--color-ink); font-weight: 600; }
.outil-depot__total dd { font-family: var(--font-display); font-size: var(--text-2xl); color: var(--color-accent); }
.outil-depot__note { font-size: var(--text-sm); color: var(--color-ink-2); }
.outil-depot__fin .outil-bouton { justify-self: start; }
.outil-depot__texte { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--space-md) var(--space-2xl); margin-top: var(--section-gap-s); }
.outil-depot__texte h2 { grid-column: 1; font-size: var(--text-xl); line-height: 1.2; }
.outil-depot__texte > p { grid-column: 2; color: var(--color-ink-2); }
.outil-depot__texte h2 ~ h2, .outil-depot__texte h2 ~ h2 + p { margin-top: var(--space-xl); }
.outil-depot__texte .outil-lire { margin-top: var(--space-md); }
.outil-source--liste ul { display: grid; gap: var(--space-xs); margin: 0; padding: var(--space-lg) 0 0; border-top: 1px solid var(--color-rule); list-style: none; }

/* ---------- 3. préavis : le calendrier ---------- */
.outil-preavis__tete { padding-top: var(--space-xl); }
.outil-preavis__table { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--space-3xl); align-items: start; margin-top: var(--space-2xl); }
.outil-preavis__reglages { display: grid; gap: var(--space-xl); }
.outil-preavis__aide { font-size: var(--text-xs); color: var(--color-muted); }
.outil-preavis__motifs { display: grid; gap: var(--space-xs); margin: 0; padding: 0; border: 0; min-width: 0; }
.outil-preavis__motifs legend { padding: 0; margin-bottom: var(--space-sm); font-size: var(--text-sm); color: var(--color-ink-2); }
.outil-coche--fort { padding-bottom: var(--space-sm); border-bottom: 1px solid var(--color-rule); font-weight: 600; }
.outil-preavis__liste { display: grid; transition: opacity var(--dur-short) var(--ease-out); }
.outil-preavis__liste .outil-coche { font-size: var(--text-sm); }
.outil-preavis__liste--sans { opacity: 0.45; }
.outil-preavis__vue { display: grid; gap: var(--space-lg); padding: var(--space-xl); border-radius: var(--radius-card); background: var(--color-night); }
.outil-preavis__fin { display: grid; gap: var(--space-2xs); }
.outil-preavis__fin span:first-child { font-size: var(--text-sm); color: var(--color-ink-2); }
.outil-preavis__fin strong { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 500; line-height: 1.05; }
.outil-preavis__fin span:last-child { font-size: var(--text-sm); color: var(--color-ink-2); max-width: 56ch; }
.outil-preavis__mois { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13.5rem), 1fr)); gap: var(--space-lg); }
.outil-cal__titre { margin-bottom: var(--space-xs); font-family: var(--font-display); font-size: var(--text-lg); }
.outil-cal__titre::first-letter { text-transform: uppercase; }
.outil-cal__grille { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.outil-cal__jsem { padding-bottom: var(--space-2xs); font-size: var(--text-xs); text-align: center; color: var(--color-muted); }
.outil-cal__j { display: grid; place-items: center; aspect-ratio: 1; border-radius: var(--radius-card); font-size: var(--text-xs); font-variant-numeric: tabular-nums; color: var(--color-muted); }
.outil-cal__j--dans { background: var(--color-paper-2); color: var(--color-ink); }
.outil-cal__j--debut { box-shadow: inset 0 0 0 1px var(--color-ink); }
.outil-cal__j--fin { background: var(--color-accent); color: var(--color-accent-ink); font-weight: 600; transition: background-color var(--dur-short) var(--ease-out); }
.outil-preavis__prorata { font-size: var(--text-sm); color: var(--color-ink-2); }
.outil-preavis__texte { margin-top: var(--section-gap-s); }
.outil-preavis__texte h2 { font-size: var(--text-section); line-height: 1.08; max-width: 22ch; }
.outil-preavis__colonnes { margin-top: var(--space-xl); column-count: 2; column-gap: var(--space-2xl); color: var(--color-ink-2); }
.outil-preavis__colonnes p { break-inside: avoid; margin-bottom: var(--space-md); }
.outil-source--table table { width: 100%; border-collapse: collapse; }
.outil-source--table caption { padding-bottom: var(--space-sm); text-align: left; font-family: var(--font-display); font-size: var(--text-lg); color: var(--color-ink); }
.outil-source--table th { padding: var(--space-xs) var(--space-md) var(--space-xs) 0; font-weight: 400; text-align: left; color: var(--color-muted); border-bottom: 1px solid var(--color-rule); }
.outil-source--table td { padding: var(--space-sm) var(--space-md) var(--space-sm) 0; border-bottom: 1px solid var(--color-rule-soft); vertical-align: top; }

/* ---------- 4. DPE : les étiquettes ---------- */
.outil-dpe__tete { padding-top: var(--space-xl); }
.outil-dpe__choix { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--space-3xl); align-items: center; margin-top: var(--space-2xl); }
.outil-dpe__echelle { display: grid; gap: var(--space-2xs); }
.outil-dpe__classe { width: calc(40% + var(--rang, 0) * 10%); min-height: 56px; padding: 0 var(--space-lg); border: 0; border-radius: var(--radius-card); background: var(--color-paper-2); color: var(--color-ink); font-family: var(--font-display); font-size: var(--text-2xl); line-height: 1; text-align: left; cursor: pointer; transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out); }
.outil-dpe__classe:hover { background: var(--color-paper-3); }
.outil-dpe__classe[aria-checked="true"] { background: var(--color-accent); color: var(--color-accent-ink); }
.outil-dpe__classe:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.outil-dpe__verdict { display: grid; gap: var(--space-xl); }
.outil-dpe__lieu { display: grid; gap: var(--space-xs); margin: 0; padding: 0; border: 0; min-width: 0; }
.outil-dpe__lieu legend { padding: 0; margin-bottom: var(--space-xs); font-size: var(--text-sm); color: var(--color-ink-2); }
.outil-dpe__lieu label { display: flex; align-items: center; gap: var(--space-sm); min-height: 44px; padding: var(--space-xs) var(--space-md); border: 1px solid var(--color-rule); border-radius: var(--radius-card); cursor: pointer; font-size: var(--text-sm); }
.outil-dpe__lieu label:has(input:checked) { border-color: var(--color-ink); background: var(--color-paper-2); }
.outil-dpe__lieu input { width: 18px; height: 18px; margin: 0; accent-color: var(--color-accent); }
.outil-dpe__lieu input:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.outil-dpe__phrase { font-family: var(--font-display); font-size: var(--text-xl); line-height: 1.3; }
.outil-dpe__temps { margin-top: var(--section-gap-s); }
.outil-dpe__temps h2 { font-size: var(--text-xl); }
.outil-dpe__ligne { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--space-lg); margin: var(--space-xl) 0 0; padding: 0; list-style: none; }
.outil-dpe__ligne::before { content: ""; position: absolute; top: 7px; left: 0; right: 0; height: 2px; background: var(--color-rule); }
.outil-dpe__jalon { position: relative; padding-top: var(--space-xl); }
.outil-dpe__jalon::before { content: ""; position: absolute; top: 0; left: 0; width: 16px; height: 16px; border-radius: var(--radius-card); background: var(--color-paper); box-shadow: inset 0 0 0 2px var(--color-rule); }
.outil-dpe__jalon--sort::before { background: var(--color-accent); box-shadow: none; }
.outil-dpe__jalon--gel::before { box-shadow: inset 0 0 0 2px var(--color-accent); }
.outil-dpe__jalon--deja::before { background: var(--color-muted); box-shadow: none; }
.outil-dpe__jalon time { font-size: var(--text-sm); font-weight: 600; color: var(--color-ink); }
.outil-dpe__quoi { margin-top: var(--space-2xs); font-size: var(--text-sm); color: var(--color-ink-2); }
.outil-dpe__effet { margin-top: var(--space-xs); font-size: var(--text-sm); color: var(--color-muted); }
.outil-dpe__jalon--sort .outil-dpe__effet, .outil-dpe__jalon--gel .outil-dpe__effet { color: var(--color-accent); }
.outil-dpe__tete h1 { max-width: 24ch; }
.outil-dpe__textes { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-xl) var(--space-3xl); align-items: start; margin-top: var(--section-gap-s); }
.outil-dpe__textes > h2 { grid-column: 1 / -1; font-size: var(--text-section); line-height: 1.08; }
.outil-dpe__citations { display: grid; gap: var(--space-md); }
.outil-dpe__citations blockquote { margin: 0; padding: var(--space-lg); border-radius: var(--radius-card); background: var(--color-night); }
.outil-dpe__citations p { font-family: var(--font-display); font-size: var(--text-md); line-height: 1.5; }
.outil-dpe__citations footer { margin-top: var(--space-sm); font-size: var(--text-xs); color: var(--color-muted); }
.outil-dpe__prose { display: grid; gap: var(--space-md); max-width: 68ch; color: var(--color-ink-2); }
.outil-source--ligne p { max-width: none; }

/* ---------- 5. capacité : curseurs et jauge ---------- */
.outil-credit__tete { padding-top: var(--space-xl); }
.outil-credit__poste { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-3xl); align-items: start; margin-top: var(--space-2xl); }
.outil-credit__curseurs { display: grid; gap: var(--space-lg); }
.outil-curseur { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2xs) var(--space-md); align-items: baseline; }
.outil-curseur label { font-size: var(--text-sm); color: var(--color-ink-2); }
.outil-curseur output { font-weight: 600; text-align: right; white-space: nowrap; }
.outil-curseur input[type="range"] { grid-column: 1 / -1; width: 100%; height: 32px; margin: 0; accent-color: var(--color-accent); cursor: pointer; }
.outil-curseur input[type="range"]:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.outil-curseur--taux { padding-top: var(--space-md); border-top: 1px solid var(--color-rule); }
.outil-curseur--taux .outil-champ__ligne, .outil-curseur--taux .outil-credit__aide, .outil-curseur--taux .outil-erreur { grid-column: 1 / -1; }
.outil-curseur--taux input { max-width: 9rem; }
.outil-credit__aide { font-size: var(--text-xs); color: var(--color-muted); }
.outil-credit__jauge { position: sticky; top: var(--space-lg); display: grid; gap: var(--space-sm); margin: 0; padding: var(--space-xl); border-radius: var(--radius-card); background: var(--color-night); }
.outil-credit__jauge svg { width: 100%; height: auto; overflow: visible; }
.outil-credit__arc { fill: none; stroke: var(--color-paper-3); stroke-width: 16; }
.outil-credit__arc--plein { stroke: var(--color-accent); transition: stroke-dasharray var(--dur-long) var(--ease-out); }
.outil-credit__seuil { stroke: var(--color-ink); stroke-width: 2; }
.outil-credit__jauge figcaption { display: grid; gap: var(--space-2xs); text-align: center; }
.outil-credit__pct { font-family: var(--font-display); font-size: var(--text-figure); line-height: 1; }
.outil-credit--attente .outil-credit__pct { font-size: var(--text-2xl); color: var(--color-muted); }
.outil-credit__dit { font-size: var(--text-sm); color: var(--color-ink-2); }
.outil-credit__max { padding-top: var(--space-sm); border-top: 1px solid var(--color-rule-soft); font-size: var(--text-sm); color: var(--color-ink); text-align: center; }
.outil-credit__max:empty { display: none; }
.outil-credit__tableau { margin-top: var(--section-gap-s); }
.outil-credit__tableau h2 { font-size: var(--text-xl); }
.outil-credit__cadre { margin-top: var(--space-lg); overflow-x: auto; }
.outil-credit__cadre table { width: 100%; min-width: 34rem; border-collapse: collapse; }
.outil-credit__cadre th, .outil-credit__cadre td { padding: var(--space-sm) var(--space-md); border-bottom: 1px solid var(--color-rule-soft); text-align: right; }
.outil-credit__cadre thead th { font-size: var(--text-sm); font-weight: 400; color: var(--color-muted); border-bottom-color: var(--color-rule); }
.outil-credit__cadre tbody th { white-space: nowrap; }
.outil-credit__cadre th:first-child, .outil-credit__cadre td[colspan] { text-align: left; padding-left: 0; }
.outil-credit__cadre td[colspan] { color: var(--color-muted); }
.outil-credit__choisie { background: var(--color-paper-2); }
.outil-credit__choisie th:first-child { box-shadow: inset 3px 0 0 var(--color-accent); padding-left: var(--space-md); }
.outil-credit__hors { color: var(--color-accent); font-weight: 600; }
.outil-credit__dans { color: var(--color-ink-2); }
.outil-credit__texte { max-width: 68ch; margin: var(--section-gap-s) auto 0; color: var(--color-ink-2); }
.outil-credit__texte h2 { font-size: var(--text-2xl); color: var(--color-ink); }
.outil-credit__texte h2:not(:first-child) { margin-top: var(--space-xl); }
.outil-credit__texte p { margin-top: var(--space-sm); }
.outil-source--note p { max-width: 68ch; margin-inline: auto; }

/* ---------- paliers ---------- */
@media (max-width: 60rem) {
  .outil-methode, .outil-irl__releve, .outil-irl__texte, .outil-depot__grille, .outil-depot__texte, .outil-preavis__table, .outil-dpe__choix, .outil-credit__poste { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .outil-irl__phrase, .outil-depot__texte h2, .outil-depot__texte > p { grid-column: 1; }
  .outil-depot__texte h2 ~ h2 { margin-top: var(--space-lg); }
  .outil-depot__texte h2 ~ h2 + p { margin-top: 0; }
  .outil-depot__tete, .outil-credit__jauge { position: static; }
  .outil-source dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .outil-dpe__textes { grid-template-columns: minmax(0, 1fr); }
  .outil-preavis__colonnes { column-count: 1; }
  .outil-dpe__ligne { grid-auto-flow: row; gap: var(--space-lg); padding-left: var(--space-xl); }
  .outil-dpe__ligne::before { top: 0; bottom: 0; left: 7px; right: auto; width: 2px; height: auto; }
  .outil-dpe__jalon { padding-top: 0; }
  .outil-dpe__jalon::before { left: calc(-1 * var(--space-xl)); top: 2px; }
}
@media (max-width: 40rem) {
  .outil-irl__piste { height: 240px; grid-auto-columns: 48px; }
  .outil-irl__trim:not([aria-checked="true"]) .outil-irl__val { visibility: hidden; }
  .outil-irl__total dd { font-size: var(--text-3xl); }
  .outil-depot__pas, .outil-preavis__vue, .outil-credit__jauge { padding: var(--space-lg); }
  .outil-depot__duo { grid-template-columns: minmax(0, 1fr); }
  .outil-dpe__classe { width: calc(46% + var(--rang, 0) * 9%); min-height: 48px; }
  .outil-source dl { grid-template-columns: minmax(0, 1fr); }
  .outil-registre__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .outil-registre__table, .outil-registre__table tbody, .outil-registre__table tr, .outil-registre__table th, .outil-registre__table td { display: block; width: auto; }
  .outil-registre__table tr { padding-block: var(--space-lg); border-bottom: 1px solid var(--color-rule-soft); }
  .outil-registre__table tbody th, .outil-registre__table td { padding: 0; border: 0; }
  .outil-registre__table td { margin-top: var(--space-xs); font-size: var(--text-sm); }
  .outil-source--table thead { display: none; }
  .outil-source--table tr, .outil-source--table td { display: block; }
  .outil-source--table td { padding: 0; border: 0; }
  .outil-source--table tr { padding-block: var(--space-sm); border-bottom: 1px solid var(--color-rule-soft); }
}
@media (prefers-reduced-motion: reduce) {
  .outil-credit__arc--plein, .outil-irl__barre, .outil-depot__jauge i, .outil-cal__j--fin, .outil-preavis__liste { transition: none; }
}