/**
 * Thème clair / sombre unifié — tout le site public S&S
 * Classe body.dark + html.ss-dark (même rendu partout)
 */

/* Clair */
html:not(.ss-dark):root,
html:not(.ss-dark) {
  --cream: #e8e5df;
  --white: #f5f3ef;
  --gray-1: #d8dee8;
  --gray-2: #5f6f88;
  --text: #2a3850;
  --navy: #152038;
  --navy-2: #1e2d4f;
  --terra: #e06a28;
  --terra-2: #f07838;
  --shadow: 0 10px 30px rgba(21, 32, 56, 0.12);
}

/* Sombre : contraste élevé (textes lisibles) */
html.ss-dark,
html.ss-dark body,
body.dark {
  color-scheme: dark;
  --cream: #0a0e14;
  --white: #1c2433;
  --gray-1: #3d4a61;
  --gray-2: #c8d2e2;
  --text: #f2f5fa;
  --navy: #eef3fa;
  --navy-2: #d7e1f0;
  --terra: #e07a45;
  --terra-2: #f09a68;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}

/* ——— Base ——— */
html.ss-dark body,
body.dark {
  background: var(--cream);
  color: var(--text);
}

html.ss-dark,
html.ss-dark body,
body.dark {
  color: var(--text);
}

html.ss-dark p,
html.ss-dark li,
html.ss-dark span,
html.ss-dark label,
html.ss-dark td,
html.ss-dark th,
html.ss-dark small,
html.ss-dark .field label,
html.ss-dark .field-hint,
html.ss-dark .section-sub,
html.ss-dark .meta,
html.ss-dark .note,
html.ss-dark .login-hint,
body.dark p,
body.dark li,
body.dark span,
body.dark label,
body.dark td,
body.dark th,
body.dark small,
body.dark .field label,
body.dark .field-hint,
body.dark .section-sub,
body.dark .meta,
body.dark .note,
body.dark .login-hint {
  color: var(--text);
}

html.ss-dark .field-hint,
html.ss-dark .section-sub,
html.ss-dark .meta,
html.ss-dark .note:not(#instructions):not(.ss-dl-howto),
html.ss-dark .login-hint,
html.ss-dark .section-label,
body.dark .field-hint,
body.dark .section-sub,
body.dark .meta,
body.dark .note:not(#instructions):not(.ss-dl-howto),
body.dark .login-hint,
body.dark .section-label {
  color: var(--gray-2) !important;
}

body.dark header,
html.ss-dark header {
  background: var(--white);
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.4);
  border-bottom: 1px solid var(--gray-1);
}

body.dark .topbar,
html.ss-dark .topbar {
  background: #06080c;
  color: rgba(242, 245, 250, 0.88);
}

body.dark .nav-divider,
html.ss-dark .nav-divider {
  background: rgba(255, 255, 255, 0.16);
}

/* Titres & liens : blanc cassé, pas bleu pâle illisible */
body.dark .logo,
body.dark .brand,
body.dark .section-title,
body.dark .card h3,
body.dark .travail-card h3,
body.dark h1,
body.dark h2,
body.dark h3,
body.dark h4,
body.dark .nav-links a:hover,
body.dark .nav-dropdown > button:hover,
html.ss-dark .logo,
html.ss-dark .brand,
html.ss-dark .section-title,
html.ss-dark .card h3,
html.ss-dark .travail-card h3,
html.ss-dark h1,
html.ss-dark h2,
html.ss-dark h3,
html.ss-dark h4,
html.ss-dark .nav-links a:hover,
html.ss-dark .nav-dropdown > button:hover {
  color: var(--navy) !important;
}

body.dark .nav-links a,
body.dark .nav-dropdown > button,
body.dark .burger,
body.dark .settings-btn,
html.ss-dark .nav-links a,
html.ss-dark .nav-dropdown > button,
html.ss-dark .burger,
html.ss-dark .settings-btn {
  color: var(--text) !important;
}

body.dark .hero,
html.ss-dark .hero {
  background:
    radial-gradient(ellipse 80% 60% at 70% 20%, rgba(224, 122, 69, 0.22), transparent),
    linear-gradient(160deg, #06080c 0%, #0f1520 55%, #151e2c 100%) !important;
  color: #f2f5fa !important;
}

body.dark .hero p,
body.dark .hero .section-sub,
html.ss-dark .hero p,
html.ss-dark .hero .section-sub {
  color: rgba(242, 245, 250, 0.9) !important;
}

/* Accent orange sur le titre d’accueil (ex. « travaux du quotidien ») */
body.dark .hero h1 span,
html.ss-dark .hero h1 span,
body.dark .service-hero h1 span,
html.ss-dark .service-hero h1 span {
  color: #e06a28 !important;
}

body.dark .service-hero,
html.ss-dark .service-hero {
  background:
    radial-gradient(circle at 80% 20%, rgba(224, 122, 69, 0.18) 0%, transparent 50%),
    linear-gradient(135deg, #080b12, #141c2a) !important;
  color: #f2f5fa !important;
}

body.dark .service-hero p,
html.ss-dark .service-hero p {
  color: rgba(242, 245, 250, 0.9) !important;
}

body.dark .card,
body.dark .travail-card,
body.dark .contact-info .item,
body.dark .popup,
body.dark .account-dropdown,
body.dark .account-btn,
body.dark .settings-dropdown,
body.dark .mobile-menu,
body.dark .nav-dropdown-menu,
body.dark .nav-submenu,
html.ss-dark .card,
html.ss-dark .travail-card,
html.ss-dark .contact-info .item,
html.ss-dark .popup,
html.ss-dark .account-dropdown,
html.ss-dark .account-btn,
html.ss-dark .settings-dropdown,
html.ss-dark .mobile-menu,
html.ss-dark .nav-dropdown-menu,
html.ss-dark .nav-submenu {
  background: var(--white);
  border-color: var(--gray-1);
  color: var(--text);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
}

body.dark .non-card,
html.ss-dark .non-card {
  background: #2a1515 !important;
  border: 1px solid #a33a3a !important;
  border-left: 5px solid #ef4444 !important;
  color: #ffe8e4 !important;
}

body.dark .non-card i,
html.ss-dark .non-card i {
  color: #ff5c4d !important;
}

body.dark .account-btn,
body.dark .account-dd-btn,
body.dark .account-dd-user,
body.dark .account-dropdown a,
body.dark .nav-dropdown-menu a,
body.dark .nav-submenu a,
body.dark .nav-subgroup > button,
body.dark .mobile-menu a,
body.dark .settings-dropdown,
body.dark .setting-row,
body.dark .settings-dropdown-header,
html.ss-dark .account-btn,
html.ss-dark .account-dd-btn,
html.ss-dark .account-dd-user,
html.ss-dark .account-dropdown a,
html.ss-dark .nav-dropdown-menu a,
html.ss-dark .nav-submenu a,
html.ss-dark .nav-subgroup > button,
html.ss-dark .mobile-menu a,
html.ss-dark .settings-dropdown,
html.ss-dark .setting-row,
html.ss-dark .settings-dropdown-header {
  color: var(--text) !important;
}

body.dark .account-btn:hover,
body.dark .settings-btn:hover,
body.dark .nav-dropdown-menu a:hover,
body.dark .account-dropdown a:hover,
body.dark .account-dd-btn:hover,
html.ss-dark .account-btn:hover,
html.ss-dark .settings-btn:hover,
html.ss-dark .nav-dropdown-menu a:hover,
html.ss-dark .account-dropdown a:hover,
html.ss-dark .account-dd-btn:hover {
  background: #141b28;
}

body.dark footer,
html.ss-dark footer {
  background: #06080c !important;
  border-color: var(--gray-1);
  color: rgba(242, 245, 250, 0.85) !important;
}

body.dark footer a,
html.ss-dark footer a {
  color: rgba(242, 245, 250, 0.92) !important;
}

body.dark input,
body.dark textarea,
body.dark select,
html.ss-dark input,
html.ss-dark textarea,
html.ss-dark select {
  background: #b5b5b5 !important;
  color: #2a2724 !important;
  border: 3px solid #e06a28 !important;
  -webkit-text-fill-color: #2a2724 !important;
}

body.dark input:focus,
body.dark textarea:focus,
body.dark select:focus,
html.ss-dark input:focus,
html.ss-dark textarea:focus,
html.ss-dark select:focus {
  outline: none !important;
  border-color: #e06a28 !important;
  box-shadow: 0 0 0 3px rgba(224, 106, 40, 0.35) !important;
}

body.dark input::placeholder,
body.dark textarea::placeholder,
html.ss-dark input::placeholder,
html.ss-dark textarea::placeholder {
  color: #5a5a5a !important;
  opacity: 1;
}

body.dark .mobile-menu a,
html.ss-dark .mobile-menu a {
  border-bottom-color: var(--gray-1);
}

/* Pages légales */
body.dark .wrap,
html.ss-dark .wrap {
  color: var(--text);
}

body.dark .wrap h1,
body.dark .wrap h2,
html.ss-dark .wrap h1,
html.ss-dark .wrap h2 {
  color: var(--navy) !important;
}

body.dark .wrap .meta,
html.ss-dark .wrap .meta {
  color: var(--gray-2) !important;
}

html.ss-dark .ss-dl-page,
body.dark.ss-dl-page {
  background: linear-gradient(165deg, #070a10 0%, #0a0e14 50%, #121820 100%) !important;
  color: var(--text) !important;
}

html.ss-dark .ss-dl-page .card,
body.dark.ss-dl-page .card {
  background: #1c2433 !important;
  border-color: #3d4a61 !important;
  color: var(--text) !important;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.4);
}

html.ss-dark .ss-dl-page .logo-wrap,
body.dark.ss-dl-page .logo-wrap {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

html.ss-dark .ss-dl-page .device-badge,
html.ss-dark .ss-dl-page .version-pill,
html.ss-dark .ss-dl-page .theme-btn,
body.dark.ss-dl-page .device-badge,
body.dark.ss-dl-page .version-pill,
body.dark.ss-dl-page .theme-btn {
  background: #121820 !important;
  border-color: #3d4a61 !important;
  color: #f4f7fc !important;
}

html.ss-dark .ss-dl-page .section-label,
body.dark.ss-dl-page .section-label {
  color: #e07a45 !important;
}

html.ss-dark .ss-dl-page .alt-block summary,
body.dark.ss-dl-page .alt-block summary {
  color: #f2f5fa !important;
  border-top-color: #3d4a61 !important;
}

/* Bloc « Comment faire » : texte clair sur fond sombre (mode sombre / sobre) */
html.ss-dark .ss-dl-page .note,
html.ss-dark .ss-dl-page #instructions,
html.ss-dark .ss-dl-page .ss-dl-howto,
body.dark.ss-dl-page .note,
body.dark.ss-dl-page #instructions,
body.dark.ss-dl-page .ss-dl-howto {
  background: #1a2434 !important;
  border: 1px solid #7b8da8 !important;
  color: #f7f9fc !important;
  -webkit-text-fill-color: #f7f9fc !important;
}

html.ss-dark .ss-dl-page .note *,
html.ss-dark .ss-dl-page #instructions *,
html.ss-dark .ss-dl-page .ss-dl-howto *,
body.dark.ss-dl-page .note *,
body.dark.ss-dl-page #instructions *,
body.dark.ss-dl-page .ss-dl-howto * {
  color: #f7f9fc !important;
  -webkit-text-fill-color: #f7f9fc !important;
}

html.ss-dark .ss-dl-page .note code,
html.ss-dark .ss-dl-page #instructions code,
body.dark.ss-dl-page .note code,
body.dark.ss-dl-page #instructions code {
  background: #0c1118 !important;
  color: #f7f9fc !important;
  -webkit-text-fill-color: #f7f9fc !important;
}

.ss-os-admin-block:not(.ss-super-admin),
.ss-os-admin-block[hidden] {
  display: none !important;
}

html.ss-dark .ss-dl-page .section-label,
body.dark.ss-dl-page .section-label {
  color: #e07a45 !important;
}

html.ss-dark .ss-dl-page a.btn.ghost,
html.ss-dark .ss-dl-page a.btn.alt,
body.dark.ss-dl-page a.btn.ghost,
body.dark.ss-dl-page a.btn.alt {
  background: #243560 !important;
  color: #fff !important;
  border-color: #3d4a61 !important;
}

html.ss-dark .ss-dl-page a.btn.ghost:hover,
html.ss-dark .ss-dl-page a.btn.alt:hover,
body.dark.ss-dl-page a.btn.ghost:hover,
body.dark.ss-dl-page a.btn.alt:hover {
  background: #1a2434 !important;
  border-color: #e07a45 !important;
}

html.ss-dark .ss-dl-page a.btn.web,
body.dark.ss-dl-page a.btn.web {
  background: #243560 !important;
  color: #fff !important;
  border-color: #3d4a61 !important;
}

html.ss-dark .ss-dl-page .back,
body.dark.ss-dl-page .back {
  color: var(--gray-2) !important;
}

body.dark .admin-panel-inner,
body.dark .docs-panel-inner,
body.dark #verifyBox,
body.dark .popup.admin,
html.ss-dark .admin-panel-inner,
html.ss-dark .docs-panel-inner,
html.ss-dark #verifyBox,
html.ss-dark .popup.admin {
  background: var(--white) !important;
  border-color: var(--gray-1) !important;
  color: var(--text) !important;
}

body.dark .why,
html.ss-dark .why {
  background: linear-gradient(135deg, #080b12, #121a28) !important;
  color: var(--text);
}

body.dark .why p,
body.dark .why li,
html.ss-dark .why p,
html.ss-dark .why li {
  color: var(--text) !important;
}

/* Couleurs hardcodées claires → lisibles en sombre */
body.dark [style*="color:#7d8daa"],
body.dark [style*="color: #7d8daa"],
html.ss-dark [style*="color:#7d8daa"],
html.ss-dark [style*="color: #7d8daa"] {
  color: var(--gray-2) !important;
}

body.dark [style*="color:#33445f"],
body.dark [style*="color: #33445f"],
html.ss-dark [style*="color:#33445f"],
html.ss-dark [style*="color: #33445f"] {
  color: var(--text) !important;
}

body.dark [style*="background:#eef2f8"],
body.dark [style*="background: #eef2f8"],
html.ss-dark [style*="background:#eef2f8"],
html.ss-dark [style*="background: #eef2f8"] {
  background: #2a3548 !important;
  color: var(--text) !important;
}

/* Ancien bouton thème isolé : masqué (réglage uniquement dans Paramètres) */
.ss-theme-toggle,
.ss-theme-toggle-fixed {
  display: none !important;
}

/* Menu Paramètres (accueil + pages services) */
.settings-wrap {
  position: relative;
}

.settings-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  background: var(--white);
  border: 1px solid var(--gray-1);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(27, 42, 74, 0.18);
  min-width: 240px;
  z-index: 9999;
  overflow: hidden;
  padding-top: 6px;
}

.settings-dropdown.open {
  display: block;
}

.settings-dropdown-header {
  padding: 12px 16px 8px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--gray-2);
  border-bottom: 1px solid var(--gray-1);
}

.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 16px;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--navy);
  gap: 14px;
}

.setting-row + .setting-row {
  border-top: 1px solid var(--gray-1);
}

.setting-row span {
  display: flex;
  align-items: center;
  gap: 9px;
}

.setting-row i {
  color: var(--terra);
  width: 16px;
  text-align: center;
}

.toggle {
  position: relative;
  width: 42px;
  height: 24px;
  flex-shrink: 0;
}

.toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  inset: 0;
  background: var(--gray-1);
  border-radius: 24px;
  cursor: pointer;
  transition: 0.2s ease;
}

.slider::before {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  left: 3px;
  top: 3px;
  background: var(--white);
  border-radius: 50%;
  transition: 0.2s ease;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.toggle input:checked + .slider {
  background: var(--terra);
}

.toggle input:checked + .slider::before {
  transform: translateX(18px);
}

.font-scale-btns {
  display: flex;
  gap: 4px;
}

.font-scale-btns button {
  border: 1px solid var(--gray-1);
  background: var(--white);
  color: var(--text);
  border-radius: 7px;
  padding: 4px 9px;
  font-weight: 700;
  cursor: pointer;
  font-size: 0.78rem;
  line-height: 1.2;
  min-width: 34px;
}

.font-scale-btns button.active {
  background: var(--terra);
  border-color: var(--terra);
  color: #fff;
}

html[data-font-scale="1"] body {
  font-size: 1.1rem;
}

html[data-font-scale="2"] body {
  font-size: 1.22rem;
}

body.no-anim *,
body.no-anim *::before,
body.no-anim *::after {
  transition: none !important;
  animation: none !important;
}

/* ——— Astérisques champs obligatoires (rouge) ——— */
.req,
.field label > span[aria-hidden="true"] {
  color: #c82333 !important;
  font-weight: 800;
}

.field:has(input:required) > label::after,
.field:has(textarea:required) > label::after,
.field:has(select:required) > label::after {
  content: " *";
  color: #c82333;
  font-weight: 800;
}

/* Évite le double * si le label a déjà un marqueur */
.field:has(input:required) > label:has(.req)::after,
.field:has(textarea:required) > label:has(.req)::after,
.field:has(select:required) > label:has(.req)::after,
.field:has(input:required) > label:has(span[aria-hidden="true"])::after,
.field:has(textarea:required) > label:has(span[aria-hidden="true"])::after {
  content: none;
}

/* ——— Champs : fond gris + encadrement orange (clair & sombre) ——— */
.field input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="hidden"]),
.field textarea,
.field select,
.popup input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="hidden"]),
.popup textarea,
.popup select {
  background: #b5b5b5 !important;
  background-color: #b5b5b5 !important;
  color: #2a2724 !important;
  border: 3px solid #e06a28 !important;
  -webkit-text-fill-color: #2a2724 !important;
}

.field input:focus,
.field textarea:focus,
.field select:focus,
.popup input:focus,
.popup textarea:focus,
.popup select:focus {
  outline: none !important;
  border-color: #e06a28 !important;
  box-shadow: 0 0 0 3px rgba(224, 106, 40, 0.35) !important;
}

/* Boutons : taille et proportions uniformes sur tout le site */
.btn,
a.btn,
button.btn {
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center;
  gap: 8px !important;
  min-height: 48px !important;
  height: auto !important;
  padding: 12px 20px !important;
  border-radius: 10px !important;
  border-width: 2px !important;
  border-style: solid !important;
  font-family: inherit !important;
  font-size: 1rem !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  box-shadow: none !important;
  text-decoration: none !important;
}

.btn-primary,
button.btn-primary,
a.btn-primary {
  background: #e06a28 !important;
  color: #fff !important;
  border-color: #c24e18 !important;
}

.btn-primary:hover,
button.btn-primary:hover,
a.btn-primary:hover {
  background: #f07838 !important;
}

.btn-outline,
a.btn-outline,
button.btn-outline {
  background: transparent !important;
  color: #e06a28 !important;
  border-color: #e06a28 !important;
}

.btn-outline:hover,
a.btn-outline:hover,
button.btn-outline:hover {
  background: #e06a28 !important;
  color: #fff !important;
  border-color: #e06a28 !important;
}

/* Hero sombre : outline clair, même taille */
.service-hero-actions .btn-outline,
.service-hero .btn-outline {
  background: transparent !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.65) !important;
}

.service-hero-actions .btn-outline:hover,
.service-hero .btn-outline:hover {
  background: rgba(255, 255, 255, 0.14) !important;
  color: #fff !important;
  border-color: #fff !important;
}

/* CTA bande orange : bouton blanc */
.btn-white,
.cta-band .btn,
.cta-band .btn-primary,
.cta-band .btn-white {
  background: #fff !important;
  color: #e06a28 !important;
  border-color: #fff !important;
}

.cta-band .btn:hover,
.cta-band .btn-primary:hover,
.btn-white:hover {
  background: #fff7f2 !important;
  color: #c24e18 !important;
}

.service-hero-actions {
  align-items: center;
}

.service-hero-actions .btn {
  flex: 0 0 auto;
}

.file-picker {
  background: #b5b5b5 !important;
  border: 3px solid #e06a28 !important;
}

.file-picker-btn {
  background: #e06a28 !important;
  border: 2px solid #c24e18 !important;
  color: #fff !important;
  font-weight: 800 !important;
}

.devis-files-field input[type="file"] {
  background: #b5b5b5 !important;
  border: 3px solid #e06a28 !important;
  color: #2a2724 !important;
}

.field input::placeholder,
.field textarea::placeholder,
.popup input::placeholder,
.popup textarea::placeholder {
  color: #555 !important;
  opacity: 1;
}

/* ——— « Ce que nous ne pratiquons pas » : rouge plus marqué ——— */
.non-card {
  background: #fff5f3 !important;
  border: 1px solid #f0a090 !important;
  border-left: 5px solid #c82333 !important;
  color: #4a1f1f !important;
  font-weight: 700 !important;
}

.non-card i {
  color: #c82333 !important;
  font-size: 1.05em !important;
}

.section-tag[style*="e07060"],
.section-tag[style*="#e07060"] {
  color: #c82333 !important;
  font-weight: 800 !important;
  letter-spacing: 0.14em !important;
}

html.ss-dark .non-card,
body.dark .non-card {
  background: #2a1515 !important;
  border: 1px solid #a33a3a !important;
  border-left: 5px solid #ef4444 !important;
  color: #ffe8e4 !important;
}

html.ss-dark .non-card i,
body.dark .non-card i {
  color: #ff5c4d !important;
}

html.ss-dark .section-tag[style*="e07060"],
html.ss-dark .section-tag[style*="#e07060"],
body.dark .section-tag[style*="e07060"],
body.dark .section-tag[style*="#e07060"] {
  color: #ff5c4d !important;
}

/* ——— Alerte sécurité (fond jaune marqué, texte noir) ——— */
.alerte {
  background: #ffe566 !important;
  border: 3px solid #f0c000 !important;
  border-left: 8px solid #e6a800 !important;
  border-radius: 12px;
  padding: 16px 18px;
  margin-top: 24px;
  margin-bottom: 8px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 0.95rem;
  font-weight: 700;
  color: #111 !important;
  box-shadow: 0 2px 0 rgba(230, 168, 0, 0.45);
}

.alerte,
.alerte span,
.alerte strong,
.alerte p {
  color: #111 !important;
}

.alerte i {
  color: #c99700 !important;
  margin-top: 2px;
  flex-shrink: 0;
  font-size: 1.35rem;
}

html.ss-dark .alerte,
body.dark .alerte {
  background: #ffe566 !important;
  border-color: #f0c000 !important;
  border-left-color: #e6a800 !important;
  color: #111 !important;
}

html.ss-dark .alerte span,
html.ss-dark .alerte strong,
body.dark .alerte span,
body.dark .alerte strong {
  color: #111 !important;
}

/* ——— Encadré rouge pointillé : « Ce que nous ne pratiquons pas » ——— */
section:has(.non-grid) > .container {
  border: 3px dotted #c82333;
  border-radius: 18px;
  padding: 28px 24px;
  background: rgba(200, 35, 51, 0.04);
}

html.ss-dark section:has(.non-grid) > .container,
body.dark section:has(.non-grid) > .container {
  border-color: #ef4444;
  background: rgba(239, 68, 68, 0.08);
}

/* ——— Mes documents / suivi chantier ——— */
html.ss-dark .docs-type-btn,
body.dark .docs-type-btn {
  background: var(--white);
  color: var(--navy);
  border-color: var(--gray-1);
}

html.ss-dark .docs-type-btn.active,
body.dark .docs-type-btn.active {
  background: #2a1c18;
  border-color: var(--terra);
  color: var(--terra-2);
}

html.ss-dark .chantier-card,
body.dark .chantier-card {
  background: var(--white);
  border-color: var(--gray-1);
}

html.ss-dark .chantier-media-item,
body.dark .chantier-media-item {
  background: #151c28;
  border-color: var(--gray-1);
}

html.ss-dark .overlay#docsOverlay .popup,
body.dark .overlay#docsOverlay .popup {
  background: var(--white);
  color: var(--text);
}