/* =====================================================================
   SABLE — la version claire d'Ébène (data-mode="light" sur <html>)
   Le mode sombre (Ébène) n'est pas touché : tout est ici, sous le sélecteur de mode.
   ===================================================================== */
html[data-mode="light"] {
	color-scheme: light;
	/* Ébène : nuit / crème / ciel  →  clair : gris bleuté / encre / ciel */
	--c-nuit: var(--c-sable);
	--c-nuit-2: var(--c-sable-clair);
	--c-creme: var(--c-ink);
	--c-or: var(--c-accent);
	--c-or-clair: #C9E4F8;
	--c-bronze: #2F6FA3;
	--c-ardoise: #9FB1C4;
}
html.mode-switching *, html.mode-switching *::before, html.mode-switching *::after { transition: background-color .35s, color .35s, border-color .35s, box-shadow .35s, fill .35s !important; }

/* ---------- Bandeau de titre des pages ---------- */

/* ---------- Sections « sombres » de l'éditeur de pages ---------- */
html[data-mode="light"] :is(.ktsp-bg--dark, .ktsp-bg--mesh-dark, .ktsp-hero--mesh-dark):not(.kh-hero):not(.kh-mod):not(.kh-end) { background: var(--c-sable) !important; color: var(--c-ink); }
html[data-mode="light"] :is(.ktsp-bg--dark, .ktsp-bg--mesh-dark, .ktsp-hero--mesh-dark) :is(h1, h2, h3, h4, h5, h6, .ktsp-box__title, .ktsp-feature__title) { color: var(--c-ink); }
html[data-mode="light"] :is(.ktsp-bg--dark, .ktsp-bg--mesh-dark, .ktsp-hero--mesh-dark) :is(h1, h2, h3, h4, h5, h6) em { color: var(--c-bronze); }
html[data-mode="light"] :is(.ktsp-bg--dark, .ktsp-bg--mesh-dark, .ktsp-hero--mesh-dark) :is(p, li) { color: var(--c-muted); }
html[data-mode="light"] .ktsp-bg--mesh-dark .ktsp-blobs span:nth-child(1), html[data-mode="light"] .ktsp-hero--mesh-dark .ktsp-blobs span:nth-child(1) { opacity: .5; }
html[data-mode="light"] .ktsp-bg--mesh-dark .ktsp-blobs span:nth-child(3), html[data-mode="light"] .ktsp-hero--mesh-dark .ktsp-blobs span:nth-child(3) { opacity: .45; }
html[data-mode="light"] .ktsp-bg--dark { background-image: radial-gradient(60% 80% at 100% 0%, color-mix(in srgb, var(--c-or) 30%, transparent), transparent 70%), radial-gradient(50% 70% at 0% 100%, color-mix(in srgb, var(--c-ardoise) 35%, transparent), transparent 70%) !important; }
html[data-mode="light"] body .ktsp-btns-plugin :is(.ktsp-bg--dark, .ktsp-bg--mesh-dark, .ktsp-hero--mesh-dark) .ktsp-btn--primary { color: var(--c-ink); }
html[data-mode="light"] body .ktsp-btns-plugin :is(.ktsp-bg--dark, .ktsp-bg--mesh-dark, .ktsp-hero--mesh-dark) .ktsp-btn--outline { border-color: rgba(34, 36, 38, .28); color: var(--c-ink); }
html[data-mode="light"] body .ktsp-btns-plugin :is(.ktsp-bg--dark, .ktsp-bg--mesh-dark, .ktsp-hero--mesh-dark) .ktsp-btn--outline:hover { background: var(--c-ink); color: #fff; }
html[data-mode="light"] :is(.ktsp-bg--dark, .ktsp-bg--mesh-dark) :is(.ktsp-card--glass, .ktsp-box--glass) {
	background: linear-gradient(140deg, rgba(255, 255, 255, .85), rgba(255, 255, 255, .5)) !important;
	border: 1px solid rgba(255, 255, 255, .9) !important;
	box-shadow: inset 1px 1px 0 #fff, 0 30px 60px -34px rgba(34, 36, 38, .35) !important;
}
html[data-mode="light"] :is(.ktsp-bg--dark, .ktsp-bg--mesh-dark) .ktsp-feature__icon, html[data-mode="light"] :is(.ktsp-bg--dark, .ktsp-bg--mesh-dark) .ktsp-stat__num { color: var(--c-bronze) !important; }

/* ---------- Pied de page « glace » en version sable ---------- */
html[data-mode="light"] .site-footer--glace { --g-band: var(--c-sable); --g-fg: var(--c-ink); --g-muted: rgba(34, 36, 38, .62); --g-line: rgba(34, 36, 38, .12); }
html[data-mode="light"] .gband::before { background-image: radial-gradient(rgba(34, 36, 38, .09) 1px, transparent 1.3px); }
html[data-mode="light"] .gband__aurora i:nth-child(1) { opacity: .4; }
html[data-mode="light"] .gband__aurora i:nth-child(2) { background: var(--c-or-clair); opacity: .5; }
html[data-mode="light"] .gband__aurora i:nth-child(3) { background: var(--c-ardoise); opacity: .35; }
html[data-mode="light"] .gband__name { -webkit-text-stroke: 1px rgba(34, 36, 38, .07); }
html[data-mode="light"] .gband__brand .site-title { color: var(--c-ink); }
html[data-mode="light"] .gband__nav .footer-menu a:hover, html[data-mode="light"] .gband__nav .current-menu-item > a { color: var(--c-bronze); }
html[data-mode="light"] .gglass { background: rgba(255, 255, 255, .55); border-color: rgba(34, 36, 38, .1); box-shadow: inset 0 1px 0 #fff; }
html[data-mode="light"] .site-footer .gglass:hover { color: var(--c-ink); background: #fff; border-color: rgba(34, 36, 38, .18); }
html[data-mode="light"] .gband__legal a { color: rgba(34, 36, 38, .8); }
html[data-mode="light"] .gband__legal a:hover { color: var(--c-ink); }

/* ---------- Gros bandeau d'accueil (carrés) en version sable ---------- */
html[data-mode="light"] .kh .kh-hero { color: var(--kts-ink); }
html[data-mode="light"] .kh .kh-hero .kh-eyebrow { color: var(--kts-accent-ink); }
html[data-mode="light"] .kh .kh-hero h1 { color: var(--kts-ink); }
html[data-mode="light"] .kh .kh-hero h1 em { color: var(--kts-accent-ink); }
html[data-mode="light"] .kh .kh-hero h1 em::after { background: var(--kts-accent); }
html[data-mode="light"] .kh .kh-rot { color: rgba(34, 36, 38, .85); }
html[data-mode="light"] .kh .kh-rot b { color: var(--kts-ink); border-bottom-color: var(--kts-accent); }
html[data-mode="light"] .kh .kh-hero p.kh-lead { color: var(--kts-gray); }
html[data-mode="light"] .kh .kh-trust { color: var(--kts-gray); }
html[data-mode="light"] .kh .kh-trust span::before { background: color-mix(in srgb, var(--kts-accent) 28%, transparent); color: var(--kts-accent-ink); }
html[data-mode="light"] .kh .kh-win { background: linear-gradient(160deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .55)); border-color: rgba(255, 255, 255, .95); box-shadow: 0 50px 90px -40px rgba(34, 36, 38, .4), inset 0 1px 0 #fff; }
html[data-mode="light"] .kh .kh-win__bar { border-bottom-color: rgba(34, 36, 38, .08); }
html[data-mode="light"] .kh .kh-sk { background: linear-gradient(90deg, rgba(34, 36, 38, .06), rgba(34, 36, 38, .13), rgba(34, 36, 38, .06)); background-size: 200% 100%; }
html[data-mode="light"] .kh .kh-sk--hero { background: linear-gradient(135deg, color-mix(in srgb, var(--kts-accent) 70%, transparent), rgba(159, 177, 196, .45)); }
html[data-mode="light"] .kh .kh-chip { box-shadow: 0 24px 50px -20px rgba(34, 36, 38, .35); }
html[data-mode="light"] .kh .kh-scroll { color: var(--kts-gray); }
html[data-mode="light"] .kh .kh-scroll i { border-color: rgba(34, 36, 38, .35); }
html[data-mode="light"] .kh .kh-hero .kh-btn--ghost, html[data-mode="light"] .kh .kh-end .kh-btn--ghost { --fg: var(--kts-ink); border-color: rgba(34, 36, 38, .28); }
html[data-mode="light"] .kh .kh-hero .kh-btn--ghost:hover { background: rgba(34, 36, 38, .06); }
html[data-mode="light"] .kh .kh-hero .kh-btn--ghost i { background: rgba(34, 36, 38, .1); color: var(--kts-ink); }

/* ---------- Gros bandeau des pages (bloc « Bandeau d'en-tête ») en version sable ---------- */
html[data-mode="light"] .kd { color: var(--kts-ink); }
html[data-mode="light"] .kd-eyebrow { color: var(--kts-accent-ink); }
html[data-mode="light"] .kd h1 { color: var(--kts-ink); }
html[data-mode="light"] .kd h1 em { color: var(--kts-accent-ink); }
html[data-mode="light"] .kd-lead { color: var(--kts-gray); }
html[data-mode="light"] .kd-btn--ghost { color: var(--kts-ink) !important; border-color: rgba(34, 36, 38, .28); }
html[data-mode="light"] .kd-btn--ghost i { background: rgba(34, 36, 38, .1); color: var(--kts-ink); }
html[data-mode="light"] .kd-btn--ghost:hover { background: rgba(34, 36, 38, .06); }
html[data-mode="light"] .kd-trust { color: var(--kts-gray); }
html[data-mode="light"] .kd-trust span::before, html[data-mode="light"] .ko-chk li::before { background: color-mix(in srgb, var(--kts-accent) 28%, transparent); color: var(--kts-accent-ink); }
html[data-mode="light"] .kd-card { background: linear-gradient(160deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .55)); border-color: rgba(255, 255, 255, .95); box-shadow: 0 50px 90px -40px rgba(34, 36, 38, .4), inset 0 1px 0 #fff; }
html[data-mode="light"] .kd-card h2 { color: var(--kts-accent-ink); }
html[data-mode="light"] .kd-card p { color: var(--kts-gray); }

/* ---------- Bandes sombres des pages Kiff → bandes sable ---------- */
html[data-mode="light"] body .kh .kh-mod,html[data-mode="light"] body .kh .kh-end,html[data-mode="light"] body .ko-s--dark{color:var(--kts-ink)}
html[data-mode="light"] body .kh .kh-mod .kh-eyebrow,html[data-mode="light"] body .kh .kh-end .kh-eyebrow,html[data-mode="light"] body .ko-s--dark .ko-k{color:var(--kts-accent-ink)}
html[data-mode="light"] body .kh .kh-head p,html[data-mode="light"] body .kh .kh-end p,html[data-mode="light"] body .ko-s--dark .ko-sub{color:var(--kts-gray)}
html[data-mode="light"] body .kh .kh-m{border-color:rgba(255,255,255,.85)}
html[data-mode="light"] body .kh .kh-m h3{color:var(--kts-ink)}
html[data-mode="light"] body .kh .kh-m p,html[data-mode="light"] body .kh .kh-m__tag{color:var(--kts-gray)}
html[data-mode="light"] body .kh .kh-col--yes{background:color-mix(in srgb,var(--kts-accent) 26%,#fff);color:var(--kts-ink);border-color:color-mix(in srgb,var(--kts-accent) 70%,transparent);box-shadow:0 40px 60px -44px color-mix(in srgb,var(--kts-ink) 40%,transparent)}
html[data-mode="light"] body .kh .kh-col--yes h3{color:var(--kts-accent-ink)}
html[data-mode="light"] body .kh .kh-col--yes li::before{background:var(--kts-ink);color:var(--kts-accent)}
html[data-mode="light"] body .kh .kh-end h2 em,html[data-mode="light"] body .ko-s--dark .ko-h em{color:var(--kts-accent-ink)}
html[data-mode="light"] body .kh .kh-end .kh-btn--ghost{--fg:var(--kts-ink);border-color:color-mix(in srgb,var(--kts-ink) 28%,transparent)}
html[data-mode="light"] body .kh .kh-end .kh-btn--ghost:hover{background:color-mix(in srgb,var(--kts-ink) 7%,transparent)}
html[data-mode="light"] body .kh .kh-end .kh-btn--ghost i{background:color-mix(in srgb,var(--kts-ink) 10%,transparent);color:var(--kts-ink)}
html[data-mode="light"] body .ko-plan--pop{background:#fff;color:var(--kts-ink);border:2px solid var(--kts-accent);box-shadow:0 50px 80px -44px color-mix(in srgb,var(--kts-ink) 45%,transparent)}
html[data-mode="light"] body .ko-plan--pop .ko-for,html[data-mode="light"] body .ko-plan--pop .ko-price small,html[data-mode="light"] body .ko-plan--pop .ko-time{color:var(--kts-gray)}
html[data-mode="light"] body .ko-plan--pop .ko-list li::before,html[data-mode="light"] body .ko-care .ko-list li::before{background:color-mix(in srgb,var(--kts-accent) 22%,transparent);color:var(--kts-accent-ink)}
html[data-mode="light"] body .ko-care{background:#fff;color:var(--kts-ink);border:1px solid color-mix(in srgb,var(--kts-ink) 9%,transparent);box-shadow:0 44px 70px -50px color-mix(in srgb,var(--kts-ink) 45%,transparent)}
html[data-mode="light"] body .ko-care .ko-price small{color:var(--kts-gray)}
html[data-mode="light"] body .kh .kh-mod h2,html[data-mode="light"] body .kh .kh-end h2{color:var(--kts-ink)}
html[data-mode="light"] body .kh .kh-end .kh-eyebrow{color:var(--kts-accent-ink)!important}
html[data-mode="light"] body .ko-s--dark .ko-step,html[data-mode="light"] body .ko-s--dark .ko-val{border-color:rgba(255,255,255,.85)}
html[data-mode="light"] body .ko-s--dark .ko-step b{color:var(--kts-accent-ink)}
html[data-mode="light"] body .ko-s--dark .ko-step p,html[data-mode="light"] body .ko-s--dark .ko-val p{color:var(--kts-gray)}
html[data-mode="light"] body .ko-s--dark .ko-step span{background:color-mix(in srgb,var(--kts-accent) 22%,transparent);color:var(--kts-accent-ink)}
html[data-mode="light"] body .ko-s--dark .ko-val i{background:color-mix(in srgb,var(--kts-accent) 22%,transparent);color:var(--kts-accent-ink)}
html[data-mode="light"] body .ko-s--dark .kd-btn--ghost{color:var(--kts-ink)!important;border-color:color-mix(in srgb,var(--kts-ink) 28%,transparent)}
html[data-mode="light"] body .ko-s--dark .kd-btn--ghost i{background:color-mix(in srgb,var(--kts-ink) 10%,transparent);color:var(--kts-ink)}
html[data-mode="light"] body .ko-s--dark .kd-btn--ghost:hover{background:color-mix(in srgb,var(--kts-ink) 7%,transparent)}

/* 1.4.1 — texte des cartes du hero (étapes devis, carte « Qui suis-je ») */
html[data-mode="light"] body .kd-steps li { color: var(--kts-ink-2, #3a3d40); }
html[data-mode="light"] body .kd-steps li b { color: var(--kts-gray); }
html[data-mode="light"] body .kd-steps li::before { border-color: rgba(34, 36, 38, .3); background: rgba(34, 36, 38, .05); }
html[data-mode="light"] body .kd .ko-id h2 { color: var(--kts-ink) !important; }
html[data-mode="light"] body .kd .ko-id p { color: var(--kts-gray); }
html[data-mode="light"] body .kd .ko-facts div { color: var(--kts-gray); }
html[data-mode="light"] body .kd .ko-facts b { color: var(--kts-accent-ink); }
@keyframes kd-lit-l { 0% { color: #5d6166 } 4%, 40% { color: #1c1e20 } 60%, 100% { color: #5d6166 } }
html[data-mode="light"] body .kd-steps li { animation-name: kd-lit-l; }

html[data-mode="light"] body .kd-card p,
html[data-mode="light"] body .ko-s--dark .ko-step p,
html[data-mode="light"] body .ko-s--dark .ko-val p,
html[data-mode="light"] body .kd .ko-id p,
html[data-mode="light"] body .kd .ko-facts div { color: #2b2e31; }
html[data-mode="light"] body .kd-card h2 { color: var(--kts-accent-ink); }
html[data-mode="light"] body .kd-steps li b { color: #2b2e31; }

/* Verre : voir wall.css */
html[data-mode="light"] body .kh .kh-m p, html[data-mode="light"] body .kh .kh-step p,
html[data-mode="light"] body .kh .kh-col li, html[data-mode="light"] body .kh .kh-col p,
html[data-mode="light"] body .ko-plan:not(.ko-plan--pop) p,
html[data-mode="light"] body .ko-plan:not(.ko-plan--pop) li, html[data-mode="light"] body .ko-care p,
html[data-mode="light"] body .ko-care li, html[data-mode="light"] body .ko-care .ko-price small { color: #2b2e31; }