/* Échelon — feuille de style. Sobre et amicale façon Things : fond clair, bleu doux, police système, mode sombre. */
/* jetons hors couleur (communs à tous les thèmes) */
:root {
  --radius: 14px; --radius-s: 10px;
  --font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Inter, Roboto, sans-serif;
  --tab-h: 60px; --capture-h: 68px; --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px);
}
/* couleurs : data-palette (thème du compte) × data-theme (mode effectif, toujours posé : light | dark).
   Source unique themes.json, section régénérée par node tools/build-themes.js. */
/* === thèmes (générés depuis themes.json, ne pas éditer à la main) === */
/* Bordeaux */
:root, [data-palette="bordeaux"] {
  --bg: #ffffff; --side: #f5f5f7; --panel: #ffffff; --panel2: #f5f5f7; --panel3: #ececef; --line: #e6e6ea; --line2: #d9d9de;
  --text: #1d1d1f; --muted: #7a7a80; --dim: #a9a9af;
  --accent: #7b1e3c; --accent-soft: #f7e8ee; --accent-ink: #ffffff; --accent-hover: #651731; --selection: rgba(123, 30, 60, .18); --focus: #f7e8ee;
  --amber: #f59e0b; --ok: #34c759; --danger: #e05a2b; --violet: #8e5cf6;
  --p1: #ff6a3d; --p2: #f59e0b; --p3: #7b1e3c; --p4: #b0b0b6;
  --shadow: 0 8px 28px rgba(0, 0, 0, .10); --logo-front: #7b1e3c; --logo-back: #4f1226;
  color-scheme: light;
}
[data-theme="dark"], [data-palette="bordeaux"][data-theme="dark"] {
  --bg: #1c1c1e; --side: #161618; --panel: #242426; --panel2: #2c2c2e; --panel3: #3a3a3c; --line: #2f2f32; --line2: #3f3f43;
  --text: #f2f2f7; --muted: #9a9aa0; --dim: #68686e;
  --accent: #d9496e; --accent-soft: #3a1f29; --accent-ink: #ffffff; --accent-hover: #651731; --selection: rgba(123, 30, 60, .18); --focus: #3a1f29;
  --amber: #ffb340; --ok: #30d158; --danger: #ff7a45; --violet: #a78bfa;
  --p1: #ff7a45; --p2: #ffb340; --p3: #d9496e; --p4: #5a5a60;
  --shadow: 0 10px 30px rgba(0, 0, 0, .45); --logo-front: #d9496e; --logo-back: #8a2746;
  color-scheme: dark;
}
/* Encre */
[data-palette="encre"] {
  --bg: #ffffff; --side: #f5f5f7; --panel: #ffffff; --panel2: #f5f5f7; --panel3: #ececef; --line: #e6e6ea; --line2: #d9d9de;
  --text: #1d1d1f; --muted: #6e6e73; --dim: #8e8e93;
  --accent: #2f5bea; --accent-soft: #e9eefd; --accent-ink: #ffffff; --accent-hover: #234bd0; --selection: rgba(47, 91, 234, .18); --focus: rgba(47, 91, 234, .25);
  --amber: #f59e0b; --ok: #34c759; --danger: #e05a2b; --violet: #b84fd6;
  --p1: #ff6a3d; --p2: #f59e0b; --p3: #2f5bea; --p4: #b0b0b6;
  --shadow: 0 8px 28px rgba(0, 0, 0, .10); --logo-front: #2f5bea; --logo-back: #1b3899;
  color-scheme: light;
}
[data-palette="encre"][data-theme="dark"] {
  --bg: #1c1c1e; --side: #161618; --panel: #242426; --panel2: #2c2c2e; --panel3: #3a3a3c; --line: #333336; --line2: #424246;
  --text: #f2f2f7; --muted: #9a9aa0; --dim: #6c6c72;
  --accent: #6b8cff; --accent-soft: #1e2747; --accent-ink: #0a1430; --accent-hover: #8aa4ff; --selection: rgba(107, 140, 255, .26); --focus: rgba(107, 140, 255, .32);
  --amber: #ffb340; --ok: #30d158; --danger: #ff7a45; --violet: #d68cf5;
  --p1: #ff7a45; --p2: #ffb340; --p3: #6b8cff; --p4: #5a5a60;
  --shadow: 0 10px 30px rgba(0, 0, 0, .45); --logo-front: #6b8cff; --logo-back: #3a56c4;
  color-scheme: dark;
}
/* Forêt */
[data-palette="foret"] {
  --bg: #fbfaf6; --side: #f3f1ea; --panel: #ffffff; --panel2: #f3f1ea; --panel3: #e8e5db; --line: #e6e2d6; --line2: #d6d1c3;
  --text: #1b1f1c; --muted: #676c66; --dim: #8b8f87;
  --accent: #1f6f4a; --accent-soft: #e4f0e8; --accent-ink: #ffffff; --accent-hover: #175a3b; --selection: rgba(31, 111, 74, .18); --focus: rgba(31, 111, 74, .25);
  --amber: #e8960c; --ok: #7aa91c; --danger: #d9572a; --violet: #8a5cf0;
  --p1: #f2683c; --p2: #e8960c; --p3: #1f6f4a; --p4: #b3b0a5;
  --shadow: 0 8px 28px rgba(40, 35, 20, .10); --logo-front: #1f6f4a; --logo-back: #0e3f28;
  color-scheme: light;
}
[data-palette="foret"][data-theme="dark"] {
  --bg: #161a18; --side: #121513; --panel: #1f2421; --panel2: #262c28; --panel3: #333a35; --line: #2e3530; --line2: #3c443e;
  --text: #edf2ee; --muted: #98a29b; --dim: #67716a;
  --accent: #4fbf86; --accent-soft: #1b3226; --accent-ink: #06180e; --accent-hover: #6dd09d; --selection: rgba(79, 191, 134, .24); --focus: rgba(79, 191, 134, .30);
  --amber: #ffb340; --ok: #a8d65a; --danger: #ff7a45; --violet: #a78bfa;
  --p1: #ff7a45; --p2: #ffb340; --p3: #4fbf86; --p4: #59615b;
  --shadow: 0 10px 30px rgba(0, 0, 0, .5); --logo-front: #4fbf86; --logo-back: #2a7350;
  color-scheme: dark;
}
/* Terre */
[data-palette="terre"] {
  --bg: #fbf7f0; --side: #f3ede2; --panel: #fffdf9; --panel2: #f3ede2; --panel3: #e9e1d3; --line: #e7dfd1; --line2: #d8cdbb;
  --text: #241e19; --muted: #6e655c; --dim: #93897e;
  --accent: #c0552b; --accent-soft: #f7e6dc; --accent-ink: #ffffff; --accent-hover: #a2441d; --selection: rgba(192, 85, 43, .18); --focus: rgba(192, 85, 43, .25);
  --amber: #e3a008; --ok: #3fa45b; --danger: #cf3434; --violet: #8e5cf6;
  --p1: #d93a3a; --p2: #e3a008; --p3: #c0552b; --p4: #b5ada3;
  --shadow: 0 8px 28px rgba(60, 35, 15, .10); --logo-front: #c0552b; --logo-back: #7a3216;
  color-scheme: light;
}
[data-palette="terre"][data-theme="dark"] {
  --bg: #1e1a16; --side: #181512; --panel: #27221d; --panel2: #2f2924; --panel3: #3d3630; --line: #3a322b; --line2: #4a4139;
  --text: #f6f0e9; --muted: #aaa094; --dim: #776d62;
  --accent: #ff8a5b; --accent-soft: #3b2419; --accent-ink: #2a0e03; --accent-hover: #ffa27c; --selection: rgba(255, 138, 91, .24); --focus: rgba(255, 138, 91, .30);
  --amber: #ffc23d; --ok: #34c96a; --danger: #ff6b6b; --violet: #a78bfa;
  --p1: #ff6b6b; --p2: #ffc23d; --p3: #ff8a5b; --p4: #5f5850;
  --shadow: 0 10px 30px rgba(0, 0, 0, .5); --logo-front: #ff8a5b; --logo-back: #b0532d;
  color-scheme: dark;
}
/* Lavande */
[data-palette="lavande"] {
  --bg: #fafaff; --side: #f1f1fa; --panel: #ffffff; --panel2: #f1f1fa; --panel3: #e6e6f2; --line: #e3e3ee; --line2: #d4d4e2;
  --text: #1c1c27; --muted: #6a6a7c; --dim: #8d8d9f;
  --accent: #6b4fd8; --accent-soft: #eeeafc; --accent-ink: #ffffff; --accent-hover: #5638c2; --selection: rgba(107, 79, 216, .18); --focus: rgba(107, 79, 216, .25);
  --amber: #f59e0b; --ok: #34c759; --danger: #e05a2b; --violet: #2f9e8f;
  --p1: #ff6a3d; --p2: #f59e0b; --p3: #6b4fd8; --p4: #b0b0be;
  --shadow: 0 8px 28px rgba(30, 25, 60, .10); --logo-front: #6b4fd8; --logo-back: #3e2a94;
  color-scheme: light;
}
[data-palette="lavande"][data-theme="dark"] {
  --bg: #1a1a24; --side: #15151d; --panel: #23232f; --panel2: #2b2b38; --panel3: #383847; --line: #33333f; --line2: #444452;
  --text: #f2f2fa; --muted: #9e9eb2; --dim: #6c6c80;
  --accent: #a78bfa; --accent-soft: #2c2546; --accent-ink: #160c33; --accent-hover: #bba6fc; --selection: rgba(167, 139, 250, .26); --focus: rgba(167, 139, 250, .32);
  --amber: #ffb340; --ok: #30d158; --danger: #ff7a45; --violet: #5fd3c3;
  --p1: #ff7a45; --p2: #ffb340; --p3: #a78bfa; --p4: #5a5a6a;
  --shadow: 0 10px 30px rgba(0, 0, 0, .5); --logo-front: #a78bfa; --logo-back: #6a4fc6;
  color-scheme: dark;
}
/* Graphite */
[data-palette="graphite"] {
  --bg: #ffffff; --side: #f2f2f4; --panel: #ffffff; --panel2: #f2f2f4; --panel3: #e7e7ea; --line: #e4e4e8; --line2: #d4d4da;
  --text: #111113; --muted: #6a6a70; --dim: #8c8c92;
  --accent: #2b2b2e; --accent-soft: #ececee; --accent-ink: #ffffff; --accent-hover: #000000; --selection: rgba(43, 43, 46, .14); --focus: rgba(43, 43, 46, .20);
  --amber: #f59e0b; --ok: #34c759; --danger: #e05a2b; --violet: #8e5cf6;
  --p1: #ff6a3d; --p2: #f59e0b; --p3: #2b2b2e; --p4: #b0b0b6;
  --shadow: 0 8px 28px rgba(0, 0, 0, .10); --logo-front: #2b2b2e; --logo-back: #0f0f10;
  color-scheme: light;
}
[data-palette="graphite"][data-theme="dark"] {
  --bg: #000000; --side: #0a0a0b; --panel: #141416; --panel2: #1c1c1f; --panel3: #2a2a2e; --line: #28282b; --line2: #38383c;
  --text: #f5f5f7; --muted: #98989f; --dim: #67676d;
  --accent: #e8e8ed; --accent-soft: #232326; --accent-ink: #000000; --accent-hover: #ffffff; --selection: rgba(232, 232, 237, .22); --focus: rgba(232, 232, 237, .28);
  --amber: #ffb340; --ok: #30d158; --danger: #ff7a45; --violet: #a78bfa;
  --p1: #ff7a45; --p2: #ffb340; --p3: #e8e8ed; --p4: #5a5a60;
  --shadow: 0 10px 30px rgba(0, 0, 0, .6); --logo-front: #e8e8ed; --logo-back: #9a9aa0;
  color-scheme: dark;
}
/* === fin thèmes === */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 15px; line-height: 1.45; min-height: 100dvh; -webkit-font-smoothing: antialiased; overscroll-behavior-y: none; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; -webkit-tap-highlight-color: transparent; }
a { color: var(--accent); text-decoration: none; }
::selection { background: var(--selection); }
.bg { display: none; }

/* logo : losange extrudé en 3D. Six couches empilées sur l'axe Z, la rotation est portée par les variables --ry/--rx
   animées sur le conteneur (héritées par chaque couche, qui garde son propre décalage de profondeur). Coche sur la face avant. */
@property --ry { syntax: '<angle>'; inherits: true; initial-value: 0deg; }
@property --rx { syntax: '<angle>'; inherits: true; initial-value: 0deg; }
.logo3d { --s: 22px; --ry: 0deg; --rx: 0deg; position: relative; display: inline-block; width: var(--s); height: var(--s); perspective: calc(var(--s) * 5); vertical-align: middle; flex: 0 0 auto;
  animation: logo-idle 14s linear infinite, logo-float 3.6s ease-in-out infinite; }
.logo3d.spin { animation: logo-spin 1.4s cubic-bezier(.3, .9, .3, 1) 1 both, logo-idle 14s linear 1.4s infinite, logo-float 3.6s ease-in-out infinite; }
.logo3d:hover { animation: logo-spin 1.1s cubic-bezier(.3, .9, .3, 1) 1 both, logo-float 3.6s ease-in-out infinite; }
.logo3d i { position: absolute; inset: 0; transform-style: preserve-3d; }
.logo3d i::before { content: ''; position: absolute; left: 15%; top: 15%; width: 70%; height: 70%; border-radius: 18%; transform: rotate(45deg); background: var(--logo-back); }
.logo3d i:nth-child(1) { transform: rotateX(var(--rx)) rotateY(var(--ry)) translateZ(calc(var(--s) * -.22)); }
.logo3d i:nth-child(2) { transform: rotateX(var(--rx)) rotateY(var(--ry)) translateZ(calc(var(--s) * -.17)); }
.logo3d i:nth-child(3) { transform: rotateX(var(--rx)) rotateY(var(--ry)) translateZ(calc(var(--s) * -.12)); }
.logo3d i:nth-child(4) { transform: rotateX(var(--rx)) rotateY(var(--ry)) translateZ(calc(var(--s) * -.07)); }
.logo3d i:nth-child(5) { transform: rotateX(var(--rx)) rotateY(var(--ry)) translateZ(calc(var(--s) * -.03)); }
.logo3d i:nth-child(6) { transform: rotateX(var(--rx)) rotateY(var(--ry)) translateZ(0); }
.logo3d i:nth-child(6)::before { background: var(--logo-front); }
.logo3d i:nth-child(6)::after { content: ''; position: absolute; left: 50%; top: 50%; width: 30%; height: 16%; border-left: calc(var(--s) * .09) solid var(--accent-ink); border-bottom: calc(var(--s) * .09) solid var(--accent-ink); transform: translate(-50%, -65%) rotate(-45deg); border-radius: 1px; }
.logo3d.lg { --s: 64px; margin: 0 auto 18px; display: block; }
@keyframes logo-spin { from { --ry: -360deg; --rx: 20deg; } to { --ry: 0deg; --rx: 0deg; } }
/* mouvement continu : un tour complet lent, avec un léger tangage et un flottement vertical */
@keyframes logo-idle { 0% { --ry: 0deg; --rx: 12deg; } 25% { --rx: -4deg; } 50% { --ry: 180deg; --rx: 12deg; } 75% { --rx: -4deg; } 100% { --ry: 360deg; --rx: 12deg; } }
@keyframes logo-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6%; } }

/* démarrage, connexion et premier passage */
.boot { min-height: 100dvh; display: grid; place-content: center; }
.gate { min-height: 100dvh; display: grid; place-items: center; padding: calc(28px + var(--sat)) 16px calc(28px + var(--sab)); text-align: center; }
.gate-card { width: 100%; max-width: 340px; }
.gate h1 { font-weight: 700; margin: 0 0 6px; font-size: 26px; letter-spacing: -.02em; }
.gate p { color: var(--muted); margin: 0 0 22px; }
.gate p b { color: var(--text); font-weight: 600; overflow-wrap: anywhere; }
.gate .gate-sub { margin-bottom: 26px; font-size: 15.5px; }
.gate-form { display: grid; gap: 10px; }
.gate .btn.gate-go, .gate .btn.prov { width: 100%; height: 46px; padding: 0 16px; border-radius: 12px; font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.gate .btn.pri:disabled { opacity: .45; }
.gate input.email { height: 46px; padding: 0 14px; font-size: 16px; text-align: left; background: var(--panel); border: 1px solid var(--line2); }
.gate input.email:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus); }
.gate .err { color: var(--danger); margin-top: 12px; min-height: 1.4em; font-size: 14px; }
.gate .alt { display: flex; gap: 4px; justify-content: center; flex-wrap: wrap; }
.gate .discover { display: inline-block; margin-top: 14px; color: var(--muted); font-size: 14px; text-decoration: none; }
.gate .discover:hover { color: var(--accent); }
.gate .gate-legal { margin: 2px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.gate .gate-legal a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
.gate .gate-legal a:hover { color: var(--accent); }
.gate .gate-notice { margin: -8px 0 20px; padding: 10px 12px; border-radius: var(--radius-s); background: var(--accent-soft); color: var(--accent); font-size: 14px; font-weight: 500; }
.gate .gate-hint { margin: 2px 0 14px; font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.gate .gate-info { margin: -6px 0 10px; font-size: 14px; color: var(--text); }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* boutons des fournisseurs : Google (blanc à liseré ; variante sombre officielle), Apple (noir ; blanc en sombre) */
.provs { display: grid; gap: 10px; }
.gate .btn.prov { gap: 10px; }
.gate .btn.prov:disabled { opacity: .6; cursor: default; }
.gate .btn.google { background: #fff; color: #1f1f1f; border: 1px solid #747775; }
.gate .btn.google:hover { background: #f6f7f8; }
.g-logo { width: 18px; height: 18px; flex: none; }
.gate .btn.apple { background: #000; color: #fff; }
.gate .btn.apple:hover { background: #1d1d1f; }
.apple-logo { width: 15px; height: 18px; margin-top: -2px; flex: none; }
.gate .or { display: flex; align-items: center; gap: 12px; width: 100%; margin: 16px auto; color: var(--muted); font-size: 13px; }
.gate .or::before, .gate .or::after { content: ''; flex: 1; height: 1px; background: var(--line2); }
:root[data-theme="dark"] .gate .btn.apple { background: #fff; color: #000; }
:root[data-theme="dark"] .gate .btn.apple:hover { background: #e8e8ed; }
:root[data-theme="dark"] .gate .btn.google { background: #131314; color: #e3e3e3; border-color: #8e918f; }
:root[data-theme="dark"] .gate .btn.google:hover { background: #1f1f21; }
/* code à 6 cases (8 pour un ancien code collé) */
.otp { display: flex; gap: 8px; justify-content: center; margin-bottom: 4px; }
.otp .otp-d { width: 46px; height: 56px; padding: 0; text-align: center; font-size: 24px; font-weight: 600; font-variant-numeric: tabular-nums; background: var(--panel); border: 1px solid var(--line2); border-radius: 12px; caret-color: var(--accent); }
.otp .otp-d:focus { border-color: var(--accent); background: var(--panel); box-shadow: 0 0 0 3px var(--focus); }
.otp .otp-d:disabled { opacity: .55; }
.otp.eight { gap: 5px; }
.otp.eight .otp-d { width: 36px; font-size: 20px; }
@media (max-width: 370px) { .otp { gap: 6px; } .otp .otp-d { width: 42px; height: 52px; } .otp.eight { gap: 4px; } .otp.eight .otp-d { width: 32px; } }
/* premier passage */
.ob-form { display: grid; gap: 10px; text-align: left; }
.ob-form > label { font-size: 15px; font-weight: 600; color: var(--text); }
.ob-form #ob-name { height: 46px; font-size: 17px; background: var(--panel); border: 1px solid var(--line2); }
.ob-form #ob-name:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus); }
.ob-tz { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 8px; padding: 8px 6px 8px 12px; background: var(--panel2); border-radius: var(--radius-s); font-size: 14px; }
.ob-tz-l { grid-column: 1; color: var(--muted); font-size: 12px; font-weight: 600; }
.ob-tz-v { grid-column: 1; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.ob-tz .btn { grid-column: 2; grid-row: 1 / span 2; }
.ob-tz .btn[hidden], .ob-form select[hidden] { display: none; }
.ob-form .err { margin-top: 0; min-height: 1.2em; }
.ob-form .gate-go { margin-top: 4px; }

/* coquille */
.app { min-height: 100dvh; }
.shell { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 100dvh; }
.side { display: none; }
.main { width: 100%; max-width: 720px; margin: 0 auto; padding: calc(14px + var(--sat)) 18px calc(var(--tab-h) + var(--capture-h) + var(--sab) + 24px); }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.topbar h1 { font-size: 26px; font-weight: 700; margin: 0; letter-spacing: -.02em; }
.topbar .sub { color: var(--muted); font-size: 14px; margin-top: 1px; }
.topbar .actions { display: flex; gap: 8px; align-items: center; }
/* téléphone : les boutons d'en-tête passent sous le titre s'ils n'y tiennent pas (Réglages : guide et avis de l'alpha) */
@media (max-width: 559px) { .topbar { flex-wrap: wrap; row-gap: 8px; } .topbar .actions { margin-left: auto; flex-wrap: wrap; justify-content: flex-end; row-gap: 8px; } }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 17px; letter-spacing: -.01em; }
.logo-btn { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; cursor: pointer; }
.logo-btn:hover { background: rgba(0, 0, 0, .05); }
:root[data-theme="dark"] .logo-btn:hover { background: rgba(255, 255, 255, .08); }
.topbar .logo-btn { display: inline-grid; }
@media (min-width: 900px) { .topbar .logo-btn { display: none; } }
/* Journal : bouton d'en-tête sur petit écran (la barre latérale le porte au-delà) */
@media (min-width: 900px) { .topbar .jr-btn { display: none; } }

/* navigation mobile */
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; height: calc(var(--tab-h) + var(--sab)); padding-bottom: var(--sab);
  background: var(--panel); border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(5, 1fr); }
.tabbar button { display: grid; justify-items: center; gap: 3px; color: var(--dim); font-size: 11px; padding-top: 9px; position: relative; }
.tabbar button.on { color: var(--accent); }
.tabbar svg { width: 23px; height: 23px; }
.tabbar .badge { position: absolute; top: 5px; left: calc(50% + 6px); background: var(--danger); color: #fff; font-size: 10px; font-weight: 700; padding: 0 5px; border-radius: 8px; line-height: 15px; }

/* navigation desktop */
.side a { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 8px; color: var(--text); font-size: 14px; }
.side a.on { background: rgba(0, 0, 0, .06); }
:root[data-theme="dark"] .side a.on { background: rgba(255, 255, 255, .08); }
.side a:hover { background: rgba(0, 0, 0, .04); }
.side a svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--accent); }
.side a .n { margin-left: auto; font-size: 12px; color: var(--dim); }
.side .grp { margin: 18px 0 6px 10px; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--dim); display: flex; justify-content: space-between; padding-right: 10px; font-weight: 600; }
.side .grp button { color: var(--dim); font-size: 16px; line-height: 1; vertical-align: middle; }
.side .grp button.ico svg { width: 14px; height: 14px; vertical-align: -2px; }
.ptile.add svg { width: 26px; height: 26px; }
.side .grp button:hover { color: var(--accent); }
.pdot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.side .area { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 10px; margin-top: 6px; border-radius: 8px; color: var(--muted); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; text-align: left; }
.side .area:hover { background: rgba(0, 0, 0, .04); }
.side .area .an { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side .area .n { margin-left: auto; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--dim); font-size: 12px; }
.side .area .chev { color: var(--dim); font-size: 12px; transition: transform .15s; }
.side .area.closed .chev { transform: rotate(-90deg); }
.side .area-list { padding-left: 10px; }
.side .area-list.rest { padding-left: 0; margin-top: 8px; border-top: 1px solid var(--line); padding-top: 6px; }
.sec h2 .ah { display: inline-flex; align-items: center; gap: 8px; color: var(--text); font-size: 15px; letter-spacing: 0; font-weight: 600; }
.sec h2 .ah .pdot { width: 10px; height: 10px; }

/* capture */
.capture { position: fixed; left: 0; right: 0; bottom: calc(var(--tab-h) + var(--sab)); z-index: 29; padding: 10px 12px 10px; background: linear-gradient(to top, var(--bg) 70%, transparent); }
.capture .box { max-width: 720px; margin: 0 auto; background: var(--panel); border: 1px solid var(--line2); border-radius: 16px; padding: 5px 5px 5px 14px; display: flex; align-items: center; gap: 4px; box-shadow: var(--shadow); transition: border-color .2s; }
.capture .box:focus-within { border-color: var(--accent); }
.capture input { flex: 1; background: none; border: 0; outline: 0; min-width: 0; padding: 10px 0; font-size: 15px; }
.capture input::placeholder { color: var(--dim); }
.capture .ib { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; color: var(--muted); transition: background .15s, color .15s; flex: 0 0 auto; }
.capture .ib:hover { background: var(--panel2); color: var(--text); }
.capture .ib.send { background: var(--accent); color: var(--accent-ink); }
.capture .ib.send:disabled { background: var(--panel3); color: var(--dim); cursor: default; }
.capture .ib.mic.on { background: var(--danger); color: #fff; animation: micpulse 1.2s ease-in-out infinite; }
@keyframes micpulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--danger) 45%, transparent); } 50% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--danger) 0%, transparent); } }
.capture .ib.ai { color: var(--violet); }
.capture .ib.ai.busy svg { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.capture svg { width: 19px; height: 19px; }
.capture .hints { max-width: 720px; margin: 0 auto 6px; display: flex; gap: 6px; flex-wrap: wrap; padding: 0 4px; }
.capture .hints:empty { display: none; }
.chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; padding: 3px 9px; border-radius: 999px; background: var(--panel2); color: var(--muted); border: 1px solid var(--line); white-space: nowrap; }
.chip.date, .chip.time { color: var(--accent); background: var(--accent-soft); border-color: transparent; }
.chip.prio1 { color: var(--p1); } .chip.prio2 { color: var(--p2); } .chip.prio4 { color: var(--p4); }
.chip.recur { color: var(--violet); }
.chip.project { color: var(--text); }
.chip.late { color: var(--danger); }
.chip.ai { color: var(--violet); }
.chip .pdot { width: 7px; height: 7px; }

/* cartes et sections */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; margin-bottom: 14px; }
.card h2, .sec h2 { font-size: 13px; color: var(--muted); font-weight: 600; margin: 0 0 8px; display: flex; align-items: center; justify-content: space-between; gap: 8px; letter-spacing: .01em; }
.card h2 .n, .sec h2 .n { color: var(--dim); font-weight: 500; }
.sec { margin-bottom: 22px; }
.sec h2.late { color: var(--danger); }
.empty { color: var(--dim); padding: 12px 4px; font-size: 14px; }
.empty.big { text-align: center; padding: 48px 10px; }
.empty.big .big-ico { font-size: 30px; margin-bottom: 8px; color: var(--accent); }


/* agenda */
.events { display: grid; gap: 4px; }
.ev { display: grid; grid-template-columns: 58px 1fr; gap: 10px; align-items: start; padding: 8px 10px; border-radius: var(--radius-s); background: var(--panel2); }
.ev .t { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; padding-top: 1px; }
.ev .t.now { color: var(--accent); font-weight: 600; }
.ev .ti { display: flex; align-items: center; gap: 8px; }
.ev .ti .pdot { width: 8px; height: 8px; }
.ev .loc { color: var(--dim); font-size: 12px; }
.ev.past { opacity: .5; }

/* tâches : lignes légères séparées par un filet, comme une liste Things */
.tasks { display: grid; }
.task { display: grid; grid-template-columns: 28px 1fr auto; gap: 10px; align-items: start; padding: 9px 8px 9px 6px; border-radius: 10px; transition: transform .15s, opacity .2s, background .15s; cursor: pointer; position: relative; }
.task + .task::before { content: ''; position: absolute; left: 44px; right: 8px; top: 0; height: 1px; background: var(--line); }
.task:hover { background: var(--panel2); }
.task:hover + .task::before, .task:hover::before { opacity: 0; }
.task.done { opacity: .55; }
.task.done .title { text-decoration: line-through; color: var(--muted); }
.task.leaving { transform: translateX(14px); opacity: 0; }
.task.entering { animation: enter .25s ease-out; }
@keyframes enter { from { transform: translateY(6px); opacity: 0; } }
.check { width: 20px; height: 20px; margin-top: 2px; border-radius: 6px; border: 1.5px solid var(--line2); display: grid; place-items: center; transition: background .15s, transform .15s, border-color .15s; flex: 0 0 auto; background: var(--panel); }
.check.p1 { border-color: var(--p1); } .check.p2 { border-color: var(--p2); } .check.p3 { border-color: var(--line2); } .check.p4 { border-color: var(--line2); }
.check:hover { border-color: var(--accent); transform: scale(1.08); }
.check.on { background: var(--accent); border-color: var(--accent); }
.check svg { width: 12px; height: 12px; opacity: 0; color: var(--accent-ink); }
.check.on svg { opacity: 1; }
.task .body { min-width: 0; }
.task .title { font-size: 15px; line-height: 1.4; word-break: break-word; }
.task .meta { display: flex; gap: 6px 10px; flex-wrap: wrap; margin-top: 2px; font-size: 12.5px; color: var(--muted); align-items: center; }
.task .meta > span { display: inline-flex; align-items: center; gap: 4px; }
.task .meta svg, .chip svg { width: 13px; height: 13px; flex: 0 0 auto; }
.task .meta .late { color: var(--danger); }
.task .meta .today { color: var(--accent); }
.task .meta .proj { display: inline-flex; align-items: center; gap: 5px; }
.task .meta .notes { color: var(--dim); }

/* groupes par jour */
.day { margin-bottom: 18px; }
.day h3 { font-size: 15px; margin: 0 0 4px; display: flex; gap: 8px; align-items: baseline; font-weight: 600; }
.day h3 .d { color: var(--dim); font-size: 12px; font-weight: 400; }
.day h3.today { color: var(--accent); }

/* projets */
.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.ptile { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; cursor: pointer; display: grid; gap: 8px; min-height: 96px; transition: background .15s, transform .15s, box-shadow .15s; text-align: left; }
.ptile:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0, 0, 0, .06); }
.ptile .pdot { width: 12px; height: 12px; }
.ptile .nm { font-weight: 600; font-size: 15px; }
.ptile .cnt { color: var(--dim); font-size: 12px; }
.ptile.add { border-style: dashed; color: var(--dim); place-content: center; justify-items: center; }
.ptile .bar { height: 4px; border-radius: 2px; background: var(--panel3); overflow: hidden; }
.ptile .bar i { display: block; height: 100%; background: var(--accent); }

/* habitudes : puces (tuile Aujourd'hui, cap du matin) ; la page Habitudes est plus bas (« Habitudes façon Bento ») */
.habit-strip { display: flex; gap: 8px; flex-wrap: wrap; }
.hchip { --hc: var(--accent); --hc-ink: var(--accent-ink); display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px 6px 7px; border-radius: 999px; background: var(--panel); border: 1px solid var(--line2); color: var(--text); font-size: 13.5px; transition: background-color .18s, border-color .18s; }
.hchip .hc-i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; background: color-mix(in srgb, var(--hc) 14%, transparent); color: var(--hc); font-size: 14px; line-height: 1; flex: none; transition: background-color .18s, color .18s; }
.hchip .hc-i svg { width: 15px; height: 15px; }
.hchip:hover { border-color: color-mix(in srgb, var(--hc) 45%, var(--line2)); }
.hchip.on { background: color-mix(in srgb, var(--hc) 13%, var(--panel)); border-color: transparent; }
.hchip.on .hc-i { background: var(--hc); color: var(--hc-ink, #fff); }
.hchip:focus-visible { outline: 2px solid var(--hc); outline-offset: 2px; }
.hchip.hb-bounce { animation: hb-pop .22s cubic-bezier(.3, .7, .4, 1); }
.hi-t { font-size: inherit; line-height: 1; }
@keyframes hb-pop { 0% { transform: scale(1); } 50% { transform: scale(1.15); } 100% { transform: scale(1); } }
@keyframes hb-fill { from { transform: scale(.35); opacity: .4; } to { transform: scale(1); opacity: 1; } }


/* formulaires */
input[type=text], input[type=email], input[type=search], input[type=date], input[type=time], input[type=number], input[type=password], textarea, select {
  background: var(--panel2); border: 1px solid transparent; border-radius: var(--radius-s); padding: 10px 12px; outline: 0; width: 100%; color: var(--text); transition: border-color .15s, background .15s; }
input:focus, textarea:focus, select:focus { border-color: var(--accent); background: var(--panel); }
textarea { resize: vertical; min-height: 70px; }
label.f { display: grid; gap: 5px; font-size: 12px; color: var(--muted); font-weight: 600; }
label.f > * { font-weight: 400; font-size: 15px; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 15px; border-radius: 10px; background: var(--panel2); color: var(--text); border: 1px solid transparent; font-weight: 500; transition: background .15s, transform .1s; white-space: nowrap; }
.btn:hover { background: var(--panel3); }
.btn:active { transform: scale(.98); }
.btn.pri { background: var(--accent); color: var(--accent-ink); }
.btn.pri:hover { background: var(--accent-hover); }
.btn.ok { background: var(--ok); color: #fff; }
.btn.danger { color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, transparent); }
.btn.ghost { background: none; color: var(--accent); }
.btn.sm { padding: 5px 10px; font-size: 13px; border-radius: 8px; }
.btn:disabled { opacity: .5; cursor: default; }
.btn svg { width: 16px; height: 16px; }
.ibtn { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; color: var(--muted); background: var(--panel2); }
.ibtn:hover { color: var(--text); background: var(--panel3); }
.ibtn svg { width: 18px; height: 18px; }
.seg { display: flex; gap: 3px; background: var(--panel2); border-radius: var(--radius-s); padding: 3px; }
.seg button { flex: 1; padding: 7px 4px; border-radius: 8px; color: var(--muted); font-size: 13px; }
.seg button.on { background: var(--panel); color: var(--text); box-shadow: 0 1px 3px rgba(0, 0, 0, .08); }
.seg button.on.p1 { color: var(--p1); } .seg button.on.p2 { color: var(--p2); } .seg button.on.p3 { color: var(--p3); } .seg button.on.p4 { color: var(--muted); }
.swatches { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; padding: 3px; }
.swatches button { width: 26px; height: 26px; border-radius: 50%; border: 0; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); transition: box-shadow .12s, transform .12s; }
.swatches button:hover { transform: scale(1.08); }
/* pastille choisie : anneau net, séparé de la pastille par la couleur du fond */
.swatches button.on { box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--text); }
.swatches button[hidden] { display: none; }
/* « Autre… » : sélecteur natif invisible posé sur une pastille en dégradé conique */
.sw-other { position: relative; width: 26px; height: 26px; border-radius: 50%; flex: none; cursor: pointer; background: conic-gradient(#ff3b30, #ff9500, #ffcc00, #34c759, #00c7be, #007aff, #5856d6, #af52de, #ff2d55, #ff3b30); transition: transform .12s; }
.sw-other::after { content: '+'; position: absolute; inset: 6px; border-radius: 50%; background: var(--panel); color: var(--muted); display: grid; place-items: center; font: 600 13px/1 var(--font); pointer-events: none; }
.sw-other:hover { transform: scale(1.08); }
.sw-other:focus-within { box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--accent); }
.sw-other input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; opacity: 0; cursor: pointer; }
div.f { display: grid; gap: 5px; font-size: 12px; color: var(--muted); font-weight: 600; }

/* feuille (éditeur) */
.sheet-wrap { position: fixed; inset: 0; z-index: 50; display: grid; align-items: end; justify-items: center; background: rgba(0, 0, 0, .35); animation: fade .18s ease-out; }
.sheet-wrap.closing { animation: fadeout .17s ease-in forwards; }
@keyframes fade { from { opacity: 0; } } @keyframes fadeout { to { opacity: 0; } }
.sheet { width: 100%; max-width: 620px; max-height: calc(100dvh - 24px); overflow: auto; background: var(--panel); border-radius: 20px 20px 0 0; padding: 12px 18px calc(22px + var(--sab)); animation: up .22s cubic-bezier(.2, .8, .2, 1); box-shadow: var(--shadow); }
.sheet-wrap.closing .sheet { animation: down .17s ease-in forwards; }
@keyframes up { from { transform: translateY(40px); opacity: 0; } } @keyframes down { to { transform: translateY(40px); opacity: 0; } }
.sheet .grab { width: 36px; height: 4px; border-radius: 2px; background: var(--line2); margin: 0 auto 12px; }
.sheet .head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 14px; }
.sheet .head .check { margin-top: 9px; }
.sheet .title-in { flex: 1; font-size: 19px; font-weight: 600; background: none; border: 0; padding: 6px 0; border-bottom: 1px solid transparent; border-radius: 0; }
.sheet .title-in:focus { border-bottom-color: var(--line2); }
.sheet .fields { display: grid; gap: 12px; }
.sheet .foot { display: flex; gap: 8px; justify-content: space-between; margin-top: 18px; flex-wrap: wrap; }
.sheet .foot .r { display: flex; gap: 8px; }
.subs { display: grid; gap: 6px; }
.subs .s { display: flex; gap: 8px; align-items: center; }
.subs .s input[type=text] { padding: 7px 10px; }
.subs .s .check { width: 18px; height: 18px; margin-top: 0; }
.subs .s .check svg { width: 11px; height: 11px; }
.subs .s .x { color: var(--dim); padding: 4px; }
.sheet-sm .sheet { border-radius: 20px; margin-bottom: 20px; }
@media (min-width: 700px) { .sheet-wrap { align-items: center; padding: 20px; } .sheet { border-radius: 20px; } }

/* réglages */
.set { display: grid; gap: 0; }
.set .line { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.set .line:last-child { border-bottom: 0; }
.set .line .l { min-width: 0; }
.set .line .l small { display: block; color: var(--dim); font-size: 12px; margin-top: 2px; }
.ok-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); margin-right: 6px; }
.ko-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--dim); margin-right: 6px; }
.callout { background: color-mix(in srgb, var(--amber) 10%, transparent); color: color-mix(in srgb, var(--amber) 55%, var(--text)); padding: 10px 12px; border-radius: var(--radius-s); font-size: 13px; }
:root[data-theme="dark"] .callout { color: var(--amber); }
.cals { display: grid; gap: 6px; margin-top: 8px; }
.cals label { display: flex; gap: 8px; align-items: center; font-size: 14px; cursor: pointer; }
.cals input { width: auto; }

/* journal */
.log { display: grid; gap: 0; font-size: 13px; color: var(--muted); }
.log .e { display: grid; grid-template-columns: 54px 1fr; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.log .e .at { color: var(--dim); font-variant-numeric: tabular-nums; }

/* toast */
.toast { position: fixed; left: 50%; bottom: calc(var(--tab-h) + var(--capture-h) + var(--sab) + 14px); transform: translate(-50%, 20px); z-index: 60; background: #1d1d1f; color: #fff; padding: 10px 16px; border-radius: 999px; font-size: 14px; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; display: flex; gap: 14px; align-items: center; white-space: nowrap; max-width: calc(100vw - 32px); box-shadow: var(--shadow); }
.toast.on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.toast button { color: color-mix(in srgb, var(--accent) 40%, #fff); font-weight: 600; }

/* bannière de mise à jour */
.update { position: fixed; top: calc(10px + var(--sat)); left: 50%; transform: translateX(-50%); z-index: 70; background: var(--panel); border: 1px solid var(--line2); border-radius: 999px; padding: 8px 14px; display: flex; gap: 12px; align-items: center; font-size: 13px; box-shadow: var(--shadow); }

/* desktop */
@media (min-width: 900px) {
  .shell { grid-template-columns: 232px minmax(0, 1fr); }
  .side { display: flex; flex-direction: column; position: sticky; top: 0; height: 100dvh; overflow: auto; padding: 20px 12px; background: var(--side); }
  .side > * { flex: none; }
  .side .brand { padding: 2px 10px 18px; }
  .tabbar { display: none; }
  .main { padding: 26px 36px 120px; max-width: 800px; }
  .capture { left: 232px; bottom: 0; padding: 14px 36px 20px; }
  .toast { bottom: 110px; left: calc(50% + 116px); }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* ---------- web v2 : accueil guidé ---------- */
.welcome { padding: 18px 18px 8px; border-color: var(--line); }
.welcome .wl-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 6px; }
.welcome .wl-head h2 { font-size: 16px; color: var(--text); margin: 0; letter-spacing: -.01em; display: block; }
.welcome .wl-head p { margin: 2px 0 0; color: var(--muted); font-size: 13px; }
.welcome .wl-r { display: flex; align-items: center; gap: 2px; flex: none; margin-right: -6px; }
.welcome .wl-n { font-size: 12px; color: var(--accent); background: var(--accent-soft); border-radius: 999px; padding: 2px 8px; font-weight: 600; font-variant-numeric: tabular-nums; }
.wl-steps { list-style: none; margin: 0; padding: 0; }
.wl-step { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 8px; padding: 12px 0; border-top: 1px solid var(--line); }
.wl-step:first-child { border-top: 0; }
.wl-step .check { margin-top: 1px; }
.wl-t { font-weight: 600; font-size: 15px; display: flex; align-items: center; gap: 8px; }
.wl-i { font-size: 11px; color: var(--dim); font-weight: 600; font-variant-numeric: tabular-nums; }
.wl-step.ok .wl-t { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--dim); }
.wl-step p { margin: 4px 0 8px; color: var(--muted); font-size: 13.5px; }
.wl-ex { display: flex; gap: 6px; flex-wrap: wrap; }
.wl-ex .chip { cursor: pointer; font-size: 13px; padding: 5px 11px; color: var(--accent); background: var(--accent-soft); border-color: transparent; white-space: normal; text-align: left; }
.wl-ex .chip:hover { border-color: var(--accent); }
.wl-link { font-size: 14px; font-weight: 500; }
.welcome.folded { padding: 10px 14px; }
.welcome .wl-line { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--muted); }
.welcome .wl-line > span:nth-child(2) { flex: 1; }
.welcome .wl-line .check { margin: 0; }

/* ---------- lignes : curseur clavier, sélection, tâche ouverte, poignée ---------- */
.task .grip { align-self: center; width: 18px; height: 24px; display: grid; place-items: center; color: var(--dim); opacity: 0; cursor: grab; transition: opacity .12s; }
.task .grip svg { width: 14px; height: 14px; }
.task:hover .grip { opacity: 1; }
.tasks:not([data-drop]) .grip { display: none; }
@media (hover: none) { .task .grip { display: none; } }
.tasks[data-drop] .task { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.task.cur { box-shadow: inset 0 0 0 1.5px var(--accent); }
.task.sel { background: var(--accent-soft); }
.task.sel + .task::before, .task.sel::before { opacity: 0; }
.task.sel:hover { background: var(--accent-soft); }
.task.open { background: var(--panel3); }
.task.open + .task::before, .task.open::before { opacity: 0; }
body.sel-mode #main .task:not(.done) { cursor: copy; }
.tasks > .drop-empty { padding: 4px 4px 8px; }
.tasks > .drop-empty:not(:only-child) { display: none; }

/* glisser-déposer : fantôme fixe, ligne d'origine en repère */
.drag-ghost { position: fixed; z-index: 90; margin: 0; pointer-events: none; background: var(--panel); border-radius: 10px; box-shadow: var(--shadow); opacity: .96; }
.drag-ghost.task::before { display: none; }
.drag-ghost .grip { opacity: 1; }
.drag-ph { opacity: .35; background: var(--panel2); outline: 1.5px dashed var(--line2); outline-offset: -2px; }
.drag-ph.task::before, .drag-ph + .task::before { opacity: 0; }
.ptile.drag-ph { transform: none; box-shadow: none; }
body.dragging, body.dragging * { cursor: grabbing !important; -webkit-user-select: none; user-select: none; }
.ptile { -webkit-touch-callout: none; }

/* ---------- barre latérale : loupe ---------- */
.side-search { margin-left: auto; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: var(--muted); }
.side-search:hover { background: rgba(0, 0, 0, .05); color: var(--text); }
:root[data-theme="dark"] .side-search:hover { background: rgba(255, 255, 255, .08); }
.side-search svg { width: 17px; height: 17px; }

/* ---------- recherche (palette) et aide ---------- */
.pal-wrap { position: fixed; inset: 0; z-index: 80; background: rgba(0, 0, 0, .28); display: grid; justify-items: center; align-items: start; padding: max(12vh, calc(16px + var(--sat))) 16px 16px; animation: fade .12s ease-out; }
.pal { width: 100%; max-width: 600px; max-height: min(560px, calc(100dvh - 15vh - 16px)); display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line2); border-radius: 16px; box-shadow: 0 18px 50px rgba(0, 0, 0, .22); overflow: hidden; }
.pal-in { display: flex; align-items: center; gap: 10px; padding: 4px 16px; border-bottom: 1px solid var(--line); }
.pal-in > svg { width: 19px; height: 19px; color: var(--muted); flex: none; }
.pal-in input { background: none; border: 0; padding: 14px 0; font-size: 17px; border-radius: 0; }
.pal-in input:focus { background: none; }
.pal-res { overflow: auto; padding: 6px; min-height: 0; }
.pal-h { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--dim); font-weight: 600; padding: 10px 10px 4px; }
.pal-it { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 9px; cursor: pointer; }
.pal-it.on { background: var(--accent-soft); }
.pal-it .check { width: 16px; height: 16px; margin: 0; border-radius: 5px; }
.pal-it .check:hover { transform: none; }
.pal-it .pdot.big { width: 11px; height: 11px; justify-self: center; }
.pal-ico { display: grid; place-items: center; }
.pal-ico svg { width: 17px; height: 17px; }
.pal-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14.5px; }
.pal-m { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12.5px; white-space: nowrap; }
.pal-m .pdot { width: 7px; height: 7px; margin-right: -4px; }
.pal-m .late { color: var(--danger); }
.pal-empty { color: var(--dim); padding: 22px 12px; text-align: center; font-size: 14px; }
.pal-foot { display: flex; gap: 16px; padding: 8px 14px; border-top: 1px solid var(--line); color: var(--dim); font-size: 12px; }
kbd { display: inline-block; min-width: 18px; padding: 1px 5px; border-radius: 5px; border: 1px solid var(--line2); border-bottom-width: 2px; background: var(--panel2); color: var(--muted); font: 600 11px/1.4 var(--font); text-align: center; margin-right: 3px; }
.pal.help { padding: 18px 20px 14px; max-width: 460px; }
.pal.help h2 { margin: 0 0 10px; font-size: 16px; }
.pal.help dl { margin: 0; display: grid; gap: 0; overflow: auto; }
.pal.help dl > div { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 12px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--line); }
.pal.help dt { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; }
.pal.help dd { margin: 0; font-size: 14px; }
.pal.help .to { color: var(--dim); font-size: 11px; margin: 0 4px 0 1px; }
.help-foot { margin: 10px 0 0; color: var(--dim); font-size: 12px; }
@media (max-width: 600px) { .pal-foot { display: none; } .pal-m span:not(.pdot):not(.late) { display: none; } }

/* ---------- sélection multiple : barre d'actions ---------- */
body.selecting .capture { display: none !important; }
.selbar { position: fixed; left: 0; right: 0; bottom: calc(var(--tab-h) + var(--sab)); z-index: 31; padding: 8px 12px 10px; animation: up .18s cubic-bezier(.2, .8, .2, 1); }
.selbar .sb-in { max-width: 720px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; background: var(--panel); border: 1px solid var(--line2); border-radius: 16px; box-shadow: var(--shadow); padding: 8px 8px 8px 14px; }
.selbar .sb-n { flex: 1; font-weight: 600; font-size: 14px; white-space: nowrap; }
.selbar .sb-acts { order: 3; flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 6px; }
.selbar .sb-acts .btn { flex: none; gap: 6px; }
.selbar .sb-acts .btn svg { width: 15px; height: 15px; }
.selbar .sb-x { width: 30px; height: 30px; border-radius: 9px; color: var(--muted); }
.selbar .sb-x:hover { background: var(--panel2); color: var(--text); }
.sb-menu { position: absolute; bottom: calc(100% - 2px); min-width: 210px; max-height: 300px; overflow: auto; background: var(--panel); border: 1px solid var(--line2); border-radius: 12px; box-shadow: var(--shadow); padding: 5px; display: grid; }
.sb-menu[hidden] { display: none; }
.sb-menu button, .sb-menu .sb-pick, .ctx-menu > button { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 8px; font-size: 14px; text-align: left; color: var(--text); }
.sb-menu button:hover, .ctx-menu > button:hover, .ctx-menu > button:focus-visible { background: var(--panel2); outline: 0; }
.sb-menu button svg, .ctx-menu > button svg { width: 16px; height: 16px; color: var(--muted); flex: none; }
.sb-menu .sb-pick { color: var(--muted); border-top: 1px solid var(--line); border-radius: 0; margin-top: 4px; padding-top: 10px; }
.sb-menu .sb-pick input { padding: 6px 8px; font-size: 14px; flex: 1; min-width: 0; }
.sb-menu .pr { width: 10px; height: 10px; border-radius: 3px; border: 2px solid var(--line2); }
.sb-menu .pr.p1 { border-color: var(--p1); } .sb-menu .pr.p2 { border-color: var(--p2); } .sb-menu .pr.p3 { border-color: var(--p3); }

/* ---------- volet de détail (≥ 1100 px) ---------- */
.sheet .sheet-x { display: none; }
@media (min-width: 900px) {
  .selbar { left: 232px; bottom: 0; padding: 14px 36px 20px; }
  .selbar .sb-acts { order: 0; flex-basis: auto; flex: 0 1 auto; flex-wrap: nowrap; }
}
@media (min-width: 1100px) {
  body.has-detail .shell { grid-template-columns: 232px minmax(0, 1fr) 380px; }
  .detail { position: sticky; top: 0; height: 100dvh; overflow: auto; background: var(--panel); border-left: 1px solid var(--line); animation: slidein .18s cubic-bezier(.2, .8, .2, 1); overscroll-behavior: contain; }
  .detail .sheet { max-width: none; max-height: none; overflow: visible; border-radius: 0; box-shadow: none; animation: none; background: none; padding: 18px 20px 28px; }
  .detail .grab { display: none; }
  .detail .sheet .sheet-x { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; color: var(--muted); flex: none; margin-top: 4px; }
  .detail .sheet .sheet-x:hover { background: var(--panel2); color: var(--text); }
  .detail .row { grid-template-columns: 1fr 1fr; }
  body.has-detail .capture, body.has-detail .selbar { right: 380px; }
  body.has-detail .selbar { padding-left: 28px; padding-right: 28px; }
  body.has-detail .selbar .sb-acts { order: 3; flex-basis: 100%; flex-wrap: wrap; }
  body.has-detail .toast { left: calc(50% - 74px); }
  body.has-detail .main { padding-left: 28px; padding-right: 28px; }
}
@keyframes slidein { from { transform: translateX(14px); opacity: 0; } }

/* ---------- web v3 : catégories et projets à réordonner, renommer, recolorer ---------- */
/* pastilles sombres (couleur libre) : léger liseré pour rester visibles sur fond sombre */
:root[data-theme="dark"] .pdot { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
/* en-têtes de catégories (vue Projets) : poignée au survol, dans la marge, sans prendre de place */
.sec[data-aid] > h2 { position: relative; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.sec h2 .agrip { position: absolute; left: -22px; top: 50%; width: 18px; height: 24px; margin-top: -12px; display: grid; place-items: center; color: var(--dim); opacity: 0; cursor: grab; transition: opacity .12s; }
.sec h2 .agrip svg { width: 14px; height: 14px; }
.sec h2:hover .agrip { opacity: 1; }
.sec h2 .ah .edit-a { padding: 0 6px; font-weight: 400; }
@media (hover: none) { .sec h2 .agrip { display: none; } }
@media (hover: hover) {
  .sec h2 .ah .edit-a { opacity: 0; transition: opacity .12s; }
  .sec h2:hover .ah .edit-a, .sec h2 .ah .edit-a:focus-visible { opacity: 1; }
}
/* glisser des catégories : les grilles se replient, seuls les en-têtes restent */
body.drag-areas #main > .sec > .pgrid { display: none; }
body.drag-areas #main > .sec { margin-bottom: 10px; }
.sec.drag-ph { border-radius: 10px; padding: 2px 6px; }
.sec-ghost { padding: 8px 12px 4px; border-radius: 12px; }
.sec-ghost h2 { margin: 0; }
.sec-ghost .agrip { display: none; }
/* titre d'un projet : pastille cliquable (couleur) et nom renommable */
.title-dot { display: inline-grid; place-items: center; width: 28px; height: 28px; margin: 0 4px 0 -7px; border-radius: 8px; vertical-align: 2px; }
.title-dot:hover { background: var(--panel2); }
.title-dot .pdot { width: 12px; height: 12px; }
/* renommer sur place */
input.inl { width: 100%; min-width: 0; margin: -3px 0; padding: 2px 6px; font: inherit; letter-spacing: inherit; text-transform: none; color: var(--text); background: var(--panel); border: 1px solid var(--accent); border-radius: 6px; }
.inl-host { min-width: 0; }
.sec h2 .an.inl-host { width: min(300px, 55vw); }
.topbar h1 .pn.inl-host { display: inline-block; width: min(420px, 62vw); vertical-align: middle; }
.ptile.editing { cursor: default; }
.ptile .nm.inl-host { display: block; margin: 0 -7px; }
/* barre latérale : groupes et projets glissables */
.side a, .side .area { -webkit-touch-callout: none; }
.side a .ln { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side .side-empty { padding: 4px 10px; font-size: 12px; }
.side .area-list > .empty:not(:only-child) { display: none; }
.side .area-list.rest:empty { display: none; }
body.dragging .side .area-list:empty { display: block; min-height: 30px; }
.side .area.drop-into { background: var(--accent-soft); color: var(--accent); box-shadow: inset 0 0 0 1.5px var(--accent); }
body.drag-sareas .side .sgroup > .area-list { display: none; }
.side .drag-ghost { background: var(--panel); }
.side .side-edit, .side .area.editing { display: flex; align-items: center; gap: 10px; padding: 4px 10px; border-radius: 8px; font-size: 14px; color: var(--text); background: rgba(0, 0, 0, .04); }
.side .area.editing { gap: 8px; }
.side .side-edit .ln.inl-host, .side .area .an.inl-host { flex: 1 1 auto; }
.side .side-edit .n, .side .area.editing .n, .side .area.editing .chev { display: none; }
/* menu contextuel : même style que les menus de la barre de sélection */
.ctx-menu { position: fixed; z-index: 85; min-width: 210px; max-width: calc(100vw - 16px); max-height: calc(100dvh - 16px); overflow: auto; background: var(--panel); border: 1px solid var(--line2); border-radius: 12px; box-shadow: var(--shadow); padding: 5px; display: grid; animation: fade .1s ease-out; }
.ctx-menu > button.danger, .ctx-menu > button.danger svg { color: var(--danger); }
.ctx-h { display: flex; align-items: center; gap: 8px; max-width: 250px; padding: 6px 10px 6px; font-size: 12px; font-weight: 600; color: var(--muted); }
.ctx-h > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ctx-sep { height: 1px; margin: 4px 6px; background: var(--line); }
.ctx-dot { width: 14px; height: 14px; margin: 0 1px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); }
.ctx-more { margin-left: auto; color: var(--dim); }
.ctx-menu > .ctx-back { color: var(--muted); font-size: 13px; font-weight: 600; }
.ctx-sw { max-width: 214px; padding: 6px 8px 8px; }

/* ---------- compte : avatar, barre latérale, page Compte ---------- */
.avatar { position: relative; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; overflow: hidden; flex: none; background: var(--accent); color: var(--accent-ink); font-weight: 600; font-size: 11px; letter-spacing: .02em; line-height: 1; -webkit-user-select: none; user-select: none; }
/* sombre : pastille assombrie (initiales blanches lisibles sur tous les thèmes ; bordeaux ≈ l’ancien #7b1e3c) */
:root[data-theme="dark"] .avatar { background: color-mix(in srgb, var(--accent) 50%, #000); color: #fff; }
.avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: var(--panel2); }
.avatar.xs { width: 30px; height: 30px; font-size: 12px; }
.avatar.sm { width: 24px; height: 24px; font-size: 10px; }
.avatar.md { width: 44px; height: 44px; font-size: 16px; }
.avatar.lg { width: 64px; height: 64px; font-size: 23px; }
/* barre latérale : le compte en bas, toujours visible */
.side .side-me { margin-top: auto; position: sticky; bottom: -20px; padding: 14px 0 20px; margin-bottom: -20px; background: var(--side); }
.side .side-me::before { content: ''; display: block; height: 1px; margin: 0 10px 8px; background: var(--line); }
.side a.me { gap: 10px; padding: 6px 10px; }
.side a.me .ln { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
/* téléphone : avatar dans l'en-tête (pas de barre latérale) */
.me-btn { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; }
.me-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
@media (min-width: 900px) { .topbar .me-btn { display: none; } }
.topbar .tb-l { min-width: 0; }
.topbar h1 { overflow-wrap: break-word; }
/* Réglages : entrée vers le compte */
.acct-entry { display: flex; align-items: center; gap: 14px; color: var(--text); text-decoration: none; transition: background .15s; }
.acct-entry:hover { background: var(--panel2); }
.acct-entry .chev { margin-left: auto; color: var(--dim); font-size: 24px; line-height: 1; }
.acct-who { display: grid; min-width: 0; gap: 1px; }
.acct-nm { font-size: 16px; font-weight: 600; letter-spacing: -.01em; overflow-wrap: anywhere; }
.acct-em { color: var(--muted); font-size: 13.5px; overflow-wrap: anywhere; }
/* page Compte */
.acct .acct-id { display: flex; align-items: center; gap: 14px; padding: 6px 0 14px; border-bottom: 1px solid var(--line); }
.acct .acct-id .acct-nm { font-size: 19px; font-weight: 700; }
.acct label.line { cursor: default; }
.acct .acct-in { width: min(220px, 52%); flex: none; text-align: right; }
.acct .acct-in:focus { text-align: left; }
.acct .acct-sel { width: min(240px, 52%); flex: none; }
.acct-prov { display: flex; align-items: center; gap: 12px; }
.acct-prov > svg { width: 20px; height: 20px; flex: none; color: var(--muted); }
.acct-prov .apple-logo { width: 17px; height: 20px; color: var(--text); }
.acct-prov > span { min-width: 0; overflow-wrap: anywhere; }
.acct .tag { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 11px; font-weight: 600; vertical-align: 1px; white-space: nowrap; }
.acct-note { margin: 8px 0 0; color: var(--dim); font-size: 12.5px; }
.set .acct-note { margin: -4px 0 10px; }
.acct-foot { padding-top: 10px; }
.acct .err { color: var(--danger); font-size: 13px; }
.acct-form { display: grid; gap: 8px; padding: 4px 0 12px; }
.acct-form-r { display: flex; gap: 8px; justify-content: flex-end; }
.acct-pending { margin: 2px 0 12px; padding: 12px; border-radius: var(--radius-s); background: var(--accent-soft); font-size: 13.5px; }
.acct-pending p { margin: 0 0 8px; }
.acct-pending .acct-form { padding: 0; }
.acct-pending label { font-weight: 600; font-size: 13px; }
.acct-code-row { display: flex; gap: 8px; }
.acct-code-row input { flex: 1; min-width: 0; background: var(--panel); letter-spacing: .2em; font-variant-numeric: tabular-nums; }
.acct-pending .ok-msg { font-weight: 600; }
.acct-lang { flex: none; }
.acct-lang button { flex: none; padding: 6px 12px; white-space: nowrap; }
.acct-lang button:disabled { opacity: .55; cursor: default; }
.danger-zone h2 { color: var(--danger); }
.acct-legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 10px; padding: 4px 0 12px; color: var(--dim); font-size: 12.5px; }
.acct-legal a { color: var(--muted); }
.acct-legal a:hover { color: var(--accent); }
@media (max-width: 480px) {
  .acct label.line, .acct .line.dev { flex-wrap: wrap; }
  .acct .acct-in, .acct .acct-sel { width: 100%; text-align: left; }
}
/* feuille de suppression du compte */
.sh-p { margin: 0 0 14px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.sheet .err { color: var(--danger); font-size: 13px; min-height: 1.2em; }
.btn.danger-solid { background: color-mix(in srgb, var(--danger) 70%, #000); color: #fff; }
.btn.danger-solid:hover { background: color-mix(in srgb, var(--danger) 55%, #000); }

/* ---------- Aujourd'hui en grille Bento ----------
   4 colonnes ≥ 900 px, 2 en dessous ; .bt-1 / .bt-2 / .bt-2x2 / .bt-4. Teinte d'une tuile : --ic (icône, dégradé). */
.main.is-today { max-width: 960px; }
.bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(150px, auto); grid-auto-flow: row dense; gap: 14px; }
.bt { --ic: var(--accent); position: relative; display: flex; flex-direction: column; min-width: 0; padding: 16px 18px; border-radius: 20px; background: var(--panel); border: 1px solid var(--line); color: var(--text); box-shadow: 0 1px 2px rgba(0, 0, 0, .03); }
.bt-1 { grid-column: span 1; }
.bt-2 { grid-column: span 2; }
.bt-2x2 { grid-column: span 2; grid-row: span 2; }
.bt-4 { grid-column: 1 / -1; }
.bt-bare > .card { margin: 0; }
/* tuile-lien : se soulève au survol, chevron en haut à droite ; les tuiles à contenu interactif ne bougent pas */
a.bt, .bt.is-link { text-decoration: none; transition: transform .22s cubic-bezier(.2, .8, .2, 1), box-shadow .22s, border-color .22s; }
a.bt:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* tuile-lien qui contient un autre lien (Élan → page Jalons, et « Journal ») : un lien couvrant, le second au-dessus */
.bt-cover { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.bt-cover:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.bt.is-link .bt-over { position: relative; z-index: 2; }
.bt-go { position: absolute; top: 15px; right: 16px; font-size: 22px; line-height: 1; color: var(--dim); opacity: 0; transform: translateX(-4px); transition: opacity .2s, transform .2s cubic-bezier(.2, .8, .2, 1); }
@media (hover: hover) {
  a.bt:hover, .bt.is-link:hover { transform: translateY(-2px); border-color: var(--line2); box-shadow: 0 14px 30px -18px rgba(0, 0, 0, .28); }
  a.bt:hover .bt-go { opacity: 1; transform: none; }
}
a.bt:active, .bt.is-link:has(.bt-cover:active) { transform: scale(.985); transition-duration: .08s; }
/* en-tête : icône dans un carré teinté, libellé, compteur ou lien à droite */
.bt-head { display: flex; align-items: center; gap: 9px; min-width: 0; margin: 0 0 12px; font-size: 13.5px; font-weight: 600; color: var(--muted); }
.bt-ico { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; color: var(--ic); background: color-mix(in srgb, var(--ic) 13%, transparent); }
.bt-ico svg { width: 16px; height: 16px; }
.bt-lbl { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bt-n { color: var(--dim); font-weight: 500; font-variant-numeric: tabular-nums; }
.bt-count { margin-left: auto; flex: none; font-size: 13px; font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; }
.bt-link { margin-left: auto; flex: none; font-size: 13px; font-weight: 600; color: var(--ic); }
.bt-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.bt-head .bt-act { margin: -4px -10px -4px auto; flex: none; }
/* teintes d'état : dégradé léger de la couleur de la tuile */
.bt.is-late { --ic: var(--danger); }
.bt.is-soon { --ic: var(--amber); }
.bt.is-ok { --ic: color-mix(in srgb, var(--ok) 75%, #000); }
.bt.is-accent { --ic: var(--accent); }
.bt.is-late, .bt.is-soon, .bt.is-ok, .bt.is-accent { background: linear-gradient(155deg, color-mix(in srgb, var(--ic) 9%, var(--panel)) 0%, var(--panel) 62%); }
:root[data-theme="dark"] .bt.is-ok { --ic: var(--ok); }
:root[data-theme="dark"] .bt { box-shadow: none; }
/* chiffres et textes */
.bt-big { margin: 2px 0 0; font-size: 40px; font-weight: 750; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; color: var(--text); white-space: nowrap; }
.bt-big small { margin-left: 6px; font-size: 15px; font-weight: 600; letter-spacing: 0; color: var(--muted); }
.bt-sub { margin: auto 0 0; padding-top: 10px; font-size: 13px; line-height: 1.4; color: var(--muted); }
.bt-sub + .bt-sub { margin-top: 0; padding-top: 1px; color: var(--dim); }
.bt-calm { margin: auto 0; font-size: 16px; font-weight: 650; line-height: 1.4; color: var(--text); }
.bt-calm span { display: block; font-size: 13px; font-weight: 500; color: var(--muted); }
.bt.is-ok .bt-calm { color: var(--ic); }
.bt-calm + .bt-sub { margin-top: 0; }
/* apparition : fondu + 6 px, décalé de 40 ms par tuile, seulement à l'arrivée sur la vue */
@keyframes bt-in { from { opacity: 0; transform: translateY(6px); } }
.bento.in > * { animation: bt-in .42s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(var(--i, 0) * 40ms); }
@media (prefers-reduced-motion: reduce) { .bento.in > * { animation: none; } }

/* Ma journée : la liste du jour (cases, glisser-déposer, clavier, sélection) */
.bt-dayhead { margin-bottom: 10px; }
.bt-date { min-width: 0; font-size: 24px; font-weight: 750; letter-spacing: -.02em; line-height: 1.15; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bt-day .tasks { margin: 0 -10px; }
.bt-day > .tasks:last-child { flex: 1 1 auto; }
.bt-group + .bt-group { margin-top: 12px; }
.bt-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 26px; margin: 0 0 2px; font-size: 12.5px; font-weight: 600; color: var(--muted); letter-spacing: .01em; }
.bt-label.late { color: var(--danger); }
.bt-label .btn { margin-right: -10px; }
.bt-day .tasks > .drop-empty { padding: 4px 10px 6px; }
.bt-day .tasks > .drop-empty:empty { display: none; }
.bt-empty { min-height: 220px; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 8px 12px 16px; text-align: center; color: var(--muted); font-size: 14px; }
.bt-empty b { color: var(--text); font-size: 16px; font-weight: 650; }
.bt-sun { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 10px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); }
.bt-sun svg { width: 28px; height: 28px; }

/* Le cap du matin : phrase du jour, propositions en un clic, validation. Fond --accent-soft, jamais de rouge. */
.bt.bt-cap { background: var(--accent-soft); border-color: transparent; box-shadow: none; }
.bt-cap .bt-ico { background: color-mix(in srgb, var(--ic) 16%, var(--panel)); }
.bt-cap:focus { outline: none; }
.bt-cap:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cap-say { margin: 0; font-size: 16px; font-weight: 600; line-height: 1.45; letter-spacing: -.005em; color: var(--text); text-wrap: pretty; }
.cap-props { display: grid; gap: 14px; margin-top: 14px; }
.cap-prop { display: grid; gap: 7px; min-width: 0; }
.cap-pl { font-size: 13px; font-weight: 600; line-height: 1.35; color: var(--muted); }
.cap-btns { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.bt-cap .btn.sm:not(.pri):not(.ghost) { background: var(--panel); border-color: color-mix(in srgb, var(--accent) 16%, transparent); }
.bt-cap .btn.sm:not(.pri):not(.ghost):hover { background: color-mix(in srgb, var(--accent) 8%, var(--panel)); }
.bt-cap .btn:focus-visible, .cap-link:focus-visible, .cap-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cap-picks { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.cap-picks li { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 4px 4px 4px 12px; border-radius: 11px; background: var(--panel); }
.cap-t { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.cap-picks .btn.sm { flex: none; border-color: transparent; background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.cap-chip { max-width: 100%; }
.cap-word { margin-top: 16px; padding-top: 14px; border-top: 1px solid color-mix(in srgb, var(--accent) 16%, transparent); }
.cap-h { margin: 0 0 6px; font-size: 12.5px; font-weight: 600; letter-spacing: .01em; color: var(--muted); }
.cap-word .txt { white-space: pre-wrap; font-size: 14.5px; line-height: 1.6; }
.cap-word .bt-sub { padding-top: 6px; }
.cap-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 16px; }
.cap-foot .btn.pri { padding: 7px 16px; font-weight: 600; }
.cap-when { font-size: 13px; color: var(--muted); }
.cap-done { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 12px; font-size: 13px; color: var(--muted); }
.cap-done svg { flex: none; width: 14px; height: 14px; color: var(--accent); }
.cap-link { font-size: 13px; font-weight: 600; color: var(--accent); }
.cap-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.bt-cap.is-folded .cap-say { font-size: 15px; }
/* repliée : bande d'une ligne au-dessus de la grille (en-tête, phrase courte, « Journée validée à 8:12 · Revoir ») */
.cap-band { --ic: var(--accent); display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; margin: 0 0 14px; padding: 10px 16px; border-radius: 18px; background: var(--accent-soft); color: var(--text); }
.cap-band .bt-head { margin: 0; flex: none; }
.cap-band .cap-say { flex: 1 1 240px; min-width: 0; }
.cap-band .cap-done { margin: 0 0 0 auto; padding: 0; flex: none; }
@media (max-width: 559px) { .cap-band { margin-bottom: 10px; padding: 12px 15px; } .cap-band .cap-done { margin-left: 0; } }
/* à 4 colonnes, la tuile se place à droite de Ma journée (elle la précède dans le document : en premier sur téléphone) */
@media (min-width: 900px) { .bt-cap { grid-column: 3 / span 2; } }
.bt-ring { flex: none; width: 28px; height: 28px; transform: rotate(-90deg); }
.bt-ring circle { fill: none; stroke: var(--line); stroke-width: 3; }
.bt-ring circle.on { stroke: var(--accent); stroke-linecap: round; }
.bt-habits .habit-strip { gap: 7px; }
.bt-habits .hstreak { font-size: 12px; opacity: .8; }
.bt-agenda .events { margin: 0 -6px; }

/* À venir : 7 petites colonnes, puis les prochaines tâches */
.bt-week { display: flex; align-items: flex-end; gap: 6px; margin: 0 0 12px; }
.bt-wd { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.bt-wd b { min-height: 17px; font-size: 12.5px; font-weight: 700; line-height: 17px; color: var(--text); font-variant-numeric: tabular-nums; }
.bt-bar { display: flex; align-items: flex-end; width: 100%; max-width: 30px; height: 36px; border-radius: 8px; overflow: hidden; background: color-mix(in srgb, var(--ic) 10%, transparent); }
.bt-bar i { display: block; width: 100%; border-radius: 8px; background: var(--ic); }
.bt-wd.is-empty .bt-bar { background: none; border: 1.5px dashed var(--line2); }
.bt-wd small { font-size: 11px; font-weight: 600; color: var(--dim); }
.bt-next { list-style: none; margin: auto 0 0; padding: 0; display: grid; gap: 4px; }
.bt-next li { display: flex; align-items: baseline; gap: 8px; min-width: 0; font-size: 13.5px; line-height: 1.35; }
.bt-when { flex: none; width: 52px; font-size: 12px; font-weight: 600; color: var(--ic); white-space: nowrap; }
.bt-t { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bt-tm { flex: none; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.bt-upcoming .bt-calm { margin-top: 2px; }

/* Projets : pastille, nom, reste à faire, barre fine */
.bt-plist { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.bt-plist li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 6px 8px; min-width: 0; }
.bt-plist .pdot { width: 10px; height: 10px; }
.bt-pn { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14.5px; font-weight: 600; }
.bt-pc { font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.bt-plist .bar { grid-column: 1 / -1; height: 4px; border-radius: 2px; background: var(--panel3); overflow: hidden; }
.bt-plist .bar i { display: block; height: 100%; border-radius: 2px; }
.bt-projects.is-wide .bt-plist { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 22px; }
.bt-cta { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; padding: 7px 14px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-size: 13px; font-weight: 600; }
.bt-cta svg { width: 14px; height: 14px; }
.bt-cta:hover { background: var(--accent-hover); }

/* 560 à 899 px : 2 colonnes ; sous 560 px : tuiles-chiffres par deux, le reste en pleine largeur */
@media (max-width: 899px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; }
  .bt-2, .bt-2x2, .bt-4 { grid-column: 1 / -1; grid-row: auto; }
  .bt-1 { min-height: 138px; }
  .bt-projects.is-wide .bt-plist { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 559px) {
  /* en-tête : la salutation garde sa ligne, les boutons passent dessous, à droite */
  .main.is-today .topbar { flex-wrap: wrap; row-gap: 8px; margin-bottom: 14px; }
  .main.is-today .topbar .tb-l { flex: 1 1 220px; }
  .main.is-today .topbar .actions { margin-left: auto; }
  .bento { gap: 10px; }
  .bt { padding: 15px 16px; border-radius: 18px; }
  .bt-big { font-size: 36px; }
  .bt-empty { min-height: 200px; }
}

/* ---------- Habitudes façon Bento : la partie la plus joyeuse de l'app ----------
   Chaque tuile porte la couleur de son habitude (--hc) : dégradé léger, carré d'icône plein, anneau, pastilles. */
.main.is-habits { max-width: 960px; }
.hb-seg { padding: 2px; }
.hb-seg button { padding: 5px 12px; font-size: 13px; }
.hb-page { grid-auto-rows: auto; }
@media (min-width: 560px) and (max-width: 899px) { .hb-page > .hb-tile { grid-column: span 1; } }
.hb-tile { --hc: var(--accent); --hc-ink: var(--accent-ink); background: linear-gradient(155deg, color-mix(in srgb, var(--hc) 10%, var(--panel)) 0%, var(--panel) 72%); border-color: color-mix(in srgb, var(--hc) 14%, var(--line)); }
:root[data-theme="dark"] .hb-tile { background: linear-gradient(155deg, color-mix(in srgb, var(--hc) 14%, var(--panel)) 0%, var(--panel) 72%); }
.hb-tile.is-paused { background: var(--panel); border-color: var(--line); }
.hb-top { display: flex; align-items: center; gap: 12px; min-width: 0; }
.hb-ico { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: var(--hc); color: var(--hc-ink, #fff); font-size: 21px; line-height: 1; }
.hb-ico svg { width: 23px; height: 23px; }
.hb-ico.sm { width: 30px; height: 30px; border-radius: 9px; font-size: 16px; }
.hb-ico.sm svg { width: 17px; height: 17px; }
.hb-tile.is-paused .hb-ico { background: var(--panel3); color: var(--muted); }
.hb-id { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; }
.hb-nm { max-width: 100%; font-size: 16.5px; font-weight: 650; line-height: 1.25; text-align: left; color: var(--text); overflow-wrap: anywhere; border-radius: 6px; }
.hb-nm:hover { text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--hc) 60%, transparent); text-underline-offset: 3px; }
.hb-nm:focus-visible { outline: 2px solid var(--hc); outline-offset: 2px; }
.hb-fq { font-size: 12.5px; color: var(--muted); }
.hb-pz { display: inline-block; padding: 1px 8px; border-radius: 999px; background: var(--panel2); color: var(--muted); font-weight: 600; font-size: 12px; }
/* anneau de la semaine (et de la journée) : « 3/5 » en 15 px tabulaire */
.hb-ring { --rs: 52px; flex: none; position: relative; display: grid; place-items: center; width: var(--rs); height: var(--rs); }
.hb-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.hb-ring circle { fill: none; }
.hb-ring .tr { stroke: color-mix(in srgb, var(--hc) 16%, transparent); }
.hb-ring .on { stroke: var(--hc); stroke-linecap: round; }
.hb-rv { position: relative; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.01em; color: var(--text); }
/* les 7 jours de la semaine : pastilles généreuses (38 px), pleines si cochées, cerclées si dues, grises sinon */
.hb-week { display: flex; justify-content: space-between; gap: 4px; margin: 16px 0 14px; }
.hb-d { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; padding: 0 0 7px; border-radius: 12px; -webkit-tap-highlight-color: transparent; }
.hb-dl { font-size: 11px; font-weight: 600; line-height: 1; color: var(--dim); }
.hb-dp { position: relative; isolation: isolate; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--muted); }
.hb-dp::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: 50%; }
.hb-dp svg { width: 17px; height: 17px; }
.hb-d.is-done .hb-dp, .hb-m.is-done .hb-dp { color: var(--hc-ink, #fff); }
.hb-d.is-done .hb-dp::before, .hb-m.is-done::before { background: var(--hc); }
.hb-d.is-due .hb-dp { color: var(--text); box-shadow: inset 0 0 0 2px var(--hc); }
/* jours passés non cochés : cercle adouci (seul aujourd'hui garde le trait plein), jamais de reproche */
.hb-d.is-due:not(.is-today) .hb-dp { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--hc) 42%, transparent); }
.hb-m.is-due:not(.is-today) { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--hc) 42%, transparent); }
.hb-grip { position: absolute; top: 6px; left: 50%; width: 28px; height: 16px; margin-left: -14px; display: grid; place-items: center; color: var(--dim); opacity: 0; cursor: grab; transition: opacity .12s; }
.hb-grip svg { width: 14px; height: 14px; transform: rotate(90deg); }
.hb-tile:hover .hb-grip, .drag-ghost .hb-grip { opacity: 1; }
@media (hover: none) { .hb-grip { display: none; } }
.hb-tile { cursor: default; }
.hb-d.is-next .hb-dp { color: var(--dim); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--hc) 40%, transparent); }
.hb-d.is-off .hb-dp { background: var(--panel2); color: var(--dim); }
.hb-d.is-later .hb-dp { background: none; box-shadow: inset 0 0 0 1px var(--line); }
.hb-d.is-today .hb-dl { color: var(--hc); }
.hb-d.is-today::after { content: ''; position: absolute; left: 50%; bottom: 0; width: 16px; height: 3px; margin-left: -8px; border-radius: 2px; background: var(--hc); }
.hb-d:disabled { cursor: default; }
.hb-d:not(:disabled):hover .hb-dp { transform: scale(1.06); }
.hb-dp { transition: transform .15s; }
.hb-d:focus-visible { outline: 0; }
.hb-d:focus-visible .hb-dp, .hb-m:focus-visible { outline: 2px solid var(--hc); outline-offset: 2px; }
.hb-d.hb-bounce .hb-dp { animation: hb-pop .22s cubic-bezier(.3, .7, .4, 1); }
.hb-d.hb-bounce .hb-dp::before, .hb-m.hb-bounce::before { animation: hb-fill .22s ease-out; }
.hb-m.hb-bounce { animation: hb-pop .22s cubic-bezier(.3, .7, .4, 1); }
/* vue mois : calendrier du mois courant, cases colorées */
.hb-month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; margin: 14px 0 12px; }
.hb-mh { font-size: 10.5px; font-weight: 600; text-align: center; color: var(--dim); }
.hb-m, .hb-mx { aspect-ratio: 1; min-height: 0; }
.hb-m { position: relative; isolation: isolate; display: grid; place-items: center; border-radius: 9px; font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--muted); }
.hb-m::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; }
.hb-m .hb-dp { width: auto; height: auto; font-size: inherit; color: inherit; }
.hb-m .hb-dp::before { display: none; }
.hb-m.is-due { color: var(--text); box-shadow: inset 0 0 0 2px var(--hc); }
.hb-m.is-next { color: var(--dim); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--hc) 40%, transparent); }
.hb-m.is-off { background: var(--panel2); color: var(--dim); }
.hb-m.is-later { background: none; box-shadow: inset 0 0 0 1px var(--line); }
.hb-m.is-today { font-weight: 800; }
.hb-m.is-today:not(.is-done) { color: var(--hc); }
.hb-m:disabled { cursor: default; }
/* bas de tuile : la série en grand avec sa flamme, le record, ⋯ */
.hb-foot { display: flex; align-items: center; gap: 10px; margin-top: auto; min-width: 0; }
.hb-st { display: inline-flex; align-items: baseline; gap: 5px; min-width: 0; }
.hb-st b { font-size: 28px; font-weight: 750; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--text); }
.hb-st > span { font-size: 13px; font-weight: 600; color: var(--muted); }
.hb-flame { flex: none; width: 20px; height: 20px; align-self: center; color: var(--hc); }
.hb-st.is-zero { align-items: center; }
.hb-st.is-zero .hb-flame { color: var(--line2); }
.hb-st.is-zero > span { font-weight: 500; }
.hb-rec { margin-left: auto; font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.hb-more { flex: none; display: grid; place-items: center; width: 32px; height: 32px; margin: -4px -6px -4px 0; border-radius: 9px; color: var(--muted); }
.hb-st.is-zero + .hb-more, .hb-st + .hb-more { margin-left: auto; }
.hb-more:hover { background: color-mix(in srgb, var(--hc) 10%, var(--panel2)); color: var(--text); }
.hb-more:focus-visible { outline: 2px solid var(--hc); outline-offset: 1px; }
.hb-more svg { width: 18px; height: 18px; }
/* tuile du jour, rose */
.hb-today { --hc: var(--accent); --hc-ink: var(--accent-ink); flex-direction: row; align-items: center; gap: 16px; background: var(--accent-soft); border-color: transparent; box-shadow: none; min-height: 0; }
.hb-today .hb-ring .tr { stroke: color-mix(in srgb, var(--accent) 18%, transparent); }
.hb-today .hb-rv { font-size: 17px; }
.hb-tt { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hb-td { font-size: 13px; font-weight: 600; color: var(--muted); }
.hb-say { margin: 0; font-size: 19px; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; color: var(--text); text-wrap: pretty; }
.hb-sun { flex: none; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 12%, var(--panel)); color: var(--accent); }
.hb-sun svg { width: 30px; height: 30px; }
/* le jardin : un mur de couleurs, 12 semaines × 7 jours par habitude, cases de 12 px à trois intensités */
.hb-garden { --ic: var(--ok); }
.hg { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 18px 26px; }
.hg-b { max-width: 220px; }
.hg-b { --hc: var(--accent); --hc-ink: var(--accent-ink); min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.hg-n { display: flex; align-items: center; gap: 8px; min-width: 0; margin-bottom: 3px; }
.hg-i { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: var(--hc); color: var(--hc-ink, #fff); font-size: 13px; line-height: 1; }
.hg-i svg { width: 14px; height: 14px; }
.hg-t { min-width: 0; font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hg-c { margin-left: auto; flex: none; font-size: 12px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.hg-months { display: grid; grid-template-columns: repeat(12, 12px); column-gap: 3px; height: 12px; }
.hg-months span { font-size: 10px; line-height: 12px; color: var(--dim); white-space: nowrap; }
.hg-cols { display: grid; grid-template-columns: repeat(12, 12px); column-gap: 3px; }
.hg-w { display: grid; grid-template-rows: repeat(7, 12px); row-gap: 3px; }
.hg-w i, .hg-legend i { display: block; width: 12px; height: 12px; border-radius: 3px; background: var(--panel2); }
.hg-w .s-done, .hg-legend .s-done { background: var(--hc); }
.hg-w .s-due, .hg-legend .s-due { background: color-mix(in srgb, var(--hc) 26%, var(--panel2)); }
.hg-w .s-off, .hg-w .s-pause, .hg-legend .s-off { background: var(--panel2); }
.hg-w .s-none { background: color-mix(in srgb, var(--panel2) 45%, transparent); }
.hg-w .s-future { background: none; }
.hg-legend { --hc: var(--accent); --hc-ink: var(--accent-ink); display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 4px 6px; margin-top: 12px; font-size: 11.5px; color: var(--dim); }
.hg-legend i + i, .hg-legend i { margin-left: 6px; }
/* archivées, page vide */
.hb-arch { margin-top: 18px; }
.hb-chev { font-size: 10px; }
.hb-alist { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.hb-alist li { --hc: var(--accent); --hc-ink: var(--accent-ink); display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px 10px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); }
.hb-alist .hb-ico.sm { background: color-mix(in srgb, var(--hc) 55%, var(--panel3)); }
.hb-an { min-width: 0; font-weight: 600; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hb-an:hover { text-decoration: underline; text-underline-offset: 3px; }
.hb-af { flex: 1 1 auto; min-width: 0; font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hb-empty .big-ico svg { width: 34px; height: 34px; }
.hb-cta { margin-top: 14px; }
/* fiche habitude */
.hs-head { --hc: var(--accent); --hc-ink: var(--accent-ink); display: flex; align-items: center; gap: 12px; margin: 0 0 14px; }
.hs-head h2 { flex: 1 1 auto; margin: 0; font-size: 17px; }
.hs-prev { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--hc); color: var(--hc-ink, #fff); font-size: 20px; line-height: 1; }
.hs-prev svg { width: 22px; height: 22px; }
.hs-icons { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 6px; }
.hs-ic { display: grid; place-items: center; aspect-ratio: 1; border-radius: 11px; background: var(--panel2); color: var(--muted); transition: background-color .15s, color .15s; }
.hs-ic svg { width: 21px; height: 21px; }
.hs-ic:hover { color: var(--text); background: var(--panel3); }
.hs-ic.on { background: var(--hc, var(--accent)); color: var(--hc-ink, var(--accent-ink)); }
.hs-ic:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hs-emoji { display: flex; align-items: center; gap: 10px; margin-top: 4px; font-size: 13px; font-weight: 500; color: var(--muted); }
.hs-emoji input[type=text] { width: 64px; padding: 6px 10px; font-size: 18px; text-align: center; }
.sw-def { position: relative; }
.hs-freq button { font-size: 13px; }
.hs-days { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.hs-dy { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--panel2); color: var(--muted); font-size: 13px; font-weight: 650; transition: background-color .15s, color .15s; }
.hs-dy.on { background: var(--hc, var(--accent)); color: var(--hc-ink, var(--accent-ink)); }
.hs-dy:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hs-quick { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.hs-quick .btn.on { background: color-mix(in srgb, var(--hc, var(--accent)) 14%, var(--panel)); color: var(--text); box-shadow: inset 0 0 0 1.5px var(--hc, var(--accent)); }
.hs-step { display: flex; align-items: center; gap: 10px; margin-top: 6px; font-size: 14px; font-weight: 500; color: var(--text); }
.hs-sum { font-size: 12.5px; font-weight: 500; color: var(--muted); }
.hs-opt { font-weight: 500; color: var(--dim); }
.hs-rem { display: flex; align-items: center; gap: 8px; }
.hs-rem input[type=text] { width: 120px; font-weight: 400; font-size: 15px; }
.hs-rem input.bad { border-color: var(--danger); }
.hs-rem .btn[hidden] { display: none; }
.hs-note { font-size: 12px; font-weight: 400; color: var(--dim); }
.sheet .fields textarea#sh-hnote { min-height: 0; resize: vertical; font-weight: 400; font-size: 15px; }
.hs-foot .l { display: flex; gap: 8px; flex-wrap: wrap; }
.hs-foot .btn svg { width: 15px; height: 15px; }
/* récap du dimanche : deux chiffres, puis les habitudes de la semaine */
.rc-nums.rc-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rc-habs { font-weight: 500; }
@media (max-width: 559px) {
  .hb-today { gap: 14px; padding: 14px 16px; }
  .hb-say { font-size: 17px; }
  .hb-dp { width: 36px; height: 36px; }
  .hs-fields .swatches { gap: 6px; }
  .hs-fields .swatches button, .hs-fields .sw-other { width: 24px; height: 24px; }
  .hb-week { gap: 2px; }
}

/* ---------- coches multiples par jour (« 8 verres d'eau ») : « 3/8 » et anneau de progression ----------
   L'anneau d'une case commencée : dégradé conique découpé en anneau par un masque (pas de filter), --p = 0 → 1. */
.hb-dc { font-size: 10.5px; font-weight: 750; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--text); white-space: nowrap; }
.hb-d.is-part .hb-dp, .hb-m.is-part { box-shadow: none; }
.hb-d.is-part .hb-dp::after, .hb-m.is-part::after { content: ''; position: absolute; inset: 0; padding: 2.5px; border-radius: inherit; pointer-events: none;
  background: conic-gradient(var(--hc) calc(var(--p, 0) * 1turn), color-mix(in srgb, var(--hc) 20%, transparent) 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.hb-d.is-part.is-off .hb-dp { background: none; }
.hb-m.is-part.is-off { background: none; }
.hb-m .hb-dc { font-size: 9.5px; }
/* puce de la tuile Aujourd'hui : « Eau 3/8 », le fond se remplit de la couleur de l'habitude */
.hchip .hc-n { font-size: 12.5px; font-weight: 650; font-variant-numeric: tabular-nums; color: var(--muted); }
.hchip.on .hc-n { color: var(--text); }
.hchip.is-part { border-color: color-mix(in srgb, var(--hc) 40%, var(--line2)); background: linear-gradient(90deg, color-mix(in srgb, var(--hc) 14%, var(--panel)) calc(var(--p, 0) * 100%), var(--panel) 0); }
.hchip.is-part .hc-n { color: var(--text); }
.hb-tile .hb-ico { cursor: pointer; }

/* ---------- page d'une habitude (#/habit/<id>) : le monde de l'habitude ----------
   #main prend toute la largeur et un dégradé de la couleur de l'habitude (--hc posé sur #main), contenu à 640 px. */
.main.is-habit { max-width: none; min-height: 100dvh; background: linear-gradient(170deg, color-mix(in srgb, var(--hc) 26%, var(--bg)) 0%, color-mix(in srgb, var(--hc) 8%, var(--bg)) 60%, var(--bg) 100%); }
:root[data-theme="dark"] .main.is-habit { background: linear-gradient(170deg, color-mix(in srgb, var(--hc) 34%, var(--bg)) 0%, color-mix(in srgb, var(--hc) 10%, var(--bg)) 60%, var(--bg) 100%); }
.hp { --hc: var(--accent); --hc-ink: var(--accent-ink); --soft: color-mix(in srgb, var(--text) 64%, transparent); max-width: 640px; margin: 0 auto; }
.hp.in { animation: hp-in .22s cubic-bezier(.2, .8, .2, 1) backwards; }
@keyframes hp-in { from { opacity: 0; transform: translateY(8px); } }
/* en-tête : retour, Modifier, ⋯ ; titre et rythme */
.hp-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 12px; }
.hp-back { display: inline-flex; align-items: center; gap: 1px; margin-left: -6px; padding: 6px 10px 6px 4px; border-radius: 10px; font-size: 14.5px; font-weight: 600; color: var(--text); text-decoration: none; }
.hp-back .ico-chev { width: 18px; height: 18px; transform: rotate(180deg); }
.hp-back:hover { background: color-mix(in srgb, var(--hc) 14%, transparent); }
.hp-back:focus-visible, .hp-mnav:focus-visible, .hp-addnote:focus-visible, .hp-edit:focus-visible { outline: 2px solid var(--hc); outline-offset: 2px; }
.hp-acts { display: flex; align-items: center; gap: 6px; }
.hp-edit { gap: 6px; padding: 7px 12px; background: color-mix(in srgb, var(--panel) 72%, transparent); }
.hp-edit:hover { background: var(--panel); }
.hp-edit svg { width: 15px; height: 15px; }
.hp .hp-more { margin: 0; }
.hp-more:hover { background: color-mix(in srgb, var(--hc) 14%, transparent); }
.hp-head { margin: 0; }
.hp-title { margin: 0; font-size: 32px; font-weight: 750; line-height: 1.12; letter-spacing: -.025em; overflow-wrap: anywhere; }
.hp-sub { margin: 5px 0 0; font-size: 14.5px; font-weight: 500; color: var(--soft); }
/* le bouton : disque plein de la couleur, icône blanche, ombre colorée douce ; enfoncé à la pression, rebond au relâchement */
.hp-hero { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 28px 0 6px; }
.hp-disk { position: relative; width: 132px; height: 132px; }
.hp-btn { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 100%; height: 100%; border-radius: 50%; background: var(--hc); color: var(--hc-ink, #fff);
  box-shadow: 0 18px 40px -16px color-mix(in srgb, var(--hc) 60%, transparent); transition: transform .12s cubic-bezier(.3, .7, .4, 1); touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.hp-btn:not(:disabled):active, .hp-btn.is-press { transform: scale(.94); }
.hp-btn.is-done { box-shadow: 0 9px 20px -12px color-mix(in srgb, var(--hc) 60%, transparent); }
.hp-btn:focus-visible { outline: 3px solid var(--hc); outline-offset: 5px; }
.hp-btn:disabled { cursor: default; }
.hp-btn.is-paused { background: var(--panel3); color: var(--muted); box-shadow: none; }
.hp-bi { display: grid; place-items: center; width: 48px; height: 48px; font-size: 42px; line-height: 1; }
.hp-bi svg { width: 48px; height: 48px; }
.hp-bi .hi-t { font-size: 54px; line-height: 1; } /* un emoji paraît plus petit qu’une icône à taille égale */
.hp-btn.is-done .hp-bi svg { width: 58px; height: 58px; }
.hp-bn { font-size: 14px; font-weight: 750; line-height: 1; font-variant-numeric: tabular-nums; color: color-mix(in srgb, var(--hc-ink, #fff) 95%, transparent); }
.hp-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); pointer-events: none; }
.hp-ring circle { fill: none; stroke-width: 4.55; } /* 6 px sur un disque de 132 */
.hp-ring .tr { stroke: color-mix(in srgb, var(--hc-ink, #fff) 24%, transparent); }
.hp-ring .on { stroke: color-mix(in srgb, var(--hc-ink, #fff) 90%, transparent); stroke-linecap: round; }
.hp-btn.hp-pop { animation: hp-pop .26s cubic-bezier(.3, .7, .4, 1); }
@keyframes hp-pop { 0% { transform: scale(.94); } 55% { transform: scale(1.06); } 100% { transform: scale(1); } }
.hp-wave { position: absolute; inset: 0; border-radius: 50%; border: 3px solid var(--hc); pointer-events: none; animation: hp-wave .5s cubic-bezier(.2, .7, .3, 1) forwards; }
@keyframes hp-wave { from { transform: scale(1); opacity: 1; } to { transform: scale(1.9); opacity: 0; } }
.hp-under { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; min-height: 28px; } /* au-dessus du cercle qui s’évase */
.hp-tag { margin: 0; padding: 4px 12px; border-radius: 999px; background: color-mix(in srgb, var(--hc) 16%, var(--panel)); font-size: 13px; font-weight: 650; color: var(--text); }
.hp-tag.is-pause { background: var(--panel2); color: var(--muted); }
.hp-resume svg { width: 15px; height: 15px; }
/* la série en très gros (absente à zéro), le record en petit */
.hp-streak { display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 6px 0 20px; }
.hp-sn { display: inline-flex; align-items: baseline; gap: 8px; }
.hp-sn .hb-flame { width: 34px; height: 34px; align-self: center; }
.hp-sn b { font-size: 56px; font-weight: 750; line-height: 1; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.hp-sn > span { font-size: 18px; font-weight: 650; color: var(--soft); }
.hp-rec { font-size: 13px; font-weight: 500; color: var(--soft); }
.hp.is-paused .hp-sn .hb-flame { color: var(--muted); }
/* la semaine (pastilles de 44 px) et le mois (cases de 36 px et plus) dans des cartes légères */
.hp-card { margin: 0 0 14px; padding: 15px 18px 16px; border-radius: 20px; background: color-mix(in srgb, var(--panel) 76%, transparent); border: 1px solid color-mix(in srgb, var(--hc) 16%, var(--line)); }
.hp-h { margin: 0; font-size: 14px; font-weight: 650; color: var(--soft); }
.hp-week { margin: 12px 0 0; }
.hp-week .hb-dp { width: clamp(36px, calc((100vw - 92px) / 7), 44px); height: clamp(36px, calc((100vw - 92px) / 7), 44px); font-size: 14px; }
.hp-week .hb-dp svg { width: 19px; height: 19px; }
.hp-week .hb-dl { font-size: 11.5px; }
.hp-week .hb-dc { font-size: 11px; }
.hp-mhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.hp-nav { display: flex; gap: 4px; margin: -6px -8px -6px 0; }
.hp-mnav { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; font-size: 22px; line-height: 1; color: var(--text); }
.hp-mnav:hover:not(:disabled) { background: color-mix(in srgb, var(--hc) 14%, transparent); }
.hp-mnav:disabled { opacity: .3; cursor: default; }
.hp-month { grid-template-columns: repeat(7, minmax(36px, 46px)); justify-content: center; gap: 6px; margin: 12px 0 0; }
.hp-month .hb-mh { font-size: 11.5px; }
.hp-month .hb-m { border-radius: 11px; font-size: 13px; }
.hp-month .hb-dc { font-size: 10.5px; }
/* l'intention, puis trois totaux */
.hp-note { margin: 4px 0 18px; padding: 13px 18px; border-left: 3px solid var(--hc); border-radius: 4px 16px 16px 4px; background: color-mix(in srgb, var(--panel) 70%, transparent); font-size: 15.5px; line-height: 1.5; color: var(--text); overflow-wrap: anywhere; }
.hp-nl { font-weight: 700; }
.hp-addnote { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 16px -8px; padding: 6px 10px; border-radius: 10px; font-size: 13.5px; font-weight: 600; color: var(--soft); }
.hp-addnote svg { width: 15px; height: 15px; }
.hp-addnote:hover { color: var(--text); background: color-mix(in srgb, var(--hc) 12%, transparent); }
.hp-tot { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 4px 0 0; padding: 16px 0 0; border-top: 1px solid color-mix(in srgb, var(--hc) 20%, var(--line)); }
.hp-t { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; text-align: center; }
.hp-t b { font-size: 24px; font-weight: 750; line-height: 1.1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.hp-t span { font-size: 12.5px; font-weight: 500; color: var(--soft); }
@media (max-width: 559px) {
  .hp-disk { width: 112px; height: 112px; }
  .hp-hero { margin-top: 22px; }
  .hp-bi, .hp-bi svg { width: 42px; height: 42px; }
  .hp-bi { font-size: 36px; }
  .hp-bi .hi-t { font-size: 46px; }
  .hp-btn.is-done .hp-bi svg { width: 50px; height: 50px; }
  .hp-card { padding: 13px 12px 14px; }
  .hp-sn b { font-size: 52px; }
  .hp-week { gap: 2px; }
}
@media (prefers-reduced-motion: reduce) { .hp.in, .hp-btn.hp-pop { animation: none; } .hp-wave { display: none; } }

/* ---------- saisie intelligente : surlignage, puces corrigeables, suggestions, boutons rapides ---------- */
.capture .box { position: relative; }
/* le fond gris du champ passe sur son conteneur : l'input devient transparent pour laisser voir le calque */
.cap-field { position: relative; flex: 1 1 auto; min-width: 0; display: flex; border-radius: var(--radius-s); background: var(--panel2); transition: background .15s; }
.cap-field:focus-within { background: var(--panel); }
.capture .cap-field input { position: relative; z-index: 1; width: 100%; padding: 10px 12px; border: 1px solid transparent; border-radius: var(--radius-s); background: transparent; font-size: 15px; }
.capture .cap-field input:focus { border-color: var(--accent); background: transparent; }
/* calque sous le champ : mêmes métriques que l'input, texte invisible, seul le fond des segments est coloré */
.cap-mirror { position: absolute; inset: 0; z-index: 0; padding: 10px 12px; border: 1px solid transparent; font-size: 15px; white-space: pre; overflow: hidden; color: transparent; pointer-events: none; -webkit-user-select: none; user-select: none; }
.cap-mirror mark { --hlb: var(--panel3); color: transparent; background: var(--hlb); border-radius: 6px; padding: 1px 2px; margin: 0 -2px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.cap-mirror .hl-date, .cap-mirror .hl-time { --hlb: color-mix(in srgb, var(--accent) 15%, transparent); }
.cap-mirror .hl-recur { --hlb: color-mix(in srgb, var(--violet) 18%, transparent); }
.cap-mirror .hl-prio.p1 { --hlb: color-mix(in srgb, var(--p1) 20%, transparent); }
.cap-mirror .hl-prio.p2 { --hlb: color-mix(in srgb, var(--p2) 22%, transparent); }
.cap-mirror .hl-prio.p3, .cap-mirror .hl-prio.p4 { --hlb: color-mix(in srgb, var(--p4) 24%, transparent); }
.cap-mirror .hl-project { --hlb: color-mix(in srgb, var(--pc, var(--accent)) 15%, transparent); }
.cap-mirror .hl-tag { --hlb: var(--panel3); }
.cap-mirror .hl-remind { --hlb: color-mix(in srgb, var(--amber) 22%, transparent); }
/* date remplacée par un bouton ou un menu : le mot reste compris (retiré du titre) mais n'est plus la date */
.cap-mirror .hl-date.over { background: none; text-decoration: underline dotted 1.5px; text-decoration-color: var(--accent); text-underline-offset: 4px; }
:root[data-theme="dark"] .cap-mirror .hl-date, :root[data-theme="dark"] .cap-mirror .hl-time { --hlb: color-mix(in srgb, var(--accent) 24%, transparent); }
:root[data-theme="dark"] .cap-mirror .hl-recur { --hlb: color-mix(in srgb, var(--violet) 22%, transparent); }
:root[data-theme="dark"] .cap-mirror .hl-project { --hlb: color-mix(in srgb, var(--pc, var(--accent)) 24%, transparent); }
:root[data-theme="dark"] .cap-mirror .hl-remind { --hlb: color-mix(in srgb, var(--amber) 20%, transparent); }

/* boutons rapides Aujourd'hui / Demain (allumés en bordeaux) et calendrier */
.capture .qd { flex: none; height: 30px; padding: 0 10px; border-radius: 9px; font-size: 13px; font-weight: 600; color: var(--muted); background: var(--panel2); white-space: nowrap; transition: background .15s, color .15s; }
.capture .qd:hover { background: var(--panel3); color: var(--text); }
.capture .qd.on, .capture .qd.on:hover { background: var(--accent); color: var(--accent-ink); }
.capture .qd:focus-visible, .capture .ib:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.capture .qd .qs { display: none; }
.capture .ib.cal.on { background: var(--accent-soft); color: var(--accent); }
@media (max-width: 559px) {
  /* téléphone : le champ prend toute la largeur, les boutons passent sur une seconde ligne */
  :root { --capture-h: 114px; }
  .capture .box { flex-wrap: wrap; gap: 4px 3px; padding: 5px; }
  .capture .cap-field { flex: 1 1 100%; }
  .capture .qd { padding: 0 10px; height: 32px; }
  .capture .qd .ql { display: inline; }
  .capture .qd .qs { display: none; }
  .capture .ib { width: 34px; height: 34px; }
  .capture .ib.cal { margin-left: auto; }
}

/* puces : bouton (menu de correction) + × (retirer) dans une même pastille */
.chip-w { padding: 0; gap: 0; }
.chip-w .chip-b { display: inline-flex; align-items: center; gap: 5px; padding: 3px 2px 3px 9px; border-radius: 999px 0 0 999px; color: inherit; font-size: inherit; white-space: nowrap; }
.chip-w .chip-x { display: grid; place-items: center; width: 22px; align-self: stretch; padding: 0 3px 1px 0; border-radius: 0 999px 999px 0; color: inherit; opacity: .5; font-size: 14px; line-height: 1; }
.chip-w .chip-x:hover, .chip-w .chip-x:focus-visible { opacity: 1; outline: 0; }
.chip-w:has(.chip-b:hover), .chip-w:has(:focus-visible) { border-color: color-mix(in srgb, currentColor 40%, transparent); }
.chip-w .chip-b:focus-visible { outline: 0; }
.hints .chip.recur { background: color-mix(in srgb, var(--violet) 10%, var(--panel)); border-color: transparent; }
.hints .chip.prio1 { background: color-mix(in srgb, var(--p1) 10%, var(--panel)); border-color: transparent; }
.hints .chip.prio2 { background: color-mix(in srgb, var(--p2) 12%, var(--panel)); border-color: transparent; }
.chip.tag { color: var(--muted); background: var(--panel3); border-color: transparent; }
.chip.remind { color: color-mix(in srgb, var(--amber) 55%, var(--text)); background: color-mix(in srgb, var(--amber) 12%, var(--panel)); border-color: transparent; }
:root[data-theme="dark"] .chip.remind { color: var(--amber); }
.chip.num { color: var(--text); font-weight: 600; background: none; border-color: transparent; padding-left: 2px; }
@media (hover: none) { .chip-w .chip-b { padding-top: 5px; padding-bottom: 5px; } .chip-w .chip-x { width: 30px; } }

/* suggestions pendant la frappe : panneau au-dessus de la barre */
.cap-suggest { position: absolute; left: 0; right: 0; bottom: calc(100% + 8px); z-index: 3; max-height: min(40vh, 262px); overflow: auto; overscroll-behavior: contain; padding: 5px; background: var(--panel); border: 1px solid var(--line2); border-radius: 14px; box-shadow: var(--shadow); animation: fade .1s ease-out; }
.cap-suggest[hidden] { display: none; }
.cs-h { padding: 8px 10px 3px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }
.cs-it { display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 7px 10px; border-radius: 9px; font-size: 14.5px; cursor: pointer; }
.cs-it.on { background: var(--accent-soft); }
.cs-it .pdot { width: 10px; height: 10px; margin: 0 2px; }
.cs-ico { display: grid; place-items: center; width: 16px; flex: none; color: var(--muted); font-weight: 600; }
.cs-ico svg { width: 15px; height: 15px; }
.cs-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-m { margin-left: auto; flex: none; font-size: 12.5px; color: var(--dim); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cs-new .cs-t { color: var(--accent); font-weight: 600; }
.cs-new .cs-ico { color: var(--accent); }
.cs-foot { display: flex; align-items: center; gap: 4px; padding: 6px 10px 3px; border-top: 1px solid var(--line); margin-top: 4px; font-size: 11.5px; color: var(--dim); }
.cs-foot kbd { margin-right: 0; }
@media (max-width: 559px) { .cs-it { min-height: 44px; } }

/* menus des puces : même style que le menu contextuel */
.ctx-menu > button.on { color: var(--accent); font-weight: 600; }
.ctx-menu > button.on svg { color: var(--accent); }
.pop .pr { width: 10px; height: 10px; border-radius: 3px; border: 2px solid var(--line2); flex: none; }
.pop .pr.p1 { border-color: var(--p1); } .pop .pr.p2 { border-color: var(--p2); } .pop .pr.p3 { border-color: var(--p3); }
.pop .pdot { width: 10px; height: 10px; margin: 0 3px; }

/* sélecteur de date maison */
.pop.dp { position: fixed; z-index: 86; width: 344px; max-width: calc(100vw - 16px); max-height: calc(100dvh - 16px); overflow: auto; overscroll-behavior: contain; padding: 8px; background: var(--panel); border: 1px solid var(--line2); border-radius: 14px; box-shadow: var(--shadow); animation: fade .1s ease-out; }
.dp-short { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.dp-short button { display: grid; grid-template-columns: 16px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 8px; align-items: center; min-width: 0; padding: 5px 8px; border-radius: 8px; font-size: 13.5px; line-height: 1.25; text-align: left; color: var(--text); }
.dp-short button svg { grid-row: 1 / span 2; width: 15px; height: 15px; color: var(--accent); }
.dp-short button[data-dp-short="none"] svg { color: var(--muted); }
.dp-l { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dp-d { grid-column: 2; font-size: 11.5px; color: var(--dim); white-space: nowrap; }
.dp-short button.on .dp-d { color: inherit; opacity: .75; }
.dp-short button:hover, .dp-short button:focus-visible { background: var(--panel2); outline: 0; }
.dp-short button.on { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.dp-mh { display: flex; align-items: center; justify-content: space-between; padding: 6px 0 2px; }
.dp-mt { font-size: 14px; font-weight: 650; text-transform: capitalize; }
.dp-mh button { width: 32px; height: 32px; border-radius: 8px; font-size: 21px; line-height: 1; color: var(--muted); }
.dp-mh button:hover { background: var(--panel2); color: var(--text); }
.dp-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px 2px; }
.dp-wd { padding: 2px 0 3px; text-align: center; font-size: 11px; font-weight: 600; color: var(--dim); }
.dp-day { justify-self: center; width: 36px; height: 34px; border-radius: 10px; font-size: 13.5px; font-variant-numeric: tabular-nums; color: var(--text); }
.dp-day:hover { background: var(--panel2); }
.dp-day.past, .dp-day.out { color: var(--dim); }
.dp-day.today { color: var(--accent); font-weight: 700; box-shadow: inset 0 0 0 1.5px var(--accent); }
.dp-day.on, .dp-day.on:hover { background: var(--accent); color: var(--accent-ink); box-shadow: none; font-weight: 650; }
.dp-day:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.dp-time { display: grid; gap: 6px; margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--line); }
.dp-trow { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: var(--muted); }
.pop.dp input[type=text] { padding: 7px 10px; font-size: 14px; }
.dp-trow input { width: 96px; flex: none; font-variant-numeric: tabular-nums; }
.pop.dp input.bad { border-color: var(--danger); }
.dp-tq { display: flex; flex-wrap: wrap; gap: 4px; }
.dp-tq button { padding: 4px 9px; border-radius: 999px; background: var(--panel2); font-size: 12.5px; color: var(--text); white-space: nowrap; }
.dp-tq button small { color: var(--dim); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.dp-tq button:hover { background: var(--panel3); }
.dp-tq button.on { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.dp-tq button.on small { color: inherit; }
.pop.dp .dp-free { margin-top: 8px; }
.dp-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }
.dp-sum { min-width: 0; font-size: 13px; font-weight: 600; color: var(--muted); }
/* téléphone : feuille ancrée en bas, lignes de 44 px */
.pop.dp.dp-sheet { left: 0; right: 0; bottom: 0; top: auto; width: auto; max-width: none; max-height: 88dvh; border-radius: 18px 18px 0 0; padding: 8px 14px calc(14px + var(--sab)); animation: up .2s cubic-bezier(.2, .8, .2, 1); }
.dp-sheet .grab { width: 36px; height: 4px; border-radius: 2px; background: var(--line2); margin: 2px auto 8px; }
.dp-sheet .dp-short button, .dp-sheet .dp-tq button { min-height: 44px; }
.dp-sheet .dp-day { width: 44px; height: 44px; max-width: 100%; border-radius: 12px; font-size: 15px; }
.dp-sheet input[type=text] { min-height: 44px; font-size: 16px; }
.dp-sheet .dp-foot .btn { min-height: 44px; padding: 0 18px; font-size: 15px; }

/* champ Date de la fiche : bouton qui ouvre le sélecteur */
.dp-field { display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0; padding: 10px 12px; border-radius: var(--radius-s); background: var(--panel2); border: 1px solid transparent; font-size: 15px; font-weight: 400; color: var(--text); text-align: left; transition: background .15s, border-color .15s; }
.dp-field span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dp-field svg { width: 16px; height: 16px; flex: none; color: var(--accent); }
.dp-field:hover { background: var(--panel3); }
.dp-field:focus-visible { border-color: var(--accent); outline: 0; }
.dp-field.empty, .dp-field.empty svg { color: var(--dim); }
.dp-field.late span { color: var(--danger); }

/* étiquettes dans les lignes de tâches et la recherche */
.ttag { display: inline-block; padding: 0 6px; border-radius: 999px; background: var(--panel2); color: var(--muted); font-size: 11.5px; line-height: 18px; white-space: nowrap; }
.task .meta .ttag { display: inline-block; }
.pal-m .ttag { margin-right: -2px; }

/* ---------- sous-tâches enrichies ----------
   Listes : bouton de dépliage dans la méta (chevron + « 1/3 », vert à « 3/3 ») ; dépliées, les sous-tâches suivent la
   ligne en retrait (≈ 38 px, 30 px sur téléphone) avec un filet à gauche. Fiche : en-tête, barre de progression,
   poignée et menu ⋯ au survol. Capture : bloc .cap-list au-dessus des puces (mode liste). */
.subs-tg { position: relative; display: inline-flex; align-items: center; gap: 2px; margin: -1px -3px -1px -4px; padding: 1px 5px 1px 2px; border-radius: 6px; color: inherit; font-size: inherit; line-height: inherit; font-variant-numeric: tabular-nums; }
.subs-tg .ico-chev { width: 12px; height: 12px; transition: transform .15s; }
.subs-tg[aria-expanded="true"] .ico-chev { transform: rotate(90deg); }
button.subs-tg:hover { background: var(--panel3); color: var(--text); }
button.subs-tg:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.subs-tg.full { color: color-mix(in srgb, var(--ok) 75%, #000); font-weight: 600; }
button.subs-tg.full:hover { color: color-mix(in srgb, var(--ok) 75%, #000); }
.subs-tg.is-static .ico-chev { opacity: .55; }
:root[data-theme="dark"] .subs-tg.full, :root[data-theme="dark"] button.subs-tg.full:hover { color: var(--ok); }
.task .meta > .subs-tg { display: inline-flex; gap: 2px; }

.task .tsubs { grid-column: 1 / -1; list-style: none; margin: -6px 0 0 10px; padding: 2px 0 1px 27px; border-left: 1px solid var(--line); cursor: default; }
.task.has-subs:hover:has(.tsubs:hover) { background: none; }
.tsub { display: flex; align-items: flex-start; gap: 9px; min-width: 0; padding: 3px 0; font-size: 14px; line-height: 1.4; }
.scheck { position: relative; flex: none; width: 20px; height: 20px; border-radius: 6px; border: 1.25px solid var(--line2); background: transparent; display: grid; place-items: center; transition: background .15s, border-color .15s; }
.scheck svg { width: 11px; height: 11px; opacity: 0; color: var(--accent); }
.scheck:hover { border-color: var(--accent); }
.scheck:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.scheck.on { background: var(--accent-soft); border-color: transparent; }
.scheck.on svg { opacity: 1; }
.st-t { min-width: 0; flex: 1 1 auto; padding-top: 1px; color: var(--text); overflow-wrap: anywhere; cursor: pointer; }
.st-t:hover { color: var(--accent); }
.st-t i { color: var(--dim); }
.tsub.on .st-t { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--dim); }
.task.cur .tsubs, .task.sel .tsubs { border-left-color: var(--line2); }
@media (hover: none) {
  /* cibles tactiles ≥ 40 px : la case et le chevron gardent leur dessin, la zone de toucher déborde */
  .subs-tg::after { content: ''; position: absolute; inset: -12px -8px; }
  .scheck::after { content: ''; position: absolute; z-index: 1; inset: -11.5px; } /* bord de 1,25 px compris : 42 px */
  .tsub { min-height: 40px; align-items: center; padding: 0; }
  .st-t { padding-top: 0; }
}
@media (max-width: 559px) { .task .tsubs { padding-left: 19px; } }

/* fiche : bloc Sous-tâches */
.sub-block { gap: 6px; }
.subh { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.subh-lbl { font-size: 12px; font-weight: 600; color: var(--muted); }
.subh-n { font-weight: 500; color: var(--dim); font-variant-numeric: tabular-nums; }
.subh-all { font-size: 12.5px; font-weight: 600; color: var(--accent); padding: 2px 4px; margin: -2px -4px; border-radius: 6px; }
.subh-all:hover { text-decoration: underline; text-underline-offset: 3px; }
.subh-all:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.subh-bar { height: 2px; border-radius: 1px; background: var(--line); overflow: hidden; margin: -1px 0 4px; }
.subh-bar i { display: block; height: 100%; background: var(--accent); border-radius: 1px; transition: width .25s cubic-bezier(.2, .8, .2, 1); }
.subs .s { position: relative; }
.subs .s.on input[type=text] { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--dim); }
.subs .s .check.ghost { border-style: dashed; border-color: var(--line2); background: none; }
.subs .s .check.ghost:hover { transform: none; }
.subs .s-acts { flex: none; display: flex; align-items: center; gap: 0; }
.subs .s-grip { width: 22px; height: 30px; display: grid; place-items: center; color: var(--dim); cursor: grab; touch-action: none; }
.subs .s-grip svg { width: 14px; height: 14px; }
.subs .s-more { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: var(--muted); }
.subs .s-more svg { width: 16px; height: 16px; }
.subs .s-more:hover, .subs .s-more[aria-expanded="true"] { background: var(--panel3); color: var(--text); }
.subs .s-more:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; opacity: 1; }
@media (hover: hover) {
  .subs .s-grip, .subs .s-more { opacity: 0; transition: opacity .12s; }
  .subs .s:hover .s-grip, .subs .s:hover .s-more, .subs .s:focus-within .s-more { opacity: 1; }
}
@media (hover: none) { .subs .s-grip { opacity: .7; width: 34px; height: 40px; } .subs .s-more { width: 40px; height: 40px; } }
.sub-ghost { display: block; padding: 2px 6px; }
.sub-ghost .s-grip { opacity: 1; }
.subs .s.drag-ph { border-radius: 10px; }

/* capture : mode liste (sous-tâches de la tâche saisie) */
.cap-list { max-width: 720px; margin: 0 auto 6px; padding: 6px 6px 4px 8px; background: var(--panel); border: 1px solid var(--line2); border-radius: 14px; box-shadow: var(--shadow); }
.cap-list[hidden] { display: none; }
.cl-items { list-style: none; margin: 0; padding: 0; max-height: min(30vh, 220px); overflow: auto; overscroll-behavior: contain; }
.cl-it { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cl-dot { flex: none; width: 14px; height: 14px; margin-left: 4px; border-radius: 4px; border: 1.25px solid var(--line2); }
.capture .cl-in { flex: 1 1 auto; min-width: 0; padding: 6px 8px; background: none; border: 1px solid transparent; border-radius: 8px; font-size: 14.5px; }
.capture .cl-in:focus { background: var(--panel2); border-color: transparent; }
.cl-x { flex: none; width: 30px; height: 30px; border-radius: 8px; color: var(--dim); font-size: 17px; line-height: 1; }
.cl-x:hover, .cl-x:focus-visible { background: var(--panel2); color: var(--text); outline: 0; }
.cl-add { display: inline-flex; align-items: center; gap: 6px; margin: 2px 0 0; padding: 5px 8px; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--accent); }
.cl-add svg { width: 14px; height: 14px; }
.cl-add kbd { margin: 0 0 0 2px; font-size: 10.5px; }
.cl-add kbd + kbd { margin-left: 0; }
.cl-add:hover { background: var(--accent-soft); }
.cl-add:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.chip.chip-subs { color: var(--accent); background: var(--accent-soft); border-color: transparent; font-weight: 600; }
@media (hover: none) { .cl-add kbd { display: none; } .cl-x { width: 40px; height: 40px; } .cl-it { min-height: 40px; } }
/* « Ajouter » aligné sur les titres (la colonne poignée + ⋯ reste réservée sur les lignes) */
.subs .s-new::after { content: ''; flex: none; width: 52px; }
@media (hover: none) { .subs .s-new::after { width: 74px; } }

/* ---------- Jalons : reconnaissance sobre (médaillons, moment, page, jardin, bande du Journal, récap du cap) ---------- */
/* médaillon : à venir = --accent-soft, obtenu = --accent plein et icône blanche, caché = « ? » en pointillé */
.medal { --m: 40px; flex: none; position: relative; display: inline-grid; place-items: center; width: var(--m); height: var(--m); border-radius: 50%; background: var(--accent-soft); color: var(--accent); }
.medal svg { width: calc(var(--m) * .5); height: calc(var(--m) * .5); }
.medal.earned { background: var(--accent); color: var(--accent-ink); }
.medal.hidden { background: var(--panel2); border: 1.5px dashed var(--line2); color: var(--dim); }
.medal.hidden b { font-size: calc(var(--m) * .42); font-weight: 700; line-height: 1; }
.medal.sm { --m: 30px; }

/* le moment : une carte au-dessus de la capture (et du toast), fermée au clic ou après 6 s */
.jalon-moments { position: fixed; left: 12px; right: 12px; bottom: calc(var(--tab-h) + var(--capture-h) + var(--sab) + 64px); z-index: 58; display: flex; flex-direction: column; align-items: center; pointer-events: none; }
.jalon-moment { pointer-events: auto; position: relative; width: min(420px, 100%); display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px 12px 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); color: var(--text); cursor: pointer; opacity: 0; transform: translateY(10px); transition: opacity .25s, transform .32s cubic-bezier(.2, .8, .2, 1); }
.jalon-moment.in { opacity: 1; transform: none; }
.jalon-moment.in.out { opacity: 0; transform: translateY(6px); }
.jm-medal { position: relative; flex: none; display: inline-flex; }
.jm-body { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.jm-k { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.jm-t { font-size: 15.5px; font-weight: 700; line-height: 1.3; }
.jm-p { font-size: 13.5px; line-height: 1.4; color: var(--muted); }
.jm-link { align-self: flex-start; margin-top: 4px; font-size: 13px; font-weight: 600; }
.jm-link:hover { text-decoration: underline; text-underline-offset: 3px; }
/* confettis : petits rectangles bordeaux et or, transform + opacity seulement (aucun filtre) */
.jm-burst { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; }
.jm-burst i { position: absolute; left: calc(var(--w) / -2); top: -4px; width: var(--w); height: calc(var(--w) * 1.7); border-radius: 1px; background: var(--accent); opacity: 0; animation: jm-confetti 1.2s cubic-bezier(.22, .61, .36, 1) forwards; }
.jm-burst i.soft { background: color-mix(in srgb, var(--accent) 80%, var(--p1)); }
.jm-burst i.gold { background: color-mix(in srgb, var(--amber) 80%, var(--muted)); }
@keyframes jm-confetti {
  0% { opacity: 1; transform: translate(0, 0) rotate(0deg); }
  35% { opacity: 1; transform: translate(calc(var(--dx) * .6), var(--up)) rotate(calc(var(--r) * .4)); }
  100% { opacity: 0; transform: translate(var(--dx), var(--fall)) rotate(var(--r)); }
}
@media (min-width: 900px) { .jalon-moments { left: 232px; right: 0; bottom: 160px; } body.has-detail .jalon-moments { right: 380px; } }
@media (prefers-reduced-motion: reduce) { .jm-burst { display: none; } .jalon-moment { transition: none; } }

/* page Jalons */
.jl-sec h2 { margin-bottom: 12px; }
.jl-empty { margin: 0; font-size: 14px; color: var(--muted); }
.jl-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 16px 10px; }
.jl-it { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; text-align: center; }
.jl-it .jl-t { font-size: 12.5px; font-weight: 600; line-height: 1.25; color: var(--text); overflow-wrap: break-word; }
.jl-it .jl-d { font-size: 11.5px; color: var(--dim); font-variant-numeric: tabular-nums; }
.jl-near, .jl-all { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.jl-row { display: flex; align-items: center; gap: 12px; min-width: 0; }
.jl-b { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.jl-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px; min-width: 0; } /* la progression passe dessous plutôt que de tronquer le titre */
.jl-row .jl-t { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14.5px; font-weight: 600; color: var(--text); }
.jl-np, .jl-row .jl-d { flex: none; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.jl-q, .jl-ph { font-size: 13px; line-height: 1.35; color: var(--muted); }
.jl-bar { display: block; height: 4px; margin: 2px 0 1px; border-radius: 2px; background: var(--panel3); overflow: hidden; }
.jl-bar i { display: block; height: 100%; min-width: 2px; border-radius: 2px; background: var(--accent); }
.jl-all .jl-row + .jl-row { padding-top: 12px; border-top: 1px solid var(--line); }
/* liste complète : à venir en gris (progression comprise), cachés en « ? » */
.jl-all .jl-row.todo .medal { background: var(--panel2); color: var(--muted); }
.jl-all .jl-row.todo .jl-t, .jl-all .jl-row.hidden .jl-t { color: var(--muted); }
.jl-all .jl-row.todo .jl-bar i { background: var(--dim); }
@media (max-width: 559px) { .jl-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 6px; } .jl-it .jl-t { font-size: 11.5px; } }

/* le jardin : 26 semaines × 7 jours, cases de 11 px, défilable dans sa carte sur téléphone */
.jg-scroll { overflow-x: auto; overscroll-behavior-x: contain; margin: 0 -4px; padding: 2px 4px 4px; scrollbar-width: thin; }
.jg-scroll:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }
.jg { display: inline-flex; min-width: max-content; }
.jg-days { position: sticky; left: -4px; z-index: 1; display: grid; grid-auto-rows: 11px; row-gap: 3px; margin-left: -4px; padding: 16px 8px 0 4px; background: var(--panel); } /* libellés des jours visibles pendant le défilement */
.jg-days i { font-style: normal; font-size: 9.5px; line-height: 11px; color: var(--dim); }
.jg-grid { display: flex; flex-direction: column; gap: 4px; }
.jg-months, .jg-cols { display: grid; grid-template-columns: repeat(26, 11px); column-gap: 3px; }
.jg-months { height: 12px; }
.jg-months span { font-size: 10px; line-height: 12px; color: var(--dim); white-space: nowrap; }
.jg-col { display: grid; grid-template-rows: repeat(7, 11px); row-gap: 3px; }
.jg-col i, .jg-legend i { display: block; width: 11px; height: 11px; border-radius: 3px; background: var(--panel2); }
.jg .l1, .jg-legend .l1 { background: color-mix(in srgb, var(--accent) 30%, var(--panel2)); }
.jg .l2, .jg-legend .l2 { background: color-mix(in srgb, var(--accent) 62%, var(--panel2)); }
.jg .l3, .jg-legend .l3 { background: var(--accent); }
.jg .jg-f { background: none; }
.jg-legend { display: flex; align-items: center; justify-content: flex-end; gap: 3px; margin-top: 8px; font-size: 11px; color: var(--dim); }
.jg-legend i:first-of-type { margin-left: 3px; }
.jg-legend i:last-of-type { margin-right: 3px; }

/* bande du Journal : 3 derniers jalons, le prochain à portée, « Tout voir → » (une ligne) */
.jl-band { display: flex; align-items: center; gap: 14px; min-width: 0; margin: 0 0 18px; padding: 10px 14px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); }
.jb-got { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 0 1 auto; overflow: hidden; }
.jb-it { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.jb-t { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 600; }
.jb-next { display: inline-flex; align-items: center; gap: 7px; min-width: 0; flex: 1 1 auto; }
.jb-got + .jb-next { padding-left: 14px; border-left: 1px solid var(--line); }
.jb-nt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.jb-nl { font-weight: 600; color: var(--text); }
.jb-empty { flex: 1 1 auto; min-width: 0; font-size: 13px; color: var(--muted); }
.jb-all { flex: none; margin-left: auto; font-size: 13px; font-weight: 600; white-space: nowrap; }
.jb-all:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 559px) {
  .jl-band { gap: 10px; padding: 9px 12px; }
  .jb-got { gap: 6px; flex: none; }
  .jb-t, .jb-nl { display: none; }
  .jb-got + .jb-next { padding-left: 10px; }
}
.log .lg-jalon { color: var(--accent); font-weight: 600; }

/* récap du dimanche soir, dans la tuile du cap */
.cap-recap { margin-top: 14px; padding: 12px 14px 13px; border-radius: 14px; background: var(--panel); }
.rc-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.rc-n { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.rc-n b { font-size: 24px; font-weight: 750; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--text); }
.rc-n b small { margin-left: 1px; font-size: 13px; font-weight: 600; letter-spacing: 0; color: var(--muted); }
.rc-n > span { font-size: 12px; line-height: 1.3; color: var(--muted); overflow-wrap: anywhere; }
.rc-h { font-weight: 600; color: var(--text); }
.rc-say { margin: 10px 0 0; font-size: 14px; line-height: 1.45; color: var(--text); text-wrap: pretty; }
.rc-next { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 13px; line-height: 1.35; color: var(--muted); }
.rc-next b { font-weight: 600; color: var(--text); }
.rc-next .medal { --m: 26px; }
.rc-next:hover b { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Élan : objectif quotidien, échelons, série (tuile du Bento, page Jalons, Réglages, cap) ---------- */
/* anneau : fond --line, progression --accent, trait rond ; fermé = objectif atteint ; gris pointillé en pause */
.el-ring { --rs: 56px; position: relative; flex: none; display: inline-grid; place-items: center; width: var(--rs); height: var(--rs); }
.el-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.el-ring circle { fill: none; }
.el-ring circle.el-tr { stroke: var(--line); }
.el-ring circle.on { stroke: var(--accent); stroke-linecap: round; }
.el-ring.is-paused circle.el-tr { stroke: var(--line2); stroke-dasharray: 1.5 5; stroke-linecap: round; }
.el-v { position: relative; font-size: 15px; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; color: var(--text); }
.el-ring.is-hit .el-v { color: var(--accent); }
.el-ring.is-paused .el-v { color: var(--dim); }
.el-ring.lg { --rs: 88px; }
.el-ring.lg .el-v { font-size: 22px; font-weight: 750; }
/* tuile */
/* tuile : étroite (une colonne du Bento) = anneau et « aujourd’hui » côte à côte, série et échelon dessous ;
   large (≥ 230 px) = anneau à gauche, les trois lignes à droite */
.bt-elan { container-type: inline-size; }
.bt-elan .bt-head { margin-bottom: 10px; }
.bt-jr { margin: -4px -6px -4px auto; flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; color: var(--dim); }
.bt-jr svg { width: 16px; height: 16px; }
.bt-jr:hover { color: var(--text); background: var(--panel2); }
.bt-jr:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.el-row { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: 'r k' 'd d' 's s' 'l l'; align-items: center; column-gap: 12px; row-gap: 1px; min-width: 0; font-size: 13px; line-height: 1.35; color: var(--muted); }
.el-row > .el-ring { grid-area: r; margin-bottom: 8px; }
.el-row > .el-k { grid-area: k; margin-bottom: 8px; }
.el-row > .el-pz-d { grid-area: d; }
.el-row > .el-st { grid-area: s; }
.el-row > .el-lv { grid-area: l; }
@container (min-width: 230px) {
  .el-row { grid-template-areas: 'r k' 'r d' 'r s' 'r l'; align-content: center; }
  .el-row > .el-ring, .el-row > .el-k { margin: 0; }
}
.el-k { font-size: 13px; color: var(--muted); }
.el-st { font-weight: 600; color: var(--text); }
.el-lv { color: var(--muted); }
.el-off { font-weight: 500; color: var(--dim); }
.el-pz-t { font-weight: 600; }
.el-say { margin: auto 0 0; padding-top: 10px; font-size: 13px; font-weight: 600; line-height: 1.35; color: var(--accent); }
/* page Jalons : anneau, échelon, graphique, objectif et pause */
.el-top { display: flex; align-items: center; gap: 22px; min-width: 0; }
.el-today { flex: none; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.el-lvl { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.el-n { font-size: 40px; font-weight: 750; letter-spacing: -.03em; line-height: 1.05; color: var(--text); }
.el-n.is-zero { font-size: 24px; letter-spacing: -.02em; line-height: 1.2; text-wrap: balance; }
.el-d { font-size: 13.5px; line-height: 1.4; color: var(--muted); }
.el-bar { max-width: 360px; margin: 4px 0 2px; }
.el-se { font-size: 13.5px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.el-chart { position: relative; margin: 18px 0 4px; padding-right: 52px; }
.el-svg { display: block; overflow: visible; }
.el-svg .el-hit { fill: transparent; }
.el-svg .el-b { fill: var(--panel3); }
.el-svg .el-b.hit { fill: var(--accent); }
.el-svg .el-b.zero { fill: var(--line); }
.el-svg .el-pause { fill: url(#el-hatch); }
.el-svg .el-hb { fill: var(--panel2); }
.el-svg .el-hl { stroke: var(--line2); stroke-width: 2.2; }
.el-svg .el-axis { stroke: var(--line); stroke-width: 1; }
.el-svg .el-goal-l { stroke: var(--muted); stroke-width: 1.2; stroke-dasharray: 3 3; }
.el-svg g:hover .el-b { opacity: .78; }
.el-svg text { font-size: 10.5px; fill: var(--dim); }
.el-goal { position: absolute; right: 0; width: 46px; font-size: 11px; line-height: 16px; color: var(--muted); }
.el-set { display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; gap: 10px 14px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 14px; }
.el-goalset { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
.el-wk { color: var(--muted); white-space: nowrap; }
@media (min-width: 560px) { .el-wk::before { content: '· '; } }
.el-note { margin: 8px 0 0; font-size: 13px; line-height: 1.4; color: var(--muted); }
/* stepper d'objectif */
.el-step { display: inline-flex; align-items: center; gap: 2px; padding: 2px; border-radius: 999px; background: var(--panel2); }
.el-sb { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font-size: 17px; font-weight: 600; line-height: 1; color: var(--text); }
.el-sb:hover:not(:disabled) { background: var(--panel); }
.el-sb:disabled { color: var(--dim); cursor: default; }
.el-sb:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.el-sv { min-width: 22px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
/* Réglages */
.set .el-line { flex-wrap: wrap; }
.set .el-line .l { flex: 1 1 220px; }
.el-pz { display: flex; flex-wrap: wrap; gap: 6px; }
.el-until { display: inline-flex; align-items: center; gap: 6px; }
.el-until svg { width: 14px; height: 14px; color: var(--muted); }
.el-more { font-size: 14px; font-weight: 600; }
.el-more:hover { text-decoration: underline; text-underline-offset: 3px; }
/* cap du matin et récap du dimanche */
.cap-elan { margin: 6px 0 0; font-size: 13px; line-height: 1.4; color: var(--muted); font-variant-numeric: tabular-nums; }
.rc-elan { display: flex; align-items: center; gap: 7px; margin: 10px 0 0; font-size: 13px; font-weight: 600; line-height: 1.35; color: var(--text); }
.rc-elan svg { flex: none; width: 16px; height: 16px; color: var(--accent); }
@media (max-width: 559px) {
  .el-ring:not(.lg) { --rs: 48px; }
  .el-ring:not(.lg) .el-v { font-size: 13.5px; }
  .el-row { column-gap: 10px; font-size: 12.5px; }
  .el-k { font-size: 12.5px; }
  .el-top { flex-direction: column; align-items: flex-start; gap: 14px; }
  .el-today { flex-direction: row; gap: 12px; }
  .el-chart { padding-right: 44px; }
  .el-goal { width: 40px; font-size: 10.5px; }
}
.alpha-links { display: flex; gap: 6px; flex: none; }

/* ---------- confort tactile (iPhone, Android) ---------- */
@media (pointer: coarse) {
  /* Safari iOS zoome sur tout champ < 16px : on aligne tous les champs, calque de surlignage compris */
  input[type=text], input[type=email], input[type=search], input[type=number], input[type=password], textarea, select,
  .capture .cap-field input, .cap-mirror, .sb-menu .sb-pick input, .pop.dp input[type=text], input.inl { font-size: 16px; }
  /* cibles d'au moins 40 px sans changer le dessin */
  .task .check, .scheck { position: relative; }
  .task .check::after, .scheck::after { content: ''; position: absolute; inset: -10px; }
  .capture .qd { height: 36px; }
  .capture .ib, .ibtn, .logo-btn { width: 40px; height: 40px; }
}
/* clavier ouvert (iOS) : la barre de saisie suit le haut du clavier, la barre d'onglets s'efface */
html.kb .capture { bottom: var(--kb, 0px); }
html.kb .tabbar { transform: translateY(100%); transition: transform .15s; }
html.kb .toast { bottom: calc(var(--kb, 0px) + var(--capture-h) + 14px); }
html.kb .jalon-moments { bottom: calc(var(--kb, 0px) + var(--capture-h) + 64px); }


/* Réglages → Apparence : mode (segment) et thèmes (vignettes). Chaque vignette porte data-palette + data-theme :
   elle se dessine dans ses propres couleurs grâce aux sélecteurs de la section générée. */
.ap-mode { flex: none; }
.ap-mode button { flex: none; padding: 7px 12px; min-height: 32px; }
.ap-mode button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.set .line.ap-th { flex-direction: column; align-items: stretch; gap: 10px; }
.th-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.th-tile { position: relative; display: flex; flex-direction: column; align-items: center; gap: 7px; min-height: 44px; padding: 8px 4px 6px; border-radius: 14px; background: none; color: var(--text); transition: transform .15s cubic-bezier(.3, .7, .4, 1); }
.th-tile:hover { transform: translateY(-2px); }
.th-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.th-scr { position: relative; display: flex; width: 72px; height: 48px; border-radius: 9px; overflow: hidden; background: var(--bg); box-shadow: 0 0 0 1px var(--line2), 0 4px 10px -6px rgba(0, 0, 0, .35); transition: box-shadow .15s; }
.th-tile:hover .th-scr { box-shadow: 0 0 0 1px var(--line2), 0 8px 16px -8px rgba(0, 0, 0, .4); }
.th-tile.on .th-scr { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent); }
.th-side { position: relative; flex: none; width: 18px; background: var(--side); border-right: 1px solid var(--line); }
.th-logo { position: absolute; left: 5px; top: 6px; width: 8px; height: 8px; border-radius: 2px; transform: rotate(45deg); background: var(--logo-front); box-shadow: 1px 1px 0 var(--logo-back); }
.th-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; padding: 8px 7px 0; }
.th-body i { display: block; height: 4px; border-radius: 2px; }
.th-t1 { width: 82%; background: var(--text); }
.th-t2 { width: 56%; background: var(--muted); }
.th-row { display: flex; align-items: center; gap: 4px; }
.th-ck { flex: none; width: 8px; height: 8px; border-radius: 2.5px; background: var(--accent); }
.th-ck.off { background: none; box-shadow: inset 0 0 0 1.2px var(--line2); }
.th-body .th-t3 { flex: 1; height: 3px; background: var(--muted); opacity: .55; }
.th-body .th-t4 { flex: 1; height: 3px; background: var(--dim); opacity: .55; }
.th-tick { position: absolute; right: 3px; bottom: 3px; display: grid; place-items: center; width: 14px; height: 14px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); }
.th-tick svg { width: 9px; height: 9px; }
.th-nm { font-size: 12.5px; font-weight: 500; color: var(--muted); }
.th-tile.on .th-nm { color: var(--text); font-weight: 600; }
.th-note { margin: 0; color: var(--dim); font-size: 12px; }
@media (pointer: coarse) { .ap-mode button { min-height: 40px; } }
@media (prefers-reduced-motion: reduce) { .th-tile, .th-scr { transition: none; } .th-tile:hover { transform: none; } }