/* ============================================================ MODE ARABE (RTL) — Riad Ilyan Police Noto Sans Arabic + ajustements droite-à-gauche. IMPORTANT : toutes les règles sont scopées [dir="rtl"] / body.rtl → AUCUN impact sur les langues LTR (fr, en, es, de, ru). i18n.js pose déjà dir="rtl" sur et la classe .rtl sur . ============================================================ */ /* --- Police arabe moderne et lisible sur TOUS les éléments en mode arabe --- */ /* Force Noto Sans Arabic PARTOUT en arabe, indépendamment de la police originale. */ html[dir="rtl"], html[dir="rtl"] * { font-family: 'Noto Sans Arabic', 'Poppins', sans-serif !important; } /* Cas spécifiques (au cas où un élément aurait une spécificité CSS trop élevée) */ html[dir="rtl"] body, 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"] span, html[dir="rtl"] a, html[dir="rtl"] li, html[dir="rtl"] label, html[dir="rtl"] button, html[dir="rtl"] input, html[dir="rtl"] textarea, html[dir="rtl"] .menu-link, html[dir="rtl"] .extrait, html[dir="rtl"] .about, html[dir="rtl"] .rb-title, html[dir="rtl"] .rb-script, html[dir="rtl"] [data-i18n], html[dir="rtl"] .title, html[dir="rtl"] .etab-name, html[dir="rtl"] .info, html[dir="rtl"] .cat-desc { font-family: 'Noto Sans Arabic', 'Poppins', sans-serif !important; } /* --- Bouton « Réserver maintenant » forcé en Noto Sans Arabic (spécificité max) --- */ html[dir="rtl"] .my-app .header .right a { font-family: 'Noto Sans Arabic', 'Poppins', sans-serif !important; } /* --- Graisse REGULAR partout en arabe --- Les polices latines du site utilisent des graisses lourdes (Cormorant 500/600, Poppins/Cinzel bold, 700…). Reportées sur Noto Sans Arabic, elles rendent l'arabe trop gras et lourd. On force le regular (400) sur tout le texte arabe. */ html[dir="rtl"] *, 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"] b, html[dir="rtl"] strong, html[dir="rtl"] .title, html[dir="rtl"] .etab-name, html[dir="rtl"] [data-i18n], html[dir="rtl"] [data-i18n-title] { font-weight: 400 !important; } /* --- Alignement du texte courant à droite en arabe --- */ html[dir="rtl"] .extrait, html[dir="rtl"] .info, html[dir="rtl"] .cat-desc, html[dir="rtl"] form label { text-align: right; } /* --- Les listes/menus suivent le sens RTL --- */ html[dir="rtl"] .lang-list ul, html[dir="rtl"] .devise-list ul { direction: rtl; } /* --- Libellés Équipements / Points d'intérêt : regular en arabe --- */ /* La police latine (Cormorant 500) retombe sur Noto Sans Arabic et paraît grasse ; on force le regular et on retire le letter-spacing qui casse la liaison des lettres. */ html[dir="rtl"] .my-app .equipLand .ctn .first span, html[dir="rtl"] .my-app .equipLand .ctn .second span { font-weight: 400 !important; letter-spacing: 0 !important; } /* ============================================================ MIRRORING LAYOUT (RTL) — éléments position:absolute/fixed qui ne se mirrorent PAS tout seuls avec dir="rtl". (Le gros de la mise en page se mirrore déjà via flexbox + dir.) ============================================================ */ /* Panneaux Langue / Devise : ancrés à GAUCHE en arabe (au lieu de droite). L'état caché initial est translateX(-100%) (hors écran à gauche) ; l'ouverture/fermeture GSAP est rendue directionnelle dans index.js. */ html[dir="rtl"] .lang-list, html[dir="rtl"] .devise-list { right: auto; left: 0; transform: translateX(-100%); } /* Bouton fermer (lignes) des panneaux : à gauche en arabe */ html[dir="rtl"] .lang-list .btn-close-lines, html[dir="rtl"] .devise-list .btn-close-lines { right: auto; left: 5vh; } /* Bouton « Fermer » du menu nav : à droite en arabe */ html[dir="rtl"] nav .btn-close { left: auto; right: 30px; } /* Boutons « retour » ronds des overlays (intro/services/commentaires/contact/carte) : à droite. On miroite aussi l'INTÉRIEUR du bouton : en LTR le cercle-flèche est à gauche du mot (padding-left:90px, ::after left:0, flèche pivotée 180° → pointe à gauche). En arabe le bouton « retour » doit avoir le cercle à DROITE du mot, flèche pointant à droite (sens « retour » en RTL). */ html[dir="rtl"] .btn-close-round { left: auto; right: 5vh; padding-left: 0; padding-right: 90px; } html[dir="rtl"] .btn-close-round::after { left: auto; right: 0; transform: translateY(-50%) rotate(0deg); } /* Icônes sociales de l'accueil : à gauche en arabe */ html[dir="rtl"] .home .social { right: auto; left: 0; } /* Badges de notation (Booking/Google/TripAdvisor) : à DROITE en arabe. En LTR : notes à gauche (left:40px), réseaux sociaux à droite (right:0). Le miroir RTL n'inversait que les réseaux sociaux → les deux blocs se superposaient en bas à gauche. On envoie les notes en bas à droite. */ html[dir="rtl"] .my-app .home .ratings-badges { left: auto; right: 40px; } /* --- En-tête : mot « menu » + langue/devise (décalages physiques LTR à inverser) --- */ /* Le mot « menu » est décalé left:30px en LTR (vers la droite, à côté du burger). En RTL ce même décalage le pousse SOUS le burger → texte coupé + clic menu bloqué. On inverse en right:30px pour le placer proprement à GAUCHE du burger. */ html[dir="rtl"] .my-app .header .left > span { left: auto; right: 30px; } html[dir="rtl"] .my-app .header .left .menu_toggle:hover ~ span { left: auto; right: 27px; } /* Langue / devise : margin-right:30px (physique) ne s'inverse pas seul en RTL, les libellés collent / passent sous le bouton « Réserver ». On bascule à gauche. */ html[dir="rtl"] .my-app .header .right span { margin-right: 0; margin-left: 30px; } /* --- Lien « retour » de l'en-tête (pages satellites : équipements, environs, services, chambres…) --- En LTR ce lien est dans .header .left (à GAUCHE, à côté du burger), décalé via left:30px et flèche/padding à GAUCHE. En arabe, .header .left passe à DROITE (inversion flex) ; le décalage physique left:30px pousse alors « retour » SOUS le burger → superposition (le bouton retour « collé » au menu). On miroite : décalage vers la gauche (loin du burger) + flèche/padding à droite. */ html[dir="rtl"] .my-app .header .left .go-back-home { left: auto; right: 10vw; padding-left: 0; padding-right: 50px; } html[dir="rtl"] .my-app .header .left .go-back-home.btn-retour-home { left: auto !important; right: 30px; padding-left: 0; padding-right: 70px; } html[dir="rtl"] .my-app .header .left .go-back-home::after { left: auto; right: 0; transform: translateY(-50%) scaleX(-1); } /* --- Menu de navigation plein écran (RTL) --- */ /* Liens du menu : ancrés left:10vh en LTR → en RTL ils débordent / sont coupés à droite. On ancre à droite et on aligne le texte à droite (lecture arabe). */ html[dir="rtl"] nav ul { left: auto; right: 10vh; } html[dir="rtl"] nav ul li, html[dir="rtl"] nav ul li a, html[dir="rtl"] nav ul li button { text-align: right; } /* Langue / devise du menu : le bouton « fermer » est déjà passé à droite ; on envoie la langue/devise à GAUCHE → plus de superposition fermer + langue. */ html[dir="rtl"] nav .site-config { right: auto; left: 5vh; } /* --- Popup d'offre (cartes chambres) : la flèche → pointe à GAUCHE en arabe --- */ html[dir="rtl"] .op-room-arrow img { transform: scaleX(-1); } /* ============================================================ TITRES « FILIGRANE » ANIMÉS (gros mot estompé derrière le titre) En LTR le span décoratif est poussé vers la DROITE (translateX positif) pour chevaucher les images/contenu. En RTL ce même décalage l'envoie dans le vide à droite → grande zone blanche. On inverse le signe du X (le Y est conservé) pour qu'il chevauche le contenu côté miroir. GSAP n'anime que le

parent (y/opacité), pas ce → override sûr. ============================================================ / html[dir="rtl"] .my-app .rooms h2 span { transform: translate(-40%, 10%); } html[dir="rtl"] .my-app .services h2 span { transform: translate(-60%, 10%); } html[dir="rtl"] .my-app .gallery h2 span { transform: translate(-40%, 10%); } / ============================================================ RTL RESPONSIVE (tablette / mobile) — miroirs des décalages physiques définis par media_queries.css aux petits écrans. ============================================================ / / Bouton « retour » rond : tailles/positions par palier (miroir de left:4vh + padding-left:70px/60px des blocs <=1600/<=1024). / @media screen and (max-width: 1600px) { html[dir="rtl"] .btn-close-round { right: 4vh; padding: 0 70px 0 0; } } @media screen and (max-width: 1024px) { html[dir="rtl"] .btn-close-round { padding: 0 60px 0 0; } } / « Fermer » du menu : l'espacement des lignes burger est physique (margin-right) → on le bascule à gauche en arabe. / html[dir="rtl"] nav .btn-close .lines { margin-right: 0; margin-left: 30px; } @media screen and (max-width: 768px) { html[dir="rtl"] nav .btn-close .lines { margin-left: 15px; } } / Carte chambre (accueil) : bouton « اعرف المزيد » en miroir — cercle/flèche à GAUCHE du texte, flèche pointant à gauche. (Le design FR a le cercle à droite via padding-right + ::before/ ::after right:0 — décalages physiques non miroités par dir=rtl.) / html[dir="rtl"] .my-app .rooms .rooms-carousel .item .btn-more { padding: 44px 0 44px 80px; } html[dir="rtl"] .my-app .rooms .rooms-carousel .item .btn-more::before, html[dir="rtl"] .my-app .rooms .rooms-carousel .item .btn-more::after { right: auto; left: 0; } html[dir="rtl"] .my-app .rooms .rooms-carousel .item .btn-more::after { transform: translateY(-50%) scaleX(-1); } @media screen and (max-width: 768px) { html[dir="rtl"] .my-app .rooms .rooms-carousel .item .btn-more { padding: 26px 0 26px 64px; } } / Agenda mobile 2 étapes : flèche de la carte dates vers la GAUCHE, chip « Modifier » décalé côté miroir. / @media screen and (max-width: 768px) { html[dir="rtl"] .reservation-block .mb-summary .mb-arrow { transform: scaleX(-1); display: inline-block; } html[dir="rtl"] .reservation-block .mb-summary .mb-edit { margin-left: 0; margin-right: 8px; } } / Agenda mobile : « Retour » à droite en FR → à GAUCHE en arabe */ @media screen and (max-width: 768px) { html[dir="rtl"] .reservation-block .btn-close-lines { right: auto !important; left: 16px !important; } }