/* =============================================================
   GeneratePress Child — main.css
   Commune de Saint-Jean de Beauregard
   Palette: forest green · wheat gold · natural white
   ============================================================= */

/* ── Custom variables ─────────────────────────────────────────── */
:root {
  --color-primary:       #1d5e1d;
  --color-primary-dark:  #143d14;
  --color-primary-light: #3a7d3a;
  --color-accent:        #c9aa00;
  --color-accent-light:  #e0c030;
  --color-accent-dark:   #9e8500;
  --color-bluegray:      #6d8c9b;
  --color-orange:        #ff9027;
  --color-red:           #d7273b;

  --color-text:          #1c2b1c;
  --color-muted:         #5a6e5a;
  --color-bg:            #fafaf7;
  --color-bg-soft:       #f3f5ef;
  --color-border:        #d4ddd4;

  --radius:              0.5rem;
  --radius-lg:           1rem;
  --transition:          0.25s ease;
  --transition-slow:     0.45s ease;
  --container-max:       1280px;
  --container-pad:       clamp(1rem, 4vw, 2rem);

  --shadow-sm:  0 1px 4px rgba(30, 60, 30, 0.08);
  --shadow-md:  0 4px 16px rgba(30, 60, 30, 0.12);
  --shadow-lg:  0 12px 36px rgba(30, 60, 30, 0.15);

  --hero-overlap: clamp(3.5rem, 7vw, 8rem);

  /* ── GeneratePress variable overrides ──────────────────────── */
  --accent:     #1d5e1d;
  --contrast:   #1c2b1c;
  --contrast-2: #5a6e5a;
  --contrast-3: #d4ddd4;
  --base:       #f3f5ef;
  --base-2:     #fafaf7;
  --base-3:     #ffffff;
}

/* ── Web fonts ────────────────────────────────────────────────── */
@font-face {
  font-family: 'Patrician';
  font-style: normal;
  font-weight: normal;
  src: local('Patrician'), url('https://mairie-saintjeandebeauregard.fr/wp-content/themes/generatepress-child/assets/css/Patrician.woff') format('woff');
}
@font-face {
  font-family: 'LibreBaskerville';
  font-style: normal;
  font-weight: normal;
  src: local('LibreBaskerville'), url('https://mairie-saintjeandebeauregard.fr/wp-content/themes/generatepress-child/assets/css/LibreBaskerville-Regular.woff') format('woff');
}

/* ── Minimal reset ────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
img, video { display: block; max-width: 100%; height: auto; }

body {
  background-color: var(--color-bg);
  color: var(--color-text);
}

/* ── Typography ───────────────────────────────────────────────── */
.main-title,
h1, h2, h3, h4, h5, h6 {
  font-family: "LibreBaskerville", Georgia, serif;
}

/* Tirets dorés en bas des titres H1–H3 */
h1 {
  display: inline;
  background-image: linear-gradient(to right, var(--color-accent) 100%, transparent 100%);
  background-repeat: repeat-x;
  background-size: 8px 3px;
  background-position: 0 100%;
  padding-bottom: 4px;
  padding-right: 1.5rem;
}
h2, h3, h4, h5, h6 {
  color: var(--color-bluegray);
}

.entry-title,
.entry-title a,
.entry-title a:hover {
  font-family: "LibreBaskerville", Georgia, serif;
  color: var(--color-primary-dark) !important;
  text-decoration: none;
}

/* Global links */
a { color: var(--color-primary); }
a:hover, a:focus, a:active { color: var(--color-primary-dark); }

.entry-content a:not(.btn):not(.btn-pdf):not(.wp-block-button__link) {
  color: var(--color-primary);
  text-decoration-color: rgba(46, 107, 46, 0.35);
  text-underline-offset: 3px;
  transition: color var(--transition), text-decoration-color var(--transition);
}
.entry-content a:not(.btn):not(.wp-block-button__link):hover {
  color: var(--color-primary-dark);
  text-decoration-color: var(--color-accent);
}

/* =============================================================
   HEADER
   ============================================================= */
.site-header {
  /* background: linear-gradient(to right, #fafaf7 0%, #fafaf7 55%, rgba(91, 155, 173, 0.05) 100%) !important; */
  border-bottom: none;
  box-shadow: 0 2px 0 0 var(--color-accent);
  position: relative;
  overflow: hidden;
}

/* Logo en filigrane agrandi, désaturé */
.site-header__watermark {
  position: absolute;
  right: 2%;
  top: 78%;
  width: 280px;
  height: 280px;
  transform: translateY(-50%) scale(2.25);
  transform-origin: center right;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  filter: saturate(0) opacity(0.07);
  pointer-events: none;
  z-index: 0;
}

/* Le contenu du header passe au-dessus du filigrane et du grain */
.site-header .inside-header {
  position: relative;
  z-index: 1;
}

/* Grain papier — texture légère façon papier vergé */
.site-header::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    repeating-linear-gradient(
      45deg,
      rgba(80, 90, 60, 0.022) 0px, rgba(80, 90, 60, 0.022) 1px,
      transparent 1px, transparent 4px
    ),
    repeating-linear-gradient(
      -45deg,
      rgba(80, 90, 60, 0.015) 0px, rgba(80, 90, 60, 0.015) 1px,
      transparent 1px, transparent 4px
    );
}

/* Site title: gradient green→gold on the main word */
.site-header .main-title a,
.site-header .main-title a:hover,
.site-header .site-title a,
.site-header .site-title a:hover {
  color: var(--color-primary-dark) !important;
  font-family: "Patrician", Georgia, serif;
  text-decoration: none;
}

.site-branding .main-title a {
  display: flex;
  flex-direction: column;
}
.site-branding .main-title span { display: block; }

.site-branding .main-title .main-title-1 {
  font-size: 0.85rem;
  line-height: 1.2rem;
  color: var(--color-bluegray);
  text-transform: uppercase;
  font-weight: normal;
}

/* "Saint-Jean" — the main word gets a gradient */
.site-branding .main-title .main-title-2 {
  font-size: 2.75rem;
  line-height: 2.8rem;
  color: var(--color-bluegray);
  position: relative;
  font-weight: normal;
  letter-spacing: 0.08rem;
}

.site-branding .main-title .main-title-3 {
  font-size: 1.5rem;
  color: var(--color-bluegray);
  position: relative;
  font-weight: normal;
}


.site-header .site-description { color: var(--color-muted) !important; }

/* =============================================================
   STICKY HEADER WRAPPER
   ============================================================= */
#sticky-wrapper {
  position: sticky;
  top: 0;
  z-index: 1000;
  width: 100%;
  transition: box-shadow 0.35s ease, background-color 0.35s ease;
}
#sticky-wrapper:not(.is-sticky) {
  box-shadow: none;
}

#sticky-wrapper.is-sticky {
  background-color: rgba(250, 250, 247, 0.85) !important;
  box-shadow: 0 2px 20px rgba(30, 74, 29, 0.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
#sticky-wrapper.is-sticky .site-header {
  background-color: transparent !important;
  border-bottom: none;
}

/* =============================================================
   BURGER BUTTON — reset du style <button> global
   ============================================================= */
button.menu-toggle,
.menu-toggle {
  background-color: transparent !important;
  box-shadow:       none        !important;
  color:            var(--color-primary-dark) !important;
  transform:        none        !important;
  border:           none        !important;
}
button.menu-toggle:hover,
button.menu-toggle:focus,
.menu-toggle:hover,
.menu-toggle:focus {
  background-color: rgba(46, 107, 46, 0.08) !important;
  color:            var(--color-primary-dark) !important;
  transform:        none !important;
  box-shadow:       none !important;
}

/* =============================================================
   SHRINK DU LOGO AU SCROLL (sticky)
   ============================================================= */
.site-branding-container {
  transform-origin: left center;
  transition:       transform var(--transition);
  will-change:      transform;
}

@media (min-width: 769px) {
  .site-header .inside-header {
    transition: padding-block var(--transition);
  }

  #sticky-wrapper.is-sticky .site-branding-container {
    transform: scale(0.75);
  }

  #sticky-wrapper.is-sticky .site-header .inside-header {
    padding-block: 0.4rem !important;
  }

  /* Réduction de la hauteur de la nav au scroll */
  #sticky-wrapper.is-sticky .main-navigation .main-nav > ul > li > a {
    /* padding-block: 0.45rem !important; */
    line-height: 2.8em;
  }
}

/* =============================================================
   NAVIGATION
   ============================================================= */

/* Fine ligne or séparant le header de la nav */
.main-navigation::before {
  content: '';
  display: block;
  height: 2px;
  background: linear-gradient(
    to right,
    transparent 0%,
    var(--color-accent-dark) 12%,
    var(--color-accent-light) 50%,
    var(--color-accent-dark) 88%,
    transparent 100%
  );
}

.main-navigation {
  background: linear-gradient(to right, var(--color-primary) 0%, var(--color-primary-dark) 100%) !important;
}

.main-navigation ul ul {
  background-color: var(--color-primary-dark) !important;
}

.main-navigation:not(.toggled) ul li.sfHover>ul, .main-navigation:not(.toggled) ul li:hover>ul {
    margin-top: -2px;
}

.main-navigation .main-nav ul li a,
.main-navigation .menu-toggle,
.main-navigation .menu-bar-items {
  color: rgba(255, 255, 255, 0.9) !important;
  font-size: 16px !important;
  text-decoration: none;
  position: relative;
  transition: color var(--transition), padding-block var(--transition);
  cursor: pointer;
}

/* Top-level items : display block + transition transform pour l'effet lift */
.main-navigation .main-nav > ul > li > a {
  display: block;
  will-change: transform;
  transition: color var(--transition), transform var(--transition);
}

.main-navigation .main-nav ul li:not([class*="current-menu-"]):hover > a,
.main-navigation .main-nav ul li:not([class*="current-menu-"]):focus > a,
.main-navigation .main-nav ul li.sfHover:not([class*="current-menu-"]) > a,
.main-navigation .menu-bar-item:hover > a,
.main-navigation .menu-bar-item.sfHover > a {
  color: var(--color-accent-light) !important;
}

/* Lift subtil sur les items top-level (desktop) */
@media (min-width: 769px) {
  .main-navigation .main-nav > ul > li:not([class*="current-menu-"]):hover > a {
    transform: translateY(-2px);
  }
}

.main-navigation .main-nav ul li[class*="current-menu-"] > a {
  color: var(--color-accent) !important;
  font-weight: 600;
}

/* Sliding gold underline on nav items */
.main-navigation .main-nav > ul > li > a { padding-bottom: 0.15rem; }
.main-navigation .main-nav > ul > li > a::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: var(--color-accent-light);
  border-radius: 1px;
  transform: scaleX(0);
  transition: transform 0.28s ease, bottom 0s;
}
/* Hover: bottom:-2px compense le translateY(-2px) du lift pour aligner avec l'état current */
.main-navigation .main-nav > ul > li:hover > a::after {
  transform: scaleX(1);
  bottom: -2px;
}
.main-navigation .main-nav > ul > li[class*="current-menu-"] > a::after {
  transform: scaleX(1);
}

/* Dropdown menus */
.main-navigation ul ul {
  border-top: 2px solid var(--color-accent) !important;
}
.main-navigation ul ul li a { color: rgba(255, 255, 255, 0.85) !important; }
.main-navigation ul ul li a:hover {
  color: #fff !important;
  background-color: rgba(255, 255, 255, 0.08) !important;
}

button.menu-toggle:hover,
button.menu-toggle:focus { color: #fff !important; }

/* =============================================================
   CONTENT AREA
   ============================================================= */
.separate-containers .inside-article,
.separate-containers .comments-area,
.separate-containers .page-header,
.one-container .container,
.separate-containers .paging-navigation,
.inside-page-header {
  background-color: #ffffff !important;
}

.inside-article {
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: 0 -10px 40px rgba(20, 48, 20, 0.13);

}

.sidebar .widget {
  background-color: #ffffff !important;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.sidebar .widget-panneaupocket-news {
    padding: 0 !important;
    margin-left: 15px;
    background: transparent !important;
    border: 0 !important;
}

/* Form buttons */
button,
html input[type="button"],
input[type="reset"],
input[type="submit"],
a.button,
a.wp-block-button__link:not(.has-background) {
  background-color: var(--color-primary) !important;
  color: #ffffff !important;
  border-radius: var(--radius);
  transition: background-color var(--transition), transform var(--transition);
}
button:hover,
html input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover,
a.button:hover,
a.wp-block-button__link:not(.has-background):hover {
  background-color: var(--color-primary-dark) !important;
  color: #ffffff !important;
  transform: translateY(-1px);
}

/* Form fields */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="number"],
textarea,
select {
  border-color: var(--color-border) !important;
  border-radius: var(--radius);
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="search"]:focus,
textarea:focus {
  border-color: var(--color-primary-light) !important;
  outline: none;
  box-shadow: 0 0 0 3px rgba(46, 107, 46, 0.15);
}

/* =============================================================
   FOOTER
   ============================================================= */
.site-footer {
  background-color: #1d3a1d !important;
  border-top: none !important;
  color: rgba(255,255,255,0.75) !important;
}

/* Gold accent stripe at the top of footer */
.site-footer::before {
  content: '';
  display: block;
  height: 3px;
  background: linear-gradient(to right, transparent, var(--color-accent) 20%, var(--color-accent-light) 50%, var(--color-accent) 80%, transparent);
}

/* Footer nav: horizontal, centered */
.site-footer .footer-nav {
  display: flex;
  justify-content: center;
  padding: 1.5rem var(--container-pad) 0.5rem;
}

.site-footer .footer-menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer .footer-menu li { margin: 0; }

.site-footer .footer-menu a {
  color: rgba(255,255,255,0.7) !important;
  text-decoration: none;
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  transition: color var(--transition);
  position: relative;
  padding-bottom: 2px;
}
.site-footer .footer-menu a::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: var(--color-accent);
  transform: scaleX(0);
  transition: transform 0.25s ease;
}
.site-footer .footer-menu a:hover {
  color: var(--color-accent-light) !important;
}
.site-footer .footer-menu a:hover::after { transform: scaleX(1); }

/* Copyright bar */
.site-info {
  background-color: transparent !important;
  border-top: 1px solid rgba(255,255,255,0.1) !important;
  padding-block: 1.25rem;
  text-align: center;
}
.site-info .copyright-bar {
  color: rgba(255,255,255,0.45);
  font-size: 0.8rem;
}
.site-info .copyright-bar::before { display: none; } /* remove old pseudo */

.site-info a,
.site-footer a,
.footer-widgets a {
  color: rgba(255,255,255,0.6) !important;
  text-decoration: none;
  transition: color var(--transition);
}
.site-info a:hover,
.site-footer a:hover,
.footer-widgets a:hover {
  color: var(--color-accent-light) !important;
}

.footer-widgets {
  background-color: #1d3a1d !important;
  border-top: none !important;
}
.footer-widgets .widget-title {
  color: #fff !important;
  font-family: "LibreBaskerville", Georgia, serif;
  border-bottom: 1px solid rgba(255,255,255,0.15);
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
}

/* =============================================================
   GENERIC BUTTON .btn
   ============================================================= */
.btn {
  display: inline-block;
  position: relative;
  overflow: hidden;
  padding: 0.75rem 1.75rem;
  background: var(--color-primary);
  color: #fff;
  border-radius: var(--radius);
  font-weight: 600;
  text-decoration: none;
  transition: background var(--transition), box-shadow var(--transition), transform var(--transition);
  isolation: isolate;
}
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(201,162,39,0.35) 50%, transparent 65%);
  transform: translateX(-100%);
  transition: transform 0.55s ease;
  pointer-events: none;
}
.btn:hover,
.btn:focus-visible {
  background: var(--color-primary-dark);
  box-shadow: 0 4px 14px rgba(46, 107, 46, 0.35);
  transform: translateY(-1px);
  color: #fff;
}
.btn:hover::before,
.btn:focus-visible::before { transform: translateX(100%); }
.btn:active { transform: translateY(0); box-shadow: none; }

.btn--accent {
  background: var(--color-accent);
  color: var(--color-text);
}
.btn--accent:hover,
.btn--accent:focus-visible {
  background: var(--color-accent-dark);
  color: #fff;
}

/* ── Badge PDF ──────────────────────────────────────────────── */
.btn-pdf {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0 1rem 0 0;
  /* background: var(--color-primary); */
  color: var(--color-primary) !important;
  border-radius: var(--radius);
  overflow: hidden;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none !important;
  line-height: 1.4;
  min-height: 2.6rem;
  margin: 0.2rem 0;
  transition: background var(--transition);
  border: 1px solid rgba(29, 94, 29, 0.15);
  vertical-align: middle;
}
.btn-pdf::before {
  content: '';
  display: block;
  align-self: stretch;
  width: 2.8rem;
  flex-shrink: 0;
  background-color: #fff;
  /* background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 40'%3E%3Cpath d='M2 2H19L30 13V38H2Z' fill='white' stroke='%231d5e1d' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M19 2V13H30' fill='none' stroke='%231d5e1d' stroke-width='2' stroke-linejoin='round'/%3E%3Crect x='2' y='27' width='28' height='11' fill='%231d5e1d'/%3E%3Ctext x='16' y='36' text-anchor='middle' font-size='9' font-weight='bold' font-family='Arial,sans-serif' fill='white'%3EPDF%3C/text%3E%3C/svg%3E"); */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 40'%3E%3Cpath d='M2 2H19L30 13V38H2Z' fill='white' stroke='%23d7273b' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M19 2V13H30' fill='none' stroke='%23d7273b' stroke-width='2' stroke-linejoin='round'/%3E%3Crect x='2' y='27' width='28' height='11' fill='%23d7273b'/%3E%3Ctext x='16' y='36' text-anchor='middle' font-size='9' font-weight='bold' font-family='Arial,sans-serif' fill='white'%3EPDF%3C/text%3E%3C/svg%3E");
  background-size: 55%;
  background-repeat: no-repeat;
  background-position: center;
  border-right: 1px solid rgba(29, 94, 29, 0.15);
}
.btn-pdf:hover,
.btn-pdf:focus-visible {
  background: var(--color-primary);
  color: #fff !important;
  text-decoration: none !important;
}
.btn-pdf:active {
  background: var(--color-primary-dark);
}

/* =============================================================
   SCROLL REVEAL ANIMATIONS
   ============================================================= */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal--delay-1 { transition-delay: 0.1s; }
.reveal--delay-2 { transition-delay: 0.2s; }
.reveal--delay-3 { transition-delay: 0.3s; }
.reveal--delay-4 { transition-delay: 0.4s; }

/* =============================================================
   HERO
   ============================================================= */
.hero {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--color-primary-dark);
  margin-inline: calc(var(--container-pad) * -1);
}

/* ── Mode natif : affichage sans recadrage ────────────────────── */
.hero--native {
  aspect-ratio: unset;
}
.hero--native .hero__media {
  position: relative;
  inset: auto;
}
.hero--native .hero__image,
.hero--native .hero__video {
  width: 100%;
  height: auto;
  max-height: 90vh;
  object-fit: unset;
  transform: none;
  animation: none;
}

.hero__media { position: absolute; inset: 0; }
.hero__image,
.hero__video {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  filter: saturate(0.88) brightness(0.92);
}
.hero__image {
  transform: scale(1.04);
  animation: hero-kenburns 10s ease forwards;
}
@keyframes hero-kenburns { to { transform: scale(1); } }

.hero__overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  justify-content: center; align-items: flex-start;
  padding: clamp(1.5rem, 5vw, 4rem);
  background: linear-gradient(to right, rgba(20,48,20,0.62) 0%, rgba(20,48,20,0.28) 30%, transparent 100%);
}

.hero__title {
  font-size: clamp(1.75rem, 4vw, 3.5rem);
  color: #fff;
  margin: 0 0 0.75rem;
  max-width: 18ch;
  text-shadow: 0 2px 12px rgba(0,0,0,0.5);
  line-height: 1.15;
  animation: hero-fadein 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.hero__subtitle {
  font-size: clamp(1rem, 1.8vw, 1.35rem);
  color: rgba(255,255,255,0.92);
  margin: 0 0 2rem;
  max-width: 40ch;
  animation: hero-fadein 0.9s 0.18s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.hero .btn { animation: hero-fadein 0.9s 0.32s cubic-bezier(0.22, 1, 0.36, 1) both; }

@keyframes hero-fadein {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Gold rule at bottom of hero */
.hero::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 4px; opacity: 0.85;
  background: linear-gradient(to right, var(--color-accent), var(--color-accent-light) 50%, var(--color-accent));
}

.hero__fullscreen {
  position: absolute; bottom: 1.25rem; right: 1.25rem;
  background: rgba(20,48,20,0.55);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: var(--radius);
  padding: 0.5rem; color: #fff;
  cursor: pointer; transition: background var(--transition); line-height: 0;
}
.hero__fullscreen:hover { background: rgba(46,107,46,0.75); }

@media (max-width: 640px) {
  .hero { margin-inline: 0; }
  .hero:not(.hero--native) { aspect-ratio: 4/3; }
  .hero__overlay { align-items: center; text-align: center; }
  .hero__title, .hero__subtitle { max-width: 100%; }
}

/* =============================================================
   HERO BACKDROP — fond pleine largeur, chevauchement du contenu
   ============================================================= */
.hero-backdrop {
  width: 100%;
  max-width: 1920px;
  margin-inline: auto;
}
/* Annule le margin-inline négatif prévu pour le hero dans un container padded */
.hero-backdrop .hero {
  margin-inline: 0;
}
/* Hauteur max 40vh : object-fit:cover centre le média verticalement dans le cadre */
.hero-backdrop .hero:not(.hero--native) {
  max-height: 40vh;
  width: 100vw;
}

/* .site remonte pour chevaucher le bas du hero */
.has-hero .site {
  position: relative;
  z-index: 1;
  margin-top: calc(-1 * var(--hero-overlap));
}

/* Le contenu s'affiche comme une carte arrondie sur le hero */
.has-hero .site-content {
  /* background-color: var(--color-bg); */
  /* border-radius: var(--radius-lg) var(--radius-lg) 0 0; */
  /* box-shadow: 0 -10px 40px rgba(20, 48, 20, 0.13); */
  overflow: hidden;
}

/* =============================================================
   NEWS GRID
   ============================================================= */
.news-section { padding-block: clamp(3rem, 6vw, 5rem); }
.news-section--alt { background-color: var(--color-bg-soft); }

/* Header row: title + "all news" link */
.news-section__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 2rem;
}

.news-section__title {
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  color: var(--color-primary-dark);
  margin: 0;
  position: relative;
  padding-bottom: 0.6rem;
}
/* Gold underline on section title */
.news-section__title::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 3rem; height: 3px;
  background: var(--color-accent);
  border-radius: 2px;
}

.news-section__all {
  font-size: 0.875rem;
  color: var(--color-primary) !important;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--transition);
}
.news-section__all:hover { color: var(--color-accent-dark) !important; }

.news-grid { display: grid; gap: 1.75rem; }
.news-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.news-grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) { .news-grid--cols-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 580px) {
  .news-grid--cols-3,
  .news-grid--cols-2 { grid-template-columns: 1fr; }
}

.news-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: box-shadow var(--transition-slow), transform var(--transition-slow), border-color var(--transition);
}
.news-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
  border-color: rgba(46,107,46,0.25);
}
.news-card::before {
  content: ''; display: block; height: 3px;
  background: linear-gradient(to right, var(--color-primary), var(--color-accent));
  transform: scaleX(0); transform-origin: left; transition: transform 0.35s ease;
}
.news-card:hover::before { transform: scaleX(1); }

.news-card__thumb-link { display: block; overflow: hidden; }
.news-card__thumb {
  width: 100%; aspect-ratio: 3/2; object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.news-card:hover .news-card__thumb { transform: scale(1.06); }

.news-card__body {
  padding: 1.25rem 1.35rem; flex: 1;
  display: flex; flex-direction: column; gap: 0.4rem;
}
.news-card__cat {
  font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-primary);
}
.news-card__title { font-size: 1.05rem; margin: 0; line-height: 1.35; }
.news-card__title a { color: var(--color-text); text-decoration: none; transition: color var(--transition); }
.news-card__title a:hover { color: var(--color-primary) !important; }
.news-card__excerpt {
  font-size: 0.88rem; color: var(--color-muted); margin: 0; flex: 1;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.news-card__date {
  font-size: 0.78rem; color: var(--color-muted); margin-top: auto;
  padding-top: 0.75rem; display: flex; align-items: center; gap: 0.35rem;
}
.news-card__date::before {
  content: ''; display: inline-block; width: 1.2rem; height: 2px;
  background: var(--color-accent); border-radius: 1px; flex-shrink: 0;
}

/* ── Card "lien de redirection" (cas 2) ── */
.news-card--link::before { transform: scaleX(1); }

.news-card__link-badge {
  display: inline-block;
  font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
  border-radius: 999px;
  padding: 0.15rem 0.6rem;
  margin-top: 0.35rem;
  align-self: flex-start;
  transition: background-color var(--transition), color var(--transition);
}
.news-card--link:hover .news-card__link-badge {
  background-color: var(--color-primary);
  color: #fff;
}

/* =============================================================
   UNE FEATURED — bloc "À la Une" (cards horizontales empilées)
   ============================================================= */
.une-featured__header { margin-bottom: 1.5rem; }

.une-featured__title {
  /* font-size: clamp(1.3rem, 2vw, 1.75rem); */
  color: var(--color-primary-dark);
  margin: 0;
  position: relative;
  padding-bottom: 0.6rem;
}
.une-featured__title::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 3rem; height: 3px;
  background: var(--color-accent);
  border-radius: 2px;
}

.une-featured__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
@media (max-width: 580px) {
  .une-featured__list { grid-template-columns: 1fr; }
}

.une-featured-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--color-border);
  border-top: 4px solid var(--color-primary);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: box-shadow var(--transition-slow), transform var(--transition-slow), border-top-color var(--transition);
}
.une-featured-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
  border-top-color: var(--color-accent);
}

.une-featured-card__thumb-link {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 7;
  overflow: hidden;
}
.une-featured-card__thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.une-featured-card:hover .une-featured-card__thumb { transform: scale(1.04); }

.une-featured-card__body {
  flex: 1;
  min-width: 0;
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.une-featured-card__cat {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-primary);
}

.une-featured-card__title {
  font-size: 1.15rem;
  margin: 0;
  line-height: 1.3;
}
.une-featured-card__title a {
  color: var(--color-text);
  text-decoration: none;
  transition: color var(--transition);
}
.une-featured-card__title a:hover { color: var(--color-primary) !important; }

.une-featured-card__excerpt {
  font-size: 0.875rem;
  color: var(--color-muted);
  margin: 0;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.une-featured-card__date {
  font-size: 0.75rem;
  color: var(--color-muted);
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: auto;
  padding-top: 0.5rem;
}
.une-featured-card__date::before {
  content: '';
  display: inline-block;
  width: 1rem; height: 2px;
  background: var(--color-accent);
  border-radius: 1px;
  flex-shrink: 0;
}

/* =============================================================
   NEWS SECONDARY — actualités secondaires (liste compacte)
   ============================================================= */
.news-secondary {
  border-top: 1px solid var(--color-border);
  padding-top: 2rem;
  margin-top: 0.5rem;
}

.news-secondary__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.news-secondary__title {
  /* font-size: 0.75rem; */
  /* font-weight: 700; */
  /* text-transform: uppercase; */
  /* letter-spacing: 0.12em; */
  color: var(--color-muted);
  margin: 0;
}

.news-secondary__all {
  /* font-size: 0.8rem; */
  color: var(--color-primary) !important;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--transition);
}
.news-secondary__all:hover { color: var(--color-accent-dark) !important; }

.news-secondary__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.news-secondary-item {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--color-border);
  transition: background var(--transition);
}
.news-secondary-item:last-child { border-bottom: none; }

.news-secondary-item__thumb-link {
  display: block;
  width: 88px;
  height: 88px;
  flex-shrink: 0;
  border-radius: var(--radius);
  overflow: hidden;
}
.news-secondary-item__thumb {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.news-secondary-item:hover .news-secondary-item__thumb { transform: scale(1.08); }

.news-secondary-item__thumb--placeholder {
  object-fit: contain;
  padding: 0.75rem;
  background-color: var(--color-bg-soft);
  filter: grayscale(1) opacity(0.35);
  transition: none;
}
.news-secondary-item:hover .news-secondary-item__thumb--placeholder { transform: none; }

.une-featured-card__thumb--placeholder,
.news-card__thumb--placeholder {
  object-fit: contain;
  padding: 1.5rem;
  background-color: var(--color-bg-soft);
  filter: grayscale(1) opacity(0.35);
  transition: none;
}
.une-featured-card:hover .une-featured-card__thumb--placeholder,
.news-card:hover .news-card__thumb--placeholder { transform: none; }

.news-secondary-item__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.news-secondary-item__title {
  font-size: 1rem;
  font-family: "LibreBaskerville", Georgia, serif;
  margin: 0;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.news-secondary-item__title a {
  color: var(--color-text);
  text-decoration: none;
  transition: color var(--transition);
}
.news-secondary-item__title a:hover { color: var(--color-primary) !important; }

.news-secondary-item__date {
  font-size: 0.75rem;
  color: var(--color-muted);
}

/* =============================================================
   PANNEAU POCKET WIDGET
   ============================================================= */
.pp-widget {
  position: relative;
  width: 100%;
  height: 580px;
  border-radius: var(--radius);
  overflow: hidden;
}

@media (max-width: 580px) {
  .pp-widget { height: 480px; }
}

/* =============================================================
   BACK TO TOP
   ============================================================= */
a.generate-back-to-top {
  background-color: var(--color-primary) !important;
  color: #ffffff !important;
  border-radius: var(--radius) !important;
}
a.generate-back-to-top:hover,
a.generate-back-to-top:focus {
  background-color: var(--color-primary-dark) !important;
  color: #ffffff !important;
}

/* =============================================================
   UTILITIES
   ============================================================= */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.divider--gold {
  border: none; height: 2px;
  background: linear-gradient(to right, transparent, var(--color-accent) 30%, var(--color-accent) 70%, transparent);
  margin-block: 2.5rem; opacity: 0.5;
}

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* =============================================================
   GRADIENT UTILITIES
   Naming: gradient-[couleurs]-[direction]  h=horizontal v=vertical d=diagonal
   ============================================================= */

/* ── Verts ──────────────────────────────────────────────────── */
.gradient-green-h       { background: linear-gradient(to right,  var(--color-primary)      0%, var(--color-primary-dark)  100%); }
.gradient-green-v       { background: linear-gradient(to bottom, var(--color-primary)      0%, var(--color-primary-dark)  100%); }
.gradient-darkgreen-h   { background: linear-gradient(to right,  var(--color-primary-dark) 0%, var(--color-primary)       100%); }
.gradient-darkgreen-v   { background: linear-gradient(to bottom, var(--color-primary-dark) 0%, var(--color-primary)       100%); }
.gradient-forest-h      { background: linear-gradient(to right,  #0f2e0f 0%, var(--color-primary-dark) 45%, var(--color-primary) 100%); }
.gradient-forest-v      { background: linear-gradient(to bottom, #0f2e0f 0%, var(--color-primary-dark) 100%); }

/* ── Or / Gold ──────────────────────────────────────────────── */
.gradient-gold-h        { background: linear-gradient(to right,  var(--color-accent-dark) 0%, var(--color-accent) 50%, var(--color-accent-light) 100%); }
.gradient-gold-v        { background: linear-gradient(to bottom, var(--color-accent-dark) 0%, var(--color-accent-light) 100%); }

/* ── Vert + Or ──────────────────────────────────────────────── */
.gradient-green-gold-h  { background: linear-gradient(to right,  var(--color-primary-dark) 0%, var(--color-primary) 45%, var(--color-accent) 100%); }
.gradient-green-gold-v  { background: linear-gradient(to bottom, var(--color-primary-dark) 0%, var(--color-accent)  100%); }
.gradient-green-gold-d  { background: linear-gradient(135deg,    var(--color-primary-dark) 0%, var(--color-accent)  100%); }

/* ── Bleu-gris ──────────────────────────────────────────────── */
.gradient-bluegray-h    { background: linear-gradient(to right,  var(--color-bluegray) 0%, var(--color-primary-dark) 100%); }
.gradient-bluegray-v    { background: linear-gradient(to bottom, var(--color-bluegray) 0%, var(--color-primary-dark) 100%); }

/* ── Clairs (fonds de sections) ─────────────────────────────── */
.gradient-cream-h       { background: linear-gradient(to right,  #f0f6ea 0%, #fafaf7 100%); }
.gradient-cream-v       { background: linear-gradient(to bottom, var(--color-bg-soft) 0%, var(--color-bg) 100%); }

/* =============================================================
   HEADER SEARCH
   ============================================================= */
/* =============================================================
   HEADER CTA GROUP — tagline + bouton "Contacter la mairie"
   ============================================================= */
.header-cta-group {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.22rem;
  margin-left: auto;
  margin-right: 0.85rem;
  flex-shrink: 0;
}

.header-tagline {
  font-size: 0.6rem;
  color: var(--color-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1;
}

.header-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.52rem 1.3rem;
  background: var(--color-primary);
  color: #fff !important;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: 999px;
  text-decoration: none !important;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(29, 94, 29, 0.22);
  transition: background var(--transition), box-shadow var(--transition), transform var(--transition);
}
.header-cta:hover,
.header-cta:focus-visible {
  background: var(--color-primary-dark);
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(29, 94, 29, 0.38);
}
.header-cta:active { transform: translateY(0); box-shadow: 0 2px 8px rgba(29, 94, 29, 0.22); }

.header-search {
  display: flex;
  align-items: center;
  /* margin-left: auto supprimé — désormais géré par .header-cta */
}

/* ── Boutons icon communs (submit desktop + toggle mobile) ──── */
.header-search__submit,
.header-search__mobile-toggle,
.header-search__close {
  background-color: transparent !important;
  box-shadow:        none !important;
  border:            none !important;
  transform:         none !important;
  color: var(--color-primary-dark) !important;
  padding: 0.4rem 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  cursor: pointer;
  line-height: 0;
  flex-shrink: 0;
  transition: background-color var(--transition), color var(--transition);
}
.header-search__submit:hover,
.header-search__submit:focus-visible,
.header-search__mobile-toggle:hover,
.header-search__mobile-toggle:focus-visible,
.header-search__close:hover,
.header-search__close:focus-visible {
  background-color: rgba(46, 107, 46, 0.08) !important;
  color: var(--color-primary) !important;
  transform: none !important;
  box-shadow: none !important;
}
.header-search__mobile-toggle[aria-expanded="true"] {
  background-color: rgba(46, 107, 46, 0.1) !important;
  color: var(--color-primary) !important;
}

/* ── Desktop : formulaire inline ─────────────────────────────── */
.header-search__inline {
  display: flex;
  align-items: center;
  border: 1.5px solid rgba(29, 94, 29, 0.28);
  border-radius: var(--radius);
  background: rgba(29, 94, 29, 0.03);
  overflow: hidden;
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}
.header-search__inline:focus-within {
  border-color: var(--color-primary-light);
  box-shadow: 0 0 0 3px rgba(46, 107, 46, 0.12);
  background: #fff;
}

.header-search__inline-input {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  outline: none !important;
  padding: 0.38rem 0.6rem 0.38rem 0.85rem !important;
  font-size: 0.875rem;
  width: 210px;
  color: var(--color-text);
  border-radius: 0 !important;
}
.header-search__inline-input:focus {
  border: none !important;
  box-shadow: none !important;
}

/* Diviseur visuel entre input et bouton loupe */
.header-search__submit {
  border-left: 1px solid var(--color-border) !important;
  border-radius: 0 !important;
  padding: 0.4rem 0.55rem !important;
}

/* ── Mobile toggle : affiché uniquement sous 768px ──────────── */
.header-search__mobile-toggle { display: none; }

/* ── Panel slide-down (mobile) ───────────────────────────────── */
.header-search__panel {
  position: fixed;
  left: 0; right: 0;
  z-index: 998;
  background: rgba(250, 250, 247, 0.98);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 2px solid var(--color-accent);
  border-bottom: 1px solid var(--color-border);
  padding: 0.85rem var(--container-pad);
  box-shadow: 0 8px 28px rgba(30, 60, 30, 0.14);

  opacity: 0;
  transform: translateY(-6px);
  visibility: hidden;
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s 0.22s;
  pointer-events: none;
}
.header-search__panel.is-open {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  transition: opacity 0.22s ease, transform 0.22s ease;
  pointer-events: all;
}

.header-search__panel-form {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  max-width: 640px;
  margin: 0 auto;
}

.header-search__input-wrap {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
}

.header-search__form-icon {
  position: absolute;
  left: 0.8rem;
  color: var(--color-muted);
  pointer-events: none;
  display: flex;
}

.header-search__panel-input {
  width: 100%;
  padding: 0.6rem 1rem 0.6rem 2.6rem !important;
  border: 2px solid var(--color-border) !important;
  border-radius: var(--radius) !important;
  font-size: 1rem;
  background: #fff;
  color: var(--color-text);
  box-shadow: none !important;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.header-search__panel-input:focus {
  border-color: var(--color-primary-light) !important;
  box-shadow: 0 0 0 3px rgba(46, 107, 46, 0.15) !important;
  outline: none;
}

/* =============================================================
   BURGER CUSTOM (mobile uniquement — proxy vers le toggle GP)
   ============================================================= */
.header-burger { display: none; }

/* =============================================================
   NAVIGATION MOBILE — cohérence avec la palette desktop (vert)
   ============================================================= */
@media (max-width: 768px) {
  #site-navigation.toggled,
  .main-navigation.toggled {
    background: linear-gradient(to bottom, var(--color-primary) 0%, var(--color-primary-dark) 100%) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }
  #site-navigation.toggled .main-nav ul li a,
  .main-navigation.toggled .main-nav ul li a {
    color: rgba(255, 255, 255, 0.9) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding-block: 0.75rem;
  }
  #site-navigation.toggled .main-nav ul li a:hover,
  .main-navigation.toggled .main-nav ul li a:hover {
    color: var(--color-accent-light) !important;
    background-color: rgba(255, 255, 255, 0.06) !important;
  }
  #site-navigation.toggled .main-nav ul li[class*="current-menu-"] > a,
  .main-navigation.toggled .main-nav ul li[class*="current-menu-"] > a {
    color: var(--color-accent) !important;
    font-weight: 600;
  }
  .main-navigation.toggled .dropdown-menu-toggle {
    color: rgba(255, 255, 255, 0.7) !important;
  }
  /* Sous-menus */
  .main-navigation.toggled ul ul {
    background-color: rgba(0, 0, 0, 0.15) !important;
    border-top: none !important;
  }
  .main-navigation.toggled ul ul li a {
    color: rgba(255, 255, 255, 0.8) !important;
    padding-left: 2rem;
  }
}

/* =============================================================
   MOBILE — HEADER COMPACT
   ============================================================= */
@media (max-width: 768px) {
  /* Padding réduit → header moins haut */
  .site-header .inside-header {
    padding-top:    0.5rem !important;
    padding-bottom: 0.5rem !important;
    flex-direction: row;
  }

  .site-branding-container {
    margin: auto;
  }

  /* Logo légèrement compact */
  .site-branding .main-title .main-title-1 { font-size: 0.68rem; }
  .site-branding .main-title .main-title-2 { font-size: 1.7rem; line-height: 2rem; }
  .site-branding .main-title .main-title-3 { font-size: 1.25rem; }

  /* Burger GP natif → caché (remplacé par .header-burger) */
  .main-navigation .menu-toggle { display: none !important; }

  /* Burger custom : visuellement à gauche du logo */
  .header-burger {
    display:          flex;
    align-items:      center;
    justify-content:  center;
    order:            -1;
    background-color: transparent !important;
    box-shadow:       none !important;
    border:           none !important;
    transform:        none !important;
    color:            var(--color-primary-dark) !important;
    padding:          0.45rem 0.65rem;
    cursor:           pointer;
    line-height:      0;
    border-radius:    var(--radius);
    transition:       background-color var(--transition), color var(--transition);
  }
  .header-burger:hover,
  .header-burger:focus-visible {
    background-color: rgba(46, 107, 46, 0.08) !important;
    color:            var(--color-primary) !important;
    transform:        none !important;
    box-shadow:       none !important;
  }
  .header-burger[aria-expanded="true"] {
    background-color: rgba(46, 107, 46, 0.1) !important;
    color:            var(--color-primary) !important;
  }

  /* CTA group masqué sur mobile (Contact est dans le menu burger) */
  .header-cta-group { display: none; }

  /* Loupe à droite */
  .site-header .inside-header .header-search { order: 1; margin-left: auto; }

  /* Desktop inline search → caché ; toggle mobile → visible */
  .header-search__inline        { display: none; }
  .header-search__mobile-toggle { display: flex; }

  #heroFullscreen {
    display: none;
  }
}

/* =============================================================
   HOME CARD — enveloppe blanche avec effet carte sur le hero
   ============================================================= */
.home-card {
  background: #fff;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: 0 -10px 40px rgba(20, 48, 20, 0.13);
  overflow: hidden;
}

/* =============================================================
   SECTION "À LA UNE"
   ============================================================= */
.une-section {
  background-color: var(--color-bg-soft);
  padding-block: clamp(2rem, 4vw, 3.5rem);
  border-bottom: 1px solid var(--color-border);
}

.une-section__title {
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  color: var(--color-primary-dark);
  margin: 0 0 1.75rem;
  position: relative;
  padding-bottom: 0.6rem;
}
.une-section__title::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 3rem; height: 3px;
  background: var(--color-accent);
  border-radius: 2px;
}

/* Grille de tuiles */
.une-grid { display: grid; gap: 1.5rem; }
.une-grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.une-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .une-grid--cols-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 580px) {
  .une-grid--cols-2,
  .une-grid--cols-3 { grid-template-columns: 1fr; }
}

/* Tuile */
.une-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--transition-slow), transform var(--transition-slow);
}
.une-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
}
/* Filet vert→or toujours visible en haut de la tuile */
.une-card::before {
  content: '';
  display: block;
  height: 4px;
  background: linear-gradient(to right, var(--color-primary), var(--color-accent));
  flex-shrink: 0;
}

.une-card__thumb-link { display: block; overflow: hidden; }
.une-card__thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.une-card:hover .une-card__thumb { transform: scale(1.04); }

.une-card__body {
  padding: 1.35rem 1.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.une-card__title {
  font-size: 1.15rem;
  color: var(--color-primary-dark);
  margin: 0;
  line-height: 1.3;
  font-family: "LibreBaskerville", Georgia, serif;
}
.une-card__title-link {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition);
}
.une-card__title-link:hover { color: var(--color-primary); }

.une-card__subtitle {
  font-size: 0.9rem;
  color: var(--color-muted);
  margin: 0;
  line-height: 1.5;
}

.une-card__cta {
  margin-top: auto;
  padding-top: 1rem;
}
.une-card__cta a {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition), letter-spacing var(--transition);
}
.une-card__cta a:hover { color: var(--color-accent-dark); }

/* =============================================================
   HOME LAYOUT — deux colonnes (Actualités + Sidebar)
   ============================================================= */
.home-layout {
  padding-block: clamp(2.5rem, 5vw, 4rem);
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}
.home-layout--has-sidebar {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 2.5rem;
  align-items: start;
}

.home-layout__main { min-width: 0; }

/* Neutraliser le padding du news-section quand il est dans home-layout */
.home-layout__main .news-section { padding-block: 0; }

.home-layout__sidebar {
  position: sticky;
  top: calc(80px + 1.5rem);
}

/* Widget dans la sidebar */
.home-layout__sidebar .widget {
  background: var(--color-bg-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.25rem 1.35rem;
  margin-bottom: 1.25rem;
}
.home-layout__sidebar .widget:last-child { margin-bottom: 0; }

.home-layout__sidebar .widget-title {
  font-size: 1.25rem;
  font-family: "LibreBaskerville", Georgia, serif;
  color: var(--color-primary-dark);
  margin: 0 0 0.85rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--color-accent);
}

.home-layout__sidebar .widget ul {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 0.4rem;
}
.home-layout__sidebar .widget ul li a {
  font-size: 0.875rem;
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition);
}
.home-layout__sidebar .widget ul li a:hover { color: var(--color-accent-dark); }

@media (max-width: 900px) {
  .home-layout--has-sidebar {
    grid-template-columns: 1fr;
  }
  .home-layout__sidebar {
    position: static;
  }
}

/* =============================================================
   CF7 — layout horizontal desktop : label gauche / input droite
   ============================================================= */

/* Variable locale pour la largeur du label — facile à ajuster */
.contact-form-fields { --cf7-label-w: 160px; }

.wpcf7 { margin: 0; }

/* Chaque champ : ligne flex horizontale */
.contact-form-fields p {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0 0 0.75rem;
}

/* Label : colonne fixe, texte aligné à droite */
.contact-form-fields p > label {
  flex-shrink: 0;
  width: var(--cf7-label-w);
  text-align: right;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.4;
}
.contact-form-fields p > label abbr {
  color: var(--color-red);
  text-decoration: none;
  font-style: normal;
  margin-left: 2px;
}

/* Textarea : aligner le label en haut (pas centré) */
.contact-form-fields p.is-textarea { align-items: flex-start; }
.contact-form-fields p.is-textarea > label { padding-top: 0.65rem; }

/* Bouton : indenté de la largeur du label pour s'aligner sur les inputs */
.contact-form-fields p.is-submit { padding-left: calc(var(--cf7-label-w) + 1rem); }

/* Le control-wrap (span CF7) s'étire pour remplir la droite */
.contact-form-fields p > .wpcf7-form-control-wrap {
  flex: 1;
  display: block;
  min-width: 0;
}

/* Champs */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea,
.wpcf7 select {
  display: block;
  width: 100%;
  padding: 0.6rem 0.85rem !important;
  border: 1.5px solid var(--color-border) !important;
  border-radius: var(--radius) !important;
  font-size: 0.95rem;
  color: var(--color-text);
  background: #fff;
  box-shadow: none !important;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.wpcf7 input[type="text"]:focus,
.wpcf7 input[type="email"]:focus,
.wpcf7 input[type="tel"]:focus,
.wpcf7 textarea:focus,
.wpcf7 select:focus {
  border-color: var(--color-primary-light) !important;
  box-shadow: 0 0 0 3px rgba(46, 107, 46, 0.15) !important;
  outline: none;
}

.wpcf7 textarea { resize: vertical; min-height: 130px; }

/* Select avec flèche personnalisée */
.wpcf7 select {
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%231d5e1d' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 16px;
  padding-right: 2.5rem !important;
}

/* Champ invalide */
.wpcf7-not-valid {
  border-color: var(--color-red) !important;
  box-shadow: 0 0 0 3px rgba(215, 39, 59, 0.1) !important;
}
.wpcf7-not-valid-tip {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.78rem;
  color: var(--color-red);
  font-weight: 500;
}

/* Bouton d'envoi */
.wpcf7 input[type="submit"],
.wpcf7 .wpcf7-submit {
  display: inline-flex !important;
  align-items: center !important;
  padding: 0.72rem 2rem !important;
  background: var(--color-primary) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--radius) !important;
  font-size: 0.97rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(29, 94, 29, 0.2) !important;
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition) !important;
}
.wpcf7 input[type="submit"]:hover,
.wpcf7 .wpcf7-submit:hover {
  background: var(--color-primary-dark) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 14px rgba(29, 94, 29, 0.3) !important;
}
.wpcf7 input[type="submit"]:disabled,
.wpcf7 .wpcf7-submit:disabled {
  opacity: 0.6;
  transform: none !important;
  cursor: not-allowed;
}

/* Spinner pendant l'envoi */
.wpcf7 .ajax-loader { display: none !important; }
.wpcf7-form.submitting .wpcf7-submit::after {
  content: '';
  display: inline-block;
  width: 13px; height: 13px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: cf7-spin 0.7s linear infinite;
  margin-left: 9px;
}
@keyframes cf7-spin { to { transform: rotate(360deg); } }

/* Messages de retour — indentés pour s'aligner sur les inputs */
.wpcf7-response-output {
  margin: 1rem 0 0 calc(var(--cf7-label-w) + 1rem) !important;
  padding: 0.8rem 1rem !important;
  border-radius: var(--radius) !important;
  font-size: 0.9rem !important;
  border: none !important;
  border-left: 4px solid transparent !important;
}
.wpcf7-form.sent .wpcf7-response-output {
  background: rgba(29, 94, 29, 0.07) !important;
  color: var(--color-primary-dark) !important;
  border-left-color: var(--color-primary) !important;
}
.wpcf7-form.invalid .wpcf7-response-output,
.wpcf7-form.failed .wpcf7-response-output,
.wpcf7-form.spam .wpcf7-response-output {
  background: rgba(215, 39, 59, 0.06) !important;
  color: #b01c2e !important;
  border-left-color: var(--color-red) !important;
}
.wpcf7-form.unaccepted .wpcf7-response-output {
  background: rgba(201, 170, 0, 0.08) !important;
  color: var(--color-accent-dark) !important;
  border-left-color: var(--color-accent) !important;
}

/* Honeypot hors-écran */
.cf7-hp {
  position: absolute !important;
  left: -9999px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Mobile — retour au layout vertical */
@media (max-width: 640px) {
  .contact-form-fields p {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
    margin-bottom: 1rem;
  }
  .contact-form-fields p > label {
    width: auto;
    text-align: left;
  }
  .contact-form-fields p.is-textarea { align-items: flex-start; }
  .contact-form-fields p.is-textarea > label { padding-top: 0; }
  .contact-form-fields p.is-submit { padding-left: 0; }
  .wpcf7-response-output { margin-left: 0 !important; }
}

/* =============================================================
   SIDEBAR WIDGET — Infos pratiques
   ============================================================= */
.sw-info {
  display: flex;
  flex-direction: column;
}

.sw-info__row {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--color-border);
}
.sw-info__row:last-child { border-bottom: none; }

.sw-info__icon {
  flex-shrink: 0;
  width: 1.05rem;
  height: 1.05rem;
  margin-top: 0.15rem;
  color: var(--color-primary);
  opacity: 0.8;
}

.sw-info__address {
  font-style: normal;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--color-text);
  margin: 0;
}

.sw-info__addr-link { text-decoration: none; }
.sw-info__addr-link:hover .sw-info__address { color: var(--color-primary); }

.sw-info__link {
  font-size: 0.875rem;
  color: var(--color-primary) !important;
  text-decoration: none;
  word-break: break-all;
  transition: color var(--transition);
}
.sw-info__link:hover { color: var(--color-accent-dark) !important; }

.sw-info__hours {
  font-size: 0.82rem;
  line-height: 1.75;
  color: var(--color-text);
}

/* =============================================================
   SIDEBAR WIDGET — Zoom sur
   ============================================================= */
.sw-zoom__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sw-zoom__item { border-bottom: 1px solid var(--color-border); }
.sw-zoom__item:last-child { border-bottom: none; }

.sw-zoom__link {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 0;
  font-size: 0.875rem;
  color: var(--color-primary) !important;
  text-decoration: none;
  transition: color var(--transition), gap var(--transition);
}
.sw-zoom__link--plain { cursor: default; }
.sw-zoom__link:not(.sw-zoom__link--plain):hover {
  color: var(--color-accent-dark) !important;
  gap: 0.55rem;
}
.sw-zoom__link:not(.sw-zoom__link--plain):hover .sw-zoom__arrow {
  color: var(--color-accent-dark);
}

.sw-zoom__arrow {
  flex-shrink: 0;
  width: 0.9rem;
  height: 0.9rem;
  color: var(--color-accent);
  transition: color var(--transition);
}

/* =============================================================
   SIDEBAR WIDGET — Panneau Pocket App
   ============================================================= */
.widget_gp_child_pp_app {
  background: linear-gradient(160deg, #1565c0 0%, #0d3f96 100%) !important;
  border-color: #0d3f96 !important;
  padding: 1.35rem 1.1rem 1.2rem !important;
}

.sw-pp { text-align: center; color: white; }

/* Phone mockup */
.sw-pp__visual {
  position: relative;
  display: inline-block;
  margin-bottom: 0.9rem;
}

.sw-pp__phone {
  width: 82px;
  height: 150px;
  background: #07266b;
  border: 3px solid rgba(255, 255, 255, 0.25);
  border-radius: 14px;
  position: relative;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  overflow: hidden;
}
.sw-pp__phone::before {
  content: '';
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 3px;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 2px;
  z-index: 1;
}

.sw-pp__phone-screen {
  width: 66px;
œ
  background: linear-gradient(180deg, #1a6fb5 0%, #1250a0 100%);
  border-radius: 4px;
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 6px 4px;
  overflow: hidden;
}
.sw-pp__phone-screen::after {
  content: '';
  display: block;
  height: 12px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}

.sw-pp__phone-notif {
  background: rgba(255, 255, 255, 0.96);
  border-radius: 3px;
  padding: 4px 5px;
  display: flex;
  align-items: center;
  gap: 4px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

.sw-pp__notif-dot {
  width: 8px;
  height: 8px;
  background: #1565c0;
  border-radius: 50%;
  flex-shrink: 0;
}

.sw-pp__notif-text {
  font-size: 0.5rem;
  font-weight: 700;
  color: #1250a0;
  font-family: system-ui, sans-serif;
  white-space: nowrap;
  overflow: hidden;
}

.sw-pp__badge {
  position: absolute;
  top: -6px;
  right: -9px;
  width: 20px;
  height: 20px;
  background: #f44336;
  border: 2.5px solid white;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 700;
  color: white;
  font-family: system-ui, sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  z-index: 2;
}

.sw-pp__name {
  font-size: 1.15rem;
  font-weight: 700;
  color: white;
  margin: 0 0 0.4rem;
  font-family: system-ui, -apple-system, sans-serif;
  letter-spacing: -0.01em;
}

.sw-pp__text {
  font-size: 0.8rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.88);
  margin: 0 0 0.95rem;
}

.sw-pp__stores {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.sw-pp__store-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.5rem 0.75rem;
  background: rgba(255, 255, 255, 0.13);
  border: 1.5px solid rgba(255, 255, 255, 0.38);
  border-radius: 8px;
  color: white !important;
  text-decoration: none;
  font-size: 0.8rem;
  font-weight: 600;
  font-family: system-ui, sans-serif;
  transition: background var(--transition), border-color var(--transition);
}
.sw-pp__store-btn:hover {
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.6);
  color: white !important;
}

.sw-pp__store-icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

/* =============================================================
   SIDEBAR WIDGET — Téléchargement
   ============================================================= */
.sw-dl {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.sw-dl__icon-wrap {
  flex-shrink: 0;
  width: 3rem;
  height: 3rem;
  background: var(--color-accent);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}
.sw-dl__icon-wrap svg {
  width: 1.4rem;
  height: 1.4rem;
}

.sw-dl__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.sw-dl__label {
  display: block;
  font-size: 0.78rem;
  color: var(--color-muted);
  line-height: 1.4;
}

.sw-dl__btn {
  display: inline-flex;
  align-items: center;
  padding: 0.38rem 0.9rem;
  background: var(--color-primary);
  color: white !important;
  border-radius: var(--radius);
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  width: fit-content;
  transition: background var(--transition), transform var(--transition);
}
.sw-dl__btn:hover {
  background: var(--color-primary-dark);
  color: white !important;
  transform: translateY(-1px);
}

/* =============================================================
   ACTUALITÉS ARCHIVE — filtres + pagination
   ============================================================= */
.actu-archive { padding-block: clamp(2rem, 4vw, 3.5rem); }

.actu-archive__title {
  margin-bottom: 1.75rem;
}

/* Filtres */
.actu-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
  margin-bottom: 2rem;
  padding: 1rem 1.25rem;
  background: var(--color-bg-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.actu-filters__group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.actu-filters__group label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-muted);
  white-space: nowrap;
}

.actu-filters__reset {
  font-size: 0.82rem;
  color: var(--color-muted) !important;
  text-decoration: none;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 0.28rem 0.75rem;
  transition: color var(--transition), border-color var(--transition), background var(--transition);
  white-space: nowrap;
}
.actu-filters__reset:hover {
  color: var(--color-text) !important;
  border-color: var(--color-muted);
  background: rgba(0,0,0,0.04);
}

/* Message vide */
.actu-empty {
  padding: 3rem;
  text-align: center;
  color: var(--color-muted);
  font-size: 1.05rem;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-lg);
}

/* Pagination */
.actu-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border);
}

.actu-pagination__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.4rem;
  height: 2.4rem;
  padding: 0 0.6rem;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-primary) !important;
  text-decoration: none;
  background: #fff;
  transition: border-color var(--transition), background var(--transition), color var(--transition), box-shadow var(--transition);
  line-height: 1;
}
.actu-pagination__btn:hover {
  border-color: var(--color-primary-light);
  background: rgba(29, 94, 29, 0.05);
  color: var(--color-primary-dark) !important;
  box-shadow: 0 1px 4px rgba(29, 94, 29, 0.1);
}
.actu-pagination__btn.is-current {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff !important;
  font-weight: 700;
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(29, 94, 29, 0.25);
}
.actu-pagination__btn--prev,
.actu-pagination__btn--next {
  gap: 0.3rem;
  padding: 0 0.85rem;
  color: var(--color-muted) !important;
}
.actu-pagination__btn--prev:hover,
.actu-pagination__btn--next:hover {
  color: var(--color-primary-dark) !important;
}
.actu-pagination__ellipsis {
  display: inline-flex;
  align-items: flex-end;
  height: 2.4rem;
  padding: 0 0.3rem;
  color: var(--color-muted);
  font-size: 0.9rem;
  pointer-events: none;
  user-select: none;
}

@media (max-width: 480px) {
  .actu-pagination__btn { min-width: 2rem; height: 2rem; font-size: 0.82rem; }
}

/* ── Plan du site ─────────────────────────────────────────────── */
.sitemap {
  padding-block: 1rem 2rem;
}

.sitemap__section {
  margin-bottom: 2.5rem;
}

.sitemap__heading {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--color-primary);
  border-bottom: 2px solid var(--color-accent);
  padding-bottom: 0.4rem;
  margin-bottom: 1rem;
}

.sitemap__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sitemap__list--depth-0 > .sitemap__item {
  border-bottom: 1px solid var(--color-border);
}

.sitemap__list--depth-0 > .sitemap__item > a {
  display: block;
  padding: 0.55rem 0;
  font-weight: 600;
  color: var(--color-text);
  text-decoration: none;
  transition: color var(--transition);
}

.sitemap__list--depth-0 > .sitemap__item > a:hover {
  color: var(--color-primary);
}

.sitemap__list--depth-1 {
  margin: 0.25rem 0 0.5rem 1.25rem;
  border-left: 2px solid var(--color-border);
  padding-left: 1rem;
}

.sitemap__list--depth-1 > .sitemap__item > a {
  display: block;
  padding: 0.3rem 0;
  color: var(--color-muted);
  text-decoration: none;
  font-size: 0.95rem;
  transition: color var(--transition);
}

.sitemap__list--depth-1 > .sitemap__item > a:hover {
  color: var(--color-primary);
}

.sitemap__list--depth-2 {
  margin: 0.2rem 0 0.4rem 1rem;
  padding-left: 0.75rem;
}

.sitemap__list--depth-2 > .sitemap__item > a {
  display: block;
  padding: 0.2rem 0;
  color: var(--color-muted);
  font-size: 0.88rem;
  text-decoration: none;
  transition: color var(--transition);
}

.sitemap__list--depth-2 > .sitemap__item > a:hover {
  color: var(--color-primary);
}

/* ── Breadcrumb ───────────────────────────────────────────────── */
.breadcrumb {
  margin-bottom: 0.75rem;
}

.breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.8rem;
  color: var(--color-muted);
}

.breadcrumb__item {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.breadcrumb__link {
  color: var(--color-muted);
  text-decoration: none;
  transition: color var(--transition);
}

.breadcrumb__link:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

.breadcrumb__current {
  color: var(--color-text);
  font-weight: 500;
  max-width: 28ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.breadcrumb__sep {
  color: var(--color-border);
  font-size: 1.5em;
  line-height: 1.5em;
  user-select: none;
  margin: 0 0.2rem;
}

/* ── Navigation article précédent / suivant ────────────────── */
#nav-below {
  margin: 2.5rem 0 1rem;
  display: flex;
}

#nav-below > * {
  display: flex;
  gap: 1rem;
}

.nav-previous,
.nav-next {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  min-width: 0;
  transition: border-color var(--transition), background var(--transition);
}

/* masquer la flèche SVG du thème parent dans la nav article */
#nav-below .nav-previous svg,
#nav-below .nav-next svg {
  display: none;
}

.nav-previous:hover,
.nav-next:hover {
  border-color: var(--color-primary-light);
  background: var(--color-bg-soft);
}

.nav-direction {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-muted);
}

.nav-previous .prev a,
.nav-next .next a {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--color-text);
  text-decoration: none;
  transition: color var(--transition);
}

.nav-previous .prev a:hover,
.nav-next .next a:hover {
  color: var(--color-primary);
}

.nav-next {
  align-items: flex-end;
  text-align: right;
}

@media (max-width: 600px) {
  #nav-below > * {
    flex-direction: column;
  }
  .nav-next {
    align-items: flex-start;
    text-align: left;
  }
}