/*
 * Charte « brillance » d'Utoili : aura, étincelles, éclat, graine, voile, poussière d'étoiles, titre.
 * Reprise telle quelle de la proposition de charte (effets.html) ; couleurs des thèmes du site.
 */
/* Angle animable du liseré qui scintille (.br-eclat--bord) */
@property --br-angle {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

:root {
    /* Couleurs des thèmes (app.css, @theme) — inchangées */
    --color-theme0-main: #1e293b; --color-theme0-light: #94a3b8;
    --color-theme1-main: #059669; --color-theme1-light: #86efac;
    --color-theme2-main: #7e22ce; --color-theme2-light: #d8b4fe;
    --color-theme3-main: #ca8a04; --color-theme3-light: #fde047;
    --color-theme4-main: #be185d; --color-theme4-light: #f9a8d4;
    --color-theme5-main: #0891b2; --color-theme5-light: #67e8f9;
    --color-theme6-main: #c2410c; --color-theme6-light: #fdba74;
    --color-theme7-main: #1d4ed8; --color-theme7-light: #93c5fd;

    /* NOUVEAU : la « lumière » de chaque thème = le corps de sa graine dans la vidéo.
       Sert UNIQUEMENT aux effets lumineux (halo, anneaux, étincelles), jamais au texte. */
    --color-theme0-glow: #e2e8f0;
    --color-theme1-glow: #50d770;
    --color-theme2-glow: #a37ff4;
    --color-theme3-glow: #fdf87f;
    --color-theme4-glow: #f36db1;
    --color-theme5-glow: #50ffe5;
    --color-theme6-glow: #f25e27;
    --color-theme7-glow: #5078f2;

    /* Repris tels quels de entree-merveille.css (déjà dans :root sur le site) : l'étoile à 4 branches */
    --em-mask-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 0C11.3 6.2 13.8 8.7 20 10C13.8 11.3 11.3 13.8 10 20C8.7 13.8 6.2 11.3 0 10C6.2 8.7 8.7 6.2 10 0Z'/%3E%3C/svg%3E");
    --em-mask-outline-bold: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-2 -2 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2.8' stroke-linejoin='round' d='M10 0C11.3 6.2 13.8 8.7 20 10C13.8 11.3 11.3 13.8 10 20C8.7 13.8 6.2 11.3 0 10C6.2 8.7 8.7 6.2 10 0Z'/%3E%3C/svg%3E");

    /* Poussière d'étoiles : deux tuiles (masques), la couleur vient du thème */
    --br-tuile-etoiles: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 240'%3E%3Cg%3E%3Cpath transform='translate(30 40) scale(.45)' d='M10 0C11.3 6.2 13.8 8.7 20 10C13.8 11.3 11.3 13.8 10 20C8.7 13.8 6.2 11.3 0 10C6.2 8.7 8.7 6.2 10 0Z'/%3E%3Cpath transform='translate(170 22) scale(.35)' d='M10 0C11.3 6.2 13.8 8.7 20 10C13.8 11.3 11.3 13.8 10 20C8.7 13.8 6.2 11.3 0 10C6.2 8.7 8.7 6.2 10 0Z'/%3E%3Cpath transform='translate(120 150) scale(.55)' d='M10 0C11.3 6.2 13.8 8.7 20 10C13.8 11.3 11.3 13.8 10 20C8.7 13.8 6.2 11.3 0 10C6.2 8.7 8.7 6.2 10 0Z'/%3E%3Cpath transform='translate(206 196) scale(.3)' d='M10 0C11.3 6.2 13.8 8.7 20 10C13.8 11.3 11.3 13.8 10 20C8.7 13.8 6.2 11.3 0 10C6.2 8.7 8.7 6.2 10 0Z'/%3E%3Crect x='76' y='86' width='5' height='5' transform='rotate(45 78.5 88.5)'/%3E%3Crect x='212' y='104' width='4' height='4' transform='rotate(45 214 106)'/%3E%3Crect x='42' y='206' width='4.5' height='4.5' transform='rotate(45 44 208)'/%3E%3C/g%3E%3C/svg%3E");
    --br-tuile-points: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 180'%3E%3Ccircle cx='22' cy='118' r='2.2'/%3E%3Ccircle cx='96' cy='30' r='1.6'/%3E%3Ccircle cx='150' cy='92' r='2.6'/%3E%3Ccircle cx='70' cy='164' r='1.4'/%3E%3Ccircle cx='132' cy='150' r='1.8'/%3E%3C/svg%3E");
}

/* Un thème = trois couleurs (sur le site : style="--theme-main: …; --theme-light: …; --theme-glow: …"
   comme play.blade.php, ou un attribut comme data-em-theme). Le rose (4) prend le cyan en accent. */
[data-br-theme="0"] { --theme-main: var(--color-theme0-main); --theme-light: var(--color-theme0-light); --theme-glow: var(--color-theme0-glow); }
[data-br-theme="1"] { --theme-main: var(--color-theme1-main); --theme-light: var(--color-theme1-light); --theme-glow: var(--color-theme1-glow); }
[data-br-theme="2"] { --theme-main: var(--color-theme2-main); --theme-light: var(--color-theme2-light); --theme-glow: var(--color-theme2-glow); }
[data-br-theme="3"] { --theme-main: var(--color-theme3-main); --theme-light: var(--color-theme3-light); --theme-glow: var(--color-theme3-glow); }
[data-br-theme="4"] { --theme-main: var(--color-theme4-main); --theme-light: var(--color-theme4-light); --theme-glow: var(--color-theme4-glow); --theme-accent: #0891b2; }
[data-br-theme="5"] { --theme-main: var(--color-theme5-main); --theme-light: var(--color-theme5-light); --theme-glow: var(--color-theme5-glow); }
[data-br-theme="6"] { --theme-main: var(--color-theme6-main); --theme-light: var(--color-theme6-light); --theme-glow: var(--color-theme6-glow); }
[data-br-theme="7"] { --theme-main: var(--color-theme7-main); --theme-light: var(--color-theme7-light); --theme-glow: var(--color-theme7-glow); }

/*
 * Jetons de lumière, redéclarés sur chaque élément à effet (une variable qui contient var() est calculée
 * là où elle est déclarée : même règle que entree-merveille.css).
 * Mode clair : la lumière pure disparaît sur le blanc → on la teinte avec la couleur principale du thème.
 */
:where(.br-aura, .br-etincelles, .br-star, .br-eclat, .br-graine, .br-voile, .br-poussiere) {
    --br-main: var(--theme-main, #0891b2);
    --br-light: var(--theme-light, #67e8f9);
    --br-glow: var(--theme-glow, var(--br-light));
    --br-accent: var(--theme-accent, #ec4899);

    --br-ink: color-mix(in srgb, var(--br-main) 35%, #0b1020);
    --br-tint: color-mix(in srgb, var(--br-glow) 45%, var(--br-main));
    --br-halo: color-mix(in srgb, var(--br-tint) 26%, transparent);
    --br-ring: color-mix(in srgb, var(--br-tint) 70%, transparent);
    --br-c1: color-mix(in srgb, var(--br-main) 72%, var(--br-glow));
    --br-c2: var(--br-accent);
    --br-dot: var(--br-ink);
    --br-shine: rgb(255 255 255 / .85);
}

/* Mode sombre (sauf dans un conteneur .force-light, comme la projection) : lumière pure, cœurs blancs */
.dark :where(.br-aura, .br-etincelles, .br-star, .br-eclat, .br-graine, .br-voile, .br-poussiere):not(.force-light, .force-light *) {
    --br-tint: color-mix(in srgb, var(--br-glow) 72%, #fff);
    --br-halo: color-mix(in srgb, var(--br-glow) 34%, transparent);
    --br-ring: color-mix(in srgb, var(--br-tint) 80%, transparent);
    --br-c1: color-mix(in srgb, var(--br-glow) 80%, #fff);
    --br-c2: color-mix(in srgb, var(--br-accent) 55%, #fff);
    --br-dot: #fff;
    --br-shine: rgb(255 255 255 / .6);
}

/* ---------------------------------------------------------------------------------------------
 * 1. AURA — halo + deux anneaux concentriques qui respirent (les auras des graines de la vidéo).
 *    Se pose sur une ENVELOPPE transparente autour d'un élément rond (avatar, badge, logo, PIN).
 *    --br-gap : écart du premier anneau (10px). --br-boucles : nombre de respirations (9 ≈ 30 s).
 *    .br-onde (ajoutée par JS, 1 fois) : une onde part de l'élément (bonne réponse, nouvelle place).
 * --------------------------------------------------------------------------------------------- */
.br-aura {
    position: relative;
    isolation: isolate;
    display: inline-grid;
    place-items: center;
    --br-gap: 10px;
}

.br-aura::before,
.br-aura::after {
    content: '';
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    pointer-events: none;
}

/* Halo et premier anneau */
.br-aura::before {
    inset: calc(var(--br-gap) * -1);
    background: radial-gradient(closest-side, var(--br-halo) 62%, color-mix(in srgb, var(--br-halo) 35%, transparent) 94%, transparent);
    box-shadow: inset 0 0 0 1.5px var(--br-ring), 0 0 18px 3px var(--br-halo);
    animation: br-respire 3.4s ease-in-out var(--br-boucles, 9) alternate both;
}

/* Second anneau, plus large et plus pâle, à contretemps */
.br-aura::after {
    inset: calc(var(--br-gap) * -2.3);
    box-shadow: inset 0 0 0 1px var(--br-ring), inset 0 0 16px var(--br-halo), 0 0 14px var(--br-halo);
    animation: br-respire-loin 3.4s ease-in-out -1.7s var(--br-boucles, 9) alternate both;
}

@keyframes br-respire {
    from { opacity: .55; transform: scale(.97); }
    to   { opacity: 1; transform: scale(1.03); }
}

@keyframes br-respire-loin {
    from { opacity: .2; transform: scale(.95); }
    to   { opacity: .7; transform: scale(1.05); }
}

/* Onde unique (événement) : l'anneau extérieur part au loin */
.br-aura.br-onde::after {
    box-shadow: inset 0 0 0 2px var(--br-ring), inset 0 0 18px var(--br-halo), 0 0 18px var(--br-halo);
    animation: br-onde .8s cubic-bezier(.2, .7, .3, 1) both;
}

@keyframes br-onde {
    from { opacity: 1; transform: scale(.55); }
    to   { opacity: 0; transform: scale(1.3); }
}

/* Variante carte (coins arrondis) : seule l'opacité respire, pas de remplissage */
.br-aura--carte::before,
.br-aura--carte::after {
    background: none;
    border-radius: calc(var(--br-radius, 1.5rem) + var(--br-gap));
    animation-name: br-respire-fixe;
}

.br-aura--carte::after {
    border-radius: calc(var(--br-radius, 1.5rem) + var(--br-gap) * 2.3);
    animation-name: br-respire-loin-fixe;
}

@keyframes br-respire-fixe      { from { opacity: .5; } to { opacity: 1; } }
@keyframes br-respire-loin-fixe { from { opacity: .15; } to { opacity: .55; } }

/* ---------------------------------------------------------------------------------------------
 * 2. ÉTINCELLES — étoiles à 4 branches (même dessin que l'entrée et l'écran de fin), à cœur blanc,
 *    qui s'allument en tournant puis s'éteignent, posées à la main autour d'un élément (3–4 max).
 *    <i class="br-star" style="--x: 100%; --y: 0%; --s: 14px; --dl: .4s"></i>
 *    Variantes : --accent (rose, ou cyan dans le thème rose), --contour, --losange, --point (bleu nuit).
 * --------------------------------------------------------------------------------------------- */
.br-etincelles {
    position: relative;
}

/* Deux calques de masque : l'étoile (78 % de la boîte) + une lueur ronde de la même couleur autour */
.br-star {
    --s: 14px;
    --k: var(--br-c1);
    --br-lueur: radial-gradient(closest-side, rgb(0 0 0 / .32), rgb(0 0 0 / .1) 60%, transparent);
    position: absolute;
    z-index: 2;
    left: var(--x, 50%);
    top: var(--y, 50%);
    width: var(--s);
    height: var(--s);
    margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
    background: radial-gradient(circle, #fff 0 11%, transparent 28%) var(--k);
    -webkit-mask: var(--em-mask-star) center / 78% 78% no-repeat, var(--br-lueur) center / 100% 100% no-repeat;
            mask: var(--em-mask-star) center / 78% 78% no-repeat, var(--br-lueur) center / 100% 100% no-repeat;
    pointer-events: none;
    opacity: 0;
    animation: br-scintille var(--d, 2.8s) ease-in-out var(--dl, 0s) var(--br-boucles, 10) both;
}

.br-star--accent { --k: var(--br-c2); }

.br-star--contour {
    background: var(--k);
    -webkit-mask-image: var(--em-mask-outline-bold), var(--br-lueur);
            mask-image: var(--em-mask-outline-bold), var(--br-lueur);
}

.br-star--losange,
.br-star--point {
    width: calc(var(--s) * .5);
    height: calc(var(--s) * .5);
    margin: calc(var(--s) * -.25) 0 0 calc(var(--s) * -.25);
    background: var(--k);
    -webkit-mask: none;
            mask: none;
}

.br-star--losange {
    rotate: 45deg;
    border-radius: 1px;
    box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / .75);
}

.br-star--point {
    --k: var(--br-dot);
    border-radius: 50%;
    width: calc(var(--s) * .38);
    height: calc(var(--s) * .38);
    margin: calc(var(--s) * -.19) 0 0 calc(var(--s) * -.19);
}

@keyframes br-scintille {
    0%, 100% { opacity: 0; transform: scale(.2) rotate(0deg); }
    16%      { opacity: 1; transform: scale(1) rotate(30deg); }
    26%      { opacity: 1; transform: scale(.85) rotate(45deg); }
    42%      { opacity: 0; transform: scale(.3) rotate(80deg); }
}

/* ---------------------------------------------------------------------------------------------
 * 3. ÉCLAT — un reflet traverse la surface en .8 s, puis repos (cycle --br-cycle, 6 s ; 5 passages),
 *    et une petite étincelle s'allume au coin à la sortie du reflet. Rejoué au survol / focus.
 *    Pour une surface COLORÉE (bouton, badge, bannière). Sur une carte blanche : .br-eclat--bord
 *    (la lumière fait le tour du liseré).
 *    L'élément ne doit pas utiliser ses propres ::before / ::after.
 * --------------------------------------------------------------------------------------------- */
.br-eclat {
    position: relative;
}

.br-eclat::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(105deg, transparent 40%, rgb(255 255 255 / .35) 46%, var(--br-shine) 50%, rgb(255 255 255 / .35) 54%, transparent 60%) 130% 0 / 250% 100% no-repeat;
    animation: br-eclat var(--br-cycle, 6s) ease-in-out var(--br-delai, .8s) var(--br-boucles, 5) both;
}

@keyframes br-eclat {
    0%        { background-position: 130% 0; }
    14%, 100% { background-position: -30% 0; }
}

/* Étincelle au coin, juste après le passage du reflet */
.br-eclat::before {
    content: '';
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0;
    width: 24px;
    height: 24px;
    translate: 35% -40%;
    background: radial-gradient(circle, #fff 0 13%, transparent 34%) var(--br-c1);
    -webkit-mask: var(--em-mask-star) center / contain no-repeat;
            mask: var(--em-mask-star) center / contain no-repeat;
    pointer-events: none;
    opacity: 0;
    animation: br-eclat-etoile var(--br-cycle, 6s) ease-out var(--br-delai, .8s) var(--br-boucles, 5) both;
}

@keyframes br-eclat-etoile {
    0%, 11%   { opacity: 0; transform: scale(.2) rotate(0deg); }
    17%       { opacity: 1; transform: scale(1) rotate(35deg); }
    30%, 100% { opacity: 0; transform: scale(.3) rotate(80deg); }
}

.br-eclat:is(:hover, :focus-visible)::after {
    animation: br-eclat-survol .75s ease-out both;
}

.br-eclat:is(:hover, :focus-visible)::before {
    animation: br-eclat-etoile-survol .9s ease-out both;
}

@keyframes br-eclat-survol {
    from { background-position: 130% 0; }
    to   { background-position: -30% 0; }
}

@keyframes br-eclat-etoile-survol {
    0%, 45% { opacity: 0; transform: scale(.2) rotate(0deg); }
    70%     { opacity: 1; transform: scale(1) rotate(35deg); }
    100%    { opacity: 0; transform: scale(.3) rotate(80deg); }
}

/* Variante liseré : la lumière fait le tour de la bordure (carte blanche ou ardoise) */
.br-eclat--bord::after {
    inset: -2px;
    padding: 2px;
    background: conic-gradient(from calc(var(--br-angle) + 90deg), transparent 0deg 260deg, color-mix(in srgb, var(--br-tint) 60%, transparent) 305deg, var(--br-c1) 335deg, color-mix(in srgb, var(--br-c1) 40%, #fff) 345deg, transparent 360deg);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    animation-name: br-tour;
    animation-timing-function: cubic-bezier(.45, .05, .35, 1);
}

.dark .br-eclat--bord:not(.force-light, .force-light *)::after {
    background: conic-gradient(from calc(var(--br-angle) + 90deg), transparent 0deg 260deg, color-mix(in srgb, var(--br-glow) 55%, transparent) 305deg, #fff 335deg, var(--br-tint) 345deg, transparent 360deg);
}

@keyframes br-tour {
    0%        { --br-angle: 0deg; opacity: 0; }
    4%        { opacity: 1; }
    30%       { opacity: 1; }
    36%, 100% { --br-angle: 360deg; opacity: 0; }
}

.br-eclat--bord:is(:hover, :focus-within)::after {
    animation: br-tour-survol 1.3s cubic-bezier(.45, .05, .35, 1) both;
}

@keyframes br-tour-survol {
    0%   { --br-angle: 0deg; opacity: 0; }
    10%  { opacity: 1; }
    85%  { opacity: 1; }
    100% { --br-angle: 360deg; opacity: 0; }
}

/* Liseré : la lumière part du coin haut droit, fait le tour, et allume l'étincelle en y revenant */
.br-eclat--bord::before {
    animation-name: br-eclat-etoile-bord;
}

@keyframes br-eclat-etoile-bord {
    0%, 30%   { opacity: 0; transform: scale(.2) rotate(0deg); }
    36%       { opacity: 1; transform: scale(1) rotate(35deg); }
    48%, 100% { opacity: 0; transform: scale(.3) rotate(80deg); }
}

.br-eclat--bord:is(:hover, :focus-within)::before {
    animation: br-eclat-etoile-bord-survol 1.6s ease-out both;
}

@keyframes br-eclat-etoile-bord-survol {
    0%, 75% { opacity: 0; transform: scale(.2) rotate(0deg); }
    86%     { opacity: 1; transform: scale(1) rotate(35deg); }
    100%    { opacity: 0; transform: scale(.3) rotate(80deg); }
}

/* ---------------------------------------------------------------------------------------------
 * 4. GRAINE — finition « bonbon de verre » des graines : cœur lumineux, reflet en haut à gauche,
 *    lumière qui remonte du bas, liseré clair. Fixe (aucune animation). Pour les ronds :
 *    badges de classement (--or, --argent, --bronze), pastilles de thème, fond d'avatar.
 *    --etoile : une étoile pâle au cœur (motif des graines) pour une pastille sans texte.
 * --------------------------------------------------------------------------------------------- */
.br-graine {
    --br-corps: color-mix(in srgb, var(--br-glow) 62%, var(--br-main));
    --br-fond: color-mix(in srgb, var(--br-main) 78%, #0b1020);
    position: relative;
    display: inline-grid;
    place-items: center;
    width: var(--taille, 3rem);
    aspect-ratio: 1;
    border-radius: 50%;
    font-weight: 800;
    font-size: calc(var(--taille, 3rem) * .42);
    line-height: 1;
    color: #fff;
    -webkit-text-stroke: .16em var(--br-fond);
    paint-order: stroke fill;
    background:
        radial-gradient(40% 26% at 36% 22%, rgb(255 255 255 / .95), rgb(255 255 255 / 0)),
        radial-gradient(70% 38% at 50% 104%, color-mix(in srgb, var(--br-glow) 55%, #fff), transparent),
        radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--br-glow) 80%, #fff), var(--br-corps) 52%, var(--br-fond) 100%);
    box-shadow:
        inset 0 -.12em .3em color-mix(in srgb, var(--br-fond) 50%, transparent),
        0 0 0 2px color-mix(in srgb, var(--br-glow) 40%, #fff),
        0 .3em .8em -.2em color-mix(in srgb, var(--br-main) 55%, transparent);
}

.br-graine--etoile::before {
    content: '';
    position: absolute;
    inset: 24%;
    background: rgb(255 255 255 / .55);
    -webkit-mask: var(--em-mask-star) center / contain no-repeat;
            mask: var(--em-mask-star) center / contain no-repeat;
}

.br-graine--or     { --theme-main: #a16207; --theme-glow: #fde047; }
.br-graine--argent { --theme-main: #475569; --theme-glow: #e2e8f0; }
.br-graine--bronze { --theme-main: #9a3412; --theme-glow: #fdba74; }

/* ---------------------------------------------------------------------------------------------
 * 5. VOILE — fond lumineux d'une section (le voile blanc de la fin de la vidéo) : cœur blanc,
 *    bords pastel du thème + accent. En sombre : nuit teintée, cœur coloré (jamais un écran blanc).
 *    Le cœur respire lentement (opacité, 5 s).
 * --------------------------------------------------------------------------------------------- */
.br-voile {
    position: relative;
    isolation: isolate;
    background:
        radial-gradient(48% 42% at 16% 82%, color-mix(in srgb, var(--br-glow) 34%, transparent), transparent),
        radial-gradient(44% 40% at 88% 70%, color-mix(in srgb, var(--br-c2) 16%, transparent), transparent),
        radial-gradient(50% 45% at 78% 6%, color-mix(in srgb, var(--br-light) 34%, transparent), transparent),
        color-mix(in srgb, var(--br-light) 9%, #fff);
}

.br-voile::before {
    content: '';
    position: absolute;
    z-index: -1;
    left: 50%;
    top: 32%;
    width: min(90%, 640px);
    aspect-ratio: 1.4;
    translate: -50% -50%;
    border-radius: 50%;
    background: radial-gradient(closest-side, #fff 30%, rgb(255 255 255 / .6) 60%, rgb(255 255 255 / 0));
    pointer-events: none;
    animation: br-voile 5s ease-in-out var(--br-boucles, 6) alternate both;
}

@keyframes br-voile {
    from { opacity: .7; }
    to   { opacity: 1; }
}

.dark .br-voile:not(.force-light, .force-light *) {
    background:
        radial-gradient(48% 42% at 16% 82%, color-mix(in srgb, var(--br-glow) 22%, transparent), transparent),
        radial-gradient(44% 40% at 88% 70%, color-mix(in srgb, var(--br-accent) 16%, transparent), transparent),
        radial-gradient(50% 45% at 78% 6%, color-mix(in srgb, var(--br-main) 40%, transparent), transparent),
        color-mix(in srgb, var(--br-main) 16%, #0b1020);
}

.dark .br-voile:not(.force-light, .force-light *)::before {
    background: radial-gradient(closest-side, color-mix(in srgb, var(--br-glow) 30%, transparent) 20%, color-mix(in srgb, var(--br-glow) 12%, transparent) 60%, transparent);
}

/* ---------------------------------------------------------------------------------------------
 * 6. POUSSIÈRE D'ÉTOILES — calque de fond : petites étoiles et losanges du thème + points bleu nuit
 *    (blancs en sombre), qui montent très lentement en scintillant. Deux nappes à deux vitesses.
 *    <section class="relative isolate"><span class="br-poussiere" aria-hidden="true"></span>…</section>
 * --------------------------------------------------------------------------------------------- */
.br-poussiere {
    position: absolute;
    z-index: -1;
    inset: 0;
    overflow: hidden;
    border-radius: inherit;
    pointer-events: none;
}

.br-poussiere::before,
.br-poussiere::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: calc(100% + 240px);
    -webkit-mask: var(--br-tuile-etoiles) 0 0 / 240px 240px repeat;
            mask: var(--br-tuile-etoiles) 0 0 / 240px 240px repeat;
    background: var(--br-c1);
    --br-o: .55;
    opacity: var(--br-o);
    animation:
        br-monte-240 36s linear infinite,
        br-luit 3.2s ease-in-out infinite alternate;
}

.br-poussiere::after {
    height: calc(100% + 180px);
    -webkit-mask: var(--br-tuile-points) 60px 30px / 180px 180px repeat;
            mask: var(--br-tuile-points) 60px 30px / 180px 180px repeat;
    background: var(--br-dot);
    --br-o: .35;
    animation:
        br-monte-180 48s linear infinite,
        br-luit 4.4s ease-in-out -2s infinite alternate;
}

.dark .br-poussiere:not(.force-light, .force-light *)::before { --br-o: .8; }
.dark .br-poussiere:not(.force-light, .force-light *)::after  { --br-o: .5; }

@keyframes br-monte-240 { to { transform: translateY(-240px); } }
@keyframes br-monte-180 { to { transform: translateY(-180px); } }
@keyframes br-luit      { from { opacity: calc(var(--br-o) * .55); } to { opacity: var(--br-o); } }

/* ---------------------------------------------------------------------------------------------
 * TITRE « Utoili » — le dégradé actuel (cyan → bleu), un reflet qui le traverse 3 fois au
 * chargement, et une étincelle à la place du point du dernier i (ı + étoile).
 * --------------------------------------------------------------------------------------------- */
.br-titre {
    font-weight: 800;
    font-style: italic;
    letter-spacing: -.04em;
    line-height: 1.1;
    padding-right: .08em;
    color: transparent;
    background:
        linear-gradient(105deg, transparent 40%, rgb(255 255 255 / .9) 50%, transparent 60%) 130% 0 / 250% 100% no-repeat,
        linear-gradient(135deg, #06b6d4, #2563eb);
    -webkit-background-clip: text;
            background-clip: text;
    animation: br-titre 7s ease-in-out .6s 3 both;
}

/* Mode sombre : même dégradé, éclairci (le bleu foncé se perdrait sur la nuit) */
.dark .br-titre:not(.force-light *) {
    background-image:
        linear-gradient(105deg, transparent 40%, rgb(255 255 255 / .9) 50%, transparent 60%),
        linear-gradient(135deg, #22d3ee, #60a5fa);
}

@keyframes br-titre {
    0%        { background-position: 130% 0, 0 0; }
    14%, 100% { background-position: -30% 0, 0 0; }
}

.br-titre__i {
    position: relative;
}

.br-titre__i::after {
    content: '';
    position: absolute;
    left: var(--br-i-x, 62%);
    top: var(--br-i-y, -.02em);
    width: .4em;
    height: .4em;
    translate: -50% 0;
    background: radial-gradient(circle, #fff 0 12%, transparent 32%) #ec4899;
    -webkit-mask: var(--em-mask-star) center / contain no-repeat;
            mask: var(--em-mask-star) center / contain no-repeat;
    animation: br-titre-etoile 7s ease-in-out .6s 3 both;
}

.dark .br-titre__i:not(.force-light *)::after {
    background: radial-gradient(circle, #fff 0 14%, transparent 34%) #f9a8d4;
}

/* L'étoile du i reste toujours visible : elle tourne et grossit quand le reflet arrive sur elle */
@keyframes br-titre-etoile {
    0%, 9%, 24%, 100% { transform: scale(1) rotate(0deg); }
    14%               { transform: scale(1.5) rotate(45deg); }
}

/* ---------------------------------------------------------------------------------------------
 * Règles communes : « réduire les animations » → état fixe lisible ; évaluation et impression → rien.
 * (La démo rejoue exactement ce bloc quand on coche « Mouvement réduit ».)
 * --------------------------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .br-aura::before { animation: none; opacity: .9; }
    .br-aura::after { animation: none; opacity: .45; }
    .br-aura.br-onde::after { animation: none; }
    .br-star { animation: none; opacity: .9; transform: scale(.85) rotate(15deg); }
    .br-eclat::after { animation: none; }
    .br-eclat::before { animation: none; opacity: 1; transform: scale(.75) rotate(15deg); }
    .br-eclat--bord::after { animation: none; --br-angle: 0deg; opacity: .9; }
    .br-voile::before { animation: none; opacity: 1; }
    .br-poussiere::before { animation: none; opacity: var(--br-o); }
    .br-poussiere::after { animation: none; opacity: var(--br-o); }
    .br-titre { animation: none; }
    .br-titre__i::after { animation: none; }
}

.exam-mode :is(.br-aura, .br-eclat, .br-poussiere)::before,
.exam-mode :is(.br-aura, .br-eclat, .br-poussiere)::after,
.exam-mode .br-star {
    display: none;
}

@media print {
    :is(.br-aura, .br-eclat, .br-poussiere, .br-voile)::before,
    :is(.br-aura, .br-eclat, .br-poussiere)::after,
    .br-star {
        display: none;
    }
}