:root {
    --vert: #26907C;
    --grisClair: #eee;
    --grisTresClair: #f3f3f3;
    --gris999: #999;
    --blanc: #fff;
    --bleu: #a5d9ce;
    --bleuClair: #9cebe8;
    --bleuFonce: #33a59b;
    --orange: #FF8667;
    --rouge: #d97155;
    --marron: #A48A7A;
    --marronFonce: #735B50;
    --marronClair: #CCBDB3;
    --beige: #f6ece0;
    --noir: #465963;

    --fond_vert: #E5EAE4;
    --fond_grisClair: #eee;
    --fond_grisTresClair: #f3f3f3;
    --fond_gris999: #999;
    --fond_blanc: #fff;
    --fond_bleu: #a5d9ce;
    --fond_orange: #f6ebe7;
    --fond_rouge: #f9e2d5;
    --fond_marron: #CCBDB3;
    --fond_marronClair: #d6cac2;
    --fond_beige: #f6ece0;
    --fond_beigeClair: #f9f2ea;
    --fond_noir: #373e42;

}

html {
    background-color: var(--fond_beige);
    font-family: 'Poppins', sans-serif;
    color: var(--marronFonce);
}

body {
    color: var(--marronFonce)
}

/*******ICONS***********/

.icon.tiktok:before {
    content: "\e90d";
}

.icon.map:before {
    content: "\e900";
}

.icon.search:before {
    content: "\e901";
}

.icon.contact:before {
    content: "\e902";
}

.icon.traduction:before {
    content: "\e903";
}

.icon.mail:before {
    content: "\e904";
}

.icon.tel:before {
    content: "\e905";
}

.icon.fax:before {
    content: "\e906";
}

.icon.valide:before {
    content: "\e908";
}

.icon.next:before {
    content: "\e909";
}

.icon.close:before {
    content: "\e90a";
}

.icon.menu:before {
    content: "\e90b";
}

.icon.rep:before {
    content: "\e90c";
}

.icon.linkedin:before {
    content: "\e90f";
}

.icon.youtube:before {
    content: "\e910";
}

.icon.instagram:before {
    content: "\e90e";
}

.icon.facebook:before {
    content: "\e911";
}

.icon.user:before {
    content: "\e907";
}

/*******FONT***********/
.cookie {
    font-family: 'Cookie', cursive;
}

.tiny {
    font-size: 16px;
}

.noto {
    font-family: 'Noto Serif JP', Serif;
}

.titre {
    font-family: 'Noto Serif JP', cursive;
    font-weight: 300;
    font-size: 30px;
}

.sous_titre {
    font-family: 'Cookie', cursive;
    font-size: 40px;
    font-weight: normal;
}

span.line15, span.line18, span.line20, span.line25, span.line30, span.line35, span.line40, span.line45, span.line50 {
    display: inline-block;
}

.legende {
    background: #000000;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.6) 50%, rgba(0, 0, 0, 0) 100%);
}

.bouton {
    cursor: pointer;
    text-decoration: none;
    transition: all 0.3s ease;
    vertical-align: middle;
    display: inline-block !important;
    border-radius: 20px;
    border-bottom-right-radius: 0;
    line-height: normal;
    height: auto;
    padding: 10px 20px;
    text-align: center;
}

.bouton.none {
    display: none !important;
}

/* Si vous avez besoin que le bouton soit en block ET centré */
.bouton.center {
    display: block !important;
    width: fit-content;
    margin-right: auto;
    margin-left: auto;
}

.bouton:hover, .blochover:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    filter: brightness(1.1);
}

.photo_colonne .emplacement_icon {
    margin-top: -70px;
}

/***********COULEURS****************/
.filtre_photo {
    position: relative;
    overflow: hidden;
    filter: grayscale(0.4) brightness(1.1);
}

.filtre_photo.absolute {
    position: absolute;
}

.filtre_photo:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, #7d4520, #b4764a);
);
    mix-blend-mode: hard-light;
    opacity: 0.3;
}

.vert {
    color: var(--vert);
}

.bleu {
    color: var(--bleu);
}

.bleuFonce {
    color: var(--bleuFonce);
}

.bleuClair {
    color: var(--bleuClair);
}

.blanc {
    color: var(--blanc);
}

.g999 {
    color: var(--gris999);
}

.marron {
    color: var(--marron);
}

.marronFonce {
    color: var(--marronFonce);
}

.marronClair {
    color: var(--marronClair);
}

.beige {
    color: var(--beige);
}

.orange {
    color: var(--orange);
}

.rouge {
    color: var(--rouge);
}

/***********FONDS****************/

.fv {
    background-color: var(--vert);
}

.fg {
    background-color: var(--grisClair);
}

.ff3 {
    background-color: var(--grisTresClair);
}

.fb {
    background-color: var(--blanc);
}

.fbl {
    background-color: var(--bleu);
}

.fblf {
    background-color: var(--bleuFonce);
}

.fm {
    background-color: var(--marron);
}

.fmc {
    background-color: var(--marronClair);
}

.fmc2 {
    background-color: var(--fond_marronClair);
}

.fbeige {
    background-color: var(--beige);
}

.fo {
    background-color: var(--orange);
}

.fr {
    background-color: var(--rouge);
}


/***********border****************/
.bbv {
    border-bottom: 1px solid var(--vert);
}

.bbbl {
    border-bottom: 1px solid var(--bleu);
}

.bbao {
    border-bottom: 1px solid var(--orange);
}

.bbg {
    border-bottom: 1px solid var(--grisClair);
}

.bbm {
    border-bottom: 1px solid var(--marron);
}

.bbmc {
    border-bottom: 1px solid var(--marronClair);
}

.bbv2 {
    border-bottom: 2px solid var(--vert);
}

.bbbl2 {
    border-bottom: 2px solid var(--bleu);
}

.bbao2 {
    border-bottom: 2px solid var(--orange);
}

.bbm2 {
    border-bottom: 2px solid var(--marron);
}

.bbg2 {
    border-bottom: 2px solid var(--grisClair);
}

.bav {
    border: 1px solid var(--vert);
}

.bab {
    border: 1px solid var(--blanc);
}

.ban {
    border: 1px solid var(--noir);
}

.babl {
    border: 1px solid var(--bleu);
}

.bablf {
    border: 1px solid var(--bleuFonce);
}

.bablc {
    border: 1px solid var(--bleuClair);
}

.bamf {
    border: 1px solid var(--marronFonce);
}

.bam {
    border: 1px solid var(--marron);
}

.bamc {
    border: 1px solid var(--marronClair);
}

.babe {
    border: 1px solid var(--beige);
}

.bao {
    border: 1px solid var(--orange);
}

.bar {
    border: 1px solid var(--rouge);
}

/***********EFFET VAGUE****************/
/* Effet de vague en haut de section */

.before-cercle, .after-cercle, .before-vague, .after-vague {
    position: relative;
    z-index: 10
}

.before-cercle:before {
    z-index: -1;
    content: "";
    position: absolute;
    height: 130px;
    border-radius: 50%;
    width: 110%;
    left: -5%;
    top: -40px;
    background-color: var(--color);
}

.after-cercle:after {
    z-index: -1;
    content: "";
    position: absolute;
    height: 130px;
    border-radius: 50%;
    width: 110%;
    left: -5%;
    bottom: -40px;
    background-color: var(--color);
}

/* SOLUTION : Utiliser des combinaisons spécifiques pour éviter les conflits */

/* Vague simple en haut */
.before-vague:not(.after-vague)::before {
    content: '';
    position: absolute;
    top: -50px;
    left: 0;
    width: 100%;
    height: 50px;
    background: var(--color, var(--color));
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 50' preserveAspectRatio='none'%3E%3Cpath d='M 0,50 L 0,20 C 145,29 281,37 446,34 C 611,30 804,14 976,9 C 1148,5 1299,12 1440,20 L 1440,50 L 0,50 Z' fill='black'/%3E%3C/svg%3E") no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 50' preserveAspectRatio='none'%3E%3Cpath d='M 0,50 L 0,20 C 145,29 281,37 446,34 C 611,30 804,14 976,9 C 1148,5 1299,12 1440,20 L 1440,50 L 0,50 Z' fill='black'/%3E%3C/svg%3E") no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    z-index: 10;
}

.before-vague2:not(.after-vague)::after {
    content: '';
    position: absolute;
    top: -57px;
    left: 0;
    width: 100%;
    height: 70px;
    opacity: 0.5;
    background: var(--color, var(--color));
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 70' preserveAspectRatio='none'%3E%3Cpath d='M 0,70 L 0,25 C 135,26 281,41 446,38 C 611,29 804,13 976,9 C 1138,5 1299,12 1440,25 L 1440,70 L 0,70 Z' fill='black'/%3E%3C/svg%3E") no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 70' preserveAspectRatio='none'%3E%3Cpath d='M 0,70 L 0,25 C 135,26 281,41 446,38 C 611,29 804,13 976,9 C 1138,5 1299,12 1440,25 L 1440,70 L 0,70 Z' fill='black'/%3E%3C/svg%3E") no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    z-index: 9;
}

/* Vague simple en bas */
.after-vague:not(.before-vague)::before {
    content: '';
    position: absolute;
    bottom: -50px;
    left: 0;
    width: 100%;
    height: 50px;
    background: var(--color, var(--color));
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 50' preserveAspectRatio='none'%3E%3Cpath d='M 0,0 L 0,30 C 145,21 281,13 446,16 C 611,20 804,36 976,41 C 1148,45 1299,38 1440,30 L 1440,0 L 0,0 Z' fill='black'/%3E%3C/svg%3E") no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 50' preserveAspectRatio='none'%3E%3Cpath d='M 0,0 L 0,30 C 145,21 281,13 446,16 C 611,20 804,36 976,41 C 1148,45 1299,38 1440,30 L 1440,0 L 0,0 Z' fill='black'/%3E%3C/svg%3E") no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    z-index: 10;
    transform: scaleX(-1);
}

.after-vague2:not(.before-vague)::after {
    content: '';
    position: absolute;
    bottom: -57px;
    left: 0;
    width: 100%;
    height: 70px;
    opacity: 0.5;
    background: var(--color, var(--color));
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 70' preserveAspectRatio='none'%3E%3Cpath d='M 0,0 L 0,45 C 135,44 281,29 446,32 C 611,41 804,57 976,61 C 1138,65 1299,58 1440,45 L 1440,0 L 0,0 Z' fill='black'/%3E%3C/svg%3E") no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 70' preserveAspectRatio='none'%3E%3Cpath d='M 0,0 L 0,45 C 135,44 281,29 446,32 C 611,41 804,57 976,61 C 1138,65 1299,58 1440,45 L 1440,0 L 0,0 Z' fill='black'/%3E%3C/svg%3E") no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    z-index: 9;
    transform: scaleX(-1);
}

/* Cas spécial : vagues en haut ET en bas - utiliser ::before pour haut et ::after pour bas */
.before-vague.after-vague:not(.before-vague2):not(.after-vague2)::before {
    content: '';
    position: absolute;
    top: -50px;
    left: 0;
    width: 100%;
    height: 50px;
    background: var(--color, var(--color));
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 50' preserveAspectRatio='none'%3E%3Cpath d='M 0,50 L 0,20 C 145,29 281,37 446,34 C 611,30 804,14 976,9 C 1148,5 1299,12 1440,20 L 1440,50 L 0,50 Z' fill='black'/%3E%3C/svg%3E") no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 50' preserveAspectRatio='none'%3E%3Cpath d='M 0,50 L 0,20 C 145,29 281,37 446,34 C 611,30 804,14 976,9 C 1148,5 1299,12 1440,20 L 1440,50 L 0,50 Z' fill='black'/%3E%3C/svg%3E") no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    z-index: 10;
}

.before-vague.after-vague:not(.before-vague2):not(.after-vague2)::after {
    content: '';
    position: absolute;
    bottom: -50px;
    left: 0;
    width: 100%;
    height: 50px;
    background: var(--color, var(--color));
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 50' preserveAspectRatio='none'%3E%3Cpath d='M 0,0 L 0,30 C 145,21 281,13 446,16 C 611,20 804,36 976,41 C 1148,45 1299,38 1440,30 L 1440,0 L 0,0 Z' fill='black'/%3E%3C/svg%3E") no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 50' preserveAspectRatio='none'%3E%3Cpath d='M 0,0 L 0,30 C 145,21 281,13 446,16 C 611,20 804,36 976,41 C 1148,45 1299,38 1440,30 L 1440,0 L 0,0 Z' fill='black'/%3E%3C/svg%3E") no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    z-index: 10;
}

/* Cas avec toutes les vagues - règles spécifiques pour éviter les conflits */
.before-vague.before-vague2.after-vague.after-vague2::before {
    content: '';
    position: absolute;
    top: -50px;
    left: 0;
    width: 100%;
    height: 50px;
    background: var(--color, var(--color));
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 50' preserveAspectRatio='none'%3E%3Cpath d='M 0,50 L 0,20 C 145,29 281,37 446,34 C 611,30 804,14 976,9 C 1148,5 1299,12 1440,20 L 1440,50 L 0,50 Z' fill='black'/%3E%3C/svg%3E") no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 50' preserveAspectRatio='none'%3E%3Cpath d='M 0,50 L 0,20 C 145,29 281,37 446,34 C 611,30 804,14 976,9 C 1148,5 1299,12 1440,20 L 1440,50 L 0,50 Z' fill='black'/%3E%3C/svg%3E") no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    z-index: 12;
}

.before-vague.before-vague2.after-vague.after-vague2::after {
    content: '';
    position: absolute;
    bottom: -50px;
    left: 0;
    width: 100%;
    height: 50px;
    background: var(--color, var(--color));
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 50' preserveAspectRatio='none'%3E%3Cpath d='M 0,0 L 0,30 C 145,21 281,13 446,16 C 611,20 804,36 976,41 C 1148,45 1299,38 1440,30 L 1440,0 L 0,0 Z' fill='black'/%3E%3C/svg%3E") no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 50' preserveAspectRatio='none'%3E%3Cpath d='M 0,0 L 0,30 C 145,21 281,13 446,16 C 611,20 804,36 976,41 C 1148,45 1299,38 1440,30 L 1440,0 L 0,0 Z' fill='black'/%3E%3C/svg%3E") no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    z-index: 9;
}

/* Fallback pour les navigateurs qui ne supportent pas mask */
@supports not (mask: url('')) {
    .after-vague::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0,60 C200,20 400,100 600,40 C800,0 1000,80 1200,50 L1200,120 L0,120 Z' fill='%23999999'/%3E%3C/svg%3E");
        background-size: cover;
        background-repeat: no-repeat;
        background: none;
    }

    .after-vague2::after {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L1200,0 L1200,60 C1000,40 800,120 600,80 C400,20 200,100 0,70 Z' fill='%23999999'/%3E%3C/svg%3E");
        background-size: cover;
        background-repeat: no-repeat;
        background: none;
    }
}

.visible_anime {
    overflow: hidden;
}

.slidedown.icon:before, .slide.icon:before {
    position: absolute;
    left: 8px;
    font-size: 25px;
}

.slidedown.icon, .slide.icon {
    position: relative;
    padding-left: 40px
}

.bulle {
    border-radius: 20px;
    border-top-left-radius: 0;
}

.vitre {
    backdrop-filter: brightness(0.9) blur(7px);
    background-color: rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 0 50px 0 rgba(0, 0, 0, 0.2);
    max-width: 1400px !important;
    width: max-content !important;
    padding: 40px;
    border-radius: 20px;
    margin: 30px auto;
}