/* ============================================================
   VJR 221 — CSS DU MENU (top-bar + header + navigation)
   Ce fichier ne contient QUE le menu. Il est charge sur TOUTES
   les pages du site. Il ne doit jamais contenir de styles qui
   affectent le contenu des pages (ca, c'est vjr221.css et
   vjr-home-page.css).
   Tout est scope sous .vjr-nav-chrome pour ne jamais entrer en
   collision avec les classes du contenu (.btn, .footer-grid,
   .footer-col, .nav-item, etc. utilisees ailleurs sur le site).
   ============================================================ */

:root{
  --ocean: #0E3B37;
  --ocean-2: #154F49;
  --corail: #E85C3F;
  --jaune: #F2B705;
  --sable: #FBF2E1;
  --sable-2: #F3E6CC;
  --paper: #FFFCF6;
  --encre: #152420;
  --encre-soft: #4B5850;
  --line: rgba(21,36,32,0.14);
  --line-light: rgba(255,255,255,0.18);
  --display: 'Space Grotesk', sans-serif;
  --body: 'Inter', sans-serif;
  --mono: 'IBM Plex Mono', monospace;
}

/* Correctif anti-debordement horizontal — s'applique a toutes les pages */
html, body{ max-width:100%; overflow-x:hidden; }

/* Utilitaire .wrap : conteneur centre, reutilise par le menu, la home
   et le footer. Classe generique sans collision ailleurs sur le site. */
.wrap{ max-width:1220px; margin:0 auto; padding:0 32px; box-sizing:border-box; }
.icon{ width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }

/* Encart pub — utilise sur toutes les pages (home et pages interieures) */
.vjr-ad-slot{ padding:24px 0; text-align:center; }

/* Position du menu mobile (offset sous le header) */
#mobile-nav{ top:96px; }

/* ================= ZONE MENU (scopee) ================= */
.vjr-nav-chrome *{ box-sizing:border-box; }
.vjr-nav-chrome a{ color:inherit; text-decoration:none; }
.vjr-nav-chrome img{ max-width:100%; display:block; }
.vjr-nav-chrome button{ font-family:inherit; }

.vjr-nav-chrome .top-bar{ background: var(--ocean); color: rgba(251,242,225,0.85); }
.vjr-nav-chrome .top-bar .wrap{ display:flex; align-items:center; justify-content:space-between; min-height: 44px; padding-top:6px; padding-bottom:6px; font-family: var(--mono); font-size:0.72rem; gap:16px; flex-wrap:wrap; row-gap:6px; }
.vjr-nav-chrome .tb-group{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; min-width:0; }
.vjr-nav-chrome .tb-item{ display:flex; align-items:center; gap:6px; white-space:nowrap; min-width:0; }
.vjr-nav-chrome .tb-item a:hover{ color: var(--paper); }
.vjr-nav-chrome .tb-sep{ width:1px; height:14px; background: var(--line-light); }
.vjr-nav-chrome .tb-urgence{ display:flex; align-items:center; gap:10px; }
.vjr-nav-chrome .tb-urgence .tb-label{ color: var(--jaune); }
.vjr-nav-chrome .tb-urgence-nums{ display:flex; gap:8px; flex-wrap:wrap; row-gap:4px; }
.vjr-nav-chrome .tb-urgence-nums a{ background: rgba(232,92,63,0.18); color: var(--sable); padding:3px 8px; border-radius:3px; font-weight:600; }
.vjr-nav-chrome .tb-urgence-nums a:hover{ background: var(--corail); }
.vjr-nav-chrome .tb-meteo{ display:flex; align-items:center; gap:6px; }
.vjr-nav-chrome .tb-social{ display:flex; align-items:center; gap:12px; }
.vjr-nav-chrome .tb-social a{ display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; opacity:0.75; }
.vjr-nav-chrome .tb-social a:hover{ opacity:1; }
.vjr-nav-chrome .tb-social svg{ width:22px; height:22px; }
.vjr-nav-chrome .tb-weather-icon{ width:15px; height:15px; }
.vjr-nav-chrome .tb-weather-temp{ color:var(--jaune); font-weight:600; margin-left:2px; }
.vjr-nav-chrome .tb-cta{ background: var(--jaune); color: var(--encre); padding: 6px 12px; border-radius: 20px; font-weight:600; }
.vjr-nav-chrome .tb-cta:hover{ background:#D9A503; }

.vjr-nav-chrome .site-header{ background: var(--paper); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:100; }
.vjr-nav-chrome .site-header .wrap{ display:flex; align-items:center; justify-content:space-between; height:96px; gap:24px; }
.vjr-nav-chrome .logo{ display:flex; align-items:center; flex-shrink:0; }
.vjr-nav-chrome .logo img{ height:72px; width:auto; display:block; }
.vjr-nav-chrome .logo-sub{ font-family:var(--mono); font-size:0.6rem; color:var(--encre-soft); display:block; letter-spacing:0.03em; text-transform:uppercase; margin-top:1px; }

.vjr-nav-chrome .main-nav{ display:flex; align-items:center; gap:16px; flex:1; justify-content:center; }
.vjr-nav-chrome .nav-item{ position:relative; padding-bottom:6px; }
.vjr-nav-chrome .nav-item > a, .vjr-nav-chrome .nav-item > .nav-trigger{ font-size:0.84rem; font-weight:600; color:var(--encre); padding:29px 0; display:inline-block; cursor:pointer; border-bottom:2px solid transparent; white-space:nowrap; }
.vjr-nav-chrome .nav-item > a:hover, .vjr-nav-chrome .nav-item:hover > .nav-trigger{ color:var(--ocean); border-bottom-color:var(--corail); }
.vjr-nav-chrome .nav-trigger::after{ content:' \25be'; font-size:0.7em; opacity:0.6; }

.vjr-nav-chrome .mega-panel{ position:absolute; top:100%; left:50%; transform:translateX(-50%); width:620px; background:var(--paper); border:1px solid var(--line); border-radius:6px; box-shadow:0 30px 60px -20px rgba(14,59,55,0.25); padding:28px; padding-top:34px; margin-top:-6px; display:grid; grid-template-columns:1fr 1fr 1.1fr; gap:26px; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .15s ease, visibility .15s; z-index:90; }
.vjr-nav-chrome .mega-panel.mega-wide{ width:760px; grid-template-columns:1fr 1fr 1fr 1.1fr; }
.vjr-nav-chrome .nav-item:hover .mega-panel, .vjr-nav-chrome .nav-item.is-open .mega-panel{ opacity:1; visibility:visible; pointer-events:auto; }
.vjr-nav-chrome .mega-col .mega-kicker{ font-family:var(--mono); font-size:0.66rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--corail); display:block; margin-bottom:12px; }
.vjr-nav-chrome .mega-col a{ display:block; font-size:0.85rem; color:var(--encre-soft); padding:6px 0; }
.vjr-nav-chrome .mega-col a:hover{ color:var(--ocean); }
.vjr-nav-chrome .mega-feature{ background:var(--ocean); border-radius:5px; padding:16px; color:var(--sable); }
.vjr-nav-chrome .mega-feature .tag{ font-family:var(--mono); font-size:0.64rem; color:var(--jaune); text-transform:uppercase; letter-spacing:0.05em; }
.vjr-nav-chrome .mega-feature h4{ font-family:var(--display); font-size:0.95rem; font-weight:600; margin:8px 0 6px; }
.vjr-nav-chrome .mega-feature p{ font-size:0.76rem; color:rgba(251,242,225,0.7); line-height:1.5; margin-bottom:10px; }
.vjr-nav-chrome .mega-feature .mega-btn{ font-size:0.74rem; font-weight:600; color:var(--jaune); }

.vjr-nav-chrome .header-actions{ display:flex; align-items:center; gap:12px; flex-shrink:0; min-width:0; }
.vjr-nav-chrome #search-check{ display:none; }
.vjr-nav-chrome .search-icon-btn{ width:38px; height:38px; border-radius:50%; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; cursor:pointer; background:none; }
.vjr-nav-chrome .search-icon-btn svg{ width:16px; height:16px; stroke:var(--encre); }
.vjr-nav-chrome .search-expand{ max-width:0; overflow:hidden; transition:max-width .25s ease; }
.vjr-nav-chrome #search-check:checked ~ .header-actions .search-expand{ max-width:210px; margin-right:6px; }
.vjr-nav-chrome .search-expand input{ width:200px; padding:9px 13px; border-radius:20px; border:1px solid var(--line); font-size:0.84rem; outline:none; background:var(--sable-2); box-sizing:border-box; }
.vjr-nav-chrome .header-cta{ background:var(--corail); color:var(--paper); padding:10px 20px; border-radius:20px; font-size:0.84rem; font-weight:600; white-space:nowrap; }
.vjr-nav-chrome .header-cta:hover{ background:#D14C31; }

.vjr-nav-chrome .burger-btn{ display:none; }

@media (max-width:1300px){
  .vjr-nav-chrome .main-nav{ gap:10px; }
  .vjr-nav-chrome .nav-item > a, .vjr-nav-chrome .nav-item > .nav-trigger{ font-size:0.78rem; }
}

@media (max-width:960px){
  .vjr-nav-chrome .main-nav{ display:none; }
  .vjr-nav-chrome .burger-btn{ display:flex; }
  .vjr-nav-chrome .header-cta{ display:none; }
  .vjr-nav-chrome .logo-sub{ display:none; }
  .wrap{ padding:0 20px; }
  .vjr-nav-chrome .top-bar .wrap{ font-size:0.66rem; justify-content:flex-start; }
}

@media (max-width:680px) {
  .vjr-nav-chrome .tb-meteo{ display:none; }
  .vjr-nav-chrome .tb-social{ display:none; }
  .vjr-nav-chrome .tb-sep{ display:none; }
  .vjr-nav-chrome .top-bar .tb-item svg{ width:12px; height:12px; }
  .vjr-nav-chrome .tb-cta{ padding:5px 9px; font-size:0.66rem; }
}

@media (max-width:480px) {
  #mobile-nav{ top:64px; }
  .vjr-nav-chrome .top-bar .tb-item a[href^="tel:+221"]{ display:none; }
  .vjr-nav-chrome .tb-urgence .tb-label{ font-size:0.62rem; }
  .vjr-nav-chrome .site-header .wrap{ height:64px; gap:12px; }
  .vjr-nav-chrome .logo img{ height:42px; }
  .wrap{ padding:0 14px; }
  .vjr-nav-chrome .search-expand input{ width:150px; }
  .vjr-nav-chrome #search-check:checked ~ .header-actions .search-expand{ max-width:150px; }
}