/* 7ISSABI — accueil : RTL (arabe) et ajustements */
html.i18n-rtl {
    direction: rtl;
}

html.i18n-rtl .top-navbar,
html.i18n-rtl .navbar-top-row,
html.i18n-rtl .features-navbar {
    direction: rtl;
}

/* Ne pas forcer row-reverse sur .feature-section partout : sur mobile ça écrase flex-direction:column et casse la page */
html.i18n-rtl .nav-btn,
html.i18n-rtl .modal-header,
html.i18n-rtl .login-form-sidebar .form-group-sidebar label {
    flex-direction: row-reverse;
    text-align: right;
}

html.i18n-rtl .nav-btn {
    justify-content: flex-start;
}

html.i18n-rtl .modal-header h2 {
    flex-direction: row-reverse;
    text-align: right;
}

html.i18n-rtl .modal-body ul,
html.i18n-rtl .feature-section-content p,
html.i18n-rtl .description,
html.i18n-rtl .tagline {
    text-align: right;
}

html.i18n-rtl .feature-section h3,
html.i18n-rtl .modal-body h3 {
    flex-direction: row-reverse;
    justify-content: flex-end;
}

/* Desktop seulement : miroir texte | image */
@media (min-width: 1025px) {
    html.i18n-rtl .feature-section {
        flex-direction: row-reverse;
    }
}

html.i18n-rtl .index-sidebar {
    right: auto;
    left: 0;
    border-left: none;
    border-right: 1px solid #e5e7eb;
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.1);
}

/*
 * Desktop RTL : le panneau est à gauche (left:0). Le masquage LTR utilise translateX(100%)
 * (sortie vers la droite). En RTL il faut translateX(-100%), sinon le panneau « ouvert »
 * reste décalé au milieu et chevauche le hero (bande vide à gauche).
 */
@media (min-width: 1025px) {
    html.i18n-rtl .index-sidebar.hidden {
        transform: translateX(-100%) translateZ(0);
    }
}

html.i18n-rtl .hero:not(.sidebar-hidden) {
    padding-right: 0;
    padding-left: 380px;
}

html.i18n-rtl .hero.sidebar-hidden {
    padding-left: 0;
}

html.i18n-rtl .password-toggle-btn {
    right: auto;
    left: 0.75rem;
}

html.i18n-rtl .password-input-wrapper input {
    padding-right: 0.75rem;
    padding-left: 3rem;
}

html.i18n-rtl .checkbox-label-sidebar,
html.i18n-rtl .sidebar-header h2 {
    flex-direction: row-reverse;
}

html.i18n-rtl .lang-switcher select {
    direction: rtl;
}

/* Formulaire inscription : grille + sens RTL (évite row-reverse inutile sur grid) */
html.i18n-rtl .registration-form,
html.i18n-rtl .form-row-registration {
    direction: rtl;
}

html.i18n-rtl .login-form-sidebar {
    direction: rtl;
}

html.i18n-rtl .feature-article h1,
html.i18n-rtl .feature-article,
html.i18n-rtl .feature-lead,
html.i18n-rtl .feature-section p,
html.i18n-rtl .cloud-callout p,
html.i18n-rtl .feature-about-text {
    text-align: right;
}

html.i18n-rtl .feature-section h2,
html.i18n-rtl .cloud-callout h2,
html.i18n-rtl .feature-list-title {
    text-align: right;
}

/* Kabyle / FR : LTR */
html:not(.i18n-rtl) .lang-switcher select {
    direction: ltr;
}

.lang-switcher {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
}

.lang-switcher label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.lang-switcher select {
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    padding: 0.35rem 0.5rem;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    background: #f9fafb;
    color: #374151;
    cursor: pointer;
    max-width: 7.5rem;
}

.lang-switcher select:focus {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

/* ——— Mobile & tablette (≤1024px) : RTL sans casser colonnes / pleine largeur ——— */
@media (max-width: 1024px) {
    html.i18n-rtl .hero:not(.sidebar-hidden) {
        padding-left: 0;
        padding-right: 0;
    }

    /* Sections fonctionnalités = colonne comme en FR */
    html.i18n-rtl .feature-section {
        flex-direction: column !important;
        align-items: stretch;
    }

    html.i18n-rtl .feature-section h3 {
        flex-direction: row-reverse;
        justify-content: flex-end;
        text-align: right;
    }

    html.i18n-rtl .feature-section-image {
        align-self: stretch;
        max-width: 100%;
    }

    /* Stats : ligne + wrap, pas d’inversion de flex qui casse le centrage */
    html.i18n-rtl .stats {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }

    /* Modale connexion plein écran : overlay identique LTR / RTL */
    html.i18n-rtl .index-sidebar {
        left: 0;
        right: 0;
        border-left: none;
        border-right: none;
        box-shadow: none;
    }

    html.i18n-rtl .login-modal-close {
        right: auto;
        left: 0.5rem;
    }

    /* Menu plein écran : colonne stable */
    html.i18n-rtl .top-navbar.nav-open .features-navbar {
        direction: rtl;
        align-items: stretch;
    }

    html.i18n-rtl .nav-btn {
        flex-direction: row-reverse;
        justify-content: flex-start;
        text-align: right;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Modale : en-tête qui wrap sans déborder */
    html.i18n-rtl .modal-header {
        flex-wrap: wrap;
        align-items: flex-start;
    }

    html.i18n-rtl .modal-content {
        box-sizing: border-box;
        max-width: 100%;
    }

    html.i18n-rtl .modal.active {
        padding-left: max(0.75rem, env(safe-area-inset-left, 0px));
        padding-right: max(0.75rem, env(safe-area-inset-right, 0px));
    }

    /* Ligne haute navbar : éviter débordement horizontal */
    html.i18n-rtl .top-navbar {
        overflow-x: hidden;
    }

    html.i18n-rtl .navbar-top-row {
        min-width: 0;
    }

    /* CTA / titres centrés conservent un rendu lisible */
    html.i18n-rtl .registration-section {
        text-align: center;
    }

    html.i18n-rtl .registration-section .registration-form {
        text-align: right;
    }
}