/* =========================================================
   KAREGEST — Design System (v1.1 clean)
   Palette : --brand #205a9a | --brand2 #269cce | --accent #f36621
   Base claire, header full-bleed, menu responsive + sous-menus,
   hero image/plain, sections, missions, bio, footer + utilitaires accent.
   ========================================================= */

/* ========== 1) Variables & base ========== */
:root{
  --bg:#ffffff;
  --text:#111827;
  --muted:#4b5563;
  --brand:#205a9a;   /* bleu principal */
  --brand2:#269cce;  /* bleu secondaire */
  --accent:#f36621;  /* orange */
  --radius:14px;
  --shadow:0 8px 24px rgba(0,0,0,.10);
  --maxw:1140px;
}

*{ box-sizing:border-box; }
html,body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;
  overflow-x:hidden;
}
a{ color:var(--brand2); text-decoration:none; }
a:hover{ text-decoration:underline; }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 20px; }
html.no-scroll, body.no-scroll{ overflow:hidden; }

/* Titres (charte) */
h1,h2,h3,h4{
  color:var(--brand);
  letter-spacing:.2px;
  margin:.4em 0 .35em;
}
h1{ font-size: clamp(28px,4.2vw,44px); line-height:1.15; }
h2{ font-size: clamp(22px,2.6vw,28px); line-height:1.2; }
h3{ font-size: clamp(18px,2vw,22px);  line-height:1.25; }

/* ========== 2) Header (logo + barre menu full-bleed) ========== */
.site-header{ background:#fff; border-bottom:0; }
.brand{ display:flex; align-items:center; gap:10px; padding:10px 0; }
.brand__logo{ height:90px; width:auto; display:block; object-fit:contain; }
.brand__title{ display:none; }

/* Barre menu full-bleed via ::before (pas de 100vw) */
.menu-bar{
  position:sticky; top:0; z-index:60;
  background:transparent !important; overflow:visible;
}
.menu-bar::before{
  content:"";
  position:absolute; inset:0; z-index:-1;
  background:var(--brand);
  box-shadow:0 2px 12px rgba(0,0,0,.12), 0 0 0 100vmax var(--brand);
  clip-path: inset(0 -100vmax);
}
.menu-bar .wrap{
  display:flex; align-items:center; gap:12px; padding:8px 20px;
}

.menu{ position:relative; z-index:61; overflow:visible; }
.nav{
  display:flex; align-items:center; flex-wrap:wrap; gap:12px;
  margin:0; list-style:none;
}
.nav > li{ position:relative; }
.nav a,.nav .sub-toggle{
  color:#fff; background:none; border:0; cursor:pointer; font:inherit;
  padding:10px 12px; border-radius:8px;
}
.nav a:hover,.nav .sub-toggle:hover{ background:rgba(255,255,255,.12); }
.nav .sub-toggle .caret{ margin-left:6px; opacity:.9; color:#fff; }
.nav .push{ margin-left:auto; }
.nav .cta{
  background:#fff; color:var(--brand);
  font-weight:700; border-radius:999px; padding:8px 14px; box-shadow:var(--shadow);
}
.nav .cta:hover{ background:#f3f4f6; }

/* Sous-menus */
.has-sub .sub{
  position:absolute; left:0; top:100%; z-index:999;
  min-width:260px; list-style:none; margin:8px 0 0; padding:8px;
  background:var(--brand2);
  border:1px solid rgba(255,255,255,.20);
  border-radius:12px; box-shadow:0 10px 24px rgba(0,0,0,.18);
  display:none;
}
.has-sub.open .sub{ display:block; }
.sub li a{ display:block; padding:10px 14px; border-radius:8px; color:#fff; }
.sub li a:hover{ background:rgba(0,0,0,.12); }

/* Soulignement fluide (menu) — non bloquant *
.menu .nav a,.menu .nav .sub li a,.menu .nav .sub-toggle{
  position:relative; text-decoration:none; outline-offset:2px;
}
.menu .nav > li > a::after,
.menu .nav > li > .sub-toggle::after,
.menu .nav .sub li a::after{
  content:""; position:absolute; left:10px; right:10px; bottom:6px;
  height:2px; background:currentColor; transform:scaleX(0);
  transform-origin:left center; transition:transform .25s ease;
  opacity:.9; pointer-events:none;
}
.menu .nav a:hover::after,
.menu .nav a:focus-visible::after,
.menu .nav .sub-toggle:hover::after,
.menu .nav .sub-toggle:focus-visible::after,
.menu .nav .sub li a:hover::after,
.menu .nav .sub li a:focus-visible::after{ transform:scaleX(1); }

/* Burger mobile */
.menu-toggle{
  display:none; z-index:62;
  width:38px; height:38px; background:none; border:0; cursor:pointer;
  flex-direction:column; justify-content:center; gap:5px;
}
.menu-toggle .bar{
  height:3px; width:100%; background:#fff; border-radius:3px; transition:.3s;
}
.menu-toggle.active .bar:nth-child(1){ transform:rotate(45deg) translate(6px,6px); }
.menu-toggle.active .bar:nth-child(2){ opacity:0; }
.menu-toggle.active .bar:nth-child(3){ transform:rotate(-45deg) translate(6px,-6px); }

/* Mobile header/nav */
@media (max-width:900px){
  .brand__logo{ height:56px; }
  .brand{ padding:6px 0; }
  .menu-toggle{ display:flex; }
  .menu{
    position:fixed; top:70px; left:0; right:0;
    background:var(--brand);
    transform:translateY(-120%); transition:transform .3s ease;
    display:flex; flex-direction:column; align-items:flex-start; gap:0; padding:10px 0;
  }
  .menu.open{ transform:translateY(0); }
  .menu a,.menu .sub-toggle{ width:100%; padding:12px 18px; }
  .has-sub .sub{ position:static; background:var(--brand2); box-shadow:none; margin:0; padding:0; }
  .sub li a{ padding:10px 24px; }
  .nav .push{ margin-left:0; }
}

/* Lien d’évitement */
.skip-link{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{
  position:fixed; left:16px; top:16px; width:auto; height:auto;
  background:#fff; border:2px solid var(--brand); padding:8px 12px; z-index:1000;
}

/* ========== 3) Hero ========== */
.hero{ position:relative; isolation:isolate; }
.hero__media{ position:absolute; inset:0; z-index:-1; overflow:hidden; }
.hero__media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.65));
}
.hero__img{ width:100%; height:60vh; object-fit:cover; object-position:center; }
.hero__content{ padding:64px 0 40px; }
.hero h1{ color:#fff; font-size:clamp(28px,5vw,44px); line-height:1.15; margin:12px 0 6px; }
.hero .slogan{ font-style:italic; color:#e5e7eb; }
.hero .lead{ max-width:800px; color:#e5e7eb; margin:8px 0 20px; }

.badge{
  display:inline-block; padding:6px 10px; border-radius:999px;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.22);
  font-size:14px; color:#e5e7eb; letter-spacing:.2px;
}

/* CTA lisible dans le hero */
.actions{ display:flex; gap:12px; flex-wrap:wrap; }
.pill{
  display:inline-flex; align-items:center; gap:8px; border-radius:999px;
  padding:6px 10px; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.18);
  font-size:13px; color:#e5e7eb;
}
.hero .pill{
  background:var(--accent); border:none; color:#fff; font-weight:700;
  padding:10px 14px; box-shadow:0 4px 14px rgba(0,0,0,.18);
}
.hero .pill:hover{ filter:brightness(.95); }

/* Hero plain (pages internes compact) */
.hero--plain{ position:relative; background:#fff !important; padding-top:1px; }
.hero--plain .hero__media,.hero--plain .hero__media::after{ display:none !important; }
.hero--plain .hero__content{ padding:20px 0 12px; }
.hero--plain h1{ color:var(--brand) !important; margin:0 0 6px; }
.hero--plain .lead{ color:#4b5563 !important; margin:4px 0 0; }

/* Mobile hero */
@media (max-width:640px){
  .hero__img{ height:48vh; }
  .hero__content{ padding:32px 0 28px; }
  .hero .badge{ font-size:15px; padding:6px 10px; }
  .hero h1{ font-size:clamp(22px,7vw,30px); }
  .hero .slogan{ font-size:clamp(16px,4.8vw,22px); }
  .hero .lead{ font-size:15px; margin:8px 0 16px; }
  .actions{ gap:10px; flex-direction:column; align-items:stretch; }
  .actions .pill,.actions .cta{ font-size:15px; padding:12px 14px; border-radius:12px; text-align:center; }
}

/* ========== 4) Sections & cartes génériques ========== */
.section{ padding:36px 0 54px; }
.grid{ display:grid; gap:18px; }
.grid-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
@media (max-width:900px){ .grid-3{ grid-template-columns:1fr; } }

.card{
  background:#fff; border:1px solid #e5e7eb; border-radius:var(--radius);
  box-shadow:var(--shadow); padding:20px; color:#111827;
}
.card h3{ margin:0 0 6px; font-size:20px; }
.card p{ margin:0; color:#4b5563; }

/* ========== 5) Sous-nav (Missions) ========== */
.subnav{
  display:flex; flex-wrap:wrap; gap:10px; margin:16px auto 6px; padding:8px 0;
  border-bottom:1px solid #e5e7eb; justify-content:center;
  position:sticky; top:80px; background:#fff; z-index:40;
}
.subnav a{
  color:var(--brand); font-weight:600; padding:6px 12px; border-radius:8px;
  transition:all .2s ease;
}
.subnav a:hover{ background:var(--brand2); color:#fff; }

/* ========== 6) Missions (cartes + icônes) ========== */
.missions{ scroll-margin-top:90px; }
.mission-card{
  display:flex; gap:26px; align-items:flex-start;
  background:#fff; border:1px solid #e5e7eb; border-radius:14px;
  padding:24px 28px; box-shadow:var(--shadow); margin-bottom:28px;
  scroll-margin-top:110px;
}
.missions .mission-card:nth-child(even){ flex-direction:row-reverse; }

.mission-visual{ flex:0 0 110px; display:flex; align-items:center; justify-content:center; }
.mission-visual .ico{
  display:inline-flex; align-items:center; justify-content:center;
  width:92px; height:92px; border-radius:22px;
  background:linear-gradient(135deg,var(--brand),var(--brand2));
  box-shadow:0 10px 24px rgba(0,0,0,.12);
  color:#fff;
}
.mission-visual .ico svg{ width:50px; height:50px; display:block; }
.mission-visual .ico svg *{ vector-effect:non-scaling-stroke; stroke-linecap:round; stroke-linejoin:round; }
.mission-visual .ico svg [stroke]{ stroke:currentColor; stroke-width:2; }
.mission-visual .ico svg [fill]{ fill:currentColor; }

.mission-content{ flex:1 1 auto; }
.mission-content h2{
  color:var(--brand); margin:0 0 10px; font-size:clamp(20px,2.2vw,26px);
  border-bottom:2px solid var(--brand2); padding-bottom:6px;
}
.mission-content ul{ margin:0; padding-left:20px; line-height:1.8; }
.mission-content li{ margin-bottom:4px; }

@media (max-width:900px){
  .mission-card{ flex-direction:column; }
  .mission-visual{ flex-basis:96px; }
  .mission-visual .ico{ width:80px; height:80px; border-radius:20px; }
  .mission-visual .ico svg{ width:40px; height:40px; }
}

/* ========== 7) Bio (portrait qui “coule” + image inline) ========== */
/* conteneur sans “carte” */
.bio-card{ margin-bottom:24px; padding:0; background:none; border:0; box-shadow:none; }

/* Portrait à gauche dans le flux */
.bio-media.left{
  float:left; width:260px; max-width:40%;
  margin:0 18px 10px 0;
  border-radius:16px; overflow:hidden; box-shadow:0 10px 24px rgba(0,0,0,.08);
}
.bio-media.left img{
  display:block; width:100%; height:auto; object-fit:cover; aspect-ratio:3/4;
}

/* Image inline à droite (ex: la-gerance.jpg) */
.inline-figure{ margin:0; }
.inline-figure img{
  display:block; width:100%; height:auto; border-radius:12px; box-shadow:0 6px 18px rgba(0,0,0,.08);
}
.inline-figure.right{ float:right; width:240px; margin:0 0 10px 18px; }

/* Clear floats à la fin du bloc bio */
.bio-content::after{ content:""; display:block; clear:both; }

/* Responsive : casser les floats */
@media (max-width:900px){
  .bio-media.left,.inline-figure.right{
    float:none; width:min(360px,92%); margin:12px auto;
  }
}

/* utilitaire accessibilité */
.visually-hidden{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ========== 8) Footer (clair + variante bleue) ========== */
.site-footer{
  background:#fff; border-top:1px solid #e5e7eb; color:#6b7280; padding:28px 0 16px;
}
.foot{
  display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:space-between; margin-bottom:8px;
}
.foot-links{ display:flex; gap:14px; flex-wrap:wrap; }
.foot-links a{ color:#374151; }
.foot-links a:hover{ text-decoration:underline; }
.foot-meta{ display:flex; justify-content:flex-end; }
.credit{ font-size:15px; color:#6b7280; }
.credit .author{ font-weight:600; color:#111827; }

.site-footer--blue{
  background:var(--brand); color:#f5f7fb; padding:28px 0 18px; border-top:0; box-shadow:0 -2px 12px rgba(0,0,0,.1);
}
.site-footer--blue .foot-links{ gap:14px; }
.site-footer--blue .foot-links a{
  color:#fff; opacity:.95; transition:opacity .2s; position:relative; text-decoration:none;
}
.site-footer--blue .foot-links a:hover{ opacity:1; }
.site-footer--blue .foot-links a::after{
  content:""; position:absolute; left:0; bottom:-2px; height:2px; width:100%;
  background:currentColor; transform:scaleX(0); transform-origin:left center; transition:transform .25s ease; opacity:.9; pointer-events:none;
}
.site-footer--blue .foot-links a:hover::after,
.site-footer--blue .foot-links a:focus-visible::after{ transform:scaleX(1); }
.site-footer--blue .credit{ color:#e5e7eb; }
.site-footer--blue .credit .author{ color:#fff; font-weight:600; }

@media (max-width:700px){
  .foot{ flex-direction:column; align-items:center; text-align:center; }
  .foot-links{ justify-content:center; }
  .foot-meta{ justify-content:center; margin-top:8px; }
}

/* ========== 9) Utilitaires “accent” (orange) ========== */
/* Boutons */
.btn{
  display:inline-block; padding:.65rem 1rem; border-radius:12px; font-weight:700; text-align:center;
  border:1px solid transparent; transition:filter .2s ease, transform .05s ease;
}
.btn:active{ transform:translateY(1px); }
.btn--primary{ background:var(--brand); color:#fff; }
.btn--accent{ background:var(--accent); color:#fff; }
.btn--ghost{ background:#fff; color:var(--brand); border-color:#e5e7eb; }
.btn--primary:hover,.btn--accent:hover,.btn--ghost:hover{ filter:brightness(.95); }

/* Liens accentués (souligné lisse en orange) */
.link-accent{ color:var(--text); position:relative; text-decoration:none; }
.link-accent::after{
  content:""; position:absolute; left:0; bottom:-2px; height:2px; width:100%;
  background:var(--accent); transform:scaleX(0); transform-origin:left center; transition:transform .25s ease;
}
.link-accent:hover::after,.link-accent:focus-visible::after{ transform:scaleX(1); }

/* Badges/pastilles */
.badge--accent{
  background:rgba(243,102,33,.10);
  color:var(--accent);
  border:1px solid rgba(243,102,33,.35);
}

/* Règle séparatrice orange */
.rule--accent{
  height:4px; width:72px; border:0; border-radius:999px; background:var(--accent);
}

/* Callout/encart */
.callout--accent{
  background:linear-gradient(180deg, #fff, #fff) padding-box,
             radial-gradient(100% 100% at 0% 0%, rgba(243,102,33,.45), rgba(38,156,206,.20)) border-box;
  border:1px solid transparent; border-radius:16px; padding:16px 18px;
}
.callout--accent h3{ margin-top:0; }

/* Puce liste orange (applique sur <ul class="k-bullets">) */
.k-bullets{ list-style:none; padding-left:0; }
.k-bullets li{ position:relative; padding-left:18px; margin:6px 0; }
.k-bullets li::before{
  content:""; position:absolute; left:0; top:.72em; width:8px; height:8px;
  background:var(--accent); border-radius:50%;
}

/* Marqueur de texte */
mark.accent{ background: linear-gradient(transparent 60%, rgba(243,102,33,.25) 60%); }

/* ========== 10) Ajustements compacts d’entête (pages internes) ========== */
@media (min-width:901px){
  .brand{ padding:4px 0; }
  .brand__logo{ height:72px; }
  .menu-bar .wrap{ padding-top:6px; padding-bottom:6px; }
}
/* Adoucir les espacements du texte autour des images */
.bio-content p{ margin: 0.65em 0; }

/* La grande photo à gauche : wrap plus naturel + antialias */
.bio-media.left{
  shape-outside: margin-box;   /* permet un habillage propre */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* La petite image à droite : démarre un peu plus haut visuellement */
.inline-figure.right{ margin-top: 2px; }

/* Sur écrans étroits : limite la largeur pour éviter les lignes ultra-longues */
@media (min-width: 1200px){
  .bio-content{ max-width: 75ch; }
}
/* Le texte peut reprendre toute la largeur après quelques paragraphes */
@media (min-width: 901px){
  /* Option A : limiter la hauteur du portrait flottant (évite une colonne étroite trop longue) */
  .bio-media.left{
    width:260px;
    max-height:420px;     /* ajuste 360–480px selon rendu */
  }
  .bio-media.left img{
    width:100%; height:100%; object-fit:cover;
  }

  /* Quand tu veux forcer le retour en pleine largeur */
  .break-float{ clear:left; }
}

/* Si tu avais copié une limite de largeur de texte, on l’annule */
@media (min-width: 1200px){
  .bio-content{ max-width: none; }  /* enlève toute contrainte */
}
/* Puces orange dans les cartes et contenus principaux */
.card ul li::marker,
.section ul li::marker {
  color: var(--accent); /* #f36621 */
}

/* Numéros des listes ordonnées en orange aussi */
.card ol li::marker,
.section ol li::marker {
  color: var(--accent);
  font-weight: 600; /* (option) un peu plus d’impact */
}
/* Boutons génériques */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px;
  padding:10px 14px;
  border-radius:12px;
  font-weight:700;
  text-decoration:none;
  border:0;
  box-shadow:0 4px 14px rgba(0,0,0,.08);
  transition:filter .2s ease, transform .02s ease;
}
.btn:active{ transform: translateY(1px); }

/* Variantes */
.btn--accent{ background: var(--accent); color:#fff; }
.btn--accent:hover{ filter: brightness(.95); }

.btn--brand{ background: var(--brand); color:#fff; }
.btn--brand:hover{ filter: brightness(.96); }

/* Option “outline clair” si besoin sur fond blanc */
.btn--outline{
  background:#fff; color: var(--brand);
  border:1px solid #e5e7eb;
}
.btn--outline:hover{ filter: brightness(.98); }

/* Regroupe les boutons dans une carte */
.card .actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:8px; }
/* ===== Formulaire (Contact) ===== */
.contact-form .field{ margin-bottom:14px; }
.contact-form label{
  display:block; font-weight:600; margin:0 0 6px;
}
.contact-form input,
.contact-form textarea{
  width:100%;
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:10px 12px;
  font:inherit;
  color:var(--text);
  background:#fff;
}
.contact-form textarea{ resize:vertical; min-height:160px; }
.contact-form input:focus,
.contact-form textarea:focus{
  outline:2px solid var(--brand2);
  outline-offset:2px;
}

/* Honeypot off-screen (pas display:none) */
.hp{position:absolute !important;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* Boutons */
.btn{
  display:inline-block; padding:10px 14px; border-radius:12px;
  text-decoration:none; border:0; cursor:pointer; font-weight:700;
}
.btn--accent{ background:var(--accent); color:#fff; box-shadow:0 4px 14px rgba(0,0,0,.12); }
.btn--accent:hover{ filter:brightness(.96); }
.btn--brand{ background:#fff; color:var(--brand); border:1px solid #d1d5db; }
.btn--brand:hover{ background:#f9fafb; }
.btn--ghost{ background:transparent; color:var(--brand); border:1px solid #d1d5db; }
.btn--ghost:hover{ background:#f3f4f6; }

/* Cartes alertes */
.card[role="alert"]{ background:#fff7ed; border-color:#fdba74; }
.card[role="alert"] ul{ margin:6px 0 0 18px; }
/* Ligne accent orange sous le H1 */
.rule--accent{
  border:0; height:3px;
  background:linear-gradient(90deg,#f36621,#f36621 60%,transparent);
}

/* Encart devise orange soft */
.callout--accent{
  background:rgba(243,102,33,.06);
  border:1px solid rgba(243,102,33,.25);
  border-left:6px solid #f36621;
  border-radius:12px; padding:16px 18px;
  box-shadow:0 4px 14px rgba(0,0,0,.06);
  margin-bottom:12px;
}
.quote-accent{ margin:0; color:#4b5563; }
.quote-accent strong{ color:#111827; }
.btn.btn--brand{
  display:inline-block;
  background: var(--brand);
  color:#fff;
  padding:10px 14px;
  border-radius:10px;
  font-weight:700;
  text-decoration:none;
}
.btn.btn--brand:hover{ filter:brightness(.95); }
/* === MOBILE: menu plein écran lisible === */
@media (max-width: 980px){
  /* Le conteneur menu prend tout l’écran sous la bande logo */
  .menu{
    position: fixed;
    left: 0; right: 0;
    top: var(--brandH, 92px);            /* hauteur mesurée par JS */
    background: var(--band, #205a9a);    /* vert SIFEC si défini */
    z-index: 999;

    /* ÉTAT FERMÉ par défaut */
    display: none;                       /* cache */
    transform: translateY(0) !important; /* annule tout translate hérité */
    pointer-events: none;
    max-height: calc(100vh - var(--brandH, 92px));
    overflow: auto;
  }

  /* ÉTAT OUVERT (ajouté par JS) */
  .menu.open{
    display: block;
    pointer-events: auto;
  }

  /* Liste verticale, visible uniquement menu ouvert */
  .menu .nav{
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 10px 0;
  }

  /* Liens lisibles sur fond coloré */
  .menu .nav > li > a,
  .menu .nav > li > .sub-toggle{
    display: block;
    color: #fff !important;
    padding: 12px 16px;
    border-radius: 0;
    background: transparent !important;
  }

  /* Sous-menus */
  .has-sub .sub{
    position: static;
    display: none;
    background: color-mix(in oklab, var(--band, #205a9a) 78%, #000 22%);
    border: 0;
    box-shadow: none;
    padding: 0;
  }
  .has-sub.open .sub{ display: block; }
  .has-sub .sub li a{ color: #fff; padding: 10px 16px; display: block; }

  /* Caret ▼ qui pivote quand ouvert */
  .sub-toggle .caret{ display:inline-block; transition: transform .2s ease; }
  .has-sub.open .sub-toggle .caret{ transform: rotate(180deg); }
}

/* S’assure que la bande de menu reste au-dessus du hero */
.menu-bar{ position: sticky; top: 0; z-index: 120; }
/* === MOBILE : accordéon fiable pour sous-menus === */
@media (max-width: 980px){
  /* Conteneur menu */
  .menu{
    position: fixed;
    left: 0; right: 0;
    top: var(--brandH, 92px);
    background: var(--band, #205a9a);
    z-index: 999;
    display: none;
    transform: none !important;          /* neutralise translate hérités */
    pointer-events: none;
    max-height: calc(100vh - var(--brandH, 92px));
    overflow: auto;
  }
  .menu.open{
    display: block;
    pointer-events: auto;
  }

  /* Liste verticale */
  .menu .nav{
    display: flex !important;            /* visible quand .menu.open */
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 10px 0;
  }

  /* Lignes cliquables */
  .menu .nav > li > a,
  .menu .nav > li > .sub-toggle{
    display: block;
    width: 100%;
    color: #fff !important;
    padding: 12px 16px;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
  }

  /* Sous-menus : ON CACHE par défaut… */
  .menu .has-sub > .sub{
    position: static !important;
    display: none !important;            /* <- clé */
    background: color-mix(in oklab, var(--band, #205a9a) 78%, #000 22%) !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
  }
  /* … et ON MONTRE quand .open est sur le <li> */
  .menu .has-sub.open > .sub{
    display: block !important;           /* <- clé */
  }

  /* Liens du sous-menu */
  .menu .has-sub .sub a{
    color: #fff !important;
    padding: 10px 16px;
    display: block;
  }

  /* Caret qui pivote quand ouvert */
  .menu .has-sub > .sub-toggle .caret{
    display: inline-block;
    margin-left: .4rem;
    transition: transform .2s ease;
  }
  .menu .has-sub.open > .sub-toggle .caret{
    transform: rotate(180deg);
  }
}