/* ============================================================
   Section 01 — hero · Figma node 7206:8620 « HERO » (maquette v2, ex-5374:25276)
   header 80px (nav) + hero 1357px = ~1437px à 1440px de large.
   Le node fait 1593px de large (bleed ±77px) : reproduit via une
   rangée de logos non-wrappée + overflow hidden sur .hero.
   ============================================================ */

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

.site-header {
  position: sticky; /* retour 13/08 : fixe au scroll */
  top: 0;
  z-index: 20; /* au-dessus de tout (sticky) */
  height: 80px; /* hors tokens: mesuré Figma */
  background: var(--color-white);
  border-bottom: 1px solid var(--color-border);
  font-family: var(--font-sans);
}

.site-header__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding-inline: 40px 31px; /* hors tokens: mesuré Figma (logo x=40, CTA à 31px du bord droit) */
}

.site-header__brand {
  display: inline-flex;
  align-items: center;
  gap: 8px; /* mesuré : picto 54px à x=40, texte à x=102 */
  text-decoration: none;
}

.site-header__picto {
  display: block;
  width: 54px;
  height: 54px;
}

.site-header__name {
  font-weight: 800;
  font-size: 28px; /* hors tokens: mesuré Figma (wordmark) */
  line-height: 26px;
  letter-spacing: -0.56px;
  color: var(--color-ink);
}

/* Nav centrée sur le viewport comme dans la maquette (x 588→852, centre 720).
   Position absolue assumée : barre de chrome à hauteur fixe, pas du contenu de flux. */
.site-header__nav {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 32px; /* hors tokens: mesuré Figma v2 (4 liens, x 540→901, centre 720) */
}

.site-header__link {
  font-family: var(--font-display);
  font-size: var(--text-small);
  line-height: var(--text-small--line-height);
  font-weight: 400;
  color: var(--color-border-dark); /* #27292E — seul token exact (texte nav) */
  text-decoration: none;
}

.site-header__link:hover {
  color: var(--color-black);
}

/* ---- Boutons pilule (partagés header + hero) ---------------- */

.site-header__cta,
.hero__cta {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 220px;
  height: 48px;
  padding: 0 12px 0 22px; /* mesuré : texte à 22px du bord, flèche à 12px */
  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;
  white-space: nowrap; /* le libellé tient sur une ligne dans la maquette */
  box-shadow:
    0px 8px 4px -8px rgba(88, 88, 88, 0.24),
    0px 8px 16px -16px rgba(51, 51, 51, 0.28),
    0px 4px 12px 0px rgba(126, 126, 126, 0.16),
    0px 8px 16px 0px rgba(134, 134, 134, 0.16),
    inset 0px 2px 0px 0px rgba(255, 255, 255, 0.16);
}

.site-header__cta {
  background: #2b2b2b; /* hors tokens: mesuré Figma */
  color: var(--color-white);
}

.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("../assets/hero/tip-tail-ia.svg");
  transform: rotate(-164deg);
}

.hero__tip--da::before {
  width: 30px;
  height: 29.3px;
  right: -16.4px;
  top: -12.7px;
  background-image: url("../assets/hero/tip-tail-da.svg");
  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) {
  /* Nav condensée : logo + CTA uniquement (maquette desktop-only,
     comportement proposé — pas de burger, pas de JS). */
  .site-header__nav { display: none; }
  .site-header__inner { padding-inline: 20px; }
  .site-header__cta { width: auto; gap: 10px; padding: 0 16px; }
  .site-header__name { font-size: 22px; }
  .site-header__picto { width: 40px; height: 40px; }

  .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) {
  .site-header__name { font-size: 18px; letter-spacing: -0.3px; }
  .site-header__picto { width: 32px; height: 32px; }
  .site-header__cta { height: 40px; padding: 0 14px; gap: 8px; font-size: 13px; }
  .site-header__cta img { display: none; } /* flèche masquée : place pour le wordmark */
  .site-header__inner { padding-inline: 16px; }
  .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 */
}