/* ==========================================================================
   Final Playlist — Landing / Home
   Design system light (réutilisable via tokens --fp-*)
   ========================================================================== */

.page-home {
    scroll-padding-top: 90px;
    --fp-bg: #ffffff;
    --fp-bg-soft: #f4f4f5;
    --fp-bg-muted: #ececee;
    --fp-ink: #111111;
    --fp-ink-soft: #3a3a3c;
    --fp-ink-muted: #8a8a8e;
    --fp-ink-faint: #b0b0b4;
    --fp-border: rgba(17, 17, 17, 0.08);
    --fp-dark: #0d0d0d;
    --fp-dark-elevated: #1a1a1a;
    --fp-hero-grad: linear-gradient(
        135deg,
        #e8eef2 0%,
        #eef3f0 42%,
        #f5f3ee 100%
    );
    --fp-radius-sm: 16px;
    --fp-radius-md: 28px;
    --fp-radius-lg: 40px;
    --fp-radius-xl: 48px;
    --fp-radius-pill: 999px;
    --fp-font: var(--font-sans);
    --fp-font-mono: var(--font-mono);
    --fp-max: 1200px;
    /* Largeur du viewport SANS la scrollbar verticale, que `100vw` inclut (~15px
       sous Windows) — sinon tout le carousel part de quelques px vers la droite.
       --fp-scrollbar est mesurée en JS (app.js) et posée sur :root ; ne pas la
       redéclarer ici, ça écraserait la mesure. */
    --fp-vw: calc(100vw - var(--fp-scrollbar, 0px));
    --fp-gutter: clamp(1.25rem, 4vw, 2.5rem);
    --fp-section-y: clamp(4.5rem, 10vw, 7.5rem);
    --fp-shadow-soft: 0 20px 60px -30px rgba(0, 0, 0, 0.18);

    font-family: var(--fp-font);
    background: var(--fp-bg);
    color: var(--fp-ink);
    overflow-x: clip;
}

/* Thème sombre de la page profil en mode hommage : ne redéfinit que les tokens
   --fp-*, tout composant qui les consomme (au lieu d'une couleur en dur) suit
   automatiquement. Les rares couleurs codées en dur dans les composants du
   profil sont surchargées explicitement plus bas, sous le même sélecteur. */
.fp-profile-page--tribute {
    --fp-bg: #0d0d0d;
    --fp-bg-soft: #17171a;
    --fp-bg-muted: #1f2023;
    --fp-ink: #f5f5f5;
    --fp-ink-soft: #c7c7cc;
    --fp-ink-muted: #8a8a8e;
    --fp-ink-faint: #58585c;
    --fp-border: rgba(255, 255, 255, 0.12);
    --fp-hero-grad: linear-gradient(
        135deg,
        #14161a 0%,
        #121412 42%,
        #17150f 100%
    );
    --fp-shadow-soft: 0 20px 60px -30px rgba(0, 0, 0, 0.6);
}

.page-home::before,
.page-home::after {
    display: none !important;
}

.page-home .ambient-blob {
    display: none !important;
}

.page-home main {
    overflow-x: clip;
}

/* --- Typography resets scoped to landing ---
   Référence unique pour toute la page : le contenu du hero (.fp-band-content).
   Titres en 600 / -0.025em / 1, textes en 20px / 500 / 1.25 / --fp-ink-soft.
   Seule la TAILLE des titres varie d'une section à l'autre. */
.page-home h1,
.page-home h2,
.page-home h3,
.page-home h4 {
    font-family: var(--fp-font);
    font-weight: 600;
    letter-spacing: -0.025em;
    text-transform: none;
    line-height: 1;
    color: var(--fp-ink);
}

.page-home p {
    font-size: 20px;
    font-weight: 500;
    line-height: 1.25;
    color: var(--fp-ink-soft);
    max-width: none;
}

.page-home a:hover {
    text-shadow: none;
}

/* --- Layout helpers --- */
.fp-wrap {
    width: min(100% - (var(--fp-gutter) * 2), var(--fp-max));
    margin-inline: auto;
}

/* Retrait horizontal commun aux blocs de contenu de la landing. */
.fp-section-head,
.fp-steps-list,
.fp-stats,
.fp-story-copy,
.fp-faq-layout,
.fp-footer-top,
.fp-footer-bottom {
    padding-inline: 32px;
}

/* Même style que le texte courant, en 600 au lieu de 500. */
.fp-eyebrow {
    display: inline-block;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--fp-ink-soft);
    margin-bottom: 0.85rem;
}

/* --- Buttons --- */
.fp-btn {
    user-select: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 12px 32px;
    border: none;
    border-radius: var(--fp-radius-pill);
    background: var(--fp-ink);
    color: #fff;
    font-family: var(--fp-font);
    font-size: 20px;
    font-weight: 400;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.fp-btn::before {
    display: none;
}

.fp-btn:hover {
    color: #fff;
    text-decoration: none;
    transform: scale(1.025);
}

.fp-btn:active {
    transform: scale(0.98);
}

.fp-btn-sm {
    padding: 0.7rem 1.25rem;
    font-size: 0.875rem;
}

.fp-btn--ghost {
    background: #e8e8e8;
    color: #747474;
}
.fp-btn--ghost:hover {
    color: var(--fp-ink);
}

.fp-profile-follow-form {
    margin: 0;
}

/* Icône du bouton, calée sur la taille du libellé. */
.fp-btn .material-symbols-rounded {
    font-size: 1.25em;
    font-weight: 300;
}

.fp-icon-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--fp-border);
    background: #fff;
    color: var(--fp-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition:
        background 0.2s ease,
        transform 0.2s ease,
        opacity 0.2s ease;
}

.fp-icon-btn:hover:not(:disabled) {
    background: var(--fp-bg-soft);
    transform: scale(1.05);
}

.fp-icon-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.fp-icon-btn svg {
    width: 18px;
    height: 18px;
}

/* --- Progressive blur component ---
   Six stacked layers, each masked to its own overlapping band with the blur
   radius doubling from one band to the next. The bands are deliberately
   disjoint: a pixel is blurred by the one or two layers whose band covers it,
   which is what produces the graduated ramp.

   --progressive-blur-mask-direction points from the WEAKEST blur toward the
   STRONGEST. `to bottom` = sharp at the top, blur building downward; `to top`
   flips the ramp without a transform (a transform on an element carrying
   backdrop-filter changes how the backdrop is sampled).
   --progressive-blur-direction only drives the colour wash in ::before. */
.progressive-blur {
    --progressive-blur-height: 160px;
    --progressive-blur-color: rgb(255 255 255 / 96%);
    --progressive-blur-direction: to bottom;
    --progressive-blur-mask-direction: to bottom;
    --progressive-blur-step-1: 0.5px;
    --progressive-blur-step-2: 1px;
    --progressive-blur-step-3: 2px;
    --progressive-blur-step-4: 4px;
    --progressive-blur-step-5: 8px;
    --progressive-blur-step-6: 16px;

    position: absolute;
    inset: 0 0 auto;
    z-index: 0;
    height: var(--progressive-blur-height);
    pointer-events: none;
}

/* Variante horizontale : bande verticale collée à un bord, de largeur
   --progressive-blur-width. Le bord d'ancrage (left/right) est posé par la règle
   qui l'utilise ; seules l'orientation et la mesure changent ici, les six couches
   et le dégradé pilotés par --progressive-blur-*-direction restent identiques. */
.progressive-blur--x {
    --progressive-blur-width: 160px;

    inset: 0 auto 0 0;
    width: var(--progressive-blur-width);
    height: auto;
}

.progressive-blur::before,
.progressive-blur__layer {
    position: absolute;
    inset: 0;
}

/* Painted ON TOP of the layers. As a sibling underneath them it would become
   the backdrop they sample, and blurring a flat wash yields the same flat wash
   — the blur would be invisible and only the gradient would show. */
.progressive-blur::before {
    content: "";
    z-index: 1;
    background: linear-gradient(
        var(--progressive-blur-direction),
        var(--progressive-blur-color) 0%,
        transparent 100%
    );
}

.progressive-blur__layer:nth-of-type(1) {
    -webkit-backdrop-filter: blur(var(--progressive-blur-step-1));
    backdrop-filter: blur(var(--progressive-blur-step-1));
    -webkit-mask-image: linear-gradient(
        var(--progressive-blur-mask-direction),
        #000 0%,
        #000 15%,
        transparent 30%
    );
    mask-image: linear-gradient(
        var(--progressive-blur-mask-direction),
        #000 0%,
        #000 15%,
        transparent 30%
    );
}

.progressive-blur__layer:nth-of-type(2) {
    -webkit-backdrop-filter: blur(var(--progressive-blur-step-2));
    backdrop-filter: blur(var(--progressive-blur-step-2));
    -webkit-mask-image: linear-gradient(
        var(--progressive-blur-mask-direction),
        transparent 10%,
        #000 25%,
        #000 40%,
        transparent 55%
    );
    mask-image: linear-gradient(
        var(--progressive-blur-mask-direction),
        transparent 10%,
        #000 25%,
        #000 40%,
        transparent 55%
    );
}

.progressive-blur__layer:nth-of-type(3) {
    -webkit-backdrop-filter: blur(var(--progressive-blur-step-3));
    backdrop-filter: blur(var(--progressive-blur-step-3));
    -webkit-mask-image: linear-gradient(
        var(--progressive-blur-mask-direction),
        transparent 25%,
        #000 40%,
        #000 55%,
        transparent 70%
    );
    mask-image: linear-gradient(
        var(--progressive-blur-mask-direction),
        transparent 25%,
        #000 40%,
        #000 55%,
        transparent 70%
    );
}

.progressive-blur__layer:nth-of-type(4) {
    -webkit-backdrop-filter: blur(var(--progressive-blur-step-4));
    backdrop-filter: blur(var(--progressive-blur-step-4));
    -webkit-mask-image: linear-gradient(
        var(--progressive-blur-mask-direction),
        transparent 40%,
        #000 55%,
        #000 70%,
        transparent 85%
    );
    mask-image: linear-gradient(
        var(--progressive-blur-mask-direction),
        transparent 40%,
        #000 55%,
        #000 70%,
        transparent 85%
    );
}

.progressive-blur__layer:nth-of-type(5) {
    -webkit-backdrop-filter: blur(var(--progressive-blur-step-5));
    backdrop-filter: blur(var(--progressive-blur-step-5));
    -webkit-mask-image: linear-gradient(
        var(--progressive-blur-mask-direction),
        transparent 55%,
        #000 70%,
        #000 85%,
        transparent 100%
    );
    mask-image: linear-gradient(
        var(--progressive-blur-mask-direction),
        transparent 55%,
        #000 70%,
        #000 85%,
        transparent 100%
    );
}

.progressive-blur__layer:nth-of-type(6) {
    -webkit-backdrop-filter: blur(var(--progressive-blur-step-6));
    backdrop-filter: blur(var(--progressive-blur-step-6));
    -webkit-mask-image: linear-gradient(
        var(--progressive-blur-mask-direction),
        transparent 70%,
        #000 85%,
        #000 100%
    );
    mask-image: linear-gradient(
        var(--progressive-blur-mask-direction),
        transparent 70%,
        #000 85%,
        #000 100%
    );
}

/* --- Nav --- */
.fp-nav {
    position: sticky;
    top: 0;
    z-index: 1000;
    isolation: isolate;
    border: 0;
}

.fp-nav-inner {
    width: min(100%, var(--fp-max));
    margin-inline: auto;
    padding-inline: 32px;
    min-height: 76px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    position: relative;
    z-index: 1;
}

/* Pinned to the top of the viewport: strongest blur sits under the navbar and
   eases off downward, so the ramp runs `to top`. */
.fp-nav-blur {
    --progressive-blur-height: 132px;
    --progressive-blur-color: rgb(255 255 255 / 96%);
    --progressive-blur-direction: to bottom;
    --progressive-blur-mask-direction: to top;
}

.fp-logo {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    color: var(--fp-ink);
    text-decoration: none;
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: -0.03em;
}

.fp-logo:hover {
    color: var(--fp-ink);
    text-decoration: none;
}

.fp-logo-mark {
    width: 48px;
    height: 48px;
    object-fit: contain;
    flex-shrink: 0;
    display: block;
}

.fp-logo-title {
    width: auto;
    height: 40px;
    max-width: min(50vw, 175px);
    display: block;
}

.fp-nav-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* --- Account menu --- */
.fp-account-menu {
    position: relative;
}

.fp-account-menu-trigger {
    border: none;
}

.fp-account-menu-trigger[aria-expanded="true"] {
    transform: scale(1.025);
}

.fp-account-menu-panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 1100;
    width: min(280px, calc(100vw - 32px));
    padding: 8px;
    background: #fff;
    border: 1px solid var(--fp-border, rgba(0, 0, 0, 0.1));
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
}

.fp-account-menu-panel[hidden] {
    display: none;
}

.fp-account-menu-identity {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px 12px;
}

.fp-account-menu-identity strong {
    font-size: 14px;
    color: var(--fp-ink, #111);
}

.fp-account-menu-identity span {
    font-size: 12px;
    color: var(--fp-ink-muted, #777);
}

.fp-account-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    color: var(--fp-ink, #111);
    font-size: 14px;
    text-decoration: none;
    transition: background 0.15s ease;
}

.fp-account-menu-item:hover {
    background: var(--fp-bg-muted, #f5f5f5);
    color: var(--fp-ink, #111);
    text-decoration: none;
}

.fp-account-menu-item .material-symbols-rounded {
    font-size: 20px;
    font-weight: 500;
    color: var(--fp-ink-soft, #555);
}

.fp-account-menu-item--danger {
    color: #b42318;
}

.fp-account-menu-item--danger .material-symbols-rounded {
    color: #b42318;
}

.fp-account-menu-item--danger:hover {
    background: #fff0ef;
    color: #b42318;
}

.fp-account-menu-sep {
    height: 1px;
    margin: 6px 8px;
    background: var(--fp-border, rgba(0, 0, 0, 0.08));
}

/* Sur la nav glass sombre, le bouton garde le style fp-btn noir. */
.fp-account-menu--dark .fp-account-menu-panel {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}

/* --- Hero / CTA band --- */
.fp-hero {
    padding: 32px 0 0;
}

.fp-band {
    position: relative;
    display: block;
    min-height: clamp(440px, 52vw, 580px);
    /* Fallback for browsers without support for `corner-shape`. */
    border-radius: 64px;
    background: var(--fp-hero-grad);
    overflow: hidden;
    box-shadow: 0 0 32px 0 rgb(0 0 0 / 10%);
}

/* Surface overlay: the inner stroke and highlight stay above all Hero layers. */
.fp-band::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    border-radius: inherit;
    pointer-events: none;
    box-shadow:
        inset 0 0 0 2px rgb(0 0 0 / 10%),
        inset 0 0 30px 12px rgb(255 255 255 / 50%);
}

/* `corner-shape` is progressively enhanced: `border-radius` remains the fallback. */
@supports (corner-shape: squircle) {
    .fp-band,
    .fp-band::after {
        corner-shape: squircle;
    }
}

.fp-band-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 64px;
    position: relative;
    z-index: 2;
    max-width: min(36rem, 52%);
    min-height: inherit;
}

/* Graisse, interlettrage et interlignage viennent du reset .page-home h1-h4 :
   seules la taille et la marge sont propres au hero. */
.fp-band-content h1,
.fp-band-content h2 {
    font-size: clamp(2.6rem, 5.4vw, 4.35rem);
    margin-bottom: 24px;
}

.fp-hero-title {
    background: linear-gradient(to bottom, #000000, #5a5a5a);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.fp-hero-title span {
    display: block;
}

.fp-band-content p {
    max-width: 28ch;
    margin-bottom: 1.75rem;
}

.fp-band-media {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.fp-band-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 62% 42%;
}

.fp-hero-discover {
    display: flex;
    width: 100%;
    justify-content: center;
    padding-top: 24px;
    color: rgba(0, 0, 0, 0.5);
    font-family: var(--fp-font-mono);
    font-size: 16px;
    font-weight: 400;
    letter-spacing: -0.025em;
    text-decoration: none;
    text-align: center;
    text-transform: uppercase;
}

.fp-hero-discover:hover {
    color: var(--fp-ink);
    text-decoration: none;
}

.fp-band--cta .fp-band-content {
    max-width: min(40rem, 58%);
}

.fp-band--cta .fp-band-media img {
    object-position: 78% 35%;
}

.fp-band--cta .fp-band-media::after {
    background: linear-gradient(
        100deg,
        rgba(236, 241, 243, 0.98) 0%,
        rgba(236, 241, 243, 0.95) 38%,
        rgba(236, 241, 243, 0.55) 55%,
        rgba(236, 241, 243, 0.15) 70%,
        transparent 82%
    );
}

.fp-band--cta {
    margin-top: 0;
}

.fp-band--cta .fp-band-content p {
    max-width: 34ch;
}

/* --- Steps ---
   Toutes les longueurs sont exprimées en unités absolues ou en `vw`, jamais en
   `%`. Une custom property est substituée TEXTUELLEMENT : un `%` serait résolu
   contre chaque élément consommateur, et la content-box du track — amputée de
   ses deux gouttières — rendrait la card 64px trop étroite.
   `--fp-vw` compense la scrollbar verticale, que `100vw` inclut (~15px). */
.fp-steps {
    padding: var(--fp-section-y) 0 calc(var(--fp-section-y) * 0.75);
}

/* Retrait de 32px commun (cf. liste groupée plus haut). `max-width` compensée
   d'autant : en border-box le padding se déduit de la largeur. */
.fp-section-head {
    max-width: calc(38rem + 64px);
    margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}

.fp-section-head h2 {
    font-size: clamp(2rem, 4vw, 3.1rem);
    margin-bottom: 0.85rem;
}

/* Taille, graisse et couleur héritées de .page-home p. */
.fp-section-head p {
    max-width: 42ch;
}

/* Grille typographique : les 3 étapes visibles d’un coup, sans carousel. */
.fp-steps-list {
    list-style: none;
    margin: 0;
    padding-block: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1.75rem, 3vw, 2.5rem);
    counter-reset: none;
}

.fp-step {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.85rem;
    padding-top: clamp(1.5rem, 3vw, 2rem);
    min-width: 0;
    animation: fp-fade-up 0.7s cubic-bezier(0.4, 0, 0.2, 1) both;
}

/* Stroke en dégradé partagé : 0→25%, 25→50%, 50→75% — une rampe continue. */
.fp-step::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 2px;
    background: linear-gradient(
        to right,
        rgb(17 17 17 / var(--fp-step-from)),
        rgb(17 17 17 / var(--fp-step-to))
    );
}

.fp-step:nth-child(1) {
    --fp-step-from: 0%;
    --fp-step-to: 25%;
    animation-delay: 0.05s;
}

.fp-step:nth-child(2) {
    --fp-step-from: 25%;
    --fp-step-to: 50%;
    animation-delay: 0.15s;
}

.fp-step:nth-child(3) {
    --fp-step-from: 50%;
    --fp-step-to: 75%;
    animation-delay: 0.25s;
}

.fp-step-index {
    font-size: clamp(2.75rem, 5vw, 3.5rem);
    font-weight: 700;
    letter-spacing: -0.06em;
    line-height: 1;
    color: rgb(17 17 17 / 14%);
    margin-bottom: 0.15rem;
}

.fp-step h3 {
    font-size: clamp(1.2rem, 1.9vw, 1.4rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.25;
    margin: 0;
}

.fp-step p {
    max-width: 32ch;
    margin: 0;
}

/* --- Story (full-bleed) --- */
.fp-story {
    padding: 0 0 var(--fp-section-y);
}

.fp-story-frame {
    position: relative;
    width: 100%;
    overflow: hidden;
    aspect-ratio: 21 / 9;
    min-height: clamp(360px, 52vw, 620px);
    background: var(--fp-bg-soft);
}

.fp-story-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 42%;
    display: block;
}

.fp-story-frame::before,
.fp-story-frame::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    z-index: 1;
    pointer-events: none;
}

.fp-story-frame::before {
    top: 0;
    height: 22%;
    background: linear-gradient(180deg, #fff 0%, transparent 100%);
}

.fp-story-frame::after {
    bottom: 0;
    height: 58%;
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(255, 255, 255, 0.45) 40%,
        #fff 100%
    );
}

/* max-width compensée du padding de 32px (cf. règle groupée) : en border-box il
   se déduit de la largeur, sinon la colonne se resserrerait au lieu de se décaler. */
.fp-story-copy {
    position: absolute;
    left: max(var(--fp-gutter), calc((100% - var(--fp-max)) / 2));
    bottom: clamp(1.75rem, 4vw, 3.25rem);
    z-index: 2;
    max-width: min(calc(36rem + 64px), 70%);
}

.fp-story-copy h2 {
    font-size: clamp(1.85rem, 3.5vw, 2.85rem);
    margin-bottom: 0.85rem;
    color: var(--fp-ink);
}

.fp-story-copy p {
    max-width: 42ch;
}

/* --- Problem ---
   Les stats « création musicale / IA » sont retirées du markup tant que
   MUREKA n’est pas live ; on garde seulement le bloc éditorial. */
.fp-problem {
    padding: 0 0 calc(var(--fp-section-y) * 0.75);
}

.fp-problem .fp-section-head {
    max-width: 34rem;
}

.fp-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

/* Chaque stat porte sa propre stroke de 2px en dégradé, d'où l'absence de
   border-top sur .fp-stats et de séparateurs verticaux entre les colonnes. */
.fp-stat {
    position: relative;
    padding-top: clamp(1.5rem, 3vw, 2rem);
    padding-right: 1rem;
}

/* Chaque stroke est un dégradé horizontal entre deux paliers d'opacité, et les
   paliers s'enchaînent d'une colonne à l'autre : 0→25%, 25→50%, 50→75%. Bout à
   bout, les trois strokes forment une seule rampe continue qui s'assombrit. */
.fp-stat::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 2px;
    background: linear-gradient(
        to right,
        rgb(17 17 17 / var(--fp-stat-from)),
        rgb(17 17 17 / var(--fp-stat-to))
    );
}

.fp-stat:nth-child(1) {
    --fp-stat-from: 0%;
    --fp-stat-to: 25%;
}
.fp-stat:nth-child(2) {
    --fp-stat-from: 25%;
    --fp-stat-to: 50%;
}
.fp-stat:nth-child(3) {
    --fp-stat-from: 50%;
    --fp-stat-to: 75%;
}

/* wght 300 : icône accompagnée d'un texte (les flèches seules restent en 500).
   `font-weight` est ici indispensable et non décoratif : les deux <link> Google
   déclarent deux @font-face de MÊME famille et de poids différents (300 / 500),
   alors que la classe .material-symbols-rounded impose `font-weight: normal`
   (400). Sans poids explicite, la sélection tombe à côté et la ligature `liga`
   qui change `interests` en glyphe ne s'applique pas — le nom s'affiche en
   toutes lettres. font-variation-settings n'y suffit pas : il n'intervient
   qu'après le choix de la fonte. */
.fp-stat-icon {
    display: block;
    margin-bottom: 1rem;
    font-size: 40px;
    font-weight: 300;
    font-variation-settings:
        "opsz" 24,
        "FILL" 0,
        "GRAD" 0;
    line-height: 1;
    color: var(--fp-ink);
}

/* Même style que .fp-band-content p. */
.fp-stat-text {
    max-width: 28ch;
}

/* --- Voilà + gallery (full-bleed scroll) --- */
/* `clip` et non `hidden` : hidden créerait un conteneur de défilement qui
   empêcherait le track de scroller sur mobile. */
.fp-voila {
    padding: calc(var(--fp-section-y) * 0.45) 0 var(--fp-section-y);
    overflow-x: clip;
}

.fp-voila .fp-section-head h2 {
    font-size: clamp(2.4rem, 5vw, 3.6rem);
}

/* Pyramide centrée, pleine largeur (pas de contrainte 1200px pour l'instant).
   Covers alignées sur leur HAUT : la pyramide se creuse vers le bas. */
.fp-gallery-track {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: clamp(0.85rem, 1.8vw, 1.35rem);
    margin-top: 2.5rem;
    padding-inline: var(--fp-gutter);
    padding-bottom: 0.75rem;
}

/* Bandes de flou latérales. Elles couvrent l'espace compris entre le bord du
   track et la limite invisible de 1200px au centre — au-delà de 1200px de
   viewport, il n'y a plus rien à estomper et la largeur tombe à 0.
   Le flou monte vers l'EXTÉRIEUR : net au contact des 1200px centraux, de plus
   en plus flou vers le bord de l'écran. --progressive-blur-mask-direction pointe
   du plus faible vers le plus fort, d'où `to left` à gauche et `to right` à
   droite (l'inverse du ramp vertical de la navbar). */
.fp-gallery-blur {
    --progressive-blur-width: max(0px, (var(--fp-vw) - var(--fp-max)) / 2);
    --progressive-blur-color: rgb(255 255 255 / 96%);

    z-index: 2;
}

.fp-gallery-blur--left {
    --progressive-blur-direction: to right;
    --progressive-blur-mask-direction: to left;

    inset: 0 auto 0 0;
}

.fp-gallery-blur--right {
    --progressive-blur-direction: to left;
    --progressive-blur-mask-direction: to right;

    inset: 0 0 0 auto;
}

/* Paliers de la pyramide : 240 · 320 · 400. La largeur descend en `vw` sur les
   écrans étroits, et le ratio 1:1 est porté par .fp-gallery-media. */
.fp-gallery-card {
    --fp-cover: 240px;

    flex: 0 0 auto;
    width: var(--fp-cover);
}

.fp-gallery-card--xs {
    --fp-cover: min(18vw, 240px);
}
.fp-gallery-card--sm {
    --fp-cover: min(24vw, 320px);
}
.fp-gallery-card--lg {
    --fp-cover: min(30vw, 400px);
}

/* Même traitement de surface que .fp-band : squircle, ombre portée douce, et
   overlay ::after portant le liseré interne + le halo blanc. */
.fp-gallery-media {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    border-radius: 64px;
    overflow: hidden;
    background: var(--fp-bg-soft);
    box-shadow: 0 0 32px 0 rgb(0 0 0 / 10%);
}

.fp-gallery-media::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
    pointer-events: none;
    box-shadow:
        inset 0 0 0 2px rgb(0 0 0 / 10%),
        inset 0 0 30px 12px rgb(255 255 255 / 50%);
}

@supports (corner-shape: squircle) {
    .fp-gallery-media,
    .fp-gallery-media::after {
        corner-shape: squircle;
    }
}

.fp-gallery-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Titre puis auteur en dessous, centrés sous la cover. */
.fp-gallery-card figcaption {
    margin-top: 0.85rem;
    text-align: center;
}

/* Même style que .page-home p — redéclaré car ce sont des <span>, qui n'héritent
   pas de cette règle. La casse n'est plus forcée : le texte s'affiche tel qu'il
   est saisi dans les traductions. */
.fp-gallery-title,
.fp-gallery-author {
    display: block;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.25;
}

.fp-gallery-title {
    color: var(--fp-ink);
}

.fp-gallery-author {
    margin-top: 0.15rem;
    color: rgb(17 17 17 / 50%);
}

/* --- Devices (dark) --- */
.fp-devices {
    background: linear-gradient(to bottom, #000000, #2c2c2c);
    color: #fff;
    padding: var(--fp-section-y) 0;
    margin-top: 1rem;
}

.fp-devices .fp-section-head h2 {
    color: #fff;
    font-size: clamp(2rem, 4vw, 3rem);
}

/* Sur fond sombre, l'eyebrow hérite sinon de --fp-ink-soft : noir sur noir. */
.fp-devices .fp-section-head p,
.fp-devices .fp-eyebrow {
    color: rgba(255, 255, 255, 0.62);
}

.fp-phones {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1rem, 2.5vw, 1.75rem);
    margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

/* Même traitement de surface que .fp-band, en version sombre.
   Colonne : le texte en haut, le mockup collé en bas (margin-top: auto). */
.fp-phone-slot {
    position: relative;
    background: #181919;
    /* Fallback pour les navigateurs sans `corner-shape`. */
    border-radius: 64px;
    padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1.25rem, 2.5vw, 2rem) 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: clamp(320px, 42vw, 460px);
    overflow: hidden;
    box-shadow: 0 0 32px 0 rgb(0 0 0 / 10%);
}

/* Overlay de surface : stroke et halo restent au-dessus du contenu. */
.fp-phone-slot::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    border-radius: inherit;
    pointer-events: none;
    box-shadow:
        inset 0 0 0 2px rgb(255 255 255 / 5%),
        inset 0 0 30px 12px rgb(255 255 255 / 10%);
}

@supports (corner-shape: squircle) {
    .fp-phone-slot,
    .fp-phone-slot::after {
        corner-shape: squircle;
    }
}

/* Texte du slot : centré, au-dessus du mockup.
   Sélecteur qualifié par .fp-devices : `.page-home p` vaut (0,1,1) et écraserait
   sinon `color` et `max-width`, quelle que soit la position dans le fichier. */
.fp-devices .fp-phone-caption {
    max-width: 22ch;
    margin-bottom: clamp(0.5rem, 1.2vw, 0.85rem);
    text-align: center;
    color: rgb(255 255 255 / 100%);
}

/* `margin-top: auto` pousse le mockup en bas du slot, quelle que soit la
   hauteur du texte — les trois téléphones restent alignés entre eux.
   Le débord bas se fait par marge négative et non par translateY : la transform
   ne réservait pas d'espace, et se cumulait à `margin-top: auto` en enfonçant le
   mockup loin sous la légende. */
.fp-phone {
    width: min(100%, 220px);
    aspect-ratio: 9 / 19;
    background: #000;
    border-radius: 28px;
    border: 3px solid #2a2a2a;
    box-shadow:
        0 30px 60px -20px rgba(0, 0, 0, 0.7),
        inset 0 0 0 1px #111;
    overflow: hidden;
    position: relative;
    margin-top: auto;
    /* En px : un % de marge se résout sur la LARGEUR du conteneur, pas sa hauteur. */
    margin-bottom: clamp(-48px, -6vw, -24px);
}

.fp-phone-notch {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 38%;
    height: 16px;
    background: #000;
    border-radius: 12px;
    z-index: 2;
}

.fp-phone-screen {
    position: absolute;
    inset: 0;
    padding: 2.1rem 0.7rem 0.7rem;
    background: #0f0f10;
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    overflow: hidden;
}

.fp-phone-screen h4 {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #fff;
    text-transform: none;
}

.fp-phone-screen .fp-phone-meta {
    font-size: 0.58rem;
    color: rgba(255, 255, 255, 0.45);
}

.fp-phone-row {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.35rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.fp-phone-row img,
.fp-phone-thumb {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    object-fit: cover;
    background: #222;
    flex-shrink: 0;
}

.fp-phone-row span {
    font-size: 0.58rem;
    color: rgba(255, 255, 255, 0.85);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fp-phone-row small {
    display: block;
    font-size: 0.5rem;
    color: rgba(255, 255, 255, 0.4);
}

.fp-phone-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.4rem;
    margin-top: 0.25rem;
}

.fp-phone-grid img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 8px;
}

.fp-phone-hero {
    text-align: center;
    padding-top: 0.5rem;
}

.fp-phone-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto 0.55rem;
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.fp-phone-hero strong {
    display: block;
    font-size: 0.72rem;
    margin-bottom: 0.2rem;
}

.fp-phone-hero p {
    font-size: 0.55rem;
    color: rgba(255, 255, 255, 0.5);
    font-style: italic;
    max-width: 16ch;
    margin: 0.4rem auto 0.75rem;
}

/* --- CTA section --- */
.fp-cta {
    padding: var(--fp-section-y) 0;
    background: linear-gradient(to bottom, #ffffff, #f7f7f7);
}

/* --- FAQ --- */
.fp-faq {
    padding: var(--fp-section-y) 0;
}

.fp-faq-layout {
    display: grid;
    grid-template-columns: minmax(140px, 220px) 1fr;
    gap: clamp(2rem, 6vw, 5rem);
    align-items: start;
}

.fp-faq-layout > h2 {
    font-size: clamp(2.4rem, 5vw, 3.75rem);
    position: sticky;
    top: 100px;
}

.fp-faq-list {
    display: grid;
    gap: 0;
}

.fp-faq-item {
    overflow: hidden;
    border: 0;
    border-radius: 64px;
}

@supports (corner-shape: squircle) {
    .fp-faq-item {
        corner-shape: squircle;
    }
}

.fp-faq-item:nth-child(odd) {
    background: #f7f7f7;
}

.fp-faq-item:nth-child(even) {
    background: none;
}

.fp-faq-item button {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.35rem 2rem;
    background: none;
    border: none;
    text-align: left;
    font-family: var(--fp-font);
    /* Même style que .page-home p ; un <button> n'hérite pas de la typo du
       document, d'où la redéclaration. */
    font-size: 20px;
    font-weight: 500;
    line-height: 1.25;
    color: var(--fp-ink-muted);
    cursor: pointer;
    transition: color 0.2s ease;
}

.fp-faq-item.is-open button,
.fp-faq-item button:hover {
    color: var(--fp-ink);
}

.fp-faq-item button svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    transition: transform 0.25s ease;
    color: var(--fp-ink);
}

.fp-faq-item.is-open button svg {
    transform: rotate(180deg);
}

.fp-faq-item [data-faq-target="panel"] {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.fp-faq-item.is-open [data-faq-target="panel"] {
    grid-template-rows: 1fr;
}

.fp-faq-answer {
    min-height: 0;
    overflow: hidden;
    padding: 0 2rem;
    transition: padding-bottom 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.fp-faq-item [data-faq-target="panel"] p {
    margin: 0;
    max-width: 52ch;
}

.fp-faq-item.is-open .fp-faq-answer {
    padding-bottom: 1.35rem;
}

/* --- Footer --- */
/* `overflow: hidden` rogne le logo qui déborde en bas. Conséquence : le panneau
   du sélecteur de langue doit s'ouvrir vers le BAS, à l'intérieur du footer —
   ouvert vers le haut il serait coupé lui aussi. */
.fp-footer {
    padding: 3rem 0 0;
    overflow: hidden;
}

/* Le bouton de langue et le groupe des trois colonnes sont écartés au maximum ;
   les colonnes elles-mêmes gardent 32px entre elles. */
.fp-footer-top {
    display: flex;
    justify-content: space-between;
    gap: 32px;
    padding-bottom: 3rem;
}

.fp-footer-cols {
    display: flex;
    gap: 32px;
}

.fp-footer-language {
    align-self: start;
}

.fp-language-menu {
    position: relative;
    width: fit-content;
}

/* Même style que .fp-btn, en gris clair sur texte gris. */
.fp-language-menu summary {
    user-select: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 12px 32px;
    border: none;
    border-radius: var(--fp-radius-pill);
    background: #e8e8e8;
    color: #747474;
    font-family: var(--fp-font);
    font-size: 20px;
    font-weight: 400;
    text-decoration: none;
    cursor: pointer;
    list-style: none;
    transition: transform 0.2s ease;
}

.fp-language-menu summary:hover {
    transform: scale(1.025);
}

.fp-language-menu summary:active {
    transform: scale(0.98);
}

.fp-language-menu summary::-webkit-details-marker {
    display: none;
}

.fp-language-menu summary .material-symbols-rounded {
    font-size: 24px;
    font-weight: 300;
}

.fp-language-menu[open] summary .material-symbols-rounded:last-child {
    transform: rotate(180deg);
}

.fp-language-options {
    position: absolute;
    z-index: 2;
    top: calc(100% + 0.5rem);
    left: 0;
    display: grid;
    min-width: 100%;
    padding: 0.35rem;
    background: var(--fp-bg);
    border: 1px solid var(--fp-border);
    border-radius: 0.75rem;
    box-shadow: 0 0.75rem 2rem rgb(0 0 0 / 10%);
}

.fp-language-options a {
    padding: 0.5rem 0.75rem;
    color: var(--fp-ink-muted);
    font-size: 1rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    border-radius: 0.45rem;
}

.fp-language-options a:hover,
.fp-language-options a[aria-current="true"] {
    color: var(--fp-ink);
    background: var(--fp-bg-soft);
}

/* Titre et liens partagent le style de .page-home p (20px / 500 / 1.25) ; seule
   la couleur les distingue. Le gap sous le titre est identique à celui entre
   les liens : la colonne est un flex à gap unique. */
.fp-footer-col {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.fp-footer-col h3 {
    font-size: 20px;
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: normal;
    text-transform: none;
    color: rgb(17 17 17 / 50%);
}

.fp-footer-col a {
    display: block;
    color: rgb(17 17 17 / 100%);
    font-size: 20px;
    font-weight: 500;
    line-height: 1.25;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.fp-footer-col a:hover {
    color: rgb(17 17 17 / 100%);
    text-decoration: none;
    opacity: 0.7;
}

.fp-footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding-top: 1.5rem;
    font-size: 16px;
    font-family: var(--fp-font-mono);
    letter-spacing: -0.025em;
    color: var(--fp-ink-muted);
}

.fp-footer-credit {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.fp-footer-credit:hover {
    color: var(--fp-ink-soft);
    text-decoration: underline;
    text-underline-offset: 0.2em;
    text-shadow: none;
}

/* La marge basse négative remonte le BAS du conteneur au-dessus du logo : le
   débord dépasse de .fp-footer, qui le rogne (overflow: hidden). Pas d'overflow
   ici — il serait sans effet, le logo ne débordant pas de sa propre boîte. */
.fp-footer-logo-container {
    width: min(100%, 1200px);
    /* Profondeur du crop : plus la valeur est négative, plus le logo est rogné. */
    margin: 2rem auto clamp(-5rem, -7vw, -1rem);
}

.fp-footer-logo {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 0;
}

.fp-footer-logo .fp-logo-mark {
    z-index: 1;
    width: clamp(10rem, 21vw, 16rem);
    height: clamp(10rem, 21vw, 16rem);
    transform: rotate(-15deg);
}

/* Seul le logo du footer est peint via un masque plutôt qu'une image : la forme
   vient du SVG, la couleur du background — ce qui permet de la dégrader
   verticalement. Le logo de la navbar reste un <img> plein. */
.fp-footer-logo .fp-logo-title {
    --fp-logo-title-fill: linear-gradient(
        to bottom,
        rgb(0 0 0 / 60%) 0%,
        rgb(0 0 0 / 10%) 100%
    );

    flex: 1;
    width: 100%;
    max-width: none;
    /* aspect-ratio remplace les dimensions intrinsèques que portait l'<img> :
       sans elle, l'élément vide n'aurait aucune hauteur. Ratio du viewBox. */
    aspect-ratio: 237 / 47;
    height: auto;

    background: var(--fp-logo-title-fill);
    -webkit-mask: url("/assets/svg/logo-title.svg") no-repeat center / contain;
    mask: url("/assets/svg/logo-title.svg") no-repeat center / contain;
}

/* --- Auth (login / register) ---
   Bloc gauche : réutilise .fp-band tel quel (même squircle, même dégradé, même
   image hero). Bloc droit : carte de formulaire dans le même vocabulaire visuel
   (fond blanc, coins arrondis, ombre douce) que le reste de la home. */
.fp-nav--auth .fp-nav-inner--centered {
    justify-content: center;
}

.fp-auth-page {
    --fp-auth-nav-height: 76px;
    --fp-auth-padding-y: 32px;

    /* La navbar reste dans le flux : cette zone occupe le reste du viewport.
       `min-height` permet au contenu de prolonger naturellement la page. */
    min-height: calc(100vh - var(--fp-auth-nav-height));
    min-height: calc(100dvh - var(--fp-auth-nav-height));
    display: flex;
    align-items: center;
    padding-block: var(--fp-auth-padding-y);
}

.fp-auth-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    align-self: stretch;
    min-height: calc(
        100vh - var(--fp-auth-nav-height) - (var(--fp-auth-padding-y) * 2)
    );
    min-height: calc(
        100dvh - var(--fp-auth-nav-height) - (var(--fp-auth-padding-y) * 2)
    );
    gap: 32px;
}

.fp-auth-band {
    /* `height: 100%` prevents the grid item from stretching when the grid row
       gets its height from the form. Let Grid resolve the full row height. */
    align-self: stretch;
    height: auto;
    min-height: auto;
}

.fp-auth-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.fp-auth-tabs {
    display: flex;
    gap: 4px;
    padding: 4px;
    margin-bottom: 32px;
    background: var(--fp-bg-soft);
    border-radius: var(--fp-radius-pill);
}

.fp-auth-tab {
    flex: 1;
    text-align: center;
    padding: 10px 16px;
    border-radius: var(--fp-radius-pill);
    font-size: 15px;
    font-weight: 600;
    color: var(--fp-ink-muted);
    text-decoration: none;
    transition:
        background 0.2s ease,
        color 0.2s ease;
}

.fp-auth-tab:hover {
    color: var(--fp-ink);
    text-decoration: none;
}

.fp-auth-tab.is-active {
    background: #fff;
    color: var(--fp-ink);
    box-shadow: 0 4px 16px -8px rgb(0 0 0 / 25%);
}

.fp-auth-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.fp-form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.fp-form-label {
    font-family: var(--fp-font-mono);
    font-size: 13px;
    font-weight: 600;
    color: var(--fp-ink-soft);
    padding-inline: 32px;
}

.fp-form-control {
    width: 100%;
    padding: 14px 18px;
    background: var(--fp-bg-soft);
    border: 1px solid var(--fp-border);
    border-radius: var(--fp-radius-md);
    font-family: var(--fp-font-mono);
    font-size: 15px;
    color: var(--fp-ink);
    transition:
        border-color 0.2s ease,
        background 0.2s ease;
}

.fp-form-control:focus,
.fp-form-control:focus-visible {
    outline: none;
    box-shadow: none;
    background: #fff;
    border-color: var(--fp-ink);
}
.fp-form-control--readonly {
    color: var(--fp-ink-muted);
    cursor: default;
}
.fp-form-control--readonly:focus,
.fp-form-control--readonly:focus-visible {
    background: var(--fp-bg-soft);
    border-color: var(--fp-border);
}

.fp-form-password {
    position: relative;
}

.fp-form-password .fp-form-control {
    padding-right: 52px;
}

.fp-form-password-toggle {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: var(--fp-radius-pill);
    background: transparent;
    color: var(--fp-ink-muted);
    cursor: pointer;
    transition:
        background 0.2s ease,
        color 0.2s ease;
}

.fp-form-password-toggle:hover {
    background: var(--fp-bg-muted);
    color: var(--fp-ink);
}

.fp-form-password-toggle .material-symbols-rounded {
    font-size: 20px;
    font-weight: 500;
}

.fp-auth-remember {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding-inline: 4px;
    font-family: var(--fp-font-mono);
    font-size: 13px;
    color: var(--fp-ink-soft);
    cursor: pointer;
    user-select: none;
}

.fp-auth-remember input {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--fp-ink);
    cursor: pointer;
}

.fp-auth-forgot {
    text-align: center;
    font-size: 13px;
    margin-top: 4px;
}

.fp-auth-forgot a {
    color: var(--fp-ink-muted);
    font-weight: 400;
    text-decoration: underline;
}

.fp-auth-forgot a:hover {
    color: var(--fp-ink);
}

.fp-form-group ul {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 13px;
    color: #c0392b;
}

.fp-auth-submit {
    width: auto;
    margin-inline: 32px;
    margin-top: 4px;
}

.fp-auth-submit:disabled {
    opacity: 0.25;
    cursor: not-allowed;
}

.fp-auth-submit:disabled:hover {
    transform: none;
}

.fp-auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 28px 0;
    color: var(--fp-ink-muted);
    font-size: 14px;
}

.fp-auth-divider::before,
.fp-auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--fp-border);
}

.fp-auth-oauth {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.fp-btn-oauth {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: auto;
    margin-inline: 32px;
    padding: 12px 32px;
    background: var(--fp-ink);
    border: none;
    border-radius: var(--fp-radius-pill);
    font-family: var(--fp-font);
    font-size: 20px;
    font-weight: 400;
    color: #fff;
    text-decoration: none;
    transition: transform 0.2s ease;
}

.fp-btn-oauth:hover {
    color: #fff;
    text-decoration: none;
    transform: scale(1.025);
}

.fp-btn-oauth:active {
    transform: scale(0.98);
}

.fp-btn-oauth svg {
    width: 1.25em;
    height: 1.25em;
    flex-shrink: 0;
}

/* --- Account / profile edit --- */
.fp-account-shell {
    padding: 1.5rem 0 4rem;
}
.fp-account-shell-inner {
    display: grid;
    grid-template-columns: 15.5rem minmax(0, 1fr);
    gap: 2.5rem;
    align-items: start;
}
.fp-account-sidebar {
    position: sticky;
    top: 6rem;
    padding: 1.15rem 1rem;
    border: 1px solid var(--fp-border);
    border-radius: 24px;
    background: #fff;
}
.fp-account-sidebar-label {
    margin: 0 0.65rem 0.85rem;
    color: var(--fp-ink-muted);
    font-family: var(--fp-font-mono);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.fp-account-sidebar-nav {
    display: grid;
    gap: 0.15rem;
}
.fp-account-sidebar .fp-account-menu-identity {
    margin: 0 0.35rem 0.85rem;
    padding: 0 0.4rem 0.85rem;
    border-bottom: 1px solid var(--fp-border);
}
.fp-account-sidebar-link {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.65rem 0.75rem;
    border-radius: 14px;
    color: var(--fp-ink-soft);
    font-size: 0.92rem;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}
.fp-account-sidebar-link:hover {
    background: var(--fp-bg-soft);
    color: var(--fp-ink);
    text-decoration: none;
}
.fp-account-sidebar-link.is-active {
    background: var(--fp-ink);
    color: #fff;
}
.fp-account-sidebar-link .material-symbols-rounded {
    font-size: 1.25rem;
    font-weight: 500;
}
.fp-account-sidebar-link.is-active .material-symbols-rounded {
    color: #fff;
}
.fp-account-sidebar-link--danger {
    color: #b42318;
}
.fp-account-sidebar-link--danger .material-symbols-rounded {
    color: #b42318;
}
.fp-account-sidebar-link--danger:hover {
    background: #fff0ef;
    color: #b42318;
}
.fp-account-sidebar .fp-account-menu-sep {
    margin: 0.45rem 0.5rem;
}
.fp-account-main {
    min-width: 0;
}
.fp-account-page {
    padding: 0;
}
.fp-account-header {
    margin-bottom: 2rem;
}
.fp-account-header h1 {
    margin: 0 0 0.5rem;
    font-size: clamp(1.75rem, 4vw, 2.75rem);
}
.fp-account-header p {
    margin: 0;
    color: var(--fp-ink-muted);
}
.fp-account-card {
    padding: 1.75rem 1.5rem 2rem;
    border: 1px solid var(--fp-border);
    border-radius: 28px;
    background: #fff;
}
.fp-account-photo {
    display: flex;
    align-items: center;
    gap: 1.15rem;
    margin-bottom: 1.75rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--fp-border);
}
.fp-account-avatar.fp-profile-avatar {
    width: 96px;
    height: 96px;
    border-radius: 28px;
    font-size: 1.5rem;
    box-shadow: 0 12px 24px -16px rgb(0 0 0 / 45%);
}
.fp-account-photo-copy {
    min-width: 0;
}
.fp-account-photo-copy strong {
    display: block;
    margin-bottom: 0.25rem;
    font-size: 1rem;
}
.fp-account-photo-copy p {
    margin: 0;
    color: var(--fp-ink-muted);
    font-family: var(--fp-font-mono);
    font-size: 0.8rem;
    line-height: 1.4;
}
.fp-account-form {
    display: grid;
    gap: 2rem;
}
.fp-account-section {
    display: grid;
    gap: 1.15rem;
}
.fp-account-section h2 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
}
.fp-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
.fp-form-help {
    margin: 0;
    color: var(--fp-ink-muted);
    font-family: var(--fp-font-mono);
    font-size: 0.75rem;
    line-height: 1.4;
    padding-inline: 32px;
}
.fp-account-form .fp-form-label,
.fp-account-form .fp-form-help,
.fp-account-form .help-text {
    padding-inline: 0.25rem;
}
.fp-account-form .help-text {
    margin: 0;
    color: var(--fp-ink-muted);
    font-family: var(--fp-font-mono);
    font-size: 0.75rem;
    line-height: 1.4;
}
.fp-account-form .fp-form-group ul {
    margin: 0;
    padding: 0;
    list-style: none;
    color: #c0392b;
    font-family: var(--fp-font-mono);
    font-size: 0.75rem;
}
.fp-form-slug {
    display: flex;
    align-items: stretch;
    min-width: 0;
}
.fp-form-slug-prefix {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    padding: 0 0.85rem 0 1.1rem;
    border: 1px solid var(--fp-border);
    border-right: none;
    border-radius: var(--fp-radius-md) 0 0 var(--fp-radius-md);
    background: var(--fp-bg-soft);
    color: var(--fp-ink-muted);
    font-family: var(--fp-font-mono);
    font-size: 0.85rem;
    white-space: nowrap;
}
.fp-form-slug .fp-form-control {
    border-radius: 0 var(--fp-radius-md) var(--fp-radius-md) 0;
}
.fp-account-form textarea.fp-form-control {
    min-height: 6.5rem;
    resize: vertical;
    line-height: 1.45;
}
.fp-account-form .fp-field-counted {
    display: grid;
    gap: 8px;
}
.fp-account-actions {
    display: flex;
    justify-content: flex-start;
    padding-top: 0.25rem;
}
@media (max-width: 640px) {
    .fp-form-grid {
        grid-template-columns: 1fr;
    }
    .fp-account-card {
        padding: 1.35rem 1.1rem 1.6rem;
        border-radius: 22px;
    }
}
@media (max-width: 900px) {
    .fp-account-shell-inner {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }
    .fp-account-sidebar {
        position: static;
        padding: 0.85rem;
    }
    .fp-account-sidebar-label,
    .fp-account-sidebar .fp-account-menu-identity,
    .fp-account-sidebar .fp-account-menu-sep,
    .fp-account-sidebar-link--danger {
        display: none;
    }
    .fp-account-sidebar-nav {
        display: flex;
        gap: 0.35rem;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .fp-account-sidebar-nav::-webkit-scrollbar {
        display: none;
    }
    .fp-account-sidebar-link {
        flex: 0 0 auto;
        white-space: nowrap;
    }
}

/* --- Subscriptions --- */
.fp-subscriptions {
    display: grid;
    gap: 2rem;
}
.fp-subscription-search {
    display: grid;
    gap: 0.65rem;
    padding: 1.35rem 1.35rem 1.15rem;
    border: 1px solid var(--fp-border);
    border-radius: 24px;
    background: #fff;
}
.fp-subscription-search .fp-form-control {
    background: #fff;
    border-color: var(--fp-ink);
}
.fp-subscription-search-msg {
    margin: 0;
    color: var(--fp-ink-muted);
    font-family: var(--fp-font-mono);
    font-size: 0.85rem;
}
.fp-subscription-results,
.fp-subscription-list {
    display: grid;
    gap: 0.65rem;
}
.fp-subscription-list-section h2 {
    margin: 0 0 1rem;
    font-size: 1.05rem;
    font-weight: 600;
}
.fp-subscription-empty {
    padding: 1.35rem;
    border-radius: 20px;
    background: var(--fp-bg-soft);
    color: var(--fp-ink-muted);
}
.fp-subscription-empty p {
    margin: 0;
}
.fp-subscription-empty p + p {
    margin-top: 0.4rem;
}
.fp-subscription-result,
.fp-subscription-card {
    display: grid;
    gap: 0;
    padding: 0;
    border: 1px solid var(--fp-border);
    border-radius: 18px;
    background: #fff;
    overflow: hidden;
}
.fp-subscription-card__main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 1.5rem;
    flex-wrap: wrap;
    padding: 0.95rem 1.1rem;
}
.fp-subscription-card__aside {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.85rem 1.15rem;
    margin-left: auto;
}
.fp-subscription-result-identity {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}
.fp-subscription-result-identity:hover {
    text-decoration: none;
}
.fp-subscription-avatar {
    width: 48px;
    height: 48px;
    flex: 0 0 auto;
    border-radius: 50%;
    object-fit: cover;
}
.fp-subscription-avatar--empty {
    display: grid;
    place-items: center;
    background: var(--fp-ink);
    color: #fff;
    font-family: var(--fp-font-mono);
    font-size: 0.85rem;
    font-weight: 600;
}
.fp-subscription-result-copy {
    display: grid;
    gap: 0.2rem;
    min-width: 0;
}
.fp-subscription-result-copy strong {
    font-size: 1rem;
    line-height: 1.2;
}
.fp-subscription-result-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.65rem;
    color: var(--fp-ink-muted);
    font-family: var(--fp-font-mono);
    font-size: 0.78rem;
}
.fp-subscription-status {
    color: var(--fp-ink-muted);
}
.fp-subscription-status--ok {
    color: #3f6212;
}
.fp-subscription-badge {
    display: inline-flex;
    width: fit-content;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background: #111;
    color: #fff;
    font-family: var(--fp-font-mono);
    font-size: 0.65rem;
    font-weight: 600;
}
.fp-subscription-prefs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.fp-subscription-pref {
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    background: #eee;
    color: #999;
    font-family: var(--fp-font-mono);
    font-size: 0.72rem;
    font-weight: 600;
}
.fp-subscription-pref.is-active {
    background: #e7f6ec;
    color: #1a7f37;
}
.fp-subscription-result-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-left: auto;
}
.fp-subscription-link {
    color: var(--fp-ink-muted);
    font-family: var(--fp-font-mono);
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
}
.fp-subscription-link:hover {
    color: var(--fp-ink);
    text-decoration: underline;
}
.fp-subscription-following {
    color: var(--fp-ink-muted);
    font-family: var(--fp-font-mono);
    font-size: 0.8rem;
    font-weight: 600;
}
.fp-subscription-trusted-form {
    margin: 0;
}
.fp-subscription-trusted {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    cursor: pointer;
    user-select: none;
}
.fp-subscription-trusted__label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--fp-ink);
    line-height: 1.2;
}
.fp-subscription-toggle {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
}
.fp-subscription-toggle input {
    position: absolute;
    inset: 0;
    z-index: 1;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}
.fp-subscription-toggle__track {
    display: block;
    width: 2.5rem;
    height: 1.4rem;
    border-radius: 999px;
    background: #d6d3d1;
    transition: background 0.18s ease;
}
.fp-subscription-toggle__track::after {
    content: "";
    position: absolute;
    top: 0.18rem;
    left: 0.18rem;
    width: 1.05rem;
    height: 1.05rem;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgb(0 0 0 / 18%);
    transition: transform 0.18s ease;
}
.fp-subscription-toggle input:checked + .fp-subscription-toggle__track {
    background: var(--fp-ink);
}
.fp-subscription-toggle input:checked + .fp-subscription-toggle__track::after {
    transform: translateX(1.1rem);
}
.fp-subscription-toggle input:focus-visible + .fp-subscription-toggle__track {
    outline: 2px solid var(--fp-ink);
    outline-offset: 2px;
}
.fp-subscription-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem 1rem;
}
.fp-subscription-unsubscribe,
.fp-subscription-declare {
    padding: 0;
    border: none;
    background: none;
    font-family: var(--fp-font-mono);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 0.15em;
}
.fp-subscription-unsubscribe {
    color: var(--fp-ink-muted);
}
.fp-subscription-unsubscribe:hover {
    color: #b42318;
}
.fp-subscription-declare {
    color: #b42318;
}
.fp-subscription-invite {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem 1.25rem;
    flex-wrap: wrap;
    padding: 0.85rem 1.1rem;
    border-top: 1px solid var(--fp-border);
    background: var(--fp-bg-soft);
}
.fp-subscription-invite__text {
    margin: 0;
    flex: 1 1 12rem;
    font-size: 0.88rem;
    font-weight: 500;
    line-height: 1.35;
    color: var(--fp-ink-soft);
}
.fp-subscription-invite__actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 0 0 auto;
}
.fp-subscription-invite__actions form {
    margin: 0;
}
.fp-subscription-invite__accept,
.fp-subscription-invite__decline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2rem;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    font-family: var(--fp-font-mono);
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.fp-subscription-invite__accept {
    border: 1px solid var(--fp-ink);
    background: var(--fp-ink);
    color: #fff;
}
.fp-subscription-invite__accept:hover {
    background: #000;
}
.fp-subscription-invite__decline {
    border: 1px solid var(--fp-border);
    background: #fff;
    color: var(--fp-ink-muted);
}
.fp-subscription-invite__decline:hover {
    color: var(--fp-ink);
    border-color: rgba(17, 17, 17, 0.18);
}
.fp-profile-life-dates {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
}
.fp-profile-life-dates__sep {
    opacity: 0.55;
    margin: 0 0.1rem;
}

/* --- Public profile / tribute --- */
.fp-profile {
    --fp-profile-avatar-overlap: clamp(3rem, 7vw, 4.25rem);
    --fp-profile-avatar-offset: clamp(-4.25rem, -7vw, -3rem);
    padding-top: 32px;
}
.fp-tribute-restore {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 1.5rem;
    flex-wrap: wrap;
    margin: 0 0 1.25rem;
    padding: 1rem 1.15rem;
    border: 1px solid rgba(17, 17, 17, 0.2);
    border-radius: 18px;
    background: #fff4d6;
    color: #111;
}
.fp-tribute-restore__copy {
    display: grid;
    gap: 0.25rem;
    min-width: 0;
    flex: 1 1 16rem;
}
.fp-tribute-restore__title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.3;
    color: #111;
}
.fp-tribute-restore__text {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 500;
    line-height: 1.4;
    color: #2a2a2a;
}
.fp-tribute-restore__text a {
    color: #111;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 0.12em;
}
.fp-tribute-restore__text a:hover {
    color: #000;
}
/* Spécificité > .page-home p (qui hérite --fp-ink-soft clair en mode tribute).
   Ne pas cibler tous les `p` du bandeau : la modale vit dedans. */
.fp-profile-page--tribute .fp-tribute-restore__title {
    color: #111;
}
.fp-profile-page--tribute .fp-tribute-restore {
    border-color: rgba(17, 17, 17, 0.22);
    background: #fff4d6;
}
.fp-profile-page--tribute .fp-tribute-restore__text {
    color: #2a2a2a;
}
.fp-profile-page--tribute .fp-tribute-restore__text a {
    color: #111;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 0.12em;
}
.fp-profile-page--tribute .fp-tribute-restore__text a:hover {
    color: #000;
}
.fp-profile-page--tribute .fp-tribute-restore .fp-btn {
    background: #111;
    color: #fff;
}
.fp-profile-page--tribute .fp-tribute-restore .fp-btn:hover {
    background: #000;
    color: #fff;
}

.fp-profile-banner-shell {
    position: relative;
    height: clamp(240px, 35vw, 400px);
    border-radius: 64px;
    z-index: 0;
}

.fp-profile-banner {
    position: relative;
    z-index: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: inherit;
    background: var(--fp-hero-grad);
}

.fp-profile-banner::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: inherit;
    pointer-events: none;
    box-shadow:
        inset 0 0 0 2px rgb(0 0 0 / 10%),
        inset 0 0 30px 12px rgb(255 255 255 / 50%);
}

.fp-profile-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: blur(18px) saturate(0.75);
    transform: scale(1.08);
    display: block;
}

.fp-profile-banner-gradient {
    position: absolute;
    z-index: 1;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
        to top,
        #fff 0%,
        rgb(255 255 255 / 90%) 25%,
        rgb(255 255 255 / 0%) 100%
    );
}

.fp-profile-banner > span {
    display: grid;
    width: 100%;
    height: 100%;
    place-items: center;
    background: linear-gradient(135deg, #bab9bd, #e5e2df);
    color: #fff;
    font-size: clamp(4rem, 14vw, 10rem);
    font-weight: 600;
    letter-spacing: -0.08em;
}

@supports (corner-shape: squircle) {
    .fp-profile-banner-shell,
    .fp-profile-banner,
    .fp-profile-banner::after,
    .fp-profile-avatar--cover,
    .fp-profile-avatar--cover::after,
    .fp-profile-track-cover,
    .fp-profile-track-cover::after {
        corner-shape: squircle;
    }
}

.fp-profile-identity-bar {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1.5rem;
    margin: 2rem 32px 0;
    position: relative;
    z-index: 2;
}

.fp-profile-avatar {
    width: clamp(112px, 16vw, 184px);
    aspect-ratio: 1;
    flex: 0 0 auto;
    overflow: hidden;
    border-radius: 50%;
    background: #161616;
    color: #fff;
    display: grid;
    place-items: center;
    font-size: clamp(2.25rem, 5vw, 4rem);
    font-weight: 600;
    letter-spacing: -0.08em;
    box-shadow: 0 16px 32px -20px rgb(0 0 0 / 55%);
}
.fp-profile-avatar img {
    position: relative;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 1;
}
.fp-profile-avatar--cover {
    width: clamp(104px, 14vw, 156px);
    aspect-ratio: 1;
    border-radius: 48px;
    background: var(--fp-bg-muted);
    box-shadow: 0 0 32px 0 rgb(0 0 0 / 10%);
    position: relative;
}
.fp-profile-avatar--cover::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
    pointer-events: none;
    box-shadow:
        inset 0 0 0 2px rgb(0 0 0 / 10%),
        inset 0 0 30px 12px rgb(255 255 255 / 50%);
}
.fp-profile-photo-form {
    margin: 0;
}
.fp-profile-photo-input {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    opacity: 0;
    pointer-events: none;
}
.fp-profile-avatar--editable {
    cursor: pointer;
}
.fp-profile-avatar-edit {
    position: absolute;
    inset: auto 0 0;
    z-index: 2;
    padding: 1.25rem 0.5rem 0.6rem;
    background: linear-gradient(to top, rgb(0 0 0 / 60%), transparent);
    color: #fff;
    font-family: var(--fp-font-mono);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    opacity: 0;
    text-align: center;
    transition: opacity 0.2s ease;
}
.fp-profile-avatar--editable:hover .fp-profile-avatar-edit,
.fp-profile-avatar--editable:focus-within .fp-profile-avatar-edit {
    opacity: 1;
}

.fp-profile-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}
/* Même style que .fp-language-menu summary : gris clair sur texte gris, sans
   bordure, et le seul retour d'interaction est l'échelle. */
.fp-profile-action {
    user-select: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 12px 32px;
    border: none;
    border-radius: var(--fp-radius-pill);
    background: #e8e8e8;
    color: #747474;
    font-family: var(--fp-font);
    font-size: 20px;
    font-weight: 400;
    text-decoration: none;
    cursor: pointer;
    list-style: none;
    transition: transform 0.2s ease;
}
.fp-profile-action::-webkit-details-marker {
    display: none;
}
/* Variante sans libellé : boîte carrée pour que l'icône reste centrée. */
.fp-profile-action--icon {
    gap: 0;
    width: 56px;
    height: 56px;
    padding: 0;
}
.fp-profile-action--icon .material-symbols-rounded {
    font-family: "Material Symbols Rounded";
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    letter-spacing: normal;
    line-height: 1;
}
.fp-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}
.fp-profile-action:hover {
    color: #747474;
    background: #e8e8e8;
    transform: scale(1.025);
    text-decoration: none;
}
.fp-profile-action:active {
    transform: scale(0.98);
}
.fp-profile-meta svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.fp-profile-action svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.fp-profile-editor {
    display: contents;
}

/* --- Modale --- */
.fp-modal {
    width: min(92vw, 560px);
    max-height: min(86dvh, 760px);
    /* `margin: auto` centre le <dialog> dans sa zone de superposition. Indispensable
       ici : le reset universel de app.css force `margin: 0` sur tout et écrase le
       centrage de la feuille de style du navigateur. */
    margin: auto;
    padding: 0;
    border: none;
    border-radius: 28px;
    background: #fff;
    box-shadow: 0 32px 80px -32px rgb(0 0 0 / 35%);
    color: var(--fp-ink);
    overflow: hidden;
}
.fp-modal::backdrop {
    background: rgb(17 17 17 / 45%);
    backdrop-filter: blur(4px);
}
/* Animation d'entrée : `allow-discrete` autorise la transition depuis display:none. */
.fp-modal {
    opacity: 0;
    transform: scale(0.97);
    transition:
        opacity 0.25s ease,
        transform 0.25s ease,
        display 0.25s allow-discrete,
        overlay 0.25s allow-discrete;
}
.fp-modal::backdrop {
    opacity: 0;
    transition:
        opacity 0.25s ease,
        display 0.25s allow-discrete,
        overlay 0.25s allow-discrete;
}
.fp-modal[open] {
    opacity: 1;
    transform: scale(1);
}
.fp-modal[open]::backdrop {
    opacity: 1;
}
@starting-style {
    .fp-modal[open] {
        opacity: 0;
        transform: scale(0.97);
    }
    .fp-modal[open]::backdrop {
        opacity: 0;
    }
}

/* L'en-tête et le formulaire sont les deux enfants du panneau ; le formulaire
   porte à son tour le corps défilant et le pied. `min-height: 0` à chaque niveau
   pour que le corps puisse effectivement rétrécir et défiler. */
.fp-modal-panel {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    max-height: inherit;
    min-height: 0;
    text-align: left;
}
.fp-modal-panel .fp-profile-editor-form {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 0;
    min-height: 0;
}
.fp-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.5rem 1.5rem 1rem;
}
.fp-modal-head h2 {
    margin: 0;
    font-size: 1.5rem;
}
.fp-modal-close {
    display: grid;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    place-items: center;
    border: none;
    border-radius: 50%;
    background: #e8e8e8;
    color: #747474;
    cursor: pointer;
    transition: transform 0.2s ease;
}
.fp-modal-close:hover {
    transform: scale(1.05);
}
.fp-modal-close:active {
    transform: scale(0.95);
}
.fp-modal-close .material-symbols-rounded {
    font-family: "Material Symbols Rounded";
    font-size: 22px;
    font-style: normal;
    font-weight: 500;
    letter-spacing: normal;
    line-height: 1;
}
/* Seul le corps défile : l'en-tête et le pied restent visibles. */
.fp-modal-body {
    display: grid;
    align-content: start;
    gap: 0.85rem;
    min-height: 0;
    overflow-y: auto;
    padding: 0 1.5rem 1.5rem;
}
.fp-modal-foot {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.5rem 1.5rem;
    border-top: 1px solid var(--fp-border);
}

/* Compteur de caractères : discret par défaut, il vire au rouge à 90 % du quota. */
.fp-modal--confirm { width: min(92vw, 420px); border-radius: 24px; }
.fp-modal-head { padding-bottom: 0.75rem; }
.fp-modal-head h2 { font-size: 1.35rem; letter-spacing: -0.02em; }
.fp-modal-close { width: 34px; height: 34px; background: rgb(17 17 17 / 7%); transition: background 0.2s ease, transform 0.2s ease; }
.fp-modal-close:hover { background: rgb(17 17 17 / 12%); transform: scale(1.04); }
.fp-modal-close .material-symbols-rounded { font-size: 20px; }
.fp-modal-description { margin: 0; color: var(--fp-ink-muted); font-size: 0.92rem; line-height: 1.5; }
.fp-modal-foot { border-top-color: rgb(17 17 17 / 8%); }
.fp-modal--confirm .fp-modal-head { padding-bottom: 0.5rem; }
.fp-modal--confirm .fp-modal-body { padding-bottom: 1.25rem; }
.fp-modal--confirm .fp-modal-foot { display: grid; grid-template-columns: 1fr 1fr; justify-content: stretch; padding-top: 0.85rem; }
.fp-modal--confirm .fp-modal-foot > * { width: 100%; justify-content: center; }
.fp-modal--confirm .fp-modal-foot .fp-btn {
    padding: 0.75rem 1.1rem;
    font-size: 0.875rem;
    white-space: nowrap;
}

/* Modale de note : le champ est sans habillage, le trait de séparation du pied
   ferait donc apparaître une ligne isolée au milieu du vide. */
.fp-modal--note .fp-modal-foot {
    justify-content: flex-end;
    padding-top: 0.5rem;
    border-top: none;
}

.fp-field-counted {
    position: relative;
}
.fp-field-counter {
    justify-self: end;
    color: var(--fp-ink-muted);
    font-family: var(--fp-font-mono);
    font-size: 0.7rem;
    font-variant-numeric: tabular-nums;
}
.fp-field-counted.is-near-limit .fp-field-counter {
    color: #c0392b;
}
.fp-profile-editor-form {
    display: grid;
    gap: 0.85rem;
}
.fp-profile-editor-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.85rem;
}
.fp-profile-editor-form > div:not(.fp-profile-editor-grid),
.fp-profile-editor-grid > div {
    display: grid;
    gap: 0.35rem;
}
.fp-profile-editor-form label {
    color: var(--fp-ink-soft);
    font-family: var(--fp-font-mono);
    font-size: 0.72rem;
    font-weight: 600;
}
.fp-profile-editor-form input,
.fp-profile-editor-form textarea {
    width: 100%;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--fp-border);
    border-radius: 14px;
    background: var(--fp-bg-soft);
    color: var(--fp-ink);
    font: 0.875rem var(--fp-font-mono);
}
.fp-profile-editor-form textarea {
    resize: vertical;
}
/* Champ de note d'une piste : ni fond, ni poignée de redimensionnement (la
   hauteur est pilotée par le contrôleur `autogrow`), mais un cadre discret qui
   matérialise la zone de saisie. Les règles génériques ci-dessus restent en
   place pour le formulaire d'édition du profil, qui garde son habillage. */
.fp-profile-editor-form .fp-note-field textarea {
    min-height: 7.5rem;
    padding: 0.75rem 0.9rem;
    border: 1px solid rgb(0 0 0 / 25%);
    border-radius: 16px;
    background: #fff;
    font: 0.95rem/1.6 var(--fp-font);
    resize: none;
    overflow: hidden;
    field-sizing: content;
    transition: border-color 0.2s ease;
}
/* L'outline par défaut est retirée : le cadre qui se renforce tient lieu
   d'indicateur de focus, sans quoi le champ n'en aurait plus aucun. */
.fp-profile-editor-form .fp-note-field textarea:focus,
.fp-profile-editor-form .fp-note-field textarea:focus-visible {
    outline: none;
    box-shadow: none;
    border-color: rgb(0 0 0 / 55%);
}
.fp-profile-editor-form .fp-note-field textarea::placeholder {
    color: var(--fp-ink-muted);
}
/* Le champ et son compteur forment une pile : le compteur se cale à droite,
   juste sous le cadre, à la manière d'un champ de composition. */
.fp-note-field {
    display: grid;
    gap: 0.35rem;
}

.fp-profile-editor-form ul {
    margin: 0;
    padding: 0;
    color: #c0392b;
    font-size: 0.75rem;
    list-style: none;
}

.fp-profile-details {
    margin: 2.25rem 32px 0;
    max-width: 52rem;
}
.fp-profile-details .fp-eyebrow {
    margin-bottom: 0.65rem;
}
.fp-profile-details h1 {
    margin: 0 0 0.85rem;
    font-size: clamp(2rem, 4vw, 3.1rem);
    background: linear-gradient(to bottom, #000000, #5a5a5a);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    width: fit-content;
}
.fp-profile-description {
    margin: 0;
    max-width: 42ch;
}
.fp-profile-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.25rem;
    margin-top: 1.25rem;
    color: var(--fp-ink-muted);
    font-family: var(--fp-font-mono);
    font-size: 0.9rem;
}
.fp-profile-meta span {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
/* Famille Rounded : c'est celle chargée par base.html.twig pour tout le site.
   `letter-spacing: normal` est indispensable : un letter-spacing hérité casse la
   ligature et le nom de l'icône s'affiche en texte brut. */
.fp-profile-meta .material-symbols-outlined,
.fp-profile-track-chevron {
    font-family: "Material Symbols Rounded";
    font-style: normal;
    letter-spacing: normal;
    line-height: 1;
    text-transform: none;
    white-space: nowrap;
    font-variant-ligatures: normal;
}
.fp-profile-meta .material-symbols-outlined {
    font-size: 1.25rem;
    font-weight: 300;
}
.fp-profile-track-chevron {
    font-weight: 500;
}

.fp-profile-playlist {
    padding: var(--fp-section-y) 0;
}

/* Mode édition playlist (page publique) */
.fp-playlist-search {
    display: none;
    margin: 0 32px 2rem;
    padding: 1.25rem 1.35rem;
    background: var(--fp-bg-soft);
    border: 1px solid var(--fp-border);
    border-radius: 24px;
}
.is-editing .fp-playlist-search {
    display: block;
}
.fp-playlist-search-title {
    margin: 0 0 1rem;
    font-size: 1.05rem;
    font-weight: 600;
}
.fp-playlist-providers {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}
.fp-playlist-provider {
    padding: 0.45rem 0.95rem;
    border: 1px solid var(--fp-border);
    border-radius: var(--fp-radius-pill);
    background: #fff;
    color: var(--fp-ink-soft);
    font-family: var(--fp-font-mono);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition:
        background 0.15s ease,
        color 0.15s ease,
        border-color 0.15s ease;
}
.fp-playlist-provider:hover {
    border-color: var(--fp-ink);
    color: var(--fp-ink);
}
.fp-playlist-provider.is-active {
    background: var(--fp-ink);
    border-color: var(--fp-ink);
    color: #fff;
}
.fp-playlist-search-field {
    display: grid;
    gap: 0.5rem;
}
/* Même fond que le panneau (fp-bg-soft) → l’input disparaît ;
   on garde le look « focus » en permanence pour le contraste. */
.fp-playlist-search-field .fp-form-control {
    background: #fff;
    border-color: var(--fp-ink);
}
.fp-playlist-search-field .fp-form-control:focus,
.fp-playlist-search-field .fp-form-control:focus-visible {
    background: #fff;
    border-color: var(--fp-ink);
}
.fp-playlist-search-msg {
    margin: 0.75rem 0 0;
    color: var(--fp-ink-muted);
    font-size: 0.9rem;
}
.fp-playlist-results {
    display: grid;
    gap: 0.5rem;
    margin-top: 1rem;
}
.fp-playlist-result {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.85rem;
    width: 100%;
    padding: 0.65rem 0.75rem;
    border: 1px solid transparent;
    background: #fff;
    border-radius: 14px;
    text-align: left;
    cursor: pointer;
    transition:
        border-color 0.15s ease,
        background 0.15s ease,
        transform 0.15s ease;
}
.fp-playlist-result:hover:not(:disabled) {
    border-color: var(--fp-border);
    background: #fafafa;
}
.fp-playlist-result:active:not(:disabled) {
    transform: scale(0.995);
}
.fp-playlist-result:disabled {
    cursor: wait;
    opacity: 0.85;
}
.fp-playlist-result.is-added {
    border-color: #1a7f37;
}
.fp-playlist-result-cover {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    object-fit: cover;
}
.fp-playlist-result-cover--empty {
    display: block;
    background: var(--fp-bg-muted, #e8e8e8);
}
.fp-playlist-result-info {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}
.fp-playlist-result-info strong,
.fp-playlist-result-info span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.fp-playlist-result-info strong {
    color: var(--fp-ink);
    font-weight: 600;
}
.fp-playlist-result-info span {
    color: var(--fp-ink-muted);
    font-size: 0.875rem;
}
.fp-playlist-result-add {
    padding: 0.45rem 0.9rem;
    border-radius: var(--fp-radius-pill);
    background: var(--fp-ink);
    color: #fff;
    font-family: var(--fp-font);
    font-size: 0.85rem;
    white-space: nowrap;
    pointer-events: none;
}
.fp-playlist-result.is-added .fp-playlist-result-add {
    background: #1a7f37;
}
.fp-profile-empty {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
}
.fp-profile-section-head {
    padding: 0 32px;
    margin-bottom: 2.5rem;
}
.fp-profile-section-head h2 {
    font-size: clamp(1.5rem, 4vw, 3.5rem);
    margin-bottom: 1rem;
}
.fp-profile-section-head .fp-eyebrow {
    margin-bottom: 0.65rem;
}
.fp-profile-section-head p {
    color: var(--fp-ink-muted);
}
.fp-profile-playlist-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.fp-profile-playlist-heading {
    margin: 0;
    min-width: 0;
    white-space: nowrap;
}
.fp-profile-section-head .fp-profile-playlist-heading {
    margin-bottom: 0;
}
.fp-profile-playlist-edit {
    flex: 0 0 auto;
    transition:
        transform 0.2s ease,
        background 0.2s ease,
        color 0.2s ease;
}
.is-editing .fp-profile-playlist-edit {
    background: var(--fp-ink);
    color: #fff;
}
.is-editing .fp-profile-playlist-edit:hover {
    background: var(--fp-ink);
    color: #fff;
}
.fp-profile-tracks {
    display: grid;
    gap: 0;
}

.fp-profile-track {
    position: relative;
    overflow: visible;
    border-radius: 36px;
    transition: background 0.35s ease;
}
/* Garde le panneau dans le flux quand <details> est fermé : sans ça le navigateur
   applique `content-visibility: hidden` et la fermeture coupe net au lieu de glisser. */
.fp-profile-track::details-content {
    block-size: auto;
    content-visibility: visible;
    overflow: visible;
}
.fp-profile-track:nth-child(odd) {
    background: var(--fp-bg-soft);
}
.fp-profile-track:nth-child(even) {
    background: #fff;
}
.fp-profile-track > summary {
    display: grid;
    grid-template-columns: 4.75rem 80px minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    padding: 14px 2rem;
    cursor: pointer;
    list-style: none;
}
/* Le :focus-visible global (cadre lavande) s’affiche aussi au clic souris
   sur <summary> — on le coupe ici, le chevron suffit comme feedback. */
.fp-profile-track > summary:focus,
.fp-profile-track > summary:focus-visible {
    outline: none;
    box-shadow: none;
}
.is-editing .fp-profile-track > summary {
    grid-template-columns: 1.75rem 4.75rem 80px minmax(0, 1fr) auto;
}
.fp-profile-track-handle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin: 0;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--fp-ink-muted);
    cursor: grab;
    touch-action: none;
}
.is-editing .fp-profile-track-handle {
    display: inline-flex;
}
.fp-profile-track-handle:active {
    cursor: grabbing;
}
.fp-profile-track-handle .material-symbols-rounded {
    font-size: 22px;
    font-weight: 500;
}
.fp-profile-track.is-dragging {
    opacity: 0.45;
}
.fp-profile-track > summary::-webkit-details-marker {
    display: none;
}
/* TikTok Sans en chasse large ; `tabular-nums` garde les numéros alignés d'une
   piste à l'autre quand on passe de 9 à 10. Le dégradé reprend celui de
   .fp-hero-title ; l'opacité de 50 % est portée par les couleurs du dégradé et
   non par `opacity`, qui s'appliquerait au-dessus du `background-clip: text`. */
.fp-profile-track-number {
    font-family: var(--fp-font);
    font-size: 48px;
    font-weight: 600;
    line-height: 1;
    font-stretch: 125%;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    min-width: 0;
    text-align: right;
    background: linear-gradient(
        to bottom,
        rgb(0 0 0 / 50%),
        rgb(90 90 90 / 50%)
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.fp-profile-track-cover {
    position: relative;
    display: block;
    width: 80px;
    height: 80px;
    overflow: hidden;
    border-radius: 28px;
    background: var(--fp-bg-muted);
    box-shadow: 0 0 20px 0 rgb(0 0 0 / 10%);
}
.fp-profile-track-cover img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.fp-profile-track-cover::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    box-shadow:
        inset 0 0 0 2px rgb(0 0 0 / 10%),
        inset 0 0 18px 7px rgb(255 255 255 / 45%);
}
.fp-profile-track-info {
    display: grid;
    gap: 0.2rem;
    min-width: 0;
    padding-right: 3rem;
}
.fp-profile-track-info strong {
    overflow: hidden;
    font-size: 24px;
    font-weight: 500;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.fp-profile-track-info > span {
    overflow: hidden;
    color: var(--fp-ink-muted);
    font-size: 24px;
    font-weight: 500;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.fp-profile-track-chevron {
    display: inline-grid;
    width: 40px;
    height: 40px;
    place-items: center;
    color: var(--fp-ink-muted);
    font-size: 32px;
    transition: transform 0.25s ease;
}
.fp-profile-track[open] .fp-profile-track-chevron {
    transform: rotate(180deg);
}
/* Menu et chevron dans la même cellule du summary : le menu suit donc la ligne
   de titre et ne descend plus quand l'accordéon s'ouvre. */
.fp-profile-track-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.fp-profile-track-play-btn {
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--fp-ink);
    color: #fff;
    cursor: pointer;
    transition: transform 0.15s ease, background 0.15s ease;
}
.fp-profile-track-play-btn:focus,
.fp-profile-track-play-btn:focus-visible {
    outline: none;
    box-shadow: none;
}
.fp-profile-track-play-btn:hover {
    transform: scale(1.05);
}
.fp-profile-track-play-btn:active {
    transform: scale(0.96);
}
.fp-profile-track-play-btn .material-symbols-rounded {
    font-size: 22px;
    /* wght 400 vise le sous-ensemble FILL=1 chargé dans base.html.twig — le
       wght 500 est celui, distinct, du sous-ensemble FILL=0 partagé. Voir le
       commentaire au-dessus des <link> Google Fonts. */
    font-weight: 400;
}
.fp-profile-track.is-playing .fp-profile-track-play-btn {
    background: #1a7f37;
}
.fp-modal--player {
    width: min(92vw, 420px);
    border-radius: 32px;
}
.fp-player-panel {
    position: relative;
    display: block;
}
.fp-player-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 2;
}
.fp-player-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    padding: 2rem 1.5rem 1.75rem;
    text-align: center;
}
.fp-player-art-wrap {
    position: relative;
    width: min(72vw, 280px);
    height: min(72vw, 280px);
    border-radius: 28px;
    box-shadow: 0 24px 48px -24px rgb(0 0 0 / 45%);
}
.fp-player-art-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    box-shadow:
        inset 0 0 0 2px rgb(0 0 0 / 10%),
        inset 0 0 18px 7px rgb(255 255 255 / 45%);
}
.fp-player-art {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-fit: cover;
    background: var(--fp-bg-muted);
}
.fp-player-art--empty {
    background: linear-gradient(145deg, #222, #555);
}
.fp-player-copy {
    width: 100%;
    min-width: 0;
}
.fp-player-copy h2 {
    margin: 0;
    font-size: 1.35rem;
    line-height: 1.25;
    letter-spacing: -0.02em;
}
.fp-player-copy p {
    margin: 0.35rem 0 0;
    color: var(--fp-ink-muted);
    font-size: 1rem;
}
.fp-player-controls {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.85rem;
    width: 100%;
}
.fp-player-transport {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
}
.fp-player-skip {
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--fp-ink);
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
}
.fp-player-skip:hover {
    background: rgb(17 17 17 / 7%);
}
.fp-player-skip:active {
    transform: scale(0.96);
}
/* wght 400 vise le sous-ensemble FILL=1 (icônes remplies), cf. commentaire sur
   .fp-profile-track-play-btn .material-symbols-rounded plus haut. */
.fp-player-skip .material-symbols-rounded {
    font-size: 32px;
    font-weight: 400;
}
.fp-player-toggle {
    display: grid;
    width: 72px;
    height: 72px;
    place-items: center;
    border: none;
    border-radius: 50%;
    background: var(--fp-ink);
    color: #fff;
    cursor: pointer;
    transition: transform 0.15s ease;
}
.fp-player-toggle--empty {
    visibility: hidden;
    pointer-events: none;
}
.fp-player-toggle:hover {
    transform: scale(1.04);
}
/* wght 400 vise le sous-ensemble FILL=1 (icônes remplies), cf. commentaire sur
   .fp-profile-track-play-btn .material-symbols-rounded plus haut. */
.fp-player-toggle .material-symbols-rounded {
    font-size: 36px;
    font-weight: 400;
}
.fp-player-timeline {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
    font-family: var(--fp-font-mono);
    font-size: 0.75rem;
    color: var(--fp-ink-muted);
}
.fp-player-progress {
    position: relative;
    height: 6px;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: rgb(17 17 17 / 10%);
    cursor: pointer;
}
.fp-player-progress-fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0%;
    border-radius: inherit;
    background: var(--fp-ink);
    pointer-events: none;
}
.fp-player-hint {
    margin: 0;
    color: var(--fp-ink-muted);
    font-family: var(--fp-font-mono);
    font-size: 0.75rem;
}
.fp-player-fallback {
    color: var(--fp-ink-muted);
    font-size: 0.9rem;
}
.fp-player-fallback[hidden] {
    display: none;
}
.fp-player-fallback p {
    margin: 0;
}
.fp-player-external {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--fp-ink-muted);
    font-family: var(--fp-font-mono);
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
}
.fp-player-external:hover {
    color: var(--fp-ink);
    text-decoration: underline;
}
.fp-player-external .material-symbols-rounded {
    font-size: 1rem;
    font-weight: 500;
}
.fp-profile-track-delete-copy { margin: 0; color: var(--fp-ink-muted); }
.fp-modal-cancel {
    border: none;
    border-radius: var(--fp-radius-pill);
    background: #e8e8e8;
    color: #747474;
    cursor: pointer;
    font: 0.875rem var(--fp-font);
    padding: 0.75rem 1.1rem;
}
.fp-btn--danger { background: #b42318; }
.fp-btn--danger:hover { background: #8f1d14; }
.fp-profile-track-delete-copy { margin: 0; }
.fp-modal-cancel { background: rgb(17 17 17 / 7%); color: var(--fp-ink); transition: background 0.2s ease, transform 0.2s ease; }
.fp-modal-cancel:hover { background: rgb(17 17 17 / 12%); }
.fp-modal-cancel:active { transform: scale(0.98); }
.fp-btn--danger { box-shadow: 0 8px 18px -10px rgb(180 35 24 / 75%); }

.fp-profile-track-panel {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition:
        grid-template-rows 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.25s ease;
}
.fp-profile-track[open] .fp-profile-track-panel {
    grid-template-rows: 1fr;
    opacity: 1;
}
.fp-profile-track-panel > div {
    min-height: 0;
    overflow: hidden;
    padding: 0 2rem 0 calc(2rem + 4.75rem + 80px + 32px);
    transition: padding-bottom 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.fp-profile-track[open] .fp-profile-track-panel > div {
    padding-bottom: 1.5rem;
}
.fp-profile-track-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    row-gap: 0.2rem;
    margin-bottom: 0.65rem;
}
.fp-profile-track-meta > span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--fp-ink-muted);
    font-family: var(--fp-font-mono);
    font-size: 0.8rem;
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: 0;
    text-transform: none;
}
/* Petit point de séparation entre chaque item, absent devant le premier. */
.fp-profile-track-meta > span:not(:first-child)::before {
    content: "";
    flex: 0 0 auto;
    width: 3px;
    height: 3px;
    margin: 0 0.55rem;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.5;
}
/* Famille Rounded explicite + letter-spacing normal : le mono hérité par
   .fp-profile-track-meta > span casse la ligature sinon (le nom de l'icône
   s'affiche en toutes lettres, cf. .fp-stat-icon plus haut). */
.fp-profile-track-meta .material-symbols-rounded {
    font-family: "Material Symbols Rounded";
    font-size: 1.1rem;
    font-weight: 300;
    font-style: normal;
    letter-spacing: normal;
    line-height: 1;
    text-transform: none;
}
.fp-profile-track-note {
    margin: 0;
    font-size: 1rem;
    line-height: 1.4;
}
.fp-profile-track-note-dot {
    display: inline-block;
    width: 0.4rem;
    height: 0.4rem;
    margin-left: 0.4rem;
    vertical-align: middle;
    border-radius: 50%;
    background: var(--fp-ink);
}
.fp-profile-track-editor {
    display: none;
    margin-top: 0.35rem;
}
.is-editing .fp-profile-track-note {
    display: none;
}
.is-editing .fp-profile-track-editor {
    display: grid;
    gap: 0.85rem;
}
.fp-profile-track-editor-actions {
    margin-top: 0.65rem;
}
.fp-profile-track-delete-btn {
    padding: 0;
    border: none;
    background: none;
    color: var(--fp-ink-muted);
    font: 0.8rem var(--fp-font-mono);
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 0.15em;
}
.fp-profile-track-delete-btn:hover {
    color: #b42318;
}
.fp-profile-track-panel p {
    margin: 0;
    font-size: 1rem;
    line-height: 1.4;
}
.fp-profile-empty {
    margin: 0 32px;
    padding: 2rem;
    border-radius: 28px;
    background: var(--fp-bg-soft);
    text-align: center;
}
.fp-profile-empty p {
    margin: 0;
    color: var(--fp-ink-muted);
}
.fp-profile-follow {
    display: grid;
    justify-items: start;
    gap: 1rem;
    margin: 3rem 32px 0;
}
.fp-profile-follow p {
    margin: 0;
    color: var(--fp-ink-muted);
}
.fp-profile-footer {
    padding: 3rem 0 0;
    overflow: hidden;
}
.fp-profile-footer-bottom {
    display: flex;
    justify-content: center;
    text-align: center;
}
.fp-profile-footer-bottom span {
    font-family: var(--fp-font-mono);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fp-ink-muted);
}
.fp-profile-footer-bottom a {
    color: var(--fp-ink);
    text-decoration: none;
}
.fp-profile-footer-logo-container {
    width: min(100%, 1200px);
    margin: 1.5rem auto clamp(-5rem, -7vw, -1rem);
}
.fp-profile-footer-logo {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 0;
}
.fp-profile-footer-logo .fp-logo-mark {
    z-index: 1;
    width: clamp(10rem, 21vw, 16rem);
    height: clamp(10rem, 21vw, 16rem);
    transform: rotate(-15deg);
}
.fp-profile-footer-logo .fp-logo-title {
    flex: 1;
    width: 100%;
    max-width: none;
    aspect-ratio: 237 / 47;
    height: auto;
    background: linear-gradient(
        to bottom,
        rgb(0 0 0 / 60%) 0%,
        rgb(0 0 0 / 10%) 100%
    );
    -webkit-mask: url("/assets/svg/logo-title.svg") no-repeat center / contain;
    mask: url("/assets/svg/logo-title.svg") no-repeat center / contain;
}

@media (max-width: 640px) {
    .fp-profile {
        padding-top: 16px;
    }
    .fp-profile-banner-shell {
        height: 220px;
        border-radius: 40px;
    }
    .fp-profile-identity-bar {
        align-items: flex-end;
        margin-inline: 0;
    }
    .fp-profile-avatar--cover {
        width: 92px;
        border-radius: 32px;
    }
    .fp-profile-action {
        padding: 10px 20px;
        font-size: 16px;
    }
    .fp-profile-action--icon {
        width: 46px;
        height: 46px;
        padding: 0;
    }
    .fp-profile-action--icon .material-symbols-rounded {
        font-size: 20px;
    }
    .fp-playlist-search {
        margin-inline: 0;
        padding: 1rem;
        border-radius: 18px;
    }
    .fp-profile-editor-grid {
        grid-template-columns: 1fr;
    }
    .fp-profile-section-head,
    .fp-profile-tracks {
        padding-inline: 0;
    }
    .fp-profile-playlist-title-row {
        align-items: center;
        flex-direction: row;
    }
    .fp-profile-empty,
    .fp-profile-follow {
        margin-inline: 0;
    }
    .fp-profile-details {
        margin-inline: 0;
    }
    .fp-profile-track summary {
        grid-template-columns: 2.75rem 54px minmax(0, 1fr) auto;
        gap: 12px;
        padding: 12px 1rem;
    }
    .is-editing .fp-profile-track summary {
        grid-template-columns: 1.5rem 2.75rem 54px minmax(0, 1fr) auto;
    }
    .fp-profile-track-number {
        font-size: 1.3rem;
    }
    .fp-profile-track-cover {
        width: 54px;
        height: 54px;
        border-radius: 20px;
    }
    .fp-profile-track-panel > div {
        padding-inline: 1rem;
    }
    /* Feuille collée en bas : `margin-bottom: 0` annule le centrage vertical,
       `margin-inline: auto` conserve le centrage horizontal. */
    .fp-modal {
        width: 100vw;
        max-width: 100vw;
        max-height: 92dvh;
        border-radius: 28px 28px 0 0;
        margin: auto auto 0;
    }
}

/* --- Motion --- */
@keyframes fp-fade-up {
    from {
        opacity: 0;
        transform: translateY(18px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fp-band-content,
.fp-section-head,
.fp-story-copy {
    animation: fp-fade-up 0.8s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.fp-band-media img {
    animation: fp-fade-up 1s 0.1s cubic-bezier(0.4, 0, 0.2, 1) both;
}

/* --- Responsive --- */
@media (max-width: 960px) {
    .fp-band {
        min-height: auto;
        display: flex;
        flex-direction: column;
    }

    .fp-band-content {
        max-width: none;
        min-height: auto;
        padding-bottom: 2rem;
        order: 2;
    }

    .fp-band-content p {
        max-width: 40ch;
    }

    .fp-band-media {
        position: relative;
        inset: auto;
        order: 1;
        min-height: 280px;
        flex: 0 0 280px;
    }

    .fp-band-media::after {
        background: linear-gradient(
            180deg,
            transparent 40%,
            rgba(238, 242, 244, 0.85) 78%,
            #eef2f4 100%
        );
    }

    .fp-band-media img {
        object-position: center 28%;
    }

    .fp-stats {
        grid-template-columns: 1fr;
        gap: 1.75rem;
    }

    /* En colonne unique, chaque stat garde sa propre stroke en dégradé : pas de
       border-top ici, il ferait doublon avec le ::before. */
    .fp-stat {
        padding-right: 0;
    }

    .fp-steps-list {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .fp-step:nth-child(1) {
        --fp-step-from: 0%;
        --fp-step-to: 40%;
    }

    .fp-step:nth-child(2) {
        --fp-step-from: 0%;
        --fp-step-to: 55%;
    }

    .fp-step:nth-child(3) {
        --fp-step-from: 0%;
        --fp-step-to: 70%;
    }

    .fp-phones {
        grid-template-columns: 1fr;
        max-width: 320px;
        margin-inline: auto;
    }

    .fp-phone-slot {
        min-height: 380px;
    }

    .fp-faq-layout {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .fp-faq-layout > h2 {
        position: static;
    }

    /* .fp-footer-top est un flex : la langue passe au-dessus des colonnes. */
    .fp-footer-top {
        flex-direction: column;
    }

    .fp-footer-cols {
        flex-wrap: wrap;
    }

    .fp-footer-cols .fp-footer-col {
        flex: 1 1 40%;
    }

    .fp-story-copy {
        max-width: 90%;
        left: var(--fp-gutter);
    }

    .fp-auth-page {
        --fp-auth-nav-height: 64px;
        min-height: auto;
        display: block;
    }

    .fp-auth-wrap {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .fp-auth-band {
        min-height: 320px;
    }
}

@media (max-width: 640px) {
    .fp-nav-inner {
        min-height: 64px;
    }

    /* 7 covers côte à côte sont illisibles sur mobile : la pyramide passe en
       défilement horizontal, toutes les covers à la même taille. */
    .fp-gallery-track {
        justify-content: flex-start;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: var(--fp-gutter);
        -webkit-overflow-scrolling: touch;
    }

    .fp-gallery-card {
        scroll-snap-align: center;
    }

    .fp-gallery-card--xs,
    .fp-gallery-card--sm,
    .fp-gallery-card--lg {
        --fp-cover: min(62vw, 260px);
    }

    .fp-footer-top {
        gap: 1.75rem;
    }

    .fp-footer-cols {
        flex-direction: column;
        gap: 1.75rem;
    }

    .fp-footer-bottom {
        align-items: flex-start;
        flex-direction: column;
    }

    .fp-story-frame {
        aspect-ratio: auto;
        min-height: 70vh;
    }
}

/* ==========================================================================
   Pages marketing (À propos, Contact, Légal)
   ========================================================================== */

.fp-page {
    padding: calc(76px + var(--fp-section-y) * 0.55) 0 var(--fp-section-y);
}

.fp-page-inner {
    max-width: 720px;
}

.fp-prose h1 {
    font-size: clamp(2.4rem, 5vw, 3.6rem);
    letter-spacing: -0.045em;
    margin-bottom: 1rem;
}

.fp-prose h2 {
    font-size: clamp(1.35rem, 2.4vw, 1.75rem);
    margin: 2.25rem 0 0.75rem;
    letter-spacing: -0.03em;
}

.fp-prose p {
    font-size: 1.05rem;
    color: var(--fp-ink-soft);
    line-height: 1.65;
    margin-bottom: 1rem;
}

.fp-prose a:not(.fp-btn) {
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.fp-prose a:not(.fp-btn):hover {
    color: var(--fp-ink-soft);
    text-shadow: none;
}

.fp-prose-lead {
    font-size: clamp(1.1rem, 1.6vw, 1.25rem) !important;
    color: var(--fp-ink) !important;
    max-width: 42ch;
}

.fp-prose-meta {
    font-size: 0.9rem !important;
    color: var(--fp-ink-muted) !important;
    margin-bottom: 2rem !important;
}

.fp-prose-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 2.5rem;
}

.fp-btn-ghost {
    background: transparent;
    color: var(--fp-ink);
    border: 1px solid var(--fp-border);
    box-shadow: none;
}

.fp-btn-ghost:hover {
    background: var(--fp-bg-soft);
    color: var(--fp-ink);
    box-shadow: none;
}

.fp-text-link {
    color: var(--fp-ink);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.fp-text-link:hover {
    color: var(--fp-ink-soft);
    text-shadow: none;
}

.fp-contact-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-top: 2rem;
}

.fp-contact-form .fp-form-group {
    gap: 0.75rem;
}

.fp-contact-form .fp-form-label {
    padding-inline: 4px;
    margin-bottom: 0;
}

.fp-contact-form .fp-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem 1.25rem;
}

.fp-contact-form select.fp-form-control {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%238a8a8e' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-right: 2.75rem;
    cursor: pointer;
}

.fp-contact-form textarea.fp-form-control {
    min-height: 160px;
    resize: vertical;
}

.fp-contact-form .fp-btn {
    margin-top: 0.5rem;
}

.fp-contact-alt {
    margin-top: 1.75rem !important;
}

.fp-contact-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin: 2rem 0 2.5rem;
}

.fp-contact-card {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 1.35rem 1.4rem;
    border-radius: var(--fp-radius-md);
    background: var(--fp-bg-soft);
    color: var(--fp-ink);
    text-decoration: none;
    transition: transform 0.25s ease, background 0.25s ease;
}

.fp-contact-card:hover {
    background: var(--fp-bg-muted);
    color: var(--fp-ink);
    text-decoration: none;
    text-shadow: none;
    transform: translateY(-2px);
}

.fp-contact-card--static:hover {
    transform: none;
    background: var(--fp-bg-soft);
}

.fp-contact-card .material-symbols-rounded {
    font-size: 1.4rem;
    margin-bottom: 0.35rem;
}

.fp-contact-card-label {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--fp-ink-muted);
}

.fp-contact-card strong {
    font-size: 1.05rem;
    font-weight: 600;
    word-break: break-word;
}

.fp-legal-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    margin-bottom: 2rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--fp-border);
}

.fp-legal-nav a {
    color: var(--fp-ink-muted);
    font-size: 0.95rem;
    font-weight: 500;
    text-decoration: none;
}

.fp-legal-nav a:hover,
.fp-legal-nav a.is-active {
    color: var(--fp-ink);
    text-shadow: none;
}

.fp-legal-nav a.is-active {
    font-weight: 700;
}

.fp-legal-body h2 {
    font-size: 1.2rem;
    margin: 1.85rem 0 0.65rem;
}

.fp-legal-body p {
    margin-bottom: 0.85rem;
}

.fp-legal-body a {
    color: var(--fp-ink);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.fp-legal-body a:hover {
    text-shadow: none;
}

@media (max-width: 640px) {
    .fp-contact-cards,
    .fp-contact-form .fp-form-grid {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fp-band-content,
    .fp-section-head,
    .fp-story-copy,
    .fp-band-media img {
        animation: none;
    }

    .fp-faq-item [data-faq-target="panel"],
    .fp-faq-answer,
    .fp-faq-item button svg {
        transition: none;
    }
}

/* ==========================================================================
   Mode hommage — thème sombre
   Les tokens --fp-* sont déjà redéfinis en haut du fichier (cf.
   .fp-profile-page--tribute) ; tout composant qui les consomme s'adapte donc
   seul. Ce qui suit corrige uniquement les couleurs codées en dur (pensées
   pour un fond clair) que ces tokens ne peuvent pas atteindre.
   ========================================================================== */
.fp-profile-page--tribute .fp-profile-action,
.fp-profile-page--tribute .fp-modal-close,
.fp-profile-page--tribute .fp-modal-cancel {
    background: rgb(255 255 255 / 10%);
    color: var(--fp-ink-soft);
}
.fp-profile-page--tribute .fp-profile-action:hover,
.fp-profile-page--tribute .fp-modal-close:hover,
.fp-profile-page--tribute .fp-modal-cancel:hover {
    background: rgb(255 255 255 / 16%);
    color: var(--fp-ink-soft);
}
.fp-profile-page--tribute .fp-modal-foot {
    border-top-color: var(--fp-border);
}
.fp-profile-page--tribute .is-editing .fp-profile-playlist-edit,
.fp-profile-page--tribute .is-editing .fp-profile-playlist-edit:hover {
    background: var(--fp-ink);
    color: var(--fp-bg);
}

.fp-profile-page--tribute .fp-modal {
    background: var(--fp-bg-soft);
    box-shadow: 0 32px 80px -32px rgb(0 0 0 / 70%);
}
.fp-profile-page--tribute .fp-modal::backdrop {
    background: rgb(0 0 0 / 65%);
}
.fp-profile-page--tribute .fp-modal-description,
.fp-profile-page--tribute .fp-tribute-restore .fp-modal-description {
    color: #e8e8ea;
}
.fp-profile-page--tribute .fp-modal-description a,
.fp-profile-page--tribute .fp-tribute-restore .fp-modal-description a {
    color: #fff;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 0.12em;
}
.fp-profile-page--tribute .fp-modal-head h2 {
    color: var(--fp-ink);
}

.fp-profile-page--tribute .fp-account-menu-panel {
    background: var(--fp-bg-soft);
    box-shadow: 0 12px 40px rgb(0 0 0 / 55%);
}
.fp-profile-page--tribute .fp-account-menu-item--danger:hover {
    background: rgb(180 35 24 / 15%);
}

/* En mode normal, "even" (#fff, le fond de page) contraste avec "odd"
   (--fp-bg-soft). "odd" n'a pas de surcharge tribute et prend donc déjà
   --fp-bg-soft (sombre) : "even" doit rester distinct, sur --fp-bg (encore
   plus sombre), sinon les deux lignes se confondent. */
.fp-profile-page--tribute .fp-profile-track:nth-child(even) {
    background: var(--fp-bg);
}

/* Boutons de la track list et du lecteur : `background: var(--fp-ink)` avec
   `color: #fff` codé en dur donne du blanc sur blanc une fois --fp-ink
   inversé en clair par le thème sombre — le texte/l'icône doit rester
   `var(--fp-bg)` (toujours l'opposé de --fp-ink, quel que soit le thème). */
.fp-profile-page--tribute .fp-profile-track-play-btn,
.fp-profile-page--tribute .fp-player-toggle {
    color: var(--fp-bg);
}
.fp-profile-page--tribute .fp-profile-track.is-playing .fp-profile-track-play-btn {
    color: #fff;
}
.fp-profile-page--tribute .fp-player-skip:hover {
    background: rgb(255 255 255 / 8%);
}

/* Boutons pleins génériques (.fp-btn, hors --ghost/--danger qui gèrent déjà
   leur propre couleur) : « Mon espace », suivre, se connecter, enregistrer…
   même souci que les boutons de lecture ci-dessus. */
.fp-profile-page--tribute .fp-btn:not(.fp-btn--ghost):not(.fp-btn--danger) {
    color: var(--fp-bg);
}
.fp-profile-page--tribute .fp-btn:not(.fp-btn--ghost):not(.fp-btn--danger):hover {
    color: var(--fp-bg);
}

/* Bannière « Je suis vivant » : fond clair → texte/bouton contrastés (écrase les règles tribute ci-dessus). */
.fp-profile-page--tribute .fp-tribute-restore .fp-btn:not(.fp-btn--ghost):not(.fp-btn--danger),
.fp-profile-page--tribute .fp-tribute-restore .fp-btn:not(.fp-btn--ghost):not(.fp-btn--danger):hover {
    background: #111;
    color: #fff;
}

.fp-profile-page--tribute .fp-profile-track-cover {
    box-shadow: 0 0 20px 0 rgb(0 0 0 / 35%);
}
.fp-profile-page--tribute .fp-profile-track-cover::after,
.fp-profile-page--tribute .fp-player-art-wrap::after,
.fp-profile-page--tribute .fp-profile-avatar--cover::after {
    box-shadow:
        inset 0 0 0 2px rgb(255 255 255 / 12%),
        inset 0 0 18px 7px rgb(255 255 255 / 8%);
}
.fp-profile-page--tribute .fp-player-art-wrap {
    box-shadow: 0 24px 48px -24px rgb(0 0 0 / 70%);
}

.fp-profile-page--tribute .fp-profile-editor-form .fp-note-field textarea {
    background: var(--fp-bg-soft);
    border-color: rgb(255 255 255 / 20%);
}
.fp-profile-page--tribute .fp-profile-editor-form .fp-note-field textarea:focus,
.fp-profile-page--tribute .fp-profile-editor-form .fp-note-field textarea:focus-visible {
    border-color: rgb(255 255 255 / 45%);
}

.fp-profile-page--tribute .fp-profile-details h1,
.fp-profile-page--tribute .fp-profile-track-number {
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    -webkit-text-fill-color: currentColor;
    color: var(--fp-ink);
}
.fp-profile-page--tribute .fp-profile-details h1,
.fp-profile-page--tribute .fp-profile-description {
    font-family: "Libre Baskerville", Georgia, serif;
}
.fp-profile-page--tribute .fp-profile-details h1 {
    font-weight: 700;
}

.fp-profile-page--tribute .fp-profile-avatar img {
    filter: grayscale(1);
}

/* Navbar : le halo de flou est calibré pour un fond blanc (progressive-blur
   part d'une couleur opaque puis s'efface vers le transparent). Le logo texte
   est un SVG rempli en noir affiché tel quel (pas de mask ici) : invert(1) le
   rend blanc sans dupliquer le fichier. */
.fp-profile-page--tribute .fp-nav-blur {
    --progressive-blur-color: rgb(13 13 13 / 96%);
}
.fp-profile-page--tribute .fp-nav .fp-logo-title {
    filter: invert(1);
}

/* Logo du footer profil : peint via mask-image, le dégradé de fond est la
   vraie couleur du texte. En clair il va du noir opaque au noir transparent ;
   en sombre il doit partir du blanc opaque pour rester lisible. */
.fp-profile-page--tribute .fp-profile-footer-logo .fp-logo-title {
    background: linear-gradient(
        to bottom,
        rgb(255 255 255 / 60%) 0%,
        rgb(255 255 255 / 10%) 100%
    );
}