/* coliszone.fr : feuille commune à toutes les pages (accueil, mentions légales,
   page 404). Elle est servie sous /assets/ parce que la politique de sécurité
   du contenu (CSP) interdit les styles écrits dans le HTML : ni <style>, ni
   attribut style=.

   Charte : verre dépoli, police système, mode sombre. Aucune ressource externe.
   Contrastes calculés (WCAG 2.x), pire cas sur le verre et le dégradé :
   clair  : texte 16:1, texte secondaire 8,5:1, lien 6,8:1
   sombre : texte 12,7:1, texte secondaire 7,7:1, lien 6,9:1
   Blanc sur les boutons et pastilles dégradés : 5,7:1 au minimum. */

:root {
	color-scheme: light dark;
	--font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
	--page: #f5f6fb;
	--ink: #0b1020;
	--ink-2: #3a4458;
	--link: #4338ca;
	--brand-a: #4f46e5;
	--brand-b: #7c3aed;
	--grad-a: #3730a3;
	--grad-b: #6d28d9;
	--glass: rgba(255, 255, 255, .72);
	--glass-solid: #ffffff;
	--nav: rgba(255, 255, 255, .84);
	--nav-solid: #ffffff;
	--edge: rgba(15, 23, 42, .09);
	--hi: inset 0 1px 0 rgba(255, 255, 255, .9);
	--shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 14px 34px -16px rgba(40, 48, 120, .30);
	--lift: 0 2px 4px rgba(15, 23, 42, .05), 0 26px 50px -20px rgba(40, 48, 120, .42);
	--chip: rgba(79, 70, 229, .09);
	--chip-ink: #3730a3;
	--badge-bg: rgba(124, 58, 237, .14);
	--badge-ink: #5b21b6;
	--code: rgba(15, 23, 42, .05);
	--blob-1: rgba(99, 102, 241, .30);
	--blob-2: rgba(56, 189, 248, .24);
	--blob-3: rgba(244, 114, 182, .16);
	--gutter: clamp(16px, 5vw, 32px);
	--max: 1080px;
}

@media (prefers-color-scheme: dark) {
	:root {
		--page: #070a14;
		--ink: #f3f5fb;
		--ink-2: #b8c2d6;
		--link: #a5b4fc;
		--grad-a: #a5b4fc;
		--grad-b: #d8b4fe;
		--glass: rgba(24, 29, 52, .62);
		--glass-solid: #151a2e;
		--nav: rgba(14, 18, 34, .84);
		--nav-solid: #0e1222;
		--edge: rgba(255, 255, 255, .13);
		--hi: inset 0 1px 0 rgba(255, 255, 255, .08);
		--shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 18px 40px -18px rgba(0, 0, 0, .75);
		--lift: 0 2px 4px rgba(0, 0, 0, .45), 0 30px 56px -20px rgba(0, 0, 0, .85);
		--chip: rgba(165, 180, 252, .14);
		--chip-ink: #c7d2fe;
		--badge-bg: rgba(167, 139, 250, .18);
		--badge-ink: #ddd6fe;
		--code: rgba(255, 255, 255, .06);
		--blob-1: rgba(99, 102, 241, .40);
		--blob-2: rgba(34, 211, 238, .16);
		--blob-3: rgba(217, 70, 239, .20);
	}
}

*, *::before, *::after { box-sizing: border-box; }

html { background: var(--page); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
	margin: 0;
	font-family: var(--font);
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--ink);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: clip;
}

h1, h2, h3, p, ul, figure, pre { margin: 0; }
ul { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--link); text-underline-offset: 3px; }
strong { font-weight: 600; }
code { font-family: var(--mono); font-size: .9em; overflow-wrap: anywhere; }

/* Fond : dégradés doux, fixes */
.bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.bg span { position: absolute; border-radius: 50%; }
.bg span:nth-child(1) { width: 70vmax; height: 70vmax; left: -22vmax; top: -30vmax; background: radial-gradient(closest-side, var(--blob-1), transparent); }
.bg span:nth-child(2) { width: 60vmax; height: 60vmax; right: -20vmax; top: -14vmax; background: radial-gradient(closest-side, var(--blob-2), transparent); }
.bg span:nth-child(3) { width: 64vmax; height: 64vmax; left: 22vw; bottom: -38vmax; background: radial-gradient(closest-side, var(--blob-3), transparent); }

/* Verre dépoli : couleur de repli opaque, flou seulement si le navigateur le gère */
.glass {
	background: var(--glass-solid);
	border: 1px solid var(--edge);
	border-radius: 24px;
	box-shadow: var(--hi), var(--shadow);
}
.glass--nav { background: var(--nav-solid); }
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
	.glass { background: var(--glass); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); }
	.glass--nav { background: var(--nav); }
}
@media (prefers-reduced-transparency: reduce) {
	.glass { background: var(--glass-solid); -webkit-backdrop-filter: none; backdrop-filter: none; }
	.glass--nav { background: var(--nav-solid); }
}

/* Structure */
.wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.sec { padding-block: clamp(56px, 9vw, 112px); scroll-margin-top: 84px; }
.head { max-width: 46rem; margin-bottom: clamp(28px, 5vw, 56px); }

.skip { position: absolute; left: 16px; top: -64px; z-index: 100; padding: 10px 16px; border-radius: 12px; background: var(--glass-solid); color: var(--ink); font-weight: 600; text-decoration: none; border: 1px solid var(--edge); }
.skip:focus { top: 12px; }

/* Navigation flottante */
.top { position: sticky; top: 0; z-index: 50; padding: 12px var(--gutter) 0; pointer-events: none; }
.nav { pointer-events: auto; max-width: var(--max); margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; padding: 8px 10px 8px 14px; border-radius: 22px; }
.brand { display: flex; align-items: center; gap: 9px; color: var(--ink); font-weight: 700; font-size: 1.0625rem; letter-spacing: -.02em; text-decoration: none; }
.brand img { width: 28px; height: 28px; border-radius: 7px; }
.links { display: flex; gap: 2px; margin-left: auto; }
.links a { display: block; padding: 8px 12px; border-radius: 999px; color: var(--ink-2); font-size: .9375rem; font-weight: 500; text-decoration: none; }
.links a:hover { color: var(--ink); background: var(--chip); }

/* Typographie large et aérée */
h1, h2, h3 { font-weight: 700; line-height: 1.08; letter-spacing: -.03em; text-wrap: balance; }
h1 { font-size: clamp(2.25rem, 1.3rem + 4.6vw, 4.5rem); line-height: 1.03; letter-spacing: -.04em; }
h2 { font-size: clamp(1.85rem, 1.2rem + 2.8vw, 3.1rem); }
h3 { font-size: 1.125rem; line-height: 1.25; letter-spacing: -.015em; }
.lede { max-width: 40rem; color: var(--ink-2); font-size: clamp(1.125rem, 1.05rem + .5vw, 1.3rem); line-height: 1.55; }
.head h2 { margin-bottom: 16px; }
.eyebrow { display: inline-flex; align-items: center; margin-bottom: 18px; padding: 6px 14px; border-radius: 999px; background: var(--chip); color: var(--chip-ink); font-size: .875rem; font-weight: 600; letter-spacing: .01em; }
.note { margin-top: 16px; color: var(--ink-2); font-size: .9375rem; }

.grad { color: var(--grad-a); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
	.grad { background: linear-gradient(100deg, var(--grad-a), var(--grad-b)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
}

/* Boutons et pastille « bientôt » */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 24px; border-radius: 999px; color: var(--ink); font-weight: 600; font-size: 1.0625rem; line-height: 1.3; text-decoration: none; }
.btn:hover { filter: brightness(1.06); }
.btn--solid { border: 1px solid transparent; color: #fff; background: linear-gradient(135deg, var(--brand-a), var(--brand-b)); box-shadow: 0 14px 34px -14px rgba(79, 70, 229, .7), inset 0 1px 0 rgba(255, 255, 255, .28); }
.soon { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; padding: 14px 24px; border-radius: 999px; color: #fff; font-weight: 600; font-size: 1.0625rem; line-height: 1.3; background: linear-gradient(135deg, var(--brand-a), var(--brand-b)); box-shadow: 0 14px 34px -14px rgba(79, 70, 229, .7), inset 0 1px 0 rgba(255, 255, 255, .28); cursor: default; }
.soon__dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: #fff; }
.badge { display: inline-block; margin-bottom: 16px; padding: 6px 14px; border-radius: 999px; background: var(--badge-bg); color: var(--badge-ink); font-size: .875rem; font-weight: 700; }

/* Accueil */
.hero { padding-block: clamp(36px, 7vw, 88px) clamp(48px, 8vw, 104px); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(32px, 6vw, 72px); align-items: center; }
@media (min-width: 940px) { .hero__grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); } }
.hero h1 { margin-bottom: 22px; }
.hero .lede { margin-bottom: 30px; }
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.pills li { padding: 7px 14px; border-radius: 999px; background: var(--chip); color: var(--chip-ink); font-size: .875rem; font-weight: 600; }

.hero__visual { position: relative; isolation: isolate; }
.hero__visual::before { content: ""; position: absolute; inset: 10% 4% -4%; z-index: -1; border-radius: 40px; background: linear-gradient(135deg, rgba(99, 102, 241, .45), rgba(236, 72, 153, .28) 55%, rgba(56, 189, 248, .35)); filter: blur(48px); opacity: .7; }

.frame { padding: 8px; border-radius: 26px; }
.frame img { width: 100%; border-radius: 18px; background: #fff; }
.shot figcaption { margin-top: 14px; padding-inline: 6px; color: var(--ink-2); font-size: .9375rem; }
.shot figcaption strong { color: var(--ink); }

.card { padding: clamp(20px, 3vw, 28px); }
.card h3 { margin-bottom: 8px; }
.card p { color: var(--ink-2); font-size: 1rem; }
.card--good { border-color: rgba(99, 102, 241, .45); }
.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.duo { display: grid; gap: 16px; align-items: start; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.split { display: grid; gap: clamp(28px, 5vw, 64px); align-items: center; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.split h2 { margin-bottom: 16px; }
.more { max-width: 52rem; margin-top: 28px; color: var(--ink-2); }

.tile { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 16px; border-radius: 13px; color: #fff; background: linear-gradient(135deg, var(--brand-a), var(--brand-b)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 8px 18px -8px rgba(79, 70, 229, .6); }
.tile svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.tag { display: inline-block; margin-bottom: 12px; color: var(--link); font-size: .8125rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.tag--muted { color: var(--ink-2); }
.code { margin-top: 16px; padding: 14px 16px; border: 1px solid var(--edge); border-radius: 14px; background: var(--code); color: var(--ink-2); font-family: var(--mono); font-size: .875rem; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.chips li { padding: 6px 14px; border-radius: 999px; background: var(--chip); color: var(--chip-ink); font-size: .9375rem; font-weight: 600; }

.pro { padding: clamp(24px, 5vw, 56px); border-radius: 32px; border-color: rgba(99, 102, 241, .38); }
.pro h2 { margin-bottom: 16px; }
.checks { display: grid; gap: 14px 36px; margin-top: 32px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); }
.checks li { position: relative; padding-left: 30px; }
.checks li::before { content: ""; position: absolute; left: 2px; top: .6em; width: 11px; height: 6px; border-left: 2.5px solid var(--link); border-bottom: 2.5px solid var(--link); transform: rotate(-45deg); }
.pro .note { margin-top: 28px; }

.faq { display: grid; gap: 12px; max-width: 52rem; margin-inline: auto; }
.faq details { border-radius: 20px; }
.faq summary { position: relative; padding: 20px 58px 20px 24px; border-radius: 20px; font-size: 1.0625rem; font-weight: 600; line-height: 1.4; list-style: none; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 24px; top: 50%; width: 9px; height: 9px; margin-top: -7px; border-right: 2px solid var(--link); border-bottom: 2px solid var(--link); transform: rotate(45deg); }
.faq details[open] summary::after { margin-top: -2px; transform: rotate(-135deg); }
.answer { padding: 0 24px 22px; color: var(--ink-2); }
.answer p + p { margin-top: 10px; }

.final { padding: clamp(32px, 7vw, 80px) clamp(20px, 5vw, 56px); border-radius: 36px; text-align: center; }
.final h2 { margin-bottom: 16px; }
.final .lede { margin: 0 auto 28px; }

/* Page de texte (mentions légales) */
.doc { max-width: calc(52rem + 2 * var(--gutter)); padding-block: clamp(32px, 6vw, 72px) clamp(56px, 9vw, 112px); overflow-wrap: break-word; }
.doc__head { margin-bottom: clamp(24px, 4vw, 40px); }
.doc__head h1 { margin-bottom: 14px; font-size: clamp(2.1rem, 1.4rem + 3vw, 3.4rem); }
.doc__sec { margin-bottom: 16px; padding: clamp(22px, 4vw, 36px); scroll-margin-top: 84px; }
.doc__sec h2 { margin-bottom: 14px; font-size: clamp(1.3rem, 1.1rem + .9vw, 1.65rem); letter-spacing: -.02em; }
.doc__sec p { color: var(--ink-2); }
.doc__sec p + p { margin-top: 12px; }
.doc__sec strong { color: var(--ink); }

/* Page 404 */
.lost { padding-block: clamp(40px, 9vw, 112px) clamp(56px, 10vw, 128px); }
.lost__card { max-width: 46rem; margin-inline: auto; padding: clamp(28px, 6vw, 64px) clamp(20px, 5vw, 56px); border-radius: 36px; text-align: center; }
.lost__code { margin-bottom: 4px; font-size: clamp(4.5rem, 2.6rem + 10vw, 8.5rem); font-weight: 800; line-height: 1; letter-spacing: -.06em; }
.lost h1 { margin-bottom: 18px; font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3rem); }
.lost .lede { margin: 0 auto 30px; }
.lost .cta { justify-content: center; }

.foot { padding: 40px 0 56px; border-top: 1px solid var(--edge); color: var(--ink-2); font-size: .9375rem; }
.foot p + p { margin-top: 10px; }
.foot .small { font-size: .875rem; }
.foot a { color: var(--ink); }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

a:focus-visible, summary:focus-visible { outline: 3px solid var(--link); outline-offset: 3px; }

/* Mouvement : seulement si la personne ne l'a pas désactivé */
@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }

	.bg span:nth-child(1) { animation: drift-a 26s ease-in-out infinite alternate; }
	.bg span:nth-child(2) { animation: drift-b 32s ease-in-out infinite alternate; }
	.bg span:nth-child(3) { animation: drift-c 38s ease-in-out infinite alternate; }
	@keyframes drift-a { to { transform: translate3d(8vmax, 6vmax, 0) scale(1.1); } }
	@keyframes drift-b { to { transform: translate3d(-7vmax, 8vmax, 0) scale(.94); } }
	@keyframes drift-c { to { transform: translate3d(-9vmax, -6vmax, 0) scale(1.12); } }

	.soon__dot { animation: pulse 2.4s ease-out infinite; }
	@keyframes pulse {
		0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .7); }
		70%, 100% { box-shadow: 0 0 0 10px rgba(255, 255, 255, 0); }
	}

	.faq summary::after { transition: transform .25s ease, margin-top .25s ease; }

	/* Apparitions au défilement : la classe « anim » est posée par /assets/site.js */
	.anim [data-reveal]:not(.is-in) { opacity: 0; }
	.anim [data-reveal].is-in { animation: rise .85s cubic-bezier(.2, .65, .2, 1) backwards; animation-delay: var(--d, 0s); }
	@keyframes rise {
		from { opacity: 0; transform: translate3d(0, 24px, 0); }
		to { opacity: 1; transform: none; }
	}
	.hero__text > :nth-child(2) { --d: .07s; }
	.hero__text > :nth-child(3) { --d: .14s; }
	.hero__text > :nth-child(4) { --d: .21s; }
	.hero__text > :nth-child(5) { --d: .28s; }
	.hero__text > :nth-child(6) { --d: .35s; }
	.hero__visual { --d: .2s; }
	.grid > :nth-child(3n + 2), .duo > :nth-child(2) { --d: .09s; }
	.grid > :nth-child(3n + 3) { --d: .18s; }
	.doc__head { --d: 0s; }
	.doc__sec:nth-of-type(odd) { --d: .05s; }
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.card, .frame { transition: transform .35s cubic-bezier(.2, .65, .2, 1), box-shadow .35s ease; }
	.card:hover, .shot:hover .frame { transform: translateY(-4px); box-shadow: var(--hi), var(--lift); }
	.btn { transition: transform .25s ease, filter .25s ease; }
	.btn:hover { transform: translateY(-1px); }
}

@media (forced-colors: active) {
	.bg { display: none; }
	.glass, .soon, .tile, .btn--solid { border: 1px solid CanvasText; }
	.grad { background: none; -webkit-text-fill-color: currentColor; color: CanvasText; }
}

@media print {
	.bg { display: none; }
	.anim [data-reveal] { opacity: 1 !important; animation: none !important; }
}