/* ======================================================
   DESIGN TOKENS — refined editorial luxury
   ====================================================== */

/* Google Sans Flex — auto-hébergée, réservée aux TITRES (--serif-display) */
@font-face {
  font-family: "Google Sans Flex";
  src: url("../fonts/GoogleSansFlex-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Google Sans Flex";
  src: url("../fonts/GoogleSansFlex-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Palette — taupe clair éditorial, texte chocolat profond */
  --bg: #F5F1EA;
  --bg-deeper: #F5F1EA;
  --bg-elevated: #F5F1EA;
  --surface: #F5F1EA;
  --surface-2: #F5F1EA;
  --line: rgba(40, 28, 16, 0.2);
  --line-soft: rgba(40, 28, 16, 0.1);

  --gold: #8a6a33;
  --gold-bright: #a8822c;
  --gold-deep: #5a4018;
  --copper: #8b5728;

  /* --ivory & --ivory-soft : maintenant le texte sombre par défaut sur fond clair.
     Les zones qui restent sur fond sombre (hero, nav scrollée, billboards) utilisent
     des littéraux crème hardcodés. */
  --ivory: #1f160d;
  --ivory-soft: #3a2d1e;
  --muted: #6d5f4d;
  --muted-dim: #9a9080;

  /* Type — TITRES en Google Sans Flex (Italiana en repli) */
  --serif-display: "Google Sans Flex", "Italiana", sans-serif;
  --serif: "Cormorant Garamond", serif;
  --sans: "Jost", system-ui, sans-serif;

  /* Spacing scale (modular, 4-based) */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --s-10: 8rem;

  /* Layout — fluide jusqu'aux grands écrans (1680px cap) */
  --maxw: min(1680px, 88cqw);
  --pad: clamp(1.5rem, 4cqw, 4rem);
  --section-pad: clamp(5rem, 10cqw, 10rem);
  --section-pad-sm: clamp(3rem, 6cqw, 6rem);

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-smooth: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 0.3s;
  --t-med: 0.6s;
  --t-slow: 1.1s;
}

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

html { scroll-behavior: smooth; direction: ltr !important; font-size: 137.5%; }

/* ======================================================
   FRAME — pleine largeur.
   container-type: inline-size => les unités cqw des sections
   se calent sur la largeur disponible, sans bandes latérales sur
   les grands écrans.
   ====================================================== */
.frame {
  width: 100%;
  max-width: none;
  margin-inline: auto;
  container-type: inline-size;
  overflow-x: clip;
}

body {
  background: var(--bg);
  color: var(--ivory);
  font-family: var(--sans);
  font-weight: 300;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  min-height: 100vh;
  position: relative;
  text-rendering: optimizeLegibility;
}

/* Soft grain — subtle, luxurious */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2000;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.8  0 0 0 0 0.6  0 0 0 0 0.3  0 0 0 0.9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* Soft atmospheric warmth — dégradés subtils pour donner de la profondeur au taupe */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(ellipse 80% 60% at 85% 10%, rgba(250, 240, 215, 0.35), transparent 60%),
    radial-gradient(ellipse 70% 50% at 10% 90%, rgba(170, 140, 95, 0.18), transparent 60%);
}

img,
picture,
svg,
video,
canvas,
.rs-media,
.home-media,
.product__image,
.range__visual,
.about__visual-photo,
.nav__brand {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}

img {
  max-width: 100%;
  display: block;
  -webkit-touch-callout: none;
}
a { color: inherit; text-decoration: none; }
::selection { background: var(--gold); color: var(--bg); }

/* Dezoom 10% sur tout sauf nav et hero */
.about,
.patent,
.ranges-showcase,
.markets,
.contact,
footer {
  zoom: 0.9;
}

/* Focus accessible */
:focus-visible {
  outline: 1px solid var(--gold);
  outline-offset: 3px;
}

/* ======================================================
   ARABE (classe .lang-ar posée sur <html> par main.js)
   - direction RTL (l'arabe se lit de droite à gauche)
   - letter-spacing supprimé : l'arabe est cursif, un espacement
     entre les lettres casse les liaisons et rend le texte illisible
   - police arabe élégante (Noto Naskh Arabic) au lieu des polices
     latines (Italiana / Cormorant / Jost) qui n'ont pas de glyphes arabes
   ====================================================== */
html.lang-ar { direction: rtl !important; }
html.lang-ar * { letter-spacing: normal !important; }
html.lang-ar body,
html.lang-ar .nav,
html.lang-ar h1, html.lang-ar h2, html.lang-ar h3, html.lang-ar h4,
html.lang-ar p, html.lang-ar a, html.lang-ar span, html.lang-ar li,
html.lang-ar button, html.lang-ar input, html.lang-ar textarea,
html.lang-ar label, html.lang-ar div {
  font-family: "Noto Naskh Arabic", "Geeza Pro", serif !important;
}

/* Mobile : sections plus compactes (moins « interminable », plus épuré) */
@media (max-width: 768px) {
  :root {
    --section-pad: 3.25rem;
    --section-pad-sm: 2.25rem;
  }
  /* le grain/halo plein écran reste, mais on évite les très grands vides */
  body { line-height: 1.55; }
}