/*DA of the website green olive as the balkan forests in Bulgaria*/
:root {
    --cream: #f4e6cd;
    --olive: #888151;
    --gold-bulgarian: #D4AF37;
    --gold-glow: rgba(212, 175, 55, 0.25);
    --bg-green-box: #6b7042; /* Style de la boîte verte de ton image */
}

html {
    min-height: 100%;
    background: #b5a37f;
}

body {
    min-height: 100vh;
    margin: 0;
    background: #b5a37f;
    color: var(--olive);
}
.burger {
    display: none;
}
.Homenavbar {
    display:flex;
    justify-content:center !important;
    align-items:center;
    height:60px;
    padding:0 24px;
    border-radius:40px;
    background:rgba(109,113,60,0.89);
    gap:16px;
    position:relative;
    z-index:1000;
}
/* Les liens sont cachés par défaut */
.Homenavbar-items {
    flex-direction: column;
    width: 100%;
    gap: 12px;
    text-align: center;
    margin-top: 15px;
}
.Homenavbar-items a,
.nav-item,
.nav-main-item>a,
.nav-sub-item {
    font-family:"Roboto Slab",serif!important;
    font-weight:700;
    letter-spacing:1px;
    color:#f5f2e9!important;
    text-decoration:none;
}
/*Title in a historical police*/
h1{

    font-family: "Roboto Slab",serif;
    font-weight: 900;
    color:#888151;
    text-align: center;
}

.Homenavbar-items a,
.Homenavbar-items .nav-item,
.Homenavbar-items .nav-main-item > a {
    font-size: 1.35rem !important;   /* taille d'origine */
    font-weight: 800 !important;     /* plus massif */
    letter-spacing: 1.5px !important;
    text-align: center;
}

/* Séparateurs plus grands */
.separator {
    font-size: 1.4rem !important;
}

/* Sous-menus gardent une taille plus petite */
.nav-sub-item {
    font-size: 1rem !important;
}
.Homenavbar-title {
    position: absolute;

    left: 50%;
    transform: translateX(-50%);

    display: flex;
    align-items: center;

    gap: 10px;

    font-family: "Roboto Slab", serif;
    font-weight: 800;

   color:  #f4e6cd;

    font-size: 1.4rem;
    letter-spacing: 2px;

    white-space: nowrap;
}


/*Style of the several languages available on the website , languages that I spoke */

.languages_flag {
    height: 17px;
    width: 25px;
    white-space: nowrap;
}

/*Home image :)*/
#musala {
    display: block;
    width: 100%;
    height: 745px;
    object-fit: cover;
    border-radius: 25px;

    animation: musalaZoom 15s ease-in-out infinite alternate;
}

/* Zoom lent et cinématique */
@keyframes musalaZoom {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(1.08);
    }
}

/*Language dropwdown menu */
.lang-selector {
    display: flex;
    align-items: center;
    flex-direction: row; /* drapeau → flèche */
    gap: 6px;
    cursor: pointer;
    position: absolute !important;
    left: 30px !important;
    right: auto !important;
    top: 50%;
    transform: translateY(-50%);
}

.arrow {
    font-size: 14px;
    color : white;
    transition: transform 0.2s ease;
}

/* Quand le menu est ouvert → flèche tournée */
.lang-selector.open .arrow {
    transform: rotate(180deg);
}
#google_translate_element {
    display: none;
}
.lang-dropdown {
    display: none;
    position: absolute;
    background: white;
    list-style: none;
    top :100%;
    left: 15px;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 6px;
    margin-top: 5px;
    z-index: 9999;

}

.lang-dropdown.open {
    display: block;
}
.flag-icon {
    width: 20px;
    height: 14px;
    margin-right: 8px;
    vertical-align: middle;
}

.lang-dropdown li {
    display: flex;
    align-items: center;
    padding: 6px 10px;
    cursor: pointer;
}

.lang-dropdown li:hover {
    background-color: #f0f0f0;
}

/*Style of the glass box on the home page image*/
/* Home image */
#glass_box_shadow {
    position: relative;
    width: 70%;
    margin: 30px auto;
    overflow: hidden;
    border-radius: 25px;
    animation: imageAppear 1.2s ease-out forwards;
}
@keyframes imageAppear {
    from {
        opacity: 0;
        transform: scale(0.97);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}
.glass-text {
    position: absolute;
    bottom: 20px;
    right: 75px;

    padding: 15px 25px;
    color: white;
    font-size: 18px;

    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 15px;

    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);

    animation: glassAppear 1.5s ease-out forwards;
}

@keyframes glassAppear {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/*Bulgarian red on the navbar underline */
.Homenavbar-title {
    display: flex;
    align-items: center;
    gap: 10px;

    font-family: "Roboto Slab", serif;
    font-weight: 800;
    color: #f5f2e9;
    font-size: 1.4rem;
    letter-spacing: 2px;
    margin: auto;
    white-space: nowrap;
}
.navbar-right {
    margin-left: auto;

    display: flex;
    align-items: center;

    gap: 14px;

    flex-shrink: 0;
}
.nav-item {
    position: relative;
    cursor: pointer;
    transition: color 0.3s ease;
}
/*bulgarian red */
.nav-item:hover,
.nav-main-item:hover > a {
    color: rgba(205, 86, 72, 0.96);
}


nav-item::after,
.nav-main-item > a::after {
    content: "";

    position: absolute;

    left: 50%;
    bottom: -8px;

    width: 0;
    height: 3px;

    background-color: #D62612;
    border-radius: 8px;

    transform: translateX(-50%);
    transition: width 0.3s ease;
}

.nav-item:hover::after {
    width: 100%;
}
.nav-item {
    position: relative;
    cursor: pointer;
}
.separator {
    color: #f5f2e9;
}
/*Hide blue link */
.nav-item a {
    color: inherit;
    text-decoration: none;
}

#bg_folk {
    width: 250px;
    border-radius: 25px;
    margin:auto;

    transform: scale(0.5); /* petit au départ */
    opacity: 0;
    transition: transform 1.2s ease-out, opacity 1.2s ease-out;
}

#bg_folk.zoomed {
    transform: scale(1);
    opacity: 1;
}
/*Search bar for the regions */
.search_container {

    position: relative;
}

#region-search-form {
    display: flex;
    align-items: center;
    width: 220px;
    height: 36px;
    background-color: #f5f2e9;
    border: 2px solid #C9A227;
    border-radius: 30px;
    overflow: hidden;
}

#region-search {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    padding: 0 14px;
    background: transparent;
    font-family: "Roboto Slab", serif;
    font-size: 13px;
    color: hsl(82, 39%, 30%);
}

#region-search::placeholder {
    color: hsl(82, 39%, 30%);
    opacity: 0.7;
}

#region-search-form button {
    width: 65px;
    height: 100%;

    border: none;
    background-color: rgba(109, 113, 60, 0.89);
    color: white;

    font-size: 22px;
    cursor: pointer;

    transition: background-color 0.3s ease;
}

#region-search-form button:hover {
    background-color: #D62612;
}
.search-btn{
    background-color: var(--olive);
    border-radius: 9px;
}
#region-suggestions {
    position: absolute;
    top: 62px;
    right: 0;

    width: 420px;

    background: white;
    border-radius: 15px;

    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);

    overflow: hidden;
    z-index: 1000;
}

.suggestion {
    padding: 14px 20px;

    color: hsl(82, 39%, 30%);
    font-family: "Roboto Slab", serif;

    cursor: pointer;
    position: relative;

    transition: background-color 0.2s ease;
}

.suggestion:hover {
    background-color: #4169E1;
    color: white;
}

 /*terracota block like rila monastery */

.intro_bg {
    max-width: 600px;
    margin-left: 10px;
    padding: 25px 30px;
    background-color: rgba(109, 113, 60, 0.89);
    border-radius: 20px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);


}


.intro_bg p {
    font-family: "Lora", serif;
    line-height: 1.9;
    font-size: 1rem;
    color: #f5f2e9;
    text-align: left;
    letter-spacing: 0.2px;
}
/*yellow golden like bulgarian tresor */
.intro_bg strong {
    color: #C9A227;
    font-weight: 700;
    font-size: 1.08em; /* légèrement plus grand pour vraiment ressortir */
}
#folklore-sticker {
    width: 150px;
    height: 150px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

background-color: rgba(109, 113, 60, 0.89);
    color: white;

    border-radius: 50%;

    font-family: "Roboto Slab", serif;
    text-align: center;

    cursor: pointer;

    transform: rotate(-8deg);
    transition: transform 0.3s ease, box-shadow 0.3s ease;

    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

#folklore-sticker:hover {
    transform: rotate(0deg) scale(1.12);

    box-shadow:
            0 12px 30px rgba(0, 0, 0, 0.3);
}

#folklore-sticker span {
    font-size: 25px;
}

#folklore-sticker strong {
    font-size: 18px;
    letter-spacing: 2px;
}

#folklore-sticker small {
    margin-top: 8px;
    font-size: 10px;
    letter-spacing: 2px;
}
.folklore-content {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 60px;

    width: 90%;
    max-width: 1300px;
    margin: 40px auto;
}

.intro_bg {
    margin-left: 0; /* collé à gauche */
}

.folklore-visual {
    position: relative;

    width: 400px;
    min-width: 350px;

    display: flex;
    justify-content: center;
    align-items: center;
}

#bg_folk {
    width: 350px;
    height: auto;

    margin: 0;

    border-radius: 25px;

    transform: scale(0.5);
    opacity: 0;

    transition: transform 1.2s ease-out,
    opacity 1.2s ease-out;
}

#bg_folk.zoomed {
    transform: scale(1);
    opacity: 1;
}
#folklore-sticker {
    position: absolute;

    right: -20px;
    bottom: -20px;

    width: 150px;
    height: 150px;

    /* le reste de ton CSS */
}
.folklore-visual {
    width: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#bg_folk {
    width: 350px;
    height: auto;
    border-radius: 25px;

    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25);

    transform: scale(0.5);
    opacity: 0;

    transition: transform 1.2s ease-out,
    opacity 1.2s ease-out;
}

#bg_folk.zoomed {
    transform: scale(1);
    opacity: 1;
}
.image-container {
    width: 350px;
    flex-shrink: 0;
    position: relative;
}
.firstfolklore {
    width: 350px;
    height: 420px;
    object-fit: cover;
    margin-top: 20px;
    /* forme goutte */
    border-radius: 50% 50% 50% 10%;

    cursor: pointer;

    z-index: 10;
    transition: transform 0.4s ease;
}

.firstfolklore:hover {
    transform: scale(1.05);
}


/* Le texte apparaît quand on passe sur l'image */
.image-container:hover #kukeri-text {
    opacity: 1;
}
h2 {
    font-family: "Roboto Slab", serif;
    font-size: 2rem;
    font-weight: 800;

    color: rgba(109, 113, 60, 0.89);

    text-align: center;
    letter-spacing: 1px;

    margin: 35px 0 20px;

    position: relative;
}
.image-container:hover #burgasnevar {
    opacity: 1;
}
.kukeri-text,
.nestinarstvo-text {
    position: absolute;
    bottom: 20px;
    left: 20px;
    right: 20px;

    padding: 12px 15px;

    background-color: rgba(109, 113, 60, 0.89);
    color: white;

    border-radius: 15px;

    font-family: "Roboto Slab", serif;
    text-align: center;

    opacity: 0;
    transition: opacity 0.3s ease;
}

.image-container:hover .kukeri-text {
    opacity: 1;
}

.image-container:hover .nestinarstvo-text {
    opacity: 1;
}
.folklore-zoom {
    font-family: "Roboto Slab", serif;
    font-weight: 800;
    color: hsl(82, 39%, 30%);
    text-align: center;
    margin-top: 40px;

    transform: scale(0.7);
    opacity: 0;
    transition: transform 0.8s ease-out, opacity 0.8s ease-out;
}

.folklore-zoom.active {
    transform: scale(1);
    opacity: 1;
}


.lang-dropdown li {
    display: flex;
    align-items: center;
    flex-direction: row; /* drapeau → texte */
    gap: 8px;
}

.flag-icon,
.languages_flag {
    order: 0; /* drapeau toujours en premier */
}
.folklore-images {
    display: flex;
    flex-direction: column;
    gap: 20px; /* réduit l’espace entre les images */
    margin-right: 20px;
}

.image-container {
    margin-top: 0; /* supprime les marges inutiles */
}

.firstfolklore {
    margin-top: 0; /* remonte les images */
}
.intro_bg {
    animation: slideAlign 1.2s ease-out forwards;
    opacity: 0;
}

@keyframes slideAlign {
    0% {
        transform: translateX(-40px);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}
.folklore-highlight {
    width: 100%;
    display: flex;
    justify-content: flex-start; /* commence à gauche */
    margin-top: 40px;
}

.highlight-text {
    font-family: "Roboto Slab", serif;
    font-weight: 800;
    font-size: 1.4rem;
    color: var(--olive);
    text-align: left;

    margin-top: 650px;

    opacity: 0;
    transform: translateX(-200px);

    animation: slideToImages 1.4s ease-out forwards;
}

@keyframes slideToImages {
    0% {
        opacity: 0;
        transform: translateX(-200px);
    }

    100% {
        opacity: 1;
        transform: translateX(-50px);
    }
}
#map {
    width: 100%;
    height: 650px;
    margin-top: 20px;
    border-radius: 20px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
    z-index: 1;
}
/* --- Popup personnalisée --- */
.custom-popup {
    background-color: hsl(82, 39%, 30%); /* Bleu foncé (comme le ciel bulgare) */
    color: white;
    padding: 10px 15px;
    border-radius: 12px;
    text-align: center;
    min-width: 200px;
    font-family: 'Arial', sans-serif;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

/* Image dans la popup */
.popup-image {
    width: 100%;
    max-width: 180px;
    height: auto;
    border-radius: 15px;
    border: 5px solid #f1c40f; /* Liseré jaune (couleur Kukeri) */
}

/* Titre */
.custom-popup h3 {
    margin: 5px 0;
    font-size: 18px;
hsl(82, 39%, 30%)
}

/* Date */
.custom-popup p {
    margin: 5px 0 10px 0;
    font-size: 14px;
    font-weight: bold;
}

/* Lien / bouton */
.popup-link {
    display: inline-block;
    background-color: hsl(82, 39%, 30%);
    padding: 8px 16px;
    border-radius: 20px;

    font-weight: bold;
    font-size: 14px;
    transition: background 0.3s;
    color: inherit;
    text-decoration: none;
}


.popup-link:hover {
    background-color: hsl(82, 39%, 20%); /* Vert plus foncé au survol */
    color: #ffffff;

}

/* --- Correction du style par défaut de Leaflet pour que le fond bleu s'affiche bien --- */
.leaflet-popup-content-wrapper {
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    border-radius: 12px !important;
}
/*VODATHERMAL first image*/
/* =========================================
   THERMAL WATER - RILA MOUNTAIN + RAIN
   ========================================= */

.rila-teaser {
    position: relative;

    width: min(1200px, 90%);
    height: 390px;

    margin: 40px auto;

    overflow: hidden;

    border-radius: 20px;

    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.25);

    background: #222;
}


/* Image de la montagne */

.rila-teaser img#rilski_montain {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center bottom;

    margin: 0;

    border-radius: 0;

    box-shadow: none;

    transition: transform 0.5s ease;
}


/* Petit zoom au survol */

.rila-teaser:hover img#rilski_montain {
    transform: scale(1.02);
}


/* Canvas créé par RainyDay.js */

.rila-teaser canvas {
    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    pointer-events: none;

    border-radius: 20px;
}


/* =========================================
   RESPONSIVE
   ========================================= */
/*
@media (max-width: 800px) {

    .rila-teaser {
        width: 92%;
        height: 300px;

        margin: 30px auto;
    }

/*diminue taille drapeau sur tel*/
    /* Pour tous les écrans */
    .lang-selector {
        position: relative;
        display: flex;
        align-items: center;
        cursor: pointer;
        padding: 5px 10px;
    }

    .lang-selector img.languages_flag {
        width: 30px;
        height: auto;
        border-radius: 3px;
    }

    .lang-selector .arrow {
        font-size: 12px;
        margin-left: 5px;
    }
/*
    /* === MOBILE (moins de 800px) === */
/*   @media (max-width: 800px) {
       .lang-selector {
           position: absolute;
           left: 10px;      /* ← BLOQUÉ À GAUCHE */
/*          top: 12px;
         z-index: 9999;
         padding: 5px;
     }

     .lang-selector img.languages_flag {
         width: 24px;     /* ← DRAPEAU PLUS PETIT */
/*       height: auto;
  }

  .lang-selector .arrow {
      font-size: 10px;
  }
}
*/

.hero-title-overlay {
  top: 32%;
  font-size: 1.5rem;
  letter-spacing: 0.5px;
  white-space: normal;
  width: 88%;
  text-align: center;
}

.hero-cta {
  top: 52%;
  padding: 10px 26px;
  font-size: 0.85rem;
  letter-spacing: 1px;
}

.thermal-map-icon {
  display: none;
}


@media (max-width: 500px) {

.hero-title-overlay {
  top: 28%;
  font-size: 1.15rem;
  width: 90%;
}

.hero-cta {
  top: 48%;
  padding: 8px 20px;
  font-size: 0.75rem;
  letter-spacing: 0.5px;
  border-radius: 24px;
}
}



@media (max-width: 500px) {

.rila-teaser {
  width: 94%;
  height: 230px;

  margin: 20px auto;

  border-radius: 15px;
}
.lang-selector {
  left: 5px;
  top: 8px;
}

.lang-selector img.languages_flag {
  width: 20px;     /* ← ENCORE PLUS PETIT */
}
    .rila-teaser canvas {
        border-radius: 15px;
    }

}

.rila-teaser {
    position: relative;
    width: 1200px;
    height: 390px;
    margin: 40px auto;
    overflow: hidden;
    border-radius: 20px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.25);
    background: #0a0f0c;
}
.rila-teaser img#rilski_montain {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center bottom;
}
#bg-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    border-radius: 20px;
}
@media (max-width: 800px) {
    .rila-teaser { width: 92%; height: 300px; margin: 30px auto; }
}
@media (max-width: 500px) {
    .rila-teaser { width: 94%; height: 230px; margin: 20px auto; border-radius: 15px; }
    #bg-canvas { border-radius: 15px; }
}

/* --- MENU DÉROULANT AU CLIC --- */
.dropdown-list-container {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 15px;
    background-color: darkolivegreen;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    min-width: 200px;
}

.dropdown-item {
    font-family: "Roboto", sans-serif;
    font-size: 1.05rem;
    color: #555;
    text-decoration: none;
    padding: 8px 16px;
    border-radius: 8px;
    transition: all 0.2s ease;
    cursor: pointer;
    display: block;
}

.dropdown-item:hover {
    background-color: #222222;
    color: #ffffff;
    border: none;
}

.dropdown-content {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 9999;
    margin-top: 10px;
}

.dropdown-content.show {
    display: block;
}

.dropdown-trigger {
    position: relative;
    cursor: pointer;
}


/* --- SOUS-LIENS MODERNES (CONTOUR NOIR SEULEMENT) --- */

.sub-link {
    font-family: "Roboto", sans-serif;
    font-size: 1.5rem;
    font-weight: 400;
    color: #4a4a4a;
    text-decoration: none;
    padding: 12px 24px;
    position: relative;
    display: inline-block;
    width: 100%;
    max-width: 400px;
    margin-bottom: 12px;
    transition: transform 0.3s ease, padding-left 0.3s ease;
}



.sub-link:hover::before {
    width: 100%; /* Le cadre noir grandit de la gauche vers la droite */
}
/* --- STYLE MENU DÉROULANT LEANDRA --- */

/* =========================================
   HERITAGE - MENU DÉROULANT
   ========================================= */

.nav-main-item {
    position: relative;
    display: inline-block;
    cursor: pointer;
}
/* Lien Heritage */
.nav-main-item > a {
    position: relative;
    color: #f5f2e9;
    text-decoration: none;
    display: inline-block;
}
/* =========================================
   SOUS-MENU — STYLE NAVBAR
   ========================================= */

.nav-main-item .nav-sub-menu {
    position: absolute;
    top: calc(100% + 14px);
    left: 50%;

    transform: translateX(-50%) translateY(-8px);

    display: flex;
    flex-direction: column;

    width: max-content;
    min-width: 230px;

    padding: 10px;

    /* MÊME FOND QUE LA NAVBAR */
    background-color: rgba(109, 113, 60, 0.89);

    border-radius: 14px;

    /* ombre légère du bloc */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
            opacity 0.25s ease,
            transform 0.25s ease,
            visibility 0.25s ease;

    z-index: 99999;
}


/* -----------------------------------------
   PETIT TRIANGLE
   ----------------------------------------- */

.nav-main-item .nav-sub-menu::before {
    content: "";

    position: absolute;

    top: -6px;
    left: 50%;

    width: 12px;
    height: 12px;

    background-color: rgba(109, 113, 60, 0.89);

    transform: translateX(-50%) rotate(45deg);
}


/* -----------------------------------------
   MENU OUVERT
   ----------------------------------------- */

.nav-main-item .nav-sub-menu.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transform: translateX(-50%) translateY(0);
}


/* =========================================
   SOUS-TITRES
   ========================================= */

.nav-main-item .nav-sub-item {
    position: relative;

    display: block;

    width: auto !important;

    margin: 3px 0 !important;

    padding: 11px 18px !important;

    box-sizing: border-box;

    /* BLANC PAR DÉFAUT */
    color: #f5f2e9 !important;

    font-family: "Roboto Slab", serif;
    font-size: 0.95rem;
    font-weight: 600;

    line-height: 1.3;

    text-decoration: none !important;

    /* PAS DE BORDURE PAR DÉFAUT */
    border: 1.5px solid transparent !important;

    border-radius: 9px !important;

    background: transparent !important;

    transition:
            border-color 0.25s ease,
            box-shadow 0.25s ease,
            transform 0.25s ease;
}


/* =========================================
   HOVER
   ========================================= */

.nav-main-item .nav-sub-item:hover {

    /* LE TEXTE RESTE BLANC */
    color: #ffffff !important;

    /* SEULEMENT LE CONTOUR NOIR */
    border-color: #000000 !important;

    /* PAS DE CHANGEMENT DE FOND */
    background-color: transparent !important;

    /* Petite élévation */
    transform: translateY(-1px);

    /* Ombre du rectangle */
    box-shadow:
            0 4px 10px rgba(0, 0, 0, 0.28);
}


/* =========================================
   PETIT TRAIT NOIR À GAUCHE
   ========================================= */

.nav-main-item .nav-sub-item::before {
    content: "";

    position: absolute;

    left: 7px;
    top: 50%;

    width: 0;
    height: 2px;

    background: #000000;

    transform: translateY(-50%);

    transition: width 0.25s ease;
}

.nav-main-item .nav-sub-item:hover::before {
    width: 5px;
}


/* =========================================
   ANIMATION D'APPARITION
   ========================================= */

.nav-main-item .nav-sub-item {
    opacity: 0;
    transform: translateY(5px);
}

.nav-main-item .nav-sub-menu.open .nav-sub-item {
    opacity: 1;
    transform: translateY(0);
}


/* Apparition progressive */

.nav-main-item .nav-sub-menu.open .nav-sub-item:nth-child(1) {
    transition-delay: 0.03s;
}

.nav-main-item .nav-sub-menu.open .nav-sub-item:nth-child(2) {
    transition-delay: 0.06s;
}

.nav-main-item .nav-sub-menu.open .nav-sub-item:nth-child(3) {
    transition-delay: 0.09s;
}

.nav-main-item .nav-sub-menu.open .nav-sub-item:nth-child(4) {
    transition-delay: 0.12s;
}

.nav-main-item .nav-sub-menu.open .nav-sub-item:nth-child(5) {
    transition-delay: 0.15s;
}
.nav-main-item {
    position: relative;
}

.nav-sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 99999;
}

/*for vodathermal*/
.intro_bg p {
    margin: 0 0 18px 0;
}

.intro_bg p:last-child {
    margin-bottom: 0;
}
.water-drop {
    width: 120px;
    height: 120px;
    background: #4da6ff;
    border-radius: 50% 50% 60% 60%;
    position: relative;
    transform: rotate(20deg);
}

.eye {
    width: 35px;
    height: 35px;
    background: white;
    border-radius: 50%;
    position: absolute;
    top: 40px;
    left: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.pupil {
    width: 18px;
    height: 18px;
    background: black;
    border-radius: 50%;
    position: relative;
    transition: transform 0.1s linear;
}
/* Palette spécifique à la section Eaux Thermales */
.intro-bg-thermal {
    background-color: rgba(109, 113, 60, 0.89);
    margin-bottom: 35px;

}

.intro-bg-thermal p {
    margin: 0 0 18px 0;
}

.intro-bg-thermal p:last-child {
    margin-bottom: 0;
}

/* L'or reste pour les mots-clés : garde le fil doré de tout le site,
   et le contraste or/bleu-pétrole est naturellement élégant */
.intro-bg-thermal strong {
    color: #9FD3DC;
}

/* Petit trait bleu sous le titre, pour relier visuellement le h1 au bloc */
.thermal-title {
    position: relative;
    display: inline-block;
}

.thermal-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -8px;
    width: 60px;
    height: 3px;
    background-color: rgba(109, 113, 60, 0.89);
    border-radius: 4px;
}
#droplet {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 110px;
    height: auto;
    z-index: 500;
    pointer-events: none;
}

#speech-bubble {
    position: fixed;
    bottom: 140px;
    right: 24px;
    max-width: 200px;

    padding: 10px 16px;
    background: #ffffff;
    color: hsl(82, 39%, 30%);

    font-family: "Roboto Slab", serif;
    font-size: 0.85rem;
    text-align: center;

    border-radius: 16px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);

    z-index: 500;
}

/* --- Légende de la carte --- */
#custom-map-legend.map-legend-panel {
    position: relative;
    width: 100%;
    max-width: 650px;

    /* Augmentation de la marge du haut pour décaler vers le bas */
    margin: 35px auto 0 auto !important;
    padding: 16px 28px;

    background-color: rgba(109, 113, 60, 0.89);
    border-radius: 15px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;

    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
}

#custom-map-legend h4 {
    display: none;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    text-decoration: none !important; /* Enlève tout soulignement */
    border-bottom: none !important;   /* Enlève toute ligne sous le bloc */
    padding: 6px 12px;
    border-radius: 8px;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
}

/* --- Au survol (Hover) : Vert foncé et suppression des tirets --- */
.legend-item:hover {
    background-color: #3b4224 !important;
    text-decoration: none !important;
    transform: translateY(-2px);
}

.legend-item:hover span {
    color: #ffffff !important;
    text-decoration: none !important;
    border-bottom: none !important;
}

.legend-img {
    width: 26px;
    height: 26px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid #C9A227;
}

.legend-item span {
    font-family: "Roboto Slab", serif;
    font-size: 0.95rem;
    font-weight: 700;
    color: #f5f2e9;
    text-decoration: none !important;
}
/* Responsive : on réduit sur mobile pour ne pas gêner le contenu */
@media (max-width: 768px) {
    #droplet {
        width: 70px;
        bottom: 16px;
        right: 16px;
    }

    #map {
        height: 450px !important;
    }

    #speech-bubble {
        bottom: 90px;
        right: 16px;
        max-width: 150px;
        font-size: 0.75rem;
    }


    /* Ajustement de la légende sous la carte */
    #droplet {
        width: 70px;
        bottom: 16px;
        right: 16px;
        cursor: pointer;
    }

    #speech-bubble {
        display: none;
        bottom: 90px;
        right: 16px;
        max-width: 150px;
        font-size: 0.75rem;
    }

    #speech-bubble.show {
        display: block;
    }

    /* Carte & Légende */
    #map {
        height: 420px !important;
        margin-top: 15px !important;
    }

    #custom-map-legend.map-legend-panel {
        position: relative !important;
        top: auto !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-top: 12px !important;
        padding: 10px 12px !important;
        border-radius: 12px !important;
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
    }

    .legend-item {
        gap: 6px !important;
    }

    .legend-img {
        width: 18px !important;
        height: 18px !important;
        border-radius: 4px !important;
    }

    .legend-item span {
        font-size: 0.75rem !important;
        white-space: nowrap !important;
    }

    /* BARRE DE NAVIGATION MOBILE */
    .Homenavbar {
        position: relative;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        width: calc(100% - 20px);
        height: 55px !important;
        margin: 10px auto;
        padding: 8px 14px;
        box-sizing: border-box;
        border-radius: 18px;
    }

    /* SÉLECTEUR DE LANGUE MOBILE */
    .lang-selector {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        z-index: 500;
        padding: 5px 8px;
        border-radius: 10px;
    }

    .languages_flag {
        width: 18px;
        height: 12px;
        object-fit: cover;
    }

    /* BOUTON BURGER */
    .burger {
        display: flex !important;
        flex-direction: column;
        justify-content: space-between;
        width: 28px;
        height: 21px;
        cursor: pointer;
        z-index: 500;
    }

    .burger span {
        width: 100%;
        height: 3px;
        background: #f5f2e9;
        border-radius: 3px;
    }

    /* MENU DES LIENS (Masqué par défaut, s'ouvre avec la classe .open) */
    .Homenavbar-title {
        display: none !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center;
        position: fixed;
        top: 75px;
        left: 50%;
        transform: translateX(-50%);
        width: 92% !important;
        max-width: 400px;
        margin: 0 !important;
        padding: 16px 0 !important;
        box-sizing: border-box;
        gap: 12px !important;
        background-color: rgba(109, 113, 60, 0.96);
        border-radius: 20px;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
        z-index: 999;
    }

    .Homenavbar-title.open {
        display: flex !important;
    }

    .separator {
        display: none !important; /* Cache les barres verticales "|" en mobile */
    }
}

    .rila-teaser {
        position: relative;
        width: 1200px;
        height: 390px;
        margin: 40px auto;
        overflow: hidden;
        border-radius: 20px;

        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.25);
    }

    .rila-teaser img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center center;
    }

    #speech-bubble {
        display: none;
    }

    #speech-bubble.show {
        display: block;
    }

    #droplet {
        cursor: pointer;
    }

    /* =====================================================
       MOBILE NAVBAR
       ===================================================== */
    @media (max-width: 768px) {

        /* NAVBAR */
        .Homenavbar {
            position: relative;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;

            width: calc(100% - 20px);
            height: 55px !important;

            margin: 10px auto;
            padding: 8px 14px;

            box-sizing: border-box;
            border-radius: 18px;
        }


        /* LANGUE */
        .lang-selector {
            position: relative !important;

            top: auto !important;
            left: auto !important;
            right: auto !important;

            z-index: 500;

            padding: 5px 8px;
            border-radius: 10px;
        }

        .languages_flag {
            width: 18px;
            height: 12px;
            object-fit: cover;
        }


        /* BURGER */
        .burger {
            display: flex !important;

            flex-direction: column;
            justify-content: space-between;

            width: 28px;
            height: 21px;

            cursor: pointer;
            z-index: 500;
        }

        .burger span {
            width: 100%;
            height: 3px;

            background: #f5f2e9;
            border-radius: 3px;
        }


        /* =================================================
           MENU PRINCIPAL
           ================================================= */
        .Homenavbar-title {
            display: flex !important;
            flex-direction: column !important;
            align-items: center !important;
            text-align: center;

            position: fixed;
            top: 63px;
            left: 50%;
            width: 92% !important;
            max-width: 400px;
            margin: 0 !important;
            padding: 12px 0 !important;
            box-sizing: border-box;
            gap: 4px !important;

            background: rgba(109, 113, 60, 0.97);
            border-radius: 15px;
            z-index: 400;

            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transform: translateX(-50%) translateY(-12px);

            transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
        }

        .Homenavbar-title.open {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
            transform: translateX(-50%) translateY(0);
        }

        .Homenavbar-title .nav-item,
        .Homenavbar-title .nav-main-item {
            width: 100% !important;
            text-align: center;
            padding: 6px 20px !important;
        }


        .Homenavbar-title a {
            font-size: 1rem !important;
            line-height: 1.2 !important;

            white-space: nowrap;
        }


        /* SUPPRIMER LES | */
        .Homenavbar-title .separator {
            display: none !important;
        }


        /* =================================================
           SOUS-MENUS
           ================================================= */
        .nav-main-item .nav-sub-menu {
            position: static !important;

            display: none;

            width: 200px !important;
            min-width: 0 !important;

            margin: 5px auto 0 !important;

            padding: 5px 0 !important;

            transform: none !important;

            border-radius: 10px;
        }


        /* Sous-menu ouvert par dropdown.js */
        .nav-main-item .nav-sub-menu.open {
            display: block !important;
        }


        .nav-main-item .nav-sub-item {
            display: block !important;

            width: auto !important;

            padding: 7px 10px !important;

            font-size: 0.85rem !important;
        }


        /* =================================================
           LANG MENU
           ================================================= */
        .lang-dropdown {
            z-index: 600;
        }


        /* =================================================
           CONTENU MOBILE
           ================================================= */
        h1 {
            font-size: 1.8rem;
            margin: 20px 0;
        }

        #glass_box_shadow {
            position: relative !important;
            width: 92% !important;
            margin: 90px auto 30px !important; /* était 30px auto, on pousse le haut à 90px */
            border-radius: 20px !important;
        }

        #musala {
            display: block !important;

            width: 100% !important;
            height: auto !important;

            aspect-ratio: 4 / 3 !important;

            object-fit: cover !important;

            border-radius: 20px !important;
        }

        .glass-text {
            bottom: 20px !important;
            right: 20px !important;

            max-width: 150px !important;

            font-size: 14px !important;

            padding: 10px 15px !important;

            background: rgba(255, 255, 255, 0.25) !important;

            backdrop-filter: blur(8px) !important;
        }

        /* Trait indicateur : en bas et centré, plus petit, version mobile */
        .nav-main-item .nav-sub-item::before {
            left: 50% !important;
            top: auto !important;
            bottom: 2px !important;
            width: 0 !important;
            height: 2px !important;
            transform: translateX(-50%) !important;
        }

        .nav-main-item .nav-sub-item:hover::before,
        .nav-main-item .nav-sub-item:active::before {
            width: 16px !important; /* plus petit qu'avant (5px était trop court, ajuste si besoin) */
        }

        /* Centre le texte du sous-lien pour que le trait en dessous soit bien aligné */
        .nav-main-item .nav-sub-item {
            text-align: center !important;
        }
    }
    .water-stats-section {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 60px;

        width: 90%;
        max-width: 1300px;
        margin: 40px auto;
    }

    .water-ring-visual {
        display: flex;
        align-items: center;
        gap: 30px;
        flex-shrink: 0;
    }

    .stat-ring {
        position: relative;
        width: 180px;
        height: 180px;
    }

    .stat-ring-svg {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
    }

    .stat-ring-img {
        position: absolute;
        top: 15px;
        left: 15px;
        width: calc(100% - 30px);
        height: calc(100% - 30px);
        border-radius: 50%;
        object-fit: cover;
    }

    .stat-legend {
        display: flex;
        flex-direction: column;
        gap: 18px;
    }

    .legend-item {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .legend-dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        flex-shrink: 0;
    }

    .legend-item strong {
        font-family: "Roboto Slab", serif;
        font-size: 1.6rem;
        color: rgba(109, 113, 60, 0.89);
        display: block;
    }

    .legend-item p {
        font-family: "Roboto Slab", serif;
        font-size: 0.9rem;
        color: hsl(82, 39%, 30%);
        margin: 0;
    }

    @media (max-width: 768px) {
        .water-stats-section {
            flex-direction: column;
            gap: 30px;
        }
    }
    .neon-theme {
        position: relative;
        padding: 60px 40px;
        border-radius: 25px;
        overflow: hidden;

        background-image: linear-gradient(rgba(5, 15, 20, 0.75), rgba(5, 15, 20, 0.75)),
        url('https://images.pexels.com/photos/13577775/pexels-photo-13577775.jpeg?auto=compress&cs=tinysrgb&w=1600');
        background-size: cover;
        background-position: center;
    }

    .neon-text-box {
        background: rgba(10, 20, 25, 0.55) !important;
        border: 1px solid rgba(77, 240, 255, 0.35);
        box-shadow: 0 0 20px rgba(57, 255, 20, 0.15), 0 0 25px rgba(77, 240, 255, 0.15);
        backdrop-filter: blur(4px);
    }

    .neon-text-box p {
        color: #d9fff5 !important;
        text-shadow: 0 0 6px rgba(77, 240, 255, 0.4);
    }

    /* Anneau lumineux */
    .neon-glow-green {
        filter: drop-shadow(0 0 6px #39ff14) drop-shadow(0 0 12px #39ff14);
    }

    .neon-glow-blue {
        filter: drop-shadow(0 0 6px #4df0ff) drop-shadow(0 0 12px #4df0ff);
    }

    .stat-ring-img {
        box-shadow: 0 0 15px rgba(57, 255, 20, 0.25), 0 0 15px rgba(77, 240, 255, 0.25);
    }

    /* Légende néon */
    .dot-green {
        background: #39ff14;
        box-shadow: 0 0 8px #39ff14, 0 0 14px #39ff14;
    }

    .dot-blue {
        background: #4df0ff;
        box-shadow: 0 0 8px #4df0ff, 0 0 14px #4df0ff;
    }

    .text-green {
        color: #39ff14 !important;
        text-shadow: 0 0 8px rgba(57, 255, 20, 0.6);
    }

    .text-blue {
        color: #4df0ff !important;
        text-shadow: 0 0 8px rgba(77, 240, 255, 0.6);
    }

    .stat-legend p {
        color: #cfeeee !important;
    }

    @media (max-width: 768px) {
        .neon-theme {
            padding: 30px 18px;
        }
    }
    .water-stats-section {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 60px;

        width: 90%;
        max-width: 1300px;
        margin: 60px auto;
    }

    .intro-bg-thermal {
        flex: 1;
        padding: 25px 30px;
        background-color: rgba(109, 113, 60, 0.89);
        border-radius: 20px;
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
    }

    .intro-bg-thermal p {
        font-family: "Lora", serif;
        line-height: 1.9;
        color: #f5f2e9;
        margin: 0;
    }

    /* ---- Visuel à droite ---- */
    .water-ring-visual {
        display: flex;
        align-items: center;
        gap: 30px;
        flex-shrink: 0;
    }

    .stat-ring {
        position: relative;
        width: 190px;
        height: 190px;
        border-radius: 50%;
        background: radial-gradient(circle, #0a1614 0%, #050c0b 100%);
    }

    .stat-ring-svg {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
    }

    .stat-ring-img {
        position: absolute;
        top: 22px;
        left: 22px;
        width: calc(100% - 44px);
        height: calc(100% - 44px);
        border-radius: 50%;
        object-fit: cover;
        display: block;
    }

    .neon-glow-green {
        filter: drop-shadow(0 0 5px #39ff14) drop-shadow(0 0 10px #39ff14);
    }

    .neon-glow-blue {
        filter: drop-shadow(0 0 5px #4df0ff) drop-shadow(0 0 10px #4df0ff);
    }

    /* ---- Légende ---- */
    .stat-legend {
        display: flex;
        flex-direction: column;
        gap: 18px;
    }

    .legend-item {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .legend-dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        flex-shrink: 0;
    }

    .dot-green {
        background: #39ff14;
        box-shadow: 0 0 8px #39ff14;
    }

    .dot-blue {
        background: #4df0ff;
        box-shadow: 0 0 8px #4df0ff;
    }

    .legend-item strong {
        font-family: "Roboto Slab", serif;
        font-size: 1.6rem;
        display: block;
    }

    .text-green {
        color: #39ff14;
        text-shadow: 0 0 8px rgba(57, 255, 20, 0.5);
    }

    .text-blue {
        color: #4df0ff;
        text-shadow: 0 0 8px rgba(77, 240, 255, 0.5);
    }

    .legend-item p {
        font-family: "Roboto Slab", serif;
        font-size: 0.9rem;
        color: hsl(82, 39%, 30%);
        margin: 0;
    }

    @media (max-width: 768px) {
        .water-stats-section {
            flex-direction: column;
            gap: 30px;
        }

        .water-ring-visual {
            flex-direction: column;
        }
    }
    .stats-visual {
        position: static;
        flex-shrink: 0;
        z-index: 2;
        display: flex;
        align-items: flex-start;
        justify-content: flex-end;
        gap: 45px;

        margin-left: auto; /* pousse tout le bloc visuel à droite */
    }

    .stat-columns {
        order: 1; /* colonnes de chiffres avant l'anneau */
    }

    .stat-ring {
        order: 2; /* anneau tout à droite */
        position: relative;
        width: 190px;
        height: 190px;
        animation: ringFloat 4s ease-in-out infinite;
    }

    @keyframes ringFloat {
        0%, 100% {
            transform: translateY(0);
        }
        50% {
            transform: translateY(-10px);
        }
    }

    .stat-ring-svg {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        animation: ringSpin 12s linear infinite;
    }

    @keyframes ringSpin {
        from {
            transform: rotate(0deg);
        }
        to {
            transform: rotate(360deg);
        }
    }

    .ring-fill {
        transition: stroke-dashoffset 1.4s cubic-bezier(0.65, 0, 0.35, 1);
    }

    .ring-green {
        filter: drop-shadow(0 0 6px #39ff14);
        animation: pulseGreen 2.4s ease-in-out infinite;
    }

    .ring-blue {
        filter: drop-shadow(0 0 6px #4df0ff);
        animation: pulseBlue 2.4s ease-in-out infinite;
        animation-delay: 0.4s;
    }

    @keyframes pulseGreen {
        0%, 100% {
            filter: drop-shadow(0 0 6px #39ff14);
        }
        50% {
            filter: drop-shadow(0 0 14px #39ff14);
        }
    }

    @keyframes pulseBlue {
        0%, 100% {
            filter: drop-shadow(0 0 6px #4df0ff);
        }
        50% {
            filter: drop-shadow(0 0 14px #4df0ff);
        }
    }

    .stats-visual {
        position: relative;
        z-index: 2;
        display: flex;
        flex-direction: column;
        align-items: flex-start; /* tout aligné à gauche du bloc */
        gap: 30px;
    }

    .stat-ring {
        position: relative;
        width: 260px; /* était 190px */
        height: 260px;
        align-self: flex-start;
    }

    .stat-ring-svg {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
    }

    .ring-green {
        filter: drop-shadow(0 0 6px #39ff14);
    }

    .ring-blue {
        filter: drop-shadow(0 0 6px #4df0ff);
    }

    .stat-ring-img {
        position: absolute;
        top: 28px;
        left: 28px;
        width: calc(100% - 56px);
        height: calc(100% - 56px);
        border-radius: 50%;
        object-fit: cover;
        z-index: 3;
    }

    .stat-columns {
        display: flex;
        gap: 50px; /* côte à côte au lieu d'empilés */
    }

    .stat-label {
        display: flex;
        align-items: center;
        gap: 8px;
        font-family: "Roboto Slab", serif;
        font-size: 0.95rem;
        color: #cfd9d5;
        margin-bottom: 6px;
    }

    .stat-number {
        font-family: "Roboto Slab", serif;
        font-weight: 800;
        font-size: 4.2rem; /* était 2.8rem */
        line-height: 1;
    }

    .stat-number sup {
        font-size: 1.6rem;
        margin-left: 3px;
    }

    .stats-card {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 40px;
    }

    .stats-left {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .stats-bottom-row {
        display: flex;
        align-items: flex-start;
        gap: 30px;
    }

    .stats-text-box {
        max-width: 260px;
    }

    .stats-title {
        font-family: "Anton", "Arial Narrow", sans-serif;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: 1px;
        color: #f5f2e9;
        font-size: 2.2rem;
        line-height: 1.05;
        margin: 0 0 14px 0;
    }

    .stats-text {
        order: 1;
        width: auto;
        flex: 1 1 300px;
    }

    .stats-visual {
        order: 2;
        position: static;
        flex-shrink: 0;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 40px;
    }

    .stat-columns {
        display: flex;
        gap: 30px;
    }

    .stats-visual {
        position: static;
        flex-shrink: 0;
        align-self: flex-start;
    }

    .stat-ring {
        position: relative;
        width: 260px;
        height: 260px;
    }

    /* Le SVG reste exactement derrière l'image */
    .stat-ring-svg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 2;
    }

    /* OURS : entièrement dans le cercle */
    .stat-ring-img {
        position: absolute;

        top: 28px;
        left: 28px;

        width: calc(100% - 56px);
        height: calc(100% - 56px);

        border-radius: 50%;
        object-fit: cover;

        z-index: 3;
    }

    /* Statistiques sous le cercle */
    .stat-columns {
        display: flex;
        gap: 50px;
        justify-content: center;
    }

    /* =========================================================
       THERMAL WATER - GLASSMORPHISM
       ========================================================= */
    .thermal-spots {
        width: min(1200px, 92%);
        margin: 100px auto;
        position: relative;
    }


    /* ================= TITLE ================= */
    .thermal-section-title {
        text-align: center;
        margin-bottom: 50px;
        animation: thermalTitleAppear 1s ease both;
    }

    .thermal-section-title span {
        display: inline-block;
        font-size: 11px;
        letter-spacing: 5px;
        color: #4df0ff;
        margin-bottom: 12px;
        text-shadow: 0 0 12px rgba(77, 240, 255, .7);
    }

    .thermal-section-title h2 {
        margin: 0;
        font-size: clamp(32px, 5vw, 54px);
        font-weight: 500;
        color: white;
        letter-spacing: 1px;
    }

    .thermal-section-title p {
        max-width: 600px;
        margin: 15px auto 0;
        color: rgba(255, 255, 255, .65);
        line-height: 1.7;
    }


    /* ================= CARD ================= */
    .thermal-card {
        position: relative;
        overflow: hidden;

        margin-bottom: 45px;
        padding: 38px;

        border: 1px solid rgba(255, 255, 255, .20);
        border-radius: 30px;

        background: linear-gradient(
                135deg,
                rgba(255, 255, 255, .14),
                rgba(255, 255, 255, .04)
        );

        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);

        box-shadow: 0 25px 60px rgba(0, 0, 0, .25),
        inset 0 1px 0 rgba(255, 255, 255, .15);

        animation: thermalCardAppear 1s cubic-bezier(.2, .8, .2, 1) both;

        transition: transform .5s ease,
        box-shadow .5s ease,
        border-color .5s ease;
    }

    .thermal-card:hover {
        transform: translateY(-8px);

        border-color: rgba(77, 240, 255, .45);

        box-shadow: 0 35px 80px rgba(0, 0, 0, .35),
        0 0 35px rgba(77, 240, 255, .10),
        inset 0 1px 0 rgba(255, 255, 255, .20);
    }


    /* lumière qui traverse la carte */
    .thermal-card::before {
        content: "";
        position: absolute;

        top: -100%;
        left: -50%;

        width: 40%;
        height: 300%;

        background: linear-gradient(
                90deg,
                transparent,
                rgba(255, 255, 255, .12),
                transparent
        );

        transform: rotate(25deg);

        animation: glassLight 7s ease-in-out infinite;

        pointer-events: none;
    }


    /* halo */
    .thermal-card-glow {
        position: absolute;

        width: 300px;
        height: 300px;

        top: -180px;
        right: -100px;

        border-radius: 50%;

        background: #4df0ff;

        filter: blur(100px);
        opacity: .12;

        pointer-events: none;

        animation: glowFloat 5s ease-in-out infinite;
    }


    /* ================= HEADER ================= */
    .thermal-card-header {
        position: relative;
        z-index: 2;

        display: flex;
        justify-content: space-between;
        align-items: flex-start;

        gap: 30px;

        padding-bottom: 30px;

        border-bottom: 1px solid rgba(255, 255, 255, .12);
    }

    .thermal-number {
        display: block;

        margin-bottom: 8px;

        color: #4df0ff;

        font-size: 12px;
        letter-spacing: 4px;

        text-shadow: 0 0 12px rgba(77, 240, 255, .8);
    }

    .thermal-card h3 {
        margin: 0;

        color: white;

        font-size: clamp(36px, 5vw, 58px);
        font-weight: 400;
        letter-spacing: 2px;
    }

    .thermal-subtitle {
        margin: 7px 0 0;

        color: rgba(255, 255, 255, .55);
        font-size: 14px;
        letter-spacing: 1px;
    }


    /* ================= TEMPERATURE ================= */
    .thermal-temperature {
        text-align: right;
    }

    .thermal-temperature span {
        display: block;

        margin-bottom: 4px;

        color: rgba(255, 255, 255, .45);

        font-size: 10px;
        letter-spacing: 3px;
    }

    .thermal-temperature strong {
        color: #4df0ff;

        font-size: 32px;
        font-weight: 300;

        text-shadow: 0 0 10px rgba(77, 240, 255, .8),
        0 0 30px rgba(77, 240, 255, .3);
    }


    /* ================= CONTENT ================= */
    .thermal-card-content {
        position: relative;
        z-index: 2;

        display: grid;
        grid-template-columns: 1fr 1fr;

        gap: 45px;

        padding: 35px 0;
    }

    .thermal-description {
        color: rgba(255, 255, 255, .68);

        font-size: 15px;
        line-height: 1.8;
    }

    .thermal-description p {
        margin: 0 0 18px;
    }

    .thermal-description strong {
        color: white;

        text-shadow: 0 0 10px rgba(77, 240, 255, .3);
    }


    /* ================= MINI GLASS PANELS ================= */
    .thermal-stats {
        display: grid;
        grid-template-columns: 1fr 1fr;

        gap: 12px;
    }

    .glass-panel {
        position: relative;

        display: flex;
        align-items: center;

        gap: 14px;

        min-height: 78px;

        padding: 14px 16px;

        border-radius: 17px;

        border: 1px solid rgba(255, 255, 255, .13);

        background: linear-gradient(
                135deg,
                rgba(255, 255, 255, .11),
                rgba(255, 255, 255, .035)
        );

        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);

        transition: transform .35s ease,
        background .35s ease,
        border-color .35s ease;
    }

    .glass-panel:hover {
        transform: translateY(-5px) scale(1.02);

        border-color: rgba(77, 240, 255, .4);

        background: linear-gradient(
                135deg,
                rgba(77, 240, 255, .12),
                rgba(255, 255, 255, .05)
        );

        box-shadow: 0 10px 30px rgba(0, 0, 0, .18),
        0 0 20px rgba(77, 240, 255, .08);
    }


    /* ================= ICONS ================= */
    .glass-icon {
        display: flex;
        justify-content: center;
        align-items: center;

        width: 35px;
        height: 35px;

        flex-shrink: 0;

        border-radius: 50%;

        color: #4df0ff;

        background: rgba(77, 240, 255, .08);

        border: 1px solid rgba(77, 240, 255, .25);

        box-shadow: 0 0 15px rgba(77, 240, 255, .08);

        font-size: 15px;
    }


    /* ================= TEXT ================= */
    .glass-label {
        display: block;

        margin-bottom: 5px;

        color: rgba(255, 255, 255, .4);

        font-size: 9px;
        text-transform: uppercase;
        letter-spacing: 2px;
    }

    .glass-value {
        display: block;

        color: rgba(255, 255, 255, .9);

        font-size: 13px;
        font-weight: 400;
    }


    /* ================= FOOTER TAGS ================= */
    .thermal-card-footer {
        position: relative;
        z-index: 2;

        display: flex;
        flex-wrap: wrap;

        gap: 10px;

        padding-top: 22px;

        border-top: 1px solid rgba(255, 255, 255, .10);
    }

    .thermal-tag {
        padding: 7px 13px;

        border: 1px solid rgba(77, 240, 255, .18);

        border-radius: 100px;

        color: rgba(255, 255, 255, .55);

        background: rgba(77, 240, 255, .04);

        font-size: 9px;
        letter-spacing: 1.5px;

        transition: .3s ease;
    }

    .thermal-tag:hover {
        color: #4df0ff;

        border-color: rgba(77, 240, 255, .5);

        background: rgba(77, 240, 255, .08);

        box-shadow: 0 0 15px rgba(77, 240, 255, .12);
    }


    /* =========================================================
       WATER MASCOT
       ========================================================= */
    .water-mascot {
        position: relative;

        width: 180px;

        margin: 70px auto 100px;

        text-align: center;
    }

    #droplet {
        width: 130px;

        filter: drop-shadow(0 10px 20px rgba(0, 0, 0, .25)) drop-shadow(0 0 15px rgba(77, 240, 255, .25));

        animation: dropletFloat 3s ease-in-out infinite;
    }

    #speech-bubble {
        position: absolute;

        top: -20px;
        left: 110px;

        width: 170px;

        padding: 12px 16px;

        border-radius: 18px;

        color: white;

        background: rgba(20, 45, 48, .65);

        border: 1px solid rgba(77, 240, 255, .3);

        backdrop-filter: blur(12px);

        font-size: 12px;
        line-height: 1.4;

        box-shadow: 0 10px 30px rgba(0, 0, 0, .2),
        0 0 20px rgba(77, 240, 255, .08);

        animation: bubbleFloat 3s ease-in-out infinite;
    }

    #speech-bubble::after {
        content: "";

        position: absolute;

        bottom: -8px;
        left: 25px;

        width: 16px;
        height: 16px;

        background: rgba(20, 45, 48, .65);

        border-right: 1px solid rgba(77, 240, 255, .3);
        border-bottom: 1px solid rgba(77, 240, 255, .3);

        transform: rotate(45deg);
    }


    /* =========================================================
       ANIMATIONS
       ========================================================= */
    @keyframes thermalTitleAppear {
        from {
            opacity: 0;
            transform: translateY(30px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes thermalCardAppear {
        from {
            opacity: 0;
            transform: translateY(60px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes glassLight {
        0% {
            left: -60%;
            opacity: 0;
        }

        20% {
            opacity: 1;
        }

        45% {
            left: 120%;
            opacity: 0;
        }

        100% {
            left: 120%;
            opacity: 0;
        }
    }

    @keyframes glowFloat {
        0%, 100% {
            transform: translate(0, 0);
        }

        50% {
            transform: translate(-30px, 35px);
        }
    }

    @keyframes dropletFloat {
        0%, 100% {
            transform: translateY(0) rotate(-2deg);
        }

        50% {
            transform: translateY(-15px) rotate(2deg);
        }
    }

    @keyframes bubbleFloat {
        0%, 100% {
            transform: translateY(0);
        }

        50% {
            transform: translateY(-7px);
        }
    }


    /* =========================================================
       MOBILE
       ========================================================= */
    @media (max-width: 800px) {

        .thermal-spots {
            width: 94%;
            margin: 70px auto;
        }

        .thermal-card {
            padding: 25px;
            border-radius: 24px;
        }

        .thermal-card-header {
            flex-direction: column;
        }

        .thermal-temperature {
            text-align: left;
        }

        .thermal-card-content {
            grid-template-columns: 1fr;
            gap: 30px;
        }

        .thermal-stats {
            grid-template-columns: 1fr;
        }

        .thermal-card h3 {
            font-size: 42px;
        }

        .thermal-section-title h2 {
            font-size: 34px;
        }

        #speech-bubble {
            left: 90px;
        }
    }
    /* --- LÉGENDE DE DONNÉES / CALQUES (Style Google Maps) --- */
    .leaflet-control-layers {
        background: #ffffff !important;
        border-radius: 16px !important;
        padding: 12px 16px !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2) !important;
        border: none !important;
        font-family: 'Roboto Slab', serif !important;
        min-width: 170px;
    }

    /* Espacement et alignement des éléments du calque */
    .leaflet-control-layers-overlays label {
        display: flex !important;
        align-items: center !important;
        margin-bottom: 10px !important;
        font-size: 13px;
        font-weight: 700;
        color: hsl(82, 39%, 30%);
        cursor: pointer;
    }

    .leaflet-control-layers-overlays label:last-child {
        margin-bottom: 0 !important;
    }

    /* Personnalisation des cases à cocher */
    .leaflet-control-layers-overlays input[type="checkbox"] {
        margin-right: 10px !important;
        accent-color: rgba(109, 113, 60, 0.89); /* Couleur olive de votre charte */
        cursor: pointer;
    }

    /* Style des pastilles de couleur (façon Google Maps) */
    .legend-dot {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        display: inline-block;
        margin-right: 8px;
        box-shadow: 0 0 0 2px white, 0 0 0 3px rgba(0, 0, 0, 0.1);
    }

    /* Style de la mini-icône pour les festivals */
    .legend-icon {
        width: 14px;
        height: 20px;
        object-fit: contain;
        margin-right: 8px;
        vertical-align: middle;
    }

    .legend-item {
        display: flex;
        align-items: center;
    }

    /* Espacer la case à cocher du texte */
    .leaflet-control-layers-overlays input[type="checkbox"] {
        margin-right: 10px !important;
        transform: scale(1.1);
        cursor: pointer;
    }

    /* Style de la pastille de couleur (façon Google Maps) */
    .legend-dot {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        display: inline-block;
        margin-right: 8px;
        box-shadow: 0 0 0 2px white, 0 0 0 3px rgba(0, 0, 0, 0.1);
    }

    /* Style de la mini-icône pour les festivals */
    .legend-icon {
        width: 14px;
        height: 20px;
        object-fit: contain;
        margin-right: 8px;
        vertical-align: middle;
    }

    .legend-item {
        display: flex;
        align-items: center;
    }

    /* Panneau de calques flottant style Google Maps */
    .gmaps-layers-panel {
        position: absolute;
        top: 15px;
        right: 15px;
        z-index: 1000;
        display: flex;
        gap: 8px;
        background: white;
        padding: 6px 8px;
        border-radius: 12px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
        font-family: 'Segoe UI', Tahoma, sans-serif;
    }

    /* Chaque carte de calque */
    .gmaps-layer-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        cursor: pointer;
        transition: transform 0.2s;
    }

    .gmaps-layer-card:hover {
        transform: scale(1.03);
    }

    /* La petite vignette d'aperçu carrée */
    .gmaps-thumb {
        width: 50px;
        height: 50px;
        border-radius: 8px;
        background-size: cover;
        background-position: center;
        border: 2px solid transparent;
        margin-bottom: 3px;
        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
    }

    /* Bordure bleue active quand on sélectionne le calque */
    .gmaps-layer-card.active .gmaps-thumb {
        border-color: #1a73e8;
        box-shadow: 0 0 0 1px #1a73e8;
    }

    .gmaps-layer-card span {
        font-size: 11px;
        font-weight: 600;
        color: #3c4043;
    }

    /* Fonds d'aperçu personnalisés pour les vignettes */
    .standard-thumb {
        background-color: #e8f0fe;
        background-image: url('https://a.tile.openstreetmap.org/7/66/43.png'); /* Aperçu carto de type plan */
    }

    .relief-thumb {
        background-color: #ceead6;
        background-image: url('https://b.tile.opentopomap.org/7/66/43.png'); /* Aperçu relief */
    }

    .satellite-thumb {
        background-color: #3c4043;
        background-image: url('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/7/43/66'); /* Aperçu satellite */
    }

    /* Panneau de calques flottant style Google Maps en haut à droite */
    .gmaps-layers-panel {
        position: absolute;
        top: 15px;
        right: 15px;
        z-index: 1000;
        display: flex;
        gap: 8px;
        background: white;
        padding: 8px;
        border-radius: 16px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
        font-family: 'Segoe UI', Tahoma, sans-serif;
    }

    /* Chaque carte de calque */
    .gmaps-layer-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        cursor: pointer;
        transition: transform 0.2s;
    }

    .gmaps-layer-card:hover {
        transform: scale(1.05);
    }

    /* La petite vignette d'aperçu */
    .gmaps-thumb {
        width: 55px;
        height: 55px;
        border-radius: 12px;
        background-size: cover;
        background-position: center;
        border: 2px solid transparent;
        margin-bottom: 4px;
    }

    /* Bordure bleue active quand on sélectionne le calque */
    .gmaps-layer-card.active .gmaps-thumb {
        border-color: #1a73e8;
        box-shadow: 0 0 0 1px #1a73e8;
    }

    .gmaps-layer-card span {
        font-size: 11px;
        font-weight: 600;
        color: #3c4043;
    }

    /* Aperçus visuels des fonds de carte */
    .standard-thumb {
        background-color: #e8f0fe;
        background-image: url('https://a.tile.openstreetmap.org/7/66/43.png');
    }

    .relief-thumb {
        background-color: #ceead6;
        background-image: url('https://b.tile.opentopomap.org/7/66/43.png');
    }

    .satellite-thumb {
        background-color: #3c4043;
        background-image: url('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/7/43/66');
    }

    /* =========================================
       1. VIGNETTES DE FONDS DE CARTE (Haut droite)
       ========================================= */
    .gmaps-layers-panel {
        position: absolute;
        top: 15px;
        right: 15px;
        z-index: 1000;
        display: flex;
        gap: 8px;
        background: white;
        padding: 6px;
        border-radius: 12px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
        font-family: 'Roboto Slab', serif;
    }

    .gmaps-layer-card {
        cursor: pointer;
        text-align: center;
        font-size: 11px;
        font-weight: 600;
        color: #333;
    }

    .gmaps-thumb {
        width: 50px;
        height: 50px;
        border-radius: 8px;
        background-size: cover;
        background-position: center;
        border: 2px solid transparent;
        margin-bottom: 4px;
        transition: border-color 0.2s;
    }

    .gmaps-layer-card.active .gmaps-thumb {
        border-color: hsl(82, 39%, 30%); /* Couleur active de votre charte */
    }

    /* =========================================
       2. PANNEAU DE CALQUES DE DONNÉES LEAFLET
       ========================================= */
    /* Décale le panneau natif Leaflet pour qu'il se place juste sous vos vignettes */
    .leaflet-top.leaflet-right {
        top: 95px !important;
        right: 15px !important;
    }

    .leaflet-control-layers {
        background: #ffffff !important;
        border-radius: 16px !important;
        padding: 12px 16px !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2) !important;
        border: none !important;
        font-family: 'Roboto Slab', serif !important;
        min-width: 175px;
    }

    .leaflet-control-layers-separator {
        border-top: 1px solid #eee;
        margin: 8px 0;
    }

    /* Alignement et typographie des calques de données */
    .leaflet-control-layers-overlays label {
        display: flex !important;
        align-items: center !important;
        margin-bottom: 8px !important;
        font-size: 13px;
        font-weight: 700;
        color: hsl(82, 39%, 30%);
        cursor: pointer;
    }

    .leaflet-control-layers-overlays label:last-child {
        margin-bottom: 0 !important;
    }

    /* Personnalisation de la case à cocher */
    .leaflet-control-layers-overlays input[type="checkbox"] {
        margin-right: 10px !important;
        accent-color: hsl(82, 39%, 30%);
        cursor: pointer;
        width: 15px;
        height: 15px;
    }

    /* --- LÉGENDE PERSONNALISÉE EN BAS À DROITE --- */
    /* --- LÉGENDE PERSONNALISÉE EN BAS À DROITE --- */
    .map-legend-panel {
        position: absolute;
        bottom: 25px;
        right: 20px;
        z-index: 1000;
        background: #ffffff;
        padding: 12px 16px;
        border-radius: 14px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
        font-family: 'Roboto Slab', serif;
        max-width: 245px;
    }

    .map-legend-panel h4 {
        margin: 0 0 10px 0;
        font-size: 14px;
        color: hsl(82, 39%, 30%);
        text-align: center;
        border-bottom: 1px solid #eee;
        padding-bottom: 6px;
    }

    .legend-item {
        display: flex;
        align-items: center;
        margin-bottom: 8px;
        font-size: 12px;
        font-weight: 600;
        color: #333;
    }

    .legend-item:last-child {
        margin-bottom: 0;
    }

    .legend-img {
        width: 32px;
        height: 32px;
        object-fit: cover;
        border-radius: 6px;
        margin-right: 10px;
        border: 1px solid #ddd;
        flex-shrink: 0;
    }

    /* --- LÉGENDE INTERACTIVE --- */
    .map-legend-panel {
        position: absolute;
        bottom: 25px;
        right: 20px;
        z-index: 1000;
        background: #ffffff;
        padding: 14px 25px;
        border-radius: 14px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
        font-family: 'Roboto Slab', serif;
        min-width: 190px;
    }

    .map-legend-panel h4 {
        margin: 0 0 10px 0;
        font-size: 14px;
        color: hsl(82, 39%, 30%);
        text-align: center;
        border-bottom: 1px solid #eee;
        padding-bottom: 6px;
    }

    .legend-item {
        display: flex;
        align-items: center;
        margin-bottom: 8px;
        font-size: 13px;
        font-weight: 600;
        color: #333;
        padding: 6px 8px;
        border-radius: 6px;
        cursor: pointer;
        transition: all 0.2s ease;
        border: 2px solid transparent; /* Bordure transparente par défaut */
    }

    .legend-item:last-child {
        margin-bottom: 0;
    }

    /* EFFET HOVER : Bordure verte et fond léger */
    .legend-item:hover {
        border-color: #27ae60; /* Bordure verte au survol */
        background-color: #f0fdf4; /* Fond vert très pâle optionnel */
    }

    /* Pastilles de couleur */
    .legend-dot {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        margin-right: 10px;
        flex-shrink: 0;
        box-shadow: 0 0 0 2px white, 0 0 0 3px rgba(0, 0, 0, 0.1);
    }

    .thermal-dot {
        background-color: #3498db;
    }

    .natural-dot {
        background-color: #27ae60;
    }

    .festival-dot {
        background-color: #C9A227;
    }

    /* =========================================
       BURGER MENU (visible uniquement sur mobile)
       ========================================= */
    .burger {
        display: none;
        flex-direction: column;
        justify-content: space-between;
        width: 30px;
        height: 22px;
        cursor: pointer;
        z-index: 500;
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
    }

    .burger span {
        display: block;
        width: 100%;
        height: 3px;
        background: #f5f2e9;
        border-radius: 3px;
        transition: 0.3s ease;
    }

    /* Animation du burger en croix (optionnel) */
    .burger.active span:nth-child(1) {
        transform: rotate(45deg) translate(6px, 6px);
    }

    .burger.active span:nth-child(2) {
        opacity: 0;
    }

    .burger.active span:nth-child(3) {
        transform: rotate(-45deg) translate(6px, -6px);
    }

    /* =========================================
       MOBILE (max-width: 768px)
       ========================================= */
    @media (max-width: 768px) {
        /* --- AFFICHER LE BURGER --- */
        .burger {
            display: flex !important;
        }

        /* --- NAVBAR --- */
        .Homenavbar {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 55px !important;
            padding: 0 50px !important;
            margin: 10px auto;
            width: calc(100% - 20px);
            border-radius: 18px;
            background: rgba(109, 113, 60, 0.89);
        }

        /* --- SÉLECTEUR DE LANGUE (BLOQUÉ À GAUCHE) --- */
        .lang-selector {
            position: absolute !important;
            left: 12px !important;
            top: 50% !important;
            transform: translateY(-50%) !important;
            z-index: 600;
            padding: 4px 6px;
            border-radius: 8px;
        }

        .lang-selector img.languages_flag {
            width: 20px !important;
            height: auto !important;
        }

        .lang-selector .arrow {
            font-size: 9px !important;
            color: white;
        }

        /* --- MENU PRINCIPAL (CACHÉ PAR DÉFAUT) --- */
        .Homenavbar-title {
            position: fixed !important;
            top: 72px !important;
            left: 50% !important;
            transform: translateX(-50%) !important;
            width: 92% !important;
            max-width: 380px;
            padding: 15px 12px !important;
            background: rgba(109, 113, 60, 0.97) !important;
            border-radius: 18px !important;
            flex-direction: column !important;
            align-items: center !important;
            gap: 4px !important;
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transition: opacity 0.3s ease, visibility 0.3s ease;
            z-index: 400;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
            white-space: normal !important;
        }

        /* MENU OUVERT */
        .Homenavbar-title.open {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
        }

        /* --- LIENS DANS LE MENU --- */
        .Homenavbar-title .nav-item,
        .Homenavbar-title .nav-main-item {
            width: 100% !important;
            text-align: center;
            padding: 4px 0 !important;
        }

        .Homenavbar-title a {
            font-size: 0.95rem !important;
            color: #f5f2e9 !important;
            text-decoration: none;
            display: block;
            padding: 6px 0;
        }

        /* --- CACHER LES SÉPARATEURS "|" --- */
        .separator {
            display: none !important;
        }

        /* --- SOUS-MENUS (DÉROULANTS) --- */
        .nav-main-item .nav-sub-menu {
            position: static !important;
            display: none !important;
            width: 100% !important;
            min-width: 0 !important;
            padding: 5px 0 !important;
            margin: 5px auto 0 !important;
            background: rgba(255, 255, 255, 0.08) !important;
            border-radius: 10px !important;
            box-shadow: none !important;
            transform: none !important;
            opacity: 1 !important;
            visibility: visible !important;
            pointer-events: auto !important;
        }

        .nav-main-item .nav-sub-menu.open {
            display: block !important;
        }

        .nav-main-item .nav-sub-item {
            font-size: 0.8rem !important;
            padding: 7px 15px !important;
            color: #f5f2e9 !important;
            text-align: center !important;
            border: none !important;
        }

        .nav-main-item .nav-sub-item::before {
            display: none !important;
        }

        /* --- DROPDOWN LANGUE --- */
        .lang-dropdown {
            position: absolute !important;
            top: 100% !important;
            left: 0 !important;
            z-index: 9999 !important;
            background: white !important;
            border-radius: 10px !important;
            padding: 5px !important;
            min-width: 140px !important;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2) !important;
        }

        .lang-dropdown li {
            font-size: 13px !important;
            padding: 6px 12px !important;
        }

        .flag-icon {
            width: 18px !important;
            height: 12px !important;
        }

        /* --- IMAGE HOME --- */
        #glass_box_shadow {
            margin-top: 20px !important;
            width: 94% !important;
        }

        #musala {
            height: 250px !important;
        }

        .glass-text {
            font-size: 12px !important;
            padding: 8px 14px !important;
            right: 15px !important;
            bottom: 15px !important;
            max-width: 130px !important;
        }
    }

    /* =========================================
       TRÈS PETITS ÉCRANS (max-width: 500px)
       ========================================= */
    @media (max-width: 500px) {
        .lang-selector {
            left: 8px !important;
        }

        .lang-selector img.languages_flag {
            width: 16px !important;
        }

        .Homenavbar-title {
            top: 65px !important;
            width: 95% !important;
            padding: 12px 8px !important;
        }

        .Homenavbar-title a {
            font-size: 0.8rem !important;
        }

        #musala {
            height: 180px !important;
        }

        .glass-text {
            font-size: 10px !important;
            padding: 6px 10px !important;
            max-width: 100px !important;
        }
    }
    #me {
        display: block;

        width: 420px;
        height: 330px;
        object-fit: cover;

        border-radius: 45px;
        border: 4px solid var(--olive);

        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.20);

        margin-left: auto;
        margin-right: 7%;
        margin-top: -45px;

        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    #me:hover {
        transform: scale(1.02);
        box-shadow: 0 16px 35px rgba(0, 0, 0, 0.25);
    }

    .galeries_imagees {
        display: flex;
        justify-content: center;
        align-items: center;

        gap: 0;

        width: 90%;
        max-width: 1100px;

        margin: 60px auto 100px;
    }

    /* Cadre photo */
    .photo-hover {
        position: relative;

        background: white;
        padding: 10px;

        border: 1px solid #ddd;

        box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);

        overflow: hidden;

        transition: transform 0.35s ease,
        box-shadow 0.35s ease;
    }

    /* PHOTO 1 */
    .photo1 {
        width: 230px;
        height: 300px;

        transform: rotate(-8deg);

        margin-right: -15px;
        z-index: 1;
    }

    /* PHOTO 2 */
    .photo2 {
        width: 230px;
        height: 300px;

        transform: rotate(1deg);

        margin-top: -20px;
        z-index: 2;
    }

    /* PHOTO 3 */
    .photo3 {
        width: 230px;
        height: 300px;

        transform: rotate(8deg);

        margin-left: 5px;
        z-index: 3;
    }

    /* Images */
    .photo-hover img {
        display: block;

        width: 100%;
        height: 100%;

        object-fit: cover;
    }

    /* Texte au survol */
    .photo-text {
        position: absolute;

        top: 10px;
        left: 10px;
        right: 10px;
        bottom: 10px;

        display: flex;
        justify-content: center;
        align-items: center;

        padding: 25px;

        box-sizing: border-box;

        background: rgba(0, 0, 0, 0.58);

        color: white;

        font-size: 20px;
        font-weight: bold;

        line-height: 1.4;
        text-align: center;

        opacity: 0;

        transition: opacity 0.3s ease;
    }

    .photo-hover:hover .photo-text {
        opacity: 1;
    }

    .photo-hover:hover {
        transform: rotate(0deg) scale(1.05);

        box-shadow: 0 18px 35px rgba(0, 0, 0, 0.30);

        z-index: 10;
    }

    /* ---------- General spacing / arrangement ---------- */
    /* ---------- General spacing / arrangement ---------- */
    main {
        max-width: 1100px;
        margin: 0 auto;
        padding: 0 1.5rem 3rem;
    }

    /* ---------- Hero / title splash zone ---------- */
    .hero-splash {
        position: relative;
        overflow: hidden;
        text-align: center;
        padding: 3rem 0 2rem;
        margin-bottom: 1.5rem;
        isolation: isolate;
    }

    .hero-splash h1 {
        position: relative;
        z-index: 1;
        margin: 0;
    }

    .hero-splash h1 .letter {
        display: inline-block;
        opacity: 0;
        transform: translateY(28px);
        animation: letterRise .6s cubic-bezier(.2, .8, .2, 1) forwards;
    }

    .hero-splash h1 .letter.space {
        width: 0.35em;
    }

    @keyframes letterRise {
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* the "splash" curtain: a wave-edged panel that covers the title,
       then recedes upward like water pulling back, echoing the
       "Thermal Water" theme instead of a generic wipe */
    .wave-curtain {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        /* taller than the box on purpose: the wavy bottom edge sits
           below the visible area and gets clipped by .hero-splash's
           overflow:hidden, so only a clean wave-line shows, while the
           solid part above fully covers the title from the very start */
        height: 160%;
        z-index: 2;
        background: linear-gradient(180deg, #a9c2ae 0%, #7d9a83 55%, #5f7d68 100%);
        clip-path: polygon(0 0, 100% 0, 100% 82%, 85% 88%, 70% 80%, 55% 88%, 40% 80%, 25% 88%, 10% 80%, 0 86%);
        animation: waveRecede .95s cubic-bezier(.65, 0, .35, 1) forwards;
        animation-delay: .1s;
        pointer-events: none;
    }

    @keyframes waveRecede {
        0% {
            transform: translateY(0);
        }
        100% {
            transform: translateY(-100%);
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .hero-splash h1 .letter {
            opacity: 1;
            transform: none;
            animation: none;
        }

        .wave-curtain {
            display: none;
        }
    }

    /* ---------- Intro block + portrait ---------- */
    .intro-row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 2rem;
        margin: 0 0 3rem;
    }

    .intro_bg {
        flex: 1 1 420px;
        margin: 0;
    }

    .intro_bg p {
        margin: 0 0 1rem;
    }

    .intro_bg p:last-child {
        margin-bottom: 0;
    }

    #me {
        flex: 0 1 340px;
        width: 100%;
        max-width: 340px;
        display: block;
    }

    /* ---------- Photo gallery ---------- */
    .galeries_imagees {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 2.5rem;
        margin-top: 1rem;
    }

    .photo-hover {
        margin: 0;
    }

    /* ---------- Contact form ---------- */
    .contact-section {
        margin: 4rem 0 2rem;
        padding: 2rem 2.25rem 2.25rem;
        background-color: rgba(109, 113, 60, 0.89);
        border-radius: 20px;
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
    }

    .contact-section h2 {
        color: #f5f2e9;
        margin-top: 0;
    }

    .contact-section > p {
        color: #f5f2e9;
        font-family: "Lora", serif;
        margin: 0 0 1.5rem;
        text-align: center;
    }

    .contact-form {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        max-width: 640px;
        margin: 0 auto;
    }

    .contact-form-row {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
    }

    .contact-form-row .contact-field {
        flex: 1 1 220px;
    }

    .contact-field {
        display: flex;
        flex-direction: column;
        gap: 0.4rem;
    }

    .contact-field label {
        color: #f5f2e9;
        font-family: "Roboto Slab", serif;
        font-size: 0.9rem;
        font-weight: 700;
        letter-spacing: 0.5px;
    }

    .contact-field input,
    .contact-field textarea {
        font-family: "Lora", serif;
        font-size: 1rem;
        padding: 0.7rem 0.9rem;
        border: 2px solid transparent;
        border-radius: 12px;
        background: #f5f2e9;
        color: #4a4a30;
        resize: vertical;
    }

    .contact-field input:focus,
    .contact-field textarea:focus {
        outline: none;
        border-color: #C9A227;
    }

    .contact-submit {
        align-self: center;
        margin-top: 0.5rem;
        padding: 0.75rem 2.2rem;
        border: none;
        border-radius: 30px;
        background-color: var(--olive);
        color: #f5f2e9;
        font-family: "Roboto Slab", serif;
        font-weight: 700;
        letter-spacing: 1px;
        font-size: 1rem;
        cursor: pointer;
        transition: background-color 0.3s ease, transform 0.2s ease;
    }

    .contact-submit:hover {
        background-color: #D62612;
        transform: translateY(-1px);
    }

    .contact-status {
        margin: 1rem 0 0;
        text-align: center;
        color: #f5f2e9;
        font-family: "Roboto Slab", serif;
        font-size: 0.9rem;
    }

    .contact-status[hidden] {
        display: none;
    }

    /* ---------- Gnome-triggered video reveal, tucked in the intro card ---------- */
    .intro_bg {
        position: relative;
        padding-bottom: 3.5rem;
    }

    .gnome-believe {
        margin: 0;
    }

    .gnome-trigger {
        position: absolute;
        right: 18px;
        bottom: 14px;
        width: 74px;
        height: 74px;
        object-fit: cover;
        border-radius: 50%;
        border: 3px solid var(--olive);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
        cursor: pointer;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .gnome-trigger:hover {
        transform: scale(1.08) rotate(-4deg);
        box-shadow: 0 12px 26px rgba(0, 0, 0, 0.35);
    }

    .corner-video {
        margin: 2rem auto 0;
        max-width: 480px;
        border: 4px solid var(--olive);
        border-radius: 20px;
        overflow: hidden;
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
        background: #000;

        display: none;
        opacity: 0;
        transform: translateY(-10px);
        transition: opacity 0.4s ease, transform 0.4s ease;
    }

    .corner-video.open {
        display: block;
    }

    .corner-video.show {
        opacity: 1;
        transform: translateY(0);
    }

    .corner-video video {
        display: block;
        width: 100%;
        height: auto;
    }

    .corner-video-caption {
        margin: 0;
        padding: 8px 10px;
        background: var(--olive);
        color: #f5f2e9;
        font-family: "Roboto Slab", serif;
        font-size: 0.7rem;
        line-height: 1.3;
        text-align: center;
    }

    .stats-card {
        display: flex;
        flex-direction: column;
        gap: 24px;
    }

    .stats-top {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    }

    .stat-ring {
        margin-top: -10px; /* remonte encore un peu le rond avec l'ours */
    }

    .stats-bottom-row {
        display: flex;
        align-items: flex-start;
        gap: 30px;
        flex-wrap: wrap;
    }

    .stats-text-box {
        max-width: 280px;
    }

    .stat-columns {
        display: flex;
        gap: 40px;
    }

    .intro_bg a {
        color: #4df0ff;
        text-decoration: none;

        padding-bottom: 1px;
        font-style: italic;
        transition: color 0.3s ease, border-color 0.3s ease, text-shadow 0.3s ease;
    }

    .intro_bg a:hover {
        color: #591e1e;

        text-shadow: 0 0 8px rgba(57, 255, 20, 0.6);
    }

    /* Palette spécifique à la section Eaux Thermales */
    .intro-bg-thermal {
        background-color: rgba(109, 113, 60, 0.89);
        margin-bottom: 35px;

    }

    .stat-columns {
        margin-top: 30px;
        margin-bottom: 30px;
    }

    .thermal-card-image {
        width: 100%;
        max-width: 280px;
        height: 220px;
        object-fit: cover;
        border: 4px solid rgba(109, 113, 60, 0.89);
        border-radius: 16px;
        display: block;
        margin: 1rem auto;
    }

    .thermal-benefits {
        background: rgba(109, 113, 60, 0.5);
        border-radius: 12px;
        padding: 1rem 1.25rem;
        margin-top: 1.5rem;
    }

    .thermal-benefits-label {
        display: block;
        font-size: 12px;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        color: #8fe0e8;
        font-weight: 600;
        margin-bottom: 6px;
    }

    .thermal-benefits p {
        margin: 0;
        line-height: 1.6;
        font-size: 14px;
        color: #f2ede0;
    }

    .thermal-benefits strong {
        color: #8fe0e8;
    }

    .thermal-map-icon {
        position: absolute;
        top: 90px;
        right: 48px;
        width: 240px;
        opacity: 0.9;
        z-index: 2;
    }

    /* =========================================
       BOUTON DÉCOUVRIR SUR LE HERO
       ========================================= */
    /* Alignement du bouton juste en dessous du titre */
    .hero-cta {
        position: absolute;
        top: 58%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 5;

        padding: 12px 32px;
        background-color: rgba(109, 113, 60, 0.92);
        color: #f5f2e9;
        font-family: "Roboto Slab", serif;
        font-weight: 700;
        font-size: 1rem;
        letter-spacing: 1.5px;
        text-decoration: none;
        border-radius: 30px;
        border: 2px solid rgba(255, 255, 255, 0.4);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
        transition: background-color 0.3s ease, transform 0.2s ease;
    }

    .hero-cta:hover {
        background-color: #D62612;
        box-shadow: 0 6px 16px rgba(214, 38, 18, 0.35);
    }

    /* Ajustements pour mobile */
    @media (max-width: 768px) {
        .hero-title-overlay {
            top: 38%;
            font-size: 1.6rem;
            white-space: normal;
            width: 90%;
        }

        .hero-cta {
            top: 60%;
            padding: 10px 24px;
            font-size: 0.85rem;
        }
    }

    .hero-title-overlay {
        position: absolute;
        top: 42%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 5;

        font-family: "Anton", "Arial Narrow", sans-serif;
        font-weight: 900;
        font-size: 2.5rem;
        text-transform: uppercase;
        letter-spacing: 2px;
        color: #f5f2e9;
        line-height: 1.05;
        text-shadow: 0 4px 25px rgba(0, 0, 0, 0.65);
        white-space: nowrap;
        text-align: center;
    }
    /* ===== LOCALISATION VINTAGE ===== */
    .thermal-location {
        display: flex;
        align-items: center;
        gap: 8px;
        font-family: "Roboto Slab", serif;
        font-size: 0.85rem;
        color: rgba(245, 242, 233, 0.7);
        margin: 5px 0 0;
        position: relative;
        padding-right: 25px; /* Espace pour la flèche */
    }

    .location-icon {
        width: 16px;
        height: 16px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23C9A227'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-size: contain;
        margin-bottom: -2px;
    }

    .location-name {
        font-weight: 700;
        color: #f5f2e9; /* Crème */
        letter-spacing: 0.5px;
    }

    .location-coords {
        color: rgba(245, 242, 233, 0.6);
        font-style: italic;
        font-size: 0.8rem;
    }

    .location-link {
        position: absolute;
        right: 0;
        color: #C9A227; /* Jaune Zlatno */
        font-size: 1.2rem;
        text-decoration: none;
        transition: transform 0.2s ease, color 0.2s ease;
        line-height: 1;
    }

    .location-link:hover {
        color: #b9f391; /* Rouge traditionnel */
        transform: translateX(5px);
    }

    /* Effet vintage pour le survol de la carte */
    .thermal-card:hover .thermal-location .location-link {
        color: #ffffff;
        transform: translateX(5px);
    }

    .btn-thermal {
        display: inline-block;
        background: var(--olive);
        color: white;
        font-family: 'Roboto Slab', serif;
        font-weight: 700;
        font-size: 1.1rem;
        padding: 0.9rem 2.5rem;
        border: none;
        border-radius: 60px;
        cursor: pointer;
        text-decoration: none;
        text-align: center;
        transition: all 0.3s ease;
        box-shadow: 0 8px 25px rgba(34, 197, 94, 0.35);
        letter-spacing: 0.5px;
        margin: 2rem auto;
        display: block;
        width: fit-content;
    }

    .btn-thermal:hover {
        transform: translateY(-3px) scale(1.02);
        box-shadow: 0 12px 35px rgba(34, 197, 94, 0.5);
        background: linear-gradient(135deg, #2dd4bf, #16a34a);
    }

    .btn-thermal:active {
        transform: translateY(0) scale(0.98);
        box-shadow: 0 4px 15px rgba(34, 197, 94, 0.3);
    }

    .btn-thermal i {
        margin-right: 10px;
        font-size: 1.2rem;
    }

    /* ===== CONTENEUR DU BOUTON ===== */
    .btn-wrapper {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 1rem 0 2rem;
        background: transparent;
    }

    /* ===== RESPONSIVE ===== */
    @media (max-width: 600px) {
        .btn-thermal {
            font-size: 0.95rem;
            padding: 0.7rem 1.8rem;
            width: 90%;
            text-align: center;
        }
    }

    /* =========================================
       ANIMATION LETTRE PAR LETTRE DU TITRE
       ========================================= */
    #mainTitle {
        font-family: "Roboto Slab", serif;
        font-weight: 900;
        font-size: 2.5rem;
        color: var(--olive);
        text-align: center;
        margin: 40px 0 20px;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
    }

    /* Chaque lettre masquée par défaut */
    #mainTitle .letter {
        display: inline-block;
        opacity: 0;
        transform: translateY(20px) scale(0.8);
        animation: letterFadeIn 0.5s ease forwards;
    }

    /* Espace entre les mots */
    #mainTitle .letter.space {
        width: 0.3em;
    }

    /* Keyframes d'apparition des lettres */
    @keyframes letterFadeIn {
        to {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }
    /* =========================================================
       MY EXPERIENCE
    ========================================================= */
    .myexp-page {
        width: 100%;
        overflow: hidden;
    }


    /* INTRO */
    .myexp-intro {
        max-width: 850px;
        margin: auto;
        padding: 90px 30px 70px;
        text-align: center;
    }

    .myexp-small-title {
        color: #3d8fb5;
        font-size: 0.8rem;
        font-weight: bold;
        letter-spacing: 3px;
        text-transform: uppercase;
    }

    .myexp-intro h2,
    .myexp-story h2,
    .myexp-memory h2 {
        color: var(--olive);
        font-size: clamp(2.2rem, 5vw, 3.5rem);
        margin: 10px 0 35px;
    }

    .myexp-intro-text {
        text-align: left;
        font-size: 1.08rem;
        line-height: 1.9;
    }

    .myexp-intro-text p {
        margin-bottom: 22px;
    }

    .myexp-opening {
        color: var(--olive);
        font-size: 1.35rem;
        font-weight: bold;
    }

    .myexp-intro strong,
    .myexp-memory strong {
        color: #3d8fb5;
    }


    /* MAP BUTTON */
    .chiflik-map {
        display: inline-block;
        margin: 10px 0 25px;
        padding: 12px 22px;

        background: var(--olive);
        color: white;

        border-radius: 30px;

        text-decoration: none;
        font-weight: bold;

        transition: 0.3s ease;
    }

    .chiflik-map:hover {
        background: #3d8fb5;
        transform: translateY(-3px);
    }


    /* GALLERY */
    .myexp-gallery-section {
        padding: 60px 30px 90px;
    }

    .myexp-gallery-title {
        max-width: 850px;
        margin: 0 auto 40px;
        text-align: center;
    }

    .myexp-gallery-title h2 {
        color: var(--olive);
        font-size: clamp(2rem, 5vw, 3.2rem);
    }


    /*
       IMPORTANT :
       On garde complètement ta classe
       .galeries_imagees
       et tes .photo-hover
    */
    .myexp-gallery-section .galeries_imagees {
        max-width: 1200px;
        margin: auto;
    }


    /* STORY */
    .myexp-story {
        max-width: 1000px;
        margin: auto;

        padding: 80px 30px;

        display: flex;
        align-items: center;
        justify-content: space-between;

        gap: 50px;
    }

    .myexp-story-text {
        max-width: 650px;

        font-size: 1.08rem;
        line-height: 1.9;
    }

    .myexp-story-decoration {
        font-size: 5rem;
        opacity: 0.7;
    }


    /* MEMORY */
    .myexp-memory {
        padding: 90px 30px;

        background: rgba(136, 129, 81, 0.10);

        text-align: center;
    }

    .myexp-memory-text {
        max-width: 750px;
        margin: auto;

        font-size: 1.08rem;
        line-height: 1.9;
    }


    /* FINAL */
    .myexp-final {
        max-width: 700px;
        margin: auto;

        padding: 90px 30px 120px;

        text-align: center;

        color: var(--olive);

        font-size: 1.2rem;
        line-height: 1.8;
    }

    .myexp-final span {
        font-size: 2rem;
    }


    /* MOBILE */
    @media (max-width: 768px) {

        .myexp-intro {
            padding: 60px 22px;
        }

        .myexp-intro-text {
            font-size: 1rem;
            line-height: 1.8;
        }

        .myexp-gallery-section {
            padding: 40px 15px 70px;
        }

        .myexp-story {
            display: block;
            padding: 60px 22px;
        }

        .myexp-story-decoration {
            margin-top: 30px;
            text-align: center;
        }

        .myexp-memory {
            padding: 65px 22px;
        }

        .search_container {
            display: flex;
            justify-content: center;
            width: 100%;
            margin: 12px auto;
            order: 2; /* pulls it below the burger/logo row if it's flex-inline with the nav */
        }

        #region-search-form {
            width: 90%;
            max-width: 920px;
            height: 49px;
            box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
        }

        #region-search {
            font-size: 15px;
        }

        #region-search-form button {
            width: 56px;
            font-size: 20px;
        }

    }
    /* ================= DROPDOWN NAVBAR ================= */
    /* Conteneur principal du menu parent */
    .nav-main-item.dropdown-trigger {
        position: relative;
        display: inline-block;
        padding-bottom: 8px; /* Espace pour éviter de perdre le survol */
        margin-bottom: -8px;
    }

    /* Style du sous-menu déroulant (masqué par défaut) */
    .nav-sub-menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        min-width: 200px;
        background-color: #f5f2e9;
        border-radius: 10px;
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
        padding: 6px 0;
        z-index: 1000;
    }

    /* PASSERELLE INVISIBLE : empêche le menu de se fermer lors du déplacement de la souris */
    .nav-sub-menu::before {
        content: "";
        position: absolute;
        top: -10px;
        left: 0;
        width: 100%;
        height: 10px;
        background: transparent;
    }

    /* Ouverture au survol (Desktop) ET via classe .open (Mobile / Clic) */
    .nav-main-item.dropdown-trigger:hover .nav-sub-menu,
    .nav-sub-menu.open {
        display: flex;
        flex-direction: column;
    }

    /* Liens à l'intérieur du sous-menu */
    .nav-sub-item {
        display: block;
        padding: 10px 16px;
        font-family: "Roboto Slab", serif;
        font-size: 13px;
        color: hsl(82, 39%, 30%);
        text-decoration: none;
        white-space: nowrap;
        transition: background-color 0.2s ease, color 0.2s ease;
    }

    /* Effet au survol des liens du sous-menu */
    .nav-sub-item:hover {
        background-color: rgba(109, 113, 60, 0.18);
        color: #3f4a32;
    }

    /* Conteneur principal */
    .lang-selector {
        position: relative;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 6px;
        user-select: none;
    }

    /* Flèche tournante */
    .lang-selector .arrow {
        font-size: 10px;
        transition: transform 0.3s ease;
    }

    .lang-selector.active .arrow {
        transform: rotate(180deg);
    }

    /* Menu des langues */
    .lang-dropdown {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        margin-top: 8px;
        background-color: #f5f2e9;
        border: 2px solid #C9A227;
        border-radius: 8px;
        list-style: none;
        padding: 6px 0;
        min-width: 140px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        z-index: 2000;
    }

    /* Affichage lorsque le menu est ouvert */
    .lang-dropdown.open {
        display: block;
    }

    /* Éléments de la liste */
    .lang-dropdown li {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 8px 12px;
        cursor: pointer;
        font-size: 14px;
        color: hsl(82, 39%, 30%);
        transition: background-color 0.2s ease;
    }

    .lang-dropdown li:hover {
        background-color: rgba(109, 113, 60, 0.18);
    }

    /* Drapeaux */
    .flag-icon, .languages_flag {
        width: 20px;
        height: 14px;
        object-fit: cover;
        border-radius: 2px;
    }

    /* Masquer la barre/select par défaut de Google Translate */
    #google_translate_element {
        display: none !important;
    }

    .goog-te-banner-frame {
        display: none !important;
    }



.hero-overlay {
    display: flex;
    flex-direction: column; /* Force l'affichage vertical : bouton au-dessus, titre en dessous */
    align-items: center;
    justify-content: center;
    gap: 15px; /* Espacement entre le bouton et le titre */
}

.hero-title-overlay {
    font-family: "Anton", "Arial Narrow", sans-serif;
    font-weight: 900;
    font-size: 2.5rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #f5f2e9;
    line-height: 1.05;
    text-shadow: 0 4px 25px rgba(0, 0, 0, 0.65);
    text-align: center;
}

.hero-cta {
    display: inline-block;
    padding: 12px 32px;
    background-color: rgba(109, 113, 60, 0.92);
    color: #f5f2e9;
    font-family: "Roboto Slab", serif;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 1.5px;
    text-decoration: none;
    border-radius: 30px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
    transition: background-color 0.3s ease, transform 0.2s ease;
}



/* 1. PREMIER BLOC EN GRAND AU CENTRE */
.intro-top-container {
    max-width: 900px;
    margin: 40px auto;
    display: flex;
    justify-content: center;
}
.intro_bg.intro-large {
    width: 100%;
    background-color: var(--bg-green-box);
    color: #ffffff;
    padding: 40px 50px;
    border-radius: 25px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    text-align: left;
}

/* Augmentation de la taille du texte de l'intro */
.intro_bg p {
    font-size: 1.15rem; /* Taille de police agrandie */
    line-height: 1.8;   /* Espacement aéré pour faciliter la lecture */
    font-weight: 500;
    margin: 0;
}
/* 2. DISPOSITION DES BLOCS DE TRESORS (IMAGE 2) */
.trasures {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    margin: 50px auto;
    max-width: 1050px;
}

/* Inversion automatique pour l'alternance gauche/droite */
.trasures.reverse {
    flex-direction: row-reverse;
}

/* Bloc texte vert olive style image 2 */
.trasures .intro_bg {
    background-color: var(--bg-green-box);
    color: #ffffff;
    padding: 35px;
    border-radius: 25px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    flex: 1;
    font-size: 1.15rem;
    line-height: 1.7;
}

/* Titres et textes importants en or */
.intro_bg h2 {
    color: var(--gold-bulgarian);
    margin-top: 0;
    font-size: 2.2rem;
    margin-bottom: 15px;
}

.intro_bg strong {
    color: var(--gold-bulgarian);
    font-size: 1.25rem;
    display: inline-block;
    margin-bottom: 10px;
}

.intro_bg p {
    margin-bottom: 0;
}

/* Image arrondie avec bordure dorée fine (style me.html) */
.zlatno_images {
    width: 380px;
    height: 320px;
    object-fit: cover;
    border-radius: 25px;
    border: 3px solid var(--gold-bulgarian);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
    transition: transform 0.3s ease;
}

.zlatno_images:hover {
    transform: scale(1.02);
}

/* Adaptation mobile */
@media (max-width: 768px) {
    .trasures,
    .trasures.reverse {
        flex-direction: column-reverse;
    }
    .zlatno_images {
        width: 100%;
        height: auto;
    }
}
#recipe-block {
    animation: recipeAppear 1s ease-out forwards;
}

@keyframes recipeAppear {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* --- BLOC FOOD (texte gauche / image droite) --- */
.food-block {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
    width: 90%;
    max-width: 1200px;
    margin: 60px auto;
}

.food-text {
    flex: 1;
}

.food-image-right img {
    width: 330px;
    height: 330px;
    object-fit: cover;
    border-radius: 20px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.25);
}


/* Cuillère cuisine */
.stamp-spoon {
    position: absolute;
    width: 90px;
    height: 90px;
    background-size: contain;
    background-repeat: no-repeat;
    top: -20px;
    right: -20px;
    transform: rotate(25deg);
    opacity: 0.8;
}

/* Animation d’apparition */
#miam-stamp.active {
    transform: translateX(-50%) scale(1);
    opacity: 1;
}


/* --- Descente du bloc banitsa --- */
#banitsa-block {
    transition: margin-top 0.8s ease;
}
/* --- BULLE FINALE RECETTES --- */
#final-recipe-message {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);

    max-width: 280px;

    background: rgba(109, 113, 60, 0.95); /* ton vert Balkan */
    color: #f5f2e9;

    padding: 22px 26px;
    border-radius: 22px; /* BULLE */
    border: 3px solid #C9A227; /* or bulgare */

    font-family: "Roboto Slab", serif;
    font-size: 1rem;
    text-align: center;

    box-shadow: 0 12px 30px rgba(0,0,0,0.35);

    opacity: 0;
    transition: all 0.6s ease;
    z-index: 99999;
}

/* Apparition */
#final-recipe-message.active {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
}
#final-recipe-message a {
    display: inline-block;
    margin-top: 10px;

    background: #C9A227; /* or bulgare */
    color: #fff !important;

    padding: 8px 14px;
    border-radius: 12px; /* effet bulle */
    font-weight: 700;
    text-decoration: none;

    transition: all 0.3s ease;
}

#final-recipe-message a:hover {
    background: #a8891f;
    transform: scale(1.08);
}

/* =========================================================
   GOLDEN AGE — INTRO
   ========================================================= */

.intro-row {
    width: min(1200px, 92%);
    margin: 55px auto 70px;

    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    align-items: center;
    gap: 45px;
}

/* Bloc texte */
.intro-row .intro_bg {
    min-height: 300px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 35px 42px;

    border-radius: 18px;

    background:
            linear-gradient(
                    135deg,
                    rgba(111, 116, 61, 0.96),
                    rgba(126, 125, 67, 0.93)
            );

    border-left: 7px solid #6e542e;

    box-shadow:
            0 12px 30px rgba(66, 48, 25, 0.22),
            inset 0 0 0 1px rgba(255,255,255,0.12);
}

.intro-row .intro_bg p {
    margin: 0 0 17px;

    color: #f7edd9;
    font-family: "Lora", serif;

    font-size: 1.05rem;
    line-height: 1.75;
}

.intro-row .intro_bg p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   PHOTO — RIGHT SIDE
   ========================================================= */

.intro-row .vintage-photo {
    width: 100%;
    max-width: 470px;
    height: 330px;

    justify-self: center;

    object-fit: cover;

    /* vrai look photo ancienne */
    filter:
            sepia(0.42)
            saturate(0.82)
            contrast(1.08)
            brightness(0.96);

    /* cadre marron vintage */
    border: 10px solid #6b4b2a;
    border-radius: 5px;

    outline: 2px solid #b99a67;
    outline-offset: -5px;

    box-shadow:
            0 10px 25px rgba(52, 36, 20, 0.35),
            0 0 0 1px #3e2a18;

    position: relative;
}





.empire-map img {
    width: 100%;
    max-width: 700px;
    border-radius: 10px;
    border: 3px solid #D4AF37;
    filter: sepia(0.35) contrast(1.02) brightness(0.97);
    box-shadow: 0 8px 20px rgba(0,0,0,0.25);
    background-color: #bfa882; /* Masque la ligne sous l'image si elle est transparente */
}

.empire-map p {
    margin: 18px auto 0;

    max-width: 800px;

    color: #66502f;

    font-family: "Lora", serif;
    font-style: italic;

    line-height: 1.6;
}

.empire-map small {
    color: #80683f;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 800px) {

    .intro-row {
        grid-template-columns: 1fr;
        gap: 28px;
        margin-top: 35px;
    }

    .intro-row .intro_bg {
        min-height: auto;
        padding: 28px 25px;
    }

    .intro-row .vintage-photo {
        width: 100%;
        max-width: 500px;
        height: 300px;
    }

    .empire-map {
        width: 90%;
        padding: 18px;
    }

    .empire-map img {
        width: 100%;
    }
}


@media (max-width: 500px) {

    .intro-row {
        width: 94%;
    }

    .intro-row .intro_bg {
        padding: 24px 20px;
    }

    .intro-row .intro_bg p {
        font-size: 0.95rem;
        line-height: 1.6;
    }

    .intro-row .vintage-photo {
        height: 240px;
        border-width: 7px;
    }

    .empire-map {
        width: 94%;
        padding: 12px;
    }

    .empire-map p {
        font-size: 0.85rem;
    }
}
/* =====================================================
   ROMAN RUINS — 2 CARDS PER ROW
   ===================================================== */

.archaeological-section {
    width: 90%;
    max-width: 1100px;
    margin: 70px auto;

    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

/* Le titre prend toute la largeur */
.archaeological-section > h2 {
    grid-column: 1 / -1;

    text-align: center;
    margin-bottom: 10px;
}


/* =====================================================
   CARDS
   ===================================================== */

.archos-card {
    width: 100%;
    min-height: 300px;

    padding: 28px;

    box-sizing: border-box;

    display: flex;
    align-items: center;
    gap: 24px;

    background-color: rgba(109, 113, 60, 0.92);

    border-radius: 20px;

    box-shadow:
            0 8px 25px rgba(0, 0, 0, 0.20);

    transition:
            transform 0.3s ease,
            box-shadow 0.3s ease;
}

.archos-card:hover {
    transform: translateY(-5px);

    box-shadow:
            0 14px 30px rgba(0, 0, 0, 0.28);
}


/* =====================================================
   IMAGE
   ===================================================== */

.archos-card > img {
    width: 190px;
    height: 160px;

    flex-shrink: 0;

    object-fit: cover;

    border-radius: 8px;

    border: 4px solid #d6ad3d;

    box-shadow:
            0 4px 12px rgba(0, 0, 0, 0.30);
}


/* =====================================================
   TEXT
   ===================================================== */

.archos-text {
    flex: 1;
}

.archos-text h3 {
    margin: 0 0 12px;

    color: #e1b936;

    font-family: "Lora", serif;

    font-size: 1.15rem;
}

.archos-text p {
    margin: 0;

    color: #f5f1e7;

    font-family: "Lora", serif;

    font-size: 0.95rem;
    line-height: 1.65;
}


/* =====================================================
   TABLET
   ===================================================== */

@media (max-width: 950px) {

    .archaeological-section {
        width: 92%;
        grid-template-columns: 1fr;
    }

    .archos-card {
        min-height: 260px;
    }

    .archos-card > img {
        width: 210px;
        height: 170px;
    }
}


/* =====================================================
   MOBILE
   ===================================================== */

@media (max-width: 600px) {

    .archaeological-section {
        width: 94%;
        gap: 22px;
    }

    .archos-card {
        flex-direction: column;

        align-items: stretch;

        padding: 20px;
    }

    .archos-card > img {
        width: 100%;
        height: 220px;
    }

    .archos-text h3 {
        text-align: center;
    }

    .archos-text p {
        font-size: 0.9rem;
        line-height: 1.6;
    }
}
/* Style appliqué aux titres de la page */
h1,
.archaeological-section h2,
.timeline-section h2,
.intro_bg.archos-card h3 {
    font-family: "Roboto Slab", serif;
    font-weight: 800;
    color: #f4e6cd;
    letter-spacing: 2px;

    /* Adaptations spécifiques pour la mise en page des titres */
    text-align: center;
    margin-top: 20px;
    margin-bottom: 25px;
}

/* Ajustement de taille par niveau de titre */
h1 {
    font-size: 2rem;
}

h2 {
    font-size: 1.7rem;
}

h3 {
    font-size: 1.4rem;
}
/* =========================================
   LÉGENDE DE LA CARTE - DESKTOP & MOBILE
   ========================================= */

#custom-map-legend.map-legend-panel {
    position: relative;
    width: 100%;
    max-width: 900px;
    margin: 30px auto 0 auto !important;
    padding: 18px 24px;

    background-color: var(--bg-green-box); /* #6b7042 */
    border-radius: 18px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;

    /* Disposition propre en Flexbox */
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 15px 25px;
}

#custom-map-legend h4 {
    display: none;
}

.legend-item {
    display: flex !important;
    align-items: center !important;
    gap: 10px;
    cursor: pointer;
    text-decoration: none !important;
    padding: 8px 14px;
    border-radius: 10px;
    border: 1px solid transparent;
    transition: all 0.25s ease;
    background: transparent;
}

/* Hover vert foncé élégant */
.legend-item:hover {
    background-color: #4a4e2e !important;
    border-color: var(--gold-bulgarian);
    transform: translateY(-2px);
}

.legend-item:hover span {
    color: #ffffff !important;
}

.legend-img {
    width: 30px;
    height: 30px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--gold-bulgarian);
    flex-shrink: 0;
}

.legend-item span {
    font-family: "Roboto Slab", serif;
    font-size: 0.95rem;
    font-weight: 700;
    color: #f5f2e9;
    white-space: nowrap;
}

.empire-map {
    max-width: 900px;
    margin: 50px auto;
    padding: 0 20px;
    text-align: center;
    position: relative;
    z-index: 2; /* Passe au-dessus des lignes de fond */
}
/* Suppression du cadre fin marron autour de la section image */
.empire-map,
.empire-map * {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Réapplication uniquement de la bordure dorée et de l'ombre de l'image */
.empire-map img {
    border: 3px solid #D4AF37 !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25) !important;
}
.nature-journey {
    width: 90%;
    max-width: 1100px;
    margin: 80px auto;
    position: relative;
}

.nature-journey > h2 {
    text-align: center;
    font-family: Georgia, serif;
    font-size: 40px;
    font-weight: normal;
    margin-bottom: 80px;
}

.nature-step {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 2;
}

/* BLACK SEA */

.nature-black-sea {
    padding-left: 5%;
}

.nature-black-sea .intro_bg {
    width: 38%;
}

.nature-black-sea .nature-image {
    width: 38%;
}


/* MOUNTAINS */

.nature-mountains {
    margin-top: 100px;
    padding-right: 5%;
}

.nature-mountains .nature-image {
    width: 38%;
}

.nature-mountains .intro_bg {
    width: 38%;
}


/* IMAGES */

.nature-image {
    height: 230px;
    position: relative;
    overflow: hidden;
    border-radius: 25px;
}

.nature-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.nature-image span {
    position: absolute;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);

    color: white;
    font-family: Georgia, serif;
    font-size: 26px;
    text-shadow: 0 2px 5px black;
}


/* DOTTED PATH */

.nature-path {
    position: absolute;

    width: 75%;
    height: 500px;

    top: 170px;
    left: 12.5%;

    z-index: 1;

    pointer-events: none;
}
.nature-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.gallery-card {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    transition: transform 0.3s ease;
}

.gallery-card:hover {
    transform: translateY(-5px);
}

.gallery-card img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
}

.gallery-card span {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 8px 12px;
    font-size: 0.9rem;
    text-align: center;
}
@keyframes letterRise {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-splash p.subtitle {
    position: relative;
    z-index: 1;
    max-width: 600px;
    margin: 1rem auto 0;
    font-family: "Lora", serif;
    font-size: 1.15rem;
    line-height: 1.6;
    color: var(--olive);
    opacity: 0;
    animation: fadeIn 0.8s ease-out 0.4s forwards;
}

@keyframes fadeIn {
    to {
        opacity: 1;
    }
}

/* ---------- Section Cards Grid ---------- */
.treasures-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.treasure-card {
    position: relative;
    background-color: var(--bg-green-box);
    border-radius: 20px;
    padding: 2rem;
    color: #f5f2e9;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.treasure-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 35px rgba(0, 0, 0, 0.25);
}

.treasure-card h2 {
    color: #f5f2e9;
    text-align: left;
    margin: 0 0 1rem 0;
    font-size: 1.5rem;
}

.treasure-card p {
    font-family: "Lora", serif;
    line-height: 1.7;
    font-size: 0.95rem;
    margin-bottom: 1.5rem;
    color: #f4e6cd;
}

.treasure-card .card-btn {
    align-self: flex-start;
    display: inline-block;
    padding: 10px 20px;
    background-color: var(--gold-bulgarian);
    color: hsl(82, 39%, 20%);
    font-family: "Roboto Slab", serif;
    font-weight: 700;
    font-size: 0.9rem;
    border-radius: 25px;
    text-decoration: none;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.treasure-card .card-btn:hover {
    background-color: #D62612;
    color: #ffffff;
}

/* ---------- Responsive Overrides ---------- */
@media (max-width: 768px) {
    main {
        padding: 0 1rem 2rem;
    }

    #me {
        width: 90%;
        height: auto;
        aspect-ratio: 4 / 3;
        margin: 20px auto 0 auto;
    }

    .galeries_imagees {
        flex-direction: column;
        gap: 20px;
    }

    .photo1, .photo2, .photo3 {
        width: 280px;
        height: 360px;
        margin: 0;
        transform: none;
    }

    .treasures-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}
/* Cache l'iframe Google Translate supérieure et empêche le décalage du site */
iframe.skiptranslate,
.goog-te-banner-frame,
.goog-te-banner-frame.skiptranslate {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    width: 0 !important;
}

body {
    top: 0px !important;
    position: static !important;
}

/* Cache les popups et surbrillances */
.goog-tooltip,
.goog-tooltip:hover,
.goog-text-highlight {
    display: none !important;
    box-shadow: none !important;
    background-color: transparent !important;
}

#google_translate_element {
    display: none !important;
}
/* ==========================================
   FIX RESPONSIVE MOBILE (ÉCRANS < 768px)
   ========================================== */
/* ==========================================
   AJUSTEMENTS MOBILE (PLEINE LARGEUR ET CENTRAGE)
   ========================================== */
@media screen and (max-width: 768px) {

    /* 1. Navbar sur toute la longueur */
    .Homenavbar {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        left: 0 !important;
        right: 0 !important;
        border-radius: 0 !important; /* Retire les bords arrondis si besoin */
        padding: 10px 15px !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
    }

    /* 2. Centrage du conteneur principal */
    main {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding: 15px !important;
        margin: 0 auto !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important; /* Centre tout le contenu */
    }

    /* 3. Image teaser / Bannière en haut */
    .rila-teaser,
    #rila-teaser,
    #glass_box_shadow {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto 20px auto !important;
    }

    #rilski_montain,
    .rila-teaser img {
        width: 100% !important;
        height: auto !important;
        border-radius: 12px !important;
    }

    /* 4. Titre principal centré */
    .thermal-title,
    h1 {
        text-align: center !important;
        width: 100% !important;
        margin: 15px 0 !important;
    }

    /* 5. Blocs de contenu (intro, trésors, etc.) centrés et élargis */
    .intro-top-container,
    .trasures,
    .intro-row {
        width: 100% !important;
        max-width: 500px !important; /* Largeur agréable pour la lecture */
        margin: 0 auto 20px auto !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    /* Boîtes de texte vertes */
    .intro_bg,
    .intro-large {
        width: 100% !important;
        box-sizing: border-box !important;
        margin: 0 auto !important;
        padding: 20px !important;
        text-align: center !important; /* Texte centré pour une lecture fluide */
    }

    /* Images des cartes centrées */
    .zlatno_images,
    .trasures img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        margin: 10px auto 0 auto !important;
        border-radius: 12px !important;
    }
}
/* ==========================================
   CORRECTIONS ET LAYOUT CÔTE À CÔTE MOBILE
   ========================================== */

/* Supprime le fond noir sous la carte */

#bg-canvas {
    display: none !important; /* Masque le canvas s'il génère le fond noir */
}

@media screen and (max-width: 768px) {

    /* Navbar pleine largeur */
    .Homenavbar {
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 10px 15px !important;
    }

    /* Conteneur principal */
    main {
        width: 100% !important;
        padding: 10px !important;
        box-sizing: border-box !important;
    }

    /* Titre principal centré */
    .thermal-title, h1 {
        text-align: center !important;
        margin: 15px 0 !important;
    }

    /* 1. PREMIER BLOC RÉDUIT */
    .intro-top-container {
        width: 85% !important; /* Réduit la largeur */
        margin: 0 auto 20px auto !important;
    }

    .intro-top-container .intro_bg,
    .intro-top-container .intro-large {
        padding: 10px 14px !important; /* Moins de rembourrage */
    }

    .intro-top-container p {
        font-size: 0.8rem !important; /* Texte plus petit */
        line-height: 1.3 !important;
    }

    /* 2. DISPOSITION ET AGRANDISSEMENT DES 3 AUTRES BLOCS */
    .trasures {
        display: flex !important;
        flex-direction: column !important; /* Passe en colonne pour laisser de la place aux grands blocs */
        align-items: center !important;
        gap: 15px !important;
        width: 100% !important;
        margin-bottom: 30px !important;
    }

    /* Empilement normal même pour les blocs "reverse" */
    .trasures.reverse {
        flex-direction: column !important;
    }

    /* Bloc de texte agrandi */
    .trasures .intro_bg {
        flex: none !important;
        width: 100% !important;
        padding: 20px 18px !important; /* Rembourrage généreux */
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    /* Typographies agrandies pour les 3 blocs */
    .trasures .intro_bg h2 {
        font-size: 1.35rem !important;
        margin-bottom: 8px !important;
        color: #ffffff !important;
    }
    .intro-top-container {
        height: auto !important;
        min-height: unset !important;
    }
    .intro-top-container .intro_bg,
    .intro-top-container .intro-large {
        height: auto !important;
        min-height: unset !important;
        max-height: fit-content !important;
        padding: 15px 20px !important;
    }
    /* Texte plus grand et bien lisible */
    .intro-top-container p {
        font-size: 1.1rem !important;   /* Augmente la taille de la police */
        line-height: 1.5 !important;    /* Améliore la lisibilité */
        margin: 0 !important;
    }
    .trasures .intro_bg p {
        font-size: 0.95rem !important;
        line-height: 1.45 !important;
        margin-bottom: 8px !important;
    }

    /* Images agrandies */
    .trasures .zlatno_images {
        flex: none !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 220px !important; /* Image plus haute et visible */
        object-fit: cover !important;
        border-radius: 12px !important;
        margin: 0 !important;
    }
}
.water-stats-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px; /* Réduit un peu l'espace pour donner de la place aux blocs */
    width: 90%;
    max-width: 1300px;
    margin: 60px auto;
}

/* Réduire le premier bloc (texte d'intro) */
.intro-bg-thermal {
    flex: 1 1 45%; /* Prend max 45% de l'espace au lieu de s'étaler */
    max-width: 550px; /* Empêche le bloc d'être trop large */
    padding: 25px 30px;
    background-color: rgba(109, 113, 60, 0.89);
    border-radius: 20px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}
.stats-visual {
    flex: 1 1 50%; /* Donne au bloc de droite 50% de l'espace disponible */
    display: flex;
    flex-direction: row; /* Met l'anneau et les chiffres côte à côte */
    align-items: center;
    justify-content: flex-end;
    gap: 30px;
}

/* Taille de l'anneau ajustée pour ne pas tout écraser */
.stat-ring {
    position: relative;
    width: 200px; /* Réduit de 260px à 200px pour laisser respirer les chiffres */
    height: 200px;
    flex-shrink: 0;
}

.stat-ring-img {
    position: absolute;
    top: 22px;
    left: 22px;
    width: calc(100% - 44px);
    height: calc(100% - 44px);
    border-radius: 50%;
    object-fit: cover;
}

/* Lisibilité des chiffres */
.stat-columns {
    display: flex;
    flex-direction: column; /* Empile les indicateurs pour une meilleure lisibilité */
    gap: 20px;
}

.stat-number {
    font-family: "Roboto Slab", serif;
    font-weight: 800;
    font-size: 2.8rem; /* Réduit de 4.2rem à 2.8rem pour éviter le chevauchement */
    line-height: 1;
}

.stat-label {
    font-size: 1rem;
    color: #cfd9d5;
    white-space: nowrap; /* Empêche le texte du label de se casser bizarrement */
}

@media screen and (max-width: 768px) {

    #index {
        background: var(--bg-green-box);
    }

    /* 2. Layout principal en Flexbox */
    body {
        display: flex !important;
        flex-direction: column !important;
        min-height: 100vh !important;
    }

    /* 3. Carte Hero — uniquement l'image */
    #glass_box_shadow {
        position: relative !important;
        width: 92% !important;
        height: 50vh !important;
        margin: 15px auto 0 auto !important;
        border-radius: 24px !important;
        overflow: hidden !important;
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3) !important;
    }

    #glass_box_shadow #musala {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        z-index: 1 !important;
    }

    /* 4. Tag "verre" — EN DESSOUS de l'image, hors carte */
    .glass-text {
        position: relative !important;
        z-index: 3 !important;
        width: 92% !important;
        margin: 15px auto 0 auto !important;
        background: rgba(255, 255, 255, 0.2) !important;
        backdrop-filter: blur(8px) !important;
        -webkit-backdrop-filter: blur(8px) !important;
        border: 1px solid rgba(255, 255, 255, 0.3) !important;
        padding: 10px 14px !important;
        border-radius: 16px !important;
        color: #ffffff !important;
        font-size: 0.8rem !important;
        text-align: center !important;
        line-height: 1.3 !important;
    }

    /* 5. Titre — sous le tag verre */
    .hero-overlay {
        position: relative !important;
        z-index: 3 !important;
        width: 92% !important;
        margin: 20px auto 0 auto !important;
        padding: 24px 16px 0 16px !important;
        text-align: center !important;
        background-color: rgba(255, 255, 255, 0.06) !important;
        border-radius: 20px !important;
    }

    .hero-title-overlay {
        font-size: 1.6rem !important;
        color: #ffffff !important;
        text-transform: uppercase !important;
        letter-spacing: 1px !important;
        margin-bottom: 0 !important;
        text-shadow: none !important;
    }

    /* 6. Bouton CTA — encore plus en dessous, séparé du titre */
    .hero-cta {
        display: block !important;
        width: fit-content !important;
        margin: 30px auto 24px auto !important;
        padding: 14px 36px !important;
        background-color: #ffffff !important;
        color: #2c3e50 !important;
        font-weight: bold !important;
        border-radius: 30px !important;
        text-decoration: none !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25) !important;
        transition: transform 0.2s ease !important;
    }

    .hero-cta:active {
        transform: scale(0.95) !important;
    }

    /* 7. Mascotte Droplet et Bulle de dialogue */
    #droplet {
        position: fixed !important;
        bottom: 15px !important;
        right: 15px !important;
        width: 75px !important;
        height: auto !important;
        z-index: 99 !important;
        filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3)) !important;
    }

    #speech-bubble {
        position: fixed !important;
        bottom: 95px !important;
        right: 15px !important;
        z-index: 99 !important;
        background: #ffffff !important;
        color: #333333 !important;
        font-weight: 600 !important;
        font-size: 0.8rem !important;
        padding: 8px 14px !important;
        border-radius: 16px 16px 2px 16px !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
    }

    /* Empêche le bouton de bouger sur mobile */
    .hero-cta {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        transition: background-color 0.25s ease; /* pas de mouvement */
    }

    /* Hover rouge (PC uniquement) */
    .hero-cta:hover {
        background-color: #D62612 !important;
        color: white !important;
    }


}
.glass-text-overlay {
    position: absolute;
    bottom: 20px;
    right: 30px;

    padding: 15px 25px;
    color: white;
    font-size: 18px;
    font-family: "Roboto Slab", serif;

    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 15px;

    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);

    animation: glassAppear 1.5s ease-out forwards;
}
.monastery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 25px;
    margin: 40px auto;
    max-width: 1200px;
}

.monastery-card {
    background-color: rgba(109, 113, 60, 0.89);
    border-radius: 20px;
    padding: 20px;
    color: #f5f2e9;
    box-shadow: 0 8px 25px rgba(0,0,0,0.25);
    text-align: center;
    transition: transform 0.3s ease;
}

.monastery-card:hover {
    transform: translateY(-5px);
}

.monastery-card img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 15px;
    margin-bottom: 15px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}

.monastery-card h3 {
    font-family: "Roboto Slab", serif;
    font-weight: 800;
    color: #D4AF37;
    margin-bottom: 10px;
}

.monastery-card p {
    font-family: "Lora", serif;
    line-height: 1.6;
    color: #f5f2e9;
}
.martenitsa-footer {
    max-width: 700px;
    margin: 60px auto 40px;
    padding: 10px 0;
}

.martenitsa-banner {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.18));
    opacity: 0;
    transform: translateY(-15px);
    animation: martenitsaDrop 1s ease-out forwards;
}

.martenitsa-frieze {
    width: 100%;
    height: 90px;
    margin-top: -10px;
    background-image: url('../images/cloths/bg_bird.png');
    background-repeat: repeat-x;
    background-position: center;
    background-size: auto 90px;
    opacity: 0;
    animation: martenitsaFadeIn 1.2s ease-out 0.5s forwards;
}

@keyframes martenitsaDrop {
    from { opacity: 0; transform: translateY(-15px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes martenitsaFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@media (max-width: 500px) {
    .martenitsa-footer { max-width: 92%; margin: 40px auto 25px; }
    .martenitsa-frieze { height: 60px; background-size: auto 60px; }
}
.martenitsa-connected {
    position: relative;
    padding-top: 60px;
    padding-bottom: 60px;
}

/* Fil horizontal qui passe derrière les blocs */
.martenitsa-connected::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 5%;
    right: 5%;
    height: 4px;
    background: linear-gradient(90deg, #D62612, #ffffff, #D62612);
    border-radius: 999px;
    z-index: 0;
}

/* Petits fils verticaux qui “touchent” chaque carte */
.monastery-card {
    position: relative;
    z-index: 1;
}

/* Fil principal */
#martenitsa-line {
    position: absolute;
    left: 5%;
    right: 5%;
    height: 4px;
    background: linear-gradient(90deg, #D62612, #ffffff, #D62612);
    border-radius: 999px;
    z-index: 0;
    transition: top 0.4s ease;
}

/* Fil vertical attaché à chaque carte */
.monastery-card::before {
    content: "";
    position: absolute;
    width: 3px;
    height: 40px;
    background: linear-gradient(#D62612, #ffffff);
    left: 50%;
    transform: translateX(-50%);
    top: -40px;
    border-radius: 999px;
    transition: height 0.4s ease;
}
#martenitsa-line {
    animation: pulseLine 2s infinite alternate;
}

@keyframes pulseLine {
    0% { opacity: 0.8; }
    100% { opacity: 1; }
}
/* Fil principal */
#martenitsa-line {
    position: absolute;
    left: 5%;
    right: 5%;
    height: 4px;
    background: linear-gradient(90deg, #D62612, #ffffff, #D62612);
    border-radius: 999px;
    z-index: 0;
    transition: top 0.4s ease;
}

/* Tassel cliquable */
#martenitsa-tassel {
    position: absolute;
    width: 60px;
    height: 60px;
    cursor: pointer;
    z-index: 10;
    transform: translate(-50%, -50%);
    transition: transform 0.3s ease;
}

#martenitsa-tassel:hover {
    transform: translate(-50%, -50%) scale(1.15);
}

#martenitsa-tassel img {
    width: 100%;
    height: auto;
}

/* Popup embroidery */
#embroidery-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.65);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 99999;
}

.popup-content {
    background: rgba(109,113,60,0.89);
    padding: 20px;
    border-radius: 20px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.25);
    text-align: center;
}

.popup-content img {
    width: 300px;
    border-radius: 12px;
    margin-bottom: 15px;
}

#close-popup {
    background: #D62612;
    color: white;
    border: none;
    padding: 10px 18px;
    border-radius: 10px;
    cursor: pointer;
}
@media (max-width: 768px) {

    /* Intro block centré */
    .intro_bg {
        max-width: 90%;
        margin: 20px auto;
        padding: 20px;
    }

    /* Grille en 1 colonne */
    .monastery-grid {
        grid-template-columns: 1fr !important;
        gap: 25px;
        width: 90%;
        margin: auto;
    }

    /* Cartes plus compactes */
    .monastery-card {
        padding: 18px;
    }

    .monastery-card img {
        height: 200px;
    }

    /* Fil martenitsa repositionné */
    #martenitsa-line {
        left: 10%;
        right: 10%;
        height: 3px;
    }

    /* Tassel centré */
    #martenitsa-tassel {
        width: 50px;
        height: 50px;
    }

    /* Popup embroidery */
    #embroidery-popup .popup-content {
        width: 85%;
        padding: 15px;
    }

    #embroidery-popup img {
        width: 100%;
    }
}
@media (max-width: 768px) {
    .intro_bg {
        width: 90% !important;        /* Empêche le débordement horizontal */
        max-width: 100% !important;
        margin: 20px auto !important;  /* Centre le bloc sur la page */
        padding: 16px 18px !important;/* Réduit les marges internes */
        box-sizing: border-box;       /* Inclus les bordures et paddings dans la largeur */
    }

    .intro_bg p {
        font-size: 0.9rem !important;  /* Ajuste la taille du texte si besoin */
        line-height: 1.5 !important;
    }
}
@media (max-width: 768px) {
    .folklore-content {
        flex-direction: column !important;
        align-items: center !important;
        width: 94% !important;
        gap: 20px !important;
        margin: 20px auto !important;
    }
}
.sofia-page .intro_bg p {
    font-size: 1.05rem;
    line-height: 1.55;
    margin: 0 0 12px;
}


.sofia-page .intro-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}



/* Ligne galerie + carte, côte à côte */
.sofia-page .gallery-map-row {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: center;
    gap: 25px;
    width: 100%;
}

.sofia-page .zlatno-gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    flex: 1 1 460px;
    max-width: 480px;
}

.sofia-page .zlatno-wrap {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
}

.sofia-page .zlatno-wrap .zlatno_images {
    display: block;
    width: 100%;
    height: 160px;
    object-fit: cover;
    margin: 0;
    transition: transform 0.4s ease;
}

.sofia-page .zlatno-wrap:hover .zlatno_images {
    transform: scale(1.08);
}

.sofia-page .zlatno-wrap .hover-label {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
    color: #f5f2e9;
    padding: 10px 12px 8px;
    font-family: "Roboto Slab", serif;
    font-size: 0.9rem;
    font-weight: 700;
    text-align: center;
    transform: translateY(100%);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
    pointer-events: none;
}

.sofia-page .zlatno-wrap:hover .hover-label {
    transform: translateY(0);
    opacity: 1;
}

/* Carte à côté de la galerie */
.sofia-page .gallery-map-row .empire-map {
    flex: 1 1 320px;
    max-width: 380px;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.sofia-page .gallery-map-row .empire-map img {
    width: 100%;
    max-width: 100%;
}

@media (max-width: 800px) {
    .sofia-page .zlatno-gallery,
    .sofia-page .gallery-map-row .empire-map {
        max-width: 100%;
        flex: 1 1 100%;
    }
}
.sofia-page .intro-row {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    gap: 30px;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

.sofia-page .intro_bg {
    max-width: 400px;
    flex: 1 1 380px;
    padding: 25px 30px;
    margin: 0;
    text-align: left;
}

.sofia-page .gallery-map-row {
    flex: 1 1 480px;
    max-width: 480px;
    display: flex;
    flex-direction: column;
    gap: 25px;
    width: auto;
}

.sofia-page .zlatno-gallery {
    max-width: 100%;
}

.sofia-page .empire-map {
    max-width: 100%;
}

@media (max-width: 850px) {
    .sofia-page .intro-row {
        flex-direction: column;
        align-items: center;
    }

    .sofia-page .intro_bg {
        max-width: 550px;
        text-align: center;
    }
}
.sofia-page .intro-row {
    align-items: stretch;
}

.sofia-page .intro_bg {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 480px;
}
.dobroudja-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 40px;
    width: 90%;
    max-width: 1300px;
    margin: 40px auto;
    flex-wrap: wrap;
}

.dobroudja-row .intro-bg-thermal {
    flex: 1 1 420px;
    margin: 0;
}

.dobroudja-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 40px;
    width: 90%;
    max-width: 1300px;
    margin: 60px auto;
    flex-wrap: wrap;

    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.9s ease-out, transform 0.9s ease-out;
}

.dobroudja-row.in-view {
    opacity: 1;
    transform: translateY(0);
}

.dobroudja-row .intro-bg-thermal,
.dobroudja-row .pirate-map-frame {
    flex: 1 1 420px;
    margin: 0;
    transition: transform 0.9s ease-out 0.15s, opacity 0.9s ease-out 0.15s;
}

.dobroudja-row .pirate-map-frame {
    max-width: 480px;
}

.dobroudja-row:not(.row-reverse) .intro-bg-thermal {
    transform: translateX(-30px);
    opacity: 0;
}
.dobroudja-row:not(.row-reverse) .pirate-map-frame {
    transform: translateX(30px);
    opacity: 0;
}

.dobroudja-row.row-reverse {
    flex-direction: row-reverse;
}
.dobroudja-row.row-reverse .intro-bg-thermal {
    transform: translateX(30px);
    opacity: 0;
}
.dobroudja-row.row-reverse .pirate-map-frame {
    transform: translateX(-30px);
    opacity: 0;
}

.dobroudja-row.in-view .intro-bg-thermal,
.dobroudja-row.in-view .pirate-map-frame {
    transform: translateX(0);
    opacity: 1;
}

.pirate-map-frame {
    padding: 18px;
    background-color: #e8d9ae;
    clip-path: polygon(
            1% 3%, 3% 0%, 5% 4%, 7% 1%, 9% 5%, 11% 0%, 13% 4%, 15% 1%,
            17% 5%, 19% 0%, 21% 4%, 23% 1%, 25% 5%, 27% 0%, 29% 4%, 31% 1%,
            33% 5%, 35% 0%, 37% 4%, 39% 1%, 41% 5%, 43% 0%, 45% 4%, 47% 1%,
            49% 5%, 51% 0%, 53% 4%, 55% 1%, 57% 5%, 59% 0%, 61% 4%, 63% 1%,
            65% 5%, 67% 0%, 69% 4%, 71% 1%, 73% 5%, 75% 0%, 77% 4%, 79% 1%,
            81% 5%, 83% 0%, 85% 4%, 87% 1%, 89% 5%, 91% 0%, 93% 4%, 95% 1%,
            97% 5%, 99% 0%, 100% 3%,
            97% 7%, 100% 10%, 96% 13%, 100% 16%, 97% 19%, 100% 22%, 96% 25%,
            100% 28%, 97% 31%, 100% 34%, 96% 37%, 100% 40%, 97% 43%, 100% 46%,
            96% 49%, 100% 52%, 97% 55%, 100% 58%, 96% 61%, 100% 64%, 97% 67%,
            100% 70%, 96% 73%, 100% 76%, 97% 79%, 100% 82%, 96% 85%, 100% 88%,
            97% 91%, 100% 94%, 96% 97%, 100% 100%,
            99% 97%, 97% 100%, 95% 96%, 93% 100%, 91% 97%, 89% 100%, 87% 96%,
            85% 100%, 83% 97%, 81% 100%, 79% 96%, 77% 100%, 75% 97%, 73% 100%,
            71% 96%, 69% 100%, 67% 97%, 65% 100%, 63% 96%, 61% 100%, 59% 97%,
            57% 100%, 55% 96%, 53% 100%, 51% 97%, 49% 100%, 47% 96%, 45% 100%,
            43% 97%, 41% 100%, 39% 96%, 37% 100%, 35% 97%, 33% 100%, 31% 96%,
            29% 100%, 27% 97%, 25% 100%, 23% 96%, 21% 100%, 19% 97%, 17% 100%,
            15% 96%, 13% 100%, 11% 97%, 9% 100%, 7% 96%, 5% 100%, 3% 97%,
            1% 100%, 0% 97%,
            3% 93%, 0% 89%, 4% 85%, 0% 81%, 3% 77%, 0% 73%, 4% 69%, 0% 65%,
            3% 61%, 0% 57%, 4% 53%, 0% 49%, 3% 45%, 0% 41%, 4% 37%, 0% 33%,
            3% 29%, 0% 25%, 4% 21%, 0% 17%, 3% 13%, 0% 9%, 4% 5%, 0% 1%
    );
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
    position: relative;
}

.pirate-map-img {
    display: block;
    width: 100%;
    height: auto;
    filter: sepia(0.55) contrast(1.15) brightness(0.92) saturate(1.1);
    mix-blend-mode: multiply;
}

.pirate-map-frame::after {
    content: "";
    position: absolute;
    inset: -2px;
    box-shadow: inset 0 0 22px 14px rgba(139, 106, 58, 0.6);
    clip-path: inherit;
    pointer-events: none;
}

.pirate-map-frame::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 30% 20%, rgba(139, 106, 58, 0.15), transparent 60%),
    radial-gradient(ellipse at 80% 80%, rgba(139, 106, 58, 0.18), transparent 55%);
    pointer-events: none;
    mix-blend-mode: multiply;
}

@media (max-width: 850px) {
    .dobroudja-row,
    .dobroudja-row.row-reverse {
        flex-direction: column;
        align-items: center;
    }
    .pirate-map-frame {
        max-width: 90%;
    }
}
/* ================= RESTRUCTURATION DU BLOC D'INTRO ================= */

.folklore-content {
    display: flex;
    flex-direction: column;
    max-width: 1100px;
    margin: 30px auto;
    padding: 0 20px;
    gap: 30px;
}

/* Section supérieure : Texte vert + Images à droite */
.folklore-top-section {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 30px;
    width: 100%;
}

/* Bloc vert principal */
.intro_bg {
    flex: 1.2;
    background-color: rgba(109, 113, 60, 0.9);
    color: #ffffff;
    padding: 30px;
    border-radius: 16px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
    font-size: 1.05rem;
    line-height: 1.7;
    margin: 0;
}

.intro_bg strong {
    color: #fce38a;
}

/* Colonne d'images à droite */
.folklore-images {
    flex: 0.8;
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: space-between;
}

.image-container {
    width: 100%;
    text-align: center;
}

/* Style des 2 images à droite (taille augmentée) */
.firstfolklore {
    width: 100%;
    height: 220px; /* Hauteur augmentée */
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

/* Image 1 : décalée vers le bas */
.image-container:nth-child(1) .firstfolklore {
    object-position: center 70%;
}

/* Image 2 : décalée vers le haut pour voir les têtes */
.image-container:nth-child(2) .firstfolklore {
    object-position: top;
}

.kukeri-text, .nestinarstvo-text {
    font-size: 0.85rem;
    margin-top: 5px;
    color: white;
}

.folklore-highlight {
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    padding: 10px 0 10px 50px; /* Augmenté à 80px pour décaler encore plus à droite */
    margin: 20px 0;
    box-sizing: border-box;
}

.highlight-text {
    font-size: 1.3rem;
    font-weight: 600;
    color: #3f4a32;
    margin: 0;
    text-align: left;
}
/* Adaptatif Mobile */
@media (max-width: 768px) {
    .folklore-top-section {
        flex-direction: column;
    }

    .firstfolklore {
        height: 200px;
    }


    /* Ajuste la police sur mobile pour éviter qu'elle soit trop grosse */
    .intro-bg-thermal {
        font-size: 0.95rem; /* Taille plus adaptée aux écrans de téléphone */
        line-height: 1.5;
        padding: 18px;      /* Évite les gros vides autour du texte */
    }
    .dobroudja-row,
    .dobroudja-row.row-reverse {
        flex-direction: column !important;
        align-items: center !important;
    }
    .pirate-map-frame {
        width: 90% !important;
        max-width: 420px !important;
        height: auto !important;
        padding: 14px !important;
        margin: 0 auto 20px auto !important;
        display: block !important;
        box-sizing: border-box !important;
        /* overflow retiré : on laisse hidden par défaut du parent */
    }

    .pirate-map-img {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
    }
    /* Réduction de la taille du texte */
    .intro-bg-thermal {
        font-size: 0.95rem;
        line-height: 1.5;
        padding: 16px;
    }
}
/* Image 1 (Kukeri) : calée vers le haut pour voir les masques */
.image-container:nth-child(1) .firstfolklore {
    object-position: top; /* ou center 20% si tu veux descendre légèrement */
}

/* Image 2 (Nestinarstvo) : calée vers le haut pour voir les visages */
.image-container:nth-child(2) .firstfolklore {
    object-position: top;
}
/* Espacement uniforme entre les paragraphes dans tous les blocs verts */
.intro-bg-thermal p {
    margin-bottom: 1.2rem; /* Ajuste cette valeur pour augmenter/réduire l'espace */
}

/* Supprime la marge sous le tout dernier paragraphe pour garder des bordures propres */
.intro-bg-thermal p:last-child {
    margin-bottom: 0;
}
/* Homogénéisation des blocs de texte des régions avec le premier bloc */
/* Taille de texte identique au bloc d'introduction .intro_bg */
.intro-bg-thermal {
    font-size: 1.15rem;
    line-height: 1.8;
}
@media (max-width: 768px) {
    .pirate-map-frame::before,
    .pirate-map-frame::after {
        display: none !important;
    }
}
#rhodopes ~ .dobroudja-row:last-of-type {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

#rhodopes ~ .dobroudja-row:last-of-type .intro-bg-thermal,
#rhodopes ~ .dobroudja-row:last-of-type .pirate-map-frame {
    opacity: 1 !important;
    transform: translateX(0) !important;
}
.fest-intro-row {
    display: flex;
    justify-content: center;
}

.fest-intro-row .intro_bg {
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
}

@media (min-width: 900px) {
    .fest-intro-row .intro_bg {
        max-width: 950px;
    }
}
/* Container du bouton : centrage parfait et espacement */
.btn-calendar-container {
    margin-top: 50px;
    margin-bottom: 20px;
    display: flex;
    justify-content: center; /* Centre le bouton horizontalement */
    width: 100%;
}

/* Style du bouton : taille augmentée */
.btn-calendar {
    display: inline-block;
    background-color: #007791; /* Bleu mer */
    color: #ffffff !important;
    font-size: 1.15rem;       /* Texte plus grand */
    font-weight: 700;
    padding: 16px 36px;        /* Rembourrage augmenté pour un bouton plus imposant */
    border-radius: 30px;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(0, 119, 145, 0.4);
    transition: all 0.3s ease;
}

.btn-calendar:hover {
    background-color: #0e8aa5;
    color: #ffffff !important;
    transform: translateY(-3px) scale(1.02); /* Effet de survol renforcé */
    box-shadow: 0 6px 18px rgba(0, 119, 145, 0.5);
}
/* Application stricte de la police sur l'ensemble de la barre de navigation */
.Homenavbar,
.Homenavbar a,
.Homenavbar-title,
.nav-item,
.nav-main-item > a {
    font-family: "Roboto Slab", serif !important;
    font-weight: 800 !important;
    font-style: normal;
    letter-spacing: 0.5px !important; /* Réduit pour correspondre à l'image */
    color: #f5f2e9 !important;
}
.search_container {
    position: relative;
}

#region-search-form {
    display: flex;
    align-items: center;
    width: 220px;
    height: 36px;
    background-color: #f5f2e9;
    border: 2px solid #C9A227;
    border-radius: 30px;
    overflow: hidden;
}

#region-search {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    padding: 0 14px;
    background: transparent;
    font-family: "Roboto Slab", serif;
    font-size: 13px;
    color: hsl(82, 39%, 30%);
}

#region-search::placeholder {
    color: hsl(82, 39%, 30%);
    opacity: 0.7;
}

#region-search-form button {
    width: 65px;
    height: 100%;
    border: none;
    background-color: rgba(109, 113, 60, 0.89);
    color: white;
    font-size: 22px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

#region-search-form button:hover {
    background-color: #3f4a32;
}

#region-suggestions {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    width: 100%;
    background-color: #f5f2e9;
    border: 2px solid #C9A227;
    border-radius: 14px;
    overflow: hidden;
    z-index: 600;
}

#region-suggestions:empty {
    display: none;
}

#region-suggestions .suggestion {
    padding: 8px 14px;
    font-family: "Roboto Slab", serif;
    font-size: 13px;
    color: hsl(82, 39%, 30%);
    cursor: pointer;
}

#region-suggestions .suggestion:hover {
    background-color: rgba(109, 113, 60, 0.15);
}

/* Desktop */
@media (min-width: 769px) {
    .Homenavbar {
        position: relative;
    }
    .search_container {
        position: absolute;
        top: 50%;
        right: 24px;
        transform: translateY(-50%);
    }
}

/* Mobile */
@media (max-width: 768px) {
    .search_container {
        display: flex;
        justify-content: center;
        width: 100%;
        order: 3;
        margin: 8px auto 4px;
    }

    #region-search-form {
        width: 65%;
        max-width: 200px;
        height: 32px;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
    }

    #region-search {
        font-size: 12px;
        padding: 0 10px;
    }

    #region-search-form button {
        width: 40px;
        font-size: 16px;
    }
}

/* Style pour le bouton en bas de page */
.map-btn-container {
    text-align: center;
    margin: 40px 0;
}

.map-btn {
    display: inline-block;
    background-color: rgba(109, 113, 60, 0.9);
    color: #ffffff;
    font-family: "Roboto Slab", serif;
    font-size: 1.1rem;
    padding: 12px 28px;
    border-radius: 30px;
    text-decoration: none;
    border: 2px solid #C9A227;
    transition: all 0.3s ease;
}

.map-btn:hover {
    background-color: #3f4a32;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
/* 1. Uniformisation de la police et de la couleur pour le dropdown et son texte */
.nav-main-item.dropdown-trigger,
.nav-main-item.dropdown-trigger > a,
.nav-main-item.dropdown-trigger > span,
.dropdown-trigger {
    font-family: 'Roboto Slab', serif !important;
    font-weight: 700 !important;
    color: #f5f2e9 !important; /* Mème couleur beige que la navbar */
    letter-spacing: 1px !important;
    text-decoration: none !important;
}

/* 2. Empêcher le changement de couleur au survol ou au clic s'il y en avait un */
.nav-main-item.dropdown-trigger:hover,
.nav-main-item.dropdown-trigger > a:hover,
.nav-main-item.dropdown-trigger > span:hover {
    color: #f5f2e9 !important;
}
/* ===== RESPONSIVE GÉNÉRAL - SOFIA PAGE ===== */

@media (max-width: 768px) {




    /* ===== H1 : plus de superposition ===== */
    .sofia-page h1 {
        position: static !important;
        display: block !important;
        width: 100% !important;
        height: auto !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        text-align: center !important;
        font-size: 1.2rem !important;
        line-height: 1.4 !important;
        margin: 15px 0 !important;
        padding: 0 10px !important;
        box-sizing: border-box !important;
    }

    /* ===== INTRO-ROW : conteneur du texte ===== */
    .sofia-page .intro-row {
        display: flex !important;
        flex-direction: column !important;
        position: static !important;
        height: auto !important;
        padding: 0 15px !important;
    }

    .sofia-page .intro_bg {
        position: static !important;
        width: 100% !important;
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        box-sizing: border-box !important;
        padding: 20px !important;
    }

    .sofia-page .intro_bg p {
        overflow: visible !important;
        white-space: normal !important;
    }

    /* ===== GALERIE + MAP : images d'abord, map après ===== */
    .sofia-page .gallery-map-row {
        display: flex !important;
        flex-direction: column !important;
        position: static !important;
        height: auto !important;
        width: 100% !important;
    }

    .sofia-page .zlatno-gallery {
        order: 1 !important;
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        position: static !important;
        width: 100% !important;
        gap: 10px !important;
    }

    .sofia-page .empire-map {
        order: 2 !important;
        position: static !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 25px auto !important;
        padding: 0 15px !important;
    }

    .sofia-page .zlatno_images,
    .sofia-page .empire-map img {
        position: static !important;
        max-width: 100% !important;
        width: 45% !important;
        height: auto !important;
    }

    .sofia-page .empire-map img {
        width: 100% !important;
    }
}

@media (max-width: 500px) {
    .sofia-page h1 {
        font-size: 1rem !important;
    }

    .sofia-page .zlatno_images {
        width: 100% !important;
    }
}
@media (max-width: 700px) {

    /* Empêcher toute coupe de contenu */
    .sofia-page,
    .sofia-page body,
    .sofia-page main,
    .sofia-page .intro-row,
    .sofia-page .gallery-map-row,
    .sofia-page .zlatno-gallery,
    .sofia-page .empire-map {
        overflow: visible !important;
        height: auto !important;
        max-height: none !important;
        min-height: 0 !important;
    }

    .sofia-page .gallery-map-row {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
    }

    .sofia-page .zlatno-gallery {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        width: 100% !important;
        order: 1 !important;
    }

    .sofia-page .zlatno-wrap {
        width: 45% !important;
        height: auto !important;
    }

    .sofia-page .zlatno_images {
        width: 100% !important;
        height: auto !important;
        display: block !important;
    }

    .sofia-page .empire-map {
        order: 2 !important;
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 30px auto !important;
        padding: 0 15px !important;
        box-sizing: border-box !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .sofia-page .empire-map img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        display: block !important;
    }
}
@media (max-width: 768px) {

    /* Le parent de la navbar sert de repère */
    .Homenavbar {
        position: relative !important;
    }

    .Homenavbar-title {
        position: absolute !important; /* Change de fixed à absolute */
        top: 100% !important; /* Se place tout en bas de la navbar */
        left: 50% !important;
        transform: translateX(-50%) !important; /* Centre parfaitement sous la navbar */

        width: 92% !important;
        max-width: 400px !important;
        margin: 10px auto 0 !important; /* Petit espace de 10px entre la navbar et le menu */

        display: none !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;

        padding: 20px 20px !important;
        box-sizing: border-box !important;

        background: rgba(109, 113, 60, 0.98) !important;
        border-radius: 18px !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;

        z-index: 999 !important;
    }

    .Homenavbar-title.open {
        display: flex !important;
    }

    .Homenavbar-title .nav-item,
    .Homenavbar-title .nav-main-item {
        width: 100% !important;
        text-align: center !important;
        padding: 6px 0 !important;
    }

    .Homenavbar-title .nav-sub-menu {
        position: static !important;
        display: none !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        width: 100% !important;
        margin-top: 8px !important;

        background: rgba(255, 255, 255, 0.1) !important;
        border-radius: 12px !important;
        padding: 10px 0 !important;
    }

    .Homenavbar-title .nav-sub-menu.open {
        display: flex !important;
    }

    .Homenavbar-title .nav-sub-item {
        color: #f5f2e9 !important;
        font-size: 0.9rem !important;
        padding: 8px 0 !important;
    }

    .Homenavbar-title .separator {
        display: none !important;
    }
}
/* =========================================================
   BOUTONS STYLE TRÉSOR BULGARE (JAUNE DORÉ)
   ========================================================= */

/* Style de base pour la page Sofia */
.sofia-page .btn-calendar {
    display: inline-block;
    padding: 10px 28px;
    background: #D4AF37;
    color: #3b4224;
    font-family: "Roboto Slab", serif;
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    border-radius: 30px;
    border: 2px solid #b8952a;
    transition: all 0.3s ease;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.3);
}

/* Hover pour Sofia */
.sofia-page .btn-calendar:hover {
    background: #c4a030;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(212, 175, 55, 0.45);
    border-color: #a88620;
}

/* Active pour Sofia - CORRECTION */
.sofia-page .btn-calendar:active {
    transform: translateY(0px);
    box-shadow: 0 2px 8px rgba(212, 175, 55, 0.25);
}

/* =========================================================
   BOUTONS POUR LA PAGE TRESORS
   ========================================================= */

/* Style de base pour la page Trésors */
.trasures_page .btn-calendar {
    display: inline-block;
    padding: 12px 28px;
    background: #d4af37;
    color: #2c2c2c;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: 2px solid #b8962e;
    border-radius: 50px;
    transition: all 0.3s ease;
    text-decoration: none;
    font-size: 0.95rem;
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.25);
    cursor: pointer;
}

/* Hover pour Trésors */
.trasures_page .btn-calendar:hover {
    background: #c4a030;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(212, 175, 55, 0.45);
    border-color: #a88620;
}

/* Active pour Trésors */
.trasures_page .btn-calendar:active {
    transform: translateY(0px);
    box-shadow: 0 2px 8px rgba(212, 175, 55, 0.25);
}

/* =========================================================
   VERSION UNIFIÉE (si les deux pages utilisent le même style)
   ========================================================= */

.trasures_page .btn-calendar,
.sofia-page .btn-calendar {
    display: inline-block;
    padding: 12px 28px;
    background: #d4af37;
    color: #2c2c2c;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: 2px solid #b8962e;
    border-radius: 50px;
    transition: all 0.3s ease;
    text-decoration: none;
    font-size: 0.95rem;
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.25);
    cursor: pointer;
}

.trasures_page .btn-calendar:hover,
.sofia-page .btn-calendar:hover {
    background: #c4a030;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(212, 175, 55, 0.45);
    border-color: #a88620;
}

.trasures_page .btn-calendar:active,
.sofia-page .btn-calendar:active {
    transform: translateY(0px);
    box-shadow: 0 2px 8px rgba(212, 175, 55, 0.25);
}