/* ============================================================
   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; overflow-x:clip; overflow-y:visible; }

/* 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; }

/* Bouton WhatsApp de la top-bar — remplace l'ancien lien texte avec numero */
.vjr-nav-chrome .tb-whatsapp-btn{ display:inline-flex; align-items:center; gap:6px; background:#25D366; color:#fff; padding:6px 13px; border-radius:20px; font-weight:600; transition:background-color .2s ease, transform .2s ease, box-shadow .2s ease; box-shadow:0 2px 8px rgba(37,211,102,0.4); }
.vjr-nav-chrome .tb-whatsapp-btn:hover{ background:#1EBE5A; color:#fff; transform:translateY(-1px); box-shadow:0 4px 14px rgba(37,211,102,0.55); }
.vjr-nav-chrome .tb-whatsapp-btn .icon{ fill:#fff; stroke:none; width:14px; height:14px; }

/* Bouton "Ajouter mon etablissement" — design modernise (gradient + relief) */
.vjr-nav-chrome .tb-cta{ display:inline-flex; align-items:center; gap:6px; background: var(--vjr-safran, #E5A324); color: var(--vjr-ombre, #1B1610); border: 2px solid var(--vjr-safran, #E5A324); padding: 6px 16px; border-radius: 20px; font-weight:700; letter-spacing:0.01em; box-shadow: 0 3px 10px rgba(229,163,36,0.45); transition: transform .2s ease, box-shadow .2s ease, background .3s ease, border-color .3s ease; }
.vjr-nav-chrome .tb-cta:hover{ background: #D4941F; color: var(--vjr-ombre, #1B1610); border-color: #D4941F; transform: translateY(-1px); box-shadow: 0 5px 18px rgba(229,163,36,0.6); }

.site-header.vjr-nav-chrome{ background: var(--paper); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:500; }
/* Decalage du sticky quand la barre d'admin WP est affichee (utilisateur connecte) --
   sans ca, la site-header sticky (top:0) passe sous la barre d'admin (position:fixed,
   z-index tres eleve) une fois colle en haut, et semble "disparaitre" au scroll pour
   les utilisateurs connectes -- alors qu'un visiteur normal ne voit pas ce souci. */
body.admin-bar .site-header.vjr-nav-chrome{ top:32px; }
@media screen and (max-width:782px){
  body.admin-bar .site-header.vjr-nav-chrome{ top:46px; }
}
@media screen and (max-width:600px){
  body.admin-bar .site-header.vjr-nav-chrome{ top:0; }
}
/* Le sticky etait deja pose ici (position:sticky;top:0) mais restait invisible
   a l'usage : (1) un vieux bloc .site-header mort (v1 du header, background
   translucide + z-index:1000) trainait dans vjr221.css et pretait a confusion
   sans casser le sticky lui-meme -- retire ; (2) z-index remonte a 500 pour
   rester surement au-dessus de tout contenu de page (map-teaser, cards, etc.)
   pendant le defilement, sous les vrais overlays (mobile-nav:999, recherche:2000). */
.site-header.vjr-nav-chrome .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:68px; width:auto; max-width:230px; 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; }

/* align-self:flex-end fait descendre .main-nav en bas du header (au
   lieu du centrage vertical par defaut), pour que les nav-item touchent
   quasiment la bordure basse du header -- reduit le grand ecart visuel
   entre le menu principal et le mega-panel au survol. */
.vjr-nav-chrome .main-nav{ display:flex; align-items:center; align-self:flex-end; gap:16px; flex:1; min-width:0; justify-content:center; overflow:hidden; }
/* overflow:hidden ci-dessus : filet de securite -- sans lui, quand les libelles des rubriques de premier niveau (7 actuellement) ne tiennent plus dans l'espace disponible, ils debordent par-dessus le logo a gauche (overflow:visible par defaut sur un flex-item), au lieu d'etre contenus dans leur propre boite. Le vrai fix est le breakpoint 1100px ci-dessous qui bascule sur le burger avant que ca n'arrive. */
/* min-width:0 ci-dessus corrige un bug flexbox classique : sans lui, .main-nav refuse
   de retrecir sous la largeur naturelle de ses liens et pousse .header-actions (donc
   le bouton "Explorer la carte") hors du cadre visible, ou il se fait rogner par
   l'overflow-x:hidden du body -- d'ou le bouton decale a droite et coupe. */
.vjr-nav-chrome .nav-item{ position:relative; padding-bottom:2px; }
.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-top:2px solid var(--corail); border-radius:6px; box-shadow:0 30px 60px -20px rgba(14,59,55,0.25); padding:22px 28px 28px; margin-top:-2px; 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 .mega-panel.mega-xwide{ width:920px; grid-template-columns:1fr 1fr 1fr 1fr 1.1fr; gap:20px; }
.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; }
  .vjr-nav-chrome .logo img{ height:54px; max-width:170px; }
}

@media (max-width:1100px){
  .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; }
}
/* Breakpoint remonte de 960px a 1100px (02/08/2026) : avec 7 rubriques de premier
   niveau, le menu principal (.main-nav) manquait de place entre ~960px et ~1100px
   et ses libelles debordaient par-dessus le logo (voir overflow:hidden ajoute plus
   haut sur .main-nav). Le burger prend desormais le relais avant que ca n'arrive. */

@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 .tb-whatsapp-btn svg{ width:12px; height:12px; }
  .vjr-nav-chrome .tb-whatsapp-btn{ padding:5px 10px; font-size:0.66rem; }
  .vjr-nav-chrome .tb-cta{ padding:5px 9px; font-size:0.66rem; }
}

@media (max-width:480px) {
  #mobile-nav{ top:76px; }
  .vjr-nav-chrome .top-bar .tb-item a[href^="tel:+221"]{ display:none; }
  .vjr-nav-chrome .tb-urgence .tb-label{ font-size:0.62rem; }
  .site-header.vjr-nav-chrome .wrap{ height:76px; gap:12px; }
  .vjr-nav-chrome .logo img{ height:64px; width:auto; max-width:240px; 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); border-top-color:var(--corail); 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; } }


/* Correctif visibilite icones sociaux menu mobile -- fond vert + icones peu visibles (29/07/2026) */
#mobile-nav .mobile-nav__socials a,
#mobile-nav .mobile-nav__socials a svg {
  color: #fff !important;
}
#mobile-nav .mobile-nav__socials a:hover,
#mobile-nav .mobile-nav__socials a:hover svg {
  color: #fff !important;
}


/* VJR 221 — compact header navigation: keep all primary items visible on desktop */
@media (min-width: 1200px){
  .site-header.vjr-nav-chrome .wrap{gap:14px;}
  .site-header.vjr-nav-chrome .logo img{height:68px;max-width:230px;}
  .site-header.vjr-nav-chrome .main-nav{gap:10px;justify-content:flex-start;}
  .site-header.vjr-nav-chrome .header-actions{gap:8px;}
}
@media (min-width: 1100px) and (max-width: 1199px){
  .site-header.vjr-nav-chrome .wrap{gap:10px;}
  .site-header.vjr-nav-chrome .logo img{height:56px;max-width:185px;}
  .site-header.vjr-nav-chrome .main-nav{gap:8px;justify-content:flex-start;}
  .site-header.vjr-nav-chrome .header-actions{gap:6px;}
}