/* ============================================================
   FRANÇOIS DEBIEN — Tokens des 3 directions artistiques
   A · L'Atelier   — clair, lin & noyer, laiton brossé, serif élégante
   B · Le Showroom — sombre, noyer profond, laiton chaud, romain gravé
   C · La Galerie  — mixte, grège & vert feutrine, sans géométrique
   ============================================================ */

.dir-a {
  --bg:        #F3EEE3;  /* lin */
  --surface:   #FAF7F0;  /* ivoire chaud */
  --surface-2: #ECE5D5;  /* lin appuyé */
  --ink:       #2C2418;  /* brun ébène doux */
  --muted:     #75664F;  /* taupe */
  --line:      #DDD3C0;
  --primary:   #4A3A28;  /* noyer */
  --primary-ink: #F6F1E6;
  --accent:    #A07E45;  /* laiton brossé */
  --accent-soft: #EBE0C6;
  --dark-section: #2C2418;
  --dark-section-ink: #EFE7D8;
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Karla', 'Helvetica Neue', sans-serif;
  --radius-btn: 2px;
  --radius-card: 4px;
  --shadow-card: 0 1px 2px rgba(44,36,24,.06), 0 8px 28px rgba(44,36,24,.08);
}

.dir-b {
  --bg:        #201810;  /* noyer fumé */
  --surface:   #2A2117;
  --surface-2: #342A1D;
  --ink:       #EFE6D5;  /* ivoire */
  --muted:     #A8957A;  /* laiton éteint */
  --line:      #3E3424;
  --primary:   #C7A562;  /* laiton chaud */
  --primary-ink: #221A11;
  --accent:    #C7A562;
  --accent-soft: #3B2F1E;
  --dark-section: #181208;
  --dark-section-ink: #EFE6D5;
  --font-display: 'Marcellus', Georgia, serif;
  --font-body: 'Lora', Georgia, serif;
  --radius-btn: 0px;
  --radius-card: 2px;
  --shadow-card: 0 1px 2px rgba(0,0,0,.35), 0 14px 40px rgba(0,0,0,.45);
}

.dir-c {
  --bg:        #F1EEE8;  /* grège */
  --surface:   #FAF9F5;
  --surface-2: #E7E4DB;
  --ink:       #20281F;  /* vert encre */
  --muted:     #5F6B5C;
  --line:      #D9D6CB;
  --primary:   #2E443A;  /* vert feutrine d'étui */
  --primary-ink: #EFEEE6;
  --accent:    #93764A;  /* laiton discret */
  --accent-soft: #DEE3DA;
  --dark-section: #243731;
  --dark-section-ink: #ECEEE7;
  --font-display: 'Jost', 'Helvetica Neue', sans-serif;
  --font-body: 'Lora', Georgia, serif;
  --radius-btn: 999px;
  --radius-card: 10px;
  --shadow-card: 0 1px 2px rgba(32,40,31,.05), 0 10px 30px rgba(32,40,31,.08);
}

/* ---------- primitives partagées (stylées par variables) ---------- */
.spec {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
}

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; padding: 13px 26px; font-family: var(--font-body);
  font-size: 13px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; cursor: pointer;
  border-radius: var(--radius-btn); transition: all .25s ease;
  border: 1px solid transparent;
}
.btn-primary { background: var(--primary); color: var(--primary-ink); }
.btn-primary:hover { background: var(--accent); color: var(--primary-ink); }
.dir-b .btn-primary:hover { background: #DAB97A; }
.btn-secondary { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-secondary:hover { border-color: var(--accent); color: var(--accent); }
.btn-ghost {
  background: none; border: none; color: var(--accent);
  padding: 13px 4px; border-bottom: 1px solid var(--accent); border-radius: 0;
}

.badge {
  display: inline-flex; align-items: center; gap: 6px;
  align-self: flex-start; width: max-content; white-space: nowrap;
  padding: 5px 12px; font-size: 10px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  border: 1px solid var(--accent); color: var(--accent);
  border-radius: var(--radius-btn); font-family: var(--font-body);
}
.badge-fill { background: var(--accent); color: var(--bg); border-color: var(--accent); }

.field { display: flex; flex-direction: column; gap: 7px; }
.field label {
  font-size: 10px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted);
}
.field input, .field textarea {
  background: var(--surface); border: 1px solid var(--line);
  color: var(--ink); padding: 12px 14px; font-family: var(--font-body);
  font-size: 14px; border-radius: var(--radius-btn); outline: none;
  transition: border-color .2s ease;
}
.field input:focus { border-color: var(--accent); }

.chip {
  display: inline-flex; padding: 8px 16px; font-size: 12px;
  font-family: var(--font-body); letter-spacing: .04em;
  border: 1px solid var(--line); color: var(--muted);
  border-radius: 999px; cursor: pointer; transition: all .2s ease;
}
.chip:hover { border-color: var(--accent); color: var(--ink); }
.chip.on { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); }

.pcard {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-card); overflow: hidden;
  box-shadow: var(--shadow-card); transition: transform .3s ease;
}

/* ---------- placeholder photo (rayures + libellé mono) ---------- */
.ph {
  position: relative; display: flex; align-items: center; justify-content: center;
  background: repeating-linear-gradient(
    -45deg,
    var(--surface-2), var(--surface-2) 6px,
    transparent 6px, transparent 14px
  ), var(--surface);
  border: 1px solid var(--line);
}
.ph span {
  font-family: 'SF Mono', ui-monospace, Menlo, monospace;
  font-size: 10px; letter-spacing: .06em; color: var(--muted);
  background: var(--surface); padding: 4px 10px; border: 1px solid var(--line);
  text-align: center; line-height: 1.5; max-width: 85%;
}

/* ---------- swatch rows pour les palettes ---------- */
.swatch { display: grid; grid-template-columns: 64px 1fr; gap: 14px; align-items: start; }
.swatch .chipbox { width: 64px; height: 48px; border-radius: 3px; border: 1px solid rgba(0,0,0,.08); }
.swatch h5 { margin: 0 0 2px; font-size: 12.5px; font-weight: 700; font-family: var(--font-body); color: var(--ink); }
.swatch .hex { font-family: ui-monospace, Menlo, monospace; font-size: 11px; color: var(--accent); }
.swatch p { margin: 3px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--muted); }