/* Travel2World — menu principal (version du 16 octobre 2026)
   3 entrées + le bouton orange : Destinations ▾ · Préparer mon départ ▾ · Outils ▾ · Guides & accompagnement (panneaux déroulants).
   « Qui sommes-nous », « Nos avantages » et « Communauté » sont dans le pied de page.
   ≥ 1321 px : en-tête sur une seule ligne.  1001–1320 px : le menu passe sur une 2e ligne.
   ≤ 1000 px : le menu laisse la place au bouton ≡ (menu latéral, acces.js) et à la barre du bas (téléphone). */

#app>header.hx .nav{position:relative}
#app>header.hx .nav nav{overflow:visible!important;gap:2px!important}
#app>header.hx .nv-item{position:relative;flex:none}

/* les entrées du haut */
#app>header.hx .nv-top{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border:0;border-radius:9px;background:none;color:color-mix(in srgb,var(--ink) 78%,transparent);font:500 .9rem/1.6 var(--f-body);white-space:nowrap;cursor:pointer;transition:background-color .2s,color .2s}
#app>header.hx .nv-top:hover,#app>header.hx .nv-item.is-open>.nv-top{background:var(--soft,#e9f0f1);color:var(--ink)}
#app>header.hx .nv-top.is-here{color:var(--ink);font-weight:600;box-shadow:inset 0 -2px 0 var(--orange)}
#app>header.hx .nv-caret{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
#app>header.hx .nv-item.is-open .nv-caret{transform:rotate(180deg)}

/* les panneaux */
#app>header.hx .nv-panel{position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%);z-index:60;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:18px;box-shadow:0 1px 0 rgba(0,0,0,.03),0 26px 50px -22px rgba(27,36,51,.45);padding:18px;animation:nv-in .16s cubic-bezier(.16,1,.3,1)}
#app>header.hx .nv-panel[hidden]{display:none}
#app>header.hx .nv-panel:before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
@keyframes nv-in{from{opacity:0;transform:translate(-50%,-6px)}to{opacity:1;transform:translate(-50%,0)}}
#app>header.hx .nav nav .nv-panel a{display:block;flex:none;padding:9px 12px!important;border-radius:10px;font-size:.92rem!important;font-weight:600!important;color:var(--ink)!important;text-decoration:none;white-space:normal;background:none}
#app>header.hx .nav nav .nv-panel a:hover,#app>header.hx .nav nav .nv-panel a:focus-visible{background:var(--soft,#e9f0f1)}
#app>header.hx .nav nav .nv-panel a.m-active{background:var(--soft,#e9f0f1);color:var(--ink)!important;box-shadow:inset 3px 0 0 var(--orange)}
#app>header.hx .nv-panel small{display:block;margin-top:2px;font-size:.78rem;font-weight:400;color:var(--muted);line-height:1.35}
#app>header.hx .nv-h{margin:4px 12px 6px;font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--muted)}

/* Destinations : 6 pays + « pas encore décidé » */
#app>header.hx .nv-panel-dest{width:min(720px,92vw);display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:8px 18px}
#app>header.hx .nv-pays-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px}
#app>header.hx .nav nav .nv-panel a.nv-pays{display:flex;align-items:flex-start;gap:11px}
#app>header.hx .nv-pays b{font-size:1.35rem;line-height:1.1;font-weight:400;flex:none}
#app>header.hx .nv-side{border-left:1px solid var(--line);padding-left:14px;display:flex;flex-direction:column}
#app>header.hx .nav nav .nv-panel a.nv-all{margin-top:auto;color:var(--orange-ink)!important}

/* Préparer mon départ : le test en avant, « Mon plan de départ » dessous quand il existe */
#app>header.hx .nv-panel-prep{width:min(360px,92vw);display:grid;gap:8px}
#app>header.hx .nav nav .nv-panel a.nv-hero{display:flex;flex-direction:column;gap:4px;padding:16px!important;background:var(--ink);color:var(--bg)!important;border-radius:14px;box-shadow:4px 4px 0 var(--orange)}
#app>header.hx .nav nav .nv-panel a.nv-hero:hover{background:var(--ink);transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--orange)}
#app>header.hx .nv-hero span{font-family:var(--f-hand);font-size:1.15rem;font-weight:700;color:var(--sun)}
#app>header.hx .nv-hero b{font-family:var(--f-display);font-weight:500;font-size:1.3rem;line-height:1.1}
#app>header.hx .nv-hero small{color:color-mix(in srgb,var(--bg) 78%,transparent)!important}
#app>header.hx .nv-hero em{margin-top:auto;padding-top:8px;font-style:normal;font-weight:700;font-size:.86rem;color:var(--sun)}
#app>header.hx .nav nav .nv-panel a.nv-plan{border:1px solid var(--line)}
#app>header.hx .nav nav .nv-panel a[hidden]{display:none!important}

/* Outils : deux colonnes + « Tous les outils » */
#app>header.hx .nv-panel-outils{width:min(560px,92vw);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 14px}
#app>header.hx .nv-col{min-width:0}
#app>header.hx .nav nav .nv-panel a.nv-all-outils{grid-column:1/-1;margin-top:4px;border-top:1px solid var(--line);border-radius:0 0 10px 10px;color:var(--orange-ink)!important}

/* sombre */
html[data-theme=dark] #app>header.hx .nv-panel{box-shadow:0 26px 50px -22px rgba(0,0,0,.8)}
html[data-theme=dark] #app>header.hx .nv-hero span,html[data-theme=dark] #app>header.hx .nv-hero em{color:#a83b17}

/* ≥ 1321 px : une seule ligne (logo · menu · boutons) */
@media (min-width:1321px){
  #app>header.hx .nav{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"brand nav end"}
  #app>header.hx .nav nav{justify-content:center;margin:0!important;padding:0!important;border-top:0!important}
}
/* les grands panneaux partent du bord gauche de leur entrée (sinon « Destinations » sort de l'écran à gauche) */
@keyframes nv-in-l{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (min-width:1001px){
  #app>header.hx .nv-item:first-of-type .nv-panel{left:0;transform:none;animation-name:nv-in-l}
}
/* 1001–1320 px : 2e ligne ; « Préparer » part aussi du bord gauche */
@media (min-width:1001px) and (max-width:1320px){
  #app>header.hx .nv-item:nth-of-type(2) .nv-panel{left:0;transform:none;animation-name:nv-in-l}
}
/* ≤ 1000 px : menu latéral (≡) et, sur ordinateur étroit / tablette, le bouton orange reste visible */
@media (max-width:1000px){
  #app>header.hx .nav nav{display:none!important}
  #app>header.hx .nav{grid-template-areas:"brand . end"}
}
@media (min-width:761px) and (max-width:1000px){
  #app>header.hx .nav-offres{display:inline-flex!important}
}
@media (prefers-reduced-motion:reduce){#app>header.hx .nv-panel{animation:none}}