/* notask — Material Design 3, thème sombre.
Palette dérivée du violet de référence MD3 ; niveaux de surface obtenus
par superposition tonale, comme le prescrit la spécification. */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');
/* Mode niveaux de gris — voir le toggle dans app.js (#btn-mode-gris,
classe html.mode-gris). PAS un simple `filter` sur : un filter
CSS s'applique à TOUT le sous-arbre d'un élément et aucun filter posé
sur un descendant ne peut l'annuler (limitation CSS, pas un bug d'ici) —
impossible dans ce modèle de garder un enfant en couleur si un ancêtre
est grisé. Le gris est donc posé BRANCHE PAR BRANCHE, en excluant à
chaque niveau l'ancêtre direct de ce qui doit rester en couleur (logo/
titre, icônes du menu, icône de chaque notask) plutôt que sur
entier. Étendre cette liste à un nouvel élément à garder en couleur
veut dire remonter sa chaîne de parents et exclure chacun d'eux ici,
pas juste ajouter une règle sur l'élément lui-même. */
/* En-tête : logo (cuillères) et titre "notask" restent en couleur ; le
reste (pseudo, bouton bascule, Options, Outils) grisé directement. */
html.mode-gris header.topbar > *:not(.logo):not(.brand):not(#btn-mode-gris) { filter: grayscale(1); }
/* Menu latéral : icônes SVG des entrées (Notasks, Prévues, Favoris,
Archives, Corbeille) restent en couleur ; leur texte, les libellés et
séparateurs sont grisés. .drawer et .drawer-notes-group eux-mêmes ne
reçoivent JAMAIS le filter (ce sont des ancêtres des icônes protégées),
seuls leurs autres enfants directs le reçoivent. */
html.mode-gris .drawer > *:not(.drawer-notes-group) { filter: grayscale(1); }
html.mode-gris .drawer-item > *:not(svg) { filter: grayscale(1); }
/* Reste de la coquille (fond du menu mobile) : grisé en bloc. La colonne
d'échéances (.agenda-col) et la vue "notasks prévues" (#view-tasks) sont
traitées séparément pour préserver les icônes colorées. .shell et main
ne reçoivent pas le filter (ancêtres protégés). */
html.mode-gris .shell > *:not(aside.drawer):not(main):not(.agenda-col) { filter: grayscale(1); }
html.mode-gris main > *:not(#view-notes):not(#view-tasks) { filter: grayscale(1); }
html.mode-gris #view-notes > *:not(.notes-grid) { filter: grayscale(1); }
html.mode-gris .notes-grid > *:not(.note) { filter: grayscale(1); }
/* Carte de notask : seule l'icône (.note-icon) reste en couleur, ainsi que
le contenu textuel (.body — texte coloré, liens jaunes, etc.) ; le titre,
les pièces jointes, la palette et les actions passent en gris. */
html.mode-gris .note > *:not(.note-title-row):not(.body) { filter: grayscale(1); }
html.mode-gris .note-title-row > *:not(.note-icon) { filter: grayscale(1); }
/* Fond coloré de la carte (posé par .c-XX directement sur .note) : copié
sur ::before (background: inherit) plutôt que grisé sur .note lui-même
— .note reste un ancêtre protégé de .note-icon. ::before, lui, n'a
aucun descendant : le griser ne touche à rien d'autre. Voir la règle
.note::before plus bas (hors bloc mode-gris) pour la mise en place. */
/* Un simple grayscale() donnait des gris quasi identiques pour toutes
les catégories : la palette est volontairement construite avec des
luminances proches entre couleurs (voir le commentaire au-dessus de
.c-default plus bas), pour un contraste de texte homogène — un
filtre fondé sur la luminance ne peut donc pas les distinguer.
Remplacé par un fond gris EXPLICITE par catégorie, réparti en 6
paliers du plus clair au plus foncé, 4 catégories par palier. */
html.mode-gris .note.c-white::before,
html.mode-gris .note.c-default::before,
html.mode-gris .note.c-red::before,
html.mode-gris .note.c-coral::before {
background: #707070;
}
html.mode-gris .note.c-orange::before,
html.mode-gris .note.c-amber::before,
html.mode-gris .note.c-yellow::before,
html.mode-gris .note.c-lime::before {
background: #5c5c5c;
}
html.mode-gris .note.c-green::before,
html.mode-gris .note.c-emerald::before,
html.mode-gris .note.c-teal::before,
html.mode-gris .note.c-cyan::before {
background: #484848;
}
html.mode-gris .note.c-blue::before,
html.mode-gris .note.c-indigo::before,
html.mode-gris .note.c-violet::before,
html.mode-gris .note.c-purple::before {
background: #363636;
}
html.mode-gris .note.c-magenta::before,
html.mode-gris .note.c-pink::before,
html.mode-gris .note.c-rose::before,
html.mode-gris .note.c-brown::before {
background: #262626;
}
html.mode-gris .note.c-slate::before,
html.mode-gris .note.c-grey::before,
html.mode-gris .note.c-navy::before,
html.mode-gris .note.c-olive::before {
background: #161616;
}
/* Colonne d'échéances (accueil, .agenda-col) et vue "notasks prévues"
(#view-tasks) : les .agenda-item-icon (pastilles colorées) restent en
couleur — même principe que .note-icon pour les cartes. Texte, dates et
cases sont grisés en ciblant les enfants directs de .agenda-item sauf
l'icône. Le fond coloré de la ligne (.agenda-item background inline) reste
visible, comme le fond de la carte note. */
html.mode-gris .agenda-col .agenda-empty,
html.mode-gris #view-tasks .empty { filter: grayscale(1); }
html.mode-gris .agenda-col .agenda-group > h2,
html.mode-gris #view-tasks .agenda-group > h2 { filter: grayscale(1); }
html.mode-gris .agenda-col .agenda-item,
html.mode-gris #view-tasks .agenda-item { background: transparent !important; }
html.mode-gris .agenda-col .agenda-item::before,
html.mode-gris #view-tasks .agenda-item::before { background: #3d3d3d; }
html.mode-gris .agenda-col .agenda-item > *:not(.agenda-item-icon),
html.mode-gris #view-tasks .agenda-item > *:not(.agenda-item-icon) { filter: grayscale(1); }
/* Boîtes de dialogue (édition, profil, outils, historique…) : hors de la
chaîne ci-dessus (siblings de #screen-app), grisées en bloc. */
html.mode-gris body > dialog { filter: grayscale(1); }
:root {
/* Couleurs principales */
--md-primary: #d0bcff;
--md-on-primary: #381e72;
--md-primary-container: #4f378b;
--md-on-primary-container: #eaddff;
--md-secondary: #ccc2dc;
--md-secondary-container: #4a4458;
--md-on-secondary-container: #e8def8;
--md-error: #f2b8b5;
--md-on-error: #601410;
--md-error-container: #8c1d18;
/* Surfaces : du plus sombre au plus clair (élévation croissante) */
--md-surface: #141218;
--md-surface-1: #1d1b20;
--md-surface-2: #211f26;
--md-surface-3: #2b2930;
--md-surface-4: #322f37;
--md-surface-5: #36343b;
--md-on-surface: #e6e0e9;
--md-on-surface-variant: #cac4d0;
--md-outline: #938f99;
--md-outline-variant: #49454f;
--md-success: #b5ccba;
/* Couleurs de marque — les deux cuillères du logo. Déclarées ici et non
réécrites en dur dans les règles : elles servaient à 44 endroits, ce qui
rendait tout changement de teinte incomplet par construction (un oubli
sur une règle passe inaperçu jusqu'à ce qu'on tombe dessus à l'écran).
Les variantes `-rgb` portent les composantes séparées, seule forme
utilisable dans un rgba() dont on veut faire varier l'alpha :
`rgba(var(--spoon-jaune-rgb), .18)`. Garder les deux en phase. */
--spoon-jaune: #ffd54f;
--spoon-jaune-rgb: 255, 213, 79;
--spoon-bleu: #42a5f5;
--spoon-bleu-rgb: 66, 165, 245;
/* Formes — MD3 privilégie des rayons généreux */
--shape-xs: 8px;
--shape-sm: 12px;
--shape-md: 16px;
--shape-lg: 28px;
--shape-full: 999px;
/* Élévations */
--elev-1: 0 1px 3px 1px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.30);
--elev-2: 0 2px 6px 2px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.30);
--elev-3: 0 4px 8px 3px rgba(0,0,0,.15), 0 1px 3px rgba(0,0,0,.30);
/* Hauteur du clavier virtuel mobile, tenue à jour par l'API
VisualViewport (voir app.js) — 0px par défaut (desktop, ou avant le
premier calcul JS). Utilisée par .dns-bottom-bar pour rester au-dessus
du clavier plutôt que de se faire recouvrir. */
--kb-inset: 0px;
}
* { box-sizing: border-box; }
/* Police du code, hébergée par l'app elle-même (app/static/fonts/) plutôt
que servie par un CDN externe : aucune requête vers un tiers, donc rien
qui puisse être bloqué côté réseau ou navigateur.
Px437 IBM VGA 8x16 reproduit le texte VGA d'un vrai terminal. Issue d'un
bitmap 8x16 : nette aux multiples de 16px, plus floue entre deux — d'où
les 16px posés sur .note-code-inline/.note-code-block. */
@font-face {
font-family: "Px437 IBM VGA";
src: url("/static/fonts/Px437_IBM_VGA_8x16.ttf") format("truetype");
font-weight: normal;
font-style: normal;
font-display: swap;
}
/* Un sélecteur de classe (.gate, .tabs…) l'emporte sur le display:none que le
navigateur applique à [hidden]. Sans cette règle, les écrans masqués restent
visibles et se superposent. */
[hidden] { display: none !important; }
/* Réserve en permanence la place de la barre de défilement verticale.
Sans ça, toute vue qui passe de "assez courte" à "trop longue" (filtrer
par libellé, chercher, cocher une tâche…) fait apparaître/disparaître la
barre, ce qui décale d'un coup toute la mise en page horizontalement —
une des "sautes visuelles" signalées. */
html { scrollbar-gutter: stable; }
body {
margin: 0;
font-family: Verdana, Geneva, sans-serif;
background: var(--md-surface);
color: var(--md-on-surface);
line-height: 1.5;
letter-spacing: .01em;
}
/* Barres de défilement : discrètes et TRANSLUCIDES, jamais le gris sur
noir du navigateur — posées sur une carte colorée elles doivent en
reprendre la teinte. Un blanc semi-transparent y parvient quelle que
soit la couleur dessous, sans avoir à décliner les 24 teintes.
Les deux syntaxes sont nécessaires : `scrollbar-*` pour Firefox,
`::-webkit-scrollbar` pour Chrome/Edge/Safari. */
* {
scrollbar-width: thin;
scrollbar-color: rgba(255,255,255,.32) transparent;
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
background: rgba(255,255,255,.28);
border-radius: var(--shape-full);
/* Bordure transparente + background-clip : la poignée paraît plus fine
que la gouttière et ne colle pas aux bords. */
border: 2px solid transparent;
background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover {
background: rgba(255,255,255,.48);
background-clip: padding-box;
}
*::-webkit-scrollbar-corner { background: transparent; }
button { font: inherit; cursor: pointer; }
input, textarea, select { font: inherit; }
/* ============================ Composants ============================ */
/* Boutons — pilule pleine, conforme MD3 */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: .5rem;
min-height: 40px;
padding: 0 1.5rem;
/* Blanc plutôt que le mauve clair (--md-primary) par défaut de MD3. */
background: #fff;
color: #1b1b1f;
border: none;
border-radius: var(--shape-full);
font-size: .875rem;
font-weight: 500;
letter-spacing: .1px;
transition: box-shadow .15s, filter .15s, background .15s;
}
.btn:hover { box-shadow: var(--elev-1); filter: brightness(1.06); }
.btn:active { filter: brightness(.96); }
.btn.wide { width: 100%; }
/* Bouton "outlined" */
.btn.ghost {
background: transparent;
/* Blanc plutôt que le mauve clair (--md-primary), comme pour .btn plein. */
color: #fff;
border: 1px solid var(--md-outline);
}
.btn.ghost:hover { background: rgba(208,188,255,.08); box-shadow: none; }
.btn.danger { background: var(--md-error); color: var(--md-on-error); }
.btn.sm { min-height: 32px; padding: 0 1rem; font-size: .8125rem; }
/* Champs texte — style "filled" MD3 */
.field { margin-bottom: 1.25rem; }
.field label {
display: block;
margin-bottom: .375rem;
font-size: .75rem;
font-weight: 500;
letter-spacing: .4px;
color: var(--md-on-surface-variant);
}
.field input, .field textarea, .field select {
width: 100%;
padding: .875rem 1rem;
background: var(--md-surface-3);
border: 1px solid transparent;
border-bottom: 1px solid var(--md-outline);
border-radius: var(--shape-xs) var(--shape-xs) 0 0;
color: var(--md-on-surface);
transition: border-color .15s, background .15s;
}
.field input:focus, .field textarea:focus, .field select:focus {
outline: none;
border-bottom: 2px solid var(--md-primary);
background: var(--md-surface-4);
}
.hint { font-size: .75rem; color: var(--md-on-surface-variant); margin: .375rem 0 0 1rem; }
/* Le champ description doit rester transparent/italique même à l'intérieur
d'un .field (dialogue d'édition complet), qui impose sinon un fond plein
à tous ses — cette règle, plus spécifique, l'emporte. */
.field input.description-in {
background: transparent;
border: none;
padding: .3rem 0;
margin: 0 0 .75rem;
}
.field input.description-in:focus { background: transparent; border-bottom: none; }
/* Bandeaux de message */
.msg {
margin-top: 1rem;
padding: .75rem 1rem;
border-radius: var(--shape-xs);
font-size: .875rem;
}
.msg.error { background: var(--md-error-container); color: #f9dedc; }
.msg.ok { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }
/* ====================== Écrans de garde ====================== */
.gate { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem; }
.card {
width: 100%;
max-width: 420px;
background: var(--md-surface-2);
border-radius: var(--shape-lg);
padding: 2rem;
box-shadow: var(--elev-2);
}
.card h1 { margin: 0 0 .5rem; font-size: 1.5rem; font-weight: 400; }
.card .sub {
margin: 0 0 2rem;
color: var(--md-on-surface-variant);
font-size: .875rem;
}
/* ============================ Ossature ============================ */
header.topbar {
display: flex;
align-items: center;
gap: .75rem;
height: 64px;
padding: 0 1rem;
background: var(--md-surface-2);
position: sticky;
top: 0;
z-index: 10;
}
header.topbar .brand { font-size: 1.375rem; font-weight: 400; margin-right: .5rem; }
/* Deux cuillères, jaune puis bleue, à pleine hauteur du logo, sans se toucher. */
header.topbar .logo {
display: flex;
align-items: center;
gap: 4px;
height: 28px;
}
header.topbar .logo svg { height: 100%; width: auto; display: block; flex: none; }
header.topbar .spacer { flex: 1; }
/* Pseudo : mêmes taille et graisse que le titre "notask" à gauche
(header.topbar .brand ci-dessus), lettres alternées jaune/bleu cuillère
— construites une par une en JS, voir renderWho(). */
header.topbar .who {
font-size: 1.375rem;
font-weight: 400;
letter-spacing: .01em;
margin-right: .25rem;
}
.who-jaune { color: var(--spoon-jaune); }
.who-bleu { color: var(--spoon-bleu); }
/* Entrées Profil / Outils : pastilles Material, sans cadre — texte BLANC
comme partout dans l'app, sur un fond teinté qui reprend les deux
couleurs du logo (jaune pour la première, bleue pour la seconde). La
couleur est portée par la pastille, pas par le texte : c'est ce qui
permet de garder la lisibilité du blanc tout en gardant le repère. */
.top-entry {
border: none;
color: var(--md-on-surface);
font-size: 1rem;
font-weight: 500;
padding: .4rem .9rem;
border-radius: var(--shape-full);
cursor: pointer;
transition: background .15s, box-shadow .15s;
}
.top-entry-yellow { background: rgba(var(--spoon-jaune-rgb), .28); }
.top-entry-yellow:hover { background: rgba(var(--spoon-jaune-rgb), .45); }
.top-entry-blue { background: rgba(var(--spoon-bleu-rgb), .30); }
.top-entry-blue:hover { background: rgba(var(--spoon-bleu-rgb), .48); }
/* Bascule niveaux de gris — rond à 4 quadrants : gauche = couleurs du logo
(bleu/jaune), droite = deux gris. Le côté qui représente l'état ACTIF
reste net (opacité pleine), l'autre s'estompe — voir renderModeGris()
dans app.js. Toute l'app (y compris ce bouton) passe en niveaux de gris
via `filter` sur (voir plus bas, html.mode-gris) : le bouton lui-
même est donc concerné en mode gris, seule l'opacité de ses moitiés
distingue encore l'état une fois le filtre appliqué. */
.mode-gris-btn {
flex: none;
width: 1.35rem;
height: 1.35rem;
padding: 0;
border: none;
border-radius: 50%;
display: flex;
overflow: hidden;
cursor: pointer;
background: none;
}
.mode-gris-btn .mgb-half {
width: 50%;
height: 100%;
display: flex;
flex-direction: column;
transition: opacity .18s;
}
.mode-gris-btn .mgb-quart { flex: 1 1 50%; }
.mgb-bleu { background: var(--spoon-bleu); }
.mgb-jaune { background: var(--spoon-jaune); }
.mgb-gris1 { background: #eeeeee; }
.mgb-gris2 { background: #424242; }
/* Repos : mode couleur actif, donc côté couleur net, côté gris estompé. */
.mode-gris-btn .mgb-gris { opacity: .35; }
/* Mode gris actif (html.mode-gris, classe posée aussi sur le bouton) :
inversion — côté gris net, côté couleur estompé. */
.mode-gris-btn.actif .mgb-couleur { opacity: .35; }
.mode-gris-btn.actif .mgb-gris { opacity: 1; }
/* Bouton hamburger : n'existe visuellement que sous 860px (voir le second
bloc @media plus bas) — sur desktop le menu reste affiché en permanence
dans la grille, ce bouton n'aurait rien à faire. */
.mobile-menu-btn {
display: none;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
flex: none;
border: none;
border-radius: 50%;
background: transparent;
color: var(--md-on-surface);
cursor: pointer;
}
.mobile-menu-btn:hover { background: rgba(230,224,233,.10); }
.mobile-menu-btn svg { width: 22px; height: 22px; display: block; }
/* ---- Boîtes Profil et Outils ---- */
/* Carte de thème dans le Profil : fond un cran plus sombre que la boîte
(surface-1 sous la surface-3 du dialogue), aucune bordure, coins arrondis.
Discrète — c'est le fond seul qui délimite le groupe, pas un trait. */
.profil-carte {
background: var(--md-surface-1);
border-radius: var(--shape-md, 12px);
padding: 1rem 1.125rem;
margin-bottom: .75rem;
}
.profil-carte > h3 {
margin: 0 0 .75rem;
font-size: 1rem;
font-weight: 600;
}
.profil-carte h4 {
margin: 0 0 .5rem;
font-size: .9375rem;
font-weight: 600;
color: var(--md-on-surface);
}
/* Dernier enfant d'une carte : pas de marge basse résiduelle qui
déséquilibrerait le rembourrage de la carte. */
.profil-carte > :last-child { margin-bottom: 0; }
.profil-infos {
display: grid;
grid-template-columns: auto 1fr;
gap: .4rem 1rem;
margin: 0;
font-size: .875rem;
}
.profil-infos dt { color: var(--md-on-surface-variant); }
.profil-infos dd { margin: 0; color: var(--md-on-surface); }
/* Repère visuel connecté/déconnecté demandé pour Google Calendar : pastille
grise (non connecté), verte (connecté), orange (jeton révoqué/expiré côté
Google — reconnexion nécessaire, voir GoogleAccount.needs_reauth). */
/* Bloc Google/Rappels : les traits de séparation d'origine (border-top/bottom)
ne sont plus nécessaires — c'est la carte .profil-carte qui délimite
désormais chaque thème. Reste un simple espacement au-dessus quand ce bloc
suit d'autres éléments dans la même carte (les identifiants admin). */
.profil-google {
margin: 0;
}
.profil-carte .admin-google + .dialog-actions + .profil-google,
.profil-carte .admin-google + .profil-google {
margin-top: 1rem;
}
.profil-google-row {
display: flex;
align-items: center;
gap: .6rem;
font-size: .875rem;
margin-bottom: .75rem;
}
.profil-google-dot {
width: 10px;
height: 10px;
border-radius: 50%;
flex: none;
background: var(--md-on-surface-variant);
}
.profil-google-dot.connected { background: #4caf50; }
.profil-google-dot.needs-reauth { background: #ff9800; }
.profil-google .dialog-actions { margin: 0; }
/* Choix de l'agenda de destination (liste déroulante, ou saisie manuelle de
l'identifiant quand Google refuse de lister les agendas). Champ et bouton
sur une même ligne : évite une rangée d'actions supplémentaire, qui
ajoutait de la hauteur et désalignait les boutons entre eux. */
.profil-google-cal { margin-top: .75rem; }
.profil-google-cal-label {
display: block;
font-size: .75rem;
color: var(--md-on-surface-variant);
margin-bottom: .3rem;
}
.profil-google-cal-row {
display: flex;
align-items: center;
gap: .5rem;
}
.profil-google-cal-row select,
.profil-google-cal-row input {
flex: 1;
min-width: 0; /* sans ça, un long identifiant d'agenda pousse le bouton hors du cadre */
padding: .5rem .65rem;
border-radius: 8px;
border: 1px solid var(--md-outline-variant);
background: var(--md-surface);
color: var(--md-on-surface);
font: inherit;
font-size: .875rem;
height: 38px;
}
.profil-google-cal-row .btn {
flex: none;
height: 38px; /* même hauteur que le champ, pour un alignement net */
}
.profil-google-cal-hint {
margin: .4rem 0 0;
font-size: .75rem;
line-height: 1.35;
color: var(--md-on-surface-variant);
}
/* Rangée unique Effacer / Déconnecter / Enregistrer. Sélecteur
volontairement à deux classes : `.dialog-actions` (plus bas dans le
fichier) impose margin-top: 1.5rem et l'emporterait, à spécificité égale,
sur une classe seule. */
.dialog-actions.profil-google-actions {
margin-top: .75rem;
flex-wrap: wrap; /* en étroit, les boutons passent à la ligne au lieu de déborder */
}
.outil-bloc {
padding: 1rem 0;
border-top: 1px solid var(--md-outline-variant);
}
.outil-bloc:first-of-type { border-top: none; padding-top: 0; }
.outil-bloc h3 { margin: 0 0 .5rem; font-size: 1rem; font-weight: 500; }
/* Les deux boutons côte à côte sous le champ : c'est le bouton choisi qui
détermine le sens de l'opération, d'où leur poids visuel identique. */
.outil-actions { display: flex; gap: .5rem; margin-top: .25rem; }
#dlg-outils[open] { width: min(552px, 94vw); } /* +20%, même bump que la base dialog */
/* Note descriptive sous un titre de réglage : volontairement discrète et
sur une seule ligne. Elle situe l'option, elle ne la documente pas — un
paragraphe ici serait lu par personne et alourdirait chaque écran. */
.aide {
margin: -.25rem 0 .6rem;
font-size: .75rem;
line-height: 1.35;
color: var(--md-on-surface-variant);
opacity: .85;
}
/* Ligne d'accès au journal dans Outils : texte à gauche, bouton à droite. */
.outil-ligne {
display: flex;
align-items: center;
gap: 1rem;
flex-wrap: wrap;
}
.outil-ligne-texte {
flex: 1;
min-width: 12rem;
margin: 0;
font-size: .8125rem;
line-height: 1.4;
color: var(--md-on-surface-variant);
}
.outil-ligne-compte {
display: block;
margin-top: .15rem;
font-size: .75rem;
color: var(--md-on-surface-variant);
}
/* Un décompte d'erreurs doit se distinguer du simple nombre d'entrées :
c'est la seule information de cet écran qui appelle une action. */
.outil-ligne-compte.a-des-erreurs { color: #ff8a80; font-weight: 500; }
/* ------------------------------ Journal ------------------------------ */
#dlg-logs[open] { width: min(920px, 94vw); }
.logs-barre {
display: flex;
align-items: center;
gap: .75rem;
flex-wrap: wrap;
margin-bottom: .6rem;
}
.logs-filtres { display: flex; gap: .35rem; flex-wrap: wrap; }
.logs-chip {
padding: .3rem .65rem;
font-size: .75rem;
border: 1px solid var(--md-outline-variant);
border-radius: 999px;
background: transparent;
color: var(--md-on-surface-variant);
cursor: pointer;
}
.logs-chip.is-on {
background: rgba(255,255,255,.14);
color: var(--md-on-surface);
border-color: transparent;
}
#logs-recherche {
flex: 1;
min-width: 9rem;
padding: .4rem .65rem;
font: inherit;
font-size: .8125rem;
color: var(--md-on-surface);
background: var(--md-surface-2);
border: none;
border-radius: var(--shape-xs);
}
.logs-liste {
/* Hauteur bornée + défilement : le journal peut compter des centaines de
lignes, la fenêtre ne doit pas s'étirer hors de l'écran. */
max-height: min(60vh, 520px);
overflow-y: auto;
border: 1px solid var(--md-outline-variant);
border-radius: var(--shape-xs);
background: rgba(0,0,0,.22);
}
.logs-vide {
margin: 0;
padding: 1.25rem;
text-align: center;
font-size: .8125rem;
color: var(--md-on-surface-variant);
}
.logs-ligne {
display: grid;
/* Colonnes fixes pour heure/niveau/source : alignées d'une ligne à
l'autre, l'oeil descend en colonne au lieu de chercher où commence
chaque champ. Le message prend le reste. */
grid-template-columns: auto auto auto 1fr;
align-items: center;
gap: .1rem .6rem;
padding: .35rem .6rem;
border-left: 3px solid transparent;
border-bottom: 1px solid rgba(255,255,255,.06);
font-size: .78125rem;
}
.logs-ligne:last-child { border-bottom: none; }
.logs-heure {
font-family: "Px437 IBM VGA", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: .72rem;
color: var(--md-on-surface-variant);
}
.logs-niveau {
font-family: "Px437 IBM VGA", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: .68rem;
letter-spacing: .04em;
}
.logs-source {
font-size: .7rem;
padding: .05rem .35rem;
border-radius: 4px;
background: rgba(255,255,255,.09);
color: var(--md-on-surface-variant);
}
.logs-message {
color: var(--md-on-surface);
overflow-wrap: anywhere; /* une URL longue ne doit pas élargir la fenêtre */
}
.logs-ligne.est-error { border-left-color: #ff5252; background: rgba(255,82,82,.07); }
.logs-ligne.est-error .logs-niveau { color: #ff8a80; }
.logs-ligne.est-warn { border-left-color: #ffb74d; }
.logs-ligne.est-warn .logs-niveau { color: #ffcc80; }
.logs-ligne.est-info { border-left-color: #64b5f6; }
.logs-ligne.est-info .logs-niveau { color: #90caf9; }
.logs-ligne.est-debug { border-left-color: rgba(255,255,255,.2); }
.logs-ligne.est-debug .logs-niveau,
.logs-ligne.est-debug .logs-message { color: var(--md-on-surface-variant); }
.logs-detail { grid-column: 1 / -1; margin-top: .2rem; }
.logs-detail summary {
cursor: pointer;
font-size: .72rem;
color: var(--md-on-surface-variant);
}
.logs-detail pre {
margin: .3rem 0 0;
padding: .5rem .6rem;
max-height: 220px;
overflow: auto;
background: rgba(0,0,0,.35);
border-radius: var(--shape-xs);
font-family: "Px437 IBM VGA", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: .72rem;
line-height: 1.4;
white-space: pre-wrap;
overflow-wrap: anywhere;
color: var(--md-on-surface-variant);
}
/* ===================== Menu latéral (navigation drawer) ===================== */
.shell {
display: grid;
/* 288px plutôt que les 260px d'origine : "Toutes les notasks" (le plus
long intitulé du menu) était tronqué avec des points de suspension à
260px. */
grid-template-columns: 278px minmax(0, 1fr);
align-items: start;
}
/* Colonne d'échéances (voir #agenda-col) : classe posée par JS (switchView)
plutôt qu'un simple attribut hidden sur la colonne elle-même — on veut
une 3e piste de grille qui n'existe carrément pas quand elle est absente,
pas une piste minmax(0, …) dont le calcul de taille avec un contenu
display:none serait plus difficile à garantir stable. */
/* 330px et non 280 : la ligne de date d'une échéance récurrente débordait
sur deux lignes. Les 50px de plus sont pris INTÉGRALEMENT sur les marges
(voir juste en dessous) — demande explicite : ne pas rogner la zone
d'affichage des notasks. C'est à peu près le maximum tenable : sur un
écran de 1280px il ne reste alors qu'une trentaine de pixels entre la
mosaïque et cette colonne. */
.shell.has-agenda { grid-template-columns: 278px minmax(0, 1fr) 330px; }
/* Les marges de la mosaïque se resserrent d'autant pour financer la
colonne, plutôt que de rétrécir la grille de notes elle-même (demande
explicite : gratter dans les marges, pas dans la zone centrale).
Le « + 44px » compense EXACTEMENT les 50px repris par la colonne
ci-dessus : la piste centrale ayant perdu 50px, 88 % de celle-ci en perd
44 — les rajouter rend à la mosaïque la largeur au pixel près qu'elle
avait avant l'élargissement, quelle que soit la taille de l'écran. Une
simple hausse du pourcentage n'aurait pas cette propriété : elle ne
tomberait juste qu'à une seule largeur de fenêtre. */
.shell.has-agenda main { width: calc(88% + 44px); }
.drawer {
padding: .75rem .75rem 2rem 0;
position: sticky;
top: 64px;
/* Pas de scroll interne : le menu prend la hauteur de son contenu. Un
max-height en vh/dvh + overflow-y:auto produisait, sous `zoom`, un
débordement sous-pixel — barre parasite puis scroll molette alors que
le menu tient largement. S'il devenait plus haut que l'écran, c'est la
page qui défile (le menu reste sticky). */
max-height: none;
overflow-y: visible;
}
/* Comme les autres titres de section : casse respectée, pas de majuscules
forcées (voir .agenda-group h2). */
.drawer-section {
margin: .75rem 0 .25rem;
padding-left: 1.5rem;
font-size: .875rem;
font-weight: 500;
letter-spacing: .01em;
color: var(--md-on-surface-variant);
}
.drawer-sep {
border: none;
border-top: 1px solid var(--md-outline-variant);
margin: .75rem 0 .25rem 1rem;
}
/* Espace entre la barre de séparation et le premier libellé — sans toucher
à .drawer-sep, partagée avec d'autres séparateurs du menu qui n'ont pas
besoin de cet écart. */
#labels-list { margin-top: 1rem; }
/* Élément de navigation MD3 : pilule pleine à droite */
.drawer-item {
display: flex;
align-items: center;
gap: 1.25rem;
width: 100%;
min-height: 48px;
padding: 0 1.5rem 0 1.5rem;
background: transparent;
border: none;
border-radius: 0 var(--shape-full) var(--shape-full) 0;
color: var(--md-on-surface-variant);
font-size: .875rem;
font-weight: 500;
letter-spacing: .1px;
text-align: left;
transition: background .15s, color .15s;
}
.drawer-item:hover { color: var(--md-on-surface); }
/* :not([style]) : un libellé avec une couleur propre (posée en style inline,
voir app.js) garde cette couleur en toutes circonstances — le survol ne
doit remplacer le fond gris que pour les entrées sans couleur propre. */
.drawer-item:not([style]):hover { background: rgba(230,224,233,.08); }
.drawer-item.active {
background: var(--md-secondary-container);
color: var(--md-on-secondary-container);
}
/* Un libellé coloré + actif (filtre en cours) : l'outline reste visible même
si le style inline l'emporte sur le fond de .active. */
/* Bleu (couleur de la cuillère bleue), pas le mauve par défaut. */
.drawer-item.label-item[style].active { outline: 2px solid var(--spoon-bleu); outline-offset: -2px; }
.drawer-item.label-item[style] { color: var(--md-on-surface); }
.drawer-item svg { width: 22px; height: 22px; flex: none; }
.drawer-item .label {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.drawer-item.add { color: var(--md-on-surface-variant); }
/* Rond de comptage (nav-tasks) : poussé à droite par
margin-left:auto (indépendant du gap régulier entre icône/texte), avec
une marge propre avant le bord — le bord droit de la pilule est arrondi
(voir .drawer-item plus haut), le rond ne doit pas le toucher ni se faire
couper par lui. */
.nav-count {
flex: none;
margin-left: auto;
margin-right: .125rem;
min-width: 20px;
height: 20px;
padding: 0 .375rem;
border-radius: var(--shape-full);
background: rgba(255,255,255,.14);
color: inherit;
font-size: .6875rem;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
}
/* Repère de navigation : la section Notes en jaune, la section Tâches en
bleu — les mêmes teintes que les deux cuillères du logo (ICONS.spoon /
ICONS.spoonBlue). Uniquement décoratif ici, sans rapport avec la couleur
propre de chaque note (celle-là reste réglable parmi les 21 teintes, voir
.c-* plus bas) : la nuance se limite au menu de gauche, pour s'y repérer
d'un coup d'œil entre les deux familles de vues. */
.drawer-notes-group .drawer-section { color: var(--spoon-jaune); opacity: .85; }
.drawer-notes-group .drawer-item svg { color: var(--spoon-jaune); }
.drawer-notes-group .drawer-item.active { background: rgba(var(--spoon-jaune-rgb), .16); color: var(--spoon-jaune); }
/* "Notasks Prévues" vit désormais dans le groupe jaune (la section Tâches
séparée a été supprimée), mais garde le bleu de la seconde cuillère :
ces règles doivent donc l'emporter sur celles ci-dessus — d'où le
sélecteur par id, plus spécifique, et le placement juste après. */
#nav-tasks svg { color: var(--spoon-bleu); }
#nav-tasks.active { background: rgba(var(--spoon-bleu-rgb), .16); color: var(--spoon-bleu); }
/* Sous 860 px, le menu n'est plus affiché en permanence dans la grille :
il devient le MÊME menu que sur desktop (mêmes sections, mêmes
libellés, même style — rien n'est redéfini pour .drawer-section/
.drawer-sep/.drawer-item ci-dessous, ils gardent leur apparence
"desktop" telle quelle), replié par défaut, ouvert en panneau superposé
par le bouton hamburger (voir #mobile-menu-btn dans index.html et
ouvrirMenuMobile()/fermerMenuMobile() dans app.js).
La colonne d'échéances (agenda-col) n'a plus la place d'être une 3e
piste de grille à côté de la mosaïque — sur demande explicite, elle
devient sa propre PAGE verticale, à côté de l'accueil (mosaïque de
notasks) plutôt qu'au-dessus ou en dessous : les deux se glissent
horizontalement l'une vers l'autre au doigt, comme un carrousel à deux
volets. Fait en scroll-snap natif du navigateur (overflow-x + scroll-
snap-type) plutôt qu'en gérant le geste à la main en JS : plus fiable
(défilement/inertie natifs, pas de conflit avec le défilement vertical
de chaque page), et beaucoup moins de code qu'un glisser reconstruit
pointeur par pointeur. Uniquement quand .shell.has-agenda est posée
(voir switchView() dans app.js) : sur les autres vues (tâches, corbeille,
comptes), il n'y a qu'une seule page, pas de carrousel à faire. */
@media (max-width: 860px) {
.shell, .shell.has-agenda { grid-template-columns: 1fr; }
.mobile-menu-btn { display: flex; }
.shell.has-agenda {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
}
.shell.has-agenda > main,
.shell.has-agenda > .agenda-col {
flex: 0 0 100%;
width: 100%;
max-width: 100%;
scroll-snap-align: start;
scroll-snap-stop: always;
}
/* La redéfinition complète de .agenda-col (position, hauteur, padding)
vit plus bas dans ce fichier, groupée avec les autres ajustements
"main { width: 100% }" — pas ici : la déclaration DESKTOP de
.agenda-col (position:sticky…) est elle-même plus bas que ce bloc-ci,
et à spécificité égale (même sélecteur .agenda-col), c'est l'ORDRE
D'APPARITION dans le fichier qui tranche, indépendamment de la media
query. La poser ici aurait été silencieusement écrasée par la règle
desktop, plus bas — piège bête, croisé et évité avant de le commettre. */
.drawer {
/* position:fixed retire complètement .drawer du flux de la grille
(comme position:absolute) — main récupère alors toute la largeur
disponible, sans laisser de piste vide derrière un menu devenu
flottant. */
position: fixed;
top: 0;
left: 0;
height: 100dvh;
width: min(300px, 84vw);
max-height: none;
z-index: 2000;
background: var(--md-surface-3);
box-shadow: var(--elev-3);
padding: max(.75rem, env(safe-area-inset-top)) .75rem 2rem max(0px, env(safe-area-inset-left));
/* Replié par défaut : retiré du rendu (display:none), pas seulement
masqué visuellement — un panneau invisible mais toujours cliquable
resterait un piège à interaction juste sous le contenu. */
display: none;
}
/* Classe posée par ouvrirMenuMobile() : transform-origin déjà réglé en
JS (même mécanisme que animerOuvertureDialogue() pour les notes) au
moment où elle est ajoutée, juste avant la classe d'animation
dlg-open-anim. */
.drawer.mobile-open { display: block; }
}
/* Fond assombri derrière le menu mobile déplié (voir #drawer-backdrop dans
index.html) — même teinte que le fond des