/* Add here all your CSS customizations */

/* Nouvelle palette de couleurs thermale */
:root {
  --color-primary: #1F4E5F;
  --color-secondary: #2FA7A0;
  --color-tertiary: #E8D8C3;
}

/* Couleur primaire - Bleu-vert foncé */
.text-primary,
.text-color-primary {
  color: #1F4E5F !important;
}

.bg-primary,
.badge-primary {
  background-color: #1F4E5F !important;
}

.btn-primary {
  background-color: #1F4E5F !important;
  border-color: #1F4E5F !important;
}

.btn-gradient {
  background: linear-gradient(135deg, #1F4E5F 0%, #2FA7A0 100%) !important;
  border-color: #1F4E5F !important;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: #2FA7A0 !important;
  border-color: #2FA7A0 !important;
}

.btn-gradient:hover,
.btn-gradient:focus {
  background: linear-gradient(135deg, #2FA7A0 0%, #1F4E5F 100%) !important;
  border-color: #2FA7A0 !important;
}

/* Couleur secondaire - Turquoise */
.text-secondary,
.text-color-secondary {
  color: #2FA7A0 !important;
}

.bg-secondary {
  background-color: #2FA7A0 !important;
}

.btn-secondary {
  background-color: #2FA7A0 !important;
  border-color: #2FA7A0 !important;
}

/* Couleur tertiaire - Beige clair */
.text-tertiary,
.text-color-tertiary {
  color: #1F4E5F !important;
}

.bg-tertiary,
.bg-light {
  background-color: #E8D8C3 !important;
}

.btn-tertiary {
  background-color: #E8D8C3 !important;
  border-color: #E8D8C3 !important;
  color: #1F4E5F !important;
}

/* Header sticky avec la nouvelle couleur */
html.simple-sticky-header-active #header .header-body {
  background-color: rgba(31, 78, 95, 0.95) !important;
}

/* Navigation */
.header-nav-main nav > ul > li > a:hover,
.header-nav-main nav > ul > li.active > a {
  color: #2FA7A0 !important;
}

/* Highlighted words animations */
.highlighted-word::before {
  background-color: #2FA7A0 !important;
}

/* Section angled layers */
.section-angled-layer-bottom,
.section-angled-layer-top {
  background-color: #E8D8C3;
}

/* Links */
a:hover {
  color: #2FA7A0 !important;
}

/* Custom header bar */
.custom-header-bar {
  background: linear-gradient(135deg, #1F4E5F 0%, #2FA7A0 100%);
}

/* Icon boxes */
.icon-bg {
  background: linear-gradient(135deg, #1F4E5F 0%, #2FA7A0 100%);
}

/* Dividers */
.divider-left-border {
  border-left-color: #2FA7A0 !important;
}

/* ============================================
   AMÉLIORATION DU MENU ACTIF - HEADER TRANSPARENT
   À ajouter dans css/custom.css
   ============================================ */

/* ============================================
   AMÉLIORATION DU MENU ACTIF - HEADER TRANSPARENT
   À ajouter dans css/custom.css
   ============================================ */

/* --- OPTION 5 (recommandée) : fond sombre uniforme derrière tout le header,
   pour garantir la lisibilité de TOUS les liens, quelle que soit l'image.
   (Un dégradé qui s'estompe ne suffit pas si le menu est en bas du header) --- */
.header-transparent .header-body {
    background-color: rgba(0,0,0,0.35) !important;
}

/* --- OPTION 1 (recommandée) : soulignement animé sous le lien actif --- */
#mainNav .nav-link {
    position: relative;
    padding-bottom: 6px;
}

#mainNav .nav-link::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 0;
    height: 2px;
    background-color: #ffffff;
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

#mainNav li.active .nav-link::after,
#mainNav .nav-link:hover::after {
    width: 70%;
}

/* --- OPTION FINALE : texte blanc + pastille arrondie autour du lien actif,
   comme un badge/bouton (façon "Home" dans l'exemple fourni) --- */
#mainNav li.active .nav-link,
#mainNav li.active .nav-link:hover,
#mainNav li.active .nav-link:focus {
    color: #ffffff !important;
    font-weight: 600;
    background-color: rgba(255,255,255,0.2);
    border-radius: 30px;
    padding: 8px 18px !important;
}

/* on retire le soulignement, la pastille suffit à indiquer l'état actif */
#mainNav li.active .nav-link::after {
    display: none;
}

/* --- OPTION 4 (alternative/complément) : ombre portée sur tous les liens du menu --- */
#mainNav .nav-link {
    text-shadow: 1px 1px 3px rgba(0,0,0,0.7);
}

/* --- OPTION 6 (alternative) : poids et espacement différents pour l'actif --- */
#mainNav li.active .nav-link {
    font-weight: 700;
    letter-spacing: 0.5px;
}

/* ============================================
   AMÉLIORATION DU MENU ACTIF - HEADER TRANSPARENT
   À ajouter dans css/custom.css
   ============================================ */

/* --- OPTION 5 (recommandée) : fond sombre uniforme derrière tout le header,
   pour garantir la lisibilité de TOUS les liens, quelle que soit l'image.
   (Un dégradé qui s'estompe ne suffit pas si le menu est en bas du header) --- */
.header-transparent .header-body {
    background-color: rgba(0,0,0,0.35) !important;
}

/* --- OPTION 1 (recommandée) : soulignement animé sous le lien actif --- */
#mainNav .nav-link {
    position: relative;
    padding-bottom: 6px;
}

#mainNav .nav-link::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 0;
    height: 2px;
    background-color: #ffffff;
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

#mainNav li.active .nav-link::after,
#mainNav .nav-link:hover::after {
    width: 70%;
}

/* --- CORRECTIF : les cartes .box-shadow-1 (ex: Téléphone/Email/Adresse
   sur contact.html, et toutes les cartes de soins/tarifs/indications)
   ont un pseudo-élément ::before qui recouvre toute la carte et bloque
   le clic + la sélection du texte (numéro, email...). --- */
.box-shadow-1:before {
    pointer-events: none;
}

/* --- OPTION FINALE : texte blanc + pastille arrondie autour du lien actif,
   comme un badge/bouton (façon "Home" dans l'exemple fourni) --- */
#mainNav li.active .nav-link,
#mainNav li.active .nav-link:hover,
#mainNav li.active .nav-link:focus {
    color: #ffffff !important;
    font-weight: 600;
    background-color: rgba(255,255,255,0.2);
    border-radius: 30px;
    padding: 8px 18px !important;
}

/* on retire le soulignement, la pastille suffit à indiquer l'état actif */
#mainNav li.active .nav-link::after {
    display: none;
}

/* --- OPTION 4 (alternative/complément) : ombre portée sur tous les liens du menu --- */
#mainNav .nav-link {
    text-shadow: 1px 1px 3px rgba(0,0,0,0.7);
}

/* --- OPTION 6 (alternative) : poids et espacement différents pour l'actif --- */
#mainNav li.active .nav-link {
    font-weight: 700;
    letter-spacing: 0.5px;
}

/* ============================================
   CORRECTION BOUTON "DÉCOUVRIR NOS SOINS"
   ============================================ */

.btn-soins {
    background-color: #1F4E5F !important;
    border-color: #1F4E5F !important;
    color: #ffffff !important;
}

.btn-soins:hover,
.btn-soins:focus {
    background-color: #2FA7A0 !important;
    border-color: #2FA7A0 !important;
    color: #ffffff !important;
}

.btn-soins:active {
    background-color: #1F4E5F !important;
    border-color: #1F4E5F !important;
    color: #ffffff !important;
}

/* Couleur du titre Ministère de la Santé Publique */
.ministere-title {
    color: #FFD166 !important;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.8);
}

/* Couleur du mot Crénothérapie dans le Hero */
.crenotherapie-title {
    color: #5EEAD4 !important;
}

/* Descendre le contenu du Hero */
.hero-content-down {
    transform: translateY(100px);
}

/* ============================================
   HERO PAGE CONTACT
   ============================================ */

.contact-hero-content {
    margin-top: 70px !important;
}

/* Couleur du mot "Contacter" */
.contact-title {
    color: #5EEAD4 !important;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
}

/* Animation légèrement plus élégante du mot */
.contact-title {
    position: relative;
}

/* Responsive */
@media (max-width: 991px) {
    .contact-hero-content {
        margin-top: 40px !important;
    }
}

@media (max-width: 575px) {
    .contact-hero-content {
        margin-top: 20px !important;
    }
}

/* Correction des boutons primaires au survol */
.btn-primary,
.btn-primary:visited {
    background-color: #1F4E5F !important;
    border-color: #1F4E5F !important;
    color: #FFFFFF !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: #2FA7A0 !important;
    border-color: #2FA7A0 !important;
    color: #FFFFFF !important;
}

.btn-primary:hover *,
.btn-primary:focus *,
.btn-primary:active * {
    color: #FFFFFF !important;
}

/* ============================================
   BOUTON ACCUEIL - NAVIGATION MOBILE
   ============================================ */

.home-mobile-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 44px;
    padding: 10px 18px !important;
    font-weight: 600;
    color: #FFFFFF !important;
    background-color: #1F4E5F !important;
    border-color: #1F4E5F !important;
    text-decoration: none !important;
    transition: all 0.3s ease;
}

.home-mobile-btn:hover,
.home-mobile-btn:focus,
.home-mobile-btn:active {
    color: #FFFFFF !important;
    background-color: #2FA7A0 !important;
    border-color: #2FA7A0 !important;
}

.home-mobile-btn i {
    color: #FFFFFF !important;
}

/* Adaptation mobile */
@media (max-width: 767px) {
    .home-mobile-btn {
        min-width: 120px;
        font-size: 14px !important;
    }
}

/* =========================================================
   BOUTON ACCUEIL MOBILE
   Position : extrême gauche du header
   ========================================================= */

.mobile-home-btn {
    display: none;
}

@media (max-width: 991px) {

    /* Le header devient le repère du bouton */
    #header .header-container {
        position: relative;
    }

    /* Bouton Home */
    #header .mobile-home-btn {
        display: flex;
        align-items: center;
        justify-content: center;

        position: absolute;
        left: 15px;
        top: 50%;
        transform: translateY(-50%);

        width: 40px;
        height: 40px;

        border-radius: 50%;

        background-color: #1F4E5F;
        border: 1px solid rgba(255,255,255,0.25);

        color: #FFFFFF !important;
        text-decoration: none !important;

        font-size: 16px;

        z-index: 100;

        transition: all 0.3s ease;
    }

    /* Icône */
    #header .mobile-home-btn i {
        color: #FFFFFF !important;
    }

    /* Survol */
    #header .mobile-home-btn:hover,
    #header .mobile-home-btn:focus {
        background-color: #2FA7A0;
        border-color: #2FA7A0;
        color: #FFFFFF !important;
    }

    #header .mobile-home-btn:hover i,
    #header .mobile-home-btn:focus i {
        color: #FFFFFF !important;
    }

    /*
     * On réserve un espace à gauche pour éviter
     * que le logo ou les autres éléments passent
     * sous le bouton Home.
     */
    #header .header-row {
        padding-left: 55px;
    }
}

/* ==========================================================
   BOUTON HOME MOBILE
   ========================================================== */

.mobile-home-button {
    display: none;
}

@media (max-width: 991px) {

    .mobile-home-button {
        display: flex;
        align-items: center;
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        z-index: 1000;
    }

    .btn-home-mobile {
        width: 42px;
        height: 42px;
        padding: 0 !important;

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

        color: #ffffff !important;
        background-color: rgba(255,255,255,0.15) !important;

        border: 1px solid rgba(255,255,255,0.35) !important;
        border-radius: 50% !important;

        font-size: 17px;

        transition: all 0.3s ease;
    }

    .btn-home-mobile:hover,
    .btn-home-mobile:focus {
        color: #ffffff !important;
        background-color: #2FA7A0 !important;
        border-color: #2FA7A0 !important;
    }

    /* Position du hamburger */
    .header-btn-collapse-nav {
        width: 42px;
        height: 42px;
        padding: 0 !important;

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

        color: #ffffff !important;
        background-color: rgba(255,255,255,0.15) !important;

        border: 1px solid rgba(255,255,255,0.35) !important;
        border-radius: 50% !important;

        font-size: 18px;
    }
}

/* Cacher le bouton Home sur ordinateur */
@media (min-width: 992px) {
    .mobile-home-button {
        display: none !important;
    }
}