/* ==========================================================================
   Parcelle Info — feuille de style « la planche d'arpenteur »
   Charte du 02/09/2026 (docs/charte/). Un principe la tient : la trame encode
   la maille de mesure, la couleur ne sert qu'à situer sur un plan.
   Aucune dépendance externe : polices servies depuis /static/fonts/.
   ========================================================================== */

@font-face{font-family:Spectral;src:url("/static/fonts/spectral-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Spectral;src:url("/static/fonts/spectral-latin-400-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:Spectral;src:url("/static/fonts/spectral-latin-600-normal.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:Archivo;src:url("/static/fonts/archivo-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Archivo;src:url("/static/fonts/archivo-latin-500-normal.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Archivo;src:url("/static/fonts/archivo-latin-600-normal.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("/static/fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("/static/fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}

/* ------------------------------------------------------------------ tokens */
:root {
  --papier: #EFE9DD;
  --surface: #F6F2EA;
  --surface-haute: #FBF8F2;
  --encre: #1A1714;
  --mine: #5F584C;
  --trait: #C4BAA6;
  --trait-fin: #DCD4C4;
  --carmin: #94372A;
  --carmin-voile: rgba(148, 55, 42, .12);
  --trame-ligne: #1A1714;
  --trame-absent: #BCB2A0;
  --grille-page: rgba(26, 23, 20, .035);
  --ombre: rgba(0, 0, 0, .18);

  --serif: Spectral, Georgia, "Times New Roman", serif;
  --sans: Archivo, "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* échelle — plancher de lisibilité : 0,78 rem, soit 12,5 px */
  --t-source: .78rem;
  --t-lib: .86rem;
  --t-note: .92rem;
  --t-corps: 1rem;
  --t-val-petit: 1.05rem;
  --t-val-mot: 1.2rem;
  --t-val: 1.55rem;

  --page: 76rem;
  /* mesures de lecture des notes en serif : un texte suivi ne se lit plus au-delà */
  --mesure: 74ch;
  --mesure-large: 82ch;
  /* largeur du cadre d'un formulaire partenaire : celle de leur formulaire, pas la nôtre */
  --cadre-partenaire: 54rem;

  /* Alias du vocabulaire antérieur : les gabarits qui n'ont pas été réécrits
     continuent de fonctionner, dans la nouvelle palette. */
  --paper: var(--papier); --card: var(--surface); --ink: var(--encre);
  --muted: var(--mine); --dim: var(--mine);
  --line: var(--trait); --line-soft: var(--trait-fin); --fond: var(--papier);
  --accent: var(--carmin); --accent-ink: var(--carmin); --accent-soft: var(--carmin-voile);
  --warn: var(--mine); --warn-soft: var(--surface-haute); --warn-line: var(--trait);
  --good: var(--encre); --good-soft: var(--surface-haute); --good-line: var(--trait);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --papier: #15130F; --surface: #1E1B15; --surface-haute: #26221B;
    --encre: #EBE4D6; --mine: #A29888; --trait: #3B362C; --trait-fin: #2B2721;
    --carmin: #E08370; --carmin-voile: rgba(224, 131, 112, .18);
    --trame-ligne: #C9C0AE; --trame-absent: #4A4438;
    --grille-page: rgba(235, 228, 214, .035); --ombre: rgba(255, 255, 255, .16);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --papier: #15130F; --surface: #1E1B15; --surface-haute: #26221B;
  --encre: #EBE4D6; --mine: #A29888; --trait: #3B362C; --trait-fin: #2B2721;
  --carmin: #E08370; --carmin-voile: rgba(224, 131, 112, .18);
  --trame-ligne: #C9C0AE; --trame-absent: #4A4438;
  --grille-page: rgba(235, 228, 214, .035); --ombre: rgba(255, 255, 255, .16);
  color-scheme: dark;
}

/* ------------------------------------------------------------------- socle */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 4.5rem; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; padding: 0 1.25rem 5rem;
  background-color: var(--papier);
  /* La grille de plan vit sur le papier de page, jamais sous un chiffre. */
  background-image:
    linear-gradient(to right, var(--grille-page) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grille-page) 1px, transparent 1px);
  background-size: 28px 28px;
  color: var(--encre);
  font: var(--t-corps)/1.55 var(--sans);
  font-variant-numeric: tabular-nums;
}
body.wide { --page: 76rem; }
main { max-width: var(--page); margin: 0 auto; padding-top: 1.6rem; }
a { color: var(--carmin); text-underline-offset: .16em; text-decoration-thickness: 1px; }
:focus-visible { outline: 2px solid var(--carmin); outline-offset: 2px; }
code { font: .86em var(--mono); background: var(--trait-fin); padding: .1em .35em; }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; letter-spacing: -.01em; text-wrap: balance; }
h1 { font-size: clamp(1.9rem, 4.2vw, 2.8rem); line-height: 1.08; margin: 0 0 .5rem; font-weight: 400; }
h2 { font-size: 1.45rem; margin: 0; }
.dim { color: var(--mine); }

/* ------------------------------------------------------------- les trames */
.tr {
  display: inline-block; width: 14px; height: 14px; border: 1px solid var(--trame-ligne);
  flex: 0 0 auto; vertical-align: -2px; margin-right: .5rem;
}
.tr--ici { background: var(--trame-ligne); }
.tr--proche { background-color: var(--surface); background-image: radial-gradient(var(--trame-ligne) .9px, transparent 1px); background-size: 4px 4px; }
.tr--commune { background-color: var(--surface); background-image: repeating-linear-gradient(45deg, var(--trame-ligne) 0 1.2px, transparent 1.2px 5px); }
.tr--calc { background-color: var(--surface); background-image: repeating-linear-gradient(45deg, var(--trame-ligne) 0 .9px, transparent .9px 5px), repeating-linear-gradient(-45deg, var(--trame-ligne) 0 .9px, transparent .9px 5px); }
.tr--absent { background-color: var(--surface); border-color: var(--trame-absent); background-image: repeating-linear-gradient(45deg, var(--trame-absent) 0 1px, transparent 1px 6px); }

/* filet de maille en bord gauche d'une cellule ou d'une tuile */
.m-ici, .m-proche, .m-commune, .m-calc, .m-absent { position: relative; }
.m-ici::before, .m-proche::before, .m-commune::before, .m-calc::before, .m-absent::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
}
.m-ici::before { background: var(--trame-ligne); }
.m-proche::before { background-color: var(--surface); background-image: radial-gradient(var(--trame-ligne) .85px, transparent .95px); background-size: 4px 4px; }
.m-commune::before { background-color: var(--surface); background-image: repeating-linear-gradient(45deg, var(--trame-ligne) 0 1.1px, transparent 1.1px 5px); }
.m-calc::before { background-color: var(--surface); background-image: repeating-linear-gradient(45deg, var(--trame-ligne) 0 .85px, transparent .85px 5px), repeating-linear-gradient(-45deg, var(--trame-ligne) 0 .85px, transparent .85px 5px); }
.m-absent::before { background-color: var(--surface); background-image: repeating-linear-gradient(45deg, var(--trame-absent) 0 1px, transparent 1px 6px); }

/* ---------------------------------------------------- bandeau et navigation */
.construction {
  background: var(--surface-haute); color: var(--mine); border-bottom: 1px solid var(--trait);
  padding: .6rem 1.1rem; font-size: .84rem; text-align: center;
}
nav.site {
  max-width: var(--page); margin: 0 auto; padding: .7rem 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1.1rem;
  border-bottom: 1px solid var(--encre);
}
nav.site .brand {
  display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; color: var(--encre);
  font-family: var(--serif); font-weight: 600; font-size: 1.06rem; letter-spacing: -.012em;
  min-height: 44px;
}
nav.site .brand svg { display: block; width: 1.5em; height: 1.5em; flex: 0 0 auto; }
nav.site .brand span { color: var(--mine); font-weight: 400; }
nav.site a { font-size: .88rem; color: var(--mine); text-decoration: none;
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 .1rem; }
nav.site a:hover { color: var(--encre); text-decoration: underline; }
nav.site .spacer { flex: 1; }
.marque-svg .contour { fill: none; stroke: var(--carmin); stroke-width: 1.7; stroke-linejoin: round; }
.marque-svg .point { fill: var(--carmin); }

.theme { display: inline-flex; border: 1px solid var(--trait); background: var(--surface); }
.theme button {
  font: 500 .78rem/1.4 var(--sans); color: var(--mine); background: none; border: none;
  padding: .45rem .65rem; min-height: 32px; cursor: pointer;
}
.theme button:hover { color: var(--encre); }
.theme button[aria-pressed="true"] { background: var(--encre); color: var(--papier); }

/* ---------------------------------------------------------- en-tête de page */
header.page { margin-bottom: 1.8rem; }
.eyebrow { font: 400 var(--t-source)/1.4 var(--mono); color: var(--mine); margin: 0 0 .5rem; }
.sub { color: var(--mine); font-size: .96rem; margin: 0; }
.sub code { font-size: .86rem; }

/* ------------------------------------------------- synthèse et tuiles */
.summary { margin-bottom: 1.8rem; padding-top: .6rem; border-top: 1.5px solid var(--encre); }
.summary-title { font-size: 1.05rem; margin: 0 0 1rem; }
.figures {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(9.5rem, 100%), 1fr));
  gap: 1px; background: var(--trait-fin); border: 1px solid var(--trait-fin);
}
.figure {
  display: block; text-decoration: none; color: var(--encre);
  background: var(--surface); padding: .8rem .9rem .85rem 1.1rem; position: relative;
}
.figure:hover { background: var(--surface-haute); }
.figure-label { display: block; font-size: var(--t-lib); color: var(--mine); margin-bottom: .3rem; }
.figure-value { display: block; font-size: 1.18rem; font-weight: 600; line-height: 1.2; letter-spacing: -.015em; }
.figure-value.small { font-size: .98rem; line-height: 1.35; }
.figure-scope { display: block; font: var(--t-source) var(--mono); color: var(--mine); margin-top: .25rem; }
.figure-reason { display: block; font-size: var(--t-source); margin-top: .25rem; color: var(--mine); }
.figure.warn .figure-reason, .figure.good .figure-reason { color: var(--encre); }
/* La tonalité d'une tuile n'est plus une couleur : la raison est écrite. */
.figure.warn, .figure.good { background: var(--surface); }

.todo-list { margin-top: 1.8rem; border-left: 3px solid var(--encre); padding-left: 1.1rem; }
.todo-list h3 { font-size: .98rem; margin: 0 0 .5rem; }
.todo-item { padding: .55rem 0; border-top: 1px solid var(--trait-fin); }
.todo-item a { color: var(--encre); font-weight: 500; text-decoration-color: var(--trait); }
.todo-item p { margin: .2rem 0 0; font-family: var(--serif); font-size: var(--t-note); color: var(--mine); line-height: 1.6; max-width: var(--mesure); }
.nothing { margin: 1.2rem 0 0; font-family: var(--serif); font-size: var(--t-note); color: var(--mine); }
.coverage { margin: 1rem 0 0; font: var(--t-source)/1.5 var(--mono); color: var(--mine); }
.identity { margin: 1rem 0 0; font-size: .88rem; color: var(--mine); }

.notice { border: 1px solid var(--trait); background: var(--surface); padding: .9rem 1.1rem; margin-bottom: 1.6rem; }
.notice h3 { margin: 0 0 .4rem; font-size: .95rem; }
.notice ul { margin: 0; padding-left: 1.1rem; font-size: .88rem; color: var(--mine); }

/* Légende des trames, une fois par fiche. */
.legende-trames { margin: 1.6rem 0 0; }
.legende-trames h2 { font-size: 1.05rem; margin: 0 0 .7rem; padding-top: .6rem; border-top: 1.5px solid var(--encre); }
.legende-trames p { margin: 0 0 .9rem; font-family: var(--serif); font-size: var(--t-note); color: var(--mine); max-width: var(--mesure); line-height: 1.6; }
.leg { display: grid; gap: .6rem 2rem; grid-template-columns: 1fr; list-style: none; padding: 0; margin: 0; }
@media (min-width: 46rem) { .leg { grid-template-columns: 1fr 1fr; } }
.leg li { display: grid; grid-template-columns: 14px 1fr; gap: .7rem; align-items: start; font-size: .86rem; color: var(--mine); line-height: 1.5; }
.leg li .tr { margin: .2rem 0 0; }
.leg li b { color: var(--encre); font-weight: 500; }

/* ---------------------------------------------------- plan de la parcelle */
.plan { margin-bottom: 1.6rem; }
.plan h2 { font-size: 1.05rem; margin: 0 0 .7rem; }
.plan-svg {
  display: block; width: 100%; height: auto; max-height: 26rem;
  background: var(--surface); border: 1px solid var(--trait); padding: .6rem;
}
.plan-svg path, .plan-svg line, .plan-svg circle { vector-effect: non-scaling-stroke; }
.plan-parcel { fill: var(--carmin-voile); stroke: var(--carmin); stroke-width: 1.8px; }
.plan-building { fill: var(--carmin); fill-opacity: .85; stroke: var(--carmin); stroke-width: 1px; }
.plan-building.straddle { fill-opacity: .25; stroke-dasharray: 4 3; }
.plan-pin { fill: var(--encre); stroke: var(--surface); stroke-width: 1.5px; }
.plan-scale line { stroke: var(--mine); stroke-width: 2px; }
.plan-scale text { fill: var(--mine); font-family: var(--mono); }
.plan-note { margin: .5rem 0 0; font-family: var(--serif); font-size: var(--t-note); color: var(--mine); max-width: var(--mesure); line-height: 1.6; }
.message { color: var(--mine); font-size: .92rem; margin: .7rem 0 0; }
.hint { margin: .25rem 0 0; font-size: var(--t-lib); color: var(--mine); }
.prov { margin: .25rem 0 0; font: var(--t-source)/1.5 var(--mono); color: var(--mine); }
.prov .badge { display: inline-block; padding: .05rem .4rem; margin-right: .35rem; border: 1px solid var(--trait); font-weight: 500; }

/* ------------------------------------------------------------- liens */
.links { margin-bottom: 1.6rem; }
.links h2 { font-size: 1.05rem; margin: 0 0 .2rem; }
.links-intro { margin: 0 0 .7rem; font-size: .88rem; color: var(--mine); }
.links ul {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  gap: 1px; background: var(--trait-fin); border: 1px solid var(--trait-fin);
}
.links li { background: var(--surface); padding: .7rem .9rem; position: relative; }
.links li:hover { background: var(--surface-haute); }
.links li a { font-weight: 500; font-size: .94rem; text-decoration: none; color: var(--encre); }
.links li a::after { content: ""; position: absolute; inset: 0; }
.links li span { display: block; font-size: var(--t-lib); color: var(--mine); margin-top: .15rem; }
.links.analyses ul { grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr)); }
.links.analyses li { border-left: 3px solid var(--carmin); }
.links.analyses li a { font-family: var(--serif); font-size: 1.05rem; }
.links.analyses .chiffre { margin-top: .35rem; color: var(--encre); font-size: .84rem; }
.links.analyses .chiffre strong { font-size: 1.05rem; margin-right: .2rem; }

.degrade { max-width: var(--page); margin: 0 auto 1.4rem; padding: .8rem 1rem; border: 1px solid var(--trait); border-left: 4px solid var(--encre); background: var(--surface); }
.degrade p { margin: 0; font-size: .9rem; }

/* ----------------------------------------------- analyses : figures et texte */
.carte .zone.d1 { fill: #cfe3ee; stroke: #7fa8bd; }
.carte .zone.d2 { fill: #d8e3d2; stroke: #8aa682; }
.carte .zone.d3 { fill: #efd9b8; stroke: #bd9a63; }
.carte .zone.d4 { fill: #e0b79c; stroke: #ab6f48; }
.carte .zone.d1 ~ .etiquette, .carte .zone.d2 ~ .etiquette,
.carte .zone.d3 ~ .etiquette, .carte .zone.d4 ~ .etiquette { fill: #23201c; stroke: #f7f4ef; }
.pastille { display: inline-block; width: .85rem; height: .85rem; margin-right: .35rem; vertical-align: -.1rem; border: 1px solid var(--trait); }
.pastille.d1 { background: #cfe3ee; }
.pastille.d2 { background: #d8e3d2; }
.pastille.d3 { background: #efd9b8; }
.pastille.d4 { background: #e0b79c; }
.legende { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; font-size: .85rem; margin: .6rem 0 0; color: var(--mine); }
.legende .cle { white-space: nowrap; }
.barres { margin: 1rem 0 1.4rem; display: grid; gap: .5rem; }
.barre { display: grid; grid-template-columns: 10rem 1fr 3.5rem; gap: .6rem; align-items: center; font-size: .9rem; }
.barre-nom { text-align: right; color: var(--mine); }
.barre-piste { background: var(--trait-fin); height: 1.2rem; }
.barre-part { display: block; height: 100%; }
.barre-part.d1 { background: #cfe3ee; }
.barre-part.d2 { background: #d8e3d2; }
.barre-part.d3 { background: #efd9b8; }
.barre-part.d4 { background: #e0b79c; }
.barre-val { font-weight: 600; }
.barre-detail { grid-column: 2; font: var(--t-source) var(--mono); color: var(--mine); margin-top: -.35rem; }
@media (max-width: 40rem) { .barre { grid-template-columns: 7rem 1fr 3rem; font-size: .82rem; } }

.analyse { --colonne: var(--page); }
.analyse > * { max-width: var(--colonne); margin-left: auto; margin-right: auto; }
.analyse > .barres, .analyse > .deux-colonnes, .analyse > .tableau, .analyse > .summary,
.analyse > figcaption, .analyse > .hint, .analyse > .disclaimer { margin-left: auto; margin-right: auto; }
.analyse p, .analyse li { font-family: var(--serif); font-size: 1.05rem; line-height: 1.7; }
.analyse p { margin: 0 auto 1.15rem; }
.analyse h2 { font-size: 1.45rem; margin: 2.8rem auto .7rem; padding-top: .5rem; border-top: 1px solid var(--encre); }
.analyse h2:first-of-type { border-top: 0; }
.analyse h3 { font-size: 1.1rem; margin: 1.9rem auto .45rem; }
.analyse ul, .analyse ol { margin: 0 auto 1.2rem; padding-left: 1.3rem; }
.analyse li { margin-bottom: .45rem; }
.analyse .chapeau { font-size: 1.16rem; line-height: 1.6; color: var(--encre); }
.analyse .saillant { font-size: 1.22rem; line-height: 1.45; border-left: 3px solid var(--encre); padding: .2rem 0 .2rem 1.1rem; margin: 1.9rem auto; color: var(--encre); }
.analyse figure { margin: 1.8rem auto 2.2rem; }
.analyse figcaption { font-family: var(--serif); font-size: .88rem; color: var(--mine); margin: .7rem auto 0; max-width: var(--colonne); }
.tableau {
  overflow-x: auto;
  background:
    linear-gradient(to right, var(--fond) 30%, transparent) left center / 2rem 100% no-repeat local,
    linear-gradient(to left, var(--fond) 30%, transparent) right center / 2rem 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, var(--ombre), transparent) left center / .7rem 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, var(--ombre), transparent) right center / .7rem 100% no-repeat scroll;
}
.tableau > table { min-width: 30rem; }
.tableau td.num, .tableau th.num { white-space: nowrap; }
.analyse .tableau { overflow-x: auto; }
.analyse table { border-collapse: collapse; width: 100%; font-size: .92rem; font-family: var(--sans); }
.analyse th, .analyse td { border-bottom: 1px solid var(--trait-fin); padding: .5rem .6rem; text-align: left; }
.analyse th { font: 500 var(--t-source)/1.4 var(--mono); color: var(--mine); }
.analyse td.num, .analyse th.num { text-align: right; }
.analyse .dim { color: var(--mine); font-size: .86rem; }
.analyse .hint { max-width: var(--colonne); font-size: .9rem; }
.analyse .disclaimer { font-size: .92rem; color: var(--mine); }
.colonnes { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; align-items: end; gap: .25rem; height: 12rem; margin: 1.2rem 0 .4rem; }
.colonne { display: flex; flex-direction: column; justify-content: flex-end; height: 100%; }
.colonne-barre { min-height: 2px; }
.colonne-barre.d1 { background: #cfe3ee; }
.colonne-barre.d2 { background: #d8e3d2; }
.colonne-barre.d3 { background: #efd9b8; }
.colonne-barre.d4 { background: #e0b79c; }
.colonnes-axe { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: .25rem; font: var(--t-source) var(--mono); color: var(--mine); text-align: center; }
@media (max-width: 44rem) { .colonnes { height: 9rem; } }
.palmares { margin: .4rem 0 0; padding-left: 1.4rem; }
.palmares li { margin-bottom: .3rem; }
.palmares .dim { color: var(--mine); font-size: .84rem; }
.deux-colonnes { display: grid; gap: 1.2rem 2rem; }
@media (min-width: 48rem) { .deux-colonnes { grid-template-columns: 1fr 1fr; } }
article.legal .dim { color: var(--mine); font-size: .86rem; }

/* ------------------------------------------------------------ retour en haut */
.haut-de-page {
  position: fixed; z-index: 20;
  right: calc(1rem + env(safe-area-inset-right, 0px));
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  width: 44px; height: 44px; font: 600 1.1rem/1 var(--sans); cursor: pointer;
  color: var(--encre); background: var(--surface); border: 1px solid var(--encre);
}
.haut-de-page[hidden] { display: none; }
@media (hover: hover) { .haut-de-page:hover { background: var(--encre); color: var(--papier); } }

/* ----------------------------------------------------------------- sommaire */
.sommaire {
  position: sticky; top: 0; z-index: 20; margin: 0 0 1.2rem;
  background: var(--papier); border-top: 1.5px solid var(--encre); border-bottom: 1px solid var(--encre);
}
.sommaire h2 { font: 500 var(--t-source)/1.4 var(--mono); color: var(--mine); margin: 0; padding: .55rem 0 0; }
.sommaire ul { list-style: none; padding: .35rem 0 .55rem; margin: 0; display: flex; flex-wrap: wrap; gap: .1rem .95rem; font-size: .86rem; }
.sommaire a { display: inline-flex; align-items: center; min-height: 32px; color: var(--mine); text-decoration: none; }
.sommaire a:hover { color: var(--encre); text-decoration: underline; }
.sommaire a.vide { opacity: .5; }

/* ---------------------------------------------------------------- rubriques */
.blocks { display: block; }
section.block { padding-top: 2.4rem; scroll-margin-top: 4.5rem; }
.block-head { display: flex; align-items: baseline; justify-content: space-between; gap: .9rem; flex-wrap: wrap;
  border-bottom: 1px solid var(--encre); padding-bottom: .5rem; margin-bottom: 1.2rem; }
.pill { font: 400 var(--t-source)/1.4 var(--mono); white-space: nowrap; padding: .12rem .5rem; border: 1px solid var(--trait); color: var(--mine); }
.pill.error, .pill.timeout { border-color: var(--encre); color: var(--encre); }

.scope { margin: 1.2rem 0 .7rem; font-size: .88rem; color: var(--mine); display: flex; align-items: baseline; flex-wrap: wrap; gap: .3rem .6rem; }
.scope.group:first-of-type { margin-top: .2rem; }
.scope-detail { font: var(--t-source) var(--mono); color: var(--mine); }
.scope.page { margin: 1rem 0 0; font-size: .86rem; display: block; }
.block-head + .prov { margin-top: .45rem; }

/* La grille de faits : une à quatre colonnes, jamais plus. */
dl, .grille {
  margin: .6rem 0 0; display: grid; grid-template-columns: 1fr; gap: 1px;
  background: var(--trait-fin); border: 1px solid var(--trait-fin);
}
@media (min-width: 30rem) { dl, .grille { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 50rem) { dl, .grille { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 66rem) { dl, .grille { grid-template-columns: repeat(4, 1fr); } }
.row, .cell { background: var(--surface); padding: .85rem 1rem .9rem 1.2rem; position: relative; min-width: 0; margin: 0; }
.row.wide, .cell--wide { grid-column: 1 / -1; }
dt { font-size: var(--t-lib); color: var(--mine); line-height: 1.35; }
dd { margin: .4rem 0 0; font-size: var(--t-val); font-weight: 600; line-height: 1.1; letter-spacing: -.02em; overflow-wrap: break-word; }
dd.mot { font-size: var(--t-val-mot); }
dd.petit { font-size: var(--t-val-petit); font-weight: 500; letter-spacing: 0; line-height: 1.35; }
dd .hint, dd .prov { display: block; font-weight: 400; letter-spacing: 0; line-height: 1.5; }
dd .hint { margin-top: .45rem; font-family: var(--serif); font-size: var(--t-note); color: var(--mine); border-left: 1px solid var(--trait); padding-left: .65rem; }
dd .prov { margin-top: .4rem; font: var(--t-source)/1.5 var(--mono); color: var(--mine); }
dd a { color: var(--carmin); font-size: var(--t-val-mot); }
dd ul.liste { margin: .1rem 0 0; padding: 0; list-style: none; display: grid; gap: .25rem; }
dd ul.liste li { font-size: .98rem; font-weight: 500; letter-spacing: 0; padding-left: .9rem; position: relative; line-height: 1.4; }
dd ul.liste li::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 1px; background: var(--encre); }
ul.warnings { margin: 1rem 0 0; padding-left: 1.1rem; font-family: var(--serif); font-size: var(--t-note); color: var(--mine); }
.vide-fait { background: var(--surface); border: 1px solid var(--trait-fin); padding: 1rem 1.15rem 1rem 1.3rem; position: relative; margin-top: .6rem; }
.vide-fait p { margin: 0; font-family: var(--serif); color: var(--mine); }

/* ------------------------------------------------- constats et suggestions */
.signal { border: 1px solid var(--encre); padding: 1.05rem 1.2rem; margin: 1.6rem 0 0; background: var(--surface); }
.signal-label { margin: 0; font-family: var(--serif); font-size: 1.06rem; font-weight: 600; }
.signal-explain { margin: .45rem 0 0; font-family: var(--serif); font-size: var(--t-note); color: var(--mine); line-height: 1.6; max-width: var(--mesure); }
details.evidence { margin-top: .75rem; font-size: var(--t-source); color: var(--mine); }
details.evidence summary { cursor: pointer; display: flex; align-items: center; min-height: 32px; }
details.evidence ul { margin: .35rem 0 0; padding-left: 1.15rem; font-family: var(--mono); line-height: 1.7; }

/* La zone commerciale d'un thème : cernée de carmin, jamais fondue dans la donnée. */
.offer { border: 1px solid var(--carmin); margin: 1.2rem 0 0; background: var(--surface); }
.offer-haut { padding: 1.05rem 1.2rem; }
.offre__eti { margin: 0 0 .5rem; font: 400 var(--t-source)/1.4 var(--mono); color: var(--carmin); }
.offer-cta { margin: 0; font-family: var(--serif); font-size: 1.08rem; font-weight: 600; }
.offer-partners { margin: .3rem 0 0; font-size: .88rem; color: var(--mine); }
.offer-notice, .offer-disclosure { margin: .5rem 0 0; font-size: var(--t-source); color: var(--mine); line-height: 1.6; max-width: var(--mesure-large); }
.offer-disclosure a { color: var(--carmin); }
details.offer-embed { border-top: 1px solid var(--carmin); background: var(--papier); }
details.offer-embed summary {
  display: inline-flex; align-items: center; min-height: 44px; margin: 1rem 1.2rem;
  padding: .55rem 1.15rem; border: 1px solid var(--carmin); background: var(--carmin); color: var(--papier);
  font: 500 .92rem/1.3 var(--sans); cursor: pointer; list-style: none;
}
details.offer-embed summary::-webkit-details-marker { display: none; }
details.offer-embed[open] summary { background: transparent; color: var(--carmin); }
/* Le cadre est dimensionné sur le formulaire ViteUnDevis mesuré le 03/09/2026 :
   750 px de large, 660 px de haut à la première étape, 1 050 px à l'étape des
   coordonnées, la plus haute. Leur code d'intégration suggère 1 500 px, soit
   un tiers de blanc ; leur page n'envoie pas sa hauteur, on ne peut pas mieux. */
details.offer-embed iframe {
  display: block; width: 100%; max-width: var(--cadre-partenaire); height: 1080px; margin: 0 auto;
  border: 1px solid var(--trait); border-bottom: 0; background: #fff;
}
.offer-embed-note { margin: .8rem 1.2rem 1rem; font-size: var(--t-source); color: var(--mine); line-height: 1.6; max-width: var(--mesure-large); }

.block-foot { margin-top: 1.4rem; padding-top: .75rem; border-top: 1px solid var(--trait-fin); }
.sources { margin: 0; font: var(--t-source)/1.6 var(--mono); color: var(--mine); }
.sources a { color: inherit; }
details.extra { margin-top: .6rem; font-size: var(--t-lib); color: var(--mine); }
details.extra summary { cursor: pointer; display: flex; align-items: center; min-height: 32px; }
details.extra table { border-collapse: collapse; margin-top: .4rem; }
details.extra td { padding: .15rem .7rem .15rem 0; vertical-align: top; font: var(--t-source) var(--mono); }
p.disclaimer { margin: .5rem 0 0; font-family: var(--serif); font-size: var(--t-note); color: var(--mine); line-height: 1.6; max-width: var(--mesure-large); }
ul.commune-list { list-style: none; padding: 0; margin: .8rem 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr)); gap: .35rem .9rem; }
ul.commune-list li { font-size: .92rem; }
ul.commune-list .dim { font-size: var(--t-source); margin-left: .35rem; }

/* ---------------------------------------------------------- tableau de bord */
.gauge { height: .5rem; background: var(--trait-fin); overflow: hidden; margin: .6rem 0 .3rem; }
.gauge span { display: block; height: 100%; background: var(--encre); }
table.health { width: 100%; border-collapse: collapse; margin-top: 1rem; }
table.health th { text-align: left; font: 500 var(--t-source)/1.4 var(--mono); color: var(--mine); padding: 0 .6rem .35rem 0; }
table.health td { padding: .45rem .6rem .45rem 0; font-size: .88rem; vertical-align: top; border-top: 1px solid var(--trait-fin); }
table.health td .hint { display: block; font-size: var(--t-source); margin: .15rem 0 0; }
table.admin { width: 100%; border-collapse: collapse; margin-top: .6rem; }
table.admin th { text-align: left; font: 500 var(--t-source)/1.4 var(--mono); color: var(--mine); padding: .3rem .5rem .3rem 0; }
table.admin td { padding: .28rem .5rem .28rem 0; font-size: .88rem; vertical-align: middle; border-top: 1px solid var(--trait-fin); }
table.admin td.key { white-space: nowrap; max-width: 16rem; overflow: hidden; text-overflow: ellipsis; }
table.admin td.bar { width: 55%; }
table.admin td.bar span { display: block; height: .55rem; background: var(--trait-fin); border-right: 3px solid var(--encre); min-width: 3px; }
table.admin td.num, table.admin th.num { text-align: right; color: var(--mine); }
.chart-title { margin: 1.2rem 0 .3rem; font: var(--t-source) var(--mono); color: var(--mine); }
svg.spark { display: block; width: 100%; height: 4.5rem; }
svg.spark polyline { fill: none; stroke: var(--encre); stroke-width: 1.4px; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.chart-scale { display: flex; justify-content: space-between; margin: .2rem 0 0; font: var(--t-source) var(--mono); color: var(--mine); }

/* ----------------------------------------------------- cartes de navigation */
.carte { width: 100%; height: 100%; display: block; }
.carte-cadre { height: min(78vh, 52rem); display: flex; flex-direction: column; }
.carte-cadre .carte { flex: 1 1 auto; min-height: 0; }
.carte-cadre .hint { flex: 0 0 auto; margin-top: .5rem; }
@media (max-width: 62rem) { .carte-cadre { height: min(62vh, 34rem); } }
.deplacable { cursor: grab; touch-action: none; }
.deplacable.saisie { cursor: grabbing; }
.deplacable.au-cadre { cursor: default; touch-action: pan-y; }
.carte-outils { display: flex; gap: .4rem; justify-content: flex-end; margin-top: .4rem; }
.carte-outils button[disabled] { opacity: .45; cursor: default; }
.carte-outils button {
  font: inherit; font-size: .9rem; line-height: 1; padding: .6rem .8rem; min-width: 44px; min-height: 44px;
  background: var(--surface); color: var(--encre); border: 1px solid var(--trait); cursor: pointer;
}
.carte-outils button:hover { background: var(--surface-haute); border-color: var(--encre); }
.carte .zone { fill: var(--surface-haute); stroke: var(--trait); stroke-width: .7; stroke-linejoin: round; transition: fill .12s ease; }
.carte a .zone { cursor: pointer; }
.carte a:focus { outline: none; }
.carte a:focus .zone { fill: var(--carmin); stroke: var(--carmin); stroke-width: 2.2; }
.carte .zone.focus { fill: var(--carmin); stroke: var(--carmin); stroke-width: 1.4; }
.carte .inset-label { font-size: 22px; fill: var(--mine); font-family: var(--sans); }
.carte .etiquette, .plan-svg .etiquette {
  font-family: var(--sans); fill: var(--encre); pointer-events: none;
  paint-order: stroke; stroke: var(--papier); stroke-width: 3px; stroke-linejoin: round;
}
.carte .etiquette.au-survol, .plan-svg .etiquette.au-survol { opacity: 0; transition: opacity .1s ease; }
.carte a:focus .etiquette.au-survol, .plan-svg a:focus .etiquette.au-survol { opacity: 1; }
.carte a:focus .etiquette { fill: var(--papier); stroke: none; }
@media (hover: hover) {
  .carte a:hover .zone { fill: var(--carmin); stroke: var(--carmin); }
  .carte a:hover .etiquette.au-survol, .plan-svg a:hover .etiquette.au-survol { opacity: 1; }
  .carte a:hover .etiquette { fill: var(--papier); stroke: none; }
  .plan-svg a:hover .plan-choice { fill: var(--carmin-voile); stroke: var(--carmin); }
}
.carte .zone.focus ~ .etiquette { fill: var(--papier); stroke: none; }
.avec-carte { display: grid; gap: 1.6rem; align-items: start; }
@media (min-width: 62rem) { .avec-carte { grid-template-columns: minmax(0, 48%) 1fr; } }
.avec-carte .carte-cadre { background: var(--surface); border: 1px solid var(--trait); padding: .8rem; }
.plan-choice { fill: var(--surface-haute); stroke: var(--trait); stroke-width: .6; cursor: pointer; }
.plan-svg a:focus .plan-choice { fill: var(--carmin-voile); stroke: var(--carmin); }
.plan-choice.current { fill: var(--carmin-voile); stroke: var(--carmin); stroke-width: 1.1; }
ul.choix-liste { list-style: none; padding: 0; margin: .8rem 0 0; display: flex; flex-wrap: wrap; gap: .4rem; font-size: .86rem; }
ul.choix-liste a { display: inline-flex; align-items: center; min-height: 32px; padding: 0 .6rem; border: 1px solid var(--trait); background: var(--surface); text-decoration: none; }
ul.choix-liste span { color: var(--mine); }
.voile { fill: var(--trait-fin); opacity: .55; pointer-events: none; animation: respire 1.4s ease-in-out infinite; }
@keyframes respire { 0%, 100% { opacity: .5 } 50% { opacity: .22 } }
@media (prefers-reduced-motion: reduce) { .voile { animation: none } }
.parcelles.trop-large ~ .trop-large-note { display: block; }
.trop-large-note { display: none; }

/* --------------------------------------------------------------- recherche */
form.search { display: flex; gap: .5rem; flex-wrap: wrap; margin: 1.4rem 0 .7rem; }
form.search input[type=search] {
  flex: 1 1 21rem; padding: .8rem .95rem; font-size: 1.02rem; font-family: var(--sans);
  color: var(--encre); background: var(--surface); border: 1px solid var(--encre);
}
form.search input[type=search]:focus { outline: 2px solid var(--carmin); outline-offset: 2px; }
form.search button {
  padding: .8rem 1.4rem; font-size: 1rem; font-weight: 500; cursor: pointer; font-family: var(--sans);
  color: var(--papier); background: var(--encre); border: 1px solid var(--encre);
}
form.search button:hover { background: var(--carmin); border-color: var(--carmin); }
.suggest-wrap { position: relative; flex: 1 1 21rem; display: flex; }
.suggest-wrap input[type=search] { flex: 1 1 auto; }
ul.suggest {
  position: absolute; top: calc(100% + .3rem); left: 0; right: 0; z-index: 30;
  list-style: none; margin: 0; padding: .25rem; max-height: 17rem; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--encre); box-shadow: 0 6px 20px rgba(0, 0, 0, .13);
}
ul.suggest li { padding: .5rem .6rem; cursor: pointer; font-size: .92rem; display: flex; align-items: baseline; justify-content: space-between; gap: .8rem; }
ul.suggest li.on, ul.suggest li:hover { background: var(--encre); color: var(--papier); }
.suggest-scope { font: var(--t-source) var(--mono); color: inherit; opacity: .75; white-space: nowrap; }

/* ----------------------------------------------------- chargement progressif */
.progress { margin-top: 1.5rem; }
.progress-title { font-size: 1.05rem; margin: 0 0 .8rem; }
ul.progress-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); gap: 1px; background: var(--trait-fin); border: 1px solid var(--trait-fin); }
ul.progress-list li { display: flex; align-items: baseline; gap: .55rem; padding: .6rem .8rem; background: var(--surface); font-size: .88rem; color: var(--mine); }
ul.progress-list li .mark { font-weight: 700; color: var(--mine); min-width: 1.1em; }
ul.progress-list li.done { color: var(--encre); }
ul.progress-list li.done .mark { color: var(--encre); }
ul.progress-list li .took { margin-left: auto; font: var(--t-source) var(--mono); color: var(--mine); }
.progress-note { margin: .9rem 0 0; font-size: var(--t-lib); color: var(--mine); }
.progress { opacity: 0; animation: appear 0s linear .35s forwards; }
@keyframes appear { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .progress { opacity: 1; animation: none; } }
.examples { font-size: .86rem; color: var(--mine); margin: 0; display: flex; flex-wrap: wrap; gap: .3rem .9rem; }
.examples a { overflow-wrap: anywhere; display: inline-block; padding: .35rem 0; }
ul.candidates { list-style: none; padding: 0; margin: 1rem 0 0; }
ul.candidates li { padding: .6rem 0; border-top: 1px solid var(--trait-fin); }
ul.candidates .score { font: var(--t-source) var(--mono); color: var(--mine); }

/* ------------------------------------------------------------ pages légales */
article.legal h2 { margin: 2rem 0 .5rem; font-size: 1.2rem; padding-top: .5rem; border-top: 1px solid var(--encre); }
article.legal h3 { margin: 1.3rem 0 .3rem; font-size: 1rem; }
article.legal p, article.legal li { font-family: var(--serif); font-size: 1rem; line-height: 1.65; }
article.legal .tableau { overflow-x: auto; margin-top: .7rem; }
article.legal table { border-collapse: collapse; width: 100%; font-size: .9rem; font-family: var(--sans); }
article.legal th, article.legal td { text-align: left; padding: .4rem .7rem .4rem 0; border-bottom: 1px solid var(--trait-fin); vertical-align: top; }
article.legal th { font: 500 var(--t-source)/1.4 var(--mono); color: var(--mine); }
pre.curl { background: var(--encre); color: var(--papier); padding: .8rem .95rem; overflow-x: auto; font-size: .8rem; margin: .6rem 0 0; }
pre.curl code { background: none; padding: 0; font-size: inherit; color: inherit; }
article.legal section { margin-bottom: 1.6rem; }
article.legal .hint { margin: .3rem 0 .5rem; font-size: .9rem; color: var(--mine); }
.todo { border: 1px solid var(--trait); border-left: 4px solid var(--encre); background: var(--surface); padding: .8rem 1rem; font-size: .9rem; }

/* ---------------------------------------------------------------- pied de page */
footer.site { max-width: var(--page); margin: 3rem auto 0; padding-top: 1.2rem; border-top: 1.5px solid var(--encre); font-size: .84rem; color: var(--mine); }
footer.site h3 { font: 500 var(--t-source)/1.4 var(--mono); color: var(--mine); margin: 1.6rem 0 .5rem; }
footer.site ul { padding-left: 1.1rem; margin: 0; }
footer.site li { margin-bottom: .3rem; }
footer.site nav { margin-bottom: .8rem; }
footer.site nav a { margin-right: .6rem; white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0 .25rem; }
footer.site p { font-family: var(--serif); line-height: 1.6; max-width: var(--mesure-large); }

/* --------------------------------------------------------------- réglages */
.summary, .notice, .links { max-width: 100%; }
@media (max-width: 34rem) {
  body { padding: 0 1rem 4rem; }
  .figure-label { min-height: 2.4em; }
  nav.site { gap: .3rem .8rem; }
  details.offer-embed iframe { height: 1300px; }
}
@media print {
  body { background: #fff; color: #000; padding: 0; }
  nav.site, .sommaire, .theme, .haut-de-page, details.offer-embed, .carte-outils { display: none !important; }
  section.block { break-inside: avoid; }
  a { color: inherit; text-decoration: none; }
}