/* * RH-11 — Diaporama de l'image droite du hero (home). Motion custom Lot 1 « Dynamisation ». * Child theme versionné. Binôme JS : assets/js/rh-hero-slideshow.js. Greenshift/DB NON modifiés. * * Cible : la COLONNE DROITE du hero (photo du bâtiment). Retour cliente = la transformer en * diaporama (plusieurs images en fondu). Les images sont du CONTENU (médiathèque/DB), jamais * versionnées : le mécanisme détecte les blocs image POSÉS dans la colonne droite (convention * documentée dans docs/journal.md) et les fait défiler — progressive enhancement. * * NON-INTERFÉRENCE RH-3 : on ne touche QUE la colonne droite. Ses slides sont opaques (object-fit * cover) → ils masquent le balayage rouge du row EXACTEMENT comme le faisait la photo de fond * (cf. rh-hero.css : le rouge n'apparaît que dans la zone transparente de gauche). Le balayage, * le mark et le titre (colonne gauche + row) ne sont pas modifiés ni ciblés ici. * * DÉGRADATION (réutilise le drapeau maison `html.rh-js`, posé en par functions.php si * mouvement autorisé + IntersectionObserver) : * - sans JS / prefers-reduced-motion : le JS ne construit rien → seule la 1re image reste * visible (`figure:first-of-type`), statique, propre. Pas d'autoplay. * - ≥2 images + rh-js : le JS pose `.rh-hero-slideshow` → crossfade autoplay (voir plus bas). * ZÉRO CLS : slides en position:absolute dans la colonne, qui garde ses dimensions actuelles * (desktop : colonne absolute plein-cadre ; mobile : min-height baked par Greenshift). */ :root { /* --- TUNABLES (réglage du ressenti avec Etienne en preview) --- */ --rh-slideshow-interval: 5000ms; /* durée d'affichage par image (autoplay) — TUNABLE */ --rh-slideshow-fade: 900ms; /* durée du fondu (crossfade) — TUNABLE */ --rh-slideshow-object-position: 50% 50%; /* cadrage des photos en cover — TUNABLE */ /* Points (dots) — indicateurs discrets, non intrusifs */ --rh-slideshow-dot-size: 8px; --rh-slideshow-dot-gap: 10px; --rh-slideshow-dot-color: rgba(255, 255, 255, 0.55); --rh-slideshow-dot-color-active: #ffffff; } /* ============================================================================ * SIGNATURE de la colonne diaporama (locale-agnostique, parité FR/EN, sans id de bloc). * = la colonne DIRECTE du hero qui porte des images de contenu MAIS pas le titre → exclut * la colonne gauche (texte + logo +

). Le cœur du sélecteur reprend HERO_SELECTOR * (rh-hero.js) / l'exclusion RH-1 (rh-reveal.js) — GARDER SYNCHRO. * ⚠️ SCOPE v1 = `body.home` : RH-6 a étendu le hero aux pages internes, mais l'extension du * diaporama y est une DÉCISION SÉPARÉE (hors v1). Le préfixe `body.home` borne strictement * à la home ; le gate `body.home` du JS (rh-hero-slideshow.js) est le pendant côté script. * La colonne droite ACTUELLE (vide, photo en background-image) n'a pas de
→ ne * matche pas → aucun effet, la photo de fond reste (ZÉRO régression tant qu'aucune image * n'est posée). Elle ne matchera qu'une fois ≥1 bloc image ajouté dans la colonne. * ==========================================================================*/ /* Scène du diaporama. */ body.home main .entry-content > .gspb_row.alignfull:first-child > .gspb_row__content > [class*="gspb_row__col"]:has(figure img):not(:has(:is(h1, h2, h3, h4, .gspb_heading))) { overflow: hidden; } /* Mobile (<1000px) : Greenshift repasse la colonne en `position:static` PAR ID (spécificité * haute) → il faut la re-positionner pour ancrer les slides absolus. `!important` justifié * (bat un CSS généré par id) et scopé mobile UNIQUEMENT ; en desktop la colonne est déjà * `position:absolute` (photo plein-cadre à droite) → on n'y touche pas, sinon régression layout. */ @media (max-width: 999.98px) { body.home main .entry-content > .gspb_row.alignfull:first-child > .gspb_row__content > [class*="gspb_row__col"]:has(figure img):not(:has(:is(h1, h2, h3, h4, .gspb_heading))) { position: relative !important; } } /* Slides empilés, plein cadre, masqués ; la 1re est visible (fallback sans JS / reduced-motion * + anti-flash avant exécution du JS). */ body.home main .entry-content > .gspb_row.alignfull:first-child > .gspb_row__content > [class*="gspb_row__col"]:has(figure img):not(:has(:is(h1, h2, h3, h4, .gspb_heading))) figure { position: absolute; inset: 0; margin: 0; opacity: 0; } body.home main .entry-content > .gspb_row.alignfull:first-child > .gspb_row__content > [class*="gspb_row__col"]:has(figure img):not(:has(:is(h1, h2, h3, h4, .gspb_heading))) figure:first-of-type { opacity: 1; } body.home main .entry-content > .gspb_row.alignfull:first-child > .gspb_row__content > [class*="gspb_row__col"]:has(figure img):not(:has(:is(h1, h2, h3, h4, .gspb_heading))) figure img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--rh-slideshow-object-position); } /* --- État piloté par le JS : la classe `.rh-hero-slideshow` est posée sur la colonne * UNIQUEMENT s'il y a ≥2 images. `…:has(…).rh-hero-slideshow figure` a une classe de PLUS * (donc spécificité STRICTEMENT supérieure) que le fallback `…figure` de base, mais elle est * de spécificité ÉGALE à `…figure:first-of-type` : la victoire tient à l'ORDRE SOURCE (ces * règles sont plus bas dans le fichier). → le JS reprend proprement la main (aucune image * « collée » visible en plus de la slide active). NE PAS remonter ce bloc au-dessus du fallback. --- */ body.home main .entry-content > .gspb_row.alignfull:first-child > .gspb_row__content > [class*="gspb_row__col"]:has(figure img):not(:has(:is(h1, h2, h3, h4, .gspb_heading))).rh-hero-slideshow figure { opacity: 0; transition: opacity var(--rh-slideshow-fade) ease; } body.home main .entry-content > .gspb_row.alignfull:first-child > .gspb_row__content > [class*="gspb_row__col"]:has(figure img):not(:has(:is(h1, h2, h3, h4, .gspb_heading))).rh-hero-slideshow figure.is-active { opacity: 1; } /* --- Points de navigation — discrets, en bas au centre de la colonne (créés par le JS). --- */ .rh-hero-slideshow .rh-hero-slideshow-dots { position: absolute; left: 0; right: 0; bottom: 18px; z-index: 2; display: flex; justify-content: center; gap: var(--rh-slideshow-dot-gap); pointer-events: none; /* seuls les boutons captent le clic */ } .rh-hero-slideshow .rh-hero-slideshow-dot { pointer-events: auto; width: var(--rh-slideshow-dot-size); height: var(--rh-slideshow-dot-size); padding: 0; border: 0; border-radius: 50%; background: var(--rh-slideshow-dot-color); cursor: pointer; transition: background var(--rh-slideshow-fade) ease, transform var(--rh-slideshow-fade) ease; } .rh-hero-slideshow .rh-hero-slideshow-dot.is-active { background: var(--rh-slideshow-dot-color-active); transform: scale(1.25); } .rh-hero-slideshow .rh-hero-slideshow-dot:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } /* --- prefers-reduced-motion : défense en profondeur (rh-js n'est de toute façon pas posé * dans ce cas → le JS ne tourne pas) → 1re image fixe, aucun fondu, aucun point. --- */ @media (prefers-reduced-motion: reduce) { body.home main .entry-content > .gspb_row.alignfull:first-child > .gspb_row__content > [class*="gspb_row__col"]:has(figure img):not(:has(:is(h1, h2, h3, h4, .gspb_heading))) figure { transition: none !important; } body.home main .entry-content > .gspb_row.alignfull:first-child > .gspb_row__content > [class*="gspb_row__col"]:has(figure img):not(:has(:is(h1, h2, h3, h4, .gspb_heading))) figure:first-of-type { opacity: 1 !important; } .rh-hero-slideshow .rh-hero-slideshow-dots { display: none !important; } }