/* ============================================================================
   NAV.CSS — EN-TÊTE, LOGO, NAVIGATION, MENU MOBILE
   ============================================================================
   2e fichier du CSS découpé du site (voir l'ordre complet en tête de
   base.css). Dépend des variables définies dans base.css (--c-navy-900,
   --sp-*, --transition, --accent...) : base.css doit donc être chargé
   AVANT ce fichier dans le <head> de chaque page.

   Le HTML de l'en-tête n'est pas dupliqué dans les 9 pages du site : il
   est généré par assets/js/partials.js (voir ce fichier pour le détail).
   Les classes stylées ici sont donc les mêmes sur toutes les pages.
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 500;
  border-bottom: 1px solid var(--c-line);
  transition: box-shadow var(--transition);
}
/* Le fond flouté "verre dépoli" est posé sur un ::before plutôt que
   directement sur .site-header : un backdrop-filter (comme un transform ou
   un filter) transforme son propre élément en "containing block" pour ses
   descendants en position: fixed. Comme le panneau du menu mobile
   (.main-nav, voir plus bas) est fixed et vit DANS le header, le mettre
   directement sur .site-header le faisait se positionner par rapport au
   header (haut de la page, largeur du header) au lieu du vrai viewport du
   téléphone — c'était la cause du bug de menu qui débordait sur mobile. */
.site-header::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(248, 246, 240, 0.85);
  backdrop-filter: blur(10px);
}
.site-header.is-scrolled {
  box-shadow: var(--ombre-s);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding-block: 0.9rem;
}

/* --- Logo (avec repli texte si l'image n'est pas encore fournie) --- */
.logo {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-shrink: 0;
}
/* height fixe + width:auto = tous les logos (fichiers photo aux
   proportions différentes) s'affichent à la même hauteur dans l'en-tête,
   sans jamais s'étirer ni se déformer. border-radius adoucit les coins des
   fichiers logo (qui ont un fond plein, pas de transparence). */
.logo__img {
  height: 42px;
  width: auto;
  border-radius: 6px;
}
.logo__fallback {
  display: none; /* affiché seulement si l'image ne charge pas, voir onerror en HTML */
  align-items: center;
  gap: 0.5rem;
  font-family: var(--f-titres);
  font-weight: 800;
  font-size: 1.3rem;
  color: var(--c-navy-900);
  line-height: 1;
}
.logo__fallback .logo__mark {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--c-navy-900), var(--c-navy-700));
  color: var(--c-a2s-500);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 800;
}
.logo__fallback small {
  display: block;
  font-family: var(--f-texte);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--c-ink-soft);
  text-transform: uppercase;
}
/* Variante CDEX du repli texte (utilisée sur les pages /cdex/) */
.logo--cdex .logo__mark {
  background: linear-gradient(135deg, var(--c-navy-900), var(--c-cdex-600));
  color: var(--c-white);
}

/* Logo "Groupe" : les deux logos réels A2S + CDEX côte à côte, séparés d'un fin trait */
.logo--groupe { gap: 0.55rem; }
.logo--groupe .logo__img { height: 40px; }
.logo--groupe .logo__divider {
  width: 1px;
  align-self: stretch;
  background: var(--c-line);
}

.main-nav {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}
.main-nav__list {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}
.main-nav__list a {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--c-navy-900);
  position: relative;
  padding-block: 0.3rem;
}
.main-nav__list a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition);
}
.main-nav__list a:hover::after,
.main-nav__list a[aria-current="page"]::after {
  transform: scaleX(1);
}
.main-nav__list a[aria-current="page"] {
  color: var(--accent-dark);
}

/* Sous-menu "Nos entités" (utilisé sur la page Groupe) */
.has-submenu { position: relative; }
.submenu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  background: var(--c-white);
  border-radius: var(--radius-m);
  box-shadow: var(--ombre-l);
  padding: var(--sp-2);
  min-width: 240px;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}
.has-submenu:hover .submenu,
.has-submenu:focus-within .submenu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.submenu a {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.6rem 0.7rem;
  border-radius: var(--radius-s);
  font-size: 0.9rem;
}
.submenu a:hover { background: var(--c-paper-alt); }
.submenu a::after { display: none; }
.submenu .dot {
  width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0;
}
.submenu .dot--a2s { background: var(--c-a2s-500); }
.submenu .dot--cdex { background: var(--c-cdex-500); }

/* CTA "Demander un devis" dupliqué dans le panneau du menu mobile : sur
   desktop, le vrai bouton est déjà visible dans .header-actions, donc on
   masque celui-ci ; sur mobile, .header-actions .btn disparaît (voir plus
   bas) et c'est CE bouton qui prend le relais pour ne pas perdre l'option. */
.main-nav__cta { display: none; }

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

/* --- Sélecteur de langue FR / EN --- */
.lang-switch {
  display: flex;
  align-items: center;
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: 999px;
  padding: 3px;
  font-family: var(--f-titres);
  font-weight: 700;
  font-size: 0.75rem;
}
.lang-switch button {
  border: none;
  background: transparent;
  padding: 0.35rem 0.6rem;
  border-radius: 999px;
  cursor: pointer;
  color: var(--c-ink-soft);
  transition: background var(--transition), color var(--transition);
}
.lang-switch button[aria-pressed="true"] {
  background: var(--c-navy-900);
  color: var(--c-white);
}

/* --- Bouton burger (menu mobile) --- */
.burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-s);
  background: var(--c-white);
  cursor: pointer;
}
.burger span {
  width: 20px;
  height: 2px;
  background: var(--c-navy-900);
  margin-inline: auto;
  transition: transform var(--transition), opacity var(--transition);
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ----------------------------------------------------------------------
   RESPONSIVE — bascule vers le menu burger
   ---------------------------------------------------------------------- */

/* Le seuil de bascule vers le menu burger (1240px, plutôt que le classique
   860px) est volontairement élevé : les pages A2S Supply / CDEX affichent
   jusqu'à 6 liens + le bouton CTA dans le menu, et en dessous de ~1160px
   ce nombre d'éléments n'a plus la place de tenir sur une seule ligne sans
   que le texte de certains liens ne se mette à la ligne (bug visuel de
   navbar signalé). Basculer plus tôt vers le burger évite ce cas. */
@media (max-width: 1240px) {
  .main-nav {
    position: fixed;
    inset: 0 0 0 30%;
    background: var(--c-white);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: 6rem var(--sp-4) var(--sp-4);
    transform: translateX(100%);
    transition: transform var(--transition);
    box-shadow: var(--ombre-l);
    overflow-y: auto;
  }
  .main-nav.is-open { transform: translateX(0); }
  .main-nav__list { flex-direction: column; align-items: flex-start; gap: var(--sp-3); }
  .has-submenu { width: 100%; }
  .submenu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; padding-left: var(--sp-3); display: none; margin-top: 0.5rem; }
  .has-submenu.is-open .submenu { display: grid; }
  .header-actions .btn { display: none; }
  .main-nav__cta { display: block; margin-top: var(--sp-3); }
  .main-nav__cta .btn { width: 100%; justify-content: center; }
  .burger { display: flex; }
}

/* Écrans très étroits : on resserre un peu l'en-tête pour lui garder
   confortablement sa place à côté du sélecteur de langue et du burger */
@media (max-width: 400px) {
  .logo__img { height: 34px; }
  .logo--groupe .logo__img { height: 30px; }
  .logo__fallback { font-size: 1.1rem; }
  .lang-switch { font-size: 0.7rem; }
  .lang-switch button { padding: 0.3rem 0.5rem; }
}