/* Alignement global du bloc logo */
.base .footer-brand-container {
    margin-left: -12px; /* Décalage à gauche demandé */
    margin-bottom: 15px;
}

/* Image du logo sans fond noir */
.base .footer-logo-img {
    height: 32px; 
    width: auto;
    margin-right: 12px;
    mix-blend-mode: screen; 
    filter: brightness(1.2);
    display: block;
}

/* Groupe de texte sur une seule ligne */
.base .footer-text-group {
    line-height: 1;
    white-space: nowrap;
}

/* Style DentalCare : 18px, weight 500 */
.base .brand-name {
    font-size: 18px !important;
    font-weight: 500 !important;
    color: #ffffff !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-family: 'Poppins', sans-serif; /* Assure la même police que le haut */
}

.base .brand-name .care-blue {
    color: #2f89fc !important;
}

/* Style Dentiste à Djerba : Harmonisé avec DentalCare */
.base  .footer-subtitle {
    font-size: 18px !important; /* Même taille pour l'harmonie */
    font-weight: 500 !important; /* Même poids */
    color: #ffffff !important;
    margin-left: 8px;
    font-family: 'Poppins', sans-serif;
    opacity: 0.9; /* Très léger retrait visuel pour laisser l'emphase sur le nom */
}

/* Supprime le carré noir et harmonise les couleurs */
.base  .footer-logo-fix img {
    background: transparent !important;
    /* Ce filtre rend le noir transparent s'il est sur un fond sombre */
    mix-blend-mode: screen; 
}

.base  .footer-logo-fix span {
    /* Supprime les ombres bizarres du footer qui changent la couleur du texte */
    text-shadow: none !important;
    opacity: 1 !important;
}

/* Optionnel : si le bleu du bas paraît différent du haut */
.base .footer-logo-fix span:last-child {
    color: #2f89fc !important; /* Le bleu exact de ton haut de page */
}

/* Evite que le logo change de couleur au survol */
.base .logo-footer:hover .logo-text {
    color: #ffffff !important;
}
/* Réduit l'espace vertical entre les deux lignes */
.base .compact-phone {
    margin-bottom: -5px !important; /* Réduit l'espace sous la ligne */
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Réduit l'espace horizontal entre l'icône et le texte */
.base .compact-phone .icon {
    margin-right: 2px !important; /* L'icône est presque collée au texte */
    font-size: 16px; /* Taille de l'icône */
}

.base .compact-phone a {
    display: flex;
    align-items: center;
    line-height: 1.2; /* Réduit la hauteur de la ligne */
}
/* --- PROTECTION GLOBALE DES IMAGES DE FOND --- */

/* Cible toutes les sections qui utilisent Stellar (parallaxe) */
.base [data-stellar-background-ratio] {
    background-size: cover !important;
    background-position: center center !important;
    /* On force l'affichage de base avant que le script ne démarre */
    display: block;
    opacity: 1 !important;
}

/* Stabilise l'image sur les bannières de haut de page (hero-wrap) */
.base .hero-wrap, .ftco-counter {
    background-attachment: fixed !important;
}

/* Désactive le parallaxe sur mobile pour éviter les bugs d'affichage blanc */
@media (max-width: 768px) {
    .hero-wrap, .ftco-counter, [data-stellar-background-ratio] {
        background-attachment: scroll !important;
        background-position: center center !important;
    }
}
/* Empêche l'image de la bannière de contact de disparaître */
.base .bread-item {
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    /* Force l'affichage même pendant le calcul du parallaxe */
    display: block !important;
    opacity: 1 !important;
}

/* Sur mobile, le parallaxe crée souvent un décalage blanc, on le stabilise ici */
@media (max-width: 768px) {
    .bread-item {
        background-attachment: scroll !important;
        background-position: center center !important;
    }
}

/* Défilement fluide pour toute la page */
.base html {
  scroll-behavior: smooth;
}
/* --- RÉSEAUX SOCIAUX : COULEURS MATES CLAIRES --- */

.base .ftco-social-top li a, .ftco-footer-social li a {
    height: 32px; width: 32px;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    color: #fff !important;
    margin-left: 5px;
    transition: all 0.4s ease;
    background: transparent;
}

/* ============================================================
   RÉSEAUX SOCIAUX : FIXATION DES COULEURS ET EFFET ZOOM
   ============================================================ */

/* 1. État de base (Cibles : Top-bar et Footer) */
.base .ftco-social-top li a, 
.base .ftco-footer-social li a {
    height: 35px !important;
    width: 35px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    transition: transform 0.3s ease-in-out !important;
    border: none !important;
    text-decoration: none !important;
}

/* 2. Couleurs Fixes (Normal ET Hover) */

/* Facebook : Bleu */
.base  .ftco-social-top li a[href*="facebook"], 
.base  .ftco-footer-social li a[href*="facebook"],
.base .ftco-social-top li a[href*="facebook"]:hover, 
.base .ftco-footer-social li a[href*="facebook"]:hover {
    background: #3b5998 !important;
    color: #ffffff !important;
}

/* Instagram : Dégradé */
.base .ftco-social-top li a[href*="instagram"], 
.base .ftco-footer-social li a[href*="instagram"],
.base .ftco-social-top li a[href*="instagram"]:hover, 
.base .ftco-footer-social li a[href*="instagram"]:hover {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc23b8 75%, #bc1888 100%) !important;
    color: #ffffff !important;
}

/* Google / RDV Médical : Fond Blanc + Icône Multicolore */
.base .ftco-social-top li a[href*="lerdvmedical"], 
.base .ftco-social-top li a[href*="google"],
.base .ftco-footer-social li a[href*="lerdvmedical"],
.base .ftco-footer-social li a[href*="google"],
.base .ftco-social-top li a[href*="lerdvmedical"]:hover, 
.base .ftco-social-top li a[href*="google"]:hover,
.base .ftco-footer-social li a[href*="lerdvmedical"]:hover,
.base .ftco-footer-social li a[href*="google"]:hover {
    background: #ffffff !important;
    border: 1px solid #f0f0f0 !important;
}

/* 3. L'icône Multicolore de Google (Garde les 4 couleurs même au hover) */
.base .ftco-social-top li a[href*="google"] span,
.base .ftco-footer-social li a[href*="google"] span,
.base .ftco-social-top li a[href*="lerdvmedical"] span,
.base .ftco-footer-social li a[href*="lerdvmedical"] span {
    background: conic-gradient(#ff8b82 0deg 90deg, #82b1ff 90deg 180deg, #98d3aa 180deg 270deg, #ffd582 270deg 360deg) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    font-weight: bold;
}

/* 4. Effet de survol (Zoom uniquement) */
.base .ftco-social-top li a:hover, 
.base .ftco-footer-social li a:hover {
    transform: scale(1.2) !important;
}

/* 5. Suppression des anciens styles qui créaient le bug du bleu/noir */
.base .ftco-social-top li a:hover {
    border-color: transparent !important; /* Annule l'ancien bleu du thème */
}

.base [id] {
  scroll-margin-top: 120px;
}
/* 1. TOP BAR : FIXE ET NOIRE */
.base .top-bar {
    position: fixed !important;
    top: 0;
    width: 100%;
    z-index: 1100 !important;
    background: #032121 !important;
    height: 45px;
}

.base .top-bar .row { flex-wrap: nowrap !important; width: 100%; }

.base .top-bar .icon-wrapper {
    color:#2f89fc !important;
    /* color: #20c997 !important; Vert turquoise par défaut */
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 8px;
    margin: -12px 0;
}

.base .top-bar .icon-wrapper:hover {
    color: #2f89fc !important; /* Bleu au survol */
    transform: scale(1.2);
}

.base .top-bar .contact-text {
    color: #fff !important;
    font-size: 14px;
    font-weight: 500;
    margin-left: 4px;
}

/* 2. NAVBAR : NOIRE ET FIXE */
.base #ftco-navbar {
    position: fixed !important;
    top: 45px !important;
    width: 100%;
    z-index: 1000 !important;
    background: #000000 !important; /* NOIR COMME DEMANDÉ */
    box-shadow: 0 2px 10px rgba(0,0,0,0.5);
}

/* 3. COULEURS DES LIENS ET HOVER VERT */
.base #ftco-navbar .navbar-brand { color: #fff !important; }
.base #ftco-navbar .navbar-brand span { color: #2f89fc; } 


.base #ftco-navbar .nav-link {
    color: #ffffff !important;
    transition: 0.3s;
}

.base #ftco-navbar .nav-link:hover {
    
    color: #2f89fc !important; /* HOVER VERT TURQUOISE */
}

/* Réseaux Sociaux */
.base .ftco-social-top li a {
    height: 32px; width: 32px;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    color: #fff !important;
    margin-left: 5px;
}

.base .ftco-social-top li a:hover {
    background: #2f89fc;
    border-color: #2f89fc;
}

/* .btn-lang-visible {
    background-color: #20c997;


    color: #032121 !important; 
    border: none;
    border-radius: 20px;
    padding: 2px 12px;
    font-weight: 700;
    font-size: 11px;
    cursor: pointer;
} */
/* 1. Le bouton arrondi (Reste VERT) */
.base .btn-lang-visible {
    background-color: #2f89fc !important; /* Fond VERT */
    color: #032121 !important;           /* Texte en blanc pour la lisibilité */
    border: none;
    border-radius: 20px;
    padding: 2px 12px;
    font-weight: 700;
    font-size: 11px;
    cursor: pointer;
  
}

/* 2. L'intérieur de la liste quand elle s'ouvre (Fond BLANC et texte BLEU) */
.base .btn-lang-visible option {
    background-color: #ffffff !important; /* Fond de la liste en BLANC */
    color: #2f89fc !important;           /* Texte de la liste en BLEU */
}
/* Espace pour ne pas cacher le haut du site */
/* .base body { padding-top: 105px !important; } */
body.base { padding-top: 105px !important; }

/* Supprime les sauts du thème */
.base .ftco-navbar-light.scrolled {
    top: 0 !important;
    position: fixed !important;
    background: #000000 !important;
}
.base .ftco-heading-2{
    color: #2f89fc !important;
    opacity: 1 !important;
}

/* 1. TEXTE ET TITRES (Sauf ce qui doit rester centré) */
[dir="rtl"] .base h1, 
[dir="rtl"] .base h2, 
[dir="rtl"] .base h3, 
[dir="rtl"] .base p, 
[dir="rtl"] .base .ftco-heading-2 {
    text-align: right !important;
}

/* 2. PRÉSERVER LE CENTRE (Empêche les DIV du milieu de bouger) */
[dir="rtl"] .base .text-center, 
[dir="rtl"] .base .text-center h2, 
[dir="rtl"] .base .text-center p,
[dir="rtl"] .base .justify-content-center {
    text-align: center !important;
    justify-content: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* 3. RÉSEAUX SOCIAUX (Fixe les icônes Facebook décalées) */
[dir="rtl"] .base .ftco-footer-social li, 
[dir="rtl"] .base .ftco-social-top li {
    display: inline-block !important;
    float: none !important;
    margin: 0 4px !important;
}

[dir="rtl"] .base .ftco-footer-social li a, 
[dir="rtl"] .base .ftco-social-top li a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* 4. FOOTER (Réparer le logo et l'alignement) */
[dir="rtl"] .base .footer-brand-container {
    display: flex !important;
    flex-direction: row !important; /* Garde logo à gauche du texte si désiré */
    justify-content: flex-start !important;
    text-align: right !important;
}

[dir="rtl"] .base .ftco-footer {
    text-align: right !important;
}

[dir="rtl"] .base .ftco-footer .ftco-footer-widget ul li a {
    padding-right: 20px !important;
    padding-left: 0 !important;
    position: relative;
}

/* 5. NUMÉROS DE TÉLÉPHONE (Fixe l'ordre +216) */
[dir="rtl"] .base a[href^="tel"], 
[dir="rtl"] .base .contact-text {
    direction: ltr !important;
    display: inline-block !important;
    unicode-bidi: embed;
}

/* 6. SERVICES (Le losange bleu et le texte) */
[dir="rtl"] .base .services-2 {
    text-align: right !important;
    position: relative;
    padding-right: 70px !important; /* Espace pour l'icône */
    padding-left: 0 !important;
}

[dir="rtl"] .base .services-2 .icon {
    position: absolute !important;
    right: 0 !important;
    left: auto !important;
    top: 5px;
}

/* 7. HERO / PHOTO DU HAUT */
[dir="rtl"] .base .hero-wrap .slider-text {
    text-align: right !important;
}

/* Aligne le bouton du Hero à droite en Arabe */
[dir="rtl"] .base .hero-wrap .btn {
    margin-right: 0 !important;
}

/* ============================================================
   CODE GÉNÉRAL RTL (BASE.CSS) - POUR TOUT LE SITE
   ============================================================ */

/* 1. RÉTABLIR TOUTES LES IMAGES (Slider, Hero, Sections) */
[dir="rtl"] .hero-wrap, 
[dir="rtl"] .slider-item, 
[dir="rtl"] .img, 
[dir="rtl"] .ftco-counter, 
[dir="rtl"] [style*="background-image"] {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    background-position: center center !important;
    background-size: cover !important;
    transform: none !important; /* Annule les bugs du JavaScript parallaxe */
}

/* 2. FIX POUR LE SLIDER (S'applique partout où il y a un slider) */
[dir="rtl"] .owl-carousel {
    direction: ltr !important; /* Moteur du slider en LTR pour voir les photos */
}

[dir="rtl"] .slider-text {
    direction: rtl !important;
    text-align: right !important;
    transform: none !important;
}

/* 3. ALIGNEMENT DES TEXTES GÉNÉRAUX */
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] p, [dir="rtl"] .text {
    text-align: right !important;
}

/* 4. INVERSION DES COLONNES (Image à droite, Texte à gauche) */
[dir="rtl"] .row {
    flex-direction: row-reverse !important;
}

/* 5. PRÉSERVER LE CENTRE (Ne pas inverser ce qui doit rester au milieu) */
[dir="rtl"] .text-center, 
[dir="rtl"] .justify-content-center {
    text-align: center !important;
    justify-content: center !important;
    flex-direction: row !important; 
}

/* 6. RÉSEAUX SOCIAUX ET LOGO */
[dir="rtl"] .navbar-brand,
[dir="rtl"] .ftco-footer-social li {
    display: inline-flex !important;
    flex-direction: row-reverse !important;
}

/* 7. FIX POUR LES NUMÉROS (Contact et Top Bar) */
[dir="rtl"] a[href^="tel"], 
[dir="rtl"] .phone-number, 
[dir="rtl"] .contact-text {
    direction: ltr !important;
    display: inline-block !important;
    unicode-bidi: embed;
}

/* --- ESPACEMENT FINAL TOP-BAR ARABE --- */

[dir="rtl"] .top-bar .lang-selector {
    /* Cet 'auto' va pousser la langue et les réseaux sociaux vers la gauche, 
       les séparant ainsi du bloc (Tel/Adresse/Horaire) qui reste à droite */
    margin-right: auto !important; 
    margin-left: 40px !important; /* Espace entre la langue et les icônes */
    display: flex;
    align-items: center;
}

[dir="rtl"] .top-bar .ftco-social-top {
    /* Colle les icônes à l'extrême gauche du container */
    margin-left: 0 !important;
}

/* Ajuste l'espace entre le téléphone, l'adresse et l'horaire */
[dir="rtl"] .top-bar .mr-4 {
    margin-right: 0 !important;
    margin-left: 35px !important; /* Augmente l'espace entre les 3 blocs d'info */
}

/* ============================================================
   TOP-BAR ARABE : RÉDUIRE L'ESPACE ENTRE HORAIRES ET LANGUE
   ============================================================ */

/* On garde la structure qui marche pour l'ordre */
[dir="rtl"] .top-bar .row {
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
}

[dir="rtl"] .top-bar .row > div {
    display: contents !important; 
}

/* --- ORDRE ET ESPACEMENT --- */

/* 1. Téléphone */
[dir="rtl"] .top-bar .row > div:first-child div:nth-child(1) { 
    order: 1 !important; 
    margin-left: 30px !important; 
}

/* 2. Emplacement */
[dir="rtl"] .top-bar .row > div:first-child div:nth-child(2) { 
    order: 2 !important; 
    margin-left: 30px !important; 
}

/* 3. Horaires */
[dir="rtl"] .top-bar .row > div:first-child div:nth-child(3) { 
    order: 3 !important; 
    /* REMPLACÉ : on enlève 'auto' pour mettre un espace fixe */
    margin-left: 60px !important; 
}

/* 4. Choix de la Langue */
[dir="rtl"] .top-bar .lang-selector { 
    order: 4 !important; 
    margin-left: 60px !important; 
    margin-right: 0 !important;
}

/* 5. Réseaux Sociaux */
[dir="rtl"] .top-bar .ftco-social-top { 
    order: 5 !important; 
    margin: 0 !important;
}

/* --- FIX VISUELS --- */
[dir="rtl"] .top-bar .icon-wrapper {
    margin-left: 8px !important;
}

[dir="rtl"] .top-bar .contact-text {
    white-space: nowrap !important;
}


/* ============================================================
   FOOTER ARABE : ALIGNEMENT VERTICAL DES ICÔNES À DROITE
   ============================================================ */

/* 1. On prépare le conteneur pour chaque ligne */
[dir="rtl"] .ftco-footer-widget .block-23 ul li {
    position: relative !important;
    padding-right: 45px !important; /* Espace réservé pour l'icône à droite */
    text-align: right !important;
    display: block !important;
    margin-bottom: 15px !important;
}

/* 2. On force TOUTES les icônes à se mettre au même endroit à droite */
[dir="rtl"] .ftco-footer-widget .block-23 ul li .icon,
[dir="rtl"] .ftco-footer-widget .block-23 ul li span:first-child,
[dir="rtl"] .ftco-footer-widget .block-23 ul li span.icon {
    position: absolute !important;
    right: 0 !important; /* TOUTES les icônes collées au bord droit */
    top: 5px !important;
    width: 30px !important;
    text-align: center !important;
    margin: 0 !important;
}

/* 3. Ajustement du texte (Adresse, Tel, Email) */
[dir="rtl"] .ftco-footer-widget .block-23 ul li .text {
    display: block !important;
    direction: ltr !important; /* Garde le format +216 correct */
    unicode-bidi: embed;
    text-align: right !important; /* Mais aligne le bloc à droite */
}

/* 4. Aligner "تصفح الموقع" et ses liens */
[dir="rtl"] .ftco-footer-widget h2.ftco-heading-2 {
    text-align: right !important;
    margin-right: 0 !important;
}

[dir="rtl"] .ftco-footer-widget ul.list-unstyled {
    text-align: right !important;
    padding-right: 0 !important;
}
/* ============================================================
   FIX FOOTER ARABE : ALIGNEMENT STRICT SANS FUSION
   ============================================================ */

/* 1. On prépare la ligne pour accueillir l'icône à droite */
[dir="rtl"] .ftco-footer-widget .block-23 ul li {
    position: relative !important;
    display: block !important;
    text-align: right !important;
    padding-right: 40px !important; /* Espace pour l'icône */
    padding-left: 0 !important;
    margin-bottom: 15px !important;
}

/* 2. On cible l'icône, qu'elle soit seule ou dans un lien <a> */
[dir="rtl"] .ftco-footer-widget .block-23 ul li .icon,
[dir="rtl"] .ftco-footer-widget .block-23 ul li a .icon {
    position: absolute !important;
    right: 0 !important; /* Fixé à l'extrême droite */
    top: 50% !important;
    transform: translateY(-50%) !important; /* Centrage vertical parfait */
    width: 30px !important;
    text-align: center !important;
    margin: 0 !important;
    display: inline-block !important;
}

/* 3. On gère le texte pour qu'il reste à gauche de l'icône */
[dir="rtl"] .ftco-footer-widget .block-23 ul li .text,
[dir="rtl"] .ftco-footer-widget .block-23 ul li a .text {
    display: block !important;
    text-align: right !important;
    padding-right: 10px !important; /* Espace entre le début du texte et l'icône */
    direction: ltr !important; /* Garde le +216 correct */
    unicode-bidi: embed;
}

/* 4. On s'assure que le lien <a> ne casse pas tout */
[dir="rtl"] .ftco-footer-widget .block-23 ul li a {
    display: block !important;
    width: 100% !important;
    color: inherit !important;
}

/* 5. Aligner les réseaux sociaux (Facebook/Instagram) à droite aussi */
[dir="rtl"] .ftco-footer-social {
    float: right !important;
    text-align: right !important;
    width: 100%;
    padding: 0;
}

[dir="rtl"] .ftco-footer-social li {
    float: right !important;
    margin-left: 10px !important;
    margin-right: 0 !important;
}
/* ============================================================
   AJUSTEMENT VISUEL : NAVIGATION AU CENTRE EXACT (ARABE)
   ============================================================ */

/* Cibler la liste dans la colonne du milieu */
[dir="rtl"] .col-md-4:nth-child(2) ul.list-unstyled {
    display: inline-block !important;
    text-align: center !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* On décale chaque lien légèrement vers la droite pour l'équilibre */
[dir="rtl"] .col-md-4:nth-child(2) ul.list-unstyled li {
    text-align: center !important;
    /* On ajoute un décalage vers la droite */
    padding-right: 25px !important; 
}

/* On s'assure que le titre suit le même mouvement si besoin */
[dir="rtl"] .col-md-4:nth-child(2) .ftco-heading-2 {
    text-align: center !important;
    padding-right: 45px !important;
    margin-bottom: 20px !important;
}

/* --- LE BLOC HEADER FUSIONNÉ --- */
.base-header-fixed {
    position: fixed !important;
    top: 0;
    width: 100%;
    z-index: 2000;
    background: #000;
}

/* On s'assure que la top-bar est flexible en hauteur */
.base .top-bar {
    position: relative !important;
    height: auto !important;
    background: #032121 !important;
    padding: 8px 0 !important;
}

.base #ftco-navbar {
    position: relative !important;
    top: 0 !important;
}

/* --- AJUSTEMENT DU BODY --- */
/* Sur PC (Plein écran) */
body.base {
    padding-top: 115px !important; 
}

/* Sur Mobile (Header plus haut car 2 lignes) */
@media (max-width: 991px) {
    body.base {
        padding-top: 145px !important; 
    }
    
    /* On réduit un peu la taille des icônes pour qu'elles soient jolies sur mobile */
    .base .ftco-social-top li a {
        font-size: 14px;
        margin-left: 10px !important;
    }
}