/* ─────────────────────────────────────────────────────────────
   OULA — Page d'accueil
   Calée sur _references/Homepage.png
   ───────────────────────────────────────────────────────────── */
@layer components {
  /* `.section` (rythme vertical) vit dans main.css : les pages de contenu
     s'en servent aussi, et elles ne chargent pas home.css. */

  /* Titre de section : display, indigo, aligné à gauche. */
  .section__title {
    color: var(--c-indigo);
    font-family: var(--font-display);
    font-size: var(--fs-h2);
    font-weight: 400;
    line-height: 1.1;
  }

  /* ═══ Hero ═════════════════════════════════════════════════
     Deux colonnes : illustration à gauche, discours à droite.
     Sur la maquette l'illustration occupe ~42 % de la largeur.
     ═════════════════════════════════════════════════════════ */
  .hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
    align-items: center;
    gap: clamp(var(--sp-md), 2.5vw, var(--sp-xl));
    padding-block: clamp(var(--sp-xl), 5vw, calc(var(--sp-2xl) * 1.1));
  }

  /* Contexte de positionnement de la tache. Le conteneur est en flex et
     épouse exactement la hauteur de l'image : les % verticaux de la tache
     se réfèrent donc bien au jean. En largeur en revanche il peut être
     plus large que l'image (qui est bornée à 34rem et centrée) — d'où le
     recentrage explicite dans .hero__stain. */
  .hero__media {
    position: relative;
    display: flex;
    justify-content: center;
  }

  .hero__img {
    width: 100%;
    max-width: 34rem;
    height: auto;
  }

  /* ─── Tache décorative sur le jean ─────────────────────────
     Position relevée au pixel sur les sources : la tache occupe
     x 211..307 / y 344..411 dans un jean de 546 × 525 px, soit
     38,64 % / 65,52 % de l'image, pour 17,77 % de sa largeur.
     Exprimée en fraction de l'image rendue, elle reste calée à
     toutes les tailles.
     ───────────────────────────────────────────────────────── */
  .hero__stain {
    /* Largeur réellement occupée par le jean : identique à la règle de
       .hero__img, donc la tache suit l'image même quand le conteneur
       flex est plus large qu'elle. */
    --jean-w: min(100%, 34rem);

    position: absolute;
    /* L'image est centrée : on repart de son bord gauche
       (50 % − moitié de sa largeur) avant d'appliquer l'offset. */
    left: calc(50% - var(--jean-w) / 2 + var(--jean-w) * 0.3864);
    /* Le conteneur ayant la hauteur exacte de l'image, un % suffit. */
    top: 65.52%;
    width: calc(var(--jean-w) * 0.1777);
    height: auto;
    pointer-events: none;

    /* État de repos = invisible : si l'animation ne se joue pas
       (mouvement réduit), la tache n'apparaît jamais — rendu neutre. */
    opacity: 0;
    /* Une seule courbe pour toute l'animation, molle aux deux extrémités
       (et non --ease-out, qui démarre vite). Les paliers intermédiaires
       sont volontairement évités : chacun redémarrerait l'easing et
       produirait des à-coups au milieu du fondu. */
    animation: stain-blink 6.4s ease-in-out 0.6s 1 both;
  }

  /* Fondu long des deux côtés. Deux keyframes par transition seulement,
     pour que l'easing lisse la montée et la descente d'un seul tenant.
     Repères en secondes (sur 6,4 s) : apparition 0 → 2,2 ;
     maintien 2,2 → 3,8 ; disparition 3,8 → 6,4. */
  @keyframes stain-blink {
    0%   { opacity: 0; }
    34%  { opacity: 1; } /* apparition ≈ 2,2 s */
    59%  { opacity: 1; } /* maintien ≈ 1,6 s */
    100% { opacity: 0; } /* disparition ≈ 2,6 s */
  }

  /* Mouvement réduit : pas d'apparition du tout. */
  @media (prefers-reduced-motion: reduce) {
    .hero__stain {
      animation: none;
    }
  }

  /* Le discours est centré sous le titre (cf. maquette). */
  .hero__content {
    display: grid;
    justify-items: center;
    text-align: center;
  }

  .hero__title {
    color: var(--c-coral);
    font-family: var(--font-display);
    font-size: var(--fs-h1);
    font-weight: 400;
    /* La fonte display est très ronde : on aère les lignes. */
    line-height: 1.28;
    letter-spacing: 0.005em;
    text-wrap: balance;
  }

  .hero__cta {
    margin-top: clamp(var(--sp-lg), 3vw, var(--sp-xl));
  }

  /* Le libellé du CTA change selon la largeur : version complète (panel)
     en desktop, version courte en mobile. Le variant masqué est retiré du
     flux ET de l'arbre d'accessibilité (`display: none`). */
  .hero__cta-label--short {
    display: none;
  }

  .hero__meta {
    display: grid;
    gap: var(--sp-2xs);
    margin-top: var(--sp-md);
    color: var(--c-indigo);
    font-size: var(--fs-lead);
    font-weight: 700;
    line-height: 1.35;
  }

  /* ═══ Comment ça marche ? ══════════════════════════════════ */
  .how__steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    gap: clamp(var(--sp-lg), 4vw, var(--sp-2xl));
    /* Les étapes sont en retrait du titre sur la maquette. */
    margin-top: clamp(var(--sp-xl), 4vw, var(--sp-2xl));
    padding-inline: clamp(0rem, 4vw, 4rem);
    list-style: none;
  }

  .how__step {
    text-align: center;
  }

  .how__num {
    display: block;
    color: var(--c-rose-dust);
    font-family: var(--font-display);
    /* Chiffre décoratif : volontairement plus gros que le plus grand
       titre. Exprimé en multiple de --fs-h1 pour rester solidaire de
       l'échelle si celle-ci évolue. */
    font-size: calc(var(--fs-h1) * 1.08);
    font-weight: 400;
    line-height: 1;
  }

  .how__step-title {
    margin-top: var(--sp-md);
    color: var(--c-indigo);
    /* Les titres d'étape sont en corps de texte gras, pas en display. */
    font-family: var(--font-body);
    font-size: var(--fs-lead);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .how__step-text {
    margin-top: var(--sp-sm);
    color: var(--c-indigo);
    font-size: var(--fs-body);
    line-height: 1.75;
    text-wrap: pretty;
  }

  /* ═══ Pourquoi c'est utile ? ═══════════════════════════════
     Fond rose en dégradé doux (et non un aplat), titre à gauche
     centré verticalement face à la colonne de texte.
     ═════════════════════════════════════════════════════════ */
  /* Nappe rose diffuse, plus dense au centre, fondue vers le blanc
     en haut et en bas (et non un aplat à bords nets). */
  .why {
    background:
      radial-gradient(
        135% 78% at 50% 50%,
        var(--c-pink) 0%,
        color-mix(in srgb, var(--c-pink) 42%, #fff) 48%,
        #fff 82%
      );
  }

  .why__inner {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    align-items: center;
    gap: clamp(var(--sp-lg), 5vw, var(--sp-2xl));
  }

  .why__body {
    display: grid;
    gap: clamp(var(--sp-lg), 3vw, var(--sp-xl));
  }

  /* Les 3 paragraphes forment un bloc serré (cf. maquette) : on
     réduit l'interligne de flow hérité de .flow. */
  .why__text {
    --flow-space: var(--sp-xs);

    color: var(--c-indigo);
    font-size: var(--fs-body);
    line-height: 1.7;
  }

  .why__stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
    gap: var(--sp-md) var(--sp-lg);
    list-style: none;
  }

  .why__stat-big {
    color: var(--c-coral-bright);
    font-family: var(--font-display);
    font-size: var(--fs-h2);
    font-weight: 400;
    line-height: 1.15;
    text-wrap: nowrap;
  }

  /* La description se lit sur 2 lignes sous le chiffre (cf. maquette) :
     on borne la mesure pour que la coupe tombe naturellement, sans
     retour forcé dans le contenu. */
  .why__stat-desc {
    max-width: 20ch;
    margin-top: var(--sp-xs);
    color: var(--c-indigo);
    font-size: var(--fs-body);
    line-height: 1.7;
  }

  /* ═══ Méthodologie ═════════════════════════════════════════ */
  .metho__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    align-items: center;
    gap: clamp(var(--sp-lg), 5vw, var(--sp-2xl));
  }

  .metho__text {
    margin-top: var(--sp-md);
    color: var(--c-indigo);
    font-size: var(--fs-body);
    line-height: 1.7;
  }

  .metho__criteria {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-sm) var(--sp-md);
    align-content: center;
    list-style: none;
  }

  /* Pastilles : contour fin de la couleur du texte, très arrondies.
     League Spartan réserve beaucoup de place sous la ligne de base :
     centrer la boîte fait paraître le texte trop haut. On compense en
     ajoutant du padding en haut et en retirant l'équivalent en bas. */
  .metho__chip {
    padding-block: 0.62em 0.44em;
    padding-inline: calc(var(--sp-md) * 1.15);
    border: 1px solid currentcolor;
    border-radius: var(--radius-pill);
    color: var(--c-indigo);
    /* Choix éditorial : les critères se lisent comme du contenu, pas
       comme des libellés d'interface — d'où --fs-body et non --fs-ui. */
    font-size: var(--fs-body);
    line-height: 1.3;
  }

  /* ═══ Responsive ═══════════════════════════════════════════ */
  @media (width < 60rem) {
    .hero__inner,
    .why__inner,
    .metho__inner {
      grid-template-columns: 1fr;
    }

    .hero__media {
      order: -1;
    }

    /* Sections empilées : tout le bloc s'aligne, titre compris,
       pour éviter un titre centré au-dessus d'un texte à gauche. */
    .why__inner,
    .metho__inner {
      text-align: center;
    }

    .why__stats {
      justify-items: center;
    }

    .metho__criteria {
      justify-content: center;
    }

    .how__steps {
      padding-inline: 0;
    }
  }

  /* ═══ Mobile : ajustements spécifiques ═════════════════════
     Calés sur la maquette mobile fournie par le client.
     ═════════════════════════════════════════════════════════ */
  @media (width < 48rem) {
    /* CTA du hero : libellé court en mobile. */
    .hero__cta-label--full  { display: none; }
    .hero__cta-label--short { display: inline; }

    /* « Comment ça marche ? » : titre recentré en x (par défaut il est
       aligné à gauche ; les étapes en dessous, elles, sont centrées). */
    .how .section__title {
      text-align: center;
    }

    /* « Pourquoi c'est utile ? » : titre centré (hérité du bloc empilé
       ci-dessus), mais le texte repasse à gauche (cf. maquette). */
    .why__text {
      text-align: left;
    }

    /* Les stats deviennent des cartes : carte blanche bordée, arrondie,
       contenu centré, sur une seule colonne pleine largeur. */
    .why__stats {
      grid-template-columns: 1fr;
      gap: var(--sp-md);
    }

    .why__stat {
      padding: var(--sp-md) var(--sp-lg);
      background: var(--c-bg);
      border: 1px solid var(--c-pink);
      border-radius: var(--radius-lg);
      text-align: center;
    }

    /* La description est centrée dans la carte : on lève la mesure bornée
       et sa marge auto pour qu'elle occupe la largeur de la carte. */
    .why__stat-desc {
      max-width: none;
    }
  }
}