/* studio.css
   Relevé sur la source (1440px, #benefits-1, top 1184 -> hauteur 798) :
   - Fond : --c-orange-deep. Padding de section 100px 40px 145px (mesuré) : le
     côté (40px) coïncide avec --gutter par défaut (≥1200) mais PAS à 1024px où
     la source garde 40px alors que --gutter tombe à 32px pour les autres
     sections — valeur donc fixée en dur ici plutôt que liée au token partagé,
     pour rester fidèle à la mesure de cette section précise.
   - Titre "Le Studio" : un seul <h1> est autorisé par page (vérifié par
     check.py) et il est déjà porté par le logotype du hero (tâche 5) : ce
     titre de section redevient donc un <h2>, comme la source le fait pour ses
     propres sous-titres de section.
   - Titre en Climate Crisis 68px/68px (desktop) / 52px/52px (tablette) /
     42px/42px (mobile) — les trois tailles correspondent exactement aux
     tokens --fs-68/--fs-52/--fs-42. Couleur --c-cream-light (pas blanc pur,
     relevé). Écart titre -> grille des profils : 91px constant aux trois
     paliers (mesuré), posé en margin-block-end sur le titre.
   - Trois profils : icône (illustration blanche + forme douce derrière, à
     30% d'opacité, couleur --c-cream-light), titre Climate Crisis, texte
     Poppins 600 sur 300px de large centré. Écarts icône->titre 32px (--sp-6)
     et titre->texte 16px (--sp-4), constants à tous les paliers.
     Correction (tour de relecture) : la forme derrière chaque mascotte n'est
     PAS la primitive .starburst (32 pointes rayées, calibrée en tâche 3 pour
     une pastille de texte) — la source pose, sur cette section, trois <svg>
     bespoke distincts, un galbe doux par profil, dessinés à la main
     (viewBox 0 0 473 449 / 0 0 457 457 / 0 0 473 471). Inlinés ici en SVG,
     même patron que les 4 formes de coin ci-dessus : fill posé via CSS
     (var(--c-cream-light)), pas dans le markup. Les 30% d'opacité sont sur la
     source portés par un conteneur ancêtre (piège déjà rencontré sur le fond
     du hero) — reproduits ici directement sur le <svg>, ce qui donne le même
     rendu visuel sans avoir besoin de reproduire l'ancêtre. .starburst reste
     inchangée dans layout.css : elle sert telle quelle à la pastille
     "parcours" d'une section suivante.
   - Disposition : grille à 3 colonnes égales, empilement colonne unique sous
     809px (mêmes tailles d'icône/texte qu'à 1024, seule la mise en page
     change). Gap mesuré : 74px en colonnes (desktop) et en pile (mobile,
     valeur identique — coïncidence confirmée par la valeur de `gap` posée sur
     le conteneur flexcolonne mobile de la source), 40px en colonnes à 1024px.
   - Coquilles de la source, reproduites verbatim (voir brief) : « aggrandir »,
     « accronyme », « racontre », doubles espaces avant "Sa mission" sur les
     deux premiers textes seulement.
   - Manque du brief comblé ici (voir A₀) : 4 formes décoratives aux coins
     (deux "blobs" + deux "feuilles", en --c-orange / --c-orange-deep) qui
     débordent du haut de la section sur la source (overflow visible, fondues
     dans le hero de même teinte au-dessus). Reproduites en <svg> inline
     positionnés en absolu, fill posé via CSS (var(--c-orange) /
     var(--c-orange-deep)) plutôt que dans le markup, pour rester sur les
     tokens. `.studio` passe en overflow:hidden : au-delà du haut de la
     section, la partie qui débordait est de toute façon invisible sur la
     source (même teinte que le fond du hero), donc le rognage ne change rien
     au rendu. */

/* Rognage horizontal seulement, au lieu d'`overflow: hidden` : les deux
   miettes sont en --c-orange-deep, c'est-à-dire de la MÊME teinte que le fond
   de cette section — elles ne se voient que sur la partie qui déborde en haut,
   sur l'orange du hero, et c'est là que leur parallax se lit. Un
   `overflow: hidden` les rendait donc invisibles en permanence. Les deux gros
   blobs qui débordent aussi par le haut sont, eux, en --c-orange : invisibles
   sur l'orange du hero (mesuré en tâche 16).
   ⚠ `clip-path: inset(...)` a été essayé d'abord et NE CONVIENT PAS : il rogne
   la peinture mais pas la zone défilable, et les blobs posés à left:-65px /
   right:-46px ont aussitôt donné 1486px de large pour 1440 de fenêtre, soit une
   barre de défilement horizontale sur tout le site. `overflow-x: clip` rogne
   les deux. `clip` et non `hidden` : `hidden` sur un axe force l'autre à
   `auto`, ce qui rétablirait le rognage vertical qu'on cherche justement à
   lever. */
.studio {
  position: relative;
  overflow-x: clip;
  overflow-y: visible;
  background: var(--c-orange-deep);
  padding: 100px 40px 145px;
  text-align: center;
}

/* ---------- Formes décoratives de coin ---------- */
.studio__blob {
  position: absolute;
  z-index: 0;
  pointer-events: none;
}

.studio__blob--tl,
.studio__blob--tr { fill: var(--c-orange); }

.studio__blob--tl-leaf,
.studio__blob--tr-leaf { fill: var(--c-orange-deep); }

.studio__blob--tl      { left: -65px; top: -92px; width: 284px; height: 247px; }
.studio__blob--tl-leaf { left: 51px;  top: 39px;  width: 31px;  height: 76px; }
.studio__blob--tr      { right: -46px; top: -57px; width: 306px; height: 250px; }
.studio__blob--tr-leaf { right: 83px;  top: 66px;  width: 32px;  height: 55px; }

/* ---------- Parallax des deux miettes ----------
   Relevé sur la source le 2026-08-13 : les deux petites feuilles — et elles
   seules, les deux gros blobs restent fixes — montent au défilement, chacune à
   son taux : 0,10 px par pixel défilé à gauche (« Miette gauche »), 0,05 à
   droite (« Miettes droite »). Linéaire, sans plage d'arrêt visible.

   ⚠ Conséquence sur les positions au repos : la position d'arrêt qui était
   posée ici (-79px et 7px) était celle de la source PRISE À MI-SECTION, une
   fois le parallax déjà appliqué (~1050px de défilement). En rendant le
   mouvement, il faut repartir de la position à défilement NUL, relevée sur la
   source à +39px et +66px sous le haut de section. Les deux réglages se
   compensent : à ~1050px de défilement, les miettes retombent exactement là
   où elles étaient rendues jusqu'ici.

   Le mécanisme est celui du parallax des photos du hero (animation liée au
   défilement, en CSS pur) : même garde `@supports`, même dégradation — sans
   support, les miettes restent immobiles à leur position à défilement nul. */
.studio__blob--tl-leaf { --parallax: 0.10; }
.studio__blob--tr-leaf { --parallax: 0.05; }

@keyframes studio-leaf-rise {
  to { translate: 0 calc(var(--parallax) * var(--parallax-span) * -1); }
}

@supports (animation-timeline: scroll()) {
  .studio__blob--tl-leaf,
  .studio__blob--tr-leaf {
    --parallax-span: 3000px;
    animation: studio-leaf-rise linear both;
    animation-timeline: scroll(root block);
    animation-range: 0 var(--parallax-span);
  }
}

@media (prefers-reduced-motion: reduce) {
  .studio__blob--tl-leaf,
  .studio__blob--tr-leaf { animation: none; }
}

/* ---------- Titre ---------- */
.studio__heading {
  position: relative;
  z-index: 1;
  margin: 0 0 91px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-68);
  line-height: 1;
  color: var(--c-cream-light);
}

/* ---------- Grille des trois profils ---------- */
.studio__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 74px;
}

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

.studio__icon {
  position: relative;
  width: 255px;
  height: 214px;
}

.studio__icon-burst {
  position: absolute;
  left: 6%;
  top: 0;
  width: 88%;
  height: 99%;
  fill: var(--c-cream-light);
  opacity: .3;
  pointer-events: none;
  /* Survol : le galbe pivote, la mascotte ne bouge pas (2026-08-14).
     Ici c'est simple — contrairement aux portraits de #about, le galbe est un
     élément à part, posé DERRIÈRE l'illustration, pas le pochoir qui la découpe.
     Le faire tourner ne touche donc à rien d'autre : aucune contre-rotation.
     `transform-origin` reste au centre : le galbe est placé en `left`/`top`, il
     tourne donc sur lui-même sans dériver.
     Durée et courbe : celles du halo du Process, comme partout ailleurs pour ce
     geste. */
  transition: transform var(--dur-halo) var(--ease-out);
  /* Déclaration séparée : sans `linear()`, --ease-out reste, donc la rotation
     sans le petit recul. */
  transition-timing-function: var(--ease-halo);
}

/* Un QUART DE TOUR, le même angle que le halo du Process (demande du 2026-08-14).
   ⚠ Ces formes sont très symétriques et leur position d'arrivée à 90° ressemble
   beaucoup à celle de départ. Mesuré au pixel entre 0° et 90° : l'astérisque est
   identique à 0,0 % près, le trèfle à 4,5 %, le médaillon à 12,1 %.
   Ce n'est PAS pour autant un effet invisible, et un premier jet à 12° reposait
   sur cette confusion : ce qui se voit n'est pas la position finale, c'est le
   MOUVEMENT pendant la demi-seconde. Le halo du Process a exactement la même
   propriété et se lit très bien. */
@media (hover: hover) {
  .studio__profile:hover .studio__icon-burst { transform: rotate(90deg); }
}

@media (prefers-reduced-motion: reduce) {
  .studio__icon-burst { transition: none; }
  .studio__profile:hover .studio__icon-burst { transform: none; }
}

.studio__icon-img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.studio__title {
  margin-block-start: var(--sp-6);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-22);
  line-height: 30.8px;
  color: var(--c-ink);
}

.studio__text {
  margin-block-start: var(--sp-4);
  max-width: 300px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-18);
  line-height: 25.2px;
  letter-spacing: -.36px;
  color: var(--c-ink);
}

@media (max-width: 1199px) {
  .studio { padding-block-start: 80px; }

  .studio__blob--tl      { left: -46px; top: -44px; width: 206px; height: 179px; }
  .studio__blob--tl-leaf { left: 53px;  top: -67px; width: 23px;  height: 58px; }
  .studio__blob--tr      { right: -43px; top: -46px; width: 248px; height: 203px; }
  .studio__blob--tr-leaf { right: 40px;  top: 9px;   width: 32px;  height: 55px; }

  .studio__grid { column-gap: 40px; }

  .studio__icon { width: 165px; height: 134px; }

  .studio__title { font-size: var(--fs-20); line-height: 28px; }
  .studio__text  { font-size: var(--fs-17); line-height: 23.8px; }
}

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

  .studio__blob--tl      { left: -26px; top: -22px; width: 132px; height: 115px; }
  .studio__blob--tl-leaf { left: 25px;  top: -76px; width: 23px;  height: 56px; }
  .studio__blob--tr      { right: -50px; top: -38px; width: 176px; height: 144px; }
  .studio__blob--tr-leaf { right: 16px;  top: -12px; width: 21px;  height: 37px; }

  .studio__heading { letter-spacing: -1.6px; }

  .studio__grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 74px;
  }
}