/* ==========================================================================
   espaces.css — Espaces clients (rendu public)
   Feuille de style AUTONOME pour www.barbado-webphoto.fr
   --------------------------------------------------------------------------
   Portée : uniquement les classes .space-* générées par le rendu PHP,
   plus quelques rares surcharges explicitement autorisées
   (.space-gallery .content, .space-dl-photo, cartes de .space-downloads).

   NE RESTYLE PAS : .galerie / .download (structure), #header, #footer,
   #wrapper (mise en page globale du site).
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Tokens (définis ici, valeurs en dur — fichier autonome)
   -------------------------------------------------------------------------- */
:root {
    /* Fonds & surfaces */
    --sp-bg:            #1b2a32; /* fond de base profond */
    --sp-surface:       #21333c; /* surface surélevée (cartes) */
    --sp-band-a:        #15232b; /* bande alternée sombre */
    --sp-band-b:        #1e2f38; /* bande alternée claire */
    --sp-field:         #16232a; /* fond des champs de formulaire */

    /* Bordures */
    --sp-border:        #2c3f49;

    /* Textes */
    --sp-text-strong:   #e8eef2; /* texte fort / titres */
    --sp-text:          #b6c4cc; /* texte courant */
    --sp-text-muted:    #7e9099; /* texte discret */

    /* Accents */
    --sp-action:        #ffa310; /* ORANGE : boutons de conversion uniquement */
    --sp-interact:      #82c0df; /* CYAN : liens, survols, accents */

    /* États */
    --sp-error:         #ff7a64; /* rouge doux (erreurs) */

    /* Divers */
    --sp-radius:        10px;
    --sp-radius-lg:     14px;
    --sp-transition:    .18s ease;
}

/* --------------------------------------------------------------------------
   1. Corps & conteneur
   -------------------------------------------------------------------------- */
body.space-body {
    background: var(--sp-bg);
    color: var(--sp-text-strong);
}

/* Conteneur principal centré (#wrapper.space-wrapper) */
.space-wrapper {
    max-width: 1180px;
    margin-inline: auto;
    padding: 2.4rem 1.2rem 4rem;
    width: 100%;
}

/* --------------------------------------------------------------------------
   2. En-tête d'espace
   -------------------------------------------------------------------------- */
.space-hero {
    margin-bottom: 2.6rem;
    padding-bottom: 1.6rem;
    border-bottom: 1px solid var(--sp-border);
}

.space-hero__title {
    font-family: 'Krub', sans-serif;
    color: var(--sp-text-strong);
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    line-height: 1.15;
    margin: 0;
}

/* Sous-titre client : cyan, majuscule légère */
.space-hero__client {
    display: block;
    color: var(--sp-interact);
    font-size: 1.05rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    margin-top: .7rem;
    font-weight: 700;
}

/* Paragraphe d'intro */
.space-intro {
    color: var(--sp-text);
    max-width: 70ch;
    margin: 1rem 0 0;
    line-height: 1.6;
}

/* Blindage : le site applique `header{display:flex}` (header logo+menu) — le hero
   étant un conteneur, on force le flux vertical et on rebat la spécificité (#wrapper). */
#wrapper.space-wrapper .space-hero { display: block; }
#wrapper.space-wrapper .space-hero__title,
#wrapper.space-wrapper .space-hero__client,
#wrapper.space-wrapper .space-intro {
    display: block;
    float: none;
    clear: both;
    width: auto;
}

/* --------------------------------------------------------------------------
   Lightbox dédiée aux espaces (js/space-lightbox)
   -------------------------------------------------------------------------- */
.spx-lb {
    position: fixed; inset: 0; z-index: 1000;
    display: none; align-items: center; justify-content: center;
    background: rgba(8, 13, 17, .92); padding: 3vh 2vw;
}
.spx-lb.is-open { display: flex; }
.spx-lb__img {
    max-width: 92vw; max-height: 88vh; object-fit: contain;
    border-radius: 4px; box-shadow: 0 20px 60px rgba(0, 0, 0, .6);
}
.spx-lb__close {
    position: absolute; top: 18px; right: 22px; width: 46px; height: 46px;
    border: 0; border-radius: 50%; background: rgba(255, 255, 255, .08);
    color: #fff; font-size: 1.7rem; line-height: 1; cursor: pointer;
}
.spx-lb__close:hover { background: rgba(255, 255, 255, .18); }
.spx-lb__nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 52px; height: 52px; border: 0; border-radius: 50%;
    background: rgba(255, 255, 255, .07); color: #fff;
    font-size: 2rem; line-height: 1; cursor: pointer;
}
.spx-lb__nav:hover { background: rgba(130, 192, 223, .3); }
.spx-lb__prev { left: 2vw; }
.spx-lb__next { right: 2vw; }
.spx-lb__cap {
    position: absolute; bottom: 16px; left: 0; right: 0; margin: 0;
    text-align: center; color: #cdd8de; font-size: .9rem;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .8);
}
@media (max-width: 600px) {
    .spx-lb__nav { width: 42px; height: 42px; font-size: 1.6rem; }
    .spx-lb__img { max-width: 96vw; }
}

/* --------------------------------------------------------------------------
   3. Blocs de section
   -------------------------------------------------------------------------- */
.space-block {
    margin: 3rem 0;
}

/* Variantes (peuvent ne rien ajouter — hooks disponibles) */
.space-block--gallery {}
.space-block--videos {}
.space-block--downloads {}

/* Titre de section (notices, bloc « titre ») */
.space-heading {
    font-family: 'Krub', sans-serif;
    color: var(--sp-text-strong);
    font-size: clamp(1.5rem, 2.4vw, 1.72rem);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -.01em;
    margin: 0 0 1.5rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .65rem;
}

/* Un titre « seul » (bloc titre) : l'espacement vient du .space-block, pas de marge interne */
.space-block--heading .space-heading { margin-bottom: 0; }

/* Pastille « livraison » à côté du titre */
.space-tag {
    display: inline-block;
    font-family: 'Barlow', sans-serif;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--sp-interact);
    background: rgba(130, 192, 223, .2);
    border: 1px solid rgba(130, 192, 223, .5);
    border-radius: 999px;
    padding: .34em .9em;
    line-height: 1;
}

/* --------------------------------------------------------------------------
   4. Encart de texte riche
   -------------------------------------------------------------------------- */
.space-text {
    color: var(--sp-text);
    line-height: 1.65;
    background: var(--sp-surface);
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius);
    padding: 1.2rem 1.4rem;
}

.space-text > :first-child { margin-top: 0; }
.space-text > :last-child  { margin-bottom: 0; }

.space-text p,
.space-text ul,
.space-text ol {
    margin: 0 0 .9rem;
}

.space-text ul,
.space-text ol {
    padding-left: 1.3rem;
}

.space-text li { margin-bottom: .35rem; }

.space-text h2,
.space-text h3 {
    font-family: 'Krub', sans-serif;
    color: var(--sp-text-strong);
    line-height: 1.25;
    margin: 1.3rem 0 .5rem;
}
.space-text h2 { font-size: 1.35rem; }
.space-text h3 { font-size: 1.12rem; }

.space-text a {
    color: var(--sp-interact);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color var(--sp-transition);
}

.space-text a:hover,
.space-text a:focus-visible {
    color: #a6d3ea;
}

/* --------------------------------------------------------------------------
   5. Galerie photo
   .space-gallery est AUSSI .galerie (déjà stylée par le site).
   On ne surcharge QUE le positionnement de .content et le bouton par photo.
   -------------------------------------------------------------------------- */
.space-gallery .content {
    position: relative;
}

/* Rangées JUSTIFIÉES : chaque photo garde ses proportions (--ar = largeur/hauteur,
   posé par le rendu) et chaque ligne remplit toute la largeur ; la dernière ligne
   n'est pas étirée (élément de remplissage ::after). */
.galerie.space-gallery {
    --row: 230px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    max-width: none;
    margin: 1rem 0 0;
    padding: 0;
}
.galerie.space-gallery > .content {
    height: auto;
    flex: var(--ar, 1.5) 1 calc(var(--ar, 1.5) * var(--row));
    aspect-ratio: var(--ar, 1.5);
    min-width: 0;          /* sinon l'image (1600 px) interdit de rétrécir → débordement mobile */
    max-width: 100%;
}
.galerie.space-gallery > .content img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.galerie.space-gallery::after {
    content: "";
    flex: 999 1 calc(2 * var(--row));
}
@media (max-width: 900px) { .galerie.space-gallery { --row: 170px; gap: 8px; } }
@media (max-width: 520px) { .galerie.space-gallery { --row: 120px; gap: 6px; } }

/* Bouton de téléchargement par photo : petit rond en bas à droite */
.space-dl-photo {
    position: absolute;
    right: 8px;
    bottom: 8px;
    z-index: 3;                 /* au-dessus de l'image, sous la lightbox */
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    line-height: 1;
    text-decoration: none;
    color: var(--sp-interact);
    background: rgba(21, 35, 43, .68);
    border: 1px solid rgba(130, 192, 223, .35);
    backdrop-filter: blur(2px);
    /* Discret par défaut, se renforce au survol de la vignette */
    opacity: .55;
    transform: translateY(2px);
    transition: opacity var(--sp-transition),
                transform var(--sp-transition),
                background var(--sp-transition),
                border-color var(--sp-transition);
}

/* Apparition / renforcement au survol de la vignette ou focus du bouton */
.space-gallery .content:hover .space-dl-photo,
.space-dl-photo:hover,
.space-dl-photo:focus-visible {
    opacity: 1;
    transform: translateY(0);
    background: rgba(21, 35, 43, .9);
    border-color: var(--sp-interact);
}

/* Sur mobile/tactile : toujours visible (pas de survol fiable) */
@media (hover: none) {
    .space-dl-photo {
        opacity: 1;
        transform: none;
    }
}

/* --------------------------------------------------------------------------
   6. Galerie vidéo
   -------------------------------------------------------------------------- */
.space-videos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 18px;
}

.space-video {
    margin: 0;
}

.space-video video {
    width: 100%;
    /* Le site a une règle héritée `video:not(.videoslide):not(.illustration)…{display:none;max-width:600px}`
       (spécificité 0,4,1) qui masque toute vidéo hors liste : on la bat avec !important. */
    display: block !important;
    max-width: none !important;
    aspect-ratio: 16 / 9;
    object-fit: contain;
    background: #000;
    border-radius: var(--sp-radius);
}

.space-video figcaption {
    color: var(--sp-text);
    font-size: .85rem;
    line-height: 1.4;
    margin-top: .6rem;
}

/* Pied de vidéo : titre à gauche, lien de téléchargement à droite */
.space-video__foot {
    display: flex;
    align-items: center;
    gap: .8rem;
    flex-wrap: wrap;
}
.space-video__title { color: var(--sp-text-strong); font-size: 1.4rem; overflow-wrap: anywhere; }
/* nom du fichier sous le titre (quand un titre existe) */
.space-video__file { display: block; color: var(--sp-text-muted); font-size: 1.2rem; }
.space-video__dl {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin-left: auto;
    color: var(--sp-interact);
    font-size: 1.4rem;
    font-weight: 600;
    text-decoration: none;
    transition: color var(--sp-transition);
}
.space-video__dl:hover,
.space-video__dl:focus-visible { color: #a6d3ea; }
.space-video__dlic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(130, 192, 223, .14);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
}
.space-video__size { color: var(--sp-text-muted); font-weight: 400; }

/* --------------------------------------------------------------------------
   7. Téléchargements
   .space-downloads est AUSSI .download (une <ul>).
   Chaque <li> devient une carte cliquable.
   -------------------------------------------------------------------------- */
.space-downloads {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.space-downloads li {
    margin: 0;
}

.space-downloads li a {
    display: flex;
    align-items: center;
    gap: .8rem;
    background: var(--sp-surface);
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius);
    padding: 14px 16px;
    color: var(--sp-text-strong);
    text-decoration: none;
    line-height: 1.35;
    transition: border-color var(--sp-transition),
                transform var(--sp-transition),
                background var(--sp-transition);
}

/* Icône flèche de téléchargement */
.space-downloads li a::before {
    content: "\2193"; /* ↓ */
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(130, 192, 223, .12);
    color: var(--sp-interact);
    font-size: 1.05rem;
    font-weight: 700;
    transition: background var(--sp-transition);
}

.space-downloads li a:hover,
.space-downloads li a:focus-visible {
    border-color: var(--sp-interact);
    background: #24394380;
    transform: translateY(-2px);
}

.space-downloads li a:hover::before,
.space-downloads li a:focus-visible::before {
    background: rgba(130, 192, 223, .22);
}

/* Taille de fichier */
.space-dl-size {
    margin-left: auto;
    color: var(--sp-text-strong);
    font-size: 1.3rem;
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   8. Écran de connexion (espace protégé)
   -------------------------------------------------------------------------- */
.space-gate {
    max-width: 420px;
    margin: 0 auto;
    padding: 2.4rem;
    background: var(--sp-surface);
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius-lg);
    /* Centrage vertical agréable */
    min-height: min(60vh, 520px);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.space-gate__title {
    font-family: 'Krub', sans-serif;
    color: var(--sp-text-strong);
    font-size: 1.6rem;
    line-height: 1.2;
    margin: 0;
}

.space-gate__client {
    display: block;
    color: var(--sp-interact);
    font-size: .8rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-weight: 600;
    margin-top: .4rem;
}

.space-gate__lead {
    color: var(--sp-text);
    line-height: 1.6;
    margin: 1rem 0 1.4rem;
}

/* Message d'erreur (rouge doux) */
.space-gate__error {
    color: var(--sp-error);
    background: rgba(255, 122, 100, .1);
    border: 1px solid rgba(255, 122, 100, .35);
    border-radius: 8px;
    padding: .7rem .9rem;
    margin: 0 0 1.2rem;
    font-size: .9rem;
    line-height: 1.4;
}

.space-gate__form {
    display: flex;
    flex-direction: column;
    gap: .9rem;
}

.space-gate__form input {
    width: 100%;
    background: var(--sp-field);
    color: var(--sp-text-strong);
    border: 1px solid var(--sp-border);
    border-radius: 8px;
    padding: 12px;
    font-family: inherit;
    font-size: 1rem;
    transition: border-color var(--sp-transition),
                box-shadow var(--sp-transition);
}

.space-gate__form input::placeholder {
    color: var(--sp-text-muted);
}

.space-gate__form input:focus {
    outline: none;
    border-color: var(--sp-interact);
    box-shadow: 0 0 0 3px rgba(130, 192, 223, .18);
}

/* --------------------------------------------------------------------------
   9. Bouton principal (ORANGE, conversion)
   -------------------------------------------------------------------------- */
.space-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    background: var(--sp-action);
    color: var(--sp-bg);
    font-family: inherit;
    font-weight: 700;
    font-size: 1rem;
    line-height: 1;
    padding: 12px 20px;
    border: none;
    border-radius: 8px;
    text-decoration: none;
    cursor: pointer;
    transition: filter var(--sp-transition),
                transform var(--sp-transition);
}

.space-btn:hover,
.space-btn:focus-visible {
    filter: brightness(1.06);
    transform: translateY(-1px);
}

.space-btn:active {
    transform: translateY(0);
    filter: brightness(.98);
}

.space-btn:focus-visible {
    outline: 2px solid var(--sp-interact);
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   10. États divers (404 / expiré / vide)
   -------------------------------------------------------------------------- */
.space-notice {
    max-width: 480px;
    margin: 0 auto;
    padding: 2.4rem;
    background: var(--sp-surface);
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius-lg);
    text-align: center;
    line-height: 1.6;
    color: var(--sp-text);
    min-height: min(50vh, 440px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.space-notice > :first-child { margin-top: 0; }
.space-notice > :last-child  { margin-bottom: 0; }

/* Message vide, discret */
.space-empty {
    text-align: center;
    color: var(--sp-text-muted);
    font-style: italic;
    padding: 1.6rem 1rem;
}

/* --------------------------------------------------------------------------
   11. Responsive ≤ 600px
   Le wrapper respire, la grille vidéo passe en 1 colonne,
   titres réduits, aucun débordement horizontal.
   -------------------------------------------------------------------------- */
@media (max-width: 600px) {
    .space-wrapper {
        padding: 1.6rem 1rem 3rem;
    }

    .space-hero {
        margin-bottom: 2rem;
    }

    .space-block {
        margin: 2.2rem 0;
    }

    .space-heading {
        font-size: 1.2rem;
    }

    /* Grille vidéo : une seule colonne, plus de minmax fixe */
    .space-videos {
        grid-template-columns: 1fr;
    }

    .space-gate,
    .space-notice {
        padding: 1.8rem 1.4rem;
        min-height: auto;
    }

    /* Taille de fichier sous le libellé si peu de place */
    .space-downloads li a {
        flex-wrap: wrap;
    }

    .space-dl-size {
        margin-left: 46px; /* aligne sous le libellé, après l'icône */
    }
}

/* --------------------------------------------------------------------------
   Écran de connexion : tailles recalées sur la base du site (1rem = 10px),
   + bouton « Afficher » dans le champ mot de passe. (25/09/2026)
   -------------------------------------------------------------------------- */
.space-gate { max-width: 460px; padding: 3.2rem; font-size: 1.6rem; }
.space-gate__title { font-size: 2.6rem; }
.space-gate__client { font-size: 1.3rem; margin-top: .6rem; }
.space-gate__lead { font-size: 1.6rem; margin: 1.6rem 0 2rem; }
.space-gate__error { font-size: 1.5rem; padding: 1rem 1.2rem; margin-bottom: 1.6rem; }
.space-gate__form { gap: 1.2rem; }
.space-gate__form input { font-size: 1.7rem; padding: 12px 88px 12px 14px; }
.space-gate__form .space-btn { font-size: 1.6rem; padding: 12px 18px; }
.space-gate__field { position: relative; }
.space-gate__toggle {
    position: absolute; top: 50%; right: 8px; transform: translateY(-50%);
    background: transparent; border: 1px solid var(--sp-border); border-radius: 6px;
    color: var(--sp-text); font: inherit; font-size: 1.3rem; padding: 5px 10px; cursor: pointer;
}
.space-gate__toggle:hover, .space-gate__toggle:focus-visible { color: var(--sp-text-strong); border-color: var(--sp-interact); outline: none; }

/* --------------------------------------------------------------------------
   9. Téléchargement groupé (ZIP) d'une galerie + attente de préparation
   -------------------------------------------------------------------------- */
.space-zip {
    margin: 0 0 1rem;
}

.space-zip__btn {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .7rem 1.1rem;
    border-radius: var(--sp-radius);
    border: 1px solid var(--sp-interact);
    background: rgba(130, 192, 223, .12);
    color: var(--sp-text-strong);
    font-weight: 700;
    text-decoration: none;
    transition: background var(--sp-transition), transform var(--sp-transition);
}

.space-zip__btn::before {
    content: "\2193"; /* ↓ */
    color: var(--sp-interact);
    font-size: 1.1rem;
}

.space-zip__btn:hover,
.space-zip__btn:focus-visible {
    background: rgba(130, 192, 223, .24);
    transform: translateY(-1px);
}

.space-zip__btn .space-dl-size {
    font-size: 1.3rem;
    margin-left: 0;
    font-weight: 400;
}

.space-zip--wait,
.space-dl-wait {
    color: var(--sp-text);
    font-style: italic;
}

.space-downloads li .space-dl-wait {
    display: block;
    padding: 14px 16px;
    border: 1px dashed var(--sp-border);
    border-radius: var(--sp-radius);
}

/* Vidéo en plusieurs résolutions : « ↓ Télécharger : 720p · 1080p · 2K » */
.space-video__versions {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .35rem .8rem;
    margin-left: auto;
    color: var(--sp-text);
    font-size: 1.4rem;
}
.space-video__versions .space-video__dl {
    margin-left: 0;
    padding: .15rem .6rem;
    border: 1px solid rgba(130, 192, 223, .35);
    border-radius: 999px;
}
.space-video__versions .space-video__dl:hover,
.space-video__versions .space-video__dl:focus-visible { border-color: var(--sp-interact); }

/* Texte propre à une galerie (facultatif), sous son titre */
.space-gallery__intro { margin: 0 0 1rem; color: var(--sp-text); font-size: 1.5rem; line-height: 1.6; max-width: 80ch; }
.space-gallery__intro > :first-child { margin-top: 0; }
.space-gallery__intro > :last-child { margin-bottom: 0; }

/* ==========================================================================
   Mise en page v3 (oct. 2026) — l'image d'abord, des cartes, une couleur d'action
   - en-tête : photo de couverture de l'espace (voile uni pour la lisibilité) ;
   - chaque rubrique = une carte sur un fond plus clair que la page (deux plans) ;
   - galerie repliée : aperçu de vignettes + bouton « Voir les N photos » ;
   - cyan = repères (icônes, liens), ORANGE = action principale (« Tout télécharger »).
   Aucun dégradé, aucun filet vertical. Base du site : 1rem = 10 px.
   ========================================================================== */
:root {
    --sp-page:    #152229;                    /* fond de page (plus sombre que les cartes) */
    --sp-card:    #1d2d35;                    /* cartes de rubrique */
    --sp-card-in: #18262d;                    /* éléments posés dans une carte */
    --sp-line:    rgba(255, 255, 255, .07);   /* filets fins */
    --sp-measure: 64ch;
}
body.space-body { background: var(--sp-page); }

.space-wrapper {
    max-width: 1240px;
    padding: clamp(2.4rem, 4vw, 4.8rem) clamp(1.6rem, 3vw, 3.2rem) 8rem;
}

/* ---- En-tête ------------------------------------------------------------ */
#wrapper.space-wrapper .space-hero {
    position: relative;
    margin: 0 0 2.4rem;
    padding: clamp(3.2rem, 5vw, 5.6rem);
    border: 0;
    border-radius: 18px;
    background: var(--sp-card);
    overflow: hidden;
}
/* Avec couverture : la photo occupe le fond, un voile UNI garantit la lisibilité */
#wrapper.space-wrapper .space-hero.has-cover {
    min-height: clamp(34rem, 46vw, 52rem);
    display: flex;
    align-items: flex-end;
    background: #0d161b var(--cover) center / cover no-repeat;
}
.space-hero.has-cover::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(8, 14, 18, .62);
}
/* Sans photo : aplat bleu pétrole + motifs dessinés selon les contenus (sp_hero_art) :
   pellicule (vidéo), négatif 35 mm (photo), forme d'onde (audio), pile de feuilles (fichiers). */
#wrapper.space-wrapper .space-hero.is-plain { background: #1f3a47; }
.space-hero__art { position: absolute; inset: 0; color: #82c0df; pointer-events: none; }
.space-art { position: absolute; display: block; }
.space-art svg { display: block; width: 100%; height: auto; fill: currentColor; }
.space-art__ink { fill: #1f3a47; }                       /* numéros de vue « gravés » dans le négatif */
.space-art__frame { opacity: .45; }                      /* vues exposées du négatif */
.space-art__edge { stroke: #1f3a47; stroke-width: 3; }  /* pli du coin corné */
.space-art--film { right: 7%; top: -24%; width: clamp(14rem, 16vw, 20rem); opacity: .12; transform: rotate(14deg); }
.space-art--neg { right: -4%; top: 18%; width: clamp(48rem, 52vw, 68rem); opacity: .12; transform: rotate(-8deg); }
.space-art--neg.is-cross { top: 34%; right: -2%; opacity: .1; }
.space-art--sheets { right: 7%; bottom: -14%; width: clamp(18rem, 22vw, 26rem); opacity: .13; transform: rotate(-4deg); }
.space-art--wave { left: 0; right: 0; bottom: 0; height: 9rem; opacity: .16; }
.space-art--wave svg { height: 100%; }
.space-art--wave.is-low { height: 7rem; opacity: .13; }
#wrapper.space-wrapper .space-hero.has-wave { padding-bottom: calc(clamp(3.2rem, 5vw, 5.6rem) + 6.4rem); }
.space-hero__inner { position: relative; max-width: 78rem; }
#wrapper.space-wrapper .space-hero__eyebrow {
    display: flex;
    flex-wrap: wrap;
    gap: 0 1rem;
    margin: 0 0 1.4rem;
    color: var(--sp-interact);
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
}
#wrapper.space-wrapper .space-hero__client {
    display: inline;
    margin: 0;
    color: rgba(255, 255, 255, .75);
    font-size: inherit;
}
#wrapper.space-wrapper .space-hero__client::before { content: "·"; margin-right: 1rem; color: var(--sp-interact); }
#wrapper.space-wrapper .space-hero__title {
    color: #fff;
    font-size: clamp(3.2rem, 5vw, 5.4rem);
    line-height: 1.06;
    letter-spacing: -.02em;
}
#wrapper.space-wrapper .space-intro {
    max-width: var(--sp-measure);
    margin-top: 2rem;
    color: rgba(235, 242, 246, .86);
    font-size: 1.65rem;
    line-height: 1.65;
}
.space-intro p { margin: 0 0 .8rem; }
.space-intro > :last-child { margin-bottom: 0; }

/* Sommaire : pastilles (icône, titre, quantité) */
.space-toc { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2.8rem; }
.space-toc__item {
    display: inline-flex;
    align-items: center;
    gap: .8rem;
    padding: .8rem 1.1rem .8rem 1.3rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    color: #fff;
    font-size: 1.4rem;
    font-weight: 600;
    text-decoration: none;
    transition: background var(--sp-transition);
}
.space-hero.is-plain .space-toc__item { background: rgba(8, 20, 26, .35); }
.space-toc__item svg { width: 16px; height: 16px; color: var(--sp-interact); flex: none; }
.space-toc__n {
    min-width: 2.4rem;
    padding: .2rem .7rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .1);
    color: rgba(255, 255, 255, .8);
    font-size: 1.2rem;
    text-align: center;
}
.space-toc__item:hover,
.space-toc__item:focus-visible { background: rgba(130, 192, 223, .22); }

/* Note sur les téléchargements : petite carte d'information */
.space-note {
    display: flex;
    gap: 1.2rem;
    margin: 0 0 2.4rem;
    padding: 1.6rem 2rem;
    border-radius: 12px;
    background: var(--sp-card);
    color: var(--sp-text);
    font-size: 1.45rem;
    line-height: 1.6;
}
.space-note__ic {
    flex: none;
    width: 22px;
    height: 22px;
    margin-top: .1rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(130, 192, 223, .16);
    color: var(--sp-interact);
    font: italic 700 1.25rem/1 Georgia, serif;
}
.space-note p { margin: 0 0 .5rem; }
.space-note p:last-child { margin-bottom: 0; }
.space-note strong { color: var(--sp-text-strong); }

/* ---- Rubriques : cartes ---------------------------------------------------- */
.space-block { margin: 0 0 2.4rem; }
.space-sec {
    padding: clamp(2rem, 3vw, 3.2rem);
    border-radius: 18px;
    background: var(--sp-card);
    scroll-margin-top: 2rem;   /* arrivée depuis le sommaire */
}
.space-sec__head {
    --sp-sec-line: calc(1.2 * clamp(2.1rem, 2.4vw, 2.6rem)); /* hauteur de ligne du titre */
    display: flex;
    align-items: flex-start;   /* picto et actions centrés sur la ligne du titre, pas sur titre + quantité */
    flex-wrap: wrap;
    gap: 1.2rem 1.6rem;
    margin: 0 0 2.4rem;
}
.space-sec__ic {
    flex: none;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    margin-top: calc((var(--sp-sec-line) - 46px) / 2);
    border-radius: 12px;
    background: rgba(130, 192, 223, .13);
    color: var(--sp-interact);
}
.space-sec__ic svg { display: block; width: 22px; height: 22px; }
.space-sec__titles { flex: 1 1 24rem; min-width: 0; }
.space-sec__title {
    margin: 0;
    color: var(--sp-text-strong);
    font-family: 'Krub', sans-serif;
    font-size: clamp(2.1rem, 2.4vw, 2.6rem);
    font-weight: 700;
    line-height: 1.2;
}
.space-sec__meta { display: block; margin-top: .3rem; color: var(--sp-text-muted); font-size: 1.4rem; }
.space-sec__actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: calc((var(--sp-sec-line) - 46px) / 2); } /* bouton ≈ 46px */

/* Action principale : « Tout télécharger » (orange = action, cf. tokens) */
.space-zip__btn {
    display: inline-flex;
    align-items: center;
    gap: .8rem;
    padding: 1.1rem 1.8rem;
    border: 0;
    border-radius: 999px;
    background: var(--sp-action);
    color: #1b1206;
    font-size: 1.45rem;
    font-weight: 700;
    text-decoration: none;
    transition: filter var(--sp-transition), transform var(--sp-transition);
}
/* styles.css force tous les liens en blanc (a:not(.nav--index) … !important) : texte sombre imposé sur l'orange */
.space-sec a.space-zip__btn { color: #1b1206 !important; }
.space-zip__btn::before { content: "\2193"; color: inherit; font-size: 1.5rem; }
.space-zip__btn:hover,
.space-zip__btn:focus-visible { filter: brightness(1.08); transform: translateY(-1px); background: var(--sp-action); }
.space-sec .space-zip__btn .space-dl-size { margin: 0; color: #4a3210; font-size: 1.25rem; font-weight: 600; }
.space-zip--wait { color: var(--sp-text-muted); font-size: 1.35rem; font-style: italic; }

/* ---- Galerie repliée : aperçu + bouton ------------------------------------ */
.space-fold__summary { display: block; list-style: none; cursor: pointer; }
.space-fold__summary::-webkit-details-marker { display: none; }
.space-fold__summary .space-sec__head { margin-bottom: 2rem; }
.space-peek {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
    margin: 0 0 2rem;
}
.space-peek__item { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 10px; background: var(--sp-card-in); }
.space-peek__item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}
.space-fold__summary:hover .space-peek__item img { transform: scale(1.04); }
.space-peek__more {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: rgba(8, 14, 18, .62);
    color: #fff;
    font-size: 2rem;
    font-weight: 700;
}
.space-fold__toggle {
    display: inline-flex;
    align-items: center;
    gap: .9rem;
    padding: 1rem 1.8rem;
    border: 1px solid rgba(130, 192, 223, .45);
    border-radius: 999px;
    color: var(--sp-text-strong);
    font-size: 1.4rem;
    font-weight: 600;
    transition: background var(--sp-transition), border-color var(--sp-transition);
}
.space-fold__toggle::after {
    content: "";
    width: 7px;
    height: 7px;
    border-right: 1.5px solid var(--sp-interact);
    border-bottom: 1.5px solid var(--sp-interact);
    transform: translateY(-2px) rotate(45deg);
    transition: transform var(--sp-transition);
}
.space-fold__summary:hover .space-fold__toggle,
.space-fold__summary:focus-visible .space-fold__toggle { background: rgba(130, 192, 223, .12); border-color: var(--sp-interact); }
.space-fold__summary:focus-visible { outline: 2px solid var(--sp-interact); outline-offset: 6px; border-radius: 12px; }
/* Ouverte : l'aperçu laisse place à la galerie complète, le bouton passe en bas de l'en-tête */
.space-fold[open] .space-peek,
.space-fold[open] .space-fold__more,
.space-fold:not([open]) .space-fold__less { display: none; }
.space-fold[open] .space-fold__toggle::after { transform: translateY(2px) rotate(-135deg); }
.space-fold[open] .space-fold__summary { margin-bottom: 2.4rem; }
.space-fold__body { padding: 0; }

/* ---- Galerie : texte propre ------------------------------------------------ */
.space-gallery__intro { max-width: var(--sp-measure); margin: 0 0 2rem; font-size: 1.55rem; line-height: 1.65; }
.galerie.space-gallery { margin-top: 0; }
.galerie.space-gallery > .content { border-radius: 8px; overflow: hidden; }

/* ---- Vidéos ---------------------------------------------------------------- */
.space-videos { grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 3.2rem 2.4rem; }
.space-video video { border-radius: 10px; }
.space-video .space-video__foot { flex-direction: column; align-items: flex-start; gap: .6rem; margin-top: 1.4rem; }
.space-video__title { font-size: 1.6rem; font-weight: 600; }
.space-video__dl { margin-left: 0; font-size: 1.35rem; }
.space-video__dlic { width: 24px; height: 24px; background: rgba(130, 192, 223, .14); }

/* Vidéo / son en lecture seule : mention discrète à la place du téléchargement */
.space-readonly {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    color: var(--sp-text-muted);
    font-size: 1.3rem;
}
.space-readonly::before {
    content: "";
    width: 0;
    height: 0;
    border-left: 7px solid var(--sp-interact);
    border-top: 4.5px solid transparent;
    border-bottom: 4.5px solid transparent;
}
.space-audio__head .space-readonly { margin-left: auto; }

/* ---- Audio : tuiles posées dans la carte, 2 colonnes en grand écran ------ */
.space-audios {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.2rem;
}
@media (min-width: 900px) { .space-audios { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.space-audio { margin: 0; padding: 1.6rem 1.8rem 1.8rem; border-radius: 12px; background: var(--sp-card-in); }
.space-audio__head { display: flex; align-items: baseline; flex-wrap: wrap; gap: .6rem 1.6rem; margin-bottom: 1.2rem; }
.space-audio__title { font-size: 1.55rem; font-weight: 600; }
.space-audio__head .space-video__dl { margin-left: auto; }
.space-audio audio {
    display: block !important;   /* règle héritée du site sur les médias */
    width: 100%;
    max-width: none !important;
    height: 40px;
    color-scheme: dark;          /* lecteur sombre (Chrome, Edge, Firefox) */
}

/* ---- Listes de fichiers (téléchargements, qualité d'origine) ------------- */
.space-sec .space-downloads { gap: .8rem; }
.space-sec .space-downloads li { margin: 0; }
.space-sec .space-downloads li a {
    gap: 1.4rem;
    padding: 1.5rem 1.8rem;
    border: 0;
    border-radius: 12px;
    background: var(--sp-card-in);
    font-size: 1.5rem;
}
.space-sec .space-downloads li a::before { width: 32px; height: 32px; background: rgba(130, 192, 223, .14); }
.space-sec .space-downloads li a:hover,
.space-sec .space-downloads li a:focus-visible { background: #20333c; transform: none; }
.space-sec .space-dl-size { color: var(--sp-text-muted); font-size: 1.3rem; }
.space-sec .space-downloads li .space-dl-wait { padding: 1.5rem 1.8rem; border: 1px dashed var(--sp-line); border-radius: 12px; }

/* ---- Texte libre et intertitres (hors cartes) ----------------------------- */
.space-block--text { margin: 4rem 0 3.2rem; }
.space-block--text .space-text {
    max-width: var(--sp-measure);
    padding: 0;
    border: 0;
    background: none;
    font-size: 1.6rem;
    line-height: 1.7;
}
.space-block--heading { margin: 5.6rem 0 2rem; }
.space-block--heading .space-heading { font-size: clamp(2.6rem, 3.6vw, 3.4rem); line-height: 1.15; }
.space-block--heading + .space-block--text { margin-top: 0; }

@media (max-width: 640px) {
    #wrapper.space-wrapper .space-hero { padding: 2.4rem 2rem; border-radius: 14px; }
    #wrapper.space-wrapper .space-hero.has-cover { min-height: 40rem; }
    .space-art--film { width: 10rem; right: -1.6rem; top: -12%; }
    .space-art--neg { width: 34rem; right: -10rem; top: auto; bottom: 2rem; }
    .space-art--sheets { width: 13rem; right: -2.4rem; bottom: -4rem; }
    .space-art--wave { height: 5.6rem; }
    .space-sec { border-radius: 14px; }
    .space-sec__ic { width: 40px; height: 40px; margin-top: calc((var(--sp-sec-line) - 40px) / 2); }
    .space-sec__actions { flex-basis: 100%; margin-top: 0; }
    .space-peek { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .space-peek__item:nth-child(n+4) { display: none; }
    .space-videos { grid-template-columns: 1fr; gap: 2.8rem; }
    .space-audio__head .space-video__dl { margin-left: 0; }
}