/*
* RH-3 — Hero animé (home). Motion custom Lot 1 « Dynamisation ». Child theme versionné.
*
* Décision Etienne (retour sur preview) : coller au ressenti de la page teasing
* (angle, vitesse, fréquence), MAIS :
* 1. BALAYAGE : saumon PAR DÉFAUT, le panneau ROUGE est un balayage PILOTÉ PAR LE SCROLL
* UNIQUEMENT (aucune animation au chargement, aucune boucle temporelle). La diagonale
* reprend l'ANGLE du teasing (8deg) ; la « vitesse » est celle du scroll (scrubbing).
* Le panneau ne fait que passer devant le saumon EXISTANT du row (aucune couleur en dur).
* 2. MARK (logo 4 barres) : PULSATION CONTINUE façon teasing (`announcement-mark-sequence`,
* 2.4s infinie, délais échelonnés), SVG inliné par JS ; fallback logo visible.
*
* Principes (cohérents RH-1/RH-2) :
* - Rien n'est masqué / animé SANS `html.rh-js` (posé en si mouvement autorisé + IO).
* → sans JS / prefers-reduced-motion : saumon statique + mark visible, zéro balayage.
* - Empilement : panneau en z-index 0 (derrière), contenu du row en z-index 1 → la photo
* (colonne droite, opaque) masque le rouge à droite ; le rouge n'apparaît que dans la
* zone transparente de gauche = exactement le saumon visible.
* - Anti-CLS : panneau hors flux (absolute) ; swap à boîte conservée.
*/
:root {
/* Couleur — variable de palette du site (surchargée par le thème ; hex = fallback) */
--rh-hero-red: var(--wp--preset--color--palette-color-1, #f54e16); /* rouge de marque */
/* Balayage (scroll) — TUNABLES (réglage du ressenti avec Etienne en preview) */
--rh-hero-tilt: 8deg; /* angle de la diagonale (repris du teasing) */
/* Côte-à-côte (desktop) : la photo (moitié droite) masque le rouge au repos, donc le
* panneau peut rester proche du bord de la photo → le rouge entre dès les 1ers px. */
--rh-hero-reach: 60%; /* position au repos (↓ = rouge plus tôt ; trop bas = rouge visible au repos) */
--rh-hero-scroll-span: 0.5; /* fraction de la hauteur hero pour un balayage complet (↓ = plus rapide/tôt) */
/* Mark — repris du teasing */
--rh-hero-mark-dur: 2.4s;
--rh-hero-mark-ease: cubic-bezier(0.55, 0.08, 0.35, 1);
--rh-hero-mark-step: 0.14s; /* décalage entre les barres */
/* Titre hero — apparition lettre par lettre au chargement (extension hors périmètre RH-3) */
--rh-hero-char-dur: 0.5s;
--rh-hero-char-ease: ease;
--rh-hero-char-step: 0.045s; /* décalage entre les lettres */
}
/* Empilé (≤999.98px = breakpoint du site où la colonne passe en pleine largeur et la
* photo se place SOUS le contenu) : plus de photo pour masquer le rouge à droite → le
* panneau doit être TOTALEMENT hors-champ au repos, sinon un coin rouge apparaît (pas
* de saumon par défaut). D'où un `reach` bien plus grand ici. `span` réduit pour que le
* rouge entre quand même tôt dans le scroll (hero empilé plus haut). */
@media (max-width: 999.98px) {
:root {
--rh-hero-reach: 115%; /* juste hors-champ à droite au repos (marge ~50px sur mobile) → saumon net + rouge qui entre tôt */
--rh-hero-scroll-span: 0.4;
}
}
/* --- Balayage (piloté au scroll) -------------------------------------------- */
/* Row : position:relative (déjà le cas dans le DOM, forcé pour ne pas dépendre d'un
* état DB implicite → sert de bloc conteneur au clip ET à la photo absolue de droite)
* + `isolation:isolate` qui crée un CONTEXTE D'EMPILEMENT propre au row SANS changer
* les blocs conteneurs. Ainsi le clip peut passer en z-index négatif (sous les colonnes)
* tout en restant au-dessus du fond saumon du row.
* ⚠️ NE PAS positionner `.gspb_row__content` : cela deviendrait le bloc conteneur de la
* colonne droite (photo), qui perdrait son plein-cadre (régression : liseré à droite). */
html.rh-js .rh-hero-row {
position: relative;
isolation: isolate;
}
/* Le clip épouse le row et rogne le panneau incliné SANS toucher à l'overflow du row.
* z-index:-1 → sous les colonnes (contenu + photo, positionnées) mais au-dessus du fond
* saumon du row : le rouge n'apparaît que dans la zone transparente de gauche ; la photo
* opaque de droite le masque ; le texte du contenu reste lisible par-dessus. */
html.rh-js .rh-hero-sweep-clip {
position: absolute;
inset: 0;
overflow: hidden;
z-index: -1;
pointer-events: none;
}
/* Panneau rouge : position pilotée par --rh-hero-p (progression du scroll).
* p = 0 → hors-champ à droite (saumon : état PAR DÉFAUT, haut de page)
* p = 1 → ramené sur la zone (le rouge a balayé la colonne gauche)
* → balayage diagonal qui entre AU SCROLL et se retire quand on remonte (réversible).
* La photo opaque (colonne droite, z-index 1) masque le rouge à droite : il n'apparaît
* que dans la zone transparente de gauche = le saumon. */
html.rh-js .rh-hero-sweep {
position: absolute;
top: 50%;
left: 50%;
width: 160%;
height: 160%;
background: var(--rh-hero-red);
will-change: transform;
transform: translate(-50%, -50%)
translateX(calc((1 - var(--rh-hero-p, 0)) * var(--rh-hero-reach)))
rotate(var(--rh-hero-tilt));
}
/* Très grandes largeurs : le hero devient très allongé (ex. 3440×1000). À 8° d'inclinaison,
* un panneau haut de 160% laisse des triangles de saumon NON couverts en haut/bas pendant le
* balayage (le « coin » du bloc rouge). On le rend plus haut ICI SEULEMENT → couverture pleine
* hauteur. Isolé aux ≥2000px : les résolutions courantes gardent 160% (déjà validées, aucune
* régression). 300% couvre l'inclinaison jusqu'à ~7000px de large. */
@media (min-width: 2000px) {
html.rh-js .rh-hero-sweep { height: 300%; }
}
/* --- Mark (logo 4 barres) — pulsation continue façon teasing ---------------- */
/* Pré-masquage AVANT exécution du JS (anti-flash), par nom de fichier du média →
* locale-agnostique (parité FR/EN), sans id de bloc FR. Scopé à la home + contenu.
* FAILSAFE : si le JS ne prend JAMAIS la main (rh-hero.js 404/throw/minifié) alors
* que `rh-js` est posé, on révèle l'