/* =====================================================================
   NAVIGATION À PANNEAUX — commune à toutes les pages publiques
   (Formations, Tests, Coachs, Ressources). Comportement : assets/js/site-nav.js
   ===================================================================== */
:root{ --lp-cream:#FBF7F2; --lp-sand:#F3EBE1; --lp-line:#E7DDD1; --lp-copper:var(--gold-dark, #A34F2B); --lp-ease:cubic-bezier(.2,.7,.2,1); }
/* ---------- Navigation : panneaux ---------- */
.nav-links{ gap:2px; }
.lp-menu{ position:relative; }
.lp-menu-btn{
  display:inline-flex; align-items:center; gap:6px; background:none; border:none; cursor:pointer;
  font:inherit; font-size:14.5px; font-weight:600; color:inherit; padding:9px 14px; border-radius:100px;
  transition:background-color .15s, color .15s;
}
.lp-menu-btn svg{ transition:transform .2s var(--lp-ease); }
.lp-menu-btn[aria-expanded="true"] svg{ transform:rotate(180deg); }
.lp-menu-btn:hover, .lp-menu-btn[aria-expanded="true"]{ background:#fff; color:var(--navy); }
.lp-menu-btn:active{ transform:scale(.97); }
.lp-menu-btn:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
.lp-panel{
  position:absolute; top:calc(100% + 12px); left:50%; transform:translate(-50%, 6px);
  background:#fff; border:1px solid var(--lp-line); border-radius:18px;
  box-shadow:0 24px 60px rgba(16,35,63,.16); padding:16px; z-index:200;
  opacity:0; visibility:hidden; transition:opacity .16s ease, transform .16s var(--lp-ease), visibility 0s linear .16s;
}
.lp-panel--wide{ width:min(720px, 92vw); display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:8px 18px; padding:20px; left:0; transform:translate(-18%, 6px); }
.lp-panel--wide.is-open{ transform:translate(-18%, 0); }
.lp-panel--narrow{ width:340px; }
.lp-panel.is-open{ opacity:1; visibility:visible; transform:translate(-50%, 0); transition-delay:0s; }
.lp-panel::before{ content:''; position:absolute; top:-14px; left:0; right:0; height:14px; }
.lp-panel-h{ font-family:var(--display); font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--lp-copper); margin:2px 10px 8px; }
.lp-panel a{
  display:flex; align-items:center; gap:12px; padding:9px 10px; border-radius:12px; color:var(--ink) !important; text-decoration:none;
  transition:background-color .12s ease;
}
.lp-panel a > span{ display:block; min-width:0; }
.lp-panel a img{ width:56px; height:40px; object-fit:cover; border-radius:8px; flex:0 0 auto; }
.lp-panel a:hover, .lp-panel a:focus-visible{ background:var(--lp-cream); outline:none; }
.lp-panel a:focus-visible{ box-shadow:inset 0 0 0 2px var(--gold); }
.lp-panel a b{ display:block; font-size:14.5px; font-weight:650; color:var(--navy); }
.lp-panel a span span, .lp-panel a > span:not(.lp-panel-ic):only-of-type{ display:block; }
.lp-panel a b + span{ display:block; font-size:12.5px; color:var(--ink-mute); margin-top:2px; line-height:1.4; }
.lp-panel--narrow a{ display:block; }
.lp-panel--narrow a:has(.lp-panel-ic){ display:flex; }
.lp-panel-ic{ flex:0 0 auto; width:34px; height:34px; border-radius:10px; background:var(--lp-sand); color:var(--lp-copper); display:flex !important; align-items:center; justify-content:center; font-family:var(--display-serif); font-weight:600; font-size:13px; }
.lp-panel-side{ background:var(--lp-cream); border-radius:14px; padding:12px 8px; align-self:start; }
.lp-panel-side a{ display:block; }
.lp-panel-side a:hover, .lp-panel-side a:focus-visible{ background:#fff; }
.lp-panel-all{ grid-column:1 / -1; border-top:1px solid #EFE6DB; margin-top:4px; padding-top:8px; }
.lp-panel-all a{ display:inline-flex; font-size:13.5px; font-weight:700; color:var(--lp-copper) !important; }

.lp-menu-btn.is-current{ background:#fff; color:var(--navy); box-shadow:0 1px 3px rgba(16,35,63,.08); }
.lp-panel a[aria-current="page"]{ background:var(--lp-cream); }
.lp-panel a[aria-current="page"] b{ color:var(--lp-copper); }
@media(max-width:1100px){ .nav-links .lp-menu-btn{ padding:9px 10px; font-size:14px; } }
@media(prefers-reduced-motion: reduce){ .lp-panel, .lp-menu-btn svg{ transition:none !important; } }

/* ---------- En-tête compact (20/10/2026) ----------
   La barre était répartie sur toute la largeur (space-between) : grands vides
   entre le menu, le drapeau et les boutons. Désormais : marque à gauche, puis
   menu, drapeau et boutons regroupés à droite avec des écarts réguliers. */
@media(min-width:1181px){
  .nav-in{ justify-content:flex-start; gap:10px; }
  .nav-in > .brand-block{ margin-right:auto; }
  .nav-in > .nav-links{ margin:0 14px 0 0; }
  .nav-in > #country-selector{ margin-right:0 !important; }
  .nav-in > #nav-account-link{ margin-right:0 !important; }
}
.nav-links .lp-nav-link{ padding:9px 14px; font-size:14.5px; font-weight:600; }
.nav-links .lp-nav-link:active{ transform:scale(.97); }
.nav-links .lp-nav-link:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
@media(min-width:1181px) and (max-width:1320px){
  .nav-links .lp-nav-link, .nav-links .lp-menu-btn{ padding:8px 10px; font-size:13.5px; }
}
/* Très petits écrans (≤ 360 px) : la marque, le drapeau et le bouton menu
   tiennent sur une ligne, sans débordement. */
@media(max-width:360px){
  .nav-in .brand-tag{ display:none; }
  .nav-in .brand{ font-size:16px; }
  .nav-in > #country-selector{ margin-right:6px !important; }
}
/* 23/10/2026 — les panneaux du menu héritaient du « nowrap » de la barre : le texte sortait du cadre */
.lp-panel, .nav-links .lp-panel a, .nav-links .lp-panel a span{ white-space:normal; }
.lp-panel a span span{ overflow-wrap:anywhere; }