/* ==========================================================================
   DEVANT MEDIA — compléments WordPress
   --------------------------------------------------------------------------
   Ce fichier ne redéfinit rien du système de design. Il couvre seulement
   ce que le prototype statique n'avait pas : le lien d'évitement, le
   markup généré par wp_nav_menu, et les classes que WordPress ajoute aux
   images et aux légendes.
   ========================================================================== */

/* 1. Lien d'évitement ------------------------------------------------------ */
/* Hors écran jusqu'à ce qu'il reçoive le focus au clavier. */
.skip-link {
  position: absolute;
  z-index: 100;
  top: 0;
  left: 50%;
  padding: 0.75rem 1.25rem;
  background: var(--ink);
  color: var(--bg);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transform: translate(-50%, -150%);
  transition: transform 0.25s var(--ease-out);
}

.skip-link:focus-visible {
  transform: translate(-50%, 0);
}

/* 2. Menus générés par WordPress ------------------------------------------- */
/*
   wp_nav_menu produit ses propres classes. Plutôt que de les réécrire en
   PHP, on les rattache ici aux composants existants.
*/
.nav__list a {
  position: relative;
  display: inline-block;
  padding-block: 0.35em;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.nav__list a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.45s var(--ease-out);
}

.nav__list a:hover::after,
.nav__list .current-menu-item > a::after,
.nav__list [aria-current="page"]::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* La page courante reste marquée sans dépendre du survol. */
.nav__list .current-menu-item > a {
  color: var(--ink);
}

/* 3. Titres de colonnes du pied de page ------------------------------------ */
/*
   Ce sont des libellés, pas des sections : un paragraphe stylé garde le
   plan du document propre là où le prototype utilisait des h2.
*/
.footer__col-title {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* Le pied de page reçoit ses listes de wp_nav_menu. */
.footer__col ul {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer__bottom ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-m);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 4. Images gérées par la médiathèque -------------------------------------- */
/*
   Le cadrage des visuels de projet et de portrait est déjà défini par
   styles.css : rien à répéter ici. WordPress ajoute seulement srcset,
   sizes et ses classes de légende, que voici.
*/
.wp-caption {
  max-width: 100%;
  margin: 0;
}

.wp-caption-text,
.wp-element-caption {
  margin-top: var(--space-xs);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  color: var(--ink-3);
}

/* 5. Aperçu du bloc dynamique dans l'éditeur -------------------------------- */
.devant-block-preview {
  display: grid;
  gap: 0.35rem;
  padding: var(--space-m, 1.5rem);
  border: 1px dashed var(--line-strong, rgba(244, 241, 236, 0.34));
}

.devant-block-preview__title {
  font-weight: 700;
}

.devant-block-preview__meta {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  opacity: 0.7;
}

/* 6. Logo téléversé --------------------------------------------------------- */
/*
   Quand un logo est choisi dans le Customizer, il remplace le symbole et
   le nom. La hauteur est fixée pour que l'en-tête ne bouge pas selon le
   fichier envoyé, et la largeur suit le rapport de l'image.
*/
.brand__logo {
  width: auto;
  height: 2.25rem;
  max-width: min(14rem, 45vw);
  object-fit: contain;
  object-position: left center;
  transition: opacity 0.3s;
}

.brand--footer .brand__logo {
  height: 2.5rem;
}

.brand--image:hover .brand__logo {
  opacity: 0.8;
}

/* 7. Taille du symbole sur grand écran ------------------------------------- */
/*
   Le symbole passe de 2.25rem à 2.8125rem, soit un quart de plus, pour
   mieux tenir tête au nom en gras qui l'accompagne. La règle est posée
   à partir de 821px seulement : en dessous, l'espace entre la marque et
   le bouton de menu est trop compté pour l'élargir.

   Rien à changer pour le survol : la rotation porte sur le même élément
   et suit donc la nouvelle taille.
*/
@media (min-width: 821px) {
  .brand__mark {
    width: 2.8125rem;
    height: 2.8125rem;
  }

  /* Le logo téléversé grandit d'autant, pour rester cohérent. */
  .brand--header .brand__logo {
    height: 2.8125rem;
  }
}