/* ===========================================================================
   ORIENT DC — arabe : sens de lecture inversé et typographie
   ---------------------------------------------------------------------------
   Chargée par inc/enqueue.php UNIQUEMENT sur les pages en arabe. Les visiteurs
   francophones et anglophones ne téléchargent pas un octet de ce fichier.

   CE QUI N'EST PAS ICI, ET POURQUOI
   L'essentiel du miroir n'a rien coûté : `main.css` a été récrit en propriétés
   logiques (`inset-inline-start`, `padding-inline-end`, `border-inline-start`,
   `margin-inline-start`). Le navigateur les retourne seul sous `dir="rtl"`.
   Ne restent donc ici que les trois catégories qu'aucune propriété logique ne
   couvre :

     1. les `transform: translateX()`, qui sont des pixels, pas un flux ;
     2. les décors absolus posés en pourcentage hors du cadre (halos, balayages) ;
     3. la typographie arabe, qui n'est pas une affaire de direction.

   Sommaire
     R1. Typographie arabe
     R2. Déplacements au survol
     R3. Apparitions au défilement
     R4. Décors et halos
     R5. Ajustements ponctuels
   =========================================================================== */

/* == R1. Typographie arabe ================================================= */

/*
 * Une seule famille pour le corps ET les titres.
 *
 * Le latin oppose Inter (texte) à Sora (titres). L'arabe n'a pas besoin de ce
 * contraste : la graisse suffit à hiérarchiser, et Cairo couvre 200 à 1000 sur
 * un seul fichier de 30 Ko. Charger deux familles arabes aurait doublé le coût
 * pour un gain que l'écriture arabe ne rend pas — ses formes liées portent déjà
 * une texture que deux polices latines doivent fabriquer.
 */
:root {
	--font-arabic: 'Cairo var', 'Noto Sans Arabic', 'Geeza Pro', 'Segoe UI', Tahoma, sans-serif;
	--font-body: var(--font-arabic);
	--font-display: var(--font-arabic);
}

/*
 * L'INTERLETTRAGE EST REMIS À ZÉRO PARTOUT.
 *
 * C'est la règle la plus importante de ce fichier. En écriture arabe, les
 * lettres d'un mot sont liées entre elles : un `letter-spacing` positif brise
 * ces liaisons et rend le mot illisible — l'équivalent d'écrire « b o n j o u r »
 * en latin, mais en cassant en plus le dessin des lettres. Le thème en pose sur
 * les sur-titres, les boutons et les numéros de carte ; tout est neutralisé.
 */
.odc-rtl,
.odc-rtl * {
	letter-spacing: normal !important;
	font-feature-settings: normal;
}

/*
 * L'arabe n'a ni majuscules ni bas de casse.
 *
 * `text-transform: uppercase`, posé sur les sur-titres et le sous-titre du logo,
 * n'a aucun effet visible sur des caractères arabes — mais il s'applique bel et
 * bien aux mots latins mêlés au texte (« CAD/CAM », « 3D »), qu'il déforme sans
 * raison. On le coupe.
 */
.odc-rtl .odc-eyebrow,
.odc-rtl .odc-logo__sub,
.odc-rtl .odc-card__badge,
.odc-rtl .odc-btn { text-transform: none; }

/*
 * Hauteur de ligne et taille.
 *
 * Les hampes et les signes diacritiques de l'arabe occupent plus de hauteur que
 * les ascendantes latines : à interligne égal, le texte paraît compressé. Et à
 * taille de police égale, l'œil arabe est plus petit que celui d'Inter, donc le
 * texte paraît plus fin. On remonte les deux, légèrement.
 */
.odc-rtl body { line-height: 1.85; }
.odc-rtl { --fs-body: clamp(1.02rem, .99rem + .18vw, 1.11rem); }

.odc-rtl h1, .odc-rtl h2, .odc-rtl h3,
.odc-rtl .odc-h2, .odc-rtl .odc-hero__title { line-height: 1.35; }

.odc-rtl .odc-prose p,
.odc-rtl .odc-prose li,
.odc-rtl .odc-faq__a p { line-height: 1.95; }

/*
 * Les nombres, les numéros et le latin gardent Inter.
 *
 * Cairo dessine bien les chiffres, mais un numéro de téléphone, une heure ou un
 * sigle (CAD/CAM, 3D, ICE) au milieu d'une phrase arabe se lit de gauche à
 * droite : lui laisser la police du site latin le rend cohérent avec les deux
 * autres langues, et évite le sautillement de chasse d'un chiffre à l'autre.
 */
.odc-rtl .odc-fact__value,
.odc-rtl .odc-card__num,
.odc-rtl .odc-404__code,
.odc-rtl .odc-info__tel,
.odc-rtl .odc-footer__tel,
.odc-rtl .odc-hours dd,
.odc-rtl .odc-logo__name {
	font-family: 'Inter var', var(--font-arabic);
	font-variant-numeric: lining-nums tabular-nums;
	direction: ltr;
}

/* Un numéro isolé dans une cellule doit rester collé au bord de début. */
.odc-rtl .odc-info__tel,
.odc-rtl .odc-footer__tel { text-align: right; }

/*
 * Le mot latin de la marque ne se retourne pas.
 *
 * « OrientDC » reste « OrientDC » : `unicode-bidi: isolate` empêche l'algorithme
 * bidirectionnel d'aller chercher la ponctuation arabe voisine et de la coller
 * du mauvais côté du mot.
 */
.odc-rtl .odc-logo__type,
.odc-rtl .odc-card__badge {
	direction: ltr;
	unicode-bidi: isolate;
}

/* == R2. Déplacements au survol ============================================ */

/*
 * Une flèche « en avant » pointe vers la gauche en arabe.
 *
 * L'icône elle-même est retournée (R5) ; il reste à inverser le déplacement,
 * sinon la flèche pointe à gauche mais glisse à droite — le mouvement contredit
 * le signe, et l'affordance se perd.
 */
.odc-rtl .odc-btn:hover .odc-btn__icon { transform: translateX(-4px); }
.odc-rtl .odc-card:hover .odc-card__arrow { transform: translateX(-3px) scale(1.06); }
.odc-rtl .odc-related__card:hover > svg:last-child { transform: translateX(-4px); }
.odc-rtl .odc-footer__list a:hover { transform: translateX(-3px); }
.odc-rtl .odc-prev__item:hover { transform: translateX(-5px); }
.odc-rtl .odc-fab__item:hover .odc-fab__tip { transform: translateX(-6px); }

/* Balayage lumineux des boutons : il doit entrer par le bord de début. */
.odc-rtl .odc-btn::after { left: auto; right: -120%; }
.odc-rtl .odc-btn:hover::after { left: auto; right: 130%; }
.odc-rtl .odc-shine::after { transform: translateX(0) skewX(18deg); }
.odc-rtl .odc-shine:hover::after { transform: translateX(-370%) skewX(18deg); }

/* == R3. Apparitions au défilement ========================================= */

/*
 * `data-reveal="left"` désigne un côté d'écran, pas un côté de texte.
 *
 * Le gabarit pose « left » sur la colonne d'image et « right » sur la colonne de
 * texte. En arabe, ces colonnes ont échangé de place : conserver les mêmes
 * décalages ferait entrer chaque bloc depuis le côté opposé au sien, en le
 * faisant traverser toute la grille.
 */
.odc-rtl [data-reveal='left']  { transform: translateX(34px); }
.odc-rtl [data-reveal='right'] { transform: translateX(-34px); }
.odc-rtl [data-reveal].is-in   { transform: none; }

/* == R4. Décors et halos =================================================== */

/*
 * Purement visuel, mais pas facultatif : les halos sont calés sur le vide de
 * chaque composition. Laissés en place, ils viennent éclairer le texte au lieu
 * de la marge, et le contraste tombe là où il compte.
 */
.odc-rtl .odc-hero .odc-glow--a { left: auto; right: -8%; }
.odc-rtl .odc-hero .odc-glow--b { right: auto; left: -10%; }
.odc-rtl .odc-tech .odc-glow--a { right: auto; left: -12%; }
.odc-rtl .odc-tech .odc-glow--b { left: auto; right: -14%; }
.odc-rtl .odc-info .odc-glow--a { right: auto; left: -25%; }

/* Halo des en-têtes de page intérieure, posé en style en ligne dans le
   gabarit : seul un sélecteur d'attribut peut le reprendre. */
.odc-rtl .odc-page-hero [style*='right:-8%'] { right: auto !important; left: -8%; }
.odc-rtl .odc-page-hero [style*='right:-10%'] { right: auto !important; left: -10%; }

/* == R5. Ajustements ponctuels ============================================= */

/*
 * Les icônes directionnelles se retournent, les autres surtout pas.
 *
 * Une flèche, un chevron de fil d'Ariane et le curseur de défilement indiquent
 * un sens de lecture. Une dent, un bouclier, un cœur ou une horloge n'en
 * indiquent aucun : les retourner produirait des pictogrammes en miroir, et une
 * horloge dont les aiguilles tournent à l'envers.
 */
.odc-rtl .odc-btn__icon svg,
.odc-rtl .odc-card__arrow svg,
.odc-rtl .odc-related__card > svg:last-child,
.odc-rtl .odc-crumbs svg { transform: scaleX(-1); }

/* Le chevron d'un accordéon et celui du menu tournent sur l'axe vertical :
   ils annoncent « déplier », pas « avancer ». Ils ne se retournent pas. */
.odc-rtl .odc-faq__chevron svg,
.odc-rtl .odc-nav__caret svg,
.odc-rtl .odc-facts__cue svg { transform: none; }

/*
 * Le séparateur du fil d'Ariane.
 *
 * La barre oblique « / » est un caractère neutre pour l'algorithme bidi : entre
 * deux mots arabes, elle se place correctement d'elle-même. Rien à faire, mais
 * il fallait le vérifier plutôt que le supposer — c'est le genre de détail qui
 * ne se voit qu'une fois la page rendue.
 */

/*
 * Le voile du hero est un dégradé à 100° : il assombrit le côté du texte et
 * laisse voir la photographie de l'autre. En arabe le texte a changé de côté,
 * le dégradé doit suivre. On retourne l'ANGLE, pas l'élément : un
 * `transform: scaleX(-1)` sur le voile aurait aussi retourné tout ce qu'il
 * contient, et il couvre le hero entier.
 */
.odc-rtl .odc-hero__scrim {
	background:
		linear-gradient(260deg, rgba(4, 7, 15, .96) 0%, rgba(4, 7, 15, .84) 34%, rgba(6, 12, 26, .52) 62%, rgba(8, 18, 40, .58) 100%),
		linear-gradient(to top, var(--ink-900) 2%, transparent 42%);
}

/* La ligne de balayage de l'image « technologie » part du bord de début. */
.odc-rtl .odc-tech__scan { animation-direction: reverse; }

/*
 * PAS DE RÈGLE POUR LE PANNEAU MOBILE, NI POUR LA BARRE DE PROGRESSION.
 *
 * Les deux sont en `position: fixed`, donc hors d'atteinte de tout découpage
 * par un ancêtre. Une première version leur appliquait un `transform` de
 * miroir : le panneau, en `inset: 0`, s'est retrouvé déporté d'une largeur de
 * fenêtre entière hors du cadre, et la barre a perdu son `scaleX(var(--p))` —
 * qui EST son mécanisme de remplissage. Résultat : 1 440 px de débord
 * défilable, la page décalée et le titre du hero coupé.
 *
 * Ni l'un ni l'autre n'avait besoin d'être retourné : le panneau apparaît en
 * fondu sur place (`opacity` + `visibility`), et la barre se contente de
 * changer d'origine de transformation, ci-dessous.
 */
.odc-rtl .odc-progress { transform-origin: 100% 50%; }

/*
 * Le formulaire.
 * `dir` est hérité du document : les champs, les libellés et les messages
 * d'erreur se placent seuls. Seule l'adresse e-mail garde un sens latin — la
 * saisir en RTL placerait le curseur du mauvais côté du @.
 */
.odc-rtl input[type='email'],
.odc-rtl input[type='tel'],
.odc-rtl input[type='url'] { direction: ltr; text-align: right; }

/* La liste déroulante de motif : la flèche native se place seule, mais le
   remplissage réservé à l'icône doit passer de l'autre côté. */
.odc-rtl .odc-field select { background-position: left .8rem center; }