/*
 * Site public - direction A « Terre et mémoire » (D51), promue depuis
 * maquettes/direction-a/css/styles.css. Toutes les valeurs viennent de
 * tokens.css : aucune couleur ni taille en dur (CLAUDE.md par. 5).
 */

/* ---------- Socle ---------- */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        transition: none !important;
        animation: none !important;
    }
}

body {
    background: var(--couleur-papier);
    color: var(--couleur-encre);
    font-family: var(--police-texte);
    font-size: var(--texte-corps);
    line-height: var(--interlignage-texte);
    -webkit-font-smoothing: antialiased;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

h1,
h2,
h3,
h4 {
    font-family: var(--police-titre);
    font-weight: 600;
    line-height: var(--interlignage-titre);
    text-wrap: balance;
}

p,
ul,
ol {
    max-width: var(--largeur-texte);
}

a {
    color: var(--couleur-terre);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color var(--transition-douce);
}

a:hover {
    color: var(--couleur-terre-sombre);
    text-decoration-thickness: 2px;
}

/* Double anneau : le halo papier garantit la visibilite du focus
   sur les fonds sombres (verts) comme sur le papier. */
:focus-visible {
    outline: 3px solid var(--couleur-focus);
    outline-offset: 3px;
    box-shadow: 0 0 0 3px var(--couleur-papier);
    border-radius: var(--rayon-petit);
}

::selection {
    background: var(--couleur-or);
    color: var(--couleur-encre);
}

/* ---------- Utilitaires ---------- */

.contenu {
    max-width: var(--largeur-contenu);
    margin-inline: auto;
    padding-inline: var(--espace-5);
}

.lien-evitement {
    position: absolute;
    left: -999px;
    top: var(--espace-2);
    z-index: 100;
    background: var(--couleur-encre);
    color: var(--couleur-papier);
    padding: var(--espace-3) var(--espace-5);
    border-radius: var(--rayon-petit);
}

.lien-evitement:focus {
    left: var(--espace-2);
}

/* ---------- En-tete et navigation ---------- */

.entete {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--couleur-papier);
    border-bottom: var(--filet);
}

.entete__interieur {
    display: flex;
    align-items: center;
    gap: var(--espace-5);
    min-height: var(--hauteur-nav);
    flex-wrap: wrap;
    padding-block: var(--espace-2);
}

.marque {
    display: flex;
    align-items: center;
    gap: var(--espace-3);
    text-decoration: none;
    color: var(--couleur-encre);
    min-height: var(--cible-tactile);
}

.marque:hover {
    color: var(--couleur-vert);
}

.marque__logo {
    /* Taille du blason, sans rapport avec la cible tactile de 44 px : c’est le lien .marque qui la porte */
    width: 44px;
    height: 44px;
    flex: none;
}

.marque__nom {
    font-family: var(--police-titre);
    font-weight: 600;
    font-size: var(--texte-corps);
    line-height: 1.2;
}

.marque__sous-titre {
    display: block;
    font-family: var(--police-texte);
    font-weight: 400;
    font-size: var(--texte-petit);
    color: var(--couleur-encre-douce);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.nav-ancres {
    margin-left: auto;
    min-width: 0;
    max-width: 100%;
}

.nav-ancres ul {
    list-style: none;
    display: flex;
    gap: var(--espace-2);
    max-width: none;
    overflow-x: auto;
}

.nav-ancres a {
    display: inline-flex;
    align-items: center;
    min-height: var(--cible-tactile);
    padding: var(--espace-2) var(--espace-3);
    text-decoration: none;
    color: var(--couleur-encre);
    font-weight: 700;
    font-size: var(--texte-corps);
    border-radius: var(--rayon-petit);
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    transition: background var(--transition-douce), color var(--transition-douce);
}

.nav-ancres a:hover {
    background: var(--couleur-papier-doux);
    color: var(--couleur-terre);
    border-bottom-color: var(--couleur-ocre);
}

/* Le sommaire suit le defilement : l'ancre de la section visible est marquee */
.nav-ancres a[aria-current] {
    border-bottom-color: var(--couleur-terre);
    color: var(--couleur-terre);
}

/* Le bouton d'action garde son texte papier sur fond terre : sans cette
   regle, le marquage ci-dessus le rendrait terre sur terre, illisible. */
.nav-ancres .nav-ancres__action[aria-current] {
    color: var(--couleur-papier);
    background: var(--couleur-terre-sombre);
}

.nav-ancres .nav-ancres__action {
    background: var(--couleur-terre);
    color: var(--couleur-papier);
    border-bottom: none;
    padding-inline: var(--espace-4);
}

.nav-ancres .nav-ancres__action:hover {
    background: var(--couleur-terre-sombre);
    color: var(--couleur-papier);
}

/* ---------- Heros ---------- */

.heros {
    position: relative;
    min-height: min(92svh, 60rem);
    display: flex;
    align-items: flex-end;
    color: var(--couleur-creme-sur-vert);
    background-color: var(--couleur-vert-profond);
    /* La photo vient du bloc d'accroche, posee en variable par le gabarit */
    background-image:
        linear-gradient(
            180deg,
            var(--couleur-voile-leger) 0%,
            var(--couleur-voile-moyen) 40%,
            var(--couleur-voile-fonce) 100%
        ),
        var(--heros-photo, none);
    background-size: cover;
    background-position: center 40%;
}

.heros__contenu {
    padding-block: var(--espace-8);
}

/* Pastille opaque : l'or sur le vert profond tient le contraste AA,
   ce que l'or pose directement sur le ciel de la photo ne tenait pas. */
.heros__surtitre {
    display: inline-block;
    font-size: var(--texte-petit);
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--couleur-or);
    background: var(--couleur-vert-profond);
    border-top: var(--filet-ocre);
    padding: var(--espace-2) var(--espace-3);
    margin-bottom: var(--espace-5);
}

.heros h1 {
    font-size: var(--titre-heros);
    font-weight: 900;
    text-transform: uppercase;
    max-width: 22ch;
    margin-bottom: var(--espace-5);
}

.heros__chapo {
    font-size: var(--texte-grand);
    max-width: 52ch;
    margin-bottom: var(--espace-6);
}

.heros__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espace-4);
    margin-bottom: var(--espace-7);
}

/* ---------- Bandeau d'entete des pages 2 et 3 ---------- */

.page-bandeau {
    background: var(--couleur-vert-profond);
    color: var(--couleur-creme-sur-vert);
    padding-block: var(--espace-7);
}

.page-bandeau .section__surtitre {
    color: var(--couleur-or);
}

.page-bandeau h1 {
    font-size: var(--titre-1);
    max-width: 24ch;
}

/* ---------- Boutons ---------- */

.bouton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--espace-2);
    min-height: var(--cible-tactile);
    padding: var(--espace-3) var(--espace-6);
    font-family: var(--police-texte);
    font-size: var(--texte-corps);
    font-weight: 700;
    text-decoration: none;
    border-radius: var(--rayon-petit);
    border: 2px solid transparent;
    cursor: pointer;
    transition: background var(--transition-douce), color var(--transition-douce),
        transform var(--transition-douce), box-shadow var(--transition-douce);
}

.bouton--principal {
    background: var(--couleur-terre);
    color: var(--couleur-papier);
}

.bouton--principal:hover {
    background: var(--couleur-terre-sombre);
    color: var(--couleur-papier);
    transform: translateY(-2px);
    box-shadow: var(--ombre-carte-survol);
}

.bouton--secondaire {
    background: transparent;
    color: inherit;
    border-color: currentColor;
}

.bouton--secondaire:hover {
    background: var(--couleur-papier);
    color: var(--couleur-encre);
}

.section--verte .bouton--secondaire:hover {
    color: var(--couleur-vert-profond);
}

.bouton:disabled {
    opacity: 0.6;
    cursor: wait;
    transform: none;
}

/* ---------- Sections ---------- */

.section {
    padding-block: var(--espace-8);
    scroll-margin-top: calc(var(--hauteur-nav) + var(--espace-4));
}

/* L'entete s'enroule sur deux lignes bien avant les ecrans etroits : le
   sommaire d'ancres passe a la ligne des que la place manque, soit jusqu'a
   71rem environ. En dessous de cette largeur, une ancre cliquee posait le
   haut de la section SOUS l'entete, avalant le surtitre ou la ligne de date.
   Le doublement couvre donc toute la plage ou l'enroulement se produit. */
@media (max-width: 71rem) {
    .section,
    .actu-article {
        scroll-margin-top: calc(var(--hauteur-nav) * 2);
    }
}

.section--douce {
    background: var(--couleur-papier-doux);
}

.section--verte {
    background: var(--couleur-vert);
    color: var(--couleur-creme-sur-vert);
}

/* Creme plutot qu'or : l'or sur le vert de section reste sous 4,5:1 */
.section--verte a {
    color: var(--couleur-creme-sur-vert);
}

.section--verte a:hover {
    color: var(--couleur-or);
}

.section__surtitre {
    font-size: var(--texte-petit);
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--couleur-terre);
    margin-bottom: var(--espace-3);
}

.section--verte .section__surtitre {
    color: var(--couleur-creme-sur-vert);
}

.section h2 {
    font-size: var(--titre-1);
    margin-bottom: var(--espace-5);
    max-width: 24ch;
}

.section h3 {
    font-size: var(--titre-3);
    margin-block: var(--espace-6) var(--espace-4);
}

.chapo {
    font-size: var(--texte-grand);
    color: var(--couleur-encre-douce);
    margin-bottom: var(--espace-5);
}

.section--verte .chapo {
    color: var(--couleur-creme-sur-vert);
}

.prose p + p,
.prose ul + p,
.prose p + ul {
    margin-top: var(--espace-4);
}

/* Les textes assainis peuvent porter des listes (spec par. 5.1) :
   memes puces ocre que la maquette, partout ou de la prose s'affiche */
.prose ul {
    list-style: none;
    display: grid;
    gap: var(--espace-3);
    margin-block: var(--espace-4);
}

.prose ul li {
    display: flex;
    gap: var(--espace-3);
    padding: var(--espace-3) 0 var(--espace-3) var(--espace-1);
    border-bottom: var(--filet);
}

.prose ul li::before {
    content: "";
    flex: none;
    width: 0.55em;
    height: 0.55em;
    margin-top: 0.45em;
    background: var(--couleur-ocre);
    border-radius: var(--rayon-rond);
}

.prose h3 {
    margin-block: var(--espace-5) var(--espace-3);
}

.prose--legale {
    max-width: var(--largeur-texte);
}

/* ---------- Bandeau des chiffres ---------- */

.chiffres {
    background: var(--couleur-vert-profond);
    color: var(--couleur-creme-sur-vert);
    padding-block: var(--espace-7);
}

.chiffres__grille {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--espace-5);
    text-align: center;
}

.chiffre {
    padding: var(--espace-5) var(--espace-3);
    border-top: var(--filet-ocre);
}

.chiffre__valeur {
    font-family: var(--police-titre);
    font-weight: 900;
    font-size: var(--chiffre-cle);
    line-height: 1;
    color: var(--couleur-or);
    display: block;
    margin-bottom: var(--espace-2);
}

.chiffre__valeur .chiffre__unite {
    font-size: 0.45em;
    font-weight: 600;
}

.chiffre__legende {
    display: block;
    font-size: var(--texte-corps);
}

.chiffres__note {
    text-align: center;
    margin: var(--espace-6) auto 0;
    font-size: var(--texte-corps);
    color: var(--couleur-or);
}

/* ---------- Socle des cartes ----------
   Recette unique du bloc carte (fond, filet, rayon, ombre) : toute
   modification se fait ici et nulle part ailleurs (CLAUDE.md par. 5). */

.objectifs li,
.figure-cadre,
.projets-voisins li,
.action-carte,
.bureau li,
.actu-carte,
.actu-article,
.evenement-ligne,
.documents li,
.formulaire {
    background: var(--couleur-carte);
    border: var(--filet);
    border-radius: var(--rayon-moyen);
    box-shadow: var(--ombre-carte);
}

/* ---------- Cartes d'objectifs ---------- */

.objectifs {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--espace-4);
    max-width: none;
    margin-block: var(--espace-6);
    counter-reset: objectif;
}

.objectifs li {
    counter-increment: objectif;
    padding: var(--espace-5);
    display: flex;
    gap: var(--espace-4);
    align-items: flex-start;
}

.objectifs li::before {
    content: counter(objectif, decimal-leading-zero);
    font-family: var(--police-titre);
    font-weight: 900;
    font-size: var(--titre-3);
    line-height: 1;
    color: var(--couleur-ocre);
    flex: none;
}

/* ---------- Figures et photographies ---------- */

.figure-cadre {
    border-radius: var(--rayon-petit);
    padding: var(--espace-3);
    margin-block: var(--espace-5);
}

.figure-cadre img {
    width: 100%;
    border-radius: var(--rayon-petit);
}

.figure-cadre figcaption {
    padding: var(--espace-3) var(--espace-2) var(--espace-1);
    font-size: var(--texte-petit);
    color: var(--couleur-encre-douce);
}

.avant-apres {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--espace-5);
    margin-block: var(--espace-6);
}

.avant-apres .figure-cadre {
    margin-block: 0;
    display: flex;
    flex-direction: column;
}

.avant-apres .figure-cadre img {
    aspect-ratio: 3 / 2;
    object-fit: cover;
    flex: 1;
}

.projet-duo {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: var(--espace-6);
    align-items: start;
    margin-block: var(--espace-6);
}

.projet-duo .figure-cadre {
    margin-block: 0;
}

/* ---------- Encart (avis du Conseil Municipal) ---------- */

.encart {
    background: var(--couleur-papier-doux);
    border-left: 5px solid var(--couleur-terre);
    border-radius: var(--rayon-petit);
    padding: var(--espace-5) var(--espace-6);
    margin-block: var(--espace-6);
    max-width: var(--largeur-texte);
}

.encart strong {
    color: var(--couleur-terre);
}

/* ---------- Carte interactive (spec par. 5.11, D59) ---------- */

.carte-zone {
    position: relative;
}

.carte-zone__repli {
    margin-block: 0;
}

.carte-leaflet {
    height: clamp(22rem, 65vh, 34rem);
    border: var(--filet);
    border-radius: var(--rayon-moyen);
    box-shadow: var(--ombre-carte);
    background: var(--couleur-papier-doux);
    /* Contient les calques Leaflet (jusqu'à z-index 1000) dans leur propre
       empilement : sans cela ils passent au-dessus de l'en-tête sticky. */
    isolation: isolate;
}

.carte-leaflet .leaflet-container {
    font-family: var(--police-texte);
}

.carte-zone__note {
    font-size: var(--texte-petit);
    color: var(--couleur-encre-douce);
    margin-top: var(--espace-2);
}

/* Reperes dessines en CSS : aucun fichier d'icone, couleurs de la charte */
.carte-point {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: var(--rayon-rond);
    border: 3px solid var(--couleur-carte);
    background: var(--couleur-vert);
    box-shadow: var(--ombre-carte);
}

.carte-point--projet_principal {
    background: var(--couleur-terre);
}

.carte-point--projet_voisin {
    background: var(--couleur-ocre);
}

/* ---------- Frise d'avancement du dossier (D26) ---------- */

.frise {
    list-style: none;
    max-width: var(--largeur-texte);
    margin-block: var(--espace-6);
    padding-left: var(--espace-5);
    border-left: 3px solid var(--couleur-ocre);
    display: grid;
    gap: var(--espace-5);
}

.frise li {
    position: relative;
}

.frise li::before {
    content: "";
    position: absolute;
    left: calc(-1 * var(--espace-5) - 3px - 0.45em);
    top: 0.35em;
    width: 0.9em;
    height: 0.9em;
    border-radius: var(--rayon-rond);
    background: var(--couleur-papier);
    border: 3px solid var(--couleur-ocre);
}

.frise .frise__actuel::before {
    background: var(--couleur-terre);
    border-color: var(--couleur-terre);
}

.frise__date {
    display: block;
    font-size: var(--texte-petit);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--couleur-terre);
}

.frise__titre {
    display: block;
    font-family: var(--police-titre);
    font-weight: 600;
    font-size: var(--titre-4);
}

.frise__detail {
    display: block;
    color: var(--couleur-encre-douce);
}

/* ---------- Le bureau (D26) ---------- */

.bureau {
    list-style: none;
    max-width: none;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    gap: var(--espace-4);
    margin-block: var(--espace-6);
}

.bureau li {
    padding: var(--espace-5);
    text-align: center;
}

.bureau img {
    width: 96px;
    height: 96px;
    object-fit: cover;
    border-radius: var(--rayon-rond);
    margin: 0 auto var(--espace-3);
}

.bureau__nom {
    display: block;
    font-family: var(--police-titre);
    font-weight: 600;
    font-size: var(--titre-4);
}

.bureau__fonction {
    display: block;
    color: var(--couleur-encre-douce);
}

/* ---------- Liste des consequences ---------- */

.consequences {
    list-style: none;
    max-width: none;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--espace-3) var(--espace-6);
    margin-block: var(--espace-6);
}

.consequences li {
    display: flex;
    gap: var(--espace-3);
    align-items: flex-start;
    padding: var(--espace-3);
    border-bottom: 1px solid var(--couleur-filet-sur-vert);
}

.consequences li::before {
    content: "\2715";
    flex: none;
    font-weight: 700;
    color: var(--couleur-or);
    line-height: var(--interlignage-texte);
}

/* La citation et la question qui closent la liste, en corps assaini */
.citation {
    font-family: var(--police-titre);
    font-weight: 600;
    font-size: var(--titre-3);
    line-height: var(--interlignage-titre);
    color: var(--couleur-or);
    max-width: 30ch;
    margin-block: var(--espace-7) 0;
}

/* ---------- Autres projets ---------- */

.projets-voisins {
    list-style: none;
    max-width: none;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--espace-5);
    margin-block: var(--espace-6);
}

.projets-voisins li {
    border-top: 4px solid var(--couleur-vert);
    padding: var(--espace-5);
    transition: box-shadow var(--transition-douce), transform var(--transition-douce);
}

.projets-voisins li:hover {
    box-shadow: var(--ombre-carte-survol);
    transform: translateY(-3px);
}

.projets-voisins .projet-voisin--alerte {
    border-top-color: var(--couleur-terre);
}

.projet-voisin__commune {
    font-family: var(--police-titre);
    font-weight: 600;
    font-size: var(--titre-3);
    display: block;
}

.projet-voisin__surface {
    font-family: var(--police-titre);
    font-weight: 900;
    font-size: var(--titre-2);
    color: var(--couleur-terre);
    display: block;
    margin-block: var(--espace-2);
}

.projet-voisin__detail {
    color: var(--couleur-encre-douce);
    font-size: var(--texte-corps);
}

/* ---------- Appels a l'action ---------- */

.actions-finales {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--espace-5);
    max-width: none;
    margin-block: var(--espace-6);
}

.action-carte {
    padding: var(--espace-6);
    display: flex;
    flex-direction: column;
    gap: var(--espace-4);
    align-items: flex-start;
}

.action-carte h3 {
    margin: 0;
    font-size: var(--titre-3);
}

.action-carte p {
    color: var(--couleur-encre-douce);
}

.action-carte .bouton {
    margin-top: auto;
}

.action-carte--large {
    max-width: var(--largeur-texte);
}

/* ---------- Evenements ---------- */

.evenement {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--espace-5);
    align-items: center;
    background: var(--couleur-vert);
    color: var(--couleur-creme-sur-vert);
    border-radius: var(--rayon-moyen);
    padding: var(--espace-6);
    margin-block: var(--espace-6);
    max-width: none;
}

.evenement a {
    color: var(--couleur-or);
}

.evenement__date {
    text-align: center;
    background: var(--couleur-papier);
    color: var(--couleur-vert-profond);
    border-radius: var(--rayon-petit);
    padding: var(--espace-3) var(--espace-5);
    font-family: var(--police-titre);
    line-height: 1.1;
    align-self: start;
}

.evenement__jour {
    font-size: var(--titre-2);
    font-weight: 900;
    display: block;
}

.evenement__mois {
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: var(--texte-petit);
}

.evenement h3 {
    margin: 0 0 var(--espace-2);
    font-size: var(--titre-3);
}

.evenement div p {
    color: inherit;
}

.evenement__infos {
    font-size: var(--texte-petit);
    letter-spacing: 0.04em;
    margin-bottom: var(--espace-2);
}

/* L'agenda de la page 2 : la meme carte, posee sur le papier */
.agenda {
    list-style: none;
    max-width: none;
    display: grid;
    gap: var(--espace-4);
    margin-block: var(--espace-4) var(--espace-6);
}

.evenement-ligne {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--espace-5);
    padding: var(--espace-5);
    align-items: start;
}

.evenement-ligne .evenement__date {
    background: var(--couleur-papier-doux);
}

.evenement-ligne h4 {
    font-size: var(--titre-4);
    margin-bottom: var(--espace-1);
}

.evenement-ligne .evenement__infos {
    color: var(--couleur-encre-douce);
}

.evenement__description {
    max-width: var(--largeur-texte);
}

.evenement__image {
    margin-top: var(--espace-3);
    border-radius: var(--rayon-petit);
    max-width: 24rem;
}

.agenda--passe .evenement-ligne {
    opacity: 0.75;
}

/* ---------- Actualites ---------- */

.actu-cartes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--espace-5);
    margin-block: var(--espace-6);
}

.actu-carte {
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.actu-carte__image {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

.actu-carte__corps {
    padding: var(--espace-5);
    display: flex;
    flex-direction: column;
    gap: var(--espace-2);
}

.actu-carte__date {
    font-size: var(--texte-petit);
    color: var(--couleur-encre-douce);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.actu-carte h3 {
    font-size: var(--titre-4);
}

.actu-carte h3 a {
    color: inherit;
    text-decoration: none;
}

.actu-carte h3 a:hover {
    color: var(--couleur-terre);
    text-decoration: underline;
}

.actu-carte__epingle,
.actu-article__epingle {
    color: var(--couleur-terre);
    font-weight: 700;
}

.fil-actualites {
    display: grid;
    gap: var(--espace-5);
    max-width: var(--largeur-texte);
}

.actu-article {
    padding: var(--espace-6);
    scroll-margin-top: calc(var(--hauteur-nav) + var(--espace-4));
}

.actu-article__date {
    font-size: var(--texte-petit);
    color: var(--couleur-encre-douce);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    display: flex;
    gap: var(--espace-3);
    align-items: baseline;
}

.actu-article h3 {
    font-size: var(--titre-3);
    margin-block: var(--espace-2) var(--espace-4);
}

.actu-article__image {
    border-radius: var(--rayon-petit);
    margin-bottom: var(--espace-4);
}

.actu-article__chapo {
    font-size: var(--texte-grand);
    color: var(--couleur-encre-douce);
    margin-bottom: var(--espace-4);
}

/* ---------- Galerie photos ---------- */

.galerie {
    list-style: none;
    max-width: none;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    gap: var(--espace-4);
    margin-block: var(--espace-6);
}

.galerie__lien {
    display: block;
    border-radius: var(--rayon-moyen);
    overflow: hidden;
    border: var(--filet);
    box-shadow: var(--ombre-carte);
    background: var(--couleur-carte);
}

.galerie__lien img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    transition: transform var(--transition-douce);
}

.galerie__lien:hover img {
    transform: scale(1.03);
}

.galerie__legende {
    font-size: var(--texte-petit);
    color: var(--couleur-encre-douce);
    padding-top: var(--espace-2);
}

/* Visionneuse d'agrandissement (spec par. 5.4), sans dependance */
.visionneuse {
    border: none;
    border-radius: var(--rayon-moyen);
    padding: var(--espace-3);
    background: var(--couleur-carte);
    max-width: min(92vw, 70rem);
}

.visionneuse::backdrop {
    background: var(--couleur-voile-fonce);
}

.visionneuse img {
    max-height: 80vh;
    width: auto;
    max-width: 100%;
    margin-inline: auto;
    border-radius: var(--rayon-petit);
}

.visionneuse figcaption {
    padding: var(--espace-3) var(--espace-2) var(--espace-1);
    color: var(--couleur-encre-douce);
    font-size: var(--texte-petit);
}

.visionneuse__fermer {
    position: absolute;
    top: var(--espace-2);
    right: var(--espace-2);
    min-width: var(--cible-tactile);
    min-height: var(--cible-tactile);
    border: none;
    border-radius: var(--rayon-petit);
    background: var(--couleur-encre);
    color: var(--couleur-papier);
    font-size: var(--texte-grand);
    cursor: pointer;
}

/* ---------- Documents ---------- */

.documents {
    list-style: none;
    max-width: var(--largeur-texte);
    display: grid;
    gap: var(--espace-4);
    margin-block: var(--espace-6);
}

.documents li {
    padding: var(--espace-5);
}

.documents__lien {
    display: block;
    text-decoration: none;
}

.documents__titre {
    display: block;
    font-family: var(--police-titre);
    font-weight: 600;
    font-size: var(--titre-4);
    color: var(--couleur-terre);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.documents__lien:hover .documents__titre {
    color: var(--couleur-terre-sombre);
    text-decoration-thickness: 2px;
}

.documents__infos {
    display: block;
    font-size: var(--texte-petit);
    color: var(--couleur-encre-douce);
    margin-top: var(--espace-1);
}

.documents__description {
    margin-top: var(--espace-2);
    color: var(--couleur-encre-douce);
}

/* ---------- Formulaires publics ---------- */

.contact-duo {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: var(--espace-6);
    align-items: start;
}

.coordonnees ul {
    list-style: none;
    display: grid;
    gap: var(--espace-3);
}

/* Meme socle que les liens du pied de page : le telephone et le mail sont
   les deux gestes les plus utiles de la page, et ils faisaient 22 px de haut
   contre les 44 px exiges (CLAUDE.md par. 8). Le public vise est age, un
   doigt tremblant lancait le client mail au lieu du telephone. */
.coordonnees a {
    display: inline-flex;
    align-items: center;
    min-height: var(--cible-tactile);
}

.coordonnees {
    font-style: normal;
    margin-bottom: var(--espace-4);
}

.mention-info {
    font-size: var(--texte-petit);
    color: var(--couleur-encre-douce);
    max-width: var(--largeur-texte);
    margin-top: var(--espace-4);
}

.formulaire {
    padding: var(--espace-6);
    max-width: var(--largeur-texte);
    display: grid;
    gap: var(--espace-4);
}

.formulaire__deux-colonnes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--espace-4);
}

.champ {
    display: grid;
    gap: var(--espace-1);
    max-width: none;
}

.champ label {
    font-weight: 700;
}

.champ input[type="text"],
.champ input[type="email"],
.champ input[type="tel"],
.champ select,
.champ textarea {
    width: 100%;
    padding: var(--espace-3);
    font: inherit;
    color: inherit;
    background: var(--couleur-papier);
    border: var(--filet);
    border-radius: var(--rayon-petit);
    min-height: var(--cible-tactile);
}

.champ textarea {
    resize: vertical;
}

.champ--consentement {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--espace-3);
    align-items: start;
    /* La case et son libellé forment ensemble la cible tactile (CLAUDE.md par. 8) */
    min-height: var(--cible-tactile);
}

.champ--consentement input {
    width: 1.6rem;
    height: 1.6rem;
    margin-top: 0.1rem;
    accent-color: var(--couleur-terre);
}

.champ--consentement label {
    font-weight: 400;
}

.champ--consentement .champ__erreur {
    grid-column: 2;
}

.champ--captcha input {
    max-width: 10rem;
}

.champ__erreur {
    color: var(--couleur-terre);
    font-weight: 700;
    font-size: var(--texte-petit);
}

.champ--invalide input,
.champ--invalide select,
.champ--invalide textarea {
    border-color: var(--couleur-terre);
    border-width: 2px;
}

.formulaire__statut {
    font-weight: 700;
    margin: 0;
}

.formulaire__statut--succes {
    color: var(--couleur-vert);
}

.formulaire__statut--echec {
    color: var(--couleur-terre);
}

.formulaire-repli {
    background: var(--couleur-papier-doux);
    border-left: 5px solid var(--couleur-terre);
    border-radius: var(--rayon-petit);
    padding: var(--espace-5);
    max-width: var(--largeur-texte);
}

/* ---------- Partage ---------- */

.partage {
    list-style: none;
    max-width: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--espace-4);
    margin-block: var(--espace-5);
}

/* ---------- Page d'erreur ---------- */

.erreur-page {
    min-height: 100svh;
    display: flex;
    align-items: center;
    text-align: center;
    padding-block: var(--espace-8);
}

.erreur-page .contenu {
    display: grid;
    justify-items: center;
    gap: var(--espace-4);
}

.erreur-page__code {
    font-family: var(--police-titre);
    font-weight: 900;
    font-size: var(--chiffre-cle);
    line-height: 1;
    color: var(--couleur-ocre);
}

.erreur-page h1 {
    font-size: var(--titre-2);
}

.erreur-page__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espace-4);
    justify-content: center;
    margin-top: var(--espace-4);
}

/* ---------- Pied de page ---------- */

.pied {
    background: var(--couleur-vert-profond);
    color: var(--couleur-creme-sur-vert);
    padding-block: var(--espace-8) var(--espace-6);
}

.pied a {
    display: inline-flex;
    align-items: center;
    min-height: var(--cible-tactile);
    color: var(--couleur-or);
}

.pied a:hover {
    color: var(--couleur-creme-sur-vert);
}

.pied__grille {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: var(--espace-6);
    margin-bottom: var(--espace-7);
}

.pied h2 {
    font-size: var(--titre-4);
    margin-bottom: var(--espace-4);
    color: var(--couleur-or);
}

.pied address {
    font-style: normal;
}

.pied ul {
    list-style: none;
}

.pied li {
    margin-bottom: var(--espace-1);
}

.pied__marque {
    display: flex;
    gap: var(--espace-4);
    align-items: center;
    margin-bottom: var(--espace-4);
}

.pied__marque img {
    width: 72px;
    height: 72px;
}

.pied__reseaux {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espace-4);
}

.pied__legal {
    border-top: 1px solid var(--couleur-filet-sur-vert);
    padding-top: var(--espace-5);
    font-size: var(--texte-petit);
    color: var(--couleur-attenue-sur-vert);
    max-width: none;
}

.pied__legal a {
    display: inline;
    min-height: 0;
}

/* ---------- Silhouette de la butte (transition de section) ----------
   Fond transparent : la silhouette remonte sur le remplissage bas de la
   derniere section, quelle que soit sa couleur. Hauteur bornee a 72 px,
   la valeur du remplissage (espace-8), pour ne jamais couvrir de texte. */

.silhouette {
    display: block;
    width: 100%;
    height: clamp(40px, 6.25vw, 72px);
    margin-top: calc(-1 * clamp(40px, 6.25vw, 72px));
    position: relative;
    color: var(--couleur-vert-profond);
    pointer-events: none;
}

/* ---------- Ecrans intermediaires et mobiles ---------- */

@media (max-width: 64rem) {
    .projet-duo,
    .contact-duo {
        grid-template-columns: 1fr;
    }

    .actu-cartes {
        grid-template-columns: 1fr 1fr;
    }

    .pied__grille {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 47.9375rem) {
    .entete__interieur {
        gap: var(--espace-2);
    }

    .marque__nom .marque__nom-long {
        display: none;
    }

    .nav-ancres {
        margin-left: 0;
        flex-basis: 100%;
    }

    .chiffres__grille,
    .objectifs,
    .avant-apres,
    .consequences,
    .projets-voisins,
    .actions-finales,
    .actu-cartes,
    .formulaire__deux-colonnes {
        grid-template-columns: 1fr;
    }

    .evenement,
    .evenement-ligne {
        grid-template-columns: 1fr;
    }

    .evenement__date {
        justify-self: start;
    }

    .pied__grille {
        grid-template-columns: 1fr;
    }

    .heros {
        min-height: min(78svh, 44rem);
    }

    .formulaire {
        padding: var(--espace-5);
    }
}

/* ---------- Ajustements de la revue de fin de phase 3 ---------- */

/* overflow-x: auto entraine overflow-y: auto : sans remplissage, l'anneau
   de focus des liens du sommaire etait rogne (WCAG 2.4.7). */
.nav-ancres ul {
    padding-block: var(--espace-2);
    margin-block: calc(-1 * var(--espace-2));
}

/* Le reset universel (margin: 0) ecrasait le centrage natif du dialog. */
.visionneuse {
    margin: auto;
}

/* L'or sur le vert mesure 4,45:1, sous le seuil AA : creme partout sur vert. */
.section--verte a:hover,
.evenement a {
    color: var(--couleur-creme-sur-vert);
}

.evenement a:hover {
    text-decoration-thickness: 2px;
}

/* Les dimensions des images d'actualite et d'evenement ne sont pas connues
   du gabarit : un ratio fixe evite le saut de mise en page au chargement. */
.actu-article__image,
.evenement__image {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

/* Cibles tactiles de la carte (CLAUDE.md par. 8) : commandes de zoom a 44 px,
   repere de 22 px au centre d'une zone de pointage de 44 px (public.js). */
.carte-leaflet .leaflet-control-zoom a {
    width: var(--cible-tactile);
    height: var(--cible-tactile);
    line-height: var(--cible-tactile);
    font-size: 1.4rem;
}

.carte-point {
    width: 22px;
    height: 22px;
    margin: 11px;
}

/* Case de consentement : au-dessus du seuil WCAG 2.5.8 (24 px) ; la ligne
   entiere (libelle compris) fait 44 px et bascule la case. */
.champ--consentement input {
    width: 1.75rem;
    height: 1.75rem;
    margin-top: 0.1rem;
}

@media (max-width: 47.9375rem) {
    /* Bande d'ancres a defilement horizontal : fondu de bord pour signaler
       la suite, et l'appel a l'action en tete pour rester visible (order porte
       sur le li, qui est l'element de la grille, pas sur le lien). */
    .nav-ancres ul {
        mask-image: linear-gradient(to right, black calc(100% - 2.5rem), transparent);
        -webkit-mask-image: linear-gradient(to right, black calc(100% - 2.5rem), transparent);
        padding-right: 2.5rem;
    }

    .nav-ancres li:has(.nav-ancres__action) {
        order: -1;
    }

}

.erreur-page__liens {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--espace-4);
    margin-top: var(--espace-6);
    padding: 0;
}

.erreur-page__liens a {
    display: inline-flex;
    align-items: center;
    min-height: var(--cible-tactile);
    color: var(--couleur-encre-douce);
}