/* La coque de l'équipe, calquée sur Folks.app : foncé ou clair, un accent au choix, le rouge pour l'alerte. */
:root { --accent: #3DDC84; --on-accent: #0A0A09; --alert: #FF3D3D; --signed: #3DDC84; --in-validation: #FF6A2B; }
:root[data-accent="orange"] { --accent: #FF6A2B; }
:root[data-accent="rose"] { --accent: #FF3D81; }
:root[data-accent="violet"] { --accent: #9A6BFF; }
:root[data-accent="bleu"] { --accent: #2E9BFF; }
:root[data-accent="jaune"] { --accent: #FFD60A; }

body.notion {
  --bg: #E9E8E3;
  --panel: #FFFFFF;
  --raise: #F2F1EE;
  --mute: #5C5B55;
  --tuile: rgba(17, 17, 16, .055);
  --tuile-2: rgba(17, 17, 16, .1);
  --ink: #111110;
  --ink-60: #5C5B55;
  --ink-40: #85847D;
  --side-ink: #3B3A36;
  --blue: var(--accent);
  --btn: var(--accent);
  --btn-ink: var(--on-accent);
  --font: 'Radio Canada', system-ui, sans-serif;
  background: var(--bg);
}
:root[data-theme="dark"] { color-scheme: dark; }
:root[data-theme="dark"] body.notion {
  --bg: #000000;
  --panel: #111110;
  --raise: #151514;
  --mute: #A9A8A1;
  --tuile: rgba(242, 241, 238, .05);
  --tuile-2: rgba(242, 241, 238, .1);
  --ink: #F6F5F1;
  --ink-60: #A9A8A1;
  --ink-40: #7A7973;
  --side-ink: #C9C8C1;
  --n-rgb: 242 241 238;
  --paper: #111110;
  --soft: #151514;
  --card: #111110;
  --ph: #272723;
  --line-10: #2C2C28;
  --hover: rgba(242, 241, 238, .08);
  --hover-soft: rgba(242, 241, 238, .04);
  --m: rgba(242, 241, 238, .1);
}

/* Le fond au choix : noir profond par défaut, comme le mode noir de Folks.app. */
:root[data-theme="dark"][data-fond="mat"] body.notion {
  --bg: #161614;
  --panel: #1F1F1C;
  --raise: #2A2A26;
  --paper: #1F1F1C;
  --soft: #2A2A26;
  --card: #1F1F1C;
  --line-10: #363631;
}
:root[data-theme="dark"][data-fond="grain"] body.notion { background-image: url(/fond-grain.svg); }
:root[data-theme="dark"][data-fond="trame"] body.notion { background-image: radial-gradient(rgb(255 255 255 / .13) 1px, transparent 1.3px); background-size: 22px 22px; }

/* Les bulles au-dessus du fond : graphite par défaut, ou une couleur au choix. */
:root[data-theme="dark"][data-bulle="nuit"] body.notion { --tuile: rgb(64 104 200 / .17); --tuile-2: rgb(64 104 200 / .3); --glass: rgb(64 104 200 / .13); --glass-strong: rgb(16 24 46 / .9); }
:root[data-theme="dark"][data-bulle="prune"] body.notion { --tuile: rgb(130 70 190 / .17); --tuile-2: rgb(130 70 190 / .3); --glass: rgb(130 70 190 / .13); --glass-strong: rgb(30 18 46 / .9); }
:root[data-theme="dark"][data-bulle="sapin"] body.notion { --tuile: rgb(40 140 100 / .17); --tuile-2: rgb(40 140 100 / .3); --glass: rgb(40 140 100 / .13); --glass-strong: rgb(12 36 28 / .9); }
:root[data-theme="dark"][data-bulle="bordeaux"] body.notion { --tuile: rgb(170 50 70 / .17); --tuile-2: rgb(170 50 70 / .3); --glass: rgb(170 50 70 / .13); --glass-strong: rgb(44 14 22 / .9); }
:root[data-theme="dark"][data-bulle="mix"] :is(.f-quick > *, .f-top-r > *, button.f-sq.plain):nth-child(5n + 1) { --tuile: rgb(64 104 200 / .2); --tuile-2: rgb(64 104 200 / .34); }
:root[data-theme="dark"][data-bulle="mix"] :is(.f-quick > *, .f-top-r > *, button.f-sq.plain):nth-child(5n + 2) { --tuile: rgb(130 70 190 / .2); --tuile-2: rgb(130 70 190 / .34); }
:root[data-theme="dark"][data-bulle="mix"] :is(.f-quick > *, .f-top-r > *, button.f-sq.plain):nth-child(5n + 3) { --tuile: rgb(40 140 100 / .2); --tuile-2: rgb(40 140 100 / .34); }
:root[data-theme="dark"][data-bulle="mix"] :is(.f-quick > *, .f-top-r > *, button.f-sq.plain):nth-child(5n + 4) { --tuile: rgb(170 50 70 / .2); --tuile-2: rgb(170 50 70 / .34); }
:root[data-theme="dark"][data-bulle="mix"] :is(.f-quick > *, .f-top-r > *, button.f-sq.plain):nth-child(5n + 5) { --tuile: rgb(170 110 50 / .2); --tuile-2: rgb(170 110 50 / .34); }

/* Les étiquettes de Notion, avec leurs teintes sombres */
:root[data-theme="dark"] body.notion .n-tone-default { --n-bg: #373737; --n-fg: #D4D4D4; --n-dot: #9B9B9B; }
:root[data-theme="dark"] body.notion .n-tone-gray { --n-bg: #454545; --n-fg: #D4D4D4; --n-dot: #9B9B9B; }
:root[data-theme="dark"] body.notion .n-tone-brown { --n-bg: #4B3A30; --n-fg: #E2C9B5; --n-dot: #B68965; }
:root[data-theme="dark"] body.notion .n-tone-orange { --n-bg: #5A3A1E; --n-fg: #F2C8A0; --n-dot: #D6884A; }
:root[data-theme="dark"] body.notion .n-tone-yellow { --n-bg: #574619; --n-fg: #F0DA97; --n-dot: #CBA03D; }
:root[data-theme="dark"] body.notion .n-tone-green { --n-bg: #24432F; --n-fg: #A9DDBD; --n-dot: #4EA374; }
:root[data-theme="dark"] body.notion .n-tone-blue { --n-bg: #1F3D58; --n-fg: #A8D0F0; --n-dot: #4C93CF; }
:root[data-theme="dark"] body.notion .n-tone-purple { --n-bg: #3C2C50; --n-fg: #D6BDEE; --n-dot: #B577D6; }
:root[data-theme="dark"] body.notion .n-tone-pink { --n-bg: #4F2A40; --n-fg: #F0BAD6; --n-dot: #D669A0; }
:root[data-theme="dark"] body.notion .n-tone-red { --n-bg: #57292A; --n-fg: #F4B9B3; --n-dot: #E56458; }
:root[data-theme="dark"] body.notion .n-color-gray_background { background: #373737; }
:root[data-theme="dark"] body.notion .n-color-brown_background { background: #4B3A30; }
:root[data-theme="dark"] body.notion .n-color-orange_background { background: #5A3A1E; }
:root[data-theme="dark"] body.notion .n-color-yellow_background { background: #574619; }
:root[data-theme="dark"] body.notion .n-color-green_background { background: #24432F; }
:root[data-theme="dark"] body.notion .n-color-blue_background { background: #1F3D58; }
:root[data-theme="dark"] body.notion .n-color-purple_background { background: #3C2C50; }
:root[data-theme="dark"] body.notion .n-color-pink_background { background: #4F2A40; }
:root[data-theme="dark"] body.notion .n-color-red_background { background: #57292A; }

/* Barre du haut */
.f-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding: 0 6px; }
.f-top-l, .f-top-c, .f-top-r { display: flex; align-items: center; gap: 8px; min-width: 0; }
.f-top-r { justify-content: flex-end; }
.f-logo { display: block; margin-right: 6px; flex: none; }
.f-logo img { display: block; filter: brightness(0); }
:root[data-theme="dark"] .f-logo img { filter: brightness(0) invert(1); }
.f-logo-word { display: none !important; height: 24px; width: auto; margin: 0 6px 0 8px; transform-origin: 12% 60%; transition: transform .25s cubic-bezier(.3, 1.6, .5, 1); }
@media (min-width: 1000px) {
  .f-logo-mark { display: none !important; }
  .f-logo-word { display: block !important; }
  .f-logo:hover .f-logo-word { transform: scale(1.06) rotate(-2deg); }
}
@media (prefers-reduced-motion: reduce) { .f-logo-word { transition: none; } }
.f-rond { display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: var(--tuile); color: var(--ink); cursor: pointer; text-decoration: none; transition: transform .15s, background .15s; }
.f-rond:hover { background: var(--tuile-2); transform: scale(1.05); }
.f-rond:disabled { opacity: .3; transform: none; cursor: default; }
.f-rond.nu { width: 34px; height: 34px; background: transparent; color: var(--mute); }
.f-rond.nu:hover { background: var(--tuile); color: var(--ink); }
.f-rond.big { width: 48px; height: 48px; }
.f-rond.on { color: var(--accent); background: var(--panel); }
.f-rond .n-g { width: 20px; height: 20px; }
.f-rond.nu .n-g { width: 17px; height: 17px; }
.f-i { display: block; width: 20px; height: 20px; flex: none; }
.f-i-text { font: 600 10.500px var(--font); }
.f-dot { display: block; width: 18px; height: 18px; border-radius: 50%; background: var(--accent); }
.f-me .n-avatar { width: 34px; height: 34px; font-size: 14px; border-radius: 50%; }
button.f-search { display: flex; align-items: center; gap: 10px; width: clamp(280px, 34vw, 480px); height: 48px; padding: 0 12px 0 16px; border: 0; border-radius: 99px; background: var(--tuile); color: var(--mute); font: 500 14.500px var(--font); cursor: pointer; transition: background .15s, box-shadow .15s; }
button.f-search:hover { background: var(--tuile-2); box-shadow: inset 0 0 0 1px var(--line-10); }
.f-search span { flex: 1; overflow: hidden; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.f-search kbd { padding: 2px 7px; border-radius: 7px; background: var(--tuile); font: 600 11.500px var(--font); }
.f-search .n-g { width: 18px; height: 18px; }
button.f-create { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 16px 0 12px; margin-right: 4px; border: 0; border-radius: 99px; background: var(--accent); color: var(--on-accent); font: 700 14px var(--font); cursor: pointer; transition: transform .15s; }
button.f-create:hover { transform: scale(1.04); }
.f-create .n-g { width: 17px; height: 17px; stroke-width: 1.8; }
/* Le petit lecteur Spotify : réduit, il reste chargé pour que la musique continue. */
.f-music { position: fixed; top: 72px; right: 16px; z-index: 6; width: 320px; padding: 6px 10px 10px; border-radius: 18px; background: var(--glass-strong); color: var(--ink); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--glass-edge), var(--glass-drop); }
.f-music:not(.open) { visibility: hidden; pointer-events: none; }
.f-music-head { display: flex; align-items: center; gap: 2px; min-height: 36px; padding-left: 2px; }
.f-music-head > .f-i { width: 16px; height: 16px; margin-right: 6px; }
.f-music-head strong { flex: 1; font-size: 13px; }
.f-music-head .f-rond { width: 30px; height: 30px; }
.f-music-head .f-rond .f-i { width: 15px; height: 15px; }
.f-music-help { margin: 0; color: var(--ink-60); font-size: 12px; line-height: 1.35; }
.f-music form:not([hidden]) { display: grid; gap: 8px; padding-bottom: 4px; }
.f-music form + .f-music-frame { margin-top: 6px; }
.f-music-frame { display: block; width: 100%; height: 152px; border: 0; border-radius: 12px; }
.f-music-btn { position: relative; }
.f-music-btn.live::after { content: ''; position: absolute; top: 7px; right: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--bg); }
@media (max-width: 999px) {
  .f-music-btn { display: none; }
  .f-music { top: 66px; left: 8px; right: 8px; width: auto; z-index: 5; }
}
.f-look { padding: 6px; }
button.f-bulle { box-shadow: inset 0 0 0 1px rgb(255 255 255 / .16); }
.f-bulle.graphite { background: #262624; }
.f-bulle.nuit { background: #1F3468; }
.f-bulle.prune { background: #43246A; }
.f-bulle.sapin { background: #144A36; }
.f-bulle.bordeaux { background: #5A1A26; }
.f-bulle.mix { background: conic-gradient(#1F3468 0 25%, #43246A 0 50%, #144A36 0 75%, #5A1A26 0); }
.f-fonds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 4px; }
button.f-fond { display: grid; gap: 5px; padding: 0; border: 0; background: none; color: var(--ink); font: 500 12px/1.2 var(--font); text-align: left; cursor: pointer; }
.f-fond i { display: block; height: 46px; border-radius: 10px; background: #000; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .16); }
.f-fond.mat i { background: #161614; }
.f-fond.grain i { background: #000 url(/fond-grain.svg); }
.f-fond.trame i { background: #000 radial-gradient(rgb(255 255 255 / .22) 1px, transparent 1.3px) 0 0 / 10px 10px; }
button.f-fond:hover i { box-shadow: inset 0 0 0 1px rgb(255 255 255 / .4); }
button.f-fond[aria-pressed="true"] i { box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--ink); }
.f-swatches { display: grid; grid-template-columns: repeat(6, 34px); gap: 6px; padding: 4px; }
button.f-swatch { width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; transition: transform .15s; }
button.f-swatch:hover { transform: scale(1.12); }
button.f-swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--ink); }
.n-menu { background: var(--raise); color: var(--ink); }

/* La bibliothèque */
body.notion .side { background: var(--panel); border-right: 0; color: var(--side-ink); }
.f-rail-open { margin: 10px auto 6px; width: 40px !important; height: 40px !important; flex: none; }
.f-rail-list { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none; display: grid; align-content: start; justify-items: center; gap: 6px; padding: 2px 0 8px; }
.f-rail-i { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 13px; background: var(--tuile); color: var(--mute); text-decoration: none; font-size: 22px; transition: transform .15s, background .15s; }
.f-rail-i:hover { transform: scale(1.06); background: var(--tuile-2); color: var(--ink); }
.f-rail-i.on { background: var(--accent); color: var(--on-accent); }
.f-rail-i .s-img { width: 26px; height: 26px; font-size: 22px; line-height: 26px; }
.f-rail-i .n-g { width: 22px; height: 22px; }
body.side-rail:not(.side-phone) .side .s-faces { display: grid; justify-items: center; gap: 6px; padding: 8px 0 10px; flex: none; }
body.notion .n-top { background: var(--card); }
.n-page { background: var(--card); }

/* Titres encadrés à l'identité du site : Golos Text 800 en capitales, orange pastel et encre. */
.n-banner.flat { background: #FFD0A9; color: #111110; border-radius: 18px; }
.n-banner.flat.alt { background: var(--raise); color: var(--ink); }
.n-toast { background: var(--raise); color: var(--ink); }
.n-toast .link { color: var(--ink); font-weight: 600; text-decoration: underline; }

/* Accueil */
.shell:has(.f-home) .n-top { display: none; }
body.notion .main:not(.notion):has(.f-home) { max-width: none; padding: 26px clamp(16px, 2.600vw, 36px) 56px; display: block; }
.f-home { font-family: var(--font); }
.f-home > * + * { margin-top: 22px; }
.f-hello { display: flex; align-items: center; justify-content: space-between; gap: 14px 24px; flex-wrap: wrap; }
body.notion .f-hello h1 { margin: 0; font: 600 22px/1.1 var(--font); letter-spacing: -.005em; }
body.notion .f-hello h1::first-letter { text-transform: uppercase; }
.f-hello-side { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.f-hello .face .n-avatar { width: 38px; height: 38px; font-size: 15px; }
.face-count { background: var(--accent); color: var(--on-accent); }
.f-seg { display: inline-flex; padding: 3px; border-radius: 99px; background: var(--tuile); }
.f-seg button { padding: 6px 13px; border: 0; border-radius: 99px; background: transparent; color: var(--mute); font: 600 13px var(--font); cursor: pointer; }
.f-seg button[aria-pressed="true"] { background: var(--ink); color: var(--panel); }

.f-lines, .f-slot { display: grid; gap: 4px; }
.f-slot:empty { display: none; }
.f-ln { border-radius: 14px; background: var(--tuile); transition: background .15s; }
.f-ln:hover, .f-ln.on { background: var(--tuile-2); }
.f-sum { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 6px 14px 6px 7px; list-style: none; cursor: default; }
summary.f-sum { cursor: pointer; }
summary.f-sum::-webkit-details-marker { display: none; }
.f-tile { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 11px; background: var(--tuile); color: var(--ink); }
.f-ln.is-alert .f-tile { background: var(--alert); color: #fff; }
.f-ln.is-accent .f-tile { background: var(--accent); color: var(--on-accent); }
.f-lbl { flex: none; width: 176px; font: 600 14.500px var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.f-num { flex: none; min-width: 24px; font: 600 18px var(--font); font-variant-numeric: tabular-nums; }
.f-txt { flex: 1; min-width: 0; color: var(--mute); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.f-car { flex: none; color: var(--mute); transition: transform .18s; }
.f-ln.on .f-car { transform: rotate(90deg); }
.f-ln.is-alert .f-num { color: var(--alert); }
.f-det { display: grid; gap: 2px; padding: 0 8px 10px; animation: f-rise .12s ease both; }
.f-dr { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 6px 8px; border: 0; border-radius: 9px; background: transparent; color: inherit; font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
div.f-dr { cursor: default; }
.f-dr:hover { background: var(--tuile); }
/* Un menu ouvert passe devant le lecteur et le dock du téléphone. */
.n-menu { z-index: 40; }
/* Le ticket de statut : on le change sur place. */
.f-ticket { position: relative; flex: none; display: inline-flex; max-width: 100%; padding: 0; border: 0; border-radius: 999px; background: none; color: inherit; font: inherit; cursor: pointer; }
.f-ticket::before { content: ''; position: absolute; inset: -10px -4px; }
.f-ticket .n-pill { max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.f-ticket:hover .n-pill, .f-ticket:focus-visible .n-pill { box-shadow: 0 0 0 2px var(--accent); }
.f-ticket:focus-visible { outline: 0; }
.f-wh { flex: none; width: 58px; color: var(--mute); font-size: 12.500px; font-variant-numeric: tabular-nums; }
.f-wh.late { color: var(--alert); font-weight: 600; }
.f-dt { flex: 1; min-width: 0; display: grid; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.f-dt strong { font-weight: 600; font-size: 14px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.f-dt small { color: var(--mute); font-size: 12.500px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.f-faces { display: inline-flex; flex: none; }
.f-faces .n-avatar { width: 24px; height: 24px; margin-left: -5px; font-size: 10px; border-radius: 50%; box-shadow: 0 0 0 2px var(--panel); }
.f-amount { flex: none; font: 600 14px var(--font); }
.f-amount.none { color: var(--mute); font-weight: 600; }
.f-foot { padding: 8px 8px 2px; }
.f-foot .link { color: inherit; }
.f-all { display: inline-block; padding: 8px; color: var(--mute); font-size: 13px; font-weight: 600; }
.f-mini-play { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: var(--on-accent); }
.f-mini-play .f-i { width: 13px; height: 13px; }
.f-det .card { background: var(--tuile); color: inherit; border: 0; }
.f-det .stack { padding: 4px 0; }
.f-pipe:empty { display: none; }

/* La jauge */
.pipe-bar { background: var(--tuile-2); }
.pipe-seg.signed, .pipe-chip.signed { background: var(--signed); }
.pipe-seg.near, .pipe-chip.near { background: var(--in-validation); }

/* Étagère et playlist */
.f-sec { display: grid; gap: 12px; }
body.notion .f-sec h2 { margin: 0; font: 600 16px/1.2 var(--font); }
.f-films { display: grid; gap: 26px; }
.f-films:empty { display: none; }
.f-shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; }
.f-card { display: grid; gap: 4px; align-content: start; min-width: 0; padding: 10px; border: 0; border-radius: 14px; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: background .15s; }
.f-card:hover, .f-card.on { background: var(--tuile); }
.f-card strong { font-size: 14px; font-weight: 700; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.f-card small { color: var(--mute); font-size: 12.500px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.f-thumb { position: relative; display: block; aspect-ratio: 1; margin-bottom: 6px; overflow: hidden; border-radius: 10px; background: var(--raise); }
.f-thumb img, .f-thumb video { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.f-thumb-none { display: grid; place-items: center; width: 100%; height: 100%; color: var(--mute); }
.f-play { position: absolute; right: 8px; bottom: 8px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--accent); color: var(--on-accent); opacity: 0; transform: translateY(6px); transition: opacity .18s, transform .18s; }
.f-card:hover .f-play, .f-card:focus-visible .f-play { opacity: 1; transform: none; }
.f-sec-head { display: flex; align-items: center; gap: 14px; }
button.f-bigplay { display: grid; place-items: center; flex: none; width: 52px; height: 52px; padding: 0; border: 0; border-radius: 50%; background: var(--accent); color: var(--on-accent); cursor: pointer; transition: transform .15s; }
button.f-bigplay:hover { transform: scale(1.07); }
.f-pl { display: grid; }
.f-tr { display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 6px 8px; border-radius: 10px; }
.f-tr:hover, .f-tr.on { background: var(--tuile); }
.f-tr .n-pill { flex: none; }
button.f-ix { display: grid; place-items: center; flex: none; width: 26px; height: 26px; padding: 0; border: 0; background: none; color: var(--mute); font: 600 13px var(--font); cursor: pointer; }
.f-ix-p { display: none; color: var(--ink); }
.f-ix-p .f-i { width: 15px; height: 15px; }
.f-tr:hover .f-ix-n { display: none; }
.f-tr:hover .f-ix-p { display: block; }
.f-tr.on .f-ix-n { color: var(--accent); }
.f-tr-thumb { display: block; flex: none; width: 44px; height: 44px; overflow: hidden; border-radius: 7px; background: var(--raise); }
.f-tr-thumb img, .f-tr-thumb video { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.f-tr-thumb .f-i { width: 16px; height: 16px; }
.f-acts { display: flex; gap: 2px; flex: none; }
.f-ib, button.f-ib { display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--mute); cursor: pointer; transition: background .15s; }
.f-ib:hover { background: var(--tuile-2); color: var(--ink); }
.f-ib .f-i, .f-ib .n-g { width: 17px; height: 17px; }

/* Le panneau du film */
.f-ant { display: flex; flex-direction: column; gap: 12px; min-height: 0; padding: 12px; overflow-y: auto; border-radius: 12px; background: var(--panel); font-family: var(--font); scrollbar-width: thin; }
.f-ant-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.f-ant .f-seg button { padding: 6px 11px; font-size: 12.500px; }
.f-stage { position: relative; flex: none; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 12px; background: #000; }
.f-stage video, .f-stage img, .f-stage iframe { display: block; width: 100%; height: 100%; border: 0; object-fit: contain; }
.f-stage-none { display: grid; place-content: center; justify-items: center; gap: 10px; height: 100%; padding: 24px; background: var(--raise); color: var(--mute); text-align: center; font-size: 14px; }
.f-ant-info { display: grid; gap: 10px; }
.f-ant-title { font: 600 16px/1.2 var(--font); text-decoration: none; }
.f-ant-sub { color: var(--mute); font-size: 13px; }
.f-ant-pills { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.f-decide { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
button.f-ok, button.f-ko { display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: 1; height: 42px; padding: 0 14px; border: 0; border-radius: 99px; font: 700 14px var(--font); cursor: pointer; transition: transform .15s; }
button.f-ok { background: var(--accent); color: var(--on-accent); }
button.f-ko { background: var(--tuile); color: var(--ink); }
button.f-ok:hover, button.f-ko:hover { transform: scale(1.03); }
.f-queue { display: grid; gap: 2px; margin-top: 6px; }
.f-queue-t { margin-bottom: 4px; color: var(--mute); font-size: 12px; font-weight: 600; }
button.f-q { display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px; border: 0; border-radius: 9px; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
button.f-q:hover { background: var(--tuile); }

/* Le lecteur du bas */
.f-lec { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr); align-items: center; gap: 12px; padding: 8px 12px; border-radius: 12px; background: var(--panel); font-family: var(--font); }
.f-lec-info { display: flex; align-items: center; gap: 10px; min-width: 0; }
.f-lec-mid { display: grid; gap: 2px; justify-items: center; min-width: 0; }
.f-lec-btns { display: flex; align-items: center; gap: 6px; }
button.f-lec-play { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: var(--accent); color: var(--on-accent); cursor: pointer; transition: transform .15s; }
button.f-lec-play:hover { transform: scale(1.07); }
button.f-lec-play:disabled { background: var(--tuile); color: var(--mute); transform: none; cursor: default; }
.f-lec-play .f-i { width: 16px; height: 16px; }
.f-lec-line { display: flex; align-items: center; gap: 10px; width: 100%; }
button.f-sillon { flex: 1; display: block; height: 4px; padding: 0; border: 0; border-radius: 4px; background: var(--tuile-2); overflow: hidden; cursor: pointer; }
button.f-sillon i { display: block; width: 0; height: 100%; background: var(--accent); }
.f-lec-time { flex: none; min-width: 74px; color: var(--mute); font-size: 11.500px; font-variant-numeric: tabular-nums; text-align: right; }
.f-lec-panel { justify-self: end; }

/* Les petites animations, sur les vrais éléments seulement */
@keyframes f-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes f-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.f-home > * { animation: f-rise .12s ease both; }
.f-lines > * { animation: f-rise .12s ease both; }
.main.f-wait > * { opacity: .55; transition: opacity .15s; }
/* Une mise à jour sur place ne rejoue pas l'arrivée de la page. */
.f-still .f-home > *, .f-still .f-lines > *, .f-still .f-sq-panel, .f-still .pipe-seg { animation: none; }
.f-lines > :nth-child(2) { animation-delay: .03s; } .f-lines > :nth-child(3) { animation-delay: .06s; } .f-lines > :nth-child(4) { animation-delay: .09s; } .f-lines > :nth-child(5) { animation-delay: .12s; } .f-lines > :nth-child(n+6) { animation-delay: .15s; }
body:not(.f-playing) .f-stage:has(.f-stage-none, video) { animation: f-float 5s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .f-home > *, .f-lines > *, .f-det, .f-stage, body:not(.f-playing) .f-stage:has(.f-stage-none, video) { animation: none; } }

/* Ordinateur : tout tient dans l'écran, seuls les panneaux défilent */
@media (min-width: 1000px) {
  body.notion { display: grid; height: 100vh; height: 100dvh; overflow: hidden; padding: 0 8px 8px; column-gap: 8px; row-gap: 8px; grid-template-columns: var(--lib) minmax(0, 1fr) var(--ant); grid-template-rows: 64px minmax(0, 1fr) auto; grid-template-areas: "haut haut haut" "biblio centre panneau" "lecteur lecteur lecteur"; --lib: var(--side-w, 270px); --ant: 0px; }
  body.notion.side-rail { --lib: 72px; }
  .f-top { grid-area: haut; }
  body.notion .side { position: relative; inset: auto; grid-area: biblio; width: auto; height: auto; min-height: 0; border-radius: 12px; z-index: 1; }
  body.side-rail .side { align-items: stretch; }
  body.notion .shell { grid-area: centre; margin-left: 0; min-width: 0; overflow-y: auto; border-radius: 12px; background: var(--card); scrollbar-width: thin; }
  body.notion .main { min-height: 100%; }
  .main.notion { padding-bottom: 80px; min-height: 100%; }
  .f-ant { grid-area: panneau; }
  .f-lec { grid-area: lecteur; }
  .f-dock { display: none !important; }
}
@media (min-width: 1280px) {
  body.notion.ant-open { --ant: 340px; }
}
@media (min-width: 1000px) and (max-width: 1279px) {
  .f-ant { position: fixed; top: 72px; right: 8px; bottom: 8px; z-index: 3; width: 340px; box-shadow: rgba(0, 0, 0, .35) -8px 0 28px; }
}

/* Téléphone et tablette : le dock en bas, le film en plein écran */
.f-dock { display: none; }
@media (max-width: 999px) {
  body.notion { padding-bottom: 76px; }
  body.notion .shell { margin-left: 0; }
  .side { transform: translateX(-100%); transition: transform .16s; width: min(300px, 86vw); }
  body.side-phone .side { transform: none; box-shadow: rgba(0, 0, 0, .3) 8px 0 24px -6px; }
  .s-resize { display: none; }
  .peek { width: 100vw; min-width: 0; }
  .f-top { grid-template-columns: auto minmax(0, 1fr) auto; height: 58px; padding: 0 12px; }
  .f-top-l .f-rond, .f-top-c .f-rond, .f-create, .f-top-r a.f-rond { display: none; }
  .f-search kbd { display: none; }
  button.f-search { width: 100%; height: 40px; font-size: 14px; }
  .f-top-r { gap: 6px; }
  .f-top-r .f-rond { width: 36px; height: 36px; }
  .f-dock:not([hidden]) { position: fixed; left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); z-index: 3; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); height: 60px; padding: 4px; border-radius: 20px; background: color-mix(in srgb, var(--panel) 86%, transparent); backdrop-filter: blur(16px); box-shadow: rgba(0, 0, 0, .35) 0 8px 24px; font-family: var(--font); }
  .f-dk, button.f-dk { position: relative; display: grid; justify-items: center; align-content: center; gap: 2px; padding: 0; border: 0; border-radius: 16px; background: transparent; color: var(--mute); font: 600 10.500px var(--font); text-decoration: none; cursor: pointer; }
  .f-dk .n-g, .f-dk .f-i { width: 20px; height: 20px; }
  .f-dk.on { color: var(--accent); }
  .f-dk-n { position: absolute; top: 2px; left: calc(50% + 6px); min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--accent); color: var(--on-accent); font: 800 10px/16px var(--font); font-style: normal; }
  .f-lec { position: fixed; left: 8px; right: 8px; bottom: calc(74px + env(safe-area-inset-bottom)); z-index: 3; grid-template-columns: minmax(0, 1fr) auto; padding: 6px 8px; box-shadow: rgba(0, 0, 0, .35) 0 8px 24px; }
  .f-lec-line, .f-lec-panel, .f-lec .f-rond.nu { display: none; }
  .f-ant { position: fixed; inset: 0 0 calc(68px + env(safe-area-inset-bottom)) 0; z-index: 3; border-radius: 0 0 16px 16px; }
  body.notion .main:not(.notion):has(.f-home) { padding: 8px 12px 150px; }
  .main.notion { padding-bottom: 170px; }
  .f-sum { min-height: 54px; gap: 10px; padding-right: 10px; }
  .f-lbl { width: auto; flex: 1; }
  .f-txt { display: none; }
  .f-num { order: 3; min-width: 0; }
  .f-car { order: 4; }
  .f-tr .f-wh, .f-dr .f-faces { display: none; }
  .f-dr .f-ticket, .f-tr .f-ticket { max-width: 42%; }
  .f-shelf { grid-auto-flow: column; grid-auto-columns: 150px; grid-template-columns: none; overflow-x: auto; scrollbar-width: none; margin: 0 -12px; padding: 0 12px; }
  .f-card { padding: 4px; }
  .f-play { opacity: 1; transform: none; width: 38px; height: 38px; }
  .f-tr-thumb { width: 40px; height: 40px; }
  .f-tr { gap: 8px; padding: 6px 4px; }
  .f-ant:not([hidden]) .f-stage { aspect-ratio: auto; height: 46vh; }
}

/* Les tableaux d'une personne prennent toute la largeur */
.n-page.person-page .n-body { padding: 0 clamp(14px, 2vw, 28px); max-width: none; }
.person-head .n-avatar { width: 64px; height: 64px; }

@media (min-width: 1000px) { .n-toast { bottom: 92px; } }
@media (max-width: 999px) { .n-toast { bottom: calc(136px + env(safe-area-inset-bottom)); } }
body.notion .f-rail-i { color: var(--mute); }
body.notion .f-rail-i:hover { color: var(--ink); }
body.notion .f-rail-i.on { color: var(--on-accent); }
body.notion .f-all { color: var(--mute); }
@media (max-width: 999px) {
  body.notion .f-dk { color: var(--mute); }
  body.notion .f-dk.on { color: var(--accent); }
  button.f-create { display: none; }
  body.notion .side { z-index: 4; bottom: calc(76px + env(safe-area-inset-bottom)); border-radius: 0 0 16px 0; }
  body.ant-open .f-lec { display: none; }
}

.f-versions { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.f-versions button { flex: none; max-width: 190px; padding: 5px 11px; border: 0; border-radius: 99px; background: var(--tuile); color: var(--mute); font: 600 12px var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.f-versions button[aria-pressed="true"] { background: var(--ink); color: var(--panel); }


/* Le menu de l'appli : rubriques à petits pictos, sous-rubriques dépliables */
.f-menu { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none; padding: 0 8px 14px; }
.f-m-sec + .f-m-sec { margin-top: 14px; }
body.notion .f-m-title { margin: 0; padding: 4px 8px 6px; font: 600 12px/1.2 var(--font); letter-spacing: 0; color: var(--mute); }
.f-m { display: flex; align-items: center; border-radius: 10px; transition: background .15s; }
.f-m:hover { background: var(--tuile); }
body.notion .f-m-go { flex: 1; min-width: 0; display: flex; align-items: center; gap: 11px; height: 42px; padding: 0 6px; background: none; border: 0; border-radius: 10px; color: var(--ink); font: 500 14.5px/1 var(--font); text-align: left; text-decoration: none; cursor: pointer; }
.f-m-ic { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--tuile); color: var(--mute); transition: transform .15s; }
.f-m:hover .f-m-ic { transform: scale(1.06); color: var(--ink); background: var(--tuile-2); }
.f-m-ic .f-i { width: 17px; height: 17px; }
.f-m.on .f-m-ic, .f-m.on:hover .f-m-ic { background: var(--accent); color: var(--on-accent); }
body.notion .f-m.on .f-m-go { font-weight: 700; }
.f-m-lbl, .f-k-lbl { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
button.f-m-ch { flex: none; display: grid; place-items: center; width: 28px; height: 28px; margin-right: 4px; padding: 0; background: none; border: 0; border-radius: 7px; color: var(--mute); cursor: pointer; }
button.f-m-ch:hover { color: var(--ink); background: var(--tuile-2); }
.f-m-ch .n-g { width: 13px; height: 13px; transition: transform .15s; }
.f-m-ch.open .n-g { transform: rotate(90deg); }
.f-m-kids { display: grid; gap: 1px; margin: 2px 0 6px 21px; padding-left: 8px; border-left: 1px solid var(--tuile-2); }
body.notion a.f-k { display: flex; align-items: center; gap: 9px; min-height: 32px; padding: 3px 8px; border-radius: 8px; color: var(--mute); font-size: 13.5px; text-decoration: none; }
body.notion a.f-k:hover { color: var(--ink); background: var(--tuile); }
body.notion a.f-k.on { color: var(--ink); background: var(--tuile); font-weight: 600; }
.f-k-ic { flex: none; display: grid; place-items: center; width: 18px; height: 18px; font-size: 14px; line-height: 18px; }
.f-k-ic .f-i, .f-k-ic .n-g { width: 15px; height: 15px; }
.f-k-ic .s-img { width: 16px; height: 16px; font-size: 14px; line-height: 16px; }
.f-k-ic .n-avatar { width: 18px; height: 18px; font-size: 9px; border-radius: 50%; }
.f-soon-dot { flex: none; display: inline-block; width: 5px; height: 5px; margin-right: 4px; border-radius: 50%; border: 1px solid var(--mute); }
.f-rail-gap { display: block; width: 24px; height: 1px; margin: 4px 0; background: var(--tuile-2); }
button.f-rail-i { border: 0; padding: 0; cursor: pointer; }
.f-rail-i .f-i { width: 21px; height: 21px; }

/* Les pages du menu */
.f-page { display: grid; gap: 14px; align-content: start; max-width: 760px; margin: 0 auto; padding: 22px clamp(16px, 3vw, 32px) 40px; }
.f-page-wide { max-width: none; }
.f-page-head { display: flex; align-items: center; gap: 14px; }
.f-page-ic { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: var(--tuile); color: var(--ink); }
.f-page-ic .f-i { width: 26px; height: 26px; }
body.notion .f-page h1 { margin: 0; font: 600 22px/1.15 var(--font); letter-spacing: -.005em; }
.f-page-head p { margin: 4px 0 0; }
body.notion .f-page h2 { margin: 12px 0 0; font: 700 15px/1.2 var(--font); }
.f-soon-tag { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--mute); font-size: 13.5px; }
.f-plan { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.f-plan li { padding: 11px 14px; border-radius: 10px; background: var(--raise); }
.f-person .f-sum { display: flex; align-items: center; gap: 12px; }
.f-person .n-avatar { width: 34px; height: 34px; font-size: 14px; border-radius: 50%; }
body.notion a.f-person { color: var(--ink); text-decoration: none; }
.f-person .f-lbl { flex: 1; }

/* Demander à Claude */
.f-ask { display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 6px 0 14px; border-radius: 24px; background: var(--raise); }
.f-ask:focus-within { box-shadow: 0 0 0 2px var(--ink); }
.f-ask-ic { flex: none; display: grid; color: var(--accent); }
.f-ask-ic .f-i { width: 20px; height: 20px; }
body.notion .f-ask input { flex: 1; min-width: 0; height: 100%; padding: 0; background: none; border: 0; outline: 0; box-shadow: none; color: var(--ink); font: 500 15px/1 var(--font); }
.f-ask input::placeholder { color: var(--mute); }
button.f-ask-go { flex: none; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: var(--accent); color: var(--on-accent); cursor: pointer; }
.f-ask-go .n-g { width: 15px; height: 15px; }
.f-thread { display: grid; gap: 12px; }
.f-thread:empty { display: none; }
.f-q-me { justify-self: end; max-width: 82%; margin: 0; padding: 10px 14px; border-radius: 16px; background: var(--raise); }
.f-q-claude { display: grid; gap: 8px; line-height: 1.5; }
.f-q-claude p, .f-q-claude ul { margin: 0; }
.f-q-claude ul { padding-left: 20px; }
.f-q-claude.is-error { color: var(--alert); }
.f-q-wait { margin: 0; }
.f-q-src { display: flex; flex-wrap: wrap; gap: 6px; }
body.notion .f-q-src a { padding: 5px 10px; border-radius: 14px; background: var(--raise); font-size: 13px; text-decoration: none; }
.f-ask-form { display: flex; align-items: flex-end; gap: 8px; }
body.notion .f-ask-area { flex: 1; min-width: 0; min-height: 52px; padding: 13px 16px; resize: vertical; background: var(--raise); border: 0; border-radius: 14px; color: var(--ink); font: 500 15px/1.4 var(--font); box-shadow: none; }
body.notion .f-ask-area:focus { outline: 2px solid var(--ink); outline-offset: 0; }
.f-ask-area::placeholder { color: var(--mute); }
.f-ask-area:disabled { opacity: .55; cursor: not-allowed; }
.f-ask-form .button { height: 52px; flex: none; }

/* L'appli garde une typo d'appli : seuls les titres encadrés sont à l'identité du site. */
body.notion { --titles: var(--font); }
body.notion .n-body h1 { font-size: 26px; font-weight: 600; letter-spacing: -.005em; line-height: 1.2; }
body.notion .n-banner.flat { font: 800 clamp(20px, 3vw, 28px)/1.1 'Golos Text', system-ui, sans-serif; letter-spacing: 0; text-transform: uppercase; }

/* La jauge commerciale, petite */
body.notion .pipe-gauge { display: grid; gap: 8px; margin: 0; padding: 12px 14px; border-radius: 12px; background: var(--tuile); }
body.notion .pipe-bar { height: 8px; border-radius: 4px; background: var(--tuile-2); }
body.notion .pipe-keys { display: flex; flex-wrap: wrap; gap: 4px 16px; color: var(--mute); font-size: 12px; }
body.notion .pipe-key strong { display: block; font: 600 14px/1.3 var(--font); color: var(--ink); font-variant-numeric: tabular-nums; }
body.notion .pipe-chip { width: 7px; height: 7px; border-radius: 2px; margin-right: 5px; }
body.notion .pipe-warn, body.notion .pipe-note { display: block; margin: 0; color: var(--mute); font-size: 12px; font-weight: 400; line-height: 1.35; }

/* L'accueil : des carrés à déplier, de l'air, la couleur sur la production */
.f-home { max-width: 720px; margin: 0 auto; }
.f-home > * + * { margin-top: 28px; }
.f-hello .faces { gap: 8px; }
.f-hello .face .n-avatar { width: 36px; height: 36px; font-size: 14px; }
.f-part { display: grid; gap: 12px; min-width: 0; }
.f-part-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 32px; }
body.notion .f-part-head h2 { margin: 0; font: 600 17px/1.2 var(--font); letter-spacing: 0; }
.f-part-n { margin-left: 8px; color: var(--mute); font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; }
.f-part-head .f-seg button { padding: 5px 12px; font-size: 12.5px; }

.f-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
button.f-sq { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; aspect-ratio: 1; padding: 14px; overflow: hidden; border: 0; border-radius: 12px; background: var(--sq); color: #fff; font: inherit; text-align: left; cursor: pointer; transition: transform .15s; }
button.f-sq:hover { transform: scale(1.025); }
button.f-sq[aria-expanded="true"] { box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--ink); }
button.f-sq strong { flex: none; display: block; width: 100%; white-space: normal; font: 600 15px/1.2 var(--font); }
.f-sq-foot { z-index: 1; display: grid; gap: 2px; margin-top: auto; }
.f-sq-foot b { font: 500 28px/1 var(--font); font-variant-numeric: tabular-nums; }
.f-sq-foot small { color: inherit; font-size: 11.5px; line-height: 1.25; opacity: .95; }
.f-sq > img { position: absolute; right: -12px; bottom: -8px; width: 74px; height: 74px; border-radius: 5px; object-fit: cover; rotate: 22deg; box-shadow: 0 4px 14px rgb(0 0 0 / .35); }
button.f-sq.plain { background: var(--tuile); color: var(--ink); }
button.f-sq.plain:hover { background: var(--tuile-2); }
.f-sq-ic { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--sq); color: #fff; }
.f-sq-ic .f-i { width: 18px; height: 18px; }
.f-sq.plain .f-sq-foot b { font-size: 22px; }
.f-sq.plain .f-sq-foot small { color: var(--mute); opacity: 1; }
.f-sq.plain .f-sq-foot small.late { color: var(--alert); }
.f-sq .pipe-bar { width: 100%; height: 6px; margin: auto 0 0; }
.f-sq .pipe-bar + .f-sq-foot { margin-top: 0; }
.f-sq-panel { grid-column: 1 / -1; min-width: 0; max-height: 440px; overflow-y: auto; padding: 8px; border-radius: 12px; background: var(--tuile); animation: f-sq-in .12s ease-out; }
@keyframes f-sq-in { from { opacity: 0; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .f-sq-panel { animation: none; } button.f-sq { transition: none; } }
.f-sq-panel .f-box { padding: 4px; background: none; }
.f-sq-panel .f-box-head { display: none; }
.f-sq-panel .f-dr .f-mini { flex: none; width: 40px; height: 40px; }
.f-sq-panel > .f-txt { margin: 0; padding: 8px; color: var(--mute); font-size: 13.5px; }

.f-quick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.f-quick:not(.open) > :nth-child(n+7) { display: none; }
body.notion .f-dr.f-qk { gap: 10px; min-height: 56px; padding: 0 10px 0 0; overflow: hidden; border-radius: 8px; background: var(--tuile); }
body.notion .f-dr.f-qk:hover { background: var(--tuile-2); }
.f-qk .f-mini { flex: none; width: 56px; height: 56px; border-radius: 0; }
.f-qk .f-dt strong { display: -webkit-box; font-size: 13px; line-height: 1.2; white-space: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.f-qk .f-dt small { font-size: 12px; }
.f-qk:has(.f-qk-tags) .f-mini { width: 72px; height: auto; align-self: stretch; }
.f-qk .f-dt:has(.f-qk-tags) { padding-block: 8px; }
.f-qk-tags { display: flex; align-items: center; gap: 6px; min-width: 0; margin-top: 3px; font-size: 11px; line-height: 16px; }
.f-qk-tags .f-ticket { max-width: 60%; }
.f-qk-tags .n-pill { height: 16px; padding: 0 6px 0 5px; gap: 4px; font-size: 11px; line-height: 16px; }
.f-qk-step { min-width: 0; overflow: hidden; color: var(--mute); white-space: nowrap; text-overflow: ellipsis; }
.f-qk .late, .f-dr .late { color: var(--alert); font-weight: 600; }
.f-mini { position: relative; display: grid; place-items: center; overflow: hidden; border-radius: 6px; background: var(--raise); color: var(--mute); font: 600 13px/1 var(--font); text-transform: uppercase; }
.f-mini > img, .f-mini > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
/* Un logo se montre en entier et centré : il n'est jamais recadré comme une photo. */
.f-mini > img.f-mini-ic { position: static; width: 100%; height: 100%; object-fit: contain; }
.f-mini:has(> img.f-mini-ic) { background: #000; }
.f-af-sum .f-shoot-logo { flex: none; width: 44px; height: 44px; }
.f-af-sum .f-shoot-logo .f-mini-ic { font-size: 24px; }
.f-meet-list { display: grid; gap: 4px; }
body.notion .f-page h2.f-meet-day { margin: 14px 0 4px; }
body.notion .f-meet-list button.f-af-sum { display: flex; align-items: center; gap: 12px; text-align: left; }
.f-meet-list .f-af-sum .f-dt small { white-space: normal; }
.f-meet-det { display: grid; gap: 10px; padding: 6px 8px 14px; }
.f-meet-who { margin: 0; color: var(--mute); font-size: 13px; line-height: 1.4; }
.f-meet-brief { display: grid; gap: 8px; justify-items: start; }
.f-meet-go { display: flex; flex-wrap: wrap; gap: 8px; }
.f-meet-link { justify-self: start; }
.f-meet-part { display: grid; gap: 8px; min-width: 0; }
.f-meet-doc { width: 100%; max-height: 320px; overflow-y: auto; padding: 12px; border-radius: 8px; background: var(--tuile); font-size: 13.5px; line-height: 1.5; overflow-wrap: anywhere; }
.f-meet-doc p { margin: 0 0 8px; }
.f-meet-doc p:last-child { margin-bottom: 0; }
.f-meet-doc small { color: var(--mute); font-variant-numeric: tabular-nums; }
.f-shoot .f-mini { flex: none; width: 44px; height: 44px; }
.f-shoot .f-mini-ic { font-size: 24px; }
.f-shoot .f-dt small { white-space: normal; }
.f-shoot-j { flex: none; padding: 5px 10px; border-radius: 99px; background: var(--tuile-2); font: 600 13px/1 var(--font); font-variant-numeric: tabular-nums; white-space: nowrap; }
.f-shoot-j.soon { background: var(--accent); color: var(--on-accent); }
button.f-sq.wide { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto 1fr; align-items: start; gap: 8px 16px; aspect-ratio: auto; min-height: 92px; }
button.f-sq.wide strong { grid-area: 1 / 1; }
button.f-sq.wide .f-sq-foot { grid-area: 2 / 1; align-self: end; margin: 0; }
.f-sq-shoots { z-index: 1; grid-area: 1 / 2 / 3 / 3; display: flex; flex-wrap: wrap; justify-content: flex-end; align-self: center; gap: 8px 14px; max-height: 40px; overflow: hidden; }
.f-sq-shoot { display: flex; align-items: center; gap: 6px; height: 40px; }
.f-sq-shoot .f-mini { flex: none; width: 40px; height: 40px; border-radius: 8px; font-size: 13px; }
.f-sq-shoot .f-mini-ic { font-size: 24px; }
.f-sq-shoot b { font: 600 14px/1 var(--font); font-variant-numeric: tabular-nums; white-space: nowrap; }
.f-mini-ic { width: 26px; height: 26px; font-size: 20px; line-height: 26px; object-fit: contain; text-align: center; }
.f-task-line { cursor: pointer; }
.f-task-line input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); }
button.f-more-btn { justify-self: start; padding: 0; border: 0; background: none; color: var(--mute); font: 600 13px var(--font); cursor: pointer; }
button.f-more-btn:hover { color: var(--ink); }
.f-add-form { padding: 12px; border-radius: 12px; background: var(--tuile); }
.f-add-form[hidden] { display: none; }

.f-box { display: grid; gap: 8px; min-width: 0; padding: 12px; border-radius: 14px; background: var(--tuile); }
.f-box-head { display: flex; align-items: center; gap: 10px; min-height: 28px; }
.f-box .f-tile { width: 28px; height: 28px; border-radius: 8px; background: var(--raise); }
.f-box .f-tile .f-i { width: 16px; height: 16px; }
body.notion .f-box-head h3 { flex: 1; min-width: 0; margin: 0; font: 600 14px/1.2 var(--font); letter-spacing: 0; }
.f-box .f-num { min-width: 0; color: var(--mute); font: 500 13px/1 var(--font); }
body.notion a.f-box-all { color: var(--mute); font-size: 12.5px; text-decoration: none; white-space: nowrap; }
body.notion a.f-box-all:hover { color: var(--ink); }
.f-page .f-box-all { display: none; }
.f-box .f-txt { margin: 0; white-space: normal; font-size: 13px; color: var(--mute); }
.f-box-rows { display: grid; gap: 1px; min-width: 0; }
.f-box.is-alert .f-tile { background: var(--alert); color: #fff; }
.f-home .f-pl > :nth-child(n+6) { display: none; }
.f-home .f-sec-head { gap: 12px; }
.f-home .f-sec-head > :last-child:is(a) { margin-left: auto; }
body.notion .f-home .f-sec h2 { font-size: 17px; }
.f-home button.f-bigplay { width: 40px; height: 40px; }
.f-home button.f-bigplay .f-i { width: 16px; height: 16px; }
.f-ant .f-seg button { padding: 5px 9px; font-size: 12px; }

.f-rel .f-sq-panel { max-height: none; padding: 8px; }
.f-af-list { display: grid; gap: 2px; min-width: 0; }
.f-af { min-width: 0; border-radius: 9px; }
.f-af:has(.f-af-det) { background: var(--raise); }
button.f-af-sum { min-height: 52px; }
.f-af-det { display: grid; gap: 12px; padding: 4px 10px 14px; }
.f-af-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.f-af-meta .button:first-of-type { margin-left: auto; }
.f-af-next { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; }
.f-af-chips { display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: 3px; }
button.f-chip { padding: 7px 12px; border: 0; border-radius: 99px; background: var(--tuile-2); color: var(--ink); font: 500 13px var(--font); cursor: pointer; }
button.f-chip:hover { background: var(--ink); color: var(--panel); }
.f-pr-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.f-pr-what { color: var(--mute); font-size: 13px; }
.f-pr-url { flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; font-size: 13.5px; }
.f-pr-spaces { display: grid; gap: 12px; }
.f-af-log { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; color: var(--mute); font-size: 12.5px; }
.f-af-log li { display: flex; gap: 8px; }

@media (max-width: 999px) {
  .f-home > * + * { margin-top: 22px; }
  .f-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  button.f-sq { aspect-ratio: 3 / 2; padding: 12px; }
  button.f-sq.plain { aspect-ratio: auto; min-height: 118px; }
  .f-sq-ic { width: 28px; height: 28px; }
  .f-sq-ic .f-i { width: 15px; height: 15px; }
  .f-sq > img { width: 60px; height: 60px; }
  .f-quick { grid-template-columns: minmax(0, 1fr); }
  .f-quick:not(.open) > :nth-child(n+5) { display: none; }
}

/* Une relance : client, tâche, personne attitrée, date de rendu */
.f-af-head, body.notion button.f-af-sum { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) minmax(0, .8fr) 62px; align-items: center; gap: 12px; }
.f-af-head { padding: 2px 10px 6px; color: var(--mute); font-size: 11.5px; }
.f-af-head span:last-child, .f-af-due { text-align: right; }
.f-af-client { min-width: 0; color: var(--mute); font-size: 13px; overflow-wrap: anywhere; }
.f-af-task { min-width: 0; font: 600 14px/1.25 var(--font); overflow-wrap: anywhere; }
.f-af-who { min-width: 0; color: var(--mute); font-size: 13px; overflow-wrap: anywhere; }
.f-af-due { font-size: 13px; font-variant-numeric: tabular-nums; }
.f-af-due.late { color: var(--alert); }
@media (max-width: 999px) {
  .f-af-head { display: none; }
  body.notion button.f-af-sum { grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding-top: 8px; padding-bottom: 8px; }
  .f-af-client { grid-column: 1; grid-row: 1; }
  .f-af-task { grid-column: 1 / -1; grid-row: 2; }
  .f-af-who { grid-column: 1; grid-row: 3; }
  .f-af-due { grid-column: 2; grid-row: 1; }
}

/* La cloche et les notifications */
.f-bell { position: relative; }
.f-bell-n { position: absolute; top: -2px; right: -3px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--alert); color: #fff; font: 600 11px/18px var(--font); font-style: normal; text-align: center; }
.f-bell-n[hidden] { display: none; }
@media (max-width: 999px) { .f-top-r a.f-rond.f-bell { display: inline-grid; } }
.f-nt-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
body.notion a.f-chip, button.f-chip { display: inline-flex; align-items: center; padding: 7px 12px; border: 0; border-radius: 99px; background: var(--tuile-2); color: var(--ink); font: 500 13px var(--font); text-decoration: none; cursor: pointer; }
body.notion a.f-chip:hover { background: var(--ink); color: var(--panel); }
button.f-chip.f-chip-go { background: var(--accent); color: var(--on-accent); }
button.f-chip.f-chip-go:hover { background: var(--accent); color: var(--on-accent); transform: scale(1.03); }
button.f-chip:disabled { opacity: .5; cursor: default; }
.f-nts { display: grid; gap: 14px; }
.f-nt-hint { display: block; margin: 0; padding: 10px 14px; border-radius: 14px; background: var(--tuile); box-shadow: var(--soft-edge); color: var(--ink); font-size: 13.5px; text-decoration: none; }
.f-nt-list { display: grid; gap: 8px; }
.f-nts > .f-nt-list { gap: 22px; }
.f-nt-none { display: block; padding: 28px 0; text-align: center; }
.f-nt { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 18px; background: var(--tuile); box-shadow: var(--soft-edge); }
.f-nt-main { display: grid; gap: 2px; min-width: 0; }
.f-nt-main strong { font: 600 14.5px/1.25 var(--font); overflow-wrap: anywhere; }
body.notion .f-nt-main p { margin: 0; color: var(--mute); font-size: 13px; line-height: 1.35; overflow-wrap: anywhere; }
.f-nt-main small { color: var(--mute); font-size: 11.5px; }
.f-nt-acts { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.f-nt > .f-slot { grid-column: 1 / -1; }
.f-nt-ask { display: grid; gap: 10px; padding-top: 4px; }
body.notion .f-nt-ask p { margin: 0; font-size: 14px; }
.f-at { display: flex; gap: 6px; flex-wrap: wrap; }
button.f-at-p { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px 4px 4px; border: 0; border-radius: 99px; background: var(--tuile); color: var(--ink); font: 500 13px var(--font); cursor: pointer; }
button.f-at-p .n-avatar { width: 24px; height: 24px; font-size: 10px; border-radius: 50%; }
button.f-at-p[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }
body.notion textarea.f-nt-text { width: 100%; padding: 10px 12px; border: 0; border-radius: 12px; background: var(--tuile); color: var(--ink); font: 400 14px/1.35 var(--font); resize: vertical; }
.f-talk { display: grid; justify-items: start; gap: 10px; margin: 18px 0; font-family: var(--font); }
.f-talk:empty { display: none; }
body.notion .f-talk h2 { margin: 0; font: 600 17px/1.2 var(--font); }
.f-talk-c { display: flex; gap: 10px; width: 100%; }
.f-talk-c .n-avatar { flex: none; width: 28px; height: 28px; font-size: 11px; border-radius: 50%; }
.f-talk-c strong { font: 600 14px var(--font); margin-right: 8px; }
.f-talk-c small { color: var(--mute); font-size: 12px; }
body.notion .f-talk-c p { margin: 2px 0 0; font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; white-space: pre-wrap; }
@media (max-width: 999px) {
  .f-nt { grid-template-columns: auto minmax(0, 1fr); }
  .f-nt > .f-nt-acts { grid-column: 2; }
}

/* Le verre liquide : barres et panneaux flottent, le contenu passe dessous. Du flou et des reflets de bord, jamais de dégradé. */
body.notion {
  --glass: rgb(255 255 255 / .56);
  --glass-strong: rgb(255 255 255 / .8);
  --glass-edge: inset 0 1px 0 rgb(255 255 255 / .85), inset 0 0 0 1px rgb(255 255 255 / .4);
  --glass-drop: 0 14px 36px -16px rgb(24 24 20 / .3);
  --glass-blur: blur(26px) saturate(175%);
  --soft-edge: inset 0 1px 0 rgb(255 255 255 / .6), inset 0 0 0 1px rgb(17 17 16 / .04);
}
:root[data-theme="dark"] body.notion {
  --glass: rgb(255 255 255 / .06);
  --glass-strong: rgb(34 34 32 / .86);
  --glass-edge: inset 0 1px 0 rgb(255 255 255 / .26), inset 0 0 0 1px rgb(255 255 255 / .09);
  --glass-drop: 0 16px 40px -16px rgb(0 0 0 / .85);
  --soft-edge: inset 0 1px 0 rgb(255 255 255 / .09), inset 0 0 0 1px rgb(255 255 255 / .03);
}
.f-top, body.notion .side, .f-ant, .f-lec, .f-dock:not([hidden]), body.notion .n-top {
  background: var(--glass);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-edge), var(--glass-drop);
}
.n-menu, .n-toast, .n-format, .peek {
  background: var(--glass-strong);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-edge), var(--glass-drop);
}
.n-page { background: transparent; }
.f-sq-panel, .f-box, .f-add-form, button.f-sq.plain, body.notion .f-dr.f-qk, button.f-search, .f-rond:not(.nu), .f-seg, body.notion .pipe-gauge { box-shadow: var(--soft-edge); }
button.f-sq { border-radius: 18px; box-shadow: inset 0 1px 0 rgb(255 255 255 / .34), inset 0 0 0 1px rgb(255 255 255 / .1), 0 12px 26px -14px var(--sq); }
button.f-sq.plain { border-radius: 18px; }
button.f-sq[aria-expanded="true"] { box-shadow: inset 0 1px 0 rgb(255 255 255 / .34), 0 0 0 2px var(--bg), 0 0 0 4px var(--ink); }
.f-sq-panel, .f-box, .f-add-form { border-radius: 18px; }
body.notion .f-dr.f-qk { border-radius: 12px; }
button.f-create { box-shadow: inset 0 1px 0 rgb(255 255 255 / .45); }
button.f-lec-play { box-shadow: inset 0 1px 0 rgb(255 255 255 / .45); }
@media (min-width: 1000px) {
  .f-top { z-index: 2; align-self: end; height: 56px; padding: 0 8px; border-radius: 20px; }
  body.notion .shell { grid-area: 1 / 2 / -1 / 3; z-index: 0; margin-bottom: -8px; padding: 72px 0 76px; border-radius: 0; background: transparent; }
  body.notion .side, .f-ant { border-radius: 22px; }
  /* Le menu et le panneau descendent jusqu'en bas ; le lecteur est une petite capsule posée sur le centre. */
  body.notion .side, .f-ant { grid-row: 2 / 4; }
  .f-lec { position: relative; z-index: 2; grid-area: 3 / 2 / 4 / 3; justify-self: center; width: min(460px, 100%); grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; padding: 6px 10px 8px; border-radius: 26px; }
  .f-lec-line { position: absolute; left: 20px; right: 20px; bottom: 3px; width: auto; }
  .f-lec-time { display: none; }
  button.f-lec-play { width: 32px; height: 32px; }
  /* Le collé tient compte du retrait de la zone qui défile : top 0 tombe juste sous la barre. */
  body.notion .n-top { top: 0; margin: 0 8px; border-radius: 14px; }
  body.notion .bar { top: 0; }
}
@media (min-width: 1000px) and (max-width: 1279px) { .f-ant { background: var(--glass-strong); } }
@media (max-width: 999px) {
  body.notion { --top-inset: 64px; }
  .f-top { position: sticky; top: 6px; z-index: 2; height: 52px; margin: 6px 8px 0; padding: 0 8px; border-radius: 18px; }
  body.notion .n-top { top: var(--top-inset); margin: 6px 8px 0; border-radius: 14px; }
  body.notion .bar { top: var(--top-inset); }
  .f-dock:not([hidden]) { border-radius: 24px; }
  .f-lec { border-radius: 18px; }
  body.notion .side, .f-ant { background: var(--glass-strong); }
}
@media (prefers-reduced-transparency: reduce) {
  body.notion { --glass: var(--panel); --glass-strong: var(--panel); }
  :root[data-theme="dark"] body.notion { --glass: var(--panel); --glass-strong: var(--panel); }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body.notion { --glass: var(--panel); --glass-strong: var(--panel); }
  :root[data-theme="dark"] body.notion { --glass: var(--panel); --glass-strong: var(--panel); }
}
:root[data-theme="dark"] body.notion .alert { border-color: transparent; background: rgb(229 100 88 / .18); color: var(--ink); }

/* L'espace d'un client : une appli de musique, avec ses contenus à la place des titres. */
.n-toast { z-index: 40; }
body.k-open { overflow: hidden; }
.n-portal { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 14px; }
/* L'adresse des clients : connexion, invitation et fichiers sur le même fond que leur espace. */
:root.door-client { color-scheme: dark; --ink: #fff; --paper: #121212; --soft: #262626; --card: #1c1c1c; --ph: #3a3a3a; --m: #3a2f25; --line-10: rgb(255 255 255 / .12); --ink-60: rgb(255 255 255 / .66); }
.door-client .bar nav { display: none; }
.door-client .bar > button { margin-left: auto; }
.door-client .tags { display: none; }
.door-client input:-webkit-autofill { -webkit-text-fill-color: #fff; box-shadow: 0 0 0 40px #262626 inset; }
.k-app { --k-bg: #121212; --k-card: #1c1c1c; --k-hover: #2a2a2a; --k-line: rgb(255 255 255 / .1); --k-soft: #a9a9a9; position: fixed; inset: 0; z-index: 30; overflow: hidden; background: var(--k-bg); color: #fff; color-scheme: dark; font-family: 'Golos Text', system-ui, sans-serif; font-size: 15px; line-height: 1.4; scrollbar-color: #444 transparent; }
.k-app h1, .k-app h2, .k-app h3 { color: #fff; font-family: inherit; }
.k-app a { color: inherit; text-decoration: none; }
.k-app button { font: inherit; color: inherit; }
.k-app .f-i { display: block; width: 20px; height: 20px; }
.k-app [hidden] { display: none !important; }
.k-left { position: relative; height: 100%; min-width: 0; overflow: hidden auto; }
.k-app.k-has-reader { display: grid; grid-template-columns: minmax(0, 1fr) clamp(360px, 33vw, 500px); }
.k-top { position: absolute; inset: 14px clamp(16px, 3vw, 40px) auto; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.k-top-r { display: flex; gap: 8px; }
.k-pill, .k-app button.k-pill { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; border: 1px solid rgb(255 255 255 / .14); border-radius: 18px; background: rgb(18 18 18 / .62); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); color: #fff; font-size: 13.5px; font-weight: 500; cursor: pointer; white-space: nowrap; }
.k-pill:hover { background: rgb(60 60 60 / .75); }
.k-pill .f-i { width: 16px; height: 16px; }
.k-pill.solid { border-color: transparent; background: #fff; color: #111; }
.k-pill.solid:hover { background: #e6e6e6; }
.k-brand { padding: 7px 14px; border-radius: 18px; background: rgb(18 18 18 / .62); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); font-weight: 700; letter-spacing: -.01em; }
.k-hero { height: clamp(150px, 26vh, 280px); background: #222; }
.k-hero img { display: block; width: 100%; height: 100%; object-fit: cover; }
.k-head { display: flex; align-items: flex-start; gap: 18px; padding: 0 clamp(16px, 3vw, 40px); margin-top: 22px; }
.k-hero:not([hidden]) + .k-head:has(.k-logo) { margin-top: -38px; }
.k-head:first-child, .k-top + .k-hero[hidden] + .k-head { padding-top: 56px; }
.k-logo { position: relative; display: grid; place-items: center; flex: none; width: 96px; height: 96px; overflow: hidden; border: 3px solid var(--k-bg); border-radius: 18px; background: #fff; font-size: 52px; }
.k-logo-img { width: 100%; height: 100%; object-fit: cover; }
.k-logo-img.emoji { width: auto; height: auto; }
.k-who { min-width: 0; padding-bottom: 2px; }
.k-hero:not([hidden]) + .k-head:has(.k-logo) .k-who { padding-top: 46px; }
.k-who h1 { margin: 0; font-size: clamp(26px, 3.2vw, 38px); font-weight: 800; letter-spacing: -.025em; line-height: 1.1; }
.k-who p { margin: 4px 0 0; color: var(--k-soft); font-size: 14px; }
.k-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 20px clamp(16px, 3vw, 40px) 4px; }
.k-app button.k-bigplay { display: grid; place-items: center; flex: none; width: 54px; height: 54px; padding: 0; border: 0; border-radius: 50%; background: var(--accent); color: var(--on-accent); cursor: pointer; transition: transform .12s; }
.k-bigplay:hover { transform: scale(1.05); }
.k-bigplay .f-i { width: 24px; height: 24px; }
.k-search { display: flex; align-items: center; gap: 8px; flex: 0 1 260px; min-width: 150px; height: 40px; padding: 0 14px; border-radius: 20px; background: var(--k-card); color: var(--k-soft); }
.k-search:focus-within { outline: 2px solid #fff; color: #fff; }
.k-search .f-i { flex: none; width: 17px; height: 17px; }
.k-search input { flex: 1; min-width: 0; padding: 0; border: 0; outline: 0; background: transparent; color: #fff; font: inherit; font-size: 14px; box-shadow: none; }
.k-search input::-webkit-search-cancel-button { filter: invert(1); }
.k-chips { display: flex; gap: 8px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.k-chips::-webkit-scrollbar { display: none; }
.k-app button.k-chip { display: inline-flex; align-items: center; gap: 6px; flex: none; height: 34px; padding: 0 13px; border: 0; border-radius: 17px; background: var(--k-card); color: #fff; font-size: 13.5px; font-weight: 500; cursor: pointer; }
.k-chip:hover { background: var(--k-hover); }
.k-app button.k-chip.on { background: #fff; color: #111; }
.k-chip .f-i { width: 15px; height: 15px; }
.k-chip.plain { color: var(--k-soft); }
.k-body { display: grid; gap: 34px; padding: 26px clamp(16px, 3vw, 40px) 60px; }
.k-loading, .k-empty { color: var(--k-soft); }
.k-wait { display: flex; align-items: center; gap: 9px; margin: 0; color: var(--k-soft); font-size: 13.5px; }
.k-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: k-beat 1.2s ease-in-out infinite; }
@keyframes k-beat { 50% { opacity: .3; } }
.k-sec { display: grid; gap: 14px; min-width: 0; }
.k-sec > h2 { margin: 0; font-size: 21px; font-weight: 700; letter-spacing: -.015em; }
.k-shelf { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(170px, 196px); gap: 6px; margin: 0 -10px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; }
.k-shelf::-webkit-scrollbar { display: none; }
.k-app button.k-card { display: grid; align-content: start; gap: 3px; min-width: 0; padding: 10px; border: 0; border-radius: 10px; background: transparent; text-align: left; cursor: pointer; scroll-snap-align: start; transition: background .12s; }
.k-card:hover, .k-card.on { background: var(--k-card); }
.k-card strong { overflow: hidden; margin-top: 7px; font-size: 14.5px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.k-card small { overflow: hidden; color: var(--k-soft); font-size: 12.5px; white-space: nowrap; text-overflow: ellipsis; }
.k-thumb { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 8px; background: #262626; }
.k-thumb > img, .k-thumb > video, .k-rowthumb > *, .k-nowthumb > *, .k-nextthumb > *, .k-stripit > * { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.k-app .k-whole { object-fit: contain; background: #0c0c0c; }
.k-picto { display: grid !important; place-items: center; color: #777; }
.k-cardplay { position: absolute; right: 8px; bottom: 8px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--accent); color: var(--on-accent); opacity: 0; transform: translateY(6px); transition: opacity .12s, transform .12s; }
.k-card:hover .k-cardplay, .k-card:focus-visible .k-cardplay { opacity: 1; transform: none; }
.k-ticket { position: absolute; top: 8px; left: 8px; padding: 3px 9px; border-radius: 11px; background: var(--in-validation); color: #111; font-size: 11.5px; font-weight: 700; }
.k-flag { color: var(--in-validation); font-size: 12.5px; font-weight: 700; text-align: right; }
.k-month { display: grid; gap: 1px; }
.k-month + .k-month { margin-top: 18px; }
.k-month h3 { margin: 0 0 6px; padding: 0 8px; color: var(--k-soft); font-size: 13px; font-weight: 600; }
.k-month h3::first-letter { text-transform: uppercase; }
.k-row { display: grid; grid-template-columns: 30px 46px minmax(0, 1fr) 76px 132px 76px; align-items: center; gap: 12px; min-height: 58px; padding: 5px 8px; border-radius: 7px; cursor: pointer; }
.k-row:hover, .k-row:focus-visible { background: var(--k-card); outline: 0; }
.k-row.on { background: var(--k-card); }
.k-row.on .k-rowtext strong { color: var(--accent); }
.k-row.off { opacity: .45; }
.k-ix { display: grid; place-items: center; color: var(--k-soft); font-size: 14px; font-variant-numeric: tabular-nums; }
.k-ix-p { display: none; color: #fff; }
.k-ix-p .f-i { width: 16px; height: 16px; }
.k-row:hover .k-ix-n { display: none; }
.k-row:hover .k-ix-p { display: block; }
.k-rowthumb { display: block; width: 46px; height: 46px; overflow: hidden; border-radius: 5px; background: #262626; }
.k-rowtext { display: grid; min-width: 0; }
.k-rowtext strong { overflow: hidden; font-size: 14.5px; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }
.k-rowtext small { overflow: hidden; color: var(--k-soft); font-size: 12.5px; white-space: nowrap; text-overflow: ellipsis; }
.k-when { color: var(--k-soft); font-size: 13px; white-space: nowrap; }
.k-whenm { display: none; }
.k-rowacts { display: flex; justify-content: flex-end; gap: 2px; min-width: 76px; }
.k-ib, .k-app button.k-ib { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--k-soft); cursor: pointer; }
.k-ib:hover { background: rgb(255 255 255 / .1); color: #fff; }
.k-ib.on { color: var(--in-validation); }
.k-ib .f-i { width: 18px; height: 18px; }
.k-none { color: var(--k-soft); font-size: 13.5px; }
.k-none summary { cursor: pointer; }
.k-none a { display: block; padding: 5px 0 5px 16px; }
.k-none a:hover { color: #fff; }
.k-pagerow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 6px 0 6px 16px; }
.k-pagerow a { flex: 1 1 200px; min-width: 0; padding: 0; overflow-wrap: anywhere; }
.k-pagestate { font-size: 12.5px; white-space: nowrap; }
.k-pagerow .k-pill { height: 32px; padding: 0 12px; }
.k-state { display: inline-flex; align-items: center; justify-content: center; gap: 5px; height: 24px; padding: 0 10px; border-radius: 12px; background: #2a2a2a; color: var(--k-soft); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.k-state .f-i { width: 15px; height: 15px; }
.k-state.ask { background: var(--in-validation); color: #111; }
.k-state.talk { background: #2E9BFF; color: #06223c; }
.k-state.fix { background: #FFC400; color: #111; }
.k-state.ok { background: #16321f; color: var(--signed); }
.k-planning { gap: 12px; }
.k-planhead { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.k-planhead h2 { margin: 0; font-size: 21px; font-weight: 700; letter-spacing: -.015em; }
.k-planhead p { margin: 2px 0 0; color: var(--k-soft); font-size: 14px; }
.k-planhead p:first-letter { text-transform: uppercase; }
.k-plancount { flex: none; text-align: right; }
.k-app .k-plancount strong { color: #fff; font-size: 15px; font-weight: 700; }
.k-plancount small { display: block; font-size: 12.5px; }
.k-planbar { height: 6px; overflow: hidden; border-radius: 3px; background: #2a2a2a; }
.k-planbar span { display: block; height: 100%; border-radius: 3px; background: var(--signed); }
.k-planrows { display: grid; gap: 2px; }
.k-plan { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto auto auto; align-items: center; gap: 12px; min-height: 62px; padding: 7px 8px; border-radius: 8px; }
.k-plan.can { cursor: pointer; }
.k-plan.can:hover, .k-plan.can:focus-visible, .k-plan.on { background: var(--k-card); outline: 0; }
.k-plan.on .k-rowtext strong { color: var(--accent); }
.k-plan:not(.can) > :not(.k-ib) { opacity: .45; filter: grayscale(1); }
.k-plan.off > :not(.k-ib) { opacity: .3; }
.k-planacts { display: flex; gap: 6px; }
.k-planacts .k-pill { height: 34px; padding: 0 12px; }
.k-app .k-planacts .k-pill.solid { background: #fff; color: #111; }
.k-app .k-planacts .k-pill.solid:hover { background: #e6e6e6; }
.k-planacts .k-pill .f-i { width: 16px; height: 16px; }
.k-rowthumb > .k-picto { height: 100%; }
.k-reader { display: flex; flex-direction: column; gap: 12px; min-height: 0; margin: 8px 8px 8px 0; padding: 12px; overflow: hidden auto; border-radius: 14px; background: #1b1b1b; scrollbar-width: thin; }
.k-app button.k-close { display: none; }
.k-app button.k-round { place-items: center; flex: none; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: rgb(255 255 255 / .1); color: #fff; cursor: pointer; }
.k-screen { flex: none; display: grid; place-items: center; width: 100%; aspect-ratio: 4 / 5; max-height: 68vh; overflow: hidden; border-radius: 10px; background: #000; }
.k-screen > video, .k-screen > img { display: block; width: 100%; height: 100%; min-height: 0; object-fit: contain; }
.k-screen > iframe { display: block; width: 100%; height: 100%; border: 0; }
.k-doc { display: grid; justify-items: center; gap: 8px; padding: 30px; text-align: center; }
.k-doc .f-i { width: 46px; height: 46px; color: var(--k-soft); }
.k-doc span { color: var(--accent); font-size: 14px; font-weight: 600; }
.k-strip { flex: none; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.k-strip::-webkit-scrollbar { display: none; }
.k-app button.k-stripit { flex: none; width: 58px; height: 58px; padding: 0; overflow: hidden; border: 2px solid transparent; border-radius: 8px; background: #2a2a2a; cursor: pointer; opacity: .75; }
.k-stripit:hover { opacity: 1; }
.k-app button.k-stripit.on { border-color: #fff; opacity: 1; }
.k-stripit.off { filter: grayscale(1) brightness(.5); }
.k-nowrow { flex: none; display: flex; align-items: flex-start; gap: 10px; }
.k-now { display: grid; flex: 1; min-width: 0; }
.k-now h2 { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -.01em; line-height: 1.25; }
.k-now small { color: var(--k-soft); font-size: 13px; }
.k-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.k-app button.k-datepen { display: inline-grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--k-soft); cursor: pointer; }
.k-app button.k-datepen:hover { color: #fff; background: rgb(255 255 255 / .1); }
.k-datepen .f-i { width: 14px; height: 14px; }
.k-datewrite { height: 30px; padding: 0 8px; border: 1px solid rgb(255 255 255 / .3); border-radius: 6px; background: #111; color: #fff; font: inherit; font-size: 14px; }
.k-rename { width: 100%; height: 32px; padding: 0 8px; border: 1px solid rgb(255 255 255 / .3); border-radius: 6px; background: #111; color: #fff; font: inherit; font-size: 16px; font-weight: 600; }
.k-intro { flex: none; display: grid; gap: 6px; padding: 10px 12px; border-radius: 10px; background: rgb(255 255 255 / .07); }
.k-intro[hidden] { display: none; }
.k-introhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--k-soft); font-size: 12.5px; font-weight: 600; }
.k-intro p { display: -webkit-box; margin: 0; overflow: hidden; font-size: 14px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 5; }
.k-intro.open p { display: block; overflow: visible; }
.k-app button.k-introlink { justify-self: start; padding: 0; border: 0; background: none; color: var(--k-soft); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.k-app button.k-introlink:hover { color: #fff; }
.k-app button.k-introlink[hidden] { display: none; }
.k-introwrite { width: 100%; padding: 8px 10px; border: 1px solid rgb(255 255 255 / .3); border-radius: 8px; background: #111; color: #fff; font: inherit; font-size: 14px; line-height: 1.45; resize: vertical; }
.k-keys { display: flex; flex: none; gap: 2px; }
.k-app button.k-ctl { display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #d8d8d8; cursor: pointer; }
.k-ctl:hover:not(:disabled) { color: #fff; background: rgb(255 255 255 / .1); }
.k-app button.k-ctl:disabled { color: #555; cursor: default; }
.k-tools { flex: none; display: flex; flex-wrap: wrap; gap: 8px; }
.k-talk { flex: 1 1 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 10px; min-height: 0; padding-top: 10px; border-top: 1px solid rgb(255 255 255 / .1); }
.k-talk[hidden] { display: none; }
.k-talk h3 { margin: 0; font-size: 15px; font-weight: 700; }
.k-talkhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.k-ask { flex: none; display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; }
.k-app .k-ask > .k-pill, .k-ask > .k-state { flex: 1 1 0; justify-content: center; height: 44px; font-size: 14px; }
.k-count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: rgb(255 255 255 / .16); font-size: 12px; font-weight: 700; }
.k-reader.k-talking { overflow: hidden; }
.k-talking .k-screen { flex: 0 1 auto; max-height: 34vh; }
.k-talking .k-strip, .k-talking .k-tools, .k-talking .k-ask { display: none; }
.k-reader.k-chatting { overflow: hidden; }
.k-chatting > :not(.k-chat) { display: none; }
.k-chatting .k-chat { padding-top: 0; border-top: 0; }
.k-app .k-chatting > button.k-close { display: none; }
.k-chat .k-msg { width: fit-content; max-width: 88%; }
.k-chat .k-msg.mine { align-self: flex-end; background: #333; }
.k-seen { align-self: flex-end; font-size: 12px; }
.k-app button.k-chatbtn { position: sticky; bottom: 20px; z-index: 3; display: flex; width: max-content; margin: 0 clamp(16px, 3vw, 40px) 20px auto; box-shadow: 0 6px 20px rgb(0 0 0 / .45); }
.k-chatbtn .k-count { background: var(--alert); color: #fff; }
.k-chatbtn .k-count[hidden] { display: none; }
.k-talking .k-intro { max-height: 16vh; overflow-y: auto; }
.k-talking .k-intro p { display: block; overflow: visible; }
.k-app .k-talking button.k-intromore { display: none; }
.k-msgs { display: flex; flex-direction: column; gap: 8px; min-height: 0; overflow: hidden auto; scrollbar-width: thin; }
.k-cited { color: var(--accent); font-weight: 600; }
.k-quiet { margin: 0; color: var(--k-soft); font-size: 13px; }
.k-msg { display: grid; justify-items: start; gap: 4px; padding: 10px 12px; border-radius: 10px; background: #262626; }
.k-msg.them { background: #2e2a26; }
.k-msg.ok { background: #1f2e22; }
.k-msg.done { opacity: .62; }
.k-msg header { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; width: 100%; font-size: 12.5px; }
.k-msg header strong { font-weight: 600; }
.k-msg time { color: var(--k-soft); font-size: 12px; }
.k-msg p { margin: 0; font-size: 13.5px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.k-done { margin-left: auto; color: var(--k-soft); font-size: 12px; }
.k-app .k-at { height: 24px; padding: 0 8px; border: 0; border-radius: 12px; background: rgb(255 255 255 / .1); color: #fff; font-size: 12px; font-weight: 500; cursor: pointer; }
.k-app .k-at:hover { background: rgb(255 255 255 / .2); }
.k-app .k-mark { padding: 0; border: 0; background: none; color: var(--k-soft); font-size: 12px; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.k-app .k-mark:hover { color: #fff; }
.k-write { position: relative; display: grid; gap: 8px; }
.k-charge { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.k-charge[hidden] { display: none; }
.k-charge small { margin-right: 2px; color: var(--k-soft); font-size: 12px; }
.k-app button.k-who-at { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px 0 3px; border: 0; border-radius: 14px; background: #2a2a2a; color: #fff; font-size: 12.5px; cursor: pointer; }
.k-app button.k-who-at:hover { background: #383838; }
.k-who-at .n-avatar, .k-cite .n-avatar { flex: none; width: 22px; height: 22px; border-radius: 50%; object-fit: cover; font-size: 11px; }
.k-cites { position: absolute; right: 0; bottom: calc(100% + 6px); left: 0; z-index: 2; display: grid; gap: 2px; max-height: 220px; padding: 5px; overflow-y: auto; border-radius: 12px; background: #2a2a2a; box-shadow: 0 10px 30px rgb(0 0 0 / .5); }
.k-cites[hidden] { display: none; }
.k-app button.k-cite { display: flex; align-items: center; gap: 9px; min-height: 40px; padding: 4px 9px; border: 0; border-radius: 8px; background: transparent; color: #fff; font-size: 14px; text-align: left; cursor: pointer; }
.k-app button.k-cite.on, .k-app button.k-cite:hover { background: #3c3c3c; }
.k-cite small { margin-left: auto; color: var(--k-soft); font-size: 12px; }
.k-app .k-note { width: 100%; min-height: 62px; padding: 10px 12px; border: 1px solid rgb(255 255 255 / .14); border-radius: 10px; background: #121212; color: #fff; font: inherit; font-size: 14px; line-height: 1.4; resize: vertical; }
.k-app .k-note:focus { outline: none; border-color: rgb(255 255 255 / .5); }
.k-writerow { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.k-where { color: var(--k-soft); font-size: 12.5px; }
.k-reader .k-pill { background: #2a2a2a; -webkit-backdrop-filter: none; backdrop-filter: none; }
.k-reader .k-pill:hover { background: #383838; }
.k-reader .k-pill.solid { background: #fff; color: #111; }
.k-reader .k-pill.solid:hover { background: #e6e6e6; }
@media (max-width: 999px) {
  .k-app.k-has-reader { display: block; }
  .k-reader { display: none; }
  .k-reading .k-reader:not([hidden]) { position: fixed; inset: 0; z-index: 4; display: flex; margin: 0; padding: calc(10px + env(safe-area-inset-top)) 12px calc(16px + env(safe-area-inset-bottom)); border-radius: 0; background: #0f0f0f; }
  .k-app button.k-close { display: grid; }
  .k-screen { max-height: 66vh; }
  .k-talking .k-screen { max-height: 30vh; }
  .k-app .k-note { font-size: 16px; }
  .k-introwrite { font-size: 16px; }
  .k-plan { grid-template-columns: 46px minmax(0, 1fr) auto; column-gap: 10px; row-gap: 8px; padding: 8px 0; }
  .k-plan > .k-ib { grid-column: 3; grid-row: 2; justify-self: end; }
  .k-planacts { grid-column: 1 / -1; grid-row: 2; }
  .k-plan:has(> .k-ib) .k-planacts { grid-column: 1 / 3; }
  .k-planacts.quiet { display: none; }
  .k-plan:has(> .k-ib):not(:has(.k-planacts:not(.quiet))) { grid-template-columns: 46px minmax(0, 1fr) auto auto; }
  .k-plan:not(:has(.k-planacts:not(.quiet))) > .k-ib { grid-column: 4; grid-row: 1; }
  .k-planacts .k-pill { flex: 1 1 0; justify-content: center; height: 38px; }
  .k-head { gap: 12px; }
  .k-logo { width: 72px; height: 72px; border-radius: 14px; font-size: 38px; }
  .k-hero:not([hidden]) + .k-head:has(.k-logo) { margin-top: -28px; }
  .k-hero:not([hidden]) + .k-head:has(.k-logo) .k-who { padding-top: 34px; }
  .k-actions { gap: 10px; }
  .k-search { flex: 1 1 0; }
  .k-chips { margin: 0 -16px; padding: 0 16px; width: calc(100% + 32px); }
  .k-body { gap: 28px; padding-top: 20px; }
  .k-shelf { grid-auto-columns: 150px; margin: 0 -16px; padding: 0 6px; }
  .k-row { grid-template-columns: 46px minmax(0, 1fr) auto auto; gap: 10px; padding: 5px 0; }
  .k-ix, .k-when { display: none; }
  .k-whenm { display: inline; }
  .k-flag:empty { display: none; }
  .k-row:has(.k-flag:empty) { grid-template-columns: 46px minmax(0, 1fr) auto; }
  .k-rowacts { min-width: 0; }
  .k-cardplay { opacity: 1; transform: none; width: 36px; height: 36px; }
}
@media (prefers-reduced-motion: reduce) { .k-dot { animation: none; } .k-cardplay { transition: none; } }