/* ========================================================================== Surcharges arabes — chargées uniquement par /ar/, après styles.css. Trois règles gouvernent ce fichier : 1. Amiri remplace Newsreader, IBM Plex Sans Arabic remplace IBM Plex Sans. Les tailles montent légèrement et l'interlignage beaucoup (titres 1,25 à 1,4 ; texte 1,8 à 1,95) : l'arabe a des hampes et des points diacritiques au-dessus comme au-dessous de la ligne. 2. Jamais de `letter-spacing` ni de `font-style: italic` sur de l'arabe. Les lettres sont liées : les espacer rompt les ligatures, et l'arabe n'a pas d'italique. Chaque règle ci-dessous remet donc explicitement `letter-spacing: normal` — le raccourci `font` ne le réinitialise pas. 3. Les séquences latines (numéro, « art. 14bis RSTP », « LinkedIn », « 2008–13 ») restent en IBM Plex Mono, en `direction: ltr` isolée. Le sens d'écriture lui-même vient de `dir="rtl"` sur , pas d'ici : toutes les propriétés de la feuille commune sont déjà logiques (`padding-inline-start`, `inset-inline-end`, `border-inline-start`). ========================================================================== */ :root { --serif: Amiri, Georgia, serif; --sans: "IBM Plex Sans Arabic", "IBM Plex Sans", sans-serif; } body { font-family: var(--sans); } /* --- En-tête ------------------------------------------------------------ */ .brand { gap: 4px; } .brand__name { font: 400 clamp(16px, 1.6vw, 21px)/1.1 var(--serif); letter-spacing: normal; } /* La signature de métier reste en anglais et en latin. */ .brand__role { direction: ltr; unicode-bidi: isolate; } .site-nav { column-gap: clamp(14px, 1.8vw, 26px); font: 400 14px/1.3 var(--sans); } .lang { direction: ltr; unicode-bidi: isolate; } .btn--dark { font: 500 13px/1 var(--sans); letter-spacing: normal; } .section-nav__inner { font: 400 14px/1.6 var(--sans); } /* --- Titres de section -------------------------------------------------- */ .section-title { font: 400 clamp(26px, 3.6vw, 44px)/1.3 var(--serif); letter-spacing: normal; } .section-lead { font: 400 14.5px/1.85 var(--sans); } /* Références d'articles : latin, monospace, isolées du contexte arabe. */ .ref { direction: ltr; unicode-bidi: isolate; } /* --- Hero --------------------------------------------------------------- */ .hero__eyebrow { font: 400 13px/1.8 var(--sans); letter-spacing: normal; text-transform: none; color: rgba(19, 21, 24, .55); } .hero__title { font: 400 clamp(34px, 5.6vw, 68px)/1.25 var(--serif); letter-spacing: normal; } /* La troisième ligne n'hérite que la couleur : pas d'italique en arabe. */ .hero__accent { font-style: normal; } .hero__lead { max-width: 54ch; font: 400 clamp(15.5px, 1.25vw, 17.5px)/1.85 var(--sans); } .btn--primary { font: 500 14.5px/1.4 var(--sans); } .btn--ghost { direction: ltr; unicode-bidi: isolate; letter-spacing: normal; } .hero__note { font: 400 13px/1.8 var(--sans); color: rgba(19, 21, 24, .55); } .forums__label { font: 500 12px/1 var(--sans); letter-spacing: normal; text-transform: none; color: rgba(19, 21, 24, .5); } .forums__name { font: 400 clamp(18px, 1.7vw, 22px)/1.4 var(--serif); letter-spacing: normal; } .forums__where { font: 400 13px/1.8 var(--sans); } .forums__foot { font: 400 12.5px/1.9 var(--sans); color: rgba(19, 21, 24, .55); } /* --- Bandeau de crédibilité --------------------------------------------- Les quatre chiffres n'ont pas le même traitement en arabe : « 2015 » reste un nombre latin en monospace, les trois autres sont du texte arabe, dont un plus long qui descend à 22 px. Le ciblage est positionnel plutôt que par classe pour que le HTML des trois langues reste identique. */ .band__figure { font: 500 24px/1.2 var(--sans); letter-spacing: normal; } .band__item:first-child .band__figure { font: 500 26px/1 var(--mono); direction: ltr; unicode-bidi: isolate; text-align: start; } .band__item:nth-child(2) .band__figure { font-size: 22px; } .band__caption { font: 400 13px/1.7 var(--sans); } /* --- 01 · Ce que je fais ------------------------------------------------ */ .service__kicker { /* 18 px et non 20 : l'accroche arabe est plus haute, la maquette resserre. */ margin-bottom: 18px; font: 500 12px/1 var(--sans); letter-spacing: normal; text-transform: none; color: var(--accent); } .service__title { font: 400 clamp(19px, 1.8vw, 24px)/1.4 var(--serif); letter-spacing: normal; } .service__body { font: 400 14.5px/1.85 var(--sans); } /* --- 02 · Domaines d'intervention --------------------------------------- */ .practice__num { font: 500 11px/1.8 var(--mono); } .practice__title { font: 500 clamp(16.5px, 1.45vw, 19px)/1.6 var(--sans); letter-spacing: normal; } .practice__desc { font: 400 14px/1.85 var(--sans); } /* --- 03 · Guide --------------------------------------------------------- */ .guide__kicker { font: 500 12px/1 var(--sans); letter-spacing: normal; text-transform: none; color: var(--accent-light); } .guide__title { max-width: 26ch; font: 400 clamp(27px, 4vw, 50px)/1.3 var(--serif); letter-spacing: normal; } .guide__lead { max-width: 62ch; font: 400 clamp(14.5px, 1.2vw, 16.5px)/1.9 var(--sans); } .steps4__title { font: 500 16px/1.6 var(--sans); } .steps4__body { font: 400 13.5px/1.85 var(--sans); } .checklist__label { font: 500 12px/1 var(--sans); letter-spacing: normal; text-transform: none; color: var(--accent-light); } .checklist__intro { font: 400 14px/1.9 var(--sans); } .checklist__items li { font: 400 14px/1.75 var(--sans); } .checklist__items li::before { font: 400 13px/1.9 var(--mono); } .btn--invert { font: 500 14.5px/1.4 var(--sans); } .guide__note { font: 400 13px/1.8 var(--sans); color: rgba(242, 239, 233, .55); } /* --- 04 · Comment se déroule un dossier --------------------------------- */ .step__title { font: 500 16px/1.6 var(--sans); } .step__body { font: 400 13.5px/1.85 var(--sans); } /* --- 05 · Les délais ---------------------------------------------------- Les chiffres passent en monospace et non en serif : Amiri ne dessine pas les chiffres arabes occidentaux dans le même esprit que Newsreader, le monospace tient mieux la colonne. */ .stat__figure { font: 400 clamp(30px, 3.4vw, 44px)/1 var(--mono); letter-spacing: normal; } .stat__label { font: 500 14px/1.6 var(--sans); } .stat__caption { font: 400 12.5px/1.8 var(--sans); } .ref--plain { direction: ltr; unicode-bidi: isolate; } .stats__note { max-width: 80ch; font: 400 12.5px/1.9 var(--sans); color: rgba(19, 21, 24, .55); } /* --- 06 · À propos ------------------------------------------------------ */ .ledger__label { font: 500 12px/1 var(--sans); letter-spacing: normal; text-transform: none; color: rgba(19, 21, 24, .5); } .ledger__year { font: 500 12px/1.8 var(--mono); direction: ltr; unicode-bidi: isolate; } /* Dernière ligne : « اليوم » est de l'arabe, pas une année. */ .ledger__row:last-child .ledger__year { font: 500 12px/1.8 var(--sans); direction: rtl; } .ledger__text { font: 400 13.5px/1.8 var(--sans); } .about__quote { font: 400 clamp(17px, 1.5vw, 21px)/1.75 var(--serif); } .about__body { font: 400 15px/1.95 var(--sans); } .fact__label { font: 500 11.5px/1 var(--sans); letter-spacing: normal; text-transform: none; color: rgba(19, 21, 24, .5); } .fact__value { font: 400 14px/1.75 var(--sans); } /* --- 07 · Contact ------------------------------------------------------- */ .contact__label { font: 500 12px/1 var(--sans); letter-spacing: normal; text-transform: none; color: rgba(242, 245, 242, .65); } .contact__title { max-width: 22ch; font: 400 clamp(27px, 4vw, 50px)/1.3 var(--serif); letter-spacing: normal; } .contact__lead { max-width: 48ch; font: 400 clamp(14.5px, 1.2vw, 16.5px)/1.9 var(--sans); } .contact__avail { font: 400 13px/1.9 var(--sans); color: rgba(242, 245, 242, .65); } .tile__label { font: 500 11.5px/1 var(--sans); letter-spacing: normal; text-transform: none; color: rgba(242, 245, 242, .65); } .tile__value { font: 400 clamp(19px, 1.9vw, 24px)/1.3 var(--serif); } .tile__value--mono { font-family: var(--mono); line-height: 1.2; letter-spacing: normal; direction: ltr; unicode-bidi: isolate; } /* L'adresse e-mail passe en monospace : sur une tuile RTL, le chasse-fixe rend la coupure de « contact@zahraouilaw.com » lisible. */ .tile__value--email { font: 400 clamp(15px, 1.4vw, 18px)/1.3 var(--mono); direction: ltr; unicode-bidi: isolate; } /* --- Pied de page ------------------------------------------------------- */ .site-footer__name { font: 400 clamp(16px, 1.4vw, 20px)/1.4 var(--serif); } .site-footer__role { direction: ltr; unicode-bidi: isolate; } .site-footer__links { font: 400 13.5px/1.7 var(--sans); } .legal { font: 400 12px/1.9 var(--sans); } .copyright { direction: ltr; unicode-bidi: isolate; } /* --- Bouton flottant ---------------------------------------------------- */ .fab { font: 500 14px/1.4 var(--sans); } /* --- 404 ---------------------------------------------------------------- */ .notfound__code { font: 500 12px/1 var(--sans); letter-spacing: normal; text-transform: none; }