/**
 * Bloc hero_typo — hero typographique plein écran, sans image
 *
 * Contenu : 1. Conteneur  2. Courbe de torréfaction (décor)  3. Textes  4. Indicateur de défilement
 *           5. Intro (masquage avant le premier rendu)  6. Responsive
 *
 * La courbe est la signature du site (cf. docs/02_DESIGN_SYSTEM.md) : SVG étiré
 * (preserveAspectRatio="none") dont le trait garde son épaisseur (vector-effect) ; les repères
 * sont en HTML pour que leurs libellés ne soient pas déformés.
 */

/* 1. Conteneur ------------------------------------------------------------- */
/* R7 — Alexandre, 10/10 : texte en haut, courbe dessous, sur un papier millimétré qui couvre tout
   le hero. La zone de la courbe prend la place restante (jamais sous le texte) avec une hauteur
   minimale : sur un écran bas, le hero s'allonge plutôt que de superposer texte et courbe. */
.hero-typo {
    position: relative; isolation: isolate; overflow: hidden;
    /* Le header est sticky (dans le flux) : le hero complète l'écran */
    /* R8 : hero raccourci (85 % de l'écran, marges et courbe resserrées) */
    min-height: calc(85svh - var(--header-h));
    display: grid; grid-template-rows: auto minmax(var(--hero-graph-min), 1fr);
    row-gap: var(--space-md);
    padding-block: var(--space-lg);
    --hero-graph-min: clamp(200px, 28vh, 320px);
}
/* Papier millimétré : rappelle la fiche de suivi d'un torréfacteur */
.hero-typo::before {
    content: ""; position: absolute; z-index: -2; inset: 0; pointer-events: none;
    background-image:
        linear-gradient(color-mix(in srgb, var(--color-text) 7%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--color-text) 7%, transparent) 1px, transparent 1px);
    background-size: 100% 96px, 10% 100%;
}

/* 2. Courbe de torréfaction ------------------------------------------------ */
/* Zone de la courbe : seconde rangée de la grille du hero, sous le texte (R7) */
/* Pas de cadre : ses filets doublaient les lignes du quadrillage du hero (R9) */
.hero-typo__graph { position: relative; z-index: -1; }
.hero-typo__curve { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hero-typo__line {
    fill: none; stroke: var(--color-primary); stroke-width: 2.5;
    stroke-linecap: round; vector-effect: non-scaling-stroke;
}
.hero-typo__marks { list-style: none; padding: 0; margin: 0; }
.hero-typo__marks li {
    /* max() : la pastille du repère au bord gauche (Charge, --x: 0%) reste entière (R14) */
    position: absolute; left: max(var(--x), 6px); top: var(--y);
    display: grid; line-height: 1.25;
    padding-left: 18px; transform: translate(-6px, -50%); white-space: nowrap;
}
/* R1 : terme du torréfacteur (mono) + sa traduction en étape de projet (italique) */
.hero-typo__term {
    font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--color-text-muted);
}
.hero-typo__gloss { font-family: var(--font-display); font-style: italic; font-size: var(--fs-caption); color: var(--color-text); }
/* Pastille sur la courbe */
.hero-typo__marks li::before {
    content: ""; position: absolute; left: 0; top: 50%; width: 11px; height: 11px; margin-top: -5.5px;
    border: 2px solid var(--color-primary); border-radius: 50%; background: var(--color-bg);
}
/* Chaque libellé se place du côté libre de la courbe (data-pos dans le HTML), sinon le trait le
   traverse. La pastille reste centrée sur le point de la courbe (5,5 px = demi-pastille). */
.hero-typo__marks li[data-pos="above"] { padding-bottom: var(--space-md); transform: translate(-5.5px, calc(-100% + 5.5px)); }
.hero-typo__marks li[data-pos="above"]::before { top: auto; bottom: 0; margin-top: 0; }
.hero-typo__marks li[data-pos="below"] { padding-top: var(--space-2xs); transform: translate(-5.5px, -5.5px); }
.hero-typo__marks li[data-pos="below"]::before { top: 0; margin-top: 0; }
.hero-typo__marks li[data-pos="above-left"] {
    padding: 0 18px var(--space-xs) 0; text-align: right;
    transform: translate(calc(-100% + 5.5px), calc(-100% + 5.5px));
}
.hero-typo__marks li[data-pos="above-left"]::before { left: auto; right: 0; top: auto; bottom: 0; margin-top: 0; }

/* 3. Textes ---------------------------------------------------------------- */
.hero-typo__inner {
    display: grid; gap: var(--space-md);
    grid-template-areas: "eyebrow" "title" "meta";
    align-content: end;
}
.hero-typo__eyebrow { grid-area: eyebrow; color: var(--color-primary); }
.hero-typo__title { grid-area: title; }
.hero-typo__title > span { display: block; } /* la ligne, pas les lettres découpées (R2) */
.hero-typo__title em { display: block; padding-left: 0.6em; } /* décalage façon composition de carte */
/* R2 : lettres découpées par hero-typo.js. Deux niveaux : __char (survol) contient __char-in
   (intro) — jamais deux animations sur le même élément. */
.hero-typo__char, .hero-typo__char-in { display: inline-block; }
.hero-typo__meta { grid-area: meta; display: grid; gap: var(--space-xs); max-width: 36rem; }
.hero-typo__baseline { font-family: var(--font-display); font-style: italic; }
.hero-typo__job { color: var(--color-text-muted); }

/* 4. Indicateur de défilement ---------------------------------------------- */
/* R7 : en bas à droite, dans la zone de la courbe (le « fond de la tasse »), aligné sur le conteneur */
.hero-typo__scroll {
    position: absolute; z-index: 1; bottom: calc(var(--space-lg) + var(--space-xs));
    right: calc(max(0px, (100% - var(--container-max)) / 2) + var(--gutter));
    display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 44px;
    font-family: var(--font-mono); font-size: var(--fs-caption); letter-spacing: 0.1em; text-transform: uppercase;
    text-decoration: none;
}
.hero-typo__scroll span { display: inline-block; transition: transform var(--duration-base) var(--ease-out); }
@media (hover: hover) {
    .hero-typo__scroll:hover span { transform: translateY(4px); }
}

/* 5. Intro ---------------------------------------------------------------- */
/* intro-pending est posée par le script du <head> (jamais par le CSS seul) et retirée par
   js/blocs/hero-typo.js, par la pré-intro (intro-logo.js) à sa fin, ou à 3 s par le garde-fou
   du <head> quand la pré-intro ne prend pas la main. */
.intro-pending .hero-typo__inner,
.intro-pending .hero-typo__scroll,
.intro-pending .hero-typo__curve,
.intro-pending .hero-typo__marks,
.intro-pending .site-header .logo-ap { visibility: hidden; }

/* 6. Responsive ------------------------------------------------------------ */
@media (max-width: 768px) {
    .hero-typo { --hero-graph-min: 200px; padding-top: var(--space-lg); }
    /* Lot 1 mobile : l'indicateur quitte la zone de la courbe et passe dans le flux, en 3e rangée
       sous la courbe. En position absolue, il touchait le creux du tracé à 360-390 px (la courbe
       occupe toute la largeur et descend jusqu'à 90 % de sa zone). */
    .hero-typo { grid-template-rows: auto minmax(var(--hero-graph-min), 1fr) auto; row-gap: var(--space-sm); }
    .hero-typo__scroll {
        position: static; justify-self: end;
        margin-right: var(--gutter);
    }
    /* Repères intermédiaires masqués : trop serrés à cette largeur (vérifié à 768 px : la courbe,
       plus raide, traverse le libellé de « Point bas ») */
    .hero-typo__marks li:nth-child(2), .hero-typo__marks li:nth-child(3) { display: none; }
}