@charset "UTF-8";
/* ==================================================
   Header (template-parts/header.php) : logo dessiné, menu principal, bouton « Prendre contact »,
   bouton du menu mobile. Toujours visible en haut de l'écran (sticky).
   Menu : Apparence > Menus, emplacement « Menu principal ». Bouton : Personnaliser > L'Atelier de Lola.
================================================== */
.adl-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--adl-bg-light);
  border-bottom: 1px solid var(--adl-line);
  box-shadow: 0 6px 20px var(--adl-shadow-soft);
}

body.admin-bar .adl-header {
  top: var(--wp-admin--admin-bar--height, 32px);
}

/* Connecté, sous 600 px : WordPress ne fixe plus sa barre d'administration (elle défile avec la page) ;
   le header se colle donc tout en haut, sinon le contenu apparaît dans l'espace laissé au-dessus. */
@media (max-width: 600px) {
  body.admin-bar .adl-header {
    top: 0;
  }
}
.adl-header__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: 24px;
  min-height: var(--adl-header-h);
  padding: 0 40px;
}

/* ---------- Logo : dessin (prise USB, câble, plume) au-dessus de « L'atelier de Lola » ;
   le bas du câble passe « sous » les lettres grâce à un halo de la couleur du fond ---------- */
.adl-logo {
  justify-self: start;
  text-decoration: none;
}

.adl-logo__name {
  position: relative;
  isolation: isolate;
  display: inline-block;
  padding: 48px 0 2px;
  font-family: var(--adl-font-script);
  font-size: 22px;
  font-weight: 400;
  line-height: 1.1;
  white-space: nowrap;
  color: var(--adl-charcoal);
  text-shadow: 2px 0 0 var(--adl-bg-light), -2px 0 0 var(--adl-bg-light), 0 2px 0 var(--adl-bg-light), 0 -2px 0 var(--adl-bg-light), 1.5px 1.5px 0 var(--adl-bg-light), -1.5px 1.5px 0 var(--adl-bg-light), 1.5px -1.5px 0 var(--adl-bg-light), -1.5px -1.5px 0 var(--adl-bg-light);
}

.adl-logo__name::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 0;
  width: 76px;
  height: 55px;
  transform: translateX(-50%);
  background: url("../img/logo-feather.svg") center/contain no-repeat;
}

/* ---------- Menu principal ---------- */
.adl-nav__menu {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: clamp(15px, 2vw, 34px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.adl-nav__menu > li {
  margin: 0;
}

.adl-nav__menu > li > a {
  position: relative;
  display: block;
  padding: 15px 2px;
  font-family: var(--adl-font-text);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--adl-nav-text);
  text-decoration: none;
  transition: color 0.25s ease;
}

/* Trait framboise sous l'onglet survolé ou actif */
.adl-nav__menu > li > a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 7px;
  width: 100%;
  height: 2px;
  background: var(--adl-raspberry);
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.adl-nav__menu > li > a:hover,
.adl-nav__menu > li > a:focus-visible,
.adl-nav__menu > li > a.is-active {
  color: var(--adl-raspberry-dark);
}

.adl-nav__menu > li > a:hover::after,
.adl-nav__menu > li > a:focus-visible::after,
.adl-nav__menu > li > a.is-active::after {
  opacity: 1;
}

/* ---------- Sous-menu (groupe « Services », inc/navigation.php) ----------
   Le titre du groupe est un bouton : il ouvre le sous-menu au clic / au clavier (assets/js/submenu.js) ;
   le survol à la souris l'ouvre aussi. Les deux pages du groupe sont dans .adl-nav__submenu. */
.adl-nav__menu > li {
  position: relative;
}

.adl-nav__toggle {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  padding: 15px 2px;
  border: 0;
  border-radius: 0;
  background: none;
  font-family: var(--adl-font-text);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--adl-nav-text);
  cursor: pointer;
  transition: color 0.25s ease;
}

/* Chevron qui se retourne à l'ouverture */
.adl-nav__toggle::after {
  content: "";
  width: 7px;
  height: 7px;
  margin-top: -4px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.25s ease, margin 0.25s ease;
}

/* Le reset de Hello Elementor colore tout bouton survolé : on garde l'aspect d'un onglet */
.adl-nav__toggle:hover,
.adl-nav__toggle:focus,
.adl-nav__toggle[aria-expanded=true],
.current-menu-parent > .adl-nav__toggle {
  background: none;
  color: var(--adl-raspberry-dark);
}

.adl-nav__toggle:focus-visible {
  outline: 2px solid var(--adl-raspberry-dark);
  outline-offset: 2px;
}

.adl-nav__toggle[aria-expanded=true]::after {
  margin-top: 3px;
  transform: rotate(-135deg);
}

.adl-nav__submenu {
  position: absolute;
  z-index: 10;
  top: calc(100% - 4px);
  left: 50%;
  min-width: 250px;
  margin: 0;
  padding: 10px;
  list-style: none;
  border-top: 3px solid var(--adl-raspberry);
  border-radius: 0 0 12px 12px;
  background: var(--adl-white);
  box-shadow: 0 18px 34px -12px var(--adl-shadow-card);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

.adl-nav__menu > li:hover > .adl-nav__submenu,
.adl-nav__toggle[aria-expanded=true] + .adl-nav__submenu {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

.adl-nav__submenu a {
  display: block;
  padding: 10px 14px;
  border-radius: 8px;
  font-family: var(--adl-font-text);
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
  color: var(--adl-nav-text);
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.adl-nav__submenu a:hover,
.adl-nav__submenu a:focus-visible,
.adl-nav__submenu a.is-active {
  background: var(--adl-bg-hover);
  color: var(--adl-raspberry-dark);
}

@media (prefers-reduced-motion: reduce) {
  .adl-nav__submenu,
  .adl-nav__toggle::after {
    transition: none;
  }
}
/* ---------- Bouton « Prendre contact » ---------- */
.adl-header__cta {
  justify-self: end;
}

/* ---------- Bouton du menu mobile (3 traits) ---------- */
.adl-menu-toggle {
  display: none;
  justify-self: end;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--adl-text);
  cursor: pointer;
  transition: color 0.25s ease;
}

/* Hello Elementor colore tout bouton survolé ou qui a le focus (fond rose #c36) : on garde l'aspect normal.
   Framboise seulement au clavier, et au survol à la souris : sur écran tactile, le bouton reprend sa couleur
   dès que le menu est refermé. */
.adl-menu-toggle:hover,
.adl-menu-toggle:focus {
  background: transparent;
  color: var(--adl-text);
}

.adl-menu-toggle:focus-visible {
  color: var(--adl-raspberry-dark);
}

@media (hover: hover) {
  .adl-menu-toggle:hover {
    color: var(--adl-raspberry-dark);
  }
}
.adl-menu-toggle__bar {
  display: block;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}

/* ---------- Petits ordinateurs ---------- */
@media (min-width: 1025px) and (max-width: 1199px) {
  .adl-header__inner {
    column-gap: 18px;
    padding: 0 24px;
  }
  .adl-nav__menu {
    gap: 24px;
  }
  .adl-nav__menu > li > a,
  .adl-nav__toggle {
    font-size: 15px;
  }
}
/* ---------- Tablette et smartphone : logo + bouton du menu mobile ---------- */
@media (max-width: 1024px) {
  .adl-header__inner {
    grid-template-columns: 1fr auto;
    padding: 0 24px;
  }
  .adl-nav,
  .adl-header__cta {
    display: none;
  }
  .adl-menu-toggle {
    display: flex;
  }
  .adl-logo__name {
    padding-top: 43px;
    font-size: 20px;
  }
  .adl-logo__name::before {
    width: 68px;
    height: 49px;
  }
}