/* ==========================================================================
   "Les bienfaits" (page épilation laser) — refonte 2026-08-19, à la demande
   de Rom ("il faut que cette partie claque"). Composant autonome (CSS + JS
   dédiés), sur le même principe que css/timeline.css : pensé pour être
   repris tel quel sur les pages Soins INDIBA / Beauté du regard si le
   rendu plaît.

   Partis pris :
   - Grille "bento" asymétrique (1 carte large en bandeau + 2 cartes côte à
     côte en dessous) au lieu d'une grille 3 colonnes uniformes — plus de
     caractère visuel. (Jusqu'au 2026-08-26 : 1 carte haute à gauche + 2
     cartes empilées à droite ; voir la note sur .benefits__grid.)
   - Chaque carte : numéro en dégradé (même duo rose que la timeline plus
     bas sur la page, pour une cohérence de palette), icône, lueur qui
     suit le curseur au survol (même principe que le spot du logo footer,
     voir js/components/site-footer.js), trait d'accent qui se révèle.
   - Entrée directionnelle asservie au scroll (pas une simple apparition
     déclenchée une fois) : chaque carte a un `data-direction` en HTML
     (left / top / bottom) et une variable `--p` (progression 0→1) mise à
     jour à chaque frame de scroll par js/benefits.js. La carte 1 arrive
     de la gauche, la carte 2 du haut, la carte 3 du bas — voir
     js/benefits.js pour la fenêtre de progression (courte, pour une
     arrivée rapide une fois la carte visible).

   (Le mot en filigrane derrière le titre et le bandeau de mots-clés en
   défilement, présents dans une première version, ont été retirés à la
   demande de Rom le 2026-08-19.)
   ========================================================================== */

.benefits {
  position: relative;
}

.benefits__grid {
  position: relative;
  z-index: 1;
}

/* ---- Grille bento ----
   Disposition revue le 2026-08-26 à la demande de Rom : « Une réduction
   durable » ne fait plus toute la hauteur de la colonne de gauche, elle a
   exactement la même hauteur que les deux autres cartes. Le bento est
   conservé mais retourné : la carte mise en avant passe en bandeau sur
   toute la largeur en rangée 1, les deux cartes secondaires se partagent
   la rangée 2. Les deux rangées en `1fr` garantissent l'égalité des trois
   hauteurs sans hauteur codée en dur (et sans risque de débordement : une
   rangée `1fr` ne descend jamais sous son contenu).
   (Avant : colonnes 1.1fr/1fr, la carte 1 sur `grid-row: 1 / 3`.) */
.benefits__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(2, 1fr);
  gap: var(--space-md);
}

.benefit-card {
  --p: 0;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background-color: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: var(--space-lg);
  opacity: var(--p);
  transition: box-shadow 0.4s ease;
  will-change: transform, opacity;
}

/* Direction d'arrivée par carte — --p (0→1) est mis à jour au scroll par
   js/benefits.js. Pas de transition CSS sur transform/opacity : la carte
   suit directement la valeur de progression, comme le tracé de la
   timeline plus bas sur la page. */
.benefit-card[data-direction="left"] {
  transform: translateX(calc((1 - var(--p)) * -90px));
}

.benefit-card[data-direction="top"] {
  transform: translateY(calc((1 - var(--p)) * -70px));
}

.benefit-card[data-direction="bottom"] {
  transform: translateY(calc((1 - var(--p)) * 70px));
}

/* Le magenta #F400A1 codé en dur ici et plus bas était un reste des
   placeholders d'avant la charte officielle (il avait été nettoyé partout
   sauf dans les rgba() de ce fichier et de timeline.css). Repassé sur
   var(--color-primary) via color-mix, et nettement renforcé : sur fond
   sombre, une lueur rose est ce qui fait exister le survol. (2026-08-21) */
.benefit-card:hover {
  box-shadow:
    0 20px 52px -10px color-mix(in srgb, var(--color-primary) 30%, transparent),
    var(--shadow-soft);
}

.benefit-card--featured {
  grid-column: 1 / -1;
  grid-row: 1;
}

.benefit-card--sub {
  grid-row: 2;
}

/* Lueur qui suit le curseur — même principe que le spot du logo footer
   (radial-gradient masqué, --mx/--my posés en JS au survol). */
.benefit-card__spot {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--color-primary) 26%, transparent), transparent 70%);
}

.benefit-card.is-active .benefit-card__spot {
  opacity: 1;
}

/* Cette ligne portait aussi un gros numéro 01/02/03 en dégradé, à l'opposé
   de l'icône (d'où le space-between d'origine). RETIRÉ LE 2026-08-25 à la
   demande de Rom : ne pas le remettre en déployant le composant sur les
   pages INDIBA et cils. Il ne reste que la pastille d'icône, calée à
   gauche. */
.benefit-card__top {
  display: flex;
  align-items: center;
  margin-bottom: var(--space-md);
}

.benefit-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--color-bg-alt);
  color: var(--color-primary-dark);
  transition: transform 0.5s ease, background-color 0.5s ease, color 0.5s ease;
}

.benefit-card__icon svg {
  width: 1.4rem;
  height: 1.4rem;
}

.benefit-card:hover .benefit-card__icon {
  transform: rotate(-8deg) scale(1.08);
  background: linear-gradient(135deg, var(--color-secondary), var(--color-primary));
  /* Encre sombre plutôt que blanche (2026-08-21) : le dégradé démarre sur
     le rose PÂLE de la charte, où du blanc n'a quasiment aucun contraste. */
  color: var(--color-text-on-secondary);
}

.benefit-card__title {
  margin-bottom: 0.4em;
}

/* `margin-bottom: auto` (et non 0) : les trois cartes ayant désormais la
   même hauteur, leurs textes n'ont pas la même longueur et il reste du vide
   en bas. Cette marge automatique absorbe ce vide et pousse le trait
   d'accent contre le bas de la carte — le survol souligne donc la carte
   entière, ce qui fait lire les hauteurs égales comme un parti pris. */
.benefit-card__text {
  margin-bottom: auto;
  color: var(--color-text-light);
}

.benefit-card--featured .benefit-card__text {
  color: var(--color-text);
  font-size: var(--font-size-lg);
}

/* Trait d'accent qui se révèle au survol */
.benefit-card__accent {
  position: relative;
  z-index: 1;
  margin-top: var(--space-md);
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--color-secondary), var(--color-primary), var(--color-primary-dark));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.5s ease;
}

.benefit-card:hover .benefit-card__accent {
  transform: scaleX(1);
}

@media (max-width: 900px) {
  .benefits__grid {
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }

  .benefit-card--featured {
    grid-column: auto;
    grid-row: auto;
  }

  .benefit-card--sub {
    grid-row: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .benefit-card {
    opacity: 1;
    transform: none !important;
    transition: none;
  }
}

/* ==========================================================================
   Cartes « Nos autres soins » (2026-09-06) — maillage interne en bas des
   pages prestation. Ce sont des .benefit-card passées en <a> : tout le
   reste (fond, ombre, lueur au curseur, entrée au scroll) est déjà là,
   il n'y a que le lien à neutraliser et le libellé à habiller.
   ========================================================================== */

a.benefit-card {
  text-decoration: none;
  color: inherit;
}

.benefit-card__cue {
  /* margin-top: auto pousse le libellé en bas de la carte : les deux cartes
     de la grille ont la même hauteur, leurs libellés restent alignés même
     si un texte est plus long que l'autre. */
  margin-top: auto;
  padding-top: var(--space-sm);
  color: var(--color-primary-dark);
  font-weight: 600;
}

/* La flèche suit le DERNIER MOT au lieu d'être un élément à part : avec un
   inline-flex, une ancre qui passe à la ligne sur mobile laissait la flèche
   décrochée à droite, centrée sur les deux lignes. Ici elle fait partie du
   flux du texte, donc elle reste collée à la fin de la phrase quel que soit
   le nombre de lignes. (Le margin-top: auto ci-dessus continue de marcher :
   un enfant de conteneur flex est un élément flex quel que soit son
   display.) */
.benefit-card__cue svg {
  vertical-align: -0.15em;
  margin-left: 0.4em;
  transition: transform 0.35s ease;
}

a.benefit-card:hover .benefit-card__cue svg {
  transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
  .benefit-card__cue svg { transition: none; }
}