/* ==============================
   Variables
   ============================== */
:root {
  --vertclair: #c7d326;
  --vert: #8da127;
  --bleu: #4c73b2;
  --orange: #f29515;
  --bleuclair: #50c1e2;
  --text-color: #868681;
  --body-bg: #f8f7f0;
  --dark: #000;
  --dark-alt: #302f2f;
  --white: #ffffff;
}

/* ==============================
   Global
   ============================== */
.bg-white {
  background-color: var(--white) !important;
}
.ombre {
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  scroll-padding-top: 120px; /* Compensation pour le header fixed */
}

@media (max-width: 991px) {
  html {
    scroll-padding-top: 80px;
  }
}

@media (max-width: 575px) {
  html {
    scroll-padding-top: 70px;
  }
}

body {
  font-family: "DM Sans", sans-serif;
  font-size: 20px;
  line-height: 1.55;
  color: #333;
  background-color: var(--white);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Outfit", sans-serif;
  font-weight: 600;
}

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

.section-title {
  font-family: "Outfit", sans-serif;
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-weight: 600;
  line-height: 1.15;
  color: var(--bleu);
  margin-bottom: 30px;
}

.section-badge {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--vert);
  margin-bottom: 0.5rem;
}

/* ==============================
   Buttons
   ============================== */
.btn-fadear {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.75rem 1.5rem;
  background: var(--vertclair);
  color: var(--dark);
  font-family: "Outfit", sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  border: none;
  border-radius: 2rem;
  text-decoration: none;
  transition: all 0.25s ease;
}
.btn-fadear:hover {
  background: var(--vert);
  color: #fff;
  transform: translateY(-2px);
}
.btn-fadear .arrow-icon {
  width: 28px;
  height: 28px;
  background: var(--dark);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 0.85rem;
  flex-shrink: 0;
  transition: background 0.25s;
}
.btn-fadear:hover .arrow-icon {
  background: var(--dark-alt);
}

.btn-outline-fadear {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1.5rem;
  background: transparent;
  color: var(--vertclair);
  font-family: "Outfit", sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  border: 2px solid var(--vertclair);
  border-radius: 2rem;
  text-decoration: none;
  transition: all 0.25s ease;
}
.btn-outline-fadear:hover {
  background: var(--vertclair);
  color: var(--dark);
}

.btn-event {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.2rem;
  background: var(--vertclair);
  color: var(--dark);
  font-family: "Outfit", sans-serif;
  font-weight: 600;
  font-size: 0.85rem;
  border: none;
  border-radius: 2rem;
  text-decoration: none;
  transition: all 0.25s;
}
.btn-event:hover {
  background: var(--vert);
  color: #fff;
}

/* ==============================
   Site Header – Topbar + Navbar flottante (Figma fidèle)
   ============================== */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
}

.site-header .nav-btn-link{
  color: var(--body-bg);
  text-decoration: none;
}

/* ---- Masquer temporairement le lien newsletter dans la topbar ---- */
.topbar p a:first-child { display: none; }

/* ---- Topbar bleu ---- */
.topbar {
  background: var(--bleu);
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 max(20px, 15%);
  gap: 2rem;
}
/* ---- Topbar ADEAR 28 : le container interne gère le padding ---- */
.page-adear28 .topbar {
  padding: 0;
  overflow: hidden;
}
.topbar-link {
  color: var(--body-bg);
  font-family: "DM Sans", sans-serif;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  line-height: 1;
  transition: opacity 0.2s;
}
.topbar-link:hover {
  opacity: 0.75;
  color: var(--body-bg);
}

/* ---- Topbar boutons (sous-site ADEAR) ---- */
.topbar-btn {
  color: var(--body-bg);
  font-family: "DM Sans", sans-serif;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  line-height: 1;
  padding: 5px 13px;
  border: 1.5px solid transparent;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 0.2s, border-color 0.2s, opacity 0.2s;
  white-space: nowrap;
}
.topbar-btn:hover {
  background: rgba(255,255,255,0.15);
  border-color: rgba(255,255,255,0.85);
  color: var(--body-bg);
  opacity: 1;
}
.topbar-btn .bi {
  font-size: 12px;
  opacity: 0.85;
}

/* ---- Topbar minisite : liens issus de #TOP_MENU_MINISITE ---- */
.site-header--minisite .topbar p {
  margin: 0;
  display: contents;
}
.site-header--minisite .topbar a {
  color: var(--body-bg);
  font-family: "DM Sans", sans-serif;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  line-height: 1;
  padding: 5px 13px;
  border: 1.5px solid transparent;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 0.2s, border-color 0.2s, opacity 0.2s;
  white-space: nowrap;
}
.site-header--minisite .topbar a:hover {
  background: rgba(255,255,255,0.15);
  border-color: rgba(255,255,255,0.85);
  color: var(--body-bg);
  opacity: 1;
}

/* ---- Minisite : navbar pleine largeur bord à bord ---- */
.site-header--minisite .nav-outer {
  padding: 0;
}
.site-header--minisite .nav-inner {
  border-radius: 0;
  padding-left: max(12px, min(12%, 212px));
  padding-right: max(12px, min(12%, 212px));
}

/* ---- Logo ADEAR 28 dans la navbar ---- */
.nav-logo-adear28 {
  height: 48px;
  width: auto;
  object-fit: contain;
}

/* ---- Logo ADEAR 28 dans le footer (tout blanc) ---- */
.footer-logo-adear28 {
  height: 72px !important;
  filter: brightness(0) invert(1);
}

/* ---- Boutons réseaux sociaux footer avec icônes Bootstrap ---- */
.footer-social-btn--icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  color: #fff;
  font-size: 18px;
  text-decoration: none;
  transition: background 0.2s, transform 0.15s;
}
.footer-social-btn--icon:hover {
  background: rgba(255,255,255,0.3);
  color: #fff;
  transform: translateY(-2px);
}

/* ---- Minisite : navbar pleine largeur – ajustements responsifs ---- */
@media (max-width: 1250px) {
  .site-header--minisite .nav-inner {
    padding-left: max(12px, 1%);
    padding-right: max(12px, 1%);
  }
}
@media (max-width: 991px) {
  .site-header--minisite .nav-inner {
    padding-left: max(12px, 4%);
    padding-right: max(12px, 4%);
  }
}
@media (max-width: 575px) {
  .site-header--minisite .nav-inner {
    padding-left: 12px;
    padding-right: 12px;
  }
}

/* ---- Topbar mobile : scrollable horizontalement ---- */
@media (max-width: 768px) {
  .topbar {
    height: 44px;
    padding: 0 12px;
  }
  .page-adear28 .topbar {
    padding: 0;
  }
  .page-adear28 .topbar > .container-xl {
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    flex-wrap: nowrap;
    gap: 0.75rem;
    justify-content: flex-start !important;
    padding-left: 12px;
    padding-right: 12px;
  }
  .page-adear28 .topbar > .container-xl::-webkit-scrollbar {
    display: none;
  }
  .topbar-btn {
    font-size: 12px;
    padding: 4px 10px;
    white-space: nowrap;
    flex-shrink: 0;
  }
}

/* ---- Minisite : barre de titre de la page courante (sous le hero) ---- */
.minisite-page-title-bar {
  background: var(--white);
  border-bottom: 1px solid rgba(0,0,0,0.07);
  padding: 20px 0;
}
.minisite-page-title-bar .container-xl {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.minisite-page-logo {
  max-height: 72px;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
}
.minisite-page-title {
  font-size: 2rem;
  font-weight: 700;
  color: var(--vert);
  margin: 0;
  line-height: 1.2;
}
@media (max-width: 768px) {
  .minisite-page-title {
    font-size: 1.15rem;
  }
  .minisite-page-logo {
    max-height: 52px;
  }
}

/* ---- Navbar outer – marges centrées (11% sur 1920px, min 12px) ---- */
.nav-outer {
  padding: 0 max(12px, min(10%, 212px));
}

@media (max-width: 1500px) {
  .nav-outer {
    padding: 0 max(12px, min(1%, 212px));
  }
}

/* ---- Barre frosted glass (pas de bordure, Figma 6412-422) ---- */
.nav-inner {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border-radius: 0 0 16px 16px;
  padding: 38px 20px;
  height: 44px;
}

/* ---- Logo (Figma 6412-423) : chevauche topbar + navbar ---- */
.nav-logo-link {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
  position: relative;
  margin-top: -68px;
  margin-bottom: -14px;
  align-self: flex-start;
  margin-right: 24px;
  z-index: 2;
}
.nav-logo-img {
  height: 100px;
  width: auto;
  display: block;
  transition: opacity 0.3s ease;
}
.nav-logo-default {
  opacity: 0;
}
.nav-logo-hover {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 1;
}
.nav-logo-minisite {
  opacity: 1;
  position: static;
  object-fit: contain;
  margin-top: 20px;
}

/* ---- Liste de liens ---- */
.nav-list {
  display: flex;
  align-items: center;
  gap: 0;
  list-style: none;
  margin: 0 0 0 auto;
  padding: 0;
}

/* ---- Élément de menu avec sous-menu ---- */
.nav-item {
  position: relative;
}

/* ---- Bouton nav (avec image de fond brushstroke) ---- */
.nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  color: white;
  font-family: "DM Sans", sans-serif;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  transition: opacity 0.2s;
  cursor: pointer;
  border: none;
  background-color: transparent;
}
.nav-btn:hover {
  opacity: 0.8;
  color: white;
}
.nav-btn-plain {
  background-image: none !important;
}

/* État actif du bouton quand le sous-menu est ouvert */
.nav-item.active .nav-btn,
.nav-item:hover .nav-btn {
  opacity: 0.9;
}

/* Rotation du caret quand le sous-menu est ouvert */
.nav-item.active .nav-caret,
.nav-item:hover .nav-caret {
  transform: rotate(180deg);
}

/* ---- Sous-site ADEAR : réduire taille nav pour 7 items ---- */
/* ---- Navbar ADEAR 28 : fond pleine largeur, contenu centré ---- */
.page-adear28 .nav-outer {
  max-width: 100%;
  margin: 0;
  padding: 0;
  background: rgba(0, 0, 0, 0.36);
  /* Pas de backdrop-filter ici : cela crée un stacking context qui
     empêche le backdrop-filter du sous-menu de voir le contenu de la page */
}
.page-adear28 .nav-inner {
  max-width: 1320px;
  margin: 0 auto;
  padding-left: 12px;
  padding-right: 12px;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-radius: 0;
}
.page-adear28 .nav-btn {
  font-size: 13px;
  padding: 0 8px;
  gap: 3px;
}
.page-adear28 .nav-caret {
  border-left-width: 4px;
  border-right-width: 4px;
  border-top-width: 4px;
}
.page-adear28 .nav-list {
  gap: 0;
  flex: 1;
  justify-content: space-evenly;
}
.page-adear28 .nav-logo-link {
  margin-right: 12px;
}
.page-adear28 .nav-logo-adear28 {
  height: 64px;
}
.page-adear28 .nav-submenu {
  background: rgba(0, 0, 0, 0.36);
}

/* Hero ADEAR 28 : titre + séparateur en col-lg-4, punchline en col-lg-8 */
.page-adear28 .reseau-page-hero-title-row .reseau-page-title {
  margin-bottom: 0;
}
.page-adear28 .reseau-page-hero-title-row .reseau-page-separator {
  margin: 0.6rem 0 0;
  height: 5px;
  width: clamp(80px, 8vw, 140px);
  border-radius: 2px;
}
.page-adear28 .reseau-page-hero-title-row .reseau-page-subtitle {
  margin: 0;
  padding-left: 1.25rem;
  border-left: 4px solid var(--vertclair);
  font-family: "Outfit", sans-serif;
  font-size: clamp(1.1rem, 1.8vw, 1.45rem);
  font-weight: 600;
  line-height: 1.4;
  color: #fff;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

/* Lien direct sans dropdown (ex : Actualités) */
.nav-btn--direct {
  text-decoration: none;
  cursor: pointer;
}
.nav-btn--direct[aria-current="page"] {
  opacity: 0.75;
  border-bottom: 2px solid rgba(255,255,255,0.6);
}

.nav-caret {
  display: block;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid rgba(255, 255, 255, 0.8);
  flex-shrink: 0;
  margin-top: 1px;
  transition: transform 0.2s ease;
}

/* ---- Sous-menu desktop ---- */
.nav-submenu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  min-width: 220px;
  background: rgba(0, 0, 0, 0.36);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border-radius: 0 0 16px 16px;
  padding: 8px 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
  z-index: 1001;
  list-style: none;
  margin: 8px 0 0;
}

/* Pont transparent pour éviter le gap entre le bouton et le sous-menu */
.nav-submenu::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 0;
  right: 0;
  height: 12px;
  background: transparent;
}

/* Affichage au hover/click */
.nav-item:hover .nav-submenu,
.nav-item.active .nav-submenu,
.nav-submenu.show {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.nav-submenu-link {
  display: block;
  padding: 10px 20px;
  color: white;
  font-family: "DM Sans", sans-serif;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s;
  white-space: nowrap;
}

.nav-submenu-link:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--vertclair);
}

/* Séparateur dans le sous-menu */
.nav-submenu-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.15);
  margin: 6px 0;
}

/* ---- Burger mobile ---- */
.nav-burger {
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}
.nav-burger span {
  display: block;
  width: 26px;
  height: 2px;
  background: white;
  border-radius: 2px;
  transition: all 0.25s;
}

/* ---- Menu mobile ---- */
#mobileMenu {
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(10px);
  border-radius: 0 0 16px 16px;
  margin-top: -8px;
  padding-top: 8px;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
}

#mobileMenu.collapsing,
#mobileMenu.show {
  display: block;
}

.nav-mobile-list {
  list-style: none;
  margin: 0;
  padding: 8px 0 16px;
}

.nav-mobile-item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.nav-mobile-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0;
}

.nav-mobile-link {
  display: flex;
  align-items: center;
  flex: 1;
  padding: 14px 24px;
  color: white;
  font-family: "DM Sans", sans-serif;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 0.2s;
}
.nav-mobile-link:hover {
  color: var(--vertclair);
}

/* Bouton toggle pour sous-menu mobile */
.nav-mobile-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  transition: all 0.2s;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
}

.nav-mobile-toggle:hover {
  color: var(--vertclair);
  background: rgba(255, 255, 255, 0.05);
}

.nav-mobile-toggle i {
  font-size: 18px;
  transition: transform 0.25s ease;
}

.nav-mobile-item.submenu-open .nav-mobile-toggle i {
  transform: rotate(180deg);
}

/* Sous-menu mobile - même transparence que le menu principal */
.nav-mobile-submenu {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 0;
  overflow: hidden;
  transition:
    max-height 0.3s ease,
    opacity 0.3s ease;
  opacity: 0;
  background: rgba(0, 0, 0, 0.15);
}

.nav-mobile-item.submenu-open .nav-mobile-submenu {
  max-height: 500px;
  opacity: 1;
}

.nav-mobile-submenu-link {
  display: block;
  padding: 12px 24px 12px 48px;
  color: rgba(255, 255, 255, 0.85);
  font-family: "DM Sans", sans-serif;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.nav-mobile-submenu-link:hover {
  color: var(--vertclair);
  background: rgba(255, 255, 255, 0.05);
  padding-left: 52px;
}

/* ==============================
   Hero Section – image Figma fidèle
   ============================== */

.hero-section {
  position: relative;
  width: 100%;
  /* Image de fond Figma 1920×950px avec brushstroke blanc intégré en bas */
  background: url("../assets/images/hero-bg.png") top center / cover no-repeat;
  /* Rapport d'aspect 1920:950 pour que la section suive l'image */
  aspect-ratio: 1920 / 950;
  min-height: 320px;
}

/* Surcouche sombre (mix-blend-multiply) via pseudo-élément */
.hero-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../assets/images/hero-overlay.svg") top center / cover
    no-repeat;
  mix-blend-mode: multiply;
  z-index: 0;
  pointer-events: none;
}

/* Contenu positionné absolument par-dessus */
.hero-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* 263/1920 = 13.7vw → titre au bon endroit sur toutes les largeurs */
  padding-top: 13.7vw;
  z-index: 1;
  text-align: center;
}

/* Titre en vert-citron comme dans Figma */
.hero-title {
  font-family: "Outfit", sans-serif;
  font-size: clamp(2.2rem, 5.7vw, 6.6rem);
  font-weight: 600;
  line-height: 1.025;
  color: var(--vertclair);
  margin: 0 0 0.4rem;
  padding: 0 5%;
}

/* Ligne séparatrice fine (trait blanc Figma 115×2px) */
.hero-separator {
  width: clamp(60px, 6vw, 115px);
  height: 2px;
  background: white;
  border: none;
  margin: 0.5rem auto 0.7rem;
  flex-shrink: 0;
}

/* Sous-titre */
.hero-subtitle {
  font-family: "Outfit", sans-serif;
  font-size: clamp(0.95rem, 2.1vw, 2.125rem);
  font-weight: 400;
  color: var(--body-bg);
  line-height: 1.45;
  margin: 0 auto 2vw;
  padding: 0 5%;
  max-width: 900px;
}

/* Ligne de stats */
.hero-stats {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(20px, 4.5vw, 76px);
  flex-wrap: wrap;
}
.hero-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
}

/* Chiffre + vecteur décoratif empilés */
.stat-num-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Reserve space for the decorative vector below the number */
  padding-bottom: 0.6em;
}
.stat-vector {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 120%;
  height: auto;
  z-index: 0;
  pointer-events: none;
  opacity: 0.6;
}
/* Vecteurs verticaux (structures, formations) plus étroits */
/* .stat-vector--tall {
  width: 60%;
} */

.stat-number {
  display: block;
  font-family: "Outfit", sans-serif;
  font-size: clamp(2rem, 3.8vw, 3.75rem);
  font-weight: 600;
  color: var(--vertclair);
  line-height: 1;
  position: relative;
  z-index: 1;
}

.stat-label {
  display: block;
  font-family: "DM Sans", sans-serif;
  font-size: clamp(0.9rem, 1.7vw, 1.75rem);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.2;
  z-index: 200;
}

/* ==============================
   La FADEAR agit pour – fidèle Figma
   ============================== */
.agit-section {
  padding: 5rem 0 5rem;
  position: relative;
}

/* Titre 2 couleurs */
.agit-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  line-height: 1;
  gap: 0.1rem;
}
.agit-heading-top {
  font-family: "Outfit", sans-serif;
  font-size: clamp(2.5rem, 5vw, 4.375rem); /* 70px Figma */
  font-weight: 600;
  color: var(--vertclair);
  line-height: 1;
}
.agit-heading-bottom {
  font-family: "Outfit", sans-serif;
  font-size: clamp(2rem, 3.8vw, 3.25rem); /* 52px Figma */
  font-weight: 600;
  color: var(--bleu);
  line-height: 1.15;
}

/* Carte */
.agit-card {
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0px 4px 56.5px 0px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  transition: transform 0.3s;
}
.agit-card:hover {
  transform: translateY(-6px);
}
a.agit-card {
  display: block;
  text-decoration: none;
  color: inherit;
}

/* Zone image – wrapper extérieur (position relative, dépasse pour le badge) */
.agit-card-img-area {
  position: relative;
  height: 300px;
  overflow: visible;
}

/* Wrapper intérieur – clippe l'image à border-radius 10px tous côtés */
.agit-card-img-clip {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  overflow: hidden;
}

.agit-card-photo {
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  object-fit: cover;
  display: block;
  margin: 10px;
  border-radius: 5px;
  transition: transform 0.4s ease;
}
.agit-card:hover .agit-card-photo {
  transform: scale(1.04);
}

/* Corps de carte */
.agit-card-body {
  padding: 1.25rem 1.1rem 1.6rem;
  position: relative;
}

.agit-card-body::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 20%; /* ajuste selon tes besoins */
  height: 5px;
  background-color: var(--card-color);
}

.agit-card-title {
  font-family: "Outfit", sans-serif;
  font-size: 1.5rem; /* 24px Figma */
  font-weight: 600;
  line-height: 1.25;
  margin: 0;
  text-align: center;
}

/* Ligne d'accent sous le titre (Figma 2474-178) */
.agit-card-line {
  display: block;
  width: 100%;
  max-width: 80px;
  height: 3px;
  margin-top: 0.75rem;
  border-radius: 2px;
}

/* ==============================
   Actualités – fidèle Figma
   ============================== */
.actualites-section {
  position: relative;
  padding: 0 0 3.5rem;
  overflow-x: clip;
  overflow-y: visible;
}

/* Fond vert-citron partiel : couvre le titre + la moitié haute des cartes */
.actu-blue-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 587px;
  background: var(--vertclair);
  z-index: 0;
}

/* Titre */
.actu-heading {
  position: relative;
  z-index: 1;
  font-family: "Outfit", sans-serif;
  font-size: clamp(2.2rem, 4vw, 3.25rem);
  font-weight: 600;
  color: var(--bleu);
  text-align: center;
  margin: 0;
  padding: 4rem 0 2.5rem;
  line-height: 1.15;
}

/* ---- Track : bord-à-bord, les latérales sont coupées ---- */
.actu-track {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1.15fr 1fr;
  gap: 1.75rem;
  height: 500px;
  padding: 0;
  margin: 0 -9.1%;
}

/* Carte générique */
.actu-card {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  height: 100%;
}

/* Zone image */
.actu-card-img-clip {
  position: absolute;
  inset: 0;
  border-radius: 10px;
  overflow: hidden;
}
.actu-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}
.actu-card:hover .actu-card-img {
  transform: scale(1.04);
}

/* Dégradé sombre en bas */
.actu-card-gradient {
  position: absolute;
  inset: 0;
  border-radius: 10px;
  background: linear-gradient(
    to bottom,
    rgba(0, 24, 25, 0) 38.7%,
    rgba(0, 24, 25, 0.6) 66.9%,
    #001819 100%
  );
  pointer-events: none;
  z-index: 1;
}

/* Conteneur d'info en bas */
.actu-card-info {
  position: absolute;
  bottom: 20px;
  left: 20px;
  right: auto;
  width: calc(100% - 40px);
  max-width: 394px;
  z-index: 2;
}
.actu-card-info--tall {
  max-width: 414px;
  bottom: 20px;
}

/* Glassmorphism info box */
.actu-card-info-glass {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 1rem 1.4rem;
}
.actu-card-info-glass--tall {
  padding: 1.2rem 1.4rem;
}

/* Titre d'article (cartes latérales) */
.actu-card-title {
  font-family: "Outfit", sans-serif;
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--white);
  line-height: 1.5;
  margin: 0 0 0.3rem;
}

/* Description */
.actu-card-desc {
  font-family: "Albert Sans", "DM Sans", sans-serif;
  font-size: 1rem;
  color: var(--white);
  line-height: 1.25;
  margin: 0;
  opacity: 0.85;
}

/* Titre principal (carte centre) – vert-citron */
.actu-card-main-title {
  display: block;
  font-family: "Outfit", sans-serif;
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--vertclair);
  line-height: 1.25;
  margin: 0 0 1rem;
  text-decoration: none;
}
.actu-card-main-title:hover {
  text-decoration: underline;
  color: var(--vertclair);
}

/* Bouton "En savoir plus" dans la carte centre */
.actu-btn-event {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--bleu);
  color: var(--vertclair);
  font-family: "DM Sans", sans-serif;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  padding: 5px 5px 5px 20px;
  border-radius: 100px;
  transition: opacity 0.2s;
}
.actu-btn-event:hover {
  opacity: 0.88;
  color: var(--vertclair);
}
.actu-btn-arrow {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
}

/* CTA "Voir toutes les actualités" – fond blanc/crème */
.actu-cta-wrap {
  position: relative;
  z-index: 1;
  text-align: center;
  margin-top: 2rem;
  padding-bottom: 0.5rem;
}
.actu-btn-main {
  display: inline-flex;
  align-items: center;
  gap: 15px;
  background: var(--vertclair);
  color: #fff;
  font-family: "DM Sans", sans-serif;
  font-size: 1.06rem;
  font-weight: 600;
  text-decoration: none;
  padding: 5px 5px 5px 25px;
  border-radius: 100px;
  transition: opacity 0.2s;
}
.actu-btn-main:hover {
  opacity: 0.9;
  color: #fff;
}
.actu-btn-main-arrow {
  width: 50px;
  height: 50px;
  flex-shrink: 0;
}

/* Responsive mobile */
@media (max-width: 991px) {
  .actu-track {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, 320px);
    height: auto;
    margin: 0;
    padding: 0 1rem;
  }
  .actu-blue-bg {
    height: auto;
    min-height: 100%;
  }
}

/* ==============================
   Carto / Map Section – fidèle Figma
   ============================== */
.carto-section {
  background: var(--vert);
  padding: 6rem 0 5rem;
  position: relative;
  bottom: -40px;
  overflow: hidden;
  margin: 20px;
  border-radius: 10px;
  z-index: 100;
}

/* Fleur décorative grise en fond */
.carto-fleur-bg {
  position: absolute;
  top: -35%;
  right: 20%;
  left: auto;
  width: 200%;
  height: auto;
  opacity: 0.08;
  pointer-events: none;
  z-index: 0;
}

.carto-inner {
  position: relative;
  z-index: 1;
}

/* Conteneur colonne gauche */
.carto-col-wrap {
  position: relative;
}

/* Wrapper carte : parent de référence pour tous les éléments absolus */
.carto-map-wrap {
  position: relative;
  /* Marge gauche = 13% pour laisser de l'espace visible aux encarts DOM-TOM
     qui débordent à gauche de la carte (même proportion que Figma : ~81/556) */
  margin-left: 13%;
  overflow: visible;
}

/* Carte France blanche */
.carto-carte-img {
  width: 100%;
  height: auto;
  display: block;
}

/* Marqueurs réseau ADEAR */
.carto-markers {
  position: absolute;
  top: 5%;
  left: 10%;
  width: 80%;
  height: auto;
  pointer-events: none;
  z-index: 1;
}

/* ---- Feuilles décoratives ---- */
/* Taille = ~8.5% de la largeur de la carte (44px sur 556px en Figma) */
.carto-feuille {
  position: absolute;
  width: 8.5%;
  height: auto;
  pointer-events: none;
  z-index: 2;
}
/* Positions calculées depuis les insets Figma (% de la carte 556×571px) */
.carto-feuille--1  { left: 66.4%; top: 17.1%; }
.carto-feuille--2  { left: 63.1%; top: 40.4%; }
.carto-feuille--3  { left: 74.3%; top: 49.4%; }
.carto-feuille--4  { left: 80.4%; top: 37.5%; }
.carto-feuille--5  { left: 47.3%; top: 21.0%; }
.carto-feuille--6  { left: 53.1%; top: 37.3%; }
.carto-feuille--7  { left: 36.9%; top: 41.3%; }
.carto-feuille--8  { left: 27.3%; top: 29.2%; }
.carto-feuille--9  { left: 36.0%; top: 68.1%; }
.carto-feuille--10 { left: 51.3%; top: 56.0%; }
.carto-feuille--11 { left: 83.1%; top: 79.3%; }
.carto-feuille--12 { left: 50.9%; top: 78.7%; }
.carto-feuille--alt{ 
  left: 60.7%; 
  top: 60.7%;
  width: 14%;
 }

/* ---- Encarts DOM-TOM ----
   Positionnés absolument dans .carto-map-wrap :
   - Débordent à gauche de la carte (left négatif) : -14.57% de la carte (81/556)
   - Début vertical : 42.4% de la hauteur carte (242/571)
   - Largeur : 24.5% de la carte (136/556)
*/
.carto-dom-encarts {
  position: absolute;
  /* left = -13% → encart déborde de ~60px à gauche du map-wrap,
     mais reste visible car map-wrap a margin-left: 13% (≈69px) */
  left: -13%;
  top: 42%;
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 25%;
}
.carto-dom-card {
  background: var(--body-bg);
  border-radius: 20px;
  padding: 10px 8px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.carto-dom-map {
  width: 100%;
  height: auto;
  display: block;
}
.carto-dom-label {
  font-family: "DM Sans", sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--vert);
  margin-top: 5px;
  text-align: center;
  white-space: nowrap;
}

/* ---- Responsive ≤991px ---- */
@media (max-width: 991px) {
  .carto-map-wrap {
    margin-left: 0;
    overflow: hidden;
  }
  .carto-dom-encarts {
    position: static;
    flex-direction: row;
    justify-content: center;
    margin-top: 16px;
    width: auto;
    gap: 16px;
  }
  .carto-dom-card {
    width: 120px;
  }
}

/* Côté texte */
.carto-text-side {
  padding-left: 2rem;
}

@media (max-width: 991px) {
  .carto-text-side {
    padding-left: 0;
    margin-top: 2rem;
  }
}

/* Titre H2 bleu */
.carto-title {
  font-family: "Outfit", sans-serif;
  font-size: clamp(2rem, 3.8vw, 3.25rem);
  font-weight: 600;
  color: var(--white);
  line-height: 1.15;
  margin: 0 0 1.5rem;
}

/* Paragraphe noir */
.carto-desc {
  font-family: "Outfit", sans-serif;
  font-size: 1.35rem;
  font-weight: 400;
  color: var(--white);
  line-height: 1.5;
  margin: 0 0 1.5rem;
}

/* Paragraphe blanc (sur fond vert) */
.carto-desc-green {
  font-family: "Outfit", sans-serif;
  font-size: 1.25rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.5;
  margin: 0 0 2rem;
}

/* Bouton pill */
.carto-btn-wrap {
  display: flex;
  justify-content: center;
  margin-top: 1rem;
}
.carto-btn {
  display: inline-flex;
  align-items: center;
  gap: 15px;
  background: var(--vertclair);
  color: #fff;
  font-family: "DM Sans", sans-serif;
  font-size: 1.06rem;
  font-weight: 600;
  text-decoration: none;
  padding: 5px 5px 5px 25px;
  border-radius: 100px;
  transition: opacity 0.2s;
}
.carto-btn:hover {
  opacity: 0.9;
  color: #fff;
}
.carto-btn-arrow {
  width: 50px;
  height: 50px;
  flex-shrink: 0;
}

/* ==============================
   Page Notre réseau (reseau.html)
   ============================== */

/* ---- Bannière de page ---- */
.reseau-page-hero {
  position: relative;
  background: var(--bleu);
  padding: 8.5rem 0 2.5rem;
  overflow: hidden;
}

/* Fleur décorative sur fond sombre (même principe que carto-section) */
.reseau-page-hero-deco {
  position: absolute;
  top: -20%;
  right: -8%;
  width: 42%;
  pointer-events: none;
}
.reseau-page-hero-deco img {
  width: 100%;
  height: auto;
  opacity: 0.06;
}

.reseau-page-hero-inner {
  position: relative;
  z-index: 1;
}

/* Fil d'Ariane */
.reseau-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-family: "DM Sans", sans-serif;
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 1.25rem;
  text-decoration: none;
}
.reseau-breadcrumb a {
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
  transition: color 0.2s;
}
.reseau-breadcrumb a:hover {
  color: var(--vertclair);
}
/* .reseau-breadcrumb span:last-child {
  color: var(--vertclair);
} */

/* Titre H1 principal */
.reseau-page-title {
  font-family: "Outfit", sans-serif;
  font-size: clamp(1.87rem, 4.42vw, 3.72rem);
  font-weight: 600;
  color: var(--vertclair);
  line-height: 1.1;
  margin: 0 0 0.6rem;
}

/* Séparateur blanc (identique à .hero-separator) */
.reseau-page-separator {
  margin: 0.6rem 0 0;
  height: 5px;
  width: clamp(80px, 8vw, 140px);
  border-radius: 2px;
  background: white;
}

/* Sous-titre */
.reseau-page-subtitle {
  font-family: "DM Sans", sans-serif;
  padding-left: 1.25rem;
  border-left: 4px solid var(--vertclair);
  font-size: clamp(1.1rem, 1.8vw, 1.45rem);
  font-weight: 600;
  color: rgb(255, 255, 255);
  max-width: 600px;
  line-height: 1.6;
  margin: 0;
}

/* ---- Section réseau ---- */
.reseau-section {
  position: relative;
  overflow: hidden;
}

/* Fleur décorative grise (même traitement que carto-section) */
.reseau-fleur-bg {
  position: absolute;
  top: -5%;
  right: -3%;
  width: 50%;
  height: auto;
  opacity: 0.05;
  pointer-events: none;
  z-index: 0;
}

/* En-tête filtres (dans la colonne liste) */
.reseau-header {
  margin-bottom: 1.25rem;
}

/* ---- Filtres ---- */
.reseau-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  max-width: 100%;
}

/* Champ de recherche avec icône */
.reseau-search-wrap {
  position: relative;
  flex: 1;
  min-width: 220px;
}
.reseau-search-icon {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-color);
  font-size: 0.9rem;
  pointer-events: none;
}
.reseau-search {
  width: 100%;
  padding: 0.65rem 1rem 0.65rem 2.5rem;
  border: 1.5px solid #ddd;
  border-radius: 2rem;
  font-family: "DM Sans", sans-serif;
  font-size: 0.95rem;
  background: var(--white);
  color: #333;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
  outline: none;
}
.reseau-search:focus {
  border-color: var(--bleu);
  box-shadow: 0 0 0 3px rgba(76, 115, 178, 0.15);
}

/* Select avec icône chevron */
.reseau-select-wrap {
  position: relative;
}
.reseau-select-icon {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-color);
  font-size: 0.75rem;
  pointer-events: none;
}
.reseau-select {
  appearance: none;
  padding: 0.65rem 2.5rem 0.65rem 1.25rem;
  border: 1.5px solid #ddd;
  border-radius: 2rem;
  font-family: "DM Sans", sans-serif;
  font-size: 0.95rem;
  background: var(--white);
  color: #333;
  cursor: pointer;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
  outline: none;
}
.reseau-select:focus {
  border-color: var(--bleu);
  box-shadow: 0 0 0 3px rgba(76, 115, 178, 0.15);
}

/* ---- Container fluid 50 / 50 ---- */
.reseau-container-fluid {
  padding: 0;
  margin: 0;
  max-width: 100%;
}

.reseau-row {
  align-items: flex-start;
}

.reseau-col-map,
.reseau-col-list {
  display: flex;
  flex-direction: column;
}

/* Côté carte OSM */
.reseau-col-map {
  background: var(--body-bg);
  position: sticky;
  top: 0;
  height: 660px;
  align-self: flex-start;
}

#reseau-map {
  width: 100%;
  height: 100%;
}

/* ---- Encart mini-cartes DOM-TOM ---- */
.reseau-map-inset {
  position: absolute;
  bottom: 28px;
  right: 12px;
  z-index: 500;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);
  padding: 10px 10px 8px;
  width: 180px;
  border: 2px solid var(--vertclair);
  pointer-events: auto;
}

.reseau-map-inset-title {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bleu);
  margin: 0 0 7px;
  text-align: center;
}

.reseau-map-inset-maps {
  display: row;
  gap: 8px;
}

.reseau-map-inset-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.reseau-map-inset-mini {
  width: 100%;
  height: 150px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid #dde4d0;
}

.reseau-map-inset-label {
  font-size: 0.62rem;
  font-weight: 600;
  color: var(--bleu);
  text-align: center;
}

/* Popup Leaflet – design vignette ADEAR */
.leaflet-popup-content-wrapper {
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}
.leaflet-popup-tip {
  background: var(--body-color, #f8f7f0);
}
.leaflet-popup-content {
  margin: 0;
  width: 340px !important;
}

/* Vignette popup style ADEAR card */
.reseau-popup {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 1rem 1rem 1rem 1.25rem;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}
.reseau-popup-header {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  gap: 0.15rem;
}
.reseau-popup-logo {
  width: 90px;
  height: auto;
  object-fit: contain;
  flex-shrink: 0;
  border-radius: 8px;
  background: var(--white);
  padding: 3px;
}
.reseau-popup strong {
  font-family: "Albert Sans", sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--bleu, #4c73b2);
  display: block;
}
.reseau-popup p {
  font-family: "DM Sans", sans-serif;
  font-size: 16px;
  font-variation-settings: "opsz" 14;
  color: var(--text-color, #868681);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  line-height: 30px;
}
.reseau-popup p a {
  /* color: var(--bleu, #4c73b2); */
  text-decoration: none;
}
.reseau-popup p a:hover {
  text-decoration: underline;
}
.reseau-popup .bi {
  color: var(--white);
  font-size: 0.8rem;
  flex-shrink: 0;
}
.reseau-popup-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  background: var(--white, #fff);
  color: var(--vert);
  border-radius: 50%;
  font-size: 1.3rem;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  transition:
    background 0.2s,
    transform 0.2s;
  margin-left: auto;
}
.reseau-popup-link:hover {
  background: var(--vert);
  color: var(--white);
  transform: scale(1.08);
}

/* Masque le bouton de fermeture par défaut si souhaité */
.leaflet-popup-close-button {
  color: var(--text-color) !important;
  font-size: 18px !important;
  top: 6px !important;
  right: 8px !important;
}

.reseau-list-inner {
  padding: 2rem 2rem 3rem;
  height: 100%;
  overflow-y: auto;
}

/* Compteur de résultats */
.reseau-list-count {
  font-family: "DM Sans", sans-serif;
  font-size: 0.88rem;
  color: var(--text-color);
  margin: 0 0 1.25rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.reseau-list-count strong {
  color: var(--dark);
}

/* ---- Bouton "Plus de résultats" ---- */
.reseau-adear-card--hidden {
  display: none !important;
}
.reseau-adear-card--filtered {
  display: none !important;
}

.reseau-more-wrap {
  justify-content: center;
  align-items: center;
  gap: 1rem;
  padding: 1rem 0 0.5rem;
}

.reseau-more-btn {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  font-family: "Outfit", sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--bleu);
}

.reseau-more-btn:hover .reseau-more-label {
  text-decoration: underline;
}

.reseau-more-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--bleu);
  color: #fff;
  font-size: 1.1rem;
  flex-shrink: 0;
  transition: background 0.2s;
}

.reseau-more-btn:hover .reseau-more-circle {
  background: var(--bleu-fonce, #3a5a9b);
}

/* ---- Cartes ADEAR ---- */
.reseau-adear-list {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

/* 2 ADEARs par ligne en desktop */
@media (min-width: 992px) {
  .reseau-adear-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem 1rem;
  }
}

.reseau-adear-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem;
  background: var(--white);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  height: 100%;
}
.reseau-adear-card:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transform: translateY(-1px);
}

/* Vignette ARDEAR Occitanie mise en avant - bordure bleue */
.reseau-adear-card--featured {
  border-left: 8px solid var(--bleu);
}

/* Logo ADEAR */
.reseau-adear-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Contenu texte */
.reseau-adear-content {
  flex: 1;
  min-width: 0;
}

.reseau-adear-name {
  font-family: "Outfit", sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--dark);
  margin: 0 0 0.2rem;
  line-height: 1.25;
}

.reseau-adear-info {
  font-family: "DM Sans", sans-serif;
  font-size: 0.82rem;
  color: var(--text-color);
  margin: 0;
  line-height: 1.4;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.reseau-adear-info .bi {
  font-size: 0.8rem;
  color: var(--vert);
  flex-shrink: 0;
}
.reseau-adear-info + .reseau-adear-info {
  margin-top: 0.15rem;
}

/* Lien téléphone dans la liste */
.reseau-adear-info a {
  color: var(--bleu);
  text-decoration: none;
}
.reseau-adear-info a:hover {
  text-decoration: underline;
}

/* Lien "En savoir plus" de chaque carte ADEAR - uniquement icône */
.reseau-adear-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  text-decoration: none;
  background: var(--vertclair);
  color: var(--white);
  border-radius: 50%;
  font-size: 1.1rem;
  transition:
    background 0.2s,
    color 0.2s,
    transform 0.2s;
  margin-left: auto;
}
.reseau-adear-link:hover {
  background: var(--vert);
  color: var(--white);
  transform: scale(1.08);
}

.reseau-adear-link-departement {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  text-decoration: none;
  background: var(--bleu);
  color: var(--white);
  border-radius: 50%;
  font-size: 1.1rem;
  transition:
    background 0.2s,
    color 0.2s,
    transform 0.2s;
  margin-left: auto;
}
.reseau-adear-link-departement:hover {
  background: var(--bleuclair);
  color: var(--white);
  transform: scale(1.08);
}

/* Icône dans le lien */
.reseau-adear-link-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

/* Logo cliquable */
.reseau-adear-logo-wrap {
  display: flex;
  width: 70px;
  height: 70px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  background: var(--white);
  border-radius: 8px;
  padding: 4px;
  overflow: hidden;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform 0.2s,
    box-shadow 0.2s;
}
.reseau-adear-logo-wrap:hover {
  transform: scale(1.03);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* ---- Responsive ---- */
@media (max-width: 991px) {
  .reseau-page-hero {
    padding: 8rem 0 2.5rem;
  }
  .reseau-page-title {
    font-size: clamp(1.7rem, 5.95vw, 2.55rem);
  }
  .reseau-page-hero-deco {
    display: none;
  }
  .reseau-section {
    padding: 0 0 3rem;
  }
  .reseau-row {
    min-height: auto;
  }
  .reseau-col-map {
    order: 1;
  }
  .reseau-col-list {
    order: 2;
    border-top: 3px solid var(--vertclair);
  }
  .reseau-col-map {
    min-height: 320px;
  }
  #reseau-map {
    min-height: 320px;
  }
  .reseau-list-inner {
    padding: 1.5rem 1rem 2rem;
  }
  .reseau-search-wrap {
    flex: 1 1 100%;
  }
}

/* ==============================
   Agenda Section
   ============================== */
.agenda-section {
  position: relative;
  padding: 0;
  background: var(--white);
  overflow: visible;
  min-height: 900px;
}

/* Fond bleu = pseudo-élément de hauteur fixe */
.agenda-section::before {
  content: "";
  position: absolute;
  inset: 0;
  height: 75%;
  background: var(--bleu);
  border-radius: 0;
  z-index: 0;
  pointer-events: none;
}

.agenda-bg-deco {
  display: none;
}

.agenda-inner {
  position: relative;
  z-index: 1;
  padding: 5rem 0 0;
}

/* Titre */
.agenda-heading {
  font-family: "Outfit", sans-serif;
  font-size: 52px;
  font-weight: 600;
  line-height: 60px;
  color: #fff;
  text-align: center;
  margin: 0 0 3rem;
}

/* Carousel wrapper : flèches + cartes */
.agenda-carousel {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding-top: 10px;
}

/* Flèches navigation agenda */
.agenda-nav {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  z-index: 2;
  transition: opacity 0.2s;
}
.agenda-nav:hover { opacity: 0.8; }
.agenda-nav img { display: block; }
.agenda-nav--left img { transform: rotate(180deg); }

/* Slider Slick – reset grille, Slick gère le layout */
.agenda-cards {
  flex: 1;
  min-width: 0;
}
.agenda-cards .slick-slide {
  box-sizing: border-box;
}
.agenda-cards .slick-list {
  margin: 0 -12px;
}

/* Flèches ancrées à position fixe – ne réagissent pas au hover des cartes */
.agenda-nav {
  align-self: flex-start;
  margin-top: 130px;
  flex-shrink: 0;
}

/* --- Carte de base (repos) --- */
.agenda-card {
  background: #f8f7f0;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition:
    background 0.4s ease,
    box-shadow 0.4s ease;
}

/* --- Carte active (hover) --- */
.agenda-card:hover {
  background: #fff;
  box-shadow: 0 4px 56.5px rgba(0, 0, 0, 0.06);
}

/* Image */
.agenda-card-img-clip {
  position: relative;
  width: 100%;
  height: 300px;
  flex-shrink: 0;
  padding: 10px;
}
.agenda-card-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}

/* Contenu */
.agenda-card-body {
  padding: 20px 30px 30px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Badge date – positionné en bas à droite de l'image */
.agenda-date-badge {
  position: absolute;
  bottom: 8px;
  right: 25px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 4px;
  width: 70px;
  min-height: 78px;
  padding: 8px 6px;
  z-index: 2;
  line-height: 1.1;
}
.agenda-date-day {
  font-family: "Outfit", sans-serif;
  font-size: 36px;
  font-weight: 700;
  color: var(--vert);
  line-height: 1;
  display: block;
}
.agenda-date-month {
  font-family: "DM Sans", sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #1a1a1a;
  line-height: 1.2;
  display: block;
  text-transform: capitalize;
}

/* Titre carte */
.agenda-card-title {
  font-family: "Outfit", sans-serif;
  font-size: 24px;
  font-weight: 600;
  line-height: 30px;
  color: #4c73b2;
  margin: 0 0 17px;
}

/* Texte carte */
.agenda-card-text {
  font-family: "DM Sans", sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 28px;
  color: var(--text-color, #868681);
  margin: 0;
}

/* Bouton "Voir l'événement" – caché par max-height pour animer */
.agenda-btn-event {
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: 10px;
  background: var(--bleu);
  color: var(--vertclair);
  font-family: "DM Sans", sans-serif;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  padding: 5px 5px 5px 20px;
  border-radius: 100px;
  margin-top: 20px;
  width: fit-content;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  padding-top: 0;
  padding-bottom: 0;
  margin-top: 0;
  transition:
    max-height 0.4s ease,
    opacity 0.4s ease,
    margin-top 0.4s ease,
    padding 0.4s ease;
}
.agenda-btn-event:hover {
  color: var(--vertclair);
}
.agenda-btn-ev-arrow {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
}

/* Au hover de la carte : le bouton apparaît en glissant */
.agenda-card:hover .agenda-btn-event {
  max-height: 60px;
  opacity: 1;
  padding: 5px 5px 5px 20px;
  margin-top: 20px;
}

/* ---- Responsive ---- */
@media (max-width: 991px) {
  .agenda-heading {
    font-size: 36px;
    line-height: 44px;
  }
  .agenda-cards {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .agenda-nav {
    display: none;
  }
  .agenda-btn-event {
    max-height: 60px;
    opacity: 1;
    padding: 5px 5px 5px 20px;
    margin-top: 20px;
  }
  .agenda-section::before {
    height: 50%;
  }
}

/* ==============================
   Formations Section
   ============================== */
.formations-section {
  position: relative;
  padding: 0;
  background: var(--white);
  overflow: visible;
  min-height: 720px;
}

.formations-section::before {
  content: "";
  position: absolute;
  bottom: 60px;
  left: 0;
  right: 0;
  height: 350px;
  background: var(--vertclair);
  z-index: 0;
  pointer-events: none;
}

.formations-inner {
  position: relative;
  z-index: 1;
}

.formations-heading {
  font-family: "Outfit", sans-serif;
  font-size: 52px;
  font-weight: 600;
  line-height: 60px;
  color: var(--bleu);
  text-align: center;
  margin: 0 0 3rem;
}

.formations-carousel {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding-top: 10px;
  padding-bottom: 6rem;
}

.formations-nav {
  flex-shrink: 0;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  z-index: 2;
  transition: opacity 0.2s;
  margin-top: 160px;
}
.formations-nav:hover {
  opacity: 0.8;
}
.formations-nav img {
  display: block;
}
.formations-nav--left img {
  transform: rotate(180deg);
}

.formations-cards {
  flex: 1;
  min-width: 0;
}
.formations-cards .slick-slide {
  padding: 0 12px;
  box-sizing: border-box;
}
.formations-cards .slick-list {
  margin: 0 -12px;
}
.formations-nav {
  align-self: flex-start;
  flex-shrink: 0;
}

.formation-card {
  background: #f8f7f0;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition:
    background 0.4s ease,
    box-shadow 0.4s ease;
}

.formation-card:hover {
  background: #fff;
  box-shadow: 0 4px 56.5px rgba(0, 0, 0, 0.06);
}

.formation-card-body {
  padding: 30px 28px 30px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.formation-date-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--vertclair);
  color: var(--bleu);
  font-family: "DM Sans", sans-serif;
  font-size: 17px;
  font-weight: 500;
  line-height: 28px;
  padding: 6px 10px;
  border-radius: 10px;
  width: fit-content;
  margin-bottom: 14px;
}

.formation-info-line {
  font-family: "Outfit", sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--vertclair);
  line-height: 36px;
  margin: 0 0 6px;
}
.formation-info-bold {
  font-weight: 600;
}

.formation-separator {
  width: 68px;
  height: 1px;
  background: var(--bleu);
  margin-bottom: 18px;
}

.formation-card-title {
  font-family: "Outfit", sans-serif;
  font-size: 28px;
  font-weight: 500;
  line-height: 36px;
  color: var(--bleu);
  margin: 0 0 15px;
}

.formation-card-text {
  font-family: "DM Sans", sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 28px;
  color: var(--text-color, #868681);
  margin: 0;
}

.formation-btn-event {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--bleu);
  color: var(--vertclair);
  font-family: "DM Sans", sans-serif;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  padding: 5px 5px 5px 20px;
  border-radius: 100px;
  margin-top: 20px;
  width: fit-content;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  padding-top: 0;
  padding-bottom: 0;
  margin-top: 0;
  transition:
    max-height 0.4s ease,
    opacity 0.4s ease,
    margin-top 0.4s ease,
    padding 0.4s ease;
}
.formation-btn-event:hover {
  color: var(--vertclair);
}
.formation-btn-ev-arrow {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
}

.formation-card:hover .formation-btn-event {
  max-height: 60px;
  opacity: 1;
  padding: 5px 5px 5px 20px;
  margin-top: 20px;
}

@media (max-width: 991px) {
  .formations-heading {
    font-size: 36px;
    line-height: 44px;
  }
  .formations-cards {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .formations-nav {
    margin-top: 80px;
  }
  .formation-btn-event {
    max-height: 60px;
    opacity: 1;
    padding: 5px 5px 5px 20px;
    margin-top: 20px;
  }
  .formations-section::before {
    height: 50%;
  }
}

/* ==============================
   Je suis Section – 3 cartes responsives
   ============================== */
.je-suis-section {
  padding: 0rem 0 4rem;
  position: relative;
}

.je-suis-cards {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
  align-items: end;
}

.je-suis-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.je-suis-card-visual {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 0.85;
  display: flex;
  align-items: center;
  justify-content: center;
}

.je-suis-card-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--bleu);
  opacity: 0.08;
  border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
  transition:
    border-radius 0.6s ease,
    transform 0.6s ease;
  z-index: 0;
}

/* Formes spécifiques pour chaque carte */
.je-suis-card-visual--1::before {
  border-radius: 45% 55% 63% 37% / 30% 66% 34% 70%;
}
.je-suis-card-visual--2::before {
  border-radius: 66% 34% 37% 63% / 60% 45% 55% 40%;
}
.je-suis-card-visual--3::before {
  border-radius: 36% 64% 52% 48% / 51% 30% 70% 49%;
}

/* Animation au hover de la carte */
.je-suis-card:hover .je-suis-card-visual::before {
  border-radius: 55% 45% 30% 70% / 50% 30% 70% 50%;
  transform: rotate(5deg) scale(1.05);
}

.je-suis-card-illus {
  position: relative;
  z-index: 1;
  width: 75%;
  height: auto;
  object-fit: contain;
}

.je-suis-label {
  font-family: "Outfit", sans-serif;
  font-size: 30px;
  font-weight: 500;
  line-height: 36px;
  color: var(--bleu);
  margin: 1rem 0 0;
}

.je-suis-label strong {
  font-weight: 700;
}

@media (max-width: 991px) {
  .je-suis-cards {
    gap: 20px;
  }
  .je-suis-label {
    font-size: 22px;
    line-height: 30px;
  }
}

@media (max-width: 767px) {
  .je-suis-cards {
    grid-template-columns: 1fr;
    gap: 40px;
    max-width: 360px;
  }
  .je-suis-label {
    font-size: 24px;
    line-height: 30px;
  }
}

/* ==============================
   Footer
   ============================== */
.footer-section {
  position: relative;
  background: var(--body-bg);
  overflow: hidden;
}

.footer-bg-wave {
  position: relative;
  width: 100%;
  line-height: 0;
  z-index: 0;
  margin-bottom: -17px;
  background-color: var(--white);
}
.footer-bg-wave-img {
  width: 100%;
  height: auto;
  display: block;
}

.footer-blue-area {
  position: relative;
  background: #4c73b2;
  backdrop-filter: blur(21.5px);
  padding: 0 0 2.5rem;
  z-index: 1;
}

/* Bouton S'inscrire à la newsletter */
.footer-newsletter-wrap {
  display: flex;
  justify-content: center;
  z-index: 10;
}
.footer-newsletter-btn {
  position: relative;
  top: 30px;
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 8px 8px 8px 28px;
  background: #fff;
  border: 2px solid var(--vertclair);
  border-radius: 50px;
  color: var(--vertclair);
  font-family: "Outfit", sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
  z-index: 1000;
}
.footer-newsletter-btn:hover {
  background: var(--vertclair);
  color: #fff;
}
.footer-newsletter-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  background: var(--vertclair);
  border-radius: 50%;
  color: #fff;
  font-size: 20px;
  line-height: 1;
  transition: background 0.2s, color 0.2s;
}
.footer-newsletter-btn:hover .footer-newsletter-circle {
  background: #fff;
  color: var(--vertclair);
}

/* Réduction des espaces latéraux footer */
.footer-blue-area .container-xl,
.footer-bottom-bar .container-xl {
  max-width: 100%;
  padding-left: 2.5rem;
  padding-right: 2.5rem;
}

.footer-content {
  display: flex;
  align-items: flex-end;
  gap: 60px;
  margin-left: 100px;
  margin-right: 100px;
  padding-top: 30px;
}

.footer-brand {
  flex-shrink: 0;
}
.footer-logo-img {
  display: block;
  height: 104px;
  width: auto;
  margin-bottom: 20px;
}
.footer-logo-minisite {
  height: 150px;
  object-fit: contain;
}
.footer-social {
  display: flex;
  gap: 10px;
}
.footer-social-btn {
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  transition: opacity 0.2s;
}
.footer-social-btn:hover {
  opacity: 0.8;
}
.footer-social-btn img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.footer-contacts {
  flex: 1;
}
.footer-contacts-title-row {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 30px;
}
.footer-contacts-line {
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.3);
}
.footer-contacts-title {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.footer-contacts-leaf {
  width: 26px;
  height: 28px;
}
.footer-contacts-title span {
  font-family: "Outfit", sans-serif;
  font-size: 24px;
  font-weight: 600;
  line-height: 36px;
  color: #fff;
}

.footer-contacts-items {
  display: flex;
  justify-content: space-between;
  gap: 40px;
}
.footer-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}
.footer-contact-icon {
  width: 50px;
  height: 50px;
  flex-shrink: 0;
}
.footer-contact-text {
  display: flex;
  flex-direction: column;
}
.footer-contact-label {
  font-family: "Albert Sans", "Outfit", sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 22px;
  color: #fff;
  margin: 0 0 4px;
}
.footer-contact-value {
  font-family: "DM Sans", sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 28px;
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
}

.footer-bottom-bar {
  position: relative;
  z-index: 2;
  background: #4c73b2;
  padding: 0 0 20px;
}
.footer-bottom-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--vertclair);
  border-radius: 12px;
  height: 60px;
  padding: 0 40px;
}
.footer-copyright {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: "DM Sans", sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
  color: #4c73b2;
  margin: 0;
  opacity: 0.9;
}
.footer-copyright-icon {
  width: 16px;
  height: 16px;
}
.footer-mentions {
  font-family: "DM Sans", sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
  color: #4c73b2;
  text-decoration: none;
  transition: opacity 0.2s;
}
.footer-mentions:hover {
  opacity: 0.7;
}

/* ==============================
   Video Section
   ============================== */
.video-section {
  position: relative;
  z-index: 0; /* ou 1, l'essentiel est qu'il soit < footer-newsletter-wrap */
  padding: 4rem 0 6rem;
  background: var(--body-bg);
}

.video-container {
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
  max-width: 1000px;
  margin: 0 auto;
}

/* ==============================
   Scroll Animation
   ============================== */
.fade-up {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.6s ease,
    transform 0.6s ease;
}
.fade-up.visible {
  opacity: 1;
  transform: none;
}

/* ==============================
   Responsive
   ============================== */
@media (max-width: 767px) {
  .hero-section {
    min-height: 80vh;
    padding-bottom: 5rem;
  }
  .hero-stats {
    gap: 1.25rem;
  }
  .stat-number {
    font-size: 2.4rem;
  }

  .agit-section {
    padding: 3.5rem 0 3rem;
  }
  .agit-card-img-wrap {
    height: 220px;
  }

  .actualites-section {
    padding: 3rem 0 3rem;
  }

  .carto-section {
    padding: 3.5rem 0;
  }

  .agenda-section {
    padding: 3.5rem 0 4rem;
  }

  .formations-section {
    padding: 3.5rem 0;
  }

  .je-suis-section {
    padding: 3rem 0;
  }

  .footer-content {
    flex-direction: column;
    gap: 30px;
    margin-left: 0;
    margin-right: 0;
    padding-top: 20px;
  }
  .footer-contacts-items {
    flex-direction: column;
    gap: 20px;
  }
  .footer-bottom-inner {
    flex-direction: column;
    height: auto;
    padding: 15px 20px;
    gap: 8px;
    text-align: center;
  }
  .footer-blue-area .container-xl,
  .footer-bottom-bar .container-xl {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
  .footer-newsletter-btn {
    font-size: 11px;
    gap: 10px;
    padding: 6px 6px 6px 16px;
    max-width: calc(100% - 2rem);
  }
  .footer-newsletter-circle {
    width: 32px;
    height: 32px;
    font-size: 17px;
  }
  .footer-contacts-title-row {
    margin-bottom: 20px;
  }
}

@media (max-width: 575px) {
  .hero-stats {
    gap: 1rem;
  }
  .stat-item {
    min-width: 120px;
  }
}

/* ==================== FOOTER MOBILE COMPACT (page-adear28) ==================== */
@media (max-width: 768px) {
  .page-adear28 .footer-blue-area {
    padding: 1.75rem 0 1.25rem;
  }
  .page-adear28 .footer-logo-adear28 {
    height: 52px !important;
    margin-bottom: 12px;
  }
  .page-adear28 .footer-social-btn--icon {
    width: 34px;
    height: 34px;
    font-size: 15px;
  }
  .page-adear28 .footer-contacts-title-row {
    margin-bottom: 1rem;
  }
  .page-adear28 .footer-contacts-title span {
    font-size: 1rem;
  }
  .page-adear28 .footer-contacts-leaf {
    width: 18px;
    height: 18px;
  }
  .page-adear28 .footer-contact-icon {
    width: 36px;
    height: 36px;
  }
  .page-adear28 .footer-contact-label {
    font-size: 13px;
    line-height: 1.3;
  }
  .page-adear28 .footer-contact-value {
    font-size: 13px;
    line-height: 1.4;
  }
  .page-adear28 .footer-contacts-items {
    gap: 14px;
  }
  .page-adear28 .footer-bottom-bar {
    padding: 0 0 12px;
  }
  .page-adear28 .footer-copyright {
    font-size: 12px;
  }
  .page-adear28 .footer-mentions {
    font-size: 12px;
  }
  .page-adear28 .footer-bg-wave-img {
    height: 40px;
  }
}

/* ==============================
   Responsive Navigation
   ============================== */

/* Desktop : cacher le sous-menu au clic en dehors */
@media (min-width: 992px) {
  /* Les sous-menus s'affichent au hover sur desktop */
  .nav-item:hover .nav-submenu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
  }

  /* Et aussi au focus pour l'accessibilité */
  .nav-btn:focus + .nav-submenu,
  .nav-submenu:focus-within {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
  }
}

/* Tablette : ajuster les espacements */
@media (max-width: 1250px) {
  .nav-outer {
    padding: 0 max(12px, 1%);
  }
  .nav-btn {
    font-size: 12px;
    padding: 0 8px;
  }
  .nav-logo-img {
    height: 80px;
  }
  .nav-logo-link {
    margin-top: -36px;
    margin-bottom: -10px;
  }
}

/* Mobile : pleine largeur pour le menu */
@media (max-width: 991px) {
  .nav-outer {
    padding: 0 max(12px, 4%);
    position: relative;
  }

  .nav-inner {
    min-height: 60px;
    padding: 10px 16px;
  }

  .nav-logo-img {
    height: 60px;
  }
  .nav-logo-link {
    margin-top: -24px;
    margin-bottom: -8px;
    margin-right: 16px;
  }

  /* Le menu mobile prend toute la largeur sous la navbar */
  #mobileMenu {
    position: absolute;
    top: 100%;
    left: max(12px, 4%);
    right: max(12px, 4%);
    width: auto;
    border-radius: 0 0 16px 16px;
    margin-top: -4px;
  }

  /* Ajuster le hero pour le header plus petit sur mobile */
  .hero-content {
    padding-top: 100px;
  }
}

/* Petit mobile */
@media (max-width: 575px) {
  .nav-inner {
    min-height: 56px;
    padding: 8px 12px;
  }

  .nav-logo-img {
    height: 52px;
  }
  .nav-logo-link {
    margin-top: -20px;
    margin-bottom: -6px;
  }

  .nav-burger span {
    width: 24px;
    height: 2px;
  }

  .nav-mobile-link {
    font-size: 14px;
    padding: 12px 20px;
  }

  .nav-mobile-submenu-link {
    font-size: 13px;
    padding: 10px 20px 10px 40px;
  }

  #mobileMenu {
    left: max(8px, 3%);
    right: max(8px, 3%);
    max-height: calc(100vh - 100px);
  }
}

/* ==============================
   Page ADEAR 28 (adear28.html)
   ============================== */

/* ---- Section principale (sidebar + contenu) ---- */
.adear-main-section {
  padding: 3.5rem 0 2rem;
}

/* ---- Sidebar contact ---- */
.adear-sidebar {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  position: sticky;
  top: 140px;
}

.adear-contact-block {
  background: var(--white);
  border-radius: 12px;
  box-shadow: 0 4px 56.5px rgba(0, 0, 0, 0.06);
  overflow: hidden;
}

.adear-contact-header {
  background: var(--bleu);
  color: var(--white);
  font-family: "Outfit", sans-serif;
  font-weight: 600;
  font-size: 1.1rem;
  padding: 0.85rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.adear-contact-body {
  padding: 1.25rem;
}

.adear-contact-logo {
  text-align: center;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}

.adear-contact-logo img {
  max-width: 160px;
  height: auto;
  display: inline-block;
}

.adear-contact-address {
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 1rem;
  color: var(--dark-alt);
}

.adear-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin-bottom: 0.75rem;
  font-size: 0.9rem;
  color: var(--text-color);
}

.adear-contact-item i {
  color: var(--bleu);
  font-size: 0.85rem;
  margin-top: 0.2rem;
  flex-shrink: 0;
}

.adear-contact-item a {
  color: var(--bleu);
  text-decoration: none;
  word-break: break-word;
}

.adear-contact-item a:hover {
  text-decoration: underline;
}

.adear-contact-label {
  display: block;
  font-size: 0.8rem;
  color: var(--text-color);
  margin-bottom: 0.1rem;
}

.adear-social {
  display: flex;
  gap: 0.5rem;
  padding: 0 1.25rem 1.25rem;
}

.adear-social-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--bleu);
  color: var(--white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  transition: background 0.2s, transform 0.2s;
}

.adear-social-btn:hover {
  background: var(--vert);
  color: var(--white);
  transform: scale(1.1);
}

/* ---- Modules sidebar (formations, annonces) ---- */
.adear-module-block {
  background: var(--white);
  border-radius: 12px;
  box-shadow: 0 4px 56.5px rgba(0, 0, 0, 0.06);
  overflow: hidden;
}

.adear-module-header {
  background: var(--white);
  font-family: "Outfit", sans-serif;
  font-weight: 600;
  font-size: 1.05rem;
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--dark);
  border-bottom: 2px solid var(--body-bg);
}

.adear-module-header i {
  color: var(--vert);
  font-size: 1.1rem;
}

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

.adear-module-list li {
  padding: 0.85rem 1.25rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  font-size: 0.88rem;
  line-height: 1.45;
}

.adear-module-list li:last-child {
  border-bottom: none;
}

.adear-module-list a {
  color: var(--dark-alt);
  text-decoration: none;
  display: block;
  margin-top: 0.3rem;
}

.adear-module-list a:hover {
  color: var(--bleu);
}

.adear-module-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.25rem;
}

.adear-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.2rem 0.55rem;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.adear-badge--blue {
  background: var(--bleuclair);
  color: var(--white);
}

.adear-badge--green {
  background: var(--vertclair);
  color: var(--dark);
}

.adear-module-more {
  display: block;
  padding: 0.75rem 1.25rem;
  text-align: right;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--bleu);
  text-decoration: none;
  transition: color 0.2s;
}

.adear-module-more:hover {
  color: var(--vert);
}

.adear-module-more i {
  font-size: 0.75rem;
  margin-left: 0.25rem;
}

/* ---- Carousel ---- */
.adear-carousel {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 56.5px rgba(0, 0, 0, 0.06);
  margin-bottom: 2rem;
}

.adear-carousel .carousel-item img {
  width: 100%;
  height: 400px;
  object-fit: cover;
}

.adear-carousel .carousel-caption {
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.6));
  left: 0;
  right: 0;
  bottom: 0;
  padding: 2rem 1.5rem 1.25rem;
  text-align: left;
}

.adear-carousel .carousel-caption h5 {
  font-family: "Outfit", sans-serif;
  font-size: 1.15rem;
  font-weight: 600;
  margin-bottom: 0.15rem;
}

.adear-carousel .carousel-caption small {
  font-size: 0.78rem;
  opacity: 0.8;
}

.adear-carousel .carousel-indicators button {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  opacity: 0.5;
}

.adear-carousel .carousel-indicators button.active {
  opacity: 1;
  background-color: var(--vertclair);
}

/* ---- Bloc "Un autre site vous attend" ---- */
.adear-carousel-wrapper {
  position: relative;
}

.adear-other-site-bloc {
  position: absolute;
  top: 500px;
  left: 12.5rem;
  z-index: 10;
  background: var(--vert);
  border-radius: 16px;
  padding: 2rem 3rem 2rem 2.25rem;
  width: 520px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.25rem;
  overflow: visible;
}

@media (max-width: 1400px) {
  .adear-other-site-bloc {
    position: absolute;
    top: 400px;
    left: 9.5rem;
    z-index: 10;
    background: var(--vert);
    border-radius: 16px;
    padding: 2rem 3rem 2rem 2.25rem;
    width: 520px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.25rem;
    overflow: visible;
  }
}


.adear-other-site-deco {
  position: absolute;
  right: -2rem;
  top: 50%;
  transform: translateY(-50%);
  width: 80px;
  height: 48px;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  pointer-events: none;
}

.adear-other-site-title {
  font-family: "Outfit", sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
  margin: 0;
  line-height: 1.3;
}

.adear-other-site-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: #fff;
  border: 1.5px solid rgba(255, 255, 255, 0.7);
  font-family: "Outfit", sans-serif;
  font-size: 1rem;
  font-weight: 500;
  border-radius: 50px;
  padding: 0.5rem 0.6rem 0.5rem 1.25rem;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}

.adear-other-site-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}

.adear-other-site-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--vertclair);
  font-size: 0.85rem;
  flex-shrink: 0;
}

/* ---- Contenu texte ---- */
.adear-content {
  color: var(--dark-alt);
  line-height: 1.75;
  background: #fff;
  border-radius: 12px;
  padding: 2rem 2.5rem;
  margin-top: 1.5rem;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

.adear-content p {
  margin-bottom: 1rem;
}

/* ---- Bouton "Voir toutes les actualités" (variante verte) ---- */
/* Placeholders — les règles effectives sont après .adear-actu-link ci-dessous */

/* ---- Aller plus loin ---- */
.adear-aller-plus-loin {
  margin-top: 2rem;
  padding-top: 1.75rem;
  border-top: 2px solid var(--vertclair);
}

.adear-apl-title {
  font-family: "Outfit", sans-serif;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--vert);
  margin-bottom: 1rem;
}

.adear-apl-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 1.25rem;
  padding: 10px 22px;
  background: var(--vert);
  color: #fff;
  border-radius: 2rem;
  font-family: "DM Sans", sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s, transform 0.15s;
}

.adear-apl-btn:hover {
  background: var(--bleu);
  color: #fff;
  transform: translateY(-1px);
}

.adear-activities-list {
  padding-left: 1.25rem;
  margin: 0;
}

.adear-activities-list li {
  margin-bottom: 0.6rem;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text-color);
}

.adear-activities-list li::marker {
  color: var(--vert);
}

/* ---- Section Actualités ---- */
.adear-actu-section {
  padding: 2.5rem 0 0;
}

.adear-section-title {
  font-family: "Outfit", sans-serif;
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 600;
  color: var(--bleu);
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.adear-section-title i {
  font-size: 1.2em;
}

.adear-actu-card {
  background: var(--white);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 56.5px rgba(0, 0, 0, 0.06);
  transition: transform 0.3s, box-shadow 0.3s;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.adear-actu-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

.adear-actu-card-img {
  display: block;
  height: 220px;
  border-radius: 10px;
  overflow: hidden;
}

.adear-actu-card-img-clip {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  overflow: hidden;
}

.adear-actu-card-img img {
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  object-fit: cover;
  display: block;
  margin: 10px;
  border-radius: 5px;
  transition: transform 0.4s ease;
}

.adear-actu-card:hover .adear-actu-card-img img {
  transform: none;
}

.adear-actu-card-body {
  padding: 1.25rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.adear-actu-date {
  display: inline-block;
  width: auto;
  align-self: flex-start;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.25rem 0.65rem;
  border-radius: 3px;
  background: var(--vertclair);
  color: var(--dark);
  margin-bottom: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.adear-actu-card-title {
  font-family: "Outfit", sans-serif;
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 0.5rem;
  color: var(--dark);
}

.adear-actu-card-body p {
  font-size: 0.9rem;
  color: var(--text-color);
  line-height: 1.55;
  flex: 1;
}

.adear-actu-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--bleu);
  color: var(--vertclair);
  font-family: "DM Sans", sans-serif;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  padding: 5px 5px 5px 20px;
  border-radius: 100px;
  margin-top: 1rem;
  width: fit-content;
  transition: background 0.2s, color 0.2s;
}

.adear-actu-link:hover {
  background: var(--vert);
  color: var(--white);
}

/* Variante vert clair → vert foncé au hover, texte blanc */
.adear-actu-link.adear-actu-link--vert {
  background: var(--vertclair);
  color: var(--dark);
}
.adear-actu-link.adear-actu-link--vert .adear-actu-link-arrow {
  background: rgba(0, 0, 0, 0.12);
  color: var(--dark);
}
.adear-actu-link.adear-actu-link--vert:hover {
  background: var(--vert);
  color: #fff;
}
.adear-actu-link.adear-actu-link--vert:hover .adear-actu-link-arrow {
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
}

.adear-actu-link-arrow {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  background: var(--vertclair);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--dark);
  font-size: 0.9rem;
}

/* ---- Section Rubriques ---- */
.adear-rubriques-section {
  padding: 2.5rem 0 0;
}

.adear-rubrique-card {
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0px 4px 56.5px 0px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  transition: transform 0.3s;
  height: 100%;
}

.adear-rubrique-card:hover {
  transform: translateY(-6px);
}

.adear-rubrique-img-area {
  position: relative;
  height: 200px;
  overflow: visible;
}

.adear-rubrique-img-clip {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  overflow: hidden;
}

.adear-rubrique-photo {
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  object-fit: cover;
  display: block;
  margin: 10px;
  border-radius: 5px;
  transition: transform 0.4s ease;
}

.adear-rubrique-card:hover .adear-rubrique-photo {
  transform: none;
}

.adear-rubrique-body {
  padding: 1.25rem 1.1rem 1.6rem;
}

.adear-rubrique-title {
  font-family: "Outfit", sans-serif;
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.25;
  margin: 0;
  color: var(--bleu);
}

.adear-rubrique-title a {
  color: inherit;
  text-decoration: none;
}

.adear-rubrique-title a:hover {
  color: var(--bleuclair);
}

.adear-rubrique-line {
  display: block;
  width: 100%;
  max-width: 80px;
  height: 3px;
  margin-top: 0.75rem;
  border-radius: 2px;
  background-color: var(--bleu);
}

/* ---- Ressources externes ---- */
.adear-ressources-section {
  padding: 2.5rem 0 0;
}

.adear-ressources-block {
  background: var(--vert);
  border-radius: 12px;
  padding: 2rem 2.5rem;
  color: var(--white);
}

.adear-ressources-block h3 {
  font-family: "Outfit", sans-serif;
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.adear-ressources-block p {
  font-size: 0.95rem;
  line-height: 1.65;
  opacity: 0.9;
  margin: 0;
}

.adear-ressources-block a {
  color: var(--white);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.adear-ressources-block a:hover {
  color: var(--vertclair);
  opacity: 1;
}

/* ---- Nos financeurs ---- */
.adear-financeurs-section {
  padding: 2.5rem 0 0;
}

.adear-financeurs-block {
  background: var(--white);
  border-radius: 12px;
  box-shadow: 0 4px 56.5px rgba(0, 0, 0, 0.06);
  padding: 2rem 2.5rem;
  text-align: center;
}

.adear-financeurs-block h3 {
  font-family: "Outfit", sans-serif;
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
  color: var(--dark);
}

.adear-financeurs-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2rem 3rem;
}

.adear-financeurs-logos img {
  height: 60px;
  width: auto;
  object-fit: contain;
  filter: grayscale(20%);
  transition: filter 0.3s;
}

.adear-financeurs-logos img:hover {
  filter: grayscale(0);
}

/* ---- Responsive ADEAR 28 ---- */
@media (max-width: 991px) {
  .adear-sidebar {
    position: static;
  }

  .adear-carousel .carousel-item img {
    height: 300px;
  }

  .adear-other-site-bloc {
    position: static;
    width: 100%;
    box-sizing: border-box;
    border-radius: 12px;
    padding: 1.5rem 1.5rem;
    margin-top: 1rem;
  }
}

@media (max-width: 767px) {
  .adear-main-section {
    padding: 2rem 0 1.5rem;
  }

  .adear-carousel .carousel-item img {
    height: 220px;
  }

  .adear-other-site-title {
    font-size: 1.2rem;
  }

  .adear-ressources-block,
  .adear-financeurs-block {
    padding: 1.5rem;
  }

  .adear-actu-card-img {
    height: 180px;
  }
}


/* ==============================
   Page Carte et contacts (carte.html)
   ============================== */

/* ---- Bannière hero ---- */
.carte-hero {
  position: relative;
  background-image: url('../assets/images/header-carte.png');
  padding: 8.5rem 0 2.5rem;
  overflow: hidden;
}

.carte-hero-deco {
  position: absolute;
  top: -20%;
  right: -8%;
  width: 42%;
  pointer-events: none;
}
.carte-hero-deco img {
  width: 100%;
  height: auto;
  opacity: 0.06;
}

.carte-hero-image {
  width: 4%;
  height: auto;
}

.carte-hero-inner {
  position: relative;
  z-index: 1;
  padding-top: 30px;
}

.carte-hero-title {
  font-family: "Outfit", sans-serif;
  font-size: clamp(1.87rem, 4.42vw, 3.25rem);
  font-weight: 600;
  color: var(--white);
  line-height: 1.1;
  margin: 0 0 0.6rem;
}

.carte-hero-separator {
  width: clamp(60px, 6vw, 115px);
  height: 2px;
  background: var(--white);
  margin: 0.6rem 0 1.25rem;
}

/* ---- Chapo dépliable ---- */
.carte-chapo {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: 600px;
}

.carte-chapo-body {
  overflow: hidden;
}

.carte-chapo-text {
  font-family: "DM Sans", sans-serif;
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.65;
  margin: 0 0 0.5rem;
}

.carte-chapo-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.6);
  font-family: "DM Sans", sans-serif;
  font-size: 0.92rem;
  text-align: left;
  transition: color 0.2s;
}
.carte-chapo-toggle:hover {
  color: var(--white);
}
.carte-chapo-toggle[aria-expanded="true"] .carte-chapo-chevron {
  transform: rotate(90deg);
}

.carte-chapo-chevron {
  font-size: 1rem;
  transition: transform 0.25s;
  flex-shrink: 0;
}

.carte-chapo-label {
  opacity: 0.8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.carte-chapo-arrow-down {
  width: 30px;
  border-radius: 50%;
  background: white;
  color: var(--white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 10px;
  padding: 10px;
}

.carte-results-arrow-down {
  border-radius: 50%;
  background: var(--bleu);
  color: var(--white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 10px;
  padding: 10px;
}

/* ---- Section principale ---- */
.carte-section {
  background: var(--body-bg);
  position: relative;
}

.carte-row {
  min-height: 760px;
}

/* ---- Colonne liste (gauche) ---- */
.carte-col-list {
  background: var(--body-bg);
  display: flex;
  flex-direction: column;
}

.carte-list-inner {
  background-color: white;
  padding: 2rem 1.75rem 2.5rem 8rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  height: 100%;
  overflow-y: auto;
  max-height: 100vh;
  scrollbar-width: thin;
  scrollbar-color: var(--vertclair) transparent;
}
.carte-list-inner::-webkit-scrollbar {
  width: 4px;
}
.carte-list-inner::-webkit-scrollbar-thumb {
  background: var(--vertclair);
  border-radius: 4px;
}

/* ---- Carte filtre ---- */
.carte-filter-card {
  position: absolute;
  left: 100px;
  top: -50px;
  padding-bottom: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  z-index: 1000;
}

/* Onglets */
.carte-filter-tabs {
  display: flex;
  justify-content: flex-start;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.carte-filter-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: transparent;
  border: none;
  border-radius: 8px;
  padding: 0.45rem 0.9rem;
  font-family: "DM Sans", sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-color);
  cursor: pointer;
  transition:
    background 0.2s,
    border-color 0.2s,
    color 0.2s;
}
.carte-filter-tab:hover {
  border-color: var(--vert);
  color: var(--vert);
}
.carte-filter-tab--active {
  background: var(--vert);
  border-color: var(--vert);
  color: var(--white);
}
.carte-filter-tab--active:hover {
  background: var(--vertclair);
  border-color: var(--vertclair);
  color: var(--white);
}

.carte-tab-icon {
  width: 20px;
}
.carte-tab-icon--green {
  color: var(--vertclair);
}
.carte-filter-tab--active .carte-tab-icon--green {
  color: var(--white);
}
.carte-tab-icon--blue {
  color: var(--bleu);
}

/* Sélecteur de région */
.carte-filter-selects-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.carte-filter-select-wrap {
  display: inline-flex;
  align-items: center;
}

.carte-filter-reset-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 1.1rem;
  background: transparent;
  color: var(--bleu);
  border: 1.5px solid var(--bleu);
  border-radius: 12px;
  font-family: "DM Sans", sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  white-space: nowrap;
}
.carte-filter-reset-btn:hover {
  background: var(--bleu);
  color: var(--white);
}

.carte-filter-select {
  width: 500px;
  appearance: none;
  -webkit-appearance: none;
  background: var(--bleu);
  color: var(--white);
  border: none;
  border-radius: 12px;
  padding: 0.65rem 2.5rem 0.65rem 1.25rem;
  font-family: "DM Sans", sans-serif;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  outline: none;
  transition: background 0.2s;
}
.carte-filter-select:focus {
  box-shadow: 0 0 0 3px rgba(76, 115, 178, 0.3);
}
.carte-filter-select option {
  background: var(--white);
  color: #333;
}

.carte-filter-chevron {
  margin-left: -1.75rem;
  color: var(--white);
  font-size: 0.8rem;
  pointer-events: none;
  z-index: 1;
}

/* Compteur résultats */
.carte-list-count {
  text-align: center;
  font-family: "DM Sans", sans-serif;
  font-size: 0.88rem;
  font-weight: bold;
  color: var(--bleu);
  margin: 0;
}
.carte-list-count strong {
  color: var(--bleu);
  font-weight: 700;
}

/* ---- Liste des structures ADEAR ---- */
.carte-adear-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.carte-adear-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--white);
  border-radius: 10px;
  padding: 1rem 3.5rem 1rem 1rem; /* room for expand button */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  overflow: visible;
  transition:
    box-shadow 0.25s,
    transform 0.2s;
  cursor: pointer;
}
.carte-adear-card:hover {
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.14);
  transform: translateY(-1px);
}
.carte-adear-card--active {
  box-shadow: 0 4px 40px rgba(0, 0, 0, 0.22);
}
.carte-adear-card--active:hover {
  box-shadow: 0 6px 48px rgba(0, 0, 0, 0.28);
}

/* Logo */
.carte-adear-logo-area {
  flex-shrink: 0;
  width: 120px;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  overflow: hidden;
  background: var(--body-bg);
}

.carte-adear-logo {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Texte */
.carte-adear-content {
  flex: 1;
  min-width: 0;
}

.carte-adear-name {
  font-family: "Albert Sans", sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--bleu);
  margin: 0 0 0.2rem;
  line-height: 1.25;
}

.carte-adear-email {
  font-family: "DM Sans", sans-serif;
  font-size: 0.78rem;
  color: var(--text-color);
  text-decoration: none;
  display: block;
  transition: color 0.2s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.carte-adear-email:hover {
  color: var(--bleu);
  text-decoration: underline;
}

/* Feuille décorative */
.carte-adear-leaf {
  position: absolute;
  top: 0;
  right: 0.5rem;
  transform: translateY(-50%);
  width: 32px;
  height: auto;
  pointer-events: none;
  z-index: 2;
  color: var(--bleu);
}

/* Bouton expand */
.carte-adear-expand {
  position: absolute;
  right: 0.7rem;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--vertclair);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  color: var(--bleu);
  font-size: 1.1rem;
  z-index: 1;
  transition:
    background 0.2s,
    color 0.2s,
    transform 0.25s;
}
.carte-adear-expand:hover {
  background: var(--vert);
  color: var(--white);
}
.carte-adear-card--expanded .carte-adear-expand {
  background: var(--bleu);
  color: var(--white);
  transform: translateY(-50%) rotate(45deg);
}

/* ---- Bouton "Plus de résultats" ---- */
.carte-loadmore-wrap {
  display: flex;
  justify-content: center;
  padding-top: 0.5rem;
}

.carte-loadmore-btn {
  display: inline-flex;
  align-items: center;
  gap: 15px;
  background: var(--white);
  border: none;
  border-radius: 100px;
  padding: 5px 5px 5px 25px;
  font-family: "DM Sans", sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--bleu);
  cursor: pointer;
  transition:
    background 0.2s,
    border-color 0.2s,
    color 0.2s;
}
.carte-loadmore-btn:hover {
  background: var(--bleu);
  border-color: var(--bleu);
  color: var(--white);
}
.carte-loadmore-btn:hover .carte-loadmore-icon {
  background: var(--white);
  color: var(--vert);
}

.carte-loadmore-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: var(--bleu);
  font-size: 0.9rem;
  transition:
    background 0.2s,
    color 0.2s;
}

/* ---- Responsive ---- */
@media (max-width: 1200px) {
  .carte-filter-tabs {
    flex-wrap: nowrap;
  }
}

/* ---- Responsive ---- */
@media (max-width: 991px) {
  .carte-filter-card {
    position: static;
    width: 100%;
    box-sizing: border-box;
  }

  .reseau-map-inset {
    position: static;
    width: 100%;
    box-sizing: border-box;
  }

  .reseau-map-inset-maps {
    display: flex;
    flex-direction: row;
    gap: 8px;
  }

  .carte-hero {
    padding: 5rem 0 2rem;
  }

  .carte-hero-title {
    font-size: clamp(1.6rem, 5vw, 2.5rem);
  }

  .carte-list-inner {
    max-height: none;
    overflow-y: visible;
    padding: 1.5rem 1rem 2rem;
  }

  .carte-row {
    min-height: auto;
  }

  .carte-col-list {
    order: 2;
    border-top: 3px solid var(--vertclair);
  }
}

@media (max-width: 575px) {
  .carte-hero {
    padding: 4.5rem 0 1.5rem;
  }

  /* .carte-filter-tabs {
    flex-direction: column;
  } */

  .carte-adear-card {
    padding: 0.85rem 3rem 0.85rem 0.75rem;
  }

  .carte-adear-logo-area {
    width: 56px;
    height: 44px;
  }

  .carte-adear-name {
    font-size: 0.875rem;
  }
}


/* ==============================
   Page Ressources (ressources.html)
   ============================== */

/* ---- Couleur supplémentaire ---- */
:root {
  --vert-pale: #d9e3a7; /* fond carte arrière-plan publications */
}

/* ---- Bouton générique pill (partagé par toute la page) ---- */
.ressources-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--vertclair);
  color: var(--white);
  font-size: 1rem;
  flex-shrink: 0;
  transition: background 0.2s, color 0.2s;
}
.ressources-btn-icon--vert {
  background: var(--vert);
}

/* ---- Hero ---- */
.ressources-hero {
  position: relative;
  background: var(--bleu);
  padding: 8.5rem 0 2rem 0;
  overflow: hidden;
}

.ressources-hero-deco {
  position: absolute;
  top: -20%;
  right: -8%;
  width: 42%;
  pointer-events: none;
}
.ressources-hero-deco img {
  width: 100%;
  height: auto;
  opacity: 0.06;
}

.ressources-hero-inner {
  position: relative;
  z-index: 1;
}

.ressources-hero-title {
  font-family: "Outfit", sans-serif;
  font-size: clamp(2.5rem, 5.5vw, 4.375rem); /* 70px Figma */
  font-weight: 600;
  color: var(--vertclair);
  line-height: 1;
  letter-spacing: -0.01em;
  margin: 0 0 0.6rem;
}

.ressources-hero-separator {
  width: clamp(60px, 6vw, 115px);
  height: 2px;
  background: var(--white);
  margin: 0.6rem 0 0;
}

/* ---- Section publications ---- */
.ressources-pubs-section {
  padding: 2.5rem 0 3rem;
}

/* Paragraphe d'introduction */
.ressources-pubs-intro {
  font-family: "Outfit", sans-serif;
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  font-weight: 400;
  line-height: 1.6;
  max-width: 720px;
  margin: 0 0 2rem 0;
}

/* Wrapper slider avec flèches latérales */
.ressources-pubs-slider-wrap {
  position: relative;
}

/* Wrapper avec effet de carte en retrait */
.ressources-pub-wrap {
  position: relative;
  padding-bottom: 18px;
  padding-right: 18px;
  height: 100%;
}

/* Carte arrière (ombre visuelle) */
.ressources-pub-back-left {
  position: absolute;
  bottom: 45px;
  left: -40px;
  width: calc(100% - 12px);
  height: calc(80% - 12px);
  background: var(--vert-pale);
  border-radius: 16px;
  z-index: 0;
}

.ressources-pub-back {
  position: absolute;
  bottom: 45px;
  right: -20px;
  width: calc(100% - 12px);
  height: calc(80% - 12px);
  background: var(--vert-pale);
  border-radius: 16px;
  z-index: 0;
}

/* Carte principale */
.ressources-pub-card {
  position: relative;
  z-index: 1;
  background: var(--vert);
  border-radius: 16px;
  padding: 1.5rem;
  display: flex;
  flex-direction: row;
  gap: 1.5rem;
  height: 100%;
  transition: transform 0.25s;
}
.ressources-pub-wrap:hover .ressources-pub-card {
  transform: translate(-3px, -3px);
}

/* Zone image (carré blanc) */
.ressources-pub-img-area {
  flex-shrink: 0;
  display: flex;
  justify-content: center;
}

.ressources-pub-img-placeholder {
  width: clamp(110px, 14vw, 180px);
  aspect-ratio: 1 / 1;
  background: var(--white);
  border-radius: 12px;
}

/* Texte de la carte publication */
.ressources-pub-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.75rem;
  min-width: 0;
}

.ressources-pub-title {
  font-family: "Outfit", sans-serif;
  font-size: clamp(1.15rem, 2vw, 1.75rem);
  font-weight: 700;
  color: var(--white);
  line-height: 1.2;
  margin: 0 0 0.4rem 0;
}

.ressources-pub-desc {
  font-family: "Outfit", sans-serif;
  font-size: clamp(0.9rem, 1.3vw, 1.25rem);
  font-weight: 400;
  color: var(--white);
  line-height: 1.45;
  margin: 0 0 0.5rem 0;
}

.ressources-pub-tags {
  list-style: none;
  padding: 0;
  margin: 0 0 0.75rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.ressources-pub-tags li {
  font-family: "Outfit", sans-serif;
  font-size: clamp(0.78rem, 1vw, 1rem);
  font-weight: 700;
  color: var(--vertclair);
  line-height: 1.6;
}

/* Bouton "Accéder au site" (pill) */
.ressources-pub-btn-wrap {
  display: flex;
  justify-content: flex-end;
}
.ressources-pub-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--white);
  border: none;
  border-radius: 100px;
  padding: 5px 5px 5px 18px;
  font-family: "DM Sans", sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--bleu);
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.ressources-pub-btn:hover {
  background: var(--vertclair);
  color: var(--white);
}
.ressources-pub-btn:hover .ressources-btn-icon {
  background: var(--white);
  color: var(--vert);
}

/* Flèches latérales du slider */
.ressources-nav-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: var(--vertclair);
  border: none;
  border-radius: 50%;
  font-size: 1rem;
  color: var(--bleu);
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
  flex-shrink: 0;
}
.ressources-nav-arrow:hover {
  background: var(--vert);
  border-color: var(--vert);
  color: var(--white);
}
.ressources-nav-arrow--side {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}
.ressources-nav-arrow--left {
  left: -108px;
}
.ressources-nav-arrow--right {
  right: -88px;
}

/* Navigation dots uniquement */
.ressources-pubs-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.75rem;
}

.ressources-nav-dots {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.ressources-nav-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 20px;
  background: var(--body-bg);
  border: 1.5px solid #e0dfd8;
  font-family: "DM Sans", sans-serif;
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--text-color);
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.ressources-nav-dot:hover {
  border-color: var(--vert);
  color: var(--vert);
}
.ressources-nav-dot--active {
  background: var(--vert);
  border-color: var(--vert);
  color: var(--white);
}

/* ---- Section recherche ---- */
.ressources-search-section {
  padding: 3rem 0;
}

/* Carte recherche (684px Figma, centrée) */
.ressources-search-card {
  background: var(--white);
  border-radius: 12px;
  box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.25);
  padding: 2rem 1.75rem;
  max-width: 600px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Champ de recherche libre */
.ressources-search-input-wrap {
  position: relative;
}

.ressources-search-icon {
  position: absolute;
  left: 1.1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--bleu);
  font-size: 1rem;
  pointer-events: none;
}

.ressources-search-input {
  width: 100%;
  border: 1px solid var(--bleu);
  border-radius: 12px;
  padding: 0.65rem 1rem 0.65rem 2.75rem;
  font-family: "DM Sans", sans-serif;
  font-size: 1.125rem; /* 18px Figma */
  font-weight: 400;
  line-height: 1.65;
  color: var(--bleu);
  background: var(--white);
  outline: none;
  transition: box-shadow 0.2s;
}
.ressources-search-input::placeholder {
  color: var(--bleu);
  opacity: 0.65;
}
.ressources-search-input:focus {
  box-shadow: 0 0 0 3px rgba(76, 115, 178, 0.2);
}

/* Ligne filtres + bouton */
.ressources-filters-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  justify-content: center;
}

/* Dropdowns (bleu) */
.ressources-filter-select-wrap {
  position: relative;
  flex: 1;
  min-width: 160px;
}

.ressources-filter-select {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  background: var(--bleu);
  color: var(--white);
  border: none;
  border-radius: 12px;
  padding: 0.65rem 2.5rem 0.65rem 1.1rem;
  font-family: "DM Sans", sans-serif;
  font-size: 1.125rem; /* 18px Figma */
  font-weight: 400;
  line-height: 1.65;
  cursor: pointer;
  outline: none;
  transition: background 0.2s;
}
.ressources-filter-select:focus {
  box-shadow: 0 0 0 3px rgba(76, 115, 178, 0.3);
}
.ressources-filter-select option {
  background: var(--white);
  color: #333;
}

.ressources-filter-chevron {
  position: absolute;
  right: 0.9rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--white);
  font-size: 0.8rem;
  pointer-events: none;
}

/* Bouton "Rechercher" */
.ressources-search-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: 1px solid var(--bleu);
  border-radius: 100px;
  padding: 5px 5px 5px 20px;
  font-family: "DM Sans", sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--bleu);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s, color 0.2s;
}
.ressources-search-btn:hover {
  background: var(--bleu);
  color: var(--white);
}
.ressources-search-btn:hover .ressources-btn-icon {
  background: var(--white);
  color: var(--bleu);
}

/* Lien réinitialiser */
.ressources-search-reset-wrap {
  text-align: center;
}

.ressources-reset-btn {
  background: none;
  border: none;
  padding: 0;
  font-family: "DM Sans", sans-serif;
  font-size: 0.935rem; /* 15px Figma */
  font-weight: 400;
  line-height: 1.75;
  color: var(--text-color);
  text-decoration: underline;
  cursor: pointer;
  transition: color 0.2s;
}
.ressources-reset-btn:hover {
  color: var(--bleu);
}

/* ---- Section grille ressources ---- */
.ressources-grid-section {
  padding: 1rem 0 5rem;
  min-height: 800px;
}

.ressources-count {
  font-family: "DM Sans", sans-serif;
  font-size: 1.2rem;
  color: var(--vert);
  margin: 0 0 1.5rem;
  text-align: center;
  font-weight: 700;
}
.ressources-count strong {
  color: var(--vert);
  font-weight: 700;
}

/* Chaque colonne s'arrête à la hauteur de sa propre carte — pas d'étirement entre voisines */
.ressources-cards-row > [class*="col"] {
  align-self: flex-start;
}

.ressources-cards-row {
  padding-bottom: 8px;
}

/* Carte ressource */
.ressources-card {
  position: relative;
  background: var(--vert);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s, box-shadow 0.25s;
}
.ressources-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}
.ressources-card--featured {
  box-shadow: 0px 0px 56.5px 0px rgba(0, 0, 0, 0.34);
}
.ressources-card--featured:hover {
  box-shadow: 0px 4px 64px 0px rgba(0, 0, 0, 0.4);
}

/* Zone image (centrée, 196×274px Figma) */
.ressources-card-img-wrap {
  display: flex;
  justify-content: center;
  padding: 1.75rem 1rem 0;
  border-radius: 10px 10px 0 0;
  overflow: hidden;
}

.ressources-card-img-ph {
  width: 196px;
  height: 274px;
  max-width: 100%;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 8px;
}

/* Corps texte */
.ressources-card-body {
  padding: 1.1rem 1.375rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
}

/* Tag / catégorie */
.ressources-card-tag {
  font-family: "Outfit", sans-serif;
  font-size: 1rem; /* 16px Figma */
  font-weight: 600;
  line-height: 2.25;
  color: var(--vertclair);
  display: block;
}

/* Séparateur horizontal */
.ressources-card-divider {
  width: 68px;
  height: 2px;
  background: rgba(255, 255, 255, 0.35);
  border-radius: 1px;
  margin: 0.1rem 0 0.25rem;
}

/* Titre carte */
.ressources-card-title {
  font-family: "Outfit", sans-serif;
  font-size: 1.5rem; /* 24px Figma */
  font-weight: 600;
  line-height: 1.17; /* 28px/24px */
  color: var(--white);
  margin: 0;
}

/* Lien PDF téléchargement */
.ressources-card-pdf {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: "Outfit", sans-serif;
  font-size: 1rem; /* 16px Figma */
  font-weight: 600;
  line-height: 2.25;
  color: var(--white);
  text-decoration: underline;
  margin-top: 0.25rem;
  transition: color 0.2s, opacity 0.2s;
}
.ressources-card-pdf:hover {
  color: var(--vertclair);
  opacity: 0.9;
}

/* Wrapper du bouton "En savoir plus" — grandit vers le bas pour révéler le bouton */
.ressources-card-btn-wrap {
  overflow: hidden;
  max-height: 0;
  margin-top: 0;
  transition: max-height 0.4s ease, margin-top 0.35s ease;
}
.ressources-card:hover .ressources-card-btn-wrap {
  max-height: 60px;
  margin-top: 0.75rem;
}

/* Bouton "En savoir plus" */
.ressources-card-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--white);
  border: none;
  border-radius: 100px;
  padding: 5px 5px 5px 20px;
  font-family: "DM Sans", sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--vert);
  cursor: pointer;
  align-self: flex-start;
  transition: background 0.2s, color 0.2s;
}
.ressources-card-btn:hover {
  background: var(--vertclair);
  color: var(--white);
}
.ressources-card-btn:hover .ressources-btn-icon {
  background: var(--white);
  color: var(--vert);
}
/* Icône dans le bouton "En savoir plus" */
.ressources-card-btn .ressources-btn-icon {
  background: var(--vert);
  color: var(--white);
}

/* Bouton "Voir plus" */
.ressources-loadmore-wrap {
  display: flex;
  justify-content: center;
  margin-top: 2.5rem;
}

.ressources-loadmore-btn {
  display: inline-flex;
  align-items: center;
  gap: 15px;
  background: var(--white);
  border: 1.5px solid var(--vert);
  border-radius: 100px;
  padding: 5px 5px 5px 25px;
  font-family: "DM Sans", sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--vert);
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.ressources-loadmore-btn:hover {
  background: var(--vert);
  border-color: var(--vert);
  color: var(--white);
}
.ressources-loadmore-btn:hover .ressources-btn-icon {
  background: var(--white);
  color: var(--vert);
}

/* ---- Responsive ---- */
@media (max-width: 991px) {
  .ressources-hero {
    padding: 8rem 0 2.5rem;
  }

  .ressources-pubs-section {
    padding: 2rem 0 2rem;
  }

  .ressources-pub-wrap {
    padding-bottom: 14px;
    padding-right: 14px;
  }

  .ressources-pub-img-placeholder {
    width: 110px;
  }

  .ressources-nav-arrow--left {
    left: -18px;
  }
  .ressources-nav-arrow--right {
    right: -18px;
  }

  .ressources-search-section {
    padding: 2rem 0;
  }

  .ressources-grid-section {
    padding: 1rem 0 3.5rem;
  }
}

@media (max-width: 767px) {
  .ressources-hero-title {
    font-size: 2.5rem;
  }

  .ressources-pub-img-placeholder {
    width: 80px;
  }

  .ressources-pub-title {
    font-size: 1.1rem;
  }

  .ressources-pub-desc {
    font-size: 0.9rem;
  }

  .ressources-pub-tags li {
    font-size: 0.8rem;
  }

  .ressources-filters-row {
    flex-direction: column;
    align-items: stretch;
  }

  .ressources-filter-select-wrap {
    min-width: unset;
  }

  .ressources-search-btn {
    justify-content: center;
  }

  .ressources-card-img-ph {
    width: 160px;
    height: 224px;
  }

  .ressources-card-title {
    font-size: 1.25rem;
  }
}

.ressources-pubs-row {
  flex: 1;
}


/* ==============================
   Page Action – Promouvoir l'agriculture paysanne (action.html)
   ============================== */

/* ---- Hero ---- */
.action-hero {
  position: relative;
  background: var(--bleu);
  padding: 6.5rem 0 4rem;
  overflow: hidden;
}

/* Vague décorative bas du hero (même principe que Subtract Figma) */
.action-hero-wave {
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 60px;
  background: var(--body-bg);
  clip-path: ellipse(55% 100% at 50% 100%);
}

.action-hero-deco {
  position: absolute;
  top: -20%;
  right: -8%;
  width: 42%;
  pointer-events: none;
}
.action-hero-deco img {
  width: 100%;
  height: auto;
  opacity: 0.06;
}

.action-hero-inner {
  position: relative;
  z-index: 1;
}

/* Titre H1 bicolore (70px Figma, Outfit SemiBold) */
.action-hero-title {
  font-family: "Outfit", sans-serif;
  font-size: clamp(2.2rem, 5.5vw, 4.375rem);
  font-weight: 600;
  line-height: 1.05;
  margin: 0 0 0.6rem;
}
.action-hero-title--accent {
  color: var(--vertclair); /* #c7d326 */
}
.action-hero-title--white {
  color: var(--white);
}

.action-hero-separator {
  width: clamp(60px, 6vw, 115px);
  height: 2px;
  background: var(--white);
  margin: 0.6rem 0 0;
}

/* ---- Barre de navigation ancres ---- */
.action-anchors-nav {
  background: var(--vertclair);
  padding: 2rem 0;
  position: sticky;
  top: 120px; /* compense le header fixe */
  z-index: 1; /* reste sous la décoration subtract jusqu'au scroll */
  transition: box-shadow 0.2s;
}
.action-anchors-nav.is-sticky {
  z-index: 500; /* passe au-dessus du contenu seulement quand collée */
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}
@media (max-width: 991px) {
  .action-anchors-nav { top: 80px; }
}
@media (max-width: 575px) {
  .action-anchors-nav { top: 70px; }
}
.action-anchors-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
}
.action-anchor-sep {
  color: #6f6f6f;
  font-size: 1rem;
  user-select: none;
}
.action-anchor-link {
  font-family: "Outfit", sans-serif;
  font-size: clamp(1.2rem, 1.2vw, 1.05rem);
  font-weight: 500;
  color: #6f6f6f;
  text-decoration: none;
  padding: 0.2rem 0.4rem;
  border-radius: 4px;
  transition: color 0.2s, background 0.2s;
}
.action-anchor-link:hover {
  color: var(--bleu);
}
.action-anchor-link--active {
  color: var(--bleu);
  font-weight: 700;
}

/* ---- Titre de section générique H2 (52px Figma, #4c73b2) ---- */
.action-section-heading {
  font-family: "Outfit", sans-serif;
  font-size: clamp(1.6rem, 3.5vw, 3.25rem); /* 52px Figma */
  font-weight: 600;
  line-height: 1.35;
  color: var(--bleu);
  margin: 0 0 1.25rem;
}

/* ---- Section Charte ---- */
.action-charte-section {
  background: var(--body-bg);
  padding: 4rem 0 4.5rem;
  position: relative;
  overflow: hidden;
}

/* Lien "Une charte" */
.action-charte-link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: "Outfit", sans-serif;
  font-size: clamp(1rem, 1.8vw, 1.75rem);
  font-weight: 500;
  color: var(--bleu);
  text-decoration: none;
  margin-bottom: 1.5rem;
  transition: color 0.2s;
}
.action-charte-link:hover {
  color: var(--vert);
}
.action-charte-link-icon {
  display: inline-flex;
  align-items: center;
  font-size: 0.9em;
  color: var(--vertclair);
}

/* Corps de texte */
.action-charte-body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 2rem;
  margin-left: 45px;
}
.action-charte-body p {
  font-family: "Outfit", sans-serif;
  font-weight: 400;
  color: #000;
  line-height: 1.55;
  margin: 0;
}

/* Accordion items */
.action-charte-accordion {
  list-style: none;
  padding: 0;
  margin: 20px;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.action-charte-accordion-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: "Outfit", sans-serif;
  font-size: clamp(0.95rem, 1.4vw, 1.25rem);
  font-weight: 500;
  color: var(--vert);
  text-align: left;
  transition: color 0.2s;
}
.action-charte-accordion-btn:hover {
  color: var(--vert);
}
.action-charte-accordion-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  background: var(--vertclair);
  border-radius: 50%;
  color: var(--white);
  font-size: 1rem;
  flex-shrink: 0;
  transition: background 0.2s, transform 0.25s;
}
.action-charte-accordion-btn:hover .action-charte-accordion-icon {
  background: var(--vert);
}
.action-charte-accordion-btn[aria-expanded="true"] .action-charte-accordion-icon {
  transform: rotate(45deg);
}

/* Image brochure */
.action-brochure-wrap {
  background-color: var(--white);
  border-radius: 20px;
  position: relative;
  display: inline-block;
  max-width: 318px;
  width: 100%;
  padding-bottom: 10px;
}

.action-brochure-deco {
  position: absolute;
  top: -40%;
  right: -15%;
  width: 100%;
  height: 90%;
  background-color: #e1e1e1;
  mask-image: url("../assets/images/carto-feuille3.svg");
  mask-repeat: no-repeat;
  mask-size: contain;
  mask-position: center;
  opacity: 0.45;
  pointer-events: none;
  z-index: 0;
}

.action-brochure-deco-vert {
  position: absolute;
  top: -20%;
  right: 20%;
  width: 15%;
  height: 90%;
  background-color: #c7d488;
  mask-image: url("../assets/images/carto-feuille3.svg");
  mask-repeat: no-repeat;
  mask-size: contain;
  mask-position: center;
  opacity: 0.45;
  pointer-events: none;
  z-index: 0;
}

.action-brochure-deco-gris {
  position: absolute;
  top: 15%;
  right: 70%;
  width: 20%;
  height: 40%;
  background-color: #bbbbbb;
  mask-image: url("../assets/images/carto-feuille3.svg");
  mask-repeat: no-repeat;
  mask-size: contain;
  mask-position: center;
  opacity: 0.25;
  pointer-events: none;
  rotate: 80deg;
  z-index: 0;
}





.action-brochure-ph {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 318 / 450;
  background: var(--white);
  border-radius: 10px;
  overflow: hidden;
}

.action-brochure-ph img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 20px;
  padding: 10px
}

/* Caption téléchargement brochure */
.action-brochure-caption-wrap {
  background-color: var(--white);
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
}
.action-brochure-caption-label {
  font-family: "Outfit", sans-serif;
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--bleu);
}
.action-brochure-dl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: var(--bleu);
  border-radius: 50%;
  color: var(--white);
  font-size: 1.1rem;
  text-decoration: none;
  transition: background 0.2s, transform 0.2s;
}
.action-brochure-dl-btn:hover {
  background: var(--vert);
  transform: translateY(2px);
}

/* Rangée 3 cartes thématiques */
.action-charte-cards-row {
  margin-top: 3rem;
}
.action-charte-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 2.5rem 1.5rem 2.5rem;
  border-radius: 14px;
  text-decoration: none;
  overflow: hidden;
  min-height: 180px;
  height: 100%;
  transition: transform 0.25s, box-shadow 0.25s;
}
.action-charte-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
}
.action-charte-card--blue  { background: var(--bleu); }
.action-charte-card--vert  { background: var(--vert); }
.action-charte-card--vertpale { background: var(--vert); }
.action-charte-card-left--vert { background: var(--vert); }

/* Feuille décorative */
.action-charte-card-deco {
  position: absolute;
  top: -45%;
  right: -20%;
  width: 70%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  opacity: 0.2;
  filter: brightness(0) invert(1);
  pointer-events: none;
}

.action-charte-card--vert .action-charte-card-deco {
  rotate: 25deg;
}
.action-charte-card--blue  .action-charte-card-deco {
  background-image: url("../assets/images/carto-feuille2.svg");
}
.action-charte-card--vert .action-charte-card-deco,
.action-charte-card--vertpale .action-charte-card-deco {
  background-image: url("../assets/images/carto-feuille.svg");
}

.accompagnement-charte-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1.5rem 1.5rem 1.5rem;
  border-radius: 14px;
  text-decoration: none;
  overflow: hidden;
  min-height: 180px;
  height: 100%;
  transition: transform 0.25s, box-shadow 0.25s;
}

.action-charte-card-title {
  position: relative;
  font-family: "Outfit", sans-serif;
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  font-weight: 700;
  color: var(--white);
  line-height: 1.2;
  margin: 0;
}

.action-charte-card-deco-left {
  position: absolute;
  top: -15%;
  right: -30%;
  width: 70%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  opacity: 0.2;
  filter: brightness(0) invert(1);
  pointer-events: none;
  rotate: 150deg;
}

.action-charte-card-left--vert .action-charte-card-deco-left {
  background-image: url("../assets/images/carto-feuille2.svg");
}

.action-charte-card-desc {
  position: relative;
  font-family: "Outfit", sans-serif;
  font-size: clamp(0.85rem, 1.2vw, 1rem);
  font-weight: 400;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.5;
  margin: 0;
}

/* ---- Section Accompagnement (fond photo sombre) ---- */
.action-accomp-section {
  position: relative;
  padding: 4.5rem 0 5rem;
  overflow: hidden;
}

/* Photo de fond */
.action-accomp-bg {
  position: absolute;
  inset: 0;
  background: url("../assets/images/image-action.jpg") center center / cover no-repeat;
  z-index: 0;
}

/* Overlay sombre (rgba 0.53 Figma) */
.action-accomp-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.53);
  z-index: 1;
}

.action-accomp-inner {
  position: relative;
  z-index: 2;
}

/* Titre Accompagnement (#c7d326, 52px Figma) */
.action-accomp-heading {
  font-family: "Outfit", sans-serif;
  font-size: clamp(1.6rem, 3.5vw, 3.25rem);
  font-weight: 600;
  line-height: 1.35;
  color: var(--vertclair);
  margin: 0 0 1rem;
}

/* Corps Accompagnement (#fff, 24px) */
.action-accomp-desc {
  font-family: "Outfit", sans-serif;
  font-size: clamp(1rem, 1.5vw, 1.5rem);
  font-weight: 400;
  color: var(--white);
  line-height: 1.55;
  max-width: 680px;
  margin: 0;
}

.action-accomp-cards-row {
  margin-top: 2.5rem;
}

/* CTA "Prendre contact avec son ADEAR" */
.action-contact-cta {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  border-radius: 50px;
  padding: 0.75rem 1.25rem 0.75rem 1rem;
  text-decoration: none;
  transition: background 0.2s;
  z-index: 100;
}

.action-contact-cta-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  color: var(--white);
  font-size: 1.2rem;
  flex-shrink: 0;
}
.action-contact-cta-label {
  font-family: "Outfit", sans-serif;
  font-size: clamp(0.9rem, 1.3vw, 1.1rem);
  font-weight: 500;
  color: var(--white);
  white-space: nowrap;
}
.action-contact-cta-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  background: var(--white);
  border-radius: 50%;
  color: var(--vertclair);
  font-size: 1.1rem;
  flex-shrink: 0;
  transition: transform 0.2s;
}
.action-contact-cta:hover .action-contact-cta-arrow {
  transform: translateX(3px);
}

/* CTA + carte France */
.action-accomp-cta-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 2.5rem;
  flex-wrap: wrap;
}
.action-accomp-cta-map {
  flex-shrink: 0;
  position: absolute;
  right: 430px;
}
.action-accomp-cta-map img {
  height: 90px;
  width: auto;
  object-fit: contain;
  opacity: 0.85;
}

/* Carte glassmorphism (434×239px Figma) */
.action-glass-card {
  background: rgba(76, 115, 178, 0.68);
  backdrop-filter: blur(14.15px);
  -webkit-backdrop-filter: blur(14.15px);
  border: 2px solid var(--white);
  border-radius: 16px;
  padding: 1.75rem 1.5rem;
  height: 100%;
  transition: background 0.25s;
}
.action-glass-card:hover {
  background: rgba(76, 115, 178, 0.82);
}

.action-glass-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

/* Titre carte glassmorphism (#fff, 28px Outfit Medium) */
.action-glass-card-title {
  font-family: "Outfit", sans-serif;
  font-size: clamp(1rem, 1.8vw, 1.75rem); /* 28px Figma */
  font-weight: 500;
  line-height: 1.2;
  color: var(--white);
  margin: 0;
}

.action-glass-card-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 45px;
  color: var(--white);
  font-size: 1.5rem;
  flex-shrink: 0;
  opacity: 0.75;
  transition: opacity 0.2s, transform 0.2s;
}
.action-glass-card:hover .action-glass-card-arrow {
  opacity: 1;
  transform: translateX(4px);
}

/* Liste checklist (#fff, DM Sans Regular 18px) */
.action-glass-card-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}
.action-glass-card-list li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: "DM Sans", sans-serif;
  font-size: 1.125rem; /* 18px Figma */
  font-weight: 400;
  line-height: 1.65;
  color: var(--white);
}
.action-glass-check {
  font-size: 0.95rem;
  color: var(--vertclair);
  flex-shrink: 0;
}

/* ---- Section Diagnostic ---- */
.action-diag-section {
  background: var(--body-bg);
  padding: 8.5rem 0 8rem;
  position: relative;
  overflow: hidden;
}

/* Corps Diagnostic */
.action-diag-body {
  font-family: "Outfit", sans-serif;
  font-weight: 400;
  color: #000;
  line-height: 1.55;
  margin: 0 0 2rem;
}

/* Rangée cartes outils */
.action-diag-cards-row {
  margin-top: 2.5rem;
  justify-content: center;
}

/* Image diagnostic */
.action-diag-img-wrap {
  position: relative;
  width: 100%;
}
.action-diag-img-ph {
  position: relative;
  z-index: 1;
  width: 413px;
  border-radius: 10px;
  overflow: hidden;
}
.action-diag-img-ph img {
  object-fit: cover;
  display: block;
}

/* ---- Section Projets en partenariat ---- */
.action-projets-section {
  background: var(--vertclair);
  padding: 3.5rem 0 4rem;
}

.action-projets-heading {
  font-family: "Outfit", sans-serif;
  font-size: clamp(1.6rem, 3.5vw, 3.25rem);
  font-weight: 600;
  color: var(--bleu);
  margin: 0 0 2.5rem;
}

.action-projets-slider-wrap {
  position: relative;
}

.action-projets-row {
  flex: 1;
}

/* Carte projet (fond bleu, même structure que ressources-pub-card) */
.action-projet-card {
  position: relative;
  z-index: 1;
  background: var(--bleu);
  border-radius: 16px;
  padding: 1.5rem;
  display: flex;
  flex-direction: row;
  gap: 1.5rem;
  height: 100%;
  transition: transform 0.25s;
}
.ressources-pub-wrap:hover .action-projet-card {
  transform: translate(-3px, -3px);
}

/* Zone image (carré blanc) */
.action-projet-img-area {
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  padding-top: 0.25rem;
}
.action-projet-img-ph {
  width: clamp(110px, 14vw, 180px);
  aspect-ratio: 1 / 1;
  background: var(--white);
  border-radius: 12px;
}

/* Contenu texte */
.action-projet-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1rem;
  min-width: 0;
}

.action-projet-title {
  font-family: "Outfit", sans-serif;
  font-size: clamp(1.1rem, 2vw, 1.6rem);
  font-weight: 700;
  color: var(--white);
  line-height: 1.2;
  margin: 0 0 0.75rem;
}

.action-projet-desc {
  font-family: "Outfit", sans-serif;
  font-size: clamp(0.85rem, 1.2vw, 1.1rem);
  font-weight: 400;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.5;
  margin: 0;
}

.action-projet-btn-wrap {
  display: flex;
  justify-content: flex-end;
  margin-top: auto;
}

/* ---- Section Ressources & Vidéos ---- */
.action-content-section {
  padding: 3rem 0 4.5rem;
}

/* Titre de colonne */
.action-content-heading {
  font-family: "Outfit", sans-serif;
  font-size: clamp(1.4rem, 2.5vw, 2.25rem);
  font-weight: 700;
  color: var(--vert);
  margin: 0 0 1.5rem;
}

/* Vidéos empilées verticalement */
.action-video-stack {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.action-video-item {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.action-video-card--sm .action-video-thumb {
  aspect-ratio: 16 / 9;
}

.action-video-label {
  font-family: "Outfit", sans-serif;
  font-size: clamp(0.85rem, 1.1vw, 1rem);
  font-weight: 500;
  color: var(--vert);
  line-height: 1.4;
  margin: 0;
}

/* Liste ressources */
.action-resource-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.action-resource-item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}
.action-resource-icon {
  color: var(--bleu);
  font-size: 1rem;
  flex-shrink: 0;
}
.action-resource-link {
  font-family: "DM Sans", sans-serif;
  font-size: 0.95rem;
  color: #333;
  text-decoration: none;
  transition: color 0.2s;
}
.action-resource-link:hover {
  color: var(--bleu);
  text-decoration: underline;
}

.action-content-sep {
  width: 100%;
  height: 1px;
  background: #e0dfd8;
  margin: 1.5rem 0 2rem;
}

/* ---- Accordion "Aller plus loin" ---- */
.action-accordion-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.action-accordion-item {
  border-radius: 50px; /* pill Figma */
  overflow: hidden;
  background: var(--body-bg);
  border: 1.5px solid #e0dfd8;
  transition: border-color 0.2s;
}
.action-accordion-item.open {
  border-color: var(--vert);
  border-radius: 16px; /* devient une card quand ouverte */
}

/* Bouton accordion (80×580px Figma → full-width pill) */
.action-accordion-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  padding: 1rem 1.25rem 1rem 1.5rem;
  font-family: "Outfit", sans-serif;
  font-size: 1.5rem; /* 24px Figma */
  font-weight: 500;
  line-height: 1.5;
  color: var(--vert);
  cursor: pointer;
  text-align: left;
  transition: color 0.2s;
}
.action-accordion-btn:hover {
  color: var(--bleu);
}

.action-accordion-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--vertclair);
  color: var(--white);
  font-size: 0.85rem;
  flex-shrink: 0;
  transition: transform 0.25s;
}
.action-accordion-item.open .action-accordion-icon {
  transform: rotate(90deg);
}

.action-accordion-body {
  padding: 0 1.5rem 1.25rem;
}
.action-accordion-body.show {
  display: block;
}
.action-accordion-body p {
  font-family: "DM Sans", sans-serif;
  font-size: 0.95rem;
  color: #555;
  line-height: 1.6;
  margin: 0 0 0.75rem;
}
.action-accordion-body-link {
  display: inline-flex;
  align-items: center;
  font-family: "DM Sans", sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--bleu);
  text-decoration: none;
  transition: color 0.2s;
}
.action-accordion-body-link:hover {
  color: var(--vert);
}

/* ---- Grille vidéos (316–318×211px Figma) ---- */
.action-video-grid {
  margin-bottom: 1.25rem;
}

.action-video-card {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0px 4px 56.5px 0px rgba(0, 0, 0, 0.06);
  cursor: pointer;
  transition: transform 0.22s, box-shadow 0.22s;
}
.action-video-card:hover {
  transform: translateY(-3px);
  box-shadow: 0px 8px 40px 0px rgba(0, 0, 0, 0.14);
}

/* Thumbnail placeholder (304×194px Figma) */
.action-video-thumb {
  width: 100%;
  aspect-ratio: 304 / 194;
  display: block;
  position: relative;
  overflow: hidden;
}
.action-video-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.action-video-thumb--ph {
  background: #d9d9d9; /* #d9d9d9 Figma */
}
.action-video-thumb--dark {
  background: #555e3a; /* tone champ sombre */
}

/* Overlay sombre + bouton play */
.action-video-overlay {
  position: absolute;
  inset: 0 0 auto 0;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
.action-video-card:hover .action-video-overlay {
  background: rgba(0, 0, 0, 0.55);
}

.action-video-play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--white);
  border-radius: 50%;
  color: var(--bleu);
  font-size: 1rem;
  transition: transform 0.2s;
}
.action-video-card:hover .action-video-play {
  transform: scale(1.1);
}

/* Légende sous la vidéo */
.action-video-caption {
  padding: 0.5rem 0.75rem 0.65rem;
  background: var(--white);
}
.action-video-caption--vert {
  background: var(--body-bg);
}
.action-video-title {
  font-family: "Outfit", sans-serif;
  font-size: 0.9rem; /* scaled 24px / 20px Figma */
  font-weight: 600;
  line-height: 1.25;
  color: var(--white);
  margin: 0;
}
.action-video-title--vert {
  color: var(--vert);
}
.action-video-caption:not(.action-video-caption--vert) .action-video-title {
  color: #333;
}

/* Lien voir plus */
.action-video-more {
  text-align: right;
}
.action-video-more-link {
  display: inline-flex;
  align-items: center;
  font-family: "DM Sans", sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--bleu);
  text-decoration: none;
  transition: color 0.2s;
}
.action-video-more-link:hover {
  color: var(--vert);
}

/* ---- Section Newsletter CTA ---- */
.action-newsletter-section {
  background: var(--body-bg);
  padding: 3rem 0 4rem;
}

.action-newsletter-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  text-align: center;
}

.action-newsletter-text {
  font-family: "Outfit", sans-serif;
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  color: var(--text-color);
  margin: 0;
  max-width: 480px;
}

/* Bouton newsletter (pill, white bg, shadow, DM Sans SemiBold 17px) */
.action-newsletter-btn {
  display: inline-flex;
  align-items: center;
  gap: 15px;
  background: var(--white);
  border: none;
  border-radius: 100px;
  padding: 5px 5px 5px 25px;
  font-family: "DM Sans", sans-serif;
  font-size: 1.0625rem; /* 17px Figma */
  font-weight: 600;
  font-variation-settings: 'opsz' 14;
  color: var(--vert);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  cursor: pointer;
  box-shadow: 0px 0px 8px 5px rgba(0, 0, 0, 0.15);
  transition: box-shadow 0.2s, background 0.2s, color 0.2s;
}
.action-newsletter-btn:hover {
  background: var(--vert);
  color: var(--white);
  box-shadow: 0px 0px 16px 6px rgba(0, 0, 0, 0.18);
}
.action-newsletter-btn:hover .action-newsletter-btn-icon {
  background: var(--white);
  color: var(--vert);
}

.action-newsletter-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--vert);
  color: var(--white);
  font-size: 1.1rem;
  flex-shrink: 0;
  transition: background 0.2s, color 0.2s;
}

/* ---- Responsive ---- */
@media (max-width: 991px) {
  .action-hero {
    padding: 5rem 0 3.5rem;
  }

  .action-charte-section,
  .action-diag-section {
    padding: 3rem 0 3.5rem;
  }

  .action-accomp-section {
    padding: 3.5rem 0 4rem;
  }

  .action-accomp-cta-wrap {
    position: relative;
  }

  .action-accomp-cta-map {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 0;
  }

  .action-contact-cta {
    position: relative;
    z-index: 1;
  }

  .action-brochure-wrap {
    max-width: 260px;
  }

  .action-charte-cards-row {
    margin-top: 2rem;
  }

  .action-diag-img-wrap {
    max-width: 100%;
  }

  .action-content-section {
    padding: 2.5rem 0 3.5rem;
  }

  .action-accordion-btn {
    font-size: 1.2rem;
  }
}

@media (max-width: 767px) {
  .action-hero-title {
    font-size: 2.2rem;
  }

  .action-glass-card {
    padding: 1.25rem 1rem;
  }

  .action-glass-card-title {
    font-size: 1.1rem;
  }

  .action-sub-heading {
    font-size: 1.25rem;
  }

  .action-accordion-btn {
    font-size: 1rem;
    padding: 0.85rem 1rem;
  }

  .action-video-play {
    width: 30px;
    height: 30px;
    font-size: 0.85rem;
  }

  .action-newsletter-btn {
    font-size: 0.875rem;
    padding: 5px 5px 5px 18px;
  }
}

.action-charte-link-icon-img {
  width: 40px;
}

/* ==============================
   Leaflet Popup – carte.html
   ============================== */

/* Wrapper de la bulle */
#reseau-map .leaflet-popup-content-wrapper {
  background: #fff;
  border: none;
  border-radius: 20px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.14);
  padding: 0;
  overflow: visible;
}

#reseau-map .leaflet-popup-content {
  margin: 0;
  width: 100% !important;
}

#reseau-map .leaflet-popup-content p{
  margin: 4px 0;
  display: block;
}

#reseau-map .leaflet-popup-tip {
  background: #f3f2ea;
  box-shadow: none;
}

#reseau-map .leaflet-popup-close-button {
  top: 8px;
  right: 10px;
  color: #aaa;
  font-size: 18px;
  line-height: 1;
}

/* Conteneur interne */
.reseau-popup {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  min-width: 350px;
}

/* Logo (quand présent) */
.reseau-popup-logo {
  /* width: 56px;
  height: 56px;
  object-fit: contain;
  margin-bottom: 12px; */
  border-radius: 8px;
}

/* Bloc texte */
.reseau-popup-header {
  width: 100%;
}

.reseau-popup-header strong {
  display: block;
  font-family: 'Outfit', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--bleu);
}

.reseau-popup-header p {
  font-size: 0.85rem;
  color: #888;
  line-height: 1;
}

.reseau-popup-header a {
  color: inherit;
  text-decoration: none;
}

/* Feuille décorative centrée */
.reseau-popup-leaf {
  width: 34px;
  height: 36px;
  margin-top: 14px;
  --fill-0: var(--vert);
  flex-shrink: 0;
}

/* Bouton "+" circulaire en bas à droite */
.reseau-popup-link {
  position: absolute;
  bottom: -15px;
  right: -12px;
  width: 34px;
  height: 34px;
  background: var(--vert);
  border: 1px solid var(--white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1rem;
  text-decoration: none;
  transition: background 0.2s;
}

.reseau-popup-link:hover {
  background: var(--vertclair);
  color: #fff;
}


/* ============================================================
   PAGE PROJET EN PARTENARIAT
   ============================================================ */

/* ---- Hero ---- */
.projet-hero {
  position: relative;
  padding-top: 160px; /* compense le header fixe (topbar 40px + nav 80px + extra) */
  padding-bottom: 3rem;
  min-height: 420px;
  overflow: hidden;
  background-color: var(--body-bg);
}

/* Placeholder coloré simulant la photo de fond avec son overlay */
.projet-hero-bg-placeholder {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #dce6f2 0%, #edf2e4 60%, #f8f7f0 100%);
  z-index: 0;
}

.projet-hero-inner {
  position: relative;
  z-index: 1;
}

/* Fil d'Ariane */
.projet-breadcrumb {
  margin-bottom: 1rem;
}
.projet-breadcrumb .breadcrumb-item,
.projet-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  font-family: "DM Sans", sans-serif;
  font-size: 15px;
  color: #555;
}
.projet-breadcrumb .breadcrumb-item a {
  color: #555;
  text-decoration: none;
  transition: color 0.2s;
}
.projet-breadcrumb .breadcrumb-item a:hover {
  color: var(--bleu);
}
.projet-breadcrumb .breadcrumb-item.active {
  color: var(--bleu);
}

/* Titre H1 de la page */
.projet-page-title {
  font-family: "Outfit", sans-serif;
  font-size: clamp(2rem, 4vw, 3.25rem); /* 52px Figma → fluid */
  font-weight: 600;
  line-height: 1.35;
  color: var(--bleu);
  margin-bottom: 0;
  max-width: 900px;
}

@media (max-width: 575px) {
  .projet-hero {
    padding-top: 130px;
    padding-bottom: 2rem;
    min-height: auto;
  }
}


/* ---- Section intro ---- */
.projet-intro-section {
  padding: 3rem 0 2.5rem;
  position: relative;
  overflow: hidden;
}

/* Blob organique décoratif (fond brun clair) */
.projet-intro-blob {
  width: 380px;
  height: 340px;
  background-color: #f0efdb;
  border-radius: 62% 38% 46% 54% / 60% 44% 56% 40%;
  position: relative;
  left: -40px;
}

/* Titre intro */
.projet-intro-title {
  font-family: "Outfit", sans-serif;
  font-size: clamp(1.5rem, 2.5vw, 2rem); /* 32px Figma */
  font-weight: 800;
  line-height: 1.35;
  color: var(--vert);
  margin-bottom: 1rem;
}

#article-projet h2 {
  font-family: "Outfit", sans-serif;
  font-size: clamp(1.5rem, 2.5vw, 2rem); /* 32px Figma */
  font-weight: 800;
  line-height: 1.35;
  color: var(--vert);
  margin-bottom: 1rem;
}

#article-projet .projet-suite-title {
  font-family: "Outfit", sans-serif;
  font-size: 28px; /* 26px Figma */
  font-weight: 800;
  line-height: 1.35;
  color: var(--bleu);
  margin-bottom: 0.5rem;
}

.rub-texte strong {
  color: var(--bleu);
}

/* Texte chapo */
.projet-chapo {
  font-family: "Outfit", sans-serif;
  font-weight: 400;
  line-height: 1.65;
  color: #353535;
  margin-bottom: 0;
}


/* ---- Section contenu principal ---- */
.projet-main-section {
  padding: 2rem 0 5rem;
}

/* Image principale – placeholder coloré (photo agriculteurs) */
.projet-img-main {
  width: 100%;
  height: 420px;
  background-color: #aac4d8; /* bleu-gris neutre évoquant une photo extérieure */
  border-radius: 10px;
  overflow: hidden;
}

.projet-img-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.projet-main-col {
  position: relative;
  overflow: hidden;
}

.projet-main-col::before {
  content: "";
  position: absolute;
  top: 0;
  right: 80%;
  bottom: 90%;
  left: 2%;
  background-image: url("../assets/images/carto-feuille3.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  filter: grayscale(0.8) brightness(1.2);
  opacity: 0.4;
  transform: rotate(90deg);
  pointer-events: none;
  z-index: 0;
}

.projet-main-col > * {
  position: relative;
  z-index: 1;
}

@media (max-width: 767px) {
  .projet-img-main {
    height: 240px;
  }
}

/* Bloc détails texte */
.projet-details-block {
  /* pas de style supplémentaire nécessaire */
}

.projet-details-title {
  font-family: "Outfit", sans-serif;
  font-size: clamp(1.6rem, 2.5vw, 2rem); /* 32px Figma */
  font-weight: 800;
  line-height: 1.35;
  color: var(--vert);
  margin-bottom: 1.1rem;
}

/* Citation mise en avant */
.projet-quote-highlight {
  font-family: "Albert Sans", "DM Sans", sans-serif;
  font-size: 1.1rem; /* 18px Figma */
  font-weight: 600;
  line-height: 1.67;
  color: #0d0d0d;
  border-left: none;
  padding: 0;
  margin-bottom: 1.2rem;
  font-style: normal;
}

/* Corps du texte */
.projet-body-text {
  font-family: "DM Sans", sans-serif;
  font-size: 1.06rem; /* 17–18px Figma */
  font-weight: 400;
  line-height: 1.7;
  color: #0d0d0d;
}

/* Titre sous-section (Des réussites, etc.) */
.projet-subsection-title {
  font-family: "Outfit", sans-serif;
  font-size: clamp(1.3rem, 2vw, 1.6rem);
  font-weight: 800;
  line-height: 1.35;
  color: var(--vert);
  margin-bottom: 0.5rem;
}

/* Liste de points clés */
.projet-features-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.projet-feature-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-family: "DM Sans", sans-serif;
  font-size: 1rem; /* 16–17px Figma */
  line-height: 1.65;
  color: #0d0d0d;
}

.projet-feature-icon {
  color: var(--vert);
  font-size: 1.1rem;
  flex-shrink: 0;
  margin-top: 0.15rem;
}

.projet-feature-icon--bleu {
  color: var(--bleu);
}


/* ---- Bloc vidéo ---- */
.projet-video-wrap {
  text-align: center;
}

/* Slider vidéo – dots en barres horizontales superposées */
.projet-video-wrap #projetVideoSlider {
  position: relative;
}
.projet-video-wrap .slick-dots {
  bottom: 16px;
  display: flex !important;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 0;
  list-style: none;
  margin: 0;
  position: relative;
  top: -20px;
}
.projet-video-wrap .slick-dots li {
  color: var(--vertclair) !important;
  width: 44px;
  height: 4px;
  margin: 0;
}
.projet-video-wrap .slick-dots li button {
  display: block;
  width: 100%;
  height: 4px;
  padding: 0;
  background: var(--vertclair);
  border: none;
  border-radius: 2px;
  font-size: 0;
  cursor: pointer;
  transition: background 0.3s;
}
.projet-video-wrap .slick-dots li button::before {
  display: none;
}
.projet-video-wrap .slick-dots li.slick-active button {
  background: var(--vert);
}

/* Placeholder coloré (vue aérienne ferme – tons verts) */
.projet-img-video {
  width: 100%;
  height: 380px;
  background-color: #7da86a; /* vert agricole doux */
  border-radius: 10px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.projet-img-video img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

@media (max-width: 767px) {
  .projet-img-video {
    height: 230px;
  }
}

/* Bouton play */
.projet-play-btn {
  width: 80px;
  height: 80px;
  background: transparent;
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: #0d0d0d;
  cursor: pointer;
  transition: background 0.25s, transform 0.2s;
  position: relative;
  z-index: 1;
}

.projet-play-btn:hover,
.projet-play-btn:focus-visible {
  transform: scale(1.1);
  outline-offset: 3px;
}

/* Dots de pagination galerie */
.projet-pagination {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.projet-dot {
  width: 80px;
  height: 6px;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 4px;
  display: inline-block;
  transition: background-color 0.2s;
}

.projet-dot--active {
  background-color: var(--vertclair);
}


/* ---- Témoignage ---- */
.projet-testimonial {
  text-align: center;
  padding: 3rem 1rem;
}

.projet-testimonial-icon {
  width: 60px;
  height: 60px;
  background: var(--vert);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.5rem;
  margin: 0 auto 1.5rem;
}

.projet-testimonial-text {
  font-family: "Outfit", sans-serif;
  font-size: clamp(1.1rem, 1.8vw, 1.35rem); /* 24px Figma */
  line-height: 1.6;
  color: #0d0d0d;
  border: none;
  padding: 0;
  margin-bottom: 1.5rem;
  font-style: normal;
  max-width: 720px;
  margin-inline: auto;
}

.projet-testimonial-text blockquote {
  font-weight: bold;
}

.projet-testimonial-name {
  font-family: "Outfit", sans-serif;
  font-size: 1.25rem; /* 24px Figma */
  font-weight: 600;
  color: var(--bleu);
  margin-bottom: 0.2rem;
  line-height: 1.5;
}

.projet-testimonial-role {
  font-family: "DM Sans", sans-serif;
  font-size: 0.95rem; /* 16px Figma */
  font-weight: 400;
  color: #0d0d0d;
  margin-bottom: 0;
}


/* ---- Bloc suite / perspectives ---- */
.projet-suite-title {
  font-family: "Outfit", sans-serif;
  font-size: clamp(1.6rem, 3vw, 2.5rem); /* 48px Figma */
  font-weight: 600;
  line-height: 1.25;
  color: var(--bleu);
  margin-bottom: 1rem;
}


/* ---- Sidebar ---- */
.projet-sidebar-sticky {
  position: sticky;
  top: 140px; /* compense le header fixe */
}

@media (max-width: 991px) {
  .projet-sidebar-sticky {
    position: static;
  }
}

/* Carte informations projet (fond vert clair) */
.sidebar-info-card {
  background-color: var(--vertclair);
  border-radius: 10px;
  padding: 2rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.sidebar-info-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 0.75rem 0;
}

.sidebar-info-icon {
  width: 50px;
  height: 50px;
  background: rgb(255, 255, 255);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  color: var(--bleu);
  flex-shrink: 0;
  transition: background 0.2s;
}

.sidebar-info-label {
  font-family: "DM Sans", sans-serif;
  font-size: 0.95rem; /* 16px Figma */
  font-weight: 400;
  color: #0d0d0d;
  margin-bottom: 0.25rem;
  line-height: 1.4;
}

.sidebar-info-value {
  font-family: "DM Sans", sans-serif;
  font-size: 1.1rem; /* 20px Figma */
  font-weight: 500;
  color: var(--bleu);
  margin-bottom: 0;
  line-height: 1.55;
}

.sidebar-info-value a {
  color: var(--bleu);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.2s;
}

.sidebar-info-value a:hover {
  color: #333;
}

.sidebar-divider {
    border-color: rgb(255, 255, 255);
    border-width: 2px;
    opacity: 1;
    margin: 0.75rem 0 1rem;
}

/* Carte "En savoir plus" (fond bleu) */
.sidebar-social-card {
  background-color: var(--bleu);
  border-radius: 10px;
  padding: 1.75rem;
  color: white;
}

.sidebar-social-title {
  font-family: "Outfit", sans-serif;
  font-size: 1.35rem; /* 24px Figma */
  font-weight: 600;
  color: white;
  line-height: 1.4;
  margin-bottom: 0.75rem;
}

.sidebar-social-divider {
  border-color: rgb(255, 255, 255);
  border-width: 2px;
  opacity: 1;
  margin: 0.75rem 0 1rem;
}

.sidebar-social-website {
  font-family: "DM Sans", sans-serif;
  font-size: 1.1rem; /* 20px Figma */
  font-weight: 500;
  color: #fffffc;
  text-decoration: none;
  display: block;
  transition: opacity 0.2s;
}

.sidebar-social-website:hover {
  opacity: 0.75;
  color: #fffffc;
}

.sidebar-social-icons {
  display: flex;
  gap: 0.6rem;
}

.sidebar-social-btn {
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.1rem;
  text-decoration: none;
  transition: background 0.2s, transform 0.15s;
}

.sidebar-social-btn:hover,
.sidebar-social-btn:focus-visible {
  background: rgba(255, 255, 255, 0.35);
  color: white;
  transform: translateY(-2px);
}


/* Document téléchargeable dans la sidebar sociale */
.sidebar-doc-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0;
  color: white;
  text-decoration: none;
  border-radius: 8px;
  transition: opacity 0.2s;
}

.sidebar-doc-link:hover,
.sidebar-doc-link:focus-visible {
  opacity: 0.8;
  color: white;
}

.sidebar-doc-icon {
  font-size: 1.8rem;
  flex-shrink: 0;
  opacity: 0.9;
}

.sidebar-doc-info {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.sidebar-doc-name {
  font-family: "DM Sans", sans-serif;
  font-size: 1rem;
  font-weight: 500;
}

.sidebar-doc-size {
  font-family: "DM Sans", sans-serif;
  font-size: 0.82rem;
  opacity: 0.75;
}

.sidebar-doc-download {
  font-size: 1.1rem;
  flex-shrink: 0;
  opacity: 0.8;
}


/* ---- Partenaires & Financeurs ---- */
.projet-logos-section {
  padding: 3rem 0;
}

.projet-logos-group {
  margin-bottom: 2.5rem;
}

.projet-logos-category {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.projet-logos-category::before,
.projet-logos-category::after {
  content: "";
  flex: 1;
  height: 1px;
}

.projet-logos-category--bleu::before,
.projet-logos-category--bleu::after {
  background: var(--bleu);
}

.projet-logos-category--vert::before,
.projet-logos-category--vert::after {
  background: var(--vertclair);
}

.projet-logos-label {
  font-family: "Outfit", sans-serif;
  font-size: 2rem;
  font-weight: 600;
  white-space: nowrap;
}

.projet-logos-label--bleu { color: var(--bleu); }
.projet-logos-label--vert { color: var(--vertclair); }

.projet-logos-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
}

.projet-logo-card {
  /* background: #fff; */
  border-radius: 10px;
  /* box-shadow: 0 2px 8px rgba(0,0,0,0.07); */
  flex: 0 0 calc(25% - 0.75rem);
  min-width: 130px;
  aspect-ratio: 3 / 2;
  position: relative;
  overflow: hidden;
}

.projet-logos-grid--financeurs .projet-logo-card {
  flex: 0 0 calc(50% - 0.5rem);
}

.projet-logo-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 0.5rem;
}

@media (max-width: 767px) {
  .projet-logo-card {
    flex: 0 0 calc(33.33% - 1rem);
  }
}

/* ---- Navigation projets précédent / suivant ---- */
.projet-nav-section {
  padding: 3rem 0 5rem;
}

.projet-nav-card {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.1rem 1.5rem;
  border: 2px solid var(--bleu);
  border-radius: 87px;
  background: rgba(251, 253, 255, 0.35);
  text-decoration: none;
  transition: background 0.2s, box-shadow 0.2s, transform 0.2s;
}

.projet-nav-card:hover,
.projet-nav-card:focus-visible {
  background: white;
  box-shadow: 0 4px 20px rgba(76, 115, 178, 0.18);
  transform: translateY(-2px);
}

.projet-nav-card--next {
  background: white;
}

.projet-nav-img-wrap {
  flex-shrink: 0;
}

/* Placeholder photo ronde dans la navigation */
.projet-nav-img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  background-color: #8da127;
}

.projet-nav-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.projet-nav-img--prev {
  background-color: #a0b8a0; /* teinte verte-grise (photo agricultrice) */
}

.projet-nav-img--next {
  background-color: #7a9cb5; /* teinte bleu-grise (photo animaux ferme) */
  border: 2px solid var(--bleu);
}

.projet-nav-content {
  flex: 1;
}

.projet-nav-direction {
  font-family: "DM Sans", sans-serif;
  font-size: 0.9rem; /* 16px Figma */
  font-weight: 400;
  color: var(--vert);
  display: block;
  margin-bottom: 0.4rem;
  line-height: 1.4;
}

.projet-nav-title {
  font-family: "Outfit", sans-serif;
  font-size: 1.2rem; /* 24px Figma */
  font-weight: 600;
  color: var(--bleu);
  margin-bottom: 0;
  line-height: 1.4;
}

@media (max-width: 767px) {
  .projet-nav-card {
    border-radius: 16px;
    padding: 1rem;
  }
  .projet-nav-img {
    width: 70px;
    height: 70px;
  }
  .projet-nav-title {
    font-size: 1rem;
  }
}

/* ---- Utilitaires ---- */
.page-projet {
  /* Pas de surcharge globale nécessaire */
}

/* Blocs sémantiques sans style propre (structure uniquement) */
.projet-suite-block,
.projet-reussites-block {
  /* conteneurs sémantiques */
}

/* Contenu sidebar (label + valeur) */
.sidebar-info-content {
  flex: 1;
  min-width: 0; /* évite l'overflow du texte */
}

/* Liste bleue (suite du projet) */
.projet-features-list--bleu .projet-feature-icon {
  color: var(--bleu);
}

.subtract-section {
  background-color: var(--bleu);
}
.subtract-decoration-action {
  position: relative;
  top: 15px;
  z-index: 100;
}

.subtract-decoration {
  position: relative;
  top: -20px;
  z-index: 100;
}

/* ==============================
   Page Actions Liste
   ============================== */

.actions-liste-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  gap: 1rem;
  background: #fff;
  border-radius: 16px;
  padding: 1rem 1rem 1.25rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: box-shadow 0.25s;
}
.actions-liste-card:hover {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.14);
}

.actions-liste-img-wrap {
  border-radius: 12px;
  overflow: hidden;
  width: 100%;
}

.actions-liste-img-ph {
  width: 100%;
  aspect-ratio: 5 / 3;
  background: #c8d4a0;
  display: block;
  position: relative;
  overflow: hidden;
}

.actions-liste-img-ph img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.35s ease;
}

.actions-liste-card:hover .actions-liste-img-ph img {
  transform: scale(1.04);
}

.actions-liste-title {
  font-family: "Outfit", sans-serif;
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  font-weight: 700;
  line-height: 1.25;
  margin: 0;
  transition: opacity 0.2s;
  text-align: center;
}
.actions-liste-card:hover .actions-liste-title {
  opacity: 0.8;
}

.actions-liste-title--bleuclair   { color: var(--bleuclair); }
.actions-liste-title--bleu   { color: var(--bleu); }
.actions-liste-title--orange { color: var(--orange); }
.actions-liste-title--vert   { color: var(--vertclair); }

.actions-liste-col--bleuclair::after,
.actions-liste-col--bleu::after,
.actions-liste-col--orange::after,
.actions-liste-col--vert::after {
  content: "";
  display: block;
  width: 60px;
  height: 4px;
  border-radius: 2px;
  margin: 0rem auto 0;
}
.actions-liste-col--bleuclair::after   { background: var(--bleuclair); }
.actions-liste-col--bleu::after   { background: var(--bleu); }
.actions-liste-col--orange::after { background: var(--orange); }
.actions-liste-col--vert::after   { background: var(--vertclair); }

.actions-liste-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 1rem;
  color: var(--white);
  transition: transform 0.25s;
}
.actions-liste-card:hover .actions-liste-arrow {
  transform: translateY(3px);
}

.actions-liste-arrow--bleuclair   { background: var(--bleuclair); }
.actions-liste-arrow--bleu   { background: var(--bleu); }
.actions-liste-arrow--orange { background: var(--orange); }
.actions-liste-arrow--vert   { background: var(--vertclair); }

/* ==============================
   Page Bloc (détail thématique)
   ============================== */

/* ---- Section titre + onglets ---- */
.bloc-header-section {
  padding: 2.5rem 0 0;
}

.bloc-main-title {
  font-family: "Outfit", sans-serif;
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  font-weight: 700;
  color: var(--bleu);
  margin: 0 0 2rem;
}

/* Onglets de navigation */
.bloc-tabs-nav {
  width: 100%;
  background: #eeeee8;
  height: 80px;
  padding-top: 5px;
}

.bloc-tabs-inner {
  display: flex;
  align-items: center;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.bloc-tab {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.75rem 5rem 0.75rem 0.6rem;
  min-height: 4rem;
  border-left: 3px solid var(--vert);
  font-family: "Outfit", sans-serif;
  font-size: clamp(0.8rem, 1.1vw, 0.95rem);
  font-weight: 500;
  color: var(--vert);
  text-decoration: none;
  line-height: 1.3;
  transition: color 0.2s, border-color 0.2s;
}
.bloc-tab:hover {
  opacity: 0.8;
}
.bloc-tab--active {
  border-color: var(--bleu);
  color: var(--bleu);
  font-weight: 700;
}

.bloc-tab-arrow {
  font-size: 1rem;
  color: var(--text-color);
  flex-shrink: 0;
  margin-right: 0.5rem;
}

/* ---- Section principes ---- */
.bloc-content-section {
  padding: 3rem 0 2rem;
}

#principes.bloc-content-section {
  position: relative;
  overflow: hidden;
}

#principes.bloc-content-section::before {
  content: "";
  position: absolute;
  top: 5%;
  right: 80%;
  bottom: 5%;
  left: 2%;
  background-image: url("../assets/images/carto-feuille3.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  filter: grayscale(0.8) brightness(1.2);
  opacity: 0.4;
  transform: rotate(90deg);
  pointer-events: none;
  z-index: 0;
}

#principes.bloc-content-section > * {
  position: relative;
  z-index: 1;
}

.bloc-section-title {
  font-family: "Outfit", sans-serif;
  font-size: clamp(1.1rem, 1.8vw, 1.5rem);
  font-weight: 700;
  color: var(--vert);
  line-height: 1.35;
  margin: 0 0 1.25rem;
}

.bloc-section-body {
  font-family: "Outfit", sans-serif;
  font-size: clamp(0.95rem, 1.3vw, 1.1rem);
  color: #222;
  line-height: 1.65;
  margin: 0 0 1.75rem;
}

.bloc-inline-link {
  color: var(--bleu);
  text-decoration: none;
  text-underline-offset: 3px;
}
.bloc-inline-link:hover {
  color: var(--bleu);
}

/* Liste des 8 principes */
.bloc-principles-list {
  list-style: none;
  padding: 0 0 0 1.5rem;
  margin-left: 40px;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.bloc-principles-list li {
  font-family: "DM Sans", sans-serif;
  font-size: clamp(0.85rem, 1.1vw, 0.95rem);
  color: #333;
  line-height: 1.6;
  position: relative;
}
.bloc-principles-list li::before {
  content: "•";
  position: absolute;
  left: -1.25rem;
  color: var(--vert);
  font-weight: 700;
}

.bloc-principle-label {
  color: var(--vert);
  font-weight: 700;
}

/* ---- Sous-section détail + image ---- */
.bloc-detail-section {
  padding: 2rem 0 4rem;
}

.bloc-subsection-title {
  font-family: "Outfit", sans-serif;
  font-size: clamp(1.1rem, 1.8vw, 1.4rem);
  font-weight: 700;
  color: var(--bleu);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1.75rem;
}

.bloc-subsection-icon {
  display: inline-flex;
  align-items: center;
}

.bloc-subsection-icon img {
  width: 1em;
  height: 1em;
  object-fit: contain;
  vertical-align: middle;
}

.bloc-detail-body {
  font-family: "Outfit", sans-serif;
  font-size: clamp(0.9rem, 1.2vw, 1rem);
  color: #333;
  line-height: 1.65;
  margin: 0 0 1rem;
}

/* Lien téléchargement */
.bloc-dl-link {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  margin-top: 0.5rem;
  color: var(--bleu);
  font-family: "Outfit", sans-serif;
  font-size: clamp(0.9rem, 1.2vw, 1rem);
  font-weight: 500;
  transition: color 0.2s;
}
.bloc-dl-link:hover {
  color: var(--vert);
}

.bloc-dl-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  background: var(--bleu);
  border-radius: 50%;
  color: var(--white);
  font-size: 1rem;
  flex-shrink: 0;
  transition: background 0.2s;
}
.bloc-dl-link:hover .bloc-dl-icon {
  background: var(--vert);
}

/* Image placeholder */
.bloc-detail-img-wrap {
  border-radius: 12px;
  overflow: hidden;
  max-width: 80%;
  margin: 0 auto;
}
.bloc-detail-img-ph {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: #c8d4a0;
  display: block;
  position: relative;
  overflow: hidden;
}
.bloc-detail-img-ph img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ==============================
   Barre d'outils SPIP admin
   ============================== */
.spip-admin-float,
.spip-admin-bloc {
  z-index: 1100 !important;
  left: 0 !important;
  width: 40% !important;
}

/* ===== CONTENU RUBRIQUE (CHAPO + TEXTE) ===== */
.rub-content-section { padding: 60px 0 40px; }

/* ===== ARTICLES ASSOCIÉS (RUBRIQUE DÉFAUT) ===== */
.rub-articles-section {
  padding: 20px 0 60px;
  margin-top: 20px;
}

.rub-articles-section .section-title {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  margin-bottom: 36px;
}

.rub-chapo {
  font-size: 1.2rem;
  font-weight: 500;
  color: #2a3a2a;
  line-height: 1.7;
  margin-bottom: 32px;
  border-left: 4px solid #8da127;
  padding-left: 16px;
}

.rub-texte {
  font-size: 1.2rem;
  color: #3a3a3a; 
  line-height: 1.8; }

.rub-texte h2 {
  font-size: 1.35rem;
  font-weight: 700;
  color: #4c73b2;
  margin: 32px 0 12px;
}
.rub-texte h3 {
  font-size: 1.1rem;
  font-weight: 600;
  color: #8da127;
  margin: 24px 0 10px;
}
.rub-texte h4 {
  font-size: 1rem;
  font-weight: 600;
  color: #3a3a3a;
  margin: 20px 0 8px;
}

.rub-texte p { margin-bottom: 16px; }

.rub-texte img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  margin: 12px 0;
  display: block;
}

.rub-texte ul,
.rub-texte ol {
  padding-left: 0;
  list-style: none;
  margin-bottom: 20px;
}
.rub-texte ul li,
.rub-texte ol li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 10px;
  font-size: .95rem;
  color: #3a3a3a;
  line-height: 1.7;
}
.rub-texte ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 3px;
  width: 18px;
  height: 18px;
  background: #4c73b2;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/%3E%3Cpath d='M10.97 4.97a.235.235 0 0 0-.02.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-1.071-1.05z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/%3E%3Cpath d='M10.97 4.97a.235.235 0 0 0-.02.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-1.071-1.05z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.rub-texte ol { counter-reset: rub-ol; }
.rub-texte ol li::before {
  content: counter(rub-ol);
  counter-increment: rub-ol;
  position: absolute;
  left: 0;
  top: 1px;
  width: 20px;
  height: 20px;
  background: #4c73b2;
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rub-texte blockquote {
  margin: 24px 0;
}

.rub-texte a { color: #4c73b2; text-decoration: underline; }
.rub-texte a:hover { color: #8da127; }

.rub-texte table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 24px;
  font-size: .9rem;
}
.rub-texte th {
  background: #4c73b2;
  color: #fff;
  padding: 10px 14px;
  text-align: left;
}
.rub-texte td {
  padding: 8px 14px;
  border-bottom: 1px solid #e8e8e8;
}
.rub-texte tr:nth-child(even) td { background: #f5f8e8; }