qui défile, et son propre rebond reste contenu dans l'app, sur le fond de page — continu, fluide. Bloc placé en FIN de fichier : il doit gagner la cascade sur les règles mobiles. ========================================================================== */ @media (max-width: 960px) { html, body { height: 100%; overflow: hidden; } .app-shell { height: 100vh; height: 100dvh; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); } .sidebar { position: static; height: auto; } main { overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } } /* ========================================================================== Écrans tactiles : pas d'état « survol ». Sur iOS, :hover se déclenche au toucher et RESTE collé jusqu'au tap suivant : une rubrique semblait « à moitié sélectionnée » en gris. On neutralise aussi le voile gris natif d'iOS sur les éléments tapés. Ne change rien à la souris. ========================================================================== */ @media (hover: none) { * { -webkit-tap-highlight-color: transparent; } .nav-item:not(.active):hover { background: transparent; color: var(--ink-soft); transform: none; } .mode-btn:not(.active):hover { background: transparent; color: var(--ink-soft); } .subtab:not(.active):hover { background: transparent; color: var(--ink-soft); } .kebab-button:hover { background: transparent; color: var(--ink-soft); } .icon-button:hover { background: var(--surface-2); } .button.secondary:hover { background: var(--surface); } .stepper-btn:hover { background: var(--surface-2); border-color: var(--line); } .tr-day:hover { border-color: var(--line); } .tr-day.today:hover { border-color: color-mix(in srgb, var(--brand) 45%, transparent); } .tr-empty:hover { color: var(--muted); } .trm-chip:hover { background: var(--surface-2); color: var(--ink); } .nutri-chip > button:hover { color: var(--ink); } .prod-hist-row:hover { background: var(--surface); } .todo-tag:hover { filter: none; } .habit-cell:hover { filter: none; } } /* ========================================================================== Habitudes façon tableur : plage sélectionnée + poignée de recopie ========================================================================== */ .kpi-table-wrap { position: relative; } .habit-cell { user-select: none; -webkit-user-select: none; } .habit-table .habit-cell.hsel { outline: 2px solid var(--brand); outline-offset: -2px; box-shadow: inset 0 0 0 99px color-mix(in srgb, var(--brand) 16%, transparent); } .habit-table th[data-hrow] { cursor: pointer; } .habit-table th[data-hrow]:hover { color: var(--brand); } #habitFill { position: absolute; z-index: 6; width: 12px; height: 12px; border-radius: 50%; background: var(--brand); border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .35); cursor: crosshair; touch-action: none; } /* zone de prise élargie, surtout pour le doigt */ #habitFill::after { content: ""; position: absolute; inset: -10px; border-radius: 50%; } /* ---------- Video YouTube quotidienne ---------- */ .yt-cards { margin-bottom: 0; } .yt-list { display: flex; flex-direction: column; gap: .6rem; } .yt-item { display: flex; align-items: center; gap: .8rem; min-width: 0; padding: .8rem .9rem; border-radius: 12px; border: 1px solid var(--line); border-left: 3px solid var(--muted); background: var(--surface); } .yt-item-main { flex: 1; min-width: 0; } .yt-item-title { font-weight: 650; font-size: .9rem; overflow-wrap: anywhere; } .yt-item-meta { font-size: .76rem; color: var(--muted); margin-top: .15rem; } .yt-item.yt-wait { border-left-color: var(--muted); } .yt-item.yt-up { border-left-color: var(--brand); background: color-mix(in srgb, var(--brand) 4%, var(--mix)); } .yt-item.yt-ok { border-left-color: var(--good); background: color-mix(in srgb, var(--good) 6%, var(--mix)); } .yt-item.yt-err { border-left-color: var(--bad); background: color-mix(in srgb, var(--bad) 5%, var(--mix)); } .yt-bar { height: 5px; border-radius: 3px; background: var(--surface-2); overflow: hidden; margin-top: .4rem; } .yt-bar.big { height: 8px; margin-top: .2rem; } .yt-bar > span { display: block; height: 100%; border-radius: 3px; background: var(--brand); transition: width .3s ease; } .yt-link { flex: none; font-size: .8rem; font-weight: 650; color: var(--brand); text-decoration: none; white-space: nowrap; } .yt-link:hover { text-decoration: underline; } .yt-retry { flex: none; font-size: .78rem; padding: .35rem .7rem; } #ytConnect { text-decoration: none; display: inline-flex; align-items: center; align-self: flex-start; } #ytStatus { margin: 0; font-size: .82rem; } /* ---------- Habitudes : poignée de déplacement + alignement des en-têtes ---------- */ #habitTable thead tr:first-child th { vertical-align: top; text-align: center; padding-top: 18px; } .habit-grip { position: absolute; top: 3px; left: 0; right: 0; text-align: center; color: var(--muted); font-size: .85em; line-height: 1; cursor: grab; touch-action: none; user-select: none; opacity: .5; } .habit-grip:hover { opacity: 1; color: var(--brand); } .habit-name { display: block; text-align: center; } .habit-del { position: absolute; top: 2px; right: 2px; margin: 0; } .habit-col-h.col-drag-src { opacity: .35; } #habitTable.col-dragging { cursor: grabbing; user-select: none; } #habitTable.col-dragging .habit-grip { cursor: grabbing; } .habit-col-h.col-drop-before::before, .habit-col-h.col-drop-after::after { content: ''; position: absolute; top: 2px; bottom: 2px; width: 3px; background: var(--brand); border-radius: 2px; z-index: 5; } .habit-col-h.col-drop-before::before { left: -1px; } .habit-col-h.col-drop-after::after { right: -1px; } @media (hover: none) { .habit-grip { opacity: .8; font-size: .95em; top: 2px; } } /* ---------- KPI : fenêtre défilante + en-tête de colonnes figé ---------- */ .kpi-scroll { max-height: min(66vh, 520px); overflow-y: auto; } .kpi-scroll #kpiTable .kpi-col-row th { position: sticky; top: 0; z-index: 4; background: var(--surface); } .kpi-scroll #kpiTable .kpi-col-row .kpi-day-h { z-index: 6; background: var(--surface-2); } .kpi-scroll #kpiTable tr.kpi-today-row .kpi-day { color: var(--brand-ink); font-weight: 800; } .kpi-scroll #kpiTable tr.kpi-today-row .kpi-input { background: var(--brand-soft); } /* ---------- Habitudes : fenêtre défilante + en-tête figé ---------- */ .habit-scroll { max-height: min(66vh, 520px); overflow-y: auto; } .habit-scroll #habitTable thead tr:first-child th { position: sticky; top: 0; z-index: 4; } .habit-scroll #habitTable thead tr:first-child .kpi-day-h { z-index: 6; } .habit-scroll #habitTable tr.habit-today-row .kpi-day { color: var(--brand-ink); font-weight: 800; } /* ---------- Productivité : carte capture d'écran (IA vision) ---------- */ .prod-shot-card { border: 1px solid var(--brand-soft); } .prod-shot { display: flex; flex-direction: column; gap: .7rem; } .prod-shot-thumbs { display: flex; flex-wrap: wrap; gap: .5rem; } .prod-shot-thumbs:empty { display: none; } .prod-shot-thumb { position: relative; width: 76px; height: 76px; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: var(--surface-2); } .prod-shot-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .prod-shot-del { position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; padding: 0; border: none; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; font-size: 14px; line-height: 1; cursor: pointer; display: grid; place-items: center; } .prod-shot-del:hover { background: var(--bad); } /* ---------- Contenu : pastilles du planning hebdomadaire ---------- */ .ct-pastille { display: flex; flex-direction: column; gap: .15rem; min-width: 0; padding: .35rem .45rem; border-radius: 9px; cursor: pointer; border: 1px solid var(--line); border-left: 3px solid var(--sc); background: var(--surface); -webkit-tap-highlight-color: transparent; } .ct-pastille:hover { border-color: color-mix(in srgb, var(--sc) 45%, var(--line)); } .ct-pastille.overdue { border-color: color-mix(in srgb, var(--bad) 35%, transparent); } .ct-pastille.posted { opacity: .6; } .ct-pastille.posted .ct-pastille-title { text-decoration: line-through; } .ct-pastille-title { font-size: .74rem; font-weight: 650; line-height: 1.2; white-space: normal; overflow-wrap: break-word; hyphens: auto; color: var(--ink); } .ct-pastille-status { display: inline-flex; align-items: center; gap: .25rem; font-size: .63rem; color: var(--muted); } .ct-pastille-status .ct-dot { width: 6px; height: 6px; border-radius: 50%; flex: none; } /* ---------- Nutrition : bouton micro (dictée) ---------- */ #nutriMic .nutri-mic-label { display: inline; } #nutriMic.recording { background: var(--bad); color: #fff; border-color: var(--bad); animation: nutriPulse 1.2s ease-in-out infinite; } #nutriMic.recording svg { stroke: #fff; } @keyframes nutriPulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--bad) 40%, transparent); } 50% { box-shadow: 0 0 0 7px transparent; } }