/* =========================================================================
   Clara Prestige — surcouche Golfe (Emirats / Arabie saoudite / Qatar / Koweit)
   A charger APRES css/prestige.css. N'écrase rien par défaut (FR/EN inchangés) :
   toutes les règles sont scopées sur [lang="ar"] et/ou [dir="rtl"].
   Police arabe : Amiri (titres) + Tajawal (corps) — voir GULF-DESIGN-GUIDE.md §6.
   ========================================================================= */

/* Amiri + Tajawal chargées via le <link> unique dans <head> d'index.html
   (avec Cormorant Garamond + Inter) — voir brand-tokens.css. */

:root {
  /* accent secondaire Golfe : vert émeraude sombre — usage parcimonieux, jamais
     en même temps que --gulf-navy sur le même écran (voir guide §1) */
  --gulf-emerald: #1c6b4f;
  --gulf-emerald-deep: #0e3b2e;
  --gulf-navy: #0b1a2e;
  --gulf-serif-ar: "Amiri", "Traditional Arabic", "Times New Roman", serif;
  --gulf-sans-ar: "Tajawal", "Segoe UI", var(--sans);
}

/* -------------------------------------------------------------------------
   Typographie arabe — s'applique à tout texte marqué lang="ar", y compris
   les noeuds injectés par data-i18n quand document.documentElement[lang=ar]
   ------------------------------------------------------------------------- */
[lang="ar"] { font-family: var(--gulf-sans-ar); }

html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3,
html[lang="ar"] .eyebrow,
html[lang="ar"] .demo-number,
html[lang="ar"] .alllangs-head h3 {
  font-family: var(--gulf-serif-ar);
  line-height: 1.5;              /* diacritiques + jambages : jamais 1.15 comme en Cormorant */
  font-weight: 600;
}

html[lang="ar"] body,
html[lang="ar"] p,
html[lang="ar"] label,
html[lang="ar"] input,
html[lang="ar"] textarea,
html[lang="ar"] select,
html[lang="ar"] button,
html[lang="ar"] .sub,
html[lang="ar"] .pain,
html[lang="ar"] .solution,
html[lang="ar"] .translit,
html[lang="ar"] .footer-legal {
  font-family: var(--gulf-sans-ar);
  line-height: 1.9;               /* Tajawal a besoin de plus de hauteur de ligne qu'Inter */
  font-size: 16.5px;
}

/* jamais de majuscules ni de tracking positif en arabe (écriture cursive, pas de casse) */
html[lang="ar"] .eyebrow,
html[lang="ar"] .btn,
html[lang="ar"] button {
  text-transform: none;
  letter-spacing: 0;
}

/* -------------------------------------------------------------------------
   Motif géométrique or discret — fond du bloc Émirats
   Rosace à 8 branches, trait fin, opacité faible : jamais en aplat plein
   (voir guide §2). Vient compléter/raffiner le pattern uaeStars existant.
   ------------------------------------------------------------------------- */
.uae {
  position: relative;
  isolation: isolate;
}
.uae::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.16;
  background-image:
    radial-gradient(circle at 50% 50%, transparent 0, transparent 22px, var(--or) 22.4px, transparent 23px),
    repeating-linear-gradient(45deg, transparent 0 46px, rgba(203,163,92,0.5) 46px 46.6px),
    repeating-linear-gradient(-45deg, transparent 0 46px, rgba(203,163,92,0.5) 46px 46.6px);
  background-size: 92px 92px, 92px 92px, 92px 92px;
  pointer-events: none;
}

/* petit sceau émeraude, très discret — un seul accent secondaire par écran */
.uae-body::before {
  content: "";
  display: block;
  width: 34px;
  height: 2px;
  margin-bottom: 14px;
  background: linear-gradient(90deg, var(--gulf-emerald), transparent);
}
[dir="rtl"] .uae-body::before { background: linear-gradient(270deg, var(--gulf-emerald), transparent); }

/* -------------------------------------------------------------------------
   Ornement de séparation (perle / rosace fine) entre sections, version Golfe
   ------------------------------------------------------------------------- */
.gulf-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 0 auto;
  max-width: 220px;
  opacity: 0.7;
}
.gulf-divider span {
  height: 1px;
  flex: 1;
  background: linear-gradient(90deg, transparent, var(--or), transparent);
}
.gulf-divider svg { flex: none; width: 16px; height: 16px; color: var(--or); }

/* -------------------------------------------------------------------------
   RTL — cartes et grilles (compléments aux règles [dir="rtl"] déjà présentes
   dans css/prestige.css)
   ------------------------------------------------------------------------- */
[dir="rtl"] .universe-card,
[dir="rtl"] .listen-card,
[dir="rtl"] .discretion-item {
  text-align: right;
}
[dir="rtl"] .discretion-item { text-align: center; } /* déjà centré en LTR : on garde */

[dir="rtl"] .uae-body { text-align: right; }
[dir="rtl"] .uae-visual { transform: scaleX(-1); } /* motif étoilé symétrique : miroir neutre, pas de sens à préserver */

/* Numéro de démonstration — bug trouvé en test RTL v2 : le module motion.js
   (initDigitDial) découpe le numéro en un <span> par caractère pour l'effet
   "cadran". Sans direction forcée, ces span inline-block suivent l'ordre du
   paragraphe RTL et se réordonnent un par un : "+1 332 301 2934" s'affichait
   à l'envers, chiffre par chiffre ("4392 103 233 1+"). direction:ltr sur le
   conteneur force les span-enfants à rester en ordre naturel, quel que soit
   le sens de la page (voir guide §7 : jamais convertir/inverser un numéro). */
[dir="rtl"] .demo-card .demo-number a {
  direction: ltr;
  unicode-bidi: isolate;
}

/* Icônes directionnelles uniquement (flèches, chevrons) — jamais loupe/cadenas/horloge
   (voir guide §7). À appliquer au cas par cas si des flèches de navigation sont ajoutées : */
[dir="rtl"] .icon-directional { transform: scaleX(-1); }

/* -------------------------------------------------------------------------
   Formulaire — champs mixtes LTR à l'intérieur d'un formulaire RTL
   (e-mail, téléphone : jamais inversés pendant la frappe)
   ------------------------------------------------------------------------- */
[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="tel"],
[dir="rtl"] input[type="url"] {
  direction: ltr;
  text-align: right;
}
/* champs texte libres pouvant mélanger latin/arabe (nom d'établissement, message) */
[dir="rtl"] input[type="text"],
[dir="rtl"] textarea {
  unicode-bidi: plaintext;
}

/* -------------------------------------------------------------------------
   Bloc Émirats enrichi (emirates-section.html) — cartes Dubaï / Abu Dhabi
   ------------------------------------------------------------------------- */
.uae-cities {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin-top: 28px;
}
@media (max-width: 720px) {
  .uae-cities { grid-template-columns: 1fr; }
}
.uae-city {
  border: 1px solid var(--ligne);
  border-radius: var(--radius);
  padding: 22px 24px;
  background: rgba(203,163,92,0.03);
}
.uae-city h4 {
  font-family: var(--serif);
  color: var(--or-clair);
  font-size: 19px;
  margin: 0 0 8px;
}
html[lang="ar"] .uae-city h4 { font-family: var(--gulf-serif-ar); }
.uae-city p { font-size: 14.5px; color: var(--texte-att); margin: 0; }

.uae-privacy-line {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--ligne);
  font-size: 14px;
  color: var(--texte-att);
}
.uae-privacy-line svg { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--gulf-emerald); }
[dir="rtl"] .uae-privacy-line { flex-direction: row-reverse; text-align: right; }

.uae-call-invite {
  margin-top: 18px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--or-clair);
  font-size: 14.5px;
}
.uae-call-invite a { color: var(--or-clair); border-bottom: 1px solid var(--ligne); }
[dir="rtl"] .uae-call-invite { flex-direction: row-reverse; }

/* -------------------------------------------------------------------------
   Garde-fou anti-débordement horizontal en RTL (rappel README-PRESTIGE.md :
   un bug d'overflow a déjà été trouvé en RTL) — filet de sécurité supplémentaire
   pour les composants ajoutés par cette surcouche.
   ------------------------------------------------------------------------- */
.uae-cities, .uae-city, .gulf-divider { max-width: 100%; overflow-wrap: break-word; }

/* -------------------------------------------------------------------------
   Hook sémantique pour la section Émirats enrichie (emirates-section.html) —
   aucun style propre requis, la mise en forme vient de .uae/.uae-body/etc.
   déjà définis ; conservé pour documenter l'origine du bloc.
   ------------------------------------------------------------------------- */
.section-gulf { position: relative; }