/**
 * Navbar Block Styles
 */

/* FIX-NAVBAR-STICKY + FIX-NAVBAR-CONTAINER-BR: <nav> is transparent sticky shell,
   .navbar-container receives background + border-radius for rounded effect */
.usine-navbar {
  position: sticky;
  top: 0;
  width: 100%;
  color: var(--navbar-text-color, #000000);
  z-index: 1000;
  box-sizing: border-box;
  padding: 8px 16px;
  /* NAVBAR-OUTER-BG-001: a floating bar must not paint a fixed colour band — the
     section behind it changes from page to page, and any fixed tint clashes as
     soon as it stops matching. It stays transparent at rest and only gains a
     translucent, blurred surface once the page is scrolled (see .navbar-scrolled),
     which reads correctly over any background. */
  background: var(--navbar-outer-bg, transparent);
  transition: background-color 0.25s ease, backdrop-filter 0.25s ease,
              box-shadow 0.25s ease;
}

/* BUG-70: Flex layout for CTA buttons side-by-side */
.navbar-actions {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  flex: 0 1 auto;
  min-width: 0;
  gap: clamp(0.5rem, 0.9vw, 0.75rem);
  align-items: center;
  justify-content: flex-end;
}

.navbar-cta {
  flex: 0 1 auto;
  min-width: 0;
}

.navbar-cta--secondary {
  flex: 0 0 auto;
}

.navbar-cta .btn {
  min-width: max-content;
  max-width: 100%;
  font-size: clamp(0.875rem, 1vw, 1rem);
  white-space: nowrap;
}

.navbar-mobile-actions {
  display: none;
}

/* FIX-EMPTY-ACTIONS-001: Hide empty flex items */
.navbar-actions:empty {
  display: none;
}

.usine-navbar.navbar-sticky {
  position: sticky;
  top: 0;
}

.usine-navbar.navbar-style-transparent .navbar-container {
  background-color: transparent;
  box-shadow: none;
}

/* FIX-NAVBAR-CONTAINER-BR: Container receives border-radius + background for rounded navbar effect */
.navbar-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  max-width: 1312px;
  margin: 0 auto;
  gap: clamp(0.5rem, 1vw, 1rem);
  padding: 0.75rem clamp(1rem, 2.25vw, 2rem);
  min-height: 72px;
  box-sizing: border-box;
  background-color: var(--navbar-bg-color, #ffffff);
  border-radius: 9999px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* NB-012: Support for filled-width navbar — full width means no rounded corners, no outer padding */
.navbar-width-filled {
  padding: 0;
}

.navbar-width-filled .navbar-container {
  max-width: 100%;
  border-radius: 0;
}

@media (min-width: 1025px) {
  .navbar-width-filled .navbar-container {
    padding-inline: var(--section-padding-x, 64px);
  }

  .navbar-container[style*="text-align: right"] .navbar-menu {
    flex: 0 1 auto;
    margin-left: auto;
    justify-content: flex-end;
  }
}

/* Logo */
.navbar-logo {
  display: flex;
  align-items: center;
  font-size: 1.5rem;
  font-weight: bold;
  text-decoration: none;
  color: inherit;
}

.navbar-logo img {
  display: block;
  height: var(--navbar-logo-height, 56px);
  width: auto;
  max-width: clamp(160px, 18vw, 240px);
  max-height: none;
}

.navbar-logo-text {
  font-size: 24px;
  font-weight: 700;
  color: var(--navbar-text-color, #232425);
  text-decoration: none;
}

/* Menu */
.navbar-menu {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: clamp(0.75rem, 1.6vw, 2rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

.navbar-menu-item {
  display: flex;
  align-items: center;
  margin: 0;
  position: relative;
}

.navbar-menu .navbar-mobile-actions {
  display: none;
}

.navbar-menu-link {
  display: inline-flex;
  align-items: center;
  color: var(--navbar-text-color);
  text-decoration: none;
  font-size: clamp(0.875rem, 1.05vw, 1rem);
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  transition: opacity 0.2s;
}

.navbar-menu-link:hover {
  opacity: 0.7;
}

.navbar-menu-icon-right,
.navbar-icon-right {
  --us-icon-size: 20px;
  width: var(--us-icon-size, 20px);
  height: var(--us-icon-size, 20px);
  flex: 0 0 var(--us-icon-size, 20px);
  margin-left: 8px;
}

/* NAVBAR-DROPDOWN-MAQUETTE-001: rounded panel, left-aligned under its parent and
   clearing the navbar pill, matching the maquette. */
.navbar-menu-dropdown {
  position: absolute;
  top: calc(100% + 24px);
  left: 0;
  right: auto;
  z-index: 1002;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 280px;
  margin: 0;
  padding: 16px 8px;
  list-style: none;
  background: var(--navbar-dropdown-bg, #ffffff);
  border-radius: var(--navbar-dropdown-radius, 24px);
  box-shadow: 0 18px 40px rgba(87, 69, 56, 0.10);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 0.16s ease, transform 0.16s ease;
}

@media (min-width: 1025px) {
  .navbar-menu-item--has-dropdown::after {
    content: "";
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    z-index: 1001;
    /* Must match the dropdown's top offset so the pointer can cross the gap
       without the panel closing. */
    height: 24px;
  }
}

.navbar-menu-item--has-dropdown:hover > .navbar-menu-dropdown,
.navbar-menu-item--has-dropdown:focus-within > .navbar-menu-dropdown {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.navbar-menu-dropdown-item {
  display: flex;
  margin: 0;
}

.navbar-menu-dropdown-link {
  display: flex;
  width: 100%;
  align-items: center;
  padding: 12px 24px;
  border-radius: 16px;
  color: var(--navbar-text-color, #232425);
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}

.navbar-menu-dropdown-link:hover,
.navbar-menu-dropdown-link:focus {
  background: rgba(35, 36, 37, 0.06);
  opacity: 1;
}

/* CTA Button — FIX-NAVBAR-CTA-PILL: pill shape + normal weight */
.navbar-cta-button {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  background-color: var(--navbar-text-color);
  color: var(--navbar-bg-color);
  border-radius: 9999px;
  text-decoration: none;
  font-weight: 500;
  transition: transform 0.2s;
}

.navbar-cta-button:hover {
  transform: translateY(-2px);
}

/* FIX-NAVBAR-CTA-PILL: Buttons rendered via usine_render_button() inside navbar get pill shape */
.usine-navbar .navbar-cta .btn {
  border-radius: 9999px;
  font-weight: 500;
}

/* Mobile Toggle */
.navbar-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  -webkit-appearance: none;
  appearance: none;
}

.navbar-toggle-icon {
  display: block;
  width: 24px;
  height: 2px;
  background-color: var(--navbar-text-color);
  position: relative;
}

.navbar-toggle-icon::before,
.navbar-toggle-icon::after {
  content: '';
  position: absolute;
  width: 24px;
  height: 2px;
  background-color: var(--navbar-text-color);
  left: 0;
}

.navbar-toggle-icon::before {
  top: -8px;
}

.navbar-toggle-icon::after {
  top: 8px;
}

/* Responsive */
@media (max-width: 1024px) {
  .usine-navbar {
    left: auto;
    right: auto;
    width: 100%;
    max-width: 100%;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 !important;
  }

  .navbar-container {
    flex-wrap: nowrap;
    align-items: center;
    padding: 0.5rem 1rem;
    min-height: 56px;
    width: 100%;
    max-width: 100%;
    border-radius: 0 !important;
    box-shadow: none;
    border-bottom: 1px solid var(--navbar-mobile-border, rgba(255, 255, 255, 0.18));
    overflow: visible;
  }

  .js .navbar-menu {
    display: none;
    position: absolute;
    /* NAVBAR-MOBILE-STACK-001 : la règle desktop centre les liens sur l'axe
       principal ; une fois la liste passée en colonne, ce centrage devenait
       vertical et creusait un grand vide au-dessus du premier lien. */
    justify-content: flex-start;
    overflow-y: auto;
    top: calc(100% - 1px);
    left: 0;
    right: 0;
    z-index: 20;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
    background-color: var(--navbar-mobile-bg, var(--navbar-bg-color, #000000));
    color: var(--navbar-mobile-text, var(--navbar-text-color, #ffffff)) !important;
    padding: 0;
    border: 0;
    border-top: 1px solid var(--navbar-mobile-border, rgba(255, 255, 255, 0.18));
    border-bottom: 1px solid var(--navbar-mobile-border, rgba(255, 255, 255, 0.18));
    box-shadow: none;
    border-radius: 0;
    overflow: hidden;
    text-align: left;
  }

  .js .navbar-menu.active {
    display: flex;
  }

  .usine-navbar.is-open .navbar-container {
    border-radius: 0 !important;
  }

  .navbar-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* NAVBAR-TOGGLE-CONTRAST-001 : le bouton est posé sur la barre (claire), pas
       dans le panneau déroulant — il prend donc la couleur de texte de la barre. */
    color: var(--navbar-text-color, #232425) !important;
    padding: 8px;
    min-height: 44px;
    min-width: 44px;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none;
    outline: none;
    min-width: 0;
    -webkit-appearance: none;
    appearance: none;
  }

  .navbar-toggle:focus-visible {
    outline: 2px solid var(--navbar-mobile-text, var(--navbar-text-color, #ffffff));
    outline-offset: 4px;
  }

  .navbar-menu-item {
    width: 100%;
    min-width: 0;
    flex-direction: column;
    align-items: stretch;
  }

  .navbar-menu-item + .navbar-menu-item {
    border-top: 1px solid var(--navbar-mobile-border, rgba(255, 255, 255, 0.18));
  }

  .navbar-menu-link {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    box-sizing: border-box;
    padding: 14px 16px;
    color: var(--navbar-mobile-text, var(--navbar-text-color, #ffffff));
    text-align: left;
  }

  .navbar-menu-link:hover,
  .navbar-menu-link:focus {
    opacity: 1;
    background: transparent;
  }

  .navbar-menu-link:focus-visible {
    outline: 2px solid var(--navbar-mobile-text, var(--navbar-text-color, #ffffff));
    outline-offset: -4px;
  }

  .navbar-actions {
    display: none;
  }

  .js .navbar-menu.active {
    min-height: calc(100dvh - 56px);
  }

  .navbar-menu-dropdown {
    position: static;
    display: flex;
    box-sizing: border-box;
    align-self: stretch;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    padding: 0 0 8px 24px;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }

  .navbar-menu-dropdown-link {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    min-height: 40px;
    padding: 8px 16px 8px 0;
    color: var(--navbar-mobile-text, var(--navbar-text-color, #ffffff));
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .navbar-menu-dropdown-link:hover,
  .navbar-menu-dropdown-link:focus {
    background: transparent;
  }

  .js .navbar-menu .navbar-mobile-actions {
    display: block;
    box-sizing: border-box;
    width: 100%;
    /* NAVBAR-MOBILE-CTA-POSITION-001 : `margin-top: auto` collait les CTA tout en
       bas d'un panneau pleine hauteur, hors du champ de vision. Ils suivent
       maintenant directement le dernier lien du menu. */
    margin-top: 0;
    padding: 16px;
    border-top: 1px solid var(--navbar-mobile-border, rgba(255, 255, 255, 0.18));
  }

  .navbar-mobile-actions__inner {
    display: grid;
    gap: 12px;
  }

  .navbar-mobile-actions .btn {
    width: 100%;
    justify-content: center;
    min-height: 48px;
    color: var(--btn-primary-color, #ffffff);
  }

  .no-js .navbar-container {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1rem;
  }

  .no-js .navbar-toggle {
    display: none;
  }

  .no-js .navbar-menu {
    display: flex;
    position: static;
    width: 100%;
    flex-basis: 100%;
    flex-wrap: wrap;
    padding: 0.5rem 0 0;
    box-shadow: none;
    background: transparent;
  }

  .no-js .navbar-actions {
    width: 100%;
    justify-content: flex-start;
  }
}

@media (max-width: 480px) {
  .navbar-container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "logo toggle";
    row-gap: 0;
    column-gap: 12px;
    align-items: center;
  }

  .navbar-logo {
    grid-area: logo;
    min-width: 0;
  }

  .navbar-logo img {
    height: var(--navbar-logo-height-mobile, 48px);
    max-width: min(150px, 100%);
  }

  .navbar-toggle {
    grid-area: toggle;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: end;
    width: 40px;
    height: 40px;
    padding: 0;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0;
    box-shadow: none;
  }

  .navbar-toggle-icon {
    width: 20px;
    height: 3px;
    background-color: var(--navbar-mobile-text, var(--navbar-text-color, #232425));
  }

  .navbar-toggle-icon::before,
  .navbar-toggle-icon::after {
    width: 20px;
    height: 3px;
    background-color: var(--navbar-mobile-text, var(--navbar-text-color, #232425));
  }

  .navbar-toggle-icon::before {
    top: -7px;
  }

  .navbar-toggle-icon::after {
    top: 7px;
  }
}

/* ==========================================================================
   NAVBAR-SCROLLED-SURFACE-001
   Etat "défilé" : une surface translucide floutée plutôt qu'une couleur fixe.
   Elle s'adapte à toute section qui passe dessous, ce qu'une bande opaque ne
   peut pas faire. Repli opaque discret si backdrop-filter n'est pas supporté.
   ========================================================================== */
.usine-navbar.navbar-scrolled {
  background: var(--navbar-scrolled-bg, rgba(250, 245, 239, 0.82));
  box-shadow: 0 6px 24px rgba(87, 69, 56, 0.08);
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .usine-navbar.navbar-scrolled {
    background: var(--navbar-scrolled-bg-blur, rgba(250, 245, 239, 0.62));
    -webkit-backdrop-filter: saturate(140%) blur(14px);
    backdrop-filter: saturate(140%) blur(14px);
  }
}

/* ==========================================================================
   NAVBAR-SCROLLED-CLEAN-001
   Au défilement, la barre extérieure ne peint plus rien : ni bande translucide,
   ni flou. Seule la pastille blanche flotte au-dessus du contenu, son ombre
   suffisant à la détacher — un repère de profondeur suffit, là où la matière
   dépolie brouillait la page qui passe dessous.

   La règle ne porte plus de palier : le traitement est le même sur téléphone,
   tablette et desktop. Trois blocs quasi identiques cohabitaient, un par
   format, au risque qu'une correction n'en touche qu'un — c'est précisément ce
   qui avait laissé la tablette seule avec son flou.
   ========================================================================== */
.usine-navbar.navbar-scrolled {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}

/* La profondeur passe désormais par la pastille elle-même. */
.usine-navbar.navbar-scrolled .navbar-container {
  box-shadow: 0 10px 30px rgba(87, 69, 56, 0.12);
}

@media (prefers-reduced-motion: reduce) {
  .usine-navbar {
    transition: none;
  }
}

/* ==========================================================================
   NAVBAR-TOGGLE-CROSS-001
   Le bouton du menu passe en croix quand le panneau est ouvert : l'icône
   indique alors l'action disponible (fermer) plutôt que l'état précédent.
   Les trois barres pivotent, celle du milieu s'efface.
   ========================================================================== */
.navbar-toggle-icon,
.navbar-toggle-icon::before,
.navbar-toggle-icon::after {
  transition: transform 0.24s ease, opacity 0.18s ease, top 0.24s ease;
}

.usine-navbar.is-open .navbar-toggle-icon {
  background-color: transparent;
}

.usine-navbar.is-open .navbar-toggle-icon::before {
  top: 0;
  transform: rotate(45deg);
}

.usine-navbar.is-open .navbar-toggle-icon::after {
  top: 0;
  transform: rotate(-45deg);
}

/* Le bouton conserve une cible tactile confortable et un focus visible. */
.navbar-toggle:focus-visible {
  outline: 2px solid var(--navbar-text-color, #845e34);
  outline-offset: 3px;
  border-radius: 8px;
}

@media (prefers-reduced-motion: reduce) {
  .navbar-toggle-icon,
  .navbar-toggle-icon::before,
  .navbar-toggle-icon::after {
    transition: none;
  }
}

/* ==========================================================================
   NAVBAR-MOBILE-SUBLINK-SIZE-001
   Les entrées de premier niveau reçoivent une taille explicite ; les
   sous-entrées, elles, n'en avaient aucune et héritaient du corps de page —
   elles paraissaient donc plus grosses que leur parent.
   ========================================================================== */
@media (max-width: 1024px) {
  .navbar-menu-dropdown-link {
    font-size: clamp(0.875rem, 1.05vw, 1rem);
    font-weight: 500;
    line-height: 1.2;
  }
}

/* ==========================================================================
   NAVBAR-TABLET-MENU-001
   Le menu déroulant hérite des tailles pensées pour un téléphone : sur un
   iPad, les entrées tombaient autour de 14px sur une largeur de 834px, avec
   des lignes hautes d'à peine 48px. La cible tactile reste la même quel que
   soit l'écran, mais l'échelle typographique doit suivre la surface : on
   remonte les libellés et on aère les rangées.
   ========================================================================== */
@media (min-width: 769px) and (max-width: 1024px) {
  .navbar-menu-link {
    font-size: 20px;
  }

  .navbar-menu-item > .navbar-menu-link,
  .navbar-menu > .navbar-menu-item > .navbar-menu-link {
    padding-block: 20px;
  }

  .navbar-menu-dropdown-link {
    font-size: 17px;
    padding-block: 16px;
  }

  .navbar-mobile-actions .btn,
  .navbar-mobile-actions__inner .btn {
    font-size: 18px;
    min-height: 56px;
  }
}

/* ==========================================================================
   NAVBAR-MOBILE-WRAPPER-001
   Sur mobile et tablette, la barre s'étalait d'un bord à l'autre de l'écran,
   sans arrondi ni ombre, refermée par un filet en bas : une bande collée en
   haut de page, sans rapport avec la pastille flottante du desktop. Elle
   reprend le même gabarit — un retrait extérieur, un contenant arrondi, une
   ombre douce — et le panneau déroulant, enfant de ce contenant, s'aligne
   naturellement sur lui.

   Les filets de séparation entre les entrées du menu disparaissent aussi :
   l'espacement suffit à distinguer les lignes, et ces traits fragmentaient un
   panneau qui doit se lire d'un bloc.
   ========================================================================== */
@media (max-width: 1024px) {
  .usine-navbar {
    padding: 8px 16px !important;
  }

  .navbar-container {
    max-width: 1312px;
    margin-inline: auto;
    border-radius: 9999px !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border-bottom: 0;
  }

  /* Menu ouvert : la pastille garde ses angles, le panneau se détache juste
     en dessous — même arrondi que le menu déroulant du desktop. */
  .usine-navbar.is-open .navbar-container {
    border-radius: 9999px !important;
  }

  .js .navbar-menu {
    top: calc(100% + 8px);
    border: 0;
    border-radius: var(--navbar-dropdown-radius, 24px);
    box-shadow: 0 18px 40px rgba(87, 69, 56, 0.12);
    padding-block: 8px;
  }

  /* Plus de filets : ni entre les entrées, ni autour du panneau. */
  .navbar-menu-item + .navbar-menu-item,
  .js .navbar-menu .navbar-mobile-actions {
    border-top: 0;
  }

  /* Le bloc de boutons se distingue par une respiration, pas par un trait. */
  .js .navbar-menu .navbar-mobile-actions {
    padding-top: 8px;
  }
}