/* ============================================================
   NESL v2026_01 : en-tete et menus (design "Redesign 1 · Header & course menu", oct. 2026)
   Charge apres app.css (et la couche peps). Markup : application_view/partials/header.php
   ============================================================ */
.hd{
  --hd-ink:#0F1B2D; --hd-text:#334155; --hd-muted:#475569;
  --hd-blue:#1890D8; --hd-blue-d:#1276B3; --hd-blue-l:#EAF4FB; --hd-blue-xl:#F4FAFE;
  --hd-line:#E5EEF6; --hd-line2:#DCE8F2; --hd-line3:#EEF3F8;
  --hd-h:84px;
  position:relative; z-index:60; background:#fff; color:var(--hd-ink);
}
.hd button{ font-family:inherit; }

/* ---------- barre ---------- */
.hd-bar{ height:var(--hd-h); padding:0 40px; display:flex; align-items:center; border-bottom:1px solid var(--hd-line); background:#fff; position:relative; z-index:2; }
.hd-brand{ flex:0 0 auto; display:block; }
.hd-brand img{ width:150px; height:46px; object-fit:contain; object-position:left center; display:block; }
.hd-brand-sep{ flex:0 0 1px; width:1px; height:40px; background:var(--hd-line2); margin-left:20px; }

.hd-nav{ flex:1 1 auto; min-width:0; margin-left:24px; display:flex; align-items:center; gap:26px; height:100%; }
.hd-nav__item{ display:inline-flex; align-items:center; gap:6px; height:var(--hd-h); padding:0; border:0; background:none; cursor:pointer;
  font-size:15.5px; font-weight:600; color:var(--hd-ink); text-decoration:none; white-space:nowrap; line-height:1; }
.hd-nav__item:hover, .hd-nav__item:focus-visible{ color:var(--hd-blue-d); }
.hd-nav__item:focus-visible{ outline:2px solid var(--hd-blue); outline-offset:-4px; border-radius:4px; }
.hd-nav__item[aria-expanded="true"], .hd-nav__item[aria-current="page"]{ color:var(--hd-blue-d); box-shadow:inset 0 -3px 0 var(--hd-blue); }
.hd-nav__item--accent{ color:var(--hd-blue-d); gap:4px; }
.hd-chev{ flex:0 0 auto; transition:transform .2s; }
[aria-expanded="true"] > .hd-chev{ transform:rotate(180deg); }
.hd-nav__end{ margin-left:auto; display:flex; align-items:center; gap:18px; flex-shrink:0; height:100%; }

/* sous-menus en panneau */
.hd-drop{ position:relative; height:100%; display:flex; align-items:center; }
.hd-pop{ position:absolute; top:calc(100% + 8px); left:-16px; min-width:290px; box-sizing:border-box; background:#fff; border:1px solid var(--hd-line);
  border-radius:16px; padding:10px; display:none; flex-direction:column; gap:2px; box-shadow:0 20px 44px rgba(15,27,45,.18); z-index:70; }
.hd-pop--right{ left:auto; right:-10px; }
.hd-drop.is-open > .hd-pop, .hd-lang.is-open > .hd-pop{ display:flex; }
/* zone tampon entre le libelle et le panneau (le survol ne se perd pas) */
.hd-drop.is-open::after, .hd-lang.is-open::after{ content:""; position:absolute; left:0; right:0; top:100%; height:10px; }
.hd-pop a{ display:flex; align-items:center; gap:10px; min-height:46px; padding:0 16px; border-radius:10px; font-size:15.5px; font-weight:500; color:var(--hd-text); text-decoration:none; white-space:nowrap; }
.hd-pop a:hover, .hd-pop a:focus-visible{ background:var(--hd-blue-xl); color:var(--hd-blue-d); }
.hd-pop a img{ width:20px; height:20px; flex:0 0 20px; border-radius:50%; object-fit:cover; display:block; }

/* selecteur de langue */
.hd-lang{ position:relative; display:flex; align-items:center; height:100%; }
.hd-lang__btn{ height:40px; padding:0 12px; border:1px solid var(--hd-line2); border-radius:999px; background:#fff; font-size:15px; font-weight:600; color:var(--hd-ink);
  display:inline-flex; align-items:center; gap:6px; cursor:pointer; line-height:1; }
.hd-lang__btn:hover, .hd-lang.is-open .hd-lang__btn{ border-color:var(--hd-blue); color:var(--hd-blue-d); }
.hd-lang .hd-pop{ min-width:210px; }
.hd-lang--sm{ height:auto; }
.hd-lang--sm .hd-lang__btn{ height:36px; padding:0 10px; font-size:14px; gap:5px; }
.hd-lang--sm .hd-lang__btn .hd-chev{ display:none; }
.hd-lang--sm .hd-pop{ top:calc(100% + 10px); right:-60px; }

/* boutons */
.hd-cta{ flex:0 0 auto; margin-left:24px; display:flex; flex-direction:column; align-items:center; gap:4px; }
.hd-cta__row{ display:flex; align-items:center; gap:8px; }
.hd-btn{ height:40px; padding:0 14px; box-sizing:border-box; display:inline-flex; align-items:center; justify-content:center; border-radius:10px; font-size:15px; font-weight:700;
  line-height:1; white-space:nowrap; text-decoration:none; transition:background .15s, color .15s, border-color .15s; }
.hd-btn--solid{ background:var(--hd-blue); color:#fff; border:2px solid var(--hd-blue); }
.hd-btn--solid:hover, .hd-btn--solid:focus-visible{ background:var(--hd-blue-d); border-color:var(--hd-blue-d); color:#fff; }
.hd-btn--outline{ background:#fff; color:var(--hd-blue-d); border:2px solid var(--hd-blue); }
.hd-btn--outline:hover, .hd-btn--outline:focus-visible{ background:var(--hd-blue-l); color:var(--hd-blue-d); }
.hd-btn--sm{ font-size:14px; }
.hd-btn--lg{ height:52px; font-size:16px; width:100%; }
.hd-cta__phone{ display:inline-flex; align-items:center; gap:5px; white-space:nowrap; font-size:13px; font-weight:700; color:var(--hd-ink); text-decoration:none; }
.hd-cta__phone:hover{ color:var(--hd-blue-d); }

/* ---------- mega menu ---------- */
.hd-mega{ position:absolute; left:0; right:0; top:100%; z-index:1; display:none; background:#fff; box-shadow:0 24px 40px rgba(15,27,45,.14); }
.hd-mega.is-open{ display:block; }
.hd-mega__inner{ max-width:1440px; margin:0 auto; box-sizing:border-box; padding:36px 64px 32px; display:grid; grid-template-columns:3fr 1fr; gap:56px; }
.hd-mega__fams{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); column-gap:32px; row-gap:28px; align-content:start; }
.hd-fam{ display:flex; flex-direction:column; gap:6px; }
.hd-fam__head{ display:flex; align-items:center; gap:10px; margin-bottom:4px; }
.hd-fam__ic{ width:32px; height:32px; flex:0 0 32px; border-radius:8px; background:var(--hd-blue-l); color:var(--hd-blue); display:flex; align-items:center; justify-content:center; }
.hd-fam__ic--bare{ width:auto; height:auto; flex:0 0 auto; background:none; border-radius:0; }
.hd-fam__name{ font-size:16px; font-weight:700; color:var(--hd-ink); text-decoration:none; line-height:1.25; }
a.hd-fam__name:hover{ color:var(--hd-blue-d); }
.hd-fam__links{ padding-left:42px; display:flex; flex-direction:column; }
.hd-fam__links a, .hd-mega__links a{ display:block; font-size:15px; line-height:1.4; color:var(--hd-muted); padding:5px 0; text-decoration:none; }
.hd-fam__links a:hover, .hd-mega__links a:hover,
.hd-fam__links a:focus-visible, .hd-mega__links a:focus-visible{ color:var(--hd-blue-d); text-decoration:underline; }
.hd-mega__side{ display:flex; flex-direction:column; gap:24px; }
.hd-eyebrow{ display:block; font-size:13px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--hd-blue-d); }
.hd-mega__side > .hd-eyebrow{ border-bottom:1px solid #CFE6F6; padding-bottom:12px; }
.hd-mega__links{ display:flex; flex-direction:column; margin-top:-12px; }

/* bloc "Not sure where to start?" */
.hd-help{ background:var(--hd-ink); border-radius:16px; padding:24px; display:flex; flex-direction:column; gap:12px; }
.hd-help strong{ font-size:18px; line-height:1.25; color:#fff; font-weight:700; }
.hd-help span{ font-size:14px; line-height:1.55; color:#CBD5E1; }
.hd-help a{ height:44px; display:flex; align-items:center; justify-content:center; border-radius:10px; font-size:15px; font-weight:700; text-decoration:none; }
.hd-help__fill{ background:#fff; color:var(--hd-ink); margin-top:4px; }
.hd-help__fill:hover{ background:var(--hd-blue-l); color:var(--hd-ink); }
.hd-help__line{ border:1.5px solid #64748B; color:#fff; }
.hd-help__line:hover{ border-color:#fff; color:#fff; }

/* voile sous les menus ouverts */
.hd-backdrop{ position:fixed; inset:0; z-index:54; background:rgba(15,27,45,.40); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); opacity:0; visibility:hidden; transition:opacity .18s, visibility .18s; }
.hd-backdrop.is-open{ opacity:1; visibility:visible; }

/* ---------- barre mobile ---------- */
.hd-mob{ display:none; align-items:center; gap:4px; margin-left:auto; }
.hd-mob .hd-lang{ margin-right:6px; }
.hd-burger{ width:44px; height:44px; padding:0; border:0; background:transparent; color:var(--hd-ink); display:flex; align-items:center; justify-content:center; cursor:pointer; border-radius:10px; }
.hd-burger:hover{ background:var(--hd-blue-xl); }

/* ---------- menu mobile (drawer) ---------- */
.hd-drawer{ position:fixed; inset:0; z-index:120; background:#fff; display:none; flex-direction:column; color:var(--hd-ink);
  --hd-ink:#0F1B2D; --hd-muted:#475569; --hd-blue:#1890D8; --hd-blue-d:#1276B3; --hd-blue-l:#EAF4FB; --hd-blue-xl:#F4FAFE; --hd-line:#E5EEF6; --hd-line2:#DCE8F2; --hd-line3:#EEF3F8; }
.hd-drawer.is-open{ display:flex; }
.hd-drawer button{ font-family:inherit; }
.hd-drawer__top{ flex:0 0 64px; height:64px; padding:0 12px 0 20px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--hd-line); }
.hd-drawer__top > img{ width:118px; height:36px; object-fit:contain; object-position:left center; }
.hd-drawer__top .hd-mob{ display:flex; }
.hd-drawer__body{ flex:1; overflow:auto; -webkit-overflow-scrolling:touch; }
.hd-dnav{ padding:4px 20px 0; display:flex; flex-direction:column; }
.hd-dnav__top{ display:flex; align-items:center; justify-content:space-between; width:100%; min-height:58px; padding:0; border:0; border-bottom:1px solid var(--hd-line); background:none;
  font-size:18px; font-weight:700; color:var(--hd-ink); text-align:left; text-decoration:none; cursor:pointer; }
.hd-dnav__top--accent{ color:var(--hd-blue-d); }
.hd-dnav__top[aria-expanded="true"]{ color:var(--hd-blue-d); border-bottom-color:transparent; }
.hd-sign{ position:relative; width:14px; height:14px; flex:0 0 14px; }
.hd-sign::before, .hd-sign::after{ content:""; position:absolute; left:0; right:0; top:50%; height:2px; margin-top:-1px; background:currentColor; border-radius:1px; transition:transform .2s; }
.hd-sign::after{ transform:rotate(90deg); }
[aria-expanded="true"] > .hd-sign::after{ transform:rotate(0); }
.hd-dnav__panel{ display:none; background:var(--hd-blue-xl); border-radius:14px; padding:4px 14px; flex-direction:column; margin-bottom:8px; }
.hd-acc[aria-expanded="true"] + .hd-dnav__panel{ display:flex; }
.hd-dnav__grp{ display:flex; align-items:center; justify-content:space-between; width:100%; min-height:52px; padding:0; border:0; border-top:1px solid var(--hd-line3); background:none;
  font-size:16px; font-weight:700; color:var(--hd-ink); text-align:left; cursor:pointer; }
.hd-dnav__panel > .hd-dnav__grp:first-child{ border-top:0; }
.hd-dnav__grp[aria-expanded="true"]{ color:var(--hd-blue-d); }
.hd-dnav__grpname{ display:flex; align-items:center; gap:10px; }
.hd-dnav__grpname .hd-fam__ic{ color:var(--hd-blue); }
.hd-dnav__links{ display:none; flex-direction:column; padding:0 0 8px 28px; }
.hd-dnav__grp[aria-expanded="true"] + .hd-dnav__links{ display:flex; }
.hd-dnav__links a, .hd-dnav__about a, .hd-dnav__panel--list a{ display:flex; align-items:center; min-height:44px; font-size:15px; color:var(--hd-muted); text-decoration:none; }
.hd-dnav__links a:hover, .hd-dnav__about a:hover, .hd-dnav__panel--list a:hover{ color:var(--hd-blue-d); }
.hd-dnav__links a.hd-dnav__all{ font-weight:600; color:var(--hd-ink); }
.hd-dnav__about{ border-top:1px solid var(--hd-line2); padding:10px 0 6px; display:flex; flex-direction:column; }
.hd-dnav__about .hd-eyebrow{ font-size:12px; padding:6px 0; }
.hd-dnav__about a.hd-dnav__compare{ color:var(--hd-blue-d); font-weight:700; }
.hd-dnav__panel--list{ padding:6px 14px; }
.hd-help--drawer{ margin:20px; padding:22px; gap:10px; }
.hd-help--drawer a{ height:48px; font-size:16px; }
.hd-drawer__foot{ padding:0 20px 32px; display:flex; flex-direction:column; align-items:stretch; gap:10px; }
.hd-drawer__phone{ min-height:44px; display:flex; align-items:center; justify-content:center; gap:8px; font-size:16px; font-weight:700; color:var(--hd-ink); text-decoration:none; }
.hd-drawer__phone svg{ width:16px; height:16px; }
.hd-drawer__reviews{ display:flex; align-items:center; justify-content:center; gap:6px; font-size:14px; color:var(--hd-muted); text-decoration:none; padding-top:4px; }
.hd-drawer__reviews img{ width:15px; height:15px; }
.hd-drawer__reviews b{ color:var(--hd-ink); font-weight:800; }
.hd-stars{ color:#FBBC04; letter-spacing:.5px; }

/* ---------- responsive ---------- */
/* Largeur limitee comme l'ancien en-tete : contenu dans le conteneur du site (--maxw = 1280px, centre),
   fond et filet pleine largeur. Dans 1280px, reglages compacts (le menu tient sur une ligne, Trial lesson compris). */
@media (min-width:1280px){
  .hd-bar{ padding:0 max(24px, calc((100% - var(--maxw)) / 2 + 24px)); }
  .hd-brand img{ width:136px; }
  .hd-brand-sep{ margin-left:16px; }
  .hd-nav{ gap:16px; margin-left:16px; }
  .hd-nav__item{ font-size:14.5px; }
  .hd-nav__end{ gap:12px; }
  .hd-cta{ margin-left:14px; }
  .hd-btn{ padding:0 12px; font-size:14px; }
  .hd-mega__inner{ max-width:var(--maxw); padding:32px 24px 30px; gap:40px; }
}
/* tablette et mobile : barre compacte + menu plein ecran */
@media (max-width:1279px){
  .hd{ --hd-h:64px; }
  .hd-bar{ padding:0 12px 0 20px; }
  .hd-brand img{ width:118px; height:36px; }
  .hd-brand-sep, .hd-nav, .hd-cta{ display:none; }
  .hd-mob{ display:flex; }
  .hd-mega, .hd-backdrop{ display:none !important; }
}
@media (max-width:374px){
  .hd-bar, .hd-drawer__top{ padding-left:14px; padding-right:6px; }
  .hd-brand img, .hd-drawer__top > img{ width:100px; }
  .hd-mob .hd-lang{ margin-right:2px; }
  .hd-btn--sm{ padding:0 10px; font-size:13px; }
}
@media (prefers-reduced-motion:reduce){
  .hd-chev, .hd-sign::after, .hd-backdrop{ transition:none; }
}