/* =========================================================================
   Bloc Hero — Le Gaucho
   =========================================================================

   Structure seulement : plein cadre, superposition, position du texte, voile,
   trames. **Aucune couleur de marque, aucune police, aucune échelle
   typographique** — c'est le thème qui habille.

   Un bloc réutilisable qui dépend du CSS de son projet n'est pas réutilisable :
   il faudrait le forker au site suivant, ce qu'un set de blocs cherche
   précisément à éviter.

   Les points d'accroche laissés au thème :

     .lg-hero-eyebrow · .lg-hero-title · .lg-hero-lead · .lg-hero-btn
     --lg-hero-tint    couleur de la trame « teinte », neutre par défaut

   Concrete charge ce fichier de lui-même : il s'appelle `view.css` et vit dans
   le dossier du bloc.
   ========================================================================= */

.lg-hero {
    --lg-hero-veil: 0.55;
    /* Neutre par défaut. Le thème la redéfinit avec la couleur de la marque :
       c'est la seule chose que ce bloc accepte de l'extérieur. */
    --lg-hero-tint: 120, 120, 120;

    position: relative;
    display: flex;
    overflow: hidden;
    isolation: isolate;
    background-color: #1c1c1c;
    color: #fff;
}

/* -------------------------------------------------------------------------
   Hauteur
   ------------------------------------------------------------------------- */

.lg-hero--h-standard {
    min-height: clamp(22rem, 48vh, 32rem);
}

.lg-hero--h-full {
    min-height: clamp(30rem, 86vh, 56rem);
}

/* -------------------------------------------------------------------------
   Couche 1 — l'image
   ------------------------------------------------------------------------- */

.lg-hero-media {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.lg-hero-media img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    /* `object-position` est posé en style en ligne par la vue : c'est une
       donnée par bloc, elle n'a pas sa place dans une feuille partagée. */
}

/* -------------------------------------------------------------------------
   Couche 2 — la trame
   -------------------------------------------------------------------------
   Toutes en dégradés CSS : aucun fichier, aucune requête supplémentaire.
   Toutes discrètes — l'écart entre deux trames reste inférieur à l'écart
   entre trame et absence de trame.
   ------------------------------------------------------------------------- */

.lg-hero-pattern {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.lg-hero--pattern-none .lg-hero-pattern {
    display: none;
}

/* -------------------------------------------------------------------------
   Les trames sont sombres, pas claires
   -------------------------------------------------------------------------
   La première version les dessinait en blanc à faible opacité. Sur un hero
   voilé, un quadrillage blanc ne se lit pas comme une matière : il se lit
   comme un voile sale, ou comme une moustiquaire posée devant la photo.

   > **Une trame claire ajoute de la lumière là où le voile vient d'en
   > retirer.** Les deux couches se contredisent, et le résultat paraît
   > délavé sans qu'on sache dire pourquoi.

   En encre, la même trame devient une trame d'imprimerie : elle creuse au
   lieu d'ajouter, dans le sens du voile. Les opacités sont plus fortes —
   le noir sur une image déjà assombrie se voit moins que le blanc.

   Pour les inverser un jour, il suffit de repasser les `rgba(0,0,0,…)` en
   `rgba(255,255,255,…)` : la structure ne change pas.
   ------------------------------------------------------------------------- */

/* Grain — la plus utile des quatre : c'est elle qui fait qu'une série de
   clichés d'époques et de qualités différentes se lit comme une collection.
   Le motif est un SVG en ligne, donc sans requête. */
.lg-hero--pattern-grain .lg-hero-pattern {
    opacity: 0.30;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
    background-repeat: repeat;
}

/* -------------------------------------------------------------------------
   Trames réglables — point et carré
   -------------------------------------------------------------------------
   Les trames « colonnes » et « grille » sont parties : c'étaient des traits,
   et **un trait posé sur une photo se lit comme une rayure**, c'est-à-dire
   comme un défaut d'impression plutôt que comme une matière.

   Restent les deux trames d'imprimerie au sens propre, réglées par deux
   grandeurs indépendantes :

     --lg-hero-dot     rayon du point
     --lg-hero-square  côté du carré
     --lg-hero-gap     pas de la trame, donc la densité

   > **Deux variables orthogonales remplacent une douzaine de classes
   > nommées.** Neuf combinaisons tiennent en six déclarations ; les mêmes
   > neuf trames figées feraient neuf blocs à écrire et à relire.
   ------------------------------------------------------------------------- */

.lg-hero {
    --lg-hero-dot: 1.6px;
    --lg-hero-square: 3px;
    --lg-hero-gap: 16px;
}

.lg-hero--scale-fine { --lg-hero-dot: 0.9px; --lg-hero-square: 1.5px; }
.lg-hero--scale-medium { --lg-hero-dot: 1.6px; --lg-hero-square: 3px; }
.lg-hero--scale-large { --lg-hero-dot: 2.8px; --lg-hero-square: 5px; }

.lg-hero--density-light { --lg-hero-gap: 28px; }
.lg-hero--density-medium { --lg-hero-gap: 16px; }
.lg-hero--density-strong { --lg-hero-gap: 9px; }

/* Points — trame de similigravure. Le dégradé radial dessine un disque net :
   le second point d'arrêt est décalé d'un demi-pixel, juste assez pour
   lisser le bord sans le flouter. */
.lg-hero--pattern-dots .lg-hero-pattern {
    opacity: 0.28;
    background-image: radial-gradient(
        circle,
        rgba(0, 0, 0, 1) 0 var(--lg-hero-dot),
        transparent calc(var(--lg-hero-dot) + 0.5px)
    );
    background-size: var(--lg-hero-gap) var(--lg-hero-gap);
}

/*
   Carrés — deux masques croisés dont on garde l'**intersection**.

   Deux dégradés superposés en `background-image` donnent leur *union*, donc
   une grille de traits. Il faut leur intersection, et seul le masque sait la
   calculer : `mask-composite: intersect`.

   Le repli, écrit avant, est la trame de points — dégradation choisie plutôt
   que subie : un navigateur qui ignore `mask-composite` afficherait sinon
   exactement la grille de traits qu'on vient de retirer.
*/
.lg-hero--pattern-squares .lg-hero-pattern {
    opacity: 0.26;
    background-image: radial-gradient(
        circle,
        rgba(0, 0, 0, 1) 0 var(--lg-hero-dot),
        transparent calc(var(--lg-hero-dot) + 0.5px)
    );
    background-size: var(--lg-hero-gap) var(--lg-hero-gap);
}

@supports (mask-composite: intersect) {
    .lg-hero--pattern-squares .lg-hero-pattern {
        background-image: none;
        background-color: rgba(0, 0, 0, 1);
        mask-image:
            repeating-linear-gradient(90deg, #000 0 var(--lg-hero-square), transparent var(--lg-hero-square) var(--lg-hero-gap)),
            repeating-linear-gradient(0deg, #000 0 var(--lg-hero-square), transparent var(--lg-hero-square) var(--lg-hero-gap));
        mask-composite: intersect;
    }
}

/* Teinte — la seule qui emprunte une couleur au projet. À manier avec
   précaution : c'est ce qui salit une photo si l'on force la dose. */
.lg-hero--pattern-tint .lg-hero-pattern {
    opacity: 0.28;
    background-color: rgb(var(--lg-hero-tint));
    mix-blend-mode: multiply;
}

/* -------------------------------------------------------------------------
   Couche 3 — le voile de lisibilité
   -------------------------------------------------------------------------
   Il n'est pas décoratif : il garantit que le titre reste lisible sur
   n'importe quelle photo. D'où sa place **au-dessus** de la trame.

   Neutre, jamais coloré : un voile teinté verdit un lac, kakise un ciel de
   fin de journée et éteint une façade de pierre blonde. La palette habille
   l'interface, les photos gardent leurs couleurs.

   Sa **direction n'est pas réglable** : elle suit la position du texte. Un
   dégradé montant du bas sous un texte placé au milieu est exactement le
   genre de réglage qu'on laisse par inadvertance.
   ------------------------------------------------------------------------- */

.lg-hero-veil {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}

.lg-hero--veil-none { --lg-hero-veil: 0; }
.lg-hero--veil-light { --lg-hero-veil: 0.38; }
.lg-hero--veil-medium { --lg-hero-veil: 0.58; }
.lg-hero--veil-dense { --lg-hero-veil: 0.78; }

.lg-hero--veil-none .lg-hero-veil {
    display: none;
}

/* Texte en bas → le voile monte du bas. */
.lg-hero--pos-bottom .lg-hero-veil {
    background: linear-gradient(
        to top,
        rgba(18, 18, 18, var(--lg-hero-veil)) 0%,
        rgba(18, 18, 18, calc(var(--lg-hero-veil) * 0.45)) 45%,
        rgba(18, 18, 18, calc(var(--lg-hero-veil) * 0.12)) 100%
    );
}

/* Texte à mi-hauteur, à gauche → le voile vient de la gauche. */
.lg-hero--pos-middle .lg-hero-veil {
    background: linear-gradient(
        to right,
        rgba(18, 18, 18, var(--lg-hero-veil)) 0%,
        rgba(18, 18, 18, calc(var(--lg-hero-veil) * 0.5)) 50%,
        rgba(18, 18, 18, calc(var(--lg-hero-veil) * 0.15)) 100%
    );
}

/* Texte centré → un voile directionnel laisserait un côté illisible. */
.lg-hero--pos-center .lg-hero-veil,
.lg-hero--veil-uniform .lg-hero-veil {
    background: rgba(18, 18, 18, calc(var(--lg-hero-veil) * 0.8));
}

/* -------------------------------------------------------------------------
   Couche 4 — le texte
   ------------------------------------------------------------------------- */

.lg-hero-inner {
    position: relative;
    z-index: 3;
    width: 100%;
    display: flex;
    padding: 6rem 0 3rem;
}

.lg-hero--pos-bottom .lg-hero-inner { align-items: flex-end; }
.lg-hero--pos-middle .lg-hero-inner { align-items: center; }

.lg-hero--pos-center .lg-hero-inner {
    align-items: center;
    justify-content: center;
    text-align: center;
}

.lg-hero-content {
    max-width: 46rem;
}

.lg-hero--pos-center .lg-hero-content {
    margin-left: auto;
    margin-right: auto;
}

.lg-hero-title {
    margin: 0 0 0.5em;
}

.lg-hero-lead {
    margin: 0 0 1.5rem;
}

.lg-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.lg-hero--pos-center .lg-hero-actions {
    justify-content: center;
}

/* -------------------------------------------------------------------------
   Invite à défiler
   ------------------------------------------------------------------------- */

.lg-hero-scroll {
    position: absolute;
    left: 50%;
    bottom: 1.75rem;
    z-index: 3;
    transform: translateX(-50%);
    width: 1.6rem;
    height: 2.6rem;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 100rem;
}

.lg-hero-scroll::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 0.45rem;
    width: 3px;
    height: 0.5rem;
    margin-left: -1.5px;
    border-radius: 2px;
    background: #fff;
    animation: lg-hero-scroll-hint 1.8s ease-in-out infinite;
}

@keyframes lg-hero-scroll-hint {
    0%, 100% { transform: translateY(0); opacity: 1; }
    60% { transform: translateY(0.7rem); opacity: 0; }
}

@media (max-width: 767.98px) {
    .lg-hero-scroll { display: none; }
}

/* Un visiteur qui a demandé moins de mouvement le fait souvent pour une
   raison médicale. On ne ralentit pas : on supprime. */
@media (prefers-reduced-motion: reduce) {
    .lg-hero-scroll::after { animation: none; }
}

/* -------------------------------------------------------------------------
   Mode édition de Concrete
   -------------------------------------------------------------------------
   Un hero pleine hauteur en édition oblige à faire défiler pour atteindre le
   bloc suivant. On le raccourcit : la mise en page se juge en aperçu, pas
   dans l'éditeur.
   ------------------------------------------------------------------------- */

html.ccm-edit-mode .lg-hero--h-full {
    min-height: 26rem;
}