/* Scène « abonnement » : à gauche le téléphone de Camille, qui s'abonne au
   panier d'huîtres de Chez Lucie puis range son téléphone ; chaque vendredi
   matin l'écran verrouillé s'allume sur son reçu. À droite le back-office de
   Lucie, dans Chrome : les vendredis passent à « Prélevé » et le montant
   monte. Pas de légende, pas de curseur. Le rideau de fin vient du kit.

   LE MINUTAGE, en pourcentages d'une boucle de 12 secondes :
      6,2 %  Camille touche « Semaine » : le prix et le total suivent
     15,2 %  elle touche « S'abonner » ; les abonnés de Lucie passent à 38
     23,4 %  l'écran s'éteint
     27,2 %  vendredi 1 : l'écran s'allume sur le reçu, le vendredi est
             prélevé chez Lucie (27,8 %)
       41 %  vendredi 2, puis 55 %, puis 69 % ; entre deux, l'écran se met
             en veille. Plus rien ne bouge après 73 %
       95 %  fondu au blanc ; tout revient au début entre 98,4 et 99,9 %

   LA TOILE : 520 x 560. Le téléphone de (4, 64) à (240, 556), écran de
   222 x 478 en (11, 71). La fenêtre Chrome de (232, 44) à (518, 540). */
.fn-scene--boutique {
  --sc-haut: 560px;
  /* Les filets, tous neutres. */
  --line-chrome: #E3E6EA; --line-site: #E8E8E8; --line-safari: rgba(0, 0, 0, .08); --line-wp: #DCDCDE;
  --wp-fond: #F0F0F1; --wp-noir: #1D2327; --wp-gris: #646970; --wp-bord: #C3C4C7;
  /* Les cibles, mesurées au banc : le coin du doigt (rond de 26 px), et la
     place du fond blanc du sélecteur sous « Mois ». */
  --sc-ab-sem: 45.67px, 313px; --sc-ab-bt: 109px, 426px; --sc-ab-mois: 126.67px;
  /* Les reçus empilés : devant, puis derrière. */
  --sc-ab-n0: #F2F2F5; --sc-ab-n1: #D8DAE0; --sc-ab-n2: #BFC3CB;
  line-height: 1.35;
}
.fn-scene--boutique svg { display: block; }
.fn-scene--boutique p { margin: 0; }
.fn-scene--boutique i { font-style: normal; }
/* Une pile : les valeurs successives d'un même endroit, superposées dans la
   même case de grille ; la case prend la taille de la plus longue. */
.sc-boutique-pile { display: grid; }
.sc-boutique-pile > i { grid-area: 1 / 1; }
.sc-boutique-apres, .sc-boutique-sem,
.sc-boutique-cu1, .sc-boutique-cu2, .sc-boutique-cu3, .sc-boutique-cu4,
.sc-boutique-ok1, .sc-boutique-ok2, .sc-boutique-ok3, .sc-boutique-ok4,
.sc-boutique-d2, .sc-boutique-d3, .sc-boutique-d4 { opacity: 0; }

/* ═══ LES TITRES ══════════════════════════════════════════════════════ */
.sc-boutique-qui {
  position: absolute;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  text-align: center; white-space: nowrap;
}
.sc-boutique-qui b { font-size: 0.9375rem; font-weight: 800; line-height: 19px; letter-spacing: -.01em; color: #0A0A0A; }
.sc-boutique-qui span { font-size: 0.6875rem; line-height: 14px; color: #737373; }
.sc-boutique-qui--bo { top: 2px; left: 232px; width: 286px; }
.sc-boutique-qui--tel { top: 24px; left: 4px; width: 236px; }

/* ═══ LE BACK-OFFICE DE LUCIE : CHROME ════════════════════════════════ */
.sc-boutique-chrome {
  position: absolute; top: 44px; left: 232px; z-index: 1;
  display: flex; flex-direction: column;
  width: 286px; height: 496px; overflow: hidden;
  border: 1px solid #C7CCD4; border-radius: 8px; background: #FFFFFF;
  box-shadow: 0 12px 30px rgba(31, 36, 46, .14);
}
.sc-boutique-c-onglets { position: relative; flex: none; height: 30px; background: #DEE3EA; }
.sc-boutique-c-onglet {
  position: absolute; top: 6px; left: 14px;
  display: flex; align-items: center; gap: 6px;
  width: 176px; height: 24px; padding: 0 8px 0 9px;
  border-radius: 8px 8px 0 0; background: #FFFFFF; color: #1F1F1F;
}
.sc-boutique-c-onglet > svg { width: 10px; height: 10px; flex: none; color: #474747; }
.sc-boutique-c-logo {
  display: grid; place-items: center; flex: none; width: 13px; height: 13px;
  border-radius: 3px; background: #0A0A0A; color: #FFFFFF;
  font-size: 8px; font-weight: 800; line-height: 1;
}
.sc-boutique-c-titre { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; font-size: 0.6875rem; }
.sc-boutique-c-plus { position: absolute; top: 10px; left: 196px; color: #474747; }
.sc-boutique-c-plus svg { width: 12px; height: 12px; }
.sc-boutique-fen { position: absolute; top: 0; right: 0; display: flex; height: 100%; }
.sc-boutique-fen i { display: grid; place-items: center; width: 24px; height: 100%; color: #1F1F1F; }
.sc-boutique-fen svg { width: 10px; height: 10px; }
.sc-boutique-c-outils {
  display: flex; align-items: center; gap: 1px; flex: none;
  height: 34px; padding: 0 4px 0 8px;
  border-bottom: 1px solid var(--line-chrome); color: #474747;
}
.sc-boutique-c-outils > i { display: grid; place-items: center; width: 24px; height: 24px; }
.sc-boutique-c-outils > i svg { width: 13px; height: 13px; }
.sc-boutique-c-off { color: #C4C7C5; }
.sc-boutique-c-adresse {
  display: flex; align-items: center; gap: 5px; flex: 1; min-width: 0;
  height: 26px; margin: 0 3px; padding: 0 8px;
  border-radius: 13px; background: #EDF1F7;
  font-size: 0.6875rem; color: #1F1F1F; white-space: nowrap;
}
.sc-boutique-c-adresse > svg { width: 12px; height: 12px; flex: none; }
.sc-boutique-c-etoile { margin-left: auto; }
.sc-boutique-c-etoile svg { width: 12px; height: 12px; }
.sc-boutique-vue { position: relative; flex: 1; overflow: hidden; background: var(--wp-fond); color: var(--wp-noir); }

/* La barre noire de WordPress, puis la page « Abonnements ». */
.sc-boutique-wp-barre {
  display: flex; align-items: center; justify-content: space-between;
  height: 26px; padding: 0 10px;
  background: var(--wp-noir); color: #F0F0F1; font-size: 0.6875rem;
}
.sc-boutique-wp-barre span { display: flex; align-items: center; gap: 5px; }
.sc-boutique-wp-barre svg { width: 13px; height: 13px; color: #A7AAAD; }
.sc-boutique-wp { display: flex; flex-direction: column; padding: 12px 8px; }
.fn-scene--boutique .sc-boutique-wp-h1 { font-size: 1.0625rem; font-weight: 400; line-height: 21px; }
.fn-scene--boutique .sc-boutique-wp-sous { margin: 2px 0 10px; font-size: 0.6875rem; line-height: 14px; color: var(--wp-gris); }
.sc-boutique-tuiles { display: flex; gap: 6px; margin-bottom: 6px; }
.sc-boutique-tuile {
  display: flex; flex-direction: column; flex: 1; min-width: 0;
  padding: 7px 10px; border: 1px solid var(--wp-bord); border-radius: 4px; background: #FFFFFF;
}
.sc-boutique-tuile small { font-size: 0.6875rem; line-height: 14px; color: var(--wp-gris); }
.sc-boutique-tuile b { font-size: 1.125rem; font-weight: 600; line-height: 24px; font-variant-numeric: tabular-nums; }
.sc-boutique-tuile--large { flex: none; margin-bottom: 10px; }
.sc-boutique-tuile--large b { font-size: 1.5rem; line-height: 30px; letter-spacing: -.01em; white-space: nowrap; }
/* Le tableau des vendredis, à la manière des listes de WordPress. */
.sc-boutique-table { display: block; border: 1px solid var(--wp-bord); background: #FFFFFF; font-size: 0.6875rem; }
.sc-boutique-tr {
  display: grid; grid-template-columns: 74px 42px 62px 1fr; align-items: center;
  height: 30px; padding: 0 8px; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.sc-boutique-tr + .sc-boutique-tr { border-top: 1px solid var(--line-wp); }
.sc-boutique-tr:nth-child(odd) { background: #F6F7F7; }
.sc-boutique-tr--tete { height: 26px; font-weight: 600; }
.sc-boutique-tr > :nth-child(2),
.sc-boutique-tr > :nth-child(3) { justify-items: end; text-align: right; }
.sc-boutique-tr > :nth-child(4) { padding-left: 12px; }
.sc-boutique-etat { display: grid; justify-items: start; }
.sc-boutique-etat > i { grid-area: 1 / 1; }
.sc-boutique-tag {
  display: inline-grid; place-items: center; height: 18px; padding: 0 6px;
  border-radius: 4px; background: #F0F0F1; color: #50575E; font-weight: 500;
}
.sc-boutique-tag--ok { background: #EDFAEF; color: #00602A; font-weight: 600; }

/* ═══ LE TÉLÉPHONE DE CAMILLE ═════════════════════════════════════════ */
.sc-boutique-tel {
  position: absolute; top: 64px; left: 4px; z-index: 2;
  width: 236px; height: 492px; padding: 7px;
  border-radius: 40px; background: #0A0A0A;
  box-shadow: 0 16px 34px rgba(31, 36, 46, .22);
}
.sc-boutique-ecran { position: relative; height: 100%; overflow: hidden; border-radius: 33px; background: #FFFFFF; color: #0A0A0A; }
.sc-boutique-ilot {
  position: absolute; top: 8px; left: 50%; z-index: 9;
  width: 66px; height: 19px; margin-left: -33px; border-radius: 10px; background: #000000;
}
.sc-boutique-maison {
  position: absolute; bottom: 5px; left: 50%; z-index: 9;
  width: 80px; height: 4px; margin-left: -40px; border-radius: 2px; background: #0A0A0A;
}
.sc-boutique-statut {
  position: absolute; top: 0; left: 0; right: 0; z-index: 3;
  display: flex; align-items: center; gap: 4px;
  height: 34px; padding: 2px 20px 0 26px; font-size: 0.6875rem; background: #FFFFFF;
}
.sc-boutique-statut b { flex: 1; font-weight: 700; }
.sc-boutique-reseau { display: flex; align-items: flex-end; gap: 1.5px; height: 8px; }
.sc-boutique-reseau i { display: block; width: 2.5px; border-radius: 1px; background: currentColor; }
.sc-boutique-reseau i:nth-child(1) { height: 3px; }
.sc-boutique-reseau i:nth-child(2) { height: 4.5px; }
.sc-boutique-reseau i:nth-child(3) { height: 6px; }
.sc-boutique-reseau i:nth-child(4) { height: 8px; }
.sc-boutique-batt { display: block; width: 16px; height: 8px; padding: 1px; border: 1px solid currentColor; border-radius: 2.5px; opacity: .9; }
.sc-boutique-batt i { display: block; width: 75%; height: 100%; border-radius: 1px; background: currentColor; }
.sc-boutique-sf-vue { position: absolute; top: 34px; left: 0; right: 0; bottom: 84px; overflow: hidden; }
.sc-boutique-s-nav {
  display: flex; align-items: center; justify-content: space-between;
  height: 36px; padding: 0 14px; border-bottom: 1px solid var(--line-site);
}
.sc-boutique-s-nav b { font-size: 0.8125rem; font-weight: 800; letter-spacing: -.01em; }
.sc-boutique-s-nav svg { width: 16px; height: 16px; }
.sc-boutique-page { display: flex; flex-direction: column; padding: 10px 14px 0; }
.sc-boutique-photo { display: block; width: 100%; height: 82px; object-fit: cover; border-radius: 10px; }
.fn-scene--boutique .sc-boutique-h { margin-top: 8px; font-size: 1.0625rem; font-weight: 800; line-height: 21px; letter-spacing: -.01em; }
.fn-scene--boutique .sc-boutique-sous { margin-top: 1px; font-size: 0.75rem; line-height: 16px; color: #525252; }
.fn-scene--boutique .sc-boutique-lab { margin: 11px 0 6px; font-size: 0.6875rem; font-weight: 700; line-height: 14px; letter-spacing: .06em; text-transform: uppercase; color: #737373; }
/* Le sélecteur segmenté d'iOS. */
.sc-boutique-seg { position: relative; display: flex; height: 32px; padding: 2px; border-radius: 9px; background: #EEEEF0; }
.sc-boutique-seg-fond {
  position: absolute; top: 2px; left: 2px;
  width: calc((100% - 4px) / 3); height: 28px; border-radius: 7px; background: #FFFFFF;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
  transform: translateX(var(--sc-ab-mois));
}
.sc-boutique-s { position: relative; display: grid; place-items: center; flex: 1; font-size: 0.75rem; font-weight: 600; }
.sc-boutique-recap { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; padding: 8px 11px; border-radius: 10px; background: #F5F5F3; }
.sc-boutique-r { display: flex; align-items: baseline; justify-content: space-between; font-size: 0.75rem; line-height: 20px; color: #525252; }
.sc-boutique-r b { justify-items: end; color: #0A0A0A; font-weight: 700; font-variant-numeric: tabular-nums; }
.sc-boutique-r-prix { font-size: 1rem; font-weight: 800; }
.sc-boutique-r--an { line-height: 16px; }
.sc-boutique-bt {
  display: grid; place-items: center; height: 42px; margin-top: 10px;
  border-radius: 10px; background: #0A0A0A; color: #FFFFFF;
  font-size: 0.8125rem; font-weight: 600;
}
/* L'abonnement pris. */
.sc-boutique-merci {
  position: absolute; top: 36px; left: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  padding: 0 18px; background: #FFFFFF; text-align: center;
  opacity: 0;
}
.sc-boutique-merci i { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 8px; border-radius: 50%; background: #0A0A0A; color: #FFFFFF; }
.sc-boutique-merci i svg { width: 22px; height: 22px; stroke-width: 2; }
.sc-boutique-merci b { font-size: 1rem; font-weight: 800; }
.sc-boutique-merci span { margin-top: 8px; font-size: 0.75rem; color: #525252; }
.sc-boutique-merci strong { font-size: 0.9375rem; font-weight: 800; }
.sc-boutique-merci small { margin-top: 8px; font-size: 0.6875rem; line-height: 1.45; color: #737373; }
.sc-boutique-sf-barre {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 84px; padding: 7px 10px 0;
  border-top: 1px solid var(--line-safari); background: rgba(249, 249, 249, .96);
}
.sc-boutique-sf-adresse {
  display: flex; align-items: center; justify-content: space-between;
  height: 34px; padding: 0 10px;
  border-radius: 12px; background: rgba(118, 118, 128, .12);
  font-size: 0.75rem;
}
.sc-boutique-sf-adresse small { font-size: 0.6875rem; font-weight: 600; }
.sc-boutique-sf-adresse svg { width: 13px; height: 13px; }
.sc-boutique-sf-outils { display: flex; align-items: center; justify-content: space-between; height: 28px; margin-top: 4px; padding: 0 6px; color: #0A84FF; }
.sc-boutique-sf-outils svg { width: 17px; height: 17px; }
.sc-boutique-sf-outils svg:nth-child(2) { color: #C7C7CC; }

/* L'écran verrouillé. */
.sc-boutique-verrou {
  position: absolute; inset: 0; z-index: 5;
  background: linear-gradient(172deg, #46586B 0%, #26313D 55%, #1A222B 100%);
  color: #FFFFFF; opacity: 0;
}
.sc-boutique-v-statut { position: absolute; top: 0; right: 0; display: flex; align-items: center; gap: 4px; height: 34px; padding: 2px 20px 0 0; }
.sc-boutique-v-cadenas { position: absolute; top: 40px; left: 50%; margin-left: -8px; }
.sc-boutique-v-cadenas svg { width: 16px; height: 16px; }
.fn-scene--boutique .sc-boutique-v-date { position: absolute; top: 62px; left: 0; right: 0; justify-items: center; font-size: 0.875rem; font-weight: 600; line-height: 18px; }
.fn-scene--boutique .sc-boutique-v-heure { position: absolute; top: 78px; left: 0; right: 0; text-align: center; font-size: 4.25rem; font-weight: 700; line-height: 76px; letter-spacing: -.02em; }
.sc-boutique-notifs { position: absolute; top: 272px; left: 10px; right: 10px; display: block; height: 90px; }
.sc-boutique-n {
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; gap: 9px; height: 66px; padding: 9px 11px;
  border-radius: 16px; background: var(--sc-ab-n0); color: #0A0A0A;
  font-size: 0.75rem; line-height: 16px; white-space: nowrap;
  transform-origin: 50% 0; opacity: 0;
}
.sc-boutique-n1 { z-index: 1; }
.sc-boutique-n2 { z-index: 2; }
.sc-boutique-n3 { z-index: 3; }
.sc-boutique-n4 { z-index: 4; }
.sc-boutique-n-app { display: grid; place-items: center; flex: none; width: 28px; height: 28px; margin-top: 1px; border-radius: 7px; background: #1E88F5; color: #FFFFFF; }
.sc-boutique-n-app svg { width: 17px; height: 17px; }
.sc-boutique-n-dit { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.sc-boutique-n-tete { display: flex; align-items: baseline; justify-content: space-between; }
.sc-boutique-n-tete b { font-weight: 700; }
.sc-boutique-n-tete small { font-size: 0.6875rem; color: #6E6E73; }
.sc-boutique-n-corps { color: #3A3A3C; }
.sc-boutique-v-bas { position: absolute; left: 28px; right: 28px; bottom: 22px; display: flex; justify-content: space-between; }
.sc-boutique-v-bas i { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, .16); }
.sc-boutique-v-bas svg { width: 18px; height: 18px; }
.sc-boutique-noir { position: absolute; inset: 0; z-index: 8; background: #000000; opacity: 0; }

/* Le doigt de Camille. */
.sc-boutique-doigt {
  position: absolute; top: 0; left: 0; z-index: 3;
  width: 26px; height: 26px; border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, .9);
  background: rgba(10, 10, 10, .26);
  opacity: 0; pointer-events: none;
}

/* ═══ LES NOMS D'ANIMATION ════════════════════════════════════════════ */
.sc-fin { animation-name: sc-conclure; }
.sc-boutique-doigt      { animation-name: sc-boutique-doigt; }
.sc-boutique-seg-fond   { animation-name: sc-boutique-seg; }
.sc-boutique-mois       { animation-name: sc-boutique-mois; }
.sc-boutique-sem        { animation-name: sc-boutique-sem; }
.sc-boutique-bt         { animation-name: sc-boutique-bt; }
.sc-boutique-merci      { animation-name: sc-boutique-merci; }
.sc-boutique-avant      { animation-name: sc-boutique-avant; }
.sc-boutique-apres      { animation-name: sc-boutique-apres; }
.sc-boutique-tuile--abonnes { animation-name: sc-boutique-flash-ab; }
.sc-boutique-tuile--large   { animation-name: sc-boutique-flash-cu; }
.sc-boutique-noir       { animation-name: sc-boutique-noir; }
.sc-boutique-verrou     { animation-name: sc-boutique-verrou; }
.sc-boutique-maison     { animation-name: sc-boutique-maison; }
.sc-boutique-d1 { animation-name: sc-boutique-d1; }
.sc-boutique-d2 { animation-name: sc-boutique-d2; }
.sc-boutique-d3 { animation-name: sc-boutique-d3; }
.sc-boutique-d4 { animation-name: sc-boutique-d4; }
.sc-boutique-n1 { animation-name: sc-boutique-n1; }
.sc-boutique-n2 { animation-name: sc-boutique-n2; }
.sc-boutique-n3 { animation-name: sc-boutique-n3; }
.sc-boutique-n4 { animation-name: sc-boutique-n4; }
.sc-boutique-cu0 { animation-name: sc-boutique-cu0; }
.sc-boutique-cu1 { animation-name: sc-boutique-cu1; }
.sc-boutique-cu2 { animation-name: sc-boutique-cu2; }
.sc-boutique-cu3 { animation-name: sc-boutique-cu3; }
.sc-boutique-cu4 { animation-name: sc-boutique-cu4; }
.sc-boutique-av1 { animation-name: sc-boutique-av1; }
.sc-boutique-av2 { animation-name: sc-boutique-av2; }
.sc-boutique-av3 { animation-name: sc-boutique-av3; }
.sc-boutique-av4 { animation-name: sc-boutique-av4; }
.sc-boutique-ok1 { animation-name: sc-boutique-ok1; }
.sc-boutique-ok2 { animation-name: sc-boutique-ok2; }
.sc-boutique-ok3 { animation-name: sc-boutique-ok3; }
.sc-boutique-ok4 { animation-name: sc-boutique-ok4; }

/* ═══ CAMILLE S'ABONNE ════════════════════════════════════════════════
   LE DOIGT. Deux cibles MESURÉES dans la toile (le rond de 26 px s'y
   centre, translate = centre - 13) : « Semaine », puis « S'abonner ». */
@keyframes sc-boutique-doigt {
  0%, 5.6%     { transform: translate(var(--sc-ab-sem)) scale(1.3); opacity: 0; }
  5.9%         { transform: translate(var(--sc-ab-sem)); opacity: 1; animation-timing-function: ease-out; }
  6.2%         { transform: translate(var(--sc-ab-sem)) scale(.84); opacity: 1; }
  6.6%         { transform: translate(var(--sc-ab-sem)); opacity: 0; }
  14.6%        { transform: translate(var(--sc-ab-bt)) scale(1.3); opacity: 0; }
  14.9%        { transform: translate(var(--sc-ab-bt)); opacity: 1; animation-timing-function: ease-out; }
  15.2%        { transform: translate(var(--sc-ab-bt)) scale(.84); opacity: 1; }
  15.6%, 98.4% { transform: translate(var(--sc-ab-bt)); opacity: 0; }
  99.9%, 100%  { transform: translate(var(--sc-ab-sem)) scale(1.3); opacity: 0; }
}
/* Le fond blanc du sélecteur glisse de « Mois » à « Semaine ». */
@keyframes sc-boutique-seg {
  0%, 6.2%     { transform: translateX(var(--sc-ab-mois)); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  7.4%, 98.4%  { transform: none; }
  99.9%, 100%  { transform: translateX(var(--sc-ab-mois)); }
}
@keyframes sc-boutique-mois {
  0%, 6.5%     { opacity: 1; }
  6.6%, 98.4%  { opacity: 0; }
  99.9%, 100%  { opacity: 1; }
}
@keyframes sc-boutique-sem {
  0%, 6.5%     { opacity: 0; }
  6.6%, 98.4%  { opacity: 1; }
  99.9%, 100%  { opacity: 0; }
}
@keyframes sc-boutique-bt {
  0%, 14.9%    { transform: none; }
  15.2%        { transform: scale(.97); }
  15.6%, 100%  { transform: none; }
}
@keyframes sc-boutique-merci {
  0%, 15.8%    { opacity: 0; transform: translateY(8px); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  16.8%, 98.4% { opacity: 1; transform: none; }
  99.9%, 100%  { opacity: 0; transform: translateY(8px); }
}
/* Chez Lucie, au même moment : 38 abonnés, et 38 paniers chaque vendredi. */
@keyframes sc-boutique-avant {
  0%, 17.3%    { opacity: 1; }
  17.4%, 98.4% { opacity: 0; }
  99.9%, 100%  { opacity: 1; }
}
@keyframes sc-boutique-apres {
  0%, 17.3%    { opacity: 0; }
  17.4%, 98.4% { opacity: 1; }
  99.9%, 100%  { opacity: 0; }
}
@keyframes sc-boutique-flash-ab {
  0%, 17.3%    { background: #FFFFFF; }
  17.4%        { background: #F0F6FC; }
  20.5%, 100%  { background: #FFFFFF; }
}

/* ═══ LES VENDREDIS PASSENT ═══════════════════════════════════════════
   L'écran s'éteint, puis s'allume chaque vendredi sur le reçu ; entre deux,
   il se met en veille (assombri, comme l'affichage permanent). */
@keyframes sc-boutique-noir {
  0%, 22.8%    { opacity: 0; }
  23.4%, 26.8% { opacity: 1; }
  27.2%, 33%   { opacity: 0; }
  35%, 40.8%   { opacity: .55; }
  41.1%, 47%   { opacity: 0; }
  49%, 54.8%   { opacity: .55; }
  55.1%, 61%   { opacity: 0; }
  63%, 68.8%   { opacity: .55; }
  69.1%, 100%  { opacity: 0; }
}
@keyframes sc-boutique-verrou {
  0%, 23.4%    { opacity: 0; }
  23.5%, 98.4% { opacity: 1; }
  99.9%, 100%  { opacity: 0; }
}
@keyframes sc-boutique-maison {
  0%, 23.4%    { background: #0A0A0A; }
  23.5%, 98.4% { background: #FFFFFF; }
  99.9%, 100%  { background: #0A0A0A; }
}
/* La date du jour, d'un vendredi au suivant. */
@keyframes sc-boutique-d1 {
  0%, 40.7%    { opacity: 1; }
  40.8%, 98.4% { opacity: 0; }
  99.9%, 100%  { opacity: 1; }
}
@keyframes sc-boutique-d2 {
  0%, 40.7%    { opacity: 0; }
  40.8%, 54.7% { opacity: 1; }
  54.8%, 100%  { opacity: 0; }
}
@keyframes sc-boutique-d3 {
  0%, 54.7%    { opacity: 0; }
  54.8%, 68.7% { opacity: 1; }
  68.8%, 100%  { opacity: 0; }
}
@keyframes sc-boutique-d4 {
  0%, 68.7%    { opacity: 0; }
  68.8%, 98.4% { opacity: 1; }
  99.9%, 100%  { opacity: 0; }
}
/* Les reçus : le nouveau arrive devant, les anciens passent derrière. */
@keyframes sc-boutique-n1 {
  0%, 27.3%    { opacity: 0; transform: translateY(-14px); background: var(--sc-ab-n0); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  28.3%, 41.2% { opacity: 1; transform: none; background: var(--sc-ab-n0); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  42.2%, 55.2% { opacity: 1; transform: translateY(12px) scale(.94); background: var(--sc-ab-n1); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  56.2%, 69.2% { opacity: 1; transform: translateY(23.4px) scale(.88); background: var(--sc-ab-n2); }
  70.2%, 98.4% { opacity: 0; transform: translateY(23.4px) scale(.88); background: var(--sc-ab-n2); }
  99.9%, 100%  { opacity: 0; transform: translateY(-14px); background: var(--sc-ab-n0); }
}
@keyframes sc-boutique-n2 {
  0%, 41.2%    { opacity: 0; transform: translateY(-14px); background: var(--sc-ab-n0); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  42.2%, 55.2% { opacity: 1; transform: none; background: var(--sc-ab-n0); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  56.2%, 69.2% { opacity: 1; transform: translateY(12px) scale(.94); background: var(--sc-ab-n1); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  70.2%, 98.4% { opacity: 1; transform: translateY(23.4px) scale(.88); background: var(--sc-ab-n2); }
  99.9%, 100%  { opacity: 0; transform: translateY(-14px); background: var(--sc-ab-n0); }
}
@keyframes sc-boutique-n3 {
  0%, 55.2%    { opacity: 0; transform: translateY(-14px); background: var(--sc-ab-n0); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  56.2%, 69.2% { opacity: 1; transform: none; background: var(--sc-ab-n0); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  70.2%, 98.4% { opacity: 1; transform: translateY(12px) scale(.94); background: var(--sc-ab-n1); }
  99.9%, 100%  { opacity: 0; transform: translateY(-14px); background: var(--sc-ab-n0); }
}
@keyframes sc-boutique-n4 {
  0%, 69.2%    { opacity: 0; transform: translateY(-14px); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  70.2%, 98.4% { opacity: 1; transform: none; }
  99.9%, 100%  { opacity: 0; transform: translateY(-14px); }
}

/* Chez Lucie, chaque vendredi : la ligne passe à « Prélevé », le montant
   déjà prélevé monte, sa tuile s'éclaire un instant. */
@keyframes sc-boutique-cu0 {
  0%, 27.7%    { opacity: 1; transform: none; }
  27.8%, 98.4% { opacity: 0; transform: none; }
  99.9%, 100%  { opacity: 1; transform: none; }
}
@keyframes sc-boutique-cu1 {
  0%, 27.7%    { opacity: 0; transform: translateY(6px); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  28.4%, 41.7% { opacity: 1; transform: none; }
  41.8%, 100%  { opacity: 0; transform: none; }
}
@keyframes sc-boutique-cu2 {
  0%, 41.7%    { opacity: 0; transform: translateY(6px); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  42.4%, 55.7% { opacity: 1; transform: none; }
  55.8%, 100%  { opacity: 0; transform: none; }
}
@keyframes sc-boutique-cu3 {
  0%, 55.7%    { opacity: 0; transform: translateY(6px); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  56.4%, 69.7% { opacity: 1; transform: none; }
  69.8%, 100%  { opacity: 0; transform: none; }
}
@keyframes sc-boutique-cu4 {
  0%, 69.7%    { opacity: 0; transform: translateY(6px); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  70.4%, 98.4% { opacity: 1; transform: none; }
  99.9%, 100%  { opacity: 0; transform: translateY(6px); }
}
@keyframes sc-boutique-flash-cu {
  0%, 27.7%    { background: #FFFFFF; }
  27.8%        { background: #F0F6FC; }
  30.8%, 41.7% { background: #FFFFFF; }
  41.8%        { background: #F0F6FC; }
  44.8%, 55.7% { background: #FFFFFF; }
  55.8%        { background: #F0F6FC; }
  58.8%, 69.7% { background: #FFFFFF; }
  69.8%        { background: #F0F6FC; }
  72.8%, 100%  { background: #FFFFFF; }
}
@keyframes sc-boutique-av1 {
  0%, 27.7%    { opacity: 1; }
  27.8%, 98.4% { opacity: 0; }
  99.9%, 100%  { opacity: 1; }
}
@keyframes sc-boutique-av2 {
  0%, 41.7%    { opacity: 1; }
  41.8%, 98.4% { opacity: 0; }
  99.9%, 100%  { opacity: 1; }
}
@keyframes sc-boutique-av3 {
  0%, 55.7%    { opacity: 1; }
  55.8%, 98.4% { opacity: 0; }
  99.9%, 100%  { opacity: 1; }
}
@keyframes sc-boutique-av4 {
  0%, 69.7%    { opacity: 1; }
  69.8%, 98.4% { opacity: 0; }
  99.9%, 100%  { opacity: 1; }
}
@keyframes sc-boutique-ok1 {
  0%, 27.7%    { opacity: 0; transform: scale(.8); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  28.4%, 98.4% { opacity: 1; transform: none; }
  99.9%, 100%  { opacity: 0; transform: scale(.8); }
}
@keyframes sc-boutique-ok2 {
  0%, 41.7%    { opacity: 0; transform: scale(.8); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  42.4%, 98.4% { opacity: 1; transform: none; }
  99.9%, 100%  { opacity: 0; transform: scale(.8); }
}
@keyframes sc-boutique-ok3 {
  0%, 55.7%    { opacity: 0; transform: scale(.8); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  56.4%, 98.4% { opacity: 1; transform: none; }
  99.9%, 100%  { opacity: 0; transform: scale(.8); }
}
@keyframes sc-boutique-ok4 {
  0%, 69.7%    { opacity: 0; transform: scale(.8); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  70.4%, 98.4% { opacity: 1; transform: none; }
  99.9%, 100%  { opacity: 0; transform: scale(.8); }
}

/* Moins de mouvement : l'état d'arrivée. L'écran verrouillé sur le
   quatrième reçu, les quatre vendredis prélevés. */
@media (prefers-reduced-motion: reduce) {
  .sc-boutique-verrou, .sc-boutique-apres, .sc-boutique-sem, .sc-boutique-d4, .sc-boutique-n4, .sc-boutique-cu4,
  .sc-boutique-ok1, .sc-boutique-ok2, .sc-boutique-ok3, .sc-boutique-ok4 { opacity: 1; }
  .sc-boutique-avant, .sc-boutique-mois, .sc-boutique-d1, .sc-boutique-cu0,
  .sc-boutique-av1, .sc-boutique-av2, .sc-boutique-av3, .sc-boutique-av4 { opacity: 0; }
  .sc-boutique-seg-fond { transform: none; }
  .sc-boutique-maison { background: #FFFFFF; }
}