/*
 * Les pages légales et le support, dans les trois langues de l'app.
 *
 * Une seule feuille pour neuf pages. Elles avaient chacune la leur, deux cents
 * lignes recopiées : une correction de style en demandait neuf, et l'arabe en
 * aurait ajouté trois de plus.
 *
 * Tout est écrit en propriétés logiques, `inline-start` plutôt que `left`. C'est
 * ce qui permet à l'arabe de se retourner sans une seule règle à part : la page
 * porte `dir="rtl"`, et les puces, les marges et les bordures suivent.
 *
 * Les couleurs sont celles de l'app, à la valeur près. Une page légale reste une
 * page de Khushu.
 */

:root {
  --bg: #000000;
  --bg-elevated: #0A0A0A;
  --text: #FAFAFA;
  --text-secondary: #A3A3A3;
  --text-muted: #525252;
  --accent: #D4A574;
  --success: #4ADE80;
  --border: rgba(255, 255, 255, 0.06);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: 'Outfit', -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* Outfit ne dessine pas l'arabe. Tajawal est la police que l'app elle-même charge. */
html[lang="ar"] body {
  font-family: 'Tajawal', 'Outfit', -apple-system, sans-serif;
}

/* — Le sélecteur de langue — */

.lang-switch {
  position: fixed;
  top: 20px;
  inset-inline-end: 24px;
  z-index: 10;
  display: flex;
  gap: 12px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 1px;
}

.lang-switch a {
  color: var(--text-muted);
  text-decoration: none;
  border: none;
  transition: color 0.2s;
}

.lang-switch a:hover { color: var(--accent); border: none; }

/* La langue affichée se montre sans se proposer. */
.lang-switch span {
  color: var(--accent);
  cursor: default;
}

/* — L'en-tête — */

.container {
  max-width: 720px;
  margin: 0 auto;
  padding: 60px 24px 100px;
}

.brand {
  text-align: center;
  margin-bottom: 48px;
}

.brand-logo {
  display: block;
  margin: 0 auto 16px;
}

.brand-name {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--accent);
}

/* L'arabe ne connaît ni majuscules ni interlettrage : les imposer le rendrait illisible. */
html[lang="ar"] .brand-name,
html[lang="ar"] h3,
html[lang="ar"] thead th {
  text-transform: none;
  letter-spacing: 0;
}

h1 {
  font-size: 36px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 8px;
  letter-spacing: -0.5px;
}

html[lang="ar"] h1 { letter-spacing: 0; }

.effective-date,
.subtitle {
  text-align: center;
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 400;
  margin-bottom: 56px;
}

.subtitle {
  color: var(--text-secondary);
  font-size: 16px;
  margin-bottom: 40px;
}

.intro {
  color: var(--text-secondary);
  font-size: 16px;
  margin-bottom: 48px;
  text-align: center;
  max-width: 560px;
  margin-inline: auto;
}

/* — Le corps — */

h2 {
  font-size: 20px;
  font-weight: 600;
  margin-top: 48px;
  margin-bottom: 16px;
  color: var(--text);
}

h2 .num {
  color: var(--accent);
  margin-inline-end: 8px;
}

h3 {
  font-size: 15px;
  font-weight: 500;
  color: var(--text-secondary);
  margin-top: 20px;
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

p {
  color: var(--text-secondary);
  font-size: 15px;
  margin-bottom: 16px;
}

/* Ce qui doit se lire même en diagonale. */
.highlight {
  background: rgba(212, 165, 116, 0.08);
  border-inline-start: 2px solid var(--accent);
  border-start-end-radius: 8px;
  border-end-end-radius: 8px;
  padding: 16px 20px;
  margin: 24px 0;
  color: var(--accent);
  font-size: 14px;
  font-weight: 500;
}

ul {
  list-style: none;
  padding: 0;
  margin-bottom: 16px;
}

ul li {
  position: relative;
  padding-inline-start: 20px;
  margin-bottom: 10px;
  color: var(--text-secondary);
  font-size: 15px;
}

ul li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 10px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

ul li strong {
  color: var(--text);
  font-weight: 500;
}

/* Les listes de ce que l'on ne fait pas. Le vert dit l'absence, pas l'ajout. */
.not-list li::before { background: var(--success); }

table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  font-size: 14px;
}

thead th {
  text-align: start;
  padding: 12px 16px;
  font-weight: 500;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}

tbody td {
  padding: 14px 16px;
  color: var(--text-secondary);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

tbody td:first-child {
  color: var(--text);
  font-weight: 500;
}

/*
 * Un tableau de trois colonnes ne tient pas sur un téléphone. Il défile dans son
 * propre cadre plutôt que d'élargir la page entière.
 */
.table-scroll {
  overflow-x: auto;
  margin: 20px 0;
}

.table-scroll table { margin: 0; min-width: 520px; }

a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid rgba(212, 165, 116, 0.3);
  transition: border-color 0.2s;
}

a:hover { border-bottom-color: var(--accent); }

.divider {
  height: 1px;
  background: var(--border);
  margin: 48px 0;
}

/* — Le pied de page — */

.contact-box {
  text-align: center;
  padding: 32px;
  background: var(--bg-elevated);
  border-radius: 16px;
  border: 1px solid var(--border);
  margin-top: 32px;
}

.contact-box p { color: var(--text-secondary); margin-bottom: 12px; }

.contact-box .icon {
  width: 40px;
  height: 40px;
  margin: 0 auto 16px;
  color: var(--accent);
}

.contact-box .icon svg { width: 100%; height: 100%; }

.contact-label {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
}

html[lang="ar"] .contact-label { text-transform: none; letter-spacing: 0; }

.contact-email {
  font-size: 18px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  border: none;
  /* Une adresse ne se retourne pas : elle reste lisible de gauche à droite. */
  direction: ltr;
  display: inline-block;
}

.contact-email:hover { border: none; }

.response-time {
  margin-top: 16px;
  margin-bottom: 0;
  font-size: 14px;
  color: var(--text-muted);
}

@media (max-width: 480px) {
  .container { padding: 48px 20px 80px; }
  h1 { font-size: 28px; }
  h2 { font-size: 18px; margin-top: 40px; }
}