/* Fil du jour — le signe distinctif (DESIGN.md §3) */
.ribbon { margin-top: var(--sp-6); overflow-x: clip; }
.ribbon-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3); }
.ribbon-title-row { display: flex; align-items: baseline; gap: var(--sp-3); }
.ribbon-days { display: inline-flex; align-items: center; gap: 2px; opacity: .55; transition: opacity .15s; }
.ribbon:hover .ribbon-days, .ribbon-days:focus-within { opacity: 1; }
.ribbon-nav { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: var(--ardoise); }
.ribbon-nav:hover:not(:disabled), .ribbon-nav:focus-visible { color: var(--graphite); background: var(--surface-2); }
.ribbon-nav:disabled { opacity: .3; cursor: default; }
.ribbon-day { min-width: 78px; text-align: center; font-size: 12px; color: var(--ardoise); }
.ribbon-legend { display: flex; gap: var(--sp-4); font-size: 12px; color: var(--ardoise); }
.ribbon-legend i { display: inline-block; vertical-align: middle; margin-right: 6px; }
.lg-task { width: 7px; height: 7px; rotate: 45deg; border: 1.5px solid var(--graphite); }
.lg-mail { width: 7px; height: 7px; border-radius: 50%; background: var(--ambre); }
.track { position: relative; height: 112px; margin-top: 8px; }
.track .events { position: absolute; inset: 16px 0 auto 0; height: 40px; }
.ribbon-empty { position: absolute; top: 26px; left: 0; right: 0; text-align: center; font-size: 13px; color: var(--ardoise); }
.ribbon-event {
  position: absolute; top: 0; height: 40px; padding: 5px 8px; border-radius: var(--r-ctrl);
  background: color-mix(in oklab, var(--c) 14%, var(--surface)); border-left: 3px solid var(--c);
  overflow: hidden; white-space: nowrap; font-size: 12px; line-height: 1.25; transition: background-color .15s;
}
.ribbon-event:hover { background: color-mix(in oklab, var(--c) 24%, var(--surface)); }
.ribbon-event b { display: block; font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.ribbon-event .mono { display: block; font-size: 11px; color: var(--ardoise); overflow: hidden; text-overflow: ellipsis; }
.ribbon-event.past { opacity: .45; }
.axis { position: absolute; left: 0; right: 0; top: 72px; height: 2px; background: var(--trait); border-radius: 2px; }
.axis-past { position: absolute; left: 0; top: 0; height: 2px; background: var(--ardoise); border-radius: 2px; transform-origin: left center; }
.hours { position: absolute; left: 0; right: 0; top: 92px; height: 14px; }
.hours span { position: absolute; translate: -50% 0; font: 400 11px/1 var(--f-donnees); color: var(--ardoise); }
.hours span.first { translate: 0 0; }
.hours span.last { translate: -100% 0; }
.ribbon-marker { position: absolute; top: 68px; translate: -50% 0; width: 10px; height: 10px; display: grid; place-items: center; }
.ribbon-marker.m-task::before { content: ""; width: 8px; height: 8px; rotate: 45deg; border: 1.5px solid var(--graphite); background: var(--surface); }
.ribbon-marker.m-mail::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ambre); box-shadow: 0 0 0 2px var(--porcelaine); }
.ribbon-marker .tip { position: absolute; bottom: 18px; left: 50%; translate: -50% 0; padding: 4px 8px; border-radius: var(--r-ctrl); background: var(--graphite); color: var(--porcelaine); font-size: 12px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .12s; z-index: 5; }
.ribbon-marker:hover .tip, .ribbon-marker:focus-visible .tip { opacity: 1; }
.ribbon-marker.edge-l .tip { left: -4px; translate: 0 0; }
.ribbon-marker.edge-r .tip { left: auto; right: -4px; translate: 0 0; }
.now-cursor { position: absolute; top: 14px; height: 59px; width: 0; z-index: 2; } /* s'arrête au milieu du fil (73 px) */
.now-cursor::before { content: ""; position: absolute; left: -1px; top: 0; bottom: 0; width: 2px; background: var(--ambre); border-radius: 2px; }
.now-cursor::after { content: ""; position: absolute; left: -5px; bottom: -5px; width: 10px; height: 10px; border-radius: 50%; background: var(--ambre); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ambre) 25%, transparent); }
.now-label { position: absolute; top: -16px; left: 0; translate: -50% 0; font: 500 11px/1 var(--f-donnees); color: var(--ambre); background: var(--porcelaine); padding: 2px 4px; }

.nownext { display: none; }

@media (max-width: 1179px) { .ribbon-legend { display: none; } }
@media (max-width: 767px) {
  .ribbon { display: none; }
  .nownext { display: block; margin-top: var(--sp-4); background: var(--surface); border: 1px solid var(--trait); border-radius: var(--r-widget); padding: var(--sp-3) var(--sp-4); }
  .nownext .eyebrow { margin: 4px 0 8px; }
}

/* « Ensuite » (mobile) */
.nn-row { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: var(--sp-3); padding: 8px 0; align-items: baseline; }
.nn-row + .nn-row { border-top: 1px solid var(--trait); }
.nn-row .when { font: 500 13px/1 var(--f-donnees); }
.nn-row.next .when { color: var(--ambre); }
.nn-row .what b { font-weight: 500; display: block; }
.nn-row .what span { font-size: 12px; color: var(--ardoise); }
.lg-event { width: 12px; height: 7px; border-radius: 2px; background: color-mix(in oklab, var(--cal-pro) 30%, var(--surface)); box-shadow: inset 2px 0 0 var(--cal-pro); }
.nn-row[style*="--c"] .what { box-shadow: inset 2px 0 0 var(--c); padding-left: 8px; }
.nn-row.now .when { color: var(--graphite); }
.nownext .eyebrow + .nn-row { border-top: 0; }
.ribbon-event.stacked { padding: 2px 6px; display: flex; align-items: center; gap: 6px; }
.ribbon-event.stacked .mono { display: none; }

/* Rendez-vous en visio : rejoindre en un clic */
.nn-row:has(.nn-join) { grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; }
.nn-join { height: 30px; gap: 6px; padding: 0 10px; font-size: 13px; }
.nn-join svg.icon { width: 15px; height: 15px; }

/* Visio : rejoindre directement depuis le fil */

/* Visio prévue : caméra sur le fil à l'heure du début ; au survol, l'heure, le nom et « Rejoindre » ; clic = la visio. */
.ribbon-meet { position: absolute; top: 61px; translate: -50% 0; z-index: 4; }
.rm-cam { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--graphite); color: var(--surface); box-shadow: 0 0 0 3px var(--porcelaine), 0 2px 6px -2px rgb(0 0 0 / .35); transition: transform .15s; }
.ribbon-meet.over .rm-cam { opacity: .45; background: var(--ardoise); }
.ribbon-meet.over:hover .rm-cam, .ribbon-meet.over:focus-within .rm-cam { opacity: 1; }
.rm-cam:hover, .rm-cam:focus-visible { transform: scale(1.1); }
.rm-cam svg.icon { width: 13px; height: 13px; }
.rm-pop { position: absolute; bottom: 30px; left: 50%; translate: -50% 0; display: grid; gap: 4px; min-width: 200px; max-width: 280px; padding: 10px 12px; font-size: 12.5px; opacity: 0; visibility: hidden; transition: opacity .12s, visibility .12s; }
.rm-pop::after { content: ""; position: absolute; left: 0; right: 0; bottom: -10px; height: 10px; } /* passage de la souris jusqu'au bouton */
.rm-pop b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rm-pop .mono { color: var(--ardoise); font-size: 11.5px; }
.rm-pop .btn { justify-self: start; margin-top: 4px; padding: 5px 10px; font-size: 12.5px; }
.ribbon-meet:hover .rm-pop, .ribbon-meet:focus-within .rm-pop { opacity: 1; visibility: visible; }
.ribbon-meet.edge-l .rm-pop { left: -6px; translate: 0 0; }
.ribbon-meet.edge-r .rm-pop { left: auto; right: -6px; translate: 0 0; }

/* Tâche à heure : clic = sa fiche ; au survol, « Faite » et « Voir » (la bulle reprend celle des visios). */
.ribbon-task { position: absolute; top: 68px; translate: -50% 0; z-index: 3; }
.ribbon-task .ribbon-marker { position: static; translate: none; }
.ribbon-task .rm-pop { bottom: 22px; }
.ribbon-task:hover .rm-pop, .ribbon-task:focus-within .rm-pop { opacity: 1; visibility: visible; }
.ribbon-task.edge-l .rm-pop { left: -6px; translate: 0 0; }
.ribbon-task.edge-r .rm-pop { left: auto; right: -6px; translate: 0 0; }
.rt-actions { display: flex; gap: 6px; margin-top: 4px; }
.rt-actions .btn { padding: 5px 10px; font-size: 12.5px; }