/* ==========================================================================
   Constructeur d'article (CPT `actualite` — template-parts/article-builder)
   --------------------------------------------------------------------------
   CSS pur volontairement : le thème compile Tailwind en JIT, écrire ces styles
   en classes utilitaires imposerait un `npm run build`.
   La typographie (h2..h5, p, ul/ol, a, blockquote, figcaption) est déjà portée
   par `.single-actualite .entry-content` dans single-actualite.php : on ne fait
   ici que la STRUCTURE des blocs + les surcharges nécessaires.

   Spécificité : le <style> inline du single est chargé APRÈS ce fichier et vise
   `.single-actualite .entry-content img|h2|p…` (0,2,1). Les surcharges passent
   donc par `.single-actualite .entry-content .art-…` (0,3,x) pour garder la main.
   ========================================================================== */

.art-builder {
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 4vw, 3.25rem);
}

.art-block {
  margin: 0;
}

/* Le gap du flex gère l'espacement vertical : on neutralise les marges
   extrêmes héritées de la typographie de l'article. */
.single-actualite .entry-content .art-block > :first-child,
.single-actualite .entry-content .art-prose > :first-child,
.art-block > :first-child,
.art-prose > :first-child {
  margin-top: 0;
}

.single-actualite .entry-content .art-block > :last-child,
.single-actualite .entry-content .art-prose > :last-child,
.art-block > :last-child,
.art-prose > :last-child {
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Bloc Texte + photo
   -------------------------------------------------------------------------- */
.art-textphoto__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 3vw, 2.75rem);
  align-items: center;
}

@media (min-width: 1024px) {
  .art-textphoto__grid {
    grid-template-columns: 1fr 1fr;
  }

  /* Par défaut la photo est à droite ; `--media-left` l'échange. */
  .art-textphoto__media {
    order: 2;
  }

  .art-textphoto__body {
    order: 1;
  }

  .art-textphoto--media-left .art-textphoto__media {
    order: 1;
  }

  .art-textphoto--media-left .art-textphoto__body {
    order: 2;
  }
}

.art-textphoto__media {
  margin: 0;
}

.single-actualite .entry-content .art-textphoto__media img,
.art-textphoto__media img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  margin: 0;
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
}

/* --------------------------------------------------------------------------
   Bloc Image seule
   -------------------------------------------------------------------------- */
.art-figure {
  margin: 0;
}

.single-actualite .entry-content .art-figure img,
.art-figure img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
}

/* Le single met `margin-top: -1rem` sur les figcaption (compensation de la
   marge des images classiques) : inutile ici, l'image n'a plus de marge. */
.single-actualite .entry-content .art-figure__caption,
.art-figure__caption {
  margin: 0.75rem 0 0;
  text-align: center;
  font-size: 0.875rem;
  color: #666;
}