/*
 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:   #FAFAFA;
  --Grey-25:  #F7F7F7;
  --Grey-50:  #f1f1f1;
  --Grey-100: #dddddd;
  --Grey-200: #c0c0c0;
  --Grey-300: #a7a7a7;
  --Grey-400: #909090;
  --Grey-500: #7a7a7a;
  --Grey-600: #666666;
  --Grey-700: #535353;
  --Grey-800: #3a3a3a;
  --Grey-900: #1f1f1f;
  --Grey-950: #111111;
}

/* GENERATOR:COLOR-1-PALETTE — Couleur primaire (remplacé par le générateur) */
:root {
  --Color-1-5:   #f3f4ef;
  --Color-1-25:  #e6e9de;
  --Color-1-50:  #d4d9c8;
  --Color-1-100: #b8c0a4;
  --Color-1-200: #96a479;
  --Color-1-300: #7e8c4a;
  --Color-1-400: #627044;
  --Color-1-500: #4d5933;
  --Color-1-600: #3b4427;
  --Color-1-700: #2a301b;
  --Color-1-800: #1b1f11;
  --Color-1-900: #0d0f08;
  --Color-1-950: #070804;
}

/* GENERATOR:COLOR-2-PALETTE — Couleur secondaire (remplacé par le générateur) */
:root {
  --Color-2-5:   #fff6f2;
  --Color-2-25:  #fff0e9;
  --Color-2-50:  #feede6;
  --Color-2-100: #fdd4c1;
  --Color-2-200: #fbac79;
  --Color-2-300: #ee8c2a;
  --Color-2-400: #cc7722;
  --Color-2-500: #b5691d;
  --Color-2-600: #965616;
  --Color-2-700: #75420f;
  --Color-2-800: #522d07;
  --Color-2-900: #301803;
  --Color-2-950: #1e0d01;
}

/* ============================================================
   BLOC 2 — TOKENS SÉMANTIQUES (fixes, référencent les palettes)
   ============================================================ */
:root {
  /* Primaire — #4D5933 */
  --Primary-main:  var(--Color-1-500);
  --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 — #7E8C4A */
  --Secondary-main: var(--Color-1-300);
  --Secondary-50:   var(--Color-1-50);
  --Secondary-100:  var(--Color-1-100);
  --Secondary-200:  var(--Color-1-200);
  --Secondary-300:  var(--Color-1-300);
  --Secondary-400:  var(--Color-1-400);
  --Secondary-500:  var(--Color-1-500);
  --Secondary-600:  var(--Color-1-600);
  --Secondary-700:  var(--Color-1-700);
  --Secondary-800:  var(--Color-1-800);
  --Secondary-900:  var(--Color-1-900);
  --Secondary-950:  var(--Color-1-950);

  /* Tertiaire — #666666 */
  --Tertiary-main:  #666666;
  --Tertiary-50:    #f2f2f2;
  --Tertiary-100:   #d9d9d9;
  --Tertiary-300:   #999999;
  --Tertiary-600:   #4d4d4d;
  --Tertiary-800:   #2a2a2a;

  /* Bouton CTA — #CC7722 (Color-2-400) */
  --Button-cta:       var(--Color-2-400);
  --Button-cta-hover: var(--Color-2-500);

  /* Neutral — valeurs hex directes (pas de var() intermédiaire, compatible Divi tokens) */
  --Neutral-50:  #f1f1f1;
  --Neutral-100: #dddddd;
  --Neutral-200: #c0c0c0;
  --Neutral-300: #a7a7a7;
  --Neutral-400: #909090;
  --Neutral-500: #7a7a7a;
  --Neutral-600: #666666;
  --Neutral-700: #535353;
  --Neutral-800: #3a3a3a;
  --Neutral-900: #1f1f1f;
  --Neutral-950: #111111;
  --Neutral-main: var(--Neutral-600);

  /* 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 { background-color: var(--Neutral-50); }

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(--Button-cta);
  color: #fff;
  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(--Button-cta-hover);
  color: #fff;
  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(--Button-cta);
  color: #fff;
  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);
}

/* Masqué quand [main_nav] est actif */
body.has-snav #main-header,
body.has-snav #top-header { display: none !important; }

/* ============================================================
   NAVIGATION PRINCIPALE — shortcode [main_nav]
   ============================================================ */

/* — Barre — */
.snav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 99990;
  padding-top: var(--Spacing-section);
  padding-bottom: var(--Spacing-s);
  padding-inline: var(--Spacing-hero);
  background: transparent;
  transition:
    background     0.3s ease,
    padding-top    0.3s ease,
    padding-bottom 0.3s ease;
}
.snav.is-scrolled {
  padding-top: var(--Spacing-m);
  padding-bottom: var(--Spacing-m);
  background: var(--Neutral-50);
}

/* Offset barre admin WP */
.admin-bar .snav               { top: 32px; }
@media (max-width: 782px) {
  .admin-bar .snav             { top: 46px; }
}

/* Collapse total du header Divi Theme Builder (le .snav est position:fixed, hors flux) */
body.has-snav .et-l--header,
body.has-snav .et-l--header .et_builder_inner_content {
  height: 0 !important;
  max-height: 0 !important;
  overflow: visible !important;
  padding: 0 !important;
  margin: 0 !important;
}
body.has-snav .et-l--header .et_pb_section_0_tb_header {
  height: 0 !important;
  max-height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background-color: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}
body.has-snav .et-l--header .et_pb_row_0_tb_header,
body.has-snav .et-l--header .et_pb_column_0_tb_header {
  height: 0 !important;
  max-height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
}
/* Divi masque le Code module sur tous les breakpoints desktop — on réécrit */
body.has-snav .et-l--header .et_pb_code_0_tb_header {
  display: block !important;
  height: 0 !important;
  max-height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
}

/* — Inner — */
.snav__inner {
  width: 100%;
  max-width: 93rem;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--Spacing-hero);
}

/* — Logo — */
.snav__logo-link {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
}
.snav__logo {
  height: 6.5rem;
  width: auto;
  transition: height 0.3s ease;
}
.snav.is-scrolled .snav__logo { height: 5rem; }

/* — Desktop nav — */
.snav__desktop { display: flex; align-items: center; gap: var(--Spacing-hero); }

.et-l--header .snav__list,
.snav__list,
.snav__list li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: normal !important;
}
.snav__list {
  display: flex;
  align-items: center;
  align-self: center;
  gap: var(--Spacing-list);
}
.snav__list li {
  display: flex;
  align-items: center;
}

/* Liens standards */
.snav__list li > a {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-family-body);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--Grey-800);
  text-decoration: none;
  position: relative;
  padding-bottom: 3px;
  transition: color 0.25s ease;
  white-space: nowrap;
}

/* Soulignement animé */
.snav__list li > a::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 100%;
  height: 2px;
  background: var(--Primary-600);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.3s ease;
}
.snav__list li > a:hover,
.snav__list li.current-menu-item > a,
.snav__list li.current-page-ancestor > a {
  color: var(--Primary-600);
}
.snav__list li > a:hover::after,
.snav__list li.current-menu-item > a::after,
.snav__list li.current-page-ancestor > a::after {
  transform: scaleX(1);
}

/* Bouton Contact — élément séparé du menu */
.snav__cta {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-family-body);
  font-size: var(--font-size-p);
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  background: var(--Button-cta);
  border: 1px solid var(--Button-cta);
  padding: var(--Spacing-s) var(--Spacing-m);
  border-radius: var(--Radius-full);
  flex-shrink: 0;
  transition:
    background   0.25s ease,
    border-color 0.25s ease;
}
.snav__cta:hover {
  background: var(--Button-cta-hover);
  border-color: var(--Button-cta-hover);
  color: #fff;
}

/* — Burger (mobile uniquement) — */
.snav__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: 5px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  transition: opacity 0.2s ease;
}
.snav__bar {
  display: block;
  height: 2.5px;
  background: var(--Primary-600);
  border-radius: 99px;
  transition: opacity 0.2s ease;
}
.snav__bar:nth-child(1) { width: 1.75rem; }
.snav__bar:nth-child(2) { width: 1.25rem; }
.snav__bar:nth-child(3) { width: 1.75rem; }
.snav__burger.is-open   { opacity: 0; pointer-events: none; }

/* — Responsive — */
@media (max-width: 980px) {
  .snav          { padding-inline: var(--Spacing-bloc); }
  .snav__logo    { height: 3rem; }
  .snav.is-scrolled .snav__logo { height: 2.5rem; }
  .snav__desktop { display: none; }
  .snav__burger  { display: inline-flex; }
}

/* ============================================================
   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); }

/* ============================================================
   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: var(--Primary-600) !important;
  box-shadow: 0 0 0 3px var(--Primary-Alpha-20) !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: var(--Button-cta) !important;
  border: 1px solid var(--Button-cta) !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: #fff !important;
  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: var(--Button-cta-hover) !important;
  border-color: var(--Button-cta-hover) !important;
}
.wpcf7-submit.cf7-btn:focus-visible {
  outline: 3px solid var(--Button-cta) !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: #1e2914; border-left: 4px solid var(--Primary-400, #627044); }
.cf7-toast--error   { background: #2d0a0a; border-left: 4px solid #e53935; }
.cf7-toast--warning { background: #2d1a00; border-left: 4px solid var(--Button-cta, #cc7722); }
.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); }

/* ============================================================
   TITRE DE SECTION COMMUN — partagé entre plusieurs shortcodes
   ============================================================ */
.apropos-section-titre {
  margin: 0 0 var(--Spacing-s) 0;
  text-transform: uppercase;
  color: var(--Neutral-900) !important;
}

/* ============================================================
   Styles des shortcodes à propos, solution ITE, galerie, etc.
   → Déplacés dans template-parts/shortcodes/[nom]/[nom].css
   ============================================================ */

/* ============================================================
   MENU MOBILE PLEINE PAGE
   Partagé par [burger_menu] et [main_nav]
   ============================================================ */

/* Burger */
.mob-burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: 5px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  transition: opacity 0.2s ease;
  z-index: 999999;
}

/* Les 3 barres */
.mob-burger__bar {
  display: block;
  height: 2.5px;
  background: var(--Primary-600);
  border-radius: 99px;
  transition: opacity 0.2s ease;
}
.mob-burger__bar:nth-child(1) { width: 1.75rem; }
.mob-burger__bar:nth-child(2) { width: 1.25rem; }
.mob-burger__bar:nth-child(3) { width: 1.75rem; }

/* Burger disparaît quand menu ouvert */
.mob-burger.is-open {
  opacity: 0;
  pointer-events: none;
}

/* Logo dans l'overlay */
.mob-menu__logo-link {
  display: flex;
  align-items: center;
  text-decoration: none;
}

/* Overlay pleine page */
.mob-menu {
  position: fixed;
  inset: 0;
  z-index: 999998;
  background: #FFFFFF;
  display: flex;
  flex-direction: column;
  padding: var(--Spacing-section) var(--Spacing-xl);
  opacity: 0;
  pointer-events: none;
  transform: translateX(100%);
  transition: opacity 0.35s ease, transform 0.35s ease;
  will-change: transform, opacity;
}
.mob-menu.is-open {
  opacity: 1;
  pointer-events: all;
  transform: translateX(0);
}

/* Décale sous la barre admin WP */
.admin-bar .mob-burger { top: calc(1rem + 32px); }
@media (max-width: 782px) {
  .admin-bar .mob-burger { top: calc(1rem + 46px); }
}
.admin-bar .mob-menu { top: 32px; }
@media (max-width: 782px) {
  .admin-bar .mob-menu { top: 46px; }
}

/* Header overlay : logo + close */
.mob-menu__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--Spacing-big-hero);
}
.mob-menu__logo {
  height: 3rem;
  width: auto;
}
.mob-menu__close {
  background: transparent;
  border: none;
  color: var(--Grey-700);
  cursor: pointer;
  padding: 0.25rem;
  display: flex;
  align-items: center;
  transition: color 0.2s ease;
}
.mob-menu__close:hover { color: var(--Grey-950); }

/* Nav links */
.mob-menu__nav { flex: 1; }

.mob-menu__list,
.mob-menu__list li {
  list-style: none !important;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-l);
}

.mob-menu__list li a {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-h4);
  font-weight: 700;
  color: var(--Grey-900);
  text-decoration: none;
  line-height: 1.2;
  display: block;
  padding: var(--Spacing-s) 0;
  border-bottom: 1px solid var(--Grey-100);
  transition: color 0.2s ease, padding-left 0.2s ease;
}
.mob-menu__list li a:hover {
  color: var(--Primary-700);
  padding-left: var(--Spacing-m);
}
.mob-menu__list li.current-menu-item > a {
  color: var(--Primary-700);
}

/* CTA Contact en bas */
.mob-menu__footer {
  padding-top: var(--Spacing-section);
}
.mob-menu__cta {
  display: block;
  text-align: center;
  padding: var(--Spacing-l) var(--Spacing-xl);
  background: var(--Button-cta);
  color: var(--Grey-950);
  font-family: var(--font-family-heading);
  font-size: var(--font-size-h6);
  font-weight: 700;
  border-radius: var(--Radius-full);
  text-decoration: none;
  transition: background 0.2s ease;
}
.mob-menu__cta:hover { background: var(--Button-cta-hover); color: #fff; }

/* Cache le menu burger natif Divi sur mobile */
@media (max-width: 980px) {
  .mobile_menu_bar,
  .et_mobile_nav_menu { display: none !important; }
}