/* =========================================================================
   Clara Prestige — Brand Tokens v2
   Système d'identité "haute joaillerie" : noir profond, or feuille, ivoire.
   Aucune image externe : dégradés et ombres 100% CSS.
   ========================================================================= */

:root {
  /* ---------- Fond ---------- */
  --cp-noir: #0b0a08;              /* noir profond — fond principal */
  --cp-noir-nuit: #0d1016;         /* noir bleuté nuit — variante sections */
  --cp-noir-2: #16140f;            /* noir légèrement relevé (cartes) */
  --cp-noir-3: #1f1c14;            /* noir relevé (survol / bordures actives) */

  /* ---------- Or ---------- */
  --cp-or-pale: #f1dea6;           /* reflet feuille d'or, hautes lumières */
  --cp-or: #c9a96e;                /* or principal — texte accent, filets */
  --cp-or-profond: #8b6a2b;        /* or profond — ombre du dégradé, hover */
  --cp-champagne: #e3c98f;         /* or clair chaud — fonds très légers, halos */

  /* ---------- Neutres clairs ---------- */
  --cp-ivoire: #f6efe3;            /* ivoire — texte principal sur noir */
  --cp-ivoire-doux: #ece3d2;       /* ivoire adouci — sous-titres */
  --cp-texte-att: rgba(246, 239, 227, 0.68);   /* texte atténué */
  /* Correction v2 (audit Inès, §Accessibilité) : la valeur d'origine à 0.46
     mesurait 4.32:1 sur --cp-noir, sous le seuil AA de 4.5:1 — or ce ton sert
     le texte légal du footer, les translittérations ET les phrases "douleur"
     de chaque univers, soit le texte le plus lu de la page. Remontée à 0.62
     (~6.9:1 mesuré) sans toucher au reste de la palette. */
  --cp-texte-att-2: rgba(246, 239, 227, 0.62); /* texte très atténué — AA */

  /* ---------- Accent rare ---------- */
  --cp-bordeaux: #4a1220;          /* bordeaux profond — accents très rares (jamais dominant) */
  --cp-bordeaux-clair: #6e2233;

  /* ---------- Lignes / structure ---------- */
  --cp-ligne: rgba(201, 169, 110, 0.22);
  --cp-ligne-forte: rgba(201, 169, 110, 0.42);
  --cp-radius-sm: 2px;
  --cp-radius-md: 6px;
  --cp-radius-lg: 18px;
  --cp-maxw: 1180px;
  --cp-ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* ---------- Dégradés "feuille d'or" ---------- */
  --cp-foil-linear: linear-gradient(
    135deg,
    var(--cp-or-pale) 0%,
    var(--cp-or) 30%,
    var(--cp-or-profond) 55%,
    var(--cp-or) 78%,
    var(--cp-or-pale) 100%
  );
  --cp-foil-linear-h: linear-gradient(
    90deg,
    var(--cp-or-pale), var(--cp-or) 35%, var(--cp-or-profond) 60%, var(--cp-or) 85%, var(--cp-or-pale)
  );
  --cp-foil-radial-halo: radial-gradient(
    closest-side, rgba(201, 169, 110, 0.32), rgba(201, 169, 110, 0.08) 60%, transparent 100%
  );
  --cp-bg-field: radial-gradient(1100px 600px at 82% -10%, rgba(201, 169, 110, 0.14), transparent 60%),
                 radial-gradient(900px 500px at -10% 110%, rgba(201, 169, 110, 0.08), transparent 60%),
                 var(--cp-noir);

  /* ---------- Boutons ---------- */
  --cp-btn-gold-bg: linear-gradient(135deg, var(--cp-or-pale), var(--cp-or) 55%, var(--cp-or-profond));
  --cp-btn-gold-ink: #16130a;
  --cp-btn-gold-shadow: 0 14px 30px -12px rgba(201, 169, 110, 0.55);

  /* ---------- Ombres ---------- */
  --cp-shadow-sm: 0 4px 14px -6px rgba(0, 0, 0, 0.55);
  --cp-shadow-md: 0 18px 40px -18px rgba(0, 0, 0, 0.6);
  --cp-shadow-gold-glow: 0 0 0 1px var(--cp-ligne), 0 20px 50px -22px rgba(201, 169, 110, 0.45);
  --cp-shadow-inset-hairline: inset 0 0 0 1px rgba(255, 255, 255, 0.04);

  /* ---------- Typographie ---------- */
  --cp-font-serif: "Cormorant Garamond", "Playfair Display", Georgia, "Times New Roman", serif;
  --cp-font-sans: "Inter", "Manrope", -apple-system, BlinkMacSystemFont, sans-serif;
  --cp-font-arabic: "Amiri", "Noto Naskh Arabic", "Traditional Arabic", serif;

  --cp-weight-title-regular: 500;
  --cp-weight-title-strong: 600;

  --cp-fs-eyebrow: 12px;
  --cp-ls-eyebrow: 0.28em;
  --cp-ls-motto: 0.2em;     /* petites capitales de devise / crest */
}

/* =========================================================================
   Polices Google Fonts : chargées via <link rel="stylesheet"> dans le <head>
   d'index.html (Cormorant Garamond + Inter + Amiri + Tajawal), pas en @import
   ici — un seul appel réseau, non bloquant grâce au preconnect déjà en place
   (voir audit Inès §Vitesse : éviter les chaînes d'@import CSS).
   ========================================================================= */

/* =========================================================================
   Classes utilitaires de marque (facultatives)
   ========================================================================= */
.cp-foil-text {
  background: var(--cp-foil-linear-h);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.cp-eyebrow {
  font-family: var(--cp-font-sans);
  font-size: var(--cp-fs-eyebrow);
  letter-spacing: var(--cp-ls-eyebrow);
  text-transform: uppercase;
  color: var(--cp-or);
  font-weight: 600;
}

.cp-motto {
  font-family: var(--cp-font-serif);
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: var(--cp-ls-motto);
  text-transform: uppercase;
  color: var(--cp-or-pale);
}

.cp-rule {
  width: 64px;
  height: 1px;
  background: linear-gradient(90deg, var(--cp-or), transparent);
}
[dir="rtl"] .cp-rule { background: linear-gradient(270deg, var(--cp-or), transparent); }

.cp-halo {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--cp-foil-radial-halo);
  filter: blur(2px);
}

/* Texte arabe : toujours la police dédiée, jamais le serif latin */
[lang="ar"], [dir="rtl"] .cp-serif-ar {
  font-family: var(--cp-font-arabic);
}