/*
Theme Name: Commune de Moussages
Theme URI: https://test.atelierdevirgile.fr
Author: —
Description: Thème bloc sur mesure du site de la commune de Moussages (Cantal). Blocs natifs, sans constructeur de pages.
Version: 1.0.7
Requires at least: 6.6
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: commune-moussages
Tags: block-theme, full-site-editing, one-column
*/
/* ==========================================================================
   Commune de Moussages — maquette (phase 2)
   Registre relevé sur la référence : deux sans-serif (Belleza pour les titres,
   Jost pour le reste), vert seul accent, fond blanc pur, angles droits,
   titres à gauche, bandes pleine largeur.
   ========================================================================== */

/* Polices : déclarées dans theme.json (fontFace), fichiers dans assets/fonts/. */

/* ---------- Jetons : alias vers theme.json, seule source des valeurs ---------- */
:root {
  --blanc: var(--wp--preset--color--blanc);
  --brume: var(--wp--preset--color--brume);
  --encre: var(--wp--preset--color--encre);
  --gris: var(--wp--preset--color--gris);
  --mousse: var(--wp--preset--color--mousse);
  --foret: var(--wp--preset--color--foret);
  --filet: #DEDEDE;                     /* filets neutres (étiquettes, séparateurs) */
  --titre: var(--wp--preset--font-family--titre);
  --texte: var(--wp--preset--font-family--texte);
  --marge: clamp(20px, 5vw, 64px);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--blanc);
  color: var(--gris);
  font: 400 17px/1.7 var(--texte);      /* 17 px : autorisé par l'utilisateur (public âgé) */
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }
h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--titre);
  font-weight: 400;
  color: var(--encre);
  hyphens: none;
  text-wrap: balance;
}
sup { font-size: .62em; line-height: 0; vertical-align: .55em; }
:focus-visible { outline: 2px solid var(--mousse); outline-offset: 3px; }

.enveloppe { width: min(1180px, 100% - 2 * var(--marge)); margin-inline: auto; }

.evitement {
  position: absolute; left: 12px; top: -120px; z-index: 100;
  padding: 12px 18px; background: var(--blanc); color: var(--encre);
  font-weight: 500; text-decoration: none;
}
.evitement:focus { top: 12px; }

/* ---------- Icônes (masques CSS) ---------- */
[class*="ic-"]::before {
  content: "";
  flex: none;
  width: 18px; height: 18px;
  background: currentColor;
  -webkit-mask: var(--ic) center / contain no-repeat;
  mask: var(--ic) center / contain no-repeat;
}
.ic-ecole    { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18M5 21V10l7-4 7 4v11M10 21v-5h4v5M12 6V2l4 1.5L12 5'/%3E%3C/svg%3E"); }
.ic-poste    { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E"); }
.ic-salle    { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18M4 21V9l8-5 8 5v12M9 21v-6h6v6'/%3E%3C/svg%3E"); }
.ic-camping  { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 20h20M12 4 3 20M12 4l9 16M12 13l-3.5 7M12 13l3.5 7'/%3E%3C/svg%3E"); }
.ic-sentier  { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2v20M5 4h11l3 3-3 3H5zM19 12H8l-3 3 3 3h11z'/%3E%3C/svg%3E"); }
.ic-horloge  { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }
.ic-elus     { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2.5 20c.5-3.5 3.2-5.5 6.5-5.5s6 2 6.5 5.5'/%3E%3Ccircle cx='17' cy='9' r='2.5'/%3E%3Cpath d='M16.5 14.5c2.8 0 4.6 1.8 5 4.5'/%3E%3C/svg%3E"); }
.ic-document { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h8l4 4v14H6zM14 3v4h4M9 12h6M9 16h6'/%3E%3C/svg%3E"); }
.ic-identite { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14'/%3E%3Ccircle cx='9' cy='11' r='2.2'/%3E%3Cpath d='M5.5 16.5c.6-1.8 2-2.6 3.5-2.6s2.9.8 3.5 2.6M15 10h3M15 13h3'/%3E%3C/svg%3E"); }
.ic-plan     { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6l6-3 6 3 6-3v15l-6 3-6-3-6 3zM9 3v15M15 6v15'/%3E%3C/svg%3E"); }
.ic-croix    { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v18M7 8h10'/%3E%3C/svg%3E"); }
.ic-eglise   { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2v4M10 4h4M8 21V10l4-4 4 4v11M3 21h18M4 21v-7l4-2M20 21v-7l-4-2M11 21v-3a1 1 0 0 1 2 0v3'/%3E%3C/svg%3E"); }
.ic-four     { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18M5 21v-8a7 7 0 0 1 14 0v8M9 21v-5a3 3 0 0 1 6 0v5'/%3E%3C/svg%3E"); }
.ic-chateau  { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18M5 21V7h3v2h2V7h4v2h2V7h3v14M10 21v-4a2 2 0 0 1 4 0v4'/%3E%3C/svg%3E"); }
.ic-groupe   { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3'/%3E%3Cpath d='M6 20c.5-3 3-5 6-5s5.5 2 6 5'/%3E%3Ccircle cx='5' cy='10' r='2'/%3E%3Ccircle cx='19' cy='10' r='2'/%3E%3C/svg%3E"); }

/* ---------- En-tête (posé sur le héros) ---------- */
.entete { position: absolute; inset: 0 0 auto 0; z-index: 10; color: var(--blanc); }
.entete-ligne { display: flex; align-items: center; gap: 24px; min-height: 96px; }

.logo { display: flex; flex-direction: column; justify-content: center; min-height: 48px; margin-right: auto; color: var(--blanc); text-decoration: none; line-height: 1; }
.logo-sur { font: 500 10px/1 var(--texte); letter-spacing: .32em; text-transform: uppercase; margin-bottom: 7px; }
.logo-nom { font: 400 26px/1 var(--titre); }

.menu ul { display: flex; gap: 4px; }
.menu a {
  position: relative;
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 0 14px;
  color: var(--blanc); font-size: 14px; text-decoration: none; white-space: nowrap;
}
.menu a::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 9px;
  height: 1px; background: currentColor; transform: scaleX(0); transition: transform .2s;
}
.menu a:hover::after, .menu a[aria-current="page"]::after { transform: scaleX(1); }
.menu-mobile-seul { display: none; }

.entete-actions { display: flex; align-items: center; gap: 8px; }
.loupe {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  background: var(--mousse); color: var(--blanc);
}
.loupe::before {
  content: ""; width: 18px; height: 18px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 21 21'/%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='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 21 21'/%3E%3C/svg%3E") center / contain no-repeat;
}
.b-blanc {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 30px;
  background: var(--blanc); color: var(--encre);
  font: 500 14px/1 var(--texte); text-decoration: none;
}

.menu-bouton { display: none; }

/* ---------- Héros ---------- */
.hero {
  position: relative;
  display: flex; align-items: flex-end;
  min-height: clamp(415px, 41.667vw, 800px);   /* 600 px à 1440 : essai autorisé par l'utilisateur (référence : 415 px) */
  padding: 140px 0 62px;
  background: var(--foret);
  color: var(--blanc);
  overflow: hidden;
}
.hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 55% 62%; }   /* bureau : l'église et les roses à droite */
.hero::after {
  content: ""; position: absolute; inset: 0;
  /* bandeau sombre sous le menu + voile latéral sous le titre ; l'église reste lisible au centre et à droite */
  background:
    linear-gradient(180deg, rgba(24, 28, 26, .62) 0, rgba(24, 28, 26, .62) 72px, rgba(24, 28, 26, 0) 150px),
    linear-gradient(90deg, rgba(24, 28, 26, .8) 0%, rgba(24, 28, 26, .6) 30%, rgba(24, 28, 26, .22) 50%, rgba(24, 28, 26, .16) 100%);
}
.hero-contenu { position: relative; z-index: 1; }
.hero-titre { color: var(--blanc); font-size: clamp(40px, 4.72vw, 68px); line-height: 1.12; }
.fil { margin-top: 20px; font-size: 13px; letter-spacing: .02em; color: rgba(255, 255, 255, .92); }

/* ---------- Titres communs ---------- */
.sur-titre { margin-bottom: 18px; color: var(--encre); font: 500 12px/1.4 var(--texte); letter-spacing: .32em; text-transform: uppercase; }
.titre-section { margin-bottom: 28px; font-size: clamp(32px, 3.34vw, 48px); line-height: 1.22; }

/* ---------- Fiche : colonne de texte + encart (gabarit « Details » de la référence) ---------- */
.fiche { padding: 96px 0 112px; }
.fiche-grille { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 64px; align-items: start; }
.fiche-texte > p + p { margin-top: 16px; }
.fiche-texte > p:not(.sur-titre) { max-width: 40em; }
.petit-titre { margin: 44px 0 16px; font-size: 21px; line-height: 1.3; }

.etiquettes { display: flex; flex-wrap: wrap; gap: 10px; }
.etiquette {
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 44px; padding: 0 16px;
  border: 1px solid var(--filet);
  color: var(--encre); font-size: 14px; line-height: 1.2;
}
.etiquette::before { color: var(--mousse); }
.etiquette-pleine { background: var(--mousse); border-color: var(--mousse); color: var(--blanc); font-weight: 500; text-decoration: none; }
.etiquette-pleine:hover { background: var(--foret); border-color: var(--foret); }

.encart { padding: 40px 32px 32px; background: var(--brume); color: var(--encre); }
.encart-titre { font-size: 34px; line-height: 1.2; text-align: center; }
.encart-sous-titre { margin: 6px 0 22px; color: var(--gris); font-size: 14px; text-align: center; }
.horaires { display: grid; gap: 8px; }
.horaires li { display: flex; justify-content: space-between; gap: 16px; padding: 11px 16px; background: var(--blanc); font-size: 16px; }
.horaires li span:first-child { color: var(--gris); }
.encart-intertitre { margin: 30px 0 14px; font-size: 21px; line-height: 1.3; }
.coches { display: grid; gap: 10px; }
.coches li { position: relative; padding-left: 25px; font-size: 16px; line-height: 1.5; overflow-wrap: anywhere; }   /* bloc, pas flex : un lien reste dans la phrase */
.coches li::before { content: ""; position: absolute; left: 0; top: .42em; width: 13px; height: 13px; background: var(--mousse); }
.coches a { display: inline-flex; align-items: center; min-height: 44px; margin-block: -10px; text-underline-offset: 3px; }
.encart-total {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--filet);
}
.encart-total span:first-child { font: 400 21px/1.3 var(--titre); }
.encart-total span:last-child { font-size: 16px; text-align: right; }
.b-plein {
  display: flex; align-items: center; justify-content: center;
  min-height: 50px; margin-top: 24px; padding: 0 24px;
  background: var(--mousse); color: var(--blanc);
  font: 500 15px/1 var(--texte); text-decoration: none;
}
.b-plein:hover { background: var(--foret); }

/* ---------- Le village : image + texte, puis chiffres clés ---------- */
.village { padding: 0 0 120px; }
.village-ligne { display: grid; grid-template-columns: 534fr 598fr; gap: 48px; align-items: start; }
.village-photo img { width: 100%; aspect-ratio: 6 / 5; object-fit: cover; }
.village-texte { padding-top: 14px; }
.village-texte > p + p { margin-top: 16px; }

.chiffres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 72px; }
.chiffre-valeur { color: var(--foret); font: 300 clamp(56px, 6.1vw, 88px)/1 var(--texte); letter-spacing: -.01em; white-space: nowrap; }
.chiffre-libelle { margin-top: 20px; color: var(--encre); font: 400 22px/1.3 var(--titre); }
.chiffre-note { margin-top: 6px; }

/* ---------- Rubriques en zigzag ---------- */
.rubriques { padding: 0 0 128px; }
.rubriques-liste { display: grid; gap: 96px; }
.rubrique { display: grid; grid-template-columns: 578fr 554fr; gap: 48px; align-items: center; }
.rubrique-inverse { grid-template-columns: 554fr 578fr; }
.rubrique-inverse .rubrique-photo { order: 2; }
.rubrique-photo img { width: 100%; aspect-ratio: 7 / 5; object-fit: cover; }
.rubrique-titre { margin-bottom: 20px; font-size: clamp(30px, 3.06vw, 44px); line-height: 1.2; }
.rubrique-texte > p { max-width: 32em; }

.meta { display: flex; flex-wrap: wrap; gap: 10px 0; margin-top: 26px; }
.meta li {
  position: relative;
  display: inline-block;
  padding-left: 27px; padding-right: 22px; margin-right: 22px;
  border-right: 1px solid var(--filet);
  color: var(--encre); font-size: 14px; line-height: 1.3;
}
.meta li:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.meta li::before { position: absolute; left: 0; top: 50%; margin-top: -9px; }

.lien-discret {
  display: inline-flex; align-items: center;
  min-height: 44px; margin-top: 14px;
  color: var(--gris); font-size: 15px;
  text-decoration: underline; text-underline-offset: 4px;
}
.lien-discret:hover { color: var(--encre); }

/* ---------- Actualités : trois cartes ---------- */
.actualites { padding: 0 0 56px; }
.actualites-tete { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 40px; }
.actualites-tete .titre-section { margin-bottom: 0; }
.lien-fleche {
  display: inline-flex; align-items: center; gap: 8px; flex: none;
  min-height: 44px;
  color: var(--encre); font-size: 14px;
  text-decoration: underline; text-underline-offset: 4px;
}
.lien-fleche::after { content: "→"; text-decoration: none; }
.cartes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.carte-photo { position: relative; }
.carte-photo img { width: 100%; aspect-ratio: 7 / 6; object-fit: cover; }
.carte-etiquette {
  position: absolute; top: 14px; left: 14px;
  padding: 7px 11px;
  background: var(--mousse); color: var(--blanc);
  font: 500 12px/1 var(--texte); letter-spacing: .04em;
}
.carte-titre { margin: 20px 0 8px; font-size: 22px; line-height: 1.3; }
.carte-titre a { display: inline-block; padding-block: 10px; margin-block: -10px; text-decoration: none; }
.carte-titre a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Pied de page : forêt dans la brume ---------- */
.pied {
  position: relative;
  padding-top: 300px;
  background: var(--foret);
  color: var(--blanc);
  overflow: hidden;
}
.pied-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }
.pied::before {
  content: ""; position: absolute; inset: -1px 0 0 0; z-index: 1;   /* -1px : pas de jointure au pixel près */
  background: linear-gradient(180deg,
    var(--blanc) 0%,
    rgba(255, 255, 255, .9) 10%,
    rgba(255, 255, 255, .35) 26%,
    rgba(24, 32, 27, .1) 36%,
    rgba(24, 32, 27, .44) 54%,
    rgba(24, 32, 27, .62) 78%,
    rgba(24, 32, 27, .82) 100%);
}
.pied > .enveloppe { position: relative; z-index: 2; }
.slogan {
  max-width: 11em; margin-inline: auto;
  color: var(--blanc);
  font: 300 clamp(44px, 8.05vw, 116px)/1.04 var(--texte);
  letter-spacing: -.01em; text-align: center; text-wrap: balance;
}
.pied-barre {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px;
  margin-top: 150px; padding: 18px 0 26px;
  border-top: 1px solid rgba(255, 255, 255, .28);
  font-size: 13px;
}
.pied-legal, .pied-nav ul { display: flex; flex-wrap: wrap; column-gap: 4px; }
.pied-nav { justify-self: center; }
.pied-legal { flex-wrap: nowrap; }
.pied-barre a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px;
  color: var(--blanc); text-decoration: none;
}
.pied-barre a:hover { text-decoration: underline; text-underline-offset: 3px; }
.pied-legal { margin-left: -10px; }
.pied-copie { text-align: right; color: rgba(255, 255, 255, .92); }

/* ==========================================================================
   Tablette
   ========================================================================== */
@media (max-width: 1080px) {
  .fiche-grille { grid-template-columns: minmax(0, 1fr) 360px; gap: 48px; }
  .menu a { padding: 0 10px; }
  .menu a::after { left: 10px; right: 10px; }
}
@media (max-width: 899px) {
  .hero-photo { object-position: 55% 7%; }   /* tablette : l'église entière, flèche comprise */
  .entete-ligne { gap: 12px; }
  .menu ul { gap: 0; }
  .menu a { padding: 0 7px; }
  .menu a::after { left: 7px; right: 7px; }
  .b-blanc { padding: 0 18px; }
  .fiche-grille { grid-template-columns: 1fr; gap: 56px; }
  .encart { max-width: 560px; }
  .village-ligne { grid-template-columns: 1fr 1fr; gap: 36px; }
  .rubrique, .rubrique-inverse { gap: 36px; }
  .pied-barre { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 4px; }
  .pied-legal, .pied-nav ul { justify-content: center; }
  .pied-legal { margin-left: 0; flex-wrap: wrap; }
  .pied-copie { text-align: center; }
}
@media (max-width: 719px) {
  .cartes { grid-template-columns: 1fr; gap: 48px; }
  .village-ligne, .rubrique, .rubrique-inverse { grid-template-columns: 1fr; gap: 28px; }
  .rubrique-inverse .rubrique-photo { order: 0; }
  .rubriques-liste { gap: 72px; }
  .actualites-tete { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   Mobile : le menu bascule à 600 px, comme le bloc navigation de WordPress
   ========================================================================== */
@media (max-width: 599px) {
  .entete-ligne { min-height: 76px; gap: 12px; }
  .entete-actions { display: none; }
  .menu-mobile-seul { display: block; }
  .menu-bouton {
    display: inline-flex; align-items: center; gap: 10px;
    min-height: 44px; padding: 0 14px;
    border: 1px solid rgba(255, 255, 255, .7); background: transparent;
    color: var(--blanc); font: 500 14px/1 var(--texte); cursor: pointer;
    position: relative; z-index: 2;
  }
  .menu-bouton::before {
    content: ""; width: 16px; height: 10px;
    border-block: 1.5px solid currentColor;
    background: linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat;
  }
  .menu {
    position: fixed; inset: 0; z-index: 1;
    display: none;
    padding: 110px var(--marge) 40px;
    background: var(--foret);
    overflow-y: auto;
  }
  .entete.est-ouvert .menu { display: block; }
  .entete.est-ouvert .menu-bouton::before { border-block-color: transparent; background: none; content: "×"; width: auto; height: auto; font-size: 20px; line-height: 10px; border: 0; }
  .menu ul { flex-direction: column; gap: 0; }
  .menu a {
    width: 100%; min-height: 56px; padding: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .18);
    font: 400 26px/1.2 var(--titre);
  }
  .menu a::after { display: none; }

  .hero { min-height: 360px; padding: 112px 0 40px; }
  .hero-photo { object-position: 55% 50%; }
  .hero::after {
    background: linear-gradient(180deg, rgba(24, 28, 26, .7) 0, rgba(24, 28, 26, .7) 68px, rgba(24, 28, 26, .25) 118px, rgba(24, 28, 26, .2) 40%, rgba(24, 28, 26, .62) 62%, rgba(24, 28, 26, .84) 100%);
  }
  .fil { margin-top: 14px; }

  .fiche { padding: 64px 0 80px; }
  .encart { padding: 32px 20px 24px; }
  .petit-titre { margin-top: 36px; }
  .village { padding-bottom: 88px; }
  .chiffres { grid-template-columns: 1fr; gap: 36px; margin-top: 56px; }
  .chiffre-libelle { margin-top: 12px; }
  .rubriques { padding-bottom: 96px; }
  .meta li { padding-right: 16px; margin-right: 16px; }

  .pied { padding-top: 220px; }
  .pied::before {
    background: linear-gradient(180deg,
      var(--blanc) 0%,
      rgba(255, 255, 255, .85) 8%,
      rgba(255, 255, 255, .3) 18%,
      rgba(24, 32, 27, .15) 26%,
      rgba(24, 32, 27, .52) 40%,
      rgba(24, 32, 27, .66) 70%,
      rgba(24, 32, 27, .84) 100%);
  }
  .pied-barre { margin-top: 110px; }
}

/* ==========================================================================
   Pages intérieures (phase 3) — déclinaisons des composants de l'accueil
   ========================================================================== */

/* Héros des pages : bandeau de la référence (415 px), fil d'Ariane */
.hero-page { min-height: 415px; }
.hero-page .hero-photo { object-position: 50% 50%; }
.hero-uni { min-height: 330px; }                 /* pages légales : pas de photo, fond forêt */
.hero-uni::after { content: none; }
.fil a { color: inherit; text-underline-offset: 3px; }
a[href^="tel:"] { white-space: nowrap; }

/* Texte de la fiche : sous-titres, listes, lignes label / valeur */
.fiche-texte > p + .coches, .fiche-texte > p + .lignes,
.fiche-texte > .lignes + p, .fiche-texte > .coches + p { margin-top: 18px; }
.fiche-texte .coches li { font-size: 17px; line-height: 1.6; }
/* liens dans les listes : zone cliquable portée à 44 px sans changer le rythme */
.fiche-texte .coches a, .lignes a, .texte-long li a { display: inline-block; min-height: 0; padding-block: 10px; margin-block: -10px; }
.colonnes { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
.lignes { border-top: 1px solid var(--filet); }
.lignes li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 24px;
  padding: 13px 0; border-bottom: 1px solid var(--filet);
  color: var(--encre); font-size: 16px; line-height: 1.5;
}
.lignes li span:first-child { color: var(--gris); }
.lignes li span:last-child { text-align: right; overflow-wrap: anywhere; }

/* Associations : nom en titre, description en texte courant */
.associations { margin-top: 28px; border-top: 1px solid var(--filet); }
.association { padding: 18px 0; border-bottom: 1px solid var(--filet); }
.association-nom { font-size: 21px; line-height: 1.3; }
.association-nom + p { margin-top: 6px; }

/* Rangée de trois blocs de texte (services) — même grille que les chiffres clés */
.services { padding: 0 0 128px; }
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; margin-top: 8px; }
.trio-titre { margin-bottom: 12px; font-size: 22px; line-height: 1.3; }
.trio-element > .lignes { margin-top: 18px; }
.chiffres-seuls { margin-top: 0; }

/* Ouverture des listes de page (sans section au-dessus) */
.rubriques-tete, .actualites-page { padding-top: 96px; }

/* Texte long : articles et pages légales, colonne de lecture */
.texte-long { padding: 88px 0 120px; }
.texte-long .enveloppe > * { max-width: 760px; }
.texte-long h2 { margin: 52px 0 14px; font-size: clamp(26px, 2.25vw, 32px); line-height: 1.25; }
.texte-long h2:first-child { margin-top: 0; }
.texte-long p + p { margin-top: 16px; }
.texte-long ul { display: grid; gap: 10px; margin: 16px 0 0; }
.texte-long ul li { position: relative; padding-left: 26px; }
.texte-long ul li::before { content: ""; position: absolute; left: 0; top: .62em; width: 13px; height: 13px; background: var(--mousse); }
.texte-long .lien-fleche { margin-top: 12px; }

/* Formulaire de contact */
.formulaire { display: grid; gap: 22px; max-width: 640px; margin-top: 36px; }
.champ label { display: block; margin-bottom: 8px; color: var(--encre); font-size: 15px; font-weight: 500; }
.champ input, .champ textarea {
  display: block; width: 100%; min-height: 50px; padding: 12px 14px;
  border: 1px solid #8C8C8C; border-radius: 0; background: var(--blanc);
  color: var(--encre); font: 400 17px/1.5 var(--texte);
}
.champ textarea { min-height: 180px; resize: vertical; }
.champ input:focus, .champ textarea:focus { outline: 2px solid var(--mousse); outline-offset: 0; border-color: var(--mousse); }
.formulaire .b-plein { justify-self: start; min-width: 220px; margin-top: 4px; border: 0; cursor: pointer; }
.form-info { font-size: 15px; }

@media (max-width: 899px) {
  .trio { grid-template-columns: 1fr; gap: 48px; max-width: 560px; }
}
@media (max-width: 599px) {
  .hero-page { min-height: 360px; }
  /* pages intérieures : titre souvent sur trois lignes, voile plus soutenu au milieu */
  .hero-page::after { background: linear-gradient(180deg, rgba(24, 28, 26, .7) 0, rgba(24, 28, 26, .7) 68px, rgba(24, 28, 26, .5) 118px, rgba(24, 28, 26, .55) 40%, rgba(24, 28, 26, .72) 62%, rgba(24, 28, 26, .86) 100%); }
  .hero-uni { min-height: 260px; }
  .colonnes { grid-template-columns: 1fr; }
  .lignes li { flex-wrap: wrap; gap: 4px 16px; }
  .lignes li span:last-child { text-align: left; }
  .services { padding-bottom: 96px; }
  .rubriques-tete, .actualites-page { padding-top: 64px; }
  .texte-long { padding: 56px 0 88px; }
  .formulaire .b-plein { justify-self: stretch; }
}

/* ==========================================================================
   Adaptations Gutenberg (phase 4)
   Le CSS de la maquette ci-dessus est repris tel quel. Ici, seulement ce que
   la structure des blocs natifs change. WordPress imprime le CSS des blocs
   APRÈS cette feuille : chaque surcharge est donc plus spécifique, jamais
   seulement plus tardive (blocs-gutenberg.md).
   ========================================================================== */

/* ---------- Filet de sécurité, à spécificité nulle (theme.json coupe déjà blockGap) ---------- */
:where(.wp-block-group) > :where(*), :where(.wp-block-buttons) { margin-block: 0; }
figure.wp-block-image, figure.wp-block-post-featured-image { margin: 0; }

/* Connecté : l'en-tête passe sous la barre d'administration */
.admin-bar .entete { top: 32px; }
@media (max-width: 782px) { .admin-bar .entete { top: 46px; } }

/* ---------- Logo : sur-titre + titre du site (le lien est sur le titre) ---------- */
.logo .logo-sur { margin: 0 0 7px; }
.logo .logo-nom { margin: 0; }
.logo .logo-nom a { display: inline-block; padding-block: 9px; margin-block: -9px; color: inherit; text-decoration: none; }

/* ---------- Menu principal : bloc navigation ---------- */
.entete .menu.wp-block-navigation .wp-block-navigation__container { gap: 4px; }
.entete .menu .wp-block-navigation-item__content {
  position: relative;
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 0 14px;
  color: var(--blanc); font-size: 14px; text-decoration: none; white-space: nowrap;
}
.entete .menu .wp-block-navigation-item__content::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 9px;
  height: 1px; background: currentColor; transform: scaleX(0); transition: transform .2s;
}
.entete .menu .wp-block-navigation-item__content:hover::after,
.entete .menu .current-menu-item > .wp-block-navigation-item__content::after,
.entete .menu [aria-current="page"]::after { transform: scaleX(1); }
.entete .menu .wp-block-navigation-item.menu-mobile-seul { display: none; }

/* ---------- Boutons natifs : la classe est sur le conteneur, le style va sur le lien ---------- */
.wp-block-button.b-plein, .wp-block-button.b-blanc, .wp-block-button.loupe {
  display: block; width: auto; height: auto; min-height: 0; min-width: 0;
  margin: 0; padding: 0; border: 0; background: none; color: inherit;
}
.wp-block-button.loupe::before { content: none; }
.entete .wp-block-buttons.entete-actions { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; }
.entete .wp-block-button.loupe > .wp-block-button__link {
  display: grid; place-items: center;
  width: 44px; height: 44px; padding: 0; border-radius: 0;
  background: var(--mousse); color: var(--blanc);
  font-size: 0; line-height: 0;                 /* « Rechercher » reste lu par les lecteurs d'écran */
}
.entete .wp-block-button.loupe > .wp-block-button__link::before {
  content: ""; width: 18px; height: 18px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 21 21'/%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='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 21 21'/%3E%3C/svg%3E") center / contain no-repeat;
}
.entete .wp-block-button.b-blanc > .wp-block-button__link {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 30px; border-radius: 0;
  background: var(--blanc); color: var(--encre);
  font: 500 14px/1 var(--texte); text-decoration: none;
}
.wp-block-buttons:has(> .wp-block-button.b-plein) { display: block; }
.wp-block-button.b-plein > .wp-block-button__link {
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 50px; margin-top: 24px; padding: 0 24px; border-radius: 0;
  background: var(--mousse); color: var(--blanc);
  font: 500 15px/1 var(--texte); text-decoration: none;
}
.wp-block-button.b-plein > .wp-block-button__link:hover { background: var(--foret); }

/* ---------- Héros et pied : la photo est une figure, le cadrage va sur l'image ---------- */
.hero .hero-photo, .pied .pied-photo { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; }
.hero .hero-photo img, .pied .pied-photo img { width: 100%; height: 100%; max-width: none; object-fit: cover; }
.hero .hero-photo img { object-position: 55% 62%; }
.hero.hero-page .hero-photo img { object-position: 50% 50%; }
.pied .pied-photo img { object-position: center 35%; }

/* ---------- Listes label / valeur : label en gras natif ---------- */
.horaires li strong, .lignes li strong { font-weight: 400; color: var(--gris); }
.encart-total { font-size: 16px; }
.encart-total strong { font: 400 21px/1.3 var(--titre); color: var(--encre); }

/* ---------- Étiquette pleine : le lien remplit l'étiquette ---------- */
.etiquette-pleine a { display: flex; align-items: center; min-height: 44px; margin-inline: -16px; padding-inline: 16px; color: inherit; text-decoration: none; }

/* ---------- Actualités : boucle de requête ---------- */
.cartes-requete .wp-block-post-template.cartes { margin: 0; padding: 0; list-style: none; }
.carte-photo .wp-block-post-featured-image { margin: 0; }
.carte-photo .wp-block-post-featured-image a { display: block; }
/* lien de catégorie : zone cliquable portée à 44 px de haut sans changer l'étiquette */
.carte-etiquette a { display: inline-block; padding: 16px 11px; margin: -16px -11px; color: inherit; text-decoration: none; }
.carte-resume .wp-block-post-excerpt__excerpt { margin: 0; }
.carte-resume .wp-block-post-excerpt__more-text { display: none; }
.pagination { margin-top: 48px; font-size: 15px; }
.pagination a { display: inline-flex; align-items: center; min-height: 44px; color: var(--encre); text-underline-offset: 4px; }

/* ---------- Pied de page : navigation et liste de liens ---------- */
.pied .pied-nav.wp-block-navigation .wp-block-navigation__container { display: flex; flex-wrap: wrap; column-gap: 4px; row-gap: 0; }
.pied-barre .wp-block-navigation-item__content {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px;
  color: var(--blanc); text-decoration: none;
}
.pied-barre .wp-block-navigation-item__content:hover { text-decoration: underline; text-underline-offset: 3px; }
.pied .slogan, .pied .pied-copie { margin: 0; }

/* ---------- Formulaire Contact Form 7 ---------- */
.wpcf7 .wpcf7-form-control-wrap { display: block; }
.wpcf7 .envoi { margin: 0; }
.wpcf7 .wpcf7-spinner { display: none; }
/* Turnstile (mode invisible) : conteneur vide, sorti de la grille du formulaire sinon il ajoute un écart de 22 px ; jamais masqué */
.wpcf7 .formulaire .wpcf7-turnstile { position: absolute; }
.wpcf7 .wpcf7-not-valid-tip { margin-top: 6px; color: var(--encre); font-size: 15px; font-weight: 500; }
.wpcf7 form .wpcf7-response-output { margin: 0; padding: 12px 16px; border: 1px solid var(--mousse); color: var(--encre); font-size: 15px; }
/* états du message : couleurs de la palette (Contact Form 7 impose #46b450, #dc3232, #ffb900… avec une spécificité de 0,3,1) */
.wpcf7 form.wpcf7-form.sent .wpcf7-response-output { border-color: var(--mousse); }
.wpcf7 form.wpcf7-form.invalid .wpcf7-response-output, .wpcf7 form.wpcf7-form.unaccepted .wpcf7-response-output,
.wpcf7 form.wpcf7-form.payment-required .wpcf7-response-output, .wpcf7 form.wpcf7-form.failed .wpcf7-response-output,
.wpcf7 form.wpcf7-form.aborted .wpcf7-response-output, .wpcf7 form.wpcf7-form.spam .wpcf7-response-output { border-color: var(--encre); }

/* ---------- Article : contenu de l'article dans la colonne de lecture ---------- */
/* Titre d'article : pas de saut de ligne possible dans le titre, la largeur le répartit sur deux lignes */
.single .hero .hero-titre { max-width: 9.5em; }
/* Lien de retour : même écart qu'un paragraphe suivi du lien dans la maquette (16 + 12 px) */
.texte-long .wp-block-post-content + .lien-fleche { margin-top: 28px; }
.texte-long .wp-block-post-terms.sur-titre a { display: inline-block; padding-block: 15px; margin-block: -15px; color: inherit; text-decoration: none; }

/* ---------- Tablette ---------- */
@media (max-width: 899px) {
  .hero .hero-photo img { object-position: 55% 7%; }
  .hero.hero-page .hero-photo img { object-position: 50% 50%; }
  .entete .menu.wp-block-navigation .wp-block-navigation__container { gap: 0; }
  .entete .menu .wp-block-navigation-item__content { padding: 0 7px; }
  .entete .menu .wp-block-navigation-item__content::after { left: 7px; right: 7px; }
  .entete .wp-block-button.b-blanc > .wp-block-button__link { padding: 0 18px; }
}

/* ---------- Mobile : panneau du bloc navigation (bascule à 600 px, comme la maquette) ---------- */
@media (max-width: 599px) {
  /* le panneau de la maquette (.menu fixe et masqué) ne doit pas s'appliquer au bloc navigation */
  .entete .menu.wp-block-navigation { position: static; inset: auto; z-index: auto; display: flex; padding: 0; background: none; overflow: visible; }
  /* recherche et Contact passent dans le panneau du menu, comme dans la maquette */
  .entete .wp-block-buttons.entete-actions { display: none; }
  .hero .hero-photo img { object-position: 55% 50%; }
  .hero.hero-page .hero-photo img { object-position: 50% 50%; }

  .entete .menu .wp-block-navigation__responsive-container-open {
    display: inline-flex; align-items: center; gap: 10px;
    min-height: 44px; padding: 0 14px;
    border: 1px solid rgba(255, 255, 255, .7); background: transparent;
    color: var(--blanc); font: 500 14px/1 var(--texte);
  }
  .entete .menu .wp-block-navigation__responsive-container-open::before {
    content: ""; width: 16px; height: 10px;
    border-block: 1.5px solid currentColor;
    background: linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat;
  }
  /* panneau : « Fermer » à la place exacte de « Menu », liens à 110 px du haut comme dans la maquette */
  .entete .menu .wp-block-navigation__responsive-container.is-menu-open { padding: 16px var(--marge) 40px; }
  .entete .menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { padding-top: 94px; }
  .entete .menu .wp-block-navigation__responsive-container-close {
    top: 0; right: 0;
    display: inline-flex; align-items: center; gap: 10px;
    width: auto; height: auto; min-height: 44px; padding: 0 14px;
    border: 1px solid rgba(255, 255, 255, .7);
    color: var(--blanc); font: 500 14px/1 var(--texte);
  }
  .entete .menu .wp-block-navigation__responsive-container-close::before { content: "×"; font-size: 20px; line-height: 10px; }
  .entete .menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
    flex-direction: column; align-items: stretch; gap: 0; width: 100%;
  }
  .entete .menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { width: 100%; }
  .entete .menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.menu-mobile-seul { display: flex; }
  .entete .menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
    width: 100%; min-height: 56px; padding: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .18);
    font: 400 26px/1.2 var(--titre);
  }
  .entete .menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::after { display: none; }
}