/* ============================================================
   THEME — CLASSIQUE (par défaut)
   Palette atelier de carreleur : charbon ciment, pierre travertin,
   terre cuite, céladon, bleu pétrole, ocre laiton.
   Typographies Fraunces + Inter.
   ============================================================ */

[data-theme="classique"][data-mode="light"] {
  --bg: #E8DAC8;          /* beige pierre */
  --paper: #F2EDE3;       /* blanc cassé pour les cards */
  --text: #2A2419;        /* lin foncé */
  --muted: #6E5F50;       /* ombre */
  --line: rgba(42,36,25,.12);
  --accent: #3A3A3D;       /* charbon ciment — primary */
  --accent-2: #C56A3F;     /* terre cuite — secondary chaud */
  --accent-3: #B89060;     /* ocre laiton — accent doré */
  --accent-4: #A6C4B8;     /* céladon — accent frais */
  --accent-5: #1F4E5C;     /* bleu pétrole — cool deep */
  --shadow: 0 30px 60px -30px rgba(58,58,61,.30);
}

[data-theme="classique"][data-mode="dark"] {
  --bg: #1A1815;
  --paper: #2A2419;       /* lin foncé */
  --text: #E8DAC8;        /* beige pierre */
  --muted: #C2B5A4;
  --line: rgba(232,218,200,.14);
  --accent: #B7B5B2;      /* charbon clair */
  --accent-2: #E08A5C;    /* terre cuite éclaircie */
  --accent-3: #D7AE7A;    /* ocre clair */
  --accent-4: #BCD8CE;    /* céladon clair */
  --accent-5: #4F8CA0;    /* bleu pétrole clair */
  --shadow: 0 30px 60px -30px rgba(0,0,0,.65);
}

[data-theme="classique"] {
  font-family: 'Inter', system-ui, sans-serif;
}

[data-theme="classique"] body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background-image:
    radial-gradient(circle at 25% 0%, rgba(58,58,61,.07), transparent 35%),
    radial-gradient(circle at 90% 80%, rgba(197,106,63,.09), transparent 40%),
    radial-gradient(circle at 50% 50%, rgba(166,196,184,.05), transparent 50%);
}

/* le grain papier est désormais géré par decor.css (body::after + textures par section) */

/* ────────────────────────────────────────────
   HERO — lisibilité du titre (mode clair)
   "Pour 30 ans." (.emphasis) et l'italique du lead
   passaient en gris très clair et disparaissaient sur
   le fond crème. On les force en charbon profond.
   ──────────────────────────────────────────── */
[data-theme="classique"][data-mode="light"] .hero-title .emphasis {
  color: #1F140E;
  text-shadow: 0 1px 0 rgba(255,255,255,.6);
}
[data-theme="classique"][data-mode="light"] .hero-title .italic {
  color: #4A2E12;
}
[data-theme="classique"][data-mode="light"] .hero-stroke-svg {
  color: var(--accent-2);
}
[data-theme="classique"][data-mode="light"] .hero-stroke-svg path { opacity: .9; }
[data-theme="classique"][data-mode="light"] .hero-lead em {
  color: var(--accent-2);
  font-weight: 700;
}

/* ════════════════════════════════════════════
   DARK MODE — refresh complet
   Palette de l'atelier en version chaleureuse pour le sombre :
   on quitte le navy bleuté générique et on bascule sur
   un ivoire chaud + accents terre cuite, ocre laiton et
   céladon clair. Le but : que le sombre garde l'ADN
   artisan, pas un dark UI froid.
   ──────────────────────────────────────────── */

/* HERO en sombre — couleurs hardcodées du tiler.css en clair → ré-écrites */
[data-theme="classique"][data-mode="dark"] .hero-title       { color: #F2EDE3; text-shadow: 0 1px 0 rgba(0,0,0,.45); }
[data-theme="classique"][data-mode="dark"] .hero-title .italic   { color: #E8C9A6; }
[data-theme="classique"][data-mode="dark"] .hero-title .emphasis { color: #F2EDE3; }
[data-theme="classique"][data-mode="dark"] .hero-stroke-svg      { color: var(--accent-2); }
[data-theme="classique"][data-mode="dark"] .hero-stroke-svg path { opacity: 1; }
[data-theme="classique"][data-mode="dark"] .hero-lead         { color: #D8CDB9; }
[data-theme="classique"][data-mode="dark"] .hero-lead em      { color: var(--accent-2); font-weight: 700; }
[data-theme="classique"][data-mode="dark"] .hero-eyebrow      { color: #E08A5C; }
[data-theme="classique"][data-mode="dark"] .hero-rating       { color: #D8CDB9; }
[data-theme="classique"][data-mode="dark"] .hero-rating em    { color: #F2EDE3; }
[data-theme="classique"][data-mode="dark"] .hero-rating .icon { color: #E8C58D; }

/* HERO stats (les 3 chiffres clé) — étaient en brun foncé sur fond sombre */
[data-theme="classique"][data-mode="dark"] .stat-num { color: #F2EDE3; }
[data-theme="classique"][data-mode="dark"] .stat-suf { color: #D8CDB9; }
[data-theme="classique"][data-mode="dark"] .stat-lab { color: #C2B5A4; }
[data-theme="classique"][data-mode="dark"] .stat     { border-color: rgba(232,218,200,.20); }

/* SECTIONS : titres, kickers, paragraphes lifestyle */
[data-theme="classique"][data-mode="dark"] .section-title { color: #F2EDE3; }
[data-theme="classique"][data-mode="dark"] .section-title em { font-style: italic; }
[data-theme="classique"][data-mode="dark"] .section-head p,
[data-theme="classique"][data-mode="dark"] .lead,
[data-theme="classique"][data-mode="dark"] .about-text p,
[data-theme="classique"][data-mode="dark"] .methode__step p,
[data-theme="classique"][data-mode="dark"] .step__desc,
[data-theme="classique"][data-mode="dark"] .step__text { color: #D8CDB9; }

[data-theme="classique"][data-mode="dark"] .kicker { color: var(--accent-2); }

/* Méthode — étapes : descriptions + pas perdues dans le dark */
[data-theme="classique"][data-mode="dark"] .methode__step h3,
[data-theme="classique"][data-mode="dark"] .step__title { color: #F2EDE3; }
[data-theme="classique"][data-mode="dark"] .methode__step em,
[data-theme="classique"][data-mode="dark"] .step__desc em,
[data-theme="classique"][data-mode="dark"] .methode em { color: #E8C58D; font-style: italic; font-weight: 600; }

/* About / paragraphes blocs */
[data-theme="classique"][data-mode="dark"] .about-quote p,
[data-theme="classique"][data-mode="dark"] blockquote p { color: #E8DAC8; }
[data-theme="classique"][data-mode="dark"] .portrait-caption span { color: #D8CDB9; }

/* Boutons fantômes — bord trop pâle */
[data-theme="classique"][data-mode="dark"] .btn-ghost {
  color: #E8DAC8;
  border-color: rgba(232,218,200,.45);
  background: rgba(232,218,200,.06);
}
[data-theme="classique"][data-mode="dark"] .btn-ghost:hover {
  background: rgba(232,218,200,.14);
  border-color: var(--accent-2);
  color: #fff;
}

/* SIMULATEUR — nouvelle palette chaude (au lieu du navy générique).
   On reprend le brun chaud profond du paper + accents terre cuite + ocre
   doré, pour rester dans l'univers artisan. */
[data-theme="classique"][data-mode="dark"] .advice-sim {
  background:
    radial-gradient(ellipse at top right, rgba(224,138,92,.12), transparent 60%),
    linear-gradient(160deg, #2C211B 0%, #1F1813 100%);
  color: #F2EDE3;
  box-shadow:
    0 30px 60px -28px rgba(0,0,0,.75),
    inset 0 0 0 1px rgba(215,174,122,.18);
}
[data-theme="classique"][data-mode="dark"] .advice-sim h3 { color: #F2EDE3; }
[data-theme="classique"][data-mode="dark"] .sim-tag {
  color: var(--accent-3);
  border-color: rgba(215,174,122,.55);
  background: rgba(215,174,122,.10);
}
[data-theme="classique"][data-mode="dark"] .sim-sub        { color: #D8CDB9; }
[data-theme="classique"][data-mode="dark"] .sim-label      { color: #D8CDB9; letter-spacing: .12em; }
[data-theme="classique"][data-mode="dark"] .sim-select {
  background: rgba(255,255,255,.05);
  border-color: rgba(215,174,122,.35);
  color: #F2EDE3;
}
[data-theme="classique"][data-mode="dark"] .sim-select option { background: #1F1813; color: #F2EDE3; }
[data-theme="classique"][data-mode="dark"] .sim-toggle {
  background: rgba(255,255,255,.04);
  border-color: rgba(215,174,122,.22);
}
[data-theme="classique"][data-mode="dark"] .sim-toggle button { color: #D8CDB9; }
[data-theme="classique"][data-mode="dark"] .sim-toggle button.is-active {
  background: linear-gradient(135deg, var(--accent-3), var(--accent-2));
  color: #1F1813;
  box-shadow: 0 6px 20px rgba(224,138,92,.35);
}
[data-theme="classique"][data-mode="dark"] .sim-range {
  background: linear-gradient(to right, var(--accent-2), var(--accent-3));
  height: 3px;
}
[data-theme="classique"][data-mode="dark"] .sim-range::-webkit-slider-thumb {
  background: var(--accent-3);
  box-shadow: 0 0 0 3px rgba(215,174,122,.25), 0 4px 12px rgba(0,0,0,.45);
}
[data-theme="classique"][data-mode="dark"] .sim-result {
  background: rgba(215,174,122,.06);
  border: 1px dashed rgba(215,174,122,.45);
}
[data-theme="classique"][data-mode="dark"] .sim-result-label {
  color: var(--accent-3);
  letter-spacing: .18em;
  font-weight: 600;
}
[data-theme="classique"][data-mode="dark"] .sim-result-value {
  color: #F2EDE3;
  text-shadow: 0 0 18px rgba(224,138,92,.35);
}
[data-theme="classique"][data-mode="dark"] .sim-result-pots strong { color: var(--accent-3); }
[data-theme="classique"][data-mode="dark"] .sim-result-note  { color: rgba(242,237,227,.7); font-style: italic; }

/* Conseils à gauche — recolorisation chaude */
[data-theme="classique"][data-mode="dark"] .tips-list h3 { color: #F2EDE3; }
[data-theme="classique"][data-mode="dark"] .tips-list p  { color: #D8CDB9; }
[data-theme="classique"][data-mode="dark"] .tip-step     { color: var(--accent-2); }
[data-theme="classique"][data-mode="dark"] .advice-tips .kicker { color: var(--accent-2); }
[data-theme="classique"][data-mode="dark"] .advice-tips .section-title { color: #F2EDE3; }
[data-theme="classique"][data-mode="dark"] .advice-tips .section-title em { color: var(--accent-3); }
[data-theme="classique"][data-mode="dark"] .advice .section-title em { color: var(--accent-3); }
[data-theme="classique"][data-mode="dark"] .advice .kicker { color: var(--accent-2); }

/* Cards services / opt-cards / témoignages — surfaces et textes */
[data-theme="classique"][data-mode="dark"] .service-card,
[data-theme="classique"][data-mode="dark"] .opt-card,
[data-theme="classique"][data-mode="dark"] .rev-card {
  background: rgba(232,218,200,.04);
  border-color: rgba(232,218,200,.14);
  color: #E8DAC8;
}
[data-theme="classique"][data-mode="dark"] .service-card h3,
[data-theme="classique"][data-mode="dark"] .opt-card h3,
[data-theme="classique"][data-mode="dark"] .rev-card h4 { color: #F2EDE3; }
[data-theme="classique"][data-mode="dark"] .service-card p,
[data-theme="classique"][data-mode="dark"] .opt-card p,
[data-theme="classique"][data-mode="dark"] .rev-card p { color: #C2B5A4; }
[data-theme="classique"][data-mode="dark"] .rev-author small { color: #C2B5A4; }
[data-theme="classique"][data-mode="dark"] .opt-num { color: var(--accent-3); }

/* Champs de formulaire */
[data-theme="classique"][data-mode="dark"] .field label { color: #E8DAC8; letter-spacing: .04em; }
[data-theme="classique"][data-mode="dark"] .field input,
[data-theme="classique"][data-mode="dark"] .field select,
[data-theme="classique"][data-mode="dark"] .field textarea {
  background: rgba(232,218,200,.04);
  border-color: rgba(215,174,122,.30);
  color: #F2EDE3;
}
[data-theme="classique"][data-mode="dark"] .field input::placeholder,
[data-theme="classique"][data-mode="dark"] .field textarea::placeholder { color: #8A7E6B; }

/* Hero themes / tp-card en sombre — étaient sur fond paper light dur */
[data-theme="classique"][data-mode="dark"] .tp-card {
  background: rgba(232,218,200,.04);
  border-color: rgba(232,218,200,.14);
}
[data-theme="classique"][data-mode="dark"] .tp-card .tp-card__name { color: #F2EDE3; }
[data-theme="classique"][data-mode="dark"] .tp-card .tp-card__desc { color: #C2B5A4; }
[data-theme="classique"][data-mode="dark"] .hero-themes__label { color: #E8DAC8; }
[data-theme="classique"][data-mode="dark"] .hero-themes__label em { color: var(--accent-2); }

/* Footer — liens & libellés */
[data-theme="classique"][data-mode="dark"] .foot-tag,
[data-theme="classique"][data-mode="dark"] .foot-grid ul a,
[data-theme="classique"][data-mode="dark"] .foot-legal,
[data-theme="classique"][data-mode="dark"] .foot-bottom p { color: #C2B5A4; }
[data-theme="classique"][data-mode="dark"] .foot-grid ul a:hover { color: var(--accent-2); }
[data-theme="classique"][data-mode="dark"] .foot-h { color: #F2EDE3; }

/* Header sticky en dark — fond plus sombre, lisible */
[data-theme="classique"][data-mode="dark"] .site-header {
  background: rgba(26,24,21,.85);
  border-bottom-color: rgba(232,218,200,.10);
}
[data-theme="classique"][data-mode="dark"] .site-nav a { color: #E8DAC8; }
[data-theme="classique"][data-mode="dark"] .site-nav a:hover { color: var(--accent-2); }
[data-theme="classique"][data-mode="dark"] .site-nav a.nav-cta { background: var(--accent-2); color: #1A1815; }