/* ============================================================
   accueil.css — les sections de la landing (/index), et elle seule.
   Décor global, hero, pourquoi, préoccupations, différence, produit,
   intérieur, comment, démo, méthode, offre, cas clients, conviction,
   FAQ, plus les interactions propres à ces sections.

   Ce qui vaut aussi pour les pages légales n'a rien à faire ici :
   sa place est dans /a/main.css.

   Issue du découpage des <style> autrefois inlinés dans la page d'accueil
   (26/08/2026). C'est désormais la SOURCE : elle s'édite à la main.
   ============================================================ */

/* ── base.css ── */


ul[class],
ol[class] {
  list-style: none;
  padding: 0;
}
/* (le header n'est plus dans cette règle : il est sticky — voir 01-hero.css) */

/* Header sticky (retour 13/08) : les ancres ne doivent pas passer dessous.
   Le bloc de prise de RDV (#contact) est dans <footer>, hors de <main> : il
   est ajouté explicitement, sinon les CTA le collent sous le header. */
main [id],
section[id],
footer [id] {
  scroll-margin-top: 96px;
}

/* ------------------------------------------------------------
   Rythme vertical inter-sections — écarts MESURÉS sur la
   maquette (delta y entre fin de node et node suivant) pour les
   sections qui ne portent pas leur propre padding externe.
   Les autres (01, 03, 04, 05, 09, 10, 12, 13) gèrent leur
   espacement en interne.
   ------------------------------------------------------------ */
.pourquoi        { margin-top: 96px;  } /* retour 13/08 : respiration après la bande logos */
.preoccupations  { margin-top: 91px;  } /* divider s1 (2112) → 2203 */
.difference      { margin-top: 63px;  } /* 3026 → 3089 */
.interieur       { margin-top: 105px; } /* 4902 → 5007 */
.comment         { margin-top: 94px;  } /* divider s3 (5667) → 5761 */
.demo            { margin-top: 108px; } /* 6496 → 6604 */
.methode         { margin-top: 91px;  } /* v2 : fin demo (7753) → 7844 */
.offre           { margin-top: 79px;  } /* v2 : fin methode (8615) → 8694 */
.case-studies    { margin-top: 89px;  } /* v2 : fin offre (9806) → 9895 */
.conviction      { margin-top: 0;     }/* fin interieur (5583) → 5667 */

@media (max-width: 768px) {

  .preoccupations { margin-top: 48px; }
  .difference     { margin-top: 48px; }
  .interieur      { margin-top: 64px; }
  .comment        { margin-top: 56px; }
  .demo           { margin-top: 64px; }
  .methode        { margin-top: 64px; }
  .offre          { margin-top: 56px; }
  .case-studies   { margin-top: 56px; }
  .faq            { margin-top: 64px; }
}  /* 5369:19217 + 5369:19380 (superposés dans Figma → une seule instance suffit) */

/* ---- Séparateurs horizontaux 1px ------------------------------
   Purs CSS (--color-border). Deux largeurs : contenu (1200px
   centré, comme x=120→1321) ou full-bleed 1440. */
.page-separator {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: min(var(--container-max), calc(100% - 2 * clamp(20px, 8.33vw, 120px)));
  height: 1px;
  background: var(--color-border);
  pointer-events: none;
  z-index: 0;
}

.page-separator--full {
  width: 100%;
}

/* Instances de la maquette */
.page-separator--s1 { top: 2112px; }  /* 5369:19215 « Line 350 » */
.page-separator--s2 { top: 4902px; }  /* 5369:23120 (x=120, w=1201) */
.page-separator--s3 { top: 5667px; }  /* 5369:23122 — full-bleed */
.page-separator--s4 { top: 6496px; }  /* 5369:23123 — full-bleed */

/* ---- Halo gradient flou (.glow-ellipse) ------------------------
   SVG exporté (ellipse coral→violet + flou gaussien débordant).
   S'utilise en <img class="glow-ellipse …" aria-hidden="true">.
   Le fichier inclut la marge de flou : l'ellipse « utile » fait
   ~426×626, le SVG rendu 1013×1429. */
.glow-ellipse {
  position: absolute;
  left: 50%;
  width: 1013px;
  height: 1429px;
  max-width: none;
  /* Centrage par `translate` et non `transform` : .glow-ellipse--mid est une
     cible de parallaxe (js/interactions.js) et `.plx { transform: … }` écrasait
     ce centrage — même piège que .hero__halo. */
  translate: -50% -50%;
  pointer-events: none;
  z-index: 0;
}

/* Instance de la maquette : node 5369:24819, box y=7259 (top) →
   centre vertical ≈ 7572px. x non déterminable depuis le node
   (vector page-level) : centré par défaut, ajuster à l'assemblage. */
.glow-ellipse--mid {
  top: 8066px;
  left: calc(50% + 380px);
  /* retour 24/08 : le halo mordait sur la section 10-methode. L'element est
     ancre sur demo.bottom - 320px (interactions.js, anchors[]) et fait 1429px :
     le bord bas de la section tombe donc TOUJOURS a 1035px du haut de l'image
     (320 + 714.5), quelle que soit la hauteur reelle de .demo. On eteint l'image
     a cet endroit, avec un fondu sur les 275px precedents. */
  -webkit-mask-image: linear-gradient(to bottom, #000 0 760px, transparent 1035px);
  mask-image: linear-gradient(to bottom, #000 0 760px, transparent 1035px);
} /* retour 24/08 : halo decale vers la droite de l'ecran. NB : le top n'est qu'une valeur de repli avant que interactions.js ne reancre ce halo sur .demo (anchors[]) — c'est LA qu'on le deplace. Retour 23/08 : le halo demarrait juste sous le titre « Meme prompt. Deux resultats. » ; descendu pour que l'ellipse utile commence au bas du bloc 08-demo (fin de section ~7753) */

/* Variante 100% CSS (fallback sans asset, approximation du SVG) */
.glow-ellipse--css {
  background:
    radial-gradient(closest-side at 50% 32%, rgba(255, 119, 74, 0.28), transparent 70%),
    radial-gradient(closest-side at 52% 62%, rgba(103, 94, 255, 0.35), transparent 72%);
  filter: blur(60px);
}

/* ---- Sparkle & étoiles de bas de page -------------------------
   Images décoratives ponctuelles du node « lignes ». Positions
   mesurées Figma, ancrées au centre du viewport (page 1440). */
.decor-sparkle,
.decor-star {
  position: absolute;
  pointer-events: none;
  z-index: 0;
}

/* retour 13/08 : .decor-sparkle--1 (24×24 @ 2486) supprimée — elle « flottait »
   sans raison dans le fond de la section 03-preoccupations. */
.decor-star--violet-1 { top: 10061px; left: calc(50% + 195px); width: 38px;  height: 37px; }  /* 5377:25285 (x=915) */
.decor-star--violet-2 { top: 10120px; left: calc(50% - 560px); width: 52px;  height: 51px; }  /* retour 13/08 : pendant gauche */
.decor-star--orange-1 { top: 10242px; left: calc(50% - 485px); width: 102px; height: 100px; } /* 5377:25286 (x=235) */
.decor-star--orange-2 { top: 10361px; left: calc(50% - 361px); width: 46px;  height: 45px; }/* 5377:25288 (x=359) */

/* ---- Responsive ------------------------------------------------ */

/* `.side-decor` et `.page-lines` sont servis par main.css et repris par le
   manifeste et les articles : leur repli mobile a été remonté là-bas, sans
   quoi seule la landing en profitait. Ne restent ici que les décors qui
   n'existent QUE sur la landing. */
@media (max-width: 768px) {

  .decor-sparkle,
  .decor-star,
  .glow-ellipse--mid { display: none; } /* maquette desktop-only : décor retiré sur mobile */

}



/* --- retours 13/08 : les étoiles décoratives doivent rester visibles
   au-dessus des fonds de section (la bande conviction les recouvrait) --- */
.decor-star,
.decor-sparkle {
  z-index: 2;
  pointer-events: none;
}/* ── 01-hero.css ── */


.hero__cta--primary {
  background: linear-gradient(90deg, #2d2d2d 0%, #000000 52.4%, #2d2d2d 100%); /* hors tokens: mesuré Figma */
  color: var(--color-white);
}

.hero__cta--ghost {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  color: var(--color-neutral-950);
  padding-left: 19px; /* mesuré */
}

/* ---- Hero ---------------------------------------------------- */

.hero {
  position: relative;
  overflow: hidden; /* clippe le halo (1672px) et la rangée de logos (1640px) comme le frame 1440 */
  padding-top: 94px; /* mesuré : badge à y=174 canvas − 80px de header */
  background: var(--color-white);
  font-family: var(--font-sans);
  text-align: center;
  color: var(--color-ink);
}

/* ---- Décor (aria-hidden) ------------------------------------ */

.hero__decor {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Nappe de fond — unique layer, l'ellipse de la maquette (node 7206:8806) :
   blob 1672×1738 en dégradé #FF774A → #675EFF, flou gaussien 197 (le SVG
   porte déjà le filtre). Orientation native, sans rotation : le lobe coral
   tombe à gauche, le violet à droite, comme la composition du frame HERO.
   Pleine intensité (pas d'opacité) : c'est la seule nappe du hero depuis le
   retrait des deux washes radiaux inventés le 13/08. */
.hero__halo {
  position: absolute;
  left: 50%;
  top: 830px;
  /* dimensions intrinsèques du SVG ré-exporté le 14/08 (1788×1580) : si la
     boîte ne respecte pas ce ratio, le blob est letterboxé — le nouvel export
     n'a plus preserveAspectRatio="none". À resynchroniser à chaque ré-export. */
  width: 1788px;
  height: 1580px;
  max-width: none;
  /* Centrage via la propriété `translate` et NON via `transform` : le JS de
     parallaxe ajoute .plx à cette image, et `.plx { transform: translateY(…) }`
     (css/90-interactions.css, chargé après) écrase tout `transform` posé ici.
     C'est ce qui décalait la nappe hors cadre. `translate` se compose avec
     `transform` au lieu d'entrer en conflit. */
  translate: -50% -50%;
}

/* Rail hachuré droit (Mask group 5369:19053, 120×1028 @ x=1320 y=80).
   Lignes 1px / pas 6.5px en --color-media-bg + fondu vertical masqué —
   même technique que .side-decor de css/00-decor.css. */
.hero__rail {
  position: absolute;
  top: 0;
  right: 0;
  width: 120px;
  height: 1028px;
  background: repeating-linear-gradient(
    to bottom,
    var(--color-media-bg) 0 1px,
    transparent 1px 6.5px
  );
  -webkit-mask-image: linear-gradient(180deg, transparent 8.85%, rgba(0, 0, 0, 0.5) 33.47%, #000 48%, rgba(0, 0, 0, 0.5) 68.8%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 8.85%, rgba(0, 0, 0, 0.5) 33.47%, #000 48%, rgba(0, 0, 0, 0.5) 68.8%, transparent 100%);
}


/* Étoiles / fleur — positions mesurées (canvas y − 80), ancrées au centre. */
.hero__star { position: absolute; }
.hero__star--flower    { left: calc(50% - 340px); top: 285px; width: 130px; height: 174px; filter: blur(5px); object-position: bottom; }
.hero__star--orange-sm { left: calc(50% - 453px); top: 412px; width: 114px; height: 112px; filter: blur(2.5px); }
.hero__star--orange-lg { left: calc(50% - 392px); top: 513px; width: 183px; height: 180px; z-index: 2; /* retour 13/08 : au-dessus du dashboard */ }
.hero__star--violet-lg { left: calc(50% + 305px); top: 424px; width: 241px; height: 236px; filter: blur(15px); }
.hero__star--violet-sm { left: calc(50% + 309px); top: 302px; width: 38px;  height: 37px; }

/* ---- Contenu ------------------------------------------------- */

.hero__content {
  position: relative;
  z-index: 1;
  padding-inline: clamp(20px, 8.33vw, 120px);
}

/* Badge « LE NOUVEAU STANDARD DU DESIGN » (5369:24499)
   retours 13/08 : reprise à l'identique de l'eyebrow « Pourquoi maintenant »
   (css/02-pourquoi.css) — coque blanche 3px + bord 50% + ombre + pilule
   dégradée interne. Toute évolution doit rester synchronisée avec elle. */
.hero__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);
}

.hero__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%);
}

/* Texte du badge en dégradé coral→violet (clip séparé de la pilule) */
.hero__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;
}

.hero__title {
  margin: 20px 0 0; /* mesuré : badge (174+34) → h1 (228) */
  font-size: clamp(40px, 6vw, var(--text-hero));
  line-height: 1; /* 72px/72px */
  font-weight: var(--text-hero--font-weight);
  letter-spacing: var(--text-hero--letter-spacing);
  color: #2d2d2d; /* hors tokens: mesuré Figma */
}

.hero__title-gradient {
  background: linear-gradient(90deg, var(--color-accent-coral), var(--color-primary-vivid));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero__subtitle {
  max-width: 580px; /* retour 13/08 : élargi pour tenir sur 2 lignes (mesuré Figma : 507) */
  text-wrap: balance;
  margin: 32px auto 0;
  font-family: var(--font-display);
  font-size: var(--text-body-lg);
  line-height: 24px; /* hors tokens: mesuré Figma (18/24) */
  font-weight: 400;
  color: rgba(17, 17, 17, 0.8); /* --color-neutral-950 @80% */
}

.hero__ctas {
  display: flex;
  justify-content: center;
  gap: 14px; /* mesuré */
  margin-top: 34px; /* mesuré : sous-titre (404+48) → boutons (486) */
}

.hero__notes {
  max-width: 622px; /* mesuré */
  margin: 32px auto 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-small);
  line-height: 22px; /* hors tokens: mesuré Figma (14/22) */
  font-weight: 400;
  color: rgba(17, 17, 17, 0.7); /* --color-neutral-950 @70% */
}

/* retour 13/08 : plus de puces devant les notes */

.hero__dashboard {
  position: relative; /* ancre la pill v2 superposée */
  width: min(1135px, 100%);
  margin: 76px auto 0; /* mesuré : notes (566+44) → dashboard (686) */
}

.hero__dashboard > img {
  display: block;
  width: 100%;
  height: auto;
}


/* ---- Tooltips d'équipe sur le dashboard (retours 13/08) -------
   « Infrastructure IA » (node 7206:9277) et « Direction artistique »
   (node 7206:9285) : pastilles 45px de haut en dégradé, texte blanc
   gras 16px, avatar rond 33px, ombre douce. Ancrées sur les bords
   hauts du visuel. */
.hero__tip {
  position: absolute;
  z-index: 3;
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 18px 6px 6px; /* mesuré : pastille h=45, avatar 33 + 6 de marge */
  border-radius: var(--radius-pill);
  box-shadow:
    0px 8px 16px -12px rgba(51, 51, 51, 0.28),
    0px 4px 20px 0px rgba(0, 0, 0, 0.07);
  font-size: 16px; /* hors tokens: mesuré Figma */
  line-height: 20px;
  font-weight: 700;
  color: var(--color-white);
  white-space: nowrap;
}

/* Dégradés relevés sur les exports Figma (fills des pastilles) :
   le dégradé va du ton clair, côté avatar, vers le ton saturé à l'opposé. */
.hero__tip--ia {
  /* #7060F4 : primaire de la maquette, 1 point d'écart avec --color-primary */
  background: linear-gradient(90deg, #7060F4 0%, #D4C8F2 100%); /* hors tokens: mesuré Figma */
  flex-direction: row-reverse; /* avatar à droite, comme la maquette */
  padding: 6px 6px 6px 18px;
}

.hero__tip--da {
  background: linear-gradient(90deg, #FEB4A7 0%, var(--color-accent-coral) 100%); /* #FEB4A7 hors tokens: mesuré Figma */
}

/* Queue décorative (nodes 7206:9280 « DEV » et 7206:9286 « DA ») : petit
   trait courbe plein, dans le ton saturé de chaque dégradé. Positions et
   rotations reprises de la maquette — le repère est le centre de la boîte
   Figma de la queue rapporté au coin de la pastille.
     IA  : boîte 45.1×45.9 @ (-22, +21.9) du coin haut-gauche, vecteur
           36.2×37.3 pivoté de -164° → sort en bas à gauche.
     DA  : boîte 38.5×38.0 @ (+178.1, -17) du coin haut-gauche (pastille
           196 large), vecteur 30.0×29.3 pivoté de +20.64° → sort en haut
           à droite. */
.hero__tip::before {
  content: "";
  position: absolute;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
  z-index: -1; /* glissée SOUS la pastille, comme dans la maquette */
}

.hero__tip--ia::before {
  width: 36.2px;
  height: 37.3px;
  left: -17.6px;
  bottom: -18.5px;
  background-image: url("/a/assets/hero/tip-tail-ia.svg?v=90a2eeb0");
  transform: rotate(-164deg);
}

.hero__tip--da::before {
  width: 30px;
  height: 29.3px;
  right: -16.4px;
  top: -12.7px;
  background-image: url("/a/assets/hero/tip-tail-da.svg?v=91c0c1fc");
  transform: rotate(20.64deg);
}

.hero__tip-avatar {
  flex: none;
  width: 33px;
  height: 33px;
  border-radius: var(--radius-full);
  object-fit: cover;
}

/* posées à cheval sur le visuel, comme les bulles de la maquette */
.hero__tip--ia { top: 58px;  right: -30px; }
.hero__tip--da { top: 196px; left: -40px; }

/* Pill « Conçu et validé » (v2, node 7206:9180) : 906×34 @ x=268 y=1050 canvas,
   soit centrée sur le dashboard (152→1287), bas de pill à 79px du bas du visuel. */
.hero__dashboard-note {
  position: absolute;
  left: 50%;
  bottom: 79px; /* mesuré : dashboard fin y=1163, pill y=1050 h=34 */
  transform: translateX(-50%);
  margin: 0;
  padding: 6px 17px; /* mesuré : texte à 17px du bord, h totale 34px */
  background: var(--color-white);
  border: 1px solid var(--color-border); /* retour 13/08 : bord plein, même UI que l'eyebrow "pourquoi" */
  border-radius: var(--radius-pill); /* 70px dans Figma */
  box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.05);
  font-size: 15px; /* hors tokens: mesuré Figma */
  line-height: 22px;
  font-weight: 400;
  color: rgba(38, 41, 46, 0.7); /* --color-ink @70% */
  white-space: nowrap;
}

.hero__dashboard-note strong {
  font-weight: 500; /* Manrope Medium dans la maquette */
}

/* ---- Bande logos --------------------------------------------- */

.hero__logos {
  position: relative;
  z-index: 2;
  margin-top: -56px; /* la bande (y=1107) recouvre le bas du dashboard (fin y=1163) comme dans Figma */
  margin-bottom: 0; /* retour 13/08 : la section se termine par les logos */ /* mesuré : bas de bande (1339) → bas du frame (1436.6), le halo déborde dessous */
  padding: 40px 0;
  background: var(--color-white);
  border-block: 1px solid var(--color-border);
}

.hero__logos-title {
  margin: 0;
  font-size: var(--text-h4);
  line-height: var(--text-h4--line-height);
  font-weight: 500; /* mesuré (Manrope Medium, le token h4 est à 600) */
  letter-spacing: -0.01em; /* mesuré : -0.24px */
  color: var(--color-border-dark); /* #27292E */
}

.hero__logos-row {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

.hero__logos-row li {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 240px;  /* cellule Figma 240×100, logo 200×64 centré */
  height: 100px;
}

.hero__logos-row img {
  display: block;
  width: 200px;
  height: auto;
}/* ---- Responsive ---------------------------------------------- */

@media (max-width: 1024px) {

  .hero__rail { display: none; }
  .hero__dashboard-note { display: none; } /* pill 906px : illisible sur dashboard réduit (adaptation proposée, maquette desktop-only) */
  .hero__star--flower,
  .hero__star--orange-sm { display: none; }
  .hero__logos-row { flex-wrap: wrap; gap: 8px; }
  .hero__logos-row li { width: 200px; height: 72px; }
  .hero__logos-row img { width: 160px; }
}
@media (max-width: 768px) {


  .hero { padding-top: 56px; }
  .hero__title { line-height: 1.05; }
  .hero__subtitle { margin-top: 24px; }
  .hero__ctas { flex-direction: column; align-items: center; margin-top: 28px; }
  .hero__notes { margin-top: 24px; padding-inline: 8px; }
  .hero__dashboard { margin-top: 48px; }
  .hero__logos { margin-top: 24px; margin-bottom: 48px; padding: 32px 0; }
  .hero__logos-title { font-size: 20px; line-height: 28px; }
  .hero__star--orange-lg { width: 120px; height: 118px; left: calc(50% - 280px); }
  .hero__star--violet-lg { width: 160px; height: 157px; left: calc(50% + 180px); }
  .hero__halo { width: 1100px; height: 972px; top: 620px; } /* ratio 1788/1580 conservé */

}
/* Très petits écrans : la barre de chrome reste sur une ligne */
@media (max-width: 480px) {

  .hero__cta { width: min(100%, 260px); justify-content: center; gap: 10px; }
}
/* --- retours 13/08 : replis responsive des ajouts ci-dessus ------- */
@media (max-width: 1280px) {

  .hero__tip--ia { right: 8px; }
  .hero__tip--da { left: 8px; }
}
@media (max-width: 900px) {

  .hero__tip { display: none; } /* plus de place utile à cheval sur le visuel */

}
@media (max-width: 768px) {

  .hero__subtitle br { display: none; } /* le texte se recompose seul */

}
/* ── 02-pourquoi.css ── */
/* ============================================================
   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;
  /* retour du 26/08 : de nouveau sur UNE ligne — la borne à 720px, posée le
     13/08 pour assumer deux lignes, la reprovoquait. */
  max-width: min(1100px, 100%);
  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 */
  }
}
/* ── 03-preoccupations.css ── */
/* ============================================================
   Section 03 — preoccupations · Figma node 5369:19545
   Desktop 1440 : eyebrow → titre 54 → intro → grille 2×3 de
   préoccupations séparées par des filets (carrés noirs 7px aux
   intersections) → note de conclusion.
   ============================================================ */

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

.preoccupations__container {
  max-width: var(--container-max); /* grille mesurée 1201px */
  margin-inline: auto;
}

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

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

/* Eyebrow : pilule blanche + pilule dégradée interne + texte dégradé */
.preoccupations__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);
}

.preoccupations__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%);
}

.preoccupations__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;
}

.preoccupations__title {
  margin: 19px 0 0;
  max-width: 865px;
  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 */
}

.preoccupations__intro {
  margin: 34px 0 0;
  max-width: 597px;
  font-size: var(--text-body);
  line-height: 22px; /* hors tokens: mesuré Figma (Body 16 → lh 22 ici) */
  font-weight: var(--text-body--font-weight);
  color: rgba(17, 17, 17, 0.8); /* --color-neutral-950 @80% */
}

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

/* ---- Grille 2×3 --------------------------------------------- */

.preoccupations__grid {
  list-style: none;
  margin: 67px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

/* Rangée 2 (valeurs par défaut) — mesures Figma */
.preoccupations__item {
  position: relative;
  padding: 40px 20px 22px 42px;
}

/* Rangée 1 */
.preoccupations__item:nth-child(-n + 3) {
  padding-top: 11px;
  padding-bottom: 51px;
}

/* Filets verticaux (colonnes 2 et 3) et horizontal (rangée 2) */
.preoccupations__item:nth-child(3n + 2),
.preoccupations__item:nth-child(3n) {
  border-left: 1px solid var(--color-border);
}

.preoccupations__item:nth-child(n + 4) {
  border-top: 1px solid var(--color-border);
}

/* Carrés noirs 7px aux intersections des filets */
.preoccupations__item:nth-child(5)::before,
.preoccupations__item:nth-child(6)::before {
  content: "";
  position: absolute;
  top: -4px;
  left: -4px;
  width: 7px;
  height: 7px;
  background: var(--color-ink-strong);
}

/* Picto : cadre 60px + carte interne 52px + icône 24px */
.preoccupations__picto {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border: 1px solid var(--color-border);
  border-radius: 15px; /* hors tokens: mesuré Figma */
}

.preoccupations__picto-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  background: rgba(255, 255, 255, 0.3); /* --color-white @30% */
  border: 1px solid var(--color-border);
  border-radius: 15px; /* hors tokens: mesuré Figma */
  box-shadow: 5px 10px 30px 0px rgba(0, 0, 0, 0.07);
}

.preoccupations__item-title {
  margin: 24px 0 0;
  max-width: 340px; /* retour 13/08 : + de largeur, le « » ne passe plus seul à la ligne */
  text-wrap: balance;
  font-family: var(--font-display);
  font-size: var(--text-h6);
  line-height: 32px; /* hors tokens: mesuré Figma (token h6 = 28px) */
  font-weight: var(--text-h6--font-weight);
  letter-spacing: var(--text-h6--letter-spacing);
  color: var(--color-border-dark); /* #27292E — seul token exact pour ce texte */
}

.preoccupations__item-text {
  margin: 8px 0 0;
  max-width: 325px;
  font-family: var(--font-display);
  font-size: var(--text-body);
  line-height: var(--text-body--line-height);
  font-weight: var(--text-body--font-weight);
  color: rgba(38, 41, 46, 0.7); /* --color-ink @70% */
}

/* ---- Note de conclusion ------------------------------------- */

.preoccupations__note {
  margin: 67px auto 0;
  max-width: 720px;
  min-height: 46px; /* retour 13/08 : respiration verticale (34 avant) */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 11px 28px; /* retour 13/08 : + de padding en hauteur (5px avant) */
  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);
  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% */
}

.preoccupations__note strong {
  font-weight: 500; /* Manrope Medium */
}/* ---- Responsive (maquette desktop-only → adaptation) --------- */

@media (max-width: 1024px) {

  .preoccupations__item {
    padding-left: 24px;
    padding-right: 16px;
  }
}
@media (max-width: 768px) {

  .preoccupations__grid {
    grid-template-columns: 1fr;
    margin-top: 48px;
  }

  .preoccupations__item,
  .preoccupations__item:nth-child(-n + 3) {
    padding: 32px 0;
    border-left: none;
  }

  .preoccupations__item:nth-child(n + 2) {
    border-top: 1px solid var(--color-border);
  }

  .preoccupations__item:first-child {
    padding-top: 0;
  }

  .preoccupations__item:nth-child(5)::before,
  .preoccupations__item:nth-child(6)::before {
    display: none; /* marqueurs d'intersection sans objet en 1 colonne */
  }

  .preoccupations__note {
    margin-top: 48px;
    border-radius: var(--radius-xl); /* pilule → capsule multi-lignes */
  }
}



/* --- retours 13/08 ------------------------------------------------ */
.preoccupations__picto-inner .lucide {
  display: block;
  width: 24px;
  height: 24px;
  color: var(--color-ink);
}

.preoccupations__note {
  white-space: nowrap; /* retour 13/08 : une seule ligne comme la maquette */
}@media (max-width: 900px) {

  .preoccupations__note { white-space: normal; }
}
/* ── 04-difference.css ── */
/* ============================================================
   04 — DIFFERENCE (« Vous allez voir la différence immédiatement. »)
   Figma : OOjXOqpdlvsMfWGqmVWN6c / node 5369:22717 — 1440×875, full-bleed sombre
   ============================================================ */

.difference {
  position: relative;
  overflow: hidden;
  background: var(--color-neutral-950);
  font-family: var(--font-sans);
}

/* Halo décoratif orange/violet (SVG plein cadre, hors flux) */
.difference__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.difference__inner {
  position: relative; /* au-dessus du halo */
  max-width: var(--container-max);
  margin-inline: auto;
  padding: 127px clamp(20px, 8.33vw, 120px) 105px; /* hors tokens: mesuré Figma (127 haut / 105 bas) */
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* — Badge « GAME CHANGER » — */
.difference__badge {
  margin: 0 0 19px; /* hors tokens: mesuré Figma */
  display: inline-flex;
  padding: 3px;
  border-radius: var(--radius-pill);
  background: var(--color-neutral-950);
  border: 1px solid rgba(229, 231, 233, 0.5); /* --color-border @50% */
  box-shadow: 0 4px 20px 0 rgba(255, 255, 255, 0.2);
}

.difference__badge-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, #fff1ed, #f0efff); /* hors tokens: mesuré Figma */
}

.difference__badge-label {
  font-size: var(--text-eyebrow);
  line-height: var(--text-eyebrow--line-height);
  letter-spacing: var(--text-eyebrow--letter-spacing);
  font-weight: var(--text-eyebrow--font-weight);
  text-transform: uppercase;
  white-space: nowrap;
  background: linear-gradient(90deg, var(--color-accent-coral), var(--color-primary-vivid));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* — Titre — */
.difference__title {
  margin: 0 0 26px; /* hors tokens: mesuré Figma */
  max-width: 865px;
  text-align: center;
  color: var(--color-white);
  font-size: clamp(32px, 4.5vw, var(--text-h2));
  line-height: 1.04; /* = 56/54, --text-h2--line-height fluide */
  letter-spacing: var(--text-h2--letter-spacing);
  font-weight: var(--text-h2--font-weight);
}

/* — Intro — */
.difference__intro {
  margin: 0 0 54px; /* hors tokens: mesuré Figma */
  max-width: 689px;
  text-align: center;
  color: rgba(255, 255, 255, 0.8); /* --color-white @80% */
  font-size: var(--text-body-sm);
  line-height: var(--text-body-sm--line-height);
  font-weight: var(--text-body-sm--font-weight);
}

.difference__intro p {
  margin: 0;
}

/* — Panneau dégradé autour du comparateur — */
.difference__panel {
  width: min(791px, 100%);
  padding: 14px; /* hors tokens: mesuré Figma (écart wrapper 791 → carte 760) */
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: linear-gradient(270deg, rgba(255, 241, 237, 0.1), rgba(240, 239, 254, 0.1)); /* hors tokens: mesuré Figma */
}

.difference__scroll {
  overflow-x: auto;
  border-radius: 14px; /* hors tokens: mesuré Figma */
}

/* — Carte comparateur — */
.difference__card {
  position: relative;
  min-width: 758px; /* préserve la géométrie (surlignage absolu) ; scroll horizontal en dessous */
  padding: 0 23px 25px; /* hors tokens: mesuré Figma */
  border-radius: 14px; /* hors tokens: mesuré Figma */
  border: 1px solid var(--color-border);
  background: var(--color-white);
  overflow: hidden;
}

/* Colonne « + DesignBrain » surlignée (décor) */
.difference__highlight {
  position: absolute;
  left: 569px;
  top: 9px;
  width: 179px;
  height: 301px;
  border-radius: var(--radius-lg);
  background: rgba(113, 96, 243, 0.07); /* --color-primary @7% */
  pointer-events: none;
}

.difference__row {
  position: relative; /* au-dessus du surlignage */
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 46px;
  border-top: 1px solid var(--color-border);
}

.difference__row--head {
  margin-top: 23px; /* hors tokens: mesuré Figma */
  align-items: flex-start;
  border-top: 0;
}

.difference__th {
  width: 160px;
  text-align: center;
  color: var(--color-neutral-950);
  font-size: var(--text-small);
  line-height: normal;
  font-weight: 600;
}

.difference__th--label {
  width: 165px;
  text-align: left;
}

.difference__th--brand {
  background: linear-gradient(90deg, var(--color-accent-coral) 24.375%, var(--color-primary-vivid) 77.813%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.difference__label {
  width: 165px;
  color: var(--color-neutral-950);
  font-size: var(--text-caption);
  line-height: normal;
  font-weight: var(--text-caption--font-weight);
}

/* Première ligne : label en 14px dans la maquette (les suivantes en 13px) */
.difference__label--lead {
  font-size: var(--text-small);
}

.difference__cell {
  width: 160px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

/* Notes en pastilles — retours 13/08 : les 3 SVG statiques (dots-N-sur-3)
   sont remplacés par du markup, pour animer le remplissage au scroll.
   Géométrie reprise au pixel des SVG d'origine : 3 ronds de 8px, pas de
   12px, groupe centré dans une cellule de 160px. */
.difference__dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px; /* pas 12px = 8px de rond + 4px */
  width: 160px;
  height: 8px;
}

.difference__dot {
  box-sizing: border-box;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--color-neutral-950); /* #111 — rond plein des SVG */
}

.difference__dot--empty {
  background: none;
  border: 1.2px solid var(--color-border); /* #E5E7E9 — rond vide des SVG */
}

.difference__dots--accent .difference__dot { background: var(--color-primary-vivid); }/* #7160F3 */

/* Animation : les ronds pleins « s'allument » l'un après l'autre quand le
   panneau entre dans le viewport (classe .is-in posée par interactions.js).
   Les ronds vides restent inertes — c'est le contraste qui fait la démo. */
@media (prefers-reduced-motion: no-preference) {

  .difference__panel.reveal .difference__dot { transform: scale(0.2); opacity: 0; }

  .difference__panel.reveal .difference__dot--empty { transform: none; opacity: 1; }

  .difference__panel.reveal.is-in .difference__dot {
    animation: difference-dot-in 460ms cubic-bezier(0.34, 1.4, 0.5, 1) both;
    animation-delay: var(--dot-delay, 0ms);
  }

  .difference__panel.reveal.is-in .difference__dot--empty { animation: none; }
}


/* Cascade : ligne par ligne, puis rond par rond dans chaque note. */
.difference__row:nth-child(2) .difference__dots { --row-delay: 60ms; }
.difference__row:nth-child(3) .difference__dots { --row-delay: 170ms; }
.difference__row:nth-child(4) .difference__dots { --row-delay: 280ms; }
.difference__row:nth-child(5) .difference__dots { --row-delay: 390ms; }
.difference__row:nth-child(6) .difference__dots { --row-delay: 500ms; }

.difference__dot:nth-child(1) { --dot-delay: var(--row-delay, 0ms); }
.difference__dot:nth-child(2) { --dot-delay: calc(var(--row-delay, 0ms) + 80ms); }
.difference__dot:nth-child(3) { --dot-delay: calc(var(--row-delay, 0ms) + 160ms); }

@keyframes difference-dot-in {
  from { transform: scale(0.2); opacity: 0; }
  60%  { transform: scale(1.18); opacity: 1; }
  to   { transform: scale(1); opacity: 1; }
}

.difference__sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}/* ============================================================
   Responsive (maquette desktop-only → adaptation)
   ============================================================ */

@media (max-width: 1024px) {

  .difference__inner {
    padding-top: 96px;
    padding-bottom: 80px;
  }
}
@media (max-width: 768px) {

  .difference__inner {
    padding-top: 72px;
    padding-bottom: 64px;
  }

  .difference__title {
    margin-bottom: 20px;
  }

  .difference__intro {
    margin-bottom: 40px;
  }

  .difference__panel {
    padding: 8px;
  }

}
/* ============================================================
   Comparateur — le point de bascule.

   La carte a besoin de 758px, plus 28px de cadre : le panneau ne les
   lui donne qu'à partir de ~943px de large (il vaut 83,34% du viewport
   une fois les gouttières déduites). En dessous, la carte défilait
   horizontalement — et la SEULE colonne visible était « Sans IA »,
   celle qui porte l'argument commençant à x=569. Une tablette en
   portrait (810px) tombait en plein dedans.

   Le palier est donc posé à 940px, pas à 768 : c'est la mesure, pas
   une taille d'appareil, qui décide. Sous cette largeur, on empile les
   critères et on range les trois notes CÔTE À CÔTE — la comparaison
   reste lisible d'un coup d'œil, ce qui est tout l'objet du bloc.
   ============================================================ */

@media (max-width: 940px) {

  /* Le nom de colonne est réinjecté au-dessus de chaque note depuis
     l'attribut `data-col` posé sur la cellule dans index.html : le
     libellé reste dans le HTML, pas dans la feuille. */
  .difference__scroll { overflow-x: visible; }

  .difference__card {
    min-width: 0;
    padding: 0 14px 16px;
  }

  /* Le surlignage est un calque en absolu calé sur la 4e colonne : il n'a
     plus de colonne à surligner une fois la carte repliée. */
  .difference__highlight { display: none; }

  .difference__row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: start;
    height: auto;
    padding: 14px 0 16px;
    row-gap: 10px;
  }

  /* Les en-têtes redescendent dans les cellules (voir ::before ci-dessous).
     Posé APRÈS `.difference__row` : même spécificité, c'est l'ordre qui
     tranche — placé avant, le `display: grid` le rallumait. */
  .difference__row--head { display: none; }

  .difference__label,
  .difference__label--lead {
    grid-column: 1 / -1;
    width: auto;
    font-size: var(--text-small);
    font-weight: 600;
    color: var(--color-neutral-950);
  }

  .difference__cell {
    width: auto;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }

  .difference__cell::before {
    content: attr(data-col);
    /* la colonne fait ~93px à 390 et ~74px à 320 : la taille suit, pour
       que « + DesignBrain » tienne sans être coupé en plein mot */
    font-size: clamp(9px, 2.6vw, 11px);
    line-height: 14px;
    font-weight: 600;
    text-align: center;
    color: var(--color-neutral-950);
  }

  /* La colonne de marque garde son insistance : le dégradé signature. */
  .difference__cell--brand::before {
    background: linear-gradient(90deg, var(--color-accent-coral), var(--color-primary-vivid));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  .difference__dots { width: auto; }
}

/* ── 05-produit.css ── */
/* ============================================================
   05 — PRODUIT (« Vous possédez désormais un Design Brain. »)
   Figma : OOjXOqpdlvsMfWGqmVWN6c / node 5374:25277 — 1168×840
   ============================================================ */

.produit {
  font-family: var(--font-sans);
  background: var(--color-white);
  padding-top: 98px; /* hors tokens: mesuré Figma (écart fin de Difference y=3964 → badge y=4062) */
  padding-bottom: 33px; /* hors tokens: compense le chevauchement de la pilule conclusion (-67px) pour retomber sur les 840px du node */
}

.produit__inner {
  /* contenu 1168px (--container-content) + gouttières minimales de 20px */
  max-width: calc(var(--container-content) + 40px);
  margin-inline: auto;
  padding-inline: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* — Badge « LE PRODUIT » — */
.produit__badge {
  margin: 0 0 19px; /* hors tokens: mesuré Figma */
  display: inline-flex;
  padding: 3px;
  border-radius: var(--radius-pill);
  background: var(--color-white);
  border: 1px solid rgba(229, 231, 233, 0.5); /* --color-border @50% */
  box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.05);
}

.produit__badge-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, #fff1ed, #f0efff); /* hors tokens: mesuré Figma */
}

.produit__badge-label {
  font-size: var(--text-eyebrow);
  line-height: var(--text-eyebrow--line-height);
  letter-spacing: var(--text-eyebrow--letter-spacing);
  font-weight: var(--text-eyebrow--font-weight);
  text-transform: uppercase;
  white-space: nowrap;
  background: linear-gradient(90deg, var(--color-accent-coral), var(--color-primary-vivid));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* — Titre — */
.produit__title {
  margin: 0 0 31px; /* hors tokens: mesuré Figma */
  max-width: 865px;
  text-align: center;
  color: #2d2d2d; /* hors tokens: mesuré Figma */
  font-size: clamp(32px, 4.5vw, var(--text-h2));
  line-height: 1.04; /* = 56/54, --text-h2--line-height fluide */
  letter-spacing: var(--text-h2--letter-spacing);
  font-weight: var(--text-h2--font-weight);
}

/* — Intro — */
.produit__intro {
  margin: 0 0 89px; /* hors tokens: mesuré Figma */
  max-width: 593px;
  text-align: center;
  color: rgba(17, 17, 17, 0.8); /* --color-neutral-950 @80% */
  font-size: var(--text-body);
  line-height: 22px; /* hors tokens: mesuré Figma (token body = 24px) */
  font-weight: var(--text-body--font-weight);
}

/* — Corps : features à gauche, mockup à droite — */
.produit__body {
  display: flex;
  align-items: center;   /* retour du 26/08 : colonnes recentrées */
  gap: 62px; /* hors tokens: mesuré Figma */
  width: 100%;
}

.produit__features {
  list-style: none;
  margin: 0;
  padding: 25px 0 0; /* hors tokens: mesuré Figma (features y=4416 vs corps y=4391) */
  width: 361px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 48px; /* hors tokens: mesuré Figma (pas vertical de 136px) */
}

.produit__feature-title {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px; /* hors tokens: mesuré Figma */
  color: var(--color-ink);
  font-size: var(--text-h5);
  line-height: var(--text-h5--line-height);
  letter-spacing: var(--text-h5--letter-spacing);
  font-weight: var(--text-h5--font-weight);
}

.produit__feature-title img {
  flex-shrink: 0;
}

.produit__feature-text {
  margin: 8px 0 0;
  color: rgba(38, 41, 46, 0.7); /* --color-ink @70% */
  font-size: var(--text-body);
  line-height: var(--text-body--line-height);
  font-weight: var(--text-body--font-weight);
}

/* — Visuel : mockup dashboard sur trame de points — */
.produit__visual {
  position: relative;
  margin: 0 0 0 auto;
  width: 745px;
  height: 462px;   /* suit la hauteur du cadre, moins de vide sous le visuel */
  flex-shrink: 0;
  background-image: url("/a/assets/produit/dots-pattern.webp?v=38ddf495");
  background-size: 119px 119px;
  background-position: top left;
  background-repeat: repeat;
}

/* Ligne verticale décorative (SVG horizontal pivoté).

   Retour d'intégration du 26/08 : « le filet vertical ne doit pas dépasser et
   doit tomber parfaitement avec le filet horizontal ».

   L'ancien centrage (top:50% + translate(-50%,-50%)) posait une ligne de 511px
   centrée sur un bloc de 462 : elle débordait de 24,5px EN HAUT ET EN BAS,
   mesuré au rendu. On passe à l'ancrage par le coin, comme
   `.case-studies__divider` — c'est prévisible, et c'est déjà la convention ici.

   Origine `top left` + rotate(90deg) : la largeur devient la LONGUEUR, vers le
   bas ; la hauteur devient l'épaisseur, vers la GAUCHE. D'où `left:4px` pour
   garder l'axe exactement où il était (x de 561 à 563 à 1440px).

   438px = du haut de .produit__visual (4515,1) jusqu'au filet horizontal qui
   ferme la section, `hr.page-divider--content` (4953,1). Ce nombre suit la
   hauteur de .produit__visual (462) moins les 24px dont ce bloc déborde de sa
   propre section : le recalculer si l'une des deux bouge. */
.produit__line {
  position: absolute;
  left: 4px;
  top: 0;
  width: 438px;
  height: 2px;
  transform: rotate(90deg);
  transform-origin: top left;
  pointer-events: none;
}

.produit__line img {
  display: block;
  width: 100%;
  height: 100%;
}

.produit__screen {
  position: absolute;
  left: 59px;
  top: 0;
  width: 609px;
  height: 372px;   /* retour du 26/08 : hauteur ajustée au contenu réel */
  overflow: hidden;  /* la console remplit le cadre, rien n'en sort */
  border-radius: var(--radius-md);
  background: var(--color-white);
  border: 0.779px solid rgba(229, 231, 233, 0.3); /* --color-border @30% */
  box-shadow:
    0 11.69px 23.379px -11.69px rgba(203, 209, 213, 0.16),
    0 15.586px 38.965px -19.483px rgba(203, 209, 213, 0.2),
    0 17.145px 34.29px 0 rgba(203, 209, 213, 0.4); /* base --color-border-strong */
  overflow: hidden;
}

/* — Pilule de conclusion (chevauche le bas de la trame de points) — */
/* Ces pilules ne sont PAS des conteneurs flex : la phrase y est faite de
   deux nœuds (le texte courant et son <strong>), et une boîte flex jette
   l'espace blanc qui les sépare — on lisait « un actif vivant.Pas un
   document oublié. » sur desktop, et deux colonnes aux césures
   indépendantes une fois la page repliée. En bloc, la phrase reste une
   phrase à toutes les largeurs. */
.produit__conclusion {
  position: relative; /* passe au-dessus de la trame */
  margin: -67px auto 0; /* hors tokens: mesuré Figma (pilule y=4835, corps finit y=4902) */
  display: block;
  min-height: 34px;
  width: 490px;
  max-width: 100%;
  padding: 5px 20px;
  border-radius: var(--radius-pill);
  background: var(--color-white);
  border: 1px solid rgba(229, 231, 233, 0.5); /* --color-border @50% */
  box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.05);
  color: rgba(38, 41, 46, 0.7); /* --color-ink @70% */
  font-size: var(--text-body-sm);
  line-height: var(--text-body-sm--line-height);
  font-weight: var(--text-body-sm--font-weight);
  text-align: center;
}

.produit__conclusion strong {
  font-weight: 500;
}/* ============================================================
   Responsive (maquette desktop-only → adaptation)
   ============================================================ */

@media (max-width: 1280px) {

  .produit__body {
    gap: 48px;
  }

  .produit__visual {
    width: min(745px, 100%);
    min-width: 0;
  }

  .produit__screen {
    left: min(59px, 4%);
    width: min(609px, calc(100% - 8%));
  }
}
@media (max-width: 1024px) {

  .produit {
    padding-top: 80px;
  }

  .produit__intro {
    margin-bottom: 56px;
  }

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

  .produit__features {
    width: 100%;
    max-width: 593px;
    padding-top: 0;
    gap: 32px;
  }

  .produit__visual {
    width: 100%;
    height: auto;
    padding: 32px 16px;
    display: flex;
    justify-content: center;
  }

  .produit__line {
    display: none;
  }

  .produit__screen {
    position: relative;
    left: auto;
    top: auto;
    width: min(609px, 100%);
    height: auto;
    aspect-ratio: 609 / 408;
  }

  .produit__conclusion {
    margin-top: 24px;
    width: fit-content;
  }
}
@media (max-width: 768px) {

  .produit {
    padding-top: 64px;
  }

  .produit__title {
    margin-bottom: 20px;
  }

  .produit__intro {
    margin-bottom: 40px;
  }
}



/* --- retours 13/08 : pictos lucide -------------------------------- */
.produit__features .lucide {
  display: block;
  width: 22px;
  height: 22px;
  color: var(--color-ink);
  flex: none;
}/* ── 06-interieur.css ── */
/* ============================================================
   Section 06 — interieur · Figma node 5369:24504 (1134×576 @ y=5007)
   Desktop 1440 : eyebrow → titre 54 → 4 cards (Identité / Système /
   Intelligence / Connexions), chacune avec un mock "table Employees"
   incliné et rogné en décor → pill de conclusion.
   ============================================================ */

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

.interieur__container {
  max-width: 1134px; /* hors tokens: mesuré Figma (largeur du node, rangée de 4 cards) */
  margin-inline: auto;
}

/* ---- En-tête (aligné à gauche) ------------------------------ */

.interieur__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Eyebrow : pilule blanche + pilule dégradée interne + texte dégradé
   (même pattern que .pourquoi__eyebrow) */
.interieur__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: 70px; /* hors tokens: mesuré Figma (token pill = 80px) */
  box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.05);
}

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

.interieur__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;
  text-align: center;
  background: linear-gradient(90deg, var(--color-accent-coral) 0%, var(--color-primary-vivid) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.interieur__title {
  margin: 19px 0 0;
  max-width: 1015px;
  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 */
}

/* ---- Grille de 4 cards -------------------------------------- */

.interieur__cards {
  list-style: none;
  margin: 70px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px; /* mesuré Figma (~23px, cards 267×4 sur 1134) */
}

.interieur__card {
  position: relative;
  height: 305px;
  padding: 28px 32px;
  overflow: hidden;
  background: rgba(244, 246, 247, 0.5); /* --color-surface @50% */
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.interieur__card-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-h6);
  line-height: 32px; /* hors tokens: mesuré Figma (token h6 = 28px) */
  font-weight: 600;  /* hors tokens: mesuré Figma (token h6 = 500) */
  letter-spacing: -0.02em;
  color: var(--color-ink);
}

.interieur__card-icon {
  flex: none;
  width: 24px;
  height: 24px;
}

.interieur__list {
  list-style: none;
  margin: 17px 0 0;
  padding: 0 0 0 3px; /* liste à x=35, icône à x=32 (mesuré Figma) */
  font-family: var(--font-display);
  font-size: var(--text-body);
  line-height: var(--text-body--line-height);
  font-weight: var(--text-body--font-weight);
  color: rgb(38 41 46 / 0.7); /* --color-ink @70% */
}

/* ---- Mock "table Employees" incliné (décor, rogné par la card) */

.interieur__mock {
  position: absolute;
  left: 32px;
  top: 173px;
  width: 411px;
  height: 342px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.interieur__mock-card {
  flex: none;
  width: 329px;
  height: 324px;
  padding: 23px 21px;
  transform: rotate(-5deg) skewX(10deg) scaleY(0.98);
  background: var(--color-white);
  border: 0.635px solid rgba(229, 231, 233, 0.3); /* --color-border @30% */
  border-radius: 10px; /* hors tokens: mesuré Figma (9.816px) */
  /* hors tokens: ombres mesurées Figma */
  box-shadow:
    0px 9.5px 19px -9.5px rgba(203, 209, 213, 0.16),
    0px 12.7px 31.8px -15.9px rgba(203, 209, 213, 0.2),
    0px 14px 27.9px 0px rgba(203, 209, 213, 0.4);
  font-family: var(--font-display);
}

.interieur__mock-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.interieur__mock-title {
  font-size: 17px;      /* hors tokens: mesuré Figma (17.09px) */
  line-height: 27px;
  font-weight: 500;
  color: var(--color-ink);
}

.interieur__mock-add {
  font-size: 13.7px;    /* hors tokens: mesuré Figma (13.674px) */
  line-height: 20.5px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--color-accent-blue);
}

.interieur__mock-panel {
  margin-top: 14px;
  padding: 5px 18px 0;
  height: 239px;
  background: rgba(244, 246, 247, 0.6); /* --color-surface @60% */
  border-radius: 7px; /* hors tokens: mesuré Figma (7.429px) */
}

.interieur__mock-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 14px 0;
  background-image: url("/a/assets/interieur/ligne-rang.svg?v=dea6575f");
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 253px 1px;
}

.interieur__mock-row--last {
  background-image: url("/a/assets/interieur/ligne-rang-fin.svg?v=408a0c77");
}

.interieur__mock-avatar {
  flex: none;
  width: 27px;
  height: 27px;
  border-radius: var(--radius-full);
  object-fit: cover;
}

.interieur__mock-name {
  font-size: 13.7px;    /* hors tokens: mesuré Figma (13.674px) */
  line-height: 20.5px;
  font-weight: 500;
  color: var(--color-ink);
  white-space: nowrap;
}

.interieur__mock-mail {
  margin-left: auto;
  font-size: 13.7px;    /* hors tokens: mesuré Figma (13.674px) */
  line-height: 20.5px;
  font-weight: 400;
  color: var(--color-ink);
  white-space: nowrap;
}

/* ---- Pill de conclusion (alignée à gauche) ------------------- */

.interieur__note {
  margin: 58px 0 0;
  display: flex;
  justify-content: flex-start;
}

.interieur__note-pill {
  display: inline-block;   /* et non inline-flex : voir .produit__conclusion */
  padding: 6px 11px;
  background: var(--color-white);
  border: 1px solid rgba(229, 231, 233, 0.5); /* --color-border @50% */
  border-radius: 70px; /* hors tokens: mesuré Figma */
  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);
  font-weight: var(--text-body-sm--font-weight);
  color: rgb(38 41 46 / 0.7); /* --color-ink @70% */
}

.interieur__note-pill strong {
  font-weight: 500;
}/* ---- Responsive (adaptation proposée, maquette desktop-only) -- */

@media (max-width: 1024px) {

  .interieur__cards {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 768px) {

  .interieur__cards {
    grid-template-columns: 1fr;
    margin-top: 48px;
  }

  .interieur__note {
    margin-top: 40px;
  }

  .interieur__note-pill {
    border-radius: var(--radius-xl);
  }
}
/* ── 07-comment.css ── */
/* ============================================================
   Section 07 — comment · Figma node 5374:25278 (1168×735 @ y=5761)
   Desktop 1440 : eyebrow centré → titre 54 centré (2 lignes) →
   colonne texte gauche + schéma (fond pointillé + carte dégradée)
   → pill de conclusion chevauchant le bas du fond pointillé.
   ============================================================ */

.comment {
  font-family: var(--font-sans);
  padding-inline: clamp(20px, 8.33vw, 120px);
  /* la pill de conclusion remonte de 68px dans le fond pointillé :
     ce padding restitue la hauteur totale du node (735px) */
  padding-bottom: 34px;
  color: var(--color-ink);
}

.comment__container {
  max-width: 1168px; /* = var(--container-content), largeur mesurée du node */
  margin-inline: auto;
}

/* ---- En-tête (centré) ---------------------------------------- */

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

/* Eyebrow : pilule blanche + pilule dégradée interne + texte dégradé
   (même pattern que .pourquoi__eyebrow / .interieur__eyebrow) */
.comment__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: 70px; /* hors tokens: mesuré Figma (token pill = 80px) */
  box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.05);
}

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

.comment__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;
  text-align: center;
  background: linear-gradient(90deg, var(--color-accent-coral) 0%, var(--color-primary-vivid) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.comment__title {
  margin: 19px 0 0;
  max-width: 1135px;
  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 */
}

/* ---- Rangée texte + schéma ----------------------------------- */

.comment__grid {
  display: flex;
  align-items: flex-start;
  margin-top: 59px;
}

.comment__text {
  flex: 1 1 auto;
  min-width: 260px;
  padding: 137px 27px 0 16px; /* mesuré Figma : titre à y+137, texte à x=152 (container +16) */
}

.comment__subtitle {
  margin: 0;
  max-width: 396px;
  font-size: var(--text-h5);
  line-height: var(--text-h5--line-height);
  font-weight: var(--text-h5--font-weight);
  letter-spacing: var(--text-h5--letter-spacing);
  color: var(--color-ink);
}

.comment__desc {
  margin: 40px 0 0; /* 16px + ligne vide de 24px dans la maquette */
  max-width: 361px;
  font-size: var(--text-body);
  line-height: var(--text-body--line-height);
  font-weight: var(--text-body--font-weight);
  color: rgb(38 41 46 / 0.7); /* --color-ink @70% (opacité 70% mesurée) */
}

/* ---- Schéma : fond pointillé + carte exportée + ligne verticale */

.comment__diagram {
  position: relative;
  flex: 0 1 745px;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  background-image: url("/a/assets/comment/motif-points.webp?v=38ddf495");
  background-repeat: repeat;
  background-position: top left;
  background-size: 119px 119px; /* tuile mesurée Figma */
}

/* Carte du schéma (dégradé + texture + diagramme fusionnés dans
   l'export — voir manifest). Marges en % de la largeur (745px) pour
   rester fluide : 10px haut / 51px gauche / 93px bas à 1440. */
.comment__diagram-img {
  display: block;
  width: 81.74%;   /* 609/745 */
  height: auto;
  margin: 1.34% 0 12.48% 6.85%; /* 10px / 93px / 51px @ 745px */
  border-radius: var(--radius-md);
}

/* Ligne verticale pointillée au bord gauche du fond pointillé
   (asset horizontal 511×2 pivoté de 90°) */
.comment__divider {
  position: absolute;
  left: 3px;
  top: 0;
  width: 511px;
  height: 2px;
  transform-origin: 0 0;
  transform: rotate(90deg);
  pointer-events: none;
}

/* ---- Pill de conclusion (centrée, chevauche le fond pointillé) */

.comment__note {
  position: relative;
  z-index: 1;
  margin: -68px 0 0; /* remonte dans la zone pointillée (mesuré Figma) */
  display: flex;
  justify-content: center;
}

.comment__note-pill {
  position: relative;
  left: 10px; /* décalage mesuré Figma (pill centrée à +10.5px du centre) */
  display: inline-block;   /* et non inline-flex : voir .produit__conclusion */
  padding: 6px 11px;
  background: var(--color-white);
  border: 1px solid rgba(229, 231, 233, 0.5); /* --color-border @50% */
  border-radius: 70px; /* hors tokens: mesuré Figma */
  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);
  font-weight: var(--text-body-sm--font-weight);
  color: rgb(38 41 46 / 0.7); /* --color-ink @70% */
}

.comment__note-pill strong {
  font-weight: 500;
}/* ---- Responsive (adaptation proposée, maquette desktop-only) -- */

@media (max-width: 1024px) {

  .comment__grid {
    flex-direction: column;
    gap: 40px;
    margin-top: 48px;
  }

  .comment__text {
    padding: 0;
  }

  .comment__diagram {
    flex: none;
    width: 100%;
    max-width: 745px;
  }

  .comment__divider {
    display: none;
  }

  .comment__note {
    margin-top: 32px;
  }

  .comment__note-pill {
    left: 0;
  }
}
@media (max-width: 768px) {

  .comment__note-pill {
    border-radius: var(--radius-xl);
  }
}
/* ── 08-demo.css ── */
/* ============================================================
   08 — DEMO « Même prompt. Deux résultats. »
   Figma : OOjXOqpdlvsMfWGqmVWN6c / node 7206:7893 (1440×1149, y=6604) — v2
   ============================================================ */

.demo {
  background: var(--color-white);
  padding-inline: clamp(20px, 8.33vw, 120px);
}

.demo__container {
  max-width: 1136px; /* hors tokens: mesuré Figma (cards 553+30+553) */
  margin-inline: auto;
}

/* ---------- Header ---------- */

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

/* Pilule eyebrow : anneau blanc + remplissage dégradé + texte dégradé */
.demo__eyebrow {
  margin: 0;
  display: inline-flex;
  padding: 2px; /* 34px ext. − 28px int. − 2×1px bordure */
  background: var(--color-white);
  border: 1px solid rgba(229, 231, 233, 0.5); /* --color-border à 50% */
  border-radius: 70px; /* hors tokens: mesuré Figma (proche --radius-pill) */
  box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.05);
}

.demo__eyebrow-fill {
  display: inline-flex;
  align-items: center;
  padding-inline: 14px;
  height: 28px;
  border-radius: 70px;
  background: linear-gradient(90deg, #fff1ed 0%, #f0efff 100%); /* hors tokens: mesuré Figma */
}

.demo__eyebrow-text {
  font-family: var(--font-sans);
  font-size: var(--text-eyebrow);
  line-height: var(--text-eyebrow--line-height);
  letter-spacing: var(--text-eyebrow--letter-spacing);
  font-weight: var(--text-eyebrow--font-weight);
  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;
}

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

.demo__subtitle {
  margin: 25px 0 0;
  max-width: 736px;
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: 22px; /* hors tokens: mesuré Figma (16/22) */
  font-weight: 400;
  color: var(--color-black);
}

/* ---------- Grille de cards ---------- */


/* ---------- Étoiles de fond (Figma 7206:8042 / 7206:8043) ----------
   Posées sur la grille, AVANT les cards dans le DOM : elles passent donc
   derrière la card blanche et ne dépassent que sur les bords. Repères
   maquette : 95×93 @ (1227, 7458) et 100×98 @ (1305, 7327), grille à
   x=152 / y=6826. */
.demo__bg-star {
  position: absolute;
  pointer-events: none;
  opacity: 0.55;
  filter: blur(1.5px);
}

.demo__bg-star--lg { top: 632px; left: calc(100% - 61px); width: 95px;  height: 93px; }
.demo__bg-star--sm { top: 501px; left: calc(100% + 17px); width: 100px; height: 98px; filter: blur(6px); opacity: 0.4; }

.demo__grid {
  position: relative; /* ancre les étoiles de fond */
  margin-top: 66px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 30px;
  row-gap: 25px;
}

.demo__card {
  position: relative;
  border-radius: var(--radius-lg);
  padding: 28px 31px;
  overflow: hidden;
}

.demo__card--plain {
  background: rgba(244, 246, 247, 0.5); /* --color-surface à 50% */
  border: 1px solid var(--color-border);
}

.demo__card--elevated {
  background: var(--color-white);
  box-shadow: 0 10px 40px 0 rgba(0, 0, 0, 0.1);
}

.demo__card--input {
  display: flex;
  flex-direction: column;
  min-height: 519px;
}

.demo__card--verdict {
  min-height: 215px;
}

.demo__card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.demo__card-title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-h5);
  line-height: var(--text-h5--line-height);
  letter-spacing: var(--text-h5--letter-spacing);
  font-weight: var(--text-h5--font-weight);
  color: var(--color-ink);
}

.demo__gradient-text {
  background: linear-gradient(90deg, var(--color-accent-coral) 0%, #705ff5 100%); /* #705ff5 hors tokens: mesuré Figma */
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Tag MCP : anneau blanc + pilule violette */
.demo__tag-mcp {
  display: inline-flex;
  padding: 2px;
  background: var(--color-white);
  border: 1px solid rgba(229, 231, 233, 0.5);
  border-radius: 70px;
  box-shadow: 0 4px 20px 0 rgba(117, 96, 240, 0.25);
}

.demo__tag-mcp-fill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  min-width: 67px;
  border-radius: 70px;
  background: #7560f0; /* hors tokens: mesuré Figma (proche --color-primary) */
  font-family: var(--font-sans);
  font-size: var(--text-eyebrow);
  line-height: var(--text-eyebrow--line-height);
  letter-spacing: var(--text-eyebrow--letter-spacing);
  font-weight: var(--text-eyebrow--font-weight);
  text-transform: uppercase;
  color: var(--color-white);
}

/* ---------- Barre de saisie Claude ---------- */

.demo__prompt {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 20px 24px 16px;
  background: var(--color-white);
  border: 1px solid #e6e6e6; /* hors tokens: mesuré Figma */
  border-radius: var(--radius-lg);
}

.demo__prompt-text {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: normal;
  font-weight: 400;
  color: #9a9a9a; /* hors tokens: mesuré Figma */
}

.demo__prompt-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.demo__prompt-tools {
  display: flex;
  align-items: center;
  gap: 16px;
}

.demo__prompt-model {
  display: flex;
  align-items: center;
  gap: 6px;
}

.demo__prompt-model-name {
  font-family: var(--font-sans);
  font-size: var(--text-body-sm);
  font-weight: 600;
  color: #1b1815; /* hors tokens: mesuré Figma */
}

.demo__prompt-model-effort {
  font-family: var(--font-sans);
  font-size: var(--text-body-sm);
  font-weight: 500;
  color: #9a9a9a; /* hors tokens: mesuré Figma */
}

/* ---------- Zone résultat (aperçu maquette) ---------- */

.demo__screen {
  position: relative;
  margin: 24px 0 0;
  flex: 1;
  min-height: 368px;
  background: var(--color-white);
  border: 0.698px solid rgba(229, 231, 233, 0.3); /* --color-border à 30% */
  border-radius: 10.226px; /* hors tokens: mesuré Figma */
  overflow: hidden;
}

.demo__screen--elevated {
  box-shadow:
    0 10.471px 20.941px -10.471px rgba(203, 209, 213, 0.16),
    0 13.961px 34.902px -17.451px rgba(203, 209, 213, 0.2),
    0 15.357px 30.714px 0 rgba(203, 209, 213, 0.4);
}

.demo__screen-img {
  position: absolute; /* décor : recadrage identique à la maquette */
  left: -77.53px;
  top: -450.41px;
  width: 542.397px;
  height: 542.397px;
  max-width: none;
}

/* ---------- Cards verdict ---------- */

.demo__verdict-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.demo__verdict-list {
  margin: 6px 0 0; /* v2 : liste remontée sous le titre (mesuré Figma : ul 66px, titre 28+32) */
  padding-left: 24px;
  max-width: 409px;
  font-family: var(--font-display);
  font-size: var(--text-body);
  line-height: var(--text-body--line-height);
  font-weight: 400;
  color: var(--color-ink);
  opacity: 0.7;
}

.demo__star {
  position: absolute;
  right: 64px; /* v2 : 553 − 441 − 48 */
  top: 52px;
}


/* ---------- Icônes Lucide (retours 13/08) ----------
   Les icônes exportées de Figma (cube générique, plus/mic/waveform) sont
   remplacées par des Lucide inline, choisies selon le contenu :
   triangle-alert / sparkles pour les verdicts, plus / chevron-down / mic /
   audio-lines pour la barre de saisie. Elles héritent de currentColor. */
.demo .lucide {
  display: block;
  flex: none;
  stroke: currentColor;
  fill: none;
}

.demo__verdict-head .lucide { width: 24px; height: 24px; }

.demo__card--verdict.demo__card--plain    .demo__verdict-head .lucide { color: var(--color-accent-coral); }
.demo__card--verdict.demo__card--elevated .demo__verdict-head .lucide { color: var(--color-primary-vivid); }

.demo__prompt-icon.lucide { width: 20px; height: 20px; color: rgba(38, 41, 46, 0.55); }
.demo__prompt-model .lucide { width: 14px; height: 14px; color: rgba(38, 41, 46, 0.55); }

/* ---------- Conclusion (ligne + pilule) ---------- */

.demo__conclusion {
  position: relative;
  margin-top: 54px;
  padding-bottom: 80px; /* v2 : +80px — la ligne passe sous la pilule, en bas de section (1149 vs 1069) */
  display: flex;
  justify-content: center;
  /* full-bleed : annule le padding latéral de la section */
  margin-inline: calc(-1 * clamp(20px, 8.33vw, 120px));
}

.demo__conclusion-line {
  position: absolute;
  bottom: 0; /* v2 : la ligne n'est plus centrée sur la pilule, elle clôt la section */
  left: 0;
  width: 100%;
  height: 1px;
}

.demo__conclusion-pill {
  position: relative;
  margin: 0;
  display: inline-block;   /* et non inline-flex : voir .produit__conclusion */
  min-height: 34px;
  padding: 6px 24px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 70px;
  box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.05);
  font-family: var(--font-sans);
  font-size: var(--text-body-sm);
  line-height: var(--text-body-sm--line-height);
  font-weight: 400;
  color: rgba(38, 41, 46, 0.7); /* --color-ink à 70% */
}

.demo__conclusion-pill strong {
  font-weight: 500;
}/* ---------- Responsive ---------- */

@media (max-width: 1024px) {

  .demo__bg-star { display: none; } /* plus de marge à droite une fois la grille resserrée */

  .demo__grid {
    column-gap: 20px;
  }

  .demo__card--input {
    min-height: 0;
  }

  .demo__screen {
    min-height: 280px;
  }
}
@media (max-width: 768px) {

  .demo__grid {
    grid-template-columns: 1fr;
    row-gap: 20px;
  }

  .demo__card {
    padding: 24px 20px;
  }

  .demo__card--verdict {
    min-height: 0;
  }

  .demo__star {
    right: 24px;
    top: 24px;
  }

  /* L'étoile occupe le coin haut-droit de la card ; une fois la grille
     repliée, le titre du verdict passe sur deux lignes et lui rentrait
     dedans (« Résultat premium, à v★tre image »). */
  .demo__verdict-head { padding-right: 44px; }

  /* Les deux aperçus sont des pages en réduction posées en absolu dans
     un cadre à hauteur fixe (280px). Il leur en faut ~310 : le gabarit
     nu perdait sa rangée de tuiles, coupée net en bas. Le cadre suit
     désormais le contenu, à toutes les largeurs. */
  /* Le cadre lâche son plancher de 280px ; `.demo__page` et son corps
     sont réglés en fin de feuille — leurs règles de base sont servies
     par une partial POSTÉRIEURE à ce bloc, et l'auraient emporté ici. */
  .demo__screen { flex: none; min-height: 0; }
}



/* --- retours 13/08 : une SEULE étoile dans la card « Résultat premium ».
   La seconde (.demo__verdict-star, posée à top:-18px) était de toute façon
   rognée par l'overflow:hidden de la card — .demo__star reprend la position
   exacte de la maquette (Figma 7206:8041). --------------------------------- */
.demo__card--verdict.demo__card--elevated { position: relative; }/* ── 08b-methode.css ── */
/* ============================================================
   Section 08b — methode · Figma node 7206:9721 (nommé « pourquoi »)
   Desktop 1440 : eyebrow → titre 54 → intro → 3 cards pastel
   362×331 (pastilles 1/2/3 reliées par ligne pointillée, avatars,
   sous-cards « Bénéfice » blanches) → pill de conclusion.
   Hauteur maquette : 771px (y 7844 → 8615).
   ============================================================ */

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

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

/* ---- En-tête (pattern eyebrow-pill, identique à 02-pourquoi) - */

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

.methode__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);
}

.methode__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%);
}

.methode__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;
}

.methode__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 */
}

.methode__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% */
}

/* ---- Étapes : 3 cards + ligne pointillée --------------------- */

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

/* Filet pointillé reliant les pastilles — retours 13/08 : UN SEUL filet,
   en dégradé 1 → 2 → 3, porté par la grille. Il démarre au bord gauche de
   la pastille « 1 » (donc il ne dépasse jamais l'orange, qui le recouvre)
   et s'arrête pile au bord gauche de la pastille « 3 », qu'il touche.
   Le pointillé est un masque, la couleur un dégradé. */
.methode__cards::before {
  content: "";
  position: absolute;
  top: 44px; /* centre des pastilles (28px de padding + 16px de demi-hauteur) */
  left: 28px; /* bord gauche de la pastille 1 — le filet passe SOUS elle */
  /* fin = bord gauche de la pastille 3 : 2/3 de la rangée + 16px de
     gouttières + 28px de padding de card */
  width: calc(66.6667% + 16px);
  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);
}

.methode__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;
}

.methode__card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 331px;
  padding: 28px;
  border-radius: var(--radius-lg);
}

/* hors tokens: fonds pastels mesurés Figma (mêmes hex que 02-pourquoi) */
.methode__card--designer  { background: #fff1ed; }
.methode__card--ingenieur { background: #f7f0f6; }
.methode__card--vous      { background: #e8e9fa; }

/* Pastille numérotée : coque blanche 34px + rond plein 28px */
.methode__step {
  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);
}

.methode__step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-pill);
  font-size: var(--text-small);
  line-height: var(--text-small--line-height);
  font-weight: 700;
  letter-spacing: 0.04em; /* 0.56px @ 14px */
  text-transform: uppercase;
  text-align: center;
  color: var(--color-white);
}

.methode__step-num--1 { background: var(--color-accent-coral); }
.methode__step-num--2 { background: #b36aa5; } /* hors tokens: mesuré Figma */
.methode__step-num--3 { background: var(--color-primary-vivid); }

/* Avatar + titre de card (mesuré : avatar à 76px du haut, tag finit
   à 62px → gap 14 ; titre décalé de 4px vs avatar) */
.methode__who {
  margin-top: 14px;
  display: flex;
  align-items: flex-start;
  gap: 11px;
}

.methode__avatar {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  background: var(--color-white);
  border: 1px solid var(--color-border); /* #e5e7e9 */
  border-radius: 15px; /* hors tokens: mesuré Figma */
}

.methode__avatar-img {
  display: block;
  width: 52px;
  height: 52px;
  border-radius: 15px; /* hors tokens: mesuré Figma */
  border: 1px solid var(--color-border);
  object-fit: cover;
}

/* Card 3 : pas de photo — bloc gris avec « Vous » */
.methode__avatar--vous .methode__avatar-label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 15px; /* hors tokens: mesuré Figma */
  border: 1px solid var(--color-border);
  background: var(--color-border); /* #e5e7e9 */
  font-size: var(--text-body-sm);
  line-height: 22px;
  font-weight: 600;
  color: var(--color-neutral-950);
}

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

.methode__card-text {
  margin: 5px 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% */
}

/* Sous-card « Bénéfice » blanche, calée en bas de la card */
.methode__benefit {
  margin-top: auto;
  align-self: stretch;
  min-height: 103px;
  padding: 10px 20px 12px;
  background: var(--color-white);
  border-radius: var(--radius-lg);
}

.methode__benefit-label {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-body-sm);
  line-height: 32px; /* hors tokens: mesuré Figma */
  font-weight: 500;
  letter-spacing: -0.01em; /* -0.15px @ 15px */
  color: var(--color-border-dark); /* #27292E */
}

.methode__benefit-icon {
  flex: none;
}

.methode__benefit-text {
  margin: 0;
  max-width: 265px;
  font-size: var(--text-body-sm);
  line-height: var(--text-body-sm--line-height);
  font-weight: var(--text-body-sm--font-weight);
  color: rgba(38, 41, 46, 0.7); /* --color-ink @70% */
}

/* ---- Pill de conclusion -------------------------------------- */

.methode__note {
  margin: 80px auto 0;
  width: fit-content;
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 16px;
  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);
  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% */
}

.methode__note strong {
  font-weight: 500; /* Manrope Medium */
}/* ---- Responsive (maquette desktop-only → adaptation) --------- */

@media (max-width: 1024px) {

  .methode__cards::before {
    display: none; /* le filet ne relie plus les pastilles une fois la grille repliée */
  }

  .methode__cards {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }
}
@media (max-width: 768px) {

  .methode__cards {
    grid-template-columns: 1fr;
  }

  .methode__steps {
    margin-top: 56px;
  }

  .methode__note {
    margin-top: 56px;
    border-radius: var(--radius-xl); /* pilule → capsule multi-lignes */
  }
}
/* ── 09-offre.css ── */
/* ============================================================
   09 — OFFRE « Déployez votre Design Brain. » — FOND SOMBRE
   (retours 13/08 : l'inversion claire v2 était une anomalie)
   Figma v2 : OOjXOqpdlvsMfWGqmVWN6c / node 7206:9412 (1612×1112, bleed ±86px)
   + fond node 7206:9413 (CLAIR : blanc + glow coral→violet bas, bg-glow-v2.svg).
   ⚠ Anomalie maquette v2 : textes restés blancs sur ce fond clair dans Figma →
   interprétation lisible ici (encre neutral-950 / ink-soft), cf. commentaire HTML.
   ============================================================ */

.offre {
  position: relative;
  overflow: hidden; /* gère le bleed des logos (frame 1612 > 1440) */
  background: var(--color-neutral-950); /* retour 13/08 : fond sombre confirmé */
  color: var(--color-white);
  padding: 127px clamp(20px, 8.33vw, 120px) 44px;
}

/* Halo dégradé plein cadre (SVG décoratif au-dessus du fond #111) */
.offre__glow {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.offre__container {
  position: relative;
  max-width: 1005px; /* hors tokens: mesuré Figma (panneau 590 + gap 54 + colonne 361) */
  margin-inline: auto;
}

/* ---------- Header ---------- */

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

/* Pilule eyebrow : anneau sombre + remplissage dégradé clair + texte dégradé */
.offre__eyebrow {
  margin: 0;
  display: inline-flex;
  padding: 2px;
  background: var(--color-neutral-950);
  border: 1px solid rgba(229, 231, 233, 0.5); /* --color-border à 50% */
  border-radius: 70px; /* hors tokens: mesuré Figma (proche --radius-pill) */
  box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.05); /* v2 : halo blanc 20% invisible sur fond clair → ombre douce sombre (équiv. eyebrows sections claires) */
}

.offre__eyebrow-fill {
  display: inline-flex;
  align-items: center;
  padding-inline: 14px;
  height: 28px;
  border-radius: 70px;
  background: linear-gradient(90deg, #fff1ed 0%, #f0efff 100%); /* hors tokens: mesuré Figma */
}

.offre__eyebrow-text {
  font-family: var(--font-sans);
  font-size: var(--text-eyebrow);
  line-height: var(--text-eyebrow--line-height);
  letter-spacing: var(--text-eyebrow--letter-spacing);
  font-weight: var(--text-eyebrow--font-weight);
  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;
}

.offre__title {
  margin: 19px 0 0;
  max-width: 865px;
  font-family: var(--font-sans);
  font-size: clamp(32px, 4.5vw, var(--text-h2));
  line-height: 1.04; /* 56/54 */
  letter-spacing: var(--text-h2--letter-spacing);
  font-weight: var(--text-h2--font-weight);
  color: var(--color-white); /* retour 13/08 : fond sombre → blanc */
}

.offre__subtitle {
  margin: 32px 0 0;
  max-width: 689px;
  font-family: var(--font-sans);
  font-size: var(--text-body-sm);
  line-height: var(--text-body-sm--line-height);
  font-weight: 400;
  color: rgba(255, 255, 255, 0.8); /* retour 13/08 : fond sombre */
}

/* ---------- Contenu : panneau pricing + bénéfices ---------- */

.offre__content {
  margin-top: 63px;
  display: flex;
  align-items: flex-start;
  gap: 54px;
}

/* Panneau « glass » autour de la card */
.offre__panel {
  flex: 0 1 590px;
  padding: 14px 15px;
  border: 1px solid rgba(229, 231, 233, 0.5); /* v2 : blanc 30% invisible sur fond clair → --color-border @50% */
  border-radius: var(--radius-xl);
  background: linear-gradient(to left, rgba(255, 241, 237, 0.1), rgba(240, 239, 254, 0.1)); /* hors tokens: mesuré Figma */
}

.offre__pricing {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px 28px 28px;
  background: var(--color-white);
  border: 1px solid #e6ddce; /* hors tokens: mesuré Figma */
  border-radius: var(--radius-lg);
  color: var(--color-neutral-950);
}

.offre__brand {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 34px; /* hors tokens: mesuré Figma */
  font-weight: 800;
  line-height: normal;
  background: linear-gradient(90deg, #fc774d 0%, #6a5efc 100%); /* hors tokens: mesuré Figma (proche coral/primary) */
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.offre__items {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.offre__item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e6ddce; /* hors tokens: mesuré Figma */
  font-size: var(--text-tiny);
  line-height: normal;
}

.offre__item dt {
  font-family: var(--font-sans);
  font-weight: 500;
  color: #1b1815; /* hors tokens: mesuré Figma */
}

.offre__item dd {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 400;
  text-align: right;
  color: rgba(17, 17, 17, 0.7); /* --color-neutral-950 à 70% */
  white-space: nowrap;
}

.offre__total {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-body-lg);
  line-height: normal;
  font-weight: 400;
  color: var(--color-neutral-950);
}

.offre__total s {
  font-weight: 600;
}

.offre__price {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.offre__price-amount {
  font-family: var(--font-sans);
  font-size: 34px; /* hors tokens: mesuré Figma */
  font-weight: 800;
  line-height: normal;
  color: #1b1815; /* hors tokens: mesuré Figma */
}

.offre__price-terms {
  font-family: var(--font-sans);
  font-size: var(--text-caption);
  line-height: normal;
  font-weight: 400;
  color: var(--color-neutral-950);
}

/* Encart garantie */
.offre__guarantee {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  background: #eeecff; /* hors tokens: mesuré Figma */
  border-radius: 10px; /* hors tokens: mesuré Figma */
}

.offre__guarantee-title {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-sans);
  font-size: var(--text-small);
  line-height: normal;
  font-weight: 600;
  color: var(--color-primary-vivid);
}

.offre__guarantee-desc {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 11px; /* hors tokens: mesuré Figma */
  line-height: normal;
  font-weight: 400;
  color: #5c564d; /* hors tokens: mesuré Figma */
}

.offre__note {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 11px; /* hors tokens: mesuré Figma */
  line-height: normal;
  font-weight: 400;
  color: rgba(17, 17, 17, 0.7); /* --color-neutral-950 à 70% */
}

.offre__note strong {
  font-weight: 500;
}

/* ---------- CTA ---------- */

.offre__ctas {
  margin-top: 12px; /* retour 13/08 : respiration au-dessus des boutons */
  display: flex;
  flex-wrap: nowrap; /* retour 13/08 : boutons côte à côte */
  gap: 10px;
}

.offre__cta {
  white-space: nowrap; /* retour 13/08 : côte à côte, sans repli */
  display: inline-flex;
  align-items: center;
  justify-content: center; /* compact */
  flex: 1 1 0;
  min-width: 0;
  gap: 8px;
  height: 46px;
  font-size: 13px; /* retour 13/08 : compact pour tenir à deux */
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: var(--text-small);
  line-height: var(--text-small--line-height);
  font-weight: 600;
  text-decoration: none;
}

.offre__cta--primary {
  width: auto; /* retour 13/08 */
  padding: 0 13px 0 22px;
  color: var(--color-white);
  background: linear-gradient(90deg, #2d2d2d 0%, #000000 52.4%, #2d2d2d 100%); /* hors tokens: mesuré Figma */
  box-shadow:
    inset 0 2px 0 0 rgba(255, 255, 255, 0.16),
    0 8px 4px -8px rgba(88, 88, 88, 0.24),
    0 8px 16px -16px rgba(51, 51, 51, 0.28),
    0 4px 12px 0 rgba(126, 126, 126, 0.16),
    0 8px 16px 0 rgba(134, 134, 134, 0.16);
}

.offre__cta--ghost {
  width: auto; /* retour 13/08 */
  padding: 0 11px 0 19px;
  color: var(--color-neutral-950);
  background: var(--color-white);
  border: 1px solid var(--color-border);
}

/* ---------- Bénéfices ---------- */

.offre__benefits {
  flex: 0 1 361px;
  padding-top: 31px;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.offre__benefit-title {
  margin: 0 0 16px;
  font-family: var(--font-sans);
  font-size: var(--text-h5);
  line-height: 26px; /* hors tokens: mesuré Figma (21/26 sur titres 2 lignes) */
  letter-spacing: var(--text-h5--letter-spacing);
  font-weight: var(--text-h5--font-weight);
  color: var(--color-white); /* retour 13/08 : fond sombre → blanc */
}

.offre__benefit-text {
  margin: 0;
  max-width: 361px;
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--text-body--line-height);
  font-weight: 400;
  color: rgba(255, 255, 255, 0.7); /* retour 13/08 : fond sombre */
}

/* ---------- Logos (rangée en bleed : 1593px > frame 1440) ---------- */

.offre__logos {
  position: relative;
  margin-top: 28px;
  height: 100px;
  display: flex;
  justify-content: center;
  overflow: hidden; /* rangée non wrappée : logos de bord rognés comme dans la maquette */
  /* full-bleed : annule le padding latéral de la section */
  margin-inline: calc(-1 * clamp(20px, 8.33vw, 120px));
}

/* Même géométrie que .hero__logos-row (cellules 240×100, logo 200 max) */
.offre__logos-row {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.offre__logos-row li {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 240px;
  height: 100px;
}

/* Blanchiment sur fond sombre : invert(1) passe les tracés sombres en clair
   et les fonds blancs en noir ; mix-blend-mode: screen laisse ensuite le noir
   totalement transparent. Marche aussi bien pour les SVG nettoyés (fond
   transparent) que pour les bitmaps qui gardent un fond blanc incrusté. */
.offre__logos-row img {
  display: block;
  width: auto;
  max-width: 200px;
  max-height: 64px;
  filter: invert(1);
  mix-blend-mode: screen;
  opacity: 0.9;
}/* ---------- Responsive ---------- */

@media (max-width: 1024px) {

  .offre {
    padding-top: 88px;
  }

  .offre__content {
    flex-direction: column;
    align-items: center;
    gap: 48px;
  }

  .offre__panel {
    flex-basis: auto;
    width: min(100%, 590px);
  }

  .offre__benefits {
    flex-basis: auto;
    width: min(100%, 590px);
    padding-top: 0;
  }

  .offre__logos-row li {
    width: 180px;
  }
}
@media (max-width: 768px) {

  .offre {
    padding-top: 64px;
  }

  .offre__pricing {
    padding: 20px 20px 24px;
  }

  .offre__ctas {
    flex-direction: column;
  }

  .offre__cta--primary,
  .offre__cta--ghost {
    width: 100%;
    max-width: 320px;
  }

  .offre__benefit-title br {
    display: none;
  }

  .offre__logos {
    height: 72px;
  }

  .offre__logos-row li {
    width: 140px;
    height: 72px;
  }
}
/* ── 10-case-studies.css ── */
/* ============================================================
   Section 10 — Case Studies
   Figma : OOjXOqpdlvsMfWGqmVWN6c / node v2 7206:7813 (y=9895, 1201×1569)
   Diff v2 : contenu inchangé au pixel ; seul ajout = 5 étoiles dans la
   pill eyebrow (pastille 168→242px). Les +50px de hauteur du node
   viennent de la bande Conviction (523→572) incluse dans le node.
   Nota : les lignes horizontales 7206:7815 / 7206:7816 (y=10892 et
   y=11464) encadrent la bande « Conviction » → intégrées en section 11.
   ============================================================ */

.case-studies {
  font-family: var(--font-sans);
  color: var(--color-ink);
  background: var(--color-white);
  padding: 0 clamp(20px, 8.33vw, 120px);
}

.case-studies__container {
  max-width: var(--container-max);
  margin: 0 auto;
}

/* ---------- En-tête centré ---------- */

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

.case-studies__eyebrow {
  margin: 0 0 19px;
  display: inline-flex;
  padding: 3px 4px;
  background: var(--color-white);
  border: 1px solid rgba(229, 231, 233, 0.5); /* --color-border @50% */
  border-radius: 70px; /* hors tokens: mesuré Figma */
  box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.05);
}

.case-studies__eyebrow-inner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 242px; /* v2 : 168px → 242px (texte + 5 étoiles) */
  height: 28px;
  padding: 0 10px;
  box-sizing: border-box;
  border-radius: 70px; /* hors tokens: mesuré Figma */
  background: linear-gradient(90deg, #fff1ed 0%, #f0efff 100%); /* hors tokens: mesuré Figma */
}

.case-studies__eyebrow-text {
  /* texte en dégradé coral → violet */
  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;
  white-space: nowrap;
  background: linear-gradient(90deg, var(--color-accent-coral) 0%, var(--color-primary-vivid) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.case-studies__eyebrow-stars {
  display: inline-flex;
  align-items: center;
  gap: 1px; /* mesuré Figma : étoiles 14px espacées de 15–16px centre à centre */
}

.case-studies__eyebrow-stars img {
  display: block;
  width: 14px;
  height: 14px;
}

.case-studies__title {
  margin: 0 0 31px;
  max-width: 932px;
  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: var(--color-black);
}

.case-studies__subtitle {
  margin: 0;
  max-width: 593px;
  font-size: var(--text-body);
  line-height: 22px; /* hors tokens: mesuré Figma (token: 24px) */
  font-weight: var(--text-body--font-weight);
  color: rgba(17, 17, 17, 0.8); /* --color-neutral-950 @80% */
}

/* ---------- Étude de cas ---------- */

.case-studies__study {
  position: relative;
  display: flex;
  align-items: flex-start;
  margin-top: 66px;
  padding-bottom: 103px;
  min-height: 691px; /* aligne le bas de section sur la ligne verticale (Figma) */
  box-sizing: border-box;
}

.case-studies__divider {
  /* ligne décorative entre les deux colonnes : SVG exporté horizontal
     pivoté à 90° comme dans la maquette (Line 350 à -90°).

     Retour d'intégration du 26/08 : « le filet vertical doit venir toucher le
     filet horizontal ». À 647px il s'arrêtait 62px trop haut (bas mesuré à
     11136,2 ; le filet suivant — le séparateur d'ouverture de la section
     « conviction » — est à 11198,2). 709 = 647 + 62.

     Le filet dépasse donc volontairement le bas de .case-studies__study de
     38px pour aller chercher la section suivante : c'est le geste demandé.
     Il dépend de l'espacement entre les deux sections — à revoir si l'une
     d'elles change de rythme vertical. */
  position: absolute;
  left: 456px;
  top: 44px;
  width: 709px;
  height: 1px;
  transform: rotate(90deg);
  transform-origin: top left;
  pointer-events: none;
}

.case-studies__panel {
  flex: 0 0 456px;
  width: 456px;
  padding: 41px 0 0 33px;
  box-sizing: border-box;
}

.case-studies__tags {
  margin: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
}

.case-studies__tag {
  display: inline-flex;
  align-items: center;
  border-radius: 70px; /* hors tokens: mesuré Figma */
  font-size: var(--text-small);
  line-height: var(--text-small--line-height);
}

.case-studies__tag--brand {
  padding: 3px 4px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.05);
}

.case-studies__tag--brand > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 101px;
  height: 28px;
  padding: 0 12px;
  border-radius: 70px; /* hors tokens: mesuré Figma */
  background: var(--color-primary-vivid);
  color: var(--color-white);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.case-studies__tag--sector {
  height: 28px;
  padding: 0 10px;
  box-sizing: border-box;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-border-dark); /* #27292E, usage texte dans la maquette */
  font-weight: 400;
}

.case-studies__study-title {
  margin: 36px 0 0;
  max-width: 315px;
  font-size: var(--text-h5);
  line-height: 26px; /* variante dense mesurée Figma (token aérée: 32px) */
  font-weight: var(--text-h5--font-weight);
  letter-spacing: var(--text-h5--letter-spacing);
  color: var(--color-ink);
}

.case-studies__block {
  margin-top: 25px;
  max-width: 361px;
}

.case-studies__block + .case-studies__block {
  margin-top: 44px;
}

.case-studies__block-title {
  margin: 0;
  font-size: var(--text-body);
  line-height: var(--text-body--line-height);
  font-weight: 600;
  color: var(--color-ink);
}

.case-studies__block-text {
  margin: 0;
  font-size: var(--text-body);
  line-height: var(--text-body--line-height);
  font-weight: var(--text-body--font-weight);
  color: var(--color-ink);
  opacity: 0.7;
}

/* ---------- Témoignage ---------- */

.case-studies__testimonial {
  margin: 55px 0 0;
  width: 393px;
  max-width: 100%;
  padding: 20px 20px 22px 19px;
  box-sizing: border-box;
  background: var(--color-surface);
  border-radius: var(--radius-sm);
}

.case-studies__quote {
  margin: 0 0 14px;
}

.case-studies__quote p {
  margin: 0;
  max-width: 351px;
  font-size: var(--text-body);
  line-height: var(--text-body--line-height);
  font-weight: 500;
  color: var(--color-ink);
}

.case-studies__author {
  display: flex;
  align-items: center;
  gap: 8px;
}

.case-studies__avatar {
  width: 40px;
  height: 41px;
  border-radius: var(--radius-full);
  object-fit: cover;
}

.case-studies__author-text {
  display: flex;
  flex-direction: column;
}

.case-studies__author-name {
  font-size: var(--text-small);
  line-height: 20px; /* hors tokens: mesuré Figma (token: 24px) */
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--color-ink);
}

.case-studies__author-role {
  font-size: var(--text-small);
  line-height: 20px; /* hors tokens: mesuré Figma (token: 24px) */
  font-weight: 400;
  color: var(--color-ink);
  opacity: 0.7;
}

/* ---------- Visuel (dashboard) ---------- */

.case-studies__visual {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  padding: 44px 0 0 75px;
}

.case-studies__grid {
  /* grille décorative en arrière-plan */
  position: absolute;
  top: 0;
  left: 0;
  width: 745px;
  max-width: 100%;
  height: 522px;
  pointer-events: none;
}

.case-studies__device {
  position: relative;
  margin: 0;
  width: 594px;
  max-width: 100%;
  box-sizing: border-box;
  padding: 8px 0 0 2px;
  min-height: 544px;
  background: var(--color-white);
  border: 0.779px solid rgba(229, 231, 233, 0.3); /* --color-border @30% */
  border-radius: var(--radius-md);
  box-shadow:
    0 11.69px 23.379px -11.69px rgba(203, 209, 213, 0.16),
    0 15.586px 38.965px -19.483px rgba(203, 209, 213, 0.2),
    0 17.145px 34.29px 0 rgba(203, 209, 213, 0.4); /* base #CBD1D5 = --color-border-strong */
  overflow: hidden;
}

.case-studies__device img {
  display: block;
  width: 591px;
  max-width: 100%;
  height: 488px;
  object-fit: cover;
}/* ---------- Responsive ---------- */

@media (max-width: 1180px) {

  .case-studies__panel {
    flex-basis: 400px;
    width: 400px;
  }

  .case-studies__divider {
    left: 400px;
  }

  .case-studies__visual {
    padding-left: 48px;
  }
}
@media (max-width: 1024px) {

  .case-studies__study {
    flex-direction: column;
    gap: 48px;
    padding-bottom: 72px;
  }

  .case-studies__divider {
    display: none;
  }

  .case-studies__panel {
    flex-basis: auto;
    width: 100%;
    max-width: 640px;
    padding: 0;
  }

  .case-studies__visual {
    width: 100%;
    padding: 32px 0 0;
  }

  .case-studies__device {
    min-height: 0;
    padding: 8px 2px 0;
  }

  .case-studies__device img {
    width: 100%;
    height: auto;
  }
}
@media (max-width: 768px) {

  .case-studies__study {
    margin-top: 48px;
    padding-bottom: 56px;
  }

  .case-studies__grid {
    display: none;
  }

  .case-studies__visual {
    padding-top: 0;
  }
}
/* ── 11-conviction.css ── */
/* ============================================================
   Section 11 — Conviction
   Figma : OOjXOqpdlvsMfWGqmVWN6c / node v2 7206:7757 (y=10892, 1199×572)
   Diff v2 (+49px) : padding haut 98→73, gap texte→CTA 48→42, et ajout
   sous le CTA d'une pilule de conclusion (7206:9407, 707×34 @ y=11372,
   gap 55 / 58 de marge basse). Le CTA est désormais flanqué de deux
   badges équipe « Luc » (99×48) / « Arnaud » (128×48), chacun portant
   une bulle d'identité au survol (tooltips 7206:9717 / 7206:9714,
   219×92, posées 16px au-dessus des badges dans la maquette).
   Décor : node « lignes » 5374:25280 — deux colonnes de hachures
   horizontales dans les gouttières (x=0–120 et x=1320–1440),
   avec fondu vertical, qui débordent au-dessus et en dessous
   de la bande. Séparateurs horizontaux 7206:7815 / 7206:7816.
   ============================================================ */

.conviction {
  position: relative;
  font-family: var(--font-sans);
  color: var(--color-ink);
  background: var(--color-white);
  padding: 0 clamp(20px, 8.33vw, 120px);
}

.conviction__inner {
  max-width: var(--container-max);
  margin: 0 auto;
}

/* ---------- Décor : hachures des gouttières (5374:25280) ---------- */

.conviction__lines {
  position: absolute;
  width: clamp(20px, 8.33vw, 120px); /* = largeur de gouttière */
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(229, 229, 229, 0) 8.854%,
    rgba(229, 229, 229, 0.5) 33.473%,
    var(--color-media-bg) 48%,
    rgba(229, 229, 229, 0.5) 68.804%,
    rgba(229, 229, 229, 0) 100%
  );
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.conviction__lines--left {
  left: 0;
  top: -173px; /* déborde au-dessus de la bande, cf. maquette (y=9808) */
  height: 791px;
  -webkit-mask-image: url("/a/assets/conviction/bg-836ce565.svg?v=03b6ad2b") /* inliné : mask-image en file:// est bloqué par CORS */;
  mask-image: url("/a/assets/conviction/bg-836ce565.svg?v=03b6ad2b") /* inliné : mask-image en file:// est bloqué par CORS */;
}

.conviction__lines--right {
  right: 0;
  top: -157px; /* y=9824 ; descend 348px sous la bande (maquette) */
  height: 1028px;
  -webkit-mask-image: url("/a/assets/conviction/bg-19bb38dc.svg?v=0fd01d84") /* inliné : mask-image en file:// est bloqué par CORS */;
  mask-image: url("/a/assets/conviction/bg-19bb38dc.svg?v=0fd01d84") /* inliné : mask-image en file:// est bloqué par CORS */;
}

/* ---------- Séparateurs horizontaux ---------- */

.conviction__separator {
  display: block;
  width: 100%;
  max-width: 1201px;
  height: 1px;
  margin: 0 auto;
}

/* ---------- Bande gradient ---------- */

.conviction__band {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 572px; /* v2 : 523px → 572px */
  box-sizing: border-box;
  padding: 73px 24px 58px; /* v2 : 98/89 → 73/58 */
  background: linear-gradient(to left, #f0efff 0%, #fff1ee 100%); /* hors tokens: mesuré Figma */
}

/* ---------- Eyebrow ---------- */

.conviction__eyebrow {
  margin: 0 0 19px;
  display: inline-flex;
  padding: 3px 4px;
  background: var(--color-white);
  border: 1px solid rgba(229, 231, 233, 0.5); /* --color-border @50% */
  border-radius: 70px; /* hors tokens: mesuré Figma */
  box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.05);
}

.conviction__eyebrow-inner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 168px;
  height: 28px;
  padding: 0 10px;
  box-sizing: border-box;
  border-radius: 70px; /* hors tokens: mesuré Figma */
  background: linear-gradient(90deg, #fff1ed 0%, #f0efff 100%); /* hors tokens: mesuré Figma */
}

.conviction__eyebrow-text {
  /* texte en dégradé coral → violet */
  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;
  white-space: nowrap;
  background: linear-gradient(90deg, var(--color-accent-coral) 0%, var(--color-primary-vivid) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- Titre / texte / CTA ---------- */

.conviction__title {
  margin: 0 0 31px;
  max-width: 932px;
  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: var(--color-black);
  text-align: right; /* alignement voulu par la maquette */
}

.conviction__text {
  margin: 0 0 42px; /* v2 : 48px → 42px */
  max-width: 667px;
  font-size: var(--text-body);
  line-height: 22px; /* hors tokens: mesuré Figma (token: 24px) */
  font-weight: var(--text-body--font-weight);
  color: rgba(17, 17, 17, 0.8); /* --color-neutral-950 @80% */
  text-align: center;
}

/* ---------- Rangée CTA + badges équipe (v2) ---------- */

.conviction__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px; /* 10–11px mesurés Figma */
}

.conviction__badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 48px;
  box-sizing: border-box;
}

.conviction__badge--luc {
  width: 99px;
  padding-left: 5px;
}

.conviction__badge--arnaud {
  width: 128px;
  padding-left: 7px;
}

.conviction__badge-bg {
  /* pilule dégradée exportée en SVG (fond du badge) */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 48px;
  pointer-events: none;
}

.conviction__badge-avatar {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  object-fit: cover;
}

.conviction__badge-name {
  position: relative;
  flex: 1 1 auto;
  text-align: center;
  font-size: 15px; /* retour 13/08 : 3 lignes max */
  line-height: 20px;
  font-weight: 500;
  color: var(--color-white);
}

.conviction__badge-name--luc {
  font-family: "Urbanist", var(--font-sans); /* hors tokens: mesuré Figma (Urbanist Medium) */
}

/* Bulles d'identité — états hover posés sur le canvas Figma
   (tooltips 219×92 @ 16px au-dessus des badges) */

.conviction__tooltip {
  position: absolute;
  bottom: calc(100% + 16px);
  width: 264px; /* retour 13/08 : élargi pour tenir sur 3 lignes */
  min-height: 92px;
  height: auto; /* retour 13/08 : le texte ne doit plus être coupé */
  box-sizing: border-box;
  padding: 16px;
  border-radius: var(--radius-lg);
  background: rgba(17, 17, 17, 0.7); /* --color-neutral-950 @70% */
  color: var(--color-white);
  font-family: "Urbanist", var(--font-sans); /* hors tokens: mesuré Figma */
  font-size: 15px; /* retour 13/08 : 3 lignes max */
  line-height: 20px;
  font-weight: 500;
  text-align: left;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, visibility 0.15s ease;
  pointer-events: none;
}

.conviction__tooltip--luc {
  left: -120px; /* x=403 vs badge x=523 (maquette) */
}

.conviction__tooltip--arnaud {
  left: 0; /* alignée sur le bord gauche du badge (x=818, maquette) */
}

.conviction__badge:hover .conviction__tooltip,
.conviction__badge:focus-within .conviction__tooltip {
  opacity: 1;
  visibility: visible;
}

.conviction__cta {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 175px;
  height: 48px;
  box-sizing: border-box;
  padding: 0 14px 0 22px;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, #2d2d2d 0%, var(--color-black) 52.404%, #2d2d2d 100%); /* #2D2D2D hors tokens: mesuré Figma */
  box-shadow:
    0 8px 4px -8px rgba(88, 88, 88, 0.24),
    0 8px 16px -16px rgba(51, 51, 51, 0.28),
    0 4px 12px 0 rgba(126, 126, 126, 0.16),
    0 8px 16px 0 rgba(134, 134, 134, 0.16),
    inset 0 2px 0 0 rgba(255, 255, 255, 0.16);
  color: var(--color-white);
  font-size: var(--text-small);
  line-height: var(--text-small--line-height);
  font-weight: 600;
  text-decoration: none;
}

.conviction__cta-icon {
  display: block;
  width: 20px;
  height: 24px;
}

/* ---------- Pilule de conclusion (v2, Figma 7206:9407) ---------- */

.conviction__conclusion {
  margin: 55px 0 0; /* CTA (fin y=11317) → pilule (y=11372), mesuré Figma */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  max-width: 707px;
  box-sizing: border-box;
  padding: 5px 20px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 70px; /* hors tokens: mesuré Figma */
  box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.05);
  font-size: var(--text-body-sm);
  line-height: var(--text-body-sm--line-height);
  font-weight: var(--text-body-sm--font-weight);
  color: rgba(38, 41, 46, 0.7); /* --color-ink @70% */
  text-align: center;
}/* ---------- Responsive ---------- */

@media (max-width: 1024px) {

  .conviction__band {
    min-height: 0;
    padding: 72px 24px 64px;
  }
}
@media (max-width: 768px) {

  .conviction__lines {
    display: none;
  }

  .conviction__band {
    padding: 56px 20px 48px;
  }

  .conviction__title {
    text-align: center; /* le fer à droite ne tient pas au reflow mobile */
  }

  .conviction__text {
    margin-bottom: 40px;
  }

  .conviction__actions {
    flex-wrap: wrap;
  }

  .conviction__tooltip {
    display: none; /* pas de hover fiable au tactile */
  }

  .conviction__conclusion {
    margin-top: 40px;
    max-width: 100%;
    border-radius: var(--radius-lg); /* la pilule 1 ligne passe en carte multi-lignes */
  }
}



/* --- retours 13/08 ------------------------------------------------ */
/* Conclusion sur une seule ligne */
.conviction__conclusion {
  white-space: nowrap;
  width: fit-content;
  max-width: none;
  margin-inline: auto;
}@media (max-width: 900px) {

  .conviction__conclusion { white-space: normal; width: auto; }
}/* --- Responsive (adaptation proposée, maquette desktop-only) ----- */

/* Le repli de la FAQ a été remonté dans main.css, avec le composant :
   servi ici seulement, il laissait le manifeste avec une colonne de
   questions large de 0px et un trou blanc de 2 660px. */
/* ── 90-interactions.css ── */


/* Variante ghost : fond qui se teinte + bordure qui se renforce */
.hero__cta--ghost:hover,
.offre__cta--ghost:hover {
  background-color: var(--color-surface);
  border-color: var(--color-border-strong);
}

/* ------------------------------------------------------------
   3. Cards (préoccupations, pourquoi, intérieur, demo, offre)
   Lift discret + ombre. Les fonds sombres gardent un lift seul.
   ------------------------------------------------------------ */

.pourquoi__card,
.interieur__card,
.preoccupations__cell,
.demo__card--elevated,
.offre__panel {
  transition: transform 220ms cubic-bezier(0.2, 0.6, 0.3, 1), box-shadow 220ms ease;
}

.pourquoi__card:hover,
.interieur__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px -12px rgba(38, 41, 46, 0.16);
}

.offre__panel:hover {
  transform: translateY(-3px);
}

/* Logos partenaires : gris → couleur au survol de la bande */
.hero__logos img {
  transition: opacity 200ms ease, transform 200ms ease;
}

.hero__logos img:hover {
  transform: scale(1.06);
}

@keyframes faq-slide {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Flottement idle très lent, amplitudes désynchronisées */
@keyframes float-a { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
@keyframes float-b { 0%, 100% { translate: 0 0; } 50% { translate: 0 6px; } }

.hero__star--orange-lg,
.hero__star--violet-lg { animation: float-a 7s ease-in-out infinite; }

.hero__star--orange-sm,
.hero__star--violet-sm,
.hero__star--flower    { animation: float-b 9s ease-in-out infinite; }/* ------------------------------------------------------------
   7. Motion réduite : tout est neutralisé
   ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {

  .hero__star--orange-lg,
  .hero__star--violet-lg,
  .hero__star--orange-sm,
  .hero__star--violet-sm,
  .hero__star--flower { animation: none; }
  .faq__item[open] .faq__answer { animation: none; }
}


/* ============================================================
   V2 — grammaire d'animation type Volio SaaS kit
   ============================================================ */

/* ------------------------------------------------------------
   8. Entrée séquencée du hero au chargement (fade-up en cascade
   badge → titre → sous-titre → CTA → notes → dashboard)
   ------------------------------------------------------------ */

@keyframes intro-up {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: none; }
}

.hero__eyebrow,
.hero__title,
.hero__subtitle,
.hero__ctas,
.hero__notes,
.hero__dashboard,
.hero__dashboard-note {
  animation: intro-up 700ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* La pill du dashboard est centrée par translateX(-50%) : le keyframe
   générique (transform: none) écrasait ce centrage et la faisait déborder
   à droite. Elle a donc son propre keyframe, qui conserve la translation. */
@keyframes intro-up-centered {
  from { opacity: 0; transform: translate(-50%, 28px); }
  to   { opacity: 1; transform: translateX(-50%); }
}

.hero__dashboard-note { animation-name: intro-up-centered; }

.hero__eyebrow        { animation-delay: 60ms; }
.hero__title          { animation-delay: 160ms; }
.hero__subtitle       { animation-delay: 260ms; }
.hero__ctas           { animation-delay: 360ms; }
.hero__notes          { animation-delay: 440ms; }
.hero__dashboard,
.hero__dashboard-note { animation-delay: 540ms; }

/* ------------------------------------------------------------
   9. Marquee de logos (bande hero) — contenu dupliqué par JS,
   défilement linéaire infini, pause au survol.
   ------------------------------------------------------------ */

.marquee {
  display: flex;
  width: max-content;
  animation: marquee-scroll var(--marquee-duration, 36s) linear infinite;
}

.marquee > * {
  flex: none;
}

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.hero__logos:hover .marquee {
  animation-play-state: paused;
}

/* ------------------------------------------------------------
   11. Tooltips équipe (bande conviction) : pop + flottement
   ------------------------------------------------------------ */

.conviction__tooltip {
  transform: translateY(6px) scale(0.96);
  transform-origin: bottom center;
  transition: opacity 220ms ease, transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.conviction__badge:hover .conviction__tooltip,
.conviction__badge:focus-within .conviction__tooltip {
  transform: translateY(0) scale(1);
}

.conviction__badge {
  transition: transform 180ms ease;
}

.conviction__badge:hover {
  transform: translateY(-2px);
}

/* ------------------------------------------------------------
   12. Visuels : zoom interne discret au survol
   ------------------------------------------------------------ */

.case-studies__device { overflow: hidden; }

.case-studies__device img,
.produit__visual img {
  transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

.case-studies__device:hover img,
.produit__visual:hover img {
  transform: scale(1.03);
}

/* Cards méthode (nouvelle section) : même recette que pourquoi */
.methode__card {
  transition: transform 220ms cubic-bezier(0.2, 0.6, 0.3, 1), box-shadow 220ms ease;
}

.methode__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px -12px rgba(38, 41, 46, 0.16);
}/* ------------------------------------------------------------
   13. Motion réduite (compléments v2)
   ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {

  .hero__eyebrow, .hero__title, .hero__subtitle, .hero__ctas,
  .hero__notes, .hero__dashboard, .hero__dashboard-note { animation: none; }
  .marquee { animation: none; }
  .conviction__tooltip { transition: none; transform: none; }
  .case-studies__device img, .produit__visual img { transition: none; }
  .methode__card { transition: none; }
}

/* ── Mocks des cartes « À l'intérieur » ──────────────────────
   Retour du 26/08 : les quatre cartes montraient le MÊME tableau
   « Employees ». Chacune porte désormais le contenu de ce qu'elle
   annonce — tokens, composants, prompts, connexions — construit en
   HTML comme le mock d'origine, pour rester animable et modifiable. */

.interieur__mock-count{
  font-size:13.7px;line-height:20.5px;font-weight:600;letter-spacing:-0.02em;
  color:var(--color-ink-soft);
}
.interieur__mock-meta{
  margin-left:auto;
  font-size:13.7px;line-height:20.5px;font-weight:400;
  color:var(--color-ink-soft);
  white-space:nowrap;
}

/* Pastille de couleur — carte « Identité » */
.interieur__mock-swatch{
  flex:none;width:16px;height:16px;
  border-radius:var(--radius-full, 9999px);
  background:var(--swatch, var(--color-primary));
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);
}

/* Aperçu de composant — carte « Système » */
.interieur__mock-chip{
  flex:none;width:26px;height:16px;
  border:1px solid var(--color-border-strong);
  background:var(--color-white);
}
.interieur__mock-chip--pill{border-radius:var(--radius-pill, 80px);background:var(--color-ink);border-color:var(--color-ink)}
.interieur__mock-chip--card{border-radius:4px}
.interieur__mock-chip--badge{border-radius:var(--radius-pill, 80px);background:var(--gradient-badge)}
.interieur__mock-chip--line{height:1px;border:0;background:var(--color-border-strong)}

/* Puce d'état — cartes « Intelligence » et « Connexions » */
.interieur__mock-dot{
  flex:none;width:8px;height:8px;margin:0 4px;
  border-radius:var(--radius-full, 9999px);
  background:var(--color-border-strong);
}
.interieur__mock-dot--on{background:var(--color-accent-green)}

/* ── Démonstration « même prompt, deux résultats » ───────────
   Retour du 26/08 : les deux cartes montraient LA MÊME image, donc
   la démonstration centrale de la marque ne démontrait rien. Chaque
   côté montre maintenant deux choses : ce que le modèle reçoit
   (le contexte) et ce qu'il produit. Tout est en HTML, donc animable
   et modifiable — aucune image à ré-exporter. */

.demo__contexte{
  margin-top:16px;
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  min-height:30px;
}
.demo__contexte-label{
  font-size:var(--text-tiny, 12px);line-height:16px;letter-spacing:0.04em;
  text-transform:uppercase;font-weight:500;
  color:var(--color-ink-soft);opacity:.6;margin-right:4px;
}
.demo__contexte-vide{
  font-size:var(--text-tiny, 12px);line-height:16px;
  color:var(--color-ink-soft);opacity:.55;
  padding:3px 10px;border-radius:var(--radius-pill, 80px);
  border:1px dashed var(--color-border-strong);
}
.demo__source{
  font-size:var(--text-tiny, 12px);line-height:16px;font-weight:500;
  color:var(--color-primary-vivid);
  padding:3px 10px;border-radius:var(--radius-pill, 80px);
  background:var(--color-primary-soft);
  opacity:.35;
}
/* Les sources s'allument l'une après l'autre : on lit que le modèle
   consulte la mémoire avant d'écrire. Décalage par rang. */
.demo__source:nth-child(2){animation:demo-source 4s var(--ease-signature, ease) 0s infinite}
.demo__source:nth-child(3){animation:demo-source 4s var(--ease-signature, ease) .35s infinite}
.demo__source:nth-child(4){animation:demo-source 4s var(--ease-signature, ease) .7s infinite}
.demo__source:nth-child(5){animation:demo-source 4s var(--ease-signature, ease) 1.05s infinite}
@keyframes demo-source{
  0%,10%   {opacity:.35}
  18%,55%  {opacity:1}
  70%,100% {opacity:.35}
}

@media (prefers-reduced-motion: reduce){
  .demo__source{animation:none !important;opacity:1}
}

/* ── Console produit ─────────────────────────────────────────
   Retour du 26/08 : reproduction de la frame Figma 7322:8827 en
   composants HTML — pas en image exportée — pour que chaque élément
   soit animable et modifiable. Trois gestes : le bandeau d'outils
   défile, la sélection passe de l'un à l'autre, le prompt s'écrit. */

.produit__console{
  position:absolute;
  inset:0;
  /* Retour du 26/08 : composition resserrée et recentrée — le contenu
     flottait dans un cadre trop haut. */
  padding:20px 22px;
  display:flex;flex-direction:column;justify-content:center;gap:14px;
  background:var(--color-white);
  border-radius:var(--radius-lg, 16px);
  overflow:hidden;
}

/* ---------- Bandeau des outils connectés ---------- */
.produit__rail{
  overflow:hidden;
  /* naît et meurt en transparence, comme les rails de la marque */
  mask-image:linear-gradient(90deg, transparent 0, #000 6%, #000 88%, transparent 100%);
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 6%, #000 88%, transparent 100%);
}
.produit__rail-piste{
  display:flex;gap:12px;width:max-content;
  animation:produit-defile 26s linear infinite;
}
@keyframes produit-defile{ to{ transform:translateX(-50%) } }

.produit__connecteur{
  flex:none;
  display:inline-flex;align-items:center;gap:10px;
  padding:10px 14px;
  border-radius:var(--radius-md, 12px);
  background:var(--color-surface);
  border:1px solid transparent;
  opacity:.5;
  transition:opacity var(--motion-base, 200ms) var(--ease-signature, ease),
             border-color var(--motion-base, 200ms) var(--ease-signature, ease),
             background var(--motion-base, 200ms) var(--ease-signature, ease);
  /* la sélection tourne : chaque rang s'allume à son tour */
  animation:produit-selection 12s var(--ease-signature, ease) infinite;
  animation-delay:calc(var(--rang, 0) * 1.5s);
}
@keyframes produit-selection{
  0%,6%    {opacity:.5;  border-color:transparent;                background:var(--color-surface)}
  9%,15%   {opacity:1;   border-color:var(--color-border-strong); background:var(--color-white)}
  18%,100% {opacity:.5;  border-color:transparent;                background:var(--color-surface)}
}
.produit__connecteur img{display:block;flex:none;width:24px;height:24px;object-fit:contain}
.produit__connecteur-nom{
  font-size:var(--text-caption, 13px);line-height:20px;font-weight:600;
  color:var(--color-title);white-space:nowrap;
}
.produit__connecteur-etat{
  font-size:var(--text-tiny, 12px);line-height:16px;
  color:var(--color-ink-soft);white-space:nowrap;
  padding:2px 8px;border-radius:var(--radius-pill, 80px);
  border:1px solid var(--color-border);
}

/* ---------- Titre ---------- */
.produit__console-head{display:flex;align-items:center;justify-content:space-between;gap:16px}
.produit__console-titre{
  margin:0;
  font-size:var(--text-h5, 21px);line-height:28px;letter-spacing:-0.02em;font-weight:700;
  color:var(--color-title);
}
.produit__console-accent{
  background:var(--gradient-signature);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.produit__console-mcp{
  flex:none;
  padding:6px 18px;border-radius:var(--radius-pill, 80px);
  background:var(--color-primary);color:var(--color-white);
  font-size:var(--text-caption, 13px);line-height:20px;font-weight:600;
}

/* ---------- Zone de prompt ---------- */
.produit__prompt{
  padding:16px 18px 12px;
  border:1px solid var(--color-border);
  border-radius:var(--radius-md, 12px);
  background:var(--color-white);
}
.produit__prompt-texte{
  margin:0 0 14px;
  display:flex;align-items:baseline;gap:1px;
  font-size:var(--text-body, 16px);line-height:24px;
  color:var(--color-ink-soft);
  min-height:24px;
}
.produit__prompt-curseur{
  display:inline-block;width:1.5px;height:17px;
  background:var(--color-primary-vivid);
  animation:produit-curseur 1s steps(1) infinite;
}
@keyframes produit-curseur{ 0%,50%{opacity:1} 51%,100%{opacity:0} }

.produit__prompt-barre{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  color:var(--color-ink-soft);
}
.produit__prompt-outils{display:flex;align-items:center;gap:14px}
.produit__prompt-modele{display:inline-flex;align-items:center;gap:6px}
.produit__prompt-modele-nom{
  font-size:var(--text-caption, 13px);line-height:20px;font-weight:600;color:var(--color-title);
}
.produit__prompt-modele-effort{
  font-size:var(--text-caption, 13px);line-height:20px;color:var(--color-ink-soft);opacity:.7;
}

/* ---------- Pilules de contexte ---------- */
.produit__tags{display:flex;flex-wrap:wrap;gap:10px}
.produit__tag{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 16px;
  border-radius:var(--radius-pill, 80px);
  background:var(--color-white);
  border:1px solid var(--color-border);
  /* Retour du 26/08 : une ombre violette légère — l'ombre de marque
     reste diffuse et basse en opacité, seule sa teinte change. */
  box-shadow:0 4px 20px 0 rgba(113, 96, 243, 0.16);
  font-size:var(--text-caption, 13px);line-height:20px;font-weight:500;
  color:var(--color-title);white-space:nowrap;
}
/* Icône agrandie : à 14px elle disparaissait à côté du libellé. */
.produit__tag-coche{flex:none;width:17px;height:17px;color:var(--color-primary);opacity:.8}

@media (max-width: 768px){
  /* Le cadre était contraint par le ratio 609/408 de la maquette et la
     console y était posée en absolu : à 390px de large, le cadre fait
     218px de haut pour 300px de contenu. Le bandeau des connecteurs,
     seul enfant élastique de la colonne flex, était écrasé à 0px de
     haut — il disparaissait — et la deuxième rangée de pastilles de
     contexte était tranchée en deux. On rend la hauteur au contenu. */
  .produit__screen{aspect-ratio:auto;height:auto}
  .produit__console{position:relative;inset:auto}
  .produit__rail{flex:none}

  .produit__console{padding:16px 16px 20px;gap:14px}
  .produit__console-titre{font-size:18px}
  .produit__tag{padding:6px 12px;font-size:12px}
}
@media (prefers-reduced-motion: reduce){
  .produit__rail-piste,
  .produit__connecteur,
  .produit__prompt-curseur{animation:none !important}
  .produit__connecteur{opacity:1}
  .produit__connecteur:first-child{border-color:var(--color-border-strong);background:var(--color-white)}
}


/* ── Fantôme de la carte 2026 ────────────────────────────────
   Matérialise la place que la carte occupait avant sa rotation.

   Il est porté par la GRILLE, pas par la carte : un pseudo-élément de
   la carte se peint après le fond de celle-ci, donc par-dessus — le
   filet traversait la carte. Posé ici, il est le premier enfant du
   conteneur et passe DESSOUS ; on ne voit plus que ce qui dépasse.

   Sa boîte est exactement la troisième cellule : c'est là que la carte
   se trouverait sans ses +3°. */
/* `::before` est déjà pris par le filet continu de la frise : le fantôme
   passe sur `::after`, remis DERRIÈRE les cartes par un z-index négatif
   (ni la grille ni la frise ne créent de contexte d'empilement). */
.pourquoi__cards::after{
  content:"";
  position:absolute;
  top:0;
  right:0;
  width:calc((100% - 48px) / 3);   /* 3 colonnes, 2 gouttières de 24px */
  height:100%;
  border:1px dashed var(--color-primary);
  border-radius:var(--radius-lg);
  opacity:.45;
  pointer-events:none;
  z-index:-1;
}
@media (max-width: 900px){
  /* En une colonne les cartes ne sont plus tournées : le repère n'a
     plus rien à repérer. */
  .pourquoi__cards::after{display:none}
}
/* ── Les deux aperçus : même page, deux directions artistiques ──
   Le balisage et le TEXTE sont identiques de part et d'autre — seule
   la peau change. C'est la seule façon de faire comprendre qu'il s'agit
   du même site, et que ce qui diffère est la direction artistique. */

.demo__page{
  position:absolute;inset:0;
  display:flex;flex-direction:column;
  font-family:var(--font-sans);
  overflow:hidden;
}
.demo__page-deco{position:absolute;inset:0;pointer-events:none}
.demo__page-nav{
  position:relative;z-index:1;flex:none;
  display:flex;align-items:center;gap:14px;
  padding:11px 16px;
}
.demo__page-liens{display:flex;gap:13px}
.demo__page-liens i{font-style:normal;font-size:9px;line-height:13px;font-weight:500}
.demo__page-cta{
  margin-left:auto;flex:none;
  padding:5px 13px;border-radius:3px;
  font-size:8.5px;line-height:12px;font-weight:600;
}
.demo__page-corps{
  position:relative;z-index:1;
  flex:1;min-height:0;
  display:flex;flex-direction:column;align-items:flex-start;
  padding:15px 18px 14px;
}
.demo__page-eyebrow{margin:0 0 8px}
.demo__page-eyebrow span{
  display:inline-flex;padding:3px 11px;
  font-size:7.5px;line-height:11px;letter-spacing:.09em;font-weight:600;
  text-transform:uppercase;
}
.demo__page-titre{margin:0 0 6px;font-size:17px;line-height:21px;letter-spacing:-0.01em;font-weight:700}
.demo__page-titre em{font-style:normal}
.demo__page-texte{margin:0;font-size:9px;line-height:14px}
.demo__page-bouton{
  display:inline-flex;align-items:center;gap:6px;
  margin-top:11px;padding:7px 15px;
  font-size:9px;line-height:13px;font-weight:600;
}
.demo__page-bouton em{font-style:normal}
.demo__page-cartes{
  margin-top:auto;padding-top:13px;width:100%;
  display:grid;grid-template-columns:repeat(3,1fr);gap:8px;
}
.demo__page-carte{display:flex;flex-direction:column;gap:4px;padding:9px 10px}
.demo__page-vignette{display:block;width:15px;height:15px;margin-bottom:1px}
.demo__page-carte b{font-size:9px;line-height:12px;font-weight:600}
.demo__page-carte u{text-decoration:none;font-size:7.5px;line-height:11px}

/* ══════════ v1 — le gabarit nu ══════════
   Aucune couleur, un seul gris, des angles droits, un cadre épais :
   ce que produit un modèle à qui l'on n'a rien transmis. */
.demo__page--nu{
  background:#fff;
  /* le contour gris demandé : il enferme la page et signe le gabarit */
  border:6px solid #d4d4d4;
}
.demo__page--nu .demo__page-nav{border-bottom:1px solid #d4d4d4}
.demo__page--nu .demo__page-liens i{color:#555}
.demo__page--nu .demo__page-cta{background:#e5e5e5;color:#333;border-radius:2px}
.demo__page--nu .demo__page-eyebrow span{background:#eee;color:#666;border-radius:2px}
.demo__page--nu .demo__page-titre{color:#222}
.demo__page--nu .demo__page-titre em{color:#222}
.demo__page--nu .demo__page-texte{color:#666}
.demo__page--nu .demo__page-bouton{background:#e5e5e5;color:#333;border-radius:2px}
.demo__page--nu .demo__page-carte{background:#fff;border:1px solid #d4d4d4;border-radius:2px}
.demo__page--nu .demo__page-vignette{background:#e5e5e5;border-radius:2px}
.demo__page--nu .demo__page-carte b{color:#333}
.demo__page--nu .demo__page-carte u{color:#777}
/* ══════════ v2 — la page portée par une direction artistique ══════════
   Registre chaleureux et illustré, et surtout VIVANT : la scène se
   construit sous les yeux — les collines montent, les arbres poussent,
   l'arc se trace, les barres s'élèvent, la bille tombe et rebondit.
   C'est la différence qu'on veut faire sentir face au gabarit figé de
   gauche : une DA, ce n'est pas une teinte, c'est une intention qui
   se déploie. Boucle de 11s, tout est décoratif et coupé au premier
   réglage de mouvement réduit. */

.demo__page--da{
  background:linear-gradient(180deg,#c3e9f1 0%, #a9dbe8 24%, #86ccb8 40%, #2f8f68 60%, #14664a 100%);
}
.demo__page--da .demo__page-deco{overflow:hidden}

/* ---------- Ciel ---------- */
.demo__page--da .demo__soleil{
  position:absolute;left:50%;top:-26px;width:38px;height:38px;border-radius:50%;
  background:radial-gradient(circle at 40% 38%, #fff6cf, #ffd764);
  box-shadow:0 0 26px 8px rgba(255,215,100,.42);
  transform:translateX(-50%);
  animation:da-soleil 11s ease-in-out infinite;
}
@keyframes da-soleil{
  0%,6%    {transform:translate(-50%,14px) scale(.7);opacity:0}
  22%,86%  {transform:translate(-50%,0) scale(1);opacity:1}
  100%     {transform:translate(-50%,14px) scale(.7);opacity:0}
}
.demo__page--da .demo__nuage{
  position:absolute;height:9px;border-radius:9px;background:rgba(255,255,255,.9);
  box-shadow:14px 3px 0 -2px rgba(255,255,255,.85), 30px 0 0 -3px rgba(255,255,255,.7);
}
.demo__page--da .demo__nuage--1{top:13%;width:22px;animation:da-nuage 26s linear infinite}
.demo__page--da .demo__nuage--2{top:24%;width:16px;opacity:.75;animation:da-nuage 34s linear infinite -9s}
.demo__page--da .demo__nuage--3{top:8%;width:13px;opacity:.6;animation:da-nuage 44s linear infinite -20s}
@keyframes da-nuage{ from{left:-16%} to{left:112%} }

.demo__page--da .demo__oiseau{
  position:absolute;width:7px;height:4px;
  border-top:1.5px solid rgba(255,255,255,.85);
  border-radius:50% 50% 0 0;
  transform:rotate(-8deg);
}
.demo__page--da .demo__oiseau--1{top:19%;animation:da-oiseau 13s ease-in-out infinite 2.4s}
.demo__page--da .demo__oiseau--2{top:23%;transform:scale(.75) rotate(-8deg);animation:da-oiseau 13s ease-in-out infinite 3.1s}
@keyframes da-oiseau{
  0%,10%  {left:-8%;opacity:0}
  18%     {opacity:.9}
  70%     {opacity:.9}
  82%,100%{left:106%;opacity:0}
}

/* ---------- Les collines : elles montent l'une après l'autre ---------- */
.demo__page--da .demo__scene-colline{
  position:absolute;left:-14%;width:128%;border-radius:50% 50% 0 0;
  transform-origin:50% 100%;
}
.demo__page--da .demo__scene-colline--3{top:30%;height:44%;background:#63bd99;opacity:.9;
  animation:da-colline 11s var(--ease-signature, cubic-bezier(.2,.6,.3,1)) infinite}
.demo__page--da .demo__scene-colline--2{top:38%;height:44%;background:#3d9c73;
  animation:da-colline 11s var(--ease-signature, cubic-bezier(.2,.6,.3,1)) infinite .18s}
.demo__page--da .demo__scene-colline--1{top:49%;height:56%;background:#1c7452;
  animation:da-colline 11s var(--ease-signature, cubic-bezier(.2,.6,.3,1)) infinite .36s}
@keyframes da-colline{
  0%,4%    {transform:translateY(46px)}
  20%,88%  {transform:translateY(0)}
  100%     {transform:translateY(46px)}
}

/* ---------- L'arc : il se trace ---------- */
.demo__page--da .demo__arc{
  position:absolute;left:29%;top:25%;width:74px;height:38px;overflow:visible;
  filter:drop-shadow(0 3px 4px rgba(0,0,0,.14));
}
.demo__page--da .demo__arc path{
  stroke-dasharray:130;stroke-dashoffset:130;
  animation:da-trace 11s var(--ease-signature, cubic-bezier(.2,.6,.3,1)) infinite .5s;
}
@keyframes da-trace{
  0%,8%    {stroke-dashoffset:130}
  30%,86%  {stroke-dashoffset:0}
  100%     {stroke-dashoffset:130}
}

/* ---------- Les arbres : ils poussent depuis le sol ---------- */
.demo__page--da .demo__objet{position:absolute}
.demo__page--da .demo__objet--sapin{
  width:0;height:0;
  border-left:9px solid transparent;border-right:9px solid transparent;
  border-bottom:23px solid #2b7d5d;
  transform-origin:50% 100%;
  animation:da-pousse 11s var(--ease-signature, cubic-bezier(.2,.6,.3,1)) infinite;
}
.demo__page--da .demo__objet--sapin1{left:10%;top:27%;animation-delay:.7s}
.demo__page--da .demo__objet--sapin2{left:18%;top:31%;border-left-width:7px;border-right-width:7px;border-bottom-width:18px;
  border-bottom-color:#35906a;animation-delay:.95s}
.demo__page--da .demo__objet--sapin3{left:4%;top:33%;border-left-width:6px;border-right-width:6px;border-bottom-width:15px;
  border-bottom-color:#1f7856;animation-delay:1.2s}
@keyframes da-pousse{
  0%,10%   {transform:scaleY(0) scaleX(.6)}
  26%      {transform:scaleY(1.12) scaleX(1.04)}
  32%,86%  {transform:scaleY(1) scaleX(1)}
  100%     {transform:scaleY(0) scaleX(.6)}
}

/* ---------- Le graphique : les barres s'élèvent une à une ---------- */
.demo__page--da .demo__objet--barres{right:8%;top:28%;display:flex;align-items:flex-end;gap:3px}
.demo__page--da .demo__objet--barres i{
  display:block;width:9px;border-radius:2px 2px 0 0;background:#e8a33d;
  transform-origin:50% 100%;
  animation:da-barre 11s var(--ease-signature, cubic-bezier(.2,.6,.3,1)) infinite;
}
.demo__page--da .demo__objet--barres i:nth-child(1){height:14px;animation-delay:1.3s}
.demo__page--da .demo__objet--barres i:nth-child(2){height:22px;background:#ef9a4e;animation-delay:1.45s}
.demo__page--da .demo__objet--barres i:nth-child(3){height:31px;background:#e8803c;animation-delay:1.6s}
.demo__page--da .demo__objet--barres i:nth-child(4){height:40px;background:#d96a30;animation-delay:1.75s}
@keyframes da-barre{
  0%,12%   {transform:scaleY(0)}
  28%      {transform:scaleY(1.08)}
  34%,86%  {transform:scaleY(1)}
  100%     {transform:scaleY(0)}
}

/* ---------- La bille : elle tombe et rebondit ---------- */
.demo__page--da .demo__objet--bille{
  right:22%;top:30%;width:13px;height:13px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%, #ffd9a0, #e0813c);
  box-shadow:0 3px 5px rgba(0,0,0,.20);
  animation:da-bille 11s cubic-bezier(.5,.05,.5,.95) infinite 1.9s;
}
@keyframes da-bille{
  0%,16%   {transform:translateY(-46px);opacity:0}
  20%      {opacity:1}
  30%      {transform:translateY(0)}
  36%      {transform:translateY(-13px)}
  42%      {transform:translateY(0)}
  46%      {transform:translateY(-5px)}
  50%,86%  {transform:translateY(0);opacity:1}
  100%     {transform:translateY(-46px);opacity:0}
}

/* ---------- Grain ---------- */
.demo__page--da .demo__grain{
  position:absolute;inset:0;opacity:.15;mix-blend-mode:overlay;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Interface ---------- */
/* La nav était blanche sur ciel clair : illisible. Elle passe en vert
   profond, la couleur d'encre de cette DA. */
.demo__page--da .demo__page-nav{border-bottom:0}
.demo__page--da .demo__page-liens i{color:#0f5138;font-weight:700}
.demo__page--da .demo__page-cta{
  background:#d6f24f;color:#14503a;
  border-radius:var(--radius-pill, 80px);font-weight:700;
  box-shadow:0 2px 8px rgba(0,0,0,.12);
}
.demo__page--da .demo__page-corps{justify-content:flex-end;padding-bottom:0}
/* Eyebrow agrandi : il se perdait. */
.demo__page--da .demo__page-eyebrow{margin-bottom:7px}
.demo__page--da .demo__page-eyebrow span{
  padding:0;background:none;color:#e2ff62;
  font-size:9.5px;line-height:13px;font-weight:800;letter-spacing:.13em;
  text-shadow:0 1px 3px rgba(0,0,0,.28);
}
.demo__page--da .demo__page-titre{
  color:#fff;font-size:23px;line-height:24px;letter-spacing:-0.03em;font-weight:800;
  text-shadow:0 2px 10px rgba(0,0,0,.18);
}
.demo__page--da .demo__page-titre em{color:#fff}
.demo__page--da .demo__page-texte{color:rgba(255,255,255,.9);font-weight:500}
/* Le bouton était collé au panneau : on lui rend de l'air des deux côtés. */
.demo__page--da .demo__page-bouton{
  background:#d6f24f;color:#14503a;
  border-radius:var(--radius-pill, 80px);font-weight:700;
  margin-top:13px;margin-bottom:18px;
  box-shadow:0 5px 14px rgba(0,0,0,.18);
}
.demo__page--da .demo__page-cartes{
  background:#f6f2e8;border-radius:11px 11px 0 0;
  padding:11px 10px 7px;margin:0 -18px 0;width:calc(100% + 36px);
  box-shadow:0 -6px 20px rgba(0,0,0,.12);
}
.demo__page--da .demo__page-carte{background:none;border:0;padding:2px 4px}
.demo__page--da .demo__page-vignette{border-radius:5px}
.demo__page--da .demo__page-vignette--a{background:#ef8f4e}
.demo__page--da .demo__page-vignette--b{background:#4fbfc4}
.demo__page--da .demo__page-vignette--c{background:#cbe94a}
.demo__page--da .demo__page-carte b{color:#14503a}
.demo__page--da .demo__page-carte u{color:#4a6b5e}

@media (prefers-reduced-motion: reduce){
  .demo__soleil,.demo__nuage,.demo__oiseau,.demo__scene-colline,
  .demo__arc path,.demo__objet--sapin,.demo__objet--barres i,.demo__objet--bille{
    animation:none !important;
  }
  .demo__soleil{transform:translateX(-50%);opacity:1}
  .demo__arc path{stroke-dashoffset:0}
  .demo__oiseau{opacity:0}
}


/* ============================================================
   Replis mobiles transversaux — les quatre sections partagent
   deux gabarits, ils se corrigent donc une fois.
   ============================================================ */

@media (max-width: 768px) {

  /* --- Les pilules de conclusion ------------------------------
     Elles sont déjà en bloc (voir .produit__conclusion) ; sur deux
     ou trois lignes, il ne reste qu'à centrer la phrase. Et le
     décalage de centrage mesuré dans Figma n'a plus d'objet une fois
     la pilule seule sur sa ligne. */
  .comment__note-pill,
  .interieur__note-pill,
  .demo__conclusion-pill { text-align: center; }

  .comment__note-pill { left: 0; }

  /* --- Le schéma « comment ça fonctionne » ---------------------
     C'est un export raster de 1218px de large, ramené à 82% d'une
     colonne déjà réduite : à 390px, le diagramme faisait 275px et
     ses libellés (« VOS OUTILS », « MCP », « SITES WEB »…) n'étaient
     plus lisibles. On le sort des gouttières de section et on réduit
     ses marges internes : 359px au lieu de 275, soit +30%. Le fond
     pointillé reste visible autour, c'est lui qui tient le cadrage. */
  .comment__diagram {
    flex: none;
    width: auto;
    max-width: none;
    margin-inline: calc(-1 * clamp(20px, 8.33vw, 120px));
  }

  .comment__diagram-img {
    width: 92%;
    margin: 4% 0 6% 4%;
  }

  /* --- Les deux aperçus de la section démo ---------------------
     Ce sont des pages en réduction posées en absolu dans un cadre à
     hauteur fixe (280px sur tablette). Il leur en faut ~310 : le
     gabarit nu perdait sa rangée de tuiles, tranchée net en bas. On
     rend la hauteur au contenu — et il faut alors reprendre les deux
     `flex: 1`, qui valent `flex-basis: 0%` : sans hauteur imposée il
     n'y a aucun espace libre à se partager, et la boîte retombe à
     zéro. En hauteur automatique, c'est `flex: none`.

     Ces deux règles sont posées ICI et non dans le repli de la
     section démo : `.demo__page` est stylé par une partial servie
     APRÈS lui, qui reprenait la main. */
  .demo__page {
    position: relative;
    inset: auto;
  }

  .demo__page-corps { flex: none; }
}