/*
Theme Name: Les Sycomores
Theme URI: https://ehpad-saint-symphorien.fr/
Author: DevWebPro
Author URI: https://devwebpro.fr/
Description: Thème sur mesure pour l'EHPAD Les Sycomores à Saint-Symphorien (33), site internet réalisé par DevWebPro. Une identité chaleureuse inspirée du porche d'entrée, des tons miel de la façade et du vert des pins landais. Compatible avec le carrousel d'avis Trustindex et un agenda d'évènements intégré.
Version: 1.9.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: les-sycomores
Tags: accessibility-ready, custom-menu, custom-logo, featured-images
*/

/* =========================================================
   1. Jetons de design — palette tirée du site & du bâtiment
   ========================================================= */
:root {
  /* Couleurs */
  --miel: #F0C067;          /* bandeau doré de la marque */
  --miel-doux: #F9E9C6;
  --creme: #FDF9F1;         /* fond de page */
  --pin: #22504B;           /* vert pin foncé (sections) */
  --pin-profond: #163A36;
  --sauge: #E3EEE7;         /* vert d'eau clair */
  --sauge-vive: #7FA79A;
  --terracotta: #B0503A;    /* piliers rouges du porche */
  --terracotta-sombre: #8E3F2E;
  --encre: #2C2721;
  --encre-douce: #5B534A;
  --blanc: #FFFFFF;

  /* Typographie */
  --police-titres: "Fraunces", Georgia, serif;
  --police-texte: "Nunito Sans", "Segoe UI", sans-serif;
  --police-manuscrite: "Caveat", cursive;

  /* Rythme */
  --rayon: 18px;
  --rayon-arche: 999px 999px 18px 18px; /* signature : l'arche du porche */
  --ombre: 0 18px 45px -18px rgba(44, 39, 33, .22);
  --largeur-site: 1160px;
  --transition: .25s ease;
}

/* =========================================================
   2. Base
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  font-family: var(--police-texte);
  font-size: 1.0625rem; /* 17px : lisibilité pour un public familial et senior */
  line-height: 1.65;
  color: var(--encre);
  background: var(--creme);
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--pin); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--terracotta); }

:focus-visible {
  outline: 3px solid var(--terracotta);
  outline-offset: 3px;
  border-radius: 4px;
}

h1, h2, h3, h4 {
  font-family: var(--police-titres);
  font-weight: 600;
  line-height: 1.15;
  color: var(--encre);
  margin: 0 0 .5em;
}
h1 { font-size: clamp(2.4rem, 5.5vw, 3.8rem); letter-spacing: -.01em; }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); }
h3 { font-size: 1.25rem; }

.conteneur {
  width: min(var(--largeur-site), 92%);
  margin-inline: auto;
}

.ecran-lecteur {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap;
}

.lien-evitement {
  position: absolute; left: -999px; top: 8px;
  background: var(--pin); color: #fff;
  padding: .6rem 1.2rem; border-radius: 8px; z-index: 999;
}
.lien-evitement:focus { left: 8px; color: #fff; }

/* Étiquette de section (« eyebrow ») */
.etiquette {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .8rem; font-weight: 800;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--terracotta);
}
.etiquette::before {
  content: "";
  width: 26px; height: 2px;
  background: var(--terracotta);
  border-radius: 2px;
}

/* Trait manuscrit — clin d'œil au « Bienvenue chez nous » peint sur le porche */
.manuscrit {
  font-family: var(--police-manuscrite);
  font-size: clamp(1.5rem, 3vw, 2rem);
  color: var(--terracotta);
  transform: rotate(-1.5deg);
  display: inline-block;
}

/* =========================================================
   3. Boutons
   ========================================================= */
.bouton {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--police-texte);
  font-weight: 800; font-size: 1rem;
  padding: .9rem 1.6rem;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--transition), background var(--transition), color var(--transition), box-shadow var(--transition);
}
.bouton:hover { transform: translateY(-2px); }
.bouton:active { transform: translateY(0); }

.bouton--principal { background: var(--pin); color: #fff; box-shadow: var(--ombre); }
.bouton--principal:hover { background: var(--pin-profond); color: #fff; }

.bouton--secondaire { background: transparent; color: var(--pin); border-color: var(--pin); }
.bouton--secondaire:hover { background: var(--pin); color: #fff; }

.bouton--miel { background: var(--miel); color: var(--encre); }
.bouton--miel:hover { background: #E6B04B; color: var(--encre); }

.bouton svg { flex: none; }

/* =========================================================
   4. En-tête
   ========================================================= */
/* Bandeau doré plein, identique au site actuel */
.entete {
  position: sticky; top: 0; z-index: 60;
  background: var(--miel);
}

.entete .conteneur,
.pied .conteneur {
  width: min(1760px, 95%);
}
.entete__barre {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem;
  padding: .35rem 0;
}

.entete__marque { display: flex; align-items: center; gap: .7rem; text-decoration: none; }
.entete__marque img { max-height: 62px; width: auto; }
.entete__logo { display: block; }
/* Nom manuscrit affiché seulement si aucun logo n'est téléversé */
.entete__nom {
  font-family: var(--police-manuscrite);
  font-size: 1.9rem; color: var(--encre);
  line-height: 1;
}

/* Onglets du menu — valeurs reprises du Theme Builder du site :
   Merriweather noir, 1.21vw, letter-spacing 1px, larges espacements */
.navigation ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: center; flex-wrap: wrap;
  gap: clamp(.4rem, 1.6vw, 1.3rem);
  justify-content: flex-end;
}
.navigation a {
  display: block;
  padding: 1.5rem .55rem;
  font-family: "Merriweather", Georgia, serif;
  font-weight: 400;
  font-size: clamp(17px, 1.21vw, 23px);
  letter-spacing: 1px;
  color: #000000;
  text-decoration: none;
  transition: opacity 300ms cubic-bezier(.4,0,.2,1);
}
.navigation a:hover { opacity: .7; }
.navigation .current-menu-item > a,
.navigation .current_page_item > a,
.navigation .current-menu-ancestor > a { color: #000000; }

/* Onglet actif / survolé / ouvert : vert comme sur le site */
.navigation > ul > li:hover > a,
.navigation > ul > li.est-deplie > a,
.navigation > ul > li:focus-within > a,
.navigation .current-menu-item > a,
.navigation .current-menu-ancestor > a {
  color: #22504B; /* RGAA 3.2 : 5,4:1 sur le bandeau miel (l'ancien vert tenait 3,68:1) */
  opacity: 1;
}

/* Mega menus — panneaux blancs avec petite flèche et icônes vert profond */
.navigation li { position: relative; }
.navigation .sub-menu {
  list-style: none; margin: 0;
  padding: 1.5rem 1.6rem;
  position: absolute; top: calc(100% - 6px); left: 50%;
  transform: translateX(-50%);
  min-width: 300px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 24px 60px -18px rgba(20,35,35,.45);
  opacity: 0; visibility: hidden;
  transition: 300ms all cubic-bezier(.4,0,.2,1);
  z-index: 70;
  display: grid;
  gap: 1.35rem;
}
/* La petite flèche blanche qui pointe vers l'onglet */
.navigation .sub-menu::before {
  content: "";
  position: absolute; left: 50%; top: -10px;
  transform: translateX(-50%);
  border: 10px solid transparent;
  border-bottom: 12px solid #fff;
  border-top: 0;
}
/* Ouverture au clic : la classe .est-deplie est posée par main.js */
.navigation li.est-deplie > .sub-menu {
  opacity: 1; visibility: visible;
}

/* Flèche à droite des onglets à panneau (injectée par main.js) :
   pivote de 180° quand le mega menu est ouvert */
.navigation > ul > li > a {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}
.menu-fleche {
  display: inline-flex;
  color: currentColor;
  transition: transform 300ms cubic-bezier(.4,0,.2,1);
}
.menu-fleche svg { display: block; }
.navigation li.est-deplie > a .menu-fleche { transform: rotate(180deg); }
.navigation .sub-menu li { width: 100%; }
.navigation .sub-menu a {
  display: flex; align-items: center; gap: 1rem;
  padding: 0;
  font-family: "Merriweather", Georgia, serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.35;
  letter-spacing: 0;
  color: #34545A;
  border: 0;
  white-space: normal;
}
.navigation .sub-menu .menu-icone { flex: none; color: #34545A; }
.navigation .sub-menu a:hover { opacity: 1; color: #16302C; }
.navigation .sub-menu a:hover .menu-icone { color: #16302C; }

/* Bouton menu mobile */
.menu-mobile {
  display: none;
  background: none; border: 2px solid var(--encre);
  border-radius: 12px; padding: .5rem .7rem;
  color: var(--encre); cursor: pointer;
}

@media (max-width: 980px) {
  .menu-mobile { display: inline-flex; align-items: center; gap: .4rem; font-weight: 800; }

  /* Panneau : crème, arrondi, liseré miel, descente animée */
  .navigation {
    position: absolute; inset: 100% 0 auto 0;
    background: var(--creme);
    border-top: 3px solid var(--miel);
    border-radius: 0 0 18px 18px;
    box-shadow: 0 30px 60px -22px rgba(20, 35, 35, .5);
    display: none;
    max-height: calc(100vh - 90px);
    overflow-y: auto;
  }
  .navigation.est-ouvert { display: block; animation: menu-descend .25s ease; }
  @keyframes menu-descend { from { opacity: 0; transform: translateY(-10px); } }

  .navigation ul { flex-direction: column; align-items: stretch; padding: .4rem 5% 1.1rem; gap: 0; }
  .navigation > ul > li + li { border-top: 1px solid rgba(44, 39, 33, .1); }

  /* Onglets : grandes zones tactiles, chevron aligné à droite */
  .navigation > ul > li > a {
    display: flex; justify-content: space-between; align-items: center;
    width: 100%;
    padding: 1.05rem .2rem;
    font-size: 19px;
    border-bottom: 0;
  }
  .menu-fleche { display: inline-flex; } /* pilote l'accordéon, pivote à l'ouverture */

  /* Sous-menus : repliés par défaut, dépliés en accordéon animé.
     1er appui sur l'onglet = ouvrir, 2e appui = aller à la page
     (même convention qu'au bureau : un seul geste à apprendre). */
  .navigation .sub-menu {
    position: static; transform: none;
    background: none; box-shadow: none; border-radius: 0;
    min-width: 0; padding: 0; gap: 0;
    display: block; overflow: hidden;
    opacity: 1; visibility: visible;
    max-height: 0;
    transition: max-height 320ms cubic-bezier(.4, 0, .2, 1);
  }
  .navigation li.est-deplie > .sub-menu { max-height: 32rem; }
  .navigation .sub-menu::before { display: none; }

  /* Sous-onglets : filet miel à gauche, vert pin, retrait doux */
  .navigation .sub-menu li { border-left: 3px solid var(--miel); margin: 0 0 0 .2rem; }
  .navigation .sub-menu a {
    font-size: 16px;
    padding: .8rem 1rem;
    color: var(--pin);
    gap: .7rem;
    border-bottom: 0;
  }
  .navigation .sub-menu li:last-child a { padding-bottom: 1rem; }

  /* Page courante repérable d'un coup d'œil */
  .navigation a[aria-current="page"] { color: var(--pin); }

  @media (prefers-reduced-motion: reduce) {
    .navigation.est-ouvert { animation: none; }
    .navigation .sub-menu { transition: none; }
  }
}

/* =========================================================
   5. Héros — bannière photo plein écran (identique au site)
   ========================================================= */
.heros {
  position: relative;
  min-height: clamp(540px, 84vh, 780px);
  display: grid;
  place-items: center;
  background-size: cover;
  background-position: center;
  padding: 4rem 0;
  overflow: hidden;
}
/* Léger voile pour la lisibilité du texte blanc */
.heros::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(25,30,30,.28), rgba(25,30,30,.18) 45%, rgba(25,30,30,.32));
}

.heros__contenu {
  position: relative;
  width: min(880px, 92%);
  text-align: center;
  color: #fff;
}

/* Sur-titre espacé, traversé par un filet de chaque côté */
.heros__sur-titre {
  display: flex; align-items: center; gap: 1.4rem;
  margin: 0 0 1.2rem;
  font-weight: 700;
  font-size: clamp(.9rem, 1.8vw, 1.2rem);
  letter-spacing: .38em;
  text-transform: uppercase;
  text-shadow: 0 1px 8px rgba(0,0,0,.35);
  white-space: nowrap;
}
.heros__sur-titre::before,
.heros__sur-titre::after {
  content: "";
  flex: 1; height: 1px;
  background: rgba(255,255,255,.65);
}

.heros h1 {
  color: #fff;
  text-transform: uppercase;
  font-weight: 600;
  font-size: clamp(2.6rem, 6.5vw, 4.6rem);
  letter-spacing: .03em;
  margin: 0 0 1.6rem;
  text-shadow: 0 2px 14px rgba(0,0,0,.35);
}

/* Barre de recherche blanche */
.heros__recherche {
  display: flex; align-items: center;
  background: #fff;
  border-radius: 6px;
  max-width: 620px;
  margin: 0 auto;
  box-shadow: 0 10px 30px rgba(0,0,0,.2);
}
.heros__recherche input[type="search"] {
  flex: 1;
  border: 0; background: none;
  font-family: var(--police-titres);
  font-size: 1.15rem;
  color: var(--encre);
  padding: 1.05rem 1.4rem;
  min-width: 0;
}
.heros__recherche input[type="search"]::placeholder { color: #5B534A; opacity: 1; } /* RGAA 3.2 */
.heros__recherche input[type="search"]:focus { outline: none; }
.heros__recherche:focus-within { outline: 3px solid var(--miel); outline-offset: 2px; }
.heros__recherche button {
  border: 0; background: none; cursor: pointer;
  padding: 1rem 1.2rem;
  color: var(--encre);
  display: grid; place-items: center;
}
.heros__recherche button:hover { color: var(--terracotta); }

/* Slogan espacé sous la recherche */
.heros__slogan {
  font-weight: 700;
  font-size: clamp(.82rem, 1.6vw, 1.1rem);
  letter-spacing: .3em;
  text-transform: uppercase;
  margin: 1.8rem 0 2.2rem;
  text-shadow: 0 1px 8px rgba(0,0,0,.35);
}

/* Bouton vert pin « Dossier d'inscription via Trajectoire » */
.bouton--trajectoire {
  background: #3D6664;
  color: #fff;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: 1.02rem;
  padding: 1rem 1.9rem;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.bouton--trajectoire:hover { background: var(--pin-profond); color: #fff; }

@media (max-width: 640px) {
  .heros__sur-titre { letter-spacing: .22em; }
  .heros__slogan { letter-spacing: .16em; white-space: normal; }
}

/* Photo en arche — utilisée sur les pages intérieures */
.arche {
  border-radius: var(--rayon-arche);
  overflow: hidden;
  box-shadow: var(--ombre);
  position: relative;
  border: 8px solid #fff;
}
.arche img { width: 100%; height: 100%; object-fit: cover; }

/* =========================================================
   6. Cartes « Notre maison »
   ========================================================= */


/* =========================================================
   7. Agenda — carrousel des évènements (3 cartes qui tournent)
   ========================================================= */
.agenda {
  background: var(--pin);
  color: #fff;
  padding: clamp(3rem, 6vw, 4.5rem) 0;
}
.agenda h2 {
  color: #fff;
  text-align: center;
  margin-bottom: 2.2rem;
}

/* Enveloppe positionnée pour les flèches latérales */
.carrousel-enveloppe { position: relative; }

.fleche {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 2;
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.45);
  background: rgba(22,58,54,.6); color: #fff;
  display: grid; place-items: center; cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}
.fleche:hover { background: rgba(255,255,255,.18); border-color: #fff; }
.fleche--prec { left: -8px; }
.fleche--suiv { right: -8px; }

/* Bouton pause/lecture du carrousel — RGAA 13.8 : tout mouvement automatique
   doit pouvoir être arrêté par un contrôle visible au clavier comme à la souris */
.carrousel-pause {
  position: static;
  transform: none;
  width: 42px; height: 42px;
  margin: .9rem auto 0;
  display: grid;
}
.carrousel-pause .icone-lecture { display: none; }
.carrousel-pause[aria-pressed="true"] .icone-pause { display: none; }
.carrousel-pause[aria-pressed="true"] .icone-lecture { display: block; }
.carrousel-enveloppe { text-align: center; }

.carrousel {
  display: grid;
  grid-auto-flow: column;
  /* 3 cartes visibles sur grand écran */
  grid-auto-columns: calc((100% - 2 * 1.2rem) / 3);
  gap: 1.2rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: .5rem;
  scrollbar-width: none;
}
.carrousel::-webkit-scrollbar { display: none; }

@media (max-width: 980px) { .carrousel { grid-auto-columns: calc((100% - 1.2rem) / 2); } }
@media (max-width: 640px) {
  .carrousel { grid-auto-columns: 88%; }
  .fleche--prec { left: 4px; }
  .fleche--suiv { right: 4px; }
}

.evenement {
  scroll-snap-align: start;
  background: #fff;
  color: var(--encre);
  border-radius: var(--rayon);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.evenement__image img { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; }
.evenement__corps { padding: 1.2rem 1.3rem 1.4rem; display: flex; flex-direction: column; gap: .4rem; flex: 1; }
.evenement__date {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .85rem; font-weight: 800;
  color: var(--terracotta);
  text-transform: uppercase; letter-spacing: .06em;
}
.evenement h3 { margin: 0; font-size: 1.15rem; }
.evenement p { margin: 0; color: var(--encre-douce); font-size: .95rem; }

.agenda__vide {
  background: rgba(255,255,255,.08);
  border: 1px dashed rgba(255,255,255,.35);
  border-radius: var(--rayon);
  padding: 2.5rem;
  text-align: center;
  color: rgba(255,255,255,.85);
}

/* =========================================================
   8. Avis de familles (Trustindex)
   ========================================================= */
.avis {
  background: #5F8F84; /* vert d'eau de la section actuelle */
  padding: clamp(3rem, 6vw, 4.5rem) 0;
  text-align: center;
}
.avis h2 { color: #fff; margin-bottom: 2rem; }
.avis__widget { margin-top: .5rem; }
/* Le widget Trustindex garde son propre style ; on lui donne juste de l'air */
.avis__widget .ti-widget { margin-inline: auto !important; }

/* =========================================================
   9. Bandeau recrutement / admission
   ========================================================= */

/* =========================================================
   10. Pied de page — doré, identique au site d'origine
   ========================================================= */
.pied {
  background: var(--miel);
  color: var(--encre);
  padding: clamp(3rem, 6vw, 4.5rem) 0 2rem;
  font-family: "Merriweather", Georgia, serif;
}
.pied a { color: var(--encre); text-decoration: none; }
.pied a:hover { text-decoration: underline; }

.pied__grille {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  justify-items: center;
}
.pied__bloc {
  display: flex; align-items: flex-start; gap: 1rem;
  text-align: left;
}
.pied__icone { flex: none; color: #34545A; margin-top: .2rem; }
.pied__bloc h3 {
  margin: 0 0 .2em;
  font-family: "Merriweather", Georgia, serif;
  font-weight: 400;
  font-size: 1.35rem;
  color: #34545A;
}
.pied__bloc p { margin: 0; font-size: 1.02rem; }

/* Pastille Facebook bleue centrée */
.pied__facebook { text-align: center; margin: 2.2rem 0 1.8rem; }
.pied__facebook a {
  display: inline-grid; place-items: center;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: #3D5A98; color: #fff;
  transition: transform var(--transition);
}
.pied__facebook a:hover { transform: scale(1.08); text-decoration: none; }

/* Menu légal entre deux filets */
.pied__menu {
  border-top: 1px solid rgba(44,39,33,.55);
  border-bottom: 1px solid rgba(44,39,33,.55);
  padding: 1.1rem 0;
}
.pied__menu ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem 2rem;
}
.pied__menu a { font-size: 1.05rem; }

/* Crédit DevWebPro */
.pied__credit { text-align: center; padding-top: 1.6rem; }
.pied__credit p { margin: 0 0 .6rem; font-size: 1.05rem; }
.pied__credit img { display: inline-block; height: 43px; width: auto; }

@media (max-width: 880px) {
  /* Blocs de contact centrés : icône au-dessus, texte centré */
  .pied__grille { grid-template-columns: 1fr; justify-items: center; }
  .pied__bloc { flex-direction: column; align-items: center; text-align: center; gap: .5rem; }
  .pied__icone { margin-top: 0; }
  .pied__menu ul { flex-direction: column; align-items: center; gap: .8rem; }
}

/* =========================================================
   11. Pages intérieures & articles — design du site d'origine
   ========================================================= */
/* Bandeau : vert profond #34545A + feuilles illustrées + courbe #6F9F9C */
.page-tete {
  position: relative;
  background-color: #34545A;
  background-image: url("https://ehpad-saint-symphorien.fr/wp-content/uploads/2026/03/Bandeau.webp");
  background-size: cover;
  background-position: center;
  padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(5rem, 12vw, 8.5rem);
  text-align: center;
}
.page-tete h1 {
  margin: 0;
  color: #fff;
  text-transform: uppercase;
  font-family: "Merriweather", Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.9rem, 4.6vw, 3.4rem);
  letter-spacing: .06em;
  text-shadow: 0 2px 12px rgba(0,0,0,.25);
}
.page-tete__sous-titre {
  margin: 1rem auto 0;
  max-width: 52rem;
  color: #fff;
  font-family: "Merriweather", Georgia, serif;
  font-weight: 700;
  font-size: clamp(.8rem, 1.4vw, 1rem);
  letter-spacing: .28em;
  text-transform: uppercase;
  line-height: 1.9;
}
.page-tete__vague {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  width: 100%;
  height: clamp(40px, 6vw, 96px);
  display: block;
}

/* Corps de page : le vert d'eau #6F9F9C des sections du site */
.contenu-page {
  background: #6F9F9C;
  color: var(--encre);
  padding: clamp(2.5rem, 6vw, 4.5rem) 0;
}
.contenu-page .conteneur { max-width: 780px; }
.contenu-page h2, .contenu-page h3, .contenu-page h4 {
  color: #34545A;
  font-family: "Merriweather", Georgia, serif;
  font-weight: 400;
  margin-top: 1.6em;
}
.contenu-page a { color: #16302C; text-decoration-color: currentColor; }
.contenu-page a:hover { color: #16302C; text-decoration-thickness: 2px; } /* RGAA 3.2 : 4,76:1 (le blanc ne tenait que 2,95:1) */
/* Les boutons-pilules insérés dans le contenu (menus cantine, CTA…)
   échappent à la couleur de lien ci-dessus : texte blanc sur vert pin
   (contraste 8,7:1, conforme RGAA), sans soulignement. */
.contenu-page a.bouton { text-decoration: none; }
/* Dans les cartes (fiches, blurbs, documents, menus), la carte entière
   est déjà l'affordance de clic (ombre + soulèvement au survol) : tout
   soulignement intérieur est redondant. !important : le contenu hérité
   de Divi peut porter des <u> ou des styles en ligne
   « text-decoration: underline » que seul !important surclasse. */
.contenu-page :is(.carte-fiche, .colonne-cliquable, .carte-blurb, .carte-blurb--cliquable, .carte-blurb__lien, .documents-dynamiques__carte, .menus-cantine__carte),
.contenu-page :is(.carte-fiche, .colonne-cliquable, .carte-blurb, .carte-blurb--cliquable, .carte-blurb__lien, .documents-dynamiques__carte, .menus-cantine__carte) * {
  text-decoration: none !important;
}
.contenu-page a.bouton--principal,
.contenu-page a.bouton--principal:hover,
.contenu-page a.bouton--secondaire:hover { color: #fff; }
.contenu-page a.bouton--miel,
.contenu-page a.bouton--miel:hover { color: var(--encre); }
.contenu-page img { border-radius: var(--rayon); }
.contenu-page blockquote {
  border-left: 4px solid var(--miel);
  margin: 1.5em 0; padding: .8em 1.2em;
  background: rgba(255,255,255,.35); border-radius: 0 var(--rayon) var(--rayon) 0;
  font-style: italic;
}
/* Dans les cartes blanches, on repasse en encre */
.contenu-page .carte-blurb, .contenu-page .depliant,
.contenu-page .evenement, .contenu-page .horaires__ligne {
  color: var(--encre);
}
.contenu-page .carte-blurb a, .contenu-page .depliant a,
.contenu-page .evenement a { color: var(--pin); text-decoration-color: currentColor; }

/* Dans les cartes, les liens ne sont pas soulignés : la carte entière est
   l'affordance (fond blanc, ombre, soulèvement au survol, onglet « Voir la
   fiche »). Le soulignement du titre ET du texte descriptif (pages Dossier
   de préadmission, Aide sociale…) alourdissait la lecture sans rien ajouter. */
.contenu-page .carte-fiche a,
.contenu-page .carte-blurb a,
.contenu-page .carte-fiche a:hover,
.contenu-page .carte-blurb a:hover {
  text-decoration: none;
}
.contenu-page .carte-blurb h2, .contenu-page .carte-blurb h3, .contenu-page .carte-blurb h4,
.contenu-page .depliant h2, .contenu-page .depliant h3,
.contenu-page .evenement h3 { color: var(--encre); margin-top: 0; }

.liste-articles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; padding: 3rem 0; }
@media (max-width: 880px) { .liste-articles { grid-template-columns: 1fr; } }

/* Alignements WordPress */
.alignwide { width: min(1100px, 96%); margin-inline: auto; }
.alignfull { width: 100%; }
.wp-caption { max-width: 100%; }
.wp-caption-text { font-size: .85rem; color: var(--encre-douce); text-align: center; }

/* =========================================================
   12. Contenu Divi converti (pages migrées)
   ========================================================= */
/* Bouclier : neutralise les styles d'animation ou de positionnement
   laissés par d'éventuelles extensions Divi encore actives
   (Supreme Modules, Divi Assistant, etc.). À désactiver côté extensions
   dès que possible — voir INSTALLATION.md. */
.contenu-page .tranche,
.contenu-page .rangee,
.contenu-page .colonne,
.contenu-page .image-contenu,
.contenu-page .image-contenu img,
.contenu-page .carte-blurb,
.contenu-page .depliant,
.contenu-page .galerie__item {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
  position: static;
  float: none;
  visibility: visible !important;
}
.contenu-page .carte-fiche { position: relative; }

/* Les pages converties occupent toute la largeur utile */
.contenu-page--large .conteneur { max-width: var(--largeur-site); }

.tranche { margin: 0 0 clamp(1.5rem, 4vw, 3rem); }
.tranche:last-child { margin-bottom: 0; }
/* Neutralise les fonds hérités d'anciennes conversions (dégradés/images
   encore présents dans le contenu en base) : les tranches restent
   transparentes sur le vert du thème. */
.contenu-page .tranche,
.contenu-page .tranche--fond {
  background: none !important;
  background-image: none !important;
  padding-left: 0;
  padding-right: 0;
}

/* Tranche avec image de fond (fond pleine largeur, contenu centré) */
.tranche--fond {
  background-size: cover;
  background-position: center;
  border-radius: var(--rayon);
  padding: clamp(2rem, 5vw, 4rem) clamp(1rem, 3vw, 2.5rem);
}
.tranche--fond .image-contenu img {
  background: #fff;
  box-shadow: 0 16px 40px -16px rgba(0,0,0,.45);
}

/* Rangées multi-colonnes → grille fluide */
.rangee { display: grid; align-items: start; gap: clamp(1.2rem, 3vw, 2.4rem); margin-bottom: clamp(1rem, 3vw, 2rem); }
/* Anti-débordement mobile : sans min-width:0, un enfant à largeur
   intrinsèque (carte 654px, iframe, tableau…) élargit sa piste de
   grille au-delà de l'écran et max-width:100% devient inopérant. */
.rangee > .colonne { min-width: 0; }
/* Les mots insécables (URLs, emails…) passent à la ligne au lieu de déborder */
.contenu-page, .pied { overflow-wrap: break-word; }
/* Les contenus embarqués ne dépassent jamais leur colonne */
.contenu-page iframe, .contenu-page embed, .contenu-page object, .contenu-page video { max-width: 100%; }
/* Tableaux de contenu (tarifs…) : largeur naturelle plafonnée à leur
   colonne, défilement horizontal interne s'ils sont plus larges —
   valable à toutes les tailles d'écran (une rangée à 2 colonnes peut
   serrer un tableau même sur tablette). La grille du calendrier est
   exclue : elle doit s'étirer sur 100% et a déjà son propre
   conteneur de défilement (.calendrier__defilement). */
.contenu-page table:not(.calendrier__grille) {
  display: block;
  width: max-content;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.rangee--1 { grid-template-columns: 1fr; }
.rangee--2 { grid-template-columns: repeat(2, 1fr); }
.rangee--3 { grid-template-columns: repeat(3, 1fr); }
.rangee--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 880px) {
  .rangee--3, .rangee--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .rangee--2, .rangee--3, .rangee--4 { grid-template-columns: 1fr; }
}
.colonne > :first-child { margin-top: 0; }
.colonne > :last-child { margin-bottom: 0; }

/* Cartes « blurb » — blanches, centrées, icône verte, titre en capitales */
.carte-blurb {
  background: #fff;
  border-radius: 10px;
  padding: 2rem 1.6rem 1.7rem;
  box-shadow: 0 14px 34px -16px rgba(0,0,0,.35);
  text-align: center;
}
.carte-blurb__icone { color: #34545A; margin-bottom: .9rem; }
.carte-blurb__image { margin: 0 auto .8rem; border-radius: 10px; }
.carte-blurb__titre {
  margin: 0 0 .35em;
  font-family: "Merriweather", Georgia, serif;
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.carte-blurb__texte p:last-child { margin-bottom: 0; }
a.carte-blurb__lien { display: block; text-decoration: none; color: inherit; height: 100%; }
a.carte-blurb__lien:hover .carte-blurb { transform: translateY(-4px); }
a.carte-blurb__lien .carte-blurb { transition: transform var(--transition); }

.texte-centre { text-align: center; }

/* Une carte blurb seule dans sa rangée : resserrée et centrée */
.rangee--1 .colonne > .carte-blurb:only-child,
.rangee--1 .colonne > .carte-blurb__lien:only-child {
  max-width: 560px;
  margin-inline: auto;
}
.carte-blurb__lien:only-child { display: block; }

/* Grille équipe (rangées 4 colonnes) : chaque colonne est une carte
   blanche, quel que soit le balisage intérieur (ancien ou récent). */
.contenu-page .rangee--4 > .colonne {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 14px 34px -16px rgba(0,0,0,.35);
  padding: 2rem 1.2rem;
  min-height: 240px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  gap: .35rem;
}
.contenu-page .rangee--4 > .colonne p { margin: 0; }
/* Nom (1re ligne) : capitales serif vert profond */
.contenu-page .rangee--4 > .colonne > .texte-centre:first-child p,
.contenu-page .rangee--4 > .colonne > p:first-child {
  font-family: "Merriweather", Georgia, serif;
  font-weight: 400; font-size: 1.25rem;
  letter-spacing: .02em; text-transform: uppercase;
  color: #34545A;
}
/* Fonction (2e ligne) : gras sombre */
.contenu-page .rangee--4 > .colonne > .texte-centre:nth-child(2) p,
.contenu-page .rangee--4 > .colonne > p:nth-child(2) {
  font-weight: 800; color: var(--encre);
}
/* Téléphone éventuel : espacé */
.contenu-page .rangee--4 > .colonne > .texte-centre:nth-child(n+3) { margin-top: 1rem; }
/* Balisage récent : la carte-membre imbriquée ne double pas le cadre */
.contenu-page .rangee--4 .carte-membre {
  background: none; box-shadow: none; padding: 0; min-height: 0;
}

/* Cartes membres (Équipe & Partenaires) */
.carte-membre {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 14px 34px -16px rgba(0,0,0,.35);
  padding: 2rem 1.4rem;
  min-height: 240px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  gap: .4rem;
  height: 100%;
}
.carte-membre p { margin: 0; }
.carte-membre__nom {
  font-family: "Merriweather", Georgia, serif;
  font-weight: 400;
  font-size: 1.25rem;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: #34545A;
}
.carte-membre__role { font-weight: 800; color: var(--encre); }
.carte-membre__tel { margin-top: 1.2rem !important; }
.carte-membre__tel a { color: var(--encre); text-decoration: none; }
.carte-membre__tel a:hover { text-decoration: underline; }

/* Blurb horizontal (image à gauche) */
.carte-blurb--gauche {
  display: flex; align-items: center; gap: 1.4rem;
  text-align: left;
  background: none; box-shadow: none; padding: 0;
}
.carte-blurb--gauche .carte-blurb__image { flex: none; width: 130px; margin: 0; }
.carte-blurb--gauche .carte-blurb__texte { min-width: 0; } /* anti-débordement flex */
.carte-blurb--gauche .carte-blurb__titre { text-transform: none; letter-spacing: .01em; font-size: 1.15rem; color: #16556B; }
.carte-blurb--gauche .carte-blurb__texte { font-size: .95rem; }
.carte-blurb--gauche .carte-blurb__texte p { margin: .3em 0 0; }
@media (max-width: 640px) {
  .carte-blurb--gauche { flex-direction: column; text-align: center; }
}

/* Lien étendu : un <a> vide qui couvre toute sa carte (insensible à wpautop) */
.lien-etendu {
  position: absolute; inset: 0;
  z-index: 2;
  border-radius: inherit;
}
.lien-etendu:focus-visible { outline: 3px solid var(--miel); outline-offset: 3px; }

/* Carte-fiche : carte blanche cliquable avec onglet vertical (ex. Annexe tarifaire) */
.carte-fiche {
  position: relative;
  display: flex; align-items: stretch;
  width: 654px; max-width: 100%;
  height: 289px;
  margin: 1rem auto;
  background: #fff;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 18px 44px -22px rgba(0,0,0,.4);
  color: inherit;
  transition: transform var(--transition), box-shadow var(--transition);
}
@media (max-width: 700px) {
  .carte-fiche { height: auto; }
}
.carte-fiche:hover {
  transform: translateY(-4px);
  box-shadow: 0 40px 80px -40px rgba(48,133,147,.8);
}
/* wpautop peut envelopper le lien ou l'onglet dans un <p> : on le rend transparent */
.carte-fiche > p, .colonne-cliquable > p:first-child, .carte-blurb--cliquable > p:first-child { display: contents; }

.colonne-cliquable { position: relative; }
/* Galerie de menus fusionnée et centrée sur toute la largeur du contenu
   (les menus ne sont plus cantonnés à leur colonne Divi d'origine). */
.menus-cantine--centree { width: 100%; }
.carte-blurb--cliquable { position: relative; transition: transform var(--transition); }
.carte-blurb--cliquable:hover { transform: translateY(-4px); }
.carte-fiche__corps {
  flex: 1;
  min-width: 0; /* anti-débordement : autorise le corps flex à rétrécir */
  padding: 1.5rem 1.6rem;
  display: flex; flex-direction: column; justify-content: center;
}
.carte-fiche__corps > :first-child { margin-top: 0; }
.carte-fiche__onglet {
  flex: none;
  writing-mode: vertical-rl;
  display: grid; place-items: center;
  background: #34545A; color: #fff;
  font-weight: 700; font-size: .7rem;
  letter-spacing: .14em; text-transform: uppercase;
  padding: 1rem .65rem;
  border-radius: 12px 0 0 12px;
  align-self: center;
  min-height: 72%;
}

/* Accordéons (details/summary) */
.depliant {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 10px 26px -14px rgba(0,0,0,.35);
  margin: 0 0 1.1rem;
  overflow: hidden;
}
.depliant summary {
  cursor: pointer;
  padding: 1.15rem 1.4rem;
  font-family: "Merriweather", Georgia, serif;
  font-weight: 700; font-size: 1.02rem;
  line-height: 1.5;
  list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.depliant summary::-webkit-details-marker { display: none; }
.depliant summary::after {
  content: "+";
  flex: none;
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: #34545A; color: #fff;
  font-size: 1.05rem; font-weight: 400; line-height: 1;
  font-family: var(--police-texte);
  transition: transform var(--transition);
}
.depliant[open] summary::after { transform: rotate(45deg); }
.depliant__corps { padding: 0 1.4rem 1.3rem; }
.depliant__corps > :first-child { margin-top: 0; }

/* Horaires d'ouverture — carte blanche, lignes alternées */
.horaires {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 18px 44px -20px rgba(0,0,0,.4);
  padding: 1.6rem 1.4rem;
  max-width: 680px;
  margin: 0 auto 2rem;
}
.horaires__ligne {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: .65rem 1rem;
}
.horaires__ligne:nth-child(odd) { background: #EFEFEF; border-radius: 4px; }
.horaires__jour {
  font-family: "Merriweather", Georgia, serif;
  font-weight: 400; font-size: 1.15rem;
  color: var(--encre);
}
.horaires__heures { font-weight: 700; }

/* Galeries d'images — maçonnerie 3 colonnes, hauteurs naturelles */
.galerie {
  columns: 3;
  column-gap: 1.1rem;
  margin: 1.5rem 0;
}
/* Desktop : la galerie s'affranchit de la colonne de contenu (1160px),
   jusqu'à 1800px de large, centrée — mobile et tablette inchangés.
   Volontairement 3 colonnes maximum : avec peu de photos insécables,
   l'équilibrage multi-colonnes peut laisser une 4e colonne vide
   (constaté en production sur la galerie des réalisations). */
@media (min-width: 981px) {
  .galerie {
    width: min(1800px, 92vw);
    position: relative;
    left: 50%;
    transform: translateX(-50%);
  }
}
@media (max-width: 980px) { .galerie { columns: 2; } }
@media (max-width: 640px) { .galerie { columns: 1; } }
.galerie__item {
  display: block;
  break-inside: avoid;
  margin: 0 0 1.1rem;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 12px 30px -14px rgba(0,0,0,.4);
}
.galerie__item img {
  width: 100%; height: auto;
  display: block;
  transition: transform var(--transition);
}
.galerie__item:hover img { transform: scale(1.03); }

/* Carrousel d'images (page Votre chambre) */
.diapo { margin: .5rem 0 1.5rem; }
.diapo__scene { position: relative; border-radius: 6px; overflow: hidden; box-shadow: 0 14px 34px -16px rgba(0,0,0,.4); }
.diapo__image { width: 100%; aspect-ratio: 16 / 10.5; object-fit: cover; display: block; }
.diapo__fleche {
  position: absolute; bottom: 14px;
  width: 42px; height: 42px;
  border: 0; border-radius: 50%;
  background: #2F4F52; color: #fff;
  display: grid; place-items: center;
  cursor: pointer;
  transition: background var(--transition);
}
.diapo__fleche:hover { background: #16302C; }
.diapo__fleche--prec { left: 14px; }
.diapo__fleche--suiv { right: 14px; }
.diapo__vignettes {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: .6rem;
  margin-top: .6rem;
}
.diapo__vignette {
  padding: 0; border: 2px solid transparent; border-radius: 6px;
  overflow: hidden; cursor: pointer; background: none;
  transition: border-color var(--transition), opacity var(--transition);
  opacity: .85;
}
.diapo__vignette img { width: 100%; aspect-ratio: 16 / 11; object-fit: cover; display: block; }
.diapo__vignette:hover { opacity: 1; }
.diapo__vignette.est-active { border-color: #fff; opacity: 1; }
.diapo__vignette:nth-child(n+6) { display: none; } /* 5 vignettes visibles, les flèches font défiler le reste */

/* Carte Google — pleine largeur du site, au-delà de la colonne de texte */
.carte-google {
  width: min(var(--largeur-site), 92vw);
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: var(--ombre);
  margin: 1.5rem 0;
}
.carte-google iframe { display: block; width: 100%; height: 460px; border: 0; }

/* Images de contenu */
.image-contenu { margin: 1.5rem 0; }
.image-contenu img {
  border-radius: 8px;
  margin-inline: auto;
  background: #fff;
  box-shadow: 0 16px 40px -18px rgba(0,0,0,.4);
}

/* Liste d'agenda (remplace le calendrier Divi) */
.agenda-liste {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.4rem;
  margin: 1.5rem 0;
}
.agenda-liste .evenement { box-shadow: var(--ombre); }
.agenda-liste-vide {
  background: var(--sauge);
  border-radius: var(--rayon);
  padding: 2rem;
  text-align: center;
}

/* Encadré bordé (ex. mention RGPD) */
.encadre {
  border: 2px solid #000;
  border-radius: 10px;
  padding: 1.2rem 1.5rem;
  margin: 1.5rem 0;
  background: transparent;
}
.encadre p:last-child { margin-bottom: 0; }

/* Calendrier mensuel des animations */
/* Le calendrier s'affranchit de la colonne de contenu (1160px) :
   jusqu'à 1800px de large, centré sur l'écran — la grille de 7 jours
   respire mieux. 92vw garantit une marge sur les écrans plus petits. */
.calendrier {
  margin: .5rem 0 1.5rem;
  width: min(1800px, 92vw);
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
.calendrier__barre {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  margin-bottom: 1.2rem;
}
.calendrier__nav, .calendrier__vues { display: flex; gap: .5rem; }
.calendrier__bouton {
  display: inline-block;
  background: #A9CDA2;
  color: var(--encre) !important;
  font-weight: 700; font-size: .95rem;
  padding: .45rem .95rem;
  border-radius: 6px;
  text-decoration: none;
  transition: background var(--transition);
}
.calendrier__bouton:hover, .calendrier__bouton.est-actif { background: #8FBB86; }

/* Mode auto du calendrier (aucune vue choisie dans l'URL) :
   grille sur grand écran, liste d'office sur mobile — la grille de
   7 jours est illisible sur un petit écran. Le bouton correspondant
   à la vue affichée est marqué actif par le CSS. */
.calendrier__auto-liste { display: none; }
@media (min-width: 721px) {
  .calendrier--auto .calendrier__bouton--mois { background: #8FBB86; }
}
@media (max-width: 720px) {
  .calendrier__auto-mois { display: none; }
  .calendrier__auto-liste { display: block; }
  .calendrier--auto .calendrier__bouton--liste { background: #8FBB86; }
}
.calendrier__titre {
  margin: 0;
  font-family: "Merriweather", Georgia, serif;
  font-weight: 400;
  font-size: 1.5rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--encre);
}
.calendrier__defilement { overflow-x: auto; }
.calendrier__grille {
  width: 100%;
  min-width: 700px;
  border-collapse: collapse;
  background: rgba(255,255,255,.06);
}
.calendrier__grille th {
  background: #fff;
  color: #34545A;
  font-family: "Merriweather", Georgia, serif;
  font-weight: 700; font-size: .9rem;
  letter-spacing: .08em; text-transform: uppercase;
  padding: .7rem .4rem;
  border: 2px solid #fff;
}
.calendrier__jour {
  border: 2px solid #fff;
  vertical-align: top;
  padding: .45rem .5rem .6rem;
  height: 108px;
  min-width: 96px;
}
.calendrier__numero { font-weight: 700; }
.calendrier__jour.autre-mois .calendrier__numero { opacity: .35; }
.calendrier__jour.est-aujourdhui { background: #fff; }
.calendrier__evenement {
  display: block;
  margin-top: .4rem;
  background: #34545A;
  color: #fff !important;
  font-size: .8rem; line-height: 1.35;
  padding: .25rem .45rem;
  border-radius: 5px;
  text-decoration: none;
}
.calendrier__evenement:hover { background: #16302C; }
.calendrier__heure { font-weight: 800; }

/* Formulaires Contact Form 7 — champs gris clair, bouton vert clair */
.wpcf7 { max-width: 940px; margin-inline: auto; }
.wpcf7 label { font-weight: 400; display: block; margin-bottom: 1.1rem; }
.wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 input[type="tel"],
.wpcf7 select, .wpcf7 textarea {
  width: 100%;
  margin-top: .35rem;
  padding: .85rem 1rem;
  border: 1px solid rgba(44,39,33,.15);
  border-radius: 10px;
  font-family: var(--police-texte);
  font-size: 1rem;
  background: #EDEDED;
}
.wpcf7 input:focus, .wpcf7 textarea:focus, .wpcf7 select:focus {
  outline: none;
  border-color: var(--pin);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(240, 192, 103, .6); /* RGAA 10.7 : indicateur de focus visible */
}
.wpcf7 input[type="file"] { margin-top: .35rem; background: none; }
.wpcf7 input[type="checkbox"] { width: auto; margin-right: .5rem; }
.wpcf7 .wpcf7-list-item { margin-left: 0; }
.wpcf7 input[type="submit"] {
  background: #A9CDA2; color: var(--encre);
  border: 0; border-radius: 8px;
  font-weight: 700; font-size: 1.05rem;
  padding: .8rem 1.6rem;
  cursor: pointer;
  transition: background var(--transition);
}
.wpcf7 input[type="submit"]:hover { background: #8FBB86; }
.wpcf7-not-valid-tip { color: var(--terracotta); font-size: .9rem; }
.wpcf7-response-output {
  border-radius: 10px !important;
  padding: 1rem 1.2rem !important;
  margin: 1.5rem 0 0 !important;
}

/* =========================================================
   13. Page 404 — minimaliste : tout tient à l'écran
   ========================================================= */
/* Bandeau et section raccourcis, réservés aux pages compactes (404) */
.page-tete--compacte { padding: clamp(1.6rem, 3.5vw, 2.6rem) 0 clamp(3rem, 7vw, 4.6rem); }
.contenu-page--compacte { padding: clamp(1.4rem, 3vw, 2.4rem) 0 clamp(2rem, 4vw, 3rem); }

.p404 {
  max-width: 560px;
  margin-inline: auto;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 24px 60px -22px rgba(20, 35, 35, .5);
  padding: clamp(1.6rem, 3.5vw, 2.4rem) clamp(1.2rem, 3vw, 2.2rem);
  text-align: center;
}
.p404__code {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(.35rem, 1.5vw, .8rem);
  margin: 0 0 .5rem;
  font-family: "Merriweather", Georgia, serif;
  font-weight: 700;
  font-size: clamp(3.6rem, 9vw, 5.4rem);
  line-height: 1;
  color: #34545A;
  user-select: none;
}
.p404__arbre {
  width: clamp(3.2rem, 8vw, 4.8rem);
  height: auto;
  animation: p404-balancement 5s ease-in-out infinite;
  transform-origin: 50% 90%;
}
@keyframes p404-balancement {
  0%, 100% { transform: rotate(-2deg); }
  50%      { transform: rotate(2deg); }
}
@media (prefers-reduced-motion: reduce) {
  .p404__arbre { animation: none; }
}
.p404__texte {
  max-width: 30rem;
  margin: 0 auto 1.4rem;
  color: var(--encre-douce);
}
.p404__boutons {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: .8rem;
}


/* =========================================================
   14. Recherche instantanée — panneau de suggestions du héros
   ========================================================= */
.heros__recherche { position: relative; }

.suggestions {
  list-style: none;
  margin: .55rem 0 0;
  padding: .45rem;
  position: absolute;
  top: 100%; left: 0; right: 0;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 26px 60px -18px rgba(20, 35, 35, .55);
  text-align: left;
  z-index: 60;
  max-height: min(21rem, 46vh);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.suggestions[hidden] { display: none; }

.suggestions__item a {
  display: block;
  padding: .7rem .85rem;
  border-radius: 11px;
  text-decoration: none;
  color: var(--encre);
}
.suggestions__item.est-active a,
.suggestions__item a:hover {
  background: var(--miel-doux);
}
.suggestions__titre {
  display: flex; align-items: baseline; justify-content: space-between; gap: .8rem;
  font-family: "Merriweather", Georgia, serif;
  font-weight: 700;
  font-size: .98rem;
  color: #16302C;
}
.suggestions__titre mark {
  background: var(--miel);
  color: inherit;
  border-radius: 4px;
  padding: 0 .12em;
}
.suggestions__type {
  flex: none;
  font-family: var(--police-texte);
  font-weight: 800;
  font-size: .68rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
  background: var(--pin);
  border-radius: 999px;
  padding: .18rem .6rem;
}
.suggestions__extrait {
  display: block;
  margin-top: .18rem;
  font-size: .86rem;
  line-height: 1.4;
  color: var(--encre-douce);
}
.suggestions__vide {
  padding: .9rem .85rem;
  font-size: .95rem;
  color: var(--encre-douce);
}

/* Petit battement de la loupe pendant la requête */
.heros__recherche.est-en-recherche button svg { animation: recherche-pulse .8s ease-in-out infinite; }
@keyframes recherche-pulse { 50% { transform: scale(.82); } }
@media (prefers-reduced-motion: reduce) {
  .heros__recherche.est-en-recherche button svg { animation: none; }
}

/* Page de résultats de recherche (repli sans JavaScript) */
.recherche-nouvelle { max-width: 34rem; margin: 0 auto 2rem; }
.resultats {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 46rem;
  display: grid;
  gap: .9rem;
}
.resultat a {
  display: block;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 14px 34px -18px rgba(20, 35, 35, .4);
  padding: 1rem 1.2rem;
  text-decoration: none;
  color: var(--encre);
  transition: transform var(--transition), box-shadow var(--transition);
}
.resultat a:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 40px -18px rgba(20, 35, 35, .5);
}
.resultats-vide {
  max-width: 34rem;
  margin: 0 auto;
  text-align: center;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 14px 34px -18px rgba(20, 35, 35, .4);
  padding: 2rem 1.6rem;
}
.resultats-vide p { margin-top: 0; }

/* Correctif : le titre surligné reste un bloc unique, la pastille reste à droite */
.suggestions__intitule { flex: 1; min-width: 0; overflow-wrap: anywhere; }

/* =========================================================
   15. Menus de la cantine — galerie dynamique (page Restauration)
   ========================================================= */
.menus-cantine {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* cartes centrées, jamais collées à gauche */
  align-items: stretch;
  gap: 2rem;
  max-width: 1100px;
  margin-inline: auto;
}
.menus-cantine__carte {
  margin: 0;
  flex: 0 1 340px; /* base 340px, peut rétrécir, ne s'étire pas démesurément */
  max-width: 100%;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 18px 44px -18px rgba(20, 35, 35, .45);
  padding: 1rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.menus-cantine__carte img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  display: block;
}
.menus-cantine__carte a { display: block; }
/* Filet de sécurité : un lien étendu hérité de Divi ne doit jamais
   recouvrir la galerie de menus (il capterait les clics des boutons
   et ouvrirait l'ancien fichier lié à la colonne). */
.colonne-cliquable:has(.menus-cantine) > .lien-etendu { display: none !important; }
.menus-cantine { position: relative; z-index: 2; }
.menus-cantine__carte .bouton { display: inline-flex; margin: 1.2rem 0; }
.menus-cantine__carte figcaption {
  font-family: "Merriweather", Georgia, serif;
  color: #34545A;
  margin-top: .8rem;
  font-size: 1.02rem;
}

/* Documents dynamiques : cartes de la galerie documentaire des pages */
.documents-dynamiques { margin-top: 2.4rem; }
.documents-dynamiques__carte { display: grid; justify-items: center; gap: .4rem; padding: 1.6rem 1.2rem; }
.documents-dynamiques__icone { color: #22504B; }
.documents-dynamiques__carte .bouton { margin: .6rem 0 .2rem; }

/* =========================================================
   16. Cartes d'évènement enrichies (carrousel + liste agenda)
   — badge daté, titre à filet, infos date / horaires / lieu
   ========================================================= */
.evenement--agenda { position: relative; }

.evenement__badge {
  position: absolute; top: .85rem; left: .85rem;
  z-index: 1;
  background: var(--pin);
  color: #fff;
  border-radius: 12px;
  padding: .45rem .7rem .5rem;
  text-align: center;
  line-height: 1;
  box-shadow: 0 12px 26px -12px rgba(0, 0, 0, .65);
}
.evenement__badge strong {
  display: block;
  font-family: "Merriweather", Georgia, serif;
  font-size: 1.35rem;
}
.evenement__badge span {
  display: block;
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-top: .25rem;
}

.evenement--agenda .evenement__corps { text-align: center; align-items: center; gap: .6rem; }
.evenement--agenda h3::after {
  content: "";
  display: block;
  width: 38px; height: 3px;
  background: var(--miel);
  border-radius: 2px;
  margin: .55rem auto 0;
}

.evenement__infos {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  gap: .5rem;
  justify-items: center;
}
.evenement__infos li {
  display: inline-flex; align-items: center; gap: .55rem;
  color: var(--encre);
  font-size: .95rem;
}
.evenement__infos svg { color: #34545A; flex: none; }

/* =========================================================
   17. Cartes de documents entièrement cliquables
   Le lien du document s'étend sur toute la carte (motif
   « stretched link ») : cliquer n'importe où sur la carte ouvre
   le fichier. Ne concerne que les liens de documents (/document/,
   /menu-cantine/, .pdf) — une carte menant vers une page du site
   n'est pas modifiée, ni les cartes à liens multiples divergents.
   ========================================================= */
:is(.carte-blurb, .carte-fiche, .menus-cantine__carte, .documents-dynamiques__carte) {
  position: relative;
}
:is(.carte-blurb, .carte-fiche, .menus-cantine__carte, .documents-dynamiques__carte)
  :is(a[href*="/document/"], a[href*="/menu-cantine/"], a[href$=".pdf"], a[href$=".PDF"])::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* Affordance : la carte entière réagit au survol et rend visible
   le focus clavier du lien étendu (RGAA 10.7) */
:is(.carte-blurb, .carte-fiche, .menus-cantine__carte, .documents-dynamiques__carte):has(a[href*="/document/"], a[href*="/menu-cantine/"], a[href$=".pdf"], a[href$=".PDF"]) {
  transition: transform var(--transition), box-shadow var(--transition);
}
:is(.carte-blurb, .carte-fiche, .menus-cantine__carte, .documents-dynamiques__carte):has(a[href*="/document/"], a[href*="/menu-cantine/"], a[href$=".pdf"], a[href$=".PDF"]):hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 50px -18px rgba(20, 35, 35, .55);
}
:is(.carte-blurb, .carte-fiche, .menus-cantine__carte, .documents-dynamiques__carte):has(a:focus-visible) {
  outline: 3px solid var(--miel);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  :is(.carte-blurb, .carte-fiche, .menus-cantine__carte, .documents-dynamiques__carte) { transition: none; }
}

/* Cartes rendues cliquables par le script (documents sans lien d'origine) :
   même affordance que les cartes à lien étendu */
.carte-cliquable { transition: transform var(--transition), box-shadow var(--transition); }
.carte-cliquable:hover { transform: translateY(-3px); box-shadow: 0 22px 50px -18px rgba(20, 35, 35, .55); }
.carte-cliquable:focus-visible { outline: 3px solid var(--miel); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .carte-cliquable { transition: none; } }

/* Carrousel de l'accueil : lien « Voir tout l'agenda » et cartes
   d'évènement entièrement cliquables (motif « stretched link ») */
.agenda__tout { text-align: center; margin: 2.2rem 0 0; }
.agenda__tout .bouton { gap: .55rem; }

.evenement--agenda h3 a { text-decoration: none; color: inherit; }
.evenement--agenda h3 a::after { content: ""; position: absolute; inset: 0; }
.evenement--agenda:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 50px -18px rgba(0, 0, 0, .5);
}
.evenement--agenda { transition: transform var(--transition), box-shadow var(--transition); }
.evenement--agenda:has(a:focus-visible) { outline: 3px solid var(--miel); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .evenement--agenda { transition: none; } }

/* =========================================================
   18. Galeries photos administrables (locaux, réalisations…) —
   maçonnerie native (.galerie) ; ici : légendes et focus clavier
   ========================================================= */
.photos-galerie .galerie__item { position: relative; }
.photos-galerie .galerie__legende {
  display: block;
  background: #fff;
  font-family: "Merriweather", Georgia, serif;
  font-size: .88rem;
  color: #34545A;
  text-align: center;
  padding: .55rem .6rem;
}
.photos-galerie .galerie__item:focus-visible {
  outline: 3px solid var(--miel);
  outline-offset: 3px;
}

/* =========================================================
   19. Barre d'accessibilité Sienna — bas droite, charte du site
   Le positionnement passe par les variables CSS prévues par Sienna ;
   les couleurs violettes d'origine sont ramenées au vert pin / miel.
   ========================================================= */
:root {
  --asw-left: auto;
  /* L'angle bas droit est occupé par le cadenas tarteaucitron :
     le bouton d'accessibilité se place juste à sa gauche
     (24px de bord + 50px de citron natif + 14px d'écart). */
  --asw-right: 88px;
  --asw-bottom: 24px;
  --asw-menu-left: auto;
  --asw-menu-right: 0;
}
.asw-menu-btn {
  background: var(--pin) !important;
  box-shadow: 0 14px 34px -12px rgba(0, 0, 0, .55) !important;
  transition: transform .2s ease !important;
}
.asw-menu-btn:hover { transform: scale(1.06); }
.asw-menu-btn:focus-visible { outline: 3px solid var(--miel) !important; outline-offset: 3px; }
.asw-menu-header {
  background: var(--pin) !important;
}
.asw-btn.asw-selected {
  background: var(--pin) !important;
  border-color: var(--pin) !important;
  color: #fff !important;
}
.asw-btn:focus-visible { outline: 3px solid var(--miel) !important; outline-offset: 2px; }
.asw-footer a { color: var(--pin) !important; }
@media (max-width: 720px) {
  :root { --asw-right: 78px; --asw-bottom: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .asw-menu-btn { transition: none !important; }
  .asw-menu-btn:hover { transform: none; }
}

/* =========================================================
   RGPD — tarteaucitron habillé à la charte du site
   Palette : miel #F0C067, crème #FDF9F1, vert pin #22504B,
   pilules arrondies, Fraunces pour les titres.
   ========================================================= */

/* --- Gabarit d'attente de la carte (avant consentement) --- */
.carte-google.googlemaps_embed { min-height: 240px; background: var(--miel-doux); }
.carte-google .tac_activate {
  height: 100% !important;
  min-height: 240px;
  background: var(--sauge) !important;
  color: var(--encre) !important;
}
.carte-google .tac_activate .tac_float { color: var(--encre) !important; font-family: var(--police-texte) !important; }
#tarteaucitronRoot .tac_activate .tarteaucitronAllow,
.tac_activate .tarteaucitronAllow {
  background: var(--miel) !important;
  color: var(--encre) !important;
  border-radius: 999px !important;
  padding: .55rem 1.2rem !important;
  font-weight: 800 !important;
  border: 0 !important;
}
.carte-google iframe { display: block; width: 100%; height: 460px; border: 0; }

/* --- Base typographique --- */
#tarteaucitronRoot,
#tarteaucitronRoot * { font-family: var(--police-texte) !important; }
#tarteaucitronRoot .tarteaucitronH1,
#tarteaucitronRoot .tarteaucitronH2 { font-family: var(--police-titres) !important; font-weight: 600 !important; }

/* --- Bandeau principal de consentement --- */
#tarteaucitronRoot #tarteaucitronAlertBig {
  background: var(--creme) !important;
  color: var(--encre) !important;
  border: 1px solid var(--miel) !important;
  border-radius: var(--rayon) !important;
  box-shadow: var(--ombre) !important;
  padding: 2rem 2.2rem !important;
}
#tarteaucitronRoot #tarteaucitronAlertBig:before { color: var(--pin) !important; }
#tarteaucitronRoot #tarteaucitronDisclaimerAlert,
#tarteaucitronRoot #tarteaucitronDisclaimerAlert strong,
#tarteaucitronRoot #tarteaucitronPrivacyUrlDialog { color: var(--encre) !important; }
#tarteaucitronRoot .tarteaucitronCheck,
#tarteaucitronRoot .tarteaucitronCross { color: inherit !important; }

/* Voile derrière le bandeau : vert pin translucide plutôt que noir */
#tarteaucitronRoot #tarteaucitronBack { background: var(--pin-profond) !important; opacity: .55 !important; }

/* --- Boutons du bandeau : pilules, même gabarit que .bouton ---
   CNIL : « Tout accepter » et « Tout refuser » gardent le même poids visuel
   (mêmes dimensions, mêmes graisse et taille de police). */
#tarteaucitronRoot .tarteaucitronCTAButton,
#tarteaucitronRoot .tarteaucitronAllow,
#tarteaucitronRoot .tarteaucitronDeny,
#tarteaucitronRoot #tarteaucitronCloseAlert,
#tarteaucitronRoot #tarteaucitronPrivacyUrl,
#tarteaucitronRoot #tarteaucitronAllAllowed,
#tarteaucitronRoot #tarteaucitronAllDenied,
#tarteaucitronRoot #tarteaucitronSaveButton {
  font-weight: 800 !important;
  font-size: 1rem !important;
  padding: .8rem 1.5rem !important;
  border-radius: 999px !important;
  border: 2px solid transparent !important;
  cursor: pointer;
  transition: transform var(--transition), background var(--transition), box-shadow var(--transition);
  margin: .3rem .35rem !important;
}
#tarteaucitronRoot .tarteaucitronCTAButton:hover,
#tarteaucitronRoot .tarteaucitronAllow:hover,
#tarteaucitronRoot .tarteaucitronDeny:hover,
#tarteaucitronRoot #tarteaucitronCloseAlert:hover { transform: translateY(-2px); }

/* Accepter : miel (bandeau doré de la marque) */
#tarteaucitronRoot .tarteaucitronAllow,
#tarteaucitronRoot #tarteaucitronAllAllowed {
  background: var(--miel) !important;
  color: var(--encre) !important;
}
#tarteaucitronRoot .tarteaucitronAllow:hover,
#tarteaucitronRoot #tarteaucitronAllAllowed:hover { background: #E8B44F !important; }

/* Refuser : vert pin, aussi visible que l'acceptation */
#tarteaucitronRoot .tarteaucitronDeny,
#tarteaucitronRoot #tarteaucitronAllDenied {
  background: var(--pin) !important;
  color: var(--blanc) !important;
}
#tarteaucitronRoot .tarteaucitronDeny:hover,
#tarteaucitronRoot #tarteaucitronAllDenied:hover { background: var(--pin-profond) !important; }

/* Personnaliser : contour discret sur fond crème */
#tarteaucitronRoot #tarteaucitronCloseAlert,
#tarteaucitronRoot #tarteaucitronPrivacyUrl {
  background: transparent !important;
  color: var(--pin) !important;
  border-color: var(--sauge-vive) !important;
}
#tarteaucitronRoot #tarteaucitronCloseAlert:hover,
#tarteaucitronRoot #tarteaucitronPrivacyUrl:hover { background: var(--sauge) !important; }

/* Accessibilité : anneau de focus miel, comme le reste du site */
#tarteaucitronRoot button:focus-visible,
#tarteaucitronRoot a:focus-visible {
  outline: 3px solid var(--miel) !important;
  outline-offset: 3px !important;
}

/* --- Panneau de contrôle (personnalisation des services) --- */
#tarteaucitronRoot #tarteaucitron {
  border-radius: var(--rayon) !important;
  overflow: hidden;
  box-shadow: var(--ombre) !important;
}
#tarteaucitronRoot #tarteaucitronClosePanel {
  background: var(--pin) !important;
  color: var(--blanc) !important;
  border: 0 !important;
}
/* Ligne principale (Tout accepter / Tout refuser) : vert pin.
   Spécificité renforcée : l'élément porte aussi .tarteaucitronLine (crème). */
html body #tarteaucitronRoot #tarteaucitron #tarteaucitronInfo,
html body #tarteaucitronRoot #tarteaucitron .tarteaucitronMainLine {
  background: var(--pin) !important;
  border-color: var(--pin-profond) !important;
  color: var(--blanc) !important;
}
html body #tarteaucitronRoot #tarteaucitron .tarteaucitronMainLine .tarteaucitronName,
html body #tarteaucitronRoot #tarteaucitron .tarteaucitronMainLine .tarteaucitronName b,
html body #tarteaucitronRoot #tarteaucitron .tarteaucitronMainLine .tarteaucitronH2 { color: var(--blanc) !important; }
/* Titre du panneau : posé sur le fond pin */
#tarteaucitronRoot #tarteaucitron .tarteaucitronH1 { color: var(--blanc) !important; }
/* Sur fond pin, « Tout refuser » (pin lui aussi) reçoit un liseré clair */
html body #tarteaucitronRoot #tarteaucitron .tarteaucitronMainLine .tarteaucitronDeny,
html body #tarteaucitronRoot #tarteaucitron #tarteaucitronInfo + * .tarteaucitronDeny {
  border-color: rgba(255, 255, 255, .75) !important;
}
#tarteaucitronRoot #tarteaucitronServices { box-shadow: none !important; }

/* Lignes de services : crème, séparées par un filet sauge */
#tarteaucitronRoot #tarteaucitronServices .tarteaucitronLine:not(.tarteaucitronMainLine) {
  background: var(--creme) !important;
  border-bottom: 1px solid var(--sauge) !important;
}
#tarteaucitronRoot #tarteaucitronServices .tarteaucitronLine.tarteaucitronIsAllowed { border-left: 5px solid var(--sauge-vive) !important; }
#tarteaucitronRoot #tarteaucitronServices .tarteaucitronLine.tarteaucitronIsDenied { border-left: 5px solid var(--terracotta) !important; }
#tarteaucitronRoot .tarteaucitronName,
#tarteaucitronRoot .tarteaucitronListCookies,
#tarteaucitronRoot #tarteaucitronServices .tarteaucitronDetails { color: var(--encre) !important; }
#tarteaucitronRoot .tarteaucitronName a { color: var(--pin) !important; text-decoration: underline; }

/* Bandeau « cookies obligatoires » : fond miel doux */
html body #tarteaucitronRoot #tarteaucitron #tarteaucitronServices_mandatory .tarteaucitronLine {
  background: var(--miel-doux) !important;
  border-left: 5px solid var(--miel) !important;
}

/* Titres de sections du panneau */
#tarteaucitronRoot .tarteaucitronTitle,
#tarteaucitronRoot .tarteaucitronTitle button,
#tarteaucitronRoot .tarteaucitronTitle .asCatToggleBtn {
  background: transparent !important;
  color: var(--pin) !important;
  font-family: var(--police-titres) !important;
  font-weight: 600 !important;
}

/* --- Cadenas : icône seule (sans pastille), dans l'angle bas droit ---
   Taille native de tarteaucitron : image 50×50px, padding 8-10px.
   right 14px place le bord visible du citron à 24px de l'écran,
   comme le reste de l'interface. Le bouton d'accessibilité est
   décalé à sa gauche via --asw-right. */
#tarteaucitronRoot #tarteaucitronIcon {
  background: transparent !important;
  bottom: calc(var(--asw-bottom, 24px) - 10px) !important; /* compense padding + interligne */
  right: 14px !important;
  left: auto !important;
}
#tarteaucitronRoot #tarteaucitronIcon #tarteaucitronManager {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  transition: transform var(--transition);
}
#tarteaucitronRoot #tarteaucitronIcon #tarteaucitronManager img {
  /* Légère ombre portée pour rester lisible sur les fonds clairs du site */
  filter: drop-shadow(0 3px 6px rgba(44, 39, 33, .3));
}
#tarteaucitronRoot #tarteaucitronIcon #tarteaucitronManager:hover { transform: scale(1.06); }

/* --- Mobile --- */
@media (max-width: 640px) {
  #tarteaucitronRoot #tarteaucitronAlertBig { padding: 1.4rem 1.2rem !important; }
}
@media (max-width: 720px) {
  /* 14px de bord visible sur mobile, comme le bouton d'accessibilité */
  #tarteaucitronRoot #tarteaucitronIcon { right: 4px !important; }
}

/* --- Mouvement réduit --- */
@media (prefers-reduced-motion: reduce) {
  #tarteaucitronRoot * { transition: none !important; }
  #tarteaucitronRoot .tarteaucitronCTAButton:hover,
  #tarteaucitronRoot #tarteaucitronManager:hover { transform: none !important; }
}


/* =========================================================
   Lightbox des galeries photos — visionneuse plein écran
   ========================================================= */
body.lightbox-ouverte { overflow: hidden; }
.lightbox {
  position: fixed; inset: 0;
  z-index: 100000;
  background: rgba(22, 58, 54, .93); /* vert pin profond translucide */
  display: flex; align-items: center; justify-content: center;
  padding: 3.2rem 5.2rem;
}
.lightbox[hidden] { display: none; }
.lightbox__cadre { margin: 0; max-width: 100%; max-height: 100%; text-align: center; }
.lightbox__image {
  max-width: min(1600px, 100%);
  max-height: 82vh;
  width: auto; height: auto;
  border-radius: 12px;
  box-shadow: 0 44px 100px -34px rgba(0, 0, 0, .8);
}
.lightbox__legende {
  color: #fff;
  font-family: "Merriweather", Georgia, serif;
  font-size: 1.05rem;
  margin-top: .9rem;
}
.lightbox__compteur {
  position: absolute;
  top: 1.1rem; left: 50%;
  transform: translateX(-50%);
  margin: 0;
  color: rgba(255, 255, 255, .85);
  font-weight: 700;
  letter-spacing: .06em;
}
/* Boutons : pastilles miel, cohérentes avec les flèches du site */
.lightbox__fermer, .lightbox__fleche {
  position: absolute;
  display: grid; place-items: center;
  width: 52px; height: 52px;
  border: 0; border-radius: 50%;
  background: var(--miel);
  color: var(--encre);
  cursor: pointer;
  box-shadow: 0 14px 34px -12px rgba(0, 0, 0, .55);
  transition: transform var(--transition), background var(--transition);
}
.lightbox__fermer:hover, .lightbox__fleche:hover { background: #E6B04B; transform: scale(1.07); }
.lightbox__fermer:focus-visible, .lightbox__fleche:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.lightbox__fermer { top: 1.1rem; right: 1.1rem; }
.lightbox__fleche--prec { left: 1.4rem; top: 50%; transform: translateY(-50%); }
.lightbox__fleche--suiv { right: 1.4rem; top: 50%; transform: translateY(-50%); }
.lightbox__fleche--prec:hover { transform: translateY(-50%) scale(1.07); }
.lightbox__fleche--suiv:hover { transform: translateY(-50%) scale(1.07); }

@media (max-width: 640px) {
  .lightbox { padding: 3.6rem .8rem 1rem; }
  .lightbox__fermer, .lightbox__fleche { width: 44px; height: 44px; }
  .lightbox__fleche--prec { left: .5rem; }
  .lightbox__fleche--suiv { right: .5rem; }
  .lightbox__image { max-height: 74vh; }
}
@media (prefers-reduced-motion: reduce) {
  .lightbox__fermer, .lightbox__fleche { transition: none; }
  .lightbox__fermer:hover { transform: none; }
  .lightbox__fleche--prec:hover, .lightbox__fleche--suiv:hover { transform: translateY(-50%); }
}