/* benefits.css — section « Pourquoi le Croque Studio ? » (#benefits).

   Toutes les valeurs ci-dessous ont été relevées sur la source le 2026-08-10,
   animations terminées (document.getAnimations() vide), et re-lues à deux
   offsets de défilement différents (règle A1#5). Rien n'est extrapolé.

   Structure de section (identique aux trois paliers) : colonne
   [intro] - gap - [grille], padding 60px 40px 145px (30px 20px 70px à 809px),
   gap intro→grille 60px (40px à 809px).

   Grille — RÉGULIÈRE, aucun décalage vertical d'une colonne sur l'autre
   (contrairement à ce qu'annonçait le brief, écrit sur un relevé périmé) :
     1440 : 6 colonnes de 218,33px, gap 10 ; rangées à y 4407 / 4915 / 5423,
            pas constant de 508 = 498 (carte) + 10 (gap).
            c1,c2,c6,c7 span 3 (675px) ; c3,c4,c5 span 2 (446,67px).
     1024 : 2 colonnes de 467, gap 10 ; rangées à 4083 / 4459 / 4834 / 5209,
            pas constant de 375,3 = 365,3 + 10. Ordre visuel c3,c1 / c2,c4 /
            c5,c7 / c6 (pleine largeur) — différent de l'ordre du DOM.
     390  : une colonne, gap 14, ordre naturel 1→7.

   Carte — hauteur FIXE (498px à 1440, 365,3px à 1024, auto à 390), padding
   30px 20px, rayon 40px, flex column. Le contenu remplit exactement la
   hauteur : sur les sept cartes et aux deux paliers, image + espaceur +
   bloc texte = hauteur de contenu à 0,1px près. La boîte d'illustration
   n'a donc PAS de hauteur propre : elle prend le reste (`flex: 1`), et
   c'est ce qui reproduit les sept hauteurs mesurées (299,6 / 219,2 / 299,6 /
   247,2 / 267,2 / 247,2 / 239,2 à 1440 ; 178,4 / 126,8 / 178,4 / 152 / 152 /
   132 / 153,2 à 1024) sans les coder une par une.
   Espaceur entre l'illustration et le texte : 40px quand l'illustration est
   en haut, 60px quand elle est en bas. Titre → texte : 10px.
   Alternance : 1440 → cartes 2, 4, 6 texte-en-haut ; 1024 → SEULE la carte 6
   reste texte-en-haut ; 390 → toutes illustration-en-haut.

   Galbe (le SVG décoratif) — il n'est PAS calé sur la boîte de
   l'illustration. Relevé du conteneur sur la source (`.framer-1thgu32-
   container`) : `position:absolute; left:47%; top:50%; width:81%;
   transform:translate(-50%,-50%)`, en pourcentage de la boîte
   d'illustration, hauteur déduite du ratio du viewBox. Il déborde donc de
   cette boîte et c'est `overflow:hidden` de la carte qui le rogne (vérifié
   sur les 7 cartes aux deux paliers : largeur 514,34 pour une boîte de 635,
   329,4 pour 406,7). L'atténuation vient de `opacity:.3` posée sur ce même
   conteneur ancêtre, pas sur le fill du tracé (piège A1#1).

   Les sept tracés sont uniques (viewBox 175×90, 164×160, 239×234, 473×471,
   218×218, 501×291, 119×118) : cinq galbes de Bézier, deux vraies étoiles.
   `.starburst` n'est donc pas utilisable ici (piège A1#0) — les tracés sont
   inlinés dans le markup, le fill vient d'une classe modificateur.

   Bord festonné de haut de section — MANQUE DU BRIEF (A0). La source ouvre
   la section par 15 bosses `border-radius: 90px 90px 0 0` (donc rognées par
   le navigateur à un rayon de largeur/2 : un demi-disque) posées sur une
   bande pleine, dans un conteneur absolu qui remonte au-dessus de la
   section et mord sur l'orange de #services :
       1440 : bosse 96 × 75,6 ; conteneur 1440 × 75,6 à top -61px
       1024 : bosse 68,27 × 53,76 ; conteneur 1024 × 53,76 à top -40px
       390  : bosse 26 × 20,47 ; conteneur 390 × 20,47 à top -20px
   La forme fut d'abord reconstruite localement, la primitive partagée
   `.scallop-top` (layout.css) ne rendant alors qu'un demi-disque seul, sans la
   bande. Cette primitive a été CORRIGÉE le 2026-08-11 — la source pose la même
   forme sur #statistics — et la section l'utilise désormais : la construction
   locale et ses tokens `--feston-*` ont disparu, seule la couleur reste ici.
   Géométrie et paliers : voir `--scallop-*` dans tokens.css.

   Typographie relevée :
     titre    Climate Crisis 400 — 68/68 (1440) · 52/52 (1024) · 42/42 + ls
              -1,6px (390), couleur --c-sand, `text-wrap: balance`,
              conteneur de 610 / 600 / pleine largeur
     h3 carte Climate Crisis 400 — 27/32,4 · 22/26,4 · 22/26,4, ls normal
     p carte  Poppins 600 — 20/28 ls -1px · 18/25,2 ls -0,9px (1024 ET 390)
     sticker  Poppins 600 — 20/26 ls -0,8px · 16/20,8 ls -0,64px ·
              15/19,5 ls -0,6px
   Largeur du bloc texte : titre et texte à 400px centrés (1440 et 1024) ;
   à 390 le titre prend toute la largeur (310) et le texte est borné à 300.

   Sticker « Benefitsss » — absolu par rapport à l'intro à 1440 et 1024,
   mais EN FLUX, centré, au-dessus du titre à 390 (relevé : l'intro y mesure
   205,5 = 79,5 de sticker + 126 de titre). Aucun `transform` de
   positionnement n'est utilisé : les keyframes `sticker-float`
   (layout.css) réécrivent intégralement `transform`, et tout décalage qui
   y serait posé disparaîtrait dès que stickers.js ajoute `.is-floating`. */

.benefits {
  position: relative;
  background: var(--c-olive-black);
  padding: 60px 40px 145px;
  text-align: center;

  /* Le bord festonné du haut vient de la primitive `.scallop-top` (layout.css),
     portée par la section dans le markup ; il se peint dans la couleur de la
     section, sur l'orange de #services au-dessus. La section ne doit donc pas
     passer en overflow: hidden/clip. */
  --scallop-color: var(--c-olive-black);
}

/* ---------- Intro (sticker + titre) ----------
   Même largeur que le conteneur de titre de la source (610px), pour que les
   décalages du sticker, qui y sont relatifs, se transposent tels quels. */
.benefits__intro {
  position: relative;
  width: 610px;
  margin-inline: auto;
}

.benefits__sticker {
  position: absolute;
  left: -120.6px;
  top: -33px;
  z-index: 1;
  width: 155.7px;
  height: 90.5px;
  --sticker-bg: var(--c-pink);
  --sticker-rotate: -20deg;
  padding: 6px 10px;
  font-weight: 600;
  font-size: var(--fs-20);
  line-height: 26px;
  letter-spacing: -0.8px;
}

.benefits__heading {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-68);
  line-height: 1;
  color: var(--c-sand);
  text-wrap: balance;
}

/* ---------- Grille (six colonnes égales à 1440px) ---------- */
.benefits__grid {
  position: relative;
  z-index: 1;
  margin: 60px 0 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}

/* ---------- Carte ----------
   Hauteur fixe : elle est identique pour les sept cartes sur la source, y
   compris pour la carte 6 seule sur sa rangée à 1024px — donc imposée, pas
   déduite du contenu. `.benefits__card` est directement l'item de grille
   (le <li>) : plus de niveau intermédiaire. */
.benefits__card {
  height: 498px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30px 20px;
  border-radius: 40px;
}

.benefits__card--c1,
.benefits__card--c2,
.benefits__card--c6,
.benefits__card--c7 { grid-column: span 3; }

.benefits__card--c3,
.benefits__card--c4,
.benefits__card--c5 { grid-column: span 2; }

.benefits__card--c1 { --card-bg: var(--c-yellow-pale); }
.benefits__card--c2 { --card-bg: var(--c-mint); }
.benefits__card--c3 { --card-bg: var(--c-sand); }
.benefits__card--c4 { --card-bg: var(--c-orange); }
.benefits__card--c5 { --card-bg: var(--c-pink-light); }
.benefits__card--c6 { --card-bg: var(--c-lavender); }
.benefits__card--c7 { --card-bg: var(--c-orange); }

/* La boîte d'illustration prend toute la hauteur restante (flex:1) : c'est
   ainsi que la source obtient ses sept hauteurs différentes, pas par une
   hauteur codée carte par carte. La marge porte l'espaceur mesuré. */
.benefits__card-media {
  order: 1;
  position: relative;
  width: 100%;
  flex: 1 1 0;
  min-height: 0;
  margin-bottom: 40px;
}

.benefits__card-media img {
  /* position:relative : sans cela, un élément statique se peint TOUJOURS
     avant un élément positionné (le galbe, en absolute), quel que soit
     l'ordre du DOM — l'illustration disparaîtrait sous le galbe. */
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* Survol : la MASCOTTE seule grossit (2026-08-14). Le galbe pâle derrière elle
     ne bouge pas — c'est un frère en `position: absolute` qui porte déjà sa
     propre `transform` de centrage, et le zoom posé ici ne l'atteint pas.
     La carte porte `overflow: hidden` (primitive `.card`) : l'illustration
     agrandie est donc rognée par les coins arrondis, elle ne déborde pas.
     Durée et courbe : --dur-zoom / --ease-expo, celles relevées sur la source
     pour le zoom des images de #projects. Le même geste garde le même rythme
     partout sur le site. */
  transition: transform var(--dur-zoom) var(--ease-out);
  /* Déclaration séparée : sans `linear()`, --ease-out prend le relais. */
  transition-timing-function: var(--ease-expo);
}

/* `hover: hover` écarte le tactile, où l'état resterait collé au premier
   toucher. Les cartes ne sont pas cliquables : il n'y a rien à y focaliser au
   clavier, donc pas de `focus-within` ici, contrairement aux portraits. */
@media (hover: hover) {
  .benefits__card:hover .benefits__card-media img { transform: scale(1.07); }
}

@media (prefers-reduced-motion: reduce) {
  .benefits__card-media img { transition: none; }
  .benefits__card:hover .benefits__card-media img { transform: none; }
}

/* Galbe : dimensionné et centré sur la boîte d'illustration selon les
   pourcentages relevés sur la source (47% / 50% / 81%), hauteur déduite du
   ratio du viewBox. Il déborde volontairement et est rogné par la carte. */
.benefits__card-blob {
  position: absolute;
  left: 47%;
  top: 50%;
  width: 81%;
  height: auto;
  transform: translate(-50%, -50%);
  opacity: .3;
}

.benefits__card-blob--sand        { fill: var(--c-sand); }
.benefits__card-blob--orange      { fill: var(--c-orange); }
.benefits__card-blob--mint        { fill: var(--c-mint); }
.benefits__card-blob--purple      { fill: var(--c-purple); }
.benefits__card-blob--yellow-pale { fill: var(--c-yellow-pale); }

.benefits__card-text {
  order: 2;
  width: 100%;
}

/* Cartes texte-au-dessus : 2, 4 et 6 à 1440px (voir les paliers plus bas,
   où l'alternance change). */
.benefits__card--text-first .benefits__card-media {
  order: 2;
  margin: 60px 0 0;
}

.benefits__card--text-first .benefits__card-text { order: 1; }

.benefits__card-title {
  max-width: 400px;
  margin-inline: auto;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-27);
  line-height: 32.4px;
  color: var(--c-ink);
}

.benefits__card-desc {
  max-width: 400px;
  margin: 10px auto 0;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-20);
  line-height: 28px;
  letter-spacing: -1px;
  color: var(--c-ink);
}

@media (max-width: 1199px) {
  .benefits__intro { width: 600px; }

  .benefits__sticker {
    left: -56.3px;
    top: -38.2px;
    width: 136.6px;
    height: 79.4px;
    font-size: var(--fs-16);
    line-height: 20.8px;
    letter-spacing: -0.64px;
  }

  .benefits__heading { font-size: var(--fs-52); }

  .benefits__card-title { font-size: var(--fs-22); line-height: 26.4px; }

  .benefits__card-desc {
    font-size: var(--fs-18);
    line-height: 25.2px;
    letter-spacing: -0.9px;
  }

  /* Deux colonnes de 467px, gap inchangé. L'ordre visuel de la source
     diffère de l'ordre du DOM (relevé direct) : c3, c1 / c2, c4 / c5, c7 /
     c6 seule en pleine largeur — reproduit par `order`, sans toucher au DOM. */
  .benefits__grid { grid-template-columns: repeat(2, 1fr); }

  .benefits__card { height: 365.3px; }

  .benefits__card--c1,
  .benefits__card--c2,
  .benefits__card--c3,
  .benefits__card--c4,
  .benefits__card--c5,
  .benefits__card--c7 { grid-column: span 1; }

  .benefits__card--c6 { grid-column: span 2; }

  .benefits__card--c3 { order: 1; }
  .benefits__card--c1 { order: 2; }
  .benefits__card--c2 { order: 3; }
  .benefits__card--c4 { order: 4; }
  .benefits__card--c5 { order: 5; }
  .benefits__card--c7 { order: 6; }
  .benefits__card--c6 { order: 7; }

  /* À ce palier la source ne garde qu'UNE carte texte-en-haut : la 6.
     Les cartes 2 et 4 repassent illustration-en-haut (relevé : leur boîte
     média est le premier enfant peint, espaceur de 40px en dessous). */
  .benefits__card--c2 .benefits__card-media,
  .benefits__card--c4 .benefits__card-media { order: 1; margin: 0 0 40px; }

  .benefits__card--c2 .benefits__card-text,
  .benefits__card--c4 .benefits__card-text { order: 2; }
}

@media (max-width: 809px) {
  .benefits {
    padding: 30px 20px 70px;
  }

  .benefits__intro { width: auto; }

  /* Le sticker passe EN FLUX, centré, collé au-dessus du titre (relevé sur
     la source). `display:grid` + marges auto : le centrage ne passe pas par
     `transform`, que les keyframes `sticker-float` écraseraient. */
  .benefits__sticker {
    position: static;
    display: grid;
    width: 131.8px;
    height: 79.5px;
    margin: 0 auto;
    font-size: var(--fs-15);
    line-height: 19.5px;
    letter-spacing: -0.6px;
  }

  .benefits__heading {
    font-size: var(--fs-42);
    letter-spacing: -1.6px;
  }

  .benefits__grid {
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 40px;
  }

  /* Hauteur de carte libre à ce palier (la source laisse les sept cartes à
     des hauteurs différentes), boîte d'illustration uniforme de 103px,
     espaceur ramené à 10px, ordre naturel du DOM, toutes les cartes en
     illustration-au-dessus. */
  .benefits__card {
    height: auto;
    grid-column: span 1;
    order: 0;
  }

  .benefits__card-media,
  .benefits__card--text-first .benefits__card-media {
    order: 1;
    flex: none;
    height: 103px;
    margin: 0 0 10px;
  }

  .benefits__card-text,
  .benefits__card--text-first .benefits__card-text { order: 2; }

  .benefits__card-title { max-width: none; }
  .benefits__card-desc  { max-width: 300px; }
}