/*=============================================================
  E.I.D — Custom Design Override v2
  Palette : Orange #f68c09 | Dark Navy #0d1b3e | Accent #00c0a3
=============================================================*/

/* ── Variables globales ── */
:root {
  --eid-orange:  #f68c09;
  --eid-orange2: #e07b00;
  --eid-navy:    #0d1b3e;
  --eid-navy2:   #162248;
  --eid-teal:    #00c0a3;
  --eid-light:   #f8f9ff;
  --eid-white:   #ffffff;
  --eid-gray:    #6c757d;
  --eid-text:    #2c2c2c;
  /* Hauteur du header : topbar (~34px) + main (113px) + marge sécurité = 160px */
  --header-h: 160px;
}
/* Sur mobile la topbar est masquée → seulement la barre principale */
@media (max-width: 991px) {
  :root { --header-h: 113px; }
}

/* ── Reset liens & typo ── */
body { color: var(--eid-text); scroll-padding-top: 130px; }
body:has(#navbar.navbar-mobile) { overflow: hidden; }
a { color: var(--eid-orange); }
a:hover { color: var(--eid-orange2); }

/* ============================================================
   HEADER / NAVBAR
============================================================ */

/* -- Structure globale -- */
.header {
  background: transparent;
  box-shadow: none;
  border: none;
  height: auto !important;
  padding: 0 !important;
}

/* -- Barre supérieure orange -- */
.header-topbar {
  background: var(--eid-orange);
  padding: 7px 0;
  transition: max-height .3s ease, padding .3s ease, opacity .3s ease;
  overflow: hidden;
  max-height: 60px;
  opacity: 1;
}
.topbar-contacts { display: flex; align-items: center; gap: 28px; }
.topbar-link {
  color: #fff;
  text-decoration: none;
  font-size: .78rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
  letter-spacing: .3px;
  transition: opacity .2s;
}
.topbar-link:hover { color: #fff; opacity: .8; }
.topbar-link i { font-size: .85rem; }
.topbar-socials { display: flex; align-items: center; gap: 4px; }
.topbar-social {
  color: #fff;
  font-size: .95rem;
  width: 28px; height: 28px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s;
  text-decoration: none;
}
.topbar-social:hover { background: rgba(255,255,255,.2); color: #fff; }

/* Cacher topbar au scroll */
.header-scrolled .header-topbar {
  max-height: 0;
  padding: 0;
  opacity: 0;
}

/* -- Barre principale navy -- */
.header-main {
  background: var(--eid-navy);
  padding: 10px 0;
  border-bottom: 3px solid var(--eid-orange);
  box-shadow: 0 4px 24px rgba(13,27,62,.45);
  transition: padding .3s ease;
}
.header-scrolled .header-main { padding: 6px 0; }

/* -- Logo -- */
.header .logo img {
  max-height: 90px !important;
  height: 90px !important;
  width: auto;
  transition: height .3s ease, max-height .3s ease;
}
.header-scrolled .logo img {
  max-height: 56px !important;
  height: 56px !important;
}

/* -- Liens nav -- */
.navbar a,
.navbar a:focus {
  color: rgba(255,255,255,.85) !important;
  font-weight: 600;
  letter-spacing: .4px;
  font-size: .88rem;
  transition: color .2s;
}
.navbar a:hover,
.navbar .active,
.navbar .active:focus,
.navbar li:hover > a {
  color: var(--eid-orange) !important;
}

/* -- Bouton CTA -- */
.navbar .getstarted,
.navbar .getstarted:focus {
  background: var(--eid-orange) !important;
  border: 2px solid var(--eid-orange) !important;
  color: #fff !important;
  border-radius: 50px !important;
  padding: 9px 22px !important;
  font-weight: 700 !important;
  letter-spacing: .4px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: all .3s ease;
}
.navbar .getstarted:hover {
  background: transparent !important;
  color: var(--eid-orange) !important;
}
.navbar .getstarted i { font-size: .9rem; }

/* -- Dropdown -- */
.navbar .dropdown ul {
  background: var(--eid-navy) !important;
  border-top: 3px solid var(--eid-orange) !important;
  border-radius: 0 0 12px 12px;
  box-shadow: 0 8px 30px rgba(0,0,0,.25) !important;
  min-width: 230px;
}
.navbar .dropdown ul a {
  color: rgba(255,255,255,.8) !important;
  font-size: .86rem;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 20px !important;
  border-left: 3px solid transparent;
  transition: all .2s;
}
.navbar .dropdown ul a i { color: var(--eid-orange); font-size: 1rem; flex-shrink: 0; }
.navbar .dropdown ul a:hover,
.navbar .dropdown ul li:hover > a {
  color: var(--eid-orange) !important;
  border-left-color: var(--eid-orange);
  background: rgba(255,255,255,.05) !important;
  padding-left: 26px !important;
}

/* ============================================================
   HAMBURGER
============================================================ */
.mobile-nav-toggle {
  display: none;
  color: #fff !important;
  font-size: 30px !important;
  cursor: pointer;
  line-height: 1;
  z-index: 9999;
  transition: color .2s;
}
.mobile-nav-toggle.bi-x { color: var(--eid-orange) !important; }

@media (max-width: 991px) {
  .mobile-nav-toggle { display: block; }
  .navbar ul { display: none; }
}

/* ============================================================
   MENU MOBILE — accordéon sous le header
============================================================ */
.navbar-mobile {
  /* Annule le comportement full-screen du template */
  position: fixed !important;
  top: var(--header-h, 160px) !important;
  left: 0 !important;
  right: 0 !important;
  bottom: auto !important;
  background: var(--eid-navy) !important;
  border-bottom: 3px solid var(--eid-orange) !important;
  box-shadow: 0 8px 30px rgba(0,0,0,.35) !important;
  z-index: 9990 !important;
  overflow: hidden !important;
  animation: eid-menu-drop .22s ease both !important;
}

@keyframes eid-menu-drop {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Retire le bouton × du toggle quand il se retrouve dans le menu */
.navbar-mobile .mobile-nav-toggle { display: none !important; }

/* Liste principale */
.navbar-mobile ul {
  display: block !important;
  position: static !important;
  background: transparent !important;
  width: 100% !important;
  padding: 6px 0 12px !important;
  margin: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  max-height: calc(100vh - 130px) !important;
  overflow-y: auto !important;
}

/* Liens */
.navbar-mobile a,
.navbar-mobile a:focus {
  color: rgba(255,255,255,.88) !important;
  font-size: .98rem !important;
  font-weight: 600 !important;
  padding: 14px 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
  border-left: 3px solid transparent !important;
  transition: all .15s ease !important;
}
.navbar-mobile a:hover,
.navbar-mobile .active,
.navbar-mobile li:hover > a {
  color: var(--eid-orange) !important;
  border-left-color: var(--eid-orange) !important;
  background: rgba(246,140,9,.06) !important;
}

/* Icône chevron du dropdown à droite */
.navbar-mobile a i.bi-chevron-down {
  font-size: 13px !important;
  opacity: .7;
  transition: transform .2s;
}

/* Bouton CTA */
.navbar-mobile .getstarted,
.navbar-mobile .getstarted:focus {
  margin: 14px 20px 4px !important;
  background: var(--eid-orange) !important;
  color: #fff !important;
  border-radius: 50px !important;
  border: none !important;
  border-left: none !important;
  justify-content: center !important;
  padding: 13px 20px !important;
  font-weight: 700 !important;
  font-size: .95rem !important;
  border-bottom: none !important;
}
.navbar-mobile .getstarted:hover { background: var(--eid-orange2) !important; }
.navbar-mobile .getstarted i { color: #fff !important; }

/* Sous-menu accordéon */
.navbar-mobile .dropdown ul {
  position: static !important;
  display: none !important;
  background: rgba(0,0,0,.18) !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 4px 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
  border-top: 1px solid rgba(255,255,255,.05) !important;
}
.navbar-mobile .dropdown ul a {
  padding: 11px 20px 11px 44px !important;
  font-size: .88rem !important;
  font-weight: 500 !important;
  color: rgba(255,255,255,.65) !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  border-left: 3px solid transparent !important;
}
.navbar-mobile .dropdown ul a i:not(.bi-chevron-down) { color: var(--eid-orange); flex-shrink: 0; }
.navbar-mobile .dropdown ul a:hover { color: var(--eid-orange) !important; border-left-color: var(--eid-orange) !important; }
.navbar-mobile .dropdown > .dropdown-active { display: block !important; }

/* Coordonnées dans le menu mobile */
.nav-mobile-contacts {
  display: none;
}
.navbar-mobile .nav-mobile-contacts {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid rgba(246,140,9,.3);
  background: rgba(246,140,9,.07);
  padding: 4px 0 8px;
}
.navbar-mobile .nav-mobile-contacts a {
  color: rgba(255,255,255,.75) !important;
  font-size: .85rem !important;
  font-weight: 500 !important;
  padding: 11px 24px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  border-bottom: 1px solid rgba(255,255,255,.05) !important;
  border-left: 3px solid transparent !important;
  transition: all .15s !important;
}
.navbar-mobile .nav-mobile-contacts a:hover {
  color: var(--eid-orange) !important;
  border-left-color: var(--eid-orange) !important;
}
.navbar-mobile .nav-mobile-contacts a i {
  color: var(--eid-orange);
  font-size: .9rem;
  flex-shrink: 0;
}

/* Masquer topbar en mobile */
@media (max-width: 991px) {
  .header-topbar { display: none; }
}

/* ============================================================
   HERO
============================================================ */
.hero {
  background: linear-gradient(135deg, var(--eid-navy) 0%, #1b3a8a 60%, #162248 100%) !important;
  /* Annule style.css height:100vh → le contenu ne peut plus déborder au-dessus du padding */
  height: auto !important;
  min-height: 100vh;
  /* align-items:flex-start force le contenu à partir du bas du padding, jamais sous la navbar */
  align-items: flex-start !important;
  padding-top: var(--header-h, 160px) !important;
  padding-bottom: 80px;
  position: relative;
  overflow: hidden;
  margin-top: 16px;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('../img/hero-bg.png') center/cover no-repeat;
  opacity: .07;
  pointer-events: none;
}

/* Colonne texte : respiration verticale — compense le passage à align-items:flex-start */
.hero .col-lg-6:first-child {
  padding-top: 60px;
  padding-bottom: 60px;
}
.hero .row { width: 100%; }

.hero h1 {
  color: #ffffff !important;
  font-size: 2.8rem;
  font-weight: 800;
  line-height: 1.25;
  margin-top: 18px;
  margin-bottom: 0;
  text-shadow: 0 2px 10px rgba(0,0,0,.3);
}
.hero h2 {
  color: rgba(255,255,255,.75) !important;
  font-size: 1.05rem;
  font-weight: 400;
  margin-top: 20px;
  margin-bottom: 0;
  line-height: 1.8;
}

.btn-get-started,
.hero .btn-get-started {
  background: var(--eid-orange) !important;
  border: none;
  border-radius: 50px !important;
  padding: 14px 36px !important;
  font-weight: 700;
  font-size: 1rem;
  color: #fff !important;
  box-shadow: 0 8px 30px rgba(246,140,9,.4);
  transition: all .3s ease;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.btn-get-started:hover,
.hero .btn-get-started:hover {
  background: var(--eid-orange2) !important;
  transform: translateY(-2px);
  box-shadow: 0 12px 35px rgba(246,140,9,.5);
}
.hero .btn-get-started i {
  margin-left: 8px;
}


/* ============================================================
   ABOUT
============================================================ */
#about { background: var(--eid-light); padding: 80px 0; }
/* Annule le box-in-box de style.css (.about .content { background-color:#f6f9ff; padding:40px }) */
#about .content { background: transparent !important; padding: 0 !important; }
#about .content h3 {
  font-weight: 700;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  color: var(--eid-orange);
  margin-bottom: 10px;
}
#about .content h2 {
  font-weight: 900;
  color: var(--eid-navy);
  font-size: 1.75rem;
  line-height: 1.3;
  margin-bottom: 16px;
}
#about .content p { color: #555; line-height: 1.85; font-size: .95rem; }

.btn-read-more {
  background: var(--eid-orange) !important;
  color: #fff !important;
  border-radius: 50px !important;
  padding: 12px 32px !important;
  font-weight: 700;
  border: 2px solid var(--eid-orange) !important;
  transition: all .3s;
}
.btn-read-more:hover {
  background: transparent !important;
  color: var(--eid-orange) !important;
}

/* ============================================================
   VALUES
============================================================ */
#values { background: #fff; }
#values .box {
  border: 2px solid #eef !important;
  border-radius: 16px !important;
  padding: 30px 24px !important;
  transition: all .35s ease;
  box-shadow: 0 4px 20px rgba(0,0,0,.05);
}
#values .box:hover {
  border-color: var(--eid-orange) !important;
  box-shadow: 0 12px 40px rgba(246,140,9,.15) !important;
  transform: translateY(-6px);
}
#values .box h3 {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--eid-navy);
  margin-top: 16px;
}
#values .box p { color: #666; font-size: .9rem; }

/* ============================================================
   COUNTS
============================================================ */
#counts {
  background: linear-gradient(135deg, var(--eid-navy) 0%, #1a3580 60%, var(--eid-navy2) 100%);
  padding: 70px 0;
  position: relative;
  overflow: hidden;
}
#counts::before {
  content: '';
  position: absolute;
  top: -60px; right: -60px;
  width: 280px; height: 280px;
  border-radius: 50%;
  background: rgba(246,140,9,.06);
  pointer-events: none;
}
/* Annule style.css : .counts .count-box { background: #fff } → nos chiffres blancs seraient invisibles */
.counts .count-box,
.count-box {
  display: flex !important;
  align-items: center !important;
  gap: 22px !important;
  background: rgba(255,255,255,.07) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 16px !important;
  padding: 28px 24px !important;
  backdrop-filter: blur(4px);
  transition: transform .3s, box-shadow .3s;
}
.counts .count-box:hover,
.count-box:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 36px rgba(0,0,0,.25) !important;
  background: rgba(255,255,255,.11) !important;
}
.count-box i {
  font-size: 2.4rem !important;
  color: var(--eid-orange) !important;
  flex-shrink: 0;
  line-height: 1 !important;
}
.count-box span {
  color: #fff !important;
  font-size: 2.5rem !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  display: block;
}
.count-box p {
  color: rgba(255,255,255,.7) !important;
  font-size: .85rem !important;
  margin: 4px 0 0 !important;
  padding: 0 !important;
  font-weight: 500;
}

/* ============================================================
   FEATURES
============================================================ */
#features { background: var(--eid-light); }
.feature-box {
  border: 2px solid #e8e8f0;
  border-radius: 12px;
  padding: 16px 20px;
  transition: all .3s;
}
.feature-box:hover {
  border-color: var(--eid-orange);
  background: rgba(246,140,9,.05);
}
.feature-box i {
  color: var(--eid-orange) !important;
  font-size: 1.4rem;
  margin-right: 10px;
}
.feature-box h3 { font-size: .9rem; font-weight: 700; color: var(--eid-navy); margin: 0; }

/* Feature tabs */
.feture-tabs .nav-pills .nav-link {
  background: #eee;
  color: var(--eid-navy);
  border-radius: 50px;
  font-weight: 600;
  font-size: .85rem;
  padding: 8px 20px;
}
.feture-tabs .nav-pills .nav-link.active {
  background: var(--eid-orange) !important;
  color: #fff;
}
.feture-tabs h3 { color: var(--eid-navy); font-weight: 800; font-size: 1.4rem; }
.feture-tabs .tab-content p { color: #666; line-height: 1.8; }
.feture-tabs .tab-content h4 { font-size: .95rem; font-weight: 700; color: var(--eid-navy); }
.feture-tabs .tab-content i { color: var(--eid-orange); }

/* Feature icons */
.feature-icons h3 { color: var(--eid-navy); font-weight: 800; font-size: 1.6rem; margin-bottom: 30px; }
.icon-box {
  padding: 20px;
  border-radius: 12px;
  border: 1px solid #eee;
  transition: all .3s;
}
.icon-box:hover { box-shadow: 0 8px 30px rgba(0,0,0,.08); border-color: var(--eid-orange); }
.icon-box i { color: var(--eid-orange) !important; font-size: 2rem; }
.icon-box h4 { font-size: .95rem; font-weight: 700; color: var(--eid-navy); }
.icon-box p { color: #666; font-size: .85rem; }

/* ============================================================
   SERVICES
============================================================ */
#services { background: #fff; }
.service-box {
  padding: 30px 24px !important;
  border-radius: 16px !important;
  transition: all .35s ease !important;
  border: 2px solid transparent !important;
  position: relative;
  overflow: hidden;
}
.service-box::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 4px;
  height: 100%;
  transition: width .3s;
  pointer-events: none; /* ne bloque pas les clics sur le contenu */
}
.service-box:hover::before { width: 100%; opacity: .05; }
.service-box:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 20px 50px rgba(0,0,0,.12) !important;
}
.service-box h3 { font-weight: 800; font-size: 1.1rem; color: var(--eid-navy); margin: 16px 0 10px; }
.service-box p { font-size: .88rem; color: #666; line-height: 1.7; }
.service-box .read-more {
  font-weight: 700;
  font-size: .85rem;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  margin-top: 10px;
  position: relative; /* passe au-dessus du ::before décoratif */
  z-index: 1;
}
.service-box.blue   { background: #e8f4fd; border-color: #b8daff !important; }
.service-box.blue   .icon { color: #0d6efd; }
.service-box.blue   h3, .service-box.blue .read-more { color: #0a58ca; }
.service-box.orange { background: #fff4e5; border-color: #ffd699 !important; }
.service-box.orange .icon { color: var(--eid-orange); }
.service-box.orange h3, .service-box.orange .read-more { color: #b56b00; }
.service-box.green  { background: #e8f8f0; border-color: #b2dfcc !important; }
.service-box.green  .icon { color: #198754; }
.service-box.green  h3, .service-box.green .read-more { color: #146c43; }
.service-box.red    { background: #fdecea; border-color: #f5c6c2 !important; }
.service-box.red    .icon { color: #dc3545; }
.service-box.red    h3, .service-box.red .read-more { color: #b02a37; }
.service-box.purple { background: #f0ebff; border-color: #d0b8ff !important; }
.service-box.purple .icon { color: #7c3aed; }
.service-box.purple h3, .service-box.purple .read-more { color: #6d28d9; }
.service-box.pink   { background: #fde8f3; border-color: #f8b8dc !important; }
.service-box.pink   .icon { color: #e91e8c; }
.service-box.pink   h3, .service-box.pink .read-more { color: #c51674; }
.service-box .icon { font-size: 2.2rem; }

/* ============================================================
   PRICING
============================================================ */
#pricing { background: var(--eid-light); }
#pricing .box {
  border-radius: 20px !important;
  border: 2px solid #e8e8f0 !important;
  padding: 30px 24px !important;
  transition: all .35s;
  background: #fff;
}
#pricing .box:hover {
  border-color: var(--eid-orange) !important;
  transform: translateY(-8px);
  box-shadow: 0 20px 50px rgba(246,140,9,.15);
}
#pricing .box .price {
  font-size: 2.2rem;
  font-weight: 900;
  color: var(--eid-navy);
}
#pricing .box .price sup { font-size: .9rem; font-weight: 700; color: var(--eid-orange); }
#pricing .box .price span { font-size: .85rem; font-weight: 500; color: #888; }
#pricing .box ul li {
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
  font-size: .9rem;
  color: #555;
}
.btn-buy {
  background: var(--eid-orange) !important;
  color: #fff !important;
  border-radius: 50px !important;
  border: 2px solid var(--eid-orange) !important;
  padding: 10px 30px !important;
  font-weight: 700;
  display: block;
  text-align: center;
  margin-top: 20px;
  transition: all .3s;
}
.btn-buy:hover {
  background: transparent !important;
  color: var(--eid-orange) !important;
}
#pricing .featured {
  background: var(--eid-orange) !important;
  border-radius: 50px;
  padding: 4px 16px;
  font-size: .75rem;
  font-weight: 700;
  color: #fff;
}

/* ============================================================
   FAQ
============================================================ */
#faq { background: #fff; }
#faq .accordion-button {
  font-weight: 700;
  color: var(--eid-navy);
  font-size: .95rem;
}
#faq .accordion-button:not(.collapsed) {
  color: var(--eid-orange);
  background: rgba(246,140,9,.06);
  box-shadow: none;
}
#faq .accordion-button::after {
  filter: hue-rotate(200deg);
}
#faq .accordion-button:not(.collapsed)::after {
  filter: none;
}
#faq .accordion-item {
  border: 1px solid #e8e8f0;
  border-radius: 10px !important;
  margin-bottom: 10px;
  overflow: hidden;
}
#faq .accordion-body {
  color: #666;
  font-size: .9rem;
  line-height: 1.8;
  background: rgba(246,140,9,.03);
}

/* ============================================================
   PORTFOLIO
============================================================ */
#portfolio { background: var(--eid-light); }
#portfolio-flters li {
  cursor: pointer;
  padding: 8px 24px;
  border-radius: 50px;
  font-weight: 600;
  font-size: .85rem;
  border: 2px solid #ddd;
  color: #555;
  transition: all .3s;
}
#portfolio-flters li:hover,
#portfolio-flters li.filter-active {
  background: var(--eid-orange) !important;
  border-color: var(--eid-orange) !important;
  color: #fff !important;
}
.portfolio-wrap { border-radius: 12px; overflow: hidden; }
.portfolio-wrap .portfolio-info {
  background: linear-gradient(0deg, rgba(13,27,62,.9) 0%, transparent 100%);
}
.portfolio-wrap .portfolio-info h4 { color: #fff; font-weight: 700; }
.portfolio-wrap .portfolio-info p { color: var(--eid-orange); font-size: .82rem; font-weight: 600; }
.portfolio-wrap .portfolio-links a {
  background: var(--eid-orange);
  border-radius: 50%;
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  transition: all .3s;
}
.portfolio-wrap .portfolio-links a:hover { background: var(--eid-orange2); }

/* ============================================================
   TESTIMONIALS
============================================================ */
#testimonials {
  background: linear-gradient(135deg, var(--eid-navy) 0%, #1b3a8a 100%);
}
#testimonials .section-header h2 { color: rgba(255,255,255,.6) !important; }
#testimonials .section-header p { color: #fff !important; }
#testimonials .section-header p::after { background: var(--eid-orange); }
.testimonial-item {
  background: rgba(255,255,255,.07) !important;
  border: 1px solid rgba(255,255,255,.15) !important;
  border-radius: 16px !important;
  padding: 30px !important;
  backdrop-filter: blur(10px);
  transition: all .3s;
}
.testimonial-item:hover {
  background: rgba(255,255,255,.12) !important;
  transform: translateY(-4px);
}
.testimonial-item p { color: rgba(255,255,255,.85) !important; font-size: .95rem; line-height: 1.8; }
.testimonial-item h3 { color: #fff !important; font-weight: 700; }
.testimonial-item h4 { color: var(--eid-orange) !important; font-size: .82rem; }
.testimonial-item .stars i { color: var(--eid-orange) !important; }
.testimonial-item .testimonial-img {
  border: 3px solid var(--eid-orange) !important;
  border-radius: 50%;
  width: 56px; height: 56px;
}
.testimonials-slider .swiper-pagination-bullet-active {
  background: var(--eid-orange) !important;
}

/* ============================================================
   CLIENTS
============================================================ */
#clients { background: #fff; }
.clients-slider .swiper-pagination-bullet-active { background: var(--eid-orange) !important; }

/* ============================================================
   BLOG
============================================================ */
#recent-blog-posts { background: var(--eid-light); }
.post-box {
  border-radius: 16px !important;
  border: 2px solid #eee !important;
  overflow: hidden;
  transition: all .35s;
  background: #fff;
  height: 100%;
}
.post-box:hover {
  border-color: var(--eid-orange) !important;
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(0,0,0,.1);
}
.post-box .post-img img { transition: transform .4s; }
.post-box:hover .post-img img { transform: scale(1.05); }
.post-box .post-date {
  background: var(--eid-orange);
  color: #fff;
  font-size: .75rem;
  font-weight: 700;
  padding: 4px 14px;
  border-radius: 50px;
  display: inline-block;
  margin: 16px 16px 8px;
}
.post-box .post-title {
  color: var(--eid-navy);
  font-size: 1rem;
  font-weight: 700;
  padding: 0 16px;
  line-height: 1.5;
}
.readmore {
  color: var(--eid-orange) !important;
  font-weight: 700;
  font-size: .85rem;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ============================================================
   CONTACT
============================================================ */
#contact { background: #fff; }
.info-box {
  border-radius: 16px !important;
  border: 2px solid #eee !important;
  transition: all .3s;
}
.info-box:hover {
  border-color: var(--eid-orange) !important;
  box-shadow: 0 8px 30px rgba(246,140,9,.12);
}
.info-box i { color: var(--eid-orange) !important; }
.info-box h3 { color: var(--eid-navy) !important; font-weight: 700; }
.info-box p { color: #666 !important; }

.php-email-form .form-control {
  border: 2px solid #e8e8f0;
  border-radius: 10px;
  padding: 12px 16px;
  font-size: .9rem;
  transition: border-color .3s;
}
.php-email-form .form-control:focus {
  border-color: var(--eid-orange);
  box-shadow: 0 0 0 3px rgba(246,140,9,.15);
}
.php-email-form button[type=submit] {
  background: var(--eid-orange);
  color: #fff;
  border: 2px solid var(--eid-orange);
  border-radius: 50px;
  padding: 12px 40px;
  font-weight: 700;
  font-size: .95rem;
  transition: all .3s;
  cursor: pointer;
}
.php-email-form button[type=submit]:hover {
  background: transparent;
  color: var(--eid-orange);
}

/* ============================================================
   FOOTER
   Annule les fonds clairs de style.css :
   .footer { background:#f6f9ff }
   .footer .footer-top { background: white url(...) }
   .footer .copyright { color:#012970 }
============================================================ */
.footer,
.footer .footer-top,
.footer .footer-newsletter {
  background: var(--eid-navy) !important;
  color: rgba(255,255,255,.75) !important;
  border-top: none !important;
  border-bottom: none !important;
}
.footer .footer-newsletter {
  background: var(--eid-navy2) !important;
  padding: 40px 0 !important;
  border-top: 1px solid rgba(255,255,255,.08) !important;
}

/* Newsletter — formulaire */
.footer-newsletter h4  { color: #fff !important; font-weight: 800 !important; font-size: 1.2rem !important; }
.footer-newsletter p   { color: rgba(255,255,255,.7) !important; font-size: .9rem; }
.footer-newsletter form {
  background: rgba(255,255,255,.07) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  border-radius: 50px !important;
  padding: 4px !important;
  overflow: hidden;
}
.footer-newsletter form input[type=email] {
  background: transparent !important;
  border: none !important;
  color: #fff !important;
  padding: 10px 20px !important;
  border-radius: 50px 0 0 50px !important;
  width: calc(100% - 140px) !important;
}
.footer-newsletter form input[type=email]::placeholder { color: rgba(255,255,255,.45) !important; }
.footer-newsletter form input[type=submit] {
  background: var(--eid-orange) !important;
  border: none !important;
  border-radius: 50px !important;
  padding: 10px 28px !important;
  font-weight: 700 !important;
  color: #fff !important;
  transition: background .3s;
}
.footer-newsletter form input[type=submit]:hover { background: var(--eid-orange2) !important; }

/* Footer top — colonnes */
.footer-top { padding: 55px 0 30px !important; }

/* Logo dans footer */
.footer .logo span { color: var(--eid-orange) !important; font-weight: 800; margin-left: 8px; }
.footer .logo img  { height: 42px !important; }

/* Texte descriptif colonne 1 */
.footer-info p,
.footer .footer-top .footer-info p {
  color: rgba(255,255,255,.6) !important;
  font-size: .88rem !important;
  line-height: 1.85 !important;
}

/* Titres h4 des colonnes */
.footer-links h4,
.footer-contact h4,
.footer .footer-top h4 {
  color: #fff !important;
  font-weight: 800 !important;
  font-size: .95rem !important;
  margin-bottom: 18px !important;
  position: relative !important;
  padding-bottom: 10px !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
}
.footer-links h4::after,
.footer-contact h4::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important; left: 0 !important;
  width: 30px !important; height: 3px !important;
  background: var(--eid-orange) !important;
  border-radius: 2px !important;
}

/* Liens des colonnes */
.footer-links ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.footer-links ul li { margin-bottom: 10px !important; }
.footer-links ul a,
.footer .footer-top .footer-links ul a {
  color: rgba(255,255,255,.6) !important;
  font-size: .88rem !important;
  transition: color .25s, padding-left .25s !important;
  text-decoration: none !important;
}
.footer-links ul a:hover,
.footer .footer-top .footer-links ul a:hover {
  color: var(--eid-orange) !important;
  padding-left: 6px !important;
}
.footer-links ul i,
.footer .footer-top .footer-links ul i { color: var(--eid-orange) !important; margin-right: 6px !important; font-size: .8rem !important; }

/* Colonne contact */
.footer-contact p,
.footer .footer-top .footer-contact p {
  color: rgba(255,255,255,.6) !important;
  font-size: .88rem !important;
  line-height: 2 !important;
}
.footer-contact p strong { color: var(--eid-orange) !important; }
.footer-contact a        { color: rgba(255,255,255,.6) !important; text-decoration: none; }
.footer-contact a:hover  { color: var(--eid-orange) !important; }

/* Réseaux sociaux — nouvelle classe .footer-socials (évite conflits style.css) */
.footer-socials {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}
.footer-socials a {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255,255,255,.1) !important;
  color: #fff !important;
  font-size: 1rem !important;
  line-height: 1 !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  transition: background .28s, transform .28s, border-color .28s !important;
  text-decoration: none !important;
}
.footer-socials a:hover {
  transform: translateY(-4px) !important;
  color: #fff !important;
}
/* Couleurs de marque au survol */
.footer-socials .fsoc-fb:hover  { background: #1877f2 !important; border-color: #1877f2 !important; }
.footer-socials .fsoc-ig:hover  { background: linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888) !important; border-color: #e6683c !important; }
.footer-socials .fsoc-li:hover  { background: #0a66c2 !important; border-color: #0a66c2 !important; }
.footer-socials .fsoc-wa:hover  { background: #25d366 !important; border-color: #25d366 !important; }
.footer-socials .fsoc-yt:hover  { background: #ff0000 !important; border-color: #ff0000 !important; }

/* Barre de copyright */
.footer .copyright,
.footer .footer-top + .container .copyright {
  border-top: 1px solid rgba(255,255,255,.09) !important;
  padding: 22px 0 !important;
  text-align: center !important;
  color: rgba(255,255,255,.45) !important;
  font-size: .82rem !important;
  background: transparent !important;
}
.footer .copyright strong { color: var(--eid-orange) !important; }

/* ============================================================
   BACK TO TOP
============================================================ */
.back-to-top {
  background: var(--eid-orange) !important;
  border-radius: 50% !important;
  width: 44px; height: 44px;
  box-shadow: 0 4px 16px rgba(246,140,9,.4);
  transition: all .3s;
}
.back-to-top:hover {
  background: var(--eid-orange2) !important;
  transform: translateY(-3px);
}

/* ============================================================
   BREADCRUMBS
============================================================ */
.breadcrumbs {
  background: linear-gradient(135deg, var(--eid-navy), #1b3a8a) !important;
}
.breadcrumbs ol a { color: var(--eid-orange); }

/* ============================================================
   HERO — BADGE + DUAL CTA + STATS
============================================================ */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(246,140,9,.15);
  border: 1px solid rgba(246,140,9,.4);
  color: var(--eid-orange);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  padding: 8px 20px;
  border-radius: 50px;
  margin-bottom: 0;
}
.hero-badge i { font-size: .9rem; }

.hero h1 span.highlight {
  color: var(--eid-orange);
  position: relative;
}

.hero-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 36px;
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 2px solid rgba(255,255,255,.35);
  color: rgba(255,255,255,.88) !important;
  border-radius: 50px;
  padding: 14px 32px;
  font-weight: 700;
  font-size: .95rem;
  transition: all .3s;
  text-decoration: none;
}
.btn-ghost:hover {
  border-color: var(--eid-orange);
  color: var(--eid-orange) !important;
  background: rgba(246,140,9,.08);
}

.hero-stats {
  display: flex;
  gap: 36px;
  margin-top: 52px;
  padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,.12);
}
.hero-stats .stat-item { text-align: left; }
.hero-stats .stat-number {
  display: block;
  font-size: 2rem;
  font-weight: 900;
  color: var(--eid-orange);
  line-height: 1;
}
.hero-stats .stat-label {
  font-size: .72rem;
  color: rgba(255,255,255,.55);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin-top: 6px;
}
.hero-stats .stat-divider {
  width: 1px;
  background: rgba(255,255,255,.12);
  align-self: stretch;
}

/* ============================================================
   ABOUT — AMÉLIORÉ
============================================================ */
#about .check-list {
  list-style: none;
  padding: 0;
  margin: 20px 0;
}
#about .check-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
  font-size: .92rem;
  color: #555;
  line-height: 1.6;
}
#about .check-list li i {
  color: var(--eid-orange);
  font-size: 1.2rem;
  flex-shrink: 0;
  margin-top: 2px;
}
#about .about-img-wrap {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
}
#about .about-img-wrap img {
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(13,27,62,.2);
}
#about .about-badge {
  position: absolute;
  bottom: 28px;
  left: -20px;
  background: var(--eid-orange);
  color: #fff;
  padding: 16px 24px;
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(246,140,9,.4);
  text-align: center;
}
#about .about-badge strong { display: block; font-size: 2rem; font-weight: 900; line-height: 1; }
#about .about-badge span { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; }

/* ============================================================
   PRICING — ICÔNES AMÉLIORÉES
============================================================ */
.pricing-icon-wrap {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--p-color) 15%, transparent);
  border: 2px solid color-mix(in srgb, var(--p-color) 30%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  transition: all .35s;
}
.pricing-box:hover .pricing-icon-wrap {
  background: var(--p-color);
  border-color: var(--p-color);
  transform: scale(1.1) rotate(-5deg);
  box-shadow: 0 10px 30px color-mix(in srgb, var(--p-color) 35%, transparent);
}
.pricing-icon-wrap i {
  font-size: 1.9rem;
  color: var(--p-color);
  transition: color .3s;
}
.pricing-box:hover .pricing-icon-wrap i { color: #fff; }

/* Items de liste avec check */
#pricing .box ul li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 0;
  border-bottom: 1px solid #f0f0f0;
  font-size: .88rem;
  color: #555;
}
#pricing .box ul li i {
  color: var(--eid-teal);
  font-size: 1rem;
  flex-shrink: 0;
  font-weight: 900;
}

/* ============================================================
   NOTRE APPROCHE — REDESIGN PREMIUM
============================================================ */
.approche {
  background: linear-gradient(145deg, var(--eid-navy) 0%, #162870 55%, var(--eid-navy2) 100%) !important;
  padding: 90px 0 !important;
  position: relative;
  overflow: hidden;
}
/* Cercles décoratifs en arrière-plan */
.approche::before,
.approche::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.approche::before {
  width: 500px; height: 500px;
  top: -180px; right: -120px;
  background: radial-gradient(circle, rgba(246,140,9,.07) 0%, transparent 70%);
}
.approche::after {
  width: 350px; height: 350px;
  bottom: -120px; left: -80px;
  background: radial-gradient(circle, rgba(0,192,163,.05) 0%, transparent 70%);
}

/* Section header sur fond sombre */
.approche .section-header h2 { color: rgba(255,255,255,.45) !important; }
.approche .section-header p  { color: #fff !important; }
.approche .section-header p::after { background: var(--eid-orange) !important; }

/* Row : position relative pour la ligne de connexion */
.approche .steps-row {
  position: relative;
  align-items: flex-start !important;
}

/* Ligne de connexion entre les badges (desktop) */
.approche .steps-row::before {
  content: '';
  position: absolute;
  top: 22px; /* centre du badge numéro (hauteur 44px / 2) */
  left: calc(12.5% + 22px); /* bord droit du 1er badge */
  width: calc(75% - 44px);  /* traverse les 3 arrows */
  height: 2px;
  background: linear-gradient(90deg,
    rgba(246,140,9,.6),
    rgba(246,140,9,.3) 50%,
    rgba(246,140,9,.6)
  );
  z-index: 0;
}
@media (max-width: 991px) {
  .approche .steps-row::before { display: none; }
}

/* Carte étape */
.approche-card {
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  border-radius: 22px !important;
  padding: 50px 24px 36px !important;
  height: 100% !important;
  text-align: center;
  transition: all .38s ease;
  position: relative;
  z-index: 1;
  backdrop-filter: blur(8px);
}
.approche-card:hover {
  background: rgba(255,255,255,.1) !important;
  border-color: rgba(246,140,9,.5) !important;
  transform: translateY(-10px) !important;
  box-shadow: 0 28px 64px rgba(0,0,0,.35) !important;
}

/* Badge numéro — cercle orange */
.approche-number {
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--eid-orange);
  color: #fff;
  width: 44px; height: 44px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .8rem;
  font-weight: 900;
  letter-spacing: 0;
  padding: 0;
  box-shadow: 0 4px 18px rgba(246,140,9,.55);
  border: 3px solid rgba(255,255,255,.18);
  z-index: 2;
}

/* Icône */
.approche-icon {
  width: 76px; height: 76px;
  background: rgba(246,140,9,.12) !important;
  border: 2px solid rgba(246,140,9,.28) !important;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 14px auto 22px;
  transition: all .35s;
}
.approche-card:hover .approche-icon {
  background: var(--eid-orange) !important;
  border-color: var(--eid-orange) !important;
  box-shadow: 0 8px 26px rgba(246,140,9,.45);
}
.approche-icon i {
  font-size: 1.9rem;
  color: var(--eid-orange);
  transition: color .3s;
}
.approche-card:hover .approche-icon i { color: #fff; }

/* Titre et texte */
.approche-card h4 {
  font-size: 1.05rem;
  font-weight: 800;
  color: #fff !important;
  margin-bottom: 12px;
  line-height: 1.3;
}
.approche-card p {
  font-size: .85rem;
  color: rgba(255,255,255,.62) !important;
  line-height: 1.82;
  margin: 0;
}

/* Flèche de connexion */
.approche-arrow {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  padding-top: 16px !important; /* aligne avec le badge */
  color: rgba(246,140,9,.55) !important;
  font-size: 1.6rem !important;
  flex: 0 0 auto;
  z-index: 1;
}

/* ============================================================
   PAGE SERVICE — HERO BANNER
============================================================ */
.service-page-hero {
  background: linear-gradient(135deg, var(--eid-navy) 0%, #1b3a8a 100%);
  padding: calc(var(--header-h, 160px) + 40px) 0 60px;
  text-align: center;
  margin-bottom: 0;
}
.service-page-hero h1 {
  color: #fff;
  font-size: 2.5rem;
  font-weight: 900;
  margin-bottom: 16px;
}
.service-page-hero h1 span { color: var(--eid-orange); }
.service-page-hero p {
  color: rgba(255,255,255,.75);
  font-size: 1.05rem;
  max-width: 600px;
  margin: 0 auto 24px;
  line-height: 1.8;
}
.service-page-hero .breadcrumb-nav {
  display: flex;
  justify-content: center;
  gap: 8px;
  font-size: .85rem;
  color: rgba(255,255,255,.5);
  margin-bottom: 30px;
}
.service-page-hero .breadcrumb-nav a { color: var(--eid-orange); text-decoration: none; }
.service-page-hero .breadcrumb-nav a:hover { text-decoration: underline; }

/* ============================================================
   PAGE SERVICE — CARTES OFFRES
============================================================ */
.offer-card {
  background: #fff;
  border: 2px solid #eef0f8;
  border-radius: 20px;
  padding: 36px 28px;
  height: 100%;
  transition: all .35s;
  position: relative;
  overflow: hidden;
}
.offer-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--eid-orange);
  transform: scaleX(0);
  transition: transform .35s;
}
.offer-card:hover { border-color: var(--eid-orange); transform: translateY(-8px); box-shadow: 0 20px 50px rgba(13,27,62,.12); }
.offer-card:hover::before { transform: scaleX(1); }
.offer-card .offer-icon {
  width: 64px; height: 64px;
  background: rgba(246,140,9,.12);
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px;
  transition: all .3s;
}
.offer-card:hover .offer-icon { background: var(--eid-orange); }
.offer-card .offer-icon i {
  font-size: 1.8rem;
  color: var(--eid-orange);
  transition: color .3s;
}
.offer-card:hover .offer-icon i { color: #fff; }
.offer-card h3 { font-size: 1.2rem; font-weight: 800; color: var(--eid-navy); margin-bottom: 12px; }
.offer-card p { font-size: .88rem; color: #666; line-height: 1.8; margin-bottom: 20px; }
.offer-card ul {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  border-top: 1px solid #f0f0f0;
  padding-top: 16px;
}
.offer-card ul li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .85rem;
  color: #555;
  margin-bottom: 8px;
}
.offer-card ul li i { color: var(--eid-teal); font-size: 1rem; }
.offer-card .offer-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--eid-orange);
  color: #fff;
  border-radius: 50px;
  padding: 10px 28px;
  font-weight: 700;
  font-size: .88rem;
  text-decoration: none;
  transition: all .3s;
  border: 2px solid var(--eid-orange);
}
.offer-card .offer-btn:hover { background: transparent; color: var(--eid-orange); }

/* ============================================================
   PAGE SERVICE — FORMULAIRE DEVIS
============================================================ */
.devis-section {
  background: var(--eid-light);
  padding: 70px 0;
}
.devis-section .devis-card {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 10px 50px rgba(13,27,62,.1);
  overflow: hidden;
}
.devis-left {
  background: linear-gradient(135deg, var(--eid-navy), #1b3a8a);
  padding: 50px 40px;
  color: #fff;
}
.devis-left h2 { font-size: 1.8rem; font-weight: 900; margin-bottom: 12px; }
.devis-left h2 span { color: var(--eid-orange); }
.devis-left p { color: rgba(255,255,255,.75); line-height: 1.8; margin-bottom: 30px; }
.devis-left .devis-features { list-style: none; padding: 0; }
.devis-left .devis-features li {
  display: flex; align-items: center; gap: 10px;
  color: rgba(255,255,255,.85);
  margin-bottom: 12px;
  font-size: .9rem;
}
.devis-left .devis-features li i { color: var(--eid-orange); font-size: 1.1rem; }
.devis-right { padding: 50px 40px; }
.devis-right h3 { color: var(--eid-navy); font-weight: 800; margin-bottom: 24px; font-size: 1.3rem; }

.devis-form .form-group { margin-bottom: 18px; }
.devis-form .form-label { font-size: .85rem; font-weight: 700; color: var(--eid-navy); margin-bottom: 6px; }
.devis-form .form-control,
.devis-form .form-select {
  border: 2px solid #e8e8f0;
  border-radius: 10px;
  padding: 12px 16px;
  font-size: .9rem;
  transition: border-color .3s;
}
.devis-form .form-control:focus,
.devis-form .form-select:focus {
  border-color: var(--eid-orange);
  box-shadow: 0 0 0 3px rgba(246,140,9,.15);
}
.devis-form .btn-submit {
  background: var(--eid-orange);
  color: #fff;
  border: 2px solid var(--eid-orange);
  border-radius: 50px;
  padding: 14px 40px;
  font-weight: 800;
  font-size: 1rem;
  width: 100%;
  transition: all .3s;
  cursor: pointer;
}
.devis-form .btn-submit:hover { background: transparent; color: var(--eid-orange); }
.devis-form .form-check-label { font-size: .82rem; color: #666; }
.devis-form .form-check-label a { color: var(--eid-orange); }

/* ============================================================
   AMÉLIORATIONS VISUELLES GLOBALES
============================================================ */

/* — Section header : sous-titre orange + titre en gras + ligne décorative — */
.section-header {
  text-align: center;
  padding-bottom: 50px !important;
}
.section-header h2 {
  font-size: .78rem !important;
  font-weight: 800 !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  color: var(--eid-orange) !important;
  margin-bottom: 10px !important;
}
.section-header p {
  font-size: 2rem !important;
  font-weight: 900 !important;
  color: var(--eid-navy) !important;
  margin: 0 auto !important;
  max-width: 600px;
  line-height: 1.25 !important;
  position: relative !important;
  padding-bottom: 20px !important;
}
.section-header p::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 50px !important;
  height: 3px !important;
  background: var(--eid-orange) !important;
  border-radius: 2px !important;
}

/* — Padding uniforme pour toutes les sections — */
.about,
#services,
#pricing,
#faq,
#contact { padding-top: 80px !important; padding-bottom: 80px !important; }
#counts { padding-top: 70px !important; padding-bottom: 70px !important; }

/* — Services : carte d'icône plus grande et ombre de section — */
#services .section-header { margin-bottom: 0; }
.service-box .icon { font-size: 2.5rem !important; }
.service-box {
  box-shadow: 0 2px 16px rgba(0,0,0,.05) !important;
}

/* — Pricing : carte "featured" plus proéminente — */
#pricing .box.featured-card,
#pricing .box:has(.featured) {
  border-color: var(--eid-orange) !important;
  box-shadow: 0 8px 40px rgba(246,140,9,.18) !important;
  transform: translateY(-8px);
}
#pricing .featured {
  display: inline-block !important;
  margin-bottom: 16px !important;
}
#pricing .box h3 {
  font-weight: 800 !important;
  font-size: 1rem !important;
}
#pricing .box .price {
  font-size: 2rem !important;
  line-height: 1.2;
  margin: 12px 0;
}

/* — FAQ : accordéon + espace inter-item — */
#faq { background: #fff !important; }
#faq .accordion-item { margin-bottom: 14px !important; }
#faq .accordion-button { padding: 18px 20px !important; }
#faq .accordion-body { padding: 16px 20px 20px !important; }

/* — Contact : info-box avec padding confortable — */
#contact { background: #fff !important; }
.info-box {
  padding: 30px 24px !important;
  text-align: center;
  height: 100%;
}
.info-box i { font-size: 2rem !important; margin-bottom: 14px !important; display: block !important; }
.info-box h3 { font-size: 1rem !important; margin-bottom: 8px !important; }
.info-box p { font-size: .9rem !important; margin: 0 !important; }

/* — Contact : formulaire — */
.php-email-form { background: var(--eid-light) !important; border-radius: 16px !important; padding: 36px !important; }
.php-email-form .form-control {
  background: #fff !important;
  border: 2px solid #e4e6f0 !important;
}

/* — Séparation visuelle entre sections claires adjacentes — */
#about + .counts { /* pas de border — le gradient navy sépare visuellement */ }
#faq { border-top: 1px solid #eef0f8; border-bottom: 1px solid #eef0f8; }

/* — Typographie globale — */
body { font-family: 'Nunito', 'Open Sans', sans-serif; }
h1, h2, h3, h4, h5, h6 { font-family: 'Poppins', 'Nunito', sans-serif; }

/* ============================================================
   RESPONSIVE TWEAKS
============================================================ */
@media (max-width: 992px) {
  .hero h1 { font-size: 2.1rem; }
  .hero h2 { font-size: .95rem; margin-top: 16px; }
  .hero .col-lg-6:first-child { padding-top: 20px; padding-bottom: 20px; }
  .hero-btns { margin-top: 28px; }
  .hero-stats { gap: 20px; margin-top: 36px; padding-top: 20px; }
  .hero-stats .stat-number { font-size: 1.5rem; }
  .section-header p { font-size: 1.8rem !important; }
  #about .about-badge { left: 10px; }
  .service-page-hero h1 { font-size: 1.8rem; }
  .devis-left { padding: 40px 30px; }
  .devis-right { padding: 40px 30px; }
}
@media (max-width: 576px) {
  .hero { padding-bottom: 48px; }
  .hero h1 { font-size: 1.75rem; margin-top: 14px; }
  .hero h2 { font-size: .92rem; margin-top: 14px; }
  .hero-stats { gap: 14px; margin-top: 30px; }
  #about .about-badge { display: none; }
  .section-header p { font-size: 1.5rem !important; }
  .counts .count-box, .count-box {
    padding: 20px 18px !important;
    gap: 16px !important;
  }
  .count-box span { font-size: 2rem !important; }
  .count-box i { font-size: 2rem !important; }
  .php-email-form { padding: 24px 20px !important; }
  .info-box { padding: 24px 18px !important; }
  .approche-card { padding: 40px 20px 28px !important; }

  /* ---- CTA buttons : pleine largeur sur mobile ---- */

  /* Hero : colonne + étirement des enfants */
  .hero-btns {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin-top: 24px;
  }
  /* Écrase d-inline-flex Bootstrap pour prendre toute la largeur */
  .hero-btns > a {
    display: flex !important;
    width: 100% !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 13px 20px !important;
    font-size: .85rem !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    white-space: nowrap !important;  /* interdit le retour à la ligne → texte + icône alignés */
    overflow: hidden !important;     /* sécurité : coupe si vraiment trop étroit */
  }
  /* L'icône ne rétrécit pas */
  .hero-btns > a > i {
    flex-shrink: 0 !important;
    font-size: .9rem !important;
  }

  /* About section : paire de boutons en colonne pleine largeur */
  #about .content .d-flex {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  #about .content .btn-read-more {
    display: flex !important;
    width: 100% !important;
    justify-content: center !important;
    align-self: stretch !important;
  }

  /* Hero des pages service */
  .service-page-hero .btn-get-started {
    display: flex !important;
    width: 100% !important;
    justify-content: center !important;
    padding: 13px 20px !important;
    font-size: .9rem !important;
    letter-spacing: .5px !important;
  }

  /* Page de succès devis */
  .service-page-hero .d-flex > .btn-get-started,
  .service-page-hero .d-flex > .btn-ghost {
    display: flex !important;
    width: 100% !important;
    justify-content: center !important;
  }

  /* Bouton ghost pleine largeur */
  .btn-ghost {
    justify-content: center !important;
  }
}