/* ============================================================
   VAUTRIN ÉLECTRICITÉ — THÈME CHARTE "CLAIR" v5.0
   Fond blanc · Bleu #24529C · Orange #D9743E (charte client)
   Chargé APRÈS style.css → surcouche (mêmes classes).
   Police Inter · interlettrage resserré · nouveaux composants.
   ============================================================ */

/* 1. VARIABLES — charte graphique
   ============================================================ */
:root{
  /* Bleu de marque = accent structurel (icônes, liens, labels secondaires) */
  --rouge:       #24529c;   /* var historique réassignée au BLEU charte */
  --rouge-hover: #1d4483;
  --rouge-deep:  #173a6e;
  --rouge-clair: #eaf0f9;   /* bleu très clair (fonds d'icônes/puces) */
  --rouge-mid:   rgba(36,82,156,.12);
  /* Orange de marque = CTA + mots surlignés + accents chauds */
  --orange:      #d9743e;
  --orange-hover:#c46330;
  --orange-deep: #b0562a;
  --orange-soft: #fbf0e8;
  /* Bleu structurel */
  --bleu:        #24529c;
  --bleu-deep:   #1a3d74;
  --fond-dark:   #16305e;   /* footer / bandeaux sombres = bleu nuit charte */
  /* Fonds clairs */
  --fond:        #ffffff;
  --fond-alt:    #f4f7fb;
  --texte:       #142a47;
  --texte-soft:  #41526d;
  --texte-muted: #6d7c93;
  --border:      #e4eaf2;
  --border-light:#eef3f9;

  --ombre-xs:  0 1px 2px rgba(20,40,70,.05);
  --ombre-sm:  0 1px 4px rgba(20,40,70,.06), 0 4px 16px rgba(20,40,70,.05);
  --ombre:     0 2px 8px rgba(20,40,70,.07), 0 10px 30px rgba(20,40,70,.07);
  --ombre-md:  0 6px 20px rgba(20,40,70,.09), 0 20px 48px rgba(20,40,70,.09);
  --ombre-lg:  0 12px 40px rgba(20,40,70,.12), 0 40px 80px rgba(20,40,70,.10);

  --radius-sm: 8px;
  --radius:    12px;
  --radius-md: 18px;
  --radius-lg: 26px;

  --max-w:    1240px;
  --header-h: 82px;   /* entête normale, logo ~ hauteur du bouton Devis */
}

/* 2. TYPOGRAPHIE — Inter + interlettrage resserré
   ============================================================ */
body{
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  background:var(--fond);color:var(--texte);letter-spacing:-.011em;
}
h1,h2,h3,h4,h5,.btn,.section-title,.hero-stat-number,.stat-number{
  font-family:'Inter',system-ui,sans-serif;
}
h1{letter-spacing:-.038em;font-weight:800;color:var(--texte)}
h2{letter-spacing:-.034em;font-weight:800}
h3{letter-spacing:-.028em}
h4{letter-spacing:-.02em}
/* mots-clés surlignés = orange charte */
.hl{color:var(--orange)}
.hl-blue{color:var(--bleu)}
::selection{background:var(--orange);color:#fff}

/* 3. LABELS / SECTIONS
   ============================================================ */
.section-label{color:var(--orange)}
.section-label::before{background:var(--orange)}
.badge,.about-tag{background:var(--orange-soft);color:var(--orange-deep)}

/* 4. BOUTONS — CTA orange, secondaire bleu
   ============================================================ */
.btn{letter-spacing:-.01em;border-radius:var(--radius)}
.btn--primary{background:var(--orange);color:#fff;border-color:var(--orange);font-weight:800}
.btn--primary:hover{background:var(--orange-hover);border-color:var(--orange-hover);box-shadow:0 8px 24px rgba(217,116,62,.35);transform:translateY(-2px)}
.btn--primary svg{color:#fff}
.btn--secondary{color:var(--bleu);border-color:var(--bleu)}
.btn--secondary:hover{background:var(--bleu);color:#fff}
.btn--white{background:#fff;color:var(--orange);border-color:#fff}
.btn--white:hover{background:var(--orange-soft);color:var(--orange-deep)}
.btn--ghost{color:var(--bleu);border-color:var(--border);background:#fff}
.btn--ghost:hover{background:var(--fond-alt);border-color:var(--bleu);color:var(--bleu)}
.btn--white-outline{color:#fff;border-color:rgba(255,255,255,.55)}
.btn--white-outline:hover{background:rgba(255,255,255,.14);border-color:#fff}

/* 5. HEADER — verre clair
   ============================================================ */
.header{background:rgba(255,255,255,.9);backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);border-bottom:1px solid var(--border-light)}
.header.scrolled{background:rgba(255,255,255,.97);box-shadow:0 1px 0 rgba(20,40,70,.04),0 8px 24px rgba(20,40,70,.08)}
.header--transparent{background:transparent;border-bottom-color:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
.header-nav a{color:var(--texte-soft)}
.header-nav a:hover{color:var(--bleu);background:var(--rouge-clair)}
.header-nav a.active{color:var(--orange)}
.header--transparent .header-nav a{color:rgba(255,255,255,.92)}
.header--transparent .header-nav a:hover{background:rgba(255,255,255,.14);color:#fff}
.header--transparent .header-nav a.active{color:#fff}
.header-tel{color:var(--texte)}
.header-tel:hover{color:var(--orange)}
.header-tel svg{color:var(--orange)}
.header--transparent .header-tel{color:#fff}
.header--transparent .header-tel svg{color:#fff}
.header-burger span{background:var(--texte)}
.header--transparent .header-burger span{background:#fff}
/* logo : badge bleu ≈ hauteur du bouton « Devis gratuit », non compressé */
.header-logo{flex-shrink:0}
.header-logo img{height:54px;width:auto;flex-shrink:0;border-radius:8px}
.header-nav a{padding:.5rem .62rem;font-size:.84rem}
@media(max-width:1099px){
  :root{--header-h:74px}
  .header-logo img{height:44px}
  /* CTA d'entête redondant avec la barre fixe du bas → on garde logo + burger */
  .header-actions .btn--primary{display:none}
}

/* 6. HERO — photo + voile bleu charte
   ============================================================ */
.hero{background:var(--bleu-deep)}
/* image générée : électricien à droite, mur navy à gauche pour le titre */
.hero-bg{background-image:url('/assets/uploads/hero-salon-vautrin.jpg')!important;background-position:center;background-size:cover}
.hero-overlay{background:linear-gradient(100deg,rgba(13,26,50,.86) 0%,rgba(16,34,66,.64) 32%,rgba(18,40,78,.26) 55%,rgba(18,40,78,.05) 76%,transparent 100%)}
.hero::after{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(600px 340px at 15% 86%,rgba(217,116,62,.16),transparent 60%);mix-blend-mode:screen}
@media(max-width:767px){
  .hero-bg{background-position:72% center}
  .hero-overlay{background:linear-gradient(180deg,rgba(13,26,50,.82) 0%,rgba(14,30,58,.7) 60%,rgba(16,34,66,.74) 100%)}
}
.hero .container{position:relative;z-index:1}
.hero-badge{background:rgba(217,116,62,.9);color:#fff;border:1px solid rgba(255,255,255,.25)}
.hero-badge svg{color:#fff}
.hero h1{color:#fff;text-shadow:0 2px 26px rgba(0,0,0,.35)}
.hero-desc{color:rgba(255,255,255,.85)}
.hero-stats{border-top-color:rgba(255,255,255,.18)}
.hero-stat-number{color:#fff;letter-spacing:-.03em}
.hero-stat-label{color:rgba(255,255,255,.62)}
.hero-trust{display:flex;flex-wrap:wrap;gap:.5rem .75rem;margin:-1.25rem 0 2.75rem}
.hero-trust span{display:inline-flex;align-items:center;gap:.45rem;font-size:.78rem;font-weight:600;color:#fff;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);padding:.4rem .8rem;border-radius:999px}
.hero-trust svg{width:14px;height:14px;color:var(--orange)}
.hero-trust span:nth-child(1) svg{color:#7fe3a4}

/* page hero interne */
.page-hero{background:var(--bleu-deep)}
.page-hero-overlay{background:linear-gradient(to top,rgba(16,32,64,.92) 0%,rgba(22,52,102,.72) 55%,rgba(36,82,156,.42) 100%)}
.page-hero::after{content:'';position:absolute;inset:0;background:radial-gradient(600px 300px at 80% 40%,rgba(217,116,62,.2),transparent 62%);mix-blend-mode:screen;pointer-events:none}
.page-hero-content{position:relative;z-index:1}
.breadcrumb a{color:rgba(255,255,255,.78)}
.breadcrumb a:hover{color:#fff}

/* 7. TRUST BAR
   ============================================================ */
.trust-bar{background:var(--fond-alt);border-color:var(--border)}
.trust-item{color:var(--texte-soft)}
.trust-item svg{color:var(--orange)}

/* 8. FEATURE CARDS (piliers — clair)
   ============================================================ */
.feature-cards{display:grid;grid-template-columns:1fr;gap:1.25rem}
.feature-card{position:relative;overflow:hidden;background:#fff;border:1px solid var(--border);border-radius:var(--radius-md);padding:1.9rem 1.75rem;box-shadow:var(--ombre-sm);transition:transform .35s var(--ease),border-color .35s,box-shadow .35s}
.feature-card::before{content:'';position:absolute;left:0;top:0;height:100%;width:3px;background:var(--orange);transform:scaleY(0);transform-origin:top;transition:transform .4s var(--ease)}
.feature-card:hover{transform:translateY(-6px);border-color:rgba(36,82,156,.35);box-shadow:var(--ombre-md)}
.feature-card:hover::before{transform:scaleY(1)}
.feature-card-icon{width:52px;height:52px;border-radius:14px;margin-bottom:1.15rem;display:flex;align-items:center;justify-content:center;background:var(--rouge-clair);color:var(--bleu);border:1px solid rgba(36,82,156,.18)}
.feature-card-icon svg{width:26px;height:26px}
.feature-card h3{font-size:1.15rem;margin-bottom:.5rem;color:var(--texte)}
.feature-card p{font-size:.9rem;color:var(--texte-muted);margin:0;line-height:1.65}
@media(min-width:640px){.feature-cards{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.feature-cards{grid-template-columns:repeat(4,1fr)}}

/* 9. EXPAND CARDS — accents charte
   ============================================================ */
.expand-card .btn--white{background:var(--orange);color:#fff!important;border-color:var(--orange)}
.expand-card .btn--white:hover{background:var(--orange-hover)!important;border-color:var(--orange-hover)}
.expand-card.active .expand-card-number{color:rgba(217,116,62,.9)}

/* 10. SERVICE CARDS — icônes charte + HAUTEUR ÉGALE
   ============================================================ */
/* Toutes les cartes (carrousel + grille) à la même hauteur, CTA aligné en bas */
.slider-slide{display:flex}
.service-card{height:100%;display:flex;flex-direction:column}
.service-card-img{flex-shrink:0}
.service-card-body{flex:1;display:flex;flex-direction:column}
.service-card-body .service-card-link,
.service-card-body>.btn{margin-top:auto}
.service-card-icon{background:var(--rouge-clair);color:var(--bleu)}
.service-card:hover .service-card-icon{background:var(--orange);color:#fff}
.service-card-link{color:var(--orange)}
.service-card:hover{border-color:rgba(217,116,62,.3)}
.service-card p a,.link-rouge,.content-body a:not(.btn),.faq-answer-inner a{color:var(--orange)}
.service-card p a:hover,.link-rouge:hover,.content-body a:not(.btn):hover,.faq-answer-inner a:hover{color:var(--orange-deep)}

/* 11. STATS
   ============================================================ */
.stat-number{color:var(--orange)}

/* 12. PARTENAIRES — wordmarks aux couleurs de marque
   ============================================================ */
.partner-logo{min-height:104px;justify-content:center}
.partner-logo:hover{border-color:rgba(36,82,156,.35)}
.partner-wordmark{font-weight:800;letter-spacing:-.02em;line-height:1;margin-bottom:.45rem;white-space:nowrap}
.pw-schneider{color:#12a150;font-size:1.35rem}
.pw-schneider>span{font-weight:600;margin-left:.3em;color:#59697b}
.pw-legrand{color:#141414;font-size:1.6rem;letter-spacing:-.045em;text-transform:lowercase}
.pw-hager{color:#e2001a;font-size:1.7rem;letter-spacing:-.02em;text-transform:lowercase}

/* 13. RÉALISATIONS / ABOUT
   ============================================================ */
.realisation-item:hover .realisation-overlay{opacity:1}
.about-feature-icon{background:var(--rouge-clair);color:var(--bleu)}

/* 14. ZONES + carte d'intervention
   ============================================================ */
.zone-tag:hover{border-color:var(--orange);background:var(--orange-soft)}
.zone-tag:hover a{color:var(--orange-deep)}
.zones-map{margin:2.25rem auto 1.5rem;max-width:920px;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--border);box-shadow:var(--ombre-md);background:#eef2f8}
.zones-map img{width:100%;height:auto;display:block}

/* 15. FAQ
   ============================================================ */
.faq-item:has(.faq-question.open){border-color:rgba(36,82,156,.35)}
.faq-question.open{color:var(--orange);background:var(--orange-soft);border-bottom-color:rgba(217,116,62,.2)}
.faq-question.open .faq-chevron{color:var(--orange)}

/* 16. CTA BAND (section--rouge → dégradé bleu charte + accent orange)
   ============================================================ */
.section--rouge{
  background-color:var(--bleu-deep);
  background:
    radial-gradient(900px 500px at 12% 12%,rgba(36,82,156,.55),transparent 55%),
    radial-gradient(700px 400px at 100% 100%,rgba(217,116,62,.28),transparent 60%),
    linear-gradient(120deg,#16305e 0%,#24529c 100%);
  position:relative;overflow:hidden;
}
.section--rouge .cta-section h2{color:#fff}
.section--rouge .cta-section h2 .hl{color:var(--orange)}
.section--rouge .cta-section p{color:rgba(255,255,255,.85)}
.section--rouge .btn--white{background:var(--orange);color:#fff;border-color:var(--orange)}
.section--rouge .btn--white:hover{background:var(--orange-hover)}

/* 17. SIDEBAR / TIMELINE / AVANTAGES / HIGHLIGHT / MAILLAGE
   ============================================================ */
.highlight-box{background:var(--orange-soft);border-left:4px solid var(--orange)}
.timeline-item.timeline-active .timeline-number,.timeline-item:hover .timeline-number{background:var(--orange);color:#fff;border-color:var(--orange);box-shadow:0 0 0 4px rgba(217,116,62,.15)}
.timeline-progress-line{background:linear-gradient(var(--orange),rgba(217,116,62,.4))}
.timeline-body:hover,.timeline-item.timeline-active .timeline-body{border-color:rgba(36,82,156,.35)}
.avantage-icon{background:var(--rouge-clair);color:var(--bleu)}
.avantage-item:hover .avantage-icon{background:var(--orange);color:#fff}
.avantage-item:hover{border-color:rgba(36,82,156,.3)}
.internal-link:hover{border-color:var(--orange);color:var(--orange);background:var(--orange-soft)}
.sidebar-tel:hover{color:var(--orange);background:var(--orange-soft)}
.sidebar-tel svg{color:var(--orange)}
.sidebar-reassurance li::before{color:#16a34a}
.contact-card-icon{background:var(--rouge-clair);color:var(--bleu)}
.contact-card:hover{border-color:rgba(36,82,156,.3)}
.contact-card a:hover{color:var(--orange)}

/* 18. FORMULAIRE
   ============================================================ */
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--orange);box-shadow:0 0 0 3.5px rgba(217,116,62,.14)}

/* 19. FOOTER — bleu nuit charte
   ============================================================ */
.footer{background:var(--fond-dark)}
.footer-brand img{filter:none;height:44px;width:auto;object-fit:contain}
.footer-links a:hover,.footer-contact a:hover,.footer-bottom a:hover{color:var(--orange)}
.footer-contact svg{color:var(--orange)}
.footer-social a:hover{border-color:var(--orange);background:var(--orange)}

/* 20. MOBILE NAV + CTA BAR
   ============================================================ */
.mobile-nav a:hover{color:var(--orange);background:var(--orange-soft)}
.mobile-cta-bar a:first-child{background:var(--bleu)}
.mobile-cta-bar a:first-child:hover{background:var(--bleu-deep)}
.mobile-cta-bar a:last-child{background:var(--orange)}
.mobile-cta-bar a:last-child:hover{background:var(--orange-hover)}

/* 21. READING PROGRESS + SLIDER
   ============================================================ */
.reading-progress-bar{background:linear-gradient(90deg,var(--bleu),var(--orange))}
.slider-btn:hover{border-color:var(--orange);color:var(--orange);background:var(--orange-soft)}
.slider-dot.active{background:var(--orange)}

/* 22. VIDÉO — bandeau bleu nuit, texte blanc, lecture inline
   ============================================================ */
.video-band{position:relative;overflow:hidden;
  background-color:var(--bleu-deep);
  background:
    radial-gradient(900px 500px at 12% 8%,rgba(36,82,156,.5),transparent 55%),
    radial-gradient(700px 400px at 100% 100%,rgba(217,116,62,.22),transparent 60%),
    linear-gradient(120deg,#12285120 0%,#16305e 55%,#1a3d74 100%);
  background-color:#12284d;
}
.video-band .section-label{color:var(--orange)}
.video-band .section-title{color:#fff}
.video-band .section-desc{color:rgba(255,255,255,.82)}
.video-band .section-desc a,.video-band .link-rouge{color:var(--orange)}
.video-band .section-desc a:hover{color:#ffb37e}
.video-wrap{position:relative;border-radius:var(--radius-lg);overflow:hidden;border:1px solid rgba(255,255,255,.14);box-shadow:var(--ombre-lg);aspect-ratio:16/9;background:#0b1730}
.video-wrap img{width:100%;height:100%;object-fit:cover;opacity:1}
.video-wrap iframe,.video-wrap video,.video-frame{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000;z-index:4}
.video-wrap.playing .video-overlay{display:none}
.video-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:1rem;text-align:center;padding-bottom:2.2rem;background:linear-gradient(180deg,rgba(11,23,48,.05) 40%,rgba(11,23,48,.62));text-decoration:none;border:0;cursor:pointer;width:100%}
.video-play{margin-top:auto}
.video-overlay .video-caption{margin-bottom:0}
.video-play{width:88px;height:88px;border-radius:50%;background:var(--orange);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 12px 40px rgba(217,116,62,.5);transition:transform .3s var(--ease-back);position:relative}
.video-play::after{content:'';position:absolute;inset:-10px;border-radius:50%;border:2px solid rgba(217,116,62,.5);animation:videoPulse 2.4s ease-out infinite}
@keyframes videoPulse{0%{transform:scale(1);opacity:.8}100%{transform:scale(1.4);opacity:0}}
.video-overlay:hover .video-play{transform:scale(1.08)}
.video-play svg{width:34px;height:34px;margin-left:4px}
.video-caption{color:#fff;font-weight:700;font-size:1.05rem;letter-spacing:-.02em}
.video-caption small{display:block;color:rgba(255,255,255,.78);font-weight:500;font-size:.85rem;margin-top:.25rem}

/* 22b. IMAGES DANS LE CONTENU (pages prestations) — aèrent le texte
   ============================================================ */
.content-figure{margin:1.75rem 0 2.25rem;border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--border);box-shadow:var(--ombre-sm)}
.content-figure img{width:100%;height:auto;display:block;aspect-ratio:3/2;object-fit:cover;object-position:center}
.content-figure figcaption{font-size:.85rem;color:var(--texte-muted);padding:.7rem 1rem;background:var(--fond-alt);border-top:1px solid var(--border-light)}
/* avant / après */
.ba-pair{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin:1.75rem 0 2.25rem}
.ba-pair figure{margin:0;position:relative;border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--border);box-shadow:var(--ombre-sm)}
.ba-pair img{width:100%;height:auto;display:block;aspect-ratio:3/4;object-fit:cover}
.ba-tag{position:absolute;top:.6rem;left:.6rem;background:var(--orange);color:#fff;font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;padding:.28rem .7rem;border-radius:999px;z-index:2}
.ba-tag--after{background:#16a34a}
@media(max-width:520px){.ba-pair img{aspect-ratio:4/5}}

/* 22c. PAGES PRESTATIONS — mise en page premium (barre de faits + étapes)
   ============================================================ */
.facts-bar{position:relative;z-index:3;margin-top:-3.75rem}
.facts-bar-inner{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--ombre-md);display:grid;grid-template-columns:repeat(2,1fr);gap:1px;overflow:hidden}
.fact{display:flex;gap:.85rem;align-items:center;padding:1.2rem 1.35rem;background:#fff;border-top:1px solid var(--border-light)}
.fact:nth-child(-n+2){border-top:0}
.fact-ic{width:42px;height:42px;min-width:42px;border-radius:11px;background:var(--orange-soft);color:var(--orange);display:flex;align-items:center;justify-content:center}
.fact-ic svg{width:22px;height:22px}
.fact b{display:block;font-size:.95rem;color:var(--texte);font-weight:800;letter-spacing:-.02em;line-height:1.2}
.fact span{font-size:.8rem;color:var(--texte-muted)}
@media(min-width:900px){.facts-bar-inner{grid-template-columns:repeat(4,1fr)}.fact{border-top:0}}

.steps{display:grid;grid-template-columns:1fr;gap:1.25rem;counter-reset:step}
.step{position:relative;background:#fff;border:1px solid var(--border);border-radius:var(--radius-md);padding:1.6rem 1.5rem 1.4rem;box-shadow:var(--ombre-xs);transition:transform .3s var(--ease),border-color .3s,box-shadow .3s}
.step:hover{transform:translateY(-4px);border-color:rgba(217,116,62,.35);box-shadow:var(--ombre-sm)}
.step::before{counter-increment:step;content:counter(step,decimal-leading-zero);position:absolute;top:1rem;right:1.25rem;font-size:1.5rem;font-weight:800;color:var(--orange);opacity:.32;letter-spacing:-.04em}
.step-ic{width:44px;height:44px;border-radius:12px;background:rgba(36,82,156,.1);color:var(--bleu);display:flex;align-items:center;justify-content:center;margin-bottom:1rem}
.step-ic svg{width:22px;height:22px}
.step h4{font-size:1.05rem;color:var(--texte);margin-bottom:.35rem}
.step p{font-size:.875rem;color:var(--texte-muted);margin:0;line-height:1.6}
@media(min-width:640px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.steps{grid-template-columns:repeat(4,1fr)}}

/* grille 3 colonnes pour cartes prestations / profils */
.svc-grid{display:grid;grid-template-columns:1fr;gap:1.25rem}
@media(min-width:600px){.svc-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:960px){.svc-grid{grid-template-columns:repeat(3,1fr)}}

/* brand chips (marques installées) */
.brand-chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.4rem}
.brand-chips span{font-size:.8rem;font-weight:700;color:var(--texte-soft);background:var(--fond-alt);border:1px solid var(--border);border-radius:999px;padding:.35rem .85rem}

/* liste à puces "check" compacte (splits) */
.check-list{display:flex;flex-direction:column;gap:.6rem;margin:1.25rem 0 1.75rem}
.check-list li{display:flex;gap:.6rem;align-items:flex-start;font-size:.95rem;color:var(--texte-soft);padding-left:0}
.check-list li::before{content:'';flex:0 0 20px;height:20px;margin-top:.1rem;border-radius:50%;background:var(--orange-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23d9743e'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E") center/13px no-repeat}

/* 22d. ÉLÉMENTS GRAPHIQUES — habillage orange/bleu
   ============================================================ */
/* accent centré sous les titres de section */
.section-header.center .section-title::after{
  content:'';display:block;width:52px;height:3px;margin:1rem auto 0;border-radius:3px;
  background:linear-gradient(90deg,var(--bleu),var(--orange));
}
/* lueurs ambiantes qui habillent les sections claires alternées */
.section--alt{position:relative;overflow:hidden}
.section--alt::before{content:'';position:absolute;top:-130px;right:-110px;width:440px;height:440px;border-radius:50%;background:radial-gradient(circle,rgba(217,116,62,.11),transparent 70%);pointer-events:none;z-index:0}
.section--alt::after{content:'';position:absolute;bottom:-150px;left:-130px;width:480px;height:480px;border-radius:50%;background:radial-gradient(circle,rgba(36,82,156,.10),transparent 70%);pointer-events:none;z-index:0}
.section--alt>.container{position:relative;z-index:1}
/* séparateur décoratif avec éclair (fin de section) */
.deco-divider{display:flex;align-items:center;justify-content:center;gap:1rem;max-width:520px;margin:3.5rem auto 0;padding:0 1rem}
.deco-divider::before,.deco-divider::after{content:'';height:2px;flex:1;border-radius:2px}
.deco-divider::before{background:linear-gradient(90deg,transparent,rgba(36,82,156,.45))}
.deco-divider::after{background:linear-gradient(90deg,rgba(217,116,62,.45),transparent)}
.deco-divider .deco-bolt{width:34px;height:34px;min-width:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--orange-soft);color:var(--orange);border:1px solid rgba(217,116,62,.3)}
.deco-divider .deco-bolt svg{width:18px;height:18px}
/* filet d'accent en haut du bandeau CTA */
.section--rouge::after{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--bleu),var(--orange),var(--bleu))}
/* petit liseré orange en haut de la barre de faits */
.facts-bar-inner{border-top:3px solid var(--orange)}

/* 23. AUTOFILL clair */
input:-webkit-autofill{-webkit-text-fill-color:var(--texte);-webkit-box-shadow:0 0 0 1000px #fff inset}

/* 24. PLUS D'ORANGE — accents chauds sur icônes, chiffres et détails
   (le bleu reste pour logo / hero / bandeau CTA / footer = équilibre)
   ============================================================ */
.feature-card-icon,
.service-card-icon,
.avantage-icon,
.contact-card-icon,
.about-feature-icon,
.sidebar-card-icon{
  background:var(--orange-soft);
  color:var(--orange);
  border-color:rgba(217,116,62,.22);
}
.feature-card-icon:hover{background:var(--orange);color:#fff}
/* chiffres clés en orange */
.hero-stat-number{color:var(--orange)}
.stat-number{color:var(--orange)}
/* petits accents */
.feature-card::before{background:linear-gradient(var(--orange),var(--orange-hover))}
.expand-card-label{color:rgba(255,196,120,.9)}
.partner-logo:hover{border-color:rgba(217,116,62,.4)}
.breadcrumb span{color:var(--orange)}
.footer-title{position:relative}