/*!
Theme Name: IA
Theme URI: http://impactalarme.com/
Version: 1.0
Description: Theme enfant de Divi pour le site Web Impact Alarme
Author: Contraste Communication•Marketing
Author URI: http://contraste-marketing.com/
Template: Divi
*/

/* ======================================================
   VARIABLES – IDENTITÉ VISUELLE
   ====================================================== */

:root {
  --primary: #4b4a7f;
  --primary-dark: #3f3e6b;
  --primary-light: #5a5aa0;

  --accent: #f4b52a;
  --accent-dark: #e0a61f;
 --accent-light: #eec96e;

  --white: #ffffff;
  --text-dark: #1a1a1a;
  --text-muted: #6b7280;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;

  --shadow-soft: 0 12px 30px rgba(0,0,0,.08);
  --shadow-ui: 0 20px 50px rgba(0,0,0,.12);
}

/* ======================================================
   BASE
   ====================================================== */

body {
  background: var(--primary);
  color: var(--white);
  font-size: 16px;
  line-height: 1.6;
}

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  color: var(--accent-dark);
}

/* ======================================================
   MENU – NIVEAU 1
   ====================================================== */

.et_pb_menu.main-nav .et-menu-nav > ul {
  display: flex;
  align-items: center;
  gap: 6px;
}

.et_pb_menu.main-nav .et-menu-nav > ul > li {
  position: relative;
}

.et_pb_menu.main-nav .et-menu-nav > ul > li > a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;

  padding: 12px 18px !important;
  border-radius: 10px !important;

  font-size: 14px;
  font-weight: 600;
  color: #000;
  z-index: 1;
}

/* fond jaune */
.et_pb_menu.main-nav .et-menu-nav > ul > li > a::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent);
  border-radius: 10px;
  opacity: 0;
  transform: scale(.96);
  transition: .2s ease;
  z-index: -1;
}

/* hover / actif */
.et_pb_menu.main-nav .et-menu-nav > ul > li:hover > a::before,
.et_pb_menu.main-nav .et-menu-nav > ul > li.current-menu-item > a::before,
.et_pb_menu.main-nav .et-menu-nav > ul > li.current-menu-ancestor > a::before {
  opacity: 1;
  transform: scale(1);
}

.et_pb_menu.main-nav .et-menu-nav > ul > li:hover > a,
.et_pb_menu.main-nav .et-menu-nav > ul > li.current-menu-item > a,
.et_pb_menu.main-nav .et-menu-nav > ul > li.current-menu-ancestor > a {
  color: #000;
}

/* ======================================================
   FLÈCHES SOUS-MENU
   ====================================================== */

.et_pb_menu.main-nav .menu-item-has-children > a::after {
  content: "›";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 12px;
  font-size: 16px;
  line-height: 1;
  margin-left: 6px;
  transform: rotate(90deg);
  transition: transform .2s ease;
  position: relative;
  top: 1px;
}

.et_pb_menu.main-nav .menu-item-has-children:hover > a::after {
  transform: rotate(-90deg);
}

/* ======================================================
   MÉGA-MENU – CONTENEUR
   ====================================================== */

.et_pb_menu.main-nav .menu-item-has-children {
  position: relative;
}

.et_pb_menu.main-nav .menu-item-has-children > .sub-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);

  padding: 24px 28px;

  display: grid;
  grid-template-columns: 280px 280px; /* ← largeur réelle */
  gap: 18px 24px;

  background: #ffffff;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.08);

  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;

  z-index: 999;
}

/* zone tampon anti-fermeture */
.et_pb_menu.main-nav .menu-item-has-children::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 16px;
}

/* ouverture */
.et_pb_menu.main-nav .menu-item-has-children:hover > .sub-menu,
.et_pb_menu.main-nav .menu-item-has-children > .sub-menu:hover {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/* suppression styles Divi */
.et_pb_menu.main-nav .sub-menu {
  border-top: none !important;
}

/* ======================================================
   ITEMS MÉGA-MENU (COMPACT)
   ====================================================== */

.et_pb_menu.main-nav .sub-menu li {
  list-style: none;
}

.et_pb_menu.main-nav .sub-menu li a {
  display: block;
  padding: 14px 16px;
  border-radius: 14px;
  color: var(--text-dark);
  transition: background .2s ease, transform .15s ease;
}

.et_pb_menu.main-nav .sub-menu li a strong {
  display: block;
  font-size: 15px;
  font-weight: 600;
}

.et_pb_menu.main-nav .sub-menu li a span,
.et_pb_menu.main-nav .menu-item-description {
  display: block;
  margin-top: 3px;
  font-size: 13px;
  color: var(--text-muted);
}

/* hover item */
.et_pb_menu.main-nav .sub-menu li a:hover {
  background: #f4c44f;

}

/* AFFICHER LES DESCRIPTIONS DANS LE MÉGA-MENU */
.et_pb_menu.main-nav .sub-menu li a .menu-item-description,
.et_pb_menu.main-nav .sub-menu li a .menu-item-description span {
  display: block;
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 4px;
}
/* =========================
   SOUS-MENU – TYPO & ESPACEMENT (FIX FINAL)
========================= */

.et_pb_menu.main-nav .sub-menu li > a {
  display: block;
  padding: 14px 16px;
  line-height: 1.2;          /* 🔥 clé du problème */
  color: #000000!important;            /* noir réel */
	font-weight:600!important;
}

/* Description */
.et_pb_menu.main-nav .sub-menu li > a .menu-item-description {
  display: block;
  margin: 0;                 /* reset total */
  padding-top: 2px;          /* micro-espacement contrôlé */
  line-height: 1.3;

  color: #6b7280;
  font-size: 14px;
}

/* Hover */
.et_pb_menu.main-nav .sub-menu li > a:hover {
 background: var(--accent);
  color: #000 !important;              /* reste noir */
}


/* Hover description */
.et_pb_menu.main-nav .sub-menu li > a:hover .menu-item-description {
  color: #3f3f3f;                      /* un peu plus foncé au hover */
}
/* =========================
   TOP BAR – UNE SEULE LIGNE
========================= */

.top-bar {
  display: inline-flex;
  align-items: center;
  gap: 10px;

  white-space: nowrap; /* 🔥 empêche tout retour à la ligne */

  color: #fff;
  font-size: 14px;
  font-weight: 500;
}

/* Icône */
.top-bar i {
  color: #fff;
  font-size: 14px;
}

/* Texte */
.top-bar-text {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap; /* 🔥 double sécurité */
}

/* Séparateur | */
.top-bar-text .separator {
  margin: 0 8px;
  opacity: .6;
}

/* Liens */
.top-bar a {
  color: #fff;
  text-decoration: none;
}

.top-bar a:hover {
  color: var(--accent, #f4b52a);
}

/* 🔥 NEUTRALISATION TOTALE DIVI SUB-MENU */
.et_pb_menu.main-nav .menu-item-has-children > .sub-menu {
  width: auto !important;
  min-width: unset !important;
  max-width: unset !important;
}

/* ======================================================
   CTA – BOUTON HEADER demande de soumission
   ====================================================== */

.et_pb_button.btn-primary {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;

  background: var(--accent) !important;
  color: #000 !important;

  padding: 12px 20px !important;
  border-radius: 10px !important;

  font-size: 1em;
  font-weight: 600;

  border: none !important;
  box-shadow: none !important;
  white-space: nowrap;
  transition: background .2s ease;
}

.et_pb_button.btn-primary:after {
  display: none !important;
}

.et_pb_button.btn-primary:hover {
  background: var(--accent-light) !important;
}
/* ====================================================================================================================*/

/* =========================
   FOOTER – BRAND (LOGO + TEXTE)
========================= */

.footer-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}

.footer-logo {
  width: 48px;
  height: auto;
}

.footer-brand-name {
  font-size: 22px;
  font-weight: 500;
  color: #ffffff;
}

.footer-brand-name strong {
  color: #f4b52a; /* jaune Impact */
}

/* =========================
   DESCRIPTION
========================= */

.footer-description {
  color: #d1d5db;
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 24px;
}

/* =========================
   CONTACT – ALIGNEMENT PARFAIT
========================= */

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

.footer-contact li {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
  font-size: 15px;
}

/* Icônes */
.footer-contact i {
  width: 20px;              /* clé de l’alignement */
  text-align: center;
  font-size: 16px;
  color: #ffffff;
  flex-shrink: 0;
}

/* Texte / liens */
.footer-contact span,
.footer-contact a {
  color: #e5e7eb;
  line-height: 1.4;
}

.footer-contact a:hover {
  color: #ffffff;
}
li.space-tel {
    padding-left: 47px!important;
    margin-top: -10px!important;
}

/* =========================
   FOOTER – LISTES DE LIENS
========================= */

.footer-links {
  list-style: none;          /* supprime les puces */
  padding: 0;
  margin: 0;
}

.footer-links li {
  margin-bottom: 12px;
}

/* liens */
.footer-links a {
  display: inline-block;     /* évite les sauts au hover */
  font-size: 15px;
  color: #ffffff;
  text-decoration: none;

  transition: color 0.2s ease;
}

/* hover jaune Impact */
.footer-links a:hover {
  color: var(--accent, #f4b52a);
}

/* SUPPRESSION DES PUCES (LISTES FOOTER) */
.footer-links,
.footer-links ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* ESPACE ENTRE LE TITRE ET LA LISTE */
.footer-title {
	color: #a39778;
	font-weight:700;
  margin-bottom: 24px; /* augmente l’espace sous “Solutions” */
}

/* ESPACE ENTRE LES LIENS */
.footer-links li {
  margin-bottom: 6px; /* réduit l’espace entre les liens */
}

/* (optionnel) dernière ligne sans marge */
.footer-links li:last-child {
  margin-bottom: 0;
}
.footer-copyright {
	color:#7a7a7a;
}

/* ======================================================
   RESPONSIVE
   ====================================================== */

@media (max-width: 980px) {
  .et_pb_menu.main-nav .menu-item-has-children > .sub-menu {
    display: none !important;
  }
}
/* ==================================================
   FOOTER – MOBILE FIX COLONNE 1 (CONTACT)
   ================================================== */

@media (max-width: 768px) {

  /* colonne brand/contact */
  #footer-col-brand {
    margin-bottom: 40px;
  }

  /* logo + nom */
  .footer-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
  }

  .footer-logo {
    max-width: 56px;
    height: auto;
  }

  .footer-brand-name {
    font-size: 20px;
    font-weight: 600;
    color: #ffffff;
  }

  .footer-brand-name strong {
    color: #f4b52a;
  }

  /* description */
  .footer-description {
    font-size: 15px;
    line-height: 1.5;
    color: #d1d5db;
    margin-bottom: 24px;
  }

  /* LISTE CONTACT */
  .footer-contact {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .footer-contact li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 15px;
    line-height: 1.1!important;
    color: #ffffff;
  }

  /* IMPORTANT : on neutralise les <br> */
  .footer-contact li br {
    display: none;
  }

  /* icônes */
  .footer-contact li i {
    width: 18px;
    min-width: 18px;
    text-align: center;

    font-size: 16px;
    color: #ffffff;
  }

  /* liens */
  .footer-contact li a {
    color: #ffffff;
    text-decoration: none;
  }

  .footer-contact li a:hover {
    color: #f4b52a;
  }

}

/* =================================================== Accueil ===========================================================*/


/* HERO MAIN BASE */
.hero-main {
  position: relative;
  min-height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: cover;
  background-position: center;
  transition: background-image 0.6s ease, opacity 0.4s ease;
  overflow: hidden; /* sécurité */
}

/* OVERLAY NOIR */
.hero-main::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35); /* ajuste ici l’intensité */
  z-index: 1;
}

/* Contenu AU-DESSUS de l’overlay */
.hero-main > * {
  position: relative;
  z-index: 2;
}
h1.hero-title {
	padding-top:30px;
  font-size: 3.5em;
  text-align: center;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.75);
	color:#fff;
}
p.hero-subtitle {
    text-align:center;
    font-size:1.5em;
    font-weight:400;
      text-shadow: 0 2px 12px rgba(0, 0, 0, 0.75);
}
/* FADES TEXTE */
.hero-title,
.hero-subtitle,
.hero-cta-primary,
.hero-cta-secondary {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.hero-main.is-transitioning .hero-title,
.hero-main.is-transitioning .hero-subtitle,
.hero-main.is-transitioning .hero-cta-primary,
.hero-main.is-transitioning .hero-cta-secondary {
  opacity: 0;
  transform: translateY(6px);
	align-items: center;
  justify-content: center;
}

/* BACKGROUNDS */
.hero-main[data-mode="residential"] {
  background-image: url("/wp-content/uploads/2025/12/hero-residential-BIQmNLdi.jpg");
}

.hero-main[data-mode="commercial"] {
  background-image: url("/wp-content/uploads/2025/12/hero-commercial-Dr01lHi2.jpg");
}

/* ================================
   HERO TOGGLE – BASE
================================ */

/* === FORCE LE CENTRAGE DU HERO TOGGLE (DIVI SAFE) === */

.hero-toggle {
  position: relative;
  width: 100%;
  display: flex !important;
  justify-content: center !important;
  margin: 0 auto 24px !important;
}

.hero-toggle-track {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Cas où Divi applique text-align:left sur la colonne */
.et_pb_column,
.et_pb_text,
.et_pb_module {
  text-align: initial;
}
/* ================================
   SLIDER JAUNE
================================ */

.hero-toggle-slider {
  position: absolute;
  top: 4px;
  left: 4px;
  width: calc(50% - 4px);
  height: calc(100% - 8px);
  background: #f4c24f;
  border-radius: 10px;
  transition: transform 0.35s ease;
  z-index: 1;
	  align-items: center;
  justify-content: center;
}

/* Position du slider selon le mode */
.hero-main[data-mode="commercial"] .hero-toggle-slider {
  transform: translateX(100%);
}

.hero-main[data-mode="residential"] .hero-toggle-slider {
  transform: translateX(0);
}

/* ================================
   BOUTONS TEXTE
================================ */

.hero-toggle-btn {
  position: relative;
align-items: center;
  justify-content: center;
  flex: 1;
  height: 100%;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  z-index: 2;
  color: #6b7280;
  transition: color 0.25s ease;
}

/* Texte actif */
.hero-main[data-mode="residential"] 
.hero-toggle-btn[data-mode="residential"],
.hero-main[data-mode="commercial"] 
.hero-toggle-btn[data-mode="commercial"] {
  color: #000;
}

/* Texte inactif */
.hero-main[data-mode="residential"] 
.hero-toggle-btn[data-mode="commercial"],
.hero-main[data-mode="commercial"] 
.hero-toggle-btn[data-mode="residential"] {
  color: #6b7280;
}

/* ================================
   HERO TOGGLE — TEXTE + FIX DIVI
================================ */

/* Conteneur du toggle */
.hero-toggle-track {
  position: relative;
  display: flex;
    align-items: center;
  justify-content: center;
  width: 320px;
  height: 48px;
  background: #f1f1f1;
  border-radius: 10px;
  padding: 4px;
  box-sizing: border-box;
  overflow: hidden;
  z-index: 1; /* base */
}

/* Slider jaune */
.hero-toggle-slider {
  position: absolute;
  top: 4px;
  left: 4px;
  width: calc(50% - 4px);
  height: calc(100% - 8px);
  background: #f4c24f;
  border-radius: 10px;
  transition: transform 0.35s ease;
  z-index: 1; /* TOUJOURS derrière le texte */
}

/* Position du slider */
.hero-main[data-mode="residential"] .hero-toggle-slider {
  transform: translateX(0);
}

.hero-main[data-mode="commercial"] .hero-toggle-slider {
  transform: translateX(100%);
}

/* Boutons texte */
.hero-toggle-btn {
  position: relative;
  flex: 1;
  height: 100%;
  border: none;
  background: transparent;
  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;

  color: #6b7280;
  transition: color 0.25s ease;

  z-index: 2; /* AU-DESSUS du slider */
	  transform: translateY(-7px)!important; /* monte légèrement le texte */
  padding: 0 35px!important;   
}

/* Texte actif */
.hero-main[data-mode="residential"]
.hero-toggle-btn[data-mode="residential"],
.hero-main[data-mode="commercial"]
.hero-toggle-btn[data-mode="commercial"] {
  color: #000;
}

/* Texte inactif */
.hero-main[data-mode="residential"]
.hero-toggle-btn[data-mode="commercial"],
.hero-main[data-mode="commercial"]
.hero-toggle-btn[data-mode="residential"] {
  color: #6b7280;
}

/* Sécurité anti-Divi */
.hero-toggle-track *,
.hero-toggle-track button {
  box-sizing: border-box;
  line-height: 1;
}
/* ================================
   HERO CTAs – WRAPPER
================================ */

.hero-ctas {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 28px;
  flex-wrap: wrap;
}

/* ================================
   CTA BASE
================================ */

.hero-ctas a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 45px;
  padding: 0 25px;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 12px;
  transition: all 0.25s ease;
  white-space: nowrap;
}

/* ================================
   CTA PRIMARY – JAUNE
================================ */

.hero-cta-primary {
  background: #f4c24f;
  color: #000;
  border: none;
}

.hero-cta-primary:hover {
  background: #eab63f;
  transform: translateY(-1px);
	 color: #000;
}

/* ================================
   CTA SECONDARY – BLANC CONTOUR
================================ */

.hero-cta-secondary {
  background: transparent;
  color: #fff;
  border: 2px solid #fff;
}

.hero-cta-secondary:hover {
  background: #fff;
  color: #000;
  transform: translateY(-1px);
}
/* ================ statistiques ===============*/
.hero-stats {
  display: flex;
  justify-content: center;   /* centre le groupe */
  align-items: center;
  gap: 80px;


}



.hero-stat {
  display: flex;
  flex-direction: column;
  align-items: center;       /* centre icône + texte */
  text-align: center;
  min-width: 140px;
}

.hero-stat i {
  font-size: 28px;
  color: #1f2a44;
  margin-bottom: 1px;
}

.hero-stat strong {
  font-size: 28px;
  font-weight: 700;
  color: #000;
  margin-bottom: 0px;
}

.hero-stat span {
  font-size: 13px;
  color: #6b7280;
	 line-height: .5; 
}

/* Cartes info */

/* ===============================
   FEATURE CARD – BASE
================================ */

.feature-card {
  background: #ffffff;
  border: 3px solid #e2e7ef;
  border-radius: 16px;
  padding: 16px;
  max-width: 100%;
min-height:280px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
	
}

.feature-card:hover {
  box-shadow: 0 12px 28px rgba(0,0,0,0.08);
  transform: translateY(-5px);
}
/*.feature-card:hover {
  transform: scale(1.05) rotate(3deg);
  box-shadow: 0 18px 40px rgba(0,0,0,0.15);
}*/

/* ===============================
   BANDE ICÔNE
================================ */

.feature-band {
  background: #f1f3f8;
  border-radius: 12px;
  height: 52px;
  display: flex;
  align-items: center;
  padding-left: 16px;
}

.feature-icon {
  font-size: 20px;
  color: #2b2d5c;
}

/* ===============================
   CONTENU
================================ */

.feature-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

h3.feature-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0;
}

.feature-text {
  font-size: 0.95rem;
  color: #5c6b85;
  margin: 0;
  line-height: 1.45;
}

/* ===============================
   LIEN TEXTE
================================ */

.feature-link {
  margin-top: 6px;
  font-size: 0.9rem;
  font-weight: 600;
  color: #2b2d5c;
  text-decoration: none;
}

.feature-link:hover {
  text-decoration: underline;
}


/* ===============================
   FEATURE BUTTON – PRIMARY
================================ */

.feature-btn {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  height: 48px; /* ⬅️ plus mince */

  margin-top: 16px;
  padding: 0;

  border-radius: 14px;
  border: 1px solid #f2f3f8;

  background: #f2f3f8;
  color: #111;

  font-weight: 600;
  font-size: 1rem;
  line-height: 0;

  text-decoration: none;
  box-sizing: border-box;

  transition: 
    background-color 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease;
}

/* HOVER — jaune plein */
.feature-btn:hover {
  background: #f4c24f;
  color: #000;
  box-shadow: 0 6px 14px rgba(244, 194, 79, 0.35);
}


/* ===============================
   VARIANTES COULEUR
================================ */

.variant-neutral .feature-band {
  background: #f1f3f8;
}

.variant-highlight .feature-band {
  background: #fff4dc;
}

.variant-highlight .feature-icon {
  color: #f4b63f;
}
.variant-highlight  {
  min-height:310px;
}

/* ===============================
   FEATURE LIST – CLEAN & FINAL
================================ */

.feature-list {
  margin: 0;
  padding: 0;
}

.feature-list li {
  list-style: none !important; /* empêche toute puce native (Divi-safe) */
  position: relative;
  padding-left: 28px;          /* espace pour la puce custom */
  margin-bottom: 6px;
  color: #2b2d5c;
  line-height: 1.45;
}

/* Puce custom */
.feature-list li::before {
  content: "•";
  position: absolute;
  left: 12px;                  /* décale la puce vers la droite */
  top: 0em;                  /* alignement vertical avec le texte */
  font-size: 1.5em;
  line-height: 1;
  color: var(--accent);
	
}



/* ===============================
   OVERLAY NOIR – DIVI PARALLAX
================================ */

.section-dark-overlay {
  position: relative;
}

/* Image parallax (fond) */
.section-dark-overlay .et_parallax_bg_wrap {
  z-index: 0;
}

/* Overlay NOIR */
.section-dark-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55); /* ajuste ici */
  z-index: 1;
  pointer-events: none;
}

/* Contenu (texte, cartes, boutons) */
.section-dark-overlay .et_pb_row,
.section-dark-overlay .et_pb_module {
  position: relative;
  z-index: 2;
}

/* ================================
   Formulaire demande de soumission
================================ */

p.cta-form-subtitle{
	color:#000;
	font-size: 1.2em;
}
/* ================================ Secteurs ================================ */
.icon-circle {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: #dee0ea; /* gris doux */
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto; /* centre horizontalement */
}

.icon-circle i {
  	font-size: 42px;
	
  	color: #2b2d5c; /* bleu foncé / marque */
}


span.yellow {
    color: #f4b52a!important;
    font-weight: lighter;
}

span.light {
  
    font-weight: lighter;
}

.hero-main-secteur {
  position: relative;
  overflow: hidden; /* sécurité */
}

/* Overlay noir 60 % */
.hero-main-secteur::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 1;
  pointer-events: none;
}

/* S’assurer que le contenu reste au-dessus */
.hero-main-secteur > .et_pb_row,
.hero-main-secteur .et_pb_module {
  position: relative;
  z-index: 2;
}

/* =========================
   CTA DUO – CONTAINER
========================= */

.cta-dual {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

/* =========================
   CTA BASE
========================= */

.cta-btn {
  position: relative;
  overflow: hidden;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  height: 48px;
  padding: 0 28px;

  border-radius: 14px;
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  white-space: nowrap;

  transition: transform 0.2s ease;
}

/* Texte au-dessus de l’overlay */
.cta-btn .cta-label {
  position: relative;
  z-index: 2;
}

/* Overlay */
.cta-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.35);
  opacity: 0;
  transition: opacity 0.25s ease;
  z-index: 1;
}

/* Hover global */
.cta-btn:hover::after {
  opacity: 1;
}

.cta-btn:hover {
  transform: translateY(-1px);
}

/* =========================
   CTA PRIMARY – JAUNE
========================= */

.cta-btn-primary {
  background: var(--accent);
  color: #000;
}

.cta-btn-primary:hover {
  color: #000;
}

/* =========================
   CTA SECONDARY – CONTOUR
========================= */

.cta-btn-secondary {
  background: transparent;
  color: #fff;
  border: 2px solid #fff;
}

.cta-btn-secondary::after {
  background: rgba(255,255,255,0.7);
}

.cta-btn-secondary:hover {
  color: #000;
}

.cta-btn-secondary:hover .cta-label {
  color: #000;
}


/* ================================ contact ================================ */

.bg-gradient-overlay {
  position: relative;
  overflow: hidden;
}

.bg-gradient-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 1) 100%,
    rgba(255, 255, 255, 1) 0%
  );
  pointer-events: none;
  z-index: 1;
}

/* Assure que le contenu reste au-dessus */
.bg-gradient-overlay > * {
  position: relative;
  z-index: 2;
}




/* ================================
   MOBILE
================================ */
/* ===============================
   HERO – MOBILE
================================ */
@media (max-width: 768px) {

  .hero-main {
    min-height: 90vh;
    padding: 10px 20px 90px;
    background-position: center top;
  }

  .hero-main::before {
    background: rgba(0, 0, 0, 0.55);
  }

  .hero-title {
    font-size: 1.7em!important;   /* ↓ avant 2.1rem */
    line-height: 1.25;
  }

  .hero-subtitle {
    font-size: 0.95rem;   /* ↓ avant 1rem */
    line-height: 1.55;
  }

  .hero-ctas {
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .hero-cta-primary,
  .hero-cta-secondary {
    width: 100%;
    text-align: left!important;
  }

    .hero-toggle {
    display: flex;
    justify-content: flex-start; /* au lieu de center */
    margin-left: 0px!important;           /* ajustable : 8–16px */
  }

	.hero-toggle-track {
  position: relative;
  display: flex;
    align-items: center;
  justify-content: center;
  width: 320px;
  height: 48px;
  background: #f1f1f1;
  border-radius: 10px;
  padding: 4px;
  box-sizing: border-box;
  overflow: hidden;
  z-index: 1; /* base */
		 margin-left: -20px!important; 
}
}