/* ============================================================
   header.css — Navigation principale & menu mobile
============================================================ */

/* ── Header ── */

.header {
  position:         absolute;
  top:              0;
  left:             0;
  width:            100%;
  z-index:          var(--z-header);
  background-color: transparent;
  transition:
    background-color 400ms cubic-bezier(0, 0, 0.3, 1),
    box-shadow       400ms cubic-bezier(0, 0, 0.3, 1),
    padding          400ms cubic-bezier(0, 0, 0.3, 1);
}

.header.is-sticky {
  position:                fixed;
  background-color:        var(--bg-on-ink-heavy);
  backdrop-filter:         blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow:              0 2px 8px 0 var(--shadow-soft);
}

.header__inner {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  max-width:       var(--container-max);
  margin:          0 auto;
  padding:         var(--space-8) var(--space-24);
  transition:      padding 400ms cubic-bezier(0, 0, 0.3, 1);
}

.header.is-sticky .header__inner {
  padding-top:    var(--space-5);
  padding-bottom: var(--space-5);
}

.header__logo-text {
  display:        block;
  font-family:    var(--font-display);
  font-weight:    500;
  font-size:      1.5rem;
  color:          var(--ink-deep);
  letter-spacing: 0.04em;
  line-height:    1;
  border:         1px solid var(--ink-deep);
  padding:        6px 10px 5px;
  transition:
    color        300ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 300ms cubic-bezier(0.16, 1, 0.3, 1),
    background   300ms cubic-bezier(0.16, 1, 0.3, 1);
}

.header__logo:hover .header__logo-text {
  color:        var(--color-bg);
  border-color: var(--ink-deep);
  background:   var(--ink-deep);
}

.header__nav-list {
  display:     flex;
  align-items: center;
  gap:         var(--space-12);
}

.header__nav-item { position: relative; }

.header__nav-link {
  display:        block;
  font-family:    var(--font-body);
  font-size:      var(--text-sm);
  font-weight:    500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color:          var(--ink-base);
  transition:     color 150ms cubic-bezier(0.25, 0, 0, 1);
}

.header__nav-link:hover                       { color: var(--caramel); }
.header__nav-item.is-active .header__nav-link { color: var(--ink-deep); }

.header__nav-item.is-active::after {
  content:          '';
  position:         absolute;
  bottom:           -8px;
  left:             50%;
  transform:        translateX(-50%);
  width:            4px;
  height:           4px;
  background-color: var(--caramel-light);
  border-radius:    var(--radius-pill);
}

.header__burger {
  display:         none;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             6px;
  width:           44px;
  height:          44px;
  margin-right:    -4px; /* compense visuellement l'agrandissement de la zone tactile */
  transition:      transform 100ms ease;
}

.header__burger:active { transform: scale(0.9); }

.header__burger-line {
  display:          block;
  width:            22px;
  height:           1.5px;
  background-color: var(--ink-base);
  border-radius:    var(--radius-pill);
  transform-origin: center;
  transition:
    transform 320ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity   220ms cubic-bezier(0.16, 1, 0.3, 1);
}

.header__burger.is-open .header__burger-line:first-child { transform: translateY(7.5px) rotate(45deg); }
.header__burger.is-open .header__burger-line:nth-child(2) { opacity: 0; transform: scaleX(0); }
.header__burger.is-open .header__burger-line:last-child   { transform: translateY(-7.5px) rotate(-45deg); }


/* ── Menu mobile ── */

.mobile-menu {
  position:        fixed;
  inset:           0;
  z-index:         var(--z-modal);
  display:         flex;
  flex-direction:  column;
  /* flex-start + une marge haute qui réserve exactement la place du
     header (~92px sur mobile : padding-block 24px de chaque côté +
     44px de contenu) — avant, "center" répartissait le débordement
     pour moitié au-dessus de l'écran, ce qui faisait apparaître
     "Accueil" à la hauteur du logo/burger dès que le contenu total
     dépassait la hauteur du viewport. */
  justify-content: flex-start;
  align-items:     center;
  gap:             var(--space-6);
  padding:         calc(92px + var(--space-3)) var(--space-6) var(--space-6);
  overflow-y:      auto; /* filet de sécurité, pas le comportement par défaut visé */
  background:      var(--ivory-card);
  opacity:         0;
  pointer-events:  none;
  transform:       translateY(-12px);
  transition:
    opacity   400ms cubic-bezier(0, 0, 0.3, 1),
    transform 400ms cubic-bezier(0, 0, 0.3, 1);
}

.mobile-menu.is-open {
  opacity:        1;
  pointer-events: auto;
  transform:      translateY(0);
}

.mobile-menu__list {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            var(--space-3);
}

.mobile-menu__link {
  display:        flex;
  align-items:    center;
  min-height:     44px;
  font-family:    var(--font-display);
  font-size:      clamp(1.5rem, 7vw, 2rem);
  font-weight:    400;
  letter-spacing: -0.02em;
  color:          var(--ink-base);
  transition:     color 150ms cubic-bezier(0.25, 0, 0, 1);
}

.mobile-menu__link:hover                        { color: var(--caramel); }
.mobile-menu__item.is-active .mobile-menu__link { color: var(--caramel); font-style: italic; }

/* Sélecteur de langue mobile : repensé en pastilles séparées plutôt
   qu'un clone du contrôle desktop (segments collés avec bordures
   internes). Trois cibles tactiles indépendantes de 44px, dans le
   même langage visuel que les icônes sociales juste en dessous —
   une vraie intégration mobile, pas un contrôle desktop rétréci. */
.mobile-menu__lang {
  display: flex;
  gap:     var(--space-2);
}

.mobile-menu__lang .lang-switcher__btn {
  min-width:     44px;
  min-height:    44px;
  padding:       var(--space-2) var(--space-4);
  font-size:     var(--text-sm);
  border:        1px solid var(--border);
  border-radius: var(--radius-pill);
  transition:
    background 200ms ease,
    color      200ms ease,
    transform  100ms ease;
}

.mobile-menu__lang .lang-switcher__btn:active { transform: scale(0.94); }

/* Pied du menu mobile — statut de disponibilité + réseaux sociaux.
   Sans ça, l'overlay n'était qu'une liste de liens : ce bloc lui
   donne la même personnalité que le reste du site (le point qui
   pulse existe déjà dans le hero et l'about) plutôt que de réduire
   la navigation mobile à son strict minimum fonctionnel. */
.mobile-menu__footer {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            var(--space-3);
  padding-top:    var(--space-5);
  border-top:     1px solid var(--border);
  width:          100%;
  max-width:      280px;
}

.mobile-menu__socials {
  display: flex;
  gap:     var(--space-3);
}

.mobile-menu__social-link {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           44px;
  height:          44px;
  border:          1px solid var(--border);
  border-radius:   var(--radius-sm);
  color:           var(--ink-mid);
  transition:
    background   200ms ease,
    border-color 200ms ease,
    color        200ms ease,
    transform    100ms ease;
}

.mobile-menu__social-link:hover  { background: var(--ink-deep); border-color: var(--ink-deep); color: var(--ivory-card); }
.mobile-menu__social-link:active { transform: scale(0.92); }
.mobile-menu__social-link svg   { width: 16px; height: 16px; }

/* Filet de sécurité pour les écrans très bas (téléphone en paysage) :
   compresse encore un peu plus par-dessus les valeurs par défaut,
   qui sont déjà pensées pour tenir sans scroll sur un smartphone
   debout standard. */
@media (max-height: 560px) {
  .mobile-menu         { gap: var(--space-4); padding-top: calc(92px + var(--space-2)); padding-bottom: var(--space-4); }
  .mobile-menu__list   { gap: var(--space-2); }
  .mobile-menu__footer { padding-top: var(--space-4); gap: var(--space-2); }
}


/* ── Responsive ── */

@media (max-width: 1024px) {
  .header__inner    { padding-inline: var(--space-12); }
  .header__nav-list { gap: var(--space-8); }
  .lang-switcher    { margin-left: var(--space-6); }
}

/* Zone "grande tablette" : la nav desktop complète (6 liens + sélecteur
   de langue) commence à se sentir serrée avant même le passage au menu
   burger à 768px. On resserre encore les espacements plutôt que de
   basculer trop tôt vers le burger, qui reste réservé au vrai mobile. */
@media (max-width: 900px) {
  .header__nav-list { gap: var(--space-5); }
  .header__nav-link { font-size: var(--text-xs); letter-spacing: 0.1em; }
  .lang-switcher     { margin-left: var(--space-4); }
}

@media (max-width: 768px) {
  .header__nav          { display: none; }
  .header__burger       { display: flex; }
  .header__lang-desktop { display: none; }
  .header__inner        { padding-inline: var(--space-6); padding-block: var(--space-6); }
}