/* ================================================================= DAR EL OUD ETTOUNSI — surcouche RTL (version arabe) À charger APRÈS style.css sur les pages ================================================================= */ /* L'arabe utilise Amiri partout (Bebas/Inter n'ont pas de glyphes arabes) */ /* Police arabe de marque, pour les titres */ @font-face{ font-family:'Arabswell'; src:url('../assets/fonts/arabswell_1.ttf') format('truetype'); font-display:swap; } html[dir="rtl"] *{font-family:'Amiri',serif !important} html[dir="rtl"] body{line-height:1.85;text-align:right} /* Titres en Arabswell (police arabe de la charte) ; corps reste en Amiri */ html[dir="rtl"] h1,html[dir="rtl"] h2,html[dir="rtl"] h3,html[dir="rtl"] h4, html[dir="rtl"] .card-title,html[dir="rtl"] .num,html[dir="rtl"] .price, html[dir="rtl"] .tarif h3,html[dir="rtl"] .member h3,html[dir="rtl"] .feature-list b, html[dir="rtl"] .event .date .d,html[dir="rtl"] .lesson .no,html[dir="rtl"] .lesson h4, html[dir="rtl"] .hero-ar,html[dir="rtl"] .manifest-ar{ font-family:'Arabswell','Cairo',sans-serif !important;font-weight:normal !important;letter-spacing:normal !important; } html[dir="rtl"] .hero-ar{text-align:right;margin-left:0} html[dir="rtl"] .hero h1{line-height:1.3} /* Majuscules + interlettrage cassent l'écriture arabe → neutralisés */ html[dir="rtl"] .eyebrow,html[dir="rtl"] .cat,html[dir="rtl"] .role,html[dir="rtl"] .lock, html[dir="rtl"] .tag,html[dir="rtl"] .footer-col h4,html[dir="rtl"] .nav a,html[dir="rtl"] .btn, html[dir="rtl"] .nav a.btn-eleve,html[dir="rtl"] .seeall,html[dir="rtl"] .card-sub, html[dir="rtl"] .info-list .k,html[dir="rtl"] .event .cat,html[dir="rtl"] .event .date .m, html[dir="rtl"] .lesson .lock,html[dir="rtl"] .foot-bottom,html[dir="rtl"] .footer-bottom, html[dir="rtl"] .breadcrumb,html[dir="rtl"] .lang,html[dir="rtl"] h5{ letter-spacing:normal !important;text-transform:none !important; } /* HERO : dégradés inversés (texte à droite), image et médaillon basculés */ html[dir="rtl"] .hero::before{ background: linear-gradient(to left, var(--midnight) 8%, rgba(8,31,44,.65) 42%, rgba(8,31,44,0) 78%), linear-gradient(to bottom, rgba(8,31,44,.55) 0%, rgba(8,31,44,0) 30%, rgba(8,31,44,.85) 88%, var(--midnight) 100%); } html[dir="rtl"] .hero-bg img{object-position:left center} html[dir="rtl"] .medaillon{right:auto;left:-60px} html[dir="rtl"] .hero h1{line-height:1.18} /* BANDEAU intérieur : dégradé inversé */ html[dir="rtl"] .page-banner::before{ background: linear-gradient(to left, var(--midnight) 6%, rgba(8,31,44,.55) 48%, rgba(8,31,44,.15) 100%), linear-gradient(to bottom, rgba(8,31,44,.45) 0%, rgba(8,31,44,0) 32%, var(--midnight) 100%); } html[dir="rtl"] .page-banner .bg img{object-position:center 28%} /* Détails directionnels (puces, étiquettes, bordures) */ html[dir="rtl"] .nav a::after{left:auto;right:0} html[dir="rtl"] .tag{left:auto;right:12px} html[dir="rtl"] .feature-list li{padding-left:0;padding-right:28px} html[dir="rtl"] .feature-list li::before{left:auto;right:0} html[dir="rtl"] .tarif li{padding-left:0;padding-right:22px} html[dir="rtl"] .tarif li::before{left:auto;right:0} html[dir="rtl"] .tarif .badge{left:auto;right:28px} html[dir="rtl"] .event .date{border-right:0;border-left:1px solid rgba(250,255,245,.14);padding-right:0;padding-left:22px} html[dir="rtl"] .breadcrumb{letter-spacing:normal}