/**
 * FICHIER : assets/css/theme.css
 * RÔLE : Système de design Aurea — variables, polices, reset.
 *        Typographie native système (Apple / Android / Windows).
 *        Niveau qualité : Facebook, WhatsApp, Instagram, X.
 */

/* ═══════════════════════════════════════════════
   POLICE SYSTÈME NATIVE — aucun chargement réseau
   ═══════════════════════════════════════════════ */
:root {
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
             Helvetica, Arial, "Noto Sans", sans-serif;
  --font-serif: "Georgia", "Times New Roman", serif;
  --font-mono: "SF Mono", "Fira Code", "Consolas", monospace;

  /* ── TAILLE / POIDS ── */
  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-md:   17px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  30px;
  --text-3xl:  38px;

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semi:   600;
  --weight-bold:   700;

  /* ── ESPACEMENT ── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ── RAYON ── */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-full: 9999px;

  /* ── OMBRES ── */
  --shadow-xs: 0 1px 2px rgba(0,0,0,.12);
  --shadow-sm: 0 2px 8px rgba(0,0,0,.16);
  --shadow-md: 0 4px 16px rgba(0,0,0,.20);
  --shadow-lg: 0 8px 32px rgba(0,0,0,.28);

  /* ── TRANSITION ── */
  --ease: cubic-bezier(.4,0,.2,1);
  --dur:  180ms;
}

/* ═══════════════════════════════════════════════
   THÈME SOMBRE (défaut)
   ═══════════════════════════════════════════════ */
:root,
[data-theme="sombre"] {
  --couleur-fond:         #15140F;
  --couleur-fond-clair:   #1E1C13;
  --couleur-fond-carte:   #1E1C13;
  --couleur-bordure:      rgba(255,255,255,.08);
  --couleur-bordure-forte:rgba(255,255,255,.14);

  --couleur-texte:        #EDE8DA;
  --couleur-texte-attenue:#B8B09E;
  --couleur-texte-faible: #7A7464;
  --couleur-texte-inverse:#15140F;

  --couleur-or:           #C9A24A;
  --couleur-or-hover:     #D8B55E;
  --couleur-or-pale:      rgba(201,162,74,.12);

  --couleur-succes:       #6BAF96;
  --couleur-succes-pale:  rgba(107,175,150,.12);
  --couleur-danger:       #E08A7C;
  --couleur-danger-pale:  rgba(224,138,124,.12);
  --couleur-warning:      #E0A85A;
  --couleur-info:         #6B8FAF;

  --couleur-live:         #E05050;
  --couleur-live-pale:    rgba(224,80,80,.12);


  /* ── Couleurs sociales ── */
  --couleur-whatsapp:     #25D366;
  --couleur-facebook:     #1877F2;
  --couleur-telegram:     #0088CC;
  --couleur-instagram:    #E1306C;
  --couleur-tiktok:       #010101;

  /* ── Couleurs neutres ── */
  --couleur-blanc:        #FFFFFF;
  --couleur-noir:         #000000;
  --couleur-or-gradient:  #E0B85E;
  --couleur-or-vif:       #FFD700;

  --header-bg:            rgba(21,20,15,.92);
  --header-border:        rgba(201,162,74,.18);

  --input-bg:             rgba(255,255,255,.05);
  --input-border:         rgba(255,255,255,.12);
  --input-focus:          #C9A24A;
}

/* ═══════════════════════════════════════════════
   THÈME LUMIÈRE
   ═══════════════════════════════════════════════ */
[data-theme="lumiere"] {
  --couleur-fond:         #F7F5F0;
  --couleur-fond-clair:   #FFFFFF;
  --couleur-fond-carte:   #FFFFFF;
  --couleur-bordure:      rgba(0,0,0,.08);
  --couleur-bordure-forte:rgba(0,0,0,.14);

  --couleur-texte:        #1A1914;
  --couleur-texte-attenue:#4A4640;
  --couleur-texte-faible: #8A857C;
  --couleur-texte-inverse:#FFFFFF;

  --couleur-or:           #A07830;
  --couleur-or-hover:     #B08840;
  --couleur-or-pale:      rgba(160,120,48,.10);

  --couleur-succes:       #3A8F70;
  --couleur-succes-pale:  rgba(58,143,112,.10);
  --couleur-danger:       #C0584A;
  --couleur-danger-pale:  rgba(192,88,74,.10);
  --couleur-warning:      #B87820;
  --couleur-info:         #3A6A9A;

  --couleur-live:         #C03030;
  --couleur-live-pale:    rgba(192,48,48,.10);

  /* ── Couleurs sociales (même en lumière) ── */
  --couleur-whatsapp:     #25D366;
  --couleur-facebook:     #1877F2;
  --couleur-telegram:     #0088CC;
  --couleur-instagram:    #E1306C;
  --couleur-tiktok:       #010101;
  --couleur-blanc:        #FFFFFF;
  --couleur-noir:         #000000;
  --couleur-or-gradient:  #C8943A;
  --couleur-or-vif:       #C9A24A;

  --header-bg:            rgba(247,245,240,.94);
  --header-border:        rgba(0,0,0,.10);

  --input-bg:             #FFFFFF;
  --input-border:         rgba(0,0,0,.16);
  --input-focus:          #A07830;
}

/* ═══════════════════════════════════════════════
   RESET MODERNE — niveau Meta/X
   ═══════════════════════════════════════════════ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-ui);
  font-size: var(--text-base);
  font-weight: var(--weight-normal);
  line-height: 1.5;
  color: var(--couleur-texte);
  background-color: var(--couleur-fond);
  min-height: 100vh;
  overflow-x: hidden;
  transition: background-color var(--dur) var(--ease),
              color var(--dur) var(--ease);
}

img, video, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Images — jamais déformées */
img {
  object-fit: cover;
}

/* Aspect ratio containers pour éviter layout shift */
.img-aspect-16-9 { aspect-ratio: 16/9; overflow: hidden; }
.img-aspect-4-3  { aspect-ratio: 4/3;  overflow: hidden; }
.img-aspect-1-1  { aspect-ratio: 1/1;  overflow: hidden; }
.img-aspect-16-9 img,
.img-aspect-4-3  img,
.img-aspect-1-1  img {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
}

a { color: inherit; text-decoration: none; }
button { font-family: var(--font-ui); cursor: pointer; border: none; background: none; }
input, textarea, select { font-family: var(--font-ui); }
ul, ol { list-style: none; }
p { color: var(--couleur-texte-attenue); line-height: 1.65; }
h1,h2,h3,h4,h5,h6 {
  color: var(--couleur-texte);
  font-weight: var(--weight-bold);
  line-height: 1.25;
  letter-spacing: -.01em;
}

/* ═══════════════════════════════════════════════
   TOGGLE THÈME
   ═══════════════════════════════════════════════ */
.btn-theme-toggle {
  width: 36px; height: 36px;
  border-radius: var(--radius-full);
  display: flex; align-items: center; justify-content: center;
  color: var(--couleur-texte-faible);
  border: 1px solid var(--couleur-bordure);
  background: var(--couleur-fond-clair);
  transition: all var(--dur) var(--ease);
  font-size: 14px;
}
.btn-theme-toggle:hover { color: var(--couleur-or); border-color: var(--couleur-or); }
[data-theme="lumiere"] .icone-lune,
[data-theme="sombre"]  .icone-soleil { display: none; }
[data-theme="lumiere"] .icone-soleil,
[data-theme="sombre"]  .icone-lune   { display: inline; }

/* Anti-FOUC */