/* Le Fil — « chaque geste répond » (js/fil/geste.js, préfixe fg-) : le toucher, la réussite, l'arrivée et le départ, les feuilles, les changements
   de page. Règle de goût : premier plan net (aucune lueur colorée), la couleur ne vient que si elle a un sens (sapin = fait, couleur du moment),
   un trait, un passage. Tout est coupé sous prefers-reduced-motion. Jetons : --f-* de css/fil.css (aucune couleur littérale). */

[data-interface="fil"] {
  --fg-ton: var(--f-fait);
  --fg-eclat: color-mix(in srgb, var(--f-fait) 14%, transparent);
}

/* ---------- Le toucher : tout ce qui se touche répond (enfoncement bref, couleurs en fondu) ----------
   :where() = spécificité nulle : la règle d'un module (sa transition, son transform) l'emporte toujours. Exclus : le planning (.fp, ses gestes
   de glisser), et tout ce qui porte data-sans-geste (le poser sur une zone qui gère elle-même le pointeur). */
@media (prefers-reduced-motion: no-preference) {
  :where([data-interface="fil"]) :where(button, a[href], [role="button"], summary, label.fb-case, .f-lien, .f-tuile):where(:not(:disabled, [aria-disabled="true"], .fp *, [data-sans-geste], [data-sans-geste] *)) {
    transition: transform 180ms var(--f-spring), background-color 160ms ease, color 160ms ease, border-color 160ms ease, box-shadow 220ms ease, opacity 160ms ease;
  }
  :where([data-interface="fil"]) :where(button, a[href], [role="button"], summary, .f-lien, .f-tuile):where(:not(:disabled, [aria-disabled="true"], .fp *, [data-sans-geste], [data-sans-geste] *)):active {
    transform: scale(.97);
    transition-duration: 70ms;
  }
}

/* ---------- Calque de réussite (posé dans <body> au-dessus de la cible ; ne prend jamais un clic) ---------- */
.fg-calque { position: fixed; z-index: 380; pointer-events: none; contain: layout style; }
.fg-calque[data-ton="preparer"] { --fg-ton: var(--f-preparer); }
.fg-calque[data-ton="vivre"] { --fg-ton: var(--f-vivre); }
.fg-calque[data-ton="cloturer"] { --fg-ton: var(--f-cloturer); }
.fg-calque[data-ton="encre"] { --fg-ton: var(--f-encre); }
.fg-lavis { position: absolute; inset: 0; border-radius: inherit; background: color-mix(in srgb, var(--fg-ton) 16%, transparent); opacity: 0; }
.fg-coche { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); opacity: 0; overflow: visible; }
.fg-coche--angle { right: -4px; top: -4px; transform: none; }
.fg-coche-rond { fill: var(--fg-ton); stroke: none; }
.fg-coche-trait { fill: none; stroke: var(--f-sur-moment); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.fg-fil { position: absolute; inset: 0; overflow: visible; }
.fg-fil-trait { fill: none; stroke: var(--fg-ton); stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: 1; }

/* ---------- Les feuilles : le voile se pose en fondu, la poignée dit qu'on peut tirer la feuille vers le bas (téléphone) ---------- */
/* Le fond du voile vit sur un ::before dont seule l'OPACITÉ s'anime (composée par la carte graphique) : animer background-color repeignait
   tout l'écran à chaque image (relevé de la session planning, 2026-10-15). Un toucher sur le ::before vise le voile lui-même : les modules
   qui ferment « au toucher hors de la feuille » ne changent pas. */
.fb-voile, [data-interface="fil"] .f-voile { background: transparent; }
.fb-voile::before, [data-interface="fil"] .f-voile::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.fb-voile::before { background: color-mix(in srgb, var(--f-encre) 32%, transparent); }
[data-interface="fil"] .f-voile::before { background: var(--f-filet); }
@media (prefers-reduced-motion: no-preference) {
  .fb-voile::before, [data-interface="fil"] .f-voile::before { animation: fg-fondu-entree 220ms ease-out both; }
}
.fb-voile.fg-sortie, [data-interface="fil"] .f-voile.fg-sortie { pointer-events: none; }
/* Le fantôme d'une feuille fermée (js/fil/geste.js) : il ne rejoue pas l'entrée, il ne fait que partir. */
.fb-voile.fg-fantome, [data-interface="fil"] .f-voile.fg-fantome, .fg-fantome .fb-feuille, .fg-fantome .f-feuille, .fg-fantome::before { animation: none; }
@media (max-width: 899px) {
  .fb-feuille { position: relative; }
  .fb-feuille-tete, .fb-feuille--dialogue > .fb-feuille-titre { touch-action: none; }   /* la tête se tire vers le bas : le navigateur ne la fait pas défiler */
  .fb-feuille > .fb-feuille-tete:first-child, .fb-feuille--dialogue > .fb-feuille-titre:first-child { padding-top: 10px; }
  .fb-feuille::before { content: ""; position: absolute; left: 50%; top: 8px; width: 40px; height: 4px; margin-left: -20px; border-radius: 2px; background: var(--f-filet); background: color-mix(in srgb, var(--f-encre) 18%, transparent); }
}

/* ---------- Changer de page : la barre du haut, celle du bas et la colonne de gauche restent en place ; le contenu glisse dans le sens du
   geste (plus profond : depuis la droite ; retour : depuis la gauche ; même niveau : fondu). Durées courtes : pendant une transition, Chrome
   envoie tout pointeur à <html> ; le premier appui la termine et le toucher est rendu à la page (js/fil/geste.js,
   installerToucherPendantTransition). ---------- */
[data-interface="fil"] .f-top { view-transition-name: fg-haut; }
[data-interface="fil"] .f-bottom { view-transition-name: fg-bas; }
[data-interface="fil"] .f-sidebar { view-transition-name: fg-cote; }
::view-transition-group(fg-haut), ::view-transition-group(fg-bas), ::view-transition-group(fg-cote) { animation-duration: 0s; }
/* Les barres : fondu croisé natif (mix-blend plus-lighter), même durée pour l'ancienne et la nouvelle image : aucun creux d'opacité. */
::view-transition-old(fg-haut), ::view-transition-old(fg-bas), ::view-transition-old(fg-cote),
::view-transition-new(fg-haut), ::view-transition-new(fg-bas), ::view-transition-new(fg-cote) { animation-duration: 160ms; }
/* Transitions internes de l'agenda (html[data-ag-sens], posé par js/agenda/) : les barres ne bougent pas du tout. */
html[data-ag-sens]::view-transition-old(fg-haut), html[data-ag-sens]::view-transition-new(fg-haut),
html[data-ag-sens]::view-transition-old(fg-bas), html[data-ag-sens]::view-transition-new(fg-bas),
html[data-ag-sens]::view-transition-old(fg-cote), html[data-ag-sens]::view-transition-new(fg-cote) { animation: none; }
html[data-sens="avant"]::view-transition-old(root) { animation: 120ms cubic-bezier(.4, 0, 1, 1) both fg-part-gauche; }
html[data-sens="avant"]::view-transition-new(root) { animation: 240ms cubic-bezier(.2, .9, .25, 1) both fg-vient-droite; }
html[data-sens="arriere"]::view-transition-old(root) { animation: 120ms cubic-bezier(.4, 0, 1, 1) both fg-part-droite; }
html[data-sens="arriere"]::view-transition-new(root) { animation: 240ms cubic-bezier(.2, .9, .25, 1) both fg-vient-gauche; }
@keyframes fg-fondu-sortie { to { opacity: 0; } }
@keyframes fg-fondu-entree { from { opacity: 0; } }
@keyframes fg-part-gauche { to { opacity: 0; transform: translateX(-18px); } }
@keyframes fg-vient-droite { from { opacity: 0; transform: translateX(28px); } }
@keyframes fg-part-droite { to { opacity: 0; transform: translateX(18px); } }
@keyframes fg-vient-gauche { from { opacity: 0; transform: translateX(-28px); } }

@media (prefers-reduced-motion: reduce) {
  .fg-calque { display: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}
@media print { .fg-calque { display: none !important; } }