/* ==========================================================================
   rtl.css — Adaptation droite-à-gauche (arabe) pour YOUAL Architecture
   Chargé uniquement par les pages du dossier /ar/.
   ========================================================================== */

/* Police arabe globale */
html[dir="rtl"],
html[dir="rtl"] body {
    direction: rtl;
    text-align: right;
    font-family: 'Tajawal', 'Arial', sans-serif;
}

/* Applique Tajawal aux titres / éléments qui utilisent la police latine */
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] h5,
html[dir="rtl"] h6,
html[dir="rtl"] p,
html[dir="rtl"] a,
html[dir="rtl"] span,
html[dir="rtl"] li,
html[dir="rtl"] button,
html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] label,
html[dir="rtl"] div {
    font-family: 'Tajawal', 'Arial', sans-serif;
}

/* Inversion des utilitaires d'alignement Bootstrap */
html[dir="rtl"] .text-start { text-align: right !important; }
html[dir="rtl"] .text-end   { text-align: left  !important; }
html[dir="rtl"] .ms-auto { margin-right: auto !important; margin-left: 0 !important; }
html[dir="rtl"] .me-auto { margin-left: auto !important; margin-right: 0 !important; }
html[dir="rtl"] .ms-1,html[dir="rtl"] .ms-2,html[dir="rtl"] .ms-3,html[dir="rtl"] .ms-4,html[dir="rtl"] .ms-5 { margin-left: 0 !important; }
html[dir="rtl"] .me-1,html[dir="rtl"] .me-2,html[dir="rtl"] .me-3,html[dir="rtl"] .me-4,html[dir="rtl"] .me-5 { margin-right: 0 !important; }
html[dir="rtl"] .float-start { float: right !important; }
html[dir="rtl"] .float-end   { float: left  !important; }

/* Navigation */
html[dir="rtl"] .navbar__list { direction: rtl; text-align: right; }
/* Sous-menus centrés en RTL (identique au comportement LTR) */
html[dir="rtl"] .navbar__dropdown-menu {
    direction: rtl;
    text-align: center !important;
    right: auto !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(10px) !important;
}
html[dir="rtl"] .navbar__dropdown:hover > .navbar__dropdown-menu {
    transform: translateX(-50%) translateY(0) !important;
}
html[dir="rtl"] .navbar__dropdown-menu li a { text-align: center !important; }

/* Listes : retirer le retrait latin */
html[dir="rtl"] ul { padding-right: 0; }

/* Icônes / flèches inline : léger espace inversé */
html[dir="rtl"] .btn-primary i,
html[dir="rtl"] .back-btn i { margin-left: 8px; margin-right: 0; }

/* Formulaire de contact */
html[dir="rtl"] .form-control,
html[dir="rtl"] input,
html[dir="rtl"] textarea { text-align: right; }

/* Fil d'Ariane (breadcrumb) */
html[dir="rtl"] .breadcrumb,
html[dir="rtl"] .breadcrumb-list { direction: rtl; }

/* Footer */
html[dir="rtl"] footer { text-align: right; }



/* ==========================================================================
   Règles RTL officielles du template (adaptées de _rtl-mode.scss)
   Activées par la classe .rtl posée sur .page-wrapper des pages /ar/.
   ========================================================================== */

.rtl {
    direction: rtl;
}

/* Les carrousels Swiper restent en LTR (logique de défilement) */
.rtl .swiper {
    direction: ltr;
}

/* Images : pas d'inversion des photos (les photos restent dans leur sens original) */
.rtl .flip-img {
    scale: 1 1;
}

.rtl .parallax-image-wrap {
    scale: -1 1;
}

.rtl .color-palate .color-palate-inner {
    direction: ltr;
}

/* Sous-menus de navigation : décalage inversé */
.rtl .header .navbar__item--has-children > .navbar__sub-menu {
    transform: translateX(30px) translateY(20px);
}

.rtl .header .navbar__item--has-children:hover > .navbar__sub-menu {
    transform: translateX(30px) translateY(0px);
}

/* Méga-menu (Services / Projets) : recentré en RTL */
.rtl .header .navbar__item--has-children > .navbar__sub-menu.mega-menu {
    transform: translateY(30px) translateX(43.5%) !important;
}

.rtl .header .navbar__item--has-children:hover > .navbar__sub-menu.mega-menu {
    transform: translateX(43.5%) translateY(0px) !important;
}

@media only screen and (min-width: 1400px) {
    .rtl .header .navbar__item--has-children > .navbar__sub-menu.mega-menu {
        transform: translateY(30px) translateX(45%) !important;
    }
    .rtl .header .navbar__item--has-children:hover > .navbar__sub-menu.mega-menu {
        transform: translateX(45%) translateY(0px) !important;
    }
}

/* Menu mobile en LTR (mécanique d'ouverture) */
.rtl .mobile-menu,
.rtl .mobile-menu__backdrop {
    direction: ltr;
}

/* Titres animés : direction RTL pour que YOUAL Architecture s'affiche en début de ligne (à droite) */
.rtl .title-animation,
.rtl .title-animation-lg {
    direction: rtl;
    text-align: right;
}

.rtl .title-animation .split-parent,
.rtl .title-animation-lg .split-parent {
    text-align: right !important;
}

.rtl .text-end.title-animation-lg {
    text-align: start !important;
}

.rtl .text-center.title-animation,
.rtl .text-center .title-animation {
    direction: ltr;
    text-align: center;
}

.rtl .text-center.title-animation .split-parent,
.rtl .text-center .title-animation .split-parent {
    text-align: center !important;
}

.rtl .contact-banner__thumb-wrapper {
    direction: rtl;
}

/* Hero 3 */
.rtl .hero-three__content p {
    margin-inline-start: auto;
    direction: ltr;
    text-align: end;
}

.rtl .hero-three__content h2,
.rtl .hero-three__content h3 {
    text-align: end;
}

.rtl .hero-three__cta {
    direction: rtl;
}

/* Hero 4 */
.rtl .hero-four .title-xxl {
    flex-direction: row-reverse;
}

.rtl .hero-four .ltr-fix {
    direction: ltr;
}

/* Services */
.rtl .service-four-thumb {
    inset-inline-start: 80px;
    inset-inline-end: unset;
}

.rtl .service .service__wrapper {
    direction: ltr;
}

.rtl .service-two {
    direction: ltr;
}

.rtl .service-two .title-animation .split-parent {
    text-align: start !important;
}

.rtl .concept,
.rtl .team {
    direction: ltr;
}

.rtl .concept .title-animation .split-parent,
.rtl .team .title-animation .split-parent {
    text-align: start !important;
}

/* Témoignages */
.rtl .testimonial .swiper-slide {
    text-align: end;
}

.rtl .testimonial .slider-navigation {
    flex-direction: row-reverse;
}

.rtl .testimonial .testimonial__single {
    margin-inline-end: auto !important;
    display: inline-block;
}

/* Projets */
.rtl .project__header {
    direction: ltr;
}

.rtl .project-slider__box {
    margin-inline-start: auto;
}

/* Listes équipe / travaux : décalage des numéros inversé */
.rtl .team-two__lists li i,
.rtl .team-two__lists li .serial {
    transform: translateX(100%);
}

.rtl .team-two__lists li:hover .serial,
.rtl .team-two__lists li:hover i,
.rtl .team-two__lists li.active .serial,
.rtl .team-two__lists li.active i {
    transform: translateX(0px);
}

.rtl .work-two__lists li .serial {
    transform: translateX(100%);
}

.rtl .work-two__lists li:hover .serial,
.rtl .work-two__lists li.active .serial {
    transform: translateX(0px);
}

/* Flèches des liens de service : retournées */
.rtl .service-four__single-right a i {
    scale: -1 1;
}

.rtl .header-two .navbar__sub-menu .navbar__item--has-children::after,
.rtl .header-three .navbar__sub-menu .navbar__item--has-children::after {
    scale: -1 1;
}

@media only screen and (min-width: 1600px) {
    .rtl .hero-three .hero-three-pagination {
        margin-inline: unset;
        margin-inline-end: auto;
        width: unset !important;
    }
}

/* ==========================================================================
   Ajustements spécifiques YOUAL (RTL)
   ========================================================================== */

/* Chiffres romains (I. II. III. …) alignés à droite */
.rtl .text-xl.elicyon,
.rtl p.text-xl.elicyon,
.rtl .process__inner-left-tab-item .text-xl {
    text-align: right;
}

/* Flèches génériques dans les boutons / liens : retournées en RTL */
.rtl .btn-primary i.ph-arrow-right,
.rtl .btn-primary i.ph-arrow-left,
.rtl a i.ph-arrow-right,
.rtl a i.ph-arrow-left {
    scale: -1 1;
}

/* Numéros de téléphone et autres fragments latins : direction LTR */
.rtl [dir="ltr"] {
    direction: ltr;
    unicode-bidi: embed;
    display: inline-block;
}