/* ==========================================================================
   COMPOSANTS — boutons, liens, stickers, trame, médias, badges.
   Les états animés partent toujours d'un état final lisible (sans JS = lisible).
   ========================================================================== */

/* --- Bouton : bloc franc, ombre dure qui s'écrase au clic ------------------
   L'ombre (::before) et la face (::after) sont des calques séparés pour
   n'animer que des transformations. */
.bouton {
    --b-fond: var(--bouton-fond);
    --b-texte: var(--bouton-texte);
    --b-ombre: var(--texte);
    --b-bord: var(--b-fond);
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--esp-xs);
    min-height: 3.25rem;
    padding: 0.85em 1.5em 0.8em;
    color: var(--b-texte);
    font-family: var(--f-display);
    font-size: clamp(1.125rem, 1.05rem + 0.35vw, 1.375rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    transition: translate var(--dur-rapide) var(--ease-entree);
}

.bouton::before,
.bouton::after {
    content: "";
    position: absolute;
    inset: 0;
    transition: translate var(--dur-rapide) var(--ease-entree);
}

.bouton::before {
    z-index: -2;
    background: var(--b-ombre);
    translate: var(--decalage-ombre) var(--decalage-ombre);
}

.bouton::after {
    z-index: -1;
    background: var(--b-fond);
    border: var(--trait) solid var(--b-bord);
}

.bouton:hover {
    translate: calc(var(--decalage-ombre) * -0.5) calc(var(--decalage-ombre) * -0.5);
}

.bouton:hover::before {
    translate: calc(var(--decalage-ombre) * 1.5) calc(var(--decalage-ombre) * 1.5);
}

.bouton:active {
    translate: var(--decalage-ombre) var(--decalage-ombre);
}

.bouton:active::before {
    translate: 0 0;
}

.bouton--contour {
    --b-fond: var(--fond);
    --b-texte: var(--texte);
    --b-bord: var(--texte);
}

.bouton--petit {
    --decalage-ombre: 4px;
    min-height: 2.75rem;
    padding: 0.7em 1.1em 0.65em;
    font-size: 1.0625rem;
}

.bouton[aria-current="page"]::before {
    translate: 0 0;
}

/* --- Roulement de lettres (data-roule, découpé par JS) ---------------------
   Sans JS : texte simple. Avec JS : chaque lettre glisse vers le haut, sa
   copie arrive du dessous, en cascade. */
.roule {
    display: inline-flex;
    overflow: hidden;
    line-height: 1.1;
    padding-block: 0.05em;
}

.roule__car {
    position: relative;
    display: inline-block;
    white-space: pre;
    transition: translate var(--dur-standard) var(--ease-entree);
    transition-delay: calc(var(--i, 0) * var(--stagger-lettres) * 1s);
}

.roule__car::after {
    content: attr(data-c);
    position: absolute;
    left: 0;
    top: 110%;
}

:is(a, button):hover .roule__car,
:is(a, button):focus-visible .roule__car {
    translate: 0 -110%;
}

/* --- Lien texte : soulignement qui se dessine (liens courts, sur une ligne) - */
.lien-roule {
    position: relative;
    display: inline-block;
    text-decoration: none;
}

.lien-roule::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -0.1em;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: 100% 50%;
    transition: transform var(--dur-standard) var(--ease-entree);
}

.lien-roule:hover::after,
.lien-roule:focus-visible::after,
.lien-roule[aria-current="page"]::after {
    transform: scaleX(1);
    transform-origin: 0% 50%;
}

/* --- Monogramme (SVG inline, traits en currentColor) --------------------- */
.logo {
    display: block;
    flex: none;
    color: var(--c-jaune);
    overflow: visible;
}

.logo__fond {
    fill: var(--c-noir);
}

/* Correction optique : aux petites tailles, le trait (15 unités sur 833) devient
   trop fin. On l'épaissit sans toucher au dessin (mêmes axes, mêmes centres). */
.logo g {
    stroke-width: var(--logo-trait, 15px);
}

/* --- Sticker : visuel détouré (ou photo) avec contour et ombre dure ------- */
.sticker {
    --s-contour: var(--c-creme);
    --s-ombre: var(--c-encre);
    --s-rotation: -3deg;
    position: relative;
    display: inline-block;
    rotate: var(--s-rotation);
    filter:
        drop-shadow(0 0 0 var(--s-contour))
        drop-shadow(3px 0 0 var(--s-contour))
        drop-shadow(-3px 0 0 var(--s-contour))
        drop-shadow(0 3px 0 var(--s-contour))
        drop-shadow(0 -3px 0 var(--s-contour))
        drop-shadow(var(--decalage-ombre) var(--decalage-ombre) 0 var(--s-ombre));
}

/* Variante photo (en attendant les détourages) : cadre façon tirage collé. */
.sticker--photo {
    filter: none;
    padding: 0.5rem 0.5rem 0.5rem;
    background: var(--s-contour);
    box-shadow: var(--decalage-ombre) var(--decalage-ombre) 0 var(--s-ombre);
}

/* --- Trame de demi-teinte, par-dessus un média ---------------------------- */
.trame {
    position: relative;
    isolation: isolate;
}

.trame::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background-image: radial-gradient(circle, var(--c-encre) 0.9px, transparent 1.3px);
    background-size: 4px 4px;
    mix-blend-mode: multiply;
    opacity: 0.38;
}

/* --- Média : cadre qui réserve sa place (zéro décalage de mise en page) --- */
.media {
    position: relative;
    overflow: hidden;
    background: var(--c-encre);
}

/* Costume sans photo (catalogue) : le nom du personnage en grand, « photo à venir ». */
.visuel-a-venir {
    display: grid;
    place-content: center;
    justify-items: center;
    gap: var(--esp-xs);
    width: 100%;
    height: 100%;
    padding: var(--esp-s);
    background: var(--c-encre);
    color: var(--c-jaune);
    text-align: center;
}

.visuel-a-venir__nom {
    font-family: var(--f-display);
    font-size: clamp(2rem, 1.5rem + 2vw, 3.5rem);
    font-weight: 900;
    line-height: 0.9;
    text-transform: uppercase;
}

.visuel-a-venir__note {
    color: var(--c-creme);
    font-size: var(--fs-mono);
}

.media > picture,
.media > img,
.media > video {
    width: 100%;
    height: 100%;
}

.media img,
.media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --- Badge « EXEMPLE » (dev uniquement, contenus fictifs) ----------------- */
.badge-exemple {
    display: inline-block;
    margin-inline: 0.4em;
    padding: 0.2em 0.5em 0.15em;
    background: var(--c-rouge);
    color: var(--c-creme);
    font-family: var(--f-mono);
    font-size: 0.625rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    vertical-align: middle;
    rotate: -3deg;
    white-space: nowrap;
}

/* --- Note de développement (dev uniquement) -------------------------------- */
.note-dev {
    padding: var(--esp-xs) var(--esp-s);
    border: 1px dashed currentColor;
    font-family: var(--f-mono);
    font-size: var(--fs-mono);
    line-height: 1.5;
    opacity: 0.75;
}

/* --- Ouverture de page --------------------------------------------------- */
.intro-page {
    padding-top: calc(var(--hauteur-entete) + var(--esp-xl));
    padding-bottom: var(--esp-xl);
    row-gap: var(--esp-m);
}

.intro-page__numero {
    color: var(--accent);
}

.intro-page__chapo {
    color: var(--discret);
}

@media (min-width: 48em) {
    .intro-page__titre {
        grid-column: 1 / span 7;
    }
    .intro-page__chapo {
        grid-column: 3 / span 5;
    }
    .intro-page__note {
        grid-column: 3 / span 5;
    }
}

@media (min-width: 64em) {
    .intro-page__titre {
        grid-column: 1 / span 10;
    }
    .intro-page__chapo,
    .intro-page__note {
        grid-column: 6 / span 6;
    }
}

/* Variante compacte (location, portfolio) : on va droit au catalogue. */
.intro-page--compacte {
    padding-top: calc(var(--hauteur-entete) + var(--esp-l));
    padding-bottom: var(--esp-s);
    row-gap: var(--esp-xs);
    align-items: end;
}

.intro-page--compacte .intro-page__titre {
    font-size: var(--fs-titre-section);
}

.intro-page--compacte .intro-page__chapo {
    max-width: 46ch;
    font-size: var(--fs-texte);
}

@media (min-width: 64em) {
    .intro-page--compacte .intro-page__titre { grid-column: 1 / span 7; }
    .intro-page--compacte .intro-page__chapo { grid-column: 8 / span 5; justify-self: end; }
}

/* --- Titres découpés (data-titre-split) ----------------------------------
   Avec JS, le titre attend que l'animation le prenne en charge. Filet de
   sécurité : s'il ne se passe rien en 2,5 s, il apparaît quand même. */
.js [data-titre-split]:not(.est-pret) {
    visibility: hidden;
    animation: secours-visible 0s 2.5s forwards;
}

@keyframes secours-visible {
    to {
        visibility: visible;
    }
}

/* Le masque s'étend au-dessus et au-dessous de la ligne pour ne pas rogner
   les accents des capitales (É, À) ni les jambages de l'italique. */
.ligne-masque-mask {
    padding-block: 0.2em 0.08em;
    margin-block: -0.2em -0.08em;
}

/* --- Mouvement réduit : états simples, identité conservée ---------------- */
@media (prefers-reduced-motion: reduce) {
    .bouton,
    .bouton::before,
    .roule__car,
    .lien-roule::after {
        transition-duration: 0.01s;
        transition-delay: 0s;
    }
    .bouton:hover,
    .bouton:active,
    .bouton:hover::before,
    .bouton:active::before {
        translate: none;
    }
    .bouton:hover::before {
        translate: var(--decalage-ombre) var(--decalage-ombre);
    }
    :is(a, button):hover .roule__car {
        translate: none;
    }
}

/* --- Vidéo en boucle -------------------------------------------------------- */
.video-boucle {
    position: relative;
    width: 100%;
    height: 100%;
}

.video-boucle {
    background: var(--c-encre);
}

.video-boucle > picture,
.video-boucle__video {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
}

.video-boucle__apercu,
.video-boucle__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* La vidéo reste transparente tant qu'elle ne joue pas : l'aperçu est visible. */
.js .video-boucle__video {
    opacity: 0;
    transition: opacity var(--dur-standard) linear;
}

.js .video-boucle.est-en-lecture .video-boucle__video {
    opacity: 1;
}

.video-boucle__bouton {
    position: absolute;
    right: 0.5rem;
    bottom: 0.5rem;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: rgb(12 11 9 / 0.72);
    color: var(--c-jaune);
}

.video-boucle__bouton svg {
    fill: currentColor;
}

.video-boucle__bouton .icone-pause,
.video-boucle.est-en-lecture .video-boucle__bouton .icone-lecture {
    display: none;
}

.video-boucle.est-en-lecture .video-boucle__bouton .icone-pause {
    display: inline;
}

/* --- Bandeau défilant (références) ----------------------------------------- */
.defilant {
    position: relative;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.defilant__piste {
    display: flex;
    flex-wrap: wrap;
    gap: var(--esp-s) var(--esp-l);
    width: max-content;
    max-width: 100%;
    padding-inline: var(--marge);
}

.defilant.est-anime .defilant__piste {
    flex-wrap: nowrap;
    max-width: none;
    padding-inline: 0;
    animation: defiler var(--defilant-duree, 40s) linear infinite;
}

.defilant.est-anime:hover .defilant__piste,
.defilant.est-anime:focus-within .defilant__piste,
.defilant.est-en-pause .defilant__piste {
    animation-play-state: paused;
}

@keyframes defiler {
    to {
        transform: translateX(-50%);
    }
}

.defilant__pause {
    display: block;
    min-height: 44px;
    margin: var(--esp-xs) var(--marge) 0 auto;
    padding-inline: var(--esp-s);
    color: var(--discret);
}

@media (prefers-reduced-motion: reduce) {
    .defilant.est-anime .defilant__piste {
        animation: none;
        flex-wrap: wrap;
    }
}

/* --- Bouton géant (rappel final) ------------------------------------------- */
.bouton--geant {
    --decalage-ombre: 10px;
    min-height: 4.5rem;
    padding: 0.9em 1.6em 0.85em;
    font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.75rem);
}

/* --- Filtres en puces (location, portfolio) ------------------------------- */
.filtres__groupe {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: flex-start;
    gap: var(--esp-2xs);
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.filtres__legende {
    width: 100%;
    margin-bottom: var(--esp-2xs);
    padding: 0;
    color: var(--discret);
}

.puce {
    position: relative;
    display: inline-flex;
}

.puce input {
    position: absolute;
    inset: 0;
    opacity: 0;
    margin: 0;
    cursor: pointer;
}

.puce span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0.4rem 1rem;
    border: var(--trait) solid currentColor;
    border-radius: 999px;
    white-space: nowrap;
    font-family: var(--f-mono);
    font-size: var(--fs-mono);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    transition: background-color var(--dur-rapide) linear, color var(--dur-rapide) linear;
}

.puce input:checked + span {
    background: var(--c-encre);
    border-color: var(--c-encre);
    color: var(--c-jaune);
}

.puce input:hover + span {
    background: rgb(20 18 16 / 0.08);
}

.puce input:checked:hover + span {
    background: var(--c-encre);
}

.puce input:focus-visible + span {
    outline: var(--trait) solid var(--accent);
    outline-offset: 3px;
}

.js .filtres__valider {
    display: none;
}