/* Grid Articles Block — Style Frontend (Figma 679:32266)
   Variantes : une (Gri) · duo (Variant5) · pub (PUB) · liste-droite (Variant3) · liste-gauche (Variant8)
   Fonds Figma : beige (#f6f1ec) pour une/duo/pub/liste-droite — BLANC pour liste-gauche. */

.wp-block-bloc-th-grid-articles.grid-articles {
  padding: 60px 24px;
  background-color: var(--color-beige);
}
/* liste-gauche = seule variante sur fond blanc */
.grid-articles--liste-gauche.grid-articles {
  background-color: var(--color-white);
}

.grid-articles__container {
  max-width: 1295px;   /* 575 + 669 + 51 (gap) */
  margin: 0 auto;
}

/* ===== Titre Duo (entête centré : une & pub) ===== */
.grid-articles__header {
  margin-bottom: 40px;
  text-align: center;
}

.titre-duo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;     /* accent (lh 1 = 56px) + sous-titre juste dessous → sous-titre centré ≈ 70px (Figma 679:31414) */
}

.titre-duo__accent {
  font-family: var(--font-accent);
  font-size: var(--text-accent);
  font-weight: 400;
  line-height: var(--lh-accent);
  color: var(--color-warm-gray);
}

.titre-duo__sub {
  font-family: var(--font-condensed);
  font-size: var(--text-sub-l);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--ls-sub);
  line-height: var(--lh-sub);
  color: var(--color-text);
}

/* Titre simple (variantes liste) : Caslon Text 32px, aligné à gauche, en tête de colonne */
.grid-articles__titre-simple {
  font-family: var(--font-serif);
  font-size: var(--text-h2);     /* 32px */
  font-weight: 400;
  line-height: var(--lh-h2);     /* 1.2 */
  color: var(--color-text);
  margin: 0 0 8px 0;
}

/* ===== Card article (image + pastille + titre) ===== */
.card-article {
  background-color: var(--color-white);
  border: 1px solid var(--color-beige);
  padding: 19px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.card-article__image-wrapper {
  overflow: hidden;
  aspect-ratio: 880 / 892;
}

.card-article__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}
.card-article:hover .card-article__image {
  transform: scale(1.03);
}

.card-article__content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.card-article__tag {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  height: 27px;
  padding: 0 16px;
  border-radius: 100px;
  background-color: var(--color-beige);
  font-family: var(--font-serif-light);
  font-size: 18px;
  color: var(--color-text);
  line-height: 1;
}

.card-article__title {
  font-family: var(--font-serif);
  font-size: var(--text-h3);     /* 24px (cartes S) */
  font-weight: 400;
  line-height: var(--lh-h3);
  margin: 0;
  color: var(--color-text);
}

.card-article__excerpt {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 300;
  line-height: 19px;
  color: var(--color-text);
  margin: 0;
}

/* Featured (carte une principale) */
.card-article--featured .card-article__image-wrapper {
  aspect-ratio: 521 / 480;
}
.card-article--featured .card-article__title {
  font-size: var(--text-h2);     /* 32px */
  line-height: var(--lh-h2);
}
.grid-articles .card-article--featured {
  padding: 27px 19px 22px;       /* Figma : 27 haut / 22 bas */
}

.card-article__chef {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-condensed);
  font-size: var(--text-tag-chef);
  font-weight: 700;
  letter-spacing: var(--ls-sub);   /* nom du chef en casse normale (Figma) — pas de capitales */
  color: var(--color-warm-gray);
}
.card-article__chef svg {
  width: 24px;
  height: 24px;
  color: var(--color-gold);
}

/* ===== Carte texte (variantes liste + carte texte de « une ») ===== */
.card-text {
  background: var(--color-white);
  border: 1px solid var(--color-beige);
  min-height: 192px;
  padding: 19px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* wrapper interne (sans padding) = repère de l'étoile, comme .card-article__content */
.card-text__content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.card-text__title {
  font-family: var(--font-serif-light);
  font-size: 32px;
  font-weight: 400;
  line-height: 1.134;
  margin: 0;
  color: var(--color-text);
}

.card-text__excerpt {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 300;
  line-height: 19px;
  color: var(--color-text);
  margin: 0;
}

/* ===== Cœur « favoris » (bouton fonctionnel, haut-droite du contenu) =====
   Calé sur le wrapper interne (sans padding), pas dans le coin du padding. */
.grid-articles .card-article__content,
.grid-articles .card-text__content { position: relative; }
.grid-articles__fav { position: absolute; top: 0; right: 0; }
/* cartes texte (listes + carte « une » large) : cœur 30px, calé sur la 1re ligne */
.grid-articles .card-text__content .grid-articles__fav { top: 4px; }
.grid-articles .card-text__content .grid-articles__fav svg { width: 30px; height: 30px; }
/* laisse la place à l'étoile pour ne pas chevaucher le titre */
.grid-articles .card-article__title { padding-right: 30px; }
.grid-articles .card-text__title { padding-right: 38px; }

/* ===== CTA « Voir plus d'articles » (centré sous chaque carte / liste) ===== */
.grid-articles__cta {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-serif-light);
  font-size: 18px;
  color: var(--color-text);
  text-decoration: none;
  transition: color 0.3s ease;
}
.grid-articles__cta svg { color: var(--color-gold); transition: transform 0.3s ease; }
.grid-articles__cta:hover { color: var(--color-warm-gray); }
.grid-articles__cta:hover svg { transform: translateX(4px); }

/* Colonne featured : carte + CTA centré dessous */
.grid-articles__featured-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.grid-articles__featured-col .card-article { width: 100%; }

/* Cellule (carte + son CTA centré dessous) */
.grid-articles__cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.grid-articles__cell .card-article,
.grid-articles__cell .card-text { width: 100%; }

/* ===== LAYOUTS PAR VARIANTE ===== */

/* une : featured 575 (gauche) + colonne droite 669 (2 cartes S + carte texte) */
.grid-articles--une .grid-articles__layout {
  display: grid;
  grid-template-columns: 575px 669px;
  gap: 51px;
  align-items: start;
  justify-content: center;
}
.grid-articles--une .grid-articles__featured-col { grid-column: 1; }
.grid-articles--une .grid-articles__right {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.grid-articles--une .grid-articles__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 27px;
}
/* carte texte de « une » : tag + titre, pas d'extrait */
.card-text--tag { gap: 8px; }

/* duo : featured 575 (gauche) + colonne droite 669 (titre-duo + 2 cartes) */
.grid-articles--duo .grid-articles__layout {
  display: grid;
  grid-template-columns: 575px 669px;
  gap: 51px;
  align-items: center;
  justify-content: center;
}
.grid-articles--duo .grid-articles__featured-col { grid-column: 1; }
.grid-articles--duo .grid-articles__right {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.grid-articles--duo .grid-articles__header--col {
  margin-bottom: 0;
  text-align: left;
}
.grid-articles--duo .titre-duo {
  align-items: flex-start;   /* titre calé à gauche de la colonne (Figma) */
}
.grid-articles--duo .grid-articles__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 27px;
}

/* liste-droite : image featured 575 (gauche) + colonne droite 669 (titre + liste) */
.grid-articles--liste-droite .grid-articles__layout {
  display: grid;
  grid-template-columns: 575px 669px;
  gap: 51px;
  align-items: start;
  justify-content: center;
}
.grid-articles--liste-droite .grid-articles__featured-col { grid-column: 1; }
.grid-articles--liste-droite .grid-articles__list { grid-column: 2; }

/* liste-gauche : colonne gauche 669 (titre + liste) + image featured 575 (droite) — fond blanc */
.grid-articles--liste-gauche .grid-articles__layout {
  display: grid;
  grid-template-columns: 669px 575px;
  gap: 51px;
  align-items: start;
  justify-content: center;
}
.grid-articles--liste-gauche .grid-articles__list { grid-column: 1; grid-row: 1; }
.grid-articles--liste-gauche .grid-articles__featured-col { grid-column: 2; grid-row: 1; }
/* bordures fines gris chaud (Figma Variant8) */
.grid-articles--liste-gauche .card-text,
.grid-articles--liste-gauche .card-article--featured {
  border: 0.5px solid var(--color-warm-gray);
}

/* Liste de cartes texte (commun liste-droite / liste-gauche) */
.grid-articles__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* pub : featured 575 + carrousel de cartes + encart 240x420 à droite */
.grid-articles--pub .grid-articles__layout {
  display: flex;
  gap: 51px;
  align-items: center;
  justify-content: center;
  position: relative;
}
.grid-articles--pub .grid-articles__featured-col { flex: 0 0 575px; }
.grid-articles--pub .grid-articles__carousel {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  flex: 1 1 auto;
}
.grid-articles--pub .grid-articles__carousel .card-article {
  flex: 0 0 321px;
}
.grid-articles--pub .grid-articles__pub {
  flex: 0 0 240px;
}

/* Encart pub 240x420 */
.grid-articles__pub {
  width: 240px;
  height: 420px;
  background-color: #e7e7e7;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}
.grid-articles__pub > a { display: block; width: 100%; height: 100%; }
.grid-articles__pub img { width: 100%; height: 100%; object-fit: cover; display: block; }
.grid-articles__pub-label {
  font-family: var(--font-body);
  font-size: 22.47px;
  color: #a9a9a9;
  line-height: 1.3;
}

/* ===== Responsive ===== */
/* Tablette : les layouts 2 colonnes (575/669) passent en 1 colonne empilée ;
   les sous-rangées de cartes restent en 2 colonnes. */
@media (max-width: 1024px) {
  .wp-block-bloc-th-grid-articles.grid-articles { padding: 48px 20px; }

  .grid-articles__container { max-width: 100%; }

  .grid-articles--une .grid-articles__layout,
  .grid-articles--duo .grid-articles__layout,
  .grid-articles--liste-droite .grid-articles__layout,
  .grid-articles--liste-gauche .grid-articles__layout {
    grid-template-columns: 1fr;
  }
  .grid-articles--une .grid-articles__featured-col,
  .grid-articles--une .grid-articles__right,
  .grid-articles--duo .grid-articles__featured-col,
  .grid-articles--duo .grid-articles__right,
  .grid-articles--liste-droite .grid-articles__featured-col,
  .grid-articles--liste-droite .grid-articles__list,
  .grid-articles--liste-gauche .grid-articles__featured-col,
  .grid-articles--liste-gauche .grid-articles__list {
    grid-column: 1;
  }
  /* liste-gauche : remettre la liste au-dessus de l'image (ordre logique) */
  .grid-articles--liste-gauche .grid-articles__list { grid-row: auto; }
  .grid-articles--liste-gauche .grid-articles__featured-col { grid-row: auto; }

  /* pub : passe en colonne, encart pub pleine largeur sous le carrousel */
  .grid-articles--pub .grid-articles__layout {
    flex-direction: column;
    align-items: stretch;
  }
  .grid-articles--pub .grid-articles__featured-col { flex: 0 0 auto; }
  .grid-articles--pub .grid-articles__pub {
    flex: 0 0 auto;
    width: 100%;
    height: auto;
    aspect-ratio: 240 / 420;
    max-height: 420px;
  }
}

/* Mobile : tout en 1 colonne (sous-rangées de cartes incluses) */
@media (max-width: 768px) {
  .wp-block-bloc-th-grid-articles.grid-articles { padding: 40px 16px; }
  .grid-articles--une .grid-articles__row,
  .grid-articles--duo .grid-articles__row {
    grid-template-columns: 1fr;
  }
  /* carrousel pub : cartes en pleine largeur, gap réduit */
  .grid-articles--pub .grid-articles__carousel { gap: 12px; }
  .grid-articles--pub .grid-articles__carousel .card-article {
    flex: 0 0 82%;
  }
}

/* ===== Réglage sous-titre : capitales OFF (modifier sur la section racine) ===== */
.grid-articles--sub-lower .titre-duo__sub { text-transform: none; }

/* ===== Cartes cliquables : lien étiré vers l'article (favori préservé) ===== */
.grid-articles .card-article,
.grid-articles .card-text { position: relative; }
.grid-articles .card-article__title a,
.grid-articles .card-text__title a { color: inherit; text-decoration: none; }
.grid-articles .card-article__title a::after,
.grid-articles .card-text__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.grid-articles__fav { z-index: 2; }
.grid-articles .card-article:hover .card-article__title a,
.grid-articles .card-text:hover .card-text__title a { color: var(--color-gold); }

/* Conteneur des cartes texte (variantes liste) — desktop : colonne (visuel inchangé) */
.grid-articles__list-cards { display: flex; flex-direction: column; gap: 16px; }

/* ===== Mobile (≤768) : titre d'abord + cartes en slider horizontal (demande cliente) ===== */
@media (max-width: 768px) {
  /* Titre du bloc affiché AVANT la photo / les cartes */
  .grid-articles--liste-droite .grid-articles__list,
  .grid-articles--liste-gauche .grid-articles__list { order: -1; }
  .grid-articles--duo .grid-articles__right { order: -1; }

  /* Cartes texte (liste-droite / liste-gauche) en slider horizontal */
  .grid-articles__list-cards {
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 14px;
    margin: 0 -16px;
    padding: 4px 16px 10px;
  }
  .grid-articles__list-cards > .card-text { flex: 0 0 80%; scroll-snap-align: start; }

  /* Rangée de cartes (une / duo) en slider horizontal */
  .grid-articles--une .grid-articles__row,
  .grid-articles--duo .grid-articles__row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 14px;
    margin: 0 -16px;
    padding: 4px 16px 10px;
  }
  .grid-articles--une .grid-articles__row > *,
  .grid-articles--duo .grid-articles__row > * { flex: 0 0 80%; scroll-snap-align: start; }
}