/* ------------------------------------------------------------ */
/* Catalogue des activités ASEP                                  */
/* Couleurs : uniquement les variables de la charte du thème     */
/* (--jaune, --corail, --colart…), jamais de code couleur fixe   */
/* pour les couleurs de la charte.                               */
/* ------------------------------------------------------------ */

.asep-catalogue {
    --asep-texte: #212529;
    --asep-discret: #5c636a;      /* gris lisible sur blanc (contraste 6:1) */
    --asep-bord: #d3d6d9;
    --asep-fond: #f5f5f5;         /* même gris clair que les bandeaux du thème */
    --asep-focus: #0d47a1;
    container-type: inline-size;
    color: var(--asep-texte);
}

/* Texte réservé aux lecteurs d'écran */
.asep-vh {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* - - - Formulaire - - - */

.asep-filtres {
    margin-bottom: 1.5rem;
}

.asep-recherche label,
.asep-groupe legend,
.asep-tri label {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: .4rem;
}

.asep-recherche label {
    display: block;
}

.asep-recherche input {
    width: 100%;
    padding: .7rem 1rem;
    font-size: 1.1rem;
    border: 2px solid var(--asep-bord);
    border-radius: .5rem;
}

.asep-volet {
    margin-top: 1rem;
    border: 1px solid var(--asep-bord);
    border-radius: .5rem;
    background: var(--asep-fond);
}

.asep-volet summary {
    cursor: pointer;
    padding: .75rem 1rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
}

.asep-volet-contenu {
    display: grid;
    gap: 1rem 2rem;
    padding: 0 1rem 1rem;
}

@container (min-width: 700px) {
    .asep-volet-contenu {
        grid-template-columns: 1fr 1fr;
    }
}

.asep-groupe {
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 0;
}

.asep-groupe legend {
    float: none;
    width: auto;
    padding: 0;
}

.asep-age {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .5rem;
}

.asep-age select {
    padding: .3rem .5rem;
    border: 1px solid var(--asep-bord);
    border-radius: .4rem;
}

.asep-aide {
    font-size: .85rem;
    color: var(--asep-discret);
    margin: .4rem 0 0;
}

/* Puces : de vraies cases à cocher, présentées en pastilles */
.asep-puces {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-bottom: .4rem;
}

.asep-puce {
    position: relative;
    margin: 0;
}

.asep-puce input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
}

.asep-puce span {
    display: inline-block;
    padding: .3rem .8rem;
    border: 1px solid var(--asep-bord);
    border-radius: 2rem;
    background: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: .9rem;
    line-height: 1.4;
}

.asep-puce small {
    color: var(--asep-discret);
}

.asep-puce input:checked + span {
    background: var(--asep-couleur, var(--jaune));
    border-color: #212529;
    font-weight: 700;
}

.asep-puce input:checked + span small {
    color: inherit;
}

.asep-puce input:checked + span::before {
    content: "✓ ";
}

.asep-puce input:focus-visible + span,
.asep-catalogue :focus-visible {
    outline: 3px solid var(--asep-focus);
    outline-offset: 2px;
}

.asep-puce-theme i {
    color: #212529;
}

.asep-puces-jours abbr {
    text-decoration: none;
}

/* Barre : compteur, tri, effacement */
.asep-barre {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1.5rem;
    margin-top: 1rem;
}

.asep-compteur {
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 1.1rem;
}

.asep-tri {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.asep-tri label {
    margin: 0;
}

.asep-tri select {
    padding: .3rem;
    border: 1px solid var(--asep-bord);
    border-radius: .4rem;
}

.asep-effacer {
    padding: .35rem .9rem;
    border: 2px solid var(--asep-texte);
    border-radius: .4rem;
    background: #fff;
    color: var(--asep-texte);
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
}

.asep-effacer:hover {
    background: var(--asep-texte);
    color: #fff;
}

.asep-effacer[hidden] {
    display: none;
}

/* - - - Cartes - - - */

.asep-cartes {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
}

.asep-carte[hidden] {
    display: none;
}

.asep-carte-corps {
    position: relative;
    height: 100%;
    padding: 1rem 1rem 1.1rem;
    background: #fff;
    border: 1px solid var(--asep-bord);
    border-top: 6px solid var(--asep-couleur, var(--jaune));
    border-radius: .5rem;
    transition: box-shadow .15s;
}

.asep-carte-corps:hover,
.asep-carte-corps:focus-within {
    box-shadow: 0 .3rem 1rem rgba(0, 0, 0, .15);
}

.asep-carte-theme {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0 0 .5rem;
    font-family: 'Montserrat', sans-serif;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--asep-discret);
}

.asep-pastille {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--asep-couleur, var(--jaune));
    color: #212529;
    font-size: .95rem;
}

.asep-carte-titre {
    font-size: 1.2rem;
    margin: 0 0 .4rem;
}

/* Toute la carte est cliquable, mais un seul lien est annoncé.
   Sélecteur renforcé : le thème colore en bleu les liens de #lescontenus. */
#lescontenus .asep-carte .asep-carte-titre a,
.asep-carte-titre a {
    color: var(--asep-texte);
    text-decoration: none;
}

.asep-carte-titre a::after {
    content: "";
    position: absolute;
    inset: 0;
}

.asep-carte-corps:hover .asep-carte-titre a {
    text-decoration: underline;
}

.asep-carte-resume {
    font-size: .95rem;
    margin: 0 0 .7rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.asep-carte-infos {
    list-style: none;
    margin: 0;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
    font-size: .85rem;
}

.asep-carte-infos li {
    display: flex;
    gap: .5rem;
    padding: .15rem 0;
}

.asep-carte-infos i {
    width: 1rem;
    text-align: center;
    margin-top: .2rem;
    color: var(--asep-discret);
}

/* Offres des associations partenaires : fond teinté aux couleurs des cultures urbaines */
.asep-carte-association .asep-carte-corps {
    background: var(--bleuclair);
    background: color-mix(in srgb, var(--bleuclair) 50%, #fff);
}

.asep-carte-partenaire {
    margin: .6rem 0 0;
    font-family: 'Montserrat', sans-serif;
    font-size: .85rem;
    font-weight: 700;
}

.asep-etat {
    display: inline-block;
    margin: 0 0 .5rem;
    padding: .1rem .5rem;
    border-radius: .3rem;
    background: #212529;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: .8rem;
}

.asep-aucun {
    padding: 1.5rem;
    border: 2px dashed var(--asep-bord);
    border-radius: .5rem;
    text-align: center;
}

@media (prefers-reduced-motion: reduce) {
    .asep-carte-corps {
        transition: none;
    }
}

/* ------------------------------------------------------------ */
/* Fiche activité                                                */
/* ------------------------------------------------------------ */

.asep-fiche {
    --asep-texte: #212529;
    --asep-discret: #5c636a;
    --asep-bord: #d3d6d9;
    --asep-fond: #f5f5f5;
    --asep-focus: #0d47a1;
    max-width: 52rem;
    color: var(--asep-texte);
}

.asep-fiche :focus-visible {
    outline: 3px solid var(--asep-focus);
    outline-offset: 2px;
}

.asep-ariane {
    margin-bottom: 1rem;
    font-family: 'Montserrat', sans-serif;
    font-size: .9rem;
}

.asep-fiche-titre {
    margin: .2rem 0 .5rem;
}

.asep-fiche-partenaire {
    font-style: italic;
    color: var(--asep-discret);
}

.asep-fiche-accroche {
    margin-top: .5rem;
}

.asep-essentiel {
    margin: 1.5rem 0;
    padding: 1.25rem;
    background: var(--asep-fond);
    border-left: 6px solid var(--asep-couleur, var(--jaune));
    border-radius: .5rem;
}

.asep-essentiel dl {
    display: grid;
    gap: 1rem 2rem;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    margin: 0;
}

.asep-essentiel dt {
    font-family: 'Montserrat', sans-serif;
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--asep-discret);
}

.asep-essentiel dt i {
    width: 1rem;
    text-align: center;
}

.asep-essentiel dd {
    margin: .2rem 0 0;
}

.asep-tarifs {
    list-style: none;
    margin: 0;
    padding: 0;
}

.asep-tarifs li + li {
    margin-top: .35rem;
}

.asep-inscription {
    margin: 1.25rem 0 0;
}

/* Le thème donne « color: inherit » aux liens visités : sans :visited ici, le texte
   devenait noir sur fond noir et ne réapparaissait qu'au survol */
.asep-bouton,
a.asep-bouton:visited,
#lescontenus .asep-inscription a.asep-bouton,
#lescontenus .asep-inscription a.asep-bouton:visited {
    display: inline-block;
    padding: .6rem 1.2rem;
    border-radius: .4rem;
    background: var(--asep-texte);
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    text-decoration: none;
}

.asep-bouton:hover,
a.asep-bouton:visited:hover,
#lescontenus .asep-inscription a.asep-bouton:hover {
    background: #000;
    color: #fff;
}

.asep-bouton-neutre {
    background: #fff;
    color: var(--asep-texte);
    border: 2px solid var(--asep-texte);
}

.asep-section {
    margin-top: 2rem;
}

.asep-tableau {
    overflow-x: auto;
}

.asep-tableau table {
    width: 100%;
    border-collapse: collapse;
    font-size: .95rem;
}

.asep-tableau th,
.asep-tableau td {
    padding: .5rem .6rem;
    border-bottom: 1px solid var(--asep-bord);
    text-align: left;
    vertical-align: top;
}

.asep-tableau thead th {
    font-family: 'Montserrat', sans-serif;
    font-size: .85rem;
    border-bottom: 2px solid var(--asep-texte);
}

.asep-tableau tbody th {
    font-family: 'Montserrat', sans-serif;
    white-space: nowrap;
}

.asep-dates {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    list-style: none;
    padding: 0;
}

.asep-dates li {
    padding: .25rem .7rem;
    border: 1px solid var(--asep-bord);
    border-radius: 2rem;
    font-family: 'Montserrat', sans-serif;
    font-size: .9rem;
}

.asep-voisines ul {
    list-style: none;
    padding: 0;
    display: grid;
    gap: .5rem;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
}

.asep-voisines li {
    padding: .6rem .8rem;
    border: 1px solid var(--asep-bord);
    border-left: 5px solid var(--asep-couleur, var(--jaune));
    border-radius: .4rem;
}

.asep-voisines small {
    display: block;
    color: var(--asep-discret);
}

.asep-voisines .asep-voisines-ligne {
    font-size: 1rem;
    margin: 1rem 0 .5rem;
}