/* ==========================================================================
   1. VARIABLES & DESIGN SYSTEM — tout fluide (type scale + spacing en clamp)
   ------------------------------------------------------------------
   Aucune valeur en px : rem / em / clamp / vw / vh / %.
   L'échelle fluide interpole entre ~375px (mobile) et ~1280px (desktop).
   ========================================================================== */
:root {
    /* --- Couleurs : thème clair (par défaut) --- */
    --bg: #edeae5;
    --text: #2a2a2a;
    --muted: #636261;
    --border: rgba(0, 0, 0, 0.08);
    --surface: #ffffff;
    --surface-hover: #fdfdfd;
    --overlay: rgba(248, 246, 242, 0.94);
    --shadow: 0 0.25rem 1.25rem rgba(0, 0, 0, 0.06);
    --shadow-hover: 0 0.875rem 2.5rem rgba(0, 0, 0, 0.12);
    --haze: rgba(255, 255, 255, 0.7);

    /* --- Typographie --- */
    --font-serif: Georgia, "Times New Roman", Times, serif;
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    /* Échelle typographique fluide */
    --fs-2xs:  clamp(0.69rem, 0.66rem + 0.13vw, 0.75rem);
    --fs-xs:   clamp(0.78rem, 0.74rem + 0.18vw, 0.875rem);
    --fs-sm:   clamp(0.85rem, 0.80rem + 0.22vw, 0.95rem);
    --fs-base: clamp(0.95rem, 0.89rem + 0.27vw, 1.0625rem);
    --fs-md:   clamp(1rem, 0.91rem + 0.40vw, 1.1875rem);
    --fs-lg:   clamp(1.06rem, 0.95rem + 0.50vw, 1.25rem);
    --fs-xl:   clamp(1.25rem, 1.05rem + 0.90vw, 1.625rem);
    --fs-2xl:  clamp(1.5rem, 1.20rem + 1.30vw, 2rem);

    /* Espacement fluide */
    --space-3xs: clamp(0.25rem, 0.23rem + 0.10vw, 0.3125rem);
    --space-2xs: clamp(0.40rem, 0.36rem + 0.18vw, 0.50rem);
    --space-xs:  clamp(0.60rem, 0.54rem + 0.27vw, 0.75rem);
    --space-sm:  clamp(0.80rem, 0.72rem + 0.36vw, 1rem);
    --space-md:  clamp(1rem, 0.86rem + 0.60vw, 1.375rem);
    --space-lg:  clamp(1.5rem, 1.28rem + 0.90vw, 2rem);
    --space-xl:  clamp(2rem, 1.60rem + 1.80vw, 3rem);
    --space-2xl: clamp(2.5rem, 1.90rem + 2.60vw, 4rem);

    /* Marges & gouttières fluides */
    --pad-side: clamp(1.25rem, 5vw, 4.5rem);
    --gap-main: clamp(1.25rem, 1rem + 1vw, 1.75rem);

    /* Dimensions de composants fluides */
    --control-size: clamp(2.75rem, 2.4rem + 1vw, 3.25rem);
    --icon-size: clamp(1rem, 0.9rem + 0.4vw, 1.25rem);
    --cover-size: clamp(4.75rem, 4rem + 3vw, 5.625rem);
    --slide-height: clamp(17.5rem, 14rem + 16vw, 23.75rem);

    /* Géométrie */
    --radius-sm: 0.25rem;
    --radius-md: 0.375rem;
    --bw: 0.0625rem;          /* filet fin */
    --bw-strong: 0.09375rem;  /* filet appuyé */
}

/* Thème sombre — forcé par l'utilisateur (data-theme="dark") */
:root[data-theme="dark"] {
    --bg: #141312;
    --text: #edeae5;
    --muted: #9a948c;
    --border: rgba(255, 255, 255, 0.12);
    --surface: #1e1c1a;
    --surface-hover: #262320;
    --overlay: rgba(20, 19, 18, 0.94);
    --shadow: 0 0.25rem 1.25rem rgba(0, 0, 0, 0.45);
    --shadow-hover: 0 0.875rem 2.75rem rgba(0, 0, 0, 0.6);
    --haze: rgba(255, 255, 255, 0.04);
}

/* Suit le réglage système tant que l'utilisateur n'a pas forcé un thème clair */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg: #141312;
        --text: #ece9e3;
        --muted: #9a948c;
        --border: rgba(255, 255, 255, 0.12);
        --surface: #1e1c1a;
        --surface-hover: #262320;
        --overlay: rgba(20, 19, 18, 0.94);
        --shadow: 0 0.25rem 1.25rem rgba(0, 0, 0, 0.45);
        --shadow-hover: 0 0.875rem 2.75rem rgba(0, 0, 0, 0.6);
        --haze: rgba(255, 255, 255, 0.04);
    }
}

/* ==========================================================================
   2. REINITIALISATION & BASE (Global CSS)
   ========================================================================== */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--bg);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    transition: background-color 0.4s ease, color 0.4s ease;
    animation: sfumato-page-in 0.6s ease both;
}

/* Brume ambiante : halo doux au centre haut, bords plus profonds (sfumato) */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(120% 80% at 50% 0%, var(--haze) 0%, transparent 60%);
}

@keyframes sfumato-page-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Focus clavier visible (accessibilité) */
a:focus-visible,
button:focus-visible,
.carousel-btn:focus-visible {
    outline: var(--bw-strong) solid var(--text);
    outline-offset: 0.2rem;
    border-radius: var(--radius-sm);
}

@media (pointer: fine) {
    body, a, button, .carousel-btn, .carousel-container {
        cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Ccircle cx='5' cy='5' r='4' fill='%23fff' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") 5 5, auto !important;
    }
}

/* ==========================================================================
   3. STRUCTURE / LAYOUT GENERAL
   ========================================================================== */
header {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-lg) var(--pad-side);
    border-bottom: var(--bw) solid var(--border);
}

.logo {
    justify-self: start;
    color: var(--text);
    font-family: var(--font-serif);
    font-size: var(--fs-md);
    font-weight: 400;
    letter-spacing: .25em;
    text-transform: uppercase;
    text-decoration: none;
}

.logo span { display: block;
    text-transform: lowercase;
    letter-spacing: 0.1em;
    font-size: var(--fs-sm);
    line-height: 1;
    color: var(--muted);}

/* Navigation simple vers les autres pages du site, centrée dans le header */
.site-nav {
    justify-self: center;
}

.site-nav ul {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    list-style: none;
}

.site-nav a {
    color: var(--muted);
    font-family: var(--font-sans);
    font-size: var(--fs-xs);
    font-weight: 400;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s ease;
}

.site-nav a:hover {
    color: var(--text);
}

.site-nav a[aria-current="page"] {
    color: var(--text);
    font-weight: 600;
}

/* Bouton burger : masqué en desktop, affiché seulement sous le breakpoint mobile */
.nav-toggle {
    display: none;
    justify-content: center;
    align-items: center;
    width: var(--control-size);
    height: var(--control-size);
    background: var(--surface);
    color: var(--text);
    border: var(--bw) solid var(--text);
    border-radius: 50%;
    transition: background 0.2s ease, color 0.2s ease;
}

.nav-toggle:hover {
    background: var(--text);
    color: var(--bg);
}

.nav-toggle svg {
    width: var(--icon-size);
    height: var(--icon-size);
    display: block;
}

.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-burger { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

.header-right {
    justify-self: end;
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.back-link {
    color: var(--muted);
    text-decoration: none;
    font-size: var(--fs-xs);
    font-weight: 400;
}

/* Bascule thème sombre / clair */
.theme-toggle {
    display: flex;
    justify-content: center;
    align-items: center;
    width: var(--control-size);
    height: var(--control-size);
    background: var(--surface);
    color: var(--text);
    border: var(--bw) solid var(--text);
    border-radius: 50%;
    transition: background 0.2s ease, color 0.2s ease;
}

.theme-toggle:hover {
    background: var(--text);
    color: var(--bg);
}

.theme-toggle svg {
    width: var(--icon-size);
    height: var(--icon-size);
    display: block;
}

/* Icône affichée selon le thème résolu */
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: block; }
    :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; }
}

.section-title {
    padding: var(--space-xl) var(--pad-side) var(--space-xs);
    font-family: var(--font-serif);
    font-size: var(--fs-xl);
    font-weight: 400;
    letter-spacing: .01em;
}

/* Lien discret mais lisible dans un titre de section (« Voir tout ») */
.section-link {
    font-family: var(--font-sans);
    font-size: var(--fs-sm);
    font-weight: 400;
    letter-spacing: 0.02em;
    color: var(--text);
    text-decoration: none;
    border-bottom: var(--bw) solid var(--muted);
    padding-bottom: 0.12em;
    margin-left: var(--space-2xs);
    white-space: nowrap;
    transition: border-color 0.2s ease, color 0.2s ease;
}

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

/* Manifeste d'accueil (accueil uniquement) */
.intro {
    padding: var(--space-xl) var(--pad-side) 0;
}

.intro-lead {
    max-width: 58ch;
    font-family: var(--font-serif);
    font-size: var(--fs-md);
    font-weight: 400;
    line-height: 1.65;
    color: var(--text);
}

/* ==========================================================================
   4. COMPOSANT : CARROUSEL D'ACCUEIL (Best Of)
   ========================================================================== */
/* Padding à gauche seulement : la bande d'images saigne jusqu'au bord droit */
.carousel-outer {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    padding: var(--space-xs) 0 var(--space-xs) var(--pad-side);
}

.carousel-container {
    display: flex;
    gap: var(--gap-main);
    width: 100%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    padding-bottom: var(--space-3xs);
    cursor: grab;
}

.carousel-container:active {
    cursor: grabbing;
}

.carousel-container::-webkit-scrollbar {
    display: none;
}

.carousel-slide {
    position: relative;
    flex: 0 0 auto;
    height: var(--slide-height);
    width: auto;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.03);
    scroll-snap-align: start;
    text-decoration: none;
    box-shadow: var(--shadow);
    transition: box-shadow 0.4s ease;
}

.carousel-slide:hover {
    box-shadow: var(--shadow-hover);
}

.carousel-slide img {
    height: 100%;
    width: auto;
    object-fit: contain;
    user-select: none;
    transition: transform 0.5s ease;
}

.carousel-slide:hover img {
    transform: scale(1.03);
}

/* Contrôles : compteur à gauche, flèches à droite, marge droite rétablie */
.carousel-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-md);
    margin-top: var(--space-3xs);
    padding-right: var(--pad-side);
    user-select: none;
}

.carousel-arrows {
    display: flex;
    gap: var(--space-xs);
}

.carousel-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: var(--control-size);
    height: var(--control-size);
    background: var(--surface);
    color: var(--text);
    border: var(--bw-strong) solid var(--text);
    border-radius: 50%;
    font-family: var(--font-serif);
    font-size: var(--fs-lg);
    line-height: 1;
    padding: 0 0 0.08em;
    appearance: none;
    -webkit-appearance: none;
    box-shadow: var(--shadow);
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.carousel-btn:hover {
    background: var(--text);
    color: var(--bg);
}

.carousel-counter {
    font-size: var(--fs-sm);
    color: var(--muted);
    font-weight: 400;
    letter-spacing: 0.05em;
}

/* ==========================================================================
   5. COMPOSANT : GRILLE MASONRY (Galerie Portfolio)
   ========================================================================== */
.masonry-gallery {
    columns: 2;
    column-gap: var(--gap-main);
    padding: var(--space-xl) var(--pad-side);
}

.masonry-item {
    display: inline-block;
    width: 100%;
    margin-bottom: var(--gap-main);
    position: relative;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.03);
    border-radius: var(--radius-sm);
    cursor: zoom-in;
    box-shadow: var(--shadow);
    transition: box-shadow 0.4s ease;
}

.masonry-item:hover {
    box-shadow: var(--shadow-hover);
}

.masonry-item img {
    width: 100%;
    height: auto;
    transition: transform 0.5s ease;
}

.masonry-item:hover img {
    transform: scale(1.04);
}

/* ==========================================================================
   6. MICRO-INTERACTIONS : OVERLAYS AU SURVOL (Hover state)
   ========================================================================== */
/* Base = carrousel : voile plein centré */
.hover-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    padding: var(--gap-main);
    background: var(--overlay);
    text-align: center;
    opacity: 0;
    transition: opacity 0.4s ease;
}

/* Album : l'œuvre reste visible, cartel compact en bas à droite, fond clair */
.masonry-item .hover-overlay {
    top: auto;
    left: auto;
    right: var(--space-sm);
    bottom: var(--space-sm);
    width: auto;
    height: auto;
    max-width: calc(100% - 2 * var(--space-sm));
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    padding: var(--space-sm) var(--space-md);
    background: var(--surface);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
    text-align: right;
    transform: translateY(0.375rem);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.masonry-item:hover .hover-overlay,
.carousel-slide:hover .hover-overlay {
    opacity: 1;
}

.masonry-item:hover .hover-overlay {
    transform: none;
}

.hover-title {
    color: var(--text);
    font-family: var(--font-serif);
    font-size: var(--fs-md);
    font-weight: 400;
    margin-bottom: var(--space-2xs);
}

.hover-meta {
    color: var(--muted);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* ==========================================================================
   7. COMPOSANT : LISTE DES ARTISTES
   ========================================================================== */
.artists-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
    gap: var(--gap-main);
    padding: var(--space-md) var(--pad-side) var(--space-2xl);
}

.artist-card {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-sm);
    background: var(--surface);
    border: var(--bw) solid var(--border);
    border-radius: var(--radius-md);
    color: inherit;
    text-decoration: none;
    box-shadow: var(--shadow);
    transition: border-color 0.2s ease, box-shadow 0.4s ease, transform 0.4s ease;
}

.artist-card:hover {
    border-color: var(--muted);
    box-shadow: var(--shadow-hover);
    transform: translateY(-0.125rem);
}

.artist-card .cover-square {
    width: var(--cover-size);
    height: var(--cover-size);
    object-fit: cover;
    background: rgba(0, 0, 0, 0.03);
    border-radius: var(--radius-md);
    flex-shrink: 0;
}

.artist-card .info-container {
    display: flex;
    flex-direction: column;
    gap: var(--space-3xs);
}

.artist-card .name {
    color: var(--text);
    font-family: var(--font-serif);
    font-size: var(--fs-md);
    font-weight: 400;
}

.artist-card .count {
    color: var(--muted);
    font-size: var(--fs-sm);
}

/* ==========================================================================
   8. ANIMATIONS « SFUMATO » : RÉVÉLATION FLOU → NET
   ========================================================================== */
/* Les œuvres émergent de la brume quand elles entrent dans le viewport */
.reveal {
    opacity: 0;
    filter: blur(0.875rem);
    transform: translateY(1.25rem);
    transition: opacity 0.9s ease, filter 0.9s ease, transform 0.9s ease;
}

.reveal.is-visible {
    opacity: 1;
    filter: blur(0);
    transform: none;
}

/* ==========================================================================
   9. COMPOSANT : HALO DE SUIVI UNIQUEMENT
   ========================================================================== */
@media (pointer: fine) {
    .custom-cursor-follower {
        position: fixed;
        width: 1.875rem;
        height: 1.875rem;
        border: var(--bw) solid var(--text);
        border-radius: 50%;
        pointer-events: none;
        z-index: 999999;
        opacity: 0.5;
        transform: translate(-50%, -50%);
        transition: transform 0.08s ease-out, width 0.2s ease, height 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
    }

    body.cursor-hover .custom-cursor-follower {
        width: 2.8125rem;
        height: 2.8125rem;
        border-color: var(--muted);
        background-color: rgba(127, 127, 127, 0.05);
        opacity: 0.8;
    }

    body.glightbox-open .custom-cursor-follower {
        border-color: #ffffff !important;
    }
}

/* ==========================================================================
   10. VISIONNEUSE AGRANDIE (GLightbox) — respiration + cartel muséal
   ========================================================================== */
/* Voile plus opaque : l'interface de page ne transparaît plus derrière */
.glightbox-container .goverlay {
    background: rgba(15, 14, 13, 0.97) !important;
}

/* On masque la bascule de thème quand la visionneuse est ouverte (évite le chevauchement avec la croix) */
body.glightbox-open .theme-toggle {
    opacity: 0;
    pointer-events: none;
}

/* Respiration autour de l'image : généreuse sur desktop (image plus petite) */
.glightbox-container .gslide-image img {
    max-height: 80vh !important;
    max-width: 86vw !important;
    border-radius: 0.125rem;
    box-shadow: 0 1.25rem 3.75rem rgba(0, 0, 0, 0.45);
}

/* Cartel : titre + matière restylés à leur position actuelle (bas de slide) */
.glightbox-container .gslide-description {
    background: transparent;
}

.glightbox-container .gdesc-inner {
    padding: var(--space-lg);
    max-width: 47.5rem;
    margin: 0 auto;
    text-align: center;
}

.glightbox-container .gslide-title {
    font-family: var(--font-serif);
    font-size: var(--fs-lg);
    font-weight: 400;
    line-height: 1.35;
    color: #f5f2ec;
    margin-bottom: var(--space-2xs);
}

.glightbox-container .gslide-desc {
    font-size: var(--fs-xs);
    line-height: 1.5;
    color: #b9b2a8;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* Cartel structuré (album) : Titre de l'œuvre puis Matière, sous le nom d'artiste */
.glightbox-container .gslide-desc .cartel-oeuvre {
    display: block;
    font-family: var(--font-serif);
    font-style: italic;
    font-size: var(--fs-base);
    line-height: 1.4;
    text-transform: none;
    letter-spacing: 0;
    color: #ece7df;
    margin-bottom: var(--space-2xs);
}

.glightbox-container .gslide-desc .cartel-matiere {
    display: block;
    font-size: var(--fs-2xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #b9b2a8;
}

/* ==========================================================================
   11. RESPONSIVE MEDIA QUERIES (breakpoints en em)
   ========================================================================== */
@media (max-width: 56.25em) {
    .masonry-gallery { columns: 2; }
}

@media (max-width: 37.5em) {
    .masonry-gallery { columns: 1; }
    .artists-list { grid-template-columns: 1fr; }

    /* Header : logo + burger + actions sur une ligne, plutôt que la grille 3 colonnes */
    header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;
    }
    .logo, .header-right { justify-self: unset; }

    .nav-toggle { display: flex; }

    /* Menu déroulant plein-largeur sous le header, masqué tant que fermé */
    .site-nav ul {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: center;
        gap: var(--space-md);
        padding: var(--space-lg) 0;
        margin: 0;
        background: var(--surface);
        border-bottom: var(--bw) solid var(--border);
        box-shadow: var(--shadow);
        z-index: 20;
    }
    .site-nav.is-open ul {
        display: flex;
    }

    /* Visionneuse : padding réduit sur mobile → image plus grande */
    .glightbox-container .gslide-image img {
        max-height: 88vh !important;
        max-width: 96vw !important;
    }
    .glightbox-container .gdesc-inner {
        padding: var(--space-sm);
    }
}

/* ==========================================================================
   12. ACCESSIBILITÉ : MOUVEMENT RÉDUIT
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    body { animation: none; }
    .reveal {
        opacity: 1 !important;
        filter: none !important;
        transform: none !important;
        transition: none !important;
    }
    .masonry-item img,
    .carousel-slide img,
    .artist-card { transition: none !important; }
    .carousel-slide:hover img,
    .masonry-item:hover img { transform: none !important; }
    .artist-card:hover { transform: none !important; }
    .masonry-item .hover-overlay {
        transform: none !important;
        transition: opacity 0.2s ease !important;
    }
}