/*
 * Composants partages du site public
 *
 * Barre de navigation, pied de page, carte evenement, badges et etats vides.
 *
 * Ces regles vivaient en six exemplaires, un par gabarit qui les affichait, et
 * elles avaient commence a diverger : .badge-dance existait en quatre versions,
 * .navbar en six, le pied de page de la page SEO avait pris ses propres tailles.
 * Une definition unique est desormais servie par AssetMapper et partagee par
 * toutes les pages, donc telechargee une fois pour tout le site.
 *
 * La copie retenue est celle de la page d'accueil : c'etait la plus avancee
 * (line-clamp sur les titres, backdrop-filter sur les lignes), les autres en
 * etaient des versions plus anciennes.
 */


.has-announcement-banner .navbar {
    top: 46px;
}
.has-announcement-banner .main-content {
    padding-top: 126px;
}

.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    padding: 1rem 3rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(13, 13, 13, 0.85);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid var(--border-subtle);
}

.navbar-brand {
    font-family: 'Bebas Neue', Impact, sans-serif;
    font-size: 2rem;
    letter-spacing: 0.02em;
    color: var(--accent-coral);
    text-decoration: none;
    transition: all 0.3s ease;
}

.navbar-brand:hover,
.navbar-brand:focus {
    opacity: 0.85;
}

.navbar-nav {
    display: none;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 2.5rem;
}

.navbar-nav li {
    list-style: none;
}

.navbar-nav a {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    transition: all 0.3s ease;
    position: relative;
}

.navbar-nav a::before {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--accent-coral);
    transition: width 0.3s ease;
    box-shadow: 0 0 8px rgba(255, 107, 91, 0.4);
}

.navbar-nav a:hover,
.navbar-nav a:focus {
    color: var(--text-primary);
}

.navbar-nav a:hover::before,
.navbar-nav a:focus::before {
    width: 100%;
}
.navbar-cta {
    display: none;
    padding: 0.7rem 1.5rem;
    background: var(--accent-coral);
    border: none;
    border-radius: 50px;
    color: var(--bg-main);
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
}

.navbar-cta:hover,
.navbar-cta:focus {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(255, 107, 91, 0.2);
}

/* La même action, réduite pour tenir dans la barre d'un téléphone entre la
   marque et la bascule du menu : une pastille corail, l'icône et un mot. */
.navbar-cta-compact {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    min-height: 40px;
    padding: 0 0.9rem 0 0.7rem;
    margin-left: auto;
    margin-right: 0.5rem;
    background: var(--accent-coral);
    border-radius: 50px;
    color: var(--bg-main);
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 600;
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
}

.navbar-cta-compact svg {
    width: 16px;
    height: 16px;
    flex: none;
}

.navbar-cta-compact:focus-visible {
    outline: 2px solid var(--text-primary);
    outline-offset: 2px;
}
.navbar-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

.navbar-toggle-icon {
    width: 24px;
    height: 24px;
    fill: var(--text-primary);
}
.navbar-mobile-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(13, 13, 13, 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: var(--shadow-medium);
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border-subtle);
}

.navbar-mobile-menu.open {
    display: block;
}

.navbar-mobile-nav {
    list-style: none;
    margin: 0;
    padding: 0;
}

.navbar-mobile-nav li {
    border-bottom: 1px solid var(--border-subtle);
}

.navbar-mobile-nav li:last-child {
    border-bottom: none;
}

.navbar-mobile-nav a {
    display: block;
    padding: 0.875rem 0;
    color: var(--text-secondary);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    transition: color 0.2s ease-in-out;
    min-height: 44px;
}

.navbar-mobile-nav a:hover,
.navbar-mobile-nav a:focus {
    color: var(--accent-coral);
}

.navbar-mobile-cta {
    color: var(--accent-coral) !important;
    font-weight: 600 !important;
}

.badge-dance {
    display: inline-block;
    padding: 4px 14px;
    border-radius: 30px;
    margin-right: 10px;
    margin-bottom: 10px;
    font-weight: bold;
    font-size: 12px;
}

.badge-event-type {
    display: inline-block;
    padding: 4px 14px;
    border-radius: 30px;
    margin-right: 10px;
    margin-bottom: 10px;
    font-weight: bold;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #0d0d0d;
    background: var(--accent-amber);
}
.empty-state {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--text-muted);
}

.empty-state p {
    margin: 0;
}
.empty-state-reset-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    margin-top: 1rem;
    padding: 0.6rem 1.75rem;
    border: 1px solid var(--accent-coral);
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--accent-coral);
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: background-color 0.25s ease, color 0.25s ease;
}

.empty-state-reset-btn:hover,
.empty-state-reset-btn:focus-visible {
    background: var(--accent-coral);
    color: #0d0d0d;
}
.site-footer {
    background-color: var(--bg-card);
    border-top: 1px solid var(--border-subtle);
    padding: 4rem 3rem 2rem;
    position: relative;
}
.site-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 107, 91, 0.3), var(--accent-amber), rgba(255, 107, 91, 0.3), transparent);
}

.footer-container {
    max-width: 1000px;
    margin: 0 auto;
}

.footer-content {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-bottom: 3rem;
}
.footer-brand {
    display: flex;
    flex-direction: column;
}

.footer-logo {
    font-family: 'Bebas Neue', Impact, sans-serif;
    font-size: 2rem;
    color: var(--accent-coral);
    letter-spacing: 0.02em;
    margin-bottom: 1rem;
}

.footer-description {
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

.footer-social {
    display: flex;
    gap: 0.75rem;
}

.footer-social-link {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    text-decoration: none;
    transition: all 0.3s ease;
}

.footer-social-link:hover,
.footer-social-link:focus {
    background: var(--accent-coral);
    border-color: var(--accent-coral);
    color: var(--bg-main);
    box-shadow: 0 0 20px rgba(255, 107, 91, 0.3);
}

.footer-social-link svg {
    width: 18px;
    height: 18px;
}
.footer-column-title {
    font-family: 'Bebas Neue', Impact, sans-serif;
    font-size: 1.1rem;
    letter-spacing: 0.02em;
    margin-bottom: 1.25rem;
    color: var(--text-primary);
}

.footer-links {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-links li {
    margin-bottom: 0.6rem;
}

.footer-links a {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    position: relative;
}

.footer-links a:hover,
.footer-links a:focus {
    color: var(--accent-coral);
    padding-left: 0.5rem;
}
.footer-newsletter .footer-newsletter-description {
    color: var(--text-secondary);
    font-size: 0.85rem;
    margin-bottom: 1rem;
    line-height: 1.6;
}

.footer-newsletter .newsletter-form-container {
    max-width: 100%;
}

.footer-newsletter .newsletter-form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.footer-newsletter .newsletter-form input[type="email"] {
    width: 100%;
    padding: 0.9rem 1.2rem;
    background: var(--bg-input);
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    color: var(--text-primary);
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    min-height: 44px;
}

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

.footer-newsletter .newsletter-form input[type="email"]:focus {
    outline: none;
    border-color: var(--accent-coral);
    background: var(--bg-elevated);
    box-shadow: 0 0 0 3px var(--accent-coral-light), 0 0 20px rgba(255, 107, 91, 0.08);
}

.footer-newsletter .newsletter-form button {
    width: 100%;
    padding: 0.9rem;
    background: var(--accent-coral);
    border: none;
    border-radius: 10px;
    color: var(--bg-main);
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
    min-height: 44px;
}

.footer-newsletter .newsletter-form button:hover {
    box-shadow: 0 8px 25px rgba(255, 107, 91, 0.2);
    transform: translateY(-1px);
}

.footer-newsletter #newsletter-result {
    margin-top: 0.5rem;
}

.footer-newsletter #newsletter-result .alert {
    padding: 0.75rem 1rem;
    border-radius: 8px;
    font-size: 0.875rem;
}
.footer-bottom {
    max-width: 1000px;
    margin: 0 auto;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-subtle);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.footer-copyright {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin: 0;
}

.footer-legal {
    display: flex;
    gap: 2rem;
}

.footer-legal a {
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.85rem;
    transition: color 0.3s ease;
}

.footer-legal a:hover,
.footer-legal a:focus {
    color: var(--text-secondary);
}
/* --- Entree compte ---
 *
 * Le site avait des pages de connexion, d'inscription, de profil et de
 * securite, et aucun lien vers elles nulle part : on ne pouvait y arriver qu'en
 * tapant l'URL.
 */
.navbar-account {
    display: none;
}

.navbar-account-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 44px;
    padding: 0 0.6rem;
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: color 0.3s ease;
}

.navbar-account-link svg {
    width: 18px;
    height: 18px;
    flex: none;
}

.navbar-account-link:hover,
.navbar-account-link:focus-visible {
    color: var(--text-primary);
}

@media (min-width: 1024px) {
    .navbar {
        padding: 1rem 3rem;
    }

    .navbar-nav {
        display: flex;
        /* Cinq entrees plus le compte plus l'action principale : l'espacement
           de 2,5rem faisait deborder la barre entre 1024 et 1200. */
        gap: 1.75rem;
    }

    .navbar-account {
        display: block;
    }

    .navbar-cta {
        display: inline-block;
    }

    .navbar-cta-compact,
    .navbar-toggle {
        display: none;
    }
    .footer-content {
        grid-template-columns: repeat(2, 1fr);
    }
}


@media (min-width: 1024px) {
    .footer-content {
        grid-template-columns: 1.5fr 1fr 1.5fr;
        gap: 3rem;
        max-width: 1000px;
    }
}


@media (max-width: 639px) {

    .empty-state {
        grid-column: 1 / -1;
    }
}


@media (max-width: 1023px) {
    .has-announcement-banner .navbar {
        top: 42px;
    }

    .has-announcement-banner .main-content {
        padding-top: 122px;
    }

    .navbar {
        padding: 1rem 1.5rem;
    }
    .site-footer {
        padding: 3rem 1.5rem 2rem;
    }

    .footer-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .footer-bottom {
        flex-direction: column;
        text-align: center;
    }

    .footer-legal {
        justify-content: center;
    }
}


@media print {
    .site-footer {
        background-color: transparent;
        color: #000000;
        padding: 1rem 0;
        margin-top: 2rem;
        border-top: 1px solid #cccccc;
    }

    .site-footer::before {
        display: none;
    }

    .footer-content {
        display: block;
    }

    .footer-brand,
    .footer-column {
        margin-bottom: 1rem;
    }

    .footer-logo {
        color: #000000;
        font-size: 12pt;
        text-shadow: none;
    }

    .footer-description {
        color: #333333;
    }

    .footer-column-title {
        color: #000000;
        font-size: 12pt;
    }

    .footer-links a {
        color: #000000;
        text-decoration: underline;
    }

    .footer-bottom {
        border-top: none;
        padding-top: 0.5rem;
    }

    .footer-copyright {
        color: #666666;
    }
}



/* --- Etat de l onglet courant, absent de la copie d accueil --- */


.navbar-nav a.is-active,
.navbar-mobile-nav a.is-active {
    color: var(--accent-coral);
    font-weight: 600;
}

.navbar-nav a.is-active::before {
    width: 100%;
}

.navbar-nav a[aria-current="page"] {
    color: var(--text-primary);
}

.navbar-nav a[aria-current="page"]::before {
    width: 100%;
}

.navbar-mobile-nav a[aria-current="page"] {
    color: var(--accent-coral);
    text-decoration: underline;
    text-underline-offset: 4px;
}


@media (min-width: 1024px) {
.navbar-mobile-menu {
        display: none !important;
    }
.footer-bottom {
        flex-direction: row;
        justify-content: space-between;
    }
}




/* --- Variante : badges dans les bulles de la carte ---
 *
 * Plus petits et ombres, parce qu'ils se posent sur une image satellite ou une
 * tuile claire, la ou les badges de la liste ont toujours un fond sombre
 * derriere eux. C'est la seule divergence de .badge-dance qui etait voulue, donc
 * la seule qui survit -- et elle est desormais nommee comme telle.
 */
.map-popup-dances .badge-dance {
    padding: 4px 12px;
    font-size: 11px;
    margin-right: 0;
    margin-bottom: 0;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

/* --- Section << Proposer une soiree >> ---
 *
 * Partagee par la page d'accueil et par /proposer, donc definie une seule fois.
 * C'est la seule surface claire du site : le corail y passe par
 * --accent-coral-ink, le corail de marque n'y etant pas lisible.
 */

.add-event {
    padding: 4.5rem 2rem;
    background: #FBF5E2;
    position: relative;
}

.add-event-container {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
}

.add-event-eyebrow {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent-coral-ink);
    border: 1px solid rgba(255, 107, 91, 0.3);
    border-radius: 50px;
    padding: 0.35rem 1rem;
    margin-bottom: 1.25rem;
}

/* h1 comme h2 : la section porte le titre de niveau 1 sur /proposer, ou elle
   est la page, et un niveau 2 sur l'accueil ou le heron le porte deja. Ciblee
   sur le seul h2, la couleur laissait le titre de /proposer en creme sur
   creme -- illisible. */
.add-event h1,
.add-event h2 {
    font-family: 'Bebas Neue', Impact, sans-serif;
    font-size: 3rem;
    letter-spacing: 0.02em;
    margin-bottom: 0.75rem;
    color: #1a1a1a;
    line-height: 0.95;
}

.add-event p {
    color: #5c554a;
    margin-bottom: 2rem;
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.6;
}

.add-event-form {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: center;
}

.add-event-form input,
.add-event-input {
    flex: 1;
    min-width: 280px;
    padding: 1rem 1.5rem;
    background: #ffffff;
    border: 1px solid #ddd5c6;
    border-radius: 50px;
    color: #1a1a1a;
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.95rem;
    transition: all 0.3s ease;
}

.add-event-form input::placeholder,
.add-event-input::placeholder {
    color: #a89f90;
}

.add-event-form input:focus,
.add-event-input:focus {
    outline: none;
    border-color: var(--accent-coral);
    box-shadow: 0 0 0 3px rgba(255, 107, 91, 0.15);
}

.add-event-form button,
.add-event-btn {
    padding: 1rem 2.25rem;
    background: var(--accent-coral);
    border: none;
    border-radius: 50px;
    color: var(--bg-main);
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 44px;
}

.add-event-form button:hover,
.add-event-btn:hover {
    background: #e55a4a;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(255, 107, 91, 0.3);
}

.add-event-btn .btn-text {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.add-event-btn .btn-loading {
    display: none;
}

.add-event-btn.htmx-request .btn-text {
    display: none;
}

.add-event-btn.htmx-request .btn-loading {
    display: flex;
}
/* Le retour du formulaire, sur la crème. Les alertes de base.css sont
   dessinées pour le fond sombre : leur rouge y mesurait 2,2:1. Ici l'encre
   est calculée pour la crème, et une URL d'exemple dans le message se coupe
   au lieu d'élargir la page. */
#scrape-result {
    margin-top: 1rem;
    text-align: left;
}

#scrape-result:empty {
    margin-top: 0;
}

#scrape-result .alert {
    padding: 1rem 1.25rem;
    border-radius: 12px;
    font-size: 0.9375rem;
    line-height: 1.5;
    margin-bottom: 0;
    overflow-wrap: anywhere;
}

#scrape-result .alert-error {
    background-color: rgba(220, 53, 69, 0.08);
    color: #a11d2b;
    border: 1px solid rgba(220, 53, 69, 0.3);
}

#scrape-result .alert-error a {
    color: inherit;
    font-weight: 600;
}

/* L'attente, dite avant que le résultat n'arrive : une carte en creux et une
   phrase, visibles tant que htmx marque la requête en cours. */
.add-event-waiting {
    display: none;
    margin-top: 1.5rem;
    text-align: left;
}

.add-event-waiting.htmx-request {
    display: block;
}

.add-event-waiting p {
    margin: 1rem 0 0;
    font-size: 0.9rem;
    color: #5c554a;
}

.add-event-skeleton {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 1rem;
    padding: 1rem;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: var(--radius-lg);
    background: #1a1a1a;
}

.add-event-skeleton-media {
    display: block;
    aspect-ratio: 3 / 2;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.08);
    animation: skeleton-pulse 1.4s ease-in-out infinite;
}

.add-event-skeleton-lines {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding-top: 0.2rem;
}

.add-event-skeleton-lines span {
    display: block;
    height: 12px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.08);
    animation: skeleton-pulse 1.4s ease-in-out infinite;
}

@keyframes skeleton-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.45; }
}

@media (prefers-reduced-motion: reduce) {
    .add-event-skeleton-media,
    .add-event-skeleton-lines span {
        animation: none;
    }
}

.add-event-promotion-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.5rem;
    padding: 0.75rem 1.5rem;
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    /* Sur la creme, pas sur le fond sombre : voir --accent-coral-ink. */
    color: var(--accent-coral-ink);
    text-decoration: none;
    border: 1px solid rgba(194, 65, 47, 0.45);
    border-radius: 50px;
    transition: all 0.3s ease;
    min-height: 44px;
}

.add-event-promotion-link:hover {
    background: var(--accent-coral);
    color: var(--bg-main);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(255, 107, 91, 0.3);
}

.add-event-promotion-link:active {
    transform: scale(0.98);
}

.add-event-promotion-link svg {
    flex-shrink: 0;
}
@media (max-width: 1023px) {
    .add-event {
        padding: 3.5rem 1.5rem;
    }

    .add-event h1,
    .add-event h2 {
        font-size: 2.4rem;
    }

    .add-event-form input,
    .add-event-input {
        min-width: 100%;
    }

    .add-event-form button,
    .add-event-btn {
        width: 100%;
        justify-content: center;
    }

    .add-event-promotion-link {
        font-size: 0.85rem;
        padding: 0.65rem 1.25rem;
    }
}



/* --- Pages de compte : connexion, inscription, mot de passe oublie ---
 *
 * Ces regles existaient en sept exemplaires, un par page du parcours. Une
 * definition unique desormais, comme pour le reste des composants.
 */

    .auth-container {
        max-width: 480px;
        margin: 0 auto;
        padding: 2rem 1rem;
    }

    .auth-card {
        background-color: var(--bg-card);
        border-radius: var(--radius-sm);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        padding: 2rem;
    }

    .auth-header {
        text-align: center;
        margin-bottom: 2rem;
    }

    .auth-header h1 {
        font-size: 1.75rem;
        font-weight: 600;
        color: var(--accent-coral);
        margin-bottom: 0.5rem;
    }

    .auth-header p {
        color: var(--text-muted);
        font-size: 0.9rem;
    }

    .form-error {
        color: var(--state-error);
        font-size: 0.85rem;
        margin-top: 0.25rem;
    }

    .form-checkbox-group {
        display: flex;
        align-items: flex-start;
        gap: 0.5rem;
        margin-bottom: 1.25rem;
    }

    .form-checkbox-group input[type="checkbox"] {
        width: 1.25rem;
        height: 1.25rem;
        margin-top: 0.1rem;
        accent-color: var(--accent-coral);
    }

    .form-checkbox-group label {
        font-weight: 400;
        margin-bottom: 0;
        cursor: pointer;
    }

    .password-requirements {
        background-color: var(--bg-main);
        border-radius: var(--radius-sm);
        padding: 1rem;
        margin-top: 0.75rem;
    }

    .password-requirements h4 {
        font-size: 0.85rem;
        font-weight: 500;
        color: var(--text-muted);
        margin-bottom: 0.5rem;
    }

    .password-requirement {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.25rem 0;
        font-size: 0.85rem;
    }

    .password-requirement .check-icon {
        width: 1rem;
        height: 1rem;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
    }

    .password-requirement.met .check-icon {
        background-color: var(--state-success);
        color: white;
    }

    .password-requirement.unmet .check-icon {
        background-color: var(--border-medium);
        color: var(--text-muted);
    }

    .password-requirement.met {
        color: var(--state-success);
    }

    .password-requirement.unmet {
        color: var(--text-muted);
    }

    .btn-block {
        width: 100%;
        padding: 0.875rem 1.5rem;
        font-size: 1rem;
    }

    .auth-footer {
        text-align: center;
        margin-top: 1.5rem;
        padding-top: 1.5rem;
        border-top: 1px solid var(--border-medium);
    }

    .auth-footer a {
        color: var(--accent-coral);
        text-decoration: none;
    }

    .auth-footer a:hover {
        text-decoration: underline;
    }
@media (max-width: 639px) {
        .auth-container {
            padding: 1rem;
        }

        .auth-card {
            padding: 1.5rem;
        }
}



    .forgot-password {
        color: var(--accent-coral);
        text-decoration: none;
        font-size: 0.9rem;
    }

    .forgot-password:hover {
        text-decoration: underline;
    }
/* --- Bloc << A la une >> ---
 *
 * Les evenements mis en avant, en tete de liste. Ils vivaient dans un carrousel
 * de 660 px de haut qui n'affichait qu'une diapositive a la fois ; ils gardent
 * ici la premiere place, avec les cartes du reste de la liste.
 */
/* --- Ce que le visiteur vient d'ajouter, en tête de la liste ------------- */

.submission-notice {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    max-width: 1000px;
    margin: 0 auto var(--spacing-xl);
    padding: var(--spacing-lg);
    border: 1px solid rgba(255, 107, 91, 0.35);
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, rgba(255, 107, 91, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%), var(--bg-card);
    box-shadow: var(--shadow-glow);
    scroll-margin-top: 90px;
}

.submission-notice:focus {
    outline: none;
}

.submission-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    align-self: flex-start;
    margin: 0;
    padding: 0.3rem 0.9rem;
    border: 1px solid currentColor;
    border-radius: var(--radius-pill);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.submission-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}

.submission-notice--published .submission-pill,
.submission-notice--followed .submission-pill { color: #4ade80; }
.submission-notice--pending .submission-pill { color: #93c5fd; }
.submission-notice--known .submission-pill { color: var(--text-secondary); }
.submission-notice--rejected .submission-pill { color: var(--accent-amber); }

.submission-heading {
    margin: 0;
    font-family: 'Bebas Neue', Impact, sans-serif;
    font-size: 2rem;
    font-weight: 400;
    letter-spacing: 0.02em;
    line-height: 0.95;
    color: var(--text-primary);
}

.submission-lead {
    margin: 0;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-secondary);
}

.submission-actions {
    margin: 0;
}

.submission-again {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 44px;
    padding: 0 1.25rem;
    border: 1px solid rgba(255, 107, 91, 0.45);
    border-radius: var(--radius-pill);
    color: var(--accent-coral);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
}

.submission-again svg {
    width: 16px;
    height: 16px;
}

.submission-again:hover,
.submission-again:focus-visible {
    background: var(--accent-coral);
    color: var(--bg-main);
}

/* Le préréglage, annoncé au-dessus de la liste, avec sa sortie. */
/* Centré, sur la largeur de la liste qu'il annonce : collé à gauche de la
   section, il flottait loin des cartes sur un grand écran. */
.listing-preset {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.35rem 1rem;
    max-width: 1000px;
    margin: 0 auto var(--spacing-lg);
    font-size: 0.9rem;
    text-align: center;
    color: var(--text-secondary);
}

.listing-preset a {
    color: var(--accent-coral);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.events-featured {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    /* Sur la largeur de la liste, comme elle : le bloc s'étalait sur toute la
       section, plus large que les cartes qu'il précède. */
    max-width: 1000px;
    margin: 0 auto var(--spacing-xl);
}

/* Une carte à la fois : les autres sont dans la page, cachées, jusqu'à leur
   tour. L'apparition est un fondu court, et rien du tout pour qui a demandé
   moins de mouvement. */
.events-featured-slide[hidden] {
    display: none;
}

.events-featured-slide.is-current {
    animation: events-featured-fade 0.35s ease-out;
}

@keyframes events-featured-fade {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .events-featured-slide.is-current {
        animation: none;
    }
}

.events-featured-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
}

.events-featured-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--border-medium);
    border-radius: 50%;
    background: transparent;
    color: var(--text-primary);
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.events-featured-arrow svg {
    width: 16px;
    height: 16px;
}

.events-featured-arrow:hover,
.events-featured-arrow:focus-visible {
    border-color: var(--accent-coral);
    background: var(--accent-coral-light);
}

.events-featured-arrow:focus-visible {
    outline: 2px solid var(--accent-coral);
    outline-offset: 2px;
}

.events-featured-dots {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.events-featured-dot {
    width: 8px;
    height: 8px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.2);
    transition: width 0.2s ease, background-color 0.2s ease;
}

.events-featured-dot.is-current {
    width: 22px;
    background: var(--accent-coral);
}

.events-featured-heading {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* La seule carte claire d'une page sombre : c'est ce qui distingue une carte
 * a la une, sans lui donner une mise en page a part. Un lisere corail sur le
 * bord ne se voyait pas ; la creme se voit avant meme de lire. C'est aussi
 * l'option << fond colore >> de la mise en avant, enfin visible. */
.events-featured .event-card {
    background: var(--accent-cream);
    border-color: rgba(194, 65, 47, 0.5);
    box-shadow: 0 10px 40px rgba(255, 107, 91, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.6);
    color: #1a1a1a;
}

.events-featured .event-card:hover,
.events-featured .event-card:focus-within {
    border-color: var(--accent-coral-ink);
    box-shadow: 0 12px 44px rgba(255, 107, 91, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.events-featured .event-card-title,
.events-featured .event-card-organizer {
    color: #1a1a1a;
}

.events-featured .event-card-where,
.events-featured .event-card-date,
.events-featured .event-card-sep {
    color: #5c554a;
}

.events-featured .event-card-when {
    color: var(--accent-coral-ink);
}

.events-featured .event-card-where svg {
    color: var(--accent-coral-ink);
}

.events-featured .event-card-media {
    background: #efe6cf;
}

.events-featured .event-card-media svg {
    color: #a89f90;
}

.events-featured .event-card-actions {
    border-top-color: rgba(0, 0, 0, 0.08);
}

.events-featured .event-action-ics {
    background: var(--accent-coral);
    border-color: var(--accent-coral);
    color: var(--bg-main);
    font-weight: 600;
}

.events-featured .event-action-ics:hover,
.events-featured .event-action-ics:focus-visible {
    background: var(--accent-coral-ink);
    border-color: var(--accent-coral-ink);
    color: var(--accent-cream);
}

.events-featured .event-action-facebook {
    border-color: rgba(0, 0, 0, 0.2);
    color: #5c554a;
}

.events-featured .event-action-facebook:hover,
.events-featured .event-action-facebook:focus-visible {
    border-color: #1a1a1a;
    color: #1a1a1a;
}

/* A partir de 640 px, la carte a la une se coupe en deux : le texte a gauche,
 * en grand, et l'affiche en panneau a droite sur pres de la moitie, jusqu'aux
 * bords de la carte, la creme fondant dans l'image. L'affiche a 132 px ne
 * montrait rien de ce que l'organisateur a paye pour montrer.
 *
 * Le panneau est l'affiche elle-meme, restee dans le lien : il est cliquable
 * comme le reste de la carte. Positionne en absolu sur toute la hauteur, il
 * couvre aussi la droite de la rangee d'actions, laissee vide par la marge. */
@media (min-width: 640px) {
    .events-featured .event-card {
        grid-template-columns: minmax(0, 1fr);
        min-height: 320px;
    }

    .events-featured .event-card-link {
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
        gap: 0;
        padding: 1.75rem calc(46% + 1.5rem) 0.5rem 1.75rem;
        position: static;
    }

    .events-featured .event-card-media {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 46%;
        aspect-ratio: auto;
        border-radius: 0;
    }

    .events-featured .event-card-media::before {
        content: '';
        position: absolute;
        inset: 0 auto 0 0;
        width: 120px;
        background: linear-gradient(90deg, var(--accent-cream) 0%, rgba(253, 246, 227, 0) 100%);
        z-index: 1;
    }

    .events-featured .event-card-body {
        gap: 0.5rem;
    }

    .events-featured .event-card-title {
        font-family: 'Bebas Neue', Impact, sans-serif;
        font-size: 2.6rem;
        font-weight: 400;
        letter-spacing: 0.02em;
        line-height: 0.95;
    }

    .events-featured .event-card-when {
        font-size: 0.9rem;
    }

    .events-featured .event-card-where {
        font-size: 0.95rem;
    }

    .events-featured .event-card-actions {
        padding: 0.5rem calc(46% + 1.5rem) 1.75rem 1.75rem;
        margin-top: 0;
        border-top: none;
    }
}

/* La pastille, dans la carte : le titre de rubrique au-dessus ne sert plus
   qu'aux lecteurs d'ecran. */
.event-card-flag {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    align-self: flex-start;
    margin-bottom: 0.2rem;
    padding: 0.3rem 0.8rem;
    border-radius: var(--radius-pill);
    background: var(--accent-coral-ink);
    color: var(--accent-cream);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.event-card-flag svg {
    width: 12px;
    height: 12px;
}

/* --- Echec d'une requete htmx ---
 *
 * Un echec reseau laissait la liste telle quelle, sans un mot. Le message se
 * pose contre la zone concernee et porte sa propre sortie.
 */
.htmx-error-banner {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 0 0 var(--spacing-md);
    padding: 0.85rem 1rem;
    border: 1px solid rgba(239, 68, 68, 0.35);
    border-radius: var(--radius-sm);
    background: rgba(239, 68, 68, 0.12);
    color: #f8b4b4;
    font-size: 0.9rem;
}

.htmx-error-retry {
    min-height: 44px;
    padding: 0 1rem;
    border: 1px solid rgba(248, 180, 180, 0.5);
    border-radius: var(--radius-pill);
    background: transparent;
    color: inherit;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
}

.htmx-error-retry:hover,
.htmx-error-retry:focus-visible {
    background: rgba(248, 180, 180, 0.15);
}

/* --- Surfaces tactiles ---
 *
 * Le standard interne responsive.md demande 44 x 44 px minimum ; une vingtaine
 * de controles etaient sous ce seuil a 390 px de large, la plupart dans le pied
 * de page ou les liens ne faisaient que 18 px de haut.
 */
.footer-links a,
.footer-legal a,
.footer-social-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

/* La case elle-meme reste petite -- c'est la convention de la plateforme --
 * mais l'etiquette qui l'accompagne porte la surface cliquable. */
.checkbox-control,
.form-checkbox-group label,
.dance-exclusive label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 44px;
    cursor: pointer;
}

.checkbox-control input[type="checkbox"],
.form-checkbox-group input[type="checkbox"],
.dance-exclusive input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: var(--accent-coral);
    flex: none;
    cursor: pointer;
}

/* Les commandes de zoom de Leaflet arrivent en 30 px. */
.leaflet-touch .leaflet-bar a,
.leaflet-bar a {
    width: 44px;
    height: 44px;
    line-height: 44px;
}

/* Le titre du bloc d'exigences de mot de passe : son niveau suit le plan du
 * document, sa taille reste celle d'une legende. */
.password-requirements-title {
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0 0 0.5rem;
}

/* Les liens courts du pied de page : 44 px dans les deux dimensions. */
.footer-links a,
.footer-legal a {
    min-width: 44px;
}

/* Leaflet charge sa feuille apres celle-ci, donc a specificite egale c'est la
 * sienne qui gagne : on remonte d'un cran plutot que de forcer. */
.leaflet-container .leaflet-bar a,
.leaflet-container.leaflet-touch .leaflet-bar a {
    width: 44px;
    height: 44px;
    line-height: 44px;
}

/* Les liens secondaires des formulaires de compte. */
.forgot-password,
.auth-footer a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

/* --- Bouton << Autour de moi >>, pendant la localisation ---
 *
 * Une seule definition : l'accueil, la carte et l'agenda en portaient chacun la
 * leur, sous deux noms differents pour le meme effet.
 *
 * Sous prefers-reduced-motion: no-preference, donc l'animation est ce qui
 * s'ajoute et non ce qui doit etre retire.
 */
@media (prefers-reduced-motion: no-preference) {
    .near-me-btn.is-locating .near-me-icon {
        animation: near-me-pulse 1.1s ease-in-out infinite;
    }
}

@keyframes near-me-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}


/* --- Apparitions ---
 *
 * Declarees ici et non sur la page d'accueil : la carte evenement s'en sert sur
 * toutes les pages qui la rendent, et n'y trouvait rien.
 */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* --- Avis d'elargissement du rayon ---
 *
 * L'elargissement automatique doit s'annoncer : un rayon qui grandit en silence
 * ne se distingue pas d'un bug. role="status" plutot que "alert" : c'est une
 * information sur ce qui est affiche, pas une erreur.
 */
.radius-notice {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 0 0 var(--spacing-lg);
    padding: 0.8rem 1rem;
    border: 1px solid rgba(245, 166, 35, 0.3);
    border-left: 3px solid var(--accent-amber);
    border-radius: var(--radius-sm);
    background: rgba(245, 166, 35, 0.08);
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.5;
}

.radius-notice-undo {
    min-height: 44px;
    padding: 0 0.9rem;
    border: 1px solid rgba(245, 166, 35, 0.45);
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--accent-amber);
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
}

.radius-notice-undo:hover,
.radius-notice-undo:focus-visible {
    background: rgba(245, 166, 35, 0.15);
}

/* --- Selecteur de vue ---
 *
 * Liste, carte et calendrier sont trois representations d'un meme ensemble, pas
 * trois pages : le controle vit contre les filtres, la ou l'on regle ce qu'on
 * regarde, et non dans la barre de navigation qui dit ou l'on est.
 */
.view-switcher {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem;
    margin-bottom: var(--spacing-md);
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-pill);
    background: var(--bg-card);
}

.view-switcher-option {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 40px;
    padding: 0 0.9rem;
    border-radius: var(--radius-pill);
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.view-switcher-option svg {
    width: 15px;
    height: 15px;
    flex: none;
}

.view-switcher-option:hover,
.view-switcher-option:focus-visible {
    color: var(--text-primary);
}

/* L'option courante porte un fond ET aria-current : la couleur seule ne
   suffirait pas a dire laquelle est active. */
.view-switcher-option.is-current {
    background: var(--accent-coral);
    color: var(--bg-main);
}

.view-switcher-option:focus-visible {
    outline: 2px solid var(--accent-coral);
    outline-offset: 2px;
}

@media (max-width: 639px) {
    .view-switcher {
        width: 100%;
        justify-content: space-between;
    }

    .view-switcher-option {
        flex: 1 1 0;
        justify-content: center;
        padding: 0 0.5rem;
    }

    .view-switcher-option span {
        font-size: 0.8rem;
    }
}

/* --- Gabarit des pages publiques ---
 *
 * La barre de navigation est en position fixed : sans reserve, le contenu des
 * pages qui n'ont pas de heron -- connexion, inscription, proposition,
 * promotion, profil -- demarrait dessous et son titre passait derriere.
 */
.page-main {
    padding-top: 5.5rem;
    min-height: 60vh;
}

.auth-main {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-bottom: var(--spacing-2xl);
}


/* ===================================================================
   La surface : barre de filtres et liste
   ===================================================================

   Trois pages montrent les mêmes événements — la liste, la carte, les
   festivals — et montraient jusqu'ici les mêmes contrôles depuis deux
   copies du même CSS, écrites en ligne dans chaque gabarit. Les copies
   avaient divergé sans que rien ne le signale : la case « 100 % » de la
   carte avait perdu son `min-height`, ce qui la faisait tomber sous le
   sélecteur des danses et désalignait toute la rangée, et son champ ville
   avait perdu sa largeur minimale. Rien ne cassait, la barre était
   simplement de travers, sur une page seulement.

   Une seule copie, ici. Ce qui reste en ligne dans un gabarit est ce qui
   n'appartient qu'à lui : les halos décoratifs de l'accueil, la feuille
   coulissante de la carte.
   =================================================================== */

.events-date-filter {
    display: flex;
    gap: 1rem;
    align-items: flex-end;
    flex-wrap: wrap;
}

.date-field,
.dance-field,
.location-field,
.radius-field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.date-field label,
.dance-field label,
.location-field label,
.radius-field label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 500;
}

.radius-field select:disabled,
.dance-exclusive input:disabled + label {
    opacity: 0.45;
    cursor: not-allowed;
}

.date-field input,
.dance-field select,
.location-field input,
.radius-field select {
    padding: 0.6rem 1rem;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    color: var(--text-primary);
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
    min-height: 44px;
    color-scheme: dark;
}

.date-field input:focus,
.location-field input:focus {
    outline: none;
    border-color: var(--accent-coral);
    box-shadow: 0 0 0 3px var(--accent-coral-light);
}

.dance-exclusive {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    /* Hauteur d'un controle, pour que la case s'aligne avec les selects et les
       champs de la rangee plutot que de flotter sous celui des danses. */
    min-height: 44px;
}

.dance-exclusive input[type="checkbox"] {
    width: 22px;
    height: 22px;
    margin: 0;
    flex: 0 0 auto;
    accent-color: var(--accent-coral);
    cursor: pointer;
}

.dance-exclusive input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--accent-coral);
    outline-offset: 2px;
}

.dance-exclusive label {
    display: flex;
    align-items: center;
    min-height: 44px;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-primary);
    text-transform: none;
    letter-spacing: normal;
    white-space: nowrap;
    cursor: pointer;
}

.dance-exclusive input[type="checkbox"]:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

.dance-exclusive:has(input[type="checkbox"]:disabled) label {
    cursor: not-allowed;
    color: var(--text-secondary);
    opacity: 0.6;
}

.location-field {
    position: relative;
    min-width: 160px;
}

.location-field input {
    cursor: text;
}

.city-suggestions {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    overflow: hidden;
    z-index: 100;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.city-suggestion-item {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    /* La hauteur d'une cible tactile. Elle ne figurait que dans la copie de la
       carte : sur l'accueil, une suggestion de ville faisait 38 px de haut et
       se manquait au doigt. */
    min-height: 44px;
    justify-content: center;
    padding: 0.6rem 1rem;
    cursor: pointer;
    transition: background 0.15s ease;
    border-bottom: 1px solid var(--border-subtle);
}

.city-suggestion-item:last-child {
    border-bottom: none;
}

.city-suggestion-item:hover,
.city-suggestion-item.active {
    background: var(--accent-coral-light);
}

.city-suggestion-name {
    font-size: 0.9rem;
    color: var(--text-primary);
    font-weight: 500;
}

.city-suggestion-item:hover .city-suggestion-name,
.city-suggestion-item.active .city-suggestion-name {
    color: var(--accent-coral);
}

.city-suggestion-context {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.filter-clear-btn {
    padding: 0.6rem 1.2rem;
    background: transparent;
    border: 1px solid var(--border-medium);
    border-radius: 8px;
    color: var(--text-secondary);
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    min-height: 44px;
}

.filter-clear-btn:hover {
    border-color: var(--accent-coral);
    color: var(--accent-coral);
    background: var(--accent-coral-light);
}

.near-me-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    width: 44px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--border-medium);
    border-radius: 8px;
    color: var(--text-secondary);
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    min-height: 44px;
}

/* `hidden` ne fait rien face à un display explicite : sans cette règle le
   bouton reste visible alors que le HTML le déclare masqué. */
.filter-clear-btn[hidden] {
    display: none;
}

.near-me-btn[hidden] {
    display: none;
}

.near-me-btn:hover:not(:disabled) {
    border-color: var(--accent-coral);
    color: var(--accent-coral);
    background: var(--accent-coral-light);
}

.near-me-btn:focus-visible {
    outline: 2px solid var(--accent-coral);
    outline-offset: 2px;
}

.near-me-btn:disabled {
    cursor: progress;
    opacity: 0.7;
}

.near-me-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

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

.near-me-status {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    margin: 0;
    min-width: 100%;
    width: max-content;
    max-width: 240px;
    font-size: 0.75rem;
    line-height: 1.35;
    color: var(--text-secondary);
}

.near-me-status[data-state="error"] {
    color: var(--accent-coral);
}

/* Les états de focus venaient de la copie de la carte, qui était la plus
   complète des deux : un champ mis au point ne se signalait pas du tout
   sur l'accueil. */

.date-field input:focus,
.location-field input:focus,
.dance-field select:focus,
.radius-field select:focus {
    outline: none;
    border-color: var(--accent-coral);
    box-shadow: 0 0 0 3px var(--accent-coral-light);
}

.filter-clear-btn:focus-visible {
    border-color: var(--accent-coral);
    color: var(--accent-coral);
    background: var(--accent-coral-light);
}

.near-me-status:empty {
    display: none;
}

/* --- La liste elle-même : rangées, séparateurs de jour, pagination ---

   Partagée par l'accueil et la page des festivals, qui affichent le même
   objet avec le même composant. --- */

.events-list {
    padding: 2.25rem 3rem 4rem;
    position: relative;
    /* Les halos decoratifs ci-dessous depassent du conteneur de 30 a 100 px.
       body { overflow-x: hidden } le cachait a l'oeil, mais le document restait
       plus large que la fenetre : la barre de navigation, en position fixed,
       s'etirait sur cette largeur et sortait de l'ecran sur mobile.
       clip plutot que hidden : hidden creerait un conteneur de defilement et
       casserait toute position sticky posee plus tard ici. */
    overflow-x: clip;
}

.events-header {
    max-width: 1000px;
    margin: 0 auto 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    position: relative;
    z-index: 1;
}

.events-header h2 {
    font-family: 'Bebas Neue', Impact, sans-serif;
    font-size: 2.5rem;
    letter-spacing: 0.02em;
    color: var(--text-primary);
    margin: 0;
}

.events-scroll {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    position: relative;
    z-index: 1;
}

.noscript-pagination {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    padding: 2rem 0;
    flex-wrap: wrap;
}

.noscript-pagination a {
    color: var(--accent-coral);
    text-decoration: none;
    padding: 0.25rem 0.5rem;
}

.noscript-pagination a:hover {
    text-decoration: underline;
}

.noscript-pagination-current {
    font-weight: bold;
    color: var(--text-primary);
    padding: 0.25rem 0.5rem;
}

.event-list-sentinel {
    text-align: center;
    padding: 1.5rem;
}

.loading-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    gap: 0.5rem;
}

.event-load-more-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0.6rem 1.75rem;
    border: 1px solid var(--accent-coral);
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--accent-coral);
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: background-color 0.25s ease, color 0.25s ease;
}

.event-load-more-btn:hover,
.event-load-more-btn:focus-visible {
    background: var(--accent-coral);
    color: #0d0d0d;
}

.event-list-sentinel .htmx-indicator {
    display: none;
    margin-top: 0.75rem;
}

.event-list-sentinel .htmx-indicator.htmx-request {
    display: flex;
}

.day-separator {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.5rem 0 0.5rem 0;
    margin-top: 0.5rem;
}

.day-separator:first-child {
    padding-top: 0;
    margin-top: 0;
}

.day-separator-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-coral);
    flex-shrink: 0;
}

.day-separator-label {
    font-family: 'Bebas Neue', Impact, sans-serif;
    font-size: 0.95rem;
    letter-spacing: 0.05em;
    color: var(--text-primary);
    text-transform: uppercase;
    white-space: nowrap;
}

.day-separator::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--accent-coral) 0%, transparent 100%);
    opacity: 0.3;
}

/* --- Ce que la feuille coulissante de la carte impose en plus ---

   Sur mobile les filtres vivent dans une feuille étroite, où chaque
   contrôle prend sa propre ligne. Ces règles sont déclarées comme des
   surcharges, et non comme une seconde définition des contrôles : c'est
   cette seconde définition qui avait dérivé la première fois. --- */

@media (max-width: 1023px) {
    .map-filters-sheet .radius-field {
        flex: 1 1 100%;
    }

    .map-filters-sheet .filter-clear-btn {
        flex: 1 1 auto;
    }

    .map-filters-sheet .near-me-btn {
        flex: 0 0 auto;
    }

    .map-filters-sheet .near-me-status {
        position: static;
        flex: 1 1 100%;
        min-width: 0;
        max-width: none;
    }
}



/* --- L'en-tête de la page des festivals ---

   Même cadre que la liste de l'accueil : 1000 px centrés, pour que le titre,
   les filtres et les cartes soient sur le même axe. Sans cela, la barre de
   filtres partait se coller au bord gauche pendant que les cartes restaient
   centrées, et rien ne semblait appartenir à la même page. --- */

.festivals-header,
.festivals-main .events-date-filter {
    max-width: 1000px;
    margin-right: auto;
    margin-left: auto;
    position: relative;
    z-index: 1;
}

.festivals-header {
    margin-bottom: 1.5rem;
}

.festivals-header h1 {
    margin: 0;
    font-family: 'Bebas Neue', Impact, sans-serif;
    font-size: clamp(2.75rem, 7vw, 4rem);
    line-height: 1;
    letter-spacing: 0.02em;
    color: var(--text-primary);
}

.festivals-intro {
    margin: 0.5rem 0 0;
    color: var(--text-secondary);
}

.festivals-main .events-date-filter {
    margin-bottom: 2rem;
}


/* --- La fin de la liste ---

   Une liste qui s'arrête sans rien dire se lit comme une pagination cassée,
   surtout quand elle se remplit exactement : douze cartes, une page pleine, et
   plus de bouton. Cette ligne dit ce qui borne la liste et pose la sortie à
   côté. --- */

.event-list-end {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.25rem 1rem;
    max-width: 1000px;
    margin: 1.5rem auto 0;
    padding: 1.25rem 1rem 0;
    border-top: 1px solid var(--border-subtle);
    color: var(--text-muted);
    font-size: 0.9rem;
    text-align: center;
    position: relative;
    z-index: 1;
}

.event-list-end-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--accent-coral);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

.event-list-end-link:hover,
.event-list-end-link:focus-visible {
    border-bottom-color: currentColor;
}