/* Le Fil — la météo du séjour (js/meteo/ : pictos.js, vue.js). Préfixe fme-. Jetons --f-* (css/fil.css) ; aucune couleur en dur.
   Trois formes : la bande d'un jour (.fme-bande : matin, après-midi, soirée), les ciels en petit dans un en-tête de jour (.fme-mini), le signe d'un créneau dehors sous la
   pluie ou le vent (.fme-signe). Sur la frise du Fil, le ciel du jour ferme l'étiquette de l'anneau (.fbv-etiq-ciel).
   Couleurs des dessins : le trait suit le texte ; le soleil prend --fme-soleil (à défaut --f-attention), l'eau --fme-eau (à défaut --f-equipe-a), le nuage posé devant
   le soleil se remplit de --fme-fond (à défaut la surface). Le geste d'un dessin ne joue que dans .fme-vif ou au survol. */

/* ---------- Les dessins ---------- */
.fme-ico { display: inline-flex; flex: none; align-items: center; justify-content: center; line-height: 0; }
.fme-picto { display: block; overflow: visible; }
.fme-picto .fme-soleil { stroke: var(--fme-soleil, var(--f-attention)); }
.fme-picto .fme-soleil circle, .fme-picto .fme-lune { fill: var(--fme-soleil, var(--f-attention)); fill-opacity: .2; }
.fme-picto .fme-lune { stroke: var(--fme-soleil, var(--f-attention)); }
.fme-picto .fme-eau { stroke: var(--fme-eau, var(--f-equipe-a)); }
.fme-picto .fme-eau--forte { stroke-width: 2.2; }
.fme-picto .fme-flocon { stroke-width: 2.6; }
.fme-picto .fme-eclair { stroke: var(--fme-soleil, var(--f-attention)); }
.fme-picto .fme-fond { fill: var(--fme-fond, var(--f-surface)); }
.fme-picto .fme-rayons { transform-box: view-box; transform-origin: 12px 12px; }
.fme-picto .fme-rayons--petit { transform-origin: 8.5px 8.5px; }

.fme-vif .fme-rayons, .fme-mini:hover .fme-rayons, .fbv-anneau:hover .fme-rayons { animation: fme-tourne 26s linear infinite; }
.fme-vif .fme-nuage, .fme-mini:hover .fme-nuage, .fbv-anneau:hover .fme-nuage { animation: fme-derive 7s ease-in-out infinite alternate; }
.fme-vif .fme-goutte, .fme-mini:hover .fme-goutte, .fme-signe:hover .fme-goutte, .fbv-anneau:hover .fme-goutte { animation: fme-tombe 1.25s linear infinite; }
.fme-vif .fme-flocon, .fme-mini:hover .fme-flocon, .fme-signe:hover .fme-flocon { animation: fme-neige 2.6s linear infinite; }
.fme-vif .fme-eclair, .fme-mini:hover .fme-eclair, .fme-signe:hover .fme-eclair { animation: fme-eclair 3.4s steps(1, end) infinite; }
.fme-vif .fme-brume, .fme-mini:hover .fme-brume { animation: fme-brume 5.5s ease-in-out infinite alternate; }
.fme-picto .fme-goutte--2, .fme-picto .fme-flocon--2 { animation-delay: -.45s; }
.fme-picto .fme-goutte--3, .fme-picto .fme-flocon--3 { animation-delay: -.85s; }
.fme-picto .fme-brume--2 { animation-direction: alternate-reverse; }
@keyframes fme-tourne { to { transform: rotate(360deg); } }
@keyframes fme-derive { from { transform: translateX(-.7px); } to { transform: translateX(.9px); } }
@keyframes fme-tombe { 0% { transform: translate(.5px, -1.4px); opacity: 0; } 25% { opacity: 1; } 75% { opacity: 1; } 100% { transform: translate(-.6px, 1.6px); opacity: 0; } }
@keyframes fme-neige { 0% { transform: translateY(-1.5px); opacity: 0; } 30% { opacity: 1; } 80% { opacity: 1; } 100% { transform: translate(.8px, 2px); opacity: 0; } }
@keyframes fme-eclair { 0%, 100% { opacity: 1; } 8% { opacity: .15; } 14% { opacity: 1; } 20% { opacity: .3; } 26% { opacity: 1; } }
@keyframes fme-brume { from { transform: translateX(-1.4px); } to { transform: translateX(1.4px); } }

/* ---------- La bande d'un jour ---------- */
.fme-bande { display: grid; gap: 6px; min-width: 0; }
.fme-moments { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.fme-moment { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 10px 14px; border: 1px solid var(--f-filet); border-radius: 16px; background: var(--f-surface); color: var(--f-encre); }
.fme-moment .fme-ico { color: var(--f-encre-2); }
.fme-moment-corps { display: grid; gap: 2px; min-width: 0; }
.fme-moment-tete { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.fme-moment-nom { color: var(--f-encre-2); font: 600 12px/1.2 Inter, system-ui, sans-serif; letter-spacing: .02em; }
.fme-moment-t { font: 600 18px/1.1 Inter, system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.fme-moment-detail { color: var(--f-encre-2); font: 400 13px/1.3 Inter, system-ui, sans-serif; overflow-wrap: anywhere; }
.fme-moment[data-rude] .fme-moment-detail { color: var(--f-encre); font-weight: 600; }
.fme-moment--vide { flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; border-style: dashed; background: transparent; }
.fme-attente { margin: 0; padding: 10px 14px; border: 1px dashed var(--f-filet); border-radius: 16px; color: var(--f-encre-2); font: 400 14px/1.4 Inter, system-ui, sans-serif; }
.fme-source { margin: 0 2px; color: var(--f-encre-2); font: 400 12px/1.4 Inter, system-ui, sans-serif; }
.fme-source a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.fme-source a:hover, .fme-source a:focus-visible { color: var(--f-encre); }
.fme-source--pied { text-align: right; }

/* ---------- Les ciels du jour, en petit (en-tête d'une colonne de jour) ---------- */
.fme-mini { display: inline-flex; align-items: center; justify-content: center; gap: 3px; color: var(--f-encre-2); line-height: 0; }
.fme-mini .fme-ico[data-rude] { color: var(--f-encre); }
.fme-mini-t { margin-left: 3px; color: var(--f-encre-2); font: 600 11px/1 Inter, system-ui, sans-serif; font-variant-numeric: tabular-nums; }

/* ---------- Le signe d'un créneau dehors sous la pluie, la neige, l'orage ou le vent ---------- */
.fme-signe.fme-signe { gap: 5px; color: var(--f-equipe-a); line-height: 1; }   /* doublé : passe devant la couleur neutre d'un signe du planning, quel que soit l'ordre des feuilles */
.fme-signe--mot { flex: none; padding: 2px 9px 2px 6px; border: 1px solid currentColor; border-radius: 99px; }
.fme-signe-mot { color: var(--f-encre); font: 600 12px/1.4 Inter, system-ui, sans-serif; white-space: nowrap; }
.fme-note.fme-note { display: flex; align-items: center; gap: 8px; color: var(--f-encre); }

/* ---------- Sur la frise du Fil : le ciel du jour, en fin d'étiquette (l'étiquette est claire dans les deux thèmes) ---------- */
.fbv-etiq-ciel { display: inline-flex; align-self: center; flex: none; margin-left: 6px; line-height: 0; font-style: normal; --fme-fond: var(--bv-blanc); }

@media (max-width: 560px) {
  .fme-moments { gap: 6px; }
  .fme-moment { flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; border-radius: 14px; text-align: center; }
  .fme-moment-corps { justify-items: center; }
  .fme-moment-tete { flex-direction: column; align-items: center; gap: 2px; }
  .fme-moment-detail { font-size: 12px; }
  .fme-moment--vide { align-items: center; }
}
@media (prefers-reduced-motion: reduce) {
  .fme-picto * { animation: none !important; }
}