@import url("brand.css?v=20261009a");

/* ==========================================================================
   Rock's Cool – site public
   Concept : l'affiche de concert. Disciplines en « line-up », antennes en
   « dates de tournée ». Sections sombres = ambiance, sections papier = infos.
   ========================================================================== */

@font-face {
    font-family: "Big Shoulders Display";
    src: url("../fonts/big-shoulders-display-latin.woff2") format("woff2");
    font-weight: 100 900;
    font-display: swap;
}

@font-face {
    font-family: "Instrument Sans";
    src: url("../fonts/instrument-sans-latin.woff2") format("woff2");
    font-weight: 400 700;
    font-display: swap;
}

:root {
    --night: var(--brand-night);
    --night-deep: var(--brand-night-deep);
    --stage: var(--brand-stage);
    --steel: #385D7F;
    --paper: #ECEFF1;
    --white: #FFFFFF;
    --ink: #0E1B28;
    --ink-soft: #4A5866;
    /* Accent : valeurs dans brand.css */
    --spot: var(--brand-spot);
    --spot-rgb: var(--brand-spot-rgb);
    --spot-hover: var(--brand-spot-hover);
    --spot-ink: var(--brand-spot-ink);
    --spot-text: var(--brand-spot-text);
    --spot-text-rgb: var(--brand-spot-text-rgb);

    --on-dark: #E9EEF2;
    --on-dark-muted: #A7B6C4;
    --line-dark: rgba(233, 238, 242, 0.16);
    --line-paper: rgba(14, 27, 40, 0.14);

    --font-display: "Big Shoulders Display", "Arial Narrow", sans-serif;
    --font-text: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;

    --wrap: 1200px;
    --gutter: clamp(16px, 4vw, 40px);
    --band-space: clamp(72px, 10vw, 136px);
    --nav-height: 68px;
    /* Logo officiel (rond) : proportions du fichier RSC_Logo_Round_White.svg et hauteur dans la barre */
    --logo-ratio: 865 / 800;
    --nav-logo-h: 50px;
    --radius: 4px;
    --radius-card: 8px;
}

/* ---------- Base ---------- */

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

html {
    /* Bootstrap 3 (formulaires publics) ramène la taille de base à 10 px : on la rétablit. */
    font-size: 100%;
    scroll-padding-top: var(--nav-height);
    -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

body {
    margin: 0;
    font-family: var(--font-text);
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--on-dark);
    background-color: var(--night);
    overflow-x: clip;
    -webkit-font-smoothing: antialiased;
}

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

h1,
h2,
h3,
h4,
p,
ul,
dl,
dd,
figure {
    margin: 0;
}

ul {
    padding: 0;
    list-style: none;
}

a {
    color: inherit;
    text-underline-offset: 0.2em;
    text-decoration-thickness: 1px;
}

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

.band--paper :focus-visible {
    outline-color: var(--steel);
}

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

.skip-link {
    position: absolute;
    left: var(--gutter);
    top: -100px;
    z-index: 200;
    padding: 0.6em 1em;
    background: var(--spot);
    color: var(--spot-ink);
    font-weight: 600;
    border-radius: var(--radius);
}

.skip-link:focus {
    top: 12px;
}

.wrap {
    width: 100%;
    max-width: calc(var(--wrap) + 2 * var(--gutter));
    margin-inline: auto;
    padding-inline: var(--gutter);
}

/* ---------- Bands (sections) ---------- */

.band {
    padding-block: var(--band-space);
}

.band--night {
    background-color: var(--night);
    color: var(--on-dark);
}

.band--stage {
    background-color: var(--stage);
    color: var(--on-dark);
}

.band--paper {
    background-color: var(--paper);
    color: var(--ink);
}

.display {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(2.75rem, 7vw, 5.5rem);
    line-height: 0.9;
    letter-spacing: 0.005em;
    text-transform: uppercase;
}

.lead {
    font-size: clamp(1.125rem, 1.6vw, 1.3rem);
    line-height: 1.55;
    max-width: 32em;
}

.section-head {
    display: grid;
    gap: 1rem;
    margin-bottom: clamp(40px, 6vw, 72px);
}

.section-head__lead {
    font-size: 1.125rem;
    max-width: 34em;
}

.band--paper .section-head__lead {
    color: var(--ink-soft);
}

.section-head--row {
    grid-template-columns: 1fr auto;
    align-items: end;
}

/* ---------- Buttons ---------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55em;
    padding: 0.8em 1.25em;
    border: 2px solid transparent;
    border-radius: var(--radius);
    font: 600 1rem/1.2 var(--font-text);
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.btn--lg {
    padding: 0.95em 1.5em;
    font-size: 1.0625rem;
}

.btn--block {
    display: flex;
    width: 100%;
}

.btn--spot {
    background-color: var(--spot);
    color: var(--spot-ink);
}

.btn--spot:hover {
    background-color: var(--spot-hover);
}

.btn--ghost {
    border-color: rgba(233, 238, 242, 0.55);
    background-color: transparent;
    color: var(--on-dark);
}

.btn--ghost:hover {
    border-color: var(--on-dark);
    background-color: rgba(233, 238, 242, 0.08);
}

.btn--ink {
    background-color: var(--ink);
    color: var(--white);
}

.btn--ink:hover {
    background-color: var(--steel);
}

/* ---------- Navigation ---------- */

.site-nav {
    position: fixed;
    inset: 0 0 auto;
    z-index: 100;
    height: var(--nav-height);
    transition: background-color 0.25s ease, border-color 0.25s ease;
    border-bottom: 1px solid transparent;
}

.site-nav::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-color: rgba(10, 21, 32, 0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    opacity: 0;
    transition: opacity 0.25s ease;
}

.site-nav.is-solid {
    border-bottom-color: var(--line-dark);
}

.site-nav.is-solid::before {
    opacity: 1;
}

.site-nav__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
}

.site-nav__brand {
    position: relative;
    z-index: 2;
    display: block;
    width: calc(var(--nav-logo-h) * 865 / 800);
    height: var(--nav-logo-h);
}

.site-nav__brand img {
    display: block;
    height: var(--nav-logo-h);
    width: auto;
}

/* Emplacement du grand logo dans l'accueil : le logo de la barre s'y place
   au chargement, puis rejoint la barre en rétrécissant (voir website.js). */
.hero__brand {
    display: none;
    width: clamp(130px, 16vw, 230px);
    aspect-ratio: var(--logo-ratio);
    margin-bottom: clamp(20px, 3.5vh, 40px);
}

.motion .hero__brand {
    display: block;
}

/* Le logo est dessiné à sa grande taille puis réduit : il reste net à toutes les étapes. */
.motion .site-nav.brand-morph .site-nav__brand img {
    position: absolute;
    left: 0;
    top: 0;
    height: var(--brand-big-h, var(--nav-logo-h));
    max-width: none;
    transform-origin: 0 0;
}

.site-nav__menu {
    display: flex;
    align-items: center;
    gap: clamp(16px, 2vw, 32px);
}

.site-nav__menu ul {
    display: flex;
    gap: clamp(14px, 1.8vw, 28px);
}

.site-nav__menu ul a {
    position: relative;
    padding-block: 0.4em;
    font-weight: 600;
    font-size: 0.9375rem;
    text-decoration: none;
    color: var(--on-dark);
}

.site-nav__menu ul a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background-color: var(--spot);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.2s ease;
}

.site-nav__menu ul a:hover::after,
.site-nav__menu ul a[aria-current]::after {
    transform: scaleX(1);
}

.site-nav__cta {
    padding: 0.55em 1.05em;
    font-size: 0.9375rem;
}

.site-nav__toggle {
    display: none;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--on-dark);
    cursor: pointer;
}

.site-nav__burger,
.site-nav__burger::before,
.site-nav__burger::after {
    display: block;
    width: 24px;
    height: 2px;
    margin-inline: auto;
    background-color: currentColor;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.site-nav__burger {
    position: relative;
}

.site-nav__burger::before,
.site-nav__burger::after {
    content: "";
    position: absolute;
    left: 0;
}

.site-nav__burger::before {
    top: -7px;
}

.site-nav__burger::after {
    top: 7px;
}

.site-nav__toggle[aria-expanded="true"] .site-nav__burger {
    background-color: transparent;
}

.site-nav__toggle[aria-expanded="true"] .site-nav__burger::before {
    transform: translateY(7px) rotate(45deg);
}

.site-nav__toggle[aria-expanded="true"] .site-nav__burger::after {
    transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 1079.98px) {
    .site-nav__toggle {
        display: block;
    }

    .site-nav__menu {
        position: fixed;
        inset: var(--nav-height) 0 0;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 32px;
        padding: 24px var(--gutter) 40px;
        background-color: var(--night-deep);
        overflow-y: auto;
        visibility: hidden;
        opacity: 0;
        transition: opacity 0.2s ease, visibility 0s linear 0.2s;
    }

    .site-nav.is-open {
        background-color: var(--night-deep);
    }

    .site-nav.is-open .site-nav__menu {
        visibility: visible;
        opacity: 1;
        transition: opacity 0.2s ease;
    }

    .site-nav__menu ul {
        flex-direction: column;
        gap: 0;
    }

    .site-nav__menu ul a {
        display: block;
        padding-block: 0.35em;
        border-bottom: 1px solid var(--line-dark);
        font-family: var(--font-display);
        font-size: 2.25rem;
        font-weight: 800;
        text-transform: uppercase;
        line-height: 1.1;
    }

    .site-nav__menu ul a::after {
        display: none;
    }

    .site-nav__cta {
        padding: 0.95em 1.5em;
        font-size: 1.0625rem;
    }
}

/* Planning et inscription : les deux accès rapides, côte à côte en haut à droite. */
.site-nav__actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.btn--ghost.site-nav__cta[aria-current] {
    border-color: var(--spot);
    color: var(--spot-text);
}

.btn--spot.site-nav__cta[aria-current] {
    box-shadow: 0 0 0 3px rgba(var(--spot-rgb), 0.3);
}

@media (max-width: 1079.98px) {
    .site-nav__actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
}

/* ---------- Hero ---------- */

.hero {
    position: relative;
    display: grid;
    grid-template-rows: 1fr auto;
    min-height: 100vh;
    min-height: 100svh;
    overflow: hidden;
    background-color: var(--night);
}

.hero__video,
.hero__shade {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.hero__video {
    object-fit: cover;
}

.hero__shade {
    background:
        linear-gradient(90deg, rgba(15, 30, 44, 0.88) 0%, rgba(15, 30, 44, 0.55) 55%, rgba(15, 30, 44, 0.25) 100%),
        linear-gradient(0deg, rgba(15, 30, 44, 1) 0%, rgba(15, 30, 44, 0) 40%);
}

.hero__pause {
    position: absolute;
    right: var(--gutter);
    top: calc(var(--nav-height) + 16px);
    z-index: 1;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(233, 238, 242, 0.55);
    border-radius: 50%;
    background-color: rgba(10, 21, 32, 0.5);
    color: var(--on-dark);
    cursor: pointer;
}

.hero__pause:hover {
    background-color: rgba(10, 21, 32, 0.8);
}

.hero__content {
    position: relative;
    align-self: end;
    padding-top: calc(var(--nav-height) + 32px);
    padding-bottom: clamp(32px, 5vh, 56px);
}

.hero__title {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: clamp(3.25rem, min(8.4vw, 10.5vh), 7.5rem);
    line-height: 0.96;
    text-transform: uppercase;
    letter-spacing: -0.005em;
}

.hero__line {
    display: block;
}

.hero__lead {
    max-width: 34em;
    margin-top: clamp(20px, 3vw, 32px);
    font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
    color: var(--on-dark);
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: clamp(24px, 3vw, 36px);
}

.ticker-band {
    overflow: hidden;
    padding-block: 28px;
    background-color: var(--night);
}

.ticker {
    position: relative;
    z-index: 2;
    width: 104%;
    margin-left: -2%;
    overflow: hidden;
    background-color: var(--spot);
    color: var(--spot-ink);
    transform: rotate(-1.2deg);
    box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.6);
}

.ticker__link {
    display: flex;
    padding-block: 12px;
    color: inherit;
    text-decoration: none;
}

.ticker__list {
    display: flex;
    flex-shrink: 0;
    white-space: nowrap;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.1rem, 1.8vw, 1.45rem);
    text-transform: uppercase;
    line-height: 1.2;
}

.ticker__item {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    padding-left: 1.2em;
}

.ticker__item::after {
    content: "★" / "";
    margin-left: 0.8em;
    font-size: 0.8em;
}

.ticker__item strong {
    font-weight: 900;
}

.ticker__link:focus-visible {
    outline: 3px solid var(--ink);
    outline-offset: -6px;
}

.hero__facts {
    position: relative;
    border-top: 1px solid var(--line-dark);
    background-color: rgba(10, 21, 32, 0.6);
}

.hero__facts-inner {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.fact {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    padding-block: 18px;
    padding-right: 16px;
}

.fact + .fact {
    padding-left: clamp(16px, 3vw, 32px);
    border-left: 1px solid var(--line-dark);
}

.fact__value {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(2rem, 3.5vw, 2.75rem);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--spot-text);
}

.fact__value[data-counter] {
    min-width: 2ch;
}

.fact__label {
    font-size: 0.9375rem;
    color: var(--on-dark-muted);
}

@media (prefers-reduced-motion: no-preference) {
    .hero__line,
    .hero__lead,
    .hero__actions {
        animation: rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both;
    }

    .hero__line:nth-child(1) { animation-delay: 0.1s; }
    .hero__line:nth-child(2) { animation-delay: 0.2s; }
    .hero__line:nth-child(3) { animation-delay: 0.3s; }
    .hero__lead { animation-delay: 0.45s; }
    .hero__actions { animation-delay: 0.55s; }
}

@keyframes rise {
    from {
        opacity: 0;
        transform: translateY(0.35em);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@media (max-width: 719.98px) {
    .hero__facts-inner {
        grid-template-columns: 1fr;
    }

    .fact {
        padding-block: 10px;
    }

    .fact + .fact {
        padding-left: 0;
        border-left: 0;
        border-top: 1px solid var(--line-dark);
    }

    .hero__actions .btn {
        flex: 1 1 100%;
    }
}

/* ---------- Offre ---------- */

.offer__intro {
    display: grid;
    grid-template-columns: 7fr 5fr;
    gap: clamp(32px, 6vw, 96px);
    align-items: center;
}

.offer__text {
    display: grid;
    gap: clamp(20px, 3vw, 32px);
}

.offer__photo img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: var(--radius-card);
}

.offer__photo--main img {
    aspect-ratio: 1;
}

/* Line-up : l'élément marquant de la page */
.lineup {
    margin-block: clamp(64px, 9vw, 120px);
    padding-block: clamp(28px, 4vw, 48px);
    border-block: 3px solid var(--on-dark);
    text-align: center;
}

.lineup__title {
    margin-bottom: clamp(16px, 2vw, 24px);
    font-size: 1rem;
    font-weight: 600;
    color: var(--on-dark-muted);
}

.lineup__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    column-gap: 0.9em;
    row-gap: 0.15em;
    max-width: 1100px;
    margin-inline: auto;
    font-family: var(--font-display);
    font-size: clamp(2rem, 4.6vw, 4rem);
    font-weight: 800;
    text-transform: uppercase;
    line-height: 1;
}

.lineup__item {
    position: relative;
    white-space: nowrap;
    max-width: 100%;
}

.nowrap {
    white-space: nowrap;
}

/* Petits téléphones : un nom plus large que l'écran (Initiation multi-instrument) passe à la ligne. */
@media (max-width: 479.98px) {
    .lineup__item {
        white-space: normal;
        text-wrap: balance;
    }
}

/* L'étoile est centrée dans l'espace entre deux disciplines, hors du flux :
   elle n'influence pas les retours à la ligne. */
.lineup__item:not(:first-child)::before {
    content: "★" / "";
    position: absolute;
    left: -1.29em;
    top: 50%;
    font-size: 0.35em;
    color: var(--spot-text);
    transform: translate(-50%, -50%);
}

/* Pas d'étoile en début de ligne : elles restent entre deux disciplines */
.lineup__item.is-line-start::before {
    display: none;
}

.lineup__note {
    margin-top: clamp(20px, 3vw, 32px);
    font-size: 0.9375rem;
    color: var(--on-dark-muted);
}

.lineup__note a,
.offer__who a {
    color: var(--spot-text);
}

.rhythm__title {
    margin-bottom: clamp(24px, 3vw, 36px);
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    text-transform: uppercase;
    line-height: 1;
}

.rhythm__scope {
    margin-bottom: clamp(16px, 2vw, 24px);
    font-weight: 600;
    font-size: 1.0625rem;
}

.rhythm__note {
    max-width: 44em;
    margin-top: clamp(24px, 3vw, 36px);
    padding: 16px 20px;
    border: 1px solid var(--line-dark);
    border-radius: var(--radius);
    color: var(--on-dark-muted);
}

.rhythm__note strong {
    color: inherit;
    font-weight: 600;
}

.rhythm__note a {
    color: var(--spot-text);
}

.rhythm__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(24px, 4vw, 48px);
}

.rhythm__item {
    padding-top: 20px;
    border-top: 1px solid var(--line-dark);
}

.rhythm__item dt {
    font-weight: 600;
    font-size: 1.0625rem;
}

.rhythm__value {
    display: block;
    margin-bottom: 0.35rem;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(3rem, 5vw, 4rem);
    line-height: 0.9;
    color: var(--spot-text);
}

.rhythm__item dd {
    margin-top: 0.6rem;
    color: var(--on-dark-muted);
}

.rhythm__aside {
    max-width: 44em;
    margin-top: clamp(28px, 4vw, 40px);
    padding-left: 18px;
    border-left: 3px solid var(--spot);
    font-size: 1.0625rem;
}

.offer__outro {
    display: grid;
    grid-template-columns: 1fr 1fr 1.2fr;
    gap: clamp(16px, 3vw, 32px);
    align-items: end;
    margin-top: clamp(64px, 9vw, 120px);
}

.offer__outro .offer__photo:nth-child(2) {
    transform: translateY(clamp(-48px, -4vw, -24px));
}

.offer__who {
    display: grid;
    gap: 1rem;
    align-self: center;
}

.offer__who h3 {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    text-transform: uppercase;
    line-height: 1;
}

@media (max-width: 899.98px) {
    .offer__intro,
    .rhythm__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .offer__outro {
        grid-template-columns: 1fr 1fr;
    }

    .offer__outro .offer__photo:nth-child(2) {
        transform: none;
    }

    .offer__who {
        grid-column: 1 / -1;
    }
}

/* ---------- Antennes et tarifs ---------- */

.sites__layout {
    display: grid;
    grid-template-columns: minmax(220px, 280px) 1fr;
    gap: clamp(32px, 5vw, 64px);
    align-items: start;
}

.tour {
    position: sticky;
    top: calc(var(--nav-height) + 24px);
    border-top: 3px solid var(--ink);
}

.tour__list {
    display: grid;
}

.tour__stop,
.tour__extra {
    display: grid;
    gap: 2px;
    width: 100%;
    padding: 14px 0 14px 16px;
    border: 0;
    border-bottom: 1px solid var(--line-paper);
    background: none;
    color: var(--ink);
    text-align: left;
    text-decoration: none;
    font: inherit;
    cursor: pointer;
    position: relative;
}

.tour__stop::before {
    content: "";
    position: absolute;
    left: 0;
    top: 12px;
    bottom: 12px;
    width: 4px;
    background-color: transparent;
    transition: background-color 0.15s ease;
}

.tour__city {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.85rem;
    line-height: 1;
    text-transform: uppercase;
    color: rgba(14, 27, 40, 0.68);
    transition: color 0.15s ease;
}

.tour__place {
    font-size: 0.875rem;
    color: var(--ink-soft);
}

.tour__stop:hover .tour__city,
.tour__extra:hover .tour__city {
    color: var(--ink);
}

.tour__stop[aria-selected="true"] .tour__city {
    color: var(--ink);
}

.tour__stop[aria-selected="true"]::before {
    background-color: var(--spot);
}

.tour__extra .tour__city {
    font-size: 1.35rem;
}

.tour__extra .tour__place i {
    font-size: 0.75em;
}

.site-panel {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    grid-template-areas:
        "head head"
        "pricing crew";
    gap: clamp(28px, 4vw, 48px) clamp(24px, 4vw, 48px);
}

.site-panel[hidden] {
    display: none;
}

.site-panel:focus-visible {
    outline-offset: 8px;
}

.site-panel__head {
    grid-area: head;
    display: grid;
    gap: 0.5rem;
}

.site-panel__name {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: clamp(2.75rem, 6vw, 4.5rem);
    line-height: 0.9;
    text-transform: uppercase;
}

.site-panel__address {
    color: var(--ink-soft);
}

.site-panel__address i {
    color: var(--steel);
    margin-right: 0.25em;
}

.pricing {
    grid-area: pricing;
    display: grid;
    gap: 18px;
    align-content: start;
    padding: clamp(20px, 3vw, 28px);
    background-color: var(--white);
    border-radius: var(--radius-card);
    box-shadow: 0 1px 0 var(--line-paper), 0 12px 32px -18px rgba(14, 27, 40, 0.35);
}

.pricing__table {
    width: 100%;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
}

.pricing__table thead th {
    padding: 0 0 10px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ink-soft);
    text-align: left;
    border-bottom: 2px solid var(--ink);
}

.pricing__table tbody th,
.pricing__table td {
    padding: 11px 0;
    border-bottom: 1px solid var(--line-paper);
    vertical-align: top;
}

.pricing__table tbody th {
    font-weight: 600;
    text-align: left;
    padding-right: 12px;
}

.pricing__table .num {
    text-align: right;
    white-space: nowrap;
    padding-left: 12px;
}

.pricing__table thead .num {
    white-space: normal;
}

.pricing__table td.num {
    font-weight: 600;
}

.pricing__table td.pricing__alt {
    font-weight: 400;
    color: var(--ink-soft);
}

.pricing__none {
    color: var(--ink-soft);
}

.pricing__legend {
    display: grid;
    gap: 10px;
    font-size: 0.875rem;
    color: var(--ink-soft);
}

.pricing__legend dt {
    font-weight: 600;
    color: var(--ink);
}

.pricing__warning {
    font-size: 0.875rem;
    color: var(--ink-soft);
}

.pricing__warning i {
    color: var(--steel);
}

.crew {
    grid-area: crew;
    align-self: start;
}

.crew__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 16px;
    margin-bottom: 12px;
}

.crew__title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.75rem;
    line-height: 1;
    text-transform: uppercase;
}

.crew__count {
    color: var(--ink-soft);
    font-weight: 600;
}

.crew__filter select {
    appearance: none;
    padding: 0.55em 2.2em 0.55em 0.85em;
    border: 1px solid rgba(14, 27, 40, 0.35);
    border-radius: var(--radius);
    background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230E1B28' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 0.85em center;
    color: var(--ink);
    font: 600 0.9375rem var(--font-text);
    cursor: pointer;
}

.crew__list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    column-gap: 20px;
    border-top: 1px solid var(--line-paper);
}

.crew__member {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 12px;
    align-items: center;
    padding: 9px 0;
    border-bottom: 1px solid var(--line-paper);
}

.crew__member[hidden] {
    display: none;
}

.crew__member img {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    background-color: var(--line-paper);
}

.crew__info {
    display: grid;
    gap: 1px;
    min-width: 0;
}

.crew__name {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 8px;
    font-weight: 600;
    font-size: 0.9375rem;
    line-height: 1.3;
}

.crew__role {
    font-size: 0.8125rem;
    line-height: 1.35;
    color: var(--ink-soft);
}

.crew__badge {
    padding: 1px 6px;
    border-radius: var(--radius);
    background-color: var(--steel);
    color: var(--white);
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.5;
}

.crew__empty {
    padding-block: 16px;
    color: var(--ink-soft);
}

/* Tarifs : lignes plus serrées et carte qui reste visible à côté des profs */
.pricing__table tbody th,
.pricing__table td {
    padding-block: 8px;
}

@media (min-width: 1280px) {
    .pricing {
        position: sticky;
        top: calc(var(--nav-height) + 24px);
        align-self: start;
    }
}

@media (max-width: 1279.98px) {
    .site-panel {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "head"
            "pricing"
            "crew";
    }

}

@media (max-width: 899.98px) {
    .sites__layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .tour {
        position: static;
        margin-inline: calc(var(--gutter) * -1);
        padding-inline: var(--gutter);
        border-top: 0;
        display: flex;
        gap: 8px;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        scroll-padding-inline: var(--gutter);
        scrollbar-width: none;
        -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent);
        mask-image: linear-gradient(90deg, #000 85%, transparent);
    }

    .tour::-webkit-scrollbar {
        display: none;
    }

    .tour__list {
        display: flex;
        flex: none;
        gap: 8px;
        padding-right: 48px;
    }

    .tour__stop,
    .tour__extra {
        flex: 0 0 auto;
        width: auto;
        padding: 10px 16px;
        border: 1px solid var(--line-paper);
        border-radius: var(--radius);
        scroll-snap-align: start;
    }

    .tour__stop::before {
        display: none;
    }

    .tour__stop[aria-selected="true"] {
        background-color: var(--ink);
        border-color: var(--ink);
    }

    .tour__stop[aria-selected="true"] .tour__city {
        color: var(--white);
    }

    .tour__stop[aria-selected="true"] .tour__place {
        color: rgba(255, 255, 255, 0.7);
    }

    .tour__city,
    .tour__extra .tour__city {
        font-size: 1.4rem;
    }

    .tour__place {
        white-space: nowrap;
    }
}

/* ---------- Appli ---------- */

.app__layout {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: clamp(32px, 6vw, 96px);
    align-items: center;
}

.app__visual {
    position: relative;
    display: grid;
    place-items: center;
}

/* Halo de projecteur derrière le téléphone */
.app__visual::before {
    content: "";
    position: absolute;
    inset: 5% -10%;
    background: radial-gradient(closest-side, rgba(var(--spot-rgb), 0.22), rgba(var(--spot-rgb), 0.06) 55%, transparent);
    pointer-events: none;
}

.app__visual img {
    position: relative;
    width: 100%;
    max-width: 300px;
    height: auto;
    filter: drop-shadow(0 32px 36px rgba(0, 0, 0, 0.55));
}

.app__text {
    display: grid;
    gap: clamp(20px, 3vw, 28px);
    justify-items: start;
}

.app__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

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

    .app__visual {
        order: 2;
    }

    .app__visual img {
        max-width: 220px;
    }

    .app__actions .btn {
        flex: 1 1 100%;
    }
}

/* ---------- Média ---------- */

.media__player {
    aspect-ratio: 16 / 9;
    background-color: #000;
    border-radius: var(--radius-card);
    overflow: hidden;
}

.media__player iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

.media__thumbs {
    display: flex;
    gap: 16px;
    margin-top: 20px;
    padding-bottom: 12px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-color: var(--steel) transparent;
}

.media__thumbs:empty {
    display: none;
}

.media__thumb {
    flex: 0 0 220px;
    scroll-snap-align: start;
}

.media__thumb button {
    display: grid;
    gap: 8px;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    color: var(--on-dark-muted);
    font: inherit;
    font-size: 0.875rem;
    line-height: 1.35;
    text-align: left;
    cursor: pointer;
}

.media__thumb img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--radius);
    outline: 2px solid transparent;
    outline-offset: 2px;
    transition: outline-color 0.15s ease;
}

.media__thumb span {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.media__thumb button:hover,
.media__thumb button[aria-pressed="true"] {
    color: var(--on-dark);
}

.media__thumb button[aria-pressed="true"] img {
    outline-color: var(--spot);
}

/* ---------- Événements ---------- */

/* Suit « Prochains événements » sur le même fond : l'espace du dessus est déjà donné par les événements. */
.media {
    padding-top: 0;
}

/* Sans réponse de l'API YouTube, seul le lien vers la chaîne reste affiché. */
.media__player[hidden],
.media__thumbs[hidden] {
    display: none;
}

.gig__cover {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--radius-card);
    background-color: var(--stage);
}

.gig__poster {
    position: relative;
}

/* Date façon page de calendrier : taille fixe pour que les lignes de l'agenda restent alignées. */
.gig__tile {
    display: grid;
    justify-items: center;
    align-content: center;
    width: 4.75rem;
    padding: 9px 0 10px;
    border: 1px solid var(--line-dark);
    border-radius: var(--radius-card);
    background-color: var(--stage);
    font-family: var(--font-display);
    line-height: 1;
    text-transform: uppercase;
}

.gig__tile-day,
.gig__tile-month {
    font-weight: 700;
    font-size: 0.9375rem;
    letter-spacing: 0.08em;
    color: var(--on-dark-muted);
}

.gig__tile-num {
    margin-block: 3px 2px;
    font-weight: 900;
    font-size: 2.5rem;
    line-height: 0.9;
    color: var(--spot-text);
}

/* Sur l'affiche : étiquette jaune posée dans le coin, comme sur un poster de concert. */
.gig__tile--poster {
    position: absolute;
    top: clamp(12px, 2vw, 20px);
    left: clamp(12px, 2vw, 20px);
    width: 5.5rem;
    padding: 10px 0 12px;
    border: 0;
    background-color: var(--spot);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
}

.gig__tile--poster .gig__tile-day,
.gig__tile--poster .gig__tile-month,
.gig__tile--poster .gig__tile-num {
    color: var(--spot-ink);
}

.gig__tile--poster .gig__tile-num {
    font-size: 3.25rem;
}

.gig__when {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    font-weight: 600;
    font-size: 1.0625rem;
    color: var(--spot-text);
}

.gig__countdown {
    padding: 3px 10px;
    border: 1px solid var(--spot);
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.gig__details {
    display: grid;
    gap: 12px;
    justify-items: start;
}

.gig__title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(1.75rem, 3vw, 2.75rem);
    line-height: 0.95;
    text-transform: uppercase;
}

.gig__title a {
    text-decoration: none;
}

.gig__title a:hover {
    text-decoration: underline;
    text-decoration-color: var(--spot);
}

.gig__genres {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.gig__genres li {
    padding: 2px 10px;
    border: 1px solid var(--line-dark);
    border-radius: var(--radius);
    font-size: 0.8125rem;
    color: var(--on-dark-muted);
}

.gig__description {
    max-width: 36em;
    color: var(--on-dark-muted);
}

.gig__meta {
    display: grid;
    gap: 6px;
}

.gig__meta > div {
    display: grid;
    grid-template-columns: 1.4em 1fr;
    gap: 8px;
}

.gig__meta dt {
    color: var(--spot-text);
}

.gig--featured {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: clamp(24px, 4vw, 56px);
    align-items: center;
}

.gig-list {
    margin-top: clamp(48px, 6vw, 80px);
    border-top: 3px solid var(--on-dark);
}

.gig-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: clamp(16px, 3vw, 40px);
    align-items: center;
    padding-block: 18px;
    border-bottom: 1px solid var(--line-dark);
}

.gig-row .gig__title {
    font-size: clamp(1.5rem, 2.6vw, 2rem);
}

.gig-row__info {
    display: grid;
    gap: 4px;
}

.gig-row__action {
    justify-self: end;
}

.gig-row__price {
    font-size: 0.9375rem;
    color: var(--on-dark-muted);
    white-space: nowrap;
}

.gig-row__price i {
    color: var(--spot-text);
    margin-right: 0.3em;
}

@media (max-width: 599.98px) {
    .gig-row {
        grid-template-columns: auto 1fr;
        align-items: start;
    }

    .gig-row__action {
        grid-column: 2;
        justify-self: start;
    }
}

.gig__where,
.gig__price {
    font-size: 0.9375rem;
    color: var(--on-dark-muted);
}

.gig__price i {
    color: var(--spot-text);
    margin-right: 0.3em;
}

.events__empty {
    max-width: 40em;
    color: var(--on-dark-muted);
}

.events__empty a {
    color: var(--spot-text);
}

@media (max-width: 899.98px) {
    .gig--featured {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 599.98px) {
    .section-head--row {
        grid-template-columns: 1fr;
        justify-items: start;
    }
}

/* ---------- FAQ ---------- */

.faq__layout {
    display: grid;
    grid-template-columns: 1fr 1.7fr;
    gap: clamp(40px, 6vw, 96px);
    align-items: start;
}

.faq__side {
    position: sticky;
    top: calc(var(--nav-height) + 24px);
    display: grid;
    gap: 1.25rem;
}

.faq__side > p {
    color: var(--ink-soft);
}

.faq a {
    color: var(--steel);
}

.links {
    margin-top: 12px;
    border-top: 3px solid var(--ink);
}

.links__title {
    padding-block: 14px 6px;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--ink-soft);
}

.links a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding-block: 12px;
    border-bottom: 1px solid var(--line-paper);
    color: var(--ink);
    font-weight: 600;
    text-decoration: none;
}

.links a:hover {
    color: var(--steel);
}

.links a i {
    font-size: 0.75em;
    color: var(--ink-soft);
}

.faq__list {
    border-top: 3px solid var(--ink);
}

.qa {
    border-bottom: 1px solid var(--line-paper);
}

.qa summary {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
    padding-block: 20px;
    font-weight: 600;
    font-size: 1.125rem;
    line-height: 1.4;
    cursor: pointer;
    list-style: none;
}

.qa summary::-webkit-details-marker {
    display: none;
}

.qa summary::after {
    content: "+";
    flex: none;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.9rem;
    line-height: 0.7;
    color: var(--steel);
    transition: transform 0.2s ease;
}

.qa[open] summary::after {
    transform: rotate(45deg);
}

.qa summary:hover {
    color: var(--steel);
}

.qa__body {
    display: grid;
    gap: 0.8em;
    max-width: 44em;
    padding-bottom: 24px;
    color: var(--ink-soft);
}

.qa__places {
    display: grid;
    gap: 6px;
}

.qa__places strong {
    color: var(--ink);
}

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

    .faq__side {
        position: static;
    }
}

/* ---------- Contact ---------- */

.contact {
    padding-bottom: 0;
}

.contact .section-head__lead {
    color: var(--on-dark-muted);
}

.contact .section-head__lead strong {
    color: var(--on-dark);
}

.contact__grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr;
    gap: clamp(32px, 5vw, 64px);
}

.contact__main {
    display: grid;
    gap: 1.25rem;
    align-content: start;
}

.contact__mail {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(1.6rem, 2.8vw, 2.25rem);
    line-height: 1.05;
    color: var(--spot-text);
    text-decoration-thickness: 2px;
    overflow-wrap: anywhere;
}

.contact__address {
    font-style: normal;
}

.contact__address i {
    color: var(--spot-text);
    margin-right: 0.35em;
}

.contact__oa {
    padding-top: 1.25rem;
    border-top: 1px solid var(--line-dark);
    color: var(--on-dark-muted);
}

.contact__oa a {
    color: var(--on-dark);
    font-weight: 600;
}

.person {
    display: grid;
    gap: 0.75rem;
    align-content: start;
    padding-top: 20px;
    border-top: 3px solid var(--on-dark);
}

.person__name {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 2.25rem;
    line-height: 1;
    text-transform: uppercase;
}

.person__role {
    font-size: 0.9375rem;
    color: var(--on-dark-muted);
}

.person__phone {
    font-weight: 600;
    display: inline-block;
    padding-block: 6px;
    font-size: 1.25rem;
    color: var(--spot-text);
    text-decoration: none;
    font-variant-numeric: tabular-nums;
}

.person__phone:hover {
    text-decoration: underline;
}

.hours {
    display: grid;
    font-size: 0.9375rem;
    font-variant-numeric: tabular-nums;
}

.hours > div {
    display: flex;
    justify-content: space-between;
    padding-block: 6px;
    border-bottom: 1px solid var(--line-dark);
}

.hours dt {
    color: var(--on-dark-muted);
}

.contact__note {
    margin-top: clamp(32px, 4vw, 48px);
    font-size: 0.9375rem;
    color: var(--on-dark-muted);
}

.contact__note i {
    color: var(--spot-text);
}

.contact__note a {
    color: var(--on-dark);
}

.contact__map {
    margin-top: clamp(56px, 7vw, 96px);
}

.contact__map iframe {
    width: 100%;
    height: 420px;
    border: 0;
    filter: grayscale(0.4);
}

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

    .contact__main {
        grid-column: 1 / -1;
    }
}

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

    .contact__map iframe {
        height: 320px;
    }
}

/* ---------- Footer ---------- */

.site-footer {
    border-top: 3px solid var(--on-dark);
    background-color: var(--night-deep);
    color: var(--on-dark);
}

.site-footer__top {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: clamp(24px, 4vw, 56px);
    align-items: end;
    padding-block: clamp(40px, 6vw, 64px);
}

.site-footer__logo {
    height: 104px;
    width: auto;
    align-self: center;
}

.newsletter {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    max-width: 480px;
    justify-self: center;
    width: 100%;
}

.newsletter label {
    font-weight: 600;
    font-size: 0.9375rem;
}

.newsletter__field {
    display: flex;
    gap: 8px;
}

.newsletter input {
    flex: 1;
    min-width: 0;
    padding: 0.75em 1em;
    border: 1px solid rgba(233, 238, 242, 0.55);
    border-radius: var(--radius);
    background-color: rgba(233, 238, 242, 0.08);
    color: var(--on-dark);
    font: inherit;
}

.newsletter input::placeholder {
    color: var(--on-dark-muted);
}

.socials {
    display: flex;
    gap: 8px;
    align-self: center;
}

.socials a {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--line-dark);
    border-radius: 50%;
    color: var(--on-dark);
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.socials a:hover {
    background-color: var(--spot);
    border-color: var(--spot);
    color: var(--spot-ink);
}

.partners {
    padding-block: 32px;
    border-top: 1px solid var(--line-dark);
}

.partners__title {
    margin-bottom: 16px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--on-dark-muted);
    text-align: center;
}

.partners__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 24px 48px;
    padding-inline: var(--gutter);
}

.partners__logo {
    width: auto;
    opacity: 0.8;
    transition: opacity 0.2s ease;
}

.partners__logo:hover {
    opacity: 1;
}

.partners__logo--tall { height: 58px; }
.partners__logo--mid { height: 46px; }
.partners__logo--wide { height: 34px; }
.partners__logo--xwide { height: 26px; }

.site-footer__legal {
    padding-block: 24px;
    font-size: 0.875rem;
    color: var(--on-dark-muted);
    text-align: center;
}

.site-footer__legal a {
    color: var(--on-dark);
}

@media (max-width: 899.98px) {
    .site-footer__top {
        grid-template-columns: minmax(0, 1fr);
        justify-items: start;
    }

    .newsletter {
        justify-self: stretch;
    }
}

/* ---------- Barre rapide (mobile) ---------- */

.quickbar {
    display: none;
}

@media (max-width: 1079.98px) {
    .quickbar {
        position: fixed;
        inset: auto 0 0;
        z-index: 90;
        display: flex;
        gap: 8px;
        padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
        background-color: rgba(10, 21, 32, 0.95);
        border-top: 1px solid var(--line-dark);
        transform: translateY(100%);
        visibility: hidden;
        transition: transform 0.25s ease, visibility 0s linear 0.25s;
    }

    .quickbar.is-visible {
        transform: none;
        visibility: visible;
        transition: transform 0.25s ease;
    }

    .quickbar .btn {
        flex: 1;
        padding-inline: 0.75em;
        font-size: 0.9375rem;
    }

    .site-footer {
        padding-bottom: 72px;
    }
}

/* ---------- Animations (ajoutées par JS, jamais si reduced-motion) ---------- */

/* Projecteur qui suit la souris sur la vidéo */
.hero__spot {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle 420px at var(--spot-x, 70%) var(--spot-y, 40%), rgba(var(--spot-text-rgb), 0.24), rgba(var(--spot-text-rgb), 0.07) 45%, transparent 70%);
    mix-blend-mode: screen;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.hero.has-spot .hero__spot {
    opacity: 1;
}

/* Titres : montent depuis la ligne de scène */
.motion .band .display,
.motion .site-panel__name {
    clip-path: inset(0 0 100% 0);
    transform: translateY(0.25em);
    transition: clip-path 0.8s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.motion .band .display.is-in,
.motion .site-panel__name.is-in {
    clip-path: inset(-0.2em -0.2em -0.3em -0.2em);
    transform: none;
}

/* Line-up : les noms s'allument un par un, puis les étoiles */
.motion .lineup__item {
    opacity: 0.12;
    transition: opacity 0.5s ease calc(var(--i, 0) * 90ms), text-shadow 0.8s ease calc(var(--i, 0) * 90ms);
}

.motion .lineup__item::before {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.2);
    transition: opacity 0.3s ease calc(1.1s + var(--i, 0) * 60ms), transform 0.5s cubic-bezier(0.3, 1.6, 0.5, 1) calc(1.1s + var(--i, 0) * 60ms);
}

.motion .lineup.is-in .lineup__item {
    opacity: 1;
}

.motion .lineup.is-in .lineup__item::before {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.motion .lineup.is-in .lineup__item {
    animation: stage-flash 1.2s ease calc(var(--i, 0) * 90ms) both;
}

@keyframes stage-flash {
    0% { text-shadow: none; }
    35% { text-shadow: 0 0 28px rgba(var(--spot-text-rgb), 0.55); }
    100% { text-shadow: none; }
}

/* Lignes de rythme et d'agenda : entrée décalée */
.motion .rhythm__item,
.motion .gig-row {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.6s ease calc(var(--i, 0) * 110ms), transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) calc(var(--i, 0) * 110ms);
}

.motion .rhythm__item.is-in,
.motion .gig-row.is-in {
    opacity: 1;
    transform: none;
}

/* Parallaxe léger des photos, lié au défilement (navigateurs compatibles) */
@supports (animation-timeline: view()) {
    .motion .offer__photo img {
        animation: drift linear both;
        animation-timeline: view();
        animation-range: entry 0% exit 100%;
    }

    @keyframes drift {
        from { transform: translateY(24px) scale(1.04); }
        to { transform: translateY(-24px) scale(1.04); }
    }

    .offer__photo {
        overflow: hidden;
        border-radius: var(--radius-card);
    }
}

/* Défilement continu (bandeau, logos) */
.motion [data-marquee].is-running {
    display: flex;
    overflow: hidden;
}

.motion .ticker.is-running .ticker__link {
    width: 100%;
    overflow: hidden;
}

.motion [data-marquee].is-running .ticker__list,
.motion [data-marquee].is-running .partners__list {
    flex-wrap: nowrap;
    flex-shrink: 0;
    animation: marquee var(--marquee-duration, 45s) linear infinite;
}

.motion .ticker.is-running {
    --marquee-duration: 38s;
}

.motion .partners__track.is-running {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.motion .partners__track.is-running .partners__list {
    padding-inline: 24px;
}

.motion [data-marquee].is-running:hover .ticker__list,
.motion [data-marquee].is-running:hover .partners__list,
.motion [data-marquee].is-running:focus-within .ticker__list {
    animation-play-state: paused;
}

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

/* Téléphone de l'appli : s'incline avec le défilement */
@supports (animation-timeline: view()) {
    .motion .app__visual img {
        animation: phone-tilt linear both;
        animation-timeline: view();
        animation-range: entry 10% exit 90%;
    }

    @keyframes phone-tilt {
        from { transform: translateY(48px) rotate(-6deg); }
        to { transform: translateY(-32px) rotate(3deg); }
    }
}

/* FAQ : ouverture en glissé (navigateurs compatibles) */
@supports selector(::details-content) {
    .motion {
        interpolate-size: allow-keywords;
    }

    .motion .qa::details-content {
        block-size: 0;
        overflow: hidden;
        transition: block-size 0.35s ease, content-visibility 0.35s allow-discrete;
    }

    .motion .qa[open]::details-content {
        block-size: auto;
    }
}

/* Reflet de lumière sur les boutons jaunes */
.btn--spot {
    position: relative;
    overflow: hidden;
}

.btn--spot::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.55) 50%, transparent 65%);
    transform: translateX(-120%);
    pointer-events: none;
}

.motion .btn--spot:hover::after {
    transform: translateX(120%);
    transition: transform 0.6s ease;
}

/* Repère de l'antenne sélectionnée qui « pousse » */
.motion .tour__stop::before {
    background-color: var(--spot);
    transform: scaleY(0);
    transition: transform 0.25s cubic-bezier(0.3, 1.4, 0.5, 1);
}

.motion .tour__stop[aria-selected="true"]::before {
    transform: scaleY(1);
}

/* Réponses aux actions */
.motion .site-panel:not([hidden]) {
    animation: panel-in 0.35s ease both;
}

@keyframes panel-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}

.gig-row {
    position: relative;
    transition: background-color 0.2s ease;
}

.gig-row::before {
    content: "";
    position: absolute;
    left: calc(var(--gutter) * -0.5);
    top: 12px;
    bottom: 12px;
    width: 3px;
    background-color: var(--spot);
    transform: scaleY(0);
    transition: transform 0.2s ease;
}

.gig-row:hover {
    background-color: rgba(233, 238, 242, 0.03);
}

.gig-row:hover::before {
    transform: scaleY(1);
}

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

/* ---------- Consentement aux cookies ---------- */

.consent {
    position: fixed;
    right: var(--gutter);
    bottom: var(--gutter);
    z-index: 200;
    display: grid;
    gap: 14px;
    width: min(34rem, calc(100% - 2 * var(--gutter)));
    max-height: calc(100vh - 2 * var(--gutter));
    overflow-y: auto;
    padding: 22px 24px;
    border: 1px solid var(--line-dark);
    border-top: 3px solid var(--spot);
    border-radius: var(--radius-card);
    background-color: var(--night-deep);
    color: var(--on-dark);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
}

.consent[hidden],
.consent__options[hidden],
.consent [hidden] {
    display: none;
}

.consent:focus {
    outline: none;
}

.consent__title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.75rem;
    line-height: 1;
    text-transform: uppercase;
}

.consent__text,
.consent__necessary {
    font-size: 0.9375rem;
    color: var(--on-dark-muted);
}

.consent__options {
    display: grid;
    gap: 10px;
}

.consent__option {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px;
    align-items: start;
    padding: 12px 14px;
    border: 1px solid var(--line-dark);
    border-radius: var(--radius);
    font-size: 0.9375rem;
    color: var(--on-dark-muted);
    cursor: pointer;
}

.consent__option input {
    width: 1.15rem;
    height: 1.15rem;
    margin-top: 0.15em;
    accent-color: var(--spot);
}

.consent__option strong {
    display: block;
    color: var(--on-dark);
}

.consent__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

/* Accepter et refuser ont le même poids visuel : aucun choix n'est mis en avant. */
.consent__actions .btn {
    flex: 1 1 9rem;
}

.consent__link {
    padding: 0.4em 0.2em;
    border: 0;
    background: none;
    color: var(--on-dark);
    font: 600 0.9375rem var(--font-text);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

/* Vidéos YouTube et carte : remplacées par un bouton tant que les contenus externes ne sont pas acceptés. */
.external-gate {
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 16px;
    min-height: 220px;
    padding: 32px 24px;
    border: 1px dashed var(--line-dark);
    border-radius: var(--radius-card);
    background-color: var(--stage);
    color: var(--on-dark-muted);
    text-align: center;
}

.external-gate[hidden] {
    display: none;
}

.external-gate p {
    max-width: 32em;
}

.external-gate__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.contact__map iframe[hidden] {
    display: none;
}

.site-footer__cookies {
    padding: 0;
    border: 0;
    background: none;
    color: var(--on-dark);
    font: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

/* ---------- Pages de texte (vie privée) ---------- */

.legal {
    padding-top: calc(var(--nav-height) + var(--band-space) * 0.6);
}

.legal__wrap {
    max-width: 52rem;
}

.legal__head {
    margin-bottom: clamp(20px, 3vw, 32px);
}

.legal__updated {
    margin-top: 10px;
    font-size: 0.875rem;
    color: var(--on-dark-muted);
}

.legal__section {
    margin-top: clamp(40px, 5vw, 56px);
}

.legal__section h2 {
    margin-bottom: 14px;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(1.6rem, 3vw, 2.1rem);
    line-height: 1.05;
    text-transform: uppercase;
}

.legal__section p,
.legal__section li {
    color: var(--on-dark-muted);
}

.legal__section p + p,
.legal__section ul + p,
.legal__section p + ul,
.legal__table + p {
    margin-top: 12px;
}

.legal__section ul {
    display: grid;
    gap: 8px;
    padding-left: 1.2em;
    list-style: disc;
}

.legal__section strong {
    color: var(--on-dark);
}

.legal a:not(.btn) {
    color: var(--spot-text);
}

.legal__table {
    overflow-x: auto;
    border: 1px solid var(--line-dark);
    border-radius: var(--radius-card);
}

.legal__table table {
    width: 100%;
    min-width: 34rem;
    border-collapse: collapse;
    font-size: 0.9375rem;
}

.legal__table th,
.legal__table td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--line-dark);
    text-align: left;
    vertical-align: top;
}

.legal__table tr:last-child th,
.legal__table tr:last-child td {
    border-bottom: 0;
}

.legal__table thead th {
    background-color: var(--stage);
    font-size: 0.8125rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--on-dark);
}

.legal__table tbody th {
    color: var(--on-dark);
    font-weight: 600;
}

.legal__table td {
    color: var(--on-dark-muted);
}

.legal__back {
    margin-top: clamp(40px, 5vw, 56px);
}

/* Mobile : chaque ligne devient une fiche, plus besoin de défiler sur le côté. */
@media (max-width: 599.98px) {
    .legal__table {
        overflow: visible;
    }

    .legal__table table {
        min-width: 0;
    }

    .legal__table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
    }

    .legal__table tr,
    .legal__table th,
    .legal__table td {
        display: block;
    }

    .legal__table tr {
        padding: 14px;
        border-bottom: 1px solid var(--line-dark);
    }

    .legal__table tr:last-child {
        border-bottom: 0;
    }

    .legal__table th,
    .legal__table td {
        padding: 0;
        border: 0;
    }

    .legal__table tbody th {
        margin-bottom: 8px;
    }

    .legal__table td + td {
        margin-top: 8px;
    }

    .legal__table td::before {
        content: attr(data-label);
        display: block;
        font-size: 0.75rem;
        font-weight: 600;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--on-dark);
    }
}

/* ---------- Agenda (rockscool-event.be) ---------- */

.agenda {
    min-height: 70vh;
    padding-top: calc(var(--nav-height) + var(--band-space) * 0.6);
}

.agenda__head {
    margin-bottom: clamp(32px, 5vw, 56px);
}

.agenda__head .section-head__lead {
    margin-top: 12px;
    color: var(--on-dark-muted);
}

.agenda__list {
    display: grid;
    gap: clamp(40px, 5vw, 64px);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Affiche à gauche, informations à droite ; empilé sur mobile. */
.agenda-event {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: clamp(24px, 4vw, 48px);
    align-items: start;
}

.agenda-event__body {
    display: grid;
    gap: 12px;
    justify-items: start;
}

.agenda-event__body .gig__title {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
}

.agenda-event--passed .gig__cover {
    filter: grayscale(0.85) brightness(0.8);
}

.agenda-event--passed .gig__tile--poster {
    background-color: var(--steel);
}

.agenda-event--passed .gig__tile--poster .gig__tile-day,
.agenda-event--passed .gig__tile--poster .gig__tile-month,
.agenda-event--passed .gig__tile--poster .gig__tile-num {
    color: var(--white);
}

.gig__countdown--passed {
    border-color: var(--on-dark-muted);
    color: var(--on-dark-muted);
}

.agenda__empty {
    max-width: 40em;
    color: var(--on-dark-muted);
}

.agenda__empty a {
    color: var(--spot-text);
}

.agenda__newsletter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px 32px;
    margin-top: clamp(56px, 7vw, 88px);
    padding: clamp(20px, 3vw, 32px);
    border: 1px solid var(--line-dark);
    border-top: 3px solid var(--spot);
    border-radius: var(--radius-card);
    background-color: var(--stage);
}

.agenda__newsletter p {
    max-width: 36em;
    color: var(--on-dark-muted);
}

.agenda__newsletter strong {
    color: var(--on-dark);
}

@media (max-width: 799.98px) {
    .agenda-event {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Formulaire newsletter et confirmations */
.agenda--narrow .wrap {
    max-width: 44rem;
}

.agenda-card {
    padding: clamp(20px, 4vw, 36px);
    border: 1px solid var(--line-dark);
    border-radius: var(--radius-card);
    background-color: var(--stage);
}

.agenda-card .lead {
    color: var(--on-dark);
}

.agenda-form {
    display: grid;
    gap: 20px;
}

.agenda-form__field {
    display: grid;
    gap: 8px;
}

.agenda-form__field label {
    font-weight: 600;
}

.agenda-form__field input {
    width: 100%;
    padding: 0.75em 0.9em;
    border: 1px solid rgba(233, 238, 242, 0.35);
    border-radius: var(--radius);
    background-color: var(--night-deep);
    color: var(--on-dark);
    font: 1rem var(--font-text);
}

.agenda-form__field input:focus {
    border-color: var(--spot);
    outline: 2px solid var(--spot);
    outline-offset: 1px;
}

.agenda-form__field .help-block,
.agenda-form__field ul {
    color: #FF9B8A;
    font-size: 0.875rem;
}

.agenda-form__note {
    font-size: 0.875rem;
    color: var(--on-dark-muted);
}

.agenda-form__note a {
    color: var(--spot-text);
}

.agenda-form__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.agenda-card .lead + .agenda-form__actions {
    margin-top: 24px;
}

/* Messages flash (messages.html.twig) */
.agenda .alert {
    margin-bottom: 20px;
    padding: 12px 16px;
    border: 1px solid var(--line-dark);
    border-left: 3px solid var(--spot);
    border-radius: var(--radius);
    background-color: var(--night-deep);
    color: var(--on-dark);
}

.agenda .alert-danger {
    border-left-color: #FF6B57;
}

.agenda .alert i {
    margin-right: 0.4em;
}

/* Agenda : bandeau, vedette avec compte à rebours, filtres, frise par mois */
.agenda__ticker {
    margin-bottom: clamp(40px, 6vw, 72px);
}

.agenda-featured {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: clamp(24px, 4vw, 56px);
    align-items: center;
    padding: clamp(16px, 2.5vw, 28px);
    border-radius: calc(var(--radius-card) * 2);
    background:
        radial-gradient(120% 140% at 0% 0%, rgba(var(--spot-rgb), 0.16), transparent 55%),
        var(--stage);
    isolation: isolate;
}

/* Liseré lumineux qui tourne autour de la vedette */
.agenda-featured::before {
    content: "";
    position: absolute;
    inset: -1px;
    z-index: -1;
    padding: 1px;
    border-radius: inherit;
    background: conic-gradient(from var(--spin, 0deg), transparent 0 65%, var(--spot) 80%, transparent 95%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

.agenda-featured__poster .gig__cover {
    aspect-ratio: 16 / 10;
}

.agenda-featured__body {
    display: grid;
    gap: 14px;
    justify-items: start;
}

.agenda-featured__kicker {
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--spot-text);
}

.agenda-featured__title {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: clamp(2.25rem, 5vw, 4rem);
    line-height: 0.92;
    text-transform: uppercase;
}

.countdown {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 4.5rem));
    gap: 8px;
}

.countdown__cell {
    display: grid;
    justify-items: center;
    padding: 10px 4px 8px;
    border: 1px solid var(--line-dark);
    border-radius: var(--radius-card);
    background-color: var(--night-deep);
}

.countdown__num {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: clamp(1.9rem, 3.4vw, 2.6rem);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--spot-text);
}

.countdown__label {
    margin-top: 4px;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--on-dark-muted);
}

.agenda-event__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 4px;
}

.agenda-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: clamp(48px, 6vw, 80px);
}

.agenda-filters__chip {
    padding: 0.5em 1em;
    border: 1px solid rgba(233, 238, 242, 0.35);
    border-radius: 999px;
    background: transparent;
    color: var(--on-dark);
    font: 600 0.875rem var(--font-text);
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.agenda-filters__chip:hover {
    border-color: var(--on-dark);
    transform: translateY(-1px);
}

.agenda-filters__chip[aria-pressed="true"] {
    border-color: var(--spot);
    background-color: var(--spot);
    color: var(--spot-ink);
}

.agenda__subtitle {
    margin-top: clamp(32px, 4vw, 48px);
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    text-transform: uppercase;
}

.agenda-month {
    display: grid;
    grid-template-columns: 10rem minmax(0, 1fr);
    gap: clamp(24px, 3vw, 40px);
    margin-top: clamp(40px, 5vw, 64px);
    padding-top: clamp(24px, 3vw, 32px);
    border-top: 1px solid var(--line-dark);
}

.agenda-month[hidden] {
    display: none;
}

/* Le mois suit la lecture tant qu'on parcourt ses événements. */
.agenda-month__label {
    position: sticky;
    top: calc(var(--nav-height) + 24px);
    align-self: start;
    display: grid;
    font-family: var(--font-display);
    line-height: 0.95;
    text-transform: uppercase;
}

.agenda-month__name {
    font-weight: 900;
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    color: var(--spot-text);
}

.agenda-month__year {
    font-weight: 700;
    font-size: 1.125rem;
    color: var(--on-dark-muted);
}

.agenda-event[hidden] {
    display: none;
}

/* Affiche : zoom léger et étiquette qui bascule au survol */
.agenda-event__poster,
.agenda-featured__poster {
    overflow: hidden;
    border-radius: var(--radius-card);
}

.agenda-event__poster .gig__cover,
.agenda-featured__poster .gig__cover {
    transition: scale 0.9s cubic-bezier(0.22, 1, 0.36, 1), filter 0.4s ease;
    will-change: scale;
}

/* Le survol agit sur « transform », l'apparition sur translate / rotate / scale : les deux se composent
   sans s'interrompre. */
.agenda-event .gig__tile--poster,
.agenda-featured .gig__tile--poster {
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s ease;
}

@media (hover: hover) and (pointer: fine) {
    .agenda-event:hover .gig__cover,
    .agenda-featured:hover .gig__cover {
        scale: 1.04;
    }

    .agenda-event:hover .gig__tile--poster,
    .agenda-featured:hover .gig__tile--poster {
        transform: translateY(-3px) rotate(-4deg);
        box-shadow: 0 16px 34px rgba(0, 0, 0, 0.45);
    }
}

@media (max-width: 899.98px) {
    .agenda-featured {
        grid-template-columns: minmax(0, 1fr);
    }

    .agenda-month {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }

    .agenda-month__label {
        top: var(--nav-height);
        z-index: 2;
        display: flex;
        align-items: baseline;
        gap: 10px;
        margin-inline: calc(-1 * var(--gutter));
        padding: 10px var(--gutter);
        background-color: rgba(15, 30, 44, 0.94);
        backdrop-filter: blur(6px);
    }
}

@media (max-width: 419.98px) {
    .countdown {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* Animations (désactivées si l'utilisateur préfère réduire les mouvements : la classe .motion n'est pas posée) */
@property --spin {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}

.motion .agenda-featured::before {
    animation: agenda-spin 6s linear infinite;
}

@keyframes agenda-spin {
    to { --spin: 360deg; }
}

.motion .agenda-featured,
.motion .agenda-event {
    opacity: 0;
    transform: translateY(48px);
    transition: opacity 0.7s ease, transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.motion .agenda-featured.is-in,
.motion .agenda-event.is-in {
    opacity: 1;
    transform: none;
}

/* L'affiche se dévoile de gauche à droite à l'arrivée de la carte */
.motion .agenda-event .agenda-event__poster,
.motion .agenda-featured .agenda-featured__poster {
    clip-path: inset(0 100% 0 0 round var(--radius-card));
    transition: clip-path 0.9s cubic-bezier(0.7, 0, 0.2, 1) 0.1s;
}

.motion .agenda-event.is-in .agenda-event__poster,
.motion .agenda-featured.is-in .agenda-featured__poster {
    clip-path: inset(0 0 0 0 round var(--radius-card));
}

.motion .agenda-event .gig__tile--poster,
.motion .agenda-featured .gig__tile--poster {
    opacity: 0;
    translate: 0 -16px;
    rotate: -12deg;
    scale: 0.8;
}

.motion .agenda-event.is-in .gig__tile--poster,
.motion .agenda-featured.is-in .gig__tile--poster {
    animation: tile-drop 0.7s cubic-bezier(0.34, 1.3, 0.64, 1) 0.6s forwards;
}

@keyframes tile-drop {
    to {
        opacity: 1;
        translate: 0 0;
        rotate: 0deg;
        scale: 1;
    }
}

.motion .agenda-month__label {
    opacity: 0;
    transform: translateX(-24px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.motion .agenda-month__label.is-in {
    opacity: 1;
    transform: none;
}

.motion .agenda-event.is-filtered-in {
    animation: agenda-filter-in 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}

@keyframes agenda-filter-in {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.98);
    }
}

.motion .countdown__num.is-ticking {
    animation: countdown-tick 0.35s ease-out;
}

@keyframes countdown-tick {
    from {
        opacity: 0.2;
        transform: translateY(-35%);
    }
}

.consent a {
    color: var(--spot-text);
}

/* ---------- Planning des cours (/planning-viewer) ---------- */

.planner {
    min-height: 80vh;
    padding-top: calc(var(--nav-height) + var(--band-space) * 0.6);
}

.planner__head .section-head__lead {
    margin-top: 12px;
    color: var(--on-dark-muted);
}

.planner__kicker {
    margin-bottom: 8px;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--spot-text);
}

.planner-app {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 16px 20px;
    align-items: center;
    margin-top: clamp(28px, 4vw, 40px);
    padding: 18px 22px;
    border: 1px solid rgba(var(--spot-rgb), 0.45);
    border-radius: var(--radius-card);
    background: linear-gradient(100deg, rgba(var(--spot-rgb), 0.14), rgba(var(--spot-rgb), 0.03) 60%), var(--stage);
}

.planner-app__icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: var(--spot);
    color: var(--spot-ink);
    font-size: 1.35rem;
}

.planner-app p {
    color: var(--on-dark-muted);
}

.planner-app strong {
    color: var(--on-dark);
}

.planner-steps {
    display: grid;
    gap: 14px;
    margin: clamp(32px, 5vw, 48px) 0 0;
    padding: 0;
    list-style: none;
    scroll-margin-top: calc(var(--nav-height) + 16px);
}

.planner-step {
    padding: clamp(16px, 2.5vw, 24px);
    border: 1px solid var(--line-dark);
    border-radius: var(--radius-card);
    background-color: rgba(24, 48, 74, 0.45);
    transition: border-color 0.3s ease, background-color 0.3s ease;
}

.planner-step.is-current {
    border-color: var(--spot);
    background-color: var(--stage);
    box-shadow: 0 0 0 4px rgba(var(--spot-rgb), 0.08);
}

.planner-step__title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(1.35rem, 2.4vw, 1.75rem);
    text-transform: uppercase;
}

.planner-step__num {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 2px solid var(--on-dark-muted);
    border-radius: 50%;
    font-family: var(--font-text);
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--on-dark-muted);
}

.planner-step.is-current .planner-step__num {
    border-color: var(--spot);
    background-color: var(--spot);
    color: var(--spot-ink);
}

/* Étape faite : la pastille devient une coche */
.planner-step.is-done .planner-step__num {
    border-color: var(--spot);
    color: transparent;
    position: relative;
}

.planner-step.is-done .planner-step__num::after {
    content: "✓";
    position: absolute;
    color: var(--spot-text);
}

.planner-step__hint {
    margin-top: 12px;
    font-size: 0.875rem;
    color: var(--on-dark-muted);
}

.planner-choices {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.planner-choice {
    padding: 0.55em 1.05em;
    border: 1px solid rgba(233, 238, 242, 0.3);
    border-radius: 999px;
    color: var(--on-dark);
    font-weight: 600;
    font-size: 0.9375rem;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.planner-choice:hover {
    border-color: var(--on-dark);
    transform: translateY(-2px);
}

.planner-choice[aria-current] {
    border-color: var(--spot);
    background-color: var(--spot);
    color: var(--spot-ink);
}

.planner-result {
    margin-top: clamp(48px, 6vw, 80px);
}

.planner-result__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--line-dark);
}

.planner-result__title {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: clamp(2rem, 4.5vw, 3.25rem);
    line-height: 0.95;
    text-transform: uppercase;
}

.planner-result__sub {
    margin-top: 8px;
    font-weight: 600;
    color: var(--spot-text);
}

.planner-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.6fr);
    gap: 12px;
    margin-top: 28px;
}

.planner-stat {
    display: grid;
    align-content: start;
    gap: 6px;
    padding: 18px;
    border: 1px solid var(--line-dark);
    border-radius: var(--radius-card);
    background-color: var(--stage);
}

.planner-stat__num {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    line-height: 0.9;
    font-variant-numeric: tabular-nums;
    color: var(--spot-text);
}

.planner-stat__label {
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--on-dark-muted);
}

.planner-stat--next {
    justify-items: start;
    border-color: rgba(var(--spot-rgb), 0.45);
}

.planner-stat__date {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    line-height: 1;
    text-transform: uppercase;
}

.planner-progress {
    margin-top: 16px;
}

.planner-progress__bar {
    position: relative;
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background-color: var(--stage);
}

.planner-progress__bar::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--progress, 0%);
    border-radius: inherit;
    background: linear-gradient(90deg, var(--steel), var(--spot));
}

.planner-progress__label {
    margin-top: 8px;
    font-size: 0.8125rem;
    color: var(--on-dark-muted);
}

.planner-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin-top: 24px;
    font-size: 0.875rem;
    color: var(--on-dark-muted);
}

.planner-legend__item::before {
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 8px;
    border-radius: 50%;
    background-color: var(--dot);
}

.planner-legend__item--normal,
.planner-entry--normal { --dot: #7FB2E5; }
.planner-legend__item--ensemble,
.planner-entry--ensemble { --dot: var(--spot); }
.planner-legend__item--cfa,
.planner-entry--cfa { --dot: #FF7A59; }

.planner-month {
    display: grid;
    grid-template-columns: 9rem minmax(0, 1fr);
    gap: clamp(16px, 3vw, 32px);
    margin-top: clamp(28px, 4vw, 40px);
}

.planner-month__label {
    position: sticky;
    top: calc(var(--nav-height) + 20px);
    align-self: start;
    font-family: var(--font-display);
    font-weight: 900;
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    line-height: 1;
    text-transform: uppercase;
    color: var(--spot-text);
}

.planner-month__label span {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    color: var(--on-dark-muted);
}

/* Frise verticale : un trait relie les dates, chaque date porte une pastille de couleur. */
.planner-month__list {
    position: relative;
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0 0 0 22px;
    list-style: none;
}

.planner-month__list::before {
    content: "";
    position: absolute;
    top: 6px;
    bottom: 6px;
    left: 5px;
    width: 2px;
    border-radius: 2px;
    background-color: var(--line-dark);
}

.planner-entry {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
    padding: 12px 16px;
    border: 1px solid var(--line-dark);
    border-left: 3px solid var(--dot);
    border-radius: var(--radius-card);
    background-color: var(--stage);
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.3s ease, background-color 0.3s ease;
}

.planner-entry::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -22px;
    width: 12px;
    height: 12px;
    border: 2px solid var(--night);
    border-radius: 50%;
    background-color: var(--dot);
    transform: translateY(-50%);
}

@media (hover: hover) and (pointer: fine) {
    .planner-entry:hover {
        transform: translateX(4px);
        background-color: #1D3957;
    }
}

.planner-entry__date {
    display: grid;
    justify-items: center;
    width: 3.25rem;
    font-family: var(--font-display);
    line-height: 1;
    text-transform: uppercase;
}

.planner-entry__day {
    font-weight: 700;
    font-size: 0.8125rem;
    letter-spacing: 0.08em;
    color: var(--on-dark-muted);
}

.planner-entry__num {
    font-weight: 900;
    font-size: 1.9rem;
    color: var(--on-dark);
}

.planner-entry__label {
    font-weight: 600;
}

.planner-entry__label i {
    width: 1.3em;
    color: var(--dot);
}

.planner-entry__meta {
    margin-top: 2px;
    font-size: 0.875rem;
    color: var(--on-dark-muted);
}

.planner-entry__tag {
    margin-left: 8px;
    padding: 1px 8px;
    border: 1px solid var(--line-dark);
    border-radius: 999px;
    font-size: 0.75rem;
}

.planner-entry__done {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: rgba(233, 238, 242, 0.08);
    color: var(--on-dark-muted);
    font-size: 0.8125rem;
}

.planner-entry.is-passed {
    opacity: 0.5;
}

.planner-entry.is-next {
    border-color: var(--spot);
    border-left-color: var(--dot);
    box-shadow: 0 0 0 4px rgba(var(--spot-rgb), 0.1);
}

.planner-entry.is-next::before {
    box-shadow: 0 0 0 0 rgba(var(--spot-rgb), 0.6);
}

/* Repère « Aujourd'hui » entre les dates passées et les suivantes */
.planner-today {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 4px 0;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--spot-text);
}

.planner-today::before {
    content: "";
    position: absolute;
    left: -21px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--spot);
}

.planner-today::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--spot), transparent);
}

.planner-empty {
    margin-top: 24px;
    color: var(--on-dark-muted);
}

@media (max-width: 899.98px) {
    .planner-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .planner-stat--next {
        grid-column: 1 / -1;
    }

    .planner-month {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .planner-month__label {
        top: var(--nav-height);
        z-index: 2;
        display: flex;
        align-items: baseline;
        gap: 10px;
        margin-inline: calc(-1 * var(--gutter));
        padding: 10px var(--gutter);
        background-color: rgba(15, 30, 44, 0.94);
        backdrop-filter: blur(6px);
    }

    .planner-month__label span {
        display: inline;
    }
}

@media (max-width: 599.98px) {
    .planner-app {
        grid-template-columns: auto 1fr;
    }

    .planner-app .btn {
        grid-column: 1 / -1;
    }

    .planner-stat {
        padding: 14px 10px;
    }

    .planner-stat__label {
        font-size: 0.6875rem;
    }
}

/* Animations du planning (inactives si l'utilisateur réduit les mouvements) */
.motion .planner-step,
.motion .planner-app,
.motion .planner-stat {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: calc(var(--i, 0) * 80ms);
}

.motion .planner-step.is-in,
.motion .planner-app.is-in,
.motion .planner-stat.is-in {
    opacity: 1;
    transform: none;
}

.motion .planner-entry {
    opacity: 0;
    translate: -16px 0;
    transition: opacity 0.5s ease, translate 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.3s ease, background-color 0.3s ease;
    transition-delay: calc(var(--i, 0) * 50ms), calc(var(--i, 0) * 50ms), 0s, 0s, 0s;
}

.motion .planner-entry.is-in {
    opacity: 1;
    translate: 0 0;
}

.motion .planner-entry.is-passed.is-in {
    opacity: 0.5;
}

.motion .planner-progress__bar::after {
    width: 0;
    transition: width 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0.3s;
}

.motion .planner-progress.is-in .planner-progress__bar::after {
    width: var(--progress, 0%);
}

.motion .planner-entry.is-next::before {
    animation: planner-pulse 2s ease-out infinite;
}

@keyframes planner-pulse {
    to { box-shadow: 0 0 0 10px rgba(var(--spot-rgb), 0); }
}

/* Planning sans rechargement : retour visuel pendant le chargement d'une étape */
.planner-step,
.planner-result {
    scroll-margin-top: calc(var(--nav-height) + 16px);
}

.planner-choice.is-loading {
    position: relative;
    border-color: var(--spot);
    color: var(--spot-text);
    pointer-events: none;
}

.planner-choice.is-loading::after {
    content: "";
    display: inline-block;
    width: 0.8em;
    height: 0.8em;
    margin-left: 0.5em;
    vertical-align: -0.1em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: planner-spin 0.7s linear infinite;
}

@keyframes planner-spin {
    to { transform: rotate(360deg); }
}

.planner__dynamic {
    transition: opacity 0.25s ease;
}

.planner__dynamic.is-loading .planner-result {
    opacity: 0.45;
}

/* Fondu enchaîné entre deux étapes, là où le navigateur le permet */
::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 0.3s;
}

/* ---------- Concert de fin d'année (/cfa) ---------- */

.cfa {
    min-height: 80vh;
    padding-top: calc(var(--nav-height) + var(--band-space) * 0.6);
    background:
        radial-gradient(80% 60% at 85% 0%, rgba(var(--spot-rgb), 0.12), transparent 60%),
        var(--night);
}

.cfa__title {
    font-size: clamp(3.5rem, 11vw, 8rem);
}

.cfa__dates {
    margin-top: 6px;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(1.4rem, 3vw, 2.1rem);
    text-transform: uppercase;
    color: var(--spot-text);
}

.cfa__head .section-head__lead {
    margin-top: 14px;
    color: var(--on-dark-muted);
}

.cfa__countdown {
    margin-top: 24px;
}

.cfa-toolbar {
    position: sticky;
    top: var(--nav-height);
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: clamp(32px, 5vw, 48px) calc(-1 * var(--gutter)) 0;
    padding: 12px var(--gutter);
    background-color: rgba(15, 30, 44, 0.94);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--line-dark);
}

.cfa-days {
    display: flex;
    gap: 6px;
    padding: 4px;
    border: 1px solid var(--line-dark);
    border-radius: 999px;
}

.cfa-days__link {
    padding: 0.5em 1.1em;
    border-radius: 999px;
    color: var(--on-dark-muted);
    font-weight: 600;
    font-size: 0.9375rem;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.25s ease, color 0.25s ease;
}

.cfa-days__link span {
    color: var(--on-dark);
}

.cfa-days__link[aria-current] {
    background-color: var(--spot);
    color: var(--spot-ink);
}

.cfa-days__link[aria-current] span {
    color: inherit;
}

.cfa-search {
    position: relative;
    flex: 1 1 16rem;
    max-width: 24rem;
}

.cfa-search i {
    position: absolute;
    top: 50%;
    left: 14px;
    color: var(--on-dark-muted);
    transform: translateY(-50%);
}

.cfa-search input {
    width: 100%;
    padding: 0.65em 1em 0.65em 2.6em;
    border: 1px solid rgba(233, 238, 242, 0.3);
    border-radius: 999px;
    background-color: var(--night-deep);
    color: var(--on-dark);
    font: 0.9375rem var(--font-text);
}

.cfa-search input:focus {
    border-color: var(--spot);
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--spot-rgb), 0.2);
}

.cfa-day {
    margin-top: clamp(40px, 5vw, 64px);
    scroll-margin-top: calc(var(--nav-height) + 80px);
}

.cfa-day[hidden],
.cfa-hall[hidden],
.cfa-slot[hidden] {
    display: none;
}

.cfa-day__title {
    margin-bottom: 20px;
    font-family: var(--font-display);
    font-weight: 900;
    font-size: clamp(2.25rem, 5vw, 3.5rem);
    line-height: 0.95;
    text-transform: uppercase;
}

.cfa-day__title span {
    color: var(--spot-text);
}

.cfa-halls {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
    gap: 16px;
    align-items: start;
}

.cfa-hall {
    overflow: hidden;
    border: 1px solid var(--line-dark);
    border-radius: var(--radius-card);
    background-color: var(--stage);
}

.cfa-hall__name {
    padding: 14px 18px;
    border-bottom: 1px solid var(--line-dark);
    background: linear-gradient(90deg, rgba(var(--spot-rgb), 0.18), transparent);
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.4rem;
    text-transform: uppercase;
}

.cfa-hall__name i {
    margin-right: 6px;
    color: var(--spot-text);
    font-size: 1rem;
}

.cfa-hall__list {
    margin: 0;
    padding: 6px 0;
    list-style: none;
}

.cfa-slot {
    display: grid;
    grid-template-columns: 3.6rem minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 9px 18px;
    transition: background-color 0.25s ease;
}

.cfa-slot + .cfa-slot {
    border-top: 1px solid rgba(233, 238, 242, 0.06);
}

.cfa-slot__time {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.25rem;
    color: var(--spot-text);
    font-variant-numeric: tabular-nums;
}

.cfa-slot__body {
    display: grid;
}

.cfa-slot__site {
    font-weight: 600;
}

.cfa-slot__title {
    font-size: 0.875rem;
    color: var(--on-dark-muted);
}

.cfa-slot__info {
    padding: 2px 9px;
    border: 1px solid var(--line-dark);
    border-radius: 999px;
    font-size: 0.8125rem;
    color: var(--on-dark-muted);
    white-space: nowrap;
}

.cfa-slot__info i {
    color: var(--spot-text);
    font-size: 0.75rem;
}

@media (hover: hover) and (pointer: fine) {
    .cfa-slot:hover {
        background-color: rgba(233, 238, 242, 0.05);
    }
}

.cfa-slot.is-match {
    background-color: rgba(var(--spot-rgb), 0.1);
    box-shadow: inset 3px 0 0 var(--spot);
}

.cfa-soon {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 16px 24px;
    align-items: center;
    margin-top: clamp(32px, 5vw, 48px);
    padding: clamp(20px, 3vw, 32px);
    border: 1px dashed rgba(233, 238, 242, 0.3);
    border-radius: var(--radius-card);
}

.cfa-soon__icon {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: var(--stage);
    color: var(--spot-text);
    font-size: 1.5rem;
}

.cfa-soon p {
    color: var(--on-dark-muted);
}

.cfa-soon strong {
    color: var(--on-dark);
}

@media (max-width: 599.98px) {
    .cfa-soon {
        grid-template-columns: auto 1fr;
    }

    .cfa-soon .btn {
        grid-column: 1 / -1;
    }

    .cfa-days {
        width: 100%;
    }

    .cfa-days__link {
        flex: 1;
        text-align: center;
    }

    .cfa-search {
        max-width: none;
    }
}

/* Animations du concert */
.motion .cfa-hall,
.motion .cfa-day__title,
.motion .cfa-soon,
.motion .cfa__countdown {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.motion .cfa-hall.is-in,
.motion .cfa-day__title.is-in,
.motion .cfa-soon.is-in,
.motion .cfa__countdown.is-in {
    opacity: 1;
    transform: none;
}

.motion .cfa-hall .cfa-slot {
    opacity: 0;
    translate: -12px 0;
    transition: opacity 0.45s ease, translate 0.55s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.25s ease;
    transition-delay: calc(0.15s + var(--i, 0) * 45ms), calc(0.15s + var(--i, 0) * 45ms), 0s;
}

.motion .cfa-hall.is-in .cfa-slot {
    opacity: 1;
    translate: 0 0;
}

/* ---------- Formulaires publics (inscription…) : Bootstrap 3 habillé aux couleurs du site ---------- */

.reg {
    min-height: 80vh;
    padding-top: calc(var(--nav-height) + var(--band-space) * 0.5);
    font-family: var(--font-text);
    font-size: 1rem;
    line-height: 1.6;
}

.reg__wrap {
    max-width: 58rem;
}

.reg h1 {
    margin: 0 0 14px;
    font-family: var(--font-display);
    font-weight: 900;
    font-size: clamp(2.6rem, 6vw, 4.5rem);
    line-height: 0.95;
    text-transform: uppercase;
    color: var(--on-dark);
}

.reg h1.text-center {
    text-align: left;
}

.reg h2,
.reg h3,
.reg h4 {
    font-family: var(--font-display);
    font-weight: 800;
    line-height: 1.05;
    text-transform: uppercase;
    color: var(--on-dark);
}

.reg h2 { font-size: clamp(1.4rem, 2.6vw, 1.85rem); }
.reg h3 { font-size: 1.4rem; margin: 0; }
.reg h4 { font-size: 1.1rem; color: var(--spot-text); }

.reg h2 > i,
.reg h2 > .fa,
.reg h2 > .fas {
    margin-right: 8px;
    color: var(--spot-text);
    font-size: 0.8em;
}

.reg .lead,
.reg .registration-public-intro {
    max-width: 44em;
    margin-bottom: 24px;
    font-size: 1.0625rem;
    color: var(--on-dark-muted);
}

.reg .registration-public-intro p + p {
    margin-top: 10px;
}

.reg a:not(.btn) {
    color: var(--spot-text);
}

.reg .text-muted {
    color: var(--on-dark-muted);
}

.reg .text-warning {
    color: var(--spot-text);
}

.reg hr,
.reg .renew_footer {
    display: none;
}

/* Étapes : 1 Email · 2 Code · 3 Élève · 4 Inscription */
.registration-public-steps {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 28px;
    padding: 0;
    list-style: none;
    counter-reset: none;
}

.registration-public-steps li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px 6px 6px;
    border: 1px solid var(--line-dark);
    border-radius: 999px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--on-dark-muted);
}

.registration-public-step-index {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background-color: var(--stage);
    font-size: 0.8125rem;
}

.registration-public-steps li.is-active {
    border-color: var(--spot);
    color: var(--on-dark);
}

.registration-public-steps li.is-active .registration-public-step-index {
    background-color: var(--spot);
    color: var(--spot-ink);
}

.registration-public-steps li.is-complete .registration-public-step-index {
    color: transparent;
    position: relative;
}

.registration-public-steps li.is-complete .registration-public-step-index::after {
    content: "✓";
    position: absolute;
    color: var(--spot-text);
}

/* Cartes : blocs de formulaire et panneaux Bootstrap */
.reg .renew-form-part,
.reg .registration-public-form-card,
.reg .panel {
    margin-bottom: 18px;
    padding: clamp(18px, 3vw, 28px);
    border: 1px solid var(--line-dark);
    border-radius: var(--radius-card);
    background-color: var(--stage);
    box-shadow: none;
    color: var(--on-dark);
}

.reg .panel {
    padding: 0;
}

.reg .panel-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 22px;
    border-bottom: 1px solid var(--line-dark);
    border-radius: var(--radius-card) var(--radius-card) 0 0;
    background: linear-gradient(90deg, rgba(var(--spot-rgb), 0.14), transparent);
    color: var(--on-dark);
}

.reg .panel-heading-icon {
    color: var(--spot-text);
}

.reg .panel-heading-title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.35rem;
    text-transform: uppercase;
}

.reg .panel-body {
    padding: clamp(16px, 3vw, 24px);
}

.reg .registration-public-panel-separator {
    height: 1px;
    margin: 8px 0 16px;
    background-color: var(--line-dark);
}

/* Champs */
.reg label,
.reg .control-label {
    margin-bottom: 6px;
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--on-dark);
}

.reg .form-group {
    margin-bottom: 16px;
}

.reg .form-control {
    height: auto;
    padding: 0.7em 0.9em;
    border: 1px solid rgba(233, 238, 242, 0.3);
    border-radius: var(--radius);
    background-color: var(--night-deep);
    box-shadow: none;
    color: var(--on-dark);
    font-size: 1rem;
    text-align: left;
}

.reg .form-control::placeholder {
    color: rgba(167, 182, 196, 0.7);
}

.reg .form-control:focus {
    border-color: var(--spot);
    box-shadow: 0 0 0 3px rgba(var(--spot-rgb), 0.2);
}

.reg select.form-control {
    appearance: none;
    padding-right: 2.4em;
    background-image: linear-gradient(45deg, transparent 50%, var(--on-dark-muted) 50%), linear-gradient(135deg, var(--on-dark-muted) 50%, transparent 50%);
    background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}

.reg select.form-control option {
    background-color: var(--night-deep);
    color: var(--on-dark);
}

.reg input[type="date"].form-control {
    color-scheme: dark;
}

.reg .checkbox label,
.reg .radio label {
    font-weight: 400;
    color: var(--on-dark-muted);
}

.reg input[type="checkbox"],
.reg input[type="radio"] {
    accent-color: var(--spot);
}

.reg .help-block {
    font-size: 0.875rem;
    color: #FF9B8A;
}

.reg .has-error .form-control {
    border-color: #FF6B57;
}

.reg .has-error .control-label {
    color: #FF9B8A;
}

.reg .registration-public-field {
    margin-bottom: 14px;
}

/* Boutons Bootstrap → boutons du site */
.reg .btn {
    padding: 0.75em 1.3em;
    border: 2px solid transparent;
    border-radius: var(--radius);
    font: 600 1rem/1.2 var(--font-text);
    text-shadow: none;
    box-shadow: none;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.2s ease;
}

.reg .btn-primary,
.reg .btn-info,
.reg .btn-success {
    border-color: var(--spot);
    background-color: var(--spot);
    color: var(--spot-ink);
}

.reg .btn-primary:hover,
.reg .btn-primary:focus,
.reg .btn-info:hover,
.reg .btn-success:hover {
    border-color: var(--spot-hover);
    background-color: var(--spot-hover);
    color: var(--spot-ink);
}

.reg .btn-default {
    border-color: rgba(233, 238, 242, 0.55);
    background-color: transparent;
    color: var(--on-dark);
}

.reg .btn-default:hover,
.reg .btn-default:focus {
    border-color: var(--on-dark);
    background-color: rgba(233, 238, 242, 0.08);
    color: var(--on-dark);
}

.reg .btn-lg {
    padding: 0.95em 1.6em;
    font-size: 1.0625rem;
}

.reg .registration-public-actions {
    margin-top: 20px;
    text-align: left;
}

/* Bouton « choix de l'instrument » (ouvre la fenêtre de sélection) */
.reg .instrument-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    border: 1px dashed var(--spot);
    background-color: rgba(var(--spot-rgb), 0.08);
    color: var(--spot-text);
    text-align: left;
    white-space: normal;
}

.reg .instrument-btn::after {
    content: "\f078";
    font-family: "Font Awesome 5 Free", "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 0.8em;
}

/* Bloc cours : instrument, expérience, prix */
.reg .registration-public-course-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto;
    gap: 16px 20px;
    align-items: end;
}

.reg .registration-public-course-note {
    grid-column: 1 / -1;
    display: flex;
    gap: 8px;
    font-size: 0.8125rem;
    color: var(--on-dark-muted);
}

.reg .registration-public-course-note i {
    color: var(--spot-text);
}

.reg .renew_price {
    display: grid;
    margin: 0 0 16px;
    padding: 10px 16px;
    border: 1px solid rgba(var(--spot-rgb), 0.45);
    border-radius: var(--radius-card);
    text-align: center;
}

.reg .renew_price small {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--on-dark-muted);
}

.reg .registration-public-price-value {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 2rem;
    line-height: 1;
    color: var(--spot-text);
}

/* Fiches élèves (étape 3) */
.reg .row {
    margin-inline: -8px;
}

.reg .row > [class*="col-"] {
    padding-inline: 8px;
}

.reg .card-default .panel-body p {
    margin-bottom: 6px;
    color: var(--on-dark-muted);
}

.reg .card-default .panel-body .fa-check-circle,
.reg .card-default .panel-body .fa-hourglass {
    color: var(--spot-text);
}

/* Lien vers le formulaire en anglais */
.reg .registration-public-secondary {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px 20px;
    align-items: center;
    margin-top: 28px;
    padding: 18px 22px;
    border: 1px dashed rgba(233, 238, 242, 0.3);
    border-radius: var(--radius-card);
}

.reg .registration-public-secondary h2 {
    margin: 0 0 4px;
    font-size: 1.15rem;
}

.reg .registration-public-secondary p {
    margin: 0;
    font-size: 0.875rem;
    color: var(--on-dark-muted);
}

.reg .registration-public-flag {
    display: none;
}

/* Alertes */
.reg .alert {
    padding: 12px 16px;
    border: 1px solid var(--line-dark);
    border-left: 3px solid var(--spot);
    border-radius: var(--radius);
    background-color: var(--night-deep);
    color: var(--on-dark);
}

.reg .alert-danger { border-left-color: #FF6B57; }
.reg .alert-success { border-left-color: #5BD08B; }

.reg .alert i {
    margin-right: 6px;
}

/* Fenêtre « pour quel élève ? » (Bootstrap modal) */
.modal-backdrop.in {
    opacity: 0.75;
}

.reg .modal-content,
.modal-content.registration-student-modal {
    border: 1px solid var(--line-dark);
    border-radius: var(--radius-card);
    background-color: var(--stage);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
    color: var(--on-dark);
}

.reg .modal-header {
    border-bottom-color: var(--line-dark);
}

.reg .modal-title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.6rem;
    text-transform: uppercase;
}

.reg .modal-header .close {
    color: var(--on-dark);
    opacity: 0.7;
    text-shadow: none;
}

.reg .students-choice {
    display: grid;
    gap: 8px;
}

.reg .registration-student-choice {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 12px 14px;
    border: 1px solid var(--line-dark);
    border-radius: var(--radius-card);
    background-color: var(--night-deep);
    color: var(--on-dark);
    text-decoration: none;
    transition: border-color 0.2s ease, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.reg .registration-student-choice:hover {
    border-color: var(--spot);
    transform: translateX(3px);
}

.reg .registration-student-choice-icon {
    color: var(--spot-text);
}

.reg .registration-student-choice-text {
    display: grid;
}

.reg .registration-student-choice-text small {
    color: var(--on-dark-muted);
}

.reg .registration-student-choice-action {
    font-weight: 700;
    color: var(--spot-text);
}

.reg .registration-student-other {
    text-align: center;
}

@media (max-width: 767.98px) {
    .reg .registration-public-course-grid,
    .reg .registration-public-secondary {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Fenêtres SweetAlert (choix de l'instrument, avertissements) aux couleurs du site */
.swal2-popup {
    border: 1px solid var(--line-dark) !important;
    border-radius: var(--radius-card) !important;
    background: var(--stage) !important;
    color: var(--on-dark) !important;
    font-family: var(--font-text) !important;
}

.swal2-title {
    font-family: var(--font-display) !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    color: var(--on-dark) !important;
}

.swal2-html-container {
    color: var(--on-dark-muted) !important;
}

.swal2-styled.swal2-confirm {
    background-color: var(--spot) !important;
    color: var(--spot-ink) !important;
    font-weight: 600 !important;
}

.swal2-styled.swal2-cancel {
    border: 2px solid rgba(233, 238, 242, 0.55) !important;
    background-color: transparent !important;
    color: var(--on-dark) !important;
}

.swal2-popup .instrument-btn-modal,
.swal2-popup .btn {
    margin: 4px;
    padding: 0.55em 1.05em;
    border: 1px solid rgba(233, 238, 242, 0.3);
    border-radius: 999px;
    background-color: transparent;
    color: var(--on-dark);
    font: 600 0.9375rem var(--font-text);
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.swal2-popup .instrument-btn-modal:hover,
.swal2-popup .btn:hover {
    border-color: var(--spot);
    background-color: var(--spot);
    color: var(--spot-ink);
}

.swal2-popup .swal2-select,
.swal2-popup .swal2-input {
    border-color: rgba(233, 238, 242, 0.3);
    background-color: var(--night-deep);
    color: var(--on-dark);
}

/* Renouvellement : cours à reconduire, tableau des documents de paiement */
.reg .student-renew-registration-block .panel {
    padding: clamp(18px, 3vw, 26px);
}

.reg .student-renew-registration-block .panel > h3 {
    margin-bottom: 8px;
    color: var(--spot-text);
}

.reg .text-primary {
    color: var(--spot-text);
    font-weight: 600;
}

.reg .text-success {
    color: #5BD08B;
}

.reg .panel-darkblue {
    margin-top: 12px;
    padding: 16px 18px;
    border: 1px dashed var(--spot) !important;
    background-color: rgba(var(--spot-rgb), 0.06);
}

.reg .alert-info .row {
    margin-inline: -10px;
}

.reg .alert-heading {
    display: block;
    margin-bottom: 4px;
    color: var(--spot-text);
}

.reg .alert p {
    margin: 0 0 10px;
    font-size: 0.9375rem;
    color: var(--on-dark-muted);
}

.reg .table {
    margin: 8px 0 0;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    border: 1px solid var(--line-dark);
    border-radius: var(--radius-card);
    background-color: var(--stage);
}

.reg .table > thead > tr > td,
.reg .table > thead > tr > th {
    border-bottom: 1px solid var(--line-dark);
    background-color: rgba(233, 238, 242, 0.04);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--on-dark-muted);
}

.reg .table > tbody > tr > td {
    padding: 14px 12px;
    border-top: 1px solid var(--line-dark);
    vertical-align: middle;
    color: var(--on-dark);
}

.reg .btn-warning {
    border-color: var(--spot);
    background-color: transparent;
    color: var(--spot-text);
}

.reg .btn-warning:hover {
    background-color: var(--spot);
    color: var(--spot-ink);
}

@media (max-width: 767.98px) {
    .reg .table > thead {
        display: none;
    }

    .reg .table,
    .reg .table > tbody,
    .reg .table > tbody > tr,
    .reg .table > tbody > tr > td {
        display: block;
    }

    .reg .table > tbody > tr > td {
        border-top: 0;
        padding: 6px 16px;
    }

    .reg .table > tbody > tr {
        padding: 10px 0;
        border-top: 1px solid var(--line-dark);
    }
}

/* Touche Little Pop School : accents roses à la place du jaune, bandeau avec le logo */
.reg--lps {
    --spot: #FF6FB0;
    --spot-rgb: 255, 111, 176;
    --spot-hover: #FF8EC2;
    --spot-ink: #2A0016;
    --spot-text: #FF6FB0;
    --spot-text-rgb: 255, 111, 176;
    background:
        radial-gradient(70% 50% at 90% 0%, rgba(255, 111, 176, 0.14), transparent 60%),
        radial-gradient(60% 40% at 0% 100%, rgba(140, 82, 255, 0.12), transparent 60%),
        var(--night);
}

.reg-lps-banner {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 28px;
    padding: 16px 20px;
    border: 1px solid rgba(255, 111, 176, 0.45);
    border-radius: var(--radius-card);
    background: linear-gradient(100deg, rgba(255, 111, 176, 0.16), rgba(140, 82, 255, 0.1));
}

.reg-lps-banner img {
    flex-shrink: 0;
    width: auto;
}

.reg-lps-banner p {
    margin: 0;
    color: var(--on-dark-muted);
}

.reg-lps-banner strong {
    display: block;
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--spot-text);
}

.reg--lps .panel-darkblue {
    background-color: rgba(255, 111, 176, 0.06);
}

/* Réinscription : les étapes « 1. Vérifiez… », « 2. Votre réinscription » sont des intertitres, pas des titres de page. */
.reg h1 ~ h1 {
    margin-top: clamp(32px, 5vw, 48px);
    font-size: clamp(1.8rem, 3.6vw, 2.6rem);
    color: var(--spot-text);
}

.reg .lead.text-center,
.reg p.text-center {
    text-align: left;
}

/* Cartes de message (désinscriptions, liste d'attente, lien introuvable) */
.agenda-card > * + * {
    margin-top: 14px;
}

.agenda-card__title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.6rem;
    text-transform: uppercase;
}

.agenda-card .alert-success {
    border-left-color: #5BD08B;
}

.agenda-card .alert-success i {
    color: #5BD08B;
}

.agenda-card a:not(.btn) {
    color: var(--spot-text);
    word-break: break-word;
}

/* Ancien tarif → nouveau tarif */
.price-change {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 22px;
    padding: 16px 20px;
    border: 1px solid var(--line-dark);
    border-radius: var(--radius-card);
    background-color: var(--night-deep);
}

.price-change__item {
    display: grid;
    gap: 2px;
}

.price-change__label {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--on-dark-muted);
}

.price-change__value {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 2.2rem;
    line-height: 1;
    color: var(--spot-text);
}

.price-change__value--old {
    color: var(--on-dark-muted);
    text-decoration: line-through;
    text-decoration-thickness: 2px;
}

.price-change__arrow {
    color: var(--on-dark-muted);
}

/* ---------- Outil des bénévoles du club (/club-access) ---------- */

body.club {
    margin: 0;
    background-color: var(--night);
    color: var(--on-dark);
}

.club-bar {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: rgba(10, 21, 32, 0.96);
    border-bottom: 1px solid var(--line-dark);
    backdrop-filter: blur(8px);
}

.club-bar__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
    max-width: 72rem;
    margin: 0 auto;
    padding: 12px var(--gutter);
}

.club-bar__brand {
    display: flex;
    align-items: center;
    gap: 10px;
}

.club-bar__tag {
    padding: 2px 10px;
    border-radius: 999px;
    background-color: var(--spot);
    color: var(--spot-ink);
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 0.875rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.club-bar__user {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.875rem;
    color: var(--on-dark-muted);
}

.club-bar__user form {
    margin: 0;
}

.club-bar__who i {
    margin-right: 4px;
    color: var(--spot-text);
}

.club-bar__logout {
    padding: 0.45em 0.9em;
    font-size: 0.8125rem;
}

.reg.club-main {
    min-height: auto;
    padding: clamp(24px, 4vw, 40px) 0 56px;
}

.club-main__wrap {
    max-width: 72rem;
    margin: 0 auto;
    padding: 0 var(--gutter);
}

.club-head {
    margin-bottom: 20px;
}

.reg .club-head__title {
    margin: 4px 0 8px;
    font-size: clamp(2.2rem, 6vw, 3.5rem);
}

.club-head__lead {
    max-width: 40em;
    color: var(--on-dark-muted);
}

.club-flash:empty {
    display: none;
}

.club-card {
    padding: clamp(18px, 3vw, 26px);
    border: 1px solid var(--line-dark);
    border-radius: var(--radius-card);
    background-color: var(--stage);
}

.club-card--narrow {
    max-width: 30rem;
}

.reg .club-card__title {
    margin: 0 0 6px;
    font-size: 1.5rem;
}

.club-card__note {
    margin: 0 0 14px;
    font-size: 0.875rem;
    color: var(--on-dark-muted);
}

.club-help {
    margin: 16px 0 0;
    font-size: 0.875rem;
    color: var(--on-dark-muted);
}

.club-help i {
    margin-right: 4px;
    color: var(--spot-text);
}

.reg .club-code-input {
    font-family: "SFMono-Regular", Consolas, monospace;
    font-size: 1.6rem;
    letter-spacing: 0.3em;
    text-align: center;
}

.club-back {
    font-weight: 600;
    text-decoration: none;
}

.club-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 6px;
}

/* Recherche : grand champ, au doigt */
.club-search {
    margin-bottom: 16px;
}

.club-search form {
    position: relative;
    display: flex;
    gap: 10px;
}

.club-search__field {
    position: relative;
    flex: 1;
    min-width: 0;
}

.reg .table-responsive {
    margin: 0;
    border: 0;
}

.club-search__icon {
    position: absolute;
    z-index: 3;
    top: 50%;
    left: 16px;
    color: var(--on-dark-muted);
    transform: translateY(-50%);
    pointer-events: none;
}

.reg .club-search .form-control {
    width: 100%;
    padding: 0.85em 1em 0.85em 2.8em;
    border-radius: 999px;
    font-size: 1.0625rem;
}

.reg .club-search .btn {
    border-radius: 999px;
    white-space: nowrap;
}

.club-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.club-empty {
    padding: 18px;
    border: 1px dashed var(--line-dark);
    border-radius: var(--radius-card);
    text-align: center;
    color: var(--on-dark-muted);
}


/* Pastilles de statut : vert = peut entrer, rouge = adhésion expirée */
.club-pill {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.club-pill-auto {
    background-color: rgba(91, 208, 139, 0.16);
    color: #7BE0A5;
    box-shadow: inset 0 0 0 1px rgba(91, 208, 139, 0.5);
}

.club-pill-manual {
    background-color: rgba(var(--spot-rgb), 0.14);
    color: var(--spot-text);
    box-shadow: inset 0 0 0 1px rgba(var(--spot-rgb), 0.5);
}

.club-pill-expired {
    background-color: rgba(255, 107, 87, 0.14);
    color: #FF9B8A;
    box-shadow: inset 0 0 0 1px rgba(255, 107, 87, 0.5);
}


@media (max-width: 899.98px) {
    .club-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .club-search form {
        flex-wrap: wrap;
    }

    .club-search .btn {
        width: 100%;
    }

}

/* Résultats de l'outil du club : une fiche par personne, statut lisible d'un coup d'œil */
.club-count {
    margin: 0 0 10px;
    font-size: 0.8125rem;
    color: var(--on-dark-muted);
}

.club-results {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.club-result {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas:
        "who status actions"
        "detail status actions";
    gap: 4px 18px;
    align-items: center;
    padding: 12px 16px;
    border: 1px solid var(--line-dark);
    border-left: 4px solid var(--result-accent, var(--line-dark));
    border-radius: var(--radius-card);
    background-color: var(--night-deep);
}

.club-result--valid { --result-accent: #5BD08B; }
.club-result--expired { --result-accent: #FF6B57; }

.club-result__who {
    grid-area: who;
    display: grid;
    min-width: 0;
}

.club-result__name {
    font-weight: 700;
    font-size: 1.0625rem;
}

.club-result__email {
    overflow: hidden;
    font-size: 0.8125rem;
    color: var(--on-dark-muted);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.club-result__status {
    grid-area: status;
    display: grid;
    justify-items: end;
    gap: 4px;
    text-align: right;
}

.club-result__end {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--on-dark);
    white-space: nowrap;
}

.club-result__detail {
    grid-area: detail;
    min-width: 0;
    font-size: 0.8125rem;
    color: var(--on-dark-muted);
}

.club-result__actions {
    grid-area: actions;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.reg .club-result__actions .btn {
    padding: 0.4em 0.85em;
    font-size: 0.8125rem;
    white-space: nowrap;
}

.club-empty i {
    margin-right: 6px;
    color: var(--spot-text);
}

/* Colonne des résultats étroite (à côté du formulaire) ou téléphone : tout s'empile */
@media (max-width: 1179.98px) {
    .club-result {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "who status"
            "detail detail"
            "actions actions";
    }

    .club-result__actions {
        flex-direction: row;
        flex-wrap: wrap;
        margin-top: 6px;
    }
}

@media (max-width: 479.98px) {
    .club-result {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "who"
            "status"
            "detail"
            "actions";
    }

    .club-result__status {
        grid-auto-flow: column;
        justify-content: start;
        justify-items: start;
        align-items: center;
        gap: 10px;
        margin-top: 4px;
        text-align: left;
    }

    .reg .club-result__actions .btn {
        flex: 1;
    }
}

/* Tous les champs d'une ligne ont la même hauteur, quel que soit leur type (texte, date, liste). */
.reg input.form-control:not([type="checkbox"]):not([type="radio"]),
.reg select.form-control {
    height: 3rem;
    padding-block: 0;
    line-height: 3rem;
}

.reg input[type="date"].form-control {
    line-height: normal;
}

.reg input[type="date"].form-control::-webkit-calendar-picker-indicator {
    filter: invert(0.8);
    cursor: pointer;
}

/* Unité dans le champ (ex. « € ») */
.field-suffix {
    position: relative;
}

.reg .field-suffix .form-control {
    padding-right: 2.6em;
    text-align: right;
}

.field-suffix__unit {
    position: absolute;
    top: 50%;
    right: 1em;
    font-weight: 600;
    color: var(--on-dark-muted);
    transform: translateY(-50%);
    pointer-events: none;
}

.club-fields {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 0 12px;
}

@media (max-width: 379.98px) {
    .club-fields {
        grid-template-columns: minmax(0, 1fr);
    }
}