:root {
    --vert: #26907C;
    --vertClair: rgba(185, 223, 146, 0.9);
    --grisClair: #eee;
    --grisTresClair: #f3f3f3;
    --gris999: #999;
    --blanc: #fff;
    --bleu: #062C4C;
    --orange: #FF4000;
    --orangeClair: #fccbbd;
    --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";
}

.down:before {
    content: "\e909";
    display: block;
    rotate: 90deg;
}

.up:before {
    content: "\e909";
    display: block;
    rotate: -90deg;
}

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

.download:before {
    content: "\e913";
}

.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', 'poppins', sans-serif;
}

.menu .titre {
    font-size: 16px;
    padding-bottom: 10px;
}

.menu .titre:after {
    bottom: 0px;
}


.title {
    font-family: 'Poppins', 'poppins', sans-serif;
    font-weight: 700;
    position: relative;
    padding-bottom: 30px;
    line-height: 1.1;
}

.title:after {
    position: absolute;
    content: '';
    bottom: 20px;
    left: 0;
    width: 50px;
    height: 3px;
    background-color: var(--vert);
}
.title2 {
    font-family: 'Poppins', 'poppins', sans-serif;
    font-weight: 700;
    position: relative;
    padding-bottom: 10px;
    line-height: 1.1;
}

.title2:after {
    position: absolute;
    content: '';
    bottom: 0;
    left: 0;
    width: 50px;
    height: 3px;
    background-color: var(--vert);
}


.titre {
    font-family: 'Poppins', 'poppins', sans-serif;
    font-weight: 700;
    font-size: 30px;
    position: relative;
    padding-bottom: 30px;
    line-height: 1.1;
}

.titre.font20 {
    font-size: 20px;
}

.titre.font25 {
    font-size: 25px;
}

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

.bloc_colonne.liencache {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.bloc_colonne.liencache:hover {
    transform: translateY(-5px);
    z-index: 2;
}

.bloc_colonne.liencache:hover.hoverombre,
.bloc_colonne.liencache:hover > .hoverombre {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.18);
}

.bloc_colonne.liencache:hover .bouton {
    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);
}

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

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

.foc {
    background-color: var(--orangeClair);
}

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

.b2lbl {
    border-left: 4px solid #fff;
}

.b2lv {
    border-left: 4px solid var(--vert);
}

.b2lvc {
    border-left: 4px solid var(--vertClair);
}

.b2lvc {
    border-left: 4px solid var(--vertClair);
}

.b2loc {
    border-left: 4px solid var(--orangeClair);
}

.b2lo {
    border-left: 4px solid var(--orange);
}


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

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

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

.img-cover {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    z-index: 0;
}

.bgleft > .img-cover,
.bgleft .img-cover {
    object-position: left center;
}

.bgright > .img-cover,
.bgright .img-cover {
    object-position: right center;
}

/*
 * Fond fixe sur <img> : background-attachment n'existe pas sur une image.
 * Le calque clip (position:absolute + clip) est la fenêtre ;
 * l'img en position:fixed reste calée au viewport.
 */
.bgfixed-clip {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    clip: rect(auto, auto, auto, auto);
    z-index: 0;
    pointer-events: none;
}
.bgfixed-clip > .img-cover {
    position: fixed;
    inset: auto;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

img.img-cover[src=""],
img.img-cover[src$="/"] {
    display: none;
}

.minw0 {
    min-width: 0;
}

.tiny img:not(.img-cover):not(.img-auto):not(.rond) {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block;
}
/* Styles pour les tableaux TinyMCE */
.tiny table {
    margin: 10px 0;
    border: none;
}

.tiny table td, .tiny table th {
    padding: 8px 12px;
    border: none;
    text-align: left;
}
.tiny img.img-auto {
    display: inline-block;
}
.tiny img.rond {
    border-radius: 50%;
    object-fit: cover;
}

.pad15 {
    padding: 15px;
}

.bottom15 {
    margin-bottom: 15px;
}

.line13 {
    line-height: 13px;
}

.gap5 {
    gap: 5px;
    --gap: 5px;
}

.compteur_chiffre {
    font-size: 70px;
    font-weight: 900;
    line-height: 1;
    min-width: 20px;
    outline: none;
}
.compteur_prefixe,
.compteur_suffixe {
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    min-width: 20px;
    outline: none;
    align-self: inherit;
    padding: 0 10px;
}
.compteur_prefixe {
    margin-right: 2px;
}
.compteur_suffixe {
    margin-left: 2px;
}
.compteur_libelle {
    font-size: 13px;
    font-weight: 700;
    margin-top: 12px;
    outline: none;
}
.compteur_libelle p {
    margin: 0;
}

.filtre{
    backdrop-filter: brightness(1.2) blur(5px);
    background-color: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255,255,255, 0.2);
    box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.2);
}

@media (max-width: 800px) {
    .compteur_chiffre { font-size: 48px; }
    .compteur_prefixe,
    .compteur_suffixe { font-size: 18px; padding-bottom: 4px; }
}

/* tarteaucitron.js — aligné sur la charte */
#tarteaucitronRoot .tarteaucitronAllow,
#tarteaucitronRoot button.tarteaucitronAllow,
#tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronPersonalize2,
.tac_activate .tarteaucitronAllow {
    background: var(--vert) !important;
    color: #fff !important;
    border-color: var(--vert) !important;
}

#tarteaucitronRoot .tarteaucitronDeny,
#tarteaucitronRoot button.tarteaucitronDeny,
#tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronAllDenied2 {
    background: var(--bleu) !important;
    color: #fff !important;
    border-color: var(--bleu) !important;
}

#tarteaucitronRoot #tarteaucitronAlertBig {
    font-family: 'Poppins', sans-serif;
    color: var(--bleu);
}

body #tarteaucitronRoot.tarteaucitronSize-popup div#tarteaucitronAlertBig {
    max-width: 340px !important;
    left: 16px !important;
    bottom: 16px !important;
    border-radius: 20px !important;
    padding: 18px 0 14px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}

#tarteaucitronRoot.tarteaucitronSize-popup span#tarteaucitronDisclaimerAlert {
    font-size: 13px !important;
    line-height: 1.45;
    margin: 6px 0 14px;
}

.youtube_player {
    width: 100%;
    height: 100%;
}

#back_to_top {
    right: 20px;
    bottom: 20px;
    width: 46px;
    height: 46px;
    line-height: 46px;
    text-decoration: none;
    box-shadow: 0 8px 20px rgba(6, 44, 76, 0.25);
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

#back_to_top.visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

#back_to_top .icon {
    font-size: 18px;
    line-height: 46px;
}

.visible_anime {
    overflow: hidden;
}