/* Bloc Recette — Frontend, paramètres EXACTS Figma 638:9907 (artboard 1440×876)
   image 707 (default/v3/pub) ou 733 (variant2) · panneau blanc 557×593 chevauchant l'image
   default : image G, panneau D (chevauche 31)   ·   variant2 : image D, panneau G (chevauche 78)
   variant3 : = default + fond blanc + panneau bordé   ·   pub : default + encart 240×420 */

.wp-block-bloc-th-bloc-recette.bloc-recette { position: relative; }

/* Fonds par variante */
.bloc-recette--default,
.bloc-recette--variant2 { background-color: var(--color-beige); }
.bloc-recette--variant3,
.bloc-recette--pub { background-color: var(--color-white); }

/* ===== Layout ===== */
.bloc-recette__inner {
  display: grid;
  grid-template-columns: 707fr 733fr;   /* image 49% / contenu 51% */
  align-items: stretch;
  position: relative;
}
.bloc-recette--pub .bloc-recette__inner {
  grid-template-columns: minmax(0, 707fr) minmax(0, 470fr) 240px;   /* image 707 · contenu 470 · pub 240 */
  padding-right: 23px;                                              /* marge droite de l'encart (Figma 1177→1417) */
}

/* Ordre selon le côté de la photo */
.bloc-recette__media { order: 1; }
.bloc-recette__col   { order: 2; }
.bloc-recette--img-right .bloc-recette__media { order: 2; }
.bloc-recette--img-right .bloc-recette__col   { order: 1; }

/* Photo pleine hauteur (fond perdu) */
.bloc-recette__media {
  position: relative; margin: 0;
  align-self: stretch; min-height: 876px;
  overflow: hidden;
}
.bloc-recette__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.bloc-recette__media--empty { background-color: var(--color-warm-gray); }

/* Colonne contenu : place le stack (accent+panneau) côté image */
.bloc-recette__col {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; justify-content: flex-start;
  padding: 57px 0 60px 0;
}
.bloc-recette--img-left .bloc-recette__col,
.bloc-recette--pub .bloc-recette__col   { align-items: flex-start; }   /* panneau vers l'image (gauche) */
.bloc-recette--img-right .bloc-recette__col { align-items: flex-end; }  /* panneau vers l'image (droite) */

/* Stack accent + panneau (largeur du panneau), chevauche l'image */
.bloc-recette__stack {
  display: flex; flex-direction: column;
  width: 557px; max-width: 100%;
}
.bloc-recette--img-left .bloc-recette__stack  { margin-left: -31px; }   /* chevauche image de 31 */
.bloc-recette--img-right .bloc-recette__stack { margin-right: -78px; }  /* chevauche image de 78 */
.bloc-recette--pub .bloc-recette__stack       { margin-left: -111px; } /* pub : panneau décalé */

/* Accent « Recette du mois » (Fantasm 56, gris chaud) */
.bloc-recette__titre-accent {
  font-family: var(--font-accent);
  font-size: var(--text-accent); font-weight: 400; line-height: var(--lh-accent);
  color: var(--color-warm-gray);
  margin: 0 0 56px 0;
}
.bloc-recette--img-left .bloc-recette__titre-accent { margin-left: 93px; }   /* indenté au-dessus du panneau */
.bloc-recette--pub .bloc-recette__titre-accent { margin-left: 170px; }       /* pub : panneau décalé → accent à 170 */
/* variant2 : accent calé sur le bord gauche du panneau (pas d'indentation) */

/* Panneau blanc 557 × min 593 */
.bloc-recette__panel {
  background-color: var(--color-white);
  width: 557px; max-width: 100%;
  min-height: 593px;
  padding: 42px 56px 50px 39px;     /* titre à (39,42), bouton à droite (pr 56) */
  display: flex; flex-direction: column; gap: 16px;
}
.bloc-recette--variant3 .bloc-recette__panel,
.bloc-recette--pub .bloc-recette__panel { border: 2px solid var(--color-beige); }

/* Titre + sous-titre (gap 4) */
.bloc-recette__head { display: flex; flex-direction: column; gap: 4px; }
.bloc-recette__title {
  font-family: var(--font-serif); font-size: var(--text-h2);
  font-weight: 400; line-height: var(--lh-h2);
  margin: 0; color: var(--color-text);
}
.bloc-recette__subtitle {
  font-family: var(--font-serif-light); font-size: var(--text-h3);
  font-weight: 400; line-height: 1;
  margin: 0; color: var(--color-text);
}

/* Chef (Tag chef DIN Condensed 18) */
.bloc-recette__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);   /* casse normale (Figma) — pas de capitales */
  color: var(--color-warm-gray);
}
.bloc-recette__chef svg { width: 24px; height: 24px; color: var(--color-gold); }

/* Ingrédients : 2 groupes empilés, barre dorée à gauche */
.bloc-recette__ingredients {
  position: relative;
  padding-left: 28px; margin-left: 38px; margin-top: 54px;   /* ~70px sous le chef */
}
.bloc-recette__bar {
  position: absolute; left: 0; top: 8px;
  width: 4px; height: 60px; background: var(--color-gold);
}
.bloc-recette__groupes { display: grid; grid-template-columns: 1fr; gap: 25px; }
.bloc-recette__groupe { display: flex; flex-direction: column; gap: 6px; }
.bloc-recette__groupe-titre {
  font-family: var(--font-condensed); font-size: var(--text-sub-s);
  font-weight: 700; letter-spacing: var(--ls-sub); text-transform: uppercase;
  line-height: 1.2; margin: 0; color: var(--color-text);
}
.bloc-recette__ingredient {
  font-family: var(--font-body); font-size: var(--text-body);
  font-weight: 300; line-height: 19px; margin: 0; color: var(--color-text);
}

/* Bouton Découvrir (Primary noir) — bas-droite du panneau */
.bloc-recette__button {
  align-self: flex-end; margin-top: auto;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-width: 147px; height: 44px; padding: 0 15px;
  background: var(--color-black); color: var(--color-white);
  font-family: var(--font-body); font-size: 16px; font-weight: 300;
  text-decoration: none; transition: background 0.3s ease;
}
.bloc-recette__button svg { width: 24px; height: 24px; color: var(--color-gold-light); transition: transform 0.3s ease; }
.bloc-recette__button:hover { background: var(--color-gold); color: var(--color-white); }
.bloc-recette__button:hover svg { transform: translateX(4px); }

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

/* ===== Responsive ===== */
/* Tablette + mobile : grille en 1 colonne, photo en pleine largeur,
   panneau empilé SANS chevauchement (marges négatives neutralisées) */
@media (max-width: 1024px) {
  .bloc-recette__inner,
  .bloc-recette--pub .bloc-recette__inner {
    grid-template-columns: 1fr;
    padding-right: 0;
  }
  /* La photo, en fond perdu (position:absolute), impose désormais sa hauteur */
  .bloc-recette__media { order: 1 !important; position: relative; min-height: 320px; }
  .bloc-recette__media img { position: absolute; }
  .bloc-recette__col   { order: 2 !important; align-items: center !important; padding: 0; justify-content: center; }
  .bloc-recette__pub   { order: 3; margin: 0 auto 40px; }

  /* On neutralise tous les chevauchements (marges négatives) */
  .bloc-recette__stack,
  .bloc-recette--img-left .bloc-recette__stack,
  .bloc-recette--img-right .bloc-recette__stack,
  .bloc-recette--pub .bloc-recette__stack {
    margin: 0 auto;
    width: 100%;
    max-width: 600px;
  }

  .bloc-recette__panel { width: 100%; max-width: none; min-height: 0; box-sizing: border-box; }
  .bloc-recette__titre-accent,
  .bloc-recette--img-left .bloc-recette__titre-accent,
  .bloc-recette--pub .bloc-recette__titre-accent {
    margin-left: 0;
    margin-top: 32px;
  }
  .bloc-recette__ingredients { margin-left: 0; margin-top: 30px; }
}

/* Mobile : réduction du panneau et de l'accent */
@media (max-width: 768px) {
  .bloc-recette__panel { padding: 28px; }
  .bloc-recette__titre-accent { font-size: 40px; margin-bottom: 32px; }
  .bloc-recette__stack,
  .bloc-recette--img-left .bloc-recette__stack,
  .bloc-recette--img-right .bloc-recette__stack,
  .bloc-recette--pub .bloc-recette__stack { max-width: none; }
}

/* ===== Recette cliquable : image (overlay) + titre ===== */
.bloc-recette__media-link { position: absolute; inset: 0; z-index: 2; }
.bloc-recette__title a { color: inherit; text-decoration: none; }
.bloc-recette__title a:hover { color: var(--color-gold); }

/* Accent « Recette du mois » : version mobile affichée AVANT la photo (desktop = version dans le panneau) */
.bloc-recette__accent-mobile { display: none; }
@media (max-width: 768px) {
  /* Ordre mobile : titre (accent) → photo → détails */
  .bloc-recette__accent-mobile {
    display: block;
    order: -1 !important;
    margin: 0 0 20px;
    font-family: var(--font-accent);
    font-size: 40px;
    line-height: 1;
    color: var(--color-gold);
  }
  .bloc-recette__media { order: 1 !important; }
  .bloc-recette__col { order: 2 !important; }
  /* On masque l'accent d'origine (dans le panneau) sur mobile pour éviter le doublon */
  .bloc-recette__stack > .bloc-recette__titre-accent { display: none; }
  /* L'accent d'origine réservait un espace en haut du panneau : on le récupère */
  .bloc-recette__titre-accent,
  .bloc-recette--img-left .bloc-recette__titre-accent,
  .bloc-recette--pub .bloc-recette__titre-accent { margin-top: 0; }
}