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

/* En-tête de la fiche seulement. Le sélecteur de balise « header » visait aussi
   l'en-tête du site : navigation décalée de 30 px, burger écrasé sous 345 px. */

/* COLONNE COMMUNE DE LA FICHE.

   L'en-tête (nom, boutons, galerie, résumé) et les sections partagent une seule
   colonne : 840 px au plus, centrée, à 40 px des bords (16 px sur téléphone,
   comme le fil d'Ariane). Chacun avait la sienne : un retrait de 30 px à gauche
   et 0 à droite pour l'en-tête, 70 puis 85 % pour les sections, le tout dans un
   col-md-10 actif seulement dès 768 px. D'où trois bords gauches différents,
   une galerie collée au bord droit de l'écran sous 768 px, des cartes qui
   perdaient 95 px à 769 px et des lignes de 1 100 à 1 485 px sur grand écran.
   position: relative : repère des flèches de la galerie, calées sur son bord
   droit et non sur celui de la fenêtre. */
.profilHeader,
.cardsProfilContainer section{
    width: min(calc(100% - 80px), 840px);
    margin-inline: auto;
}

.profilHeader{
    position: relative;
    padding: 0;
}

@media (max-width: 576px){
    .profilHeader,
    .cardsProfilContainer section{
        width: calc(100% - 32px);
    }
}

main{
    margin: 0;
    padding: 0;
}


/* Header */

.containerTitleProfil{
    display: flex;
    flex-direction: column;
}

/* ÉCHELLE DE LA FICHE.

   La fiche reprenait l'échelle de l'accueil : titres de section à 42 px, comme
   « Que recherchez-vous ? ». Or une page d'accueil a trois titres et de l'air
   autour, tandis que la fiche en aligne cinq au-dessus de contenus denses. La
   page de résultats, qui est le bon point de comparaison, titre à 30 px.

   Le nom du pro reste le plus gros élément, mais d'un cran en dessous d'une
   accroche, et les titres de section descendent nettement sous lui pour qu’on
   voie du premier coup ce qui est le sujet et ce qui est une rubrique. */
.titleProfil{
    font-family: 'Poltawski Nowy';
    font-size: 34px;
    font-weight: 600;
    margin: 0;
}

.ratingTitle{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
}


.rating{
    font-family: 'Afacad';
    font-size: 24px;
    font-weight: 500;
}

/* Sans avis noté : « Aucun avis » en gris et sans étoile, comme sur la carte du
   pro. La taille reste celle de la note. */
.ratingNone{
    font-weight: 400;
    color: #6b6b6b;
}

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

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

/* Carousel pictures */

.mySwiper {
    height: 340px;
    border-radius: 18px;
    width: 100%;
    margin-top: 10px;
}

.swiper-slide {
    height: 100%;
    width: 100%;
    border-radius: 18px;
    overflow: hidden;
}

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

/* Photos prises au Tab (la visionneuse s'ouvre à Entrée) : contour du site,
   dessiné à l'intérieur de la photo, la diapositive coupant ce qui dépasse. */
.mySwiper .gallery-image{
    border-radius: 18px;
}

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

/* Calées sur le bord droit de la galerie (repère : .profilHeader), et non plus
   à 30 px du bord de la fenêtre, loin de la galerie sur grand écran */
.carousel-nav {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    position: absolute;
    right: 0;
    margin-top: 20px;
    gap: 12px;

}

.carousel-nav .btn-prev,
.carousel-nav .btn-next {
    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;

}

/* Flèches inutiles quand toutes les photos tiennent (Swiper verrouillé, classe
   swiper-button-lock) : la règle de Swiper perdait contre le display: flex
   ci-dessus, d'où deux flèches visibles et inertes. Même spécificité, plus bas. */
.carousel-nav .swiper-button-lock{
    display: none;
}

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

.carousel-nav button{
    transition: 0.2s;
}

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

.carousel-nav .btn-prev::after,
.carousel-nav .btn-next::after {
    font-size: 16px;
    color: #000;
}

/* End carousel pictures */

.containerProfilSummary{
    display: flex;
    flex-direction: column;
    font-family: 'Afacad';
    font-size: 17px;
    margin-top: 8px;
}

/* Résumé du jour : une plage ne se coupe jamais, elle passe entière à la ligne.
   Sous 340 px, chaque plage se coupait en deux à ses espaces.
   Le point médian entre le statut et les plages est dessiné en tête du groupe des
   plages, dans son retrait gauche. La rangée est décalée d'autant vers la gauche
   et rognée sur cette bande : quand le groupe passe à la ligne, son point tombe
   dans la bande rognée au lieu de rester seul en bout de ligne. */
.groupScheduleSummary{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px 0;
    margin-left: -15px;
    clip-path: inset(0 0 0 15px);
}

.groupScheduleSummary > *{
    padding-left: 15px;
}

.scheduleSummary{
    white-space: nowrap;
}

/* Les plages du jour restent ensemble : sans la place à côté du statut, elles
   passent ensemble à la ligne au lieu de laisser le « | » en bout de ligne.
   Plus étroit encore, chacune passe à la ligne à son tour. */
.scheduleSummaryHours{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    position: relative;
}

.scheduleSummaryHours::before{
    content: "·";
    position: absolute;
    left: 5px;
    top: 50%;
    transform: translateY(-50%);
}

.scheduleStatusText{
    
    color: #00B014;
}

/* Statut du jour (calculé à l'heure du rendu, voir le gabarit) : vert et rouge
   foncés, 5,6:1 et 5,4:1 sur le fond de la fiche. Le vert vif et le rouge pur
   n'atteignaient que 2,4:1 et 3,3:1. */
.scheduleStatusTextOpen{
    color: #0F6B32;
}

.scheduleStatusTextClose{
    color: #B91C1C;
}

.groupAdressSummary{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
}

.groupAccessibilitySummary{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

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

.adressNumberSummary,
.adressSummary,
.lineAdressSummary,
.postalCodeSummary,
.townSummary,
.AccessibilitySummary {
    margin: 0;
}

/* End header */

/* Main */

.cardsProfilContainer{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    font-family: 'Afacad';
    margin-top: 80px;
    margin-bottom: 80px;
    gap: 100px;
}

/* Cinq sections sur la page : à 42 px elles pesaient autant que le nom du pro. */
/* Les titres de section touchaient leur carte : margin 0, et la carte juste
   dessous. Un titre collé à ce qu'il annonce ne se lit pas comme un titre. */
.cardsProfilContainer h2{
    font-size: 26px;
    font-weight: 600;
    margin: 0 0 20px;
    text-wrap: balance;
}

/* Sous des sections à 26 px, des sous-titres à 24 px ne hiérarchisaient rien. */
.cardsProfilContainer h3{
    font-size: 19px;
    font-weight: 500;
    margin: 0 0 10px 0;
    text-wrap: balance;
}

/* Dans une ligne libellé + valeur (cartes Rubriques et Contact), le titre ne
   s'éloigne pas de sa valeur : sa marge basse la rapprochait de la rubrique
   suivante plus que de son propre titre. */
.infoContact > .titleInfoContact{
    margin-bottom: 0;
}

.cardsProfilContainer p, .cardsProfilContainer span{
    margin: 0;
}

/* Largeur des sections : colonne commune, en tête de feuille */

/* Les cartes avaient 60 px de marge intérieure sur les quatre côtés : une carte
   de deux lignes mesurait 160 px de haut pour 50 px de texte, et la page entière
   paraissait dilatée. 32 px laissent respirer sans creuser. */
.cardsProfilContainerGroup{
    display: flex;
    flex-direction: column;

    background-color: white;
    border-radius: 15px;
    padding: 32px;
}

/* Services */

.containerServices{
    display: flex;
    flex-direction: column;
    
}

.groupServices{
    display: flex;
    flex-direction: column;
    gap: 60px;
}

/* Prestation : texte à gauche, tarif à droite (sous le texte en mobile, voir le
   palier 576 px). Ces règles vivaient dans un bloc <style> du gabarit, chargé
   APRÈS cette feuille : il l'emportait sur toute règle mobile écrite ici. */
.services{
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

/* min-width: 0 : sans lui, la colonne ne descend pas sous son mot le plus long,
   et une adresse web dans la description poussait le tarif hors de la carte. */
.titleTextServices{
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

/* Le titre de la prestation porte une icône (17 px) suivie de son écart (8 px) :
   la description se cale sur le texte du titre, pas sur l'icône, sinon les deux
   lignes partent de deux endroits différents. */
.textServices{
    font-size: 17px;
    color: #434343;
    margin: 0;
    padding-left: 25px;
    width: 80%;
}

.priceServices{
    display: flex;
    align-items: center;
    font-weight: 600;
}

/* Un tarif n’est pas un titre : à 42 px il criait plus fort que le nom du pro. */
.princingServices{
    font-size: 26px;
    font-weight: 600;
    white-space: nowrap;
}

.fiatCurrencySymbol{
    font-size: 22px;
    font-weight: 600;
    margin-left: 3px;
}

/* End services */

/* Information general */

.groupGeneralInformation{
    display: flex;
    flex-direction: column;
    gap: 50px;
}

.contact{
    display: flex;
    flex-direction: column;
}

.infoContact{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    /* align-items: center; */
    gap: 5px;
}

.infoContact p{
    font-size: 19px;
}

.textInfoContact{
    color: #434343;
}

.infoAccessibility{
    display: flex;
    flex-direction: row;
    gap: 80px;
}

.infoAccessibility p{
    font-size: 19px;
}

.columnRightAccessibility{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.infoEquipment{
    display: flex;
    flex-direction: row;
    gap: 80px;
}

.infoEquipment p{
    font-size: 19px;
}

.columnRightEquipment{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Toute la largeur de la carte : à 70 %, les heures s'arrêtaient au milieu de
   la carte au bureau. Elles se calent au bord droit, comme les tarifs. */
.groupSchedule{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
}

.day{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

.scheduleStatus{
    display: flex;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 100px;
}

.scheduleStatusOpen{
    background-color: #44C200;
}

.scheduleStatusClosed{
    background-color: #FF0000;
}

.columnLeftSchedule{
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.groupSchedule p{
    font-size: 19px;
}

.textDay{
    font-weight: 500;
}

.columnRightSchedule{
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.lineSchedule{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
}

.scheduleTextClosed{
    color: #434343;
    align-self: flex-end;
}

.columnSchedule{
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 30px;
}

/* Le jour et ses heures ne se touchent jamais : 16 px au moins entre eux, et si
   la place manque, les heures passent sous le jour, calées à droite. Une plage
   ne se coupe pas en deux. Sous 345 px, on lisait « Mercredi09:00 - ». */
.lineDaySchedule{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    column-gap: 16px;
    row-gap: 4px;
    width: 100%;
}

.lineDaySchedule > .lineSchedule,
.lineDaySchedule > .scheduleTextClosed{
    margin-left: auto;
}

.scheduleMorning,
.scheduleAfternoon{
    white-space: nowrap;
}

/* End information general */

/* Reviews */

/* Origine des avis : discret mais lisible, juste sous le titre de la section */
.reviewsSource{
    font-family: 'Afacad';
    font-size: 15px;
    line-height: 1.4;
    color: #434343;
    margin: 4px 0 0 0;
}

.fullStarsNumber{
    margin: 10px 0 10px 0;
}

.groupCustomerReviews{
    display: flex;
    flex-direction: column;
    gap: 50px;
}

.groupCustomerReviews p{
    font-size: 19px;
}

.identityCustomer{
    margin-top: 10px;
}

.identityCustomer p{
    font-size: 15px;
    color: #434343;
}

.textCustomerReviews{
    width: 70%;
}

/* End reviews */


/* Carousel provider */



















/* End carousel provider */



@media (max-width: 1280px){
    .mySwiper{
        height: 300px;
    }
}

@media (max-width: 1024px){
    .mySwiper{
        height: 250px;
    }
}

@media (max-width: 834px){
    .mySwiper{
        height: 200px;
    }

    .carousel-nav{
        display: none;
    }


    /* Paliers de l'échelle de la fiche, en dessous des valeurs de bureau (nom 34,
       sections 26, tarif 26) : à chaque palier, nom > titre de section ≥ tarif.
       Les anciennes valeurs, écrites pour des titres à 42 px, AGRANDISSAIENT les
       titres sous 835 px. */
    .cardsProfilContainer h2{
        font-size: 24px;
    }


    .cardsProfilContainer h3{
        font-size: 18px;
    }


    .cardsProfilContainer p{
        font-size: 18px;
    }



    .titleProfil {
        font-size: 32px;
    }

    .rating{
        font-size: 20px;
    }

    .fullStar svg{
        width: 16px;
        height: auto;
    }

    .princingServices{
        font-size: 24px;
    }

    .fiatCurrencySymbol{
        font-size: 20px;
    }
}

@media (max-width: 768px){
    .mySwiper{
        height: 180px;
        width: 100%;
    }

    .textCustomerReviews{
        width: 100%;
    }

    .cardsProfilContainerGroup{
        padding: 26px;
    }


}

@media (max-width: 576px){
    .cardsProfilContainerGroup{
        padding: 20px;
    }

    .infoAccessibility{
        flex-direction: column;
        gap: 0;
    }

    .infoEquipment{
        flex-direction: column;
        gap: 0;
    }


    /* Même règle qu'au palier précédent : nom > titre de section ≥ tarif. Le tarif
       à 36 px et son symbole à 26 px dépassaient le nom du pro. */
    .cardsProfilContainer h2{
        font-size: 22px;
        text-wrap: balance;
    }

    .cardsProfilContainer h3{
        font-size: 17px;
    }


    .cardsProfilContainer p{
        font-size: 15px;
    }



    .titleProfil {
        font-size: 28px;
    }

    .rating{
        font-size: 18px;
    }

    .fullStar svg{
        width: 16px;
        height: auto;
    }



    .fiatCurrencySymbol{
        font-size: 18px;
    }

    .princingServices{
        font-size: 22px;
    }

    /* Prestations : le tarif passe sous le texte. En ligne, il réduisait la
       description à un mot par ligne et sortait de la carte sous 300 px.
       stretch : en colonne, un alignement à gauche donnerait au texte la
       largeur de son mot le plus long (une adresse web élargissait la page). */
    .services{
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
    }

    .titleTextServices{
        flex: none;
    }

    .textServices{
        width: auto;
    }

    /* Calé sur le texte du titre : icône 17 px + écart 8 px */
    .priceServices{
        padding-left: 25px;
    }

    /* Libellé puis valeur, toujours l'un sous l'autre (cartes Rubriques et
       Contact), la valeur calée sur le texte du libellé : icône 17 px + écart
       8 px. Selon la largeur, elles passaient tantôt côte à côte, tantôt dessous
       contre le bord de la carte. */
    .infoContact > .infoContacts,
    .infoContact > .textInfoContact,
    .infoContact > .profilSocialList{
        flex-basis: 100%;
        padding-left: 25px;
    }

    /* En mobile, 100 px entre sections faisaient surtout des bandes vides */
    .cardsProfilContainer{
        gap: 56px;
        margin-top: 48px;
        margin-bottom: 56px;
    }

    .groupServices{
        gap: 32px;
    }

    .groupCustomerReviews{
        gap: 32px;
    }
}

@media (max-width: 480px){
    .columnLeftSchedule{
        gap: 50px;
    }

    .columnRightSchedule{
        gap: 19.5px;
    }

    /* Les deux plages s'empilent, calées à droite comme sur une seule ligne */
    .lineSchedule{
        flex-direction: column;
        align-items: flex-end;
    }

    /* Plages empilées : le « | » n'a plus lieu d'être dans le tableau. Le
       résumé du haut, qui reste en ligne, garde le sien : sans lui, « 12:30
       14:00 » se lisait comme une seule plage. */
    .lineSchedule .separatorSchedule{
        display: none;
    }
}

/* Contact direct (haut de fiche, bloc Contact, barre mobile) */

.profilCta{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 14px;
}




.profilCtaIcon{
    flex-shrink: 0;
}

/* Téléphone, e-mail et site web cliquables dans le bloc Contact */
.profilContactLink{
    margin: 0;
    font-size: 19px;
    color: #434343;
    text-decoration: underline;
    text-underline-offset: 2px;
    word-break: break-word;
    transition: 0.3s ease;
}

.profilContactLink:hover{
    color: #4d3dff;
}

/* Barre d'action : mobile uniquement */
.profilActionBar{
    display: none;
}

/* Menu mobile ouvert : la barre est fixée au-dessus de lui (contexte d'empilement
   du <nav>), elle masquerait ses dernières entrées et resterait cliquable */
body.nav-open .profilActionBar{
    display: none;
}

/* Les boutons de la barre sont ceux du système (.ui-btn, ui.css) : forme,
   bordure, police et accent lavande de « Appeler ». Une règle .profilActionBtn
   complète, chargée après ui.css, les redessinait en blanc bordé de noir et
   effaçait l'accent. Seule la répartition de la largeur est propre à la barre
   (plus bas, « .profilActionBar .profilActionBtn »). */


@media (max-width: 834px){
    .profilCta{
        gap: 10px;
    }


    .profilActionBar{
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1000;
        gap: 10px;
        padding: 10px 14px;
        padding-bottom: calc(10px + env(safe-area-inset-bottom));
        background-color: #fff;
        border-top: 1px solid #DADADA;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08);
    }

    /* La barre fixe ne masque ni la fin du pied de page ni le retour en haut */
    footer{
        padding-bottom: 86px;
    }

    .back-top{
        bottom: 88px;
    }

    /* Classe posée par profile-contact.js : la barre (et le retour en haut) se
       retire quand ses boutons sont déjà à l'écran (bandeau du haut de la fiche)
       et pendant le formulaire de contact, dont elle cachait le bouton d'envoi
       et le message de retour. Sans le script, la barre reste toujours là. */
    body.profilBarHidden .profilActionBar,
    body.profilBarHidden .back-top{
        display: none;
    }

    /* Un élément atteint au clavier (Tab) ou amené à l'écran s'arrête au-dessus
       de la bande de la barre fixe au lieu de rester caché dessous. */
    html{
        scroll-padding-bottom: 88px;
    }
}

/* ── Formulaire de contact de la fiche ──────────────────────────────────────

   Reprend le vocabulaire visuel de la page (Afacad, carte blanche arrondie,
   accent #B3C4FF) plutôt que celui du back office. Le bouton réutilise
   .ui-btn : c'est la même action que dans le bandeau, elle doit avoir la
   même tête. */

/* La fiche n'a aucun en-tête collant : 100 px réservés au-dessus du titre
   repoussaient le premier champ vers le bas de l'écran (en paysage, sous la
   barre d'action). Un peu d'air suffit. */
#contacter{
    scroll-margin-top: 16px;
}

.profilContactIntro{
    margin: 0 0 28px 0;
    font-size: 17px;
    color: #434343;
    text-wrap: pretty;
}

.profilContactForm{
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.profilContactRow{
    display: flex;
    flex-direction: row;
    gap: 18px;
}

.profilContactField{
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    margin: 0;
    min-width: 0;
}


/* La règle universelle de style.css (Poppins sur chaque élément) empêchait la
   mention d'hériter l'Afacad de son libellé : elle paraissait plus grosse. */
.profilContactOptional{
    font-family: inherit;
    font-weight: 400;
    color: #6b6b6b;
}

/* Le message d'erreur de l'email réserve sa ligne (ui.css) même vide : seul
   champ à en avoir un, il mettait 24 px de plus avant « Votre téléphone ». Vide,
   il ne prend plus de place et sa marge annule l'écart de la colonne. Pas de
   display: none, qui retirerait la région aria-live de l'arbre d'accessibilité :
   le message ne serait plus annoncé. */
.profilContactField .ui-formError:empty{
    min-height: 0;
    margin-top: -6px;
}





/* Champ piège : invisible et hors du parcours au clavier, mais pas display:none,
   que certains robots savent repérer. */
.profilContactHoneypot{
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}


.profilContactActions{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    margin-top: 6px;
}



.profilContactFeedback{
    font-size: 17px;
    color: #434343;
}

.profilContactFeedback.isSuccess{
    color: #15803d;
}

.profilContactFeedback.isError{
    color: #c01919;
}

@media (max-width: 834px){
    .profilContactRow{
        flex-direction: column;
        gap: 18px;
    }

    .profilContactIntro{
        font-size: 18px;
        margin-bottom: 22px;
    }
}

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

}


/* Bouton WhatsApp : seule la couleur de la marque lui est propre, le reste
   (forme, taille, relief, transition) vient de .ui-btn. La marque est ce qui le
   rend reconnaissable d’un coup d’oeil, elle ne se remplace pas. */
.profilWhatsapp{
    background-color: #25D366;
    border-color: #25D366;
    color: #06331A;
}

.profilWhatsapp:hover{
    background-color: #1EB356;
    border-color: #1EB356;
    color: #06331A;
}

/* Barre d’action fixe du mobile : les boutons s’y partagent la largeur. C’est
   une contrainte de place, pas un style de bouton. */
.profilActionBar .profilActionBtn{
    flex: 1 1 0;
    min-width: 0;
    padding: 0 10px;
    font-size: var(--ui-fs-sm);
}

/* Trois boutons dans 280 à 340 px : l'icône cède la place au libellé, qui
   débordait de sa pastille (« WhatsApp ») */
@media (max-width: 340px){
    .profilActionBar .profilCtaIcon{
        display: none;
    }
}

/* Retour aux résultats : un vrai bouton du système, en version discrète. Un lien
   de texte nu se confondait avec le fil d'Ariane juste au-dessus, alors que ce
   n'est pas la même chose : le fil dit où l'on est, ce bouton ramène où l'on
   était, avec les filtres. Masqué tant que le script n'a pas reconnu une page de
   résultats d'où l'on viendrait. */
.profilBack{
    margin: 0;
}

.profilBackLink{
    gap: 6px;
    padding: 0 14px;
    color: var(--ui-text-muted);
    text-decoration: none;
}

.profilBackLink:hover{
    color: var(--ui-text);
}

/* Le titre AU-DESSUS du carrousel appartient à la page, pas au composant : sur
   l'accueil c'est une accroche de section (42 px), ici c'est la cinquième
   section d'une fiche et il doit suivre les autres. La feuille partagée est
   chargée avant celle-ci, cette règle l'emporte donc sans avoir à surenchérir
   sur la spécificité. */
.titleProvider{
    font-family: 'Afacad';
    font-size: 26px;
    margin: 0 0 16px 80px;
}

/* ── Finitions de la fiche ───────────────────────────────────────────────── */

/* Les étoiles de la note moyenne portent 45x43 en attributs, hérités de la
   maquette : à côté d'un titre de 26 px, elles pesaient plus lourd que lui. La
   taille est reprise ici plutôt que réécrite dans le gabarit, où elles sont
   dessinées trois fois (pleine, demie, vide). */
.fullStarsNumber{
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 10px 0;
}

.fullStarsNumber svg{
    width: 24px;
    height: 23px;
}

/* Le titre du carrousel collait aux cartes, et le carrousel au pied de page. */
.titleProvider{
    margin-bottom: 28px;
}

/* Le titre du carrousel suit les titres de section à chaque palier (26, 24 puis
   22 px). Sous 769 px, il s'aligne sur la première carte (--carousel-edge :
   16 px) : les 80 px du bureau prenaient un quart d'un écran de téléphone. Ces
   règles l'emportent sur les paliers de provider-carousel.css, chargée avant. */
@media (max-width: 834px){
    .titleProvider{
        font-size: 24px;
    }
}

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

@media (max-width: 576px){
    .titleProvider{
        font-size: 22px;
    }
}

/* L'air avant le pied de page va sur celui des deux qui ferme le bloc : les
   flèches quand elles sont là, le carrousel quand le script les a retirées
   parce que toutes les cartes tenaient à l'écran. */
.carouselNav{
    margin-bottom: 72px;
}

.swiperProvider:not(:has(+ .carouselNav)){
    margin-bottom: 72px;
}

/* Sous 835 px les flèches sont masquées sans être retirées : la marge avant le
   pied de page passe au carrousel lui-même (même valeur, sans cumul quand le
   script les a retirées). */
@media (max-width: 834px){
    .swiperProvider{
        margin-bottom: 72px;
    }
}

/* HIÉRARCHIE DANS LES CARTES.

   Titres et contenus étaient à la même taille, de la même graisse et de la
   même couleur : « Henné : » ne se distinguait pas de la valeur qui suit, et le
   texte d'un avis pesait autant que son titre. On lisait un bloc, pas une
   fiche. Les titres gardent leur taille et gagnent du poids ; les contenus
   descendent en taille et en contraste. */
.cardsProfilContainer .titleServices,
.cardsProfilContainer .titleCustomerReviews,
.cardsProfilContainer .titleInfoContact{
    font-weight: 600;
    color: #1F1F1F;
}

.cardsProfilContainer .textServices,
.cardsProfilContainer .textCustomerReviews,
.cardsProfilContainer .textInfoContact,
.cardsProfilContainer .adressContact,
.cardsProfilContainer .textInfoAccessibility,
.cardsProfilContainer .textEquipment{
    font-size: 16px;
    font-weight: 400;
    color: #55565A;
}

/* Un numéro de téléphone ou un site reste un lien : il ne doit pas se fondre
   dans le texte autour. */
.cardsProfilContainer a.textInfoContact{
    color: #1F1F1F;
    font-weight: 500;
}

/* TEXTES SAISIS PAR LE PRO.

   Une adresse web, un @compte ou un nom sans espace ne se coupait nulle part :
   le texte sortait de sa carte et, sur téléphone, élargissait toute la page
   (barre d'action et « haut de page » poussés hors de l'écran). Ces textes se
   coupent désormais au besoin, au milieu d'un mot seulement s'il ne tient pas
   sur une ligne. La règle vise ces seuls textes : héritée de toute la fiche,
   elle couperait aussi les mots ordinaires des colonnes étroites. */
.profilFreeText,
.titleProfil,
.titleServices > span,
.textServices,
.titleCustomerReviews,
.textCustomerReviews{
    overflow-wrap: break-word;
}

/* Le texte d'un titre de prestation est un élément flexible, à côté de son
   icône : sans min-width: 0, il ne descendrait pas sous son mot le plus long. */
.titleServices > span{
    min-width: 0;
}

/* Réseaux sociaux du pro, dans la carte Contact. Une pastille par réseau, avec
   son logo : une simple liste d'adresses en texte serait illisible, les URL de
   comptes sociaux étant longues et toutes semblables. */
/* Les lignes de la carte Contact sont séparées de 8 px, sauf l'adresse qui est
   la dernière et n'en porte pas : les réseaux se retrouvaient collés à elle,
   à 0 px. Un peu plus que 8 ici, parce qu'une rangée de pastilles posée sous
   une adresse de trois lignes a besoin de se détacher pour se lire. */
.profilSocials{
    align-items: flex-start;
    margin-top: 16px;
}

.profilSocialList{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.profilSocialLink{
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 13px;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-r-pill);
    color: var(--ui-text);
    font-size: 15px;
    text-decoration: none;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.profilSocialLink:hover,
.profilSocialLink:focus-visible{
    border-color: var(--ui-accent-strong);
    background-color: var(--ui-surface-soft, #fff);
    color: var(--ui-text);
}

.profilSocialLink .ui-brand{
    color: var(--ui-accent-strong);
}