* { box-sizing: border-box; }
html, body { margin: 0; }
body { font: var(--fs-base)/1.5 var(--font-sans); color: var(--text); background: var(--bg); }
h1, h2, h3, p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--accent); }
:focus-visible { outline: var(--focus) solid var(--accent); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.spacer { flex: 1; }
[hidden] { display: none !important; }

/* Boutons et champs */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); min-height: var(--hit); padding: 0 var(--s4); border: var(--line) solid var(--border-input); border-radius: var(--r-md); background: var(--bg); cursor: pointer; font-size: var(--fs-sm); font-weight: 600; text-decoration: none; color: var(--text); white-space: nowrap; transition: background var(--fast) var(--ease); }
.btn:hover { background: var(--surface); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn.primary:hover { filter: brightness(.93); background: var(--accent); }
.btn.danger { background: var(--danger); border-color: var(--danger); color: var(--on-accent); }
.btn.ghost { border-color: transparent; background: transparent; }
.btn.ghost:hover { background: var(--surface); }
.btn.small { min-height: 30px; padding: 0 var(--s3); font-size: var(--fs-xs); }
.btn.icon { width: var(--hit); padding: 0; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.btn[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); }
.btn svg { width: 18px; height: 18px; flex: none; }
.input, select.input { min-height: var(--hit); padding: 0 var(--s3); border: var(--line) solid var(--border-input); border-radius: var(--r-md); background: var(--bg); font-size: var(--fs-sm); }
.input[disabled] { opacity: .45; }
input[type="color"].input { padding: 2px; width: 40px; }
.input.num { width: 68px; }
.field { display: grid; gap: var(--s1); font-size: var(--fs-xs); color: var(--text-muted); font-weight: 600; }

/* Barre du haut */
.topbar { display: flex; align-items: center; gap: var(--s3); padding: var(--s2) var(--s4); border-bottom: var(--line) solid var(--border); background: var(--bg); }
.brand { display: inline-flex; align-items: center; gap: var(--s2); font-weight: 800; font-size: var(--fs-lg); color: var(--text); text-decoration: none; letter-spacing: -.01em; }
.brand img { display: block; }

/* Accueil */
.home main { max-width: 1160px; margin: 0 auto; padding: var(--s6) var(--s4) var(--s8); display: grid; gap: var(--s7); }
.hero h1 { font-size: var(--fs-display); line-height: 1.1; letter-spacing: -.02em; max-width: 18ch; }
.hero p { color: var(--text-muted); font-size: var(--fs-lg); margin-top: var(--s3); max-width: 52ch; }
.hero .promises { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s4); padding: 0; list-style: none; }
.hero .promises li { background: var(--surface); border-radius: var(--r-pill); padding: var(--s1) var(--s3); font-size: var(--fs-sm); font-weight: 600; }
.section-head { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; margin-bottom: var(--s4); }
.section-head h2 { font-size: var(--fs-xl); letter-spacing: -.01em; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--s4); }
.card { display: grid; border: var(--line) solid var(--border); border-radius: var(--r-lg); background: var(--bg); overflow: hidden; box-shadow: var(--shadow-card); text-align: left; padding: 0; }
button.card { cursor: pointer; }
.card:hover { border-color: var(--border-input); }
.card .shot { background: var(--workspace); aspect-ratio: 16 / 9; overflow: hidden; display: block; }
.card .meta { padding: var(--s3) var(--s4); display: grid; gap: 2px; }
.card .meta strong { font-size: var(--fs-base); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card .meta span { font-size: var(--fs-sm); color: var(--text-muted); }
.card .open { text-decoration: none; color: inherit; display: grid; }
.card .row { display: flex; gap: var(--s1); padding: 0 var(--s3) var(--s3); }
.empty { border: 2px dashed var(--border-input); border-radius: var(--r-lg); padding: var(--s7) var(--s5); text-align: center; color: var(--text-muted); display: grid; gap: var(--s3); justify-items: center; }
.empty strong { color: var(--text); font-size: var(--fs-lg); }
.skeleton { border-radius: var(--r-lg); background: var(--surface); aspect-ratio: 4 / 3; animation: pulse 1.2s infinite alternate; }
@keyframes pulse { to { opacity: .5; } }
.alert { border: var(--line) solid var(--danger); color: var(--danger); border-radius: var(--r-md); padding: var(--s3) var(--s4); background: var(--bg); }
.foot { border-top: var(--line) solid var(--border); padding: var(--s5) var(--s4); color: var(--text-muted); font-size: var(--fs-sm); display: flex; gap: var(--s4); flex-wrap: wrap; justify-content: center; }
.legal main { max-width: 720px; margin: 0 auto; padding: var(--s6) var(--s4) var(--s8); display: grid; gap: var(--s4); }
.legal h1 { font-size: var(--fs-xl); }
.legal h2 { font-size: var(--fs-lg); margin-top: var(--s4); }

/* Notifications et dialogues */
#toasts { position: fixed; left: 50%; bottom: var(--s5); transform: translateX(-50%); display: grid; gap: var(--s2); z-index: 60; width: max-content; max-width: calc(100vw - var(--s6)); }
.toast { background: var(--text); color: var(--bg); padding: var(--s3) var(--s4); border-radius: var(--r-md); box-shadow: var(--shadow-pop); font-size: var(--fs-sm); }
.toast.error { background: var(--danger); color: var(--on-accent); }
.dialog { border: 0; border-radius: var(--r-lg); padding: var(--s5); box-shadow: var(--shadow-pop); max-width: min(440px, calc(100vw - var(--s6))); color: var(--text); background: var(--bg); }
.dialog::backdrop { background: var(--scrim); }
.dialog h2 { font-size: var(--fs-lg); margin-bottom: var(--s2); }
.dialog p { color: var(--text-muted); }
.dialog-actions { display: flex; justify-content: flex-end; gap: var(--s2); margin-top: var(--s5); }
.keys { display: grid; grid-template-columns: auto 1fr; gap: var(--s2) var(--s4); margin-top: var(--s3); font-size: var(--fs-sm); }
kbd { font: 600 var(--fs-xs) var(--font-sans); border: var(--line) solid var(--border-input); border-radius: var(--r-sm); padding: 2px 6px; background: var(--surface); white-space: nowrap; }

/* Menus déroulants */
.menu { position: relative; }
.menu > summary { list-style: none; }
.menu > summary::-webkit-details-marker { display: none; }
.menu-list { position: absolute; right: 0; top: calc(100% + var(--s1)); z-index: 30; background: var(--bg); border: var(--line) solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-pop); padding: var(--s1); min-width: 250px; display: grid; }
.menu-list button { text-align: left; border: 0; background: none; padding: var(--s2) var(--s3); border-radius: var(--r-sm); cursor: pointer; display: grid; font-size: var(--fs-sm); font-weight: 600; }
.menu-list button small { font-weight: 400; color: var(--text-muted); }
.menu-list button:hover { background: var(--surface); }

/* Éditeur */
body.editor { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; height: 100vh; height: 100dvh; overflow: hidden; }
.editor .topbar { flex-wrap: nowrap; }
.title-input { border: var(--line) solid transparent; border-radius: var(--r-sm); padding: var(--s1) var(--s2); font-weight: 700; min-width: 0; flex: 0 1 320px; background: transparent; }
.title-input:hover { border-color: var(--border); }
.save-state { font-size: var(--fs-xs); color: var(--text-muted); white-space: nowrap; }
.save-state.error { color: var(--danger); font-weight: 700; }
.work { display: grid; grid-template-columns: var(--rail-w) var(--panel-w) minmax(0, 1fr); min-height: 0; }
.rail { display: flex; flex-direction: column; gap: var(--s1); padding: var(--s2); border-right: var(--line) solid var(--border); background: var(--surface); overflow: auto; }
.rail button { display: grid; justify-items: center; gap: 2px; border: 0; background: none; border-radius: var(--r-md); padding: var(--s2) 0; cursor: pointer; font-size: 11px; font-weight: 600; color: var(--text-muted); }
.rail button svg { width: 22px; height: 22px; }
.rail button[aria-selected="true"] { background: var(--bg); color: var(--accent); box-shadow: var(--shadow-card); }
.panel { border-right: var(--line) solid var(--border); overflow: auto; padding: var(--s4); display: grid; align-content: start; gap: var(--s4); background: var(--bg); }
.panel h2 { font-size: var(--fs-base); }
.panel h3 { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }
.panel .stack { display: grid; gap: var(--s2); }
.panel .two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
.panel .hint { font-size: var(--fs-xs); color: var(--text-muted); }
.layout-btn, .theme-btn { border: var(--line) solid var(--border); border-radius: var(--r-md); background: var(--bg); padding: var(--s1); cursor: pointer; display: grid; gap: 2px; font-size: var(--fs-xs); font-weight: 600; text-align: center; overflow: hidden; }
.layout-btn:hover, .theme-btn:hover { border-color: var(--border-input); }
.theme-btn[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.swatches { display: flex; height: 28px; border-radius: var(--r-sm); overflow: hidden; }
.swatches i { flex: 1; }
.version { display: flex; align-items: center; gap: var(--s2); font-size: var(--fs-sm); border-bottom: var(--line) solid var(--border); padding-bottom: var(--s2); }
.version span { flex: 1; min-width: 0; }
.version small { display: block; color: var(--text-muted); }
.main { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-width: 0; min-height: 0; }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); padding: var(--s2) var(--s3); border-bottom: var(--line) solid var(--border); background: var(--bg); }
.toolbar .sep { width: var(--line); align-self: stretch; background: var(--border); flex: none; }
.toolbar label { display: inline-flex; align-items: center; gap: var(--s1); font-size: var(--fs-xs); color: var(--text-muted); font-weight: 600; white-space: nowrap; }
.toolbar .btn, .toolbar .input { flex: none; }
#stageWrap { position: relative; display: grid; place-items: center; background: var(--workspace); overflow: hidden; min-height: 0; touch-action: none; }
#holder { position: relative; box-shadow: var(--shadow-pop); }
#holder .el { cursor: move; user-select: none; -webkit-user-select: none; }
#holder .el:focus-visible { outline: calc(3px * var(--inv, 1)) dashed var(--accent); outline-offset: calc(3px * var(--inv, 1)); }
#holder .el[contenteditable] { cursor: text; user-select: text; -webkit-user-select: text; outline: calc(2px * var(--inv, 1)) solid var(--accent); }
#overlay { position: absolute; left: 0; top: 0; transform-origin: 0 0; pointer-events: none; }
.selbox { position: absolute; outline: calc(2px * var(--inv)) solid var(--accent); pointer-events: auto; cursor: move; touch-action: none; }
.selbox.editing { pointer-events: none; }
.selbox::after { content: ""; position: absolute; inset: calc(-8px * var(--inv)); }
.selbox .handle { z-index: 1; }
.handle { position: absolute; width: calc(14px * var(--inv)); height: calc(14px * var(--inv)); background: var(--bg); border: calc(2px * var(--inv)) solid var(--accent); border-radius: 50%; transform: translate(-50%, -50%); pointer-events: auto; touch-action: none; }
.guide { position: absolute; background: var(--accent); }
.guide.v { width: calc(1.5px * var(--inv)); top: 0; }
.guide.h { height: calc(1.5px * var(--inv)); left: 0; }
.gridlines { position: absolute; inset: 0; pointer-events: none; opacity: .35; }
.notes { border-top: var(--line) solid var(--border); padding: var(--s2) var(--s3); background: var(--bg); }
.notes textarea { width: 100%; height: 52px; resize: none; border: var(--line) solid var(--border); border-radius: var(--r-sm); padding: var(--s2); font-size: var(--fs-sm); }
.filmbar { display: flex; align-items: stretch; gap: var(--s3); border-top: var(--line) solid var(--border); padding: var(--s2) var(--s3); background: var(--surface); min-width: 0; }
.slide-actions { display: grid; grid-template-columns: repeat(3, auto); gap: var(--s1); align-content: center; flex: none; }
.slide-actions .wide { grid-column: 1 / -1; }
.film { display: flex; gap: var(--s2); overflow-x: auto; align-items: center; padding: var(--s1); flex: 1; min-width: 0; }
.film button { flex: none; border: 2px solid var(--border); border-radius: var(--r-sm); background: var(--bg); padding: 0; cursor: pointer; position: relative; overflow: hidden; }
.film button[aria-current="true"] { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.film button .n { position: absolute; left: 4px; bottom: 4px; background: var(--text); color: var(--bg); font-size: 11px; font-weight: 700; padding: 0 6px; border-radius: var(--r-pill); }
.thumb { overflow: hidden; position: relative; pointer-events: none; }
.missing { display: grid; place-content: center; justify-items: center; gap: var(--s3); height: 100vh; text-align: center; padding: var(--s5); }

/* Présentation */
body.present { background: var(--present-bg); color: var(--present-fg); height: 100vh; height: 100dvh; overflow: hidden; }
#view { position: fixed; inset: 0; display: grid; place-items: center; }
#pholder { position: relative; overflow: hidden; }
#pholder.blur .stage { filter: blur(24px); }
#ink { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#ink.on { pointer-events: auto; cursor: crosshair; touch-action: none; }
.pbar { position: fixed; left: 50%; bottom: var(--s4); transform: translateX(-50%); display: flex; align-items: center; gap: var(--s2); background: var(--scrim); padding: var(--s2) var(--s3); border-radius: var(--r-pill); transition: opacity var(--base) var(--ease); max-width: calc(100vw - var(--s4)); overflow-x: auto; }
.pbar.idle { opacity: 0; }
.pbar:focus-within { opacity: 1; }
.present .btn { background: transparent; color: var(--present-fg); border-color: transparent; }
.present .btn:hover, .present .btn[aria-pressed="true"] { background: rgba(245, 242, 234, .16); }
.present .input { background: transparent; color: var(--present-fg); border-color: var(--present-fg); width: 56px; text-align: center; }
.pcount { font-size: var(--fs-sm); white-space: nowrap; }
#timer { position: fixed; top: var(--s4); right: var(--s4); background: var(--scrim); padding: var(--s2) var(--s4); border-radius: var(--r-md); font-size: var(--fs-xl); font-weight: 700; font-variant-numeric: tabular-nums; }
#timer.done { background: var(--danger); }
.phint { position: fixed; top: var(--s4); left: 50%; transform: translateX(-50%); background: var(--scrim); padding: var(--s2) var(--s4); border-radius: var(--r-pill); font-size: var(--fs-sm); animation: hint 5s forwards; pointer-events: none; }
@keyframes hint { 0%, 70% { opacity: 1; } 100% { opacity: 0; } }
.presenter { position: fixed; inset: 0; display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--s4); padding: var(--s4); }
.presenter .col { display: grid; gap: var(--s3); align-content: start; min-height: 0; min-width: 0; }
.presenter h2 { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .08em; opacity: .7; }
.presenter .notes-view { font-size: var(--fs-lg); line-height: 1.5; white-space: pre-wrap; overflow: auto; background: rgba(245, 242, 234, .08); border-radius: var(--r-md); padding: var(--s4); min-height: 120px; max-height: 40vh; }
.presenter .clock { font-size: var(--fs-display); font-weight: 700; font-variant-numeric: tabular-nums; }
.presenter .controls { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center; }
.presenter .btn { border-color: var(--present-fg); }
.frame { overflow: hidden; border-radius: var(--r-sm); }

.anim-fade { animation: a-fade .6s var(--ease) both; }
.anim-rise { animation: a-rise .6s var(--ease) both; }
.anim-zoom { animation: a-zoom .6s var(--ease) both; }
@keyframes a-fade { from { opacity: 0; } }
@keyframes a-rise { from { opacity: 0; translate: 0 40px; } }
@keyframes a-zoom { from { opacity: 0; scale: .85; } }
.tr-fade { animation: a-fade .45s var(--ease) both; }
.tr-slide { animation: t-slide .45s var(--ease) both; }
.tr-zoom { animation: a-zoom .45s var(--ease) both; }
@keyframes t-slide { from { translate: 8% 0; opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .anim-fade, .anim-rise, .anim-zoom, .tr-fade, .tr-slide, .tr-zoom, .skeleton { animation: none; }
}

/* Impression / PDF */
body.print { background: var(--surface); }
.print-bar { position: sticky; top: 0; display: flex; gap: var(--s3); align-items: center; padding: var(--s3) var(--s4); background: var(--bg); border-bottom: var(--line) solid var(--border); z-index: 2; }
.pages { display: grid; gap: var(--s4); padding: var(--s4); justify-items: center; }
.page { box-shadow: var(--shadow-card); overflow: hidden; }
@media print {
  body.print { background: none; }
  .print-bar { display: none; }
  .pages { display: block; padding: 0; }
  .page { box-shadow: none; break-after: page; width: auto !important; height: auto !important; }
  .page .stage { transform: none !important; }
}

/* Petits écrans */
@media (max-width: 760px) {
  .hero h1 { font-size: var(--fs-xl); }
  .topbar { gap: var(--s2); padding: var(--s2); }
  .home .topbar { flex-wrap: wrap; }
  .editor .topbar .btn { padding: 0 var(--s3); }
  .title-input { flex: 1 1 60px; }
  .hide-s { display: none !important; }
  .work { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  .main { grid-row: 1; }
  .rail { grid-row: 2; flex-direction: row; border-right: 0; border-top: var(--line) solid var(--border); }
  .rail button { flex: 1 0 64px; }
  .panel { display: none; position: fixed; left: 0; right: 0; bottom: 0; max-height: 62dvh; z-index: 40; border-top: var(--line) solid var(--border); border-right: 0; box-shadow: var(--shadow-pop); border-radius: var(--r-lg) var(--r-lg) 0 0; }
  .panel.open { display: grid; }
  .notes textarea { height: 40px; }
  .toolbar { flex-wrap: nowrap; overflow-x: auto; }
  .slide-actions { grid-template-columns: repeat(2, auto); }
  .presenter { grid-template-columns: minmax(0, 1fr); overflow: auto; }
  .menu-list { position: fixed; right: var(--s2); left: var(--s2); top: 56px; }
}
@media (min-width: 761px) { .only-s { display: none !important; } }