/*
 * page-hero.css — Hero photo de fond pour les pages publiques principales
 * ========================================================================
 * Utilisé par le partial Twig templates/_page_hero.html.twig.
 *
 * Ce fichier est chargé via base.html.twig pour toutes les pages.
 * Les styles sont préfixés .page-hero__ pour éviter toute collision.
 *
 * DESIGN SYSTEM :
 *   - Pas d'ombre portée, pas de border-radius (style Street)
 *   - Police d'affichage : var(--display) = Archivo Black
 *   - Police corps     : var(--mono)    = JetBrains Mono
 *   - Hauteur réelle  : 52vh desktop / 40vh tablette (<=767px) / 36vh mobile (<=480px)
 *
 * TECHNIQUE :
 *   - L'image de fond est une <img> en position absolute + object-fit:cover
 *     plutôt qu'un background-image CSS. Avantages :
 *       a) L'attribut `loading="lazy"` est respecté nativement.
 *       b) `fetchpriority="high"` peut être ajouté sur le hero above-the-fold.
 *       c) L'alt="" + aria-hidden évite la lecture par les lecteurs d'écran.
 *   - Le voile sombre (.page-hero__overlay) améliore le contraste du texte.
 *   - Le contenu textuel est en position relative, au-dessus du voile.
 *
 * FULL-BLEED :
 *   Le hero sort du padding .app-content (28px 32px) via des marges négatives.
 *   C'est la technique standard pour un élément "pleine largeur" dans un
 *   conteneur paddé : margin-left: -32px; margin-right: -32px (desktop).
 *   Sur mobile, .app-content a padding: 16px -> ajustement via media query (<= 767px).
 *   overflow:hidden sur .page-hero est NÉCESSAIRE : sans lui, les marges négatives
 *   feraient dépasser l'image hors du conteneur et créeraient un scroll horizontal.
 *
 * BREAKPOINTS :
 *   <= 767px : tablette  → height 40vh, margins -16px, padding contenu 16px
 *   <= 480px : mobile    → height 36vh (contenu prioritaire sur écran étroit)
 */

/* ── Conteneur principal du hero ─────────────────────────────────────────── */

.page-hero {
    /*
     * Position relative : contexte pour l'image et le voile absolus.
     * overflow:hidden : coupe l'image proprement aux bords du hero.
     */
    position: relative;
    overflow: hidden;

    /* Colonne flex, contenu aligné en bas : le hero peut GRANDIR pour contenir
       un titre long (plus de troncature de la fin du titre). */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    /*
     * Hauteur du hero : MINIMUM 52vh (mi-écran) mais le hero grandit si le
     * titre déborde -> plus de troncature. max(52vh, 280px) garantit aussi un
     * plancher de 280px sur les petits écrans.
     */
    min-height: max(52vh, 280px);

    /*
     * Full-bleed VIEWPORT : le hero prend TOUTE la largeur de la fenêtre, quelle que
     * soit la largeur du conteneur. .app-content est centré et plafonné à 1440px : sur
     * un écran plus large, on voyait donc des marges latérales. On sort du conteneur
     * avec la technique full-bleed : largeur 100vw + marges négatives calculées
     * (calc(50% - 50vw) ramène le bord du hero au bord de la fenêtre).
     * margin-top : compense le padding-top de .app-content pour coller en haut.
     */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-top: -28px;
    margin-bottom: 0;

    /*
     * Pas de border-radius (règle Street).
     * Pas d'ombre portée (règle Street).
     */
}

/* ── Image de fond ───────────────────────────────────────────────────────── */

.page-hero__img {
    /*
     * Position absolute + dimensions 100% : couvre tout le conteneur.
     * object-fit:cover : recadre l'image sans la déformer (comme background-size:cover).
     * object-position:center : centre le recadrage (ajustable par page si besoin).
     */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;

    /*
     * Légère désaturation pour homogénéiser les images et mieux faire ressortir
     * le texte blanc. La valeur 0.9 conserve les couleurs tout en atténuant
     * les images très saturées.
     */
    filter: brightness(0.85);

    /* Pas d'affichage en ligne → pas d'espace vertical fantôme */
    display: block;
}

/* ── Voile sombre (overlay) ──────────────────────────────────────────────── */

.page-hero__overlay {
    /*
     * Couche sombre semi-transparente au-dessus de l'image.
     * Améliore le contraste du texte blanc sur photo.
     * gradient de bas en haut : plus sombre en bas (où est le texte)
     * pour un résultat plus naturel qu'un fond uni.
     */
    position: absolute;
    inset: 0; /* raccourci pour top:0; right:0; bottom:0; left:0 */
    background: linear-gradient(
        to top,
        rgba(13, 13, 13, 0.72) 0%,     /* --ink à 72% en bas */
        rgba(13, 13, 13, 0.30) 60%,    /* transition en milieu */
        rgba(13, 13, 13, 0.18) 100%    /* plus léger en haut */
    );
}

/* ── Zone de contenu textuel ─────────────────────────────────────────────── */

.page-hero__content {
    /*
     * Position relative : pour être au-dessus du voile (z-index natif
     * du stacking context — pas besoin de z-index explicite si le voile
     * est positionné avant dans le DOM).
     * On le positionne en absolu en bas-gauche du hero pour aligner
     * le texte avec le bas de la photo comme les grands journaux.
     */
    /* Dans le flux (relative) au lieu d'absolute : le hero grandit pour contenir
       le contenu -> la fin du titre n'est plus coupée. L'alignement en bas est
       assuré par justify-content:flex-end sur .page-hero. */
    position: relative;
    width: 100%;

    /*
     * Padding interne : 24px en bas, aligné avec le padding horizontal
     * de .app-content (32px) pour que le texte s'aligne au contenu en dessous.
     * On utilise 32px car on a sorti le hero du padding via les marges négatives.
     */
    padding: 0 32px 32px;
}

/* ── Titre du hero ───────────────────────────────────────────────────────── */

.page-hero__title {
    /*
     * Archivo Black (var(--display)) en grand format.
     * clamp() : fluide de 48px (mobile 375px) à 96px (grand écran).
     * line-height 0.88 : serré pour l'effet affiche (identique aux autres
     * titres géants de l'app comme .opp-title, .fi-title).
     * text-transform uppercase : cohérent avec le design system.
     * color blanc : lisible sur le voile sombre.
     * margin 0 : on gère l'espacement via padding du conteneur parent.
     */
    font-family: var(--display, 'Archivo Black', sans-serif);
    font-size: clamp(48px, 8vw, 96px);
    line-height: 0.88;
    text-transform: uppercase;
    color: #ffffff;
    margin: 0 0 14px;
    letter-spacing: -0.02em;
    /* Autorise la coupure d'un mot trop long pour la largeur (sinon, sur mobile,
       un titre mot-unique comme "CONFIDENTIALITE" déborde et se fait couper par
       overflow:hidden du hero). Le wrapping fin (.tr-word) est géré en @media mobile. */
    overflow-wrap: break-word;
}

/* ── Sous-titre du hero ──────────────────────────────────────────────────── */

.page-hero__subtitle {
    /*
     * JetBrains Mono (var(--mono)) : cohérent avec les eyebrows et labels
     * du design system (opp-eyebrow, fi-eyebrow, etc.).
     * Taille 13px, couleur blanche à 80% : discret mais lisible.
     * max-width : évite des lignes trop longues sur grand écran (60-70 car.).
     */
    font-family: var(--mono, 'JetBrains Mono', monospace);
    font-size: 13px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.82);
    margin: 0;
    max-width: 640px;
    letter-spacing: 0.02em;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

/*
 * Tablette (767px) : hauteur réduite à 40vh, padding resserré.
 * Correspond au breakpoint de .app-content (padding: 16px).
 */
@media (max-width: 767px) {
    .page-hero {
        min-height: max(40vh, 240px); /* min, pas fixe -> pas de troncature */

        /* Le full-bleed (width:100vw + marges calc) couvre déjà toutes les largeurs ;
           on ajuste seulement la compensation du padding-top (16px sur mobile). */
        margin-top: -16px;
    }

    .page-hero__content {
        padding: 0 16px 24px;
    }

    .page-hero__title {
        font-size: clamp(36px, 10vw, 60px);
        margin-bottom: 10px;
    }

    .page-hero__subtitle {
        font-size: 12px;
    }
}

/*
 * Mobile étroit (480px) : le hero devient plus court (36vh) pour laisser
 * plus de place au contenu sur les petits téléphones.
 */
@media (max-width: 480px) {
    .page-hero {
        min-height: max(36vh, 200px); /* min, pas fixe -> pas de troncature */
    }
}

/* ── Mot accentué dans le titre (couleur accent orange) ─────────────────── */

/*
 * .page-hero__accent : conservé pour le markup title_html existant (ex. Formations),
 * mais SANS couleur orange (demande Gaëlle : pas d'orange sur les titres hors home).
 * color:inherit -> le mot adopte la couleur du titre (blanc), comme le reste.
 */
.page-hero__accent {
    color: inherit;
}

/* ── Classe utilitaire CTA sous le hero ──────────────────────────────────── */

/*
 * .hero-action-bar : barre d'action positionnée sous le hero photo.
 * Alignement à droite (flex + justify-content:flex-end) pour placer le CTA
 * en continuité visuelle avec le bord droit de la photo.
 * Utilisé sur les pages Ressourcerie, Forum et Blog (3 CTAs).
 * padding-top 16px : espace de respiration entre le hero et le bouton.
 */
.hero-action-bar {
    display: flex;
    justify-content: flex-end;
    padding: 16px 0 0;
}

/* ── Accessibilité : prefers-reduced-motion ──────────────────────────────── */

/*
 * L'image de fond ne bouge pas (pas de parallaxe CSS ici),
 * donc ce bloc est une sécurité pour d'éventuelles transitions futures.
 * Cohérent avec la règle de title-reveal.js qui sort immédiatement
 * si prefers-reduced-motion est activé.
 */
@media (prefers-reduced-motion: reduce) {
    .page-hero__img {
        /* Désactiver toute transition éventuelle sur l'image */
        transition: none !important;
    }
}