@font-face { font-family: "Geist"; src: url("/site/fonts/geist.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("/site/fonts/geist-mono.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@property --power { syntax: "<color>"; inherits: true; initial-value: #4f8cff; }

:root {
	--font: "Geist", system-ui, sans-serif;
	--spring: cubic-bezier(0.16, 1, 0.3, 1);
	--press: cubic-bezier(0.25, 1, 0.5, 1);
	--canvas: #0a0c12;
	--ink: #f5f6fa;
	--ink-2: #c3c8d4;
	--ink-3: #99a0b2;
	--line: rgb(255 255 255 / 0.1);
	--line-2: rgb(255 255 255 / 0.18);
	--on-light: #0c0e14;
	--coral: #ff6b4a;
	--pink: #ff5fa2;
	--blue: #4f8cff;
	--mint: #2ed39a;
	--amber: #ffc23d;
	--violet: #c08bff;
	--err: #ffb9a8;
	--r-card: 30px;
	--r-in: 16px;
	--nav: 60px;
	/* Le mouvement : 1 par défaut, 0 quand le système demande moins d'animations. Les fondus restent, les déplacements partent. */
	--m: 1;
	color-scheme: dark;
	font-family: var(--font);
	line-height: 1.5;
	color: var(--ink);
	background: var(--canvas);
	-webkit-font-smoothing: antialiased;
	font-feature-settings: "ss01", "cv11";
	scroll-behavior: smooth;
	scroll-padding-top: calc(96px + env(safe-area-inset-top, 0px));
	scrollbar-color: #2a2f3c transparent;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-height: 100dvh; overflow-x: clip; padding-inline: env(safe-area-inset-left, 0px) env(safe-area-inset-right, 0px); }
h1, h2, h3, p, ul, ol, dl, dd, figure, fieldset { margin: 0; padding: 0; border: 0; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
/* Tactile : pas de voile gris au tap (chaque contrôle a son :active), pas de texte gonflé en paysage. */
html { -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* Sous 16 px, iOS zoome sur le champ et ne dézoome plus. */
input, textarea, select { font-size: max(16px, 1em); }
/* Le clic part tout de suite (pas d'attente du double tap), et un appui long ne sélectionne pas un libellé de bouton. */
a, button, summary, label, [role="button"] { touch-action: manipulation; }
button, summary, .btn, .plan, .seg { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
::selection { background: rgb(255 255 255 / 0.9); color: var(--on-light); }
:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 12px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.wrap { width: min(1160px, 100% - 40px); margin-inline: auto; }
.wrap-s { width: min(740px, 100% - 40px); margin-inline: auto; }

/* La lumière, fixe derrière toute la page : c'est elle que le verre laisse passer. */
.light { position: fixed; inset: 0; z-index: -1; width: 100%; height: 100lvh; display: block; }
/* Le même ciel en CSS, aux teintes de la page (--t0 à --t3 et --dim, posés sur <body>), peint dès la première image.
   La nappe WebGL se pose dessus en fondu une fois sa première image prête (data-lit, light.js) : rien ne saute. */
:root { --t0: #ff6b4a; --t1: #ff5fa2; --t2: #7c5cff; --t3: #4f8cff; --dim: 1; }
body::before { content: ""; position: fixed; inset: 0; z-index: -2; height: 100lvh; pointer-events: none; background: radial-gradient(70% 62% at 24% 30%, color-mix(in srgb, var(--t0) calc(var(--dim) * 62%), transparent), transparent 74%), radial-gradient(64% 66% at 78% 40%, color-mix(in srgb, var(--t1) calc(var(--dim) * 62%), transparent), transparent 74%), radial-gradient(60% 52% at 46% 88%, color-mix(in srgb, var(--t2) calc(var(--dim) * 52%), transparent), transparent 74%), color-mix(in srgb, var(--t3) calc(var(--dim) * 22%), var(--canvas)); }
.light:not([data-lit]) { opacity: 0; }
/* Sans WebGL, la lumière reste vivante : deux nappes CSS qui dérivent lentement. */
.light[data-flat] { background: radial-gradient(42% 46% at 30% 34%, rgb(255 107 74 / 0.42), transparent 70%), radial-gradient(44% 50% at 72% 44%, rgb(79 140 255 / 0.42), transparent 70%), radial-gradient(36% 40% at 52% 80%, rgb(192 139 255 / 0.32), transparent 70%), var(--canvas); background-size: 160% 160%; animation: flat-drift 26s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate; }
@keyframes flat-drift { 0% { background-position: 0% 0%, 100% 0%, 50% 100%; } 50% { background-position: 40% 30%, 60% 40%, 20% 60%; } 100% { background-position: 100% 60%, 0% 100%, 80% 20%; } }

h1, h2 { font-weight: 620; letter-spacing: -0.042em; line-height: 1.02; text-wrap: balance; }
.head { text-align: center; }
.head h2 { font-size: clamp(2.5rem, 5.8vw, 4.75rem); }
.head p { max-width: 54ch; margin: 16px auto 0; font-size: 1.1875rem; line-height: 1.45; color: var(--ink); text-wrap: pretty; text-shadow: 0 1px 14px rgb(0 0 0 / 0.4); }

/* Le verre : un flou qui laisse passer la couleur, un liseré de lumière sur le bord haut, un reflet qui suit le pointeur. */
.glass { --ink-2: #dfe3ec; --ink-3: #bcc2d0; position: relative; isolation: isolate; background: linear-gradient(180deg, rgb(255 255 255 / 0.09), rgb(255 255 255 / 0.03)), rgb(10 12 18 / 0.5); -webkit-backdrop-filter: blur(30px) saturate(185%); backdrop-filter: blur(30px) saturate(185%); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.3), inset 0 -1px 0 rgb(255 255 255 / 0.05), inset 0 0 0 0.5px rgb(255 255 255 / 0.16), 0 24px 60px -28px rgb(0 0 0 / 0.7); }
.glass::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: radial-gradient(260px circle at var(--gx, 50%) var(--gy, -10%), rgb(255 255 255 / 0.13), transparent 72%); opacity: var(--go, 0.55); transition: opacity 400ms var(--press); pointer-events: none; }
@media (hover: hover) and (pointer: fine) { .glass:hover { --go: 1; } }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px; border-radius: 999px; font-weight: 560; font-size: 1.0625rem; transition: transform 260ms var(--spring), box-shadow 300ms var(--press), background-color 200ms; }
.btn:active { transform: scale(0.96); transition-duration: 90ms; }
.btn svg { width: 18px; height: 18px; fill: none; stroke: currentcolor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; transition: transform 340ms var(--spring); }
@media (hover: hover) and (pointer: fine) { .btn:hover svg { transform: translateX(3px); } }
.btn.solid { color: var(--on-light); background: #fff; box-shadow: 0 10px 34px -12px rgb(255 255 255 / 0.5); }
@media (hover: hover) and (pointer: fine) { .btn.solid:hover { box-shadow: 0 14px 46px -10px rgb(255 255 255 / 0.7); } }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }
.btn[data-busy] { opacity: 0.7; }
.btn.wide { width: 100%; }

/* Le header : une capsule de verre neutre qui flotte au-dessus de la page. */
.nav, .bar { position: fixed; z-index: 20; top: calc(14px + env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 6px; width: min(960px, calc(100% - 2 * max(12px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px)))); height: var(--nav); padding: 0 8px 0 20px; border-radius: 999px; }
.nav-logo { display: flex; align-items: center; gap: 8px; margin-right: 10px; font-weight: 620; font-size: 1.125rem; letter-spacing: -0.02em; }
.nav-logo svg { width: 20px; height: 20px; flex: none; transition: transform 700ms var(--spring); }
@media (hover: hover) and (pointer: fine) { .nav-logo:hover svg { transform: rotate(90deg); } }
.nav nav { display: flex; gap: 2px; margin-right: auto; }
.nav nav a, .nav-login, .bar-link { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 999px; font-size: 0.9375rem; color: var(--ink-2); transition: color 180ms, background-color 180ms; }
@media (hover: hover) and (pointer: fine) { .nav nav a:hover, .nav-login:hover, .bar-link:hover { color: var(--ink); background: rgb(255 255 255 / 0.09); } }
.nav .btn { min-height: 44px; padding: 0 20px; font-size: 0.9375rem; }
.bar { justify-content: space-between; }
.notice { position: relative; z-index: 21; width: fit-content; max-width: calc(100% - 32px); margin: calc(88px + env(safe-area-inset-top, 0px)) auto -40px; padding: 10px 18px; border-radius: 18px; text-align: center; }

/* Le logo Skillls, en masque : l'étoile se peint de n'importe quelle couleur, y compris du dégradé qui tourne. */
@property --sk-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
:root {
	--star-big: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M197.6 123.5 145 104.2l-19.4-52.7a15.9 15.9 0 0 0-30 0L76.3 104.2l-52.7 19.3a16 16 0 0 0 0 30l52.7 19.4 19.3 52.6a16 16 0 0 0 30 0l19.4-52.6 52.6-19.4a16 16 0 0 0 0-30Z'/%3E%3C/svg%3E");
	--star-small: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M200 16a8 8 0 0 1 8 8v16h16a8 8 0 0 1 0 16h-16v16a8 8 0 0 1-16 0V56h-16a8 8 0 0 1 0-16h16V24a8 8 0 0 1 8-8Z'/%3E%3C/svg%3E");
	--rainbow: conic-gradient(from var(--sk-a), #ff6b4a, #ff5fa2, #c08bff, #4f8cff, #2ed39a, #ffc23d, #ff6b4a);
}
.sk-mark { position: relative; display: inline-block; flex: none; width: 1em; height: 1em; }
.sk-mark i { position: absolute; inset: 0; background: currentcolor; }
.sk-mark-big { -webkit-mask: var(--star-big) center / contain no-repeat; mask: var(--star-big) center / contain no-repeat; }
.sk-mark-small { -webkit-mask: var(--star-small) center / contain no-repeat; mask: var(--star-small) center / contain no-repeat; transform-origin: 78% 18%; }
.sk-mark[data-color] i, .ask-mark i, .ai-mark i { background: var(--rainbow); animation: sk-turn 2.4s linear infinite; }
@keyframes sk-turn { to { --sk-a: 360deg; } }
/* Le loader : l'étoile en couleur qui respire, la petite qui tourne autour d'elle-même. */
.sk-loader { display: inline-grid; place-items: center; gap: 10px; font-size: 34px; color: var(--ink-2); }
.sk-loader .sk-mark { filter: drop-shadow(0 0 14px rgb(255 120 140 / 0.45)); animation: sk-breathe 1.4s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate; }
.sk-loader .sk-mark i { background: var(--rainbow); animation: sk-turn 1.2s linear infinite; }
.sk-loader .sk-mark-small { animation: sk-turn 1.2s linear infinite, sk-twinkle 1.4s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate !important; }
.sk-loader small { font-size: 0.875rem; }
@keyframes sk-breathe { from { transform: scale(calc(1 - 0.12 * var(--m))) rotate(calc(-8deg * var(--m))); } to { transform: scale(1) rotate(0); } }
@keyframes sk-twinkle { from { transform: scale(0.6) rotate(calc(-60deg * var(--m))); opacity: 0.6; } to { transform: none; opacity: 1; } }

/* L'ouverture : le logo arrive blanc, se fait repeindre, perd son nom, file dans la nav, et la page s'allume derrière lui. */
@property --iris { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
.intro { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; animation: intro-safety 0s 9s forwards; }
.intro[data-open] { pointer-events: none; }
.intro-veil { position: absolute; inset: 0; background: var(--canvas); -webkit-mask: radial-gradient(circle at 50% 46%, transparent var(--iris), #000 calc(var(--iris) + 0.6%)); mask: radial-gradient(circle at 50% 46%, transparent var(--iris), #000 calc(var(--iris) + 0.6%)); }
.intro-brand { position: relative; }
:root[data-intro-seen] .intro { display: none; }
@keyframes intro-safety { to { visibility: hidden; opacity: 0; } }
.intro-brand { display: flex; align-items: center; gap: 0.22em; font-size: clamp(64px, 9vw, 112px); }
.intro-mark[data-perched] { animation: perch 1.1s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate; }
@keyframes perch { to { filter: drop-shadow(0 0 22px rgb(255 120 150 / 0.95)) drop-shadow(0 0 40px rgb(124 92 255 / 0.6)); } }
.intro-mark { color: #fff; filter: drop-shadow(0 0 30px rgb(255 255 255 / 0.25)); }
.intro-mark .sk-mark-paint { background: var(--rainbow); animation: sk-turn 1.8s linear infinite; clip-path: circle(0% at 78% 18%); }
.intro-word { display: flex; font-weight: 640; letter-spacing: -0.05em; line-height: 1; }
.intro-word span { display: inline-block; }
:root[data-intro-run] .nav-logo svg, :root[data-intro-run] .nav-word { opacity: 0; }
.nav-word { display: inline-block; }

/* La page derrière l'ouverture : tout attend le signal, puis entre dans l'ordre. Sans JS, un minuteur l'envoie quand même. */
:root:not([data-ready]) .hero .h-in { transform: translateY(110%); }
:root:not([data-ready]) .hero :is(.h-lead, .hero-cta, .ask) { opacity: 0; transform: translateY(calc(18px * var(--m))); filter: blur(8px); }
:root:not([data-ready]) .nav { opacity: 0; filter: blur(8px); }
:root:has(.intro):not([data-ready]) .light { opacity: 0; }
.light { transition: opacity 1400ms var(--press); }
.hero .h-in { transition: transform 1100ms var(--spring); }
.hero h1 .h-line + .h-line .h-in { transition-delay: 90ms; }
.hero :is(.h-lead, .hero-cta, .ask) { transition: opacity 900ms var(--press), transform 1100ms var(--spring), filter 900ms var(--press); }
.hero .h-lead { transition-delay: 260ms; }
.hero .hero-cta { transition-delay: 360ms; }
.hero .ask { transition-delay: 460ms; }
.nav { transition: opacity 700ms var(--press), filter 700ms var(--press); }

/* L'ouverture. */
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(68% 52% at 50% 50%, rgb(10 12 18 / 0.5), transparent); pointer-events: none; }
.hero { position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; min-height: 100svh; padding: calc(120px + env(safe-area-inset-top, 0px)) 20px 48px; text-align: center; }
.hero h1 { font-size: clamp(2.75rem, 6.4vw, 5.75rem); line-height: 1; letter-spacing: -0.045em; }
.h-line { display: block; padding-bottom: 0.12em; margin-bottom: -0.12em; clip-path: inset(-2em -2em 0 -2em); }
:root[data-settled] .h-line { clip-path: none; }
.h-in { display: inline-block; }
.hero > p { max-width: 50ch; font-size: clamp(1.125rem, 1.6vw, 1.3125rem); line-height: 1.42; color: var(--ink); text-wrap: balance; text-shadow: 0 1px 18px rgb(0 0 0 / 0.45); }
.hero h1, .close h2, .thanks h1 { text-shadow: 0 2px 40px rgb(0 0 0 / 0.28); }
.hero-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

/* « superpouvoir » : un courant traverse tout le mot (la lumière court à l'intérieur des lettres), les lettres se soulèvent
   à son passage, puis « Claude », à sa couleur, reçoit la charge et rayonne. */
.sp { position: relative; display: inline-block; }
/* « superpouvoir » vit en permanence : un courant de lumière coule sans arrêt dans les lettres, elles ondulent doucement,
   des étincelles en étoile naissent autour, et toutes les 3,6 s une décharge plus forte les soulève et file jusqu'à « Claude ». */
.sp .l { display: inline-block; }
:root[data-ready] .sp .l { animation: wave 2.8s calc(var(--i) * -140ms) cubic-bezier(0.45, 0, 0.55, 1) infinite alternate, charge 3.6s calc(var(--go, 0.6s) + var(--i) * 46ms) var(--spring) infinite; }
@keyframes wave { from { translate: 0 calc(0.018em * var(--m)); } to { translate: 0 calc(-0.018em * var(--m)); } }
@keyframes charge { 0%, 16%, 100% { transform: none; text-shadow: 0 2px 40px rgb(0 0 0 / 0.28); } 6% { transform: translateY(calc(-0.05em * var(--m))) scale(calc(1 + 0.04 * var(--m))); text-shadow: 0 0 22px rgb(255 190 170 / 0.9), 0 0 50px rgb(255 95 162 / 0.6); } }
.sp::after { content: attr(data-text); position: absolute; inset: 0; color: transparent; pointer-events: none; opacity: 0; background: linear-gradient(100deg, transparent 18%, rgb(255 255 255 / 0.95) 26%, #ffd6c4 30%, #ff8a6a 34%, #ff5fa2 38%, #c08bff 42%, #8fb3ff 46%, transparent 54%) 0 0 / 300% 100% repeat-x; -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 0 10px rgb(255 120 170 / 0.6)); }
:root[data-ready] .sp::after { animation: flow 3.6s var(--go, 0.6s) linear infinite, flow-in 900ms var(--go, 0.6s) ease-out forwards; }
@keyframes flow { from { background-position: 150% 0; } to { background-position: -150% 0; } }
@keyframes flow-in { to { opacity: 0.92; } }
.spark { position: absolute; z-index: 1; width: var(--s); aspect-ratio: 1; margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2); background: var(--c); -webkit-mask: var(--star-big) center / contain no-repeat; mask: var(--star-big) center / contain no-repeat; filter: drop-shadow(0 0 6px var(--c)); pointer-events: none; animation: spark-life var(--life, 1.3s) cubic-bezier(0.16, 1, 0.3, 1) forwards; }
@keyframes spark-life { 0% { opacity: 0; transform: scale(0) rotate(0); } 25% { opacity: 1; transform: scale(1) rotate(45deg); } 100% { opacity: 0; transform: translateY(-0.35em) scale(0.2) rotate(140deg); } }
.cl { position: relative; display: inline-block; color: #f08f68; text-shadow: 0 0 40px rgb(240 143 104 / 0.35); }
:root[data-ready] .cl { animation: receive 3.6s calc(var(--go, 0.6s) + 640ms) var(--spring) infinite; }
.cl::before { content: ""; position: absolute; left: 50%; top: 50%; width: 1.6em; aspect-ratio: 1; margin: -0.8em 0 0 -0.8em; border-radius: 50%; background: repeating-conic-gradient(from 8deg, rgb(255 190 160 / 0.9) 0 2deg, transparent 2deg 30deg); -webkit-mask: radial-gradient(closest-side, transparent 52%, #000 54%, #000 70%, transparent 72%); mask: radial-gradient(closest-side, transparent 52%, #000 54%, #000 70%, transparent 72%); opacity: 0; pointer-events: none; }
:root[data-ready] .cl::before { animation: burst 3.6s calc(var(--go, 0.6s) + 640ms) cubic-bezier(0.16, 1, 0.3, 1) infinite; }
@keyframes receive { 0%, 24%, 100% { color: #f08f68; text-shadow: 0 0 40px rgb(240 143 104 / 0.35); } 5% { color: #fff3ec; text-shadow: 0 0 22px rgb(255 200 170 / 0.95), 0 0 70px rgb(240 120 80 / 0.8); } }
@keyframes burst { 0% { opacity: 0.9; transform: scale(0.5) rotate(0); } 12% { opacity: 0; transform: scale(calc(1 + 0.5 * var(--m))) rotate(calc(30deg * var(--m))); } 100% { opacity: 0; } }

/* Les familles flottent autour du titre, en verre : la preuve du catalogue, sans un seul nom d'outil. */
.orbs { position: absolute; inset: 0; z-index: -1; pointer-events: none; transform: translate(var(--px, 0), var(--py, 0)); transition: transform 900ms var(--spring); }
.orbs li { position: absolute; left: var(--x); top: var(--y); display: flex; align-items: center; gap: 10px; padding: 9px 16px 9px 10px; border-radius: 999px; font-size: 0.9375rem; font-weight: 560; background: linear-gradient(180deg, rgb(255 255 255 / 0.12), rgb(255 255 255 / 0.04)), rgb(10 12 18 / 0.42); -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.3), inset 0 0 0 0.5px rgb(255 255 255 / 0.16), 0 20px 50px -24px var(--t); animation: drift var(--dur, 9s) var(--d, 0s) cubic-bezier(0.45, 0, 0.55, 1) infinite alternate; }
.orbs li i { width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, var(--t) 55%, color-mix(in srgb, var(--t) 40%, #000)); box-shadow: 0 0 18px var(--t); }
.orbs li span { font-variant-numeric: tabular-nums; color: var(--ink-2); font-weight: 500; }
:root:not([data-ready]) .orbs li { opacity: 0; scale: calc(1 - 0.3 * var(--m)); filter: blur(10px); }
.orbs li { transition: opacity 800ms var(--press), scale 1000ms var(--spring), filter 800ms var(--press); transition-delay: calc(700ms + var(--k, 0) * 110ms); }
@keyframes drift { from { translate: 0 0; } to { translate: calc(var(--dx, 12px) * var(--m)) calc(var(--dy, -16px) * var(--m)); } }

/* La console : une vraie barre de demande, des envies en pastilles, et les outils qui arrivent en chaîne. */
.ask { display: grid; justify-items: center; gap: 12px; width: min(880px, 100%); margin-top: 18px; padding: 10px 10px 14px; border-radius: 32px; }
.ask-bar { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 0 8px 0 18px; border-radius: 24px; background: rgb(0 0 0 / 0.3); box-shadow: inset 0 0 0 1px var(--line), inset 0 1px 0 rgb(255 255 255 / 0.04); }
.ask-mark { font-size: 22px; }
.ask-line { flex: 1; min-width: 0; display: flex; align-items: center; text-align: left; font-size: 1.125rem; white-space: nowrap; overflow: hidden; }
.ask-go { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; color: var(--on-light); background: #fff; transform: scale(0.86); opacity: 0.5; transition: transform 420ms var(--spring), opacity 300ms, box-shadow 400ms; }
.ask-go svg { width: 20px; height: 20px; fill: none; stroke: currentcolor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ask[data-sent] .ask-go { transform: none; opacity: 1; box-shadow: 0 0 0 6px rgb(255 255 255 / 0.14), 0 10px 30px -8px rgb(255 255 255 / 0.7); }
.ask-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.ask-pills button { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px 0 12px; border-radius: 999px; font-size: 0.9375rem; font-weight: 520; color: var(--ink-2); background: rgb(255 255 255 / 0.06); box-shadow: inset 0 0 0 1px var(--line); transition: background-color 260ms var(--press), color 200ms, box-shadow 260ms, transform 200ms var(--spring); }
@media (hover: hover) and (pointer: fine) { .ask-pills button:hover { color: var(--ink); background: rgb(255 255 255 / 0.12); } }
.ask-pills button:active { transform: scale(0.96); }
.ask-pills i { width: 9px; height: 9px; border-radius: 50%; background: var(--t); box-shadow: 0 0 10px var(--t); }
.ask-pills button[aria-pressed="true"] { color: var(--on-light); background: #fff; box-shadow: 0 8px 24px -10px rgb(255 255 255 / 0.7); }
.tools { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; min-height: 44px; }
/* Une seule ligne quand elle tient ; sinon une grille 2 × 2, sans traits de liaison orphelins en début de ligne. */
@media (min-width: 940px) { .tools { flex-wrap: nowrap; } .tools li { white-space: nowrap; } }
@media (max-width: 939px) { .tools { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); justify-content: center; } .tools li + li { margin-left: 0; } .tools li + li::before { display: none; } }
@media (max-width: 420px) { .tools { grid-template-columns: minmax(0, max-content); } }
.tools li { position: relative; display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px 0 6px; border-radius: 999px; font-size: 0.875rem; background: linear-gradient(180deg, rgb(255 255 255 / 0.12), rgb(255 255 255 / 0.04)); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.26), inset 0 0 0 0.5px rgb(255 255 255 / 0.16), 0 12px 30px -18px var(--t, #fff); animation: bloom 620ms var(--spring) both; animation-delay: calc(var(--i) * 140ms); }
.tools li + li { margin-left: 18px; }
.tools li + li::before { content: ""; position: absolute; right: 100%; top: 50%; width: 18px; height: 2px; margin-top: -1px; border-radius: 2px; background: linear-gradient(90deg, rgb(255 255 255 / 0.2), #fff); box-shadow: 0 0 10px rgb(255 255 255 / 0.6); transform-origin: left; animation: wire 420ms var(--spring) both; animation-delay: calc(var(--i) * 140ms - 60ms); }
@keyframes wire { from { transform: scaleX(0); } }
.tools b { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-size: 0.8125rem; font-weight: 620; color: var(--on-light); background: #fff; }
@keyframes bloom { from { opacity: 0; transform: translateY(calc(10px * var(--m))) scale(calc(1 - 0.14 * var(--m))); filter: blur(6px); } }
.ask small { font-size: 0.875rem; color: var(--ink-2); min-height: 1.4em; }

.seg { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 5px; border-radius: 999px; }
.seg button { position: relative; z-index: 1; min-height: 46px; padding: 0 16px; border-radius: 999px; font-size: 0.9688rem; font-weight: 520; color: var(--ink-2); white-space: nowrap; transition: color 220ms; }
@media (hover: hover) and (pointer: fine) { .seg button:hover { color: var(--ink); } }
.seg button[aria-pressed="true"], .seg button[aria-checked="true"] { color: var(--on-light); }
.thumb { position: absolute; z-index: 0; top: 5px; bottom: 5px; left: 0; width: 0; border-radius: 999px; background: #fff; box-shadow: 0 6px 22px -8px rgb(255 255 255 / 0.6); opacity: 0; transition: transform 460ms var(--spring), width 460ms var(--spring), opacity 200ms; }

.section { padding-top: clamp(90px, 14vh, 150px); }
.card { border-radius: var(--r-card); }

/* « Même demande » : deux pages entièrement composées, l'avant et l'après. Chaque étape joue sa propre chorégraphie,
   avec ses délais ; en reculant, tout revient sans délai pour rester sous le doigt. Les attributs s1 à s5 marquent les étapes atteintes. */
.morph { --ease: cubic-bezier(0.16, 1, 0.3, 1); --wipe: cubic-bezier(0.7, 0, 0.2, 1); display: grid; grid-template-columns: minmax(0, 1fr) 300px; grid-template-areas: "stage steps" "scrub steps" "cap cap"; gap: 14px 22px; margin-top: 40px; }
.morph[data-dir="back"] *, .morph[data-dir="back"] *::before, .morph[data-dir="back"] *::after { transition-delay: 0ms !important; }
.m-stage { grid-area: stage; overflow: hidden; border-radius: 30px; background: #0d0f16; box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.22), 0 0 0 0.5px rgb(255 255 255 / 0.2), 0 50px 120px -50px rgb(0 0 0 / 0.95); transition: box-shadow 1200ms var(--ease); }
.morph[data-s2] .m-stage { box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.3), 0 0 0 0.5px rgb(255 255 255 / 0.24), 0 60px 160px -40px rgb(255 95 162 / 0.6); }
.m-bar { display: flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; font-size: 0.75rem; color: var(--ink-3); background: rgb(255 255 255 / 0.05); }
.m-bar > i { width: 10px; height: 10px; border-radius: 50%; background: rgb(255 255 255 / 0.16); }
.m-url { margin-left: 10px; padding: 3px 12px; border-radius: 999px; background: rgb(255 255 255 / 0.06); }
.m-verdict { margin-left: auto; padding: 3px 11px; border-radius: 999px; font-weight: 560; color: var(--ink-2); background: rgb(255 255 255 / 0.08); transition: color 400ms, background-color 400ms; }
.m-verdict[data-swap] { animation: verdict 520ms var(--ease); }
@keyframes verdict { from { opacity: 0; filter: blur(4px); transform: translateY(calc(6px * var(--m))); } }
.morph[data-s5] .m-verdict { color: #06281d; background: var(--mint); }

.m-site { position: relative; container-type: inline-size; aspect-ratio: 16 / 9.4; overflow: hidden; background: #e9eaee; }

/* L'avant : la page « correcte » que Claude livre seul. */
.m-before { position: absolute; inset: 0; padding: 4.4cqi 5cqi; color: #30343c; font-family: Arial, Helvetica, sans-serif; background: #e9eaee; transition: opacity 420ms var(--ease), transform 700ms var(--ease), filter 500ms var(--ease); }
.mb-nav { display: flex; align-items: center; gap: 1.6cqi; font-size: 1.9cqi; }
.mb-nav b { margin-right: auto; font-weight: 700; opacity: 0.55; }
.mb-nav i { width: 7cqi; height: 1.1cqi; border-radius: 0.5cqi; background: #c6c9d0; }
.mb-title { margin-top: 8.6cqi; font-size: 4.4cqi; font-weight: 600; line-height: 1.08; }
.mb-text { max-width: 44cqi; margin-top: 1.6cqi; font-size: 1.9cqi; line-height: 1.45; color: #636a76; }
.mb-btn { display: inline-block; margin-top: 2.4cqi; padding: 1.2cqi 2.2cqi; border-radius: 0.8cqi; font-size: 1.8cqi; color: #fff; background: #4a6fb5; }
.mb-cards { position: absolute; left: 5cqi; right: 5cqi; bottom: 5cqi; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6cqi; }
.mb-cards i { height: 11cqi; border-radius: 1cqi; background: #d6d8de; }
.morph[data-s2] .m-before { opacity: 0; transform: scale(calc(1 - 0.04 * var(--m))); filter: blur(6px); transition-delay: 380ms; }

/* Étape 1 : un balayage, puis des pastilles sur tout ce qui fait générique. */
.m-scan { position: absolute; top: 0; bottom: 0; left: 0; width: 22cqi; background: linear-gradient(90deg, transparent, rgb(79 140 255 / 0.3) 70%, rgb(160 196 255 / 0.95)); opacity: 0; pointer-events: none; }
.morph[data-s1]:not([data-s2]) .m-scan { animation: m-scan 1.2s var(--wipe) both; }
@keyframes m-scan { 0% { opacity: 1; transform: translateX(-22cqi); } 85% { opacity: 1; } 100% { opacity: 0; transform: translateX(100cqi); } }
.m-notes li { position: absolute; display: flex; align-items: center; gap: 0.8cqi; padding: 0.7cqi 1.4cqi; border-radius: 9cqi; font-family: var(--font); font-size: 1.5cqi; font-weight: 600; color: #fff; background: #e5484d; box-shadow: 0 1cqi 3cqi -1cqi rgb(229 72 77 / 0.6); opacity: 0; transform: scale(calc(1 - 0.25 * var(--m))); transition: opacity 220ms var(--ease), transform 460ms var(--ease); }
.m-notes li::before { content: ""; width: 0.9cqi; height: 0.9cqi; border-radius: 50%; background: #fff; }
.m-notes li:nth-child(1) { left: 37cqi; top: 13.4cqi; }
.m-notes li:nth-child(2) { left: 20cqi; top: 32cqi; }
.m-notes li:nth-child(3) { right: 7cqi; bottom: 17.4cqi; }
.morph[data-s1]:not([data-s2]) .m-notes li { opacity: 1; transform: none; transition-delay: calc(650ms + var(--i) * 130ms); }

/* Étape 2 : la direction artistique repeint tout, depuis la palette. */
.m-after { position: absolute; inset: 0; color: #fff1e6; font-family: var(--font); pointer-events: none; }
.ma-bg { position: absolute; inset: 0; background: radial-gradient(60% 80% at 88% 8%, rgb(255 95 162 / 0.6), transparent 62%), radial-gradient(70% 90% at 0% 100%, rgb(255 107 74 / 0.55), transparent 64%), radial-gradient(40% 50% at 56% 58%, rgb(124 92 255 / 0.32), transparent 70%), #160a1f; clip-path: circle(0% at 50% 50%); transition: clip-path 1000ms var(--wipe); }
.morph[data-s2] .ma-bg { clip-path: circle(120% at 50% 50%); }
.m-palette { position: absolute; left: 50%; top: 50%; display: flex; align-items: center; gap: 1.2cqi; translate: -50% -50%; }
.m-palette li { width: 6cqi; height: 6cqi; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 0.3cqi rgb(255 255 255 / 0.55), 0 2cqi 4cqi -1cqi rgb(0 0 0 / 0.5); opacity: 0; transform: translateY(calc(3cqi * var(--m))) scale(calc(1 - 0.5 * var(--m))); transition: opacity 260ms var(--ease), transform 640ms var(--ease); }
.m-palette .m-aa { display: grid; place-items: center; width: auto; height: auto; margin-right: 1.4cqi; padding: 0; order: -1; font-family: var(--font); font-size: 11cqi; font-weight: 700; letter-spacing: -0.06em; line-height: 1; color: #fff1e6; background: none; box-shadow: none; }
.morph[data-s2]:not([data-s3]) .m-palette li { opacity: 1; transform: none; transition-delay: calc(500ms + var(--i) * 70ms); }
.morph[data-s3] .m-palette li { transform: translateY(calc(-3cqi * var(--m))); }

/* Étape 3 : la nouvelle page se compose, ligne après ligne. */
.ma-nav { position: absolute; top: 4.4cqi; left: 5cqi; right: 5cqi; display: flex; align-items: center; gap: 2.6cqi; font-size: 1.5cqi; opacity: 0; transform: translateY(calc(-2cqi * var(--m))); transition: opacity 500ms var(--ease), transform 800ms var(--ease); }
.ma-nav b { display: flex; align-items: center; gap: 0.8cqi; margin-right: auto; font-size: 1.8cqi; font-weight: 700; letter-spacing: -0.02em; }
.ma-nav b i { width: 1.6cqi; height: 1.6cqi; border-radius: 50%; background: #ff6b4a; box-shadow: 0 0 1.4cqi #ff6b4a; }
.ma-nav span { opacity: 0.72; }
.ma-nav em { padding: 0.8cqi 1.8cqi; border-radius: 9cqi; font-style: normal; font-weight: 650; color: #160a1f; background: #fff1e6; }
.ma-title { position: absolute; left: 5cqi; top: 12.6cqi; font-size: 7.4cqi; font-weight: 720; line-height: 0.94; letter-spacing: -0.058em; }
.ma-l { display: block; overflow: hidden; padding-bottom: 0.06em; }
.ma-l > span { display: inline-block; transform: translateY(110%); transition: transform 900ms var(--ease); }
.ma-out > span { color: transparent; -webkit-text-stroke: 0.14cqi #fff1e6; }
.ma-title em { font-style: normal; color: #ff6b4a; }
.ma-text { position: absolute; left: 5cqi; top: 37.4cqi; max-width: 34cqi; font-size: 1.65cqi; line-height: 1.45; opacity: 0; transform: translateY(calc(2cqi * var(--m))); transition: opacity 600ms var(--ease), transform 900ms var(--ease); color: rgb(255 241 230 / 0.82); }
.ma-cta { position: absolute; left: 5cqi; top: 46cqi; display: flex; align-items: center; gap: 1.2cqi; padding: 0.6cqi 0.6cqi 0.6cqi 2.2cqi; border-radius: 9cqi; font-size: 1.6cqi; font-weight: 650; color: #160a1f; background: #fff1e6; opacity: 0; transform: translateY(calc(2cqi * var(--m))); transition: opacity 600ms var(--ease), transform 900ms var(--ease), box-shadow 400ms; }
.ma-cta i { width: 3.4cqi; height: 3.4cqi; border-radius: 50%; background: #ff6b4a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M5 10h10m-4-4 4 4-4 4'/%3E%3C/svg%3E") center / 60% no-repeat; }
.ma-tiles { position: absolute; right: 5cqi; top: 11.8cqi; width: 43cqi; height: 41cqi; display: grid; grid-template-columns: 1.25fr 1fr; grid-template-rows: 1fr 1fr; gap: 1.4cqi; }
.ma-tile { position: relative; overflow: hidden; border-radius: 2.4cqi; clip-path: inset(100% 0 0 0 round 2.4cqi); transition: clip-path 1000ms var(--wipe); box-shadow: inset 0 0 0 0.15cqi rgb(255 255 255 / 0.18); }
.ma-tile.ma-t1 { grid-row: span 2; background: radial-gradient(90% 70% at 50% 18%, #ffd3b0, #ff6b4a 46%, #6e1a3a 100%); }
.ma-tile.ma-t2 { background: radial-gradient(90% 90% at 30% 20%, #ffe29a, #ffc23d 50%, #b9741a); }
.ma-tile.ma-t3 { background: radial-gradient(90% 90% at 70% 20%, #ffc4dd, #ff5fa2 50%, #8d1f55); }
.ma-tile::after { content: ""; position: absolute; inset: 0; background: repeating-radial-gradient(circle at 30% 20%, rgb(255 255 255 / 0.05) 0 1px, transparent 1px 3px); mix-blend-mode: overlay; }
.vase { position: absolute; left: 50%; bottom: 7%; width: 74%; aspect-ratio: 100 / 140; translate: -50% 0; background: radial-gradient(55% 45% at 36% 46%, #fffaf4, #f1d6c1 50%, #b98670 100%); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 140'%3E%3Cpath d='M38 4h24v7c0 5 3 9 9 15 11 11 19 24 19 42 0 31-17 57-40 70C27 124 10 98 10 68c0-18 8-31 19-42 6-6 9-10 9-15Z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 140'%3E%3Cpath d='M38 4h24v7c0 5 3 9 9 15 11 11 19 24 19 42 0 31-17 57-40 70C27 124 10 98 10 68c0-18 8-31 19-42 6-6 9-10 9-15Z'/%3E%3C/svg%3E") center / contain no-repeat; filter: drop-shadow(0 2cqi 2cqi rgb(60 10 30 / 0.5)); }
.vase::before { content: ""; position: absolute; left: 0; right: 0; top: 46%; height: 6%; background: rgb(255 107 74 / 0.75); }
.bowl { position: absolute; left: 50%; bottom: 20%; width: 64%; height: 34%; translate: -50% 0; border-radius: 0 0 50% 50% / 0 0 100% 100%; background: radial-gradient(60% 80% at 40% 20%, #3a1630, #160a1f); box-shadow: 0 2cqi 3cqi -1cqi rgb(80 40 0 / 0.5); }
.plate { position: absolute; left: 50%; top: 50%; width: 62%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(circle, #fff1e6 0 38%, #f2cfe0 39% 44%, #fff1e6 45% 66%, #f7d8e8 67%); box-shadow: 0 2cqi 3cqi -1cqi rgb(80 10 40 / 0.5); }
.ma-tile b { position: absolute; left: 1.6cqi; top: 1.4cqi; padding: 0.5cqi 1.2cqi; border-radius: 9cqi; font-size: 1.3cqi; font-weight: 600; color: #160a1f; background: rgb(255 241 230 / 0.9); }
.ma-badge { position: absolute; left: 44.6cqi; top: 39cqi; width: 12cqi; overflow: visible; opacity: 0; transform: scale(calc(1 - 0.4 * var(--m))) rotate(-40deg); transition: opacity 500ms var(--ease), transform 1100ms var(--ease); }
.ma-badge text { font-size: 9.4px; font-weight: 600; letter-spacing: 0.5px; fill: #fff1e6; }
.ma-badge circle { fill: #ff6b4a; }

.morph[data-s3] .ma-nav { opacity: 1; transform: none; transition-delay: 120ms; }
.morph[data-s3] .ma-l > span { transform: none; }
.morph[data-s3] .ma-l:nth-child(1) > span { transition-delay: 200ms; }
.morph[data-s3] .ma-l:nth-child(2) > span { transition-delay: 290ms; }
.morph[data-s3] .ma-l:nth-child(3) > span { transition-delay: 380ms; }
.morph[data-s3] :is(.ma-text, .ma-cta) { opacity: 1; transform: none; }
.morph[data-s3] .ma-text { transition-delay: 520ms; }
.morph[data-s3] .ma-cta { transition-delay: 600ms; }
.morph[data-s3] .ma-tile { clip-path: inset(0 0 0 0 round 2.4cqi); }
.morph[data-s3] .ma-tile.ma-t1 { transition-delay: 260ms; }
.morph[data-s3] .ma-tile.ma-t2 { transition-delay: 380ms; }
.morph[data-s3] .ma-tile.ma-t3 { transition-delay: 480ms; }
.morph[data-s3] .ma-badge { opacity: 1; transform: none; transition-delay: 760ms; }

/* Étape 4 : tout prend vie, sur une seule horloge de 5 s pour que le curseur et le bouton restent synchrones. */
.ma-cursor { position: absolute; left: 0; top: 0; width: 2.4cqi; height: 2.4cqi; border-radius: 50%; background: #fff; box-shadow: 0 0 0 0.7cqi rgb(255 255 255 / 0.25), 0 1cqi 2cqi rgb(0 0 0 / 0.4); opacity: 0; transform: translate(70cqi, 40cqi); transition: opacity 300ms; }
.morph[data-s4] .ma-cursor { opacity: 1; animation: m-cursor 5s var(--ease) infinite; }
@keyframes m-cursor {
	0% { transform: translate(72cqi, 36cqi); }
	30% { transform: translate(19cqi, 47.6cqi); }
	36% { transform: translate(19cqi, 47.6cqi) scale(0.72); }
	42% { transform: translate(19cqi, 47.6cqi); }
	62% { transform: translate(19cqi, 47.6cqi); }
	100% { transform: translate(72cqi, 36cqi); }
}
.morph[data-s4] .ma-cta { animation: m-press 5s var(--ease) infinite; }
@keyframes m-press { 0%, 30%, 70%, 100% { box-shadow: none; translate: 0 0; } 36% { translate: 0 0.3cqi; } 44% { box-shadow: 0 0 0 0.8cqi rgb(255 107 74 / 0.35), 0 2cqi 4cqi -1cqi #ff6b4a; translate: 0 calc(-0.6cqi * var(--m)); } }
.morph[data-s4] .ma-badge { animation: m-spin 16s linear infinite; }
@keyframes m-spin { to { rotate: 360deg; } }
.morph[data-s4] .ma-tile { animation: m-float 5s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate; }
.morph[data-s4] .ma-tile.ma-t2 { animation-delay: -1.6s; }
.morph[data-s4] .ma-tile.ma-t3 { animation-delay: -3.2s; }
@keyframes m-float { to { translate: 0 calc(-1cqi * var(--m)); } }
.morph[data-s4] .vase { animation: m-glint 5s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate; }
@keyframes m-glint { to { filter: brightness(1.12); rotate: calc(-2deg * var(--m)); } }
.morph[data-s4] .ma-out > span { color: transparent; background: linear-gradient(90deg, #ff6b4a, #ff5fa2 30%, #ffc23d 60%, #ff6b4a) 0 0 / 200% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-stroke: 0; animation: m-flow 5s linear infinite; }
@keyframes m-flow { to { background-position: -200% 0; } }

/* Étape 5 : le contrôle final, trois anneaux qui se remplissent. */
.ma-score { position: absolute; right: 6.4cqi; bottom: 3.4cqi; display: flex; align-items: center; gap: 1.6cqi; padding: 0.9cqi 1.6cqi 0.9cqi 1cqi; border-radius: 9cqi; font-size: 1.4cqi; color: #fff1e6; background: rgb(22 10 31 / 0.72); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: inset 0 0 0 0.12cqi rgb(255 255 255 / 0.2), 0 2cqi 4cqi -1cqi rgb(0 0 0 / 0.5); opacity: 0; transform: translateY(calc(3cqi * var(--m))); transition: opacity 400ms var(--ease), transform 800ms var(--ease); }
.ma-score b { display: none; }
.ma-score span { display: flex; align-items: center; gap: 0.7cqi; }
.ma-score svg { width: 3.2cqi; height: 3.2cqi; rotate: -90deg; }
.ma-score circle { fill: none; stroke: rgb(255 255 255 / 0.18); stroke-width: 4; }
.ma-score circle.on { stroke: var(--mint); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 900ms var(--ease); }
.morph[data-s5] .ma-score { opacity: 1; transform: none; }
.morph[data-s5] .ma-score circle.on { stroke-dashoffset: 0; }
.morph[data-s5] .ma-score span:nth-of-type(1) circle.on { transition-delay: 250ms; }
.morph[data-s5] .ma-score span:nth-of-type(2) circle.on { transition-delay: 380ms; }
.morph[data-s5] .ma-score span:nth-of-type(3) circle.on { transition-delay: 510ms; }

/* Les étapes : les outils numérotés, comme dans l'ouverture. Ceux déjà passés restent allumés. */
.m-steps { grid-area: steps; display: grid; align-content: center; gap: 4px; }
.m-steps button { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 12px; width: 100%; padding: 10px 14px 10px 10px; border-radius: 20px; text-align: left; transition: background-color 300ms, opacity 400ms, box-shadow 300ms; opacity: 0.5; }
@media (hover: hover) and (pointer: fine) { .m-steps button:hover { opacity: 0.85; background: rgb(255 255 255 / 0.05); } }
.m-steps b { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; font-size: 0.875rem; font-weight: 620; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line-2); transition: background-color 360ms var(--press), color 260ms, box-shadow 360ms; }
.m-steps strong { display: block; font-size: 1rem; font-weight: 580; letter-spacing: -0.01em; }
.m-steps small { display: block; font-size: 0.875rem; color: var(--ink-2); }
.m-steps li[data-done] button { opacity: 0.86; }
.m-steps li[data-done] b { color: var(--on-light); background: rgb(255 255 255 / 0.9); box-shadow: none; }
.m-steps li[data-now] button { opacity: 1; background: linear-gradient(180deg, rgb(255 255 255 / 0.12), rgb(255 255 255 / 0.05)); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.28), inset 0 0 0 0.5px rgb(255 255 255 / 0.16); }
.m-steps li[data-now] b { color: var(--on-light); background: #fff; box-shadow: 0 6px 22px -6px rgb(255 255 255 / 0.7); animation: tick-pop 520ms var(--ease); }
@keyframes tick-pop { 40% { transform: scale(calc(1 + 0.16 * var(--m))); } }
.m-steps li[data-step="0"][data-now] b { color: var(--ink); background: rgb(255 255 255 / 0.16); box-shadow: none; }

.m-scrub { grid-area: scrub; display: flex; align-items: center; gap: 12px; padding: 8px 18px 8px 8px; border-radius: 999px; }
.m-play { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: rgb(255 255 255 / 0.1); transition: background-color 200ms, transform 240ms var(--spring); }
@media (hover: hover) and (pointer: fine) { .m-play:hover { background: rgb(255 255 255 / 0.18); } }
.m-play:active { transform: scale(0.92); }
.m-play svg { width: 18px; height: 18px; fill: none; stroke: currentcolor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.m-track { --p: 0; position: relative; flex: 1; height: 40px; }
.m-track::before, .m-fill { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 6px; margin-top: -3px; border-radius: 99px; background: rgb(255 255 255 / 0.12); }
.m-fill { right: auto; width: calc(var(--p) * 100%); background: linear-gradient(90deg, rgb(255 255 255 / 0.5), #fff); box-shadow: 0 0 18px rgb(255 255 255 / 0.5); }
.m-fill::after { content: ""; position: absolute; right: -11px; top: 50%; width: 22px; height: 22px; margin-top: -11px; border-radius: 50%; background: #fff; box-shadow: 0 4px 16px rgb(0 0 0 / 0.4), 0 0 0 6px rgb(255 255 255 / 0.16); }
.m-ticks { position: absolute; inset: 0; display: flex; justify-content: space-between; align-items: center; pointer-events: none; }
.m-ticks i { width: 4px; height: 4px; border-radius: 50%; background: rgb(255 255 255 / 0.5); }
.m-track input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.m-track:has(input:focus-visible) { outline: 2px solid #fff; outline-offset: 4px; border-radius: 999px; }
.morph > figcaption { grid-area: cap; text-align: center; font-size: 0.8125rem; color: var(--ink-2); text-shadow: 0 1px 10px rgb(0 0 0 / 0.5); }

/* Les familles : des nombres, jamais des noms. */
.families { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; margin-top: 40px; }
.family { grid-column: span 2; overflow: hidden; display: flex; flex-direction: column; min-height: 220px; padding: 24px 26px; border-radius: var(--r-card); }
.family:nth-child(2) { grid-column: span 4; }
.family::after { content: ""; position: absolute; z-index: -1; right: -18%; top: -36%; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--t) 62%, transparent), transparent); }
.family b { font-size: 1.1875rem; font-weight: 600; letter-spacing: -0.02em; }
.family span { margin-top: 2px; font-size: 0.9375rem; color: var(--ink-2); }
.family em { margin-top: auto; padding-top: 22px; font-size: clamp(3rem, 5.4vw, 4.5rem); font-style: normal; font-weight: 620; line-height: 1; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }

/* La démonstration. */
.demo { margin-top: 40px; padding: 14px; border-radius: 36px; }
.demo-win { display: grid; grid-template-columns: minmax(0, 1fr) 96px minmax(0, 1fr); min-height: 410px; }
.demo-pane { padding: 18px; border-radius: 24px; background: rgb(8 10 16 / 0.5); }
.demo-bar { padding-bottom: 12px; font-size: 0.875rem; font-weight: 540; color: var(--ink-2); }
.demo-input { display: flex; align-items: center; min-height: 48px; padding: 0 16px; border-radius: var(--r-in); background: rgb(255 255 255 / 0.07); font-size: 1.0625rem; }
.caret { width: 2px; height: 20px; margin-left: 1px; border-radius: 2px; background: #fff; animation: blink 1.1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.demo-results { display: grid; gap: 6px; margin-top: 12px; }
.demo-results li { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 14px; border-radius: 14px; font-size: 0.9375rem; color: var(--ink-2); background: rgb(255 255 255 / 0.04); animation: slide 420ms var(--spring) both; transition: background-color 300ms, color 200ms; }
.demo-results li::before { content: ""; width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--line-2); transition: background-color 240ms, box-shadow 240ms; }
.demo-results li[data-on] { color: var(--ink); background: rgb(255 255 255 / 0.1); }
.demo-results li[data-on]::before { background: #fff; box-shadow: none; }
@keyframes slide { from { opacity: 0; transform: translateX(calc(-10px * var(--m))); } }
.demo-link { display: grid; place-items: center; }
.demo-copy { padding: 8px 14px; border-radius: 999px; font-size: 0.8125rem; font-weight: 580; color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line-2); transition: background-color 260ms, color 200ms, transform 300ms var(--spring); }
.demo-copy[data-on] { color: var(--on-light); background: #fff; box-shadow: none; transform: scale(1.06); }
.demo-paste { display: grid; gap: 8px; align-content: start; min-height: 190px; padding: 14px 16px; border-radius: var(--r-in); background: rgb(255 255 255 / 0.05); }
.demo-paste span { font-size: 0.9375rem; color: var(--ink-2); animation: slide 320ms var(--spring) both; }
.demo-go { margin-top: 10px; padding: 12px 16px; border-radius: 18px 18px 18px 6px; font-size: 1rem; background: rgb(255 255 255 / 0.12); opacity: 0; transform: translateY(6px); transition: opacity 320ms, transform 420ms var(--spring); }
.demo-go[data-on] { opacity: 1; transform: none; }
.demo + small, .note { display: block; margin-top: 12px; text-align: center; font-size: 0.8125rem; color: var(--ink-2); text-shadow: 0 1px 10px rgb(0 0 0 / 0.5); }

/* Les Super Kits. */
.kit-rail { display: flex; gap: 14px; margin-top: 40px; padding: 4px max(20px, calc((100vw - 1160px) / 2)) 30px; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: max(20px, calc((100vw - 1160px) / 2)); scrollbar-width: none; }
.kit-rail::-webkit-scrollbar { display: none; }
.kit-rail > li { --a: #ff6b4a; --b: #a78bfa; flex: 0 0 min(380px, 82vw); scroll-snap-align: start; overflow: hidden; padding-bottom: 22px; border-radius: var(--r-card); transition: transform 460ms var(--spring); }
@media (hover: hover) and (pointer: fine) { .kit-rail > li:hover { transform: translateY(-5px) scale(1.012); } }
[data-kit="metamorphose"] { --a: #ff6b4a; --b: #ff5fa2; }
[data-kit="site-vivant"] { --a: #a78bfa; --b: #38bdf8; }
[data-kit="statique-anime"] { --a: #fbbf24; --b: #ff5fa2; }
[data-kit="app-premium"] { --a: #2ed39a; --b: #4f8cff; }
[data-kit="seo-90"] { --a: #2ed39a; --b: #fbbf24; }
[data-kit="machine-a-clients"] { --a: #ffc23d; --b: #ff6b4a; }
[data-kit="lancement-total"] { --a: #38bdf8; --b: #ff5fa2; }
[data-kit="forteresse"] { --a: #4f8cff; --b: #2ed39a; }
.super-scene { position: relative; display: block; height: 230px; margin: 8px 8px 0; overflow: hidden; border-radius: 23px; background: #0b0d14; isolation: isolate; }
.super-scene .sk-page { height: 230px; }
.kit-rail h3 { padding: 16px 22px 0; font-size: 1.375rem; font-weight: 610; letter-spacing: -0.025em; }
.kit-rail > li > p { padding: 4px 22px 0; color: var(--ink-2); text-wrap: pretty; }

/* Skillls AI : l'IA elle-même, en démonstration. Une demande s'écrit, il réfléchit, le plan arrive outil par outil, on copie. */
.ai { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 48px; align-items: center; }
.ai .head { text-align: left; }
.ai .head p { margin-inline: 0; }
.ai-points { display: grid; gap: 14px; margin-top: 30px; }
.ai-points li { display: grid; grid-template-columns: 36px 1fr; column-gap: 14px; }
.ai-points li::before { content: ""; grid-row: span 2; width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(180deg, rgb(255 255 255 / 0.16), rgb(255 255 255 / 0.05)) , url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='m6 10.4 2.7 2.7L14 7.6'/%3E%3C/svg%3E") center / 20px no-repeat; box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.3), inset 0 0 0 0.5px rgb(255 255 255 / 0.18); }
.ai-points b { font-weight: 600; font-size: 1.0625rem; }
.ai-points span { color: var(--ink-2); font-size: 0.9375rem; }

.ai-demo { --power: #4f8cff; display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; height: 600px; padding: 0; overflow: hidden; border-radius: 34px; transition: --power 600ms var(--press); }
.ai-demo[data-deep] { --power: #ff6b4a; }
.ai-demo::after { content: ""; position: absolute; inset: auto -20% -40% -20%; height: 70%; z-index: -1; background: radial-gradient(50% 60% at 50% 50%, color-mix(in srgb, var(--power) 45%, transparent), transparent 70%); pointer-events: none; transition: background 600ms; }
.ai-top { display: flex; align-items: center; gap: 10px; padding: 16px 20px; box-shadow: inset 0 -1px 0 var(--line); }
.ai-mark { font-size: 22px; }
.ai-top b { font-weight: 600; }
.ai-status { margin-left: auto; display: flex; align-items: center; gap: 6px; font-size: 0.8125rem; color: var(--ink-2); }
.ai-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 10px var(--mint); }
.ai-thread { display: flex; flex-direction: column; justify-content: flex-end; gap: 14px; padding: 18px 20px; min-height: 0; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 48px); mask-image: linear-gradient(to bottom, transparent, #000 48px); }
.ai-thread > * { flex: none; }
.ai-me { align-self: flex-end; max-width: 82%; padding: 10px 15px; border-radius: 20px 20px 6px 20px; background: linear-gradient(180deg, rgb(255 255 255 / 0.16), rgb(255 255 255 / 0.08)); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.22); opacity: 0; transform: translateY(calc(10px * var(--m))) scale(calc(1 - 0.04 * var(--m))); transform-origin: bottom right; transition: opacity 300ms var(--press), transform 520ms var(--spring); }
.ai-demo:is([data-phase="sent"], [data-phase="think"], [data-phase="answer"], [data-phase="copied"]) .ai-me { opacity: 1; transform: none; }
.ai-think { display: none; align-items: center; gap: 12px; font-size: 0.9375rem; color: var(--ink-2); }
.ai-demo[data-phase="think"] .ai-think { display: flex; animation: rise 360ms var(--spring) both; }
.ai-orbit { position: relative; width: 26px; height: 26px; }
.ai-orbit i { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid transparent; border-top-color: var(--power); animation: orbit-spin 1s linear infinite; }
.ai-orbit i:nth-child(2) { inset: 5px; animation-duration: 0.7s; animation-direction: reverse; border-top-color: #fff; }
.ai-orbit i:nth-child(3) { inset: 10px; border: 0; background: var(--power); box-shadow: 0 0 10px var(--power); animation: core-pulse 0.9s ease-in-out infinite alternate; }
@keyframes orbit-spin { to { transform: rotate(360deg); } }
@keyframes core-pulse { from { transform: scale(0.6); } }
.ai-think-label { animation: rise 320ms var(--spring) both; -webkit-mask-image: linear-gradient(100deg, #000 35%, rgb(0 0 0 / 0.4) 50%, #000 65%); mask-image: linear-gradient(100deg, #000 35%, rgb(0 0 0 / 0.4) 50%, #000 65%); -webkit-mask-size: 250% 100%; mask-size: 250% 100%; }
.ai-answer { display: none; gap: 12px; }
.ai-demo:is([data-phase="answer"], [data-phase="copied"]) .ai-answer { display: grid; }
.ai-answer > p { line-height: 1.5; }
.ai-answer > p .word { animation: word-in 420ms var(--spring) both; }
@keyframes word-in { from { opacity: 0; filter: blur(5px); } }
.ai-plan { display: grid; gap: 6px; }
.ai-plan li { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center; column-gap: 12px; padding: 8px 12px; border-radius: 18px; background: rgb(0 0 0 / 0.22); box-shadow: inset 0 0 0 1px var(--line); animation: plan-in 560ms calc(var(--i) * 260ms) var(--spring) both; }
.ai-plan b { grid-row: span 2; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font-size: 0.8125rem; font-weight: 620; color: var(--on-light); background: #fff; box-shadow: 0 0 0 4px color-mix(in srgb, var(--t) 30%, transparent); }
.ai-plan strong { display: flex; align-items: center; gap: 8px; font-size: 0.9375rem; font-weight: 580; }
.ai-plan strong::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--t); box-shadow: 0 0 8px var(--t); }
.ai-plan small { font-size: 0.8125rem; color: var(--ink-2); }
@keyframes plan-in { from { opacity: 0; transform: translateX(calc(-14px * var(--m))); filter: blur(4px); } }
.ai-actions { display: flex; flex-wrap: wrap; gap: 6px; animation: rise 420ms 1.2s var(--spring) both; }
.ai-copy, .ai-add { display: inline-flex; align-items: center; min-height: 36px; padding: 0 15px; border-radius: 999px; font-size: 0.8125rem; font-weight: 580; }
.ai-copy { color: var(--on-light); background: #fff; transition: background-color 300ms, color 200ms, transform 300ms var(--spring); }
.ai-add { color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line-2); }
.ai-demo[data-phase="copied"] .ai-copy { color: #06281d; background: var(--mint); transform: scale(calc(1 + 0.05 * var(--m))); }
.ai-dock { display: flex; align-items: center; gap: 10px; margin: 0 14px 14px; padding: 8px 8px 8px 16px; border-radius: 22px; background: rgb(0 0 0 / 0.28); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--power) 30%, var(--line)), 0 12px 40px -22px var(--power); transition: box-shadow 600ms; }
.ai-input { flex: 1; min-width: 0; display: flex; align-items: center; min-height: 36px; overflow: hidden; white-space: nowrap; color: var(--ink); }
.ai-input:empty::before { content: "Ce que tu veux faire, avec tes mots"; color: var(--ink-3); }
.ai-deep { position: relative; display: inline-flex; align-items: center; gap: 7px; flex: none; min-height: 32px; padding: 0 12px; border-radius: 999px; overflow: hidden; font-size: 0.8125rem; color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--line); transition: color 300ms, background-color 300ms, box-shadow 300ms; }
.ai-deep i { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3); transition: background-color 300ms, box-shadow 300ms; }
.ai-demo[data-deep] .ai-deep { color: var(--ink); background: color-mix(in srgb, var(--power) 18%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--power) 60%, transparent); }
.ai-demo[data-deep] .ai-deep i { background: var(--power); box-shadow: 0 0 8px var(--power); }
.ai-demo > figcaption { padding: 0 20px 16px; font-size: 0.75rem; color: var(--ink-3); }


/* Les offres : de la couleur qui vit dans le verre, un liseré de lumière qui tourne autour de Pro. */
/* Pro et Équipe côte à côte, Ultra Code dessous sur toute la largeur (la mise en page est dans « Offres alignées », plus bas). */
.offer-wall { display: grid; grid-template-columns: minmax(0, 1fr); align-items: stretch; gap: 14px; margin-top: 40px; }
.offer { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 20px; padding: clamp(26px, 3.2vw, 40px); border-radius: 36px; transition: transform 500ms var(--spring); }
@media (hover: hover) and (pointer: fine) { .offer:hover { transform: translateY(calc(-4px * var(--m))); } }
.offer-aura { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; border-radius: inherit; }
.offer-aura i { position: absolute; width: 70%; aspect-ratio: 1; border-radius: 50%; filter: blur(50px); opacity: 0.7; animation: aura 14s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate; }
.offer-aura i:nth-child(1) { left: -20%; top: -30%; background: var(--a1); }
.offer-aura i:nth-child(2) { right: -25%; top: 10%; background: var(--a2); animation-delay: -5s; animation-duration: 17s; }
.offer-aura i:nth-child(3) { left: 20%; bottom: -45%; background: var(--a3); animation-delay: -9s; animation-duration: 19s; }
@keyframes aura { 50% { translate: calc(14% * var(--m)) calc(10% * var(--m)); scale: 1.12; } 100% { translate: calc(-10% * var(--m)) calc(6% * var(--m)); scale: 0.94; } }
.offer::after { content: ""; position: absolute; inset: 0; z-index: 1; padding: 1.5px; border-radius: inherit; background: conic-gradient(from var(--sk-a), transparent 0 55%, var(--ring1) 70%, var(--ring2) 80%, var(--ring3) 88%, transparent 96%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); animation: sk-turn 7s linear infinite; pointer-events: none; }
.pro { --a1: rgb(79 140 255 / 0.85); --a2: rgb(124 92 255 / 0.8); --a3: rgb(56 189 248 / 0.5); --ring1: #4f8cff; --ring2: #7c5cff; --ring3: #8fd3ff; background: linear-gradient(160deg, rgb(79 140 255 / 0.24), rgb(124 92 255 / 0.12) 70%), rgb(8 12 34 / 0.55); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.42), inset 0 0 0 0.5px rgb(255 255 255 / 0.24), 0 50px 120px -40px rgb(79 140 255 / 0.8); }
.ultra { --a1: rgb(192 139 255 / 0.34); --a2: rgb(255 95 162 / 0.26); --a3: rgb(94 234 212 / 0.2); --holo: linear-gradient(100deg, #ffb3e0, #c9b3ff 30%, #9fd8ff 55%, #a8f2dc 78%, #ffb3e0); background: linear-gradient(135deg, rgb(255 154 213 / 0.09), rgb(143 211 255 / 0.06) 45%, rgb(159 240 216 / 0.05) 70%, rgb(195 166 255 / 0.09)), rgb(6 6 11 / 0.8); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.3), inset 0 0 0 0.5px rgb(255 255 255 / 0.16), 0 50px 120px -50px rgb(150 110 255 / 0.5); }
.ultra::after { background: conic-gradient(from var(--sk-a), #ffb3e0, #c9b3ff, #9fd8ff, #a8f2dc, #c9b3ff, #ffb3e0); animation-duration: 11s; opacity: 0.55; }
.ultra .price b { background: var(--holo); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; filter: drop-shadow(0 0 24px rgb(201 179 255 / 0.35)); }
.ultra .ticks li::before { background-color: rgb(201 179 255 / 0.3); }
.offer h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 1.5rem; font-weight: 620; letter-spacing: -0.03em; }
.offer-name { white-space: nowrap; }
.offer header p { margin-top: 2px; font-size: 1.0625rem; color: var(--ink-2); }
.soon, .offer-tag { padding: 3px 10px; border-radius: 999px; font-size: 0.75rem; font-weight: 580; letter-spacing: 0; }
.soon { color: var(--ink); background: rgb(255 255 255 / 0.08); box-shadow: inset 0 0 0 1px rgb(201 179 255 / 0.55), 0 0 16px -4px rgb(201 179 255 / 0.6); }
.offer-tag { color: #06281d; background: var(--mint); }
.offer .seg { align-self: flex-start; background: rgb(0 0 0 / 0.24); }
.offer .seg button { min-height: 40px; padding: 0 20px; font-size: 0.9375rem; }
.price { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px 12px; }
.price b { font-size: clamp(4.25rem, 7.6vw, 6.5rem); font-weight: 620; line-height: 0.92; letter-spacing: -0.055em; white-space: nowrap; text-shadow: 0 0 60px rgb(255 255 255 / 0.25); }
.price small { padding-bottom: 6px; font-size: 0.9688rem; line-height: 1.28; color: var(--ink-2); }
.price-save { align-self: center; padding: 4px 11px; border-radius: 999px; font-style: normal; font-size: 0.8125rem; font-weight: 600; color: #06281d; background: var(--mint); box-shadow: 0 8px 24px -10px var(--mint); transition: opacity 300ms, transform 420ms var(--spring); }
.offer[data-plan="mensuel"] .price-save { opacity: 0; transform: scale(calc(1 - 0.2 * var(--m))); }
.price-plus { font-size: 1.0156rem; color: var(--ink-2); }
.ticks { display: grid; gap: 9px; font-size: 1rem; }
.ticks li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; }
.ticks li::before { content: ""; width: 20px; height: 20px; margin-top: 2px; border-radius: 50%; background: rgb(255 255 255 / 0.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='m6 10.4 2.7 2.7L14 7.6'/%3E%3C/svg%3E") center / 20px no-repeat; }
.pro .ticks li::before { background-color: rgb(79 140 255 / 0.55); }
.offer .btn { margin-top: auto; }
.pro .btn.solid { position: relative; overflow: hidden; }
.pro .btn.solid::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 35%, rgb(124 92 255 / 0.28) 50%, transparent 65%) 200% 0 / 250% 100% no-repeat; animation: btn-shine 4.2s 1s cubic-bezier(0.45, 0, 0.55, 1) infinite; }
@keyframes btn-shine { 0% { background-position: 200% 0; } 45%, 100% { background-position: -100% 0; } }
.ultra-names { display: flex; flex-wrap: wrap; gap: 6px; }
.ultra-names span { display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px 4px 9px; border-radius: 999px; font-size: 0.8125rem; color: var(--ink); background: rgb(255 255 255 / 0.08); box-shadow: inset 0 0 0 0.5px rgb(255 255 255 / 0.14); }
.ultra-names span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--d); box-shadow: 0 0 8px var(--d); }
.wait { margin-top: auto; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; padding: 5px; border-radius: 999px; background: rgb(0 0 0 / 0.26); }
.wait input { min-width: 0; min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px; background: none; outline: 0; }
.wait:focus-within { box-shadow: inset 0 0 0 2px #fff; }
.wait input::placeholder, .field input::placeholder { color: var(--ink-3); }
.wait button { padding: 0 18px; border-radius: 999px; font-weight: 560; font-size: 0.9375rem; color: var(--on-light); background: #fff; transition: transform 240ms var(--spring); }
.wait button:active { transform: scale(0.96); }
.wait-say { min-height: 1.4em; margin-top: -8px; font-size: 0.875rem; color: var(--ink-2); }

.faq { padding-top: clamp(90px, 14vh, 150px); }
.faq h2 { margin-bottom: 26px; font-size: clamp(2rem, 4vw, 3rem); text-align: center; }
.faq-list { padding: 6px 24px; border-radius: var(--r-card); }
.faq details + details { border-top: 1px solid var(--line); }
.faq summary { display: flex; justify-content: space-between; gap: 16px; padding: 18px 0; font-weight: 520; font-size: 1.0938rem; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 9px; height: 9px; margin: 7px 4px 0 0; border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3); border-radius: 1px; transform: rotate(45deg); transition: transform 340ms var(--spring); }
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq details p { padding-bottom: 18px; color: var(--ink-2); text-wrap: pretty; }

.close { display: grid; justify-items: center; gap: 26px; padding: clamp(110px, 18vh, 190px) 20px; text-align: center; }
.close h2 { font-size: clamp(3rem, 8vw, 7rem); line-height: 0.98; letter-spacing: -0.05em; }

.foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 28px; margin: 0 auto calc(16px + env(safe-area-inset-bottom, 0px)); width: min(1160px, 100% - 24px); padding: 18px 24px; border-radius: 26px; font-size: 0.875rem; color: var(--ink-2); }
.foot nav { display: flex; flex-wrap: wrap; gap: 6px 20px; }
@media (hover: hover) and (pointer: fine) { .foot a:hover { color: var(--ink); } }
.foot small { flex-basis: 100%; font-size: 0.8125rem; color: var(--ink-3); }

/* Les pages à une seule tâche. */
.field { display: grid; gap: 6px; }
.field > span { font-size: 0.9375rem; font-weight: 520; }
.field input { width: 100%; min-height: 54px; padding: 0 16px; border: 0; border-radius: var(--r-in); background: rgb(0 0 0 / 0.26); box-shadow: inset 0 0 0 1px var(--line); font-size: 1.0625rem; transition: box-shadow 200ms; }
@media (hover: hover) and (pointer: fine) { .field input:hover { box-shadow: inset 0 0 0 1px var(--line-2); } }
.field input:focus { outline: 0; box-shadow: inset 0 0 0 2px #fff; }
.field small { font-size: 0.8125rem; color: var(--ink-3); }
.say-error { padding: 10px 14px; border-radius: 14px; font-size: 0.9375rem; color: var(--err); background: rgb(255 107 74 / 0.14); }
.link { justify-self: center; font-size: 0.9375rem; color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 4px; transition: color 200ms, text-decoration-color 200ms; }
@media (hover: hover) and (pointer: fine) { .link:hover { color: var(--ink); text-decoration-color: currentcolor; } }

.login { display: grid; place-items: center; min-height: 100svh; padding: calc(100px + env(safe-area-inset-top, 0px)) 16px calc(40px + env(safe-area-inset-bottom, 0px)); }
.login-card { width: min(440px, 100%); padding: clamp(26px, 5vw, 38px); border-radius: 36px; }
@keyframes rise { from { opacity: 0; transform: translateY(calc(14px * var(--m))) scale(calc(1 - 0.02 * var(--m))); } }
.login-card form { display: grid; gap: 18px; text-align: center; }
.login-mark { justify-self: center; width: 44px; height: 44px; }
.login-card h1 { font-size: 2.25rem; letter-spacing: -0.04em; }
.login-card p { color: var(--ink-2); text-wrap: balance; }
.login-card .field { text-align: left; }
/* Le code, façon verre : des puits qui deviennent blancs en se retournant, un anneau qui glisse, une vague pendant la vérification. */
.otp { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; perspective: 700px; }
.otp input { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; min-height: 0; opacity: 0; font-size: 16px; }
.otp > span:not(.otp-hub) { position: relative; z-index: 0; display: grid; place-items: center; height: 62px; border-radius: var(--r-in); background: rgb(0 0 0 / 0.26); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.08), inset 0 0 0 0.5px rgb(255 255 255 / 0.1); font-size: 1.625rem; font-weight: 600; font-variant-numeric: tabular-nums; backface-visibility: hidden; transition: background-color 240ms var(--press), color 200ms, box-shadow 300ms var(--press); }
.otp > span[data-on] { background: #fff; color: var(--on-light); box-shadow: 0 10px 26px -12px rgb(255 255 255 / 0.65); }
.otp > span[data-at]::after { content: ""; width: 2px; height: 26px; border-radius: 2px; background: #fff; animation: blink 1.1s steps(2) infinite; }
/* L'anneau glisse de case en case ; un arc de lumière en fait le tour sans arrêt, comme un fil sous tension. */
.otp-ring { position: absolute; top: 0; left: 0; z-index: 1; height: 62px; border-radius: var(--r-in); box-shadow: inset 0 0 0 2px #fff, 0 0 0 5px rgb(255 255 255 / 0.12); opacity: 0; pointer-events: none; transition: transform 420ms var(--spring), width 420ms var(--spring), opacity 220ms; }
.otp-ring::before { content: ""; position: absolute; inset: -3px; border-radius: 19px; padding: 3px; background: conic-gradient(from var(--sk-a), transparent 0 62%, #ff5fa2 74%, #fff 82%, #8fb3ff 90%, transparent 98%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); animation: sk-turn 1.4s linear infinite; }
.otp-ring[data-on] { opacity: 1; }
.otp-spark { position: absolute; z-index: 3; width: 10px; height: 10px; background: var(--c); -webkit-mask: var(--star-big) center / contain no-repeat; mask: var(--star-big) center / contain no-repeat; filter: drop-shadow(0 0 5px var(--c)); pointer-events: none; }
/* Pendant la vérification, l'anneau rejoint la pile au centre et son arc de lumière en fait le tour. */
@media (prefers-reduced-motion: no-preference) { .otp[data-state="checking"] .otp-ring { opacity: 1; } }
/* La carte unique : la pile s'y fond (même blanc, même taille), elle passe au vert et la coche s'y dessine.
   Couleur et halo vivent sur ::before, qui ne fait que s'allumer en opacité. --w vient de la largeur d'une case. */
.otp-hub { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; width: var(--w, 56px); height: 62px; margin: auto; border-radius: var(--r-in); background: #fff; box-shadow: 0 10px 26px -12px rgb(255 255 255 / 0.65); pointer-events: none; opacity: 0; transform: scale(0.86); transition: opacity 240ms var(--press), transform 640ms 140ms cubic-bezier(0.2, 1.4, 0.35, 1); }
.otp-hub::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--mint); box-shadow: 0 0 0 10px rgb(46 211 154 / 0.18), 0 0 60px rgb(46 211 154 / 0.7); opacity: 0; transition: opacity 320ms 160ms var(--press); }
.otp-check { position: absolute; width: min(34px, 72%); height: auto; aspect-ratio: 1; fill: none; stroke: #06281d; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 520ms 340ms var(--spring); }
.otp-hub[data-on="ok"] { opacity: 1; transform: scale(1.08); }
.otp-hub[data-on="ok"]::before { opacity: 1; }
.otp-hub[data-on="ok"] .otp-check { stroke-dashoffset: 0; }
.otp-hub[data-on="ok"]::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 2px solid var(--mint); animation: ripple 1s 260ms var(--spring) both; }
@keyframes ripple { from { transform: scale(1); opacity: 0.9; } to { transform: scale(calc(1 + 1.6 * var(--m))); opacity: 0; } }
/* Filet de sécurité : après la réussite, aucune case ne revient, même si une animation est relâchée. */
.otp[data-state="ok"] > span:not(.otp-hub) { opacity: 0; }
/* Le départ vers l'app : la carte verte elle-même grandit en disque, s'assombrit et recouvre l'écran. Rien que transform et opacity. */
.otp-leave { position: fixed; z-index: 200; left: var(--x); top: var(--y); width: var(--d); height: var(--d); margin: calc(var(--d) / -2) 0 0 calc(var(--d) / -2); border-radius: 50%; background: var(--canvas); animation: otp-out 820ms cubic-bezier(0.7, 0, 0.2, 1) both; }
.otp-leave::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--mint); animation: otp-tint 620ms 120ms var(--press) both; }
@keyframes otp-out { from { transform: scale(var(--s0)); } }
@keyframes otp-tint { to { opacity: 0; } }
/* Mouvement réduit : la carte et le voile apparaissent en fondu, sans grandir ni se dessiner. */
@media (prefers-reduced-motion: reduce) {
	.otp-hub, .otp-hub[data-on="ok"] { transform: none; transition: opacity 300ms; }
	.otp-hub::before, .otp-check { transition: none; }
	.otp-leave { inset: 0; width: auto; height: auto; margin: 0; border-radius: 0; animation: auth-in 300ms both; }
	.otp-leave::before { display: none; }
}
.otp[data-state="err"] > span[data-on] { background: rgb(255 107 74 / 0.24); color: var(--err); box-shadow: inset 0 0 0 1px rgb(255 185 168 / 0.5); }
.say-ok { padding: 10px 14px; border-radius: 14px; font-size: 0.9375rem; color: #c9f7e5; background: rgb(46 211 154 / 0.16); animation: rise 420ms var(--spring) both; }

/* Le paiement, façon Sable : une seule feuille de verre, les étapes en tête, la carte Skillls Pro à gauche, le formulaire à droite. */
.pay { width: min(1060px, 100% - 24px); margin-inline: auto; padding: calc(96px + env(safe-area-inset-top, 0px)) 0 calc(40px + env(safe-area-inset-bottom, 0px)); }
.pay-sheet { position: relative; overflow: clip; border-radius: 36px; }
.pay-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; padding: 22px clamp(22px, 3.4vw, 38px); box-shadow: inset 0 -1px 0 var(--line); }
.pay-head h1 { font-size: clamp(1.75rem, 3vw, 2.25rem); letter-spacing: -0.035em; }
.pay-steps { display: flex; align-items: center; gap: 6px; font-size: 0.875rem; font-weight: 520; color: var(--ink-3); }
.pay-steps li { display: flex; align-items: center; gap: 8px; transition: color 300ms; }
.pay-steps li + li::before { content: ""; width: 26px; height: 2px; margin-right: 2px; border-radius: 2px; background: linear-gradient(90deg, #fff 50%, var(--line-2) 50%) 100% 0 / 200% 100%; transition: background-position 520ms var(--spring); }
.pay-steps li[data-done] + li::before { background-position: 0 0; }
.pay-steps i { position: relative; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--line-2); transition: background-color 300ms var(--press), box-shadow 300ms; }
.pay-steps li[data-now] { color: var(--ink); }
.pay-steps li[data-now] i { box-shadow: inset 0 0 0 2px #fff, 0 0 0 4px rgb(255 255 255 / 0.12); }
.pay-steps li[data-done] { color: var(--ink-2); }
.pay-steps li[data-done] i { background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='%230c0e14' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='m6 10.4 2.7 2.7L14 7.6'/%3E%3C/svg%3E") center / 18px no-repeat; box-shadow: none; animation: tick-pop 460ms var(--spring); }
.pay-grid { display: grid; grid-template-columns: minmax(300px, 0.9fr) minmax(0, 1.1fr); }
.pay-main { display: grid; gap: 22px; align-content: start; padding: clamp(22px, 3.4vw, 38px); }
.pay-main legend { padding-bottom: 8px; font-size: 0.9375rem; font-weight: 520; }
.plans { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.plan { position: relative; display: grid; gap: 2px; align-content: start; padding: 14px 16px; border-radius: 20px; background: rgb(0 0 0 / 0.24); box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; transition: background-color 280ms var(--press), color 200ms, transform 340ms var(--spring); }
.plan input { position: absolute; opacity: 0; }
.plan b { font-weight: 600; font-size: 1.0625rem; }
.plan small { font-size: 0.875rem; color: var(--ink-2); }
.plan em { justify-self: start; margin-top: 6px; padding: 2px 9px; border-radius: 999px; font-style: normal; font-size: 0.8125rem; font-weight: 580; color: #06281d; background: var(--mint); }
@media (hover: hover) and (pointer: fine) { .plan:hover { background: rgb(255 255 255 / 0.08); } }
.plan:active { transform: scale(0.98); }
.plan:has(input:checked) { background: #fff; color: var(--on-light); box-shadow: none; }
.plan:has(input:checked) small { color: #4c4f58; }
.plan:has(input:focus-visible) { outline: 2px solid #fff; outline-offset: 2px; }
.pay-card { min-height: 140px; }
.pay-wait { display: grid; place-items: center; min-height: 140px; border-radius: var(--r-in); background: rgb(0 0 0 / 0.2); }
.pay-card[data-loading] { min-height: 0; }
.lapsed-card { position: relative; }
.lapsed-card > .sk-loader { position: absolute; inset: 0; display: grid; place-content: center; }
.lapsed:not([data-loading]) .lapsed-card > .sk-loader { display: none; }
.lapsed[data-loading] .lapsed-card > :not(.sk-loader) { visibility: hidden; }
.btn .sk-loader { font-size: 18px; color: inherit; }
.btn[data-busy] { opacity: 1; }
@keyframes shimmer { to { background-position: -240% 0; } }
.pay-closed { padding: 14px 16px; border-radius: var(--r-in); font-size: 0.9375rem; color: var(--ink-2); background: rgb(0 0 0 / 0.24); }
.consent { display: grid; grid-template-columns: 22px 1fr; gap: 12px; font-size: 0.9375rem; color: var(--ink-2); cursor: pointer; }
.consent input { appearance: none; width: 22px; height: 22px; margin: 1px 0 0; border-radius: 8px; background: rgb(0 0 0 / 0.26) center / 22px no-repeat; box-shadow: inset 0 0 0 1px var(--line-2); cursor: pointer; transition: background-color 200ms, transform 300ms var(--spring); }
.consent input:checked { background-color: #fff; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath fill='none' stroke='%230c0e14' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='m6.5 11.4 3 3 6-6.4'/%3E%3C/svg%3E"); box-shadow: none; transform: scale(1.04); }
.consent a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.pay-note { font-size: 0.875rem; text-align: center; color: var(--ink-3); }
.pay-side { position: sticky; top: calc(84px + env(safe-area-inset-top, 0px)); align-self: start; display: grid; gap: 14px; align-content: start; padding: clamp(22px, 3vw, 32px); background: rgb(0 0 0 / 0.16); box-shadow: inset -1px 0 0 var(--line); }

/* La carte Skillls Pro : elle se remplit avec l'adresse et la formule, penche vers le pointeur,
   et se retourne côté sécurité quand les champs de carte de Stripe arrivent. */
.pass-slot { perspective: 1100px; margin-bottom: 10px; }
.pass { --rx: 0deg; --ry: 0deg; position: relative; aspect-ratio: 1.586; border-radius: 22px; transform-style: preserve-3d; transform: rotateX(var(--rx)) rotateY(calc(var(--ry) + var(--flip, 0deg))); transition: transform 700ms var(--spring); }
.pass[data-tilting] { transition: transform 140ms linear; }
.pass[data-face="back"] { --flip: 180deg; }
.pass-face { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 20px 22px; border-radius: inherit; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; color: #fff; background: radial-gradient(120% 90% at 100% 0%, rgb(192 139 255 / 0.85), transparent 60%), radial-gradient(110% 100% at 0% 100%, rgb(79 140 255 / 0.95), transparent 62%), linear-gradient(160deg, #3a3fd6, #1c1f5c); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.5), inset 0 0 0 0.5px rgb(255 255 255 / 0.3), 0 30px 60px -26px rgb(79 140 255 / 0.85), 0 14px 30px -18px rgb(0 0 0 / 0.7); }
.pass-sheen { position: absolute; inset: 0; background: radial-gradient(220px circle at var(--sx, 30%) var(--sy, 20%), rgb(255 255 255 / 0.32), transparent 70%), repeating-linear-gradient(115deg, rgb(255 255 255 / 0.05) 0 2px, transparent 2px 9px); mix-blend-mode: soft-light; pointer-events: none; }
.pass-top { position: relative; display: flex; align-items: center; justify-content: space-between; }
.pass-top svg { width: 26px; height: 26px; filter: drop-shadow(0 2px 8px rgb(0 0 0 / 0.3)); }
.pass-top b { font-size: 0.9375rem; font-weight: 620; letter-spacing: -0.01em; }
.pass .pass-price { position: relative; color: #fff; margin-top: auto; font-size: clamp(2rem, 3.4vw, 2.5rem); font-weight: 620; letter-spacing: -0.05em; line-height: 1; font-variant-numeric: tabular-nums; }
.pass-price small { margin-left: 8px; font-size: 0.875rem; font-weight: 500; letter-spacing: 0; opacity: 0.8; }
/* Colonnes fixes : l'adresse qui s'écrit ne pousse ni l'expiration ni la formule. */
.pass-bottom { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 18px; margin-top: 14px; }
.pass-bottom span { display: grid; min-width: 0; }
.pass-bottom span:last-child { text-align: right; }
.pass-bottom small { font-size: 0.6875rem; opacity: 0.72; }
.pass-bottom b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.875rem; font-weight: 580; font-variant-numeric: tabular-nums; }
/* Seul le caractère tapé arrive, comme un chiffre dans les cases du code ; le reste de l'adresse ne bouge pas. */
.pass-key { display: inline-block; animation: key-in 260ms var(--spring); }
@keyframes key-in { from { opacity: 0; transform: translateY(calc(0.45em * var(--m))) scale(calc(1 - 0.3 * var(--m))); } }
@keyframes type-in { from { opacity: 0.4; filter: blur(2px); } }
.pass-back { transform: rotateY(180deg); justify-content: flex-end; gap: 6px; background: linear-gradient(160deg, #23266e, #12142f); }
.pass-stripe { position: absolute; left: 0; right: 0; top: 22px; height: 42px; background: #0a0b1c; }
.pass .pass-lock { color: #fff; display: flex; align-items: center; gap: 8px; font-size: 1rem; }
.pass-lock svg, .btn-lock { width: 18px; height: 18px; fill: none; stroke: currentcolor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pass .pass-say { font-size: 0.8125rem; color: #fff; opacity: 0.78; }
.pass-paid { width: min(360px, 82vw); animation: rise 900ms var(--spring) both; }
.pass-paid .pass-face { background: radial-gradient(120% 90% at 100% 0%, rgb(94 234 212 / 0.8), transparent 60%), radial-gradient(110% 100% at 0% 100%, rgb(79 140 255 / 0.9), transparent 62%), linear-gradient(160deg, #1f8f7a, #12305c); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.5), 0 0 0 2px rgb(46 211 154 / 0.7), 0 0 60px 4px rgb(46 211 154 / 0.45), 0 30px 60px -26px rgb(0 0 0 / 0.8); }
.btn-lock { margin-right: -2px; }

/* L'autorisation : la carte quitte sa place et vient au centre, le temps que la banque réponde. */
.pay-auth { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; align-content: center; gap: 22px; background: rgb(10 12 18 / 0.72); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); animation: auth-in 360ms var(--spring) both; }
@keyframes auth-in { from { opacity: 0; } }
.pass-dock { width: min(340px, 74%); perspective: 1100px; }
.pass-dock .pass { animation: pass-breathe 2.4s ease-in-out infinite; }
@keyframes pass-breathe { 50% { transform: translateY(calc(-6px * var(--m))) rotateX(4deg); } }
.pay-auth-say { display: grid; justify-items: center; gap: 6px; text-align: center; }
.pay-auth-say small { color: var(--ink-2); font-size: 0.875rem; }
.spin { width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgb(255 255 255 / 0.2); border-top-color: #fff; animation: spin 800ms linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.pay-side dl { display: grid; gap: 8px; }
.pay-side dl div { display: flex; justify-content: space-between; gap: 16px; }
.pay-side dt { color: var(--ink-2); }
.pay-side dd { font-weight: 540; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pay-side .total { align-items: flex-end; margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--line-2); }
.pay-side .total dt { color: var(--ink); font-weight: 540; }
.pay-side .total dd { font-size: 3.25rem; font-weight: 620; line-height: 0.95; letter-spacing: -0.05em; }
.pay-side p { font-size: 0.9375rem; color: var(--ink-2); }

.thanks { display: grid; place-items: center; align-content: center; gap: 26px; min-height: 100svh; padding: calc(40px + env(safe-area-inset-top, 0px)) 16px calc(40px + env(safe-area-inset-bottom, 0px)); text-align: center; }
.thanks h1 { font-size: clamp(3.5rem, 11vw, 9rem); letter-spacing: -0.05em; }
.thanks-card { display: grid; gap: 14px; width: min(440px, 100%); padding: 24px; border-radius: var(--r-card); }

/* Les pages légales : faites pour être lues, sur un verre plus dense. */
.legal { margin-block: calc(96px + env(safe-area-inset-top, 0px)) calc(40px + env(safe-area-inset-bottom, 0px)); padding: clamp(24px, 5vw, 48px); border-radius: 36px; background: rgb(14 16 23 / 0.76); }
.legal h1 { font-size: clamp(2.5rem, 6vw, 3.75rem); }
.legal .maj { margin-top: 12px; color: var(--ink-3); font-size: 0.9375rem; }
.legal nav { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 16px; font-size: 0.9375rem; }
.legal h2 { margin-top: 40px; font-size: 1.3125rem; font-weight: 600; line-height: 1.25; letter-spacing: -0.015em; }
.legal p, .legal li { margin-top: 10px; color: var(--ink-2); line-height: 1.62; max-width: 72ch; }
.legal ul { display: grid; gap: 2px; padding-left: 18px; list-style: disc; }
.legal a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.legal strong { color: var(--ink); font-weight: 560; }
.legal [data-legal]:empty::after { content: attr(data-empty); color: var(--amber); }
.legal .box { margin-top: 14px; padding: 16px 18px; border-radius: 18px; color: var(--ink); background: rgb(255 255 255 / 0.06); }
.account-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 16px; }

@media (max-width: 1180px) {
	.orbs { display: none; }
}
@media (max-width: 900px) {
	.ai-demo { height: 560px; }
	.ai .head { text-align: left; }
	.nav nav { display: none; }
	.nav { justify-content: space-between; padding-left: 18px; }
	.nav-logo { margin-right: auto; }
	.families { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.family, .family:nth-child(2) { grid-column: span 1; }
	.family:nth-child(2) { grid-column: span 2; }
	.family { min-height: 180px; padding: 20px; }
	.ai, .offer-wall, .pay-grid { grid-template-columns: minmax(0, 1fr); }
	.ai .head { text-align: center; }
	.ai .head p { margin-inline: auto; }
	.demo-win { grid-template-columns: minmax(0, 1fr); gap: 8px; }
	.morph { grid-template-columns: minmax(0, 1fr); grid-template-areas: "stage" "scrub" "steps" "cap"; }
	.m-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.m-steps button { grid-template-columns: 28px minmax(0, 1fr); gap: 8px; padding: 8px; }
	.m-steps b { width: 28px; height: 28px; font-size: 0.8125rem; }
	.m-steps small { display: none; }
	.m-steps strong { font-size: 0.875rem; line-height: 1.2; }
	.demo-link { min-height: 44px; }
	.pay-side { box-shadow: inset 0 -1px 0 var(--line); }
	.pass-slot { max-width: 380px; margin-inline: auto; width: 100%; }
}
@media (max-width: 620px) {
	.ask-pills button { min-height: 36px; padding: 0 12px 0 10px; font-size: 0.875rem; }
	.ask-line { font-size: 1rem; }
	.nav .btn { display: none; }
	.nav { padding-right: 8px; }
	.hero { padding-top: calc(96px + env(safe-area-inset-top, 0px)); }
	.seg button { padding: 0 8px; font-size: 0.9063rem; }
	.plans { grid-template-columns: minmax(0, 1fr); }
	.foot { border-radius: 22px; }
}
/* Moins d'animations ne veut pas dire aucune : les fondus et les couleurs restent, les déplacements s'arrêtent.
   Les scènes en boucle ne jouent qu'au survol ou au focus, à la demande. Windows active ce réglage
   dès que les « effets d'animation » sont coupés, d'où une page figée sur beaucoup de PC. */
@media (prefers-reduced-motion: reduce) {
	:root { --m: 0; scroll-behavior: auto; }
	.spark { display: none; }
	.btn:active, .plan:active, .wait button:active { transform: none; }
	.kit-rail > li:hover { transform: none; }
	.b-tape i, .b-sun { animation-duration: 40s; }
	.kit-rail > li:not(:hover, :focus-within) .sk-page, .kit-rail > li:not(:hover, :focus-within) .sk-page * { animation-play-state: paused !important; }
	.light[data-flat] { animation-duration: 80s; }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
	.glass { -webkit-backdrop-filter: none; backdrop-filter: none; background: #171a23; box-shadow: inset 0 0 0 1px var(--line-2); }
}

/* Accès en pause : une prise débranchée qui cherche sa prise. Le bouton la rapproche, le clic la branche. */
.lapsed { display: grid; place-items: center; align-content: center; gap: 8px; min-height: 100svh; padding: calc(100px + env(safe-area-inset-top, 0px)) 16px calc(40px + env(safe-area-inset-bottom, 0px)); }
.plug { --gap: 0px; width: min(420px, 92vw); filter: drop-shadow(0 18px 40px rgb(0 0 0 / 0.5)); }
.plug svg { display: block; width: 100%; overflow: visible; }
.plug-male { transform: translateX(var(--gap)); transition: transform 620ms var(--spring); animation: sway 3.4s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate; transform-box: view-box; }
@keyframes sway { from { translate: calc(-10px * var(--m)) calc(3px * var(--m)); } to { translate: calc(4px * var(--m)) calc(-2px * var(--m)); } }
.plug-body { fill: #f5f6fa; }
.plug-pin { fill: #c3c8d4; }
.socket-body { fill: rgb(255 255 255 / 0.08); stroke: rgb(255 255 255 / 0.32); stroke-width: 1; transition: fill 500ms, stroke 500ms; }
.socket-hole { fill: #0a0c12; }
.socket-star { fill: rgb(255 255 255 / 0.35); transition: fill 500ms; }
.plug-sparks path { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: 0; animation: zap 3.4s infinite; }
.plug-sparks path + path { animation-delay: 1.1s; }
@keyframes zap { 0%, 86%, 100% { opacity: 0; } 88% { opacity: 1; } 90% { opacity: 0.2; } 92% { opacity: 0.9; } }
.lapsed:has([data-lapsed-go]:focus-visible) .plug { --gap: 26px; }
.lapsed:has([data-lapsed-go]:focus-visible) .socket-star { fill: rgb(255 255 255 / 0.7); }
@media (hover: hover) and (pointer: fine) { .lapsed:has([data-lapsed-go]:hover) .plug { --gap: 26px; } .lapsed:has([data-lapsed-go]:hover) .socket-star { fill: rgb(255 255 255 / 0.7); } }
.lapsed[data-on] .plug { --gap: 30px; }
.lapsed[data-on] .plug-male { animation: none; translate: 0 0; }
.lapsed[data-on] .socket-body { fill: rgb(255 255 255 / 0.9); stroke: #fff; }
.lapsed[data-on] .socket-star { fill: var(--on-light); }
.lapsed[data-on] .plug-sparks path { animation: none; opacity: 0; }
.lapsed[data-on] .plug { animation: plugged 700ms var(--spring); }
@keyframes plugged { 30% { filter: drop-shadow(0 0 40px rgb(255 255 255 / 0.9)); } }
.lapsed-card { display: grid; gap: 16px; width: min(480px, 100%); padding: clamp(26px, 5vw, 38px); border-radius: 36px; text-align: center; animation: rise 640ms 120ms var(--spring) both; }
.lapsed-who { justify-self: center; padding: 4px 12px; border-radius: 999px; font-size: 0.8125rem; color: var(--ink-2); background: rgb(255 255 255 / 0.08); }
.lapsed-who:empty { display: none; }
.lapsed-card h1 { font-size: clamp(2rem, 5vw, 2.75rem); letter-spacing: -0.04em; }
.lapsed-say { color: var(--ink-2); text-wrap: pretty; }
.lapsed-keep { display: grid; gap: 8px; padding: 14px 16px; border-radius: 20px; text-align: left; font-size: 0.9375rem; background: rgb(0 0 0 / 0.22); }
.lapsed-keep li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; animation: rise 520ms calc(300ms + var(--i, 0) * 80ms) var(--spring) both; }
.lapsed-keep li::before { content: ""; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%; background: rgb(255 255 255 / 0.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='m6 10.4 2.7 2.7L14 7.6'/%3E%3C/svg%3E") center / 20px no-repeat; }
.lapsed[data-reason="impaye"] .plug-sparks path { stroke: var(--amber); }
button.bar-link { cursor: pointer; }

/* La carte suit la saisie : les points du numéro s'allument au rythme des frappes dans Stripe, la date se remplit,
   et une pastille verte dit que tout est bon. Aucun chiffre ne sort de Stripe : la carte suit le rythme, pas les données. */
.pass .pass-price { font-size: clamp(1.75rem, 3vw, 2.125rem); }
.pass-number { position: relative; display: flex; gap: 14px; margin-top: 12px; }
.pass-number span { display: flex; gap: 5px; }
.pass-number i { width: 7px; height: 7px; border-radius: 50%; background: rgb(255 255 255 / 0.28); transition: background-color 200ms, transform 300ms var(--spring), box-shadow 300ms; }
.pass-number i[data-on] { background: #fff; transform: scale(1.25); box-shadow: 0 0 8px rgb(255 255 255 / 0.8); }
.pass[data-typing] .pass-number i:not([data-on]) { animation: dot-wait 1.2s calc(var(--k, 0) * 40ms) ease-in-out infinite alternate; }
@keyframes dot-wait { to { background: rgb(255 255 255 / 0.45); } }
.pass[data-typing] .pass-face { box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.6), inset 0 0 0 1px rgb(255 255 255 / 0.5), 0 30px 70px -20px rgb(124 92 255 / 0.95), 0 14px 30px -18px rgb(0 0 0 / 0.7); }
.pass-bottom b[data-filled] { animation: type-in 320ms var(--spring); }
.pass-ready { position: absolute; top: 18px; right: 50%; translate: 50% 0; padding: 3px 10px; border-radius: 999px; font-size: 0.75rem; font-weight: 620; color: #06281d; background: var(--mint); box-shadow: 0 6px 18px -6px var(--mint); opacity: 0; transform: translateY(-6px) scale(0.9); transition: opacity 300ms, transform 500ms var(--spring); }
.pass[data-ready] .pass-ready { opacity: 1; transform: none; }
.pass[data-paid] .pass-face { background: radial-gradient(120% 90% at 100% 0%, rgb(94 234 212 / 0.8), transparent 60%), radial-gradient(110% 100% at 0% 100%, rgb(79 140 255 / 0.9), transparent 62%), linear-gradient(160deg, #1f8f7a, #12305c); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.5), 0 0 0 2px rgb(46 211 154 / 0.8), 0 0 70px 6px rgb(46 211 154 / 0.5); transition: background 600ms, box-shadow 600ms; }
/* Le formulaire se replie en une ligne quand la carte arrive : Stripe monte au lieu de descendre tout en bas. */
.pay-details { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 620ms var(--spring), opacity 360ms; }
.pay-details > div { display: grid; gap: 22px; min-height: 0; overflow: hidden; }
.pay-details[data-folded] { grid-template-rows: 0fr; opacity: 0; }
.pay-main:has(.pay-details[data-folded]) { gap: 16px; }
.pay-recap { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-radius: 18px; font-size: 0.9375rem; background: rgb(0 0 0 / 0.24); box-shadow: inset 0 0 0 1px var(--line); animation: rise 420ms var(--spring) both; }
.pay-recap span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pay-demo-card { display: grid; gap: 12px; animation: rise 520ms var(--spring) both; }
.pay-demo-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pay-demo-card input { font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }
.demo-tag { position: fixed; z-index: 30; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); translate: -50% 0; padding: 8px 16px; border-radius: 999px; font-size: 0.8125rem; font-weight: 560; color: #2b1700; background: linear-gradient(90deg, #ffc23d, #ff9f43); box-shadow: 0 10px 30px -10px #ff9f43; }
/* Paiement accepté : la carte s'illumine en vert, un sceau se pose, des étoiles jaillissent, et la page s'ouvre sur la suite. */
.pay-auth[data-ok] .spin { border-color: var(--mint); animation: none; background: var(--mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='%2306281d' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='m6 10.4 2.7 2.7L14 7.6'/%3E%3C/svg%3E") center / 16px no-repeat; transform: scale(1.3); transition: transform 500ms var(--spring); }
.pay-spark { position: fixed; z-index: 60; width: 12px; height: 12px; background: var(--c); -webkit-mask: var(--star-big) center / contain no-repeat; mask: var(--star-big) center / contain no-repeat; filter: drop-shadow(0 0 6px var(--c)); pointer-events: none; }
.pay-leave { position: fixed; inset: 0; z-index: 80; background: var(--canvas); clip-path: circle(0 at var(--x) var(--y)); animation: leave 900ms cubic-bezier(0.7, 0, 0.2, 1) forwards; }
@media (max-width: 900px) { .pay-side { position: static; } }

/* Black Friday : le site passe au noir et or tant que la promotion court (activée depuis l'admin). */
.was { margin-right: 4px; font-weight: 500; color: var(--ink-3); text-decoration: line-through; text-decoration-color: #ff6b4a; text-decoration-thickness: 2px; }
.price .was { align-self: center; font-size: 1.5rem; }
.offer-promo { display: none; padding: 3px 10px; border-radius: 999px; font-size: 0.75rem; font-weight: 650; letter-spacing: 0; color: #1a1006; background: linear-gradient(90deg, #ffd56a, #ffb02e, #ff8a3d); box-shadow: 0 6px 20px -6px #ffb02e; }
h1 .offer-promo { vertical-align: middle; font-size: 0.875rem; }
:root[data-promo] .offer-promo { display: inline-flex; gap: 4px; }
/* Le bandeau suit le design choisi dans l'admin (data-promo-theme) ; sans thème, le noir et or d'origine. Mêmes palettes que l'annonce de l'app (src/react-app/promo.css). */
.promo-band { --pb-ink: #fff6e6; --pb-bg: rgb(12 8 4 / 0.72); --pb-glow: rgb(255 176 46 / 0.7); --pb-r1: #ffd56a; --pb-r2: #ff8a3d; --pb-r3: #2a1a08; --pb-r4: #ffb02e; --pb-name: #ffd56a; --pb-em: #fff; --pb-small: #f4d9b0; position: relative; display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 14px; padding: 9px 18px; border-radius: 999px; font-size: 0.9375rem; color: var(--pb-ink); background: linear-gradient(180deg, rgb(255 255 255 / 0.08), rgb(255 255 255 / 0.02)), var(--pb-bg); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: 0 18px 50px -20px var(--pb-glow); }
.promo-band::after { content: ""; position: absolute; inset: 0; padding: 1.5px; border-radius: inherit; background: conic-gradient(from var(--sk-a), var(--pb-r1), var(--pb-r2), var(--pb-r3) 40%, var(--pb-r1) 60%, var(--pb-r4)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); animation: sk-turn 4s linear infinite; pointer-events: none; }
.promo-band b { font-weight: 700; letter-spacing: -0.01em; color: var(--pb-name); }
.promo-band em { font-style: normal; font-weight: 700; color: var(--pb-em); }
.promo-band small { font-size: 0.8125rem; font-variant-numeric: tabular-nums; color: var(--pb-small); }
.promo-band[data-promo-theme="noel"] { --pb-ink: #f3fff8; --pb-bg: rgb(4 20 12 / 0.78); --pb-glow: rgb(255 77 94 / 0.6); --pb-r1: #ff4d5e; --pb-r2: #2ed39a; --pb-r3: #06281d; --pb-r4: #ffffff; --pb-name: #ff8a95; --pb-small: #c8f5dd; }
.promo-band[data-promo-theme="blackfriday"] { --pb-ink: #ffffff; --pb-bg: rgb(0 0 0 / 0.88); --pb-glow: rgb(255 45 85 / 0.55); --pb-r1: #ffffff; --pb-r2: #ff2d55; --pb-r3: #111111; --pb-r4: #ff2d55; --pb-name: #ffffff; --pb-em: #ff5c7a; --pb-small: #d6d8e0; }
.promo-band[data-promo-theme="corail"] { --pb-ink: #fff3ef; --pb-bg: rgb(30 8 4 / 0.72); --pb-glow: rgb(255 107 74 / 0.65); --pb-r1: #ff6b4a; --pb-r2: #ff5fa2; --pb-r3: #2a0c06; --pb-r4: #ffb199; --pb-name: #ff8f73; --pb-small: #ffd0c2; }
.promo-band[data-promo-theme="bleu"] { --pb-ink: #eef4ff; --pb-bg: rgb(4 10 30 / 0.74); --pb-glow: rgb(79 140 255 / 0.65); --pb-r1: #4f8cff; --pb-r2: #38bdf8; --pb-r3: #08122a; --pb-r4: #a9c6ff; --pb-name: #8fb5ff; --pb-small: #c9dbff; }
.promo-band[data-promo-theme="menthe"] { --pb-ink: #effff8; --pb-bg: rgb(2 22 16 / 0.74); --pb-glow: rgb(46 211 154 / 0.6); --pb-r1: #2ed39a; --pb-r2: #5eead4; --pb-r3: #04241a; --pb-r4: #b6f5dd; --pb-name: #5ee8b5; --pb-small: #c8f5e3; }
@media (prefers-reduced-motion: reduce) { .promo-band::after { animation: none; } }
:root[data-promo] .pro { --a1: rgb(255 176 46 / 0.75); --a2: rgb(255 107 74 / 0.6); --a3: rgb(255 213 106 / 0.45); --ring1: #ffd56a; --ring2: #ff8a3d; --ring3: #fff1c2; background: linear-gradient(160deg, rgb(255 176 46 / 0.16), rgb(255 107 74 / 0.08) 70%), rgb(14 9 4 / 0.72); box-shadow: inset 0 1px 0 rgb(255 230 180 / 0.5), inset 0 0 0 0.5px rgb(255 213 106 / 0.4), 0 50px 120px -40px rgb(255 160 50 / 0.75); }
:root[data-promo] .pro .ticks li::before { background-color: rgb(255 176 46 / 0.55); }
:root[data-promo] .pro .btn.solid { color: #1a1006; background: linear-gradient(90deg, #ffe08a, #ffb02e); box-shadow: 0 12px 34px -12px #ffb02e; }

:root[data-promo] .pass-front { background: radial-gradient(120% 90% at 100% 0%, rgb(255 213 106 / 0.75), transparent 60%), radial-gradient(110% 100% at 0% 100%, rgb(255 107 74 / 0.7), transparent 62%), linear-gradient(160deg, #3a2208, #120a03); box-shadow: inset 0 1px 0 rgb(255 240 200 / 0.6), inset 0 0 0 0.5px rgb(255 213 106 / 0.5), 0 30px 60px -26px rgb(255 160 50 / 0.85), 0 14px 30px -18px rgb(0 0 0 / 0.7); }
:root[data-promo] .pay-side dd .was { font-size: 0.875rem; }

/* Skillls Équipe : à côté de Pro, la taille d'équipe se choisit comme la formule. */
.team { --a1: rgb(46 211 154 / 0.55); --a2: rgb(94 234 212 / 0.45); --a3: rgb(56 189 248 / 0.3); --ring1: #2ed39a; --ring2: #5eead4; --ring3: #c8fbea; background: linear-gradient(200deg, rgb(46 211 154 / 0.16), rgb(94 234 212 / 0.08) 70%), rgb(4 18 16 / 0.55); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.32), inset 0 0 0 0.5px rgb(255 255 255 / 0.18), 0 50px 120px -50px rgb(46 211 154 / 0.55); }
.team .ticks li::before { background-color: rgb(46 211 154 / 0.45); }
.team::after { animation-duration: 9s; }
.team-body { display: flex; flex: 1; flex-direction: column; gap: 20px; }
.team-seats { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 0.9375rem; color: var(--ink-2); }
.team-pick { display: grid; gap: 16px; }
.team .seg { background: rgb(0 0 0 / 0.24); }
.team .seg button { min-width: 52px; min-height: 40px; padding: 0 16px; font-size: 0.9375rem; font-variant-numeric: tabular-nums; }
.team .btn { margin-top: auto; }
.team-note { font-size: 0.8125rem; color: var(--ink-3); }


/* Corrections : chiffres à largeur fixe pendant les changements de prix (le texte à côté ne danse plus),
   loader en ligne dans les boutons, transitions douces entre les pages du site. */
.price b, .pass-price, .pay-side dd, [data-team-price] { font-variant-numeric: tabular-nums; }
.price b { min-width: 3.2ch; }
.btn .sk-loader { grid-auto-flow: column; align-items: center; gap: 10px; font-size: 20px; }
.btn .sk-loader small { font-size: 1rem; font-weight: 560; }
.btn .sk-loader .sk-mark { filter: none; }
/* Les transitions entre pages vivent dans motion.css. */
/* Les Super Kits défilent seuls, sans barre ; la main reprend la main au survol ou au toucher. */
.kit-rail { scroll-behavior: auto; }

/* Pendant la saisie dans Stripe, une onde parcourt les points de la carte ; ils s'allument tous quand la carte est valide. */
.pass[data-typing]:not([data-ready]) .pass-number i:not([data-on]) { animation: dot-scan 1.4s calc(var(--k, 0) * 70ms) cubic-bezier(0.45, 0, 0.55, 1) infinite; }
@keyframes dot-scan { 0%, 60%, 100% { background: rgb(255 255 255 / 0.28); transform: none; } 20% { background: #fff; transform: scale(1.3); box-shadow: 0 0 8px rgb(255 255 255 / 0.8); } }
.pay-express { min-height: 48px; }
.pay-express:empty { display: none; }

/* Le mini-onboarding après paiement : trois coches qui s'allument, un prénom, une porte d'entrée. */
.onboard { text-align: left; }
.ob-steps { display: grid; gap: 10px; }
.ob-steps li { display: grid; grid-template-columns: 28px 1fr; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 16px; background: rgb(0 0 0 / 0.22); opacity: 0.45; transition: opacity 400ms; }
.ob-steps li[data-done] { opacity: 1; }
.ob-steps i { width: 28px; height: 28px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--line-2); transition: background-color 300ms, box-shadow 300ms, transform 500ms var(--spring); }
.ob-steps li[data-done] i { background: var(--mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='%2306281d' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='m6 10.4 2.7 2.7L14 7.6'/%3E%3C/svg%3E") center / 18px no-repeat; box-shadow: 0 0 18px rgb(46 211 154 / 0.6); animation: tick-pop 480ms var(--spring); }
.ob-steps b { display: block; font-weight: 600; }
.ob-steps small { display: block; font-size: 0.8125rem; color: var(--ink-2); overflow-wrap: anywhere; }
.onboard .link { justify-self: center; }

/* Mon compte : le prénom, l'abonnement, et les jauges de Skillls AI comme dans l'app. */
.account-name { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 10px; margin-top: 22px; }
.account-name .btn { min-height: 54px; }
.account-hint { color: var(--ink-3); font-size: 0.9375rem; }
.account-gauges { display: grid; gap: 16px; margin-top: 14px; padding: 0; list-style: none; }
.account-gauges li { display: grid; grid-template-columns: 1fr auto; gap: 6px; margin: 0; max-width: none; color: var(--ink); }
.account-gauges b { font-variant-numeric: tabular-nums; }
.account-track { grid-column: 1 / -1; height: 8px; border-radius: 99px; background: rgb(255 255 255 / 0.1); overflow: hidden; }
.account-track i { display: block; width: var(--w); height: 100%; border-radius: inherit; background: linear-gradient(90deg, #4f8cff, #c08bff); animation: grow 900ms var(--spring) both; transform-origin: left; }
.account-gauges li[data-near="1"] .account-track i { background: linear-gradient(90deg, #ffc23d, #ff6b4a); }
@keyframes grow { from { transform: scaleX(0); } }
.account-gauges small { grid-column: 1 / -1; color: var(--ink-3); font-size: 0.8125rem; }
.account-up { padding: 12px 16px; border-radius: 16px; background: rgb(255 194 61 / 0.12); }
.sk-loader-row { justify-content: center; }
@media (max-width: 620px) { .account-name { grid-template-columns: minmax(0, 1fr); } }

/* Lot du 9 novembre. Offres : Pro mise en avant par sa lumière. */
.offer-wall .offer { padding: clamp(24px, 2.6vw, 36px); }
.offer-wall .pro { z-index: 1; }
.offer-wall .price b { font-size: clamp(3.5rem, 5vw, 4.75rem); }
.cents { font-size: 0.5em; letter-spacing: -0.02em; vertical-align: 0.78em; }
.price-plus b { color: var(--ink); font-weight: 600; }
/* Lot du 10 novembre. Pro : chaque formule ne montre que ce qui la concerne (l'accès et la collection n'existent qu'au mois). */
.offer[data-plan="annuel"] [data-only="mensuel"], .offer[data-plan="mensuel"] [data-only="annuel"] { display: none; }
.offer-keep { margin-top: -8px; padding: 12px 14px; border-radius: 18px; font-size: 0.9375rem; line-height: 1.4; color: var(--ink-2); background: rgb(0 0 0 / 0.22); animation: rise 420ms var(--spring) both; }
.offer-keep b, .sum-keep b { color: var(--ink); font-weight: 600; }
.pay-side .sum-keep { padding: 12px 14px; border-radius: 16px; font-size: 0.875rem; line-height: 1.4; background: rgb(0 0 0 / 0.22); }
@media (hover: hover) and (pointer: fine) { .lapsed-collection:hover svg { transform: translateY(calc(2px * var(--m))); } }
/* Offres alignées. Pro et Équipe partagent six rangées (sous-grille) : titre, choix, prix, note, puces, action
   tombent sur les mêmes lignes d'une carte à l'autre. Ultra Code passe dessous, sur toute la largeur. Sous 900 px, tout s'empile. */
.offer-wall { max-width: 620px; }
.offer-note { display: grid; gap: 12px; align-content: start; }
.offer-note .offer-keep { margin-top: 0; }
.offer header p { max-width: 36ch; text-wrap: pretty; }
.price .cur { margin-left: 0.08em; font-size: 0.5em; letter-spacing: 0; vertical-align: 0.78em; }
.offer-wall .ticks { padding-top: 22px; background: linear-gradient(90deg, transparent, var(--line-2) 20%, var(--line-2) 80%, transparent) top / 100% 1px no-repeat; }
.ultra-perk { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 14px; padding: 10px 16px 10px 10px; border-radius: 22px; font-size: 0.9375rem; line-height: 1.35; color: var(--ink-2); background: rgb(0 0 0 / 0.24); box-shadow: inset 0 0 0 1px rgb(201 179 255 / 0.35), 0 14px 40px -24px rgb(201 179 255 / 0.7); }
.ultra-perk b { padding: 7px 13px; border-radius: 999px; font-size: 1.125rem; font-weight: 650; letter-spacing: -0.02em; white-space: nowrap; color: #160a1f; background: var(--holo); box-shadow: 0 8px 24px -10px rgb(201 179 255 / 0.85); }
@media (min-width: 900px) {
	.offer-wall { max-width: none; grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 20px; }
	.offer-wall > :is(.pro, .team) { display: grid; grid-row: span 6; grid-template-rows: subgrid; row-gap: 20px; }
	.team :is(.team-body, .team-pick) { display: contents; }
	.offer-wall > .pro > :not(.offer-aura), .team :is(header, .team-seats, .price, .offer-note, .ticks, .btn) { align-self: start; margin: 0; }
	.offer-wall .seg { justify-self: start; }
	.offer-wall .ultra { grid-column: 1 / -1; margin-top: -6px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto auto 1fr; gap: 20px clamp(28px, 5vw, 64px); }
	.ultra > :not(.offer-aura) { grid-column: 1; margin: 0; }
	.ultra .ticks { grid-area: 1 / 2 / 4; align-self: center; }
	.ultra .wait-box { grid-area: 4 / 2; align-self: end; }
}

/* La liste d'attente : un bouton qui se déroule en champ, puis une coche. Les trois états partagent une case de même hauteur. */
.wait-box { display: grid; gap: 10px; }
.offer .wait-box { margin-top: auto; }
.wait-box > :is(.wait-open, .wait, .wait-done) { grid-area: 1 / 1; }
.wait-box > .wait-say { margin: 0; }
.wait-say:empty { display: none; }
.wait-open { transform-origin: right center; transition: opacity 240ms var(--press), transform 560ms var(--spring), box-shadow 300ms var(--press); }
.wait-box:not([data-state="idle"]) .wait-open { opacity: 0; transform: scaleX(calc(1 - 0.7 * var(--m))); pointer-events: none; }
.wait-box .wait { position: relative; overflow: hidden; margin: 0; min-height: 52px; opacity: 0; pointer-events: none; clip-path: inset(0 0 0 calc((100% - 52px) * var(--m)) round 999px); transition: opacity 220ms var(--press), clip-path 680ms var(--spring); }
.wait-box:is([data-state="open"], [data-state="busy"]) .wait { opacity: 1; pointer-events: auto; clip-path: inset(0 round 999px); }
.wait-box .wait input { min-height: 42px; opacity: 0; transition: opacity 300ms 180ms var(--press); }
.wait-box:is([data-state="open"], [data-state="busy"]) .wait input { opacity: 1; }
.wait button { display: grid; place-items: center; }
.wait button > * { grid-area: 1 / 1; transition: opacity 200ms var(--press); }
.wait button .sk-loader { font-size: 20px; opacity: 0; }
.wait button .sk-loader .sk-mark { filter: none; }
.wait-box:not([data-state="busy"]) .wait button .sk-loader { visibility: hidden; }
.wait-box[data-state="busy"] .wait button > span:first-child { opacity: 0; }
.wait-box[data-state="busy"] .wait button .sk-loader { opacity: 1; }
.wait-box[data-state="busy"] .wait input { opacity: 0.55; }
/* Pendant l'envoi, un reflet traverse la capsule. */
.wait::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(100deg, transparent 30%, rgb(201 179 255 / 0.22) 50%, transparent 70%) 200% 0 / 250% 100% no-repeat; opacity: 0; pointer-events: none; transition: opacity 300ms; }
.wait-box[data-state="busy"] .wait::before { opacity: 1; animation: wait-sweep 1.2s cubic-bezier(0.45, 0, 0.55, 1) infinite; }
@keyframes wait-sweep { to { background-position: -100% 0; } }
.wait-done { display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: center; gap: 12px; min-height: 52px; padding: 5px 18px 5px 5px; border-radius: 26px; outline: 0; background: rgb(46 211 154 / 0.12); box-shadow: inset 0 0 0 1px rgb(46 211 154 / 0.45), 0 14px 40px -18px rgb(46 211 154 / 0.7); opacity: 0; transform: scale(calc(1 - 0.06 * var(--m))); pointer-events: none; transition: opacity 320ms var(--press), transform 640ms var(--spring); }
.wait-box[data-state="done"] .wait-done { opacity: 1; transform: none; pointer-events: auto; }
.wait-done i { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 24px rgb(46 211 154 / 0.6); transform: scale(calc(1 - 0.7 * var(--m))); transition: transform 640ms 120ms var(--spring); }
.wait-box[data-state="done"] .wait-done i { transform: none; }
.wait-done svg { width: 22px; height: 22px; fill: none; stroke: #06281d; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 420ms 420ms var(--press); }
.wait-box[data-state="done"] .wait-done svg { stroke-dashoffset: 0; }
.wait-done p { font-size: 0.9375rem; line-height: 1.3; color: var(--ink-2); }
.wait-done b { display: block; font-weight: 600; color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .wait-box[data-state="busy"] .wait::before { animation-duration: 3s; } }

/* Paiement : ce qui compose le paiement, ce qui part aujourd'hui, puis ce qui suivra. */
.sum-saved { display: inline-block; margin-left: 10px; padding: 2px 9px; border-radius: 999px; font-style: normal; font-size: 0.75rem; font-weight: 620; vertical-align: 2px; color: #06281d; background: var(--mint); }
.pay-side .sum-then { color: var(--ink); }
.pay-side .sum-then b { font-weight: 600; }
.plan small .was { font-size: inherit; text-decoration-thickness: 1.5px; }

/* « Recevoir mon code » : le libellé s'efface, un avion en papier attend l'envoi, s'envole, et le bouton passe au vert. */
.send { position: relative; overflow: hidden; transition: transform 260ms var(--spring), box-shadow 300ms var(--press), background-color 260ms, color 260ms; }
.send > span { transition: transform 300ms var(--spring), opacity 200ms; }
.send-plane, .send-done { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px; opacity: 0; pointer-events: none; transform: translateY(calc(80% * var(--m))); }
.btn.send svg { width: 22px; height: 22px; transform: none; }
.send-done svg { width: 20px; height: 20px; stroke-width: 2.4; }
.send[data-state] .send-label { opacity: 0; transform: translateY(calc(-80% * var(--m))); }
.send[data-state="sending"] .send-plane { opacity: 1; transform: none; }
.send[data-state="sending"] .send-plane svg { animation: plane-wait 640ms cubic-bezier(0.45, 0, 0.55, 1) infinite alternate; }
@keyframes plane-wait { from { transform: translate(calc(-3px * var(--m)), calc(2px * var(--m))) rotate(calc(-5deg * var(--m))); } to { transform: translate(calc(3px * var(--m)), calc(-2px * var(--m))) rotate(calc(3deg * var(--m))); } }
.send[data-state="sent"] { color: #06281d; background: var(--mint); box-shadow: 0 12px 34px -12px rgb(46 211 154 / 0.8); }
.send[data-state="sent"] .send-plane { opacity: 0; transform: translate(calc(170px * var(--m)), calc(-52px * var(--m))) rotate(calc(-16deg * var(--m))) scale(calc(1 - 0.45 * var(--m))); transition: transform 420ms cubic-bezier(0.55, 0, 0.8, 0.3), opacity 380ms cubic-bezier(0.7, 0, 1, 1); }
.send[data-state="sent"] .send-done { opacity: 1; transform: none; transition-delay: 140ms; }

/* Le bouton Coller, discret sous les cases. */
.otp-paste { justify-self: center; display: inline-flex; align-items: center; gap: 7px; min-height: 36px; margin-top: -6px; padding: 0 14px; border-radius: 999px; font-size: 0.875rem; font-weight: 520; color: var(--ink-2); background: rgb(255 255 255 / 0.07); box-shadow: inset 0 0 0 0.5px rgb(255 255 255 / 0.16); transition: color 200ms, background-color 200ms, transform 260ms var(--spring); }
@media (hover: hover) and (pointer: fine) { .otp-paste:hover { color: var(--ink); background: rgb(255 255 255 / 0.12); } }
.otp-paste:active { transform: scale(calc(1 - 0.04 * var(--m))); }
.otp-paste svg { width: 16px; height: 16px; fill: none; stroke: currentcolor; stroke-width: 1.7; stroke-linejoin: round; }
@media (prefers-reduced-motion: reduce) { .otp-ring { transition: opacity 220ms; } }

/* Après paiement : l'attente de la confirmation Stripe, puis l'accueil. */
.ob-wait { display: grid; justify-items: center; gap: 12px; padding: 10px 0 4px; text-align: center; }
.ob-wait p { display: grid; gap: 2px; }
.ob-wait b { font-weight: 600; }
.ob-wait small { font-size: 0.875rem; color: var(--ink-2); }
.ob-form { display: grid; gap: 14px; }
.nowrap { white-space: nowrap; }
/* Mobile : les étapes du paiement tiennent sur une ligne, seule l'étape en cours garde son nom. */
@media (max-width: 480px) { .pay-steps li:not([data-now]) { gap: 0; font-size: 0; } .pay-steps li + li::before { width: 18px; } }

/* Passe mobile (skill mobile-native). Au doigt, le retour se donne à l'appui : le survol est réservé à la souris. */
.nav nav a:active, .nav-login:active, .bar-link:active { color: var(--ink); background: rgb(255 255 255 / 0.09); }
.foot a:active, .link:active { color: var(--ink); }
.seg button:not([aria-pressed="true"], [aria-checked="true"]):active, .m-steps button:active { color: var(--ink); background: rgb(255 255 255 / 0.06); }
/* Le rail des Super Kits arrivé au bout ne déclenche pas le geste « page précédente » du navigateur. */
.kit-rail { overscroll-behavior-x: contain; }
/* Pointeur grossier (doigt) : chaque cible fait au moins 44 px, et les nappes floues des offres ne bougent plus (moins de calcul en défilant).
   Sur ordinateur, rien ne change. Les liens dans une phrase gardent leur hauteur de ligne. */
@media (pointer: coarse) {
	.nav-logo { min-height: 44px; }
	.nav nav a, .nav-login, .bar-link, .ask-pills button, .offer .seg button, .team .seg button { min-height: 44px; }
	.m-play { width: 44px; height: 44px; }
	.link, .legal nav a, .foot nav a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; }
	.legal nav a, .foot nav a { min-width: 44px; }
	p .link { display: inline; min-height: 0; }
	.otp-paste { min-height: 44px; }
	.offer-aura i { animation: none; }
}