/* ============================================================================
   « Où en êtes-vous ? » — chapeau éditorial + trois points de départ.
   Node 3104:19960.
   ========================================================================= */


.offers .shell {
  display: flex;
  flex-direction: column;
  gap: var(--sp-48);
}

/* ── Chapeau ───────────────────────────────────────────────────────────
   Aligné par le BAS : le bouton se cale sur la dernière ligne du chapô, pas
   sur le haut du titre. C'est ce qui tient l'équilibre quand le titre passe
   sur deux lignes. */
.offers__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-40);
}

.offers__intro {
  display: flex;
  flex-direction: column;
  gap: var(--sp-24);
  inline-size: 62.05%; /* 824 / 1328 */
}

.offers__lead {
  inline-size: 400px;
  max-inline-size: 100%;
  color: var(--c-ink-2);
}

/* ── Étiquette d'amorce ────────────────────────────────────────────────── */
.offers__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-16);
}

.offers__tag {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  color: var(--c-ink-2);
  text-transform: uppercase;
}

.offers__mark {
  flex: none;
  inline-size: 12px;
  block-size: 12px;
}

/* ── Les trois cartes ──────────────────────────────────────────────────
   Grille pour le macro : trois colonnes égales, et surtout des hauteurs
   égales, ce que la maquette obtient carte par carte. C'est cette égalité
   qui aligne les trois puits image sur une même ligne. */
.offers__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-24);
  list-style: none;
}

.offer {
  /* Hauteur du puits image et diamètre du visuel : deux mesures ponctuelles
     de la maquette, nommées ici plutôt que semées dans les règles. */
  --offer-media: 204px;
  --offer-fleur: 395px;
  /* Fond du cliché de la fleur, relevé au pixel : la forme chromée se pose sur
     le même aplat, la teinte de la carte s'y applique donc à l'identique. */
  --offer-fond: #f7f5f4;
  /* Diamètre de la fleur chromée en hauteurs de puits : au-delà de 1, elle
     déborde du cadre, volontairement, comme le visuel d'origine (1,45). */
  --chrome-scale: 1.45;

  display: flex;
  flex-direction: column;
  gap: var(--sp-48);
  padding: var(--sp-16);
  border-radius: var(--r-lg);
  background: var(--c-brown);
  overflow: clip;
}

.offer__text {
  display: flex;
  flex-direction: column;
  gap: var(--sp-16);
}

/* Le bloc titre est en retrait de 8 de plus que le reste de la carte : c'est
   voulu par la maquette, le filet et le corps courent plus large que le nom. */
.offer__head {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  padding: var(--sp-8);
}

.offer__name {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  color: var(--c-cream);
}

.offer__mark {
  flex: none;
  inline-size: 20px;
  block-size: 20px;
}

.offer__tagline {
  color: var(--c-cream);
  opacity: 0.8;
}

.offer__body {
  padding-block-start: var(--sp-12);
  border-block-start: 1px solid var(--c-border);
  color: var(--c-ink-inv-2);
}

/* ── Puits image ───────────────────────────────────────────────────────
   `auto` en marge haute pousse le visuel en bas de carte : à hauteurs égales,
   les textes ne font pas la même longueur et sans ça les puits se
   décaleraient. L'écart de 48 reste garanti par la gouttière de la carte. */
.offer__media {
  position: relative;
  margin-block-start: auto;
  block-size: var(--offer-media);
  border-radius: var(--r-sm);
  background: var(--offer-fond);
  overflow: clip;
  /* Le fondu de teinte ne doit pas déborder sur le fond de la carte. */
  isolation: isolate;
}

.offer__media img {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  inline-size: var(--offer-fleur);
  block-size: var(--offer-fleur);
  translate: -50% -50%;
  object-fit: cover;
}

/* Forme chromée : le canvas remplit le puits, c'est le shader qui cadre. Le
   cliché de la fleur n'est qu'un repli — il disparaît dès que la forme est
   peinte (et, masqué, son chargement différé ne se déclenche jamais). */
.offer__chrome {
  position: absolute;
  inset: 0;
  display: block;
  inline-size: 100%;
  block-size: 100%;
}

/* Cercle, sablier et flèche sont des glyphes, pas un visuel qui déborde : ils
   tiennent en entier dans le puits (0,85 hauteur de puits). L'image de repli
   est tirée au même cadrage (qa/chrome.html, scale = 0,85 × 204 / 395). */
.offer__media[data-chrome="cercle"],
.offer__media[data-chrome="sablier"],
.offer__media[data-chrome="fleche"] {
  --chrome-scale: 0.85;
}

.offer__media.is-chrome img {
  display: none;
}

/* Fusion « color » : le chrome garde sa luminance et prend la teinte du bloc.
   Un `grayscale()` retirerait aussi la nuance chaude que la maquette conserve. */
.offer__tint {
  position: absolute;
  inset: 0;
  background: var(--c-brown);
  mix-blend-mode: color;
}

/* ── Repli ─────────────────────────────────────────────────────────────
   Trois cartes ne se répartissent pas en deux colonnes sans laisser une
   orpheline : on passe directement de trois à une. */
@media (max-width: 1023px) {
  .offers__head {
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-32);
  }

  .offers__intro {
    inline-size: 100%;
  }

  .offers__cta {
    align-self: flex-start;
  }

  .offers__list {
    grid-template-columns: 1fr;
    gap: var(--sp-24);
  }
}

@media (max-width: 640px) {
  .offers .shell {
    gap: var(--sp-32);
  }
}