/* ══════════════════════════════════════════════════════
   DESIGN SYSTEM — Atalakou
   Palette : Crème #F0EDE4 · Bleu #1B3F72 · Orange #F28B1E
   Principe : fond crème chaud, bleu en ancre, orange en accent
══════════════════════════════════════════════════════ */

:root {
  /* Couleurs primaires */
  --cream:      #F0EDE4;   /* fond principal chaud */
  --cream-2:    #E8E4DA;   /* fond secondaire légèrement plus soutenu */
  --cream-3:    #DDD8CC;   /* bordures sur fond crème */
  --blue:       #1B3F72;   /* bleu profond — titres, ancres, CTAs */
  --blue-mid:   #2A5299;   /* bleu intermédiaire — hover, accents */
  --blue-light: #EBF2FF;   /* bleu très clair — fonds de chips, badges */
  --orange:     #F28B1E;   /* orange vif — CTA principal, accents */
  --orange-dk:  #C46D09;   /* orange foncé — hover */
  --orange-pale:#FFF4E6;   /* orange très clair — fonds de badges */
  --white:      #FFFFFF;

  /* Typographie */
  --text-ink:   #1A1A1A;   /* texte principal */
  --text-mid:   #3D3D3D;   /* texte secondaire */
  --text-soft:  #6B6B6B;   /* texte atténué */
  --text-mute:  #999999;   /* labels, metadata */

  /* Utilitaires */
  --border:     rgba(27,63,114,.12);
  --border-or:  rgba(242,139,30,.25);
  --r:          8px;
  --r-lg:       14px;
  --sh:         0 2px 16px rgba(27,63,114,.07);
  --sh-md:      0 6px 32px rgba(27,63,114,.11);
  --sh-lg:      0 16px 56px rgba(27,63,114,.14);
  --sh-or:      0 6px 24px rgba(242,139,30,.28);
}

/* ── RESET ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:'DM Sans',system-ui,sans-serif;
  background:var(--cream);
  color:var(--text-ink);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{cursor:pointer;font-family:'DM Sans',system-ui,sans-serif}

/* ══════════════════════════════════════════════════════
   NAVIGATION
══════════════════════════════════════════════════════ */
nav{
  position:fixed;top:22px;left:0;right:0;z-index:300;
  height:68px;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 48px;
  background:rgba(240,237,228,.96);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
  transition:box-shadow .2s;
}
.nav-logo{display:flex;align-items:center;gap:12px}
.nav-logo img{height:38px;width:auto;filter:drop-shadow(0 1px 4px rgba(27,63,114,.15))}
.nav-logo-name{
  font-family:'Playfair Display',Georgia,serif;
  font-size:1.2rem;font-weight:700;color:var(--blue);
  letter-spacing:-.02em;
}
.nav-links{display:flex;align-items:center;gap:0;list-style:none}
.nav-links a{
  font-size:.78rem;font-weight:500;color:var(--text-mid);
  padding:8px 14px;border-radius:var(--r);
  transition:color .15s,background .15s;letter-spacing:.01em;
}
.nav-links a:hover{color:var(--blue);background:var(--blue-light)}
.nav-cta{
  font-size:.78rem;font-weight:700;
  color:var(--white);
  background:var(--blue);
  border:none;border-radius:var(--r);
  padding:10px 22px;
  transition:background .15s,transform .12s,box-shadow .15s;
  box-shadow:0 2px 12px rgba(27,63,114,.2);
}
.nav-cta:hover{background:var(--blue-mid);transform:translateY(-1px);box-shadow:0 4px 16px rgba(27,63,114,.28)}
/* ══ BARRE LÉGALE KÔKÔ (au-dessus de la nav) ══ */
.legal-bar{
  position:fixed;top:0;left:0;right:0;z-index:301;
  height:22px;
  display:flex;align-items:center;justify-content:center;gap:10px;
  background:var(--blue);
  font-size:.62rem;font-weight:500;letter-spacing:.06em;
  color:rgba(255,255,255,.55);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.legal-bar strong{color:rgba(255,255,255,.9);font-weight:700;letter-spacing:.1em}
.legal-bar-sep{display:inline-block;width:3px;height:3px;border-radius:50%;background:rgba(255,255,255,.3);vertical-align:middle;margin:0 2px}
@media(max-width:640px){
  .legal-bar{display:none}
  nav{top:0}
  .drawer{top:68px}
  .hero{padding-top:68px}
}

/* ══ BADGE KÔKÔ DANS NAV (option A) ══ */
.nav-koko-badge{
  display:flex;align-items:center;gap:5px;
  border:1px solid rgba(27,63,114,.18);
  border-radius:5px;
  padding:3px 9px 3px 7px;
  font-size:.6rem;font-weight:600;
  color:rgba(27,63,114,.55);
  letter-spacing:.07em;text-transform:uppercase;
  white-space:nowrap;
  flex-shrink:0;
}
.nav-koko-badge::before{
  content:'';display:block;
  width:5px;height:5px;border-radius:50%;
  background:var(--orange);opacity:.7;flex-shrink:0;
}
@media(max-width:900px){.nav-koko-badge{display:none}}
.burger span{display:block;width:22px;height:1.5px;background:var(--blue);border-radius:2px;transition:.25s}

/* ══════════════════════════════════════════════════════
   DRAWER MOBILE
══════════════════════════════════════════════════════ */
.drawer{
  display:none;position:fixed;
  top:90px;left:0;right:0;bottom:0;z-index:290;
  background:var(--cream);padding:24px 24px 40px;
  flex-direction:column;gap:6px;overflow-y:auto;
}
.drawer.open{display:flex}
.drawer a{
  font-size:1rem;font-weight:500;color:var(--text-ink);
  padding:15px 18px;border-radius:var(--r);
  border:1px solid var(--border);transition:background .15s;
}
.drawer a:hover,.drawer a:active{background:var(--blue-light);color:var(--blue)}
.drawer-sep{height:1px;background:var(--border);margin:8px 0}
.drawer-cta-row{display:flex;flex-direction:column;gap:10px;margin-top:8px}
.drawer-cta-a,.drawer-cta-b{
  display:flex;align-items:center;justify-content:center;
  padding:15px;border-radius:var(--r);font-weight:700;font-size:.95rem;
}
.drawer-cta-a{background:var(--orange);color:#fff;border:none;box-shadow:var(--sh-or)}
.drawer-cta-b{background:transparent;color:var(--blue);border:2px solid var(--blue)}

/* ══════════════════════════════════════════════════════
   HERO
   Fond : bleu profond dégradé vers bleu-mid
   Logo : grand, visible, avec halo orange
══════════════════════════════════════════════════════ */
.hero{
  padding-top:90px;
  background:linear-gradient(145deg, var(--blue) 0%, #1e4a8a 45%, #24568f 100%);
  min-height:100svh;
  display:grid;grid-template-rows:1fr auto;
  position:relative;overflow:hidden;
}
/* Texture crème très subtile superposée */
.hero::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse at 65% 40%, rgba(242,139,30,.13) 0%, transparent 55%),
    radial-gradient(ellipse at 10% 80%, rgba(240,237,228,.04) 0%, transparent 50%);
}
/* Filet orange bas */
.hero-line{
  position:absolute;bottom:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,transparent,var(--orange) 20%,var(--orange) 80%,transparent);
}
/* Cercles déco géométriques */
.hero-ring{
  position:absolute;border-radius:50%;pointer-events:none;
  border:1px solid rgba(255,255,255,.06);
}
.hero-ring-1{width:520px;height:520px;top:-140px;right:-100px}
.hero-ring-2{width:320px;height:320px;bottom:-80px;left:-80px;border-color:rgba(242,139,30,.12)}

.hero-inner{
  max-width:1100px;margin:0 auto;
  padding:88px 48px 72px;
  display:grid;grid-template-columns:1fr 380px;
  gap:48px;align-items:center;
  position:relative;z-index:1;
}
.hero-text{}
.hero-eyebrow{
  font-size:.68rem;font-weight:700;
  color:rgba(255,255,255,.45);
  letter-spacing:.16em;text-transform:uppercase;
  margin-bottom:24px;
  display:flex;align-items:center;gap:12px;
}
.hero-eyebrow::before{
  content:'';display:block;
  width:28px;height:1.5px;
  background:var(--orange);border-radius:1px;flex-shrink:0;
}
.hero-h1{
  font-family:'Playfair Display',Georgia,serif;
  font-size:clamp(2.8rem,5.5vw,5rem);
  font-weight:900;color:#fff;
  line-height:.98;letter-spacing:-.025em;
  margin-bottom:32px;
}
.hero-h1 em{font-style:italic;color:var(--orange);display:block;margin-top:4px}
.hero-h1 .fade{color:rgba(255,255,255,.28)}
.hero-desc{
  font-size:1rem;font-weight:300;
  color:rgba(255,255,255,.6);
  max-width:480px;line-height:1.85;
  margin-bottom:40px;
}
.hero-desc strong{color:rgba(255,255,255,.88);font-weight:500}
.hero-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}

/* Logo côté droit — pleinement visible sur fond bleu */
.hero-logo-col{
  display:flex;align-items:center;justify-content:center;
  position:relative;
}
.hero-logo-glow{
  position:absolute;
  width:340px;height:340px;border-radius:50%;
  background:radial-gradient(circle, rgba(242,139,30,.18) 0%, transparent 65%);
  pointer-events:none;z-index:0;
}
.hero-logo-col img{
  position:relative;z-index:1;
  width:clamp(160px,22vw,280px);height:auto;
  /* logo bleu+orange : sur fond bleu le bleu disparaît, on booste la luminosité
     et on ajoute un halo orange pour le faire vivre */
  filter:
    brightness(1.15)
    drop-shadow(0 0 32px rgba(242,139,30,.4))
    drop-shadow(0 4px 24px rgba(255,255,255,.15));
  transition:filter .4s ease;
}
.hero-logo-col img:hover{
  filter:
    brightness(1.25)
    drop-shadow(0 0 48px rgba(242,139,30,.55))
    drop-shadow(0 4px 32px rgba(255,255,255,.2));
}

/* Stats bas hero */
.hero-stats{
  border-top:1px solid rgba(255,255,255,.08);
  display:grid;grid-template-columns:repeat(3,1fr);
  position:relative;z-index:1;
  max-width:1100px;margin:0 auto;width:100%;
  padding:0 48px;
}
.hero-stat{padding:28px 0;border-right:1px solid rgba(255,255,255,.07)}
.hero-stat:last-child{border-right:none}
.hs-num{
  font-family:'Playfair Display',Georgia,serif;
  font-size:2.2rem;font-weight:700;color:#fff;margin-bottom:5px;
}
.hs-num span{color:var(--orange)}
.hs-lbl{font-size:.72rem;font-weight:400;color:rgba(255,255,255,.38);line-height:1.5}

/* ══════════════════════════════════════════════════════
   BOUTONS GLOBAUX
══════════════════════════════════════════════════════ */
.btn-orange{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--orange);color:#fff;
  font-weight:700;font-size:.88rem;letter-spacing:.01em;
  padding:14px 28px;border-radius:var(--r);border:none;
  box-shadow:var(--sh-or);
  transition:background .15s,transform .12s,box-shadow .15s;
}
.btn-orange:hover{background:var(--orange-dk);transform:translateY(-2px);box-shadow:0 8px 28px rgba(242,139,30,.38)}
.btn-outline-white{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.07);color:rgba(255,255,255,.75);
  font-weight:500;font-size:.85rem;
  padding:14px 22px;border-radius:var(--r);
  border:1px solid rgba(255,255,255,.18);
  transition:border-color .15s,color .15s,background .15s;
}
.btn-outline-white:hover{border-color:rgba(255,255,255,.45);color:#fff;background:rgba(255,255,255,.11)}
.btn-blue{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--blue);color:#fff;
  font-weight:700;font-size:.88rem;
  padding:14px 28px;border-radius:var(--r);border:none;
  transition:background .15s,transform .12s;box-shadow:0 4px 16px rgba(27,63,114,.2);
}
.btn-blue:hover{background:var(--blue-mid);transform:translateY(-1px)}
.btn-outline-blue{
  display:inline-flex;align-items:center;gap:8px;
  background:transparent;color:var(--blue);
  font-weight:600;font-size:.85rem;
  padding:14px 22px;border-radius:var(--r);
  border:1.5px solid var(--blue);
  transition:background .15s,color .15s;
}
.btn-outline-blue:hover{background:var(--blue);color:#fff}

/* ══════════════════════════════════════════════════════
   TICKER
══════════════════════════════════════════════════════ */
.ticker{
  background:var(--orange);padding:11px 0;overflow:hidden;white-space:nowrap;
}
.ticker-track{display:inline-flex;animation:tkr 32s linear infinite}
@keyframes tkr{to{transform:translateX(-50%)}}
.ticker-item{
  display:inline-block;font-size:.68rem;font-weight:700;color:#fff;
  letter-spacing:.1em;text-transform:uppercase;padding:0 32px;
}
.ticker-item::after{content:' ◆ ';opacity:.4;font-size:.5rem;vertical-align:middle}

/* ══════════════════════════════════════════════════════
   SECTION UTILITAIRES
══════════════════════════════════════════════════════ */
.sec-tag{
  display:inline-flex;align-items:center;gap:10px;
  font-size:.67rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;
  margin-bottom:16px;
}
.sec-tag::before{content:'';display:block;width:22px;height:1.5px;border-radius:1px;flex-shrink:0}
.sec-tag.or{color:var(--orange-dk)}.sec-tag.or::before{background:var(--orange)}
.sec-tag.bl{color:var(--blue)}.sec-tag.bl::before{background:var(--blue)}
.sec-tag.wh{color:rgba(255,255,255,.5)}.sec-tag.wh::before{background:var(--orange)}

.sec-title{
  font-family:'Playfair Display',Georgia,serif;
  font-size:clamp(2rem,4vw,3rem);
  font-weight:700;line-height:1.05;letter-spacing:-.02em;margin-bottom:16px;
}
.sec-title.dark{color:var(--blue)}
.sec-title.light{color:#fff}
.sec-title em{font-style:italic;color:var(--orange)}

.sec-intro{font-size:.95rem;font-weight:300;line-height:1.85}
.sec-intro.dark{color:var(--text-soft)}
.sec-intro.light{color:rgba(255,255,255,.5)}

/* ══════════════════════════════════════════════════════
   SECTION ABOUT — fond crème-2
══════════════════════════════════════════════════════ */
.about-sec{background:var(--cream-2);padding:96px 48px}
.about-grid{
  max-width:1100px;margin:0 auto;
  display:grid;grid-template-columns:5fr 4fr;gap:72px;align-items:center;
}
.about-lead{font-size:1rem;font-weight:300;color:var(--text-mid);line-height:1.9;margin-bottom:20px}
.about-lead strong{color:var(--text-ink);font-weight:500}
.about-quote{
  border-left:3px solid var(--orange);padding:20px 0 20px 24px;
}
.about-quote-text{
  font-family:'Playfair Display',Georgia,serif;
  font-size:1.2rem;font-style:italic;font-weight:700;
  color:var(--blue);line-height:1.4;margin-bottom:10px;
}
.about-quote-attr{font-size:.7rem;font-weight:700;color:var(--text-mute);letter-spacing:.08em;text-transform:uppercase}
.about-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.chip{
  font-size:.72rem;font-weight:600;color:var(--blue);
  padding:7px 14px;border-radius:20px;
  border:1px solid rgba(27,63,114,.2);background:var(--blue-light);
}

/* ══════════════════════════════════════════════════════
   SECTION SERVICES — fond blanc
══════════════════════════════════════════════════════ */
.services-sec{background:var(--white);padding:96px 48px}
.services-header{
  max-width:1100px;margin:0 auto;
  display:flex;justify-content:space-between;align-items:flex-end;
  margin-bottom:56px;gap:40px;
}
.services-header-right{font-size:.85rem;font-weight:400;color:var(--text-soft);max-width:300px;line-height:1.7;text-align:right}

.services-grid{
  max-width:1100px;margin:0 auto;
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:0;border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;
}
.svc-card{
  background:var(--white);padding:44px 36px;
  display:flex;flex-direction:column;
  position:relative;overflow:hidden;
  border-right:1px solid var(--border);
  transition:background .2s;
}
.svc-card:last-child{border-right:none}
.svc-card:hover{background:#FAFCFF}
/* Bande couleur haut de carte */
.svc-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:4px;
}
.svc-1::before{background:linear-gradient(90deg,var(--orange),var(--orange-dk))}
.svc-2::before{background:linear-gradient(90deg,var(--blue),var(--blue-mid))}
.svc-3::before{background:linear-gradient(90deg,var(--orange),var(--orange-dk))}

.svc-num{
  font-family:'Playfair Display',Georgia,serif;
  font-size:3rem;font-weight:700;
  line-height:1;margin-bottom:24px;letter-spacing:-.04em;
}
.svc-1 .svc-num,.svc-3 .svc-num{color:rgba(242,139,30,.15)}
.svc-2 .svc-num{color:rgba(27,63,114,.1)}

.svc-tag{font-size:.64rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-bottom:8px}
.svc-1 .svc-tag,.svc-3 .svc-tag{color:var(--orange-dk)}
.svc-2 .svc-tag{color:var(--blue)}

.svc-title{
  font-family:'Playfair Display',Georgia,serif;
  font-size:1.3rem;font-weight:700;color:var(--text-ink);
  line-height:1.15;margin-bottom:14px;letter-spacing:-.01em;
}
.svc-desc{font-size:.875rem;font-weight:300;color:var(--text-mid);line-height:1.85;margin-bottom:24px;flex:1}

.svc-items{list-style:none;margin-bottom:24px}
.svc-items li{
  font-size:.82rem;font-weight:400;color:var(--text-ink);
  padding:8px 0;border-bottom:1px solid var(--border);
  display:flex;align-items:flex-start;gap:10px;line-height:1.5;
}
.svc-items li:last-child{border-bottom:none}
.svc-items li::before{content:'→';font-size:.65rem;margin-top:2px;flex-shrink:0}
.svc-1 li::before,.svc-3 li::before{color:var(--orange)}
.svc-2 li::before{color:var(--blue)}

.svc-price{
  font-size:.72rem;font-weight:700;padding:10px 14px;border-radius:var(--r);
  margin-bottom:16px;display:flex;align-items:center;justify-content:space-between;
}
.sp-1,.sp-3{background:var(--orange-pale);color:var(--orange-dk);border:1px solid var(--border-or)}
.sp-2{background:var(--blue-light);color:var(--blue);border:1px solid rgba(27,63,114,.15)}

.svc-cta{
  display:flex;align-items:center;justify-content:space-between;
  font-size:.82rem;font-weight:700;
  padding:13px 18px;border-radius:var(--r);border:none;
  transition:opacity .15s,transform .12s,box-shadow .15s;cursor:pointer;
}
.svc-cta:hover{opacity:.9;transform:translateY(-1px)}
.sc-1,.sc-3{background:var(--orange);color:#fff;box-shadow:0 3px 14px rgba(242,139,30,.25)}
.sc-1:hover,.sc-3:hover{box-shadow:0 6px 20px rgba(242,139,30,.35)}
.sc-2{background:var(--blue);color:#fff;box-shadow:0 3px 14px rgba(27,63,114,.2)}
.sc-2:hover{box-shadow:0 6px 20px rgba(27,63,114,.3)}
.svc-cta-arrow{font-size:1rem;transition:transform .2s}
.svc-cta:hover .svc-cta-arrow{transform:translateX(5px)}

/* ══════════════════════════════════════════════════════
   SECTION COMMENT ÇA MARCHE — fond bleu profond
══════════════════════════════════════════════════════ */
.how-sec{background:var(--blue);padding:96px 48px;position:relative;overflow:hidden}
.how-sec::before{
  content:'';position:absolute;top:-100px;right:-120px;
  width:500px;height:500px;border-radius:50%;
  background:radial-gradient(circle,rgba(242,139,30,.1) 0%,transparent 65%);
  pointer-events:none;
}
.how-inner{max-width:1100px;margin:0 auto;position:relative;z-index:1}

.how-tabs{
  display:flex;gap:0;margin:40px 0 44px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r);overflow:hidden;width:fit-content;
}
.how-tab{
  font-size:.78rem;font-weight:500;
  padding:11px 22px;border:none;background:transparent;
  color:rgba(255,255,255,.4);
  border-right:1px solid rgba(255,255,255,.08);
  transition:background .15s,color .15s;cursor:pointer;
}
.how-tab:last-child{border-right:none}
.how-tab:hover{background:rgba(255,255,255,.07);color:rgba(255,255,255,.8)}
.how-tab.active{background:rgba(242,139,30,.15);color:var(--orange);border-bottom:2px solid var(--orange)}

.how-panel{display:none}
.how-panel.active{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.08);border-radius:10px;overflow:hidden;
}
.how-step{background:rgba(255,255,255,.03);padding:32px 24px;transition:background .2s}
.how-step:hover{background:rgba(255,255,255,.06)}
.how-step-n{
  font-family:'Playfair Display',Georgia,serif;
  font-size:2.6rem;font-weight:700;color:rgba(255,255,255,.07);
  line-height:1;margin-bottom:18px;
}
.how-step-icon{font-size:1.3rem;margin-bottom:12px}
.how-step-title{font-size:.88rem;font-weight:600;color:#fff;margin-bottom:8px}
.how-step-desc{font-size:.78rem;font-weight:300;color:rgba(255,255,255,.42);line-height:1.7}

/* ══════════════════════════════════════════════════════
   SECTION TÉMOIGNAGES — fond crème-2
══════════════════════════════════════════════════════ */
.testi-sec{background:var(--cream-2);padding:96px 48px}
.testi-inner{max-width:1100px;margin:0 auto}
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:52px}
.testi-card{
  background:var(--cream);border-radius:var(--r-lg);padding:36px 28px;
  border:1px solid var(--cream-3);display:flex;flex-direction:column;
  transition:border-color .2s,box-shadow .2s,transform .2s;
}
.testi-card:hover{
  border-color:var(--border-or);
  box-shadow:0 8px 32px rgba(242,139,30,.1);
  transform:translateY(-3px);
}
.testi-mark{
  font-family:'Playfair Display',Georgia,serif;
  font-size:3rem;color:var(--orange);opacity:.25;
  line-height:.7;margin-bottom:16px;
}
.testi-text{
  font-size:.9rem;font-weight:300;color:var(--text-mid);
  line-height:1.85;font-style:italic;margin-bottom:24px;flex:1;
}
.testi-author{display:flex;align-items:center;gap:12px}
.testi-av{
  width:42px;height:42px;border-radius:8px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-family:'Playfair Display',Georgia,serif;font-size:1rem;font-weight:700;
}
.ta-or{background:var(--orange-pale);color:var(--orange-dk)}
.ta-bl{background:var(--blue-light);color:var(--blue)}
.ta-gd{background:#FFF8E6;color:#8A6400}
.testi-name{font-size:.82rem;font-weight:600;color:var(--text-ink);margin-bottom:2px}
.testi-role{font-size:.7rem;color:var(--text-mute)}
.testi-badge{
  display:inline-block;margin-top:4px;
  font-size:.6rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:3px 8px;border-radius:3px;
}
.tb-or{background:var(--orange-pale);color:var(--orange-dk)}
.tb-bl{background:var(--blue-light);color:var(--blue)}
.tb-gd{background:#FFF8E6;color:#8A6400}

/* ══════════════════════════════════════════════════════
   SECTION ENTREPRISES — fond blanc
══════════════════════════════════════════════════════ */
.biz-sec{background:var(--white);padding:96px 48px}
.biz-inner{max-width:1100px;margin:0 auto}
.biz-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start;margin-top:52px}
.biz-list{display:flex;flex-direction:column;gap:4px}
.biz-item{
  padding:18px 20px;border-radius:var(--r);
  border:1px solid var(--border);cursor:pointer;
  transition:background .15s,border-color .15s,box-shadow .15s;
}
.biz-item:hover{background:var(--blue-light);border-color:rgba(27,63,114,.2)}
.biz-item.active{background:var(--blue-light);border-color:var(--blue);box-shadow:0 2px 12px rgba(27,63,114,.1)}
.biz-item.active .biz-item-title{color:var(--blue)}
.biz-item-head{display:flex;align-items:center;gap:12px;margin-bottom:4px}
.biz-item-icon{font-size:1rem}
.biz-item-title{font-size:.9rem;font-weight:600;color:var(--text-ink);transition:color .15s}
.biz-item-sub{font-size:.78rem;color:var(--text-soft);line-height:1.6}

.biz-detail{
  background:var(--cream);border-radius:var(--r-lg);padding:40px;
  position:sticky;top:84px;border:1px solid var(--cream-3);box-shadow:var(--sh);
}
.biz-detail-title{
  font-family:'Playfair Display',Georgia,serif;
  font-size:1.35rem;font-weight:700;color:var(--blue);margin-bottom:12px;
}
.biz-detail-desc{font-size:.875rem;font-weight:300;color:var(--text-mid);line-height:1.85;margin-bottom:20px}
.biz-detail-steps{list-style:none;margin-bottom:20px}
.biz-detail-steps li{
  display:flex;gap:12px;padding:10px 0;
  border-bottom:1px solid var(--cream-3);
  font-size:.82rem;color:var(--text-ink);font-weight:400;
  align-items:flex-start;line-height:1.5;
}
.biz-detail-steps li:last-child{border-bottom:none}
.step-n{
  width:22px;height:22px;flex-shrink:0;border-radius:50%;
  background:var(--blue);color:#fff;
  font-size:.62rem;font-weight:700;
  display:flex;align-items:center;justify-content:center;margin-top:1px;
}
.biz-cta{
  width:100%;padding:14px;border-radius:var(--r);border:none;
  background:var(--orange);color:#fff;
  font-size:.88rem;font-weight:700;cursor:pointer;
  box-shadow:0 4px 16px rgba(242,139,30,.25);
  transition:background .15s,transform .12s,box-shadow .15s;
}
.biz-cta:hover{background:var(--orange-dk);transform:translateY(-1px);box-shadow:0 6px 22px rgba(242,139,30,.35)}

/* ══════════════════════════════════════════════════════
   SECTION POURQUOI — fond bleu
══════════════════════════════════════════════════════ */
.why-sec{background:var(--blue);padding:96px 48px;position:relative;overflow:hidden}
.why-sec::before{
  content:'';position:absolute;bottom:-80px;right:-80px;
  width:400px;height:400px;border-radius:50%;
  background:radial-gradient(circle,rgba(242,139,30,.1) 0%,transparent 65%);pointer-events:none;
}
.why-inner{max-width:1100px;margin:0 auto;position:relative;z-index:1}
.why-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start;margin-top:52px}
.why-items{display:flex;flex-direction:column}
.why-item{
  padding:24px 0;border-bottom:1px solid rgba(255,255,255,.07);display:flex;gap:20px;
}
.why-item:last-child{border-bottom:none}
.why-num{
  font-family:'Playfair Display',Georgia,serif;
  font-size:.95rem;font-weight:700;color:var(--orange);
  flex-shrink:0;padding-top:2px;width:24px;
}
.why-item-title{font-size:.9rem;font-weight:600;color:#fff;margin-bottom:6px}
.why-item-desc{font-size:.82rem;font-weight:300;color:rgba(255,255,255,.42);line-height:1.7}

.why-visual{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--r-lg);padding:40px;
}
.why-quote{
  font-family:'Playfair Display',Georgia,serif;
  font-size:1.3rem;font-weight:700;font-style:italic;
  color:#fff;line-height:1.35;margin-bottom:10px;
}
.why-quote em{color:var(--orange)}
.why-src{font-size:.67rem;font-weight:700;color:rgba(255,255,255,.28);letter-spacing:.08em;text-transform:uppercase;margin-bottom:32px}
.why-metrics{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.wm{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.07);border-radius:var(--r);padding:18px}
.wm-num{font-family:'Playfair Display',Georgia,serif;font-size:1.8rem;font-weight:700;color:#fff;margin-bottom:4px}
.wm-num span{color:var(--orange)}
.wm-lbl{font-size:.67rem;color:rgba(255,255,255,.3);line-height:1.5}

/* ══════════════════════════════════════════════════════
   SECTION FAQ — fond crème
══════════════════════════════════════════════════════ */
.faq-sec{background:var(--cream);padding:96px 48px}
.faq-inner{max-width:720px;margin:0 auto}
.faq-list{margin-top:52px}
.faq-item{border-bottom:1px solid var(--cream-3)}
.faq-q{
  width:100%;background:none;border:none;text-align:left;
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:20px 0;cursor:pointer;
  font-family:'DM Sans',system-ui,sans-serif;
  font-size:.9rem;font-weight:500;color:var(--text-ink);
}
.faq-icon{
  width:24px;height:24px;border-radius:50%;flex-shrink:0;
  border:1.5px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  transition:background .15s,border-color .15s,transform .25s;
  font-size:.9rem;color:var(--text-soft);
}
.faq-item.open .faq-icon{background:var(--orange);border-color:var(--orange);color:#fff;transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .32s ease}
.faq-item.open .faq-a{max-height:300px}
.faq-a-inner{padding:0 40px 20px 0;font-size:.85rem;font-weight:300;color:var(--text-mid);line-height:1.85}

/* ══════════════════════════════════════════════════════
   SECTION CTA FINAL — fond blanc avec accent orange
══════════════════════════════════════════════════════ */
.cta-sec{
  background:var(--white);padding:112px 48px;
  position:relative;overflow:hidden;
}
.cta-sec::before{
  content:'';position:absolute;top:-60px;right:-60px;
  width:400px;height:400px;border-radius:50%;
  background:radial-gradient(circle,rgba(242,139,30,.06) 0%,transparent 65%);
  pointer-events:none;
}
.cta-inner{
  max-width:1100px;margin:0 auto;
  display:grid;grid-template-columns:1fr auto;
  gap:60px;align-items:center;position:relative;z-index:1;
}
.cta-h2{
  font-family:'Playfair Display',Georgia,serif;
  font-size:clamp(2rem,4vw,3.2rem);
  font-weight:700;color:var(--blue);
  line-height:1.0;letter-spacing:-.02em;margin-bottom:16px;
}
.cta-h2 em{font-style:italic;color:var(--orange)}
.cta-sub{font-size:.95rem;font-weight:300;color:var(--text-soft);line-height:1.85;max-width:440px;margin-bottom:32px}
.cta-actions{display:flex;gap:12px;flex-wrap:wrap}
.cta-right{display:flex;flex-direction:column;align-items:flex-end;gap:20px}
.cta-logo-big img{width:130px;height:auto;filter:drop-shadow(0 4px 16px rgba(27,63,114,.15))}
.cta-contact{text-align:right}
.cta-contact-line{display:block;font-size:.8rem;color:var(--text-soft);margin-bottom:4px}
.cta-contact-line a{
  color:var(--blue);font-weight:500;
  border-bottom:1px solid rgba(27,63,114,.15);
  transition:color .15s,border-color .15s;
}
.cta-contact-line a:hover{color:var(--orange);border-color:var(--border-or)}

/* ══════════════════════════════════════════════════════
   FOOTER — fond bleu profond
══════════════════════════════════════════════════════ */
footer{background:var(--blue);padding:56px 48px 32px}
.footer-inner{max-width:1100px;margin:0 auto}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;margin-bottom:48px}
.footer-brand{display:flex;flex-direction:column;gap:14px}
.footer-logo img{
  height:44px;width:auto;
  filter:brightness(1.15) drop-shadow(0 0 16px rgba(242,139,30,.25));
}
.footer-brand-name{
  font-family:'Playfair Display',Georgia,serif;
  font-size:1.1rem;font-weight:700;color:#fff;
}
.footer-brand-name span{color:var(--orange)}
.footer-tagline{font-size:.78rem;color:rgba(255,255,255,.35);line-height:1.7;max-width:240px}
.footer-contact-item{
  display:block;font-size:.78rem;color:rgba(255,255,255,.42);margin-top:5px;
  transition:color .15s;
}
.footer-contact-item:hover{color:var(--orange)}
.footer-col-title{
  font-size:.63rem;font-weight:700;color:rgba(255,255,255,.28);
  letter-spacing:.12em;text-transform:uppercase;margin-bottom:16px;
}
.footer-links{list-style:none}
.footer-links li{margin-bottom:9px}
.footer-links a{font-size:.8rem;color:rgba(255,255,255,.42);transition:color .15s}
.footer-links a:hover{color:var(--orange)}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.07);padding-top:24px;
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
}
.footer-copy{font-size:.7rem;color:rgba(255,255,255,.22)}
.footer-socials{display:flex;gap:8px}
.soc{
  width:34px;height:34px;border-radius:7px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);
  display:flex;align-items:center;justify-content:center;
  font-size:.72rem;color:rgba(255,255,255,.38);
  transition:background .15s,color .15s,border-color .15s;
}
.soc:hover{background:var(--orange);color:#fff;border-color:var(--orange)}

/* ══════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════ */
@media(max-width:960px){
  nav{padding:0 24px}
  .nav-links,.nav-cta{display:none}
  .burger{display:flex}
  .hero-inner{grid-template-columns:1fr;padding:64px 24px 56px;gap:40px}
  .hero-logo-col{justify-content:flex-start}
  .hero-logo-col img{width:min(200px,60vw)}
  .hero-stats{padding:0 24px;grid-template-columns:1fr 1fr}
  .hero-stat:nth-child(3){grid-column:1/-1;border-right:none;border-top:1px solid rgba(255,255,255,.07)}
  .about-sec,.services-sec,.how-sec,.testi-sec,.biz-sec,.why-sec,.faq-sec,.cta-sec{padding:72px 24px}
  .about-grid{grid-template-columns:1fr;gap:36px}
  .services-header{flex-direction:column;gap:10px}
  .services-header-right{text-align:left;max-width:none}
  .services-grid{grid-template-columns:1fr;border-radius:var(--r-lg)}
  .svc-card{border-right:none;border-bottom:1px solid var(--border)}
  .svc-card:last-child{border-bottom:none}
  .how-tabs{width:100%;overflow-x:auto}
  .how-panel.active{grid-template-columns:1fr 1fr}
  .testi-grid{grid-template-columns:1fr}
  .biz-grid{grid-template-columns:1fr}
  .biz-detail{position:static}
  .why-grid{grid-template-columns:1fr}
  .cta-inner{grid-template-columns:1fr}
  .cta-right{align-items:flex-start}
  .footer-grid{grid-template-columns:1fr 1fr;gap:32px}
  .hero-actions{flex-direction:column;align-items:flex-start}
  .btn-orange,.btn-outline-white{width:100%;justify-content:center}
}
@media(max-width:560px){
  .hero-stats{grid-template-columns:1fr}
  .hero-stat{border-right:none;border-bottom:1px solid rgba(255,255,255,.07)}
  .hero-stat:last-child{border-bottom:none;border-top:none}
  .how-panel.active{grid-template-columns:1fr}
  .why-metrics{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .cta-actions{flex-direction:column}
  .btn-blue,.btn-outline-blue{width:100%;justify-content:center}
}

/* ══════════════════════════════════════════════════════
   ANIMATIONS
══════════════════════════════════════════════════════ */
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.fu1{animation:fadeUp .55s ease both;animation-delay:.1s;opacity:0}
.fu2{animation:fadeUp .55s ease both;animation-delay:.25s;opacity:0}
.fu3{animation:fadeUp .55s ease both;animation-delay:.4s;opacity:0}
.fu4{animation:fadeUp .55s ease both;animation-delay:.55s;opacity:0}
.reveal{opacity:0;transform:translateY(16px);transition:opacity .48s ease,transform .48s ease}
.reveal.visible{opacity:1;transform:none}


/* ══════════════════════════════════════════════════════
   PAGE FAQ.php — styles standalone
   (complète les styles .faq-sec existants pour que la
    page FAQ fonctionne correctement hors index.php)
══════════════════════════════════════════════════════ */

/* Hero FAQ */
.faq-page-hero {
  background: linear-gradient(135deg, #142844 0%, #2d5687 100%);
  padding: 80px 24px 60px;
  text-align: center;
  margin-top: 90px; /* compense la nav fixe + legal-bar */
}
@media(max-width:640px){
  .faq-page-hero { margin-top: 68px; padding: 60px 20px 48px; }
}
.faq-page-hero .sec-tag {
  justify-content: center;
  color: rgba(255,255,255,.5);
}
.faq-page-hero .sec-tag::before { background: var(--orange); }
.faq-page-hero h1 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 900;
  color: #fff;
  margin-bottom: 16px;
  line-height: 1.2;
}
.faq-page-hero h1 em { font-style: italic; color: var(--orange); }
.faq-page-hero p {
  color: rgba(255,255,255,.65);
  font-size: .95rem;
  line-height: 1.75;
  max-width: 520px;
  margin: 0 auto;
}

/* Wrapper principal FAQ page */
.faq-page-main {
  max-width: 780px;
  margin: 0 auto;
  padding: 48px 24px 80px;
}

/* Titres de sections FAQ (Orientation, Insertion, Pros) */
.faq-section-title {
  font-family: 'Montserrat', sans-serif;
  font-size: .82rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--cream-3);
}
.faq-section-title.or  { color: var(--orange-dk); }
.faq-section-title.bl  { color: var(--blue); }
.faq-section-title.gr  { color: #15803d; }

/* Section FAQ avec espacement */
.faq-section { margin-bottom: 48px; }

/* Surcharge : sur FAQ.php le fond est --cream, les items s'adaptent */
.faq-page-main .faq-list { margin-top: 0; }
.faq-page-main .faq-item { border-bottom: 1px solid var(--cream-3); }
.faq-page-main .faq-q {
  font-family: 'Montserrat', sans-serif;
  font-size: .88rem;
  font-weight: 600;
  color: var(--text-ink);
  padding: 18px 0;
}
.faq-page-main .faq-a-inner a {
  color: var(--blue);
  border-bottom: 1px solid rgba(27,63,114,.2);
  transition: color .15s;
}
.faq-page-main .faq-a-inner a:hover { color: var(--orange); }

/* CTA bas de page FAQ */
.faq-cta-block {
  background: linear-gradient(135deg, #142844, #2d5687);
  border-radius: var(--r-lg);
  padding: 36px 28px;
  text-align: center;
  margin-top: 16px;
}
.faq-cta-block p:first-child {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  color: #fff;
  font-size: 1.05rem;
  margin-bottom: 8px;
}
.faq-cta-block p:last-of-type {
  color: rgba(255,255,255,.65);
  font-size: .88rem;
  margin-bottom: 20px;
}
.faq-cta-block a {
  display: inline-block;
  background: var(--orange);
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: .88rem;
  padding: 12px 28px;
  border-radius: var(--r);
  text-decoration: none;
  transition: background .15s;
}
.faq-cta-block a:hover { background: var(--orange-dk); }

/* ══ Burger / mobile-menu (utilisé dans header.php updated) ══ */
.burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 4px;
  background: none;
  border: none;
}
@media(max-width:960px){
  .burger { display: flex; }
}
.mobile-menu {
  display: none;
  flex-direction: column;
  position: fixed;
  top: 90px; left: 0; right: 0;
  background: var(--cream);
  border-bottom: 1px solid var(--border);
  padding: 16px;
  gap: 4px;
  z-index: 289;
  box-shadow: var(--sh-md);
}
.mobile-menu.open { display: flex; }
.mobile-menu a {
  font-family: 'Montserrat', sans-serif;
  font-size: .9rem;
  font-weight: 600;
  color: var(--blue);
  text-decoration: none;
  padding: 12px 16px;
  border-radius: var(--r);
  transition: background .15s;
}
.mobile-menu a:hover,
.mobile-menu a.active { background: var(--blue-light); }
.mobile-menu-sep {
  height: 1px;
  background: var(--border);
  margin: 8px 0;
}
.mobile-menu-cta-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}
.mobile-cta-a {
  background: var(--orange);
  color: #fff;
  text-align: center;
  padding: 12px 16px;
  border-radius: var(--r);
  font-family: 'Montserrat', sans-serif;
  font-size: .88rem;
  font-weight: 700;
  text-decoration: none;
  transition: background .15s;
}
.mobile-cta-a:hover { background: var(--orange-dk); }
.mobile-cta-b {
  background: var(--blue-light);
  color: var(--blue);
  text-align: center;
  padding: 12px 16px;
  border-radius: var(--r);
  font-family: 'Montserrat', sans-serif;
  font-size: .88rem;
  font-weight: 600;
  text-decoration: none;
  transition: background .15s;
}
.mobile-cta-b:hover { background: #d4e4f7; }