/* =========================================================
   SIFEC overrides for Karegest (keep assets/css/style.css intact)
   – Colors
   – Menu bar / links
   – Desktop submenus (no hover gap, easy to select)
   – Mobile menu & accordion
   – Underline that never crosses text nor blocks pointer
   ========================================================= */

/* ---------- Brand mapping ---------- */
:root{
  --brand-primary:#B3C741;   /* SIFEC green */
  --brand-blue:#1177A8;
  --brand-orange:#F68C40;

  /* Map Karegest tokens */
  --band:  var(--brand-primary);
  --band2: color-mix(in oklab, var(--band) 78%, #000 22%);
  --brand: var(--band);
  --brand2: color-mix(in oklab, var(--band) 55%, #fff 45%);
  --accent:var(--brand-orange);
}
html[data-theme="CI"]{
  --band:  var(--brand-primary);
  --band2: color-mix(in oklab, var(--band) 78%, #000 22%);
  --brand: var(--band);
  --brand2: color-mix(in oklab, var(--band) 55%, #fff 45%);
  --accent:var(--brand-orange);
}

/* ---------- Menu bar look ---------- */
.menu-bar{ background: var(--band); }
.menu .nav a,
.menu .nav .sub-toggle{ color:#fff; }
.menu .nav a:hover,
.menu .nav .sub-toggle:hover{ background: rgba(255,255,255,.12); }
.menu-toggle .bar{ background:#fff; }

/* ---------- Zero gap header ↔ hero (optional) ---------- */
.site-header, .menu-bar{ margin:0; border-bottom:0; }
.page{ padding-top:0; }

/* ---------- HERO driven by --hero (optional; keeps your setup) ---------- */
.hero--karegest{
  position: relative;
  left:50%; right:50%;
  margin-left:-50vw; margin-right:-50vw; width:100vw;
  min-height: calc(100vh - 78px - 52px);
  margin-top:-1px;                        /* hides sub-pixel line */
  display:grid; align-items:center; isolation:isolate;
}
.hero--karegest::before{
  content:""; position:absolute; inset:0; z-index:0;
  background-image: var(--hero); background-size:cover; background-position: 8% 72%;
}
.hero--karegest::after{
  content:""; position:absolute; inset:0; z-index:0;
  background: linear-gradient(to bottom, rgba(0,0,0,.22), rgba(0,0,0,.46));
}
.hero--karegest .hero__inner{ position:relative; z-index:1; padding:56px 0; }
.hero__title{ color:#fff; font-size:clamp(32px,5vw,54px); line-height:1.05; margin:10px 0 6px; }
.hero__lead{ color:rgba(255,255,255,.95); }
.pill{ background:#fff; color:#1b2330; border:1px solid #fff; }
.pill:hover{ background:#f7f9fc; }

/* ---------- Logo size tweak (optional) ---------- */
.brand__logo{ height:80px!important; width:auto; object-fit:contain; display:block; }
@media (max-width:900px){ .brand__logo{ height:64px!important; } }

/* =========================================================
   DESKTOP SUBMENUS — make hover reliable, no “gap”
   ========================================================= */
@media (min-width:981px){
  /* Ensure parent anchors don’t add bottom margins or weird hitboxes */
  .menu .nav > li{ position: relative; }
  .menu .nav > li > a,
  .menu .nav > li > .sub-toggle{
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    line-height: 1.1;
    padding: 10px 14px 14px; /* small bottom room for underline */
    background: transparent;
    text-decoration: none;
  }

  /* The submenu sits flush under the parent (no margin that creates a hover gap) */
  .has-sub > .sub{
    position: absolute;
    left: 0;
    top: 100%;                 /* flush to bottom edge of trigger */
    margin-top: 0;             /* IMPORTANT: no gap */
    z-index: 1000;             /* above hero and other bands */
    min-width: 260px;
    list-style: none;
    display: none;
    padding: 8px;
    background: var(--band2);
    border:1px solid rgba(0,0,0,.18);
    border-radius:12px;
    box-shadow:0 12px 24px rgba(0,0,0,.22);
    pointer-events: auto;      /* clickable */
  }

  /* Keep it open while hovering either the parent li or the submenu itself */
  .has-sub:hover > .sub,
  .has-sub:focus-within > .sub{ display:block; }

  /* Submenu links */
  .has-sub .sub li a{
    display:block;
    color:#fff;
    padding:10px 14px;
    border-radius:8px;
    background: transparent;
  }
  .has-sub .sub li a:hover{ background: rgba(255,255,255,.10); }

  /* Optional visual underline for top-level items, never crosses text */
  .menu .nav > li > a,
  .menu .nav > li > .sub-toggle{
    box-shadow: none; /* default */
  }
  .menu .nav > li:hover > a,
  .menu .nav > li > a:focus-visible,
  .menu .nav > li > .sub-toggle:hover,
  .menu .nav > li > .sub-toggle:focus-visible{
    box-shadow: inset 0 -2px currentColor;
  }

  /* Caret spacing on sub-toggle */
  .menu .nav > li > .sub-toggle .caret{
    margin-left: .45rem;
    opacity: .95;
  }

  /* Safety: nothing overlays the submenu from above */
  .menu{ position: relative; z-index: 110; overflow: visible; }
  .menu-bar{ position: sticky; top:0; z-index:120; }
}

/* =========================================================
   MOBILE MENU (<= 980px) — full-width panel + accordion
   ========================================================= */
@media (max-width:980px){
  /* Menu panel sits under measurable brand height (set via JS to --brandH) */
  .menu{
    position: fixed;
    left: 0; right: 0;
    top: var(--brandH, 92px);
    background: var(--band);
    z-index: 999;
    display: none;                 /* closed by default */
    pointer-events: none;
    max-height: calc(100vh - var(--brandH, 92px));
    overflow: auto;
    transform: none !important;
  }
  .menu.open{
    display: block;
    pointer-events: auto;
  }

  /* Vertical list */
  .menu .nav{
    display:flex;
    flex-direction:column;
    gap:0;
    margin:0;
    padding:10px 0;
  }

  /* Top-level rows */
  .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;
    text-decoration:none;
    box-shadow:none !important;   /* no underline effect on mobile */
  }

  /* Accordion submenus: hidden by default, shown when parent <li> has .open */
  .menu .has-sub > .sub{
    position: static !important;
    display: none !important;
    background: color-mix(in oklab, var(--band) 78%, #000 22%) !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
  }
  .menu .has-sub.open > .sub{ display:block !important; }

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

  /* Caret anim */
  .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);
  }

  /* Optional: prevent body scroll when menu open (JS toggles .nav-open on <html>) */
  html.nav-open{ overflow:hidden; }
}

/* =========================================================
   UNDERLINE (desktop only) — unified, never “through” text
   (mobile: no underline for clarity)
   ========================================================= */
@media (min-width:981px){
  .menu .nav > li > a,
  .menu .nav > li > .sub-toggle{
    text-decoration:none;
  }
}
@media (max-width:980px){
  .menu .nav > li > a::after,
  .menu .nav > li > .sub-toggle::after{ display:none !important; }
}
/* Aligner "Accueil" exactement sur le bord gauche du logo */
@media (min-width: 901px){
  /* mème padding que la ligne logo */
  .menu-bar .wrap{ padding-left:20px; padding-right:20px; }

  /* retire le padding gauche uniquement sur le 1er item */
  .menu .nav > li:first-child > a,
  .menu .nav > li:first-child > .sub-toggle{
    padding-left:0;
  }

  /* aligne aussi le soulignement animé/trait */
  .menu .nav > li:first-child > a::after,
  .menu .nav > li:first-child > .sub-toggle::after{
    left:0;
  }

  /* si tu utilises la variante "box-shadow inset" pour l’underline */
  .menu .nav > li:first-child > a,
  .menu .nav > li:first-child > .sub-toggle{
    box-shadow:none; /* sera remis au hover via tes règles existantes */
  }
}
/* KPIs maison (accueil) */
.kpi-grid .kpi{
  text-align:center;
  padding:24px 18px;
}
.kpi__num{
  font-size: clamp(28px, 6vw, 44px);
  font-weight: 800;
  color: var(--brand);
  line-height: 1;
  margin-bottom: 6px;
}
.kpi__label{
  color: var(--muted);
  font-weight: 600;
}
/* Cartes secteurs compactes (accueil) */
#secteurs .card { padding:16px 18px; text-align:center; }
#secteurs h3 { margin:.1rem 0; font-size:18px; }
/* ===== Actualités & insights (cartes vedettes) ===== */
.post-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.post-card .post-thumb { display:block; aspect-ratio: 16 / 9; overflow:hidden; }
.post-card .post-thumb img{
  width:100%; height:100%; object-fit:cover; display:block; transition: transform .35s ease;
}
.post-card:hover .post-thumb img{ transform: scale(1.03); }
.post-card .post-body{ padding:16px 16px 18px; }
.post-card .post-title{ margin:0 0 6px; font-size: clamp(18px, 2.2vw, 20px); color: var(--brand); }
.post-card .post-title a{ color: inherit; text-decoration: none; }
.post-card .post-excerpt{ margin: 0 0 10px; color: var(--muted); }
/* ===== Liste articles (grille + cartes) ===== */
.posts-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 18px;
}
@media (max-width: 900px){
  .posts-grid{ grid-template-columns: 1fr; }
}

.post-card{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius: var(--radius, 14px);
  box-shadow: var(--shadow, 0 8px 24px rgba(0,0,0,.08));
  overflow:hidden;
  display:flex; flex-direction:column;
}

.post-media{ display:block; aspect-ratio:16/9; overflow:hidden; }
.post-media img{ width:100%; height:100%; object-fit:cover; transition: transform .35s ease; }
.post-card:hover .post-media img{ transform:scale(1.03); }

.post-body{ padding:16px 16px 18px; }
.post-title{ margin:0 0 6px; font-size: clamp(18px,2.2vw,20px); color: var(--brand); }
.post-title a{ color: inherit; text-decoration:none; }
.post-intro{ margin: 0 0 10px; color: var(--muted); }
.post-meta{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.post-meta time{ color:#6b7280; font-size:14px; }
/* SIFEC — règle orange plus longue sous les titres */
.page .rule--accent{
  border: 0;
  height: 4px;
  width: 200px;                    /* ← longueur souhaitée */
  background: linear-gradient(90deg, var(--accent), var(--accent) 80%, transparent);
  border-radius: 999px;
  display: block;
  margin: 8px 0 16px !important;   /* un peu d’air autour */
}
@media (min-width: 992px){
  .page .rule--accent{ width: 240px; }
}
/* Accent long façon Karegest */
.rule--accent{
  border:0;
  height:4px;
  border-radius:999px;
  background: linear-gradient(90deg, var(--accent), var(--accent) 75%, transparent);
  width: clamp(120px, 32vw, 520px);
}
/* ====== SIFEC: séparateur orange + section "Poursuivre la lecture" ====== */

/* 1) Trait orange plein container (large et lisible) */
.rule--accent{
  display:block;
  width:100% !important;                 /* au cas où Karegest fixe une largeur courte */
  height:4px;                             /* + épais */
  border:0;
  border-radius:999px;
  background:linear-gradient(90deg, var(--accent), var(--accent) 80%, transparent);
  margin:10px 0 16px;                     /* un peu d’air autour */
}

/* Dans les héros sobres (titres de page), on garde le même style mais on accepte
   un trait encore plus impactant si tu veux :
.hero--plain .rule--accent{ height:5px; } */

/* 2) Grille des cartes d’articles (utilisée par actualités + “poursuivre la lecture”) */
.posts-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:18px;
}
@media (max-width: 900px){
  .posts-grid{ grid-template-columns:1fr; }
}

/* Cartes (visuel + corps) */
.post-card{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:12px;
  box-shadow:var(--shadow);
  overflow:hidden;
}
.post-card .post-media img{
  display:block; width:100%; height:auto;
}
.post-card .post-body{
  padding:14px 14px 12px;
}
.post-card .post-title{
  margin:0 0 6px; font-size:1.05rem; line-height:1.3;
}
.post-card .post-intro{
  margin:0 0 10px; color:#4b5563;
}
.post-card .post-meta{
  display:flex; gap:10px; align-items:center; justify-content:space-between;
}

/* 3) Option A (recommandé) : section “Poursuivre la lecture” large comme le contenu */
.section--more .wrap{ max-width: var(--maxw); }

/* 4) Option B (plein écran/bleed) : étirer la section bord à bord
   - ajoute la classe .section--bleed sur ta section si tu veux vraiment sortir du conteneur */
.section--bleed{
  position:relative;
  left:50%; right:50%;
  width:100vw;
  margin-left:-50vw; margin-right:-50vw;
  background: #fff;               /* ou une couleur de fond si tu veux */
}
.section--bleed .wrap{
  max-width:var(--maxw);
}

/* 5) Sélecteurs plus spécifiques pour annuler un éventuel trait court de Karegest */
.hero--plain .rule--accent,
.section .wrap .rule--accent{
  width:100% !important;
}
.rule--accent {
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
/* Full-bleed: bandeau qui s'étire bord à bord */
.full-bleed {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.full-bleed > .inner {
  max-width: var(--maxw, 1140px);
  margin: 0 auto;
  padding: 0 20px;
}
/* Variante visuelle pour le callout en bandeau */
.callout--accent.lead.full-bleed {
  border-radius: 0;
  box-shadow: none;
  padding: 20px 0;
}

/* Évite d'éventuels mini scrolls horizontaux */
@supports (overflow-x: clip) {
  html { overflow-x: clip; }
}
/* Remplace l’orange par le vert SIFEC pour tous les callouts accent */
.callout--accent{
  background: color-mix(in oklab, var(--brand) 10%, #fff 90%);
  border: 1px solid color-mix(in oklab, var(--brand) 30%, #fff 70%);
  border-left: 6px solid var(--brand);
  border-radius: 12px;
  padding: 16px 18px;
  box-shadow: 0 4px 14px rgba(0,0,0,.06);
}
/* ===== SIFEC palette override (global) ===== */
:root{
  /* New primary green */
  --brand: #8C9E1D;                 /* main brand */
  --brand2: color-mix(in oklab, #8C9E1D 72%, #ffffff 28%); /* lighter companion */
  --band: #8C9E1D;                  /* header band (menu) */
  --band2: color-mix(in oklab, #8C9E1D 78%, #000 22%);     /* submenus bg */
  --accent: #F68C40;                /* keep orange accent unless you want to change it */
}

/* If you want CI to share exactly the same palette */
html[data-theme="CI"]{
  --brand: #8C9E1D;
  --brand2: color-mix(in oklab, #8C9E1D 72%, #ffffff 28%);
  --band: #8C9E1D;
  --band2: color-mix(in oklab, #8C9E1D 78%, #000 22%);
  --accent: #F68C40;
}

/* Buttons & callouts inherit automatically, but make the green callout solidly on-brand */
.callout--brand{
  background: color-mix(in oklab, var(--brand) 10%, #fff 90%);
  border: 1px solid color-mix(in oklab, var(--brand) 32%, #fff 68%);
  border-left: 6px solid var(--brand);
}

/* Improve focus rings to match the new green */
:focus-visible{
  outline-color: var(--brand);
}

/* Ensure menu items keep good contrast on the darker band */
.menu .nav a, .menu .nav .sub-toggle { color:#fff; }
.has-sub .sub { background: var(--band2); }
.callout--accent{ /* replace orange style site-wide */
  background: color-mix(in oklab, var(--brand) 10%, #fff 90%);
  border: 1px solid color-mix(in oklab, var(--brand) 30%, #fff 70%);
  border-left: 6px solid var(--brand);
}
/* ===== Compactage du menu (desktop) ===== */
@media (min-width: 981px){
  /* 1) Forcer une seule ligne */
  .menu .nav{
    flex-wrap: nowrap !important;
    gap: 7px;                 /* était ~12px */
  }

  /* 2) Liens plus compacts */
  .menu .nav > li > a,
  .menu .nav > li > .sub-toggle{
    padding: 8px 10px 12px;   /* réduit haut/latéral/bas */
    font-size: 15px;          /* était 16px */
    letter-spacing: 0;        /* serrer légèrement */
  }

  /* 3) Flèche ▼ plus proche du libellé */
  .menu .nav > li > .sub-toggle .caret{
    margin-left: .25rem;
  }

  /* 4) Soulignement (évite d’ajouter de la hauteur) */
  .menu .nav > li:hover > a,
  .menu .nav > li > a:focus-visible,
  .menu .nav > li > .sub-toggle:hover,
  .menu .nav > li > .sub-toggle:focus-visible{
    box-shadow: inset 0 -2px currentColor;
  }
}

/* Option: encore plus serré entre 1100–1280px si ça passe encore à la ligne */
@media (min-width:1100px) and (max-width:1280px){
  .menu .nav{ gap: 4px; }
  .menu .nav > li > a,
  .menu .nav > li > .sub-toggle{
    padding: 7px 9px 10px;
    font-size: 14.5px;
  }
}
/* ====== Layout À propos (sidebar + contenu) ====== */
.about-layout{
  display:grid;
  grid-template-columns: 260px 1fr;
  gap: 24px;
  align-items:start;
}

@media (max-width: 980px){
  .about-layout{
    grid-template-columns: 1fr;
  }
}

/* Sidebar */
.about-aside{
  position: sticky;
  top: calc(var(--brandH, 92px) + 12px); /* reste visible sous le header */
  align-self:start;
}
.about-aside__title{
  margin: 0 0 8px;
  font-size: 18px;
  color: var(--brand);
}
.about-nav__list{
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 4px 14px rgba(0,0,0,.06);
}
.about-nav__item + .about-nav__item{
  border-top: 1px solid #f1f5f9;
}
.about-nav__link{
  display: block;
  padding: 10px 12px;
  text-decoration: none;
  color: #1f2937;
  transition: background .2s ease, color .2s ease;
}
.about-nav__link:hover{
  background: #f8fafc;
}
.about-nav__link.is-active{
  font-weight: 700;
  color: var(--brand);
  background: rgba(140,158,29,.10); /* léger rappel vert SIFEC */
}

/* Contenu principal */
.about-main .content p{ margin: .7em 0; }

/* Carte/photo gérant */
.about-manager{
  margin: 18px 0 0;
  text-align: center;
}
.about-manager img{
  width: 100%;
  max-width: 280px;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.10);
}
.about-manager figcaption{
  margin-top: 10px;
  font-weight: 600;
  color: var(--muted);
}
.about-manager figcaption span{
  display:block;
  font-weight: 400;
}
/* ===== Layout latéral pour les pages "À propos" ===== */
.layout--sidebar{
  display:grid;
  grid-template-columns: 280px 1fr;
  gap: 24px;
  align-items: start;
}

/* Empile sur mobile */
@media (max-width: 900px){
  .layout--sidebar{
    grid-template-columns: 1fr;
  }
  .sidebar{
    position: static; /* supprime le sticky */
  }
}

/* Sidebar style (léger background) */
.sidebar-card{
  padding: 14px;
  border-radius: var(--radius, 12px);
  background: color-mix(in oklab, var(--brand, #205a9a) 6%, #fff 94%);
  border: 1px solid #e5e7eb;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
  position: sticky;
  top: 90px; /* sous le header collant */
}

.sidebar-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.sidebar-link{
  display:block;
  padding: 8px 10px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--brand);
  background: transparent;
  transition: background .2s ease, color .2s ease;
}
.sidebar-link:hover{
  background: rgba(0,0,0,.04);
}
.sidebar-link.is-active{
  font-weight: 700;
  color: var(--brand);
  background: rgba(0,0,0,.04);
}

/* Figure note (texte sous la photo) */
.figure-note{
  margin-top: 10px;
  font-weight: 600;
  color: var(--muted);
}
.figure-note span{
  font-weight: 400;
}

/* Inverser l'ordre sur mobile : contenu avant, sidebar après */
@media (max-width: 900px){
  .layout--sidebar{
    display: grid;
    grid-template-columns: 1fr;
  }
  /* Place le contenu en premier, la sidebar ensuite */
  .layout--sidebar .content{ order: 1; }
  .layout--sidebar .sidebar{ order: 2; }
}
/* Le float de l'image s'adapte déjà avec .inline-figure.right de style.css :
   on garde le comportement : flotte à droite en desktop, repasse centré en mobile. */
/* ===== Identité (cartes deux colonnes) ===== */
.id-grid{ display:grid; gap:12px; }
.id-row{
  display:grid; grid-template-columns:220px 1fr;
  background:#fff; border:1px solid #e8ecf3; border-radius:12px; overflow:hidden;
  box-shadow:0 6px 22px rgba(16,24,40,.04);
}
.id-label{
  background: linear-gradient(0deg, var(--brand) 0%, color-mix(in oklab, var(--brand) 85%, #fff 15%) 100%);
  color:#0e1219; font-weight:700; padding:.85rem 1rem; display:flex; gap:.5rem; align-items:center;
}
.id-value{ padding:.85rem 1rem; color:#0e1219; }
.id-icon{ font-size:18px; line-height:1; }

@media (max-width: 800px){
  .id-row{ grid-template-columns: 1fr; }
  .id-label{ border-bottom:1px solid #e8ecf3; }
}

/* ===== Sidebar À propos ===== */
.sidebar-card{ padding:14px; border-radius:12px; background:#fff; border:1px solid #e5e7eb; box-shadow:var(--shadow); }
.sidebar-list{ list-style:none; margin:0; padding:0; }
.sidebar-list li a{
  display:block; padding:9px 10px; border-radius:10px; color:var(--brand);
  text-decoration:none; transition:background .2s ease;
}
.sidebar-list li a:hover{ background:rgba(0,0,0,.04); }
.sidebar-list li a[aria-current="page"]{
  font-weight:700; background:rgba(0,0,0,.06); color:var(--brand);
}
.brand { gap: 8px; }
.menu-bar .wrap { padding-left: 0; }
.brand__link { margin-left: 0; }
.menu .menu__list.nav { margin-left: 0; }
/* ===== Mobile nav safety ===== */
@media (max-width: 980px){
  /* Place le menu sous la barre logo, hors flux, cliquable */
  .menu{
    position: fixed;
    top: var(--brandH, 92px);
    left: 0;
    right: 0;
    background: #fff;
    box-shadow: 0 14px 28px rgba(0,0,0,.12);
    z-index: 1000;
    display: none;           /* fermé par défaut */
  }
  .menu.open{ display: block; }

  /* Sous-menus fermés par défaut, ouverts quand .has-sub.open */
  .menu .sub{ display: none; }
  .menu .has-sub.open > .sub{ display: block; }

  /* Le burger reste au-dessus de tout */
  .menu-toggle{ position: relative; z-index: 1100; }

  /* La bande “brand” (logo + select) au-dessus du menu */
  .brand{ position: relative; z-index: 1200; }

  /* Évite que le reste de la page recouvre le menu */
  .page{ position: relative; z-index: 1; }
}
/* ==== NAV MOBILE HARDEN ==== */
@media (max-width: 980px){
  .site-header{ position: relative; z-index: 5; }
  .brand{ position: relative; z-index: 6; }
  .menu-toggle{ position: relative; z-index: 7; }

  /* Le menu passe en calque au-dessous de la barre brand */
  .menu{
    position: fixed;
    top: var(--brandH, 92px);
    left: 0; right: 0;
    background: #fff;
    box-shadow: 0 14px 28px rgba(0,0,0,.12);
    display: none !important;            /* <- anti-override */
    z-index: 6;
  }
  .menu.open{ display: block !important; }  /* <- anti-override */

  /* Accordéon mobile (anti-override) */
  .menu .sub{ display: none !important; }
  .menu .has-sub.open > .sub{ display: block !important; }

  /* Empêche un parent de “couper” le menu */
  header.site-header, .menu-bar, .wrap{
    overflow: visible !important;
  }

  /* Le contenu ne doit pas passer par-dessus */
  .page{ position: relative; z-index: 1; }
}
/* ===== MOBILE NAV FIX (full-screen drawer) ===== */
@media (max-width:980px){
  :root{
    --brandH: 92px; /* JS la met à jour; ceci est un fallback */
    --nav-mobile-bg: #0c0f14;
    --nav-mobile-fg: #f7f7f7;
    --nav-mobile-muted: #c3cad6;
    --nav-mobile-accent: #8C9E1D; /* ta nouvelle couleur */
  }

  /* Drawer container */
  .menu{
    position: fixed;
    top: var(--brandH);
    left: 0; right: 0; bottom: 0;
    background: var(--nav-mobile-bg) !important;
    color: var(--nav-mobile-fg) !important;
    display: none;             /* fermé par défaut */
    overflow: auto;
    z-index: 9999;             /* au-dessus de tout */
    border-top: 1px solid rgba(255,255,255,.08);
  }
  .menu.open{ display:block; } /* ouvert par le JS */

  /* List + items */
  .menu__list.nav{ margin:0; padding:8px 0; }
  .menu__item{ border-bottom: 1px solid rgba(255,255,255,.06); }

  /* Level-1 links and toggles */
  .menu a,
  .menu .sub-toggle{
    display:block;
    width:100%;
    text-align:left;
    padding:14px 16px;
    color: var(--nav-mobile-fg) !important;
    background: transparent;
    border:0;
    font-weight:600;
  }
  .menu a:hover,
  .menu .sub-toggle:hover{
    background: rgba(255,255,255,.06);
  }
  .menu .sub-toggle .caret{ color: var(--nav-mobile-muted); }

  /* Submenus (accordion panes) */
  .menu .sub{
    background: rgba(255,255,255,.03) !important;
    border-top: 1px solid rgba(255,255,255,.06);
    padding: 6px 0;
  }
  .menu .sub a{
    padding: 10px 18px 10px 28px;
    color: var(--nav-mobile-fg) !important;
    font-weight:500;
  }
  .menu .sub a:hover{ background: rgba(255,255,255,.06); }

  /* Active state */
  .menu a.is-active,
  .menu a[aria-current="page"]{
    color: var(--nav-mobile-accent) !important;
  }

  /* Focus accessibility */
  .menu a:focus,
  .menu .sub-toggle:focus{
    outline: 2px solid var(--nav-mobile-accent);
    outline-offset: -2px;
  }
}
/* ===== MOBILE NAV COLORS: deux verts comme desktop ===== */
@media (max-width:980px){
  :root{
    /* palette mobile en verts */
    --nav-mobile-bg:   #A4B526; /* vert clair (fond menu principal) */
    --nav-mobile-sub:  #8C9E1D; /* vert plus soutenu (sous-menus) */
    --nav-mobile-fg:   #0e1219; /* texte sombre lisible sur vert clair */
    --nav-mobile-muted:#2a3340; /* icônes / caret */
    --nav-mobile-accent:#0e1219;/* lien actif (même que texte, en gras) */
  }

  .menu{
    background: var(--nav-mobile-bg) !important;
    color: var(--nav-mobile-fg) !important;
    border-top: 1px solid rgba(0,0,0,.12);
  }
  .menu__item{ border-bottom: 1px solid rgba(0,0,0,.12); }

  .menu a,
  .menu .sub-toggle{
    color: var(--nav-mobile-fg) !important;
    font-weight: 700;
  }
  .menu .sub-toggle .caret{ color: var(--nav-mobile-muted); }

  .menu a:hover,
  .menu .sub-toggle:hover{
    background: rgba(0,0,0,.06);
  }

  .menu .sub{
    background: var(--nav-mobile-sub) !important;
    border-top: 1px solid rgba(0,0,0,.12);
  }
  .menu .sub a{
    color: var(--nav-mobile-fg) !important;
    font-weight: 600;
  }

  .menu a.is-active,
  .menu a[aria-current="page"]{
    color: var(--nav-mobile-accent) !important;
    text-decoration: underline;
    text-underline-offset: 2px;
  }
}
/* Team cards: background-image portraits (no head cut) */
.team-card .portrait {
  width: 100%;
  aspect-ratio: 3 / 4;                 /* tall portrait frame */
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  background-image: var(--img);
  background-repeat: no-repeat;
  background-size: cover;              /* fill the frame */
  background-position: 50% var(--focus-y, 20%); /* global headroom */
  display: block;
}

/* Optional quick tweaks per person (if needed) */
.portrait.focus-top    { --focus-y: 10%; }
.portrait.focus-center { --focus-y: 50%; }
.portrait.focus-low    { --focus-y: 80%; }

/* If you previously had rules on .team-card img, remove them. */
/* ===== SIFEC — Aside + Callouts + Bannières (A propos) ===== */

/* Bannières (SVG/JPG) */
.hero-visual__img {
  display:block;
  width:100%;
  height:auto;
  object-fit:cover;
}

/* Grille avec menu latéral */
.grid--with-aside {
  display:grid;
  grid-template-columns: 260px 1fr;
  gap: 24px;
}
@media (max-width: 980px) {
  .grid--with-aside { grid-template-columns: 1fr; }
}

/* Menu latéral */
.side-nav { position: sticky; top: 24px; align-self: start; }
.side-nav__list {
  list-style: none;
  margin: 0; padding: 0;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: var(--radius, 12px);
  overflow: hidden;
  background: #fff; /* si thème sombre, ajuste selon ton design */
}
.side-nav__item + .side-nav__item { border-top: 1px solid var(--border, #e5e7eb); }
.side-nav__link {
  display: block;
  padding: .9rem 1rem;
  text-decoration: none;
  color: var(--text-strong, #344054);
}
.side-nav__item.is-active .side-nav__link {
  font-weight: 600;
  background: color-mix(in oklab, var(--brand-primary, #B3C741) 18%, #fff 82%);
}

/* Callouts */
.callout--accent.lead{
  border-radius: var(--radius, 12px);
  border: 1px solid var(--border, #e5e7eb);
  background: color-mix(in oklab, var(--brand-primary, #B3C741) 8%, #fff 92%);
  padding: 16px 18px;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}
.callout--cta{
  border-radius: var(--radius, 12px);
  border: 1px solid var(--border, #e5e7eb);
  background: color-mix(in oklab, var(--brand-orange, #F68C40) 10%, #fff 90%);
  padding: 16px 18px;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}

/* Harmonisations */
.prose h2 { margin-top: 1.6rem; }
.prose ul { margin: 0 0 1.2rem 1.2rem; }
/* Base callout */
.callout {
  border-radius: var(--radius, 12px);
  padding: 16px 18px;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
  background: #fff;
  border: 1px solid rgba(0,0,0,0.06); /* garde une bordure minimale */
}

/* Variante accent (verte claire SIFEC) */
.callout--accent.lead {
  background: color-mix(in oklab, var(--brand-primary, #B3C741) 8%, #fff 92%);
  border: 1px solid rgba(179,199,65,.35);          /* #B3C741 à ~35% d’opacité */
  box-shadow:
    0 6px 18px rgba(0,0,0,.06),                    /* ombre externe douce */
    inset 0 0 0 1px rgba(179,199,65,.75);          /* “ring” interne net */
  border-radius: var(--radius, 12px);
}

/* Optionnel : si .lead de Bootstrap modifie marges/tailles */
.callout.lead { margin: 0; }
/* ==== PATCH CALLOUT (force les 4 côtés + arrondi) ==== */
.callout,
.callout--accent.lead {
  position: relative; /* nécessaire si un ::before/::after existe déjà */
  border: 0 !important;             /* reset de toute bordure héritée */
  border-radius: 12px !important;
  background-clip: padding-box;     /* évite que le bg “mange” l’arrondi */
  box-shadow: 0 6px 18px rgba(0,0,0,.06) !important;
}

/* Bordure nette sur les 4 côtés (anneau interne) */
.callout--accent.lead::after {
  content: "";
  position: absolute;
  inset: 0;                         /* top/right/bottom/left:0 */
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(179,199,65,.45); /* vert SIFEC #B3C741 */
}

/* Couleurs de fond (peu importe le thème) */
.callout--accent.lead {
  background: color-mix(in oklab, #B3C741 8%, #fff 92%) !important;
}

/* Variante CTA si tu l’utilises */
.callout--cta {
  position: relative;
  border: 0 !important;
  border-radius: 12px !important;
  background: color-mix(in oklab, #F68C40 10%, #fff 90%) !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.06) !important;
}
.callout--cta::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(246,140,64,.45);
}
.callout{ outline:2px dashed red !important; }
/* ===== Callouts — version consolidée (propre) ===== */

/* Base commune */
.callout{
  border-radius: var(--radius, 12px);
  padding: 16px 18px;
  background: #fff;
  border: 1px solid var(--border, #e5e7eb);
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}

/* Accent vert (lead) — 4 côtés, sans bordure unilatérale */
.callout--accent.lead{
  background: color-mix(in oklab, var(--brand-primary, #B3C741) 8%, #fff 92%);
  border-color: color-mix(in oklab, var(--brand-primary, #B3C741) 35%, #e5e7eb 65%);
  /* anneau interne net, tous les côtés */
  box-shadow:
    0 6px 18px rgba(0,0,0,.06),
    inset 0 0 0 1px color-mix(in oklab, var(--brand-primary, #B3C741) 60%, #ffffff 40%);
}

/* Variante CTA (orange) */
.callout--cta{
  background: color-mix(in oklab, var(--brand-orange, #F68C40) 10%, #fff 90%);
  border-color: color-mix(in oklab, var(--brand-orange, #F68C40) 40%, #e5e7eb 60%);
  box-shadow:
    0 6px 18px rgba(0,0,0,.06),
    inset 0 0 0 1px color-mix(in oklab, var(--brand-orange, #F68C40) 65%, #ffffff 35%);
}

/* Sécurité : si Bootstrap .lead joue sur marges/line-height */
.callout.lead{ margin:0; }
/* ==== Callout pilule avec ruban gauche (style SIFEC) ==== */
.callout--pill{
  position: relative;
  padding: 14px 18px 14px 32px;          /* un peu + d’air à gauche */
  border-radius: 14px;
  background: #f6f9f0;                   /* vert très clair */
  border: 1px solid #e3eacd;             /* liseré subtil */
  box-shadow: 0 2px 8px rgba(0,0,0,.05);
  color: #1b2330;
  background-clip: padding-box;
}
.callout--pill::before{
  content: "";
  position: absolute;
  left: 8px;                              /* espace par rapport au bord */
  top: 8px; bottom: 8px;                  /* extrémités arrondies */
  width: 10px;
  border-radius: 999px;
  background: linear-gradient(
    180deg,
    color-mix(in oklab, var(--brand) 85%, #000 15%),
    var(--brand)
  );
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.35);
}

/* Variante CTA (orange) – si besoin */
.callout--pill.is-cta{
  background: #fff7ef;
  border-color: #f5dcc7;
}
.callout--pill.is-cta::before{
  background: linear-gradient(
    180deg,
    color-mix(in oklab, var(--brand-orange) 85%, #000 15%),
    var(--brand-orange)
  );
}

/* Texte accentué au début du callout */
.callout--pill b,
.callout--pill strong{ color:#0e1219; }
/* ==== Callout pilule (ruban collé au bord gauche) ==== */
.callout--pill{
  --pill-ribbon: 12px;                 /* épaisseur du ruban */
  position: relative;
  padding: 14px 18px 14px calc(18px + var(--pill-ribbon) + 10px);
  border-radius: 14px;
  background: #f6f9f0;                 /* vert très clair */
  /* on remplace la bordure par un anneau interne, pour éviter un jour d’1px */
  box-shadow:
    inset 0 0 0 1px #e3eacd,           /* liseré (ex-bordure) */
    0 2px 8px rgba(0,0,0,.05);         /* ombre douce */
  color: #1b2330;
  background-clip: padding-box;
  overflow: hidden;                     /* le ruban hérite du rayon via clipping */
}
.callout--pill::before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width: var(--pill-ribbon);
  /* grâce à overflow:hidden + border-radius du parent, le ruban suit la forme */
  background: linear-gradient(
    180deg,
    color-mix(in oklab, var(--brand) 85%, #000 15%),
    var(--brand)
  );
  /* léger relief interne sur le ruban */
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.35);
}

/* Variante ruban à DROITE (si besoin) */
.callout--pill.is-right::before{
  left:auto; right:0;
}
.callout--pill.is-right{
  padding: 14px calc(18px + var(--pill-ribbon) + 10px) 14px 18px;
}

/* Variante CTA orange */
.callout--pill.is-cta{
  background:#fff7ef;
  box-shadow:
    inset 0 0 0 1px #f5dcc7,
    0 2px 8px rgba(0,0,0,.05);
}
.callout--pill.is-cta::before{
  background: linear-gradient(
    180deg,
    color-mix(in oklab, var(--brand-orange) 85%, #000 15%),
    var(--brand-orange)
  );
}