/* Direction : le cadastre. Sur un plan d'arpentage, chaque catégorie de parcelle
   est lavée d'une teinte — le bâti en sanguine, l'eau en bleu-gris. La taxe
   foncière sur les propriétés BÂTIES est l'impôt sur les parcelles roses, et la
   GEMAPI est la taxe sur les milieux aquatiques : la palette n'est pas décorative,
   chaque couleur est celle de ce que l'argent finance.

   Et jamais le Bleu France (#000091) ni Marianne : le site n'est pas l'État et ne
   doit pas pouvoir être pris pour lui. */

@font-face {
  font-family: Spectral; font-style: normal; font-weight: 400; font-display: swap;
  src: url(spectral-400.woff2) format("woff2");
}
@font-face {
  font-family: Spectral; font-style: normal; font-weight: 600; font-display: swap;
  src: url(spectral-600.woff2) format("woff2");
}

:root {
  --encre:   #1b2a24;   /* l'encre vert-noir des géomètres, pas un noir neutre */
  --papier:  #ffffff;
  --verge:   #f2efe7;   /* teinte papier, réservée aux blocs « document »       */
  --trait:   #d8d3c6;
  --sourdine:#5d6660;

  --commune: #b8474a;   /* lavis du bâti      */
  --interco: #7a8b5a;   /* lavis végétation   */
  --syndicat:#9a9a6b;
  --tse:     #6f7d76;
  --gemapi:  #4a6d8c;   /* lavis eau          */
  --tasa:    #a86f5c;
  --teom:    #8a7a5c;   /* ocre               */

  --lien: #8a3338;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --encre: #ece8de; --papier: #141b18; --verge: #1c2521; --trait: #33403a;
    --sourdine: #9aa49e; --lien: #e2908f;
    --commune: #d2686a; --interco: #9aae74; --syndicat: #b6b585;
    --tse: #8b9a92; --gemapi: #6d94b5; --tasa: #c78d79; --teom: #ab9971;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font: 400 1.0625rem/1.62 Spectral, Georgia, "DejaVu Serif", serif;
  -webkit-text-size-adjust: 100%;
}

.dedans { max-width: 44rem; margin: 0 auto; padding: 0 1.25rem; }

/* ---- bandeau ---------------------------------------------------------- */
.bandeau { border-bottom: 1px solid var(--trait); padding: .9rem 0; margin-bottom: 2.5rem; }
.bandeau .dedans { display: flex; flex-wrap: wrap; gap: .35rem 1.5rem; align-items: baseline; }
.marque {
  font-weight: 600; font-size: 1rem; color: var(--encre); text-decoration: none;
  letter-spacing: -.012em;
}
.marque::before {
  content: ""; display: inline-block; width: .62rem; height: .62rem;
  margin-right: .5rem; background: var(--commune);
  /* la hachure du bâti, en miniature : la marque est une parcelle */
  background-image: repeating-linear-gradient(45deg,
    rgba(255,255,255,.55) 0 1px, transparent 1px 3px);
}
.avert {
  margin: 0; font: 400 .6875rem/1.4 system-ui, sans-serif;
  color: var(--sourdine); letter-spacing: .02em;
}

/* ---- texte ------------------------------------------------------------ */
h1 { font-weight: 600; font-size: clamp(1.85rem, 5.5vw, 2.6rem); line-height: 1.12;
     letter-spacing: -.022em; margin: 0 0 .7rem; }
h2 { font-weight: 600; font-size: 1.3rem; letter-spacing: -.012em; margin: 2.75rem 0 .6rem; }
p { margin: 0 0 1rem; }
.chapo { font-size: 1.16rem; color: var(--sourdine); margin-bottom: 2rem; }
.chapo strong { color: var(--encre); font-weight: 600; }
a { color: var(--lien); text-underline-offset: .16em; }

/* Marqueur structurel : la référence cadastrale, pas un « 01 / 02 / 03 ».
   Le code INSEE est la clé réelle de tout le jeu de données. */
.fil { font: 400 .75rem/1.5 system-ui, sans-serif; letter-spacing: .06em;
       text-transform: uppercase; color: var(--sourdine); margin-bottom: .9rem; }
.fil a { color: var(--sourdine); }
.ref { float: right; font-variant-numeric: tabular-nums; letter-spacing: .14em; }

/* ---- blocs « document » ----------------------------------------------- */
.encart {
  background: var(--verge); border: 1px solid var(--trait);
  padding: 1.5rem; margin: 0 0 1.5rem;
}
label { display: block; font: 600 .78rem/1.5 system-ui, sans-serif;
        letter-spacing: .05em; text-transform: uppercase; margin-bottom: .45rem; }
input {
  width: 100%; padding: .6rem .7rem; font: 400 1.15rem Spectral, Georgia, serif;
  font-variant-numeric: tabular-nums; color: var(--encre);
  background: var(--papier); border: 1px solid var(--trait); border-radius: 0;
}
input:focus-visible { outline: 2px solid var(--commune); outline-offset: 1px; }
.aide, .note { font: 400 .8125rem/1.55 system-ui, sans-serif; color: var(--sourdine); }
.aide { margin: .5rem 0 0; }
.note { margin: 1rem 0 0; }

/* ---- LE MILLEFEUILLE --------------------------------------------------- */
.pile { list-style: none; margin: 1.75rem 0 0; padding: 0; }
.strate { padding: .6rem 0; border-top: 1px solid var(--trait); }
.strate:first-child { border-top: 0; }

.barre {
  display: block; height: 1.25rem; width: var(--w);
  background-color: var(--tse);
  animation: deploie .5s cubic-bezier(.2,.7,.3,1) both;
}
/* Hachures : c'est ainsi que les plans d'arpentage distinguaient les catégories
   avant l'impression couleur. Motif ET couleur — donc lisible en niveaux de gris
   et pour un daltonien, ce qu'un aplat seul ne permet pas. */
.s-commune  .barre { background-color: var(--commune);
  background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.5) 0 2px, transparent 2px 5px); }
.s-interco  .barre { background-color: var(--interco);
  background-image: repeating-linear-gradient(-45deg, rgba(255,255,255,.5) 0 2px, transparent 2px 7px); }
.s-syndicat .barre { background-color: var(--syndicat);
  background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.55) 0 1px, transparent 1px 5px); }
.s-tse      .barre { background-color: var(--tse);
  background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.5) 0 1px, transparent 1px 4px); }
.s-gemapi   .barre { background-color: var(--gemapi);
  background-image: radial-gradient(circle at 2px 2px, rgba(255,255,255,.6) 1px, transparent 1.2px);
  background-size: 6px 6px; }
.s-tasa     .barre { background-color: var(--tasa);
  background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.45) 0 1px, transparent 1px 4px),
                    repeating-linear-gradient(-45deg, rgba(255,255,255,.45) 0 1px, transparent 1px 4px); }
.s-teom     .barre { background-color: var(--teom);
  background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.5) 0 3px, transparent 3px 9px); }

.strate .mt {
  display: inline-block; margin-top: .5rem; margin-right: .6rem;
  font-weight: 600; font-variant-numeric: tabular-nums; font-size: 1.1rem;
}
.strate .qui { font: 400 .875rem/1.5 system-ui, sans-serif; color: var(--sourdine); }
.strate .qui em { display: block; font-style: normal; font-size: .8125rem; opacity: .82; }

/* Un seul moment orchestré sur toute la page : les strates se déploient une
   fois, de haut en bas. Rien d'autre ne bouge. */
@keyframes deploie { from { width: 0; } to { width: var(--w); } }
.strate:nth-child(2) .barre { animation-delay: .07s; }
.strate:nth-child(3) .barre { animation-delay: .14s; }
.strate:nth-child(4) .barre { animation-delay: .21s; }
.strate:nth-child(5) .barre { animation-delay: .28s; }
.strate:nth-child(6) .barre { animation-delay: .35s; }
.strate:nth-child(7) .barre { animation-delay: .42s; }

@media (prefers-reduced-motion: reduce) {
  .barre { animation: none; }
}

/* ---- tableaux et listes ------------------------------------------------ */
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
caption { text-align: left; font: 600 .78rem/1.5 system-ui, sans-serif;
          letter-spacing: .05em; text-transform: uppercase;
          color: var(--sourdine); padding-bottom: .5rem; }
th, td { text-align: left; padding: .45rem .5rem; border-bottom: 1px solid var(--trait); }
.histo { max-width: 18rem; }
.histo th { font-weight: 400; color: var(--sourdine); width: 5rem; }
.classement thead th { font: 600 .78rem/1.5 system-ui, sans-serif;
                       letter-spacing: .05em; text-transform: uppercase; }
/* Le département sous le nom plutôt qu'en colonne : trois colonnes tiennent sur
   un téléphone, quatre non. */
.classement td span { display: block; color: var(--sourdine);
                      font: 400 .78rem/1.4 system-ui, sans-serif; }
.classement .ec { white-space: nowrap; font-weight: 600; }
.situe { margin-top: 1rem; }

.voisins, .deps, .res { list-style: none; margin: 0; padding: 0; }
.voisins li, .deps li { display: flex; justify-content: space-between; gap: 1rem;
                        padding: .4rem 0; border-bottom: 1px solid var(--trait); }
.voisins span, .deps span { color: var(--sourdine); font-variant-numeric: tabular-nums;
                            font-size: .9rem; }
.deps { columns: 2; column-gap: 2rem; }
.deps li { break-inside: avoid; }
.res { margin-top: .75rem; }
.res li { border-bottom: 1px solid var(--trait); }
.res a { display: flex; justify-content: space-between; gap: 1rem;
         padding: .5rem 0; text-decoration: none; color: var(--encre); }
.res a:hover { color: var(--lien); }
.res span { color: var(--sourdine); font: 400 .8125rem system-ui, sans-serif; }

/* ---- publicité --------------------------------------------------------- */
/* Toujours APRÈS le contenu (règle AdSense), et dans un encart papier pour se
   lire comme du matériel inséré plutôt que comme du mobilier de page. */
.pub { padding: .75rem; min-height: 0; }
.pub::before { content: "Publicité"; display: block;
  font: 400 .625rem/1.4 system-ui, sans-serif; letter-spacing: .1em;
  text-transform: uppercase; color: var(--sourdine); margin-bottom: .4rem; }

/* ---- pied de page ------------------------------------------------------
   Trois blocs plutôt que trois paragraphes empilés : qui édite, quoi lire,
   où écrire. Les intitulés reprennent le sans utilitaire déjà employé par
   les <label> et les <caption> ; le pied n'introduit aucun style neuf.
   Il porte aussi le maillage vers les guides depuis les 34 983 pages. */
footer {
  margin-top: 4.5rem; padding: 2.25rem 0 3rem; border-top: 1px solid var(--trait);
  font: 400 .8125rem/1.6 system-ui, sans-serif; color: var(--sourdine);
}
footer p { margin: 0 0 .5rem; }

.pied { display: grid; gap: 2rem 3rem; grid-template-columns: 1.7fr 1fr 1fr; }
.pied .ident { max-width: 24rem; }
/* `a.marque` et non `.marque` : `.pied a` ci-dessous a la même spécificité et
   passerait après, la marque virerait au gris comme les autres liens. */
.pied a.marque {
  font-size: .9375rem; display: inline-block; margin-bottom: .7rem;
  color: var(--encre);
}
.pied .indep { font-size: .75rem; }

.pied h3 {
  font: 600 .72rem/1.5 system-ui, sans-serif; letter-spacing: .09em;
  text-transform: uppercase; color: var(--encre); margin: .2rem 0 .8rem;
}
.pied ul { list-style: none; margin: 0; padding: 0; }
.pied li { margin-bottom: .42rem; }
.pied a { color: var(--sourdine); text-decoration: none; }
.pied a:hover { color: var(--lien); text-decoration: underline; }

/* La réserve sur le millésime est une information légale, pas une note de bas
   de page : elle se détache du reste par un filet. */
.millesime {
  margin: 2.25rem auto 0; padding-top: 1.15rem; border-top: 1px solid var(--trait);
  font-size: .78rem;
}

@media (max-width: 40rem) {
  .pied { grid-template-columns: 1fr; gap: 1.75rem; }
  .pied .ident { max-width: none; }
}

:focus-visible { outline: 2px solid var(--commune); outline-offset: 2px; }

@media (max-width: 32rem) {
  .deps { columns: 1; }
  .ref { float: none; display: block; margin-top: .2rem; }
  .encart { padding: 1.1rem; }
}