@layer tokens {
    /* =========================
       SECTION CARROUSEL
       ========================= */
    /* Les couleurs des lumières s'interpolent sur la scène, sans dupliquer les objets lumineux ; leur forme
       vient des champs d'intensité (CARROUSEL_OVAL, CARROUSEL_DISC, CARROUSEL_CORE). */
    @property --showcase-light-color {
        syntax: '<color>';
        inherits: true;
        initial-value: #fff;
    }
    @property --showcase-core-color {
        syntax: '<color>';
        inherits: true;
        initial-value: #fff;
    }
    @property --showcase-disc-color {
        syntax: '<color>';
        inherits: true;
        initial-value: #fff;
    }
}

@layer page {
    body {
        /* Bande de la section suivante laissée visible à l’arrivée, sans texte. */
        --home-peek: clamp(48px, 9svh, 96px);
    }

    /* C — Fond noir uni ; la palette ne sert qu’au reflet du filet. */
    .home-intro {
        --home-ink: var(--local-color-identity-carbon);
        --home-shimmer: linear-gradient(90deg, transparent 15%, var(--home-petrol) 35%, var(--home-sage) 50%, var(--home-lemon) 65%, transparent 85%);
    }

    .showcase-stage {
        --showcase-transition: 1000ms;
        /* Cadrage des figurines. La parallaxe décale la figurine de f fois la position de la section
           dans la fenêtre. La tête est 115 px sous le haut de l'image source, le bas
           du socle 115 px au-dessus de son bas ; aucun vide ne doit paraître entre eux et les bords de la
           section tant que ces bords sont à l'écran. La plus petite figurine qui le garantit mesure
           F = H·(1 + f) + |f|·V :
           - f > 0, plus rapide que la page : la tête touche le haut à l'entrée de la section, le socle
           touche le bas à sa sortie ;
           - f < 0, dans le sens du défilement (téléphone) : la tête touche le haut quand la section
           atteint le haut de l'écran, le socle touche le bas quand elle atteint son bas.
           La section vaut 1,15 écran ; plus étroite, c'est la largeur qui borne F : le socle le plus
           large (série 1, 1292 px sur 2025 de haut) tient dans la section, et H s'en déduit. V est pris
           au plus grand (lvh) : barre d'outils mobile affichée, la figurine déborde un peu plus. */
        --showcase-parallax: 0.2;
        --showcase-parallax-magnitude: max(var(--showcase-parallax), -1 * var(--showcase-parallax));
        --showcase-image-height: 2025;
        --showcase-image-margin: 115;
        --showcase-widest: 1292;
        --showcase-figure-height: calc(var(--showcase-image-height) - 2 * var(--showcase-image-margin));
        /* Évaluées dans les descendants : 100cqw y est la largeur de la section. */
        --showcase-height: min(115svh, calc((100cqw * var(--showcase-figure-height) / var(--showcase-widest) - var(--showcase-parallax-magnitude) * 100lvh) / (1 + var(--showcase-parallax))));
        --showcase-figure: calc(var(--showcase-height) * (1 + var(--showcase-parallax)) + var(--showcase-parallax-magnitude) * 100lvh);
        /* Haut du conteneur d'images dans la section, au décalage nul, et sa hauteur. */
        --showcase-slides-top: calc(-1 * max(var(--showcase-parallax), 0) * 100lvh - var(--showcase-figure) * var(--showcase-image-margin) / var(--showcase-figure-height));
        --showcase-frame-height: calc(var(--showcase-figure) * var(--showcase-image-height) / var(--showcase-figure-height));
        /* Parallaxe par la feuille (exvae #49) : figurine, lumières et calque éclairé glissent par
           `translate`, le long de la traversée de la section — de son haut à V sous le haut de la fenêtre à
           la sortie de son bas par le haut, soit V + H. Une lumière glisse de k fois le décalage du centre de
           la section au centre de la fenêtre : de −k·(V + H)/2 à +k·(V + H)/2, nulle section centrée. V est
           fixe, 100lvh : la hauteur courante de la fenêtre change quand la barre d'outils mobile se replie, et
           tout ce qui en dépendait sautait en plein défilement (exvae #55). */
        --showcase-span: calc(100lvh + var(--showcase-height));
        --showcase-oval-parallax: 1.08;
        --showcase-core-parallax: 1.55;
        /* La scène, et avec elle les lumières, déborde de la section en haut et en bas : l'ovale, au plus
           0,71 fois le plus petit côté autour de 59 % de la hauteur, s'y rend entier. */
        --showcase-bleed: calc(0.35 * var(--showcase-height));
    }

    .showcase-light--oval {
        --showcase-light-parallax: var(--showcase-oval-parallax);
    }

    .showcase-light--disc,
    .showcase-light--core {
        --showcase-light-parallax: var(--showcase-core-parallax);
    }

    /* =========================
       MOBILE
       ========================= */
    @media (max-width: 800px) {
        /* Carrousel mobile : la figurine suit le défilement, la section peut être plus haute. */
        .showcase-stage {
            --showcase-parallax: -0.2;

        }
        /* Une bande noire, celle des cartes de la galerie, au-dessus du compartiment : titre et
               description. Titre d'une ligne et description de deux lignes au plus (320 px) : la bande a la
               même hauteur pour toutes les séries. La vignette du compartiment rejoindra ce noir. */
        .showcase {
            --showcase-band: calc(28px + 20px + 1.8rem * 1.15 + 10px + 2 * 0.9rem * 1.5);

        }
    }

    body {
        position: relative;
        z-index: 1;
        padding: 0;
        margin: 0;
    }

    .header {
        position: fixed;
        width: 100%;
        z-index: 1000;
    }

    .backdrop {
        position: fixed;
        inset: 0;
        z-index: -1;
        /* laisser les clics passer */
        height: 100%;
        padding: 0;
        margin: 0;
        overflow: hidden;
    }

    .backdrop-poster, .backdrop-image {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .backdrop-image {
        visibility: hidden;
    }

    .backdrop[data-backdrop-ready] .backdrop-image {
        visibility: visible;
    }

    /* Grain fixe au-dessus du poster et du Canvas : le fond devient un plan texturé, derrière le bloc
       net de l’introduction. Des points sombres en composition normale restent visibles sur les
       zones blanches, là où overlay et soft-light ne marquent rien. */
    .backdrop::after {
        position: absolute;
        inset: 0;
    }

    .home-banner {
        position: fixed;
        top: 75px;
        left: 0;
        width: 80vw;
        max-width: 500px;
        padding: 10px;
        z-index: 3;
    }

    /* Introduction : scène fixe, disparition en parallaxe au défilement. La réserve occupe l’écran
       moins la bande aperçue ; le bloc se centre optiquement entre l’en-tête et cette bande. */
    #home-intro-section {
        position: fixed;
        z-index: 1;
        inset: 0;
        display: flex;
        align-items: center;
        padding: var(--raw-space-16) 4vw calc(var(--home-peek) + var(--raw-space-12));
        box-sizing: border-box;
    }

    .home-spacer {
        height: max(calc(100svh - var(--home-peek)), 300px);
    }

    #home-intro-frame {
        width: 100%;
        max-width: 800px;
        margin-inline: auto;
    }

    /* B — Identité de l’accueil. */
    .typewriter {
        margin: 0;
        min-height: 1.5em;
    }

    .typewriter-word {
        position: relative;
        display: inline-block;
        max-width: 100%;
        padding-bottom: 0.18em;
    }

    .typewriter-text {
        position: relative;
        display: block;
    }

    .typewriter-letter {
        display: inline-block;
    }

    .typewriter-measure {
        position: absolute;
        visibility: hidden;
    }

    .home-intro-detail {
        max-width: var(--local-layout-reading);
        margin: var(--raw-space-3) 0 0;
    }

    .home-intro {
        position: relative;
        box-sizing: border-box;
        overflow: hidden;
    }

    .typewriter-underline {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: calc(2 * var(--raw-line-1));
        overflow: hidden;
    }

    .typewriter-underline::after {
        position: absolute;
        inset: 0;
    }

    /* D — Composition et états d’animation. */
    .home-intro-content {
        position: relative;
        z-index: 1;
        box-sizing: border-box;
        min-width: 0;
        width: 88%;
        min-height: 180px;
        padding: var(--raw-space-6);
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    /* =========================
       SECTION ESSENTIALS - PARALLAX OVERLAY
       ========================= */
    /* Un écran : le contenu centré, l'accordéon réserve sa hauteur dépliée maximale. La marge haute
       dépasse la bande aperçue depuis l'introduction. */
    #home-essentials {
        position: relative;
        z-index: 10;
        box-sizing: border-box;
        width: 100%;
        min-height: 100svh;
        padding: calc(var(--home-peek) + var(--raw-space-6)) 0 var(--raw-space-8);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    #home-essentials-main {
        width: 100%;
        max-width: 1000px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: top;
        gap: 0;
    }

    #home-essentials-main h1 {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        margin: 0;
        padding: 0;
    }

    #home-essentials-main h1 b {
        margin-right: 0.4rem;
        margin-left: 0.4rem;
    }

    #home-essentials-main h1 img {
        height: 1.45rem;
    }

    #home-essentials-main h2 {
        max-width: 400px;
        margin: 0;
        padding: 0;
    }

    /* ACCORDEON */
    #home-essentials-faq {
        box-sizing: inherit;
        width: calc(100% - 20px);
        margin-top: var(--raw-space-12);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .faq {
        width: 100%;
        max-width: 800px;
        margin: 0 auto;
        padding: 0 1.5rem;
    }

    /* Les marges des filets restent dans l'accordéon : sa hauteur mesurée est celle qu'il occupe. */
    .faq-items {
        display: flow-root;
    }

    .faq-items h3 {
        margin: 0;
    }

    /* Icônes accordion — chevron animé (style philo-arrow) */

    .faq-answer {
        display: flex;
        flex-direction: column;
        align-items: end;
        justify-content: flex-start;
    }

    .faq-answer-text {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: flex-start;
        flex-wrap: nowrap;
        gap: 0.8rem;
        box-sizing: border-box;
    }

    :where(.faq-answer-text) p {
        margin-block: 1em;
    }

    .faq-answer p {
        padding: 0 1rem 0 1rem;
    }

    /* =========================
       AUTRES CONTENUS
       ========================= */
    #home-more {
        position: relative;
        z-index: 10;
        width: 100%;
        top: 0;
        height: auto;
        padding-bottom: 10rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 1rem;
    }

    #home-more h2 {
        margin-top: 6vh;
        margin-bottom: 3vh;
    }

    .gallery {
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 1rem;
        flex-wrap: wrap;
    }

    /* Galerie (container-home-gallery) : en-tête sur fond sombre, puis le visuel, ramené à la hauteur
       restante. Un voile de la couleur de l'en-tête le recouvre, masqué par le champ d'intensité de la
       carte (sgbl_intensity.js) : sans script, la couche reste invisible et la base nue. */
    .gallery-item {
        display: flex;
        flex-direction: column;
        width: 46vw;
        min-width: 300px;
        height: 40vw;
        min-height: 200px;
        max-height: 550px;
        position: relative;
        overflow: hidden;
    }

    .gallery-item-image {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: start;
        margin: 0;
        padding: 0;
        width: 100%;
        flex: 1 1 auto;
        min-height: 0;
    }

    .gallery-item-image::after {
        position: absolute;
        inset: 0;
        z-index: 1;
    }

    .gallery-item-link {
        position: relative;
        z-index: 20;
        display: inline-block;
    }

    .gallery-item-header {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: start;
        padding-top: 1vh;
        padding-bottom: 1vh;
    }

    .gallery-item-header h3 {
        margin: 0;
        padding: 3vh 1vh 0 1vh;
        width: 100%;
    }

    .gallery-item-header p {
        margin: 0;
        padding: 0 1vh 0.5vh 1vh;
        width: 70%;
    }

    /* Le compartiment (.showcase-stage) et la couche de texte (.showcase-overlay) partagent une
       cellule ; sous 800 px, le texte sort dans deux bandes noires, au-dessus et au-dessous. */
    .showcase {
        display: grid;
    }

    .showcase > * {
        grid-area: 1 / 1;
        min-width: 0;
    }

    .showcase-stage {
        container-type: inline-size;
        position: relative;
        z-index: 10;
        width: 100%;
        overflow: hidden;
    }

    /* La hauteur vient de ce bloc : la largeur de la section n'est lisible que dans ses descendants. */
    .showcase-stage::before {
        display: block;
        height: var(--showcase-height);
    }

    /* La scène déborde du compartiment de --showcase-bleed en haut et en bas : elle porte l'image du
       cercle, que la lueur et les calques éclairés lisent. Sans z-index, elle ne change pas l'empilement. */
    .showcase-scene {
        position: absolute;
        inset: calc(-1 * var(--showcase-bleed)) 0;
    }

    /* Deux plans lumineux permanents, indépendants des images. */
    .showcase-backdrop {
        position: absolute;
        inset: 0;
        z-index: 0;
    }

    .showcase-light {
        position: absolute;
        inset: 0;
    }

    /* Les séries du carrousel canonique, sur le compartiment ; sans z-index, ni elles ni leurs séries
       ne forment d'empilement : les points des vues passent au-dessus de la vignette. */
    .showcase-slides {
        position: absolute;
        inset: var(--showcase-bleed) 0;
    }

    .showcase-slide {
        position: absolute;
        inset: 0;
    }

    /* La sous-suite des vues couvre sa série : l'observateur du canon la voit à l'écran. */
    .showcase-figures {
        position: absolute;
        inset: 0;
    }

    /* Hauteur de l'image source à l'échelle de la figurine ; au repos (décalage nul), la tête est
       à f·V au-dessus du haut de la section si f > 0, au ras du haut sinon. L'animation de suivi
       ajoute le décalage de parallaxe. */
    .showcase-frame {
        position: absolute;
        top: var(--showcase-slides-top);
        left: 0;
        right: 0;
        height: var(--showcase-frame-height);
        z-index: 1;
        /* Isoler le compositing des slides : evite recomposite du background */
        contain: paint;
    }

    /* Les vues d'une série, sous-suite du carrousel canonique, dans le cadre. */
    .showcase-views {
        position: absolute;
        inset: 0;
    }

    .showcase-view {
        position: absolute;
        inset: 0;
    }

    .showcase-slide-image {
        position: absolute;
        inset: 0;
    }

    /* V, la longueur fixe de la parallaxe, que le script mesure ici. */
    .showcase-reach {
        position: absolute;
        top: 0;
        left: 0;
        width: 0;
        height: 100lvh;
        visibility: hidden;
    }

    /* Les points des vues, au bas du compartiment, au-dessus de la vignette. */
    .showcase-views-controls {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 51px;
        z-index: 3;
    }

    /* Le calque éclairé couvre la scène, au repos : il suit le cercle, son masque ; son image couvre
       le cadre, au repos : elle suit la figurine. */
    .showcase-slide-ray {
        position: absolute;
        top: calc(-1 * (var(--showcase-bleed) + var(--showcase-slides-top)));
        left: 0;
        right: 0;
        height: calc(var(--showcase-height) + 2 * var(--showcase-bleed));
    }

    .showcase-slide-ray-image {
        position: absolute;
        top: calc(var(--showcase-bleed) + var(--showcase-slides-top));
        left: 0;
        right: 0;
        height: var(--showcase-frame-height);
    }

    /* Vignette du compartiment : le noir de la bande et des cartes de la galerie, masqué par le champ
       d'intensité que le script pose sur la section. Sans lui, le repli du var() la laisse invisible.
       Sa base couvre le compartiment ; chaque couche du gain au pointeur aussi, et porte sa tache,
       centrée sur l'origine du compartiment, que le script et le suivi du défilement placent sous le
       pointeur. */
    .showcase-tint {
        position: absolute;
        inset: 0;
        z-index: 2;
    }

    .showcase-tint-constant,
    .showcase-tint-gain {
        position: absolute;
        inset: 0;
    }

    .showcase-tint-spot {
        position: absolute;
        top: calc(-0.5 * var(--intensity-spot-height, 0px));
        left: calc(-0.5 * var(--intensity-spot-width, 0px));
        width: var(--intensity-spot-width, 0px);
        height: var(--intensity-spot-height, 0px);
    }

    /* Les couches du gain n'existent que sous un pointeur posé : sans lui, ni plus-lighter, ni surface
       isolée à composer. */
    .showcase-tint-gain {
        display: none;
    }

    .showcase-tint[data-showcase-pointer] .showcase-tint-gain {
        display: block;
    }

    /* ---- OVERLAY (non-parallax layer) ---- */
    .showcase-overlay {
        /* Même niveau que le compartiment, plus tard dans le document : au-dessus de lui. */
        position: relative;
        z-index: 10;
    }

    /* Les commandes ne forment pas de boîte : pas, points et lecture se placent sur la couche. */
    .showcase-controls {
        display: contents;
    }

    /* Header zone (top) */
    .showcase-head {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        /* Le titre dégage l'en-tête fixe quand la section atteint le haut de l'écran. */
        padding: calc(var(--raw-space-16) + 45px) 70px 45px;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 30px;
    }

    .showcase-text {
        flex: 1;
        min-width: 0;
    }

    .showcase-title {
        margin: 0;
        transform: translateY(18px);
    }

    .showcase-detail {
        max-width: 520px;
        margin: 10px 0 0 0;
        transform: translateY(14px);
    }

    .showcase-actions {
        display: flex;
        gap: 12px;
        align-items: center;
        flex-shrink: 0;
        padding-top: 5px;
        transform: translateY(14px);
    }

    /* Animated entrance */
    .showcase-head[data-showcase-visible] .showcase-title,
    .showcase-head[data-showcase-visible] .showcase-detail,
    .showcase-head[data-showcase-visible] .showcase-actions {
        transform: translateY(0);
    }

    /* Les pas, sur les flancs, à mi-hauteur du compartiment. */
    .showcase-previous,
    .showcase-next {
        position: absolute;
        top: 50%;
        z-index: 4;
        margin-top: calc(var(--carousel-control-size) / -2);
    }

    .showcase-previous {
        left: 22px;
    }

    .showcase-next {
        right: 22px;
    }

    /* Les points des séries, centrés au bas du compartiment. */
    .showcase-dots {
        position: absolute;
        bottom: 22px;
        left: 0;
        right: 0;
        width: fit-content;
        margin-inline: auto;
    }

    /* La lecture, au coin, sur la ligne des points. */
    .showcase-play {
        position: absolute;
        right: 22px;
        bottom: 18px;
        z-index: 4;
    }

    @media (max-width: 600px) {
        .home-intro-content {
            width: 100%;
            padding: var(--raw-space-4);
            min-height: 168px;

        }
    }

    @media (max-width: 600px) {
        .gallery-item {
            width: 90vw;
            height: calc(45px + 80vw);

        }
    }

    @media (max-width: 800px) {
        .showcase-stage,
        .showcase-overlay {
            margin-top: var(--showcase-band);

        }
        .showcase-overlay {
            display: flex;
            flex-direction: column;
            justify-content: flex-end;

        }
        .showcase-head {
            position: static;
            padding: 0 20px 64px;
            flex-direction: column;
            gap: 15px;

        }
        .showcase-text {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 100%;
            box-sizing: border-box;
            height: var(--showcase-band);
            padding: 28px 20px 20px;

        }
        .showcase-actions {
            padding-top: 0;
            flex-direction: column;
            align-items: flex-start;

        }
        .showcase-previous,
        .showcase-next {
            top: auto;
            bottom: 12px;
            margin-top: 0;

        }
        .showcase-previous {
            left: 12px;

        }
        .showcase-next {
            right: 12px;

        }
        .showcase-dots {
            bottom: 12px;

        }
        .showcase-play {
            right: 60px;
            bottom: 16px;

        }
        .showcase-views-controls {
            bottom: 39px;

        }
    }

    .backdrop {
        background-image: none;
    }
    .backdrop::after {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 4 0 0 0 -1.6'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
        background-size: 160px;
        opacity: 0.08;
    }

    .home-banner {
        background-color: var(--local-color-decor-home-banner-surface);
    }

    .typewriter-text {
        clip-path: inset(-0.3em 0);
    }

    .home-intro {
        isolation: isolate;
        border-radius: var(--raw-radius-1);
        background: var(--home-ink);
        box-shadow: var(--local-shadow-home-intro);
    }

    .typewriter-underline {
        border-radius: var(--raw-radius-1);
        background: var(--local-color-decor-home-typewriter-underline-surface);
    }

    .typewriter-underline::after {
        background-image: var(--home-shimmer);
        opacity: 0;
    }

    .typewriter[data-typewriter-animating] .typewriter-underline::after {
        opacity: 1;
    }

    #home-essentials {
        background-color: var(--raw-color-pearl-2);
        border-top: 1px solid var(--local-color-decor-home-line);
        border-bottom: 1rem solid var(--local-color-decor-home-line);
        box-shadow: var(--local-shadow-home);
    }

    /* Classe active via JS (remplace :target) */

    #home-more {
        background-color: var(--raw-color-pearl-2);
        border-top: 1rem solid var(--local-color-decor-home-line);
    }

    .gallery-item {
        border-radius: var(--local-radius-home-gallery-item);
        background-color: var(--local-color-identity-dark);
    }

    .gallery-item-image {
        border-top: 1px solid var(--local-color-decor-home-gallery-item-image-line);
        background-position: top;
        background-repeat: no-repeat;
        background-size: 100%;
    }

    .gallery-item-image::after {
        background: var(--local-color-identity-dark);
        -webkit-mask-image: var(--intensity-positive, linear-gradient(transparent, transparent));
        mask-image: var(--intensity-positive, linear-gradient(transparent, transparent));
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
    }

    .showcase-stage {
        background-color: var(--local-color-decor-home-showcase-stage-surface);
    }

    .showcase-light {
        mask-image: var(--intensity-positive, linear-gradient(transparent, transparent));
        mask-size: 100% 100%;
        mask-repeat: no-repeat;
    }

    /* Chacune est sa couleur, masquée par son champ : l'ovale et le disque portent le leur, la lueur lit celui
       de la scène. Posée sur le disque, la lueur va de sa couleur, à l'intensité 1, à celle du disque, à
       l'intensité 0 ; le disque garde un bord net sur le fond et l'ovale. */
    .showcase-light--oval {
        background: var(--showcase-light-color);
    }

    .showcase-light--disc {
        background: var(--showcase-disc-color);
    }

    .showcase-light--core {
        background: var(--showcase-core-color);
    }

    .showcase-slide-image {
        /* Échelle commune à toutes les séries : la hauteur de l'image, jamais sa largeur, la fixe. */
        background-size: auto 100%;
        background-position: center;
        background-repeat: no-repeat;
    }

    /* Une vue paraît quand sa figurine et son calque éclairé sont décodés, jamais par bandes (exvae #55) :
       jusque-là, le compartiment ne montre que ses lumières. */
    .showcase-slide-image:not([data-showcase-ready]) {
        opacity: 0;
    }

    /* L'image même du cercle, sur la boîte de la scène que le calque reprend. */
    .showcase-slide-ray {
        mask-image: var(--intensity-positive, linear-gradient(transparent, transparent));
        mask-size: 100% 100%;
        mask-repeat: no-repeat;
    }

    .showcase-slide-ray-image {
        background-size: auto 100%;
        background-position: center;
        background-repeat: no-repeat;
    }

    /* Les couches du gain s'ajoutent à la base, alpha pour alpha (plus-lighter), dans la vignette isolée :
       la somme, non la superposition, rend V·(1 + C) saturé (SYS_intensity.md § Gain au pointeur par la
       feuille). */
    .showcase-tint {
        isolation: isolate;
    }

    .showcase-tint-constant {
        background: var(--local-color-identity-dark);
        mask-image: var(--intensity-positive, linear-gradient(transparent, transparent));
        mask-size: 100% 100%;
        mask-repeat: no-repeat;
    }

    .showcase-tint-gain {
        mask-size: 100% 100%;
        mask-repeat: no-repeat;
        mix-blend-mode: plus-lighter;
    }

    .showcase-tint-gain--1 {
        mask-image: var(--intensity-gain-1, linear-gradient(transparent, transparent));
    }

    .showcase-tint-gain--2 {
        mask-image: var(--intensity-gain-2, linear-gradient(transparent, transparent));
    }

    .showcase-tint-gain--3 {
        mask-image: var(--intensity-gain-3, linear-gradient(transparent, transparent));
    }

    .showcase-tint-spot {
        background: var(--local-color-identity-dark);
    }

    .showcase-tint-gain--1 .showcase-tint-spot {
        mask-image: var(--intensity-spot-1, linear-gradient(transparent, transparent));
    }

    .showcase-tint-gain--2 .showcase-tint-spot {
        mask-image: var(--intensity-spot-2, linear-gradient(transparent, transparent));
    }

    .showcase-tint-gain--3 .showcase-tint-spot {
        mask-image: var(--intensity-spot-3, linear-gradient(transparent, transparent));
    }

    .showcase-title {
        opacity: 0;
    }

    .showcase-detail {
        opacity: 0;
    }

    .showcase-actions {
        opacity: 0;
    }

    .showcase-head[data-showcase-visible] .showcase-title,
    .showcase-head[data-showcase-visible] .showcase-detail,
    .showcase-head[data-showcase-visible] .showcase-actions {
        opacity: 1;
    }


    @media (prefers-reduced-motion: reduce) {
        .typewriter-underline::after {
            opacity: 0;

        }
    }

    @media (max-width: 800px) {
        .showcase-text {
            background: var(--local-color-identity-dark);

        }
    }

    .backdrop::after {
        content: '';
    }

    .home-banner {
        color: var(--local-color-decor-home-banner-ink);
        text-align: center;
        font-size: var(--canon-size-body);
    }

    .home-banner a {
        color: var(--local-color-decor-home-link-ink);
        text-decoration: underline;
    }

    .typewriter {
        font-family: var(--canon-font-figura);
        font-size: var(--canon-size-headline);
        font-weight: var(--local-weight-emphasis);
        line-height: var(--canon-leading-title);
        color: var(--raw-color-white-90);
    }

    .typewriter span {
        font-family: inherit;
    }

    .typewriter-word {
        vertical-align: bottom;
    }

    .typewriter-text {
        white-space: pre;
    }

    .typewriter-measure {
        white-space: pre;
    }

    .home-intro-detail {
        font-family: var(--canon-font-oratio);
        font-size: var(--canon-size-body);
        line-height: var(--canon-leading-body);
        color: var(--raw-color-white-80);
    }

    .typewriter-underline::after {
        content: '';
    }

    #home-essentials-main h1 {
        font-family: var(--canon-font-figura);
        font-weight: 500;
        font-size: var(--canon-size-headline);
    }

    #home-essentials-main h1 b {
        font-weight: 730;
    }

    #home-essentials-main h2 {
        text-align: center;
        font-size: var(--canon-size-subtitle);
        font-weight: 500;
    }

    .faq-items h3 {
        font-family: var(--canon-font-figura);
        font-size: var(--canon-size-title);
        font-weight: 700;
    }

    .faq-answer p {
        color: var(--raw-color-black-90);
        font-size: var(--canon-size-subtitle);
    }

    #home-more h2 {
        font-family: var(--canon-font-figura);
        text-align: center;
        font-weight: 500;
        font-size: var(--canon-size-headline);
    }

    .gallery-item {
        text-align: center;
    }

    .gallery-item-image::after {
        content: "";
    }

    .gallery-item-header h3 {
        color: var(--raw-color-white-90);
        font-size: var(--canon-size-title);
        font-weight: 700;
    }

    .gallery-item-header p {
        color: var(--raw-color-white-85);
        text-align: center;
        font-size: var(--canon-size-body);
        font-weight: 400;
    }

    .showcase-stage::before {
        content: '';
    }

    .showcase-title {
        color: var(--local-color-decor-home-showcase-title-ink);
        font-family: var(--canon-font-figura);
        font-size: var(--canon-size-display);
        font-weight: 700;
        line-height: var(--canon-leading-title);
        text-shadow: var(--local-shadow-home-showcase-title);
    }

    .showcase-detail {
        color: var(--raw-color-white-85);
        font-size: var(--canon-size-subtitle);
        font-weight: 400;
        line-height: var(--canon-leading-body);
        text-shadow: var(--local-shadow-home-showcase-detail);
    }


    .backdrop {
        /* placer derrière tout le contenu */
        pointer-events: none;
    }

    #home-intro-section {
        pointer-events: none;
    }

    .home-spacer {
        pointer-events: none;
    }

    #home-intro-frame {
        pointer-events: auto;
    }

    .typewriter-measure {
        pointer-events: none;
    }

    .typewriter-underline::after {
        animation: home-identity-shimmer 1500ms linear infinite;
        animation-play-state: paused;
    }

    .typewriter[data-typewriter-animating] .typewriter-underline::after {
        animation-play-state: running;
    }

    #home-essentials-main h1 img {
        user-select: none;
    }

    .gallery-item-image::after {
        pointer-events: none;
    }

    /* La traversée de la section dans la fenêtre : la timeline que suivent figurine, lumières et calque
       éclairé. */
    .showcase-stage {
        transition: --showcase-light-color var(--showcase-transition) ease, --showcase-core-color var(--showcase-transition) ease, --showcase-disc-color var(--showcase-transition) ease;
        view-timeline: --showcase-view block;
    }

    .showcase-backdrop {
        transition: background-color 1s ease;
        pointer-events: none;
    }

    .showcase-light {
        pointer-events: none;
    }

    .showcase-slide-ray {
        pointer-events: none;
    }

    .showcase-reach {
        pointer-events: none;
    }

    .showcase-slide-image {
        transition: opacity var(--canon-duration-reveal) ease-out;
    }

    .showcase-tint {
        pointer-events: none;
    }

    .showcase-overlay {
        pointer-events: none;
    }

    .showcase-head {
        pointer-events: auto;
    }

    .showcase-title {
        transition: opacity 0.5s ease 0.15s, transform 0.5s ease 0.15s;
    }

    .showcase-detail {
        transition: opacity 0.5s ease 0.3s, transform 0.5s ease 0.3s;
    }

    .showcase-actions {
        transition: opacity 0.5s ease 0.4s, transform 0.5s ease 0.4s;
        pointer-events: auto;
    }

    /* La couche laisse passer le pointeur, sauf à ses commandes. */
    .showcase-controls > * {
        pointer-events: auto;
    }

    .showcase-stage[data-showcase-instant] {
        transition: none;
    }

    /* Sous 800 px, la tête descend sur le compartiment, sa réserve sur les points des vues : seuls ses
       textes et ses boutons prennent le pointeur. */
    @media (max-width: 800px) {
        .showcase-head {
            pointer-events: none;

        }
        .showcase-text {
            pointer-events: auto;

        }
    }

    /* Les suivis du défilement, en pause : sans timeline de défilement, le script porte leur horloge à la
       progression de la traversée ; avec elle, le compositeur les joue. En mouvement réduit, aucun
       suivi : les plans restent à leur place déclarée. */
    @media (prefers-reduced-motion: no-preference) {
        .showcase-frame {
            animation: showcase-figure-parallax 1s linear both paused;
        }
        .showcase-light {
            animation: showcase-light-parallax 1s linear both paused;
        }
        .showcase-slide-ray {
            animation: showcase-ray-parallax 1s linear both paused;
        }
        .showcase-slide-ray-image {
            animation: showcase-ray-image-parallax 1s linear both paused;
        }
        .showcase-tint-spot {
            animation: showcase-spot-parallax 1s linear both paused;
        }
    }

    @supports (animation-timeline: view()) {
        @media (prefers-reduced-motion: no-preference) {
            .showcase-frame,
            .showcase-light,
            .showcase-slide-ray,
            .showcase-slide-ray-image,
            .showcase-tint-spot {
                animation-play-state: running;
                animation-timeline: --showcase-view;
                /* De son haut à 100lvh sous le haut de la fenêtre à la sortie de son bas : une plage que la
                   hauteur courante de la fenêtre ne déplace pas, à la différence de `cover`. */
                animation-range: exit-crossing -100lvh exit-crossing 100%;
            }
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .typewriter-underline::after {
            animation: none;

        }
    }

    @media (prefers-reduced-motion: reduce) {
        .showcase-title,
        .showcase-detail,
        .showcase-actions,
        .showcase-backdrop,
        .showcase-stage,
        .faq-answer {
            animation: none;

        }
        .showcase-backdrop,
        .showcase-slide-image {
            transition: none;
        }
    }

    /* La figurine : f·V à l'entrée de la section, −f·H à sa sortie — f fois la position de son haut dans
       la fenêtre, bornée à la traversée. */
    @keyframes showcase-figure-parallax {
        from {
            translate: 0 calc(var(--showcase-parallax) * 100lvh);
        }
        to {
            translate: 0 calc(-1 * var(--showcase-parallax) * var(--showcase-height));
        }
    }

    @keyframes showcase-light-parallax {
        from {
            translate: 0 calc(-0.5 * var(--showcase-light-parallax) * var(--showcase-span));
        }
        to {
            translate: 0 calc(0.5 * var(--showcase-light-parallax) * var(--showcase-span));
        }
    }

    /* Le calque éclairé, dans le cadre qui suit la figurine : le suivi du cercle moins celui de la
       figurine ; son image, l'inverse. */
    @keyframes showcase-ray-parallax {
        from {
            translate: 0 calc(-0.5 * var(--showcase-core-parallax) * var(--showcase-span) - var(--showcase-parallax) * 100lvh);
        }
        to {
            translate: 0 calc(0.5 * var(--showcase-core-parallax) * var(--showcase-span) + var(--showcase-parallax) * var(--showcase-height));
        }
    }

    @keyframes showcase-ray-image-parallax {
        from {
            translate: 0 calc(0.5 * var(--showcase-core-parallax) * var(--showcase-span) + var(--showcase-parallax) * 100lvh);
        }
        to {
            translate: 0 calc(-0.5 * var(--showcase-core-parallax) * var(--showcase-span) - var(--showcase-parallax) * var(--showcase-height));
        }
    }

    /* La tache du pointeur, posée par le script à (x, y − V) depuis l'origine du compartiment : la traversée
       y ajoute V − haut du compartiment, de 0 à son entrée à S à sa sortie, et la tache reste sous un
       pointeur immobile pendant que la page défile. */
    @keyframes showcase-spot-parallax {
        from {
            translate: 0 0;
        }
        to {
            translate: 0 var(--showcase-span);
        }
    }

    @keyframes home-identity-shimmer {
        from {
            transform: translateX(-100%);
        }
        to {
            transform: translateX(100%);
        }
    }

}