/* =========================================================
   SIFEC – STYLES GLOBAUX (clean)
   ========================================================= */

/* =============================
   VARIABLES & BASES
   ============================= */
:root{
  --brand-primary:#B3C741;          /* vert SIFEC */
  --brand-blue:#1177A8;             /* accent bleu */
  --brand-orange:#F68C40;           /* accent orange */

  --bg:#0c0f14;                     /* fond global site sombre */
  --text:#f7f7f7;                   /* texte par défaut sombre */
  --muted:#c3cad6;                  /* texte secondaire */
  --border:#26324a;
  --radius:12px;
  --shadow:0 6px 18px rgba(0,0,0,.25);

  --site-alert-h:48px;              /* hauteur par défaut de l’alerte */
  --team-photo-h:260px;             /* hauteur photo équipe */
}

*{ box-sizing:border-box }
html,body{ height:100% }
html{ scroll-behavior:smooth }
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:Arial,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",sans-serif;
  line-height:1.5;
}
img{ max-width:100%; height:auto; display:block }
a{ color:var(--brand-blue); text-decoration:none }
a:hover{ text-decoration:underline }
:focus-visible{ outline:2px solid var(--brand-orange); outline-offset:2px }

h1,h2,h3{ color:var(--brand-primary); margin:0 0 .5rem }
p{ margin:0 0 1rem }

.container{ width:min(1200px,92vw); margin-inline:auto; padding-inline:16px }
.mt-8{ margin-top:2rem; clear:both }

/* Mode page claire */
.page--white{ background:#fff; color:#0e1219; }
.page--white .lead{ color:#445066; }

/* =============================
   HEADER (Topbar)
   ============================= */
.site-header{ position:sticky; top:0; z-index:1000; background:#fff; border-bottom:1px solid #e8ecf3 }
.topbar{ background:#fff; color:#111; border-bottom:1px solid #eef1f5 }
.topbar__grid{
  display:grid; grid-template-columns:240px 1fr 360px;
  gap:16px; align-items:center; min-height:120px;
}
.brand__logo{ width:auto; height:90px; object-fit:contain; background:#fff }
.catalog-banner{ display:block }
.catalog-banner img{ width:100%; border-radius:8px }

.header-tools{ display:flex; align-items:center; justify-content:flex-end; gap:12px; flex-wrap:nowrap }
.search{ display:flex; gap:6px; min-width:0 }
.search__input{
  flex:1 1 auto; min-width:160px; padding:.55rem .7rem;
  border-radius:8px; border:1px solid #d8dde6; color:#111; background:#fff;
}
.search__btn{
  padding:.55rem .9rem; border-radius:8px; border:1px solid var(--brand-blue);
  color:#fff; background:var(--brand-blue); cursor:pointer;
}
.country{
  display:inline-flex; align-items:center; gap:.45rem; white-space:nowrap;
  padding:.45rem .6rem; border:1px solid #e5e9ef; border-radius:999px;
  background:#fff; color:#1a7b52; text-decoration:none;
}
.country::before{ content:"🌍"; font-size:1rem; line-height:1 }

/* =============================
   NAVBAR (barre verte + menus)
   ============================= */
.menu-bar{
  position:relative; z-index:1000;
  background:var(--brand-primary);
  border-bottom:1px solid color-mix(in oklab, var(--brand-primary) 70%, #000 15%);
}
.menu-wrap{
  display:flex; align-items:center; gap:.5rem; flex-wrap:nowrap; padding:.6rem 0;
  overflow-x:auto; scrollbar-width:thin;
}

/* Bouton burger (mobile) */
.nav-toggle{
  display:none; appearance:none; border:1px solid #e8ecf3; background:#fff;
  border-radius:10px; padding:.45rem .6rem; cursor:pointer; font-size:18px; line-height:1;
}

/* Conteneur de nav + liste – anti-puces FORT */
.site-nav{ display:block; width:100% }
.site-nav .menu{
  display:flex; align-items:center; gap:18px;
  list-style:none !important; margin:0 !important; padding:0 !important;
}
.site-nav .menu > li{ position:relative; list-style:none !important; margin:0; padding:0; }

/* Liens */
.menu-link,
.menu-group > .menu-link{
  display:inline-flex; align-items:center; height:40px;
  padding:0 .9rem; border-radius:10px; line-height:1; font-weight:700;
  color:#fff; text-decoration:none; white-space:nowrap;
}
.menu-link:hover,
.menu-link.is-active,
.menu-group > .menu-link:hover{
  background:color-mix(in oklab, var(--brand-primary) 70%, #000 20%);
  text-decoration:none;
}

/* Sous-menus (desktop) */
.menu-group{ position:relative; }
.submenu{
  position:absolute; top:calc(100% + 6px); left:0; min-width:260px;
  background:color-mix(in oklab, var(--brand-primary) 92%, #000 8%); /* vert lisible */
  border:1px solid color-mix(in oklab, var(--brand-primary) 70%, #000 20%);
  border-radius:12px; padding:.5rem; display:none; z-index:1200;
  box-shadow:0 16px 40px rgba(0,0,0,.25); list-style:none !important; margin:0 !important;
}
.menu-group:hover > .submenu,
.menu-group:focus-within > .submenu{ display:block; }

/* Zone tampon anti “décrochage” */
.menu-group > .submenu::before{
  content:""; position:absolute; left:0; right:0; top:-10px; height:12px;
}

/* Items du sous-menu */
.submenu li{ list-style:none !important; margin:0; padding:0; }
.submenu a{
  display:block; white-space:nowrap; color:#fff;
  padding:.45rem .6rem; border-radius:.4rem; text-decoration:none;
}
.submenu a:hover{
  background:color-mix(in oklab, var(--brand-primary) 70%, #000 18%);
}

/* ===== Desktop compaction si espace juste ===== */
@media (min-width:981px){
  .menu-bar .menu-wrap{ flex-wrap:nowrap !important; }
  .site-nav .menu{ flex-wrap:nowrap !important; gap:12px !important; overflow:visible !important; }
  .menu-link{ padding:0 .7rem !important; }
  .menu-bar .container{ overflow:visible !important; }
}

/* ===== Mobile (≤980px) : burger + accordéons ===== */
@media (max-width:980px){
  .menu-wrap{ flex-wrap:wrap; }
  .nav-toggle{ display:inline-block; }

  .site-nav{
    display:none; width:100%; border-top:1px solid #e8ecf3; margin-top:8px;
    background:#fff;  /* lisible sur mobile */
  }
  .site-nav.is-open{ display:block; }
  .site-nav .menu{ flex-direction:column; align-items:stretch; gap:0; }
  .site-nav .menu > li > a{
    padding:.9rem .8rem; border-bottom:1px solid #f0f3f8;
    color:#0e1219; background:#fff; border-radius:0;
    white-space:normal; /* ok d’aller à la ligne sur mobile */
  }

  /* Sous-menus en accordéon */
  .menu-group{ position:static; }
  .submenu{
    position:static; display:none; border:0; box-shadow:none;
    padding:0; margin:0; background:transparent;
  }
  .menu-group.is-open > .submenu{ display:block; }
  .submenu a{ color:#0e1219; padding:.55rem .9rem; border-radius:8px; }
  .submenu a:hover{
    background: color-mix(in oklab, var(--brand-primary) 12%, #fff 88%); color:#0e1219;
  }
}

/* =============================
   HERO (lisibilité renforcée)
   ============================= */
.hero{ padding:0; border-bottom:1px solid var(--border); margin-top:0 }
.hero--img{ position:relative }
.hero__media{ display:block; width:100%; height:auto }
.hero__content{
  position:absolute; inset:0; display:grid; align-content:center;
  padding:clamp(20px, 6vw, 72px);
  background:linear-gradient(180deg, rgba(12,15,20,.25), rgba(12,15,20,.55));
}
.hero__content .badge{ font-size:clamp(.85rem,1.2vw,1rem) }
.hero__content h1{ font-size:clamp(1.25rem,2.8vw,2.4rem); line-height:1.2; color:#B3C741 }
.lead{ color:#cfd6df; max-width:60ch }
.hero__content .lead{ font-size:clamp(.95rem,1.7vw,1.15rem); color:#e7ecf2 }
.hero-cta{ display:flex; gap:.75rem; flex-wrap:wrap; margin-top:1rem }

@media (max-width:600px){
  .hero__content{
    background:linear-gradient(180deg, rgba(12,15,20,.55), rgba(12,15,20,.8));
    padding:18px;
  }
}

@media (max-width:480px){
  .hero{ border-bottom:none }
}

/* =============================
   ACCUEIL — SECTIONS & CARTES
   ============================= */
.home-section{ padding-block: clamp(28px, 6vw, 64px); }
.home-services .cards{
  display:grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap:16px; margin-top:16px;
}
.card{
  background:#F7FAFF; border:1px solid #e8ecf3; border-radius: var(--radius);
  padding:18px; display:grid; gap:.6rem;
  transition: background .2s, border-color .2s, transform .15s;
  box-shadow: 0 6px 22px rgba(16,24,40,.04);
}
.card__head{ display:flex; align-items:center; gap:.6rem; }
.card__icon{
  width:36px; height:36px; border-radius:8px; display:grid; place-items:center; flex:0 0 36px;
  background: color-mix(in oklab, var(--brand-primary) 18%, #fff 82%);
  border:1px solid color-mix(in oklab, var(--brand-primary) 55%, #000 10%);
}
.card__icon svg{ width:20px; height:20px; color:#1b2a10; }
.card h3{ margin:0; color:#0e1219; }
.card p.meta{ color:#445066; margin:0; }
.card .btn.btn--outline{ justify-self:start; border-color: var(--brand-blue); color: var(--brand-blue); }
.card:hover{
  background: var(--brand-primary);
  border-color: color-mix(in oklab, var(--brand-primary) 70%, #000 20%);
  transform: translateY(-1px);
}
.card:hover h3{ color:#0b1206; }
.card:hover p.meta{ color:#1b2a10; }
.card:hover .btn.btn--outline{ background:#fff; color:#0b1206; border-color:#fff; }

/* Secteurs (chips) */
.home-sectors .chips{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:12px; }
.chip{
  display:inline-block; padding:.5rem .8rem; border-radius:999px;
  background:#fff; color:#0e1219;
  border:1px solid color-mix(in oklab, var(--brand-primary) 60%, #000 8%);
}
.chip:hover{ background: color-mix(in oklab, var(--brand-primary) 12%, #fff 88%); text-decoration:none }

/* Stats */
.home-stats .stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:20px; }
.stat{
  background:#fff; border:1px solid #e8ecf3; border-radius: var(--radius);
  padding:16px; text-align:center; box-shadow: 0 6px 22px rgba(16,24,40,.06);
}
.stat strong{ font-size:1.8rem; color:var(--brand-primary); display:block }
.stat span{ color:#445066 }

/* CTA bandeau */
.home-cta .cta{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  background:#2f3b0f; border:none; border-radius: var(--radius);
  padding: clamp(16px, 4vw, 24px); box-shadow: 0 6px 22px rgba(0,0,0,.12);
}
.home-cta .cta__text :is(h1,h2,.lead){ color:#fff; }
.home-cta .cta__text a{ color:#fff; text-decoration:underline }
.home-cta .btn{ background: var(--brand-primary); color:#0b1206; border:none; }
.home-cta .btn:hover{ filter:brightness(1.05) }

/* =============================
   FOOTER
   ============================= */
.site-footer{ border:0; margin-top:0 }
footer .container{ width:min(1200px,92vw); margin-inline:auto; padding-inline:16px }

/* barre haute */
.footer-top{ background:var(--brand-primary); color:#fff; border:0; }
.footer-top .container{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding-block:16px;
}
.footer-links{ display:flex; align-items:center; gap:28px; flex-wrap:wrap }
.footer-links a{ color:#fff; text-decoration:none; font-weight:600; display:inline-flex; gap:.5rem; align-items:center }
.footer-links a:hover{ text-decoration:underline }
.footer-cta{ color:#fff; font-weight:800; text-decoration:none; display:inline-flex; align-items:center; gap:.5rem }
.footer-cta:hover{ text-decoration:underline }

/* barre basse */
.footer-bottom{
  background:color-mix(in oklab, var(--brand-primary) 60%, #000 40%);
  color:#fff; border:0;
}
.footer-bottom .container{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding-block:12px;
}
.footer-bottom small{ opacity:.95 }
.footer-bottom a,
.footer-bottom a:visited{ color:#fff !important; text-decoration:none; font-weight:600; }
.footer-bottom a:hover{ color:#fff !important; text-decoration:underline; }

/* Back-to-top */
.backtop{
  position:fixed; right:18px; bottom:18px; z-index:80;
  width:48px; height:48px; border-radius:50%;
  display:grid; place-items:center;
  background: radial-gradient(circle at 30% 30%, #D7E66C, var(--brand-primary));
  color:#1a2309; font-weight:900; text-decoration:none;
  box-shadow:var(--shadow);
}
.backtop:hover{ filter:brightness(1.05) }

/* =============================
   PAGES : BANNERS & GRID
   ============================= */
.page-banner{ margin:0 0 16px; border-radius: var(--radius); overflow:hidden; background:#fff; border-bottom:1px solid #e8ecf3; }
.page-banner img{ width:100%; height:auto; display:block; max-height:260px; object-fit:cover; object-position:center; }

.page-wrap{ padding-block: clamp(24px, 5vw, 56px); }

.page-grid{
  display:grid; grid-template-columns: 280px 1fr; gap:24px;
}
@media (max-width:960px){ .page-grid{ grid-template-columns: 1fr; } }

/* Side nav + contenu */
.side-nav{
  align-self:start; position:sticky; top:90px;
  background:#fff; border:1px solid #e8ecf3; border-radius: var(--radius);
  padding:12px;
}
.side-nav__title{ font-size:1rem; margin:0 0 .5rem; color:#445066; }
.side-nav__list{ display:grid; gap:6px; list-style:none; margin:0; padding:0; }
.side-nav__list a{
  display:block; padding:.5rem .6rem; border-radius:8px;
  color:#0e1219; text-decoration:none; border:1px solid transparent;
}
.side-nav__list a:hover{
  background: color-mix(in oklab, var(--brand-primary) 10%, #fff 90%);
  text-decoration:none;
}
.side-nav__list a.is-active{
  background: color-mix(in oklab, var(--brand-primary) 18%, #fff 82%);
  border-color: color-mix(in oklab, var(--brand-primary) 55%, #000 10%);
  font-weight:700; color:#2a3a06;
}
.page-content{
  background:#fff; border:1px solid #e8ecf3; border-radius: var(--radius);
  padding:18px; box-shadow: 0 6px 22px rgba(16,24,40,.04);
}
.page-content h2{ color:#B3C741; }

/* Rich text & checklists */
.richtext p{ color:#445066; }
.checklist{ list-style:none; padding-left:0; margin:12px 0 20px; }
.checklist li{
  position:relative; padding-left:28px; margin:.4rem 0; color:#0e1219;
}
.checklist li::before{
  content:"✓"; position:absolute; left:0; top:0; width:20px; height:20px; line-height:20px; text-align:center;
  border-radius:6px; font-weight:800;
  background: color-mix(in oklab, var(--brand-primary) 18%, #fff 82%);
  border:1px solid color-mix(in oklab, var(--brand-primary) 55%, #000 10%);
  color:#1b2a10;
}

/* =============================
   LAYOUT “MISSIONS/CONSEIL”
   ============================= */
.layout{
  display:grid; grid-template-columns: 280px 1fr; gap:24px; align-items:start;
  padding-block: clamp(24px, 5vw, 40px);
}
.sidenav{
  position:sticky; top:88px;
  background:#F7FAFF; border:1px solid #e8ecf3; border-radius: var(--radius);
  padding:16px; box-shadow: 0 6px 22px rgba(16,24,40,.04);
}
.sidenav__title{ margin:0 0 .5rem; font-size:1.05rem; color:#0e1219; }
.sidenav__nav{ display:grid; gap:6px; }
.sidenav__link{
  display:block; padding:.55rem .7rem; border-radius:8px; color:#0e1219; text-decoration:none; border:1px solid transparent;
}
.sidenav__link:hover{ background: color-mix(in oklab, var(--brand-primary) 12%, #fff 88%); text-decoration:none; }
.sidenav__link.is-active{
  background: color-mix(in oklab, var(--brand-primary) 18%, #fff 82%);
  border-color: color-mix(in oklab, var(--brand-primary) 55%, #000 10%);
  font-weight:700;
}
@media (max-width:980px){ .layout{ grid-template-columns:1fr; } .sidenav{ position:static; } }

/* =============================
   NEWS / WIDGETS / TEAM
   ============================= */
.home-news .news-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.home-news .news-head h2{ margin:0; }
.home-news .news-all{ font-weight:600; text-decoration:none; color:var(--brand-blue); }
.home-news .news-all:hover{ text-decoration:underline; }

.news-grid{
  display:grid; gap:16px; grid-template-columns: repeat(6, minmax(260px, 1fr));
  overflow-x:auto; padding-bottom:6px; scroll-snap-type:x mandatory;
}
.news-grid::-webkit-scrollbar{ height:8px; }
.news-grid::-webkit-scrollbar-thumb{ background:#d7dbe6; border-radius:8px; }
@media (max-width:1180px){ .news-grid{ grid-auto-flow:column; grid-auto-columns:minmax(260px, 78%); } }

.news-card{
  background:#fff; border:1px solid #e8ecf3; border-radius:14px;
  box-shadow:0 6px 22px rgba(16,24,40,.04); overflow:hidden; scroll-snap-align:start;
}
.news-link{ display:block; color:inherit; text-decoration:none; }
.news-media{ aspect-ratio:16/9; margin:0; overflow:hidden; background:#f2f4f7; }
.news-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.news-body{ padding:12px 14px; }
.news-body h3{ margin:0 0 .25rem; font-size:1.05rem; color:#0e1219; }
.news-body p{ margin:0; color:#445066; font-size:.95rem; }

.sidebar .widget{
  background:#fff; border:1px solid #e8ecf3; border-radius:12px;
  padding:16px; margin-bottom:16px; box-shadow: 0 6px 22px rgba(16,24,40,.04); color:#0e1219;
}
.sidebar .widget h3{ margin:0 0 .5rem; color:#0e1219; font-size:1.05rem; }
.sidebar .widget p, .sidebar .widget li{ color:#445066; }
.sidebar .widget ul{ margin:.25rem 0 0; padding-left:1.1rem; }

.team-grid{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:16px; }
.team-card{
  background:#fff; border:1px solid #e8ecf3; border-radius: var(--radius);
  overflow:hidden; box-shadow:0 6px 22px rgba(16,24,40,.06); display:flex; flex-direction:column;
}
.team-card img{ width:100%; height: var(--team-photo-h); object-fit:cover; object-position:50% 50%; border-radius:12px; }
.team-card__body{ padding:14px }
.team-card h3{ margin:.25rem 0; color:#8C9E1D }
.team-card .role{ margin:0; color:#B3C741; font-weight:600 }
.team-card .bio{ margin:.25rem 0 0; color:#445066 }
@media (max-width:1024px){ .team-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width:560px){ .team-grid{ grid-template-columns: 1fr; } }

/* =============================
   CALLOUTS / HELP BOX
   ============================= */
.callout{
  position:relative; display:flex; align-items:flex-start; gap:.8rem;
  border-radius:14px; padding:14px 18px;
  background:linear-gradient(180deg, #F8FBF2 0%, #F4F9EC 100%);
  border:1px solid #e1edcf; box-shadow:0 8px 24px rgba(16,24,40,.06);
  color:#0e1219; overflow:hidden; transform:translateY(6px); opacity:0;
  transition:transform .4s ease, opacity .4s ease;
}
.callout::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:6px; border-radius:14px 0 0 14px;
  background:linear-gradient(180deg, #B3C741 0%, #3A7B2E 100%);
}
.callout__icon{
  flex-shrink:0; display:grid; place-items:center; width:36px; height:36px;
  border-radius:50%; background:linear-gradient(135deg, #54B948 0%, #2F6F25 100%);
  box-shadow:0 4px 12px rgba(0,0,0,.12); font-size:18px; color:#fff;
}
.callout.is-in{ transform:translateY(0); opacity:1; }
.callout--info{ background:linear-gradient(180deg,#F5FAFF 0%,#F0F7FF 100%); border-color:#dbe9ff; }
.callout--info::before{ background:linear-gradient(180deg,#7FB5FF 0%,#1E66F5 100%); }
.callout--info .callout__icon{ background:linear-gradient(135deg,#66A3FF 0%,#1E66F5 100%); }
.callout--gold{ background:linear-gradient(180deg,#FFF9EA 0%,#FFF4D6 100%); border-color:#f3e4b7; }
.callout--gold::before{ background:linear-gradient(180deg,#F6C453 0%,#C69424 100%); }
.callout--gold .callout__icon{ background:linear-gradient(135deg,#FFD166 0%,#C79427 100%); }

/* =============================
   SECTEURS (layout + image flottante)
   ============================= */
.sector-layout{
  display:grid; grid-template-columns: 280px 1fr; gap:24px; align-items:start;
  margin-block: clamp(16px, 4vw, 28px);
}
.sector-aside{ position:sticky; top:96px; }
.sector-nav{
  background:#F7FAFF; border:1px solid #e8ecf3; border-radius: var(--radius); padding:14px;
}
.sector-nav__title{ margin:0 0 .5rem; font-size:1rem; color:#0e1219; }
.sector-nav ul{ list-style:none; padding:0; margin:0; display:grid; gap:.25rem; }
.sector-nav a{ display:block; padding:.5rem .6rem; border-radius:8px; color:#0e1219; text-decoration:none; }
.sector-nav a:hover{ background: color-mix(in oklab, var(--brand-primary) 12%, #fff 88%); }
.sector-nav a.is-active{
  background: color-mix(in oklab, var(--brand-primary) 22%, #fff 78%);
  border:1px solid color-mix(in oklab, var(--brand-primary) 55%, #000 10%);
}
.sector-content{
  background:#fff; border:1px solid #e8ecf3; border-radius: var(--radius);
  padding: clamp(16px, 3vw, 24px); box-shadow: 0 6px 22px rgba(16,24,40,.04);
}
.sector-figure{ float:right; margin:0 0 12px 18px; width:min(42%, 420px); }
.sector-figure img{ width:100%; height:auto; display:block; border-radius:10px; border:1px solid #e8ecf3; }
@media (max-width:980px){
  .sector-layout{ grid-template-columns:1fr; }
  .sector-aside{ position:static; }
  .sector-figure{ float:none; width:100%; margin:0 0 14px 0; }
}

/* =============================
   SITE ALERT
   ============================= */
#site-alert.site-alert{
  position:fixed; top:0; left:0; right:0; z-index:1200; width:100%;
  padding-top: env(safe-area-inset-top, 0);
  background:#556208; color:#fff;
  border-bottom:1px solid rgba(0,0,0,.15); box-shadow:0 2px 10px rgba(0,0,0,.2);
}
#site-alert .container{
  display:flex; align-items:center; gap:.75rem; min-height: var(--site-alert-h); padding:.5rem 16px;
}
#site-alert .site-alert__icon{ opacity:.95; flex:0 0 auto }
#site-alert .site-alert__text{ flex:1; font-weight:600 }
#site-alert .site-alert__link{ color:#fff; text-decoration:none; font-weight:600 }
#site-alert .site-alert__link:hover{ text-decoration:underline }
#site-alert .site-alert__close{
  appearance:none; border:0; background:transparent; color:#fff;
  font-size:20px; line-height:1; cursor:pointer; opacity:.9; padding:0 6px;
}
#site-alert .site-alert__close:hover{ opacity:1 }
#site-alert .site-alert__close:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
#site-alert.is-hiding{ opacity:0; transition:opacity .15s ease }

body.site-alert-open{ padding-top: calc(var(--site-alert-h) + env(safe-area-inset-top, 0)); }
body.site-alert-open .site-header{ top: var(--site-alert-h); }
@media (max-width:480px){ #site-alert .site-alert__text{ font-size:.95rem; } }
@media print{
  #site-alert{ display:none !important; }
  body{ padding-top:0 !important; }
}

/* =============================
   RESPONSIVE HEADER GRID
   ============================= */
@media (max-width:1100px){
  .topbar__grid{
    grid-template-columns:200px 1fr; grid-template-areas:
      "brand tools"
      "banner banner";
  }
  .brand{ grid-area:brand }
  .catalog-banner{ grid-area:banner }
  .header-tools{ grid-area:tools }
}
@media (max-width:720px){
  .topbar__grid{
    grid-template-columns:1fr; grid-template-areas:
      "brand" "banner" "tools";
  }
  .header-tools{ justify-content:flex-start; flex-wrap:wrap }
  .search__input{ min-width:0; width:100% }
}

/* =============================
   ACCESSIBILITÉ
   ============================= */
.sr-only,
.visually-hidden{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path: inset(50%); white-space:nowrap; border:0;
}
.visually-hidden:focus,
.sr-only:focus{
  position:static !important; width:auto; height:auto; margin:0;
  clip:auto; clip-path:none; white-space:normal; padding:.5rem .75rem;
  background:#fff; color:#000; border-radius:8px;
  box-shadow:0 2px 10px rgba(0,0,0,.2);
}
/* ===== Breadcrumbs (fil d’Ariane) ===== */
.breadcrumbs{
  --bc-gap: .5rem;
  --bc-sep: "›";
  --bc-muted: #6b778c;
  --bc-space: var(--space-4, 12px);
}

.breadcrumbs ol{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap: var(--bc-gap);
  list-style:none;
  padding:0;
  margin: var(--bc-space) 0;
}

/* Chaque item en ligne, avec un conteneur qui peut se tronquer */
.breadcrumbs li{
  display:flex;
  align-items:center;
  min-width:0; /* permet l’ellipsis */
}

/* Séparateur entre éléments (pas avant le 1er) */
.breadcrumbs li + li::before{
  content: var(--bc-sep);
  margin: 0 .25rem;
  color: var(--bc-muted);
}

/* Lien par défaut */
.breadcrumbs a{
  color: var(--brand-blue);
  text-decoration:none;
  display:inline-block;
  max-width: 32ch;           /* évite que les titres très longs cassent la ligne */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.breadcrumbs a:hover{ text-decoration: underline; }

/* Dernier élément (page active) : pas cliquable, plus “neutre” */
.breadcrumbs li:last-child > a,
.breadcrumbs [aria-current="page"]{
  color: var(--bc-muted);
  pointer-events:none;
  text-decoration:none;
  font-weight:600;
}

/* Variante si tu utilises un <span> pour l’actif */
.breadcrumbs li:last-child > span{
  color: var(--bc-muted);
  font-weight:600;
  display:inline-block;
  max-width: 32ch;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Compact sur mobiles: espace vertical réduit */
@media (max-width:640px){
  .breadcrumbs{ --bc-space: 8px; }
  .breadcrumbs a,
  .breadcrumbs li:last-child > span{ max-width: 24ch; }
}
/* Prioriser les calques de la barre et du panneau mobile */
.menu-bar        { position: relative; z-index: 1200; }
.menu-bar .menu-wrap { position: relative; z-index: 1201; }
.site-nav        { position: relative; z-index: 1202; }

/* États mobile (doit déjà exister, je redonne l’essentiel) */
@media (max-width:980px){
  .site-nav{ display:none; width:100%; margin-top:8px; border-top:1px solid #e8ecf3; background:#fff; }
  .site-nav.is-open{ display:block; }
}
/* ==== MOBILE NAV: fond vert + textes blancs ==== */
@media (max-width:980px){
  .site-nav{
    display:none; width:100%;
    margin-top:8px; border-top:1px solid rgba(255,255,255,.18);
    background: var(--brand-primary);             /* vert SIFEC */
  }
  .site-nav.is-open{ display:block; }

  .site-nav .menu{
    flex-direction:column; align-items:stretch; gap:0;
  }

  /* Liens principaux */
  .site-nav .menu > li > a{
    padding:.9rem .8rem;
    border-bottom:1px solid rgba(0,0,0,.12);      /* légère séparation */
    color:#fff;                                   /* texte blanc */
    background:transparent;                       /* garde le vert du conteneur */
    border-radius:0;
    text-decoration:none;
  }
  .site-nav .menu > li > a:hover,
  .site-nav .menu > li > a:focus{
    background: color-mix(in oklab, var(--brand-primary) 78%, #000 22%);
  }

  /* Sous-menus (accordéon) */
  .menu-group{ position:static; }
  .submenu{
    position:static; display:none; padding:0; margin:0; border:0; box-shadow:none;
    background: color-mix(in oklab, var(--brand-primary) 90%, #000 10%); /* un poil plus sombre */
  }
  .menu-group.is-open > .submenu{ display:block; }
  .submenu a{
    color:#fff; padding:.55rem .9rem; border-radius:0;
  }
  .submenu a:hover,
  .submenu a:focus{
    background: color-mix(in oklab, var(--brand-primary) 72%, #000 28%);
    text-decoration:none;
  }

  /* Rendre l’outline visible sur fond vert */
  .menu-link:focus-visible,
  .submenu a:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
}
/* Ensure header is always on top */
.site-header{ position:sticky; top:0; z-index:4000; }

/* Keep the green menu bar above page banners/content */
.menu-bar{ position:relative; z-index:3500; }

/* Mobile menu panel: visible, full width, brand background */
@media (max-width:980px){
  .site-nav{
    display:none; width:100%;
    margin-top:8px; border-top:1px solid rgba(255,255,255,.18);
    background: var(--brand-primary);
  }
  .site-nav.is-open{ display:block; }
}
/* ====== PATCH NAV MOBILE (prioritaire) ====== */
@media (max-width:980px){
  .nav-toggle{ display:inline-block; }

  .menu-bar .menu-wrap{ flex-wrap:wrap !important; }

  /* Panneau mobile fermé/ouvert */
  .site-nav{
    display:none;
    width:100%;
    margin-top:8px;
    border-top:1px solid #e8ecf3;
    background: var(--brand-primary) !important; /* fond vert, pas blanc */
  }
  .site-nav.is-open{ display:block; }

  /* Liens lisibles sur fond vert */
  .site-nav .menu{ flex-direction:column; align-items:stretch; gap:0; }
  .site-nav .menu > li > a{
    padding:.9rem .8rem;
    border-bottom:1px solid rgba(255,255,255,.18);
    color:#fff !important;
    background:transparent !important;
    border-radius:0;
    white-space:normal;
    text-decoration:none;
  }

  /* Sous-menus en accordéon */
  .menu-group{ position:static; }
  .submenu{
    position:static;
    display:none;
    padding:0; margin:0; border:0; box-shadow:none;
    background:rgba(0,0,0,.06); /* léger contraste sous-ensemble */
  }
  .menu-group.is-open > .submenu{ display:block; }
  .submenu a{
    color:#fff !important;
    padding:.55rem .9rem;
    border-radius:8px;
  }
}
/* ===== FIX NAV MOBILE: empilement & fond ===== */
@media (max-width:980px){
  .site-header{ position: sticky; top:0; z-index:3000; }
  .menu-bar{ position: relative; z-index:3001; }
  #primary-nav.site-nav{
    position: relative;
    z-index:3002;
    background: var(--brand-primary) !important; /* évite le fond blanc */
  }
  .site-nav.is-open{ display:block; }
  .site-nav .menu > li > a{
    color:#fff !important;
    border-bottom:1px solid rgba(255,255,255,.18);
    background:transparent !important;
  }
}
/* ===== FIX: sous-menus en mobile ===== */
@media (max-width:980px){
  /* forcer l’accordéon à s’ouvrir même si d’autres règles existent */
  .menu-bar .menu-group.is-open > .submenu { 
    display: block !important;
  }
  /* éviter qu’un overflow parent coupe le sous-menu */
  .menu-bar, .site-header, #primary-nav.site-nav {
    overflow: visible !important;
  }
  /* s’assurer que le lien parent reste cliquable et visible */
  .menu-bar .menu-group > .menu-link {
    position: relative;
    pointer-events: auto;
  }
  /* fond lisible en mobile */
  #primary-nav.site-nav { background: var(--brand-primary) !important; }
  #primary-nav .menu > li > a { color:#fff !important; }
  #primary-nav .submenu a { color:#0e1219 !important; background:#fff; }
}
/* ===== NAV MOBILE — PATCH FINAL (placer en fin de fichier) ===== */
@media (max-width:980px){
  /* Assure la cliquabilité du burger au-dessus de tout */
  .nav-toggle{ position:relative; z-index:5001; }

  /* Forcer l’ouverture/fermeture du panneau */
  #primary-nav.site-nav{
    display:none !important;
    background: var(--brand-primary) !important;
    overflow: visible !important;
  }
  #primary-nav.site-nav.is-open{ display:block !important; }

  /* Accordéon des sous-menus fiable */
  .menu-group{ position:static; }
  .submenu{
    position:static !important;
    display:none;
    padding:0; margin:0; border:0; box-shadow:none;
    background: rgba(0,0,0,.06);
  }
  .menu-group.is-open > .submenu{ display:block !important; }

  /* Lisibilité sur fond vert */
  #primary-nav .menu > li > a{
    color:#fff !important; background:transparent !important;
    border-bottom:1px solid rgba(255,255,255,.18);
  }
  #primary-nav .submenu a{
    color:#fff !important;
    padding:.55rem .9rem;
    border-radius:8px;
    background:transparent !important;
  }
}

/* Evite qu’un visuel de bannière passe par-dessus le menu */
.page-banner{ position:relative; z-index:auto; }
/* ===== NAV MOBILE — GARANTIES (fin de fichier) ===== */
@media (max-width:980px){
  #primary-nav.site-nav{
    display:none !important;
    background: var(--brand-primary) !important;
    overflow: visible !important;
  }
  #primary-nav.site-nav.is-open{ display:block !important; }

  .menu-group{ position:static !important; }
  .menu-group.is-open > .submenu{ display:block !important; }
  .submenu{
    position:static !important;
    padding:0; margin:0; border:0; box-shadow:none;
    background: rgba(0,0,0,.06);
  }

  /* lisibilité */
  #primary-nav .menu > li > a{
    color:#fff !important;
    background:transparent !important;
    border-bottom:1px solid rgba(255,255,255,.18);
  }
  #primary-nav .submenu a{
    color:#fff !important;
    background:transparent !important;
  }
}

/* Évite qu’une bannière recouvre la nav */
.page-banner{ position:relative; z-index:auto; }
/* ==== PATCH "Identité" : empêcher le chevauchement en mobile ==== */
@media (max-width:980px){
  /* La side-nav ne doit pas rester sticky en mobile */
  .side-nav{
    position: static !important;
    top: auto !important;
    z-index: auto !important;
  }

  /* S'assurer que la barre + panneau mobile sont au-dessus de tout */
  .site-header{ z-index: 5000 !important; }
  .menu-bar{ z-index: 5001 !important; }
  #primary-nav.site-nav{
    z-index: 5002 !important;
    background: var(--brand-primary) !important;
  }

  /* Accordeon mobile: ouverture forcée + lisibilité */
  .menu-group.is-open > .submenu{ display:block !important; }
  #primary-nav .menu > li > a{
    color:#fff !important;
    background:transparent !important;
    border-bottom:1px solid rgba(255,255,255,.18);
  }
  #primary-nav .submenu{
    position:static !important;
    padding:0; margin:0; border:0; box-shadow:none;
    background:rgba(0,0,0,.06);
  }
  #primary-nav .submenu a{
    color:#fff !important;
    background:transparent !important;
  }
}
/* ==== Backdrop pour menu mobile (bloque tout chevauchement) ==== */
#nav-backdrop{
  display:none;
  position:fixed;
  inset:0;
  z-index: 4200;                 /* sous le panneau, au-dessus du contenu */
  background: rgba(0,0,0,.35);
  -webkit-tap-highlight-color: transparent;
}

/* Empilement sûr du header + nav */
.site-header{ position:sticky; top:0; z-index: 5000; }
.menu-bar{ position:relative; z-index: 5001; }
#primary-nav.site-nav{ position:relative; z-index: 5002; }

/* Mode mobile */
@media (max-width:980px){
  /* Couleur & lisibilité du panneau */
  #primary-nav.site-nav{
    background: var(--brand-primary) !important;
    border-top: 1px solid rgba(255,255,255,.18);
  }
  #primary-nav .menu > li > a{
    color:#fff !important;
    background:transparent !important;
    border-bottom:1px solid rgba(255,255,255,.18);
    text-decoration:none;
  }
  .menu-group{ position:static; }
  .menu-group.is-open > .submenu{ display:block !important; }
  #primary-nav .submenu{
    position:static !important;
    padding:0; margin:0; border:0; box-shadow:none;
    background: rgba(0,0,0,.06);
  }
  #primary-nav .submenu a{
    color:#fff !important;
    background:transparent !important;
  }

  /* Quand le menu est ouvert : neutraliser tout sticky/overlap du contenu */
  body.nav-open .side-nav,
  body.nav-open .sector-aside{
    position: static !important;
    top:auto !important;
    z-index:auto !important;
  }
  body.nav-open .page-banner,
  body.nav-open .page-grid,
  body.nav-open .page-content,
  body.nav-open .sector-layout,
  body.nav-open .sector-content{
    position: static !important;
    z-index: 0 !important;
  }

  /* Empêcher le contenu de voler les clics sous le panneau */
  body.nav-open main,
  body.nav-open .page-banner,
  body.nav-open .page-grid{
    pointer-events: none;
  }
  body.nav-open #primary-nav.site-nav,
  body.nav-open .site-header,
  body.nav-open .menu-bar{
    pointer-events: auto;
  }
}
/* ======= HOTFIX NAV MOBILE – à coller tout en bas ======= */

/* 1) Le burger doit toujours recevoir le clic */
.nav-toggle{
  position: relative;
  z-index: 99999 !important;
  pointer-events: auto !important;
}

/* 2) Le header et le panneau mobile passent devant tout */
.site-header{ position: sticky; top: 0; z-index: 99998 !important; }
.menu-bar{ position: relative; z-index: 99997 !important; }
#primary-nav.site-nav{
  position: relative;
  z-index: 99996 !important;
}

/* 3) En mobile, neutraliser ce qui peut chevaucher : side-nav sticky, bannières, etc. */
@media (max-width:980px){
  /* évite tout chevauchement du layout “À propos” */
  .side-nav,
  .sector-aside{
    position: static !important;
    top: auto !important;
    z-index: auto !important;
  }

  /* bannière et grilles ne prennent pas le dessus */
  .page-banner,
  .page-grid,
  .page-content,
  .sector-layout,
  .sector-content{
    position: relative !important;
    z-index: 0 !important;
    overflow: visible !important;
  }

  /* le wrap ne doit pas clipper le panneau */
  .menu-wrap{ overflow: visible !important; }

  /* panneau mobile : fond vert + liens blancs (pas de blanc) */
  #primary-nav.site-nav{
    display: none;
    width: 100%;
    margin-top: 8px;
    border-top: 1px solid rgba(255,255,255,.18);
    background: var(--brand-primary) !important;
  }
  #primary-nav.site-nav.is-open{ display:block; }

  #primary-nav .menu{ flex-direction: column; align-items: stretch; gap: 0; }
  #primary-nav .menu > li > a{
    padding: .9rem .8rem;
    color: #fff !important;
    background: transparent !important;
    border-radius: 0;
    border-bottom: 1px solid rgba(255,255,255,.18);
    text-decoration: none;
  }

  /* sous-menus en accordéon, toujours visibles quand .is-open */
  .menu-group{ position: static !important; }
  .menu-group.is-open > .submenu{ display: block !important; }
  #primary-nav .submenu{
    position: static !important;
    display: none;
    padding: 0; margin: 0; border: 0; box-shadow: none;
    background: rgba(0,0,0,.06);
  }
  #primary-nav .submenu a{
    color: #fff !important;
    background: transparent !important;
    padding: .55rem .9rem;
    border-radius: 8px;
  }
}

/* 4) Sécurité anti “fond blanc” même hors media query */
#primary-nav.site-nav{ background: var(--brand-primary) !important; }