/* Image+Text Block — Frontend, paramètres EXACTS Figma 638:9210
   Familles : XL / M / S (+ beige) / Cross  ·  côté gauche|droite  ·  + pub
   Réf. largeurs (artboard 1440) :
   - XL   : image 718×674 (sans cadre), texte 628, gap 74 (g) / 92 (d), texte droite inset 117
   - M    : image 481×501 (cadre 14), texte 636, gap 31, section h565 → py 18 / px 54
   - S    : image 365×359 (cadre 14), texte 636, gap 31, section h409 → py 11 / px 54
   - Cross: image 438×456 (cadre 14) chevauchant panneau beige 837/872, section h758
   - pub  : encart 240×420 */

.wp-block-bloc-th-image-text.image-text { padding: 0; }            /* XL : pleine largeur / fond perdu */
.image-text--m { padding: 18px 54px; }                              /* h565 − image 529 → 18 */
.image-text--s { padding: 11px 54px; }                              /* h409 − image 387 → 11 */

.image-text--beige { background-color: var(--color-beige); }

/* ===== INNER ===== */
.image-text__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 31px;
  max-width: 1440px;
  margin: 0 auto;
}
.image-text--side-right .image-text__inner { flex-direction: row-reverse; }

/* ===== MEDIA ===== */
.image-text__media { margin: 0; flex-shrink: 0; overflow: hidden; max-width: 100%; }
/* L'image garde le format du gabarit (aspect-ratio de .__media) et se recadre
   en couvrant le cadre, centrée horizontalement ET verticalement. */
.image-text__media img { width: 100%; height: 100%; object-fit: cover; object-position: center center; display: block; }

/* Cadre 14px blanc (M, S, Cross) — pas XL. Beige si --beige. */
.image-text--m .image-text__media,
.image-text--s .image-text__media,
.image-text--cross .image-text__media { border: 14px solid #fff; background: #fff; }
.image-text--beige .image-text__media { border-color: var(--color-beige); background: var(--color-beige); }

/* ===== CONTENT ===== */
.image-text__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
}

/* Tag rubrique (XL) — pastille beige, Caslon Display 18 */
.image-text__rubrique {
  align-self: flex-start;
  display: inline-flex; align-items: center;
  height: 27px; padding: 0 16px;
  border-radius: 100px;
  background: var(--color-beige); border: 1px solid var(--color-beige);
  font-family: var(--font-serif-light); font-size: 18px; line-height: 1;
  color: var(--color-warm-gray);
}

/* Titre — Caslon Display 32 (XL/M/Cross) */
.image-text__heading {
  margin: 0;
  font-family: var(--font-serif-light);
  font-size: var(--text-h2); font-weight: 400; line-height: 1.134;
  color: #1c1712;
}
/* S : titre = DIN Condensed 26 (Sous-titre L), capitales */
.image-text--s .image-text__heading {
  font-family: var(--font-condensed);
  font-size: var(--text-sub-l); font-weight: 700;
  letter-spacing: var(--ls-sub); text-transform: uppercase; line-height: var(--lh-sub);
}

/* Sous-titre (M, Cross) — DIN Condensed 18, collé au titre (gap 8 = 16−8) */
.image-text__sous-titre {
  margin: -8px 0 0 0;
  font-family: var(--font-condensed);
  font-size: var(--text-sub-s); font-weight: 700;
  letter-spacing: var(--ls-sub); text-transform: uppercase; line-height: var(--lh-sub);
  color: #1c1712;
}

/* Chef (XL) — collé au titre (gap 8 = 23−15) */
.image-text__chef {
  margin-top: -15px;
  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);
}
.image-text__chef svg { width: 24px; height: 24px; color: var(--color-gold); }

/* Corps — DIN Light 16 / lh 19 */
.image-text__body {
  font-family: var(--font-body);
  font-size: var(--text-body); font-weight: 300; line-height: 19px;
  color: var(--color-text);
}
.image-text__body p { margin: 0 0 16px 0; }
.image-text__body p:last-child { margin-bottom: 0; }
/* Cross : corps DIN Next Regular #4a5565 */
.image-text--cross .image-text__body { font-weight: 400; color: #4a5565; }

/* ===== BOUTONS ===== */
.image-text__button {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 10px;
  height: 44px; padding: 0 15px;
  text-decoration: none; cursor: pointer; transition: all 0.3s ease;
}
.image-text__button svg { transition: transform 0.3s ease; }
.image-text__button:hover svg { transform: translateX(4px); }
.image-text__button.btn-outline {
  background: var(--color-white); border: 0.5px solid var(--color-black); color: var(--color-black);
  font-family: var(--font-serif-light); font-size: 18px;
}
.image-text__button.btn-outline svg { color: var(--color-gold); }
.image-text__button.btn-outline:hover { background: var(--color-black); color: var(--color-white); }
.image-text__button.btn-outline:hover svg { color: var(--color-white); }
.image-text__button.btn-primary {
  background: var(--color-black); border: none; color: var(--color-white);
  font-family: var(--font-body); font-size: 16px; font-weight: 300;
}
.image-text__button.btn-primary svg { color: var(--color-gold-light); }
.image-text__button.btn-primary:hover { background: var(--color-gold); }

/* ===================== XL : pleine largeur (image fond perdu) ===================== */
.image-text--xl .image-text__inner { max-width: none; margin: 0; gap: 0; }   /* pleine largeur */
.image-text--xl .image-text__media { flex: 0 0 50%; aspect-ratio: 718 / 674; }   /* image = moitié, fond perdu */
.image-text--xl .image-text__content { flex: 1 1 0; gap: 23px; padding: 0 74px; }   /* texte = autre moitié */
.image-text--xl .image-text__body { max-width: 514px; }
.image-text--xl.image-text--side-right .image-text__content { padding: 0 74px 0 117px; }  /* inset Figma à gauche */

/* ===================== M : image 481 / texte 636 (bloc centré) ===================== */
.image-text--m .image-text__media { flex: 0 1 481px; aspect-ratio: 481 / 501; }
.image-text--m .image-text__content { flex: 0 1 636px; padding: 0 50px 0 38px; }

/* ===================== S / S beige : image 365 / texte 636 ===================== */
.image-text--s .image-text__media { flex: 0 1 365px; aspect-ratio: 365 / 359; }
.image-text--s .image-text__content { flex: 0 1 636px; padding: 0 50px 0 38px; }

/* ===================== CROSS : image (cadre) chevauchant un panneau beige ===================== */
.image-text--cross .image-text__inner {
  position: relative; display: block;
  min-height: 758px;
  max-width: 1440px; margin: 0 auto;
}
.image-text--cross .image-text__media {
  position: absolute; top: 154px;
  width: 438px; height: 456px;
  z-index: 2;
}
.image-text--cross .image-text__content {
  position: absolute; top: 108px;
  min-height: 547px;
  background: var(--color-beige);
  gap: 16px; justify-content: center;
}
/* Cross gauche : image à gauche (135), panneau 837 à droite (467) */
.image-text--cross.image-text--side-left .image-text__media { left: 135px; }
.image-text--cross.image-text--side-left .image-text__content { left: 467px; width: 837px; padding: 48px 50px 48px 159px; }
/* Cross droite : image à droite (870), panneau 872 à gauche (129) */
.image-text--cross.image-text--side-right .image-text__media { left: 870px; }
.image-text--cross.image-text--side-right .image-text__content { left: 129px; width: 872px; padding: 48px 71px 48px 50px; }

/* ===================== VARIANTE PUB : encart latéral 240×420 ===================== */
.image-text--has-pub { position: relative; }
.image-text--has-pub .image-text__inner { max-width: 1440px; }
.image-text__pub {
  flex: 0 0 240px; width: 240px; height: 420px;
  background-color: #e7e7e7;
  display: flex; align-items: center; justify-content: center; text-align: center;
  overflow: hidden;
}
.image-text__pub > a { display: block; width: 100%; height: 100%; }
.image-text__pub img { width: 100%; height: 100%; object-fit: cover; display: block; }
.image-text__pub-label { font-family: var(--font-body); font-size: 22px; color: #a9a9a9; line-height: 1.3; }

/* M-pub : texte 450 + image 365 + encart 240 (encart à droite) */
.image-text--m.image-text--has-pub { padding: 26px 54px; display: flex; align-items: center; justify-content: center; gap: 44px; }
.image-text--m.image-text--has-pub .image-text__inner { flex: 0 1 auto; gap: 44px; margin: 0; }
.image-text--m.image-text--has-pub .image-text__media { flex: 0 1 365px; aspect-ratio: 365 / 359; }
.image-text--m.image-text--has-pub .image-text__content { flex: 0 1 450px; }

/* Cross-pub : Cross + encart 240 à droite */
.image-text--cross.image-text--has-pub { position: relative; }
.image-text--cross.image-text--has-pub .image-text__pub { position: absolute; top: 50%; right: 54px; transform: translateY(-50%); }

/* ===================== RESPONSIVE ===================== */
/* Tablette : on annule le chevauchement absolu de la variante Cross
   (image + panneau repassent en flux normal, côte à côte) */
@media (max-width: 1024px) {
  .image-text--cross .image-text__inner { display: flex; align-items: center; min-height: 0; }
  .image-text--cross .image-text__media,
  .image-text--cross.image-text--side-left .image-text__media,
  .image-text--cross.image-text--side-right .image-text__media { position: static; width: auto; flex: 0 1 438px; aspect-ratio: 438 / 456; }
  .image-text--cross .image-text__content,
  .image-text--cross.image-text--side-left .image-text__content,
  .image-text--cross.image-text--side-right .image-text__content { position: static; width: auto; flex: 1 1 auto; padding: 40px; min-height: 0; }
}

/* Mobile : empilement complet, médias pleine largeur, TEXTE AVANT IMAGE.
   (l'image <figure> précède le contenu dans le DOM → order pour passer le texte en 1er) */
@media (max-width: 768px) {
  .wp-block-bloc-th-image-text.image-text,
  .image-text--m, .image-text--s { padding: 24px; box-sizing: border-box; }

  .image-text__inner,
  .image-text--side-right .image-text__inner,
  .image-text--xl .image-text__inner,
  .image-text--cross .image-text__inner { flex-direction: column; gap: 24px; }

  .image-text__media { flex-basis: auto !important; width: 100%; order: 2; }
  .image-text__content { flex-basis: auto !important; width: 100%; padding: 0 !important; order: 1; }
  .image-text--xl .image-text__content { padding: 0 !important; }
  .image-text--xl.image-text--side-right .image-text__content { padding-left: 0; }
  .image-text--xl .image-text__body { max-width: none; }

  .image-text--m.image-text--has-pub,
  .image-text--cross.image-text--has-pub { flex-direction: column; gap: 24px; }
  .image-text--m.image-text--has-pub .image-text__inner { flex-direction: column; }
  .image-text--cross.image-text--has-pub .image-text__pub { position: static; transform: none; margin: 0 auto; order: 3; }
  .image-text__pub { width: 100%; max-width: 320px; margin: 0 auto; order: 3; }
}

/* ===================== SOUS-TITRES NON CAPITALISÉS (réglage subUppercase) ===================== */
.image-text--sub-lower .image-text__sous-titre { text-transform: none; }
.image-text--sub-lower .image-text__heading { text-transform: none; }

/* ===================== HERO EN HAUT (article à une seule image) =====================
   Quand l'article ne compte qu'une image, elle est placée en haut, pleine largeur,
   et le texte s'affiche dessous en colonne (au lieu de l'image au milieu, à côté du texte). */
.image-text--hero-top { padding: 24px 0 !important; }
.image-text--hero-top .image-text__inner {
  display: block;
  max-width: 1272px;
  margin: 0 auto;
  padding: 0 24px;
  gap: 0;
  box-sizing: border-box;
}
.image-text--hero-top .image-text__media {
  width: 100%;
  border: 0 !important;
  background: none !important;
  aspect-ratio: auto !important;
  display: flex;
  justify-content: center;
  margin: 0 0 44px;
  order: 0;
}
.image-text--hero-top .image-text__media img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 620px;
  object-fit: contain;
}
.image-text--hero-top .image-text__content {
  max-width: 848px;
  margin: 0 auto;
  padding: 0 !important;
  order: 1;
}
@media (max-width: 768px) {
  .image-text--hero-top { padding: 16px 0 !important; }
  .image-text--hero-top .image-text__media { order: 0; margin-bottom: 28px; }
  .image-text--hero-top .image-text__content { order: 1; }
  .image-text--hero-top .image-text__media img { max-height: 480px; }
}

/* ===== Cliquable : image (overlay) + titre vers l'article/le lien ===== */
.image-text__media { position: relative; }
.image-text__media-link { position: absolute; inset: 0; z-index: 2; }
.image-text__heading a { color: inherit; text-decoration: none; }
.image-text__heading a:hover { color: var(--color-gold); }