/* =========================================================
   Transfert — header.css (FINAL / NETTOYÉ)
   ✅ Stable sur toutes les pages (padding / police / épaisseur)
   ✅ Compatible styles.css (tokens + tr-container)
   ✅ Tablet: masque topbar__right pour laisser respirer le menu
   ✅ Mobile: burger fiable même si le thème force l'affichage
   ✅ Active state: WP classes + aria-current + is-active (Accueil OK)
   ✅ Actif futuriste: glow + scanline (scintille) sans changer l'épaisseur
   ========================================================= */

/* -------------------------
   0) VARIABLES HEADER (figées)
-------------------------- */
:root{
  --topbarH: 74px;

  /* Police/track header verrouillés */
  --header-font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --header-track: 0.15px;

  /* Menu (desktop) */
  --nav-fs: 13px;
  --nav-py: 10px;
  --nav-px: 12px;

  /* Boutons (tel/lang) */
  --btn-fs: 13px;
  --btn-py: 10px;
  --btn-px: 12px;

  /* Padding interne topbar */
  --topbar-py: 14px;
  --topbar-px: 18px;

  /* Header width */
  --header-max: 1600px;
  --header-edge: clamp(12px, 2vw, 26px);
}

/* -------------------------
   1) WRAPPER TOPBAR
-------------------------- */
header.topbar{
  position: sticky;
  top: 0;
  z-index: 10000;

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  background: rgba(7,10,18,.58);
  border-bottom: 1px solid rgba(255,255,255,.08);

  font-family: var(--header-font);
  letter-spacing: var(--header-track);
}

header.topbar .tr-container{
  width: 100%;
  max-width: var(--header-max);
  margin: 0 auto;
  padding-left: var(--header-edge);
  padding-right: var(--header-edge);
  box-sizing: border-box;
}

header.topbar .topbar__inner{
  position: relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 16px;

  min-height: var(--topbarH);
  padding: var(--topbar-py) var(--topbar-px);
  box-sizing: border-box;
}

/* -------------------------
   2) BRAND
-------------------------- */
header.topbar .brand{
  display:flex;
  align-items:center;
  gap: 12px;
  min-width: 0;
}

header.topbar .brand__logo{
  width: 46px;
  height: 46px;
  object-fit: contain;
  object-position:center;
  padding: 6px;
  border-radius: 16px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 16px 45px rgba(0,0,0,.35), 0 0 0 1px rgba(0,209,255,.10);
}

header.topbar .brand__txt{
  display:flex;
  flex-direction:column;
  gap: 2px;
  min-width: 0;
  color: #C45831;
}

header.topbar .brand__txt strong{
  font-weight: 950;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}

header.topbar .brand__txt span{
  display:flex;
  align-items:center;
  gap: 8px;
  color: rgba(255,255,255,.70);
  font-size: 13px;
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}

header.topbar .brand__flag{
  width: 18px;
  height: 18px;
  border-radius: 6px;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,.12);
  flex: 0 0 auto;
}

/* -------------------------
   3) NAV (DESKTOP)
-------------------------- */
header.topbar nav.nav{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap: nowrap;
  min-width: 0;
}

header.topbar nav.nav > a{
  position: relative;            /* ✅ nécessaire pour l'effet actif */
  display:inline-flex;
  align-items:center;
  gap: 10px;

  padding: var(--nav-py) var(--nav-px);
  border-radius: 999px;

  font-weight: 950;
  font-size: var(--nav-fs);
  line-height: 1;                /* ✅ évite variations d'épaisseur */
  white-space: nowrap;

  color: rgba(255,255,255,.86);
  border: 1px solid transparent;
  background: rgba(255,255,255,.03);

  box-sizing: border-box;
  transition: background .15s ease, border-color .15s ease, transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

header.topbar nav.nav > a:hover{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.10);
  transform: translateY(-1px);
}

header.topbar nav.nav > a i{
  font-size: 15px;
  opacity: .95;
}

/* -------------------------
   3bis) ACTIVE SELECTORS (WP + ARIA + HOME FIX)
   -> ton Accueil n’a pas de class => on le force via body.home/front-page + href
-------------------------- */

/* WP classiques (si un jour tu as des <li>) */
header.topbar nav.nav > a.is-active,
header.topbar nav.nav > a[aria-current="page"],
header.topbar nav.nav > a[aria-current="true"],
header.topbar nav.nav > a.current-menu-item,
header.topbar nav.nav > a.current_page_item,
header.topbar nav.nav > a.current_page_parent,
header.topbar nav.nav > a.current-menu-ancestor,
header.topbar nav.nav > a.current-menu-parent{
  /* styles appliqués plus bas via le bloc "ACTIVE FUTURISTE" */
}

/* ✅ FIX Accueil (front-page/home) :
   adapte si ton domaine change, mais là on couvre:
   - href="/"
   - href="https://transfert.re/"
   - href="https://transfert.re"
*/
body.home header.topbar nav.nav > a[href="/"],
body.front-page header.topbar nav.nav > a[href="/"],
body.home header.topbar nav.nav > a[href="https://transfert.re/"],
body.front-page header.topbar nav.nav > a[href="https://transfert.re/"],
body.home header.topbar nav.nav > a[href="https://transfert.re"],
body.front-page header.topbar nav.nav > a[href="https://transfert.re"]{
  /* styles appliqués plus bas via le bloc "ACTIVE FUTURISTE" */
}

/* -------------------------
   3ter) ACTIVE FUTURISTE (SCINTILLE)
   ✅ ne change PAS padding / line-height => pas de shift
-------------------------- */
@keyframes trNavGlow {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(0,209,255,0)); }
  50%      { filter: drop-shadow(0 0 10px rgba(0,209,255,.28)); }
}
@keyframes trNavScan {
  0%   { transform: translateX(-120%) skewX(-18deg); opacity: 0; }
  20%  { opacity: .9; }
  60%  { opacity: .6; }
  100% { transform: translateX(140%) skewX(-18deg); opacity: 0; }
}

header.topbar nav.nav > a.is-active,
header.topbar nav.nav > a[aria-current="page"],
header.topbar nav.nav > a[aria-current="true"],
body.home header.topbar nav.nav > a[href="/"],
body.front-page header.topbar nav.nav > a[href="/"],
body.home header.topbar nav.nav > a[href="https://transfert.re/"],
body.front-page header.topbar nav.nav > a[href="https://transfert.re/"],
body.home header.topbar nav.nav > a[href="https://transfert.re"],
body.front-page header.topbar nav.nav > a[href="https://transfert.re"]{
  background: linear-gradient(135deg, rgba(46,233,166,.22), rgba(0,209,255,.18), rgba(124,92,255,.18));
  border-color: rgba(0,209,255,.36);
  box-shadow:
    0 0 0 1px rgba(0,209,255,.14),
    0 14px 40px rgba(0,0,0,.35);
  color: rgba(255,255,255,.96);
  animation: trNavGlow 2.2s ease-in-out infinite;
}

header.topbar nav.nav > a.is-active::before,
header.topbar nav.nav > a[aria-current="page"]::before,
header.topbar nav.nav > a[aria-current="true"]::before,
body.home header.topbar nav.nav > a[href="/"]::before,
body.front-page header.topbar nav.nav > a[href="/"]::before,
body.home header.topbar nav.nav > a[href="https://transfert.re/"]::before,
body.front-page header.topbar nav.nav > a[href="https://transfert.re/"]::before,
body.home header.topbar nav.nav > a[href="https://transfert.re"]::before,
body.front-page header.topbar nav.nav > a[href="https://transfert.re"]::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: inherit;
  pointer-events:none;
  background:
    radial-gradient(120px 60px at 20% 40%, rgba(0,209,255,.22), transparent 70%),
    radial-gradient(140px 80px at 75% 20%, rgba(124,92,255,.18), transparent 70%);
  opacity: .85;
}

header.topbar nav.nav > a.is-active::after,
header.topbar nav.nav > a[aria-current="page"]::after,
header.topbar nav.nav > a[aria-current="true"]::after,
body.home header.topbar nav.nav > a[href="/"]::after,
body.front-page header.topbar nav.nav > a[href="/"]::after,
body.home header.topbar nav.nav > a[href="https://transfert.re/"]::after,
body.front-page header.topbar nav.nav > a[href="https://transfert.re/"]::after,
body.home header.topbar nav.nav > a[href="https://transfert.re"]::after,
body.front-page header.topbar nav.nav > a[href="https://transfert.re"]::after{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: inherit;
  pointer-events:none;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,.12) 35%,
    rgba(0,209,255,.20) 50%,
    rgba(255,255,255,.10) 65%,
    transparent 100%
  );
  mix-blend-mode: screen;
  opacity: .75;
  animation: trNavScan 1.8s ease-in-out infinite;
}

/* -------------------------
   4) RIGHT (TEL + LANG)
-------------------------- */
header.topbar .topbar__right{
  display:flex;
  align-items:center;
  gap: 10px;
  flex: 0 0 auto;
}

header.topbar .tel,
header.topbar .cta{
  display:inline-flex;
  align-items:center;
  gap: 10px;

  padding: var(--btn-py) var(--btn-px);
  border-radius: 999px;

  font-weight: 950;
  font-size: var(--btn-fs);
  line-height: 1;
  white-space: nowrap;

  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.92);
  box-sizing: border-box;
}

header.topbar .tel:hover{ background: rgba(255,255,255,.07); }

header.topbar .cta{
  background: linear-gradient(135deg, rgba(46,233,166,.95), rgba(0,209,255,.95));
  color: #071018;
  border-color: rgba(0,209,255,.30);
  box-shadow: 0 18px 45px rgba(0,209,255,.12);
}
header.topbar .cta:hover{ filter: brightness(1.03); }

/* Lang */
header.topbar .langSwitch{
  display:flex;
  align-items:center;
  gap: 8px;
}

header.topbar .langBtn{
  width: 34px;
  height: 28px;
  border-radius: 10px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  display:grid;
  place-items:center;
  transition: transform .15s ease, border-color .15s ease;
}

header.topbar .langBtn img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
}

header.topbar .langBtn:hover{ transform: translateY(-1px); }
header.topbar .langBtn.is-active{ border-color: rgba(0,209,255,.35); }

/* -------------------------
   5) BURGER / MENU MOBILE
-------------------------- */
header.topbar .navToggle{ position:absolute; left:-9999px; }

header.topbar .menuBtn{
  display:none;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.92);
  font-weight: 950;
  cursor:pointer;
  user-select:none;
  z-index: 10002;
}

header.topbar .menuBtn__kicker{
  font-size: 11px;
  letter-spacing: .14em;
  opacity: .8;
}

header.topbar .menuBtn__icon{
  width: 34px;
  height: 28px;
  border-radius: 12px;
  display:grid;
  place-items:center;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.10);
}
header.topbar .menuBtn__icon i{ font-size: 18px; }

/* =========================================================
   TABLET / DESKTOP COMPACT
   ✅ topbar__right reste visible (jusqu'à 980px)
   ✅ le menu respire: nav plus compact + wrap intelligent
   ========================================================= */

/* 1) On compacte progressivement le header (sans toucher :root) */
@media (max-width: 1350px){
  header.topbar{
    --topbar-px: 12px;     /* padding interne plus petit */
    --nav-fs: 12px;
    --nav-py: 9px;
    --nav-px: 10px;

    --btn-fs: 12px;
    --btn-py: 9px;
    --btn-px: 10px;
  }

  /* menu peut wrap si besoin, au lieu d'écraser */
  header.topbar nav.nav{
    flex-wrap: wrap;
    row-gap: 8px;
    column-gap: 8px;
  }

  /* donne la priorité d'espace au menu */
  header.topbar nav.nav{ flex: 1 1 auto; }
  header.topbar .brand{ flex: 0 0 auto; }
  header.topbar .topbar__right{ flex: 0 0 auto; }

  /* évite que le nav fasse des lignes trop hautes */
  header.topbar nav.nav > a{ line-height: 1; }
}

/* 2) Compact “right” seulement quand ça devient serré (mais encore desktop) */
@media (max-width: 1180px){
  /* on garde le right VISIBLE, mais plus compact */
  header.topbar .tel span,
  header.topbar .cta span{
    display:none;
  }

  header.topbar .tel,
  header.topbar .cta{
    width: 42px;
    height: 42px;
    padding: 0;
    justify-content:center;
    border-radius: 16px;
  }

  /* petites optimisations d'espace */
  header.topbar .topbar__right{ gap: 8px; }
  header.topbar nav.nav{ column-gap: 8px; }
}

@media (max-width: 1350px){
  header.topbar nav.nav{
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  header.topbar nav.nav::-webkit-scrollbar{ display:none; }
}
/* -------------------------
   7) MOBILE (< 980px)
-------------------------- */
@media (max-width: 980px){
  header.topbar .menuBtn{ display:inline-flex; }

  header.topbar nav.nav{
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;

    display: none !important;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;

    padding: 14px;
    background: rgba(7,10,18,.92);
    border-bottom: 1px solid rgba(255,255,255,.10);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    z-index: 10001;
  }

  header.topbar nav.nav > a{
    justify-content: space-between;
    border-radius: 16px;
    padding: 12px 12px;
    background: rgba(255,255,255,.04);
  }

  header.topbar #navToggle:checked ~ nav.nav{
    display:flex !important;
  }

  header.topbar .tel span,
  header.topbar .cta span{ display:none; }

  header.topbar .tel,
  header.topbar .cta{
    width: 42px;
    height: 42px;
    padding: 0;
    justify-content:center;
    border-radius: 16px;
  }
}


/* ✅ NAV: on isole chaque item pour éviter que l'effet déborde */
header.topbar nav.nav{
  gap: 10px;
}

header.topbar nav.nav > a{
  position: relative;
  isolation: isolate;          /* ✅ coupe le blend à l’intérieur du bouton */
  overflow: hidden;            /* ✅ coupe les effets (scanline) dans le pill */
  z-index: 0;
}

/* ✅ Effet actif: on garde l'effet DANS le bouton (pas dehors) */
header.topbar nav.nav > a.is-active,
header.topbar nav.nav > a[aria-current="page"],
header.topbar nav.nav > a[aria-current="true"],
body.home header.topbar nav.nav > a[href="/"],
body.front-page header.topbar nav.nav > a[href="/"],
body.home header.topbar nav.nav > a[href="https://transfert.re/"],
body.front-page header.topbar nav.nav > a[href="https://transfert.re/"],
body.home header.topbar nav.nav > a[href="https://transfert.re"],
body.front-page header.topbar nav.nav > a[href="https://transfert.re"]{
  z-index: 1;                  /* ✅ passe au-dessus des voisins */
  box-shadow:
    0 0 0 1px rgba(0,209,255,.14),
    0 10px 26px rgba(0,0,0,.28); /* ✅ shadow plus soft (évite “débordement”) */
}

/* ✅ scanline + glow strictement internes */
header.topbar nav.nav > a.is-active::before,
header.topbar nav.nav > a[aria-current="page"]::before,
header.topbar nav.nav > a[aria-current="true"]::before,
body.home header.topbar nav.nav > a[href="/"]::before,
body.front-page header.topbar nav.nav > a[href="/"]::before,
body.home header.topbar nav.nav > a[href="https://transfert.re/"]::before,
body.front-page header.topbar nav.nav > a[href="https://transfert.re/"]::before,
body.home header.topbar nav.nav > a[href="https://transfert.re"]::before,
body.front-page header.topbar nav.nav > a[href="https://transfert.re"]::before{
  inset: 0;                    /* ✅ PAS -1px => pas de débordement */
}

header.topbar nav.nav > a.is-active::after,
header.topbar nav.nav > a[aria-current="page"]::after,
header.topbar nav.nav > a[aria-current="true"]::after,
body.home header.topbar nav.nav > a[href="/"]::after,
body.front-page header.topbar nav.nav > a[href="/"]::after,
body.home header.topbar nav.nav > a[href="https://transfert.re/"]::after,
body.front-page header.topbar nav.nav > a[href="https://transfert.re/"]::after,
body.home header.topbar nav.nav > a[href="https://transfert.re"]::after,
body.front-page header.topbar nav.nav > a[href="https://transfert.re"]::after{
  inset: 0;                    /* ✅ PAS -1px => pas de débordement */
  opacity: .55;                /* ✅ scanline plus légère */
}