/* comparison.css — section comparatif « Studio pensé différemment (dans le bon
   sens) » (#comparison ; la source ne donne PAS d'id à cette section).

   Toutes les valeurs sont relevées sur la source le 2026-08-11, aux trois
   paliers, APRÈS parcours de la section par paliers sur toute sa hauteur puis
   retour au bord haut (règle A1#5 : `document.getAnimations()` vide ne prouve
   rien, la source translate ses blocs de 170px en JS). `location.href` a été
   renvoyé dans le MÊME `browser_evaluate` que chaque mesure (règle A1#6).
   Rien n'est extrapolé sauf mention explicite.

   Contrôle arithmétique de la hauteur de section, aux trois paliers :
     1440 : 60 (pad haut) + 272 (titre) + 60 (gap) +  709 (carte) + 200 = 1301
     1024 : 60           + 208         + 60        +  642        + 200 = 1170
      390 : 30           + 169,5       + 40        + 1403,5      +  70 = 1713
   Les trois totaux sont exactement les hauteurs mesurées sur la source
   (1301 / 1170 / 1713). La cible du brief à 1440 (1301) est donc atteinte.

   ⚠ Le padding bas vaut 200px ici, et non les 145px des sections voisines
   (#projects, #process). Mesuré : `padding: 60px 40px 200px` aux paliers 1440
   ET 1024. C'est ce qui donne le grand aplat orange sous la carte.

   Aucune hauteur n'est écrite en dur : les deux colonnes sont dictées par leur
   contenu (10 lignes de 43 + 9 gouttières de 10 = 520, plus le padding du
   panneau), ce qui reproduit les 660 / 600 / 600 mesurés sans les coder.

   ---------------------------------------------------------------------------
   Structure de section (colonne centrée, identique aux trois paliers) :
     [intro : sticker « Differences » + titre] — gap — [carte]

   Carte — DEUX colonnes jointives, sans gouttière (`gap: 0` relevé) :
     1440 : 1360 × 709, ligne, `overflow: hidden`
     1024 :  944 × 642, idem
      390 :  350 × 1403,5, COLONNE, gap 20, centrée — voir le palier mobile
   Chaque colonne : [en-tête] — gap 12 — [panneau coloré].
   Panneau : padding 70 (1440) / 40 (1024 et 390), gap 10 entre les lignes,
   rayon 40 sur les deux coins EXTÉRIEURS seulement (40 0 0 40 à gauche,
   0 40 40 0 à droite) — les deux coins de la jointure sont carrés. À 390 les
   colonnes sont empilées et chaque panneau reprend un rayon 40 sur les quatre
   coins.

   Ligne : padding 7px 12px 7px 7px, gap 10, hauteur 43 (= 7 + 29 + 7, imposée
   par la pastille d'icône, plus haute que le libellé de 25,2). Boîtes de
   pastille (29 × 29, padding 4, rayon 22) et d'icône (21 × 21) CONSTANTES aux
   trois paliers — seule la typographie du libellé change.

   Typographie relevée :
     titre     Climate Crisis 400 — 68/68 (1440) · 52/52 (1024) · 26/30 (390)
               couleur --c-ink, centré, `text-wrap: balance` relevé sur la
               source ; il donne bien les 4 / 4 / 3 lignes mesurées.
               ⚠ La source emploie ici un <h1> à 1440 et un <h3> à 390 (bascule
               de variante Framer). Le projet n'a qu'un seul <h1>, dans le hero
               (contrainte de tools/check.py) : c'est donc un <h2>, comme dans
               #projects et #benefits.
     en-têtes  Climate Crisis 400 — 37/37 · 30/30 · 26/30, centrés
     libellés  Poppins 600 — 18/25,2 ls -0,36 · 17/23,8 ls -0,34 (1024 ET 390)
     stickers  Poppins 600 — 20/26 ls -0,8 · 16/20,8 ls -0,64 · 15/19,5 ls -0,6

   ---------------------------------------------------------------------------
   MANQUES DU BRIEF (A0) — relevés puis reconstruits ici. Ni le brief ni les
   cinq constats du contrôleur ne les mentionnent :

   1. LE BORD FESTONNÉ DE HAUT DE SECTION. La source ouvre #comparison par 15
      bosses en --c-orange-deep qui remontent au-dessus de la section et mordent
      sur l'orange de #process : 96 × 75,6 remontées de 61 à 1440 ; 68,3 × 53,8
      remontées de 40 à 1024 ; 26 × 20,5 remontées de 20 à 390. Ce sont
      exactement les tokens --scallop-* en place : la primitive partagée
      `.scallop-top` (layout.css) convient telle quelle, portée par la section
      dans le markup. La section ne doit donc PAS passer en overflow
      hidden/clip.

   2. LE FILET SOUS CHAQUE LIGNE. Chaque ligne porte un `::after` en
      `position: absolute; inset: 0; border-bottom: 1px solid` en
      --c-olive-black (canaux 24·26·18). Il est présent sur les VINGT lignes,
      y compris la dernière de chaque colonne. Invisible au relevé de boîtes
      (la ligne elle-même n'a ni fond ni bordure : le trait est sur le
      pseudo-élément) — il n'a été trouvé qu'en regardant la capture, puis
      confirmé en interrogeant `getComputedStyle(el, '::after')` (piège n° 8 :
      un élément ne répond que de lui-même).

   3. LES COULEURS DES DEUX STICKERS. Le brief ne donne que leurs libellés.
      Relevé : « Differences » = tracé en --c-yellow, libellé en --c-ink ;
      « Versus » = tracé en --c-ink-alt (canaux 61·0·27), libellé en --c-pink.

   ---------------------------------------------------------------------------
   CONTREDIT LE CONSTAT n° 1 DU CONTRÔLEUR sur un point : il annonce, pour la
   colonne droite, « fill 192·236·191 = --c-mint » pour les dix icônes. C'est
   faux. Une seule des dix (« Plan personnalisé ») est en --c-mint ; les neuf
   autres emploient HUIT autres teintes. Relevé icône par icône :
       Plan personnalisé       --c-mint        Prix transparent       --c-pink-light
       Explications claires    --c-lavender    Outils innovants       --c-sand
       Idées audacieuses       --c-yellow      Experts multi domaines --c-pink
       Vrai ROI                --c-orange      Stratégies proactives  --c-lavender
       partenariat long-terme  --c-pink        Passions partagées     --c-purple
   La colonne gauche est bien conforme au constat : un seul tracé répété dix
   fois, en --c-pink. Le décompte de onze tracés distincts est exact.

   Le tracé du sticker « Differences » (viewBox 0 0 501 291) est bien le MÊME
   que celui déjà inliné en tâche 9 — comparé caractère par caractère avec les
   deux occurrences de `index.html` (le `--sticker-shape` de `.benefits__sticker`
   et `.benefits__card-blob--orange`) : identique, 1318 caractères. Il est
   ré-inliné ici plutôt que factorisé, pour ne pas toucher au code de la
   tâche 9, close et validée, ni déplacer le tracé dans layout.css.
   `.sticker` / `.sticker--masked` ne sont PAS réutilisés (règle A1#0) : la
   source pose le SVG en `contain` sur 100% de la LARGEUR de la boîte, en le
   laissant déborder en hauteur (96,5 pour une boîte de 86 sur « Differences »,
   121,8 pour 86 sur « Versus ») ; `.sticker--masked`, qui contient la forme
   dans la boîte, rendrait une étoile écrasée. Même choix qu'en tâche 10.
   ---------------------------------------------------------------------------

   Le fond est réellement uni (constat n° 4 confirmé) : --c-orange-deep, et le
   balayage du sous-arbre ne rend AUCUN élément dont `background-image` diffère
   de `none` (piège n° 8, contrôle rejoué ici). */

.comparison {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
  padding: 60px 40px 200px;
  background: var(--c-orange-deep);

  /* Bord festonné du haut — manque du brief, voir l'en-tête. La primitive
     `.scallop-top` est portée par la section dans le markup ; la section ne
     doit donc pas passer en overflow: hidden/clip. */
  --scallop-color: var(--c-orange-deep);
}

/* ---------- Intro : sticker + titre ----------
   Même largeur que le conteneur de titre de la source (800 / 600 / pleine
   largeur), pour que la position du sticker, exprimée en pourcentage de cette
   boîte, se transpose telle quelle d'un palier à l'autre. */
.comparison__intro {
  position: relative;
  width: 800px;
}

.comparison__heading {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-68);
  line-height: 1;
  color: var(--c-ink);
  text-align: center;
  /* Relevé sur la source (`text-wrap: balance` calculé sur le titre). C'est lui
     qui donne la coupe « Studio pensé / différemment / (dans le / bon sens) »
     à 1440 et à 1024 ; sans lui la coupe gloutonne remonte « (dans » sur la
     deuxième ligne et le titre ne fait plus que trois lignes, soit 68px de
     moins sur la hauteur de section. */
  text-wrap: balance;
}

/* Le sticker est dimensionné par son CONTENU (libellé + 30px de padding sur les
   quatre côtés), pas par une largeur codée : c'est ce que fait la source
   (vérifié en dépivotant les AABB de 20° aux trois paliers — 166,2 × 86,0 à
   1440, 144,9 × 80,8 à 1024, 139,6 × 79,6 à 390, soit exactement le libellé
   + 60 dans les deux axes) et c'est la seule façon de garantir que le libellé
   tient dans la forme (règle A1#3).

   Position : centre du sticker à 3% / 81% de la boîte du titre à 1440
   (left 24px / top 220,3px sur 800 × 272). ⚠ Le pourcentage VERTICAL n'est pas
   le même à 1024 (18/600 = 3% mais 178,9/208 = 86%) : la source a repositionné
   le sticker à ce palier, elle ne l'a pas simplement mis à l'échelle. Les deux
   valeurs sont donc écrites séparément. */
.comparison__sticker {
  position: absolute;
  left: 3%;
  top: 81%;
  display: inline-grid;
  place-items: center;
  padding: 30px;
  transform: translate(-50%, -50%) rotate(-20deg);
}

.comparison__sticker-shape {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  height: auto;
  aspect-ratio: 501 / 291;
  transform: translate(-50%, -50%);
  fill: var(--c-yellow);
  pointer-events: none;
}

.comparison__sticker-label {
  position: relative;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-20);
  line-height: 26px;
  letter-spacing: -0.8px;
  color: var(--c-ink);
  white-space: nowrap;
}

/* ---------- Carte : les deux colonnes ----------
   `.card` (layout.css) n'est PAS réutilisée (règle A1#0) : elle pose un fond,
   un rayon --r-xl (32) et `overflow: hidden`. Ici la carte n'a NI fond NI
   rayon propres — ce sont les deux panneaux qui portent la couleur et les
   rayons — et le rayon de la source vaut 40, pas 32.

   `overflow: hidden` est en revanche relevé sur la source, et il est
   STRUCTUREL : c'est lui qui borne le diviseur en feuilles. La source y place
   un SVG de 934px de haut dans un conteneur de 660, et c'est la carte qui
   rogne le débord (vérifié en remontant toute la chaîne des ancêtres jusqu'à
   <body> — `.framer-t1a4fi` est le seul nœud en overflow: hidden). C'est aussi
   ce qui fait DISPARAÎTRE le diviseur à 390 (voir le palier mobile). */
.comparison__card {
  position: relative;
  display: flex;
  gap: 0;
  width: 100%;
  overflow: hidden;
}

.comparison__col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* Les deux colonnes font exactement la moitié de la carte (680 / 1360 à
     1440, 472 / 944 à 1024). `min-width: 0` empêche un libellé long d'élargir
     sa colonne au détriment de l'autre. */
  flex: 1 1 0;
  min-width: 0;
}

.comparison__col-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-37);
  line-height: 37px;
  color: var(--c-ink);
  text-align: center;
}

.comparison__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 70px;
}

.comparison__list--others {
  background: var(--c-pink-light);
  border-radius: 40px 0 0 40px;
}

/* Le diviseur en feuilles appartient au bord GAUCHE de la colonne droite (il
   est de la couleur de CETTE colonne et déborde vers la gauche dans le rose) :
   c'est la primitive `.leaf-divider` (layout.css), posée dans le markup sur ce
   panneau. Voir le verdict chiffré sur son coefficient dans le rapport de
   tâche. */
.comparison__list--studio {
  background: var(--c-yellow-pale);
  border-radius: 0 40px 40px 0;
  --leaf-color: var(--c-yellow-pale);
}

/* ---------- Ligne ---------- */
.comparison__row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px 7px 7px;
}

/* Filet sous la ligne — manque du brief (A0), voir l'en-tête. Reproduit tel
   quel : un pseudo-élément en inset 0 dont seul le bord BAS est peint, et non
   une `border-bottom` sur la ligne elle-même, qui s'ajouterait à la hauteur de
   43px mesurée. Présent sur les vingt lignes, dernière comprise. */
.comparison__row::after {
  content: "";
  position: absolute;
  inset: 0;
  border-bottom: 1px solid var(--c-olive-black);
  pointer-events: none;
}

/* Pastille d'icône : 29 × 29, padding 4, rayon 22, fond --c-olive-black
   (canaux 24·26·18) — dimensions identiques aux trois paliers. */
.comparison__icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 29px;
  height: 29px;
  padding: 4px;
  border-radius: 22px;
  background: var(--c-olive-black);
}

.comparison__icon svg {
  display: block;
  width: 21px;
  height: 21px;
}

/* Les onze tracés sont inlinés dans le markup (SVG `viewBox 0 0 256 256`, un
   `path` chacun) : ce ne sont PAS des fichiers, il n'y a rien à chercher dans
   assets/ (constat n° 1). La teinte, elle, est portée par une classe
   modificateur plutôt que par un attribut `fill` en dur : tools/check.py
   interdit toute couleur brute hors tokens.css, y compris dans le markup. */
.comparison__icon--pink       svg { fill: var(--c-pink); }
.comparison__icon--mint       svg { fill: var(--c-mint); }
.comparison__icon--lavender   svg { fill: var(--c-lavender); }
.comparison__icon--yellow     svg { fill: var(--c-yellow); }
.comparison__icon--orange     svg { fill: var(--c-orange); }
.comparison__icon--pink-light svg { fill: var(--c-pink-light); }
.comparison__icon--sand       svg { fill: var(--c-sand); }
.comparison__icon--purple     svg { fill: var(--c-purple); }

.comparison__label {
  flex: 1 1 auto;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-18);
  line-height: 25.2px;
  letter-spacing: -0.36px;
  color: var(--c-ink);
  text-align: left;
}

/* ---------- Sticker « Versus » ----------
   Posé sur la jointure des deux colonnes, mais PAS centré dessus : son centre
   est à 49% / 54% de la carte, soit 13,6px à GAUCHE de la jointure à 1440
   (706,4 pour une jointure à 720). Les deux pourcentages sont identiques à
   1440 et à 1024 (666,4/1360 = 462,6/944 = 49,0% ; 382,9/709 = 346,7/642 =
   54,0%), contrairement à ceux du sticker « Differences ».

   Rotation -15° (et non -20° comme « Differences ») : matrice relevée
   0,965926 / -0,258819. Boîte = libellé + 30px de padding sur les quatre
   côtés, comme l'autre sticker. */
.comparison__versus {
  position: absolute;
  left: 49%;
  top: 54%;
  z-index: 1;
  display: inline-grid;
  place-items: center;
  padding: 30px;
  transform: translate(-50%, -50%) rotate(-15deg);
}

.comparison__versus-shape {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  height: auto;
  aspect-ratio: 164 / 160;
  transform: translate(-50%, -50%);
  fill: var(--c-ink-alt);
  pointer-events: none;
}

.comparison__versus-label {
  position: relative;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-20);
  line-height: 26px;
  letter-spacing: -0.8px;
  color: var(--c-pink);
  white-space: nowrap;
}

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

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

  /* Le sticker descend à 86% de la boîte du titre à ce palier (contre 81% à
     1440) — repositionnement de la source, pas une mise à l'échelle. */
  .comparison__sticker { top: 86%; }

  .comparison__sticker-label,
  .comparison__versus-label {
    font-size: var(--fs-16);
    line-height: 20.8px;
    letter-spacing: -0.64px;
  }

  .comparison__col-title {
    font-size: var(--fs-30);
    line-height: 30px;
  }

  .comparison__list { padding: 40px; }

  .comparison__label {
    font-size: var(--fs-17);
    line-height: 23.8px;
    letter-spacing: -0.34px;
  }
}

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

  /* Le sticker repasse EN FLUX, centré, collé au-dessus du titre, sans espace
     (mesuré : l'intro y fait 169,5 = 79,5 de sticker + 90 de titre). Même
     bascule qu'en projects.css, benefits.css et process.css. Dans le markup il
     PRÉCÈDE déjà le titre — comme dans #projects — aucun `order` n'est donc
     nécessaire. Le centrage passe par des marges automatiques et non par un
     `transform`, qui porte déjà la rotation. */
  .comparison__intro {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .comparison__sticker {
    position: static;
    display: grid;
    width: max-content;
    margin-inline: auto;
    transform: rotate(-20deg);
  }

  .comparison__sticker-label,
  .comparison__versus-label {
    font-size: var(--fs-15);
    line-height: 19.5px;
    letter-spacing: -0.6px;
  }

  .comparison__heading {
    font-size: var(--fs-26);
    line-height: 30px;
  }

  /* La carte s'empile : colonne gauche, sticker « Versus » EN FLUX entre les
     deux, colonne droite — relevé sur la source (colonne gauche 10375,5 →
     11017,5 ; sticker 11037,5 → 11117 ; colonne droite 11137 → 11779, pour un
     gap constant de 20). Dans le DOM le sticker suit les deux colonnes, parce
     qu'aux deux autres paliers il est en absolu ; `order` remet l'ordre visuel
     de la source sans toucher à l'ordre de lecture. La source fait exactement
     de même (ordre du DOM : gauche, droite, sticker). */
  .comparison__card {
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }

  .comparison__col--others { order: 1; }
  .comparison__versus      { order: 2; }
  .comparison__col--studio { order: 3; }

  .comparison__col { width: 100%; }

  .comparison__versus {
    position: static;
    display: grid;
    width: max-content;
    transform: rotate(-15deg);
  }

  .comparison__col-title { font-size: var(--fs-26); }

  /* Colonnes empilées : chaque panneau reprend un rayon de 40 sur ses QUATRE
     coins, il n'y a plus de jointure à laisser carrée. */
  .comparison__list {
    padding: 40px;
    border-radius: 40px;
  }

  .comparison__list--others,
  .comparison__list--studio { border-radius: 40px; }

  /* Le diviseur en feuilles n'est PAS supprimé du DOM par la source : elle le
     laisse en place (SVG de 21px de large, pas vertical 24px) mais le pose à
     `left: -28px` du panneau, donc à x ∈ [-8 ; 13] alors que la carte, en
     `overflow: hidden`, commence à x = 20. Il est donc intégralement rogné et
     INVISIBLE — vérifié à la capture. Notre construction reproduit exactement
     ce mécanisme (le ::before de `.leaf-divider` est en translateX(-100%) hors
     du panneau, lui-même large de toute la carte) : il est donc déjà rogné
     sans rien ajouter. `display: none` est posé quand même, pour que le rendu
     ne dépende pas d'un arrondi sous-pixel sur le bord de la carte. */
  .comparison__list--studio.leaf-divider::before { display: none; }
}