/* ============================================================
   ÉCO-DÉFIS® PACA — Design System v2
   ============================================================ */

/* Polices Google : chargées par functions.php (wp_enqueue_style) */

/* ── 1. TOKENS ────────────────────────────────────────────── */
:root {
  /* Palette */
  --rose:          #e46392;   /* CTA rose, badges, soulignements */
  --rose-clair:    #eb8aad;   /* Formes déco, accents doux */
  --rose-blush:    #fce8f0;   /* Fonds alternés clairs */

  --vert-fonce:    #1e3d2f;   /* Header, footer, sections sombres */
  --vert-moyen:    #2c6e49;   /* Sous-titres, icônes, liens hover */
  --vert-clair:    #dbefc2;   /* Fonds sections claires, tags, pills */
  --vert-pale:     #eaf4d8;   /* Fond accordéon ouvert */
  --vert-lime:     #8dc63f;   /* Trait cursif, numéros chiffres clés */

  --blanc:         #ffffff;
  --gris-texte:    #2d2d2d;
  --gris-doux:     #6b7280;
  --gris-fond:     #f7f8f5;

  /* Typo */
  --font-titre:    'Montserrat', system-ui, sans-serif;
  --font-corps:    'Montserrat', system-ui, sans-serif;
  --font-serif:    'Source Serif 4', Georgia, serif;  /* Grands titres hero */

  /* Échelle typo */
  --t-xs:   0.75rem;
  --t-sm:   0.875rem;
  --t-base: 1rem;
  --t-lg:   1.125rem;
  --t-xl:   1.25rem;
  --t-2xl:  1.5rem;
  --t-3xl:  1.875rem;
  --t-4xl:  2.25rem;
  --t-5xl:  3rem;
  --t-6xl:  3.75rem;
  --t-7xl:  4.5rem;

  /* Espacement */
  --s2:  0.5rem;
  --s3:  0.75rem;
  --s4:  1rem;
  --s5:  1.25rem;
  --s6:  1.5rem;
  --s8:  2rem;
  --s10: 2.5rem;
  --s12: 3rem;
  --s16: 4rem;
  --s20: 5rem;
  --s24: 6rem;
  --s32: 8rem;

  /* Rayons */
  --r-sm:   0.5rem;
  --r-md:   1rem;
  --r-lg:   1.5rem;
  --r-xl:   2rem;
  --r-full: 9999px;

  /* Ombres */
  --shadow-sm: 0 1px 4px rgba(30,61,47,.07);
  --shadow-md: 0 4px 20px rgba(30,61,47,.11);
  --shadow-lg: 0 8px 40px rgba(30,61,47,.15);

  /* Conteneurs */
  --w-sm:  640px;
  --w-md:  768px;
  --w-lg:  1024px;
  --w-xl:  1200px;
  --w-2xl: 1440px;

  /* Transitions */
  --ease: 220ms cubic-bezier(.4,0,.2,1);
}

[id^="chapitre-"] {
    scroll-margin-top: 100px;
}

/* ── 2. RESET ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-corps);
  font-size: var(--t-base);
  font-weight: 400;
  line-height: 1.65;
  color: var(--gris-texte);
  background: var(--blanc);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { cursor: pointer; font-family: inherit; border: none; background: none; }
input, textarea, select { font-family: inherit; font-size: inherit; }

/* ── 3. TYPOGRAPHIE ───────────────────────────────────────── */

/* Titres hero (Montserrat 900 + surligné rose sur le 2e mot) */
.hero-titre {
  font-family: var(--font-titre);
  font-weight: 800;
  font-size: clamp(var(--t-4xl), 6vw, var(--t-6xl));
  line-height: 1.05;
  color: var(--gris-texte);
}

.hero-titre .accent {
  display: inline;
  position: relative;
  color: var(--vert-moyen);
}

/* Surlignage rose sous le mot accent (style maquette) */
.hero-titre .accent::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: -20px;
  right: -2px;
  height: 50%;
  background: var(--rose);
  z-index: -1;
  border-radius: 2px;
  opacity: 0.2;
}

.accent-sous-titre {
  position: relative;
  z-index: 0;
}

.accent-sous-titre::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: -150vw;
  right: -30px;
  height: 50%;
  background: var(--vert-fonce);
  border-radius: 0 20px 20px 0;
  z-index: -1;
}

.accent-sous-titre-clair::after {
  background: var(--vert-clair);
}

.accent-sous-titre-blanc::after {
  background: var(--blanc) !important; 
}

/* Titres de section */
.section-titre {
  position: relative;
  font-family: var(--font-titre);
  font-weight: 900;
  font-size: clamp(var(--t-3xl), 3.5vw, var(--t-4xl));
  line-height: 1.15;
  color: var(--blanc);
  text-transform: uppercase;
  letter-spacing: -0.01em;
}

/* Soulignement vert sous un titre de section */
.section-titre--underline {
  display: inline-flex;
  flex-direction: column;
  gap: var(--s2);
}
.section-titre--underline::after {
  content: '';
  display: block;
  height: 4px;
  width: 60px;
  background: var(--vert-lime);
  border-radius: var(--r-full);
}

h1, h2, h3, h4 {
  font-family: var(--font-titre);
  font-weight: 900;
  line-height: 1.2;
  color: var(--vert-fonce);
}
h1 { font-size: clamp(var(--t-3xl), 5vw, var(--t-6xl)); }
h2 { font-size: clamp(var(--t-2xl), 4vw, var(--t-4xl)); text-transform: uppercase; }
h3 { font-size: clamp(var(--t-xl), 2.5vw, var(--t-2xl)); }
h4 { font-size: var(--t-lg); }

p { line-height: 1.7; }
p + p { margin-top: var(--s4); }
strong { font-weight: 800; }

/* ── 4. LAYOUT ────────────────────────────────────────────── */

.container {
  width: 100%;
  max-width: var(--w-xl);
  margin-inline: auto;
  padding-inline: var(--s6);
}
.container--lg  { max-width: var(--w-lg); }
.container--md  { max-width: var(--w-md); }

.section         { padding-block: var(--s20); }
.section--sm     { padding-block: var(--s12); }
.section--lg     { padding-block: var(--s32); }
.section--hero   { padding-block: var(--s24) var(--s16); }

.dechirure-fonce {width: 100%;height: 7em;position: relative;background-size: cover; z-index: 1;}

/* Fonds */
.bg-blanc        { background: var(--blanc); }
.bg-gris         { background: var(--gris-fond); }
.bg-vert-fonce   { background: var(--vert-fonce); }
.bg-vert-moyen   { background: var(--vert-moyen); }
.bg-vert-clair   { background: var(--vert-clair); }
.bg-vert-pale    { background: var(--vert-pale); }
.bg-rose-blush   { background: var(--rose-blush); }

/* Grilles */
.grid-2   { display: grid; grid-template-columns: repeat(2,1fr); gap: var(--s8); }
.grid-3   { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--s8); }
.grid-4   { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--s6); }
.grid-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap: var(--s6); }
.grid-3-back::after { content: ""; background: var(--vert-fonce); z-index: 0; border-radius: 20px; width: 110%; height: 150px; margin: auto; position: absolute; top: calc(50% - 75px); left: 50%; transform: translateX(-50%);}

/* ── 5. HEADER / NAV ──────────────────────────────────────── */

.site-header {
  position: sticky;
  top: 0;
  z-index: 200;
  background: var(--blanc);
  border-bottom: 1px solid rgba(30,61,47,.08);
  box-shadow: 0 2px 12px rgba(30,61,47,.06);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s6);
  padding-block: var(--s3);
}

.site-logo {
  display: flex;
  align-items: center;
  gap: var(--s3);
  flex-shrink: 0;
}
.site-logo img { height: 52px; width: auto; }

/* Nav pills (style maquette : items avec fond gris arrondi) */
.site-nav {
  display: flex;
  align-items: center;
  gap: var(--s2);
}

.site-nav-pages {
  padding: 10px;
  border-radius: 50px;
  background: var(--vert-clair);
}

.site-nav a {
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--gris-texte);
  padding: var(--s2) var(--s4);
  border-radius: var(--r-full);
  transition: background var(--ease), color var(--ease);
  white-space: nowrap;
}
.site-nav a:hover { background: var(--blanc); color: var(--vert-fonce); }
.site-nav a.active { background: var(--blanc); color: var(--vert-fonce); }

.site-nav .nav-cta {
  background: var(--rose);
  color: var(--blanc);
  padding: 10px 20px;
  border-radius: var(--r-full) var(--r-full) 0 var(--r-full);
  font-weight: 500;
}
.site-nav .nav-cta:hover { background: #c5245a; color: var(--blanc); }

.burger {
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: var(--s2);
  border: 0;
  background: none;
  cursor: pointer;
}

.burger span {
  display: block;
  width: 28px;
  height: 4px;
  background: var(--vert-moyen);
  border-radius: 10px;
  transition: transform var(--ease), opacity var(--ease);
}

/* Menu ouvert */

.burger.is-open span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.burger.is-open span:nth-child(2) {
  opacity: 0;
}

.burger.is-open span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* ── 6. DÉCHIRURE (séparateur montagne) ──────────────────── */

.dechirure {
  display: block;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  margin: 0;
  padding: 0;
}
.dechirure svg { display: block; width: 100%; }
.dechirure--bottom { transform: rotate(180deg); }

/* ── 7. BOUTONS ───────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  padding: 0.75rem 1.75rem;
  border-radius: var(--r-full);
  font-family: var(--font-titre);
  font-weight: 700;
  font-size: var(--t-base);
  line-height: 1;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all var(--ease);
  white-space: nowrap;
  text-decoration: none;
}

/* Vert clair : "Je me lance", "Lancer la démarche" */
.btn--vert {
  background: var(--vert-clair);
  color: var(--vert-fonce);
  border-color: var(--vert-clair);
}
.btn--vert:hover { background: var(--vert-moyen); color: var(--blanc); border-color: var(--vert-moyen); box-shadow: var(--shadow-md); }

.section--hero .btn {padding:15px;border-radius:10px}
/* Rose : "Nous contacter", "Faire l'autotest", "Envoyer" */
.btn--rose {
  background: var(--rose);
  color: var(--blanc);
  border-color: var(--rose);
}
.btn--rose:hover { background: #c5245a; border-color: #c5245a; box-shadow: 0 4px 16px rgba(232,53,109,.3); }

/* Contour vert foncé */
.btn--outline {
  background: transparent;
  color: var(--vert-fonce);
  border-color: var(--vert-fonce);
}
.btn--outline:hover { background: var(--vert-fonce); color: var(--blanc); }

/* Contour blanc (sur fond sombre) */
.btn--outline-blanc {
  background: transparent;
  color: var(--blanc);
  border-color: rgba(255,255,255,.5);
}
.btn--outline-blanc:hover { background: var(--blanc); color: var(--vert-fonce); border-color: var(--blanc); }

.btn--lg { padding: 1rem 2.25rem; font-size: var(--t-base); }
.btn--sm { padding: 0.5rem 1.25rem; font-size: var(--t-xs); }

/* ── 8. CHIFFRES CLÉS ─────────────────────────────────────── */

.chiffres-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--s6);
}

.chiffres-grid-communes { grid-template-columns: repeat(4, 1fr); }

.chiffre-item { text-align: center; }

.chiffre-nb {
  font-family: var(--font-titre);
  font-weight: 900;
  font-size: clamp(var(--t-3xl), 5vw, var(--t-6xl));
  line-height: 1;
  color: var(--vert-lime);
}

.chiffre-label {
  font-size: clamp(var(--t-base), var(--t-2xl), var(--t-2xl));
  color: rgba(255,255,255,.75);
  margin-top: var(--s2);
  font-weight: 600;
  line-height: 1.3;
}

/* Variante sombre (sur bg vert foncé) */
.chiffres-dark .chiffre-nb { color: var(--vert-clair); }
.chiffres-dark .chiffre-label { color: var(--blanc); }

/* Variante claire (sur bg blanc) */
.chiffres-light .chiffre-nb { color: var(--vert-fonce); }
.chiffres-light .chiffre-label { color: var(--gris-doux); }

.chiffres-grid-communes .chiffre-nb, .chiffres-grid-communes .chiffre-label { color: var(--vert-moyen); }

/* ── 9. CARTES ÉTAPE ──────────────────────────────────────── */

.card-etape {
  background: var(--blanc);
  border: 3px solid var(--vert-moyen);
  border-radius: var(--r-lg) var(--r-lg) 0 var(--r-lg);
  padding: 0 var(--s6) var(--s6);
  position: relative;
  overflow: visible;
}

.card-etape__badge {
  position: absolute;
  top: -14px;
  right: var(--s5);
  background: var(--rose-clair);
  color: var(--blanc);
  font-size: var(--t-sm);
  font-weight: 800;
  padding: 4px 12px;
  border: 3px solid var(--blanc);
  border-radius: var(--r-full);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.card-etape:nth-child(2) .card-etape__badge {
  background: #E877A0;
}

.card-etape:nth-child(3) .card-etape__badge {
  background: var(--rose);
}

.card-etape__header {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin-left: calc(-1 * var(--s6) - 3px);
  margin-right: calc(-1 * var(--s6) - 3px);
  margin-top: 0;
  padding-top: 7.5px;
  background: var(--vert-moyen);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  margin-bottom: var(--s4);
}

.card-etape__num {
  min-width: 70px;
  height: 70px;
  color: var(--blanc);
  font-weight: 900;
  font-size: 4em;
  border-radius: var(--r-sm);
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  display: inline-flex;
  bottom: -13px;
  position: relative;

}

.card-etape__titre {
  font-weight: 800;
  font-size: var(--t-xl);
  color: var(--blanc);
  margin: 0;
  text-transform: none;
  letter-spacing: 0;
}

.card-etape__texte {
  font-size: var(--t-base);
  font-weight: 500;
  color: var(--gris-texte);
  line-height: 1.65;
}

@media screen and (max-width: 768px) {
  .card-etape { width: 100%; max-width: 400px; margin: auto; }

  .card-etape:first-child {
    left: -10%
  }

  .card-etape:first-child:after, .card-etape:nth-child(2):after {
    content: '';
    background: url('../images/fleche-verte.webp') no-repeat center / contain;
    width: 75px;
    height: 75px;
    display: block;
    position: absolute;
    bottom: 0;
    right: -85px;
    z-index: 5;
  }

  .card-etape:nth-child(3) {
    right: -10%;
  }
}

@media screen and (max-width: 576px) {
  .card-etape { max-width: 340px !important; }

  .card-etape:first-child {
    left: -5%
  }

  .card-etape:first-child:after, .card-etape:nth-child(2):after {
    width: 60px;
    height: 60px;
    bottom: -10px;
    right: -35px;
  }

  .card-etape:nth-child(3) {
    right: -5%;
  }
}

@media screen and (max-width: 450px) {
  .card-etape:first-child:after, .card-etape:nth-child(2):after {
    width: 55px;
    height: 55px;
  }

  .card-etape:nth-child(2):after {
    right: -27px;
  }
}

/* ── 10. POUR QUI — CARTES AUDIENCE ──────────────────────── */

.card-audience {
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  z-index: 1;
}

.card-audience__img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
}

.card-audience__body {
  padding: var(--s6);
  position: relative;
  display: flex;
  flex-direction: column;
  background: white;
  gap: var(--s4);
  flex: 1;
}

.card-audience__body::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 0;
  width: 100%;
  height: 12px;
  background: radial-gradient(
    circle, transparent 12px,
    var(--blanc) 12.5px
  ) 0 8px / 30px 28px;
}

.card-audience__titre {
  font-weight: 800;
  font-size: var(--t-lg);
  color: var(--gris-texte);
  text-transform: none;
  letter-spacing: 0;
}

.card-audience__texte {
  font-size: var(--t-sm);
  color: var(--gris-texte);
  line-height: 1.6;
}

.card-audience__body a {
  background-color: var(--rose-clair);
  color: var(--blanc);
}

.card-audience__body a:hover {
    background-color: var(--vert-moyen);
}

@media screen and (max-width: 992px) {
	.card-audience__body {
		padding: var(--s4);
  	}
	
	.card-audience__body .btn {
		font-size: var(--t-sm)
  	}
}

@media screen and (max-width:768px) {
  .grid-3-back:after { display: none; }
  .card-audience {
    max-width: fit-content !important;
    left: -15px;
    flex-direction: row !important;
    overflow: visible;
    z-index: 1;
  }

  .card-audience::before {
    content: "";
    background: var(--vert-fonce);
    z-index: 0;
    border-radius: 0;
    width: 110vw;
    height: 150px;
    margin: auto;
    position: absolute;
    top: calc(50% - 75px);
    left: 50%;
    transform: translateX(-50%);
  }

  .card-audience div:first-child {
    height: auto !important;
    position: relative;
    display: flex;
    flex: 0 0 180px;
    right: -15px !important;
  }

  .card-audience div:first-child img {
    width: 100% !important;
    height: 95% !important;
    border-radius: 20px 0 0 20px !important;
  }

  .card-audience__body {
    max-width: 350px;
  }

  .card-audience__body::before {
    top: 0;
    left: -8px;
    width: 12px;
    height: 100%;
    background: radial-gradient(
      circle, transparent 12px,
      var(--blanc) 12.5px
    ) 8px 0 / 28px 30px;
  }

  
}

/* ── 11. ACCORDÉON (Les défis) ────────────────────────────── */

.defis-intro {
  position: relative;
  width: min(100%, 600px);
  margin: 0 auto var(--s10);
  padding: 70px 0 20px;
  text-align: center;
}

.defis-intro__background {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-titre);
  font-weight: 900;
  font-size: clamp(100px, 18vw, 170px);
  line-height: 1;
  color: rgba(30, 61, 47, 0.06);
  pointer-events: none;
  user-select: none;
}

.defis-intro__title {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.15em;
  font-family: var(--font-titre);
  font-weight: 900;
  line-height: 0.85;
}

.defis-intro__number {
  color: var(--blanc);
  font-size: clamp(70px, 12vw, 120px);
}

.defis-intro__defis {
  color: var(--blanc);
  font-size: clamp(55px, 10vw, 100px);
}

.defis-intro__subtitle {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  max-width: 90%;
  margin: -2px auto 0;
  padding: 5px 25px 5px 45px;
  background: var(--vert-clair);
  color: var(--vert-moyen);
  font-size: clamp(16px, 3vw, 24px);
  font-weight: 600;
  border-radius: 999px;
  transform: rotate(-2deg);
}

.defis-intro__arrow {
  position: absolute;
  left: -35px;
  color: var(--vert-moyen);
  font-size: 45px;
  font-weight: 400;
  transform: rotate(-5deg);
}

.grid-defis {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s4) var(--s6);
  overflow: visible;
}

.defi-card {
  position: relative;
  min-height: 145px;
  padding: 0;
  border: 2px solid var(--vert-clair);
  border-radius: var(--r-lg);
  background: var(--vert-clair);
  overflow: visible;
}

.defi-card:first-child::before {
  content: "";
  position: absolute;
  top: -12px;
  left: -12px;
  width: 50px;
  height: 50px;
  background: url('../images/feuille-rose-gauche.webp') no-repeat center / contain;
  z-index: 3;
  pointer-events: none;
}

.defi-card:last-child::after {
  content: "";
  position: absolute;
  bottom: -12px;
  right: -12px;
  width: 50px;
  height: 50px;
  background: url('../images/feuille-rose-droite.webp') no-repeat center / contain;
  z-index: 3;
  pointer-events: none;
}

.defi-card__content {
  position: relative;
  z-index: 2;
  min-height: 145px;
  padding: var(--s4) var(--s6);
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  background: var(--blanc);
  border: 2px solid var(--vert-clair);
  border-radius: var(--r-lg);
}

.defi-card:nth-child(even) {
  background: var(--vert-clair);
  border: 2px solid var(--blanc);
}

.defi-card:nth-child(even) .defi-card__content {
  background: var(--vert-clair);
}

.defi-card__titre {
  margin: 0;
  color: var(--vert-fonce);
  font-size: var(--t-base);
  font-weight: 800;
  line-height: 1.1;
  text-align: center;
  text-transform: none;
  letter-spacing: 0;
}

.defi-card__sous {
  margin: 3px 0 0;
  color: var(--vert-moyen);
  font-size: var(--t-sm);
  line-height: 1.25;
  text-align: center;
}

.defi-card__footer {
  display: inline-flex;
  align-items: center;
  align-self: center;
  height: 34px;
  border: 1.5px solid var(--vert-lime);
  border-radius: 999px;
  overflow: hidden;
  background: var(--blanc);
}

.defi-card__nb {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 0 12px;
  color: var(--vert-lime);
  font-size: var(--t-xs);
  font-weight: 700;
  line-height: 1;
}

.defi-card__btn {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 100%;
  padding: 0 4px 0 12px;
  background: var(--vert-lime);
  color: var(--blanc);
  font-size: var(--t-xs);
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  border-radius: 50px;
}

.defi-card__arrow {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--vert-clair);
  border-radius: 50%;
  position: relative;
  flex-shrink: 0;
}

.defi-card__arrow::after {
  content: "";
  width: 7px;
  height: 7px;
  border-top: 2px solid var(--blanc);
  border-right: 2px solid var(--blanc);
  transform: rotate(45deg);
  margin-left: -3px;
}

@media screen and (max-width:1400px) {
  .grid-defis {
    grid-template-columns: repeat(2, 1fr);
  }

  .defi-card {
    width: 100%;
    max-width: 400px;
    margin: auto;
  }

  .defi-card:first-child::before {
    top: auto;
    bottom: -20%;
    left: -25px;
  }

  .defi-card:last-child::after {
    top: -20%;
    right: -25px;
  }

  .defi-card:nth-child(odd) {
    margin-right: 0;
  }

  .defi-card:nth-child(even) {
    margin-left: 0;
  }

  .defi-card:nth-child(2),
  .defi-card:nth-child(3),
  .defi-card:nth-child(6) {
    background: var(--vert-clair);
    border: 2px solid var(--blanc);
  }

  .defi-card:nth-child(4) {
    background: var(--blanc);
    border: 2px solid var(--vert-clair);
  }

  .defi-card:nth-child(2) .defi-card__content,
  .defi-card:nth-child(3) .defi-card__content,
  .defi-card:nth-child(6) .defi-card__content {
    background: var(--vert-clair);
  }

  .defi-card:nth-child(4) .defi-card__content {
    background: var(--blanc);
  }
}

@media screen and (max-width:767px) {
  .defi-card:nth-child(odd) {
    margin-right: auto;
    background: var(--blanc);
    border: 2px solid var(--vert-clair);
  }

  .defi-card:nth-child(odd) .defi-card__content {
    background: var(--blanc);
  }

  .defi-card:nth-child(even) {
    margin-left: auto;
    background: var(--vert-clair);
    border: 2px solid var(--blanc);
  }

  .defi-card:nth-child(even) .defi-card__content {
    background: var(--vert-clair);
  }
}

@media screen and (max-width: 576px) {
  .defi-card:first-child::before {
    left: -15px;
  }

  .defi-card:last-child::after {
    right: -15px;
  }
}

.download-ecodefis {
  margin: var(--s16) 0;
  text-align: center;
}

.download-ecodefis a {
  padding: 10px 20px;
  background: var(--blanc);
  color: var(--vert-fonce);
  font-size: clamp(var(--t-sm), 3.5vw, var(--t-2xl));
  font-weight: 600;
  border-radius: 50px;
  transition: .5s;
}

.download-ecodefis a:hover { background: var(--vert-clair); }

.accordion { display: flex; flex-direction: column; gap: var(--s8); }

.accordion-item {
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 3px solid var(--vert-clair);
  background: var(--blanc);
}

.accordion-item:has(.accordion-trigger[aria-expanded="true"]) {
    border-radius: var(--r-lg) var(--r-lg) 0 0;
}

.accordion-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s5) var(--s6);
  background: var(--vert-clair);
  cursor: pointer;
  font-family: var(--font-titre);
  font-weight: 600;
  font-size: var(--t-xl);
  color: var(--vert-fonce);
  transition: background var(--ease);
  text-align: left;
  border: none;
  gap: var(--s4);
}

.accordion-trigger:hover { background: #c5e090; }
.accordion-trigger[aria-expanded="true"] { background: var(--vert-clair); }

.accordion-trigger__left { display: flex; align-items: center; gap: var(--s4); }

.accordion-badge {
  width: 93px;
  background: var(--vert-lime);
  color: var(--blanc);
  font-size: var(--t-sm);
  font-weight: 600;
  padding: 3px 20px;
  border-radius: var(--r-full);
  white-space: nowrap;
}

.accordion-chevron {
  font-size: var(--t-lg);
  transition: transform var(--ease);
  flex-shrink: 0;
}
.accordion-trigger[aria-expanded="true"] .accordion-chevron { transform: rotate(180deg); }

.accordion-chev {
  border: none;
}

.accordion-chev:after {
    content: "";
    border-top: 2px solid var(--vert-fonce);
    border-right: 2px solid var(--vert-fonce);
    width: 10px;
    height: 10px;
    margin-left: -3px;
    transform: rotate(45deg);
    transition: .5s;
}

.accordion-trigger[aria-expanded="true"] .accordion-chev:after {
  transform: rotate(134deg);
}

.accordion-body {
  display: none;
  padding: var(--s5) var(--s6);
  background: var(--blanc);
}
.accordion-body.is-open { display: block; }

.accordion-defis {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px,1fr));
  gap: var(--s3);
}

.accordion-defi {
  display: flex;
  align-items: flex-start;
  gap: var(--s2);
  font-size: var(--t-base);
  line-height: normal;
  color: var(--vert-fonce);
  font-weight: 500;
}

.accordion-defi::before {
  content: '●';
  color: var(--vert-lime);
  font-size: 8px;
  margin-top: 6px;
  flex-shrink: 0;
}

/*.autotest::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 80%;
  height: 70%;
  border-top: 1px solid white;
  border-right: 1px solid white;
  border-radius: 0 var(--r-lg) 0 0;
  mask-image:
    linear-gradient(
      to right,
      transparent 0%,
      black 8%,
      black 92%,
      transparent 100%
    ),
    linear-gradient(
      to bottom,
      black 0%,
      black 92%,
      transparent 100%
    );
  mask-composite: intersect;
}

.autotest::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 80%;
  height: 35%;
  border-left: 1px solid white;
  border-bottom: 1px solid white;
  border-radius: 0 0 0 var(--r-lg);
  mask-image:
    linear-gradient(
      to right,
      transparent 0%,
      black 8%,
      black 92%,
      transparent 100%
    ),
    linear-gradient(
      to top,
      black 0%,
      black 92%,
      transparent 100%
    );
  mask-composite: intersect;
}

.temoignage {
  position: relative;
  border-radius: var(--r-lg);
}*/

.autotest {
  border-radius: var(--r-lg);
  padding: var(--s8);
  background: color-mix(in srgb, var(--vert-fonce) 40%, var(--blanc) 33.33%);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s8);
  flex-wrap: nowrap;
}

.autotest::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 80%;
  height: 70%;
  pointer-events: none;
  z-index: 0;
  background:
    linear-gradient(
      to right,
      transparent 0%,
      white 25%,
      white 75%,
      transparent 100%
    )
    top / 75% 1px no-repeat;
}

.autotest::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 80%;
  height: 35%;
  pointer-events: none;
  z-index: 0;
  background:
    linear-gradient(
      to right,
      transparent 0%,
      white 25%,
      white 75%,
      transparent 100%
    )
    bottom / 75% 1px no-repeat,
}

.autotest > * {
  position: relative;
  z-index: 1;
}

@media screen and (max-width: 768px) {
  .autotest {
    flex-direction: column;
  }
}

.temoignage::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 80%;
  height: 70%;
  border-top: 1px solid white;
  border-right: 1px solid white;
  border-radius: 0 var(--r-lg) 0 0;
  mask-image:
    linear-gradient(
      to right,
      transparent 0%,
      black 8%,
      black 92%,
      transparent 100%
    ),
    linear-gradient(
      to bottom,
      black 0%,
      black 92%,
      transparent 100%
    );
  mask-composite: intersect;
}

.temoignage::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 80%;
  height: 35%;
  border-left: 1px solid white;
  border-bottom: 1px solid white;
  border-radius: 0 0 0 var(--r-lg);
  mask-image:
    linear-gradient(
      to right,
      transparent 0%,
      black 8%,
      black 92%,
      transparent 100%
    ),
    linear-gradient(
      to top,
      black 0%,
      black 92%,
      transparent 100%
    );
  mask-composite: intersect;
}

.guillemets {
  display: flex;
  align-items: flex-start;
  gap: 4px;
}

.guillemet {
  position: absolute;
  color: var(--rose-blush);
  font-family: Georgia;
  font-size: 100px;
  font-weight: 900;
  line-height: 0.7;
  left: -20px;
  top: -10px;
}

/* ── 12. CARTES PARTENAIRES ────────────────────────────────── */

.partenaires-card__arrow {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
}

.partenaires-card__arrow::after {
  content: "";
  width: 7px;
  height: 7px;
  border-top: 2px solid var(--vert-moyen);
  border-right: 2px solid var(--vert-moyen);
  transform: rotate(45deg);
  position: relative;
  top: -1px;
  margin-left: -3px;
}

.partenaires-logos {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--s8);
    align-items: center;
    justify-items: center;
}

.partenaire-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.partenaire-logo img {
  display: block;
  width: auto;
  max-width: min(200px, 100%);
  object-fit: contain;
}

@media (max-width: 768px) {
  .partenaires-logos {
      grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 667px) {
  .partenaires-logos {
      grid-template-columns: 1fr;
  }
}


.card-partenaire {
  max-width: 90%;
  margin: auto;
  position: relative;
  background: var(--vert-fonce);
  border-radius: var(--r-lg);
  padding: var(--s8);
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: var(--s8);
  align-items: center;
  color: var(--blanc);
}

.card-partenaire--reverse {
  grid-template-columns: 1fr 180px;
}
.card-partenaire--reverse .card-partenaire__logo { order: 2; position: relative; left: auto !important; right: -33.33% !important; }
.card-partenaire--reverse .card-partenaire__body { order: 1; }

.card-partenaire__logo {
  position: relative;
  left: -33.33%;
  background: var(--blanc);
  border-radius: var(--r-md);
  border: 2px solid var(--rose-clair);
  padding: var(--s3);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
}

.card-partenaire__logo img { width: auto; object-fit: contain; }

.card-partenaire:not(.card-partenaire--reverse) .card-partenaire__logo img:nth-of-type(2) {
  top: -20px;
  right: -20px;
}

.card-partenaire--reverse .card-partenaire__logo img:nth-of-type(2) {
  bottom: -20px;
  right: -20px;
}

.card-partenaire__surtitre {
  font-size: var(--t-xs);
  color: var(--vert-lime);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: var(--s2);
  font-style: italic;
}

.card-partenaire__titre {
  font-weight: 800;
  font-size: var(--t-xl);
  color: var(--blanc);
  margin-bottom: var(--s3);
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--t-xl);
}

.card-partenaire__texte {
  font-size: var(--t-base);
  color: var(--blanc);
  line-height: 1.65;
  margin-bottom: var(--s5);
}

.card-partenaire__citation {
  border-left: 3px solid var(--vert-lime);
  padding-left: var(--s4);
  font-style: italic;
  font-size: var(--t-base);
  font-weight: 500;
  color: var(--vert-clair);
  margin-bottom: var(--s2);
}

.card-partenaire__citation-auteur {
  font-size: var(--t-sm);
  color: var(--blanc);
  margin-top: var(--s2);
}

.card-partenaire__chiffres {
  display: flex;
  gap: var(--s6);
  flex-wrap: wrap;
  margin-top: var(--s5);
}

.card-partenaire__chiffres div {
  display: flex;
  align-items: center;
  flex: 1;
  line-height: 1.25;
}

.card-partenaire__chiffre-nb {
  font-weight: 900;
  font-size: var(--t-2xl);
  color: var(--vert-clair);
  display: block;
  margin-right: 5px;
  white-space: nowrap;
}

.card-partenaire__chiffre-label {
  font-size: var(--t-s);
  color: var(--blanc);
  font-weight: 600;
}

/* ── 13. CARTES ARTICLE (Actualités) ──────────────────────── */

.actus-card__arrow {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
}

.actus-card__arrow::after {
  content: "";
  width: 7px;
  height: 7px;
  border-top: 2px solid var(--vert-clair);
  border-right: 2px solid var(--vert-clair);
  transform: rotate(45deg);
  position: relative;
  top: 0;
  margin-left: -3px;
}

.card-article {
  display: flex;
  flex-direction: column;
  background-color: var(--vert-moyen);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 2px solid #fff;
  border-radius: 20px 20px 0 0;
  transition: transform var(--ease), box-shadow var(--ease);
  cursor: pointer;
}

.card-article__img {
  position: relative;
  height: 200px;
  margin: -2px -2px 0;
  width: calc(100% + 4px);
  border-radius: 20px 20px 0 0;
  flex-shrink: 0;
  overflow: hidden;
}

.card-article__img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--ease);
}

.card-article:hover .card-article__img img {
  transform: scale(1.04);
}

.card-article__tag {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 4px 12px;
  border-radius: 0 var(--r-full) var(--r-full) 0;
  border: 2px solid var(--blanc);
  font-size: var(--t-s);
  font-weight: 700;
  color: var(--blanc);
}
.card-article__tag--temoignage  { background: var(--rose); }
.card-article__tag--conseil     { background: var(--vert-lime); }
.card-article__tag--evenement   { background: var(--rose-clair); }

.card-article__body { display: flex; flex-direction: column; justify-content: space-between;padding: var(--s5); background: var(--blanc); flex: 1 }
.card-article__titre {
  font-weight: 700;
  font-size: var(--t-base);
  color: var(--vert-fonce);
  line-height: 1.4;
  margin-bottom: var(--s2);
  text-transform: none;
  letter-spacing: 0;
}
.card-article__meta {
  font-size: var(--t-xs);
  color: var(--gris-doux);
}

/* ── 14. CARTES CONTACT DÉPARTEMENT ──────────────────────── */

/* Style "horizontal" maquette contact : numéro + nom + téléphone */
.container-contact a { transition: .5s}

.container-contact a:hover { color: var(--rose) !important }

.card-dept {
  border: 1.5px solid var(--vert-clair);
  border-radius: var(--r-lg);
  padding: var(--s5);
  background: var(--blanc);
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}
.card-dept__num {
  font-family: var(--font-titre);
  font-weight: 900;
  font-size: var(--t-4xl);
  color: var(--vert-fonce);
  line-height: 1;
}
.card-dept__nom {
  font-size: var(--t-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--vert-moyen);
}
.card-dept__tel {
  font-size: var(--t-sm);
  color: var(--gris-doux);
  font-weight: 600;
}

/* ── 15. FORMULAIRE ───────────────────────────────────────── */

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); }
.form-grid--1 { grid-template-columns: 1fr; }

.form-group { display: flex; flex-direction: column; gap: var(--s2); }

.form-label {
  font-size: var(--t-sm);
  font-weight: 700;
  color: var(--vert-fonce);
}

.form-input,
.form-textarea,
.form-select {
  width: 100%;
  padding: var(--s3) var(--s5);
  border: 1.5px solid var(--vert-clair);
  border-radius: var(--r-full);
  background: var(--blanc);
  font-size: var(--t-sm);
  color: var(--gris-texte);
  outline: none;
  transition: border-color var(--ease), box-shadow var(--ease);
}
.form-textarea { border-radius: var(--r-lg); resize: vertical; min-height: 140px; }
.form-input::placeholder, .form-textarea::placeholder { color: #b0b8be; }
.form-input:focus, .form-textarea:focus, .form-select:focus {
  border-color: var(--vert-moyen);
  box-shadow: 0 0 0 3px rgba(44,110,73,.12);
}

/* Champ texte type-profil (Je suis...) */
.form-input--profile {
  border-radius: var(--r-full);
  font-style: italic;
  color: var(--gris-doux);
}

.form-legal {
  font-size: var(--t-xs);
  color: var(--gris-doux);
  font-style: italic;
  line-height: 1.5;
}
.form-legal a { color: var(--rose); text-decoration: underline; }

.tally-submit-button button:hover { var(--vert-moyen) !important }

/* ── 16. CTA FOOTER (Prêt(e) à relever LE DÉFI ?) ────────── */

.cta-defi {
  background: color-mix(in srgb, var(--vert-fonce) 50%, var(--vert-moyen) 50%);
  border-radius: 60% 60% 0 0;
  text-align: center;
  padding: var(--s16) var(--s6);
}

.cta-defi__pill {
  display: inline-flex;
  align-items: center;
  gap: var(--s3);
  background: var(--vert-clair);
  color: var(--vert-fonce);
  border-radius: var(--r-full);
  padding: var(--s2) var(--s5);
  font-weight: 700;
  font-size: var(--t-sm);
  margin-bottom: var(--s3);
}

.cta-defi__titre {
  font-family: var(--font-titre);
  font-weight: 900;
  font-size: clamp(var(--t-3xl), 6vw, var(--t-6xl));
  color: var(--blanc);
  text-transform: uppercase;
  line-height: 1.05;
}

.cta-defi__sous {
  color: rgba(255,255,255,.65);
  font-size: var(--t-base);
  margin-top: var(--s4);
}

@media screen and (max-width:1200px) {
  .cta-defi {
    border-radius: 30% 30% 0 0;
  }
}

/* ── 17. FOOTER ───────────────────────────────────────────── */

.site-footer {
  background: var(--vert-fonce);
  color: rgba(255,255,255,.75);
  padding-block: var(--s16);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: var(--s10);
  margin-bottom: var(--s12);
  padding: var(--s12) 0;
  border-bottom: 1px solid rgba(255,255,255,.1);
}

.footer-col-titre {
  font-size: var(--t-base);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: rgba(255,255,255,.4);
  margin-bottom: var(--s5);
}

.footer-links { display: flex; flex-direction: column; gap: var(--s3); }
.footer-links a, .footer-links button { font-size: var(--t-base); color: rgba(255,255,255,.65); transition: color var(--ease); }
.footer-links a:hover, .footer-links button:hover { color: var(--vert-lime); }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s4);
}
.footer-bottom p { font-size: var(--t-xs); color: var(--vert-clair); }

/* ── 18. ANNUAIRE / CARTE ─────────────────────────────────── */

.map-container {
  border-radius: var(--r-lg);
  overflow: hidden;
  height: 420px;
  border: 2px solid var(--vert-clair);
  background: var(--gris-fond);
  display: flex;
  align-items: center;
  justify-content: center;
}

.map-placeholder {
  text-align: center;
  color: var(--gris-doux);
}

/* ── 19. PAGINATION ───────────────────────────────────────── */

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  margin-top: var(--s12);
}

.pagination__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--r-full);
  border: 1.5px solid var(--vert-clair);
  font-weight: 700;
  font-size: var(--t-sm);
  color: var(--vert-fonce);
  cursor: pointer;
  transition: all var(--ease);
  background: var(--blanc);
}
.pagination__btn:hover,
.pagination__btn.active { background: var(--vert-fonce); color: var(--blanc); border-color: var(--vert-fonce); }

/* ── 20. UTILITAIRES ─────────────────────────────────────── */

.text-center { text-align: center; }
.text-blanc  { color: var(--blanc); }
.text-vert   { color: var(--vert-fonce); }
.text-rose   { color: var(--rose); }
.text-gris   { color: var(--gris-doux); }

.mt-4  { margin-top: var(--s4); }
.mt-6  { margin-top: var(--s6); }
.mt-8  { margin-top: var(--s8); }
.mt-12 { margin-top: var(--s12); }

.flex        { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-wrap   { flex-wrap: wrap; }
.gap-4       { gap: var(--s4); }
.gap-6       { gap: var(--s6); }

.tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 12px;
  border-radius: var(--r-full);
  font-size: var(--t-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.tag--vert  { background: var(--vert-clair); color: var(--vert-fonce); }
.tag--rose  { background: var(--rose-blush); color: var(--rose); }
.tag--blanc { background: rgba(255,255,255,.15); color: var(--blanc); }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

/* ── 21. RESPONSIVE ───────────────────────────────────────── */

@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2,1fr); }
  .chiffres-grid { grid-template-columns: repeat(2,1fr) !important; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--s8); }
  .card-partenaire, .card-partenaire--reverse { gap: var(--s6); }
}

@media screen and (max-width:992px) {
  .site-nav { display: none; }
  .site-nav.is-open {
    display: flex;
    position: fixed;
    inset: 0;
    top: 68px;
    background: var(--blanc);
    flex-direction: column;
    align-items: flex-start;
    padding: var(--s8);
    gap: var(--s4);
    z-index: 199;
    border-top: 1px solid var(--vert-clair);
  }
  .site-nav-pages {
    width: 100%;
    max-width: 350px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    text-align: center;
  }
  .site-nav.is-open a { font-size: var(--t-xl); padding: var(--s3) 0; text-align: center; }
  .site-nav .nav-cta { width: 100%; max-width: 350px; margin: 0 auto; }
  .burger { display: flex; }
}

@media (max-width: 768px) {
  :root { --s20: 3.5rem; --s24: 4rem; --s32: 5rem; }

  .grid-2, .grid-3 { grid-template-columns: 1fr !important; }
  .chiffres-grid { grid-template-columns: repeat(2,1fr); }
  .footer-grid { grid-template-columns: 1fr; text-align: center;}
  .footer-grid a img { margin: auto; }
  .footer-grid p { max-width: 80% !important; margin: 20px auto 0; }
  .form-grid { grid-template-columns: 1fr; }

  .card-audience { width: 100%; max-width: 350px; margin: auto; }

  a.card-article { width: 100%; max-width: 450px; margin: auto; }

  .temoignage { max-width: 75%; margin: auto; }
  .temoignage:first-child { left: -10%; }
  .temoignage:last-child { right: -10%; }

  .card-partenaire,
  .card-partenaire--reverse { grid-template-columns: 1fr; }
  .card-partenaire--reverse .card-partenaire__logo,
  .card-partenaire--reverse .card-partenaire__body { order: unset; }
  .card-partenaire__logo, .card-partenaire--reverse .card-partenaire__logo { max-width: fit-content; left: 0 !important; margin: auto; }
  .card-partenaire__logo img { width: 350px; max-width: 100%; }

  .section--hero div { grid-template-columns: 1fr !important; }
  .hero-second { display: none; }
  .hero-first p { max-width: 100% !important; }
  .hero-first div { justify-content: center !important; }
}

@media screen and (max-width: 667px) {
  .chiffres-grid {
    grid-template-columns: repeat(1, 1fr);
  }
}

@media (max-width: 480px) {
  .btn { width: 100%; justify-content: center; white-space: normal; text-align: center; font-size: var(--t-base) !important; }
  .btn--sm, .nav-cta { width: auto; }
}

/* ── 22. ACCESSIBILITÉ ────────────────────────────────────── */

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

:focus-visible { outline: 3px solid transparent; outline-offset: 3px; border-radius: var(--r-sm); }

/* ── CONTENU WORDPRESS ────────────────────────────────────── */
.wp-content p  { margin-bottom: var(--s5); line-height: 1.8; }
.wp-content h2 { font-size: var(--t-2xl); margin: var(--s10) 0 var(--s4); }
.wp-content h3 { font-size: var(--t-xl); margin: var(--s8) 0 var(--s3); }
.wp-content ul { list-style: disc; padding-left: var(--s8); margin-bottom: var(--s5); }
.wp-content ol { list-style: decimal; padding-left: var(--s8); margin-bottom: var(--s5); }
.wp-content li { margin-bottom: var(--s2); line-height: 1.7; }
.wp-content img { border-radius: var(--r-md); max-width: 100%; margin: var(--s6) 0; }
.wp-content blockquote {
  border-left: 4px solid var(--vert-lime);
  padding: var(--s4) var(--s6);
  margin: var(--s6) 0;
  background: var(--vert-pale);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  font-style: italic;
  color: var(--vert-fonce);
}
.wp-content a { color: var(--vert-moyen); text-decoration: underline; }
.wp-content a:hover { color: var(--rose); }

/* ══════════════════════════════════════════════════════════════
   AJOUTS DE LA CONVERSION WORDPRESS
   Styles qui étaient en attributs style={{}} dans le JSX Next.js
   (filtres, loader Tally, baseline du footer) et utilitaires WP.
   Tout ce qui précède ce bloc est le globals.css d'origine.
   ══════════════════════════════════════════════════════════════ */

/* Accessibilité : texte lisible par les lecteurs d'écran uniquement.
   Sert aux libellés de pagination et au lien « Aller au contenu ». */
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.screen-reader-text:focus {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 1000;
  width: auto;
  height: auto;
  margin: 0;
  padding: var(--s3) var(--s5);
  clip: auto;
  background: var(--blanc);
  color: var(--vert-fonce);
  border-radius: var(--r-full);
  font-weight: 700;
  box-shadow: var(--shadow-md);
}

/* Footer : baseline sous le logo (était en style inline dans layout.js) */
.footer-baseline {
  font-size: var(--t-sm);
  color: var(--blanc);
  max-width: 260px;
  line-height: 1.6;
}
.footer-links { list-style: none; padding: 0; margin: 0; }

/* Page Actualités : filtres par catégorie (pastilles) */
.filtres-cats { display: flex; gap: var(--s3); flex-wrap: wrap; }

.filtre-pill {
  display: inline-flex;
  align-items: center;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: var(--r-full);
  padding: 0.5rem 1.25rem;
  color: var(--blanc);
  font-weight: 700;
  font-size: var(--t-sm);
  font-family: var(--font-corps);
  line-height: 1.2;
  transition: all 200ms;
}
.filtre-pill--tous { font-size: var(--t-base); }
.filtre-pill:hover,
.filtre-pill.is-active {
  background: var(--vert-lime);
  color: var(--vert-fonce);
}

/* Page Actualités : filtres par département (cases à cocher en pastilles) */
.filtres-depts { margin: 0 0 var(--s10); }
.filtres-depts fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.filtres-depts legend {
  color: var(--blanc);
  opacity: .7;
  font-size: var(--t-sm);
  font-family: var(--font-corps);
  margin-bottom: var(--s2);
  padding: 0;
}
.filtres-depts__liste { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }

.filtre-check {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: var(--r-full);
  padding: 0.4rem 0.9rem;
  color: var(--blanc);
  font-weight: 700;
  font-size: var(--t-sm);
  font-family: var(--font-corps);
  cursor: pointer;
  transition: all 200ms;
}
.filtre-check input { accent-color: var(--vert-fonce); cursor: pointer; }
.filtre-check:has(input:checked) { background: var(--vert-lime); color: var(--vert-fonce); }
.filtre-check:has(input:focus-visible) { outline: 2px solid var(--blanc); outline-offset: 2px; }

.filtre-reset {
  color: var(--blanc);
  opacity: .7;
  font-size: var(--t-sm);
  text-decoration: underline;
  font-family: var(--font-corps);
}
.filtre-reset:hover { opacity: 1; }

.aucun-resultat { color: var(--blanc); text-align: center; padding: var(--s16) 0; }

/* Pagination : les liens générés par paginate_links() ; « … » entre deux plages */
.pagination a.pagination__btn { text-decoration: none; }
.pagination__dots { color: var(--blanc); font-weight: 700; padding: 0 var(--s1); }

/* Formulaire Tally (page Contact) — masqué le temps du chargement, comme dans le front Next */
.tally-wrap {
  position: relative;
  min-height: 1073px;
  display: flex;
  justify-content: center;
}
.tally-wrap.is-ready { min-height: auto; }

.tally-iframe, .ed-tally {
  width: 100%;
  height: auto;
  max-width: 800px;
  border: 0;
  opacity: 0;
  transition: opacity .3s ease;
}
.tally-wrap.is-ready .tally-iframe, .tally-wrap.is-ready .ed-tally { opacity: 1; }

.tally-loader {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s3);
  color: var(--gris-texte);
}
.tally-wrap.is-ready .tally-loader { display: none; }

.tally-loader__spinner {
  width: 32px;
  height: 32px;
  border: 3px solid rgba(0,0,0,.1);
  border-top-color: var(--vert-fonce);
  border-radius: 50%;
  animation: tally-spin .8s linear infinite;
}
@keyframes tally-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .tally-loader__spinner { animation-duration: 2.4s; }
}

/* Contenu d'article issu de Gutenberg : alignements et légendes */
.wp-content .alignleft   { float: left;  margin: 0 var(--s6) var(--s4) 0; }
.wp-content .alignright  { float: right; margin: 0 0 var(--s4) var(--s6); }
.wp-content .aligncenter { display: block; margin-left: auto; margin-right: auto; }
.wp-content figure { margin: var(--s6) 0; }
.wp-content figcaption { font-size: var(--t-sm); color: var(--gris-doux); margin-top: var(--s2); }
.wp-content::after { content: ""; display: block; clear: both; }

/* Mentions légales */
.pol-conf a, .mentions-legales a {transition:.5s}
.pol-conf a:hover, .mentions-legales a:hover {color:var(--rose)}