/* ==========================================================================
   BOURSE DU TRAVAIL - Modern Dark Theme
   ========================================================================== */

/* FONTS
-------------------------------------------------------------- */
@font-face {
    font-family: 'MissionScript';
    src: url('../fonts/mission-script-webfont.eot');
    src: url('../fonts/mission-script-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/mission-script-webfont.woff') format('woff'),
         url('../fonts/mission-script-webfont.ttf') format('truetype'),
         url('../fonts/mission-script-webfont.svg#mission_scriptregular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Montserrat - self-hosted (latin-ext) */
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('../fonts/montserrat-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Montserrat - self-hosted (latin) */
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('../fonts/montserrat-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* CSS VARIABLES
-------------------------------------------------------------- */
:root {
    /* Colors */
    --color-bg: #1a1a2e;
    --color-surface: #16213e;
    --color-panel: #0f3460;
    --color-primary: #e94560;
    --color-secondary: #f5a623;
    --color-tertiary: #6c5ce7;
    --color-accent: #00d2d3;
    --color-text: #e8e8e8;
    --color-text-muted: #a0a0b8;
    --color-border: rgba(255, 255, 255, 0.08);

    /* Gradients */
    --gradient-hero: linear-gradient(135deg, #e94560, #6c5ce7, #0f3460);
    --gradient-cta: linear-gradient(135deg, #e94560, #f5a623);
    --gradient-card: linear-gradient(180deg, rgba(22, 33, 62, 0) 0%, rgba(22, 33, 62, 0.95) 100%);

    /* Spacing */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;

    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
    --shadow-glow: 0 0 20px rgba(233, 69, 96, 0.3);

    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s ease;

    /* Border radius */
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-full: 9999px;

    /* Layout */
    --max-width: 1200px;
    --sidebar-width: 280px;
    --nav-height: 56px;
}

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

html {
    scroll-behavior: smooth;
    overflow-x: clip;
}

body {
    background: var(--color-bg);
    color: var(--color-text);
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 15px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: clip;
}

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

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

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

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

h1, h2, h3, h4 {
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
}

h1 {
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    padding: var(--space-lg) 0;
    margin-bottom: var(--space-lg);
    background: var(--gradient-hero);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

h2 {
    font-size: clamp(1.1rem, 2.5vw, 1.5rem);
    margin-bottom: var(--space-md);
    color: var(--color-text);
}

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

/* SITE SHELL
-------------------------------------------------------------- */
.site-shell {
    max-width: var(--max-width);
    margin: 0 auto;
    min-height: 100vh;
}

/* HEADER
-------------------------------------------------------------- */
.site-header {
    position: relative;
    overflow: hidden;
    background: var(--color-surface);
}

.site-header picture,
.site-header > img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 160px;
    object-fit: cover;
}

.site-header img {
    width: 100%;
    max-height: 160px;
    object-fit: cover;
}

.site-header .flags {
    position: absolute;
    right: var(--space-md);
    top: var(--space-md);
    display: flex;
    gap: var(--space-xs);
}

.site-header .flags a {
    width: 24px;
    height: 16px;
    border-radius: 2px;
    overflow: hidden;
}

.site-header .flags a.fr { background: url(/img/flags/fr.png) no-repeat center / cover; }
.site-header .flags a.en { background: url(/img/flags/en.png) no-repeat center / cover; }

/* NAVIGATION
-------------------------------------------------------------- */
.site-nav {
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: 0;
    z-index: 100;
    transition: box-shadow var(--transition-base);
}

.site-nav.is-sticky {
    box-shadow: var(--shadow-lg);
    background: rgba(22, 33, 62, 0.97);
    backdrop-filter: blur(12px);
}

.site-nav__inner {
    max-width: var(--max-width);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--space-md);
    height: var(--nav-height);
}

.site-nav__list {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.site-nav__list li a {
    display: block;
    padding: var(--space-sm) var(--space-md);
    color: var(--color-text-muted);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    border-radius: var(--radius-sm);
    transition: color var(--transition-fast), background var(--transition-fast);
    white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   Tableau des disponibilités de parking (open data), servi sur bourse et le dôme.
   Il sortait en rendu navigateur par défaut : illisible sur fond sombre.
   --------------------------------------------------------------------------- */
.parkings-live-wrap {
    overflow-x: auto;
    margin: var(--space-md) 0 var(--space-sm);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    -webkit-overflow-scrolling: touch;
}

.parkings-live {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
    color: var(--color-text);
}

.parkings-live thead th {
    text-align: left;
    padding: var(--space-sm) var(--space-md);
    background: var(--color-panel);
    color: var(--color-text);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    white-space: nowrap;
}

.parkings-live tbody td {
    padding: var(--space-sm) var(--space-md);
    border-top: 1px solid var(--color-border);
    vertical-align: top;
    line-height: 1.35;
}

/* Une ligne sur deux : l'écart doit rester discret sur un fond déjà sombre. */
.parkings-live tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.035);
}

.parkings-live tbody tr:hover {
    background: rgba(233, 69, 96, 0.08);
}

.parkings-live td small {
    color: var(--color-text-muted);
    font-size: 0.78rem;
}

/* Colonnes chiffrées : elles ne doivent jamais se couper en deux lignes. */
.parkings-live td.pk-num { white-space: nowrap; }

/* Repère de disponibilité : la question posée est « reste-t-il de la place ? ».
   Seuils sur le taux de places libres — vert au-delà de 20 %, orange entre 5 et 20 %,
   rouge en dessous. La couleur double une information déjà écrite en chiffres. */
.parkings-live .pk-libre { color: var(--color-accent); font-weight: 700; }
.parkings-live .pk-tendu { color: var(--color-secondary); font-weight: 700; }
.parkings-live .pk-plein { color: var(--color-primary); font-weight: 700; }

/* Téléphone : le tableau à 5 colonnes ne peut pas tenir dans 343 px sans devenir
   illisible. On resserre l'espacement, et la colonne « hauteur max » — utile aux seuls
   utilitaires — passe à la trappe sous 480 px. Le reste défile dans son cadre, la page
   elle-même ne défile jamais horizontalement. */
@media (max-width: 560px) {
    .parkings-live { font-size: 0.82rem; }
    .parkings-live thead th,
    .parkings-live tbody td { padding: var(--space-xs) var(--space-sm); }
    .parkings-live td small { font-size: 0.72rem; }
}

@media (max-width: 480px) {
    .parkings-live thead th:last-child,
    .parkings-live tbody td:last-child { display: none; }
    /* Les mentions secondaires de la 1re colonne (adresse, places PMR) empilaient
       quatre à cinq lignes par parking : on ne garde que le nom. */
    .parkings-live tbody td:first-child small,
    .parkings-live tbody td:first-child br { display: none; }
}

/* Dégradation du menu desktop entre le burger (768 px) et 1260 px : la liste dépassait
   de son conteneur et les derniers items se faisaient rogner. On resserre l'espacement
   horizontal, et on autorise le retour à la ligne comme filet de sécurité. */
@media (min-width: 769px) {
    .site-nav__list { flex-wrap: wrap; row-gap: var(--space-xs); }
}

@media (min-width: 769px) and (max-width: 1260px) {
    .site-nav__list li a {
        padding-left: var(--space-sm);
        padding-right: var(--space-sm);
    }
}

/* Sites au menu plus fourni (dôme : « Ce soir » + « Guides » ; bourse : « Guides ») :
   espacement resserré à toutes les largeurs desktop, sans quoi le dernier item passe
   seul à la ligne. */
@media (min-width: 769px) {
    .site-dome .site-nav__list li a,
    .site-bourse .site-nav__list li a {
        padding-left: var(--space-sm);
        padding-right: var(--space-sm);
    }
}

.site-nav__list li a:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.06);
}

.site-nav__list li.current a {
    color: var(--color-primary);
    background: rgba(233, 69, 96, 0.1);
}

.site-nav__search {
    display: none;
}

/* Hamburger */
.hamburger {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--space-sm);
    color: var(--color-text);
    z-index: 110;
}

.hamburger__lines {
    display: block;
    width: 24px;
    height: 18px;
    position: relative;
}

.hamburger__lines span {
    display: block;
    width: 100%;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    position: absolute;
    left: 0;
    transition: transform var(--transition-base), opacity var(--transition-fast);
}

.hamburger__lines span:nth-child(1) { top: 0; }
.hamburger__lines span:nth-child(2) { top: 8px; }
.hamburger__lines span:nth-child(3) { top: 16px; }

.hamburger[aria-expanded="true"] .hamburger__lines span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}
.hamburger[aria-expanded="true"] .hamburger__lines span:nth-child(2) {
    opacity: 0;
}
.hamburger[aria-expanded="true"] .hamburger__lines span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* MAIN LAYOUT (CSS Grid)
-------------------------------------------------------------- */
.site-main {
    max-width: var(--max-width);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr var(--sidebar-width);
    gap: var(--space-xl);
    padding: var(--space-xl) var(--space-md);
}

.site-content {
    min-width: 0;
}

.site-content p a {
    color: var(--color-accent);
    text-decoration: underline;
    text-decoration-color: rgba(0, 210, 211, 0.3);
    text-underline-offset: 3px;
}

.site-content p a:hover {
    text-decoration-color: var(--color-accent);
}

/* SIDEBAR
-------------------------------------------------------------- */
.sidebar {
    position: sticky;
    top: calc(var(--nav-height) + var(--space-xl));
    align-self: start;
}

.sidebar__title {
    color: #fff;
    background: var(--color-panel);
    padding: var(--space-md) var(--space-lg);
    text-transform: uppercase;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.sidebar__body {
    background: var(--color-surface);
    padding: var(--space-md) var(--space-lg);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    border: 1px solid var(--color-border);
    border-top: none;
}

.sidebar__body ul li {
    padding: var(--space-sm) 0;
    border-bottom: 1px solid var(--color-border);
}

.sidebar__body ul li:last-child {
    border-bottom: none;
}

.sidebar__body a {
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.85rem;
    color: var(--color-text);
}

.sidebar__body a:hover {
    color: var(--color-primary);
}

.sidebar__body .date {
    font-size: 0.75rem;
    color: var(--color-secondary);
    margin-top: var(--space-xs);
}

.sidebar__link {
    display: inline-block;
    margin-top: var(--space-md);
    color: var(--color-accent);
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
}

/* FOOTER
-------------------------------------------------------------- */
.site-footer {
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    padding: var(--space-2xl) var(--space-md);
    text-align: center;
    color: var(--color-text-muted);
    font-size: 0.85rem;
}

.site-footer a {
    color: var(--color-text-muted);
    transition: color var(--transition-fast);
}

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

/* Social links */
.social-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}

.social-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--color-border);
    background: var(--color-panel);
    color: var(--color-text-muted);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.social-links a:hover {
    text-decoration: none;
    transform: translateY(-3px);
    box-shadow: var(--shadow-glow);
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.social-links svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
}

.social-links a[aria-label="Facebook"] svg,
.social-links a[aria-label="YouTube"] svg {
    fill: currentColor;
    stroke: none;
}

/* EVENT GRID
-------------------------------------------------------------- */
.event-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-lg);
    margin-bottom: var(--space-2xl);
}

/* EVENT CARD
-------------------------------------------------------------- */
.event-card {
    background: var(--color-surface);
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--color-border);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
    display: flex;
    flex-direction: column;
}

.event-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}


.event-card__image {
	display: flex;
	align-items: stretch;
	justify-content: center;
	height: 250px;
	margin-bottom: 20px;
	overflow: hidden;
	border-radius: 8px;
}

.event-card__image a {
	display: block;
	width: 100%;
	height: 100%;
}

.event-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
    border-radius: 8px;
}

.event-card:hover .event-card__image img {
    transform: scale(1.05);
}

.event-card__body {
    padding: var(--space-md) var(--space-lg);
    display: flex;
    flex-direction: column;
    flex: 1;
}

.event-card__title {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: var(--space-sm);
    line-height: 1.3;
}

.event-card__title a {
    color: #fff;
    transition: color var(--transition-fast);
}

.event-card__title a:hover {
    color: var(--color-primary);
}

.event-card__date {
    font-size: 0.8rem;
    color: var(--color-secondary);
    font-weight: 600;
    margin-bottom: var(--space-sm);
}

.event-card__venue {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    margin-bottom: var(--space-md);
}

.event-card__cta {
    margin-top: auto;
    display: flex;
    justify-content: center;
}

/* Card entrance animation */
.event-card {
    opacity: 0;
    transform: translateY(20px);
}

.event-card.is-visible {
    opacity: 1;
    transform: translateY(0);
    transition: opacity var(--transition-slow), transform var(--transition-slow);
}

/* À LA UNE (gros concerts fraîchement promus — pipeline Discover)
-------------------------------------------------------------- */
.alaune {
    margin-bottom: var(--space-2xl);
}

.alaune__heading {
    display: inline-block;
    background: var(--gradient-cta);
    color: #fff;
    text-transform: uppercase;
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--radius-sm);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    margin-bottom: var(--space-md);
}

.alaune__grid {
    display: grid;
    gap: var(--space-lg);
    grid-template-columns: 1fr;
}

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

.alaune-card {
    background: var(--color-surface);
    border: 1px solid var(--color-secondary);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.alaune-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.alaune-card a {
    display: block;
    color: inherit;
}

.alaune-card__media {
    position: relative;
    overflow: hidden;
}

.alaune-card__media img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.alaune-card:hover .alaune-card__media img {
    transform: scale(1.03);
}

.alaune-card__badge {
    position: absolute;
    top: var(--space-sm);
    left: var(--space-sm);
    background: var(--gradient-cta);
    color: #fff;
    text-transform: uppercase;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 4px 10px;
    border-radius: var(--radius-sm);
}

.alaune-card__body {
    padding: var(--space-md) var(--space-lg);
}

.alaune-card__title {
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: var(--space-xs);
    color: #fff;
}

.alaune-card:hover .alaune-card__title {
    color: var(--color-primary);
}

.alaune-card__meta {
    font-size: 0.85rem;
    color: var(--color-secondary);
    font-weight: 600;
}

/* Variante compacte (encart des fiches événement) */
.alaune--compact {
    margin: var(--space-xl) 0;
}

.alaune--compact .alaune__heading {
    font-size: 0.85rem;
}

.alaune--compact .alaune-card a {
    display: flex;
    align-items: center;
}

.alaune--compact .alaune-card__media {
    flex: 0 0 200px;
}

.alaune--compact .alaune-card__body {
    flex: 1;
    padding: var(--space-sm) var(--space-md);
}

.alaune--compact .alaune-card__title {
    font-size: 0.95rem;
}

@media (max-width: 768px) {
    .alaune__grid--2,
    .alaune__grid--3 {
        grid-template-columns: 1fr;
    }

    .alaune--compact .alaune-card a {
        flex-direction: column;
        align-items: stretch;
    }

    .alaune--compact .alaune-card__media {
        flex: none;
    }
}

/* LIEN « VOIR TOUS LES SPECTACLES À L'AFFICHE »
-------------------------------------------------------------- */
.encours-plus {
    text-align: center;
    margin: 0 0 var(--space-lg);
}

.encours-plus a {
    display: inline-block;
    padding: var(--space-sm) var(--space-lg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: none;
}

/* MONTH HEADER
-------------------------------------------------------------- */
.month-header {
    background: var(--gradient-cta);
    color: #fff;
    text-transform: uppercase;
    padding: var(--space-sm) var(--space-lg);
    border-radius: var(--radius-sm);
    text-align: center;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    grid-column: 1 / -1;
    margin: var(--space-md) 0;
}

/* BUTTON
-------------------------------------------------------------- */
.btn {
    display: inline-block;
    padding: var(--space-sm) var(--space-lg);
    border-radius: var(--radius-sm);
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-decoration: none;
    cursor: pointer;
    border: none;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}

.btn:hover {
    transform: translateY(-2px);
    text-decoration: none;
}

.btn--primary {
    background: var(--gradient-cta);
    color: #fff;
}

.btn--primary:hover {
    box-shadow: var(--shadow-glow);
    color: #fff;
}

.btn--secondary {
    background: var(--color-panel);
    color: var(--color-text);
    border: 1px solid var(--color-border);
}

.btn--secondary:hover {
    background: var(--color-tertiary);
    border-color: var(--color-tertiary);
    color: #fff;
}

.btn--large {
    padding: var(--space-md) var(--space-xl);
    font-size: 0.9rem;
}

/* EVENT DETAIL
-------------------------------------------------------------- */
.event-detail {
    background: var(--color-surface);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    overflow: hidden;
    margin-bottom: var(--space-xl);
}

.event-detail__header {
    padding: var(--space-lg) var(--space-xl);
    background: var(--color-panel);
}

.event-detail__header h1 {
    background: none;
    -webkit-text-fill-color: #fff;
    margin: 0;
    padding: 0;
}

.event-detail__tickets {
    padding: var(--space-lg) var(--space-xl);
    border-bottom: 1px solid var(--color-border);
}

.event-detail__tickets h2 {
    text-transform: uppercase;
    font-size: 0.9rem;
    margin-bottom: var(--space-md);
    color: var(--color-text-muted);
}

.ticket-box {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xl);
}

.ticket-box .billetwrap {
    flex: 1;
    min-width: 200px;
}

.ticket-box .billeteries,
.billeteries {
    display: flex;
    gap: var(--space-md);
    align-items: center;
    flex-wrap: wrap;
}

.billeteries a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    padding: 8px 14px;
    border-radius: var(--radius-sm);
    height: 60px;
    width: 130px;
    box-sizing: border-box;
    transition: transform var(--transition-fast);
}

.billeteries a:hover {
    transform: scale(1.05);
}

.billeteries img {
    max-height: 100%;
    max-width: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 0;
}

.event-detail__content {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: var(--space-xl);
    padding: var(--space-xl);
}

.event-detail__image {
    border-radius: var(--radius-md);
    overflow: hidden;
}

.event-detail__image img {
    width: 100%;
    height: auto;
    display: block;
}

.event-detail__hero {
    margin: 0;
}

.event-detail__credit {
    margin-top: 6px;
    font-size: 11px;
    line-height: 1.4;
    color: var(--color-muted, #888);
}

.event-detail__credit a {
    color: inherit;
    text-decoration: underline;
}

.event-detail__byline {
    font-size: 13px;
    color: var(--color-muted, #888);
    margin-bottom: var(--space-md, 12px);
}

.event-detail__byline .event-detail__author {
    font-weight: 600;
    color: var(--color-text, inherit);
}

.event-detail__description p.lead {
    font-size: 1.1em;
    font-weight: 600;
    line-height: 1.5;
}

.event-detail__info {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.event-detail__date {
    font-style: italic;
    color: var(--color-secondary);
    font-weight: 600;
    font-size: 1rem;
}

.event-detail__venue h2 {
    font-size: 1.1rem;
    margin-bottom: var(--space-xs);
}

.event-detail__venue p {
    color: var(--color-text-muted);
    font-size: 0.9rem;
    margin: 0;
}

.event-detail__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    padding: var(--space-md) 0;
}

.event-detail__description {
    padding: var(--space-xl);
    border-top: 1px solid var(--color-border);
    line-height: 1.8;
    color: var(--color-text);
}

.event-detail__description a {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.event-detail__related {
    padding: var(--space-lg) var(--space-xl);
    border-top: 1px solid var(--color-border);
}

.event-detail__related h2 {
    margin-bottom: var(--space-md);
}

.event-detail__related a {
    display: inline-block;
    color: var(--color-accent);
    text-decoration: underline;
    margin-bottom: var(--space-sm);
}

/* Liste des dates d'une tournée */
.tourdates {
    list-style: none;
    margin: 0;
    padding: 0;
}

.tourdates__item {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--space-xs) var(--space-md);
    padding: var(--space-sm) 0;
    border-bottom: 1px solid var(--color-border);
}

.tourdates__date {
    flex: 0 0 auto;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--color-secondary);
}

.tourdates__place {
    flex: 1 1 auto;
    color: var(--color-accent);
    text-decoration: underline;
    margin: 0 !important;
}

/* SEARCH FORM
-------------------------------------------------------------- */
.search-form {
    display: flex;
    margin-bottom: var(--space-2xl);
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
}

.search-form input[type="text"] {
    flex: 1;
    padding: var(--space-md) var(--space-lg);
    background: transparent;
    border: none;
    color: var(--color-text);
    font-family: inherit;
    font-size: 1rem;
    outline: none;
}

.search-form input[type="text"]::placeholder {
    color: var(--color-text-muted);
}

.search-form input[type="submit"] {
    background: var(--gradient-cta);
    color: #fff;
    border: none;
    padding: var(--space-md) var(--space-xl);
    font-family: inherit;
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: opacity var(--transition-fast);
}

.search-form input[type="submit"]:hover {
    opacity: 0.9;
}

/* TRENDING SEARCHES
-------------------------------------------------------------- */
.tendances {
    padding-bottom: var(--space-lg);
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

.tendances a {
    display: inline-block;
    background: var(--color-panel);
    color: var(--color-accent);
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--radius-full);
    font-size: 0.8rem;
    font-weight: 600;
    border: 1px solid var(--color-border);
    transition: background var(--transition-fast), border-color var(--transition-fast);
}

.tendances a:hover {
    background: var(--color-tertiary);
    border-color: var(--color-tertiary);
    color: #fff;
    text-decoration: none;
}

/* EXTENSIONS BOX
-------------------------------------------------------------- */
.extensions {
    background: var(--color-surface);
    padding: var(--space-xl);
    text-align: center;
    margin-top: var(--space-xl);
    margin-bottom: var(--space-xl);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
}

.browsers {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2xl);
    margin-top: var(--space-lg);
}

.browsers img {
    width: 80px;
    transition: transform var(--transition-fast);
}

.browsers a:hover img {
    transform: scale(1.1);
}

/* PAGINATION
-------------------------------------------------------------- */
.pagination {
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
    margin-top: var(--space-xl);
}

.pagination a {
    width: 36px;
    height: 36px;
    font-size: 0.8rem;
    font-weight: 600;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    text-decoration: none;
    color: var(--color-text-muted);
    background: var(--color-surface);
    transition: all var(--transition-fast);
}

.pagination a.current,
.pagination a:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
    text-decoration: none;
}

/* BLOG POSTS
-------------------------------------------------------------- */
.posts {
    margin-top: var(--space-2xl);
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--space-lg);
}

.posts .post {
    display: flex;
    gap: var(--space-md);
    background: var(--color-surface);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    padding: var(--space-md);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.posts .post:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.posts .post a {
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
}

/* Le titre d'article est passé en H2 pour la hiérarchie : le rendu reste celui du lien,
   seules les marges par défaut du heading sont neutralisées. */
.posts .post .post__title {
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}

.posts .post a:hover {
    color: var(--color-primary);
}

.posts .post .img {
    flex: 0 0 120px;
    border-radius: var(--radius-sm);
    overflow: hidden;
}

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

/* INFORMATIONS PAGE
-------------------------------------------------------------- */
.infos {
    line-height: 1.8;
}

.infos h2 {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-top: var(--space-lg);
}

.infos h2 img {
    vertical-align: middle;
    display: inline-block;
    width: 24px;
    height: auto;
}

.infos p.small {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin: 0 0 var(--space-md);
}

/* ABOUT PAGE */
.about-section h2 {
    margin-top: var(--space-xl);
    border-bottom: 2px solid var(--color-primary);
    padding-bottom: var(--space-sm);
    display: inline-block;
}

/* GUIDES
-------------------------------------------------------------- */
/* Une seule règle pour les deux usages : le hub /guides.html (titre + chapô par
   entrée) et le bloc de la page d'accueil (titre seul). */
.guides-list {
    list-style: none;
    padding: 0;
    margin: var(--space-lg) 0 0;
    display: grid;
    gap: var(--space-md);
}

@media (min-width: 700px) {
    .guides-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

.guides-list > li {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-primary);
    border-radius: var(--radius-md);
    padding: var(--space-md);
}

.guides-list > li > h2 {
    margin: 0 0 var(--space-xs);
    font-size: 1.05rem;
    line-height: 1.3;
    /* neutralise le soulignement de .about-section h2 : ici les titres sont des
       entrées de liste, pas des têtes de section */
    border-bottom: 0;
    padding-bottom: 0;
    margin-top: 0;
    display: block;
}

.guides-list > li p {
    margin: 0;
    font-size: 0.9rem;
    color: var(--color-text-muted);
}

.guide-byline {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin: 0 0 var(--space-md);
}

.guide-maj {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin-top: var(--space-lg);
}

/* Note de méthode en fin de guide (origine et date des données citées). */
.guide-note {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    border-left: 3px solid var(--color-border, rgba(255, 255, 255, .15));
    padding-left: var(--space-sm);
    margin-top: var(--space-lg);
}

/* Provenance de la donnée, en pied de fiche. */
.event-detail__source {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    margin-top: var(--space-lg);
}

/* Ligne d'identification de l'éditeur, en pied de page. */
.footer-copyright {
    font-size: 0.8rem;
    opacity: .75;
}

/* ADS
-------------------------------------------------------------- */
.adsbygoogle {
    height: auto !important;
    max-width: 100%;
    overflow: hidden;
}

/* Pub insérée dans la grille programmation : doit occuper toute la largeur
   de la rangée (comme .month-header), sinon l'iframe AdSense (largeur mini
   ~300px) déborde de sa cellule de colonne et fait scroller la page en mobile */
.event-grid--programmation .adsbygoogle {
    grid-column: 1 / -1;
    width: 100%;
    display: block;
}

#pubbottom {
    position: fixed;
    left: 0;
    bottom: 0;
    background: var(--color-surface);
    width: 100%;
    border-top: 1px solid var(--color-border);
    padding: 3px 0;
    z-index: 50;
}

#pubbottom .inner {
    max-width: var(--max-width);
    margin: 0 auto;
    text-align: center;
}

#pubbottom .inner img {
    max-width: 100%;
}

/* PUSH NOTIFICATION DIALOG
-------------------------------------------------------------- */
/* Bandeau d'invitation aux notifications.
   ⚠️ C'était une pop-up centrée EN HAUT de l'écran (top: var(--space-md)),
   affichée dès le chargement : sur mobile elle recouvrait le logo, la barre de
   navigation et le haut du contenu — 33 % du viewport mesurés en émulation
   iPhone le 07/08/2026. C'est la définition de l'« intrusive interstitial »
   pénalisé par Google sur mobile, et le point 7 de la checklist AdSense.
   Désormais : bandeau ancré EN BAS, pleine largeur sur mobile, qui ne recouvre
   jamais le contenu à l'arrivée. */
#pushalerte {
    width: 480px;
    max-width: calc(100% - var(--space-md) * 2);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-lg);
    position: fixed;
    bottom: var(--space-md);
    left: 50%;
    transform: translateX(-50%);
    z-index: 999;
    padding: var(--space-lg);
    border-radius: var(--radius-md);
    color: var(--color-text);
}

@media (max-width: 768px) {
    /* Pleine largeur collée en bas : format « barre », pas « boîte flottante ». */
    #pushalerte {
        width: 100%;
        max-width: 100%;
        left: 0;
        right: 0;
        bottom: 0;
        transform: none;
        border-radius: var(--radius-md) var(--radius-md) 0 0;
        border-left: 0;
        border-right: 0;
        border-bottom: 0;
        padding: var(--space-md);
    }
    /* Corps réduit : le bandeau doit rester une barre, pas un demi-écran.
       Mesuré après compactage : ~20 % du viewport contre 33 % pour l'ancienne
       pop-up haute, et surtout en bas, sans masquer le contenu à l'arrivée. */
    #pushalerte .top {
        font-size: .9rem;
        gap: var(--space-sm);
        line-height: 1.35;
    }
    #pushalerte .top img {
        width: 24px;
        height: 24px;
    }
    #pushalerte .ios-note {
        font-size: 11.5px !important;
        margin-top: 4px !important;
        line-height: 1.3 !important;
    }
    #pushalerte .cta {
        margin-top: var(--space-sm);
        gap: var(--space-sm);
    }
    #pushalerte .cta .close,
    #pushalerte .cta .yes {
        font-size: .9rem;
        padding: 8px 14px;
    }
}

#pushalerte .top {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
}

#pushalerte .cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    margin-top: var(--space-lg);
}

#pushalerte .cta .close {
    padding: var(--space-sm) var(--space-md);
    cursor: pointer;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
    transition: background var(--transition-fast);
    white-space: nowrap;
}

#pushalerte .cta .close:hover {
    background: rgba(255, 255, 255, 0.05);
}

#pushalerte .cta .yes {
    background: var(--gradient-cta);
    color: #fff;
    cursor: pointer;
    border-radius: var(--radius-sm);
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--space-xl);
    font-weight: 600;
    transition: opacity var(--transition-fast);
    white-space: nowrap;
}

#pushalerte .cta .yes:hover {
    opacity: 0.9;
}

/* SEO IMAGE FLOAT (home page)
-------------------------------------------------------------- */
.seo-image {
    float: right;
    margin: 0 0 var(--space-lg) var(--space-lg);
    border-radius: var(--radius-md);
    overflow: hidden;
    max-width: 300px;
    border: 1px solid var(--color-border);
}

.seo-image img {
    display: block;
    width: 100%;
}

/* CTA CENTER
-------------------------------------------------------------- */
.cta-center {
    display: flex;
    justify-content: center;
    margin: var(--space-xl) 0;
}

/* ==========================================================================
   RESPONSIVE — Mobile First
   ========================================================================== */

/* Mobile (base) → up to 480px */
@media (max-width: 480px) {
    .event-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-sm);
    }

    .event-grid--programmation {
        grid-template-columns: repeat(2, 1fr);
    }

    .event-card__body {
        padding: var(--space-sm);
    }

    .event-card {
        min-width: 0;
    }

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

    .event-card__title {
        font-size: 0.75rem;
    }

    .event-card__date {
        font-size: 0.7rem;
    }

    .event-card__cta .btn {
        font-size: 0.65rem;
        padding: var(--space-xs) var(--space-sm);
    }

    .event-detail__content {
        grid-template-columns: 1fr;
    }

    .event-detail__image {
        max-width: 250px;
        margin: 0 auto;
    }

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

    .site-header picture img,
    .site-header > img,
    .site-header img {
        max-height: 80px;
    }

    .search-form input[type="text"] {
        padding: var(--space-sm) var(--space-md);
        font-size: 0.85rem;
    }

    .search-form input[type="submit"] {
        padding: var(--space-sm) var(--space-md);
        font-size: 0.85rem;
        white-space: nowrap;
    }
}

/* Tablet → 768px */
@media (max-width: 768px) {
    .site-main {
        grid-template-columns: 1fr;
        padding: var(--space-md);
    }

    .sidebar {
        display: none;
    }

    .site-nav__list {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(26, 26, 46, 0.98);
        backdrop-filter: blur(16px);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: var(--space-sm);
        transform: translateX(100%);
        transition: transform var(--transition-base);
        z-index: 105;
    }

    .site-nav__list.is-open {
        transform: translateX(0);
        justify-content: flex-start;
    }

    .site-nav__list li a {
        font-size: 1.1rem;
        padding: var(--space-md) var(--space-xl);
    }

    .site-nav__list li.desktop {
        display: list-item;
    }

    .site-nav__inner {
        gap: var(--space-sm);
        justify-content: flex-start;
    }

    .site-nav__search {
        display: flex;
        align-items: center;
        gap: var(--space-xs);
        flex: 1;
        min-width: 0;
    }

    .site-nav__search input[type="text"] {
        flex: 1;
        min-width: 0;
        height: 36px;
        border: 1px solid var(--color-border);
        background: rgba(255, 255, 255, 0.08);
        color: var(--color-text);
        border-radius: var(--radius-sm);
        padding: 0 var(--space-sm);
        font-size: 0.8rem;
    }

    .site-nav__search input[type="text"]::placeholder {
        color: var(--color-text-muted);
    }

    .site-nav__search button {
        height: 36px;
        border: 0;
        border-radius: var(--radius-sm);
        background: var(--gradient-cta);
        color: #fff;
        padding: 0 var(--space-sm);
        font-size: 0.72rem;
        font-weight: 700;
        text-transform: uppercase;
        cursor: pointer;
        white-space: nowrap;
    }

    .hamburger {
        display: block;
    }

    .extensions {
        padding: var(--space-md);
        margin-top: var(--space-md);
        margin-bottom: var(--space-md);
    }

    .search-form--mobile-hidden {
        display: none;
    }

    h1 {
        font-size: 1.3rem;
    }

    .event-grid--programmation {
        grid-template-columns: repeat(2, 1fr);
    }

    .event-detail__actions .btn,
    .event-detail__description .cta-center .btn {
        text-decoration: none !important;
        white-space: nowrap;
    }
}

/* Desktop → 1024px */
@media (min-width: 769px) and (max-width: 1024px) {
    .site-main {
        grid-template-columns: 1fr 220px;
    }

    .event-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Wide → 1280px+ */
@media (min-width: 1280px) {
    .event-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

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

    .event-card {
        opacity: 1;
        transform: none;
    }

    .event-card:hover {
        transform: none;
    }
}

/* BLOG CUSTOM (articles) — remplacement WordPress
-------------------------------------------------------------- */
.blog-intro { color: var(--color-text-muted); margin-bottom: var(--space-lg); }

.blog-cats { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-bottom: var(--space-xl); }
.blog-cats a {
    font-size: .8rem; font-weight: 600; padding: .35rem .75rem;
    border: 1px solid var(--color-border); border-radius: var(--radius-full);
    color: var(--color-text-muted); background: var(--color-surface);
    text-decoration: none; transition: all var(--transition-fast);
}
.blog-cats a:hover, .blog-cats a.current { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.blog-cats a span { opacity: .6; font-weight: 400; }

.posts .post .body .date { color: var(--color-text-muted); font-size: .8rem; margin-top: .35rem; }
.posts .post .body p { color: var(--color-text-muted); font-size: .85rem; margin-top: .4rem; line-height: 1.4; }

/* Fiche article */
.article { max-width: 820px; margin: 0 auto; }
.article__breadcrumb { font-size: .8rem; color: var(--color-text-muted); margin-bottom: var(--space-md); }
.article__breadcrumb a { color: var(--color-primary); text-decoration: none; }
.article__title { margin: 0 0 var(--space-md); line-height: 1.2; }
.article__byline {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm);
    color: var(--color-text-muted); font-size: .85rem; margin-bottom: var(--space-lg);
}
.article__byline .article__author { font-weight: 600; color: var(--color-text); }
.article__cat {
    font-size: .75rem; padding: .2rem .6rem; border-radius: var(--radius-full);
    background: var(--color-panel); color: var(--color-text); text-decoration: none;
}
.article__cat:hover { background: var(--color-primary); color: #fff; }
.article__hero { margin: 0 0 var(--space-xl); border-radius: var(--radius-md); overflow: hidden; }
.article__hero img { width: 100%; height: auto; display: block; }
.article__chapo { font-size: 1.15rem; font-weight: 600; color: var(--color-text); line-height: 1.5; margin-bottom: var(--space-lg); }
.article__body { color: var(--color-text); line-height: 1.7; font-size: 1.02rem; }
.article__body p { margin: 0 0 var(--space-md); }
.article__body h2, .article__body h3 { margin: var(--space-xl) 0 var(--space-sm); }
.article__body a { color: var(--color-primary); }
.article__body img { max-width: 100%; height: auto; border-radius: var(--radius-sm); margin: var(--space-md) 0; }
.article__body ul, .article__body ol { margin: 0 0 var(--space-md) 1.5rem; }
.article__back { margin-top: var(--space-2xl); }
.article__back a { color: var(--color-primary); text-decoration: none; font-weight: 600; }

/* Formulaire newsletter custom (remplace l'iframe MailPoet)
-------------------------------------------------------------- */
.nl-form { max-width: 460px; margin-top: var(--space-lg); display: grid; gap: var(--space-sm); }
.nl-form label { font-weight: 600; }
.nl-form input[type=email] {
    padding: .8rem 1rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm);
    background: var(--color-surface); color: var(--color-text); font-size: 1rem;
}
.nl-form .nl-consent { display: flex; gap: .5rem; align-items: flex-start; font-weight: 400; font-size: .85rem; color: var(--color-text-muted); }
.nl-form .nl-consent input { margin-top: .2rem; }
.nl-form button {
    justify-self: start; margin-top: .4rem; padding: .7rem 1.6rem; border: 0; cursor: pointer;
    border-radius: var(--radius-full); background: var(--color-primary); color: #fff; font-weight: 700; font-size: 1rem;
    transition: opacity var(--transition-fast);
}
.nl-form button:disabled { opacity: .6; cursor: default; }
.nl-msg { margin: .4rem 0 0; font-weight: 600; min-height: 1.2em; }
.nl-msg.ok { color: #2ecc71; }
.nl-msg.err { color: var(--color-primary); }

/* Modal newsletter (remplace MailMunch)
-------------------------------------------------------------- */
.nl-modal { position: fixed; inset: 0; z-index: 9999; display: none; }
.nl-modal.open { display: block; }
.nl-modal__overlay { position: absolute; inset: 0; background: rgba(0,0,0,.65); }
.nl-modal__box {
    position: relative; max-width: 440px; margin: 10vh auto 0;
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: var(--radius-md); padding: 2rem; box-shadow: var(--shadow-lg);
}
.nl-modal__box h2 { margin-top: 0; }
.nl-modal__box p { color: var(--color-text-muted); }
.nl-modal__close {
    position: absolute; top: .5rem; right: .9rem; background: none; border: 0;
    color: var(--color-text-muted); font-size: 1.9rem; line-height: 1; cursor: pointer; padding: .2rem;
}
.nl-modal__close:hover { color: var(--color-text); }
.nl-modal .nl-form { margin-top: 1rem; max-width: none; }
@media (max-width: 500px) { .nl-modal__box { margin: 6vh 1rem 0; padding: 1.4rem; } }

/* CTA de la modal newsletter (teaser vers /newsletter.html) */
.nl-modal__cta {
    display: inline-block; margin-top: 1.2rem; padding: .8rem 1.8rem;
    background: var(--color-primary); color: #fff; font-weight: 700;
    border-radius: var(--radius-full); text-decoration: none;
    transition: opacity var(--transition-fast);
}
.nl-modal__cta:hover { opacity: .9; color: #fff; text-decoration: none; }

/* Formulaire Brevo DANS la modal (thème sombre, scopé .nl-modal) */
.nl-modal .sib-form { background-color: transparent !important; padding: 0 !important; margin-top: 1rem; }
.nl-modal #sib-container { background-color: transparent !important; border: none !important; padding: 0 !important; max-width: none !important; }
.nl-modal #sib-container .sib-form-block,
.nl-modal #sib-container .entry__label { color: #e8e8e8 !important; }
.nl-modal #sib-container .input,
.nl-modal #sib-container input#EMAIL {
    background-color: #ffffff !important; border: 1px solid #C0CCD9 !important; color: #222222 !important;
    border-radius: 6px !important; padding: 12px 14px !important; font-size: 16px !important;
    width: 100% !important; box-sizing: border-box !important;
}
.nl-modal #sib-container input#EMAIL:focus { border-color: #e94560 !important; outline: none !important; box-shadow: 0 0 0 2px rgba(233,69,96,.25) !important; }
.nl-modal #sib-container input::placeholder { color: #a0a0b8 !important; }
.nl-modal #sib-container .sib-form-block__button {
    background-color: #e94560 !important; color: #fff !important; border: 0 !important;
    border-radius: 999px !important; padding: 12px 28px !important; font-weight: 700 !important; cursor: pointer;
}

/* ==========================================================================
   Sous-nav « genres » (rubriques SEO genre×ville — PLAN A §8 Phase 2)
   ========================================================================== */
.site-subnav {
    background: var(--color-bg, #0f1420);
    border-bottom: 1px solid var(--color-border);
}
.site-subnav__inner {
    max-width: var(--max-width);
    margin: 0 auto;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-xs);
    padding: 8px var(--space-md);
}
.site-subnav__label {
    color: var(--color-text-muted);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    margin-right: 4px;
}
.site-subnav a {
    display: inline-block;
    padding: 5px 12px;
    color: var(--color-text-muted);
    font-size: 0.8rem;
    font-weight: 600;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    transition: color var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
    white-space: nowrap;
}
.site-subnav a:hover { color: #fff; border-color: var(--color-primary); }
.site-subnav a.current { color: #fff; background: var(--color-primary); border-color: var(--color-primary); }

/* Intro éditoriale des pages rubriques */
.rubrique-intro {
    background: var(--color-surface);
    border-radius: var(--radius-sm, 6px);
    padding: 16px 20px;
    margin: 0 0 20px;
    line-height: 1.6;
    color: var(--color-text, #e8e8ef);
}
.rubrique-intro p { margin: 0 0 10px; }
.rubrique-intro p:last-child { margin-bottom: 0; }
.rubrique-freshness { color: var(--color-text-muted); font-size: 0.8rem; margin: 4px 0 18px; }
.rubrique-crosslinks { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.rubrique-crosslinks .sidebar__link { margin-top: 0; }

/* ANNUAIRE DES SALLES (/lyon/salles.html)
-------------------------------------------------------------- */
.salle-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
    margin: 18px 0 8px;
}
.salle-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md, 12px);
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.salle-card__name { margin: 0; font-size: 1.05rem; line-height: 1.3; color: var(--color-text); }
.salle-card__type { color: var(--color-accent); font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; }
.salle-card__meta { color: var(--color-text-muted); font-size: 0.85rem; display: flex; flex-wrap: wrap; gap: 4px 12px; }
.salle-card__note { margin: 2px 0 0; font-size: 0.9rem; line-height: 1.5; color: var(--color-text); }
.salle-card__link { margin-top: auto; padding-top: 8px; color: var(--color-accent); font-weight: 600; font-size: 0.85rem; }
.salle-card__link[aria-disabled="true"] { color: var(--color-text-muted); font-weight: 400; }

/* ---- Encarts SpecTab : un message par usage ----------------------------------
   L'extension « nouvel onglet » n'existe que sur un navigateur de bureau : aucun
   mobile n'accepte d'extension et aucun ne laisse remplacer la page de nouvel
   onglet. Le visiteur tactile se voit donc proposer l'agenda sur son écran
   d'accueil (PWA de spectab.fr). Le critère est l'absence de survol, pas la
   largeur : c'est elle qui signe l'appareil sans extension — une tablette large
   est concernée, un portable tactile ne l'est pas. */
.st-usage-mobile { display: none; }
@media (hover: none) {
    .st-usage-desktop { display: none; }
    .st-usage-mobile { display: inline; }
    div.st-usage-mobile { display: block; }
}