:root {
    --vert: #26907C;
    --grisClair: #eee;
    --grisTresClair: #f3f3f3;
    --gris999: #999;
    /* Palette principale thème 25 */
    --marron: #A1877A;
    --marronFonce: #645046;
    --or: #CD9F48;
    --doree: #CD9F48;
    --jaune: #F5DE89;
    --beige: #F6ECE0;
    /* Dérivés et utilitaires */
    --marronClair: #CCBDB3;
    --blanc: #ffffff;
    --noir: #373e42;
    --fond_beige: #F6ECE0;
    --fond_beigeClair: #f9f5f0;
    /* Couleur par défaut pour vagues / cercles */
    --color: transparent;
    /* Dégradé titres (marron foncé → or) */
    --degrade-titre: linear-gradient(to right, #613626 66%, #CD9F48 93%);
}

html {
    background-color: var(--beige);
}

body {
    color: var(--marronFonce);
    font-family: 'Poppins', cursive;

}
#bloc_page{
    font-size: 16px;
}
.edite{
    line-height: 25px;
}


/*******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***********/
@font-face {
    font-family: 'Qarmilla';
    src: url('./fonts/Qarmilla.eot');
    src: url('./fonts/Qarmilla.eot?#iefix') format('embedded-opentype'),
    url('./fonts/Qarmilla.woff2') format('woff2'),
    url('./fonts/Qarmilla.woff') format('woff'),
    url('./fonts/Qarmilla.ttf') format('truetype'),
    url('./fonts/Qarmilla.svg#Qarmilla') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
.qarmilla{font-family: 'Qarmilla';}


.titre {
    font-family: 'Qarmilla';
    font-size: 50px;
}
.f-antic{
    font-family: "Antic Didone", serif;
}
.antic{
    font-family: "Antic Didone", serif;
    letter-spacing: 0.2em; /* S'adapte automatiquement à la taille de la police */
    text-transform: uppercase;
}
.sous_titre {
    font-family: "Antic Didone", serif;
    font-size: 18px;
    letter-spacing: 8px;
    text-transform: uppercase;
    font-weight: 800;
}

/* Dégradé sur le texte (effet marron → or comme sur "Bienvenue") */
/* Dégradé texte : utilisable sur titres ou via tab_color (couleur "degrade") */
.titre-degrade,
.sous_titre-degrade,
.degrade {
    background: var(--degrade-titre);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

span.line15,span.line18,span.line20,span.line25,span.line30,span.line35,span.line40,span.line45,span.line50{display: inline-block;}
.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;
}

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

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

/***********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, var(--marronFonce), var(--marron));
    mix-blend-mode: hard-light;
    opacity: 0.3;
}
.blanc {
    color: var(--blanc);
}

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

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

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

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

.or, .doree {
    color: var(--or);
}

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

.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);
}

.fn {
    background-color: var(--noir);
}

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

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

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

.fbeige {
    background-color: var(--fond_beige);
}
.fbe{
    background-color: var(--fond_beigeClair);
}
.for{
    background-color: var(--or);
}

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

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

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

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

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

.bab{
    border: 1px solid var(--blanc);
}
.ban{
    border: 1px solid var(--noir);
}
.bamf{
    border: 1px solid var(--marronFonce);
}
.bam{
    border: 1px solid var(--marron);
}
.bamc{
    border: 1px solid var(--marronClair);
}
.babe{
    border: 1px solid var(--beige);
}
.baor{
    border: 1px solid var(--or);
}
.bbdash{
    border-bottom: 1px dashed var(--marron);
}

/***********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);
}

/* Classes additionnelles pour le design */
.blochover{
    position: relative;
}

.inline{
    display: inline-block;
}

.gap20{
    gap: 20px;
}

.gap30{
    gap: 30px;
}

.pad6040{
    padding: 60px 40px;
}

.ombre1025{
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}


/* Bouton circulaire avec flèche */
.btn-circle {
    position: relative;
}
.btn-circle:after{
    content: "";
    border-radius: 50%;
    border: 1px solid var(--or);
    position: absolute;
    top: 10%;
    left: 8px;
    height: 80%;
    width: 80%;
}
.btn-circle:before{
    content: "";
    border-radius: 50%;
    border: 1px solid var(--or);
    position: absolute;
    top: 0;
    left: -8px;
    height: 100%;
    width: 100%;
}
.ul_menu .slidedown,.ul_menu .content,.ul_menu li{
    position: relative;
}
.ul_menu .slidedown:before{
    content: "";
    border-radius: 50%;
    background-color: var(--blanc);
    position: absolute;
    left: -25px;
    top:calc(50% - 5px);
    height: 10px;
    width: 10px;
}
.ul_menu .slidedown.active:before{
    background-color: var(--or);
}
.ul_menu .slidedown.active:after{
    content: "";
    position: absolute;
    border-radius: 50%;
    border: 1px solid var(--or);
    left: -28px;
    top:calc(50% - 8px);
    height: 16px;
    width: 16px;
}
.ul_menu li:after{
    content: "";
    position: absolute;
    border-left: 1px solid var(--or);
    left: -20px;
    top:30px;
    height: calc(100% - 10px);
    width: 3px;
}
.image-ellipse {
    width: 90%;
    height: 320px;
    border-radius: 50% / 50%;
    rotate:25deg
}
.image-ellipse .img{
    rotate:-25deg;
    width: 140%;
    height: 140%;
    margin: -10%;
}