/* DS Overclock — Theme Noir. S'ajoute au CSS clair sans changer la mise en page. */
:root {
  color-scheme: dark;
  --bg: #0b0c10;
  --surface: #17191f;
  --soft: #111318;
  --ink: #f2f3f6;
  --muted: #a3a7b2;
  --faint: #838892;
  --line: #292c34;
  --red: #f0443e;
  --red-dark: #d63530;
  --shadow: 0 16px 50px rgba(0,0,0,.30);
}
html { color-scheme: dark; }
body {
  background: radial-gradient(ellipse 70% 480px at 90% 3%, rgba(138,22,28,.075), transparent 78%), var(--bg);
  color: var(--ink);
}
::selection { background: #5d2025; color: #fff; }
:focus-visible { outline-color: #ff827d; }
.skip-link { background: #f2f3f6; color: #0d0e11; }

/* Navigation */
.header {
  background: rgba(11,12,16,.94);
  border-bottom-color: #272a30;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
}
.nav a { color: #b2b6bf; }
.nav a:hover, .nav a[aria-current="page"] { color: #fff; }
.nav a[aria-current="page"]:after { background: var(--red); }
.menu-toggle { border-color: #3a3e48; background: #17191e; }
.menu-toggle span { background: #f6f6f8; }

/* Boutons & interactions */
.button-solid {
  color: #fff; background: var(--red);
  box-shadow: 0 5px 20px rgba(240,68,62,.12);
}
.button-solid:hover { background: var(--red-dark); box-shadow: 0 8px 24px rgba(240,68,62,.18); }
.button-soft { color: #f1f2f4; background: #23262d; border-color: #30333b; }
.button-soft:hover { background: #2d3038; border-color: #464952; }
.button-outline { background: transparent; border-color: #424650; color: var(--ink); }
.button-outline:hover { color: #fff; border-color: var(--red); background: rgba(240,68,62,.07); }
.button-white { background: #f5f5f6; color: #121318; }
.button-white:hover { background: #e4e5e7; }
.text-link { border-bottom-color: #777e87; }
.text-link:hover { border-color: var(--red); }

/* En-tete et sections de la page d'accueil */
.hero-copy>p, .section-heading>p, .how-layout>div:first-child>p { color: var(--muted); }
.hero-meta, .muted-meta { color: #9297a1; }
.hero-meta-divider { background: #686e78; }
.small-check { color: #75d99b; }
.hero-media {
  background: #101114;
  box-shadow: 0 25px 75px rgba(0,0,0,.48), 0 0 0 1px rgba(255,255,255,.045);
}
.hero-media img { filter: saturate(.86) contrast(1.07); }
.hero-sticker { background: rgba(22,23,27,.96); color: #f1f2f6; box-shadow: 0 4px 30px #0008; }
.hero-sticker strong { color: #f7f7fa; }
.announcement-section { background: #101217; border-block-color: var(--line); }
.announcement-list article { background: var(--surface); border-color: var(--line); }
.service-card { background: var(--surface); border-color: var(--line); }
.service-card:hover { border-color: #474a55; box-shadow: var(--shadow); }
.image-frame { background: #202229; }
.image-frame img { filter: saturate(.83) contrast(1.08); }
.round-arrow { border-color: #414550; color: #f0f1f3; }
.service-card:hover .round-arrow { border-color: var(--red); color: #fff; }
.how-section { background: #111318; border-block-color: var(--line); }
.step { border-bottom-color: #2d3039; }
.step>span { background: #22252c; color: #ff665f; }
.clarity-icon, .case-icon { background: rgba(240,68,62,.105); color: #ff615a; }
.cta-panel {
  background: linear-gradient(115deg, #25171c 0%, #191a21 62%, #14161a 100%);
  border: 1px solid #3a272f;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}
.cta-panel h2 { color: #fff; }
.cta-panel p { color: #b5b5c0; }
.cta-panel:after { border-color: rgba(240,68,62,.035); }

/* Services, PC sur mesure, tarifs */
.service-detail, .use-cases article, .tariff-row, .product, .contact-form {
  background: var(--surface); border-color: var(--line);
}
.detail-photo, .split-photo, .product-image { background: #1e2129; }
.detail-photo img, .split-photo img, .product-image img { filter: saturate(.88) contrast(1.06); }
.check-list li { color: #b6bac3; }
.slim-callout, .tariff-aside, .aside-note { background: #171a20; border: 1px solid #30333d; }
.tariff-amount span, .shop-topline, .product-info small { color: #9299a4; }
.product-label { background: rgba(18,19,23,.93); color: #eeeef2; border: 1px solid #3a3e48; }
.product:hover { border-color: #484c56; }
.empty-state { border-color: #454955; background: #111318; }
.shop-disclaimer { border-color: var(--line); }

/* Formulaires — lisibilite et autocompletion navigateur */
.contact-form label { color: #e1e3e9; }
.contact-form input, .contact-form select, .contact-form textarea {
  background: #101217; color: #f2f3f6; border-color: #383c46;
}
.contact-form input:hover, .contact-form select:hover, .contact-form textarea:hover { border-color: #515664; }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus {
  border-color: var(--red); box-shadow: 0 0 0 3px rgba(240,68,62,.12);
}
.contact-form input::placeholder, .contact-form textarea::placeholder { color: #818792; }
.contact-form input:-webkit-autofill,
.contact-form input:-webkit-autofill:hover,
.contact-form input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #101217 inset !important;
  -webkit-text-fill-color: #f2f3f6 !important;
  caret-color: #f2f3f6;
}
.form-bottom p { color: #9298a3; }
.contact-fact a { text-decoration-color: #59606b; }

/* Pied de page & messages */
.footer { background: #101115; border-top-color: #2a2c34; }
.footer-group .footer-email { color: #e9eaf0; text-decoration-color: #636774; }
.footer-bottom { color: #90939d; border-top-color: #30323a; }
.flash { background: #14271d; color: #d5f8e2; border-color: #29513a; }
.flash.error { background: #30171b; color: #ffe2df; border-color: #69343b; }

/* Menu telephone: respecte toute la structure responsive d'origine */
@media (max-width: 760px) {
  .nav { background: #0e1015; border-top-color: var(--line); }
  .nav a { color: #e2e4e9; }
  .nav .nav-mobile-cta { color: #fff; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-media, .service-card { transition: none; }
}