/* ═══════════════════════════════════════════════════════════════════════════
   CARROUSEL DES PROFESSIONNELS

   POURQUOI CE FICHIER. Le même carrousel s'affiche sur l'accueil (« Les pros du
   moment ») et en bas d'une fiche (« D'autres pros qui pourraient vous
   convenir »), avec exactement le même balisage. Il était pourtant stylé DEUX
   FOIS, dans home.css et dans profil.css, avec des valeurs différentes : titre
   de carte à 21 px sur l’accueil et 24 px sur la fiche, note à 20 et 24. Le
   même objet ne se ressemblait donc pas selon la page.

   Les valeurs retenues sont celles de l'accueil, qui fait référence.

   Chargé par les deux pages. Ne pas redéfinir ces classes ailleurs : si une
   page a besoin d’autre chose, c’est un modificateur ici, pas une copie.
   ═══════════════════════════════════════════════════════════════════════════ */
.titleProvider{
    font-family: 'Poltawski Nowy';
    font-size: 42px;
    font-weight: 600;
    margin: 0 0 30px 120px;
}

/* Carrousels des pros : pleine largeur, même marge (--carousel-edge) à gauche et à droite.
   overflow: hidden coupe au bord extérieur du padding, donc au bord de l'écran : les cartes
   défilent jusqu'au bord, sans bande blanche. Nombre de cartes par vue : public/front/js/home.js. */
.swiperProvider {
    --carousel-edge: 12px;
    box-sizing: border-box;
    width: 100%;
    overflow: hidden;
    position: relative;
    padding: 5px var(--carousel-edge) 0;
    margin-left: 0;
}

.swiperWrapperProvider {
    display: flex; 
}

/* Cartes des pros (maquette) : photo en bandeau, nom sur une ligne, rubriques et adresse en gris,
   note avec une seule étoile. Textes en Afacad (police chargée par front/css/fonts-profile.css). */
.swiperSlideProvider {
    width: 260px;
    flex: 0 0 auto;
    background: #F8F8F8;
    border-radius: 22px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: 0.3s ease;
    text-decoration: none;
    color: #000;
}

.swiperSlideProvider,
.swiperSlideProvider * {
    font-family: 'Afacad', sans-serif;
}

.swiperSlideProvider:hover{
    transform: translateY(-5px);
}

.pictureSlideProvider img {
    width: 100%;
    object-fit: cover;
    display: block;
}

.textSlideProvider{
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    margin: 0;
    padding: 18px 24px 20px;
}

/* Une ligne chacun, « … » si trop long (texte complet au survol) */
.tilteSlide,
.textSlide,
.addressSlide{
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tilteSlide{
    font-size: 21px;
    font-weight: 500;
    line-height: 1.25;
    margin-bottom: 4px;
}

.textSlide, .addressSlide{
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    color: #434343;
}

/* Note : moyenne, une étoile, nombre d'avis ; en bas de la carte (cartes de même hauteur) */
.ratingTitleProvider{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    margin: auto 0 0;
    padding-top: 8px;
    line-height: 1;
}

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

.ratingStarProvider{
    width: 18px;
    height: auto;
    flex-shrink: 0;
}

.numberReviews{
    font-size: 15px;
    font-weight: 400;
}

.ratingEmpty{
    font-size: 15px;
    font-weight: 400;
    color: #6b6b6b;
}

/* Prix d'appel, à droite de la note */
.priceProvider{
    margin-left: auto;
    padding-left: 8px;
    font-size: 15px;
    font-weight: 500;
    white-space: nowrap;
}

.carouselNav {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    position: relative;
    right: 30px;
    gap: 12px;
    margin-top: 20px;
}


.btnNext{
    padding-left: 8px;
}

.carouselNav button {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid #808080;
    background: #fff;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: static;
    transition: 0.2s;
}

.carouselNav button:hover {
    background: #f5f5f5;
    transform: translateY(-2px);
}


@media (max-width: 834px){
    .titleProvider{
        font-size: 32px;
    }
    .tilteSlide{
        font-size: 20px;
    }
    .textSlide{
        font-size: 14px;
    }
    .ratingProvider{
        font-size: 20px;
    }
    .numberReviews{
        font-size: 15px;
    }
    .carouselNav{
        display: none;
    }
}

@media (max-width: 768px){
    .titleProvider{
        margin-left: 40px;
    }
    .swiperProvider{
        --carousel-edge: 16px;
    }
}

@media (max-width: 576px){
    .titleProvider{
        font-size: 28px;
        margin-left: 20px;
    }
    .swiperProvider{
        --carousel-edge: 16px;
    }
    .tilteSlide{
        font-size: 19px;
    }
    .textSlide{
        font-size: 14px;
    }
    .ratingProvider{
        font-size: 18px;
    }
    .numberReviews{
        font-size: 14px;
    }
}

/* La photo d'une carte : rapport 250/120, jamais le rapport naturel de l'image.
   Cette règle était restée dans home.css à l'écart du reste du carrousel, d'où
   des photos carrées et des cartes deux fois plus hautes sur la fiche. */
.imgCardSimilar{
    aspect-ratio: 250/120;
    object-fit: cover;
}