/* Aube · écrans de l'app recréés en HTML, nets à toute taille.
   Partagé par le site (landing/) et le film (brief/motion/). Tout est dessiné à l'échelle « points macOS »
   (texte de base 13 px) ; on agrandit avec `zoom` sur le conteneur. Couleurs et textes repris de l'app.
   La police est celle du Mac ; le film la remplace par Inter via --au-font (rendu sous Linux). */
.au {
  --au-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  --au-bg: #ffffff;
  --au-fg: #1d1d1f;
  --au-2: #86868b;
  --au-3: #aeaeb2;
  --au-line: #e5e5ea;
  --au-fill: #f2f2f2;
  --au-fill-2: #e9e9eb;
  --au-blue: #007aff;
  --au-purple: #af52de;
  --au-green: #34c759;
  --au-orange: #ff9500;
  --au-red: #ff3b30;
  --au-pink: #c2185b;
  --au-teal: #00897b;
  --au-btn: #ffffff;
  --au-btn-line: #d1d1d6;
  --au-shadow: 0 30px 70px -30px rgba(40, 20, 10, .35), 0 1px 3px rgba(0, 0, 0, .06);
  font-family: var(--au-font);
  font-size: 13px;
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--au-fg);
  -webkit-font-smoothing: antialiased;
  text-align: left;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .au.au-auto {
    --au-bg: #1e1e1e; --au-fg: #f5f5f7; --au-2: #98989d; --au-3: #6e6e73; --au-line: #38383a;
    --au-fill: #2a2a2c; --au-fill-2: #333336; --au-blue: #0a84ff; --au-purple: #bf5af2; --au-green: #30d158;
    --au-orange: #ff9f0a; --au-red: #ff453a; --au-btn: #2c2c2e; --au-btn-line: #48484a;
    --au-shadow: 0 30px 70px -30px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .08);
  }
}
:root[data-theme="dark"] .au.au-auto {
  --au-bg: #1e1e1e; --au-fg: #f5f5f7; --au-2: #98989d; --au-3: #6e6e73; --au-line: #38383a;
  --au-fill: #2a2a2c; --au-fill-2: #333336; --au-blue: #0a84ff; --au-purple: #bf5af2; --au-green: #30d158;
  --au-orange: #ff9f0a; --au-red: #ff453a; --au-btn: #2c2c2e; --au-btn-line: #48484a;
  --au-shadow: 0 30px 70px -30px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .08);
}
.au *, .au *::before, .au *::after { box-sizing: border-box; }
.au p { margin: 0; }
.au svg.i { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.au .muted { color: var(--au-2); }
.au .faint { color: var(--au-3); }
.au .blue { color: var(--au-blue); }
.au .red { color: var(--au-red); }
.au .orange { color: var(--au-orange); }
.au .tab { font-variant-numeric: tabular-nums; }

/* Fenêtre / panneau */
.au-win { background: var(--au-bg); border-radius: 12px; box-shadow: var(--au-shadow); overflow: hidden; }
.au-win.bordered { border: 1px solid rgba(0, 0, 0, .08); }

/* Case à cocher */
.au-cb { width: 15px; height: 15px; border: 1.2px solid var(--au-3); border-radius: 4px; flex: none; background: var(--au-bg); display: inline-grid; place-items: center; }
.au-cb.on::after { content: ""; width: 8px; height: 4px; border-left: 1.8px solid var(--au-fg); border-bottom: 1.8px solid var(--au-fg); transform: translateY(-1px) rotate(-45deg); }

/* Onglets du panneau (Tasks · Day · Notes) et filtres d'espaces */
.au-top { display: flex; align-items: center; gap: 12px; padding: 14px 16px 6px; }
.au-tabs { display: flex; gap: 11px; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.au-tabs span { color: var(--au-3); font-weight: 500; }
.au-tabs span.on { color: var(--au-fg); font-weight: 700; }
.au-tools { margin-left: auto; display: flex; gap: 16px; color: var(--au-fg); }
.au-spaces { display: flex; gap: 14px; align-items: center; padding: 2px 12px 8px; font-size: 13px; color: var(--au-2); }
.au-spaces .all { background: var(--au-fill); color: var(--au-fg); font-weight: 600; padding: 3px 9px; border-radius: 999px; }
.au-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 5px; vertical-align: 1px; }

/* Écriture libre : champ + propositions */
.au-composer { padding: 14px 14px 12px; }
.au-input { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.35; padding: 2px 4px 10px; min-height: 30px; }
.au-input .spark { color: var(--au-blue); margin-top: 3px; }
.au-input .spark svg { width: 16px; height: 16px; fill: currentColor; stroke: none; }
.au-caret { display: inline-block; width: 1.5px; height: 17px; background: var(--au-blue); vertical-align: -3px; margin-left: 1px; }
.au-props { background: var(--au-fill); border-radius: 10px; padding: 6px 12px 10px; }
.au-prop { display: grid; grid-template-columns: 16px 18px minmax(0, 1fr) auto auto; gap: 8px; align-items: start; padding: 6px 0; }
.au-prop .ic { color: var(--au-blue); margin-top: 1px; }
.au-prop .ic.grey { color: var(--au-2); }
.au-prop b { display: block; font-weight: 600; font-size: 13.5px; }
.au-prop small { display: block; color: var(--au-2); font-size: 12px; margin-top: 2px; }
.au-prop .dur { display: inline-flex; align-items: center; gap: 4px; font-size: 13.5px; white-space: nowrap; }
.au-prop .dur svg { width: 12px; height: 12px; }
.au-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.au-chip.day { background: color-mix(in srgb, var(--au-blue) 16%, transparent); color: var(--au-blue); }
.au-chip.ask { background: var(--au-bg); color: var(--au-2); }
.au-chip svg { width: 12px; height: 12px; }
.au-props .foot { display: flex; justify-content: space-between; align-items: center; padding-top: 8px; font-size: 12px; color: var(--au-3); }
.au-props .foot .acts { display: flex; gap: 16px; font-size: 13px; }
.au-props .foot .acts span { color: var(--au-fg); }
.au-props .foot .acts b { color: var(--au-blue); font-weight: 600; }
.au-edit { display: grid; grid-template-columns: 16px 18px minmax(0, 1fr); gap: 8px; align-items: start; padding: 6px 0; }
.au-edit b { display: block; font-weight: 600; font-size: 13.5px; }
.au-edit small { display: block; color: var(--au-2); font-size: 12px; margin-top: 2px; }
.au-edit s { color: var(--au-3); }
.au-edit .ic { color: var(--au-blue); margin-top: 1px; }
.au-props .hd { font-size: 11px; font-weight: 600; color: var(--au-2); text-transform: uppercase; letter-spacing: .04em; padding: 4px 0 2px; }

/* Vue Journée */
.au-daynav { display: flex; align-items: center; gap: 10px; padding: 4px 16px 8px; }
.au-daynav b { font-size: 16px; font-weight: 700; }
.au-daynav .range { margin-left: auto; color: var(--au-3); font-size: 12px; }
.au-add { margin: 0 12px 8px; background: var(--au-fill); border-radius: 8px; padding: 7px 10px; display: flex; gap: 8px; align-items: center; color: var(--au-2); font-size: 13px; }
.au-grid { position: relative; border-top: 1px solid var(--au-line); overflow: hidden; }
.au-grid .hour { position: absolute; left: 48px; right: 14px; height: 0; border-top: 1px solid var(--au-line); }
.au-grid .hour span { position: absolute; left: -40px; top: -7px; font-size: 11px; color: var(--au-3); font-variant-numeric: tabular-nums; }
.au-ev { position: absolute; left: 52px; right: 14px; border-radius: 6px; padding: 5px 8px 5px 10px; overflow: hidden; }
.au-ev::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--c); }
.au-ev { background: color-mix(in srgb, var(--c) 15%, var(--au-bg)); }
.au-ev b { display: block; font-weight: 600; font-size: 12.5px; }
.au-ev small { display: block; color: var(--au-2); font-size: 11px; margin-top: 1px; }
.au-ev .cam { position: absolute; right: 6px; top: 5px; background: var(--c); color: #fff; border-radius: 999px; padding: 1px 6px; display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 600; }
.au-ev .cam svg { width: 12px; height: 12px; stroke: #fff; }
.au-ev.task { display: grid; grid-template-columns: 15px minmax(0, 1fr); gap: 7px; align-items: start; }
.au-now { position: absolute; left: 50px; right: 8px; height: 2px; background: var(--au-red); z-index: 2; }
.au-now::before { content: ""; position: absolute; left: -4px; top: -3.5px; width: 8px; height: 8px; border-radius: 50%; background: var(--au-red); }
.au-sched { border-top: 1px solid var(--au-line); padding: 10px 14px 12px; }
.au-sched .hd { display: flex; justify-content: space-between; font-size: 13px; color: var(--au-2); font-weight: 600; }
.au-sched .hd b { color: var(--au-blue); font-weight: 600; }
.au-sched .free { text-align: right; font-size: 11px; color: var(--au-3); margin: 4px 0 2px; }
.au-srow { display: grid; grid-template-columns: 14px 10px minmax(0, 1fr) auto auto; gap: 8px; align-items: center; padding: 4px 0; font-size: 13px; }
.au-srow .grip { color: var(--au-3); }
.au-srow .dur { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.au-srow .dur svg { width: 12px; height: 12px; }
.au-srow .t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Carte Aujourd'hui (bureau) */
.au-today { padding: 12px 12px 10px; }
.au-today .hd { display: flex; align-items: baseline; gap: 8px; padding: 0 2px 8px; }
.au-today .hd b { font-size: 15px; font-weight: 700; }
.au-today .hd .d { color: var(--au-3); font-size: 13px; }
.au-today .hd .n { margin-left: auto; color: var(--au-3); font-size: 12px; display: inline-flex; gap: 8px; align-items: center; }
.au-next { background: var(--au-fill); border-radius: 9px; padding: 8px 10px 8px 14px; position: relative; display: flex; justify-content: space-between; align-items: center; }
.au-next::before { content: ""; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 3px; border-radius: 2px; background: var(--au-blue); }
.au-next b { display: block; font-weight: 600; }
.au-next small { color: var(--au-2); font-size: 12px; }
.au-next .j { color: var(--au-blue); font-weight: 600; }
.au-trow { display: flex; align-items: center; gap: 8px; padding: 6px 2px 0; font-size: 13px; }
.au-trow .t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.au-trow .w { font-size: 12px; white-space: nowrap; }
.au-trow svg.i { color: var(--au-2); }
.au-more { color: var(--au-3); font-size: 12px; padding: 4px 0 0 25px; }

/* Panneau des tâches */
.au-new { display: flex; gap: 10px; align-items: center; padding: 8px 16px 10px; color: var(--au-2); font-size: 14px; border-bottom: 1px solid var(--au-line); }
.au-list { padding: 6px 16px 10px; }
.au-sec { display: flex; gap: 8px; align-items: center; font-size: 12.5px; font-weight: 600; color: var(--au-2); padding: 10px 0 4px; }
.au-sec .c { color: var(--au-3); font-weight: 500; }
.au-sec.red { color: var(--au-red); }
.au-task { position: relative; display: grid; grid-template-columns: 15px minmax(0, 1fr) auto; gap: 9px; align-items: start; padding: 5px 0; }
.au-task .ttl { display: flex; gap: 6px; align-items: center; font-size: 14px; min-width: 0; }
.au-task .ttl span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.au-task .ttl svg.i { color: var(--au-2); }
.au-task .meta { display: flex; gap: 8px; font-size: 11.5px; color: var(--au-3); margin-top: 2px; align-items: center; }
.au-task.late::before { content: ""; position: absolute; left: -10px; top: 5px; bottom: 5px; width: 3px; border-radius: 2px; background: var(--au-red); }

/* Notification macOS */
.au-notif { display: grid; grid-template-columns: minmax(0, 1fr) auto; width: 350px; background: rgba(246, 246, 246, .86); border: 1px solid rgba(0, 0, 0, .08); border-radius: 16px; box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .3); backdrop-filter: saturate(1.8) blur(24px); -webkit-backdrop-filter: saturate(1.8) blur(24px); overflow: hidden; }
.au-notif .main { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 10px; align-items: center; padding: 10px 12px; }
.au-notif .main svg { width: 36px; height: 36px; }
.au-notif .row { display: flex; justify-content: space-between; gap: 8px; }
.au-notif b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.au-notif .when { color: var(--au-2); font-size: 12px; }
.au-notif .body { opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.au-notif .act { display: grid; place-items: center; padding: 0 16px; border-left: 1px solid rgba(0, 0, 0, .1); font-weight: 500; }