/* ===================================
   RTL.CSS - SUPPORT ARABE (DROITE À GAUCHE)
   Utiliser ce fichier pour l'arabe et autres langues RTL
   =================================== */

/* ===== DIRECTION GÉNÉRALE ===== */
html[lang="ar"],
html[dir="rtl"] {
    direction: rtl;
    text-align: right;
}

body[dir="rtl"] {
    direction: rtl;
}

/* ===== TEXTE ===== */
p[dir="rtl"],
span[dir="rtl"],
div[dir="rtl"] {
    text-align: right;
}

/* ===== FLEXBOX ET GRID ===== */

/* Inverser la direction flex */
.flex[dir="rtl"],
html[lang="ar"] .flex {
    flex-direction: row-reverse;
}

.flex-row[dir="rtl"],
html[lang="ar"] .flex-row {
    flex-direction: row-reverse;
}

/* Grid inverser */
html[lang="ar"] .grid-2 {
    direction: rtl;
}

html[lang="ar"] .similar-projects-grid {
    direction: rtl;
}

/* ===== MARGINS ET PADDING ===== */

/* Margins */
.ml-auto[dir="rtl"],
html[lang="ar"] .ml-auto {
    margin-left: 0;
    margin-right: auto;
}

.mr-auto[dir="rtl"],
html[lang="ar"] .mr-auto {
    margin-right: 0;
    margin-left: auto;
}

.ms-auto[dir="rtl"],
html[lang="ar"] .ms-auto {
    margin-left: auto;
    margin-right: 0;
}

.me-auto[dir="rtl"],
html[lang="ar"] .me-auto {
    margin-right: auto;
    margin-left: 0;
}

/* Paddings */
.pl-3[dir="rtl"],
html[lang="ar"] .pl-3 {
    padding-left: 0;
    padding-right: 1rem;
}

.pr-3[dir="rtl"],
html[lang="ar"] .pr-3 {
    padding-right: 0;
    padding-left: 1rem;
}

.ps-3[dir="rtl"],
html[lang="ar"] .ps-3 {
    padding-left: 1rem;
    padding-right: 0;
}

.pe-3[dir="rtl"],
html[lang="ar"] .pe-3 {
    padding-right: 1rem;
    padding-left: 0;
}

/* ===== BORDURES ===== */

html[lang="ar"] .border-left {
    border-left: none;
    border-right: 4px solid;
}

html[lang="ar"] .border-right {
    border-right: none;
    border-left: 4px solid;
}

/* ===== FLOAT ===== */

.float-left[dir="rtl"],
html[lang="ar"] .float-left {
    float: right;
}

.float-right[dir="rtl"],
html[lang="ar"] .float-right {
    float: left;
}

/* ===== LISTES ===== */

html[lang="ar"] ul,
html[lang="ar"] ol {
    margin-right: 2rem;
    margin-left: 0;
    padding-right: 2rem;
    padding-left: 0;
}

html[lang="ar"] li {
    text-align: right;
}

/* ===== SIDEBARS ===== */

html[lang="ar"] .sidebar-left {
    left: auto;
    right: 0;
}

html[lang="ar"] .sidebar-right {
    right: auto;
    left: 0;
}

/* ===== ICÔNES ET SVG ===== */

html[lang="ar"] .icon-left {
    margin-left: 0;
    margin-right: 0.5rem;
}

html[lang="ar"] .icon-right {
    margin-right: 0;
    margin-left: 0.5rem;
}

/* Transformer les icônes */
html[lang="ar"] .icon-arrow-left {
    transform: scaleX(-1);
}

html[lang="ar"] .icon-arrow-right {
    transform: scaleX(-1);
}

/* ===== INPUTS ET FORMS ===== */

html[lang="ar"] input,
html[lang="ar"] textarea,
html[lang="ar"] select {
    text-align: right;
    direction: rtl;
}

html[lang="ar"] .form-group label {
    text-align: right;
}

html[lang="ar"] .checkbox,
html[lang="ar"] .radio {
    flex-direction: row-reverse;
}

html[lang="ar"] .form-check-input {
    margin-left: 0;
    margin-right: 0.5rem;
}

/* ===== BOUTONS ===== */

html[lang="ar"] .btn {
    text-align: center;
}

html[lang="ar"] .btn-icon-left {
    flex-direction: row-reverse;
}

/* ===== NAVIGATION ===== */

html[lang="ar"] nav {
    direction: rtl;
    text-align: right;
}

html[lang="ar"] nav ul {
    flex-direction: row-reverse;
}

html[lang="ar"] nav li {
    text-align: right;
}

html[lang="ar"] .navbar-brand {
    margin-left: auto;
    margin-right: 0;
}

/* ===== HEADER ===== */

html[lang="ar"] .header {
    direction: rtl;
}

html[lang="ar"] .logo {
    flex-direction: row-reverse;
}

/* ===== FOOTER ===== */

html[lang="ar"] .footer {
    direction: rtl;
    text-align: right;
}

html[lang="ar"] .footer-column {
    text-align: right;
}

html[lang="ar"] .social-links {
    justify-content: flex-end;
}

/* ===== CARDS ===== */

html[lang="ar"] .card {
    direction: rtl;
    text-align: right;
}

html[lang="ar"] .card-body {
    text-align: right;
}

/* ===== MODALS ===== */

html[lang="ar"] .modal-content {
    direction: rtl;
    text-align: right;
}

html[lang="ar"] .modal-header {
    flex-direction: row-reverse;
}

/* ===== TABLES ===== */

html[lang="ar"] table {
    direction: rtl;
}

html[lang="ar"] th,
html[lang="ar"] td {
    text-align: right;
}

/* ===== BREADCRUMBS ===== */

html[lang="ar"] .breadcrumb {
    flex-direction: row-reverse;
}

html[lang="ar"] .breadcrumb-item::before {
    content: "›";
    margin-left: 0.5rem;
    margin-right: 0;
}

/* ===== PAGINATION ===== */

html[lang="ar"] .pagination {
    flex-direction: row-reverse;
}

/* ===== BADGES ===== */

html[lang="ar"] .badge {
    text-align: right;
}

/* ===== ALERTS ===== */

html[lang="ar"] .alert {
    border-left: none;
    border-right: 4px solid;
    text-align: right;
}

html[lang="ar"] .alert-content {
    text-align: right;
}

/* ===== PROGRESS BAR ===== */

html[lang="ar"] .progress {
    direction: rtl;
}

/* ===== TABS ===== */

html[lang="ar"] .nav-tabs {
    flex-direction: row-reverse;
    border-bottom: 2px solid #e5e7eb;
}

html[lang="ar"] .nav-tabs .nav-link {
    text-align: right;
}

/* ===== TOOLTIPS ===== */

html[lang="ar"] .tooltip-inner {
    text-align: right;
    direction: rtl;
}

/* ===== DROPDOWNS ===== */

html[lang="ar"] .dropdown-menu {
    text-align: right;
    right: 0;
    left: auto;
}

html[lang="ar"] .dropdown-item {
    padding-right: 1.5rem;
    padding-left: 1.5rem;
    text-align: right;
}

/* ===== CAROUSEL ===== */

html[lang="ar"] .carousel-control-prev {
    left: auto;
    right: 0;
}

html[lang="ar"] .carousel-control-next {
    right: auto;
    left: 0;
}

/* ===== TIMELINE ===== */

html[lang="ar"] .timeline-item {
    padding-right: 3rem;
    padding-left: 0;
    text-align: right;
}

html[lang="ar"] .timeline-marker {
    right: -1.5rem;
    left: auto;
}

/* ===== CUSTOM COMPONENTS ===== */

/* Blog */
html[lang="ar"] .project-detail-container {
    flex-direction: row-reverse;
}

html[lang="ar"] .project-sidebar {
    order: -1;
    margin-left: 0;
    margin-right: 2rem;
}

html[lang="ar"] .similar-projects-grid {
    direction: rtl;
}

/* Contact Form */
html[lang="ar"] .form-section {
    text-align: right;
}

html[lang="ar"] .form-section h3 {
    border-left: none;
    border-right: 4px solid;
    padding-left: 0;
    padding-right: 1rem;
    text-align: right;
}

/* ===== ANIMATIONS ===== */

/* Inverser les animations slide */
@keyframes slideInLeft-rtl {
    from {
        opacity: 0;
        transform: translateX(100px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInRight-rtl {
    from {
        opacity: 0;
        transform: translateX(-100px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

html[lang="ar"] .slide-in-left {
    animation: slideInLeft-rtl 0.6s ease;
}

html[lang="ar"] .slide-in-right {
    animation: slideInRight-rtl 0.6s ease;
}

/* ===== MISCELLANEOUS ===== */

/* Quote blocks */
html[lang="ar"] blockquote {
    border-left: none;
    border-right: 4px solid;
    padding-left: 0;
    padding-right: 1rem;
    text-align: right;
}

/* Code blocks */
html[lang="ar"] code,
html[lang="ar"] pre {
    direction: ltr;  /* Garder LTR pour le code */
    text-align: left;
}

/* Images avec texte */
html[lang="ar"] .image-text-wrapper {
    flex-direction: row-reverse;
}

/* Responsive */
@media (max-width: 768px) {
    html[lang="ar"] .project-detail-container {
        flex-direction: column-reverse;
    }
    
    html[lang="ar"] .project-sidebar {
        margin-left: 0;
        margin-right: 0;
        margin-top: 2rem;
        order: 0;
    }
}

/* ===== DÉBOGAGE (À COMMENTER EN PROD) ===== */

/* Afficher les éléments RTL en gras */
/* html[lang="ar"] * { 
    outline: 1px dotted red !important;
} */