/* --- 1. VARIABLES ET TITRES --- */
 :root {
    --main-blue: #78d5ef;
    --dark-blue: #34c0e7;
}

/* .page-services .page-services title-blue {
    color: var(--main-blue) !important;
    font-weight: 700;
} */
/* Notez le point avant title-blue pour indiquer que c'est une classe */
.page-services .title-blue {
    color: #78d5ef!important; /* Utilisez votre variable ou le code hex direct */
    font-weight: 600;
}
.page-services .service-title {
    color: var(--main-blue) !important;
    font-weight: 700;
    position: relative;
    margin-bottom: 20px;
    display: inline-block;
}

.page-services .service-title::after {
    content: '';
    display: block;
    width: 50px;
    height: 3px;
    background: var(--main-blue);
    margin-top: 10px;
    transition: width 0.3s ease;
}

.page-services .service-row:hover .service-title::after {
    width: 100%;
}

/* --- 2. PROTECTION DU TEXTE --- */
.page-services .bg-white-protection, .col-md-5 {
    position: relative;
    z-index: 10;
    background-color: #ffffff !important;
    padding: 20px;
}

/* --- 3. CONFIGURATION DU TRAIN --- */
.page-services .train-container {
    width: 100%;
    overflow: hidden;
    position: relative;
    padding: 20px 0;
    background: #f9f9f9;
    border-radius: 15px;
    z-index: 1;
}

.page-services .train-rail {
    display: flex;
    width: max-content;
    animation: scrollTrain 30s linear infinite;
    will-change: transform;
}

.page-services .train-item {
    flex: 0 0 300px;
    height: 350px;
    padding: 0 10px;
}

.page-services .train-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}

.page-services .train-item img:hover {
    transform: scale(1.05);
}

.page-services .train-container:hover .train-rail {
    animation-play-state: paused;
}

@keyframes scrollTrain {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); } 
}

.page-services #railEsthetique  { animation-duration: 40s; }
.page-services #railChirurgie   { animation-duration: 35s; }
.page-services #railImplant     { animation-duration: 25s; }
.page-services #railOdontologie { animation-duration: 60s; }

/* --- 4. IMAGES STATIQUES (Effet Collapse) --- */
.page-services .static-images-wrapper {
    opacity: 1;
    max-height: 800px;
    transition: opacity 0.8s ease-in-out, max-height 0.8s ease-in-out;
    display: flex;
    width: 100%;
}

.page-services .img-wrapper {
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    background: #fff;
    width: 100%;
}

.page-services .img-wrapper img {
    width: 100%;
    height: 280px;
    object-fit: cover;
}

.page-services .collapse.show ~ .static-images-wrapper,
.page-services .collapse.collapsing ~ .static-images-wrapper {
    opacity: 0;
    max-height: 0;
    pointer-events: none;
}

/* --- 5. BOUTONS SPÉCIALITÉS (Esthétique) --- */
.page-services .btn-esthetique {
    background-color: var(--main-blue) !important;
    color: white !important;
    border: 2px solid var(--main-blue) !important;
}

.page-services .btn-esthetique:hover {
    background-color: var(--dark-blue) !important;
}

.page-services .btn-esthetique.active {
    background-color: transparent !important;
    color: var(--main-blue) !important;
}

/* --- 6. BOUTONS CAS CLINIQUES (Inversion au clic) --- */

/* État FERMÉ : Plein */
.page-services .button[aria-expanded="false"].btn-outline-primary {
    background-color: var(--main-blue) !important;
    color: white !important;
    border-color: var(--main-blue) !important;
}

/* État OUVERT : Vide */
.page-services .button[aria-expanded="true"].btn-outline-primary {
    background-color: transparent !important;
    color: var(--main-blue) !important;
    border-color: var(--main-blue) !important;
}

/* --- 7. FOOTER ET AUTRES --- */
/* .ftco-heading-2 {
    color: var(--main-blue) !important;
} */
.page-services .ftco-heading-2 {
    color: #2f89fc !important; /* On force le bleu vif uniquement ici */
    font-weight: 700;
}

.page-services .custom-service-item img {
    filter: invert(48%) sepia(89%) saturate(1800%) hue-rotate(190deg) brightness(100%) contrast(105%);
}

.page-services .service-row {
    padding: 70px 0;
    border-bottom: 1px solid #eee;
}
/* Effet de survol sur les boites de services */
.page-services .custom-service-item {
        transition: all 0.3s ease;
        border: 2px solid transparent !important;
    }

.page-services .custom-service-item:hover {
        background: var(--main-blue) !important; /* Devient bleu clair au survol */
        transform: translateY(-10px); /* Petit saut vers le haut */
        box-shadow: 0 10px 25px rgba(120, 213, 239, 0.3) !important;
    }

    /* Change la couleur du texte et de l'icone au survol */
.page-services .custom-service-item:hover h3, 
.page-services .custom-service-item:hover span {
        color: #fff !important;
    }

    /* Optionnel : légère rotation des images au survol */
.page-services .custom-service-item:hover img {
        filter: brightness(0) invert(1); /* Rend l'image blanche au survol */
        transition: 0.3s;
    }

/* ============================================================
   FIX TRAIN D'IMAGES - VERSION FINALE (RTL)
   ============================================================ */

[dir="rtl"] .page-services .train-container {
    /* On garde le container en RTL pour l'alignement de la page */
    direction: rtl !important; 
    overflow: hidden !important;
}

[dir="rtl"] .page-services .train-rail {
    /* On s'assure que le rail commence bien du bord droit */
    display: flex !important;
    flex-direction: row !important;
    animation: scrollTrainRTL 30s linear infinite !important;
}

[dir="rtl"] .page-services .train-item {
    /* On force l'ordre des images */
    flex-shrink: 0 !important;
}

/* L'animation cruciale : en RTL, pour faire défiler vers la gauche, 
   on doit partir de 0 et aller vers -50% (car le point de référence est déjà à droite) */
@keyframes scrollTrainRTL {
    0% { transform: translateX(0); }
    100% { transform: translateX(50%); } 
}

/* Si les images sautent ou disparaissent, tentez d'inverser le 50% en -50% 
   selon la façon dont le navigateur interprète le point d'origine RTL */

/* --- FIX PAUSE AU SURVOL EN MODE ARABE --- */
[dir="rtl"] .page-services .train-container:hover .train-rail {
    animation-play-state: paused !important;
}


/* ============================================================
   ALIGNEMENT DES TITRES ET CONTENU - MODE ARABE (SERVICES)
   ============================================================ */

/* Aligne le titre principal à droite */
[dir="rtl"] .page-services .service-title {
    text-align: right !important;
    display: block !important; /* Force le titre à prendre toute la largeur pour s'aligner */
}

/* Aligne le trait bleu sous le titre à droite */
[dir="rtl"] .page-services .service-title::after {
    margin-right: 0 !important;
    margin-left: auto !important;
}

/* Aligne le paragraphe de description à droite */
[dir="rtl"] .page-services .service-row p {
    text-align: right !important;
}

/* Aligne le bouton "مشاهدة الحالات السريرية" à droite */
[dir="rtl"] .page-services .service-row .btn,
[dir="rtl"] .page-services .service-row .button {
    margin-right: 0 !important;
    margin-left: auto !important;
    display: inline-flex !important; /* Pour garder l'icône oeil et le texte alignés */
    flex-direction: row-reverse; /* Pour que l'œil soit du bon côté par rapport au texte arabe */
}

/* ============================================================
   FORCE LE CENTRAGE DES SERVICES (ICÔNES + TITRES)
   ============================================================ */

/* 1. On cible la div principale de chaque service */
[dir="rtl"] .custom-service-item {
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}

/* 2. On force le titre H3 à ne pas s'aligner à droite */
[dir="rtl"] .custom-service-item h3 {
    text-align: center !important;
    margin: 15px 0 0 0 !important; /* Espace au dessus du mot */
    width: 100% !important;
    display: block !important;
}

/* 3. On centre le bloc de l'icône (qu'il soit une image ou un span) */
[dir="rtl"] .custom-service-item .icon-box {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    margin-bottom: 0 !important;
}

/* 4. Fix pour les icônes Flaticon (span) */
[dir="rtl"] .custom-service-item .icon-box span {
    margin: 0 auto !important;
}