/* ATS Tester — styles
 * Page publicitaire « néon fun » : nuit profonde, aurore animée (cyan, violet, rose, citron vert),
 * verre dépoli, dégradés scintillants. Titres en Cormorant Garamond (capitales), texte en Inter.
 * Polices hébergées dans assets/vendor/fonts.
 */
@font-face { font-family: "Inter"; src: url("../vendor/fonts/inter-latin-wght.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("../vendor/fonts/cormorant-garamond-latin-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("../vendor/fonts/cormorant-garamond-latin-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }

/* Propriétés animables (anneaux de score, bordures tournantes) */
@property --v { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

:root {
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --serif: "Cormorant Garamond", "Palatino Linotype", Palatino, Georgia, serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --bg: #07060F;
  --glass: linear-gradient(180deg, rgba(30, 26, 58, .8), rgba(13, 11, 28, .88));
  --surface-2: rgba(255, 255, 255, .04);
  --input-bg: rgba(5, 4, 14, .55);
  --text: #F1EEFF;
  --muted: #A39FBF;
  --border: rgba(196, 181, 253, .14);
  --border-strong: rgba(167, 139, 250, .45);

  --cyan: #22D3EE; --violet: #A78BFA; --pink: #F472B6; --lime: #A3E635; --amber: #FBBF24; --teal: #2DD4BF;
  --accent-text: #C4B5FD;
  --accent-soft: rgba(167, 139, 250, .12);
  --grad: linear-gradient(90deg, #22D3EE 0%, #A78BFA 50%, #F472B6 100%);
  --grad-loop: linear-gradient(90deg, #22D3EE, #A78BFA, #F472B6, #A3E635, #22D3EE);

  --good: #4ADE80; --good-bg: rgba(74, 222, 128, .12);
  --mid: #FBBF24;  --mid-bg: rgba(251, 191, 36, .12);
  --bad: #FB7185;  --bad-bg: rgba(251, 113, 133, .13);
  --mark: rgba(167, 139, 250, .32);
  --focus: #A78BFA;
  --radius: 22px;
  --shadow: 0 24px 60px -30px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .05);
  color-scheme: dark;
}

* { box-sizing: border-box; }
/* Rien ne dépasse sur les côtés : pas de défilement horizontal ni de dézoom sur téléphone */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; touch-action: manipulation; overflow-x: clip; }
body {
  margin: 0; color: var(--text); background: var(--bg); overflow-x: clip;
  font: 15px/1.6 var(--sans); -webkit-font-smoothing: antialiased;
  min-height: 100vh; display: flex; flex-direction: column;
}
main { flex: 1; width: 100%; position: relative; z-index: 1; }
/* Les blocs occupent toute la largeur de l'écran, avec une limite pour les très grands moniteurs */
.wrap { width: 100%; max-width: 1880px; margin: 0 auto; padding: 0 clamp(16px, 3.5vw, 56px); }
h1, h2, h3 { line-height: 1.15; margin: 0; }
a { color: var(--accent-text); text-underline-offset: 3px; }
em { font-style: normal; color: var(--muted); font-weight: 400; }
.muted { color: var(--muted); }
.nowrap { white-space: nowrap; }
.small { font-size: 13px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
::selection { background: var(--mark); }

/* Aurore animée en fond */
.bg-fx { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.bg-fx::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px); background-size: 26px 26px; -webkit-mask: radial-gradient(80% 60% at 50% 0%, #000, transparent 80%); mask: radial-gradient(80% 60% at 50% 0%, #000, transparent 80%); }
/* Halos en dégradé radial (sans filtre de flou : un flou de 70 px sur de grands calques animés saturait la carte graphique) */
.bg-fx span { --c: #22D3EE; position: absolute; width: 56vmax; height: 56vmax; border-radius: 50%; opacity: .5; background: radial-gradient(closest-side, var(--c), transparent); animation: drift 40s ease-in-out infinite alternate; will-change: transform; }
.bg-fx span:nth-child(1) { left: -18vmax; top: -22vmax; }
.bg-fx span:nth-child(2) { --c: #8B5CF6; right: -20vmax; top: -16vmax; animation-delay: -10s; opacity: .56; }
.bg-fx span:nth-child(3) { --c: #EC4899; right: 6vmax; top: 34vh; animation-delay: -20s; opacity: .32; }
.bg-fx span:nth-child(4) { --c: #84CC16; left: 2vmax; top: 70vh; animation-delay: -30s; opacity: .22; }
@keyframes drift { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(6vmax, 4vmax) scale(1.12); } 100% { transform: translate(-4vmax, 8vmax) scale(.92); } }

/* Texte en dégradé scintillant */
.grad-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.shimmer { background: var(--grad-loop); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 8s linear infinite; }
@keyframes shimmer { to { background-position: 300% 0; } }
.kicker { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--accent-text); }
.kicker::before { content: "✦"; color: var(--pink); font-size: 13px; text-shadow: 0 0 10px var(--pink); }
.eyebrow { font-size: 12px; text-transform: uppercase; letter-spacing: .16em; color: var(--accent-text); font-weight: 700; }

/* Apparition au défilement */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .8, .2, 1); }
.reveal.is-in { opacity: 1; transform: none; }
.workflow .reveal:nth-child(2), .features .reveal:nth-child(2), .panels .reveal:nth-child(2) { transition-delay: .1s; }
.workflow .reveal:nth-child(3), .features .reveal:nth-child(3), .panels .reveal:nth-child(3) { transition-delay: .2s; }
.workflow .reveal:nth-child(4) { transition-delay: .3s; }
.workflow .reveal:nth-child(5) { transition-delay: .4s; }

/* ---------- Barre du haut ---------- */
.topbar { position: sticky; top: 0; z-index: 30; background: rgba(7, 6, 15, .78); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(255, 255, 255, .07); }
.topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 12px; padding-bottom: 12px; }
.brand { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.brand-mark { display: block; width: 42px; height: 42px; filter: drop-shadow(0 0 12px rgba(167, 139, 250, .55)); transition: transform .5s cubic-bezier(.3, 1.6, .5, 1); }
.brand:hover .brand-mark { transform: rotate(-18deg) scale(1.12); }
.brand-name { font: 700 22px/1 var(--serif); letter-spacing: .06em; text-transform: uppercase; }
.brand-tag { color: var(--muted); font-size: 10.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; margin-top: 5px; }
.nav { display: flex; align-items: center; gap: 4px; }
.nav-link { border: 0; background: none; cursor: pointer; font: 650 12px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); text-decoration: none; padding: 10px 12px; border-radius: 999px; display: inline-flex; align-items: center; gap: 8px; transition: color .15s, background .15s; }
.nav-link:hover, .nav-link.is-active { color: var(--text); background: rgba(255, 255, 255, .07); }
.nav-link.is-active { box-shadow: inset 0 0 0 1px var(--border-strong); }
.nav .btn-neon { margin-left: 8px; }
.badge { background: var(--grad); color: #160B2E; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: 0; padding: 2px 7px; min-width: 20px; text-align: center; }

main.wrap { padding-bottom: 72px; }
.view[hidden] { display: none; }
#view-history { padding-top: 34px; }

/* ---------- Boutons ---------- */
.btn { position: relative; font: inherit; font-weight: 650; border-radius: 12px; padding: 10px 18px; border: 1px solid transparent; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 10px; text-decoration: none; transition: background .2s, transform .2s cubic-bezier(.3, 1.6, .5, 1), box-shadow .2s, border-color .2s, color .2s; }
.btn-primary { overflow: hidden; background: linear-gradient(90deg, #67E8F9, #A78BFA 55%, #F472B6); color: #160B2E; box-shadow: 0 10px 30px -10px rgba(167, 139, 250, .8); }
.btn-primary::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; transform: skewX(-20deg); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent); transition: left .6s ease; }
.btn-primary:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 16px 36px -10px rgba(244, 114, 182, .8); }
.btn-primary:hover::after { left: 120%; }
.btn-primary:active { transform: scale(.98); }
.btn-ghost { background: rgba(255, 255, 255, .05); color: var(--text); border-color: rgba(255, 255, 255, .14); }
.btn-ghost:hover { border-color: var(--border-strong); background: var(--accent-soft); transform: translateY(-1px); }
.btn-neon {
  color: #FFFFFF; border-radius: 999px; border: 2px solid transparent; text-transform: uppercase; letter-spacing: .12em; font-size: 12.5px;
  background: linear-gradient(#120E26, #120E26) padding-box, conic-gradient(from var(--angle), #22D3EE, #A78BFA, #F472B6, #A3E635, #22D3EE) border-box;
  box-shadow: 0 0 28px -6px rgba(167, 139, 250, .75), inset 0 0 20px -8px rgba(244, 114, 182, .7);
  animation: spin-border 4s linear infinite;
}
@keyframes spin-border { to { --angle: 360deg; } }
.btn-neon:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 0 40px -4px rgba(244, 114, 182, .85), inset 0 0 24px -6px rgba(167, 139, 250, .9); }
.btn-neon .arrow { width: 24px; height: 24px; margin-right: -8px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--grad); color: #160B2E; font-size: 13px; letter-spacing: 0; transition: transform .3s; }
.btn-neon:hover .arrow { transform: rotate(45deg); }
.btn-danger { color: var(--bad); }
.btn-small { padding: 7px 14px; font-size: 13px; border-radius: 10px; }
.btn-neon.btn-small { padding: 8px 16px; border-radius: 999px; font-size: 11.5px; }
.btn-large { padding: 15px 26px; font-size: 15px; border-radius: 14px; }
.btn-neon.btn-large { padding: 15px 26px; border-radius: 999px; font-size: 13px; }
.btn:disabled { opacity: .6; cursor: progress; transform: none; }
.file-btn { cursor: pointer; }
.link { background: none; border: 0; color: var(--accent-text); font: inherit; font-size: 13px; font-weight: 650; text-decoration: underline; text-decoration-color: rgba(196, 181, 253, .45); text-underline-offset: 3px; cursor: pointer; padding: 0; }
.link:hover { text-decoration-color: currentColor; color: #fff; }
.icon-btn { background: none; border: 0; font-size: 18px; color: var(--muted); cursor: pointer; padding: 4px 8px; border-radius: 8px; }
.icon-btn:hover { background: var(--surface-2); color: var(--text); }

/* ---------- Accroche publicitaire ---------- */
.hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 80px); align-items: center; min-height: min(800px, calc(100vh - 70px)); padding: 36px 0 30px; }
.hero h1 { font-family: var(--serif); font-weight: 600; text-transform: uppercase; font-size: clamp(38px, 4vw, 84px); line-height: 1; letter-spacing: .01em; margin: 18px 0 22px; }
.lead { font-size: clamp(16px, 1.05vw, 19px); color: #C9C4E4; max-width: 58ch; margin: 0 0 28px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.trust { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 24px 0 0; padding: 0; font-size: 13px; color: var(--muted); }
.trust li { display: inline-flex; align-items: center; gap: 8px; }
.trust li::before { content: "✓"; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; font-size: 11px; font-weight: 800; color: #160B2E; background: var(--grad); }

/* Illustration de l'accroche (et de l'appel final) dans un cadre néon légèrement incliné */
.hero-visual { position: relative; width: 100%; max-width: 900px; justify-self: center; padding: 30px 0 36px; }
.scene-frame { position: relative; z-index: 1; margin: 0; padding: 3px; border-radius: 26px; background: linear-gradient(135deg, #22D3EE, #A78BFA 50%, #F472B6);
  box-shadow: 0 34px 70px -34px rgba(0, 0, 0, .95), 0 0 70px -18px rgba(167, 139, 250, .8);
  transform: perspective(1400px) rotateY(-7deg) rotateX(2deg); transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.scene-frame:hover { transform: perspective(1400px) rotateY(0) rotateX(0) scale(1.01); }
.scene-img { display: block; width: 100%; height: auto; border-radius: 23px; background: #120E26; }
.scene-frame-alt { transform: perspective(1400px) rotateY(7deg) rotateX(2deg); }
@keyframes spin { to { transform: rotate(360deg); } }
.sticker { position: absolute; z-index: 3; left: 46%; top: -4%; width: 112px; height: 112px; animation: spin 16s linear infinite; filter: drop-shadow(0 8px 20px rgba(0, 0, 0, .5)); }
.sticker circle { fill: #F472B6; }
.sticker text { font: 800 9.6px/1 var(--sans); letter-spacing: .14em; fill: #1A0B26; }
.sticker .sticker-center { font-size: 30px; letter-spacing: 0; }
.sparkle { position: absolute; z-index: 2; color: #fff; text-shadow: 0 0 12px var(--violet), 0 0 24px var(--pink); animation: twinkle 2.8s ease-in-out infinite; pointer-events: none; }
.sparkle.s1 { left: -2%; top: 4%; font-size: 26px; }
.sparkle.s2 { right: -3%; top: 62%; font-size: 18px; animation-delay: -1s; }
.sparkle.s3 { right: -2%; top: 8%; font-size: 22px; animation-delay: -1.8s; }
@keyframes twinkle { 0%, 100% { transform: scale(.6) rotate(0); opacity: .4; } 50% { transform: scale(1.2) rotate(45deg); opacity: 1; } }
.float-chip { position: absolute; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 10px 14px 10px 10px; border-radius: 16px;
  background: rgba(18, 14, 38, .9); border: 1px solid var(--border);
  box-shadow: 0 18px 40px -20px rgba(0, 0, 0, .9), 0 0 24px -10px rgba(167, 139, 250, .8); font-size: 13px; animation: bob 6s ease-in-out infinite; }
.float-chip b { display: block; font-weight: 700; }
.float-chip small { display: block; color: var(--muted); font-size: 11.5px; }
.chip-score { left: -4%; top: 0; }
.chip-ai { right: -4%; bottom: 2%; animation-delay: -2s; }
.chip-lock { left: -2%; bottom: 0; animation-delay: -4s; }
.chip-ring { position: relative; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--lime) 80%, rgba(255, 255, 255, .1) 0); }
.chip-ring::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: #140F2A; }
.chip-ring span { position: relative; z-index: 1; font: 700 18px/1 var(--serif); }
.chip-ico { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; background: var(--accent-soft); font-size: 16px; }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-9px) rotate(1deg); } }

/* Bandeau défilant */
.marquee { position: relative; margin: 10px calc(50% - 50vw) 30px; width: 100vw; overflow: hidden; transform: rotate(-2deg); background: var(--grad); padding: 14px 0; box-shadow: 0 10px 40px -10px rgba(167, 139, 250, .7); }
.marquee-track { display: flex; width: max-content; animation: marquee 32s linear infinite; }
.marquee span { display: inline-flex; align-items: center; gap: 22px; padding-right: 22px; font: 800 15px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: #160B2E; white-space: nowrap; }
.marquee span::after { content: "✦"; font-size: 16px; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Blocs de la page ---------- */
.block { margin: 40px 0; }
.block-head { margin-bottom: 24px; }
.block-title { font-family: var(--serif); font-weight: 600; text-transform: uppercase; font-size: clamp(30px, 3.4vw, 60px); line-height: 1.02; letter-spacing: .01em; margin-top: 12px; }
#fonctionnalites, #methode, #demo, #createur, #top { scroll-margin-top: 80px; }

.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.feature { --mx: 50%; --my: 50%; position: relative; border-radius: var(--radius); overflow: hidden; background: var(--glass); border: 1px solid var(--border); box-shadow: var(--shadow); transition: transform .25s ease, border-color .3s, opacity .7s ease; }
.feature::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(300px circle at var(--mx) var(--my), rgba(255, 255, 255, .12), transparent 60%); opacity: 0; transition: opacity .3s; }
.feature:hover { border-color: var(--border-strong); }
.feature:hover::after { opacity: 1; }
.feature-art { position: relative; height: 180px; display: grid; place-items: center; overflow: hidden; }
.feature-art::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px); background-size: 28px 28px; -webkit-mask: linear-gradient(transparent, #000 40%, transparent); mask: linear-gradient(transparent, #000 40%, transparent); }
.feature-emoji { position: absolute; z-index: 2; right: 14px; top: 12px; font-size: 30px; filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .4)); transition: transform .4s cubic-bezier(.3, 1.6, .5, 1); }
.feature:hover .feature-emoji { transform: scale(1.25) rotate(-12deg); }
.art-blue { background: radial-gradient(120% 120% at 20% 0%, #1D6FE0 0%, #142B6E 45%, #0A0D24 100%); }
.art-violet { background: radial-gradient(120% 120% at 80% 0%, #8B5CF6 0%, #3B1F7A 45%, #120A26 100%); }
.art-pink { background: radial-gradient(120% 120% at 50% 0%, #EC4899 0%, #6D1D58 45%, #1A0A1C 100%); }
.mock-chips { position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 0 20px; }
.mock-chips span { font-size: 12.5px; font-weight: 700; padding: 5px 11px; border-radius: 999px; background: rgba(5, 8, 24, .55); border: 1px solid rgba(255, 255, 255, .16); }
.mock-chips .ok { color: #86EFAC; } .mock-chips .ko { color: #FDA4AF; }
.mock-checks { position: relative; z-index: 1; list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; width: 70%; }
.mock-checks li { font-size: 12px; padding: 4px 10px; border-radius: 10px; background: rgba(10, 4, 24, .55); border: 1px solid rgba(255, 255, 255, .12); display: flex; gap: 8px; }
.mock-checks li::before { content: "✓"; color: #86EFAC; font-weight: 800; }
.mock-checks li.warn::before { content: "!"; color: #FCD34D; }
.mock-prompt { position: relative; z-index: 1; width: 72%; padding: 14px; border-radius: 14px; background: rgba(20, 4, 18, .6); border: 1px solid rgba(255, 255, 255, .14); display: grid; gap: 7px; }
.mock-prompt i { display: block; height: 6px; border-radius: 4px; background: rgba(255, 255, 255, .2); }
.mock-prompt i.short { width: 55%; }
.mock-prompt b { margin-top: 6px; justify-self: start; font-size: 11.5px; padding: 5px 10px; border-radius: 999px; color: #160B2E; background: var(--grad); }
.feature-body { padding: 18px 20px 22px; }
.feature-body h3 { font: 600 27px/1.1 var(--serif); margin: 10px 0 8px; }
.feature-body p { margin: 0; color: var(--muted); font-size: 14px; }
.pill-tag { display: inline-block; font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; padding: 4px 9px; border-radius: 6px; color: var(--accent-text); background: var(--accent-soft); border: 1px solid var(--border); }

/* Démo avant / après */
.demo { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 30px; align-items: center; padding: 30px; border-radius: 28px; background: var(--glass); border: 1px solid var(--border-strong); box-shadow: var(--shadow), 0 0 60px -30px rgba(244, 114, 182, .8); }
.demo-text p { margin: 14px 0 20px; }
.demo-toggle { display: inline-flex; padding: 5px; gap: 4px; border-radius: 999px; background: rgba(0, 0, 0, .35); border: 1px solid var(--border); }
.demo-toggle button { border: 0; cursor: pointer; font: 700 14px/1 var(--sans); color: var(--muted); background: none; padding: 11px 20px; border-radius: 999px; transition: all .25s; }
.demo-toggle button[aria-pressed="true"] { color: #160B2E; background: var(--grad); box-shadow: 0 6px 20px -6px rgba(167, 139, 250, .9); }
.demo-card { display: grid; gap: 18px; padding: 22px; border-radius: 20px; background: rgba(0, 0, 0, .28); border: 1px solid var(--border); }
.demo-score { display: flex; align-items: center; gap: 20px; }
.demo-verdict { font: 600 26px/1.1 var(--serif); text-transform: uppercase; margin-top: 6px; transition: color .4s; }
.demo[data-mode="before"] .demo-verdict { color: var(--bad); }
.demo[data-mode="after"] .demo-verdict { color: var(--good); }
.demo-kw { display: flex; flex-wrap: wrap; gap: 8px; }
.kw-flip { font-size: 13px; font-weight: 700; padding: 6px 12px; border-radius: 999px; background: var(--good-bg); color: var(--good); border: 1px solid rgba(74, 222, 128, .3); transition: all .4s cubic-bezier(.3, 1.6, .5, 1); }
.kw-flip::before { content: "✓ "; }
.demo[data-mode="before"] .kw-flip.flips { background: var(--bad-bg); color: var(--bad); border-color: rgba(251, 113, 133, .3); }
.demo[data-mode="before"] .kw-flip.flips::before { content: "✗ "; }
.demo[data-mode="after"] .kw-flip.flips { transform: scale(1.06); }
.demo-line { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-size: 13.5px; padding: 12px 14px; border-radius: 14px; background: rgba(255, 255, 255, .04); border: 1px dashed var(--border-strong); }
.demo-old { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--bad); }
.demo-arrow { color: var(--pink); font-weight: 800; }
.demo-new { font-weight: 700; color: #fff; opacity: .25; transition: opacity .4s; }
.demo[data-mode="after"] .demo-new { opacity: 1; }

.panels { display: grid; grid-template-columns: 1fr 1.1fr 1fr; gap: 18px; }
.panel { padding: 22px; border-radius: var(--radius); background: var(--glass); border: 1px solid var(--border); box-shadow: var(--shadow); }
.panel-title, .card-title { display: flex; align-items: center; gap: 10px; font: 700 12.5px/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--text); margin: 0 0 18px; }
.panel-title::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--grad); box-shadow: 0 0 10px var(--violet); }
.spec-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 14px; }
.spec-list li { display: flex; align-items: center; gap: 12px; }
.spec-ico { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 10px; background: var(--accent-soft); border: 1px solid var(--border); font-size: 15px; }
.metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.metric { padding: 14px; border-radius: 14px; background: rgba(0, 0, 0, .28); border: 1px solid var(--border); }
.metric b { display: block; font: 600 42px/1 var(--serif); background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.metric span { font-size: 12.5px; color: var(--muted); }
.tools { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.tool { display: grid; justify-items: center; gap: 4px; padding: 14px 6px; border-radius: 14px; background: rgba(0, 0, 0, .28); border: 1px solid var(--border); font-size: 11.5px; color: var(--muted); transition: transform .3s cubic-bezier(.3, 1.6, .5, 1); }
.tool:hover { transform: translateY(-4px) rotate(-2deg); }
.tool b { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; font-size: 11px; letter-spacing: .04em; color: #fff; background: linear-gradient(135deg, rgba(34, 211, 238, .35), rgba(244, 114, 182, .3)); border: 1px solid var(--border-strong); }

.workflow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
.workflow li { position: relative; padding: 18px; border-radius: 18px; background: var(--glass); border: 1px solid var(--border); box-shadow: var(--shadow); }
.workflow li:hover { border-color: var(--border-strong); }
.workflow li:not(:last-child)::after { content: ""; position: absolute; top: 34px; right: -19px; width: 20px; height: 2px; background: var(--grad); box-shadow: 0 0 8px var(--violet); }
.wf-num { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; font: 800 12px/1 var(--sans); color: #160B2E; background: var(--grad); margin-bottom: 14px; }
.wf-emoji { position: absolute; right: 16px; top: 16px; font-size: 24px; transition: transform .4s cubic-bezier(.3, 1.6, .5, 1); }
.workflow li:hover .wf-emoji { transform: scale(1.3) rotate(10deg); }
.workflow b { display: block; text-transform: uppercase; letter-spacing: .1em; font-size: 13px; margin-bottom: 6px; }
.workflow p { margin: 0; color: var(--muted); font-size: 13.5px; }

.creator { display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: center; padding: 26px; border-radius: var(--radius);
  background: linear-gradient(100deg, rgba(34, 211, 238, .14), rgba(139, 92, 246, .16) 50%, rgba(236, 72, 153, .12)), var(--glass); border: 1px solid var(--border); box-shadow: var(--shadow); }
.creator-photo { width: 150px; height: 150px; border-radius: 50%; object-fit: cover; object-position: 50% 0; background: radial-gradient(circle at 50% 30%, #2A1F5C, #0A0818);
  box-shadow: 0 0 0 3px #120E26, 0 0 0 5px var(--violet), 0 0 40px -4px rgba(244, 114, 182, .7); }
.creator-text p { margin: 10px 0 14px; color: #C9C4E4; max-width: 64ch; }
.creator-text .block-title { font-size: clamp(28px, 3vw, 38px); }
.creator-links { display: flex; gap: 10px; flex-wrap: wrap; }

.final-cta { position: relative; text-align: center; padding: 56px 24px; border-radius: 32px; overflow: hidden;
  background: radial-gradient(80% 120% at 50% 0%, rgba(139, 92, 246, .45), transparent 65%), radial-gradient(60% 100% at 100% 100%, rgba(236, 72, 153, .3), transparent 60%), radial-gradient(60% 100% at 0% 100%, rgba(34, 211, 238, .25), transparent 60%), #0E0A22;
  border: 1px solid var(--border-strong); box-shadow: 0 0 80px -30px rgba(167, 139, 250, .9); }
.final-cta .block-title { font-size: clamp(36px, 4.4vw, 64px); }
.final-cta p { max-width: 50ch; margin: 14px 0 26px; }
.final-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: center; text-align: left; }
.sparkle.s4 { left: 12%; top: 20%; font-size: 34px; }
.sparkle.s5 { right: 14%; bottom: 22%; font-size: 26px; animation-delay: -1.4s; }

/* ---------- Page de l'analyseur ---------- */
.app-hero { position: relative; padding: 40px 0 26px; scroll-margin-top: 70px; }
.app-hero h1 { font-family: var(--serif); font-weight: 600; text-transform: uppercase; font-size: clamp(38px, 4.4vw, 76px); line-height: 1; margin: 14px 0 12px; }
.app-hero .lead { margin-bottom: 20px; }
.wave { display: inline-block; animation: rocket 3s ease-in-out infinite; }
@keyframes rocket { 0%, 100% { transform: translate(0, 0) rotate(0); } 50% { transform: translate(6px, -8px) rotate(8deg); } }
.steps-pills { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.steps-pills li { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 650; padding: 6px 14px 6px 6px; border-radius: 999px; background: rgba(255, 255, 255, .05); border: 1px solid var(--border); }
.steps-pills span { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; font-size: 11px; font-weight: 800; color: #160B2E; background: var(--grad); }

/* ---------- Cartes de l'outil ---------- */
.card { position: relative; background: var(--glass); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow); margin-bottom: 20px; min-width: 0; }
.card-title { margin-bottom: 18px; }
.card-title-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.card-title-row .card-title { margin-bottom: 0; }
.step { width: 32px; height: 32px; border-radius: 11px; flex: none; display: inline-grid; place-items: center; font: 800 13px/1 var(--sans); letter-spacing: 0; color: #160B2E; background: var(--grad); box-shadow: 0 6px 18px -6px rgba(167, 139, 250, .9); }
.sub { font-size: 11.5px; text-transform: uppercase; letter-spacing: .16em; color: var(--accent-text); margin: 4px 0 10px; font-weight: 800; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.grid-2 > .card { margin-bottom: 0; }

/* Champs */
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 16px; }
.field { display: flex; flex-direction: column; gap: 7px; font-size: 12.5px; font-weight: 650; color: var(--muted); }
.field-wide { grid-column: 1 / -1; }
input[type=text], input[type=url], input[type=search], input[type=date], input[type=email], input[type=password], select, textarea {
  font: inherit; color: var(--text); background: var(--input-bg); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; width: 100%;
  transition: border-color .15s, box-shadow .15s;
}
select option { background: #120E26; color: var(--text); }
input::placeholder, textarea::placeholder { color: rgba(163, 159, 191, .7); }
input[type=date]::-webkit-calendar-picker-indicator { filter: invert(.8); }
textarea { resize: vertical; line-height: 1.55; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--violet); box-shadow: 0 0 0 4px rgba(167, 139, 250, .2), 0 0 24px -6px rgba(244, 114, 182, .6); }
.label { font-weight: 700; font-size: 14px; }
.field-head, .doc-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; gap: 10px; }
.hint { color: var(--muted); font-size: 13px; margin: 10px 0 0; }

/* Zones de dépôt */
.drop { border-radius: 14px; transition: border-color .15s, background .15s, transform .2s; }
.drop-text textarea { min-height: 268px; }
.drop.is-over textarea, .drop-file.is-over { border-color: var(--pink); background: rgba(244, 114, 182, .08); }
.drop-file.is-over { transform: scale(1.02); }
.drop-file { border: 2px dashed rgba(167, 139, 250, .38); padding: 22px 18px; text-align: center; cursor: pointer; background: rgba(167, 139, 250, .04); }
.drop-file:hover { border-color: var(--violet); background: var(--accent-soft); box-shadow: inset 0 0 40px -16px rgba(244, 114, 182, .7); }
.drop-icon { width: 48px; height: 48px; margin: 0 auto 8px; border-radius: 14px; display: grid; place-items: center; background: var(--grad); box-shadow: 0 8px 20px -6px rgba(167, 139, 250, .9); transition: transform .4s cubic-bezier(.3, 1.6, .5, 1); }
.drop-file:hover .drop-icon { transform: translateY(-4px) rotate(-8deg); }
.drop-icon svg { width: 22px; height: 22px; stroke: #160B2E; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.drop-text-main { font-weight: 650; }
.drop-text-main u { text-decoration-color: var(--pink); text-underline-offset: 3px; }
.drop-text-sub { color: var(--muted); font-size: 13px; }
.drop-file.has-file { border-style: solid; border-color: var(--good); background: var(--good-bg); }
.drop-file.has-file .drop-icon { background: var(--good); }
.doc + .doc { margin-top: 20px; }
.doc-status { font-size: 13px; margin-top: 8px; min-height: 18px; color: var(--muted); }
.doc-status .ok { color: var(--good); font-weight: 650; }
.doc-status .err { color: var(--bad); font-weight: 650; }
.paste { margin-top: 0; }
.card-docs { display: flex; flex-direction: column; }
.card-docs .doc:last-of-type { margin-bottom: 20px; }
.tips { margin-top: auto; padding: 16px 18px; border-radius: 14px; background: linear-gradient(120deg, rgba(34, 211, 238, .08), rgba(244, 114, 182, .08)); border: 1px solid var(--border); font-size: 13.5px; }
.tips-title { font: 800 12px/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--accent-text); margin-bottom: 8px; }
.tips-title::before { content: "💡 "; }
.tips ul { margin: 0; padding-left: 18px; display: grid; gap: 3px; }
.tips li::marker { color: var(--pink); }
.tips p { margin: 10px 0 0; color: var(--muted); font-size: 13px; }

.actions { display: flex; align-items: center; gap: 12px; margin: 24px 0 30px; flex-wrap: wrap; }
.actions-tight { margin: 12px 0 0; }
.error { color: var(--bad); font-weight: 650; }
.ok-msg { color: var(--good); font-weight: 650; }
.notice { padding: 12px 16px; border-radius: 12px; margin-bottom: 18px; }
.notice.warn { background: var(--mid-bg); color: var(--text); border: 1px solid rgba(251, 191, 36, .5); }

/* ---------- Anneaux de score ---------- */
.ring { --v: 0; --c: var(--muted); position: relative; width: 66px; height: 66px; border-radius: 50%; display: grid; place-items: center; flex: none; transition: --v 1s cubic-bezier(.2, .8, .2, 1); }
.ring::before { content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(var(--c) calc(var(--v) * 1%), rgba(255, 255, 255, .08) 0);
  -webkit-mask: radial-gradient(closest-side, transparent 77%, #000 78%); mask: radial-gradient(closest-side, transparent 77%, #000 78%); }
.ring::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 30px -10px var(--c); pointer-events: none; }
.ring span { position: relative; font: 700 24px/1 var(--serif); }
.ring-xl { width: 128px; height: 128px; }
.ring-xl::before { -webkit-mask: radial-gradient(closest-side, transparent 83%, #000 84%); mask: radial-gradient(closest-side, transparent 83%, #000 84%); }
.ring-xl span { font-size: 52px; }
.ring[data-tone=good] { --c: var(--good); }
.ring[data-tone=mid] { --c: var(--mid); }
.ring[data-tone=bad] { --c: var(--bad); }
.ring[data-tone=none] span { color: var(--muted); font-size: 16px; }

/* Synthèse */
#results { animation: rise .5s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes rise { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: none; } }
.summary { overflow: hidden; display: flex; justify-content: space-between; gap: 28px; align-items: center; flex-wrap: wrap; padding: 28px;
  background: radial-gradient(120% 160% at 0% 0%, rgba(34, 211, 238, .22), transparent 55%), radial-gradient(100% 140% at 100% 100%, rgba(236, 72, 153, .22), transparent 60%), var(--glass);
  border-color: var(--border-strong); box-shadow: var(--shadow), 0 0 60px -26px rgba(167, 139, 250, .9); }
.summary::after { content: ""; position: absolute; right: -60px; top: 50%; width: 300px; height: 300px; margin-top: -150px; background: url("../img/logo.svg") center / contain no-repeat; opacity: .1; pointer-events: none; }
.summary > * { position: relative; z-index: 1; }
.summary-main { display: flex; gap: 24px; align-items: center; min-width: 0; flex: 1 1 380px; }
.summary-side { display: flex; gap: 14px; flex-wrap: wrap; }
.summary-side .mini { background: rgba(0, 0, 0, .28); border: 1px solid var(--border); border-radius: 16px; padding: 10px 16px 10px 10px; }
.mini { display: flex; gap: 12px; align-items: center; }
.verdict { font: 600 34px/1.05 var(--serif); text-transform: uppercase; letter-spacing: .01em; margin: 6px 0 8px; }
.verdict.good { color: var(--good); text-shadow: 0 0 26px rgba(74, 222, 128, .45); }
.verdict.mid { color: var(--mid); text-shadow: 0 0 26px rgba(251, 191, 36, .4); }
.verdict.bad { color: var(--bad); text-shadow: 0 0 26px rgba(251, 113, 133, .4); }

/* Recommandations */
.recos { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.recos li { padding: 12px 14px 12px 16px; border-radius: 12px; background: rgba(255, 255, 255, .035); border: 1px solid rgba(255, 255, 255, .06); border-left: 4px solid var(--muted); transition: transform .2s; }
.recos li:hover { transform: translateX(4px); }
.recos li.high { border-left-color: var(--bad); background: linear-gradient(90deg, rgba(251, 113, 133, .12), rgba(255, 255, 255, .02) 60%); }
.recos li.mid { border-left-color: var(--mid); }
.recos li.low { border-left-color: var(--cyan); }
.recos li.none { border-left-color: var(--good); background: var(--good-bg); }
.recos b { color: #fff; }

/* Tableau mots-clés */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .14em; color: var(--muted); font-weight: 800; padding: 8px 12px; border-bottom: 1px solid var(--border); white-space: nowrap; }
td { padding: 9px 12px; border-bottom: 1px solid rgba(196, 181, 253, .08); vertical-align: middle; }
.kw-table tr.cat td { background: var(--accent-soft); color: var(--accent-text); font-weight: 800; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; padding-top: 9px; }
.kw-table tbody tr.kw { cursor: pointer; }
.kw-table tbody tr.kw:hover td { background: rgba(255, 255, 255, .04); }
.kw-table tr.ignored td { opacity: .4; text-decoration: line-through; }
.kw-table tr.ignored td.yes, .kw-table tr.ignored td.no { text-decoration: none; }
.yes { color: var(--good); font-weight: 800; }
.no { color: var(--bad); font-weight: 800; }
.na { color: var(--muted); }
.tag { display: inline-block; font-size: 10.5px; font-weight: 800; padding: 1px 8px; border-radius: 999px; background: rgba(244, 114, 182, .14); color: #F9A8D4; border: 1px solid rgba(244, 114, 182, .35); margin-left: 8px; vertical-align: 1px; }
.count { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }

/* Vérifications */
.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.checks li { display: grid; grid-template-columns: 26px 1fr; gap: 10px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, .035); border: 1px solid rgba(255, 255, 255, .06); }
.checks .ic { width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; font-size: 13px; font-weight: 800; }
.checks .ok .ic { background: var(--good-bg); color: var(--good); }
.checks .warn .ic { background: var(--mid-bg); color: var(--mid); }
.checks .fail .ic { background: var(--bad-bg); color: var(--bad); }
.checks .lbl { font-weight: 700; }
.checks .det { color: var(--muted); font-size: 13px; }

/* Texte brut */
.seg { display: inline-flex; background: rgba(0, 0, 0, .3); border: 1px solid var(--border); border-radius: 12px; padding: 3px; }
.seg-btn { border: 0; background: transparent; font: inherit; font-size: 13px; font-weight: 700; color: var(--muted); padding: 5px 14px; border-radius: 9px; cursor: pointer; }
.seg-btn.is-active { background: var(--grad); color: #160B2E; }
.raw { white-space: pre-wrap; word-break: break-word; background: rgba(0, 0, 0, .38); border: 1px solid var(--border); border-radius: 12px; padding: 16px; max-height: 460px; overflow: auto; font: 13px/1.65 var(--mono); margin: 10px 0 0; color: #D6D2EE; }
mark { background: var(--mark); color: #fff; border-radius: 3px; padding: 0 2px; box-shadow: 0 0 10px -2px rgba(167, 139, 250, .6); }

/* Prompt IA */
#results, #ai-card { scroll-margin-top: 90px; }
#ai-card { border-color: var(--border-strong); background: radial-gradient(90% 120% at 100% 0%, rgba(236, 72, 153, .16), transparent 60%), radial-gradient(70% 100% at 0% 100%, rgba(34, 211, 238, .12), transparent 60%), var(--glass); box-shadow: var(--shadow), 0 0 60px -28px rgba(244, 114, 182, .9); }
#ai-card .card-title::before { content: ""; width: 30px; height: 30px; flex: none; background: url("../img/logo.svg") center / contain no-repeat; filter: drop-shadow(0 0 8px rgba(167, 139, 250, .6)); }
.ai-options { display: flex; gap: 10px 20px; align-items: flex-end; flex-wrap: wrap; margin: 16px 0 14px; }
.ai-options .field { flex: 0 1 300px; }
.check { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; padding: 10px 0; }
.check input { width: 16px; height: 16px; margin: 0; accent-color: var(--violet); }
.ai-prompt { min-height: 280px; background: rgba(0, 0, 0, .38); font: 13px/1.6 var(--mono); color: #D6D2EE; }
.ai-links { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 14px; color: var(--muted); }
.ai-links a { font-weight: 700; }
.ai-msg { margin: 10px 0 0; min-height: 1.2em; }
.ai-msg:empty { display: none; }
.ai-steps { list-style: none; counter-reset: step; margin: 18px 0 0; padding: 0; display: grid; gap: 8px; font-size: 14px; }
.ai-steps li { counter-increment: step; position: relative; padding-left: 36px; min-height: 24px; }
.ai-steps li::before { content: counter(step); position: absolute; left: 0; top: -1px; width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; font: 800 12px/1 var(--sans); color: #160B2E; background: var(--grad); }
.ai-steps b { color: #fff; }

.next-offer { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 20px 24px; border-radius: var(--radius); border: 2px dashed var(--border-strong); background: rgba(167, 139, 250, .05); }
.next-offer b { display: block; font: 600 23px/1.2 var(--serif); text-transform: uppercase; letter-spacing: .03em; }
.next-offer b::before { content: "🔁 "; }
.next-offer .muted { font-size: 13.5px; }

#confetti { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 100; pointer-events: none; display: none; }
#confetti.is-on { display: block; }

/* ---------- Historique ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 20px; }
.stat { position: relative; overflow: hidden; background: var(--glass); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow); }
.stat::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--grad); box-shadow: 0 0 14px var(--violet); }
.stat b { display: block; font: 600 42px/1.1 var(--serif); background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat span { color: var(--muted); font-size: 13px; }
.toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.toolbar input[type=search] { flex: 1 1 240px; width: auto; }
.toolbar select { width: auto; }
.toolbar-right { margin-left: auto; display: flex; gap: 8px; }
.apps td { white-space: nowrap; }
.apps td.wrap-cell { white-space: normal; min-width: 160px; }
.apps tbody tr:hover td { background: rgba(255, 255, 255, .04); }
.apps select { padding: 5px 8px; font-size: 13px; width: auto; }
.pill { display: inline-block; font-weight: 800; font-size: 13px; padding: 2px 10px; border-radius: 999px; font-variant-numeric: tabular-nums; }
.pill.good { background: var(--good-bg); color: var(--good); }
.pill.mid { background: var(--mid-bg); color: var(--mid); }
.pill.bad { background: var(--bad-bg); color: var(--bad); }
.pill.none { color: var(--muted); }
.empty { text-align: center; padding: 34px 10px 20px; }
.empty::before { content: ""; display: block; width: 84px; height: 84px; margin: 0 auto 14px; background: url("../img/logo.svg") center / contain no-repeat; filter: drop-shadow(0 0 18px rgba(167, 139, 250, .6)); animation: bob 5s ease-in-out infinite; }
.empty p { margin: 4px 0; }

/* ---------- Dialogue ---------- */
dialog { border: 1px solid var(--border-strong); border-radius: 22px; padding: 0; width: min(780px, calc(100vw - 24px)); max-height: calc(100vh - 40px); background: #120E26; color: var(--text); box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .9), 0 0 60px -24px rgba(167, 139, 250, .8); }
dialog::backdrop { background: rgba(4, 2, 12, .72); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
.dlg-inner { display: flex; flex-direction: column; max-height: calc(100vh - 40px); }
.dlg-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; padding: 20px 22px; border-bottom: 1px solid var(--border); }
.dlg-head h2 { font: 600 28px/1.1 var(--serif); text-transform: uppercase; margin: 4px 0; }
.dlg-body { padding: 18px 22px; overflow: auto; display: grid; gap: 16px; }
.dlg-foot { display: flex; gap: 10px; padding: 14px 22px; border-top: 1px solid var(--border); flex-wrap: wrap; }
.spacer { flex: 1; }
.dlg-body .scores { display: flex; gap: 18px; flex-wrap: wrap; }
.dlg-body details { background: rgba(255, 255, 255, .04); border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px; }
.dlg-body summary { cursor: pointer; font-weight: 700; }
.dlg-body pre { white-space: pre-wrap; font: 13px/1.55 var(--mono); max-height: 260px; overflow: auto; margin: 8px 0 0; color: #D6D2EE; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font-size: 13px; padding: 2px 10px; border-radius: 999px; background: var(--bad-bg); color: var(--bad); font-weight: 700; }

/* ---------- Pied de page ---------- */
.footer { position: relative; z-index: 1; border-top: 1px solid rgba(255, 255, 255, .07); background: rgba(4, 3, 10, .6); color: var(--muted); font-size: 13px; }
.footer-inner { display: grid; grid-template-columns: auto 1fr auto; gap: 16px 36px; align-items: center; padding-top: 24px; padding-bottom: 26px; }
.footer-brand { display: flex; align-items: center; gap: 12px; }
.footer-brand img { filter: drop-shadow(0 0 10px rgba(167, 139, 250, .5)); }
.footer-name { font: 700 19px/1 var(--serif); letter-spacing: .06em; text-transform: uppercase; color: var(--text); }
.footer-tag { font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; margin-top: 5px; color: var(--accent-text); }
.footer-notes { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.footer-notes li::before { content: "✦"; color: var(--pink); font-size: 10px; margin-right: 8px; vertical-align: 1px; }
.footer-links { display: grid; gap: 4px; text-align: right; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }

/* Animations décoratives en pause hors de l'écran ou quand l'onglet est caché */
.anim-off, .anim-off::before, .anim-off::after, .anim-off *, .anim-off *::before, .anim-off *::after,
html.page-hidden *, html.page-hidden *::before, html.page-hidden *::after { animation-play-state: paused !important; }

/* ---------- Documents d'une candidature (téléchargement) ---------- */
.docs-cell { white-space: nowrap; }
.dl-btn { display: inline-flex; align-items: center; gap: 6px; margin: 2px 6px 2px 0; padding: 6px 11px; border-radius: 999px; cursor: pointer;
  font: 700 12.5px/1 var(--sans); color: var(--text); background: var(--accent-soft); border: 1px solid var(--border-strong); transition: background .2s, transform .2s, border-color .2s; }
.dl-ic { width: 18px; height: 18px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--grad); }
.dl-ic svg { width: 12px; height: 12px; fill: none; stroke: #160B2E; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.btn-primary .dl-ic { background: rgba(22, 11, 46, .16); }
.dl-btn small { font-size: 10.5px; font-weight: 800; color: var(--muted); text-transform: uppercase; }
.dl-btn.is-missing { border-style: dashed; border-color: rgba(251, 191, 36, .55); background: var(--mid-bg); }
.dl-btn.is-missing .dl-ic { background: var(--mid); }
.dl-btn.is-missing small { color: #FCD34D; }
.dlg-doc.is-missing { border-style: dashed; border-color: rgba(251, 191, 36, .5); }
.dlg-doc.is-missing small { color: #FCD34D; }
.orig-missing { display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; margin: 0 0 14px; background: var(--mid-bg); border: 1px solid rgba(251, 191, 36, .45); }
.orig-missing[hidden] { display: none; }
.orig-missing > span { flex: 1 1 320px; }
.dl-btn:hover { background: rgba(167, 139, 250, .24); transform: translateY(-1px); }
.dl-btn:active { transform: scale(.96); }
.dlg-docs { display: grid; gap: 8px; }
.dlg-doc { display: grid; grid-template-columns: 40px 1fr auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 14px; background: rgba(255, 255, 255, .04); border: 1px solid var(--border); }
.dlg-doc-ic { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; font-size: 19px; background: var(--accent-soft); border: 1px solid var(--border); }
.dlg-doc b { display: block; font-size: 14px; }
.dlg-doc small { display: block; color: var(--muted); font-size: 12.5px; overflow-wrap: anywhere; }
.dlg-doc-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.toast { position: fixed; left: 50%; bottom: 24px; translate: -50% 0; z-index: 60; width: max-content; max-width: min(560px, calc(100vw - 32px));
  padding: 12px 18px; border-radius: 14px; font-size: 14px; font-weight: 600; color: var(--text); background: #1A1435; border: 1px solid var(--border-strong);
  box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .9), 0 0 30px -10px rgba(167, 139, 250, .8); animation: rise .35s cubic-bezier(.2, .8, .2, 1) both; }

/* ---------- Bouton retour et retour en haut ---------- */
.topbar-left { display: flex; align-items: center; gap: 14px; min-width: 0; }
.back-btn { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px 0 6px; border-radius: 999px; cursor: pointer;
  font: 700 12px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--text);
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); transition: border-color .2s, background .2s, transform .2s; }
.back-btn[hidden] { display: none; }
.back-ico { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; font-size: 15px; letter-spacing: 0; color: #160B2E; background: var(--grad); transition: transform .3s cubic-bezier(.3, 1.6, .5, 1); }
.back-btn:hover { border-color: var(--border-strong); background: var(--accent-soft); }
.back-btn:hover .back-ico { transform: translateX(-3px); }
.back-btn:active { transform: scale(.96); }

.to-top { --p: 0; position: fixed; right: 20px; bottom: 20px; z-index: 40; width: 52px; height: 52px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; color: #fff; background: rgba(18, 14, 38, .94);
  box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .8), 0 0 28px -8px rgba(167, 139, 250, .9);
  opacity: 0; transform: translateY(20px) scale(.8); pointer-events: none; transition: opacity .3s, transform .35s cubic-bezier(.3, 1.6, .5, 1); }
.to-top.is-on { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { transform: translateY(-3px) scale(1.06); }
.to-top svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.to-top circle { fill: none; stroke-width: 3; }
.tt-track { stroke: rgba(255, 255, 255, .12); }
.tt-prog { stroke: url(#tt-grad); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--p)); transition: stroke-dashoffset .15s linear; }
.to-top span { position: relative; font: 800 20px/1 var(--sans); }
.to-top-link { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }
.to-top-link:hover { color: #fff; }

/* ---------- Questions éliminatoires ---------- */
.ko-card { border-color: var(--border-strong); }
.ko-banner { padding: 12px 16px; border-radius: 14px; margin-bottom: 14px; font-size: 14px; border: 1px solid var(--border); }
.ko-banner.pass { background: var(--good-bg); border-color: rgba(74, 222, 128, .35); }
.ko-banner.unknown { background: var(--mid-bg); border-color: rgba(251, 191, 36, .4); }
.ko-banner.fail { background: var(--bad-bg); border-color: rgba(251, 113, 133, .5); box-shadow: 0 0 40px -18px rgba(251, 113, 133, .9); }
.ko-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ko { display: grid; grid-template-columns: 30px 1fr auto; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 14px; background: rgba(255, 255, 255, .035); border: 1px solid rgba(255, 255, 255, .07); }
.ko.fail { border-color: rgba(251, 113, 133, .45); background: linear-gradient(90deg, rgba(251, 113, 133, .12), rgba(255, 255, 255, .02) 70%); }
.ko-ic { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; font-weight: 900; font-size: 14px; background: var(--surface-2); color: var(--muted); }
.ko.pass .ko-ic { background: var(--good-bg); color: var(--good); }
.ko.fail .ko-ic { background: var(--bad-bg); color: var(--bad); }
.ko.unknown .ko-ic { background: var(--mid-bg); color: var(--mid); }
.ko-q { display: grid; gap: 3px; min-width: 0; }
.ko-q b { font-weight: 700; }
.ko-src, .ko-det { font-size: 12.5px; color: var(--muted); }
.ko-det { color: var(--accent-text); }
.ko-ans { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.ko-ans button { border: 1px solid var(--border); background: rgba(0, 0, 0, .3); color: var(--muted); font: 700 13px/1 var(--sans); padding: 9px 14px; border-radius: 999px; cursor: pointer; transition: all .2s; }
.ko-ans button:hover { color: var(--text); border-color: var(--border-strong); }
.ko-ans button[data-v="1"][aria-pressed="true"] { background: var(--good); border-color: var(--good); color: #062312; }
.ko-ans button[data-v="0"][aria-pressed="true"] { background: var(--bad); border-color: var(--bad); color: #2A0710; }
.ko-auto { font-size: 11px; font-weight: 700; color: var(--accent-text); letter-spacing: .04em; }
#results.is-disqualified .summary { border-color: rgba(251, 113, 133, .6); box-shadow: var(--shadow), 0 0 60px -26px rgba(251, 113, 133, .9); }
#results.is-disqualified #ring-global { opacity: .55; }
.ko-notice { background: var(--bad-bg); border: 1px solid rgba(251, 113, 133, .45); margin: 0; }

/* ---------- Score en 3 piliers ---------- */
.pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pillar { --c: var(--muted); padding: 16px; border-radius: 18px; background: rgba(0, 0, 0, .25); border: 1px solid var(--border); min-width: 0; }
.pillar.good { --c: var(--good); } .pillar.mid { --c: var(--mid); } .pillar.bad { --c: var(--bad); }
.pillar header { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; }
.pillar-emoji { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; font-size: 19px; background: var(--accent-soft); border: 1px solid var(--border); }
.pillar header b { display: block; font-size: 14px; line-height: 1.2; }
.pillar header small { color: var(--muted); font-size: 12px; }
.pillar-score { font: 700 34px/1 var(--serif); color: var(--c); font-variant-numeric: lining-nums; }
.pillar-score i { font-style: normal; font-size: 16px; margin-left: 1px; }
.pillar.na .pillar-score { font-size: 20px; color: var(--muted); }
.pillar-bar { height: 7px; margin: 12px 0; border-radius: 999px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.pillar-bar i { display: block; height: 100%; border-radius: inherit; background: var(--c); box-shadow: 0 0 12px var(--c); transition: width .8s cubic-bezier(.2, .8, .2, 1); }
.pillar-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 13.5px; }
.pillar-list li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 9px; background: rgba(255, 255, 255, .025); }
.pillar-list li > span:first-child { min-width: 0; }
.pillar-list small { display: block; color: var(--muted); font-size: 12px; }
.pillar-list li.yes > span:first-child { color: var(--text); }
.pillar-list li.no > span:first-child { color: var(--bad); }
.pillar-list li.mid > span:first-child { color: var(--mid); }
.pillar-list .tags { display: inline-flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; flex: none; }
.tag-coef, .tag-dur, .tag-pct { font-style: normal; font-size: 11px; font-weight: 800; padding: 2px 7px; border-radius: 999px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tag-coef.hi { color: var(--good); background: var(--good-bg); }
.tag-coef.mid { color: var(--cyan); background: rgba(34, 211, 238, .12); }
.tag-coef.lo { color: var(--bad); background: var(--bad-bg); }
.tag-coef.na { color: var(--muted); background: var(--surface-2); }
.tag-dur.ok { color: var(--good); background: var(--good-bg); }
.tag-dur.ko { color: var(--mid); background: var(--mid-bg); }
.tag-pct { color: var(--accent-text); background: var(--accent-soft); }

/* ---------- Ce que l'ATS a compris du CV ---------- */
.profile-card h3.sub { margin-top: 20px; }
.profile-card .profile-grid h3.sub { margin-top: 0; }
.profile-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 20px; margin-bottom: 8px; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; font-size: 14px; }
.kv dt { color: var(--muted); font-size: 13px; }
.kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.pf-edus { display: grid; gap: 8px; }
.pf-edu { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, .035); border: 1px solid rgba(255, 255, 255, .07); }
.pf-edu .lvl { flex: none; font: 800 12px/1 var(--sans); padding: 7px 9px; border-radius: 9px; color: #160B2E; background: var(--grad); }
.pf-edu b { display: block; font-size: 14px; }
.pf-edu small { color: var(--muted); font-size: 12.5px; }
.pf-table td { font-size: 13.5px; }
.code-chip { font: 700 11.5px/1 var(--mono); padding: 4px 7px; border-radius: 7px; color: var(--accent-text); background: var(--accent-soft); border: 1px solid var(--border); white-space: nowrap; }
.pf-skills { display: flex; flex-wrap: wrap; gap: 6px; }
.pf-skill { font-size: 13px; font-weight: 700; padding: 5px 11px; border-radius: 999px; background: var(--good-bg); color: var(--text); border: 1px solid rgba(74, 222, 128, .28); cursor: help; }
.pf-skill small { color: var(--good); font-weight: 700; }
.pf-skill.undated { background: var(--surface-2); border-color: var(--border); }
.pf-skill.undated small { color: var(--muted); }
.pf-unparsed { margin-top: 16px; padding: 12px 14px; border-radius: 12px; background: var(--mid-bg); border: 1px solid rgba(251, 191, 36, .4); }
.pf-unparsed summary { cursor: pointer; font-weight: 700; }
.pf-unparsed .blk { margin-top: 10px; font-size: 13px; }
.pf-unparsed pre { white-space: pre-wrap; font: 12.5px/1.55 var(--mono); max-height: 220px; overflow: auto; margin: 6px 0 0; padding: 10px; border-radius: 10px; background: rgba(0, 0, 0, .35); color: #D6D2EE; }

/* ---------- Historique : recherche avancée, archives, webhook ---------- */
.search-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: -4px 0 4px; }
.search-help { margin: 0 0 12px; font-size: 12.5px; }
.search-help code, .hook code { font: 12px/1 var(--mono); padding: 2px 5px; border-radius: 5px; background: var(--surface-2); color: var(--accent-text); }
.apps tr.is-archived td { opacity: .6; }
.tag-arch { background: rgba(255, 255, 255, .06); color: var(--muted); border-color: var(--border); }
.tag-block, .tag-check { font-size: 11px; padding: 2px 9px; white-space: nowrap; cursor: help; }
.tag-block { background: var(--bad-bg); color: #FDA4AF; border-color: rgba(251, 113, 133, .5); box-shadow: 0 0 14px -6px rgba(251, 113, 133, .9); }
.tag-check { background: var(--mid-bg); color: #FCD34D; border-color: rgba(251, 191, 36, .45); }
.dlg-prereq { display: grid; gap: 8px; }
.dlg-prereq .ko-banner { margin: 0; }
.dlg-prereq .ko { padding: 10px 12px; }
.hook { margin-top: 16px; padding: 12px 14px; border-radius: 12px; background: rgba(255, 255, 255, .03); border: 1px solid var(--border); }
.hook summary { cursor: pointer; font-weight: 700; font-size: 14px; }
.hook p { margin: 8px 0; }
.hook-row { display: flex; gap: 8px; flex-wrap: wrap; }
.hook-row input { flex: 1 1 260px; width: auto; }

/* ---------- Espace personnel : barre du haut ---------- */
.avatar { width: 32px; height: 32px; flex: none; border-radius: 50%; display: inline-grid; place-items: center; font: 800 14px/1 var(--sans); letter-spacing: 0; text-transform: uppercase; color: #160B2E; background: var(--grad); box-shadow: 0 0 14px -2px rgba(167, 139, 250, .8); }
.avatar-sm { width: 24px; height: 24px; font-size: 11px; }
.user-chip { display: inline-flex; align-items: center; gap: 10px; margin-left: 8px; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, .05); border: 1px solid var(--border); }
.user-meta { display: grid; line-height: 1.2; max-width: 200px; padding-right: 2px; }
.user-meta b { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-meta small { font-size: 11px; color: var(--muted); white-space: nowrap; }
.user-meta small::before { content: "● "; color: var(--muted); }
.user-meta small[data-state=ok]::before { color: var(--good); }
.user-meta small[data-state=syncing]::before { color: var(--cyan); }
.user-meta small[data-state=error]::before, .user-meta small[data-state=expired]::before { color: var(--mid); }
.logout { border: 0; width: 32px; height: 32px; flex: none; border-radius: 50%; display: grid; place-items: center; cursor: pointer; font-size: 15px; color: var(--muted); background: rgba(255, 255, 255, .06); transition: color .15s, background .15s, transform .3s; }
.logout:hover { color: var(--bad); background: var(--bad-bg); transform: rotate(-12deg); }
.hello-pill { display: inline-flex; align-items: center; gap: 10px; padding: 5px 16px 5px 5px; border-radius: 999px; font-size: 14px; color: #C9C4E4; background: rgba(255, 255, 255, .05); border: 1px solid var(--border); animation: rise .6s cubic-bezier(.2, .8, .2, 1) both; }
.hello-pill b { color: #fff; }
.claim { display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; background: linear-gradient(90deg, rgba(34, 211, 238, .12), rgba(167, 139, 250, .16), rgba(244, 114, 182, .1)); border: 1px solid var(--border-strong); box-shadow: 0 0 40px -20px rgba(167, 139, 250, .9); }
.claim[hidden] { display: none; }
.claim > span { flex: 1 1 320px; }
.claim-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

/* ---------- Écran de lancement (page de connexion) ---------- */
.is-splashing { overflow: hidden; }
.splash { position: fixed; inset: 0; z-index: 90; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px 16px; text-align: center;
  background: radial-gradient(55% 45% at 50% 38%, rgba(139, 92, 246, .38), transparent 70%), radial-gradient(40% 40% at 15% 85%, rgba(34, 211, 238, .2), transparent 70%), radial-gradient(40% 40% at 88% 78%, rgba(236, 72, 153, .24), transparent 70%), #07060F;
  clip-path: circle(150% at 50% 40%); transition: clip-path .85s cubic-bezier(.7, 0, .3, 1) .5s; }
.splash.is-done { clip-path: circle(0% at 50% 40%); pointer-events: none; }
.splash[hidden] { display: none; }
.splash-flash { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(circle at 50% 40%, #fff, rgba(255, 255, 255, .4) 18%, transparent 55%); }
.splash.is-done .splash-flash { animation: flash .7s ease-out .15s both; }
@keyframes flash { 30% { opacity: .9; } 100% { opacity: 0; } }
.splash-stage { position: relative; width: 300px; height: 300px; display: grid; place-items: center; margin-bottom: -10px; }
.splash-coin { position: relative; z-index: 2; width: 150px; height: 150px; perspective: 700px; animation: coin-drop 1s cubic-bezier(.3, 1.3, .5, 1) both; }
@keyframes coin-drop {
  0% { transform: translateY(-75vh) scale(.5) rotate(-35deg); opacity: 0; }
  55% { transform: translateY(0) scale(1.18, .82); opacity: 1; }
  70% { transform: translateY(-30px) scale(.94, 1.06) rotate(5deg); }
  85% { transform: translateY(0) scale(1.05, .95); }
  100% { transform: none; }
}
.splash-logo { display: block; width: 100%; height: 100%; overflow: visible; transform-style: preserve-3d; animation: coin-flip 2.8s cubic-bezier(.65, 0, .3, 1) 1.1s infinite, coin-glow 3s ease-in-out infinite; }
@keyframes coin-flip { 0%, 35% { transform: rotateY(0); } 75%, 100% { transform: rotateY(360deg); } }
@keyframes coin-glow {
  0%, 100% { filter: drop-shadow(0 0 22px rgba(167, 139, 250, .8)) drop-shadow(0 0 60px rgba(244, 114, 182, .4)); }
  50% { filter: hue-rotate(-55deg) drop-shadow(0 0 30px rgba(34, 211, 238, .95)) drop-shadow(0 0 80px rgba(167, 139, 250, .6)); }
}
.splash-wing { transform-box: fill-box; transform-origin: 95% 92%; animation: flap .3s ease-in-out infinite alternate; }
@keyframes flap { from { transform: rotate(7deg) scale(.95); } to { transform: rotate(-17deg) scale(1.07); } }
.splash-check { stroke-dasharray: 34; stroke-dashoffset: 34; animation: draw .6s cubic-bezier(.6, 0, .2, 1) .8s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.splash-dots { transform-origin: 32px 32px; animation: spin 9s linear infinite; }
.splash-waves i { position: absolute; left: 50%; top: 50%; width: 150px; height: 150px; margin: -75px 0 0 -75px; border-radius: 50%; border: 2px solid rgba(34, 211, 238, .85); box-shadow: 0 0 30px rgba(34, 211, 238, .5), inset 0 0 20px rgba(34, 211, 238, .3); opacity: 0; animation: wave 2.4s cubic-bezier(.2, .6, .3, 1) .9s infinite; }
.splash-waves i:nth-child(2) { border-color: rgba(167, 139, 250, .85); box-shadow: 0 0 30px rgba(167, 139, 250, .5); animation-delay: 1.7s; }
.splash-waves i:nth-child(3) { border-color: rgba(244, 114, 182, .85); box-shadow: 0 0 30px rgba(244, 114, 182, .5); animation-delay: 2.5s; }
@keyframes wave { 0% { transform: scale(.95); opacity: .95; } 100% { transform: scale(2.05); opacity: 0; } }
.splash-orbit { position: absolute; inset: 0; }
.splash-orbit span { --r: 136px; position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; display: grid; place-items: center; font-size: 22px; border-radius: 50%;
  background: rgba(18, 14, 38, .78); border: 1px solid var(--border-strong); box-shadow: 0 0 22px -4px rgba(167, 139, 250, .9);
  transform: rotate(var(--a)) translateX(var(--r)) rotate(calc(-1 * var(--a)));
  animation: orbit 8s linear infinite, fade-in .5s ease 1s both; }
.splash-orbit span:nth-child(1) { --a: 0deg; }
.splash-orbit span:nth-child(2) { --a: 90deg; }
.splash-orbit span:nth-child(3) { --a: 180deg; }
.splash-orbit span:nth-child(4) { --a: 270deg; }
@keyframes orbit {
  from { transform: rotate(var(--a)) translateX(var(--r)) rotate(calc(-1 * var(--a))); }
  to { transform: rotate(calc(var(--a) + 360deg)) translateX(var(--r)) rotate(calc(-1 * var(--a) - 360deg)); }
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.splash-word { display: flex; justify-content: center; font: 700 clamp(42px, 9vw, 72px)/1 var(--serif); letter-spacing: .08em; text-transform: uppercase; font-variant-numeric: lining-nums; }
.splash-word span { --d: 1s; display: inline-block; background: var(--grad-loop); background-size: 500% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: letter-in .7s cubic-bezier(.3, 1.6, .5, 1) var(--d) both, shimmer 5s linear infinite, letter-bob 2.2s ease-in-out calc(var(--d) + .9s) infinite; }
.splash-word .gap { width: .32em; }
.splash-word span:nth-child(2) { --d: 1.06s; } .splash-word span:nth-child(3) { --d: 1.12s; } .splash-word span:nth-child(5) { --d: 1.2s; }
.splash-word span:nth-child(6) { --d: 1.26s; } .splash-word span:nth-child(7) { --d: 1.32s; } .splash-word span:nth-child(8) { --d: 1.38s; }
.splash-word span:nth-child(9) { --d: 1.44s; } .splash-word span:nth-child(10) { --d: 1.5s; }
@keyframes letter-in { 0% { opacity: 0; transform: translateY(46px) rotate(-25deg) scale(.4); } 100% { opacity: 1; transform: none; } }
@keyframes letter-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.splash-tag { font-size: 12px; font-weight: 700; letter-spacing: .26em; text-transform: uppercase; color: var(--accent-text); animation: rise .6s ease 1.5s both; }
.splash-progress { display: flex; align-items: center; gap: 16px; width: min(420px, 100%); margin-top: 14px; animation: rise .6s ease .3s both; }
.splash-bar { position: relative; flex: 1; height: 12px; border-radius: 999px; background: rgba(255, 255, 255, .08); border: 1px solid var(--border); overflow: hidden; }
.splash-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: inherit; background: linear-gradient(90deg, #22D3EE, #A78BFA, #F472B6, #A3E635); box-shadow: 0 0 16px rgba(167, 139, 250, .9); }
.splash-bar i::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, .28) 0 8px, transparent 8px 16px); background-size: 22.6px 100%; animation: stripes .6s linear infinite; }
@keyframes stripes { to { background-position: 22.6px 0; } }
.splash-pct { min-width: 88px; text-align: right; }
.splash-pct b { font: 700 46px/1 var(--serif); font-variant-numeric: lining-nums tabular-nums; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.splash-pct span { font-weight: 800; color: var(--accent-text); margin-left: 2px; }
.splash-msg { min-height: 1.6em; font-weight: 650; color: #C9C4E4; }
.splash-msg.pop { animation: msg-pop .4s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes msg-pop { from { opacity: 0; transform: translateY(8px) scale(.9); } to { opacity: 1; transform: none; } }
.splash-skip { position: absolute; right: 18px; bottom: 18px; border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .05); color: var(--muted); font: 650 13px/1 var(--sans); padding: 9px 14px; border-radius: 999px; cursor: pointer; }
.splash-skip:hover { color: var(--text); border-color: var(--border-strong); }
.splash.is-done .splash-coin { animation: coin-boom .75s cubic-bezier(.5, -.5, .4, 1) forwards; }
@keyframes coin-boom { 0% { transform: none; } 35% { transform: scale(.82) rotate(-12deg); } 100% { transform: scale(2.8) rotate(25deg); opacity: 0; } }
.splash.is-done .splash-word, .splash.is-done .splash-tag, .splash.is-done .splash-progress, .splash.is-done .splash-msg, .splash.is-done .splash-skip, .splash.is-done .splash-orbit, .splash.is-done .splash-waves { opacity: 0; transform: scale(.9); transition: opacity .35s, transform .35s; }

/* ---------- Page de connexion ---------- */
main.login { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 540px); gap: clamp(28px, 5vw, 110px); align-items: center; min-height: calc(100vh - 67px); padding-top: 40px; padding-bottom: 60px; }
.login-visual h1 { font-family: var(--serif); font-weight: 600; text-transform: uppercase; font-size: clamp(40px, 4.6vw, 88px); line-height: 1; margin: 16px 0 26px; }
.login-perks { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 12px; max-width: 560px; }
.login-perks li { display: flex; gap: 14px; align-items: center; padding: 12px 16px 12px 12px; border-radius: 16px; background: var(--glass); border: 1px solid var(--border); color: var(--muted); font-size: 14px; }
.login-perks li > span { width: 42px; height: 42px; flex: none; display: grid; place-items: center; border-radius: 12px; font-size: 20px; background: var(--accent-soft); border: 1px solid var(--border); }
.login-perks b { display: block; color: var(--text); font-size: 14.5px; }
.login-mock { position: relative; max-width: 420px; padding: 14px; border-radius: 20px; display: grid; gap: 8px; background: rgba(18, 14, 38, .6); border: 1px solid var(--border-strong);
  box-shadow: 0 30px 60px -30px #000, 0 0 50px -24px rgba(244, 114, 182, .9); transform: perspective(900px) rotateY(-12deg) rotateX(6deg); }
.lm-row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, .04); font-size: 14px; }
.lm-status { font-style: normal; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.s-itw { color: var(--good); background: var(--good-bg); } .s-sent { color: var(--cyan); background: rgba(34, 211, 238, .12); } .s-rel { color: var(--mid); background: var(--mid-bg); }
.lm-cap { font-size: 11px; color: var(--muted); text-align: right; letter-spacing: .08em; }
.login-card { padding: clamp(22px, 3vw, 38px); margin: 0; border-color: var(--border-strong); box-shadow: var(--shadow), 0 0 90px -30px rgba(167, 139, 250, .9); }
.login-card::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 2px; pointer-events: none;
  background: conic-gradient(from var(--angle), transparent 0 55%, #22D3EE 70%, #A78BFA 82%, #F472B6 94%, transparent 100%);
  -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: spin-border 5s linear infinite; }
.is-ready .login-card { animation: login-in .8s cubic-bezier(.2, .9, .3, 1.2) .75s both; }
.is-ready .login-visual > * { animation: rise .7s cubic-bezier(.2, .8, .2, 1) both; }
.is-ready .login-visual > :nth-child(1) { animation-delay: .8s; } .is-ready .login-visual > :nth-child(2) { animation-delay: .9s; }
.is-ready .login-visual > :nth-child(3) { animation-delay: 1s; }
.is-ready .login-visual > .login-mock { animation: rise .7s cubic-bezier(.2, .8, .2, 1) 1.1s both, mock-float 6s ease-in-out 1.8s infinite; }
@keyframes mock-float { 0%, 100% { transform: perspective(900px) rotateY(-12deg) rotateX(6deg) translateY(0); } 50% { transform: perspective(900px) rotateY(-8deg) rotateX(4deg) translateY(-10px); } }
@keyframes login-in { from { opacity: 0; transform: translateY(40px) scale(.94); } to { opacity: 1; transform: none; } }
.is-ready .login-card.shake, .login-card.shake { animation: shake .5s cubic-bezier(.36, .07, .19, .97); }
@keyframes shake { 10%, 90% { transform: translateX(-2px); } 20%, 80% { transform: translateX(4px); } 30%, 50%, 70% { transform: translateX(-8px); } 40%, 60% { transform: translateX(8px); } }
.login-tabs { position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 5px; margin-bottom: 24px; border-radius: 999px; background: rgba(0, 0, 0, .35); border: 1px solid var(--border); }
.login-tabs[hidden] { display: none; }
.login-tabs button { position: relative; z-index: 1; border: 0; background: none; cursor: pointer; font: 700 14px/1 var(--sans); color: var(--muted); padding: 13px 8px; border-radius: 999px; transition: color .3s; }
.login-tabs button[aria-selected="true"] { color: #160B2E; }
.tab-ink { position: absolute; top: 5px; bottom: 5px; left: 5px; width: calc(50% - 5px); border-radius: 999px; background: var(--grad); box-shadow: 0 6px 20px -6px rgba(167, 139, 250, .9); transition: transform .45s cubic-bezier(.3, 1.4, .5, 1); }
.login-tabs[data-active="signup"] .tab-ink { transform: translateX(100%); }
.login-form { display: grid; gap: 14px; }
.login-form[hidden], .login-success[hidden], .login-form [hidden] { display: none; }
.login-title { font: 600 clamp(30px, 2.4vw, 40px)/1.05 var(--serif); text-transform: uppercase; font-variant-numeric: lining-nums; }
.login-sub { margin: -6px 0 4px; }
.pw { position: relative; display: block; }
.pw input { padding-right: 50px; }
.pw-toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: 0; background: none; cursor: pointer; font-size: 18px; line-height: 1; padding: 8px; border-radius: 10px; }
.pw-toggle:hover { background: var(--surface-2); }
.pw-meter { display: flex; align-items: center; gap: 12px; margin-top: -4px; font-size: 12.5px; font-weight: 650; color: var(--muted); }
.pw-track { flex: 1; height: 6px; border-radius: 999px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.pw-track i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--bad); transition: width .35s cubic-bezier(.3, 1.4, .5, 1), background .3s; }
.pw-meter[data-level="2"] i { background: var(--mid); } .pw-meter[data-level="3"] i { background: var(--lime); } .pw-meter[data-level="4"] i { background: var(--grad); }
.login-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.btn-block { width: 100%; }
.btn .spinner { display: none; width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid rgba(22, 11, 46, .25); border-top-color: #160B2E; animation: spin .7s linear infinite; }
.btn.is-busy .spinner { display: inline-block; }
.login-msg:empty { display: none; }
.login-msg { margin: 0; }
.login-success { text-align: center; padding: 18px 0 8px; display: grid; justify-items: center; gap: 10px; }
.login-success p { margin: 0; }
.success-badge { position: relative; width: 92px; height: 92px; border-radius: 50%; display: grid; place-items: center; font: 800 44px/1 var(--sans); color: #160B2E; background: var(--grad); box-shadow: 0 0 50px -6px rgba(167, 139, 250, .9); animation: badge-pop .7s cubic-bezier(.3, 1.8, .5, 1) both; }
.success-badge::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 2px solid var(--violet); animation: wave 1.4s ease-out .2s infinite; }
@keyframes badge-pop { from { transform: scale(0) rotate(-90deg); } to { transform: none; } }
.login-mode { margin: 22px 0 0; padding-top: 16px; border-top: 1px solid var(--border); font-size: 13px; color: var(--muted); }

/* ---------- Temps de réflexion pendant l'analyse ---------- */
.think { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 16px; background: rgba(4, 2, 12, .74); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); animation: fade-in .25s both; }
.think[hidden] { display: none; }
.think-card { width: min(540px, 100%); padding: clamp(20px, 3vw, 32px); border-radius: 26px; text-align: center; background: radial-gradient(90% 70% at 50% 0%, rgba(139, 92, 246, .28), transparent 70%), #120E26; border: 1px solid var(--border-strong); box-shadow: 0 30px 80px -20px #000, 0 0 80px -24px rgba(167, 139, 250, .9); animation: login-in .5s cubic-bezier(.2, .9, .3, 1.2) both; }
.think-visual { position: relative; width: 130px; height: 150px; margin: 0 auto 16px; }
.think-doc { position: absolute; inset: 0 16px 0 10px; padding: 18px 14px; border-radius: 12px; display: grid; gap: 9px; align-content: start; overflow: hidden; background: linear-gradient(#1E1840, #150F2E); border: 1px solid var(--border-strong); }
.think-doc i { height: 6px; border-radius: 4px; background: rgba(255, 255, 255, .18); animation: line-glow 1.6s ease-in-out infinite; }
.think-doc i:nth-child(1) { width: 60%; background: rgba(167, 139, 250, .6); } .think-doc i:nth-child(3) { width: 85%; animation-delay: .2s; }
.think-doc i:nth-child(4) { width: 70%; animation-delay: .4s; } .think-doc i:nth-child(5) { width: 90%; animation-delay: .6s; } .think-doc i:nth-child(6) { width: 50%; animation-delay: .8s; }
@keyframes line-glow { 50% { background: rgba(34, 211, 238, .55); } }
.think-scan { position: absolute; left: 0; right: 0; top: -30px; height: 30px; background: linear-gradient(transparent, rgba(34, 211, 238, .45)); border-bottom: 2px solid #22D3EE; box-shadow: 0 6px 18px rgba(34, 211, 238, .8); animation: scan 1.4s ease-in-out infinite alternate; }
@keyframes scan { to { transform: translateY(178px); } }
.think-logo { position: absolute; right: -8px; bottom: -8px; width: 62px; height: 62px; filter: drop-shadow(0 0 16px rgba(167, 139, 250, .9)); animation: wiggle 1s ease-in-out infinite; }
@keyframes wiggle { 0%, 100% { transform: rotate(-12deg) scale(1); } 50% { transform: rotate(12deg) scale(1.12); } }
.think h2 { font: 600 clamp(26px, 2.4vw, 34px)/1.1 var(--serif); text-transform: uppercase; }
.dots::after { content: ""; display: inline-block; width: 1.2em; text-align: left; animation: dots 1.2s steps(1) infinite; }
@keyframes dots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } }
.think p { margin: 8px 0 0; }
.think-bar { height: 8px; margin: 18px 0; border-radius: 999px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.think-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--grad); box-shadow: 0 0 14px var(--violet); transition: width .5s cubic-bezier(.3, .8, .3, 1); }
.think-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; text-align: left; }
.think-steps li { display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; font-size: 14px; color: var(--muted); background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .06); transition: color .3s, background .3s, border-color .3s, opacity .3s; opacity: .55; }
.think-steps .st { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 900; color: #062312; border: 2px solid rgba(255, 255, 255, .15); }
.think-steps li.is-active { opacity: 1; color: var(--text); background: var(--accent-soft); border-color: var(--border-strong); }
.think-steps li.is-active .st { border-color: rgba(167, 139, 250, .25); border-top-color: var(--cyan); animation: spin .7s linear infinite; }
.think-steps li.is-done { opacity: 1; color: var(--text); }
.think-steps li.is-done .st { background: var(--good); border-color: var(--good); animation: badge-pop .4s cubic-bezier(.3, 1.8, .5, 1); }
.think-steps .val { font-size: 12.5px; font-weight: 800; color: var(--accent-text); white-space: nowrap; opacity: 0; transform: translateX(-6px); transition: opacity .3s, transform .3s; }
.think-steps li.is-done .val { opacity: 1; transform: none; }

/* Chiffres alignés dans les titres en Cormorant (le raccourci « font » remet les chiffres elzéviriens) */
.chip-ring span, .metric b, .stat b, .ring span, .verdict, .block-title, .hero h1, .app-hero h1, .demo-verdict,
.feature-body h3, .next-offer b, .dlg-head h2, .brand-name, .footer-name, .login-visual h1, .think h2, .pillar-score { font-variant-numeric: lining-nums; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .workflow { grid-template-columns: repeat(3, 1fr); }
  .workflow li:nth-child(3)::after { display: none; }
  .panels { grid-template-columns: 1fr 1fr; }
  .panels .panel:last-child { grid-column: 1 / -1; }
  .tools { grid-template-columns: repeat(6, 1fr); }
}
@media (max-width: 900px) {
  main.login { grid-template-columns: 1fr; min-height: 0; padding-top: 24px; gap: 28px; }
  .login-card { order: -1; }
  .login-mock { display: none; }
  .hero { grid-template-columns: 1fr; min-height: 0; padding-top: 28px; }
  .hero-visual { max-width: 720px; padding: 18px 0 30px; }
  .scene-frame, .scene-frame-alt { transform: none; }
  .final-grid { grid-template-columns: 1fr; text-align: center; }
  .final-cta p { margin: 14px auto 26px; }
  .features { grid-template-columns: 1fr; }
  .feature { display: grid; grid-template-columns: 220px 1fr; }
  .feature-art { height: auto; min-height: 170px; }
  .demo { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
  .pillars { grid-template-columns: 1fr; }
  .profile-grid { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .footer-inner { grid-template-columns: 1fr; }
  .footer-links { text-align: left; }
}
@media (max-width: 860px) {
  .nav-anchor { display: none; }
  .brand-tag { display: none; }
  .user-meta { display: none; }
}
/* Téléphones et tablettes : champs en 16 px, sinon Safari zoome à chaque saisie */
@media (max-width: 900px), (pointer: coarse) {
  input, select, textarea, .ai-prompt, .apps select { font-size: 16px !important; }
}
@media (max-width: 600px) {
  .topbar-inner { gap: 8px; }
  .brand-name { font-size: 18px; }
  .brand-mark { width: 36px; height: 36px; }
  .nav { gap: 2px; }
  .nav-link { padding: 8px; font-size: 11px; letter-spacing: .06em; }
  .nav .btn-neon { margin-left: 2px; padding: 7px 10px; font-size: 10.5px; letter-spacing: .06em; }
  .nav .btn-neon .arrow { display: none; }
  .lead { font-size: 16px; }
  .hero-cta .btn { width: 100%; }
  .sticker { width: 88px; height: 88px; }
  .float-chip { padding: 7px 10px 7px 7px; font-size: 12px; }
  .float-chip small { display: none; }
  .chip-score { left: -2%; top: 0; }
  .chip-ai { right: -2%; bottom: 0; }
  .chip-lock { display: none; }
  .sticker { width: 74px; height: 74px; left: 44%; top: -2%; }
  .final-cta .sparkle { display: none; }
  .chip-ring { width: 36px; height: 36px; }
  .chip-ring span { font-size: 15px; }
  .marquee span { font-size: 13px; }
  .feature { grid-template-columns: 1fr; }
  .demo { padding: 20px; }
  .demo-score { flex-direction: column; align-items: flex-start; }
  .panels { grid-template-columns: 1fr; }
  .tools { grid-template-columns: repeat(3, 1fr); }
  .workflow { grid-template-columns: 1fr; gap: 14px; }
  .workflow li::after { display: none; }
  .creator { grid-template-columns: 1fr; }
  .creator-photo { width: 120px; height: 120px; }
  .final-cta { padding: 40px 18px; }
  .final-cta .btn { width: 100%; }
  .fields { grid-template-columns: 1fr; }
  .card { padding: 18px; }
  .summary { padding: 20px; }
  .summary-main { flex-direction: column; align-items: flex-start; }
  .summary-side { width: 100%; }
  .summary-side .mini { flex: 1 1 100%; }
  .ring-xl { width: 104px; height: 104px; }
  .ring-xl span { font-size: 42px; }
  .verdict { font-size: 28px; }
  .toolbar-right { margin-left: 0; }
  .drop-text textarea { min-height: 200px; }
  .actions .btn-large { width: 100%; }
  .next-offer .btn { width: 100%; }
  .user-chip { margin-left: 2px; gap: 4px; }
  .topbar-left { gap: 8px; }
  .back-btn { width: 38px; height: 38px; padding: 0; justify-content: center; }
  .back-ico { width: 30px; height: 30px; }
  .back-txt { display: none; }
  .to-top { right: 14px; bottom: 14px; width: 48px; height: 48px; }
  .page-app .brand > div { display: none; }
  .tab-long { display: none; }
  .nav-login-text { display: none; }
  .splash-stage { width: 240px; height: 240px; }
  .splash-coin { width: 120px; height: 120px; }
  .splash-orbit span { --r: 110px; width: 38px; height: 38px; margin: -19px 0 0 -19px; font-size: 18px; }
  .splash-waves i { width: 120px; height: 120px; margin: -60px 0 0 -60px; }
  .splash-pct { min-width: 72px; }
  .splash-pct b { font-size: 38px; }
  .login-perks li { font-size: 13.5px; }
  .claim .btn { width: 100%; }
  .ko { grid-template-columns: 28px 1fr; }
  .ko-ans { grid-column: 1 / -1; justify-content: flex-start; }
  .dlg-doc { grid-template-columns: 36px 1fr; }
  /* Mes candidatures : une carte par candidature, documents à portée de pouce */
  .apps thead { display: none; }
  .apps, .apps tbody { display: block; }
  .apps tr { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; padding: 14px; margin-bottom: 10px; border-radius: 16px; background: rgba(255, 255, 255, .035); border: 1px solid var(--border); }
  .apps td { display: block; padding: 0; border: 0; white-space: normal; min-width: 0; }
  .apps td.wrap-cell { min-width: 0; }
  .apps td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 4px; font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
  .apps td.c-company, .apps td.c-title, .apps td.docs-cell, .apps td.c-open { grid-column: 1 / -1; }
  .apps td.c-company { order: -2; font-size: 16px; }
  .apps td.c-company::before, .apps td.c-title::before { display: none; }
  .apps td.c-title { order: -1; margin-top: -8px; color: var(--muted); }
  .apps td.c-status select { width: 100%; }
  .apps td.c-open .btn { width: 100%; }
  .apps tbody tr:hover td { background: none; }
  .dlg-doc-ic { width: 36px; height: 36px; }
  .dlg-doc-actions { grid-column: 1 / -1; justify-content: flex-start; }
  .kv { grid-template-columns: 1fr; gap: 0; }
  .kv dd { margin-bottom: 8px; }
}
@media (max-width: 480px) {
  .page-app .brand { display: none; }
  .page-home .back-btn:not([hidden]) + .brand .brand-name { display: none; }
}
@media (max-width: 400px) {
  .page-app .user-chip .avatar { display: none; }
  .page-app .nav-link { padding: 8px 6px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
  .splash-check { stroke-dashoffset: 0; }
}