/* ===== Variables & base ===== */
:root{
  --kmcj-primary:#0b2b5c;   /* bleu marine */
  --kmcj-accent:#d4af37;    /* doré discret */
  --kmcj-gray-900:#0f172a;
  --kmcj-gray-700:#e5e7eb;  /* texte menu sur fond sombre */
  --kmcj-gray-600:#cbd5e1;
  --kmcj-bg:#ffffff;
}

*{ box-sizing:border-box }
html{ scroll-behavior:smooth }
body{
  margin:0;
  font-family:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  color:var(--kmcj-gray-900);
  background:var(--kmcj-bg);
  line-height:1.6;
}
a{ color:var(--kmcj-primary); text-decoration:none }
a:hover{ opacity:.9 }
.kmcj-container{ max-width:1200px; margin:0 auto; padding:0 20px }

/* ===== HEADER ===== */
.kmcj-header{
  z-index:100;
  transition:background-color .25s ease, box-shadow .25s ease, border-color .25s ease, color .25s ease;
  padding-top: env(safe-area-inset-top); /* safe-area iOS */
  overflow: visible; /* important pour les flyouts multi-niveaux */
}

/* Transparent en haut (superposé au héros) */
.kmcj-header.kmcj-header--transparent{
  position:absolute; top:0; left:0; right:0;
  background:transparent;
  border-bottom:none;
  box-shadow:none;
  color:#fff;
}
.kmcj-header.kmcj-header--transparent .kmcj-logo,
.kmcj-header.kmcj-header--transparent .kmcj-menu > li > a,
.kmcj-header.kmcj-header--transparent .kmcj-cta{ color:#fff; }

/* Solide au scroll */
.kmcj-header.is-scrolled{
  position:fixed; top:0; left:0; right:0;
  background:#1f2836; /* ou #0b2b5c si tu veux bleu marine plein */
  border-bottom:1px solid rgba(0,0,0,.08);
  box-shadow:0 8px 18px rgba(0,0,0,.2);
}
.kmcj-header.is-scrolled .kmcj-logo,
.kmcj-header.is-scrolled .kmcj-menu > li > a{ color:#e9eef5; }

/* Structure interne */
.kmcj-header-inner{ display:flex; align-items:center; gap:20px; padding:14px 0 }
.kmcj-logo{ display:flex; align-items:center; gap:10px; font-weight:800; font-size:18px }
.kmcj-logo img{ max-height:36px; width:auto; display:block } /* évite CLS */
.kmcj-nav{ margin-left:auto; display:flex; align-items:center; gap:20px; overflow:visible }

/* ===== Menus (desktop) ===== */
.kmcj-menu, .kmcj-menu ul{ list-style:none; margin:0; padding:0 }
.kmcj-menu{ display:flex; gap:24px }
.kmcj-menu > li{ position:relative }
.kmcj-menu a{
  display:inline-block;
  padding:8px 10px;
  font-weight:600;
  color:inherit;
}
.kmcj-menu li:hover > a{ opacity:1 }

/* Chevrons (desktop) – niveau 1 */
.kmcj-menu > li.menu-item-has-children > a{
  position:relative; padding-right:18px;
}
.kmcj-menu > li.menu-item-has-children > a::after{
  content:""; position:absolute; right:4px; top:50%;
  width:0; height:0;
  border-left:4px solid transparent;
  border-right:4px solid transparent;
  border-top:5px solid currentColor;
  transform:translateY(-40%);
  opacity:.95;
}
.kmcj-menu > li.menu-item-has-children:hover > a::after{
  transform:translateY(-40%) rotate(180deg);
}

/* Sous-menus (desktop) – défaut blanc */
.kmcj-menu li ul{
  position:absolute; left:0; top:100%;
  min-width:240px;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:10px;
  display:none;
  box-shadow:0 10px 18px rgba(0,0,0,.06);
  z-index:101;
}
.kmcj-menu li:hover > ul,
.kmcj-menu li:focus-within > ul{ display:block }

/* Items dropdown génériques */
.kmcj-menu li ul li > a{
  display:block;
  padding:8px 10px;
  white-space:nowrap;
  color:#111;
  position:relative;
}
.kmcj-menu li ul li > a:hover{ color:#0b2b5c }

/* En mode transparent : sous-menus sombres */
.kmcj-header.kmcj-header--transparent .kmcj-menu li ul{
  background:rgba(31,40,54,.96);
  border-color:transparent;
}
.kmcj-header.kmcj-header--transparent .kmcj-menu li ul a{ color:#f8fafc; }
.kmcj-header.kmcj-header--transparent .kmcj-menu li ul a:hover{ color:#fff; }

/* ===== CTA Paiement ===== */
.kmcj-cta{
  background:#c84f49;
  color:#fff;
  padding:10px 18px;
  border-radius:6px;
  font-weight:700;
  font-size:15px;
  line-height:1.4;
  display:inline-block;
  white-space:nowrap;
  text-decoration:none;
  transition:all .25s ease;
  border:1px solid transparent;
}
.kmcj-cta:hover{ background:#a63934; transform:translateY(-2px); }
.kmcj-header.is-scrolled .kmcj-cta{ background:#c84f49; color:#fff; border-color:#c84f49; }
.kmcj-header.kmcj-header--transparent .kmcj-cta{ background:#c84f49; color:#fff; }

/* ===== Mobile (base) ===== */
.kmcj-burger{ display:none; background:transparent; border:0; font-size:24px; margin-left:auto }
.kmcj-mobile{ display:none }

/* ===== PATCH Elementor / marges fantômes ===== */
html, body { overflow-x:hidden; border:0 !important }
.home .kmcj-page-full{ padding:0; margin:0 }
.home .elementor-section-wrap > .elementor-section:first-child{ margin-top:0 !important }
.home .elementor-section-wrap > .elementor-section:last-child { margin-bottom:0 !important }

/* Images Elementor : pas de “gap” baseline */
.elementor img,
.elementor-widget-image img{
  display:block;
  vertical-align:middle;
}

/* Sections fullbleed = pas de traits blancs */
.elementor-section.kmcj-fullbleed,
.kmcj-hero{
  position:relative;
  width:100vw; max-width:100vw;
  left:50%; transform:translateX(-50%);
}
.kmcj-hero::before, .kmcj-hero::after{ inset:-4px; }
.home .kmcj-hero{ margin-top:-1px }

/* ===========================================================
   HEADER PRO — overrides responsives & accessibilité
   =========================================================== */

/* Burger révisé (3 barres → croix) */
.kmcj-burger{
  position:relative;
  width:40px; height:40px;
  border:0; background:transparent; cursor:pointer;
  color:inherit;
}
.kmcj-burger__bar{
  position:absolute; left:8px; right:8px; height:2px; background:currentColor; border-radius:2px;
  transition:transform .25s ease, opacity .2s ease, top .25s ease;
}
.kmcj-burger__bar:nth-child(1){ top:12px; }
.kmcj-burger__bar:nth-child(2){ top:19px; }
.kmcj-burger__bar:nth-child(3){ top:26px; }
.kmcj-header.is-open .kmcj-burger__bar:nth-child(1){ top:19px; transform:rotate(45deg) }
.kmcj-header.is-open .kmcj-burger__bar:nth-child(2){ opacity:0 }
.kmcj-header.is-open .kmcj-burger__bar:nth-child(3){ top:19px; transform:rotate(-45deg) }

/* Panel mobile en overlay, scrollable */
.kmcj-mobile{
  position:fixed;
  inset:calc(var(--kmcj-header-offset, 64px) + env(safe-area-inset-top)) 0 0 0;
  background:#121822;
  color:#fff;
  display:block;
  max-height:calc(100vh - var(--kmcj-header-offset, 64px) - env(safe-area-inset-top));
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  transform:translateY(-8px);
  transition:opacity .2s ease, transform .2s ease;
}
.kmcj-mobile[hidden]{ display:block; opacity:0; pointer-events:none; transform:translateY(-8px) }
.kmcj-header.is-open #kmcj-mobile{ opacity:1; transform:translateY(0) }

/* Corps verrouillé quand menu ouvert */
.kmcj-no-scroll{ overflow:hidden; }

/* Mobile menu + sous-menus togglables */
.kmcj-menu-mobile, .kmcj-menu-mobile ul { list-style:none; margin:0; padding:0 }
.kmcj-menu-mobile > li > a{
  display:block; padding:14px 4px; color:#fff; font-weight:600; border-bottom:1px solid rgba(255,255,255,.08);
}
.kmcj-menu-mobile .menu-item-has-children > a{ position:relative; padding-right:28px }
.kmcj-menu-mobile .menu-item-has-children > a::after{
  content:""; position:absolute; right:6px; top:50%; width:8px; height:8px;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:translateY(-60%) rotate(-45deg); opacity:.9;
  transition:transform .2s ease;
}
.kmcj-menu-mobile .menu-item-has-children.is-open > a::after{ transform:translateY(-60%) rotate(45deg) }
.kmcj-menu-mobile li.menu-item-has-children > ul{
  display:none; padding:6px 0 6px 14px; border-left:2px solid rgba(255,255,255,.14);
}
.kmcj-menu-mobile li.menu-item-has-children.is-open > ul{ display:block }

.kmcj-mobile-cta{ padding:14px 0 18px; margin:0 }
.kmcj-mobile .kmcj-cta{
  display:block; width:100%; text-align:center;
  font-size:16px; padding:12px 14px; border-radius:4px; margin-top:10px;
}

/* État couleurs selon contexte */
.kmcj-header.kmcj-header--transparent,
.kmcj-header.kmcj-header--transparent .kmcj-menu > li > a,
.kmcj-header.kmcj-header--transparent .kmcj-cta,
.kmcj-header.kmcj-header--transparent .kmcj-burger { color:#fff; }

/* Breakpoints */
@media (max-width:980px){
  .kmcj-menu{ display:none }
  .kmcj-burger{ display:block }
  .kmcj-mobile{ display:block; border-top:1px solid rgba(255,255,255,.2) }
  .kmcj-header.kmcj-header--transparent .kmcj-mobile{ background:rgba(31,40,54,.98); }
  .kmcj-header.kmcj-header--transparent .kmcj-mobile a{ color:#fff; }
}
@media (min-width:981px){
  /* ré-affirmation desktop */
  .kmcj-menu{ display:flex; gap:24px }
  .kmcj-menu li ul{
    position:absolute; left:0; top:100%;
    min-width:240px; background:#fff; border:1px solid #e5e7eb;
    border-radius:12px; padding:10px; display:none;
    box-shadow:0 10px 18px rgba(0,0,0,.06);
  }
  .kmcj-header.kmcj-header--transparent .kmcj-menu li ul{ background:rgba(31,40,54,.96); border-color:transparent }
  .kmcj-header.kmcj-header--transparent .kmcj-menu li ul a{ color:#f8fafc }
}

/* Réduction animations si demandé */
@media (prefers-reduced-motion: reduce){
  .kmcj-burger__bar, .kmcj-mobile{ transition:none !important }
}

/* Offset calculé (modifiable) */
.kmcj-header { --kmcj-header-offset: 64px; }
@media (min-width:981px){ .kmcj-header { --kmcj-header-offset: 72px; } }

/* ===== Drawer Mobile Pro ===== */

/* Backdrop */
.kmcj-backdrop{
  position:fixed; inset:0; background:#0b0f17cc;
  opacity:0; pointer-events:none; transition:opacity .18s ease;
}
.kmcj-header.is-open .kmcj-backdrop{ opacity:1; pointer-events:auto; }
.kmcj-backdrop[hidden]{ display:block; opacity:0; pointer-events:none; }

/* Drawer */
.kmcj-drawer{
  position:fixed; top:0; right:0; bottom:0; width:min(88vw, 380px);
  background:#141b26; color:#fff;
  transform:translateX(100%); transition:transform .18s ease;
  display:flex; flex-direction:column; outline:0;
  box-shadow:-18px 0 28px rgba(0,0,0,.25);
}
.kmcj-header.is-open .kmcj-drawer{ transform:translateX(0); }
.kmcj-drawer[hidden]{ display:block; transform:translateX(100%); }

/* Drawer header */
.kmcj-drawer__header{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px; border-bottom:1px solid rgba(255,255,255,.08);
  background:linear-gradient(0deg, rgba(20,27,38,.92), rgba(20,27,38,.92));
}
.kmcj-drawer__logo img{ max-height:28px; display:block }
.kmcj-close{
  background:transparent; border:0; color:#fff; font-size:28px; line-height:1; cursor:pointer;
  width:40px; height:40px; display:grid; place-items:center;
}
.kmcj-close:hover{ opacity:.85 }

/* Drawer body */
.kmcj-drawer__body{ padding:8px 16px 20px; overflow:auto; -webkit-overflow-scrolling:touch; }

/* Mobile menu (structure) */
.kmcj-menu-mobile, .kmcj-menu-mobile ul{ list-style:none; margin:0; padding:0 }
.kmcj-menu-mobile > li{
  display:grid; grid-template-columns:1fr auto; align-items:center;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.kmcj-menu-mobile > li > a{
  color:#fff; font-weight:700; padding:14px 4px; display:block;
}
.kmcj-subtoggle{
  background:transparent; border:0; color:#fff; width:44px; height:44px; cursor:pointer;
  display:grid; place-items:center;
}
.kmcj-subtoggle__chev{
  width:8px; height:8px; border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(-45deg); transition:transform .18s ease; opacity:.9;
}
.kmcj-menu-mobile .is-open > .kmcj-subtoggle .kmcj-subtoggle__chev{ transform:rotate(45deg); }

.kmcj-menu-mobile li.menu-item-has-children > ul{
  grid-column:1/-1; display:none; padding:6px 0 10px 12px; border-left:2px solid rgba(255,255,255,.14);
}
.kmcj-menu-mobile li.menu-item-has-children.is-open > ul{ display:block; }
.kmcj-menu-mobile li.menu-item-has-children > ul a{
  color:#e6edf7; font-weight:600; padding:10px 2px; display:block;
}

/* CTA mobile plein largeur */
.kmcj-mobile-cta{ margin-top:14px }
.kmcj-drawer .kmcj-cta{
  display:block; width:100%; text-align:center; font-size:16px; padding:12px 14px; border-radius:6px;
}

/* Cohérence header transparent */
.kmcj-header.kmcj-header--transparent,
.kmcj-header.kmcj-header--transparent .kmcj-burger,
.kmcj-header.kmcj-header--transparent .kmcj-menu > li > a,
.kmcj-header.kmcj-header--transparent .kmcj-cta{ color:#fff; }

/* Réduction animations si demandé */
@media (prefers-reduced-motion: reduce){
  .kmcj-burger__bar, .kmcj-drawer, .kmcj-backdrop{ transition:none !important }
}

/* Drawer : retirer la flèche du lien (on garde le bouton à droite) */
.kmcj-drawer .menu-item-has-children > a::after{
  content:none !important;
  display:none !important;
}

/* Mobile header : centrer le bouton "Paiement" quand le menu est replié */
@media (max-width:980px){
  .kmcj-header .kmcj-header-inner{ position:relative; }
  .kmcj-header .kmcj-nav{ position:static; }
  .kmcj-header .kmcj-nav .kmcj-cta{
    position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
    margin:0; z-index:2; max-width:62vw; text-align:center;
  }
  .kmcj-header.is-open .kmcj-nav .kmcj-cta{ display:none; }
}

/* Retirer le bouton "Paiement" externe dans le header en responsive */
@media (max-width:980px){
  .kmcj-header .kmcj-nav .kmcj-cta{ display:none !important; }
}

/* ===== NAV – VERSION PRO (unique, sans doublons) ===================== */
/* rien ne doit couper les panneaux */
.kmcj-header, .kmcj-nav, .kmcj-menu, .kmcj-menu li{ overflow:visible }

/* NIVEAU 2 : panneau sous l’onglet principal */
.kmcj-menu > li > ul.sub-menu{
  position:absolute;
  top:100%; left:0;
  display:none;
  min-width:240px;
  z-index:190;
}
.kmcj-menu > li:hover > ul.sub-menu,
.kmcj-menu > li:focus-within > ul.sub-menu{ display:block }

/* NIVEAU 3 : flyout à DROITE de l’item du niveau 2 */
.kmcj-menu > li > ul.sub-menu > li{ position:relative }
.kmcj-menu > li > ul.sub-menu > li > ul.sub-menu{
  position:absolute; top:0; left:100%;
  margin-left:8px; display:none; min-width:240px;
  padding:10px; border:1px solid #e5e7eb; border-radius:12px;
  background:#fff; box-shadow:0 10px 18px rgba(0,0,0,.06); z-index:200;
}
.kmcj-menu > li > ul.sub-menu > li:hover > ul.sub-menu,
.kmcj-menu > li > ul.sub-menu > li:focus-within > ul.sub-menu{ display:block }

/* flèche ➜ sur les items du niveau 2 qui ont un sous-menu */
.kmcj-menu > li > ul.sub-menu > li.menu-item-has-children > a{
  position:relative; padding-right:28px;
}
.kmcj-menu > li > ul.sub-menu > li.menu-item-has-children > a::after{
  content:""; position:absolute; right:10px; top:50%; width:8px; height:8px;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:translateY(-50%) rotate(-45deg); opacity:.85;
}

/* pont anti “flicker” entre les panneaux (zone neutre cliquable) */
.kmcj-menu > li > ul.sub-menu > li::after{
  content:""; position:absolute; top:0; right:-10px; width:10px; height:100%;
}

/* Variante sombre quand header transparent (panneau niveau 3) */
.kmcj-header.kmcj-header--transparent
.kmcj-menu > li > ul.sub-menu > li > ul.sub-menu{
  background:rgba(31,40,54,.96); border-color:transparent;
}
.kmcj-header.kmcj-header--transparent
.kmcj-menu > li > ul.sub-menu > li.menu-item-has-children > a::after{
  border-color:currentColor; /* flèche visible en sombre */
}

/* ===== Container spécifique au header ===== */
.kmcj-header-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 20px;
}

/* Forcer la largeur correcte sur toutes les pages, y compris la home */
header.kmcj-header .kmcj-header-container {
  max-width: 1500px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
}

/* La navigation reste bien alignée à droite */
.kmcj-header .kmcj-nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 20px;
}

/* Le header reste toujours au-dessus des sections pleine largeur */
.kmcj-header {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 9999;
  transform: none !important;
}
.kmcj-hero.kmcj-hero--fullbleed {
  isolation: isolate;
  z-index: 0;
}

/* === KMCJ NAVBAR – PRO UPGRADE (visuels & a11y) ===================== */
/* 1) Level-1 : pill hover + indicateur d’onglet */
.kmcj-header .kmcj-menu > li > a{
  position:relative;
  border-radius:10px;
  padding:10px 14px;
  transition:background-color .18s ease, color .18s ease, opacity .18s ease;
}
.kmcj-header .kmcj-menu > li:hover > a,
.kmcj-header .kmcj-menu > li:focus-within > a{
  background:rgba(255,255,255,.08);
}
.kmcj-header.is-scrolled .kmcj-menu > li:hover > a,
.kmcj-header.is-scrolled .kmcj-menu > li:focus-within > a{
  background:rgba(11,43,92,.08);
}
.kmcj-header .kmcj-menu > li.current-menu-item > a,
.kmcj-header .kmcj-menu > li.current-menu-ancestor > a{
  background:rgba(200,79,73,.12);
  color:#fff;
}
.kmcj-header.is-scrolled .kmcj-menu > li.current-menu-item > a,
.kmcj-header.is-scrolled .kmcj-menu > li.current-menu-ancestor > a{
  color:#0b2b5c;
}
/* soulignement accent en hover/focus */
.kmcj-header .kmcj-menu > li > a::before{
  content:""; position:absolute; left:12px; right:12px; bottom:6px;
  height:2px; border-radius:2px; background:transparent;
  transform:scaleX(0); transform-origin:left;
  transition:transform .18s ease, background-color .18s ease;
}
.kmcj-header .kmcj-menu > li:hover > a::before,
.kmcj-header .kmcj-menu > li:focus-within > a::before{
  background:#c84f49; transform:scaleX(1);
}

/* 2) Dropdowns – look pro + contrastes adaptatifs */
.kmcj-header .kmcj-menu li ul{
  border:1px solid rgba(255,255,255,.12);
  background:rgba(20,27,38,.98);
  backdrop-filter:saturate(140%) blur(6px);
  border-radius:12px; padding:8px; min-width:260px;
}
.kmcj-header.is-scrolled .kmcj-menu li ul{
  background:#fff; border-color:#e5e7eb; backdrop-filter:none;
}
.kmcj-header .kmcj-menu li ul li > a{
  display:flex; align-items:center; gap:8px;
  padding:10px 12px; border-radius:8px;
  color:#e6edf7; font-weight:600;
}
.kmcj-header.is-scrolled .kmcj-menu li ul li > a{ color:#0f172a; }
.kmcj-header .kmcj-menu li ul li > a:hover,
.kmcj-header .kmcj-menu li ul li > a:focus-visible{
  background:rgba(200,79,73,.12);
  color:#fff;
}
.kmcj-header.is-scrolled .kmcj-menu li ul li > a:hover,
.kmcj-header.is-scrolled .kmcj-menu li ul li > a:focus-visible{
  background:rgba(11,43,92,.08);
  color:#0b2b5c;
}
.kmcj-header .kmcj-menu li ul li + li{ margin-top:2px; }

/* 3) Niv.3 – flyout propre à droite + parent surligné + chevron */
.kmcj-header .kmcj-menu > li > ul.sub-menu > li{ position:relative }
.kmcj-header .kmcj-menu > li > ul.sub-menu > li > ul.sub-menu{
  position:absolute; top:0; left:100%;
  margin-left:10px; min-width:260px;
  border-radius:12px;
  box-shadow:0 12px 24px rgba(0,0,0,.22);
  display:none;
}
.kmcj-header .kmcj-menu > li > ul.sub-menu > li:hover > ul.sub-menu,
.kmcj-header .kmcj-menu > li > ul.sub-menu > li:focus-within > ul.sub-menu{
  display:block;
}
.kmcj-header .kmcj-menu > li > ul.sub-menu > li:hover > a,
.kmcj-header .kmcj-menu > li > ul.sub-menu > li:focus-within > a{
  background:rgba(200,79,73,.12);
}
.kmcj-header .kmcj-menu > li > ul.sub-menu > li.menu-item-has-children > a{
  padding-right:32px;
}
.kmcj-header .kmcj-menu > li > ul.sub-menu > li.menu-item-has-children > a::after{
  content:""; position:absolute; right:12px; top:50%; width:8px; height:8px;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:translateY(-50%) rotate(-45deg); opacity:.7;
}

/* 4) Anti-flicker (couloir entre panneaux) */
.kmcj-header .kmcj-menu > li > ul.sub-menu > li::after{
  content:""; position:absolute; top:0; right:-12px; width:12px; height:100%;
}

/* 5) Focus clavier accessible et visible */
.kmcj-header a:focus-visible,
.kmcj-header button:focus-visible{
  outline:2px solid #c84f49; outline-offset:2px; border-radius:8px;
}

/* 6) Cohérence couleurs en mode header transparent */
.kmcj-header.kmcj-header--transparent .kmcj-menu > li > a{ color:#f8fafc }
.kmcj-header.kmcj-header--transparent .kmcj-menu li ul a{ color:#e6edf7 }
.kmcj-header.kmcj-header--transparent .kmcj-cta{ background:#c84f49; color:#fff }

/* 7) Un peu plus d’air en desktop */
@media (min-width:981px){
  .kmcj-header-inner{ padding:18px 0 }
  .kmcj-logo img{ max-height:38px }
}

/* ==========================================================
   FIX SCROLL STATE (header transparent + is-scrolled)
   – Force les dropdowns en clair quand on a scrollé
   – Unifie le 3e niveau (flyout droite) en clair
   ========================================================== */
.kmcj-header.is-scrolled .kmcj-menu > li > a{
  color:#e9eef5;
}
.kmcj-header.is-scrolled .kmcj-menu > li:hover > a,
.kmcj-header.is-scrolled .kmcj-menu > li:focus-within > a{
  color:#ffffff;
  background:rgba(255,255,255,.06);
}
.kmcj-header.is-scrolled .kmcj-menu > li:hover > a::before,
.kmcj-header.is-scrolled .kmcj-menu > li:focus-within > a::before{
  background:#c84f49;
}

/* État "scrolled" prioritaire même si --transparent est présent */
.kmcj-header.kmcj-header--transparent.is-scrolled .kmcj-menu li ul,
.kmcj-header.kmcj-header--transparent.is-scrolled .kmcj-menu > li > ul.sub-menu > li > ul.sub-menu{
  background:#ffffff !important;
  border-color:#e5e7eb !important;
  box-shadow:0 12px 24px rgba(0,0,0,.14) !important;
}
.kmcj-header.kmcj-header--transparent.is-scrolled .kmcj-menu li ul a{
  color:#0f172a !important;
}
.kmcj-header.kmcj-header--transparent.is-scrolled .kmcj-menu li ul a:hover,
.kmcj-header.kmcj-header--transparent.is-scrolled .kmcj-menu li ul a:focus-visible{
  background:rgba(11,43,92,.08) !important;
  color:#0b2b5c !important;
}
.kmcj-header.kmcj-header--transparent.is-scrolled 
.kmcj-menu > li > ul.sub-menu > li.menu-item-has-children > a::after{
  border-color:currentColor !important;
  opacity:.6;
}
.kmcj-header.is-scrolled 
.kmcj-menu > li > ul.sub-menu > li:hover > a,
.kmcj-header.is-scrolled 
.kmcj-menu > li > ul.sub-menu > li:focus-within > a{
  background:rgba(11,43,92,.08);
  color:#0b2b5c;
}

/* ===== Active item clair sur bandeau bleu (état scrolled) ===== */
.kmcj-header.is-scrolled .kmcj-menu > li.current-menu-item > a,
.kmcj-header.is-scrolled .kmcj-menu > li.current-menu-ancestor > a{
  background:#ffffff;                  /* pill claire */
  color:#0b2b5c;                       /* texte bleu marine */
  border:1px solid #e6ebf2;            /* liseré léger */
  box-shadow:0 4px 12px rgba(0,0,0,.08);
}

/* éviter que le hover ne recolore en foncé */
.kmcj-header.is-scrolled .kmcj-menu > li.current-menu-item:hover > a,
.kmcj-header.is-scrolled .kmcj-menu > li.current-menu-ancestor:hover > a,
.kmcj-header.is-scrolled .kmcj-menu > li.current-menu-item:focus-within > a,
.kmcj-header.is-scrolled .kmcj-menu > li.current-menu-ancestor:focus-within > a{
  background:#ffffff;
  color:#0b2b5c;
}

/* petite barre d’accent sous l’actif (cohérente avec le reste) */
.kmcj-header.is-scrolled .kmcj-menu > li.current-menu-item > a::before,
.kmcj-header.is-scrolled .kmcj-menu > li.current-menu-ancestor > a::before{
  background:#c84f49;
  transform:scaleX(1);
}

/* actif dans les sous-menus quand scrolled : clair aussi */
.kmcj-header.is-scrolled .kmcj-menu li ul li.current-menu-item > a,
.kmcj-header.is-scrolled .kmcj-menu li ul li.current-menu-ancestor > a{
  background:rgba(11,43,92,.08);
  color:#0b2b5c;
}

/* ===== Active item translucide sur bandeau bleu (état scrolled) ===== */
.kmcj-header.is-scrolled .kmcj-menu > li.current-menu-item > a,
.kmcj-header.is-scrolled .kmcj-menu > li.current-menu-ancestor > a{
  /* verre blanc léger */
  background: rgba(255,255,255,.16);
  color: #ffffff;
  border: 1px solid rgba(255,255,255,.24);
  box-shadow: 0 6px 16px rgba(0,0,0,.14);
  -webkit-backdrop-filter: saturate(140%) blur(2px);
  backdrop-filter: saturate(140%) blur(2px);
}

/* Hover/focus : un peu plus visible mais toujours léger */
.kmcj-header.is-scrolled .kmcj-menu > li.current-menu-item:hover > a,
.kmcj-header.is-scrolled .kmcj-menu > li.current-menu-ancestor:hover > a,
.kmcj-header.is-scrolled .kmcj-menu > li.current-menu-item:focus-within > a,
.kmcj-header.is-scrolled .kmcj-menu > li.current-menu-ancestor:focus-within > a{
  background: rgba(255,255,255,.24);
  color: #ffffff;
  border-color: rgba(255,255,255,.28);
}

/* Barre d’accent sous l’actif (garde le repère visuel) */
.kmcj-header.is-scrolled .kmcj-menu > li.current-menu-item > a::before,
.kmcj-header.is-scrolled .kmcj-menu > li.current-menu-ancestor > a::before{
  background:#c84f49;             /* passe à #fff si tu veux full monochrome */
  transform:scaleX(1);
}

/* Actif dans les sous-menus en mode scrolled : discret, lisible */
.kmcj-header.is-scrolled .kmcj-menu li ul li.current-menu-item > a,
.kmcj-header.is-scrolled .kmcj-menu li ul li.current-menu-ancestor > a{
  background: rgba(255,255,255,.18);
  color:#0f172a;
}

/* Option : si tu veux un pill encore plus subtil, dé-commente ci-dessous */
/*
.kmcj-header.is-scrolled .kmcj-menu > li.current-menu-item > a,
.kmcj-header.is-scrolled .kmcj-menu > li.current-menu-ancestor > a{ background:rgba(255,255,255,.12) }
*/