@import url('reset.css');
@import url('variable.css');
@import url('color.css');
@import url('police.css');


/* .nav{
    height: 160px;  
    border: 1px solid #000;
} */

body{
    overflow-x: hidden !important;
    margin: 0;
    padding: 0;
}

/* Barre de recherche flottante (77 px, 71 px sous 835 px) : une ancre
   (« Comment ça marche ») ou un élément atteint au clavier s'arrête sous elle
   au lieu de passer dessous. 96 px : la barre plus une marge. */
html{
    scroll-padding-top: 96px;
}


main {
    z-index: 6;
}

/* Jonction bandeau / contenu : une bande blanche et, à gauche, un onglet qui remonte sur le bandeau
   (bord gauche droit, coin haut droit arrondi, puis arrondi inversé qui rejoint la bande), avec le
   titre de la première section dans l'onglet.
   La lueur est un drop-shadow sur l'ensemble : elle suit tout le contour, uniforme d'un bout à l'autre.
   clip-path coupe la lueur sous la bande (elle ne doit teinter que le bandeau).
   z-index 0 : au-dessus du dégradé du bandeau, sous la photo (z-index 1), comme l'ancienne lueur. */
.homeWave {
    --wave-glow: rgba(215, 193, 255, 1);
    --wave-corner: 28px;      /* arrondi du coin haut droit de l'onglet */
    --wave-fillet: 32px;      /* arrondi inversé entre l'onglet et la bande */
    --wave-pad: 18px 110px 10px 0;
    --wave-gap: 48px;         /* bande blanche sous la ligne, avant les cartes */
    position: relative;
    z-index: 0;
    height: var(--wave-gap);
    background: var(--color-white);
    filter: drop-shadow(0 -15px 25px var(--wave-glow));
    clip-path: inset(-400px 0 0 0);
}

/* Onglet posé sur le bord haut de la bande (1 px de recouvrement : pas de liseré).
   Sa hauteur suit le titre (qui peut passer sur deux lignes) ; l'arrondi inversé occupe la marge droite. */
.homeWaveRaise {
    position: absolute;
    left: 0;
    bottom: calc(100% - 1px);
    box-sizing: border-box;
    max-width: 100%;
    padding-right: var(--wave-fillet);
}

.homeWaveTab {
    padding: var(--wave-pad);
    background: var(--color-white);
    border-top-right-radius: var(--wave-corner);
}

.homeWaveTab .titleProvider {
    margin-top: 0;
    margin-bottom: 0;
    line-height: 1.1;
    text-wrap: balance;
}

/* Arrondi inversé : carré de taille fixe (quart de cercle exact), calé en bas à droite de l'onglet.
   Le viewBox déborde de 2 % à gauche pour recouvrir le bord de l'onglet (pas de liseré). */
.homeWaveCurve {
    position: absolute;
    right: 0;
    bottom: 0;
    width: calc(var(--wave-fillet) * 1.02);
    height: var(--wave-fillet);
    fill: var(--color-white);
}

@media (max-width: 834px) {
    .homeWave {
        --wave-corner: 22px;
        --wave-fillet: 24px;
        --wave-pad: 14px 70px 8px 0;
        --wave-gap: 36px;
    }
}

@media (max-width: 576px) {
    .homeWave {
        --wave-corner: 16px;
        --wave-fillet: 20px;
        --wave-pad: 12px 40px 6px 0;
        --wave-gap: 28px;
    }
}



header{
    background: linear-gradient(
    135deg,
    rgba(146, 3, 255, 0.1) 25%,
    rgba(253, 186, 255, 0.4) 50%,
    rgba(211, 179, 255, 0.4) 120%
    );
    height: 750px;
}

h2, h3 {
    font-family: 'Poltawski Nowy';
}

h2 span{
    text-transform: uppercase;
}

.titleHome{
    font-family: 'Poltawski Nowy';
    font-size: 58px;
    font-weight: 700;
    line-height: 110%;
    margin-left: 8%;
    margin-top: 54px;
    /* Espace avant le sous-titre, la barre de recherche suit (maquette) */
    margin-bottom: 16px;
    /* Toujours deux lignes égales : sans borne, le titre tenait sur une seule
       ligne à partir de 1402 px de large et filait jusqu'à la photo. À 720 px,
       la coupure tombe après « beauté » même sans text-wrap: balance. */
    max-width: 720px;
    text-wrap: balance;
    position: relative;
    z-index: 5;
}

/* Sous-titre du bandeau : ce que le visiteur vient faire ici */
.subtitleHome{
    font-family: 'Afacad';
    font-size: 22px;
    line-height: 1.4;
    margin: 0 8% 32px 8%;
    max-width: 640px;
    text-wrap: balance;
    position: relative;
    z-index: 5;
}

/* Réassurance sous la barre de recherche */
.heroTrust{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 28px;
    list-style: none;
    max-width: 850px;
    margin: 18px 0 0 8%;
    padding: 0;
    font-family: 'Afacad';
    font-size: 17px;
    color: #1f1f1f;
    position: relative;
    z-index: 5;
}

.heroTrust li{
    display: flex;
    align-items: center;
    gap: 8px;
}

.heroTrust li::before{
    content: '✓';
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    border-radius: 50%;
    background-color: #B3C4FF;
    font-size: 13px;
    line-height: 1;
}

/* Search bar */


/* Choix de la prestation ─────────────────────────────────────────────────
   Remplace le <select> natif, dont le rendu venait du système d'exploitation.
   Bâti sur <details> : voir le gabarit de l'accueil et front/js/homeFilter.js. */


/* Le bouton radio est hors du champ visuel mais reste atteignable au clavier :
   display:none le rendrait inaccessible. */


/* Sous 1280 px les champs passent en largeur fixe (240 px) : le panneau serait plus
   étroit que ses libellés. On le centre sur le champ et on le dimensionne par
   rapport à l'écran, en le bornant pour qu'il n'en sorte jamais. */
@media (max-width: 1280px){
}

/* End choix de la prestation */



/* Barre de recherche du bandeau : le système lui donne sa forme (ui.css), la
   page lui donne sa place.

   z-index 10 et non 5 : la barre crée un contexte d’empilement, donc le panneau
   des prestations qui s’ouvre dedans ne peut jamais dépasser le z-index de la
   barre. À 5, il passait sous la ligne de réassurance (.heroTrust, à 5 elle
   aussi, et placée après dans le HTML). */
.heroSearch{
    position: relative;
    z-index: 10;
    /* 84 % : 8 % de marge de chaque côté, jamais plus large que l'écran
       (entre 835 et 923 px, 100 % + 8 % de marge débordait) */
    max-width: min(850px, 84%);
    margin-left: 8%;
}

@media (max-width: 834px){
    .heroSearch{
        max-width: none;
        margin-left: 0;
    }
}

/* Sous 635 px, la barre passe sur trois rangées (prestation, lieu, bouton) et
   garde une gouttière de 16 px : en ligne, les deux champs tombaient à quelques
   pixels de large entre 280 et 480 px, et la barre touchait les bords de l'écran. */
@media (max-width: 634px){
    .heroSearch{
        flex-wrap: wrap;
        width: calc(100% - 32px);
        border-radius: var(--ui-r-card);
    }

    .heroSearch .ui-searchbar__segment{
        flex: 1 1 100%;
    }

    /* Le filet vertical devient une ligne entre les deux champs */
    .heroSearch .ui-searchbar__rule{
        flex: 1 1 100%;
        height: 1px;
        margin: 0 16px;
    }

    .heroSearch .ui-searchbar__action{
        flex: 1 1 100%;
        margin: 6px 0 0 0;
    }

    .heroSearch .ui-searchbar__action .ui-btn{
        width: 100%;
    }

    /* Panneau des prestations calé sous le champ prestation et sur sa largeur :
       il recouvre le lieu et le bouton comme une liste déroulante, ne sort pas
       de l'écran et reste visible au premier écran (ouvert sous la barre entière,
       il commençait sous le pli d'un petit téléphone). */
    .heroSearch .ui-select{
        position: static;
    }

    .heroSearch .ui-searchbar__segment:first-child{
        position: relative;
    }

    .heroSearch .ui-select__panel{
        top: calc(100% + 4px);
        left: 0;
        right: 0;
        width: auto;
        max-width: none;
    }
}

/* Menu mobile ouvert : le <nav> plafonne le menu plein écran à son propre
   z-index (10), et la barre du bandeau, au même niveau mais placée après lui,
   passait devant le menu ; sur trois rangées, elle rendait « Connexion » et
   « Vous êtes pro ? » inatteignables sur un petit téléphone. Elle repasse sous
   le menu tant qu'il est ouvert, et retrouve son niveau 10 à la fermeture (son
   panneau doit passer devant la réassurance). Même seuil que le menu burger
   (nav.css). */
@media (max-width: 1023.98px){
    body.nav-open .heroSearch{
        z-index: 0;
    }
}

/* Pictures */

.hero-slider-wrapper {
    position: absolute;
    right: 0;
    top: 120px;
    width: 630px;
    height: 630px;
    /* Au-dessus de la jonction en vague et de sa lueur (.homeWave, z-index 0) */
    z-index: 1;
}

.hero-slider {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
}

.hero-slider img {
    position: absolute;
    right: 0;
    width: 100%;
    object-fit: cover;

    opacity: 0;
    transition: opacity 1s ease; 
}

.hero-slider img.active {
    opacity: 1;
}

/* End pictures */

/* Carousel provider */
/* Lien vers la liste complète, sous le carrousel des pros du moment */
.linkAllProsWrap{
    display: flex;
    justify-content: center;
    margin: 18px 0 0 0;
}

.linkAllPros{
    font-family: 'Afacad';
    font-size: 18px;
    color: #000;
    text-decoration: underline;
    text-underline-offset: 4px;
    transition: 0.2s ease;
}

.linkAllPros:hover{
    color: #4D3DFF;
}

/* End carousel provider */


/* Prestations : accroche, repères de confiance et tuiles par famille de rubriques */

.prestationsHome{
    box-sizing: border-box;
    width: 100%;
    padding: 90px 5% 0 5%;
}

.prestationsInner{
    max-width: 1500px;
    margin: 0 auto;
}

/* Texte à gauche, image d'ambiance à droite. Le fichier d'ambiance est facultatif :
   sans lui le gabarit pose .prestationsIntroSolo et le texte prend toute la largeur. */
.prestationsIntro{
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr);
    align-items: center;
    gap: 40px;
    margin: 0 0 40px 0;
}

.prestationsIntroSolo{
    grid-template-columns: minmax(0, 1fr);
}

/* Accroche à gauche, repères de confiance à droite, alignés sur la même ligne de base.
   Faute de place (petit écran), les repères repassent sous l'accroche. */
.prestationsText{
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 22px 48px;
    min-width: 0;
}

/* Base large : les repères passent à la ligne avant que l'accroche ne soit
   assez serrée pour couper « Que recherchez-vous ? » en deux. */
.prestationsHeading{
    flex: 1 1 470px;
    min-width: 0;
}

/* Avec l'image d'ambiance, la colonne de texte est trop étroite pour deux blocs :
   on retrouve l'empilement d'origine. */
.prestationsIntro:not(.prestationsIntroSolo) .prestationsText{
    display: block;
}

.prestationsTitle{
    font-family: 'Poltawski Nowy';
    font-size: 42px;
    font-weight: 600;
    margin: 0 0 12px 0;
}

.prestationsLead{
    font-family: 'Afacad';
    font-size: 19px;
    color: #3A3A3A;
    margin: 0;
    max-width: 46ch;
}

/* Repères de confiance : portraits de pros publiés, note moyenne et nombre d'avis.
   Le bloc entier n'est rendu que s'il existe au moins un avis actif. */
.prestationsTrust{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px 20px;
    margin: 0;
}

/* Empilé sous l'accroche (avec l'image d'ambiance) : l'espacement revient */
.prestationsIntro:not(.prestationsIntroSolo) .prestationsTrust{
    margin-top: 28px;
}

.prestationsFaces{
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

.prestationsFaces li{
    margin-left: -16px;
}

.prestationsFaces li:first-child{
    margin-left: 0;
}

.prestationsFaces img{
    display: block;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #fff;
    background-color: #F0F0F0;
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}

.prestationsTrustText{
    min-width: 0;
}

.prestationsNote{
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.prestationsStars{
    display: inline-flex;
    gap: 2px;
}

.prestationsStars svg{
    display: block;
}

.prestationsScore{
    font-family: 'Afacad';
    font-size: 20px;
    font-weight: 600;
}

.prestationsCount{
    font-family: 'Afacad';
    font-size: 16px;
    color: #5A5A5A;
    margin: 2px 0 0 0;
}

.prestationsMedia{
    min-width: 0;
}

.prestationsMedia img{
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 24px;
}

/* Tuiles : une par famille affichable, photo de la famille en fond quand elle en a une.
   Le nombre de colonnes suit le nombre de tuiles (classe posée par le gabarit) : moins de
   quatre familles remplissent la rangée au lieu de laisser un trou à droite. */
.prestationsGrid{
    --prestations-gap: 20px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--prestations-gap);
    list-style: none;
    margin: 0 auto;
    padding: 0;
    max-width: 1500px;
}

.prestationsGridCount3{
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.prestationsGridCount2{
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.prestationsGridCount1{
    grid-template-columns: minmax(0, 1fr);
    max-width: 420px;
}

.prestationsTile{
    min-width: 0;
}

.prestationsTileLink{
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    box-sizing: border-box;
    width: 100%;
    /* Format portrait, mais hauteur plafonnée : peu de familles (ou un écran large)
       donnent des colonnes très larges, la tuile ne devient pas démesurée pour autant. */
    aspect-ratio: 4 / 5;
    max-height: 460px;
    padding: 22px 24px;
    border-radius: 22px;
    overflow: hidden;
    color: #fff;
    text-decoration: none;
    background-color: #EDE7FF;
    transition: transform 0.3s ease;
}

.prestationsTileLink:hover,
.prestationsTileLink:focus-visible{
    transform: translateY(-5px);
}

.prestationsTileLink:focus-visible{
    outline: 3px solid #4D3DFF;
    outline-offset: 3px;
}

.prestationsTileImg{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Voile dégradé du bas : lisibilité du texte garantie quelle que soit la photo */
.prestationsTileVeil{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 75%;
    background: linear-gradient(to top, rgba(17,12,35,0.90) 0%, rgba(17,12,35,0.62) 45%, rgba(17,12,35,0) 100%);
}

.prestationsTileBody{
    position: relative;
    min-width: 0;
    padding-right: 54px;
}

.prestationsTileName{
    display: block;
    font-family: 'Poltawski Nowy';
    font-size: 26px;
    font-weight: 600;
    line-height: 1.15;
}

.prestationsTileList{
    display: block;
    margin-top: 6px;
    font-family: 'Afacad';
    font-size: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.prestationsTileArrow{
    position: absolute;
    right: 20px;
    bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: #fff;
    color: #1F1F1F;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.prestationsTileLink:hover .prestationsTileArrow,
.prestationsTileLink:focus-visible .prestationsTileArrow{
    background-color: #D4B4FF;
    transform: translateX(3px);
}

/* Tuile sans photo : hauteur réglée par son contenu (pas de format imposé comme
   la tuile photo, qui laisserait un grand vide entre le pictogramme et le texte),
   texte noir sur violet clair, pictogramme en haut. */
.prestationsTileFlat .prestationsTileLink{
    color: #000;
    aspect-ratio: auto;
    min-height: 0;
    height: 100%;
    padding: 20px 22px;
}

.prestationsTileFlat .prestationsTileList{
    color: #1F1F1F;
}

/* Pictogramme des tuiles sans image : carré blanc, trait noir, comme les icônes
   de « Recherchez / Découvrez / Contactez ». Poussé en haut, le texte reste en bas. */
.prestationsTileIcon{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 68px;
    height: 68px;
    margin-bottom: 24px;
    border-radius: 16px;
    background-color: #fff;
    color: #1F1F1F;
    transition: transform 0.3s ease;
}

.prestationsTileLink:hover .prestationsTileIcon,
.prestationsTileLink:focus-visible .prestationsTileIcon{
    transform: translateY(-2px);
}

.prestationsTone1 .prestationsTileLink{ background-color: #B4C5FF; }
.prestationsTone2 .prestationsTileLink{ background-color: #D4B4FF; }
.prestationsTone3 .prestationsTileLink{ background-color: #C6B5FF; }

.prestationsAllWrap{
    display: flex;
    justify-content: center;
    margin: 28px 0 0 0;
}

.prestationsAll{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 0 6px;
    font-family: 'Afacad';
    font-size: 18px;
    color: #000;
    text-decoration: underline;
    text-underline-offset: 4px;
    transition: color 0.2s ease;
}

.prestationsAll:hover{
    color: #4D3DFF;
}

.prestationsAll svg{
    transition: transform 0.2s ease;
}

.prestationsAll:hover svg{
    transform: translateX(4px);
}

/* 4 tuiles par ligne à partir de 1200 px, 2 en dessous : rien n'est jamais masqué */
@media (max-width: 1199px){
    .prestationsGrid,
    .prestationsGridCount3,
    .prestationsGridCount2{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Nombre impair de tuiles : la dernière, seule sur sa ligne, est centrée
       plutôt que collée à gauche avec un vide à droite. */
    .prestationsGrid:not(.prestationsGridCount1) > .prestationsTile:last-child:nth-child(odd){
        grid-column: 1 / -1;
        justify-self: center;
        width: calc(50% - var(--prestations-gap) / 2);
    }
}

/* Sous 1000 px l'image d'ambiance passe sous le texte */
@media (max-width: 999px){
    .prestationsIntro{
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
    }

    .prestationsLead{
        max-width: none;
    }

    .prestationsMedia img{
        aspect-ratio: 16 / 9;
    }
}

@media (max-width: 634px){
    /* Mobile : l'image d'ambiance laisse la place au texte (comme le carrousel du
       bandeau) et la flèche passe sous le texte, faute de place pour la superposer. */
    .prestationsMedia{
        display: none;
    }

    .prestationsFaces img{
        width: 44px;
        height: 44px;
    }

    .prestationsTileLink{
        aspect-ratio: 3 / 4;
        padding: 16px;
    }

    .prestationsTileBody{
        padding-right: 0;
    }

    .prestationsTileName{
        font-size: 20px;
    }

    /* Colonnes étroites : la liste tient sur deux lignes plutôt que d'être
       coupée au premier mot. */
    .prestationsTileList{
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        font-size: 14px;
        line-height: 1.25;
        white-space: normal;
    }

    .prestationsTileArrow{
        position: relative;
        right: auto;
        bottom: auto;
        align-self: flex-end;
        margin-top: 10px;
        width: 36px;
        height: 36px;
    }
}

@media (max-width: 400px){
    .prestationsGrid{
        --prestations-gap: 12px;
    }

    .prestationsTileLink{
        padding: 12px;
        border-radius: 18px;
    }

    .prestationsTileName{
        font-size: 18px;
    }

    .prestationsTileArrow{
        width: 32px;
        height: 32px;
    }
}

/* End prestations */


/* Explanations */

.containerExplanations{
    display: flex;
    flex-direction: row;
    /* Les colonnes démarrent en haut : icônes et titres restent alignés quelle que soit la longueur des textes */
    align-items: flex-start;
    justify-content: center;
    gap: 50px 12%;
    width: 100%;
    margin: 120px 0 120px 0;
    flex-wrap: wrap;
}

.groupExplanations{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 0 0 15%;
    flex-basis: 220px;
}

.groupExplanations p{
    text-align: center;
    text-wrap: balance;
}

.svgExplanations{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 150px;
    height: 100px;
    border-radius: 15px;
}

.svgE01{
    background-color: #B3C4FF;
}

.svgE02{
    background-color: #D3B3FF;
}

.svgE03{
    background-color: #B9B3FF;
}

.titleExplanations{
    font-family: 'Poltawski Nowy';
    font-weight: 600;
    font-size: 32px;
    margin: 10px 0 20px 0;
}

.textExplanations{
    font-family: 'Afacad';
    font-size: 17px;
    margin: 0;
}

/* End explanations */


/* Illustration du bandeau d'avis (tailles réglées plus bas par largeur) */
.imgManReviews{
    position: relative;
    left: 1%;
    margin-top: auto;
    margin-right: 100px;
    height: 332px;
}

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

/* End pourquoi BRFB */


/* Pub */

/* Section volontairement discrète : ce sont des encarts partenaires, pas du
   contenu. Une seule rangée, des cartes plus petites, moins de marges. */
.pubHome{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 0 56px 0;
}

.titlePubHome{
    font-size: 32px;
    margin: 0 0 24px 0;
    font-weight: 600;
    text-align: center;
}

/* Rangée fixe : chaque partenaire une seule fois, centrés, à la ligne faute de
   place. Le défilé perpétuel d'avant ne s'arrêtait ni au survol ni au focus et
   emportait hors du cadre le lien atteint au clavier ; avec deux partenaires,
   il fallait en plus répéter chacun quatre fois pour le remplir. */
.pubHome .wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
    box-sizing: border-box;
    width: 100%;
    padding: 0 16px;
}

.itemLeft {
    width: 300px;
    height: 120px;
    background-color: #fff;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
}

.itemLeft a {
    display: block;
    height: 100%;
}

/* Visuels au format 2:1 dans une carte plus allongée : contain les montre
   entiers (cover en rognait le haut et le bas), le fond blanc de la carte
   forme les bandes latérales. */
.itemLeft img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* La carte rogne ce qui la dépasse, contour du lien compris : le contour du
   focus clavier est donc porté par la carte. */
.itemLeft:has(a:focus-visible) {
    outline: 2px solid #4D3DFF;
    outline-offset: 3px;
}

/* Responsive */

@media (max-width: 1024px) {
    .titlePubHome{
        font-size: 28px;
    }

    .itemLeft {
        width: 280px;
        height: 112px;
    }
}

@media (max-width: 768px) {
    .pubHome{
        padding: 28px 0 40px 0;
    }

    .titlePubHome{
        font-size: 24px;
    }

    .itemLeft {
        width: 240px;
        height: 96px;
    }
}

/* End pub */

/* CTA Home */

.ctaHome{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-color: #F4F4F4;
    padding: 40px 0 40px 0;
    width: 100%;
}

.titleCtaHome{
    font-size: 42px;
    font-weight: 600;
    margin: 0;
}

.textCtaHome{
    font-family: 'Afacad';
    font-size: 19px;
    font-weight: 400;
    text-wrap: balance;
    margin: 10px 0 20px 0;
    width: 35%;
}



.noteCtaHome{
    font-family: 'Afacad';
    font-size: 15px;
    color: #434343;
    margin: 14px 0 0 0;
}

/* End CTA Home */


@media (min-width: 1680px){
    .roundShape1680{
        display: none;
    }
}

@media (max-width: 1679.98px){
     .roundShape1680{
        width: 100%;
    }
}

@media (max-width: 1280px){
    header{
        height: 1010px;
    }

    /* La photo reste calée sur le bas du bandeau */
    .hero-slider-wrapper{
        top: 380px;
    }

    /* Réassurance en colonne, hors de la photo, alignée sur le titre et la
       barre de recherche (8 %, comme eux) */
    .heroTrust{
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        max-width: 330px;
        margin-left: 8%;
    }


    /* Assez large pour le libellé « Où ? Code postal ou ville » */


}

@media (max-width: 1263px){
    .imgManReviews{
        left: 6%;
    }
}

@media (max-width: 1145px){
    .imgManReviews{
        left: 6%;
    }
}

@media (max-width: 1127px){
    .imgManReviews{
        height: 190px;
        left: 5%;
    }
}

@media (max-width: 1048px){
    header{
        height: 1010px;
    }

    .hero-slider-wrapper{
        top: 380px;
    }

    .containerExplanations{
        margin: 100px 0 100px 0;
    }
}

@media (max-width: 900px){


    .imgManReviews{
        height: 190px;
        left: 12%;
        margin-right: 0;
        width: 0;
    }

}

@media (max-width: 870px){
    .imgManReviews{
        height: 190px;
        left: 12%;
    }
}

@media (max-width: 834px){
    header{
        height: 1020px;
    }

    .prestationsTitle,
    .titleHowItWorks{
        font-size: 32px;
    }

    .titleCtaHome{
        font-size: 32px;
    }

    .hero-slider-wrapper{
        top: 390px;
    }

    /* Bandeau en colonne : titre, sous-titre, recherche et réassurance se suivent
       avec un écart réduit (le sous-titre et la réassurance sont des ajouts). */
    .titleCards{
        width: 100%;
        display: flex;
        flex-direction: column;
        padding: 5% 5% 0 5%;
        gap: 20px;
    }

    .titleHome{
        margin: 0;
    }

    .subtitleHome{
        margin: 0;
        max-width: 100%;
        font-size: 19px;
    }

    .heroTrust{
        margin: 0;
        gap: 8px 20px;
        font-size: 16px;
    }








    .imgManReviews{
        height: 190px;
        left: 0;
    }

    .textCtaHome{
        width: 80%;
        font-size: 17px;
    }

    .prestationsHome{
        padding-top: 70px;
    }

    .titleHowItWorks{
        margin-top: 90px;
    }


}

/* 635-979 px : la photo de 630 px, calée à droite, recouvrait le titre de
   l'onglet « Les pros du moment ». Réduite à 400 px, elle reste calée sur le
   bas du bandeau (1020 px de haut jusqu'à 834 px, 1010 px au-delà) : ces top
   suivent les hauteurs du bandeau, à reprendre si elles changent. Placé après
   les blocs 1280, 1048 et 834 px, dont il remplace le top. */
@media (min-width: 635px) and (max-width: 834px){
    .hero-slider-wrapper{
        width: 400px;
        height: 400px;
        top: 620px;
    }
}

@media (min-width: 835px) and (max-width: 979px){
    .hero-slider-wrapper{
        width: 400px;
        height: 400px;
        top: 610px;
    }
}

@media (min-width: 635px) and (max-width: 979px){
    /* Les attributs width/height (630) des <img> fixent leur hauteur à 630 px :
       sans cette règle, seul le haut de la photo resterait visible */
    .hero-slider img{
        height: 100%;
    }
}

@media (max-width: 768px){
    .titleHome{
        font-size: 48px;
    }



    .imgManReviews{
        height: 190px;
    }
}

@media (max-width: 755px){
    .imgManReviews{
        height: 170px;
    }
}

@media (max-width: 634px){
    /* Photo masquée : le bandeau suit son contenu (une hauteur fixe de 900 px
       laissait jusqu'à 400 px de dégradé vide). La marge basse laisse la place à
       l'onglet « Les pros du moment », qui remonte dans le bandeau (jusqu'à
       ~80 px quand son titre passe sur deux lignes). En em (110 px au corps de
       16 px de l'en-tête) : quand le navigateur agrandit le texte seul, la marge
       grandit avec l'onglet qu'elle loge au lieu de le laisser recouvrir la
       réassurance. */
    header{
        height: auto;
        padding-bottom: 6.875em;
    }

    .titleCards{
        align-items: center;
        padding: 5% 0 0 0;
    }

    .titleHome{
        font-size: 32px;
        width: 80%;
    }

    /* Titre, sous-titre et réassurance partent du même bord gauche, comme
       au-dessus de 634 px : le sous-titre et la réassurance étaient centrés
       sous un titre aligné à gauche. Seule la carte de recherche est centrée. */
    .subtitleHome{
        width: 80%;
    }

    /* Sans la borne de 330 px du bloc 1280 px : centrée par .titleCards, la
       liste ne partirait plus du bord du titre dès 413 px de large. */
    .heroTrust{
        width: 80%;
        max-width: none;
    }

    .hero-slider-wrapper{
        display: none;
    }

    .imgManReviews{
        height: 150px;
    }

}

@media (max-width: 576px){
    .prestationsTitle,
    .titleHowItWorks{
        font-size: 28px;
    }

    .titleCtaHome{
        font-size: 28px;
    }
    
    .titleCards{
        gap: 18px;
    }

    .titleHome{
        width: 80%;

    }

    .subtitleHome{
        font-size: 17px;
    }

    .heroTrust{
        font-size: 15px;
        gap: 6px 16px;
    }








    .titleExplanations{
        font-size: 22px;
    }

    .textExplanations{
        font-size: 15px;
    }   
}

@media (max-width: 566px){
    .imgManReviews{
        height: 110px;
    }
}

@media (max-width: 473px){
    .imgManReviews{
        height: 100px;
    }
}

@media (max-width: 439px){
    .imgManReviews{
        height: 90px;
    }
}

@media (max-width: 400px){
    .imgManReviews{
        display: none;
    }
}

/* ── Avis de l'accueil : styles restaurés avec la section ── */

/* End explanations */


/* Carousel reviews */

.containerCustomerReviewsH{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 70px 0 0 0;
    margin: 80px 0 80px 0;
    background-color: #F4F4F4;
    overflow: hidden;
}

.textTitleCustomerReviewsH{
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 40%;
    text-align: left;
    text-wrap: balance;
}

.titleCustomerReviewsH{
    font-size: 42px;
    font-weight: 600;
}

.textCustomerReviewsH{
    font-family: 'Afacad';
    font-size: 19px;
}

.groupCustomerReviewsH{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 60%;
    margin: 0;
    padding-bottom: 70px;
}

.cardsCustomerReviewsH{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    font-family: 'Afacad';
}

.swiperReviewsH {
    width: 245px;
    height: 330px;
    margin: 0;
}

.textTitleReviewsH{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    margin: 0;
    color: #000;
    width: 80%;
    margin: auto;
}

.titleReviewsH{
    margin: 0;
    font-size: 24px;
    font-weight: 500;
}

.textReviewsH{
    margin: 0;
    font-size: 17px;
    font-weight: 400;
    width: 95%;
}

.CustomerInformationsH{
    margin: 0;
    width: 80%;
    margin: auto 0 20px 0;
}

.nameCustomerH{
    margin: 0;
    color: #434343;
    font-size: 15px;
}

.companyNameCustomerH{
    margin: 0;
    color: #434343;
    font-size: 15px;
}

@media (max-width: 1127px) {
    .groupCustomerReviewsH{
        width: 70%;
    }

    .textTitleCustomerReviewsH{
        width: 50%;
    }
}

@media (max-width: 900px) {
    .groupCustomerReviewsH{
        flex-direction: column;
        margin-left: 0;
        gap: 50px;
        width: 100%;
    }

    .cardsCustomerReviewsH{
        order: 1;
    }

    .textTitleCustomerReviewsH{
        text-align: center;
    }

    .titleCustomerReviewsH{
        margin: 0;
    }
}

@media (max-width: 834px) {
    .titleCustomerReviewsH{
        font-size: 32px;
    }

    .groupCustomerReviewsH{
        width: 90%;
    }

    .textCustomerReviewsH{
        font-size: 17px;
    }

    .textReviewsH{
        font-size: 17px;
    }
}

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

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

@media (max-width: 566px) {
    .containerCustomerReviewsH{
        width: 100%;
    }
}

/* ── Cartes du carrousel d'avis (restaurées avec la section) ── */

.fullStarReviews {
    width: 80%;
    margin: 20px 0 0 0;
}

.fullStarReviews svg {
    width: 19px;
}

.swiper-slide {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
}

.swiper-slide:nth-child(1n) {
    background-color: #B3C4FF;
}

.swiper-slide:nth-child(2n) {
    background-color: #EBB3FF;
}

.swiper-slide:nth-child(3n) {
    background-color: #D3B3FF;
}

.swiper-slide:nth-child(4n) {
    background-color: #B9B3FF;
}

.swiper-slide:nth-child(5n) {
    background-color: #FFB3F5;
}

.swiper-slide:nth-child(6n) {
    background-color: #DCC4FF;
}

.swiper-slide:nth-child(7n) {
    background-color: #EBB3FF;
}

.swiper-slide:nth-child(8n) {
    background-color: #B3C4FF;
}

.swiper-slide:nth-child(9n) {
    background-color: #D3B3FF;
}

.swiper-slide:nth-child(10n) {
    background-color: #B9B3FF;
}