/* ============================================================
   DAL'ALU — Header
   Édite ce fichier directement pour styler le header.
   ============================================================ */

/* ── Reset du header parent ── */
.wp-block-template-part {
  all: unset;
}

/* ── Structure principale ── */
/* Sticky sur desktop ET mobile. Fond blanc opaque : indispensable depuis
   que le contenu défile dessous, et identique sur toutes les pages (le
   header était transparent, il prenait donc la couleur de ce qu'il y avait
   derrière — d'où la différence sur l'accueil). Ombre discrète pour le
   détacher des images qui passent en dessous. */
.dal-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  background: #fff;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .07);
}

/* Les blocs internes ne repeignent rien : le blanc du header reste visible
   (le bandeau rouge garde, lui, sa propre couleur). */
.dal-header__inner,
.dal-header__inner__container {
  background: transparent;
}

.dal-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 102px;
  width: 100%;
  box-sizing: border-box;
  padding-inline: clamp(12px, 10vw, 10%);
}

.dal-header__inner__container {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 2vw, 32px);
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
}

.dal-header__inner .margin {
  width: 10%;
}

.dal-header .dal-header-bandeau {
  width: 100%;
  background-color: var(--dal-red);
  height: 28px;
  display: flex;
  align-items: center;
}

.dal-header .dal-bandeau {
  width: 100%;
  margin: 0 10%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 45px;
}

.dal-header .dal-header-bandeau a {
  color: #FFF;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}

.dal-header .dal-header-bandeau a:hover {
  text-decoration: underline;
}

/* ── Logo ── */
.dal-header__logo {
  flex-shrink: 0;
  width: 177px;
  height: 46px;
  display: flex;
  align-items: center;
  text-decoration: none;
}
.dal-header__logo img{
  width: 100%;
}
/* ── Navigation ── */
.dal-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  flex: 1;
  margin-right: 15px;
}

.dal-nav__products,
.dal-nav__pages {
  display: flex;
  align-items: center;
  gap: 29px;
}

.dal-nav__link {
  text-decoration: none;
  white-space: nowrap;
  font-size: 16px;
  font-weight: 500;
}


/* Liens produits — gras, noirs.
   Bordure transparente réservée en permanence : la colorer au survol ou sur
   la page courante ne change donc jamais la hauteur du lien. */
.dal-nav__link--product {
  color: #000;
  font-size: 16px;
  border-bottom: 2px solid transparent;
  transition: border-color .4s ease-in-out;
}

/* Liens pages — léger, gris */
.dal-nav__link--page {
  color: #898181;
  font-weight: 400;
  /* Même principe : l'espace du trait est toujours réservé */
  border-bottom: 2px solid transparent;
  transition: color .2s ease, border-color .4s ease-in-out;
}

.dal-nav__link--page:hover {
  border-color: var(--dal-red);
}

/* ── Page courante ──
   La classe .is-active est posée par header.js (le header est un fragment
   HTML statique, il ne connaît pas l'URL courante). Un lien gris devient
   noir en plus de garder son trait rouge. */
.dal-nav__link--product.is-active,
.dal-nav__link--page.is-active {
  color: #000;
  border-color: var(--dal-red);
}

.dal-has-cb {
  position: relative;
  cursor: pointer;
  /* Zone de survol qui maintient le menu déroulant ouvert */
  padding: 20px 0;
  /* Pas de bordure ici : elle se posait sous les 20px de padding, donc très
     loin du texte. Le trait rouge est mis sur le libellé lui-même (plus bas). */
  border-bottom: 0;
}

.dal-has-cb:hover {
  border-color: transparent;
}

/* Parent d'un sous-menu dont une page est ouverte : il reste marqué, même au
   survol (règle placée après .dal-has-cb:hover, qui a la même spécificité).
   Le trait est porté par le libellé (> span) : même bordure de 2px que les
   autres liens de la nav, donc exactement la même distance au texte. Sur un
   élément inline, la bordure ne modifie pas la hauteur de ligne : rien ne se
   décale. */
.dal-has-cb.is-active {
  color: #000;
}

.dal-has-cb.is-active > span,
.dal-has-cb.is-active:hover > span {
  border-bottom: 2px solid var(--dal-red);
}

.dal-has-cb:hover .dal-nav-cb {
  opacity: 1;
  visibility: visible;
}

.dal-nav-cb {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  width: 400px;
  display: flex;
  flex-direction: column;
  word-wrap: initial;
  background: #ffffff;
  border-radius: 4px 4px 200px 20px;
  padding: 10px 0px 10px 20px;
  left: -20%;
  top: 80%;
  box-shadow: 2px 3px 0px 0px #ebebeb;
  align-items: flex-start;
  transition: opacity .2s ease-in, visibility 0s linear .2s;
}
.dal-nav-cb .dal-nav__link {
  font-size: 16px;
  /* Pas de bordure ici : dans le sous-menu le trait rouge est un
     text-decoration (voir ci-dessous), collé au texte et sans effet sur la
     mise en page — les autres liens du menu ne bougent donc pas. */
  border-bottom: 0;
}

.dal-nav-cb .dal-nav__link:hover,
.dal-nav-cb .dal-nav__link.is-active {
  color: #000;
  text-decoration: underline;
  text-decoration-color: var(--dal-red);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}


.dal-has-cb:hover .dal-nav-cb {
  opacity: 1;
  visibility: visible;
  transition: opacity .2s ease-in, visibility 0s linear 0s;
}

.dal-has-cb .dal-nav__link--page {
  padding: 10px;
}

/* Séparateur vertical rouge */
.dal-nav__separator {
  width: 2px;
  height: 24px;
  background: var(--dal-red);
  border-radius: 2px;
  margin: 0 30px;
  flex-shrink: 0;
}

/* ── Groupe CTA + burger ── */
.dal-header__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

/* ── Bouton CTA ── */
.dal-header__cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--dal-red);
  color: #ffffff;
  text-decoration: none;
  font-size: 16px;
  font-weight: 500;
  padding: 10px 20px;
  border-radius: 100px;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.15s;
}

.dal-header__cta:hover {
  background: #b30e16;
  color: #ffffff;
}

/* ── Liseré bleu bas de header ── */
.dal-header__border {
  height: 4px;
  background: linear-gradient(90deg, #1a3a6e 0%, #2d6abf 50%, #5b9bd5 100%);
}

/* ── Burger ── */
.dal-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  flex-shrink: 0;
}

.dal-burger span {
  display: block;
  width: 100%;
  height: 2px;
  background: #111;
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.25s ease;
  transform-origin: center;
}

.dal-burger.is-open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.dal-burger.is-open span:nth-child(2) {
  opacity: 0;
}

.dal-burger.is-open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ── Menu mobile (panneau latéral droit) ── */
.dal-mobile-menu {
  position: fixed;
  top: 0;
  right: 0;
  width: min(340px, 85vw);
  height: 100dvh;
  background: #fff;
  z-index: 1100;
  transform: translateX(100%);
  transition: transform 0.3s ease;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.dal-mobile-menu.is-open {
  transform: translateX(0);
}

.dal-mobile-menu__inner {
  display: flex;
  flex-direction: column;
  padding: 80px 28px 40px;
  gap: 32px;
}

.dal-mobile-menu__section {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* ── Textes du menu mobile : mêmes styles que la nav desktop ──
   Liens de rubriques gris 18px/400 (comme .dal-nav__link--page), liens
   produits noirs 18px/500 (comme .dal-nav__link--product), sous-liens 16px
   (comme ceux du menu déroulant .dal-nav-cb). */
.dal-mobile-menu__section a {
  color: #898181;
  text-decoration: none;
  font-size: 18px;
  font-weight: 400;
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
  transition: color 0.15s;
}

.dal-mobile-menu__section--produits a {
  color: #000;
  font-weight: 500;
}

/* ── Rubriques repliables (L'enseigne DAL'ALU, Devenir franchisé) ──
   Le bouton reprend le style d'un lien de page desktop ; les sous-liens sont
   masqués par l'attribut hidden et révélés par header.js, donc rien n'est
   inaccessible sans JS (le panneau reste fermé mais le HTML est complet). */
.dal-mobile-menu__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 8px 0;
  background: none;
  border: none;
  border-bottom: 1px solid #f0f0f0;
  color: #898181;
  font-size: 18px;
  font-weight: 400;
  text-align: left;
  cursor: pointer;
}

.dal-mobile-menu__toggle[aria-expanded="true"] {
  color: #000;
}

.dal-mobile-menu__fleche {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
  margin-top: -4px;
}

.dal-mobile-menu__toggle[aria-expanded="true"] .dal-mobile-menu__fleche {
  transform: rotate(-135deg);
  margin-top: 4px;
}

.dal-mobile-menu__liens {
  display: flex;
  flex-direction: column;
  padding-left: 12px;
}

.dal-mobile-menu__liens[hidden] {
  display: none;
}

.dal-mobile-menu__liens a {
  font-size: 16px;
}

.dal-mobile-menu__section a:last-child,
.dal-mobile-menu__liens a:last-child {
  border-bottom: none;
}

/* ── Liens du bandeau rouge, repris en bas du menu mobile ──
   Le bandeau est masqué sous 1024px : ses liens secondaires atterrissent ici,
   plus petits que les rubriques et détachés par un filet. */
.dal-mobile-menu__section--bandeau {
  border-top: 1px solid #ececec;
  padding-top: 20px;
}

.dal-mobile-menu__section--bandeau a {
  font-size: 14px;
  font-weight: 700;
  padding: 6px 0;
  border-bottom: none;
}

.dal-mobile-menu__section a:hover {
  color: var(--dal-red);
}

/* Page courante dans le menu mobile : même traitement que le sous-menu
   desktop (texte noir + trait rouge collé au texte, sans décalage). */
.dal-mobile-menu__section a.is-active {
  color: #000;
  text-decoration: underline;
  text-decoration-color: var(--dal-red);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.dal-mobile-menu__cta {
  display: block;
  text-align: center;
  background: var(--dal-red);
  color: #fff !important;
  text-decoration: none;
  padding: 14px 24px;
  border-radius: 100px;
  font-weight: 500;
  font-size: 18px;
  transition: background 0.2s;
}

.dal-mobile-menu__cta:hover {
  background: #b30e16;
}

/* ── Overlay ── */
.dal-mobile-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .45);
  z-index: 1050;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.dal-mobile-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* ── Responsive ── */
@media (max-width: 1440px) {
  .dal-nav {
    display: none;
  }

  .dal-header__inner__container{
    justify-content: space-between;
  }

  .dal-burger {
    display: flex;
  }

  .dal-header__inner {
    justify-content: space-between;
    height: 70px;
  }

  .dal-header__logo,
  .dal-header__logo img {
    width: 100px;
  }
}

@media (max-width: 1024px) {

  .dal-header .dal-header-bandeau,
  .dal-header-bandeau {
    display: none;
  }

  .dal-header__cta {
    display: none;
  }
}