/* ==========================================================================
   Quiétude — maquettes animées de l'outil
   - Lignes de fonctionnalités alternées (maquette + texte).
   - Cadres « Mac » et « téléphone » pour les maquettes.
   - Scènes animées en CSS pur ; animations.js ajoute [data-pret] (animations
     déclarées) puis .en-jeu quand la scène est visible (lecture / pause).
   - Sans JavaScript ou avec prefers-reduced-motion : aucune animation, la
     maquette s'affiche dans son état final (styles de base = état final).
   - On n'anime que transform et opacity (pas de recalcul de mise en page).
   ========================================================================== */

:root {
  --ombre-maquette: 0 1px 2px rgba(46, 42, 38, .06), 0 24px 56px -20px rgba(46, 42, 38, .22);
  --ombre-flottante: 0 1px 2px rgba(46, 42, 38, .08), 0 12px 28px -10px rgba(46, 42, 38, .25);
  --boucle: 8s;                                /* durée d'une boucle de scène */
  --courbe: cubic-bezier(.4, 0, .2, 1);        /* lente, sans rebond */
  --sauge-voile: #EAF0EB;                       /* fond des rendez-vous particuliers */
  --terracotta-voile: #F7EAE3;                  /* fond des rendez-vous structures */
  --ivoire: #FAF7F2;                            /* barres et menus des maquettes */
}

/* ---------- Lignes de fonctionnalités ---------- */
.fonctions { display: flex; flex-direction: column; gap: clamp(72px, 10vw, 128px); margin-top: clamp(48px, 7vw, 80px); }
.fonction {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: center; gap: clamp(32px, 6vw, 80px);
}
/* La maquette vient en premier dans le HTML ; .inverse la place à droite */
.fonction.inverse { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.fonction.inverse .scene { order: 2; }
.fonction h3 { font-family: var(--serif); font-size: clamp(26px, 2.6vw, 32px); font-weight: 400; line-height: 1.18; letter-spacing: -.01em; }
.fonction .surtitre { margin-bottom: 12px; color: var(--sauge-fonce); }
.fonction-texte > p { margin-top: 16px; color: var(--texte-2); }
.puces { margin-top: 24px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; font-size: 16px; }
.puces li { display: flex; gap: 12px; align-items: baseline; }
.puces li::before {
  content: ""; flex: none; width: 14px; height: 8px; margin-top: 1px;
  border-left: 2px solid var(--sauge); border-bottom: 2px solid var(--sauge);
  transform: translateY(-3px) rotate(-45deg);
}
@media (max-width: 860px) {
  .fonction, .fonction.inverse { grid-template-columns: 1fr; gap: 40px; }
  .fonction.inverse .scene { order: 0; }
}

/* ---------- Scène (conteneur commun) ---------- */
.scene { position: relative; margin: 0; container-type: inline-size; }

/* Badge flottant (bénéfice clé), au-dessus du cadre */
.badge-flottant {
  position: absolute; z-index: 3;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 999px;
  background: var(--blanc); box-shadow: var(--ombre-flottante);
  font-size: 13px; font-weight: 600; line-height: 1.2; color: var(--encre); white-space: nowrap;
}
.badge-flottant .pastille { width: 8px; height: 8px; }
.scene .badge-flottant { left: -12px; top: -18px; } /* cadres Mac ; les téléphones ont leur propre position */

/* ---------- Cadre Mac ---------- */
.cadre-mac {
  position: relative; overflow: hidden;
  border: 1px solid var(--filet-fort); border-radius: 14px;
  background: var(--blanc); box-shadow: var(--ombre-maquette);
  font-size: clamp(9px, 1.78cqi, 12px); line-height: 1.3; /* tout l'intérieur est en em */
}
.mac-barre {
  display: flex; align-items: center; gap: .5em; height: 2.6em; padding-inline: 1em;
  background: var(--ivoire); border-bottom: 1px solid var(--filet);
}
.mac-barre > span { width: .8em; height: .8em; border-radius: 50%; background: var(--filet-fort); }
.mac-url {
  margin-inline: auto; padding: .25em 2.5em; border-radius: 6px;
  background: var(--blanc); border: 1px solid var(--filet); color: var(--texte-3); font-size: .9em;
}
.mac-app { display: flex; }

/* Menu latéral de l'application */
.app-menu {
  flex: none; width: 10.5em; padding: 1.2em .8em;
  background: var(--ivoire); border-right: 1px solid var(--filet);
  display: flex; flex-direction: column; gap: .2em; color: var(--texte-2);
}
.app-menu .app-marque { font-family: var(--serif); font-size: 1.35em; font-weight: 500; color: var(--encre); padding: 0 .45em .7em; }
.app-menu span { padding: .45em .7em; border-radius: 6px; }
.app-menu .actif { background: var(--sauge-voile); color: var(--sauge-fonce); font-weight: 600; }

.app-contenu { flex: 1; min-width: 0; padding: 1.1em 1.2em 1.2em; }
.app-entete { display: flex; align-items: center; justify-content: space-between; gap: 1em; margin-bottom: .9em; }
.app-titre { font-family: var(--serif); font-size: 1.45em; letter-spacing: -.01em; }
.segment { display: flex; padding: .2em; border-radius: 7px; background: var(--sable); font-size: .9em; color: var(--texte-3); }
.segment span { padding: .25em .7em; border-radius: 5px; }
.segment .actif { background: var(--blanc); color: var(--encre); font-weight: 600; box-shadow: 0 1px 2px rgba(46, 42, 38, .1); }

/* ---------- Scène « Agenda et rappels » ---------- */
.semaine {
  position: relative;
  display: grid; grid-template-columns: 3.2em repeat(5, minmax(0, 1fr));
  grid-template-rows: 2.6em repeat(14, 1.9em); /* en-tête + 09:00 → 16:00 par demi-heure */
}
.semaine .jour { grid-row: 1; padding: .2em .5em; font-size: .85em; color: var(--texte-3); line-height: 1.15; }
.semaine .jour b { display: block; font-family: var(--serif); font-size: 1.35em; font-weight: 500; color: var(--encre); }
.semaine .jour.auj b { color: var(--sauge-fonce); }
.semaine .heure { grid-column: 1; font-size: .78em; color: var(--texte-3); transform: translateY(-.6em); }
.semaine .trait { grid-column: 1 / -1; border-top: 1px solid var(--filet); }
.semaine .colonne { grid-row: 1 / -1; border-left: 1px solid var(--filet); }

.evt {
  position: relative; z-index: 1; margin: 2px 3px; min-width: 0; overflow: hidden;
  padding: .3em .45em; border-radius: 5px;
  background: var(--sauge-voile); border-left: 3px solid var(--sauge);
  font-size: .82em; line-height: 1.25;
}
.evt b { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.evt span { color: var(--texte-3); white-space: nowrap; }
.evt-structure { background: var(--terracotta-voile); border-left-color: var(--terracotta); }

/* Rendez-vous ajouté pendant l'animation */
.evt-nouveau { z-index: 2; background: var(--blanc); border: 1px solid var(--sauge); border-left-width: 3px; box-shadow: 0 6px 16px -8px rgba(75, 107, 82, .55); }
.evt-nouveau .lieu {
  display: inline-block; margin: .25em 0 .15em; padding: .05em .55em; border-radius: 999px;
  background: var(--sauge-fonce); color: var(--blanc); font-size: .9em; font-weight: 600;
}
.evt-nouveau .lien { display: flex; align-items: center; gap: .3em; color: var(--sauge-fonce); font-weight: 600; }
.evt-nouveau .lien svg { width: 1em; height: 1em; flex: none; }

/* Emplacement survolé et curseur (invisibles hors animation) */
.creneau-vise { z-index: 1; margin: 2px 3px; border: 1.5px dashed var(--sauge); border-radius: 5px; background: rgba(107, 143, 113, .08); opacity: 0; }
.curseur { position: relative; z-index: 4; pointer-events: none; opacity: 0; }
.curseur svg { position: absolute; left: 55%; top: 45%; width: 1.7em; height: auto; filter: drop-shadow(0 2px 3px rgba(46, 42, 38, .3)); }
.curseur::after { /* onde du clic */
  content: ""; position: absolute; left: calc(55% - .9em); top: calc(45% - .9em);
  width: 1.8em; height: 1.8em; border-radius: 50%; background: rgba(75, 107, 82, .28); opacity: 0;
}

/* Aperçu de l'e-mail de rappel (date, heure, lieu : jamais le motif) */
.courriel { /* dans le flux, remonté sur le bas de l'agenda */
  position: relative; z-index: 3; width: 50%; margin: -24% -3% 0 auto;
  padding: 1.1em 1.2em 1.2em; border-radius: 12px; border: 1px solid var(--filet);
  background: var(--blanc); box-shadow: var(--ombre-flottante);
  font-size: clamp(9px, 1.78cqi, 12px); line-height: 1.4;
}
.courriel-tete { display: flex; align-items: center; justify-content: space-between; gap: .6em; margin-bottom: .7em; }
.courriel-tete .libelle { display: flex; align-items: center; gap: .45em; font-size: .85em; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--texte-3); }
.courriel-tete svg { width: 1.3em; height: 1.3em; color: var(--sauge-fonce); }
.etiquette { padding: .15em .6em; border-radius: 999px; background: var(--sauge-voile); color: var(--sauge-fonce); font-size: .85em; font-weight: 600; white-space: nowrap; }
.courriel .objet { font-weight: 600; font-size: 1.05em; }
.courriel .a { color: var(--texte-3); font-size: .9em; margin-bottom: .35em; }
.courriel p { margin-top: .5em; color: var(--texte-2); }
.courriel .rejoindre { display: inline-block; margin-top: .7em; padding: .4em .9em; border-radius: 6px; background: var(--sauge-fonce); color: var(--blanc); font-weight: 600; }
.courriel .confidentiel { display: flex; align-items: center; gap: .45em; margin-top: .9em; padding-top: .8em; border-top: 1px solid var(--filet); font-size: .88em; color: var(--sauge-fonce); font-weight: 600; }
.courriel .confidentiel svg { width: 1.15em; height: 1.15em; flex: none; }


/* Petits écrans : sans menu, 3 jours (mar → jeu), e-mail élargi sous l'agenda */
@container (max-width: 560px) {
  .cadre-mac, .courriel { font-size: clamp(9.5px, 2.9cqi, 12px); }
  .app-menu, .semaine .j1, .semaine .j5 { display: none; }
  .semaine { grid-template-columns: 3.2em 0 repeat(3, minmax(0, 1fr)) 0; }
  .courriel { width: 88%; margin: -30% 3% 0 auto; }
  .scene .badge-flottant { left: 4px; }
}

/* ---------- Animations (seulement si animations.js a préparé la scène) ---------- */
[data-pret] .anim {
  animation-duration: var(--boucle); animation-timing-function: var(--courbe);
  animation-iteration-count: infinite; animation-fill-mode: both;
  animation-play-state: paused;
}
[data-pret].en-jeu .anim,
[data-pret].en-jeu .anim::before,
[data-pret].en-jeu .anim::after { animation-play-state: running; }

[data-pret] .badge-flottant { animation: flotte 6s ease-in-out infinite; animation-play-state: paused; }
[data-pret].en-jeu .badge-flottant { animation-play-state: running; }
@keyframes flotte { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* Chronologie de la scène Agenda (8 s) :
   0-24 % le curseur rejoint jeudi 10:00 · 24-30 % clic, le rendez-vous apparaît
   34 % lieu « Visio » · 42 % lien visio · 52 % e-mail de rappel · 66 % mention
   « aucun motif » · 92-100 % tout s'efface et la boucle reprend. */
[data-pret] .curseur      { animation-name: ag-curseur; }
[data-pret] .curseur::after { animation: ag-clic var(--boucle) var(--courbe) infinite both paused; }
[data-pret] .creneau-vise { animation-name: ag-vise; }
[data-pret] .evt-nouveau  { animation-name: ag-nouveau; }
[data-pret] .evt-nouveau .lieu { animation-name: ag-lieu; }
[data-pret] .evt-nouveau .lien { animation-name: ag-lien; }
[data-pret] .courriel     { animation-name: ag-courriel; }
[data-pret] .courriel .confidentiel { animation-name: ag-confidentiel; }

@keyframes ag-curseur {
  0%, 4%   { opacity: 0; transform: translate(9em, 12em); }
  8%       { opacity: 1; transform: translate(9em, 12em); }
  22%      { opacity: 1; transform: translate(0, 0); }
  25%      { opacity: 1; transform: translate(0, 0) scale(.86); }
  28%      { opacity: 1; transform: translate(0, 0) scale(1); }
  36%, 100% { opacity: 0; transform: translate(2em, 3em); }
}
@keyframes ag-clic {
  0%, 24%  { opacity: 0; transform: scale(.4); }
  26%      { opacity: 1; transform: scale(1); }
  32%, 100% { opacity: 0; transform: scale(1.8); }
}
@keyframes ag-vise {
  0%, 12% { opacity: 0; }
  18%, 25% { opacity: 1; }
  29%, 100% { opacity: 0; }
}
@keyframes ag-nouveau {
  0%, 25% { opacity: 0; transform: scale(.9); }
  30%, 92% { opacity: 1; transform: scale(1); }
  98%, 100% { opacity: 0; transform: scale(1); }
}
@keyframes ag-lieu {
  0%, 32% { opacity: 0; transform: translateY(4px); }
  37%, 100% { opacity: 1; transform: translateY(0); }
}
@keyframes ag-lien {
  0%, 40% { opacity: 0; transform: translateX(-6px); }
  45%, 100% { opacity: 1; transform: translateX(0); }
}
@keyframes ag-courriel {
  0%, 50% { opacity: 0; transform: translateY(18px); }
  57%, 92% { opacity: 1; transform: translateY(0); }
  98%, 100% { opacity: 0; transform: translateY(0); }
}
@keyframes ag-confidentiel {
  0%, 64% { opacity: 0; }
  70%, 100% { opacity: 1; }
}

/* ==========================================================================
   Outils communs aux scènes
   ========================================================================== */

/* Bascule : deux états superposés dans la même case (avant → après).
   Hors animation, seul l'état « après » (final) est visible. */
.bascule { display: inline-grid; }
.bascule > * { grid-area: 1 / 1; }
.bascule > .avant { opacity: 0; }

.pill { display: inline-block; padding: .2em .7em; border-radius: 999px; font-size: .88em; font-weight: 600; white-space: nowrap; }
.pill-neutre { background: var(--sable); color: var(--texte-2); }
.pill-sauge { background: var(--sauge-voile); color: var(--sauge-fonce); }
.pill-terra { background: var(--terracotta-voile); color: var(--terracotta-fonce); }
.mac-libelle { font-size: .78em; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--texte-3); }
.halo { position: absolute; inset: 0; border-radius: inherit; background: var(--sauge-voile); opacity: 0; z-index: -1; }

/* Notification (toast) au-dessus d'une maquette */
.toast {
  display: flex; align-items: center; gap: .7em;
  padding: .75em 1em; border-radius: 12px; background: var(--blanc);
  box-shadow: var(--ombre-flottante); border: 1px solid var(--filet);
  font-size: 12px; line-height: 1.3;
}
.toast b { display: block; font-size: 1.05em; }
.toast span { color: var(--texte-3); }
.toast .rond-ok {
  flex: none; width: 2.2em; height: 2.2em; border-radius: 50%;
  display: grid; place-items: center; background: var(--sauge-voile); color: var(--sauge-fonce);
}
.toast .rond-ok svg { width: 1.2em; height: 1.2em; }

/* ---------- Cadre téléphone (scènes de fonctionnalités) ---------- */
.scene-tel {
  padding: clamp(36px, 7cqi, 56px) 16px;
  border-radius: 24px; background: var(--sable);
}
.scene-tel .badge-flottant { left: 6%; top: 9%; }
.scene-tel .badge-bas { left: auto; top: auto; right: 6%; bottom: 10%; }
/* Téléphone étroit (mobile) : les badges passent au-dessus et en dessous du téléphone */
@container (max-width: 480px) {
  .scene-tel { padding-block: 60px; }
  .scene-tel .badge-flottant { left: 12px; top: 14px; }
  .scene-tel .badge-bas { left: auto; top: auto; right: 12px; bottom: 14px; }
}
.cadre-tel {
  width: 288px; max-width: 100%; margin-inline: auto;
  padding: 10px; border-radius: 42px; background: var(--encre); box-shadow: var(--ombre-maquette);
}
.ecran-tel {
  position: relative; overflow: hidden; height: 540px;
  display: flex; flex-direction: column; gap: 12px;
  padding: 22px 16px 16px; border-radius: 32px; background: var(--blanc);
  font-size: 12.5px; line-height: 1.4;
}
.tel-entete { display: flex; justify-content: space-between; color: var(--sauge-fonce); font-size: 12px; font-weight: 600; }
.tel-titre { font-family: var(--serif); font-size: 22px; line-height: 1.15; letter-spacing: -.01em; }
.tel-libelle { font-size: 10px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--texte-3); }
.ecran-tel .sous { color: var(--texte-3); font-size: 11.5px; }
.bloc { position: relative; z-index: 0; border: 1px solid var(--filet); border-radius: 12px; padding: 12px; }
.tel-bouton { margin-top: auto; padding: 11px; border-radius: 10px; background: var(--primaire); color: var(--blanc); font-weight: 600; text-align: center; }

/* ==========================================================================
   Scène 1 — Fiches clients (téléphone)
   ========================================================================== */
.fiche-tete { display: flex; align-items: center; gap: 12px; }
.avatar {
  flex: none; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; background: var(--sauge-voile); color: var(--sauge-fonce);
  font-weight: 600; font-size: 14px;
}
.objectif { margin: 4px 0 10px; font-family: var(--serif); font-size: 16px; line-height: 1.25; }
.compteur { display: flex; align-items: baseline; gap: 5px; font-size: 12px; color: var(--texte-3); }
.compteur b { font-family: var(--serif); font-size: 22px; font-weight: 500; color: var(--encre); line-height: 1; }
.segments { display: flex; gap: 4px; margin-top: 8px; }
.segments i { flex: 1; height: 6px; border-radius: 3px; background: var(--filet); overflow: hidden; }
.segments i.plein::before { content: ""; display: block; height: 100%; background: var(--sauge); transform-origin: left; }
.bloc-ligne { display: flex; align-items: center; gap: 10px; }
.bloc-ligne svg { flex: none; width: 18px; height: 18px; color: var(--sauge-fonce); }
.historique { display: flex; flex-direction: column; }
.histo { position: relative; z-index: 0; display: flex; align-items: center; gap: 10px; padding: 9px 8px; border-top: 1px solid var(--filet); border-radius: 8px; }
.histo b { width: 72px; flex: none; font-weight: 600; }
.histo span { color: var(--texte-2); }
.histo .tag { margin-left: auto; font-style: normal; font-size: 10px; font-weight: 600; color: var(--sauge-fonce); }

[data-pret] .seg-nouveau::before { animation: fc-segment var(--boucle) var(--courbe) infinite both paused; }
.scene-clients[data-pret] .compteur .avant { animation-name: fc-avant; }
.scene-clients[data-pret] .compteur .apres { animation-name: fc-apres; }
.scene-clients[data-pret] .halo { animation-name: fc-halo; }
.scene-clients[data-pret] .tag { animation-name: fc-tag; }
@keyframes fc-segment { 0%, 14% { transform: scaleX(0); } 26%, 94% { transform: scaleX(1); } 99%, 100% { transform: scaleX(0); } }
@keyframes fc-avant { 0%, 12% { opacity: 1; transform: translateY(0); } 18%, 94% { opacity: 0; transform: translateY(-8px); } 99%, 100% { opacity: 1; transform: translateY(0); } }
@keyframes fc-apres { 0%, 14% { opacity: 0; transform: translateY(8px); } 20%, 94% { opacity: 1; transform: translateY(0); } 98%, 100% { opacity: 0; } }
@keyframes fc-halo { 0%, 30% { opacity: 0; } 36%, 62% { opacity: 1; } 74%, 100% { opacity: 0; } }
@keyframes fc-tag { 0%, 32% { opacity: 0; transform: translateX(6px); } 38%, 94% { opacity: 1; transform: translateX(0); } 98%, 100% { opacity: 0; } }

/* ==========================================================================
   Scène 3 — Notes de séance dictées (téléphone)
   ========================================================================== */
.note { min-height: 112px; font-size: 13px; line-height: 1.55; }
.ligne-note { display: block; white-space: nowrap; clip-path: inset(0 0 0 0); }
.statut-note { font-size: 11.5px; font-weight: 600; }
.statut-note .avant { color: var(--terracotta-fonce); }
.statut-note .apres { color: var(--sauge-fonce); }
.micro-zone { margin-top: auto; display: flex; flex-direction: column; align-items: center; gap: 14px; padding-bottom: 6px; }
.onde { display: flex; align-items: center; gap: 4px; height: 28px; opacity: 0; }
.onde i { width: 4px; height: 100%; border-radius: 2px; background: var(--terracotta); transform: scaleY(.3); }
.micro { position: relative; width: 60px; height: 60px; }
.micro > span {
  position: absolute; inset: 0; border-radius: 50%;
  display: grid; place-items: center; color: var(--blanc);
}
.micro .avant { background: var(--terracotta); }
.micro .apres { background: var(--sauge-fonce); }
.micro svg { width: 26px; height: 26px; }
.micro::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--terracotta); opacity: 0; z-index: -1; }
.micro .avant, .micro .apres { z-index: 1; }
.micro .avant { opacity: 0; } /* état final : enregistré */

[data-pret] .ligne-note:nth-child(1) { animation-name: nt-l1; }
[data-pret] .ligne-note:nth-child(2) { animation-name: nt-l2; }
[data-pret] .ligne-note:nth-child(3) { animation-name: nt-l3; }
[data-pret] .ligne-note:nth-child(4) { animation-name: nt-l4; }
.scene-notes[data-pret] .avant { animation-name: nt-avant; }
.scene-notes[data-pret] .apres { animation-name: nt-apres; }
[data-pret] .onde { animation-name: nt-onde; }
[data-pret] .onde i { animation: nt-barre .7s ease-in-out infinite alternate both paused; }
[data-pret].en-jeu .onde i { animation-play-state: running; }
[data-pret] .onde i:nth-child(2n) { animation-delay: -.35s; }
[data-pret] .onde i:nth-child(3n) { animation-delay: -.2s; animation-duration: .55s; }
[data-pret] .micro::after { animation: nt-pouls var(--boucle) linear infinite both paused; }
@keyframes nt-l1 { 0%, 8% { clip-path: inset(0 100% 0 0); } 18%, 94% { clip-path: inset(0 0 0 0); opacity: 1; } 99%, 100% { clip-path: inset(0 0 0 0); opacity: 0; } }
@keyframes nt-l2 { 0%, 18% { clip-path: inset(0 100% 0 0); } 29%, 94% { clip-path: inset(0 0 0 0); opacity: 1; } 99%, 100% { clip-path: inset(0 0 0 0); opacity: 0; } }
@keyframes nt-l3 { 0%, 29% { clip-path: inset(0 100% 0 0); } 40%, 94% { clip-path: inset(0 0 0 0); opacity: 1; } 99%, 100% { clip-path: inset(0 0 0 0); opacity: 0; } }
@keyframes nt-l4 { 0%, 40% { clip-path: inset(0 100% 0 0); } 50%, 94% { clip-path: inset(0 0 0 0); opacity: 1; } 99%, 100% { clip-path: inset(0 0 0 0); opacity: 0; } }
@keyframes nt-avant { 0%, 55% { opacity: 1; } 59%, 100% { opacity: 0; } }
@keyframes nt-apres { 0%, 56% { opacity: 0; transform: scale(.9); } 61%, 100% { opacity: 1; transform: scale(1); } }
@keyframes nt-onde { 0%, 5% { opacity: 0; } 8%, 52% { opacity: 1; } 56%, 100% { opacity: 0; } }
@keyframes nt-barre { from { transform: scaleY(.25); } to { transform: scaleY(1); } }
@keyframes nt-pouls {
  0%, 6%  { opacity: 0; transform: scale(1); }
  7%  { opacity: .45; transform: scale(1); }  17% { opacity: 0; transform: scale(1.7); }
  18% { opacity: .45; transform: scale(1); }  28% { opacity: 0; transform: scale(1.7); }
  29% { opacity: .45; transform: scale(1); }  39% { opacity: 0; transform: scale(1.7); }
  40% { opacity: .45; transform: scale(1); }  50% { opacity: 0; transform: scale(1.7); }
  51%, 100% { opacity: 0; transform: scale(1); }
}

/* ==========================================================================
   Scène 4 — Factures et attestations (Mac)
   ========================================================================== */
.facture-grille { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 1em; }
.facture-doc { border: 1px solid var(--filet); border-radius: 8px; padding: 1.2em; }
.fd-tete { display: flex; justify-content: space-between; gap: 1em; margin-bottom: 1.4em; color: var(--texte-3); line-height: 1.4; }
.fd-tete b { color: var(--encre); }
.fd-tete .droite { text-align: right; }
.fd-ligne { display: flex; justify-content: space-between; gap: 1em; padding: .6em 0; border-bottom: 1px solid var(--filet); }
.fd-ligne small { color: var(--texte-3); font-size: .9em; }
.fd-entete { padding-top: 0; font-size: .8em; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--texte-3); }
.fd-total { display: flex; justify-content: space-between; align-items: baseline; padding-top: .8em; }
.fd-total b { font-family: var(--serif); font-size: 1.7em; font-weight: 500; }
.fd-mention { margin-top: .6em; font-size: .82em; color: var(--texte-3); }
.facture-cote { display: flex; flex-direction: column; gap: .7em; }
.moyens { display: grid; grid-template-columns: 1fr 1fr; gap: .4em; }
.moyens > span { position: relative; padding: .5em; border: 1px solid var(--filet); border-radius: 6px; text-align: center; overflow: hidden; }
.moyens .choisi { position: absolute; inset: 0; display: grid; place-items: center; background: var(--sauge-fonce); color: var(--blanc); font-weight: 600; }
.piece { display: flex; align-items: center; gap: .5em; padding: .55em .7em; border-radius: 6px; background: var(--ivoire); border: 1px solid var(--filet); font-size: .92em; }
.piece svg { flex: none; width: 1.3em; height: 1.3em; color: var(--terracotta-fonce); }
.app-entete .bascule { font-size: 1em; }
.scene-factures .toast { /* dans le flux, chevauche le bas droit du cadre */
  position: relative; z-index: 3; width: max-content; max-width: 92%; margin: -30px -3% 0 auto; }

[data-pret] .fd-l1 { animation-name: fa-ligne; }
[data-pret] .fd-total { animation-name: fa-total; }
[data-pret] .moyens .choisi { animation-name: fa-choisi; }
.scene-factures[data-pret] .avant { animation-name: fa-avant; }
.scene-factures[data-pret] .apres { animation-name: fa-apres; }
[data-pret] .piece-1 { animation-name: fa-piece1; }
[data-pret] .piece-2 { animation-name: fa-piece2; }
.scene-factures[data-pret] .toast { animation-name: fa-toast; }
@keyframes fa-ligne { 0%, 6% { opacity: 0; transform: translateY(6px); } 14%, 94% { opacity: 1; transform: translateY(0); } 99%, 100% { opacity: 0; } }
@keyframes fa-total { 0%, 14% { opacity: 0; } 20%, 94% { opacity: 1; } 99%, 100% { opacity: 0; } }
@keyframes fa-choisi { 0%, 30% { opacity: 0; transform: scale(.85); } 35%, 94% { opacity: 1; transform: scale(1); } 99%, 100% { opacity: 0; } }
@keyframes fa-avant { 0%, 40% { opacity: 1; } 44%, 94% { opacity: 0; } 99%, 100% { opacity: 1; } }
@keyframes fa-apres { 0%, 41% { opacity: 0; transform: scale(.9); } 46%, 94% { opacity: 1; transform: scale(1); } 99%, 100% { opacity: 0; } }
@keyframes fa-piece1 { 0%, 50% { opacity: 0; transform: translateX(10px); } 56%, 94% { opacity: 1; transform: translateX(0); } 99%, 100% { opacity: 0; } }
@keyframes fa-piece2 { 0%, 55% { opacity: 0; transform: translateX(10px); } 61%, 94% { opacity: 1; transform: translateX(0); } 99%, 100% { opacity: 0; } }
@keyframes fa-toast { 0%, 66% { opacity: 0; transform: translateY(14px); } 72%, 93% { opacity: 1; transform: translateY(0); } 98%, 100% { opacity: 0; } }

/* ==========================================================================
   Scène 5 — Prospection des structures (Mac)
   ========================================================================== */
.kanban { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: auto repeat(3, 5.4em); }
.kb-fond { grid-row: 1 / -1; margin: 0 .3em; border-radius: 8px; background: var(--ivoire); }
.kb-tete { grid-row: 1; display: flex; justify-content: space-between; margin: 0 .3em; padding: .7em .7em .5em; font-weight: 600; font-size: .9em; }
.kb-tete i { font-style: normal; color: var(--texte-3); font-weight: 400; }
.kb-carte {
  position: relative; z-index: 1; margin: .25em .55em; padding: .55em .65em; min-width: 0;
  border-radius: 6px; background: var(--blanc); border: 1px solid var(--filet);
  display: flex; flex-direction: column; gap: .15em; line-height: 1.25;
}
.kb-carte b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kb-carte > span { color: var(--texte-3); font-size: .9em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kb-carte .bascule, .kb-carte .pill { justify-self: start; margin-top: .2em; font-size: .85em; }
.kb-carte .bascule { display: grid; justify-items: start; }
.kb-mobile { z-index: 2; border-color: var(--sauge); box-shadow: 0 8px 18px -10px rgba(46, 42, 38, .45);
  transform: translateX(calc(200% + 2.2em)); /* état final : colonne « Gagnée » */ }
.kb-mobile .etat { opacity: 0; }
.kb-mobile .etat-gagnee { opacity: 1; }

[data-pret] .kb-mobile { animation-name: pr-carte; }
[data-pret] .etat-relance { animation-name: pr-relance; }
[data-pret] .etat-rdv { animation-name: pr-rdv; }
[data-pret] .etat-gagnee { animation-name: pr-gagnee; }
/* Une colonne = largeur de la carte + ses marges latérales (2 × .55em = 1.1em). */
@keyframes pr-carte {
  0%, 14%  { opacity: 1; transform: translateX(0); }
  18%      { transform: translate(0, -4px) rotate(-1.5deg); }
  30%      { transform: translate(calc(100% + 1.1em), -4px) rotate(-1.5deg); }
  34%, 48% { transform: translateX(calc(100% + 1.1em)); }
  52%      { transform: translate(calc(100% + 1.1em), -4px) rotate(-1.5deg); }
  64%      { transform: translate(calc(200% + 2.2em), -4px) rotate(-1.5deg); }
  68%, 92% { opacity: 1; transform: translateX(calc(200% + 2.2em)); }
  96%      { opacity: 0; transform: translateX(calc(200% + 2.2em)); }
  97%      { opacity: 0; transform: translateX(0); }
  100%     { opacity: 1; transform: translateX(0); }
}
@keyframes pr-relance { 0%, 28% { opacity: 1; } 32%, 97% { opacity: 0; } 100% { opacity: 1; } }
@keyframes pr-rdv { 0%, 30% { opacity: 0; } 34%, 60% { opacity: 1; } 64%, 100% { opacity: 0; } }
@keyframes pr-gagnee { 0%, 62% { opacity: 0; } 66%, 95% { opacity: 1; } 97%, 100% { opacity: 0; } }

/* ==========================================================================
   Scène 6 — Pilotage et fin de mois (Mac)
   ========================================================================== */
.tuiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6em; }
.tuile { border: 1px solid var(--filet); border-radius: 8px; padding: .7em .8em; display: flex; flex-direction: column; gap: .15em; color: var(--texte-3); font-size: .9em; }
.tuile b { font-family: var(--serif); font-weight: 500; font-size: 1.9em; line-height: 1.1; color: var(--encre); }
.tuile small { font-size: .9em; }
.tuile-alerte b { color: var(--terracotta-fonce); }
.pilotage-bas { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: .6em; margin-top: .6em; }
.graphe { border: 1px solid var(--filet); border-radius: 8px; padding: .8em; }
.barres { display: flex; align-items: flex-end; gap: .7em; height: 9em; margin-top: .8em; border-bottom: 1px solid var(--filet-fort); }
.barres div { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; }
.barres i { width: 100%; height: var(--h); border-radius: 4px 4px 0 0; background: var(--filet-fort); transform-origin: bottom; }
.barres div:last-child i { background: var(--sauge); }
.barres-mois { display: flex; gap: .7em; margin-top: .35em; font-size: .8em; color: var(--texte-3); }
.barres-mois span { flex: 1; text-align: center; }
.urssaf { position: relative; z-index: 0; border: 1px solid var(--sauge); border-radius: 8px; padding: .9em; display: flex; flex-direction: column; gap: .3em; }
.urssaf .montant { font-family: var(--serif); font-size: 2.1em; line-height: 1.1; }
.urssaf .sous { color: var(--texte-2); }
.urssaf .bascule { margin-top: auto; }
.urssaf .bouton-app { padding: .5em .8em; border-radius: 6px; background: var(--sauge-fonce); color: var(--blanc); font-weight: 600; text-align: center; }
.urssaf .bouton-app.avant { background: var(--blanc); color: var(--sauge-fonce); border: 1px solid var(--sauge); }

[data-pret] .barres i { animation-name: pi-barre; }
[data-pret] .barres div:nth-child(2) i { animation-delay: .1s; }
[data-pret] .barres div:nth-child(3) i { animation-delay: .2s; }
[data-pret] .barres div:nth-child(4) i { animation-delay: .3s; }
[data-pret] .barres div:nth-child(5) i { animation-delay: .4s; }
[data-pret] .barres div:nth-child(6) i { animation-delay: .5s; }
.scene-pilotage[data-pret] .tuile .avant { animation-name: pi-avant; }
.scene-pilotage[data-pret] .tuile .apres { animation-name: pi-apres; }
[data-pret] .urssaf .halo { animation-name: pi-halo; }
[data-pret] .urssaf .avant { animation-name: pi-bouton-avant; }
[data-pret] .urssaf .apres { animation-name: pi-bouton-apres; }
@keyframes pi-barre { 0%, 4% { transform: scaleY(0); } 22%, 92% { transform: scaleY(1); } 99%, 100% { transform: scaleY(0); } }
@keyframes pi-avant { 0%, 34% { opacity: 1; transform: translateY(0); } 40%, 94% { opacity: 0; transform: translateY(-8px); } 99%, 100% { opacity: 1; transform: translateY(0); } }
@keyframes pi-apres { 0%, 36% { opacity: 0; transform: translateY(8px); } 42%, 94% { opacity: 1; transform: translateY(0); } 98%, 100% { opacity: 0; } }
@keyframes pi-halo { 0%, 48% { opacity: 0; } 54%, 70% { opacity: 1; } 80%, 100% { opacity: 0; } }
@keyframes pi-bouton-avant { 0%, 62% { opacity: 1; } 66%, 94% { opacity: 0; } 99%, 100% { opacity: 1; } }
@keyframes pi-bouton-apres { 0%, 63% { opacity: 0; transform: scale(.94); } 68%, 94% { opacity: 1; transform: scale(1); } 98%, 100% { opacity: 0; } }

/* Petits cadres Mac : tuiles 2 × 2, graphe et URSSAF empilés, 3 colonnes de prospection */
@container (max-width: 560px) {
  .app-menu { display: none; }
  .tuiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pilotage-bas, .facture-grille { grid-template-columns: 1fr; }
  .barres { height: 6em; }
  .kanban { grid-template-columns: 0 repeat(3, minmax(0, 1fr)); }
  .kanban .k1 { display: none; }
  .scene-factures .toast { margin: -10px 3% 0 auto; }
}

/* ==========================================================================
   Hero — l'écran « Aujourd'hui » prend vie
   ========================================================================== */
.scene-hero { container-type: normal; }
.scene-hero .ecran { position: relative; }
.ecran .toasts { position: absolute; z-index: 2; left: 10px; right: 10px; top: 12px; display: grid; }
.ecran .toasts .toast { grid-area: 1 / 1; opacity: 0; }
.ecran .toasts .toast:last-child { opacity: 1; } /* état final : paiement noté */
.scene-hero .carte-ecran { position: relative; z-index: 0; }
.scene-hero .montant.bascule { display: grid; }

.scene-hero[data-pret] .carte-ecran .halo { animation-name: he-halo; }
[data-pret] .toast-rappel { animation-name: he-toast1; }
[data-pret] .toast-paiement { animation-name: he-toast2; }
.scene-hero[data-pret] .montant .avant { animation-name: he-avant; }
.scene-hero[data-pret] .montant .apres { animation-name: he-apres; }
@keyframes he-halo { 0%, 4% { opacity: 0; } 10%, 18% { opacity: 1; } 26%, 100% { opacity: 0; } }
@keyframes he-toast1 { 0%, 20% { opacity: 0; transform: translateY(-14px); } 25%, 44% { opacity: 1; transform: translateY(0); } 49%, 100% { opacity: 0; transform: translateY(-14px); } }
@keyframes he-toast2 { 0%, 54% { opacity: 0; transform: translateY(-14px); } 59%, 88% { opacity: 1; transform: translateY(0); } 93%, 100% { opacity: 0; transform: translateY(-14px); } }
@keyframes he-avant { 0%, 60% { opacity: 1; transform: translateY(0); } 65%, 94% { opacity: 0; transform: translateY(-8px); } 99%, 100% { opacity: 1; transform: translateY(0); } }
@keyframes he-apres { 0%, 62% { opacity: 0; transform: translateY(8px); } 67%, 94% { opacity: 1; transform: translateY(0); } 98%, 100% { opacity: 0; } }

/* ==========================================================================
   « Une séance, quelques gestes » — téléphone synchronisé avec les 4 étapes
   Boucle de 12 s : 3 s par étape. Chaque étape et chaque écran utilisent la
   même animation (fenêtre active 0-25 %), décalée par un délai négatif.
   ========================================================================== */
.seance-gauche { display: flex; flex-direction: column; gap: 40px; }
.seance-gauche .cadre-tel { width: 264px; margin-inline: 0; }
.seance-gauche .ecran-tel { height: 470px; }
.ecran-etape { position: absolute; inset: 0; padding: 22px 16px 16px; display: flex; flex-direction: column; gap: 12px; opacity: 0; }
.ecran-etape:first-child { opacity: 1; } /* état final (sans animation) : écran 1 */
.moyens-tel { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.moyens-tel span { padding: 8px; border: 1px solid var(--filet); border-radius: 8px; text-align: center; }
.moyens-tel .actif { background: var(--sauge-fonce); border-color: var(--sauge-fonce); color: var(--blanc); font-weight: 600; }
.champ-tel { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--filet); }
.champ-tel span { color: var(--texte-3); }
.montant-tel { font-family: var(--serif); font-size: 34px; line-height: 1; }
.etapes li { position: relative; }
.etapes .fil { position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--sauge-fonce); transform-origin: left; opacity: 0; }
@media (max-width: 860px) {
  .seance-gauche .cadre-tel { margin-inline: auto; }
}

[data-pret].seance .anim { animation-duration: 12s; }
[data-pret] .etapes .fil { animation-name: se-fil; animation-timing-function: linear; }
[data-pret] .ecran-etape { animation-name: se-ecran; }
[data-pret].seance .e2 { animation-delay: -9s; }
[data-pret].seance .e3 { animation-delay: -6s; }
[data-pret].seance .e4 { animation-delay: -3s; }
@keyframes se-fil { 0% { opacity: 1; transform: scaleX(0); } 25% { opacity: 1; transform: scaleX(1); } 26%, 100% { opacity: 0; transform: scaleX(1); } }
@keyframes se-ecran { 0% { opacity: 0; transform: translateY(10px); } 3%, 23% { opacity: 1; transform: translateY(0); } 26%, 100% { opacity: 0; transform: translateY(0); } }

/* ==========================================================================
   Scène 7 — Réservation en ligne (deux téléphones, boucle de 12 s)
   Client : 0-30 % choix de la séance · 30-58 % choix du créneau (10:00)
            · 58 % « Demande envoyée », e-mail vérifié.
   Praticienne : 60 % notification push (sans nom ni motif) · 66 % la demande
            apparaît · 78 % « Accepter » · 84 % acceptée.
   Client : 86 % la demande passe à « Séance confirmée ».
   État final (sans animation) : séance confirmée, demande acceptée.
   Petits écrans : seul le téléphone du client, la notification en dessous.
   ========================================================================== */
.scene-resa { --boucle: 12s; display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 20px; }
.resa-tel { width: 50%; max-width: 268px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.resa-pro { margin-top: 56px; }
.resa-legende { font-size: 12px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--texte-3); }
.scene-resa .cadre-tel { width: 100%; }
.scene-resa .ecran-tel { height: 500px; font-size: 12px; }
.scene-resa .tel-titre { font-size: 21px; }
.scene-resa em { font-style: normal; }
.scene-resa .centre { text-align: center; }

/* Écrans successifs du client (superposés) */
.resa-ecran { position: absolute; inset: 0; padding: 22px 16px 16px; display: flex; flex-direction: column; gap: 10px; opacity: 0; }
.resa-ecran.re-3 { opacity: 1; } /* état final */
.resa-qui { display: flex; align-items: center; gap: 10px; padding-bottom: 4px; }
.resa-qui .avatar { width: 38px; height: 38px; font-size: 12.5px; }
.resa-choix { display: flex; flex-direction: column; gap: 6px; }
.resa-choix span { display: flex; align-items: center; gap: 9px; padding: 9px 10px; border: 1px solid var(--filet); border-radius: 10px; }
.resa-choix i { flex: none; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--filet-fort); }
.resa-choix .on { border-color: var(--sauge); background: var(--sauge-voile); font-weight: 600; }
.resa-choix .on i { border: 4px solid var(--sauge-fonce); }
.resa-presta { position: relative; z-index: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border: 1px solid var(--filet-fort); border-radius: 10px; }
.prix-tel { font-family: var(--serif); font-size: 18px; }
.resa-jours { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; margin-block: 4px; }
.resa-jours span { display: flex; flex-direction: column; align-items: center; padding: 6px 0; border-radius: 8px; font-size: 10.5px; color: var(--texte-3); }
.resa-jours b { font-family: var(--serif); font-size: 16px; font-weight: 500; color: var(--encre); }
.resa-jours .on { background: var(--sauge-fonce); color: var(--blanc); }
.resa-jours .on b { color: var(--blanc); }
.resa-jours .off { opacity: .45; }
.resa-creneaux { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.resa-creneaux span { position: relative; overflow: hidden; padding: 8px 0; border: 1px solid var(--filet-fort); border-radius: 8px; text-align: center; font-weight: 600; }
.resa-creneaux em { position: absolute; inset: 0; display: grid; place-items: center; background: var(--sauge-fonce); color: var(--blanc); opacity: 0; }
.resa-etat { display: grid; }
.resa-etat > span { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.rond-etat { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--sauge-voile); color: var(--sauge-fonce); }
.rond-etat.attente { background: var(--terracotta-voile); color: var(--terracotta-fonce); }
.rond-etat svg { width: 24px; height: 24px; }
.resa-verifie { align-self: flex-start; font-size: 11px; }
.resa-rdv-tete { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.resa-rdv-tete .pill { font-size: 10.5px; }
.resa-date { font-family: var(--serif); font-size: 17px; margin-top: 2px; }
.resa-bouton-sec, .resa-gerer span { padding: 9px; border: 1px solid var(--filet-fort); border-radius: 10px; text-align: center; font-weight: 600; }
/* « Ajouter à mon agenda » seulement une fois confirmé ; avant, le créneau est gardé */
.resa-agenda { display: grid; }
.resa-agenda .avant { align-self: center; text-align: center; }
.resa-gerer { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; color: var(--sauge-fonce); }

/* Téléphone de la praticienne */
.resa-push {
  position: absolute; z-index: 3; left: 8px; right: 8px; top: 10px;
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border-radius: 14px; border: 1px solid var(--filet); background: var(--ivoire); box-shadow: var(--ombre-flottante);
  opacity: 0; /* état final : notification déjà lue */
}
.push-icone { flex: none; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: var(--blanc); border: 1px solid var(--filet); color: var(--sauge-fonce); }
.resa-push b { display: block; font-size: 12.5px; }
.resa-push span { color: var(--texte-3); font-size: 11.5px; }
.resa-slot { position: relative; }
.resa-demande { display: flex; flex-direction: column; gap: 8px; }
.resa-vide { position: absolute; inset: 0 0 auto; display: flex; flex-direction: column; gap: 8px; opacity: 0; /* état final : demande traitée */ }
.resa-vide .bloc { color: var(--texte-3); text-align: center; }
.bloc-demande { border-left: 3px solid var(--terracotta); display: flex; flex-direction: column; gap: 2px; }
.resa-reponse { display: grid; margin-top: 8px; }
.resa-reponse .avant { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.resa-reponse em { position: relative; overflow: hidden; display: block; padding: 8px; border-radius: 8px; border: 1px solid var(--filet-fort); text-align: center; font-weight: 600; }
.resa-reponse .accepter { background: var(--sauge-fonce); border-color: var(--sauge-fonce); color: var(--blanc); }
.resa-reponse .acceptee { background: var(--sauge-voile); border-color: transparent; color: var(--sauge-fonce); font-size: 11.5px; }
.resa-reponse .tap { position: absolute; left: 50%; top: 50%; width: 28px; height: 28px; margin: -14px; border-radius: 50%; background: rgba(255, 255, 255, .5); opacity: 0; }

/* Notification affichée sous le téléphone du client (petits écrans seulement) */
.resa-toast-mobile { display: none; position: relative; z-index: 3; width: 92%; max-width: 320px; margin: -44px auto 0; }
.resa-toast-mobile .bascule { display: grid; }
.resa-toast-mobile .bascule > span { display: block; }
.resa-toast-mobile .rond-ok svg { width: 1.1em; height: 1.1em; }

/* La scène est son propre conteneur : elle ne peut pas s'interroger elle-même,
   d'où le flex-wrap ci-dessus, qui renvoie la notification à la ligne. */
@container (max-width: 540px) {
  .resa-client { width: 100%; }
  .resa-pro, .resa-legende { display: none; }
  .resa-toast-mobile { display: flex; }
}

/* Animations */
.scene-resa[data-pret] .re-1 { animation-name: rs-e1; }
.scene-resa[data-pret] .re-2 { animation-name: rs-e2; }
.scene-resa[data-pret] .re-3 { animation-name: rs-e3; }
.scene-resa[data-pret] .resa-presta .halo { animation-name: rs-halo; }
.scene-resa[data-pret] .resa-creneaux em { animation-name: rs-creneau; }
.scene-resa[data-pret] .resa-verifie { animation-name: rs-verifie; }
.scene-resa[data-pret] .re-3 .avant { animation-name: rs-avant; }
.scene-resa[data-pret] .re-3 .apres { animation-name: rs-apres; }
.scene-resa[data-pret] .resa-push { animation-name: rs-push; }
.scene-resa[data-pret] .resa-demande { animation-name: rs-demande; }
.scene-resa[data-pret] .resa-vide { animation-name: rs-vide; }

.scene-resa[data-pret] .resa-reponse .avant,
.scene-resa[data-pret] .resa-toast-mobile .avant { animation-name: rs-rep-avant; }
.scene-resa[data-pret] .resa-reponse .apres,
.scene-resa[data-pret] .resa-toast-mobile .apres { animation-name: rs-rep-apres; }
.scene-resa[data-pret] .tap { animation-name: rs-tap; }
.scene-resa[data-pret] .resa-toast-mobile { animation: rs-toast var(--boucle) var(--courbe) infinite both paused; }
.scene-resa[data-pret].en-jeu .resa-toast-mobile { animation-play-state: running; }

@keyframes rs-e1 { 0%, 27% { opacity: 1; transform: translateX(0); } 31%, 96% { opacity: 0; transform: translateX(-14px); } 97% { opacity: 0; transform: translateX(0); } 100% { opacity: 1; transform: translateX(0); } }
@keyframes rs-e2 { 0%, 28% { opacity: 0; transform: translateX(14px); } 32%, 55% { opacity: 1; transform: translateX(0); } 59%, 100% { opacity: 0; transform: translateX(-14px); } }
@keyframes rs-e3 { 0%, 56% { opacity: 0; transform: translateX(14px); } 60%, 95% { opacity: 1; transform: translateX(0); } 98%, 100% { opacity: 0; transform: translateX(0); } }
@keyframes rs-halo { 0%, 14% { opacity: 0; } 18%, 27% { opacity: 1; } 30%, 100% { opacity: 0; } }
@keyframes rs-creneau { 0%, 44% { opacity: 0; transform: scale(.9); } 48%, 100% { opacity: 1; transform: scale(1); } }
@keyframes rs-verifie { 0%, 61% { opacity: 0; transform: translateY(4px); } 65%, 100% { opacity: 1; transform: translateY(0); } }
@keyframes rs-avant { 0%, 84% { opacity: 1; } 87%, 100% { opacity: 0; } }
@keyframes rs-apres { 0%, 85% { opacity: 0; transform: scale(.92); } 89%, 100% { opacity: 1; transform: scale(1); } }
@keyframes rs-push { 0%, 58% { opacity: 0; transform: translateY(-120%); } 62%, 74% { opacity: 1; transform: translateY(0); } 78%, 100% { opacity: 0; transform: translateY(-120%); } }
@keyframes rs-demande { 0%, 63% { opacity: 0; transform: translateY(-6px); } 67%, 96% { opacity: 1; transform: translateY(0); } 99%, 100% { opacity: 0; } }
@keyframes rs-vide { 0%, 60% { opacity: 1; } 63%, 97% { opacity: 0; } 100% { opacity: 1; } }
@keyframes rs-rep-avant { 0%, 81% { opacity: 1; } 84%, 100% { opacity: 0; } }
@keyframes rs-rep-apres { 0%, 82% { opacity: 0; transform: scale(.95); } 85%, 100% { opacity: 1; transform: scale(1); } }
@keyframes rs-tap { 0%, 76% { opacity: 0; transform: scale(.4); } 78% { opacity: 1; transform: scale(1); } 82%, 100% { opacity: 0; transform: scale(1.6); } }
@keyframes rs-toast { 0%, 58% { opacity: 0; transform: translateY(10px); } 62%, 95% { opacity: 1; transform: translateY(0); } 98%, 100% { opacity: 0; } }