/*
Theme Name: La Pierre Full
Theme URI: https://mairie-lapierre.fr
Description: Variante "plein largeur" du thème officiel de la Mairie de La Pierre, pour comparaison avant validation par les élus. Même charte graphique que La Pierre Mairie, mais sections en bandes de couleur pleine largeur sur la page d'accueil.
Author:
Template: kadence
Version: 1.0.66
Text Domain: lapierre-full
*/

/* ============================================================
   1. TOKENS — palette, typographie
   ============================================================ */
:root{
  --lp-ardoise:       #0F6FDE;
  --lp-ardoise-dark:  #0A4F9E;
  --lp-sapin:         #16A34A;
  --lp-sapin-dark:    #0F7A37;
  --lp-pierre:        #DBE6D3;
  --lp-pierre-dark:   #B9C9AC;
  --lp-paper:         #FAF8F3;
  --lp-ink:           #26302A;
  --lp-ink-soft:      #5C6B60;
  --lp-wood:          #EA580C;
  --lp-wood-dark:     #B23A0C;
  --lp-line:          rgba(38,48,42,0.12);

  --lp-font-display: 'Fraunces', Georgia, serif;
  --lp-font-body:    'Public Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --lp-font-mono:    'IBM Plex Mono', Consolas, monospace;
}

/* ============================================================
   2. BASE — remplace les réglages Sahifa par la nouvelle charte
   ============================================================ */
body{
  background: var(--lp-paper);
  color: var(--lp-ink);
  font-family: var(--lp-font-body);
  line-height: 1.6;
}
h1, h2, h3, h4, h5, h6,
.entry-title, .kt-blocks-accordion-header{
  font-family: var(--lp-font-display) !important;
  font-weight: 600;
  color: var(--lp-ink);
  letter-spacing: -0.01em;
}
a{ color: var(--lp-ardoise); }
a:hover{ color: var(--lp-ardoise-dark); }

/* Boutons Kadence / Gutenberg — inclut input[type="submit"] pour que
   les formulaires natifs (Contact Form 7...) suivent la même charte
   pilule/ardoise que les boutons Gutenberg plutôt qu'un rectangle
   Kadence par défaut. */
.wp-block-button__link,
.kt-button,
button[type="submit"],
input[type="submit"]{
  background: var(--lp-ardoise) !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  font-family: var(--lp-font-body) !important;
  padding: 12px 26px !important;
  border: none !important;
  transition: transform .15s ease, box-shadow .15s ease;
  box-shadow: 0 4px 14px rgba(15,111,222,.32);
}
.wp-block-button__link:hover,
.kt-button:hover,
input[type="submit"]:hover{
  background: var(--lp-ardoise-dark) !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(15,111,222,.4);
}
.wp-block-button.is-style-outline .wp-block-button__link{
  color: var(--lp-ardoise) !important;
  border-color: var(--lp-ardoise) !important;
  background: transparent !important;
  box-shadow: none;
}

/* ============================================================
   3. UTILITAIRES — étiquette "eyebrow" façon tampon officiel
   ============================================================ */
.lp-eyebrow{
  font-family: var(--lp-font-mono);
  font-size: 11px;
  letter-spacing: .07em;
  text-transform: uppercase;
  /* --lp-wood-dark et non --lp-wood : le orange de base n'offre qu'un
     contraste d'environ 3:1 sur le fond teinté de l'étiquette, sous le
     minimum RGAA/WCAG AA de 4,5:1 pour du texte de cette taille — même
     défaut que la variante is-sapin corrigeait déjà via --lp-sapin-dark. */
  color: var(--lp-wood-dark);
  background: rgba(234,88,12,.12);
  display: inline-block;
  border-radius: 999px;
  padding: 5px 14px;
  margin-top: 25px;
  margin-bottom: 10px !important;
}
/* Le padding-top (plutôt qu'un margin) garantit l'espace au-dessus même
   quand l'élément précédent a une marge nulle (pas de fusion de marges CSS) */
.lp-eyebrow + .wp-block-group .wp-block-heading,
.lp-eyebrow + .wp-block-heading{
  margin-top: 0 !important;
}
.lp-eyebrow.is-sapin,
.lp-eyebrow-sapin{ color: var(--lp-sapin-dark) !important; background: rgba(22,163,74,.12) !important; }
.lp-eyebrow.is-inverse,
.lp-eyebrow-inverse{ color: #fff !important; background: rgba(255,255,255,.16) !important; }

/* ============================================================
   4. SIGNATURE — motif "pierre appareillée" (fil rouge du blason)
   À utiliser comme séparateur de section : ajoute la classe
   "lp-stone-rule" à un bloc Spacer ou Group Kadence.
   ============================================================ */
.lp-stone-rule{
  height:1px;
  background:var(--lp-pierre-dark);
  opacity:1;
  border:none;
  margin-top: 20px;
  margin-bottom: 25px;
}

/* ============================================================
   5. BANDEAU "INFOS PRATIQUES"
   À appliquer sur un bloc Row Layout / Container Kadence.
   ============================================================ */
.lp-infos-strip{
  background: var(--lp-sapin);
  color: #fff;
  padding: 16px 24px;
}
.lp-infos-strip .lp-infos-item .label{
  font-family: var(--lp-font-mono); font-size: 10.5px; letter-spacing:.08em;
  text-transform: uppercase; opacity:.75; display:block;
}
.lp-infos-strip .lp-infos-item .val{ font-weight:600; font-size:14.5px; }
.lp-infos-strip .lp-infos-item .val a{
  color: inherit;
  text-decoration: none;
}
.lp-infos-strip .lp-infos-item .val a:hover{
  text-decoration: underline;
}

.lp-page-head{
  background: linear-gradient(115deg, var(--lp-ardoise-dark) 0%, var(--lp-ardoise) 65%, var(--lp-sapin-dark) 100%);
  background-size: 200% 200%;
  color: #fff;
  padding: 42px 24px;
  position: relative;
}
.lp-page-head h1, .lp-page-head h2{ color:#fff !important; font-size:32px; position: relative; }

/* ============================================================
   6. CARDS — actualités (bloc Posts / Advanced Query Kadence)
   Ajoute "lp-card" au conteneur de query, "lp-card-small" pour
   les variantes compactes (grilles Vie communale / Communauté
   de communes).
   ============================================================ */
/* Deux usages coexistent sur le site : "lp-card" posé sur un vrai bloc
   Query (Accueil, Bulletin municipal) où le style doit s'appliquer à
   CHAQUE article individuellement — sinon le survol se déclenche sur
   tous les articles en même temps — et "lp-card" posé à la main sur
   un simple bloc Group (Le Village, Conseil municipal, Associations),
   où c'est le conteneur lui-même qui doit porter le style. */
.wp-block-query.lp-card{
  background: transparent;
  border: none;
  overflow: visible;
}
.wp-block-query.lp-card .wp-block-post-template{ gap: 20px; }
.wp-block-query.lp-card .wp-block-post-template > li,
.wp-block-query.lp-card .wp-block-post-template > div{
  background:#fff;
  border:1px solid var(--lp-line);
  border-radius:12px;
  overflow:hidden;
  transition: transform .15s ease, box-shadow .15s ease;
}
.wp-block-query.lp-card .wp-block-post-template > li:hover,
.wp-block-query.lp-card .wp-block-post-template > div:hover{
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(38,48,42,.1);
}
.wp-block-group.lp-card{
  position: relative;
  background:#fff;
  border:1px solid var(--lp-line);
  border-radius:12px;
  overflow:hidden;
  transition: transform .15s ease, box-shadow .15s ease;
}
.lp-card-cover{
  position: absolute;
  inset: 0;
  z-index: 1;
}
.wp-block-group.lp-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(38,48,42,.1);
}
.lp-card .lp-card-date{
  font-family: var(--lp-font-mono); font-size:11px; color: var(--lp-wood-dark);
  letter-spacing:.04em; text-transform:uppercase;
  padding: 14px 18px 0;
  margin: 0;
}
.lp-card h3, .lp-card h4{ font-size:19px; line-height:1.28; }
.lp-card.lp-card-small h3, .lp-card.lp-card-small h4{ font-size:16px; }
.lp-card p{ font-size:13.8px; color: var(--lp-ink-soft); }
.lp-card-link{ display:block; color:inherit; text-decoration:none; }
.lp-card-link:hover{ color:inherit; }

.lp-card .wp-block-post-title{
  margin: 6px 0 12px;
  padding: 0 18px;
}
.lp-card.lp-card-small .wp-block-post-title{
  padding: 0 18px 18px;
}
.lp-card .wp-block-post-excerpt{
  margin: 0;
  padding: 0 18px 6px;
}
.lp-card .wp-block-post-excerpt__excerpt,
.lp-card .wp-block-post-excerpt p{
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
}
.lp-read-more{
  display: block;
  padding: 0 18px 28px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--lp-ardoise) !important;
  text-decoration: none !important;
}
.lp-read-more:hover{ color: var(--lp-ardoise-dark) !important; }

/* Photo d'aperçu : même hauteur partout, jamais déformée */
.lp-card .wp-block-post-featured-image,
.lp-panel .wp-block-post-featured-image{
  margin: 0;
}
.lp-card .wp-block-post-featured-image img,
.lp-panel .wp-block-post-featured-image img{
  width: 100%;
  height: 220px;
  object-fit: cover;
  object-position: center;
  display: block;
}
/* Compense les +10px de padding sous Lire la suite ci-dessus : la carte
   ne grandit pas, seule l'image rétrécit d'autant. Scopé à la lame À la
   une (.lp-flash-row) pour ne pas toucher Vie communale, qui partage la
   même règle de base. */
.lp-flash-row .wp-block-query.lp-card .wp-block-post-featured-image img{
  height: 196px;
}
.lp-flash-row .wp-block-query.lp-card .wp-block-post-template > li,
.lp-flash-row .wp-block-query.lp-card .wp-block-post-template > div{
  max-height: 420px;
}

/* "Vie communale" sur l'accueil — 5 articles : une ligne de 2, une
   ligne de 3, même hauteur de carte partout (grille à 6 colonnes,
   les 2 premières cartes prennent une demi-largeur, les 3 suivantes
   un tiers — même principe que .lp-listing-grid). */
.lp-card-5grid .wp-block-post-template{
  display: grid !important;
  grid-template-columns: repeat(6, 1fr) !important;
  gap: 20px;
}
.lp-card-5grid .wp-block-post-template > li:nth-child(1),
.lp-card-5grid .wp-block-post-template > li:nth-child(2){ grid-column: span 3; }
.lp-card-5grid .wp-block-post-template > li:nth-child(3),
.lp-card-5grid .wp-block-post-template > li:nth-child(4),
.lp-card-5grid .wp-block-post-template > li:nth-child(5){ grid-column: span 2; }
.lp-card-5grid .wp-block-post-template > li{
  height: 330px;
  display: flex;
  flex-direction: column;
}
.lp-card-5grid .wp-block-post-featured-image{ flex-shrink: 0; }
/* -webkit-line-clamp s'est révélé peu fiable ici (conflit avec
   text-wrap:balance sur les h1-h4, puis avec le lien du titre forcé en
   inline-block par WordPress) : plutôt que d'empiler les contournements,
   solution plus robuste — une hauteur figée à exactement 2 lignes
   (2 x 20,48px de line-height) avec overflow:hidden. La coupe tombe
   pile à la fin de la 2e ligne, jamais en plein milieu d'un caractère. */
.lp-card-5grid .wp-block-post-title{
  /* 2 lignes de texte (2 x 20,48px) + le padding-bottom de 18px déjà
     défini plus haut (box-sizing:border-box, donc inclus ici) — sinon
     à peine la place d'1 ligne de texte reste disponible. */
  max-height: 60px;
  overflow: hidden;
}
@media (max-width: 680px){
  .lp-card-5grid .wp-block-post-template{ grid-template-columns: 1fr !important; }
  .lp-card-5grid .wp-block-post-template > li{ grid-column: span 1 !important; height: auto; }
}

/* Kadence pose "has-custom-border img{border-style:solid}" sans couleur
   ni épaisseur : le navigateur retombe sur ses valeurs par défaut
   (medium ≈ 3px, currentColor ≈ noir). On force un liseré fin et clair. */
.has-custom-border img{
  border-width: 1px;
  border-color: var(--lp-line);
}

/* ============================================================
   7. AGENDA — pour The Events Calendar
   ============================================================ */
.lp-agenda-list{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:1px;
  background: var(--lp-line);
  border:1px solid var(--lp-line);
  border-radius:14px;
  overflow:hidden;
}
@media (max-width: 640px){
  .lp-agenda-list{ grid-template-columns: 1fr; }
}
.lp-agenda-row{ display:flex; align-items:center; gap:22px; padding:17px 24px; background:#fff; }
.lp-agenda-row:hover{ background: var(--lp-paper); }
.lp-agenda-date{ width:58px; flex-shrink:0; text-align:center; }
.lp-agenda-date .day{ font-family: var(--lp-font-display); font-weight:700; font-size:24px; color: var(--lp-ardoise); line-height:1; }
.lp-agenda-date .month{ font-family: var(--lp-font-mono); font-size:10px; text-transform:uppercase; letter-spacing:.07em; color: var(--lp-ink-soft); }
.lp-agenda-info{ flex:1; min-width:0; }
.lp-agenda-tag{
  display: block;
  width: fit-content;
  font-family: var(--lp-font-mono);
  font-size: 9.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 2px 9px;
  border-radius: 999px;
  margin-bottom: 5px;
  background: var(--lp-pierre);
  color: var(--lp-ink-soft);
}
.lp-agenda-tag-conseil{ background: rgba(15,111,222,.12); color: var(--lp-ardoise); }
.lp-agenda-tag-commemoration{ background: rgba(38,48,42,.1); color: var(--lp-ink-soft); }
.lp-agenda-tag-spectacle{ background: rgba(234,88,12,.12); color: var(--lp-wood-dark); }
.lp-agenda-tag-vie-associative{ background: rgba(124,58,237,.13); color: #7C3AED; }
.lp-agenda-info a{ text-decoration:none; }
.lp-agenda-info strong{
  font-family: var(--lp-font-display); font-weight:600; font-size:15.5px; color: var(--lp-ink);
}
.lp-agenda-info a:hover strong{ color: var(--lp-ardoise); }
.lp-agenda-meta{
  font-size:12.5px; color: var(--lp-ink-soft); margin-top:3px;
}
.lp-agenda-empty{
  padding:20px 24px; text-align:center; color: var(--lp-ink-soft); font-size:14px;
  background:#fff; border:1px solid var(--lp-line); border-radius:14px;
}
/* Habillage léger des vues natives de The Events Calendar pour rester dans la charte */
.tribe-events .tribe-events-calendar-list__event-title a{ color: var(--lp-ink) !important; font-family: var(--lp-font-display) !important; }
.tribe-events-schedule, .tribe-event-schedule-details{ font-family: var(--lp-font-mono) !important; color: var(--lp-ink-soft) !important; }

/* Masque la barre de recherche et la pagination de la liste, mais garde
   le sélecteur de vue (mois / jour / liste) et la barre de navigation
   de dates (mois/jour précédent-suivant) visibles */
.tribe-events-c-events-bar__search-button,
.tribe-events-c-events-bar__search-container,
.tribe-events-c-search,
.tribe-events-c-messages,
.tribe-events-calendar-list__event-datetime-tag,
.tribe-events-calendar-list__month-separator,
.tribe-events-c-nav,
.tribe-events-calendar-list__nav-pagination{
  display: none !important;
}
/* La case "À venir" n'a de sens qu'en vue Liste (plage de dates) ;
   en vue Mois/Jour c'est elle qui affiche le mois/jour courant, donc
   on ne la masque que sur la vue Liste. */
.tribe-events-view--list .tribe-events-c-top-bar__datepicker{
  display: none !important;
}
/* Case qui affiche la date/le mois courant (Jour, Mois, Liste) : fond
   clair et texte de taille normale, plutôt que la règle générique
   .tribe-events-c-top-bar__datepicker-button ci-dessous (partagée avec
   de vrais boutons d'action) qui lui donnait par erreur un gros fond
   bleu plein — pensé pour un bouton, pas pour ce simple intitulé. */
.tribe-events-c-top-bar__datepicker-button{
  background: #F7FAFC !important;
  border-color: #F7FAFC !important;
  border-radius: 6px;
  padding: 6px 12px;
  color: var(--lp-ink) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
}

/* Réhabille chaque ligne d'événement façon carte du site — seulement
   sur .event-row (le conteneur externe) : .tribe-events-calendar-list__event
   est imbriqué À L'INTÉRIEUR de .event-row (à côté de l'étiquette de
   date), donc lui appliquer la même bordure/fond/padding créait une
   seconde boîte imbriquée qui chevauchait visuellement la première,
   surtout étroit (mobile). */
.tribe-events-calendar-list__event-row{
  background: #fff !important;
  border: 1px solid var(--lp-line) !important;
  border-radius: 6px !important;
  padding: 16px 20px !important;
  margin-bottom: 12px !important;
}
.tribe-events-calendar-list__event{
  background: none !important;
  border: none !important;
  padding: 0 !important;
}
.tribe-events-calendar-list__event-row:hover{ background: var(--lp-paper) !important; }
.tribe-events-calendar-list__event-title{ margin: 0 0 4px !important; }
.tribe-events-calendar-list__event-title a{
  font-size: 16px !important;
  font-weight: 600 !important;
}
.tribe-events-calendar-list__event-datetime{
  font-family: var(--lp-font-mono) !important;
  font-size: 11.5px !important;
  color: var(--lp-ardoise) !important;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.tribe-events-calendar-list__event-description{
  font-size: 13.5px !important;
  color: var(--lp-ink-soft) !important;
  margin-top: 6px !important;
}
.tribe-common .tribe-common-c-btn,
.tribe-events-c-search__button{
  background: var(--lp-ardoise) !important; border-color: var(--lp-ardoise) !important;
}

/* Étiquette de date de la liste d'événements : ajoute le mois abrégé
   à côté du jour (ex. "MAR 1 SEPT.") — voir tribe/events/v2/list/event/date-tag.php */
.tribe-events-calendar-list__event-date-tag{
  display: flex !important;
  flex-direction: column;
  align-items: center;
}
.tribe-events-calendar-list__event-date-tag-weekday,
.tribe-events-calendar-list__event-date-tag-month{
  font-family: var(--lp-font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--lp-ink-soft);
}
.tribe-events-calendar-list__event-date-tag-month{
  margin-top: -2px;
}

/* ============================================================
   8. PANNEAU BEIGE — "La Mairie vous informe" / infos pratiques
   ============================================================ */
.lp-panel{ background: var(--lp-pierre); border-radius:14px; padding:32px; }
.lp-panel h5{
  font-family: var(--lp-font-mono); font-size:11px; text-transform:uppercase;
  letter-spacing:.07em; color: var(--lp-sapin-dark); margin-bottom:10px;
}
.lp-callout{
  display:flex; gap:14px; background:#FBF3D9; border:1px solid #E7D896;
  border-radius:14px; padding:18px 20px; align-items:flex-start;
}
.lp-callout p{ font-size:13.8px; color:#5C5223; margin:0; }

/* ============================================================
   9. TROMBINOSCOPE — page "La Mairie"
   ============================================================ */
.lp-elu{ text-align:center; }
/* !important nécessaire : Kadence a sa propre règle .single-content
   figure.wp-block-image{margin-bottom:...} qui, avec un sélecteur plus
   spécifique (deux classes + un élément) que le nôtre (deux classes),
   l'emporterait sinon et imposerait 32px d'écart photo→nom au lieu de
   la valeur voulue ici. */
.lp-elu .lp-elu-photo{
  box-sizing: border-box;
  width:104px; height:104px; border-radius:50%; overflow:hidden; margin:0 auto 12px !important;
  border:1px solid var(--lp-line);
}
.lp-elu .lp-elu-photo img{ width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
.lp-elu .lp-elu-name{ font-family: var(--lp-font-display); font-weight:600; font-size:14.5px; margin:0 0 2px; line-height:1.25; }
.lp-elu .lp-elu-role{ font-size:11.5px; color: var(--lp-ink-soft); margin:0; line-height:1.3; }
.lp-elu .lp-elu-lastname{ display:block; text-transform:uppercase; }

/* Variante "grande" (photos plus grandes, visages bien visibles) —
   dimensionnée pour tenir sur 5 colonnes par ligne, avec un espacement
   resserré entre les personnes (gap 8px au lieu des 2em par défaut de
   Kadence, via .lp-elu-grid) : (842 - 2*32 padding - 4*8 gaps) / 5 ≈ 148px.
   box-sizing:border-box sur .lp-elu-photo : la bordure est comprise
   dans la largeur déclarée, pas ajoutée par-dessus. */
/* ============================================================
   DÉCHÈTERIES — cartes adresse/horaires en tête de page
   ============================================================ */
.lp-dechet-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 20px 0 28px;
}
@media (max-width: 700px){
  .lp-dechet-grid{ grid-template-columns: 1fr; }
}
.lp-dechet-card h4{ margin: 0 0 8px; font-size: 17px; }
.lp-dechet-address{ font-size: 13.8px; color: var(--lp-ink-soft); margin: 0 0 12px; }
.lp-dechet-hours{ font-size: 13.5px; margin: 0 0 8px; }
.lp-dechet-hours strong{ display: block; margin-bottom: 2px; }
.lp-dechet-note{
  font-size: 12px;
  color: var(--lp-wood-dark);
  background: rgba(234,88,12,.1);
  border-radius: 8px;
  padding: 7px 10px;
  margin-top: 10px;
}

/* ============================================================
   PCS — trombinoscope avec coordonnées (page à accès restreint)
   ============================================================ */
.lp-pcs-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 16px;
  margin: 20px 0;
}
.lp-pcs-card{
  background: #fff;
  border: 1px solid var(--lp-line);
  border-radius: 14px;
  padding: 18px 14px;
  text-align: center;
}
.lp-pcs-card .lp-elu-photo{ width: 90px; height: 90px; margin: 0 auto 8px !important; }
.lp-pcs-contacts{
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: center;
}
.lp-pcs-contacts a{
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--lp-ink) !important;
  text-decoration: none !important;
}
.lp-pcs-contacts a:hover{ color: var(--lp-ardoise) !important; }
.lp-pcs-org{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin: 20px 0;
}
.lp-pcs-org-box{
  background: var(--lp-pierre);
  border-radius: 10px;
  padding: 12px 20px;
  font-weight: 700;
  font-size: 13.5px;
  text-align: center;
}
.lp-pcs-org-cells{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  width: 100%;
}
.lp-pcs-org-cells .lp-pcs-org-box{
  background: #fff;
  border: 1px solid var(--lp-line);
  font-weight: 500;
  flex: 1 1 190px;
}
.lp-elu-large .lp-elu-photo{ width:148px; height:148px; margin:0 auto 3px !important; }
.lp-elu-large .lp-elu-name{ font-size:15.5px; }
.lp-elu-large .lp-elu-role{ font-size:12px; }
/* Marge resserrée photo→nom (même personne, doivent coller), marge
   large entre lignes (rangée suivante) : sans ça, le rôle d'une
   personne semble associé aux photos de la rangée du dessous. */
/* flex-wrap + flex-basis à 5 colonnes : depuis que les 14 conseillers
   sont dans UNE seule grille continue (plus 3 blocs séparés de 5+5+4,
   qui provoquaient une ligne orpheline à chaque fin de bloc sur mobile),
   le wrap doit être géré ici plutôt que par la limite naturelle de
   chaque bloc à ≤5 colonnes. */
.lp-elu-grid.wp-block-columns{
  gap: 8px;
  margin-bottom: 32px !important;
  flex-wrap: wrap !important;
}
.lp-elu-grid.wp-block-columns > .wp-block-column{
  flex-basis: calc(20% - 6.4px) !important;
  width: calc(20% - 6.4px) !important;
  flex-shrink: 0 !important;
}

/* Sur mobile, WordPress empile les colonnes une par ligne par défaut :
   on force 2 conseillers par ligne à la place, et on resserre l'espace
   photo→nom (encore un peu par rapport aux 3px du desktop) pour que le
   nom colle davantage à la photo sur les petits écrans. */
@media screen and (max-width: 781px){
  .lp-elu-grid.wp-block-columns{ flex-wrap: wrap !important; }
  .lp-elu-grid.wp-block-columns > .wp-block-column{
    flex-basis: calc(50% - 4px) !important;
    width: calc(50% - 4px) !important;
    flex-shrink: 0 !important;
    margin-bottom: 20px;
  }
  .lp-elu-large .lp-elu-photo{ margin-bottom: 0 !important; }
  .lp-elu-large .lp-elu-name{ margin-top: 6px; }
}

/* ============================================================
   10. FOOTER
   ============================================================ */
.site-footer, footer.site-footer, #footer{
  background: var(--lp-ardoise-dark) !important;
  color: #DCE2E6 !important;
}
.site-footer a, footer.site-footer a{ color:#DCE2E6 !important; }
.site-footer a:hover, footer.site-footer a:hover{ color:#fff !important; }
/* Petit rappel historique : l'ancien logo du site (le blason de la
   commune, sur fond transparent avec des traits noirs) illisible tel
   quel sur le fond bleu foncé du footer — d'où le petit cartouche clair
   qui l'entoure. Voir le theme_mod footer_html_content (Personnaliser
   > Pied de page > Barre de pied de page). */
.lp-footer-blason{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.lp-footer-blason img{
  display: block;
  background: #fff;
  border-radius: 6px;
  padding: 5px;
  flex-shrink: 0;
}
.lp-footer-blason-text{ text-align: left; }
.lp-footer-copyright{ margin: 0 0 4px; }
.lp-footer-links{ margin: 0; }
.lp-footer-partner{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,.12);
}
.lp-footer-partner-label{
  font-family: var(--lp-font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #93A3B0;
}
.lp-footer-partner-logo{ display:block; height: 28px; width: auto; }
/* Le logo de la Région (fond clair, texte gris foncé) est illisible
   tel quel sur le fond bleu foncé du footer — même traitement que le
   blason de la commune : un petit cartouche blanc autour. */
.lp-footer-partner-logo-chip{ background:#fff; border-radius:4px; padding:3px 8px; }
@media (max-width: 480px){
  .lp-footer-partner{ flex-direction: column; gap: 8px; }
}
.site-footer h1, .site-footer h2, .site-footer h3, .site-footer h4, .site-footer h5{
  color:#93A3B0 !important; font-family: var(--lp-font-mono) !important; font-size:11.5px !important;
  text-transform:uppercase; letter-spacing:.08em;
}

/* ============================================================
   12. ARCHIVE COMPTES-RENDUS — accordéons par année, liste compacte
   ============================================================ */
.lp-cr-year{
  border-bottom: 1px solid var(--lp-line);
  padding: 14px 0;
}
.lp-cr-year summary{
  font-family: var(--lp-font-display);
  font-weight: 600;
  font-size: 19px;
  cursor: pointer;
  color: var(--lp-ink);
  list-style: none;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.lp-cr-year summary::-webkit-details-marker{ display:none; }
.lp-cr-year summary::before{
  content: "›";
  display: inline-block;
  transform: rotate(0deg);
  transition: transform .15s ease;
  color: var(--lp-ardoise);
  font-size: 20px;
  width: 14px;
}
.lp-cr-year[open] summary::before{ transform: rotate(90deg); }
.lp-cr-count{
  font-family: var(--lp-font-mono);
  font-size: 12px;
  font-weight: 400;
  color: var(--lp-ink-soft);
}
.lp-cr-list{
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
}
.lp-cr-list li{
  padding: 7px 0;
  border-bottom: 1px solid var(--lp-line);
  font-size: 13.5px;
  line-height: 1.5;
}
.lp-cr-list li:last-child{ border-bottom: none; }
.lp-cr-list a{
  color: var(--lp-ardoise);
  font-weight: 600;
  white-space: nowrap;
  margin-right: 10px;
}
.lp-cr-list a:hover{ text-decoration: underline; }
.lp-cr-topics{
  color: var(--lp-ink-soft);
}
@media (max-width: 600px){
  .lp-cr-list li{ display: flex; flex-direction: column; gap: 2px; }
}
@media (max-width: 860px){
  .lp-infos-strip{ text-align:center; }
  .lp-page-head h1, .lp-page-head h2{ font-size:26px; }
}

/* ============================================================
   13. PHOTO DE GROUPE (page Conseil municipal)
   ============================================================ */
.lp-cr-photo img{
  box-shadow: 0 4px 20px rgba(38,48,42,0.12);
}
.lp-cr-photo figcaption{
  font-family: var(--lp-font-mono);
  font-size: 12px;
  color: var(--lp-ink-soft);
  text-align: center;
  margin-top: 10px;
}

/* ============================================================
   14. BANDEAU D'ALERTE — info chaude, activable depuis le Personnaliseur
   ============================================================ */
.lp-alert-banner{
  background: var(--lp-wood);
  border-bottom: 1px solid #B8460A;
}
.lp-alert-inner{
  max-width: 1180px;
  margin: 0 auto;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}
/* Icône et message regroupés dans un même bloc flex (voir alert-banner.js) :
   sinon, sur mobile, l'icône et le message sont deux enfants flex distincts
   du même parent et peuvent se retrouver chacun sur leur propre ligne
   (l'icône seule tout en haut) dès que le message est trop long pour tenir
   à côté d'elle. */
.lp-alert-text{
  display: flex;
  align-items: center;
  gap: 8px;
}
.lp-alert-icon{
  font-size: 16px;
  flex-shrink: 0;
}
.lp-alert-message{
  font-size: 14px;
  font-weight: 600;
  color: #fff;
}
.lp-alert-link{
  font-size: 13.5px;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.6);
  white-space: nowrap;
}
.lp-alert-link:hover{ border-bottom-color: #fff; }
.lp-alert-close{
  background: none;
  border: none;
  font-size: 20px;
  line-height: 1;
  color: #fff;
  cursor: pointer;
  padding: 0 0 0 8px;
  opacity: .75;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
.lp-alert-close:hover{ opacity: 1; }
/* Sur mobile (Safari/Chrome), un bouton tapé garde par défaut un halo de
   surbrillance tactile bleuté tant qu'on ne touche pas ailleurs — sans
   rapport avec un vrai style :hover du site, mais visuellement ça y
   ressemblait ("fond bleu du hover desktop"). */
.lp-alert-close:focus{ background: none; outline: none; }
@media (max-width: 600px){
  .lp-alert-inner{ padding: 10px 16px; }
  .lp-alert-message{ font-size: 13px; }
}

/* ============================================================
   15. LIENS "VOIR TOUT" à côté des titres de section
   ============================================================ */
.lp-see-all{
  margin: 0;
  align-self: flex-end;
}
.lp-section-head{
  gap: 16px;
  margin-bottom: 25px !important;
}
.lp-section-head .wp-block-heading{ margin: 0; line-height: 1; }
.lp-section-head .lp-see-all{ align-self: flex-end; }
.lp-see-all a{
  font-size: 13.5px;
  font-weight: 600;
  color: var(--lp-ardoise);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  white-space: nowrap;
}
.lp-see-all a:hover{
  border-bottom-color: var(--lp-ardoise-dark);
  color: var(--lp-ardoise-dark);
  border-color: var(--lp-ardoise-dark);
}
@media (max-width: 600px){
  .lp-see-all{ display:none; }
}

/* ============================================================
   16. ESPACE HEADER → PREMIER BLOC (toutes les pages)
   Deux bandes distinctes entre le header et le contenu : 45px de
   la couleur de fond du site (.content-wrap, hors de la carte
   blanche .entry), puis 30px de blanc (.entry-content-wrap, à
   l'intérieur de la carte .entry) avant le début du contenu.
   Sur les pages événement (The Events Calendar), il n'y a pas de
   .content-wrap : c'est .tribe-events-pg-template qui joue ce rôle
   de conteneur transparent avant la carte blanche .entry.
   ============================================================ */
.content-area,
#content,
.site-main,
.entry-content{
  padding-top: 0 !important;
  margin-top: 0 !important;
}
.content-wrap,
.tribe-events-pg-template{
  padding-top: 45px !important;
}
.entry-content-wrap{
  padding-top: 30px !important;
}
.entry-content > *:first-child,
.wp-block-post-content > *:first-child{
  margin-top: 0 !important;
}

/* ============================================================
   17. LISTE DE LIENS UTILES (panneau "Démarches & liens utiles")
   ============================================================ */
.lp-link-list{
  list-style: none;
  margin: 0;
  padding: 0;
}
.lp-link-list li{
  border-bottom: 1px solid var(--lp-pierre-dark);
  padding: 9px 0;
}
.lp-link-list li:last-child{ border-bottom: none; }
.lp-link-list a{
  font-size: 14px;
  font-weight: 600;
  color: var(--lp-ink);
}
.lp-link-list a::before{
  content: "→ ";
  color: var(--lp-ardoise);
}
.lp-link-list a:hover{ color: var(--lp-ardoise); }

/* Photo dans le panneau "Démarches & liens utiles" */
.lp-links-photo{ margin: 0; height: 100%; }
.lp-links-photo img{
  width: 100%;
  height: 100%;
  min-height: 260px;
  object-fit: cover;
  display: block;
}
@media (max-width: 780px){
  .lp-links-photo img{ min-height: 180px; }
}

/* ============================================================
   18. CARTES PATRIMOINE (page Le Village)
   ============================================================ */
.lp-patrimoine-photo{ margin: 0; }
.lp-patrimoine-photo img{
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
}
/* Cards "Les incontournables du village" : hauteur harmonisée et figée
   (420px, plus grande hauteur naturelle constatée) pour que les deux
   rangées de 3 cards s'alignent, quelle que soit la longueur du texte. */
.lp-patrimoine-card{
  display: flex;
  flex-direction: column;
  height: 420px;
}
.lp-patrimoine-card > .lp-patrimoine-photo{ flex-shrink: 0; }
.lp-patrimoine-card > p:first-of-type{
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.lp-patrimoine-card > p:last-child{ margin-top: auto; }

/* Grille de vignettes "Vous aimerez aussi" — voir shortcode [patrimoine_nav] */
.lp-patrimoine-nav-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 14px;
  margin-top: 4px;
}
.lp-patrimoine-nav-item{
  display: block;
  text-decoration: none !important;
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--lp-line);
}
.lp-patrimoine-nav-item img{
  width: 100%;
  height: 90px;
  object-fit: cover;
  display: block;
}
.lp-patrimoine-nav-item span{
  display: block;
  padding: 8px 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--lp-ink);
  line-height: 1.3;
}
.lp-patrimoine-nav-item:hover span{ color: var(--lp-ardoise); }

/* Bannière photo décorative (page Le Village), sans texte superposé —
   le titre de page vit désormais dans .lp-page-head, séparément. */
.lp-village-hero{ margin: 0; }
.lp-village-hero img{
  width: 100%;
  height: 320px;
  object-fit: cover;
  display: block;
}

/* Page d'un bulletin municipal individuel : contenu un peu plus large
   (1000px) que le reste du site (842px, réglage "narrow" du thème),
   pour une meilleure lisibilité de la visionneuse PDF. Ciblé sur
   .lp-pdf-viewer (pas sur .category-bulletins-municipaux) : cette
   dernière classe apparaît aussi sur CHAQUE carte de la page listing
   "Le bulletin municipal", qui élargissait alors à tort cette page
   de listing elle-même, sans visionneuse PDF à afficher. */
.content-container:has(.lp-pdf-viewer){
  max-width: 1000px !important;
}

/* Visionneuse PDF intégrée (pages des bulletins municipaux) */
.lp-pdf-viewer{
  border: 1px solid var(--lp-line);
  border-radius: 8px;
  overflow: hidden;
  margin: 0 0 16px;
}
.lp-pdf-viewer iframe{
  display: block;
  width: 100%;
  height: 80vh;
  min-height: 500px;
  border: none;
}
/* Sur iOS Safari, le visualiseur PDF natif intégré dans un iframe ne
   supporte pas le défilement tactile INTERNE à l'iframe (bug WebKit
   connu et ancien) : passer le conteneur en overflow:auto ne suffit
   pas, puisque tant que l'iframe fait exactement sa hauteur fixe
   (80vh), rien ne dépasse de ce conteneur pour qu'il ait besoin de
   défiler. La vraie solution est d'agrandir l'iframe pour qu'elle
   affiche tout le PDF sans avoir besoin de scroll interne, et de
   laisser défiler la PAGE elle-même (ça, iOS sait toujours le faire). */
@media (max-width: 782px){
  .lp-pdf-viewer{ overflow: visible; border-radius: 0; }
  .lp-pdf-viewer iframe{ height: 2400px; min-height: 0; }
}
.lp-pdf-download{
  display: inline-block;
  margin-bottom: 24px;
}

/* Résumé du numéro dans le listing "Le journal municipal" */
.lp-card .lp-bulletin-summary{
  font-size: 13px;
  color: var(--lp-ink-soft);
  padding: 0 18px 6px;
  margin: 0;
}

/* ============================================================
   20. HORAIRES DE LA MAIRIE — shortcode [horaires_mairie]
   Badge "ouvert/fermé" calculé côté serveur (voir functions.php)
   + tableau de la semaine, sur la page Contact.
   ============================================================ */
.lp-horaires-badge{
  display: inline-block;
  font-family: var(--lp-font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 999px;
  margin: 0 0 14px;
}
.lp-horaires-open{
  background: rgba(79,111,82,0.14);
  color: var(--lp-sapin-dark);
}
.lp-horaires-closed{
  background: rgba(178,59,59,0.12);
  color: #8a2f2f;
}
.lp-horaires-table{
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.lp-horaires-table td{
  padding: 4px 0;
  border-bottom: 1px solid var(--lp-line);
}
.lp-horaires-table tr:last-child td{
  border-bottom: none;
}
.lp-horaires-table td:first-child{
  color: var(--lp-ink-soft);
  width: 40%;
}
.lp-horaires-note{
  margin: 12px 0 0;
  font-size: 13px;
  color: var(--lp-ink-soft);
  font-style: italic;
}

/* Carte Google Maps intégrée en iframe (page Contact) */
.lp-map-embed{
  border-radius: 8px;
  overflow: hidden;
  line-height: 0;
}
.lp-map-embed iframe{
  width: 100%;
  height: 320px;
  border: 0;
  display: block;
}

/* ============================================================
   FORMULAIRE DE CONTACT (Contact Form 7, page Contact) — chaque
   champ est un <p>Libellé<br>[champ]</p> : on masque le <br> et on
   passe le libellé + le champ en piles verticales serrées, avec le
   champ en pleine largeur (comme le textarea du message).
   ============================================================ */
.wpcf7-form p{
  margin: 0 0 14px !important;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--lp-ink);
}
/* Le thème parent Kadence impose .single-content p{margin-bottom:
   var(--global-md-spacing)} (32px) sur CHAQUE <p> du formulaire — or
   ici le libellé et son champ sont deux <p> séparés (pas un seul
   <p>Libellé<br>[champ]</p> comme supposé plus haut), d'où un espace
   énorme identique avant ET après chaque champ. On resserre le
   libellé contre son champ, et on garde un vrai espace entre deux
   champs différents. */
.wpcf7-form p:not(:has(.wpcf7-form-control-wrap)){
  margin-bottom: 4px !important;
}
.wpcf7-form p:has(.wpcf7-form-control-wrap){
  margin-bottom: 16px !important;
}
.wpcf7-form p:last-child{ margin-bottom: 0 !important; }
.wpcf7-form p br{ display: none; }
.wpcf7-form .wpcf7-form-control-wrap{
  display: block;
  margin-top: 4px;
  line-height: normal;
}
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form textarea{
  display: block;
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--lp-line);
  border-radius: 8px;
  padding: 9px 12px;
  font-family: var(--lp-font-body);
  font-weight: 400;
  font-size: 14px;
  color: var(--lp-ink);
}
.wpcf7-form textarea{ min-height: 120px; resize: vertical; }
.wpcf7-form input:focus,
.wpcf7-form textarea:focus{
  outline: none;
  border-color: var(--lp-ardoise);
}

/* ============================================================
   21. CARTES PROFESSIONNELS LOCAUX — icônes tél / mail / site
   ============================================================ */
.lp-pro-card{
  position: relative;
  background:#fff; border:1px solid var(--lp-line); border-radius:14px;
  padding: 20px 22px; height: 100%;
  transition: transform .15s ease, box-shadow .15s ease;
}
.lp-pro-card:has(.lp-card-cover):hover{
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(38,48,42,.1);
}
.lp-pro-card h4{ font-size: 17px; margin: 0 0 6px; }
.lp-theme-icon{
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15,111,222,.1);
  border-radius: 10px;
  color: var(--lp-ardoise);
  margin-bottom: 12px;
}
.lp-pro-desc{
  font-size: 13.8px; color: var(--lp-ink-soft); margin: 0 0 12px;
}
.lp-pro-row{
  display: flex; align-items: center; gap: 8px;
  font-size: 13.5px; margin-bottom: 5px;
}
.lp-pro-row:last-child{ margin-bottom: 0; }
.lp-pro-icon{
  flex-shrink: 0; color: var(--lp-ardoise);
}
.lp-pro-row a{ color: var(--lp-ink); word-break: break-word; }
.lp-pro-row a:hover{ color: var(--lp-ardoise); }

/* ============================================================
   22. FIL D'ARIANE — liens à l'intérieur de l'eyebrow (remplace
   le texte statique "LA PIERRE → XXX" par un vrai fil d'ariane
   cliquable, sur les pages comme sur les articles de blog).
   ============================================================ */
.lp-eyebrow a{
  color: inherit;
  text-decoration: none;
}
.lp-eyebrow a:hover{
  text-decoration: underline;
}
.lp-breadcrumb-sep{
  opacity: .6;
  margin: 0 2px;
}

/* ============================================================
   23. BANDEAU GROUPE WHATSAPP — page d'accueil, entre "À la une"
   et "Agenda". Renvoie vers la page qui explique le groupe.
   ============================================================ */
.lp-whatsapp-banner{
  display: flex;
  align-items: center;
  gap: 16px;
  background: #25D366;
  color: #fff;
  padding: 16px 24px;
  border-radius: 8px;
  margin: 20px 0 24px;
}
.lp-whatsapp-banner-icon{
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.2);
  border-radius: 50%;
}
.lp-whatsapp-banner-text{
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
/* Regroupe le picto et le titre sur la même ligne (voir la structure du
   bloc dans le contenu de l'accueil) : sans ça, sur mobile où chaque
   enfant direct de .lp-whatsapp-banner passe à la ligne dès que ça ne
   tient plus, le picto se retrouvait seul tout en haut, séparé du titre. */
.lp-whatsapp-banner-title-row{
  display: flex;
  align-items: center;
  gap: 10px;
}
.lp-whatsapp-banner-text strong{
  font-size: 15px;
}
.lp-whatsapp-banner-text span{
  font-size: 13.5px;
  opacity: .92;
}
.lp-whatsapp-banner-btn{
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: #128C4A !important;
  padding: 8px 16px;
  border-radius: 4px;
  font-weight: 600;
  font-size: 13.5px;
  text-decoration: none !important;
  white-space: nowrap;
}
.lp-whatsapp-banner-btn:hover{
  background: #EAFBF1;
}
@media (max-width: 640px){
  .lp-whatsapp-banner{
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .lp-whatsapp-banner-text{ align-items: center; text-align: center; }
  .lp-whatsapp-banner-title-row{ justify-content: center; }
}
.lp-whatsapp-banner-qr{
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  background: #fff;
  border-radius: 6px;
  padding: 4px;
  display: block;
}
.lp-whatsapp-banner-qr img{
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 3px;
}

/* QR code sur la page dédiée au groupe WhatsApp */
.lp-whatsapp-qr{
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 20px;
  background: #fff;
  border: 1px solid var(--lp-line);
  border-radius: 8px;
  margin: 0 0 16px;
}
.lp-whatsapp-qr img{
  display: block;
  border-radius: 4px;
}
.lp-whatsapp-qr p{
  margin: 0;
  font-size: 13.5px;
  color: var(--lp-ink-soft);
  text-align: center;
  max-width: 220px;
}

/* Menu de la cantine — shortcode [menu_cantine], page Cantine & Garderie.
   Un menu tient sur une page, pas besoin de la hauteur 80vh utilisée
   pour les bulletins municipaux (plusieurs pages). */
.lp-menu-cantine{
  margin-bottom: 24px;
}
.lp-menu-cantine .lp-pdf-viewer iframe{
  height: 500px;
}

/* Tableau du menu (transcription du PDF), une carte par jour. */
/* Un bloc par jour, empilés verticalement (une ligne = un jour) plutôt
   qu'une grille de cartes côte à côte : les cartes en ~180px de large
   écrasaient les intitulés de plats un peu longs. Même mise en page
   sur desktop et mobile. */
.lp-menu-table{
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}
.lp-menu-day{
  background: #fff;
  border: 1px solid var(--lp-line);
  border-radius: 6px;
  overflow: hidden;
}
/* Jour courant : mise en avant graphique, ajoutée dynamiquement au
   moment de l'affichage (voir lapierre_menu_cantine_highlight_today()
   dans functions.php) en comparant la date du jour à celle déjà
   présente dans le libellé de chaque jour ("Lundi 07/09", etc.) — rien
   à changer dans la façon de saisir les menus chaque semaine. */
.lp-menu-day.lp-menu-day-today{
  border-color: var(--lp-wood);
  border-width: 2px;
  box-shadow: 0 2px 10px rgba(234,88,12,0.12);
}
.lp-menu-day-name{
  margin: 0;
  padding: 8px 14px;
  background: var(--lp-ardoise);
  color: #fff;
  font-family: var(--lp-font-mono);
  font-size: 11.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.lp-menu-day-today .lp-menu-day-name{
  background: var(--lp-wood);
}
.lp-menu-day-list{
  list-style: none;
  margin: 0;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.lp-menu-day-list li{
  font-size: 13.5px;
  line-height: 1.35;
  color: var(--lp-ink);
}
.lp-menu-alt{
  display: block;
  color: var(--lp-ink-soft);
  font-size: 12.5px;
}
/* Badges d'origine/label (repris de la légende du PDF fournisseur :
   Bio, Régional, Produit labellisé, Origine France, Plat signature) */
.lp-menu-badges{
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-left: 6px;
  vertical-align: middle;
}
.lp-menu-badge{
  display: inline-block;
  font-family: var(--lp-font-mono);
  font-size: 9.5px;
  letter-spacing: .03em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 999px;
  white-space: nowrap;
}
.lp-menu-badge-bio{ background: rgba(79,111,82,0.14); color: var(--lp-sapin-dark); }
.lp-menu-badge-regional{ background: rgba(166,112,74,0.18); color: var(--lp-wood-dark); }
.lp-menu-badge-label{ background: rgba(230,145,56,0.18); color: #b06a1a; }
.lp-menu-badge-france{ background: rgba(62,92,118,0.14); color: var(--lp-ardoise); }
.lp-menu-badge-signature{ background: rgba(230,145,56,0.26); color: #8a4b0a; }

.lp-menu-intro{
  font-size: 13px;
  color: var(--lp-ink-soft);
  margin: 0 0 16px;
}
.lp-menu-source{
  font-size: 12px;
  color: var(--lp-ink-soft);
  font-style: italic;
  margin: 8px 0 0;
}
.lp-menu-legend{
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin: 4px 0 16px;
  padding-top: 12px;
  border-top: 1px solid var(--lp-line);
}
.lp-menu-legend-item{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--lp-ink-soft);
}

/* Le fil d'Ariane dynamique réutilise .lp-eyebrow mais ne doit pas
   prendre l'apparence "pastille" (plusieurs segments avec flèches,
   pas un simple tag de section). !important nécessaire : les variantes
   -inverse/-sapin définissent leur propre background en !important. */
.lp-eyebrow.lp-breadcrumb{
  display: block;
  background: transparent !important;
  padding: 0;
  border-radius: 0;
}

/* ============================================================
   24. LISTING D'ARTICLES PAR CATÉGORIE (Flash-info, Vie communale,
   Vie de la communauté de communes...) — voir category.php.
   Grille 2 colonnes, cartes à hauteur fixe, sans aperçu de contenu.
   ============================================================ */
.lp-listing-grid{
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 24px;
  margin: 28px 0;
}
/* Rythme 2 par ligne / 3 par ligne, en alternance, par cycles de 5 cartes
   sur une grille à 6 colonnes : les 2 premières cartes du cycle prennent
   une demi-largeur (span 3), les 3 suivantes un tiers (span 2). */
.lp-listing-card{ grid-column: span 3; }
.lp-listing-grid .lp-listing-card:nth-child(5n+3),
.lp-listing-grid .lp-listing-card:nth-child(5n+4),
.lp-listing-grid .lp-listing-card:nth-child(5n+5){ grid-column: span 2; }
@media (max-width: 680px){
  .lp-listing-grid{ grid-template-columns: 1fr; }
  .lp-listing-grid .lp-listing-card{ grid-column: span 1 !important; }
}
.lp-listing-card{
  display: flex;
  flex-direction: column;
  height: 420px;
  background: #fff;
  border: 1px solid var(--lp-line);
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none !important;
  color: inherit;
  transition: transform .15s ease, box-shadow .15s ease;
}
.lp-listing-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(38,48,42,.1);
}
.lp-listing-media{
  height: 220px;
  flex-shrink: 0;
  overflow: hidden;
}
.lp-listing-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.lp-listing-placeholder{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--lp-pierre);
}
.lp-listing-placeholder img{
  width: 84px;
  height: 84px;
  object-fit: contain;
  opacity: .5;
}
.lp-listing-body{
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 18px 20px;
}
.lp-listing-cat{
  align-self: flex-start;
  margin-top: 0;
  margin-bottom: 10px;
}
.lp-listing-title{
  font-size: 17px;
  line-height: 1.3;
  margin: 0 0 8px;
  color: var(--lp-ink);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.lp-listing-meta{
  font-size: 12.5px;
  color: var(--lp-ink-soft);
  margin-top: auto;
}
.lp-listing-more{
  display: block;
  margin-top: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--lp-ardoise);
}
.lp-listing-card:hover .lp-listing-more{ color: var(--lp-ardoise-dark); }

/* ============================================================
   25. PROCHAIN CONSEIL MUNICIPAL — bandeau accueil, colonne
   étroite à côté de "À la une". Voir shortcode [prochain_conseil].
   ============================================================ */
.lp-flash-row{ align-items: stretch; }
.lp-flash-row > .wp-block-column{ display: flex; flex-direction: column; }
.lp-flash-row > .wp-block-column > .wp-block-query.lp-card{ flex: 1; display: flex; }
.lp-flash-row > .wp-block-column > .lp-eyebrow{ align-self: flex-start; }
.lp-flash-row > .wp-block-column > .wp-block-query.lp-card .wp-block-post-template{ flex: 1; }

.lp-next-cm{
  height: 100%;
  display: flex;
  flex-direction: column;
}
.lp-next-cm > .lp-eyebrow{ align-self: flex-start; }
.lp-next-cm-head{
  margin-bottom: 25px;
}
.lp-next-cm-head .wp-block-heading{ margin: 0; line-height: 1; }
.lp-next-cm-card{
  flex: 1;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--lp-pierre);
  border-radius: 14px;
  padding: 18px;
}
.lp-next-cm-card .lp-see-all,
.lp-next-cm-empty .lp-see-all{
  margin-top: auto;
  align-self: flex-start;
}
.lp-next-cm-empty{
  display: flex;
  flex-direction: column;
}
.lp-next-cm-icon{
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.6);
  border-radius: 10px;
  color: var(--lp-ardoise);
}
.lp-next-cm-empty .lp-next-cm-icon{ margin-bottom: 12px; }
.lp-next-cm-date-line{
  font-family: var(--lp-font-mono);
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--lp-wood-dark);
  margin: 0;
}
.lp-next-cm-time-line{
  font-family: var(--lp-font-display);
  font-weight: 600;
  font-size: 17px;
  color: var(--lp-ink);
  margin: 0;
}
.lp-next-cm-countdown{
  display: inline-block;
  width: fit-content;
  background: var(--lp-ink);
  color: #fff;
  font-family: var(--lp-font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
}
.lp-next-cm-link{
  display: block;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  margin-top: 6px;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 11px 20px !important;
  border: 1px solid transparent !important;
}
.lp-next-cm-ics{
  display: block;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--lp-ink) !important;
  background: transparent;
  border: 1px solid var(--lp-pierre-dark);
  border-radius: 999px;
  padding: 11px 20px;
  text-decoration: none !important;
}
.lp-next-cm-ics:hover{ background: rgba(255,255,255,.4); }
.lp-next-cm-card{ max-height: 420px; }
.lp-next-cm-empty{ max-height: 420px; }
.lp-next-cm-pending{
  display: inline-block; font-size: 12px; color: var(--lp-ink-soft); font-style: italic;
}
.lp-next-cm-empty{
  flex: 1;
  box-sizing: border-box;
  background: var(--lp-pierre); border-radius: 14px; padding: 18px;
  font-size: 13.5px; color: var(--lp-ink-soft);
}
@media (max-width: 780px){
  .lp-next-cm{ margin-top: 24px; }
}

/* ============================================================
   PARITÉ VISUELLE PAGE AGENDA — même habillage "carte blanche +
   ombre douce" que les pages classiques. Le template d'archive
   de The Events Calendar ne passe pas par le même conteneur
   WordPress (.entry.single-entry) que les pages normales, d'où
   la différence visuelle (body en "content-style-unboxed" au
   lieu de "content-style-boxed").
   ============================================================ */
/* La carte blanche avec ombre douce n'est plus reproduite ici à la
   main : la page Agenda utilise maintenant nativement la classe
   Kadence "content-style-boxed" (voir lapierre_force_boxed_style_on_events
   dans functions.php), exactement comme toutes les autres pages du
   site — rendu garanti identique, sans CSS custom à maintenir. */

/* ============================================================
   26. SUR-HEADER — bandeau transverse (horaires, tél, contact),
   présent sur toutes les pages. Voir lapierre_pre_header() dans
   functions.php, hooké sur wp_body_open.
   ============================================================ */
/* Compense la hauteur du sur-header (désormais position:fixed, donc
   hors du flux normal) pour que le header ne remonte pas se coller
   sous lui. Valeur par défaut correspondant à sa hauteur sur une seule
   ligne ; affinée au pixel près par lapierre_pre_header_spacer_script()
   dans functions.php (utile si le texte passe sur deux lignes en
   fenêtre étroite). */
#masthead{ margin-top: 33px; }
/* En position:fixed (et non sticky) à dessein : un élément sticky se
   "décroche" visuellement pendant le rebond élastique (overscroll) en
   haut de page sur trackpad Mac, alors que la barre de menu Kadence,
   elle, passe en position:fixed une fois épinglée et reste immobile
   pendant ce rebond. En alignant les deux sur le même mode fixed, le
   sur-header ne se sépare plus jamais du reste du header — tout en
   conservant l'effet de rebond sur le contenu de la page. La hauteur
   qu'il libère en sortant du flux est compensée par un padding-top
   ajouté dynamiquement sur le header (voir lapierre_pre_header_spacer()
   dans functions.php). */
.lp-pre-header{
  background: #fff;
  color: var(--lp-ink-soft);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
}
/* La barre d'admin WP est fixe (32px, 46px sur mobile) : le sur-header
   doit se coller juste en dessous, pas sous elle. */
body.admin-bar .lp-pre-header{ top: 32px; }
@media screen and (max-width: 782px){
  body.admin-bar .lp-pre-header{ top: 46px; }
}
/* Le clone sticky du header Kadence n'a pas de fond propre (transparent
   par défaut) : sans ce fond blanc explicite, il devient invisible au
   scroll une fois épinglé en haut de l'écran. */
.kadence-sticky-header{ background: #fff !important; }
/* Kadence calcule le "top" de ce clone épinglé sans tenir compte du
   sur-header (.lp-pre-header, en position:fixed depuis peu — Kadence
   ne le détecte plus pour son propre calcul), et le repositionne donc
   trop haut, en chevauchement. --lp-preheader-bottom est posée à jour
   par lapierre_pre_header_spacer_script() dans functions.php ; le
   !important est nécessaire pour l'emporter sur le top que Kadence
   réapplique lui-même en JS. */
.kadence-sticky-header.item-is-stuck{ top: var(--lp-preheader-bottom, 56px) !important; }
/* Le -12px qui recentrait ici le logo sur le bloc combiné sur-header +
   rangée principale n'a plus lieu d'être depuis que le sur-header est
   passé en position:fixed avec son propre espace compensé par margin-top
   sur #masthead (voir lapierre_pre_header_spacer_script() dans
   functions.php) : #masthead ne contient plus que sa propre rangée, le
   logo s'y centre déjà naturellement. Ce -12px, désormais en trop,
   tirait le logo jusqu'à chevaucher la barre d'admin WP et le sur-header. */
.lp-pre-header-inner{
  max-width: 1180px;
  margin: 0 auto;
  padding: 6px 24px 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  font-family: var(--lp-font-mono);
  font-size: 11px;
}
.lp-pre-header-item strong{
  font-weight: 700;
  margin-right: 4px;
}
.lp-pre-header a{
  color: var(--lp-ink-soft);
  text-decoration: none;
}
.lp-pre-header a:hover{
  color: var(--lp-ardoise);
  text-decoration: underline;
}
.lp-pre-header-sep{ opacity: .4; }
/* Badge Ouvert/Fermé du sur-header : même logique et mêmes couleurs
   que .lp-horaires-badge de la page Contact (voir lapierre_pre_header()
   dans functions.php), mais en version compacte pour tenir sur une
   seule ligne de 11px. */
.lp-pre-header-badge{
  font-size: 9.5px;
  padding: 2px 8px;
  margin: 0 0 0 6px;
  vertical-align: middle;
}
.lp-pre-header-contact{ font-weight: 700; color: var(--lp-ardoise) !important; }
.lp-pre-header-pcs{ font-weight: 700; color: var(--lp-ardoise) !important; letter-spacing: .04em; }
@media (max-width: 640px){
  .lp-pre-header-inner{
    font-size: 10.5px; padding: 6px 16px; gap: 4px;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
  .lp-pre-header-sep{ display: none; }
  /* PCS et Contactez-nous se retrouvaient chacun seuls sur leur propre
     ligne (le premier et le dernier élément d'un flex en colonne) : on
     force les blocs horaires/téléphone en pleine largeur (une ligne
     chacun), et on regroupe PCS + Contact sur la dernière ligne, PCS à
     gauche, en jouant uniquement sur l'ordre visuel (flex order), sans
     toucher au balisage ni au desktop. Les liens PCS et Contact portent
     eux aussi la classe .lp-pre-header-item (en plus de la leur) : il
     faut donc leur redonner explicitement une largeur automatique, sinon
     ils héritent du flex-basis:100% ci-dessous et repartent chacun sur
     leur propre ligne. */
  .lp-pre-header-item{ flex-basis: 100%; order: 1; }
  .lp-pre-header-pcs{ order: 2; flex-basis: auto; }
  .lp-pre-header-pcs::after{ content: " - "; color: var(--lp-ink-soft); font-weight: 400; }
  .lp-pre-header-contact{ order: 3; flex-basis: auto; }
  /* Kadence n'active son propre clone de header épinglé (.kadence-sticky-header)
     que sur desktop (il détecte body.mobile et s'en abstient) : sur mobile,
     sans ce bloc, seul le sur-header restait visible au scroll et le logo +
     bouton de menu disparaissaient complètement de l'écran. On préfère
     l'inverse : le sur-header défile normalement, et c'est #masthead (logo +
     bouton menu) qui reste épinglé, en position:sticky pur (indépendant du
     JS de Kadence). Le margin-top compensant la hauteur du sur-header
     fixed n'a plus lieu d'être ici puisqu'il redevient un élément normal
     du flux. */
  .lp-pre-header{ position: static !important; }
  #masthead{
    position: sticky !important;
    top: 0 !important;
    margin-top: 0 !important;
    z-index: 25;
  }
  body.admin-bar #masthead{ top: 32px !important; }
}
/* Un peu d'air entre le bloc header (sur-header + logo/menu) et le
   contenu qui suit. */
header.site-header{ margin-bottom: 15px; }

/* Recherche dans le menu principal — icône + champ dépliable ajoutés
   après le dernier item ("Environnement"). Voir lapierre_menu_search_item()
   dans functions.php, hooké sur wp_nav_menu_items (theme_location primary). */
.lp-menu-search-item{
  position: relative;
  display: flex;
  align-items: center;
}
.lp-menu-search-toggle{
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0;
  color: var(--lp-ink) !important;
  cursor: pointer;
  display: flex;
  align-items: center;
}
.lp-menu-search-toggle:hover{ color: var(--lp-ardoise) !important; background: none !important; }
/* Un seul contenant "pilule" (comme les icônes du sur-header : pas de
   bouton peint) plutôt que deux boîtes accolées — le bouton "Buttons
   Kadence / Gutenberg" bleu en pastille (règle globale plus haut,
   ligne ~51) est fait pour de vrais appels à l'action, pas pour une
   icône utilitaire dans un petit champ déroulant. */
.lp-menu-search-form{
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 10px;
  align-items: center;
  background: #fff;
  border: 1px solid var(--lp-line);
  border-radius: 999px;
  box-shadow: 0 10px 24px rgba(38,48,42,.12);
  padding: 4px 4px 4px 16px;
  gap: 4px;
  z-index: 21;
}
.lp-menu-search-form.is-open{ display: flex; }
.lp-menu-search-form input[type="search"]{
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 0 !important;
  height: 34px;
  font-size: 13.5px;
  font-family: var(--lp-font-body);
  width: 200px;
  color: var(--lp-ink);
}
.lp-menu-search-form button[type="submit"]{
  background: none !important;
  border: none !important;
  border-radius: 50% !important;
  color: var(--lp-ink-soft) !important;
  width: 34px;
  height: 34px;
  padding: 0 !important;
  flex-shrink: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: none !important;
}
.lp-menu-search-form button[type="submit"]:hover{
  color: #fff !important;
  background: var(--lp-ardoise) !important;
}
@media (max-width: 782px){
  .lp-menu-search-form{ right: auto; left: 0; }
  .lp-menu-search-form input[type="search"]{ width: 160px; }
  /* Dans le tiroir mobile, l'icône de recherche est tout en bas de la
     liste : un champ en position:absolute qui s'ouvre "en dessous" sort
     alors de la zone visible/scrollable du tiroir et devient inatteignable.
     On le fait plutôt s'ouvrir dans le flux normal, en pleine largeur. */
  .lp-menu-search-item{ flex-wrap: wrap; }
  .lp-menu-search-form{
    position: static;
    box-shadow: none;
    border-radius: 8px;
    margin: 8px 0 0;
    width: 100%;
  }
  .lp-menu-search-form input[type="search"]{ width: auto; flex: 1; }
}

/* ============================================================
   27. MENU PRINCIPAL — mise en avant des entrées de niveau 1
   ============================================================ */
#site-navigation #primary-menu > li > a{
  font-weight: 700 !important;
  color: var(--lp-ink) !important;
  position: relative;
}
#site-navigation #primary-menu > li > a::after{
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 6px;
  height: 2px;
  background: var(--lp-ardoise);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .15s ease;
}
#site-navigation #primary-menu > li:hover > a::after,
#site-navigation #primary-menu > li.current-menu-item > a::after,
#site-navigation #primary-menu > li.current-menu-ancestor > a::after{
  transform: scaleX(1);
}
#site-navigation #primary-menu > li > a:hover{
  color: var(--lp-ardoise) !important;
}

/* ============================================================
   28. ENCART CONTACT — fiches association (tél / e-mail / WhatsApp),
   voir lapierre_asso_contact_render() dans functions.php. N'apparaît
   que si au moins un champ est rempli sur la fiche.
   ============================================================ */
.lp-asso-contact{
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--lp-pierre);
  border-radius: 14px;
  padding: 20px 22px;
  margin-top: 25px;
}
.lp-asso-contact-title{
  margin: 0;
  font-family: var(--lp-font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--lp-sapin-dark);
}
.lp-asso-contact-row{
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 8px;
  color: var(--lp-ink) !important;
  text-decoration: none !important;
  font-size: 14.5px;
}
.lp-asso-contact-row .lp-pro-icon{ flex-shrink: 0; }
.lp-asso-contact-row strong{
  font-weight: 700;
  margin-right: 6px;
}
.lp-asso-contact-row:hover{ color: var(--lp-ardoise) !important; }

.lp-asso-contact + .lp-panel{
  margin-top: 40px !important;
  padding-top: 28px;
  border-top: 1px solid rgba(38,48,42,.15);
}

/* ============================================================
   29. TITRE DU SITE SUR DEUX LIGNES — voir lapierre_split_site_title_script()
   dans functions.php, qui découpe "Mairie de La Pierre" en deux <span>.
   ============================================================ */
.site-title{
  display: flex !important;
  flex-direction: column;
  line-height: 1.05 !important;
}
.lp-site-title-line1{
  font-family: var(--lp-font-display);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--lp-ink);
}
.lp-site-title-line2{
  font-family: var(--lp-font-display);
  font-size: 25px;
  font-weight: 700;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--lp-ink);
}


/* ============================================================
   ASSOCIATIONS — grille de cartes, toutes la même taille (page
   Associations). Hauteur figée + description tronquée à 3 lignes
   pour absorber les écarts de longueur de texte ; le lien "En
   savoir plus" reste toujours calé en bas (margin-top:auto).
   ============================================================ */
.lp-asso-grid > .wp-block-group__inner-container{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.lp-asso-grid .lp-card{
  display: flex;
  flex-direction: column;
  height: 400px;
}
.lp-asso-grid .lp-card > .lp-patrimoine-photo{ flex-shrink: 0; }
.lp-asso-grid .lp-card p:first-of-type{
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.lp-asso-grid .lp-card p:last-of-type{ margin-top: auto; }
/* Pas de photo dispo : logo (ancienne version) sur fond neutre,
   plutôt qu'une photo recadrée/déformée. */
.lp-asso-placeholder{ background: var(--lp-paper); }
.lp-asso-placeholder img{
  object-fit: contain !important;
  padding: 24px;
  box-sizing: border-box;
}
@media (max-width: 700px){
  .lp-asso-grid > .wp-block-group__inner-container{ grid-template-columns: 1fr; }
  .lp-asso-grid .lp-card{ height: auto; }
}


/* ============================================================
   PROFESSIONNELS LOCAUX — grille de cartes, 3 par ligne, toutes
   la même hauteur/largeur (page Professionnels). Même principe
   que .lp-asso-grid : hauteur figée + description tronquée, le
   conteneur réel à cibler est le .wp-block-group__inner-container
   que WordPress insère automatiquement dans un bloc Group.
   ============================================================ */
.lp-pro-grid > .wp-block-group__inner-container{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.lp-pro-grid .lp-pro-card{
  display: flex;
  flex-direction: column;
  height: 240px;
  overflow: hidden;
}
.lp-pro-grid .lp-pro-desc{
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (max-width: 700px){
  .lp-pro-grid > .wp-block-group__inner-container{ grid-template-columns: 1fr; }
  .lp-pro-grid .lp-pro-card{ height: auto; }
}

/* Image de secours (blason) affichée en une des articles qui n'ont pas
   de photo : c'est un visuel quasi carré (442×522), alors que les
   bannières et cartes d'articles sont larges et basses. En
   object-fit:cover (comportement par défaut du thème), il se
   retrouvait recadré et zoomé dans un coin, illisible. On l'affiche
   ici entier et centré sur un fond uni, uniquement quand c'est ce
   visuel précis (ciblé par son nom de fichier) — les vraies photos
   d'articles gardent le recadrage "cover" habituel. .lp-listing-media
   est le troisième contexte qui l'affiche (résultats de recherche et
   archives de catégorie, search.php/category.php) : ces articles ayant
   maintenant un _thumbnail_id renseigné (ce même blason), ils passent
   par la branche "vraie photo" du template (.lp-listing-media), pas
   par .lp-listing-placeholder (réservé aux articles sans aucune image
   à la une, et déjà bien traité par ailleurs). */
.post-thumbnail-inner img[src*="logo-la-pierre.png"],
.wp-block-post-featured-image img[src*="logo-la-pierre.png"],
.lp-listing-media img[src*="logo-la-pierre.png"]{
  /* !important nécessaire : le thème parent Kadence pose sa propre
     règle .wp-site-blocks .post-thumbnail img{object-fit:cover} avec
     une spécificité égale à la nôtre, chargée après — sans !important,
     c'est elle qui l'emportait. */
  object-fit: contain !important;
  background: #f4f1ea;
  padding: 24px;
  box-sizing: border-box;
}

/* Logos des partenaires institutionnels (page du Manoir de Vaubonnais) */
.lp-manoir-partenaires{
  margin: 28px 0;
  padding: 24px 0;
  border-top: 1px solid rgba(0,0,0,.1);
  border-bottom: 1px solid rgba(0,0,0,.1);
  text-align: center;
}
.lp-manoir-partenaires-label{
  font-family: var(--lp-font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #8a8f98;
  margin: 0 0 16px;
}
.lp-manoir-partenaires-row{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 32px;
}
.lp-manoir-partenaire-logo{ display:block; height: 44px; width: auto; }
@media (max-width: 480px){
  .lp-manoir-partenaires-row{ gap: 20px; }
  .lp-manoir-partenaire-logo{ height: 34px; }
}

/* Variante compacte de la bannière WhatsApp, pour un encart inséré au
   fil d'un article (plutôt que la bannière pleine largeur de la home) */
.lp-whatsapp-banner-boxed{
  max-width: 480px;
  margin: 28px auto;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
}
.lp-whatsapp-banner-boxed .lp-whatsapp-banner-text{ align-items: center; }
.lp-whatsapp-banner-boxed .lp-whatsapp-banner-title-row{ justify-content: center; }

/* Lightbox générique (voir lapierre_lightbox_script dans functions.php) */
.lp-lightbox{ cursor: zoom-in; }
.lp-lightbox-overlay{
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  background: rgba(10,12,16,.88);
  cursor: zoom-out;
  animation: lp-lightbox-fade .15s ease;
}
.lp-lightbox-overlay img{
  max-width: 100%;
  max-height: 100%;
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
  cursor: default;
}
.lp-lightbox-close{
  position: absolute;
  top: 16px;
  right: 20px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,.14);
  color: #fff;
  border: none;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lp-lightbox-close:hover{ background: rgba(255,255,255,.24); }
body.lp-lightbox-open{ overflow: hidden; }
@keyframes lp-lightbox-fade{ from{ opacity: 0; } to{ opacity: 1; } }