/*
 Theme Name:   Divi Child — EcloLINK Generator
 Theme URI:    https://eclolink.com
 Description:  Thème enfant Divi pour le générateur de sites EcloLINK
 Author:       EcloLINK
 Author URI:   https://eclolink.com
 Template:     Divi
 Version:      1.0.0
 Text Domain:  divi-child
*/

/* ============================================================
   BLOC 1 — PALETTES DE BASE
   ⚠️ GÉNÉRATEUR : remplace uniquement les blocs
      "/* GENERATOR:COLOR-1-PALETTE */" et "/* GENERATOR:COLOR-2-PALETTE */"
      Le reste est fixe (greys, UI colors, spacing, radius).
   ============================================================ */

:root {
  /* -- Greys (fixes) -- */
  --Grey-5:   #FCFCFC;
  --Grey-25:  #FCFCFC;
  --Grey-50:  #F7F7F7;
  --Grey-100: #F0F0F0;
  --Grey-200: #DBDBDB;
  --Grey-300: #C3C3C3;
  --Grey-400: #A8A8A8;
  --Grey-500: #8D8D8D;
  --Grey-600: #707070;
  --Grey-700: #545454;
  --Grey-800: #393939;
  --Grey-900: #1E1E1E;
  --Grey-950: #111111;
}

/* GENERATOR:COLOR-1-PALETTE — Couleur primaire (remplacé par le générateur) */
:root {
  --Color-1-5:   #F8F8F7;
  --Color-1-25:  #F3F4F1;
  --Color-1-50:  #F1F3EC;
  --Color-1-100: #ECEFE1;
  --Color-1-200: #E0E8C5;
  --Color-1-300: #D3E595;
  --Color-1-400: #C6E855;
  --Color-1-500: #BBED12;
  --Color-1-600: #96BE0E;
  --Color-1-700: #72900E;
  --Color-1-800: #4F610F;
  --Color-1-900: #2C350D;
  --Color-1-950: #161A09;
}

/* GENERATOR:COLOR-2-PALETTE — Couleur secondaire (remplacé par le générateur) */
:root {
  --Color-2-5:   #F7F7F8;
  --Color-2-25:  #F7F7F8;
  --Color-2-50:  #F6F6F9;
  --Color-2-100: #F6F5FA;
  --Color-2-200: #EDECF8;
  --Color-2-300: #C6C0F1;
  --Color-2-400: #9183F0;
  --Color-2-500: #5941F5;
  --Color-2-600: #2E11F2;
  --Color-2-700: #2810C5;
  --Color-2-800: #251493;
  --Color-2-900: #211763;
  --Color-2-950: #1D1744;
}

/* ============================================================
   BLOC 2 — TOKENS SÉMANTIQUES (fixes, référencent les palettes)
   ============================================================ */
:root {
  /* Primaire */
  --Primary-main:  var(--Color-1-400);
  --Primary-50:    var(--Color-1-50);
  --Primary-100:   var(--Color-1-100);
  --Primary-200:   var(--Color-1-200);
  --Primary-300:   var(--Color-1-300);
  --Primary-400:   var(--Color-1-400);
  --Primary-500:   var(--Color-1-500);
  --Primary-600:   var(--Color-1-600);
  --Primary-700:   var(--Color-1-700);
  --Primary-800:   var(--Color-1-800);
  --Primary-900:   var(--Color-1-900);
  --Primary-950:   var(--Color-1-950);

  /* Secondaire */
  --Secondary-main: var(--Color-2-700);
  --Secondary-50:   var(--Color-2-50);
  --Secondary-100:  var(--Color-2-100);
  --Secondary-200:  var(--Color-2-200);
  --Secondary-300:  var(--Color-2-300);
  --Secondary-400:  var(--Color-2-400);
  --Secondary-500:  var(--Color-2-500);
  --Secondary-600:  var(--Color-2-600);
  --Secondary-700:  var(--Color-2-700);
  --Secondary-800:  var(--Color-2-800);
  --Secondary-900:  var(--Color-2-900);
  --Secondary-950:  var(--Color-2-950);

  /* Neutral — valeurs hex directes (pas de var() intermédiaire, compatible Divi tokens) */
  --Neutral-50:  #F7F7F7;
  --Neutral-100: #F0F0F0;
  --Neutral-200: #DBDBDB;
  --Neutral-300: #C3C3C3;
  --Neutral-400: #A8A8A8;
  --Neutral-500: #8D8D8D;
  --Neutral-600: #707070;
  --Neutral-700: #545454;
  --Neutral-800: #393939;
  --Neutral-900: #1E1E1E;
  --Neutral-950: #111111;

  /* Alpha — Primary (cascade depuis --Primary-main) */
  --Primary-Alpha-0:  color-mix(in srgb, var(--Primary-main)   0%, transparent);
  --Primary-Alpha-5:  color-mix(in srgb, var(--Primary-main)   5%, transparent);
  --Primary-Alpha-10: color-mix(in srgb, var(--Primary-main)  10%, transparent);
  --Primary-Alpha-20: color-mix(in srgb, var(--Primary-main)  20%, transparent);
  --Primary-Alpha-40: color-mix(in srgb, var(--Primary-main)  40%, transparent);
  --Primary-Alpha-50: color-mix(in srgb, var(--Primary-main)  50%, transparent);
  --Primary-Alpha-60: color-mix(in srgb, var(--Primary-main)  60%, transparent);
  --Primary-Alpha-80: color-mix(in srgb, var(--Primary-main)  80%, transparent);
  --Primary-Alpha-90: color-mix(in srgb, var(--Primary-main)  90%, transparent);

  /* Alpha — Secondary (cascade depuis --Secondary-main) */
  --Secondary-Alpha-0:  color-mix(in srgb, var(--Secondary-main)   0%, transparent);
  --Secondary-Alpha-5:  color-mix(in srgb, var(--Secondary-main)   5%, transparent);
  --Secondary-Alpha-10: color-mix(in srgb, var(--Secondary-main)  10%, transparent);
  --Secondary-Alpha-20: color-mix(in srgb, var(--Secondary-main)  20%, transparent);
  --Secondary-Alpha-40: color-mix(in srgb, var(--Secondary-main)  40%, transparent);
  --Secondary-Alpha-60: color-mix(in srgb, var(--Secondary-main)  60%, transparent);
  --Secondary-Alpha-80: color-mix(in srgb, var(--Secondary-main)  80%, transparent);
  --Secondary-Alpha-90: color-mix(in srgb, var(--Secondary-main)  90%, transparent);

  /* Alpha — Neutral (cascade depuis --Neutral-500) */
  --Neutral-Alpha-0:  color-mix(in srgb, var(--Neutral-500)   0%, transparent);
  --Neutral-Alpha-5:  color-mix(in srgb, var(--Neutral-500)   5%, transparent);
  --Neutral-Alpha-10: color-mix(in srgb, var(--Neutral-500)  10%, transparent);
  --Neutral-Alpha-20: color-mix(in srgb, var(--Neutral-500)  20%, transparent);
  --Neutral-Alpha-40: color-mix(in srgb, var(--Neutral-500)  40%, transparent);
  --Neutral-Alpha-60: color-mix(in srgb, var(--Neutral-500)  60%, transparent);
  --Neutral-Alpha-80: color-mix(in srgb, var(--Neutral-500)  80%, transparent);
  --Neutral-Alpha-90: color-mix(in srgb, var(--Neutral-500)  90%, transparent);

  /* Backgrounds */
  --Background-main:             var(--Grey-50);
  --Background-primary:          var(--Color-1-50);
  --Background-secondary:        var(--Color-2-50);
  --Background-dark-main:        var(--Grey-950);
  --Background-dark-primary:     var(--Color-1-900);
  --Background-dark-secondary:   var(--Color-2-800);

  /* Buttons */
  --Button-main:           var(--Grey-950);
  --Button-primary:        var(--Color-1-800);
  --Button-secondary:      var(--Color-2-800);
  --Button-dark-main:      var(--Grey-50);
  --Button-dark-primary:   var(--Color-1-100);
  --Button-dark-secondary: var(--Color-2-100);

  /* Text */
  --color-body-main:             var(--Grey-900);
  --color-body-invert:           var(--Grey-50);
  --color-heading-neutral:       var(--Grey-900);
  --color-heading-invert:        var(--Grey-50);
  --color-heading-primary:       var(--Primary-main);
  --color-heading-secondary:     var(--Secondary-main);
}

html {
  scroll-behavior: smooth;
}

/* ============================================================
   BLOC 3 — TYPOGRAPHIE
   GENERATOR:FONTS — remplacé par le générateur si polices différentes
   Fluid typography : clamp(mobile, fluid 375→1280px, desktop)
   ============================================================ */
:root {
  /* GENERATOR:FONT-HEADING */
  --font-family-heading: 'Epilogue', sans-serif;
  /* GENERATOR:FONT-BODY */
  --font-family-body:    'Inter', sans-serif;

  /* Tailles fluides — p et h6 fixes, h5→xl avec clamp */
  --font-size-p:  1rem;                                                          /* 16px fixe */
  --font-size-h6: 1.25rem;                                                       /* 20px fixe */
  --font-size-h5: clamp(1.4375rem, calc(0.221vw + 1.386rem),  1.5625rem);       /* 23→25px   */
  --font-size-h4: clamp(1.8125rem, calc(0.221vw + 1.761rem),  1.9375rem);       /* 29→31px   */
  --font-size-h3: clamp(2.125rem,  calc(0.552vw + 1.996rem),  2.4375rem);       /* 34→39px   */
  --font-size-h2: clamp(2.6875rem, calc(0.663vw + 2.532rem),  3.0625rem);       /* 43→49px   */
  --font-size-h1: clamp(3.1875rem, calc(1.105vw + 2.928rem),  3.8125rem);       /* 51→61px   */
  --font-size-xl: clamp(3.8125rem, calc(1.657vw + 3.424rem),  4.75rem);         /* 61→76px   */

  /* Line heights */
  --line-height-p:  1.65;
  --line-height-h6: 1.55;
  --line-height-h5: 1.45;
  --line-height-h4: 1.40;
  --line-height-h3: 1.30;
  --line-height-h2: 1.25;
  --line-height-h1: 1.20;
}

/* ============================================================
   BLOC 4 — RADIUS & SPACING
   Fluid : clamp(mobile, fluid 375→1280px, desktop)
   ============================================================ */
:root {
  --Radius-xxs:  clamp(0.1875rem, calc(0.11vw  + 0.162rem), 0.25rem);    /* 3→4px   */
  --Radius-xs:   clamp(0.375rem,  calc(0.221vw + 0.323rem), 0.5rem);     /* 6→8px   */
  --Radius-s:    clamp(0.5625rem, calc(0.332vw + 0.485rem), 0.75rem);    /* 9→12px  */
  --Radius-m:    clamp(0.75rem,   calc(0.442vw + 0.646rem), 1rem);       /* 12→16px */
  --Radius-l:    clamp(1.125rem,  calc(0.663vw + 0.970rem), 1.5rem);     /* 18→24px */
  --Radius-xl:   clamp(1.3125rem, calc(0.773vw + 1.131rem), 1.75rem);    /* 21→28px */
  --Radius-xxl:  clamp(1.5rem,    calc(0.884vw + 1.293rem), 2rem);       /* 24→32px */
  --Radius-full: 9999px;

  --Spacing-micro:    clamp(0.1875rem, calc(0.11vw  + 0.162rem), 0.25rem);   /*  3→4px   */
  --Spacing-compact:  clamp(0.375rem,  calc(0.221vw + 0.323rem), 0.5rem);    /*  6→8px   */
  --Spacing-s:        clamp(0.5625rem, calc(0.332vw + 0.485rem), 0.75rem);   /*  9→12px  */
  --Spacing-m:        clamp(0.75rem,   calc(0.442vw + 0.646rem), 1rem);      /* 12→16px  */
  --Spacing-l:        clamp(0.9375rem, calc(0.552vw + 0.808rem), 1.25rem);   /* 15→20px  */
  --Spacing-list:     clamp(1.125rem,  calc(0.663vw + 0.970rem), 1.5rem);    /* 18→24px  */
  --Spacing-bloc:     clamp(1.5rem,    calc(0.884vw + 1.293rem), 2rem);      /* 24→32px  */
  --Spacing-section:  clamp(1.875rem,  calc(1.105vw + 1.616rem), 2.5rem);    /* 30→40px  */
  --Spacing-xl:       clamp(2.25rem,   calc(1.326vw + 1.939rem), 3rem);      /* 36→48px  */
  --Spacing-page:     clamp(2.625rem,  calc(1.547vw + 2.262rem), 3.5rem);    /* 42→56px  */
  --Spacing-hero:     clamp(3rem,      calc(1.768vw + 2.586rem), 4rem);      /* 48→64px  */
  --Spacing-large:    clamp(3.75rem,   calc(2.21vw  + 3.232rem), 5rem);      /* 60→80px  */
  --Spacing-big-hero: clamp(4.5rem,    calc(2.652vw + 3.879rem), 6rem);      /* 72→96px  */
  --Spacing-big-page: clamp(6rem,      calc(3.536vw + 5.171rem), 8rem);      /* 96→128px */

  --shadow-sm: 0 0.125rem 0.5rem  rgba(0,0,0,0.08);
  --shadow-md: 0 0.25rem  1.25rem rgba(0,0,0,0.12);
  --shadow-lg: 0 0.5rem   2.5rem  rgba(0,0,0,0.16);
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

/* --- Override Divi parent (divi-style-parent-inline-inline-css)
      Préfixe "body" = spécificité (0,1,1) vs (0,0,1) de Divi → on gagne
   ---------------------------------------------------------------- */
body h1, body h2, body h3,
body h4, body h5, body h6 {
  font-family:   var(--font-family-heading);
  color:         var(--color-heading-neutral);
  font-weight:   700;
  padding-bottom: 0;
}
body h1 { font-size: var(--font-size-h2); line-height: var(--line-height-h1); }
body h2 { font-size: var(--font-size-h3); line-height: var(--line-height-h2); }
body h3 { font-size: var(--font-size-h3); line-height: var(--line-height-h3); }
body h4 { font-size: var(--font-size-h4); line-height: var(--line-height-h4); }
body h5 { font-size: var(--font-size-h5); line-height: var(--line-height-h5); }
body h6 { font-size: var(--font-size-h6); line-height: var(--line-height-h6); }

a {
  color: var(--Primary-main);
  text-decoration: none;
  transition: color 0.2s ease;
}
a:hover { color: var(--Secondary-main); }

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

/* ============================================================
   BOUTONS
   ============================================================ */
.btn-primary {
  display: inline-flex;
  align-items: center;
  padding: var(--Spacing-m) var(--Spacing-xl);
  background-color: var(--Primary-main);
  color: var(--Grey-950);
  border-radius: var(--Radius-full);
  font-family: var(--font-family-heading);
  font-weight: 700;
  transition: all 0.2s ease;
}
.btn-primary:hover {
  background-color: var(--Primary-600);
  color: var(--Grey-950);
  transform: translateY(-0.125rem);
  box-shadow: var(--shadow-md);
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  padding: var(--Spacing-m) var(--Spacing-xl);
  background-color: var(--Secondary-main);
  color: var(--Grey-50);
  border-radius: var(--Radius-full);
  font-family: var(--font-family-heading);
  font-weight: 700;
  transition: all 0.2s ease;
}
.btn-secondary:hover {
  background-color: var(--Secondary-800);
  color: var(--Grey-50);
  transform: translateY(-0.125rem);
  box-shadow: var(--shadow-md);
}

.btn-outline {
  display: inline-flex;
  align-items: center;
  padding: var(--Spacing-m) var(--Spacing-xl);
  border: 0.125rem solid var(--Primary-main);
  color: var(--Primary-main);
  border-radius: var(--Radius-full);
  font-family: var(--font-family-heading);
  font-weight: 700;
  transition: all 0.2s ease;
}
.btn-outline:hover {
  background-color: var(--Primary-main);
  color: var(--Grey-950);
}

/* ============================================================
   FORMULAIRE CONTACT (CF7)
   ============================================================ */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea,
.wpcf7 select {
  width: 100%;
  padding: var(--Spacing-m) var(--Spacing-list);
  border: 0.0625rem solid var(--Grey-200);
  border-radius: var(--Radius-s);
  font-family: var(--font-family-body);
  font-size: var(--font-size-p);
  color: var(--color-body-main);
  background: #fff;
  transition: border-color 0.2s ease;
}
.wpcf7 input:focus,
.wpcf7 textarea:focus {
  border-color: var(--Primary-main);
  outline: none;
  box-shadow: 0 0 0 0.1875rem var(--Primary-Alpha-20);
}
.wpcf7 input[type="submit"] {
  background-color: var(--Primary-main);
  color: var(--Grey-950);
  border: none;
  padding: var(--Spacing-m) var(--Spacing-xl);
  border-radius: var(--Radius-full);
  font-family: var(--font-family-heading);
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.wpcf7 input[type="submit"]:hover {
  background-color: var(--Primary-600);
}

/* ============================================================
   HEADER
   ============================================================ */
#main-header {
  background-color: #fff;
  box-shadow: var(--shadow-sm);
}

/* ============================================================
   FOOTER
   ============================================================ */
#main-footer {
  background-color: var(--Background-dark-main);
  color: var(--color-body-invert);
}
#main-footer a { color: var(--Grey-300); }
#main-footer a:hover { color: var(--Primary-main); }

/* ============================================================
   GRID RÉALISATIONS — shortcode [realisations]
   ============================================================ */
.realisations-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-bloc, 2rem);
  width: 100%;
}

/* Filtres */
.realisations-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--Spacing-s, 0.75rem);
}
.filter-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: var(--Spacing-compact, 0.5rem) var(--Spacing-l, 1.25rem);
  background: rgba(198, 232, 85, 0.6);   /* Primary-400 #C6E855 à 60% */
  border: 0.0625rem solid rgba(198, 232, 85, 0.2);
  border-radius: 99999px;
  font-family: var(--font-family-body);
  font-size: var(--font-size-body, 1rem);
  font-weight: 500;
  color: #2c350d !important;  /* Primary-900 — force par-dessus les liens Divi */
  text-decoration: none;
  white-space: nowrap;
  opacity: 0.6;
  transition: opacity 0.2s ease;
}
.filter-pill.is-active {
  opacity: 1;
  font-weight: 700;
}
.filter-pill:hover:not(.is-active) {
  opacity: 0.85;
}

/* Grid 2 colonnes */
.realisations-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--Spacing-page, 3.5rem);
}
@media (max-width: 768px) {
  .realisations-grid { grid-template-columns: 1fr; }
}

/* Card */
.card-realisation {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 34.6875rem; /* 555px min — grandit si le contenu dépasse */
  padding: var(--Spacing-m, 1rem) var(--Spacing-m, 1rem) var(--Spacing-l, 1.5rem) !important;
  border-radius: var(--Radius-s, 0.75rem);
  text-decoration: none;
  background: transparent;
  transition: background 0.45s ease-out;
  /* overflow: hidden retiré — géré uniquement sur __media pour le zoom */
}
.card-realisation:hover {
  background: var(--Primary-100);
}

.card-realisation__body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
}

/* Image */
.card-realisation__media {
  position: relative;
  height: 26.125rem; /* 418px */
  border-radius: 0.125rem;
  overflow: hidden;
}
.card-realisation__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
  display: block;
}
.card-realisation:hover .card-realisation__media img {
  transform: scale(1.04);
}

/* Badge lieu */
.card-realisation__lieu {
  position: absolute;
  bottom: 0;
  left: 0;
  background: var(--Primary-600);
  color: var(--Primary-900);
  font-family: var(--font-family-body);
  font-size: var(--font-size-body, 1rem);
  font-weight: 500;
  line-height: 1.625;
  padding: var(--Spacing-compact, 0.5rem) var(--Spacing-list, 1.5rem);
  white-space: nowrap;
}

/* Titre */
.card-realisation__title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-h6, 1.25rem);
  font-weight: 700;
  color: var(--Neutral-800, #393939);
  line-height: 1.5;
  margin: 0;
}

/* Bouton */
.card-realisation__btn {
  display: inline-flex;
  align-self: flex-end;
  align-items: center;
  justify-content: center;
  background: var(--Primary-400);
  border: 0.0625rem solid var(--Primary-400);
  color: var(--Primary-800);
  font-family: var(--font-family-body);
  font-size: var(--font-size-body, 1rem);
  font-weight: 700;
  text-transform: uppercase;
  padding: var(--Spacing-s, 0.75rem) var(--Spacing-m, 1rem);
  border-radius: 99999px;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.card-realisation:hover .card-realisation__btn {
  background: var(--Primary-300);
  border-color: var(--Primary-300);
}

/* Pagination */
.realisations-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--Spacing-s, 0.75rem);
  margin-top: var(--Spacing-bloc, 2rem);
}
.pagination-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding: 0 0.75rem;
  border-radius: 99999px;
  border: 0.0625rem solid var(--Primary-200);
  background: transparent;
  color: var(--Neutral-700, #3d3d3d);
  font-family: var(--font-family-body);
  font-size: var(--font-size-body, 1rem);
  font-weight: 500;
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.pagination-btn:hover {
  background: var(--Primary-100);
  border-color: var(--Primary-400);
  color: var(--Primary-900);
}
.pagination-btn.is-active {
  background: var(--Primary-400);
  border-color: var(--Primary-400);
  color: var(--Primary-900);
  font-weight: 700;
}
.pagination-btn--nav {
  color: var(--Primary-600);
}

/* ============================================================
   STEPPER — shortcode [etapes field="..."]
   ============================================================ */
.steps-container {
  position: relative;
  display: flex;
  flex-direction: column;
}

/* Rail vertical — ligne de fond + fill au scroll */
.steps-rail {
  position: absolute;
  left: 10px;              /* centre du dot (22px / 2) - 1px (moitié 2px) */
  top: 11px;               /* depuis le centre du premier dot */
  bottom: 11px;            /* jusqu'au centre du dernier dot */
  width: 2px;
  background: var(--Primary-200);
  z-index: 0;
}
.steps-rail-fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0%;
  background: var(--Primary-600);
  transition: height 0.12s linear;
}

/* Chaque étape */
.step-item {
  display: flex;
  align-items: flex-start;
  gap: var(--Spacing-section, 2.5rem);
  padding-bottom: var(--Spacing-xl, 3rem);
  position: relative;
  z-index: 1;
}
.step-item:last-child {
  padding-bottom: 0;
}

/* Dot */
.step-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--Primary-600);
  flex-shrink: 0;
}

/* Contenu */
.step-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-compact, 0.5rem);
}
.step-title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-h5, 1.5625rem);
  font-weight: 600;
  color: var(--Primary-900);
  line-height: 1.44;
  margin: 0;
}
.step-text {
  font-family: var(--font-family-body);
  font-size: var(--font-size-body, 1rem);
  font-weight: 400;
  color: var(--Primary-800);
  line-height: 1.625;
  margin: 0;
}

/* ============================================================
   ACCORDÉON — shortcode [accordeon field="..."]
   ============================================================ */
.accordeon-list {
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-m, 1rem);
  width: 100%;
}

/* Item — état base */
.accordeon-item {
  border: 0.0625rem solid var(--Primary-600);
  border-radius: var(--Radius-m, 1rem);
  overflow: hidden;
  background: transparent;
  transition: background 0.25s ease, border-color 0.25s ease;
}

/* Item — hover & open */
.accordeon-item:hover,
.accordeon-item.is-open {
  background: var(--Primary-100);
  border-color: var(--Primary-100);
}

/* Trigger */
.accordeon-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: var(--Spacing-bloc, 2rem);
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
}

/* Titre */
.accordeon-title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-h6, 1.25rem);
  font-weight: 700;
  color: var(--Neutral-900, #1e1e1e);
  line-height: 1.2;
}

/* Icône — le + pivote en × au hover et à l'ouverture */
.accordeon-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  color: var(--Primary-600);
}
.acc-icon {
  transition: transform 0.3s ease;
}
.accordeon-item:hover .acc-icon,
.accordeon-item.is-open .acc-icon {
  transform: rotate(45deg);
}

/* Contenu — animation hauteur via grid */
.accordeon-content {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s ease;
}
.accordeon-item.is-open .accordeon-content {
  grid-template-rows: 1fr;
}
.accordeon-content-inner {
  overflow: hidden;
  padding: 0 var(--Spacing-bloc, 2rem) 0;
  transition: padding-bottom 0.35s ease;
  color: var(--Neutral-700, #3d3d3d);
  font-size: var(--font-size-body, 1rem);
  line-height: var(--line-height-body, 1.6);
}
.accordeon-item.is-open .accordeon-content-inner {
  padding-bottom: var(--Spacing-bloc, 2rem);
}

/* Icônes réseaux sociaux — shortcode [social_icons] */
.social-icons-grid {
  display: flex;
  align-items: center;
  align-content: center;
  gap: 1rem var(--Spacing-m, 1rem);
  flex-wrap: wrap;
}
.social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  line-height: 0;
}
.social-icon svg path {
  fill: var(--Primary-400) !important;
  transition: fill 0.2s ease;
}
.social-icon:hover svg path {
  fill: var(--Primary-300) !important;
}
.social-icon svg {
  display: block;
  fill: currentColor;
}

/* Menu vertical — shortcode [menu_vertical] */
.footer-menu-vertical .footer-menu-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: var(--Spacing-s, 0.75rem);
}
.footer-menu-vertical .footer-menu-list li {
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-menu-vertical .footer-menu-list a {
  display: inline-block;
  color: var(--Grey-300);
  text-decoration: none;
  font-size: var(--font-size-sm);
  transition: color 0.2s ease;
}
.footer-menu-vertical .footer-menu-list a:hover {
  color: var(--Primary-main);
}

/* ============================================================
   GALERIE MASONRY — shortcode [galerie_masonry]
   ============================================================ */
.masonry-gallery {
  display: block;
}
.masonry-gallery__item {
  break-inside: avoid;
  overflow: hidden;
  border-radius: var(--Radius-xs, 0.5rem);
}
.masonry-gallery__link {
  display: block;
  cursor: zoom-in;
  overflow: hidden;
  border-radius: var(--Radius-xs, 0.5rem);
}
.masonry-gallery__item img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.45s ease-out, opacity 0.3s ease;
}
.masonry-gallery__item:hover img {
  transform: scale(1.04);
  opacity: 0.9;
}

/* ── Lightbox ────────────────────────────────────────────────── */
#masonry-lightbox {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
#masonry-lightbox.is-open {
  opacity: 1;
  pointer-events: all;
}
.mlb-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.88);
}
.mlb-content {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mlb-img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: var(--Radius-s, 0.75rem);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  transition: opacity 0.2s ease;
}
.mlb-close {
  position: absolute;
  top: -2.75rem;
  right: 0;
  background: transparent;
  border: none;
  color: #fff;
  font-size: 2.25rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  opacity: 0.75;
  transition: opacity 0.2s ease;
}
.mlb-close:hover { opacity: 1; }

/* ============================================================
   FORMULAIRE CONTACT — CF7
   ============================================================ */

/* Wrapper interne (div.cf7-form-contact placée dans l'éditeur CF7) */
.cf7-form-contact {
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-hero, 4rem);
}

/* Sections groupées */
.cf7-section {
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-bloc, 2rem);
}

/* Header = label + ligne — ::after pour éviter les <br> CF7 */
.cf7-section__header {
  display: flex !important;
  align-items: center;
  gap: 0.8125rem;
  width: 100%;
}
.cf7-section__header::after {
  content: '';
  flex: 1 1 0%;
  display: block;
  height: 1px;
  background: var(--Primary-400);
  min-width: 0;
}
.cf7-section__label {
  font-family: var(--font-family-heading);
  font-weight: 600;
  font-size: var(--font-size-h6, 1.25rem);
  color: var(--Neutral-900, #1e1e1e);
  white-space: nowrap;
  line-height: 1.55;
}
/* Masquer le span ligne éventuel (conservé pour compatibilité) */
.cf7-section__line { display: none; }

/* Rangées */
.cf7-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2.5rem;
  align-items: flex-end;
}

/* Champs */
.cf7-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}
.cf7-field--full  { flex: 1 1 100%; }
.cf7-field--half  { flex: 1 1 calc(50% - 1.25rem); }
.cf7-field--third { flex: 1 1 calc(30% - 1.25rem); }

/* Labels */
.cf7-label {
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
  font-family: var(--font-family-body);
  font-weight: 500;
  font-size: var(--font-size-body, 1rem);
  color: var(--Neutral-900, #1e1e1e);
  line-height: 1.25;
}
/* "(optionnel)" — petit, gris, italique, même ligne que le label */
.cf7-label-optional {
  font-weight: 400;
  font-style: italic;
  font-size: 0.8125rem;
  color: var(--Grey-500, #8d8d8d);
  white-space: nowrap;
}

/* Masquer les asterisques CF7 (auto-ajoutés ou hérités) */
.cf7-form-contact abbr,
.wpcf7-form abbr[title="required"],
.wpcf7-form abbr[title="obligatoire"] {
  display: none !important;
}
/* Masquer la notice "Les champs marqués d'un * sont obligatoires" */
.cf7-required-note,
.wpcf7-required-fields-notice { display: none !important; }

/* Inputs & Textarea — surcharge Divi avec !important */
.cf7-form-contact input[type="text"],
.cf7-form-contact input[type="email"],
.cf7-form-contact input[type="tel"],
.cf7-form-contact textarea,
.wpcf7-form-control.cf7-input,
.wpcf7-form-control.cf7-textarea {
  width: 100% !important;
  box-sizing: border-box !important;
  background: #f7f7f7 !important;        /* neutral-50 — même que le fond */
  border: 1px solid #c3c3c3 !important;  /* Grey-300 — discret */
  border-radius: 6px !important;         /* Figma : radius 6px */
  padding: 0.5rem 0.75rem !important;
  font-family: var(--font-family-body) !important;
  font-size: 1rem !important;
  color: #1e1e1e !important;
  line-height: 1.5 !important;
  box-shadow: none !important;
  outline: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}
.cf7-form-contact textarea,
.wpcf7-form-control.cf7-textarea {
  min-height: 7rem !important;
  resize: vertical !important;
}
.cf7-form-contact input::placeholder,
.cf7-form-contact textarea::placeholder,
.wpcf7-form-control.cf7-input::placeholder,
.wpcf7-form-control.cf7-textarea::placeholder {
  color: #8d8d8d !important;
}

/* Focus — ring accessible */
.cf7-form-contact input:focus,
.cf7-form-contact textarea:focus,
.wpcf7-form-control.cf7-input:focus,
.wpcf7-form-control.cf7-textarea:focus {
  border-color: #96be0e !important;   /* Primary-600 */
  box-shadow: 0 0 0 3px rgba(198, 232, 85, 0.3) !important;
}

/* Erreur CF7 */
.wpcf7-form-control.cf7-input.wpcf7-not-valid,
.wpcf7-form-control.cf7-textarea.wpcf7-not-valid {
  border-color: #d32f2f !important;
  box-shadow: 0 0 0 3px rgba(211, 47, 47, 0.15) !important;
}
span.wpcf7-not-valid-tip {
  font-family: var(--font-family-body);
  font-size: 0.8125rem;
  color: #d32f2f;
  margin-top: 0.25rem;
  display: block;
}

/* Masquer l'output CF7 par défaut (remplacé par le toast) */
.wpcf7-response-output {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.wpcf7-spinner { display: none !important; }

/* Bouton submit */
.cf7-submit-row {
  display: flex;
  justify-content: center;
}
.wpcf7-submit.cf7-btn {
  background: #c6e855 !important;      /* Primary-400 — hardcodé, pas de var() */
  border: 1px solid #c6e855 !important;
  border-radius: 99999px !important;
  padding: 0.75rem 2rem !important;
  font-family: var(--font-family-body) !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  color: #4f610f !important;           /* Primary-800 */
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  cursor: pointer !important;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.15s ease !important;
  outline: none !important;
  box-shadow: none !important;
  min-width: 10rem !important;
}
.wpcf7-submit.cf7-btn:hover {
  background: #d4ee8b !important;
  border-color: #d4ee8b !important;
}
.wpcf7-submit.cf7-btn:focus-visible {
  outline: 3px solid #96be0e !important;
  outline-offset: 3px !important;
}
.wpcf7-submit.cf7-btn:active  { transform: scale(0.97) !important; }
.wpcf7-submit.cf7-btn:disabled { opacity: 0.55 !important; cursor: not-allowed !important; }

/* Responsive */
@media (max-width: 640px) {
  .cf7-field--half,
  .cf7-field--third { flex: 1 1 100%; }
}

/* ── Toast CF7 ───────────────────────────────────────────────── */
#cf7-toast-region {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 99998;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  pointer-events: none;
}
.cf7-toast {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-radius: var(--Radius-s, 0.75rem);
  background: var(--Grey-900, #1e1e1e);
  color: #fff;
  font-family: var(--font-family-body);
  font-size: 0.9375rem;
  line-height: 1.4;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  pointer-events: all;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.28s ease, transform 0.28s ease;
  max-width: 22rem;
  min-width: 14rem;
}
.cf7-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.cf7-toast--success { background: #1a3300; border-left: 4px solid var(--Primary-400, #c6e855); }
.cf7-toast--error   { background: #3a0000; border-left: 4px solid #f44336; }
.cf7-toast--warning { background: #3a2200; border-left: 4px solid #ff9800; }
.cf7-toast__icon  { font-size: 1.125rem; flex-shrink: 0; line-height: 1; }
.cf7-toast__msg   { flex: 1; }
.cf7-toast__close {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.55);
  font-size: 1.375rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: color 0.15s ease;
}
.cf7-toast__close:hover          { color: #fff; }
.cf7-toast__close:focus-visible  {
  outline: 2px solid rgba(255,255,255,0.6);
  border-radius: 2px;
}

/* ============================================================
   UTILITAIRES
   ============================================================ */
.text-primary    { color: var(--Primary-main); }
.text-secondary  { color: var(--Secondary-main); }
.bg-primary      { background-color: var(--Primary-main); }
.bg-secondary    { background-color: var(--Secondary-main); }
.bg-neutral      { background-color: var(--Background-main); }
.bg-dark         { background-color: var(--Background-dark-main); }

/* ============================================================
   PAGE À PROPOS — Styles des shortcodes dynamiques
   Cohérent avec le design system : tokens spacing/radius/shadow
   ============================================================ */

/* Titre de section commun — typo héritée de body h2 (global) */
.apropos-section-titre {
  margin: 0 0 var(--Spacing-section) 0;
  text-transform: uppercase;
  color: var(--Neutral-900) !important;
}

/* ── Engagements / Valeurs ─────────────────────────────── */
.apropos-valeurs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--Spacing-bloc);
  margin-top: var(--Spacing-s);
}

.apropos-valeur-item {
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-m);
  padding: var(--Spacing-section) var(--Spacing-xl) var(--Spacing-xl);
  background: transparent;
  border: 0.0625rem solid var(--Primary-200);
  border-radius: var(--Radius-m);
  transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.apropos-valeur-item:hover {
  background: var(--Primary-100);
  border-color: var(--Primary-400);
  box-shadow: var(--shadow-sm);
}

.apropos-valeur-label {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-h6);
  font-weight: 700;
  color: var(--color-heading-neutral);
  line-height: var(--line-height-h6);
  margin: 0;
}

.apropos-valeur-desc {
  font-family: var(--font-family-body);
  font-size: var(--font-size-p);
  font-weight: 400;
  color: var(--Neutral-700);
  line-height: var(--line-height-p);
  margin: 0;
}

@media (max-width: 980px) {
  .apropos-valeurs { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .apropos-valeurs { grid-template-columns: 1fr; }
}

/* ── Équipe ────────────────────────────────────────────── */
.apropos-equipe-intro,
.apropos-equipe-conclusion {
  font-family: var(--font-family-body);
  font-size: var(--font-size-p);
  color: var(--Neutral-700);
  line-height: var(--line-height-p);
  margin: 0 0 var(--Spacing-bloc) 0;
}

.apropos-equipe-membres {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--Spacing-bloc) 0;
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-s);
}

.apropos-equipe-membres li {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--Spacing-m);
  padding: var(--Spacing-l) var(--Spacing-section);
  background: transparent;
  border: 0.0625rem solid var(--Primary-200);
  border-radius: var(--Radius-s);
  font-family: var(--font-family-body);
  font-size: var(--font-size-p);
  color: var(--Neutral-800);
  transition: background 0.2s ease, border-color 0.2s ease;
}
.apropos-equipe-membres li:hover {
  background: var(--Primary-100);
  border-color: var(--Primary-400);
}

.apropos-equipe-membres li strong {
  font-family: var(--font-family-heading);
  font-weight: 700;
  color: var(--color-heading-neutral);
  min-width: 8rem;
}

.apropos-membre-sep {
  color: var(--Primary-600);
  font-weight: 700;
  font-size: 1.1em;
}

.apropos-membre-poste {
  color: var(--Neutral-600);
  font-style: italic;
}

/* ── Chiffres clés ─────────────────────────────────────── */
.apropos-chiffres {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--Spacing-m);
}

.apropos-chiffre-item {
  display: flex;
  align-items: flex-start;
  gap: var(--Spacing-m);
  padding: var(--Spacing-l) var(--Spacing-section);
  background: transparent;
  border: 0.0625rem solid var(--Primary-200);
  border-radius: var(--Radius-s);
  font-family: var(--font-family-body);
  font-size: var(--font-size-p);
  color: var(--Neutral-800);
  line-height: var(--line-height-p);
  transition: background 0.2s ease, border-color 0.2s ease;
}
.apropos-chiffre-item:hover {
  background: var(--Primary-100);
  border-color: var(--Primary-400);
}

.apropos-chiffre-puce {
  flex-shrink: 0;
  font-family: var(--font-family-heading);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: var(--line-height-p);
  color: var(--Primary-600);
}

@media (max-width: 640px) {
  .apropos-chiffres { grid-template-columns: 1fr; }
}

.section-padding { padding: var(--Spacing-big-hero) 0; }