/* =============================================================================
   RTL overrides — site public en arabe (chargé uniquement quand <html dir="rtl">).
   Passe générale sur la mise en page et les utilitaires Bootstrap employés par
   le thème. À affiner visuellement si certains blocs restent décalés.
   ========================================================================== */

html[dir="rtl"] body {
    direction: rtl;
    text-align: right;
}

html[dir="rtl"] ul,
html[dir="rtl"] ol {
    padding-right: 0;
}

/* --- Utilitaires d'alignement / marges Bootstrap ------------------------- */
html[dir="rtl"] .text-start { text-align: right !important; }
html[dir="rtl"] .text-end { text-align: left !important; }
html[dir="rtl"] .me-1 { margin-right: 0 !important; margin-left: .25rem !important; }
html[dir="rtl"] .me-2 { margin-right: 0 !important; margin-left: .5rem !important; }
html[dir="rtl"] .me-3 { margin-right: 0 !important; margin-left: 1rem !important; }
html[dir="rtl"] .me-xl-3 { margin-right: 0 !important; margin-left: 1rem !important; }
html[dir="rtl"] .ms-1 { margin-left: 0 !important; margin-right: .25rem !important; }
html[dir="rtl"] .ms-2 { margin-left: 0 !important; margin-right: .5rem !important; }
html[dir="rtl"] .ms-3 { margin-left: 0 !important; margin-right: 1rem !important; }
html[dir="rtl"] .ms-auto { margin-left: 0 !important; margin-right: auto !important; }
html[dir="rtl"] .me-auto { margin-right: 0 !important; margin-left: auto !important; }
html[dir="rtl"] .float-start { float: right !important; }
html[dir="rtl"] .float-end { float: left !important; }

/* --- Flexbox : on inverse l'axe principal des rangées ------------------- */
/* (on épargne la grille Bootstrap `.row` et la barre supérieure, qui suivent
   nativement `direction: rtl`). */
html[dir="rtl"] .d-flex:not(.flex-column):not(.flex-column-reverse):not(.row):not([class*="it-header-top"]) {
    flex-direction: row-reverse;
}
html[dir="rtl"] .justify-content-start { justify-content: flex-end !important; }
html[dir="rtl"] .justify-content-end { justify-content: flex-start !important; }

/* --- Barre supérieure : rendue à l'identique en LTR et en RTL --------------
   Le sélecteur de langue y est ancré tout à droite ; la barre ne doit donc
   pas se miroiter (téléphone / e-mail toujours à gauche, réseaux + langue
   toujours à droite), quel que soit le sens de lecture. */
html[dir="rtl"] .it-header-top-area,
html[dir="rtl"] .it-header-top-area * { direction: ltr; }
html[dir="rtl"] .it-header-top-area .d-flex:not(.flex-column) { flex-direction: row !important; }
html[dir="rtl"] .it-header-top-contact-wrap.justify-content-sm-start { justify-content: flex-start !important; }
html[dir="rtl"] .it-header-top-right-action { justify-content: flex-end !important; }

/* Téléphone / e-mail : données toujours LTR — on isole du contexte RTL pour
   éviter que le « + » ou les groupes de chiffres soient réordonnés. */
html[dir="rtl"] a[href^="tel:"],
html[dir="rtl"] a[href^="mailto:"] {
    direction: ltr;
    unicode-bidi: isolate;
}

/* --- En-tête principal ------------------------------------------------ */
/* Barre d'actions en arabe : bouton « اتصل بنا » au ras du bord gauche. */
html[dir="rtl"] .it-header-right-action {
    direction: rtl;
    flex-direction: row !important;
    justify-content: flex-end !important;
    /* Le thème applique un margin-left négatif (hack LTR) qui fait déborder le
       bouton à gauche en arabe : on le neutralise. */
    margin-left: 0 !important;
}
html[dir="rtl"] .it-header-right-action > .it-header-bar { order: 3; }
html[dir="rtl"] .it-menu-content > ul > li { text-align: right; }
html[dir="rtl"] .it-btn-yellow i { margin-left: 0; margin-right: 10px; }
html[dir="rtl"] .it-btn-yellow i svg { transform: scaleX(-1); }
html[dir="rtl"] .it-menu-content ul li ul.it-submenu { left: auto; right: 0; text-align: right; }

/* --- Offcanvas : glisse depuis la gauche en RTL --------------------- */
html[dir="rtl"] .itoffcanvas {
    right: auto;
    left: 0;
    transform: translateX(-100%);
}
html[dir="rtl"] .itoffcanvas.info-open,
html[dir="rtl"] .itoffcanvas.opened { transform: translateX(0); }
html[dir="rtl"] .itoffcanvas__close-btn { right: auto; left: 20px; }
/* Bloc coordonnées : icône à droite, libellé + valeur à gauche, alignés à droite.
   (La règle générale d.flex -> row-reverse ré-inverse le sens RTL : on force row.) */
html[dir="rtl"] .it-info-wrapper { flex-direction: row !important; }
html[dir="rtl"] .itoffcanvas__info-icon a { margin-right: 0; margin-left: 20px; }
html[dir="rtl"] .itoffcanvas__info-address { text-align: right; }
html[dir="rtl"] .itoffcanvas__info-address a,
html[dir="rtl"] .itoffcanvas__info-address span { direction: ltr; unicode-bidi: plaintext; }
html[dir="rtl"] .itoffcanvas__info-address a { overflow-wrap: anywhere; }

/* --- Fil d'Ariane -------------------------------------------------- */
html[dir="rtl"] .breadcrumb-item + .breadcrumb-item { padding-right: .5rem; padding-left: 0; }
html[dir="rtl"] .breadcrumb-item + .breadcrumb-item::before { padding-right: 0; padding-left: .5rem; float: right; }

/* --- Cartes formations / articles -------------------------------- */
html[dir="rtl"] .postbox__meta { flex-direction: row-reverse; }
html[dir="rtl"] .it-course-content,
html[dir="rtl"] .postbox__content { text-align: right; }

/* Méta (diplôme + durée) : tout collé à droite en arabe. Aucun séparateur
   au bord droit ; un seul trait, entre diplôme et durée, avec de l'espace
   de chaque côté. Icône à droite du texte. */
html[dir="rtl"] .it-course-meta {
    flex-direction: row !important;
    justify-content: flex-start;
}
html[dir="rtl"] .it-course-meta span svg,
html[dir="rtl"] .it-course-meta span i { margin-right: 0 !important; margin-left: 6px !important; }
html[dir="rtl"] .it-course-style-2 .it-course-meta span:first-child,
html[dir="rtl"] .it-course-meta span:first-child {
    padding-right: 0 !important;
    border-right: 0 !important;
    padding-left: 18px !important;
    margin-left: 18px !important;
    border-left: 1px solid var(--it-text-body) !important;
}

/* --- Pied de page ---------------------------------------------- */
html[dir="rtl"] .it-footer-widget,
html[dir="rtl"] .it-footer-col { text-align: right; }
html[dir="rtl"] .it-footer-widget ul li a { padding-left: 0; padding-right: 18px; }
html[dir="rtl"] .it-footer-widget ul li a::before { left: auto; right: 0; }
/* Réseaux sociaux : espacement mis en miroir (le thème pose margin-right sur
   :not(:last-child), ce qui colle les 2 dernières icônes en RTL). */
html[dir="rtl"] .it-footer-widget-social a:not(:last-child) { margin-right: 0; margin-left: 18px; }

/* --- Formulaires --------------------------------------------- */
html[dir="rtl"] .form-control,
html[dir="rtl"] .form-select,
html[dir="rtl"] textarea { text-align: right; }

/* --- Bouton retour en haut ------------------------------------- */
html[dir="rtl"] .scroll-top { right: auto; left: 30px; }

/* --- Trait de soulignement décoratif sous le mot mis en avant -------
   En arabe le mot est à droite : on ancre la forme à droite et on la
   retourne horizontalement. */
html[dir="rtl"] .it-section-title span.it-title-shape {
    left: auto;
    right: -3%;
    transform: scaleX(-1);
}
html[dir="rtl"] .it-section-title span.it-title-shape-2 {
    right: auto;
    left: 3%;
    transform: scaleX(-1);
}
html[dir="rtl"] .it-breadcrumb-title:not(.style-2) .title-shape {
    left: auto;
    right: -0.5%;
    transform: scaleX(-1);
}

/* --- Hero accueil : l'image ne doit pas recouvrir le texte -----------
   Le thème décale la colonne image vers la droite (translateX positif) ;
   en arabe la colonne image est à gauche → on décale vers la gauche. */
html[dir="rtl"] .it-hero-thumb { transform: translateX(-80px); }
@media only screen and (min-width: 1600px) and (max-width: 1800px) {
    html[dir="rtl"] .it-hero-thumb { transform: translateX(0); }
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
    html[dir="rtl"] .it-hero-thumb { transform: translateX(40px); }
}
@media only screen and (max-width: 1399px) {
    html[dir="rtl"] .it-hero-thumb { transform: translateX(0); }
}
/* Badges « expérience » flottants : miroir horizontal */
html[dir="rtl"] .it-hero-experience-box { left: auto; right: -31%; }
html[dir="rtl"] .it-hero-experience-box.experience-box-style-2 { right: auto; left: -18%; }
@media only screen and (min-width: 768px) and (max-width: 991px) {
    html[dir="rtl"] .it-hero-experience-box { left: auto; right: 0; }
}
@media only screen and (max-width: 767px) {
    html[dir="rtl"] .it-hero-experience-box { left: auto; right: -6%; }
}

/* --- Bloc CTA « e-mail / téléphone » -------------------------------
   En arabe la colonne e-mail passe à droite : on décale le séparateur
   « أو » vers la gauche pour laisser plus de place à l'adresse e-mail,
   et on rapproche la colonne téléphone du séparateur. */
html[dir="rtl"] .it-cta-wrap .separator { left: 47%; }
html[dir="rtl"] .it-cta-content span svg { margin-right: 0; margin-left: 10px; }
html[dir="rtl"] .it-cta-wrap .d-flex.justify-content-md-end {
    flex-direction: row !important;
    justify-content: flex-end !important;   /* = bord gauche en RTL, loin du séparateur */
}

/* --- FAQ (arabe) : question alignée à droite, bascule +/- à gauche --- */
html[dir="rtl"] .it-custom-accordion .accordion-buttons {
    text-align: right;
    padding-left: 65px;
    padding-right: 30px;
}
html[dir="rtl"] .it-custom-accordion .accordion-buttons::after { right: auto; left: 30px; }
html[dir="rtl"] .it-custom-accordion .accordion-body { text-align: right; }

/* --- Blog (arabe) : icône avant le texte, séparateur entre les 2 méta --- */
html[dir="rtl"] .it-blog-meta { text-align: right; }
html[dir="rtl"] .it-blog-meta span { padding-left: 0; padding-right: 28px; }
html[dir="rtl"] .it-blog-meta span svg { left: auto; right: 0; }
html[dir="rtl"] .it-blog-meta span:not(:last-child) {
    padding-right: 28px;   /* garde l'espace pour l'icône */
    margin-right: 0;
    border-right: none;
    padding-left: 20px;
    margin-left: 20px;
    border-left: 1px solid var(--it-theme-1);
}
html[dir="rtl"] .postbox-details-wrapper .it-blog-meta span:not(:last-child) {
    margin-right: 0;
    margin-left: 35px;
    border-left: none;
}

/* --- Page détail formation (arabe) --------------------------------- */
/* Description : texte à droite. */
html[dir="rtl"] .postbox-dsc { text-align: right; }
/* Listes « compétences » / « débouchés » : icône avant le texte (à droite). */
html[dir="rtl"] .it-details-list ul li span {
    padding-left: 0;
    padding-right: 30px;
    text-align: right;
}
html[dir="rtl"] .it-details-list ul li span svg { left: auto; right: 0; }
html[dir="rtl"] .it-details-list.style-2 { margin-left: 0; margin-right: -11px; }
/* Diplôme / durée : le séparateur passe du bord droit à l'entre-deux. */
html[dir="rtl"] .it-breadcrumb-author-info { text-align: right; }
html[dir="rtl"] .it-breadcrumb-author-wrapper .border-style {
    padding-right: 0;
    margin-right: 0;
    border-right: none;
    padding-left: 30px;
    margin-left: 30px;
    border-left: 1px solid rgba(255, 255, 255, 0.3);
}

/* --- Listes « check » (À propos / Pourquoi nous choisir) : puce à droite --- */
html[dir="rtl"] .it-about-list-box ul li span {
    padding-left: 0;
    padding-right: 47px;
    text-align: right;
}
html[dir="rtl"] .it-about-list-box ul li span svg,
html[dir="rtl"] .it-about-list-box ul li span i {
    left: auto;
    right: 0;
}
@media only screen and (max-width: 1399px) {
    html[dir="rtl"] .it-about-list-box ul li span { padding-left: 0; padding-right: 40px; }
}

/* --- Formes décoratives « À propos » : miroir horizontal ------------ */
html[dir="rtl"] .it-about-shape-1 { left: auto; right: -5%; }
html[dir="rtl"] .it-about-shape-2 { right: auto; left: 0; }

/* --- Forme décorative section formations (accueil) ----------------- */
html[dir="rtl"] .it-course-shape-1 { right: auto; left: 20%; }

/* --- Témoignages : contenu et bloc « nom + fonction » alignés à droite --- */
html[dir="rtl"] .it-testimonial-content {
    text-align: right;
    margin-right: 0;
    margin-left: 30px;
    transform: translateX(24px);
}
html[dir="rtl"] .it-testimonial-thumb { margin-right: 0; margin-left: 20px; }
html[dir="rtl"] .it-testimonial-bottom { flex-direction: row !important; }
html[dir="rtl"] .it-testimonial-avatar-info { text-align: right; }

/* --- Forme décorative section témoignages -------------------------- */
html[dir="rtl"] .it-testimonial-shape-2 { left: auto; right: 1%; }
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
    html[dir="rtl"] .it-testimonial-shape-2 { left: auto; right: -2%; }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    html[dir="rtl"] .it-testimonial-shape-2 { left: auto; right: -4%; }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    html[dir="rtl"] .it-testimonial-shape-2 { left: auto; right: -9%; }
}

/* --- Formes décoratives du hero (accueil) : miroir horizontal ------- */
html[dir="rtl"] .it-hero-shape-2 { left: auto; right: -5%; }
html[dir="rtl"] .it-hero-shape-3 { left: auto; right: 2.5%; }
html[dir="rtl"] .it-hero-shape-4 { right: auto; left: 3.5%; }
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    html[dir="rtl"] .it-hero-shape-2 { left: auto; right: -10%; }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    html[dir="rtl"] .it-hero-shape-2 { left: auto; right: -15%; }
}

/* --- Page contact (arabe) ------------------------------------------- */
/* En RTL le flex de .it-contact-list li place déjà l'icône à droite et
   le texte à gauche : le margin-right du thème se retrouve du mauvais
   côté (contre le bord). On le retire et on ajoute l'écart à gauche,
   entre l'icône et la valeur. */
/* Le thème met margin-right: 75px sur la colonne (écart entre les 2
   colonnes) : en RTL cet écart doit passer à gauche. */
html[dir="rtl"] .it-contact-3-left {
    margin-right: 0;
    margin-left: 75px;
}
@media (max-width: 1199px) {
    html[dir="rtl"] .it-contact-3-left { margin-left: 0; }
}
html[dir="rtl"] .it-contact-3-style-2 .it-contact-list ul,
html[dir="rtl"] .it-contact-3-area .it-contact-list ul {
    padding-right: 0;
    margin-right: 0;
}
/* On colle le bloc coordonnées au bord droit */
html[dir="rtl"] .it-contact-3-style-2 .it-contact-list ul li {
    justify-content: flex-start;
}
html[dir="rtl"] .it-contact-3-style-2 .it-contact-list ul li span {
    margin-right: 0;
    margin-left: 25px;
}
html[dir="rtl"] .it-contact-3-style-2 .it-contact-list ul li a { text-align: right; }
html[dir="rtl"] .it-contact-3-left > span,
html[dir="rtl"] .it-contact-3-style-2 .it-contact-list > span { display: block; text-align: right; }
/* Icônes réseaux sociaux : espacement mis en miroir */
html[dir="rtl"] .it-contact-3-area .it-contact-social a:not(:last-child) {
    margin-right: 0;
    margin-left: 30px;
}