/* Thème piloté par variables : la bascule clair/sombre ne touche qu'un attribut sur , aucune règle n'est dupliquée. */ :root { --bg: #12141a; --surface: #1a1d26; --surface-2: #222633; --border: #2c313f; --text: #e7e9ef; --muted: #8b93a7; --accent: #4f7cff; --danger: #ff6b6b; --ok: #3ecf8e; --warn: #f5a524; --radius: 9px; --shadow: 0 1px 2px rgb(0 0 0 / .3), 0 10px 30px rgb(0 0 0 / .22); /* Une seule définition de la grille : l'en-tête et les lignes ne peuvent pas se désaligner puisqu'ils lisent la même variable. */ --cols: 26px 32px 144px minmax(0, 1fr) 70px 96px 108px 82px; } :root[data-theme="light"] { --bg: #f4f5f8; --surface: #ffffff; --surface-2: #eef1f6; --border: #dfe3ec; --text: #1c1f27; --muted: #6b7385; --shadow: 0 1px 2px rgb(16 24 40 / .06), 0 10px 30px rgb(16 24 40 / .07); } * { box-sizing: border-box; } body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--text); font: 14.5px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; } /* ══ Barre du haut ══════════════════════════════════════════ */ .topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 22px; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); } .brand { margin: 0; padding: 3px 8px; border: 1px solid transparent; border-radius: 7px; background: none; color: var(--text); font: inherit; font-size: 17px; font-weight: 650; letter-spacing: -.01em; cursor: pointer; transition: border-color .15s, color .15s; } .brand:hover { border-color: var(--border); color: var(--accent); } .brand.is-on { border-color: var(--accent); color: var(--accent); } .topbar-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .counter { color: var(--muted); font-size: 12.5px; font-variant-numeric: tabular-nums; } .chip { padding: 5px 11px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); color: var(--muted); font: inherit; font-size: 12.5px; cursor: pointer; white-space: nowrap; transition: color .15s, border-color .15s, background .15s; } .chip:hover { color: var(--text); border-color: var(--muted); } .chip.is-on { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 55%, transparent); background: color-mix(in srgb, var(--accent) 12%, transparent); } .icon-btn { width: 30px; height: 30px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); color: var(--muted); font-size: 14px; cursor: pointer; transition: color .15s, border-color .15s; } .icon-btn:hover { color: var(--text); border-color: var(--muted); } /* ══ Capture ════════════════════════════════════════════════ */ .capture { display: flex; gap: 8px; max-width: 1180px; margin: 22px auto 0; padding: 0 22px; } .capture-input { flex: 1; min-width: 0; padding: 13px 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); font: inherit; font-size: 15px; outline: none; box-shadow: var(--shadow); transition: border-color .15s, box-shadow .15s; } .capture-input::placeholder { color: var(--muted); } .capture-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); } .capture-btn { padding: 0 20px; border: 0; border-radius: var(--radius); background: var(--accent); color: #fff; font: inherit; font-weight: 550; cursor: pointer; transition: filter .15s; } .capture-btn:hover { filter: brightness(1.08); } .capture-btn:active { transform: translateY(1px); } .mic-btn { width: 46px; flex: none; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); font-size: 17px; cursor: pointer; transition: border-color .15s, background .15s; } .mic-btn:hover { border-color: var(--muted); } /* Pulsation pendant l'écoute : sans repère visuel permanent, on oublie que le micro est ouvert. */ .mic-btn.is-listening { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 16%, transparent); animation: pulse 1.4s ease-in-out infinite; } @keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--danger) 45%, transparent); } 50% { box-shadow: 0 0 0 7px transparent; } } .dictation-hint { max-width: 1180px; margin: 8px auto 0; padding: 0 22px; color: var(--danger); font-size: 12.5px; } /* ══ Grille ═════════════════════════════════════════════════ */ .sheet { max-width: 1180px; margin: 22px auto 90px; padding: 0 22px; } .row { display: grid; grid-template-columns: var(--cols); align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid transparent; border-radius: var(--radius); transition: background .12s, border-color .12s, opacity .12s; } .row-header { position: sticky; top: 55px; z-index: 10; padding-bottom: 6px; background: var(--bg); color: var(--muted); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; border-radius: 0; border-bottom: 1px solid var(--border); } .section { margin-top: 18px; } /* En-tête de section : c'est le repère de lecture principal, il doit trancher nettement sur les lignes qu'il regroupe. */ .section-head { cursor: grab; display: flex; align-items: baseline; gap: 10px; padding: 6px 12px; margin-bottom: 4px; border-left: 3px solid var(--accent); background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 13%, transparent), transparent 62%); border-radius: 0 var(--radius) var(--radius) 0; } .section-name { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; } .section-name.is-unsorted { color: var(--muted); } .section-head:has(.is-unsorted) { border-left-color: var(--muted); background: linear-gradient(90deg, color-mix(in srgb, var(--muted) 13%, transparent), transparent 62%); } .section-count { color: var(--muted); font-size: 11.5px; font-variant-numeric: tabular-nums; } .row:not(.row-header) { background: var(--surface); border-color: var(--border); margin-bottom: 4px; } .row:not(.row-header):hover { border-color: var(--muted); } .row.is-done .content-text { color: var(--muted); text-decoration: line-through; text-decoration-thickness: 1px; } /* Ligne masquée : visible seulement quand l'option est active, et clairement distincte pour qu'on ne la confonde pas avec une ligne ordinaire. */ .row.is-hidden-row { opacity: .45; border-style: dashed; } .row.is-dragging { opacity: .35; } .row.drop-before { box-shadow: 0 -2px 0 0 var(--accent); } .row.drop-after { box-shadow: 0 2px 0 0 var(--accent); } .section-head.drop-after { box-shadow: 0 2px 0 0 var(--accent); } .section-head.drop-before { box-shadow: 0 -2px 0 0 var(--accent); } .section-head.is-dragging { opacity: .4; cursor: grabbing; } /* Poignée implicite : une section se prend n'importe où sur son en-tête, mais le curseur doit le dire. */ .section-head:hover .section-name::before { content: '⠿ '; color: var(--muted); font-weight: 400; } .cell { min-width: 0; } .cell-grip { color: var(--muted); cursor: grab; text-align: center; opacity: .4; user-select: none; } .row:hover .cell-grip { opacity: 1; } .cell-check { display: flex; justify-content: center; } .cell-check input { width: 17px; height: 17px; accent-color: var(--accent); cursor: pointer; } /* ── Catégorie ── */ .cell-cat { display: flex; align-items: center; gap: 5px; padding: 3px 7px; border: 1px solid transparent; border-radius: 6px; cursor: pointer; outline: none; overflow: hidden; } .cell-cat:hover, .cell-cat:focus-visible, .cell-cat.is-menu-open { border-color: var(--border); background: var(--surface-2); } .cat-tag { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; font-weight: 550; } .cat-tag.is-empty { color: var(--muted); font-weight: 400; font-style: italic; } .cat-caret { margin-left: auto; color: var(--muted); font-size: 9px; opacity: 0; transition: opacity .12s; } .cell-cat:hover .cat-caret, .cell-cat.is-menu-open .cat-caret { opacity: 1; } /* ── Contenu éditable ── */ .cell-content { display: flex; align-items: baseline; gap: 4px; /* La marge d'indentation est posée en ligne par le rendu, selon la profondeur de la dépendance. */ transition: padding-left .15s; } .content-text { flex: 1; min-width: 0; padding: 5px 8px; border: 1px solid transparent; border-radius: 6px; outline: none; overflow-wrap: anywhere; cursor: text; } .content-text:hover { background: var(--surface-2); } .content-text:focus { background: var(--bg); border-color: var(--accent); text-decoration: none; color: var(--text); } .content-text:empty::before { content: attr(data-placeholder); color: var(--muted); font-style: italic; } /* Connecteur d'arborescence : il matérialise le rattachement au prérequis, l'indentation seule se lit mal au-delà d'un niveau. */ .tree-branch { flex: none; color: var(--muted); font-size: 12px; opacity: .65; user-select: none; } /* ── Liens de dépendance ── */ .cell-link { display: flex; align-items: center; gap: 3px; } /* Visible en permanence, en retrait : cachée jusqu'au survol, la fonction n'existait pas pour qui ne la cherchait pas. */ .link-handle { flex: none; padding: 1px 4px; border: 1px dashed var(--border); border-radius: 5px; color: var(--muted); font-size: 13px; line-height: 1.3; cursor: grab; opacity: .55; transition: opacity .12s, color .12s, background .12s, border-color .12s; } .row:hover .link-handle { opacity: .9; } .link-handle:hover { opacity: 1; color: var(--accent); border-color: var(--accent); border-style: solid; background: var(--surface-2); } .link-mark { flex: none; padding: 1px 5px; border: 1px solid transparent; border-radius: 20px; background: var(--surface-2); color: var(--muted); font: inherit; font-size: 11px; font-variant-numeric: tabular-nums; cursor: pointer; transition: color .12s, border-color .12s; } .link-mark:hover, .link-mark:focus-visible { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 55%, transparent); outline: none; } .link-mark.is-upstream { color: color-mix(in srgb, var(--accent) 80%, var(--text)); } /* Ligne visée pendant la création d'un lien. */ .row.link-target { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); } /* Cible qui refermerait la chaîne sur elle-même : refus signalé avant le lâcher, plutôt qu'un message d'erreur après coup. */ .row.link-forbidden { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, var(--surface)); cursor: not-allowed; } .row.is-linking { border-color: var(--accent); border-style: dashed; } /* Ligne pointée par une flèche affichée. */ .row.is-link-highlight { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); } /* Calque des flèches : au-dessus de tout, mais transparent au pointeur, sinon il intercepterait le survol des lignes qu'il désigne. */ .arrow-layer { position: fixed; inset: 0; z-index: 90; width: 100%; height: 100%; pointer-events: none; } .arrow-line { fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-dasharray: 4 3; } .arrow-head { fill: var(--accent); } /* ── Marqueurs d'assistance ── */ /* Tous discrets et de la taille du texte : ils vivent dans la cellule de contenu, ils ne doivent pas concurrencer l'idée elle-même. */ .ai-mark { flex: none; padding: 1px 6px; border: 1px solid var(--border); border-radius: 20px; background: var(--surface-2); color: var(--muted); font: inherit; font-size: 10.5px; line-height: 1.5; cursor: pointer; transition: color .12s, border-color .12s; } .ai-mark:hover { color: var(--text); border-color: var(--muted); } .ai-error { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, transparent); background: color-mix(in srgb, var(--danger) 12%, transparent); } .ai-toggle.is-original { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, transparent); } .ai-projet { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: color-mix(in srgb, var(--accent) 10%, transparent); font-weight: 650; letter-spacing: .04em; } .ai-projet:disabled { opacity: .7; cursor: default; } /* Attente : une rotation lente, sans clignotement — le traitement dure plusieurs secondes et ne doit pas attirer l'œil en permanence. */ .ai-spin { flex: none; color: var(--accent); font-size: 12px; animation: ai-turn 1.6s linear infinite; } @keyframes ai-turn { to { transform: rotate(360deg); } } /* Marque d'une catégorie proposée mais pas encore confirmée. */ .cat-ai { flex: none; padding: 0 2px; border: 0; background: none; font-size: 10px; line-height: 1; cursor: pointer; opacity: .85; } .cat-ai:hover { opacity: 1; } /* ── Priorité ── */ .prio { width: 100%; padding: 3px 8px; border: 1px solid var(--border); border-radius: 20px; background: var(--surface-2); color: var(--muted); font: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer; transition: filter .15s; } .prio:hover { filter: brightness(1.15); } .prio-1 { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, transparent); background: color-mix(in srgb, var(--danger) 14%, transparent); } .prio-2 { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, transparent); background: color-mix(in srgb, var(--warn) 14%, transparent); } .prio-3 { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, transparent); background: color-mix(in srgb, var(--ok) 12%, transparent); } .prio-0 { opacity: .6; } /* ── Chronodate ── */ .cell-date { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; } /* ── Actions ── */ .cell-actions { display: flex; gap: 2px; justify-content: flex-end; } .row-btn { width: 26px; height: 26px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); font-size: 14px; line-height: 1; cursor: pointer; opacity: 0; transition: opacity .12s, color .12s, background .12s; } .row:hover .row-btn, .row-btn:focus-visible { opacity: 1; } .row-btn:hover { color: var(--text); background: var(--surface-2); } .row-btn-danger:hover { color: var(--danger); } /* ══ Menu flottant ══════════════════════════════════════════ */ .menu { position: absolute; z-index: 100; min-width: 208px; max-width: 300px; padding: 5px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); } .menu-filter { width: 100%; padding: 7px 9px; margin-bottom: 5px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--text); font: inherit; font-size: 13px; outline: none; } .menu-filter:focus { border-color: var(--accent); } .menu-list { max-height: 260px; overflow-y: auto; /* Sans cela, la molette arrivée en bout de liste fait défiler la page derrière — et le défilement de la page referme le menu. */ overscroll-behavior: contain; } /* Zone tampon reliant le menu à sa cellule : l'espace de 4 px qui les sépare provoquait un `mouseleave` au passage de la souris, et donc une fermeture avant même d'avoir atteint la liste. */ .menu::before { content: ''; position: absolute; left: 0; right: 0; top: -7px; height: 7px; } .menu.opens-upwards::before { top: auto; bottom: -7px; } .menu-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 9px; border: 0; border-radius: 6px; background: transparent; color: var(--text); font: inherit; font-size: 13px; text-align: left; cursor: pointer; } .menu-item:hover { background: var(--surface-2); } /* Entrée désignée aux flèches. Marquée par une barre latérale plutôt que par un simple fond : elle doit rester distincte de ce que la souris survole. */ .menu-item.is-highlighted { background: var(--surface-2); box-shadow: inset 2px 0 0 var(--accent); } .menu-item.is-active { color: var(--accent); font-weight: 600; } .menu-item.is-active::after { content: '✓'; margin-left: auto; font-size: 11px; } .menu-item.is-create { color: var(--accent); border-top: 1px solid var(--border); margin-top: 4px; } .menu-item-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .menu-item-hint { margin-left: auto; color: var(--muted); font-size: 11.5px; } .menu-empty { margin: 8px; color: var(--muted); font-size: 12.5px; text-align: center; } /* ══ Divers ═════════════════════════════════════════════════ */ .empty { max-width: 1180px; margin: 60px auto; padding: 0 22px; color: var(--muted); text-align: center; font-size: 14px; } .toast { position: fixed; left: 50%; bottom: 26px; z-index: 200; transform: translateX(-50%); max-width: min(90vw, 460px); padding: 11px 18px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); color: var(--text); font-size: 13px; box-shadow: var(--shadow); } /* ══ Connexion ══════════════════════════════════════════════ */ .login-body { display: grid; place-items: center; min-height: 100vh; padding: 20px; } .login-card { width: min(100%, 340px); padding: 32px 28px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); } .login-title { margin: 0; font-size: 22px; font-weight: 650; } .login-sub { margin: 4px 0 24px; color: var(--muted); font-size: 13px; } .login-form { display: flex; flex-direction: column; } .login-label { margin-bottom: 5px; color: var(--muted); font-size: 12px; font-weight: 550; } .login-input { padding: 10px 12px; margin-bottom: 16px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text); font: inherit; outline: none; } .login-input:focus { border-color: var(--accent); } .login-btn { padding: 11px; border: 0; border-radius: 8px; background: var(--accent); color: #fff; font: inherit; font-weight: 550; cursor: pointer; } .login-btn:disabled { opacity: .6; cursor: default; } .login-error { margin: 14px 0 0; color: var(--danger); font-size: 13px; text-align: center; } /* ══ Mode minuscule ═════════════════════════════════════════ Réduit à ce qui sert à capturer une idée : la ligne de saisie, le micro, le bouton d'ajout et le retour. Tout le reste est écarté — c'est une barre de capture, pas une fenêtre d'application. ═════════════════════════════════════════════════════════ */ :root.is-mini body { /* `zoom` plutôt qu'une refonte des tailles : il réduit police ET dimensions dans la même proportion, la mise en page reste celle qui a été éprouvée. Le décalage qu'il induit sur les éléments positionnés est compensé dans host.js (hostZoom). */ zoom: .67; margin: 0; } /* Barre du haut, grille, compteurs : sans objet dans une fenêtre de la hauteur d'une ligne. Le bouton de retour, lui, a rejoint la ligne de saisie. */ :root.is-mini .topbar, :root.is-mini .sheet, :root.is-mini .empty { display: none; } :root.is-mini .capture { margin: 8px auto; padding: 0 9px; } :root.is-mini .capture-input { padding: 9px 11px; } :root.is-mini .capture-btn { padding: 0 14px; } :root.is-mini .mic-btn { width: 40px; } /* Le bouton de retour, déplacé ici par mini.js. */ :root.is-mini .capture .icon-btn { width: 40px; height: auto; align-self: stretch; font-size: 15px; } :root.is-mini .dictation-hint { margin: 0 auto 6px; padding: 0 9px; } /* Fenêtre franchement agrandie : la grille redevient accessible plutôt que de laisser une surface vide. */ :root.is-mini-tall .sheet { display: block; margin: 0 auto 20px; padding: 0 9px; } :root.is-mini-tall .empty { display: block; } :root.is-mini-tall .row-header { position: static; } :root.is-mini-tall .section { margin-top: 10px; } :root.is-mini-tall .row { padding: 6px 8px; } :root.is-mini-tall .row-btn, :root.is-mini-tall .link-handle { opacity: .8; } /* ══ Onglet resté ouvert pendant le mode minuscule ══════════ Il ne peut pas être fermé : le navigateur referme la fenêtre flottante avec la page qui l'a ouverte. Autant qu'il dise où est passée l'application. ═════════════════════════════════════════════════════════ */ .detached { display: grid; place-content: center; gap: 12px; justify-items: center; min-height: 100vh; padding: 20px; text-align: center; } .detached-title { margin: 0; font-size: 19px; font-weight: 650; } .detached-text { max-width: 42ch; margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.6; } .detached-btn { margin-top: 6px; padding: 10px 20px; border: 0; border-radius: var(--radius); background: var(--accent); color: #fff; font: inherit; font-weight: 550; cursor: pointer; } .detached-btn:hover { filter: brightness(1.08); } /* ══ Documentation et panneau de compte ═════════════════════ */ .doc, .panel { max-width: 780px; margin: 22px auto 80px; padding: 0 22px; } .doc-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 12px; margin-bottom: 8px; border-bottom: 1px solid var(--border); } .doc-head h2 { margin: 0; font-size: 20px; font-weight: 650; } .doc-section { margin-top: 26px; } .doc-section h3 { margin: 0 0 10px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--accent); } .doc-section p { margin: 0 0 10px; line-height: 1.65; } .doc-list { display: grid; grid-template-columns: minmax(90px, max-content) 1fr; gap: 6px 16px; margin: 0; } .doc-list dt { font-weight: 600; } .doc-list dd { margin: 0; color: var(--muted); line-height: 1.55; } .doc-foot { margin-top: 34px; padding-top: 14px; border-top: 1px solid var(--border); color: var(--muted); font-size: 12.5px; } .panel-identity { margin: 14px 0 0; color: var(--muted); font-size: 13.5px; } .panel-block { margin-top: 26px; padding: 18px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); } .panel-block h3 { margin: 0 0 14px; font-size: 15px; font-weight: 650; } .panel-note { margin: -6px 0 14px; color: var(--muted); font-size: 12.5px; } .panel-field { display: flex; flex-direction: column; margin-bottom: 12px; } .panel-block .login-input { margin-bottom: 0; } .panel-block .login-btn { width: auto; padding: 9px 18px; } .users { display: flex; flex-direction: column; gap: 4px; } .user-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 9px 11px; border: 1px solid var(--border); border-radius: 7px; background: var(--bg); } .user-row.is-off { opacity: .55; border-style: dashed; } .user-email { font-weight: 550; overflow-wrap: anywhere; } .user-meta { color: var(--muted); font-size: 12px; } .user-badge { padding: 1px 7px; border-radius: 20px; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); font-size: 10.5px; font-weight: 650; text-transform: uppercase; } .user-actions { display: flex; gap: 4px; margin-left: auto; flex-wrap: wrap; } /* ══ Écran d'accès ══════════════════════════════════════════ */ /* Le domaine est affiché dans le champ, pas saisissable : la contrainte se voit au lieu d'être découverte au moment de l'erreur. */ .email-field { display: flex; align-items: stretch; margin-bottom: 16px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); overflow: hidden; } .email-field:focus-within { border-color: var(--accent); } .email-local { flex: 1; min-width: 0; margin: 0; border: 0; border-radius: 0; background: none; } .email-domain { display: flex; align-items: center; padding: 0 11px; border-left: 1px solid var(--border); background: var(--surface-2); color: var(--muted); font-size: 13px; white-space: nowrap; user-select: none; } .login-ok { margin: 14px 0 0; padding: 12px; border: 1px solid color-mix(in srgb, var(--ok) 45%, transparent); border-radius: 8px; background: color-mix(in srgb, var(--ok) 10%, transparent); font-size: 13px; line-height: 1.55; } .login-ok p { margin: 0 0 8px; } /* Le mot de passe n'apparaît qu'une fois : il doit être lisible sans ambiguïté et se sélectionner d'un geste. */ .password-once { display: block; padding: 10px; margin: 4px 0; border-radius: 6px; background: var(--surface-2); color: var(--text); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 16px; letter-spacing: .06em; text-align: center; user-select: all; } .password-who { margin: 6px 0 0 !important; color: var(--muted); font-size: 12px; } .login-links { display: flex; justify-content: space-between; gap: 10px; margin-top: 16px; } .login-links .link-btn { font-size: 12.5px; } /* ══ Écrans étroits ═════════════════════════════════════════ */ @media (max-width: 760px) { /* La date et la poignée disparaissent avant le reste : ce sont les colonnes dont on peut se passer pour saisir une idée depuis un téléphone. */ :root { --cols: 28px 100px minmax(0, 1fr) 58px 74px 68px; } .cell-grip, .cell-date { display: none; } .topbar { padding: 10px 14px; } .capture, .sheet, .dictation-hint { padding: 0 14px; } .row { gap: 7px; padding: 8px; } .row-header { top: 51px; } .row-btn { opacity: 1; } } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } } /* Ouverture d'un compte, dans le panneau d'administration. */ .user-new { display: flex; align-items: center; gap: .4rem; margin: .6rem 0 .8rem; flex-wrap: wrap; } .user-new .login-input { flex: 1 1 8rem; min-width: 6rem; margin: 0; } /* Déclaration d'un abonnement d'IA. */ .ai-new { display: flex; align-items: center; gap: .4rem; margin: .6rem 0; flex-wrap: wrap; } .ai-new .login-input { margin: 0; min-width: 5rem; }