/* ============================================================================
   visites-tabs.css
   ----------------------------------------------------------------------------
   Styles propres à la page "À faire, à voir" (visites + carte interactive).
   Extrait du <style> inline pour respecter la CSP "no inline".
   Partagé entre la version FR (/applications/visites/) et EN (/en/activities/).
   ============================================================================ */

.item-date {
        margin: 6px 0 10px;
        font-size: 0.95rem;
        font-weight: 600;
        color: #6f5a3a;
}

.intro-seo-texte {
        font-size: 1.1rem;
        color: #4a4a4a;
        line-height: 1.6;
}

/* === Onglets Liste / Carte ============================ */
.visites-tabs {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin: 20px 0 18px;
        border-bottom: 1px solid rgba(47, 47, 47, 0.18);
        padding-bottom: 0;
}
.visites-tab {
        appearance: none;
        border: 1px solid rgba(47, 47, 47, 0.22);
        border-bottom: none;
        border-radius: 12px 12px 0 0;
        background: #fffaf1;
        color: #2f2f2f;
        padding: 10px 18px;
        font-weight: 700;
        font-size: 1rem;
        cursor: pointer;
        margin-bottom: -1px;
}
.visites-tab:hover,
.visites-tab:focus-visible {
        background: #f1e0c4;
        outline: none;
}
.visites-tab.is-active {
        background: #2f2f2f;
        color: #fff;
        border-color: #2f2f2f;
}
.visites-panel[hidden],
.list[hidden] { display: none !important; }

/* Boutons de super-zone (Neufchâtel / Seine-Maritime) sur la carte */
.visites-map-filter--zone {
        font-weight: 700;
}
.visites-map-filter--zone.is-active {
        background: #6b4f2b;
        border-color: #6b4f2b;
        color: #fff;
}

/* === Anti-FOUC carte ============================
   Si <html class="visites-on-carte"> (posé par le script du <head>)
   on inverse l'affichage des panels AVANT le premier paint pour
   éviter de voir l'onglet Liste pendant ~250 ms. */
html.visites-on-carte #visites-panel-liste { display: none !important; }
html.visites-on-carte #visites-panel-carte[hidden] { display: block !important; }
html.visites-on-carte #visites-tab-liste {
        background: #fffaf1 !important;
        color: #2f2f2f !important;
        border-color: rgba(47, 47, 47, 0.22) !important;
}
html.visites-on-carte #visites-tab-carte {
        background: #2f2f2f !important;
        color: #fff !important;
        border-color: #2f2f2f !important;
}
/* Sur l'onglet Carte : la barre des catégories du haut est
   masquée — on a déjà les filtres de zone dans la carte. */
html.visites-on-carte .cats { display: none; }

/* === Titre de la carte + bouton info ouvrant un <dialog> === */
.visites-carte__heading {
        display: flex;
        align-items: center;
        gap: 10px;
}
.visites-carte__info-btn {
        appearance: none;
        width: 26px;
        height: 26px;
        padding: 0;
        border: none;
        border-radius: 50%;
        background: #3b82f6;
        color: #fff;
        font-weight: 800;
        font-size: 1.05rem;
        line-height: 1;
        cursor: pointer;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}
.visites-carte__info-btn:hover,
.visites-carte__info-btn:focus-visible {
        background: #2563eb;
        outline: none;
}
.visites-carte__dialog {
        max-width: 540px;
        width: 90vw;
        padding: 24px 28px;
        border: 1px solid rgba(0, 0, 0, 0.12);
        border-radius: 16px;
        background: #fffaf1;
        color: #2f2f2f;
        box-shadow: 0 24px 48px rgba(0, 0, 0, 0.28);
}
.visites-carte__dialog::backdrop {
        background: rgba(0, 0, 0, 0.45);
}
.visites-carte__dialog-title {
        margin: 0 0 12px;
        font-size: 1.2rem;
        color: #2f2f2f;
}
.visites-carte__dialog p {
        margin: 0 0 14px;
        line-height: 1.55;
}
.visites-carte__dialog ul {
        margin: 0 0 14px;
        padding-left: 22px;
        line-height: 1.55;
}
.visites-carte__dialog li {
        margin-bottom: 4px;
}
.visites-carte__dialog-actions {
        text-align: right;
        margin: 0;
}
.visites-carte__dialog-close {
        appearance: none;
        border: 1px solid rgba(47, 47, 47, 0.22);
        background: #fff;
        color: #2f2f2f;
        padding: 8px 18px;
        border-radius: 999px;
        font-weight: 700;
        cursor: pointer;
}
.visites-carte__dialog-close:hover,
.visites-carte__dialog-close:focus-visible {
        background: #f1e0c4;
        outline: none;
}

.visites-carte {
        margin: 0 0 32px;
        padding: 18px;
        background: rgba(255, 255, 255, 0.76);
        border-radius: 14px;
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
}

.visites-carte h2 {
        margin: 0 0 8px;
        color: #2f2f2f;
}

.visites-carte__intro {
        margin: 0 0 14px;
        color: #4a4a4a;
        line-height: 1.5;
}

#map-activites {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: clamp(480px, 70vh, 800px);
        width: 100%;
        border-radius: 12px;
        background: #ece7dd;
        overflow: hidden;
        color: #4a4035;
        text-align: center;
}

#itineraire-activites {
        display: none;
        max-height: 360px;
        overflow: auto;
        margin-top: 12px;
        padding: 12px;
        background: #fff;
        border-radius: 12px;
}

.item-actions {
        margin-top: 14px;
}

.plan-acces {
        display: inline-block;
        padding: 8px 14px;
        border-radius: 999px;
        background: #f1e9dd;
        color: #2f2f2f;
        font-weight: 700;
        text-decoration: none;
        box-shadow: 0 8px 18px -14px rgba(0, 0, 0, 0.35);
}

.plan-acces:hover,
.plan-acces:focus {
        background: #ddab61;
        color: #111;
}

.item.visite-active {
        outline: 3px solid #d9a441;
        background: rgba(217, 164, 65, 0.12);
        transition: background 0.3s ease, outline 0.3s ease;
}

.visites-map-tools {
        display: grid;
        gap: 14px;
        margin: 14px 0 16px;
}

.visites-map-group {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        align-items: center;
}

/* Astuce flexbox : un <div class="map-row-break"></div> force le retour
   à la ligne dans .visites-map-group (les <br> y sont ignorés). */
.visites-map-group > .map-row-break {
        flex-basis: 100%;
        width: 100%;
        height: 0;
        margin: 0;
        padding: 0;
        border: 0;
}

.visites-map-label {
        margin-right: 4px;
        font-weight: 800;
        color: #2f2f2f;
}

.visites-map-filter,
.visites-map-legend-item {
        appearance: none;
        border: 1px solid rgba(47, 47, 47, 0.22);
        border-radius: 999px;
        background: #fffaf1;
        color: #2f2f2f;
        padding: 8px 12px;
        font-weight: 700;
        cursor: pointer;
        box-shadow: 0 8px 18px -16px rgba(0, 0, 0, 0.35);
}

.visites-map-filter:hover,
.visites-map-filter:focus,
.visites-map-legend-item:hover,
.visites-map-legend-item:focus {
        background: #f1e0c4;
        outline: 3px solid rgba(217, 164, 65, 0.35);
}

.visites-map-filter.is-active,
.visites-map-legend-item.is-active {
        background: #2f2f2f;
        border-color: #2f2f2f;
        color: #fff;
}

.visites-map-legend {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
}

.visites-map-legend-item {
        display: inline-flex;
        align-items: center;
        gap: 8px;
}

.visites-map-dot {
        width: 13px;
        height: 13px;
        border-radius: 50%;
        display: inline-block;
        border: 2px solid #fff;
        box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
}

.visites-map-filter--with-dot {
        display: inline-flex;
        align-items: center;
        gap: 8px;
}

.visites-map-status {
        margin-top: 10px;
        font-weight: 700;
        color: #4a4035;
}

.visites-map-infowindow {
        max-width: 240px;
        color: #1f1f1f;
        line-height: 1.4;
}

.visites-map-infowindow strong {
        display: block;
        margin-bottom: 6px;
        font-size: 1rem;
}

.visites-map-infowindow a {
        color: #174ea6;
        font-weight: 700;
}

@media screen and (max-width: 720px) {
        #map-activites {
                min-height: 360px;
        }

        .visites-map-group {
                align-items: stretch;
        }

        .visites-map-filter,
        .visites-map-legend-item {
                font-size: 0.95rem;
        }
}
