/*
 * Le mur de post-it (R79, 2026-09-25).
 *
 * Les six teintes vivent ICI et nulle part ailleurs : la base ne garde qu'un
 * NOM de couleur (« jaune », « rose »), jamais un code hexadécimal. Le jour où
 * la charte change, on change six lignes ; si les couleurs étaient en base, il
 * faudrait une migration pour repeindre un mur.
 *
 * Chaque teinte a sa version sombre : un papier jaune vif sur un fond noir
 * brûle les yeux. On garde la même IDENTITÉ de couleur avec une luminosité qui
 * convient au poste (piège générique déjà payé sur Ora360).
 */
.vue-notes { display: flex; min-height: 0; flex: 1; }

.nt-espace { display: flex; flex-direction: column; flex: 1; min-width: 0; min-height: 0; }
.nt-tete { display: flex; align-items: center; gap: 6px; height: var(--tb-tete); padding: 0 14px; border-bottom: 1px solid var(--tb-bordure); }
.nt-titre { margin: 0; font-size: var(--tb-t-m); font-weight: 650; }
.nt-chercher { display: flex; align-items: center; gap: 6px; margin-left: auto; padding: 0 10px; height: 28px; border: 1px solid var(--tb-bordure); border-radius: var(--tb-rayon-s); color: var(--tb-texte-3); }
.nt-chercher:focus-within { border-color: var(--tb-accent); color: var(--tb-texte-2); }
.nt-chercher input { width: 170px; border: 0; background: none; color: var(--tb-texte); font-size: var(--tb-t-s); }
/* La boîte de recherche prend déjà l'accent au focus (`:focus-within`) : un
   second halo sur le champ lui-même ferait double marque. */
.nt-chercher input:focus, .nt-chercher input:focus-visible { outline: none; box-shadow: none; }
.nt-chercher input::-webkit-search-cancel-button { display: none; }

/*
 * LE TIROIR DES CLASSEURS (R80, ouvert par défaut depuis R82).
 *
 * Il était replié « pour laisser la place au mur » ; le propriétaire a
 * redemandé les groupes de notes le lendemain de leur livraison, faute de les
 * avoir vus. Il se montre donc, et qui veut la place entière le replie.
 *
 * L'indentation passe par le padding, jamais par une marge : la rangée reste
 * cliquable jusqu'au bord, même au quatrième niveau (leçon de R74).
 */
.nt-classeurs { display: flex; flex-direction: column; width: 198px; flex: none; border-right: 1px solid var(--tb-bordure); background: var(--tb-surface-2); }
.nt-classeurs-tete { display: flex; align-items: center; gap: 6px; height: var(--tb-tete); padding: 0 6px 0 12px; border-bottom: 1px solid var(--tb-bordure); }
.nt-classeurs-tete strong { flex: 1; font-size: var(--tb-t-s); color: var(--tb-texte-2); }
.nt-classeurs-liste { flex: 1; min-height: 0; overflow-y: auto; padding: 6px 5px; }
.nt-cl { position: relative; display: flex; align-items: center; border-radius: var(--tb-rayon-s); }
.nt-cl:hover { background: var(--tb-surface-3); }
.nt-cl.est-actif { background: color-mix(in srgb, var(--tb-accent) 13%, transparent); }
.nt-cl.est-actif .nt-cl-nom { color: var(--tb-accent); font-weight: 600; }
.nt-cl-chevron { flex: none; width: 20px; height: 26px; display: grid; place-items: center; color: var(--tb-texte-3); margin-left: calc(var(--prof, 0) * 12px); transition: transform var(--tb-duree); }
.nt-cl-chevron.est-ouvert { transform: rotate(90deg); }
.nt-cl-chevron.est-vide { pointer-events: none; }
.nt-cl-nom { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; padding: 4px 6px 4px 2px; font-size: var(--tb-t-xs); color: var(--tb-texte-2); text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nt-cl-n { margin-left: auto; font-size: var(--tb-t-xs); color: var(--tb-texte-3); font-variant-numeric: tabular-nums; }
.nt-cl-hors { font-style: italic; }
/* Glisser-déposer (R83) : ce qu'on tient s'efface, ce qui accueille se teinte.
   Deux signaux distincts, sinon on ne sait plus lequel est lequel. */
.nt-post[draggable="true"], .nt-cl[draggable="true"] { -webkit-user-drag: element; }
.est-glisse { opacity: .4; }
.nt-cl.est-depot { background: color-mix(in srgb, var(--tb-accent) 20%, transparent); outline: 2px solid var(--tb-accent); outline-offset: -2px; }
.nt-cl-saisie { padding: 3px 6px; }
.nt-cl-saisie input { width: 100%; height: 28px; padding: 0 8px; border: 1px solid var(--tb-accent); border-radius: var(--tb-rayon-s); background: var(--tb-surface); color: var(--tb-texte); font-size: var(--tb-t-s); }
.nt-cl-saisie input:focus, .nt-cl-saisie input:focus-visible { outline: none; box-shadow: none; }
.nt-fiche-classeur { display: flex; align-items: center; gap: 8px; margin-left: auto; font-size: var(--tb-t-xs); opacity: .75; }
.nt-fiche-classeur select { max-width: 200px; height: 26px; padding: 0 6px; border: 1px solid rgba(16, 24, 40, .18); border-radius: var(--tb-rayon-s); background: rgba(255, 255, 255, .5); color: inherit; font: inherit; font-size: var(--tb-t-xs); }

/*
 * LE MUR, RESSERRÉ (proprio, 2026-09-26 : « compact, minimaliste moderne »).
 *
 * Trois choses changent, et une seule est une question de goût :
 *  · LA DENSITÉ. Cartes de 190 px au lieu de 212, gouttière de 10 au lieu de
 *    14 : sur un écran large, une rangée de plus tient sans rien serrer de la
 *    lecture. La densité de la maison est déjà à -20 % (charte DA).
 *  · LES OMBRES viennent des JETONS. Elles étaient écrites en dur, deux fois
 *    plus lourdes que `--tb-ombre-carte` : le mur criait au milieu d'une
 *    application sobre, et ne suivait pas le poste sombre.
 *  · LE SURVOL NE SOULÈVE PLUS la carte. Un `translateY` sur une grille de
 *    vingt papiers fait vibrer l'écran au passage de la souris ; un simple
 *    filet suffit à dire « celui-ci ».
 */
.nt-mur { flex: 1; min-height: 0; overflow-y: auto; padding: 14px; display: grid; gap: 10px; align-content: start;
          grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }

.nt-post { position: relative; display: flex; flex-direction: column; gap: 4px; min-height: 118px; max-height: 220px;
           padding: 11px 12px 9px; border-radius: var(--tb-rayon-s); overflow: hidden; cursor: pointer;
           box-shadow: var(--tb-ombre-carte); transition: box-shadow var(--tb-duree); }
.nt-post:hover { box-shadow: var(--tb-ombre-carte), 0 0 0 1px color-mix(in srgb, currentColor 22%, transparent); }
.nt-post:focus-visible { outline: 2px solid var(--tb-accent); outline-offset: 2px; }
.nt-post-titre { margin: 0; font-size: var(--tb-t-s); font-weight: 650; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Le corps se coupe en HAUTEUR, pas au caractère : un post-it se lit d'un
   coup d'oeil, et une phrase tranchée au milieu d'un mot se lit mal. */
.nt-post-corps { margin: 0; flex: 1; min-height: 0; font-size: var(--tb-t-xs); line-height: 1.5; white-space: pre-wrap;
                 overflow: hidden; overflow-wrap: anywhere; }
/* La date ne se lit qu'en cherchant : elle s'efface jusqu'au survol. */
.nt-post-pied { display: flex; align-items: center; gap: 8px; font-size: 10.5px; opacity: .45; transition: opacity var(--tb-duree); }
.nt-post:hover .nt-post-pied { opacity: .7; }
.nt-post.est-jetee { cursor: default; opacity: .8; }
.nt-post.est-jetee:hover { transform: none; }
.nt-post.est-jetee .nt-post-pied { justify-content: space-between; }
.nt-post.est-jetee .btn { height: 26px; padding: 0 10px; font-size: var(--tb-t-xs); }

.nt-vide { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 48px 20px; color: var(--tb-texte-3); text-align: center; }
.nt-vide-corb { grid-column: 1 / -1; padding: 32px 20px; color: var(--tb-texte-3); text-align: center; }
.nt-corb-tete { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; padding-bottom: 4px; }
.nt-corb-tete strong { font-size: var(--tb-t-s); color: var(--tb-texte-2); }

/*
 * LE MENU DU CLIC DROIT (R84). Posé sur `body` en `fixed` : dans le module il
 * serait rogné par le défilement du mur et par l'`overflow` du tiroir.
 */
.nt-ctx { position: fixed; z-index: 90; min-width: 186px; padding: 4px; border: 1px solid var(--tb-bordure);
          border-radius: var(--tb-rayon-s); background: var(--tb-surface); box-shadow: var(--tb-ombre);
          display: flex; flex-direction: column; max-height: 70vh; overflow-y: auto; }
.nt-ctx-item { display: flex; align-items: center; gap: 8px; padding: 5px 9px; border-radius: 5px;
               font-size: var(--tb-t-xs); color: var(--tb-texte-2); text-align: left; white-space: nowrap; }
.nt-ctx-item:hover { background: var(--tb-surface-3); color: var(--tb-texte); }
.nt-ctx-item[aria-current="true"] { color: var(--tb-accent); font-weight: 600; }
.nt-ctx-item.est-danger { color: var(--tb-danger); }
.nt-ctx-item.est-danger:hover { background: color-mix(in srgb, var(--tb-danger) 10%, transparent); }
.nt-ctx-sep { height: 1px; margin: 4px 6px; border: 0; background: var(--tb-bordure); }

/* ── La note dépliée ──────────────────────────────────────────────────── */
/* Elle recouvre le mur plutôt que de s'ouvrir à côté : le propriétaire a
   demandé « la vue complète », et une colonne de détail à droite rendrait la
   note plus étroite que le post-it dont elle sort. */
.nt-fiche { position: absolute; inset: 0; z-index: 30; display: grid; place-items: center; /* Le voile doit RESTER VISIBLE autour : c'est lui qui dit qu'on est
               par-dessus le mur et non sur un autre écran. */
            padding: clamp(16px, 3vh, 40px) clamp(16px, 4vw, 64px);
            background: color-mix(in srgb, var(--tb-voile) 70%, transparent); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
/*
 * GRANDE, parce qu'on y ÉCRIT (proprio, 2026-09-25).
 *
 * La première version plafonnait à 720 px : sur un écran de 2 000, la fiche
 * occupait un tiers de la place et laissait le reste au voile. Une note n'est
 * pas une boîte de dialogue qu'on lit en deux secondes - c'est la surface où
 * l'on rédige, et elle doit prendre la page.
 *
 * La HAUTEUR est fixée, pas seulement plafonnée : sans elle, la boîte se
 * réglait sur son contenu et une note de trois lignes donnait un carré perdu
 * au milieu du voile. Elle garde donc la même dimension, quel que soit le
 * texte, et c'est le champ qui grandit à l'intérieur.
 */
.nt-fiche-boite { display: flex; flex-direction: column; width: min(1180px, 100%); height: min(860px, 100%); border-radius: 14px; overflow: hidden;
                  box-shadow: 0 24px 60px -18px rgba(16, 24, 40, .5); }
.nt-fiche-tete { display: flex; align-items: center; gap: 6px; padding: 10px 14px; }
.nt-fiche-quand { font-size: var(--tb-t-xs); opacity: .6; }
.nt-etat { margin-left: auto; font-size: var(--tb-t-xs); opacity: .6; font-variant-numeric: tabular-nums; }
.nt-fiche-titre { border: 0; background: none; padding: 6px 26px 4px; font-size: var(--tb-t-xl); font-weight: 650; color: inherit; }
/* Le champ prend TOUTE la hauteur restante : on écrit du haut de la boîte au
   bas, sans une bande morte sous le curseur. */
.nt-fiche-corps { flex: 1; min-height: 0; border: 0; background: none; padding: 10px 26px 18px; resize: none;
                  font: inherit; font-size: var(--tb-t-m); line-height: 1.65; color: inherit; }
/*
 * PAS DE HALO SUR LE PAPIER (proprio, 2026-09-25).
 *
 * `01-base.css` pose un `box-shadow` de focus sur TOUT `:focus-visible`. Sur
 * un champ encadré c'est ce qu'il faut ; ici le titre et le corps occupent
 * déjà toute la boîte, et le halo dessinait un trait en travers de la note -
 * on croyait voir une bordure là où il n'y en a pas.
 *
 * `outline: none` NE SUFFIT PAS : l'ombre est une autre propriété, et elle
 * survivait à la règle. Il faut éteindre les deux.
 *
 * Ce qu'on perd : la marque du focus au clavier. Elle est ici sans enjeu, le
 * champ étant la seule chose de la boîte et le curseur y étant visible. On ne
 * retire PAS la règle globale, qui reste utile partout ailleurs.
 */
.nt-fiche-titre:focus, .nt-fiche-corps:focus,
.nt-fiche-titre:focus-visible, .nt-fiche-corps:focus-visible { outline: none; box-shadow: none; }
.nt-fiche-pied { display: flex; align-items: center; gap: 8px; padding: 12px 26px 16px; }
.nt-couleur { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid rgba(16, 24, 40, .16); }
.nt-couleur.est-choisie { box-shadow: 0 0 0 2px var(--tb-surface), 0 0 0 4px var(--tb-accent); }

/* ── Les six papiers ──────────────────────────────────────────────────── */
.nt-post.est-jaune, .nt-fiche.est-jaune .nt-fiche-boite, .nt-couleur.est-jaune { background: #fef3c7; color: #422006; }
.nt-post.est-rose,  .nt-fiche.est-rose  .nt-fiche-boite, .nt-couleur.est-rose  { background: #fce7f3; color: #500724; }
.nt-post.est-bleu,  .nt-fiche.est-bleu  .nt-fiche-boite, .nt-couleur.est-bleu  { background: #dbeafe; color: #172554; }
.nt-post.est-vert,  .nt-fiche.est-vert  .nt-fiche-boite, .nt-couleur.est-vert  { background: #d1fae5; color: #022c22; }
.nt-post.est-mauve, .nt-fiche.est-mauve .nt-fiche-boite, .nt-couleur.est-mauve { background: #ede9fe; color: #2e1065; }
.nt-post.est-gris,  .nt-fiche.est-gris  .nt-fiche-boite, .nt-couleur.est-gris  { background: #e5e7eb; color: #111827; }

/*
 * Poste sombre : même identité de couleur, luminosité qui ne brûle pas.
 *
 * Le thème a TROIS états dans cette application (« clair », « sombre »,
 * « systeme »). La règle sous `@media` est donc gardée par
 * `[data-theme="systeme"]`, EXACTEMENT comme 00-tokens.css : sans ce garde,
 * un poste réglé sur « Clair » avec un système sombre verrait ses post-it
 * s'assombrir quand même. C'est le piège générique déjà payé sur Ora360.
 */
@media (prefers-color-scheme: dark) {
  :root[data-theme="systeme"] .nt-post.est-jaune, :root[data-theme="systeme"] .nt-fiche.est-jaune .nt-fiche-boite, :root[data-theme="systeme"] .nt-couleur.est-jaune { background: #4d3c0c; color: #fef3c7; }
  :root[data-theme="systeme"] .nt-post.est-rose,  :root[data-theme="systeme"] .nt-fiche.est-rose  .nt-fiche-boite, :root[data-theme="systeme"] .nt-couleur.est-rose  { background: #4d1233; color: #fce7f3; }
  :root[data-theme="systeme"] .nt-post.est-bleu,  :root[data-theme="systeme"] .nt-fiche.est-bleu  .nt-fiche-boite, :root[data-theme="systeme"] .nt-couleur.est-bleu  { background: #16305c; color: #dbeafe; }
  :root[data-theme="systeme"] .nt-post.est-vert,  :root[data-theme="systeme"] .nt-fiche.est-vert  .nt-fiche-boite, :root[data-theme="systeme"] .nt-couleur.est-vert  { background: #0f3b2e; color: #d1fae5; }
  :root[data-theme="systeme"] .nt-post.est-mauve, :root[data-theme="systeme"] .nt-fiche.est-mauve .nt-fiche-boite, :root[data-theme="systeme"] .nt-couleur.est-mauve { background: #2e2357; color: #ede9fe; }
  :root[data-theme="systeme"] .nt-post.est-gris,  :root[data-theme="systeme"] .nt-fiche.est-gris  .nt-fiche-boite, :root[data-theme="systeme"] .nt-couleur.est-gris  { background: #2b3038; color: #e5e7eb; }
}
:root[data-theme="sombre"] .nt-post.est-jaune, :root[data-theme="sombre"] .nt-fiche.est-jaune .nt-fiche-boite, :root[data-theme="sombre"] .nt-couleur.est-jaune { background: #4d3c0c; color: #fef3c7; }
:root[data-theme="sombre"] .nt-post.est-rose,  :root[data-theme="sombre"] .nt-fiche.est-rose  .nt-fiche-boite, :root[data-theme="sombre"] .nt-couleur.est-rose  { background: #4d1233; color: #fce7f3; }
:root[data-theme="sombre"] .nt-post.est-bleu,  :root[data-theme="sombre"] .nt-fiche.est-bleu  .nt-fiche-boite, :root[data-theme="sombre"] .nt-couleur.est-bleu  { background: #16305c; color: #dbeafe; }
:root[data-theme="sombre"] .nt-post.est-vert,  :root[data-theme="sombre"] .nt-fiche.est-vert  .nt-fiche-boite, :root[data-theme="sombre"] .nt-couleur.est-vert  { background: #0f3b2e; color: #d1fae5; }
:root[data-theme="sombre"] .nt-post.est-mauve, :root[data-theme="sombre"] .nt-fiche.est-mauve .nt-fiche-boite, :root[data-theme="sombre"] .nt-couleur.est-mauve { background: #2e2357; color: #ede9fe; }
:root[data-theme="sombre"] .nt-post.est-gris,  :root[data-theme="sombre"] .nt-fiche.est-gris  .nt-fiche-boite, :root[data-theme="sombre"] .nt-couleur.est-gris  { background: #2b3038; color: #e5e7eb; }

/* Téléphone : deux colonnes tant que ça tient, puis une, et la fiche prend
   tout l'écran - une note lue dans une fenêtre de 300 px n'est pas lue. */
@media (max-width: 760px) {
  /* Un tiroir de 232 px sur 375, c'est les deux tiers de l'écran : il passe
     par-dessus le mur au lieu de le pousser. */
  .nt-classeurs { position: absolute; top: 0; bottom: 0; left: 0; z-index: 25; width: 236px; box-shadow: var(--tb-ombre); }
  .nt-tete { padding: 0 12px; }
  .nt-titre { font-size: var(--tb-t-m); }
  .nt-chercher input { width: 92px; }
  .nt-mur { padding: 12px; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .nt-fiche { padding: 0; }
  .nt-fiche-boite { width: 100%; height: 100%; max-height: none; border-radius: 0; }
}