/* Le Fil — pictogrammes vivants (js/fil/motifs.js) : le langage des portes de l'accueil étendu aux hubs et aux raccourcis d'un séjour.
   Une tuile vive = un lavis de couleur, un dessin au trait, UN geste. Le geste suit --g : 0 au repos, 1 au survol, au focus, et le temps
   de l'éveil de la page (.fmv-eveil, posée puis retirée par le script : les tuiles s'animent une fois, en cascade, puis se reposent). */

/* Teintes : lavis (fond de tuile) et trait (dessin). Leurs valeurs — clair puis sombre — sont des jetons de css/tokens.css (--mv-<teinte>-l / -t, --mv-ombre) :
   la charte n'admet aucune couleur littérale hors de ce fichier. Une classe fmv-t-<teinte> les range dans --mv-l et --mv-t. */
[data-interface="fil"] .fmv-t-bleu { --mv-l: var(--mv-bleu-l); --mv-t: var(--mv-bleu-t); }
[data-interface="fil"] .fmv-t-rose { --mv-l: var(--mv-rose-l); --mv-t: var(--mv-rose-t); }
[data-interface="fil"] .fmv-t-ambre { --mv-l: var(--mv-ambre-l); --mv-t: var(--mv-ambre-t); }
[data-interface="fil"] .fmv-t-lavande { --mv-l: var(--mv-lavande-l); --mv-t: var(--mv-lavande-t); }
[data-interface="fil"] .fmv-t-sarcelle { --mv-l: var(--mv-sarcelle-l); --mv-t: var(--mv-sarcelle-t); }
[data-interface="fil"] .fmv-t-ardoise { --mv-l: var(--mv-ardoise-l); --mv-t: var(--mv-ardoise-t); }
[data-interface="fil"] .fmv-t-orchidee { --mv-l: var(--mv-orchidee-l); --mv-t: var(--mv-orchidee-t); }
[data-interface="fil"] .fmv-t-olive { --mv-l: var(--mv-olive-l); --mv-t: var(--mv-olive-t); }
[data-interface="fil"] .fmv-t-acier { --mv-l: var(--mv-acier-l); --mv-t: var(--mv-acier-t); }
[data-interface="fil"] .fmv-t-sauge { --mv-l: var(--mv-sauge-l); --mv-t: var(--mv-sauge-t); }

/* La tuile vive. */
[data-interface="fil"] .f-tuile--vive {
  --g: 0;
  background: var(--mv-l); border-color: transparent; font-weight: 600;
  transition: transform .45s var(--f-spring), box-shadow .45s var(--f-spring);
}
[data-interface="fil"] .f-tuile--vive:hover,
[data-interface="fil"] .f-tuile--vive:focus-visible { --g: 1; background: var(--mv-l); transform: translateY(-3px); box-shadow: var(--mv-ombre); }
[data-interface="fil"] .f-tuile--vive:active { transform: scale(.98); }
[data-interface="fil"] .fmv-eveil .f-tuile--vive { --g: 1; }
[data-interface="fil"] .f-tuile--vive .f-ico { color: var(--mv-t); transition: scale .5s var(--f-spring); scale: calc(1 + var(--g) * .16); }

/* Le dessin. `.fmv-hote` : l'enveloppe décorative du SVG (aria-hidden), sans boîte propre. */
[data-interface="fil"] .fmv-hote { display: contents; }
[data-interface="fil"] .fmv { width: 48px; height: 38px; flex: none; display: block; overflow: visible; fill: none; stroke: var(--mv-t); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
[data-interface="fil"] .fmv--grand { width: 84px; height: 66px; }
[data-interface="fil"] .fmv .mv-p { fill: var(--mv-t); stroke: none; }
[data-interface="fil"] .fmv .mv-f { fill: var(--f-surface); }

/* Les gestes. Chaque classe porte sa propriété : elles se combinent sur un même élément. */
[data-interface="fil"] .fmv [class*="g-"] { transition-delay: calc(var(--t, 0s) + var(--mv-rang, 0) * 45ms * var(--mv-cascade, 0)); }
[data-interface="fil"] .fmv .g-trace { stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--g)); transition-property: stroke-dashoffset; transition-duration: .6s; transition-timing-function: cubic-bezier(.6, 0, .2, 1); }
[data-interface="fil"] .fmv .g-tourne { transform-box: view-box; transform-origin: var(--o, 28px 22px); rotate: calc(var(--g) * var(--a, 180deg)); transition-property: rotate, translate; transition-duration: .75s; transition-timing-function: var(--f-spring); }
[data-interface="fil"] .fmv .g-monte { translate: 0 calc(var(--g) * var(--dy, -6px)); transition-property: translate, rotate, opacity; transition-duration: .6s; transition-timing-function: var(--f-spring); }
[data-interface="fil"] .fmv .g-glisse { translate: calc(var(--g) * var(--dx, 6px)) 0; transition-property: translate; transition-duration: .6s; transition-timing-function: var(--f-spring); }
[data-interface="fil"] .fmv .g-glisse.g-monte { translate: calc(var(--g) * var(--dx, 6px)) calc(var(--g) * var(--dy, -6px)); }
[data-interface="fil"] .fmv .g-grandit { transform-box: view-box; transform-origin: var(--o, 28px 22px); scale: calc(1 + var(--g) * var(--s, .25)); transition-property: scale; transition-duration: .55s; transition-timing-function: var(--f-spring); }
[data-interface="fil"] .fmv .g-pousse { transform-box: view-box; transform-origin: var(--o, 28px 38px); scale: 1 calc(1 + var(--g) * var(--s, .6)); transition-property: scale; transition-duration: .6s; transition-timing-function: var(--f-spring); }
[data-interface="fil"] .fmv .g-parait { opacity: var(--g); transition-property: opacity, translate; transition-duration: .35s, .6s; }
[data-interface="fil"] .fmv .g-part { opacity: calc(1 - var(--g)); transition-property: opacity; transition-duration: .25s; }
[data-interface="fil"] .fmv-eveil { --mv-cascade: 1; }

/* Les grilles de tuiles vives : une rangée compacte au téléphone, des tuiles hautes au bureau. */
[data-interface="fil"] .f-tuiles--vives { gap: 10px; }
[data-interface="fil"] .f-tuiles--vives .f-tuile--vive { min-height: 64px; padding: 10px 14px; border-radius: 18px; }
@media (min-width: 900px) {
  [data-interface="fil"] .f-tuiles--vives { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 12px; }
  [data-interface="fil"] .f-tuiles--vives .f-tuile--vive { flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 14px; min-height: 122px; padding: 16px; border-radius: 20px; }
  [data-interface="fil"] .f-tuiles--vives .fmv { width: 56px; height: 44px; }
}

/* Au téléphone, la rangée reste compacte mais le motif rétrécit pour laisser aux libellés la place de leur plus long mot (« Questionnaires », « Bibliothèque ») : sans cela
   overflow-wrap les scinderait en deux. Sous 380 px (deux colonnes de 160 px) la tuile s'empile : le motif au-dessus, le libellé dessous, sur toute la largeur. */
@media (max-width: 899px) {
  [data-interface="fil"] :is(.f-tuiles--vives, .f-raccourcis) .f-tuile--vive { gap: 8px; padding-inline: 12px 10px; }
  [data-interface="fil"] :is(.f-tuiles--vives, .f-raccourcis) .fmv { width: 36px; height: 28px; }
}
@media (max-width: 379px) {
  [data-interface="fil"] :is(.f-tuiles--vives, .f-raccourcis) .f-tuile--vive { flex-direction: column; align-items: flex-start; justify-content: center; gap: 6px; min-height: 88px; padding: 12px; }
  [data-interface="fil"] :is(.f-tuiles--vives, .f-raccourcis) .fmv { width: 44px; height: 35px; }
}

/* Une ligne de domaine teintée : le pictogramme prend la couleur de son domaine. */
[data-interface="fil"] .f-ligne--teinte .f-ico:first-child { color: var(--mv-t); }

@media (prefers-reduced-motion: reduce) {
  [data-interface="fil"] .f-tuile--vive, [data-interface="fil"] .f-tuile--vive .f-ico, [data-interface="fil"] .fmv * { transition: none !important; }
}