/* ==========================================================================
   Page d'accueil : mise en application du rapport UX/UI (13 octobre 2026)
   Ne touche ni aux images, ni aux cartes, ni aux animations : seuls changent
   les tailles de texte, les interlignes, les espaces, l'alignement, la grille
   des blocs « texte + média », quelques couleurs de texte et le bandeau d'offre.
   Tout est limité à <body class="page-home"> (les autres pages gardent stanza.css).
   ========================================================================== */

/* ---------- Échelle d'espacement (multiples de 8) et jetons ---------- */
.page-home {
  --sec-s: 64px;   /* bandes courtes : normes, intégrations, séparateurs */
  --sec-m: 96px;   /* sections de contenu */
  --sec-l: 128px;  /* temps forts : bas du hero, appel final */
  --gap-card: 24px;
  --c-title-dark: #e6eaf2;  /* titres sur fond sombre : évite le halo du blanc pur */
  --c-body-dark: #c3cad8;   /* paragraphes longs sur fond sombre (8,5:1 sur carte) */
}
@media (max-width: 991px) { .page-home { --sec-s: 48px; --sec-m: 80px; --sec-l: 104px; } }
@media (max-width: 600px) { .page-home { --sec-s: 40px; --sec-m: 64px; --sec-l: 80px; --gap-card: 16px; } }

/* Même largeur de contenu partout : 1 200 px (bords alignés d'une section à l'autre) */
.page-home .container--md { max-width: 1296px; }

/* ---------- Typographie : 8 tailles (96 / 80 / 48 / 32 / 22 / 18 / 16 / 14) ---------- */
.page-home h1, .page-home h2, .page-home h3 { text-wrap: balance; }
.page-home p, .page-home li { text-wrap: pretty; }

.page-home .hero__title { font-size: 80px; line-height: 1.05; letter-spacing: -1px; }
.page-home .h2 { font-size: 48px; font-weight: 400; line-height: 1.12; letter-spacing: -0.5px; }
.page-home .h3 { font-size: 32px; line-height: 1.15; }
.page-home .display--md { font-size: 64px; line-height: 1.1; }
.page-home .solutions-head__title,
.page-home .mega__title { font-size: clamp(40px, 6.7vw, 96px); line-height: 1; }

/* Surtitres : 14 px, majuscules espacées ; le bleu texte passe au bleu foncé du site (6,2:1 au lieu de 4,55:1) */
.page-home .eyebrow { font-size: 14px; font-weight: 500; letter-spacing: .08em; }
.page-home .eyebrow--light { color: var(--blue-700); }
.page-home .promises .eyebrow--light { color: var(--muted-light); }   /* un seul accent bleu par écran : ici, l'italique du titre */
.page-home .svc__name { font-size: 14px; letter-spacing: .08em; color: var(--muted-light); }
.page-home .pillar__num { color: var(--muted-light); }               /* numéros 01 / 02 / 03 neutres */

/* Chapeaux et textes de bloc : 18 px, interligne 1,55 (20 px / 1,5 pour le hero) */
.page-home .body-lg { font-size: 18px; line-height: 1.55; }
.page-home .hero__lead { max-width: 720px; font-size: 20px; line-height: 1.5; }
.page-home .solutions-head__lead, .page-home .mega__lead, .page-home .services__packs { font-size: 18px; line-height: 1.5; }

/* Titres de carte : 22 px ; titres de groupe : 32 px */
.page-home .svc__title, .page-home .feature__title, .page-home .promise__title,
.page-home .tab-card__title { font-size: 22px; line-height: 1.25; }
.page-home .pillar__title { font-size: 32px; line-height: 1.15; }
.page-home .tab-card__label { font-size: 14px; letter-spacing: .08em; }

/* Textes de carte, listes et boutons : 16 px, interligne 1,5 */
.page-home .svc__text, .page-home .feature__text, .page-home .promise__text, .page-home .pillar__text,
.page-home .tab-card__text, .page-home .tm__note, .page-home .tm__free,
.page-home .atelier__points li, .page-home .fine-callout__rows span { font-size: 16px; line-height: 1.5; }
.page-home .tab-card__text { line-height: 1.5; }
.page-home .svc__more { font-size: 16px; }
.page-home .fine-callout__more, .page-home .fine-callout__foot { font-size: 14px; }
.page-home .fine-callout__scope, .page-home .fine-callout__rows span small { font-size: 13px; }

/* ---------- Bandeau d'offre : 40 px sur ordinateur, bleu nuit (le titre redevient l'élément le plus lumineux) ---------- */
.page-home .promo-bar { background: linear-gradient(90deg, #12285a, #1c3f86 50%, #12285a) 0 0 / 200% 100%; }
.page-home .promo-bar__inner { padding-top: 7px; padding-bottom: 7px; gap: 4px 24px; font-size: 14px; }
.page-home .promo-bar__icon { width: 24px; height: 24px; }
.page-home .promo-bar__icon svg { width: 14px; height: 14px; }
.page-home .promo-bar__text b { font-size: 18px; line-height: 1.1; }
.page-home .promo-bar__text small { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* la date reste lue par les lecteurs d'écran : le décompte la dit déjà */
.page-home .cd__u { padding: 3px 8px; }
.page-home .cd__u b { font-size: 14px; }
.page-home .promo-bar__ends { font-size: 12px; }

/* ---------- Hero : un seul axe, un bouton plein, « Pour qui ? » en lien ---------- */
.page-home .hero { padding-bottom: var(--sec-l); }
.page-home .hero__heading { gap: 0; }
.page-home .hero__heading .eyebrow { margin-bottom: 16px; }
.page-home .hero__title { margin-bottom: 24px; }
.page-home .hero__lead { margin-bottom: 32px; }
.page-home .hero__cta { margin-top: 0; margin-bottom: 32px; align-items: center; gap: 24px; }
.page-home .hero__link {
  display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 4px;
  font-size: 16px; font-weight: 450; color: var(--light); border-bottom: 1px solid transparent; transition: color .25s ease, border-color .25s ease;
}
.page-home .hero__link span[aria-hidden] { display: inline-block; transition: transform .3s var(--ease-out); }
.page-home .hero__link:hover { color: var(--blue-300); }
.page-home .hero__link:hover span[aria-hidden] { transform: translateX(4px); }
.page-home .hero__promises { margin-top: 0; font-size: 16px; gap: 10px 32px; }
.page-home .tabs { margin-top: 56px; }
.page-home .tabs__menu { gap: var(--gap-card); }

/* ---------- Lueur après le hero : 900 → 560 px (même lueur, même animation) ---------- */
.page-home .transition { height: 560px; }
.page-home .services { margin-top: -174px; padding-bottom: 0; }
.page-home .sky__stars {
  -webkit-mask-image: linear-gradient(#000 0, #000 calc(100% - 473px), transparent calc(100% - 237px));
          mask-image: linear-gradient(#000 0, #000 calc(100% - 473px), transparent calc(100% - 237px));
}

/* ---------- Services : titres de groupe collés à leurs cartes, groupes bien séparés ---------- */
.page-home .services__head { gap: 16px; margin-bottom: 64px; }
.page-home .services__head .eyebrow { margin-bottom: 0; }
.page-home .services__head .body-lg { max-width: 640px; }
.page-home .pillar { margin-bottom: 80px; }
.page-home .pillar:last-of-type { margin-bottom: 48px; }
.page-home .pillar__head { margin-bottom: 24px; }
.page-home .svc-grid, .page-home .promise-grid { gap: var(--gap-card); }
.page-home .services__packs { margin-top: 0; max-width: 640px; }

/* ---------- Engagements : titre sur 2 lignes, sans phrase d'appui ---------- */
.page-home .promises { padding: var(--sec-m) 0 0; }
.page-home .promises__title { max-width: 720px; font-size: clamp(34px, 4.4vw, 48px); line-height: 1.1; letter-spacing: -1px; text-wrap: balance; }
.page-home .promises .services__head { margin-bottom: 48px; }

/* ---------- Séparateur « Nos solutions » ---------- */
.page-home .solutions-head { padding: var(--sec-s) 0 0; }
.page-home .solutions-head__lead { margin-top: 16px; }

/* ---------- Blocs « texte + média » : texte toujours à gauche, gouttière de 91 px, média inchangé (629 px) ---------- */
.page-home .tm { padding-bottom: var(--sec-m); }
.page-home .tm--plain { padding-top: var(--sec-m); }
.page-home .tm--follow { padding-top: 0; }
.page-home .tm--dark { padding-bottom: 0; }                  /* l'espace entre blocs sombres vient de la bande lumineuse */
.page-home .tm--dark.tm--last { padding-bottom: var(--sec-m); }
.page-home .section-head { padding: var(--sec-m) 0; }
.page-home .shine { height: var(--sec-m); }
.page-home .tm__layout,
.page-home .tm--media-left .tm__layout { grid-template-columns: minmax(0, 480fr) minmax(0, 629fr); gap: clamp(48px, 6.3vw, 91px); align-items: center; }
.page-home .tm--media-left .tm__content { order: -1; padding-left: 0; }
.page-home .tm__content .eyebrow { margin-bottom: 16px; }
.page-home .tm__content .h2 { margin-bottom: 16px; }
.page-home .tm__content .body-lg { margin-bottom: 32px; }
.page-home .features { gap: var(--gap-card); margin-top: 64px; }

/* Blocs sombres : texte plus court, plus clair, plus aéré (la zone la plus pénible à lire) */
.page-home .tm--dark .h2, .page-home .tm--dark .feature__title { color: var(--c-title-dark); }
.page-home .tm--dark .body-lg, .page-home .tm--dark .tm__note, .page-home .tm--dark .feature__text { color: var(--c-body-dark); }
.page-home .tm--dark .body-lg, .page-home .tm--dark .tm__note, .page-home .tm--dark .tm__free { line-height: 1.6; }
.page-home .tm--dark .body-lg { margin-bottom: 24px; }
.page-home .tm__note { margin: 0 0 24px; }
.page-home .tm--dark .fine-callout { margin: 0 0 24px; }
.page-home .tm__free { margin: 0 0 24px; }
.page-home .tm__btns { gap: 12px; align-items: center; }

/* ---------- Normes, carrousel, intégrations ---------- */
.page-home .customers { padding: var(--sec-s) 0; }
.page-home .customers .h2 { font-size: 32px; margin-bottom: 40px; }
.page-home .proof { padding: 32px 0 var(--sec-m); }
.page-home .slider__bullets { margin-top: 24px; }
.page-home .proof__cta { margin-top: 32px; }
.page-home .slide__title { font-size: 32px; line-height: 1.15; letter-spacing: -.6px; }
.page-home .slide.is-active .slide__title { font-size: 48px; line-height: 1.1; letter-spacing: -1px; }
.page-home .integrations { padding: 0 0 var(--sec-s); }
.page-home .integrations__box { padding: 64px 0; }
.page-home .integrations__box .h3 { margin-bottom: 40px; }

/* ---------- Sur mesure, Atelier, appel final ---------- */
.page-home .mega { padding: var(--sec-s) 0 0; }
.page-home .atelier { padding: var(--sec-m) 0; }
.page-home .atelier__text .body-lg { max-width: 560px; }
.page-home .atelier__points { margin: 24px 0; }
.page-home .at-examples { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; max-width: 600px; margin-bottom: 32px; }
.page-home .at-examples li { font-size: 14px; }
.page-home .cta { padding: var(--sec-l) 0; }

/* ---------- Tablette et mobile ---------- */
@media (max-width: 991px) {
  .page-home .transition { height: 430px; }
  .page-home .services { margin-top: -130px; }
  .page-home .sky__stars {
    -webkit-mask-image: linear-gradient(#000 0, #000 calc(100% - 361px), transparent calc(100% - 181px));
            mask-image: linear-gradient(#000 0, #000 calc(100% - 361px), transparent calc(100% - 181px));
  }
  .page-home .tm__layout, .page-home .tm--media-left .tm__layout { grid-template-columns: 1fr; gap: 40px; }
  /* au-delà de 2 lignes, le texte est aligné à gauche */
  .page-home .tm__content { align-items: flex-start; text-align: left; }
  .page-home .tm--media-left .tm__content { order: 0; }
  .page-home .tm__btns { justify-content: flex-start; }
  .page-home .h2 { font-size: 40px; }
  .page-home .tm--plain { padding-top: var(--sec-m); }
  .page-home .tm--follow { padding-top: 0; }
  .page-home .slide .slide__title, .page-home .slide.is-active .slide__title { font-size: 32px; letter-spacing: -.6px; }
  .page-home .promo-bar__inner { justify-content: center; }
}
@media (max-width: 600px) {
  .page-home .hero__title { font-size: 44px; }
  .page-home .h2 { font-size: 32px; }
  .page-home .h3 { font-size: 24px; }
  .page-home .display--md { font-size: 40px; }
  .page-home .customers .h2 { font-size: 24px; }
  .page-home .body-lg, .page-home .hero__lead { font-size: 17px; line-height: 1.5; }
  .page-home .feature__title, .page-home .svc__title, .page-home .promise__title, .page-home .tab-card__title { font-size: 20px; }
  .page-home .pillar__title { font-size: 26px; }
  .page-home .tab-card__label, .page-home .svc__name, .page-home .eyebrow { font-size: 13px; }
  .page-home .fine-callout__scope, .page-home .fine-callout__rows span small { font-size: 13px; }
  .page-home .slide .slide__title, .page-home .slide.is-active .slide__title { font-size: 24px; line-height: 1.2; }
  .page-home .hero__heading .eyebrow { margin-bottom: 12px; }
  .page-home .hero__cta { flex-direction: column; align-items: stretch; gap: 8px; margin-bottom: 24px; }
  .page-home .hero__cta .btn { width: 100%; }
  .page-home .hero__link { justify-content: center; }
  .page-home .hero__promises { flex-direction: column; align-items: center; gap: 8px; font-size: 14px; }
  .page-home .tabs { margin-top: 40px; }
  .page-home .transition { height: 340px; }
  .page-home .services { margin-top: -100px; }
  .page-home .services__head { margin-bottom: 48px; }
  .page-home .pillar { margin-bottom: 64px; }
  .page-home .pillar:last-of-type { margin-bottom: 40px; }
  .page-home .features { margin-top: 48px; }
  .page-home .tm__btns { flex-direction: column; align-items: stretch; }
  .page-home .tm__btns .btn { width: 100%; }
  .page-home .at-examples { grid-template-columns: 1fr; }
  .page-home .integrations__box { padding: 48px 0; }
  /* bandeau d'offre : 56 px au plus, sur une ou deux lignes courtes */
  .page-home .promo-bar__inner { gap: 2px 14px; padding-top: 6px; padding-bottom: 6px; font-size: 13px; }
  .page-home .promo-bar__icon, .page-home .promo-bar__text span, .page-home .promo-bar__ends, .page-home .cd__u:has([data-cd="s"]) { display: none; }
  .page-home .promo-bar__text b { font-size: 17px; }
  .page-home .cd__u { padding: 2px 6px; }
}
@media (max-width: 380px) {
  .page-home .promo-bar__inner { font-size: 12px; }
  .page-home .cd__u:has([data-cd="m"]) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .page-home .hero__link, .page-home .hero__link span[aria-hidden] { transition: none; }
}

/* Mots composés (« laisse-t-elle ») : jamais coupés en fin de ligne */
.page-home .nw { white-space: nowrap; }
/* Atelier : même colonne de lecture que les autres blocs */
.page-home .atelier__inner { max-width: 1296px; }

/* Césures : titres équilibrés, pas de mot orphelin en fin de paragraphe */
.page-home :is(h1, h2, h3) { text-wrap: balance; }
.page-home :is(.body-lg, .svc__body, .lead, .section-lead) { text-wrap: pretty; }

/* Contraste AA des mini-illustrations des blocs clairs (WCAG 1.4.3) */
.page-home .tm--light .vg-rec b { color: color-mix(in srgb, var(--hi) 68%, var(--dark)); }
.page-home .tm--light :is(.vg-code, .vg-pill--ok, .vg-contact em, .vg-timer, .vg-escrow i:nth-child(2)) { color: color-mix(in srgb, var(--okc, #1f9d63) 66%, var(--dark)); }
.page-home .slider__track:focus-visible { outline: 2px solid var(--blue-600); outline-offset: 4px; border-radius: 16px; }
.page-home :is(.vg-timer, .vg-escrow i:nth-child(2)) { color: color-mix(in srgb, #1f9d63 66%, #0e1420) !important; }
.page-home .tm--light .vg-node--hi b { color: color-mix(in srgb, var(--hi) 62%, var(--dark)); }
html[data-theme="dark"] .page-home .at-examples li { color: #e6eaf2; }
html[data-theme="dark"] .page-home .at-examples li:last-child { color: #aab4c6; }
html[data-theme="dark"] .page-home .vg-timer { color: #5fd39a !important; }