/* ==========================================================================
   Bū tools · les côtés de l'accueil (app/cotes.js) : la to-do à gauche, les notes à droite
   Le même ton que les widgets du haut et les indications du bas : mono gris, peu de contraste, plus net au survol.
   Partout des tiroirs : l'accueil reste nu ; deux repères verticaux, très discrets, au bord de l'écran les ouvrent en un clic.
   ========================================================================== */
.cote, .cote-repere { display: none; }
html.avec-todo .cote-gauche, html.avec-notes .cote-droite { display: flex; }
.edition .cote, .edition .cote-repere, html.cote-ouvert .cote-repere, html.outil .cote-repere, html.ouvert .cote-repere, html.atelier-ouvert .cote-repere { display: none !important; }

.cote { flex-direction: column; gap: 10px; z-index: 4; color: var(--texte2); }
.cote-tete { flex: none; display: flex; align-items: baseline; gap: 10px; }
.cote-titre { font: 500 10.5px/1.5 var(--mono); letter-spacing: .1em; color: var(--texte2); }
.cote-compte { font: 500 10.5px/1.5 var(--mono); letter-spacing: .06em; color: var(--texte2); opacity: .6; }
.cote-fermer { display: none; margin-left: auto; width: 30px; height: 30px; border: 0; border-radius: 50%; background: none; color: var(--texte2); cursor: pointer; place-items: center; }
.cote-fermer svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

/* La to-do */
.cote-liste { flex: 1; min-height: 0; overflow-y: auto; margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; scrollbar-width: none; }
.cote-liste::-webkit-scrollbar { display: none; }
.cote-tache { display: flex; align-items: flex-start; gap: 10px; padding: 5px 0; font: 400 13px/1.45 var(--corps); color: var(--texte2); }
.cote-tache span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.cote-tache.faite span { text-decoration: line-through; opacity: .45; }
.cote-case { flex: none; width: 13px; height: 13px; margin-top: 3px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(242, 240, 235, .35); transition: background .3s var(--courbe), box-shadow .3s var(--courbe); }
.cote-case[aria-pressed="true"] { background: rgba(242, 240, 235, .5); box-shadow: none; }
.cote-retirer { flex: none; width: 18px; height: 18px; margin-top: 1px; padding: 0; border: 0; background: none; color: var(--texte2); cursor: pointer; display: grid; place-items: center; opacity: 0; transition: opacity .2s; }
.cote-retirer svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.cote-tache:hover .cote-retirer, .cote-retirer:focus-visible { opacity: .7; }
@media (pointer: coarse) { .cote-retirer { opacity: .5; } }
.cote-ajout { flex: none; width: 100%; border: 0; outline: none; background: none; padding: 6px 0; color: var(--papier); font: 400 13px/1.45 var(--corps); }
.cote-ajout::placeholder { font: 500 10.5px/1.5 var(--mono); letter-spacing: .1em; color: var(--texte2); opacity: .7; }
.cote-effacer { flex: none; align-self: flex-start; border: 0; background: none; padding: 2px 0; cursor: pointer; font: 500 10.5px/1.5 var(--mono); letter-spacing: .1em; color: var(--texte2); opacity: .6; }
.cote-effacer:hover { opacity: 1; }
.cote-cache { visibility: hidden; }                      /* la place reste : rien ne bouge */

/* Les notes : de petites tuiles de taille fixe, sur deux colonnes ; la liste défile dans sa colonne */
.cote-nouvelle { flex: none; text-align: left; cursor: pointer; font: 500 10.5px/1.5 var(--mono); letter-spacing: .1em; color: var(--texte2); opacity: .7; }
.cote-nouvelle:hover { opacity: 1; }
.cote-nouvelle:disabled { opacity: .3; cursor: default; }
.cote-tuiles { flex: 1; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 92px; gap: 8px; align-content: start;
  scrollbar-width: none; }
.cote-tuiles::-webkit-scrollbar { display: none; }
.cote-tuile { position: relative; overflow: hidden; border-radius: 10px; background: rgba(242, 240, 235, .035); box-shadow: inset 0 0 0 1px var(--filet-doux);
  transition: background .3s var(--courbe), box-shadow .3s var(--courbe); }
.cote-tuile:hover, .cote-tuile:focus-within { background: rgba(242, 240, 235, .06); box-shadow: inset 0 0 0 1px var(--filet); }
.cote-tuile textarea { display: block; width: 100%; height: 100%; resize: none; border: 0; outline: none; background: none; padding: 9px 22px 9px 10px;
  color: var(--texte2); font: 400 12px/1.45 var(--corps); overflow-y: auto; scrollbar-width: none; }   /* un texte long défile dans sa tuile */
.cote-tuile textarea::-webkit-scrollbar { display: none; }
.cote-tuile textarea:focus { color: var(--papier); }
.cote-tuile textarea::placeholder { color: var(--texte2); opacity: .6; }
.cote-tuile .cote-retirer { position: absolute; top: 5px; right: 4px; margin: 0; }
.cote-tuile:hover .cote-retirer { opacity: .7; }
.cote-vide { grid-column: 1 / -1; margin: 0; font: 500 10.5px/1.6 var(--mono); letter-spacing: .1em; color: var(--texte2); opacity: .7; }

/* Les repères au bord de l'écran (communs) : un mot vertical très discret, à --marge du bord (34 px : la même marge que les
   widgets du haut et les indications du bas) ; sur ordinateur, une zone large à viser */
:root { --marge-cote: 34px; }
.cote-repere { position: fixed; top: 50%; z-index: 3; border: 0; background: none; cursor: pointer; padding: 14px 8px; writing-mode: vertical-rl;
  font: 500 10px/1 var(--mono); letter-spacing: .14em; color: var(--texte2); opacity: .32; transition: opacity .3s var(--courbe); }
.cote-repere:hover { opacity: .9; }
.cote-repere:focus-visible { opacity: .9; outline: 1px solid var(--filet); outline-offset: 2px; border-radius: 6px; }
/* Le texte tombe à --marge-cote du bord (le bouton déborde de sa marge intérieure, 8 px) */
.cote-repere-gauche { left: calc(env(safe-area-inset-left) + var(--marge-cote) - 8px); translate: 0 -50%; rotate: 180deg; }
.cote-repere-droite { right: calc(env(safe-area-inset-right) + var(--marge-cote) - 8px); translate: 0 -50%; }
@media (hover: hover) { .cote-repere { padding-inline: 40px; } }   /* en écriture verticale, « inline » est l'axe vertical */

/* ---------- Ordinateur (≥ 1200 px, souris) : des colonnes à déplier, posées à côté de la grille, discrètes ---------- */
@media (min-width: 1200px) and (hover: hover) {
  html.avec-todo:not(.todo-deplie) .cote-gauche, html.avec-notes:not(.notes-deplie) .cote-droite { display: none; }
  .cote { position: fixed; top: 50%; translate: 0 -50%; z-index: 4; height: 52vh; width: min(260px, calc((100vw - 760px) / 2 - 48px));
    opacity: .62; transition: opacity .4s var(--courbe); }
  .cote-gauche { left: var(--marge-cote); }                   /* à la place du mot, à la même marge que le haut et le bas */
  .cote-droite { right: var(--marge-cote); }
  .cote:hover, .cote:focus-within { opacity: 1; }
  .cote-fermer { display: grid; transition: opacity .3s; }
  .cote:hover .cote-fermer, .cote-fermer:focus-visible { opacity: .9; }
  .cote-voile { display: none; }
  html.avec-todo .cote-repere-gauche, html.avec-notes .cote-repere-droite { display: block; }
  html.todo-deplie .cote-repere-gauche, html.notes-deplie .cote-repere-droite { display: none; }   /* dépliée : plus de mot au bord ; × la replie */
  .cote-fermer { opacity: .45; }
  html.ouvert .cote, html.outil .cote, html.atelier-ouvert .cote { display: none !important; }
}

/* ---------- Téléphone, fenêtre étroite : deux tiroirs, et leurs repères au bord de l'écran (l'accueil reste nu) ---------- */
@media (max-width: 1199px), (hover: none) {
  .cote { position: fixed; top: 0; bottom: 0; z-index: 12; width: min(86vw, 380px); padding: calc(var(--marge-cote) + env(safe-area-inset-top)) var(--marge-cote) calc(var(--marge-cote) + env(safe-area-inset-bottom));
    background: rgb(18, 16, 14); box-shadow: 0 0 0 1px var(--filet-doux); transition: translate .45s var(--courbe); }
  .cote-gauche { left: 0; translate: -104% 0; padding-left: calc(var(--marge-cote) + env(safe-area-inset-left)); }
  .cote-droite { right: 0; translate: 104% 0; padding-right: calc(var(--marge-cote) + env(safe-area-inset-right)); }
  html.cote-ouvert[data-cote="todo"] .cote-gauche, html.cote-ouvert[data-cote="notes"] .cote-droite { translate: 0 0; }
  .cote-fermer { display: grid; }
  .cote-voile { position: fixed; inset: 0; z-index: 11; background: rgba(0, 0, 0, .45); opacity: 0; pointer-events: none; transition: opacity .4s var(--courbe); }
  html.cote-ouvert .cote-voile { opacity: 1; pointer-events: auto; }
  html.avec-todo .cote-repere-gauche, html.avec-notes .cote-repere-droite { display: block; }
}

/* Téléphone : la grille prend toute la largeur, les mots verticaux tomberaient sur les icônes. Ils passent en bas, dans les coins,
   à l'horizontale, sur la ligne de « visiter la būtique » (--bas-tel, app/hub.css ; 34 px des bords) */
@media (max-width: 600px) {
  .cote-repere { writing-mode: horizontal-tb; rotate: none; translate: none; top: auto; bottom: calc(var(--bas-tel) - 2px);
    padding: 6px 0; font: 500 10.5px/1.5 var(--mono); letter-spacing: .1em; opacity: .45; }
  .cote-repere-gauche { left: calc(34px + env(safe-area-inset-left)); }
  .cote-repere-droite { right: calc(34px + env(safe-area-inset-right)); }
}