/* ==========================================================================
   RACCORDS AVEC LES BLOCS WORDPRESS
   ==========================================================================

   Le prototype dessinait sa navigation et ses icônes sociales à la main, avec
   un petit script maison pour le menu burger. Ici on utilise les blocs natifs
   — core/navigation, core/social-links, core/site-logo — parce qu'ils rendent
   le menu et les réseaux ÉDITABLES depuis l'admin, et parce que l'overlay
   mobile de core/navigation est accessible (piège de focus, Échap, aria-*),
   ce que le script du prototype ne faisait pas.

   Contrepartie : ces blocs ont leur propre markup et leurs propres classes.
   Ce fichier les réaligne sur la charte. C'est le seul endroit où du CSS
   « contre » les blocs natifs ; tout le reste du thème ignore leur existence.
   ========================================================================== */


/* --------------------------------------------------------------------------
   Navigation
   -------------------------------------------------------------------------- */

/* core/navigation pose le gap sur son conteneur interne, pas sur le wrapper :
   on neutralise le gap du wrapper pour éviter de l'additionner. */
.nav-desktop,
.nav-links {
  gap: 0;
}

.nav-desktop .wp-block-navigation__container,
.nav-links .wp-block-navigation__container {
  gap: 2rem;
}

/* Les liens héritent de la typo de marque déclarée sur le wrapper. */
.wp-block-navigation .wp-block-navigation-item__content {
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: color 0.2s ease;
}

.wp-block-navigation .wp-block-navigation-item__content:hover {
  color: var(--color-brand-teal);
}

/* La page courante est signalée par la même teinte que le survol —
   équivalent de la classe .active du prototype. */
.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content,
.wp-block-navigation .current_page_item > .wp-block-navigation-item__content {
  color: var(--color-brand-teal);
}

/* Supprime le soulignement que core applique à l'élément courant. */
.wp-block-navigation a:where(:not(.wp-element-button)) {
  text-decoration: none;
}

/* --- Alignement du point de rupture ----------------------------------------
   core/navigation bascule en menu plein écran sous 600 px (valeur codée en dur
   dans wp-includes/blocks/navigation/style.css, non paramétrable par un
   attribut du bloc). Le prototype, lui, bascule à 768 px.

   Entre 600 et 767 px le menu bureau s'afficherait donc : quatre libellés
   longs en capitales à côté d'un logo de 160 px, soit un débordement garanti
   sur la plupart des tablettes en portrait.

   On rétablit ici le comportement mobile sur cette plage. La spécificité
   reproduit exactement celle des règles du cœur ; blocks.css étant chargée
   après la feuille du bloc, c'est la nôtre qui l'emporte.
   -------------------------------------------------------------------------- */
@media (min-width: 600px) and (max-width: 767.98px) {

  /* Le bouton d'ouverture redevient visible… */
  .wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: flex;
  }

  /* …et la liste repasse en panneau masqué tant qu'il n'est pas ouvert. */
  .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
    display: none;
  }

  /* Le bouton de fermeture doit réapparaître dans le panneau ouvert. */
  .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) .wp-block-navigation__responsive-container-close {
    display: flex;
  }
}

/* --- Bouton burger : reprend l'apparence de .menu-toggle du prototype ------ */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
  background: none;
  border: none;
  padding: 0;
  color: var(--color-brand-dark);
  cursor: pointer;
}

.wp-block-navigation__responsive-container-open svg,
.wp-block-navigation__responsive-container-close svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: currentColor;
}

/* --- Panneau mobile plein écran -------------------------------------------- */
.wp-block-navigation__responsive-container.is-menu-open {
  background-color: var(--color-brand-cream);
  padding: 1.5rem;
}

.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content {
  padding-top: 3rem;
}

.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__container {
  gap: 0;
}

.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item {
  width: 100%;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item__content {
  display: block;
  width: 100%;
  padding: 0.75rem 0;
  font-size: 0.8125rem;
}

/* Dans le pied de page, la navigation reprend l'allure de .footer-nav-list :
   colonne, petits liens gris. */
.footer-nav-list.wp-block-navigation .wp-block-navigation__container {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
}

.footer-nav-list .wp-block-navigation-item__content {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
  color: var(--color-gray-400);
}

.footer-nav-list .wp-block-navigation-item__content:hover {
  color: var(--color-white);
}


/* --------------------------------------------------------------------------
   Logo du site
   --------------------------------------------------------------------------
   core/site-logo gère le srcset et le lien vers l'accueil. On ne contraint
   que la largeur, la hauteur suivant le ratio.
   -------------------------------------------------------------------------- */
.wp-block-site-logo a,
.wp-block-site-logo img {
  display: block;
}

.site-header .wp-block-site-logo img,
.main-header .wp-block-site-logo img {
  width: 160px;
  height: auto;
}

/* Dans le pied de page : pictogramme inversé sur fond sombre. */
.footer-brand-title .wp-block-site-logo img {
  width: 144px;
  height: auto;
  filter: invert(1);
}


/* --------------------------------------------------------------------------
   Réseaux sociaux
   --------------------------------------------------------------------------
   core/social-links remplace les 4 icônes Font Awesome du prototype par des
   SVG inline : une dépendance de moins et aucune requête réseau.
   On force le style « logos seuls » aux couleurs de la charte.
   -------------------------------------------------------------------------- */
.footer-social-icons.wp-block-social-links {
  gap: 1rem;
  padding: 0;
  margin: 0;
}

.footer-social-icons.wp-block-social-links .wp-social-link {
  margin: 0;
  padding: 0;
  background: none;
  color: var(--color-white);
  transition: color 0.2s ease;
}

.footer-social-icons.wp-block-social-links .wp-social-link:hover {
  color: var(--color-brand-teal);
  transform: none;
}

.footer-social-icons.wp-block-social-links .wp-social-link svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: currentColor;
}


/* --------------------------------------------------------------------------
   Groupes et parties de modèle
   --------------------------------------------------------------------------
   Une partie de modèle est enveloppée par WordPress dans un conteneur. On
   s'assure qu'il ne casse pas la colonne flex de .wp-site-blocks ni le
   repère de positionnement des décors.
   -------------------------------------------------------------------------- */
.wp-site-blocks > header,
.wp-site-blocks > footer {
  flex: 0 0 auto;
}

/* Les blocs de groupe du thème ne doivent pas hériter d'une marge auto
   inattendue quand ils portent déjà .container. */
.container.wp-block-group {
  margin-left: auto;
  margin-right: auto;
}