/* ============================================================
   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: #123322;
  --ocean-2: #1E4A32;
  --corail: #BE5A21;
  --jaune: #E5A324;
  --sable: #F4E9D6;
  --sable-2: #EADCC0;
  --paper: #FBF5E8;
  --encre: #1B1610;
  --encre-soft: #6B5A45;
  --line: rgba(27,22,16,0.14);
  --line-light: rgba(255,255,255,0.18);
  --display: 'Unbounded', sans-serif;
  --body: 'Instrument Sans', 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(--sable); }
.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-weather-link{ display:flex; align-items:center; gap:6px; color:inherit; text-decoration:none; transition:opacity .15s ease; }
.vjr-nav-chrome .tb-weather-link:hover{ opacity:0.75; }
.vjr-nav-chrome .tb-weather-link:hover .tb-weather-temp{ color:var(--jaune); }
.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:#C48A1C; }

.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:48px; width:auto; max-width:220px; object-fit:contain; 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:#FBF5E8; padding:10px 20px; border-radius:20px; font-size:0.84rem; font-weight:600; white-space:nowrap; }
.vjr-nav-chrome .header-cta:hover{ background:#9B4A1B; }

.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:48px; width:auto; max-width:220px; object-fit:contain; }
  .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; }
}


/* ============================================================
   MODE SOMBRE (site-wide) — ajoute juillet 2026
   Applique sur <html class="dark">. Redefinit uniquement les
   variables de couleur ; toutes les regles existantes qui
   consomment var(--sable), var(--paper), var(--encre), etc.
   basculent automatiquement, sans dupliquer les selecteurs.
   ============================================================ */
html.dark{
  /* --sable reste clair : c'est une couleur de TEXTE sur les blocs
     toujours-sombres (top-bar/mega-feature en --ocean), pas une
     surface de page -- elle ne doit pas s'inverser (bug corrige). */
  --sable-2: #1E2937;
  --paper: #0F172A;
  --encre: #F1F5F9;
  --encre-soft: #CBD5E1;
  --line: rgba(241,245,249,0.14);
  --line-light: rgba(241,245,249,0.10);
}
html.dark body{ background:var(--paper); color:var(--encre); }
html.dark .vjr-nav-chrome .top-bar{ background:var(--sable-2); }
html.dark .site-header{ background:var(--paper); border-color:var(--line); }
html.dark .mega-panel{ background:var(--sable-2); border-color:var(--line); color:var(--encre); }
html.dark .mobile-nav{ background:var(--paper); color:var(--encre); }
html{ transition:background-color .3s ease, color .3s ease; }

/* Bouton bascule mode sombre */
.theme-toggle-btn{
  display:flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:50%; border:none; cursor:pointer;
  background:transparent; color:inherit; transition:background-color .2s ease;
}
.theme-toggle-btn:hover{ background:rgba(0,0,0,0.06); }
html.dark .theme-toggle-btn:hover{ background:rgba(255,255,255,0.10); }
.theme-toggle-btn svg{ width:18px; height:18px; }
.theme-toggle-btn .icon-sun{ display:none; }
html.dark .theme-toggle-btn .icon-sun{ display:block; }
html.dark .theme-toggle-btn .icon-moon{ display:none; }


/* Selecteur de langue GTranslate (juillet 2026) */
.vjr-lang-switcher{ display:flex; align-items:center; margin-right:4px; }
.vjr-lang-switcher .gtranslate_wrapper{ font-family:var(--body); }
.vjr-lang-switcher select.gt-selector{
  background:transparent; border:1px solid var(--line); border-radius:20px;
  padding:6px 10px; font-size:.78rem; color:inherit; cursor:pointer; max-width:120px;
}
html.dark .vjr-lang-switcher select.gt-selector{ border-color:var(--line); color:var(--encre); background:var(--sable-2); }
@media (max-width:960px){ .vjr-lang-switcher{ display:none; } }