/* =====================================================================
   ÉBÈNE 1.6 — « Le mur » : un seul fond continu, du bleu nuit au gris nardo.
   - le fond de la page est le gris nardo ; un quadrillage unique le recouvre de haut en bas ;
   - les zones sombres sont des nappes bleu nuit aux bords fondus (jamais de coupure) ;
   - les cartes sont en verre, lisibles sur le bleu comme sur le gris.
   Ce fichier est la seule source des couleurs de page : rien de statique ni d'animé en plus.
   ===================================================================== */
:root {
	--w-navy: #071323; --w-navy-2: #0c1d33; --w-sky: #8ec5f0; --w-sky-lt: #c9e4f8;
	--w-edge: clamp(150px, 19vw, 290px);          /* hauteur du fondu au bord des nappes sombres */
	--w-grid: rgba(255, 255, 255, .045); --hdr-h: 82px; --w-cell: 64px;
	/* couleurs lues par les blocs des pages (extension Pages) */
	--kts-dark: var(--w-navy); --kts-ink: #0a1522; --kts-ink-2: #10233b;
	--kts-sand: #8e959d; --kts-sand-2: #818890; --kts-paper: #9aa1a9;
	--kts-gray: #1f2b3a; --kts-accent: var(--w-sky); --kts-accent-ink: #0b2a47;
	/* verre : sur le gris (par défaut) */
	--g1: rgba(255, 255, 255, .14); --g2: rgba(255, 255, 255, .05); --g-edge: rgba(255, 255, 255, .30);
	--g-shadow: 0 26px 46px -30px rgba(7, 19, 35, .55);
}
@media (max-width: 1024px) { :root { --hdr-h: 78px; } }
@media (max-width: 700px) { :root { --w-cell: 48px; --hdr-h: 74px; } }

body { position: relative; }
body::after {                                  /* le quadrillage : une seule couche, de haut en bas */
	content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
	background-image: linear-gradient(var(--w-grid) 1px, transparent 1px), linear-gradient(90deg, var(--w-grid) 1px, transparent 1px);
	background-size: var(--w-cell) var(--w-cell);
}

/* ---------- Nappes sombres : bleu nuit, bords fondus ---------- */
html body :is(.kh-hero, .kh-mod, .kh-end, .kd, .ko-s--dark, .page-header) {
	--et: var(--w-edge); --eb: var(--w-edge);
	position: relative; isolation: isolate; background: none !important; color: #fff;
	--g1: rgba(142, 197, 240, .18); --g2: rgba(142, 197, 240, .06); --g-edge: rgba(190, 225, 250, .30);
}
html body :is(.kd, .kh-hero, .page-header) { --et: 0px; }
html body :is(.kh-hero, .kh-mod, .kh-end, .kd, .ko-s--dark, .page-header)::before {
	content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background:
		radial-gradient(48% 58% at 9% 16%, rgba(62, 134, 192, .62), transparent 72%),
		radial-gradient(48% 58% at 91% 84%, rgba(50, 112, 170, .60), transparent 72%),
		linear-gradient(180deg, #0f2745, #0b1e37 55%, #08172b);
	--m: linear-gradient(180deg, transparent 0, rgba(0,0,0,.03) calc(var(--et)*.14), rgba(0,0,0,.12) calc(var(--et)*.32), rgba(0,0,0,.32) calc(var(--et)*.5), rgba(0,0,0,.6) calc(var(--et)*.68), rgba(0,0,0,.85) calc(var(--et)*.84), rgba(0,0,0,.96) calc(var(--et)*.94), #000 var(--et), #000 calc(100% - var(--eb)), rgba(0,0,0,.96) calc(100% - var(--eb)*.94), rgba(0,0,0,.85) calc(100% - var(--eb)*.84), rgba(0,0,0,.6) calc(100% - var(--eb)*.68), rgba(0,0,0,.32) calc(100% - var(--eb)*.5), rgba(0,0,0,.12) calc(100% - var(--eb)*.32), rgba(0,0,0,.03) calc(100% - var(--eb)*.14), transparent 100%);
	-webkit-mask-image: var(--m); mask-image: var(--m);
}

/* ---------- Zones « claires » : transparentes, on voit le gris nardo ---------- */
html body :is(.kh-concept, .kh-pilot, .kh-num, .kh-cmp, .kh-faq, .ko-s--sand) { background: none !important; color: var(--kts-ink); }

/* ---------- Cartes en verre ---------- */
html body :is(.kh-step, .kh-col:not(.kh-col--yes), .kh-m, .kd-card, .ko-plan:not(.ko-plan--pop), .ko-step, .ko-val, .ko-faq details, .ko-chips span, .ko-two > div:first-child) {
	background: linear-gradient(150deg, var(--g1), var(--g2)); border: 1px solid var(--g-edge);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -1px 0 rgba(255, 255, 255, .08), var(--g-shadow);
}
html body .ko-two > div:first-child { padding: clamp(14px, 2.4vw, 28px) clamp(20px, 3vw, 36px); border-radius: 30px; }
html body :is(.ko-plan--pop, .ko-care, .kh-col--yes) {
	background: linear-gradient(150deg, rgba(12, 29, 51, .94), rgba(7, 19, 35, .96)); border: 1px solid rgba(142, 197, 240, .28); color: #fff;
	box-shadow: inset 0 1px 0 rgba(190, 225, 250, .25), 0 36px 60px -34px rgba(3, 10, 20, .8);
}

/* Cookies : verre bleu nuit en mode sombre (le bandeau du pied de page garde son verre clair, comme avant) */
html:not([data-mode="light"]) .ktsk { --fg: #e8f1f9; --muted: rgba(232,241,249,.72); --line: rgba(190,225,250,.28); --btn-bg: #8ec5f0; --btn-fg: #0b2a47; --surface: linear-gradient(135deg, rgba(14,34,58,.92), rgba(7,19,35,.86)); }

/* ---------- Mode clair : même mur, version pâle (gris bleuté, nappes de ciel) ---------- */
html[data-mode="light"] {
	--w-grid: rgba(14, 40, 72, .07);
	--c-base: #cfd6de; --kts-sand: #d4dae1; --kts-sand-2: #c8cfd8; --kts-paper: #dde2e8;
	--g1: rgba(255, 255, 255, .62); --g2: rgba(255, 255, 255, .28); --g-edge: rgba(255, 255, 255, .85);
	--g-shadow: 0 24px 44px -30px rgba(14, 40, 72, .35);
}
html[data-mode="light"] body :is(.kh-hero, .kh-mod, .kh-end, .kd, .ko-s--dark, .page-header) {
	color: var(--kts-ink);
	--g1: rgba(255, 255, 255, .62); --g2: rgba(255, 255, 255, .28); --g-edge: rgba(255, 255, 255, .85);
}
html[data-mode="light"] body :is(.kh-hero, .kh-mod, .kh-end, .kd, .ko-s--dark, .page-header)::before {
	background:
		radial-gradient(50% 58% at 84% 30%, rgba(142, 197, 240, .65), transparent 72%),
		radial-gradient(44% 56% at 10% 78%, rgba(142, 197, 240, .45), transparent 72%),
		linear-gradient(180deg, rgba(176, 212, 240, .55), rgba(150, 190, 225, .30));
}
/* Mode clair : petits mots en verre (comme l'en-tête) */
html[data-mode="light"] body :is(.kh-trust, .kd-trust) span { padding: 6px 14px 6px 8px; border-radius: 999px; background: linear-gradient(135deg, rgba(255,255,255,.7), rgba(255,255,255,.35)); border: 1px solid rgba(255,255,255,.85); box-shadow: inset 0 1px 0 #fff, 0 6px 16px -10px rgba(14,40,72,.35); }

/* Deux zones sombres qui se suivent : elles se rejoignent sans bande grise entre elles */
html body :is(.kh-hero, .kh-mod, .kh-end, .kd, .ko-s--dark):has(+ :is(.kh-mod, .kh-end, .ko-s--dark)) { --eb: 0px; }
html body :is(.kh-hero, .kh-mod, .kh-end, .kd, .ko-s--dark) + :is(.kh-mod, .kh-end, .ko-s--dark) { --et: 0px; }

/* Anciennes taches animées : le mur les remplace */
.ktsp-blobs, .kh-blobs { display: none !important; }

/* L'en-tête est collant : sans cela, une bande grise apparaît au-dessus du premier bandeau.
   On remonte la page sous l'en-tête et on rajoute la même hauteur dans le bandeau. */
body:has(.site-main :is(.kh-hero, .kd)) .site-main { margin-top: calc(var(--hdr-h) * -1); }
body:has(.site-main :is(.kh-hero, .kd)) .kh-hero { padding-top: calc(clamp(130px, 17vh, 180px) + var(--hdr-h)) !important; }
body:has(.site-main :is(.kh-hero, .kd)) .kd-w { padding-top: calc(clamp(130px, 17vh, 180px) + var(--hdr-h)) !important; }

/* Devis et Contact : la ligne du formulaire reste transparente (on voit le mur), le formulaire est en verre */
html body .ktsp-row:has(.ktsd, .ktsc) { background: none !important; }
html body :is(.ktsd-form, .ktsc-form-card, .ktsc-card) { background: linear-gradient(150deg, rgba(255,255,255,.34), rgba(255,255,255,.14)); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); border: 1px solid rgba(255,255,255,.5); box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 26px 46px -30px rgba(7,19,35,.55); }
html body :is(.ktsc, .ktsd) { --ktsc-muted: rgba(10,21,34,.78); --ktsd-muted: rgba(10,21,34,.78); }

/* Pied de page : repris du thème 1.8.1 (voir theme.css) */
html:not([data-mode="light"]) .site-footer { margin-top: clamp(24px, 3vw, 48px); }
.site-footer { z-index: 1; }

/* Accueil : le haut démarre à la même hauteur que sur Offres, quel que soit le HTML collé */
html body .kh-hero { align-items: start !important; min-height: 0 !important; }
html body .kh-hero__in { align-items: start !important; }
html body .kh-hero > .kh-w { width: 100%; }
body:has(.site-main :is(.kh-hero, .kd)) .kh-hero { padding-top: calc(clamp(130px, 17vh, 180px) + var(--hdr-h) - 14px) !important; }

/* Bande des chiffres : pleine largeur, en verre glacé */
html body .kh-num { background: linear-gradient(180deg, rgba(142,197,240,.20), rgba(142,197,240,.07)) !important; border-block: 1px solid var(--g-edge); }
html body .kh-num__g { border-block: 0; }

/* Bande finale : cadres de verre qui s'agrandissent (animation légère : seulement transform et opacité) */
.kh-end .kh-ring { position: absolute; left: 50%; top: 14%; bottom: 14%; width: min(78vw, 1100px); border: 1px solid rgba(190,225,250,.32); border-radius: clamp(28px, 4vw, 56px); background: linear-gradient(160deg, rgba(142,197,240,.08), rgba(142,197,240,.02)); pointer-events: none; z-index: -1; transform: translateX(-50%) scale(.2); opacity: 0; animation: kh-ring 8s ease-out infinite; will-change: transform, opacity; }
.kh-end .kh-ring:nth-of-type(2) { animation-delay: -2.6s; } .kh-end .kh-ring:nth-of-type(3) { animation-delay: -5.3s; }
@keyframes kh-ring { 0% { transform: translateX(-50%) scale(.2); opacity: 0; } 18% { opacity: 1; } 100% { transform: translateX(-50%) scale(1); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .kh-end .kh-ring { animation: none; opacity: .6; transform: translateX(-50%) scale(.7); } }
html:not([data-mode="light"]) { background: #0b1d33; }

/* Pied de page en mode clair : panneau bleu-gris pâle, halos fixes (pas de flou ni d'animation, donc aucun défaut d'affichage) */
html[data-mode="light"] .site-footer--glace { --g-band: linear-gradient(160deg, #c3d1de, #b0c2d3); --g-fg: #0f2233; --g-muted: rgba(15,34,51,.66); --g-line: rgba(15,34,51,.14); }
html[data-mode="light"] .gband__aurora i { filter: none; animation: none; will-change: auto; border-radius: 0; opacity: 1; }
html[data-mode="light"] .gband__aurora i:nth-child(1) { left: -6%; top: -45%; width: 52%; height: 190%; background: radial-gradient(closest-side, rgba(255,255,255,.55), transparent); }
html[data-mode="light"] .gband__aurora i:nth-child(2) { left: auto; right: -6%; bottom: -60%; width: 54%; height: 200%; background: radial-gradient(closest-side, rgba(120,170,215,.45), transparent); }
html[data-mode="light"] .gband__aurora i:nth-child(3) { left: 32%; top: -30%; width: 36%; height: 150%; background: radial-gradient(closest-side, rgba(255,255,255,.28), transparent); }
html[data-mode="light"] .gband__spot { display: none; }

/* Questions fréquentes : chaque question dans son encadré de verre */
html body .kh-q { border: 1px solid var(--g-edge, rgba(255,255,255,.38)); border-radius: 22px; background: linear-gradient(150deg, var(--g1, rgba(255,255,255,.2)), var(--g2, rgba(255,255,255,.07))); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 18px 32px -24px rgba(7,19,35,.5); padding: 0 24px; margin-bottom: 14px; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
html body .kh-q summary { padding: 20px 0; }
html body .kh-q[open] { background: linear-gradient(150deg, rgba(255,255,255,.3), rgba(255,255,255,.12)); }

/* « Et si on parlait de ton projet ? » : mêmes cadres de verre qui s'agrandissent que la bande finale de l'Accueil (transform et opacité seulement) */
.ko-cta::before, .ko-cta::after { content: ""; position: absolute; left: 50%; top: -22%; bottom: -22%; width: min(78vw, 1100px); border: 1px solid rgba(190,225,250,.32); border-radius: clamp(28px, 4vw, 56px); background: linear-gradient(160deg, rgba(142,197,240,.08), rgba(142,197,240,.02)); pointer-events: none; z-index: -1; transform: translateX(-50%) scale(.2); opacity: 0; animation: kh-ring 8s ease-out infinite; will-change: transform, opacity; }
.ko-cta::after { animation-delay: -4s; }
@media (prefers-reduced-motion: reduce) { .ko-cta::before, .ko-cta::after { animation: none; opacity: .6; transform: translateX(-50%) scale(.7); } }

/* Bandeau « On y va ? » : la nappe bleue commence bien au-dessus du titre et finit bien sous les boutons */
html body .ko-s--dark:has(.ko-cta) { --et: clamp(110px, 14vw, 200px); --eb: clamp(110px, 14vw, 200px); padding-top: calc(var(--et) + clamp(30px, 4vw, 60px)) !important; padding-bottom: calc(var(--eb) + clamp(30px, 4vw, 60px)) !important; }

/* iPhone : Safari colore la barre d'état avec le fond du haut de la page. En mode sombre, le haut du fond est donc bleu nuit (la nappe bleue le recouvre), plus de bande grise */
html:not([data-mode="light"]) body { background: linear-gradient(180deg, #0b1d33 0, #0b1d33 260px, rgba(11,29,51,0) 640px) no-repeat, radial-gradient(60% 34% at 0% 28%, rgba(62,134,192,.26), transparent 70%) 0 0 / 100% 1700px repeat-y, radial-gradient(60% 34% at 100% 78%, rgba(50,112,170,.24), transparent 70%) 0 0 / 100% 1700px repeat-y, var(--c-base); }
html:not([data-mode="light"]) { background: #0b1d33; }

/* Deux bandes bleues qui se suivent ne laissent plus de bande grise entre elles (même quand chacune est dans sa propre ligne de la page) */
html body .ktsp-row:has(.ko-s--dark):has(+ .ktsp-row .ko-s--dark) .ko-s--dark { --eb: 0px; }
html body .ktsp-row:has(.ko-s--dark) + .ktsp-row .ko-s--dark, html body .ktsp-row:has(.ko-s--dark) + .ktsp-row .ko-s--dark:has(.ko-cta) { --et: 0px; }
html body .ktsp-row:has(.ko-s--dark) + .ktsp-row .ko-s--dark:has(.ko-cta) { padding-top: clamp(70px, 9vw, 120px) !important; }
/* Jonction de deux bandes bleues : mêmes teintes des deux côtés de la jonction, pas de coupure */
html body .ktsp-row:has(.ko-s--dark):has(+ .ktsp-row .ko-s--dark) .ko-s--dark::before {
	background: radial-gradient(48% 58% at 9% 16%, rgba(62, 134, 192, .62), transparent 72%), radial-gradient(48% 40% at 91% 55%, rgba(50, 112, 170, .5), transparent 72%), linear-gradient(180deg, #0f2745, #0b1e37 55%, #0a1c33);
}
html body .ktsp-row:has(.ko-s--dark) + .ktsp-row .ko-s--dark::before {
	background: radial-gradient(48% 40% at 9% 45%, rgba(62, 134, 192, .5), transparent 72%), radial-gradient(48% 58% at 91% 84%, rgba(50, 112, 170, .60), transparent 72%), linear-gradient(180deg, #0a1c33, #0b1e37 45%, #08172b);
}

/* Lisibilité : les petits textes posés sur le gris sont presque noirs (avant : gris sur gris, illisible) */
html:not([data-mode="light"]) body :is(.ko-s--sand, .kh-concept, .kh-pilot, .kh-num, .kh-cmp, .kh-faq) :is(p, li, .ko-sub):not(.kh-col--yes *):not(.ko-plan--pop *):not(.ko-care *) { color: #0a1624; }
html:not([data-mode="light"]) body .kh-faq .kh-q p { color: #0a1624; }