:root {
    --c-bleu: #00285E;
    --c-bleu-fonce: #074B98;
    --c-cyan: #65C5CE;
    --c-eau: #AEDDE2;
    --btn-color: var(--c-bleu-fonce);
    --btn-color-hover-focus: var(--c-bleu);

}

h1 {
    color: var(--c-bleu);
    font-size: clamp(1.875rem, 2.668vw + 1.301rem, 3.438rem);
    line-height: 1.15;
}

h1>span {
    background-color: var(--c-cyan);
    padding: 0 .5rem .25rem .35rem;
}

h2 {
    color: var(--c-bleu-fonce);
    font-size: clamp(1.875rem, 2.309vw + 1.277rem, 3.125rem);
    margin-top: 1rem;
    margin-bottom: 1.5rem;
}

#texte {
    max-width: 72.5rem;
    margin: 0 auto;
    font-size: clamp(1.125rem, 0.231vw + 1.065rem, 1.25rem);
    line-height: 1.5;
}

/* Section Hero */
#sct-hero {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    padding-top: clamp(1.875rem, 4.244vw + 0.777rem, 4.172rem);
    padding-bottom: 3.125rem;
}

#sct-hero:before {
    content: '';
    background: linear-gradient(180deg, #D0D1DC 0%, #AEDDE2 100%);
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    height: 100%;
    width: 100vw;
    z-index: -1;
    opacity: 1;
}

#sct-hero .texte {
    order: 1;
}

#sct-hero .image {
    order: 2;
    text-align: center;
}

#sct-hero .image img {
    max-width: 100%;
    width: 100%;
}

@media (min-width: 768px) {
    #sct-hero {
        grid-template-columns: 1fr 1fr;
        gap: 2rem
    }

    #sct-hero .texte {
        order: 1;
    }

    #sct-hero .image {
        order: 2;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

.etiquette {
    font-size: clamp(1.125rem, 0.173vw + 1.08rem, 1.219rem);
    border-radius: 2rem;
    padding: .75rem 1.25rem;
    font-weight: bold;
}

.etiquette.c-bleu-moyen {
    background-color: var(--c-bleu);
}

#sct-hero .etiquette {
    margin-bottom: 1.5rem;
}

p {
    font-size: inherit;
    line-height: inherit;
    margin-bottom: 1.25rem;
}

.em {
    font-weight: 700;
    color: var(--c-bleu);
}

@media (max-width: 767px) {
    .em {
        text-align: center;
    }

    .mobile-centre {
        text-align: center;
    }
}

a.lien-vedette,
a.lien.vedette {
    font-weight: 700;
}

section {
    padding: clamp(1rem, 3.695vw + 0.044rem, 3rem) clamp(1.25rem, 1.386vw + 0.891rem, 2rem);
    /* top-bottom : 16px à 48px | left-right : 20px à 32px */
    position: relative;
}

/* Blocs pleine largeur */

#sct-videos:before {
    content: '';
    background: #8593AA;
    background: linear-gradient(0deg, rgba(133, 147, 170, 1) 25%, rgba(208, 209, 220, 1) 100%);
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    height: 100%;
    width: 100vw;
    z-index: -1;
    opacity: 1;
}

#sct-videos h2 {
    color: var(--c-bleu);
}



#sct-ete {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: center;
}

#sct-ete h2 {
    color: var(--c-bleu);
}

#sct-ete .image {
    max-width: 16rem;
    justify-self: center;
}

@media (min-width: 768px) {
    #sct-ete .image {
        max-width: 22rem;
    }
}

#sct-ete .image img {
    max-width: 100%;
    opacity: .75;
}

#sct-ete .texte {
    text-align: left;
}

@media (min-width: 768px) {
    #sct-ete {
        grid-template-columns: 1fr 1fr;
        gap: 4rem;
    }
}

#sct-ete:before {
    content: '';
    background: var(--c-eau);
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    height: 100%;
    width: 100vw;
    z-index: -1;
    opacity: 1;
}

/* Flickity - Vidéos */
.videos-carousel {
    margin: 0 -0.75rem;
    max-width: 1200px;
}

.video-card {
    box-sizing: border-box;
    width: 50%;
    padding: 0 0.5rem;
}

.video-card__link {
    display: block;
    text-align: center;
    text-decoration: none;
}

.video-card__thumb {
    aspect-ratio: 9 / 16;
    background-color: #fff;
    border-radius: 0.375rem;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

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

.video-card__play {
    background-color: var(--c-bleu-fonce);
    border-radius: 50%;
    height: 3.6rem;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 3.6rem;
    opacity: .75;
    transition: opacity 0.2s;
}

.video-card__link:hover .video-card__play,
.video-card__link:focus .video-card__play {
    opacity: 1;
}

.video-card__play::before {
    border-bottom: 0.9rem solid transparent;
    border-left: 1.5rem solid #fff;
    border-top: 0.9rem solid transparent;
    content: "";
    left: 56%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
}

.video-card__content {
    padding-top: 0.75rem;
}

.video-card__title,
.video-card__date {
    font-size: 0.875rem;
    line-height: 1.25;
    margin: 0;
    color: white;
}

.video-card__date {
    margin-top: 0.15rem;
}

.video-card__link:hover .video-card__title,
.video-card__link:focus .video-card__title {
    text-decoration: underline;
}

.video-card__link:focus {
    outline: 3px solid #fff;
    outline-offset: 4px;
}

.videos-carousel .flickity-prev-next-button {
    background-color: #fff;
    height: 2.5rem;
    width: 2.5rem;
    transform: translateY(-110%);
}

@media (max-width: 767px) {
    .videos-carousel .flickity-prev-next-button {
        display: none;
    }
}

.videos-carousel .flickity-prev-next-button.previous {
    left: clamp(-3.75rem, -58.333vw + 43.646rem, 0.625rem);
    /* 10px to -60px */
}

.videos-carousel .flickity-prev-next-button.next {
    right: clamp(-3.75rem, -58.333vw + 43.646rem, 0.625rem);
    /* 10px to -60px */
}

.videos-carousel .flickity-prev-next-button .flickity-button-icon {
    fill: var(--c-bleu-fonce);
}

.videos-carousel .flickity-page-dots {
    bottom: -2rem;
}

.videos-carousel .flickity-page-dots .dot {
    background-color: #fff;
    opacity: 1;
}

.videos-carousel .flickity-page-dots .dot.is-selected {
    background-color: var(--c-bleu-fonce);
}

.visually-hidden {
    clip: rect(0 0 0 0);
    border: 0;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

@media (min-width: 768px) {
    .video-card {
        width: 25%;
        padding: 0 0.75rem;
    }
}

@media (max-width: 767px) {
    .videos-carousel-section {
        margin-right: clamp(-1.25rem, 1.386vw + 0.891rem, -2rem);
    }

    .video-card__play {
        height: 2.5rem;
        width: 2.5rem;
    }

    .video-card__play::before {
        border-bottom-width: 0.55rem;
        border-left-width: 0.85rem;
        border-top-width: 0.55rem;
    }
}


@media (max-width: 767px) {
    #sct-videos .videos-carousel {
        margin-left: -0.5rem;
        margin-right: -0.5rem;
    }

    #sct-videos .video-card {
        width: 46%;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
}

/* Vagues */

#img-vagues {
    position: relative;
    height: clamp(2.25rem, 8.43vw + 0.069rem, 6.813rem);
    aspect-ratio: 850 / 73;
}

#img-vagues::after {
    content: '';
    position: absolute;
    background-image: url('../img/economie_eau_forme_vague.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position-x: center;
    top: -1px;
    left: 50%;
    transform: translateX(-50%);
    height: 100%;
    width: 100vw;
}

/* Boutons */
.btn {
    background-color: var(--btn-color);
    border-radius: 0.46875rem;
}

.btn:hover,
.btn:focus {
    background-color: var(--btn-color-hover-focus);
}

/* Boutons consulter */
.btns-consulter {
    display: flex;
    flex-flow: row wrap;
    gap: 1rem;
    list-style: none;
    margin: 0 auto;
    max-width: none;
    position: relative;
    width: 100%;
}

@media (min-width: 700px) {
    .btns-consulter {
        gap: 1.5rem;
    }
}


.btns-consulter>li {
    flex-basis: 100%;
    margin-top: 0;
}

@media (min-width: 700px) {
    .btns-consulter>li {
        border: 0px solid transparent;
        border-bottom-width: 0;
        border-top-width: 0;
        flex-basis: calc(50% - .75rem);
        max-width: inherit;
        padding: 0;
    }
}

@media (min-width: 1024px) {

    .btns-consulter {
        flex-flow: row nowrap;
    }

    .btns-consulter>li {
        flex-basis: calc(25% - 1.13rem);
    }
}


.btns-consulter.style3>li>a {
    background: linear-gradient(to bottom, var(--c-bleu) 0%, var(--c-bleu-fonce) 100%);
    font-size: inherit;
    font-weight: 600;
}

.btns-consulter>li>a {
    min-height: 85px;
}

.btns-consulter>li>a:before {
    background-size: contain;
    width: 16%;
    left: 10px;
}

.btns-consulter>li>a>div {
    line-height: 1.15;
    padding-right: 1.5rem;
}

.picto-gazon:before {
    background-image: url(../img/picto-gazon.svg);
}

.picto-piscines:before {
    background-image: url(../img/picto-piscine.svg);
}

.picto-vehicule:before {
    background-image: url(../img/picto-vehicule.svg);
}

.picto-arrosage:before {
    background-image: url(../img/picto-arrosage.svg);
}


/* Encadré demande en eau 
#encadre-demande {
    position: relative;
    background-color: var(--c-bleu);
    border-radius: 0.46875rem;
    color: #fff;
    font-weight: 700;
    line-height: 1.35;
    margin-bottom: 1.25rem;
    max-width: 46rem;
    padding: 2rem 1rem;
    text-align: center;
    text-wrap: balance;
    display: flex;
    gap: 1rem;
    flex-direction: column;
}

@media (min-width: 768px) {
    #encadre-demande {
        flex-direction: row;
        gap: 1.5rem;
        align-items: center;
        padding: 2rem 2.5rem;
        text-align: left;
    }
}

#encadre-demande .image {
    background-image: url('../img/picto-info-eau.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 4rem;
    height: 5rem;
    margin: 0 auto;
    aspect-ratio: 72 / 82;
}

#encadre-demande .chiffre {
    color: var(--c-eau);
    font-size: clamp(6.25rem, 2.309vw + 5.652rem, 6.5rem);
    line-height: .75;
    white-space: nowrap;
}
    */

/* Encadré demande en eau */
#encadre-demande {
    background-color: var(--c-bleu);
    border-radius: 0.46875rem;
    color: #fff;
    font-weight: 700;
    line-height: 1.35;
    margin-bottom: 1.25rem;
    max-width: 46rem;
    padding: 2rem 1rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

#encadre-demande .image {
    background-image: url('../img/picto-info-eau.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 4rem;
    height: 5rem;
    aspect-ratio: 72 / 82;
    flex: 0 0 auto;
}

#encadre-demande .contenu {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
}

#encadre-demande .texte {
    max-width: 16rem;
    text-wrap: balance;
}

#encadre-demande .chiffre {
    color: var(--c-eau);
    font-size: clamp(5.5rem, 18vw, 6.5rem);
    line-height: 0.8;
    white-space: nowrap;
}

@media (min-width: 768px) {
    #encadre-demande {
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 1.5rem;
        padding: 2rem 2.5rem;
        text-align: left;
    }

    #encadre-demande .contenu {
        flex-direction: row;
        align-items: center;
        gap: 0;
    }

    #encadre-demande .texte {
        max-width: 20rem;
    }

    #encadre-demande .chiffre {
        font-size: clamp(5.75rem, 8vw, 6.5rem);
        margin-top: -0.05em;
    }
}

#sct-conserver {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    align-items: center;
}

#sct-conserver h2 {
    margin-bottom: 0;
}

#sct-conserver .image img {
    max-width: 100%;
}

@media (min-width: 768px) {
    #sct-conserver {
        grid-template-columns: 1fr 1fr;
        gap: 2rem 4rem;
        align-items: start;
    }

    #sct-conserver .entete {
        grid-column: 1 / -1;
    }

    #sct-conserver .texte {
        grid-column: 1;
        grid-row: 2;
        align-self: center;
    }

    #sct-conserver .image {
        grid-column: 2;
        grid-row: 2;
    }

    #sct-conserver .boutons {
        grid-column: 1 / -1;
    }
}


#sct-pour-en-savoir-plus {
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
}

#sct-pour-en-savoir-plus .image img {
    border-radius: 1rem;

}


@media (min-width: 768px) {
    #sct-pour-en-savoir-plus {
        grid-template-columns: 1fr 1fr;
        gap: 2rem 4rem;
        align-items: start;
    }

    #sct-pour-en-savoir-plus .entete {
        grid-column: 1 / -1;
    }

    #sct-pour-en-savoir-plus .liens {
        grid-column: 1;
        grid-row: 2;
    }

    #sct-pour-en-savoir-plus .image {
        grid-column: 2;
        grid-row: 2;
        max-width: 25rem;
        align-self: center;
    }
}

#sct-pour-en-savoir-plus img {
    max-width: 100%;
}

#sct-pour-en-savoir-plus ul {
    list-style: none;
    margin: 0;
}

#sct-pour-en-savoir-plus ul li {
    border-bottom: 1px solid #A3A3A3;
}

#sct-pour-en-savoir-plus ul li:last-child {
    border-bottom: none;
}

#sct-pour-en-savoir-plus a.lien-vedette {
    margin-top: clamp(0rem, 8.533vw + -4.096rem, 0.8rem);
    margin-bottom: clamp(0.7rem, 6.4vw + -2.372rem, 1.3rem);
    text-wrap: balance;
}


a.lien-vedette.tres-grand {
    font-weight: 300;
}


a.lien-vedette.tres-grand {
    font-size: 1.57em;
}