/* Meta-menu VHU — un panneau par entree, tout visible d'un coup.
   Akim, 17/08/2026. Voir vhu-menu.php pour le pourquoi.
   Palette reprise du theme : bleu #0077A3, nuit #183443, brume #E3F1F5. */

.vhu-mega{
  --mega-bleu:#0077A3;
  --mega-nuit:#183443;
  --mega-doux:#6b8593;
  --mega-brume:#E3F1F5;
  --mega-trait:#e7eff3;
  position:absolute; left:0; right:0; z-index:99998;
  background:#fff; box-shadow:0 18px 40px rgba(24,52,67,.16);
  border-top:3px solid var(--mega-bleu);
  font-family:Verdana,Geneva,Helvetica,Arial,sans-serif;
}
.vhu-mega[hidden]{display:none}

/* [2026-08-18] Akim : pas de bandeau sur toute la largeur — mais SEULEMENT pour les
   deux panneaux courts, « Rachat voiture » et « Guides & Demarches ». Ils prennent
   alors la largeur de leur contenu et se posent sous l'entree survolee, le `left`
   etant donne par `placer()` dans vhu-menu.js, borne pour ne pas sortir de l'ecran.
   « Zone intervention » garde le bandeau pleine largeur : ses colonnes sont remplies.
   En telephone, la regle `[data-mobile="1"]` plus bas reprend la main dans tous les
   cas et le panneau occupe tout l'ecran. */
.vhu-mega--court{right:auto; width:max-content; max-width:calc(100vw - 24px)}

.vhu-mega__panneau{padding:26px clamp(18px,4vw,52px) 28px}
.vhu-mega__panneau[hidden]{display:none}

.vhu-mega__corps{display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:38px; align-items:start}

/* Panneau court (une seule liste) : DEUX colonnes, la liste puis l'appel a l'action,
   et rien d'autre. Akim, 18/08 : la grille comptait une premiere colonne vide de
   676 px, les liens commencaient a 758 px et flottaient au milieu du panneau avec
   un trou a leur gauche. Une colonne sans contenu ne se dessine plus. */
.vhu-mega__corps--simple{grid-template-columns:minmax(240px,300px) 300px; gap:30px; justify-content:start}
.vhu-mega__corps--simple > .vhu-mega__regions{grid-column:1; grid-template-columns:1fr}
.vhu-mega__corps--simple .vhu-mega__region--large{grid-column:auto}
.vhu-mega__corps--simple .vhu-mega__region--large .vhu-mega__deps{columns:1}

/* --- Les regions : trois colonnes, l'Ile-de-France en occupe deux. --- */
.vhu-mega__regions{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px 30px; align-content:start}
.vhu-mega__region--large{grid-column:span 2}
.vhu-mega__region--large .vhu-mega__deps{columns:2; column-gap:30px}

/* Akim, 17/08 : les rubriques etaient trop claires, puis trop lourdes une fois
   passees en bleu nuit plein. Le libelle garde sa couleur sombre mais s'appuie
   sur un fond teinte plutot que sur un gros trait : la structure du panneau se
   lit d'un coup d'oeil, sans peser. */
.vhu-mega__region > strong{
  display:block; margin:0 0 10px; padding:6px 10px; border-radius:2px;
  font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--mega-nuit); background:var(--mega-brume);
}

.vhu-mega__lien{
  display:block; padding:5px 0; font-size:15px; line-height:1.35;
  color:var(--mega-nuit); text-decoration:none; break-inside:avoid;
  border-bottom:1px solid transparent;
}
.vhu-mega__lien:hover,
.vhu-mega__lien:focus-visible{color:var(--mega-bleu)}

.vhu-mega__liens{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:2px 30px; align-content:start}

/* Les entrees du rachat portent une ligne de contexte : le panneau ne sonne pas
   creux, et on sait ou l'on va avant de cliquer. */
.vhu-mega__fiches{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 26px; align-content:start}
.vhu-mega__fiche{
  display:block; padding:12px 14px; border:1px solid var(--mega-trait); border-radius:3px;
  text-decoration:none; background:#fff; transition:border-color .12s ease, background .12s ease;
}
.vhu-mega__fiche strong{display:block; font-size:15px; color:var(--mega-nuit); line-height:1.3}
.vhu-mega__fiche span{display:block; margin-top:3px; font-size:12.5px; color:var(--mega-doux); line-height:1.4}
.vhu-mega__fiche:hover{border-color:var(--mega-bleu); background:#fbfdfe}
.vhu-mega__fiche:hover strong{color:var(--mega-bleu)}
.vhu-mega__fiche:focus-visible{outline:2px solid var(--mega-bleu); outline-offset:2px}

/* --- La colonne d'action : elements de langage puis le telephone. --- */
.vhu-mega__rail{
  background:var(--mega-nuit); color:#fff; border-radius:4px; padding:22px 22px 20px;
  display:flex; flex-direction:column; gap:14px;
}
.vhu-mega__rail-titre{
  margin:0; font-size:17px; font-weight:700; line-height:1.3; color:#fff;
}
.vhu-mega__args{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:8px}
.vhu-mega__args li{
  position:relative; padding-left:20px; font-size:13px; line-height:1.45; color:#c8dbe4;
}
.vhu-mega__args li::before{
  content:""; position:absolute; left:0; top:.42em; width:9px; height:5px;
  border-left:2px solid #C0D345; border-bottom:2px solid #C0D345; transform:rotate(-45deg);
}

.vhu-mega__tel{
  display:flex; align-items:center; gap:12px; margin-top:4px;
  padding:13px 16px; border-radius:3px; background:#fff; color:var(--mega-nuit);
  text-decoration:none; transition:transform .12s ease;
}
.vhu-mega__tel span{display:flex; flex-direction:column; line-height:1.15}
.vhu-mega__tel em{font-style:normal; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--mega-doux)}
.vhu-mega__tel strong{font-size:20px; letter-spacing:.01em; color:var(--mega-nuit); white-space:nowrap}
.vhu-mega__tel svg{color:var(--mega-bleu); flex:none}
.vhu-mega__tel:hover{transform:translateY(-1px)}
.vhu-mega__tel:focus-visible{outline:2px solid #fff; outline-offset:3px}

.vhu-mega__second{
  align-self:flex-start; font-size:12.5px; color:#a9c6d3; text-decoration:underline;
}
.vhu-mega__second:hover{color:#fff}

/* Le sous-menu natif est masque UNIQUEMENT sur les entrees qui ont un panneau.
   « Guides & Démarches » n'en a pas : son menu deroulant Divi reste intact. */
.vhu-mega-parent > ul.sub-menu{display:none !important}

/* Une entree sans panneau ne porte pas de fleche (le rachat hors de son univers). */
a.vhu-mega-sans-panneau + .sub-menu{display:none !important}
li:has(> a.vhu-mega-sans-panneau) > a:first-child:after{content:"" !important; display:none !important}

/* --- Telephone : deux niveaux, plein ecran. Akim, 17/08.
   On ouvre SUR le menu de base (entrees + gros appel a l'action). Entrer dans
   une rubrique remplace l'ecran par son panneau, avec un retour. Quand le menu
   est ouvert, on est dans le menu : la page ne defile plus derriere. --- */

.vhu-mega[data-mobile="1"]{
    position:fixed; top:0; bottom:0; left:0; right:0; z-index:99999;
    width:auto; max-width:none;
    overflow-y:auto; -webkit-overflow-scrolling:touch; box-shadow:none; border-top:0;
    background:#fff;
  }
body.vhu-mega-mobile .et_mobile_menu{display:none !important}          /* le menu natif est remplace */

.vhu-mega[data-mobile="1"] .vhu-mega__fermer{
    position:sticky; top:0; z-index:2; display:flex; align-items:center;
    justify-content:space-between; gap:10px;
    padding:8px 10px 8px 6px; background:#fff; border-bottom:1px solid var(--mega-trait);
  }
.vhu-mega[data-mobile="1"] .vhu-mega__retour{
    display:none; align-items:center; gap:5px;
    font:inherit; font-size:14px; font-weight:700; color:var(--mega-bleu);
    background:none; border:0; padding:8px 10px; cursor:pointer;
  }
.vhu-mega[data-mobile="1"][data-niveau="2"] .vhu-mega__retour{display:inline-flex}
.vhu-mega[data-mobile="1"] .vhu-mega__croix{
    font:inherit; font-size:22px; line-height:1; color:var(--mega-nuit);
    background:none; border:0; padding:6px 12px; margin-left:auto; cursor:pointer;
  }

.vhu-mega[data-mobile="1"] .vhu-mega__accueil{padding:6px 14px 22px}
.vhu-mega[data-mobile="1"] .vhu-mega__niveau1{display:flex; flex-direction:column; margin-bottom:18px}
.vhu-mega[data-mobile="1"] .vhu-mega__entree{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    padding:15px 2px; font-size:17px; color:var(--mega-nuit); text-decoration:none;
    border-bottom:1px solid var(--mega-trait);
  }
.vhu-mega[data-mobile="1"] .vhu-mega__entree svg{color:var(--mega-doux); flex:none}
.vhu-mega[data-mobile="1"] .vhu-mega__accueil .vhu-mega__rail{padding:18px}

.vhu-mega[data-mobile="1"] .vhu-mega__panneau{padding:14px 14px 24px}
.vhu-mega[data-mobile="1"] .vhu-mega__corps{grid-template-columns:1fr; gap:16px}
.vhu-mega[data-mobile="1"] .vhu-mega__rail{order:-1; padding:16px}            /* l'action d'abord */
.vhu-mega[data-mobile="1"] .vhu-mega__regions, .vhu-mega[data-mobile="1"] .vhu-mega__liens{grid-template-columns:1fr; gap:14px}
.vhu-mega[data-mobile="1"] .vhu-mega__region--large{grid-column:auto}
.vhu-mega[data-mobile="1"] .vhu-mega__region--large .vhu-mega__deps{columns:1}
.vhu-mega[data-mobile="1"] .vhu-mega__lien{padding:11px 2px; font-size:16px; border-bottom:1px solid var(--mega-trait)}

/* Hors mode telephone : ni barre de retour ni menu de base. Le mode suit
   l'etat reel de l'entete, pas une largeur figee. */
.vhu-mega:not([data-mobile="1"]) .vhu-mega__fermer,
.vhu-mega:not([data-mobile="1"]) .vhu-mega__accueil{display:none}

/* Barre d'administration WordPress : elle est posee au-dessus de tout et
   masquait la barre de retour du menu telephone. Akim, 17/08 — « je n'ai pas de
   retour », capture a l'appui : la barre d'admin couvrait « ‹ Menu ».
   Hauteurs officielles de WordPress : 46 px sous 783 px, 32 px au-dessus. */
body.admin-bar .vhu-mega[data-mobile="1"]{top:46px}
@media screen and (min-width:783px){
  body.admin-bar .vhu-mega[data-mobile="1"]{top:32px}
}

/* Le panneau court garde une grille a trois colonnes heritee du bureau : sur
   telephone elle ecrase la liste dans une colonne etroite et le texte deborde.
   Akim, 17/08, capture a l'appui. */
.vhu-mega[data-mobile="1"] .vhu-mega__corps--simple{grid-template-columns:1fr; gap:16px}
.vhu-mega[data-mobile="1"] .vhu-mega__corps--simple > .vhu-mega__regions{grid-column:auto}