:root {
    --vert: #26907C;
    --vertClair: rgba(185, 223, 146, 0.9);
    --grisClair: #eee;
    --grisTresClair: #f3f3f3;
    --gris999: #999;
    --blanc: #fff;
    --bleu: #062C4C;
    --orange: #FF4000;
    --marron: #A68D75;
}

html{background-color: var(--blanc)}
body{
    color:var(--bleu)
}
/*******ICONS***********/

.pdf:before {
    content: "\e912";
}
.tiktok:before {
    content: "\e90d";
}
.map:before {
    content: "\e900";
}
.search:before {
    content: "\e901";
}
.contact:before {
    content: "\e902";
}
.traduction:before {
    content: "\e903";
}
.mail:before {
    content: "\e904";
}
.tel:before {
    content: "\e905";
}
.fax:before {
    content: "\e906";
}
.valide:before {
    content: "\e908";
}
.next:before {
    content: "\e909";
}
.close:before {
    content: "\e90a";
}
.menu:before {
    content: "\e90b";
}
.rep:before {
    content: "\e90c";
}
.linkedin:before {
    content: "\e90f";
}
.youtube:before {
    content: "\e910";
}
.instagram:before {
    content: "\e90e";
}
.facebook:before {
    content: "\e911";
}
.user:before {
    content: "\e907";
}
/*******FONT***********/
.poppins {
    font-family: 'poppins', cursive;
}
.menu .titre{
    font-size: 16px;
    padding-bottom: 10px;
}
.menu .titre:after{
    bottom: 0px;
}
.titre{
    font-family: 'poppins', cursive;
    font-weight: 700;
    font-size: 30px;
    position: relative;
    padding-bottom: 30px;
}
.titre.font20{
    font-size: 20px;
}
.titre:after{
    position: absolute;
    content: '';
    bottom: 20px;
    left: 0;
    width: 50px;
    height: 3px;
    background-color: var(--vert);
}
.titre.blanc:after {
    background-color: var(--blanc);
}
.titre.bleu:after {
    background-color: var(--bleu);
}
.titre.orange:after {
    background-color: var(--orange);
}
.titre.marron:after {
    background-color: var(--marron);
}
.titre.vert:after {
    background-color: var(--vert);
}
.titre.vertClair:after {
    background-color: var(--vertClair);
}
.titre.gris999:after {
    background-color: var(--gris999);
}
.titre.grisClair:after {
    background-color: var(--grisClair);
}
/* Centrer l'after quand la classe center est appliquée */
.titre.center:after {
    left: 50%;
    transform: translateX(-50%);
}

.bouton {
    cursor: pointer;
    text-decoration: none;
    transition: all 0.3s ease;
    vertical-align: middle;
    display: inline-block !important;
}
/* 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{
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    filter: brightness(1.1);
}

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


/***********COULEURS****************/
.vert{
    color: var(--vert);
}
.vert.clair{
    color: var(--vertClair);
}
.blanc{
    color: var(--blanc);
}
.g999{
    color: var(--gris999);
}
.bleu{
    color: var(--bleu);
}
.marron{
    color: var(--marron);
}
.orange{
    color: var(--orange);
}
/***********FONDS****************/
.fv{
    background-color: var(--vert);
}
.fvc{
    background-color: var(--vertClair);
}
.fg{
    background-color: var(--grisClair);
}
.ff3{
    background-color: var(--grisTresClair);
}
.fb{
    background-color: var(--blanc);
}
.fbl{
    background-color: var(--bleu);
}
.fm{
    background-color: var(--marron);
}
.fo{
    background-color: var(--orange);
}
/***********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);
}
.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);
}
.babl{
    border : 1px solid var(--bleu);
}
.bao{
    border : 1px solid var(--orange);
}
.bam{
    border : 1px solid var(--marron);
}


/* ========================================
   CLASSES CERCLES BACKGROUND AVEC EFFET FLOU
   ======================================== */

/* Classe de base pour tous les cercles */
.cercle {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0.2;
    filter: blur(20px);
    animation: flotteCircle 12s ease-in-out infinite;
}

/* Tailles des cercles */
.cercle-xs { width: 60px; height: 60px; opacity: 0.1; }
.cercle-sm { width: 100px; height: 100px; opacity: 0.15 }
.cercle-md { width: 150px; height: 150px;  opacity: 0.2}
.cercle-lg { width: 200px; height: 200px; opacity: 0.25 }
.cercle-xl { width: 250px; height: 250px; opacity: 0.3 }
.cercle-xxl { width: 300px; height: 300px; opacity: 0.35 }

/* Couleurs des cercles selon votre charte */
.cercle-vert { background-color: var(--vert); }
.cercle-vert-clair { background-color: var(--vertClair) }
.cercle-orange { background-color: var(--orange); }
.cercle-marron { background-color: var(--marron); }
.cercle-bleu { background-color: var(--bleu); }
.cercle-blanc { background-color: var(--blanc); }

/* Niveaux de flou */
.flou-leger { filter: blur(20px); }
.flou-moyen { filter: blur(30px); }
.flou-fort { filter: blur(40px); }
.flou-hard { filter: blur(50px); }

/* Opacités */
.op-tres-leger { opacity: 0.1; }
.op-leger { opacity: 0.2; }
.op-moyen { opacity: 0.4; }
.op-visible { opacity: 0.6; }

/* Positions prédéfinies */
.pos-top-left { top: -50px; left: -50px; }
.pos-top-right { top: -50px; right: -50px; }
.pos-bottom-left { bottom: -50px; left: -50px; }
.pos-bottom-right { bottom: -50px; right: -50px; }
.pos-center-left { top: 50%; left: -100px; transform: translateY(-50%); }
.pos-center-right { top: 50%; right: -100px; transform: translateY(-50%); }
.pos-top-center { top: -50px; left: 50%; transform: translateX(-50%); }
.pos-bottom-center { bottom: -50px; left: 50%; transform: translateX(-50%); }

/* Animations */
@keyframes flotteCircle {
    0%, 100% {
        transform: translateY(0px) translateX(0px) scale(1);
        opacity: 0.4;
    }
    25% {
        transform: translateY(-20px) translateX(15px) scale(1.05);
        opacity: 0.2;
    }
    50% {
        transform: translateY(-35px) translateX(-10px) scale(0.95);
        opacity: 0.6;
    }
    75% {
        transform: translateY(-15px) translateX(-20px) scale(1.1);
        opacity: 0.3;
    }
}

@keyframes flotteCircleLent {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
        opacity: 0.3;
    }
    50% {
        transform: translateY(-30px) rotate(180deg);
        opacity: 0.7;
    }
}

@keyframes flotteCircleRapide {
    0%, 100% {
        transform: translateY(0px) translateX(0px);
        opacity: 0.5;
    }
    33% {
        transform: translateY(-15px) translateX(20px);
        opacity: 0.2;
    }
    66% {
        transform: translateY(-25px) translateX(-15px);
        opacity: 0.8;
    }
}

/* Vitesses d'animation */
.anim-lent { animation: flotteCircleLent 20s ease-in-out infinite; }
.anim-normal { animation: flotteCircle 12s ease-in-out infinite; }
.anim-rapide { animation: flotteCircleRapide 8s ease-in-out infinite; }

/* Délais d'animation pour décalage */
.delay-1 { animation-delay: -1s; }
.delay-2 { animation-delay: -2s; }
.delay-3 { animation-delay: -3s; }
.delay-4 { animation-delay: -4s; }
.delay-5 { animation-delay: -5s; }

/* Conteneur pour les cercles */
.container-cercles {
    position: relative;
    z-index: 1;
}

/* Assurer que le contenu reste au-dessus */
.container-cercles > *:not(.cercle) {
    position: relative;
    z-index: 10;
}

/* Classes combinées pour usage rapide */
.cercle-vert-lg-flou {
    position: absolute;
    width: 250px;
    height: 250px;
    background-color: rgba(38, 144, 124, 0.25);
    border-radius: 50%;
    filter: blur(3px);
    opacity: 0.6;
    pointer-events: none;
    z-index: 0;
    animation: flotteCircle 12s ease-in-out infinite;
}

.cercle-orange-md-flou {
    position: absolute;
    width: 180px;
    height: 180px;
    background-color: rgba(253, 63, 38, 0.20);
    border-radius: 50%;
    filter: blur(4px);
    opacity: 0.5;
    pointer-events: none;
    z-index: 0;
    animation: flotteCircleRapide 8s ease-in-out infinite;
}

.cercle-bleu-xl-flou {
    position: absolute;
    width: 320px;
    height: 320px;
    background-color: rgba(6, 44, 76, 0.18);
    border-radius: 50%;
    filter: blur(5px);
    opacity: 0.4;
    pointer-events: none;
    z-index: 0;
    animation: flotteCircleLent 20s ease-in-out infinite;
}

/* Responsive pour les cercles */
@media (max-width: 768px) {
    .cercle-xl, .cercle-xxl {
        width: 200px;
        height: 200px;
    }
    .cercle-lg {
        width: 150px;
        height: 150px;
    }
    .cercle-md {
        width: 120px;
        height: 120px;
    }
}

/* Cercles spéciaux avec dégradés */
.cercle-degrade-vert {
    background: radial-gradient(circle at 30% 30%, rgba(195, 228, 162, 0.4), rgba(38, 144, 124, 0.2));
}

.cercle-degrade-orange {
    background: radial-gradient(circle at 30% 30%, rgba(253, 63, 38, 0.3), rgba(166, 141, 117, 0.1));
}

.cercle-degrade-bleu {
    background: radial-gradient(circle at 30% 30%, rgba(6, 44, 76, 0.25), rgba(38, 144, 124, 0.1));
}

/* Effet de pulsation */
@keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 0.4; }
    50% { transform: scale(1.1); opacity: 0.7; }
}

.cercle-pulse { animation: pulse 4s ease-in-out infinite; }