/* ==========================================================
   ACCUEIL - BASE COMMUNE
   Fichier sans règles responsive de largeur.
   Les overrides sont dans mobile.css, tablette.css, PC.css et PCXXL.css.
   ========================================================== */

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

.clim-atouts {
    position: relative;
    overflow: hidden;
    padding-top: 70px;
    padding-bottom: 70px;
}

.clim-atouts.my-5 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.clim-atouts__background {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.clim-atouts__background img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.clim-atouts .container {
    position: relative;
    z-index: 1;
}

.clim-atouts__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: center;
    gap: 45px;
}

.clim-atouts__item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
}

.clim-atouts__icon {
    display: block;
    flex: 0 0 auto;
    width: 54px;
}

.clim-atouts__icon img {
    display: block;
    width: 100%;
    height: auto;
}

.clim-atouts__text {
    margin: 0;
    color: #0d4053;
    line-height: 1.15;
}


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

.climatisation {
    position: relative;
    background-color: #124f60;
    background-image: var(--clim-background, url("../image/images/accueil/defaut/background-clim-bleu.jpg"));
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    overflow: hidden;
}

.climatisation__row {
    position: relative;
    width: 100%;
    margin: 0;
    --bs-gutter-x: 0;
    align-items: stretch;
}

.climatisation__left {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 0;
}

.climatisation__content {
    width: 100%;
    padding: clamp(50px, 7vw, 130px) clamp(40px, 6vw, 110px) clamp(50px, 7vw, 130px) clamp(50px, 7.5vw, 145px);
    box-sizing: border-box;
    color: #ffffff;
}

.climatisation__title {
    margin: 0;
    color: #ffffff;
    font-family: "Roboto Condensed", Arial, sans-serif;
    font-size: clamp(28px, 2.1vw, 40px);
    font-weight: 700;
    font-style: italic;
    line-height: 1.15;
}

.climatisation__trait {
    display: block;
    width: clamp(170px, 15vw, 285px);
    margin-top: clamp(18px, 1.5vw, 28px);
    margin-bottom: clamp(34px, 3vw, 55px);
}

.climatisation__trait img {
    display: block;
    width: 100%;
    height: auto;
}

.climatisation__content p {
    width: 100%;
    max-width: 720px;
    margin-top: 0;
    margin-bottom: clamp(18px, 1.5vw, 28px);
    color: #ffffff;
    font-family: "Prompt", Arial, sans-serif;
    font-size: clamp(15px, 1.15vw, 22px);
    font-weight: 300;
    line-height: 1.45;
}

.climatisation__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    min-height: 48px;
    margin-top: clamp(18px, 1.8vw, 34px);
    padding: 8px 14px 8px 24px;
    border: 0;
    border-radius: 999px;
    background-color: #ffffff;
    color: #124f60;
    font-family: "Prompt", Arial, sans-serif;
    font-size: clamp(14px, 1vw, 18px);
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    transition: transform 200ms ease-in-out, box-shadow 200ms ease-in-out;
}

.climatisation__button:hover {
    color: #124f60;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgb(0 0 0 / 18%);
}

.climatisation__button-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    font-family: Arial, sans-serif;
    font-size: 28px;
    font-weight: 400;
    line-height: 1;
}

.climatisation__right {
    position: relative;
    align-self: stretch;
    min-width: 0;
    min-height: 100%;
    overflow: hidden;
}

.climatisation__picture {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
}

.climatisation__picture img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center top;
}


/* ---- FORMES DE SÉPARATION ---- */

.forme-verte {
    display: block;
    width: 100%;
    height: 165px;
    overflow: hidden;
    line-height: 0;
}

.forme-verte img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

.forme-rouge {
    position: relative;
    width: 100%;
    height: 165px;
    overflow: hidden;
    line-height: 0;
}

.forme-rouge__visuel {
    display: block;
    width: 100%;
    height: 100%;
}

.forme-rouge__visuel img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

.forme-rouge__bouton {
    position: absolute;
    z-index: 2;

    top: 65%;
    left: 50%;
    transform: translate(-50%, -50%);

    display: inline-flex;
    align-items: center;
    justify-content: space-between;

    width: 180px;
    height: 48px;
    padding: 0 24px;

    border-radius: 24px;
    background-color: #ffffff;
    color: #124f60;

    font-size: 20px;
    line-height: 1;
    text-decoration: none;

    transition:
            transform 200ms ease-in-out,
            box-shadow 200ms ease-in-out;
}

.forme-rouge__bouton:hover {
    transform: translate(-50%, -50%) scale(1.04);
    box-shadow: 0 4px 12px rgb(0 0 0 / 15%);
}

.forme-rouge__fleche {
    width: 8px;
    height: 8px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: rotate(45deg);
}

.forme-rouge__bouton:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 3px;
}


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

.autres-produits {
    width: 100%;
    padding: 60px 0 80px;
    overflow: hidden;
    background-color: #fff;
}

.autres-produits *, .autres-produits *::before, .autres-produits *::after {
    box-sizing: border-box;
}

.autres-produits__grille {
    display: grid;
    grid-template-columns: minmax(0, 1fr)minmax(150px, 215px)minmax(0, 1fr);
    align-items: center;
    gap: clamp(25px, 3vw, 60px);
    width: 100%;
}

.produit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(18px, 2vw, 40px);
    min-width: 0;
}

.produit__visuel {
    display: block;
    flex: 0 0 auto;
    line-height: 0;
}

.produit__visuel img {
    display: block;
    max-width: 100%;
    height: auto;
}

.produit--poele .produit__visuel img {
    width: clamp(145px, 12vw, 200px);
}

.produit--brasero .produit__visuel img {
    width: clamp(200px, 17vw, 285px);
}

.produit__contenu {
    display: flex;
    flex: 0 1 250px;
    flex-direction: column;
    justify-content: center;
    width: clamp(160px, 15vw, 250px);
    min-width: 0;
}

.produit__trait {
    display: block;
    width: 100%;
    line-height: 0;
}

.produit__trait img {
    display: block;
    width: 100%;
    height: auto;
}

.autres-produits__logo {
    display: block;
    width: 100%;
    line-height: 0;
}

.autres-produits__logo img {
    display: block;
    width: 100%;
    max-width: 215px;
    height: auto;
    margin: 0 auto;
}


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

.renovation {
    position: relative;
    width: 100%;
    max-width: 1920px;
    margin-right: auto;
    margin-left: auto;
    background-color: #124f60;
    background-image: var(
            --renovation-background,
            url("../image/images/accueil/defaut/background-renov.jpg")
    );
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    overflow: hidden;
}

.renovation__row {
    position: relative;
    width: 100%;
    margin: 0;
    --bs-gutter-x: 0;
    align-items: stretch;
}

.renovation__left {
    position: relative;
    align-self: stretch;
    min-width: 0;
    min-height: 100%;
    overflow: hidden;
}

.renovation__picture {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
}

.renovation__picture img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center top;
}

.renovation__right {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 0;
}

.renovation__content {
    width: 100%;
    padding: clamp(50px, 7vw, 130px)
            clamp(50px, 7.5vw, 145px)
            clamp(50px, 7vw, 130px)
            clamp(40px, 6vw, 110px);
    box-sizing: border-box;
    color: #ffffff;
}

.renovation__title {
    margin: 0;
    color: #ffffff;
    font-family: "Roboto Condensed", Arial, sans-serif;
    font-size: clamp(28px, 2.1vw, 40px);
    font-weight: 700;
    font-style: italic;
    line-height: 1.15;
}

.renovation__trait {
    display: block;
    width: clamp(170px, 15vw, 285px);
    margin-top: clamp(18px, 1.5vw, 28px);
    margin-bottom: clamp(34px, 3vw, 55px);
}

.renovation__trait img {
    display: block;
    width: 100%;
    height: auto;
}

.renovation__content p {
    width: 100%;
    max-width: 720px;
    margin-top: 0;
    margin-bottom: clamp(18px, 1.5vw, 28px);
    color: #ffffff;
    font-family: "Prompt", Arial, sans-serif;
    font-size: clamp(15px, 1.15vw, 22px);
    font-weight: 300;
    line-height: 1.45;
}

.renovation__content strong {
    font-weight: 700;
}


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

.prestations-renovation__grille {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 55px 45px;
    width: 100%;
    max-width: 1260px;
    margin-right: auto;
    margin-left: auto;
}

.prestation-renovation:nth-child(1) {
    grid-column: 1 / span 2;
}

.prestation-renovation:nth-child(2) {
    grid-column: 3 / span 2;
}

.prestation-renovation:nth-child(3) {
    grid-column: 5 / span 2;
}

.prestation-renovation:nth-child(4) {
    grid-column: 2 / span 2;
}

.prestation-renovation:nth-child(5) {
    grid-column: 4 / span 2;
}

.prestation-renovation {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
    text-align: center;
}

.prestation-renovation__icone {
    display: block;
    width: 54px;
    height: 54px;
    margin-bottom: 16px;
}

.prestation-renovation__icone img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.prestation-renovation__titre {
    margin: 0;
    color: #124f60;
    font-family: "Roboto Condensed", Arial, sans-serif;
    font-size: clamp(19px, 1.5vw, 25px);
    font-weight: 700;
    font-style: italic;
    line-height: 1.15;
    text-align: center;
}

.prestation-renovation__trait {
    display: block;
    width: min(185px, 80%);
    margin-top: 8px;
}

.prestation-renovation__trait img {
    display: block;
    width: 100%;
    height: auto;
}


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

.piscine-services {
    width: 100%;
    padding: 35px 20px 45px;
    overflow: hidden;
    background-color: #ffffff;
}

.piscine-services__container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.piscine-services__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    justify-items: center;
    gap: 35px 40px;
}

.piscine-services__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    max-width: 350px;
    margin: 0;
    text-align: center;
}

.piscine-services__item--liner {
    grid-column: 2;
}

.piscine-services__icon {
    display: block;
    width: 82.39px;
    height: 82.39px;
    margin: 0 0 8px;
    flex-shrink: 0;
}

.piscine-services__icon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.piscine-services__title {
    margin: 0;
    padding: 0;
    color: #0d4053;
    font-size: 20px;
    font-weight: 700;
    font-style: italic;
    line-height: 1.35;
    text-align: center;
}

.piscine-services__trait {
    display: block;
    width: 150px;
    max-width: 100%;
    margin: 7px 0 0;
}

.piscine-services__trait img {
    display: block;
    width: 100%;
    height: auto;
}


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

.suivi-service {
    width: 100%;
    padding: 40px 20px 25px;
    overflow: hidden;
    background-color: #ffffff;
}

.suivi-service__container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.suivi-service__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    margin: 0 auto;
    text-align: center;
}

.suivi-service__title {
    margin: 0;
    padding: 0;
    color: #0d4053;
    font-size: 24px;
    font-weight: 700;
    font-style: italic;
    line-height: 1.4;
    text-align: center;
}

.suivi-service__trait {
    display: block;
    width: 185px;
    max-width: 100%;
    margin: 10px 0 0;
}

.suivi-service__trait img {
    display: block;
    width: 100%;
    height: auto;
}


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

.pbc-expert-social,
.pbc-expert-social *,
.pbc-expert-social *::before,
.pbc-expert-social *::after {
    box-sizing: border-box;
}

.pbc-expert-social {
    --pbc-blue: #0f4254;
    --pbc-yellow: #ffd500;
    --pbc-white: #ffffff;
    position: relative;
    width: 100%;
    overflow: hidden;
    color: var(--pbc-blue);
    background-color: var(--pbc-white);
    font-family: "Prompt", Arial, sans-serif;
}

.pbc-expert {
    position: relative;
    z-index: 1;
    width: 100%;
    min-height: 350px;
    background-color: var(--pbc-white);
}

.pbc-expert__container {
    display: grid;
    grid-template-columns: minmax(390px, 48%) minmax(0, 52%);
    width: min(1120px, calc(100% - 40px));
    min-height: 350px;
    margin-right: auto;
    margin-left: auto;
}

.pbc-expert__visual {
    --person-width: 205px;
    --person-right: 24px;
    position: relative;
    min-width: 0;
    min-height: 350px;
    overflow: visible;
}

.pbc-expert__person {
    position: absolute;
    z-index: 2;
    top: 30px;
    right: var(--person-right);
    display: block;
    width: var(--person-width);
    height: auto;
    margin: 0;
    line-height: 0;
}

.pbc-expert__person img {
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
    object-fit: contain;
    object-position: center bottom;
}

.pbc-expert__button {
    position: absolute;
    z-index: 3;
    top: 50%;
    right: calc(
            var(--person-right) +
            var(--person-width) -
            12px
    );
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    min-height: 36px;
    padding: 8px 15px 8px 16px;
    border: 2px solid var(--pbc-yellow);
    border-radius: 999px;
    color: var(--pbc-blue);
    background-color: var(--pbc-yellow);
    font-family: "Prompt", Arial, sans-serif;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transform: translateY(-50%);
    transition: color 180ms ease,
            background-color 180ms ease,
            border-color 180ms ease,
            transform 180ms ease;
}

.pbc-expert__button-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: Arial, sans-serif;
    font-size: 19px;
    font-weight: 400;
    line-height: 1;
    transition: transform 180ms ease;
}

.pbc-expert__button:hover {
    color: var(--pbc-white);
    background-color: var(--pbc-blue);
    border-color: var(--pbc-blue);
    transform: translateY(calc(-50% - 2px));
}

.pbc-expert__button:hover .pbc-expert__button-arrow {
    transform: translateX(4px);
}

.pbc-expert__button:focus-visible {
    outline: 3px solid rgb(15 66 84 / 35%);
    outline-offset: 4px;
}

.pbc-expert__content {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    min-width: 0;
    padding: 55px
            0
            65px
            35px;
}

.pbc-expert__list {
    display: flex;
    flex-direction: column;
    gap: 13px;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pbc-expert__item {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    align-items: center;
    gap: 13px;
    width: 100%;
    margin: 0;
    padding: 0;
    color: var(--pbc-blue);
    font-family: "Prompt", Arial, sans-serif;
    font-size: clamp(14px, 1.15vw, 16px);
    font-weight: 500;
    line-height: 1.35;
}

.pbc-expert__item .font25 {
    font-size: inherit !important;
}

.pbc-expert__check {
    display: block;
    width: 16px;
    height: 16px;
    line-height: 0;
}

.pbc-expert__check img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.pbc-social {
    position: relative;
    z-index: 2;
    width: 100%;
    min-height: 235px;
    padding: 18px
            20px
            45px;
    background-color: var(--pbc-yellow);
}

.pbc-social::before {
    position: absolute;
    z-index: 0;
    top: -59px;
    right: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background-color: var(--pbc-yellow);
    clip-path: polygon(
            0 0,
            100% 85%,
            100% 100%,
            0 100%
    );
    content: "";
}

.pbc-social__container {
    position: relative;
    z-index: 1;
    width: min(760px, 100%);
    margin-right: auto;
    margin-left: auto;
    text-align: center;
}

.pbc-social__title {
    display: flex;
    align-items: baseline;
    justify-content: center;
    flex-wrap: wrap;
    gap: 7px;
    margin: 0;
    color: var(--pbc-blue);
    font-family: "Roboto Condensed",
            "Arial Narrow",
            Arial,
            sans-serif;
    font-size: clamp(28px, 2.2vw, 34px);
    line-height: 1;
    text-transform: uppercase;
}

.pbc-social__title strong {
    font-weight: 800;
}

.pbc-social__title span {
    font-weight: 300;
    font-style: italic;
}

.pbc-social__line {
    display: block;
    width: 118px;
    height: 10px;
    margin: 10px
            auto
            23px;
    line-height: 0;
}

.pbc-social__line img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: fill;
}

.pbc-social__text {
    width: 100%;
    max-width: 480px;
    margin-right: auto;
    margin-left: auto;
    color: var(--pbc-blue);
    font-family: "Prompt", Arial, sans-serif;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.45;
}

.pbc-social__links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 17px;
}

.pbc-social__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    line-height: 0;
    text-decoration: none;
    transition: opacity 180ms ease,
            transform 180ms ease;
}

.pbc-social__link picture {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.pbc-social__link img {
    display: block;
    width: auto;
    max-width: 19px;
    height: 18px;
}

.pbc-social__link:hover {
    opacity: 0.7;
    transform: translateY(-3px);
}

.pbc-social__link:focus-visible {
    border-radius: 3px;
    outline: 3px solid rgb(15 66 84 / 35%);
    outline-offset: 5px;
}


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

.labels-section,
.labels-section *,
.labels-section *::before,
.labels-section *::after {
    box-sizing: border-box;
}

.labels-section {
    position: relative;
    width: 100%;
    padding: clamp(45px, 5vw, 80px)
            20px
            clamp(55px, 6vw, 95px);
    overflow: hidden;
    background-color: #ffffff;
}

.labels-section__container {
    width: 100%;
    max-width: 1320px;
    margin-right: auto;
    margin-left: auto;
}

.labels-section__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    text-align: center;
}

.labels-section__title {
    margin: 0;
    color: #124f60;
    font-family: "Roboto Condensed", Arial, sans-serif;
    font-size: clamp(34px, 3vw, 50px);
    font-weight: 300;
    font-style: italic;
    line-height: 1.1;
    text-transform: uppercase;
}

.labels-section__title span {
    font-weight: 700;
}

.labels-section__trait {
    display: block;
    width: clamp(180px, 18vw, 285px);
    margin-top: 14px;
    line-height: 0;
}

.labels-section__trait img {
    display: block;
    width: 100%;
    height: auto;
}

.labels-section__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: center;
    column-gap: clamp(25px, 4vw, 75px);
    row-gap: 35px;
    width: 100%;
    margin-top: clamp(45px, 5vw, 75px);
}

.labels-section__item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
    min-height: 125px;
    margin: 0;
    padding: 10px;
}

.labels-section__picture {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    margin: 0;
    line-height: 0;
}

.labels-section__picture img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 100%;
    margin: 0;
    object-fit: contain;
}

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

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

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


/* ---- BOUTONS ---- */

.bouton-site {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    width: 207px;
    height: 48px;
    padding: 0 24px;
    border-radius: 24px;
    background-color: #ffffff;
    color: #124f60;
    font-size: 20px;
    text-decoration: none;
    transition: transform 200ms ease-in-out, box-shadow 200ms ease-in-out;
}

.bouton-site::after {
    flex-shrink: 0;
    margin-left: 14px;
    font-size: 27px;
    font-weight: 400;
    line-height: 1;
    content: "›";
    transition: transform 200ms ease-in-out;
}

.bouton-site:hover {
    color: #124f60;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgb(0 0 0 / 18%);
}

.bouton-site:hover::after {
    transform: translateX(3px);
}

.bouton-site:focus-visible {
    outline: 3px solid #f9a01b;
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    /* ---- EXPERT / SOCIAL ---- */

    .pbc-expert__button,
    .pbc-expert__button-arrow,
    .pbc-social__link {
        transition: none;
    }
}


.bouton-site_fond_rouge {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    width: 200px;
    height: 48px;
    padding: 0 24px;
    border-radius: 24px;
    background-color: #ffffff;
    color: #124f60;
    font-size: 20px;
    text-decoration: none;
    transition: transform 200ms ease-in-out, box-shadow 200ms ease-in-out;
}