/*
 * Libria — composants. Une section par fichier de js/ui/, dans le même ordre que DESIGN.md.
 * Toutes les valeurs viennent de jetons.css ; aucune couleur en dur hors des voiles et reflets.
 * Rappel : le dégradé n'apparaît que sur l'action principale, les moments 4 et 5, les anneaux de story.
 * Le flou d'arrière-plan n'apparaît que sur les couches superposées.
 * Mouvement : 200 à 300 ms partout ; le ressort (--d-ressort, --c-ressort) est réservé au zoom
 * (réglette, apparition des événements, ancrage).
 */

/* ================================================================== mouvements communs */

@keyframes fondu-entree { from { opacity: 0; } }
@keyframes fondu-sortie { to { opacity: 0; } }
@keyframes monter-entree { from { opacity: 0; transform: translateY(8px) scale(0.98); } }
@keyframes reflet { to { transform: translateX(100%); } }
@keyframes flotter { 50% { transform: translateY(-3px); } }

/* ================================================================== document et états globaux */

html[data-panneau] { overflow: hidden; }
html[data-ancrage] { overflow-anchor: none; }
html[data-passe] body::before {
  content: "";
  position: fixed; inset: 0 0 auto 0; height: 2px;
  background: var(--passe);
  box-shadow: 0 0 16px 1px rgba(255, 181, 71, 0.55);
  z-index: var(--z-toast);
  pointer-events: none;
}

.saut {
  position: fixed; top: var(--e-2); left: var(--e-2); z-index: var(--z-saut);
  padding: var(--e-2) var(--e-4); border-radius: var(--r-rond);
  background: var(--texte); color: var(--fond);
  font-size: var(--t-2); font-weight: var(--g-semi);
  transform: translateY(-200%);
  transition: transform var(--d-rapide) var(--c-sortie);
}
.saut:focus { transform: none; }

.vue { min-width: 0; }

/* ================================================================== liens (apercu.js) */

.lien {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--trait-3);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  transition: text-decoration-color var(--d-rapide) var(--c-standard), color var(--d-rapide);
}
.lien:hover { text-decoration-color: currentColor; }
.lien--personnage { color: var(--c); font-weight: var(--g-semi); text-decoration-color: transparent; }
.lien--personnage:hover { text-decoration-color: currentColor; }
.lien-nu { color: inherit; text-decoration: none; }

/* ================================================================== coque.js */

.barre-laterale {
  position: fixed; inset: 0 auto 0 0; z-index: var(--z-barres);
  width: var(--l-barre);
  display: flex; flex-direction: column;
  padding: var(--e-5) 0 var(--e-4);
  background: var(--surface-0);
  border-right: 1px solid var(--trait);
}
.barre-laterale__tete { padding: var(--e-1) var(--e-5) var(--e-5); }

/* Mot-symbole : blanc, lettrage serré ; seule signature, un point final de 6 px au dégradé. */
.mot-symbole {
  position: relative;
  display: inline-flex; align-items: baseline;
  color: var(--texte);
  font-size: var(--t-5); font-weight: var(--g-noir);
  letter-spacing: -0.045em; line-height: 1;
  padding: 2px var(--e-1) var(--e-1) 0;
  border-radius: var(--r-1);
}
.mot-symbole__point {
  width: 6px; height: 6px; margin-left: 3px;
  border-radius: 50%;
  background: var(--degrade);
}
.mot-symbole--petit { font-size: var(--t-4); letter-spacing: -0.04em; }

.declencheur-palette {
  display: flex; align-items: center; gap: var(--e-2);
  width: calc(100% - 2 * var(--e-3));
  margin: 0 var(--e-3) var(--e-4);
  height: 40px; padding: 0 var(--e-2) 0 var(--e-3);
  border-radius: var(--r-2);
  background: var(--surface-1);
  border: 1px solid var(--trait);
  color: var(--texte-3);
  font-size: var(--t-2);
  transition: background-color var(--d-rapide) var(--c-standard), color var(--d-rapide), border-color var(--d-rapide);
}
.declencheur-palette:hover { background: var(--surface-2); color: var(--texte-2); border-color: var(--trait-2); }
.declencheur-palette__texte { flex: 1; text-align: left; }
.declencheur-palette__touches { display: inline-flex; gap: var(--e-1); }
.declencheur-palette__touches .touche { min-width: 20px; height: 20px; padding: 0 5px; }

.nav { flex: 1; overflow-y: auto; padding: 0 var(--e-3); }
.nav__liste { display: flex; flex-direction: column; gap: var(--e-0); }
.nav__lien {
  display: flex; align-items: center; gap: var(--e-3);
  height: 44px; padding: 0 var(--e-3);
  border-radius: var(--r-2);
  color: var(--texte-2);
  font-size: var(--t-2); font-weight: var(--g-semi); letter-spacing: -0.01em;
  white-space: nowrap;
  transition: background-color var(--d-rapide) var(--c-standard), color var(--d-rapide);
}
.nav__lien span { min-width: 0; overflow: hidden; }
.nav__lien:hover { background: var(--survol); color: var(--texte); }
.nav__lien:active { background: var(--appui); }
.nav__lien--actif, .nav__lien--actif:hover { background: var(--surface-2); color: var(--texte); }

.barre-laterale__pied { padding: var(--e-3) var(--e-3) 0; }
.resume-monde { display: flex; flex-direction: column; gap: var(--e-3); }

/* Barre du haut (iPhone) */
.barre-haut {
  position: sticky; top: 0; z-index: var(--z-barres);
  display: flex; align-items: center; justify-content: space-between;
  height: calc(var(--h-barre-haut) + var(--zs-haut));
  padding: var(--zs-haut) calc(var(--goutiere) - var(--e-1) + var(--zs-droite)) 0 calc(var(--goutiere) + var(--zs-gauche));
  background: rgba(10, 10, 15, 0.72);
  -webkit-backdrop-filter: var(--verre-flou);
  backdrop-filter: var(--verre-flou);
  border-bottom: 1px solid var(--trait);
}
.barre-haut__droite { display: flex; align-items: center; gap: var(--e-1); }
.barre-haut .bouton-icone { width: var(--cible-tactile); height: var(--cible-tactile); color: var(--texte); }

/* Barre d'onglets flottante (iPhone) : un seul verre. L'onglet actif prend la largeur de son libellé
   (jamais tronqué) ; les autres se partagent le reste, 44 px au moins.
   Sur une vue qui zoome, la réglette en est la rangée du haut (même verre, filet entre les deux : aucun
   interstice où le contenu passerait) ; repliée, la rangée tombe à 0 et le verre se referme sur les onglets. */
.barre-onglets {
  position: fixed; left: 50%; bottom: calc(var(--e-3) + var(--zs-bas)); z-index: var(--z-barres);
  transform: translateX(-50%);
  display: flex; flex-direction: column;
  width: min(calc(100% - 2 * var(--e-3)), 440px);
  border-radius: var(--r-5);
  background: var(--verre);
  -webkit-backdrop-filter: var(--verre-flou);
  backdrop-filter: var(--verre-flou);
  border: 1px solid var(--trait-2);
  box-shadow: var(--ombre-flottante);
  overflow: hidden;
}
.barre-onglets__rangee {
  display: flex; align-items: center; gap: var(--e-0);
  height: calc(var(--h-onglets) - 2px); padding: 0 var(--e-1);
}
.barre-onglets__reglette {
  display: flex; flex-direction: column; justify-content: flex-end;
  height: calc(var(--h-reglette-integree) + 1px);
  overflow: hidden;
  border-bottom: 1px solid var(--trait);
  transition: height var(--d-rapide) var(--c-sortie), opacity var(--d-rapide) var(--c-sortie), border-color var(--d-rapide);
}
.barre-onglets__reglette > .reglette { transition: transform var(--d-rapide) var(--c-sortie); }
.barre-onglets--replie .barre-onglets__reglette { height: 0; opacity: 0; border-bottom-color: transparent; }
.barre-onglets--replie .barre-onglets__reglette > .reglette { transform: translateY(8px); }
.onglet {
  flex: 1 1 auto; min-width: var(--cible-tactile);
  display: flex; align-items: center; justify-content: center;
  height: 48px; padding: 0 var(--e-2);
  border-radius: var(--r-rond);
  color: var(--texte-2);
  transition: flex-grow var(--d-lente) var(--c-sortie), padding var(--d-lente) var(--c-sortie),
    background-color var(--d-normale) var(--c-standard), color var(--d-rapide), transform var(--d-rapide) var(--c-sortie);
}
.onglet:active { transform: scale(0.94); }
.onglet--actif { flex-grow: 0; padding: 0 var(--e-4); background: rgba(255, 255, 255, 0.11); color: var(--texte); }
.onglet__libelle {
  display: block; overflow: hidden; white-space: nowrap;
  max-width: 0; margin-left: 0; opacity: 0;
  font-size: var(--t-2); font-weight: var(--g-semi); letter-spacing: -0.01em;
  transition: max-width var(--d-lente) var(--c-sortie), margin var(--d-lente) var(--c-sortie), opacity var(--d-normale) var(--c-sortie);
}
.onglet--actif .onglet__libelle { max-width: 9em; margin-left: var(--e-2); opacity: 1; }
@media (max-width: 374.98px) {
  .onglet--actif { padding: 0 var(--e-3); }
  .onglet__libelle { font-size: var(--t-1); }
}

/* Feuille « Plus » */
.menu-plus { display: flex; flex-direction: column; gap: var(--e-1); padding-bottom: var(--e-2); }
.menu-plus__lien {
  display: flex; align-items: center; gap: var(--e-3);
  min-height: 56px; padding: var(--e-2) var(--e-3);
  border-radius: var(--r-3);
  font-size: var(--t-3); font-weight: var(--g-semi);
  transition: background-color var(--d-rapide);
}
@media (hover: hover) { .menu-plus__lien:hover { background: var(--survol); } }
.menu-plus__lien:active { background: var(--survol); }
.menu-plus__lien--actif { background: var(--surface-2); }
.menu-plus__tuile { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-2); background: var(--surface-3); }
.menu-plus__libelle { flex: 1; }
.menu-plus__chevron { color: var(--texte-3); }

/* ================================================================== avatar.js */

.avatar {
  position: relative;
  display: inline-grid; place-items: center; flex-shrink: 0;
  width: var(--taille); height: var(--taille);
  border-radius: 50%;
  vertical-align: middle;
}
.avatar__disque {
  position: relative; display: block;
  width: 100%; height: 100%;
  border-radius: 50%; overflow: hidden;
  isolation: isolate;
}
.avatar__disque::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  pointer-events: none;
}
.avatar__svg { width: 100%; height: 100%; }

.avatar--anneau {
  --pas: calc(var(--anneau) + var(--ecart));
  width: calc(var(--taille) + 2 * var(--pas));
  height: calc(var(--taille) + 2 * var(--pas));
  padding: var(--pas);
}
.avatar--anneau::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  padding: var(--anneau);
  background: rgba(255, 255, 255, 0.16);
  -webkit-mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.avatar--actif::before { background: var(--degrade-anneau); }
.avatar--inactif::before { padding: max(1px, calc(var(--anneau) * 0.5)); inset: calc(var(--anneau) * 0.25); }
/* Absent : désaturé (pas assombri, sinon une teinte profonde se lirait comme une couleur) et badge lune. */
.avatar--absent .avatar__disque { filter: saturate(0.35); opacity: 0.8; }
.avatar--absent::after {
  content: ""; position: absolute; z-index: 1;
  right: calc(var(--pas, 0px) - 1px); bottom: calc(var(--pas, 0px) - 1px);
  width: clamp(10px, calc(var(--taille) * 0.3), 18px); aspect-ratio: 1;
  border-radius: 50%;
  background: var(--lune) center / 70% no-repeat, var(--surface-3);
  box-shadow: 0 0 0 2px var(--bord-pile, var(--fond));
}
.avatar--parti { opacity: 0.45; filter: grayscale(0.85); }

.pile { display: inline-flex; align-items: center; vertical-align: middle; }
.pile > .avatar { box-shadow: 0 0 0 2px var(--bord-pile, var(--fond)); }
.pile > * + * { margin-left: calc(var(--taille) * -0.3); }
.pile__reste {
  position: relative; z-index: 1;   /* peint au-dessus du dernier avatar, comme chaque avatar sur le précédent */
  display: inline-grid; place-items: center;
  height: var(--taille); min-width: calc(var(--taille) + 4px); padding: 0 6px;
  border-radius: var(--r-rond);
  background: var(--surface-3);
  box-shadow: 0 0 0 2px var(--bord-pile, var(--fond));
  color: var(--texte);
  font-size: var(--t-1); font-weight: var(--g-semi); line-height: 1;
}

.duo { position: relative; display: inline-block; flex-shrink: 0; width: var(--taille); height: var(--taille); }
.duo > .avatar { position: absolute; box-shadow: 0 0 0 2px var(--bord-pile, var(--fond)); }
.duo__premier { top: 0; left: 0; }
.duo__second { right: 0; bottom: 0; }

.stories {
  display: flex; gap: var(--e-3);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  padding: var(--e-1) var(--e-1) var(--e-2);
  margin: 0 calc(var(--e-1) * -1);
  scrollbar-width: none;
}
.stories::-webkit-scrollbar { display: none; }
.stories__item { scroll-snap-align: start; flex-shrink: 0; }
.story {
  display: flex; flex-direction: column; align-items: center; gap: var(--e-2);
  width: 80px; padding: 2px;
  border-radius: var(--r-3);
}
.story .avatar { transition: transform var(--d-normale) var(--c-sortie); }
@media (hover: hover) { .story:hover .avatar { transform: scale(1.04); } }
.story:active .avatar { transform: scale(0.94); }
.story__nom { max-width: 100%; font-size: var(--t-1); font-weight: var(--g-semi); color: var(--texte-2); }
/* iPhone : la rangée déborde jusqu'aux bords de l'écran ; pas de 84 px (72 + 12) : à 390 px, la cinquième
   story dépasse de 38 px, signe qu'on peut faire défiler. */
@media (max-width: 899.98px) {
  .stories {
    gap: var(--e-3);
    margin-inline: calc(-1 * (var(--goutiere) + var(--zs-gauche))) calc(-1 * (var(--goutiere) + var(--zs-droite)));
    padding-inline: calc(var(--goutiere) + var(--zs-gauche)) calc(var(--goutiere) + var(--zs-droite));
    scroll-padding-inline: calc(var(--goutiere) + var(--zs-gauche)) calc(var(--goutiere) + var(--zs-droite));
  }
  .story { width: 72px; padding: 0; }
}

/* ================================================================== puces.js */

.puce {
  --puce: var(--texte-2);
  display: inline-flex; align-items: center; gap: 5px;
  height: 24px; padding: 0 var(--e-2);
  border-radius: var(--r-rond);
  background: color-mix(in srgb, var(--puce) var(--teinte-puce), transparent);
  color: var(--puce);
  font-size: var(--t-1); font-weight: var(--g-semi); line-height: 1; letter-spacing: 0.005em;
  white-space: nowrap; vertical-align: middle;
}
.puce--petite { height: 20px; padding: 0 7px; gap: 4px; }
.puce--neutre { --puce: var(--texte-2); }
.puce--info { --puce: var(--info); }
.puce--succes { --puce: var(--succes); }
.puce--danger { --puce: var(--danger); }
.puce--attention { --puce: var(--attention); }
.puce--violet { --puce: var(--violet); }
.puce--passe { --puce: var(--passe); }
.puce--accent { background: var(--degrade); color: var(--encre); }
.puce--barree > span { text-decoration: line-through; text-decoration-thickness: 1.5px; }

.niveau { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; }
.niveau__barres { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.niveau__barres i { width: 3px; height: calc(4px + var(--i) * 2px); border-radius: 2px; background: rgba(255, 255, 255, 0.16); }
.niveau__barres i.on { background: var(--texte-2); }
.niveau--fort .niveau__barres i.on { background: var(--degrade-vertical); }
.niveau__libelle { font-size: var(--t-1); font-weight: var(--g-semi); color: var(--texte-2); }

.badge {
  display: inline-grid; place-items: center;
  min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: var(--r-rond);
  background: var(--surface-3); color: var(--texte);
  font-size: var(--t-1); font-weight: var(--g-semi); line-height: 1;
}
.badge--accent { background: var(--degrade); color: var(--encre); }

.bouton--passe { background: var(--passe); color: var(--encre); }
.bouton--passe:hover { background: var(--passe); filter: brightness(1.06); }

/* ================================================================== carte-evenement.js */

/* Axes communs du fil : chaque carte (niveaux 0 à 4, chapitre) a le même retrait horizontal et un filet
   d'un pixel (transparent pour les lignes) ; les niveaux 0 à 3 ont une colonne d'avatar de 32 px, leur
   texte commence donc au même x ; les heures s'alignent à droite. */
.evt {
  --r: var(--r-3);
  position: relative;
  border: 1px solid transparent;
  border-radius: var(--r);
  padding-inline: var(--retrait);
  transition: background-color var(--d-rapide) var(--c-standard), transform var(--d-normale) var(--c-sortie), box-shadow var(--d-normale);
}
.evt__lien { position: absolute; inset: -1px; z-index: 0; border-radius: inherit; }   /* bordure comprise : 44 px pleins au doigt */
.evt__lien:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: inherit; }
.evt > :not(.evt__lien) { position: relative; z-index: 1; pointer-events: none; }
.evt a:not(.evt__lien), .evt button { pointer-events: auto; }
.evt:active { transform: scale(0.985); }
.evt__titre { overflow-wrap: break-word; }
.evt__heure { margin-left: auto; padding-left: var(--e-2); color: var(--texte-3); font-size: var(--t-1); font-weight: var(--g-normal); white-space: nowrap; }
/* Sans puce de canal ni cadenas, l'heure flotte à droite de la première ligne du texte (pas de ligne vide). */
.evt__heure--flottante { float: right; margin: 0 0 0 var(--e-2); padding-left: 0; }
.evt__noms { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.evt__avatar { display: inline-flex; border-radius: 50%; }
.evt__monde {
  display: inline-grid; place-items: center; flex-shrink: 0;
  width: var(--taille); height: var(--taille); border-radius: 50%;
  background: var(--surface-3); color: var(--texte-2);
}
.evt__type { display: inline-grid; place-items: center; flex-shrink: 0; border-radius: 50%; }
.evt__colonne { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: var(--col-avatar); }
.evt__corps { flex: 1; min-width: 0; }

.evt__creation {
  display: inline-flex; align-items: center; gap: var(--e-2);
  max-width: 100%; margin-top: var(--e-3);
  padding: var(--e-1) var(--e-3) var(--e-1) var(--e-1);
  text-align: left;
  border-radius: var(--r-2);
  background: var(--surface-2);
  border: 1px solid var(--trait);
  transition: background-color var(--d-rapide);
}
.evt__creation:hover { background: var(--surface-3); }
.evt__creation-icone {
  display: grid; place-items: center; flex-shrink: 0;
  width: 28px; height: 28px; border-radius: var(--r-1);
  background: color-mix(in srgb, var(--c) 20%, transparent); color: var(--c);
}
/* Le titre d'une création n'est jamais coupé sur une ligne : deux lignes au plus. */
.evt__creation-titre {
  min-width: 0;
  font-size: var(--t-2); font-weight: var(--g-semi); line-height: 1.33; color: var(--texte);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.evt__creation .puce { flex-shrink: 0; }
/* iPhone : « icône titre » puis « icône statut », comme la carte de commande des scènes. */
@media (max-width: 899.98px) {
  .evt__creation {
    display: grid; grid-template-columns: 28px minmax(0, 1fr);
    grid-template-areas: "icone titre" "icone statut";
    align-items: center; column-gap: var(--e-3); row-gap: var(--e-1);
    padding: var(--e-2) var(--e-3) var(--e-2) var(--e-2);
  }
  .evt__creation-icone { grid-area: icone; }
  .evt__creation-titre { grid-area: titre; }
  .evt__creation .puce { grid-area: statut; justify-self: start; }
}

.evt__decision { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-1) var(--e-3); font-size: var(--t-2); font-weight: var(--g-semi); color: var(--texte-2); }
.evt__issue { display: inline-flex; align-items: center; gap: var(--e-1); }
.evt__issue--oui { color: var(--succes); }
.evt__issue--non { color: var(--danger); }

/* 5 — tournant historique : carte héros au dégradé, retrait doublé */
.evt--5 {
  --r: var(--r-4);
  isolation: isolate; overflow: hidden;
  border: 0;
  padding: var(--e-6) var(--retrait-heros) var(--e-5);
  background: var(--degrade);
  color: var(--encre);
  box-shadow: var(--ombre-accent);
}
.evt--5::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  top: -45%; right: -18%; width: 75%; aspect-ratio: 1;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0));
}
.evt--5 .evt__haut { display: flex; align-items: center; gap: var(--e-3); font-size: var(--t-2); font-weight: var(--g-semi); }
.evt--5 .evt__heure { color: var(--encre); font-size: var(--t-2); font-weight: var(--g-semi); }
.evt--5 .evt__type { width: var(--col-avatar); height: var(--col-avatar); background: rgba(10, 10, 15, 0.13); }
.evt--5 .evt__titre {
  margin: var(--e-4) 0 var(--e-5);
  font-size: var(--t-5); font-weight: var(--g-noir); line-height: 1.12; letter-spacing: -0.028em;
  text-wrap: balance;
}
.evt--5 .evt__decision { color: var(--encre); margin: calc(var(--e-2) * -1) 0 var(--e-5); }
.evt--5 .evt__issue--oui, .evt--5 .evt__issue--non { color: var(--encre); }
.evt--5 .evt__bas { display: flex; align-items: center; gap: var(--e-3); font-size: var(--t-2); font-weight: var(--g-semi); min-width: 0; }
.evt--5 .pile { --bord-pile: rgba(255, 255, 255, 0.7); }
/* Sur le héros, le prénom est du titre : même encre, même graisse (jamais un mot plus maigre au milieu). */
.evt--5 .lien--personnage { color: inherit; font-weight: inherit; }
.evt--5 .evt__creation { background: rgba(255, 255, 255, 0.22); border-color: rgba(255, 255, 255, 0.24); }
.evt--5 .evt__creation:hover { background: rgba(255, 255, 255, 0.3); }
.evt--5 .evt__creation-icone { background: rgba(10, 10, 15, 0.12); color: var(--encre); }
.evt--5 .evt__creation-titre { color: var(--encre); }
/* Sur le dégradé, les puces s'éclaircissent : l'encre y reste au-dessus de 6:1, même sur le magenta. */
.evt--5 .puce { --puce: var(--encre); background: rgba(255, 255, 255, 0.3); }
@media (min-width: 900px) {
  .evt--5 { padding: var(--e-7) var(--retrait-heros) var(--e-6); }
  .evt--5 .evt__titre { font-size: var(--t-6); line-height: 1.06; letter-spacing: var(--l-grand); }
}

/* 4 — moment majeur : grande carte, liseré au dégradé (1,5 px : le retrait compense le demi-pixel) */
.evt--4 {
  --r: var(--r-4);
  padding: var(--e-5) calc(var(--retrait) - 0.5px);
  border: 1.5px solid transparent;
  background: linear-gradient(var(--surface-1), var(--surface-1)) padding-box, var(--degrade) border-box;
  box-shadow: 0 18px 48px -28px rgba(255, 46, 147, 0.6);
}
.evt--4:hover { background: linear-gradient(var(--surface-2), var(--surface-2)) padding-box, var(--degrade) border-box; }
.evt--4 .evt__haut { display: flex; align-items: center; gap: var(--e-3); min-width: 0; color: var(--texte-2); font-size: var(--t-1); font-weight: var(--g-semi); }

.evt--4 .evt__type { width: var(--col-avatar); height: var(--col-avatar); background: var(--degrade); color: var(--encre); }
.evt--4 .evt__titre {
  margin: var(--e-4) 0;
  font-size: var(--t-4); font-weight: var(--g-gras); line-height: 1.24; letter-spacing: var(--l-titre);
  text-wrap: pretty;
}
.evt--4 .evt__titre .lien--personnage { font-weight: inherit; }
.evt--4 .evt__decision { margin: calc(var(--e-1) * -1) 0 var(--e-4); }
.evt--4 .evt__creation { margin: 0 0 var(--e-4); }
.evt--4 .evt__bas { display: flex; align-items: center; gap: var(--e-3); font-size: var(--t-2); font-weight: var(--g-semi); color: var(--texte-2); min-width: 0; }
.evt--4 .pile { --bord-pile: var(--surface-1); }

/* 3 et 2 — cartes en ligne : colonne d'avatar, puis noms et heure, puis le texte */
.evt--3, .evt--2 {
  display: flex; align-items: flex-start; gap: var(--e-3);
  background: var(--surface-1); border-color: var(--trait);
}
.evt--3:hover, .evt--2:hover { background: var(--surface-2); }
/* Ligne du haut, seulement s'il y a un marqueur : la puce de canal ou le cadenas à gauche, l'heure à droite. */
.evt--3 .evt__haut, .evt--2 .evt__haut {
  display: flex; align-items: center; gap: var(--e-2); min-width: 0; min-height: 20px;
  margin-bottom: var(--e-1);
  font-size: var(--t-2); font-weight: var(--g-semi); line-height: 1.33;
}
.evt--3 .evt__heure--flottante { line-height: calc(var(--t-3) * 1.4); }
.evt--2 .evt__heure--flottante { line-height: calc(var(--t-2) * 1.45); }
.evt--3 .duo, .evt--2 .duo { --bord-pile: var(--surface-1); }
.evt--3 .evt__creation, .evt--2 .evt__creation { margin-top: var(--e-3); }

/* 3 — décision ou création significative : liseré à la couleur du personnage principal, titre fort */
.evt--3 { padding-block: var(--e-4); }
.evt--3::before {
  content: ""; position: absolute; left: -1px; top: var(--e-4); bottom: var(--e-4);
  width: 3px; border-radius: 0 3px 3px 0;
  background: var(--c);
}
.evt--3 .evt__titre { font-size: var(--t-3); font-weight: var(--g-semi); line-height: 1.4; letter-spacing: -0.012em; text-wrap: pretty; }
.evt--3 .evt__decision { margin-top: var(--e-2); font-size: var(--t-1); }

/* 2 — échange notable : carte compacte, sans liseré */
.evt--2 { padding-block: var(--e-3); }
.evt--2 .evt__prive { color: var(--texte-3); }
.evt--2 .evt__titre { font-size: var(--t-2); line-height: 1.45; color: var(--texte); }

/* 1 — action ordinaire : ligne */
.evt--1 { display: flex; align-items: flex-start; gap: var(--e-3); min-height: 40px; padding-block: var(--e-2); border-radius: var(--r-2); }
.evt--1:hover { background: var(--survol); }
.evt--1 .evt__colonne { height: calc(var(--t-2) * 1.4); }
.evt--1 .evt__titre { flex: 1; min-width: 0; font-size: var(--t-2); line-height: 1.4; color: var(--texte); }
.evt--1 .evt__heure { line-height: calc(var(--t-2) * 1.4); }

/* 0 — micro : micro-ligne, un point à la couleur de l'acteur dans la colonne d'avatar */
.evt--0 { display: flex; align-items: center; gap: var(--e-3); min-height: 32px; padding-block: var(--e-1); border-radius: var(--r-1); }
.evt--0:hover { background: var(--survol); }
.evt__point { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.evt--0 .evt__titre { flex: 1; min-width: 0; font-size: var(--t-1); line-height: 1.4; color: var(--texte-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Lignes 0 et 1 datées (hors du fil) : la date et l'heure sous le texte, jamais en colonne qui l'écrase */
.evt--avec-date .evt__texte { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--e-0); }
.evt--avec-date .evt__texte .evt__heure { margin-left: 0; padding-left: 0; line-height: 1.4; }
.evt--0.evt--avec-date { align-items: flex-start; }
.evt--0.evt--avec-date .evt__colonne { height: calc(var(--t-1) * 1.4); }

/* Chapitre */
.chapitre {
  position: relative; overflow: hidden; isolation: isolate;
  padding: var(--e-6) var(--retrait) var(--e-5);
  border-radius: var(--r-4);
  background: var(--surface-1);
  border: 1px solid var(--trait);
  transition: background-color var(--d-rapide), transform var(--d-normale) var(--c-sortie);
}
.chapitre:hover { background: var(--surface-2); }
.chapitre:active { transform: scale(0.99); }
/* Le grand chiffre fantôme se couche dans le coin bas droit, à côté des avatars : jamais sous un texte
   (il ne monte pas au-dessus de la rangée des présents ; sans présents, il n'est pas dessiné). */
.chapitre::after {
  content: attr(data-numero);
  position: absolute; z-index: -1; right: 0.02em; bottom: -0.36em; top: auto;
  font-size: 136px; font-weight: var(--g-noir); line-height: 1; letter-spacing: -0.06em;
  color: rgba(255, 255, 255, 0.045);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
.chapitre:not(:has(.chapitre__bas))::after { content: none; }
.chapitre > :not(.evt__lien) { position: relative; z-index: 1; pointer-events: none; }
/* Les prénoms de la première phrase sont des liens colorés, comme dans le récit ; au doigt, ils cèdent à la carte. */
.chapitre__phrase a { pointer-events: auto; }
.chapitre a:not(.evt__lien) { pointer-events: auto; }
.chapitre__haut { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e-3); font-size: var(--t-1); font-weight: var(--g-semi); }
.chapitre__numero { color: var(--texte-2); }
.chapitre__dates { color: var(--texte-3); text-align: right; }
.chapitre__titre {
  margin: var(--e-3) 0 var(--e-2);
  font-size: var(--t-5); font-weight: var(--g-noir); line-height: 1.1; letter-spacing: -0.028em;
  text-wrap: balance;
}
.chapitre__phrase {
  font-size: var(--t-3); line-height: 1.5; color: var(--texte-2);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.chapitre__bas { margin-top: var(--e-5); }
.chapitre .pile { --bord-pile: var(--surface-1); }
@media (min-width: 900px) {
  .chapitre__titre { font-size: var(--t-6); line-height: 1.05; letter-spacing: var(--l-grand); }
}

.grande-date { display: flex; align-items: baseline; gap: var(--e-3); padding: var(--e-5) calc(var(--retrait) + 1px) var(--e-2); }
.grande-date__jour { font-size: var(--t-6); font-weight: var(--g-noir); line-height: 1; letter-spacing: var(--l-grand); }
.grande-date__annee { font-size: var(--t-4); font-weight: var(--g-gras); color: var(--texte-3); }

/* Séparateur de jour (SeparateurJour) : collant sous la barre, sur l'axe du retrait ; se replie sans saut.
   Un groupe .fil-jour (le séparateur, puis les événements du jour) borne l'effet collant. */
.fil-jour { display: flex; flex-direction: column; }
.jour {
  position: sticky; top: 0; z-index: var(--z-collant);
  display: grid; grid-template-rows: 0fr; grid-template-columns: minmax(0, 1fr);
  opacity: 0;
  transition: grid-template-rows var(--d-normale) var(--c-sortie), opacity var(--d-normale) var(--c-standard);
  pointer-events: none;
}
.jour--visible { grid-template-rows: 1fr; opacity: 1; }
.jour__pli {
  min-height: 0; overflow: hidden;
  background: linear-gradient(var(--fond) calc(100% - var(--e-2)), rgba(10, 10, 15, 0));
}
.jour__texte {
  display: block;
  padding: var(--e-4) calc(var(--retrait) + 1px) var(--e-3);
  font-size: var(--t-1); font-weight: var(--g-semi); line-height: 1.4; color: var(--texte-2);
}
@media (max-width: 899.98px) {
  .jour { top: calc(var(--h-barre-haut) + var(--zs-haut)); }
}

/* Apparition et repli sans saut */
.apparition {
  display: grid; grid-template-rows: 0fr; grid-template-columns: minmax(0, 1fr); opacity: 0;
  transition: grid-template-rows var(--d-normale) var(--c-sortie), opacity var(--d-normale) var(--c-standard);
}
.apparition--ouverte { grid-template-rows: 1fr; opacity: 1; }
.apparition__pli { min-height: 0; min-width: 0; overflow: hidden; }
.apparition--stable .apparition__pli { overflow: visible; }
.apparition__pli > div { transform: scale(0.97); transform-origin: 50% 0; transition: transform var(--d-ressort) var(--c-ressort-doux); }
.apparition--ouverte .apparition__pli > div { transform: none; }

/* ================================================================== bulles.js */

.scene { display: flex; flex-direction: column; gap: var(--e-0); width: 100%; max-width: var(--l-fil); }
.scene__heure { align-self: center; padding: var(--e-4) 0 var(--e-2); font-size: var(--t-1); font-weight: var(--g-semi); color: var(--texte-3); }

.groupe { display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: end; column-gap: var(--e-2); margin-top: var(--e-3); }
.groupe__avatar { align-self: end; }
.groupe__avatar a { position: relative; display: inline-flex; border-radius: 50%; }
.groupe__messages { display: flex; flex-direction: column; align-items: flex-start; gap: var(--e-0); min-width: 0; }
.groupe__tete { display: flex; align-items: baseline; gap: var(--e-2); padding: 0 var(--e-3) var(--e-1); font-size: var(--t-1); }
.groupe__nom { color: var(--c); font-weight: var(--g-semi); }
.groupe__heure { color: var(--texte-3); }

/* Parole : la teinte du personnage assombrie sans perte de saturation (--fond-bulle, calculé en OKLCH par
   fondBulle, texte ≥ 5,5:1), un reflet léger en haut. Repli : mélange OKLCH à 40 %. */
.bulle {
  max-width: min(80%, 520px);
  padding: var(--e-2) var(--e-3);
  border-radius: var(--r-4);
  background-color: var(--fond-bulle, color-mix(in oklch, var(--c) 40%, var(--surface-1)));
  background-image: var(--reflet-bulle);
  color: var(--texte);
  font-size: var(--t-3); line-height: 1.4; letter-spacing: -0.01em;
  overflow-wrap: anywhere;
  animation: monter-entree var(--d-normale) var(--c-sortie) backwards;
}
.bulle.premier:not(.dernier) { border-bottom-left-radius: 6px; }
.bulle.milieu { border-top-left-radius: 6px; border-bottom-left-radius: 6px; }
.bulle.dernier:not(.premier) { border-top-left-radius: 6px; }

.groupe--droite { grid-template-columns: minmax(0, 1fr); }
.groupe--droite .groupe__messages { align-items: flex-end; }
.groupe--droite .bulle { background-color: var(--c); color: var(--encre); }
.groupe--droite .bulle.premier:not(.dernier) { border-radius: var(--r-4) var(--r-4) 6px var(--r-4); }
.groupe--droite .bulle.milieu { border-radius: var(--r-4) 6px 6px var(--r-4); }
.groupe--droite .bulle.dernier:not(.premier) { border-radius: var(--r-4) 6px var(--r-4) var(--r-4); }

.texte-riche p { margin: 0; }
.texte-riche p + p, .texte-riche p + ul, .texte-riche ul + p, .texte-riche blockquote + p { margin-top: 0.45em; }
.texte-riche strong { font-weight: var(--g-semi); }
.texte-riche ul, .texte-riche ol { padding-left: 1.2em; list-style: disc; }
.texte-riche ol { list-style: decimal; }
.texte-riche blockquote { padding-left: var(--e-3); border-left: 2px solid currentColor; opacity: 0.85; }
.texte-riche a { text-decoration: underline; text-underline-offset: 2px; }

/* Pensée privée : sous verre dépoli, bien plus éteinte que la parole (12 %) */
.pensee {
  position: relative;
  max-width: min(80%, 520px); min-width: 120px;
  padding: var(--e-2) var(--e-3);
  border-radius: var(--r-4);
  background: color-mix(in srgb, var(--c) var(--teinte-pensee), var(--surface-2));
  border: 1px solid color-mix(in srgb, var(--c) 30%, transparent);
  color: var(--texte);
  font-size: var(--t-3); line-height: 1.4; font-style: italic; letter-spacing: -0.01em;
  cursor: pointer;
  -webkit-user-select: none; user-select: none;
  margin: var(--e-1) 0 var(--e-2);
  transition: border-color var(--d-normale), background-color var(--d-normale);
}
.pensee::before, .pensee::after {
  content: ""; position: absolute; border-radius: 50%;
  background: inherit; border: inherit;
}
.pensee::before { width: 10px; height: 10px; left: -9px; bottom: -3px; }
.pensee::after { width: 6px; height: 6px; left: -17px; bottom: -10px; }
.pensee__texte {
  display: flex; align-items: flex-start; gap: 6px;
  filter: blur(6px); opacity: 0.55;
  transition: filter var(--d-lente) var(--c-sortie), opacity var(--d-lente) var(--c-sortie);
}
.pensee__texte > .texte-riche { min-width: 0; }
.pensee__icone { margin-top: calc((1.4em - 13px) / 2); color: var(--c); opacity: 0; transition: opacity var(--d-lente) var(--c-sortie); }
.pensee__verre {
  position: absolute; inset: 0; border-radius: inherit; overflow: hidden;
  display: grid; place-items: center;
  background: linear-gradient(140deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.02) 60%);
  transition: opacity var(--d-normale) var(--c-standard);
}
.pensee__verre::before {
  content: ""; position: absolute; inset: 0;
  background: var(--grain); background-size: 160px 160px;
  opacity: 0.16; mix-blend-mode: overlay;
  transition: opacity var(--d-lente) var(--c-sortie);
}
.pensee__signe {
  position: relative;
  display: grid; place-items: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(10, 10, 15, 0.5);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14), 0 4px 12px rgba(0, 0, 0, 0.35);
  color: var(--texte);
  transition: transform var(--d-normale) var(--c-sortie), opacity var(--d-rapide) var(--c-sortie);
}
@media (hover: hover) { .pensee:hover .pensee__signe { transform: scale(1.08); } }
.pensee:active .pensee__signe { transform: scale(0.92); }
/* Ouverte : le flou s'efface, l'icône « pensée » ouvre le texte en italique ; la bordure reste pleine et
   un grain très léger rappelle le verre. */
.pensee--ouverte { -webkit-user-select: text; user-select: text; }
.pensee--ouverte .pensee__texte { filter: none; opacity: 1; }
.pensee--ouverte .pensee__icone { opacity: 1; }
.pensee--ouverte .pensee__verre { background: none; pointer-events: none; }
.pensee--ouverte .pensee__verre::before { opacity: 0.08; }
.pensee--ouverte .pensee__signe { opacity: 0; transform: scale(0.6); }
.pensee:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Commande : carte vers la création, de la largeur d'une bulle. Sur iPhone, le statut passe sous le titre. */
.commande {
  display: grid; align-items: center; column-gap: var(--e-3);
  grid-template-columns: 44px minmax(0, 1fr) auto auto;
  grid-template-areas: "tuile corps statut chevron";
  width: min(80%, 520px);
  margin: var(--e-1) 0;
  padding: var(--e-3);
  border-radius: var(--r-4);
  background: var(--surface-2);
  border: 1px solid var(--trait-2);
  transition: background-color var(--d-rapide), transform var(--d-normale) var(--c-sortie);
}
a.commande:hover { background: var(--surface-3); }
a.commande:active { transform: scale(0.98); }
.commande__tuile {
  grid-area: tuile;
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: var(--r-2);
  background: color-mix(in srgb, var(--c) 22%, transparent); color: var(--c);
}
.commande__corps { grid-area: corps; display: flex; flex-direction: column; gap: var(--e-0); min-width: 0; }
.commande__titre {
  font-size: var(--t-2); font-weight: var(--g-semi); line-height: 1.33; color: var(--texte);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.commande__texte {
  font-size: var(--t-1); line-height: 1.4; color: var(--texte-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.commande__statut { grid-area: statut; display: flex; }
.commande__chevron { grid-area: chevron; color: var(--texte-3); }

.scene__action {
  align-self: center;
  display: flex; align-items: center; justify-content: center; gap: var(--e-2);
  max-width: 520px; margin: var(--e-3) 0 var(--e-1);
  padding: 0 var(--e-4);
  text-align: center;
  font-size: var(--t-2); font-style: italic; line-height: 1.45; color: var(--texte-2);
}
.scene__action .avatar { align-self: flex-start; margin-top: 1px; }
.scene__externe {
  align-self: center;
  display: flex; align-items: flex-start; gap: var(--e-2);
  max-width: 520px; margin: var(--e-3) 0;
  padding: var(--e-3) var(--e-4);
  border-radius: var(--r-3);
  background: var(--surface-1);
  border: 1px solid var(--trait);
  font-size: var(--t-2); line-height: 1.45; color: var(--texte-2);
}
.scene__externe .icone { margin-top: 2px; color: var(--texte-3); }
.scene__note { align-self: center; max-width: 480px; margin: var(--e-2) 0; padding: 0 var(--e-4); text-align: center; font-size: var(--t-1); color: var(--texte-3); }

.entete-scene { display: flex; flex-direction: column; align-items: center; gap: var(--e-3); text-align: center; padding: var(--e-4) 0 var(--e-2); }
.entete-scene__titre { font-size: var(--t-5); font-weight: var(--g-noir); line-height: 1.12; letter-spacing: -0.028em; text-wrap: balance; }
.entete-scene__meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--e-2) var(--e-3); font-size: var(--t-1); color: var(--texte-3); }
.entete-scene__enjeu { max-width: 46ch; font-size: var(--t-2); line-height: 1.5; color: var(--texte-2); text-wrap: pretty; }

@media (max-width: 899.98px) {
  .bulle, .pensee { max-width: 86%; }
  .commande {
    width: min(86%, 520px);
    grid-template-columns: 44px minmax(0, 1fr) auto;
    grid-template-areas: "tuile corps chevron" "tuile statut chevron";
  }
  .commande__statut { justify-self: start; margin-top: var(--e-1); }
}

/* ================================================================== panneau.js */

.panneaux { position: fixed; inset: 0; z-index: var(--z-panneau); pointer-events: none; }
.voile {
  position: fixed; inset: 0;
  background: var(--voile);
  pointer-events: auto;
  animation: fondu-entree var(--d-normale) var(--c-sortie) both;
}
.voile--sortant { animation: fondu-sortie var(--d-normale) var(--c-entree) both; pointer-events: none; }

.panneau {
  position: fixed; top: var(--e-2); right: var(--e-2); bottom: var(--e-2);
  width: min(var(--l-panneau), calc(100vw - 2 * var(--e-2)));
  display: flex; flex-direction: column;
  background: var(--verre-dense);
  -webkit-backdrop-filter: var(--verre-flou);
  backdrop-filter: var(--verre-flou);
  border: 1px solid var(--trait-2);
  border-radius: var(--r-4);
  box-shadow: var(--ombre-flottante);
  pointer-events: auto;
  outline: none;
  transform-origin: 100% 50%;
  animation: panneau-entree var(--d-lente) var(--c-sortie) backwards;
  transition: transform var(--d-normale) var(--c-sortie), opacity var(--d-normale), filter var(--d-normale);
}
.panneau--large { width: min(720px, calc(100vw - 2 * var(--e-2))); }
.panneau--dessous {
  transform: translateX(calc(var(--profondeur) * -24px)) scale(calc(1 - var(--profondeur) * 0.03));
  filter: brightness(0.7);
}
.panneau--sortant { animation: panneau-sortie var(--d-normale) var(--c-entree) forwards; pointer-events: none; }
@keyframes panneau-entree { from { transform: translateX(40px); opacity: 0; } }
@keyframes panneau-sortie { to { transform: translateX(40px); opacity: 0; } }

.panneau__glisser { display: none; }
.panneau__tete { position: relative; display: flex; align-items: center; gap: var(--e-2); min-height: 64px; padding: var(--e-3) var(--e-3) var(--e-1) var(--e-5); flex-shrink: 0; }
.panneau__titre { flex: 1; min-width: 0; font-size: var(--t-3); font-weight: var(--g-semi); letter-spacing: -0.01em; }
.panneau__actions { display: flex; align-items: center; gap: var(--e-2); margin-left: auto; }
.panneau__corps { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: var(--e-1) var(--e-5) var(--e-5); }

/* Sans titre visible (le contenu porte son grand titre) : l'en-tête sort du flux, ses boutons flottent. */
.panneau--sans-titre .panneau__tete { position: absolute; top: var(--e-3); right: var(--e-3); z-index: 3; min-height: 0; padding: 0; }
.panneau--sans-titre .panneau__corps { padding-top: var(--e-5); }

/* Boutons posés sur le verre : même pastille pour « ouvrir la page » et « fermer ». */
.bouton-icone--verre { background: rgba(255, 255, 255, 0.08); color: var(--texte); }
.bouton-icone--verre:hover { background: rgba(255, 255, 255, 0.14); }

@media (max-width: 899.98px) {
  .panneau {
    top: auto; left: 0; right: 0; bottom: 0; width: auto;
    max-height: calc(100dvh - var(--zs-haut) - 32px);
    border-radius: var(--r-4) var(--r-4) 0 0;
    border-bottom: 0;
    padding-bottom: var(--zs-bas);
    transform-origin: 50% 100%;
    animation: feuille-entree var(--d-lente) var(--c-sortie) backwards;
  }
  .panneau--sortant { animation: feuille-sortie var(--d-normale) var(--c-entree) forwards; }
  .panneau--dessous { transform: translateY(calc(var(--profondeur) * -10px)) scale(calc(1 - var(--profondeur) * 0.05)); }
  .panneau__glisser {
    display: block; position: absolute; top: 0; left: 0; right: 0; z-index: 2;
    height: var(--e-6); touch-action: none; cursor: grab;
  }
  .panneau__poignee {
    position: absolute; top: var(--e-2); left: 50%;
    width: 36px; height: 5px; margin-left: -18px; border-radius: 3px;
    background: var(--trait-3);
  }
  .panneau__tete { touch-action: none; padding: var(--e-5) var(--e-3) var(--e-1) var(--e-4); min-height: 64px; cursor: grab; }
  .panneau__corps { padding: 0 var(--e-4) var(--e-5); }
  .panneau--sans-titre .panneau__tete { padding: 0; min-height: 0; cursor: auto; }
  /* La liste commence 24 px sous la poignée (8 + 5 + 24). */
  .panneau--sans-titre .panneau__corps { padding-top: calc(var(--e-2) + 5px + var(--e-5)); }
}
@keyframes feuille-entree { from { transform: translateY(100%); } }
@keyframes feuille-sortie { to { transform: translateY(100%); } }

/* Contenu d'un panneau ouvert sur une cible */
.contenu-cible { display: flex; flex-direction: column; gap: var(--e-6); min-height: 100%; }
.contenu-cible__ouvrir {
  position: sticky; bottom: 0; z-index: 2;
  align-self: stretch; margin-top: auto;
  box-shadow: var(--ombre-accent), 0 -12px 24px 8px rgba(21, 21, 28, 0.85);
}
.contenu-cible .fiche-cible__tete { gap: var(--e-4); }

/* ================================================================== apercu.js */

.fiche-cible { display: flex; flex-direction: column; gap: var(--e-3); min-width: 0; }
.fiche-cible__tete { display: flex; align-items: center; gap: var(--e-3); min-width: 0; }
.fiche-cible__icone {
  display: grid; place-items: center; flex-shrink: 0;
  width: 44px; height: 44px; border-radius: var(--r-2);
  background: color-mix(in srgb, var(--c, var(--texte-2)) 18%, transparent);
  color: var(--c, var(--texte-2));
}
.fiche-cible--fort .fiche-cible__icone { background: var(--degrade); color: var(--encre); }
.fiche-cible__titres { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fiche-cible__surtitre { font-size: var(--t-1); font-weight: var(--g-semi); color: var(--texte-3); }
.fiche-cible__titre {
  font-size: var(--t-3); font-weight: var(--g-semi); line-height: 1.3; letter-spacing: -0.01em;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.fiche-cible__soustitre { font-size: var(--t-2); color: var(--texte-2); }
.fiche-cible__texte {
  font-size: var(--t-2); line-height: 1.5; color: var(--texte-2);
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.fiche-cible__pied { display: flex; align-items: center; justify-content: space-between; gap: var(--e-2) var(--e-3); flex-wrap: wrap; font-size: var(--t-1); color: var(--texte-2); }
.fiche-cible__acteurs { display: flex; align-items: center; gap: var(--e-2); min-width: 0; font-weight: var(--g-semi); }
.fiche-cible__acteurs .pile { --bord-pile: var(--surface-1); }
.fiche-cible__puces { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); }

.fiche-cible--grand { gap: var(--e-4); }
.fiche-cible--grand .fiche-cible__tete { flex-direction: column; align-items: flex-start; }
.fiche-cible--grand .fiche-cible__icone { width: 64px; height: 64px; border-radius: var(--r-4); }
.fiche-cible--grand .fiche-cible__titre { font-size: var(--t-5); font-weight: var(--g-noir); line-height: 1.12; letter-spacing: -0.028em; -webkit-line-clamp: unset; text-wrap: balance; }
.fiche-cible--grand .fiche-cible__surtitre { font-size: var(--t-2); }
.fiche-cible--grand .fiche-cible__texte { font-size: var(--t-3); -webkit-line-clamp: unset; }
.fiche-cible--grand .fiche-cible__pied { font-size: var(--t-2); }
.fiche-cible--grand .niveau__libelle { font-size: var(--t-2); }

.fiche-cible__decision { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-4); font-size: var(--t-2); font-weight: var(--g-semi); color: var(--texte-2); }
.fiche-cible__decision span { display: inline-flex; align-items: center; gap: var(--e-1); }
.fiche-cible__decision .oui { color: var(--succes); }
.fiche-cible__decision .non { color: var(--danger); }
.fiche-cible__liens { display: flex; flex-direction: column; gap: var(--e-2); }
.fiche-cible__liens ul { display: flex; flex-direction: column; gap: var(--e-2); }
.fiche-cible__liens-titre { font-size: var(--t-1); font-weight: var(--g-semi); color: var(--texte-3); }

.ligne-cible {
  display: flex; align-items: center; gap: var(--e-3);
  min-height: 56px; padding: var(--e-2) var(--e-3);
  border-radius: var(--r-3);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--trait);
  transition: background-color var(--d-rapide), transform var(--d-normale) var(--c-sortie);
}
.ligne-cible:hover { background: rgba(255, 255, 255, 0.08); }
.ligne-cible:active { transform: scale(0.985); }
.ligne-cible__icone {
  display: grid; place-items: center; flex-shrink: 0;
  width: 32px; height: 32px; border-radius: var(--r-2);
  background: color-mix(in srgb, var(--c, var(--texte-2)) 18%, transparent);
  color: var(--c, var(--texte-2));
}
.ligne-cible__textes { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ligne-cible__titre { font-size: var(--t-2); font-weight: var(--g-moyen); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ligne-cible__sous { font-size: var(--t-1); color: var(--texte-3); }
.ligne-cible:hover .ligne-cible__sous { color: var(--texte-2); }   /* au survol, texte-3 passerait sous 4,5:1 */
.ligne-cible__chevron { color: var(--texte-3); flex-shrink: 0; }

.apercu {
  position: fixed; z-index: var(--z-apercu);
  width: var(--l-apercu); max-width: calc(100vw - 24px);
  padding: var(--e-4);
  border-radius: var(--r-3);
  background: var(--verre-dense);
  -webkit-backdrop-filter: var(--verre-flou);
  backdrop-filter: var(--verre-flou);
  border: 1px solid var(--trait-2);
  box-shadow: var(--ombre-flottante);
  opacity: 0; transform: translateY(-4px) scale(0.98);
  transform-origin: 30% 0;
  pointer-events: none;
  transition: opacity var(--d-rapide) var(--c-sortie), transform var(--d-rapide) var(--c-sortie);
}
.apercu--haut { transform: translateY(4px) scale(0.98); transform-origin: 30% 100%; }
.apercu--visible { opacity: 1; transform: none; pointer-events: auto; }

/* ================================================================== palette.js */

.palette-calque {
  position: fixed; inset: 0; z-index: var(--z-palette);
  display: flex; justify-content: center; align-items: flex-start;
  padding: max(12vh, 24px) var(--e-4) var(--e-4);
}
.voile--palette { position: fixed; inset: 0; }
.palette {
  position: relative;
  width: min(var(--l-palette), 100%);
  max-height: min(560px, 76dvh);
  display: flex; flex-direction: column;
  background: var(--verre-dense);
  -webkit-backdrop-filter: var(--verre-flou);
  backdrop-filter: var(--verre-flou);
  border: 1px solid var(--trait-2);
  border-radius: var(--r-4);
  box-shadow: var(--ombre-flottante);
  overflow: hidden;
  animation: palette-entree var(--d-normale) var(--c-sortie) backwards;
}
@keyframes palette-entree { from { opacity: 0; transform: translateY(-10px) scale(0.97); } }
.palette__champ {
  display: flex; align-items: center; gap: var(--e-3);
  height: 60px; padding: 0 var(--e-3) 0 var(--e-5);
  border-bottom: 1px solid var(--trait);
  color: var(--texte-3);
  flex-shrink: 0;
}
.palette__champ input { flex: 1; min-width: 0; height: 100%; background: none; border: 0; outline: none; font-size: var(--t-3); color: var(--texte); letter-spacing: -0.01em; }
.palette__echap { cursor: pointer; }
.palette__annuler { display: none; font-size: var(--t-3); font-weight: var(--g-semi); color: var(--texte); padding: 0 var(--e-1); }
.palette__resultats { overflow-y: auto; overscroll-behavior: contain; padding: var(--e-2); }
.palette__groupe + .palette__groupe { margin-top: var(--e-2); }
.palette__titre-groupe { padding: var(--e-2) var(--e-3) var(--e-1); font-size: var(--t-1); font-weight: var(--g-semi); color: var(--texte-3); }
.palette__option {
  display: flex; align-items: center; gap: var(--e-3);
  min-height: 48px; padding: var(--e-1) var(--e-3) var(--e-1) var(--e-2);
  border-radius: var(--r-2);
  cursor: pointer;
}
.palette__option--active { background: rgba(255, 255, 255, 0.08); }
.palette__icone {
  display: grid; place-items: center; flex-shrink: 0;
  width: 32px; height: 32px; border-radius: var(--r-2);
  background: rgba(255, 255, 255, 0.07);
  color: var(--c, var(--texte-2));
}
.palette__icone:has(.avatar) { background: none; }
.palette__textes { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.palette__libelle { font-size: var(--t-2); font-weight: var(--g-moyen); color: var(--texte); }
.palette__libelle mark { background: none; color: inherit; font-weight: var(--g-gras); text-decoration: underline; text-decoration-color: rgba(255, 111, 174, 0.7); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.palette__sous { font-size: var(--t-1); color: var(--texte-3); }
.palette__option--active .palette__sous { color: var(--texte-2); }   /* sur la ligne active, texte-3 passerait sous 4,5:1 */
.palette__raccourci { display: inline-flex; gap: var(--e-1); }
.palette__entree { color: var(--texte-3); }
.palette__aucun { padding: var(--e-6) var(--e-4); text-align: center; font-size: var(--t-2); color: var(--texte-3); }

@media (max-width: 899.98px) {
  .palette-calque { padding: calc(var(--zs-haut) + var(--e-2)) var(--e-2) var(--e-2); }
  .palette { max-height: 72dvh; }
}
@media (hover: none) {
  .palette__echap, .palette__raccourci { display: none; }
  .palette__annuler { display: inline-flex; }
}

/* ================================================================== reglette.js */

.reglette { display: flex; align-items: center; gap: var(--e-0); }
/* Le nom du cran courant, écrit une seule fois, discret, dans la pilule. */
.reglette__libelle {
  display: block; width: 88px; padding-left: var(--e-4);
  font-size: var(--t-1); font-weight: var(--g-semi); color: var(--texte-2); white-space: nowrap;
}
/* Ordinateur : pilule flottante centrée sous le contenu. */
.reglette--flottante {
  position: fixed; z-index: var(--z-flottants);
  left: calc(var(--l-barre) + (100% - var(--l-barre)) / 2); bottom: var(--e-5);
  transform: translateX(-50%);
  height: var(--h-reglette); padding: 0 var(--e-1);
  border-radius: var(--r-rond);
  background: var(--verre);
  -webkit-backdrop-filter: var(--verre-flou);
  backdrop-filter: var(--verre-flou);
  border: 1px solid var(--trait-2);
  box-shadow: var(--ombre-flottante);
  animation: fondu-entree var(--d-normale) var(--c-sortie) backwards;
}
/* iPhone : rangée du haut de la barre d'onglets, dans son verre. */
.reglette--integree { height: var(--h-reglette-integree); padding: 0 var(--e-2) 0 0; flex-shrink: 0; }
.reglette--integree .reglette__libelle { flex: 1; width: auto; }
.reglette__bouton {
  position: relative;
  display: grid; place-items: center;
  width: 36px; height: 36px; border-radius: 50%;
  color: var(--texte-2);
  transition: background-color var(--d-rapide), color var(--d-rapide), transform var(--d-rapide) var(--c-sortie);
}
.reglette__bouton:hover:not(:disabled) { background: var(--survol); color: var(--texte); }
.reglette__bouton:active:not(:disabled) { transform: scale(0.9); }
.reglette__bouton:disabled { opacity: 0.32; }
.reglette__piste {
  --pas: 28px;
  position: relative;
  display: grid; grid-template-columns: repeat(var(--crans), var(--pas));
  height: 36px; align-items: center;
  border-radius: var(--r-rond);
  cursor: pointer; touch-action: none;
}
.reglette__piste:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* Rail du premier au dernier cran, rempli jusqu'au curseur : la progression se lit d'un coup d'œil. */
.reglette__rail {
  position: absolute; top: 50%; left: calc(var(--pas) / 2); right: calc(var(--pas) / 2);
  height: 2px; margin-top: -1px; border-radius: 1px;
  background: rgba(255, 255, 255, 0.1);
  pointer-events: none;
}
.reglette__rempli {
  display: block; height: 100%; border-radius: inherit;
  width: calc(var(--index) * var(--pas));
  background: var(--texte-2);
  transition: width var(--d-ressort) var(--c-ressort);
}
.reglette__cran { position: relative; display: grid; place-items: center; height: 100%; }
.reglette__cran::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.26);
  transition: background-color var(--d-rapide), transform var(--d-normale) var(--c-ressort);
}
.reglette__cran--passe::before { background: var(--texte-2); }
.reglette__piste:hover .reglette__cran:not(.reglette__cran--passe)::before { background: rgba(255, 255, 255, 0.42); }
.reglette__curseur {
  position: absolute; top: 50%; left: calc(var(--pas) / 2 - 11px); z-index: 1;
  width: 22px; height: 22px; margin-top: -11px;
  border-radius: 50%;
  background: var(--texte);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45), 0 0 0 4px rgba(255, 255, 255, 0.08);
  transform: translateX(calc(var(--index) * var(--pas)));
  transition: transform var(--d-ressort) var(--c-ressort);
  pointer-events: none;
}
.reglette__bulle {
  position: absolute; bottom: calc(100% + var(--e-4)); left: 50%; z-index: 2;
  transform: translateX(-50%);
  padding: var(--e-1) var(--e-3); border-radius: var(--r-2);
  background: var(--surface-3);
  box-shadow: var(--ombre-2);
  color: var(--texte);
  font-size: var(--t-1); font-weight: var(--g-semi); line-height: 1.4; white-space: nowrap;
  pointer-events: none;
  animation: bulle-entree var(--d-normale) var(--c-ressort-doux) both;
}
@keyframes bulle-entree { from { opacity: 0; transform: translate(-50%, 4px) scale(0.92); } }

/* ================================================================== curseur-temps.js */

.curseur-temps { position: relative; }
.curseur-temps__bouton { display: flex; align-items: center; color: var(--texte-2); transition: background-color var(--d-rapide), color var(--d-rapide), border-color var(--d-rapide); }
.curseur-temps--barre .curseur-temps__bouton {
  gap: var(--e-3); width: 100%;
  padding: var(--e-3);
  border-radius: var(--r-2);
  background: var(--surface-1);
  border: 1px solid var(--trait);
  text-align: left;
}
.curseur-temps--barre .curseur-temps__bouton:hover { background: var(--surface-2); color: var(--texte); }
.curseur-temps__textes { display: flex; flex-direction: column; min-width: 0; }
.curseur-temps__cycle { font-size: var(--t-2); font-weight: var(--g-semi); color: var(--texte); }
.curseur-temps__date { font-size: var(--t-1); color: var(--texte-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   /* au passé, sans l’année : une ligne à côté de « Présent » */
.curseur-temps--pastille .curseur-temps__bouton {
  gap: var(--e-1); height: 32px; padding: 0 var(--e-3) 0 var(--e-2);
  border-radius: var(--r-rond);
  background: var(--surface-2);
}
.curseur-temps--pastille .curseur-temps__cycle { font-size: var(--t-1); }
.curseur-temps--passe .curseur-temps__bouton { color: var(--passe); border-color: rgba(255, 181, 71, 0.4); background: var(--passe-fond); }
.curseur-temps--passe .curseur-temps__cycle { color: var(--passe); }
.curseur-temps--passe .curseur-temps__date { color: var(--texte-2); }
.curseur-temps--passe.curseur-temps--barre .curseur-temps__bouton { padding-right: 96px; }
.curseur-temps--passe.curseur-temps--barre .curseur-temps__bouton:hover { background: rgba(255, 181, 71, 0.18); }
.curseur-temps__present {
  position: absolute; top: 50%; right: var(--e-3);
  transform: translateY(-50%);
  height: 28px; padding: 0 var(--e-3);
  border-radius: var(--r-rond);
  background: var(--passe); color: var(--encre);
  font-size: var(--t-1); font-weight: var(--g-gras);
  transition: filter var(--d-rapide), transform var(--d-rapide) var(--c-sortie);
}
.curseur-temps__present:hover { filter: brightness(1.06); }
.curseur-temps__present:active { transform: translateY(-50%) scale(0.95); }

.selecteur-temps {
  position: fixed; z-index: var(--z-apercu);
  display: flex; flex-direction: column; gap: var(--e-4);
  padding: var(--e-5);
  border-radius: var(--r-4);
  background: var(--verre-dense);
  -webkit-backdrop-filter: var(--verre-flou);
  backdrop-filter: var(--verre-flou);
  border: 1px solid var(--trait-2);
  box-shadow: var(--ombre-flottante);
  animation: monter-entree var(--d-normale) var(--c-sortie) backwards;
}
.selecteur-temps__tete { display: flex; flex-direction: column; gap: var(--e-0); min-width: 0; }
.selecteur-temps__cycle { font-size: var(--t-5); font-weight: var(--g-noir); letter-spacing: -0.028em; line-height: 1.1; }
.selecteur-temps--passe .selecteur-temps__cycle { color: var(--passe); }
.selecteur-temps__date { font-size: var(--t-2); color: var(--texte-2); }
.selecteur-temps__date::first-letter { text-transform: uppercase; }
.selecteur-temps__titre { font-size: var(--t-2); font-weight: var(--g-semi); color: var(--texte); margin-top: var(--e-1); }
.selecteur-temps__actions { display: flex; align-items: center; justify-content: space-between; gap: var(--e-2); }

.selecteur-temps__glissiere {
  --plein: var(--texte);
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 28px; background: transparent; cursor: pointer;
}
.selecteur-temps--passe .selecteur-temps__glissiere { --plein: var(--passe); }
.selecteur-temps__glissiere::-webkit-slider-runnable-track {
  height: 6px; border-radius: 3px;
  background: linear-gradient(to right, var(--plein) var(--rempli), rgba(255, 255, 255, 0.14) var(--rempli));
}
.selecteur-temps__glissiere::-moz-range-track { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.14); }
.selecteur-temps__glissiere::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--plein); }
.selecteur-temps__glissiere::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 24px; height: 24px; margin-top: -9px; border-radius: 50%;
  background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}
.selecteur-temps__glissiere::-moz-range-thumb { width: 24px; height: 24px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); }

/* ================================================================== toast.js */

.toasts {
  position: fixed; z-index: var(--z-toast);
  left: 50%; bottom: var(--e-5);
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: var(--e-2);
  width: max-content; max-width: calc(100vw - 2 * var(--e-4));
  pointer-events: none;
}
.toasts { transition: bottom var(--d-rapide) var(--c-sortie); }
@media (min-width: 900px) {
  .toasts { left: calc(var(--l-barre) + (100% - var(--l-barre)) / 2); }
  .coque[data-zoom="1"] ~ .toasts { bottom: calc(var(--e-5) + var(--h-reglette) + var(--e-3)); }
}
@media (max-width: 899.98px) {
  .toasts { bottom: calc(var(--e-3) + var(--zs-bas) + var(--h-onglets) + var(--e-3)); }
  .coque[data-reglette="1"] ~ .toasts { bottom: calc(var(--e-3) + var(--zs-bas) + var(--h-onglets) + var(--h-reglette-integree) + 1px + var(--e-3)); }
}
.toast {
  pointer-events: auto;
  display: flex; align-items: center; gap: var(--e-3);
  min-height: 48px; max-width: 100%;
  padding: var(--e-1) var(--e-1) var(--e-1) var(--e-4);
  border-radius: var(--r-rond);
  background: var(--verre-dense);
  -webkit-backdrop-filter: var(--verre-flou);
  backdrop-filter: var(--verre-flou);
  border: 1px solid var(--trait-2);
  box-shadow: var(--ombre-flottante);
  font-size: var(--t-2); font-weight: var(--g-moyen); color: var(--texte);
  animation: toast-entree var(--d-lente) var(--c-sortie) backwards;
}
.toast--sortant { animation: toast-sortie var(--d-normale) var(--c-entree) forwards; }
.toast--statique { animation: none; }
.toast__icone { display: inline-grid; color: var(--texte-2); }
.toast__texte { min-width: 0; }
.toast__fermer { position: relative; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: var(--texte-3); transition: background-color var(--d-rapide), color var(--d-rapide); }
.toast__fermer:hover { background: var(--survol); color: var(--texte); }
@keyframes toast-entree { from { opacity: 0; transform: translateY(16px) scale(0.94); } }
@keyframes toast-sortie { to { opacity: 0; transform: translateY(8px) scale(0.96); } }

/* ================================================================== onglets.js */

/* Contrôle segmenté : à la mesure de ses options (jamais étiré) ; en débordement, il défile avec un
   fondu au bord qui cache la suite, et s'aimante sur les options. */
.onglets {
  position: relative;
  display: inline-flex; align-items: center; align-self: flex-start; gap: var(--e-0);
  width: max-content; max-width: 100%; height: 40px; padding: var(--e-1);
  border-radius: var(--r-rond);
  background: var(--surface-1);
  border: 1px solid var(--trait);
  overflow-x: auto; scrollbar-width: none;
  scroll-snap-type: x proximity; scroll-padding-inline: var(--e-1);
}
.onglets::-webkit-scrollbar { display: none; }
.onglets[data-fondu="droite"] { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent); }
.onglets[data-fondu="gauche"] { -webkit-mask-image: linear-gradient(90deg, transparent, #000 24px); mask-image: linear-gradient(90deg, transparent, #000 24px); }
.onglets[data-fondu="gauche droite"] { -webkit-mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent); }
.onglets--plein { display: flex; width: 100%; align-self: stretch; }
.onglets--plein .onglets__option { flex: 1; }
.onglets__pastille {
  position: absolute; top: var(--e-1); bottom: var(--e-1); left: 0;
  border-radius: var(--r-rond);
  background: var(--surface-3);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition: transform var(--d-lente) var(--c-sortie), width var(--d-lente) var(--c-sortie);
}
.onglets__option {
  position: relative; z-index: 1; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2);
  height: 30px; padding: 0 var(--e-3);
  border-radius: var(--r-rond);
  font-size: var(--t-2); font-weight: var(--g-semi); letter-spacing: -0.01em;
  color: var(--texte-2); white-space: nowrap;
  scroll-snap-align: start;
  transition: color var(--d-rapide);
}
.onglets__option:hover { color: var(--texte); }
.onglets__option--active { color: var(--texte); }
.onglets__compte { font-size: var(--t-1); color: var(--texte-3); }
/* Sur la pastille (surface-3), texte-3 tomberait à 4,3:1 : texte-2 (5,7:1). */
.onglets__option--active .onglets__compte { color: var(--texte-2); }

/* ================================================================== squelette.js */

.squelette {
  position: relative; display: block; overflow: hidden; flex-shrink: 0;
  max-width: 100%;
  border-radius: var(--r-1);
  background: var(--surface-2);
}
.squelette::after {
  content: ""; position: absolute; inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0));
  animation: reflet 1.5s ease-in-out infinite;
}
.squelette--rond { border-radius: 50%; }
.squelette-texte { display: flex; flex-direction: column; gap: var(--e-3); width: 100%; }
.squelette-carte { display: flex; flex-direction: column; gap: var(--e-3); padding: var(--e-5); border-radius: var(--r-3); background: var(--surface-1); border: 1px solid var(--trait); }
.squelette-carte--grande { padding: var(--e-6); border-radius: var(--r-4); }
.squelette-carte__tete { display: flex; align-items: center; gap: var(--e-3); }
.squelette-bulles { display: flex; flex-direction: column; gap: var(--e-3); }
.squelette-bulles__ligne { display: flex; align-items: flex-end; gap: var(--e-2); }
.squelette-fil { display: flex; flex-direction: column; gap: var(--e-3); }
.squelette-fil__stories { display: flex; gap: var(--e-3); overflow: hidden; padding-bottom: var(--e-3); }
.squelette-fil__story { display: flex; flex-direction: column; align-items: center; gap: var(--e-2); width: 80px; flex-shrink: 0; padding-top: 5px; }

/* ================================================================== vide.js */

.vide {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--e-2);
  max-width: 420px; min-height: min(70vh, 640px); margin: 0 auto; padding: var(--e-6) var(--e-4);
  text-align: center;
  animation: monter-entree var(--d-lente) var(--c-sortie) backwards;
}
.vide--compact { min-height: 0; margin: 0 auto; padding: var(--e-5) var(--e-4); }
.vide__illustration { position: relative; display: grid; place-items: center; width: var(--taille); height: var(--taille); margin-bottom: var(--e-4); }
.vide__orbites { position: absolute; inset: 0; width: 100%; height: 100%; }
.vide__tuile {
  position: relative;
  display: grid; place-items: center;
  width: 44%; aspect-ratio: 1;
  border-radius: 30%;
  background: linear-gradient(180deg, var(--surface-3), var(--surface-2));
  border: 1px solid var(--trait-2);
  box-shadow: 0 14px 32px -12px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  color: var(--texte-2);
  animation: flotter 6s ease-in-out infinite;
}
.vide__titre { font-size: var(--t-4); font-weight: var(--g-gras); line-height: var(--i-titre); letter-spacing: var(--l-titre); text-wrap: balance; }
.vide__texte { font-size: var(--t-2); line-height: 1.5; color: var(--texte-2); text-wrap: pretty; }
.vide__action { margin-top: var(--e-4); }

/* ================================================================== liste-virtuelle.js */

.liste-virtuelle { position: relative; width: 100%; overflow-anchor: none; contain: layout; }
.liste-virtuelle__element { position: absolute; top: 0; left: 0; right: 0; }

/* ================================================================== document.js */

.prose {
  max-width: var(--l-lecture);
  font-size: var(--t-lecture); line-height: var(--i-lecture); letter-spacing: -0.006em;
  color: var(--texte);
  overflow-wrap: break-word;
  -webkit-hyphens: auto; hyphens: auto;
  text-wrap: pretty;
}
.prose--large { max-width: none; }
.prose > :first-child { margin-top: 0; }
.prose p, .prose ul, .prose ol, .prose blockquote, .prose pre, .prose table, .prose figure { margin: 0 0 1em; }
.prose h1 { margin: 1.6em 0 0.5em; font-size: var(--t-5); font-weight: var(--g-noir); line-height: 1.15; letter-spacing: -0.026em; text-wrap: balance; }
.prose h2 { margin: 1.7em 0 0.5em; font-size: var(--t-4); font-weight: var(--g-gras); line-height: 1.25; letter-spacing: var(--l-titre); text-wrap: balance; }
.prose h3 { margin: 1.5em 0 0.4em; font-size: var(--t-3); font-weight: var(--g-semi); line-height: 1.3; }
.prose h4, .prose h5, .prose h6 { margin: 1.4em 0 0.3em; font-size: var(--t-2); font-weight: var(--g-semi); color: var(--texte-2); }
.prose strong { font-weight: var(--g-semi); }
.prose blockquote { padding: 2px 0 2px var(--e-5); border-left: 3px solid var(--trait-3); color: var(--texte-2); }
.prose ul { padding-left: 1.4em; }
.prose ul > li { position: relative; }
.prose ul > li::before { content: ""; position: absolute; left: -1em; top: 0.68em; width: 6px; height: 6px; border-radius: 50%; background: var(--texte-3); }
.prose ol { padding-left: 1.6em; list-style: decimal; }
.prose ol > li::marker { color: var(--texte-3); font-variant-numeric: tabular-nums; font-weight: var(--g-semi); }
.prose li + li { margin-top: 0.35em; }
.prose li > ul, .prose li > ol { margin: 0.35em 0 0; }
.prose hr { height: 1px; margin: 2.2em 0; border: 0; background: var(--trait-2); }
.prose code { padding: 0.12em 0.4em; border-radius: 6px; background: var(--surface-2); font-family: var(--police-code); font-size: 0.84em; }
.prose pre { padding: var(--e-4) var(--e-5); border-radius: var(--r-2); background: var(--surface-1); border: 1px solid var(--trait); overflow-x: auto; font-size: var(--t-2); line-height: 1.55; -webkit-hyphens: none; hyphens: none; }
.prose pre code { padding: 0; background: none; font-size: 0.9em; }
.prose table { display: block; width: 100%; overflow-x: auto; border-collapse: collapse; font-size: var(--t-2); line-height: 1.45; font-variant-numeric: tabular-nums; -webkit-hyphens: none; hyphens: none; }
.prose th { padding: var(--e-2) var(--e-3); border-bottom: 1px solid var(--trait-2); text-align: left; font-size: var(--t-1); font-weight: var(--g-semi); color: var(--texte-2); white-space: nowrap; }
.prose td { padding: var(--e-3); border-bottom: 1px solid var(--trait); vertical-align: top; }
.prose tr:last-child td { border-bottom: 0; }
.prose img { height: auto; margin: 1em 0; border-radius: var(--r-2); }
.prose .image-absente { color: var(--texte-3); font-style: italic; }

/* Pastille de preuve, collée au mot (l'espace est absorbée au rendu) : une seule forme, un disque de 16 px.
   Une source : un point ; à partir de deux, leur nombre. */
.citation {
  position: relative;
  display: inline-grid; place-items: center;
  min-width: 16px; height: 16px; padding: 0 4px;
  margin: 0 0.06em 0 0.1em; vertical-align: 0.12em;
  border-radius: var(--r-rond);
  background: var(--surface-3);
  color: var(--texte-2);
  font-size: var(--t-1); font-weight: var(--g-semi); line-height: 1; font-style: normal;
  font-variant-numeric: tabular-nums; text-decoration: none;
  transition: background-color var(--d-rapide), color var(--d-rapide), transform var(--d-normale) var(--c-sortie);
}
.citation::before { content: ""; position: absolute; inset: -6px; }
.citation__marque:empty { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.citation:hover, .citation:focus-visible { background: var(--accent-1); color: var(--encre); transform: scale(1.12); }

/* ================================================================== cibles tactiles */

/* Au doigt, aucune cible sous 44 × 44 (recommandation d'Apple) : le dessin reste, la zone s'étend par un
   ::before (inset calculé sur la taille dessinée), ou la cible grandit. Le bilan de santé le mesure. */
@media (pointer: coarse) {
  .reglette__bouton::before, .toast__fermer::before,
  .bouton--petit::before, .onglets__option::before, .curseur-temps--pastille .curseur-temps__bouton::before,
  .curseur-temps__present::before, .palette__annuler::before, .mot-symbole::before {
    content: ""; position: absolute;
    inset: min(0px, calc((100% - var(--cible-tactile)) / 2));
  }
  .bouton { height: var(--cible-tactile); }
  .bouton--petit, .onglets__option { height: 36px; }
  .onglets { height: calc(36px + 2 * var(--e-1) + 2px); }
  .curseur-temps--pastille .curseur-temps__bouton { position: relative; height: 36px; }
  .evt--0, .evt--1 { min-height: var(--cible-tactile); }
  .evt--0 { padding-block: var(--e-2); }
  .evt__creation { min-height: var(--cible-tactile); }
  .pensee { min-height: var(--cible-tactile); }
  .palette__annuler { position: relative; align-self: stretch; align-items: center; }
  .citation::before { inset: min(0px, calc((100% - var(--cible-tactile)) / 2)); }
  .reglette__piste::before { content: ""; position: absolute; inset: -4px 0; }
  .selecteur-temps__glissiere { height: var(--cible-tactile); }
  /* Dans une carte, avatars et prénoms s'effacent devant la carte entière : une seule cible au doigt ;
     la personne s'ouvre depuis le panneau de l'événement. La création reste une cible propre (44 px). */
  .evt a:not(.evt__lien):not(.evt__creation), .chapitre__phrase a { pointer-events: none; }
  /* Scène : l'avatar (32 px) ouvre la personne sur 44 px ; le nom au-dessus des bulles n'est plus une cible. */
  .groupe__avatar a::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; }
  .groupe__nom { pointer-events: none; }
}

/* ================================================================== réduire les animations */

@media (prefers-reduced-motion: reduce) {
  .squelette::after { display: none; }
  .vide__tuile { animation: none; }
}