/*
 * Nav — barre de navigation fixe (header.php), commune à toutes les pages
 * du site (accueil + pages profondes). Historiquement dans home.css et
 * chargée uniquement sur is_front_page() : dès la création des premières
 * pages profondes (mentions légales, politique de confidentialité), la nav
 * y apparaissait donc totalement non stylée (pas de position fixe, pas de
 * menu hamburger fonctionnel). Extrait ici pour être chargé sur tout le
 * site — voir bcc_enqueue_assets() dans functions.php.
 */

.bcc-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 900;
  background: rgba(249,246,241,0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transform: translateY(0);
  transition: background .3s, border-color .3s, box-shadow .3s, transform .42s cubic-bezier(.4,0,.2,1);
}
.bcc-nav--scrolled {
  border-bottom-color: var(--cream-dark);
  box-shadow: 0 2px 24px rgba(47,85,98,0.08);
  background: rgba(249,246,241,0.96);
}
.bcc-nav--hidden { transform: translateY(-100%); }

.bcc-nav__inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 0 2rem;
  height: 76px;
}
.bcc-nav__logo { position: relative; display: flex; align-items: center; flex-shrink: 0; }
.bcc-nav__logo-svg { height: 32px; width: auto; display: block; overflow: visible; }

/*
 * Icône et texte du logo, groupés séparément dans le SVG inliné (header.php)
 * pour pouvoir être animés indépendamment — cf. règles .bcc-nav--on-hero
 * ci-dessous pour l'animation elle-même. État de repos (toutes les pages
 * hors accueil non scrollé) : icône pleinement visible à sa place, texte à
 * sa position/couleur naturelles — identique au rendu d'avant cette
 * animation.
 */
.bcc-nav__logo-icon {
  transform-box: fill-box;
  transform-origin: left center;
  opacity: 1;
  clip-path: inset(0 0 0 0);
  transition: opacity .55s ease, clip-path .6s cubic-bezier(.4,0,.2,1);
}
.bcc-nav__logo-text {
  color: var(--teal);
  transform: translateX(0);
  transition: color .5s ease, transform .6s cubic-bezier(.4,0,.2,1);
}

/*
 * Header quasi-transparent sur le hero de l'accueil, avant le premier
 * scroll — cf. CLAUDE.md, TODO "Header quasi-transparent sur le hero"
 * (décidé le 2026-09-14) et "Animation du logo header au scroll" (ajoutée
 * le 2026-09-14). Étend l'interrupteur .bcc-nav--scrolled déjà posé par
 * nav.js (y > 40) : tant qu'il n'est pas posé, fond transparent + texte
 * clair (logo, liens, bouton EN, hamburger) lisibles sur la photo sombre du
 * hero ; dès qu'il est posé, l'état ci-dessous n'entre plus en jeu et l'on
 * retombe sur le bandeau crème habituel (règles de base plus haut) — le
 * fondu est déjà couvert par les `transition` de .bcc-nav. La classe
 * .bcc-nav--on-hero n'est imprimée par header.php que sur is_front_page()
 * (jamais par défaut sur .bcc-nav) : les pages profondes/légales n'ont pas
 * de photo sombre sous la nav et doivent garder le bandeau crème dès le
 * premier pixel — donc jamais l'état "logo pas encore révélé" ci-dessous.
 *
 * Logo : au chargement du hero, seul le texte est visible (en clair), décalé
 * à gauche pour occuper la place de l'icône (translateX de la largeur exacte
 * icône+espace dans l'espace utilisateur du SVG, cf. viewBox) — l'icône est
 * masquée par un clip-path (rideau) en plus d'un fondu. Dès que
 * .bcc-nav--scrolled est posée (nav.js, y > 40), les deux transitions
 * ci-dessus jouent ensemble : le texte glisse vers sa position naturelle
 * pendant que le clip-path découvre l'icône dans ses couleurs officielles
 * (jamais de variante "logo clair" ternie pour l'icône — seul le texte
 * changeait de couleur) — donnant l'impression que le texte, en se décalant,
 * dévoile l'icône dessous.
 */
.bcc-nav--on-hero:not(.bcc-nav--scrolled) {
  background: transparent;
  border-bottom-color: transparent;
  box-shadow: none;
}
.bcc-nav--on-hero:not(.bcc-nav--scrolled) .bcc-nav__logo-icon {
  opacity: 0;
  clip-path: inset(0 100% 0 0);
}
.bcc-nav--on-hero:not(.bcc-nav--scrolled) .bcc-nav__logo-text {
  color: #F4F1EB;
  transform: translateX(-6728.56px);
}
.bcc-nav--on-hero:not(.bcc-nav--scrolled) .bcc-nav__link { color: rgba(255,255,255,0.86); }
.bcc-nav--on-hero:not(.bcc-nav--scrolled) .bcc-nav__link:hover {
  color: #fff;
  background: rgba(255,255,255,0.14);
}
.bcc-nav--on-hero:not(.bcc-nav--scrolled) .bcc-nav__lang-btn {
  border-color: rgba(255,255,255,0.55);
  color: #fff;
}
.bcc-nav--on-hero:not(.bcc-nav--scrolled) .bcc-nav__lang-btn:hover {
  background: #fff;
  color: var(--teal);
  border-color: #fff;
}
.bcc-nav--on-hero:not(.bcc-nav--scrolled) .bcc-nav__toggle-bar { background: #fff; }

.bcc-nav__links {
  display: flex;
  align-items: center;
  gap: .15rem;
  flex: 1;
  justify-content: flex-end;
  padding-right: 1.5rem;
}
.bcc-nav__link {
  font-family: var(--mono);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-light);
  padding: .45rem .7rem;
  border-radius: 3px;
  transition: color .2s, background .2s;
}
.bcc-nav__link:hover {
  color: var(--teal);
  background: rgba(47,85,98,0.06);
}

.bcc-nav__actions { display: flex; align-items: center; gap: .6rem; flex-shrink: 0; }

.bcc-nav__lang-btn {
  display: inline-block;
  font-family: var(--mono);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .12em;
  background: transparent;
  border: 1px solid var(--sage);
  color: var(--teal);
  border-radius: 3px;
  padding: .4rem .7rem;
  cursor: pointer;
  text-decoration: none;
  transition: background .2s, color .2s;
}
.bcc-nav__lang-btn:hover {
  background: var(--teal);
  color: #fff;
  border-color: var(--teal);
}

/* Bouton hamburger — masqué en desktop, affiché sous 900px (cf. media query
   ci-dessous). Les 3 barres se transforment en croix quand le menu est ouvert. */
.bcc-nav__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 38px;
  height: 38px;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
}
.bcc-nav__toggle-bar {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--teal);
  border-radius: 2px;
  transition: transform .3s cubic-bezier(.4,0,.2,1), opacity .2s;
}
.bcc-nav--menu-open .bcc-nav__toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.bcc-nav--menu-open .bcc-nav__toggle-bar:nth-child(2) { opacity: 0; }
.bcc-nav--menu-open .bcc-nav__toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Empêche le scroll de la page pendant que le panneau mobile est ouvert. */
body.bcc-no-scroll { overflow: hidden; }

@media (max-width: 900px) {
  /* #bcc-nav-links quitte le flux (position:fixed, cf. plus bas) : il ne
     reste que le logo et .bcc-nav__actions (EN + hamburger, toujours côte
     à côte) comme enfants flex — sans ceci ils restent groupés à gauche
     au lieu de rejoindre le bord droit du header. */
  .bcc-nav__inner { padding: 0 1.25rem; justify-content: space-between; }

  .bcc-nav__toggle { display: flex; }

  /* Le menu devient un panneau plein-largeur sous la barre de nav, fermé par
     défaut. Il reste dans le contexte d'empilement de .bcc-nav (position:
     fixed + z-index déjà posés plus haut), donc au-dessus du contenu. */
  .bcc-nav__links {
    position: fixed;
    top: 76px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: .25rem 1.25rem 1.5rem;
    max-height: calc(100svh - 76px);
    overflow-y: auto;
    background: rgba(249,246,241,0.98);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--cream-dark);
    box-shadow: 0 18px 36px rgba(47,85,98,0.12);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .22s ease, transform .22s ease, visibility .22s;
  }
  .bcc-nav--menu-open .bcc-nav__links {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .bcc-nav__link {
    padding: 1rem .25rem;
    border-top: 1px solid var(--cream-dark);
    font-size: .76rem;
  }
  .bcc-nav__link:first-child { border-top: none; }
}

/* Respecte prefers-reduced-motion — même logique que reduceMotion dans
   nav.js (masquage au scroll) : l'icône apparaît/le texte se repositionne
   instantanément au lieu de l'animation glisser/dévoiler. */
@media (prefers-reduced-motion: reduce) {
  .bcc-nav__logo-icon,
  .bcc-nav__logo-text {
    transition: none;
  }
}