/*
Theme Name: Fanny J — Site Officiel
Theme URI: https://fannyj.fr
Description: Thème enfant Astra sur mesure pour le site officiel de Fanny J. Templates de page dédiés, sections activables, contenus 100% administrables depuis la personnalisation.
Author: Studio Fanny J
Template: astra
Version: 1.1.0
Text Domain: fannyj
Requires PHP: 7.4
Tags: musique, artiste, zouk, custom-colors, custom-menu, translation-ready
*/

/* ==========================================================================
   00. SOCLE — variables, reset, rythme typographique
   ========================================================================== */

:root {
    /* Charte « L'Effet Papillon » : monochrome, contrasté, sans couleur d'appui.
       Les noms de variables sont conservés — toute la feuille s'y réfère —
       seules leurs valeurs changent. --clay / --gold portent désormais
       l'accent blanc, --sea le gris de second plan. */
    --ink:        #050505;
    --ink-soft:   #0A0A0A;
    --ink-line:   rgba(255, 255, 255, .14);
    --paper:      #FFFFFF;
    --paper-mute: #A8A8A8;
    --clay:       #FFFFFF;
    --clay-deep:  #DCDCDC;
    --gold:       #FFFFFF;
    --sea:        #9C9C9C;

    --shell:      1240px;
    --gut:        clamp(18px, 5vw, 56px);
    /* Hauteur de l'en-tête fixe : sert de repère aux décalages de contenu. */
    --head:       92px;

    --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
    --sans:  "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    --ease: cubic-bezier(.22, .61, .36, 1);

    /* La silhouette de « L'Effet Papillon », posée une fois pour toutes.
       Elle sert de masque : la couleur reste celle qu'on lui donne.
       Tout est encodé, apostrophes comprises (%27) — une apostrophe littérale
       ne survit pas au passage par un script shell, et le masque devient alors
       invalide sans que rien ne le signale : le papillon disparaît. */
    --fj-butterfly: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2032%2032%27%3E%3Cg%20fill=%27none%27%20stroke=%27%23fff%27%20stroke-width=%272%27%20stroke-linejoin=%27round%27%3E%3Cpath%20d=%27M15%2014.8C12.9%208.4%208.4%204%205.2%205.4%202.4%206.7%202.7%2011.5%205.7%2014.1%208%2016%2011.9%2016.1%2015%2014.8Z%27/%3E%3Cpath%20d=%27M15%2018.4C12.5%2018.8%208.9%2020.5%208%2023.5%207%2026.5%209.6%2028.5%2012.2%2027%2014.2%2025.8%2014.9%2021.6%2015%2018.4Z%27/%3E%3Cpath%20d=%27M17%2014.8C19.1%208.4%2023.6%204%2026.8%205.4%2029.6%206.7%2029.3%2011.5%2026.3%2014.1%2024%2016%2020.1%2016.1%2017%2014.8Z%27/%3E%3Cpath%20d=%27M17%2018.4C19.5%2018.8%2023.1%2020.5%2024%2023.5%2025%2026.5%2022.4%2028.5%2019.8%2027%2017.8%2025.8%2017.1%2021.6%2017%2018.4Z%27/%3E%3C/g%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    /* L'en-tête est fixe : les ancres ne doivent pas passer dessous. */
    scroll-padding-top: calc(var(--head) + 16px);
}

body.fj {
    margin: 0;
    background: var(--ink);
    color: var(--paper);
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.65;
    font-weight: 400;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    /* Filet contre les débordements : URL, titres longs, mots composés. */
    overflow-wrap: break-word;
}

body.fj :target { scroll-margin-top: calc(var(--head) + 16px); }

/* Remise à zéro des images, enveloppée dans :where() pour peser zéro en
   spécificité. Écrite normalement, « body.fj img » compte une classe et deux
   éléments : elle l'emportait sur toute règle de bloc en une seule classe, et
   son « height: auto » écrasait les « height: 100% » des images de couverture.
   Résultat : la photo de bannière ne remplissait pas son cadre, les vignettes
   d'article débordaient du leur, et l'image d'un article s'affichait en pleine
   taille dans le flux au lieu de tenir le fond. */
body.fj :where(img) { max-width: 100%; height: auto; display: block; }
body.fj a { text-decoration: none; }
/* La couleur d'un lien appartient à son composant : le bleu du navigateur est
   neutralisé à la spécificité la plus basse possible (un simple sélecteur de
   type) pour qu'aucune classe n'ait à lutter contre ce reset. Posée sur
   « body.fj a », la règle l'emportait sur .fj-btn--solid, .fj-nav a ou
   .fj-link, et tous les liens repassaient en blanc — d'où un bouton blanc au
   libellé blanc dans la bannière. */
a { color: inherit; }
/*
 * Remise à zéro des boutons, à spécificité nulle.
 *
 * Écrite « body.fj button », elle comptait une classe et deux éléments et
 * l'emportait sur « .fj-btn ». Or « font » est un raccourci : il remet d'un
 * coup la famille, la taille et la graisse. Un <button class="fj-btn"> sortait
 * donc en 16 px maigre là où un <a class="fj-btn"> sortait en 11 px gras —
 * « Voir la boutique » et « Écouter maintenant » n'avaient pas la même
 * typographie alors qu'ils portent la même classe.
 *
 * Le même piège avait déjà été contourné plus bas pour l'aplat de fond, à
 * coups de « body.fj button.fj-btn--solid ». Avec :where(), la remise à zéro
 * ne pèse plus rien et ces rustines deviennent inutiles.
 */
:where(body.fj button) { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
body.fj ul { list-style: none; margin: 0; padding: 0; }
body.fj p { margin: 0 0 1.1em; }
body.fj h1, body.fj h2, body.fj h3, body.fj h4 { margin: 0; font-weight: 400; }

body.fj ::selection { background: var(--clay); color: var(--ink); }

body.fj ::-webkit-scrollbar { width: 9px; }
body.fj ::-webkit-scrollbar-track { background: var(--ink); }
body.fj ::-webkit-scrollbar-thumb { background: #2A2A2A; }
body.fj ::-webkit-scrollbar-thumb:hover { background: var(--clay); }

body.fj.is-locked { overflow: hidden; }

/* Grain discret : évite l'aplat numérique parfait */
.fj-grain {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: .05;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2032%2032'%3E%3Cg%20fill='%23ffffff'%3E%3Cpath%20d='M16%2011C13%207%208%203%205%204%202%205%201.5%2010%203.5%2013%205.5%2016%2012%2017%2016%2016Z'/%3E%3Cpath%20d='M16%2016.5C12%2017.5%207%2019%205.5%2022.5%204%2026%207%2029%2010.5%2027.5%2013.5%2026%2015.5%2022.5%2016%2020Z'/%3E%3Cpath%20d='M16%2011C19%207%2024%203%2027%204%2030%205%2030.5%2010%2028.5%2013%2026.5%2016%2020%2017%2016%2016Z'/%3E%3Cpath%20d='M16%2016.5C20%2017.5%2025%2019%2026.5%2022.5%2028%2026%2025%2029%2021.5%2027.5%2018.5%2026%2016.5%2022.5%2016%2020Z'/%3E%3Cpath%20d='M16%209.5c.95%200%201.5%201.4%201.5%204%200%203.6-.6%207.4-1.5%209.5-.9-2.1-1.5-5.9-1.5-9.5%200-2.6.55-4%201.5-4z'/%3E%3C/g%3E%3Cpath%20d='M15.3%2010C13.5%207%2011.5%205.5%209.8%205M16.7%2010C18.5%207%2020.5%205.5%2022.2%205'%20fill='none'%20stroke='%23ffffff'%20stroke-width='1.1'%20stroke-linecap='round'/%3E%3C/svg%3E");
}

/* Les marges tiennent compte des encoches en paysage (viewport-fit=cover). */
.fj-shell {
    width: 100%;
    max-width: var(--shell);
    margin: 0 auto;
    padding-left: max(var(--gut), env(safe-area-inset-left));
    padding-right: max(var(--gut), env(safe-area-inset-right));
}

/* Libellés réservés aux lecteurs d'écran (Astra ne les fournit plus ici). */
.screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Utilitaires typographiques ------------------------------------------------ */

.fj-display {
    font-family: var(--serif);
    font-weight: 500;
    line-height: .92;
    letter-spacing: -.015em;
}
.fj-italic { font-style: italic; }

.fj-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--paper-mute);
}
/*
 * Le sur-titre est marqué par un papillon, pas par un filet.
 *
 * Le trait horizontal devant un intitulé en capitales est le tic de mise en
 * page le plus répandu du moment : on le voit sur tous les gabarits, il ne dit
 * rien du site qui le porte. La silhouette, elle, est celle de « L'Effet
 * Papillon » — la même que celle qui dérive dans la bannière et qui tient lieu
 * de vignette à un produit sans visuel. Répétée de section en section, elle
 * fait office de fleuron : une signature, pas un ornement de série.
 *
 * Posée en masque et non en image de fond : la couleur reste pilotée par
 * « background », ce qui laisse les variantes de thème la reprendre en une
 * ligne, comme elles le faisaient pour le filet.
 */
.fj-eyebrow::before {
    content: "";
    width: 16px;
    height: 16px;
    flex: none;
    background: var(--clay);
    opacity: .9;
    -webkit-mask: var(--fj-butterfly) center / contain no-repeat;
    mask: var(--fj-butterfly) center / contain no-repeat;
}
.fj-eyebrow .num { color: var(--clay); font-variant-numeric: tabular-nums; }

.fj-lead {
    font-size: clamp(1rem, 1.6vw, 1.12rem);
    color: rgba(255, 255, 255, .72);
    max-width: 54ch;
}
/* Chapô placé juste sous un en-tête de section : on rattrape sa marge basse. */
.fj-lead--head { margin: -18px 0 30px; }

/* Colonne de lecture resserrée (formulaire de contact, blocs éditoriaux). */
.fj-narrow { max-width: 760px; }

.fj-rule { height: 1px; background: var(--ink-line); border: 0; margin: 0; }

/* Section header ------------------------------------------------------------ */

.fj-section { position: relative; padding: clamp(56px, 9vw, 118px) 0; }
.fj-section--tint { background: var(--ink-soft); }
.fj-section--line { border-top: 1px solid var(--ink-line); }

.fj-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 28px;
    margin-bottom: clamp(28px, 4vw, 52px);
}
.fj-head__title {
    font-family: var(--serif);
    font-size: clamp(2.1rem, 5.4vw, 3.7rem);
    line-height: 1;
    margin-top: 14px;
    letter-spacing: -.02em;
}
.fj-head__title em { font-style: italic; color: var(--gold); }

/* ==========================================================================
   01. BOUTONS & LIENS — états survol toujours lisibles
   ========================================================================== */

.fj-btn {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    padding: 15px 30px;
    /* Déclarée ici et pas seulement héritée : le bouton d'envoi d'un
       commentaire est un <input>, et un <input> ne reçoit ni la famille ni la
       taille de son parent. Sans cette ligne, il sortait en Arial. */
    font-family: var(--sans);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    border: 1px solid transparent;
    border-radius: 2px;
    transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
    white-space: nowrap;
}
.fj-btn i { font-size: .95em; }

.fj-btn--solid { background: var(--clay); color: var(--ink); border-color: var(--clay); }
.fj-btn--solid:hover,
.fj-btn--solid:focus-visible { background: var(--clay-deep); border-color: var(--clay-deep); color: var(--ink); transform: translateY(-2px); }

.fj-btn--ghost { border-color: rgba(255, 255, 255, .28); color: var(--paper); }
.fj-btn--ghost:hover,
.fj-btn--ghost:focus-visible { background: var(--paper); border-color: var(--paper); color: var(--ink); transform: translateY(-2px); }

.fj-btn--paper { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.fj-btn--paper:hover,
.fj-btn--paper:focus-visible { background: var(--gold); border-color: var(--gold); color: var(--ink); }

/* Le reset `body.fj button` remet le fond à none et l'emporte, par
   spécificité, sur les variantes ci-dessus : les boutons de formulaire
   (recherche, newsletter, lecteur d'album) perdaient leur aplat. */
body.fj button.fj-btn--solid { background: var(--clay); }
body.fj button.fj-btn--solid:hover,
body.fj button.fj-btn--solid:focus-visible { background: var(--clay-deep); }
body.fj button.fj-btn--paper { background: var(--paper); }
body.fj button.fj-btn--paper:hover,
body.fj button.fj-btn--paper:focus-visible { background: var(--gold); }
body.fj button.fj-btn--ghost:hover,
body.fj button.fj-btn--ghost:focus-visible { background: var(--paper); }
body.fj button.fj-album__play { background: var(--paper); }
body.fj button.fj-album__play:hover { background: var(--gold); }

.fj-btn--sm { padding: 11px 20px; font-size: .68rem; letter-spacing: .14em; }

.fj-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--paper-mute);
    padding-bottom: 3px;
    border-bottom: 1px solid rgba(255, 255, 255, .18);
    transition: color .3s var(--ease), border-color .3s var(--ease);
}
.fj-link i { transition: transform .3s var(--ease); }
.fj-link:hover,
.fj-link:focus-visible { color: var(--paper); border-color: var(--clay); }
.fj-link:hover i { transform: translateX(5px); }

/* ==========================================================================
   02. EN-TÊTE
   ========================================================================== */

.fj-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 120;
    padding: 22px 0;
    transition: padding .4s var(--ease), background .4s var(--ease), border-color .4s var(--ease);
    border-bottom: 1px solid transparent;
}
.fj-header::before {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(5, 5, 5, .78), rgba(5, 5, 5, 0));
    opacity: 1;
    transition: opacity .4s var(--ease);
    pointer-events: none;
}
.fj-header.is-stuck {
    padding: 13px 0;
    background: rgba(5, 5, 5, .94);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-bottom-color: var(--ink-line);
}
.fj-header.is-stuck::before { opacity: 0; }

.fj-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(12px, 2.5vw, 26px);
    min-width: 0;
}

/* Logotype "Fanny J" — italique gravé */
.fj-logo { display: inline-flex; align-items: baseline; gap: 3px; line-height: 1; min-width: 0; }
.fj-logo__mark {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(1.6rem, 3.2vw, 2.05rem);
    letter-spacing: .01em;
    color: var(--paper);
    transition: color .35s var(--ease);
}
.fj-logo__mark .j {
    color: var(--clay);
    font-weight: 600;
    padding-left: .06em;
    transition: color .35s var(--ease);
}
.fj-logo:hover .fj-logo__mark { color: #fff; }
.fj-logo:hover .fj-logo__mark .j { color: var(--gold); }
/* « Site officiel » sous le logotype : 8 px, c'était le plus petit texte du
   site. Il est masqué sous 1080 px, mais restait illisible au-dessus. */
.fj-logo__sub {
    font-size: .62rem;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--paper-mute);
    margin-left: 8px;
    padding-left: 9px;
    border-left: 1px solid var(--ink-line);
    align-self: center;
}
.fj-logo__img { max-height: 46px; width: auto; }

.fj-nav { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 34px); }
.fj-nav a {
    position: relative;
    font-size: .73rem;
    font-weight: 600;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .68);
    padding: 6px 0;
    transition: color .3s var(--ease);
}
.fj-nav a::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 0; height: 1px;
    background: var(--clay);
    transition: width .35s var(--ease);
}
.fj-nav a:hover,
.fj-nav a:focus-visible { color: var(--paper); }
.fj-nav a:hover::after { width: 100%; }
.fj-nav a.is-current { color: var(--paper); }
.fj-nav a.is-current::after { width: 100%; background: var(--gold); }

.fj-header__aside { display: flex; align-items: center; gap: clamp(10px, 1.6vw, 16px); flex: none; }

.fj-burger {
    display: none;
    width: 46px; height: 46px;
    border: 1px solid var(--ink-line);
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    transition: border-color .3s var(--ease), background .3s var(--ease);
}
.fj-burger span {
    display: block;
    width: 17px; height: 1.5px;
    background: var(--paper);
    transition: transform .35s var(--ease), opacity .25s var(--ease), width .35s var(--ease);
}
.fj-burger span:last-child { width: 11px; }
.fj-burger:hover { border-color: var(--clay); background: rgba(255, 255, 255, .12); }
.fj-burger.is-open span:first-child { transform: translateY(3.2px) rotate(45deg); }
.fj-burger.is-open span:last-child { width: 17px; transform: translateY(-3.2px) rotate(-45deg); }

/* Panneau mobile plein écran */
.fj-drawer {
    position: fixed;
    inset: 0;
    z-index: 115;
    background: var(--ink);
    padding:
        calc(var(--head) + 12px)
        max(var(--gut), env(safe-area-inset-right))
        max(40px, env(safe-area-inset-bottom))
        max(var(--gut), env(safe-area-inset-left));
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transform: translateY(-100%);
    transition: transform .55s var(--ease);
    overflow-y: auto;
    overscroll-behavior: contain;
}
.fj-drawer.is-open { transform: translateY(0); }
/* Menu centré : plein écran et sans repère à gauche, un alignement au fer
   laissait les intitulés flotter contre le bord. Centrés, ils tiennent
   d'eux-mêmes le milieu de l'écran. */
.fj-drawer__nav { display: flex; flex-direction: column; gap: 2px; text-align: center; }
.fj-drawer__nav a {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 16px;
    font-family: var(--serif);
    font-size: clamp(1.9rem, 8vw, 2.9rem);
    line-height: 1.25;
    color: rgba(255, 255, 255, .82);
    border-bottom: 1px solid var(--ink-line);
    padding: 12px 0;
    transition: color .3s var(--ease), padding-left .3s var(--ease);
}
.fj-drawer__nav a .idx {
    font-family: var(--sans);
    font-size: .6rem;
    letter-spacing: .2em;
    color: var(--clay);
}
.fj-drawer__nav a:hover,
.fj-drawer__nav a.is-current { color: var(--paper); letter-spacing: .01em; }
.fj-drawer__nav a.is-current { font-style: italic; }
.fj-drawer__foot { padding-top: 26px; text-align: center; }
.fj-drawer__foot .socials { display: flex; justify-content: center; gap: 12px; margin-top: 16px; }
.fj-drawer__foot .fj-lang { justify-content: center; }

/* ==========================================================================
   03. HERO
   ========================================================================== */

/* La bannière occupe l'écran. Sans hauteur minimale elle se réglait sur son
   seul contenu — environ 70 % de l'écran sur un portable — et la photo, qui est
   le visuel de la campagne, arrivait rognée en bande. « min-height » et non
   « height » : un contenu plus long que l'écran fait grandir la section au lieu
   d'en déborder. 100svh d'abord pour la hauteur hors barre d'adresse, avec
   100vh en repli pour les navigateurs qui ne connaissent pas svh. */
.fj-hero {
    position: relative;
    overflow: hidden;
    background: var(--ink);
    display: flex;
    align-items: center;
    min-height: 100vh;
    min-height: 100svh;
}
/* Fond média — le poster s'affiche d'emblée, la vidéo le remplace en fondu
   une fois chargée. Même mécanique sur téléphone : c'est le script qui décide
   du moment, pas la largeur de l'écran. */
.fj-media {
    --media-opacity: 1;
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}
/* Le sélecteur descend d'un cran dans le conteneur — deux classes — pour
   passer devant la remise à zéro « body.fj img { height: auto } », qui compte
   une classe et deux éléments et l'emportait donc sur une classe seule. La
   photo gardait ses proportions d'origine au lieu de couvrir la bannière :
   sur un téléphone, 260 px de haut pour un cadre de 743. */
.fj-media .fj-media__poster,
.fj-media .fj-media__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: contrast(1.05) saturate(1.02);
    transition: opacity .9s var(--ease);
}
.fj-media__poster { opacity: var(--media-opacity); }
.fj-media__video  { opacity: 0; }
.fj-media.is-playing .fj-media__video  { opacity: var(--media-opacity); }
.fj-media.is-playing .fj-media__poster { opacity: 0; }

/* La photo de bannière s'affiche pleine : c'est le visuel de la campagne, et
   le voile de lecture ci-dessous suffit à tenir le texte lisible par-dessus.
   L'atténuer en plus revenait à la montrer à travers un rideau. */
.fj-hero__media    { --media-opacity: 1; }
.fj-pagehead__bg   { --media-opacity: .22; }
.fj-pagehead__bg .fj-media__poster,
.fj-pagehead__bg .fj-media__video { filter: grayscale(.4); }

/* Vidéo YouTube recadrée en plein cadre, portrait compris */
.fj-yt { overflow: hidden; }
.fj-yt iframe {
    position: absolute;
    top: 50%; left: 50%;
    width: 177.78vh; min-width: 100%;
    height: 56.25vw; min-height: 100%;
    transform: translate(-50%, -50%);
    border: 0;
    pointer-events: none;
}
/* Voile progressif : sombre derrière le texte, nul sur la droite.
   Le dégradé du bas s'arrête plus haut qu'avant — il mangeait le tiers
   inférieur de la photo, mains et étoffe comprises. */
.fj-hero__media::after {
    content: "";
    position: absolute; inset: 0;
    background:
        linear-gradient(90deg, rgba(5, 5, 5,.90) 0%, rgba(5, 5, 5,.64) 32%, rgba(5, 5, 5,.16) 62%, rgba(5, 5, 5,0) 100%),
        linear-gradient(0deg, var(--ink) 0%, rgba(5, 5, 5,0) 22%),
        linear-gradient(180deg, rgba(5, 5, 5,.42) 0%, rgba(5, 5, 5,0) 16%);
}

.fj-hero__inner { position: relative; z-index: 2; width: 100%; padding: clamp(120px, 17vh, 190px) 0 clamp(48px, 8vh, 92px); }
.fj-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    min-width: 0;
    gap: clamp(32px, 5vw, 74px);
    align-items: center;
}

/* Bandeau « à la une » : égaliseur + mention + titre du morceau */
.fj-now {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 26px;
    padding-bottom: 11px;
    border-bottom: 1px solid rgba(255, 255, 255, .14);
    max-width: 100%;
}
.fj-now__bars { display: flex; align-items: flex-end; gap: 2px; height: 15px; flex: none; }
.fj-now__bars i {
    display: block;
    width: 2px;
    height: 15px;
    background: var(--clay);
    transform-origin: bottom;
    animation: fj-eq 1s ease-in-out infinite;
}
.fj-now__bars i:nth-child(1) { animation-delay: -.50s; }
.fj-now__bars i:nth-child(2) { animation-delay: -.15s; }
.fj-now__bars i:nth-child(3) { animation-delay: -.75s; }
.fj-now__bars i:nth-child(4) { animation-delay: -.35s; }
@keyframes fj-eq {
    0%, 100% { transform: scaleY(.25); }
    50%      { transform: scaleY(1); }
}
.fj-now__label {
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--paper-mute);
    padding-right: 14px;
    border-right: 1px solid rgba(255, 255, 255, .14);
    white-space: nowrap;
}
.fj-now__link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--serif);
    font-style: italic;
    font-size: clamp(1.02rem, 1.7vw, 1.2rem);
    color: var(--paper);
    transition: color .3s var(--ease);
}
.fj-now__link i { font-size: .58rem; color: var(--clay); transition: transform .3s var(--ease); }
.fj-now__link:hover { color: var(--gold); }
.fj-now__link:hover i { transform: translate(3px, -3px); }

.fj-hero__title {
    font-family: var(--serif);
    font-weight: 600;
    font-size: clamp(3.1rem, 9vw, 6.6rem);
    line-height: 1;
    letter-spacing: -.03em;
    margin: 0 0 22px;
    text-shadow: 0 2px 40px rgba(5, 5, 5, .75);
    /* Les deux lignes sont déjà séparées : un mot trop long se replie plutôt
       que de déborder du cadre sur les petits écrans. */
    overflow-wrap: break-word;
}
.fj-hero__title .l1,
.fj-hero__title .l2 { display: inline; }
.fj-hero__title .l2 { font-style: italic; color: var(--clay); }

.fj-hero__baseline {
    text-shadow: 0 1px 24px rgba(5, 5, 5, .8);
    font-size: clamp(1rem, 1.5vw, 1.14rem);
    color: rgba(255, 255, 255, .74);
    max-width: 40ch;
    margin-bottom: 34px;
    border-left: 1px solid var(--ink-line);
    padding-left: 18px;
}
.fj-hero__baseline strong { color: var(--paper); font-weight: 600; }

.fj-hero__cta { display: flex; flex-wrap: wrap; gap: 13px; }

.fj-stats {
    display: flex;
    gap: clamp(22px, 4vw, 54px);
    margin-top: clamp(34px, 5vw, 58px);
    padding-top: 26px;
    border-top: 1px solid var(--ink-line);
}
.fj-stats__val {
    display: block;
    font-family: var(--serif);
    font-size: clamp(1.7rem, 3.4vw, 2.5rem);
    line-height: 1;
    color: var(--paper);
    font-variant-numeric: tabular-nums;
}
.fj-stats__lab {
    display: block;
    margin-top: 7px;
    font-size: .6rem;
    letter-spacing: .19em;
    text-transform: uppercase;
    color: var(--paper-mute);
}

/* Les deux cadres pochettes (administrables) */
.fj-covers { position: relative; padding: 22px 0 42px; }
.fj-covers__main {
    position: relative;
    width: min(100%, 366px);
    aspect-ratio: 1 / 1;
    margin-left: auto;
    transform: rotate(-2.2deg);
    box-shadow: 0 34px 90px rgba(0, 0, 0, .58);
    transition: transform .7s var(--ease);
}
.fj-covers__main img { width: 100%; height: 100%; object-fit: cover; }
.fj-covers__main::after {
    content: "";
    position: absolute;
    inset: -13px -13px 13px 13px;
    border: 1px solid rgba(255, 255, 255, .3);
    pointer-events: none;
}
.fj-covers:hover .fj-covers__main { transform: rotate(0deg); }

.fj-covers__alt {
    position: absolute;
    left: 0; bottom: 0;
    width: min(46%, 168px);
    aspect-ratio: 1 / 1;
    transform: rotate(4deg);
    box-shadow: 0 22px 54px rgba(0, 0, 0, .55);
    border: 1px solid rgba(255, 255, 255, .1);
    transition: transform .7s var(--ease);
    background: var(--ink-soft);
}
.fj-covers__alt img { width: 100%; height: 100%; object-fit: cover; }
.fj-covers:hover .fj-covers__alt { transform: rotate(-1deg) translateY(-6px); }

.fj-covers__tag {
    position: absolute;
    left: 0; top: 0;
    writing-mode: vertical-rl;
    font-size: .62rem;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--paper-mute);
}

/* Bandeau défilant */
.fj-ticker {
    position: relative;
    z-index: 2;
    border-top: 1px solid var(--ink-line);
    border-bottom: 1px solid var(--ink-line);
    overflow: hidden;
    padding: 14px 0;
    background: rgba(5, 5, 5, .55);
}
.fj-ticker__track { display: flex; width: max-content; animation: fj-slide 42s linear infinite; }
.fj-ticker:hover .fj-ticker__track { animation-play-state: paused; }
.fj-ticker span {
    display: inline-flex;
    align-items: center;
    gap: 26px;
    padding-right: 26px;
    font-family: var(--serif);
    font-style: italic;
    font-size: 1.02rem;
    color: rgba(255, 255, 255, .5);
    white-space: nowrap;
}
.fj-ticker span::after { content: "\2726"; font-style: normal; font-size: .6rem; color: var(--clay); }
@keyframes fj-slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Partenaires : même glissement que le bandeau, logos posés sur des tuiles
   claires pour que les logos noirs restent lisibles sur le fond sombre. */
.fj-partners {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.fj-partners__track { display: flex; width: max-content; animation: fj-slide 48s linear infinite; }
.fj-partners:hover .fj-partners__track { animation-play-state: paused; }
.fj-partners__list {
    display: flex;
    gap: clamp(14px, 2vw, 24px);
    margin: 0;
    padding: 0 clamp(14px, 2vw, 24px) 0 0;
    list-style: none;
}
.fj-partners__item {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: clamp(150px, 16vw, 210px);
    height: clamp(96px, 10vw, 124px);
    padding: 14px 18px;
    background: #FFFFFF;
    border-radius: 14px;
}
.fj-partners__item img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.fj-partners__item > a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
@media (prefers-reduced-motion: reduce) {
    .fj-partners { -webkit-mask-image: none; mask-image: none; }
    .fj-partners__track { animation: none; width: auto; justify-content: center; }
    .fj-partners__list { flex-wrap: wrap; justify-content: center; padding: 0 var(--gut); }
    .fj-partners__list[aria-hidden] { display: none; }
}

/* Bandeau de page intérieure */
.fj-pagehead {
    position: relative;
    padding: clamp(122px, 18vh, 186px) 0 clamp(40px, 6vw, 70px);
    border-bottom: 1px solid var(--ink-line);
    overflow: hidden;
}
/*
 * Le fond du bandeau tient sa place tout seul. Il ne l'a pas toujours fait :
 * il n'existait qu'à travers .fj-media, ajouté par fj_backdrop(). Les gabarits
 * qui écrivent leur image à la main — l'article seul, le bandeau de recherche,
 * la page 404 — se retrouvaient avec une photo posée dans le flux, à sa taille
 * d'origine, qui poussait le bandeau à plus de 1500 px de haut.
 */
.fj-pagehead__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}
.fj-pagehead__bg > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.fj-pagehead__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5, 5, 5,.72), var(--ink)); }
.fj-pagehead__inner { position: relative; z-index: 2; }
.fj-pagehead h1 {
    font-family: var(--serif);
    font-size: clamp(2.6rem, 8vw, 5.2rem);
    line-height: .95;
    letter-spacing: -.03em;
    margin: 16px 0 0;
}
.fj-pagehead h1 em { font-style: italic; color: var(--gold); }
.fj-pagehead .fj-lead { margin-top: 20px; }

/* ==========================================================================
   04. ALBUMS
   ========================================================================== */

.fj-albums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2.4vw, 32px); }
.fj-albums--wide { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.fj-album { position: relative; }
.fj-album__cover {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--ink-soft);
    border: 1px solid var(--ink-line);
}
.fj-album__cover img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .9s var(--ease), filter .5s var(--ease);
}
.fj-album:hover .fj-album__cover img { transform: scale(1.055); filter: brightness(.62); }

.fj-album__void {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--serif); font-style: italic;
    font-size: 2.4rem; color: rgba(255, 255, 255, .12);
}

.fj-album__play {
    position: absolute;
    left: 50%; top: 50%;
    width: 58px; height: 58px;
    margin: -29px 0 0 -29px;
    border-radius: 50%;
    background: var(--paper);
    color: var(--ink);
    display: flex; align-items: center; justify-content: center;
    opacity: 0;
    transform: scale(.82);
    transition: opacity .4s var(--ease), transform .4s var(--ease), background .3s var(--ease);
}
.fj-album:hover .fj-album__play { opacity: 1; transform: scale(1); }
.fj-album__play:hover { background: var(--gold); }

.fj-album__badge {
    position: absolute;
    top: 12px; left: 12px;
    padding: 5px 11px;
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    background: var(--clay);
    color: var(--ink);
    z-index: 2;
    pointer-events: none;
}
.fj-album__badge--soft { background: rgba(5, 5, 5, .82); color: var(--paper); border: 1px solid var(--ink-line); }
.fj-album__badge--gold { background: var(--gold); color: var(--ink); }

.fj-album__body { padding: 15px 2px 0; }
.fj-album__title {
    font-family: var(--serif);
    font-size: clamp(1.05rem, 2vw, 1.35rem);
    line-height: 1.15;
    transition: color .3s var(--ease);
}
.fj-album:hover .fj-album__title { color: var(--gold); }
.fj-album__meta {
    margin-top: 6px;
    font-size: .66rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--paper-mute);
    display: flex; flex-wrap: wrap; gap: 8px;
}
.fj-album__meta .sep { color: var(--clay); }
.fj-album__links { display: flex; gap: 9px; margin-top: 12px; }
.fj-album__links a {
    width: 34px; height: 34px;
    border: 1px solid var(--ink-line);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: .85rem;
    color: var(--paper-mute);
    transition: color .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
.fj-album__links a:hover { color: var(--ink); background: var(--paper); border-color: var(--paper); }

/* ==========================================================================
   05. DATES DE CONCERT — liste éditoriale
   ========================================================================== */

.fj-dates { border-top: 1px solid var(--ink-line); }
.fj-date {
    display: grid;
    grid-template-columns: 132px minmax(0, 1fr) auto;
    align-items: center;
    gap: 24px;
    padding: 24px 16px 24px 4px;
    border-bottom: 1px solid var(--ink-line);
    position: relative;
    transition: background .4s var(--ease), padding-left .4s var(--ease);
}
.fj-date::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 2px;
    background: var(--clay);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform .4s var(--ease);
}
.fj-date:hover { background: rgba(255, 255, 255, .07); padding-left: 18px; }
.fj-date:hover::before { transform: scaleY(1); }

.fj-date__day { font-family: var(--serif); font-size: 2.05rem; line-height: 1; color: var(--paper); font-variant-numeric: tabular-nums; }
.fj-date__mon { display: block; margin-top: 5px; font-size: .6rem; letter-spacing: .22em; text-transform: uppercase; color: var(--sea); }
.fj-date__city { font-family: var(--serif); font-style: italic; font-size: clamp(1.25rem, 2.6vw, 1.7rem); line-height: 1.15; }
.fj-date__venue { margin-top: 4px; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--paper-mute); }
.fj-date__venue i { color: var(--sea); margin-right: 7px; }
.fj-date__aside { display: flex; align-items: center; gap: 16px; }
.fj-date__hour { font-size: .74rem; letter-spacing: .12em; color: var(--paper-mute); font-variant-numeric: tabular-nums; }
.fj-date__soldout {
    font-size: .62rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
    color: var(--clay); border: 1px solid rgba(255, 255, 255, .4); padding: 9px 16px;
}
.fj-date--past { opacity: .58; }
.fj-date--past:hover { opacity: 1; }

.fj-tourlist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.fj-tourpast {
    border: 1px solid var(--ink-line);
    padding: 24px;
    transition: border-color .35s var(--ease), background .35s var(--ease);
}
.fj-tourpast:hover { border-color: rgba(255, 255, 255, .38); background: rgba(255, 255, 255, .04); }
.fj-tourpast h4 { font-family: var(--serif); font-style: italic; font-size: 1.3rem; }
.fj-tourpast p { font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--paper-mute); margin: 8px 0 0; }
.fj-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.fj-chips span {
    font-size: .62rem; letter-spacing: .1em; text-transform: uppercase;
    color: var(--paper-mute); border: 1px solid var(--ink-line); padding: 5px 11px; border-radius: 999px;
}

/* ==========================================================================
   06. ACTUALITÉS
   ========================================================================== */

.fj-news { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 32px); }
.fj-post { display: flex; flex-direction: column; height: 100%; }
.fj-post__img {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--ink-soft);
    border: 1px solid var(--ink-line);
}
.fj-post__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.fj-post:hover .fj-post__img img { transform: scale(1.05); }
.fj-post__img .void { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 1.7rem; color: rgba(255, 255, 255, .14); }
.fj-post__date {
    margin: 15px 0 8px;
    font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: var(--sea);
}
.fj-post__title {
    font-family: var(--serif);
    font-size: clamp(1.05rem, 1.9vw, 1.32rem);
    line-height: 1.22;
    transition: color .3s var(--ease);
}
.fj-post:hover .fj-post__title { color: var(--gold); }
/* Chapeau limité à trois lignes : les cartes gardent la même hauteur utile. */
.fj-post__excerpt {
    margin-top: 9px;
    font-size: .88rem;
    color: rgba(255, 255, 255, .62);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.fj-post__more { margin-top: auto; padding-top: 14px; }

/* ==========================================================================
   07. PLATEFORMES
   ========================================================================== */

.fj-platforms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.fj-platform {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 19px 22px;
    border: 1px solid var(--ink-line);
    background: rgba(255, 255, 255, .015);
    transition: border-color .35s var(--ease), background .35s var(--ease), transform .35s var(--ease);
}
.fj-platform i { font-size: 1.55rem; width: 30px; text-align: center; transition: transform .35s var(--ease); }
.fj-platform > span { min-width: 0; }
.fj-platform__name { font-size: .84rem; font-weight: 600; letter-spacing: .04em; color: var(--paper); }
.fj-platform__hint { display: block; margin-top: 2px; font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: var(--paper-mute); transition: color .3s var(--ease); }
.fj-platform .arrow { margin-left: auto; color: rgba(255, 255, 255, .28); transition: transform .35s var(--ease), color .3s var(--ease); }
.fj-platform:hover { border-color: rgba(255, 255, 255, .38); background: rgba(255, 255, 255, .05); transform: translateY(-3px); }
.fj-platform:hover .fj-platform__hint { color: var(--paper); }
.fj-platform:hover .arrow { transform: translateX(5px); color: var(--paper); }
.fj-platform:hover i { transform: scale(1.09); }

.fj-share { display: flex; justify-content: center; gap: 11px; }
.fj-share button, .fj-share a {
    width: 46px; height: 46px;
    border: 1px solid var(--ink-line);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: var(--paper-mute);
    transition: color .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease);
}
.fj-share button:hover, .fj-share a:hover { color: var(--ink); background: var(--paper); border-color: var(--paper); transform: translateY(-3px); }

/* Bloc de partage en pied de section (page écoute). */
.fj-share-block {
    margin-top: clamp(40px, 6vw, 72px);
    padding-top: 34px;
    border-top: 1px solid var(--ink-line);
    text-align: center;
}
.fj-share-block__label { margin-bottom: 22px; }

/* ==========================================================================
   08. NEWSLETTER & FORMULAIRES
   ========================================================================== */

.fj-band {
    border: 1px solid var(--ink-line);
    padding: clamp(30px, 5vw, 58px);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, .9fr);
    gap: clamp(24px, 4vw, 52px);
    align-items: center;
    min-width: 0;
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(255, 255, 255, .1), transparent 58%),
        rgba(255, 255, 255, .015);
}
.fj-band h3 { font-family: var(--serif); font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1.02; margin-top: 14px; }
.fj-band h3 em { font-style: italic; color: var(--gold); }
.fj-band .fj-lead { margin-top: 14px; }
.fj-band__legal { margin-top: 12px; font-size: .72rem; color: var(--paper-mute); }

.fj-field {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    border-bottom: 1px solid var(--ink-line);
    padding-bottom: 10px;
    transition: border-color .3s var(--ease);
}
.fj-field:focus-within { border-color: var(--clay); }
.fj-field input {
    /* min-width:0 : sans cela le champ refuse de passer sous sa largeur
       intrinsèque et pousse le bouton hors de l'écran sur mobile. */
    flex: 1 1 150px;
    min-width: 0;
    background: none; border: 0; outline: none;
    color: var(--paper);
    font-family: var(--sans);
    font-size: .95rem;
    padding: 8px 0;
}
.fj-field input::placeholder { color: rgba(255, 255, 255, .35); }

.fj-form { display: grid; gap: 20px; }
.fj-form label {
    display: block;
    font-size: .62rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
    color: var(--paper-mute); margin-bottom: 9px;
}
.fj-form input[type="text"],
.fj-form input[type="email"],
.fj-form input[type="tel"],
.fj-form select,
.fj-form textarea {
    width: 100%;
    background: rgba(255, 255, 255, .025);
    border: 1px solid var(--ink-line);
    color: var(--paper);
    font-family: var(--sans);
    font-size: .95rem;
    padding: 14px 16px;
    outline: none;
    border-radius: 2px;
    transition: border-color .3s var(--ease), background .3s var(--ease);
}
.fj-form textarea { min-height: 165px; resize: vertical; }
.fj-form select option { background: var(--ink-soft); color: var(--paper); }
.fj-form input:focus, .fj-form textarea:focus, .fj-form select:focus {
    border-color: var(--clay);
    background: rgba(255, 255, 255, .05);
}
.fj-form input::placeholder, .fj-form textarea::placeholder { color: rgba(255, 255, 255, .3); }
.fj-form .row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.fj-hp { position: absolute !important; left: -9999px !important; }

.fj-note {
    padding: 15px 18px;
    border-left: 2px solid var(--clay);
    background: rgba(255, 255, 255, .08);
    font-size: .88rem;
}
.fj-note--ok { border-color: var(--sea); background: rgba(255, 255, 255, .1); }

/* ==========================================================================
   09. BIOGRAPHIE
   ========================================================================== */

.fj-bio { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(28px, 5vw, 68px); align-items: start; }
.fj-bio__portrait { position: relative; }
.fj-bio__portrait img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.fj-bio__portrait::after {
    content: "";
    position: absolute;
    inset: 16px -16px -16px 16px;
    border: 1px solid rgba(255, 255, 255, .32);
    z-index: -1;
}
.fj-bio__caption { margin-top: 22px; font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; color: var(--paper-mute); }

.fj-prose { font-size: 1.02rem; line-height: 1.85; color: rgba(255, 255, 255, .78); }
.fj-prose p:first-of-type::first-letter {
    float: left;
    font-family: var(--serif);
    font-size: 3.9rem;
    line-height: .82;
    padding: 6px 12px 0 0;
    color: var(--clay);
}
.fj-prose strong { color: var(--paper); font-weight: 600; }
.fj-prose h3 { font-family: var(--serif); font-style: italic; font-size: 1.6rem; color: var(--paper); margin: 34px 0 14px; }

.fj-quote {
    font-family: var(--serif);
    font-style: italic;
    font-size: clamp(1.3rem, 2.7vw, 1.85rem);
    line-height: 1.35;
    color: var(--paper);
    border-left: 2px solid var(--clay);
    padding: 6px 0 6px 24px;
    margin: 34px 0;
}
.fj-quote cite { display: block; margin-top: 14px; font-family: var(--sans); font-style: normal; font-size: .64rem; letter-spacing: .2em; text-transform: uppercase; color: var(--paper-mute); }

.fj-timeline { border-top: 1px solid var(--ink-line); }
.fj-tl {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr);
    gap: 22px;
    padding: 22px 0;
    border-bottom: 1px solid var(--ink-line);
    transition: padding-left .35s var(--ease), background .35s var(--ease);
}
.fj-tl:hover { padding-left: 14px; background: rgba(255, 255, 255, .022); }
.fj-tl__year { font-family: var(--serif); font-size: 1.55rem; color: var(--gold); font-variant-numeric: tabular-nums; }
.fj-tl__title { font-size: .96rem; font-weight: 600; color: var(--paper); }
.fj-tl__text { margin-top: 5px; font-size: .9rem; color: rgba(255, 255, 255, .62); }

/* Blocs contact */
.fj-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.fj-card {
    border: 1px solid var(--ink-line);
    padding: 28px 24px;
    transition: border-color .35s var(--ease), background .35s var(--ease), transform .35s var(--ease);
}
.fj-card:hover { border-color: rgba(255, 255, 255, .42); background: rgba(255, 255, 255, .05); transform: translateY(-3px); }
.fj-card__ico { color: var(--clay); font-size: 1.2rem; margin-bottom: 16px; }
.fj-card h4 { font-size: .68rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--paper-mute); }
.fj-card p { margin: 10px 0 0; font-family: var(--serif); font-size: 1.16rem; line-height: 1.35; color: var(--paper); }
.fj-card a { color: var(--paper); border-bottom: 1px solid rgba(255, 255, 255, .2); transition: color .3s var(--ease), border-color .3s var(--ease); }
.fj-card a:hover { color: var(--gold); border-color: var(--gold); }

/* ==========================================================================
   10. PIED DE PAGE
   ========================================================================== */

.fj-footer { border-top: 1px solid var(--ink-line); background: #070707; padding: clamp(48px, 7vw, 82px) 0 30px; position: relative; }
.fj-footer__grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 62px); padding-bottom: 42px; border-bottom: 1px solid var(--ink-line); }
.fj-footer__about { max-width: 42ch; font-size: .9rem; color: rgba(255, 255, 255, .6); margin-top: 18px; }
.fj-footer h5 { font-size: .62rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--paper-mute); margin-bottom: 18px; }
.fj-footer__links li + li { margin-top: 11px; }
.fj-footer__links a { font-size: .9rem; color: rgba(255, 255, 255, .62); transition: color .3s var(--ease), padding-left .3s var(--ease); }
.fj-footer__links a:hover { color: var(--paper); padding-left: 5px; }
.fj-footer__links i { color: var(--clay); width: 16px; margin-right: 9px; font-size: .78rem; }

/* Les pastilles doivent rester rondes. Dans une colonne de pied de page,
   cinq pastilles et leurs écarts dépassent la largeur disponible : sans
   « flex: 0 0 auto », flexbox les comprimait — 38,6 px de large pour 42 px
   de haut, et le cercle devenait un ovale. Elles passent désormais à la
   ligne plutôt que de rétrécir. */
.fj-socials { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.fj-socials a {
    flex: 0 0 auto;
    width: 42px; height: 42px;
    aspect-ratio: 1 / 1;
    border: 1px solid var(--ink-line);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: var(--paper-mute);
    transition: color .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease);
}
.fj-socials a:hover { color: var(--ink); background: var(--paper); border-color: var(--paper); transform: translateY(-3px); }

.fj-footer__bar {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 14px; padding-top: 26px;
    font-size: .74rem; color: rgba(255, 255, 255, .38);
}
.fj-footer__bar nav { display: flex; flex-wrap: wrap; gap: 20px; }
.fj-footer__bar a { transition: color .3s var(--ease); }
.fj-footer__bar a:hover { color: var(--paper); }

/* ==========================================================================
   11. MODALE ALBUM
   ========================================================================== */

.fj-modal {
    position: fixed; inset: 0; z-index: 200;
    display: none;
    align-items: center; justify-content: center;
    padding: clamp(12px, 3vw, 20px);
    background: rgba(5, 5, 5, .92);
    -webkit-backdrop-filter: blur(9px);
    backdrop-filter: blur(9px);
}
.fj-modal.is-open { display: flex; }
.fj-modal__box {
    position: relative;
    width: min(880px, 100%);
    max-height: 88vh;
    max-height: 88dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--ink-soft);
    border: 1px solid var(--ink-line);
    padding: clamp(24px, 4vw, 44px);
    animation: fj-rise .45s var(--ease);
}
@keyframes fj-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

.fj-modal__close {
    position: absolute; top: 16px; right: 16px;
    width: 40px; height: 40px;
    border: 1px solid var(--ink-line);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: var(--paper-mute);
    transition: color .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease);
}
.fj-modal__close:hover { color: var(--ink); background: var(--paper); border-color: var(--paper); }

.fj-modal__head { display: flex; gap: 22px; align-items: flex-end; margin-bottom: 26px; padding-right: 44px; }
.fj-modal__cover { width: 118px; height: 118px; object-fit: cover; flex: none; border: 1px solid var(--ink-line); }
.fj-modal__title { font-family: var(--serif); font-size: clamp(1.6rem, 3.4vw, 2.3rem); line-height: 1.05; }
.fj-modal__meta { margin-top: 8px; font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; color: var(--paper-mute); }

.fj-tracks { border-top: 1px solid var(--ink-line); }
.fj-track {
    display: flex; align-items: center; gap: 16px;
    padding: 12px 8px 12px 2px;
    border-bottom: 1px solid var(--ink-line);
    transition: background .3s var(--ease), padding-left .3s var(--ease);
}
.fj-track:hover { background: rgba(255, 255, 255, .03); padding-left: 10px; }
.fj-track__n { font-size: .72rem; color: var(--paper-mute); width: 26px; font-variant-numeric: tabular-nums; }
.fj-track__t { flex: 1; font-size: .95rem; color: rgba(255, 255, 255, .86); }
.fj-track:hover .fj-track__t { color: var(--paper); }
.fj-track__d { font-size: .78rem; color: var(--paper-mute); font-variant-numeric: tabular-nums; }
.fj-modal__foot { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--ink-line); }

/* ==========================================================================
   12. TOAST + RÉVÉLATION AU SCROLL
   ========================================================================== */

.fj-toast {
    position: fixed;
    left: 50%; bottom: 26px;
    transform: translate(-50%, 26px);
    z-index: 300;
    display: flex; align-items: center; gap: 13px;
    padding: 14px 22px;
    background: var(--paper);
    color: var(--ink);
    font-size: .86rem;
    font-weight: 500;
    box-shadow: 0 22px 60px rgba(0, 0, 0, .5);
    opacity: 0;
    pointer-events: none;
    transition: opacity .35s var(--ease), transform .35s var(--ease);
    max-width: calc(100vw - 32px);
}
.fj-toast.is-open { opacity: 1; transform: translate(-50%, 0); }
.fj-toast i { color: var(--clay); }

/* Retour en haut : bouton maison, celui d'Astra est retire sur ces gabarits. */
.fj-top {
    position: fixed;
    right: max(clamp(16px, 3vw, 34px), env(safe-area-inset-right));
    bottom: max(clamp(16px, 3vw, 34px), env(safe-area-inset-bottom));
    z-index: 280;
    display: grid; place-items: center;
    width: 46px; height: 46px;
    padding: 0;
    border: 1px solid var(--ink-line);
    border-radius: 50%;
    background: rgba(5, 5, 5, .82);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: var(--paper);
    font-size: .9rem;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .38);
    opacity: 0;
    visibility: hidden;
    transform: translateY(14px);
    transition: opacity .32s var(--ease), transform .32s var(--ease), visibility .32s, background .32s var(--ease), border-color .32s var(--ease);
}
.fj-top.is-in { opacity: 1; visibility: visible; transform: none; }
.fj-top:hover { background: var(--clay); border-color: var(--clay); color: var(--ink); }

/* Le toast occupe le bas de l'ecran : on decale le bouton le temps qu'il passe. */
.fj-toast.is-open ~ .fj-top { transform: translateY(-62px); }

@media (max-width: 600px) {
    .fj-top { width: 42px; height: 42px; }
}

[data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
[data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
    [data-reveal] { opacity: 1; transform: none; }
}

.fj-skip {
    position: absolute; left: -9999px;
    background: var(--paper); color: var(--ink); padding: 12px 18px; z-index: 400;
}
.fj-skip:focus { left: 12px; top: 12px; }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ==========================================================================
   13. RESPONSIVE — du très grand écran au petit mobile
   ==========================================================================
   Points de rupture : 1700 (très large), 1080 (nav → panneau), 960 (tablette),
   720 (grand mobile), 560 (mobile), 420 et 360 (petits mobiles), plus les cas
   « écran court en paysage » et « appareil sans survol ».
   ========================================================================== */

/* Très grands écrans : la maquette respire au lieu de rester figée à 1240px. */
@media (min-width: 1700px) {
    :root { --shell: 1400px; }
}

/* Tablette paysage : la navigation bascule dans le panneau plein écran. */
@media (max-width: 1080px) {
    .fj-nav { display: none; }
    .fj-burger { display: flex; }

    .fj-hero__grid { grid-template-columns: minmax(0, 1fr); }

    /* Pochettes : exactement la composition du desktop (pochette principale
       inclinée, cadre doré décalé, seconde pochette en débord bas-gauche),
       simplement ramenée à l'échelle de la colonne unique. */
    .fj-covers {
        width: min(100%, 420px);
        margin: 32px 0 0;
        /* Marge à droite : le cadre doré déborde de 13 px et ne doit pas
           venir mourir contre la gouttière. */
        padding: 24px 15px 38px 0;
    }
    .fj-covers__main { width: min(78%, 300px); }
    .fj-covers__alt { width: min(44%, 152px); }

    .fj-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    /* Le bloc marque passe sur toute la largeur, les deux listes en dessous. */
    .fj-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fj-footer__grid > div:first-child { grid-column: 1 / -1; }
    .fj-footer__about { max-width: 62ch; }
}

/* Tablette portrait : les grilles de trois passent à deux colonnes. */
@media (max-width: 960px) {
    .fj-albums,
    .fj-albums--wide,
    .fj-news,
    .fj-platforms { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .fj-bio { grid-template-columns: minmax(0, 1fr); }
    .fj-bio__portrait { max-width: 420px; }
    .fj-bio__portrait::after { inset: 12px -12px -12px 12px; }
    .fj-band { grid-template-columns: minmax(0, 1fr); }

    /* La colonne de droite des dates repasse sous la ville. */
    .fj-date { grid-template-columns: 112px minmax(0, 1fr); row-gap: 16px; }
    .fj-date__aside { grid-column: 1 / -1; flex-wrap: wrap; }

    .fj-postnav { grid-template-columns: minmax(0, 1fr); }
    .fj-postnav__item.is-empty { display: none; }
    .fj-postnav__item--next { text-align: left; }
    .fj-postnav__item--next .fj-postnav__dir { justify-content: flex-start; }
}

/* Grand mobile : bandeau compact, colonnes empilées. */
@media (max-width: 720px) {
    /* Pas de plein écran ni de vidéo de fond : coût réseau et lisibilité. */
    .fj-hero__inner { padding: calc(var(--head) + 12px) 0 34px; }
    .fj-hero__title { font-size: clamp(2.4rem, 11.5vw, 3.6rem); }
    .fj-now { gap: 10px; flex-wrap: wrap; }
    .fj-now__label { padding-right: 10px; }
    .fj-hero__baseline { margin-bottom: 26px; }
    .fj-hero__cta .fj-btn { flex: 1 1 auto; justify-content: center; }

    /* En ligne, trois chiffres finissent par se chevaucher : grille. */
    .fj-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 12px; }
    .fj-stats__val { font-size: 1.5rem; }
    .fj-stats__lab { font-size: .62rem; letter-spacing: .12em; }

    .fj-pagehead { padding: calc(var(--head) + 12px) 0 34px; }

    .fj-head { flex-direction: column; align-items: flex-start; gap: 16px; }

    .fj-date { grid-template-columns: 74px minmax(0, 1fr); gap: 16px; padding: 20px 0; }
    .fj-date:hover { padding-left: 0; }
    .fj-date__day { font-size: 1.6rem; }
    .fj-date__aside { justify-content: space-between; }
    .fj-date__aside .fj-btn { flex: 1 1 auto; justify-content: center; }

    .fj-tourlist,
    .fj-cards { grid-template-columns: minmax(0, 1fr); }
    .fj-form .row { grid-template-columns: minmax(0, 1fr); }
    .fj-tl { grid-template-columns: 72px minmax(0, 1fr); gap: 14px; }
    .fj-tl:hover { padding-left: 0; }
    .fj-tl__year { font-size: 1.2rem; }

    .fj-modal__head { flex-direction: column; align-items: flex-start; gap: 16px; }
    .fj-modal__cover { width: 92px; height: 92px; }
    .fj-modal__foot .fj-btn { flex: 1 1 100%; justify-content: center; }

    .fj-footer__grid { grid-template-columns: minmax(0, 1fr); gap: 30px; }
    .fj-footer__bar { flex-direction: column; align-items: flex-start; }

    .fj-album__links { display: none; }
    .fj-prose p:first-of-type::first-letter { font-size: 3.1rem; }

    .fj-article__foot { flex-direction: column; align-items: flex-start; }
    .fj-comment { grid-template-columns: 42px minmax(0, 1fr); gap: 14px; }
    .fj-comment__avatar img { width: 42px; height: 42px; }
}

/* Mobile : une seule colonne pour tout ce qui porte du texte. */
@media (max-width: 560px) {
    .fj-news,
    .fj-platforms { grid-template-columns: minmax(0, 1fr); }
    /* Deux colonnes sur un téléphone donnaient deux vignettes serrées et des
       titres coupés : la discographie passe en liste, pochette à gauche. */
    .fj-albums,
    .fj-albums--wide {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
        border-top: 1px solid var(--ink-line);
    }
    .fj-album {
        display: grid;
        grid-template-columns: 84px minmax(0, 1fr);
        align-items: center;
        gap: 16px;
        padding: 13px 20px 13px 0;
        border-bottom: 1px solid var(--ink-line);
        transition: background .35s var(--ease);
    }
    .fj-album:active { background: rgba(255, 255, 255, .07); }
    .fj-album__cover { border: 0; }
    .fj-album__cover img { transition: none; }
    .fj-album:hover .fj-album__cover img { transform: none; filter: none; }
    .fj-album__void { font-size: 1.5rem; }
    .fj-album__play { display: none; }
    .fj-album__badge {
        top: 5px; left: 5px;
        padding: 3px 6px;
        font-size: .62rem;
        letter-spacing: .1em;
    }
    .fj-album__body { padding: 0; }
    .fj-album__title { font-size: 1.04rem; }
    /* Toute la ligne ouvre la fiche : le titre est déjà le bouton. */
    .fj-album__title button::after { content: ""; position: absolute; inset: 0; }
    .fj-album__meta { margin-top: 4px; font-size: .62rem; letter-spacing: .12em; gap: 6px; }
    /* Chevron d'appel, purement décoratif. */
    .fj-album::after {
        content: "";
        position: absolute;
        right: 4px; top: 50%;
        width: 7px; height: 7px;
        margin-top: -4px;
        border-right: 1px solid var(--paper-mute);
        border-bottom: 1px solid var(--paper-mute);
        transform: rotate(-45deg);
        pointer-events: none;
    }

    .fj-band { padding: 26px 20px; }
    .fj-quote { padding-left: 18px; margin: 26px 0; }
    .fj-postnav__item { padding: 18px 20px; }
    .fj-tags { gap: 6px; }

    /* Le message flottant occupe la largeur utile plutôt que d'être centré. */
    .fj-toast { left: 16px; right: 16px; bottom: 16px; transform: translateY(20px); max-width: none; }
    .fj-toast.is-open { transform: none; }
    .fj-toast.is-open ~ .fj-top { transform: translateY(-74px); }

    .fj-prose .alignleft,
    .fj-prose .alignright { float: none; max-width: 100%; margin: 24px 0; }
}

/* Petit mobile. */
@media (max-width: 420px) {
    .fj-logo__sub { display: none; }
    .fj-platform { padding: 15px 14px; gap: 11px; }
    .fj-platform .arrow { display: none; }
    .fj-platform i { font-size: 1.25rem; width: 24px; }
    .fj-platform__name { font-size: .78rem; }

    .fj-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 10px; }
    .fj-btn { padding: 13px 20px; font-size: .72rem; letter-spacing: .12em; }
    .fj-btn--sm { padding: 10px 15px; }

    .fj-date { grid-template-columns: 60px minmax(0, 1fr); gap: 12px; }
    .fj-tl { grid-template-columns: 58px minmax(0, 1fr); gap: 12px; }

    .fj-burger { width: 42px; height: 42px; }

    /* Le bouton d'envoi passe sous le champ plutôt que de le comprimer. */
    .fj-field .fj-btn { flex: 1 1 100%; justify-content: center; }

    .fj-comment { grid-template-columns: minmax(0, 1fr); }
    .fj-comment__avatar { display: none; }
    .fj-commentlist .children { margin-left: 12px; padding-left: 12px; }
}

/* Très petits écrans (320px). */
@media (max-width: 360px) {
    .fj-hero__cta .fj-btn { flex: 1 1 100%; }
    .fj-album { grid-template-columns: 72px minmax(0, 1fr); gap: 13px; }
    .fj-album__title { font-size: .97rem; }
    .fj-article__meta { gap: 8px 16px; font-size: .6rem; letter-spacing: .14em; }
}

/* Écran court en paysage : le bandeau ne doit pas manger toute la hauteur. */
@media (max-height: 560px) and (orientation: landscape) {
    .fj-hero__inner { padding-top: calc(var(--head) + 10px); padding-bottom: 26px; }
    .fj-pagehead { padding-top: calc(var(--head) + 10px); padding-bottom: 26px; }
    .fj-drawer { justify-content: flex-start; }
    .fj-drawer__nav a { font-size: 1.3rem; padding: 8px 0; }
    .fj-drawer__foot { padding-top: 18px; }
    .fj-modal__box { max-height: 94vh; max-height: 94dvh; }
}

/* Appareil sans survol : rien d'utile ne doit dépendre du :hover. */
@media (hover: none) {
    .fj-album__play { opacity: 1; transform: none; }
    .fj-platform .arrow { color: var(--paper-mute); }
}

/* Pointeur grossier : cibles tactiles confortables. */
@media (pointer: coarse) {
    .fj-footer__links a { display: inline-block; padding: 4px 0; }
    .fj-lang a { padding: 8px 4px; }
    .fj-drawer__nav a { padding: 14px 0; }
}

/* ==========================================================================
   14. FINITIONS & COMPATIBILITÉ ASTRA
   ========================================================================== */

.fj-hero__title .l1 { display: block; }

.fj-album__title button {
    font: inherit;
    color: inherit;
    text-align: left;
    padding: 0;
    background: none;
}

.fj-covers__main { background: var(--ink-soft); border: 1px solid var(--ink-line); }

.fj-drawer { visibility: hidden; }
.fj-drawer.is-open { visibility: visible; }

.fj-note i { margin-right: 9px; color: var(--clay); }
.fj-note--ok i { color: var(--sea); }

.fj-pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 46px; }
/* the_comments_pagination() enveloppe ses liens dans .nav-links. */
.fj-pagination .nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.fj-pagination--pages { justify-content: flex-start; margin-top: 34px; }
.fj-pagination .page-numbers {
    min-width: 42px; height: 42px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--ink-line);
    font-size: .82rem;
    color: var(--paper-mute);
    transition: color .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
.fj-pagination .page-numbers:hover { color: var(--ink); background: var(--paper); border-color: var(--paper); }
.fj-pagination .page-numbers.current { color: var(--ink); background: var(--gold); border-color: var(--gold); }

/* Contenu libre saisi dans l'éditeur */
.fj-prose a { color: var(--gold); border-bottom: 1px solid rgba(255, 255, 255, .35); }
.fj-prose a:hover { color: var(--paper); border-color: var(--paper); }
.fj-prose ul { list-style: disc; padding-left: 20px; margin: 0 0 1.1em; }
.fj-prose li { margin-bottom: 6px; }
.fj-prose img { margin: 24px 0; }
.fj-prose::after { content: ""; display: block; clear: both; }

/* Filet de sécurité si des styles d'Astra restent chargés (extension, cache) */
body.fj #page,
body.fj .site,
body.fj .site-content,
body.fj .ast-container {
    max-width: none;
    width: auto;
    margin: 0;
    padding: 0;
    background: transparent;
}
body.fj .fj-btn:hover { text-decoration: none; }
body.fj input, body.fj textarea, body.fj select { box-shadow: none; }

@media (min-width: 1081px) {
    .fj-drawer { display: none; }
}

@media (max-width: 900px) {
    .fj-hide-sm { display: none !important; }
}

/* ==========================================================================
   15. SÉLECTEUR DE LANGUE
   ========================================================================== */

.fj-lang {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .12em;
    color: rgba(255, 255, 255, .35);
}
.fj-lang a {
    color: rgba(255, 255, 255, .55);
    padding: 3px 2px;
    border-bottom: 1px solid transparent;
    transition: color .3s var(--ease), border-color .3s var(--ease);
}
.fj-lang a:hover { color: var(--paper); border-bottom-color: var(--clay); }
.fj-lang a.is-on { color: var(--gold); border-bottom-color: var(--gold); }

.fj-drawer__foot .fj-lang { margin-bottom: 20px; font-size: .82rem; }

/* Égaliseur figé si l'utilisateur réduit les animations */
@media (prefers-reduced-motion: reduce) {
    .fj-now__bars i { animation: none; transform: scaleY(.65); }
    .fj-now__bars i:nth-child(2) { transform: scaleY(1); }
    .fj-now__bars i:nth-child(4) { transform: scaleY(.85); }
}

/* ==========================================================================
   16. ARTICLE — bandeau, corps de texte, navigation
   ========================================================================== */

/*
 * L'image mise en avant sert de fond. À 30 % d'opacité sous le dégradé de
 * lecture, elle ne se voyait pas : on devinait une tache, pas une photo.
 * À 55 % elle se lit, et le voile ci-dessous suffit toujours à tenir le titre.
 */
.fj-pagehead--post .fj-pagehead__bg > img { opacity: .55; }
/* Le voile s'éclaircit en haut, là où il n'y a pas de texte, et se renforce
   en bas, derrière le titre et la ligne de métadonnées. */
.fj-pagehead--post .fj-pagehead__bg::after {
    background: linear-gradient(180deg, rgba(5, 5, 5, .42) 0%, rgba(5, 5, 5, .58) 42%, rgba(5, 5, 5, .86) 100%);
}
.fj-pagehead--post h1 {
    font-size: clamp(1.9rem, 5.4vw, 3.5rem);
    line-height: 1.06;
    max-width: 22ch;
}

.fj-back { margin-bottom: 22px; }
.fj-back i { transition: transform .3s var(--ease); }
.fj-back:hover i { transform: translateX(-5px); }

.fj-article__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 26px;
    margin-top: 24px;
    font-size: .64rem;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--paper-mute);
}
.fj-article__meta i { color: var(--clay); margin-right: 8px; }
.fj-article__meta a { border-bottom: 1px solid rgba(255, 255, 255, .2); transition: color .3s var(--ease), border-color .3s var(--ease); }
.fj-article__meta a:hover { color: var(--paper); border-color: var(--clay); }

/* Mesure de lecture : au-delà de ~72 caractères la ligne devient pénible. */
.fj-article__body { width: 100%; max-width: 72ch; margin: 0 auto; }

.fj-article__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px 26px;
    margin-top: clamp(34px, 5vw, 56px);
    padding-top: 26px;
    border-top: 1px solid var(--ink-line);
}

.fj-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.fj-tags a {
    font-size: .64rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--paper-mute);
    border: 1px solid var(--ink-line);
    border-radius: 999px;
    padding: 7px 14px;
    transition: color .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
.fj-tags a:hover { color: var(--ink); background: var(--gold); border-color: var(--gold); }

.fj-share--inline { justify-content: flex-start; flex-wrap: wrap; }
.fj-share--inline a,
.fj-share--inline button { width: 42px; height: 42px; }

/* Article précédent / suivant */
.fj-section--tight { padding: clamp(30px, 4vw, 54px) 0; }

.fj-postnav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.fj-postnav__item {
    display: block;
    border: 1px solid var(--ink-line);
    padding: 22px 26px;
    transition: border-color .35s var(--ease), background .35s var(--ease), transform .35s var(--ease);
}
a.fj-postnav__item:hover {
    border-color: rgba(255, 255, 255, .4);
    background: rgba(255, 255, 255, .05);
    transform: translateY(-3px);
}
.fj-postnav__dir {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--clay);
}
.fj-postnav__title {
    display: block;
    margin-top: 12px;
    font-family: var(--serif);
    font-size: 1.16rem;
    line-height: 1.25;
    color: var(--paper);
}
.fj-postnav__item--next { text-align: right; }
.fj-postnav__item--next .fj-postnav__dir { justify-content: flex-end; }
.fj-postnav__item.is-empty { border-color: transparent; }

/* Contenu saisi dans l'éditeur : blocs Gutenberg et HTML classique. */
.fj-prose--article { font-size: clamp(1rem, 1.4vw, 1.06rem); }

.fj-prose h2 {
    font-family: var(--serif);
    font-size: clamp(1.5rem, 3.6vw, 2.05rem);
    line-height: 1.15;
    color: var(--paper);
    margin: 46px 0 16px;
}
.fj-prose h4,
.fj-prose h5,
.fj-prose h6 {
    font-size: .96rem;
    font-weight: 700;
    letter-spacing: .05em;
    color: var(--paper);
    margin: 30px 0 10px;
}
.fj-prose ol { list-style: decimal; padding-left: 22px; margin: 0 0 1.1em; }

.fj-prose blockquote {
    font-family: var(--serif);
    font-style: italic;
    font-size: clamp(1.15rem, 2.4vw, 1.5rem);
    line-height: 1.4;
    color: var(--paper);
    border-left: 2px solid var(--clay);
    margin: 34px 0;
    padding: 4px 0 4px 24px;
}
.fj-prose blockquote p:last-child { margin-bottom: 0; }
.fj-prose blockquote cite,
.fj-prose blockquote .wp-block-quote__citation {
    display: block;
    margin-top: 12px;
    font-family: var(--sans);
    font-style: normal;
    font-size: .62rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--paper-mute);
}

.fj-prose figure { margin: 32px 0; max-width: 100%; }
.fj-prose figure img { margin: 0; }
.fj-prose figcaption {
    margin-top: 10px;
    font-size: .68rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--paper-mute);
    text-align: center;
}

.fj-prose iframe,
.fj-prose video,
.fj-prose embed,
.fj-prose object { max-width: 100%; }

.fj-prose hr,
.fj-prose .wp-block-separator { border: 0; border-top: 1px solid var(--ink-line); margin: 40px 0; height: 0; }

.fj-prose code,
.fj-prose kbd {
    font-size: .88em;
    background: rgba(255, 255, 255, .06);
    border: 1px solid var(--ink-line);
    padding: 2px 6px;
    border-radius: 2px;
}
.fj-prose pre {
    overflow-x: auto;
    background: var(--ink-soft);
    border: 1px solid var(--ink-line);
    padding: 18px 20px;
    font-size: .84rem;
    line-height: 1.6;
}
.fj-prose pre code { background: none; border: 0; padding: 0; }

/* table-layout fixe : un tableau large se replie au lieu de pousser la page. */
.fj-prose table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    font-size: .9rem;
    margin: 0 0 1.4em;
}
.fj-prose th,
.fj-prose td {
    border: 1px solid var(--ink-line);
    padding: 10px 12px;
    text-align: left;
    word-break: break-word;
}
.fj-prose th { color: var(--paper); font-weight: 600; background: rgba(255, 255, 255, .03); }
.fj-prose .wp-block-table { overflow-x: auto; }

/* Les largeurs « pleine page » de l'éditeur restent dans la mesure de lecture. */
.fj-prose .alignwide,
.fj-prose .alignfull { max-width: 100%; margin-left: 0; margin-right: 0; }
.fj-prose .aligncenter { margin-left: auto; margin-right: auto; }
.fj-prose .alignleft { float: left; max-width: 46%; margin: 6px 28px 20px 0; }
.fj-prose .alignright { float: right; max-width: 46%; margin: 6px 0 20px 28px; }
.fj-prose .wp-caption { max-width: 100%; }
.fj-prose .wp-caption-text { font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--paper-mute); }

/* Vidéos intégrées : le ratio est conservé à toutes les largeurs. */
.fj-prose .wp-block-embed__wrapper,
.fj-prose .wp-block-video,
.fj-prose .wp-video { max-width: 100%; }
.fj-prose .wp-block-embed.is-type-video .wp-block-embed__wrapper { position: relative; aspect-ratio: 16 / 9; }
.fj-prose .wp-block-embed.is-type-video .wp-block-embed__wrapper iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* Recherche et page introuvable */
.fj-search { max-width: 620px; margin: 0 0 clamp(28px, 5vw, 48px); }
.fj-search .fj-field { align-items: center; }
.fj-search input[type="search"] { -webkit-appearance: none; appearance: none; }
.fj-search__results { margin-top: 8px; }

/* ==========================================================================
   17. COMMENTAIRES
   ========================================================================== */

.fj-comments__title {
    font-family: var(--serif);
    font-size: clamp(1.4rem, 3vw, 1.9rem);
    line-height: 1.2;
    color: var(--paper);
    margin-bottom: 26px;
}
.fj-comments__title small { font-family: var(--sans); }

.fj-commentlist,
.fj-commentlist .children { list-style: none; margin: 0; padding: 0; }
.fj-commentlist .children {
    margin-left: clamp(14px, 4vw, 44px);
    padding-left: clamp(14px, 3vw, 26px);
    border-left: 1px solid var(--ink-line);
}

.fj-comment {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 18px;
    padding: 22px 0;
    border-bottom: 1px solid var(--ink-line);
}
/* La liste des réponses est un enfant direct du <li> : elle prend la largeur. */
.fj-comment > .children { grid-column: 1 / -1; margin-top: 4px; }
.fj-comment__avatar img {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 1px solid var(--ink-line);
}
.fj-comment__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 16px;
    margin: 0 0 8px;
}
.fj-comment__author { font-family: var(--serif); font-style: italic; font-size: 1.1rem; color: var(--paper); }
.fj-comment__head time { font-size: .6rem; letter-spacing: .18em; text-transform: uppercase; color: var(--paper-mute); }
.fj-comment__text { font-size: .95rem; color: rgba(255, 255, 255, .76); }
.fj-comment__text p:last-child { margin-bottom: 0; }
.fj-comment__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 12px;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
}
.fj-comment__actions a {
    color: var(--paper-mute);
    border-bottom: 1px solid transparent;
    transition: color .3s var(--ease), border-color .3s var(--ease);
}
.fj-comment__actions a:hover { color: var(--paper); border-bottom-color: var(--clay); }
.fj-comment__actions i { margin-right: 8px; color: var(--clay); }

.fj-commentform { margin-top: clamp(34px, 5vw, 54px); }
.fj-commentform p { margin: 0; }
.fj-commentform textarea { min-height: 150px; }
.fj-commentform .comment-notes,
.fj-commentform .logged-in-as { font-size: .82rem; color: var(--paper-mute); }
.fj-commentform .logged-in-as a { color: var(--gold); }
.fj-commentform .comment-form-cookies-consent {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: .84rem;
    color: rgba(255, 255, 255, .62);
}
.fj-commentform .comment-form-cookies-consent input { accent-color: var(--clay); margin-top: 4px; flex: none; }
.fj-commentform .comment-form-cookies-consent label {
    margin: 0;
    font-size: .84rem;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: inherit;
}
.fj-commentform .form-submit { display: flex; }

#cancel-comment-reply-link {
    margin-left: 14px;
    font-family: var(--sans);
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--clay);
    border-bottom: 1px solid transparent;
}
#cancel-comment-reply-link:hover { border-bottom-color: var(--clay); }

/* ==========================================================================
   18. FOND VIDÉO — comportement selon l'écran
   ==========================================================================
   La vidéo de fond tourne sur toutes les tailles d'écran, téléphone compris.
   Elle n'est jamais téléchargée avant d'entrer dans le champ de vision, se met
   en pause dès qu'elle en sort, et cède la place à l'image poster dans les
   trois cas où elle ne rendrait pas service : mouvement réduit, économie de
   données, ou réglage « grands écrans seulement » du thème.
   ========================================================================== */

/* Téléphone : la bannière garde de la hauteur, sinon la vidéo n'a pas la place
   d'exister. 88vh d'abord pour les navigateurs anciens, puis 88svh — hauteur
   hors barre d'adresse, qui évite le soubresaut au défilement sur iOS. */
@media (max-width: 720px) {
    .fj-hero {
        display: flex;
        align-items: flex-end;
        min-height: 88vh;
        min-height: 88svh;
    }
    .fj-hero__inner { width: 100%; }

    /* Le voile passe en dégradé vertical : en colonne unique, le texte occupe
       toute la largeur et le dégradé horizontal ne le protégeait plus. */
    .fj-hero__media::after {
        background:
            linear-gradient(180deg, rgba(5, 5, 5, .58) 0%, rgba(5, 5, 5, .08) 34%, rgba(5, 5, 5, .58) 64%, var(--ink) 100%),
            linear-gradient(90deg, rgba(5, 5, 5, .34), rgba(5, 5, 5, .04));
    }

    /* Sur un écran étroit et haut, le cadrage 16/9 laisserait des bandes :
       on agrandit le lecteur YouTube jusqu'à couvrir toute la surface. */
    .fj-yt iframe { width: 300vh; height: 100vh; height: 100svh; }
}

/* Téléphone couché : la bannière plein écran masquerait tout le contenu. */
@media (max-height: 560px) and (orientation: landscape) {
    .fj-hero { min-height: 0; display: block; }
    .fj-yt iframe { width: 177.78vh; min-width: 100%; height: 56.25vw; min-height: 100%; }
}

/* Réglage « Lire les vidéos de fond sur mobile et tablette » décoché. */
@media (max-width: 860px) {
    .fj-media--wide-only .fj-media__video { display: none; }
    .fj-media--wide-only .fj-media__poster { opacity: var(--media-opacity); }
}

/* Mouvement réduit : l'image fixe remplace la vidéo, sans exception. */
@media (prefers-reduced-motion: reduce) {
    .fj-media__video { display: none; }
    .fj-media .fj-media__poster,
    .fj-media.is-playing .fj-media__poster { opacity: var(--media-opacity); }
}

/* Impression : ni vidéo ni voile. */
@media print {
    .fj-media__video { display: none; }
    .fj-media__poster { opacity: 1; }
}

/* --------------------------------------------------------------------------
   Saisie sur iOS : sous 16 px, Safari zoome sur le champ au premier appui et
   la page reste décalée. Les libellés gardent leur petite taille.
   -------------------------------------------------------------------------- */
@media (max-width: 860px) {
    .fj-form input[type="text"],
    .fj-form input[type="email"],
    .fj-form input[type="tel"],
    .fj-form input[type="url"],
    .fj-form input[type="number"],
    .fj-form select,
    .fj-form textarea,
    .fj-field input,
    .fj-commentform input[type="text"],
    .fj-commentform input[type="email"],
    .fj-commentform input[type="url"],
    .fj-commentform textarea { font-size: 16px; }
}

/* ==========================================================================
   19. POCHETTE D'ARTICLE — en-tête de l'article seul
   ==========================================================================
   Les articles parlent d'une sortie précise : sa pochette sert à la fois de
   fond au bandeau et de visuel plein cadre, avec le même filet doré décalé
   que les pochettes de l'accueil.
   ========================================================================== */

.fj-pagehead__inner--cover {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(180px, 20vw, 240px);
    gap: clamp(28px, 5vw, 68px);
    align-items: center;
}
.fj-pagehead__cover {
    position: relative;
    margin: 0;
    aspect-ratio: 1 / 1;
    transform: rotate(-2.2deg);
    box-shadow: 0 30px 72px rgba(0, 0, 0, .55);
    transition: transform .7s var(--ease);
}
.fj-pagehead__cover img { width: 100%; height: 100%; object-fit: cover; }
.fj-pagehead__cover::after {
    content: "";
    position: absolute;
    inset: -12px -12px 12px 12px;
    border: 1px solid rgba(255, 255, 255, .3);
    pointer-events: none;
}
.fj-pagehead--post:hover .fj-pagehead__cover { transform: rotate(0deg); }

/* ==========================================================================
   20. PAGE INTROUVABLE — 404
   ==========================================================================
   Une 404 n'est pas un cul-de-sac : chiffre fantôme en filigrane, pochettes
   reprises de l'accueil, et trois sorties possibles (recherche, rubriques,
   dernières actualités).
   ========================================================================== */

.fj-404 {
    position: relative;
    overflow: hidden;
    padding: calc(var(--head) + clamp(38px, 7vh, 84px)) 0 clamp(52px, 8vw, 96px);
    border-bottom: 1px solid var(--ink-line);
    background:
        radial-gradient(118% 88% at 84% 6%, rgba(255, 255, 255, .13), transparent 62%),
        radial-gradient(92% 74% at 2% 100%, rgba(255, 255, 255, .10), transparent 58%),
        var(--ink);
}

/* Le « 404 » en filigrane : décor pur, jamais lu ni sélectionnable. */
.fj-404__ghost {
    position: absolute;
    right: -.055em;
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--serif);
    font-size: clamp(15rem, 40vw, 36rem);
    line-height: .68;
    letter-spacing: -.05em;
    color: rgba(255, 255, 255, .035);
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
}

.fj-404__inner {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
    gap: clamp(30px, 6vw, 80px);
    align-items: center;
}

.fj-404__title {
    font-family: var(--serif);
    font-size: clamp(2.5rem, 6.2vw, 4.6rem);
    line-height: .98;
    letter-spacing: -.03em;
    margin: 16px 0 0;
}
.fj-404__title em { display: block; font-style: italic; color: var(--gold); }
.fj-404 .fj-lead { margin-top: 20px; max-width: 46ch; }
.fj-404__search { max-width: 520px; margin: clamp(26px, 4vw, 38px) 0 0; }

/* Rubriques : une liste filetée plutôt qu'une rangée de boutons. */
.fj-404__nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 clamp(18px, 3vw, 34px);
    max-width: 580px;
    margin-top: clamp(28px, 4vw, 42px);
    border-top: 1px solid var(--ink-line);
}
.fj-404__link {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 15px 2px;
    border-bottom: 1px solid var(--ink-line);
    transition: color .3s var(--ease), padding-left .35s var(--ease);
}
.fj-404__link .num {
    font-size: .62rem;
    letter-spacing: .18em;
    color: var(--clay);
    font-variant-numeric: tabular-nums;
}
.fj-404__link .lab { font-family: var(--serif); font-size: 1.12rem; line-height: 1.1; }
.fj-404__link i {
    margin-left: auto;
    font-size: .8rem;
    color: var(--paper-mute);
    transition: transform .35s var(--ease), color .3s var(--ease);
}
.fj-404__link:hover { color: var(--gold); padding-left: 10px; }
.fj-404__link:hover i { color: var(--gold); transform: translateX(5px); }

@media (min-width: 1081px) {
    .fj-covers--404 { padding: 10px 0 46px; }
}

/* --------------------------------------------------------------------------
   Adaptations mobiles des deux blocs ci-dessus.
   -------------------------------------------------------------------------- */

@media (max-width: 1080px) {
    /* Le chiffre fantôme descend en pied de section, seule place où il ne
       passe pas derrière le texte en colonne unique. */
    .fj-404__ghost {
        top: auto;
        bottom: -.1em;
        right: -.07em;
        transform: none;
        font-size: clamp(13rem, 52vw, 24rem);
    }
    .fj-404__inner { grid-template-columns: minmax(0, 1fr); align-items: start; }
}

@media (max-width: 860px) {
    .fj-pagehead__inner--cover { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .fj-pagehead__cover {
        order: -1;
        width: clamp(126px, 34vw, 170px);
        margin-bottom: 28px;
    }
}

@media (max-width: 560px) {
    .fj-404__nav { grid-template-columns: minmax(0, 1fr); max-width: none; }
}

@media (max-width: 420px) {
    /* Les pochettes gardent leur composition, resserrée d'un cran. */
    .fj-covers { padding: 20px 0 34px; }
    .fj-covers__main { width: min(82%, 252px); }
    .fj-covers__main::after { inset: -9px -9px 9px 9px; }
    .fj-covers__alt { width: min(47%, 134px); }
    .fj-covers__tag { font-size: .62rem; letter-spacing: .2em; }
}

/* Sans survol, l'inclinaison des pochettes ne bouge jamais : un balancement
   très lent redonne à la composition la respiration qu'elle a en desktop. */
@media (hover: none) and (prefers-reduced-motion: no-preference) {
    .fj-covers__main { animation: fj-cover-sway 9s var(--ease) infinite alternate; }
    .fj-covers__alt { animation: fj-cover-sway-alt 9s var(--ease) infinite alternate; }
}
@keyframes fj-cover-sway {
    from { transform: rotate(-2.2deg); }
    to   { transform: rotate(-.5deg) translateY(-4px); }
}
@keyframes fj-cover-sway-alt {
    from { transform: rotate(4deg); }
    to   { transform: rotate(1.4deg) translateY(-7px); }
}

/* ============================================================================
   Pages légales
   ========================================================================= */

/* Champ d'identité non renseigné : la mention doit se voir, pas se fondre. */
.fj-legal-todo {
    background: rgba(255, 255, 255, .18);
    color: var(--clay);
    padding: 1px 6px;
    border-radius: 2px;
    font-size: .92em;
}

/* Le tableau des traitements a quatre colonnes : il défile sur petit écran. */
.fj-legal-table {
    overflow-x: auto;
    margin: 22px 0;
}

.fj-legal-table table {
    margin: 0;
    min-width: 560px;
}

.fj-legal-meta {
    font-size: 14px;
    color: var(--paper-mute);
}

/* ============================================================================
   Allègement de l'interface
   Ces règles closent la feuille : elles l'emportent sur les blocs plus haut
   à spécificité égale, sans avoir à les réécrire.
   ========================================================================= */

/* --- En-tête ------------------------------------------------------------- */
.fj-header { padding: 0; }

.fj-header__inner { padding-top: 14px; padding-bottom: 14px; transition: padding .4s var(--ease); }
.fj-header.is-stuck { padding: 0; }
.fj-header.is-stuck .fj-header__inner { padding-top: 10px; padding-bottom: 10px; }

/* La navigation se cale à droite du logotype ; les commandes suivent. */
.fj-nav { margin-left: auto; }

/* Variante de bouton la plus discrète, pour les barres denses. */
.fj-btn--xs {
    padding: 6px 12px;
    font-size: .62rem;
    letter-spacing: .09em;
    gap: 6px;
    border-radius: 2px;
}
.fj-btn--xs i { font-size: .88em; }

/* --- En-tête mobile ------------------------------------------------------ */

@media (max-width: 921px) {
    /* La barre de service reste présente : langue et boutique doivent être
       accessibles sans ouvrir le menu. Elle se resserre simplement. */
    .fj-header__inner { padding-top: 11px; padding-bottom: 11px; }

    .fj-btn--xs { padding: 5px 10px; font-size: .62rem; letter-spacing: .07em; }
}

@media (max-width: 560px) {
    /* Sous cette largeur, les réseaux entrent en concurrence avec la boutique :
       ils restent accessibles dans le menu et le pied de page. */
}

/* --- Bouton du menu ------------------------------------------------------- */

/*
 * « body.fj button { background: none } » l'emporte par spécificité sur une
 * simple classe : le fond du bouton doit être posé au même niveau, sans quoi
 * le hamburger reste transparent sur la vidéo et devient illisible.
 */
.fj-burger,
body.fj button.fj-burger {
    width: 46px;
    height: 46px;
    /* Cercle : c'est la forme retenue par le thème pour ce bouton. Seules la
       lisibilité et la taille de cible changent. */
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .22);
    background: rgba(5, 5, 5, .55);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    gap: 5px;
}

.fj-burger span {
    width: 20px;
    height: 2px;
    border-radius: 2px;
}
.fj-burger span:last-child { width: 13px; }

.fj-burger:hover,
body.fj button.fj-burger:hover,
.fj-burger.is-open,
body.fj button.fj-burger.is-open {
    border-color: var(--clay);
    background: rgba(255, 255, 255, .18);
}

/* Croix : les deux barres se rejoignent au centre (2 px de trait, 5 px d'écart). */
.fj-burger.is-open span:first-child { transform: translateY(3.5px) rotate(45deg); }
.fj-burger.is-open span:last-child { width: 20px; transform: translateY(-3.5px) rotate(-45deg); }

@media (max-width: 420px) {
    .fj-burger,
    body.fj button.fj-burger { width: 44px; height: 44px; }
}

/* --- Menu mobile : titres plus sobres ------------------------------------ */

.fj-drawer__nav { gap: 0; }
.fj-drawer__nav a {
    display: block;
    font-size: clamp(1.3rem, 5.2vw, 1.75rem);
    line-height: 1.3;
    padding: 14px 0;
    gap: 0;
}

/* --- Bannière : « Fanny J » tient sur une seule ligne --------------------- */

.fj-hero__title {
    font-size: clamp(2.7rem, 8.4vw, 6rem);
    white-space: nowrap;
    overflow-wrap: normal;
    /* Respiration sous le nom : le texte qui suit collait au titre. */
    margin-bottom: clamp(26px, 3.4vw, 40px);
}

/* Le titre ne se replie plus : sous cette largeur, on garantit qu'il tient
   dans la gouttière plutôt que de déborder du cadre. */
@media (max-width: 380px) {
    .fj-hero__title { font-size: 2.3rem; }
}
/* La section « finitions » plus haut passe .l1 en display:block, ce qui
   renvoyait « J » à la ligne quel que soit le white-space du titre. */
.fj-hero__title .l1,
.fj-hero__title .l2 { display: inline; }

/* --- Inscription à la newsletter ----------------------------------------- */

/* Rayon de 2 px comme tous les boutons du site : la pilule arrondie jurait
   avec le reste, qui est franchement anguleux. */
.fj-field--pill {
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    padding: 7px 7px 7px 18px;
    border: 1px solid var(--ink-line);
    border-bottom-color: var(--ink-line);
    border-radius: 2px;
    background: rgba(5, 5, 5, .55);
    transition: border-color .3s var(--ease), background .3s var(--ease);
}
.fj-field--pill:focus-within {
    border-color: var(--clay);
    background: rgba(5, 5, 5, .78);
}
.fj-field--pill input { padding: 12px 0; font-size: .92rem; }
.fj-field--pill .fj-btn {
    border-radius: 2px;
    padding: 13px 26px;
    flex: none;
}

.fj-band__legal,
.fj-band form + p { color: var(--paper-mute); }

/* --- Réponse de l'inscription newsletter ---------------------------------- */

/*
 * L'inscription part en AJAX : le formulaire reste en place et la réponse
 * s'écrit juste dessous, à la même place qu'elle vienne du script ou du
 * rechargement de repli. Le bloc est masqué tant qu'il n'y a rien à dire.
 */
.fj-nlform__msg {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 14px;
}
.fj-nlform__msg[hidden] { display: none; }
.fj-nlform__msg i { margin: 2px 0 0; }

/* Envoi en cours : le formulaire s'estompe légèrement, le temps de la réponse. */
.fj-nlform.is-busy { opacity: .62; }
.fj-nlform.is-busy .fj-btn { cursor: progress; }

@media (max-width: 560px) {
    /* Sous cette largeur, champ et bouton côte à côte deviennent illisibles. */
    .fj-field--pill {
        flex-wrap: wrap;
        border-radius: 2px;
        padding: 14px 16px;
    }
    .fj-field--pill input { flex: 1 1 100%; padding: 6px 0 12px; }
    .fj-field--pill .fj-btn { width: 100%; justify-content: center; }
}

/* --- Alignement du gabarit ------------------------------------------------ */

/*
 * L'en-tête est en position fixe : il se centre sur la largeur de la fenêtre,
 * barre de défilement comprise, alors que le contenu de la page se centre sur
 * la zone utile, plus étroite de la largeur de cette barre (9 px ici). Le
 * logotype tombait donc à quelques pixels des sections situées dessous, et le
 * décalage apparaissait ou disparaissait selon que la page défilait ou non.
 *
 * Réserver la gouttière en permanence remet les deux gabarits d'aplomb, quelle
 * que soit la longueur de la page.
 */
html {
    scrollbar-gutter: stable;
}

/* ============================================================================
   Galerie et Fanbase
   ========================================================================= */

/* Ces éléments reçoivent l'attribut « hidden » par script. Une règle d'auteur
   posant un display l'emporterait sur la feuille du navigateur : le garde est
   explicite, comme pour le bandeau de consentement. */
.fj-gallery__item[hidden],
.fj-gallery__month[hidden],
.fj-gallery__year[hidden],
.fj-gallery__empty[hidden],
.fj-lightbox[hidden] {
    display: none !important;
}

/* --- Barre de la galerie -------------------------------------------------- */

.fj-gallery__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: clamp(26px, 4vw, 44px);
    padding-bottom: 18px;
    border-bottom: 1px solid var(--ink-line);
}

.fj-gallery__count {
    margin: 0;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--paper-mute);
}

.fj-gallery__filters { display: flex; gap: 9px; flex-wrap: wrap; }

/* --- Chronologie ---------------------------------------------------------- */

.fj-gallery__year { margin-bottom: clamp(34px, 5vw, 62px); }

.fj-gallery__yeartitle {
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin: 0 0 22px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--ink-line);
}
.fj-gallery__yeartitle .y {
    font-family: var(--serif);
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    font-weight: 600;
    line-height: 1;
    color: var(--paper);
}
/* Chiffre seul : l'unité reste implicite pour ne pas alourdir la ligne. */
.fj-gallery__yeartitle .n {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .16em;
    color: var(--clay);
    padding: 3px 9px;
    border: 1px solid var(--ink-line);
    border-radius: 2px;
}

.fj-gallery__month { margin-bottom: 30px; }

.fj-gallery__monthtitle {
    margin: 0 0 14px;
    font-family: var(--sans);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--paper-mute);
}

/* --- Grille --------------------------------------------------------------- */

.fj-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: clamp(14px, 2vw, 24px);
}

.fj-gallery__item { margin: 0; min-width: 0; }

.fj-gallery__open {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    border: 1px solid var(--ink-line);
    border-radius: 2px;
    background: var(--ink-soft);
    overflow: hidden;
    cursor: pointer;
    aspect-ratio: 1 / 1;
    transition: border-color .35s var(--ease), transform .35s var(--ease);
}
body.fj button.fj-gallery__open { background: var(--ink-soft); }

.fj-gallery__open img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .6s var(--ease), opacity .35s var(--ease);
}

.fj-gallery__open:hover { border-color: var(--clay); transform: translateY(-3px); }
.fj-gallery__open:hover img { transform: scale(1.05); opacity: .82; }
.fj-gallery__open:focus-visible { outline: 2px solid var(--clay); outline-offset: 3px; }

.fj-gallery__zoom {
    position: absolute;
    right: 10px;
    bottom: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 2px;
    background: rgba(5, 5, 5, .74);
    color: var(--paper);
    font-size: .78rem;
    opacity: 0;
    transition: opacity .3s var(--ease);
}
.fj-gallery__open:hover .fj-gallery__zoom,
.fj-gallery__open:focus-visible .fj-gallery__zoom { opacity: 1; }

.fj-gallery__item figcaption {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-top: 10px;
    font-size: .78rem;
    line-height: 1.45;
}
.fj-gallery__item figcaption strong { color: var(--paper); font-weight: 600; }
.fj-gallery__item figcaption time,
.fj-gallery__item figcaption span { color: var(--paper-mute); font-size: .74rem; }

.fj-gallery__empty { color: var(--paper-mute); font-size: .92rem; }

/* --- Visionneuse ---------------------------------------------------------- */

.fj-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9997;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(16px, 4vw, 48px);
    background: rgba(5, 5, 5, .95);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.fj-lightbox__inner {
    margin: 0;
    max-width: min(1100px, 100%);
    max-height: 100%;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.fj-lightbox__inner img {
    max-width: 100%;
    max-height: 74vh;
    width: auto;
    margin: 0 auto;
    display: block;
    border: 1px solid var(--ink-line);
    border-radius: 2px;
    object-fit: contain;
}

.fj-lightbox__inner figcaption {
    display: flex;
    flex-direction: column;
    gap: 3px;
    text-align: center;
    font-size: .84rem;
}
.fj-lightbox__inner figcaption strong { color: var(--paper); font-weight: 600; }
.fj-lightbox__inner figcaption span { color: var(--paper-mute); font-size: .78rem; }

.fj-lightbox__close {
    position: absolute;
    top: clamp(12px, 3vw, 26px);
    right: clamp(12px, 3vw, 26px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--ink-line);
    border-radius: 50%;
    color: var(--paper);
    cursor: pointer;
    transition: border-color .3s var(--ease), color .3s var(--ease);
}
.fj-lightbox__close,
body.fj button.fj-lightbox__close { background: rgba(5, 5, 5, .6); }
.fj-lightbox__close:hover { border-color: var(--clay); color: var(--clay); }

body.fj-lightbox-open { overflow: hidden; }

/* --- Fanbase -------------------------------------------------------------- */

.fj-fan__intro { max-width: 62ch; margin-bottom: 30px; }

.fj-fan__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
}

.fj-fan__net {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    border: 1px solid var(--ink-line);
    border-radius: 2px;
    background: rgba(255, 255, 255, .015);
    transition: border-color .35s var(--ease), transform .35s var(--ease);
}
.fj-fan__net:hover { border-color: var(--clay); transform: translateY(-3px); }

.fj-fan__ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex: none;
    border: 1px solid var(--ink-line);
    border-radius: 50%;
    color: var(--clay);
    font-size: 1rem;
}

.fj-fan__label {
    flex: 1;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--paper);
}

.fj-fan__go { color: var(--paper-mute); transition: transform .3s var(--ease), color .3s var(--ease); }
.fj-fan__net:hover .fj-fan__go { color: var(--clay); transform: translateX(4px); }

/* Mur des messages */

.fj-fan__wall {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: clamp(14px, 2vw, 22px);
    margin-bottom: clamp(34px, 5vw, 56px);
}

.fj-fan__msg {
    margin: 0;
    padding: 24px;
    border: 1px solid var(--ink-line);
    border-radius: 2px;
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(255, 255, 255, .07), transparent 58%),
        rgba(255, 255, 255, .015);
}

.fj-fan__msg blockquote {
    margin: 0 0 16px;
    padding: 0;
    border: 0;
    font-family: var(--serif);
    font-size: 1.02rem;
    font-style: italic;
    line-height: 1.55;
    color: rgba(255, 255, 255, .9);
}
/* Guillemet ouvrant en filigrane : signale la citation sans la charger. */
.fj-fan__msg blockquote::before {
    content: "\00AB";
    display: block;
    margin-bottom: 4px;
    font-size: 1.9rem;
    line-height: .6;
    color: var(--clay);
}

.fj-fan__msg figcaption {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-top: 14px;
    border-top: 1px solid var(--ink-line);
}
.fj-fan__msg figcaption strong {
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--paper);
}
.fj-fan__msg figcaption span { font-size: .74rem; color: var(--paper-mute); }

/* Formulaire du mur */

.fj-fan__form {
    max-width: 720px;
    padding: clamp(24px, 4vw, 40px);
    border: 1px solid var(--ink-line);
    border-radius: 2px;
    background: rgba(5, 5, 5, .45);
}
.fj-fan__form h3 {
    margin: 0 0 20px;
    font-family: var(--serif);
    font-size: clamp(1.3rem, 3vw, 1.7rem);
    font-weight: 600;
}
.fj-fan__form .fj-note { margin-bottom: 20px; }

/* Une ligne de formulaire tient son libellé au-dessus de son champ.
   La grille à colonnes automatiques, elle, appartient au bloc Fanbase, où
   la ligne porte plusieurs champs : appliquée partout, elle expédiait le
   libellé du commentaire dans une colonne et son champ dans l'autre. */
.fj-form__row { display: block; }

.fj-fan__form .fj-form__row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.fj-fan__legal {
    margin: 0;
    font-size: .74rem;
    line-height: 1.55;
    color: var(--paper-mute);
}

.fj-fan__cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}
.fj-fan__cta h3 {
    margin: 0 0 8px;
    font-family: var(--serif);
    font-size: clamp(1.4rem, 3vw, 1.9rem);
    font-weight: 600;
}
.fj-fan__cta .fj-lead { margin: 0; max-width: 52ch; }

/* --- Avis d'erreur -------------------------------------------------------- */

.fj-note--ko { border-color: #E06A5A; background: rgba(224, 106, 90, .1); }
.fj-note--ko i { color: #E06A5A; }

@media (max-width: 600px) {
    .fj-gallery { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
    .fj-gallery__bar { align-items: flex-start; flex-direction: column; gap: 14px; }
}

/* .fj-form est une grille : ses enfants directs s'étirent. Le bouton reprend
   sa largeur naturelle plutôt que celle du formulaire. */
.fj-fan__form .fj-btn { justify-self: start; }


/* ==========================================================================
   21. CHARTE « L'EFFET PAPILLON » — habillage monochrome
   ==========================================================================
   Cette section referme la feuille : à spécificité égale elle l'emporte sur
   les blocs précédents, sans avoir à les réécrire. Elle ne touche qu'à la
   forme — couleurs, typographie, ornements. Les gabarits, les contenus
   administrables et le comportement des scripts restent inchangés.

   Trois partis pris :
   · monochrome strict (noir profond, blanc, gris) — l'accent est le contraste ;
   · Cormorant Garamond en titrage, Montserrat en labeur ;
   · angles vifs partout, cercles réservés aux commandes rondes.
   ========================================================================== */

/* --- 21.1 Typographie ---------------------------------------------------- */

/* Montserrat porte plus gras qu'Inter à graisse égale : le corps de texte
   descend d'un cran pour retrouver la même densité à l'écran. */
body.fj {
    font-weight: 300;
    letter-spacing: .012em;
}
body.fj p { line-height: 1.8; }
body.fj strong,
body.fj b { font-weight: 600; color: var(--paper); }

/* Cormorant a des fûts plus fins et un œil plus petit que Playfair : les
   titres reprennent du corps et abandonnent leur chasse négative, qui les
   resserrait jusqu'à l'illisible. */
.fj-hero__title,
.fj-head__title,
.fj-pagehead h1,
.fj-404__title,
.fj-modal__title,
.fj-band h3,
.fj-comments__title,
.fj-prose h2 {
    font-weight: 500;
    letter-spacing: 0;
}

.fj-hero__title {
    font-size: clamp(3rem, 9vw, 6.8rem);
    line-height: .94;
    letter-spacing: .012em;
}
.fj-hero__title .l2 { color: var(--paper); }

.fj-head__title {
    font-size: clamp(2.4rem, 6vw, 4.6rem);
    line-height: .95;
}
.fj-pagehead h1 { font-size: clamp(2.8rem, 8vw, 5.6rem); line-height: .96; }

/* Le surtitre reprend l'interlettrage large de la charte. */
.fj-eyebrow {
    font-size: .64rem;
    font-weight: 600;
    letter-spacing: .3em;
    color: var(--paper-mute);
}
.fj-eyebrow::before { width: 16px; height: 16px; background: rgba(255, 255, 255, .9); opacity: 1; }

.fj-lead { font-weight: 300; line-height: 1.8; }

/* --- 21.2 Boutons -------------------------------------------------------- */

/* Deux états seulement, l'un l'inverse de l'autre : plein blanc ou filet
   blanc. Le survol permute les deux, comme dans la maquette. */
.fj-btn {
    /* 24 px de retrait : à 28 px, les deux appels de la bannière dépassaient
       leur colonne d'un pixel et se retrouvaient l'un sous l'autre. */
    padding: 0 24px;
    min-height: 52px;
    border-radius: 0;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .14em;
}
.fj-btn--sm { padding: 0 20px; min-height: 42px; font-size: .64rem; letter-spacing: .12em; }
.fj-btn--xs { padding: 0 13px; min-height: 30px; font-size: .62rem; letter-spacing: .09em; border-radius: 0; }

.fj-btn--solid,
.fj-btn--paper,
body.fj button.fj-btn--solid,
body.fj button.fj-btn--paper {
    background: var(--paper);
    border-color: var(--paper);
    color: var(--ink);
}
.fj-btn--solid:hover,
.fj-btn--solid:focus-visible,
.fj-btn--paper:hover,
.fj-btn--paper:focus-visible,
body.fj button.fj-btn--solid:hover,
body.fj button.fj-btn--solid:focus-visible,
body.fj button.fj-btn--paper:hover,
body.fj button.fj-btn--paper:focus-visible {
    background: transparent;
    border-color: var(--paper);
    color: var(--paper);
    transform: none;
}

.fj-btn--ghost { border-color: rgba(255, 255, 255, .55); color: var(--paper); }
.fj-btn--ghost:hover,
.fj-btn--ghost:focus-visible,
body.fj button.fj-btn--ghost:hover,
body.fj button.fj-btn--ghost:focus-visible {
    background: var(--paper);
    border-color: var(--paper);
    color: var(--ink);
    transform: none;
}

.fj-link { font-weight: 600; letter-spacing: .14em; }

/* --- 21.3 En-tête et logotype -------------------------------------------- */

.fj-header.is-stuck { background: rgba(5, 5, 5, .88); }

/* Le logotype manuscrit est déjà blanc sur fond transparent : rien à lui
   appliquer sinon une taille et un peu d'air. */
.fj-logo__img { max-height: 44px; width: auto; }
.fj-logo--footer { display: block; }
.fj-logo--footer .fj-logo__img { max-height: 62px; margin-bottom: 6px; }
.fj-logo__sub { border-left-color: rgba(255, 255, 255, .22); }

.fj-nav a { font-size: .66rem; font-weight: 500; letter-spacing: .16em; }
.fj-nav a::after { background: var(--paper); }

.fj-drawer__nav a { font-weight: 400; letter-spacing: .01em; }

/* --- 21.4 Ornement : l'envol de papillons -------------------------------- */

/* Décor pur : jamais lu, jamais cliquable, toujours derrière le texte. */
.fj-flutter {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
}
.fj-flutter i {
    position: absolute;
    display: block;
    background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2032%2032'%3E%3Cg%20fill='%23ffffff'%3E%3Cpath%20d='M16%2015C14.8%209.4%2010.6%204.6%206.8%205.4%203.4%206.1%202.6%2010.4%204.8%2013.2%206.9%2015.8%2012.4%2016.6%2016%2015Z'/%3E%3Cpath%20d='M16%2017.4C13.6%2017.6%209.4%2019%207.8%2021.8%206.1%2024.8%208.2%2027.8%2011.3%2026.8%2014.1%2025.9%2015.6%2021.2%2016%2017.4Z'/%3E%3Cpath%20d='M16%2015C17.2%209.4%2021.4%204.6%2025.2%205.4%2028.6%206.1%2029.4%2010.4%2027.2%2013.2%2025.1%2015.8%2019.6%2016.6%2016%2015Z'/%3E%3Cpath%20d='M16%2017.4C18.4%2017.6%2022.6%2019%2024.2%2021.8%2025.9%2024.8%2023.8%2027.8%2020.7%2026.8%2017.9%2025.9%2016.4%2021.2%2016%2017.4Z'/%3E%3Cpath%20d='M16%2011.2c1%200%201.55%201.15%201.55%203.6%200%203.3-.62%206.7-1.55%208.8-.93-2.1-1.55-5.5-1.55-8.8%200-2.45.55-3.6%201.55-3.6z'/%3E%3C/g%3E%3Cpath%20d='M15.2%2011.6C13.9%209%2012%207.6%2010.4%207.2M16.8%2011.6C18.1%209%2020%207.6%2021.6%207.2'%20fill='none'%20stroke='%23ffffff'%20stroke-width='1.1'%20stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
    opacity: .18;
    filter: drop-shadow(0 0 18px rgba(255, 255, 255, .5));
    will-change: transform;
}

.fj-flutter--hero .b1 { width: 62px; height: 62px; left: 46%; top: 24%; animation: fj-fly-a 17s var(--ease) infinite; }
.fj-flutter--hero .b2 { width: 44px; height: 44px; right: 11%; top: 30%; animation: fj-fly-b 21s var(--ease) infinite; }
.fj-flutter--hero .b3 { width: 34px; height: 34px; right: 6%; bottom: 20%; opacity: .12; animation: fj-fly-c 25s var(--ease) infinite; }

.fj-flutter--head .b1 { width: 46px; height: 46px; right: 12%; top: 38%; animation: fj-fly-b 21s var(--ease) infinite; }
.fj-flutter--head .b2 { width: 30px; height: 30px; right: 5%; bottom: 24%; opacity: .12; animation: fj-fly-c 25s var(--ease) infinite; }
.fj-flutter--head .b3 { width: 24px; height: 24px; left: 8%; top: 30%; opacity: .1; animation: fj-fly-a 17s var(--ease) infinite; }

@keyframes fj-fly-a {
    0%, 100% { transform: translate(0, 0) rotate(11deg); }
    33%      { transform: translate(28px, -22px) rotate(-6deg); }
    66%      { transform: translate(-16px, 16px) rotate(17deg); }
}
@keyframes fj-fly-b {
    0%, 100% { transform: translate(0, 0) rotate(-13deg); }
    40%      { transform: translate(-26px, 20px) rotate(8deg); }
    75%      { transform: translate(14px, -14px) rotate(-19deg); }
}
@keyframes fj-fly-c {
    0%, 100% { transform: translate(0, 0) rotate(19deg); }
    50%      { transform: translate(20px, -30px) rotate(-11deg); }
}

/* Le décor s'immobilise dès que le visiteur demande moins de mouvement. */
@media (prefers-reduced-motion: reduce) {
    .fj-flutter i { animation: none !important; }
}

/* Sur téléphone, l'envol encombre un espace déjà compté. */
@media (max-width: 720px) {
    .fj-flutter--hero .b1 { width: 42px; height: 42px; left: 60%; top: 15%; }
    .fj-flutter--hero .b2 { width: 30px; height: 30px; top: 23%; }
    .fj-flutter--hero .b3,
    .fj-flutter--head .b2,
    .fj-flutter--head .b3 { display: none; }
}

/* --- 21.5 Blocs, cartes, pochettes --------------------------------------- */

/* Angles vifs : la charte ne connaît que l'arête franche et le cercle. */
.fj-form input[type="text"],
.fj-form input[type="email"],
.fj-form input[type="tel"],
.fj-form select,
.fj-form textarea,
.fj-field--pill,
.fj-field--pill .fj-btn,
.fj-gallery__open,
.fj-gallery__zoom,
.fj-fan__net,
.fj-fan__form,
.fj-fan__msg,
.fj-legal-todo,
.fj-tags a,
.fj-chips span,
.fj-prose code,
.fj-prose kbd { border-radius: 0; }

/* Pochette absente : dégradé graphite plutôt qu'un aplat mort. */
.fj-album__cover,
.fj-post__img,
.fj-covers__main,
.fj-covers__alt,
.fj-gallery__open,
body.fj button.fj-gallery__open {
    background: linear-gradient(145deg, #161616, #070707);
}
.fj-album__void,
.fj-post__img .void { color: rgba(255, 255, 255, .14); }

/* Le filet décalé des pochettes passe du doré au blanc discret. */
.fj-covers__main::after,
.fj-bio__portrait::after,
.fj-pagehead__cover::after { border-color: rgba(255, 255, 255, .28); }

.fj-platform,
.fj-card,
.fj-tourpast,
.fj-fan__net,
.fj-fan__msg { background: rgba(255, 255, 255, .015); }

.fj-band {
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(255, 255, 255, .07), transparent 58%),
        rgba(255, 255, 255, .015);
}
.fj-fan__msg {
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(255, 255, 255, .06), transparent 58%),
        rgba(255, 255, 255, .015);
}

/* Sur fond monochrome un survol coloré n'existe plus : c'est le filet qui se
   raffermit et le fond qui s'éclaire d'un souffle. */
.fj-card:hover,
.fj-tourpast:hover,
a.fj-postnav__item:hover,
.fj-fan__net:hover {
    border-color: rgba(255, 255, 255, .42);
    background: rgba(255, 255, 255, .05);
}
.fj-date:hover { background: rgba(255, 255, 255, .05); }
.fj-gallery__open:hover { border-color: rgba(255, 255, 255, .45); }

/* --- 21.6 Corrections de contraste --------------------------------------- */

/* Le bandeau flottant est blanc : son pictogramme doit l'être en négatif. */
.fj-toast i { color: var(--ink); }

/* Mention « à compléter » des pages légales : lisible, donc en négatif. */
.fj-legal-todo { background: rgba(255, 255, 255, .92); color: var(--ink); }

/* Deux avis d'information que la couleur ne sépare plus : c'est le filet qui
   les distingue. L'avis d'erreur garde son rouge, seule entorse assumée au
   monochrome — une alerte ne se devine pas. */
.fj-note { border-left-color: rgba(255, 255, 255, .45); }
.fj-note--ok { border-left-color: var(--paper); background: rgba(255, 255, 255, .09); }

.fj-prose a { color: var(--paper); border-bottom-color: rgba(255, 255, 255, .45); }
.fj-prose a:hover { border-bottom-color: var(--paper); }

/* --- 21.7 Curseur papillon ----------------------------------------------- */

/*
 * Le curseur du système n'est masqué qu'une fois la silhouette en place : si
 * le script échoue ou n'est pas exécuté, le pointeur reste celui du système.
 * Réservé aux pointeurs précis, retiré quand les mouvements sont réduits.
 */
.fj-cursor {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    width: 34px;
    height: 34px;
    margin: -17px 0 0 -17px;
    pointer-events: none;
    opacity: 0;
    transition: opacity .3s var(--ease), width .25s var(--ease), height .25s var(--ease), margin .25s var(--ease);
    will-change: transform;
}
.fj-cursor.is-in { opacity: 1; }
/* Sur un champ de saisie la silhouette s'efface : le curseur texte reprend la
   main, elle ne doit pas masquer la ligne en cours de frappe. */
.fj-cursor.is-text { opacity: .3; }
/* Sur un élément actionnable, le papillon prend de l'envergure. */
.fj-cursor.is-link { width: 46px; height: 46px; margin: -23px 0 0 -23px; }

.fj-cursor svg { display: block; width: 100%; height: 100%; overflow: visible; }
.fj-cursor path { fill: #fff; stroke: rgba(5, 5, 5, .5); stroke-width: .6; stroke-linejoin: round; }
/* Le corps se détache des ailes par sa valeur : un contour à cet endroit se
   lisait comme une fêlure au milieu de la silhouette. */
.fj-cursor .fj-cursor__body { fill: #cfcfcf; stroke: rgba(5, 5, 5, .35); stroke-width: .4; }
.fj-cursor .fj-cursor__ant { fill: none; stroke: #fff; stroke-width: 1; stroke-linecap: round; }

/* Battement d'ailes : un simple pincement horizontal autour de l'axe du corps. */
.fj-cursor__wing {
    transform-origin: 16px 16px;
    animation: fj-wing 1.4s var(--ease) infinite alternate;
}
/* Battement resserré : au-delà, les ailes se referment au point que la
   silhouette n'est plus lisible pendant la moitié du cycle. */
.fj-cursor.is-link .fj-cursor__wing { animation-duration: .55s; }
@keyframes fj-wing {
    from { transform: scaleX(1); }
    to   { transform: scaleX(.74); }
}

/* Cette classe n'est posée que par le script : lui seul sait que la
   silhouette existe réellement. */
body.fj.has-fj-cursor,
body.fj.has-fj-cursor * { cursor: none; }
body.fj.has-fj-cursor input,
body.fj.has-fj-cursor textarea,
body.fj.has-fj-cursor select,
body.fj.has-fj-cursor [contenteditable="true"] { cursor: text; }

/* Écran tactile, pointeur grossier, mouvement réduit : curseur du système. */
@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
    .fj-cursor { display: none; }
    body.fj.has-fj-cursor,
    body.fj.has-fj-cursor * { cursor: auto; }
    body.fj.has-fj-cursor a,
    body.fj.has-fj-cursor button,
    body.fj.has-fj-cursor [role="button"] { cursor: pointer; }
}

/* --- 21.8 Images : vivantes ---------------------------------------------- */

/*
 * Les visuels gardent leurs couleurs. La charte est monochrome par sa
 * typographie, ses fonds et ses filets — pas en éteignant les pochettes et les
 * photos, qui sont justement ce que l'on vient voir. Seul le fond de bannière,
 * pur décor derrière du texte, est ramené au noir et blanc.
 */
.fj-hero__media .fj-media__poster,
.fj-hero__media .fj-media__video { filter: grayscale(1) contrast(1.06); }
.fj-pagehead__bg .fj-media__poster,
.fj-pagehead__bg .fj-media__video { filter: grayscale(1) contrast(1.04); }

/* --- 21.9 Plateformes : la couleur de marque au survol seulement --------- */

/*
 * Six pictogrammes de marque en couleur formaient la seule tache colorée de
 * la page et emportaient tout le regard. Ils passent au blanc, et retrouvent
 * leur couleur au survol — le gabarit transmet celle-ci dans --fj-brand.
 */
.fj-platform i:not(.arrow) { color: var(--paper); transition: color .35s var(--ease), transform .35s var(--ease); }
.fj-platform:hover i:not(.arrow),
.fj-platform:focus-visible i:not(.arrow) { color: var(--fj-brand, var(--paper)); }

@media (hover: none) {
    .fj-platform i:not(.arrow) { color: var(--fj-brand, var(--paper)); }
}

/* --- 21.10 Cadrage de la bannière sur téléphone -------------------------- */

/*
 * En colonne unique, le cadre devient portrait et « object-fit: cover » rogne
 * une photo paysage par son centre : le sujet, presque toujours dans la moitié
 * haute, sortait du cadre. On remonte le point d'ancrage.
 */
@media (max-width: 720px) {
    .fj-hero__media .fj-media__poster,
    .fj-hero__media .fj-media__video { object-position: 58% 32%; }
}

/* ==========================================================================
   22. CHARTE « L'EFFET PAPILLON » — structure
   ==========================================================================
   L'en-tête sur deux niveaux, le bouton boutique et la grille d'albums de
   l'accueil laissent place à l'organisation de la maquette : une seule barre,
   une section boutique, un carrousel, un bloc parcours. Les gabarits et les
   réglages restent les nôtres — seule la forme change.
   ========================================================================== */

/* --- 22.1 En-tête sur une seule barre ------------------------------------ */

/* Le bandeau de service a disparu : la hauteur de l'en-tête se recale. */
:root { --head: 88px; }
@media (min-width: 922px) { :root { --head: 96px; } }
@media (max-width: 921px) { :root { --head: 84px; } }

.fj-header { padding: 0; }
.fj-header__inner { padding-top: 22px; padding-bottom: 22px; }
.fj-header.is-stuck .fj-header__inner { padding-top: 13px; padding-bottom: 13px; }

.fj-header__aside { display: flex; align-items: center; gap: clamp(10px, 1.6vw, 18px); }

/* Loupe : une commande, pas un bouton. */
.fj-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    color: rgba(255, 255, 255, .78);
    font-size: 1rem;
    transition: color .3s var(--ease);
}
.fj-icon-btn:hover,
.fj-icon-btn:focus-visible { color: var(--paper); }

/* Le sélecteur de langue rejoint la barre principale. */
.fj-header__aside .fj-lang { font-size: .64rem; letter-spacing: .14em; }

/* --- 22.2 Panneau de recherche ------------------------------------------- */

.fj-searchpanel {
    position: fixed;
    inset: 0;
    z-index: 140;
    display: flex;
    align-items: center;
    background: rgba(5, 5, 5, .94);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    opacity: 0;
    transition: opacity .3s var(--ease);
}
.fj-searchpanel.is-open { opacity: 1; }
.fj-searchpanel[hidden] { display: none !important; }

.fj-searchpanel__inner { position: relative; padding: 40px 0; }
.fj-searchpanel form { max-width: 780px; }

.fj-searchpanel__field {
    width: 100%;
    margin-top: 18px;
    padding: 0 0 18px;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--ink-line);
    color: var(--paper);
    font-family: var(--serif);
    font-size: clamp(1.7rem, 5vw, 3.2rem);
    line-height: 1.1;
    outline: none;
    transition: border-color .3s var(--ease);
}
.fj-searchpanel__field::placeholder { color: rgba(255, 255, 255, .26); }
.fj-searchpanel__field:focus { border-bottom-color: var(--paper); }

.fj-searchpanel__hint {
    margin: 18px 0 26px;
    font-size: .78rem;
    color: var(--paper-mute);
}

.fj-searchpanel__close {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border: 1px solid var(--ink-line);
    border-radius: 50%;
    color: var(--paper-mute);
    transition: color .3s var(--ease), border-color .3s var(--ease);
}
.fj-searchpanel__close:hover { color: var(--paper); border-color: var(--paper); }

/* --- 22.3 Bannière : l'album à paraître ---------------------------------- */

.fj-hero__kicker {
    margin: 0 0 10px;
    font-size: .62rem;
    font-weight: 600;
    letter-spacing: .46em;
    text-transform: uppercase;
    color: var(--paper-mute);
}

/* Le second appel est un lien fléché, pas un second bouton : la maquette ne
   met qu'un seul aplat par bannière. */
.fj-hero__cta { align-items: center; gap: 28px; }
.fj-hero__link { border-bottom: 0; color: rgba(255, 255, 255, .82); }
.fj-hero__link:hover { color: var(--paper); }

/* Mention verticale de défilement, en bas à droite de la bannière. */
.fj-scroll {
    position: absolute;
    right: max(24px, env(safe-area-inset-right));
    bottom: 78px;
    z-index: 3;
    writing-mode: vertical-rl;
    font-size: .62rem;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .5);
}
@media (max-width: 1080px) { .fj-scroll { display: none; } }

/* --- 22.4 Boutique / collection ------------------------------------------ */

.fj-shop {
    display: grid;
    grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
    gap: clamp(32px, 5vw, 72px);
    align-items: center;
}
.fj-shop__copy .fj-head__title { margin-top: 14px; }
.fj-shop__copy .fj-lead { margin-top: 24px; }
.fj-shop__cta { margin-top: 32px; }

.fj-shop__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 20px); }

.fj-product { display: block; min-width: 0; }
.fj-product__visual {
    position: relative;
    aspect-ratio: .78;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid var(--ink-line);
    background: linear-gradient(145deg, #161616, #070707);
}
.fj-product__visual img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
a.fj-product:hover .fj-product__visual img { transform: scale(1.05); }

/* --- Second visuel au survol ----------------------------------------------
 * Les deux images se superposent et se croisent en fondu. La carte n'a pas
 * besoin de JavaScript : c'est une transition d'opacité, elle se coupe d'elle-
 * même quand le visiteur demande à réduire les mouvements.
 * ------------------------------------------------------------------------- */

.fj-product__visual--swap .fj-product__img {
    position: absolute;
    inset: 0;
    transition: opacity .55s var(--ease), transform .9s var(--ease);
}
/* La seconde attend son tour, posée par-dessus. */
.fj-product__visual--swap .fj-product__img--hover { opacity: 0; }

.fj-product:hover .fj-product__visual--swap .fj-product__img,
.fj-product:focus-within .fj-product__visual--swap .fj-product__img { opacity: 0; }
.fj-product:hover .fj-product__visual--swap .fj-product__img--hover,
.fj-product:focus-within .fj-product__visual--swap .fj-product__img--hover { opacity: 1; }

/* Le cadre signale qu'il y a autre chose à voir, même à l'arrêt. */
.fj-product__visual--swap::after {
    content: "";
    position: absolute;
    right: 10px;
    bottom: 10px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--paper);
    opacity: .55;
    transition: opacity .4s var(--ease), transform .4s var(--ease);
    pointer-events: none;
    z-index: 2;
}
.fj-product:hover .fj-product__visual--swap::after { opacity: 0; transform: scale(.4); }

/* Sans survol — téléphone, tablette — la bascule n'a aucun déclencheur.
   On s'en tient à la première image, et la pastille disparaît : elle
   annoncerait quelque chose qui n'arrivera pas. */
@media (hover: none) {
    .fj-product__visual--swap .fj-product__img--hover { display: none; }
    .fj-product__visual--swap::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .fj-product__visual--swap .fj-product__img { transition: opacity .01ms; }
}

/* Sans visuel, la silhouette de la charte tient lieu de vignette. */
.fj-product__mark {
    width: 46%;
    height: 46%;
    background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2032%2032'%3E%3Cg%20fill='%23ffffff'%3E%3Cpath%20d='M16%2011C13%207%208%203%205%204%202%205%201.5%2010%203.5%2013%205.5%2016%2012%2017%2016%2016Z'/%3E%3Cpath%20d='M16%2016.5C12%2017.5%207%2019%205.5%2022.5%204%2026%207%2029%2010.5%2027.5%2013.5%2026%2015.5%2022.5%2016%2020Z'/%3E%3Cpath%20d='M16%2011C19%207%2024%203%2027%204%2030%205%2030.5%2010%2028.5%2013%2026.5%2016%2020%2017%2016%2016Z'/%3E%3Cpath%20d='M16%2016.5C20%2017.5%2025%2019%2026.5%2022.5%2028%2026%2025%2029%2021.5%2027.5%2018.5%2026%2016.5%2022.5%2016%2020Z'/%3E%3Cpath%20d='M16%209.5c.95%200%201.5%201.4%201.5%204%200%203.6-.6%207.4-1.5%209.5-.9-2.1-1.5-5.9-1.5-9.5%200-2.6.55-4%201.5-4z'/%3E%3C/g%3E%3Cpath%20d='M15.3%2010C13.5%207%2011.5%205.5%209.8%205M16.7%2010C18.5%207%2020.5%205.5%2022.2%205'%20fill='none'%20stroke='%23ffffff'%20stroke-width='1.1'%20stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
    opacity: .3;
}

.fj-product__title { margin-top: 18px; font-family: var(--serif); font-size: 1.3rem; line-height: 1.2; }
a.fj-product:hover .fj-product__title { color: var(--paper); }
.fj-product__sub {
    margin: 5px 0 0;
    font-size: .62rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--paper-mute);
}

/* --- 22.4 bis Section « Écouter » ----------------------------------------
 * Le visuel à gauche, le titre du moment à droite. Le cadre est en 16/9 :
 * c'est le format d'une vidéo, et l'image de repli s'y recadre sans casse.
 * ------------------------------------------------------------------------- */

.fj-music {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: clamp(30px, 5vw, 68px);
    align-items: center;
}

.fj-music__art {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border: 1px solid var(--ink-line);
    background: #070707;
}
/* Le poster de la section n'est pas un fond de page : il s'affiche en plein. */
.fj-music__media { --media-opacity: 1; }
.fj-music__media .fj-media__poster,
.fj-music__media .fj-media__video { filter: none; }

/* Le lecteur YouTube est dimensionné en vh/vw pour couvrir la fenêtre ; dans
   un cadre de section, il doit remplir son cadre. Le grossissement d'un tiers
   pousse hors du cadre le bandeau de titre et la barre du lecteur, que
   YouTube impose à tout embarquement : il ne reste que l'image. */
.fj-music__media .fj-yt iframe {
    top: 50%; left: 50%;
    width: 100%; min-width: 0;
    height: 100%; min-height: 0;
    transform: translate(-50%, -50%) scale(1.34);
}

/* Voile discret, pour que le bouton de son garde du contraste sur une image
   claire — sans assombrir le visuel comme le fait un bandeau de page. */
.fj-music__shade {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(200deg, rgba(5, 5, 5, 0) 45%, rgba(5, 5, 5, .55));
}

.fj-music__sound {
    position: absolute;
    right: 16px; bottom: 16px;
    z-index: 2;
    width: 46px; height: 46px;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid rgba(255, 255, 255, .32);
    border-radius: 50%;
    background: rgba(5, 5, 5, .55);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: var(--paper);
    cursor: pointer;
    transition: background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.fj-music__sound:hover { background: var(--paper); border-color: var(--paper); color: var(--ink); transform: translateY(-2px); }
.fj-music__sound[hidden] { display: none; }

.fj-music__copy .fj-head__title { margin-top: 14px; }
.fj-music__sub {
    /* Les italiques du titre descendent bas : sans cet écart, la mention
       vient buter dans la jambe du « p ». */
    margin-top: clamp(22px, 3vw, 28px);
    font-size: .68rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--gold, var(--clay));
}
.fj-music__copy .fj-lead { margin-top: 24px; }

.fj-music__plats { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 26px; }
.fj-music__plat {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 15px;
    border: 1px solid var(--ink-line);
    border-radius: 2px;
    font-size: .72rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--paper-mute);
    transition: color .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
.fj-music__plat:hover { color: var(--ink); background: var(--paper); border-color: var(--paper); }
.fj-music__cta { margin-top: 32px; }

@media (max-width: 900px) {
    .fj-music { grid-template-columns: minmax(0, 1fr); }
    /* Le visuel passe en premier : c'est lui qui porte la section. */
    .fj-music__art { order: -1; }
}

/* --- 22.5 Carrousel de la discographie ----------------------------------- */

.fj-head__aside { display: flex; align-items: center; gap: 18px; flex: none; }

.fj-slider { display: flex; gap: 10px; }
.fj-slider[hidden] { display: none !important; }
.fj-slider button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--ink-line);
    border-radius: 50%;
    color: var(--paper);
    transition: border-color .3s var(--ease), background .3s var(--ease), color .3s var(--ease), opacity .3s var(--ease);
}
.fj-slider button:hover:not(:disabled) { background: var(--paper); border-color: var(--paper); color: var(--ink); }
.fj-slider button:disabled { opacity: .3; cursor: default; }

.fj-albums--track {
    display: grid;
    grid-auto-flow: column;
    /* Trois pochettes visibles, la quatrième amorcée : l'œil comprend qu'il
       peut faire défiler sans qu'on ait à le lui dire. */
    grid-auto-columns: minmax(0, calc((100% - 2 * clamp(14px, 2.4vw, 32px)) / 3));
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 1px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    /* Le survol d'une pochette la fait grandir : sans cette marge, elle se
       retrouverait rognée par le bord de la piste. */
    padding-bottom: 4px;
}
.fj-albums--track::-webkit-scrollbar { display: none; }
.fj-albums--track .fj-album { scroll-snap-align: start; min-width: 0; }

@media (max-width: 960px) {
    .fj-albums--track { grid-auto-columns: minmax(0, calc((100% - clamp(14px, 2.4vw, 32px)) / 2)); }
}
@media (max-width: 560px) {
    /* En liste, le carrousel n'a plus de sens : les pochettes s'empilent, comme
       partout ailleurs sur téléphone. */
    .fj-albums--track {
        display: grid;
        grid-auto-flow: row;
        grid-template-columns: minmax(0, 1fr);
        overflow-x: visible;
    }
    .fj-slider { display: none; }
}

/* --- 22.6 Bloc parcours -------------------------------------------------- */

/* --- Parcours : bande pleine largeur, portrait en fond --------------------
 * Le parti pris de la maquette est conservé — l'image tient tout le cadre,
 * le texte se pose dessus. Ce qui a changé : la colonne de texte suit
 * maintenant le gabarit des autres sections de l'accueil. Elle avait sa propre
 * respiration verticale (48 à 90 px au lieu de 56 à 118) et ses propres écarts
 * entre surtitre, titre et chapô — le bloc ne tombait pas dans le même rythme
 * que « Boutique » ou « Écouter », juste au-dessus et juste en dessous.
 * ------------------------------------------------------------------------- */

.fj-story {
    position: relative;
    display: flex;
    align-items: center;
    min-height: clamp(420px, 62vh, 680px);
    overflow: hidden;
    border-top: 1px solid var(--ink-line);
    background: var(--ink);
}
.fj-story__bg { position: absolute; inset: 0; z-index: 0; }
.fj-story__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 74% 22%; }
.fj-story__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    /* Le voile protège le texte à gauche et laisse le portrait respirer à
       droite : au-delà de 70 %, il ne reste presque plus rien de l'image. */
    background:
        linear-gradient(90deg, var(--ink) 0%, rgba(5, 5, 5, .9) 34%, rgba(5, 5, 5, .12) 72%, rgba(5, 5, 5, 0) 100%),
        linear-gradient(0deg, var(--ink) 0%, rgba(5, 5, 5, 0) 24%),
        linear-gradient(180deg, var(--ink) 0%, rgba(5, 5, 5, 0) 18%);
}

/* Même respiration verticale que .fj-section.
   « padding-block » et non le raccourci « padding » : ce dernier remettait à
   zéro les gouttières latérales héritées de .fj-shell, et le texte venait
   coller au bord de l'écran sur téléphone. */
.fj-story__inner { position: relative; z-index: 2; width: 100%; padding-block: clamp(56px, 9vw, 118px); }

/* Le texte occupe une colonne, comme celui de « Boutique » et « Écouter »,
   au lieu de s'étirer sur toute la largeur de la bande. */
.fj-story__copy { max-width: min(560px, 54%); }
.fj-story__copy .fj-head__title { margin-top: 14px; }
.fj-story__copy .fj-lead { margin: 24px 0 0; }
.fj-story__cta { margin-top: 32px; }

.fj-story__note {
    margin: 26px 0 0;
    font-family: var(--serif);
    font-style: italic;
    font-size: clamp(1.15rem, 2.2vw, 1.6rem);
    line-height: 1.35;
    color: rgba(255, 255, 255, .82);
}

@media (max-width: 960px) {
    .fj-shop { grid-template-columns: minmax(0, 1fr); }
    /* En colonne unique le texte reprend toute la largeur, et le voile passe
       à la verticale pour continuer de le porter. */
    .fj-story__copy { max-width: none; }
    /* Sur téléphone le portrait est recadré sur le visage — au centre exact de
       l'image il n'y a que la veste — et le voile s'allège : à .62 puis .88 dès
       le milieu de la bande, il ne restait presque plus rien de la photo. Le
       texte se lit toujours à 6,2:1 sur le pire pixel, bien au-delà du seuil
       AA de 4,5:1. */
    .fj-story__bg img { object-position: 58% 24%; }
    .fj-story__bg::after {
        background:
            linear-gradient(180deg, rgba(5, 5, 5, .58) 0%, rgba(5, 5, 5, .66) 42%, rgba(5, 5, 5, .58) 74%, rgba(5, 5, 5, .86) 100%);
    }
}

@media (max-width: 700px) {
    .fj-shop__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* Trois produits sur deux colonnes : le dernier se centre plutôt que de
       rester seul, collé à gauche. */
    .fj-shop__grid > *:last-child:nth-child(odd) { grid-column: 1 / -1; max-width: 50%; margin: 0 auto; }
}

/* --- 22.7 Pied de page en quatre colonnes -------------------------------- */

.fj-footer__grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, .8fr) minmax(0, .8fr) minmax(0, 1fr); }
.fj-footer__tagline {
    margin: 0 0 16px;
    font-size: .62rem;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--paper-mute);
}
.fj-footer__brand .fj-socials { margin-top: 24px; }
.fj-footer__grid > div:last-child .fj-socials { margin: 0 0 22px; }

/* Colonne « Contact » : cinq pastilles de 42 px et leurs écarts dépassent de
   peu la largeur d'une colonne sur quatre, et la dernière passait seule à la
   ligne. Quelques pixels de moins les rangent sur un seul rang. */
@media (min-width: 1081px) {
    .fj-footer__grid > div:last-child .fj-socials { gap: 8px; }
    .fj-footer__grid > div:last-child .fj-socials a { width: 38px; height: 38px; }
}

@media (max-width: 1080px) {
    .fj-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fj-footer__grid > div:first-child { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
    .fj-footer__grid { grid-template-columns: minmax(0, 1fr); }
}

/* Adresses e-mail du pied de page : l'icône et l'adresse restent sur une
   seule ligne. Sur grand écran, la colonne Contact prend au moins la largeur
   de l'adresse la plus longue ; sur un écran très étroit, la taille du texte
   suit la largeur disponible plutôt que de couper l'adresse. */
.fj-footer__links a { display: inline-flex; align-items: center; white-space: nowrap; max-width: 100%; }
.fj-footer__links i { flex: none; }
@media (min-width: 1081px) {
    .fj-footer__grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, .8fr) minmax(0, .8fr) minmax(min-content, 1fr); }
}
@media (max-width: 420px) {
    .fj-footer__links a { font-size: clamp(.74rem, 3.9vw, .9rem); }
}

/* --- 22.8 Tiroir mobile -------------------------------------------------- */

/* Notre bouton hamburger est conservé : il reste rond, et lisible sur toute
   image de fond. Seule sa hauteur suit celle de la nouvelle barre. */
@media (max-width: 1080px) {
    .fj-header__aside .fj-lang { display: none; }
}

/* Le tiroir porte alors le sélecteur de langue, qui a quitté la barre. */
.fj-drawer__foot .fj-lang { display: inline-flex; }

/* ==========================================================================
   23. IMAGES, POCHETTES ET CARROUSEL — mise au point
   ========================================================================== */

/* --- 23.1 La bannière garde ses couleurs --------------------------------- */

/*
 * La photo de bannière est le visuel de la campagne : elle reste telle qu'elle
 * a été prise. Le voile de lecture, lui, suffit largement à tenir le texte
 * lisible par-dessus.
 */
.fj-hero__media .fj-media__poster,
.fj-hero__media .fj-media__video { filter: none; }

/*
 * Les bandeaux de page intérieurs restent en noir et blanc : l'image y est
 * affichée à 22 % d'opacité derrière un titre, c'est une texture, pas une
 * photo — la couleur n'y ferait que du bruit.
 */
.fj-pagehead__bg .fj-media__poster,
.fj-pagehead__bg .fj-media__video { filter: grayscale(1) contrast(1.04); }

/* --- 23.2 Vignettes : noir et blanc, couleur au survol ------------------- */

/*
 * Pochettes, actualités, portraits : la page reste monochrome au repos, et
 * chaque visuel retrouve ses couleurs sous le pointeur. La couleur devient
 * une réponse à un geste plutôt qu'un fond permanent.
 */
.fj-album__cover img,
.fj-post__img img,
.fj-bio__portrait img,
.fj-gallery__open img,
.fj-pagehead__cover img,
.fj-covers__main img,
.fj-covers__alt img,
.fj-story__bg img,
.fj-modal__cover {
    filter: grayscale(1) contrast(1.04);
    transition: filter .6s var(--ease), transform .9s var(--ease), opacity .35s var(--ease);
}

.fj-album:hover .fj-album__cover img,
.fj-album:focus-within .fj-album__cover img,
.fj-post:hover .fj-post__img img,
.fj-post:focus-within .fj-post__img img,
.fj-bio__portrait:hover img,
.fj-gallery__open:hover img,
.fj-gallery__open:focus-visible img,
.fj-pagehead--post:hover .fj-pagehead__cover img,
.fj-covers:hover .fj-covers__main img,
.fj-covers:hover .fj-covers__alt img,
.fj-story:hover .fj-story__bg img {
    filter: grayscale(0) contrast(1);
}

/* La pochette s'assombrit déjà au survol pour laisser paraître le bouton :
   les deux effets se composent au lieu de s'annuler. */
.fj-album:hover .fj-album__cover img { filter: grayscale(0) brightness(.55); }

/* La visionneuse montre la photo telle qu'elle est : c'est elle qu'on est
   venu voir, on ne l'ampute pas de ses couleurs. */
.fj-lightbox__inner img,
.fj-modal.is-open .fj-modal__cover { filter: none; }

/* Sans survol possible, rien ne permettrait de retrouver les couleurs. */
@media (hover: none) {
    .fj-album__cover img,
    .fj-post__img img,
    .fj-bio__portrait img,
    .fj-gallery__open img,
    .fj-pagehead__cover img,
    .fj-covers__main img,
    .fj-covers__alt img,
    .fj-modal__cover { filter: none; }
}

/* --- 23.3 Bouton au centre des pochettes --------------------------------- */

/*
 * Un disque blanc plein posé au milieu d'une pochette la masquait et jurait
 * avec le reste. Il devient ce qu'il est dans la charte : un cercle de filet
 * blanc sur un fond flouté, qui laisse voir l'image derrière lui.
 */
.fj-album__play,
body.fj button.fj-album__play {
    width: 66px;
    height: 66px;
    margin: -33px 0 0 -33px;
    border: 1px solid rgba(255, 255, 255, .85);
    border-radius: 50%;
    background: rgba(5, 5, 5, .28);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: var(--paper);
    font-size: .92rem;
    transition: opacity .4s var(--ease), transform .4s var(--ease), background .3s var(--ease), color .3s var(--ease);
}
.fj-album__play i { line-height: 1; }

.fj-album__play:hover,
body.fj button.fj-album__play:hover,
.fj-album__play:focus-visible,
body.fj button.fj-album__play:focus-visible {
    background: var(--paper);
    border-color: var(--paper);
    color: var(--ink);
}

/* Sur écran tactile, le bouton est toujours là : il se fait discret plutôt
   que de masquer la pochette en permanence. */
@media (hover: none) {
    .fj-album__play,
    body.fj button.fj-album__play {
        width: 46px;
        height: 46px;
        margin: 0;
        inset: auto 10px 10px auto;
        left: auto;
        top: auto;
        font-size: .78rem;
        opacity: 1;
        transform: none;
    }
}

/* --- 23.4 Carrousel : une piste, des cartes toutes identiques ------------ */

/*
 * Le gabarit fournit trois nombres — combien de pochettes sur grand écran, sur
 * tablette, sur grand téléphone — et la feuille ne fait que les appliquer.
 * Aucun calcul de paliers ici : le réglage de la personnalisation est déjà
 * traduit à la source, et demander deux pochettes n'en fera jamais apparaître
 * trois sur un écran plus étroit.
 *
 * La largeur d'une carte se déduit de la largeur visible de la piste, écarts
 * déduits : les pochettes tombent juste à toutes les tailles, sans fraction
 * approximative.
 */
.fj-albums.fj-albums--track {
    --track-gap: clamp(14px, 2.2vw, 30px);
    --per-view: var(--per-lg, 4);

    display: grid;
    grid-auto-flow: column;
    grid-template-columns: none;
    /*
     * Largeur ferme, et non minmax(0, …) : avec une borne basse à zéro, le
     * navigateur comprimait les six pochettes pour les faire tenir dans la
     * largeur visible — on obtenait six vignettes serrées au lieu de quatre
     * pochettes et d une piste qui défile.
     */
    grid-auto-columns: calc((100% - (var(--per-view) - 1) * var(--track-gap)) / var(--per-view));
    gap: var(--track-gap);
    align-items: start;

    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;

    /* Le bord droit s'estompe : le regard comprend que la piste continue. */
    -webkit-mask-image: linear-gradient(90deg, #000 0 93%, transparent 100%);
    mask-image: linear-gradient(90deg, #000 0 93%, transparent 100%);
}
.fj-albums.fj-albums--track::-webkit-scrollbar { display: none; }

/* Arrivé au bout, plus rien à estomper : le script pose la classe. */
.fj-albums.fj-albums--track.is-end {
    -webkit-mask-image: none;
    mask-image: none;
}

/*
 * Toutes les cartes ont exactement la même hauteur : la pochette est carrée,
 * et le bloc de texte réserve deux lignes de titre, qu'il en faille une ou
 * deux. Sans cette réserve, un titre long décalait les liens d'écoute d'une
 * carte à l'autre et la rangée paraissait bancale.
 */
.fj-albums--track .fj-album {
    scroll-snap-align: start;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.fj-albums--track .fj-album__cover { flex: none; }
.fj-albums--track .fj-album__title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    /* Deux lignes réservées, au corps et à l'interligne du titre. */
    min-height: calc(2 * 1.15em);
}
.fj-albums--track .fj-album__links { margin-top: auto; padding-top: 12px; }

/* Tablette : trois pochettes au plus — au-delà, les titres se coupent. */
@media (max-width: 1200px) {
    .fj-albums.fj-albums--track { --per-view: var(--per-md, 3); }
}

/* Tablette portrait et grand téléphone : deux. */
@media (max-width: 900px) {
    .fj-albums.fj-albums--track { --per-view: var(--per-sm, 2); }
}

@media (max-width: 620px) {
    /*
     * Sur téléphone, la piste redevient une liste : la carte y est déjà une
     * ligne — pochette à gauche, titre à droite, chevron au bout — et faire
     * défiler horizontalement une liste verticale n'aurait aucun sens.
     */
    .fj-albums.fj-albums--track {
        display: grid;
        grid-auto-flow: row;
        grid-template-columns: minmax(0, 1fr);
        grid-auto-columns: auto;
        gap: 0;
        overflow-x: visible;
        -webkit-mask-image: none;
        mask-image: none;
        border-top: 1px solid var(--ink-line);
    }
    .fj-slider { display: none; }

    /* La ligne reprend la mise en forme de la liste d'albums (section 13),
       que le mode « piste » avait passée en colonne flex. */
    .fj-albums--track .fj-album {
        display: grid;
        grid-template-columns: 84px minmax(0, 1fr);
        align-items: center;
        gap: 16px;
        padding: 13px 20px 13px 0;
        border-bottom: 1px solid var(--ink-line);
        position: relative;
    }
    .fj-albums--track .fj-album__cover { border: 0; }
    .fj-albums--track .fj-album__play { display: none; }
    .fj-albums--track .fj-album__body { padding: 0; }
    .fj-albums--track .fj-album__links { display: none; }
    .fj-albums--track .fj-album__title {
        font-size: 1.04rem;
        min-height: 0;
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }
    .fj-albums--track .fj-album__badge {
        top: 5px; left: 5px;
        padding: 3px 6px;
        font-size: .62rem;
        letter-spacing: .1em;
    }
    /* Chevron d'appel, comme sur la liste de la page Discographie. */
    .fj-albums--track .fj-album::after {
        content: "";
        position: absolute;
        right: 4px; top: 50%;
        width: 7px; height: 7px;
        margin-top: -4px;
        border-right: 1px solid var(--paper-mute);
        border-bottom: 1px solid var(--paper-mute);
        transform: rotate(-45deg);
        pointer-events: none;
    }
}

/* ==========================================================================
   Page Partenaires
   La vidéo et le mot de remerciement à gauche, les partenaires à droite en
   deux colonnes qui défilent en sens contraire. Chaque colonne contient sa
   liste deux fois : quand la première moitié a fini de passer, la seconde
   est exactement à sa place, et la boucle repart sans à-coup.
   L'écart entre cartes est une marge basse, pas un « gap » : avec « gap »,
   la moitié de la piste ne tombe pas juste (il manque un demi-écart) et la
   boucle saute d'un cran à chaque tour.
   ========================================================================== */

.fj-sponsors {
    position: relative;
    padding: calc(var(--head) + clamp(34px, 7vh, 72px)) 0 clamp(56px, 8vw, 110px);
    border-bottom: 1px solid var(--ink-line);
    overflow: hidden;
    background:
        radial-gradient(ellipse 60% 50% at 18% 30%, rgba(255, 255, 255, .05), transparent 70%),
        var(--ink);
}

.fj-sponsors__grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
    gap: clamp(32px, 5vw, 76px);
    align-items: stretch;
}

/* --- Colonne de gauche ---------------------------------------------------- */

.fj-sponsors__intro { display: flex; flex-direction: column; min-width: 0; }

.fj-sponsors__title {
    font-family: var(--serif);
    font-weight: 500;
    font-size: clamp(2.5rem, 5.2vw, 4.5rem);
    line-height: .98;
    letter-spacing: -.025em;
    margin: 16px 0 0;
    text-wrap: balance;
}
.fj-sponsors__title em { font-style: italic; color: var(--gold); }
.fj-sponsors__intro .fj-lead { margin-top: 22px; }

.fj-sponsors__art {
    position: relative;
    margin: clamp(28px, 4vw, 40px) 0 0;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border: 1px solid var(--ink-line);
    background: #070707;
}
.fj-sponsors__media { --media-opacity: 1; }
.fj-sponsors__media .fj-media__poster,
.fj-sponsors__media .fj-media__video { filter: none; }
/* Même recadrage que la section « Écouter » : le lecteur YouTube remplit son
   cadre et ses bandeaux imposés sortent du champ. */
.fj-sponsors__media .fj-yt iframe {
    top: 50%; left: 50%;
    width: 100%; min-width: 0;
    height: 100%; min-height: 0;
    transform: translate(-50%, -50%) scale(1.34);
}

.fj-sponsors__shade {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(5, 5, 5, 0) 45%, rgba(5, 5, 5, .78));
}

.fj-sponsors__quote {
    position: absolute;
    left: clamp(16px, 2.4vw, 26px);
    right: 84px;
    bottom: clamp(14px, 2.2vw, 22px);
    z-index: 2;
    margin: 0;
    font-family: var(--serif);
    font-style: italic;
    font-size: clamp(1.05rem, 1.9vw, 1.45rem);
    line-height: 1.2;
    color: var(--paper);
    text-shadow: 0 1px 14px rgba(0, 0, 0, .6);
}

.fj-sponsors__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 18px 28px;
    margin-top: clamp(24px, 3.4vw, 34px);
}
.fj-sponsors__count {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin: 0;
    font-size: .68rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--paper-mute);
}
.fj-sponsors__count strong {
    font-family: var(--serif);
    font-size: 2.6rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -.02em;
    color: var(--paper);
    font-variant-numeric: tabular-nums;
}

/* --- Mur des partenaires -------------------------------------------------- */

.fj-sponsors__wall {
    position: relative;
    min-height: 560px;
    /* Les cartes naissent et s'effacent aux deux bords au lieu d'être coupées. */
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 88%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 88%, transparent 100%);
}
.fj-sponsors__col {
    position: absolute;
    top: 0;
    bottom: 0;
    width: calc(50% - clamp(6px, 1vw, 9px));
    overflow: hidden;
}
.fj-sponsors__col--up   { left: 0; }
.fj-sponsors__col--down { right: 0; }

.fj-sponsors__track {
    animation: fj-sponsors-rise var(--fj-dur, 40s) linear infinite;
    will-change: transform;
}
.fj-sponsors__col--down .fj-sponsors__track { animation-name: fj-sponsors-fall; }

/* Le visiteur qui s'attarde sur une carte doit pouvoir la lire, ou la
   cliquer sans qu'elle lui échappe. */
.fj-sponsors__wall:hover .fj-sponsors__track,
.fj-sponsors__wall:focus-within .fj-sponsors__track { animation-play-state: paused; }

@keyframes fj-sponsors-rise {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(0, -50%, 0); }
}
@keyframes fj-sponsors-fall {
    from { transform: translate3d(0, -50%, 0); }
    to   { transform: translate3d(0, 0, 0); }
}

.fj-sponsor {
    display: flex;
    flex-direction: column;
    margin-bottom: clamp(12px, 1.8vw, 18px);
    border: 1px solid var(--ink-line);
    background: var(--ink-soft);
    color: var(--paper);
    text-decoration: none;
    transition: border-color .35s var(--ease), background .35s var(--ease);
}
a.fj-sponsor:hover,
a.fj-sponsor:focus-visible { border-color: rgba(255, 255, 255, .55); background: #111; }
a.fj-sponsor:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; }

.fj-sponsor__plate {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 3 / 2;
    padding: 10%;
    overflow: hidden;
    border-bottom: 1px solid var(--ink-line);
}
.fj-sponsor--light .fj-sponsor__plate { background: #FFFFFF; border-bottom-color: transparent; }

/* Deux classes : il faut passer devant la remise à zéro des images.
   L'image sort du flux : un logo plus haut que large ne doit pas étirer son
   cartouche, sans quoi les cartes d'une colonne n'ont plus la même hauteur. */
.fj-sponsor .fj-sponsor__plate img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    padding: 12% 14%;
    object-fit: contain;
    filter: grayscale(1);
    opacity: .82;
    transition: filter .45s var(--ease), opacity .45s var(--ease), transform .45s var(--ease);
}
.fj-sponsor:hover .fj-sponsor__plate img,
.fj-sponsor:focus-visible .fj-sponsor__plate img { filter: none; opacity: 1; transform: scale(1.04); }
/* Vidéo filmée en hauteur : cadre 4/5, calé sur le haut du sujet — là où
   se trouve le visage dans une vidéo tournée au téléphone. */
.fj-sponsors__art--portrait { aspect-ratio: 4 / 5; }
.fj-sponsors__art--portrait .fj-media__poster,
.fj-sponsors__art--portrait .fj-media__video { object-position: 50% 28%; }
/* Le son ne se coupe pas quand la lecture échoue : le bouton disparaît. */
.fj-media.is-failed ~ .fj-music__sound { display: none; }

/* Réglage « Toujours en couleur » : les marques gardent leurs couleurs, le
   survol ne fait plus que grossir légèrement le logo. */
.fj-sponsors__wall.is-color .fj-sponsor__plate img { filter: none; opacity: 1; }

/* Les logos s'effacent puis reviennent chacun à leur tour, pendant que les
   colonnes défilent. Le décalage vient de la carte (--fj-blink) : une carte
   et sa copie de boucle sont toujours au même point du fondu. Le logo survolé
   reste allumé. Le réglage « Logos qui apparaissent et disparaissent » de la
   personnalisation pose la classe .is-blink. */
.fj-sponsors__wall { --fj-logo-o: .82; }
.fj-sponsors__wall.is-color { --fj-logo-o: 1; }
.fj-sponsors__wall.is-blink .fj-sponsors__track .fj-sponsor__plate > * {
    animation: fj-sponsor-blink 9s var(--ease) var(--fj-blink, 0s) infinite both;
}
.fj-sponsors__wall.is-blink:hover .fj-sponsors__track .fj-sponsor__plate > *,
.fj-sponsors__wall.is-blink:focus-within .fj-sponsors__track .fj-sponsor__plate > * { animation-play-state: paused; }
.fj-sponsors__track .fj-sponsor:hover .fj-sponsor__plate > *,
.fj-sponsors__track .fj-sponsor:focus-visible .fj-sponsor__plate > * { animation: none; }

@keyframes fj-sponsor-blink {
    0%, 58%   { opacity: var(--fj-logo-o); transform: scale(1); }
    70%, 80%  { opacity: 0; transform: scale(.9); }
    92%, 100% { opacity: var(--fj-logo-o); transform: scale(1); }
}

.fj-sponsor__word {
    font-family: var(--serif);
    font-style: italic;
    font-size: clamp(1.25rem, 2.2vw, 1.75rem);
    line-height: 1.05;
    text-align: center;
    overflow-wrap: anywhere;
}
.fj-sponsor--light .fj-sponsor__word { color: var(--ink); }

.fj-sponsor__meta {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 12px 34px 13px 14px;
    min-width: 0;
}
.fj-sponsor__meta strong {
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.fj-sponsor__meta span {
    font-size: .66rem;
    letter-spacing: .06em;
    color: var(--paper-mute);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.fj-sponsor__meta i {
    position: absolute;
    right: 13px;
    top: 50%;
    font-size: .62rem;
    color: var(--paper-mute);
    transform: translateY(-50%);
    transition: color .3s var(--ease), transform .3s var(--ease);
}
a.fj-sponsor:hover .fj-sponsor__meta i { color: var(--paper); transform: translate(2px, -50%); }

/* Aucun partenaire publié : une invitation plutôt qu'un vide. */
.fj-sponsors__wall.is-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 420px;
    border: 1px dashed rgba(255, 255, 255, .22);
    -webkit-mask-image: none;
    mask-image: none;
}
.fj-sponsors__empty { max-width: 34ch; padding: 32px; text-align: center; }
.fj-sponsors__empty-mark {
    display: block;
    width: 44px; height: 44px;
    margin: 0 auto 18px;
    background: var(--paper);
    opacity: .6;
    -webkit-mask: var(--fj-butterfly) center / contain no-repeat;
    mask: var(--fj-butterfly) center / contain no-repeat;
}
.fj-sponsors__empty p {
    margin: 0;
    font-family: var(--serif);
    font-style: italic;
    font-size: 1.35rem;
    line-height: 1.3;
    color: rgba(255, 255, 255, .8);
}

/* --- Tablette et téléphone ------------------------------------------------ */

@media (max-width: 900px) {
    .fj-sponsors__grid { grid-template-columns: minmax(0, 1fr); }
    .fj-sponsors__wall { min-height: clamp(440px, 112vw, 620px); }
    .fj-sponsors__wall.is-empty { min-height: 280px; }
}

/* Tablette : sur toute la largeur, une carte au format 3/2 ferait près de
   300 px de haut et la colonne n'en montrerait que deux. Le cartouche
   s'allonge pour que le mur reste un mur. */
@media (min-width: 561px) and (max-width: 900px) {
    .fj-sponsor__plate { aspect-ratio: 2 / 1; }
}

@media (max-width: 560px) {
    .fj-sponsors__title { font-size: clamp(2.2rem, 10.5vw, 2.8rem); }
    .fj-sponsors__quote { right: 70px; font-size: 1rem; }
    .fj-sponsors__foot { flex-direction: column; align-items: stretch; }
    .fj-sponsors__foot .fj-btn { justify-content: center; }
    .fj-sponsors__count strong { font-size: 2.1rem; }
    .fj-sponsor .fj-sponsor__plate img { padding: 11% 10%; }
    .fj-sponsor__meta { padding: 10px 26px 11px 10px; }
    .fj-sponsor__meta strong { font-size: .62rem; letter-spacing: .1em; }
    .fj-sponsor__meta span { font-size: .62rem; }
    .fj-sponsor__meta i { right: 9px; }
    .fj-sponsors__art .fj-music__sound { right: 12px; bottom: 12px; width: 40px; height: 40px; }
}

/* Mouvement réduit : les colonnes s'arrêtent, chaque partenaire n'apparaît
   qu'une fois, et le mur devient une grille ordinaire. */
@media (prefers-reduced-motion: reduce) {
    .fj-sponsors__wall { min-height: 0; -webkit-mask-image: none; mask-image: none; }
    .fj-sponsors__wall:not(.is-empty) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 1.8vw, 18px); align-content: start; }
    .fj-sponsors__col { position: static; width: auto; overflow: visible; }
    .fj-sponsors__track,
    .fj-sponsors__wall.is-blink .fj-sponsors__track .fj-sponsor__plate > * { animation: none; }
    .fj-sponsor[aria-hidden="true"] { display: none; }
}
/* Sans défilement, le mur devient plus haut que la colonne de gauche : elle
   accompagne la lecture au lieu de laisser un grand vide sous la vidéo. */
@media (prefers-reduced-motion: reduce) and (min-width: 901px) {
    .fj-sponsors__intro { align-self: start; position: sticky; top: calc(var(--head) + 24px); }
}