/* MyCopilot Systems — CSS Principal | Dark #1A1A2E | Orange #E84E0F */
/* Google Fonts chargées via <link rel="preload"> dans chaque page HTML */

/* Force le thème clair — design system bi-ton défini, dark mode OS ignoré */
:root { color-scheme: light only; }

/* Secours dark mode : force fond blanc + texte foncé si navigateur override.
   NE PAS inverser le logo ici : le header reste blanc (forcé ci-dessus), donc
   un logo inversé devient blanc sur blanc = invisible (bug Firefox dark mode). */
@media (prefers-color-scheme: dark) {
  html, body { background: #fff !important; color: #2a2a2a !important; }
}

:root {
  --dark:#1A1A2E; --dark2:#0A1628; --orange:#EB5212; --orange2:#c93e08;
  --white:#fff; --warm:#F5F3EE; --grey:#f0ede8; --grey2:#ddd8d0;
  --steel:#C4D4F0; --text:#2a2a2a; --textl:#5a5a6e;
  --fh:'Montserrat',sans-serif; --fb:'Open Sans',sans-serif;
  --r:8px; --sh:0 4px 28px rgba(0,0,0,.10); --tr:color .25s ease,background-color .25s ease,border-color .25s ease,transform .25s ease,box-shadow .25s ease,opacity .25s ease; --orange-text:#B83A08;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:clip} body{font-family:var(--fb);color:var(--text);background:var(--white);line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:clip;max-width:100vw}
img{max-width:100%;height:auto;display:block} a{text-decoration:none;color:inherit} ul{list-style:none}
button{cursor:pointer;border:none;background:none;font-family:inherit} input,select,textarea{font-family:var(--fb)}
.container{max-width:1200px;margin:0 auto;padding:0 24px}
.section{padding:88px 0} .section--dark{background:var(--dark);color:#fff}
.section--grey{background:var(--grey)} .section--warm{background:var(--warm)}
.section--orange{background:var(--orange);color:#fff}
.text-center{text-align:center}
h1,h2,h3,h4{font-family:var(--fh);line-height:1.18;letter-spacing:-.02em}
h1{font-size:clamp(2rem,4vw,3rem);font-weight:800}
h2{font-size:clamp(1.6rem,3vw,2.3rem);font-weight:700;margin-bottom:16px}
h3{font-size:1.15rem;font-weight:700;margin-bottom:10px;letter-spacing:-.01em}
p{margin-bottom:16px;line-height:1.75} p:last-child{margin-bottom:0}
.label{font-family:var(--fh);font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--orange-text);margin-bottom:14px;display:block}
.sec-head{margin-bottom:52px} .sec-head p{color:var(--textl);max-width:640px;margin:14px auto 0;font-size:1.02rem;line-height:1.75}
.section--dark .sec-head p{color:rgba(255,255,255,.6)}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;gap:8px;padding:14px 28px;border-radius:var(--r);font-family:var(--fh);font-weight:700;font-size:.92rem;transition:background .3s ease, box-shadow .3s ease, color .3s ease, border-color .3s ease;white-space:nowrap;letter-spacing:.02em;position:relative}
.btn-orange{background:var(--orange);color:#fff;border:1px solid var(--orange)}
.btn-orange:hover{background:var(--orange2);border-color:var(--orange2);box-shadow:0 8px 22px rgba(232,78,15,.28)}
.btn-dark{background:var(--dark);color:#fff;border:1px solid var(--dark)}
.btn-dark:hover{background:var(--dark2);border-color:var(--dark2);box-shadow:0 8px 22px rgba(10,22,40,.22)}
.btn-outline{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.55)}
.btn-outline:hover{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.9);box-shadow:0 6px 18px rgba(0,0,0,.18)}
.btn-lg{padding:17px 34px;font-size:1rem}

/* TOP BAR */
.top-bar{background:var(--dark2);color:rgba(255,255,255,.7);font-size:.87rem;padding:8px 0;font-family:var(--fh)}
.top-bar .container{display:flex;align-items:center;justify-content:flex-end;gap:24px;flex-wrap:wrap}
.top-bar span{display:flex;align-items:center;gap:5px}
.top-bar a{color:rgba(255,255,255,.7);transition:var(--tr)} .top-bar a:hover{color:var(--orange)}
@media(max-width:640px){
  .top-bar .container span:nth-child(2),
  .top-bar .container span:nth-child(3){display:none}
  .top-bar .container{justify-content:center}
}

/* HEADER */
.site-header{position:sticky;top:0;z-index:1000;background:#fff;box-shadow:0 2px 16px rgba(0,0,0,.1);transition:var(--tr)}
.site-header.scrolled{box-shadow:0 4px 24px rgba(0,0,0,.18)}
.main-nav{display:flex;align-items:center;justify-content:space-between;padding:6px 24px;max-width:1200px;margin:0 auto}
.nav-logo img{width:230px;height:80px;object-fit:contain;object-position:left center}
.nav-links{display:flex;align-items:center;gap:4px}
.nav-links li a{font-family:var(--fh);font-size:.92rem;font-weight:600;color:var(--dark);padding:8px 13px;border-radius:var(--r);transition:var(--tr)}
.nav-links li a:hover,.nav-links li a.active{color:var(--orange)}
.nav-links li a.btn-cta{background:var(--orange);color:#fff;padding:11px 22px} .nav-links li a.btn-cta:hover{background:var(--orange2)}
.nav-toggle{display:none;flex-direction:column;gap:5px;padding:8px;cursor:pointer}
.nav-toggle span{width:26px;height:2px;background:var(--dark);border-radius:2px;transition:var(--tr);display:block}
.nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle.open span:nth-child(2){opacity:0}
.nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ═══════════════════════════════════════════════════════════
   MEGA MENU — Solutions / Secteurs / Ressources
   Clean B2B, 2 colonnes max, hover desktop / accordion mobile
   ═══════════════════════════════════════════════════════════ */
.nav-links { position: relative; }
.nav-item { position: relative; list-style: none; }

.nav-item--mega > .nav-trigger {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}
.nav-chev {
  font-size: .65rem;
  margin-top: 1px;
  transition: transform .25s ease;
  color: var(--textl);
}
.nav-item--mega:hover .nav-chev,
.nav-item--mega:focus-within .nav-chev,
.nav-item--mega.is-open .nav-chev {
  transform: rotate(180deg);
  color:var(--orange-text);
}

/* Mega panel — caché par défaut, s'ouvre au hover/focus */
.mega {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  /* Largeur fixe uniforme : évite que les panneaux sautent en taille
     quand on survole d'un onglet à l'autre. La grille interne varie (2 ou 3 col),
     pas la géométrie du panneau. */
  width: 680px;
  background: #fff;
  border: 1px solid var(--grey2);
  border-radius: var(--r);
  box-shadow: 0 18px 48px rgba(10, 22, 40, .14), 0 4px 12px rgba(10, 22, 40, .08);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
  z-index: 1100;
}
.mega--single { min-width: 280px; }

/* Desktop only — hover & focus-within ouvrent le mega.
   Sur mobile, seul .is-open (toggle JS au tap) ouvre — évite le sticky-hover iOS. */
@media (min-width: 641px) {
  .nav-item--mega:hover > .mega,
  .nav-item--mega:focus-within > .mega {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
    transition-delay: 0s, 0s, 0s;
  }
}
@media (min-width: 641px) {
  .nav-item--mega.is-open > .mega {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
    transition-delay: 0s, 0s, 0s;
  }
}

/* Pont invisible pour éviter la fermeture entre trigger et panel */
.nav-item--mega::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 12px;
}

.mega__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  padding: 22px 26px;
}
.mega--single .mega__inner { grid-template-columns: 1fr; }
/* Panneau dense (Secteurs) : 3 colonnes dans la même largeur fixe */
.mega--3col .mega__inner { grid-template-columns: repeat(3, 1fr); }

.mega__col + .mega__col {
  border-left: 1px solid var(--grey);
  padding-left: 22px;
  margin-left: 4px;
}
.mega--3col .mega__col + .mega__col { padding-left: 18px; margin-left: 2px; }

/* Titres de colonne : gris discret, pas orange.
   L'orange est réservé au hover/actif — un seul signal visuel, pas trois. */
.mega__title {
  font-family: var(--fh);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--textl);
  margin: 0 0 10px;
  padding-bottom: 0;
  border-bottom: none;
}

.mega__col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.mega__col li {
  list-style: none;
}
.mega__col li a {
  display: block;
  padding: 7px 10px;
  margin: 2px -10px;
  color: var(--text);
  font-family: var(--fb);
  font-size: .9rem;
  font-weight: 500;
  border-radius: 6px;
  text-decoration: none;
  /* Accent gauche en box-shadow inset : au survol le texte ne bouge pas
     (l'ancien padding-left 10→14px faisait sautiller chaque ligne). */
  box-shadow: inset 0 0 0 0 var(--orange);
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.mega__col li a:hover,
.mega__col li a:focus-visible {
  background: var(--warm);
  color:var(--orange-text);
  box-shadow: inset 3px 0 0 0 var(--orange);
}
.mega__more {
  margin-top: 10px !important;
  font-weight: 700 !important;
  color:var(--orange-text) !important;
  border-top: 1px solid var(--grey);
  padding-top: 12px !important;
}

/* CTA wrapper */
.nav-item--cta { margin-left: 4px; }

/* ── ZONE INTERMÉDIAIRE 641-960px ──
   Avec 5 onglets + CTA + logo 230px, la barre a besoin d'environ 940px.
   En dessous, on compresse logo et espacements plutôt que de laisser déborder.
   (La bascule accordéon mobile reste à 640px.) */
@media (min-width: 641px) and (max-width: 960px) {
  .nav-logo img { width: 170px; height: 60px; }
  .nav-links li a { font-size: .86rem; padding: 8px 9px; }
  .nav-links li a.btn-cta { padding: 10px 16px; }
  .main-nav { padding: 6px 16px; }
  .mega { width: min(680px, calc(100vw - 32px)); }
}

/* ── MOBILE — accordion (aligné sur le breakpoint nav existant : 640px) ── */
@media (max-width: 640px) {
  .mega {
    position: static;
    transform: none !important;
    min-width: 0;
    width: 100%;
    border: none;
    box-shadow: none;
    background: rgba(0,0,0,.18);
    border-radius: 0;
    opacity: 0;
    visibility: hidden;
    max-height: 0;
    overflow: hidden;
    pointer-events: none;
    transition: opacity .25s ease, max-height .35s cubic-bezier(.2,.7,.2,1), visibility 0s linear .35s;
  }
  .nav-item--mega.is-open > .mega {
    opacity: 1;
    visibility: visible;
    max-height: 1400px;
    pointer-events: auto;
    transform: none !important;
    left: auto !important;
    transition-delay: 0s;
  }
  .nav-item--mega::after { display: none; }
  .mega__inner {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 4px 0 14px;
  }
  .mega__col {
    padding: 8px 0;
  }
  .mega__col + .mega__col {
    border-left: none;
    padding-left: 0;
    margin-left: 0;
    margin-top: 4px;
    border-top: 1px solid rgba(255,255,255,.08);
  }
  /* Section header (Géolocalisation GPS, Apprendre…) — petit eyebrow orange */
  .mega__title {
    font-size: .68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.6px;
    color: rgba(232,83,10,.85);
    padding: 16px 24px 6px 40px;
    margin: 0;
    border-bottom: none;
    line-height: 1.4;
  }
  .mega__col ul { padding: 0; margin: 0; }
  .mega__col li { margin: 0; }
  /* SUB-ITEMS — visuellement subordonnés aux top-level */
  .mega__col li a {
    font-size: .92rem;
    font-weight: 400;
    padding: 11px 24px 11px 40px;
    color: rgba(255, 255, 255, .72);
    display: block;
    border-radius: 0;
    position: relative;
    line-height: 1.4;
  }
  .mega__col li a::before {
    content: '';
    position: absolute;
    left: 24px; top: 50%;
    width: 8px; height: 1px;
    background: rgba(255,255,255,.25);
    transform: translateY(-50%);
    transition: background .2s ease, width .2s ease;
  }
  .mega__col li a:hover,
  .mega__col li a:focus-visible,
  .mega__col li a:active {
    background: rgba(232,83,10,.10);
    color: #fff;
  }
  .mega__col li a:hover::before,
  .mega__col li a:active::before {
    background: var(--orange);
    width: 14px;
  }
  .mega__more {
    margin-top: 4px !important;
    padding-top: 11px !important;
    color:var(--orange-text) !important;
    font-weight: 600 !important;
    font-size: .88rem !important;
  }
  .mega__more::before { display: none !important; }
  .nav-item--mega .nav-trigger { width: 100%; justify-content: space-between !important; }
}

/* HERO SLIDER */
.hero-slider{position:relative;height:90vh;min-height:500px;max-height:780px;overflow:hidden;background:var(--dark)}
.slide{position:absolute;inset:0;opacity:0;transition:opacity .9s ease;display:flex;align-items:center}
.slide.active{opacity:1;z-index:2}
.slide-bg{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.06);transition:transform 8s ease}
.slide.active .slide-bg{transform:scale(1)}
.slide-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(26,26,46,.88) 38%,rgba(26,26,46,.25) 100%)}
.slide-content{position:relative;z-index:3;padding:0 24px;max-width:660px;margin:0 64px;color:#fff}
.slide-tag{display:inline-block;background:var(--orange);color:#fff;font-family:var(--fh);font-size:.72rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;padding:5px 13px;border-radius:3px;margin-bottom:18px}
.slide-content h1{font-size:clamp(1.9rem,4vw,3.2rem);font-weight:800;margin-bottom:14px;text-shadow:0 2px 12px rgba(0,0,0,.3)}
.slide-content p{font-size:1.05rem;color:rgba(255,255,255,.82);margin-bottom:28px}
.slide-btns{display:flex;gap:14px;flex-wrap:wrap}
.slider-bullets{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);display:flex;gap:9px;z-index:10}
.slider-bullets button{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.35);transition:var(--tr)}
.slider-bullets button.active{background:var(--orange);transform:scale(1.4)}
.slider-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:10;background:rgba(255,255,255,.12);color:#fff;border:2px solid rgba(255,255,255,.25);width:46px;height:46px;border-radius:50%;font-size:1.1rem;display:flex;align-items:center;justify-content:center;transition:var(--tr)}
.slider-arrow:hover{background:var(--orange);border-color:var(--orange)}
.slider-arrow.prev{left:20px} .slider-arrow.next{right:20px}

/* PAGE HERO */
.page-hero{position:relative;padding:96px 0 64px;background:var(--dark);color:#fff;overflow:hidden}
.page-hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.22}
.page-hero .container{position:relative;z-index:2}
.page-hero h1{margin-bottom:16px}
.page-hero .lead{color:rgba(255,255,255,.78);font-size:1.08rem;max-width:680px}
.breadcrumb{display:flex;gap:8px;align-items:center;font-size:.82rem;color:rgba(255,255,255,.55);margin-bottom:18px;font-family:var(--fh)}
.breadcrumb a{color:var(--orange)}

/* FEATURES */
.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.feature-card{background:#fff;border-radius:10px;padding:36px 26px;box-shadow:var(--sh);transition:var(--tr);border-top:3px solid transparent;text-align:center}
.feature-card:hover{transform:translateY(-6px);border-top-color:var(--orange);box-shadow:0 12px 36px rgba(0,0,0,.15)}
.feature-icon{width:62px;height:62px;background:rgba(232,83,10,.1);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.7rem;margin:0 auto 18px}
.feature-card h3{color:var(--dark);margin-bottom:8px} .feature-card p{color:var(--textl);font-size:.92rem;margin:0}

/* SPLIT */
.split-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.split-grid.reverse .split-img{order:2} .split-grid.reverse .split-text{order:1}
.split-img img{border-radius:10px;box-shadow:0 16px 48px rgba(0,0,0,.2);width:100%;object-fit:cover}
.check-list{margin-top:22px;display:flex;flex-direction:column;gap:13px}
.check-item{display:flex;align-items:flex-start;gap:11px}
.check-dot{width:22px;height:22px;background:var(--orange);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:.75rem;flex-shrink:0;margin-top:2px}
.check-item p{margin:0;color:var(--textl);font-size:.95rem}
.section--dark .check-item p{color:rgba(255,255,255,.72)}

/* COMPONENTS */
.components-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.comp-card{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:34px 26px;text-align:center;transition:var(--tr)}
.comp-card:hover{background:rgba(232,83,10,.1);border-color:var(--orange)}
.comp-icon{font-size:2.8rem;margin-bottom:18px}
.comp-card h3{color:#fff;margin-bottom:12px}
.comp-card ul{color:rgba(255,255,255,.68);font-size:.88rem;text-align:left;padding-left:4px}
.comp-card ul li{padding:3px 0} .comp-card ul li::before{content:"→ ";color:var(--orange)}

/* SOLUTIONS CARDS */
.solutions-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.sol-card{border-radius:10px;overflow:hidden;box-shadow:var(--sh);transition:var(--tr);background:#fff}
.sol-card:hover{transform:translateY(-6px);box-shadow:0 16px 48px rgba(0,0,0,.18)}
.sol-card img{width:100%;height:215px;object-fit:cover}
.sol-body{padding:26px}
.sol-tag{display:inline-block;background:rgba(232,83,10,.1);color:var(--orange-text);font-size:.72rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;padding:4px 10px;border-radius:3px;margin-bottom:10px}
.sol-card h3{margin-bottom:8px} .sol-card p{color:var(--textl);font-size:.9rem;margin-bottom:18px}

/* TESTIMONIALS */
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.testi-card{background:#fff;border-radius:10px;padding:30px 26px;box-shadow:var(--sh);position:relative}
.testi-card::before{content:'"';font-family:Georgia,serif;font-size:5rem;color:var(--orange-text);opacity:.18;position:absolute;top:6px;left:18px;line-height:1}
.testi-text{font-style:italic;color:var(--text);margin-bottom:22px;position:relative;z-index:1}
.testi-author{display:flex;align-items:center;gap:11px}
.testi-av{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,var(--orange),var(--orange2));display:flex;align-items:center;justify-content:center;color:#fff;font-family:var(--fh);font-weight:700;font-size:.95rem;flex-shrink:0}
.testi-name{font-family:var(--fh);font-weight:700;font-size:.88rem;color:var(--dark)} .testi-company{font-size:.78rem;color:var(--textl)}
.stars{color:#FFB800;font-size:.85rem;margin-bottom:7px}

/* SECTORS */
.sectors-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.sec-card{background:#fff;border-radius:10px;padding:24px 20px;box-shadow:0 2px 14px rgba(0,0,0,.07);display:flex;align-items:center;gap:14px;transition:var(--tr);border-left:4px solid transparent}
.sec-card:hover{border-left-color:var(--orange);transform:translateX(4px)}
.sec-icon{font-size:1.9rem;flex-shrink:0}
.sec-card h3{font-size:.95rem;margin-bottom:3px} .sec-card p{font-size:.82rem;color:var(--textl);margin:0}

/* FAQ */
.faq-wrap{max-width:860px;margin:0 auto}
.faq-item{border:1px solid var(--grey2);border-radius:8px;margin-bottom:11px;overflow:hidden;transition:var(--tr)}
.faq-item.open{box-shadow:0 4px 20px rgba(232,83,10,.12)}
.faq-q{display:flex;align-items:center;justify-content:space-between;padding:20px 22px;cursor:pointer;font-family:var(--fh);font-weight:600;font-size:.98rem;color:var(--dark);gap:14px;background:#fff;transition:var(--tr)}
.faq-item.open .faq-q{background:var(--dark);color:#fff}
.faq-chev{width:26px;height:26px;border-radius:50%;background:rgba(232,83,10,.1);display:flex;align-items:center;justify-content:center;color:var(--orange-text);font-size:.95rem;flex-shrink:0;transition:var(--tr)}
.faq-item.open .faq-chev{background:var(--orange);color:#fff;transform:rotate(180deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .4s ease,padding .4s ease;padding:0 22px;background:#fff}
.faq-item.open .faq-a{max-height:600px;padding:18px 22px}
.faq-a p{color:var(--textl);margin:0}

/* CONTACT */
.contact-grid{display:grid;grid-template-columns:3fr 2fr;gap:56px;align-items:start}
.contact-form{display:flex;flex-direction:column;gap:15px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.form-group{display:flex;flex-direction:column;gap:5px}
.form-group label{font-family:var(--fh);font-size:.8rem;font-weight:600;color:var(--dark);letter-spacing:.5px}
.form-group input,.form-group select,.form-group textarea{padding:13px 15px;border:1.5px solid var(--grey2);border-radius:var(--r);font-size:.92rem;color:var(--dark);background:#fff;transition:var(--tr);outline:none}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--orange);box-shadow:0 0 0 3px rgba(232,83,10,.1)}
.form-group textarea{resize:vertical;min-height:130px}
.form-success{display:none;background:#e8f5e9;border:1px solid #4caf50;color:#2e7d32;padding:14px;border-radius:var(--r);font-weight:600;text-align:center}
.contact-info-box{background:var(--dark);color:#fff;border-radius:10px;padding:38px 30px}
.contact-info-box h3{color:#fff;margin-bottom:26px}
.ci-item{display:flex;gap:14px;margin-bottom:22px;align-items:flex-start}
.ci-icon{width:38px;height:38px;background:rgba(232,83,10,.2);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1rem;flex-shrink:0;color:var(--orange)}
.ci-label{font-family:var(--fh);font-size:.74rem;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:rgba(255,255,255,.45);margin-bottom:3px}
.ci-value{color:#fff;font-size:.9rem} .ci-value a{color:var(--orange)}
.ci-social{display:flex;gap:10px;margin-top:28px}
.ci-social a{width:38px;height:38px;background:rgba(255,255,255,.1);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:.95rem;transition:var(--tr)}
.ci-social a:hover{background:var(--orange)}

/* CTA */
.cta-banner{padding:70px 0;text-align:center}
.cta-banner h2{font-size:clamp(1.5rem,3vw,2.3rem);margin-bottom:10px}
.cta-banner p{opacity:.85;margin-bottom:28px}
.cta-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* STATS */
.stats-band{padding:44px 0;background:var(--orange)}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;text-align:center}
.stat-num{font-family:var(--fh);font-size:2.6rem;font-weight:800;color:#fff;line-height:1}
.stat-lbl{font-size:.82rem;color:rgba(255,255,255,.82);margin-top:5px}

/* ARTICLE */
.article-hero{position:relative;padding:110px 0 72px;background:var(--dark);color:#fff;overflow:hidden}
.article-hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.2}
.article-meta{display:flex;align-items:center;gap:14px;margin-bottom:22px;flex-wrap:wrap}
.art-tag{background:var(--orange);color:#fff;font-family:var(--fh);font-size:.7rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;padding:5px 11px;border-radius:3px}
.art-author{font-size:.85rem;color:rgba(255,255,255,.6)}
.article-body{max-width:840px;margin:0 auto;padding:60px 24px}
.article-body h2{color:var(--dark);margin:38px 0 14px;font-size:1.45rem}
.article-body h3{color:var(--dark);margin:28px 0 10px}
.article-body p{color:var(--text);line-height:1.85;margin-bottom:18px}
.article-body ul{margin:0 0 18px 22px;list-style:disc}
.article-body ul li{color:var(--text);margin-bottom:7px;line-height:1.6}
.article-body blockquote{border-left:4px solid var(--orange);padding:14px 22px;margin:28px 0;background:rgba(232,83,10,.05);border-radius:0 8px 8px 0;font-style:italic}
.article-cta{background:var(--dark);border-radius:10px;padding:38px;text-align:center;margin-top:44px;color:#fff}
.article-cta h3{color:#fff;margin-bottom:10px} .article-cta p{color:rgba(255,255,255,.72);margin-bottom:22px}

/* REVEAL — bidirectionnel
   Entrée : délai via --td (stagger), sortie : 0s (immédiate, pas de délai) */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s ease, transform .6s ease;
  transition-delay: 0s;          /* sortie : aucun délai */
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
  transition-delay: var(--td, 0s); /* entrée : délai stagger */
}
.reveal.d1 { --td: .08s; }
.reveal.d2 { --td: .16s; }
.reveal.d3 { --td: .24s; }
.reveal.d4 { --td: .32s; }
.reveal.d5 { --td: .40s; }

/* ── TRUST LOGOS — bande "Ils nous font confiance" ── */
.trust-logos-section {
  background: #ffffff;
  padding: 28px 0 32px;
  border-bottom: 1px solid #eef0f5;
}
.trust-logos-label {
  text-align: center;
  font-family: var(--fh);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: #6b7a91;
  margin-bottom: 22px;
}
.trust-logos-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
}
.trust-logos-strip img {
  height: 50px;
  width: auto;
  max-width: 130px;
  object-fit: contain;
  filter: grayscale(100%) opacity(.55);
  transition: filter .35s ease, transform .35s ease;
}
.trust-logos-strip img:hover {
  filter: grayscale(0%) opacity(1);
  transform: scale(1.06);
}

/* ── BANDE TRANSITION SECTEURS → FAQ ── */
.sector-faq-bridge {
  background: var(--dark);
  padding: 65px 24px 80px;
  text-align: center;
  position: relative;
  overflow: visible;
}
/* Chevron directionnel — centré sur la bordure entre sections */
.sfb-arrow-cue {
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
  width: 44px;
  height: 44px;
  background: var(--dark);
  border: 2px solid rgba(232,83,10,.45);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  box-shadow: 0 0 0 6px var(--warm);
}
.sfb-inner {
  position: relative;
  z-index: 1;
  max-width: 620px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.sfb-question {
  font-family: var(--fh);
  font-size: clamp(1.15rem, 2.5vw, 1.55rem);
  font-weight: 700;
  color: #fff;
  margin: 0;
  line-height: 1.3;
}
.sfb-sub {
  font-size: .95rem;
  color: rgba(255,255,255,.72);
  margin: 0 0 8px;
}
.sfb-btn {
  padding: 14px 32px;
  font-size: 1rem;
  background: var(--orange) !important;
  color: #fff !important;
  border: none;
  box-shadow: 0 6px 24px rgba(232,83,10,.4);
}
.sfb-btn:hover {
  box-shadow: 0 10px 32px rgba(232,83,10,.55);
  transform: translateY(-2px);
}

/* ── FAQ HOMEPAGE ── */
.home-faq-section {
  background: var(--warm);
  padding-bottom: 64px;
}
.home-faq-section .faq-wrap { max-width: 800px; }
.home-faq-section h2 { color: var(--dark); }
.home-faq-more {
  text-align: center;
  margin-top: 32px;
}
.home-faq-more a {
  color:var(--orange-text);
  font-family: var(--fh);
  font-weight: 700;
  font-size: .95rem;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: border-color .2s;
}
.home-faq-more a:hover { border-bottom-color: var(--orange); }

/* FEATURES KEY SECTION */
.features-key-section .fks-head h2 { max-width: 680px; margin-left: auto; margin-right: auto; }

/* FOOTER */
.site-footer{background:var(--dark2);color:rgba(255,255,255,.78);padding:60px 0 0}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr;gap:36px;padding-bottom:44px;border-bottom:1px solid rgba(255,255,255,.08)}
.footer-logo{width:230px;height:80px;object-fit:contain;object-position:left center;margin-bottom:18px}
.footer-about{font-size:.86rem;color:rgba(255,255,255,.5);line-height:1.7;margin-bottom:22px}
.footer-social{display:flex;gap:9px}
.footer-social a{width:34px;height:34px;background:rgba(255,255,255,.08);border-radius:50%;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.65);font-size:.9rem;transition:var(--tr)}
.footer-social a:hover{background:var(--orange);color:#fff}
.footer-col h4{font-family:var(--fh);font-size:.75rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--orange-text);margin-bottom:18px}
.footer-col ul li{margin-bottom:9px}
.footer-col ul li a{font-size:.86rem;color:rgba(255,255,255,.55);transition:var(--tr)}
.footer-col ul li a:hover{color:var(--orange-text);padding-left:4px}
.fc-item{display:flex;align-items:flex-start;gap:9px;margin-bottom:12px;font-size:.86rem;color:rgba(255,255,255,.6)}
.fc-icon{color:var(--orange-text);font-size:.95rem;flex-shrink:0;margin-top:2px}
.fc-item a{color:rgba(255,255,255,.6);transition:var(--tr)} .fc-item a:hover{color:var(--orange)}
.footer-bottom{padding:18px 0;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px}
.footer-bottom p{font-size:.78rem;color:rgba(255,255,255,.35)}
.footer-bottom a{color:rgba(255,255,255,.35);transition:var(--tr)} .footer-bottom a:hover{color:var(--orange)}
.fb-links{display:flex;gap:18px;flex-wrap:wrap}


/* RESPONSIVE */
@media(max-width:900px){
  .features-grid,.solutions-grid,.testi-grid,.components-grid{grid-template-columns:repeat(2,1fr)}
  .sectors-grid{grid-template-columns:repeat(2,1fr)}
  .split-grid{grid-template-columns:1fr;gap:32px}
  .split-grid.reverse .split-img,.split-grid.reverse .split-text{order:unset}
  .footer-grid{grid-template-columns:1fr 1fr}
  .contact-grid{grid-template-columns:1fr}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .form-row{grid-template-columns:1fr}
}
@media(max-width:640px){
  .section{padding:52px 0}
  .mini-form-row{grid-template-columns:1fr}
  .features-grid,.solutions-grid,.testi-grid,.components-grid,.sectors-grid{grid-template-columns:1fr}
  .hero-slider{height:100vh;max-height:none}
  .slide-content{margin:0 24px}
  .slide-content h1{font-size:1.85rem}
  .slide-btns{flex-direction:column}
  .footer-grid{grid-template-columns:1fr}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .footer-bottom{flex-direction:column;text-align:center}
  .nav-logo img{width:160px;height:56px}
  .nav-toggle{display:flex; z-index:1001; position:relative}
  .nav-toggle.open span{background:#fff}
  .nav-links{
    position:fixed; top:0; left:0; right:0; bottom:0;
    background:var(--dark);
    flex-direction:column;
    justify-content:flex-start;
    align-items:stretch;
    gap:0;
    padding:88px 0 32px;
    transform:translateX(100%);
    transition:transform .35s ease;
    z-index:999;
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }
  .nav-links.open{transform:translateX(0)}
  .nav-links > li{ width:100%; border-bottom:1px solid rgba(255,255,255,.08) }
  .nav-links > li:last-child{ border-bottom:none }
  /* TOP-LEVEL items — distinctifs et hiérarchiques */
  .nav-links > li > a{
    color:#fff;
    font-size:1.18rem;
    font-weight:700;
    letter-spacing:-.01em;
    padding:20px 24px;
    display:flex; align-items:center; justify-content:flex-start;
    width:100%; border-radius:0;
    line-height:1.2;
  }
  .nav-links > li > a:active,
  .nav-links > li > a:focus-visible{
    background: rgba(255,255,255,.05);
    color: #fff;
  }
  .nav-links > li.nav-item--mega.is-open > a{
    color:var(--orange-text);
    background: rgba(232,83,10,.08);
  }
  .nav-links .nav-trigger{ justify-content:space-between !important }
  .nav-links .nav-chev{
    color:rgba(255,255,255,.45);
    font-size:.7rem;
    transition:transform .25s cubic-bezier(.2,.7,.2,1), color .25s ease;
    width:24px; height:24px;
    display:inline-flex; align-items:center; justify-content:center;
    border-radius:50%;
    background: rgba(255,255,255,.05);
  }
  .nav-links .nav-item--mega.is-open .nav-chev{
    transform:rotate(180deg);
    color:#fff;
    background: var(--orange);
  }
  .nav-links li.nav-item--cta{
    position: sticky;
    bottom: 0;
    margin-top: auto;
    padding: 18px 20px calc(18px + env(safe-area-inset-bottom));
    background: var(--dark);
    border-top: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 -8px 24px rgba(0,0,0,.35);
    z-index: 2;
  }
  .nav-links li a.btn-cta{
    background:var(--orange); color:#fff;
    padding:16px 28px;
    border-radius:10px;
    width:100%; justify-content:center;
    font-size:1.02rem;
    font-weight: 700;
    letter-spacing: .3px;
    box-shadow: 0 4px 14px rgba(232,83,10,.35);
  }
  .nav-links li a.btn-cta:hover,
  .nav-links li a.btn-cta:active{ background:var(--orange2); }
  .cta-btns{flex-direction:column;align-items:center}
}

/* =========================================
   HERO CINÉMATIQUE — Photo route + camions
   Photo visible, lumineuse, en plein jour
   ========================================= */

.hero-cinema {
  position: relative;
  min-height: 68svh; /* svh = stable sur mobile : pas de CLS quand la barre d'adresse Safari se rétracte */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  contain: layout paint; /* isole le reflow hero du reste de la page */
}

/* ── PHOTO DE FOND ── */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-bg__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 50%;
  aspect-ratio: 825 / 350; /* réserve le ratio intrinsèque même en absolute+100%/100% → meilleur LCP */
  /* Ken Burns cinématique : scale + pan lent diagonal */
  animation: kenburns 22s ease-in-out infinite;
  transform-origin: center center;
  will-change: transform; /* promote sur une couche composite, libère le main thread */
}
@keyframes kenburns {
  0%   { transform: scale(1.00) translate(0%,    0%);    }
  30%  { transform: scale(1.02) translate(-0.5%,  0.3%); }
  60%  { transform: scale(1.02) translate( 0.5%, -0.3%); }
  100% { transform: scale(1.00) translate( 0%,    0%);   }
}

/* ── PARTICULES FLOTTANTES (zone photo, droite) ── */
.hero-particles {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}
/* Dérive vers la droite */
@keyframes hp-rise {
  0%   { transform: translateY(0)    translateX(0);    opacity: 0;   }
  8%   { opacity: 1; }
  88%  { opacity: .7; }
  100% { transform: translateY(-90px) translateX(14px); opacity: 0;  }
}
/* Dérive vers la gauche */
@keyframes hp-rise-l {
  0%   { transform: translateY(0)    translateX(0);    opacity: 0;   }
  8%   { opacity: 1; }
  88%  { opacity: .7; }
  100% { transform: translateY(-80px) translateX(-12px); opacity: 0; }
}
/* Particule légèrement plus grosse avec shimmer */
@keyframes hp-rise-glow {
  0%   { transform: translateY(0) translateX(0) scale(1);    opacity: 0; }
  10%  { opacity: .5; }
  50%  { transform: translateY(-45px) translateX(8px) scale(1.4); opacity: .3; }
  90%  { opacity: .4; }
  100% { transform: translateY(-85px) translateX(16px) scale(.8); opacity: 0; }
}

/* Positionnement individuel — 5 particules bien réparties dans la zone photo */
.hp1  { width:4px;  height:4px;  left:57%; bottom:12%; animation-name:hp-rise;      animation-duration:19s; animation-delay:0s;  }
.hp3  { width:6px;  height:6px;  left:74%; bottom:10%; animation-name:hp-rise-glow; animation-duration:24s; animation-delay:1s;  }
.hp5  { width:5px;  height:5px;  left:61%; bottom:45%; animation-name:hp-rise-l;    animation-duration:18s; animation-delay:3.5s;}
.hp7  { width:4px;  height:4px;  left:87%; bottom:22%; animation-name:hp-rise-glow; animation-duration:20s; animation-delay:4s;  }
.hp9  { width:5px;  height:5px;  left:92%; bottom:14%; animation-name:hp-rise;      animation-duration:17s; animation-delay:9s;  }

/* Barre orange fine en haut de page */
.hero-topbar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--orange);
  z-index: 10;
}

/* ── DÉGRADÉ OVERLAY ──
   Gauche : sombre (lisibilité texte)
   Centre : transition douce
   Droite : très transparent → photo visible à 85%
   Bas : dégradé vers le bas pour les stats                */
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(
      105deg,
      rgba(10,22,40, 0.86) 0%,
      rgba(10,22,40, 0.55) 38%,
      rgba(10,22,40, 0.18) 62%,
      rgba(10,22,40, 0.04) 100%
    ),
    linear-gradient(
      to bottom,
      transparent 50%,
      rgba(10,22,40, 0.55) 100%
    );
}
/* Grain cinématographique sur le hero */
.hero-cinema::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: .028;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

/* ── INNER GRID ── */
.hero-cinema__inner {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 40px; /* row-gap serré (badge→titre), col-gap large (copy|cards) */
  align-items: center;
  padding: 88px 24px 52px;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  min-height: 62svh; /* svh évite le CLS dû à la barre d'adresse Safari mobile */
}

/* ── Entrée staggerée hero ── */
/* Hero fade-in : opacity uniquement pour éviter tout CLS perçu par Lighthouse */
@keyframes hero-fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@media (prefers-reduced-motion: no-preference) {
  /* Hero-title (candidat LCP) : PAS d'animation — rendu immédiat pour LCP optimal */
  .hero-badge--row  { animation: hero-fadein .4s ease-out 0s     both; }
  .hero-desc        { animation: hero-fadein .4s ease-out .15s   both; }
  .hero-ctas        { animation: hero-fadein .4s ease-out .25s   both; }
  .hero-proof       { animation: hero-fadein .4s ease-out .35s   both; }
  .hero-cards-area  { animation: hero-fadein .5s ease-out .10s   both; }
}

/* ── COPY GAUCHE ── */
.hero-copy {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: rgba(232,83,10,.18);
  border: 1px solid rgba(232,83,10,.4);
  color: #ffbfa0;
  font-family: var(--fh);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 7px 16px;
  border-radius: 50px;
  width: fit-content;
  text-transform: uppercase;
}
/* H1 en première ligne de grille — premier élément lu par Google */
.hero-badge--row {
  grid-column: 1 / -1;
  align-self: end; /* colle le badge au bas de sa row, près du H2 */
}
.hero-badge__dot {
  width: 7px; height: 7px;
  background: #22c55e;
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
  animation: badge-dot-sonar 2s ease-out infinite;
}
@keyframes badge-dot-sonar {
  0%   { box-shadow: 0 0 0 0px rgba(34,197,94,.90); }
  70%  { box-shadow: 0 0 0 10px rgba(34,197,94,.00); }
  100% { box-shadow: 0 0 0 10px rgba(34,197,94,.00); }
}
@keyframes blink {
  0%,100% { opacity: 1; transform: scale(1); }
  50% { opacity: .35; transform: scale(.65); }
}

.hero-title {
  font-size: clamp(2rem, 3.4vw, 3.2rem);
  font-weight: 800;
  color: #fff;
  line-height: 1.1;
  letter-spacing: -.5px;
  margin: 0;
  /* Ombre légère pour contraste sur photo claire */
  text-shadow: 0 2px 24px rgba(0,0,0,.5);
}
.hero-title__accent {
  color:var(--orange-text);
  display: inline;
  position: relative;
}

.hero-desc {
  font-size: 1.08rem;
  color: rgba(255,255,255,.85);
  line-height: 1.75;
  max-width: 480px;
  margin: 0;
  text-shadow: 0 1px 6px rgba(0,0,0,.4);
}

/* CTAs */
.hero-ctas {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.hero-tel-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(255,255,255,.9);
  font-family: var(--fh);
  font-size: .95rem;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: .3px;
  transition: var(--tr);
  margin-top: 4px;
  width: 100%; /* passe à la ligne sous les boutons */
}
.hero-tel-cta span { color: rgba(255,255,255,.5); font-weight: 400; font-size: .82rem; margin-left: 2px; }
.hero-tel-cta:hover { color:var(--orange-text); }
.hero-tel-cta:hover span { color: rgba(232,83,10,.6); }
.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: rgba(255,255,255,.88);
  font-family: var(--fh);
  font-weight: 600;
  font-size: .92rem;
  transition: var(--tr);
  padding: 14px 4px;
  border-bottom: 1px solid rgba(255,255,255,.25);
}
.btn-ghost:hover { color: #fff; border-bottom-color: var(--orange); }
.btn-ghost__play {
  width: 38px; height: 38px;
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .75rem;
  transition: var(--tr);
  flex-shrink: 0;
}
.btn-ghost:hover .btn-ghost__play { background: var(--orange); border-color: var(--orange); }

/* Social proof — étoiles + note */
.hero-proof {
  display: flex;
  align-items: center;
  gap: 10px;
}
.hero-proof__stars {
  display: flex;
  gap: 2px;
  align-items: center;
}
.hps {
  width: 15px;
  height: 15px;
  display: block;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.4));
}
.hero-proof p {
  font-size: .88rem;
  color: rgba(255,255,255,.72);
  margin: 0;
  text-shadow: 0 1px 4px rgba(0,0,0,.5);
  letter-spacing: .01em;
}
.hero-proof p strong {
  color: #fff;
  font-weight: 700;
}

/* ── CARTES FLOTTANTES (colonne droite sur photo) ── */
.hero-cards-area {
  position: relative;
  height: 420px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  justify-content: center;
  align-items: flex-end;
  padding-right: 8px;
}

/* Base glassmorphism */
.hero-glass {
  background: rgba(15, 15, 30, 0.65);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 16px;
  padding: 18px 20px;
  box-shadow: 0 8px 32px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.08);
  color: #fff;
  animation: float-card 5s ease-in-out infinite;
}

@keyframes float-card {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* Carte Live GPS */
.hero-glass--live {
  width: 320px;
  animation-duration: 6s;
  animation-delay: 0s;
}
.hg-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--fh);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #22c55e;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.pulse-dot {
  width: 8px; height: 8px;
  background: #22c55e;
  border-radius: 50%;
  animation: pulse-live 1.5s ease-in-out infinite;
  flex-shrink: 0;
}
/* Sonar unidirectionnel — cohérent avec badge H1 */
@keyframes pulse-live {
  0%   { box-shadow: 0 0 0 0px rgba(34,197,94,.85); }
  70%  { box-shadow: 0 0 0 7px rgba(34,197,94,.00); }
  100% { box-shadow: 0 0 0 7px rgba(34,197,94,.00); }
}
.hg-body { display: flex; flex-direction: column; gap: 10px; }
.hg-vehicle {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
/* Icône véhicule — display correct pour SVG */
.hg-vehicle__icon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  color: rgba(255,255,255,.70);
}
.hg-vehicle__name { font-family: var(--fh); font-size: .82rem; font-weight: 700; color: #fff; }
/* Contraste amélioré : .55 → .72 */
.hg-vehicle__loc { font-size: .72rem; color: rgba(255,255,255,.72); margin-top: 1px; }
.hg-vehicle__speed {
  margin-left: auto;
  font-family: var(--fh);
  font-size: .82rem;
  font-weight: 700;
  color:var(--orange-text);
  background: rgba(232,83,10,.12);
  padding: 3px 9px;
  border-radius: 20px;
  flex-shrink: 0;
}
/* Badges statut véhicule */
.hg-status {
  font-family: var(--fh);
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .08em;
  padding: 2px 7px;
  border-radius: 20px;
  flex-shrink: 0;
}
.hg-status--route {
  color: #22c55e;
  background: rgba(34,197,94,.14);
  border: 1px solid rgba(34,197,94,.28);
}
.hg-status--slow {
  color: #fb923c;
  background: rgba(251,146,60,.12);
  border: 1px solid rgba(251,146,60,.25);
}

/* Carte Alerte — fond teinté + icône orange */
.hero-glass--alert {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 270px;
  animation-duration: 5.5s;
  animation-delay: 1.2s;
  border-left: 3px solid var(--orange);
  background: rgba(232,83,10,.10); /* fond teinté urgence */
}
.hg-alert-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.hg-alert-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.hg-alert-top  { display: flex; align-items: center; gap: 8px; }
.hg-alert-title { font-family: var(--fh); font-size: .84rem; font-weight: 700; color: #fff; }
/* Badge NOUVEAU */
.hg-alert-new {
  font-family: var(--fh);
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: #fff;
  background: var(--orange);
  padding: 2px 7px;
  border-radius: 20px;
  flex-shrink: 0;
}
.hg-alert-sub { font-size: .72rem; color: rgba(255,255,255,.68); margin-top: 1px; }
/* Pill "hors zone" rouge */
.hg-alert-zone {
  display: inline-block;
  font-family: var(--fh);
  font-size: .65rem;
  font-weight: 700;
  color: #fca5a5;
  background: rgba(239,68,68,.18);
  border: 1px solid rgba(239,68,68,.30);
  padding: 1px 7px;
  border-radius: 20px;
  vertical-align: middle;
  margin-left: 2px;
}

/* Carte Stat ROI */
.hero-glass--stat {
  width: 218px;
  animation-duration: 7s;
  animation-delay: 2.5s;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
/* En-tête contextuel */
.hg-stat-head {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: var(--fh);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.45);
  margin-bottom: 2px;
}
/* Chiffre principal */
.hg-stat-val {
  font-family: var(--fh);
  font-size: 2.4rem;
  font-weight: 800;
  color:var(--orange-text);
  line-height: 1;
  letter-spacing: -.02em;
}
.hg-stat-val span {
  font-size: 1.15rem;
  font-weight: 700;
  color: rgba(255,255,255,.75);
  margin-left: 2px;
}
/* Sublabel épuré */
.hg-stat-lbl {
  font-size: .78rem;
  color: rgba(255,255,255,.70);
  line-height: 1.3;
  font-weight: 500;
}
/* Chip ROI — traduction financière concrète */
.hg-stat-roi {
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--fh);
  font-size: .70rem;
  font-weight: 700;
  color: #4ade80;
  background: rgba(34,197,94,.12);
  border: 1px solid rgba(34,197,94,.28);
  padding: 4px 10px;
  border-radius: 20px;
  letter-spacing: .02em;
  width: fit-content;
}

/* ── STATS BAND en bas du hero ── */
.hero-stats-band {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  z-index: 4;
  background: rgba(18,18,31, 0.78);
  backdrop-filter: blur(14px);
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 20px 0;
}
.hero-stats-grid {
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 16px;
  flex-wrap: wrap;
}
.hero-stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
}
.hero-stat-num {
  font-family: var(--fh);
  font-size: 1.9rem;
  font-weight: 800;
  color:var(--orange-text);
  line-height: 1;
}
.hero-stat-lbl {
  font-size: .74rem;
  color: rgba(255,255,255,.6);
  max-width: 130px;
  line-height: 1.3;
}
.hero-stat-sep {
  width: 1px;
  height: 36px;
  background: rgba(255,255,255,.1);
  flex-shrink: 0;
}

/* ── Vague de transition ── */
.hero-wave {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  z-index: 5;
  pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, var(--orange) 15%, var(--orange) 85%, transparent 100%);
  /* ombre asymétrique : légère au-dessus, forte en-dessous → gravité visuelle vers le bas */
  box-shadow:
    0 -2px  6px 0px rgba(232,83,10,.15),
    0  6px 28px 6px rgba(232,83,10,.42);
}
/* Goutte centrale — "drip" qui tire l'œil vers le bas */
.hero-wave::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 2px;
  transform: translateX(-50%);
  width: 6px;
  height: 14px;
  background: var(--orange);
  border-radius: 0 0 8px 8px;
  opacity: .75;
  filter: blur(1.5px);
}
.hero-wave svg { display: none; }

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  .hero-cinema__inner {
    grid-template-columns: 1fr;
    padding-top: 80px;
    padding-bottom: 160px;
    gap: 40px;
    min-height: auto;
  }
  .hero-cards-area {
    height: auto;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    padding-right: 0;
  }
  .hero-glass--live { width: 100%; max-width: 340px; }
  .hero-glass--alert { width: auto; }
  .hero-glass--stat { width: auto; }
  /* Sur tablette, photo un peu plus visible à droite */
  .hero-overlay {
    background:
      linear-gradient(160deg,
        rgba(18,18,31, 0.82) 0%,
        rgba(18,18,31, 0.60) 50%,
        rgba(18,18,31, 0.45) 100%
      ),
      linear-gradient(to bottom, transparent 55%, rgba(18,18,31,.6) 100%);
  }
  .hero-stats-grid { gap: 12px; }
  .hero-stat-sep { display: none; }
}

@media (max-width: 640px) {
  .hero-cinema { min-height: auto; }
  .hero-bg__img { background-position: left center; }
  .hero-cinema__inner { padding-top: 64px; padding-bottom: 64px; }
  .hero-title { font-size: 2.3rem; }
  .hero-desc { font-size: 1rem; }
  .hero-ctas { flex-direction: column; align-items: flex-start; }
  .hero-cards-area { gap: 12px; flex-direction: row; flex-wrap: wrap; align-items: flex-start; }
  .hero-glass { padding: 14px 16px; }
  .hero-glass--live { width: 100%; }
  .hero-glass--alert { width: auto; flex-shrink: 1; align-self: flex-start; }
  .hero-glass--stat  { width: auto; flex-shrink: 1; align-self: flex-start; }
  .hg-vehicle__speed { font-size: .78rem; }
  .hero-stats-grid { gap: 14px 20px; }
  .hero-stat-num { font-size: 1.5rem; }
  .hero-badge { font-size: .7rem; }
}

/* =========================================
   LAYOUT CONVERSION — Sous le hero
   ========================================= */

/* ── ① DOULEURS / BÉNÉFICES (compact 3 colonnes) ── */
.pain-section {
  padding: 52px 0 56px;
  background: var(--warm);
  border-bottom: 1px solid var(--grey2);
}
.pain-eyebrow {
  font-family: var(--fh);
  font-size: 1.08rem;
  font-weight: 700;
  letter-spacing: -.01em;
  text-transform: none;
  color: var(--dark);
  margin-bottom: 28px;
}
.pain-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: var(--grey2);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(26,26,46,.08);
}
.pain-col {
  background: var(--warm);
  padding: 36px 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  transition: var(--tr);
  position: relative;
  overflow: hidden;
}
/* Chiffre fantôme derrière chaque colonne */
.pain-col::before {
  content: attr(data-num);
  position: absolute;
  top: -12px;
  right: 12px;
  font-family: var(--fh);
  font-size: 7rem;
  font-weight: 800;
  color:var(--orange-text);
  opacity: .05;
  line-height: 1;
  pointer-events: none;
  user-select: none;
  letter-spacing: -.04em;
}
.pain-col:hover { background: #F0EDE6; }
.pain-col__top { display: flex; flex-direction: column; gap: 12px; }
.pain-col__icon { font-size: 2rem; line-height: 1; }
.pain-col__problem {
  font-size: 1rem;
  font-weight: 700;
  color: var(--dark);
  line-height: 1.35;
  margin: 0;
}
.pain-col__desc {
  font-size: .84rem;
  color: var(--textl);
  line-height: 1.55;
  margin: 0;
}
.pain-col__bottom {
  border-top: 1px solid var(--grey2);
  padding-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pain-col__result {
  font-family: var(--fh);
  font-size: 1.35rem;
  font-weight: 800;
  color:var(--orange-text);
  line-height: 1.3;
}
.pain-col__cta {
  font-family: var(--fh);
  font-size: .82rem;
  font-weight: 600;
  color:var(--orange-text);
  letter-spacing: .3px;
  opacity: .8;
  text-decoration: none;
  cursor: pointer;
}
.pain-col__cta:hover { opacity: 1; text-decoration: underline; }

@media (max-width: 768px) {
  .pain-cols {
    grid-template-columns: 1fr;
    gap: 1px;
  }
}

/* CTA fin de pain-section */
.pain-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 36px;
  flex-wrap: wrap;
}

/* CTA fin de proof-section */
.proof-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 48px;
  padding-top: 40px;
  border-top: 1px solid var(--grey2);
  flex-wrap: wrap;
}

/* ── ② COMMENT ÇA MARCHE ── */
.how-section {
  background: linear-gradient(180deg, var(--warm) 0%, #fff 100%);
}
.how-section .label { color:var(--orange-text); }
.how-section h2 { color: var(--dark); }

.how-intro {
  color: #5a6272;
  font-size: 1.05rem;
  max-width: 600px;
  margin: 0 auto 56px;
}
.how-grid {
  display: grid;
  grid-template-columns: 1fr 48px 1fr 48px 1fr;
  gap: 0;
  align-items: start;
  margin-bottom: 56px;
  text-align: left;
}
.how-step {
  background: #ffffff;
  border: 1px solid #e8ecf4;
  border-top: 4px solid var(--orange);
  border-radius: 14px;
  padding: 32px 28px;
  box-shadow: 0 4px 24px rgba(26,26,46,.07);
  transition: var(--tr);
  position: relative;
}
.how-step:hover {
  box-shadow: 0 8px 40px rgba(232,83,10,.15);
  border-top-color: var(--orange);
  transform: translateY(-4px);
}

.how-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  background: var(--orange);
  color: #fff;
  font-family: var(--fh);
  font-size: 1rem;
  font-weight: 800;
  border-radius: 50%;
  line-height: 1;
  margin-bottom: 20px;
  box-shadow: 0 4px 14px rgba(232,83,10,.35);
}
.how-icon { font-size: 2rem; margin-bottom: 14px; }
.how-step:has(.how-img-wrap) {
  padding: 0;
}
.how-step:has(.how-img-wrap) h3 {
  margin: 18px 28px 8px;
}
.how-step:has(.how-img-wrap) p {
  margin: 0 28px;
  padding-bottom: 24px;
}

.how-img-wrap {
  width: 100%;
  height: 165px;
  border-radius: 10px 10px 0 0;
  overflow: hidden;
  position: relative;
}
.how-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform .5s ease;
}
.how-step:hover .how-img-wrap img {
  transform: scale(1.05);
}

/* Numéro en badge sur l'image */
.how-img-wrap .how-num {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  width: 38px;
  height: 38px;
  font-size: .85rem;
  box-shadow: 0 3px 10px rgba(0,0,0,.3);
}
.how-step h3 { color: var(--dark); font-size: 1.05rem; margin-bottom: 10px; }
.how-step p { color: #5a6272; font-size: .92rem; line-height: 1.65; margin: 0; }

/* .how-connector — redéfini dans le bloc UX effects (SVG line draw) */

.how-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
}
.how-cta-or {
  color: #8a94a6;
  font-size: .85rem;
  font-family: var(--fh);
}
.btn-tel-inline {
  font-family: var(--fh);
  font-weight: 700;
  font-size: 1.05rem;
  color:var(--orange-text);
  background: rgba(232,83,10,.12);
  border: 1px solid rgba(232,83,10,.3);
  padding: 14px 24px;
  border-radius: var(--r);
  transition: var(--tr);
  text-decoration: none;
}
.btn-tel-inline:hover { background: var(--orange); color: #fff; }


/* ── ② bis FEATURES CLÉS ── */
.features-key-section {
  background: linear-gradient(180deg, #fff 0%, #f8f9fc 100%);
}
.fks-head {
  margin-bottom: 52px;
}
.fks-head h2 {
  color: var(--dark);
  max-width: 560px;
  margin: 0 auto;
}

/* Libellé de groupe */
.fks-group {
  margin-bottom: 18px;
}
.fks-group-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--fh);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color:var(--orange-text);
  padding: 6px 14px;
  background: var(--dark);
  border-radius: 20px;
  box-shadow: 0 2px 10px rgba(26,26,46,.25);
}

.fks-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  align-items: start;
  margin-bottom: 48px;
}
/* Labels de groupe — span toute la largeur dans la grille */
.fks-grid > .fks-group {
  grid-column: 1 / -1;
  margin-bottom: 0;
}
/* Stagger : cartes centrales (col 2) décalées vers le bas
   nth-child(3) = carte 2, nth-child(7) = carte 5
   (les nth-child(1) et (5) sont les labels de groupe) */
.fks-grid > .fks-card:nth-child(3),
.fks-grid > .fks-card:nth-child(7) {
  margin-top: 36px;
}
.fks-card {
  background: linear-gradient(160deg, #fff 60%, #fef7f4 100%);
  border-radius: 12px;
  border: 1px solid rgba(232,78,15,.14);
  border-top: 3px solid var(--orange);
  box-shadow: 0 4px 20px rgba(232,78,15,.07), 0 1px 4px rgba(26,26,46,.05);
  padding: 32px 26px 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  transition: transform .25s ease, box-shadow .25s ease;
  position: relative;
  overflow: hidden;
}
/* SVG de fond — grande version estompée de l'icône */
.fks-card-bg {
  position: absolute;
  bottom: -18px;
  right: -18px;
  width: 130px;
  height: 130px;
  opacity: .06;
  color:var(--orange-text);
  pointer-events: none;
  transition: opacity .3s ease, transform .3s ease;
}
.fks-card:hover .fks-card-bg {
  opacity: .10;
  transform: scale(1.06) rotate(4deg);
}
/* Underline orange qui s'étend de gauche à droite */
.fks-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  height: 3px;
  width: 100%;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .35s cubic-bezier(.4,0,.2,1);
}
.fks-card:hover::after { transform: scaleX(1); }
/* Coin décoratif en haut à droite */
.fks-card::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 48px; height: 48px;
  background: radial-gradient(circle at top right, rgba(232,78,15,.08) 0%, transparent 70%);
  pointer-events: none;
}
.fks-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 36px rgba(232,78,15,.14), 0 2px 8px rgba(0,0,0,.05);
  background: linear-gradient(160deg, #fff 40%, #fef3ee 100%);
}
.fks-icon-wrap {
  width: 60px; height: 60px;
  background: rgba(232,78,15,.1);
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  color:var(--orange-text);
  transition: background .25s ease, transform .25s ease;
  box-shadow: 0 2px 8px rgba(232,78,15,.12);
}
.fks-icon-wrap svg {
  width: 30px; height: 30px;
}
.fks-card:hover .fks-icon-wrap {
  background: rgba(232,78,15,.18);
  transform: scale(1.08) rotate(-3deg);
}
.fks-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.fks-title {
  font-family: var(--fh);
  font-size: .97rem;
  font-weight: 700;
  color: var(--dark);
  margin: 0;
}
.fks-desc {
  font-size: .88rem;
  color: var(--textl);
  line-height: 1.6;
  margin: 0;
  flex: 1;
}
.fks-link {
  font-family: var(--fh);
  font-size: .84rem;
  font-weight: 700;
  color:var(--orange-text);
  text-decoration: none;
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: gap .2s ease;
}
.fks-link:hover { gap: 8px; }
.fks-footer {
  text-align: center;
  margin-top: 8px;
}

/* Vitrine produit — entre les deux groupes */
.fks-showcase {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 48px;
  background: linear-gradient(135deg, var(--dark) 0%, #0d1020 100%);
  border-radius: 20px;
  padding: 48px 56px;
  margin-bottom: 52px;
  position: relative;
  overflow: hidden;
}
/* Glow central — suit le téléphone au centre */
.fks-showcase::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 55% 90% at 50% 50%, rgba(232,83,10,.12) 0%, transparent 65%);
  pointer-events: none;
}
/* Placement explicite : texte gauche | image centre | notifs droite */
.fks-showcase-text  { grid-column: 1; grid-row: 1; }
.fks-showcase-img   { grid-column: 2; grid-row: 1; }
.fks-showcase-right { grid-column: 3; grid-row: 1; }

.fks-showcase-img {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Halo derrière le téléphone */
.fks-showcase-img::before {
  content: '';
  position: absolute;
  inset: -32px;
  background: radial-gradient(ellipse, rgba(232,83,10,.18) 0%, transparent 68%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
.fks-showcase-img img {
  width: 240px;
  height: auto;
  display: block;
  filter: drop-shadow(0 24px 48px rgba(0,0,0,.5));
  transition: transform .4s ease;
  position: relative;
  z-index: 1;
}
.fks-showcase:hover .fks-showcase-img img {
  transform: translateY(-8px) scale(1.02);
}
.fks-showcase-text {
  position: relative;
  z-index: 1;
  text-align: left !important;
}
.fks-showcase-text .label {
  color:var(--orange-text);
  margin-bottom: 10px;
}
.fks-showcase-text h3 {
  font-family: var(--fh);
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
  margin: 0 0 20px;
}
.fks-showcase-list {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.fks-showcase-list li {
  color: rgba(255,255,255,.85);
  font-size: .92rem;
  padding-left: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
.fks-showcase-list li::before { display: none !important; }
.fks-check-icon {
  color:var(--orange-text);
  flex-shrink: 0;
}
.fks-badge-free {
  display: inline-block;
  background: rgba(22,163,74,.18);
  color: #4ade80;
  border: 1px solid rgba(22,163,74,.35);
  border-radius: 20px;
  padding: 1px 8px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  margin-left: 4px;
}

/* ── Showcase right panel ── */
.fks-showcase-right {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  align-self: center;
}

/* Notification cards */
.fks-notif-stack { display: flex; flex-direction: column; gap: 10px; }

.fks-notif-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 12px;
  padding: 11px 14px;
  position: relative;
  transition: background .2s ease;
}
.fks-notif-card:hover { background: rgba(255,255,255,.11); }
.fks-notif-card--offset { margin-left: 18px; }

.fks-notif-ico {
  width: 34px; height: 34px;
  border-radius: 9px;
  background: rgba(232,83,10,.18);
  display: flex; align-items: center; justify-content: center;
  color:var(--orange-text);
  flex-shrink: 0;
}
.fks-notif-body { flex: 1; min-width: 0; }
.fks-notif-title {
  font-family: var(--fh);
  font-size: .76rem;
  font-weight: 700;
  color: #fff;
  margin: 0;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fks-notif-meta {
  font-size: .68rem;
  color: rgba(255,255,255,.48);
  margin: 3px 0 0;
  line-height: 1;
}
.fks-notif-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--orange);
  flex-shrink: 0;
  position: absolute;
  top: 9px; right: 10px;
  box-shadow: 0 0 6px rgba(232,83,10,.6);
}
.fks-notif-dot--green {
  background: #4ade80;
  box-shadow: 0 0 6px rgba(74,222,128,.5);
}

.fks-notif-dot--blue {
  background: #60a5fa;
  box-shadow: 0 0 6px rgba(96,165,250,.5);
}

/* Widget synthèse "En direct" */
.fks-live-widget {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 10px;
  padding: 10px 14px;
  margin-top: 4px;
  flex-wrap: wrap;
}
.fks-live-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #4ade80;
  flex-shrink: 0;
  box-shadow: 0 0 6px rgba(74,222,128,.6);
  animation: pulse-live 2s ease-in-out infinite;
}
@keyframes pulse-live {
  0%, 100% { opacity: 1; }
  50% { opacity: .4; }
}
@media (prefers-reduced-motion: reduce) {
  .fks-live-dot { animation: none; }
}
.fks-live-label {
  font-family: var(--fh);
  font-size: .70rem;
  font-weight: 700;
  color: #4ade80;
  text-transform: uppercase;
  letter-spacing: .07em;
}
.fks-live-data {
  font-size: .72rem;
  color: rgba(255,255,255,.55);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 768px) {
  .fks-showcase {
    grid-template-columns: 1fr;
    text-align: center;
    padding: 36px 28px;
    gap: 32px;
  }
  .fks-showcase-img { text-align: center; }
  .fks-showcase-img img { width: 180px; margin: 0 auto; }
  .fks-showcase-list li { justify-content: center; }
  .fks-showcase-right { display: none; }
}

/* ── Hero card (1ère de chaque groupe) ── */
.fks-card--hero {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: center;
  gap: 40px;
  background: linear-gradient(135deg, var(--dark) 0%, #0e1228 100%);
  border-top: none;
  border-left: 4px solid var(--orange);
  border-color: rgba(232,78,15,.0);
  border-left-color: var(--orange);
  padding: 40px 48px;
}
.fks-card--hero .fks-card-bg {
  width: 220px;
  height: 220px;
  bottom: -30px;
  right: -20px;
  opacity: .05;
  color: #fff;
}
.fks-card--hero:hover .fks-card-bg {
  opacity: .09;
}
.fks-card--hero::after {
  background: rgba(255,255,255,.12);
}
.fks-card--hero::before {
  background: radial-gradient(circle at top right, rgba(232,78,15,.12) 0%, transparent 60%);
  width: 300px;
  height: 200px;
}
.fks-card--hero .fks-icon-wrap {
  width: 88px;
  height: 88px;
  flex-shrink: 0;
  border-radius: 22px;
  background: rgba(232,83,10,.16);
  box-shadow: 0 6px 28px rgba(232,83,10,.28);
}
.fks-card--hero .fks-icon-wrap svg {
  width: 44px;
  height: 44px;
}
.fks-card--hero:hover .fks-icon-wrap {
  background: rgba(232,83,10,.26);
}
.fks-card--hero .fks-body {
  gap: 10px;
  flex: 1;
}
.fks-card--hero .fks-title {
  font-size: 1.25rem;
  color: #fff;
}
.fks-card--hero .fks-desc {
  color: rgba(255,255,255,.70);
  font-size: .92rem;
  max-width: 520px;
}
.fks-card--hero .feat-card-tag {
  color:var(--orange-text);
  background: rgba(232,83,10,.12);
  border-color: rgba(232,83,10,.22);
}
.fks-card--hero .fks-link {
  color:var(--orange-text);
}
.fks-card--hero:hover {
  transform: translateY(-3px);
  background: linear-gradient(135deg, #1e2040 0%, #111428 100%);
  box-shadow: 0 16px 52px rgba(232,83,10,.18), 0 4px 12px rgba(0,0,0,.2);
}
/* Badge stat (affiché uniquement dans les hero cards) */
.fks-hero-stat {
  display: none;
}
.fks-card--hero .fks-hero-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-width: 90px;
  padding: 18px 22px;
  background: rgba(232,83,10,.10);
  border: 1px solid rgba(232,83,10,.22);
  border-radius: 16px;
  gap: 4px;
  position: relative;
  z-index: 1;
}
.fks-hero-stat-num {
  font-family: var(--fh);
  font-size: 2rem;
  font-weight: 800;
  color:var(--orange-text);
  line-height: 1;
  letter-spacing: -.02em;
}
.fks-hero-stat-lbl {
  font-size: .67rem;
  font-weight: 700;
  color: rgba(255,255,255,.50);
  text-transform: uppercase;
  letter-spacing: .07em;
  text-align: center;
  line-height: 1.3;
}

@media (max-width: 640px) {
  .fks-card--hero {
    flex-direction: column;
    align-items: flex-start;
    padding: 28px 24px 24px;
    gap: 20px;
    border-left: none;
    border-top: 4px solid var(--orange);
  }
  .fks-card--hero .fks-hero-stat { display: none; }
  .fks-card--hero .fks-icon-wrap { width: 64px; height: 64px; }
  .fks-card--hero .fks-icon-wrap svg { width: 32px; height: 32px; }
  .fks-card--hero .fks-title { font-size: 1.05rem; }
}
@media (max-width: 540px) {
  .fks-grid { grid-template-columns: 1fr; gap: 14px; }
  .fks-card { padding: 24px 20px 20px; }
}

/* ── ③ SOCIAL PROOF ── */
.trust-band {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  background: var(--grey);
  border-radius: 16px;
  padding: 32px 48px;
  margin-bottom: 64px;
  flex-wrap: wrap;
  box-shadow: 0 8px 32px rgba(0,0,0,.28), 0 1px 4px rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.06);
}
.trust-item { text-align: center; }
.trust-num {
  display: block;
  font-family: var(--fh);
  font-size: 2.8rem;
  font-weight: 800;
  color: var(--dark);
  line-height: 1;
  letter-spacing: -.03em;
}
.trust-num span { color:var(--orange-text); }
.trust-lbl { font-size: .78rem; color: var(--textl); margin-top: 4px; display: block; }
.trust-sep { width: 1px; height: 44px; background: rgba(255,255,255,.15); flex-shrink: 0; }

/* Label intro section proof */
.trust-intro-label {
  text-align: center;
  color: rgba(255,255,255,.80);
  margin-bottom: 28px;
  letter-spacing: .1em;
  font-weight: 600;
}
/* Trust num compact pour <24h */
.trust-num-sm {
  display: block;
  font-family: var(--fh);
  font-size: 1.1rem;
  font-weight: 800;
  color: #fff;
  line-height: 1;
}

/* ── SECTION COMPTEURS — fond sombre ── */
.proof-numbers-section {
  background: linear-gradient(135deg, var(--dark) 0%, #0d1020 100%);
  padding: 64px 0;
  position: relative;
  overflow: hidden;
}
.proof-numbers-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 70% at 50% 0%, rgba(232,83,10,.12) 0%, transparent 65%);
  pointer-events: none;
}
/* Trust-band — card clair sur fond sombre : accent orange sur les chiffres */
.proof-numbers-section .trust-num        { color:var(--orange-text); }
.proof-numbers-section .trust-num-sm     { color:var(--orange-text); font-size: 1.35rem; }
.proof-numbers-section .trust-lbl        { color: var(--dark); opacity: .72; font-size: .82rem; font-weight: 500; margin-top: 6px; }
.proof-numbers-section .trust-sep        { background: rgba(0,0,0,.18); }
.proof-numbers-section .trust-ring-bg   { stroke: rgba(232,83,10,.14); }
.proof-numbers-section .trust-item      { min-width: 120px; }

/* btn-tel-inline adapté au fond sombre */
.proof-numbers-section .btn-tel-inline {
  color: rgba(255,255,255,.85);
  border-color: rgba(255,255,255,.3);
}
.proof-numbers-section .btn-tel-inline:hover {
  background: var(--orange);
  color: #fff;
  border-color: var(--orange);
}

/* ── SECTION TÉMOIGNAGES — fond blanc ── */
.testi-section {
  background: #fff;
}
.testi-header { margin-bottom: 40px; }

.testi-grid-conv {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.testi-bg-1 { background-image: url('../images/testimonials/roofing.webp'); }
.testi-bg-2 { background-image: url('../images/testimonials/client-heureux-au-volant-1.webp'); }
.testi-bg-3 { background-image: url('../images/testimonials/cliente-conductrice-satisfaite.webp'); }

.testi-card-conv {
  background-size: cover;
  background-position: center top;
  border-radius: 14px;
  padding: 0;
  box-shadow: 0 4px 24px rgba(0,0,0,.18);
  border-top: 3px solid var(--orange);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  gap: 0;
  transition: var(--tr);
}
.testi-card-conv:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0,0,0,.28); }

/* Overlay sombre sur l'image de fond */
.testi-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,12,26,.60) 0%, rgba(10,12,26,1) 100%);
  border-radius: inherit;
  pointer-events: none;
}

/* Contenu par-dessus l'overlay */
.testi-card-content {
  position: relative;
  z-index: 1;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: 100%;
}
.testi-sector-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(232,83,10,.08);
  color:var(--orange-text);
  font-family: var(--fh);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 20px;
  width: fit-content;
}
.testi-card-conv .stars { color: #FFB800; font-size: .9rem; }
.testi-card-conv blockquote {
  font-style: italic;
  color: rgba(255,255,255,.9);
  font-size: .92rem;
  line-height: 1.7;
  flex: 1;
  position: relative;
  padding-left: 20px;
  border-left: 3px solid rgba(232,83,10,.45);
  margin: 0;
}
.testi-author-conv { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.testi-av-conv {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--orange), var(--orange2));
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-family: var(--fh); font-weight: 700; font-size: .85rem;
  flex-shrink: 0;
}
.testi-name-conv { font-family: var(--fh); font-weight: 700; font-size: .88rem; color: #fff; }
.testi-role-conv { font-size: .76rem; color: rgba(255,255,255,.78); margin-top: 2px; }

/* ── ④ CTA INTERMÉDIAIRE ── */
.cta-mid-section {
  background: var(--dark);
  padding: 72px 0;
}
.cta-mid-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 64px;
  align-items: center;
  background: linear-gradient(135deg, rgba(232,83,10,.12) 0%, rgba(232,83,10,.03) 100%);
  border: 1px solid rgba(232,83,10,.2);
  border-radius: 20px;
  padding: 48px 56px;
}
.cta-mid-text h2 { color: #fff; margin-bottom: 14px; }
.cta-mid-text p { color: rgba(255,255,255,.7); max-width: 480px; }
.cta-mid-list {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cta-mid-list li { color: rgba(255,255,255,.75); font-size: .9rem; list-style: none; }

.cta-mid-actions {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: stretch;
  min-width: 280px;
}

/* Bouton téléphone principal */
.btn-tel-big {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--orange);
  color: #fff;
  border-radius: 12px;
  padding: 20px 24px;
  transition: var(--tr);
  text-decoration: none;
}
.btn-tel-big:hover { background: var(--orange2); transform: translateY(-2px); box-shadow: 0 8px 28px rgba(232,83,10,.4); }
.btn-tel-big__icon { font-size: 1.8rem; flex-shrink: 0; }
.btn-tel-big__action { display: block; font-size: .72rem; font-family: var(--fh); font-weight: 600; letter-spacing: 1px; text-transform: uppercase; opacity: .8; }
.btn-tel-big__num { display: block; font-family: var(--fh); font-size: 1.4rem; font-weight: 800; line-height: 1.1; }
.btn-tel-big__hours { display: block; font-size: .72rem; opacity: .65; margin-top: 2px; }

.cta-mid-or {
  display: flex; align-items: center; gap: 12px;
  color: rgba(255,255,255,.3); font-size: .8rem;
}
.cta-mid-or span { flex: 1; height: 1px; background: rgba(255,255,255,.1); }

/* .btn-tel-mobile supprimé — remplacé par .btn-devis-card */
.btn-tel-mobile--unused {
  display: block; text-align: center;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15);
  color: rgba(255,255,255,.8);
  border-radius: var(--r);
  padding: 13px 20px;
  font-family: var(--fh);
  font-weight: 600;
  font-size: .9rem;
  transition: var(--tr);
  text-decoration: none;
}
.btn-tel-mobile:hover { background: rgba(255,255,255,.14); color: #fff; }
.btn-tel-mobile small { font-size: .75rem; opacity: .65; }

.btn-outline-dark {
  display: block; text-align: center;
  background: transparent;
  border: 1px solid rgba(255,255,255,.2);
  color: rgba(255,255,255,.65);
  border-radius: var(--r);
  padding: 13px 20px;
  font-family: var(--fh);
  font-weight: 600;
  font-size: .9rem;
  transition: var(--tr);
  text-decoration: none;
}
.btn-outline-dark:hover { border-color: var(--orange); color:var(--orange-text); }

/* Carte devis professionnelle */
.btn-devis-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(255,255,255,.07);
  border: 1.5px solid rgba(255,255,255,.2);
  border-radius: 12px;
  padding: 16px 20px;
  text-decoration: none;
  transition: background .25s ease, border-color .25s ease, transform .25s ease;
  width: 100%;
}
.btn-devis-card:hover {
  background: rgba(255,255,255,.13);
  border-color: rgba(232,83,10,.6);
  transform: translateX(4px);
}
.btn-devis-icon {
  width: 44px; height: 44px;
  background: rgba(232,83,10,.18);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background .25s;
}
.btn-devis-card:hover .btn-devis-icon { background: rgba(232,83,10,.3); }
.btn-devis-text {
  display: flex; flex-direction: column; gap: 3px; flex: 1;
}
.btn-devis-title {
  color: #fff;
  font-family: var(--fh);
  font-weight: 700;
  font-size: .95rem;
  line-height: 1.2;
}
.btn-devis-sub {
  color: rgba(255,255,255,.55);
  font-size: .75rem;
  font-family: var(--fh);
  letter-spacing: .3px;
}
.btn-devis-arrow {
  color: rgba(255,255,255,.35);
  font-size: 1.1rem;
  flex-shrink: 0;
  transition: transform .25s ease, color .25s;
}
.btn-devis-card:hover .btn-devis-arrow {
  transform: translateX(5px);
  color:var(--orange-text);
}

/* ── ⑤ SECTEURS ── */
/* Supprime le gap entre les cartes secteurs et le bridge */
.sectors-section { padding-bottom: 80px; }

.sectors-intro {
  color: var(--textl);
  max-width: 560px;
  margin: 0 auto 48px;
}
.sectors-conv-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: start;
}
.sector-conv-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: #fff;
  border-radius: 14px;
  padding: 28px 24px 22px;
  border-top: 3px solid var(--orange);
  box-shadow: 0 4px 18px rgba(232,83,10,.08), 0 1px 4px rgba(0,0,0,.05);
  transition: var(--tr);
  text-decoration: none;
  color: var(--dark);
  text-align: left;
  position: relative;
  overflow: hidden;
}
.sector-conv-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 42px rgba(232,83,10,.16), 0 2px 8px rgba(0,0,0,.06);
  background: linear-gradient(160deg, #fff 55%, #fef7f4 100%);
  color: var(--dark);
}

/* Pastille orange derrière l'icône SVG */
.scc-svg-wrap {
  flex-shrink: 0;
  width: 56px; height: 56px;
  background: rgba(232,83,10,.10);
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
  transition: background .25s ease, transform .3s cubic-bezier(.34,1.56,.64,1);
}
.sector-conv-card:hover .scc-svg-wrap {
  background: rgba(232,83,10,.18);
  transform: scale(1.08);
}

.scc-body { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.scc-name {
  font-family: var(--fh);
  font-weight: 700;
  font-size: .95rem;
  line-height: 1.3;
  margin-bottom: 6px;
}
.scc-tagline {
  display: block;
  font-size: .78rem;
  color: #777;
  line-height: 1.5;
}
/* Metric — toujours visible, pill orange */
.scc-metric {
  display: inline-block;
  margin-top: 18px;
  background: rgba(232,83,10,.09);
  color:var(--orange-text);
  font-family: var(--fh);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 5px 11px;
  border-radius: 20px;
  border: 1px solid rgba(232,83,10,.20);
  position: static;
  transform: none;
  transition: background .25s ease, border-color .25s ease;
}
.sector-conv-card:hover .scc-metric {
  background: rgba(232,83,10,.15);
  border-color: rgba(232,83,10,.35);
  transform: none;
}
/* Flèche discrète en bas à droite */
.scc-arrow {
  position: absolute;
  bottom: 18px; right: 20px;
  color:var(--orange-text);
  font-weight: 700;
  font-size: 1rem;
  opacity: .25;
  transition: opacity .25s ease, transform .25s ease;
}
.sector-conv-card:hover .scc-arrow { opacity: 1; transform: translateX(4px); }

/* ── ⑥ MINI-FORMULAIRE INLINE ── */
.inline-form-section {
  background: var(--dark);
  position: relative;
  overflow: visible;
  padding-top: 88px;
}
.inline-form-section > * { position: relative; z-index: 1; }

/* Cercle-flèche centré sur la bordure FAQ → Formulaire */
@keyframes faq-cue-ping {
  0%   { box-shadow: 0 0 0 6px var(--warm), 0 0 0  0px rgba(232,83,10,.70); }
  100% { box-shadow: 0 0 0 6px var(--warm), 0 0 0 22px rgba(232,83,10,.00); }
}
@media (prefers-reduced-motion: reduce) {
  .faq-form-cue { animation: none !important; }
}
.faq-form-cue {
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
  width: 44px;
  height: 44px;
  background: var(--dark);
  border: 2px solid rgba(232,83,10,.45);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  box-shadow: 0 0 0 6px var(--warm);
  animation: faq-cue-ping 1.8s ease-out infinite;
}
.il-badge {
  display: inline-block;
  background: rgba(232,83,10,.15);
  color:var(--orange-text);
  font-family: var(--fh);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 20px;
  border: 1px solid rgba(232,83,10,.30);
  margin-bottom: 16px;
}
.inline-form-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}
.inline-form-left h2 { color: #fff; margin-bottom: 14px; }
.inline-form-left p { color: rgba(255,255,255,.68); line-height: 1.7; }
.inline-form-reassure {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.inline-form-reassure li { color: rgba(255,255,255,.6); font-size: .88rem; list-style: none; }

.mini-contact-form { display: flex; flex-direction: column; gap: 14px; }
.mini-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media(max-width:640px){ .mini-form-row { grid-template-columns: 1fr; } }
.mini-form-group { display: flex; flex-direction: column; gap: 5px; }
.mf-optional { font-weight: 400; color: rgba(255,255,255,.4); text-transform: none; letter-spacing: 0; font-size: .75rem; }
.mini-form-group label {
  font-family: var(--fh);
  font-size: .78rem;
  font-weight: 600;
  color: rgba(255,255,255,.6);
  letter-spacing: .5px;
  text-transform: uppercase;
}
.mini-form-group input,
.mini-form-group select {
  padding: 14px 16px;
  background: rgba(255,255,255,.12);
  border: 1.5px solid rgba(255,255,255,.22);
  border-radius: var(--r);
  color: #fff;
  font-size: .95rem;
  outline: none;
  transition: var(--tr);
}
.mini-form-group input::placeholder { color: rgba(255,255,255,.35); }
.mini-form-group select { color: rgba(255,255,255,.7); }
.mini-form-group select option { background: var(--dark); color: #fff; }
.mini-form-group input:focus,
.mini-form-group select:focus {
  border-color: var(--orange);
  background: rgba(232,83,10,.08);
  box-shadow: 0 0 0 3px rgba(232,83,10,.15);
}
.mini-form-submit { width: 100%; justify-content: center; margin-top: 6px; }
.mini-form-success {
  background: rgba(34,197,94,.15);
  border: 1px solid rgba(34,197,94,.35);
  color: #86efac;
  padding: 14px;
  border-radius: var(--r);
  font-weight: 600;
  text-align: center;
  font-size: .9rem;
}

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  .pain-card { grid-template-columns: 40px 1fr; padding: 24px 20px; }
  .how-grid { grid-template-columns: 1fr; }
  .how-connector { padding: 8px 0; transform: none; height: auto; }
  .how-connector .how-svg-line { width: 44px; height: 28px; transform: rotate(90deg); }
  .cta-mid-inner { grid-template-columns: 1fr; gap: 36px; padding: 36px 28px; }
  .cta-mid-actions { min-width: unset; }
  .testi-grid-conv { grid-template-columns: 1fr; }
  .sectors-conv-grid { grid-template-columns: repeat(2, 1fr); }
  .inline-form-wrapper { grid-template-columns: 1fr; gap: 40px; }
  .trust-band { gap: 24px; padding: 20px 24px; }
  .trust-sep { display: none; }
}
@media (max-width: 640px) {
  .pain-card { grid-template-columns: 1fr; }
  .pain-icon { margin-bottom: 12px; }
  .sectors-conv-grid { grid-template-columns: 1fr 1fr; }
  .cta-mid-inner { padding: 28px 20px; }
}

/* ════════════════════════════════════════════════════════════
   UX EFFECTS — ScrollTrigger-like, SVG, Magnetic, Parallax
   ════════════════════════════════════════════════════════════ */

/* ── Scroll Progress Bar ── */
#scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--orange) 0%, #ff9a5c 100%);
  z-index: 9999;
  pointer-events: none;
  border-radius: 0 2px 2px 0;
  box-shadow: 0 0 8px rgba(232,83,10,.5);
}

/* ── Hero Scroll Arrow ── */
.hero-scroll-arrow {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  cursor: pointer;
  opacity: .30;
  transition: opacity .3s;
  animation: bounce-arr 2.4s ease-in-out infinite;
}
.hero-scroll-arrow:hover { opacity: .65; }
@keyframes bounce-arr {
  0%,100% { transform: translateX(-50%) translateY(0); }
  50%     { transform: translateX(-50%) translateY(9px); }
}

/* ── SVG How-section line draw ── */
.how-connector {
  display: flex; align-items: center; justify-content: center;
  padding-top: 52px;
}
.how-svg-line { width: 100%; overflow: visible; display: block; }
.how-line-path {
  stroke: var(--orange); stroke-width: 2; stroke-linecap: round;
  stroke-dasharray: 56; stroke-dashoffset: 56;
  transition: stroke-dashoffset .55s ease .1s;
}
.how-arrow-path {
  stroke: var(--orange); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 22; stroke-dashoffset: 22;
  transition: stroke-dashoffset .3s ease .6s;
}
.how-svg-line.drawn .how-line-path  { stroke-dashoffset: 0; }
.how-svg-line.drawn .how-arrow-path { stroke-dashoffset: 0; }

/* ── SVG How-step icons ── */
.how-step-svg { width: 46px; height: 46px; display: block; margin: 0 auto; }
.svgi {
  stroke: var(--orange); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; fill: none;
  stroke-dasharray: 300; stroke-dashoffset: 300;
  transition: stroke-dashoffset .9s cubic-bezier(.4,0,.2,1) .15s;
}
.how-step.visible .svgi { stroke-dashoffset: 0; }

/* ── SVG Trust Ring Counters ── */
.trust-ring-wrap {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 10px;
}
.trust-ring-svg {
  width: 104px; height: 104px;
  transform: rotate(-90deg);
  display: block;
}
.trust-ring-bg  { fill: none; stroke: rgba(232,83,10,.12); stroke-width: 5; }
.trust-ring-fill {
  fill: none;
  stroke: #E84E0F;
  stroke-width: 6;
  stroke-linecap: round;
  opacity: 1;
}
.trust-ring-num {
  position: absolute;
  display: flex; align-items: center; justify-content: center;
  inset: 0;
}
/* Override trust-num inside ring */
.trust-ring-num .trust-num {
  font-size: 1.4rem;
  color: var(--dark);
  letter-spacing: -.02em;
}
.trust-ring-num .trust-num span { font-size: .9rem; }

/* Étoiles satisfaction — amber universellement reconnu comme rating */
.trust-stars {
  display: flex; gap: 2px; justify-content: center;
  margin-bottom: 4px;
}
.tstar { width: 13px; height: 13px; }
.tstar--full { fill: #FBBF24; }
.tstar--partial { stroke: #FBBF24; stroke-width: .5; }

/* Item <24h sans ring — horloge + badge */
.trust-item--badge { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.trust-clock-wrap { margin-bottom: 4px; }
.trust-clock-wrap svg { display: block; }
.trust-guaranteed {
  display: inline-block;
  font-family: var(--fh);
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fff;
  background: var(--orange);
  padding: 2px 8px;
  border-radius: 20px;
  margin-bottom: 2px;
}

/* ── H2 Text Reveal Mask ── */
.h2-reveal { overflow: hidden; display: block; }
.h2-reveal .h2-reveal-inner {
  display: inline-block;
  clip-path: inset(0 100% 0 0);
  transition: clip-path .75s cubic-bezier(.77,0,.175,1) .1s;
}
.h2-reveal.revealed .h2-reveal-inner { clip-path: inset(0 0% 0 0); }

/* ── SVG Sector Icons ── */
.scc-svg { width: 38px; height: 38px; display: block; margin: 0 auto 2px; }
.scc-svgp {
  stroke: #4a5568;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; fill: none;
  transition: stroke .3s ease;
  stroke-dasharray: 300; stroke-dashoffset: 0;
}
.sector-conv-card:hover .scc-svgp {
  stroke: var(--orange);
  animation: svgredraw .45s ease forwards;
}
@keyframes svgredraw {
  0%   { stroke-dashoffset: 80; }
  100% { stroke-dashoffset: 0; }
}

/* ── Proof CTA spacing ── */
.proof-cta { margin-top: 36px; display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap; }

/* ── H2 reveal bidirectionnel : sortie sans délai ── */
.h2-reveal .h2-reveal-inner {
  transition: clip-path .75s cubic-bezier(.77,0,.175,1) .05s;
}
.h2-reveal:not(.revealed) .h2-reveal-inner {
  transition-delay: 0s; /* sortie instantanée */
}

/* ── Hero glass cards — lévitation continue ── */
@keyframes glass-float {
  0%,100% { transform: translateY(0)   scale(1); }
  50%     { transform: translateY(-7px) scale(1.015); }
}
.hero-glass {
  animation: glass-float 5.2s ease-in-out infinite;
  will-change: transform;
}
.hero-glass--alert { animation-duration: 4.4s; animation-delay:  .9s; }
.hero-glass--stat  { animation-duration: 6.1s; animation-delay: 2.0s; }

/* ── Tilt 3D — perspective sur les cartes ── */
.testi-card-conv,
.how-step,
.faq-item {
  transform-style: preserve-3d;
  will-change: transform;
}

/* ── FAQ items — glissement au hover ── */
.faq-item {
  transition: transform .22s ease, box-shadow .22s ease;
}
.faq-item:hover {
  transform: translateX(5px);
  box-shadow: 0 4px 20px rgba(232,83,10,.1);
}
.faq-item.open {
  transform: translateX(0); /* pas de glissement si ouvert */
}

/* ── Pain cols — wrapper icône + anneau SVG orange ── */
.pain-icon-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
}
.pain-icon-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  pointer-events: none;
}
.pain-ring-track {
  fill: none;
  stroke: rgba(232,83,10,.10);
  stroke-width: 2;
}
.pain-ring-draw {
  fill: none;
  stroke: var(--orange);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 176;
  stroke-dashoffset: 176;
  transition: stroke-dashoffset .55s cubic-bezier(.4,0,.2,1);
}
.pain-col:hover .pain-ring-draw {
  stroke-dashoffset: 0;
}

/* mouvement subtil de l'icône */
.pain-col__icon {
  display: inline-block;
  font-size: 1.9rem;
  line-height: 1;
  position: relative;
  z-index: 1;
  transition: transform .4s cubic-bezier(.34,1.56,.64,1);
}
.pain-col:hover .pain-col__icon {
  transform: translateY(-2px) scale(1.08);
}

/* ── Sector cards — scale subtil à l'entrée viewport ── */
.sector-conv-card.visible {
  animation: sector-pop .4s cubic-bezier(.34,.156,.64,1) var(--td, 0s) both;
}
@keyframes sector-pop {
  from { transform: scale(.92) translateY(10px); opacity: 0; }
  to   { transform: scale(1)   translateY(0);    opacity: 1; }
}

/* ── Feature card tag (homepage + fonctionnalités) ── */
.feat-card-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--fh);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color:var(--orange-text);
  background: rgba(232,78,15,.08);
  padding: 4px 9px;
  border-radius: 20px;
  width: fit-content;
  margin-top: 10px;
}

/* ══════════════════════════════════════════════════════════
   ACCESSIBILITÉ — prefers-reduced-motion
   Respecte le paramètre système "Réduire les animations"
   ══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  /* Révélations scroll : visibles immédiatement, sans transition */
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  /* H2 mask reveal : pas d'animation clip-path */
  .h2-reveal .h2-reveal-inner,
  .h2-reveal:not(.revealed) .h2-reveal-inner {
    clip-path: none !important;
    transition: none !important;
  }

  /* Hero background : pas de Ken Burns */
  .hero-bg__img { animation: none !important; }

  /* Pulse dot "live" : statique */
  .pulse-dot { animation: none !important; }

  /* Barre de stat hero glass : affichée directement */
  .hg-stat-bar__fill { animation: none !important; width: 72%; }

  /* Toutes les transitions globales : réduites */
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ─────────────────────────────────────────────────
   CMP (Consent Mode v2) — RGPD banner
   ───────────────────────────────────────────────── */
.mc-cmp{position:fixed;bottom:16px;left:16px;right:16px;max-width:520px;background:#fff;color:var(--text);border-radius:12px;box-shadow:0 18px 60px rgba(10,22,40,.22),0 4px 14px rgba(10,22,40,.10);border:1px solid var(--grey2);font-family:var(--fb);z-index:9999;opacity:0;transform:translateY(16px);transition:opacity .3s ease,transform .3s ease}
.mc-cmp--show{opacity:1;transform:translateY(0)}
.mc-cmp--hide{opacity:0;transform:translateY(16px)}
.mc-cmp__inner{padding:18px 20px}
.mc-cmp__text{font-size:.88rem;line-height:1.55;color:#2a2a2a;margin-bottom:14px}
.mc-cmp__text strong{font-family:var(--fh);font-size:.92rem;display:inline-block;margin-bottom:4px;color:var(--dark)}
.mc-cmp__link{color:var(--orange-text);text-decoration:underline;text-underline-offset:2px;margin-left:4px}
.mc-cmp__actions{display:flex;gap:10px;justify-content:flex-end}
.mc-cmp__btn{font-family:var(--fh);font-weight:700;font-size:.86rem;padding:10px 18px;border-radius:8px;cursor:pointer;border:none;transition:background .2s ease,color .2s ease}
.mc-cmp__btn--refuse{background:transparent;color:var(--textl);border:1px solid var(--grey2)}
.mc-cmp__btn--refuse:hover{background:var(--warm);color:var(--dark)}
.mc-cmp__btn--accept{background:var(--orange);color:#fff}
.mc-cmp__btn--accept:hover{background:var(--orange2)}
@media(max-width:520px){.mc-cmp{left:12px;right:12px;bottom:12px}.mc-cmp__inner{padding:16px}.mc-cmp__actions{flex-direction:column-reverse}.mc-cmp__btn{width:100%}}

/* Page-updated timestamp: hidden visually, kept in DOM (machine-readable for Googlebot/AI freshness signals) */
.page-updated{display:none!important}


/* =====================================================================
   AUDIT UX 2026-10-15 — correctifs (voir NO-claude-intern-files/AUDIT-UX-2026-10-15.md)
   ===================================================================== */

/* 1.3 Orange texte : contraste AA sur fond clair (3,8:1 -> 5,4:1) */
.label,.fks-link,.pain-col__cta,.scc-metric,.feat-card-tag,.home-faq-more a,
.mc-cmp__link,.how-intro a,.sectors-intro a,.faq-a a,.px-faq-a a{color:var(--orange-text)}
.section--dark .label,.cta-mid-section .label,.testi-section .label.on-dark,
.inline-form-section .label,.hero-cinema .label{color:var(--orange)}

/* 1.1 / 1.5 Badge H1 lisible (>= 14px) */
.hero-badge{font-size:.875rem}

/* 1.6 Anneau de focus visible + lien d'évitement */
a:focus-visible,button:focus-visible,[role="button"]:focus-visible,summary:focus-visible{
  outline:3px solid var(--dark);outline-offset:3px;border-radius:4px}
.top-bar a:focus-visible,.site-footer a:focus-visible,.site-footer button:focus-visible,
.hero-cinema a:focus-visible,.hero-cinema [role="button"]:focus-visible,.section--dark a:focus-visible,
.cta-mid-section a:focus-visible,.inline-form-section a:focus-visible,.inline-form-section button:focus-visible,
.nav-links.open a:focus-visible{outline-color:#fff}
.form-group input:focus-visible,.form-group select:focus-visible,.form-group textarea:focus-visible,
.mini-form-group input:focus-visible,.mini-form-group select:focus-visible,.mini-form-group textarea:focus-visible{
  outline:3px solid var(--orange);outline-offset:2px}
.skip-link{position:absolute;left:12px;top:-60px;z-index:2000;background:var(--dark);color:#fff;
  padding:12px 20px;border-radius:0 0 8px 8px;font-family:var(--fh);font-weight:700;font-size:.9rem}
.skip-link:focus{top:0}

/* 1.7 Champs >= 16px (pas de zoom iOS) + message d'erreur inline */
input,select,textarea{font-size:1rem}
.form-group input,.form-group select,.form-group textarea,
.mini-form-group input,.mini-form-group select,.mini-form-group textarea{font-size:1rem}
.field-error{color:#b42318;font-size:.875rem;line-height:1.4;margin:4px 0 0;font-family:var(--fb)}
.mini-form-group .field-error{color:#ffb4a8}
input[aria-invalid="true"],select[aria-invalid="true"],textarea[aria-invalid="true"]{border-color:#dc3545}

/* 2.8 Chiffres tabulaires (pas de saut pendant le comptage) */
.trust-num,.hg-vehicle__speed,.hg-stat-val,.fks-live-data,.fks-notif-meta{font-variant-numeric:tabular-nums}

/* 2.10 Divers */
a,button,[role="button"],input,select,textarea,label{touch-action:manipulation}
h1,h2,h3{text-wrap:balance}

/* Texte minimal 12px */
.hg-status,.hg-alert-new{font-size:.75rem}
.hg-alert-zone,.fks-notif-meta,.fks-live-label,.hg-stat-roi,.trust-logos-label,.scc-metric,
.feat-card-tag,.label,.mega__title,.nav-chev,.btn-tel-big__action,.btn-tel-big__hours,.il-badge{font-size:.75rem}

/* 1.4 Menu mobile fermé : hors tabulation et hors lecteur d'écran */
@media (max-width:640px){
  .nav-links{visibility:hidden;transition:transform .35s ease,visibility 0s linear .35s}
  .nav-links.open{visibility:visible;transition:transform .35s ease,visibility 0s}
}

/* 2.9 Cartes décoratives du hero masquées sur mobile */
@media (max-width:640px){.hero-cards-area{display:none}}

/* 2.7 Animations : reduced-motion complet */
@media (prefers-reduced-motion:reduce){
  .hero-glass,.hero-glass--live,.hero-glass--alert,.hero-glass--stat,.hero-cards-area,.hero-copy,.hero-title{animation:none!important}
  .testi-card-conv,.how-step{transform:none!important}
  html{scroll-behavior:auto}
}

/* Icônes SVG remplaçant les glyphes texte (2.2) */
.stars{display:inline-flex;gap:2px;line-height:1}
.stars svg{width:16px;height:16px;fill:#FFB800;stroke:none}
.nav-chev{display:inline-flex;align-items:center}
.nav-chev svg,.faq-chev svg{display:block}
.cta-mid-list li{display:flex;align-items:center;gap:8px}
.ico-check{flex-shrink:0;color:var(--live)}

.how-section .label,.fks-showcase .label,.sectors-section .label,.testi-header .label,.features-key-section .label,
.fks-head .label,.proof-numbers-section .label{color:var(--orange-text)}
.scc-arrow{color:var(--orange-text)}

/* ===== Contraste AA : boutons, orange sur fond sombre, gris (audit 2026-10-15) ===== */
:root{--orange-btn:#C8400A;--orange-btn-hover:#A63406;--orange-on-dark:#F26A33}
body .btn-orange,body .btn-cta,body .nav-links li a.btn-cta,body .mc-cmp__btn--accept,body .pain-num,body .sect-testi-init{background:var(--orange-btn) !important;border-color:var(--orange-btn) !important;color:#fff !important}
body .btn-orange:hover,body .btn-cta:hover,body .nav-links li a.btn-cta:hover,body .mc-cmp__btn--accept:hover{background:var(--orange-btn-hover) !important;border-color:var(--orange-btn-hover) !important}
body .pain-cost,body .px-scenario-tag,body .fit-metric,body .nav-links li a.active:not(.btn-cta),body main .label,body [class*="sp-pdf-score--ora"]{color:var(--orange-text) !important}
body .eyebrow,body .px-calc-result-label,body .sect-hero .label,body .sect-cta .label,body .section--dark .label,body .px-hero .label,body .feat-hero .label,body .sp-tl-stat-val,body .sp-lb-badge,body .feat-cta-section .label,body .feat-compare-section .label,body .ct3-badge,body .ct3-section .label,body .contact-info-box .label{color:var(--orange-on-dark) !important}
body .px-calc-op,body .check-no{color:#767676 !important}
body .px-scenario-size,body .px-plans-cta-note,body .scc-tagline,body .sp-track-vehicle-loc{color:#6B6B6B !important}
body .check-partial{color:#A15C00 !important}
body [class*="sp-pdf-score--gre"]{color:#15803D !important}

/* ===== Formulaires courts : champs secondaires repliés (B7) ===== */
.form-more{margin:4px 0 8px}
.form-more>summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-family:var(--fh);font-weight:600;font-size:.875rem;color:var(--orange-text);list-style:none}
.form-more>summary::-webkit-details-marker{display:none}
.form-more>summary::before{content:"+";display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;margin-right:8px;border:1.5px solid currentColor;border-radius:50%;font-size:.875rem;line-height:1}
.form-more[open]>summary::before{content:"\2212"}
.form-more>*:not(summary){margin-top:12px}
.mini-contact-form .form-more>summary{color:#fff}

/* ===== Sélecteur de métier (B6) ===== */
.metier-section h2{margin-bottom:12px}
.metier-section .sectors-intro{margin:0 0 8px;max-width:72ch;text-align:left}
.metier-picker{border:0;padding:0;margin:24px 0 20px}
.metier-picker legend{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.metier-picker__bar{display:flex;flex-wrap:wrap;gap:8px}
.metier-picker__bar input{position:absolute;opacity:0;width:1px;height:1px}
.metier-picker__bar label{display:inline-flex;align-items:center;min-height:44px;padding:0 20px;border:1.5px solid var(--grey2);border-radius:999px;background:#fff;font-family:var(--fh);font-weight:600;font-size:.9rem;cursor:pointer;transition:background-color .2s ease,color .2s ease,border-color .2s ease}
.metier-picker__bar label:hover{border-color:var(--dark)}
.metier-picker__bar input:checked+label{background:var(--dark);color:#fff;border-color:var(--dark)}
.metier-picker__bar input:focus-visible+label{outline:3px solid var(--orange);outline-offset:2px}
.metier-panel{background:#fff;border-radius:var(--r);padding:28px 32px;box-shadow:var(--sh);max-width:820px}
.metier-panel[hidden]{display:none}
.metier-panel h3{font-size:1.4rem;margin-bottom:6px}
.metier-panel__metric{font-family:var(--fh);font-weight:800;font-size:1.1rem;color:var(--orange-text);margin:0 0 12px}
.metier-panel p{max-width:60ch}
.metier-panel__links{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin:16px 0 0}
@media (prefers-reduced-motion:no-preference){.metier-panel:not([hidden]){animation:metier-in .16s ease-out}}
@keyframes metier-in{from{opacity:0}to{opacity:1}}
@media (max-width:640px){.metier-panel{padding:22px 20px}}

/* ===== Configurateur de profil (B8) ===== */
.px-config{max-width:1100px;margin:0 auto 56px;padding:0 24px;display:grid;grid-template-columns:1.4fr 1fr;gap:24px;align-items:start}
.px-config__form{background:#fff;border-radius:16px;padding:28px;box-shadow:var(--sh);display:grid;gap:20px}
.px-config__intro{margin:0;color:var(--ink-2,#4A4A5E)}
.px-config__field{border:0;padding:0;margin:0;display:grid;gap:8px}
.px-config__field label,.px-config__field legend{font-family:var(--fh);font-weight:700;font-size:.9rem;padding:0}
.px-config input[type=number]{width:140px;min-height:44px;padding:0 14px;border:1.5px solid var(--grey2);border-radius:var(--r)}
.px-config__choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
.px-config__choices input{position:absolute;opacity:0;width:1px;height:1px}
.px-config__choices label{display:flex;flex-direction:column;justify-content:center;min-height:56px;padding:8px 14px;border:1.5px solid var(--grey2);border-radius:var(--r);cursor:pointer;font-weight:700}
.px-config__choices label small{font-weight:400;font-size:.8125rem;color:var(--ink-2,#4A4A5E)}
.px-config__choices input:checked+label{border-color:var(--dark);box-shadow:inset 0 0 0 1.5px var(--dark)}
.px-config__choices input:focus-visible+label{outline:3px solid var(--orange);outline-offset:2px}
.px-config__checks{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:4px 16px}
.px-config__checks label{display:flex;align-items:center;gap:10px;min-height:44px;font-weight:400;font-family:var(--fb);cursor:pointer}
.px-config__checks input{width:20px;height:20px;accent-color:var(--orange)}
.px-config__fixed{margin:0;font-size:.875rem;color:var(--ink-2,#4A4A5E)}
.px-config__result{background:var(--dark);color:#fff;border-radius:16px;padding:28px;position:sticky;top:112px}
.px-config__result h3{color:#fff}
.px-config__result p{color:rgba(255,255,255,.9)}
.px-config__note{font-size:.875rem;margin:12px 0 0}
.px-scenario-load{margin-top:16px;min-height:44px;padding:0 18px;border:1.5px solid var(--dark);border-radius:var(--r);background:#fff;font-family:var(--fh);font-weight:700;font-size:.875rem;color:var(--dark);cursor:pointer}
.px-scenario-load:hover{background:var(--dark);color:#fff}
@media (max-width:860px){.px-config{grid-template-columns:1fr}.px-config__result{position:static}}

/* ===== Contraste AA (passe 2) ===== */
body .eyebrow{color:var(--orange-text) !important}
body :is([class*="hero"],.section--dark,.sect-cta,.feat-cta-section,.px-cta,.px-calc-result,.ab-manifesto) .eyebrow{color:var(--orange-on-dark) !important}
body main :is(a,strong)[style*="color:var(--orange)"]{color:var(--orange-text) !important}
body :is([class*="hero"],.section--dark,.inline-form-section,.contact-info-box,.did-home,.sect-cta,.feat-cta-section,.cta-band) :is(a,strong)[style*="color:var(--orange)"]{color:var(--orange-on-dark) !important}
body .article-hero :is(a,strong){color:var(--orange-on-dark) !important}
body .article-hero time{color:rgba(255,255,255,.75) !important}
body :is(.art-tag,.cf-submit,.how-num,.section--orange,.testi-avatar){background-color:var(--orange-btn) !important;color:#fff !important}
body .section--orange :is(p,h2,h3,a):not(.btn){color:#fff !important}
body :is(.sect-solutions,.sect-faq,.feat-faq-section,.faq-a) a:not(.btn){color:var(--orange-text)}
body :is(.ab-ch-label,.ab-pull-cite,.ab-info-label,.trust-logos-label,.bg-model-sub){color:#6B6B6B !important}
body .bg-model-tag.green{color:#15803D !important}
body :is([class*="hero"],.section--dark,.ab-proof,.bg-persona,.sect-cta,.feat-cta-section) :is(.label,.eyebrow,.pers-label,strong.accent){color:var(--orange-on-dark) !important}
body .bg-persona strong{color:var(--orange-on-dark) !important}
body :is(.kpi-badge,.bg-model-tag,.legal-body a,.bg-answer span){color:var(--orange-text) !important}
body :is(.bg-model-cta,.bg-how-num){background-color:var(--orange-btn) !important;color:#fff !important}
body .btn[style*="background:var(--orange)"]{background:var(--orange-btn) !important;color:#fff !important}
body .bg-compare .yes{color:#15803D !important}
body .bg-compare .no{color:#767676 !important}
body :is([class*="hero"],.footer-col,.site-footer,.sect-testi-kpi,.city-kpis-grid,.ab-proof,.ab-manifesto,.bg-persona,.bg-hero-stats,.ct3-section,.ct3-split,.faq-hero) :is(span,strong,h1 span,h4,h4 span,[class*="num"],[class*="kpi"]){color:var(--orange-on-dark) !important}
body :is(.hero-stat-num,.sect-testi-num,.ck-num,.ab-proof-mini-num,.bg-persona-kpi-big,.ct3-big-kpi,.bg-hero-stat strong,.footer-col h4){color:var(--orange-on-dark) !important}
body .site-footer a{color:rgba(255,255,255,.7) !important}
body .article-cta span,body .page-byline time{color:rgba(255,255,255,.75) !important}
body .article-meta .art-tag,body [class*="hero"] .art-tag,body .art-tag{color:#fff !important}
body :is(.cta-inline .btn,.check-dot,.explainer-tag,.btn-micro){background-color:var(--orange-btn) !important;color:#fff !important}
body :is(.check-yes,.vs-metric,.it-type-time){color:#15803D !important}
body :is(.vs-legal,.legal-body p,.legal-wrap p,.article-body p.note){color:#5C5C5C !important}
body :is(.gf-why-right,.gf-why-kpi-item,.px-cta-left,.stat-callout) :is(.label,.num,span,strong,.stat-big){color:var(--orange-on-dark) !important}
body .stat-big{color:var(--orange-on-dark) !important}
body .lever-num{background-color:var(--orange-btn) !important;color:#fff !important}
body .lever-impact{color:#15803D !important}
body .city-testi span:not([class]){color:#6B6B6B !important}
body :is(.city-faq,.sect-faq,.faq-wrap,.px-faq) .btn-outline{color:#1A1A2E !important;border-color:#1A1A2E !important}

/* ===== Identification du conducteur + Checkinatwork (audit 2026-10-15, B15) ===== */
:root{--live:#22C55E;--ink-2:#4A4A5E;--t-28:1.75rem}
.did-band{background:var(--warm);padding:64px 0}
.did-band h2{max-width:720px;margin-bottom:12px}
.did-lead{max-width:720px;color:var(--ink-2,#4A4A5E)}
.did-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px;margin:24px 0}
.did-card{background:#fff;border-left:3px solid var(--orange);border-radius:0 var(--r) var(--r) 0;padding:20px 24px}
.did-card h3{margin-bottom:6px}
.did-card p{margin:0;color:var(--ink-2,#4A4A5E);max-width:60ch}
.did-links{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin:0}
.did-link{color:var(--orange-text);font-family:var(--fh);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.did-link--light{color:#fff}
.did-src{margin-top:10px;font-size:.875rem}
.did-src a{color:var(--orange-text);text-decoration:underline;text-underline-offset:3px}
.did-home__src{font-size:.9rem}
.did-sources{background:#fff;padding:48px 0}
.did-sources ul{display:grid;gap:8px;margin:12px 0 0;padding-left:20px;list-style:disc}
.did-sources a{color:var(--orange-text);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.did-table{background:#fff;border:1px solid var(--grey2);border-radius:var(--r);padding:16px 18px;font-size:.875rem;box-shadow:var(--sh);max-width:100%;overflow-x:auto}
.did-table__cap{font-family:var(--fh);font-weight:700;font-size:.75rem;color:var(--textl);margin:0 0 8px}
.did-row{display:grid;grid-template-columns:.7fr 1.1fr 1fr 1fr 1.2fr;gap:12px;padding:8px 0;border-top:1px solid var(--grey);min-width:460px;font-variant-numeric:tabular-nums}
.did-row--3{grid-template-columns:1fr .8fr 1.4fr}
.did-row--head{border-top:0;font-family:var(--fh);font-weight:700;font-size:.75rem;color:var(--textl)}
.did-row--alert{color:#b42318;font-weight:700}
.did-home{background:var(--dark);color:#fff;padding:64px 0}
.did-home__inner{display:grid;grid-template-columns:minmax(220px,.8fr) 1.6fr;gap:48px;align-items:center}
.did-home__big{display:block;font-family:var(--fh);font-weight:800;font-size:clamp(2rem,4vw,3rem);line-height:1.05}
.did-home__small{display:block;margin-top:12px;color:rgba(255,255,255,.8);max-width:32ch}
.did-home h2{color:#fff;margin-bottom:16px}
.did-home__list{display:grid;gap:8px;margin:0 0 16px;padding:0}
.did-home__list li{display:flex;align-items:center;gap:10px;font-family:var(--fh);font-weight:600}
.did-home p{color:rgba(255,255,255,.85);max-width:60ch}
.did-home__cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px}
.form-interest{border:0;padding:0;margin:0;display:grid;gap:8px}
.form-interest legend{font-family:var(--fh);font-weight:600;font-size:.875rem;margin-bottom:6px;padding:0}
.form-interest label{display:flex;align-items:center;gap:10px;min-height:44px;cursor:pointer}
.form-interest input{width:20px;height:20px;accent-color:var(--orange)}
@media(max-width:768px){.did-home__inner{grid-template-columns:1fr;gap:24px}.did-band,.did-home{padding:48px 0}}

/* ===== Bande « 1 s » (B4) ===== */
.one-second{background:var(--dark);color:#fff;padding:56px 0}
.one-second__inner{display:grid;grid-template-columns:auto 1fr;gap:16px 56px;align-items:center}
.one-second__num{margin:0;color:#fff;display:flex;align-items:center;gap:16px;font-family:var(--fh);font-weight:800;font-size:clamp(4rem,11vw,7rem);line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.one-second__dot{width:14px;height:14px;border-radius:50%;background:var(--live);flex-shrink:0}
@media (prefers-reduced-motion:no-preference){.one-second__dot{animation:one-sec-pulse 1s ease-out infinite}}
@keyframes one-sec-pulse{0%{box-shadow:0 0 0 0 rgba(34,197,94,.7)}70%,100%{box-shadow:0 0 0 14px rgba(34,197,94,0)}}
.one-second h2{color:#fff;font-size:var(--t-28,1.75rem);margin-bottom:8px}
.one-second .one-second__text p{color:rgba(255,255,255,.85);max-width:56ch;margin:0}
@media (max-width:768px){.one-second__inner{grid-template-columns:1fr}.one-second{padding:40px 0}}