/*
 * Concept Numeric — exemple de charte « Bleu nuit industriel »
 * Palette : bleu nuit, blanc, gris froid et noir.
 * Ce fichier est chargé après la feuille principale afin de ne pas toucher
 * au formulaire, au SMTP, au CAPTCHA ni à la structure du site.
 */

:root {
  --cn-blue-950: #061522;
  --cn-blue-900: #0a2033;
  --cn-blue-800: #123653;
  --cn-blue-700: #1f5278;
  --cn-white: #ffffff;
  --cn-gray-050: #f5f7f8;
  --cn-gray-100: #edf1f3;
  --cn-gray-200: #d7dee3;
  --cn-gray-400: #96a1aa;
  --cn-gray-600: #5c6872;
  --cn-gray-800: #283039;
  --cn-black: #090c0f;

  --background: var(--cn-gray-050);
  --foreground: var(--cn-black);
  --card: var(--cn-white);
  --card-foreground: var(--cn-black);
  --primary: var(--cn-blue-900);
  --primary-foreground: var(--cn-white);
  --secondary: var(--cn-black);
  --secondary-foreground: var(--cn-white);
  --muted: var(--cn-gray-100);
  --muted-foreground: var(--cn-gray-600);
  --accent: var(--cn-blue-700);
  --accent-foreground: var(--cn-white);
  --border: var(--cn-gray-200);
  --input: var(--cn-gray-200);
  --ring: var(--cn-blue-700);
}

html,
body {
  background: var(--cn-gray-050);
  color: var(--cn-black);
}

::selection {
  color: var(--cn-white);
  background: var(--cn-blue-700);
}

/* En-tête et identité */
.site-header {
  color: var(--cn-white);
  background: rgba(6, 21, 34, 0.94);
  border-bottom-color: rgba(255, 255, 255, 0.16);
}

.brand-mark {
  color: var(--cn-white);
  background: var(--cn-blue-700);
  border-color: var(--cn-blue-700);
}

.brand,
.brand-name,
.desktop-nav a {
  color: var(--cn-white);
}

.brand-name strong,
.desktop-nav a:hover {
  color: #c4d2de;
}

.header-cta {
  color: var(--cn-white);
  background: transparent;
  border-color: rgba(255, 255, 255, 0.5);
}

.header-cta:hover {
  color: var(--cn-blue-950);
  background: var(--cn-white);
  border-color: var(--cn-white);
}

/* Accueil */
.hero {
  background: var(--cn-black);
}

.hero-image {
  filter: saturate(0.55) contrast(1.06);
}

.hero-shade {
  background: linear-gradient(
    90deg,
    rgba(6, 21, 34, 0.96) 0%,
    rgba(6, 21, 34, 0.82) 44%,
    rgba(9, 12, 15, 0.48) 100%
  );
}

.hero-grid {
  background-image: linear-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.12) 1px, transparent 1px);
}

.eyebrow,
.hero-intro,
.hero-note,
.scroll-cue,
.text-link {
  color: var(--cn-white);
}

.eyebrow span,
.hero-note > span {
  background: #afc0cf;
  color: #afc0cf;
}

.hero h1,
.hero h1 em {
  color: var(--cn-white);
}

.hero h1 em {
  color: #b9c9d6;
}

.primary-link {
  color: var(--cn-white);
  background: var(--cn-blue-700);
}

.primary-link:hover {
  color: var(--cn-blue-950);
  background: var(--cn-white);
}

.text-link,
.scroll-cue {
  border-color: rgba(255, 255, 255, 0.5);
}

.text-link:hover,
.scroll-cue:hover {
  color: #c4d2de;
  border-color: #c4d2de;
}

/* Sections claires */
.intro-section,
.projects-section,
.contact-section {
  background: var(--cn-gray-050);
}

.section-index,
.projects-heading,
.materials-strip,
.contact-section,
.legal-section {
  border-color: var(--cn-gray-200);
}

.section-index span,
.section-kicker,
.section-kicker.copper,
h2 em,
.local-number > span,
.local-applications span,
.project-card figcaption span,
.process-list > li > span,
.faq-list summary::after,
.legal-details summary::after,
.contact-details svg {
  color: var(--cn-blue-700);
}

.section-index p,
.intro-copy p,
.projects-intro,
.contact-heading > p:not(.section-kicker),
.local-copy > p:not(.section-kicker) {
  color: var(--cn-gray-600);
}

h2,
.service-card h3,
.legal-details summary {
  color: var(--cn-black);
}

.service-card {
  background: var(--cn-white);
  border-color: var(--cn-gray-200);
}

.service-card:hover {
  color: var(--cn-white);
  background: var(--cn-blue-900);
  border-color: var(--cn-blue-900);
}

.service-card:hover h3,
.service-card:hover p,
.service-card:hover li,
.service-card:hover svg,
.service-card:hover .service-top span {
  color: var(--cn-white);
}

.service-card p,
.service-card li,
.service-top span {
  color: var(--cn-gray-600);
}

.service-top svg {
  color: var(--cn-blue-700);
}

/* Atelier et méthode — aplats francs, sans effet néon */
.machine-section,
.process-section,
.faq-section {
  color: var(--cn-white);
  background: var(--cn-blue-950);
}

.machine-visual::after {
  background: linear-gradient(0deg, rgba(6, 21, 34, 0.82), transparent 55%);
}

.machine-caption span,
.machine-copy h2 em,
.process-heading h2 em,
.faq-section h2 em {
  color: #b9c9d6;
}

.machine-lead,
.precision-note,
.process-list p,
.faq-list details p {
  color: #aeb8c1;
}

.machine-features,
.machine-features div + div,
.process-list,
.process-list li,
.faq-list,
.faq-list details {
  border-color: #314657;
}

.machine-features svg,
.process-list svg {
  color: #9fb4c5;
}

.process-list li:hover {
  background: var(--cn-blue-900);
}

/* Ancrage local */
.local-section {
  background: var(--cn-gray-100);
  border-color: var(--cn-gray-200);
}

.local-number p {
  color: var(--cn-gray-600);
  border-color: var(--cn-gray-400);
}

.local-link,
.email-link {
  color: var(--cn-blue-800);
  border-color: var(--cn-blue-700);
}

.local-link:hover,
.email-link:hover {
  color: var(--cn-black);
  border-color: var(--cn-black);
}

.local-applications,
.local-applications li {
  border-color: #c6cfd6;
}

.local-applications li {
  color: var(--cn-gray-800);
}

/* Réalisations */
.project-card {
  background: var(--cn-gray-200);
}

.project-card.project-dark img {
  background: var(--cn-black);
}

.project-card::after {
  background: linear-gradient(transparent, rgba(6, 21, 34, 0.9));
}

.project-card:hover img {
  filter: saturate(0.68) contrast(1.04);
}

.project-card figcaption span {
  color: #c4d2de;
}

/* Bande matières */
.materials-strip {
  background: var(--cn-white);
}

.materials-strip > p {
  color: var(--cn-gray-600);
}

.materials-strip div span {
  color: var(--cn-gray-800);
}

.materials-strip div i {
  background: var(--cn-blue-700);
}

/* Formulaire */
.contact-form {
  background: var(--cn-white);
  border-top-color: var(--cn-blue-700);
  box-shadow: 0 18px 50px rgba(6, 21, 34, 0.08);
}

.contact-form label > span,
.form-submit p {
  color: var(--cn-gray-600);
}

.premium-input,
.premium-textarea {
  color: var(--cn-black) !important;
  border-color: var(--cn-gray-400) !important;
}

.premium-input:focus-visible,
.premium-textarea:focus-visible {
  border-color: var(--cn-blue-700) !important;
}

.submit-button {
  color: var(--cn-white) !important;
  background: var(--cn-blue-900) !important;
}

.submit-button:hover {
  background: var(--cn-black) !important;
}

.captcha-internal,
#contact-captcha-image {
  border-color: var(--cn-gray-400) !important;
  background: var(--cn-gray-100) !important;
}

#refresh-captcha {
  color: var(--cn-blue-900) !important;
  background: var(--cn-white) !important;
  border-color: var(--cn-gray-400) !important;
}

#refresh-captcha:hover {
  color: var(--cn-white) !important;
  background: var(--cn-blue-900) !important;
  border-color: var(--cn-blue-900) !important;
}

/* Mentions, pied de page et cookies */
.legal-section {
  background: var(--cn-gray-100);
}

.legal-details,
.legal-details details {
  border-color: #c6cfd6;
}

.legal-details details p {
  color: var(--cn-gray-600);
}

footer {
  color: var(--cn-gray-200);
  background: var(--cn-black);
}

.footer-brand {
  color: var(--cn-white);
}

footer > p,
footer nav a,
.footer-bottom p,
.cookie-settings {
  color: var(--cn-gray-400);
}

footer nav a:hover,
.cookie-settings:hover {
  color: var(--cn-white);
  border-color: var(--cn-white);
}

.cookie-banner {
  color: var(--cn-white);
  background: rgba(6, 21, 34, 0.98);
  border-color: #415466;
  border-top-color: var(--cn-blue-700);
}

.cookie-icon,
.cookie-copy a {
  color: #b9c9d6;
}

.cookie-icon {
  border-color: #526576;
}

.cookie-copy > p:not(.cookie-title) {
  color: #aeb8c1;
}

.cookie-actions button {
  color: var(--cn-white);
  border-color: #71808d;
}

.cookie-actions button:last-child {
  color: var(--cn-white);
  background: var(--cn-blue-700);
  border-color: var(--cn-blue-700);
}

@media (max-width: 760px) {
  .site-header {
    background: rgba(6, 21, 34, 0.97);
  }

  .hero-shade {
    background: linear-gradient(0deg, rgba(6, 21, 34, 0.92), rgba(6, 21, 34, 0.58));
  }
}