/* ==========================================================================
   En-tête et pied de page : adaptation de main.css au balisage des blocs
   Le menu est affiché avec le balisage d'origine (inc/navigation.php) et
   entièrement stylé par main.css. Seuls les logos, devenus des blocs Image
   (classes nav__logo-icon sur le <figure>), demandent une adaptation.
   ========================================================================== */

.nav__logo-icon {
  margin: 0;
}

.nav__logo-icon a,
.nav__logo-icon img {
  display: block;
}

.nav__logo-icon img {
  width: 100%;
  height: auto;
}

/* Logo du pied de page : image en ligne comme dans l'original (WordPress l'aligne en bas, ce qui supprime l'espace sous la ligne de base) */
.footer__logo-img img {
  vertical-align: baseline;
}

/* ==========================================================================
   Bouton burger aussi sur grand écran (version 2.5.0)
   main.css masquait le bouton à partir de 1024 px (display:none), où les liens
   s'affichent en ligne. On garde ces liens tels quels et on ajoute le bouton
   à leur droite. Il ouvre une copie du menu, créée par header-block.js
   (.nav__deroulant), déroulée sous l'en-tête avec le rendu mobile.
   ========================================================================== */

/* Copie du menu : masquée sous 1024 px, rien ne change sur téléphone et tablette */
.nav__deroulant {
  display: none;
}

@media (min-width: 1024px) {
  /* En-tête : logo, liens en ligne, puis bouton, alignés verticalement.
     Les liens restent collés à droite, contre le bouton, même menu ouvert. */
  .nav__item-list,
  .nav__item-list.open {
    margin: 0 0 0 auto;
    order: 1;
  }

  .nav__burger-btn,
  .page-scrolled .nav__burger-btn {
    display: flex;
    flex-shrink: 0;
    margin: 0 0 0 1.6rem;
    order: 2;
    position: static;
  }

  /* Liens en ligne : jamais sur deux lignes, même pendant le chargement de la police */
  .nav > .nav__item-list .nav__item-link {
    white-space: nowrap;
  }

  /* Copie du menu, sous la ligne de l'en-tête (hauteur nulle tant qu'elle est fermée) */
  .nav__deroulant {
    display: block;
    padding-bottom: 0;
    padding-top: 0;
  }

  .nav__deroulant .nav__item-list {
    flex-direction: column;
    margin: 0 auto 0 10%;
    max-height: 0;
    opacity: 0;
    transform: translateY(-100px);
  }

  .nav__deroulant .nav__item-list.open {
    margin: 0 auto 20px 10%;
    max-height: 500px;
    opacity: 1;
    transform: translate(0);
  }

  /* Rendu mobile des éléments de la copie (main.css les met en ligne à partir de 1024 px) */
  .nav__deroulant .nav__item-list .nav__item-elem {
    display: none;
  }

  .nav__deroulant .nav__item-list.open .nav__item-elem {
    display: inline-block;
  }

  .nav__deroulant .nav__item-elem,
  .nav__deroulant .nav__item-elem:last-child {
    margin: .4rem 0;
  }

  .nav__deroulant .nav__item-elem::after {
    content: none;
  }

  /* Sous-menu « Notre métier » de la copie : affiché sous son titre, comme sur mobile */
  .nav__deroulant .nav__item-group_dropdown,
  .nav__deroulant .nav__item-group_dropdown.open {
    box-shadow: none;
    display: block;
    min-width: 0;
    padding: 0;
    position: static;
    z-index: auto;
  }

  .nav__deroulant .nav__item-group_link {
    padding: .8rem 1rem;
  }

  .nav__deroulant .nav__item-group_link:focus,
  .nav__deroulant .nav__item-group_link:hover {
    background-color: transparent;
    font-weight: inherit;
    outline: revert;
  }
}

/* De 1024 à 1199 px, la place est juste : espace entre les liens et avant le bouton
   légèrement réduit (0,8 rem → 0,5 rem et 1,6 rem → 1 rem), les liens restent tous affichés */
@media (min-width: 1024px) and (max-width: 1199.98px) {
  .nav > .nav__item-list .nav__item-elem {
    margin: 0 .5rem;
  }

  .nav > .nav__item-list .nav__item-elem:last-child {
    margin-right: 0;
  }

  .nav__burger-btn,
  .page-scrolled .nav__burger-btn {
    margin-left: 1rem;
  }
}