/* OxNotes — maquette animée du téléphone (HTML + CSS, sans image ni vidéo).
   Dimensions en « dp » : 1 dp = 1/392 de la largeur de l’écran (échelle automatique).
   Les écrans reprennent ceux de l’application ; l’animation est pilotée par assets/js/mock.js
   qui ajoute des classes f-* sur .phone. Sans JavaScript, l’écran d’accueil reste affiché. */

.phone-wrap { width: min(360px, 100%); margin-inline: auto; }
.phone {
  --bg: var(--paper);
  --p-urg-bg: #fce4e3; --p-urg-ink: #a62a25;
  --p-imp-bg: #fdecc8; --p-imp-ink: #7a5200;
  border-radius: 44px; padding: 11px;
  background: #2b2d28; box-shadow: 0 30px 60px -30px rgba(37, 39, 34, .45);
}
@media (prefers-color-scheme: dark) {
  .phone { --p-urg-bg: #5b2a27; --p-urg-ink: #ffb4ab; --p-imp-bg: #4a3a14; --p-imp-ink: #f3d08a; }
}
.phone.f-amoled {
  --bg: #000; --surface: #141613; --card: #141613; --ink: #ecede5; --muted: #bbc1b6;
  --outline: #8c9388; --line: #2a2e27; --mix: 10%; --forest: #adcbb3; --on-forest: #163923;
  --p-urg-bg: #5b2a27; --p-urg-ink: #ffb4ab; --p-imp-bg: #4a3a14; --p-imp-ink: #f3d08a;
}
.phone-screen {
  container-type: inline-size;
  --d: calc(100cqw / 392);
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: 34px; background: var(--bg); color: var(--ink);
  aspect-ratio: 392 / 800; font-family: var(--sans); line-height: 1.3;
  transition: background-color .5s, opacity .4s;
  user-select: none; -webkit-user-select: none;
}
.phone-screen * { box-sizing: border-box; margin: 0; }
:where(.phone-screen svg) { width: calc(24 * var(--d)); height: calc(24 * var(--d)); flex: none; }
.phone-screen b, .phone-screen h4, .phone-screen h5, .phone-screen h6 { font-weight: inherit; }
.phone.f-fade .phone-screen { opacity: 0; }
.phone.f-nofx .phone-screen, .phone.f-nofx .phone-screen * { transition: none !important; animation: none !important; }

.sb { position: absolute; z-index: 40; top: 0; left: 0; right: 0; height: calc(30 * var(--d)); padding: calc(9 * var(--d)) calc(22 * var(--d)) 0; display: flex; justify-content: space-between; align-items: center; font-size: calc(13 * var(--d)); font-weight: 650; pointer-events: none; }
.bat { width: calc(22 * var(--d)); height: calc(11 * var(--d)); border-radius: calc(3 * var(--d)); border: calc(1.5 * var(--d)) solid currentColor; position: relative; opacity: .8; }
.bat::after { content: ""; position: absolute; inset: calc(1.5 * var(--d)); right: calc(4 * var(--d)); background: currentColor; border-radius: calc(1 * var(--d)); }

/* ---------- Vues ---------- */
.view {
  position: absolute; inset: 0; padding-top: calc(30 * var(--d)); background: var(--bg); overflow: hidden; isolation: isolate;
  transition: transform .45s cubic-bezier(.2, .8, .2, 1), opacity .3s, background-color .5s;
}
.v-settings, .v-drive, .v-widgets { opacity: 0; transform: translateX(7%); pointer-events: none; }
.v-editor { opacity: 0; transform: translateY(4%); pointer-events: none; }
.f-settings .v-settings, .f-drive .v-drive, .f-widgets .v-widgets, .f-editor .v-editor { opacity: 1; transform: none; }
.f-coral .v-editor { background-color: color-mix(in srgb, #f28b83 11%, var(--bg)); }

.phone-screen * { transition: background-color .5s, color .5s, border-color .5s; }
.phone-screen .view, .phone-screen .sheet, .phone-screen .menu, .phone-screen .scrim, .phone-screen .nc { transition: transform .45s cubic-bezier(.2, .8, .2, 1), opacity .3s, background-color .5s, color .5s, max-height .5s, padding .5s, margin .5s; }

.ph { color: var(--muted); }
.typed { display: inline-block; clip-path: inset(0 100% 0 0); white-space: nowrap; }
@keyframes reveal { to { clip-path: inset(0 0 0 0); } }

/* ---------- Accueil ---------- */
.h-top { display: flex; justify-content: space-between; align-items: center; padding: calc(16 * var(--d)) calc(22 * var(--d)) 0 calc(22 * var(--d)); }
.h-title { font-family: var(--serif); font-weight: 700; font-size: calc(33 * var(--d)); letter-spacing: -.02em; line-height: 1.1; }
.h-tune { width: calc(26 * var(--d)); height: calc(26 * var(--d)); }
.h-search { position: relative; margin: calc(20 * var(--d)) calc(20 * var(--d)) 0; height: calc(54 * var(--d)); border-radius: calc(20 * var(--d)); background: var(--surface); display: flex; align-items: center; gap: calc(14 * var(--d)); padding: 0 calc(18 * var(--d)); font-size: calc(17 * var(--d)); }
.h-search svg { width: calc(22 * var(--d)); height: calc(22 * var(--d)); color: var(--ink); }
.h-search .ph { transition: opacity .2s; }
.h-search .q { position: absolute; left: calc(54 * var(--d)); color: var(--ink); }
.f-searching .h-search { box-shadow: inset 0 0 0 calc(2 * var(--d)) var(--forest); }
.f-searching .h-search .ph { opacity: 0; }
.f-t-search .q { animation: reveal .8s steps(4, end) forwards; }
.h-count { display: grid; grid-template-columns: 1fr auto; align-items: center; margin: calc(22 * var(--d)) calc(24 * var(--d)) 0 calc(22 * var(--d)); font-size: calc(16 * var(--d)); color: var(--muted); }
.h-count .cnt { grid-area: 1 / 1; opacity: 0; transition: opacity .25s; }
.h-count .c4 { opacity: 1; }
.f-has-new .h-count .c4 { opacity: 0; } .f-has-new .h-count .c5 { opacity: 1; }
.f-filtered .h-count .c5 { opacity: 0; } .f-filtered .h-count .c1 { opacity: 1; }
.h-view { width: calc(24 * var(--d)); height: calc(24 * var(--d)); color: var(--ink); }
.h-grid { display: grid; grid-template-columns: 1fr 1fr; gap: calc(12 * var(--d)); padding: calc(16 * var(--d)) calc(14 * var(--d)) 0; align-items: start; }
.col { display: grid; gap: calc(12 * var(--d)); align-content: start; }
.nc { background: color-mix(in srgb, var(--c, #fff) var(--mix), var(--surface)); border-radius: calc(20 * var(--d)); padding: calc(16 * var(--d)) calc(16 * var(--d)) calc(14 * var(--d)); overflow: hidden; max-height: calc(280 * var(--d)); }
.nc h4 { font-family: var(--serif); font-size: calc(20 * var(--d)); font-weight: 650; line-height: 1.2; }
.nc p { margin-top: calc(6 * var(--d)); font-size: calc(15.5 * var(--d)); color: var(--muted); line-height: 1.35; }
.nc .date { font-size: calc(14 * var(--d)); margin-top: calc(10 * var(--d)); }
.nc .prog { font-size: calc(14 * var(--d)); margin-top: calc(10 * var(--d)); }
.m-lock { display: grid; gap: calc(10 * var(--d)); padding-block: calc(18 * var(--d)); }
.m-lock svg { width: calc(24 * var(--d)); height: calc(24 * var(--d)); }
.nc.m-new, .f-filtered .nc:not(.m-courses) { }
.nc.m-new { max-height: 0; opacity: 0; padding-block: 0; margin-bottom: calc(-12 * var(--d)); }
.f-has-new .nc.m-new { max-height: calc(280 * var(--d)); opacity: 1; padding: calc(16 * var(--d)) calc(16 * var(--d)) calc(14 * var(--d)); margin-bottom: 0; }
.f-filtered .nc:not(.m-courses) { max-height: 0; opacity: 0; padding-block: 0; margin-bottom: calc(-12 * var(--d)); }

.cl { list-style: none; padding: 0; margin-top: calc(10 * var(--d)); }
.cl li { display: flex; align-items: center; gap: calc(10 * var(--d)); margin-top: calc(8 * var(--d)); font-size: calc(16 * var(--d)); line-height: 1.25; }
.cl li i { width: calc(19 * var(--d)); height: calc(19 * var(--d)); flex: none; border: calc(2 * var(--d)) solid var(--forest); border-radius: calc(5 * var(--d)); position: relative; }
.cl li.on { color: var(--muted); text-decoration: line-through; }
.cl li.on i { background: var(--forest); }
.cl li.on i::after { content: ""; position: absolute; left: calc(5.2 * var(--d)); top: calc(1 * var(--d)); width: calc(5 * var(--d)); height: calc(10 * var(--d)); border: solid var(--on-forest); border-width: 0 calc(2.2 * var(--d)) calc(2.2 * var(--d)) 0; transform: rotate(45deg); }

.pill { display: inline-flex; align-items: center; gap: calc(6 * var(--d)); height: calc(30 * var(--d)); padding: 0 calc(13 * var(--d)); border-radius: calc(15 * var(--d)); font-size: calc(14.5 * var(--d)); font-weight: 700; margin-top: calc(10 * var(--d)); }
.pill svg { width: calc(15 * var(--d)); height: calc(15 * var(--d)); }
.pill b { font-size: calc(15 * var(--d)); line-height: 1; }
.pill.urgent { background: var(--p-urg-bg); color: var(--p-urg-ink); }
.pill.important { background: var(--p-imp-bg); color: var(--p-imp-ink); }

.fab { position: absolute; right: calc(16 * var(--d)); bottom: calc(18 * var(--d)); height: calc(56 * var(--d)); padding: 0 calc(24 * var(--d)) 0 calc(20 * var(--d)); border-radius: calc(20 * var(--d)); background: var(--forest); color: var(--on-forest); display: flex; align-items: center; gap: calc(10 * var(--d)); font-size: calc(17.5 * var(--d)); font-weight: 650; box-shadow: 0 calc(8 * var(--d)) calc(18 * var(--d)) calc(-8 * var(--d)) rgba(0, 0, 0, .45); }
.fab svg { width: calc(22 * var(--d)); height: calc(22 * var(--d)); }

/* ---------- Barre d’application, lignes, groupes ---------- */
.app-bar { display: flex; align-items: center; gap: calc(22 * var(--d)); height: calc(60 * var(--d)); padding: 0 calc(22 * var(--d)); font-family: var(--serif); font-size: calc(23 * var(--d)); font-weight: 600; }
.app-bar svg { width: calc(26 * var(--d)); height: calc(26 * var(--d)); }
.s-scroll { padding: 0 calc(20 * var(--d)) calc(40 * var(--d)); transition: transform .7s cubic-bezier(.3, .7, .2, 1); }
.f-scrolled .s-scroll { transform: translateY(calc(-430 * var(--d))); }
.v-settings { padding-top: 0; }
.v-settings .app-bar { position: absolute; inset: 0 0 auto 0; height: calc(92 * var(--d)); padding-top: calc(30 * var(--d)); z-index: 3; background: var(--bg); }
.v-settings .s-scroll { padding-top: calc(92 * var(--d)); }
.v-settings h5 { font-family: var(--serif); font-size: calc(22 * var(--d)); font-weight: 700; margin: calc(24 * var(--d)) calc(4 * var(--d)) calc(10 * var(--d)); line-height: 1.2; }
.group { background: var(--surface); border-radius: calc(26 * var(--d)); padding: calc(6 * var(--d)) 0; }
.row { display: flex; align-items: center; gap: calc(18 * var(--d)); padding: calc(14 * var(--d)) calc(14 * var(--d)) calc(14 * var(--d)) calc(18 * var(--d)); min-height: calc(64 * var(--d)); }
.row .r-ic { color: var(--muted); width: calc(24 * var(--d)); height: calc(24 * var(--d)); }
.row .r-t { flex: 1; display: grid; gap: calc(3 * var(--d)); }
.row .r-t b { font-size: calc(18 * var(--d)); font-weight: 400; line-height: 1.25; }
.row small { font-size: calc(15.5 * var(--d)); color: var(--muted); line-height: 1.3; }
.row .r-ch { width: calc(22 * var(--d)); height: calc(22 * var(--d)); color: var(--muted); }
.row .sub-a, .row .sub-b { grid-area: auto; }
.row-appearance .r-t { position: relative; }
.row-appearance .sub-b { position: absolute; left: 0; bottom: 0; opacity: 0; }
.row-appearance .r-t { padding-bottom: calc(20 * var(--d)); }
.row-appearance .sub-a { position: absolute; left: 0; bottom: 0; transition: opacity .3s; }
.f-amoled .row-appearance .sub-a { opacity: 0; }
.f-amoled .row-appearance .sub-b { opacity: 1; }
.v-settings .group:has(.row-appearance) .row:last-child .r-t b { }

/* ---------- Sauvegarde Drive ---------- */
.d-body { padding: calc(14 * var(--d)) calc(22 * var(--d)) 0; }
.d-acc { font-size: calc(19 * var(--d)); font-weight: 500; }
.d-links { display: flex; gap: calc(18 * var(--d)); margin-top: calc(8 * var(--d)); color: var(--forest); font-size: calc(16 * var(--d)); font-weight: 600; }
.d-phase { position: relative; height: calc(22 * var(--d)); margin-top: calc(14 * var(--d)); font-size: calc(16 * var(--d)); }
.d-phase span { position: absolute; left: 0; opacity: 0; transition: opacity .2s; }
.d-phase .ph-ready { opacity: 1; }
.f-uploading .d-phase .ph-ready, .f-verifying .d-phase .ph-ready { opacity: 0; }
.f-uploading .d-phase .ph-up { opacity: 1; }
.f-verifying .d-phase .ph-ver { opacity: 1; }
.d-last { font-size: calc(14.5 * var(--d)); color: var(--muted); margin-top: calc(2 * var(--d)); opacity: 0; transition: opacity .4s; }
.f-backed .d-last { opacity: 1; }
.bar { height: calc(5 * var(--d)); border-radius: calc(3 * var(--d)); background: color-mix(in srgb, var(--forest) 20%, transparent); margin-top: calc(14 * var(--d)); overflow: hidden; opacity: 0; transition: opacity .3s; }
.bar i { display: block; height: 100%; width: 0; background: var(--forest); border-radius: calc(3 * var(--d)); transition: width 2.6s cubic-bezier(.4, 0, .3, 1); }
.f-uploading .bar, .f-verifying .bar { opacity: 1; }
.f-uploading .bar i { width: 62%; }
.f-verifying .bar i, .f-backed .bar i { width: 100%; }
.btn-backup { margin-top: calc(18 * var(--d)); height: calc(54 * var(--d)); border-radius: calc(27 * var(--d)); background: var(--forest); color: var(--on-forest); display: flex; align-items: center; justify-content: center; gap: calc(10 * var(--d)); font-size: calc(17.5 * var(--d)); font-weight: 600; }
.btn-backup svg { width: calc(22 * var(--d)); height: calc(22 * var(--d)); }
.sw { display: flex; justify-content: space-between; align-items: center; margin-top: calc(14 * var(--d)); font-size: calc(18 * var(--d)); }
.sw i { width: calc(50 * var(--d)); height: calc(30 * var(--d)); border-radius: calc(15 * var(--d)); background: var(--forest); position: relative; }
.sw i::after { content: ""; position: absolute; right: calc(4 * var(--d)); top: calc(4 * var(--d)); width: calc(22 * var(--d)); height: calc(22 * var(--d)); border-radius: 50%; background: var(--on-forest); }
.sel { margin-top: calc(16 * var(--d)); border: calc(1.5 * var(--d)) solid var(--outline); border-radius: calc(8 * var(--d)); padding: calc(8 * var(--d)) calc(14 * var(--d)) calc(9 * var(--d)); display: grid; gap: calc(1 * var(--d)); }
.sel small { font-size: calc(13 * var(--d)); color: var(--muted); } .sel b { font-size: calc(17 * var(--d)); font-weight: 400; }
.d-h { font-family: var(--serif); font-size: calc(22 * var(--d)); font-weight: 700; margin: calc(22 * var(--d)) 0 calc(10 * var(--d)); }
.copy { position: relative; background: var(--surface); border-radius: calc(18 * var(--d)); padding: calc(16 * var(--d)) calc(44 * var(--d)) calc(16 * var(--d)) calc(16 * var(--d)); display: grid; gap: calc(4 * var(--d)); opacity: 0; max-height: 0; transition: opacity .5s, max-height .5s; overflow: hidden; }
.copy b { font-size: calc(17.5 * var(--d)); font-weight: 500; } .copy small { font-size: calc(14.5 * var(--d)); color: var(--muted); line-height: 1.35; }
.copy .r-ch { position: absolute; right: calc(14 * var(--d)); top: 50%; translate: 0 -50%; width: calc(22 * var(--d)); height: calc(22 * var(--d)); color: var(--muted); }
.f-backed .copy { opacity: 1; max-height: calc(120 * var(--d)); }

/* ---------- Widgets ---------- */
.w-body { padding: calc(4 * var(--d)) calc(22 * var(--d)) 0; }
.w-help { font-size: calc(16.5 * var(--d)); line-height: 1.4; margin-top: calc(2 * var(--d)); }
.v-widgets h5 { font-family: var(--serif); font-size: calc(21 * var(--d)); font-weight: 700; margin: calc(18 * var(--d)) 0 calc(10 * var(--d)); }
.wg { border-radius: calc(24 * var(--d)); padding: calc(18 * var(--d)) calc(20 * var(--d)); display: grid; gap: calc(6 * var(--d)); }
.wg small { font-size: calc(13 * var(--d)); letter-spacing: .02em; }
.wg-fav { background: color-mix(in srgb, #e6c9a9 var(--mix), var(--surface)); }
.wg-fav b { font-family: var(--serif); font-size: calc(23 * var(--d)); font-weight: 650; margin-top: calc(6 * var(--d)); }
.wg-fav span { font-size: calc(17 * var(--d)); }
.wg-tasks { background: color-mix(in srgb, #cbff90 var(--mix), var(--surface)); }
.wg-tasks .cl { margin-top: calc(2 * var(--d)); }
.wg-tasks .cl li { margin-top: calc(12 * var(--d)); font-size: calc(18 * var(--d)); }
.wg-tasks .cl li i { width: calc(24 * var(--d)); height: calc(24 * var(--d)); border-color: var(--ink); }
.w-btn { margin-top: calc(12 * var(--d)); height: calc(52 * var(--d)); border-radius: calc(26 * var(--d)); background: var(--forest); color: var(--on-forest); display: grid; place-items: center; font-size: calc(17 * var(--d)); font-weight: 600; }

/* ---------- Éditeur ---------- */
.e-top { display: flex; align-items: center; height: calc(60 * var(--d)); padding: 0 calc(22 * var(--d)); gap: calc(22 * var(--d)); }
.e-top svg { width: calc(26 * var(--d)); height: calc(26 * var(--d)); }
.e-status { flex: 1; font-size: calc(17 * var(--d)); color: var(--muted); }
.e-title { position: relative; padding: calc(12 * var(--d)) calc(24 * var(--d)) 0; font-family: var(--serif); font-weight: 700; font-size: calc(31 * var(--d)); line-height: 1.2; min-height: calc(56 * var(--d)); }
.e-title .ph { position: absolute; left: calc(24 * var(--d)); top: calc(12 * var(--d)); transition: opacity .2s; }
.e-title .typed { vertical-align: top; }
.f-t-title .e-title .ph { opacity: 0; }
.f-t-title .tt { animation: reveal .9s steps(7, end) forwards; }
.e-pill { position: absolute; left: calc(24 * var(--d)); top: calc(152 * var(--d)); margin: 0; opacity: 0; transform: translateY(calc(-4 * var(--d))); transition: opacity .3s, transform .3s; }
.f-prio .e-pill { opacity: 1; transform: none; }
.e-body { position: absolute; left: calc(24 * var(--d)); right: calc(24 * var(--d)); top: calc(198 * var(--d)); font-size: calc(19 * var(--d)); }
.e-ph { transition: opacity .2s; }
.f-list .e-ph { opacity: 0; }
.e-list { list-style: none; padding: 0; margin-top: calc(-26 * var(--d)); opacity: 0; transition: opacity .3s; }
.f-list .e-list { opacity: 1; }
.e-list li { display: flex; align-items: center; gap: calc(14 * var(--d)); height: calc(52 * var(--d)); font-size: calc(19 * var(--d)); opacity: 0; transform: translateY(calc(6 * var(--d))); transition: opacity .35s, transform .35s; }
.f-list .e-list li { opacity: 1; transform: none; }
.f-list .e-list .r2 { transition-delay: .12s; } .f-list .e-list .r3 { transition-delay: .24s; } .f-list .e-list .add { transition-delay: .36s; }
.e-list li span { flex: 1; }
.e-list li svg { width: calc(22 * var(--d)); height: calc(22 * var(--d)); color: var(--ink); }
.cb { width: calc(24 * var(--d)); height: calc(24 * var(--d)); border: calc(2 * var(--d)) solid var(--outline); border-radius: calc(6 * var(--d)); position: relative; flex: none; transition: background-color .25s, border-color .25s; }
.f-c1 .r1 .cb, .f-c2 .r2 .cb { background: var(--forest); border-color: var(--forest); }
.f-c1 .r1 .cb::after, .f-c2 .r2 .cb::after { content: ""; position: absolute; left: calc(6.5 * var(--d)); top: calc(1.5 * var(--d)); width: calc(6 * var(--d)); height: calc(12 * var(--d)); border: solid var(--on-forest); border-width: 0 calc(2.4 * var(--d)) calc(2.4 * var(--d)) 0; transform: rotate(45deg); }
.f-c1 .r1 span, .f-c2 .r2 span { color: var(--muted); text-decoration: line-through; }
.e-list .add { color: var(--forest); font-weight: 600; font-size: calc(18 * var(--d)); }
.e-list .add svg { width: calc(20 * var(--d)); height: calc(20 * var(--d)); color: var(--forest); }
.e-bar { position: absolute; left: calc(16 * var(--d)); right: calc(16 * var(--d)); bottom: calc(16 * var(--d)); background: var(--surface); border-radius: calc(26 * var(--d)); padding: calc(12 * var(--d)) calc(14 * var(--d)) calc(10 * var(--d)); }
.bar1 { display: flex; align-items: center; gap: calc(26 * var(--d)); padding: calc(4 * var(--d)) calc(10 * var(--d)) calc(10 * var(--d)); color: var(--muted); font-size: calc(20 * var(--d)); max-height: calc(50 * var(--d)); transition: max-height .3s, opacity .3s, padding .3s; overflow: hidden; }
.bar1 b { font-weight: 800; font-family: var(--sans); } .bar1 em { font-family: var(--serif); font-weight: 600; }
.bar1 .sp { flex: 1; } .bar1 svg { width: calc(24 * var(--d)); height: calc(24 * var(--d)); }
.f-list .bar1 { max-height: 0; opacity: 0; padding-block: 0; }
.bar2 { display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; color: var(--forest); font-weight: 500; }
.bar2 .b { display: grid; justify-items: center; gap: calc(4 * var(--d)); padding: calc(6 * var(--d)) 0; position: relative; }
.bar2 .b svg { width: calc(26 * var(--d)); height: calc(26 * var(--d)); }
.bar2 small { font-size: calc(15 * var(--d)); }
.b-list .l-b { position: absolute; bottom: calc(6 * var(--d)); opacity: 0; } .b-list .l-a { transition: opacity .2s; }
.f-list .b-list .l-a { opacity: 0; } .f-list .b-list .l-b { opacity: 1; }

.scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, .45); opacity: 0; pointer-events: none; }
.f-sheet-prio .scrim, .f-sheet-color .scrim, .f-sheet-rem .scrim { opacity: 1; }
.sheet { position: absolute; left: 0; right: 0; bottom: 0; background: var(--bg); border-radius: calc(32 * var(--d)) calc(32 * var(--d)) 0 0; padding: calc(12 * var(--d)) calc(24 * var(--d)) calc(24 * var(--d)); transform: translateY(104%); }
.f-coral .sheet { background: color-mix(in srgb, #f28b83 11%, var(--bg)); }
.f-sheet-prio .s-prio, .f-sheet-color .s-color, .f-sheet-rem .s-rem { transform: none; }
.grab { display: block; width: calc(40 * var(--d)); height: calc(5 * var(--d)); border-radius: calc(3 * var(--d)); background: var(--outline); margin: 0 auto calc(22 * var(--d)); opacity: .8; }
.sheet h6 { font-family: var(--serif); font-size: calc(24 * var(--d)); font-weight: 650; margin-bottom: calc(14 * var(--d)); }
.sheet h6.plain { font-family: var(--sans); font-weight: 400; }
.s-sub { font-size: calc(17 * var(--d)); font-weight: 650; margin: calc(4 * var(--d)) 0 calc(8 * var(--d)); }
.o { display: flex; align-items: center; gap: calc(18 * var(--d)); height: calc(56 * var(--d)); font-size: calc(19 * var(--d)); color: var(--ink); }
.o svg { width: calc(26 * var(--d)); height: calc(26 * var(--d)); color: var(--muted); }
.o i { width: calc(30 * var(--d)); height: calc(30 * var(--d)); border-radius: 50%; border: calc(1.5 * var(--d)) solid var(--outline); flex: none; }
.o .bang { width: calc(26 * var(--d)); text-align: center; font-size: calc(24 * var(--d)); font-weight: 800; color: var(--muted); }
.o span { flex: 1; }
.o .o-ck { width: calc(24 * var(--d)); height: calc(24 * var(--d)); color: var(--forest); opacity: 0; }
.o-normal .o-ck { opacity: 1; } .o-normal { color: var(--forest); } .o-normal svg:first-child { color: var(--forest); }
.f-prio .o-normal { color: var(--ink); } .f-prio .o-normal .o-ck { opacity: 0; } .f-prio .o-normal svg:first-child { color: var(--muted); }
.f-prio .o-urgent .o-ck { opacity: 1; } .f-prio .o-urgent { color: var(--forest); }
.o-paper .o-ck { opacity: 1; } .o-paper { color: var(--forest); }
.f-coral .o-paper { color: var(--ink); } .f-coral .o-paper .o-ck { opacity: 0; }
.f-coral .o-coral .o-ck { opacity: 1; } .f-coral .o-coral { color: var(--forest); }
.s-color { padding-bottom: calc(8 * var(--d)); }

.s-rem { padding-bottom: calc(20 * var(--d)); }
.chips { display: flex; gap: calc(10 * var(--d)); margin-bottom: calc(12 * var(--d)); }
.chip { height: calc(38 * var(--d)); padding: 0 calc(16 * var(--d)); border-radius: calc(12 * var(--d)); border: calc(1.5 * var(--d)) solid var(--line); display: inline-flex; align-items: center; font-size: calc(16 * var(--d)); font-weight: 500; }
.f-rem-tomorrow .chip-tom { background: color-mix(in srgb, var(--forest) 18%, transparent); border-color: var(--forest); color: var(--forest); }
.rr { display: flex; align-items: center; gap: calc(18 * var(--d)); height: calc(62 * var(--d)); }
.rr svg { width: calc(26 * var(--d)); height: calc(26 * var(--d)); color: var(--muted); }
.rr span { display: grid; gap: calc(1 * var(--d)); position: relative; }
.rr b { font-size: calc(19 * var(--d)); font-weight: 400; } .rr small { font-size: calc(16 * var(--d)); color: var(--muted); }
.rr .d-b { position: absolute; left: 0; bottom: 0; opacity: 0; transition: opacity .25s; }
.f-rem-tomorrow .rr .d-b { opacity: 1; }
.rsel { margin: calc(8 * var(--d)) 0 calc(14 * var(--d)); border: calc(1.5 * var(--d)) solid var(--outline); border-radius: calc(8 * var(--d)); padding: calc(8 * var(--d)) calc(14 * var(--d)) calc(9 * var(--d)); display: grid; }
.rsel small { font-size: calc(13 * var(--d)); color: var(--muted); } .rsel b { font-size: calc(18 * var(--d)); font-weight: 650; }
.rem-save { height: calc(54 * var(--d)); border-radius: calc(27 * var(--d)); display: grid; place-items: center; font-size: calc(17 * var(--d)); font-weight: 500; background: color-mix(in srgb, var(--ink) 12%, transparent); color: var(--muted); }
.f-rem-tomorrow .rem-save { background: var(--forest); color: var(--on-forest); font-weight: 600; }

.menu { position: absolute; right: calc(12 * var(--d)); top: calc(46 * var(--d)); width: calc(330 * var(--d)); background: color-mix(in srgb, var(--forest) 9%, var(--bg)); border-radius: calc(12 * var(--d)); padding: calc(8 * var(--d)) 0; box-shadow: 0 calc(8 * var(--d)) calc(24 * var(--d)) rgba(0, 0, 0, .28); opacity: 0; transform: scale(.94) translateY(calc(-6 * var(--d))); transform-origin: top right; pointer-events: none; }
.f-menu .menu { opacity: 1; transform: none; }
.mi { display: flex; align-items: center; gap: calc(22 * var(--d)); height: calc(52 * var(--d)); padding: 0 calc(22 * var(--d)); font-size: calc(18 * var(--d)); }
.mi svg { width: calc(24 * var(--d)); height: calc(24 * var(--d)); color: var(--muted); }
.toast { position: absolute; left: 50%; bottom: calc(40 * var(--d)); translate: -50% 0; background: #2f312c; color: #f4f2ea; padding: calc(13 * var(--d)) calc(22 * var(--d)); border-radius: calc(14 * var(--d)); font-size: calc(16 * var(--d)); opacity: 0; transform: translateY(calc(10 * var(--d))); transition: opacity .3s, transform .3s; white-space: nowrap; }
.f-rem-saved .toast { opacity: 1; transform: none; }
.f-toast-off .toast { opacity: 0; }

/* ---------- Toucher ---------- */
.tap { position: absolute; z-index: 50; width: calc(44 * var(--d)); height: calc(44 * var(--d)); margin: calc(-22 * var(--d)) 0 0 calc(-22 * var(--d)); border-radius: 50%; background: color-mix(in srgb, var(--forest) 30%, transparent); border: calc(2 * var(--d)) solid var(--forest); opacity: 0; pointer-events: none; transition: none !important; }
.tap.go { animation: tap .65s ease-out; }
@keyframes tap { 0% { opacity: .95; transform: scale(.4); } 70% { opacity: .7; transform: scale(1); } 100% { opacity: 0; transform: scale(1.25); } }

/* ---------- Légende et commandes (hors téléphone) ---------- */
.mock-meta { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 18px; }
.mock-caption { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 28px; font-weight: 650; font-size: 1.05rem; text-align: center; }
.cap-text { transition: opacity .25s; }
.mock-caption.is-swap .cap-text { opacity: 0; }
.cap-pro { font-size: .72rem; font-weight: 700; letter-spacing: .04em; padding: 2px 8px; border-radius: 999px; background: var(--soon-bg); color: var(--soon-ink); }
.mock-ctrl { display: flex; align-items: center; gap: 14px; }
.dots { display: inline-flex; gap: 7px; }
.dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--line); transition: background-color .3s, transform .3s; }
.dots i.on { background: var(--forest); transform: scale(1.25); }
.mock-pause { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: var(--ink); display: grid; place-items: center; cursor: pointer; padding: 0; }
.mock-pause:hover { background: var(--surface); }
.mock-pause:focus-visible { outline: 3px solid var(--forest); outline-offset: 2px; }
.mock-pause svg { width: 16px; height: 16px; }
.mock-pause .i-resume, .mock-pause[aria-pressed="true"] .i-pause { display: none; }
.mock-pause[aria-pressed="true"] .i-resume { display: block; }

@media (prefers-reduced-motion: reduce) {
  .phone-screen, .phone-screen * { transition: none !important; animation: none !important; }
  .mock-pause, .dots { display: none; }
}