/* 1. TROISIEME LOT : LES SCENES QUI ENTRAIENT EN FONDU DEVIENNENT... : voir notes/scenes3.notes.md §1 */

/* --- Toutes les coches de la page se dessinent ---------------------------- */
.vs-col.is-after li svg path,
.prix-list li svg path,
.pill svg path {
  stroke-dasharray: 26;
  stroke-dashoffset: 26;
}
.is-live .vs-col.is-after li svg path,
.is-live .prix-list li svg path {
  animation: scTrace .42s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes scTrace { to { stroke-dashoffset: 0; } }
/* voir notes/scenes3.notes.md §2 */
.pill svg path { animation: scTrace .5s cubic-bezier(0.4, 0, 0.2, 1) .5s forwards; }

/* --- AVANT / APRES : ce qui est barre, ce qui est coche ------------------- */
.vs-col.is-before li { position: relative; }
/* voir notes/scenes3.notes.md §3 */
.vs-col.is-before li::after {
  content: ''; position: absolute; left: 27px; right: 0; top: 52%; height: 1.5px;
  background: color-mix(in srgb, #c0392b 55%, transparent);
  transform: scaleX(0); transform-origin: left center;
}
.is-live .vs-col.is-before li::after { animation: scBarre .38s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
@keyframes scBarre { to { transform: scaleX(1); } }
.is-live .vs-col.is-before li:nth-child(1)::after { animation-delay: .10s; }
.is-live .vs-col.is-before li:nth-child(2)::after { animation-delay: .18s; }
.is-live .vs-col.is-before li:nth-child(3)::after { animation-delay: .26s; }
.is-live .vs-col.is-before li:nth-child(4)::after { animation-delay: .34s; }
.is-live .vs-col.is-before li { animation-name: scVsEntre, scEstompe; animation-duration: .32s, .5s; animation-fill-mode: forwards, forwards; }
@keyframes scEstompe { to { opacity: .55; } }
/* voir notes/scenes3.notes.md §4 */
.is-live .vs-col.is-after li:nth-child(1) svg path { animation-delay: .52s; }
.is-live .vs-col.is-after li:nth-child(2) svg path { animation-delay: .62s; }
.is-live .vs-col.is-after li:nth-child(3) svg path { animation-delay: .72s; }
.is-live .vs-col.is-after li:nth-child(4) svg path { animation-delay: .82s; }

/* --- LE COMPARATIF : la colonne Pinlane se coche cellule par cellule ------ */
.compar td.is-us { position: relative; }
.compar td.is-us::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--accent); transform: scaleY(0); transform-origin: top center;
}
.is-live .compar td.is-us::before { animation: scColonne .3s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
@keyframes scColonne { to { transform: scaleY(1); } }
.is-live .compar tbody tr:nth-child(1) td.is-us::before { animation-delay: .90s; }
.is-live .compar tbody tr:nth-child(2) td.is-us::before { animation-delay: .96s; }
.is-live .compar tbody tr:nth-child(3) td.is-us::before { animation-delay: 1.02s; }
.is-live .compar tbody tr:nth-child(4) td.is-us::before { animation-delay: 1.08s; }
.is-live .compar tbody tr:nth-child(5) td.is-us::before { animation-delay: 1.14s; }
.is-live .compar tbody tr:nth-child(6) td.is-us::before { animation-delay: 1.20s; }
.is-live .compar tbody tr:nth-child(7) td.is-us::before { animation-delay: 1.26s; }
.is-live .compar tbody tr:nth-child(8) td.is-us::before { animation-delay: 1.32s; }
.is-live .compar tbody tr:nth-child(9) td.is-us::before { animation-delay: 1.38s; }
.is-live .compar tbody tr:nth-child(10) td.is-us::before { animation-delay: 1.44s; }

/* --- LES DONNEES : un bouclier qui se trace ------------------------------- */

/* --- LA FAQ EN DEUX COLONNES --------------------------------------------- */
/* voir notes/scenes3.notes.md §5 */
.faq { column-fill: balance; }
.faq .qa { break-inside: avoid; margin-bottom: 10px; }
/* voir notes/scenes3.notes.md §6 */
.is-live .qa:nth-child(2n) { animation-delay: .06s; }
.is-live .qa:nth-child(2n+1) { animation-delay: .02s; }
.is-live .qa:nth-child(n+5) { animation-delay: .10s; }
.is-live .qa:nth-child(n+9) { animation-delay: .16s; }
.is-live .qa:nth-child(n+13) { animation-delay: .22s; }
@media (max-width: 780px) { .faq { columns: 1; } }

@media (prefers-reduced-motion: reduce) {
  .vs-col.is-after li svg path, .prix-list li svg path, .pill svg path,
  .trust-ico svg path { stroke-dashoffset: 0; animation: none !important; }
  .vs-col.is-before li::after { transform: scaleX(1); animation: none; }
  .is-live .vs-col.is-before li { opacity: .55; animation: none; }
  .compar td.is-us::before { transform: scaleY(1); animation: none; }
}

/* 7. QUATRIEME LOT (2026-08-07) : COMPARATIF, PRIX, FAQ - CHACUN... : voir notes/scenes3.notes.md §7 */

/* --- Le comparatif : tampon + score --------------------------------------- */
.comp-score {
  display: inline-flex; align-items: center; justify-content: center;
  margin-left: 8px; padding: 2px 8px; min-width: 42px;
  border-radius: 999px; font-size: 11px; font-weight: 650;
  font-style: normal; letter-spacing: .02em;
  background: var(--accent); color: #fff;
  font-variant-numeric: tabular-nums;
}
.compar td.is-us.est-tampon { animation: scTampon .38s cubic-bezier(.16, 1, .3, 1); }
@keyframes scTampon {
  0% { transform: scale(1); }
  45% { transform: scale(1.1); background: color-mix(in srgb, var(--accent) 16%, transparent); }
  100% { transform: scale(1); }
}

/* --- Le prix : le compteur a zero et l'etiquette qui respire -------------- */
.prix-zero {
  float: right; display: inline-flex; align-items: baseline; gap: 5px;
  margin-left: 12px; padding: 3px 10px;
  border-radius: 999px; font-size: 11.5px; font-weight: 550;
  color: var(--muted); background: var(--subtle); box-shadow: var(--hair);
  white-space: nowrap;
}
.prix-zero b { font-size: 13px; font-weight: 700; color: var(--ok); }
.prix-zero b.est-bat { display: inline-block; animation: scZeroBat .32s cubic-bezier(.16, 1, .3, 1); }
@keyframes scZeroBat { 45% { transform: scale(1.28); } }
[data-scene="prix"].is-live .prix-card.is-main .prix-tag {
  animation: scTagPouls .9s cubic-bezier(.16, 1, .3, 1) .95s 1;
}
@keyframes scTagPouls { 35% { transform: scale(1.07); } }

/* --- La FAQ : les numeros se posent avec leurs questions ------------------ */
.qa-num {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; height: 20px; margin-right: 10px; padding: 0 6px;
  border-radius: 7px; font-size: 10.5px; font-weight: 650; font-style: normal;
  letter-spacing: .04em; color: var(--accent-strong);
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  font-variant-numeric: tabular-nums;
  vertical-align: 1px;
}
.is-live .qa-num { animation: scNumPose .38s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes scNumPose {
  from { transform: scale(.4); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
.is-live .qa:nth-child(1) .qa-num { animation-delay: .14s; }
.is-live .qa:nth-child(2) .qa-num { animation-delay: .20s; }
.is-live .qa:nth-child(3) .qa-num { animation-delay: .26s; }
.is-live .qa:nth-child(4) .qa-num { animation-delay: .32s; }
.is-live .qa:nth-child(5) .qa-num { animation-delay: .38s; }
.is-live .qa:nth-child(6) .qa-num { animation-delay: .44s; }
.is-live .qa:nth-child(7) .qa-num { animation-delay: .50s; }

/* voir notes/scenes3.notes.md §8 */
.no-js .compar tbody tr, .no-js .qa, .no-js .vs-col li, .no-js .trust,
.no-js .prix-list li, .no-js .feat-demo, .no-js .sect, .no-js .reveal {
  opacity: 1 !important; transform: none !important;
}
.no-js .vs-col.is-after li svg path, .no-js .prix-list li svg path,
.no-js .pill svg path, .no-js .trust-ico svg path { stroke-dashoffset: 0; animation: none; }
.no-js .vs-col.is-before li::after { transform: scaleX(1); }
.no-js .compar td.is-us::before { transform: scaleY(1); }

@media (prefers-reduced-motion: reduce) {
  .compar td.is-us.est-tampon, .prix-zero b.est-bat,
  .is-live .prix-card.is-main .prix-tag, .is-live .qa-num {
    animation: none !important;
  }
}

/* ==========================================================================
   9. « UNE JOURNEE AVEC » : le guide anime qui remplace la video (2026-08-13)
   ==========================================================================
   Le POURQUOI de ce bloc est dans index.html, au-dessus de la section
   `#journee`, et dans LOOP-QUALITE.md. Ici, les trois decisions de FEUILLE :
   1. RIEN N'ANIME UNE PROPRIETE DE MISE EN PAGE. Tout passe par `transform`,
      `opacity` et la couleur. C'est la regle acquise au chantier J : une
      animation qui touche `left`, `width` ou `height` redemande une mise en
      page a chaque image et compte comme un decalage cumule.
   2. L'ETAT AU REPOS EST L'ETAT FINAL. Sans JavaScript, sans
      IntersectionObserver et sous `prefers-reduced-motion`, chaque gros plan
      montre l'aboutissement du geste : la case remplie, la reponse recue, les
      chiffres a leur valeur. La scene REMONTE ensuite a zero pour rejouer.
      Consequence directe : les elements qui « apparaissent » sont visibles par
      defaut et c'est `.est-cache` qui les retire, jamais l'inverse.
   3. LA FRISE EST COLLANTE, pas fixe : elle vit dans le flux, se cale sous la
      barre de navigation (58 px de haut, detachee de 12 px) et s'arrete avec le
      bloc. Aucun `position: fixed`, donc rien a nettoyer en sortie. */

.gd { position: relative; }

/* --- La frise du jour ----------------------------------------------------- */
.gd-rail {
  position: sticky; top: 82px; z-index: 6; margin: 0 0 12px;
  padding: 13px 20px 11px; border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--page) 88%, transparent);
  backdrop-filter: saturate(1.5) blur(14px);
  -webkit-backdrop-filter: saturate(1.5) blur(14px);
  box-shadow: var(--hair), var(--sh-1);
}
.gd-rail-in { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr) minmax(0, auto);
  gap: 24px; align-items: center; }

.gd-tete { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.gd-tete b { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%;
  background: var(--accent); color: #fff; font-size: 12.5px; font-weight: 600; }
.gd-tete i { font-style: normal; font-size: 14.5px; font-weight: 600; letter-spacing: -.01em; }

.gd-piste { position: relative; display: flex; padding-top: 1px; }
/* La voie court d'un centre de pastille a l'autre : cinq jalons a 20 % de
   large, donc le premier centre est a 10 % et le dernier a 90 %. La jauge part
   du meme point et s'etire en scaleX, ce qui la pose exactement sur la
   pastille active pour p = i / 4. */
.gd-voie, .gd-jauge { position: absolute; left: 10%; right: 10%; top: 5px; height: 2px;
  border-radius: 2px; }
.gd-voie { background: var(--line-strong); }
.gd-jauge { background: var(--accent); transform-origin: left center;
  transform: scaleX(var(--gd-p, 1)); transition: transform .55s var(--e-doux); }

.gd-jalon { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 8px;
  position: relative; min-width: 0; }
.gd-jalon::before { content: ''; width: 10px; height: 10px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
  transition: background-color .4s var(--e-doux), box-shadow .4s var(--e-doux),
              transform .4s var(--e-pose); }
.gd-jalon em { font-style: normal; font-size: 11px; font-weight: 600; letter-spacing: .01em;
  color: var(--muted); white-space: nowrap; transition: color .4s var(--e-doux); }
/* Le curseur devant deux libelles sur cinq : c'est le « deux » du titre, pose
   la ou le gerant met les mains. */
.gd-jalon[data-gd-geste] em::before {
  content: ''; display: inline-block; width: 9px; height: 9px; margin-right: 5px;
  vertical-align: -1px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 3l14 8-6 1.5L10 20z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 3l14 8-6 1.5L10 20z'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Des que le script pilote la frise, les jalons non franchis s'eteignent. Sans
   script l'attribut n'existe pas et tout reste allume : la frise se lit comme
   une journee complete. */
.gd[data-gd-actif] .gd-jalon::before { background: var(--surface);
  box-shadow: 0 0 0 2px var(--line-strong); }
.gd[data-gd-actif] .gd-jalon em { color: var(--faint); }
.gd[data-gd-actif] .gd-jalon.est-franchi::before { background: var(--accent);
  box-shadow: 0 0 0 2px transparent; }
.gd[data-gd-actif] .gd-jalon.est-franchi em { color: var(--muted); }
.gd[data-gd-actif] .gd-jalon.est-actif::before { background: var(--accent);
  box-shadow: 0 0 0 5px var(--accent-soft); transform: scale(1.2); }
.gd[data-gd-actif] .gd-jalon.est-actif em { color: var(--text); }

.gd-boucle { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px;
  border-radius: var(--radius-full); background: var(--accent-soft); color: var(--accent-strong);
  font-family: var(--font-data); font-size: 10.5px; letter-spacing: .04em; white-space: nowrap;
  opacity: 0; transform: translateX(-8px);
  transition: opacity .4s var(--e-sec), transform .5s var(--e-pose); }
.gd-boucle svg { width: 13px; height: 13px; flex: none; }
.gd[data-gd-actif="4"] .gd-boucle { opacity: 1; transform: none; }

/* --- Les cinq moments ----------------------------------------------------- */
.gd-liste { list-style: none; margin: 0; padding: 0; }
.gd-m { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: 34px; align-items: center; padding: 34px 0; }
.gd-m + .gd-m { border-top: 1px solid var(--line); }
/* L'alternance casse la lecture en colonnes : deux moments de suite ne se
   presentent jamais du meme cote. */
.gd-m:nth-child(even) .gd-txt { order: 2; }

.gd-quand { display: inline-block; margin-bottom: 11px; font-family: var(--font-data);
  font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: var(--accent-strong); }
.gd-txt h3 { margin: 0 0 18px; font-size: 25px; line-height: 1.2; letter-spacing: -.022em; }
.gd-l { display: grid; grid-template-columns: 134px minmax(0, 1fr); gap: 14px;
  margin: 0 0 13px; font-size: 15px; line-height: 1.6; color: var(--muted); }
.gd-l:last-child { margin-bottom: 0; }
.gd-l b { font-family: var(--font-data); font-size: 10.5px; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: var(--faint); line-height: 2.28; }

/* --- Le gros plan : la boite commune -------------------------------------- */
.gd-vue { position: relative; }
.gd-ou { position: absolute; top: -11px; left: 18px; z-index: 3;
  display: inline-flex; align-items: center; padding: 3px 11px; border-radius: var(--radius-full);
  background: var(--surface); box-shadow: var(--hair);
  font-family: var(--font-data); font-size: 10.5px; letter-spacing: .04em; color: var(--faint);
  transition: color .4s var(--e-doux), box-shadow .4s var(--e-doux); }
.gd-m.est-actif .gd-ou { color: var(--accent-strong);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 26%, transparent); }
.gv { position: relative; overflow: hidden; padding: 24px 20px 20px;
  border-radius: var(--radius-lg); background: var(--subtle);
  box-shadow: var(--hair), var(--sh-1);
  transition: box-shadow .5s var(--e-doux); }
.gd-m.est-actif .gv { box-shadow: var(--hair), var(--sh-2); }
/* L'utilitaire d'apparition : l'element EXISTE et est visible au repos, la
   scene le retire pour le rejouer. Jamais l'inverse. */
.gv .est-cache { opacity: 0; transform: translateY(7px); }

/* --- Le curseur, visible seulement quand un clic compte -------------------- */
.gd-cur { position: absolute; left: 0; top: 0; z-index: 5; width: 21px; height: 21px;
  opacity: 0; pointer-events: none;
  transform: translate3d(var(--cx, 0px), var(--cy, 0px), 0);
  transition: transform .72s var(--e-doux), opacity .3s linear; }
.gd-cur svg { display: block; width: 21px; height: 21px; fill: var(--text);
  stroke: var(--surface); stroke-width: 1.5px;
  filter: drop-shadow(0 2px 5px rgba(5, 30, 72, .38)); }
.gd-cur.est-vu { opacity: 1; }
/* Pendant le glisser, le curseur adopte la vitesse de la case qu'il tire :
   deux durees differentes se liraient comme un decrochage. */
.gd-cur.est-tire { transition-duration: .52s, .3s; }
.gd-clic { position: absolute; left: 3px; top: 3px; width: 10px; height: 10px; border-radius: 50%;
  border: 2px solid var(--accent); opacity: 0; }
.gd-cur.est-clic .gd-clic { animation: gdClic .52s var(--e-sec); }
@keyframes gdClic {
  from { transform: scale(.35); opacity: .9; }
  to { transform: scale(3.6); opacity: 0; }
}

/* --- 1. Le matin : le panneau de l'agent ---------------------------------- */
.gv-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.gv-bar-t { font-size: 14px; font-weight: 600; }
.gv-bar-n { font-size: 11.5px; color: var(--faint); }
.gv-raison { display: flex; gap: 9px; align-items: flex-start; margin: 13px 0 0;
  font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.gv-pt { flex: none; width: 7px; height: 7px; margin-top: 6px; border-radius: 50%;
  background: var(--accent); }
.gv-post { margin-top: 12px; padding: 13px 14px; border-radius: var(--radius-md);
  background: var(--surface); box-shadow: var(--hair); }
.gv-post-tx { font-size: 13.5px; line-height: 1.5; }
.gv-actes { display: flex; gap: 10px; margin-top: 14px; }
.gv-btn { position: relative; overflow: hidden; padding: 9px 15px; border-radius: var(--radius-full);
  font-size: 13px; font-weight: 550; color: var(--muted); background: var(--surface);
  box-shadow: var(--hair); }
.gv-btn-1 { background: var(--accent); color: #fff; box-shadow: none; }
.gv-suite { display: inline-flex; align-items: center; gap: 7px; margin-top: 13px;
  font-size: 12.5px; color: var(--ok);
  transition: opacity .34s var(--e-sec), transform .4s var(--e-pose); }

/* --- 2. La journee : la reservation qui se pose --------------------------- */
/* La carte volante est le SEUL element dont l'etat au repos est l'absence :
   une fois posee, elle n'existe plus, c'est la case qui porte la reservation. */
.gv-vole { position: absolute; z-index: 4; left: 50%; top: 14px;
  display: flex; flex-direction: column; gap: 2px; padding: 8px 13px;
  border-radius: var(--radius-md); background: var(--surface);
  box-shadow: var(--hair), var(--sh-2); opacity: 0;
  transform: translate3d(-50%, -16px, 0) scale(.94); }
.gv-vole b { font-size: 12.5px; }
.gv-vole em { font-style: normal; font-size: 10.5px; color: var(--faint); }
.gv-vole.est-part { opacity: 1; transform: translate3d(-50%, 0, 0) scale(1);
  transition: opacity .28s var(--e-sec), transform .44s var(--e-pose); }
.gv-vole.est-pose { opacity: 0; transform: translate3d(-50%, var(--dy, 60px), 0) scale(.88);
  transition: opacity .3s var(--e-sec) .2s, transform .52s var(--e-doux); }

.gv-grille { display: grid; gap: 8px; }
.gv-lig { display: grid; grid-template-columns: 68px minmax(0, 1fr); gap: 10px; align-items: center; }
.gv-lig > b { font-family: var(--font-data); font-size: 11px; color: var(--faint); }
.gv-case { position: relative; overflow: hidden; display: flex; align-items: center;
  height: 38px; padding: 0 12px; border-radius: var(--radius-sm);
  font-size: 12.5px; font-style: normal; color: var(--faint);
  background: color-mix(in srgb, var(--brand-ink) 4%, transparent);
  box-shadow: inset 0 0 0 1px var(--line);
  transition: color .3s var(--e-sec), background-color .42s var(--e-doux),
              box-shadow .42s var(--e-doux), transform .5s var(--e-doux); }
.gv-case.est-pris { color: var(--text); font-weight: 550;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent); }
.gv-mail { display: flex; align-items: center; gap: 8px; margin-top: 15px;
  font-size: 11.5px; color: var(--ok); overflow-wrap: anywhere;
  transition: opacity .34s var(--e-sec), transform .4s var(--e-pose); }

/* --- 3. Au comptoir : la reservation qu'on souleve et qu'on repose -------- */
/* Elle voyage en `transform` : la case ne change ni de place ni de taille dans
   la mise en page, donc la grille ne bouge pas d'un pixel pendant le trajet. */
.gv-case.est-portee { z-index: 4; transform: translate3d(6px, var(--dy, 46px), 0) scale(1.02);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 42%, transparent), var(--sh-2); }
/* Le temps d'une image, au lacher : sans elle, la case reviendrait EN GLISSANT
   a sa place de depart, ce qui raconterait l'inverse du geste. */
.gv-case.gd-net { transition: none; }
.gv-etat { display: inline-flex; align-items: center; gap: 7px; margin-top: 15px;
  font-size: 12.5px; font-weight: 550; color: var(--accent-strong);
  transition: opacity .34s var(--e-sec), transform .4s var(--e-pose); }

/* --- 4. Le fichier clients : la fiche et sa cascade ----------------------- */
.gv-fiche { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 12px;
  align-items: center; padding-bottom: 15px; border-bottom: 1px solid var(--line); }
.gv-av { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent-strong);
  font-family: var(--font-data); font-size: 12.5px; font-weight: 600; }
.gv-qui { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gv-qui b { font-size: 14px; }
.gv-qui em { font-style: normal; font-size: 11.5px; color: var(--faint); }
.gv-badge { padding: 4px 10px; border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--accent) 11%, transparent); color: var(--accent-strong);
  font-size: 10.5px; font-weight: 600; white-space: nowrap; }
.gv-fil { display: grid; gap: 11px; margin-top: 15px; }
.gv-ev { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--muted);
  transition: opacity .34s var(--e-sec), transform .4s var(--e-pose); }
.gv-ev .gv-pt { margin-top: 0; }
/* Le point rentrant est creux : c'est le client qui parle, pas le centre. */
.gv-pt-in { background: transparent; box-shadow: inset 0 0 0 2px var(--accent); }
.gv-ev.is-fin { color: var(--ok); font-weight: 550; }
.gv-ev.is-fin .gv-pt { background: var(--ok); }
/* Le curseur de frappe n'existe que pendant la frappe : en `display: none`
   l'animation de clignotement ne tourne pas du tout, ce qui vaut mieux qu'une
   boucle infinie posee la pour rien. */
.gd-caret { display: none; }
.gv-ev.est-ecrit .gd-caret { display: inline-block; }

/* --- 5. Le soir : les quatre indicateurs et l'occupation ------------------ */
.gv-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.gv-k { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px;
  border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--hair); }
.gv-k em { font-style: normal; font-size: 11px; color: var(--faint); }
.gv-k b { font-size: 21px; font-weight: 650; letter-spacing: -.03em; }
.gv-k.is-accent b { color: var(--accent-strong); }
.gv-occ { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px;
  align-items: center; margin-top: 14px; }
.gv-occ-t { font-size: 11.5px; color: var(--faint); }
.gv-occ-b { height: 8px; border-radius: 4px; overflow: hidden;
  background: color-mix(in srgb, var(--brand-ink) 8%, transparent); }
.gv-occ-b i { display: block; height: 100%; border-radius: 4px; background: var(--accent);
  transform-origin: left center; transform: scaleX(var(--gd-occ, .76));
  transition: transform .95s var(--e-doux); }
.gv-occ > b { font-size: 13px; font-weight: 600; }

@media (prefers-color-scheme: dark) {
  .gv-case { background: rgba(255, 255, 255, .04); }
  .gv-occ-b { background: rgba(255, 255, 255, .09); }
  .gd-cur svg { filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .8)); }
  /* MESURE, pas gout. L'accent du theme sombre (#4d8dff) est CLAIR : du blanc
     dessus ne donne que 3,20:1, sous le seuil AA de 4,5 (WCAG 1.4.3). Les deux
     seuls elements concernes sont le bouton principal du gros plan et le numero
     du moment. L'encre passe au fond de page : 6,23:1, sans toucher au jeton. */
  .gv-btn-1, .gd-tete b { color: var(--page); }
}

/* --- Telephone ------------------------------------------------------------
   Le budget mobile de la page est divise par deux (releve du 2026-08-08) : la
   frise maigrit, les deux colonnes s'empilent, et le texte passe AVANT le gros
   plan a chaque moment. Un mode d'emploi se lit, il ne se regarde pas d'abord. */
@media (max-width: 900px) {
  .gd-m { grid-template-columns: minmax(0, 1fr); gap: 22px; padding: 26px 0; }
  .gd-m:nth-child(even) .gd-txt { order: 0; }
  .gd-txt h3 { font-size: 21px; margin-bottom: 15px; }
  .gd-rail { top: 76px; padding: 11px 16px 10px; }
  .gd-rail-in { grid-template-columns: minmax(0, auto) minmax(0, 1fr);
    grid-template-areas: 'tete boucle' 'piste piste'; gap: 10px 12px; }
  .gd-tete { grid-area: tete; }
  .gd-boucle { grid-area: boucle; justify-self: end; }
  .gd-piste { grid-area: piste; }
}
@media (max-width: 620px) {
  .gd-l { grid-template-columns: minmax(0, 1fr); gap: 2px; margin-bottom: 15px; font-size: 14.5px; }
  .gd-l b { line-height: 1.6; }
  .gd-tete i { font-size: 13.5px; }
  .gd-jalon em { font-size: 9.5px; }
  .gd-jalon[data-gd-geste] em::before { width: 8px; height: 8px; margin-right: 3px; }
  .gd-boucle { font-size: 9.5px; padding: 4px 9px; }
  .gv { padding: 22px 15px 17px; border-radius: var(--radius-md); }
  .gd-ou { left: 13px; }
  .gv-lig { grid-template-columns: 56px minmax(0, 1fr); gap: 8px; }
  .gv-kpis { gap: 8px; }
  .gv-k { padding: 10px 12px; }
  .gv-k b { font-size: 18px; }
  .gv-mail { font-size: 11px; }
}
/* A 320 px, chaque jalon ne dispose que de 45,6 px : « Comptoir » plus son
   curseur en fait 53 et les libelles se touchent (mesure). Le curseur sort donc
   de la frise sous 400 px - il reste joue la ou il compte vraiment, dans les
   deux gros plans, et le titre porte toujours le chiffre. */
@media (max-width: 400px) {
  .gd-jalon em { font-size: 9px; }
  .gd-jalon[data-gd-geste] em::before { display: none; }
}

/* Sans script, la frise est complete et chaque gros plan montre l'etat final :
   c'est deja ce que dit le HTML, ces deux lignes ne font que verrouiller les
   deux elements dont l'etat de repos passe par une variable. */
.no-js .gd-jauge { transform: scaleX(1); }
.no-js .gv-occ-b i { transform: scaleX(.76); }

@media (prefers-reduced-motion: reduce) {
  .gd-jauge, .gd-jalon::before, .gd-boucle, .gv-case, .gv-vole, .gv-suite, .gv-mail,
  .gv-etat, .gv-ev, .gv-occ-b i, .gd-cur, .gv, .gd-ou {
    transition: none !important; animation: none !important;
  }
  /* La frise n'est plus pilotee (scenes.js ne demarre aucune scene sous
     mouvement reduit) : elle se lit comme une journee entiere, et les gros
     plans restent a leur etat final. */
  .gd-jauge { transform: scaleX(1); }
  .gd-cur { opacity: 0; }
}