/* ===================================================================
 * reichenbach.fr — catalogue des films (pages/catalog.html)
 * Chargé après styles.css. Rappel : 1rem = 10px sur ce site.
 *
 * La grille est une grille CSS : plus de Masonry ni d'imagesLoaded,
 * le filtrage (js/catalog-search.js) n'a qu'à masquer des fiches.
 * =================================================================== */

:root {
    --c-bg       : #0e0e10;
    --c-card     : #18181b;
    --c-border   : rgba(255, 255, 255, .08);
    --c-text     : #d4cfc3;
    --c-muted    : rgba(212, 207, 195, .6);
    --c-gold     : #e1a25b;                    /* même doré que l'accueil (pellicule.webp) */
    --c-gold-rgb : 225, 162, 91;
    --c-white    : #fff;
    --f-title    : 'Playfair Display', var(--font-2), Georgia, serif;   /* titres : comme avant (police chargée dans le <head>) */
    --f-sans     : var(--font-1);              /* Inter */
    --ease       : cubic-bezier(.76, 0, .2, 1);
    --ease-out   : cubic-bezier(.16, 1, .3, 1);
    --ratio      : 1.5;                        /* proportions des vignettes d'une série (ajustées sur la 1re image) */
    --stack-1    : #232327;                    /* fausses cartes derrière une série */
    --stack-2    : #1c1c1f;
}

body {
    background-color : var(--c-bg);
}

/* préchargeur : sombre et bref (au lieu d'un écran blanc d'une seconde) */
#preloader {
    background : var(--c-bg);
}

#loader > div {
    background : var(--c-white);
}

.ss-loaded #preloader {
    transition : opacity .3s ease, visibility 0s .3s;
}

/* -------------------------------------------------------------------
 * ## en-tête : titre, filtres, recherche
 * ------------------------------------------------------------------- */
.s-pageheader {
    padding-top : 3.5rem;
    text-align  : center;
}

.s-pageheader .row {
    max-width : 1520px;
}

.s-pageheader .page-title {
    margin-bottom  : 2.8rem;
    font-family    : var(--f-title);
    font-weight    : 700;
    font-size      : clamp(4rem, 6vw, 7.2rem);
    line-height    : 1;
    letter-spacing : -.02em;
    color          : var(--c-gold);
}

/* arrivée du titre : les lettres montent une à une, du flou au net, pendant que l'espacement se resserre.
   js/catalog.js découpe le titre en lettres puis ajoute .is-in quand le préchargeur disparaît. */
.page-title.is-split {
    letter-spacing : .34em;
    transition     : letter-spacing 1.6s var(--ease-out) .1s;
}

.page-title.is-split.is-in {
    letter-spacing : -.02em;
}

.page-title .cat-char {
    display   : inline-block;
    opacity   : 0;
    filter    : blur(10px);
    transform : translateY(.5em) rotate(6deg);
}

.page-title.is-in .cat-char {
    opacity    : 1;
    filter     : none;
    transform  : none;
    transition : opacity .9s ease calc(var(--i) * 90ms + 150ms),
                 filter .9s ease calc(var(--i) * 90ms + 150ms),
                 transform 1.2s var(--ease-out) calc(var(--i) * 90ms + 150ms);
}

.s-pageheader .page-title__small-type {
    display : none;
}

.filter-buttons {
    display         : flex;
    flex-wrap       : wrap;
    justify-content : center;
    gap             : 8px;
}

.filter-buttons + .filter-buttons {
    margin-top : 8px;
}

/* boutons : contour, puis remplissage qui monte au survol (comme « En savoir plus » de l'accueil) */
.filter-btn {
    position       : relative;
    isolation      : isolate;
    height         : 4rem;          /* styles.css : 6,4rem pour tous les boutons */
    margin         : 0;
    padding        : 0 2rem;
    overflow       : hidden;
    border         : 1px solid rgba(255, 255, 255, .22);
    border-radius  : 0;
    background     : transparent;
    font-family    : var(--f-sans);
    font-weight    : 600;
    font-size      : 1.2rem;
    line-height    : 3.8rem;
    letter-spacing : .14em;
    text-transform : uppercase;
    color          : var(--c-white);
    cursor         : pointer;
    transition     : color .3s ease, border-color .3s ease;
}

.filter-btn::before {
    content    : "";
    position   : absolute;
    top        : 0;
    left       : 0;
    z-index    : -1;
    width      : 100%;
    height     : 100%;
    background : var(--c-white);
    transform  : translateY(102%);
    transition : transform .4s var(--ease), background-color .3s ease;
}

/* styles.css restyle tous les boutons au survol et au focus : on neutralise */
.filter-btn:hover,
.filter-btn:focus {
    border-color     : rgba(255, 255, 255, .22);
    background-color : transparent;
    color            : var(--c-white);
    outline          : 0;
}

.filter-btn:focus-visible {
    border-color   : var(--c-white);
    color          : var(--c-bg);
    outline        : 2px solid var(--c-gold);
    outline-offset : 2px;
}

.filter-btn:focus-visible::before {
    transform : none;
}

@media (hover: hover) {
    .filter-btn:hover {
        border-color : var(--c-white);
        color        : var(--c-bg);
    }

    .filter-btn:hover::before {
        transform : none;
    }
}

/* sélectionné : rempli en doré (le remplissage monte quand on active, redescend quand on désactive) */
.filter-btn.active,
.filter-btn.active:hover,
.filter-btn.active:focus {
    border-color : var(--c-gold);
    background   : transparent;
    color        : var(--c-bg);
}

.filter-btn.active::before {
    background : var(--c-gold);
    transform  : none;
}

/* recherche */
.catalog-search {
    position    : relative;
    max-width   : 560px;
    margin      : 22px auto 0;
    font-family : var(--f-sans);
    text-align  : left;
}

.catalog-search__field {
    position   : relative;
    height     : 46px;
    border     : 1px solid rgba(255, 255, 255, .22);
    background : rgba(255, 255, 255, .04);
    transition : border-color .18s ease, background-color .18s ease;
}

.catalog-search__field:hover {
    border-color : rgba(255, 255, 255, .45);
}

.catalog-search.is-focused .catalog-search__field {
    border-color : var(--c-gold);
    background   : rgba(255, 255, 255, .07);
}

.catalog-search__icon {
    position       : absolute;
    top            : 50%;
    left           : 13px;
    width          : 20px;
    height         : 20px;
    margin-top     : -10px;
    color          : var(--c-muted);
    pointer-events : none;
}

.catalog-search__ghost,
.catalog-search input.catalog-search__input {
    box-sizing     : border-box;
    padding        : 0 44px;
    font-family    : var(--f-sans);
    font-weight    : 400;
    font-size      : 16px;          /* 16px au moins : pas de zoom automatique sur iOS */
    line-height    : 44px;
    letter-spacing : .01em;
    text-transform : none;
}

.catalog-search__ghost {
    position       : absolute;
    top            : 0;
    right          : 0;
    bottom         : 0;
    left           : 0;
    overflow       : hidden;
    white-space    : pre;
    color          : rgba(212, 207, 195, .38);
    pointer-events : none;
}

.catalog-search__ghost-typed {
    color : transparent;
}

.catalog-search input.catalog-search__input {
    position           : relative;
    z-index            : 1;
    display            : block;
    width              : 100%;
    max-width          : none;
    height             : 44px;
    margin             : 0;
    border             : 0;
    border-radius      : 0;
    outline            : 0;
    background         : transparent;
    box-shadow         : none;
    color              : var(--c-white);
    -webkit-appearance : none;
    appearance         : none;
}

.catalog-search input.catalog-search__input::placeholder {
    color   : var(--c-muted);
    opacity : 1;
}

.catalog-search input.catalog-search__input::-webkit-search-decoration,
.catalog-search input.catalog-search__input::-webkit-search-cancel-button {
    display            : none;
    -webkit-appearance : none;
}

.catalog-search button.catalog-search__clear {
    position        : absolute;
    top             : 50%;
    right           : 6px;
    z-index         : 2;
    display         : none;
    align-items     : center;
    justify-content : center;
    width           : 32px;
    height          : 32px;
    min-width       : 0;
    margin          : -16px 0 0;
    padding         : 0;
    border          : 0;
    border-radius   : 50%;
    background      : transparent;
    box-shadow      : none;
    font-size       : 0;
    line-height     : 0;
    color           : var(--c-muted);
    cursor          : pointer;
}

.catalog-search.has-value button.catalog-search__clear {
    display : flex;
}

.catalog-search button.catalog-search__clear:hover,
.catalog-search button.catalog-search__clear:focus-visible {
    background : rgba(255, 255, 255, .08);
    color      : var(--c-white);
}

.catalog-search__list {
    position   : absolute;
    top        : 52px;
    right      : 0;
    left       : 0;
    z-index    : 50;
    display    : none;
    max-height : min(60vh, 460px);
    padding    : 6px 0;
    overflow-y : auto;
    border     : 1px solid rgba(255, 255, 255, .14);
    background : var(--c-card);
    box-shadow : 0 14px 34px rgba(0, 0, 0, .6);
}

.catalog-search.is-open .catalog-search__list {
    display : block;
}

.catalog-search__group {
    padding        : 10px 16px 4px;
    font-weight    : 600;
    font-size      : 11px;
    letter-spacing : .16em;
    text-transform : uppercase;
    color          : var(--c-gold);
}

.catalog-search__option {
    display         : flex;
    align-items     : baseline;
    justify-content : space-between;
    gap             : 14px;
    padding         : 8px 16px;
    font-size       : 15px;
    line-height     : 1.35;
    color           : var(--c-text);
    cursor          : pointer;
}

.catalog-search__option.is-active {
    background : rgba(var(--c-gold-rgb), .16);
    color      : var(--c-white);
}

.catalog-search__label {
    min-width     : 0;
    overflow      : hidden;
    white-space   : nowrap;
    text-overflow : ellipsis;
}

.catalog-search__label mark {
    padding     : 0;
    background  : none;
    font-weight : 600;
    color       : var(--c-white);
}

.catalog-search__meta {
    flex-shrink    : 1;
    min-width      : 0;
    max-width      : 45%;
    overflow       : hidden;
    white-space    : nowrap;
    text-overflow  : ellipsis;
    font-size      : 12px;
    letter-spacing : .05em;
    color          : var(--c-muted);
}

.catalog-search p.catalog-search__status {
    min-height     : 20px;
    margin         : 10px 0 0;
    font-size      : 13px;
    line-height    : 20px;
    letter-spacing : .04em;
    text-align     : center;
    color          : var(--c-muted);
}

.catalog-search.is-empty p.catalog-search__status {
    color : var(--c-text);
}

/* -------------------------------------------------------------------
 * ## grille
 * Rangées alignées sur le haut ; chaque fiche garde sa propre hauteur (elle n'est pas étirée
 * à celle de la plus haute de sa rangée).
 * ------------------------------------------------------------------- */
.bricks .masonry {
    overflow : visible;        /* laisse dépasser les cartes derrière une série */
}

.bricks-wrapper {
    display               : grid;
    grid-template-columns : repeat(4, minmax(0, 1fr));
    align-items           : start;
    gap                   : 1.6rem;
}

.bricks-wrapper .brick {
    width    : auto;
    height   : auto;
    margin   : 0;
    padding  : 0;
    overflow : visible;
}

@media screen and (max-width: 1500px) {
    .bricks-wrapper {
        grid-template-columns : repeat(3, minmax(0, 1fr));
    }
}

@media screen and (max-width: 1080px) {
    .bricks-wrapper {
        grid-template-columns : repeat(2, minmax(0, 1fr));
    }
}

@media screen and (max-width: 700px) {
    .bricks-wrapper {
        grid-template-columns : minmax(0, 1fr);
    }
}

@media screen and (max-width: 420px) {
    .bricks .masonry {
        width : 88%;
    }

    .filter-btn {
        height         : 3.6rem;
        padding        : 0 1.3rem;
        line-height    : 3.4rem;
        font-size      : 1.1rem;
        letter-spacing : .1em;
    }
}

/* apparition des fiches (classe cat-anim posée par js/catalog.js : sans lui, rien n'est masqué).
   Les fiches montent en place l'une après l'autre (--d = décalage posé par le script).
   Après un filtre ou une recherche, le glissement des fiches est fait par js/catalog.js. */
.cat-anim .bricks-wrapper .brick {
    opacity   : 0;
    transform : translateY(7rem) scale(.94);
}

.cat-anim .bricks-wrapper .brick.is-in {
    opacity    : 1;
    transform  : none;
    transition : opacity .7s ease var(--d, 0ms), transform .9s var(--ease-out) var(--d, 0ms);
}

/* -------------------------------------------------------------------
 * ## fiche
 * ------------------------------------------------------------------- */
.card {
    position       : relative;
    display        : flex;
    flex-direction : column;
    margin         : 0;             /* styles.css donne marges, arrondi et ombre à .card */
    padding        : 0;
    overflow       : hidden;
    border-radius  : 0;
    box-shadow     : none;
    border         : 1px solid var(--c-border);
    background     : var(--c-card);
    transition     : border-color .3s ease;
}

.brick.entry:hover .card {
    border-color : rgba(255, 255, 255, .14);
}

/* vignette : proportions de l'image (comme avant) */
.bricks-wrapper .entry__thumb {
    position   : relative;
    overflow   : hidden;
    background : #111113;
}

.bricks-wrapper .entry__thumb .thumb-link {
    display : block;
    height  : 100%;
}

.bricks-wrapper .entry__thumb .thumb-link::before,
.bricks-wrapper .entry__thumb .thumb-link::after {
    display : none;
}

.bricks-wrapper .entry__thumb img {
    display          : block;
    width            : 100%;
    height           : auto;
    margin           : 0;
    aspect-ratio     : auto 3 / 2;      /* proportions de l'image dès qu'elle est chargée ; 3/2 avant */
    object-fit       : cover;
    transform-origin : center center;
    transition       : transform 8s cubic-bezier(.25, .46, .45, .94), filter .45s ease;
}

/* survol : l'image s'assombrit et dérive lentement, « ... » apparaît */
.brick.entry:hover .entry__thumb img {
    transform : scale(1.06) translate(-1%, -.5%);
    filter    : brightness(.55);
}

.bricks-wrapper .entry__thumb::after {
    content         : "...";
    position        : absolute;
    top             : 0;
    left            : 0;
    z-index         : 3;
    display         : flex;
    align-items     : center;
    justify-content : center;
    width           : 100%;
    height          : 100%;
    background      : rgba(0, 0, 0, .45);
    font-family     : Georgia, serif;
    font-size       : 2.8rem;
    letter-spacing  : .3em;
    color           : var(--c-white);
    opacity         : 0;
    transition      : opacity .4s ease;
    pointer-events  : none;
}

.brick.entry:hover .entry__thumb::after {
    opacity : 1;
}

/* texte */
.bricks-wrapper .entry__text {
    display        : flex;
    flex           : 1;
    flex-direction : column;
    align-items    : flex-start;
    margin         : 0;
    padding        : 1.6rem 1.6rem 1.8rem;
    color          : var(--c-white);
}

.bricks-wrapper .entry__header {
    width      : 100%;
    margin     : 0;
    padding    : 0;
    text-align : left;
}

.bricks-wrapper .entry__meta {
    display         : flex;
    flex-wrap       : wrap;
    align-items     : center;
    justify-content : flex-start;
    gap             : .5rem;
    min-width       : 0;
    margin          : 0 0 .8rem;
    padding         : 0;
    text-align      : left;
    font-family     : var(--f-sans);
    font-weight     : 500;
    font-size       : 1.1rem;
    line-height     : 1;
    letter-spacing  : .16em;
    text-transform  : uppercase;
    color           : var(--c-gold);
}

.bricks-wrapper .entry__meta .byline,
.bricks-wrapper .entry__meta .cat-links {
    display   : inline-flex;
    margin    : 0;
    font-size : inherit;
    color     : inherit;
}

.bricks-wrapper .entry__meta .cat-links:empty {
    display : none;
}

.bricks-wrapper .entry__meta .cat-links a::after,
.bricks-wrapper .entry__meta .byline::after {
    content : none;
}

.bricks-wrapper .entry__meta a {
    color : inherit;
}

.entry__meta .episode-year {
    min-width     : 0;
    padding-right : 0;
}

.bricks-wrapper .entry__title {
    margin         : 0 0 1.4rem;
    font-family    : var(--f-title);
    font-weight    : 700;
    font-size      : 2.55rem;
    line-height    : 1.15;
    letter-spacing : -.01em;
}

.bricks-wrapper .entry__title a,
.bricks-wrapper .entry__title a:visited {
    color      : var(--c-white);
    transition : color .2s ease;
}

.bricks-wrapper .entry__title a:hover {
    color : var(--c-gold);
}

.bricks-wrapper .entry__excerpt {
    margin-bottom : 1.4rem;
    font-family   : var(--f-sans);
    font-size     : 1.4rem;
    line-height   : 1.65;
    color         : rgba(255, 255, 255, .82);
}

.bricks-wrapper .entry__excerpt p {
    margin-bottom : 0;
}

/* « En savoir plus » : toujours en bas de la fiche */
.bricks-wrapper .entry__more-link {
    margin-top     : auto;
    padding-bottom : 1px;
    border-bottom  : 1px solid transparent;
    font-family    : var(--f-sans);
    font-weight    : 600;
    font-size      : 1.1rem;
    letter-spacing : .18em;
    text-transform : uppercase;
    color          : var(--c-gold);
    transition     : border-color .2s ease;
}

.bricks-wrapper .entry__more-link:hover,
.bricks-wrapper .entry__more-link:focus {
    border-bottom-color : var(--c-gold);
    color               : var(--c-gold);
}

/* -------------------------------------------------------------------
 * ## fiche « série » : pile de cartes, un épisode par carte
 * Les deux cartes visibles derrière sont les pseudo-éléments de la fiche ; au changement d'épisode
 * js/catalog.js pose .is-next / .is-prev : ces cartes se décalent, le contenu de la carte du dessus
 * apparaît en fondu. Durée de l'animation : --st-ms (lue par le JS).
 * ------------------------------------------------------------------- */
.brick.entry.stacked-episodes {
    --st-ms   : 450;
    position  : relative;
    isolation : isolate;
    padding   : 0 12px 12px 0;      /* place des cartes derrière */
}

.brick.entry.stacked-episodes::before,
.brick.entry.stacked-episodes::after {
    content    : "";
    position   : absolute;
    top        : 0;
    right      : 12px;
    bottom     : 12px;
    left       : 0;
    border     : 1px solid rgba(255, 255, 255, .07);
    background : var(--stack-2);
}

.brick.entry.stacked-episodes::before {          /* la plus basse */
    z-index   : 0;
    transform : translate(12px, 12px);
}

.brick.entry.stacked-episodes::after {           /* la suivante */
    z-index    : 1;
    background : var(--stack-1);
    transform  : translate(6px, 6px);
}

.brick.entry.stacked-episodes .card {
    z-index : 2;
}

/* un épisode = un panneau de texte ; tous dans la même cellule, la carte a la hauteur du plus haut */
.episode-content-wrapper {
    position       : relative;
    display        : flex;
    flex           : 1;
    flex-direction : column;
    overflow       : hidden;
}

.episode-slide-inner {
    display        : flex;
    flex           : 1;
    flex-direction : column;
}

.episode-texts {
    display : grid;
    flex    : 1;
}

.episode-texts > .episode-panel {
    grid-area  : 1 / 1;
    visibility : hidden;
}

.episode-texts > .episode-panel.is-current {
    visibility : visible;
}

/* vignette de série : proportions fixes, indépendantes de l'image affichée (le nom de la série est dessus, sur un dégradé) */
.brick.entry.stacked-episodes .entry__thumb {
    aspect-ratio : var(--ratio);
    min-height   : 0;
}

.brick.entry.stacked-episodes .entry__thumb .thumb-link {
    position : absolute;
    top      : 0;
    left     : 0;
    width    : 100%;
    height   : 100%;
}

.brick.entry.stacked-episodes .entry__thumb img {
    height       : 100%;
    aspect-ratio : auto;
}

.brick.entry.stacked-episodes .entry__thumb::before {
    content        : "";
    position       : absolute;
    top            : 0;
    left           : 0;
    z-index        : 2;
    width          : 100%;
    height         : 100%;
    background     : linear-gradient(to bottom, transparent 50%, rgba(14, 14, 16, .68) 76%, rgba(14, 14, 16, .94) 100%);
    pointer-events : none;
}

.brick.entry.stacked-episodes .serie-title-overlay {
    position       : absolute;
    right          : 0;
    bottom         : 0;
    left           : 0;
    z-index        : 10;
    padding        : 0 1.6rem 1.4rem;
    pointer-events : none;
}

.brick.entry.stacked-episodes .serie-title-overlay .serie-name {
    display         : block;
    font-family     : var(--f-title);
    font-weight     : 700;
    font-size       : 2rem;
    line-height     : 1.15;
    letter-spacing  : -.01em;
    text-decoration : none;
    color           : var(--c-white);
    pointer-events  : auto;
    transition      : color .2s ease;
}

.brick.entry.stacked-episodes .serie-title-overlay .serie-name:hover {
    color : var(--c-gold);
}

.brick.entry.stacked-episodes .entry__title {
    margin-bottom : 1.1rem;
    font-weight   : 600;
    font-size     : 1.7rem;
    line-height   : 1.18;
}

.brick.entry.stacked-episodes .entry__meta .byline a {
    display : none;       /* le nom de la série est déjà sur la vignette */
}

/* badge « SÉRIE 1/4 » */
.brick.entry.stacked-episodes .stack-episode-indicator {
    position       : absolute;
    top            : 10px;
    left           : 10px;
    z-index        : 30;
    display        : inline-flex;
    align-items    : center;
    gap            : 6px;
    padding        : 4px 9px 3px;
    border         : 1px solid rgba(var(--c-gold-rgb), .45);
    background     : rgba(14, 14, 16, .82);
    font-family    : var(--f-sans);
    font-weight    : 700;
    font-size      : 11px;
    line-height    : 1.4;
    letter-spacing : .16em;
    text-transform : uppercase;
    color          : var(--c-gold);
    pointer-events : none;
}

.brick.entry.stacked-episodes .stack-episode-indicator .serie-label {
    color : var(--c-white);
}

.brick.entry.stacked-episodes .stack-episode-indicator .stack-episode-counter {
    font-weight : 500;
    opacity     : .8;
}

/* flèches : une boîte aux proportions de la vignette les centre dessus à toutes les largeurs */
.brick.entry.stacked-episodes .stack-nav-controls {
    position        : absolute;
    top             : 0;
    left            : 0;
    z-index         : 30;
    display         : flex;
    align-items     : center;
    justify-content : space-between;
    width           : 100%;
    aspect-ratio    : var(--ratio);
    padding         : 0 10px;
    pointer-events  : none;
}

.brick.entry.stacked-episodes .stack-episode-btn {
    position        : relative;
    display         : inline-flex;
    align-items     : center;
    justify-content : center;
    width           : 36px;
    height          : 36px;
    margin          : 0;
    padding         : 0;
    border          : 1px solid rgba(var(--c-gold-rgb), .5);
    border-radius   : 0;
    outline         : 0;
    background      : rgba(14, 14, 16, .72);
    box-shadow      : 0 2px 8px rgba(0, 0, 0, .6);
    font-size       : 0;
    line-height     : 0;
    cursor          : pointer;
    pointer-events  : auto;
    transition      : background-color .15s ease, border-color .15s ease, transform .15s ease;
}

.brick.entry.stacked-episodes .stack-episode-btn::after {
    content    : "";
    display    : block;
    width      : 9px;
    height     : 9px;
    border     : solid var(--c-gold);
    transition : border-color .15s ease;
}

.brick.entry.stacked-episodes .stack-prev-btn::after {
    border-width : 0 0 2px 2px;
    transform    : rotate(45deg) translate(1px, -1px);
}

.brick.entry.stacked-episodes .stack-next-btn::after {
    border-width : 2px 2px 0 0;
    transform    : rotate(45deg) translate(-1px, 1px);
}

.brick.entry.stacked-episodes .stack-episode-btn:hover,
.brick.entry.stacked-episodes .stack-episode-btn:focus-visible {
    border-color : var(--c-gold);
    background   : var(--c-gold);
}

.brick.entry.stacked-episodes .stack-episode-btn:hover::after,
.brick.entry.stacked-episodes .stack-episode-btn:focus-visible::after {
    border-color : var(--c-bg);
}

.brick.entry.stacked-episodes .stack-episode-btn:active {
    transform : scale(.92);
}

/* changement d'épisode : la carte du dessus ne bouge pas, son contenu apparaît en fondu ;
   suivant : la pile avance (la carte du dessous monte, une nouvelle apparaît tout en bas)
   précédent : la pile recule (une carte sort de derrière, les autres descendent d'un cran) */
.brick.is-next .episode-slide-inner,
.brick.is-prev .episode-slide-inner {
    animation : st-fade calc(var(--st-ms) * .6ms) ease both;
}

.brick.is-next::after {
    animation : st-up calc(var(--st-ms) * 1ms) cubic-bezier(.34, 1.4, .64, 1) both;
}

.brick.is-next::before {
    animation : st-new calc(var(--st-ms) * .8ms) ease calc(var(--st-ms) * .25ms) both;
}

.brick.is-prev::after {
    animation : st-out calc(var(--st-ms) * 1ms) cubic-bezier(.34, 1.4, .64, 1) both;
}

.brick.is-prev::before {
    animation : st-down calc(var(--st-ms) * 1ms) cubic-bezier(.34, 1.4, .64, 1) both;
}

@keyframes st-fade {
    from { opacity : .35; }
    to   { opacity : 1; }
}

@keyframes st-up {                      /* la carte du dessous monte d'un cran */
    from { transform : translate(12px, 12px); }
    to   { transform : translate(6px, 6px); }
}

@keyframes st-new {                     /* une nouvelle carte apparaît tout en bas */
    from { opacity : 0; }
    to   { opacity : 1; }
}

@keyframes st-out {                     /* une carte sort de derrière celle du dessus */
    from { transform : translate(0, 0); }
    to   { transform : translate(6px, 6px); }
}

@keyframes st-down {                    /* les autres descendent d'un cran */
    from { transform : translate(6px, 6px); }
    to   { transform : translate(12px, 12px); }
}

/* -------------------------------------------------------------------
 * ## mouvement réduit
 * ------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .cat-anim .bricks-wrapper .brick,
    .cat-anim .bricks-wrapper .brick.is-in {
        opacity    : 1;
        transform  : none;
        transition : none;
    }

    .brick.is-next::before,
    .brick.is-next::after,
    .brick.is-prev::before,
    .brick.is-prev::after,
    .brick.is-next .episode-slide-inner,
    .brick.is-prev .episode-slide-inner {
        animation : none !important;
    }

    .page-title.is-split,
    .page-title.is-split.is-in {
        letter-spacing : -.02em;
        transition     : none;
    }

    .page-title .cat-char {
        opacity    : 1;
        filter     : none;
        transform  : none;
        transition : none;
    }

    .bricks-wrapper .entry__thumb img,
    .bricks-wrapper .entry__thumb::after,
    .card,
    .filter-btn,
    .filter-btn::before {
        transition : none;
    }

    .brick.entry:hover .entry__thumb img {
        transform : none;
    }
}