body{
    background: linear-gradient(
        to bottom,
        rgba(220, 196, 255, 0.20) 0%,
        rgba(179, 196, 255, 0.20) 25%,
        rgba(217, 179, 255, 0.20) 50%,
        rgba(255, 179, 245, 0.20) 75%,
        rgba(235, 179, 255, 0.20) 100%
    );
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

main{
    display: flex;
    flex-direction: row;
    flex: 1;
}

/* Filet gris en tête de la ligne « filtres + résultats », d'un bord à l'autre de
   l'écran. Il est porté par la ligne entière et non par la colonne de filtres,
   qui ne fait qu'un tiers de la largeur : le trait s'arrêtait au milieu.
   Déclaré ici avec la colonne de filtres ; la grille de la ligne est dans
   family.css, chargée par les trois pages de liste. */
.familyLayout{
    border-top: 1px solid #DADADA;
}

/* Side bar */

.sideBar{
    display: flex;
    flex-direction: column;
    align-items: center;
    border-right: 1px solid #DADADA;
    border-bottom: 1px solid #DADADA;
    /* Pas de border-top ici : elle est portée par .familyLayout, pour aller
       jusqu'au bord droit de l'écran au lieu de s'arrêter à 33 %. */
    /* Pas de largeur non plus : c'est la grille de .familyLayout qui la donne
       (family.css), et elle seule, pour que les deux colonnes ne puissent pas
       se contredire. */
    background-color: #fff;
    gap: 30px;
    padding: 50px 0 50px 0;
    /* Au bureau, c'est cette colonne qui donne sa hauteur à la ligne : la liste
       des résultats défile sur place et ne pèse pas sur elle (.containerResults).
       Colonnes empilées (834 px et moins), elle s'arrête sous son contenu : voir
       le bloc 834 px. */
}

/* Search bar */

/* Carte de filtres de la colonne de gauche.

   Tout y est ALIGNÉ À GAUCHE et à la MÊME LARGEUR. Auparavant les champs
   faisaient 100 %, les panneaux 85 % centrés, et les listes de pastilles
   étaient centrées elles aussi : trois alignements différents dans une
   colonne de 330 px, ce qui donnait des lignes déchiquetées et un dernier
   élément esseulé au milieu.

   L'écart entre contrôles vient d'un gap unique, plus de <span> séparateurs
   posés à la main dont l'espacement variait. */
.search-bar {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: relative;
    width: 330px;
    max-width: 100%;
    padding: 28px 24px;
    background: #ffffff;
    border-radius: var(--ui-r-card);
    border: 1px solid var(--ui-border-soft);
    box-shadow: 0 2px 14px rgba(15, 23, 42, 0.07);
    gap: var(--ui-gap-lg);
    z-index: 0;
    margin: 50px 0;
}

/* Filtres secondaires de la carte (rayon, panneaux, « + de filtres ») : même
   colonne et même écart que la carte elle-même, rien ne change au bureau.
   Repliés derrière le bouton « Filtres » sous 835 px (bloc 834 px plus bas). */
.filtersMore{
    display: flex;
    flex-direction: column;
    gap: var(--ui-gap-lg);
}

/* Bouton « Filtres » (front/_filters_toggle.html.twig) : colonnes empilées
   seulement. Au bureau les deux colonnes sont côte à côte, tout reste déplié. */
.filtersToggle{
    display: none;
}

.noBtn{
    background-color: transparent;
    border:none
}


/* En bloc en ligne et non en ligne : le retrait vertical d'un span en ligne
   déborde de sa boîte de ligne, et deux rangées de pastilles (pagination
   repliée, voir .pagination) se chevauchaient de 7 px. */
.item-pagination{
    display: inline-block;
    background-color: transparent;
    border: 1px solid black;
    padding: 8px 16px;
    border-radius: 100px;
    color: black;
}

/* Lien des flèches, qui enveloppe sa pastille : en bloc, il en prend la taille
   (cible et contour de focus de 42 px, et non la seule ligne de texte). */
.pagination .page-item > a:not(.item-pagination){
    display: flex;
}

.item-disabled{
    border: 1px solid grey;
    color: grey;
}

/* Page courante : pleine, à la lavande du système, et non grise comme une flèche
   inactive (elle est annoncée par aria-current="page") */
.item-current{
    background-color: var(--ui-accent);
    border-color: var(--ui-accent);
    color: var(--ui-text);
    font-weight: 600;
}

.bg-filter{
    background:#DADADA;
}

/* End search bar */

.spanDecoration{
    display: flex;
    flex-direction: column;
    align-self: flex-start;
}

.decoration01{
    width: 235px;
    height: 55px;
    background-color: #B9B3FF;
    border-top-right-radius: 20px;
}

.decoration02{
    width: 309px;
    height: 55px;
    background-color: #EBB3FF;
    border-top-right-radius: 20px;
}

.decoration03{
    width: 386px;
    height: 55px;
    background-color: #B3C4FF;
    border-top-right-radius: 20px;
}

.decoration04{
    width: 461px;
    height: 110px;
    background-color: #DCC4FF;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
}

/* End side bar */


/* Results */

.groupCardsResults{
    display: flex;
    flex-direction: column;
    gap: 80px;
}

/* Au bureau (deux colonnes, 835 px et plus), les fiches DÉFILENT SUR PLACE : la
   section ne s'allonge pas de toute la liste, on parcourt les fiches et les
   filtres restent en face.

   VOULU PAR LE PROPRIÉTAIRE DU SITE. Ce défilement a été retiré trois fois (deux
   fois le 2026-09-25, puis par le lot 33 de l'audit responsive) et redemandé à
   chaque fois : ne pas le retirer, ne pas afficher la barre et ne pas sortir la
   pagination de la zone sans sa demande.

   height: 0 puis min-height: 100% : le couple qui fait que cette colonne ne pèse
   pas sur la hauteur de la ligne (sans quoi elle l'étirerait à la hauteur de
   toutes les fiches, et il n'y aurait plus de défilement du tout) mais qu'elle
   la remplit entièrement. La ligne garde la hauteur de la colonne de filtres, et
   les fiches se coupent au bas de la section. Ce couple exige la grille de
   .familyLayout (family.css) : en flex, min-height: 100% n'a pas de hauteur à
   quoi se référer.

   overflow-x reste un garde-fou horizontal : une carte ou une pagination trop
   larges ne débordent pas sur la colonne de filtres, et la zone ne défile jamais
   de côté. Colonnes empilées (834 px et moins) : la page défile, voir le bloc
   834 px. */
.containerResults{
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
    height: 0;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* Retrait haut de la colonne de résultats : sans lui le nombre de prestataires
       serait collé au filet gris. Volontairement plus court que le retrait de la
       carte des filtres (101 px), qui creusait un vide trop marqué en haut de page.
       48 px sous la pagination, en fin de défilement. */
    padding-top: 64px;
    padding-bottom: 48px;
}

.containerResults::-webkit-scrollbar{
    display: none;
}

/* Section des résultats : largeur fluide, bornée. L'en-tête (compteur et tri),
   les cartes et l'encadré de liste vide en prennent toute la largeur : un seul
   bord pour tous, et rien ne déborde de la colonne quand elle se resserre (les
   cartes avaient des largeurs fixes, 675 / 500 / 450 / 350 / 310 px, coupées
   entre 280 et 309 px). Les paliers ne changent que le plafond. */
.containerGroupCardsResults{
    width: 100%;
    max-width: 675px;
}

/* Cartes en ligne (plus de 1100 px) : la section suit la colonne jusqu'à
   820 px. Figée à 675 px jusqu'en 2560, elle laissait 213 px au texte de la
   carte : noms sur trois lignes, adresses sur deux, texte collé aux boutons.
   16 px de part et d'autre, la gouttière du téléphone : la carte ne touche ni
   le filet de la colonne de filtres ni le bord de l'écran, et garde de 1101 à
   1160 px, où la colonne est la plus étroite, au moins le texte d'avant. */
@media (min-width: 1101px){
    .containerResults{
        padding-left: 16px;
        padding-right: 16px;
    }

    .containerGroupCardsResults{
        max-width: 820px;
    }
}

/* Très grands écrans : la carte de filtres se cale à droite de sa colonne et
   les cartes à gauche de la leur, à 56 px du filet de part et d'autre. Centrées
   chacune dans sa colonne, elles étaient séparées par 450 px de vide à 1920 px
   et 770 px à 2560. La ligne n'est pas bornée : un <main> ne se centre pas
   (reset.css impose main{margin:0 !important}), et le titre, le fil d'Ariane
   et le filet restent ainsi alignés sur le logo. La pagination prend la largeur
   des cartes pour rester centrée sous elles. */
@media (min-width: 1600px){
    .sideBar{
        align-items: flex-end;
        padding-right: 56px;
    }

    .containerResults{
        align-items: flex-start;
        padding-left: 56px;
    }

    #paginationZone{
        width: 100%;
        max-width: 820px;
    }
}

/* Cible #resultats (compteur et cartes) : la vue y descend sur téléphone après
   « Rechercher » ou Entrée, et la page suivante de la pagination s'y ouvre
   (filterProfile.js). Un peu d'air au-dessus du bord de l'écran. */
.resultsAnchor{
    scroll-margin-top: 16px;
}

/* Liste en cours de rechargement (filterProfile.js, avec aria-busy) : grisée le
   temps de la réponse. Le délai évite un clignotement quand elle arrive vite. */
.groupCardsResults.is-loading{
    opacity: 0.5;
    transition: opacity 0.2s ease 0.15s;
}

.groupSearchFilter{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 70px;
    margin: 30px 0 50px 0;
}

.svgSearchFilter{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: #a3a3a3;
    border-radius: 10px;
}

.searchFilter{
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Afacad';
    font-weight: 400;
    font-size: 20px;
    color: #000;
    width: 90px;
    height: 27px;
    border-radius: 999px;
    background-color: #fff;
}

.searchFilterM{
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Afacad';
    font-weight: 400;
    font-size: 20px;
    color: #000;
    width: 130px;
    height: 27px;
    border-radius: 999px;
    background-color: #fff;
}

.numberResults{
    color: #434343;
    font-family: 'Afacad';
    font-weight: 400;
    font-size: 20px;
}

/* Articles */

.cardsResults{
    display: flex;
    flex-direction: row;
    align-items: center;
    background-color: #fff;
    width: 100%;
    /* 160 px de texte + les 36 px de retrait de .infosResults */
    min-height: 196px;
    border-radius: 15px;
    overflow: hidden;
}

.containerSwiperResults{
    width: 260px;
    min-height: 196px;
}

.swiper-slide{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 196px;
}

.swiper-slide img{
    min-height: 196px;
    object-fit: cover;
}

/* Chaque diapositive rogne sa propre photo : au bureau l'image est plus large
   que la diapositive (295 px pour 260), et la photo suivante, peinte après,
   débordait de 17 px sur le bord droit de la photo affichée. Fond neutre le
   temps qu'une photo chargée à la demande arrive. */
.containerSwiperResults .swiper-slide{
    overflow: hidden;
    background-color: var(--ui-surface-soft);
}

.js-card-swiper{
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* Flèches posées sur la photo. Ce sont des boutons ronds du système
   (.ui-btn--icon .ui-btn--sm, 34 px, voir rubrique/_data.html.twig) : fond blanc
   plein et bordure, lisibles sur n'importe quelle photo. Translucides, elles
   laissaient voir la photo derrière un chevron noir, à moins de 3:1 sur un
   sujet sombre.
   La rangée traverse toute la photo : elle laisse passer le doigt (seuls les
   boutons le prennent), sinon un glissement commencé au milieu de la photo
   tomberait sur elle et ne ferait pas défiler le carrousel. */
.carouselNavR{
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 170px;
    width: 100%;
    z-index: 10;
    pointer-events: none;
}

.carouselNavR button{
    pointer-events: auto;
}

.carouselNavR button svg {
    width: 15px;
    height: 15px;
}

/* Puces lisibles sur une photo claire comme sombre : blanches cerclées, la
   courante en noir. Celles de Swiper (noires à 20 %) disparaissaient sur la
   photo. */
.js-card-swiper .swiper-pagination-bullet{
    background: #fff;
    opacity: .8;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .35);
}

.js-card-swiper .swiper-pagination-bullet-active{
    background: #000;
    opacity: 1;
}

/* Retrait haut et bas : sans lui, le texte n'avait aucune marge par rapport aux
   bords de la fiche. Une fiche bien remplie (titre sur trois lignes, ville qui
   passe à la ligne) dépassait la hauteur de la carte, se retrouvait centrée
   dessus et se faisait rogner en haut ET en bas par l'overflow: hidden.
   16 px au moins entre le texte et les boutons de la carte en ligne : le texte
   les touchait (0 à 10 px). Sans effet en colonne (1100 px et moins). */
.infosResults{
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: space-between;
    column-gap: 16px;
    padding: 18px 3% 18px 5%;
    flex: auto;
    min-width: 0;
    min-height: 160px;
}

/* Nom et informations groupés, centrés dans la hauteur : poussées en bas
   (margin-top: auto), les informations s'écartaient du nom de 0, 10 ou 20 px
   selon que le nom tenait sur une ou deux lignes. */
.results{
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-family: 'Afacad';
    flex: 1 1 auto;
    min-width: 0;
}

.groupTextResults{
    margin-top: 6px;
}

/* Un nom d'un seul mot (pseudo, marque) se coupe au lieu de fixer la largeur
   de la carte : sans césure, il poussait « Voir notre fiche » et « Nous
   contacter » hors de la carte au bureau, et se faisait rogner sur téléphone.
   anywhere, et non break-word : seule valeur qui réduit aussi la largeur
   minimale du texte ; word-break en repli pour Safari antérieur à 15.4. */
.tilteResults{
    font-size: 24px;
    font-weight: 500;
    margin: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Le nom mène à la fiche : même aspect que le titre, souligné au survol */
.resultsTitleLink{
    color: inherit;
    text-decoration: none;
}

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

.resultsTitleLink:focus-visible{
    outline: 2px solid #4D3DFF;
    outline-offset: 2px;
}

.textResults,
.addressResults,
.princingResults{
    font-size: 15px;
    font-weight: 400;
    color: #434343;
    margin: 0;
}

.btnResults{
    display: flex;
    flex-direction: column;
    align-items: stretch;
    align-self: flex-end;
    flex: 0 0 auto;
    gap: var(--ui-gap);
    font-family: 'Afacad';
}

/* Le numéro remplace le texte du bouton au clic : la largeur doit suivre, et
   le bouton garder sa forme. C’est du .ui-btn, rien de plus. */
.callUs{
    margin: 0;
}







.ratingTitleProvider{  
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
    font-size: 24px;
    font-weight: 500;
    /* Ancêtre positionné de la phrase de synthèse (.visually-hidden, en position
       absolue) : elle reste ainsi dans sa carte. Sans lui, elle échappe à la
       colonne de résultats qui défile sur place et allonge la page sous le pied
       de page. */
    position: relative;
}

.ratingProvider{
    font-family: 'Afacad';
    font-size: 20px;
    font-weight: 500;
}

.fullStar{
    display: flex;
    justify-content: center;
}

/* Les étoiles gardent leur taille même dans une carte étroite */
.fullStar svg{
    flex-shrink: 0;
}

.numberReviews{
    font-size: 15px;
}

/* Fiche sans avis : « Aucun avis » seul, comme sur la carte de l'accueil
   (provider-carousel.css, qui n'est pas chargée sur les listes) */
.ratingEmpty{
    font-size: 15px;
    font-weight: 400;
    color: #6b6b6b;
}

/* End articles */

/* Pagination */

/* La rangée passe à la ligne quand elle ne tient pas (dès 5 pages sur un
   téléphone, dès 10 dans la colonne de 835 à 1 120 px). Centrée sans retour à
   la ligne, elle débordait des deux côtés : flèches, première et dernière pages
   hors d'atteinte, coupées sans bruit par la colonne. */
.pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px 12px;
    max-width: 100%;
    padding: 30px 0 30px 0;
    font-family: 'Afacad', sans-serif;
}

.paginationBtn,
.paginationPage {
    min-width: 36px;
    height: 32px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid #D0D0D0;
    background-color: #F7F7F7;
    font-size: 14px;
    color: #222;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition:
        background-color 0.15s ease,
        transform 0.15s ease,
        box-shadow 0.15s ease;
}

.paginationBtn {
    padding: 0 14px;
}

/* Survol à la souris seulement : au doigt, la page touchée restait soulevée et
   teintée après l'appui */
@media (hover: hover) {
    .paginationBtn:hover:not(:disabled),
    .paginationPage:hover {
        background-color: #E5ECFF;
        border-color: #B3C4FF;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
        transform: translateY(-1px);
    }
}

.paginationPage.isActive {
    background-color: #B3C4FF;
    border-color: #B3C4FF;
    font-weight: 500;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
}

.paginationBtn:disabled {
    opacity: 0.5;
    cursor: default;
    transform: none;
    box-shadow: none;
}

.paginationList {
    display: flex;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.paginationDots {
    padding: 0 4px;
    font-size: 14px;
    color: #777;
}

/* End pagination */

/* End results */

@media (max-width: 1440px){
    .decoration01{
        width: 135px;
        height: 55px;
    }

    .decoration02{
        width: 209px;
        height: 55px;
    }

    .decoration03{
        width: 286px;
        height: 55px;
    }

    .decoration04{
        width: 361px;
        height: 110px;
        background-color: #DCC4FF;
    }

}

@media (max-width: 1160px){
    .search-bar{
        width: 290px;
    }

    .groupSearchFilter{
        gap: 30px;
    }

    .decoration01{
        width: 35px;
        height: 55px;
    }

    .decoration02{
        width: 109px;
        height: 55px;
    }

    .decoration03{
        width: 186px;
        height: 55px;
    }

    .decoration04{
        width: 261px;
        height: 110px;
        background-color: #DCC4FF;
    }
}

/* Cartes en colonne (photo au-dessus du texte) à partir de 1100 px et non de
   1160 : de 1101 à 1160 px la colonne fait 728 à 767 px, et la carte en ligne y
   tient (696 à 735 px une fois ôtés les retraits de 16 px), avec le rendu de
   1161 px (la carte en colonne y faisait 406 px de haut). */
@media (max-width: 1100px){
    .containerGroupCardsResults{
        max-width: 500px;
    }

    .cardsResults{
        flex-direction: column;
    }

    /* Photo au format 16/10 sur toute la largeur de la carte, et non un
       bandeau de 196 px de haut (2,3 à 2,6:1) qui coupait les visages. Les
       minimums de 196 px du bureau sont levés : un min-height l'emporte sur
       un max-height, le bandeau de 120 px prévu ici n'a jamais pris. */
    .containerSwiperResults{
        width: 100%;
        min-height: 0;
    }

    .swiper-slide{
        min-height: 0;
    }

    .swiper-slide img{
        width: 100%;
        height: auto;
        min-height: 0;
        max-height: none;
        aspect-ratio: 16 / 10;
    }

    /* Flèches aux deux bords de la photo, quelle que soit sa largeur */
    .carouselNavR{
        gap: 0;
        justify-content: space-between;
        padding: 0 8px;
        box-sizing: border-box;
    }

    .infosResults{
        flex-direction: column;
        align-items: center;
        padding: 16px 0;
        margin: 10px 0 20px 0;
        width: 80%;
        /* min-height et non height : une fiche bien remplie grandit au lieu
           de rogner son texte */
        min-height: 180px;
    }

    .results{
        width: 100%;
    }

    /* Adresse et prix sur toute la largeur du texte, comme le nom : limités à
       70 %, « 91000 Évry-Courcouronnes » se coupait au trait d'union. */

    .btnResults{
        flex-direction: row;
        width: 100%;
        align-items: center;
        gap: 20px;
    }
}

@media (max-width: 1000px){
    .groupSearchFilter{
        gap: 10px;
    }
    /* La colonne de filtres prend plus de place quand la fenetre retrecit :
       regle dans la grille de .familyLayout (family.css), au meme palier. */

    .containerGroupCardsResults{
        max-width: 450px;
    }
}

@media (max-width: 834px){
    main{
        flex-direction: column;
    }

    /* Colonnes empilées : plus rien à borner en hauteur, la liste suit le flux
       et c'est la page qui défile (toutes les fiches et la pagination à la
       suite). Les filtres sont au-dessus, il n'y a plus rien à aligner et un
       retrait de 100 px ne ferait que creuser un trou. Gouttière de 16 px,
       celle des filtres ; 48 px sous la dernière carte, qui toucherait sinon
       le pied de page. */
    .containerResults{
        height: auto;
        min-height: 0;
        overflow-y: visible;
        padding: 24px 16px 48px;
    }

    /* La colonne de filtres perd ses retraits et son filet de bureau : 100 px
       de vide autour de la carte de filtres et un filet au bord droit de
       l'écran. La carte prend la largeur des cartes de résultats. Elle garde
       la hauteur de son contenu, et non celle de sa ligne : sur une page plus
       courte que l'écran, le blanc ne descend pas sous la carte. */
    .sideBar{
        padding: 24px 16px;
        border-right: 0;
        align-self: start;
    }

    .search-bar{
        width: 100%;
        max-width: 450px;
        margin: 0;
    }

    /* Carte de filtres repliée : recherche, ville, « Filtres » et « Rechercher ».
       Dépliée, elle faisait 650 à 1 050 px et la première fiche arrivait deux
       écrans plus bas. L'état tient dans aria-expanded, que filterProfile.js
       bascule ; le bouton précède immédiatement le bloc qu'il commande. */
    .filtersToggle{
        display: block;
    }

    .filtersToggle[aria-expanded="false"] + .filtersMore{
        display: none;
    }

    .groupCardsResults{
        gap: 32px;
    }

    .spanDecoration{
        display: none;
    }

    .groupSearchFilter{
        width: 90%;
        justify-content: space-around;
    }
}

@media (max-width: 576px){
    .groupSearchFilter{
        display: none;
    }

    /* Deux boutons côte à côte ne tiennent pas dans la carte (chacun passait
       sur deux lignes) : on les empile, pleine largeur, comme les issues de la
       liste vide. */
    .btnResults{
        flex-direction: column;
        align-items: stretch;
        gap: var(--ui-gap);
    }

    .pagination{
        column-gap: 6px;
    }

    .item-pagination{
        padding: 8px 12px;
    }
}

@media (max-width: 480px){
    .paginationBtn{
        display: none;
    }
}


.imgCard{
    aspect-ratio: 263.5/175;
    object-fit: cover;
    height: 196px;
}

/* Numéro révélé par le bouton « Nous contacter » : lien d'appel occupant tout
   le bouton (le libellé ne revient pas, le clic suivant lance l'appel) */
.callUsLink{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: inherit;
    text-decoration: none;
    /* Le numéro ne se coupe jamais (« 06 55 66 77 / 88 ») */
    white-space: nowrap;
}

/* Liste vide (pages rubrique, famille et « Tous les pros »).
   Centré et aéré : c'est un moment de déception, la page doit rassurer et proposer
   une suite, pas ressembler à une erreur. Largeur des cartes (celle de
   .containerGroupCardsResults) : à 675 px et 88vw, l'encadré débordait de la
   colonne entre 835 et 1000 px, rogné des deux côtés avec le titre et le tri. */
.emptyResults{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-sizing: border-box;
    width: 100%;
    padding: 40px 32px 32px;
    background-color: #fff;
    border: 1px solid #E6E6E6;
    border-radius: 20px;
    font-family: 'Afacad';
}

/* Pictogramme, au même langage que ceux de l'accueil : trait noir sur aplat violet */
.emptyResultsIcon{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: 20px;
    border-radius: 18px;
    background-color: #EDE7FF;
    color: #1F1F1F;
}

.emptyResultsTitle{
    margin: 0;
    font-family: 'Poltawski Nowy';
    font-size: 26px;
    font-weight: 600;
    line-height: 1.2;
    color: #000;
    text-wrap: balance;
}

/* Phrase qui explique la liste vide et rappelle la zone couverte */
.emptyResultsLead{
    margin: 10px 0 0 0;
    max-width: 46ch;
    font-size: 17px;
    line-height: 1.45;
    color: #434343;
    text-wrap: pretty;
}

/* Issues proposées : des boutons, pas une liste de liens empilés */
.emptyResultsLinks{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 24px 0 0 0;
    padding: 0;
    list-style: none;
}


/* « Vous êtes pro ? » : une issue secondaire, qui reste un lien */
.emptyResultsLinks a.emptyResultsSmall{
    flex: 1 1 100%;
    min-height: 0;
    padding: 0;
    margin-top: 2px;
    font-size: 15px;
    color: #434343;
    background: none;
    border: none;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.emptyResultsLinks a.emptyResultsSmall:hover{
    color: #4d3dff;
    background: none;
}

@media (max-width: 480px){
    .emptyResults{
        padding: 32px 20px 24px;
    }

    .emptyResultsTitle{
        font-size: 22px;
    }

    /* Colonne pleine largeur : des boutons côte à côte deviennent illisibles.
       La liste s'étire elle-même (l'encadré centre ses enfants, il l'ajustait
       à son contenu) et chaque bouton remplit sa ligne. */
    .emptyResultsLinks{
        flex-direction: column;
        align-items: stretch;
        align-self: stretch;
    }

    .emptyResultsLinks .ui-btn{
        width: 100%;
    }
}

/* Demande d'alerte du bloc « aucun résultat » : le visiteur laisse son email plutôt
   que de repartir. Posée dans la carte, séparée des liens par un filet. */
/* Proposition de demande inversée, au-dessus de l'alerte de disponibilité.
   Même séparateur et mêmes proportions que l'alerte : les deux se lisent comme
   deux issues d'une même liste vide, l'une active, l'autre passive. */
.emptyResultsRequest{
    box-sizing: border-box;
    width: 100%;
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid #EAEAEA;
}

.emptyResultsRequestTitle{
    margin: 0 0 4px 0;
    font-size: 17px;
    font-weight: 600;
    color: #000;
}

/* Le bouton descend d'un cran sous la phrase qui l'annonce */
.emptyResultsRequest .ui-btn{
    margin-top: 14px;
}

.coverageAlert{
    box-sizing: border-box;
    width: 100%;
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid #EAEAEA;
}

.coverageAlertTitle{
    margin: 0 0 4px 0;
    font-size: 17px;
    font-weight: 600;
    color: #000;
}

.coverageAlertLead{
    max-width: 48ch;
    margin: 0 auto 16px auto;
    font-size: 15px;
    line-height: 1.45;
    color: #434343;
    text-wrap: pretty;
}

/* Centré comme le reste du bloc, et borné pour que le champ ne s'étire pas sur 600 px */
.coverageAlertForm{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    max-width: 440px;
    margin: 0 auto;
}





.coverageAlertNote{
    max-width: 50ch;
    margin: 12px auto 0 auto;
    font-size: 13px;
    line-height: 1.4;
    color: #6B6B6B;
}

@media (max-width: 480px){
}

/* End filtre repliable */

/* Ligne compteur + tri des résultats. La marge basse la détache de la première
   carte : sans elle, le tri touchait la carte à toutes les largeurs. */
.resultsHeader{
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px 20px;
    margin-bottom: 24px;
}

.resultsSort{
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Afacad';
}

.resultsSortLabel{
    font-size: 17px;
    color: #434343;
    white-space: nowrap;
}

/* Liste vide : rien à trier. Suit aussi les rechargements AJAX, la liste vide
   étant rendue dans le même conteneur. */
.containerGroupCardsResults:has(.emptyResults) .resultsSort{
    display: none;
}

/* Liste vide : l'en-tête n'affiche plus rien, sa marge ne doit pas pousser
   l'encadré vers le bas. */
.containerGroupCardsResults:has(.emptyResults) .resultsHeader{
    margin-bottom: 0;
}




@media (max-width: 576px){
    .resultsHeader{
        align-items: stretch;
        flex-direction: column;
    }

    /* Sur un téléphone, l'en-tête passe en colonne : la liste déroulante prend
       toute la largeur plutôt que de se coller au libellé. Le chevron va au
       bord droit, comme dans un champ pleine largeur (.ui-select--block),
       au lieu de rester collé au texte au milieu du champ. */
    .resultsSort .ui-select--framed{
        flex: 1;
        min-width: 0;
    }

    .resultsSort .ui-select--framed .ui-select__inner{
        justify-content: space-between;
    }
}