/* =============================================
   OC ESCALADE — entry stylesheet
   Tokens design system inlinés + reset + composants.
   Aucune valeur en dur : tout passe par les custom properties.
   ============================================= */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Serif+Display:ital@0;1&family=Space+Mono:wght@400;700&display=swap');

/* === DESIGN TOKENS === */
:root {
    /* --- Fonds clairs, chauds --- */
    --calcaire:    #ece6d4;
    --creme:       #f5efde;
    --chalk-light: #faf6e8;
    --paper:       #fffaf0;

    /* --- Foreground --- */
    --forest:    #1f2618;
    --bark:      #3a3d2c;
    --moss-grey: #6b7058;
    --moss-mute: rgba(107,112,88,0.55);

    /* --- Accent terracotta --- */
    --terracotta:       #c45c30;
    --terracotta-light: #d96f3f;
    --terracotta-deep:  #8b3a22;
    --terracotta-soft:  #f0d4c0;

    /* --- Nature --- */
    --moss:        #5a8c40;
    --moss-light:  #79a55c;
    --moss-soft:   #dfe4c4;
    --lichen:      #d4ad3e;
    --lichen-light:#e2bf57;
    --lichen-soft: #f3e7c4;

    /* --- Holds (niveaux/badges uniquement, jamais grandes surfaces) --- */
    --hold-red:    #e44a3a;
    --hold-blue:   #2974c4;
    --hold-yellow: #f3c33a;
    --hold-green:  #57aa42;
    --hold-purple: #9558c4;
    --hold-black:  #1f2618;
    --hold-white:  #faf6e8;

    /* --- Surfaces --- */
    --stone:           #f0ebe0;

    /* --- Hairlines --- */
    --hairline:        rgba(31,38,24,0.10);
    --hairline-strong: rgba(31,38,24,0.22);
    --hairline-soft:   rgba(31,38,24,0.05);

    /* --- Sémantique --- */
    --bg:           var(--calcaire);
    --bg-elevated:  var(--creme);
    --bg-deep:      var(--paper);
    --fg:           var(--forest);
    --fg-muted:     var(--moss-grey);
    --accent:       var(--terracotta);
    --accent-hover: var(--terracotta-light);
    --accent-on:    var(--chalk-light);
    --success:      var(--moss);
    --warning:      var(--lichen);
    --info:         var(--hold-blue);
    --danger:       var(--hold-red);

    /* --- Typo --- */
    --font-display: 'Bebas Neue', 'Oswald', 'Impact', sans-serif;
    --font-serif:   'DM Serif Display', 'Playfair Display', serif;
    --font-mono:    'Space Mono', 'IBM Plex Mono', ui-monospace, monospace;

    --tracked-tight:  0.03em;
    --tracked-loose:  0.15em;
    --tracked-cap:    0.25em;
    --tracked-cap-lg: 0.30em;

    /* --- Espacement --- */
    --space-1:  0.25rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-5:  1.5rem;
    --space-6:  2rem;
    --space-8:  3rem;
    --space-10: 4rem;
    --space-12: 6rem;

    /* --- Bordures --- */
    --radius-0:      0px;
    --radius-pill:   999px;
    --radius-circle: 50%;

    /* --- Ombres --- */
    --shadow-flat: 0 1px 0 rgba(31,38,24,0.06);
    --shadow-card: 0 1px 2px rgba(31,38,24,0.06), 0 8px 24px rgba(31,38,24,0.04);
    --shadow-hold: 0 6px 18px rgba(196,92,48,0.20), inset 0 -2px 4px rgba(0,0,0,0.18);
    --shadow-glow: 0 0 32px rgba(196,92,48,0.10);

    /* --- Transitions --- */
    --t-fast: 0.15s ease;
    --t-base: 0.25s ease;
    --t-slow: 0.7s ease;

    /* === ALIASES DARK-THEME (compatibilité design explorations) === */
    --chalk:     var(--forest);
    --warm-grey: var(--moss-grey);
    --deep:      var(--bark);
}

/* === TYPE UTILITAIRES === */
.t-eyebrow, .eyebrow {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: var(--tracked-cap-lg);
    text-transform: uppercase;
    color: var(--accent);
}

.t-eyebrow-muted {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: var(--tracked-cap);
    text-transform: uppercase;
    color: var(--fg-muted);
}

.t-display, h1.display {
    font-family: var(--font-display);
    font-size: clamp(4rem, 10vw, 8.5rem);
    line-height: 0.9;
    letter-spacing: 0.02em;
    color: var(--fg);
    text-transform: uppercase;
}

.t-h1, h1 {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    line-height: 0.95;
    letter-spacing: var(--tracked-tight);
    text-transform: uppercase;
    color: var(--fg);
}

.t-h2, h2 {
    font-family: var(--font-display);
    font-size: clamp(2rem, 3.5vw, 3rem);
    line-height: 1;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--fg);
}

.t-h3, h3 {
    font-family: var(--font-display);
    font-size: 1.6rem;
    letter-spacing: 0.05em;
    line-height: 1.05;
    text-transform: uppercase;
    color: var(--fg);
}

.t-italic, .italic-display {
    font-family: var(--font-serif);
    font-style: italic;
    color: var(--fg-muted);
}

.t-body, p {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    line-height: 1.75;
    color: var(--fg-muted);
}

.t-body-lg {
    font-family: var(--font-mono);
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--fg);
}

.t-meta {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    color: var(--fg-muted);
}

.t-caption {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--fg-muted);
}

.t-mono-data {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--fg);
}

code, .t-code {
    font-family: var(--font-mono);
    font-size: 0.85em;
    color: var(--accent);
    background: var(--terracotta-soft);
    padding: 0.1em 0.35em;
}

/* === RESET === */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    background: var(--bg);
    color: var(--fg);
    font-family: var(--font-mono);
    line-height: 1.6;
    min-height: 100vh;
    min-height: 100svh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-tap-highlight-color: transparent;
    text-rendering: optimizeLegibility;
}

img,
svg,
video {
    max-width: 100%;
    display: block;
}

button {
    font: inherit;
    color: inherit;
    background: transparent;
    border: 0;
    cursor: pointer;
}

a {
    color: var(--accent);
    text-decoration: none;
    transition: color var(--t-fast);
}

a:hover {
    color: var(--accent-hover);
}

ul,
ol {
    list-style: none;
}

input,
textarea,
select {
    font: inherit;
    color: inherit;
    background: transparent;
    border: 0;
    border-radius: var(--radius-0);
}

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

/* === LAYOUT HELPERS === */
.container {
    max-width: 920px;
    margin: 0 auto;
    padding: 0 var(--space-5);

    &.container--wide { max-width: 1200px; }
}

.page {
    padding-top: 70px;
    min-height: 100vh;
    min-height: 100svh;
}

.section {
    padding-block: var(--space-10);

    &.section--tight { padding-block: var(--space-8); }
}

.stack-1 { display: flex; flex-direction: column; gap: var(--space-1); }
.stack-2 { display: flex; flex-direction: column; gap: var(--space-2); }
.stack-3 { display: flex; flex-direction: column; gap: var(--space-3); }
.stack-4 { display: flex; flex-direction: column; gap: var(--space-4); }
.stack-5 { display: flex; flex-direction: column; gap: var(--space-5); }
.stack-6 { display: flex; flex-direction: column; gap: var(--space-6); }

/* === ACCESSIBILITY === */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ════════════════════════════════════════
   Composants
   ════════════════════════════════════════ */

/* --- article --- */
.article-body {
    font-family: var(--font-mono);
    font-size: 0.9rem;
    line-height: 1.85;
    color: var(--fg);

    h2 {
        font-family: var(--font-display);
        font-size: 2rem;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        margin-top: var(--space-8);
        margin-bottom: var(--space-4);
    }

    h3 {
        font-family: var(--font-display);
        font-size: 1.4rem;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        margin-top: var(--space-6);
        margin-bottom: var(--space-3);
    }

    p { margin-bottom: var(--space-4); }

    a {
        color: var(--accent);
        border-bottom: 1px solid var(--accent);

        &:hover {
            color: var(--accent-hover);
            border-color: var(--accent-hover);
        }
    }

    ul,
    ol {
        list-style-position: outside;
        padding-left: var(--space-5);
        margin-bottom: var(--space-4);
    }

    ul li { list-style: disc; margin-bottom: var(--space-2); }
    ol li { list-style: decimal; margin-bottom: var(--space-2); }

    blockquote {
        border-left: 3px solid var(--accent);
        padding-left: var(--space-5);
        margin: var(--space-6) 0;
        font-family: var(--font-serif);
        font-style: italic;
        color: var(--fg-muted);
        font-size: 1.1rem;
    }

    .pull-quote {
        margin: var(--space-8) calc(-1 * var(--space-4));
        padding: var(--space-6) var(--space-6) var(--space-6) var(--space-7);
        border-left: 3px solid var(--accent);
        background: var(--stone, #f0ebe0);
        font-family: var(--font-serif);
        font-style: italic;
        font-size: 1.15rem;
        line-height: 1.5;
        color: var(--fg);

        p { margin: 0; }
        p::first-letter { all: unset; }

        cite {
            display: block;
            margin-top: var(--space-4);
            font-family: var(--font-mono);
            font-style: normal;
            font-size: 0.55rem;
            letter-spacing: 0.28em;
            text-transform: uppercase;
            color: var(--fg-muted);
        }
    }
}

/* --- article-excerpt --- */
.article-excerpt {
    font-family: var(--font-mono);
    font-size: 1rem;
    line-height: 1.7;
    color: var(--fg-muted);
    max-width: 68ch;
    border-left: 3px solid var(--accent);
    padding-left: var(--space-5);
}

/* --- article-media --- */
.article-media {
    margin: 0;

    img {
        display: block;
        width: 100%;
        max-height: 520px;
        object-fit: cover;
    }
}

/* --- article-gallery --- */
.article-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-3);
}

.article-gallery-item {
    margin: 0;
    overflow: hidden;

    img {
        display: block;
        width: 100%;
        height: 220px;
        object-fit: cover;
        transition: opacity 0.2s ease;

        &:hover { opacity: 0.85; }
    }
}

.article-gallery-caption {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    line-height: 1.5;
    letter-spacing: 0.04em;
    color: var(--fg-muted);
    padding: var(--space-2) var(--space-3);
    background: var(--bg-elevated);
    border-top: 1px solid var(--hairline);
}

/* --- article-section-title --- */
.article-section-title {
    font-family: var(--font-display);
    font-size: 1.6rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: var(--space-6);
    color: var(--fg);
}

/* --- compe --- */
.compe-podium {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: var(--space-3);
    margin-bottom: var(--space-8);
}

.compe-podium-step {
    flex: 1;
    max-width: 200px;
    padding: var(--space-5);
    background: var(--stone);
    text-align: center;
    border-top: 4px solid;

    &--first  { border-color: #c9a227; min-height: 130px; }
    &--second { border-color: #9ba0a8; min-height: 110px; }
    &--third  { border-color: #a0634e; min-height: 95px; }
}

.compe-podium-place {
    font-family: var(--font-display);
    font-size: 3rem;
    line-height: 1;
    color: var(--fg-muted);
    display: block;
    margin-bottom: var(--space-2);
}

.compe-podium-name {
    font-family: var(--font-display);
    font-size: 1rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: var(--space-1);
}

.compe-podium-score {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--fg-muted);
}

.compe-results {
    font-family: var(--font-mono);
    font-size: 0.8rem;
}

.compe-results-header {
    display: grid;
    grid-template-columns: 3rem 1fr 1fr 1fr;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    font-size: 0.65rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--fg-muted);
    border-bottom: 1px solid var(--hairline-strong);
}

.compe-results-row {
    display: grid;
    grid-template-columns: 3rem 1fr 1fr 1fr;
    gap: var(--space-3);
    padding: var(--space-3);
    border-bottom: 1px solid var(--hairline);

    &--occ { background: color-mix(in srgb, var(--accent) 8%, transparent); }
}

.compe-results-rank { color: var(--fg-muted); }
.compe-results-name { font-family: var(--font-display); font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.04em; }
.compe-results-score { color: var(--accent); }

/* --- mate --- */
.mate-product {
    display: grid;
    grid-template-columns: 38% 1fr;
    gap: 0;
    background: var(--stone);

    @media (max-width: 600px) { grid-template-columns: 1fr; }
}

.mate-product-photo {
    background: repeating-linear-gradient(
        45deg,
        var(--stone) 0,
        var(--stone) 8px,
        color-mix(in srgb, var(--hairline) 60%, transparent) 8px,
        color-mix(in srgb, var(--hairline) 60%, transparent) 16px
    );
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 220px;
    overflow: hidden;

    img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

.mate-product-photo-placeholder {
    font-size: 4rem;
    color: var(--fg-muted);
    opacity: 0.3;
}

.mate-product-info {
    padding: var(--space-6);
}

.mate-product-ref {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--fg-muted);
    margin-bottom: var(--space-2);
}

.mate-product-name {
    font-family: var(--font-display);
    font-size: 1.6rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: var(--space-3);
}

.mate-product-price {
    font-family: var(--font-display);
    font-size: 2rem;
    color: var(--accent);
    margin-bottom: var(--space-4);
}

.mate-product-price-unit {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--fg-muted);
    margin-left: var(--space-2);
}

.mate-specs {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-top: 1px solid var(--hairline);
}

.mate-specs-row {
    display: flex;
    justify-content: space-between;
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--hairline);
    font-family: var(--font-mono);
    font-size: 0.75rem;

    &--ok .mate-specs-value { color: var(--success); }
}

.mate-specs-label { color: var(--fg-muted); }

.mate-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3);
    margin-top: var(--space-6);
}

.mate-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-5);
    background: var(--stone);
    border: 1px solid var(--hairline);
    text-align: center;
}

.mate-stat-value {
    font-family: var(--font-display);
    font-size: 2.5rem;
    color: var(--accent);
}

.mate-stat-key {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--fg-muted);
}

/* --- topo --- */
.topo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--space-3);
    margin-bottom: var(--space-6);
}

.topo-route {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--stone);
    overflow: hidden;
}

.topo-route-num {
    position: absolute;
    top: var(--space-2);
    right: var(--space-3);
    font-family: var(--font-display);
    font-size: 2.5rem;
    color: var(--fg);
    opacity: 0.06;
    line-height: 1;
    pointer-events: none;
}

.topo-route-color {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.3), inset 0 -1px 2px rgba(255,255,255,0.15);

    &--jaune  { background: #e8c840; }
    &--vert   { background: #4a9e5c; }
    &--bleu   { background: #3a6fbf; }
    &--rouge  { background: #c4593a; }
    &--noir   { background: #2a2826; border: 1px solid var(--hairline-strong); }
    &--orange { background: #d97b35; }
    &--blanc  { background: #f0ebe4; border: 1px solid var(--hairline-strong); }
    &--violet { background: #7c5cbf; }
}

.topo-route-name {
    font-family: var(--font-display);
    font-size: 0.9rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: var(--space-1);
}

.topo-route-grade {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--accent);
    font-weight: bold;
}

.topo-route-opener {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    color: var(--fg-muted);
    letter-spacing: 0.1em;
}

.topo-actions {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
}

/* --- sortie article (sr-*) --- */

/* Hero */
.sr-hero {
    position: relative;
    min-height: 72vh;
    min-height: 72svh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
    background: var(--bark);
}
.sr-hero-photo {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    z-index: 0;
}
.sr-hero-photo::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(31,38,24,0.10) 0%, rgba(31,38,24,0.38) 50%, rgba(31,38,24,0.92) 100%);
}
.sr-hero-cat {
    position: absolute;
    top: 1rem;
    left: 1.25rem;
    z-index: 2;
    font-family: var(--font-mono);
    font-size: 0.55rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--chalk-light);
    background: var(--hold-green);
    padding: 0.45rem 0.7rem;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}
.sr-hero-cat::before {
    content: '';
    width: 7px;
    height: 7px;
    background: var(--chalk-light);
    border-radius: 50%;
    box-shadow: inset 0 -1px 1px rgba(0,0,0,0.2);
}
.sr-hero-content {
    position: relative;
    z-index: 1;
    padding: 0 1.25rem 2.5rem;
    width: 100%;
}
.sr-hero-eye {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    font-family: var(--font-mono);
    font-size: 0.52rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(250,246,232,0.85);
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
.sr-hero-eye-dot {
    width: 3px;
    height: 3px;
    background: var(--lichen);
    border-radius: 50%;
    flex-shrink: 0;
}
.sr-hero-title {
    font-family: var(--font-display);
    font-size: clamp(2.4rem, 11vw, 3.4rem);
    line-height: 0.9;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--chalk-light);
    text-shadow: 0 2px 20px rgba(31,38,24,0.4);
    margin-bottom: 1rem;
}
.sr-hero-title-it {
    display: block;
    font-family: var(--font-serif);
    font-style: italic;
    text-transform: none;
    color: var(--lichen);
    font-size: 0.78em;
    letter-spacing: -0.01em;
    margin-top: 0.1em;
}

/* Inscriptions bar */
.sr-inscr {
    background: var(--forest);
    color: var(--chalk-light);
    padding: 1.1rem 1.25rem;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 1rem;
    align-items: center;
    border-bottom: 1px solid var(--hairline);
}
.sr-inscr-status {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-mono);
    font-size: 0.55rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    padding: 0.45rem 0.7rem;
    border: 1px solid;
    white-space: nowrap;
}
.sr-inscr-status::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}
.sr-inscr-status[data-s="ouvert"]  { color: var(--moss-light); border-color: var(--moss-light); }
.sr-inscr-status[data-s="ouvert"]::before  { background: var(--moss-light); box-shadow: 0 0 8px var(--moss-light); }
.sr-inscr-status[data-s="complet"] { color: var(--lichen); border-color: var(--lichen); }
.sr-inscr-status[data-s="complet"]::before { background: var(--lichen); }
.sr-inscr-status[data-s="bientot"] { color: var(--chalk-light); border-color: rgba(250,246,232,0.4); }
.sr-inscr-status[data-s="bientot"]::before { background: var(--chalk-light); }
.sr-inscr-status[data-s="ferme"]   { color: var(--moss-grey); border-color: var(--moss-grey); }
.sr-inscr-status[data-s="ferme"]::before   { background: var(--moss-grey); }
.sr-inscr-places {
    font-family: var(--font-mono);
    font-size: 0.55rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(250,246,232,0.7);
}
.sr-inscr-places strong {
    font-family: var(--font-display);
    font-size: 1.4rem;
    letter-spacing: 0.02em;
    color: var(--lichen);
    margin-right: 0.3rem;
    font-weight: normal;
}
.sr-inscr-cta {
    background: var(--terracotta);
    color: var(--chalk-light);
    border: none;
    padding: 0.85rem 1rem;
    font-family: var(--font-mono);
    font-size: 0.55rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-weight: 700;
    transition: background var(--t-fast);
    cursor: pointer;
}
.sr-inscr-cta:hover:not(:disabled) { background: var(--terracotta-light); }
.sr-inscr-cta.disabled,
.sr-inscr-cta:disabled {
    background: rgba(250,246,232,0.08);
    color: rgba(250,246,232,0.4);
    cursor: not-allowed;
    border: 1px solid rgba(250,246,232,0.15);
}
@media (max-width: 560px) {
    .sr-inscr { grid-template-columns: 1fr; gap: 0.75rem; }
    .sr-inscr-cta { width: 100%; }
}

/* Key meta bar */
.sr-keymeta {
    border-bottom: 1px solid var(--hairline);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background-color: var(--hairline);
}
.sr-keymeta > div {
    background: var(--creme);
    padding: 1rem 1rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.sr-keymeta-k {
    font-family: var(--font-mono);
    font-size: 0.48rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--moss-grey);
}
.sr-keymeta-v {
    font-family: var(--font-display);
    font-size: 1.1rem;
    color: var(--forest);
    letter-spacing: 0.03em;
    text-transform: uppercase;
    line-height: 1;
}
.sr-keymeta-sub {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 0.72rem;
    color: var(--moss-grey);
    text-transform: none;
    letter-spacing: 0;
    display: block;
    margin-top: 0.25rem;
    line-height: 1.3;
}
@media (max-width: 560px) {
    .sr-keymeta { grid-template-columns: 1fr 1fr; }
    .sr-keymeta > div:last-child { grid-column: span 2; border-top: 1px solid var(--hairline); }
}

/* Section shell */
.sr-section {
    padding: 2.5rem 1.25rem;
    border-bottom: 1px solid var(--hairline);
    background: var(--bg);
}
.sr-section--calcaire { background: var(--calcaire); }
.sr-section--creme    { background: var(--creme); }
.sr-section--chalk    { background: var(--chalk-light); }
.sr-section-inner {
    max-width: 44rem;
    margin: 0 auto;
}
.sr-eye {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--font-mono);
    font-size: 0.55rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--terracotta);
    margin-bottom: 0.6rem;
}
.sr-eye::before {
    content: '';
    width: 1.25rem;
    height: 1px;
    background: var(--terracotta);
    flex-shrink: 0;
}
.sr-title {
    font-family: var(--font-display);
    font-size: 1.7rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--forest);
    line-height: 1;
    margin-bottom: 1.5rem;
}
.sr-title .sr-title-it {
    font-family: var(--font-serif);
    font-style: italic;
    text-transform: none;
    color: var(--moss);
    font-size: 0.72em;
    display: block;
    margin-top: 0.15em;
    letter-spacing: -0.01em;
}

/* Drop cap on first paragraph of récit */
.sr-article-body p:first-of-type::first-letter {
    font-family: var(--font-display);
    font-size: 3.2rem;
    float: left;
    line-height: 0.9;
    margin: 0.15rem 0.65rem 0 0;
    color: var(--terracotta);
    letter-spacing: 0;
}

/* Conditions grid */
.sr-conditions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: var(--hairline);
    border: 1px solid var(--hairline);
}
.sr-cond {
    background: var(--chalk-light);
    padding: 1rem 1rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.sr-cond-k {
    font-family: var(--font-mono);
    font-size: 0.48rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--moss-grey);
}
.sr-cond-v {
    font-family: var(--font-display);
    font-size: 1.1rem;
    color: var(--forest);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    line-height: 1;
}
.sr-cond-sub {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 0.72rem;
    color: var(--moss-grey);
    text-transform: none;
    letter-spacing: 0;
    display: block;
    margin-top: 0.3rem;
    line-height: 1.4;
}

/* Voies */
.sr-voies { display: flex; flex-direction: column; gap: 0; }
.sr-voie {
    background: var(--chalk-light);
    border: 1px solid var(--hairline);
    padding: 1.1rem 1.1rem 0.4rem;
}
.sr-voie + .sr-voie { border-top: none; }
.sr-voie-head {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.8rem;
    align-items: baseline;
    padding-bottom: 0.85rem;
    border-bottom: 1px dashed var(--hairline);
    margin-bottom: 0.6rem;
}
.sr-voie-num {
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: var(--terracotta);
    line-height: 0.9;
    letter-spacing: 0.02em;
    min-width: 1.6rem;
}
.sr-voie-name {
    font-family: var(--font-display);
    font-size: 1.15rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--forest);
    line-height: 1;
}
.sr-voie-name-sub {
    display: block;
    font-family: var(--font-serif);
    font-style: italic;
    text-transform: none;
    font-size: 0.78rem;
    color: var(--moss-grey);
    letter-spacing: 0;
    margin-top: 0.3rem;
    line-height: 1.4;
    font-weight: normal;
}
.sr-voie-lcount {
    font-family: var(--font-mono);
    font-size: 0.5rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--moss-grey);
    border: 1px solid var(--hairline-strong);
    padding: 0.3rem 0.5rem;
    white-space: nowrap;
    align-self: start;
}
.sr-voie-lcount strong {
    font-family: var(--font-display);
    font-size: 0.85rem;
    color: var(--forest);
    margin-right: 0.2rem;
    letter-spacing: 0.02em;
    font-weight: normal;
}
.sr-longueurs { display: flex; flex-direction: column; }
.sr-longueur {
    display: grid;
    grid-template-columns: 1.8rem 4.5rem 1fr;
    gap: 0.7rem;
    align-items: baseline;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--hairline-soft);
}
.sr-longueur:last-child { border-bottom: none; padding-bottom: 0.9rem; }
.sr-longueur-i {
    font-family: var(--font-mono);
    font-size: 0.5rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--moss-grey);
}
.sr-longueur-i::before { content: 'L'; color: var(--terracotta); }
.sr-longueur-grade {
    font-family: var(--font-display);
    font-size: 0.95rem;
    color: var(--forest);
    letter-spacing: 0.04em;
    line-height: 1;
}
.sr-longueur-style {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 0.78rem;
    color: var(--bark);
    line-height: 1.4;
}

/* Gallery mosaic */
.sr-gallery-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.sr-gallery-count {
    font-family: var(--font-mono);
    font-size: 0.55rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--moss-grey);
}
.sr-gallery-count strong {
    color: var(--terracotta);
    font-family: var(--font-display);
    font-size: 1.1rem;
    letter-spacing: 0.02em;
    margin-right: 0.25rem;
    font-weight: normal;
}
.sr-gallery {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.4rem;
}
.sr-photo {
    position: relative;
    overflow: hidden;
    background: var(--creme);
    cursor: pointer;
}
.sr-photo-img {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    aspect-ratio: 1;
    transition: transform var(--t-base);
}
.sr-photo:hover .sr-photo-img { transform: scale(1.03); }
.sr-photo::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(31,38,24,0.7));
    pointer-events: none;
}
.sr-photo-cap {
    position: absolute;
    bottom: 0.5rem;
    left: 0.6rem;
    right: 0.6rem;
    z-index: 1;
    font-family: var(--font-mono);
    font-size: 0.45rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--chalk-light);
    line-height: 1.4;
}
.sr-photo--hero  { grid-column: span 6; }
.sr-photo--hero .sr-photo-img { aspect-ratio: 16 / 9; }
.sr-photo--big-l { grid-column: span 4; }
.sr-photo--big-l .sr-photo-img { aspect-ratio: 4 / 3; }
.sr-photo--sm    { grid-column: span 2; }
.sr-photo--sq    { grid-column: span 3; }
.sr-photo--sq .sr-photo-img { aspect-ratio: 1; }
.sr-photo--wide  { grid-column: span 6; }
.sr-photo--wide .sr-photo-img { aspect-ratio: 16 / 9; }
.sr-photo--third { grid-column: span 2; }
@media (max-width: 640px) {
    .sr-gallery { grid-template-columns: repeat(3, 1fr); }
    .sr-photo--hero, .sr-photo--wide { grid-column: span 3; }
    .sr-photo--big-l { grid-column: span 2; }
    .sr-photo--sm, .sr-photo--sq, .sr-photo--third { grid-column: span 1; }
}

/* Prev / next nav */
.sr-navpage {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--hairline);
    border-top: 1px solid var(--hairline);
}
.sr-navpage a {
    background: var(--creme);
    padding: 1.25rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    text-decoration: none;
    color: inherit;
    transition: background var(--t-fast);
}
.sr-navpage a:hover { background: var(--chalk-light); }
.sr-navpage-k {
    font-family: var(--font-mono);
    font-size: 0.48rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--terracotta);
}
.sr-navpage-v {
    font-family: var(--font-display);
    font-size: 1rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--forest);
    line-height: 1.1;
}
.sr-navpage-next { text-align: right; }

/* --- club events --- */
.club-events {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.club-event {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: var(--space-5);
    align-items: start;
    padding: var(--space-5);
    background: var(--stone);
    border-left: 3px solid var(--hairline-strong);

    &--ag          { border-color: var(--accent); }
    &--inscription { border-color: var(--moss, #5a8a5c); }
    &--reunion     { border-color: var(--fg-muted); }
    &--brevet      { border-color: var(--hold-purple); }
    &--fermeture   { border-color: var(--fg-muted); }

    &--featured {
        grid-template-columns: 1fr;
        background: var(--surface-2, #2a2624);
        padding: var(--space-7);
    }
}

.club-event-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    line-height: 1;
}

.club-event-day {
    font-family: var(--font-display);
    font-size: 2rem;
    color: var(--accent);
    display: block;
}

.club-event-month {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.15em;
    color: var(--fg-muted);
}

.club-event-type {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--fg-muted);
    display: block;
    margin-bottom: var(--space-2);
}

.club-event-title {
    font-family: var(--font-display);
    font-size: 1.2rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: var(--space-3);
}

.club-event-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-bottom: var(--space-3);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--fg-muted);
}

.club-event-description {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--fg-muted);
    line-height: 1.6;
    margin-bottom: var(--space-4);
}

/* --- badge --- */
.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-mono);
    font-size: 0.55rem;
    letter-spacing: var(--tracked-loose);
    text-transform: uppercase;
    padding: var(--space-1) var(--space-3);
    border: 1px solid currentColor;
    border-radius: var(--radius-0);
    line-height: 1.4;
    white-space: nowrap;
}
.badge-available { color: var(--success); }
.badge-soon { color: var(--fg-muted); border-color: var(--hairline-strong); }
.badge-current {
    color: var(--accent-on);
    background: var(--accent);
    border-color: var(--accent);
}
.badge-level-debutant { color: var(--moss); }
.badge-level-intermediaire { color: var(--lichen); }
.badge-level-avance { color: var(--terracotta); }

/* --- block --- */
.block {
    position: relative;
    margin: 0 0 1px;
    background: var(--bg-elevated);
    padding: var(--space-5) var(--space-5);
    border-left: 3px solid transparent;

    &.block--warmup {
        border-left-color: var(--warning);
        .block-type { color: var(--warning); }
    }
    &.block--exo {
        border-left-color: var(--accent);
        .block-type { color: var(--accent); }
    }
    &.block--libre {
        border-left-color: var(--success);
        .block-type { color: var(--success); }
    }

    @media (min-width: 768px) {
        padding: var(--space-6) var(--space-8);
    }
}

.block-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--hairline);
}

.block-type {
    font-family: var(--font-mono);
    font-size: 0.55rem;
    letter-spacing: var(--tracked-cap);
    text-transform: uppercase;
    color: var(--fg-muted);
    margin-bottom: var(--space-2);
}

.block-title {
    font-family: var(--font-display);
    font-size: 1.5rem;
    line-height: 1.05;
    letter-spacing: 0.04em;
    color: var(--fg);
    text-transform: uppercase;

    @media (min-width: 768px) { font-size: 1.8rem; }
}

.block-time {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
    color: var(--accent);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    white-space: nowrap;

    &::before {
        content: '\25C8';
        font-size: 0.85rem;
    }
}

.block-sub-label {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: var(--tracked-cap);
    text-transform: uppercase;
    color: var(--accent);
    margin: var(--space-5) 0 var(--space-3);
    display: flex;
    align-items: center;
    gap: var(--space-3);

    &::before {
        content: '';
        width: 1rem;
        height: 1px;
        background: var(--accent);
    }
}

.block-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;

    li {
        position: relative;
        padding-left: var(--space-5);
        font-family: var(--font-mono);
        font-size: 0.85rem;
        line-height: 1.6;
        color: var(--fg);

        &::before {
            content: '\2014';
            position: absolute;
            left: 0;
            color: var(--accent);
        }
    }
}

.block-note {
    background: color-mix(in srgb, var(--success) 8%, transparent);
    border: 1px dashed color-mix(in srgb, var(--success) 35%, transparent);
    padding: var(--space-4) var(--space-4);
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 0.95rem;
    color: var(--success);
    line-height: 1.5;
}

/* --- button --- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: var(--tracked-loose);
    text-transform: uppercase;
    padding: var(--space-3) var(--space-5);
    border: 1px solid transparent;
    border-radius: var(--radius-0);
    cursor: pointer;
    transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
    text-decoration: none;
    white-space: nowrap;

    &.btn--full { width: 100%; }
}

.btn-primary {
    background: var(--accent);
    color: var(--accent-on);
    border-color: var(--accent);

    &:hover {
        background: var(--accent-hover);
        border-color: var(--accent-hover);
        color: var(--accent-on);
    }
}

.btn-outline {
    background: transparent;
    color: var(--fg);
    border-color: var(--hairline-strong);

    &:hover {
        background: var(--accent);
        color: var(--accent-on);
        border-color: var(--accent);
    }
}

.btn-ghost {
    background: transparent;
    color: var(--fg-muted);
    padding-inline: 0;
    border: 0;

    &::after {
        content: ' \2192';
        color: var(--accent);
        transition: transform var(--t-fast);
    }

    &:hover {
        color: var(--fg);

        &::after { transform: translateX(4px); }
    }
}

.btn-nav-cta {
    background: transparent;
    color: var(--accent);
    border-color: var(--accent);
    padding: var(--space-2) var(--space-4);

    &:hover {
        background: var(--accent);
        color: var(--accent-on);
    }
}

.btn-icon {
    font-size: 1em;
    line-height: 1;
}

/* --- card --- */
.card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    background: var(--bg-elevated);
    padding: var(--space-6) var(--space-5);
    border-radius: var(--radius-0);
    border: 1px solid var(--hairline);
    border-left-width: 2px;
    text-decoration: none;
    color: inherit;
    transition: transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast);
    overflow: hidden;

    &:hover {
        box-shadow: var(--shadow-card);
    }
}

a.card:hover {
    transform: translateY(-2px);
}

.card-practice { border-left-color: var(--accent); }
.card-week { border-left-color: var(--success); }
.card-session { border-left-color: var(--warning); }
.card-instructor { border-left-color: var(--info); }
.card-join { border-left-color: var(--accent); }
.card-quick-link { border-left-color: var(--fg-muted); }

.card-num {
    position: absolute;
    top: var(--space-5);
    right: var(--space-5);
    font-family: var(--font-display);
    font-size: 4rem;
    line-height: 1;
    color: color-mix(in srgb, var(--fg) 5%, transparent);
    pointer-events: none;
}

.card-badge {
    margin-bottom: var(--space-3);
}

.card-title {
    font-family: var(--font-display);
    font-size: 1.7rem;
    line-height: 1.05;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--fg);
}

.card-description {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    line-height: 1.7;
    color: var(--fg-muted);
}

.card-meta {
    display: flex;
    gap: var(--space-5);
    margin-top: auto;
    padding-top: var(--space-3);
}

.card-meta-item {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.card-meta-val {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--fg);
}

.card-meta-key {
    font-family: var(--font-mono);
    font-size: 0.55rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--fg-muted);
}

/* --- check item --- */
.check-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-2);
    background: color-mix(in srgb, var(--fg) 2%, transparent);
    border: 1px solid transparent;
    cursor: pointer;
    user-select: none;
    min-height: 48px;
    transition: background var(--t-fast), border-color var(--t-fast);
    text-align: left;
    width: 100%;

    &:hover {
        background: color-mix(in srgb, var(--fg) 4%, transparent);
    }

    &.is-checked {
        background: color-mix(in srgb, var(--success) 8%, transparent);
        border-color: color-mix(in srgb, var(--success) 30%, transparent);

        .check-text {
            color: var(--fg-muted);
            text-decoration: line-through;
            text-decoration-color: color-mix(in srgb, var(--success) 50%, transparent);
        }

        .check-box {
            background: var(--success);
            border-color: var(--success);

            &::after {
                content: '\2713';
                position: absolute;
                inset: 0;
                display: flex;
                align-items: center;
                justify-content: center;
                color: var(--bg);
                font-size: 14px;
                font-weight: 700;
            }
        }
    }
}

.check-box {
    width: 22px;
    height: 22px;
    border: 1.5px solid var(--hairline-strong);
    background: transparent;
    flex-shrink: 0;
    margin-top: 2px;
    position: relative;
    transition: background var(--t-fast), border-color var(--t-fast);
}

.check-text {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--fg);
    transition: color var(--t-fast);
}

/* --- eyebrow title --- */
.eyebrow-title {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);

    &.eyebrow-title--center { align-items: center; text-align: center; }
    &.eyebrow-title--right { align-items: flex-end; text-align: right; }

    .eyebrow {
        display: inline-flex;
        align-items: center;
        gap: var(--space-3);

        &::before {
            content: '';
            width: 1.5rem;
            height: 1px;
            background: var(--accent);
        }
    }

    .title-accent {
        color: var(--accent);
    }

    .title-italic {
        font-family: var(--font-serif);
        font-style: italic;
        color: var(--fg-muted);
        text-transform: none;
        letter-spacing: 0;
        margin-left: 0.25em;
    }
}

/* --- footer --- */
.footer {
    background: var(--bg-elevated);
    border-top: 1px solid var(--hairline);
    padding: var(--space-10) var(--space-5) var(--space-6);
    margin-top: var(--space-10);
}

.footer-grid {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-8);

    @media (min-width: 640px) {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    }
}

.footer-brand {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.footer-logo {
    font-family: var(--font-display);
    font-size: 1.6rem;
    letter-spacing: var(--tracked-tight);
    color: var(--fg);
    text-transform: uppercase;

    span { color: var(--accent); }
}

.footer-tagline {
    font-family: var(--font-serif);
    font-style: italic;
    color: var(--fg-muted);
    font-size: 0.95rem;
    line-height: 1.5;
    max-width: 28ch;
}

.footer-col-title {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: var(--tracked-cap-lg);
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: var(--space-4);
}

.footer-links {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);

    a {
        font-family: var(--font-mono);
        font-size: 0.7rem;
        letter-spacing: 0.1em;
        color: var(--fg-muted);
        transition: color var(--t-fast);

        &:hover { color: var(--accent); }
    }
}

.footer-bottom {
    max-width: 1200px;
    margin: var(--space-8) auto 0;
    padding-top: var(--space-5);
    border-top: 1px solid var(--hairline);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-3);
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--fg-muted);
}

/* --- form field --- */
.form-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);

    &.form-field--has-error .form-field-control {
        border-color: var(--danger);
    }
}

.form-field-label {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: var(--tracked-cap-lg);
    text-transform: uppercase;
    color: var(--accent);
}

.form-field-required {
    color: var(--danger);
    margin-left: var(--space-1);
}

.form-field-control {
    font-family: var(--font-mono);
    font-size: 0.9rem;
    color: var(--fg);
    background: var(--bg-elevated);
    border: 1px solid var(--hairline-strong);
    border-radius: var(--radius-0);
    padding: var(--space-3) var(--space-4);
    transition: border-color var(--t-fast), background var(--t-fast);
    width: 100%;

    &:focus {
        outline: 0;
        border-color: var(--accent);
        background: var(--bg-deep);
    }

    &::placeholder {
        color: var(--fg-muted);
        font-family: var(--font-serif);
        font-style: italic;
    }
}

textarea.form-field-control {
    min-height: 7rem;
    resize: vertical;
    line-height: 1.6;
}

.form-field-error {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--danger);
    letter-spacing: 0.05em;
}

.form-field-help {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--fg-muted);
}

/* --- hero --- */
.hero {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    display: grid;
    grid-template-columns: 1fr;
    background:
        radial-gradient(ellipse at 90% 10%, color-mix(in srgb, var(--accent) 12%, transparent) 0%, transparent 55%),
        var(--bg);
    overflow: hidden;

    @media (min-width: 1024px) { grid-template-columns: 1fr 1fr; }
}

.hero-left {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: var(--space-12) var(--space-5) var(--space-10);
    position: relative;
    z-index: 2;
    max-width: 920px;
    margin: 0 auto;
    width: 100%;

    @media (min-width: 768px) { padding: 8rem var(--space-8) var(--space-10); }
}

.hero-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: var(--tracked-cap);
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: var(--space-6);

    &::before {
        content: '';
        width: 2rem;
        height: 1px;
        background: var(--accent);
    }
}

.hero-title {
    font-family: var(--font-display);
    font-size: clamp(3rem, 10vw, 8rem);
    line-height: 0.9;
    letter-spacing: var(--tracked-tight);
    color: var(--fg);
    text-transform: uppercase;

    .accent { color: var(--accent); display: block; }

    .italic {
        font-family: var(--font-serif);
        font-style: italic;
        color: var(--fg-muted);
        text-transform: none;
        letter-spacing: 0;
    }
}

.hero-desc {
    margin-top: var(--space-6);
    font-family: var(--font-mono);
    font-size: 0.85rem;
    line-height: 1.8;
    color: var(--fg-muted);
    max-width: 40ch;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    align-items: center;
    margin-top: var(--space-8);
}

.hero-right {
    position: relative;
    display: none;
    overflow: hidden;

    @media (min-width: 1024px) { display: block; }
}

.hero-stats {
    position: absolute;
    inset: auto 0 0 0;
    display: flex;
    flex-wrap: wrap;
    z-index: 10;
    border-top: 1px solid var(--hairline);
    background: color-mix(in srgb, var(--bg-elevated) 90%, transparent);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.hero-stat {
    flex: 1 1 50%;
    padding: var(--space-5) var(--space-5);
    border-right: 1px solid var(--hairline);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);

    &:last-child { border-right: 0; }

    @media (min-width: 768px) { flex: 1 1 0; }
}

.hero-stat-num {
    font-family: var(--font-display);
    font-size: 2.2rem;
    color: var(--fg);
    letter-spacing: 0.05em;

    em {
        font-style: normal;
        color: var(--accent);
    }
}

.hero-stat-label {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--fg-muted);
}

/* --- holiday row --- */
.holiday-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    padding-block: var(--space-5);
    margin-block: var(--space-3);
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 0.95rem;
    letter-spacing: 0.05em;
    color: var(--fg-muted);
    border-top: 1px solid var(--hairline);
    border-bottom: 1px solid var(--hairline);
    text-align: center;

    &::before,
    &::after {
        content: '';
        flex: 1;
        height: 1px;
        background: var(--hairline);
        max-width: 80px;
    }
}

/* --- marquee --- */
.marquee {
    overflow: hidden;
    background: var(--accent);
    padding: var(--space-3) 0;
    border-top: 1px solid var(--terracotta-deep);
    border-bottom: 1px solid var(--terracotta-deep);
}

.marquee-track {
    display: flex;
    gap: 0;
    white-space: nowrap;
    animation: marquee linear infinite;
    will-change: transform;

    @media (prefers-reduced-motion: reduce) { animation: none; }
}

.marquee-item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-6);
    padding: 0 var(--space-6);
    font-family: var(--font-display);
    font-size: 1.1rem;
    letter-spacing: var(--tracked-loose);
    color: var(--accent-on);
    text-transform: uppercase;
}

.marquee-dot {
    width: 5px;
    height: 5px;
    background: color-mix(in srgb, var(--accent-on) 50%, transparent);
    border-radius: var(--radius-circle);
    flex-shrink: 0;
}

@keyframes marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* --- mobile menu --- */
.mobile-menu-burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    font-size: 1.4rem;
    color: var(--chalk-light);
    border: 1px solid rgba(250,246,232,0.4);
    background: transparent;
    cursor: pointer;

    @media (min-width: 768px) { display: none; }
}

.mobile-menu-overlay {
    position: fixed;
    inset: 0;
    background: color-mix(in srgb, var(--fg) 50%, transparent);
    z-index: 150;
    opacity: 1;
    transition: opacity var(--t-base);
}

.mobile-menu-drawer {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(320px, 85vw);
    background: var(--bg-deep);
    border-left: 1px solid var(--hairline);
    z-index: 200;
    padding: var(--space-12) var(--space-5) var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    transform: translateX(0);
    transition: transform var(--t-base);
    overflow-y: auto;
}

.mobile-menu-close {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: var(--fg-muted);
    border: 1px solid var(--hairline-strong);
    background: transparent;
    cursor: pointer;
}

.mobile-menu-link {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    letter-spacing: var(--tracked-loose);
    text-transform: uppercase;
    color: var(--fg);
    padding: var(--space-4) var(--space-2);
    border-bottom: 1px solid var(--hairline);
    transition: color var(--t-fast), padding-left var(--t-fast);

    &:hover {
        color: var(--accent);
        padding-left: var(--space-3);
    }
}

.mobile-menu-cta {
    margin-top: var(--space-4);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: var(--tracked-loose);
    text-transform: uppercase;
    color: var(--accent-on);
    background: var(--accent);
    padding: var(--space-4);
}

/* --- nav bar --- */
.nav {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    padding: var(--space-3) var(--space-5);
    height: 70px;
    background: var(--terracotta);
    border-bottom: 1px solid rgba(0,0,0,0.10);
}

.nav-logo {
    font-family: var(--font-display);
    font-size: 1.4rem;
    letter-spacing: var(--tracked-tight);
    color: var(--chalk-light);
    text-transform: uppercase;

    span { color: rgba(250,246,232,0.65); }

    &:hover { color: #000; }
}

.nav-links {
    display: none;
    gap: var(--space-6);
    align-items: center;

    a {
        font-family: var(--font-mono);
        font-size: 0.7rem;
        letter-spacing: var(--tracked-loose);
        text-transform: uppercase;
        color: rgba(250,246,232,0.85);
        padding: var(--space-2) 0;
        border-bottom: 1px solid transparent;
        transition: color var(--t-fast), border-color var(--t-fast);

        &:hover,
        &.is-active {
            color: var(--chalk-light);
            border-bottom-color: var(--chalk-light);
        }
    }

    @media (min-width: 768px) { display: inline-flex; }
}

.nav-cta {
    display: inline-flex;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: var(--tracked-loose);
    text-transform: uppercase;
    color: var(--chalk-light);
    border: 1px solid rgba(250,246,232,0.65);
    padding: var(--space-2) var(--space-4);
    transition: background var(--t-fast), color var(--t-fast);

    &:hover {
        background: rgba(250,246,232,0.15);
        color: var(--chalk-light);
    }
}

/* NavBar — actions wrapper (deux boutons côte à côte) */
.nav-actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

/* NavBar — CTA Inscription */
.nav-cta--filled {
    background: var(--chalk-light);
    color: var(--terracotta);
    border-color: var(--chalk-light);
    font-weight: 700;

    &:hover {
        background: var(--forest);
        color: var(--chalk-light);
        border-color: var(--forest);
    }
}

/* NavBar — CTA Demander un essai (inverse d'Inscription) */
.nav-cta--ghost {
    background: var(--terracotta);
    color: var(--chalk-light);
    border-color: var(--chalk-light);

    &:hover {
        background: color-mix(in srgb, var(--terracotta) 80%, black);
        color: var(--chalk-light);
        border-color: var(--chalk-light);
    }
}

/* NavBar — CTA secondaire spécifique page (desktop uniquement ; le mobile l'a dans le drawer) */
.nav-cta--desktop {
    display: none;

    @media (min-width: 768px) { display: inline-flex; }
}

/* NavBar — CTA Inscription (variante mobile) */
.mobile-menu-cta--filled {
    background: var(--chalk-light);
    color: var(--terracotta);
    font-weight: 700;

    &:hover {
        background: var(--forest);
        color: var(--chalk-light);
    }
}

/* NavBar — CTA Demander un essai (variante mobile) */
.mobile-menu-cta--ghost {
    background: var(--terracotta);
    color: var(--chalk-light);
    border: 1px solid var(--chalk-light);

    &:hover {
        background: color-mix(in srgb, var(--terracotta) 80%, black);
        color: var(--chalk-light);
    }
}

.nav-burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    font-size: 1.4rem;
    color: var(--chalk-light);
    border: 1px solid rgba(250,246,232,0.4);

    @media (min-width: 768px) { display: none; }
}

/* --- page header --- */
.page-header {
    padding-block: var(--space-10) var(--space-8);
    border-bottom: 1px solid var(--hairline);
    background:
        radial-gradient(ellipse at 90% 0%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 60%),
        var(--bg);
}

.page-header-inner {
    max-width: 920px;
    margin: 0 auto;
    padding-inline: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.page-header-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: var(--tracked-cap-lg);
    text-transform: uppercase;
    color: var(--accent);

    &::before {
        content: '';
        width: 1.5rem;
        height: 1px;
        background: var(--accent);
    }
}

.page-header-title {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    line-height: 1;
    letter-spacing: var(--tracked-tight);
    color: var(--fg);
    text-transform: uppercase;

    .italic {
        font-family: var(--font-serif);
        font-style: italic;
        color: var(--fg-muted);
        text-transform: none;
        letter-spacing: 0;
        margin-left: 0.2em;
    }
}

.page-header-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-5);
    margin-top: var(--space-3);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    color: var(--fg-muted);
}

.page-header-meta-item strong {
    color: var(--fg);
    margin-right: var(--space-2);
    font-weight: 700;
}

/* --- seance checklist --- */
.seance-checklist {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.seance-checklist-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding-bottom: var(--space-2);
    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: var(--tracked-cap);
    text-transform: uppercase;
    color: var(--fg-muted);

    strong {
        font-family: var(--font-display);
        font-size: 0.95rem;
        letter-spacing: 0.1em;
        color: var(--accent);
        font-weight: 400;
    }
}

.seance-checklist-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.seance-checklist-reset {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--fg-muted);
    padding: var(--space-1) var(--space-2);
    transition: color var(--t-fast);

    &:hover { color: var(--accent); }
}

/* --- seance nav --- */
.seance-nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: color-mix(in srgb, var(--bg) 85%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--hairline);
}

.seance-nav-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) var(--space-5);
    gap: var(--space-4);

    @media (min-width: 768px) { padding: var(--space-4) var(--space-6); }
}

.seance-nav-back {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--fg-muted);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: var(--tracked-loose);
    text-transform: uppercase;
    padding: var(--space-2) var(--space-2) var(--space-2) 0;
    transition: color var(--t-fast);

    &:hover { color: var(--fg); }

    &::before {
        content: '\2190';
        font-size: 1rem;
    }
}

.seance-nav-week {
    font-family: var(--font-display);
    font-size: 1.1rem;
    letter-spacing: 0.1em;
    color: var(--accent);
    text-transform: uppercase;
}

.seance-nav-menu {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    font-size: 1.1rem;
    color: var(--fg-muted);
    border: 1px solid var(--hairline-strong);
    transition: color var(--t-fast), border-color var(--t-fast);

    &:hover {
        color: var(--fg);
        border-color: var(--fg);
    }
}

.seance-nav-progress {
    position: relative;
    height: 4px;
    background: var(--hairline-soft);
    overflow: hidden;
}

.seance-nav-progress-bar {
    height: 100%;
    background: var(--accent);
    transition: width var(--t-base);
}

/* --- side menu --- */
.side-menu {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-5) 0;
    border-right: 1px solid var(--hairline);
    min-width: 220px;
}

.side-menu-title {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: var(--tracked-cap-lg);
    text-transform: uppercase;
    color: var(--fg-muted);
    padding: 0 var(--space-5) var(--space-3);
}

.side-menu-link {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: var(--tracked-loose);
    text-transform: uppercase;
    color: var(--fg-muted);
    padding: var(--space-3) var(--space-5);
    border-left: 2px solid transparent;
    transition: color var(--t-fast), background var(--t-fast), border-color var(--t-fast);

    &:hover {
        color: var(--fg);
        background: var(--bg-elevated);
    }

    &.is-active {
        color: var(--accent);
        border-left-color: var(--accent);
    }
}

/* --- stat bar --- */
.stat-bar {
    display: flex;
    flex-wrap: wrap;
    border-top: 1px solid var(--hairline);
    border-bottom: 1px solid var(--hairline);
    background: var(--bg-elevated);
}

.stat-bar-item {
    flex: 1 1 50%;
    padding: var(--space-5) var(--space-5);
    border-right: 1px solid var(--hairline);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);

    &:nth-child(2n) { border-right: 0; }

    @media (min-width: 768px) {
        flex: 1 1 0;
        border-right: 1px solid var(--hairline);

        &:nth-child(2n) { border-right: 1px solid var(--hairline); }
        &:last-child { border-right: 0; }
    }
}

.stat-bar-num {
    font-family: var(--font-display);
    font-size: 2.2rem;
    color: var(--accent);
    letter-spacing: 0.05em;
    line-height: 1;
}

.stat-bar-label {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--fg-muted);
}

/* --- week card --- */
.week-card {
    display: grid;
    grid-template-columns: 50px 1fr 24px;
    gap: var(--space-4);
    align-items: center;
    padding: var(--space-4) var(--space-4);
    background: var(--bg-elevated);
    border: 1px solid var(--hairline);
    border-left: 3px solid transparent;
    text-decoration: none;
    color: inherit;
    transition: background var(--t-fast), border-color var(--t-fast), padding-left var(--t-fast);

    & + & { margin-top: 1px; }

    &:hover {
        background: var(--bg-deep);
        padding-left: var(--space-5);
    }

    &.week-card--available { border-left-color: var(--success); }

    &.week-card--current {
        border-left-color: var(--accent);
        background: linear-gradient(
            90deg,
            color-mix(in srgb, var(--accent) 8%, transparent),
            var(--bg-elevated) 35%
        );

        .week-card-num { color: var(--accent); }
    }

    &.week-card--disabled {
        cursor: not-allowed;
        opacity: 0.55;

        &:hover {
            background: var(--bg-elevated);
            padding-left: var(--space-4);
        }

        .week-card-arrow { color: var(--fg-muted); }
    }

    @media (min-width: 768px) {
        grid-template-columns: 70px 1fr auto;
        gap: var(--space-5);
        padding: var(--space-5);
    }
}

.week-card-num-block {
    text-align: center;
    border-right: 1px solid var(--hairline);
    padding-right: var(--space-4);
}

.week-card-num {
    font-family: var(--font-display);
    font-size: 1.9rem;
    line-height: 1;
    color: var(--fg);
    letter-spacing: 0.05em;

    @media (min-width: 768px) { font-size: 2.5rem; }
}

.week-card-num-label {
    font-family: var(--font-mono);
    font-size: 0.5rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--fg-muted);
    margin-top: var(--space-1);
}

.week-card-info { min-width: 0; }

.week-card-title {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--fg);
    margin-bottom: var(--space-2);
    line-height: 1.3;

    @media (min-width: 768px) { font-size: 0.95rem; }
}

.week-card-meta {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    font-family: var(--font-mono);
    font-size: 0.65rem;
    color: var(--fg-muted);
    letter-spacing: 0.08em;
}

.week-card-arrow {
    color: var(--accent);
    font-size: 1.1rem;
    text-align: right;
}

/* --- error page --- */
.error-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    padding: var(--space-10) var(--space-5);
}

.error-page-inner {
    max-width: 520px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-5);
}

.error-code {
    font-family: var(--font-display);
    font-size: clamp(6rem, 18vw, 12rem);
    line-height: 0.9;
    letter-spacing: 0.02em;
    color: var(--accent);
    text-transform: uppercase;
}

.error-italic {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1.2rem;
    line-height: 1.5;
    color: var(--fg-muted);
    max-width: 38ch;
}

/* --- page body --- */
.page-body {
    font-family: var(--font-mono);
    font-size: 0.9rem;
    line-height: 1.85;
    color: var(--fg);

    h2 {
        font-family: var(--font-display);
        font-size: 1.8rem;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        margin-top: var(--space-8);
        margin-bottom: var(--space-4);
    }

    h3 {
        font-family: var(--font-display);
        font-size: 1.3rem;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        margin-top: var(--space-6);
        margin-bottom: var(--space-3);
    }

    p { margin-bottom: var(--space-4); }

    a {
        color: var(--accent);
        border-bottom: 1px solid var(--accent);
    }

    ul,
    ol {
        list-style-position: outside;
        padding-left: var(--space-5);
        margin-bottom: var(--space-4);
    }

    ul li { list-style: disc; margin-bottom: var(--space-2); }
    ol li { list-style: decimal; margin-bottom: var(--space-2); }
}

/* --- practices grid --- */
.practices-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3);
    margin-top: var(--space-8);

    @media (min-width: 640px) { grid-template-columns: repeat(2, 1fr); }
    @media (min-width: 1024px) { grid-template-columns: repeat(3, 1fr); }
}

/* --- sortie --- */
.sortie-body {
    font-family: var(--font-mono);
    font-size: 0.9rem;
    line-height: 1.85;
    color: var(--fg);

    p { margin-bottom: var(--space-4); }

    h2 {
        font-family: var(--font-display);
        font-size: 1.8rem;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        margin-top: var(--space-6);
        margin-bottom: var(--space-4);
    }

    a { color: var(--accent); }
}

.sortie-gallery-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3);

    @media (min-width: 480px) { grid-template-columns: repeat(2, 1fr); }
    @media (min-width: 768px) { grid-template-columns: repeat(3, 1fr); }
}

.sortie-gallery-item {
    margin: 0;
    overflow: hidden;
    background: var(--bg-elevated);
    border: 1px solid var(--hairline);

    img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform var(--t-slow);
    }

    &:hover img { transform: scale(1.04); }
}

/* ════════════════════════════════════════
   HOMEPAGE — sections editoriales
   ════════════════════════════════════════ */

/* === HOMEPAGE — News Band === */
.news-band {
    background: var(--creme);
    padding: 0.55rem 0 0.65rem;
    border-bottom: 1px solid var(--hairline);
}

.news-band-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0 var(--space-5) 0.45rem;
}

.news-band-rule {
    width: 0.9rem;
    height: 1px;
    background: var(--accent);
    flex-shrink: 0;
}

.news-band-eyebrow {
    font-family: var(--font-mono);
    font-size: 0.5rem;
    letter-spacing: var(--tracked-cap-lg);
    text-transform: uppercase;
    color: var(--accent);
}

.news-band-spacer { flex: 1; }

.news-band-all {
    font-family: var(--font-mono);
    font-size: 0.5rem;
    letter-spacing: var(--tracked-cap);
    text-transform: uppercase;
    color: var(--fg-muted);
    text-decoration: none;
    transition: color var(--t-fast);
}

.news-band-all:hover { color: var(--accent); }

.news-band-track {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
    padding: 0 var(--space-5);
}

.news-band-card {
    background: var(--chalk-light);
    padding: 0.85rem;
    border-left: 2px solid var(--hairline-strong);
    text-decoration: none;
    color: inherit;
    transition: background var(--t-fast), border-left-color var(--t-fast);
}

.news-band-card--featured {
    background: var(--forest);
    border-left-color: var(--lichen);
}
.news-band-card--featured .news-band-card-meta {
    color: var(--lichen);
}
.news-band-card--featured .news-band-card-title {
    color: var(--chalk-light);
}

a.news-band-card:hover {
    background: var(--creme);
    border-left-color: var(--accent);
}
a.news-band-card--featured:hover {
    background: color-mix(in srgb, var(--forest) 90%, black);
    border-left-color: var(--lichen);
}

.news-band-card-meta {
    font-family: var(--font-mono);
    font-size: 0.45rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 0.5rem;
}

.news-band-card-title {
    font-family: var(--font-display);
    font-size: 0.85rem;
    letter-spacing: var(--tracked-tight);
    text-transform: uppercase;
    color: var(--fg);
    line-height: 1.05;
}

/* news-band card with event date — flex column: meta on top, then grid below */
.news-band-card--event {
    display: flex;
    flex-direction: column;
    border-left-color: var(--accent);
}

.news-band-card-event-body {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.7rem;
    align-items: stretch;
    flex: 1;
    margin-top: 0.5rem;
}

.news-band-card-datecol {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    text-align: center;
    line-height: 1;
    border-right: 1px solid var(--hairline);
    padding: 0 1rem 0 0.25rem;
}

.news-band-date-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
}

.news-band-card--event .club-event-day {
    font-family: var(--font-display);
    font-size: 1.75rem;
    color: var(--accent);
    display: block;
}

.news-band-card--event .club-event-month {
    font-family: var(--font-mono);
    font-size: 0.55rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fg-muted);
}

.news-band-card--event .club-event-date-sep {
    font-size: 0.55rem;
    color: var(--fg-muted);
    margin: 0 0.15rem;
    align-self: center;
}

.news-band-card-content {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.news-band-card-content .news-band-card-title {
    margin-bottom: 0.25rem;
}

.news-band-card--event .club-event-meta {
    margin-top: 0.3rem;
    margin-bottom: 0;
    font-size: 0.58rem;
    gap: 0.3rem;
    flex-direction: column;
    align-items: flex-start;
}

.news-band-card--event .club-event-meta-item {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.news-band-card-description {
    font-family: var(--font-mono);
    font-size: 0.58rem;
    color: var(--fg-muted);
    line-height: 1.5;
    margin-top: 0.3rem;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

@media (min-width: 768px) {
    .news-band-track { grid-template-columns: repeat(3, 1fr); gap: 1rem; }
    .news-band-card { padding: 0.50rem; }
    .news-band-card-title { font-size: 1.05rem; }
    .news-band-card-event-body { grid-template-columns: auto 1fr; gap: 0.9rem; }
    .news-band-card--event .club-event-day { font-size: 1.75rem; }
}

/* === HOMEPAGE — Hero Magazine === */
.hero-magazine {
    position: relative;
    min-height: 80vh;
    min-height: 80svh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 0;
    overflow: hidden;
    color: #faf6e8;
    isolation: isolate;
}

.hero-magazine,
.hero-magazine * {
    color: #faf6e8;
}

.hero-magazine-photo {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: 65% center;
    z-index: 0;
}

.hero-magazine-photo::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(31, 38, 24, 0.45) 0%,
        rgba(31, 38, 24, 0.35) 50%,
        rgba(31, 38, 24, 0.75) 100%
    );
}

.hero-magazine-content {
    position: relative;
    z-index: 1;
    padding: 0 var(--space-5) 2.5rem;
    width: 100%;
    margin-bottom: 2.5rem;
}

.hero-magazine-eyebrow {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--chalk-light);
    margin-bottom: 1.2rem;
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    background: var(--terracotta);
    padding: 0.5rem 0.8rem;
    border: 1px solid rgba(250, 246, 232, 0.18);
}

.hero-magazine-eyebrow::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--lichen);
    box-shadow: 0 0 0 0 rgba(212, 217, 159, 0.6);
    animation: edito-pulse 2s infinite;
    flex-shrink: 0;
}

@keyframes edito-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(212, 217, 159, 0.6); }
    100% { box-shadow: 0 0 0 7px rgba(212, 217, 159, 0); }
}

.hero-magazine-title {
    font-family: var(--font-display);
    font-size: clamp(3.4rem, 18vw, 5.5rem);
    line-height: 0.88;
    letter-spacing: var(--tracked-tight);
    color: #faf6e8;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
}

.hero-magazine-title .small-tag {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.55rem;
    letter-spacing: 0.4em;
    color: rgba(250, 246, 232, 0.7);
    margin-bottom: 0.8rem;
    text-transform: uppercase;
    font-weight: normal;
}

.hero-magazine-title .italic {
    font-family: var(--font-serif);
    font-style: italic;
    text-transform: none;
    color: #faf6e8;
    font-size: 0.85em;
    letter-spacing: -0.01em;
    display: block;
    margin: 0.1em 0;
}

.hero-magazine-deck {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1.05rem;
    line-height: 1.45;
    color: #faf6e8;
    margin-bottom: 2rem;
    max-width: 32ch;
}

.hero-magazine-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(250, 246, 232, 0.7);
    padding-top: 1.5rem;
    border-top: 1px solid rgba(250, 246, 232, 0.18);
}

.hero-magazine-meta .dot {
    width: 4px;
    height: 4px;
    background: var(--terracotta);
    border-radius: var(--radius-circle);
    display: inline-block;
}

@media (min-width: 768px) {
    .hero-magazine-content { padding: 0 var(--space-8) 3.5rem; }
    .hero-magazine-deck { font-size: 1.2rem; max-width: 40ch; }
}

/* === HOMEPAGE — Member Quick Access === */
.member-quick-access {
    background: var(--bg);
    border-top: 1px solid var(--hairline);
    border-bottom: 1px solid var(--hairline);
}

.member-quick-access-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--hairline);
}

.mqa-item {
    background: var(--chalk-light);
    padding: 1.1rem 1rem;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    transition: background var(--t-base);
}

.mqa-item:hover {
    background: var(--creme);
}

.mqa-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.mqa-eyebrow {
    font-family: var(--font-mono);
    font-size: 0.5rem;
    letter-spacing: var(--tracked-cap-lg);
    text-transform: uppercase;
    color: var(--accent);
}

.mqa-arrow {
    font-family: var(--font-display);
    font-size: 0.85rem;
    color: var(--accent);
    transition: transform var(--t-fast);
}

.mqa-item:hover .mqa-arrow { transform: translateX(3px); }

.mqa-title {
    font-family: var(--font-display);
    font-size: 1.05rem;
    letter-spacing: var(--tracked-tight);
    text-transform: uppercase;
    color: var(--fg);
    line-height: 1;
}

.mqa-subtitle {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 0.72rem;
    color: var(--fg-muted);
}

@media (min-width: 768px) {
    .mqa-item { padding: 1.5rem 1.5rem; }
    .mqa-title { font-size: 1.3rem; }
}

/* === HOMEPAGE — Manifesto === */
.manifesto {
    background: var(--chalk-light);
    padding: 5rem var(--space-5) 4rem;
    position: relative;
    border-bottom: 1px solid var(--hairline);
    overflow: hidden;
}

.manifesto::before {
    content: '\00AB';
    position: absolute;
    top: -1.5rem;
    left: -0.5rem;
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 12rem;
    color: var(--terracotta);
    opacity: 0.08;
    line-height: 1;
    pointer-events: none;
}

.manifesto-eyebrow {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 2rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    position: relative;
}

.manifesto-eyebrow::before {
    content: '';
    width: 1.5rem;
    height: 1px;
    background: var(--accent);
}

.manifesto-quote {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: clamp(1.6rem, 6vw, 2rem);
    line-height: 1.3;
    color: var(--fg);
    margin-bottom: 2.5rem;
    max-width: 60ch;
    position: relative;
}

.manifesto-quote .accent {
    color: var(--accent);
}

.manifesto-byline {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: var(--tracked-cap);
    text-transform: uppercase;
    color: var(--fg-muted);
    position: relative;
}

@media (min-width: 768px) {
    .manifesto { padding: 6rem var(--space-8) 5rem; }
}

/* === HOMEPAGE — Stats Editorial === */
.stats-editorial {
    background: var(--creme);
    padding: 3rem var(--space-5);
    border-top: 1px solid var(--hairline);
    border-bottom: 1px solid var(--hairline);
}

.stats-editorial-row {
    display: flex;
    flex-direction: column;
    gap: 0;
    max-width: 920px;
    margin: 0 auto;
}

.stats-editorial-stat {
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--hairline);
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: baseline;
    gap: 1.5rem;
}

.stats-editorial-stat:last-child { border-bottom: none; }

.stats-editorial-num {
    font-family: var(--font-display);
    font-size: 3.5rem;
    line-height: 0.85;
    letter-spacing: var(--tracked-tight);
    color: var(--fg);
}

.stats-editorial-unit {
    font-family: var(--font-serif);
    font-style: italic;
    color: var(--accent);
    font-size: 0.5em;
}

.stats-editorial-label {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fg-muted);
    text-align: right;
    line-height: 1.4;
}

@media (min-width: 768px) {
    .stats-editorial { padding: 4rem var(--space-8); }
    .stats-editorial-num { font-size: 4.5rem; }
}

/* === HOMEPAGE — Feature Photo === */
/* feature-photo */
.feature-photo-link {
    display: block;
    text-decoration: none;
    cursor: pointer;
}

.feature-photo {
    position: relative;
    height: 75vh;
    min-height: 480px;
    overflow: hidden;
    color: #faf6e8;
    isolation: isolate;
}

.feature-photo,
.feature-photo * {
    color: #faf6e8;
}

.feature-photo__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    z-index: 0;
}

.feature-photo__gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(31, 38, 24, 0.2) 0%,
        rgba(31, 38, 24, 0.92) 100%
    );
    z-index: 1;
}

.feature-photo__overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0 var(--space-5) 2.5rem;
    z-index: 2;
}

.feature-photo__num {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--lichen);
    margin-bottom: 0.8rem;
}

.feature-photo__title {
    font-family: var(--font-display);
    font-size: clamp(2.4rem, 12vw, 3.6rem);
    line-height: 0.92;
    letter-spacing: 0.02em;
    color: #faf6e8;
    text-transform: uppercase;
    margin-bottom: 1.2rem;
}

.feature-photo__caption {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1rem;
    color: #faf6e8;
    line-height: 1.4;
    max-width: 30ch;
}

@media (min-width: 768px) {
    .feature-photo__overlay { padding: 0 var(--space-8) 3rem; }
}

/* === HOMEPAGE — News Grid === */
.news-grid {
    background: var(--bg);
    padding: 3rem var(--space-5);
    border-top: 1px solid var(--hairline);
    border-bottom: 1px solid var(--hairline);
}

.news-grid-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    gap: 1rem;
}

.news-grid-eyebrow {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--font-mono);
    font-size: 0.55rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 0.6rem;
}

.news-grid-eyebrow::before {
    content: '';
    width: 1.25rem;
    height: 1px;
    background: var(--accent);
}

.news-grid-title {
    font-family: var(--font-display);
    font-size: 1.6rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--fg);
    line-height: 1;
}

.news-grid-title .italic {
    font-family: var(--font-serif);
    font-style: italic;
    text-transform: none;
    color: var(--fg-muted);
    font-size: 0.75em;
    letter-spacing: 0;
}

.news-grid-link {
    font-family: var(--font-mono);
    font-size: 0.55rem;
    letter-spacing: var(--tracked-cap);
    text-transform: uppercase;
    color: var(--fg-muted);
    text-decoration: none;
    transition: color var(--t-fast);
}

.news-grid-link:hover { color: var(--accent); }

.news-grid-items {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
}

.news-grid-card {
    background: var(--chalk-light);
    padding: 0.85rem;
    text-decoration: none;
    color: inherit;
    border-left: 2px solid var(--hairline-strong);
    transition: border-left-color var(--t-fast), background var(--t-fast);
}

a.news-grid-card:hover {
    border-left-color: var(--accent);
    background: var(--creme);
}

.news-grid-card[data-kind="topo"]    { border-left-color: var(--hold-blue); }
.news-grid-card[data-kind="sortie"]  { border-left-color: var(--hold-green); }
.news-grid-card[data-kind="compe"]   { border-left-color: var(--hold-red); }
.news-grid-card[data-kind="club"]    { border-left-color: var(--lichen); }
.news-grid-card[data-kind="mate"]    { border-left-color: var(--hold-yellow); }

.news-grid-card-category {
    font-family: var(--font-mono);
    font-size: 0.45rem;
    letter-spacing: var(--tracked-cap);
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 0.5rem;
}

.news-grid-card-title {
    font-family: var(--font-display);
    font-size: 0.85rem;
    letter-spacing: var(--tracked-tight);
    text-transform: uppercase;
    color: var(--fg);
    line-height: 1.05;
}

@media (min-width: 768px) {
    .news-grid { padding: 4rem var(--space-8); }
    .news-grid-items { grid-template-columns: repeat(3, 1fr); gap: 1rem; }
    .news-grid-title { font-size: 2.2rem; }
    .news-grid-card { padding: 1.25rem; }
    .news-grid-card-title { font-size: 1.05rem; }
}

/* === HOMEPAGE — Join CTA === */
.join-cta {
    background: var(--forest);
    padding: 5rem var(--space-5);
    text-align: left;
    border-top: 1px solid rgba(212, 173, 62, 0.18);
    position: relative;
    overflow: hidden;
    color: #faf6e8;
    isolation: isolate;
}

.join-cta::after {
    content: '';
    position: absolute;
    top: -40%;
    right: -25%;
    width: 75%;
    height: 200%;
    background: radial-gradient(circle, rgba(212, 173, 62, 0.20), transparent 60%);
    pointer-events: none;
    z-index: 0;
}

.join-cta-inner {
    position: relative;
    z-index: 1;
    max-width: 920px;
    margin: 0 auto;
}

.join-cta-tag {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1.1rem;
    color: var(--lichen);
    margin-bottom: 1rem;
}

.join-cta-title {
    font-family: var(--font-display);
    font-size: clamp(2.6rem, 13vw, 3.2rem);
    line-height: 0.92;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #faf6e8;
    margin-bottom: 2rem;
}

.join-cta-title .italic {
    font-family: var(--font-serif);
    font-style: italic;
    text-transform: none;
    color: var(--lichen);
    font-size: 0.8em;
    letter-spacing: 0;
}

.join-cta-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
}

.join-cta-actions .btn-primary {
    color: #faf6e8;
}

.join-cta-ghost {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: rgba(250, 246, 232, 0.7);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 0.5rem 0;
    transition: color var(--t-fast);
}

.join-cta-ghost:hover {
    color: #faf6e8;
}

@media (min-width: 768px) {
    .join-cta { padding: 7rem var(--space-8); }
    .join-cta-actions { flex-direction: row; align-items: center; gap: 2rem; }
    .join-cta-actions .btn-primary { width: auto; }
}
/* =============================================================
   === PAGE ACTUALITÉS ===
   Listing des articles publiés (templates/pages/actualites.html.twig).
   Design: Actualites.html (feed unifié + dépliage inline).
   Mobile-first. Utilise uniquement les variables CSS du design system.
   ============================================================= */

/* ---- HEAD ---- */
.actu-head {
    background: var(--creme);
    padding: 3rem 1.25rem 2rem;
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--hairline);
}
.actu-head::before {
    content: '';
    position: absolute;
    top: -120px;
    right: -120px;
    width: 320px;
    height: 320px;
    background: radial-gradient(circle, rgba(212, 173, 62, 0.3), transparent 60%);
    pointer-events: none;
}
.actu-head::after {
    content: 'ACTU';
    position: absolute;
    bottom: -1.6rem;
    right: -0.5rem;
    font-family: var(--font-display);
    font-size: 10rem;
    color: var(--forest);
    opacity: 0.04;
    letter-spacing: 0.04em;
    line-height: 1;
    pointer-events: none;
}
.actu-head > * {
    position: relative;
    z-index: 1;
}

.actu-head-eyebrow {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--font-mono);
    font-size: 0.55rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--terracotta);
    margin-bottom: 1rem;
}
.actu-head-eyebrow::before {
    content: '';
    width: 1.25rem;
    height: 1px;
    background: var(--terracotta);
}

.actu-title {
    font-family: var(--font-display);
    font-size: clamp(2.6rem, 13vw, 3.4rem);
    line-height: 0.92;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--forest);
}
.actu-title .italic {
    font-family: var(--font-serif);
    font-style: italic;
    text-transform: none;
    color: var(--moss);
    font-size: 0.72em;
    letter-spacing: -0.01em;
    display: block;
}

.actu-deck {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--moss-grey);
    margin-top: 1rem;
    max-width: 36ch;
}

.actu-head-meta {
    display: flex;
    gap: 1rem;
    align-items: center;
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--hairline);
    font-family: var(--font-mono);
    font-size: 0.55rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--moss-grey);
}
.actu-head-meta .dot {
    width: 4px;
    height: 4px;
    background: var(--terracotta);
    border-radius: 50%;
}

/* ---- FILTERS — sticky chip bar ---- */
.actu-filters {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(236, 230, 212, 0.94);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--hairline);
    padding: 0.75rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    overflow-x: auto;
    scrollbar-width: none;
}
.actu-filters::-webkit-scrollbar {
    display: none;
}

.actu-filters-lbl {
    font-family: var(--font-mono);
    font-size: 0.5rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--moss-grey);
    flex-shrink: 0;
    margin-right: 0.5rem;
}

.actu-chip {
    flex-shrink: 0;
    font-family: var(--font-mono);
    font-size: 0.55rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    padding: 0.45rem 0.75rem;
    border: 1px solid var(--hairline-strong);
    background: var(--chalk-light);
    color: var(--forest);
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    cursor: pointer;
    transition: all var(--t-fast);
}
.actu-chip:hover {
    border-color: var(--forest);
}
.actu-chip.active {
    background: var(--forest);
    color: var(--chalk-light);
    border-color: var(--forest);
}
.actu-chip::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--moss-grey);
    box-shadow:
        inset 0 -1px 1px rgba(0, 0, 0, 0.25),
        inset 0 1px 1px rgba(255, 255, 255, 0.4);
}
.actu-chip[data-kind='all']::before {
    background: var(--terracotta);
}
.actu-chip[data-kind='sortie']::before {
    background: var(--hold-green);
}
.actu-chip[data-kind='compe']::before {
    background: var(--hold-red);
}
.actu-chip[data-kind='topo']::before {
    background: var(--hold-blue);
}
.actu-chip[data-kind='club']::before {
    background: var(--lichen);
}
.actu-chip[data-kind='mate']::before {
    background: var(--hold-yellow);
}
/* ---- FEED (replaces mosaic + archives) ---- */
.actu-feed {
    background: var(--calcaire);
    padding: 2rem 1.25rem 2.5rem;
    border-bottom: 1px solid var(--hairline);
}
.actu-feed-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    gap: 1rem;
}
.actu-feed-head h2 {
    font-family: var(--font-display);
    font-size: 1.7rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--forest);
    line-height: 1;
}
.actu-feed-head h2 .italic {
    font-family: var(--font-serif);
    font-style: italic;
    text-transform: none;
    color: var(--moss);
    font-size: 0.7em;
}
.actu-feed-count {
    font-family: var(--font-mono);
    font-size: 0.55rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--moss-grey);
}
.actu-feed-count strong {
    color: var(--terracotta);
    font-weight: 400;
}

/* ---- MONTH BAND ---- */
.actu-month {
    display: flex;
    align-items: baseline;
    gap: 0.7rem;
    padding: 1.6rem 0 0.6rem;
    border-bottom: 1px solid var(--hairline);
    margin-bottom: 0.6rem;
    grid-column: 1 / -1;
}
.actu-month:first-of-type {
    padding-top: 0.4rem;
}
.actu-month .mo {
    font-family: var(--font-display);
    font-size: 1.4rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--forest);
}
.actu-month .yr {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1rem;
    color: var(--moss-grey);
}

/* ---- Sort toggle button ---- */
.actu-feed-head-right {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.actu-sort-toggle {
    font-family: var(--font-mono);
    font-size: 0.55rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    background: none;
    border: 1px solid var(--hairline-strong);
    color: var(--moss-grey);
    padding: 0.3rem 0.7rem;
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease;
    white-space: nowrap;
}
.actu-sort-toggle:hover {
    color: var(--chalk);
    border-color: var(--chalk);
}
.actu-sort-toggle.active {
    color: var(--terracotta);
    border-color: var(--terracotta);
}

/* ---- Bandes épinglé / à venir / passé ---- */
.actu-band--avenir,
.actu-band--passe {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1.6rem 0 0.6rem;
    border-bottom: 1px solid var(--hairline);
    margin-bottom: 0.6rem;
    font-family: var(--font-display);
    font-size: 1.4rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.actu-band--avenir {
    color: var(--lichen);
}
.actu-band--avenir::before {
    content: "→";
    font-size: 0.9em;
}
.actu-band--passe {
    color: var(--moss-grey);
}
.actu-band--passe::before {
    content: "←";
    font-size: 0.9em;
}

/* ---- Bande épinglé ---- */
.actu-band--pinned {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0 0.6rem;
    border-bottom: 1px solid var(--hairline);
    margin-bottom: 0.6rem;
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--terracotta);
}
.actu-band--pinned::before {
    content: "↑";
    font-size: 1em;
}

/* ---- FEED GRID ---- */
.actu-feed-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}

/* ============================================
   NEWS ITEM — expandable cards
   ============================================ */
.news-item {
    background: var(--chalk-light);
    border-left: 2px solid var(--hairline-strong);
    display: flex;
    flex-direction: column;
    min-height: 160px;
}
.news-item[data-kind='sortie'] {
    border-left-color: var(--hold-green);
}
.news-item[data-kind='compe'] {
    border-left-color: var(--hold-red);
}
.news-item[data-kind='topo'] {
    border-left-color: var(--hold-blue);
}
.news-item[data-kind='club'] {
    border-left-color: var(--lichen);
}
.news-item[data-kind='mate'] {
    border-left-color: var(--hold-yellow);
}
.news-item.size-wide {
    grid-column: 1 / -1;
}
.news-item.size-quote {
    grid-column: 1 / -1;
}
.news-item.expanded {
    grid-column: 1 / -1;
}
.news-item.expanded .news-card {
    max-height: 0;
    opacity: 0;
    pointer-events: none;
}

/* Card (always-visible summary) */
.news-card {
    padding: 0.9rem 0.9rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    cursor: pointer;
    flex: 1;
    overflow: hidden;
    max-height: 1200px;
    transition: max-height 0.35s ease, opacity 0.25s ease, background var(--t-fast);
}
.news-card:hover {
    background: var(--creme);
}

/* page actualites — indicateur always_on_top */
.news-card .nc-pinned {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--terracotta);
    margin-bottom: 0.5rem;
}
.news-card .nc-pinned::before {
    content: "↑";
    font-size: 1em;
}

.news-item .nc-tag {
    font-family: var(--font-mono);
    font-size: 0.48rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--terracotta);
    display: flex;
    gap: 0.4rem;
    align-items: center;
}
.news-item .nc-tag .date {
    color: var(--moss-grey);
}
.news-item .nc-tag .sep {
    width: 2px;
    height: 2px;
    background: var(--moss-grey);
    border-radius: 50%;
}

.news-card h3 {
    font-family: var(--font-display);
    font-size: 1rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--forest);
    line-height: 1.1;
}
.news-card p {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--moss-grey);
}
.news-card .nc-foot {
    margin-top: auto;
    padding-top: 0.5rem;
    border-top: 1px solid var(--hairline);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--font-mono);
    font-size: 0.48rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--moss-grey);
}
.news-card .nc-foot .read {
    color: var(--terracotta);
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}
.news-card .nc-foot .read::after {
    content: '↓';
    transition: transform var(--t-fast);
}
.news-item.expanded .news-card .nc-foot .read::after {
    transform: rotate(180deg);
}

/* Wide — side-by-side photo + body */
.news-item.size-wide .news-card {
    display: grid;
    grid-template-columns: 38% 1fr;
    padding: 0;
    gap: 0;
}
.news-item.size-wide .nc-photo {
    background-size: cover;
    background-position: center;
    min-height: 180px;
}
.news-item.size-wide .nc-body {
    padding: 1rem 1rem 1rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
.news-item.size-wide h3 {
    font-size: 1.15rem;
}
@media (max-width: 520px) {
    .news-item.size-wide .news-card {
        grid-template-columns: 1fr;
    }
    .news-item.size-wide .nc-photo {
        min-height: 140px;
    }
}

/* Featured — full-width photo banner with overlay */
.news-item.size-featured {
    grid-column: 1 / -1;
    border-left: none;
    background: var(--chalk-light);
    border: 1px solid var(--hairline);
}
.news-item.size-featured .news-card {
    padding: 0;
    gap: 0;
}
.news-item.size-featured .nc-photo {
    position: relative;
    height: 44vh;
    min-height: 280px;
    background-size: cover;
    background-position: 60% 35%;
}
.news-item.size-featured .nc-photo::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(31, 38, 24, 0.05) 0%,
        rgba(31, 38, 24, 0.25) 55%,
        rgba(31, 38, 24, 0.85) 100%
    );
}
.news-item.size-featured .nc-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1.4rem 1.25rem 1.3rem;
    z-index: 1;
}
.news-item.size-featured .nc-overlay .nc-tag {
    color: rgba(250, 246, 232, 0.85);
    margin-bottom: 0.6rem;
}
.news-item.size-featured .nc-overlay .nc-tag .date {
    color: rgba(250, 246, 232, 0.65);
}
.news-item.size-featured .nc-overlay h3 {
    font-family: var(--font-display);
    font-size: clamp(1.7rem, 7vw, 2.4rem);
    line-height: 0.95;
    letter-spacing: 0.02em;
    color: var(--chalk-light);
    text-shadow: 0 2px 18px rgba(31, 38, 24, 0.4);
}
.news-item.size-featured .nc-foot {
    padding: 0.85rem 1.25rem;
    border-top: 1px solid var(--hairline);
    background: var(--chalk-light);
}

/* Quote — dark editorial card */
.news-item.size-quote {
    background: var(--forest);
    color: var(--chalk-light);
    border-left-color: var(--lichen);
    position: relative;
    overflow: hidden;
}
.news-item.size-quote::before {
    content: '«';
    position: absolute;
    top: -1.5rem;
    right: 0.8rem;
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 7rem;
    color: var(--lichen);
    opacity: 0.18;
    line-height: 1;
    pointer-events: none;
}
.news-item.size-quote .news-card {
    padding: 1.4rem 1.25rem 1.3rem;
}
.news-item.size-quote .nc-tag {
    color: var(--lichen);
}
.news-item.size-quote .nc-tag .date {
    color: rgba(250, 246, 232, 0.6);
}
.news-item.size-quote .news-card h3 {
    color: var(--chalk-light);
    font-size: 1.2rem;
}
.news-item.size-quote .news-card p {
    color: rgba(250, 246, 232, 0.82);
    font-size: 0.95rem;
}
.news-item.size-quote .nc-foot {
    border-top-color: rgba(250, 246, 232, 0.15);
    color: rgba(250, 246, 232, 0.55);
}
.news-item.size-quote .nc-foot .read {
    color: var(--lichen);
}
.news-item.size-quote .news-card:hover {
    background: rgba(0, 0, 0, 0.1);
}

/* ============================================
   DETAIL — expand panel
   ============================================ */
.news-detail {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.75s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s ease 0.15s;
}
.news-item.expanded .news-detail {
    max-height: 6000px;
    opacity: 1;
}

.nd-content {
    border-top: 1px solid var(--hairline);
    background: var(--creme);
}
.news-item.size-quote .nd-content {
    background: rgba(255, 255, 255, 0.04);
    border-top-color: rgba(250, 246, 232, 0.15);
}

/* Bouton fermeture panel detail */
.nd-close {
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: 0.5rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--terracotta);
    padding: 0;
    flex-shrink: 0;
    transition: color var(--t-fast);
}
.nd-close:hover { color: var(--terracotta-light); }
.news-item.size-quote .nd-close { color: var(--lichen); }
.news-item.size-quote .nd-close:hover { color: var(--lichen-light); }

/* Detail meta strip */
.nd-meta {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    padding: 1rem 1.25rem;
    background: var(--chalk-light);
    border-bottom: 1px solid var(--hairline);
    font-family: var(--font-mono);
    font-size: 0.5rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--moss-grey);
}
.nd-meta .sep {
    width: 3px;
    height: 3px;
    background: var(--terracotta);
    border-radius: 50%;
}

.nd-fullpage {
    margin-left: auto;
    color: var(--terracotta);
    font-family: var(--font-mono);
    font-size: 0.55rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    padding: 0.4rem 0.7rem;
    border: 1px solid var(--terracotta);
    transition: all var(--t-fast);
    white-space: nowrap;
}
.nd-fullpage:hover {
    background: var(--terracotta);
    color: var(--chalk-light);
}

.news-item.size-quote .nd-meta {
    background: rgba(250, 246, 232, 0.05);
    border-bottom-color: rgba(250, 246, 232, 0.15);
    color: rgba(250, 246, 232, 0.7);
}
.news-item.size-quote .nd-fullpage {
    color: var(--lichen);
    border-color: var(--lichen);
}
.news-item.size-quote .nd-fullpage:hover {
    background: var(--lichen);
    color: var(--forest);
}

/* Detail body */
.nd-body {
    padding: 1.5rem 1.25rem;
    font-family: var(--font-serif);
    font-size: 0.95rem;
    line-height: 1.65;
    color: var(--bark);
}
.news-item.size-quote .nd-body {
    color: rgba(250, 246, 232, 0.85);
}
.nd-body .lead {
    font-size: 1.05rem;
    color: var(--forest);
    line-height: 1.55;
}
.news-item.size-quote .nd-body .lead {
    color: var(--chalk-light);
}

/* ============ CARTES — footer harmonisé ============ */

.nc-foot-left {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--font-mono);
    font-size: 0.5rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--moss-grey);
}

.nc-foot-context {
    color: var(--terracotta);
    opacity: 0.8;
}

.nc-accroche {
    font-family: var(--font-mono);
    font-size: 0.82rem;
    line-height: 1.55;
    color: var(--moss-grey);
    padding: 0 1rem 0.75rem;
}

.news-item.size-featured .nc-accroche {
    padding: 0.75rem 1.25rem 0;
    background: var(--chalk-light);
    color: var(--bark);
}

.news-item.size-wide .nc-accroche {
    padding: 0 0 0.75rem;
}

.news-item.size-quote .nc-accroche {
    color: rgba(250, 246, 232, 0.7);
}

/* ============ DETAIL — sections riches ============ */

.nd-section {
    padding: 1.25rem 1.25rem 0;
    border-top: 1px solid var(--hairline);
}

.nd-section:first-child {
    border-top: none;
}

.nd-section:last-child {
    padding-bottom: 1.25rem;
}

.nd-section-title {
    font-family: var(--font-display);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--terracotta);
    font-size: 0.85rem;
    margin: 0 0 0.75rem;
}

/* Key-value grid */
.nd-fields {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.4rem 1rem;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    margin: 0;
}

.nd-fields dt {
    color: var(--moss-grey);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-size: 0.55rem;
    padding-top: 0.1em;
}

.nd-fields dd {
    color: var(--bark);
    margin: 0;
}

/* Article HTML body */
.nd-article {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    line-height: 1.7;
    color: var(--bark);
    padding-top: 1.25rem !important;
    padding-bottom: 0.25rem;
}

.nd-article h2,
.nd-article h3 {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--terracotta);
    margin: 1.25rem 0 0.5rem;
}

.nd-article h2 { font-size: 1.1rem; }
.nd-article h3 { font-size: 0.95rem; }

.nd-article p { margin: 0 0 0.75rem; }

.nd-article a {
    color: var(--terracotta);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Tables (voies, results, routes, specs) */
.nd-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    margin-top: 0.25rem;
}

.nd-table th {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.6rem;
    border-bottom: 2px solid var(--terracotta);
    text-align: left;
    padding: 0.4rem 0.6rem;
    color: var(--bark);
    background: none;
}

.nd-table td {
    border-bottom: 1px solid var(--hairline);
    padding: 0.4rem 0.6rem;
    color: var(--bark);
    vertical-align: top;
}

.nd-table tr.is-club-member td {
    background: rgba(196, 89, 58, 0.08);
    color: var(--terracotta);
    font-weight: 600;
}

.nd-table tr.is-ok td:last-child::before {
    content: '✓ ';
    color: var(--lichen);
}

/* Podium */
.nd-podium {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    margin-top: 0.25rem;
}

.nd-podium-step {
    background: var(--stone);
    padding: 0.85rem;
    border-left: 3px solid var(--hairline-strong);
    text-align: center;
}

.nd-podium-step.is-first { border-left-color: var(--terracotta); }
.nd-podium-step.is-second { border-left-color: var(--moss-grey); }
.nd-podium-step.is-third { border-left-color: var(--bark); }

.nd-podium-step .rank {
    display: block;
    font-family: var(--font-display);
    font-size: 1.8rem;
    color: var(--terracotta);
    line-height: 1;
    margin-bottom: 0.4rem;
}

.nd-podium-step.is-second .rank,
.nd-podium-step.is-third .rank { color: var(--moss-grey); }

.nd-podium-step .name {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--bark);
    margin: 0 0 0.2rem;
}

.nd-podium-step .score {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    color: var(--moss-grey);
    margin: 0;
}

/* Event card (club) */
.nd-event-card {
    background: var(--stone);
    padding: 1rem;
    border-left: 3px solid var(--terracotta);
}

.nd-event-type {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-size: 0.75rem;
    color: var(--terracotta);
    margin: 0 0 0.5rem;
}

.nd-event-when,
.nd-event-where {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--bark);
    margin: 0 0 0.3rem;
}

.nd-event-desc {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--bark);
    margin: 0.5rem 0;
}

.nd-event-cta {
    margin-top: 0.75rem;
    display: inline-block;
}

/* Product header (mate) */
.nd-product-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--hairline);
}

.nd-product-ref {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--moss-grey);
}

.nd-product-price {
    font-family: var(--font-display);
    font-size: 1.4rem;
    color: var(--terracotta);
    letter-spacing: 0.06em;
}

.nd-product-unit {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    color: var(--moss-grey);
    letter-spacing: 0.1em;
}

/* Spec table */
.nd-spec-table td:first-child {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--moss-grey);
    white-space: nowrap;
    padding-right: 1rem;
}

.nd-spec-table tr.is-ok td:last-child {
    color: var(--lichen);
}

.nd-spec-table tr.is-ok td:last-child::before {
    content: '✓ ';
}

/* Stock bar (mate) */
.nd-stock-bar {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    margin-top: 0.25rem;
}

.nd-stock-cell {
    background: var(--chalk-light);
    padding: 0.75rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.nd-stock-cell .value {
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: var(--terracotta);
    letter-spacing: 0.05em;
    line-height: 1;
}

.nd-stock-cell .label {
    font-family: var(--font-mono);
    font-size: 0.5rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--moss-grey);
}

/* Dark quote variant overrides */
.news-item.size-quote .nd-event-card {
    background: rgba(250, 246, 232, 0.07);
    border-left-color: var(--lichen);
}
.news-item.size-quote .nd-event-when,
.news-item.size-quote .nd-event-where {
    color: rgba(250, 246, 232, 0.75);
}
.news-item.size-quote .nd-event-desc,
.news-item.size-quote .nd-event-desc p,
.news-item.size-quote .nd-article p {
    color: rgba(250, 246, 232, 0.85);
}

.news-item.size-quote .nd-section {
    border-top-color: rgba(250, 246, 232, 0.1);
}

.news-item.size-quote .nd-section-title {
    color: var(--lichen);
}

.news-item.size-quote .nd-fields dt {
    color: rgba(250, 246, 232, 0.5);
}

.news-item.size-quote .nd-fields dd {
    color: rgba(250, 246, 232, 0.85);
}

.news-item.size-quote .nd-article {
    color: rgba(250, 246, 232, 0.85);
}

.news-item.size-quote .nd-table th {
    color: rgba(250, 246, 232, 0.7);
    border-bottom-color: var(--lichen);
}

.news-item.size-quote .nd-table td {
    color: rgba(250, 246, 232, 0.8);
    border-bottom-color: rgba(250, 246, 232, 0.1);
}

/* Load more */
.actu-load-more {
    display: block;
    margin-top: 1.5rem;
    width: 100%;
    background: transparent;
    border: 1px solid var(--hairline-strong);
    padding: 1rem;
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--forest);
    cursor: pointer;
    transition: all var(--t-fast);
}
.actu-load-more:hover {
    border-color: var(--terracotta);
    color: var(--terracotta);
    background: var(--terracotta-soft);
}

/* ---- NEWSLETTER ---- */
.actu-newsletter {
    background: var(--forest);
    color: var(--chalk-light);
    padding: 3rem 1.25rem;
    position: relative;
    overflow: hidden;
}
.actu-newsletter::after {
    content: '';
    position: absolute;
    top: -40%;
    left: -25%;
    width: 75%;
    height: 200%;
    background: radial-gradient(circle, rgba(212, 173, 62, 0.18), transparent 60%);
    pointer-events: none;
}
.actu-newsletter > * {
    position: relative;
    z-index: 1;
}

.actu-newsletter-eye {
    font-family: var(--font-mono);
    font-size: 0.55rem;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--lichen);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.actu-newsletter-eye::before {
    content: '';
    width: 1.25rem;
    height: 1px;
    background: var(--lichen);
}
.actu-newsletter h2 {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 8vw, 2.4rem);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--chalk-light);
    line-height: 0.95;
    margin-bottom: 0.7rem;
}
.actu-newsletter h2 .italic {
    font-family: var(--font-serif);
    font-style: italic;
    text-transform: none;
    color: var(--lichen);
    font-size: 0.78em;
}
.actu-newsletter p {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 0.9rem;
    color: rgba(250, 246, 232, 0.75);
    line-height: 1.45;
    max-width: 36ch;
    margin-bottom: 1.4rem;
}
.actu-newsletter-form {
    display: flex;
    border: 1px solid rgba(250, 246, 232, 0.25);
}
.actu-newsletter-form input {
    flex: 1;
    background: transparent;
    border: none;
    padding: 0.95rem 1rem;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--chalk-light);
    outline: none;
}
.actu-newsletter-form input::placeholder {
    color: rgba(250, 246, 232, 0.4);
    letter-spacing: 0.05em;
}
.actu-newsletter-form button {
    background: var(--terracotta);
    color: var(--chalk-light);
    border: none;
    padding: 0 1.25rem;
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    font-weight: 700;
    cursor: pointer;
    transition: background var(--t-fast);
}
.actu-newsletter-form button:hover {
    background: var(--terracotta-light);
}

/* =============================================================
   === PAGE CLUB ===============================================
   Design handoff rRcfxTUE_M8tCkaBM-cKmA · Le club.html
   Page longue format — 7 sections fusionnées.
   ============================================================= */

/* --- Breadcrumbs --- */
.club-page .crumbs,
.planning-page .crumbs,
.tarifs-page .crumbs {
    background: var(--creme);
    padding: 0.85rem 1.25rem;
    border-bottom: 1px solid var(--hairline);
    font-family: var(--font-mono);
    font-size: 0.5rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--moss-grey);
    display: flex;
    gap: 0.5rem;
    align-items: center;
    overflow-x: auto;
    scrollbar-width: none;
    white-space: nowrap;
}
.club-page .crumbs::-webkit-scrollbar,
.planning-page .crumbs::-webkit-scrollbar,
.tarifs-page .crumbs::-webkit-scrollbar { display: none; }
.club-page .crumbs a:hover,
.planning-page .crumbs a:hover,
.tarifs-page .crumbs a:hover { color: var(--terracotta); }
.club-page .crumbs .sep,
.planning-page .crumbs .sep,
.tarifs-page .crumbs .sep { color: var(--hairline-strong); }
.club-page .crumbs .cur,
.planning-page .crumbs .cur,
.tarifs-page .crumbs .cur { color: var(--forest); }

/* --- HERO --- */
.club-page .club-hero {
    position: relative;
    min-height: 78vh;
    min-height: 78svh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
}
.club-page .club-hero-photo {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: 55% 30%;
    z-index: 0;
}
.club-page .club-hero-photo::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(31,38,24,0.50) 0%,
        rgba(31,38,24,0.15) 35%,
        rgba(31,38,24,0.92) 100%);
}
.club-page .hero-tag {
    position: absolute;
    top: 1rem;
    left: 1.25rem;
    z-index: 2;
    font-family: var(--font-mono);
    font-size: 0.55rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--chalk-light);
    background: var(--terracotta);
    padding: 0.45rem 0.7rem;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}
.club-page .hero-tag::before {
    content: '';
    width: 7px;
    height: 7px;
    background: var(--lichen);
    border-radius: 50%;
    box-shadow: inset 0 -1px 1px rgba(0,0,0,0.2);
}
.club-page .affil {
    position: absolute;
    bottom: 2.5rem;
    right: 1.25rem;
    z-index: 2;
    padding: 0.6rem 0.7rem;
    border: 1px solid rgba(250,246,232,0.25);
    background: rgba(31,38,24,0.35);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    color: var(--chalk-light);
    max-width: 11rem;
}
.club-page .affil .k {
    font-family: var(--font-mono);
    font-size: 0.42rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--lichen);
}
.club-page .affil .v {
    font-family: var(--font-display);
    font-size: 0.95rem;
    letter-spacing: 0.05em;
    line-height: 1;
}
.club-page .affil .s {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 0.7rem;
    color: rgba(250,246,232,0.75);
    margin-top: 0.2rem;
}
.club-page .club-hero-content {
    position: relative;
    z-index: 1;
    padding: 0 1.25rem 2.5rem;
    width: 100%;
}
.club-page .hero-meta {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    flex-wrap: wrap;
    font-family: var(--font-mono);
    font-size: 0.52rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(250,246,232,0.8);
    margin-bottom: 1.1rem;
}
.club-page .hero-meta .sep {
    width: 3px;
    height: 3px;
    background: var(--lichen);
    border-radius: 50%;
}
.club-page .club-hero h1 {
    font-family: var(--font-display);
    font-size: clamp(3.6rem, 18vw, 5.5rem);
    line-height: 0.86;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--chalk-light);
    text-shadow: 0 2px 24px rgba(31,38,24,0.4);
    margin-bottom: 1.2rem;
}
.club-page .club-hero h1 .it {
    display: block;
    font-family: var(--font-serif);
    font-style: italic;
    text-transform: none;
    color: var(--lichen);
    font-size: 0.7em;
    letter-spacing: -0.01em;
    margin-top: 0.05em;
}
.club-page .club-hero .deck {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1rem;
    line-height: 1.45;
    color: var(--chalk-light);
    max-width: 34ch;
    text-shadow: 0 1px 12px rgba(31,38,24,0.3);
}

/* --- TOC sticky --- */
.club-page .cp-toc,
.nos-sorties-page .cp-toc {
    background: rgba(250,246,232,0.95);
    border-bottom: 1px solid var(--hairline);
    padding: 0.7rem 1.25rem;
    overflow-x: auto;
    scrollbar-width: none;
    position: sticky;
    top: 0;
    z-index: 500;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.club-page .cp-toc::-webkit-scrollbar,
.nos-sorties-page .cp-toc::-webkit-scrollbar { display: none; }
.club-page .cp-toc-inner,
.nos-sorties-page .cp-toc-inner {
    display: flex;
    gap: 0;
    white-space: nowrap;
}
.club-page .cp-toc a,
.nos-sorties-page .cp-toc a {
    font-family: var(--font-mono);
    font-size: 0.5rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--moss-grey);
    padding: 0.3rem 0.6rem;
    border-bottom: 1px solid transparent;
    transition: color var(--t-fast), border-color var(--t-fast);
}
.club-page .cp-toc a:hover,
.nos-sorties-page .cp-toc a:hover,
.club-page .cp-toc a.active,
.nos-sorties-page .cp-toc a.active {
    color: var(--terracotta);
    border-bottom-color: var(--terracotta);
}
.club-page .cp-toc .nm,
.nos-sorties-page .cp-toc .nm {
    font-size: 0.42rem;
    color: var(--terracotta);
    margin-right: 0.25rem;
}

/* --- Section chrome --- */
.club-page .cp-section,
.nos-sorties-page .cp-section,
.planning-page .cp-section,
.tarifs-page .cp-section,
.homepage-page .cp-section {
    padding: 3.5rem 1.25rem;
    border-bottom: 1px solid var(--hairline);
}
.club-page .cp-section.creme,
.nos-sorties-page .cp-section.creme,
.planning-page .cp-section.creme,
.tarifs-page .cp-section.creme,
.homepage-page .cp-section.creme   { background: var(--creme); }
.club-page .cp-section.chalk,
.nos-sorties-page .cp-section.chalk,
.planning-page .cp-section.chalk,
.tarifs-page .cp-section.chalk,
.homepage-page .cp-section.chalk   { background: var(--chalk-light); }
.club-page .cp-section.calcaire,
.nos-sorties-page .cp-section.calcaire,
.planning-page .cp-section.calcaire,
.tarifs-page .cp-section.calcaire,
.homepage-page .cp-section.calcaire { background: var(--calcaire); }

.club-page .sec-eye,
.nos-sorties-page .sec-eye,
.planning-page .sec-eye,
.tarifs-page .sec-eye,
.homepage-page .sec-eye {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--font-mono);
    font-size: 0.55rem;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--terracotta);
    margin-bottom: 1rem;
}
.club-page .sec-eye::before,
.nos-sorties-page .sec-eye::before,
.planning-page .sec-eye::before,
.tarifs-page .sec-eye::before,
.homepage-page .sec-eye::before {
    content: '';
    width: 1.3rem;
    height: 1px;
    background: var(--terracotta);
}
.club-page .sec-num,
.nos-sorties-page .sec-num,
.planning-page .sec-num,
.homepage-page .sec-num {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: 0.5rem;
    letter-spacing: 0.3em;
    color: var(--moss-grey);
}
.club-page .sec-title,
.nos-sorties-page .sec-title,
.planning-page .sec-title,
.tarifs-page .sec-title,
.homepage-page .sec-title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 7vw, 2.6rem);
    line-height: 0.92;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--forest);
    margin-bottom: 1.5rem;
}
.club-page .sec-title .it,
.nos-sorties-page .sec-title .it,
.planning-page .sec-title .it,
.tarifs-page .sec-title .it,
.homepage-page .sec-title .it {
    font-family: var(--font-serif);
    font-style: italic;
    text-transform: none;
    color: var(--moss);
    font-size: 0.72em;
    display: block;
    margin-top: 0.05em;
}
.club-page .sec-body p,
.nos-sorties-page .sec-body p,
.planning-page .sec-body p,
.tarifs-page .sec-body p,
.homepage-page .sec-body p {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    line-height: 1.85;
    color: var(--bark);
    margin-bottom: 1.1rem;
    text-wrap: pretty;
}
.club-page .sec-body p .accent,
.nos-sorties-page .sec-body p .accent,
.planning-page .sec-body p .accent,
.tarifs-page .sec-body p .accent,
.homepage-page .sec-body p .accent { color: var(--terracotta); font-weight: 700; }
.club-page .sec-body p em,
.nos-sorties-page .sec-body p em,
.planning-page .sec-body p em,
.tarifs-page .sec-body p em,
.homepage-page .sec-body p em {
    font-family: var(--font-serif);
    font-style: italic;
    color: var(--forest);
    font-size: 1.05em;
}
.club-page .sec-body p.lead,
.nos-sorties-page .sec-body p.lead,
.planning-page .sec-body p.lead,
.tarifs-page .sec-body p.lead,
.homepage-page .sec-body p.lead {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1.2rem;
    line-height: 1.45;
    color: var(--forest);
    margin-bottom: 1.5rem;
}

/* --- STATS (dark forest) --- */
.club-page .cp-stats {
    background: var(--forest);
    color: var(--chalk-light);
    padding: 3rem 1.25rem 3.2rem;
    border-bottom: 1px solid var(--hairline);
    position: relative;
    overflow: hidden;
}
.club-page .cp-stats::after {
    content: '';
    position: absolute;
    top: -50%;
    right: -25%;
    width: 70%;
    height: 200%;
    background: radial-gradient(circle, rgba(212,173,62,0.16), transparent 60%);
    pointer-events: none;
}
.club-page .cp-stats > * { position: relative; z-index: 1; }
.club-page .cp-stats .sec-eye { color: var(--lichen); }
.club-page .cp-stats .sec-eye::before { background: var(--lichen); }
.club-page .cp-stats .sec-title { color: var(--chalk-light); }
.club-page .cp-stats .sec-title .it { color: var(--lichen); }
.club-page .stat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: rgba(250,246,232,0.12);
    border: 1px solid rgba(250,246,232,0.12);
    margin-top: 1rem;
}
.club-page .stat-cell {
    background: var(--forest);
    padding: 1.1rem 0.9rem 1.2rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.club-page .stat-cell .num {
    font-family: var(--font-display);
    font-size: 2.6rem;
    line-height: 0.85;
    color: var(--chalk-light);
    letter-spacing: 0.01em;
}
.club-page .stat-cell .num .u {
    font-family: var(--font-serif);
    font-style: italic;
    color: var(--lichen);
    font-size: 0.5em;
    margin-left: 0.1em;
}
.club-page .stat-cell .lbl {
    font-family: var(--font-mono);
    font-size: 0.55rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(250,246,232,0.75);
    line-height: 1.4;
}

/* --- PILIERS --- */
.club-page .piliers {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--hairline-strong);
    margin-top: 1.5rem;
}
.club-page .pilier {
    display: grid;
    grid-template-columns: 2.5rem 1fr auto;
    gap: 1rem;
    padding: 1.4rem 0 1.5rem;
    align-items: baseline;
    border-bottom: 1px solid var(--hairline);
}
.club-page .pilier-num {
    font-family: var(--font-display);
    font-size: 1.4rem;
    color: var(--terracotta);
    letter-spacing: 0.05em;
}
.club-page .pilier-body { display: flex; flex-direction: column; gap: 0.35rem; }
.club-page .pilier-name {
    font-family: var(--font-display);
    font-size: 1.4rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--forest);
    line-height: 1;
}
.club-page .pilier-desc {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 0.92rem;
    color: var(--moss-grey);
    line-height: 1.4;
}
.club-page .pilier-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    box-shadow: inset 0 -2px 3px rgba(0,0,0,0.25), inset 0 1px 1px rgba(255,255,255,0.4);
    margin-top: 0.3rem;
}
.club-page .pilier:nth-child(1) .pilier-dot { background: var(--terracotta); }
.club-page .pilier:nth-child(2) .pilier-dot { background: var(--hold-red); }
.club-page .pilier:nth-child(3) .pilier-dot { background: var(--moss); }

/* --- MUR CARD --- */
.club-page .mur-card {
    display: grid;
    grid-template-columns: 1fr;
    background: var(--chalk-light);
    border: 1px solid var(--hairline);
    margin-top: 1rem;
}
.club-page .mur-photo {
    aspect-ratio: 16/10;
    background-size: cover;
    background-position: center;
    position: relative;
}
.club-page .mur-photo::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 60%, rgba(31,38,24,0.55));
}
.club-page .mur-photo .cap {
    position: absolute;
    bottom: 0.7rem;
    left: 0.85rem;
    z-index: 1;
    font-family: var(--font-mono);
    font-size: 0.5rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--chalk-light);
}
.club-page .mur-specs { padding: 1.25rem 1.1rem 1.4rem; }
.club-page .mur-specs h3 {
    font-family: var(--font-display);
    font-size: 1.2rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--forest);
    margin-bottom: 0.9rem;
}
.club-page .spec-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--hairline);
    border: 1px solid var(--hairline);
}
.club-page .spec {
    background: var(--creme);
    padding: 0.8rem 0.85rem 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.club-page .spec .k {
    font-family: var(--font-mono);
    font-size: 0.45rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--moss-grey);
}
.club-page .spec .v {
    font-family: var(--font-display);
    font-size: 1.1rem;
    letter-spacing: 0.02em;
    color: var(--forest);
    text-transform: uppercase;
    line-height: 1;
}
.club-page .spec .v .sub {
    display: block;
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 0.72rem;
    text-transform: none;
    letter-spacing: 0;
    color: var(--moss-grey);
    margin-top: 0.15rem;
}
.club-page .addr {
    margin-top: 1rem;
    padding: 0.9rem 1rem;
    background: var(--terracotta-soft);
    border-left: 3px solid var(--terracotta);
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.club-page .addr .lbl {
    font-family: var(--font-mono);
    font-size: 0.48rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--terracotta-deep);
}
.club-page .addr .name {
    font-family: var(--font-display);
    font-size: 0.95rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--forest);
    line-height: 1.1;
}
.club-page .addr .line {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--bark);
}

/* --- SÉANCES --- */
.club-page .seances,
.planning-page .seances {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
    margin-top: 1rem;
}
.club-page .seance,
.planning-page .seance {
    background: var(--chalk-light);
    border: 1px solid var(--hairline);
    border-left: 4px solid var(--terracotta);
    padding: 1rem 1rem 1.1rem;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.85rem;
    align-items: center;
}
.club-page .seance[data-c="enfants"],
.planning-page .seance[data-c="enfants"]      { border-left-color: var(--hold-green); }
.club-page .seance[data-c="jeunes"],
.planning-page .seance[data-c="jeunes"]       { border-left-color: var(--hold-blue); }
.club-page .seance[data-c="ados"],
.planning-page .seance[data-c="ados"]         { border-left-color: var(--hold-purple); }
.club-page .seance[data-c="adultes-init"],
.planning-page .seance[data-c="adultes-init"] { border-left-color: var(--lichen); }
.club-page .seance[data-c="adultes-perf"],
.planning-page .seance[data-c="adultes-perf"] { border-left-color: var(--terracotta); }
.club-page .seance[data-c="autonomes"],
.planning-page .seance[data-c="autonomes"]    { border-left-color: var(--moss); }
.club-page .seance[data-c="compe"],
.planning-page .seance[data-c="compe"]        { border-left-color: var(--hold-red); }
.club-page .seance-day,
.planning-page .seance-day {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.4rem 0.5rem;
    border: 1px solid var(--hairline-strong);
    min-width: 50px;
}
.club-page .seance-day .d,
.planning-page .seance-day .d {
    font-family: var(--font-display);
    font-size: 1.05rem;
    color: var(--terracotta);
    line-height: 1;
    letter-spacing: 0.03em;
}
.club-page .seance-day .h,
.planning-page .seance-day .h {
    font-family: var(--font-mono);
    font-size: 0.48rem;
    letter-spacing: 0.15em;
    color: var(--moss-grey);
    margin-top: 0.2rem;
}
.club-page .seance-body,
.planning-page .seance-body {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}
.club-page .seance-name,
.planning-page .seance-name {
    font-family: var(--font-display);
    font-size: 0.95rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--forest);
    line-height: 1.05;
}
.club-page .seance-sub,
.planning-page .seance-sub {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 0.78rem;
    color: var(--moss-grey);
    line-height: 1.35;
}
.club-page .seance-time,
.planning-page .seance-time {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.12em;
    color: var(--forest);
    font-weight: 700;
    white-space: nowrap;
    text-align: right;
}
.club-page .seance-time .age,
.planning-page .seance-time .age {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.45rem;
    letter-spacing: 0.22em;
    color: var(--moss-grey);
    font-weight: 400;
    margin-top: 0.2rem;
    text-transform: uppercase;
}

/* --- TARIFS --- */
.club-page .tarifs,
.tarifs-page .tarifs {
    margin-top: 1rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}
.club-page .tarif,
.tarifs-page .tarif {
    background: var(--chalk-light);
    border: 1px solid var(--hairline);
    padding: 1rem 0.85rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    position: relative;
}
.club-page .tarif.featured,
.tarifs-page .tarif.featured {
    border-color: var(--terracotta);
    background: var(--creme);
}
.club-page .tarif.featured::before,
.tarifs-page .tarif.featured::before {
    content: 'le + choisi';
    position: absolute;
    top: -0.55rem;
    left: 0.85rem;
    background: var(--terracotta);
    color: var(--chalk-light);
    font-family: var(--font-mono);
    font-size: 0.42rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    padding: 0.25rem 0.5rem;
}
.club-page .tarif .nm,
.tarifs-page .tarif .nm {
    font-family: var(--font-display);
    font-size: 1rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--forest);
    line-height: 1.05;
}
.club-page .tarif .pr,
.tarifs-page .tarif .pr {
    font-family: var(--font-display);
    font-size: 2rem;
    color: var(--terracotta);
    letter-spacing: 0.01em;
    line-height: 0.9;
}
.club-page .tarif .pr .u,
.tarifs-page .tarif .pr .u {
    font-family: var(--font-mono);
    font-size: 0.55rem;
    color: var(--moss-grey);
    letter-spacing: 0.15em;
    margin-left: 0.2rem;
    font-weight: 400;
}
.club-page .tarif .desc,
.tarifs-page .tarif .desc {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 0.78rem;
    color: var(--moss-grey);
    line-height: 1.4;
}
.club-page .tarif .inc,
.tarifs-page .tarif .inc {
    font-family: var(--font-mono);
    font-size: 0.55rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--forest);
    padding-top: 0.5rem;
    border-top: 1px dashed var(--hairline-strong);
    margin-top: auto;
}
.club-page .tarif-note,
.tarifs-page .tarif-note {
    grid-column: 1 / -1;
    background: var(--terracotta-soft);
    border-left: 3px solid var(--terracotta);
    padding: 0.85rem 1rem;
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 0.85rem;
    color: var(--terracotta-deep);
    line-height: 1.5;
}
.club-page .tarif-note .accent,
.tarifs-page .tarif-note .accent {
    font-family: var(--font-mono);
    font-style: normal;
    font-size: 0.55rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--terracotta);
    display: block;
    margin-bottom: 0.3rem;
}

/* --- TRIBUNE (dark) --- */
.club-page .cp-tribune,
.planning-page .cp-tribune {
    background: var(--forest);
    color: var(--chalk-light);
    padding: 4rem 1.25rem;
    border-bottom: 1px solid rgba(212,173,62,0.18);
    position: relative;
    overflow: hidden;
}
.club-page .cp-tribune::before,
.planning-page .cp-tribune::before {
    content: '«';
    position: absolute;
    top: -2rem;
    left: -0.5rem;
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 14rem;
    color: var(--lichen);
    opacity: 0.15;
    line-height: 1;
    pointer-events: none;
}
.club-page .cp-tribune > *,
.planning-page .cp-tribune > * { position: relative; z-index: 1; }
.club-page .cp-tribune .sec-eye,
.planning-page .cp-tribune .sec-eye { color: var(--lichen); }
.club-page .cp-tribune .sec-eye::before,
.planning-page .cp-tribune .sec-eye::before { background: var(--lichen); }
.club-page .tribune-quote,
.planning-page .tribune-quote {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: clamp(1.5rem, 5.5vw, 1.9rem);
    line-height: 1.3;
    color: var(--chalk-light);
    margin-bottom: 1.5rem;
    max-width: 36ch;
}
.club-page .tribune-quote .accent,
.planning-page .tribune-quote .accent { color: var(--lichen); }
.club-page .tribune-by,
.planning-page .tribune-by {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: rgba(250,246,232,0.7);
}

/* --- ÉQUIPEMENT --- */
.club-page .equip-grid,
.nos-sorties-page .equip-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    margin-top: 1rem;
    border-top: 1px solid var(--hairline);
}
.club-page .equip,
.nos-sorties-page .equip {
    display: grid;
    grid-template-columns: 2rem 1fr auto;
    gap: 0.85rem;
    padding: 0.95rem 0;
    border-bottom: 1px solid var(--hairline);
    align-items: center;
}
.club-page .equip-check,
.nos-sorties-page .equip-check {
    width: 22px;
    height: 22px;
    border: 1.5px solid var(--terracotta);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--terracotta);
    font-family: var(--font-display);
    font-size: 0.85rem;
    line-height: 1;
}
.club-page .equip-check.opt,
.nos-sorties-page .equip-check.opt {
    border-color: var(--hairline-strong);
    color: var(--moss-grey);
}
.club-page .equip-body,
.nos-sorties-page .equip-body { display: flex; flex-direction: column; gap: 0.2rem; }
.club-page .equip-name,
.nos-sorties-page .equip-name {
    font-family: var(--font-display);
    font-size: 0.95rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--forest);
    line-height: 1.05;
}
.club-page .equip-desc,
.nos-sorties-page .equip-desc {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 0.78rem;
    color: var(--moss-grey);
    line-height: 1.35;
}
.club-page .equip-when,
.nos-sorties-page .equip-when {
    font-family: var(--font-mono);
    font-size: 0.45rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    padding: 3px 7px;
    border: 1px solid var(--moss-grey);
    color: var(--moss-grey);
    white-space: nowrap;
}
.club-page .equip-when.salle,
.nos-sorties-page .equip-when.salle { border-color: var(--terracotta); color: var(--terracotta); }
.club-page .equip-when.falaise,
.nos-sorties-page .equip-when.falaise { border-color: var(--hold-blue);  color: var(--hold-blue); }
.club-page .equip-when.option,
.nos-sorties-page .equip-when.option { border-color: var(--moss-grey);  color: var(--moss-grey); }

/* --- CALENDAR SORTIES --- */
.club-page .cal-legend,
.nos-sorties-page .cal-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin-bottom: 1rem;
    font-family: var(--font-mono);
    font-size: 0.5rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--moss-grey);
}
.club-page .cal-legend .lg,
.nos-sorties-page .cal-legend .lg { display: inline-flex; align-items: center; gap: 0.35rem; }
.club-page .cal-legend .swatch,
.nos-sorties-page .cal-legend .swatch { width: 10px; height: 10px; }
.club-page .cal-legend .swatch.a,
.nos-sorties-page .cal-legend .swatch.a { background: var(--terracotta); }
.club-page .cal-legend .swatch.m,
.nos-sorties-page .cal-legend .swatch.m { background: var(--lichen); }
.club-page .calendar-year,
.nos-sorties-page .calendar-year {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 2px;
    margin: 1.5rem 0 1rem;
}
.club-page .cal-month,
.nos-sorties-page .cal-month {
    padding: 0.5rem 0.2rem;
    text-align: center;
    background: var(--creme);
    border: 1px solid var(--hairline);
    font-family: var(--font-mono);
    font-size: 0.42rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--moss-grey);
}
.club-page .cal-month.active,
.nos-sorties-page .cal-month.active {
    background: var(--terracotta);
    color: var(--chalk-light);
    border-color: var(--terracotta-deep);
}
.club-page .cal-month.maybe,
.nos-sorties-page .cal-month.maybe {
    background: var(--lichen-soft);
    color: var(--terracotta-deep);
    border-color: var(--lichen);
}
.club-page .sortie-rules,
.nos-sorties-page .sortie-rules {
    margin-top: 1rem;
    background: var(--chalk-light);
    border: 1px solid var(--hairline);
    padding: 1.1rem 1rem 1.2rem;
}
.club-page .sortie-rules h4,
.nos-sorties-page .sortie-rules h4 {
    font-family: var(--font-display);
    font-size: 1.1rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--forest);
    margin-bottom: 0.7rem;
}
.club-page .sortie-rules ul,
.nos-sorties-page .sortie-rules ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.club-page .sortie-rules li,
.nos-sorties-page .sortie-rules li {
    display: grid;
    grid-template-columns: 1.2rem 1fr;
    gap: 0.6rem;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    line-height: 1.55;
    color: var(--bark);
    align-items: baseline;
}
.club-page .sortie-rules li::before,
.nos-sorties-page .sortie-rules li::before {
    content: '→';
    font-family: var(--font-display);
    color: var(--terracotta);
    font-size: 0.9rem;
}

/* --- ÉQUIPE --- */
.club-page .team-block-head {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    margin-top: 1rem;
    margin-bottom: 0.8rem;
    font-family: var(--font-mono);
    font-size: 0.55rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--moss-grey);
}
.club-page .team-block-head::before {
    content: '';
    width: 1rem;
    height: 1px;
    background: var(--moss-grey);
}
.club-page .team-block-head .cnt {
    margin-left: auto;
    color: var(--terracotta);
}
.club-page .team-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}
.club-page .team-card {
    background: var(--chalk-light);
    border: 1px solid var(--hairline);
    padding: 0.9rem 0.85rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.club-page .team-card.lead {
    border-color: var(--terracotta);
    background: var(--creme);
}
.club-page .team-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--terracotta-soft);
    color: var(--terracotta);
    border: 1px solid var(--terracotta);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 1.05rem;
    letter-spacing: 0.04em;
    line-height: 1;
}

/* .team-avatar.has-photo — affiche la photo en background, masque les initiales */
.club-page .team-avatar.has-photo {
    background-size: cover;
    background-position: center;
    background-color: transparent;
    border-color: var(--terracotta);
    color: transparent;
}
.club-page .team-card.lead .team-avatar {
    background: var(--terracotta);
    color: var(--chalk-light);
}
.club-page .team-name {
    font-family: var(--font-display);
    font-size: 0.95rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--forest);
    line-height: 1.05;
}
.club-page .team-role {
    font-family: var(--font-mono);
    font-size: 0.5rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--terracotta);
    line-height: 1.4;
}
.club-page .team-card.lead .team-role { color: var(--terracotta-deep); }

/* --- JOIN (terracotta) --- */
.cp-join {
    background: var(--terracotta);
    color: var(--chalk-light);
    padding: 4rem 1.25rem;
    border-bottom: 1px solid var(--hairline);
}
.cp-join .sec-eye { color: var(--chalk-light); }
.cp-join .sec-eye::before { background: var(--chalk-light); }
.cp-join h2 {
    font-family: var(--font-display);
    font-size: clamp(2.6rem, 11vw, 3.4rem);
    line-height: 0.92;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--chalk-light);
    margin-bottom: 1.5rem;
}
.cp-join h2 .it {
    display: block;
    font-family: var(--font-serif);
    font-style: italic;
    text-transform: none;
    color: rgba(250,246,232,0.85);
    font-size: 0.7em;
}
.cp-join p {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1rem;
    color: rgba(250,246,232,0.9);
    margin-bottom: 1.8rem;
    line-height: 1.5;
    max-width: 32ch;
}
.cp-join .btns { display: flex; flex-direction: column; gap: 0.5rem; }
.cp-join .btn-join-primary,
.btn-join-primary {
    background: var(--forest);
    color: var(--chalk-light);
    padding: 1rem 1.4rem;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    border: none;
    text-align: center;
    font-weight: 700;
    transition: background var(--t-base);
    display: inline-block;
}
.cp-join .btn-join-primary:hover,
.btn-join-primary:hover { background: var(--bark); }
.cp-join .btn-join-ghost,
.btn-join-ghost {
    background: transparent;
    color: var(--chalk-light);
    padding: 0.95rem 1.4rem;
    border: 1px solid rgba(250,246,232,0.35);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    text-align: center;
    display: inline-block;
    transition: border-color var(--t-fast), background var(--t-fast);
}
.cp-join .btn-join-ghost:hover,
.btn-join-ghost:hover {
    border-color: var(--chalk-light);
    background: rgba(250,246,232,0.1);
}

/* === PAGE PLANNING === */
.planning-page {
    color: var(--warm-white);
    background: var(--charcoal);
}

.planning-page .planning-header,
.tarifs-page .tarifs-header {
    padding: 3.5rem 1.25rem 2rem;
    border-bottom: 1px solid var(--hairline);
}

.planning-page .planning-header h1,
.tarifs-page .tarifs-header h1 {
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 8vw, 4rem);
    color: var(--warm-white);
    text-transform: uppercase;
    line-height: 1;
    margin: 0.5rem 0;
}

.planning-page .planning-header h1 .it,
.tarifs-page .tarifs-header h1 .it {
    font-family: var(--font-serif);
    font-style: italic;
    text-transform: none;
    color: var(--warm-grey);
}

.planning-page .planning-header .deck,
.tarifs-page .tarifs-header .deck {
    font-family: var(--font-mono);
    font-size: 0.875rem;
    color: var(--warm-grey);
    margin-top: 0.75rem;
    max-width: 56ch;
}

.planning-page .planning-note {
    background: var(--chalk-light);
    border: 1px solid var(--hairline);
    border-left: 4px solid var(--terracotta);
    padding: 1rem 1rem 1.1rem;
    font-family: var(--font-mono);
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--ink);
    margin-top: 0.5rem;
}

.planning-page .back-link {
    display: inline-block;
    padding: var(--sp-md) var(--sp-lg);
    color: var(--warm-grey);
    font-family: var(--font-mono);
    font-size: 0.875rem;
    text-decoration: none;
    transition: color 0.2s ease;
}

.planning-page .back-link:hover {
    color: var(--warm-white);
}

/* === PAGE TARIFS === */
.tarifs-page {
    color: var(--warm-white);
    background: var(--charcoal);
}

/* hero-tag — tarifs */
.tarifs-page .tarifs-header .hero-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-family: var(--font-mono);
    font-size: 0.55rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--chalk-light);
    background: var(--terracotta);
    padding: 0.4rem 0.65rem;
    margin-bottom: var(--space-5);

    &::before {
        content: '';
        width: 6px;
        height: 6px;
        background: var(--lichen);
        border-radius: 50%;
    }
}


.tarifs-page .tarif-family-note {
    background: var(--chalk-light);
    border: 1px solid var(--hairline);
    border-left: 4px solid var(--terracotta);
    padding: 1rem 1rem 1.1rem;
    font-family: var(--font-mono);
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--ink);
    margin-top: 0.5rem;
}

.tarifs-page .back-link {
    display: inline-block;
    padding: var(--sp-md) var(--sp-lg);
    color: var(--warm-grey);
    font-family: var(--font-mono);
    font-size: 0.875rem;
    text-decoration: none;
    transition: color 0.2s ease;
}

.tarifs-page .back-link:hover {
    color: var(--warm-white);
}

/* Teaser séances dans /le-club */
.club-page .btn-teaser {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    background: var(--terracotta);
    color: var(--warm-white);
    font-family: var(--font-display);
    font-size: 1rem;
    letter-spacing: 0.05em;
    text-decoration: none;
    margin-top: var(--sp-md);
    transition: background 0.2s ease;
}

.club-page .btn-teaser:hover {
    background: var(--rust, #a8472e);
}

/* === Page Nos Sorties === */

/* --- Hero --- */
.ns-hero {
    position: relative;
    min-height: 50vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
}

.ns-hero-photo {
    position: absolute;
    inset: 0;
    background-color: var(--bark);
    background-size: cover;
    background-position: center;
}

.ns-hero-photo::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(31,38,24,0.35) 0%,
        rgba(31,38,24,0.12) 30%,
        rgba(31,38,24,0.88) 100%
    );
}

.ns-hero-content {
    position: relative;
    z-index: 1;
    padding: 0 1.25rem 2rem;
}

.ns-hero-content .eyebrow {
    color: var(--chalk-light);
    opacity: 0.8;
}

.ns-hero-title {
    font-family: var(--font-display);
    font-size: clamp(2.6rem, 13vw, 4rem);
    line-height: 0.9;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color: var(--chalk-light);
    margin: 0.5rem 0 0;
}

.ns-hero-italic {
    font-family: var(--font-serif);
    font-style: italic;
    text-transform: none;
    color: var(--chalk-light);
    font-size: 0.85em;
    display: block;
    margin-top: 0.15em;
}

/* --- Hero · Comment ça marche (relocalisé dans la photo) --- */
.ns-hero-steps {
    margin-top: 1.75rem;
    max-width: 820px;
}

.ns-hero-steps-eyebrow {
    font-family: var(--font-mono);
    font-size: 0.55rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--chalk-light);
    opacity: 0.8;
    margin-bottom: 0.6rem;
}

.ns-hero-steps-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
}

.ns-hero-step {
    display: grid;
    grid-template-columns: 1.8rem 1fr;
    gap: 0.7rem;
    align-items: baseline;
    padding: 0.6rem 0;
    border-top: 1px solid rgba(250,246,232,0.22);
}

.ns-hero-step .n {
    font-family: var(--font-display);
    font-size: 1.1rem;
    color: var(--terracotta-light);
}

.ns-hero-step .t {
    display: block;
    font-family: var(--font-display);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--chalk-light);
}

.ns-hero-step .d {
    display: block;
    margin-top: 0.15rem;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    line-height: 1.5;
    color: rgba(250,246,232,0.78);
}

@media (min-width: 760px) {
    .ns-hero-steps-list {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
    }

    .ns-hero-step {
        border-top: none;
        padding: 0;
    }
}

/* --- Filters --- */
.ns-filters {
    display: flex;
    gap: 0.4rem;
    padding: 1rem 1.25rem;
    overflow-x: auto;
    scrollbar-width: none;
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--hairline);
}

.ns-filters::-webkit-scrollbar { display: none; }

.ns-filter {
    font-family: var(--font-mono);
    font-size: 0.55rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--fg-muted);
    padding: 0.45rem 0.7rem;
    border: 1px solid var(--hairline-strong);
    white-space: nowrap;
    cursor: pointer;
    background: transparent;
    transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}

.ns-filter.active,
.ns-filter:hover {
    color: var(--terracotta);
    border-color: var(--terracotta);
    background: var(--terracotta-soft);
}

/* --- Section layout --- */
.ns-section {
    background: var(--bg);
    border-top: 1px solid var(--hairline);
}

.ns-section--alt {
    background: var(--bg-elevated);
}

.ns-section--past {
    background: var(--bg-elevated);
}

.ns-section-head {
    padding: 2rem 1.25rem 1rem;
}

.ns-page-title {
    font-family: var(--font-display);
    font-size: 1.6rem;
    line-height: 0.95;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--fg);
    margin: 0.4rem 0 0;
}

.ns-italic {
    font-family: var(--font-serif);
    font-style: italic;
    text-transform: none;
    color: var(--fg-muted);
    display: block;
}

.ns-deck {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    line-height: 1.6;
    color: var(--fg-muted);
    margin-top: 0.75rem;
    max-width: 560px;
}

/* --- Card list --- */
.ns-list {
    padding: 0;
}

.ns-sortie {
    display: grid;
    grid-template-columns: 80px 1fr;
    border-top: 1px solid var(--hairline);
}

.ns-sortie:first-child {
    border-top: none;
}

/* --- Date column --- */
.ns-sortie-date {
    background: var(--terracotta-soft);
    padding: 1.25rem 0.75rem;
    text-align: center;
    border-right: 1px solid var(--hairline);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.ns-sortie-date--past {
    background: var(--bg-elevated);
}

.ns-sortie-day {
    font-family: var(--font-display);
    font-size: 1.9rem;
    color: var(--terracotta);
    line-height: 0.9;
    letter-spacing: 0.02em;
}

.ns-sortie-day--muted {
    color: var(--fg-muted);
}

.ns-sortie-month {
    font-family: var(--font-mono);
    font-size: 0.55rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--fg-muted);
    margin-top: 0.4rem;
}

.ns-sortie-year {
    font-family: var(--font-mono);
    font-size: 0.5rem;
    letter-spacing: 0.3em;
    color: var(--fg-muted);
    opacity: 0.6;
    margin-top: 0.2rem;
}

/* --- Card body --- */
.ns-sortie-body {
    padding: 1.1rem 1rem;
}

.ns-sortie-meta {
    display: flex;
    gap: 0.4rem;
    align-items: center;
    font-family: var(--font-mono);
    font-size: 0.5rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--terracotta);
    margin-bottom: 0.4rem;
    flex-wrap: wrap;
}

.ns-neutral {
    color: var(--fg-muted);
}

.ns-dot {
    width: 3px;
    height: 3px;
    background: var(--fg-muted);
    border-radius: 50%;
    flex-shrink: 0;
}

.ns-sortie-name {
    font-family: var(--font-display);
    font-size: 1.15rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--fg);
    line-height: 1.05;
    margin-bottom: 0.35rem;
}

.ns-sortie-name--past {
    color: var(--fg-muted);
}

.ns-sortie-tagline {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 0.78rem;
    line-height: 1.4;
    color: var(--fg-muted);
    margin-bottom: 0.6rem;
}

.ns-sortie-foot {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-top: 0.6rem;
    padding-top: 0.6rem;
    border-top: 1px dashed var(--hairline-strong);
}

.ns-sortie-spots {
    font-family: var(--font-mono);
    font-size: 0.55rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--fg-muted);
}

.ns-sortie-cta {
    font-family: var(--font-mono);
    font-size: 0.55rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--terracotta);
    text-decoration: none;
    transition: color var(--t-fast);
}

.ns-sortie-cta:hover {
    color: var(--terracotta-deep);
}

.ns-sortie-cta--muted {
    color: var(--fg-muted);
}

.ns-sortie-cta--muted:hover {
    color: var(--fg);
}

/* --- Status badges --- */
.ns-status {
    font-family: var(--font-mono);
    font-size: 0.45rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    padding: 0.25rem 0.4rem;
    border: 1px solid;
}

.ns-status--open {
    color: var(--terracotta);
    border-color: var(--terracotta);
}

.ns-status--full {
    color: var(--fg-muted);
    border-color: var(--hairline-strong);
}

.ns-status--soon {
    color: var(--fg);
    border-color: var(--hairline-strong);
}

/* --- Spots grid (falaises) --- */
.ns-spots-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
    padding: 0 1.25rem 2rem;
}

.ns-spot-card {
    background: var(--bg-elevated);
    padding: 1rem;
    border: 1px solid var(--hairline);
}

.ns-section--alt .ns-spot-card {
    background: var(--bg);
}

.ns-spot-area {
    font-family: var(--font-mono);
    font-size: 0.5rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--terracotta);
    margin-bottom: 0.5rem;
}

.ns-spot-name {
    font-family: var(--font-display);
    font-size: 1rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--fg);
    line-height: 1.05;
    margin-bottom: 0.4rem;
}

.ns-spot-info {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    line-height: 1.6;
    color: var(--fg-muted);
}

.ns-spot-info strong {
    color: var(--fg);
    font-weight: normal;
}

/* --- Steps (comment ça marche) --- */
.ns-steps {
    list-style: none;
    margin: 1.5rem 0 0;
    padding: 0 1.25rem 2rem;
}

.ns-step {
    padding: 1rem 0;
    border-bottom: 1px solid var(--hairline);
    display: grid;
    grid-template-columns: 2rem 1fr;
    gap: 1rem;
    align-items: baseline;
}

.ns-step:last-child {
    border-bottom: none;
}

.ns-step-num {
    font-family: var(--font-display);
    color: var(--terracotta);
    font-size: 1.1rem;
}

.ns-step-title {
    font-family: var(--font-display);
    font-size: 0.95rem;
    text-transform: uppercase;
    color: var(--fg);
    letter-spacing: 0.04em;
    margin-bottom: 0.2rem;
}

.ns-step-desc {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    line-height: 1.5;
    color: var(--fg-muted);
}

/* --- Misc --- */
.ns-empty {
    font-family: var(--font-serif);
    font-style: italic;
    color: var(--fg-muted);
    padding: 2rem 1.25rem;
}

@media (min-width: 640px) {
    .ns-sortie {
        grid-template-columns: 90px 1fr;
    }

    .ns-spots-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .ns-hero {
        min-height: 60vh;
    }

    .ns-page-title {
        font-size: 2rem;
    }

    .ns-hero-title {
        font-size: clamp(3rem, 8vw, 5rem);
    }
}

@media (min-width: 960px) {
    .ns-section-head {
        padding: 3rem 2rem 1.5rem;
    }

    .ns-spots-grid {
        padding: 0 2rem 3rem;
        grid-template-columns: repeat(3, 1fr);
    }

    .ns-steps {
        padding: 1.5rem 2rem 3rem;
        max-width: 720px;
    }
}