/*
 * Vues Personnes et Personne : styles propres (jetons de css/jetons.css seulement ; voir DESIGN.md).
 * Ordre : pièces communes (provenance, bulle, carte étirée), liste, graphe, lecteur du temps, page
 * (profil, onglets), fiche, frise, journal, croyances, relations, créations, cibles tactiles.
 */

/* ================================================================== pièces communes */

/* Provenance d'une puce de fiche : ● fourni (vient du lecteur), ○ inventé, ◐ révisé. Discrète, jamais seule :
   son nom est dans le texte caché et dans la légende. */
.provenance {
  display: inline-block; flex-shrink: 0;
  width: 8px; height: 8px; border-radius: 50%;
  vertical-align: 0.1em;
}
.provenance--fourni { background: var(--info); }
.provenance--invente { box-shadow: inset 0 0 0 1.5px var(--violet); }
.provenance--revise { background: linear-gradient(90deg, var(--attention) 50%, transparent 50%); box-shadow: inset 0 0 0 1.5px var(--attention); }
.provenance-revise {
  position: relative;
  display: inline-flex; align-items: center; gap: var(--e-1);
  height: 20px; padding: 0 7px;
  border-radius: var(--r-rond);
  background: color-mix(in srgb, var(--attention) var(--teinte-puce), transparent);
  color: var(--attention);
  font-size: var(--t-1); font-weight: var(--g-semi); line-height: 1; white-space: nowrap;
  transition: background-color var(--d-rapide);
}
.provenance-revise .provenance { width: 6px; height: 6px; }
@media (hover: hover) { .provenance-revise:hover { background: color-mix(in srgb, var(--attention) 24%, transparent); } }

/* Une réplique dans la bulle du personnage : sa voix (même fond que les bulles des scènes). */
.p-bulle {
  align-self: flex-start;
  max-width: 100%;
  padding: var(--e-2) var(--e-3);
  border-radius: var(--r-4) var(--r-4) var(--r-4) 6px;
  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: break-word; text-wrap: pretty;
}

/* Carte entière cliquable : un lien étiré en premier enfant, le reste au-dessus sans capter le pointeur. */
.carte-personne, .croyance, .carte-creation {
  position: relative;
  border-radius: var(--r-4);
  background: var(--surface-1);
  border: 1px solid var(--trait);
  transition: background-color var(--d-rapide) var(--c-standard), transform var(--d-normale) var(--c-sortie);
}
.carte-personne__lien, .croyance__lien, .carte-creation__lien { position: absolute; inset: -1px; z-index: 0; border-radius: inherit; }
.carte-personne__lien:focus-visible, .croyance__lien:focus-visible, .carte-creation__lien:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.carte-personne > :not(.carte-personne__lien),
.croyance > :not(.croyance__lien),
.carte-creation > :not(.carte-creation__lien) { position: relative; z-index: 1; pointer-events: none; }
@media (hover: hover) {
  .carte-personne:hover, .croyance:hover, .carte-creation:hover { background: var(--surface-2); }
}
.carte-personne:active, .croyance:active, .carte-creation:active { transform: scale(0.985); }

/* ================================================================== #/personnes */

.personnes { display: flex; flex-direction: column; gap: var(--e-6); }
@media (max-width: 899.98px) { .personnes > .personnes__titre { margin-bottom: calc(var(--e-5) - var(--e-6)); } }
.personnes__titre { text-wrap: balance; }
.personnes__grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(296px, 1fr)); gap: var(--e-4); }

.carte-personne { display: flex; flex-direction: column; gap: var(--e-4); padding: var(--e-5); }
.carte-personne__tete { display: flex; align-items: center; gap: var(--e-4); min-width: 0; }
.carte-personne__titres { display: flex; flex-direction: column; align-items: flex-start; gap: var(--e-1); min-width: 0; }
.carte-personne__nom { font-size: var(--t-4); font-weight: var(--g-gras); line-height: var(--i-titre); letter-spacing: var(--l-titre); text-wrap: balance; }
.carte-personne__role {
  font-size: var(--t-2); line-height: 1.45; color: var(--texte-2); text-wrap: pretty;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.carte-personne__bulle { max-width: 92%; }
.carte-personne__stats { margin-top: auto; font-size: var(--t-1); font-weight: var(--g-semi); color: var(--texte-3); }
@media (hover: hover) { .carte-personne:hover .carte-personne__stats { color: var(--texte-2); } }   /* texte-3 sur surface-2 : 4,8:1 */

.personnes__relations { display: flex; flex-direction: column; gap: var(--e-4); margin-top: var(--e-5); }

/* ================================================================== graphe des relations */

.carte-graphe {
  display: flex; flex-direction: column; gap: var(--e-2);
  padding: var(--e-3) var(--e-4) var(--e-4);
  border-radius: var(--r-4);
  background: var(--surface-1);
  border: 1px solid var(--trait);
}
.graphe { position: relative; width: 100%; }
.graphe__traits { position: absolute; inset: 0; overflow: visible; }
.graphe__fleche {
  transition: opacity var(--d-lente) var(--c-sortie);
  animation: fondu-entree var(--d-lente) var(--c-sortie) backwards;
}
.graphe__chemin {
  fill: none; stroke: currentColor; stroke-linecap: round;
  transition: stroke-width var(--d-lente) var(--c-sortie), d var(--d-lente) var(--c-sortie);
}
.graphe__pointe { fill: currentColor; transition: d var(--d-lente) var(--c-sortie); }

/* Le score signé, posé au milieu de la flèche, à la couleur de celui qui le porte. */
.graphe__score {
  position: absolute; z-index: 1;
  display: inline-grid; place-items: center;
  min-width: 32px; height: 24px; padding: 0 var(--e-2);
  transform: translate(-50%, -50%);
  border-radius: var(--r-rond);
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 45%, transparent), 0 0 0 3px var(--surface-1);
  color: var(--c);
  font-size: var(--t-1); font-weight: var(--g-gras); line-height: 1;
  pointer-events: none;
  transition: left var(--d-lente) var(--c-sortie), top var(--d-lente) var(--c-sortie);
  animation: graphe-score var(--d-lente) var(--c-sortie) backwards;
}
@keyframes graphe-score { from { opacity: 0; transform: translate(-50%, -50%) scale(0.6); } }

.graphe__noeud {
  position: absolute; z-index: 2;
  transform: translate(-50%, calc(var(--taille) / -2));
  transition: left var(--d-lente) var(--c-sortie), top var(--d-lente) var(--c-sortie);
  animation: fondu-entree var(--d-lente) var(--c-sortie) backwards;
}
.graphe__lien {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--e-1);
  min-width: var(--cible-tactile); min-height: var(--cible-tactile);
  border-radius: var(--r-3);
}
/* Le nom se pose du côté qu'aucun trait ne barre (data-cote, calculé par le graphe) : dessous par défaut. */
.graphe__noeud[data-cote="haut"] { transform: translate(-50%, calc(-100% + var(--taille) / 2)); }
.graphe__noeud[data-cote="haut"] .graphe__lien { flex-direction: column-reverse; }
.graphe__noeud[data-cote="droite"] { transform: translate(calc(var(--taille) / -2), -50%); }
.graphe__noeud[data-cote="droite"] .graphe__lien { flex-direction: row; gap: 6px; }
.graphe__noeud[data-cote="gauche"] { transform: translate(calc(-100% + var(--taille) / 2), -50%); }
.graphe__noeud[data-cote="gauche"] .graphe__lien { flex-direction: row-reverse; gap: 6px; }
.graphe__lien .avatar { flex-shrink: 0; transition: transform var(--d-normale) var(--c-sortie); }
@media (hover: hover) { a.graphe__lien:hover .avatar { transform: scale(1.06); } }
a.graphe__lien:active .avatar, .graphe__noeud--focus .avatar { transform: scale(1.06); }
.graphe__nom {
  display: flex; flex-direction: column; align-items: center;
  font-size: var(--t-1); font-weight: var(--g-semi); line-height: 1.3; color: var(--c); white-space: nowrap;
}
/* Chaque ligne du nom sur une pastille de la couleur du cadre : un trait qui passe derrière ne la barre pas. */
.graphe__nom > span { padding: 0 3px; border-radius: 4px; background: var(--surface-1); }
.graphe__noeud[data-cote="droite"] .graphe__nom { align-items: flex-start; }
.graphe__noeud[data-cote="gauche"] .graphe__nom { align-items: flex-end; }
.graphe__noeud--centre .graphe__nom { font-size: var(--t-2); }

/* Constellation (groupe de quatre ou plus) : une paire, un trait coupé en son milieu ; au survol d'une
   personne, ses flèches et leurs scores, le reste s'efface. */
.graphe--dense .graphe__moitie .graphe__chemin { stroke-linecap: round; }
.graphe__fleche--efface { opacity: 0.1; }

/* ================================================================== lecture dans le temps */

.lecteur-temps { display: flex; align-items: center; gap: var(--e-3); padding-top: var(--e-1); }
.lecteur-temps__lecture { flex-shrink: 0; }
.lecteur-temps__piste { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; }
.lecteur-temps__glissiere {
  --plein: var(--texte);
  position: relative; z-index: 1;
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 36px; margin: 0;
  background: transparent; cursor: pointer;
}
.lecteur-temps__glissiere::-webkit-slider-runnable-track {
  height: 4px; border-radius: 2px;
  background: linear-gradient(to right, var(--plein) var(--rempli), var(--trait-3) var(--rempli));
}
.lecteur-temps__glissiere::-moz-range-track { height: 4px; border-radius: 2px; background: var(--trait-3); }
.lecteur-temps__glissiere::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--plein); }
.lecteur-temps__glissiere::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 20px; height: 20px; margin-top: -8px; border-radius: 50%;
  background: var(--texte); box-shadow: var(--ombre-2);
  transition: transform var(--d-rapide) var(--c-sortie);
}
.lecteur-temps__glissiere::-moz-range-thumb { width: 20px; height: 20px; border: 0; border-radius: 50%; background: var(--texte); box-shadow: var(--ombre-2); }
.lecteur-temps__glissiere:active::-webkit-slider-thumb { transform: scale(1.12); }
.lecteur-temps__glissiere:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--r-rond); }
/* Un cran par cycle, sous la piste. */
.lecteur-temps__crans { position: absolute; inset: 0; pointer-events: none; }
.lecteur-temps__crans i {
  position: absolute; top: calc(50% + 8px);
  width: 4px; height: 4px; margin-left: -2px; border-radius: 50%;
  background: var(--trait-3);
}
.lecteur-temps__crans i.on { background: var(--texte-2); }
.lecteur-temps__cycle { flex-shrink: 0; min-width: 4.5em; text-align: right; font-size: var(--t-1); font-weight: var(--g-semi); color: var(--texte-2); }

/* ================================================================== #/personne/<id> */

.personne {
  --collant: calc(var(--e-3) + 40px + var(--e-4));
  display: flex; flex-direction: column; gap: var(--e-6);
}
.personne > * { width: 100%; max-width: var(--l-fil); margin-inline: auto; min-width: 0; }
@media (min-width: 1200px) {
  .personne {
    display: grid; grid-template-columns: 296px minmax(0, var(--l-fil));
    justify-content: center; align-items: start; column-gap: var(--e-9);
  }
  .personne > * { max-width: none; margin: 0; }
  .personne__profil { position: sticky; top: var(--e-6); }
}

/* Profil : avatar, nom, rôle, voix. */
.profil { display: flex; flex-direction: column; align-items: flex-start; gap: var(--e-4); min-width: 0; }
.profil__identite { display: flex; flex-direction: column; align-items: flex-start; gap: var(--e-2); min-width: 0; }
.profil__nom { overflow-wrap: break-word; text-wrap: balance; }
.profil__role { max-width: 36em; font-size: var(--t-3); line-height: 1.45; color: var(--texte-2); text-wrap: balance; }
.profil__role .provenance { margin-left: var(--e-2); }
.profil__voix { display: flex; align-items: flex-end; gap: var(--e-2); max-width: 100%; }
.profil__voix > .provenance { margin-bottom: var(--e-3); }
.profil__voix .p-bulle { max-width: calc(100% - var(--e-5)); }

/* Onglets de la personne : collants sous la barre du haut (iPhone) ou en haut de l'écran. */
.personne__onglets {
  position: sticky; top: 0; z-index: var(--z-collant);
  padding: var(--e-3) 0 var(--e-4);
  margin-top: calc(-1 * var(--e-3));
  background: linear-gradient(var(--fond) calc(100% - var(--e-3)), transparent);
}
.personne__onglets .onglets { max-width: 100%; }
.personne__section { min-width: 0; animation: monter-entree var(--d-normale) var(--c-sortie) backwards; }

@media (max-width: 899.98px) {
  .personne { --collant: calc(var(--h-barre-haut) + var(--zs-haut) + var(--e-3) + 46px + var(--e-4)); gap: var(--e-5); }
  .personne__onglets { top: calc(var(--h-barre-haut) + var(--zs-haut)); }
}

/* ================================================================== fiche */

.fiche { display: flex; flex-direction: column; gap: var(--e-3); }
.fiche__legende {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-4);
  padding: 0 var(--e-1) var(--e-1);
  font-size: var(--t-1); color: var(--texte-3);
}
.fiche__sorte { display: inline-flex; align-items: center; gap: var(--e-2); }
.fiche__carte {
  padding: var(--e-4) var(--e-5) var(--e-1);
  border-radius: var(--r-4);
  background: var(--surface-1);
  border: 1px solid var(--trait);
}
.fiche__titre { font-size: var(--t-1); font-weight: var(--g-semi); line-height: 1.4; color: var(--texte-3); }
.fiche__squelette { padding: var(--e-4) 0 var(--e-3); }
.fiche__ligne {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; column-gap: var(--e-3);
  padding: var(--e-3) 0;
  border-bottom: 1px solid var(--trait);
}
.fiche__ligne:last-child { border-bottom: 0; }
.fiche__ligne--rang { grid-template-columns: var(--e-6) minmax(0, 1fr) auto; }
.fiche__rang { font-size: var(--t-4); font-weight: var(--g-noir); line-height: 1.1; color: var(--texte-3); }
.fiche__texte { display: flex; flex-direction: column; gap: var(--e-0); min-width: 0; }
.fiche__libelle { font-size: var(--t-1); font-weight: var(--g-semi); line-height: 1.4; color: var(--texte-3); }
.fiche__valeur { font-size: var(--t-3); line-height: 1.45; color: var(--texte); overflow-wrap: break-word; text-wrap: pretty; }
/* La marque se pose sur la première ligne du texte (17 × 1,45), ou du libellé (13 × 1,4). */
.fiche__marque { display: flex; align-items: center; min-height: calc(var(--t-3) * 1.45); }
.fiche__ligne--libelle .fiche__marque { min-height: calc(var(--t-1) * 1.4); }
.fiche__revision {
  display: flex; align-items: center; gap: var(--e-3);
  margin: calc(-1 * var(--e-2)) calc(-1 * var(--e-3)); padding: var(--e-2) var(--e-3);
  border-radius: var(--r-2);
  transition: background-color var(--d-rapide);
}
.fiche__revision .fiche__texte { flex: 1; }
.fiche__chevron { color: var(--texte-3); }
@media (hover: hover) { .fiche__revision:hover { background: var(--survol); } }
/* Ordinateur : le libellé en colonne à gauche, la valeur à droite, alignés sur la ligne de base. */
@media (min-width: 900px) {
  .fiche__ligne--libelle .fiche__texte { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); column-gap: var(--e-4); align-items: baseline; }
  .fiche__ligne--libelle .fiche__marque { min-height: calc(var(--t-3) * 1.45); }
}

/* ================================================================== frise */

.frise { display: flex; flex-direction: column; }
.frise__filtre { margin-bottom: var(--e-5); }
.frise__plus { align-self: center; margin-bottom: var(--e-5); }
.frise__cycle + .frise__cycle { margin-top: var(--e-7); }
.frise__chapitre {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: var(--e-3); row-gap: var(--e-1);
  padding: 0 calc(var(--retrait) + 1px) var(--e-2);
}
.frise__numero { font-size: var(--t-1); font-weight: var(--g-semi); color: var(--texte-3); }
.frise__compte { grid-row: 1; grid-column: 2; font-size: var(--t-1); color: var(--texte-3); text-align: right; }
.frise__titre {
  grid-column: 1 / -1;
  font-size: var(--t-4); font-weight: var(--g-gras); line-height: var(--i-titre); letter-spacing: var(--l-titre);
  text-wrap: balance;
}
.frise__lien {
  text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: 4px;
  transition: text-decoration-color var(--d-rapide);
}
@media (hover: hover) { .frise__lien:hover { text-decoration-color: var(--trait-3); } }
.frise__evt { padding-bottom: var(--e-2); }
.frise__evt--ligne { padding-bottom: var(--e-1); }
/* Les séparateurs de jour collent sous les onglets de la personne. */
.personne .frise .jour { top: var(--collant); }

/* ================================================================== journal */

.journal { display: flex; flex-direction: column; }
.journal__entree { display: flex; flex-direction: column; gap: var(--e-4); }
.journal__entree + .journal__entree { margin-top: var(--e-7); padding-top: var(--e-7); border-top: 1px solid var(--trait); }
.journal__tete { display: flex; align-items: center; gap: var(--e-3); }
.journal__quand { display: flex; flex-direction: column; min-width: 0; }
.journal__cycle { font-size: var(--t-2); font-weight: var(--g-semi); line-height: 1.3; color: var(--texte); }
.journal__date { font-size: var(--t-1); line-height: 1.4; color: var(--texte-3); }
.journal__date::first-letter { text-transform: uppercase; }
.journal__squelette { padding-top: var(--e-4); }
/* Lecture : 27 em (486 px à 18 px) plutôt que --l-lecture (30 em) : les journaux, aux mots courts, y
   dépassaient 66 caractères par ligne. */
.journal .prose { max-width: 27em; }
.journal__entree + .journal__entree:has(.squelette) { border-top: 0; }

/* ================================================================== croyances */

.croyances { display: flex; flex-direction: column; gap: var(--e-3); }
.croyance { display: flex; flex-direction: column; gap: var(--e-3); padding: var(--e-4) var(--e-5); overflow: hidden; }
/* Liseré de vérité, révélée au lecteur seul : vert si le canon la confirme, rouge s'il la dément. */
.croyance::before {
  content: ""; position: absolute; z-index: 1; left: -1px; top: var(--e-4); bottom: var(--e-4);
  width: 3px; border-radius: 0 3px 3px 0;
  background: transparent; pointer-events: none;
}
.croyance--vraie::before { background: var(--succes); }
.croyance--fausse::before { background: var(--danger); }
.croyance__haut { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); }
.croyance__depuis { margin-left: auto; font-size: var(--t-1); color: var(--texte-3); }
.croyance__enonce { font-size: var(--t-3); font-weight: var(--g-semi); line-height: 1.4; letter-spacing: -0.01em; text-wrap: pretty; }
.croyance--abandonnee .croyance__enonce { color: var(--texte-2); text-decoration: line-through; text-decoration-color: var(--trait-3); }
.croyance__certitude { display: flex; align-items: center; gap: var(--e-3); }
.croyance__libelle { font-size: var(--t-1); font-weight: var(--g-semi); color: var(--texte-3); }
.croyance__jauge { flex: 0 1 160px; height: 4px; border-radius: 2px; background: var(--surface-3); overflow: hidden; }
.croyance__jauge i { display: block; height: 100%; border-radius: inherit; background: var(--c); }
.croyance__pourcent { font-size: var(--t-1); font-weight: var(--g-semi); color: var(--texte-2); }
.croyance__canon {
  display: flex; flex-direction: column; gap: var(--e-0);
  padding-top: var(--e-3); border-top: 1px solid var(--trait);
  font-size: var(--t-2); line-height: 1.45; color: var(--texte-2); text-wrap: pretty;
}

/* ================================================================== relations */

.relations { display: flex; flex-direction: column; gap: var(--e-5); }
.relations__paires { display: flex; flex-direction: column; gap: var(--e-3); }
.paire {
  display: flex; flex-direction: column; gap: var(--e-3);
  padding: var(--e-4) var(--e-4) var(--e-4);
  border-radius: var(--r-4);
  background: var(--surface-1);
  border: 1px solid var(--trait);
}
.paire__tete { display: flex; align-items: center; padding: 0 var(--e-1); }
.paire__qui { display: inline-flex; align-items: center; gap: var(--e-3); min-height: 44px; border-radius: var(--r-3); }
.paire__nom { font-size: var(--t-3); font-weight: var(--g-gras); letter-spacing: -0.01em; color: var(--c); }
@media (hover: hover) { .paire__qui:hover .paire__nom { text-decoration: underline; text-underline-offset: 3px; } }

/* Un avis : celui qui le porte, vers qui, le score et sa courbe, puis la phrase, à sa voix. */
.avis {
  display: flex; flex-direction: column; gap: var(--e-2);
  padding: var(--e-3) var(--e-4) var(--e-4);
  border-radius: var(--r-3);
  background: var(--surface-2);
  border: 1px solid color-mix(in srgb, var(--c) 22%, transparent);
}
.avis__haut { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); min-width: 0; }
.avis__qui { display: inline-flex; align-items: center; gap: var(--e-2); min-width: 0; font-size: var(--t-1); font-weight: var(--g-semi); color: var(--texte-2); }
.avis__de { color: var(--c); }
.avis__fleche { color: var(--texte-2); }
.avis__score { display: inline-flex; align-items: center; gap: var(--e-3); flex-shrink: 0; }
.avis__nombre { min-width: 2ch; font-size: var(--t-4); font-weight: var(--g-noir); line-height: 1; letter-spacing: -0.02em; text-align: right; color: var(--c); }
.avis__phrase { font-size: var(--t-3); font-style: italic; line-height: 1.45; color: var(--texte); text-wrap: pretty; }
.avis__source { display: flex; align-items: baseline; gap: var(--e-2); font-size: var(--t-1); line-height: 1.45; color: var(--texte-2); }
.avis__source .icone, .avis__source svg { flex-shrink: 0; align-self: center; color: var(--texte-2); }
.avis__rien { font-size: var(--t-2); color: var(--texte-2); }
.avis--vide { background: transparent; border-style: dashed; border-color: var(--trait-2); }
.avis__avant summary {
  position: relative;
  display: inline-flex; align-items: center; gap: var(--e-1);
  min-height: 28px;
  list-style: none; cursor: pointer;
  font-size: var(--t-1); font-weight: var(--g-semi); color: var(--texte-2);
  border-radius: var(--r-1);
}
.avis__avant summary::-webkit-details-marker { display: none; }
@media (hover: hover) { .avis__avant summary:hover { color: var(--texte); } }
.avis__chevron { transition: transform var(--d-rapide) var(--c-sortie); }
.avis__avant[open] .avis__chevron { transform: rotate(90deg); }
.avis__avant ol { display: flex; flex-direction: column; gap: var(--e-3); padding: var(--e-2) 0 0 var(--e-5); }
.avis__avant li { display: flex; flex-direction: column; gap: var(--e-0); }
.avis__quand { font-size: var(--t-1); font-weight: var(--g-semi); color: var(--texte-2); }
.avis__ancienne { font-size: var(--t-2); font-style: italic; line-height: 1.45; color: var(--texte-2); }

.courbe { flex-shrink: 0; overflow: visible; }
.courbe__zero { stroke: var(--trait-3); stroke-width: 1; stroke-dasharray: 2 3; }
.courbe__ligne { fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.courbe__point { fill: currentColor; opacity: 0.55; }
.courbe__dernier { fill: currentColor; }

/* ================================================================== créations */

.creations-personne { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--e-3); }
.carte-creation { display: flex; flex-direction: column; gap: var(--e-3); padding: var(--e-4) var(--e-5) var(--e-5); }
.carte-creation__haut { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); }
.carte-creation__tuile {
  display: grid; place-items: center; flex-shrink: 0;
  width: 44px; height: 44px; border-radius: var(--r-2);
  background: color-mix(in srgb, var(--c) 18%, transparent); color: var(--c);
}
.carte-creation__meta { font-size: var(--t-1); color: var(--texte-3); text-align: right; }
.carte-creation__titre {
  font-size: var(--t-3); font-weight: var(--g-semi); line-height: 1.33; letter-spacing: -0.01em; text-wrap: balance;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.carte-creation__objet {
  font-size: var(--t-2); line-height: 1.45; color: var(--texte-2);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.carte-creation__pied { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); }
.carte-creation__avec { font-size: var(--t-1); color: var(--texte-3); }
@media (hover: hover) {
  .carte-creation:hover .carte-creation__meta, .carte-creation:hover .carte-creation__avec { color: var(--texte-2); }   /* texte-3 sur surface-2 */
}

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

@media (pointer: coarse) {
  .provenance-revise::before, .avis__avant summary::before {
    content: ""; position: absolute;
    inset: min(0px, calc((100% - var(--cible-tactile)) / 2));
  }
  .avis__avant summary { min-height: var(--cible-tactile); }
  .lecteur-temps__glissiere { height: var(--cible-tactile); }
  .carte-personne:active, .croyance:active, .carte-creation:active { transform: scale(0.98); }
}