/* ============================================================
   Section 02 — pourquoi · Figma node 5369:22822
   Desktop 1440 : eyebrow → titre 54 → intro → timeline 3 cards
   (tags HIER/PUIS/AUJOURD'HUI reliés par ligne pointillée) → note.
   ============================================================ */

.pourquoi {
  font-family: var(--font-sans);
  padding-inline: clamp(20px, 8.33vw, 120px);
  color: var(--color-ink);
}

.pourquoi__container {
  max-width: var(--container-max);
  margin-inline: auto;
}

/* ---- En-tête ------------------------------------------------ */

.pourquoi__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Eyebrow : pilule blanche + pilule dégradée interne + texte dégradé */
.pourquoi__eyebrow {
  margin: 0;
  display: inline-flex;
  padding: 3px;
  background: var(--color-white);
  border: 1px solid rgba(229, 231, 233, 0.5); /* --color-border @50% */
  border-radius: var(--radius-pill);
  box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.05);
}

.pourquoi__eyebrow-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 24px;
  border-radius: var(--radius-pill);
  /* hors tokens: mesuré Figma (dégradé pêche → lilas) */
  background: linear-gradient(90deg, #fff1ed 0%, #f0efff 100%);
}

.pourquoi__eyebrow-text {
  font-size: var(--text-eyebrow);
  line-height: var(--text-eyebrow--line-height);
  font-weight: var(--text-eyebrow--font-weight);
  letter-spacing: var(--text-eyebrow--letter-spacing);
  text-transform: uppercase;
  background: linear-gradient(90deg, var(--color-accent-coral) 0%, var(--color-primary-vivid) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.pourquoi__title {
  margin: 19px 0 0;
  max-width: 751px;
  font-size: clamp(32px, 4.5vw, var(--text-h2));
  line-height: 1.04; /* 56px @ 54px */
  font-weight: var(--text-h2--font-weight);
  letter-spacing: var(--text-h2--letter-spacing);
  color: #2d2d2d; /* hors tokens: mesuré Figma */
}

.pourquoi__intro {
  margin: 26px 0 0;
  max-width: 600px;
  font-size: var(--text-body);
  line-height: var(--text-body--line-height);
  font-weight: var(--text-body--font-weight);
  color: rgba(17, 17, 17, 0.8); /* --color-neutral-950 @80% */
}

/* ---- Timeline : 3 cards + ligne pointillée ------------------ */

.pourquoi__timeline {
  position: relative;
  margin-top: 87px;
}

/* Filet pointillé reliant les tags — retours 13/08 : les 3 segments
   par card ne se raccordaient jamais parfaitement (chaque card porte sa
   propre origine, et la 3e est tournée). Remplacés par UN SEUL filet
   continu porté par la grille, en dégradé 1962 → 2013 → 2026 :
   part du badge « 1962 » et s'arrête pile au badge « 2026 ».
   Le motif pointillé est un masque, la couleur un dégradé. */
.pourquoi__cards::before {
  content: "";
  position: absolute;
  top: 44px; /* centre des tags (28px de padding + 17px de demi-hauteur) */
  left: 28px; /* bord gauche du badge 1 — le filet passe SOUS lui */
  /* fin = bord gauche du badge 3 : 2/3 de la rangée + 16px (gouttières) + 31px
     (28px de padding, +3px pour absorber le décalage dû à la rotation) */
  width: calc(66.6667% + 19px);
  height: 2px;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    var(--color-accent-coral) 0%,
    #b36aa5 50%,
    var(--color-primary-vivid) 100%
  );
  -webkit-mask-image: repeating-linear-gradient(90deg, #000 0 6px, transparent 6px 12px);
  mask-image: repeating-linear-gradient(90deg, #000 0 6px, transparent 6px 12px);
}

.pourquoi__cards {
  position: relative; /* ancre le filet continu */
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 1136px; /* cards 362×3 + gaps 24 (mesuré : rangée 1135) */
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.pourquoi__card {
  position: relative;
  min-height: 216px; /* retour 13/08 : cards un peu plus hautes */
  padding: 28px;
  border-radius: var(--radius-lg);
}

/* hors tokens: fonds pastels mesurés Figma */
.pourquoi__card--hier        { background: #fff1ed; }
.pourquoi__card--puis        { background: #f7f0f6; }
.pourquoi__card--aujourdhui  {
  background: linear-gradient(160deg, #e8e9fa 0%, #f2edff 55%, #faf7ff 100%); /* retour 13/08 : léger dégradé */
  /* retours 13/08 : rotation dans l'AUTRE sens (+3° et non −3°).
     La rotation remonte le tag de ~6px (dx·sin3° avec dx ≈ −117px) :
     les 6px de translateY la compensent pour que « 2026 » reste aligné
     sur « 1962 » et « 2013 ». */
  transform: translateY(6px) rotate(3deg);
}

/* la rotation doit survivre au reveal (qui anime transform) */
.pourquoi__card--aujourdhui.reveal        { transform: translateY(30px) rotate(3deg); }
.pourquoi__card--aujourdhui.reveal.is-in  { transform: translateY(6px) rotate(3deg); }

/* Tag pilule : coque blanche + pastille pleine */
.pourquoi__tag {
  margin: 0;
  position: relative;
  z-index: 2;
  display: inline-flex;
  padding: 3px;
  background: var(--color-white);
  border: 1px solid rgba(229, 231, 233, 0.5); /* --color-border @50% */
  border-radius: var(--radius-pill);
  box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.05);
}

.pourquoi__tag-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  padding: 2px 12px;
  border-radius: var(--radius-pill);
  font-size: var(--text-small);
  line-height: var(--text-small--line-height);
  font-weight: 500;
  letter-spacing: 0.04em; /* 0.56px @ 14px */
  text-transform: uppercase;
  text-align: center;
  color: var(--color-white);
}

.pourquoi__tag-label--hier        { background: var(--color-accent-coral); }
.pourquoi__tag-label--puis        { background: #b36aa5; } /* hors tokens: mesuré Figma */
.pourquoi__tag-label--aujourdhui  { background: var(--color-primary-vivid); }

.pourquoi__card-title {
  margin: 26px 0 0;
  font-size: var(--text-h5);
  line-height: var(--text-h5--line-height);
  font-weight: var(--text-h5--font-weight);
  letter-spacing: -0.01em; /* hors tokens: -0.21px mesuré Figma (token h5 = -0.02em) */
  color: var(--color-border-dark); /* #27292E — seul token exact pour ce texte */
}

.pourquoi__card-text {
  margin: 8px 0 0;
  max-width: 306px;
  font-size: var(--text-body-sm);
  line-height: var(--text-body-sm--line-height);
  font-weight: var(--text-body-sm--font-weight);
  color: rgba(17, 17, 17, 0.7); /* --color-neutral-950 @70% */
}

/* Étoiles décoratives (card Design Brain) */
.pourquoi__star {
  position: absolute;
  pointer-events: none;
}

.pourquoi__star--lg { top: 47px; right: 115px; width: 61px; height: 59px; }
.pourquoi__star--sm { top: 31px; right: 115px; width: 24px; height: 23px; }
.pourquoi__star--md { top: 35px; right: 63px;  width: 39px; height: 38px; }

/* ---- Note de synthèse --------------------------------------- */

.pourquoi__note {
  margin: 54px auto 0;
  max-width: 720px; /* retour 13/08 : passage assumé sur 2 lignes (989 avant) */
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 32px; /* bloc agrandi en conséquence */
  background: var(--color-white);
  border: 1px solid rgba(229, 231, 233, 0.5); /* --color-border @50% */
  border-radius: 28px; /* capsule 2 lignes : la pilule 70px n'a plus de sens */
  box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.05);
  font-size: var(--text-body-sm);
  line-height: var(--text-body-sm--line-height);
  text-align: center;
  color: rgba(38, 41, 46, 0.7); /* --color-ink @70% */
}

.pourquoi__note strong {
  font-weight: 500; /* Manrope Medium */
}

/* ---- Responsive (maquette desktop-only → adaptation) --------- */

@media (max-width: 1024px) {
  .pourquoi__cards::before {
    display: none; /* le filet ne relie plus les tags une fois la grille repliée */
  }

  .pourquoi__card--aujourdhui,
  .pourquoi__card--aujourdhui.reveal.is-in { transform: none; } /* pas de rotation en grille repliée */

  .pourquoi__cards {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }
}

@media (max-width: 768px) {
  .pourquoi__cards {
    grid-template-columns: 1fr;
  }

  .pourquoi__timeline {
    margin-top: 56px;
  }

  .pourquoi__note {
    border-radius: var(--radius-xl); /* pilule → capsule multi-lignes */
  }
}