/* ════════════════════════════════════════════════════════════
   BASE — l'habillage commun à TOUTES les pages du site.
   Repris du « bloc commun » des gabarits du site local
   (_generation/gabarit-page.html), dont il est désormais la seule copie.
   ════════════════════════════════════════════════════════════ */

:root{
  --bleu:#2c5a68; --bleu-clair:#84b4c0; --bleu-moyen:#457a89;
  --bleu-brume:#eef4f6; --encre:#33383a; --gris:#5c6668;
  --blanc:#fff; --creme:#faf9f7;
  --serif:"Playfair Display",Georgia,serif;
  --sans:"Jost","Futura","Century Gothic",sans-serif;
  --largeur:1180px; --gouttiere:1.5rem;
}
*,*::before,*::after{ box-sizing:border-box; }
/* L'en-tête est collant : sans ce décalage, un lien d'ancre amène la cible
   sous le menu, où elle reste invisible. */
html{ scroll-padding-top:5rem; }
body{
  margin:0; font-family:var(--sans); font-weight:300; font-size:1.0625rem;
  line-height:1.75; color:var(--encre); background:var(--blanc);
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--bleu); text-decoration:none; }
a:hover{ text-decoration:underline; }
h1,h2,h3{ font-weight:400; line-height:1.25; margin:0; }
.conteneur{ width:100%; max-width:var(--largeur); margin-inline:auto; padding-inline:var(--gouttiere); }
.section{ padding-block:3rem; }
@media (min-width:768px){ .section{ padding-block:4rem; } }

/* ── Boutons ─────────────────────────────────────────────── */
.bouton{
  display:inline-block; font-family:var(--sans); font-size:.95rem;
  letter-spacing:.04em; padding:.85rem 1.75rem; border:1px solid var(--bleu);
  border-radius:2px; transition:background .2s,color .2s;
}
.bouton:hover{ text-decoration:none; }
.bouton--plein{ background:var(--bleu); color:var(--blanc); }
.bouton--plein:hover{ background:#22454f; border-color:#22454f; }
.bouton--ligne{ background:transparent; color:var(--bleu); }
.bouton--ligne:hover{ background:var(--bleu); color:var(--blanc); }

/* ── En-tête et menu ─────────────────────────────────────── */
.entete{ position:sticky; top:0; z-index:50; background:rgba(255,255,255,.96); backdrop-filter:blur(6px); border-bottom:1px solid #e8eced; }
/* Barre d'administration WordPress (administrateurs connectés) : l'en-tête collant se place dessous. */
.admin-bar .entete{ top:32px; }
@media (max-width:782px){ .admin-bar .entete{ top:46px; } }
.entete__interieur{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-block:.75rem; }
.marque{ display:flex; align-items:center; gap:.75rem; color:var(--encre); }
.marque:hover{ text-decoration:none; }
.marque img{ width:46px; height:auto; }
.marque__nom{ font-family:var(--serif); font-size:1.3rem; color:var(--bleu); line-height:1.1; }
.marque__ville{ font-size:.7rem; letter-spacing:.22em; text-transform:uppercase; color:var(--gris); }
.nav{ display:none; }
.nav a{ color:var(--encre); font-size:.92rem; padding-block:.4rem; border-bottom:1px solid transparent; }
.nav a:hover{ color:var(--bleu); border-bottom-color:var(--bleu-clair); text-decoration:none; }
.nav a.est-actif{ color:var(--bleu); border-bottom-color:var(--bleu); }
.nav__prive{ color:var(--gris)!important; font-size:.85rem!important; }
@media (min-width:1024px){ .nav{ display:flex; align-items:center; gap:1.6rem; } }
.bascule-menu{ position:absolute; opacity:0; pointer-events:none; }
.bouton-menu{ display:flex; flex-direction:column; gap:5px; padding:.6rem; cursor:pointer; background:none; border:0; }
.bouton-menu span{ display:block; width:24px; height:1.5px; background:var(--encre); }
.menu-mobile{ display:none; flex-direction:column; gap:.25rem; padding:1rem var(--gouttiere) 1.5rem; border-top:1px solid #e8eced; background:var(--blanc); }
.bascule-menu:checked ~ .menu-mobile{ display:flex; }
.menu-mobile a{ color:var(--encre); padding-block:.6rem; border-bottom:1px solid #f0f3f4; }
@media (min-width:1024px){ .bouton-menu,.menu-mobile{ display:none!important; } }

/* ── Pied de page ────────────────────────────────────────── */
.pied{ background:var(--bleu); color:#cfe0e5; padding-block:3rem 2rem; font-size:.92rem; }
.pied a{ color:#cfe0e5; }
.pied a:hover{ color:var(--blanc); }
.pied__grille{ display:grid; gap:2rem; margin-bottom:2rem; }
@media (min-width:768px){ .pied__grille{ grid-template-columns:1.4fr 1fr 1fr; gap:3rem; } }
.pied h4{ font-family:var(--serif); font-size:1.05rem; color:var(--blanc); margin:0 0 .85rem; font-weight:400; }
.pied ul{ list-style:none; margin:0; padding:0; }
.pied li{ margin-bottom:.5rem; }
.pied__bas{ border-top:1px solid rgba(255,255,255,.16); padding-top:1.5rem; display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; font-size:.85rem; color:#c2d8de; }
.reseaux{ display:flex; gap:.75rem; }
.reseaux svg{ width:20px; height:20px; fill:currentColor; }

/* ── Accessibilité ───────────────────────────────────────── */
a:focus-visible,.bouton:focus-visible,.bouton-menu:focus-visible,summary:focus-visible{ outline:2px solid var(--bleu-clair); outline-offset:3px; }
.saut-contenu{ position:absolute; left:-9999px; background:var(--bleu); color:#fff; padding:.75rem 1.25rem; z-index:100; }
.saut-contenu:focus{ left:1rem; top:1rem; }

/* ── Titres de section ───────────────────────────────────── */
.titre-section{
  font-family:var(--serif); font-size:clamp(1.6rem,3.5vw,2.25rem);
  color:var(--bleu); text-align:center; margin-bottom:.75rem;
}
.titre-section::after{
  content:""; display:block; width:64px; height:1px;
  background:var(--bleu-clair); margin:1.25rem auto 0;
}
.chapeau{ max-width:56ch; margin:0 auto 3rem; text-align:center; color:var(--gris); }

/* ── Fil d'Ariane ────────────────────────────────────────── */
.fil{ font-size:.85rem; color:var(--gris); padding-block:1rem .25rem; }
.fil ol{ list-style:none; display:flex; flex-wrap:wrap; gap:.5rem; margin:0; padding:0; }
.fil li+li::before{ content:"›"; margin-right:.5rem; color:var(--bleu-clair); }
.fil [aria-current]{ color:var(--encre); }