/* ============================================================
   BARGHACH PICTURES — Feuille de style principale
   ============================================================ */

/* ---------- Polices ---------- */
@font-face {
    font-family: "AGaramond";
    src: url("../assets/fonts/AGaramondPro-Regular.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "AGaramond";
    src: url("../assets/fonts/AGaramondPro-Italic.ttf") format("truetype");
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

/* ---------- Variables ---------- */
:root {
    --color-bg: #ffffff;
    --color-text: #111111;
    --color-muted: #666666;
    --color-line: #e6e6e6;
    --color-accent: #111111;
    --header-height: 104px;
    --max-width: 1280px;
    --font-main: "AGaramond", "Garamond", Georgia, serif;
}

/* ---------- Reset léger ---------- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-main);
    color: var(--color-text);
    background-color: var(--color-bg);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
}

/* ============================================================
   EN-TÊTE
   ============================================================ */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background-color: #ffffff;
    border-bottom: 1px solid var(--color-line);
}

.header-inner {
    position: relative;
    max-width: var(--max-width);
    margin: 0 auto;
    height: var(--header-height);
    padding: 0 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

/* ---------- Logo ---------- */
.logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.logo-img {
    height: 78px;
    width: auto;
    display: block;
    object-fit: contain;
}

/* ---------- Conteneur nav + actions ----------
   display:contents => sur desktop, .main-nav et .header-actions
   se comportent comme des enfants directs de .header-inner (flex). */
.nav-collapse {
    display: contents;
}

/* ---------- Navigation (milieu) ----------
   Positionnée en absolu et centrée sur la LARGEUR de la page,
   donc indépendante du logo (gauche) et de l'icône compte (droite). */
.main-nav {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: center;
}

.nav-list {
    display: flex;
    align-items: center;
    gap: 40px;
}

.nav-link {
    position: relative;
    font-size: 1.15rem;
    letter-spacing: 0.03em;
    color: var(--color-text);
    padding: 6px 0;
    transition: color 0.45s ease;
}

/* Soulignement animé au survol */
.nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 1.5px;
    background-color: var(--color-accent);
    transition: width 0.25s ease;
}

.nav-link:hover::after,
.nav-link.active::after {
    width: 100%;
}

.nav-link.active {
    font-style: italic;
}

/* Rubrique pas encore disponible : ne mène nulle part */
.nav-link--soon {
    color: var(--color-muted);
    cursor: default;
}
.nav-link--soon:hover::after {
    width: 0;
}

/* ---------- Panier + réseaux sociaux (droite) ---------- */
.header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 24px;
    flex-shrink: 0;
}

/* --- Panier --- */
.cart-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid var(--color-line);
    background: #ffffff;
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.15s ease;
}

.cart-btn:hover {
    border-color: var(--color-accent);
    background-color: #f7f7f7;
    transform: translateY(-1px);
}

.cart-btn svg {
    width: 21px;
    height: 21px;
    fill: var(--color-text);
    transition: fill 0.45s ease;
}

/* Pastille du nombre d'articles */
.cart-count {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    border-radius: 60px;
    background: var(--color-accent);
    color: #ffffff;
    font-size: 0.7rem;
    line-height: 19px;
    text-align: center;
    box-sizing: border-box;
}

.cart-count[hidden] {
    display: none;
}

/* --- Réseaux sociaux de l'en-tête --- */
.header-socials {
    display: flex;
    align-items: center;
    gap: 16px;
}

.header-socials .social svg {
    width: 18px;
    height: 18px;
    fill: var(--color-text);
    opacity: 0.75;
    transition: fill 0.45s ease, opacity 0.25s ease;
}

.header-socials .social:hover svg {
    opacity: 1;
}

/* ---------- Bouton menu mobile (caché sur desktop) ---------- */
.menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 28px;
    height: 20px;
    background: transparent;
    border: none;
    cursor: pointer;
}

.menu-toggle span {
    display: block;
    width: 100%;
    height: 2px;
    background-color: var(--color-text);
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Animation croix quand ouvert */
.menu-toggle.open span:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
}
.menu-toggle.open span:nth-child(2) {
    opacity: 0;
}
.menu-toggle.open span:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
}

/* Panier actif (page panier) */
.cart-btn.active {
    border-color: var(--color-accent);
    background-color: #f2f2f2;
}

/* ============================================================
   EN-TÊTE FLOTTANT (pages qui commencent par un visuel sombre)
   ------------------------------------------------------------
   Sur ces pages, l'en-tête se pose PAR-DESSUS l'image ou la
   vidéo de couverture : aucun fond, logo blanc, menu blanc.
   Dès que la page défile de quelques dizaines de pixels, la
   classe .scrolled est ajoutée par js/main.js : le fond blanc
   revient et tout redevient noir.
   La mise en page ne bouge pas : même hauteur d'en-tête, même
   taille de logo, mêmes réseaux sociaux et même panier.
   ============================================================ */
.site-header--overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color: #ffffff;
    border-bottom-color: var(--color-line);
    transition: background-color 0.45s ease, border-color 0.45s ease;
}

/* --- État transparent : en haut de page, menu fermé --- */
.site-header--overlay.at-top:not(.nav-open) {
    background-color: transparent;
    border-bottom-color: transparent;
}

/* Léger voile sombre pour que le blanc reste lisible même
   si l'image de couverture est claire à cet endroit. */
.site-header--overlay.at-top:not(.nav-open)::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.42), rgba(0, 0, 0, 0));
    pointer-events: none;
}
.site-header--overlay .header-inner {
    z-index: 1;
}

/* --- Logo : deux fichiers superposés qui se croisent en fondu --- */
.site-header--overlay .logo {
    position: relative;
}
.site-header--overlay .logo-img {
    transition: opacity 0.45s ease;
}
.logo-img--clair {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    opacity: 0;
    pointer-events: none;
}
.site-header--overlay.at-top:not(.nav-open) .logo-img--sombre {
    opacity: 0;
}
.site-header--overlay.at-top:not(.nav-open) .logo-img--clair {
    opacity: 1;
}

/* Sur une couverture claire (coucher de soleil, neige...), une ombre
   très douce garde le blanc lisible sans l'alourdir. */
.site-header--overlay.at-top:not(.nav-open) .logo-img--clair,
.site-header--overlay.at-top:not(.nav-open) .header-socials .social svg,
.site-header--overlay.at-top:not(.nav-open) .cart-btn svg {
    filter: drop-shadow(0 1px 6px rgba(0, 0, 0, 0.55));
}

/* --- Titres du menu --- */
.site-header--overlay.at-top:not(.nav-open) .nav-link {
    color: #ffffff;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55);
}
.site-header--overlay.at-top:not(.nav-open) .nav-link::after {
    background-color: #ffffff;
}
.site-header--overlay.at-top:not(.nav-open) .nav-link--soon {
    color: rgba(255, 255, 255, 0.6);
}

/* --- Réseaux sociaux --- */
.site-header--overlay.at-top:not(.nav-open) .header-socials .social svg {
    fill: #ffffff;
    opacity: 0.85;
}
.site-header--overlay.at-top:not(.nav-open) .header-socials .social:hover svg {
    opacity: 1;
}

/* --- Panier --- */
.site-header--overlay.at-top:not(.nav-open) .cart-btn {
    background-color: transparent;
    border-color: rgba(255, 255, 255, 0.45);
}
.site-header--overlay.at-top:not(.nav-open) .cart-btn:hover {
    background-color: rgba(255, 255, 255, 0.16);
    border-color: #ffffff;
}
.site-header--overlay.at-top:not(.nav-open) .cart-btn svg {
    fill: #ffffff;
}
.site-header--overlay.at-top:not(.nav-open) .cart-count {
    background-color: #ffffff;
    color: #111111;
}

/* --- Bouton menu mobile --- */
.site-header--overlay.at-top:not(.nav-open) .menu-toggle span {
    background-color: #ffffff;
}

/* --- Le visuel de couverture passe SOUS l'en-tête ---
   L'en-tête n'occupe plus de place dans la page : on redonne
   aux bandeaux la hauteur qu'il recouvre, pour que leur titre
   reste centré comme avant. */
.site-header--overlay + main .ed-hero,
.site-header--overlay + main .fi-cta--head {
    padding-top: calc(var(--header-height) + 90px);
}

/* ============================================================
   HERO VIDÉO (accueil)
   ============================================================ */
.hero {
    /* Pleine largeur de l'écran, format cinéma 16:9 */
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-media {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-color: #0a0a0a;
}

.hero-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
}

/* Bouton son du hero (en bas à droite) */
.hero-sound {
    position: absolute;
    right: 24px;
    bottom: 24px;
    z-index: 2;
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.35);
    color: #ffffff;
    cursor: pointer;
    backdrop-filter: blur(4px);
    transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.hero-sound:hover {
    background: rgba(0, 0, 0, 0.6);
    border-color: rgba(255, 255, 255, 0.75);
    transform: scale(1.06);
}

.hero-sound svg {
    width: 22px;
    height: 22px;
    fill: currentColor;
}

/* Par défaut (muet) : on montre l'icône « muet », on cache l'icône « son » */
.hero-sound .icon-sound { display: none; }
.hero-sound .icon-muted { display: block; }

/* Son activé */
.hero-sound.is-on .icon-sound { display: block; }
.hero-sound.is-on .icon-muted { display: none; }

.hero-content {
    position: relative;
    z-index: 1;
    text-align: center;
    color: #ffffff;
    padding: 0 24px;
}

.hero-title {
    font-size: clamp(2.8rem, 8vw, 6.5rem);
    font-weight: normal;
    letter-spacing: 0.04em;
    line-height: 1.05;
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45);
}

.hero-slogan {
    margin-top: 18px;
    font-style: italic;
    font-size: clamp(1rem, 2.2vw, 1.5rem);
    letter-spacing: 0.03em;
    color: rgba(255, 255, 255, 0.92);
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);
}

/* ============================================================
   PÔLES / ACTIVITÉS (bandes par étages, alternées)
   ============================================================ */
.stages-section {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 96px 32px 120px;
}

.section-eyebrow {
    text-align: center;
    font-size: 0.9rem;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: var(--color-muted);
    margin-bottom: 64px;
}

.stages {
    display: flex;
    flex-direction: column;
    gap: 100px;
}

/* Un étage = image d'un côté, texte de l'autre */
.stage {
    display: grid;
    grid-template-columns: 1.08fr 1fr;
    align-items: center;
    gap: 60px;
}

/* Alternance : sur les étages pairs, l'image passe à droite */
.stage:not(.stage--edition) {
    grid-template-rows: auto 1fr;
    row-gap: 0;
    column-gap: 60px;
    grid-template-areas:
        "media head"
        "media body";
}
.stage:not(.stage--edition):nth-child(even) {
    grid-template-areas:
        "head media"
        "body media";
}
.stage:not(.stage--edition) .stage-head  { grid-area: head; max-width: 540px; }
.stage:not(.stage--edition) .stage-media { grid-area: media; }
.stage:not(.stage--edition) .stage-body  { grid-area: body; }

/* Étage Éditions : titre en bandeau pleine largeur, corps calé en haut à droite */
.stage--edition {
    grid-template-columns: 1.08fr 1fr;
    grid-template-areas:
        "head head"
        "media body";
    align-items: start;
    column-gap: 60px;
    row-gap: 30px;
}
.stage--edition .stage-head { grid-area: head; }
.stage--edition .stage-media { grid-area: media; }
.stage--edition .stage-body { grid-area: body; }
.stage--edition .stage-head {
    margin-bottom: 6px;
}
.stage--edition .stage-title {
    white-space: nowrap;
    margin-bottom: 0;
}
.stage--edition .stage-body {
    max-width: none;
}
.stage--edition .stage-media {
    align-self: stretch;
    aspect-ratio: auto;
    min-height: 100%;
}

/* ---- Image ---- */
.stage-media {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 10px;
    background-color: #0d0d0d;
    background-size: cover;
    background-position: center;
    transition: transform 0.55s ease, box-shadow 0.55s ease;
}
.stage-media:hover {
    transform: translateY(-5px);
    box-shadow: 0 28px 55px rgba(0, 0, 0, 0.20);
}
.stage-media-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,0.22) 100%);
    transition: background 0.4s ease;
}
.stage-media:hover .stage-media-overlay {
    background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,0.30) 100%);
}

/* ---- Texte ---- */
.stage-body {
    max-width: 540px;
}

.stage-index {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-size: 0.82rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--color-muted);
    margin-bottom: 20px;
}
.stage-index::before {
    content: "";
    width: 42px;
    height: 1px;
    background: var(--color-text);
}

.stage-title {
    font-size: clamp(2rem, 3.2vw, 3.1rem);
    font-weight: normal;
    letter-spacing: 0.01em;
    line-height: 1.06;
    margin-bottom: 22px;
}

.stage-desc {
    font-size: 1.12rem;
    line-height: 1.65;
    color: #333333;
    margin-bottom: 30px;
}

/* ---- Mini-galerie ---- */
.stage-thumbs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 34px;
}
.stage-thumb {
    aspect-ratio: 1 / 1;
    border-radius: 6px;
    background-color: #0d0d0d;
    background-size: cover;
    background-position: center;
    filter: grayscale(1);
    transition: transform 0.35s ease, filter 0.35s ease;
}
.stage-thumb:hover {
    transform: scale(1.05);
    filter: grayscale(0);
}

/* ---- Tuiles collections (Heartless / White Death) ---- */
.stage-collections {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin-bottom: 34px;
}
.stage-col {
    position: relative;
    display: flex;
    align-items: flex-end;
    aspect-ratio: 3 / 4;
    border-radius: 6px;
    overflow: hidden;
    background-color: #0d0d0d;
    background-size: cover;
    background-position: center top;
    filter: grayscale(1);
    transition: transform 0.4s ease, filter 0.4s ease;
}
.stage-col:hover {
    transform: translateY(-4px);
    filter: grayscale(0);
}
/* Couverture toujours en couleur (ex. Heartless) */
.stage-col--color {
    filter: grayscale(0);
}
/* Tuile White Death : pas d'image encore, ambiance sombre et mystérieuse */
.stage-col--wd {
    background-image:
        radial-gradient(120% 90% at 50% -10%, rgba(255, 255, 255, 0.16), transparent 60%),
        linear-gradient(180deg, #141414 0%, #000 100%);
}
.stage-col-veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 35%, rgba(0, 0, 0, 0.85) 100%);
}
.stage-col-label {
    position: relative;
    z-index: 1;
    padding: 16px;
    color: #fff;
    font-size: 1.25rem;
    letter-spacing: 0.02em;
    line-height: 1.2;
}
.stage-col-label em {
    display: block;
    margin-bottom: 4px;
    font-style: italic;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    opacity: 0.7;
}

/* ---- Lien ---- */
.stage-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-style: italic;
    font-size: 1.12rem;
    letter-spacing: 0.01em;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--color-text);
    transition: gap 0.25s ease, opacity 0.25s ease;
}
.stage-link::after {
    content: "→";
    font-style: normal;
    transition: transform 0.25s ease;
}
.stage-link:hover {
    gap: 16px;
}
.stage-link:hover::after {
    transform: translateX(4px);
}
.stage-link--soon {
    color: var(--color-muted);
    border-bottom-color: var(--color-line);
    cursor: default;
}
.stage-link--soon:hover {
    gap: 10px;
}

/* ============================================================
   BANDEAU CITATION (full-width, court)
   ============================================================ */
.quote-band {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 100px 32px;
    color: #ffffff;
    background-color: #0b0b0b;
    background-image: var(--quote-img);
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* léger effet parallax sur desktop */
    overflow: hidden;
}

.quote-band-overlay {
    position: absolute;
    inset: 0;
    background: rgba(6, 6, 6, 0.68);
}

.quote-band-text {
    position: relative;
    z-index: 1;
    max-width: 1150px;
    font-size: clamp(1.55rem, 3.1vw, 2.6rem);
    font-style: italic;
    line-height: 1.5;
    letter-spacing: 0.01em;
}

/* Dernière phrase gardée sur une seule ligne (desktop) */
.q-last {
    white-space: nowrap;
}

.quote-band-sign {
    position: relative;
    z-index: 1;
    margin-top: 26px;
    font-size: 0.9rem;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.72);
}

/* ============================================================
   SÉLECTION DE RÉALISATIONS (galerie mosaïque)
   ============================================================ */
.gallery-section {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 100px 32px 120px;
}

.section-heading {
    text-align: center;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: normal;
    letter-spacing: 0.02em;
    margin-bottom: 48px;
}

.gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 230px;
    gap: 14px;
}

.g-item {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    background-color: #0d0d0d;
    background-image: var(--g-img);
    background-size: cover;
    background-position: center;
    transition: background-size 0.45s ease;
    will-change: background-size;
}

.g-item:hover {
    background-size: 106%;
}

/* Cadre réalisation contenant une vidéo */
.g-media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.g-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0);
    transition: background 0.35s ease;
}

.g-item:hover .g-overlay {
    background: rgba(0, 0, 0, 0.18);
}

/* Disposition mosaïque (rythme éditorial, tuiles horizontales uniquement) */
.g-1 { grid-column: span 2; grid-row: span 1; }  /* vedette, large */

.gallery-cta {
    text-align: center;
    margin-top: 48px;
}

/* ============================================================
   ILS NOUS ONT FAIT CONFIANCE (accueil)
   ------------------------------------------------------------
   Une rangée de logos partenaires. Chaque logo a sa propre
   hauteur (--h, posée dans le HTML) : à hauteur égale, une
   signature fine et un logo carré n'ont pas du tout le même
   poids à l'oeil. C'est ce réglage-là qui les fait paraître
   de la même taille.
   ============================================================ */
.confiance {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 100px 32px 120px;
}

.confiance-titre {
    /* Le titre tient sur une seule ligne, jusque sur un téléphone :
       la taille suit la largeur de l'écran (4.8vw) au lieu de
       s'arrêter à un plancher qui ferait déborder la phrase. */
    font-size: clamp(0.95rem, 4.4vw, 2.6rem);
    white-space: nowrap;
    margin-bottom: 56px;
}

.confiance-grille {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 56px 40px;
    align-items: center;
}

.confiance-item {
    display: flex;
    justify-content: center;
}

.confiance-lien {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 100px;
    padding: 8px;
}

.confiance-logo {
    display: block;
    height: var(--h, 60px);
    width: auto;
    max-width: 100%;
    object-fit: contain;
    /* Aucun voile, aucun mouvement : les logos des partenaires
       s'affichent à leur densité pleine, comme leur marque les
       a dessinés. Le curseur suffit à dire que c'est cliquable. */
}

@media (max-width: 900px) {
    .confiance {
        padding: 72px 24px 88px;
    }

    .confiance-grille {
        grid-template-columns: repeat(2, 1fr);
        gap: 44px 28px;
    }

    .confiance-logo {
        /* Sur écran étroit, on réduit chaque logo dans les mêmes
           proportions plutôt que de casser l'équilibre. */
        height: calc(var(--h, 60px) * 0.82);
    }
}

@media (max-width: 520px) {
    .confiance-titre {
        margin-bottom: 40px;
    }

    .confiance-grille {
        gap: 36px 20px;
    }

    .confiance-lien {
        min-height: 80px;
    }

    .confiance-logo {
        height: calc(var(--h, 60px) * 0.7);
    }
}

.ghost-btn {
    display: inline-block;
    font-size: 1.1rem;
    letter-spacing: 0.03em;
    color: var(--color-text);
    border: 1px solid var(--color-text);
    padding: 13px 34px;
    border-radius: 2px;
    transition: all 0.25s ease;
}

.ghost-btn:hover {
    background-color: var(--color-text);
    color: #ffffff;
}

/* ============================================================
   PAGE CONNEXION / INSCRIPTION
   ============================================================ */
.auth-page {
    min-height: calc(100vh - var(--header-height));
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    background-color: #fafafa;
}

.auth-card {
    width: 100%;
    max-width: 420px;
    background: #ffffff;
    border: 1px solid var(--color-line);
    border-radius: 6px;
    padding: 44px 40px;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.05);
}

.auth-title {
    font-size: 2rem;
    font-weight: normal;
    text-align: center;
    margin-bottom: 6px;
}

.auth-subtitle {
    text-align: center;
    color: var(--color-muted);
    font-size: 1.05rem;
    margin-bottom: 32px;
}

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

.field {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.field-label {
    font-size: 0.95rem;
    color: var(--color-text);
    letter-spacing: 0.02em;
}

.field input {
    font-family: var(--font-main);
    font-size: 1.05rem;
    padding: 11px 14px;
    border: 1px solid var(--color-line);
    border-radius: 4px;
    background: #ffffff;
    transition: border-color 0.2s ease;
}

.field input:focus {
    outline: none;
    border-color: var(--color-accent);
}

.auth-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.95rem;
}

.remember {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--color-muted);
    cursor: pointer;
}

.link-muted {
    color: var(--color-muted);
    transition: color 0.2s ease;
}

.link-muted:hover {
    color: var(--color-text);
}

.auth-submit {
    font-family: var(--font-main);
    font-size: 1.15rem;
    letter-spacing: 0.02em;
    color: #ffffff;
    background-color: var(--color-accent);
    border: 1px solid var(--color-accent);
    padding: 13px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: 4px;
}

.auth-submit:hover {
    background-color: #ffffff;
    color: var(--color-accent);
}

.auth-switch {
    text-align: center;
    margin-top: 28px;
    color: var(--color-muted);
    font-size: 1rem;
}

.link-strong {
    color: var(--color-text);
    font-style: italic;
    border-bottom: 1px solid var(--color-text);
    padding-bottom: 1px;
}

.auth-submit:disabled {
    opacity: 0.55;
    cursor: default;
}

/* ---------- Messages de formulaire ---------- */
.auth-message {
    margin-top: 18px;
    font-size: 1rem;
    line-height: 1.6;
    text-align: center;
}
.auth-message:empty { display: none; }
.auth-message.ok  { color: #2c7a4b; }
.auth-message.err { color: #b3261e; }

/* ---------- Espace client ---------- */
.compte-page {
    max-width: 900px;
    margin: 0 auto;
    padding: 90px 24px 120px;
}

.compte-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    padding-bottom: 26px;
    border-bottom: 1px solid var(--color-line);
    margin-bottom: 56px;
}
.compte-head h1 {
    font-size: clamp(2.2rem, 4vw, 3.1rem);
    font-weight: normal;
    font-style: italic;
    line-height: 1.1;
}
.compte-mail {
    margin-top: 10px;
    color: var(--color-muted);
    font-size: 1.05rem;
}

.compte-logout {
    font-family: var(--font-main);
    font-size: 0.8rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--color-text);
    background: none;
    border: 1px solid var(--color-line);
    border-radius: 60px;
    padding: 13px 30px;
    cursor: pointer;
    transition: all 0.25s ease;
}
.compte-logout:hover {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #ffffff;
}

.compte-section + .compte-section { margin-top: 64px; }
.compte-section h2 {
    font-size: 0.82rem;
    font-weight: normal;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #8f8f8f;
    margin-bottom: 26px;
}

.compte-empty {
    font-style: italic;
    color: var(--color-muted);
    font-size: 1.1rem;
}

/* Liste des commandes */
.commande {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    padding: 22px 2px;
    border-bottom: 1px solid var(--color-line);
}
.commande:first-of-type { border-top: 1px solid var(--color-line); }
.commande-date {
    font-size: 1.05rem;
    color: var(--color-text);
}
.commande-ref {
    font-size: 0.85rem;
    letter-spacing: 0.1em;
    color: #aaa;
}
.commande-total {
    font-size: 1.25rem;
    color: var(--color-text);
}

@media (max-width: 700px) {
    .compte-page { padding: 60px 20px 90px; }
    .compte-head { align-items: flex-start; }
    .compte-logout { width: 100%; }
}

/* ============================================================
   PIED DE PAGE
   ============================================================ */
.site-footer {
    background-color: #000000;
    color: #cfcfcf;
    padding: 84px 0 34px;
}

/* Variante « coucher de soleil » — page Casting uniquement.
   Le noir reste dessous, le temps que la photo se charge. */
.site-footer--ciel {
    background-size: cover;
    /* L'image est remontée : le soleil vient se caler en bas à droite
       du bandeau plutôt qu'au milieu. */
    background-position: center 85%;
    background-repeat: no-repeat;
    color: #ffffff;
}

/* Le ciel est lumineux : sans cela, le gris clair du pied de page
   disparaît dans les oranges. Plutôt que d'assombrir la photo, on
   cerne chaque lettre d'un liseré sombre — la photo reste intacte,
   seul le texte gagne du relief. */
.site-footer--ciel .footer-inner,
.site-footer--ciel .footer-bottom {
    text-shadow:
        0 0 1px rgba(0, 0, 0, 0.95),
        1px 0 1px rgba(0, 0, 0, 0.9),
        -1px 0 1px rgba(0, 0, 0, 0.9),
        0 1px 1px rgba(0, 0, 0, 0.9),
        0 -1px 1px rgba(0, 0, 0, 0.9),
        0 1px 4px rgba(0, 0, 0, 0.9),
        0 2px 16px rgba(0, 0, 0, 0.8);
}
/* Tout le texte passe au blanc franc : le gris clair d'origine se
   dissolvait dans les oranges du couchant. */
.site-footer--ciel .footer-heading,
.site-footer--ciel .footer-links a,
.site-footer--ciel .footer-tagline,
.site-footer--ciel .footer-baseline,
.site-footer--ciel .footer-bottom,
.site-footer--ciel .footer-copy,
.site-footer--ciel .footer-bottom-links a,
.site-footer--ciel .footer-bottom a { color: #ffffff; }
.site-footer--ciel .footer-links a:hover,
.site-footer--ciel .footer-bottom a:hover { color: #ffe9c9; }

/* Les pictogrammes des réseaux, eux aussi, ont besoin d'un contour. */
.site-footer--ciel .social svg { filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.85)); }

.footer-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 48px;
    display: grid;
    grid-template-columns: 1.7fr 1fr 1fr 1fr 1.3fr 1fr;
    gap: 40px;
    align-items: start;
}

/* ---------- Bloc marque ---------- */
.footer-brand {
    display: flex;
    flex-direction: column;
}

/* Conteneur qui épouse la largeur du logo (ne doit jamais être étiré par le flex du footer-brand) */
.footer-mark {
    display: inline-block;
    align-self: flex-start;
    margin-bottom: 20px;
}

.footer-logo {
    display: block;
    height: 160px;
    width: auto;
    object-fit: contain;
    margin-bottom: 12px;
}

/* La tagline se justifie pour occuper toute la largeur du logo */
.footer-tagline {
    width: 100%;
    font-size: 0.75rem;
    text-transform: uppercase;
    color: #e9e9e9;
    text-align: justify;
    text-align-last: justify;
}

.footer-baseline {
    font-style: italic;
    font-size: 1.05rem;
    color: #9a9a9a;
    margin-bottom: 26px;
}

.footer-socials {
    display: flex;
    align-items: center;
    gap: 18px;
}

.social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.social svg {
    width: 21px;
    height: 21px;
    fill: #ffffff;
    opacity: 0.9;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.social:hover svg {
    opacity: 1;
    transform: translateY(-2px);
}

/* ---------- Colonnes de liens ---------- */
.footer-heading {
    font-size: 0.82rem;
    font-weight: normal;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #8f8f8f;
    margin-bottom: 22px;
}

.footer-col ul {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.footer-col a {
    font-size: 1.05rem;
    color: #d2d2d2;
    transition: color 0.2s ease;
}

.footer-col a:hover {
    color: #ffffff;
}

/* ---------- Barre inférieure ---------- */
.footer-bottom {
    max-width: var(--max-width);
    margin: 56px auto 0;
    padding: 26px 24px 0 48px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.footer-copy {
    font-size: 0.92rem;
    color: #8a8a8a;
}

.footer-bottom-links {
    display: flex;
    gap: 34px;
}

.footer-bottom-links a {
    font-size: 0.92rem;
    color: #a5a5a5;
    transition: color 0.2s ease;
}

.footer-bottom-links a:hover {
    color: #ffffff;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* Échelle typographique globale : tout ce qui est en rem (titres, textes,
   boutons...) rétrécit proportionnellement sur mobile, pour un rendu plus
   compact et mieux équilibré avec les visuels (vidéo, images en vw/%). */
@media (max-width: 700px) {
    html { font-size: 15px; }
}
@media (max-width: 480px) {
    html { font-size: 13.5px; }
}

@media (max-width: 980px) {
    .header-inner {
        padding: 0 20px;
    }

    .menu-toggle {
        display: flex;
    }

    /* Le conteneur devient un vrai panneau déroulant */
    .nav-collapse {
        display: none;
        position: absolute;
        top: var(--header-height);
        left: 0;
        right: 0;
        flex-direction: column;
        gap: 24px;
        background-color: #ffffff;
        border-bottom: 1px solid var(--color-line);
        padding: 28px 24px 36px;
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.06);
    }

    .site-header.nav-open .nav-collapse {
        display: flex;
    }

    /* Reset du centrage absolu : la nav redevient un bloc normal */
    .main-nav {
        position: static;
        transform: none;
        justify-content: center;
        width: 100%;
    }

    .nav-list {
        flex-direction: column;
        align-items: center;
        gap: 22px;
        width: 100%;
    }

    .nav-link {
        font-size: 1.3rem;
    }

    .header-actions {
        justify-content: center;
        flex-wrap: wrap;
        gap: 20px;
    }

    .cart-btn {
        width: 54px;
        height: 54px;
    }

    .cart-btn svg {
        width: 24px;
        height: 24px;
    }

    .header-socials {
        gap: 20px;
    }

    .header-socials .social svg {
        width: 21px;
        height: 21px;
    }

    .stages-section {
        padding: 64px 20px 80px;
    }

    .section-eyebrow {
        margin-bottom: 44px;
    }

    .stages {
        gap: 64px;
    }

    .stage {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    /* Ordre mobile identique pour tous les étages : index + titre, puis image,
       puis description, puis photos, puis bouton (mêmes zones que Éditions). */
    .stage:not(.stage--edition),
    .stage:not(.stage--edition):nth-child(even) {
        grid-template-areas:
            "head"
            "media"
            "body";
        row-gap: 28px;
    }

    /* Éditions : on réempile en une colonne, titre libéré du nowrap */
    .stage--edition {
        grid-template-columns: 1fr;
        grid-template-areas:
            "head"
            "media"
            "body";
        row-gap: 28px;
    }
    .stage--edition .stage-title {
        white-space: normal;
    }

    .stage-media {
        aspect-ratio: 16 / 10;
    }

    .stage--edition .stage-media {
        aspect-ratio: 16 / 10;
        align-self: auto;
        min-height: 0;
    }

    .stage-body {
        max-width: none;
    }

    .quote-band {
        padding: 68px 24px;
        background-attachment: scroll;
    }

    .q-last {
        white-space: normal;
    }

    /* Footer : marque en pleine largeur + colonnes sur 2 rangées */
    .footer-inner {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 34px 28px;
        padding: 0 28px;
    }

    .footer-brand {
        grid-column: 1 / -1;
        margin-bottom: 12px;
    }

    .footer-bottom {
        padding: 26px 28px 0;
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }

    /* Galerie : 2 colonnes, mosaïque simplifiée */
    .gallery-section {
        padding: 68px 20px 80px;
    }

    .gallery {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 180px;
        gap: 12px;
    }

    .g-1 { grid-column: span 2; grid-row: span 1; }
}

@media (max-width: 560px) {
    .gallery {
        gap: 8px;
        grid-auto-rows: 140px;
    }

    .footer-inner {
        grid-template-columns: 1fr 1fr;
    }
}

/* Sur téléphone, les 84 px de vide au-dessus du logo laissaient le
   pied de page flotter trop bas dans le ciel. Le texte remonte
   légèrement pour se caler dans le bandeau. */
@media (max-width: 700px) {
    .site-footer {
        padding-top: 52px;
    }

    .footer-bottom {
        margin-top: 36px;
    }
}

/* ============================================================
   ÉDITIONS — Bandeau d'en-tête (hero)
   ============================================================ */
.ed-hero {
    position: relative;
    min-height: 470px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 90px 24px;
    background-color: #0b0b16;
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

.ed-hero-title,
.ed-hero-sub {
    position: relative;
    z-index: 1;
    color: #f4f1fb;
}

.ed-hero-title {
    /* Identique au titre de l'accueil (.hero-title) */
    font-size: clamp(2.8rem, 8vw, 6.5rem);
    font-weight: normal;
    letter-spacing: 0.04em;
    line-height: 1.05;
    text-shadow: 0 2px 34px rgba(0, 0, 0, 0.55);
}

.ed-hero-sub {
    margin-top: 18px;
    font-size: clamp(1rem, 2.2vw, 1.5rem);
    font-style: italic;
    letter-spacing: 0.03em;
    color: rgba(244, 241, 251, 0.92);
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.5);
}

@media (max-width: 700px) {
    .ed-hero { min-height: 340px; padding: 60px 20px; }
}

/* Bandeau Éditions sur téléphone : centré, le titre tombait trop bas
   dans le ciel. Il se cale désormais sous l'en-tête. */
@media (max-width: 700px) {
    .ed-hero--editions {
        justify-content: flex-start;
    }

    .site-header--overlay + main .ed-hero--editions {
        padding-top: calc(var(--header-height) + 40px);
    }
}

/* Variante haute : la même hauteur que le bandeau d'À Demi Maux,
   une part de l'écran plutôt qu'un nombre de pixels fixe. */
.ed-hero--haut { min-height: 74svh; }
@media (max-width: 700px) {
    .ed-hero--haut { min-height: 74svh; }
}

/* Variante Films : le titre est déjà gravé dans l'image du bandeau.
   Le cadrage descend l'image pour centrer le panneau « Barghach Pictures ». */
.ed-hero--films {
    justify-content: flex-end;
    background-position: center 62%;
}

.ed-hero--films .ed-hero-sub {
    margin-top: 0;
}

/* Variante vidéo : un film en boucle derrière le titre, légèrement assombri.
   La vidéo reste fixe (ancrée à l'écran) tant que ce bloc défile, puis disparaît
   une fois le bloc dépassé — le transform sur le conteneur le rend "clippant"
   pour ses enfants position:fixed (même principe que le fond fixe de la page
   À Demi Maux, adapté ici à une vidéo confinée à son propre bloc). */
.ed-hero--video {
    position: relative;
    overflow: hidden;
    transform: translateZ(0);
    /* Exactement la hauteur du bandeau d'À Demi Maux : une part de
       l'écran plutôt qu'un nombre de pixels fixe, pour que les deux
       pages ouvrent sur la même image quelle que soit la taille. */
    min-height: 74svh;
}
.ed-hero-video {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.ed-hero-video-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.38);
}
/* Pas d'exception sur mobile : 74svh vaut aussi pour les petits
   écrans, comme sur À Demi Maux. */

/* Masqué visuellement, lisible par les lecteurs d'écran */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ============================================================
   FILMS — Sections de la page
   ============================================================ */
.fi-section {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 90px 32px 20px;
}
.fi-section--branches {
    padding-top: 100px;
    scroll-margin-top: var(--header-height);
}

/* --- En-tête de section --- */
.fi-head {
    text-align: center;
    margin: 0 auto 64px;
}
.fi-index {
    display: block;
    font-size: 0.78rem;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: var(--color-muted);
    margin-bottom: 16px;
}
.fi-title {
    font-size: clamp(2.4rem, 5vw, 3.9rem);
    font-weight: normal;
    font-style: italic;
    color: var(--color-text);
    line-height: 1.05;
}
.fi-note {
    margin-top: 14px;
    font-size: 0.95rem;
    color: var(--color-muted);
}
.fi-head::after {
    content: "";
    display: block;
    width: 64px;
    height: 2px;
    background: var(--color-text);
    opacity: 0.5;
    margin: 28px auto 0;
}

/* --- Affiches de films (format vertical 2:3, comme au cinéma) --- */
.fi-posters {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 34px;
}
.fi-poster-media {
    display: block;
    position: relative;
    aspect-ratio: 2 / 3;
    background-color: #111111;
    background-size: cover;
    background-position: center;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 22px 50px rgba(0, 0, 0, 0.22);
    transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1),
                box-shadow 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* L'affiche se soulève légèrement, comme un cadre éclairé
   qu'on décolle du mur dans un hall de cinéma. */
.fi-poster-media:hover {
    transform: translateY(-10px) scale(1.014);
    box-shadow: 0 34px 70px -18px rgba(0, 0, 0, 0.55);
}

/* Calque de l'image, séparé du cadre : lui seul zoome, le cadre
   ne bouge pas, donc l'image ne déborde jamais des coins arrondis. */
.fi-poster-media::before {
    content: "";
    position: absolute;
    inset: 0;
    background: inherit;
    background-size: cover;
    background-position: center;
    transition: transform 1.1s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.fi-poster-media:hover::before { transform: scale(1.05); }

/* Balayage de lumière qui traverse l'affiche au survol. */
.fi-poster-media::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background: linear-gradient(105deg,
        transparent 38%,
        rgba(255, 255, 255, 0.16) 50%,
        transparent 62%);
    transform: translateX(-110%);
    transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.fi-poster-media:hover::after { transform: translateX(110%); }

.fi-poster-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0) 45%);
    opacity: 0;
    transition: opacity 0.4s ease;
}
.fi-poster-media:hover .fi-poster-overlay { opacity: 1; }

.fi-poster-title {
    margin-top: 20px;
    font-size: 1.25rem;
    font-weight: normal;
    font-style: italic;
    color: var(--color-text);
}
.fi-poster-meta {
    margin-top: 6px;
    font-size: 0.8rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-muted);
}

/* --- Affiche « annonce à venir » -----------------------------
   Quand un film n'a pas encore d'affiche, on ne met pas une
   image bouche-trou : on dessine un vrai carton, avec les deux
   bandes perforées d'une amorce de pellicule et le logo en
   filigrane. Même cadre, même ombre et même survol que les
   vraies affiches — seul l'intérieur change. */
.fi-poster-media--soon {
    display: grid;
    place-content: center;
    text-align: center;
    padding: 30px 22px;
    background:
        repeating-linear-gradient(to bottom,
            rgba(255, 255, 255, 0.10) 0 12px,
            transparent 12px 26px) left / 13px 100% no-repeat,
        repeating-linear-gradient(to bottom,
            rgba(255, 255, 255, 0.10) 0 12px,
            transparent 12px 26px) right / 13px 100% no-repeat,
        linear-gradient(160deg, #17171b 0%, #0d0d10 100%);
    border: 1px dashed rgba(255, 255, 255, 0.18);
    transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}
.fi-poster-media--soon::before { content: none; }
.fi-poster-media--soon:hover {
    border-color: rgba(255, 255, 255, 0.34);
}

/* Le texte et le logo passent au-dessus du balayage de lumière. */
.fi-soon-logo,
.fi-soon-brand,
.fi-soon-note {
    position: relative;
    z-index: 2;
}

/* Étiquette d'état, en haut à gauche */
.fi-soon-tag {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
    padding: 6px 11px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 2px;
    background: rgba(10, 10, 12, 0.72);
    font-size: 0.68rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.9);
    white-space: nowrap;
}

/* Logo en filigrane au centre */
.fi-soon-logo {
    display: block;
    width: 78px;
    height: auto;
    margin: 0 auto 20px;
    opacity: 0.3;
    transition: opacity 0.4s ease;
}
.fi-poster-media--soon:hover .fi-soon-logo {
    opacity: 0.42;
}

.fi-soon-brand {
    display: block;
    font-size: 0.68rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.62);
}

.fi-soon-note {
    display: block;
    margin-top: 12px;
    font-size: 1.3rem;
    font-style: italic;
    line-height: 1.2;
    color: rgba(255, 255, 255, 0.92);
}

/* --- Production / Distribution : grandes lignes alternées --- */
.fi-rows {
    display: flex;
    flex-direction: column;
    gap: 90px;
}
.fi-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}
/* Ligne inversée : texte à gauche, image à droite */
.fi-row.reverse .fi-row-visual { order: 2; }
.fi-row.reverse .fi-row-text   { order: 1; }

.fi-row-visual {
    position: relative;
    display: block;
    aspect-ratio: 16 / 10;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 25px 55px rgba(0, 0, 0, 0.25);
}
.fi-row-visual img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.fi-row-visual:hover img { transform: scale(1.08); }
.fi-row-visual::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.12);
    transition: background 0.5s ease;
}
.fi-row-visual:hover::after { background: rgba(0, 0, 0, 0); }

.fi-row-num {
    display: block;
    font-size: 0.78rem;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: var(--color-muted);
    margin-bottom: 18px;
}
.fi-row-title {
    font-size: clamp(2rem, 3.4vw, 2.9rem);
    font-weight: normal;
    font-style: italic;
    color: var(--color-text);
    line-height: 1.1;
    margin-bottom: 20px;
}
.fi-row-desc {
    font-size: 1.12rem;
    line-height: 1.7;
    color: var(--color-muted);
    max-width: 480px;
    margin-bottom: 28px;
}
/* Petite liste de prestations, pour donner du corps au bloc */
.fi-row-list {
    list-style: none;
    margin: 0 0 34px;
    padding: 0;
    border-top: 1px solid var(--color-line);
    max-width: 480px;
}
.fi-row-list li {
    padding: 13px 0 13px 26px;
    position: relative;
    border-bottom: 1px solid var(--color-line);
    font-size: 0.98rem;
    color: var(--color-text);
}
.fi-row-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 12px;
    height: 1px;
    background: var(--color-text);
    opacity: 0.45;
}

/* --- Appel : se faire distribuer --- */
.fi-cta {
    margin-top: 110px;
    padding: 110px 32px;
    background: #0b0b0b;
    text-align: center;
}
.fi-cta-inner {
    max-width: 760px;
    margin: 0 auto;
}
.fi-cta-tag {
    display: block;
    font-size: 0.78rem;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 20px;
}
.fi-cta-title {
    font-size: clamp(2.2rem, 4.6vw, 3.4rem);
    font-weight: normal;
    font-style: italic;
    color: #ffffff;
    line-height: 1.1;
}
.fi-cta-desc {
    margin: 22px auto 38px;
    font-size: 1.1rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.72);
    max-width: 560px;
}
.fi-cta .ed-book-btn {
    color: #ffffff;
    border-bottom-color: #ffffff;
}

/* Bandeau citation : même habillage noir que l'appel, mais sans bouton */
.fi-cta--quote {
    margin-top: 100px;
    padding: 110px 20px;
}

/* Variante « ciel étoilé » : une photo remplace le fond noir. Les
   dimensions du bandeau ne bougent pas — seul le fond change. Le noir
   reste dessous, le temps que l'image se charge. */
.fi-cta--ciel {
    background-color: #0b0b0b;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
/* Le ciel s'éclaircit vers le bas : une ombre portée sous le texte
   suffit à le garder lisible, sans assombrir la photo. */
.fi-cta--ciel .fi-quote-text,
.fi-cta--ciel .fi-quote-sign,
.fi-cta--ciel .fi-cta-tag,
.fi-cta--ciel .fi-cta-title,
.fi-cta--ciel .fi-cta-desc {
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.75), 0 1px 4px rgba(0, 0, 0, 0.6);
}
/* La citation doit pouvoir occuper toute la largeur de l'écran */
.fi-cta--quote .fi-cta-inner { max-width: none; }
/* La citation tient sur une seule ligne : la taille suit la largeur
   de l'écran plutôt que de passer à la ligne. */
.fi-quote-text {
    font-size: clamp(0.6rem, 2.7vw, 2.4rem);
    font-style: italic;
    font-weight: normal;
    line-height: 1.4;
    color: #ffffff;
    white-space: nowrap;
}
.fi-quote-sign {
    margin-top: 30px;
    font-size: 0.8rem;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
}

/* Bandeau noir servant d'en-tête de page (Casting) */
.fi-cta--head {
    margin-top: 0;
}

/* ============================================================
   CASTING — Postes & candidature
   ============================================================ */
/* ============================================================
   CASTING
   ------------------------------------------------------------
   Le ton d'une maison qui recrute : des colonnes, des filets,
   aucune esbroufe. On vient ici pour lire une annonce et
   déposer un dossier. L'accent est le noir de la maison —
   c'est la couleur du site, le rouge appartient aux mariages.
   ============================================================ */
.cs-section {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: clamp(70px, 8vw, 120px) 32px;
    scroll-margin-top: var(--header-height);
}
/* La section du milieu se détache du reste. Sur la refonte, le fond
   de page est crème et la section est blanche ; ici le fond de page
   est déjà blanc, alors on inverse : c'est la section qui prend un
   gris très clair. */
.cs-section--blanche {
    max-width: none;
    background: #f6f6f4;
    border-block: 1px solid var(--color-line);
}
.cs-section--blanche > * {
    max-width: var(--max-width);
    margin-left: auto;
    margin-right: auto;
}

/* --- En-tête de section : aligné à gauche, comme la refonte --- */
.cs-head { margin-bottom: clamp(30px, 3.5vw, 46px); }
.cs-index {
    display: block;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter,
                 "Helvetica Neue", Arial, sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--color-muted);
    margin-bottom: 18px;
}
.cs-titre {
    font-size: clamp(2.6rem, 6vw, 4.6rem);
    font-weight: normal;
    line-height: 1.02;
    color: var(--color-text);
}
.cs-titre--moyen { font-size: clamp(2rem, 3.6vw, 3rem); }
.cs-lead {
    margin-top: 22px;
    font-size: clamp(1.05rem, 1.5vw, 1.25rem);
    line-height: 1.8;
    color: var(--color-muted);
}
/* La seconde phrase tient sur une seule ligne : pas de largeur
   maximale qui la couperait, pas de retour à la ligne. */
.cs-lead-suite { white-space: nowrap; }
/* Sous 1024 px, tenir sur une ligne la rendrait illisible : on la
   laisse se répartir. */
@media (max-width: 1024px) {
    .cs-lead-suite { white-space: normal; }
    .cs-lead { max-width: 58ch; }
}

/* --- Filtres et tri --- */
.cs-filtres {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 26px;
}
.cs-filtres-poles { display: flex; flex-wrap: wrap; gap: 10px; }
.cs-filtre {
    background: none;
    border: 1px solid var(--color-line);
    border-radius: 2px;
    color: var(--color-muted);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter,
                 "Helvetica Neue", Arial, sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 12px 20px;
    cursor: pointer;
    transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.cs-filtre:hover { border-color: var(--color-text); color: var(--color-text); }
.cs-filtre.active {
    background: var(--color-text);
    border-color: var(--color-text);
    color: #ffffff;
}
.cs-tri {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter,
                 "Helvetica Neue", Arial, sans-serif;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-muted);
}
.cs-tri-label { letter-spacing: inherit; }
.cs-tri select {
    background: transparent;
    border: 1px solid var(--color-line);
    border-radius: 2px;
    padding: 9px 12px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter,
                 "Helvetica Neue", Arial, sans-serif;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-text);
    cursor: pointer;
}

/* --- Les annonces : un seul cadre, des lignes séparées d'un filet --- */
.cs-roles {
    display: grid;
    gap: 1px;
    background: var(--color-line);
    border: 1px solid var(--color-line);
}
.cs-role {
    background: #ffffff;
    padding: clamp(24px, 3vw, 40px);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 20px 34px;
    align-items: center;
    transition: background 0.4s ease;
}
.cs-role:hover { background: #fbfaf8; }
.cs-role-marqueurs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.cs-marqueur {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter,
                 "Helvetica Neue", Arial, sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 6px 11px;
    border-radius: 100px;
    background: rgba(17, 17, 17, 0.08);
    color: var(--color-text);
}
.cs-marqueur--sobre { background: rgba(17, 17, 17, 0.045); color: var(--color-muted); }
.cs-role-name {
    font-size: clamp(1.4rem, 2.2vw, 1.9rem);
    font-weight: normal;
    font-style: italic;
    line-height: 1.18;
    color: var(--color-text);
}
.cs-role-desc {
    margin-top: 12px;
    max-width: 62ch;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--color-muted);
}
.cs-role-link {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter,
                 "Helvetica Neue", Arial, sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 14px 26px;
    background: none;
    border: 1px solid var(--color-text);
    border-radius: 2px;
    color: var(--color-text);
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.3s ease, color 0.3s ease;
}
.cs-role-link:hover { background: var(--color-text); color: #ffffff; }

/* Aucune annonce, ou chargement en cours */
.cs-vide {
    background: #ffffff;
    padding: clamp(34px, 4vw, 58px);
    text-align: center;
    font-size: 1.15rem;
    line-height: 1.7;
    color: var(--color-muted);
}

/* --- Ce qui vous attend --- */
.cs-promesses {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: clamp(24px, 3vw, 44px);
}
.cs-promesse-marque {
    width: 30px;
    height: 2px;
    background: var(--color-text);
    margin-bottom: 20px;
}
.cs-promesse-titre {
    font-size: 1.45rem;
    font-weight: normal;
    line-height: 1.25;
    color: var(--color-text);
}
.cs-promesse-texte {
    margin-top: 12px;
    font-size: 1rem;
    line-height: 1.75;
    color: var(--color-muted);
}

/* --- Les trois étapes --- */
.cs-etapes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: clamp(22px, 3vw, 44px);
    margin-bottom: clamp(44px, 5vw, 70px);
}
.cs-etape { padding-top: 26px; border-top: 2px solid var(--color-text); }
.cs-etape-num {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter,
                 "Helvetica Neue", Arial, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--color-text);
}
.cs-etape-texte {
    margin-top: 14px;
    font-size: 1.15rem;
    line-height: 1.55;
    color: var(--color-muted);
}

/* --- Le formulaire --- */
.cs-form-zone {
    max-width: 880px;
    background: #ffffff;
    border: 1px solid var(--color-line);
    border-radius: 3px;
    padding: clamp(28px, 4vw, 58px);
}
.cs-form { display: flex; flex-direction: column; gap: 26px; }
.cs-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.cs-champ { display: flex; flex-direction: column; gap: 9px; }
.cs-etiquette {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter,
                 "Helvetica Neue", Arial, sans-serif;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-muted);
}
/* L'astérisque des champs obligatoires */
.cs-etiquette span { color: var(--color-text); }
.cs-form input,
.cs-form select,
.cs-form textarea {
    width: 100%;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--color-line);
    border-radius: 0;
    padding: 12px 2px;
    font-family: var(--font-main);
    font-size: 1.05rem;
    color: var(--color-text);
    transition: border-color 0.3s ease;
}
.cs-form textarea { resize: vertical; }
.cs-form input:focus,
.cs-form select:focus,
.cs-form textarea:focus {
    outline: none;
    border-bottom-color: var(--color-text);
}

/* Le dépôt du CV : une zone à cliquer, pas un bouton de système. */
.cs-fichier { position: relative; display: block; }
.cs-fichier input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}
.cs-fichier-zone {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px;
    border: 1px dashed var(--color-line);
    border-radius: 3px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter,
                 "Helvetica Neue", Arial, sans-serif;
    font-size: 13px;
    line-height: 1.6;
    color: var(--color-muted);
    transition: border-color 0.3s ease, background 0.3s ease;
}
.cs-fichier:hover .cs-fichier-zone {
    border-color: var(--color-text);
    background: rgba(17, 17, 17, 0.03);
}
.cs-fichier-zone b { font-weight: 600; color: var(--color-text); }

.cs-form .auth-submit {
    align-self: flex-start;
    background: var(--color-text);
    color: #ffffff;
    border: 1px solid var(--color-text);
    border-radius: 2px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter,
                 "Helvetica Neue", Arial, sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 17px 34px;
    cursor: pointer;
    transition: background 0.3s ease, color 0.3s ease;
}
.cs-form .auth-submit:hover { background: #ffffff; color: var(--color-text); }
.cs-form .auth-message { margin: 0; text-align: left; }

.cs-mention {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter,
                 "Helvetica Neue", Arial, sans-serif;
    font-size: 12px;
    line-height: 1.65;
    color: #9a9a9a;
}
.cs-mention a { border-bottom: 1px solid currentColor; }

@media (max-width: 700px) {
    .cs-role { grid-template-columns: 1fr; }
    .cs-duo { grid-template-columns: 1fr; }
    .cs-section { padding-left: 20px; padding-right: 20px; }
}

/* --- Sélection Instagram (respire entre l'appel et le pied de page) --- */
.fi-insta {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 100px 32px 120px;
}
.fi-insta-handle {
    color: var(--color-text);
    text-decoration: none;
    letter-spacing: 0.06em;
    border-bottom: 1px solid var(--color-line);
    padding-bottom: 3px;
    transition: border-color 0.3s ease;
}
.fi-insta-handle:hover { border-color: var(--color-text); }

.fi-insta-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}
.fi-insta-item {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    background-color: #111111;
    background-size: cover;
    background-position: center;
    overflow: hidden;
}
.fi-insta-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    transition: opacity 0.4s ease;
}
.fi-insta-item:hover .fi-insta-overlay { opacity: 1; }
.fi-insta-overlay svg {
    width: 30px;
    height: 30px;
    fill: #ffffff;
}

.fi-insta-foot {
    margin-top: 46px;
    text-align: center;
}

@media (max-width: 1000px) {
    .fi-posters { grid-template-columns: repeat(2, 1fr); }
    .fi-insta-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
    .fi-row,
    .fi-row.reverse {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .fi-row.reverse .fi-row-visual { order: 1; }
    .fi-row.reverse .fi-row-text   { order: 2; }
    .fi-rows { gap: 70px; }
}
@media (max-width: 560px) {
    .fi-section { padding: 60px 20px 10px; }
    .fi-posters { gap: 18px; }
    .fi-cta { margin-top: 70px; padding: 70px 20px; }
    .fi-insta { padding: 70px 20px 80px; }
    .fi-insta-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   ÉDITIONS — Collections de romans
   ============================================================ */
.ed-collections {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 90px 32px 110px;
}

/* Séparateur entre deux collections : filet fin centré et beaucoup d'air */
.ed-collection + .ed-collection {
    position: relative;
    margin-top: 90px;
    padding-top: 90px;
}
.ed-collection + .ed-collection::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 180px;
    height: 1px;
    background: var(--color-line);
}

/* --- En-tête de collection --- */
/* Il vit maintenant en haut de la colonne de texte, aligné à gauche,
   juste au-dessus du titre du livre. */
.ed-collection-head {
    margin: 0 0 26px;
}
.ed-collection-index {
    display: block;
    font-size: 0.78rem;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: #9b7fd4;
    margin-bottom: 16px;
}
.ed-collection-name {
    font-size: clamp(2.4rem, 5vw, 3.9rem);
    font-weight: normal;
    font-style: italic;
    color: var(--color-text);
    line-height: 1.05;
}
/* Le titre d'un tome de la saga s'écrit droit, comme le grand
   HEARTLESS en haut de la page — l'italique est réservé aux
   titres de collection. */
.ed-collection-name--droit { font-style: normal; }
.ed-collection-note {
    margin-top: 14px;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    color: var(--color-muted);
}
/* Le sous-titre d'un tome reprend la mise en forme du « RISE OF
   THE END — PARTIE N°01 » en haut de la page : capitales et
   lettres espacées. */
.ed-collection-note--tome {
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #1a1a1a;
}
.ed-collection-head::after {
    content: "";
    display: block;
    width: 64px;
    height: 2px;
    background: #9b7fd4;
    opacity: 0.6;
    margin: 22px 0 0;
}

/* --- Le rayon : le livre d'un côté, ses informations de l'autre ---
   La colonne du livre est un peu plus étroite que celle du texte, et
   les deux s'inversent d'une collection à l'autre. */
.ed-book {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: clamp(34px, 6vw, 90px);
    align-items: center;
}
.ed-book--inverse {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
}
.ed-book--inverse .ed-book-object { order: 2; }
.ed-book--inverse .ed-book-info   { order: 1; }

/* Le texte ne remplit jamais toute sa colonne. Pour que le blanc
   tombe toujours ENTRE le livre et le texte — et pas au bord de la
   page — on pousse le bloc de texte du côté opposé au livre. */
.ed-book-info { max-width: 560px; }
.ed-book .ed-book-info { margin-left: auto; }
.ed-book--inverse .ed-book-info { margin-left: 0; margin-right: auto; }

/* --- Le livre posé, avec sa tranche et son reflet ---
   Le conteneur donne la perspective ; chaque couverture est un
   volume incliné à l'intérieur. */
.ed-book-object {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 26px;
    perspective: 1400px;
}
/* Halo violet derrière les couvertures */
.ed-book-object::before {
    content: "";
    position: absolute;
    inset: 4% 6%;
    background: radial-gradient(closest-side, rgba(155, 127, 212, 0.38), rgba(155, 127, 212, 0));
    filter: blur(34px);
    z-index: 0;
}

.ed-book-body {
    position: relative;
    z-index: 1;
    flex: 1 1 0;
    max-width: 250px;
    transform: rotateY(-13deg) rotateX(2deg);
    transform-style: preserve-3d;
    transition: transform 1s cubic-bezier(0.2, 0.7, 0.2, 1);
}
/* Un seul volume dans la colonne : il peut prendre toute la place. */
.ed-book-body--large { max-width: 370px; }


/* Au survol, le livre se redresse et se soulève légèrement. */
.ed-book-object:hover .ed-book-body:not(.ed-book-card) {
    transform: rotateY(-4deg) rotateX(0deg) translateY(-8px);
}

/* ---------- Deux couvertures empilées comme deux cartes ----------
   La quatrième de couverture attend derrière la première. Au survol,
   elles échangent leur place : celle de devant glisse en arrière
   pendant que celle de derrière vient se poser devant. Le retour se
   fait tout seul quand la souris repart. */
.ed-book-pile {
    position: relative;
    width: min(100%, 370px);
    aspect-ratio: 2 / 3;
}
.ed-book-card {
    position: absolute;
    inset: 0;
    flex: none;
    max-width: none;
    transition: transform 0.85s cubic-bezier(0.2, 0.7, 0.2, 1),
                z-index 0s 0.42s;
}
.ed-book-card img {
    height: 100%;
    aspect-ratio: auto;
}

/* Position « devant » et position « derrière ». */
.ed-book-card--recto {
    z-index: 2;
    transform: perspective(1400px) rotateY(-13deg) rotateX(2deg);
}
.ed-book-card--verso {
    z-index: 1;
    transform: perspective(1400px) rotateY(-13deg) rotateX(2deg)
               translate(38px, 22px) rotate(2.5deg) scale(0.94);
}

/* Au survol, les deux positions s'échangent. */
.ed-book-pile:hover .ed-book-card--recto,
.ed-book-pile:focus-within .ed-book-card--recto {
    z-index: 1;
    transform: perspective(1400px) rotateY(-13deg) rotateX(2deg)
               translate(38px, 22px) rotate(2.5deg) scale(0.94);
}
.ed-book-pile:hover .ed-book-card--verso,
.ed-book-pile:focus-within .ed-book-card--verso {
    z-index: 2;
    transform: perspective(1400px) rotateY(-13deg) rotateX(2deg);
}

@media (prefers-reduced-motion: reduce) {
    .ed-book-card { transition: none; }
}

/* ---------- Couverture « annonce à venir » ----------
   Même carton que les affiches de films à venir, mais au format
   livre : il garde la tranche et le reflet des vraies couvertures. */
.ed-book-body--soon {
    aspect-ratio: 2 / 3;
    display: grid;
    place-content: center;
    text-align: center;
    padding: 30px 24px;
    background:
        repeating-linear-gradient(to bottom,
            rgba(255, 255, 255, 0.10) 0 12px,
            transparent 12px 26px) left / 13px 100% no-repeat,
        repeating-linear-gradient(to bottom,
            rgba(255, 255, 255, 0.10) 0 12px,
            transparent 12px 26px) right / 13px 100% no-repeat,
        linear-gradient(160deg, #17171b 0%, #0d0d10 100%);
    border: 1px dashed rgba(255, 255, 255, 0.18);
    border-radius: 2px 6px 6px 2px;
    box-shadow:
        0 2px 0 rgba(255, 255, 255, 0.5) inset,
        26px 34px 60px -22px rgba(21, 21, 26, 0.5);
}
.ed-soon-tag {
    position: absolute;
    top: 16px;
    left: 22px;
    z-index: 3;
    padding: 6px 11px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 2px;
    background: rgba(10, 10, 12, 0.72);
    font-size: 0.68rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.9);
    white-space: nowrap;
}
.ed-book-body--soon .ed-soon-logo {
    position: relative;
    z-index: 3;
    display: block;
    width: 82px;
    height: auto;
    aspect-ratio: auto;
    object-fit: contain;
    margin: 0 auto 22px;
    opacity: 0.3;
    transition: opacity 0.4s ease;
}
.ed-book-body--soon:hover .ed-soon-logo { opacity: 0.42; }
.ed-soon-brand {
    position: relative;
    z-index: 3;
    display: block;
    font-size: 0.68rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.62);
}
.ed-soon-note {
    position: relative;
    z-index: 3;
    display: block;
    margin-top: 12px;
    font-size: 1.35rem;
    font-style: italic;
    line-height: 1.2;
    color: rgba(255, 255, 255, 0.92);
}

.ed-book-body img {
    display: block;
    width: 100%;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    border-radius: 2px 6px 6px 2px;
    box-shadow:
        0 2px 0 rgba(255, 255, 255, 0.5) inset,
        26px 34px 60px -22px rgba(21, 21, 26, 0.5);
}

/* La tranche, dessinée le long du bord gauche */
.ed-book-body::before {
    content: "";
    position: absolute;
    top: 1.2%;
    bottom: 1.2%;
    left: 0;
    width: 14px;
    background: linear-gradient(to right,
        rgba(0, 0, 0, 0.42),
        rgba(255, 255, 255, 0.14) 45%,
        rgba(0, 0, 0, 0.28));
    border-radius: 2px 0 0 2px;
    z-index: 2;
}

/* Reflet diagonal sur la couverture */
.ed-book-body::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg,
        rgba(255, 255, 255, 0.22) 0%,
        transparent 32%,
        transparent 72%,
        rgba(255, 255, 255, 0.10) 100%);
    border-radius: 2px 6px 6px 2px;
    pointer-events: none;
    z-index: 2;
}

/* --- Infos du livre --- */
.ed-book-tag {
    display: block;
    font-size: 0.8rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: #9b7fd4;
    margin-bottom: 16px;
}
.ed-book-title {
    font-size: clamp(2rem, 3.4vw, 3rem);
    font-weight: normal;
    font-style: italic;
    color: var(--color-text);
    line-height: 1.1;
    margin-bottom: 20px;
}
.ed-book-desc {
    font-size: 1.15rem;
    line-height: 1.7;
    color: var(--color-muted);
    max-width: 540px;
    margin-bottom: 28px;
}
.ed-book-meta {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 36px;
    color: var(--color-text);
}
.ed-book-price {
    font-size: 1.5rem;
}
.ed-book-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #cfcfcf;
}
.ed-book-format {
    font-size: 0.92rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-muted);
}
.ed-countdown + .ed-book-btn { margin-top: 34px; }

.ed-book-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-style: italic;
    font-size: 1.05rem;
    letter-spacing: 0.01em;
    color: var(--color-text);
    text-decoration: none;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--color-text);
    transition: gap 0.25s ease;
}
.ed-book-btn:hover {
    gap: 16px;
}
.ed-book-btn .arw { transition: transform 0.25s ease; }
.ed-book-btn:hover .arw { transform: translateX(4px); }

/* --- Apparition au défilement ---
   La classe .peut-apparaitre est posée par js/main.js : si le script
   ne tourne pas, le contenu reste visible. On ne cache jamais quelque
   chose qu'on ne saurait pas révéler ensuite. */
.peut-apparaitre .reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.9s cubic-bezier(0.2, 0.7, 0.2, 1),
                transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.peut-apparaitre .reveal.vu {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .peut-apparaitre .reveal {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* ============================================================
   ÉDITIONS — Collection « White Death » (compte à rebours)
   ============================================================ */
.ed-collection--wd .ed-collection-index,
.ed-collection--wd .ed-book-tag {
    color: #c20c0c;
}
.ed-collection--wd .ed-collection-head::after {
    background: #c20c0c;
}
.ed-collection--wd .ed-book-btn {
    color: #8a0303;
    border-bottom-color: #8a0303;
}

.ed-book-subtitle {
    font-size: 1.05rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-muted);
    margin-bottom: 24px;
}

/* --- Compte à rebours --- */
/* Le compte à rebours, sous le résumé : les chiffres seuls, posés
   dans le blanc de la page, sans cadre ni fond. Seule la couleur
   reste au rouge de White Death. */
.ed-countdown {
    display: block;
    margin: 36px 0 0;
}
.ed-countdown-label {
    display: block;
    margin-bottom: 20px;
    font-size: 0.72rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--color-muted);
}
.ed-count-grid {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(20px, 3.4vw, 48px);
}
.ed-count-box {
    min-width: 74px;
    text-align: center;
    transition: transform 0.2s ease;
}
.ed-count-num {
    font-family: var(--font-main);
    font-size: clamp(2.6rem, 5vw, 4.6rem);
    font-weight: normal;
    line-height: 1;
    color: #c20c0c;
    font-variant-numeric: tabular-nums;
}
.ed-count-label {
    margin-top: 10px;
    font-size: 0.62rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--color-muted);
}
/* Au survol, les chiffres se brouillent : on les décale à peine
   pour que le passage se sente sans cadre à faire bouger. */
.ed-countdown.scrambling .ed-count-box {
    transform: translateY(-4px);
}

/* Minuteur de la Partie 2 : chiffres noirs, et seuls les 8 en mauve. */
.ed-countdown--violet .ed-count-num { color: var(--color-text); }
.ed-countdown--violet .huit { color: #9b7fd4; }

@media (max-width: 860px) {
    .ed-collections { padding: 60px 20px 80px; }
    .ed-count-box { min-width: 62px; }
    .ed-count-label { font-size: 0.56rem; letter-spacing: 0.14em; }
    .ed-book-subtitle { margin-left: auto; margin-right: auto; }
    .ed-collection + .ed-collection { margin-top: 90px; padding-top: 90px; }
    .ed-collection + .ed-collection::before { width: 120px; }

    /* Une seule colonne : le livre passe toujours au-dessus du texte. */
    .ed-count-grid { justify-content: center; gap: 22px; }
    .ed-book, .ed-book--inverse {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
    }
    .ed-book--inverse .ed-book-object { order: 0; }
    .ed-book--inverse .ed-book-info   { order: 0; }
    .ed-collection-head::after { margin-left: auto; margin-right: auto; }
    .ed-countdown { margin-left: auto; margin-right: auto; }
    .ed-book-desc { margin-left: auto; margin-right: auto; }
    .ed-book-meta { justify-content: center; }
}

/* ============================================================
   ESPACE DE DIRECTION
   ============================================================ */
.dir-body {
    background: #0b0b0b;
    color: #f2f2f2;
}

.dir-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: #0b0b0b;
    border-bottom: 1px solid #232323;
}
.dir-header-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 22px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.dir-logo {
    font-size: 0.82rem;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: #f2f2f2;
    text-decoration: none;
}
.dir-header-right {
    display: flex;
    align-items: center;
    gap: 22px;
}
.dir-who {
    font-size: 0.78rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: #8a8a8a;
}
.dir-out {
    background: none;
    border: 1px solid #333333;
    border-radius: 60px;
    color: #f2f2f2;
    font-family: inherit;
    font-size: 0.72rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    padding: 10px 22px;
    cursor: pointer;
    transition: background 0.3s ease, color 0.3s ease;
}
.dir-out:hover { background: #f2f2f2; color: #0b0b0b; }

.dir-main {
    max-width: 1400px;
    margin: 0 auto;
    padding: 60px 32px 100px;
}
.dir-title {
    font-size: clamp(2.4rem, 5vw, 3.6rem);
    font-weight: normal;
    font-style: italic;
}
.dir-subtitle {
    margin-top: 10px;
    color: #8a8a8a;
    font-size: 1rem;
}

/* --- Chiffres --- */
.dir-stats {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1px;
    background: #232323;
    border: 1px solid #232323;
    margin: 50px 0 60px;
}
.dir-stat {
    background: #101010;
    padding: 30px 26px;
}
.dir-stat-num {
    display: block;
    font-size: 2.4rem;
    line-height: 1;
}
.dir-stat-label {
    display: block;
    margin-top: 12px;
    font-size: 0.72rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: #8a8a8a;
}

/* --- Onglets --- */
.dir-tabs {
    display: flex;
    gap: 8px;
    border-bottom: 1px solid #232323;
    margin-bottom: 36px;
}
.dir-tab {
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    color: #8a8a8a;
    font-family: inherit;
    font-size: 0.76rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    padding: 14px 20px;
    cursor: pointer;
    transition: color 0.3s ease, border-color 0.3s ease;
}
.dir-tab:hover { color: #f2f2f2; }
.dir-tab.active {
    color: #f2f2f2;
    border-bottom-color: #f2f2f2;
}

/* --- Tableaux --- */
.dir-table-wrap {
    overflow-x: auto;
    border: 1px solid #232323;
}
.dir-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.94rem;
    min-width: 820px;
}
.dir-table th {
    text-align: left;
    font-weight: normal;
    font-size: 0.7rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #8a8a8a;
    padding: 18px 20px;
    border-bottom: 1px solid #232323;
    background: #101010;
}
.dir-table td {
    padding: 18px 20px;
    border-bottom: 1px solid #1c1c1c;
    vertical-align: top;
}
.dir-table tr:last-child td { border-bottom: 0; }
.dir-table a { color: #f2f2f2; }
.dir-msg {
    max-width: 320px;
    color: #b4b4b4;
    line-height: 1.6;
}
.dir-vide {
    padding: 40px 20px;
    text-align: center;
    color: #8a8a8a;
}

.dir-mini {
    background: none;
    border: 1px solid #333333;
    border-radius: 60px;
    color: #f2f2f2;
    font-family: inherit;
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 8px 18px;
    cursor: pointer;
    transition: background 0.3s ease, color 0.3s ease;
}
.dir-mini:hover { background: #f2f2f2; color: #0b0b0b; }

.dir-etat {
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.dir-etat.ouvert { color: #6fcf97; }
.dir-etat.ferme  { color: #8a8a8a; }

.dir-statut {
    background: #101010;
    color: #f2f2f2;
    border: 1px solid #333333;
    border-radius: 4px;
    font-family: inherit;
    font-size: 0.86rem;
    padding: 8px 12px;
}
.dir-statut.erreur { border-color: #c20c0c; }

/* --- Formulaire de création d'annonce --- */
.dir-form {
    border: 1px solid #232323;
    padding: 34px 32px;
    margin-bottom: 40px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.dir-form-titre {
    font-size: 1.4rem;
    font-weight: normal;
    font-style: italic;
}
.dir-form-grille {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.dir-form .field-label { color: #8a8a8a; }
.dir-form input,
.dir-form select,
.dir-form textarea {
    width: 100%;
    background: #101010;
    color: #f2f2f2;
    border: 1px solid #333333;
    border-radius: 4px;
    font-family: inherit;
    font-size: 0.96rem;
    padding: 13px 15px;
}
.dir-form input:focus,
.dir-form select:focus,
.dir-form textarea:focus {
    outline: none;
    border-color: #f2f2f2;
}
.dir-form textarea { resize: vertical; }
.dir-form .auth-submit {
    align-self: flex-start;
    background: #f2f2f2;
    color: #0b0b0b;
    border: 1px solid #f2f2f2;
}
.dir-form .auth-submit:hover {
    background: transparent;
    color: #f2f2f2;
}

@media (max-width: 900px) {
    .dir-stats { grid-template-columns: repeat(2, 1fr); }
    .dir-form-grille { grid-template-columns: 1fr; }
    .dir-main { padding: 40px 20px 70px; }
    .dir-header-inner { padding: 18px 20px; }
}


.cs-tri select:focus {
    outline: none;
    border-color: var(--color-text);
}

@media (max-width: 600px) {
    .cs-filtres { flex-direction: column; align-items: stretch; }
    .cs-tri { justify-content: space-between; }
}

/* Genre littéraire, sous la nature du projet */
.dir-genre {
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #8a8a8a;
}


/* ============================================================
   ÉVÉNEMENTS — Barghach Memory : catégories
   ============================================================ */
.ev-intro {
    max-width: 780px;
    margin: 0 auto;
    padding: 80px 32px 0;
    text-align: center;
}
.ev-intro-text {
    font-size: clamp(1.1rem, 2vw, 1.35rem);
    line-height: 1.8;
    color: var(--color-muted);
}

.ev-categories {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 90px 32px 120px;
}

.ev-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 44px;
}

.ev-card {
    display: flex;
    flex-direction: column;
}

.ev-card-visual {
    position: relative;
    aspect-ratio: 4 / 5;
    background-color: #111111;
    background-size: cover;
    background-position: center;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 22px 50px rgba(0, 0, 0, 0.22);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.ev-card-visual:hover {
    transform: translateY(-10px);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.32);
}
.ev-card-title {
    margin-top: 26px;
    font-size: 1.5rem;
    font-weight: normal;
    font-style: italic;
    color: var(--color-text);
}
.ev-card-desc {
    margin-top: 10px;
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--color-muted);
}
.ev-card .ed-book-btn {
    margin-top: 20px;
    align-self: flex-start;
}

/* --- Rubrique à venir (réutilisable sur toute visuel position:relative + overflow:hidden) --- */
.bp-soon::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(10, 10, 10, 0.58);
}
.bp-soon-badge {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    transform: translate(-50%, -50%);
    padding-bottom: 12px;
    font-family: var(--font-main);
    font-style: italic;
    font-size: 1.15rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #ffffff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.55);
    white-space: nowrap;
}
.ed-book-btn--soon {
    color: var(--color-muted);
    border-bottom-color: var(--color-line);
    cursor: default;
}
.ed-book-btn--soon:hover {
    gap: 10px;
}

@media (max-width: 900px) {
    .ev-cards { gap: 24px; }
}
@media (max-width: 560px) {
    .ev-categories { padding: 60px 16px 70px; }
    .ev-cards { gap: 10px; }
    .ev-card-title { margin-top: 8px; font-size: 0.8rem; }
    .ev-card-desc { display: none; }
    .ev-card .ed-book-btn { margin-top: 6px; font-size: 0.68rem; gap: 4px; }
}

/* --- Notre processus (4 étapes) --- */
.ev-process {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 100px 32px 100px;
}
.ev-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 44px;
}
.ev-step-num {
    display: block;
    font-family: "AGaramond", Garamond, serif;
    font-style: italic;
    font-size: 2.2rem;
    color: var(--color-line);
    margin-bottom: 18px;
}
.ev-step-title {
    font-size: 1.1rem;
    font-weight: normal;
    font-style: italic;
    color: var(--color-text);
    margin-bottom: 10px;
}
.ev-step-desc {
    font-size: 0.9rem;
    line-height: 1.7;
    color: var(--color-muted);
}

@media (max-width: 900px) {
    .ev-steps { grid-template-columns: 1fr 1fr; gap: 40px 30px; }
}
@media (max-width: 560px) {
    .ev-steps { gap: 30px 20px; }
    .ev-step-num { font-size: 1.7rem; margin-bottom: 10px; }
    .ev-step-title { font-size: 1rem; }
    .ev-step-desc { font-size: 0.82rem; }
}

/* ============================================================
   MARIAGES — Page dédiée
   ============================================================ */

/* --- Navigation rapide (Gallery / Tarifs / Réserver) --- */
.wd-quicknav {
    margin: 0;
    padding: 0;
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}
.wd-quicknav-link {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px 20px;
    background: #ffffff;
    border: 1px solid var(--color-line);
    font-size: 1.15rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text);
    transition: background 0.3s ease, color 0.3s ease;
}
.wd-quicknav-link:hover {
    background: var(--wd-accent, #8f1d24);
    color: #ffffff;
    border-color: var(--wd-accent, #8f1d24);
}
@media (max-width: 700px) {
    .wd-quicknav-link { padding: 16px 10px; font-size: 0.82rem; letter-spacing: 0.02em; }
    .wd-intro { padding: 64px 20px 30px; }
    .wd-intro-text { font-size: 1.05rem; }
    .wd-tarifs { padding: 60px 20px 80px; }
    .wd-gallery-section { padding: 60px 20px 80px; }
    .wd-pack-body { padding: 22px 20px 24px; }
}

/* --- Intro éditoriale --- */
.wd-intro {
    max-width: 1180px;
    margin: 0 auto;
    padding: 100px 32px 40px;
    text-align: center;
}
.wd-intro-eyebrow {
    display: block;
    font-size: 0.78rem;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: var(--color-muted);
    margin-bottom: 22px;
}
/* Le titre est devenu une phrase entière, qui doit tenir sur une
   seule ligne : la taille suit donc la largeur de l'écran au lieu
   d'être fixe, et le retour à la ligne est interdit. */
.wd-intro-title {
    font-size: clamp(1.15rem, 2.5vw, 2.3rem);
    font-style: normal;
    font-weight: normal;
    line-height: 1.25;
    margin-bottom: 14px;
    position: relative;
    padding-bottom: 24px;
    white-space: nowrap;
}
.wd-intro-title::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 54px;
    height: 2px;
    background: var(--wd-accent, #8f1d24);
}
.wd-intro-text {
    font-size: 1.15rem;
    line-height: 1.7;
    color: #333333;
    margin-top: 14px;
}

/* En dessous de 1000 px, tenir sur une seule ligne obligerait le
   titre à devenir plus petit que le texte qu'il annonce. La phrase
   se répartit alors sur deux lignes, à une taille de vrai titre. */
@media (max-width: 1000px) {
    .wd-intro-title {
        white-space: normal;
        font-size: clamp(1.45rem, 3.6vw, 2rem);
    }
}

/* --- Section Tarifs : conteneur --- */
.wd-tarifs {
    margin-top: 40px;
    padding: 90px 32px 110px;
    background: #eef1f6;
}
.wd-tarifs-inner {
    max-width: var(--max-width);
    margin: 0 auto;
}

/* --- Galerie photo --- */
.wd-gallery-section {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 90px 32px 110px;
    scroll-margin-top: var(--header-height);
}
.wd-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}
/* Même traitement que les affiches de la page Films : la photo se
   soulève, son ombre se creuse, l'image zoome et un reflet de
   lumière la traverse. */
.wd-gallery-item {
    display: block;
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: 6px;
    overflow: hidden;
    background-color: #111111;
    background-size: cover;
    background-position: center;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.14);
    transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1),
                box-shadow 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.wd-gallery-item:hover {
    transform: translateY(-10px) scale(1.014);
    box-shadow: 0 34px 70px -18px rgba(0, 0, 0, 0.55);
}
.wd-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 1.1s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.wd-gallery-item:hover img { transform: scale(1.05); }

.wd-gallery-item::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(105deg,
        transparent 38%,
        rgba(255, 255, 255, 0.16) 50%,
        transparent 62%);
    transform: translateX(-110%);
    transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.wd-gallery-item:hover::after { transform: translateX(110%); }
.wd-gallery-caption {
    margin-top: 30px;
    text-align: center;
    font-size: 1.05rem;
    font-style: italic;
    letter-spacing: 0.05em;
    color: var(--color-text);
}
.wd-tarifs .fi-head::after,
.wd-gallery-section .fi-head::after {
    background: var(--wd-accent, #8f1d24);
    opacity: 1;
}
@media (max-width: 900px) {
    .wd-gallery { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
    .wd-gallery { gap: 8px; }
}

/* --- Offres / Tarifs (accordéon) --- */
.mg-wrap, .mg-wrap * { font-family: var(--font-main); box-sizing: border-box; }
.mg-wrap { width: 100%; margin: 0 auto; padding: 0; }

/* --- Cartes forfaits ----------------------------------------
   La carte de la refonte : le nom, le prix, une phrase courte,
   puis la liste de ce qui est compris, et le lien tout en bas.
   La photo garde sa place en tête, et le prix prend le rouge
   de la page mariage. */
.wd-pack-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: stretch;
    gap: clamp(18px, 2.4vw, 32px);
    margin-bottom: clamp(48px, 6vw, 84px);
}
.wd-pack-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-self: stretch;
    background: #fff;
    border: 1px solid var(--color-line);
    border-radius: 3px;
    box-shadow: 0 4px 16px rgba(0,0,0,.05);
    overflow: hidden;
    transition: transform .6s cubic-bezier(0.2, 0.7, 0.2, 1),
                box-shadow .6s cubic-bezier(0.2, 0.7, 0.2, 1),
                border-color .5s ease;
}
.wd-pack-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 30px 60px -30px rgba(42, 37, 33, .34);
    border-color: var(--wd-accent, #8f1d24);
}
.wd-pack-card--feat { border-color: var(--wd-accent, #8f1d24); }

/* Le ruban descend du bord haut de la carte, posé sur la photo. */
.wd-pack-tag {
    position: absolute;
    top: 0;
    right: 22px;
    z-index: 2;
    padding: 7px 13px;
    background: var(--wd-accent, #8f1d24);
    color: #fbf6f1;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter,
                 "Helvetica Neue", Arial, sans-serif;
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    border-radius: 0 0 3px 3px;
}
/* La photo du forfait réagit comme les affiches de la page Films :
   elle zoome doucement dans son cadre et un reflet de lumière la
   traverse. Le z-index garde le ruban au-dessus du reflet. */
.wd-pack-media {
    position: relative;
    z-index: 0;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background-color: #111;
    background-size: cover;
    background-position: center;
}
/* Calque séparé pour le zoom : le cadre, lui, ne bouge pas, donc
   l'image ne déborde jamais des coins arrondis de la carte. */
.wd-pack-media::before {
    content: "";
    position: absolute;
    inset: 0;
    background: inherit;
    background-size: cover;
    background-position: center;
    transition: transform 1.1s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.wd-pack-card:hover .wd-pack-media::before { transform: scale(1.05); }

.wd-pack-media::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(105deg,
        transparent 38%,
        rgba(255, 255, 255, 0.16) 50%,
        transparent 62%);
    transform: translateX(-110%);
    transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.wd-pack-card:hover .wd-pack-media::after { transform: translateX(110%); }
.wd-pack-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: clamp(24px, 2.6vw, 34px);
}
.wd-pack-name {
    margin: 0;
    font-size: clamp(26px, 2.6vw, 34px);
    font-style: italic;
    font-weight: normal;
    line-height: 1.1;
    color: var(--color-text);
}
.wd-pack-price {
    margin: 14px 0 0;
    font-size: clamp(34px, 3.6vw, 46px);
    line-height: 1;
    font-weight: normal;
    color: var(--wd-accent, #8f1d24);
}
/* La phrase d'intro s'étire pour que les trois liens « Réserver »
   tombent à la même hauteur d'une carte à l'autre. */
.wd-pack-desc {
    margin: 20px 0 0;
    font-size: 16.5px;
    line-height: 1.75;
    color: var(--color-muted);
    flex-grow: 1;
}
.wd-pack-list {
    margin-top: 22px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.wd-pack-line {
    display: flex;
    align-items: baseline;
    gap: 11px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter,
                 "Helvetica Neue", Arial, sans-serif;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--color-muted);
}
.wd-pack-line::before {
    content: "\2726";
    flex-shrink: 0;
    font-size: 10px;
    color: var(--wd-accent, #8f1d24);
}
.wd-pack-btn {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 10px;
    margin-top: 28px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter,
                 "Helvetica Neue", Arial, sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding-bottom: 6px;
    border-bottom: 1px solid currentColor;
    color: var(--color-text);
    transition: gap .3s ease, color .3s ease;
}
.wd-pack-btn:hover { gap: 16px; color: var(--wd-accent, #8f1d24); }
.wd-pack-btn .arw { transition: transform .35s ease; }
.wd-pack-btn:hover .arw { transform: translateX(6px); }

/* --- Options -------------------------------------------------
   La liste dépliante de la refonte : plus de cartes empilées,
   mais de simples lignes séparées d'un filet, avec un + qui
   devient − à l'ouverture. */
.options-titre {
    margin: 0 0 14px;
    font-family: var(--font-main);
    font-size: clamp(26px, 2.6vw, 36px);
    font-weight: normal;
    color: var(--color-text);
}
.options-wrap { display: flex; flex-direction: column; }
.opt-card {
    background: none;
    border: none;
    border-bottom: 1px solid var(--color-line);
    box-shadow: none;
    overflow: hidden;
}
.opt-header {
    width: 100%;
    border: none;
    background: none;
    cursor: pointer;
    padding: 26px 0;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 24px;
    text-align: left;
    color: var(--color-text);
    transition: color .3s ease;
}
.opt-header:hover { color: var(--wd-accent, #8f1d24); }
.opt-title h2 {
    margin: 0;
    font-family: var(--font-main);
    font-size: clamp(19px, 1.7vw, 25px);
    font-style: italic;
    font-weight: normal;
    line-height: 1.3;
    color: inherit;
}
.opt-title p {
    margin: 6px 0 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter,
                 "Helvetica Neue", Arial, sans-serif;
    font-size: 12px;
    letter-spacing: 0.1em;
    color: var(--color-muted);
    line-height: 1.5;
}

/* Le signe + : deux traits, dont le vertical s'efface quand la
   ligne s'ouvre — il ne reste que le − */
.opt-sign {
    flex-shrink: 0;
    align-self: center;
    position: relative;
    width: 20px;
    height: 20px;
}
.opt-sign::before,
.opt-sign::after {
    content: "";
    position: absolute;
    background: currentColor;
    transition: transform .4s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.opt-sign::before { inset: 9px 0; height: 1.5px; }
.opt-sign::after  { inset: 0 9px; width: 1.5px; }
.opt-card.active .opt-sign::after { transform: scaleY(0); }

.opt-content { max-height: 0; overflow: hidden; transition: max-height .6s ease; }
.opt-inner { padding: 0 0 30px; max-width: 62ch; }
.opt-inner p {
    margin: 0 0 0.9em;
    font-size: 16px;
    line-height: 1.9;
    color: var(--color-muted);
}
.opt-inner p:last-child { margin-bottom: 0; }

/* Les tarifs de l'option, alignés en ligne comme sur la refonte. */
.opt-prix {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 28px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter,
                 "Helvetica Neue", Arial, sans-serif;
    font-size: 13px;
    letter-spacing: 0.04em;
    color: var(--color-muted);
}
.opt-prix strong { color: var(--wd-accent, #8f1d24); font-weight: 600; }
/* Écrit .opt-inner p.opt-mention pour passer devant la règle des
   paragraphes juste au-dessus, sinon la mention garde leur taille. */
.opt-inner p.opt-mention { margin: 16px 0 0; font-size: 12px; color: #9a9a9a; }

.mg-reveal { opacity: 0; transform: translateY(40px); transition: opacity .8s ease, transform .8s ease; }
.mg-reveal.visible { opacity: 1; transform: translateY(0); }

@media (max-width: 900px) {
  /* Un forfait par ligne. On descend la page et on lit chaque
     offre en entier — photo, prix, et tout ce qui est compris —
     au lieu de faire défiler des vignettes du doigt. */
  .wd-pack-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  /* Photo moins haute : elle annonce le forfait sans repousser
     le prix hors de l'écran. */
  .wd-pack-media { aspect-ratio: 16 / 10; }
}
@media(max-width: 768px) {
  .opt-header { padding: 22px 0; }
  .opt-inner { padding: 0 0 24px; }
}

/* ============================================================
   SPORT · MMA — Toute la page
   ------------------------------------------------------------
   La page vit en noir du bandeau jusqu'au pied de page. Les
   images de combat sont sombres par nature : chaque fond blanc
   les coupait en deux et donnait à la page un air de brochure.
   Repères en rouge de gala, chiffres en sans-serif (registre
   sportif), Garamond conservé pour les titres (registre maison).
   ============================================================ */

.page-sport {
    --sp-bg: #08080a;
    --sp-bg-2: #131318;
    --sp-line: rgba(242, 240, 238, 0.14);
    --sp-text: #f2f0ee;
    --sp-muted: rgba(242, 240, 238, 0.56);
    --sp-red: #c8102e;
    --sp-sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
    background-color: var(--sp-bg);
    color: var(--sp-text);
}

/* ---------- En-tête : noir aussi une fois qu'on a défilé ----------
   Ailleurs sur le site, l'en-tête flottant redevient blanc dès le
   premier défilement. Sur fond noir, ce bandeau blanc coupait la
   page ; ici il reste sombre et le logo blanc ne repasse jamais
   en noir. */
.page-sport .site-header:not(.at-top):not(.nav-open) {
    background-color: #08080a;
    border-bottom-color: var(--sp-line);
}
.page-sport .site-header:not(.at-top):not(.nav-open) .logo-img--sombre { opacity: 0; }
.page-sport .site-header:not(.at-top):not(.nav-open) .logo-img--clair { opacity: 1; }
.page-sport .site-header:not(.at-top):not(.nav-open) .nav-link { color: var(--sp-text); }
.page-sport .site-header:not(.at-top):not(.nav-open) .nav-link::after { background-color: var(--sp-red); }
.page-sport .site-header:not(.at-top):not(.nav-open) .header-socials .social svg { fill: var(--sp-text); opacity: 0.8; }
.page-sport .site-header:not(.at-top):not(.nav-open) .header-socials .social:hover svg { opacity: 1; }
.page-sport .site-header:not(.at-top):not(.nav-open) .cart-btn {
    background-color: transparent;
    border-color: rgba(242, 240, 238, 0.4);
}
.page-sport .site-header:not(.at-top):not(.nav-open) .cart-btn:hover {
    background-color: rgba(242, 240, 238, 0.14);
    border-color: var(--sp-text);
}
.page-sport .site-header:not(.at-top):not(.nav-open) .cart-btn svg { fill: var(--sp-text); }
.page-sport .site-header:not(.at-top):not(.nav-open) .cart-count { background-color: var(--sp-red); color: #ffffff; }
.page-sport .site-header:not(.at-top):not(.nav-open) .menu-toggle span { background-color: var(--sp-text); }

/* ============================================================
   1. BANDEAU DE COUVERTURE
   ============================================================ */
.sp-hero {
    position: relative;
    min-height: 86svh;
    display: flex;
    align-items: flex-end;
    padding: calc(var(--header-height) + 40px) 0 clamp(40px, 6vw, 78px);
    background-color: var(--sp-bg);
    background-size: cover;
    background-position: 42% center;
    overflow: hidden;
}

/* Raccord photo → page, et non voile sur la photo : le dégradé
   part de zéro (le haut de l'image garde sa lumière) et ne
   devient opaque que dans les tout derniers pixels, là où le
   bandeau doit rejoindre le noir de la page. */
.sp-hero-fade {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg,
                rgba(8, 8, 10, 0) 42%,
                rgba(8, 8, 10, 0.55) 82%,
                rgba(8, 8, 10, 1) 100%);
}

.sp-hero-inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 32px;
}

/* Ligne rouge + intitulé de lieu, au-dessus du titre */
.sp-kicker {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: var(--sp-sans);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: #ffffff;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.8);
}
.sp-kicker::before {
    content: "";
    width: 34px;
    height: 2px;
    background: var(--sp-red);
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.6);
}

.sp-hero-title {
    margin-top: 20px;
    font-size: clamp(2.6rem, 8.4vw, 6.8rem);
    font-weight: normal;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 0.96;
    white-space: nowrap;
    text-shadow: 0 3px 34px rgba(0, 0, 0, 0.75);
}

.sp-hero-sub {
    margin-top: 22px;
    font-size: clamp(1rem, 1.6vw, 1.24rem);
    font-style: italic;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.94);
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.85);
    white-space: nowrap;
}

@media (max-width: 1080px) {
    .sp-hero-sub { white-space: normal; max-width: 46ch; }
}
@media (max-width: 700px) {
    .sp-hero { min-height: 74svh; }
    .sp-hero-inner { padding: 0 20px; }
    .sp-hero-title { white-space: normal; }
}

/* ============================================================
   2. BARRE DE SECTION (remplace l'ancienne barre blanche)
   ============================================================ */
.sp-subnav {
    position: sticky;
    top: var(--header-height);
    z-index: 900;
    background: #08080a;
    border-bottom: 1px solid var(--sp-line);
}

.sp-subnav-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 32px;
    display: flex;
    align-items: center;
    gap: 38px;
}

.sp-subnav-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 22px 0;
    font-family: var(--sp-sans);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--sp-muted);
    border-bottom: 2px solid transparent;
    transition: color 0.3s ease, border-color 0.3s ease;
}
.sp-subnav-link:hover {
    color: #ffffff;
    border-bottom-color: var(--sp-red);
}
.sp-subnav-num { color: var(--sp-red); }

.sp-subnav-cta {
    margin-left: auto;
    font-family: var(--sp-sans);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #ffffff;
    background: var(--sp-red);
    padding: 13px 22px;
    transition: background-color 0.3s ease;
}
.sp-subnav-cta:hover { background: #e21534; }

@media (max-width: 900px) {
    .sp-subnav { position: static; }
    .sp-subnav-inner {
        padding: 0 20px;
        gap: 22px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .sp-subnav-inner::-webkit-scrollbar { display: none; }
    .sp-subnav-link { padding: 16px 0; font-size: 0.64rem; white-space: nowrap; }
    .sp-subnav-cta { padding: 10px 16px; font-size: 0.62rem; white-space: nowrap; }
}

/* ============================================================
   3. INTRO ÉDITORIALE + CHIFFRES
   ============================================================ */
.sp-intro {
    padding: clamp(66px, 9vw, 120px) 24px 0;
}

.sp-intro-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(220px, 0.8fr) 1.2fr;
    gap: clamp(28px, 6vw, 92px);
    align-items: start;
}

.sp-eyebrow {
    display: block;
    font-family: var(--sp-sans);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--sp-red);
    margin-bottom: 20px;
}

.sp-intro-title {
    font-size: clamp(2rem, 4.4vw, 3.4rem);
    font-weight: normal;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    line-height: 1.02;
}

.sp-lead {
    font-size: clamp(1.16rem, 1.9vw, 1.5rem);
    font-style: italic;
    line-height: 1.55;
    color: #ffffff;
    padding-left: 24px;
    border-left: 2px solid var(--sp-red);
}

.sp-text {
    margin-top: 24px;
    font-size: 1.02rem;
    line-height: 1.8;
    color: var(--sp-muted);
}

/* Bandeau de chiffres : ce que la page promet, en une ligne */
.sp-specs {
    max-width: var(--max-width);
    margin: clamp(50px, 7vw, 92px) auto 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    border-top: 1px solid var(--sp-line);
    border-bottom: 1px solid var(--sp-line);
}

.sp-specs li {
    padding: 30px 26px 32px;
    border-right: 1px solid var(--sp-line);
}
.sp-specs li:first-child { padding-left: 0; }
.sp-specs li:last-child { border-right: 0; }

.sp-spec-num {
    display: block;
    font-family: var(--sp-sans);
    font-size: clamp(1.9rem, 3.4vw, 2.8rem);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1;
    color: #ffffff;
}
.sp-spec-num i {
    font-style: normal;
    font-size: 0.48em;
    color: var(--sp-red);
    margin-left: 3px;
    vertical-align: baseline;
}

.sp-spec-lab {
    display: block;
    margin-top: 13px;
    font-family: var(--sp-sans);
    font-size: 0.63rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--sp-muted);
}

@media (max-width: 900px) {
    .sp-intro-inner { grid-template-columns: 1fr; gap: 26px; }
    .sp-specs { grid-template-columns: repeat(2, 1fr); }
    .sp-specs li { padding: 24px 18px 26px; border-bottom: 1px solid var(--sp-line); }
    .sp-specs li:nth-child(2n) { border-right: 0; }
    .sp-specs li:nth-child(1) { padding-left: 18px; }
    .sp-specs li:nth-last-child(-n+2) { border-bottom: 0; }
}
@media (max-width: 560px) {
    .sp-intro { padding: 56px 20px 0; }
}

/* ============================================================
   4. LES COMBATS · lecteur + catalogue
   ============================================================ */
.mma {
    background-color: transparent;
    color: var(--sp-text);
    padding: clamp(66px, 9vw, 112px) 24px clamp(56px, 7vw, 90px);
}

.mma-inner {
    max-width: var(--max-width);
    margin: 0 auto;
}

/* En-tête de section : titre à gauche, mention technique à droite */
.mma-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    text-align: left;
    padding-bottom: 26px;
    margin-bottom: clamp(34px, 4vw, 54px);
    border-bottom: 1px solid var(--sp-line);
}

.mma-eyebrow {
    display: block;
    font-family: var(--sp-sans);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--sp-red);
    margin-bottom: 16px;
}

.mma-title {
    font-size: clamp(1.8rem, 4vw, 3rem);
    font-weight: normal;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    line-height: 1.05;
}

.mma-headnote {
    font-family: var(--sp-sans);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--sp-muted);
    padding-bottom: 4px;
}

/* ---------- Lecteur ---------- */
.mma-stage {
    max-width: 1120px;
    margin: 0 auto clamp(46px, 6vw, 74px);
}

.mma-player {
    position: relative;
    aspect-ratio: 16 / 9;
    background-color: #000;
    overflow: hidden;
    border: 1px solid var(--sp-line);
    box-shadow: 0 40px 90px rgba(0, 0, 0, 0.75);
}

.mma-video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    background-color: #000;
}

/* Voile posé sur le lecteur tant qu'aucun combat n'a démarré */
.mma-cover {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    border: 0;
    cursor: pointer;
    background: rgba(0, 0, 0, 0.22);
    transition: background 0.35s ease, opacity 0.35s ease;
    font-family: var(--sp-sans);
}

.mma-cover:hover { background: rgba(0, 0, 0, 0.10); }

.mma-cover.is-hidden {
    opacity: 0;
    pointer-events: none;
}

.mma-cover-play {
    width: 82px;
    height: 82px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.9);
    background: rgba(200, 16, 46, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.55);
    transition: background-color 0.35s ease, box-shadow 0.35s ease;
}

.mma-cover:hover .mma-cover-play {
    background: var(--sp-red);
    box-shadow: 0 0 0 10px rgba(200, 16, 46, 0.18), 0 10px 40px rgba(0, 0, 0, 0.55);
}

.mma-cover-play svg {
    width: 32px;
    height: 32px;
    fill: #fff;
    margin-left: 4px;
}

.mma-cover-hint {
    font-family: var(--sp-sans);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: #ffffff;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.8);
}

/* Bandeau sous le lecteur : quel combat passe, et de quoi naviguer */
.mma-nowbar {
    display: flex;
    align-items: center;
    gap: 26px;
    padding: 24px 0 22px;
    border-bottom: 1px solid var(--sp-line);
}

/* Le numéro du combat, en gros chiffre cerné de rouge */
.mma-now-num {
    flex-shrink: 0;
    font-family: var(--sp-sans);
    font-size: clamp(2.6rem, 6vw, 4.4rem);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 0.9;
    color: var(--sp-red);
}
@supports (-webkit-text-stroke: 1px #000) {
    .mma-now-num {
        color: transparent;
        -webkit-text-stroke: 1.6px var(--sp-red);
    }
}

.mma-nowtext { flex: 1; min-width: 0; }

.mma-now-title {
    font-size: clamp(1.3rem, 2.6vw, 2rem);
    font-weight: normal;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 1.1;
}

.mma-now-meta {
    margin-top: 8px;
    font-family: var(--sp-sans);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--sp-muted);
}

.mma-nowactions {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

.mma-navbtn {
    font-family: var(--sp-sans);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--sp-text);
    background: transparent;
    border: 1px solid rgba(242, 240, 238, 0.3);
    padding: 13px 20px;
    cursor: pointer;
    transition: border-color 0.3s ease, color 0.3s ease, background-color 0.3s ease;
}

.mma-navbtn:hover:not(:disabled) {
    color: #ffffff;
    background: var(--sp-red);
    border-color: var(--sp-red);
}

.mma-navbtn:disabled {
    opacity: 0.28;
    cursor: default;
}

/* ---------- Catalogue des combats ---------- */
.mma-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px 22px;
    margin-top: clamp(38px, 5vw, 58px);
}

.mma-card-btn {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    text-align: left;
    font-family: var(--font-main);
    position: relative;
}

.mma-card-media {
    display: block;
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background-color: #16161a;
    border: 1px solid transparent;
    transition: border-color 0.35s ease, box-shadow 0.35s ease;
}

.mma-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* Une légère désaturation range les vignettes derrière le
       lecteur ; aucune baisse de luminosité, la photo garde sa
       lumière. Le survol la rend entièrement à sa couleur. */
    filter: grayscale(0.3);
    transition: filter 0.45s ease;
}

.mma-card-btn:hover .mma-card-media,
.mma-card-btn:focus-visible .mma-card-media {
    border-color: rgba(242, 240, 238, 0.45);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
}

.mma-card-btn:hover .mma-card-media img,
.mma-card-btn:focus-visible .mma-card-media img {
    filter: grayscale(0);
}

/* Balayage de lumière au survol : la vignette ne bouge pas d'un pixel */
.mma-card-media::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(105deg,
                rgba(255, 255, 255, 0) 36%,
                rgba(255, 255, 255, 0.22) 50%,
                rgba(255, 255, 255, 0) 64%);
    background-size: 250% 100%;
    background-position: -140% 0;
    background-repeat: no-repeat;
    opacity: 0;
}

.mma-card-btn:hover .mma-card-media::after {
    animation: sp-balayage 0.85s ease forwards;
}

@keyframes sp-balayage {
    0%   { opacity: 0; background-position: -140% 0; }
    14%  { opacity: 1; }
    100% { opacity: 0; background-position: 240% 0; }
}

/* Pastille de lecture, révélée au survol (pas de déplacement) */
.mma-card-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 54px;
    height: 54px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.85);
    background: rgba(200, 16, 46, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
}

.mma-card-btn:hover .mma-card-play,
.mma-card-btn:focus-visible .mma-card-play {
    opacity: 1;
}

.mma-card-play svg {
    width: 22px;
    height: 22px;
    fill: #fff;
    margin-left: 3px;
}

.mma-card-time {
    position: absolute;
    bottom: 10px;
    right: 10px;
    font-family: var(--sp-sans);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: #fff;
    background: rgba(0, 0, 0, 0.7);
    padding: 5px 9px;
    pointer-events: none;
}

.mma-card-body {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding-top: 15px;
}

.mma-card-index {
    font-family: var(--sp-sans);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--sp-red);
    flex-shrink: 0;
}

.mma-card-title {
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgba(242, 240, 238, 0.88);
    transition: color 0.3s ease;
}

/* Le combat en cours de lecture reste identifiable dans la liste */
.mma-card.is-active .mma-card-media {
    border-color: var(--sp-red);
    box-shadow: 0 0 0 1px rgba(200, 16, 46, 0.45);
}

.mma-card.is-active .mma-card-media img { filter: grayscale(0); }
.mma-card.is-active .mma-card-title { color: #ffffff; }

/* Repère « à l'antenne » sur la vignette en cours */
.mma-card.is-active .mma-card-media::before {
    content: "En lecture";
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    font-family: var(--sp-sans);
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #fff;
    background: var(--sp-red);
    padding: 5px 9px;
}

@media (max-width: 1100px) {
    .mma-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
    .mma-grid { grid-template-columns: repeat(2, 1fr); gap: 22px 16px; }
    .mma-nowbar { flex-wrap: wrap; align-items: flex-start; gap: 16px; }
    .mma-nowactions { width: 100%; }
    .mma-navbtn { flex: 1; }
    .mma-headnote { padding-bottom: 0; }
}
@media (max-width: 560px) {
    .mma { padding: 58px 18px 64px; }
    .mma-grid { grid-template-columns: 1fr; gap: 24px; }
    .mma-cover-play { width: 64px; height: 64px; }
    .mma-cover-play svg { width: 26px; height: 26px; }
    .mma-navbtn span { display: none; }
}

/* ============================================================
   5. NOTRE APPROCHE
   ============================================================ */
.mma-approach {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: clamp(60px, 8vw, 104px) 24px clamp(70px, 9vw, 118px);
}

.sp-approach-head {
    padding-bottom: 26px;
    border-bottom: 1px solid var(--sp-line);
}

.sp-approach-title {
    font-size: clamp(1.8rem, 4vw, 3rem);
    font-weight: normal;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    line-height: 1.05;
    white-space: nowrap;
}
@media (max-width: 1000px) {
    .sp-approach-title { white-space: normal; }
}

.mma-cols {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(28px, 4vw, 54px);
    margin-top: clamp(38px, 5vw, 58px);
}

.mma-col-num {
    display: block;
    font-family: var(--sp-sans);
    font-size: clamp(1.7rem, 3vw, 2.4rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1;
    color: var(--sp-red);
    padding-bottom: 18px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--sp-line);
}

.mma-col-title {
    font-size: 1.3rem;
    font-weight: normal;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 14px;
    color: #ffffff;
}

.mma-col-text {
    font-size: 0.99rem;
    line-height: 1.8;
    color: var(--sp-muted);
}

/* ---------- Appel final ---------- */
.mma-cta {
    margin-top: clamp(54px, 7vw, 84px);
    padding: clamp(34px, 4vw, 48px);
    background: var(--sp-bg-2);
    border-left: 3px solid var(--sp-red);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 26px;
    flex-wrap: wrap;
}

.mma-cta-text {
    font-size: clamp(1.15rem, 2.2vw, 1.6rem);
    font-style: italic;
    color: #ffffff;
}

.mma-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: var(--sp-sans);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #ffffff;
    padding: 17px 30px;
    background: var(--sp-red);
    border: 1px solid var(--sp-red);
    transition: background-color 0.3s ease;
}

.mma-cta-btn:hover { background: #e21534; }

@media (max-width: 900px) {
    .mma-cols { grid-template-columns: 1fr; gap: 34px; }
}
@media (max-width: 560px) {
    .mma-approach { padding: 56px 18px 70px; }
    .mma-cta-btn { width: 100%; justify-content: center; }
}

/* ---------- Sur téléphone, pas d'apparition au défilement ---------- */
@media (max-width: 700px) {
    .page-sport .mg-reveal { opacity: 1; transform: none; }
}