.cpt {
    position: relative;
    text-align: center;

    .container {
        position: relative;

        .teaser {
            &.slider_cpt {
                position: relative;

                .teaser__item {
                    border-radius: var(--border-radius);
                    position: relative;
                    /* Pas de width calc() en dur ici : Splide calcule et applique lui-même
                       la largeur de chaque .splide__slide à partir de perPage/gap, y compris
                       à chaque changement de breakpoint (2 puis 1 carte/vue). Une largeur
                       fixée en CSS avec !important désynchronisait les cartes du perPage
                       réellement actif (débordement/rétrécissement aux breakpoints). */

                    .teaser__date {
                        position: absolute;
                        background: var(--color-primary-light);
                        color: var(--white);
                        padding: 8px 16px;
                        border-radius: calc(var(--border-radius) / 2);
                        top: 20px;
                        left: 20px;
                        z-index: 10;
                    }

                    .teaser__link {
                        color: var(--dark);

                        &:hover {
                            color: var(--color-primary-light);
                        }

                        .teaser__text {
                            padding: 32px 0px;
                        }

                        .teaser__image {
                            overflow: hidden;
                            /* border-top-left-radius: var(--border-radius);
                            border-top-right-radius: var(--border-radius);

                            img {
                                border-top-left-radius: var(--border-radius);
                                border-top-right-radius: var(--border-radius);
                            } */
                        }
                    }
                }
            }


            .teaser__item {
                position: relative;
                text-align: left;
                z-index: 2;
                transition: var(--transition);

                &.nopostsfound {
                    justify-self: center;
                    text-align: center;
                    width: 100%;
                }
            }

            .teaser__link {
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-orient: vertical;
                -webkit-box-direction: normal;
                -ms-flex-direction: column;
                flex-direction: column;
                height: 100%;
                overflow: hidden;
                position: relative;
                background-color: var(--white);
                border-radius: var(--border-radius);

                &:hover {
                    .teaser__image img {
                        -webkit-transform: scale(1.1);
                        transform: scale(1.1);
                    }
                }
            }

            .teaser__image {
                overflow: hidden;
                height: 200px;

                img {
                    height: 100%;
                    object-fit: cover;
                    transition: var(--transition);
                    width: 100%;
                }
            }

            /* Dans le slider CPT : image en 16/9 (comme Lovable NewsSlider) */
            &.slider_cpt .teaser__item .teaser__image {
                height: auto;
                aspect-ratio: 16 / 9;
            }

            .teaser__text {
                display: flex;
                flex-direction: column;
                padding: 24px;
                gap: 5px;

                .teaser__category {
                    font-size: 0.75rem;
                    /* text-xs */
                    font-weight: var(--medium);
                    text-transform: uppercase;
                    letter-spacing: 0.08em;
                    color: var(--color-primary);
                }

                .teaser__title {
                    margin: 0;
                    transition: var(--transition);
                    color: var(--color-deep-blue);
                    font-size: 1rem;
                    font-weight: var(--semibold);
                    line-height: 1.35;
                }

                .teaser__date {
                    font-size: 0.75rem;
                    color: var(--color-deep-blue-70);
                }

                .teaser__cta {
                    display: inline-flex;
                    align-items: center;
                    gap: 4px;
                    margin-top: 8px;
                    font-size: 0.875rem;
                    font-weight: var(--semibold);
                    color: var(--color-cta);
                    text-decoration: underline;
                    text-underline-offset: 3px;
                    transition: color 0.2s ease;

                    svg {
                        flex-shrink: 0;
                        transition: transform 0.2s ease;
                    }
                }

                span {
                    color: var(--color-primary);
                    display: flex;
                    align-items: center;
                    gap: 5px;

                    &.teaser__location {
                        padding-left: 3px;
                    }
                }
            }

            &:not(.wrapper_slider):hover .teaser__title {
                color: var(--color-primary);
            }

            &:not(.wrapper_slider):hover .teaser__cta {
                color: var(--color-deep-blue);

                svg {
                    transform: translateX(3px);
                }
            }
        }
    }

    .notfound {
        text-align: center;
    }


    /* ============================================================
   SLIDER CPT ACTUALITÉS — Overrides style Lovable NewsSlider
   Flèches : cercle 48px, bordure orange, fond blanc
   Dots : 8px, deep-blue actif, deep-blue/20 inactif
   ============================================================ */
    .wrapper_slider.slider_cpt {

        /* La config ACF (placement_pagination/alignement_pagination, ex. place_up/align_right)
       continue d'être appliquée en classes sur .wrapper_slider par builder/cpt.php — mais
       ici le positionnement réel du titre + des flèches vient de .cpt__header (vraie ligne
       flex), donc le padding réservé par place_up/place_bottom (pagination_slider.css)
       n'a plus lieu d'être : l'espacement est géré par .cpt__header { margin-bottom }. */
        padding-top: 0;
        padding-bottom: 0;

        /* En-tête : titre (alimenté par le champ ACF "titre", cf. $custom_title) et flèches
       Splide sur une même ligne — "flex items-center justify-between" comme
       NewsSlider.tsx (Lovable). */
        .cpt__header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 24px;
            /* gap-6 Lovable */
            margin-bottom: 48px;
            /* mt-12 Lovable : espace avant le slider */
        }

        /* Les flèches vivent maintenant dans .cpt__header : on neutralise le positionnement
       relatif/absolu hérité de pagination_slider.css (place_up/place_bottom/align_right/
       align_left), devenu inutile et conflictuel avec la ligne flex ci-dessus. Les classes
       ACF restent posées sur .wrapper_slider (mécanisme back-office intact), seul leur
       effet visuel est neutralisé dans ce contexte précis. */
        .cpt__header .splide__arrows {
            position: static;
            inset: auto;
            padding: 0;
        }

        /* Flèches : cercles fins orange, gap et taille calés sur NewsSlider Lovable
       (size-12 = 48px, border 1px, gap-3 = 12px entre les deux boutons). */
        .splide__arrows {
            gap: 12px;
            /* gap-3 Lovable (remplace les 10px génériques de pagination_slider.css) */
        }

        .splide__arrows .splide__arrow--prev,
        .splide__arrows .splide__arrow--next {
            width: 48px;
            height: 48px;
            padding: 0;
            border: 1px solid var(--color-cta) !important;
            /* 1px (border Tailwind par défaut), pas 2px */
            border-radius: 50% !important;
            background-color: transparent !important;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background-color 0.2s ease, border-color 0.2s ease;
            box-shadow: none !important;

            &:hover {
                background-color: var(--color-cta) !important;
            }

            /* Masquer les labels texte "Précédent" / "Suivant" (absents chez Lovable) */
            &::after,
            &::before {
                font-size: 0 !important;
                filter: none !important;
            }
        }

        /* Icône des flèches : même SVG que le badge de la flèche du bouton « Inscription »
       (.hdp.home .section__btn .bouton::after, cf. css/base/haut_de_page_fixe.css —
       flèche diagonale Lucide "ArrowUpRight", ligne 7,17→17,7 + polyline 7,7-17,7-17,17),
       dupliqué dans img/arrow_bouton_inscription.svg pour cohérence visuelle avec le CTA
       du header/hero, au lieu de l'ancien arrow_slider.svg (fill bleu-violet résiduel
       d'un autre thème, jamais recoloré à l'état par défaut). Utilisé en masque CSS pour
       le teinter avec les variables de couleur CERF plutôt que sa couleur native.
       Le tracé pointe nativement au nord-est (45°) : rotate(45deg) → droite (next),
       rotate(225deg) → gauche (prev), même logique de rotation relative qu'avant. */
        .splide__arrow--prev::before,
        .splide__arrow--next::after {
            content: '';
            display: inline-block;
            width: 18px;
            height: 18px;
            background-color: var(--color-cta);
            mask: url('../../img/arrow_bouton_inscription.svg') no-repeat center / contain;
            -webkit-mask: url('../../img/arrow_bouton_inscription.svg') no-repeat center / contain;
            transition: background-color 0.2s ease;
        }

        .splide__arrow--prev::before {
            transform: rotate(225deg);
        }

        .splide__arrow--next::after {
            transform: rotate(45deg);
        }

        .splide__arrow--prev:hover::before,
        .splide__arrow--next:hover::after {
            background-color: var(--white);
        }

        /* Dots de pagination : petits cercles deep-blue */
        .splide__pagination {
            gap: 6px;

            .splide__pagination__page {
                width: 8px;
                height: 8px;
                border-radius: 50%;
                background-color: var(--color-deep-blue-20);
                border: none;
                padding: 0;
                margin: 0;
                opacity: 1;
                transition: background-color 0.2s ease;

                &.is-active {
                    background-color: var(--color-deep-blue);
                    transform: none;
                    width: 8px;
                    height: 8px;
                }
            }
        }

        /* Cards : design "flat" (pas de carte blanche/ombre/padding), calé sur
       NewsSlider Lovable (article group flex flex-col, seule l'image est arrondie). */
        .teaser__item {
            background: transparent;
            border-radius: 0;
            box-shadow: none;
            /* Aucun margin horizontal sur les slides : l'espacement inter-cartes est géré
           exclusivement par l'option "gap" de Splide (cf. _slider.js), jamais par du CSS —
           un margin ici s'ajouterait au calcul de largeur de Splide et ferait déborder la
           dernière carte visible du container. */
            margin-left: 0;
            margin-right: 0;

            .teaser__link {
                background: transparent;
                border-radius: 0;
                box-shadow: none;
                /* mt-5 Lovable : espace entre l'image et le bloc de texte */

                /* .teaser__image et .teaser__text sont nestés sous .teaser__link (et non
               directement sous .teaser__item) pour obtenir une spécificité >= aux règles
               historiques ".teaser.slider_cpt .teaser__item .teaser__link .teaser__image[ img]"
               et "...teaser__text" (7 classes chacune). */
                .teaser__image {
                    border-radius: var(--border-radius-sm);
                    background-color: var(--color-deep-blue-5);

                    img {
                        border-radius: var(--border-radius-sm);
                    }
                }

                .teaser__text {
                    padding: 0;
                    gap: 0;

                    .teaser__category {
                        /* tracking-wider (0.05em), pas 0.08em */
                        letter-spacing: 0.05em;
                    }

                    .teaser__title {
                        margin-top: 12px;
                        /* mt-3 */
                        font-size: 1rem;
                        /* text-base */
                        line-height: 1.375;
                        /* leading-snug */

                        @media (min-width: 768px) {
                            /* md:text-lg */
                            font-size: 16px;
                        }
                    }

                    .teaser__cta {
                        margin-top: 20px;
                        /* mt-5 */
                        gap: 6px;
                        /* gap-1.5 */
                        font-weight: var(--medium);
                        /* font-medium, pas semibold */
                        text-underline-offset: 4px;
                        /* underline-offset-4 */
                        text-decoration-color: color-mix(in srgb, var(--color-cta) 30%, transparent);
                        /* decoration-cerf-orange/30 (30% via var(--color-cta), pas de valeur en dur) */
                        transition: text-decoration-color 0.2s ease, color 0.2s ease;

                        svg {
                            width: 14px;
                            height: 14px;
                            /* size-3.5 */
                        }
                    }
                }

                /* États :hover — déclarés APRÈS .teaser__text pour gagner les égalités
               de spécificité (même compte de classes que les règles par défaut ci-dessus). */
                &:hover .teaser__image img {
                    /* group-hover:scale-105 (au lieu de 1.1) */
                    transform: scale(1.05);
                }

                &:hover .teaser__title {
                    /* pas de changement de couleur du titre au survol dans Lovable */
                    color: var(--color-deep-blue);
                }

                &:hover .teaser__cta {
                    /* la CTA reste orange au survol (pas deep-blue), decoration pleine */
                    color: var(--color-cta);
                    text-decoration-color: var(--color-cta);

                    svg {
                        /* pas de translateX de la flèche dans Lovable */
                        transform: none;
                    }
                }
            }

            /* Badge date en overlay sur l'image : absent du NewsSlider Lovable */
            .teaser__date {
                display: none;
            }

        }
    }

    /* Titre de section "Fil d'infos" :
   le conteneur .section__title générique (section.css) est centré et plafonné à 960px
   (margin:0 auto 50px auto; max-width:960px) — pensé pour des titres de section centrés
   ailleurs dans le thème. Chez Lovable, le h2 "Fil d'infos" est aligné à gauche, pleine
   largeur, sans marge propre (l'espacement avec la suite vient du wrapper du slider,
   cf. place_up dans pagination_slider.css). On neutralise donc ce conteneur ici. */
    .section__title {
        max-width: none;
        margin: 0;
    }

    /* Titre suivi directement d'une grille d'articles/vidéos ou d'une liste de comptes
       rendus (pas d'un slider, dont l'espacement vient du wrapper) : le margin:0 ci-dessus
       collait le titre au bloc (ex. "Rapport annuels", "Série 1", "Actualités").
       Espace de 24px = mb-6 du h2 Lovable. */
    .section__title:has(+ .teaser, + .compte-rendu-list) {
        margin-bottom: 24px;
    }

    /* clamp(1.75rem, 3.5vw, 3rem), bold, deep-blue, tracking-tight (-0.025em, pas -0.02em),
   leading-[1.05] — calé sur le h2 NewsSlider Lovable */
    .section__title h2,
    .section__title .h2_like {
        font-size: clamp(1.75rem, 3.5vw, 3rem);
        font-weight: var(--bold);
        color: var(--color-deep-blue);
        letter-spacing: -0.025em;
        line-height: 1.05;
        margin: 0;
    }

    /* ============================================================
   2e INSTANCE "cpt" — "Dernière publication" (LatestPublication.tsx)
   Layout `cpt` en mode non-slider, sélection manuelle d'1 article (pas de
   grille/slider comme "Fil d'infos") : une grande carte article horizontale.
   Scope : &#derniere-publication, l'ancre posée via le champ ACF commun
   "Identifiant du bloc" (onglet Réglages de CE layout précisément) — ne touche
   pas aux autres instances "cpt" (dont "Fil d'infos", scopée via .slider_cpt).
   ============================================================ */
    &#derniere-publication .teaser.type_post {
        /* Un seul item : pas de grille, l'article prend toute la largeur du container. */
        display: grid;
        /* minmax(0, 1fr) et non 1fr (.grid_layout en mobile) : sinon la colonne ne descend pas sous
           la largeur intrinsèque de l'image et la carte déborde de l'écran en 375 px (05/10/2026). */
        grid-template-columns: minmax(0, 1fr);
        margin-top: 40px;
        gap: 20px;
    }

    &#derniere-publication .teaser__item {
        background: transparent;
    }

    &#derniere-publication .teaser__link {
        display: flex;
        flex-direction: column;
        gap: 24px;
        /* gap-6 */
        overflow: hidden;
        border-radius: 18px;
        /* rounded-2xl */
        background-color: var(--white);
        box-shadow: var(--shadow-teaser);

        @media (min-width: 768px) {
            flex-direction: row;
            gap: 32px;
            /* gap-8 */
        }

        &:hover .teaser__image img {
            /* Contrairement à "Fil d'infos", LatestPublication Lovable n'a pas de zoom
           d'image au survol (pas de classe group-hover:scale-* dans le JSX) : on
           annule le zoom générique hérité de la règle .teaser__link:hover. */
            transform: none;
        }
    }

    &#derniere-publication .teaser__image {
        flex-shrink: 0;
        height: 280px;
        aspect-ratio: 4 / 3;
        border-radius: 18px 18px 0 0;
        /* rounded-t-2xl */

        img {
            border-radius: inherit;
        }

        @media (min-width: 768px) {
            width: 40%;
            /* md:w-2/5 */
            aspect-ratio: auto;
            border-radius: 18px 0 0 18px;
            /* md:rounded-l-2xl */
        }
    }

    &#derniere-publication .teaser__text {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 16px;
        /* p-4 */
        gap: 0;

        @media (min-width: 768px) {
            padding: 20px;
            /* md:p-5 */
        }
    }

    &#derniere-publication .teaser__category,
    &#derniere-publication .teaser__date {
        /* Absents chez LatestPublication Lovable (ni catégorie ni date affichées). */
        display: none;
    }

    &#derniere-publication .teaser__title {
        font-size: 1.25rem;
        /* text-xl */
        font-weight: var(--semibold);
        color: var(--color-deep-blue);
        line-height: 1.3;

        @media (min-width: 768px) {
            font-size: 1.5rem;
            /* md:text-2xl */
        }
    }

    /* Extrait (chapô) : émis par le gabarit partagé content-teaser.php depuis le champ ACF
   `resume_de_larticle_actu` (20 mots max, cf. kn_get_teaser_excerpt()). Affiché sur TOUTES les
   instances "cpt" — "Fil d'infos" compris — d'où le scope `.cpt` et non &#derniere-publication. */
    .teaser__excerpt {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
        /* Le résumé saisi peut rester plus long que le texte de démo Lovable :
       on le borne visuellement à 3 lignes pour rester fidèle au pixel. */
        margin: 12px 0 0;
        /* mt-3 */
        font-size: 0.875rem;
        /* text-sm */
        line-height: 1.625;
        /* leading-relaxed */
        color: var(--color-deep-blue-70);

        @media (min-width: 768px) {
            font-size: 1rem;
            /* md:text-base */
        }
    }

    &#derniere-publication .teaser__cta {
        margin-top: 20px;
        /* mt-5 */
        display: inline-flex;
        align-items: center;
        gap: 8px;
        /* gap-2 */
        align-self: flex-start;
        border-radius: var(--border-radius-full);
        border: 1px solid var(--color-cta);
        padding: 10px 16px;
        /* py-2.5 px-4 */
        font-size: 0.875rem;
        /* text-sm */
        font-weight: var(--medium);
        color: var(--color-cta);
        text-decoration: none;
        transition: background-color 0.2s ease, color 0.2s ease;
    }

    &#derniere-publication .teaser__link:hover .teaser__cta {
        background-color: var(--color-cta);
        color: var(--white);
    }

    /* ============================================================
   3e INSTANCE "cpt" — "Dates à retenir" (UpcomingDates.tsx)
   Layout `cpt` réutilisé avec type=evenement (pas un nouveau layout) : gabarit
   dédié rendu par templates/parts/content-teaser.php quand get_post_type()
   === 'evenement' (badge date + tags taxonomie "public" + CTA, pas d'image).
   Scope : .type_evenement (classe posée par builder/cpt.php via le champ ACF
   "type"), ne touche pas aux autres instances "cpt" (Fil d'infos = .slider_cpt,
   Dernière publication = &#derniere-publication).
   ============================================================ */

    /* Liste : neutralise le "grid_layout" générique du champ "nombre de colonnes"
   (display:grid, .grid_layout 1 classe) — remplacé par la pile verticale
   Lovable (mt-10 flex flex-col gap-5). */
    .teaser.type_evenement {
        display: flex;
        flex-direction: column;
        gap: 20px;
        /* gap-5 */
        margin-top: 40px;
        /* mt-10 */
    }

    /* Carte événement */
    .teaser.type_evenement .teaser__item {
        display: flex;
        flex-direction: column;
        gap: 12px;
        /* gap-3 */
        border-radius: 18px;
        /* rounded-2xl : var(--radius 10px) + 8px */
        background-color: var(--white);
        box-shadow: var(--shadow-teaser);
        padding: 8px;
        /* p-2 */

        @media (min-width: 768px) {
            flex-direction: row;
            align-items: stretch;
            gap: 16px;
            /* gap-4 */
            padding: 12px;
            /* p-3 */
        }
    }

    /* Éléments propres à la variante bannière "un seul événement" (cf. plus bas) :
   toujours émis par content-teaser.php mais cachés par défaut dans le cas liste
   (UpcomingDates.tsx n'a ni image, ni kicker, ni extrait, ni ligne date/lieu). */
    .teaser.type_evenement .teaser__image,
    .teaser.type_evenement .dar__kicker,
    .teaser.type_evenement .dar__excerpt,
    .teaser.type_evenement .dar__meta {
        display: none;
    }

    /* Badge date */
    .teaser.type_evenement .dar__badge {
        display: flex;
        width: 100%;
        flex-shrink: 0;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border-radius: 14px;
        /* rounded-xl */
        padding: 12px 16px;
        /* py-3 px-4 */
        background-color: color-mix(in srgb, var(--color-primary-light) 50%, transparent);
        color: var(--color-deep-blue);

        @media (min-width: 768px) {
            width: 128px;
            /* md:w-32 */
        }

        span {
            font-weight: var(--semibold);
            text-transform: uppercase;
            letter-spacing: 0.05em;
            /* tracking-wider */
            font-size: 1rem;
            text-align: center;
            /* text-sm */
        }
    }

    /* Contenu (tags + titre) */
    .teaser.type_evenement .dar__content {
        flex: 1 1 auto;
        min-width: 0;
    }

    .teaser.type_evenement:not(.only-item) .dar__content {

        @media (min-width: 768px) {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
    }

    .teaser.type_evenement .dar__tags {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        /* gap-1 */
        margin-bottom: 4px;
        /* mb-1 */
    }

    .teaser.type_evenement .dar__tag {
        display: inline-block;
        border-radius: var(--border-radius-full);
        padding: 2px 10px;
        /* py-0.5 px-2.5 */
        font-size: 0.75rem;
        /* text-xs */
        font-weight: var(--medium);
        color: var(--white);
        background-color: var(--color-primary);
        /* étudiant (défaut) : cerf-main-blue */
    }

    .teaser.type_evenement .dar__tag--enseignant {
        background-color: var(--color-primary-dark);
        /* cerf-dark-blue */
    }

    .teaser.type_evenement .dar__title {
        margin: 0;
        font-size: 16px;
        /* text-lg */
        font-weight: var(--semibold);
        color: var(--color-deep-blue);

        @media (min-width: 768px) {
            font-size: 1.25rem;
            /* md:text-xl */
        }
    }

    /* CTA */
    .teaser.type_evenement .dar__cta {
        align-self: center;

        @media (max-width: 767px) {
            margin: 10px 0 0 0;
        }

        @media (min-width: 768px) {
            padding-right: 8px;
            flex-shrink: 0;
            padding-left: 24px;
            /* espace entre le titre et le bouton (demande Med IT Up du 05/10/2026) */
        }
    }

    .teaser.type_evenement .dar__btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        /* gap-2 */
        border-radius: var(--border-radius-full);
        border: 1px solid var(--color-cta);
        background-color: var(--white);
        padding: 10px 16px;
        /* py-2.5 px-4 */
        font-size: 0.875rem;
        /* text-sm */
        font-weight: var(--medium);
        color: var(--color-cta);
        text-decoration: none;
        font-family: inherit;
        line-height: 1.25;
        cursor: pointer;
        transition: background-color 0.2s ease, color 0.2s ease;

        @media (min-width: 768px) {
            margin: 0;
        }

        &:hover {
            background-color: var(--color-cta);
            color: var(--white);
        }

        svg {
            flex-shrink: 0;
        }
    }

    /* ============================================================
   4e CAS "cpt" type=evenement — UN SEUL événement sélectionné
   Rendu bannière "Dernier congrès" (LatestCongress.tsx), au lieu de la carte
   liste "Dates à retenir" (UpcomingDates.tsx) ci-dessus.
   Détection 100% CSS structurelle : quand cpt_list() (inc/modules.php) ne
   boucle que sur 1 post, `.teaser.type_evenement` n'a qu'un seul enfant
   `.teaser__item` → .only-item. Aucune classe ajoutée en PHP, aucune
   dépendance à la valeur du champ ACF "selection" (manuelle 1 post, "toutes
   catégories" ne matchant qu'1 evenement, etc. déclenchent tous ce cas).
   Le markup (image, kicker, extrait, ligne date/lieu) est TOUJOURS émis par
   content-teaser.php et caché par défaut (bloc ci-dessus) ; ce bloc-ci ne fait
   que le réafficher + le repositionner quand la condition CSS est vraie.
   ============================================================ */

    /* Pas de titre de section dans LatestCongress.tsx : masqué uniquement pour
   cette instance précise (le champ ACF "titre" reste rempli et réutilisable
   si l'éditeur repasse à plusieurs événements — on ne touche qu'à l'affichage). */
    &:has(.teaser.type_evenement.only-item > .teaser__item) .section__title {
        display: none;
    }

    /* Carte → bannière plein cadre */
    .teaser.type_evenement.only-item .teaser__item {
        position: relative;
        display: block;
        overflow: hidden;
        border-radius: 18px;
        /* rounded-2xl : même valeur que les autres cartes "cpt" (var(--radius) Lovable + 8px) */
        background-color: var(--color-deep-blue-5);
        /* neutralise le fond blanc + shadow-teaser du cas liste (l'image couvre tout) */
        box-shadow: none;
        padding: 0;
        min-height: 280px;
        gap: 0;
    }

    .teaser.type_evenement.only-item .teaser__item .teaser__image {
        display: block;
        position: absolute;
        inset: 0;
        height: 100%;

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

        /* Dégradé Lovable : "linear-gradient(to right, var(--cerf-skin) 30%, transparent 100%)" */
        &::after {
            content: '';
            position: absolute;
            inset: 0;
            background-image: linear-gradient(to right,
                    var(--color-skin) 30%,
                    color-mix(in srgb, var(--color-skin) 0%, transparent) 100%);
        }
    }

    .teaser.type_evenement.only-item .teaser__item .dar__badge {
        /* Le badge date "boîte" (liste) n'existe pas dans la bannière : la date y est
       affichée en ligne dans .dar__meta, avec icône, plus bas. */
        display: none;
    }

    .teaser.type_evenement.only-item .teaser__item .dar__content {
        position: relative;
        max-width: 42rem;
        /* max-w-2xl */
        padding: 32px;
        /* p-8 */

        @media (min-width: 768px) {
            padding: 48px;
            /* md:p-12 */
        }
    }

    .teaser.type_evenement.only-item .teaser__item .dar__tags {
        /* Absents de LatestCongress.tsx (pas de tags Étudiant/Enseignant sur ce format). */
        display: none;
    }

    .teaser.type_evenement.only-item .teaser__item .dar__kicker {
        display: block;
        margin: 0;
        font-size: 0.875rem;
        /* text-sm */
        font-weight: var(--semibold);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        /* tracking-wider */
        color: var(--color-cta);
    }

    .teaser.type_evenement.only-item .teaser__item .dar__title {
        margin-top: 8px;
        /* mt-2 */
        font-size: 1.5rem;
        /* text-2xl */
        font-weight: var(--bold);
        color: var(--color-deep-blue);
        line-height: 1.25;

        @media (min-width: 768px) {
            font-size: 1.875rem;
            /* md:text-3xl */
        }
    }

    .teaser.type_evenement.only-item .teaser__item .dar__excerpt {
        display: block;
        margin-top: 12px;
        /* mt-3 */
        color: color-mix(in srgb, var(--color-deep-blue) 80%, transparent);
        /* text-cerf-deep-blue/80 */
    }

    .teaser.type_evenement.only-item .teaser__item .dar__meta {
        display: flex;
        flex-wrap: wrap;
        gap: 16px;
        /* gap-4 */
        margin-top: 16px;
        /* mt-4 */
        font-size: 0.875rem;
        /* text-sm */
        color: var(--color-deep-blue);
    }

    .teaser.type_evenement.only-item .teaser__item .dar__meta-item {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        /* gap-2 */
    }

    .teaser.type_evenement.only-item .teaser__item .dar__meta-item::before {
        content: '';
        display: inline-block;
        width: 16px;
        height: 16px;
        flex-shrink: 0;
        background-color: var(--color-deep-blue);
        mask-repeat: no-repeat;
        mask-position: center;
        mask-size: contain;
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: center;
        -webkit-mask-size: contain;
    }

    .teaser.type_evenement.only-item .teaser__item .dar__meta-item--date::before {
        mask-image: url('../../img/icon_date.svg');
        -webkit-mask-image: url('../../img/icon_date.svg');
    }

    .teaser.type_evenement.only-item .teaser__item .dar__meta-item--lieu::before {
        mask-image: url('../../img/icon_adresse.svg');
        -webkit-mask-image: url('../../img/icon_adresse.svg');
    }

    .teaser.type_evenement.only-item .teaser__item .dar__cta {
        /* position:relative nécessaire : sans elle, cet élément non positionné serait peint
       AVANT .teaser__image (position:absolute) dans l'ordre de peinture CSS et resterait
       caché derrière l'image de fond, quel que soit l'ordre dans le DOM. */
        position: relative;
        margin-top: 24px;
        /* mt-6 */
        align-self: auto;
        padding-right: 0;
    }

    .teaser.type_evenement.only-item .teaser__item .dar__btn {
        /* Pilule pleine orange (au lieu de bordée/blanche dans le cas liste) */
        border: none;
        background-color: var(--color-cta);
        color: var(--white);
        font-weight: var(--semibold);
        /* font-semibold, pas medium */

        &:hover {
            background-color: var(--color-deep-blue);
            color: var(--white);
        }
    }

    /* ============================================================
       CPT `membre` — Annuaire des membres (/annuaire/, MemberCard dans
       annuaire-membres.tsx Lovable) : liste de cartes "ligne" (avatar rond +
       nom/poste/ville/email), rendu par templates/parts/content-teaser.php
       quand get_post_type() === 'membre'. Grille 2 colonnes : réutilise le
       système générique "nombre de colonnes" du bloc (classe grid_layout
       .nb_cols_2, cf. builder/parts/nombre_colonnes.php + css/base/container.css)
       — seul le gap est resserré ici pour coller au gap-4 (16px) de la maquette
       (le gap générique .grid_layout est de 40px/20px, pensé pour des grilles
       de cartes plus larges/plus hautes).
       ============================================================ */
    .teaser.type_membre {
        gap: 16px;
        /* gap-4 */
    }

    .teaser.type_membre .teaser__item {
        display: flex;
        align-items: center;
        gap: 16px;
        /* gap-4 */
        border-radius: var(--border-radius-xl);
        /* rounded-xl */
        border: 1px solid var(--color-border);
        background-color: var(--white);
        padding: 16px;
        /* p-4 */
        box-shadow: var(--shadow-sm);
        transition: box-shadow 0.2s ease;
    }

    .teaser.type_membre .teaser__item:hover {
        /* hover:shadow-md : pas de token --shadow-md dédié dans _variables.css,
           --shadow-teaser (0 4px 24px) est l'ombre "moyenne" la plus proche déjà
           déclarée (réutilisée plutôt que d'inventer une valeur en dur). */
        box-shadow: var(--shadow-teaser);
    }

    .membre__avatar {
        flex-shrink: 0;
        width: 56px;
        /* size-14 */
        height: 56px;
        border-radius: var(--border-radius-full);
        overflow: hidden;
        background-color: color-mix(in srgb, var(--color-primary) 10%, transparent);
        /* bg-cerf-main-blue/10 (fond de secours de l'avatar) */
    }

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

    .membre__content {
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    /* Cartouche de statut CERF (annuaire): "Membre titulaire" / "Membre associé".
       Petit badge en tête de carte, palette dérivée du deep-blue pour cohérence
       avec le reste, variante --associe légèrement adoucie pour distinguer. */
    .membre__status {
        display: inline-block;
        align-self: flex-start;
        margin-bottom: 4px;
        padding: 2px 8px;
        border-radius: 999px;
        font-size: 0.7rem;
        font-weight: var(--semibold);
        text-transform: uppercase;
        letter-spacing: 0.03em;
        line-height: 1.4;
        background: var(--color-deep-blue);
        color: #fff;
    }
    .membre__status--associe {
        background: color-mix(in srgb, var(--color-deep-blue) 15%, #fff);
        color: var(--color-deep-blue);
    }

    .membre__name {
        line-height: 1.2;
        margin: 0;
        font-weight: var(--semibold);
        color: var(--color-deep-blue);
        /* leading-tight */
    }

    .membre__role {
        line-height: 1.2;
        margin: 0;
        /* mt-0.5 */
        font-size: 0.875rem;
        /* text-sm */
        color: var(--color-muted-foreground);
    }

    .membre__city {
        line-height: 1.2;
        margin: 0;
        /* mt-0.5 */
        font-size: 0.75rem;
        /* text-xs */
        color: color-mix(in srgb, var(--color-primary-dark) 50%, transparent);
        /* text-cerf-dark-blue/50 */
    }

    .membre__email {
        line-height: 1.2;
        margin: 0;
        /* mt-1 */
        font-size: 0.75rem;
        /* text-xs */
        color: var(--color-primary);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        /* truncate */
    }
}

/* ============================================================
   CPT `fiche-pratique` — carte "icône + titre + Télécharger"
   Reproduit FichesPratiquesPage (Lovable, ressources.fiches-pratiques.tsx) — PAS
   le teaser générique par article (image/extrait/date/catégorie) utilisé par les
   autres types. Grille 2 colonnes déjà fournie par le système générique "nombre
   de colonnes" du bloc (classe grid_layout.nb_cols_2, cf. builder/parts/nombre_colonnes.php
   + css/base/container.css) — seul le gap est resserré ici pour coller au gap-6
   (24px) de la maquette.
   ============================================================ */
.teaser.type_fiche-pratique {
    gap: 24px;
    /* gap-6 */

    .teaser__item {
        display: flex;
        flex-direction: column;
        gap: 16px;
        /* gap-4 */
        border-radius: var(--border-radius-2xl);
        /* rounded-2xl */
        border: 1px solid color-mix(in srgb, var(--color-primary-dark) 10%, transparent);
        /* border-cerf-dark-blue/10 */
        background-color: var(--white);
        padding: 24px;
        /* p-6 */
        box-shadow: var(--shadow-sm);
        transition: box-shadow 0.2s ease;

        &:hover {
            /* hover:shadow-md : cf. .teaser.type_membre .teaser__item:hover, même
               réutilisation de --shadow-teaser faute de token --shadow-md dédié. */
            box-shadow: var(--shadow-teaser);
        }
    }

    .fiche-pratique__icon {
        display: flex;
        width: 48px;
        height: 48px;
        /* size-12 */
        align-items: center;
        justify-content: center;
        border-radius: var(--border-radius-xl);
        /* rounded-xl */
        background-color: color-mix(in srgb, var(--color-primary) 10%, transparent);
        /* bg-cerf-main-blue/10 */
        color: var(--color-primary);
    }

    .fiche-pratique__title {
        margin: 0;
        font-size: 16px;
        /* text-lg */
        font-weight: var(--semibold);
        line-height: 1.375;
        /* leading-snug */
        color: var(--color-deep-blue);
    }

    .fiche-pratique__download {
        margin-top: auto;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        /* gap-2 */
        font-size: 0.875rem;
        /* text-sm */
        font-weight: var(--medium);
        color: var(--color-cta);
        text-decoration: none;
        transition: color 0.2s ease;

        &:hover {
            text-decoration: underline;
            text-underline-offset: 3px;
        }

        svg {
            flex-shrink: 0;
        }
    }
}

/* ============================================================
   CPT `video` — carte "lecteur + titre"
   Reproduit VideosMasterclassesPage (Lovable, ressources.videos-masterclasses.tsx) —
   PAS le teaser générique par article. Lecteur YouTube (iframe) ou fichier importé
   (<video> natif) selon le champ ACF `choix_de_la_video` — le player YouTube natif
   n'est jamais recouvert/reskinné, seul son conteneur (ratio 16/9, coins arrondis)
   est stylé. Grille 2 colonnes déjà fournie par le système générique "nombre de
   colonnes" du bloc (classe grid_layout.nb_cols_2).
   ============================================================ */
.teaser.type_video {
    gap: 24px;
    /* gap-6 */

    .teaser__item {
        border-radius: var(--border-radius-lg);
        /* rounded-lg */
        border: 1px solid color-mix(in srgb, var(--color-primary-dark) 10%, transparent);
        /* border-cerf-dark-blue/10 */
        background-color: var(--white);
        padding: 16px;
        /* p-4 */
        box-shadow: var(--shadow-sm);
    }

    .video__player {
        position: relative;
        aspect-ratio: 16 / 9;
        border-radius: var(--border-radius-md);
        /* rounded-md */
        overflow: hidden;
        background-color: var(--dark);
        /* bg-black */

        iframe,
        video {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            border: 0;
            display: block;
        }
    }

    .video__title {
        margin: 16px 0 0;
        /* mt-4 */
        font-size: 1rem;
        /* text-base */
        font-weight: var(--semibold);
        line-height: 1.375;
        /* leading-snug */
        color: var(--color-deep-blue);
    }
}

/* ============================================================
   CPT `compte-rendu` — liste groupée par année + bouton "Consultez les statuts"
   Scope : .compte-rendu-list / .compte-rendu__statuts-btn (rendu dédié, cf.
   inc/modules.php:kn_render_comptes_rendus() + builder/cpt.php). Reproduit
   ComptesRendus (Lovable, src/routes/college.bureau.tsx) — PAS le teaser
   générique par article (image/extrait/date) utilisé par les autres types.
   ============================================================ */

.cpt .compte-rendu {
    display: flex;
    flex-direction: column;
    align-items: start;

    .section__title {
        &>h2,
        &>h3 {
            color: var(--color-primary);
        }
    }
}

.compte-rendu-list {
    /* mb-6 du h2 Lovable, reporté ici comme espace avant la liste */
    border-radius: var(--border-radius-2xl);
    /* rounded-2xl */
    border: 1px solid var(--color-border);
    background-color: var(--white);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    width: 100%;
}

.compte-rendu-list__row {
    display: flex;
    flex-direction: column;
    gap: 12px;
    /* gap-3 */
    padding: 20px 24px;
    /* px-6 py-5 */
    border-top: 1px solid var(--color-border);
    /* divide-y : pas de bordure avant la 1ère ligne */
}

.compte-rendu-list__row:first-child {
    border-top: none;
}

@media (min-width: 640px) {
    .compte-rendu-list__row {
        flex-direction: row;
        align-items: flex-start;
        gap: 32px;
        /* sm:gap-8 */
    }
}

.compte-rendu-list__year {
    flex-shrink: 0;
    font-size: 16px;
    /* text-lg */
    font-weight: var(--semibold);
    color: var(--color-deep-blue);
}

.compte-rendu-list__links {
    display: flex;
    flex-wrap: wrap;
    column-gap: 20px;
    /* gap-x-5 */
    row-gap: 8px;
    /* gap-y-2 */
    margin: 0;
    padding: 0;
    list-style: none;
}

.compte-rendu-list__link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    /* gap-1 */
    font-size: 0.875rem;
    /* text-sm */
    color: var(--color-cta);
    text-decoration: none;
    transition: color 0.2s ease;
}

@media (min-width: 768px) {
    .compte-rendu-list__link {
        font-size: 1rem;
        /* md:text-base */
    }
}

.compte-rendu-list__link:hover {
    color: var(--color-deep-blue);
    text-decoration: underline;
}

.compte-rendu-list__link svg {
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.compte-rendu-list__link:hover svg {
    transform: rotate(45deg);
}

/* ——— Bouton "Consultez les statuts" (visible uniquement si type = compte-rendu) —— */
.compte-rendu__statuts-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    /* gap-2 */
    height: 56px;
    /* h-14 */
    padding: 0 12px 0 28px;
    /* pl-7 pr-3 */
    margin-top: 24px;
    /* mt-6 */
    border-radius: var(--border-radius-full);
    background-color: var(--color-cta);
    color: var(--white);
    font-size: 1rem;
    /* text-base */
    font-weight: var(--medium);
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.compte-rendu__statuts-btn:hover {
    background-color: var(--color-deep-blue);
    color: var(--white) !important;
}

.compte-rendu__statuts-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 36px;
    /* size-9 */
    height: 36px;
    margin-left: 4px;
    /* ml-1 */
    border-radius: var(--border-radius-full);
    background-color: var(--white);
    color: var(--color-cta);
    transition: color 0.2s ease;
}

.compte-rendu__statuts-btn:hover .compte-rendu__statuts-icon {
    color: var(--color-deep-blue);
}

.compte-rendu__statuts-icon svg {
    transition: transform 0.2s ease;
}

.compte-rendu__statuts-btn:hover .compte-rendu__statuts-icon svg {
    transform: rotate(45deg);
}

/* ============================================================
   CPT `evenement` — Agenda regroupé par mois (route /agenda, agenda.tsx Lovable)
   Scope : .agenda-mensuel (rendu par kn_render_agenda_evenements(), inc/modules.php,
   appelé depuis builder/cpt.php quand type=evenement ET plusieurs événements — le cas
   "un seul événement" reste la bannière "Dernier congrès" ci-dessus, .only-item).
   Réutilise le gabarit dar__* existant (badge date / tags / titre / CTA) pour chaque
   événement — .teaser.type_evenement est volontairement posé sur .agenda-mensuel__list
   (cf. builder/cpt.php→inc/modules.php) pour bénéficier de tout ce CSS dar__* sans
   duplication ; seule la "carte" par événement (fond blanc + ombre) est neutralisée
   ci-dessous au profit d'un simple divider, comme dans agenda.tsx.
   ============================================================ */

.agenda-mensuel {
    display: flex;
    flex-direction: column;
    gap: 24px;
    /* gap-6 */
    margin-top: 40px;
    /* mt-10 */
}

.agenda-mensuel__mois {
    border-radius: var(--border-radius-2xl);
    /* rounded-2xl */
    background-color: var(--white);
    box-shadow: var(--shadow-teaser);
    padding: 20px;
    /* p-6 */
}

@media (min-width: 768px) {
    .agenda-mensuel__mois {
        padding: 16px 32px;
        /* md:p-8 */
    }
}

.agenda-mensuel__header {
    display: flex;
    align-items: center;
    gap: 8px;
    /* gap-2 */
    color: var(--color-primary);
    /* text-cerf-main-blue */
}

.agenda-mensuel__header svg {
    flex-shrink: 0;
}

.agenda-mensuel__label {
    margin: 0;
    font-size: 1rem;
    /* text-base */
    font-weight: var(--bold);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    /* tracking-wider */
}

@media (min-width: 768px) {
    .agenda-mensuel__label {
        font-size: 16px;
        /* md:text-lg */
    }
}

/* Liste des événements du mois : neutralise le style "pile de cartes ombrées" de
   .teaser.type_evenement (cf. règles plus haut) au profit d'une liste avec divider
   (idx > 0 ? border-top : none), fidèle à agenda.tsx. */
.agenda-mensuel__list.teaser.type_evenement {
    display: block;
    gap: 0;
    margin-top: 20px;
    padding: 0;
    /* mt-5 */
}

.agenda-mensuel__item {
    list-style: none;
}

.agenda-mensuel__list.teaser.type_evenement .teaser__item {
    display: flex;
    gap: 16px;
    /* gap-4 */
    padding: 20px 0;
    /* py-5 */
    background: transparent;
    box-shadow: none;
    border-radius: 0;
}

.agenda-mensuel__item:not(:first-child) .teaser__item {
    border-top: 1px solid color-mix(in srgb, var(--color-primary-dark) 10%, transparent);
    /* border-cerf-dark-blue/10 */
}

@media (min-width: 768px) {
    .agenda-mensuel__list.teaser.type_evenement .teaser__item {
        align-items: center;
        gap: 24px;
        justify-content: space-between;
        /* md:gap-6 */
    }

    .agenda-mensuel__list.teaser.type_evenement .dar__badge {
        width: 144px;
        /* md:w-36 */
        height: 96px;
        /* md:h-24 */
    }
}

/* ============================================================
   Pagination Agenda (kn_render_agenda_evenements()) / Annuaire
   (kn_render_annuaire_membres()) — flèches rondes orange épinglées aux bords
   (position:absolute) + numéros ronds centrés, fidèle à agenda.tsx ET
   annuaire-membres.tsx (même composant de pagination réutilisé côté Lovable).
   Scope : .agenda-pagination / .annuaire-pagination, ne modifie aucune autre
   pagination CPT (actualités, etc. restent avec le rendu WordPress par défaut
   non stylé). Repose sur le rendu standard the_posts_pagination() (aucune
   reconstruction du DOM WordPress, aucun impact sur la génération des URLs).
   ============================================================ */

.agenda-pagination,
.annuaire-pagination {
    margin-top: 40px;
    /* mt-10 */
}

.agenda-pagination .nav-links,
.annuaire-pagination .nav-links {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    /* gap-2 (numéros) */
    padding: 0 60px;
    /* réserve l'espace des flèches prev/next positionnées en absolu */
}

.agenda-pagination .page-numbers,
.annuaire-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    /* size-10 */
    height: 40px;
    border-radius: var(--border-radius-full);
    font-size: 0.875rem;
    /* text-sm */
    font-weight: var(--semibold);
    text-decoration: none;
    background-color: color-mix(in srgb, var(--color-cta) 15%, transparent);
    /* bg-cerf-orange/15 */
    color: var(--color-deep-blue);
    transition: background-color 0.2s ease, color 0.2s ease;

    &:hover {
        svg {
            filter: brightness(0) saturate(100%) invert(99%) sepia(8%) saturate(254%) hue-rotate(305deg) brightness(118%) contrast(100%) !important;
        }
    }
}

.agenda-pagination a.page-numbers:hover,
.annuaire-pagination a.page-numbers:hover {
    background-color: var(--color-deep-blue);
    color: var(--white) !important;
}

.agenda-pagination .page-numbers.current,
.annuaire-pagination .page-numbers.current {
    background-color: var(--color-deep-blue);
    color: var(--white);
}

.agenda-pagination .page-numbers.dots,
.annuaire-pagination .page-numbers.dots {
    background: none;
}

.agenda-pagination .page-numbers.prev,
.agenda-pagination .page-numbers.next,
.annuaire-pagination .page-numbers.prev,
.annuaire-pagination .page-numbers.next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    /* size-11 */
    height: 44px;
    background-color: var(--color-cta);
    color: var(--white);
}

.agenda-pagination .page-numbers.prev,
.annuaire-pagination .page-numbers.prev {
    left: 0;
}

.agenda-pagination .page-numbers.next,
.annuaire-pagination .page-numbers.next {
    right: 0;
}

.agenda-pagination .page-numbers.prev:hover,
.agenda-pagination .page-numbers.next:hover,
.annuaire-pagination .page-numbers.prev:hover,
.annuaire-pagination .page-numbers.next:hover {
    background-color: var(--color-deep-blue);
}

.agenda-pagination svg,
.annuaire-pagination svg {
    flex-shrink: 0;
}

.agenda-pagination .screen-reader-text,
.annuaire-pagination .screen-reader-text {
    /* Masqué visuellement, accessible (pattern standard WordPress) */
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ============================================================
   Recherche Annuaire des membres (page Annuaire /annuaire/, is_page(1982)) —
   formulaire EN DUR (builder/cpt.php), reproduit le bloc "Recherche"
   d'annuaire-membres.tsx (Lovable). Scope : .annuaire-recherche, n'affecte
   aucune autre instance du layout "cpt" (le bloc n'est émis que sur cette
   page précise, cf. $is_annuaire_membres dans builder/cpt.php).
   ============================================================ */

.annuaire-recherche {
    margin: 40px 0;
    /* mt-10 */
    border-radius: var(--border-radius-2xl);
    /* rounded-2xl */
    border: 1px solid var(--color-border);
    background-color: var(--white);
    box-shadow: var(--shadow-sm);
    padding: 24px;
    /* p-6 */
    text-align: left;
}

@media (min-width: 768px) {
    .annuaire-recherche {
        padding: 32px;
        /* md:p-8 */
    }
}

.annuaire-recherche__header {
    display: flex;
    align-items: center;
    gap: 8px;
    /* gap-2 */
    color: var(--color-primary);
}

.annuaire-recherche__header svg {
    flex-shrink: 0;
}

.annuaire-recherche__title {
    margin: 0;
    font-size: 16px;
    /* text-lg */
    font-weight: var(--bold);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    /* tracking-wide */
}

@media (min-width: 768px) {
    .annuaire-recherche__title {
        font-size: 1.25rem;
        /* md:text-xl */
    }
}

.annuaire-recherche__fields {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    /* gap-4 */
    margin-top: 24px;
    /* mt-6 */
}

@media (min-width: 768px) {
    .annuaire-recherche__fields {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        /* md:gap-5 */
    }
}

/* Sélecteur scopé par l'ancêtre .annuaire-recherche (spécificité 0,2,0) plutôt que
   .annuaire-recherche__input/__select seuls (0,1,0) : ces derniers étaient à égalité de
   spécificité avec la règle générique de reset.css ciblant [type=text]/select (elle aussi
   0,1,0), et cpt.css étant chargé (glob alphabétique de css/base/*.css) AVANT reset.css,
   ce dernier gagnait la cascade sur border/font-size — un liseré blanc (border-bottom
   de reset.css) et un texte à 16px (au lieu de 14px, text-sm Lovable) apparaissaient sur
   les <input> "Nom"/"Prénom". font-weight/line-height explicités ci-dessous pour la même
   raison (reset.css impose 500/1, jamais neutralisé sinon faute de règle concurrente ici). */
.annuaire-recherche .annuaire-recherche__input,
.annuaire-recherche .annuaire-recherche__select {
    width: 100%;
    height: 48px;
    /* h-12 */
    border: none;
    border-radius: var(--border-radius-full);
    background-color: color-mix(in srgb, var(--color-primary-light) 25%, transparent);
    /* bg-cerf-light-blue/25 */
    padding: 0 24px;
    /* px-6 */
    font-size: 0.875rem;
    /* text-sm */
    font-family: inherit;
    font-weight: var(--regular);
    line-height: normal;
    color: var(--color-deep-blue);
    outline: none;
    transition: box-shadow 0.2s ease;
}

.annuaire-recherche__input::placeholder {
    color: color-mix(in srgb, var(--color-deep-blue) 70%, transparent);
    /* placeholder:text-cerf-deep-blue/70 */
}

.annuaire-recherche__input:focus,
.annuaire-recherche__select:focus {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 40%, transparent);
    /* focus:ring-2 focus:ring-cerf-main-blue/40 */
}

.annuaire-recherche__select-wrap {
    position: relative;
}

.annuaire-recherche__select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 56px;
    /* pr-14 : réserve la place du chevron */
    cursor: pointer;
}

.annuaire-recherche__chevron {
    pointer-events: none;
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    /* size-9 */
    height: 36px;
    border-radius: var(--border-radius-full);
    background-color: var(--white);
    box-shadow: var(--shadow-sm);
    color: var(--color-cta);
}

.annuaire-recherche__submit-wrap {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 20px;
    margin-top: 24px;
    /* mt-6 */
}

.annuaire-recherche__reset {
    font-size: 0.875rem;
    /* text-sm */
    font-weight: var(--medium);
    color: var(--color-muted-foreground);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.2s ease;
}

.annuaire-recherche__reset:hover {
    color: var(--color-deep-blue);
}

.annuaire-recherche__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    /* h-12 */
    padding: 0 32px;
    /* px-8 */
    border: none;
    border-radius: var(--border-radius-full);
    background-color: var(--color-cta);
    color: var(--white);
    font-family: inherit;
    font-size: 0.875rem;
    /* text-sm */
    font-weight: var(--medium);
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.annuaire-recherche__submit:hover {
    background-color: var(--color-deep-blue);
}