/* quentyx-hora / LE CLASSEUR, 2026-09-27. Voir classeur.js.
 *
 * SA REFERENCE EST UNE CAPTURE D ANTHONY (« Workouts ») : des dossiers en CHEMISE,
 * l onglet a gauche, un degrade qui descend vers le sombre, nom en gras et compte en
 * petit en bas, deux boutons ronds en haut a droite, deux colonnes au telephone. Tout
 * passe par les jetons du theme : la chemise suit les dix palettes sans une ligne de plus.
 *
 * LA FORME NE SE DEFORME JAMAIS : la tuile a un rapport fixe (200 / 184, celui du
 * `viewBox`), donc le SVG s agrandit sans s etirer, a toutes les largeurs de grille. */

/* LA MATIERE DE LA CHEMISE VIENT DE L ENCRE MELEE AU FOND, pas des jetons de carte : le
   theme « relief » donne la MEME valeur a --fond-haut et --fond-carte et un filet
   transparent (son relief vient des ombres), et la chemise y etait invisible. Mesure
   a l ecran le 2026-09-27. Posees sur :root, parce que le degrade SVG vit hors de la page. */
:root {
  --cla-haut: color-mix(in srgb, var(--encre) 9%, var(--fond));
  --cla-bas: color-mix(in srgb, var(--encre) 2.5%, var(--fond));
  --cla-filet: color-mix(in srgb, var(--encre) 11%, transparent);
  --cla-ombre: rgba(0, 0, 0, .34);
}

/* ── L en-tete : le nom, puis les ronds ─────────────────────────────────── */
#scene h1.titre.cla-titre { display: flex; align-items: center; gap: 14px; }
.cla-titre .cla-nom { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cla-ronds { display: flex; gap: 8px; flex: 0 0 auto; }
.cla-rond {
  width: 40px; height: 40px; padding: 0; border-radius: 50%; display: inline-grid; place-items: center;
  border: 1px solid var(--cla-filet, var(--carte-filet)); background: var(--fond-carte); color: var(--encre-2);
  cursor: pointer; transition: background .15s, color .15s, transform .15s;
}
.cla-rond svg { width: 18px; height: 18px; }
.cla-rond:hover { color: var(--encre); background: var(--fond-haut); }
.cla-rond:active { transform: scale(.95); }
.cla-rond:focus-visible { outline: 2px solid var(--encre-3); outline-offset: 2px; }

.cla-fil { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font: 500 14px/1.4 var(--interface); color: var(--encre-3); }
.cla-miette { font: inherit; color: var(--encre-3); padding: 2px 4px; border-radius: 6px; cursor: pointer; }
.cla-miette:hover { color: var(--encre); background: var(--voile); }
.cla-miette.cla-cible { color: var(--encre); background: var(--voile); box-shadow: 0 0 0 1px var(--encre-4) inset; }
.cla-fil [aria-current] { color: var(--encre-2); padding: 2px 4px; }
.cla-sep { color: var(--encre-4); }

/* ── La grille ──────────────────────────────────────────────────────────── */
.cla-zone { min-height: 52vh; border-radius: 22px; padding: 4px; transition: background .15s, box-shadow .15s; }
.cla-zone.cla-cible { background: var(--voile); box-shadow: 0 0 0 1.5px var(--encre-4) inset; }
.cla-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 176px), 1fr)); gap: 16px; }
@media (max-width: 600px) { .cla-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }

.cla-tuile {
  position: relative; min-width: 0; aspect-ratio: 200 / 184; border-radius: 22px; cursor: pointer;
  outline: none; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none;
  transition: transform .2s cubic-bezier(.2, .8, .2, 1), opacity .15s;
}
.cla-tuile:hover { transform: translateY(-2px); }
.cla-tuile:focus-visible { box-shadow: 0 0 0 2px var(--encre-3); }
.cla-tuile.emporte { opacity: .4; }

/* LA CHEMISE. Une ombre portee douce sous la forme, pas sous la boite. */
.cla-forme { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible;
  filter: drop-shadow(0 12px 20px var(--cla-ombre)); }
.cla-forme path { transition: stroke .15s; }
.cla-dossier.cla-cible { transform: translateY(-6px) scale(1.035); }
.cla-dossier.cla-cible .cla-forme path { stroke: var(--encre-3); }

.cla-legende { position: absolute; left: 9%; right: 9%; bottom: 10%; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cla-titre-tuile { font: 600 16px/1.25 var(--interface); color: var(--encre); letter-spacing: -.005em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cla-compte { font: 500 13px/1.3 var(--interface); color: var(--encre-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }


/* Le petit bouton de reglages, en haut a gauche comme dans la reference. */
.cla-reglage {
  position: absolute; top: 6%; left: 6%; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 10px;
  display: grid; place-items: center; background: transparent; color: var(--encre-4); cursor: pointer;
  transition: color .15s, background .15s;
}
.cla-reglage svg { width: 18px; height: 18px; }
.cla-reglage:hover, .cla-reglage:focus-visible { color: var(--encre); background: var(--voile); outline: none; }

/* ── Les pieces : la feuille et sa miniature ────────────────────────────── */
.cla-piece { background: linear-gradient(180deg, var(--cla-haut), var(--cla-bas)); border: 1px solid var(--cla-filet);
  box-shadow: 0 12px 20px var(--cla-ombre); overflow: hidden; }
.cla-piece.cla-aussi { border-style: dashed; }
.cla-feuille {
  position: absolute; left: 9%; right: 9%; top: 9%; bottom: 36%; border-radius: 8px 8px 5px 5px; overflow: hidden;
  display: grid; place-items: center; background: var(--fond); box-shadow: 0 0 0 1px var(--filet-2);
}
.cla-feuille img { width: 100%; height: 100%; object-fit: cover; object-position: top center; opacity: 0; transition: opacity .25s; background: #fff; }
.cla-feuille img.pret { opacity: 1; }
.cla-ext { font: 700 13px/1 var(--interface); letter-spacing: .08em; color: var(--encre-3);
  padding: 7px 10px; border: 1px solid var(--filet); border-radius: 8px; }
.cla-piece .cla-reglage { top: 5%; right: 5%; left: auto; background: var(--fond-carte); color: var(--encre-2);
  box-shadow: 0 0 0 1px var(--cla-filet); opacity: 0; }
.cla-piece:hover .cla-reglage, .cla-piece:focus-within .cla-reglage { opacity: 1; }
@media (hover: none) { .cla-piece .cla-reglage { opacity: 1; } }

.cla-vide { min-height: 42vh; display: grid; place-items: center; text-align: center; padding: 24px;
  border: 1.5px dashed var(--filet); border-radius: 22px; color: var(--encre-3); font: 500 15px/1.5 var(--interface); }
.cla-vide p { margin: 0; max-width: 34ch; }

/* ── La navigation de gauche du classeur ────────────────────────────────── */
/* Le retrait passe par le padding : une regle du rail (#rail .lien) remet la marge a zero. */
#rail .lien.cla-lien { padding-left: calc(10px + var(--niveau, 0) * 16px); }
.lien.cla-cible, .titre-lien.cla-cible { background: var(--voile); box-shadow: 0 0 0 1px var(--encre-4) inset; }
.cla-espace { color: var(--encre-3); }

/* ── Le menu « Aussi dans » ─────────────────────────────────────────────── */
.cla-menu-note { margin: 6px 10px 8px; font: 500 13px/1.4 var(--interface); color: var(--encre-3); }
.menu.cla-menu-aussi button { display: flex; align-items: center; gap: 8px; padding-left: calc(10px + var(--niveau, 0) * 14px); }
.cla-coche { width: 14px; flex: 0 0 14px; text-align: center; color: var(--encre); }

/* ── Le choix a l import ────────────────────────────────────────────────── */
.cla-choix .cla-choix-titre { color: var(--encre); font-weight: 600; overflow-wrap: anywhere; }
.cla-options { display: grid; gap: 10px; }
.cla-option {
  display: flex; flex-direction: column; gap: 3px; text-align: left; padding: 14px 16px; border-radius: 12px;
  border: 1px solid var(--filet); background: var(--fond); color: var(--encre); font: inherit; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.cla-option:hover { border-color: var(--encre-4); }
.cla-option[aria-checked="true"] { border-color: var(--encre-3); background: var(--fond-haut); box-shadow: 0 0 0 1px var(--encre-3) inset; }
.cla-option-titre { font-weight: 600; font-size: 15px; }
.cla-option-aide { font-size: 14px; color: var(--encre-3); }

/* ── Le lecteur : l original en grand ───────────────────────────────────── */
html.cla-lecteur-ouvert { overflow: hidden; }
.cla-lecteur {
  position: fixed; inset: 0; z-index: 56; display: flex; flex-direction: column;
  background: var(--voile-modal); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  animation: entre .16s ease-out both;
}
.cla-lecteur-tete {
  display: flex; align-items: center; gap: 8px; padding: 10px 14px; padding-top: max(10px, env(safe-area-inset-top));
  background: var(--fond-carte); border-bottom: 1px solid var(--carte-filet);
}
.cla-lecteur-nom { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; padding-left: 4px; }
.cla-lecteur-nom b { font: 600 15px/1.3 var(--interface); color: var(--encre); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cla-lecteur-nom span { font: 500 13px/1.3 var(--interface); color: var(--encre-3); }
.cla-lecteur-tete .cla-rond { width: 38px; height: 38px; }
.cla-lecteur-pages {
  flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 24px 16px 56px;
  display: flex; flex-direction: column; align-items: center; gap: 18px;
}
.cla-page-pdf { margin: 0; width: min(900px, 100%); flex: 0 0 auto; background: #fff; border-radius: 3px;
  box-shadow: 0 14px 44px rgba(0, 0, 0, .42); overflow: hidden; }
.cla-page-pdf img, .cla-page-image img { display: block; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .2s; }
.cla-page-pdf img.pret, .cla-page-image img.pret { opacity: 1; }
.cla-page-image { margin: auto 0; max-width: min(1200px, 100%); }
.cla-page-image img { width: auto; height: auto; max-width: 100%; max-height: calc(100vh - 150px); border-radius: 6px;
  box-shadow: 0 14px 44px rgba(0, 0, 0, .42); }
.cla-sans-apercu { margin: auto; max-width: 380px; display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 28px; text-align: center; border-radius: 16px; background: var(--fond-carte); color: var(--encre-2);
  border: 1px solid var(--carte-filet); font: 500 14px/1.5 var(--interface); }
.cla-sans-apercu p { margin: 0; }
@media (max-width: 600px) {
  .cla-lecteur-tete { gap: 4px; padding-left: 10px; padding-right: 10px; }
  .cla-lecteur-tete .cla-rond { width: 34px; height: 34px; }
  .cla-lecteur-tete .cla-rond svg { width: 16px; height: 16px; }
  .cla-lecteur-pages { padding: 14px 10px 40px; gap: 12px; }
}

/* ── LE TELEPHONE, 360 a 480 px (Galaxy S, iPhone SE, iPhone 15, Pixel) ─────
   Deux colonnes comme la reference, des tuiles plus serrees, et le titre de la
   tuile qui garde sa place : c est lui qu on lit d abord. Mesure a 360 px le
   2026-09-27 : aucune largeur de page au-dela de la fenetre. */
@media (max-width: 480px) {
  .cla-grille { gap: 10px; }
  .cla-tuile { border-radius: 18px; }
  .cla-legende { left: 10%; right: 8%; bottom: 9%; }
  .cla-titre-tuile { font-size: 15px; }
  .cla-reglage { width: 30px; height: 30px; }
  .cla-ronds { gap: 6px; }
  .cla-rond { width: 38px; height: 38px; }
}


/* ══ LES DOSSIERS ET LES FICHIERS DES LISTES, 2026-09-30 (`carteNoeud` dans app.js) ═══════════════════════════════════
   Anthony : « les dossiers et les fichiers se ressemblent, il faut que les dossiers ressemblent a des dossiers (le modele est dans
   le classeur) et un fichier dessine dans le style de Hora ». Le DOSSIER est la chemise du classeur ; le FICHIER est une feuille au
   coin replie, de la meme matiere ; en grille, il devient la PIECE du classeur (une carte, la feuille en haut). Plus de resume :
   le nom, son numero, sa taille. Meme balisage en liste et en grille : la bascule ne change qu une classe.
   LA LISTE d abord : une vignette de 60 px a gauche, le nom a droite. */
.carte.carte-noeud { display: flex; align-items: center; gap: 16px; padding: 12px 16px; margin: 0 0 10px; min-height: 76px; }
.carte-noeud .vignette { position: relative; flex: 0 0 60px; width: 60px; height: 54px; display: grid; place-items: center; }
.carte-noeud .vignette svg { display: block; width: 100%; height: 100%; }
.carte-noeud .vignette .cla-forme { position: static; filter: drop-shadow(0 5px 8px var(--cla-ombre)); }
.carte-noeud .vignette .hv-feuille { filter: drop-shadow(0 4px 7px var(--cla-ombre)); }
.carte-noeud .corps { flex: 1 1 auto; min-width: 0; }
.carte-noeud h3 { padding-right: 52px; }
.carte-noeud .meta { margin-top: 5px; }
.hv-ext { position: absolute; left: 50%; top: 66%; transform: translate(-50%, -50%); font: 700 9.5px/1 var(--interface);
  letter-spacing: .07em; color: var(--encre-2); padding: 3px 5px; border: 1px solid var(--filet); border-radius: 5px; background: var(--fond); }
/* La colonne d un kanban est etroite : la vignette se reduit, le nom garde sa place. */
.kanban .colonne .carte.carte-noeud { gap: 10px; padding: 10px 10px 10px 12px; min-height: 0; }
.kanban .colonne .carte-noeud .vignette { flex-basis: 40px; width: 40px; height: 37px; }
.kanban .colonne .carte-noeud .hv-ext { font-size: 8px; padding: 2px 3px; }
@media (max-width: 480px) { .carte.carte-noeud { gap: 12px; padding: 10px 12px; } .carte-noeud .vignette { flex-basis: 52px; width: 52px; height: 48px; } }

/* LA GRILLE : les tuiles du classeur (200 / 184, deux colonnes au telephone). Le nom est DANS la chemise, en bas. */
.grille:has(.carte-noeud) { grid-template-columns: repeat(auto-fill, minmax(min(100%, 176px), 1fr)); gap: 16px; margin: 0; }
@media (max-width: 600px) { .grille:has(.carte-noeud) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
.grille .carte.carte-noeud { display: block; position: relative; aspect-ratio: 200 / 184; min-height: 0; padding: 0; margin: 0;
  border: 0; border-radius: 22px; background: none; box-shadow: none; transition: transform .2s cubic-bezier(.2, .8, .2, 1), opacity .15s; }
.grille .carte.carte-noeud:hover { background: none; box-shadow: none; transform: translateY(-2px); }
.grille .carte-noeud .vignette { position: absolute; inset: 0; width: auto; height: auto; flex: none; display: block; }
.grille .carte-dossier .vignette .cla-forme { position: absolute; inset: 0; filter: drop-shadow(0 12px 20px var(--cla-ombre)); }
.grille .carte-noeud .corps { position: absolute; left: 9%; right: 9%; bottom: 8%; display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: center; column-gap: 6px; row-gap: 3px; padding: 0; }
/* Le titre s efface comme boite pour que le NOM prenne toute la largeur et que le numero passe sur la ligne du bas, avec la taille. */
.grille .carte-noeud h3 { display: contents; font: 600 16px/1.25 var(--interface); letter-spacing: -.005em; }
.grille .carte-noeud h3 .nom { grid-column: 1 / -1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grille .carte-noeud h3 .coord { grid-column: 2; grid-row: 2; font-size: 12px; padding: 0 6px; }
.grille .carte-noeud .meta { grid-column: 1; grid-row: 2; margin: 0; padding: 0; gap: 8px; font: 500 13px/1.3 var(--interface); letter-spacing: 0;
  text-transform: none; color: var(--encre-3); min-width: 0; white-space: nowrap; }
/* Le fichier en grille : LA FEUILLE EST LA TUILE, comme la chemise pour le dossier, sans carte autour. La petite feuille (liste) s efface. */
.carte-noeud .vignette .hv-feuille-tuile { display: none; }
.grille .carte-noeud .hv-feuille { display: none; }
.grille .carte-noeud .hv-feuille-tuile { display: block; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible;
  filter: drop-shadow(0 12px 20px var(--cla-ombre)); }
.grille .carte-fichier .hv-ext { left: 9%; top: 19%; transform: translateY(-50%); font-size: 12px; padding: 4px 7px; }
.grille .carte-noeud .gestes-liste, .grille .carte-noeud > .points { z-index: 2; }
@media (max-width: 480px) {
  .hv-ext { font-size: 8px; letter-spacing: .03em; padding: 2px 3px; }
  .grille .carte-fichier .hv-ext { font-size: 10px; padding: 3px 5px; }
  /* La tuile est plus basse au telephone : les deux traits de la feuille montent, pour ne pas toucher le nom. */
  .grille .hv-feuille-tuile g { transform: translateY(-17px); }
  .grille .carte.carte-noeud { border-radius: 18px; }
  .grille .carte-noeud .corps { left: 10%; right: 8%; bottom: 9%; }
  .grille .carte-noeud h3 { font-size: 15px; }
  .grille .carte-noeud .meta { font-size: 12px; }
}

/* ── LE RAYON : la page de tous les classeurs (2026-10-03) ──────────────────
   Des classeurs DEBOUT, cote a cote comme sur une etagere, dans la matiere de la chemise
   (meme degrade, meme arete, meme ombre). Le nom est ecrit dans la fenetre de l etiquette ;
   le trou du doigt est un creux, borde d un anneau. Tout suit les jetons du theme. */
.cla-rayon { grid-template-columns: repeat(auto-fill, minmax(min(100%, 128px), 1fr)); gap: 18px; max-width: 1240px; }
.cla-reliure { aspect-ratio: 120 / 236; border-radius: 12px; container-type: inline-size; }
.cla-reliure .cla-etiquette { fill: color-mix(in srgb, var(--encre) 4%, transparent); stroke: var(--cla-filet); stroke-width: 1; vector-effect: non-scaling-stroke; }
.cla-reliure .cla-encoche { stroke: var(--cla-filet); stroke-width: 1; vector-effect: non-scaling-stroke; }
.cla-reliure .cla-trou { fill: color-mix(in srgb, #000 55%, var(--fond)); }
.cla-reliure .cla-anneau { fill: none; stroke: color-mix(in srgb, var(--encre) 32%, transparent); stroke-width: 2.6; }
/* LE NOM SUIT LA LARGEUR DU CLASSEUR (cqi) : « Personal'Space » se coupait au milieu, mesure du 03/10. */
.cla-nom-etiquette { position: absolute; left: 13%; right: 13%; top: 9.5%; height: 49%; padding: 0 2px;
  display: flex; align-items: center; justify-content: center; text-align: center;
  font: 600 clamp(11px, 8.6cqi, 15px)/1.25 var(--interface); color: var(--encre); letter-spacing: -.005em;
  overflow: hidden; overflow-wrap: break-word; hyphens: manual; }
@media (max-width: 600px) { .cla-rayon { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } }
@media (max-width: 480px) { .cla-rayon { grid-template-columns: repeat(2, minmax(0, 1fr)); } }