/* ── CHANEL SKIN — Variables globales ── */
:root {
  --bg: #0a0a0a;
  --bg2: #050505;
  --card: #111111;
  --text: #ffffff;
  --text-sec: #888888;
  --text-muted: #444444;
  --gold: #c9aa71;
  --gold-dim: rgba(201,170,113,.08);
  --border: rgba(255,255,255,.08);
  --border-mid: rgba(255,255,255,.15);
  --font-size: 16px;
}
body.skin-jour {
  --bg: #f8f6f0; --bg2: #f0ede4; --card: #ffffff;
  --text: #0a0a0a; --text-sec: #444; --text-muted: #999;
  --gold: #8b6914; --gold-dim: rgba(139,105,20,.06);
  --border: rgba(0,0,0,.08); --border-mid: rgba(0,0,0,.15);
}
body.skin-sepia {
  --bg: #1a1208; --bg2: #100c04; --card: #1e1508;
  --text: #f0e6c8; --text-sec: #a89060; --text-muted: #6a5830;
  --gold: #c9aa71; --gold-dim: rgba(201,170,113,.1);
  --border: rgba(240,230,200,.08); --border-mid: rgba(240,230,200,.15);
}

/* ── BASE ── */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: var(--font-size); }
body {
  background: var(--bg) !important;
  color: var(--text) !important;
  font-family: 'Montserrat', system-ui, sans-serif !important;
  line-height: 1.8;
  transition: background .3s, color .3s;
}

/* ── SKIN BAR ── */
#chanel-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 9999;
  height: 36px; background: #000;
  border-bottom: 1px solid rgba(255,255,255,.1);
  display: flex; align-items: center; padding: 0 20px; gap: 6px;
  font-family: 'Montserrat', sans-serif;
}
.cb-label {
  font-size: 8px; font-weight: 800; letter-spacing: .4em;
  text-transform: uppercase; color: #333; margin-right: 10px;
}
.cb-btn {
  background: transparent; border: 1px solid rgba(255,255,255,.2);
  color: #666; font-family: inherit; font-size: 8px; font-weight: 700;
  letter-spacing: .3em; text-transform: uppercase; padding: 2px 10px;
  cursor: pointer; transition: all .15s; border-radius: 0;
}
.cb-btn:hover { color: #fff; border-color: #fff; }
.cb-btn.active { background: #c9aa71; border-color: #c9aa71; color: #000; font-weight: 900; }
.cb-sep { width: 1px; height: 16px; background: rgba(255,255,255,.1); margin: 0 6px; }
.cb-font-btn {
  background: transparent; border: 1px solid rgba(255,255,255,.15);
  color: #555; font-family: 'Georgia', serif; font-size: 11px; font-weight: 700;
  padding: 1px 8px; cursor: pointer; transition: all .15s;
}
.cb-font-btn:hover { color: #c9aa71; border-color: #c9aa71; }
.cb-back {
  margin-left: auto; font-size: 8px; font-weight: 700; letter-spacing: .25em;
  text-transform: uppercase; color: #444; text-decoration: none; transition: color .15s;
}
.cb-back:hover { color: #c9aa71; }

/* ── DÉCALE LE CONTENU SOUS LA BARRE ── */
body { padding-top: 36px !important; }

/* Surcharge des fonds blancs intempestifs */
* { background-color: inherit !important; }
.page, .container, main, article, section, div {
  background: transparent !important;
}

/* ── TYPOGRAPHIE CHANEL ── */
h1, h2, h3, h4, h5 {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 200 !important;
  letter-spacing: .25em !important;
  text-transform: uppercase !important;
  color: var(--text) !important;
  line-height: 1.3 !important;
}
h1 { font-size: 2.4rem !important; }
h2 { font-size: 1.4rem !important; }
h3 { font-size: 1.1rem !important; }

p { color: var(--text-sec) !important; line-height: 1.85 !important; }
strong { color: var(--text) !important; font-weight: 600 !important; }
a { color: var(--gold) !important; }

/* ── FILETS ── */
hr, .separator {
  border: none !important;
  border-top: 1px solid var(--border) !important;
  margin: 40px 0 !important;
}

/* ── TABLEAUX ── */
table { border-collapse: collapse !important; width: 100% !important; }
th {
  font-size: .65rem !important; font-weight: 700 !important;
  letter-spacing: .3em !important; text-transform: uppercase !important;
  color: var(--text-muted) !important; padding: 10px 16px !important;
  border-bottom: 1px solid var(--border-mid) !important;
  background: transparent !important;
}
td {
  padding: 10px 16px !important; color: var(--text-sec) !important;
  border-bottom: 1px solid var(--border) !important;
  background: transparent !important; font-size: .88rem !important;
}
tr:hover td { background: rgba(201,170,113,.04) !important; }

/* ── BLOCKQUOTES ── */
blockquote {
  border-left: 2px solid var(--gold) !important;
  padding: 16px 24px !important; margin: 32px 0 !important;
  color: var(--text-sec) !important;
  font-style: italic !important;
  background: var(--gold-dim) !important;
}

/* ── BADGES / LABELS ── */
.badge, [class*="badge"], [class*="tag"], [class*="label"] {
  font-size: .65rem !important; font-weight: 700 !important;
  letter-spacing: .35em !important; text-transform: uppercase !important;
}

/* ── BOUTONS ── */
button, .btn, [class*="btn"] {
  font-family: 'Montserrat', sans-serif !important;
  letter-spacing: .2em !important;
  text-transform: uppercase !important;
  border-radius: 0 !important;
  transition: all .15s !important;
}

/* ── CARTES / BLOCS ── */
[class*="card"], [class*="block"], [class*="callout"] {
  border: 1px solid var(--border) !important;
  background: var(--card) !important;
}