/*
 * Copyright (c) 2025-2026.
 * kwargs SRL -- rylm, Bruxelles
 * Tous droits réservés.
 */

/* ── RYLM : HÉRO DE LA PAGE D'ACCUEIL (charte ILMOS) ──────────────── */
/*  Reprise du panneau gauche de la maquette client (écran de          */
/*  connexion) : panneau espresso, trame diagonale ambre, emblème en    */
/*  filigrane, composition en trois temps (marque / promesse / couches).*/
/*  Voir docs/retour/ANALYSE-MAQUETTE.md.                               */
/* ─────────────────────────────────────────────────────────────────── */

/* Le socle coiffe le contenu d'un <main class="section"> (padding haut) : */
/* on le neutralise pour que le panneau démarre sous la navbar. */
main:has(.rylm-hero) { padding-top: 0; }

/* ── Navbar posée sur le héro ────────────────────────────────────── */
/*  Hors du flux (et non « fixed ») : elle laisse le héro occuper toute  */
/*  la hauteur, puis défile avec la page. Transparente, le fond et la    */
/*  trame du héro passent au travers.                                    */
.rylm-navbar-hero {
    position: absolute;
    inset-inline: 0;
    top: 0;
    z-index: var(--ks-z-float);
    background: transparent;
    /* Encre claire : .navbar-icon se colore sur --bs-body-color. */
    --bs-body-color: var(--ks-creme);
    --bs-emphasis-color: var(--ks-creme);
}
/* Le lien d'évitement du socle est hors flux tant qu'il n'a pas le focus, */
/* puis y revient : sans cela la navbar décrochée le recouvrirait. On le */
/* pose au-dessus, sur un fond plein pour rester lisible. */
body:has(.rylm-hero) a.visually-hidden-focusable:focus {
    position: relative;
    z-index: var(--ks-z-top);
    display: block;
    padding: 0.5rem 0;
    text-align: center;
    background: var(--ks-espresso);
    color: var(--ks-creme);
}

.rylm-navbar-hero .rylm-wordmark { color: var(--ks-creme); }
.rylm-navbar-hero .rylm-byline { color: var(--ks-ambre); }
/* Le survol du socle vire à --ks-primary (espresso), invisible ici. */
.rylm-navbar-hero .navbar-icon:hover,
.rylm-navbar-hero .navbar-icon:focus-visible { color: var(--ks-ambre); }

.rylm-hero {
    position: relative;
    overflow: hidden;
    display: flex;
    background: var(--ks-espresso);
    color: var(--ks-creme);
    /* Plein écran. La navbar étant hors du flux, le héro passe dessous : */
    /* le retrait haut lui réserve sa place. dvh contre les barres iOS.   */
    padding: 5.5rem 0 clamp(30px, 5vw, 54px);
    min-height: 100vh;
    min-height: 100dvh;
}

/* Trame diagonale de la maquette, purement décorative. */
.rylm-hero__trame {
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(
        45deg,
        rgba(219, 135, 0, 0.05) 0 1px,
        transparent 1px 15px
    );
}

/* Emblème débordant en bas à droite, très effacé. */
.rylm-hero__filigrane {
    position: absolute;
    right: clamp(-90px, -6vw, -40px);
    bottom: -70px;
    width: clamp(240px, 34vw, 460px);
    opacity: 0.10;
    pointer-events: none;
}

/* Les trois bandes de la maquette, sur toute la hauteur : le lockup en tête */
/* (porté par la navbar transparente), la promesse au centre, les couches au */
/* pied. Le centrage passe par des marges automatiques sur la promesse, ce */
/* qui pose les couches en bas sans les décrocher du flux. */
.rylm-hero__inner {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Promesse. */
.rylm-hero__pitch { max-width: 34rem; margin-block: auto; }
.rylm-hero__eyebrow {
    font-family: var(--ks-font-mono);
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--ks-ambre);
    margin: 0 0 20px;
}
.rylm-hero__title {
    font-family: var(--ks-font-display);
    font-size: clamp(1.95rem, 5vw, 2.75rem);
    line-height: 1.12;
    font-weight: 600;
    color: var(--ks-creme);
    text-wrap: balance;
    margin: 0 0 18px;
}
.rylm-hero__lede {
    font-size: clamp(0.94rem, 1.5vw, 1rem);
    line-height: 1.6;
    /* 62% de crème sur espresso = 6,28:1, au-dessus du seuil AA (4,5:1). */
    color: rgba(247, 236, 214, 0.62);
    margin: 0;
}

/* Les trois couches du modèle (Connaissance / Compétence / Trait). */
.rylm-hero__couches {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 28px;
    margin: 0;
    font-family: var(--ks-font-mono);
    font-size: 10.5px;
    letter-spacing: 1px;
    text-transform: uppercase;
    /* La maquette pose 40% (3,40:1, sous le seuil AA) : relevé à 60% */
    /* pour tenir le 4,5:1 exigé, la nuance reste discrète. */
    color: rgba(247, 236, 214, 0.6);
}