/* Vues Fil et Scène : styles propres (jetons de css/jetons.css seulement ; voir DESIGN.md).
   Les cartes, bulles, pensées, commandes et séparateurs viennent de composants.css : on ne les redessine pas,
   on les pose. */

/* ================================================================== fil */

.fil { display: flex; flex-direction: column; }
.fil__stories { margin-bottom: var(--e-6); }

.fil-cycle { display: flex; flex-direction: column; scroll-margin-top: var(--e-4); }
.fil-cycle + .fil-cycle { margin-top: var(--e-8); }
.fil-cycle__chapitre { margin-bottom: var(--e-3); }
@media (max-width: 899.98px) {
  .fil__stories { margin-bottom: var(--e-5); }
  .fil-cycle { scroll-margin-top: calc(var(--h-barre-haut) + var(--zs-haut) + var(--e-3)); }
  .fil-cycle + .fil-cycle { margin-top: var(--e-7); }
}

/* Cycle sans chapitre (le récit s'écrit encore) : la carte de chapitre, sans lien ni chiffre fantôme. */
.fil-tete-cycle { cursor: default; }
.fil-tete-cycle:hover { background: var(--surface-1); }
.fil-tete-cycle:active { transform: none; }
.fil-tete-cycle .chapitre__titre { color: var(--texte-2); }

/* Entrée d'une scène : ouvre la conversation. Sur l'axe des cartes : l'icône dans la colonne d'avatar. */
.fil-scene {
  position: relative;
  display: flex; align-items: center; gap: var(--e-3);
  min-height: var(--cible-tactile); margin-top: var(--e-2);
  padding: var(--e-1) calc(var(--retrait) + 1px);
  border-radius: var(--r-2);
  color: var(--texte);
  transition: background-color var(--d-rapide) var(--c-standard), transform var(--d-normale) var(--c-sortie);
}
.fil-scene:active { background: var(--appui); transform: scale(0.99); }
.fil-scene__icone {
  display: grid; place-items: center; flex-shrink: 0;
  width: var(--col-avatar); height: var(--col-avatar); border-radius: 50%;
  background: var(--surface-2); color: var(--texte-2);
  transition: background-color var(--d-rapide), color var(--d-rapide);
}
.fil-scene__textes { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--e-2); }
.fil-scene__titre { font-size: var(--t-2); font-weight: var(--g-semi); line-height: var(--i-ui); letter-spacing: -0.005em; }
.fil-scene__meta { font-size: var(--t-1); line-height: var(--i-ui); color: var(--texte-3); }
.fil-scene__heures { white-space: nowrap; }
.fil-scene__pile { flex-shrink: 0; --bord-pile: var(--fond); }
.fil-scene__chevron { flex-shrink: 0; color: var(--texte-3); transition: transform var(--d-rapide) var(--c-sortie), color var(--d-rapide); }
@media (hover: hover) {
  .fil-scene:hover { background: var(--survol); }
  .fil-scene:hover .fil-scene__meta { color: var(--texte-2); }
  .fil-scene:hover .fil-scene__icone { background: var(--surface-3); color: var(--texte); }
  .fil-scene:hover .fil-scene__chevron { color: var(--texte-2); transform: translateX(2px); }
}
.fil-scene:active .fil-scene__meta { color: var(--texte-2); }
@media (max-width: 899.98px) {
  .fil-scene__pile { display: none; }
}

/* Liste virtuelle (grands mondes) : chaque élément porte son propre espace bas. */
.fil-virtuel__chapitre { padding-bottom: var(--e-3); scroll-margin-top: var(--e-4); }
.fil-virtuel__evt { padding-bottom: var(--e-2); }
.fil-virtuel__evt--ligne { padding-bottom: var(--e-1); }
.fil-virtuel__scene { padding-bottom: var(--e-1); }
.fil-virtuel .jour { position: relative; top: auto; }
.fil-virtuel__debut { padding-top: var(--e-8); }
/* Jour flottant : un repère collant de hauteur nulle, le séparateur posé dessus (pas de saut de mise en page). */
.fil-virtuel__cadre { position: relative; }
.fil-virtuel__flottant { position: sticky; top: 0; z-index: var(--z-collant); height: 0; pointer-events: none; }
.fil-virtuel__flottant .jour { position: absolute; top: 0; left: 0; right: 0; }
@media (max-width: 899.98px) {
  .fil-virtuel__debut { padding-top: var(--e-7); }
  .fil-virtuel__flottant { top: calc(var(--h-barre-haut) + var(--zs-haut)); }
  .fil-virtuel__flottant .jour { top: 0; }
}

/* ================================================================== story d'un personnage (panneau) */

.story-panneau { display: flex; flex-direction: column; gap: var(--e-6); min-height: 100%; }
/* Profil en colonne : l'avatar en haut à gauche, à côté des boutons flottants du panneau ; les textes dessous,
   sur toute la largeur (aucun ne passe sous les boutons). */
.story-panneau__tete { display: flex; flex-direction: column; align-items: flex-start; gap: var(--e-4); }
.story-panneau__titres { display: flex; flex-direction: column; gap: var(--e-1); min-width: 0; }
.story-panneau__cycle { font-size: var(--t-1); font-weight: var(--g-semi); color: var(--texte-2); }
.story-panneau__nom { font-size: var(--t-5); font-weight: var(--g-noir); line-height: var(--i-serre); letter-spacing: -0.028em; color: var(--c); }
.story-panneau__role { font-size: var(--t-2); line-height: var(--i-ui); color: var(--texte-2); }
.story-panneau__section { display: flex; flex-direction: column; gap: var(--e-2); }
.story-panneau__intitule { font-size: var(--t-3); font-weight: var(--g-semi); line-height: var(--i-titre); letter-spacing: -0.01em; color: var(--texte); }
.story-panneau__scenes { display: flex; flex-direction: column; margin-inline: calc(-1 * var(--retrait)); }
.story-panneau__evenements { display: flex; flex-direction: column; gap: var(--e-2); }
/* Un jour, puis ses moments : la date une seule fois, les cartes ne portent que l'heure. */
.story-panneau__jour { display: flex; flex-direction: column; gap: var(--e-2); }
.story-panneau__jour + .story-panneau__jour { margin-top: var(--e-3); }
.story-panneau__date { padding: 0 calc(var(--retrait) + 1px); font-size: var(--t-1); font-weight: var(--g-semi); line-height: var(--i-ui); color: var(--texte-2); }
.story-panneau__ouvrir {
  position: sticky; bottom: 0; z-index: 2;
  align-self: stretch; margin-top: auto;
  box-shadow: var(--ombre-accent), 0 -12px 24px 8px color-mix(in srgb, var(--surface-1) 85%, transparent);
}

/* ================================================================== scène */

.scene-page { display: flex; flex-direction: column; }
.scene-page .messagerie { max-width: none; }

.scene-tete {
  display: flex; flex-direction: column; align-items: center; gap: var(--e-3);
  padding: var(--e-2) 0 var(--e-4);
  text-align: center;
}
.scene-tete__sur { display: flex; align-items: center; gap: var(--e-2); font-size: var(--t-1); font-weight: var(--g-semi); color: var(--texte-3); }
.scene-tete__chapitre { position: relative; color: var(--texte-2); }
.scene-tete__avatars { display: flex; padding: var(--e-1) 0; }
.scene-tete__avatar { position: relative; display: inline-flex; border-radius: 50%; box-shadow: 0 0 0 3px var(--fond); }
.scene-tete__avatar + .scene-tete__avatar { margin-left: calc(var(--e-3) * -1); }
.scene-tete__titre {
  max-width: 18em;
  font-size: var(--t-5); font-weight: var(--g-noir); line-height: var(--i-serre); letter-spacing: -0.028em;
  text-wrap: balance;
}
.scene-tete__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-2);
}
.scene-tete__noms { font-size: var(--t-2); line-height: var(--i-ui); color: var(--texte-2); text-wrap: balance; }
.scene-tete__exterieurs { color: var(--texte-2); }
@media (min-width: 900px) {
  .scene-tete { padding-top: var(--e-4); }
  .scene-tete__titre { font-size: var(--t-6); letter-spacing: var(--l-grand); }
}

/* Repère de temps : le jour au premier, puis l'heure après un silence. */
.msg-temps { text-align: center; }
.msg-temps__jour { color: var(--texte-2); }

/* Fait hors scène rattaché à la scène : à part de la conversation, filet en tirets. */
.msg-hors-scene {
  display: flex; flex-direction: column; gap: var(--e-1);
  margin: var(--e-3) 0 var(--e-2);
  padding: var(--e-2) var(--e-4) var(--e-4);
  border: 1px dashed var(--trait-3);
  border-radius: var(--r-3);
}
.scene-page__apres .msg-hors-scene { margin-top: var(--e-6); }
.msg-hors-scene__tete {
  position: relative;
  display: inline-flex; align-items: center; gap: var(--e-2); align-self: flex-start;
  min-height: 32px;
  font-size: var(--t-1); font-weight: var(--g-semi); color: var(--texte-2);
  transition: color var(--d-rapide);
}
.msg-hors-scene__libelle { color: var(--texte); }
.msg-hors-scene__tete .icone { color: var(--texte-3); }
@media (hover: hover) { .msg-hors-scene__tete:hover .msg-hors-scene__libelle { text-decoration: underline; text-underline-offset: 3px; } }
.msg-hors-scene__texte { font-size: var(--t-2); line-height: 1.5; color: var(--texte-2); }

/* Pensée : ses deux bulles de pensée pointent vers l'avatar, posé au bas du groupe. Une pensée suivie d'un autre
   message du même groupe n'est pas à côté de l'avatar : pas de bulles qui flottent dans le vide. */
.msg-groupe .pensee:not(.dernier)::before, .msg-groupe .pensee:not(.dernier)::after { display: none; }

/* Interlocuteur extérieur : bulles grises (fondBulle de la teinte du monde), nom en clair, jamais un lien. */
.msg-groupe--exterieur .groupe__nom { color: var(--texte-2); }

/* Commande : la carte du socle, en deux étages. En tête, à côté de la tuile, ce qu'elle est devenue (sur-titre,
   création, statut) ; dessous, sur toute la largeur, ce qui a été demandé : la description et chaque champ, jamais
   coupés (c'est une parole du personnage). Deux classes : passe avant la grille du socle, iPhone compris. */
.commande.msg-commande {
  grid-template-columns: 44px minmax(0, 1fr) auto;
  grid-template-areas: "tuile tete chevron" "corps corps corps";
  align-items: start; row-gap: var(--e-3);
}
.commande.msg-commande .commande__chevron { align-self: center; }
.msg-commande__tete { grid-area: tete; display: flex; flex-direction: column; align-items: flex-start; gap: var(--e-0); min-width: 0; }
.msg-commande__tete .commande__titre { display: block; -webkit-line-clamp: unset; overflow: visible; }
.msg-commande__tete .commande__statut { margin-top: var(--e-1); }
.msg-commande__sur { font-size: var(--t-1); font-weight: var(--g-semi); line-height: var(--i-ui); color: var(--c); }
.msg-commande__corps {
  grid-area: corps;
  display: flex; flex-direction: column; gap: var(--e-1); min-width: 0;
  padding-top: var(--e-3);
  border-top: 1px solid var(--trait);
}
.msg-commande__corps .commande__texte {
  display: block; -webkit-line-clamp: unset; overflow: visible;
  margin-bottom: var(--e-1);
  font-size: var(--t-2); line-height: 1.45; color: var(--texte);
}
.msg-commande__champ { font-size: var(--t-1); line-height: 1.45; color: var(--texte-2); }
.msg-commande__cle { font-weight: var(--g-semi); color: var(--texte); }

/* Action : centrée, en italique, petit avatar ; la création qu'elle emploie en dessous. */
.msg-action {
  align-self: center;
  display: flex; flex-direction: column; align-items: center; gap: var(--e-2);
  max-width: 520px; margin: var(--e-3) 0 var(--e-1);
  padding: 0 var(--e-4);
}
.msg-action__ligne {
  display: flex; align-items: flex-start; justify-content: center; gap: var(--e-2);
  text-align: center;
  font-size: var(--t-2); font-style: italic; line-height: 1.45; color: var(--texte-2);
}
.msg-action__ligne > .avatar, .msg-action__ligne > .icone { flex-shrink: 0; margin-top: 1px; }
.msg-action__ligne > .icone { color: var(--texte-3); }

.msg-creation {
  position: relative;
  display: inline-flex; align-items: center; gap: var(--e-2);
  max-width: 100%; min-height: 32px;
  padding: var(--e-1) var(--e-3) var(--e-1) var(--e-1);
  border-radius: var(--r-rond);
  background: var(--surface-1);
  border: 1px solid var(--trait-2);
  font-size: var(--t-1); font-weight: var(--g-semi); font-style: normal; line-height: var(--i-ui); color: var(--texte);
  transition: background-color var(--d-rapide);
}
.msg-creation__icone {
  display: grid; place-items: center; flex-shrink: 0;
  width: 24px; height: 24px; border-radius: 50%;
  background: color-mix(in srgb, var(--c) 20%, transparent); color: var(--c);
}
.msg-creation__titre { min-width: 0; text-align: left; }
.msg-creation--bulle { margin: var(--e-1) 0 var(--e-1); }
@media (hover: hover) { .msg-creation:hover { background: var(--surface-2); } }

/* Sortie d'un outil : l'outil parle comme un membre du groupe, ses champs à la lettre. */
.msg-outil {
  display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: end; column-gap: var(--e-2);
  margin-top: var(--e-3);
}
.msg-outil__tuile {
  display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: var(--r-1);
  background: var(--surface-3); color: var(--texte);
}
.msg-outil__corps { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.msg-outil__tete { display: flex; align-items: baseline; gap: var(--e-2); max-width: min(80%, 520px); padding: 0 var(--e-3) var(--e-1); font-size: var(--t-1); }
.msg-outil__nom { position: relative; color: var(--texte); font-weight: var(--g-semi); }
@media (hover: hover) { a.msg-outil__nom:hover { text-decoration: underline; text-underline-offset: 3px; } }
.msg-outil__heure { flex-shrink: 0; color: var(--texte-3); }
.msg-outil__bulle {
  max-width: min(80%, 520px);
  padding: var(--e-2) var(--e-3) var(--e-3);
  border-radius: var(--r-4); border-bottom-left-radius: 6px;
  background: var(--surface-2);
  border: 1px solid var(--trait-2);
  animation: monter-entree var(--d-normale) var(--c-sortie) backwards;
}
.msg-outil__message { font-size: var(--t-2); line-height: 1.45; color: var(--texte); }
.msg-outil__champs { display: flex; flex-wrap: wrap; gap: var(--e-1); margin-top: var(--e-2); }
.msg-outil__champ {
  display: inline-flex; align-items: baseline; gap: var(--e-1);
  padding: var(--e-0) var(--e-2);
  border-radius: var(--r-1);
  background: var(--surface-3);
  font-size: var(--t-1); line-height: var(--i-ui);
}
.msg-outil__champ dt { color: var(--texte-2); }
.msg-outil__champ dd { color: var(--texte); font-weight: var(--g-semi); }
.msg-outil__bulle > .texte-riche { font-size: var(--t-2); line-height: 1.45; }

/* Événement de la scène sans bloc (une décision) : sa carte du fil, à son heure. */
.msg-evenement { margin: var(--e-4) 0 var(--e-2); }

/* Scène précédente et suivante */
.scene-suite {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--e-3);
  margin-top: var(--e-8); padding-top: var(--e-5);
  border-top: 1px solid var(--trait);
}
.scene-suite__lien {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--e-1);
  min-width: 0; padding: var(--e-4);
  border-radius: var(--r-3);
  background: var(--surface-1);
  border: 1px solid var(--trait);
  transition: background-color var(--d-rapide), transform var(--d-normale) var(--c-sortie);
}
.scene-suite__lien--suiv { grid-column: 2; align-items: flex-end; text-align: right; }
.scene-suite--liste { grid-template-columns: minmax(0, 1fr); }
.scene-suite--liste .scene-suite__lien--suiv { grid-column: 1; }
.scene-suite__lien:active { transform: scale(0.98); }
.scene-suite__sens { display: inline-flex; align-items: center; gap: var(--e-1); font-size: var(--t-1); font-weight: var(--g-semi); color: var(--texte-2); }
.scene-suite__titre { font-size: var(--t-3); font-weight: var(--g-semi); line-height: 1.3; letter-spacing: -0.01em; text-wrap: balance; }
.scene-suite__meta { display: inline-flex; align-items: center; gap: var(--e-1); font-size: var(--t-1); color: var(--texte-3); }
@media (hover: hover) {
  .scene-suite__lien:hover { background: var(--surface-2); }
  .scene-suite__lien:hover .scene-suite__meta { color: var(--texte-2); }
}
@media (max-width: 899.98px) {
  .scene-suite { grid-template-columns: minmax(0, 1fr); margin-top: var(--e-7); }
  .scene-suite__lien--suiv { grid-column: 1; }
  .scene-suite__vide { display: none; }
}

/* ================================================================== cible visée (?e=, ?l=) */

@keyframes viser {
  0%, 45% { box-shadow: 0 0 0 2px var(--focus), 0 0 28px 2px color-mix(in srgb, var(--focus) 40%, transparent); }
  100% { box-shadow: 0 0 0 2px transparent, 0 0 0 0 transparent; }
}
.cible-visee { animation: viser calc(var(--d-lente) * 8) var(--c-standard) both; }

/* ================================================================== au doigt : 44 px pour les petites cibles */

@media (pointer: coarse) {
  .scene-tete__chapitre::before, .msg-creation::before, .msg-outil__nom::before, .msg-hors-scene__tete::before {
    content: ""; position: absolute;
    inset: min(0px, calc((100% - var(--cible-tactile)) / 2));
  }
}

/* ================================================================== interlocuteur extérieur */

.avatar-exterieur {
  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);
  box-shadow: inset 0 0 0 1px var(--trait-2);
}

/* ================================================================== libellé de la réglette sur le fil

   Demande à l'intégrateur (composants.css, .reglette__libelle) : sous le verre de la réglette (pilule flottante
   sur ordinateur, rangée de la barre d'onglets sur iPhone), au-dessus d'une carte au dégradé (héros 5), le
   libellé du cran en --texte-2 tombe à 3,9:1 (#A1A1AA sur #5C3B24). Le fil est la seule vue où ces cartes passent
   sous la réglette : il écrit le libellé en --texte (8,7:1) en attendant que composants.css le fasse partout. */
.coque[data-section="fil"] .reglette__libelle { color: var(--texte); }

/* ================================================================== contrôle (verifier)

   Le temps de compter les six crans (apparitionsImmediates), séparateurs de jour et apparitions changent sans
   transition : rien à attendre. Jamais posé en dehors d'un contrôle. */
.fil.fil--immediat .jour, .fil.fil--immediat .apparition, .fil.fil--immediat .apparition__pli > div { transition: none; }