/* ==========================================================================
   Bloc Sélection
   Titre + onglets horizontaux cliquables ; chaque onglet remonte jusqu'à 4
   fiches d'une sélection APIDAE (cartes style Agenda, .agendaList réutilisée).

   - Onglets = boutons CTA modernes (mêmes que le bloc Encart) : .verdon-cta
     (teal plein) pour l'onglet ACTIF, .verdon-cta-outline (blanc/contour) pour
     les inactifs. Effets : slide du dégradé + glow souris (js/bloc-selection.js).
   - Fond teinté (couleur_fond = blocFond) => mode "encart" : conteneur centré,
     largeur limitée, padding, border-radius, ombre douce (pas pleine largeur).

   IMPORTANT : ce bloc N'UTILISE PAS les classes .contenuOnglets / .onglets_btns
   / .onglets_contents pour ne PAS être capté par le handler global de
   js/scripts.js (qui ajoute buttonPrimary/buttonSecondary). Le toggle est géré
   par js/bloc-selection.js sur les classes propres .bloc-selection__*.

   Design system : palette teal, border-radius 3px, DM Serif / DM Sans.
   ========================================================================== */

.bloc-selection {
    --sel-teal:       #1F5C56;
    --sel-teal-mid:   #2D7A72;
    --sel-teal-light: #3A9C92;
    --sel-teal-rgb:   58, 156, 146;
    --sel-text:       #0F2E2A;
    --sel-font-body:  'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --sel-font-title: 'DM Serif Display', Georgia, serif;
    --sel-radius:     3px;
    --sel-ease:       cubic-bezier(0.22, 1, 0.36, 1);
    --sel-indent:     3rem;        /* décalage onglets/cards vs titre */
    --sel-card-img-w: 15rem;       /* largeur de l'image portrait des cards */

    /* Espacements top-level harmonisés (cf. autres blocs) */
    padding: 5rem 2rem;
}

@media (max-width: 900px) {
    .bloc-selection { padding: 3.5rem 2rem; }
}

@media (max-width: 700px) {
    .bloc-selection { padding: 2.5rem 2rem; }
}

/* Conteneur interne : centré, largeur maîtrisée */
.bloc-selection__inner {
    margin: 0 auto;
    max-width: 1100px;
    width: 100%;
}

/* ---- Mode ENCART (fond teinté centré, pas pleine largeur) ----------------- */
.bloc-selection--encart .bloc-selection__inner {
    background: linear-gradient(160deg,
            rgba(var(--sel-teal-rgb), 0.10) 0%,
            rgba(var(--sel-teal-rgb), 0.05) 100%);
    border: 1px solid rgba(var(--sel-teal-rgb), 0.18);
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(var(--sel-teal-rgb), 0.12);
    padding: clamp(2rem, 3vw, 3.5rem);
}

/* ---- Header (titre + lien optionnel juste à la suite) --------------------- */
.bloc-selection__header {
    display: flex;
    align-items: baseline;         /* le lien s'aligne sur la ligne de base du titre */
    flex-wrap: wrap;
    gap: 0.6rem 1.4rem;
    margin-bottom: 3.5rem;         /* plus d'air sous le header */
}

/* Séparateur élégant entre le titre et le lien (barre verticale teal fine) */
.bloc-selection__header .bloc-selection__titre-lien::before {
    content: '';
    display: inline-block;
    width: 1px;
    height: 1.4rem;
    margin-right: 1.4rem;
    background: rgba(var(--sel-teal-rgb), 0.35);
    vertical-align: middle;
    transform: translateY(1px);
}

.bloc-selection__titre {
    margin: 0;
    font-family: var(--sel-font-title);
    font-size: clamp(28px, 2.2vw + 16px, 48px);
    font-weight: 600;
    line-height: 1.1;
    color: var(--sel-teal);
    letter-spacing: -0.01em;
}

/* Lien à droite du titre — design fil d'ariane (.verdon-breadcrumbs__item a)
   mais en TEAL FONCÉ : underline animé gauche->droite au hover. */
.bloc-selection__titre-lien {
    position: relative;
    display: inline-block;
    flex: 0 0 auto;
    color: var(--sel-teal);               /* teal foncé */
    font-family: var(--sel-font-body);
    font-size: 1.5rem;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s ease;
}

.bloc-selection__titre-lien span {
    position: relative;
}

.bloc-selection__titre-lien span::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 2px;
    background: var(--sel-teal);           /* trait teal foncé */
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

.bloc-selection__titre-lien:hover,
.bloc-selection__titre-lien:focus {
    color: var(--sel-teal-mid);
}

.bloc-selection__titre-lien:hover span::after,
.bloc-selection__titre-lien:focus span::after {
    transform: scaleX(1);
}

/* Décalage à droite des onglets + cartes par rapport au titre (effet design) */
.bloc-selection__tabs,
.bloc-selection__panels {
    margin-left: var(--sel-indent);
    width: calc(100% - var(--sel-indent));
}

/* ---- Onglets : rangée horizontale de boutons CTA -------------------------- */
.bloc-selection__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 3rem;
    padding: 0;
    list-style: none;
}

/* ---- Indicateur de défilement auto (visible seulement si autoplay) --------
   Injecté par js/bloc-selection.js DANS la barre d'actions du panneau actif,
   à GAUCHE du bouton (en bas à droite du bloc). */
.bloc-selection__autoplay {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1 1 auto;               /* prend TOUTE la largeur dispo jusqu'au bouton */
    min-width: 0;
    margin-right: auto;          /* pousse le bouton à droite */
}

/* Barre de progression (timing du prochain changement) */
.bloc-selection__autoplay-track {
    position: relative;
    flex: 1 1 auto;
    height: 3px;
    border-radius: 3px;
    background: rgba(var(--sel-teal-rgb), 0.15);
    overflow: hidden;
}

.bloc-selection__autoplay-bar {
    position: absolute;
    inset: 0;
    transform-origin: left;
    transform: scaleX(0);
    background: linear-gradient(to right, var(--sel-teal-mid), var(--sel-teal-light));
    border-radius: inherit;
}

@keyframes bloc-selection-autoplay {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

/* Dots de position (onglet courant) */
.bloc-selection__autoplay-dots {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

.bloc-selection__autoplay-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(var(--sel-teal-rgb), 0.25);
    transition: background 0.3s var(--sel-ease), transform 0.3s var(--sel-ease);
}

.bloc-selection__autoplay-dot.is-active {
    background: var(--sel-teal);
    transform: scale(1.35);
}

/* Autoplay stoppé (clic user) : on estompe l'indicateur */
.bloc-selection__autoplay.is-stopped {
    opacity: 0.35;
}

.bloc-selection__autoplay.is-stopped .bloc-selection__autoplay-bar {
    animation: none !important;
    transform: scaleX(0);
}

.bloc-selection__tab {
    display: flex;
    align-items: stretch;
    justify-content: center;
    margin: 0;
}

/* === Bouton CTA d'onglet — réplique de .bloc-encart__cta =================== */
.bloc-selection__cta {
    position: relative;
    z-index: 1;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
    padding: 13px 28px;
    border: none;
    border-radius: var(--sel-radius);
    font-family: var(--sel-font-body);
    font-size: 14px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    text-decoration: none;
    color: #fff;
    cursor: pointer;
    overflow: hidden;
    isolation: isolate;
    background-size: 200% 100%;
    background-position: 0% 0%;
    transition: background-position 0.45s ease, transform 0.12s ease, box-shadow 0.25s ease;
    white-space: nowrap;
}

/* Glow radial qui suit la souris (--mx/--my via js/bloc-selection.js) */
.bloc-selection__cta::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%),
            rgba(255, 255, 255, 0.18) 0%,
            transparent 55%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 0;
}

.bloc-selection__cta:hover,
.bloc-selection__cta:focus {
    background-position: 100% 0%;
    color: #fff;
}

.bloc-selection__cta:hover::before {
    opacity: 1;
}

.bloc-selection__cta:active {
    transform: scale(0.97);
    filter: brightness(0.88);
}

/* Contenu (picto + libellé) au-dessus du glow */
.bloc-selection__tab-label {
    position: relative;
    z-index: 1;
    white-space: nowrap;
}

.bloc-selection__tab-picto {
    height: 1.8rem;
    width: auto;
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
}

/* --- VARIANTE pleine (onglet ACTIF) : teal --- */
.bloc-selection__cta.verdon-cta {
    background-color: var(--sel-teal);
    background-image: linear-gradient(to right,
            var(--sel-teal-mid) 0%,
            var(--sel-teal) 50%,
            #143F3A 100%);
    color: #fff;
}

.bloc-selection__cta.verdon-cta:focus-visible {
    outline: 2px solid var(--sel-teal);
    outline-offset: 3px;
}

/* picto blanc sur fond plein */
.bloc-selection__cta.verdon-cta .bloc-selection__tab-picto {
    filter: brightness(0) invert(1);
}

/* --- VARIANTE outline (onglet INACTIF) : blanc/contour teal --- */
.bloc-selection__cta.verdon-cta-outline {
    background-color: #fff;
    background-image: none;
    border: 2px solid var(--sel-teal-light);
    color: var(--sel-teal-mid);
    padding: 11px 26px; /* compense la bordure 2px */
}

/* Glow teal (au lieu du blanc) sur l'outline */
.bloc-selection__cta.verdon-cta-outline::before {
    background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%),
            rgba(var(--sel-teal-rgb), 0.08) 0%,
            transparent 60%);
}

.bloc-selection__cta.verdon-cta-outline:hover,
.bloc-selection__cta.verdon-cta-outline:focus {
    background-color: rgba(var(--sel-teal-rgb), 0.06);
    border-color: var(--sel-teal-mid);
    color: var(--sel-teal);
}

.bloc-selection__cta.verdon-cta-outline:focus-visible {
    outline: 2px solid var(--sel-teal-light);
    outline-offset: 3px;
}

/* --- VARIANTE grise (bouton d'action) --- */
.bloc-selection__cta.verdon-cta--grey {
    background-color: #6b6b6b;
    background-image: linear-gradient(to right, #4a4a4a 0%, #6b6b6b 50%, #2e2e2e 100%);
    color: #fff;
}
.bloc-selection__cta.verdon-cta--grey:focus-visible {
    outline: 2px solid #2e2e2e;
    outline-offset: 3px;
}

/* --- VARIANTE orange (bouton d'action) --- */
.bloc-selection__cta.verdon-cta--orange {
    background-color: #E8833A;
    background-image: linear-gradient(to right, #D4722D 0%, #E8833A 50%, #B85F1E 100%);
    color: #fff;
}
.bloc-selection__cta.verdon-cta--orange:focus-visible {
    outline: 2px solid #E8833A;
    outline-offset: 3px;
}

/* ---- Bouton d'action : FIXE en bas à droite de la zone panneaux -----------
   Le panneau est un flex colonne (hauteur = grille) ; margin-top:auto colle le
   bouton tout en bas → il ne bouge plus selon le nombre de cartes de l'onglet.
   Placé DANS le panneau (qui porte déjà le décalage --sel-indent). */
.bloc-selection__actions {
    display: flex;
    align-items: center;           /* indicateur (gauche) aligné au bouton (droite) */
    justify-content: flex-end;
    gap: 1.5rem;
    margin-top: auto;              /* pousse la barre d'actions en bas */
    padding-top: 2.5rem;          /* garde un espace mini au-dessus */
    width: 100%;
}

.bloc-selection__cta--action {
    min-width: 220px;
    text-decoration: none;
}

/* ---- Panneaux + animation de transition entre onglets ---------------------
   Tous les panneaux sont EMPILÉS dans la même cellule d'une grille 1x1 : le
   conteneur prend alors la hauteur du panneau le PLUS GRAND et ne « saute » plus
   au changement d'onglet (les onglets avec 1 ou 4 cartes réservent la même
   hauteur). Les panneaux inactifs restent dans le flux (pour dicter la hauteur)
   mais sont masqués visuellement + retirés de l'interaction.
   (margin-left + width gérés par la règle groupée .__tabs,.__panels plus haut) */
.bloc-selection__panels {
    display: grid;
    grid-template-columns: 1fr;
    padding: 0;
    list-style: none;
}

.bloc-selection__panel {
    grid-area: 1 / 1;              /* tous superposés au même endroit */
    /* Flex colonne : pousse le bouton (.bloc-selection__actions) tout en bas via
       margin-top:auto. Tous les panneaux s'étirant sur la même hauteur de grille,
       le bouton reste FIXE en bas à droite quel que soit le nombre de cartes. */
    display: flex;
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(12px);
    transition: opacity 0.4s var(--sel-ease), transform 0.4s var(--sel-ease), visibility 0s linear 0.4s;
}

.bloc-selection__panel.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition: opacity 0.45s var(--sel-ease), transform 0.45s var(--sel-ease);
    z-index: 1;
}

/* Cascade : les cartes du panneau actif apparaissent les unes après les autres */
.bloc-selection__panel.active .agendaInfo {
    animation: bloc-selection-card-in 0.5s var(--sel-ease) both;
}
.bloc-selection__panel.active .agendaInfo:nth-child(1) { animation-delay: 0.04s; }
.bloc-selection__panel.active .agendaInfo:nth-child(2) { animation-delay: 0.10s; }
.bloc-selection__panel.active .agendaInfo:nth-child(3) { animation-delay: 0.16s; }
.bloc-selection__panel.active .agendaInfo:nth-child(4) { animation-delay: 0.22s; }

@keyframes bloc-selection-card-in {
    from { opacity: 0; transform: translateY(16px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ==========================================================================
   Cartes — design custom du bloc Sélection
   On réutilise le markup d'agendaitem.php (.agendaInfo / .agendaLink / .agendaImage
   / .agendaType / .agendaInfos / .agendaDate / .agendaNom / .agendaVille /
   .agendaExtrait) mais on le restyle entièrement, scopé sous .bloc-selection :
   - cartes plus petites,
   - DATE déplacée en overlay sur l'image (à la place du badge .agendaType),
     encart teal foncé, police des boutons (DM Sans),
   - infos à droite = titre (DM Serif teal foncé) + localisation avec icône,
   - extrait masqué.
   ========================================================================== */
.bloc-selection .agendaList.bloc-selection__cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem;                   /* plus d'air entre les cartes */
    padding: 0;
}

/* La carte = repère de positionnement pour le badge date en overlay.
   align-items: stretch pour que l'image portrait prenne toute la hauteur. */
.bloc-selection .bloc-selection__cards .agendaLink {
    position: relative;
    align-items: stretch;
    background: #fff;
    border-radius: var(--sel-radius);
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(var(--sel-teal-rgb), 0.08);
    transition: box-shadow 0.3s var(--sel-ease), transform 0.3s var(--sel-ease);
}

.bloc-selection .bloc-selection__cards .agendaLink:hover {
    background: #fff;
    box-shadow: 0 10px 26px rgba(var(--sel-teal-rgb), 0.18);
    transform: translateY(-4px);
}

/* --- Image format PORTRAIT (cartes plus grandes) --- */
.bloc-selection .bloc-selection__cards .agendaImage {
    flex: 0 0 auto;
    align-self: stretch;           /* l'image prend toute la hauteur de la carte */
    overflow: hidden;
}

.bloc-selection .bloc-selection__cards .agendaImage picture {
    display: block;
    width: var(--sel-card-img-w);
    height: 100%;
    min-height: 20rem;             /* hauteur portrait mini si le texte est court */
}

.bloc-selection .bloc-selection__cards .agendaImage img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s var(--sel-ease);
}

.bloc-selection .bloc-selection__cards .agendaLink:hover .agendaImage img {
    transform: scale(1.05);
}

/* --- On masque le badge TYPE (remplacé par la date) et l'extrait --- */
.bloc-selection .bloc-selection__cards .agendaType,
.bloc-selection .bloc-selection__cards .agendaExtrait {
    display: none;
}

/* --- DATE : encart carré posé en overlay en BAS de l'image, sans icône. ---
   Numéro du jour en gros à gauche, jour de semaine + mois empilés à droite.
   Positionné par rapport à .agendaLink (position: relative). */
.bloc-selection .bloc-selection__cards .agendaDate {
    position: absolute;
    left: 0.6rem;
    bottom: 0.6rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.96);
    border-radius: 3px;
    box-shadow: 0 3px 10px rgba(15, 46, 42, 0.22);
    backdrop-filter: blur(3px);
    color: var(--sel-teal);
    font-family: var(--sel-font-body);
    line-height: 1;
}

/* Numéro du jour — gros, à gauche */
.bloc-selection__date-jour {
    font-size: 2.6rem;
    font-weight: 700;
    line-height: 0.9;
    color: var(--sel-teal);
}

/* Bloc jour de semaine + mois — empilé à droite */
.bloc-selection__date-detail {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.bloc-selection__date-semaine {
    font-size: 1.15rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--sel-teal-mid);
}

.bloc-selection__date-mois {
    font-size: 1.3rem;
    font-weight: 700;
    text-transform: capitalize;
    color: var(--sel-teal);
}

/* --- INFOS à droite : compactes --- */
.bloc-selection .bloc-selection__cards .agendaInfos {
    flex: 1;
    padding: 1rem 1.1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.4rem;
}

/* Titre : DM Serif, teal foncé */
.bloc-selection .bloc-selection__cards .agendaNom {
    font-family: var(--sel-font-title);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--sel-teal);               /* teal foncé */
    letter-spacing: -0.01em;
}

/* Localisation : icône pin + ville */
.bloc-selection .bloc-selection__cards .agendaVille {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0;
    font-family: var(--sel-font-body);
    font-size: 16px;
    color: var(--sel-teal-mid);
    text-transform: none;
}

.bloc-selection .bloc-selection__cards .agendaVille strong {
    font-weight: 500;
}

/* Petit pin SVG inline (teal) devant la ville */
.bloc-selection .bloc-selection__cards .agendaVille::before {
    content: '';
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    background-color: var(--sel-teal-light);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8.1 2 5 5.1 5 9c0 5.2 7 13 7 13s7-7.8 7-13c0-3.9-3.1-7-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8.1 2 5 5.1 5 9c0 5.2 7 13 7 13s7-7.8 7-13c0-3.9-3.1-7-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.bloc-selection__empty {
    color: var(--sel-text);
    font-family: var(--sel-font-body);
    padding: 1rem 0;
}

/* ---- Responsive ----------------------------------------------------------- */
@media (max-width: 900px) {
    .bloc-selection {
        --sel-indent: 1.5rem;      /* décalage réduit */
    }
    .bloc-selection--encart .bloc-selection__inner {
        border-radius: 12px;
    }
}

@media (max-width: 700px) {
    .bloc-selection {
        --sel-indent: 0rem;        /* pas de décalage en mobile */
        --sel-card-img-w: 11rem;   /* image + badge date suivent */
    }
    .bloc-selection .agendaList.bloc-selection__cards {
        grid-template-columns: 1fr;
    }
    .bloc-selection__cta {
        white-space: normal;
    }
    /* Image portrait un peu plus compacte en mobile */
    .bloc-selection .bloc-selection__cards .agendaImage picture {
        min-height: 15rem;
    }
    .bloc-selection--encart .bloc-selection__inner {
        padding: 1.5rem;
        border-radius: 10px;
    }
}

/* ---- Accessibilité -------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .bloc-selection__cta,
    .bloc-selection__cta::before {
        transition: none !important;
        background-size: 100% 100% !important;
    }
    .bloc-selection__cta::before {
        display: none !important;
    }
    .bloc-selection__cta:active {
        transform: none !important;
        filter: none !important;
    }
    /* Désactive les animations de transition d'onglets / cartes */
    .bloc-selection__panel {
        transition: none !important;
        transform: none !important;
    }
    .bloc-selection__panel.active,
    .bloc-selection__panel.active .agendaInfo {
        animation: none !important;
        transform: none !important;
    }
    .bloc-selection .bloc-selection__cards .agendaLink,
    .bloc-selection .bloc-selection__cards .agendaImage img {
        transition: none !important;
    }
    .bloc-selection .bloc-selection__cards .agendaLink:hover {
        transform: none !important;
    }
}