/* 1. LES SIX MINI-DEMONSTRATIONS DE DOMAINE : voir notes/demos.notes.md §1 */

.feat-demo {
  position: relative; height: 132px; margin-bottom: 18px;
  border: 0; border-radius: 16px; overflow: hidden;
  background: color-mix(in srgb, var(--brand-ink) 3.5%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand-ink) 7%, transparent);
}
@media (prefers-color-scheme: dark) {
  .feat-demo { background: rgba(255, 255, 255, .035); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); }
}
.fd { position: absolute; inset: 0; padding: 13px 14px; display: flex; flex-direction: column; }
.fd em, .fd i, .fd b { font-style: normal; }

/* 2. LA RESERVATION, un client prend un creneau, a 23 h, tout seul : voir notes/demos.notes.md §2 */
.fd-heures { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
  font-family: var(--font-data); font-size: 10.5px; color: var(--faint); margin-bottom: 6px; }
.fd-heures span { text-align: center; }
.fd-cases { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; flex: 1; }
.fd-c { position: relative; display: grid; place-items: center; border-radius: 8px;
  font-size: 11px; font-weight: 550; letter-spacing: -.01em;
  background: color-mix(in srgb, var(--brand-ink) 7%, transparent); color: var(--faint); }
.fd-c.est-pris { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent-strong); }
.fd-c.est-cible { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--faint) 40%, transparent); }
.fd-c.est-cible i, .fd-c.est-cible b { position: absolute; }
.fd-c.est-cible b { opacity: 0; color: #fff; font-weight: 600; }
@media (prefers-color-scheme: dark) { .fd-c { background: rgba(255, 255, 255, .06); } }
/* Le creneau se prend a 46 % du cycle, exactement quand le curseur arrive. */
.is-live .fd-c.est-cible { animation: fdPrend 7s cubic-bezier(.4, 0, .2, 1) infinite; }
.is-live .fd-c.est-cible i { animation: fdSort 7s steps(1, end) infinite; }
.is-live .fd-c.est-cible b { animation: fdEntre 7s steps(1, end) infinite; }
@keyframes fdPrend {
  0%, 44% { background: color-mix(in srgb, var(--brand-ink) 7%, transparent);
            box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--faint) 40%, transparent); }
  50%, 90% { background: var(--accent); box-shadow: inset 0 0 0 1.5px var(--accent); }
  100% { background: color-mix(in srgb, var(--brand-ink) 7%, transparent);
         box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--faint) 40%, transparent); }
}
@keyframes fdSort { 0%, 45% { opacity: 1; } 46%, 90% { opacity: 0; } 91%, 100% { opacity: 1; } }
@keyframes fdEntre { 0%, 45% { opacity: 0; } 46%, 90% { opacity: 1; } 91%, 100% { opacity: 0; } }

.fd-cur { position: absolute; width: 14px; height: 14px; left: 14%; top: 26%; opacity: 0; z-index: 3; }
.fd-cur svg { width: 100%; height: 100%; fill: var(--text); }
.is-live .fd-cur { animation: fdCur 7s cubic-bezier(.4, 0, .2, 1) infinite; }
@keyframes fdCur {
  0%   { opacity: 0; transform: translate(-6px, -10px); }
  14%  { opacity: 1; transform: translate(-6px, -10px); }
  40%  { opacity: 1; transform: translate(122px, 30px); }
  46%  { opacity: 1; transform: translate(122px, 32px) scale(.86); }   /* le clic, SUR la case libre */
  52%  { opacity: 1; transform: translate(122px, 30px); }
  72%  { opacity: 0; transform: translate(128px, 26px); }
  100% { opacity: 0; transform: translate(-6px, -10px); }
}
.fd-onde { position: absolute; left: 63%; top: 60%; width: 12px; height: 12px; border-radius: 50%;
  transform: translate(-50%, -50%); opacity: 0; box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 50%, transparent); }
.is-live .fd-onde { animation: fdOnde 7s cubic-bezier(.4, 0, .2, 1) infinite; }
@keyframes fdOnde {
  0%, 45% { opacity: 0; box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 50%, transparent); }
  48% { opacity: .9; }
  62%, 100% { opacity: 0; box-shadow: 0 0 0 26px transparent; }
}

/* 3. LE PLANNING, il ne se remplit pas tout seul, et c'est le sujet : voir notes/demos.notes.md §3 */
.fd-plan { gap: 8px; justify-content: center; }
.fd-lig { display: grid; grid-template-columns: 52px 1fr; align-items: center; gap: 9px; }
.fd-lab { font-size: 10.5px; color: var(--faint); font-family: var(--font-data); }
.fd-bar { position: relative; height: 24px; border-radius: 7px; overflow: hidden;
  width: var(--w, 100%); transform-origin: left center;
  background: color-mix(in srgb, var(--accent) 20%, transparent); }
.fd-bar em { position: absolute; left: 8px; top: 50%; transform: translateY(-50%);
  font-size: 10px; font-weight: 550; color: var(--accent-strong); white-space: nowrap; }
.fd-trou { width: 100%; background: transparent;
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--faint) 38%, transparent); }
.fd-trou em { color: var(--faint); }
.is-live .fd-bar:not(.fd-trou) { animation: fdPose .7s cubic-bezier(.16, 1, .3, 1) both; }
.is-live .fd-lig:nth-child(2) .fd-bar { animation-delay: .16s; }
@keyframes fdPose { from { transform: scaleX(.06); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }
/* Le trou respire : il attend, et il le montre. */
.is-live .fd-trou { animation: fdRespire 3.4s ease-in-out .8s infinite; }
@keyframes fdRespire {
  0%, 100% { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--faint) 30%, transparent); }
  50% { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 70%, transparent); }
}

/* 4. LES CLIENTS, la recherche est instantanee, et ca se PROUVE : voir notes/demos.notes.md §4 */
.fd-cli { gap: 6px; }
.fd-cli-tete { display: flex; align-items: center; justify-content: space-between; margin-bottom: 3px; }
.fd-q { position: relative; padding: 3px 8px 3px 20px; border-radius: 6px; font-size: 10.5px; color: var(--muted);
  background: color-mix(in srgb, var(--brand-ink) 6%, transparent); font-family: var(--font-data); }
.fd-q::before { content: '⌕'; position: absolute; left: 7px; top: 50%; transform: translateY(-50%); color: var(--faint); }
.fd-cnt { position: relative; display: block; width: 26px; height: 15px; overflow: hidden;
  font-family: var(--font-data); font-size: 12px; font-weight: 600; color: var(--accent-strong); text-align: right; }
.fd-cnt i { position: absolute; right: 0; top: 0; display: block; height: 15px; line-height: 15px; }
.fd-cnt i:nth-child(2) { top: 15px; }
.is-live .fd-cnt i { animation: fdRoule 8s cubic-bezier(.4, 0, .2, 1) infinite; }
@keyframes fdRoule { 0%, 34% { transform: translateY(0); } 44%, 92% { transform: translateY(-15px); } 100% { transform: translateY(0); } }

.fd-cli-l { display: grid; grid-template-columns: 20px 1fr auto; align-items: center; gap: 8px;
  font-size: 11px; color: var(--text); }
.fd-av { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent-strong);
  font-family: var(--font-data); font-size: 8.5px; font-weight: 600; }
.fd-nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fd-cli-l em { font-family: var(--font-data); font-size: 10.5px; color: var(--muted); }
.is-live .fd-cli-l.est-sort { animation: fdFiltre 8s cubic-bezier(.4, 0, .2, 1) infinite; }
@keyframes fdFiltre {
  0%, 34% { opacity: 1; transform: none; }
  44%, 92% { opacity: 0; transform: translateX(-16px); }
  100% { opacity: 1; transform: none; }
}

/* 5. L'AGENT, il croise des signaux, PUIS il ecrit : voir notes/demos.notes.md §5 */
.fd-ag { gap: 5px; justify-content: center; }
.fd-sig { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: 10.5px; color: var(--muted); }
.fd-sig i { flex: none; width: 13px; height: 13px; border-radius: 50%; position: relative;
  background: color-mix(in srgb, var(--brand-ink) 8%, transparent); }
.fd-sig i::after { content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: var(--ok); opacity: 0; transform: scale(.4); }
.is-live .fd-sig i::after { animation: fdCoche 9s cubic-bezier(.16, 1, .3, 1) infinite; }
.is-live .fd-sig:nth-child(2) i::after { animation-delay: .5s; }
.is-live .fd-sig:nth-child(3) i::after { animation-delay: 1s; }
@keyframes fdCoche { 0%, 8% { opacity: 0; transform: scale(.4); } 16%, 88% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(.4); } }
.fd-post { margin-top: 7px; padding: 7px 9px; border-radius: 8px; overflow: hidden;
  background: color-mix(in srgb, var(--accent) 10%, transparent); }
/* La frappe est une DECOUPE, pas une largeur : la boite fait toute la ligne et
   c'est `clip-path` qui avance. Meme rendu au pixel, et une animation qui coute
   une peinture au lieu d'une mise en page, neuf secondes en boucle. */
.fd-typ { display: block; font-size: 10.5px; font-weight: 550; color: var(--accent-strong);
  white-space: nowrap; overflow: hidden; width: 100%; clip-path: inset(0 100% 0 0); }
.is-live .fd-typ { animation: fdTape 9s steps(34, end) infinite; }
@keyframes fdTape { 0%, 22% { clip-path: inset(0 100% 0 0); } 52%, 92% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(0 100% 0 0); } }

/* 6. LES TARIFS, c'est le gerant qui deplace le prix, un dimanche... : voir notes/demos.notes.md §6 */
.fd-tar { justify-content: center; gap: 12px; }
.fd-tar-h { display: flex; align-items: baseline; justify-content: space-between; }
.fd-quand { font-size: 11px; color: var(--muted); }
.fd-eur { position: relative; display: block; width: 62px; height: 26px; overflow: hidden; text-align: right; }
.fd-eur i { position: absolute; right: 0; top: 0; display: block; height: 26px; line-height: 26px;
  font-family: var(--font-data); font-size: 19px; font-weight: 650; color: var(--accent-strong);
  font-variant-numeric: tabular-nums; }
.fd-eur i:nth-child(2) { top: 26px; }
.is-live .fd-eur i { animation: fdPrix 8s cubic-bezier(.16, 1, .3, 1) infinite; }
@keyframes fdPrix { 0%, 30% { transform: translateY(0); } 42%, 90% { transform: translateY(-26px); } 100% { transform: translateY(0); } }
/* `container-type: inline-size` sert d'UNITE a la poignee : elle parcourt la
   largeur de la piste en `cqw`, ce qu'un pourcentage de translate ne sait pas
   dire. La piste est deja le bloc conteneur de ses deux enfants absolus et n'a
   ni rembourrage ni bordure, donc 1 cqw vaut 1 % de ce que `left` mesurait. */
.fd-piste { position: relative; height: 5px; border-radius: 3px; container-type: inline-size;
  background: color-mix(in srgb, var(--brand-ink) 9%, transparent); }
/* La barre se remplit par decoupe (le `round 3px` garde le bout arrondi que
   `scaleX` aurait ecrase) : une peinture au lieu d'une mise en page. */
.fd-rempli { position: absolute; inset: 0; border-radius: 3px; background: var(--accent);
  clip-path: inset(0 58% 0 0 round 3px); }
.is-live .fd-rempli { animation: fdRempli 8s cubic-bezier(.16, 1, .3, 1) infinite; }
@keyframes fdRempli { 0%, 30% { clip-path: inset(0 58% 0 0 round 3px); }
  42%, 90% { clip-path: inset(0 24% 0 0 round 3px); } 100% { clip-path: inset(0 58% 0 0 round 3px); } }
.fd-poignee { position: absolute; top: 50%; left: 0; width: 15px; height: 15px; border-radius: 50%;
  transform: translate(calc(42cqw - 50%), -50%); background: #fff;
  box-shadow: 0 0 0 1.5px var(--accent), 0 2px 6px rgba(5, 30, 72, .3); }
.is-live .fd-poignee { animation: fdPoignee 8s cubic-bezier(.16, 1, .3, 1) infinite; }
@keyframes fdPoignee { 0%, 30% { transform: translate(calc(42cqw - 50%), -50%); }
  42%, 90% { transform: translate(calc(76cqw - 50%), -50%); } 100% { transform: translate(calc(42cqw - 50%), -50%); } }
.fd-tar-n { font-size: 10px; color: var(--faint); }

/* 7. LE MULTI-SITES, trois activites, une seule console : voir notes/demos.notes.md §7 */
.fd-sit { align-items: center; justify-content: space-between; }
.fd-console { padding: 4px 11px; border-radius: 999px; font-size: 10.5px; font-weight: 550;
  background: var(--accent); color: #fff; }
.is-live .fd-console { animation: fdAllume 8s cubic-bezier(.4, 0, .2, 1) infinite; }
@keyframes fdAllume {
  0%, 48% { box-shadow: 0 4px 14px -6px color-mix(in srgb, var(--accent) 30%, transparent); }
  58%, 88% { box-shadow: 0 4px 22px -4px color-mix(in srgb, var(--accent) 95%, transparent); }
  100% { box-shadow: 0 4px 14px -6px color-mix(in srgb, var(--accent) 30%, transparent); }
}
.fd-liens { position: absolute; left: 14px; right: 14px; top: 36px; height: 44px; width: auto; }
.fd-lien { fill: none; stroke: color-mix(in srgb, var(--accent) 55%, transparent); stroke-width: 1.4;
  stroke-dasharray: 90; stroke-dashoffset: 90; }
.is-live .fd-lien { animation: fdTrace 8s cubic-bezier(.4, 0, .2, 1) infinite; }
.is-live .fd-lien:nth-child(2) { animation-delay: .18s; }
.is-live .fd-lien:nth-child(3) { animation-delay: .36s; }
@keyframes fdTrace { 0%, 6% { stroke-dashoffset: 90; } 34%, 88% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 90; } }
.fd-sites { display: flex; justify-content: space-between; width: 100%; }
.fd-sites span { padding: 3px 9px; border-radius: 6px; font-size: 10px; color: var(--muted);
  background: color-mix(in srgb, var(--brand-ink) 7%, transparent); }
@media (prefers-color-scheme: dark) {
  .fd-q, .fd-sig i, .fd-piste, .fd-sites span { background: rgba(255, 255, 255, .07); }
}

/* voir notes/demos.notes.md §8 */
@media (prefers-reduced-motion: reduce) {
  .feat-demo *, .is-live .feat-demo * { animation: none !important; }
  .fd-c.est-cible { background: var(--accent); box-shadow: inset 0 0 0 1.5px var(--accent); }
  .fd-c.est-cible i { opacity: 0; }
  .fd-c.est-cible b { opacity: 1; }
  .fd-cur, .fd-onde { display: none; }
  .fd-cnt i:first-child { opacity: 0; }
  .fd-cnt i:nth-child(2) { top: 0; }
  .fd-cli-l.est-sort { display: none; }
  .fd-sig i::after { opacity: 1; transform: scale(1); }
  /* Meme etat final qu'avant, dans le vocabulaire des trois animations
     converties : la ligne entiere visible, la barre a 76 %, la poignee au bout. */
  .fd-typ { clip-path: none; }
  .fd-eur i:first-child { opacity: 0; }
  .fd-eur i:nth-child(2) { top: 0; }
  .fd-rempli { clip-path: inset(0 24% 0 0 round 3px); }
  .fd-poignee { transform: translate(calc(76cqw - 50%), -50%); }
  .fd-lien { stroke-dashoffset: 0; }
}

/* 9. LES ETIQUETTES DE CARTE : voir notes/demos.notes.md §9 */
.feat-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.feat-chip {
  font-size: 12px; font-weight: 550; line-height: 1.3;
  padding: 5px 10px; border-radius: var(--radius-full);
  background: var(--subtle); color: var(--muted);
  transition: background-color .3s cubic-bezier(.32, .72, 0, 1), color .3s cubic-bezier(.32, .72, 0, 1);
}
/* voir notes/demos.notes.md §10 */
.feat-chip { opacity: 0; transform: translateY(5px); }
.is-live .feat .feat-chip { animation: featChip .3s cubic-bezier(0.23, 1, 0.32, 1) forwards; }
@keyframes featChip { to { opacity: 1; transform: none; } }
.is-live .feat .feat-chip:nth-child(1) { animation-delay: .22s; }
.is-live .feat .feat-chip:nth-child(2) { animation-delay: .28s; }
.is-live .feat .feat-chip:nth-child(3) { animation-delay: .34s; }
.is-live .feat .feat-chip:nth-child(4) { animation-delay: .40s; }
/* Cinquieme pastille (« Rappels, moins de no-show ») : sans cette ligne elle
   aurait un delai de 0 s et serait arrivee AVANT les quatre autres. */
.is-live .feat .feat-chip:nth-child(5) { animation-delay: .46s; }
@media (prefers-reduced-motion: reduce) {
  .feat-chip { opacity: 1; transform: none; animation: none !important; }
}