/* ATLIS / Atelier visuel. Les animations ne modifient jamais la mise en page. */
@property --visual-progress { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
:root { --visual-radius:22px; --visual-glow:.5; --visual-accent2:var(--accent2); --ease-out:cubic-bezier(.16,1,.3,1); }
html { text-rendering:optimizeLegibility; }
body { background:var(--bg); }
.app { isolation:isolate; background:linear-gradient(160deg,var(--bg2),var(--bg)); }
.app::before { content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:var(--visual-glow); background:radial-gradient(ellipse at 75% 5%,color-mix(in srgb,var(--accent) 24%,transparent),transparent 48%),radial-gradient(ellipse at 5% 80%,color-mix(in srgb,var(--visual-accent2) 16%,transparent),transparent 48%); }
html[data-backdrop="plain"] .app::before { display:none; }
html[data-backdrop="court"] .app::before { background:linear-gradient(90deg,transparent 49.85%,color-mix(in srgb,var(--accent2) 14%,transparent) 50%,transparent 50.15%),repeating-linear-gradient(0deg,transparent 0 179px,color-mix(in srgb,var(--accent2) 8%,transparent) 180px 181px),radial-gradient(ellipse at 70% 10%,color-mix(in srgb,var(--accent) 20%,transparent),transparent 65%); background-size:210px 100%,100% 100%,100% 100%; }
html[data-motion="expressive"][data-backdrop="aurora"] .app::before { animation:atlis-atmosphere 18s ease-in-out infinite alternate; }
.main { min-width:0; }
.topbar { border-color:color-mix(in srgb,var(--line) 65%,transparent); }
.brand { letter-spacing:.22em; font-weight:850; }
.brand svg { width:33px; height:33px; }
.brand svg path:last-child { stroke:var(--text); }
.icon-btn { color:var(--text); background:color-mix(in srgb,var(--panel2) 65%,transparent); box-shadow:none; }
.icon-btn svg,.nav svg,.studio-icon { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.65; stroke-linecap:round; stroke-linejoin:round; }
#notifBtn { border-color:color-mix(in srgb,var(--accent) 45%,var(--line)); color:var(--accent2); }
.card { border-radius:var(--visual-radius); border-color:color-mix(in srgb,var(--line) 78%,transparent); box-shadow:0 10px 30px #0000000a; background:linear-gradient(145deg,color-mix(in srgb,var(--panel2) 90%,var(--bg)),var(--panel)); }
.card-head h2 { letter-spacing:-.025em; font-weight:730; }
.page-head h1 { letter-spacing:-.04em; font-weight:760; }
.metric,.stat-block,.stat-card { background:color-mix(in srgb,var(--panel3) 35%,transparent); border-color:color-mix(in srgb,var(--line) 60%,transparent); }
.metric strong,.stat-block b,.stat-value,.ring span { font-variant-numeric:tabular-nums; }
.section { letter-spacing:.13em; font-weight:750; }
.primary { background:var(--accent); color:var(--accent-contrast); box-shadow:0 5px 18px color-mix(in srgb,var(--accent) 14%,transparent); }
.primary,.secondary,.danger { border-radius:calc(var(--visual-radius) * .65); }
.tab,.mini,.pill,.rate,.scale button,.segment button,.zone-btn,.filter-btn { background:var(--chip-bg); color:var(--text); }
.tab.active,.setting-tab.active,.rate.active,.scale button.selected,.segment button.active,.zone-btn.active,.filter-btn.active { background:var(--accent); color:var(--accent-contrast); border-color:var(--accent); }
html[data-mode="light"] .rate.active,html[data-mode="light"] .scale button.selected,html[data-mode="light"] .segment button.active,html[data-mode="light"] .zone-btn.active,html[data-mode="light"] .filter-btn.active { background:var(--accent); color:var(--accent-contrast); border-color:var(--accent); }
html[data-mode="light"] .good { color:#176638; }
html[data-mode="light"] .warn { color:#865600; }
html[data-mode="light"] .bad,html[data-mode="light"] .danger { color:#a72222; }
.bar { height:7px; background:color-mix(in srgb,var(--line) 50%,transparent); }
.bar i { transform-origin:left; background:linear-gradient(90deg,var(--accent),var(--visual-accent2)); }
button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible { outline:2px solid var(--accent2); outline-offset:4px; }
.field label { color:var(--text); }
.bottom { background:var(--bottom-bg); border-color:var(--line); }
.bottom .nav { position:relative; border-radius:12px; gap:5px; color:var(--muted); }
.bottom .nav b { height:25px; display:grid; place-items:center; }
.bottom .nav.active { color:var(--accent2); background:color-mix(in srgb,var(--accent) 10%,transparent); }
.bottom .nav.active::after { content:""; position:absolute; width:13px; height:2px; border-radius:9px; background:var(--accent2); bottom:0; left:calc(50% - 6px); }
.bottom .desktop-nav,.nav-signature { display:none; }
.hero { position:relative; isolation:isolate; overflow:hidden; padding:30px 24px; min-height:202px; align-items:center; gap:16px; border:1px solid color-mix(in srgb,var(--accent) 25%,var(--line)); border-radius:calc(var(--visual-radius) + 6px); background:linear-gradient(115deg,var(--panel2),color-mix(in srgb,var(--accent) 9%,var(--panel)),var(--bg2)); }
.hero::before { content:""; position:absolute; width:280px; height:280px; border-radius:50%; right:-80px; top:-120px; pointer-events:none; background:radial-gradient(circle,color-mix(in srgb,var(--accent) 20%,transparent),transparent 67%); }
.hero > div { position:relative; z-index:1; }
.hero h1 { font-size:clamp(28px,4vw,48px); font-weight:730; letter-spacing:-.055em; line-height:1.12; margin:12px 0 10px; }
.hero p { font-size:12px; line-height:1.6; }
.hero-label { display:inline-flex; align-items:center; gap:8px; font-size:9px; letter-spacing:.2em; font-weight:750; color:var(--accent2); }
.hero-label::before { content:""; width:5px; height:5px; border-radius:100%; background:currentColor; }
.hero .ring { width:86px; height:86px; flex:0 0 auto; background:conic-gradient(var(--accent2) 0 var(--visual-progress,var(--ring-progress)),color-mix(in srgb,var(--line) 65%,transparent) var(--visual-progress,var(--ring-progress)) 100%); box-shadow:0 0 26px color-mix(in srgb,var(--accent) 9%,transparent); }
.hero .ring::after { inset:5px; background:var(--panel); }
.hero .ring span { font-size:21px; text-align:center; letter-spacing:-.05em; }
.hero .ring span::after { content:"réalisé"; display:block; color:var(--muted); font-size:9px; letter-spacing:0; font-weight:500; margin-top:2px; }
.hero .visual-court { position:absolute; z-index:0; width:330px; right:-45px; top:-40px; opacity:.15; transform:rotate(-22deg); pointer-events:none; }
.visual-court { width:100%; height:100%; overflow:visible; color:var(--accent2); }
.court-lines { fill:none; stroke:currentColor; stroke-width:1; }
.court-orbit { fill:none; stroke:var(--visual-accent2); stroke-width:1; stroke-dasharray:3 5; opacity:.45; }
.court-ball { fill:var(--accent); filter:drop-shadow(0 0 9px color-mix(in srgb,var(--accent) 45%,transparent)); }
.sheet-bg.open { animation:atlis-fade .22s ease-out; }
.sheet-bg.open .sheet { animation:atlis-sheet .48s var(--ease-out); border-radius:calc(var(--visual-radius) + 5px) calc(var(--visual-radius) + 5px) 0 0; }
.sheet { box-shadow:0 -10px 80px #00000030; }
.sheet-item { color:var(--text); border:1px solid color-mix(in srgb,var(--line) 45%,transparent); }
.toast { background:var(--panel2); color:var(--text); border-color:var(--line); box-shadow:0 8px 40px #00000025; }

/* L’atelier garde ses contrôles et son aperçu en place pendant la saisie. */
.visual-studio { --studio-gap:22px; }
.studio-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; padding:10px 0 24px; }
.studio-kicker { font-size:10px; letter-spacing:.19em; text-transform:uppercase; color:var(--accent2); font-weight:750; }
.studio-heading h2 { margin:10px 0; font-size:clamp(31px,3.9vw,50px); line-height:1.04; font-weight:650; letter-spacing:-.06em; }
.studio-heading h2 em { font-style:normal; color:var(--accent2); }
.studio-heading p { margin:0; color:var(--muted); font-size:12px; line-height:1.6; max-width:390px; }
.studio-save { flex:0 0 auto; font-size:10px; color:var(--muted); display:flex; align-items:center; gap:6px; }
.studio-save::before { content:""; width:5px; height:5px; border-radius:50%; background:var(--accent2); }
.studio-save[data-state="error"] { color:var(--red); }
.studio-save[data-state="error"]::before { background:var(--red); }
.studio-layout { display:grid; gap:var(--studio-gap); align-items:start; }
.studio-preview { position:relative; overflow:hidden; border:1px solid var(--line); border-radius:calc(var(--visual-radius) + 6px); background:var(--bg2); padding:22px; }
.studio-preview::before { content:""; position:absolute; inset:-30% -35% 0; pointer-events:none; background:radial-gradient(ellipse at 80% 10%,color-mix(in srgb,var(--accent) 18%,transparent),transparent 58%); }
.studio-preview::before { opacity:var(--visual-glow); }
html[data-backdrop="plain"] .studio-preview::before { display:none; }
html[data-backdrop="court"] .studio-preview::before { background:repeating-linear-gradient(90deg,transparent 0 80px,color-mix(in srgb,var(--accent2) 13%,transparent) 81px 82px),repeating-linear-gradient(0deg,transparent 0 110px,color-mix(in srgb,var(--accent2) 13%,transparent) 111px 112px); }
.studio-preview-label { display:flex; justify-content:space-between; gap:8px; position:relative; font-size:9px; color:var(--muted); letter-spacing:.12em; text-transform:uppercase; }
.studio-preview-label b { font-weight:750; letter-spacing:.24em; color:var(--text); }
.studio-stage { position:relative; height:220px; margin:0 -15px; overflow:hidden; }
.studio-stage .visual-court { width:230px; height:240px; position:absolute; right:-2px; top:-12px; transform:rotate(-19deg); opacity:.5; }
.studio-stage-title { position:absolute; z-index:1; left:14px; top:44px; font-size:37px; line-height:1.04; letter-spacing:-.06em; font-weight:650; }
.studio-stage-title em { color:var(--accent2); font-style:normal; }
.studio-stage-caption { position:absolute; bottom:17px; left:15px; font-size:10px; color:var(--muted); }
.studio-preview-card { position:relative; border:1px solid var(--line); border-radius:var(--visual-radius); background:var(--panel); padding:16px; }
.studio-preview-card small { color:var(--muted); font-size:10px; }
.studio-preview-card strong { display:block; margin:5px 0 18px; font-size:17px; letter-spacing:-.025em; font-weight:600; }
.studio-preview-card .primary { margin-top:16px; padding:11px; font-size:11px; }
.studio-preview-footer { display:flex; justify-content:center; gap:25px; padding:20px 0 0; color:var(--muted); }
.studio-preview-footer svg { width:17px; height:17px; }
.studio-preview-footer svg:first-child { color:var(--accent2); }
.studio-preview-note { margin:13px 4px 0; color:var(--muted); font-size:10px; line-height:1.5; }
.studio-preview-note b { color:var(--text); font-weight:550; }
.studio-section { padding:23px; border:1px solid color-mix(in srgb,var(--line) 75%,transparent); border-radius:var(--visual-radius); background:color-mix(in srgb,var(--panel) 92%,transparent); margin-bottom:16px; }
.studio-section-title { display:flex; justify-content:space-between; align-items:center; gap:12px; margin:0 0 17px; }
.studio-section-title h3 { margin:0; font-size:15px; letter-spacing:-.02em; font-weight:650; }
.studio-section-title span { font-size:9px; color:var(--muted); letter-spacing:.06em; }
.studio-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.studio-choice { position:relative; border:1px solid var(--line); border-radius:13px; min-height:45px; background:transparent; color:var(--muted); padding:10px 7px; font-size:11px; }
.studio-choice[aria-pressed="true"] { color:var(--text); background:color-mix(in srgb,var(--accent) 10%,var(--panel)); border-color:var(--accent2); }
.studio-choice small { display:block; color:var(--muted); font-size:9px; margin-top:5px; line-height:1.4; }
.studio-palette-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.studio-palette { min-width:0; padding:0; border:1px solid var(--line); border-radius:14px; background:var(--panel); text-align:left; color:var(--text); overflow:hidden; }
.studio-palette,.studio-choice { transition:transform .2s var(--ease-out),border-color .2s ease,background-color .2s ease!important; }
.studio-palette-art { display:block; position:relative; height:67px; margin:5px 5px 0; border-radius:10px; overflow:hidden; background:radial-gradient(ellipse at 85% 0%,var(--tile-secondary),transparent 70%),linear-gradient(140deg,var(--tile-bg) 42%,var(--tile-accent)); }
.studio-palette-art::before { content:""; position:absolute; right:13px; top:14px; width:30px; height:49px; transform:rotate(28deg); border:1px solid var(--tile-ink); opacity:.55; border-radius:1px; background:linear-gradient(0deg,transparent 49%,var(--tile-ink) 50%,transparent 52%),linear-gradient(90deg,transparent 49%,var(--tile-ink) 50%,transparent 52%); }
.studio-palette-art::after { content:""; position:absolute; left:13px; top:20px; width:11px; height:11px; border-radius:50%; background:var(--tile-accent); box-shadow:0 0 20px var(--tile-accent); }
.studio-palette-copy { display:flex; align-items:center; justify-content:space-between; gap:3px; padding:10px; font-size:10px; font-weight:600; }
.studio-palette-check { display:grid; place-items:center; width:15px; height:15px; border-radius:50%; font-size:9px; opacity:0; }
.studio-palette[aria-pressed="true"] { border-color:var(--accent2); box-shadow:0 0 0 1px var(--accent2); }
.studio-palette[aria-pressed="true"] .studio-palette-check { opacity:1; background:var(--accent); color:var(--accent-contrast); }
.studio-details { border-top:1px solid var(--line); margin-top:18px; padding-top:14px; }
.studio-details > summary { list-style:none; cursor:pointer; display:flex; justify-content:space-between; gap:10px; font-size:11px; color:var(--muted); padding:3px 0; }
.studio-details > summary::-webkit-details-marker { display:none; }
.studio-details > summary::after { content:"+"; font-size:15px; line-height:1; color:var(--accent2); }
.studio-details[open] > summary::after { content:"−"; }
.studio-details[open] > summary { margin-bottom:16px; color:var(--text); }
.studio-details .studio-palette-grid { margin-bottom:18px; }
.studio-colors { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.studio-color { display:block; font-size:11px; }
.studio-color > span { display:block; margin-bottom:9px; color:var(--muted); }
.studio-color-box { display:flex; gap:8px; align-items:center; padding:7px; border:1px solid var(--line); border-radius:12px; }
.studio-color input[type="color"] { padding:0; border:0; background:transparent; width:32px; height:30px; cursor:pointer; flex:0 0 auto; }
.studio-color input[type="color"]::-webkit-color-swatch-wrapper { padding:1px; }
.studio-color input[type="color"]::-webkit-color-swatch { border:0; border-radius:7px; }
.studio-color input[type="text"] { min-width:0; width:100%; border:0; background:none; outline:0; color:var(--text); font:11px ui-monospace,monospace; padding:3px; }
.studio-color input[aria-invalid="true"] { outline:1px solid var(--red); }
.studio-label { display:block; color:var(--muted); font-size:11px; margin:18px 0 10px; }
.studio-range { display:flex; align-items:center; gap:14px; }
.studio-range input { width:100%; accent-color:var(--accent); min-height:30px; }
.studio-range output { color:var(--text); font-size:11px; min-width:32px; text-align:right; font-variant-numeric:tabular-nums; }
.studio-footnote { margin:13px 0 0; font-size:10px; color:var(--muted); line-height:1.6; }
.studio-motion { min-height:94px; text-align:left; padding:13px 10px; }
.studio-motion svg { display:block; width:25px; height:20px; margin-bottom:8px; color:var(--accent2); }
.studio-reset { border:0; background:none; color:var(--muted); font-size:11px; text-decoration:underline; text-underline-offset:4px; padding:8px 0; }
.visual-studio .setting-row b { font-size:12px; }
.visual-studio .setting-row small { font-size:10px; }
.visual-studio .card { content-visibility:visible; }
html[data-ui-style="glass"] .studio-section,html[data-ui-style="glass"] .studio-preview-card { background:color-mix(in srgb,var(--panel) 68%,transparent); backdrop-filter:blur(12px); }
html[data-ui-style="minimal"] .studio-section,html[data-ui-style="minimal"] .studio-preview { box-shadow:none; background:var(--panel); }
html[data-ui-style="performance"] .studio-section { padding:17px; }
html[data-ui-style="focus"] .hero .visual-court { opacity:.07; }

/* Entrées, trajectoires et retours au clic. Aucun calque ne capture le pointeur. */
html:not([data-motion="reduced"]) .studio-stage .court-lines { stroke-dasharray:1000; animation:atlis-court-draw 1.3s var(--ease-out) both; }
html[data-motion="expressive"] .studio-stage .court-ball { animation:atlis-rally 6s ease-in-out infinite; }
.studio-preview.is-replaying .court-ball { animation:atlis-rally 2.4s ease-in-out; }
.studio-preview.is-replaying .bar i { animation:atlis-progress .9s var(--ease-out); }
.visual-ripple { position:fixed; pointer-events:none; z-index:1100; width:40px; height:40px; margin:-20px; border:1px solid var(--accent2); border-radius:50%; animation:atlis-ripple .55s ease-out forwards; }
.launch-cinematic { pointer-events:none; background:radial-gradient(ellipse at 50% 45%,color-mix(in srgb,var(--accent) 16%,transparent),transparent 40%),var(--bg); }
.launch-logo .launch-mountain { stroke:var(--text); }
.launch-title { color:var(--text); }
.launch-subtitle { color:var(--muted); }
.launch-line i { background:linear-gradient(90deg,var(--accent),var(--accent2)); }
.launch-logo { animation-duration:.65s; }
.launch-logo .launch-a { animation-duration:.65s; animation-delay:0s; }
.launch-logo .launch-mountain { animation-duration:.5s; animation-delay:.25s; }
.launch-title { animation-duration:.4s; animation-delay:.4s; }
.launch-subtitle { animation-duration:.4s; animation-delay:.55s; }
.launch-line i { animation-duration:.85s; animation-delay:.15s; }
.launch-skip { position:absolute; right:24px; bottom:max(24px,env(safe-area-inset-bottom)); pointer-events:auto; border:1px solid var(--line); background:var(--panel); color:var(--text); border-radius:99px; padding:11px 18px; font-size:11px; }
@keyframes atlis-fade { from { opacity:0; } to { opacity:1; } }
@keyframes atlis-sheet { from { opacity:0; transform:translate3d(-50%,24px,0) scale(.985); } to { opacity:1; transform:translate3d(-50%,0,0) scale(1); } }
@keyframes atlis-atmosphere { to { transform:translate3d(-3%,2%,0) scale(1.07); } }
@keyframes atlis-court-draw { from { stroke-dashoffset:1000; opacity:0; } to { stroke-dashoffset:0; opacity:1; } }
@keyframes atlis-rally { 0%,100% { transform:translate(0,0); } 35% { transform:translate(68px,-114px); } 70% { transform:translate(-30px,-50px); } }
@keyframes atlis-progress { from { transform:scaleX(0); } to { transform:scaleX(1); } }
@keyframes atlis-ripple { from { transform:scale(.3); opacity:.65; } to { transform:scale(1.8); opacity:0; } }
html[data-visual-paused="true"] .app::before,html[data-visual-paused="true"] .court-ball { animation-play-state:paused!important; }
html[data-motion="reduced"] *,html[data-motion="reduced"] *::before,html[data-motion="reduced"] *::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
html[data-motion="reduced"] .launch-title,html[data-motion="reduced"] .launch-subtitle { opacity:1; }
html[data-motion="reduced"] .launch-a,html[data-motion="reduced"] .launch-mountain { stroke-dashoffset:0; }
html[data-motion="reduced"] .story-final-logo,html[data-motion="reduced"] .story-final-title,html[data-motion="reduced"] .story-final-slogan { opacity:1; transform:none; }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }
@media(hover:hover) and (prefers-reduced-motion:no-preference) {
  html:not([data-motion="reduced"]) .studio-palette:hover { transform:translateY(-3px); }
  .studio-choice:hover,.sheet-item:hover { border-color:var(--accent2); }
  .primary:hover { filter:brightness(1.07); }
}
@media(min-width:900px) {
  .app { grid-template-columns:224px minmax(0,1fr); grid-template-rows:76px minmax(0,1fr); }
  .topbar { height:76px; grid-template-columns:40px 1fr 92px; padding:0 27px; }
  .brand { font-size:16px; }
  .icon-btn { width:39px; height:39px; border-radius:12px; }
  .bottom { width:224px; top:76px; padding:29px 15px; height:calc(100dvh - 76px); gap:5px; background:color-mix(in srgb,var(--bg) 70%,transparent); }
  .bottom .nav { min-height:47px; height:47px; font-size:12px; gap:7px; grid-template-columns:30px 1fr; }
  .bottom .nav b { width:23px; }
  .bottom .nav.active { border-color:color-mix(in srgb,var(--accent) 20%,var(--line)); }
  .bottom .nav.active::after { top:13px; bottom:auto; left:0; width:2px; height:18px; }
  .bottom .desktop-nav { display:grid; }
  .nav-signature { display:block; margin-top:auto; padding:22px 14px 0; border-top:1px solid var(--line); color:var(--muted); font-size:10px; line-height:1.6; }
  .nav-signature b { display:block; color:var(--accent2); font-size:10px; font-weight:600; }
  .main { max-width:1280px; padding:32px 38px 72px; }
  .hero { min-height:220px; padding:35px; }
  .hero .ring { width:104px; height:104px; margin-right:18px; }
  .hero .ring span { font-size:25px; }
  .hero .visual-court { width:460px; top:-95px; right:20px; }
  .hero-label { font-size:10px; }
  .hero p { font-size:13px; }
  .card-head h2 { font-size:17px; }
  .sheet,.toast { left:calc(50% + 112px); }
  .sheet-bg.open .sheet { border-radius:calc(var(--visual-radius) + 5px); }
  .studio-layout { grid-template-columns:minmax(0,1fr) minmax(240px,.68fr); }
  .studio-preview-column { grid-column:2; grid-row:1; position:sticky; top:102px; }
  .studio-controls { grid-column:1; grid-row:1; }
}
@media(min-width:1240px) { .studio-layout { grid-template-columns:minmax(0,1fr) 320px; gap:28px; } .studio-palette-art { height:79px; } .studio-heading { padding-bottom:31px; } }
@media(max-width:899px) { .studio-preview-column { order:-1; } .studio-preview { padding:18px; } .studio-stage { height:180px; } .studio-preview-card { display:none; } .studio-preview-footer { display:none; } .studio-preview-note { margin-bottom:4px; } .studio-stage-title { top:34px; font-size:37px; } .studio-stage .visual-court { top:-29px; width:235px; } .studio-heading { align-items:flex-start; } .studio-save { margin-top:6px; } .studio-section { padding:19px; } }
@media(max-width:390px) { .hero { padding:25px 18px; min-height:183px; } .hero .ring { width:73px; height:73px; } .hero h1 { font-size:29px; } .hero .ring span { font-size:18px; } .studio-section { padding:15px; } .studio-palette-grid { gap:7px; } .studio-palette-copy { padding:9px 7px; font-size:9px; } .studio-heading { display:block; } .studio-save { margin-top:12px; } }