/* ==========================================================
   ACCUEIL - MOBILE <= 767.98px
   ========================================================== */

@media screen and (max-width: 767.98px) {
    /* ---- PRESENTATION ---- */

    .presentation {
        position: relative;
        width: 100%;
        max-width: 100%;
        overflow-x: clip;
    }

    .presentation__row {
        position: relative;
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: 100%;
        margin-top: 3rem !important;
        margin-right: 0;
        margin-left: 0;
        --bs-gutter-x: 0;
        align-items: stretch;
    }

    .presentation__content {
        position: relative;
        flex: 0 0 100%;
        width: 100%;
        max-width: 100%;
        padding-right: clamp(20px, 6vw, 32px);
        padding-left: clamp(20px, 6vw, 32px);
        box-sizing: border-box;
    }

    .presentation__intro {
        width: 100%;
        max-width: none;
        margin-top: 0;
        margin-bottom: 2rem;
        font-size: clamp(16px, 4.3vw, 19px) !important;
        line-height: 1.5;
        overflow-wrap: break-word;
        word-break: normal;
        hyphens: none;
    }

    .presentation__content > picture {
        display: block;
    }

    .presentation__content > picture img, .presentation__content .text-end img {
        display: block;
        width: clamp(180px, 55vw, 260px);
        max-width: 100%;
        height: auto;
    }

    .presentation__content .text-end {
        display: flex;
        justify-content: flex-end;
        width: 100%;
        margin-top: 1.5rem;
    }

    .presentation__texte-fort {
        width: 100%;
        max-width: none;
        margin-top: 2rem !important;
        margin-bottom: 0;
        font-size: clamp(29px, 8vw, 38px) !important;
        line-height: 1.16 !important;
        overflow-wrap: normal;
        word-break: normal;
        hyphens: none;
    }

    .presentation__visual {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 100%;
        width: 100%;
        max-width: 100%;
        margin-top: 2.5rem;
        padding-right: clamp(16px, 4vw, 24px);
        padding-left: clamp(16px, 4vw, 24px);
        box-sizing: border-box;
        overflow: visible;
    }

    .presentation__picture {
        position: relative;
        display: block;
        flex-shrink: 1;
        width: min(460px, 100%);
        max-width: 100%;
        margin-right: auto;
        margin-left: auto;
        overflow: visible;
    }

    .presentation__picture img {
        display: block;
        width: 100%;
        max-width: 100%;
        height: auto;
        object-fit: contain;
    }


    /* ---- CLIM ATOUTS ---- */

    .clim-atouts {
        padding-top: 42px;
        padding-bottom: 42px;
    }

    .clim-atouts .container {
        padding-right: 22px;
        padding-left: 22px;
    }

    .clim-atouts__grid {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .clim-atouts__item {
        justify-content: initial;
        width: min(300px, 100%);
        margin-right: auto;
        margin-left: auto;
        gap: 24px;
        display: grid;
        grid-template-columns: 42px minmax(0, 1fr);
        align-items: center;
    }

    .clim-atouts__icon {
        width: 36px;
    }

    .clim-atouts__text {
        font-size: clamp(27px, 8vw, 35px) !important;
        line-height: 1.16;
    }

    .clim-atouts__background {
        display: none !important;
    }


    /* ---- CLIMATISATION / BLOCS IMAGE-TEXTE ---- */

    .climatisation {
        background-position: left top;
    }

    .climatisation__content {
        padding: 45px clamp(20px, 6vw, 32px);
    }

    .climatisation__title {
        font-size: clamp(27px, 8vw, 34px);
    }

    .climatisation__trait {
        width: clamp(160px, 55vw, 230px);
        margin-top: 18px;
        margin-bottom: 32px;
    }

    .climatisation__content p {
        max-width: none;
        font-size: clamp(15px, 4.2vw, 18px);
        line-height: 1.5;
    }

    .climatisation__button {
        min-height: 44px;
        margin-top: 18px;
        font-size: 15px;
    }

    .climatisation__right {
        min-height: 0;
    }

    .climatisation__picture {
        position: relative;
        inset: auto;
        width: 100%;
        height: auto;
    }

    .climatisation__picture img {
        width: 100%;
        max-width: 100%;
        height: auto;
        object-fit: contain;
    }


    /* ---- AUTRES PRODUITS ---- */

    .autres-produits {
        padding: 50px 0 65px;
    }

    .autres-produits__grille {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 45px 25px;
        width: 100%;
        padding: 0 20px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .autres-produits__logo {
        order: 1;
        width: 170px;
        margin: 0 auto;
        grid-column: 1 / -1;
        grid-row: 1;
    }

    .produit--poele {
        order: 2;
        grid-column: 1;
        grid-row: 2;
    }

    .produit--brasero {
        order: 3;
        grid-column: 2;
        grid-row: 2;
    }

    .produit {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        gap: 20px;
    }

    .produit__contenu {
        width: min(100%, 240px);
        flex: none;
    }

    .produit--poele .produit__visuel img {
        width: 175px;
    }

    .produit--brasero .produit__visuel img {
        width: 245px;
    }


    /* ---- PRESTATIONS RÉNOVATION ---- */

    .prestations-renovation {
        padding: 55px
                    clamp(20px, 6vw, 32px)
                    95px;
    }

    .prestations-renovation::after {
        bottom: -58px;
        height: 85px;
        transform: rotate(3deg);
    }

    .prestations-renovation__grille {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 45px;
        max-width: 420px;
    }

    .prestation-renovation,
    .prestation-renovation:nth-child(5) {
        width: 100%;
        margin: 0;
    }

    .prestation-renovation__icone {
        width: 50px;
        height: 50px;
        margin-bottom: 14px;
    }

    .prestation-renovation__titre {
        font-size: clamp(20px, 6vw, 24px);
    }

    .prestation-renovation__trait {
        width: min(180px, 65%);
        margin-top: 9px;
    }


    /* ---- SERVICES PISCINE ---- */

    .piscine-services {
        padding: 30px 15px 40px;
    }

    .piscine-services__grid {
        grid-template-columns: 1fr;
        gap: 38px;
    }

    .piscine-services__item,
    .piscine-services__item--liner {
        grid-column: auto;
        width: 100%;
        max-width: 100%;
    }

    .piscine-services__icon,
    .piscine-services__icon img {
        width: 82.39px;
        height: 82.39px;
    }

    .piscine-services__title {
        font-size: 18px;
        line-height: 1.4;
    }

    .piscine-services__trait {
        width: 145px;
    }


    /* ---- SUIVI SERVICE ---- */

    .suivi-service {
        padding: 30px 15px 25px;
    }

    .suivi-service__icon,
    .suivi-service__icon img {
        width: 84.33px;
        height: 84.33px;
    }

    .suivi-service__title {
        font-size: 20px;
        line-height: 1.4;
    }

    .suivi-service__trait {
        width: 170px;
    }


    /* ---- EXPERT / SOCIAL ---- */

    .pbc-expert {
        min-height: auto;
    }

    .pbc-expert__container {
        grid-template-columns: 1fr;
        width: min(620px, calc(100% - 32px));
        min-height: auto;
    }

    .pbc-expert__visual {
        --person-width: min(220px, 68vw);
        min-height: 335px;
    }

    .pbc-expert__person {
        top: 10px;
        right: auto;
        left: 50%;
        transform: translateX(-50%);
        bottom: 0;
        width: min(220px, 68vw);
        height: 315px;
    }

    .pbc-expert__button {
        top: auto;
        right: auto;
        bottom: 18px;
        left: 50%;
        transform: translateX(-50%);
    }

    .pbc-expert__button:hover {
        transform: translateX(-50%) translateY(-2px);
    }

    .pbc-expert__content {
        width: min(500px, 100%);
        margin-right: auto;
        margin-left: auto;
        padding: 30px 0 78px;
        margin: 0 auto;
    }

    .pbc-expert__list {
        gap: 15px;
    }

    .pbc-expert__item {
        grid-template-columns: 18px minmax(0, 1fr);
        gap: 13px;
        font-size: 15px;
    }

    .pbc-social {
        padding-top: 29px;
    }

    .pbc-social::before {
        top: -39px;
        height: 40px;
        clip-path: polygon(
                    0 0,
                    100% 75%,
                    100% 100%,
                    0 100%
            );
    }


    /* ---- LABELS ---- */

    .labels-section {
        padding: 40px
                    clamp(16px, 5vw, 28px)
                    55px;
    }

    .labels-section__title {
        font-size: clamp(32px, 10vw, 42px);
    }

    .labels-section__trait {
        width: min(220px, 65vw);
        margin-top: 12px;
    }

    .labels-section__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: clamp(15px, 5vw, 30px);
        row-gap: 30px;
        margin-top: 40px;
    }

    .labels-section__item {
        min-height: 105px;
        padding: 8px;
    }

    .labels-section__item--eparco img {
        width: min(100%, 175px);
    }

    .labels-section__item--everblue img {
        width: min(100%, 135px);
    }

    .labels-section__item--qualipac img,
    .labels-section__item--qualibois img {
        width: min(100%, 130px);
    }
}

@media screen and (max-width: 480px) {
    /* ---- EXPERT / SOCIAL ---- */

    .pbc-expert__container {
        width: calc(100% - 24px);
    }

    .pbc-expert__visual {
        --person-width: min(205px, 72vw);
        min-height: 310px;
    }

    .pbc-expert__person {
        top: 8px;
        width: min(205px, 72vw);
        height: 290px;
    }

    .pbc-expert__button {
        bottom: 14px;
        min-height: 35px;
        padding: 8px 14px;
        font-size: 12px;
    }

    .pbc-expert__content {
        padding: 25px
                    0
                    66px;
        padding-top: 25px;
        padding-bottom: 66px;
    }

    .pbc-expert__list {
        gap: 14px;
    }

    .pbc-expert__item {
        align-items: start;
        font-size: 14px;
        line-height: 1.45;
    }

    .pbc-expert__check {
        margin-top: 2px;
    }

    .pbc-social {
        min-height: 250px;
        padding: 27px 16px 40px;
    }

    .pbc-social__title {
        display: block;
        font-size: 29px;
        line-height: 1.08;
    }

    .pbc-social__title strong,
    .pbc-social__title span {
        display: block;
    }

    .pbc-social__title span {
        margin-top: 3px;
    }

    .pbc-social__line {
        width: 105px;
        height: 9px;
        margin-top: 11px;
        margin-bottom: 20px;
    }

    .pbc-social__text {
        max-width: 330px;
        font-size: 13px;
    }

    .pbc-social__text br {
        display: none;
    }
}

@media screen and (max-width: 420px) {
    /* ---- CLIM ATOUTS ---- */

    .clim-atouts {
        padding-top: 38px;
        padding-bottom: 38px;
    }

    .clim-atouts__grid {
        gap: 32px;
    }

    .clim-atouts__item {
        width: min(280px, 100%);
        grid-template-columns: 36px minmax(0, 1fr);
        gap: 20px;
    }

    .clim-atouts__icon {
        width: 32px;
    }

    .clim-atouts__text {
        font-size: clamp(25px, 8vw, 31px) !important;
    }


    /* ---- LABELS ---- */

    .labels-section {
        padding-right: 14px;
        padding-left: 14px;
    }

    .labels-section__grid {
        column-gap: 12px;
        row-gap: 24px;
    }

    .labels-section__item {
        min-height: 90px;
        padding: 6px;
    }

    .labels-section__item--eparco img {
        width: min(100%, 145px);
    }

    .labels-section__item--everblue img {
        width: min(100%, 112px);
    }

    .labels-section__item--qualipac img,
    .labels-section__item--qualibois img {
        width: min(100%, 108px);
    }
}

@media screen and (max-width: 360px) {
    /* ---- EXPERT / SOCIAL ---- */

    .pbc-expert__visual {
        --person-width: min(190px, 74vw);
        min-height: 292px;
    }

    .pbc-expert__person {
        width: min(190px, 74vw);
        height: 272px;
    }

    .pbc-expert__item {
        font-size: 13.5px;
    }

    .pbc-social__title {
        font-size: 27px;
    }
}

@media screen and (max-width: 340px) {
    /* ---- LABELS ---- */

    .labels-section__grid {
        grid-template-columns: 1fr;
        row-gap: 20px;
    }

    .labels-section__item {
        min-height: 90px;
    }

    .labels-section__item--eparco img {
        width: min(100%, 180px);
    }

    .labels-section__item--everblue img {
        width: min(100%, 135px);
    }

    .labels-section__item--qualipac img,
    .labels-section__item--qualibois img {
        width: min(100%, 130px);
    }
}