/* La vue Bibliothèque : la galerie des créations d'Ahmed, et son atelier.
 *
 * Une seule grammaire visuelle, celle de COQUE.md §2.3 et de `coque.css` : une SURFACE est
 * blanche et posée par `--ombre`, jamais bordée ; une COMMANDE se dit par son fond (plein accent
 * pour la principale, `--doux` pour la secondaire) ; un CHAMP est un creux sans trait (règle
 * globale de `studio.css`) ; une PASTILLE est un fond doux sans trait. Le seul contour est
 * l'anneau de 6 % que `--ombre` porte déjà — sauf le pointillé d'une zone de dépôt, qui porte
 * un sens.
 *
 * La personnalité est dans les APERÇUS, pas dans la coque (audit §9) : chaque aperçu est une
 * composition CSS mesurée en `cqw`, donc lisible aussi bien dans une carte de 300 px que dans
 * l'atelier. Aucun texte d'aperçu ne descend sous 12 px, d'où les `max(12px, …)`.
 *
 * Mobile d'abord : tout ce qui suit est écrit pour 375 px, et les paliers `min-width`
 * (768, 900, 1024, 1440, 1500) ne font qu'élargir. Aucune cible en dessous de 44 px.
 */

.biblio-page { display: flex; flex-direction: column; gap: var(--e2); max-width: 1180px; }

/* ---- L'en-tête ---------------------------------------------------------------------------- */
.biblio-entete { display: flex; flex-direction: column; gap: var(--e2); }
.biblio-intro { min-width: 0; }
.biblio-intro h2 { margin: 0; font-size: 28px; font-weight: 700; line-height: 1.2; letter-spacing: -1px; }
.biblio-sous-titre { margin: 8px 0 0; font-size: 15px; line-height: 1.6; color: var(--encre-2); }
.biblio-entete > .bouton { align-self: stretch; }

/* ---- La barre : recherche, liés, importer ------------------------------------------------- */
.biblio-barre { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e1); }
/* Le champ est un creux, la loupe vit dedans : un seul bloc, pas un cadre autour d'un cadre. */
.biblio-recherche { flex: 1 1 260px; min-width: 0; display: flex; align-items: center; gap: var(--e1); padding: 0 12px; border-radius: var(--rayon); background: var(--doux); color: var(--encre-2); }
.biblio-recherche:focus-within { background: var(--fond-2); box-shadow: var(--anneau); }
.biblio-recherche input { flex: 1; min-width: 0; min-height: var(--cible); padding: 0; border: 0; background: none; font: inherit; font-size: 16px; color: var(--encre); }
.biblio-recherche input:focus-visible { outline: 0; }
.biblio-loupe { flex: none; display: inline-grid; place-items: center; }
.biblio-loupe .ui-icon { width: 18px; height: 18px; }
.biblio-filtre { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: var(--e1); min-height: var(--cible); padding: 0 16px; border: 0; border-radius: var(--rayon); background: var(--doux); color: var(--encre); font: inherit; font-size: 14px; cursor: pointer; }
.biblio-filtre:hover { background: var(--doux-2); }
.biblio-filtre[aria-pressed='true'] { background: var(--accent-2); color: var(--accent); font-weight: 600; }
.biblio-import-etat { margin: 0; font-size: 14px; line-height: 1.6; color: var(--encre-2); }
.biblio-import-refus { color: var(--alerte); }

/* ---- Les onglets et les sous-filtres ------------------------------------------------------ */
.biblio-onglets { display: flex; flex-wrap: wrap; gap: var(--e1); }
.biblio-onglet { min-height: var(--cible); padding: 0 16px; border: 0; border-radius: 999px; background: transparent; color: var(--encre-2); font: inherit; font-size: 15px; cursor: pointer; }
.biblio-onglet:hover { background: var(--doux); color: var(--encre); }
.biblio-onglet[aria-selected='true'] { background: var(--accent-2); color: var(--accent); font-weight: 600; }
.biblio-pilules { display: flex; flex-wrap: wrap; gap: 6px; }
.biblio-pilule { min-height: var(--cible); padding: 0 14px; border: 0; border-radius: 999px; background: var(--doux); color: var(--encre-2); font: inherit; font-size: 14px; cursor: pointer; }
.biblio-pilule:hover { background: var(--doux-2); color: var(--encre); }
.biblio-pilule[aria-pressed='true'] { background: var(--encre); color: var(--fond-2); font-weight: 600; }
.biblio-compte { margin: 0; font-size: 13px; color: var(--encre-2); }
.biblio-compte:empty { display: none; }

/* ---- La collection ------------------------------------------------------------------------ */
.biblio-collection { display: flex; flex-direction: column; gap: var(--e2); border-radius: var(--rayon); }
/* Un fichier lâché sur la galerie : le pointillé dit où il tombera. */
.biblio-collection[data-depot='oui'] { outline: 2px dashed var(--accent); outline-offset: 8px; }
.biblio-grille { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e2); }

.biblio-etat { display: flex; flex-direction: column; align-items: flex-start; gap: var(--e1); padding: var(--e3) var(--e2); border-radius: var(--rayon); background: var(--fond-2); box-shadow: var(--ombre); }
.biblio-etat h3 { margin: 0; font-size: 17px; font-weight: 600; }
.biblio-etat p { margin: 0 0 var(--e1); font-size: 14px; line-height: 1.7; color: var(--encre-2); }
.biblio-etat-actions { display: flex; flex-wrap: wrap; gap: var(--e1); }
.style-attente { margin: 0; padding: var(--e2); border-radius: var(--rayon); background: var(--fond-2); box-shadow: var(--ombre); }

/* ---- Une carte ---------------------------------------------------------------------------- */
.biblio-carte { position: relative; min-width: 0; border-radius: var(--rayon); background: var(--fond-2); box-shadow: var(--ombre); overflow: hidden; transition: box-shadow 150ms ease, transform 150ms ease; }
.biblio-carte:hover { box-shadow: var(--anneau), 0 10px 26px rgba(35, 36, 59, .09); }
.biblio-ouvrir { display: block; width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.biblio-ouvrir:focus-visible { outline-offset: -3px; }
.biblio-corps { display: flex; flex-direction: column; gap: 3px; padding: 14px var(--e2) 16px; }
/* Un nom de création (EF-11) : deux lignes au plus, sinon une carte deviendrait bien plus
 * haute que ses voisines dans la grille dès qu'une IA écrit un nom trop généreux. */
.biblio-nom {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -.2px;
  overflow-wrap: anywhere;
}
.biblio-meta { font-size: 13px; color: var(--encre-2); overflow-wrap: anywhere; }
.biblio-usage { font-size: 13px; color: var(--encre-2); overflow-wrap: anywhere; }
/* Les commandes de lecture flottent par-dessus l'aperçu : elles sont hors du bouton d'ouverture,
 * car un bouton dans un bouton ne se touche ni ne se tabule. `flex-wrap` et le `max-width` : une
 * scène pose Lire/Pause ET trois vitesses (§ plus bas) — à 375 px, ça ne tient qu'en deux lignes,
 * jamais en débordant de la carte (`.biblio-carte` est `overflow: hidden`, CT-27). */
.biblio-commandes { position: absolute; top: var(--e1); right: var(--e1); z-index: 3; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; max-width: calc(100% - 2 * var(--e1)); }
.biblio-lire { min-height: var(--cible); min-width: var(--cible); padding: 0 14px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .92); color: var(--encre); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; box-shadow: 0 2px 10px rgba(23, 33, 43, .18); }
.biblio-lire:hover { background: #fff; }
.biblio-lire .ui-icon { width: 16px; height: 16px; }
.biblio-fixe { display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px; border-radius: 999px; background: rgba(255, 255, 255, .92); color: var(--encre-2); font-size: 12px; }

/* ---- La zone d'aperçu --------------------------------------------------------------------- */
/* 16/10 partout, stable : une image verticale, une vidéo carrée et une planche de couleurs
 * occupent la même place, et la grille ne sursaute pas d'une carte à l'autre. */
.biblio-art {
  position: relative;
  aspect-ratio: 16 / 10;
  max-width: 100%;
  overflow: hidden;
  isolation: isolate;
  container-type: inline-size;
  display: grid;
  place-items: center;
  background: var(--scene-fond, #20232b);
  color: var(--scene-encre, #fff);
}
.biblio-confiance { position: absolute; top: 10px; left: 10px; z-index: 4; padding: 3px 8px; border-radius: 6px; background: rgba(255, 255, 255, .9); color: #414654; font-size: 12px; font-weight: 600; box-shadow: var(--anneau); }
/* Un média occupe la zone et rien de plus : `position: absolute` plutôt qu'une hauteur en
 * pourcentage, qu'un conteneur à `aspect-ratio` ne sait pas résoudre — une image carrée y
 * débordait en silence. */
.biblio-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: var(--fond); }
.biblio-art video.biblio-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #10141a; }
.biblio-art audio.biblio-media { position: absolute; left: 4%; right: 4%; bottom: 10px; z-index: 2; width: 92%; }
/* La vignette vidéo (EF-14) : la première image du fichier, posée par le navigateur lui-même
 * (`preload="metadata"`, éventuellement un `poster` peint une fois). Pas de commande dessus tant
 * qu'on n'a pas cliqué « Lire » : `pointer-events: none` évite qu'un double-clic malheureux lance
 * ses propres commandes natives avant que le vrai lecteur (`.biblio-media`) ne prenne sa place. */
.biblio-video-vignette { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #10141a; pointer-events: none; }
/* La toile 3D (T6, atelier seulement) : plein cadre comme un `<video>`, jamais une taille en `cqw`
 * — Three.js calcule lui-même sa résolution depuis `getBoundingClientRect()` (`visualiserObjet3D`,
 * styles.js), le CSS n'a qu'à lui laisser toute la place. */
.biblio-objet3d-toile { position: absolute; inset: 0; width: 100%; height: 100%; display: block; background: var(--fond); }

/* La planche d'un style visuel : ses vraies couleurs, rien d'inventé. */
.biblio-planche { position: absolute; inset: 0; padding: 9cqw; display: flex; flex-direction: column; justify-content: center; gap: 2cqw; background: var(--scene-fond, #20232b); color: var(--scene-encre, #fff); }
.biblio-planche-aa { font-size: max(24px, 18cqw); line-height: 1; font-weight: 700; letter-spacing: -.05em; }
.biblio-planche-nom {
  margin: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: max(12px, 5cqw);
  font-weight: 600;
  overflow-wrap: anywhere;
}
.biblio-planche-pastilles { display: flex; gap: 1.5cqw; margin-top: 1cqw; }
.biblio-planche-pastille { width: max(12px, 5cqw); height: max(12px, 5cqw); border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); }
.biblio-planche-typo { font-size: max(12px, 3.4cqw); opacity: .82; overflow-wrap: anywhere; }

/* La structure d'un modèle vidéo : son cadre au bon format, sa nature, sa palette. */
.biblio-structure { position: absolute; inset: 0; padding: 7cqw; display: flex; align-items: center; gap: 5cqw; background: var(--scene-fond, #262a33); color: var(--scene-encre, #fff); }
.biblio-cadre { flex: none; height: 74%; max-height: 74%; max-width: 38%; border-radius: 4px; background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); display: flex; align-items: flex-end; padding: 6%; }
.biblio-cadre-barres { display: flex; gap: 6%; width: 100%; height: 12%; }
.biblio-cadre-barre { flex: 1; border-radius: 2px; background: rgba(255, 255, 255, .55); }
.biblio-cadre-barre:nth-child(2) { flex: 2; }
.biblio-structure-mots { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1.5cqw; font-size: max(12px, 3.6cqw); }
.biblio-structure-format { font-size: max(13px, 5cqw); font-weight: 700; letter-spacing: -.02em; overflow-wrap: anywhere; }
.biblio-structure-mots span { opacity: .84; overflow-wrap: anywhere; }

/* L'illustration d'une animation : un mouvement qui mime la famille, joué au bouton. */
.biblio-illu { position: absolute; inset: 0; padding: 8cqw; display: flex; flex-direction: column; justify-content: center; gap: 2cqw; background: var(--scene-fond, #1d2430); color: #fff; overflow: hidden; }
.biblio-illu-picto { position: absolute; bottom: 8cqw; right: 8cqw; display: inline-grid; place-items: center; width: max(24px, 9cqw); height: max(24px, 9cqw); border-radius: 8px; background: rgba(255, 255, 255, .14); color: #fff; }
.biblio-illu-picto .ui-icon { width: 60%; height: 60%; }
.biblio-illu-scene { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 2cqw; min-height: 24cqw; }
.biblio-illu-bloc { display: inline-block; padding: 1.5cqw 3cqw; border-radius: 6px; background: rgba(255, 255, 255, .12); font-size: max(12px, 6cqw); font-weight: 650; letter-spacing: -.02em; overflow-wrap: anywhere; }
.biblio-illu-mot { font-size: max(12px, 7cqw); font-weight: 700; letter-spacing: -.03em; }
.biblio-illu-mot:nth-child(2) { color: #b9b1ff; }
.biblio-illu-voile { position: absolute; inset: -10% -6%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .34), transparent); transform: translateX(-120%); }
.biblio-illu-nuit { position: absolute; inset: -20%; background: #0b0e14; opacity: 0; }
.biblio-illu-mot-clair { font-size: max(12px, 3.4cqw); opacity: .75; }

/* Le mouvement ne part qu'au bouton « Lire » : `is-playing` est posée puis retirée à la fin.
 * `--biblio-duree` vient de `DUREES_RYTHME`, posé par le CSSOM. */
.biblio-art.is-playing .biblio-illu[data-mouvement='monte'] .biblio-illu-bloc { animation: biblio-monte var(--biblio-duree, 1600ms) cubic-bezier(.22, 1, .36, 1) both; }
.biblio-art.is-playing .biblio-illu[data-mouvement='mots'] .biblio-illu-mot { animation: biblio-apparait var(--biblio-duree, 1600ms) ease both; }
.biblio-art.is-playing .biblio-illu[data-mouvement='mots'] .biblio-illu-mot:nth-child(2) { animation-delay: calc(var(--biblio-duree, 1600ms) * .18); }
.biblio-art.is-playing .biblio-illu[data-mouvement='mots'] .biblio-illu-mot:nth-child(3) { animation-delay: calc(var(--biblio-duree, 1600ms) * .36); }
.biblio-art.is-playing .biblio-illu[data-mouvement='balaie'] .biblio-illu-voile { animation: biblio-balaie var(--biblio-duree, 1600ms) ease-in-out both; }
.biblio-art.is-playing .biblio-illu[data-mouvement='grandit'] .biblio-illu-bloc { animation: biblio-grandit var(--biblio-duree, 1600ms) cubic-bezier(.22, 1, .36, 1) both; }
.biblio-art.is-playing .biblio-illu[data-mouvement='glisse'] .biblio-illu-bloc { animation: biblio-glisse var(--biblio-duree, 1600ms) cubic-bezier(.22, 1, .36, 1) both; }
.biblio-art.is-playing .biblio-illu[data-mouvement='fond'] .biblio-illu-bloc { animation: biblio-fond var(--biblio-duree, 1600ms) ease both; }
.biblio-art.is-playing .biblio-illu[data-mouvement='eteint'] .biblio-illu-nuit { animation: biblio-eteint var(--biblio-duree, 1600ms) ease-in both; }

@keyframes biblio-monte { from { opacity: 0; transform: translateY(40%); } 60%, to { opacity: 1; transform: translateY(0); } }
@keyframes biblio-apparait { from { opacity: 0; transform: translateY(18%); } 45%, to { opacity: 1; transform: translateY(0); } }
@keyframes biblio-balaie { from { transform: translateX(-120%); } to { transform: translateX(120%); } }
@keyframes biblio-grandit { from { transform: scale(.55); opacity: .4; } to { transform: scale(1.12); opacity: 1; } }
@keyframes biblio-glisse { from { transform: translateX(110%); opacity: 0; } 55%, to { transform: translateX(0); opacity: 1; } }
@keyframes biblio-fond { from { opacity: 0; } 55%, to { opacity: 1; } }
@keyframes biblio-eteint { from { opacity: 0; } to { opacity: 1; } }

/* Un fichier qu'on ne sait pas montrer : son pictogramme et son mot, jamais une vignette
 * inventée (audit §11, « pas de miniature arbitraire »). */
.biblio-fichier { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3cqw; padding: 8cqw; background: var(--fond); color: var(--encre-2); text-align: center; }
.biblio-fichier-picto { display: inline-grid; place-items: center; width: max(36px, 14cqw); height: max(36px, 14cqw); border-radius: 12px; background: var(--doux); color: var(--encre-2); }
.biblio-fichier-picto .ui-icon { width: 55%; height: 55%; }
.biblio-fichier-mot { margin: 0; font-size: max(12px, 4cqw); overflow-wrap: anywhere; }
.biblio-art-vide { background: var(--fond); color: var(--encre-2); }
.biblio-art-vide .biblio-fichier-mot { font-size: 15px; }
.biblio-police { position: absolute; inset: 0; margin: 0; padding: 6cqw; font-size: max(18px, 13cqw); line-height: 1.15; color: var(--encre); background: var(--fond); display: flex; align-items: center; justify-content: center; text-align: center; }

/* ---- La scène jouable (T4, EF-08 à EF-11) --------------------------------------------------- */
/* `.biblio-scene` (posée par `/vfx/scene.css`, servie par le studio) occupe déjà toute la zone
 * d'aperçu ; ce fichier-ci n'y ajoute qu'un CADRE mis à l'échelle. Le runtime pose ses `.label` en
 * pixels sur la résolution NATIVE de l'animation (1080 de large, par exemple) : c'est le prix pour
 * qu'il calcule exactement comme au rendu (EF-08). `--vfx-largeur` / `--vfx-hauteur` (cette
 * résolution) et `--vfx-echelle` (le facteur qui la ramène à la taille de la carte) sont posées
 * par `scene-animation.js`, jamais ici — CETTE règle ne fige donc aucune taille en px (CT-27) : le
 * même mécanisme qu'un `<video>`, qui a une résolution propre mais s'affiche à la taille qu'on
 * lui donne. */
.biblio-scene-cadre {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--vfx-largeur);
  height: var(--vfx-hauteur);
  transform: translate(-50%, -50%) scale(var(--vfx-echelle, 1));
  transform-origin: center;
}

/* Les commandes d'une scène : Lire/Pause d'un côté, la vitesse locale de l'autre (EF-09). La
 * vitesse ne s'écrit jamais en base, elle mérite donc un groupe visuellement plus discret que
 * `.biblio-lire`. En colonne, ancré à droite (Lire/Pause au-dessus, les vitesses dessous) : une
 * seule rangée (Lire + trois vitesses côte à côte) est trop large pour une carte de 320 px et
 * vient chevaucher le badge de confiance, posé lui à gauche (`.biblio-confiance`) — vu à la
 * capture de la recette. Empilées, les deux rangées restent étroites et loin du badge. */
.biblio-commandes-scene { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; max-width: 100%; }
.biblio-vitesse { display: inline-flex; gap: 2px; padding: 2px; border-radius: 999px; background: rgba(255, 255, 255, .92); box-shadow: 0 2px 10px rgba(23, 33, 43, .18); }
/* Taille en px, comme `.biblio-lire` juste au-dessus : ces commandes vivent HORS de `.biblio-art`
 * (un bouton dans un bouton ne se tabule pas), donc hors du seul conteneur `inline-size` de la
 * carte — un `cqw` s'y résout sur la FENÊTRE et donnait des boutons de 35 px de haut qui
 * écrasaient la vignette. Le `cqw` est pour ce qui est dessiné dans la zone d'aperçu, pas pour
 * la commande posée par-dessus. */
.biblio-vitesse-bouton { min-height: var(--cible); padding: 0 10px; border: 0; border-radius: 999px; background: transparent; color: var(--encre); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.biblio-vitesse-bouton:hover { background: var(--doux); }
.biblio-vitesse-bouton[aria-pressed='true'] { background: var(--encre); color: var(--fond-2); }

/* ---- Les fabriques (avancé) --------------------------------------------------------------- */
.biblio-fabriques summary { font-size: 15px; }
.biblio-fabrique { display: flex; flex-direction: column; gap: var(--e1); }
.biblio-fabrique-tete { display: flex; align-items: center; flex-wrap: wrap; gap: var(--e1); }
.biblio-fabrique-nom { margin: 0; font-size: 16px; font-weight: 600; overflow-wrap: anywhere; }
.biblio-fabrique p { margin: 0; line-height: 1.6; }

/* ---- L'atelier ---------------------------------------------------------------------------- */
/* Un vrai `<dialog>` : Échap, focus contenu, fond assombri. Sur téléphone il prend l'écran,
 * et le corps est la SEULE surface qui défile. */
.biblio-atelier { position: fixed; inset: 0; width: 100%; max-width: 100%; height: 100%; max-height: 100%; margin: 0; padding: 0; border: 0; background: var(--fond); color: var(--encre); }
.biblio-atelier[open] { display: flex; flex-direction: column; }
.biblio-atelier::backdrop { background: rgba(26, 31, 56, .45); }
.biblio-atelier-tete { flex: none; display: flex; align-items: center; gap: var(--e1); padding: var(--e1) var(--e2); background: var(--fond-2); box-shadow: var(--anneau); }
.biblio-atelier-nom { flex: 1; min-width: 0; }
.biblio-atelier-titre { margin: 0; font-size: 16px; font-weight: 650; letter-spacing: -.2px; overflow-wrap: anywhere; }
.biblio-atelier-famille { margin: 2px 0 0; font-size: 13px; color: var(--encre-2); }
.biblio-atelier-corps { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; }
.biblio-volet { min-width: 0; display: flex; flex-direction: column; gap: var(--e2); padding: var(--e2); }
.biblio-volet-apercu { background: var(--fond); }
.biblio-volet-parler { background: var(--fond-2); }
.biblio-hote { border-radius: var(--rayon); overflow: hidden; box-shadow: var(--anneau); }
.biblio-hote .biblio-confiance { display: none; }
.biblio-atelier-commandes { display: flex; flex-wrap: wrap; gap: var(--e1); }
.biblio-atelier-commandes .biblio-lire { background: var(--doux); box-shadow: none; }
.biblio-atelier-commandes .biblio-lire:hover { background: var(--doux-2); }
.biblio-atelier-confiance { margin: 0; font-size: 13px; color: var(--encre-2); }
.biblio-atelier-description { margin: 0; font-size: 15px; line-height: 1.7; overflow-wrap: anywhere; }
.biblio-atelier-usages { margin: 0; font-size: 14px; color: var(--encre-2); overflow-wrap: anywhere; }
.biblio-chemin { margin: 0; font-size: 14px; overflow-wrap: anywhere; }

.biblio-parler-titre { margin: 0; font-size: 16px; font-weight: 650; }
.biblio-parler-puce { margin: 0; align-self: flex-start; padding: 4px 10px; border-radius: 999px; background: var(--accent-2); color: var(--accent); font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.biblio-suggestions { display: flex; flex-wrap: wrap; gap: 6px; }
.biblio-suggestion { min-height: var(--cible); padding: 0 14px; border: 0; border-radius: 999px; background: var(--doux); color: var(--encre); font: inherit; font-size: 14px; cursor: pointer; }
.biblio-suggestion:hover { background: var(--accent-2); color: var(--accent); }
.biblio-volet-parler textarea { resize: vertical; min-height: 96px; line-height: 1.6; font-size: 16px; }
.biblio-parler-actions { display: flex; flex-direction: column; gap: var(--e1); }
.biblio-parler-ou { margin: 0; font-size: 13px; line-height: 1.6; color: var(--encre-2); }

.biblio-formulaire { display: flex; flex-direction: column; gap: var(--e2); padding: var(--e2); border-radius: var(--rayon); background: var(--fond-2); box-shadow: var(--ombre); }
.biblio-formulaire-actions { display: flex; flex-wrap: wrap; gap: var(--e1); }
.biblio-formulaire-actions > .bouton, .biblio-formulaire-actions > .style-lien { flex: 1 1 auto; }

.biblio-atelier-pied { flex: none; display: flex; flex-direction: column; gap: var(--e1); padding: var(--e2) var(--e2) max(var(--e2), var(--bas)); background: var(--fond-2); box-shadow: var(--anneau); }
.biblio-atelier-actions { display: flex; flex-wrap: wrap; gap: var(--e1); }
.biblio-atelier-actions > .bouton { flex: 1 1 auto; }
.biblio-atelier-bilan { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e1); margin: 0; font-size: 14px; line-height: 1.6; }

/* ---- Ce que l'assistant a retenu ----------------------------------------------------------- */
.style-souvenirs { display: flex; flex-direction: column; gap: var(--e1); padding: var(--e2); border-radius: var(--rayon); background: var(--fond-2); box-shadow: var(--ombre); }
.style-souvenirs > summary { min-height: var(--cible); display: flex; align-items: center; cursor: pointer; font-size: 14px; color: var(--accent); font-weight: 600; }
.style-notes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--e1); }
.style-note { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 10px; background: var(--fond); }
.style-note-texte { margin: 0; font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
.style-note-bas { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e1); margin: 0; font-size: 13px; }
.style-note-oublier { align-self: flex-start; min-height: var(--cible); padding: 0 10px; border: 0; border-radius: 10px; background: transparent; color: var(--encre-2); font: inherit; font-size: 13px; cursor: pointer; }
.style-note-oublier:hover { background: var(--doux); color: var(--accent); }
.style-note-oublier[disabled] { opacity: .5; cursor: default; }
.style-note-forme { display: flex; flex-direction: column; gap: var(--e1); }
.style-note-forme textarea { resize: vertical; }
.style-note-actions { display: flex; flex-wrap: wrap; gap: var(--e1); }
.style-note-actions > .bouton { flex: 1 1 auto; }
.style-pastille { display: inline-block; padding: 3px 10px; border: 0; border-radius: 999px; background: var(--doux); color: var(--encre-2); font-size: 13px; overflow-wrap: anywhere; }

/* ---- Les champs des formulaires ------------------------------------------------------------ */
.style-champ { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.style-champ label, .style-label { font-size: 14px; font-weight: 600; color: var(--encre-2); }
.style-champ small { font-size: 13px; color: var(--encre-2); line-height: 1.6; }
.style-champ textarea { resize: vertical; }
.style-champs-deux { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e2); }
.style-cases { display: flex; flex-direction: column; gap: 2px; }
.style-case { display: flex; align-items: center; gap: 10px; min-height: var(--cible); padding: 0 4px; border-radius: 10px; font-size: 15px; cursor: pointer; overflow-wrap: anywhere; }
.style-case:hover { background: var(--doux); }
.style-case input { width: 20px; height: 20px; flex: none; accent-color: var(--accent); }
.style-cases > p { margin: 0; }
.style-interrupteurs { display: flex; flex-wrap: wrap; gap: var(--e1); }
.style-interrupteur { flex: 1 1 auto; min-height: var(--cible); padding: 0 var(--e2); border: 0; border-radius: 999px; background: var(--doux); color: var(--encre); font: inherit; font-size: 14px; cursor: pointer; }
.style-interrupteur:hover { background: var(--doux-2); }
.style-interrupteur[aria-pressed='true'] { background: var(--accent-2); color: var(--accent); font-weight: 600; }
.style-couleurs-bloc { display: flex; flex-direction: column; gap: var(--e1); align-items: flex-start; }
.style-couleurs-edition { display: flex; flex-direction: column; gap: 4px; width: 100%; }
.style-couleur-rang { display: flex; align-items: center; gap: var(--e1); }
.style-couleur-rang input[type='color'] { width: 56px; height: var(--cible); min-height: var(--cible); padding: 4px; border: 0; border-radius: 10px; background: var(--doux); cursor: pointer; flex: none; }
.style-couleur-rang > .bouton { font-size: 14px; }
.style-avances { border-radius: 10px; background: var(--fond); }
.style-avances > summary { min-height: var(--cible); display: flex; align-items: center; padding: 0 12px; cursor: pointer; font-size: 14px; font-weight: 600; color: var(--encre-2); }
.style-avances-corps { display: flex; flex-direction: column; gap: var(--e2); padding: 0 12px 12px; }
.style-erreur { margin: 0; color: var(--alerte); font-size: 14px; line-height: 1.6; }
/* Un bouton qui redemande : la couleur est dans le mot, jamais dans un cadre. */
.style-confirme { color: var(--alerte); font-weight: 600; }
.style-icone { width: var(--cible); height: var(--cible); display: inline-grid; place-items: center; padding: 0; border: 0; border-radius: 10px; background: transparent; color: var(--encre-2); cursor: pointer; flex: none; }
.style-icone:hover { background: var(--doux); color: var(--encre); }
.style-lien { display: inline-flex; align-items: center; justify-content: center; min-height: var(--cible); padding: var(--e1) var(--e2); border-radius: var(--rayon); background: var(--doux); color: var(--encre); text-decoration: none; font-size: 14px; }
.style-lien:hover { background: var(--doux-2); }

/* ---- Les paliers --------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .biblio-page { gap: var(--e3); }
  .biblio-entete { flex-direction: row; align-items: flex-end; justify-content: space-between; }
  .biblio-entete > .bouton { align-self: auto; flex: none; }
  .biblio-intro h2 { font-size: 30px; }
  .biblio-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e3) var(--e2); }
  .style-champs-deux { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* `inset: 0` avec `margin: auto` : c'est ainsi qu'un dialogue modal se centre. Le remplacer
   * par `inset: auto` le renvoie dans le coin haut gauche, ce que personne ne veut. */
  .biblio-atelier { inset: 0; margin: auto; width: min(1120px, calc(100vw - 48px)); height: min(860px, calc(100dvh - 48px)); border-radius: var(--rayon); overflow: hidden; box-shadow: var(--anneau), 0 24px 90px rgba(24, 28, 53, .25); }
  .biblio-atelier-pied { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--e2); }
  .biblio-atelier-bilan { flex: 1; min-width: 0; }
  .biblio-atelier-actions { flex: none; }
  .biblio-atelier-actions > .bouton { flex: 0 0 auto; }
  .biblio-parler-actions { flex-direction: row; align-items: center; justify-content: space-between; }
  .biblio-parler-ou { flex: 1; min-width: 0; }
  .biblio-formulaire-actions > .bouton, .biblio-formulaire-actions > .style-lien { flex: 0 1 auto; }
}
@media (min-width: 900px) {
  /* Deux volets : l'aperçu prend 60 %, la conversation 40 % (§2.11). Le corps reste la seule
   * surface qui défile. */
  .biblio-atelier-corps { display: grid; grid-template-columns: 60fr 40fr; align-items: stretch; }
  .biblio-volet-apercu { border-right: 0; box-shadow: 1px 0 0 rgba(23, 33, 43, .06); }
  .biblio-volet { padding: var(--e3) var(--e2); }
}
@media (min-width: 1024px) {
  .biblio-grille { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .biblio-intro h2 { font-size: 32px; }
}
@media (min-width: 1440px) {
  .biblio-page { max-width: 1180px; }
}
@media (min-width: 1500px) {
  .biblio-grille { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---- Mouvement réduit ----------------------------------------------------------------------- */
/* Pour un outil de création, l'aperçu d'une animation peut être essentiel (audit §10) : on ne
 * l'ampute pas, on le fige, et la carte dit « Mouvement réduit » à la place du bouton. */
@media (prefers-reduced-motion: reduce) {
  .biblio-carte { transition: none; }
  .biblio-art.is-playing .biblio-illu *,
  .biblio-illu * { animation: none !important; }
}