/* ==========================================================
   KOHN INTERNATIONAL — Header CSS v7.0
   Standalone : aucune dépendance Bootstrap.
   Compatible avec le thème MAK25 Lots Pro.

   ══════════════════════════════════════════════════════════
   SYSTÈME OPTIQUE NAVIGATION — @property --nw

   Un seul paramètre numérique pilote SIMULTANÉMENT :
     · Taille apparente  → transform: scale()
     · Graisse optique   → filter: drop-shadow() (bloom)
     · Couleur (L, S)    → hsl() avec calc()
     · Opacité           → opacity

   Plage de --nw :
     −0.38 → dim     (frères rabattus quand un item est survolé)
      0    → repos   (état neutre)
      0.80 → courant (item actif, permanent)
      1    → survol  (item sous le curseur)

   Formules (calculées à chaque frame via @property) :
     scale   = calc(1    + var(--nw) × 0.055)
     L       = calc(52%  + var(--nw) × −30%)   → 63% | 52% | 28% | 22%
     S       = calc(38%  + var(--nw) ×  24%)   → 29% | 38% | 57% | 62%
     opacity = calc(.55  + var(--nw) ×  .45)   → .38 | .55 | .91 | 1
     bloom   = max(calc(var(--nw) × .35px), 0px)  (jamais négatif)

   Transition : `transition: --nw .28s ease` suffit.
   Le browser interpole --nw frame par frame → toutes les
   expressions calc() dérivées s'animent en lockstep parfait.

   Zéro reflow garanti : transform + filter + color + opacity
   sont toutes des propriétés GPU compositing — elles ne
   déplacent jamais les boîtes de mise en page.

   Dimming fraternal : :has(.nav-link:hover) + --nw: -0.38
   Chrome 105+ / Safari 15.4+ / Firefox 121+
   Fallback gracieux : état repos statique sur anciens navigateurs.

   Dark mode : seules les constantes changent (--nav-l0, --nav-ls…)
   Les formules restent identiques.

   CTA Panel :
     · .h-btn-cta  → gradient fill bas → haut (background-position)
     · .h-btn-ico  → même gradient, cohérence directionnelle
     · dark-toggle → inversé (plein ↔ vide), logique d'état explicite

   Badge BELGIQUE : PL = PR + ls (centrage optique ✓)
   ══════════════════════════════════════════════════════════ */


/* ──────────────────────────────────────────────────────────
   @property — rend --nw animable nativement
   syntax '<number>' permet les valeurs négatives (dim state).
   Chrome 85+ / Firefox 116+ / Safari 16.4+
   ────────────────────────────────────────────────────────── */
@property --nw {
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}


/* ──────────────────────────────────────────────────────────
   VARIABLES GLOBALES
   ────────────────────────────────────────────────────────── */
:root {

  /* Couleurs de structure */
  --c-line:        #224ca9;
  --c-btn:         #2970b1;
  --c-bg-header:   #ffffff;
  --c-bg-body:     #ffffff;
  --c-bg-panel:    #ffffff;
  --c-border:      #224ca9;
  --c-text-btn:    #2970b1;

  --f-kohn: 'mundial-narrow', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* ── Constantes du système --nw (light mode) ────────────
     Surcharger ces 6 vars en dark mode suffit.
     Formules dans les sélecteurs restent identiques.
     ────────────────────────────────────────────────────── */
  --nav-hue:  221;    /* teinte Kohn */

  --nav-l0:   52%;    /* L à --nw = 0 (repos) */
  --nav-ls:  -30%;    /* ΔL par unité de --nw  (+nw → plus sombre) */
  --nav-s0:   38%;    /* S à --nw = 0 */
  --nav-ss:   24%;    /* ΔS par unité de --nw */
  --nav-o0:    .55;   /* opacity à --nw = 0 */
  --nav-os:    .45;   /* Δopacity */

  /* États de --nw */
  --nw-dim:  -0.38;   /* frères rabattus */
  --nw-rest:  0;      /* repos */
  --nw-cur:   0.80;   /* item courant */
  --nw-hov:   1;      /* survol */

  /* Bloom (faux poids via drop-shadow) */
  --nav-bloom: 0.35px;

  /* Ampleur du scale */
  --nav-sc: 0.055;    /* × --nw → 1.055 au hover */

  /* Typographie nav — FIXE comme base,
     l'effet de taille vient du scale */
  --fs-nav:   14.5px;
  --fw-nav:   400;
  --ls-nav:   3px;

  /* CTA */
  --fs-label:  11.5px;
  --fw-label:  630;
  --ls-label:  2.5px;

  /* Badge */
  --fs-badge:  14.5px;
  --fw-badge:  350;
  --ls-badge:  6px;

  /* Icônes */
  --fs-ico:    12px;
  --fw-ico:    630;
  --ls-ico:    2px;
  --sz-icon:   15px;

  /* Boutons */
  --btn-h-cta: 43px;
  --btn-h-ico: 37px;
  --gap-btn:   5px;

  /* Layout */
  --logo-w:    220px;
  --cta-w:     285px;
  --h-px:      36px;
  --v-pad:     18px;

  --strip-h:        30px;
  --mobile-logo-h:  120px;
  --mobile-strip-h: 44px;

  /* Dropdown */
  --dropdown-bg:     #ffffff;
  --dropdown-shadow: 0 8px 32px rgba(34,76,169,.14),
                     0 2px 8px  rgba(34,76,169,.07);

  /* CTA transitions */
  --ease-fill: cubic-bezier(.4, 0, .2, 1);
  --dur-fill:  .38s;
  --dur-icon:  .32s;

  /* Nav transition */
  --t-nav:     .28s ease;

  /* Recherche */
  --search-z: 200;
}

/* ── Dark mode — uniquement les constantes changent ── */
[data-theme="dark"] {
  --c-line:        #5b8ac8;
  --c-btn:         #7aaee0;
  --c-bg-header:   #0d1826;
  --c-bg-body:     #091320;
  --c-bg-panel:    #0d1826;
  --c-border:      #2e4d7a;
  --c-text-btn:    #7aaee0;
  --dropdown-bg:   #0f1e35;
  --dropdown-shadow: 0 8px 32px rgba(0,0,0,.45);

  /* Constantes nav inversées :
     L monte avec --nw (texte s'éclaircit vers la lumière)
     ────────────────────────────────────────────────────── */
  --nav-l0:   64%;    /* repos dark */
  --nav-ls:   26%;    /* ΔL positif : s'éclaircit au hover */
  --nav-s0:   22%;
  --nav-ss:   18%;
  --nav-o0:    .40;
  --nav-os:    .60;
}

*,
*::before,
*::after { box-sizing: border-box; }
html { color-scheme: light dark; }
body { margin: 0; padding: 0; background: var(--c-bg-body); transition: background .35s ease; }


/* ──────────────────────────────────────────────────────────
   STRUCTURE HEADER
   ────────────────────────────────────────────────────────── */
.h-header {
  font-family: var(--f-kohn) !important;
  background: var(--c-bg-header) !important;
  position: relative;
  border-bottom: 1.5px solid var(--c-border);
  transition: background .35s ease, border-color .35s ease;
  padding: 0 !important;
  padding-top: var(--strip-h) !important;
  z-index: 100;
}

/* Ligne strip */
.h-header::before {
  content: '';
  position: absolute;
  top: calc(var(--strip-h) / 2 - 0.75px);
  left: var(--h-px); right: var(--h-px);
  height: 1.5px;
  background: var(--c-line);
  z-index: 10;
  transition: background .35s ease;
  pointer-events: none;
}

/* ── Badge « BELGIQUE »
   letter-spacing ajoute un espace trailing invisible.
   Centrage optique : PL = PR + ls
   PR = 22px → PL = calc(22px + var(--ls-badge))
   ────────────────────────────────────────────────────────── */
.h-header::after {
  content: attr(data-badge);
  position: absolute;
  top: calc((var(--strip-h) - 1.5em) / 2);
  left: 50%;
  transform: translateX(-50%);
  background: var(--c-btn);
  color: #ffffff;
  font-family: var(--f-kohn);
  font-size: var(--fs-badge);
  font-variation-settings: 'wght' var(--fw-badge);
  font-weight: 400;
  letter-spacing: var(--ls-badge);
  text-transform: uppercase;
  padding: 4px 22px 4px calc(22px + var(--ls-badge));
  white-space: nowrap;
  z-index: 11;
  pointer-events: none;
  line-height: 1.3;
  transition: background .35s ease;
}

/* Grid desktop */
.h-header .container-fluid {
  display: grid !important;
  grid-template-columns: var(--logo-w) 1fr var(--cta-w);
  grid-template-areas: "logo nav cta";
  align-items: center;
  padding: var(--v-pad) var(--h-px) !important;
  margin: 0 !important;
  max-width: none !important;
  column-gap: 0; row-gap: 0;
}


/* ──────────────────────────────────────────────────────────
   LOGO
   ────────────────────────────────────────────────────────── */
.h-header .navbar-brand {
  grid-area: logo;
  display: block !important;
  width: var(--logo-w);
  padding: 0 !important; margin: 0 !important;
  line-height: 0; flex-shrink: 0; text-decoration: none;
}
.h-header .h-logo-img {
  display: block; height: 108px; width: auto; max-width: none;
  flex-shrink: 0; transition: opacity .25s ease;
}
.h-header .navbar-brand:hover .h-logo-img { opacity: .82; }

.h-header .h-site-title-text {
  display: block; font-family: var(--f-kohn);
  font-variation-settings: 'wght' 700; font-size: 1.25rem;
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--c-text-btn); padding: 8px 0;
}


/* ──────────────────────────────────────────────────────────
   NAVIGATION — système --nw

   Toutes les propriétés visuelles sont des fonctions de --nw :

   color   : hsl(hue  calc(S0 + nw×Ss)  calc(L0 + nw×Ls))
   opacity : calc(o0 + nw × os)
   scale   : calc(1  + nw × 0.055)   ← taille apparente, zéro reflow
   bloom   : max(calc(nw × .35px), 0px)  ← faux poids via filter

   Une seule déclaration `transition: --nw .28s ease` anime tout.

   États  :
     repos   → --nw: 0      (défaut)
     courant → --nw: 0.80   (sur .nav-item.is-current)
     survol  → --nw: 1      (sur .nav-link:hover)
     dim     → --nw: −0.38  (via :has() quand un frère est survolé)
   ────────────────────────────────────────────────────────── */
.h-header .h-navbar {
  grid-area: nav;
  display: flex !important;
  align-items: center;
  padding: 0 !important; margin: 0 !important;
}

.h-header .h-navbar .navbar-nav {
  display: flex !important; flex-direction: row !important;
  align-items: center; justify-content: space-evenly;
  width: 100%; list-style: none;
  padding: 0 !important; margin: 0 !important;
}

.h-header .h-navbar .nav-item { position: relative; margin: 0; }

/* ── Base : --nw = 0 (repos) ── */
.h-header .h-navbar .nav-link {
  --nw: var(--nw-rest);   /* 0 */

  position: relative;
  display: flex; align-items: center; gap: 4px;

  /* ── Couleur dérivée de --nw ──
     L = L0 + nw × Ls   (s'assombrit quand nw monte)
     S = S0 + nw × Ss   (se sature quand nw monte)      */
  color: hsl(
    var(--nav-hue)
    calc(var(--nav-s0) + var(--nw) * var(--nav-ss))
    calc(var(--nav-l0) + var(--nw) * var(--nav-ls))
  ) !important;

  /* ── Opacité dérivée ── */
  opacity: calc(var(--nav-o0) + var(--nw) * var(--nav-os));

  /* ── Taille apparente via scale — ZÉRO reflow ──
     transform ne touche pas la boîte de mise en page.
     Les frères ne bougent jamais.                      */
  transform: scale(calc(1 + var(--nw) * var(--nav-sc)));
  transform-origin: center center;

  /* ── Graisse optique via bloom ──
     max() évite un rayon négatif en état dim            */
  filter: drop-shadow(
    0 0
    max(calc(var(--nw) * var(--nav-bloom)), 0px)
    currentColor
  );

  /* Typographie fixe */
  font-family: var(--f-kohn);
  font-size: var(--fs-nav) !important;
  font-variation-settings: 'wght' var(--fw-nav);
  font-weight: 400;
  letter-spacing: var(--ls-nav);
  text-transform: uppercase;
  padding: 5px 8px !important;
  text-decoration: none !important;
  white-space: nowrap; line-height: 1;
  background: none; border: none; cursor: pointer;

  /* ── UNE SEULE transition — anime tout ──
     @property interpole --nw → tous les calc() suivent  */
  transition: --nw var(--t-nav);
}

/* ── Courant : --nw = 0.80 ── */
.h-header .h-navbar .nav-item.is-current > .nav-link {
  --nw: var(--nw-cur);   /* 0.80 */
}

/* ── Survol : --nw = 1 ── */
.h-header .h-navbar .nav-link:hover {
  --nw: var(--nw-hov);   /* 1 */
}

/* ── DIMMING FRATERNAL via :has() ────────────────────────
   Quand un lien est survolé, le conteneur le détecte et
   pousse TOUS les liens (y compris le courant) vers --nw-dim.
   L'item survolé reprend --nw-hov par spécificité supérieure.

   À --nw = −0.38 :
     color   → plus clair, moins saturé (presque gris)
     opacity → ~.38 (effacé)
     scale   → ~.979 (imperceptiblement plus petit)
     filter  → 0 (bloom éteint, max clamp)

   Support : Chrome 105+ / Safari 15.4+ / Firefox 121+
   Fallback (anciens) : comportement repos statique
   ────────────────────────────────────────────────────────── */
.h-header .h-navbar .navbar-nav:has(.nav-link:hover) .nav-link {
  --nw: var(--nw-dim);   /* −0.38 */
}

/* L'item survolé reprend la pleine valeur */
.h-header .h-navbar .navbar-nav:has(.nav-link:hover) .nav-link:hover {
  --nw: var(--nw-hov);   /* 1 */
}


/* ──────────────────────────────────────────────────────────
   DROPDOWN DESKTOP
   ────────────────────────────────────────────────────────── */
.h-header .h-dropdown { position: relative; }

.h-dropdown-chevron {
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: none; padding: 0 0 0 3px;
  cursor: pointer; color: inherit; line-height: 1; vertical-align: middle;
  transition: transform .22s ease;
}
.h-header .h-dropdown.is-open .h-dropdown-chevron { transform: rotate(180deg); }

.h-dropdown-menu {
  position: absolute; top: calc(100% + 12px); left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 220px; background: var(--dropdown-bg);
  border: 1.5px solid var(--c-border); box-shadow: var(--dropdown-shadow);
  list-style: none; margin: 0; padding: 6px 0; z-index: 500;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.h-dropdown-menu::before {
  content: ''; position: absolute; top: -7px; left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent; border-top: none;
  border-bottom-color: var(--c-border);
}
.h-dropdown-menu::after {
  content: ''; position: absolute; top: -5px; left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent; border-top: none;
  border-bottom-color: var(--dropdown-bg);
}
.h-header .h-dropdown.is-open > .h-dropdown-menu {
  opacity: 1; visibility: visible;
  transform: translateX(-50%) translateY(0); pointer-events: auto;
}

/* Items dropdown — même logique --nw simplifiée */
.h-dropdown-item {
  --nw: 0;
  display: block; padding: 10px 20px;
  font-family: var(--f-kohn); font-size: var(--fs-nav);
  font-variation-settings: 'wght' 400; letter-spacing: var(--ls-nav);
  text-transform: uppercase; text-decoration: none !important;
  white-space: nowrap; line-height: 1.2;

  color: hsl(
    var(--nav-hue)
    calc(var(--nav-s0) + var(--nw) * var(--nav-ss))
    calc(var(--nav-l0) + var(--nw) * var(--nav-ls))
  ) !important;
  opacity: calc(var(--nav-o0) + var(--nw) * var(--nav-os));
  filter: drop-shadow(0 0 max(calc(var(--nw) * .28px), 0px) currentColor);

  transition: --nw .2s ease, background .15s ease;
}
.h-dropdown-item:hover {
  --nw: var(--nw-hov);
  background: rgba(41,112,177,.07);
}
[data-theme="dark"] .h-dropdown-item:hover { background: rgba(122,174,224,.1); }


/* ──────────────────────────────────────────────────────────
   CTA PANEL — fill directionnel BAS → HAUT

   gradient 100% × 200% (hauteur double).
   background-position glisse sur l'axe Y :
     repos  → 0 0     (partie haute = transparent)
     hover  → 0 100%  (partie basse = colorée monte ↑)

   .h-btn-ico--dark-toggle : inversé logiquement.
   ────────────────────────────────────────────────────────── */
.h-cta-panel {
  grid-area: cta;
  display: flex; flex-direction: column;
  align-items: stretch; align-self: center;
  gap: var(--gap-btn); width: 100%;
}

.h-btn-cta {
  display: flex; align-items: center; gap: 11px;
  width: 100%; height: var(--btn-h-cta);
  border: 1.5px solid var(--c-btn);

  background-image: linear-gradient(to top, var(--c-btn) 50%, transparent 50%);
  background-size: 100% 200%;
  background-position: 0 0;

  color: var(--c-text-btn);
  font-family: var(--f-kohn);
  font-size: var(--fs-label);
  font-variation-settings: 'wght' var(--fw-label);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  padding: 0 13px;
  text-decoration: none; white-space: nowrap; cursor: pointer; line-height: 1;

  transition:
    background-position var(--dur-fill) var(--ease-fill),
    color               .22s            ease,
    border-color        .35s            ease;
}
.h-btn-cta:hover { background-position: 0 100%; color: #ffffff; text-decoration: none; }
.h-btn-cta svg {
  width: var(--sz-icon); height: var(--sz-icon);
  flex-shrink: 0; color: inherit; stroke: currentColor;
  transition: color .22s ease;
}

/* Rangée d'icônes */
.h-cta-icons { display: flex; gap: var(--gap-btn); width: 100%; }

.h-cta-icons .h-btn-ico {
  width: 100%; flex: 1 1 0;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  height: var(--btn-h-ico);
  border: 1.5px solid var(--c-btn);

  background-image: linear-gradient(to top, var(--c-btn) 50%, transparent 50%);
  background-size: 100% 200%;
  background-position: 0 0;

  color: var(--c-text-btn);
  font-family: var(--f-kohn);
  font-size: var(--fs-ico);
  font-variation-settings: 'wght' var(--fw-ico);
  font-weight: 600;
  letter-spacing: var(--ls-ico);
  text-transform: uppercase;
  padding: 0; white-space: nowrap; cursor: pointer; line-height: 1;
  border-radius: 0; outline: none;

  transition:
    background-position var(--dur-icon) var(--ease-fill),
    color               .22s            ease,
    border-color        .35s            ease;
}
.h-cta-icons .h-btn-ico:hover { background-position: 0 100%; color: #ffffff; }
.h-cta-icons .h-btn-ico svg {
  width: var(--sz-icon); height: var(--sz-icon);
  flex-shrink: 0; color: inherit; stroke: currentColor;
  transition: color .22s ease;
}

/* Dark-toggle : inversé — déjà plein au repos */
.h-cta-icons .h-btn-ico--dark-toggle {
  background-position: 0 100%;   /* plein */
  color: #ffffff;
}
.h-cta-icons .h-btn-ico--dark-toggle:hover {
  background-position: 0 0;      /* se vide vers le bas */
  color: var(--c-text-btn);
}

/* Dark mode — toggle logiquement inversé (mode sombre = déjà actif) */
[data-theme="dark"] .h-cta-icons .h-btn-ico--dark-toggle {
  background-position: 0 0;      /* vide */
  color: var(--c-text-btn);
}
[data-theme="dark"] .h-cta-icons .h-btn-ico--dark-toggle:hover {
  background-position: 0 100%;   /* se remplit */
  color: #ffffff;
}


/* ──────────────────────────────────────────────────────────
   DROPDOWN LANGUE
   ────────────────────────────────────────────────────────── */
.h-lang-wrap { position: relative; }

.h-lang-dropdown {
  position: absolute; bottom: calc(100% + 8px); left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--dropdown-bg);
  border: 1.5px solid var(--c-border); box-shadow: var(--dropdown-shadow);
  min-width: 120px; padding: 6px 0; z-index: 600;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.h-lang-dropdown[aria-hidden="false"],
.h-lang-wrap.is-open .h-lang-dropdown {
  opacity: 1; visibility: visible;
  transform: translateX(-50%) translateY(0); pointer-events: auto;
}
.h-lang-dropdown .mak-lang-switcher      { display: block; }
.h-lang-dropdown .mak-lang-switcher-list { flex-direction: column; border: none; border-radius: 0; background: transparent; }
.h-lang-dropdown .mak-lang-switcher-item { border-right: none; border-bottom: 1px solid rgba(34,76,169,.1); }
.h-lang-dropdown .mak-lang-switcher-item:last-child { border-bottom: none; }
.h-lang-dropdown .mak-lang-switcher-item a,
.h-lang-dropdown .mak-lang-switcher-item span {
  display: block; padding: 9px 16px;
  font-family: var(--f-kohn); font-size: var(--fs-ico); letter-spacing: var(--ls-ico);
  text-decoration: none;
  color: hsl(var(--nav-hue) var(--nav-s0) var(--nav-l0));
  transition: color .2s ease;
}
.h-lang-dropdown .mak-lang-switcher-item a:hover {
  color: hsl(
    var(--nav-hue)
    calc(var(--nav-s0) + 1 * var(--nav-ss))
    calc(var(--nav-l0) + 1 * var(--nav-ls))
  );
}
.h-lang-dropdown .mak-lang-switcher-item.is-active span { background: var(--c-btn); color: #ffffff; }


/* ──────────────────────────────────────────────────────────
   BURGER
   ────────────────────────────────────────────────────────── */
.h-burger {
  display: none;
  align-items: center; justify-content: center;
  width: 44px; height: 44px;
  background: transparent; border: none; cursor: pointer; padding: 0;
  box-shadow: none; outline: none;
  color: var(--c-btn); flex-shrink: 0;
  transition: color .2s ease;
}
.h-burger:hover { color: var(--c-line); }
.h-burger svg { width: 22px; height: 22px; color: inherit; stroke: currentColor; }

.h-burger-icon            { display: flex; align-items: center; justify-content: center; }
.h-burger-icon--times     { display: none; }
.h-burger.is-open .h-burger-icon--bars  { display: none; }
.h-burger.is-open .h-burger-icon--times { display: flex; }


/* ──────────────────────────────────────────────────────────
   PANNEAU MOBILE
   ────────────────────────────────────────────────────────── */
.h-mobile-panel {
  display: none;
  position: absolute; top: 100%; left: 0; right: 0;
  background: var(--c-bg-panel);
  border-bottom: 1.5px solid var(--c-border);
  z-index: 999; overflow: hidden; max-height: 0;
  transition: max-height .38s cubic-bezier(.4,0,.2,1), background .35s ease, border-color .35s ease;
}
.h-mobile-panel.is-open { max-height: 85vh; overflow-y: auto; overscroll-behavior: contain; }
.h-mobile-panel__inner { padding: 8px var(--h-px) 24px; }


/* ── Navigation mobile — même système --nw, items centrés ── */
.h-mobile-nav { list-style: none; margin: 0 0 16px; padding: 0; }

.h-mobile-nav-item { border-bottom: 1px solid rgba(34,76,169,.09); }
[data-theme="dark"] .h-mobile-nav-item { border-bottom-color: rgba(91,138,200,.13); }
.h-mobile-nav-item.is-sub { border-bottom: none; }
.h-mobile-nav-row { display: flex; align-items: center; justify-content: center; }

.h-mobile-nav-link {
  --nw: var(--nw-rest);

  display: flex; align-items: center; justify-content: center; flex: 1;
  text-align: center;

  color: hsl(
    var(--nav-hue)
    calc(var(--nav-s0) + var(--nw) * var(--nav-ss))
    calc(var(--nav-l0) + var(--nw) * var(--nav-ls))
  );
  opacity: calc(var(--nav-o0) + var(--nw) * var(--nav-os));
  transform: scale(calc(1 + var(--nw) * var(--nav-sc)));
  filter: drop-shadow(0 0 max(calc(var(--nw) * var(--nav-bloom)), 0px) currentColor);

  font-family: var(--f-kohn);
  font-size: var(--fs-nav);
  font-variation-settings: 'wght' var(--fw-nav);
  letter-spacing: var(--ls-nav); text-transform: uppercase;
  text-decoration: none; padding: 18px 8px; line-height: 1;

  transition: --nw var(--t-nav);
}

.h-mobile-nav-link:hover       { --nw: var(--nw-hov); }

.is-current > .h-mobile-nav-link,
.is-current > .h-mobile-nav-row .h-mobile-nav-link { --nw: var(--nw-cur); }

/* Dimming fraternal mobile */
.h-mobile-nav:has(.h-mobile-nav-link:hover) .h-mobile-nav-link {
  --nw: var(--nw-dim);
}
.h-mobile-nav:has(.h-mobile-nav-link:hover) .h-mobile-nav-link:hover {
  --nw: var(--nw-hov);
}

/* Accordéon */
.h-mobile-accordion-btn {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; background: none; border: none; cursor: pointer;
  color: hsl(var(--nav-hue) var(--nav-s0) var(--nav-l0));
  padding: 0; flex-shrink: 0; transition: transform .25s ease;
}
.h-mobile-accordion-btn[aria-expanded="true"] { transform: rotate(180deg); }
.h-mobile-accordion-btn svg { width: 14px; height: 14px; stroke: currentColor; }

.h-mobile-submenu { list-style: none; margin: 0; padding: 0 0 4px 16px; overflow: hidden; max-height: 0; transition: max-height .3s ease; }
.h-mobile-submenu.is-open { max-height: 600px; }
.h-mobile-submenu .h-mobile-nav-item { border-bottom: none; }
.h-mobile-submenu .h-mobile-nav-link { font-size: calc(var(--fs-nav) - 0.5px); padding: 12px 8px; }

/* CTA mobile */
.h-mobile-cta { display: flex; flex-direction: column; gap: var(--gap-btn); margin-bottom: var(--gap-btn); }
.h-mobile-cta .h-btn-cta { justify-content: flex-start; }

/* Icônes mobile */
.h-mobile-icons { display: flex; gap: var(--gap-btn); }
.h-mobile-icons .h-btn-ico { flex: 1 1 0; }


/* ──────────────────────────────────────────────────────────
   PANNEAU RECHERCHE
   ────────────────────────────────────────────────────────── */
.h-search-panel {
  display: none; position: fixed; inset: 0; z-index: var(--search-z, 200);
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  align-items: flex-start; justify-content: center;
  padding-top: 80px; opacity: 0; transition: opacity .25s ease;
}
.h-search-panel.is-open { display: flex; opacity: 1; }
.h-search-panel__inner {
  position: relative; background: var(--c-bg-panel);
  border: 1.5px solid var(--c-border); padding: 24px;
  width: min(600px, calc(100vw - 48px));
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
}
.h-search-panel .search-form { display: flex; gap: 8px; }
.h-search-panel .search-form label { flex: 1; margin: 0; }
.h-search-panel .search-form input[type="search"] {
  width: 100%; border: 1.5px solid var(--c-border); background: transparent;
  color: hsl(var(--nav-hue) calc(var(--nav-s0) + 1 * var(--nav-ss)) calc(var(--nav-l0) + 1 * var(--nav-ls)));
  font-family: var(--f-kohn); font-size: var(--fs-nav);
  letter-spacing: var(--ls-nav); padding: 10px 14px; outline: none;
}
.h-search-panel .search-form input[type="search"]:focus { border-color: var(--c-btn); }
.h-search-panel .search-form .search-submit {
  background: var(--c-btn); color: #fff; border: none; padding: 0 20px;
  font-family: var(--f-kohn); font-size: var(--fs-label);
  font-variation-settings: 'wght' var(--fw-label); letter-spacing: var(--ls-label);
  text-transform: uppercase; cursor: pointer; transition: background .2s ease;
}
.h-search-panel .search-form .search-submit:hover { background: var(--c-line); }
.h-search-close {
  position: absolute; top: 12px; right: 12px; background: none; border: none;
  cursor: pointer; color: hsl(var(--nav-hue) var(--nav-s0) var(--nav-l0));
  padding: 4px; display: flex; align-items: center; justify-content: center;
  transition: opacity .18s ease;
}
.h-search-close:hover { opacity: .6; }
.h-search-close svg { width: 18px; height: 18px; stroke: currentColor; }


/* ──────────────────────────────────────────────────────────
   FOCUS VISIBLE
   ────────────────────────────────────────────────────────── */
.h-btn-cta:focus-visible,
.h-btn-ico:focus-visible,
.h-burger:focus-visible,
.h-mobile-nav-link:focus-visible,
.h-mobile-accordion-btn:focus-visible,
.h-dropdown-item:focus-visible,
.h-header .h-navbar .nav-link:focus-visible {
  outline: 2px solid var(--c-btn);
  outline-offset: 2px;
}

/* Utilitaires */
.h-header .h-navbar-secondary { display: none !important; }
.h-header .h-site-search      { display: none !important; }


/* ══════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════ */

@media (max-width: 991.98px) {
  .h-header { padding-top: 0 !important; padding-bottom: var(--mobile-strip-h) !important; }
  .h-header::before { top: auto; bottom: calc(var(--mobile-strip-h) / 2 - 0.75px); left: 0; right: 0; }

  /* Badge 992px : ls=7px → PL = 24+7 = 31px */
  .h-header::after {
    top: auto; bottom: calc((var(--mobile-strip-h) - 1.5em) / 2);
    transform: translateX(-50%);
    font-size: 16px; letter-spacing: 7px;
    padding: 5px 24px 5px 31px;
  }

  .h-header .container-fluid {
    display: flex !important; align-items: center; justify-content: space-between;
    padding: 14px 24px !important;
    grid-template-columns: unset; grid-template-areas: unset;
  }
  .h-header .navbar-brand { order: 0 !important; width: auto; overflow: visible; }
  .h-header .h-logo-img   { height: var(--mobile-logo-h); width: auto; max-width: none; }
  .h-header .h-navbar     { display: none !important; }
  .h-cta-panel            { display: none !important; }
  .h-burger               { display: flex !important; order: 1 !important; }
  .h-mobile-panel         { display: block; }
}

@media (max-width: 480px) {
  .h-header .h-logo-img      { height: 88px; }
  .h-header .container-fluid { padding: 10px 20px !important; }
  /* Badge 480px : ls=5px → PL = 22+5 = 27px */
  .h-header::after { font-size: 13px; letter-spacing: 5px; padding: 5px 22px 5px 27px; }
}


/* ══════════════════════════════════════════════════════════
   RÉDUCTION DE MOUVEMENT
   ══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .h-header, .h-header::after,
  .h-mobile-panel, .h-dropdown-menu, .h-lang-dropdown, .h-search-panel,
  .h-btn-cta, .h-btn-ico, .h-burger, .h-mobile-accordion-btn, .h-mobile-submenu,
  .h-logo-img, .h-header .h-navbar .nav-link, .h-mobile-nav-link, .h-dropdown-item {
    transition: none !important;
    animation: none !important;
  }
}