:root {
  --navy: #0B0F17;
  --brass: #C1602E;
  --brass-light: #E8A968;
  --paper: #FBFBFD;
  --paper-2: #F3F1EC;
  --ink: #17171A;
  --muted: #4B4B50;
  --border: rgba(0,0,0,0.10);
  --radius-lg: 24px;
  --radius-md: 16px;
  --card-bg: #ffffff;
}

html.dark-mode {
  --paper: #0A0A0C;
  --paper-2: #17171A;
  --ink: #F3F3F5;
  --muted: #C6C6CC;
  --border: rgba(255,255,255,0.14);
  --card-bg: #1C1C1F;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  font-size: 16px;
  transition: background .25s ease, color .25s ease;
}

a { color: inherit; }

/* ===== Bouton mode nuit ===== */
.dark-toggle {
  background: none; border:1.5px solid var(--border); color: var(--ink);
  width:36px; height:36px; border-radius:50%; cursor:pointer; font-size:16px;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  transition: background .2s ease, border-color .2s ease;
}
.dark-toggle:hover { background: var(--paper-2); }

/* ===== Header ===== */
.site-header {
  position: sticky; top: 0; z-index: 1000;
  background: rgba(251,251,253,0.82);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 32px;
}
html.dark-mode .site-header { background: rgba(10,10,12,0.82); }
.logo-badge img { height: 38px; display:block; }
.site-nav { display:flex; align-items:center; gap:26px; }
.site-nav a { font-size:14.5px; text-decoration:none; color:var(--ink); }

.btn-outline-header {
  background: var(--navy); color:#fff; border:none;
  font-size:14px; font-weight:600; padding:9px 18px; border-radius:980px; cursor:pointer; text-decoration:none;
  transition: transform .2s ease;
}
.btn-outline-header:hover { transform: translateY(-1px); }

.btn-employe-header, .btn-employe, .footer-employe {
  display:inline-block; background:#5A5A5F; color:#fff; border:none;
  font-size:13.5px; font-weight:600; padding:9px 18px; border-radius:980px; cursor:pointer; text-decoration:none;
  transition: background .2s ease;
}
.btn-employe-header:hover, .btn-employe:hover, .footer-employe:hover { background:#414146; }

.lang-toggle { display:inline-flex; align-items:center; gap:2px; background:var(--paper-2); border-radius:980px; padding:3px; }
.lang-toggle button { background:none; border:none; font-size:12.5px; font-weight:700; padding:6px 12px; border-radius:980px; cursor:pointer; color:var(--muted); font-family:inherit; }
.lang-toggle button.active { background: var(--card-bg); color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,0.15); }

/* ===== Hero ===== */
.hero { text-align:center; padding: 90px 24px 70px; max-width: 900px; margin: 0 auto; }
.hero .kicker { font-size:14px; font-weight:700; color:var(--brass); letter-spacing:0.02em; margin-bottom:18px; }
.hero h1 { font-size:60px; line-height:1.06; font-weight:600; letter-spacing:-0.03em; margin:0 0 22px; color:var(--ink); }
.hero p { font-size:20px; line-height:1.6; color:var(--muted); max-width:600px; margin:0 auto 36px; font-weight:400; }
.hero-actions { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

.btn-gold {
  background: linear-gradient(90deg,var(--brass-light),var(--brass)); color:#241100; border:none;
  font-size:17px; font-weight:700; padding:16px 32px; border-radius:980px; cursor:pointer; text-decoration:none; display:inline-block;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease;
}
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(193,96,46,0.35); }

.btn-outline-hero {
  background: var(--navy); color:#fff; border:none;
  font-size:17px; font-weight:700; padding:16px 32px; border-radius:980px; cursor:pointer; text-decoration:none; display:inline-block;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease;
}
.btn-outline-hero:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(11,15,23,0.35); }

/* ===== Services (accueil) ===== */
.section { padding: 20px 24px; }
.container { max-width: 1100px; margin:0 auto; }
.section-title { font-size:38px; font-weight:700; letter-spacing:-0.02em; margin:0 0 30px; }
.services-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.service-card {
  background: var(--card-bg); border:1px solid var(--border); border-radius:var(--radius-lg); padding:38px 30px; text-align:left;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, background .25s ease;
}
.service-card:hover { transform: translateY(-6px); box-shadow: 0 30px 60px rgba(11,15,23,0.14); }
.service-icon {
  width:56px; height:56px; border-radius:16px; background:var(--navy); color:#E3B953;
  display:flex; align-items:center; justify-content:center; margin-bottom:22px;
}
.service-icon svg { width:28px; height:28px; }
.service-card h3 { font-size:21px; font-weight:700; margin:0 0 10px; letter-spacing:-0.01em; }
.service-card p { font-size:15.5px; line-height:1.7; color:var(--muted); margin:0; }

/* ===== Bande de confiance ===== */
.trust-band { padding: 20px 24px 70px; }
.trust-inner {
  display:flex; justify-content:center; align-items:stretch; flex-wrap:wrap;
  max-width: 900px; margin: 0 auto;
}
.trust-inner span {
  flex:1; min-width:220px; display:flex; flex-direction:column; align-items:center; text-align:center;
  padding: 0 28px; gap:10px; font-size:14.5px; color:var(--muted); line-height:1.6; font-weight:500;
}
.trust-inner span:not(:last-child) { border-right:1px solid var(--border); }
@media (max-width:700px) {
  .trust-inner span { border-right:none !important; border-bottom:1px solid var(--border); padding:18px 10px; }
  .trust-inner span:last-child { border-bottom:none; }
}

/* ===== Bande CTA ===== */
.cta-band { background: var(--navy); padding: 80px 24px; }
.cta-box { max-width:900px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap; }
.cta-box h3 { color:#fff; font-size:27px; font-weight:700; margin:0 0 8px; letter-spacing:-0.01em; }
.cta-box p { color:#C7D2E0; font-size:16px; margin:0; max-width:420px; line-height:1.6; }
.btn-cta {
  background: linear-gradient(90deg,var(--brass-light),var(--brass)); color:#241100; border:none;
  font-size:16px; font-weight:700; padding:15px 28px; border-radius:980px; cursor:pointer; text-decoration:none; white-space:nowrap;
  transition: transform .25s ease;
}
.btn-cta:hover { transform: translateY(-2px); }

/* ===== Footer ===== */
.site-footer { display:flex; flex-direction:column; align-items:center; gap:16px; padding:60px 24px; text-align:center; border-top:1px solid var(--border); }
.site-footer .logo-badge img { height:32px; }
.footer-links { display:flex; gap:18px; flex-wrap:wrap; justify-content:center; font-size:14px; color:var(--muted); align-items:center; }
.footer-links a { text-decoration:none; font-size:14px; color:var(--muted); }

/* ===== Formulaires (devis, connexion, etc.) ===== */
.form-page { background:var(--paper); min-height:100vh; padding:50px 24px; }
.form-wrap { max-width:520px; margin:0 auto; }
.form-back { color:var(--muted); text-decoration:none; font-size:14px; display:inline-flex; align-items:center; gap:4px; margin-bottom:20px; }
.form-wrap h2 { font-size:31px; font-weight:700; letter-spacing:-0.02em; margin:0 0 8px; color:var(--ink); }
.form-wrap > p { color:var(--muted); font-size:16px; margin:0 0 30px; }
.form-card { background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius-lg); padding:34px; }
.field { margin-bottom:18px; }
.field label { display:block; font-size:13.5px; font-weight:700; color:var(--muted); margin-bottom:7px; }
.field input, .field textarea, .field-row input {
  width:100%; padding:13px 15px; border-radius:12px; border:1px solid var(--border);
  font-family:inherit; font-size:15.5px; box-sizing:border-box; background:var(--paper-2); color:var(--ink);
}
.field-row { display:flex; gap:14px; }
.field-row .field { flex:1; }
.checkbox-row { display:flex; align-items:center; gap:8px; font-size:14.5px; color:var(--muted); margin-bottom:18px; }
.submit-btn {
  width:100%; background: linear-gradient(90deg,var(--brass-light),var(--brass)); color:#241100; border:none;
  font-size:16.5px; font-weight:700; padding:16px; border-radius:980px; cursor:pointer;
  transition: transform .2s ease;
}
.submit-btn:hover { transform: translateY(-1px); }
.submit-btn:disabled { opacity:.6; cursor:default; transform:none; }
.form-msg { font-size:14px; margin-top:10px; padding:11px 15px; border-radius:10px; display:none; }
.form-msg.success { background:#DDEFE2; color:#1E4E30; }
.form-msg.error { background:#F5DEDC; color:#6E2A23; }
.hp-field { position:absolute; left:-9999px; }

/* ============================================================
   Couverture mode nuit — toutes les pages du site
   (cible les classes de cartes connues de chaque page, pour
   éviter d'avoir à retoucher chaque fichier individuellement)
   ============================================================ */
html.dark-mode .intro-card,
html.dark-mode .h-card,
html.dark-mode .l-card,
html.dark-mode .e-card,
html.dark-mode .task-card,
html.dark-mode .hub-card,
html.dark-mode .finance-card,
html.dark-mode .card,
html.dark-mode .service-tile-front,
html.dark-mode .upcoming-tile,
html.dark-mode .tile-front {
  background: var(--card-bg) !important;
  border-color: var(--border) !important;
}
html.dark-mode .hub-page,
html.dark-mode .abo-page,
html.dark-mode .e-page,
html.dark-mode .projet-body,
html.dark-mode .l-body,
html.dark-mode .h-body,
html.dark-mode .apropos-body {
  background: var(--paper) !important;
}
html.dark-mode input,
html.dark-mode textarea {
  background: var(--paper-2) !important;
  color: var(--ink) !important;
  border-color: var(--border) !important;
}