/* Scène « espace client » : la même adresse, et chacun n'y voit que le sien.
   À gauche le téléphone de Camille (Mail, puis Safari sur son espace), à
   droite l'ordinateur de Marc, client pro, dans Chrome, à la même adresse.
   Pas de légende. Le rideau de fin vient du kit.

   LE MINUTAGE, en pourcentages d'une boucle de 12 secondes :
        8 %  Camille touche « Ouvrir mon espace » dans le mail ; Safari
             s'ouvre (8,4 à 9,4 %) : sa prochaine table
       22 %  elle touche « Documents » : facture, bon cadeau (sa jauge se
             remplit), reçu d'acompte
     39,6 %  dans Chrome, le curseur clique « Commandes pro », l'onglet
             qu'elle n'a pas : plateaux, remise, facture du mois ; plus rien
             ne bouge ensuite
       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), sa vue
   de 284 x 430. Tailles de lecture : 11 à 13 px, 17 et 18 px aux titres. */
.fn-scene--espace {
  --sc-haut: 560px;
  /* Les filets, tous neutres. */
  --line-chrome: #E3E6EA; --line-site: #E8E8E8; --line-safari: rgba(0, 0, 0, .08); --line-mail: #EFEFF4;
  --ios-bleu: #0A84FF; --ios-texte: #8E8E93;
  /* Les cibles, mesurées au banc : le coin du doigt (rond de 26 px) et la
     pointe du curseur. */
  --sc-es-bouton: 109px, 322.5px; --sc-es-documents: 109.4px, 207.2px; --sc-es-groupees: 439px, 213.1px;
  line-height: 1.35;
}
.fn-scene--espace svg { display: block; }
.fn-scene--espace p { margin: 0; }
.fn-scene--espace i { font-style: normal; }

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

/* ═══ L'ORDINATEUR DE MARC : CHROME ═══════════════════════════════════ */
.sc-espace-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-espace-c-onglets { position: relative; flex: none; height: 30px; background: #DEE3EA; }
.sc-espace-c-onglet {
  position: absolute; top: 6px; left: 14px;
  display: flex; align-items: center; gap: 6px;
  width: 162px; height: 24px; padding: 0 8px 0 9px;
  border-radius: 8px 8px 0 0; background: #FFFFFF; color: #1F1F1F;
}
.sc-espace-c-onglet > svg { width: 10px; height: 10px; flex: none; color: #474747; }
.sc-espace-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-espace-c-titre { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; font-size: 0.65625rem; }
.sc-espace-c-plus { position: absolute; top: 10px; left: 186px; color: #474747; }
.sc-espace-c-plus svg { width: 12px; height: 12px; }
.sc-espace-fen { position: absolute; top: 0; right: 0; display: flex; height: 100%; }
.sc-espace-fen i { display: grid; place-items: center; width: 26px; height: 100%; color: #1F1F1F; }
.sc-espace-fen svg { width: 10px; height: 10px; }
.sc-espace-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-espace-c-outils > i { display: grid; place-items: center; width: 24px; height: 24px; }
.sc-espace-c-outils > i svg { width: 13px; height: 13px; }
.sc-espace-c-off { color: #C4C7C5; }
.sc-espace-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-espace-c-adresse > svg { width: 12px; height: 12px; flex: none; }
.sc-espace-c-etoile { margin-left: auto; }
.sc-espace-c-etoile svg { width: 12px; height: 12px; }
.sc-espace-vue { position: relative; flex: 1; overflow: hidden; background: #FFFFFF; color: #0A0A0A; }

/* ═══ LE SITE : L'ESPACE, SUR LES DEUX APPAREILS ══════════════════════ */
.sc-espace-s-nav {
  display: flex; align-items: center; gap: 12px;
  height: 38px; padding: 0 16px;
  border-bottom: 1px solid var(--line-site);
  font-size: 0.6875rem; color: #525252;
}
.sc-espace-s-nav b { flex: 1; font-size: 0.8125rem; font-weight: 800; letter-spacing: -.01em; color: #0A0A0A; }
.sc-espace-avatar {
  display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  background: #0A0A0A; color: #FFFFFF; font-size: 0.6875rem; font-weight: 700;
}
.sc-espace-page { display: block; padding: 16px; }
.sc-espace-bonjour { display: flex; flex-direction: column; gap: 2px; margin-bottom: 12px; }
.sc-espace-bonjour b { font-size: 1.125rem; font-weight: 800; line-height: 1.2; letter-spacing: -.02em; }
.sc-espace-bonjour span { font-size: 0.6875rem; color: #737373; }
.sc-espace-rubriques { display: flex; gap: 5px; margin-bottom: 12px; }
.sc-espace-r {
  display: grid; place-items: center; height: 28px; padding: 0 8px;
  border: 1px solid #E0E0E0; border-radius: 8px; background: #FFFFFF;
  font-size: 0.6875rem; font-weight: 600; white-space: nowrap; color: #3F3F3F;
}
/* L'onglet en cours est noir : Tables d'abord, sur les deux appareils. */
.sc-espace-r--tables,
.sc-espace-r--tables-pro { border-color: #0A0A0A; background: #0A0A0A; color: #FFFFFF; }
.sc-espace-vues { position: relative; display: block; }
.sc-espace-v { position: absolute; top: 0; left: 0; right: 0; display: flex; flex-direction: column; gap: 8px; }
.sc-espace-v--documents,
.sc-espace-v--groupees { opacity: 0; }
.sc-espace-ligne {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; align-items: center;
  padding: 9px 12px;
  border: 1px solid var(--line-site); border-radius: 10px;
}
.sc-espace-ligne b { grid-column: 1; font-size: 0.75rem; font-weight: 700; line-height: 16px; }
.sc-espace-ligne small { grid-column: 1; font-size: 0.6875rem; line-height: 14px; color: #737373; }
.sc-espace-ligne em { grid-column: 2; grid-row: 1 / span 2; font-size: 0.75rem; font-weight: 700; font-style: normal; white-space: nowrap; }
.sc-espace-ligne--mois { border-color: #0A0A0A; }

/* ═══ LE TÉLÉPHONE DE CAMILLE ═════════════════════════════════════════ */
.sc-espace-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-espace-ecran { position: relative; height: 100%; overflow: hidden; border-radius: 33px; background: #FFFFFF; color: #0A0A0A; }
.sc-espace-ilot {
  position: absolute; top: 8px; left: 50%; z-index: 9;
  width: 66px; height: 19px; margin-left: -33px; border-radius: 10px; background: #000000;
}
.sc-espace-maison {
  position: absolute; bottom: 5px; left: 50%; z-index: 9;
  width: 80px; height: 4px; margin-left: -40px; border-radius: 2px; background: #0A0A0A;
}
.sc-espace-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-espace-statut b { flex: 1; font-weight: 700; }
.sc-espace-reseau { display: flex; align-items: flex-end; gap: 1.5px; height: 8px; }
.sc-espace-reseau i { display: block; width: 2.5px; border-radius: 1px; background: currentColor; }
.sc-espace-reseau i:nth-child(1) { height: 3px; }
.sc-espace-reseau i:nth-child(2) { height: 4.5px; }
.sc-espace-reseau i:nth-child(3) { height: 6px; }
.sc-espace-reseau i:nth-child(4) { height: 8px; }
.sc-espace-pile { display: block; width: 16px; height: 8px; padding: 1px; border: 1px solid currentColor; border-radius: 2.5px; opacity: .9; }
.sc-espace-pile i { display: block; width: 75%; height: 100%; border-radius: 1px; background: currentColor; }

/* ── Mail ─────────────────────────────────────────────────────────────── */
.sc-espace-mail { position: absolute; inset: 0; background: #FFFFFF; }
.sc-espace-m-barre {
  position: absolute; top: 34px; left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between;
  height: 36px; padding: 0 12px 0 6px; color: var(--ios-bleu); font-size: 0.75rem;
}
.sc-espace-m-barre > span { display: flex; align-items: center; gap: 1px; }
.sc-espace-m-barre svg { width: 18px; height: 18px; }
.sc-espace-m-fleches { gap: 10px; }
.sc-espace-m-corps { position: absolute; top: 72px; left: 0; right: 0; padding: 4px 14px 0; }
.sc-espace-m-de { display: flex; align-items: center; gap: 9px; padding-bottom: 10px; border-bottom: 1px solid var(--line-mail); }
.sc-espace-m-de i {
  display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(180deg, #A8ADB6, #858A94); color: #FFFFFF; font-size: 0.6875rem; font-weight: 600;
}
.sc-espace-m-de > span { display: flex; flex-direction: column; flex: 1; }
.sc-espace-m-de b { font-size: 0.75rem; font-weight: 600; }
.sc-espace-m-de small { font-size: 0.6875rem; color: var(--ios-texte); }
.sc-espace-m-heure { align-self: flex-start; font-size: 0.6875rem; color: var(--ios-texte); }
.fn-scene--espace .sc-espace-m-sujet { margin: 12px 0 8px; font-size: 0.9375rem; font-weight: 700; line-height: 1.25; }
.sc-espace-m-texte { font-size: 0.75rem; line-height: 1.5; color: #1C1C1E; }
.sc-espace-m-bouton {
  display: grid; place-items: center; height: 40px; margin: 14px 0 10px;
  border-radius: 10px; background: #0A0A0A; color: #FFFFFF;
  font-size: 0.8125rem; font-weight: 600;
}
.sc-espace-m-note { font-size: 0.6875rem; line-height: 1.45; color: var(--ios-texte); }
.sc-espace-m-outils {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: flex-start; justify-content: space-around;
  height: 50px; padding-top: 9px;
  border-top: 1px solid var(--line-safari); color: var(--ios-bleu);
}
.sc-espace-m-outils svg { width: 18px; height: 18px; }

/* ── Safari : son espace ──────────────────────────────────────────────── */
.sc-espace-safari { position: absolute; inset: 0; z-index: 4; background: #FFFFFF; transform: translateX(100%); }
.fn-scene--espace .sc-espace-statut--safari { padding-left: 16px; }
.sc-espace-sf-retour { display: flex; align-items: center; flex: 1; gap: 1px; font-size: 0.6875rem; font-weight: 600; }
.sc-espace-sf-retour svg { width: 9px; height: 9px; stroke-width: 2.2; }
.sc-espace-sf-vue { position: absolute; top: 34px; left: 0; right: 0; bottom: 84px; overflow: hidden; }
.fn-scene--espace .sc-espace-s-nav--tel { padding: 0 14px; }
.sc-espace-sf-vue .sc-espace-bonjour { margin: 14px 14px 12px; }
.sc-espace-sf-vue .sc-espace-bonjour b { font-size: 1.0625rem; }
.sc-espace-sf-vue .sc-espace-rubriques { margin: 0 14px 12px; }
.sc-espace-sf-vue .sc-espace-vues { margin: 0 14px; }
.sc-espace-carte {
  display: flex; flex-direction: column; gap: 2px;
  padding: 11px 12px; border-radius: 12px; background: #F5F5F3;
}
.sc-espace-carte small { font-size: 0.6875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #737373; }
.sc-espace-carte b { font-size: 0.875rem; font-weight: 800; }
.sc-espace-carte > span { font-size: 0.6875rem; color: #525252; }
.sc-espace-deplacer {
  align-self: flex-start; display: grid; place-items: center; height: 28px; margin-top: 8px; padding: 0 12px;
  border: 1px solid #D4D4D4; border-radius: 8px; background: #FFFFFF;
  font-size: 0.6875rem; font-weight: 600; font-style: normal;
}
.sc-espace-doc {
  display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; column-gap: 9px; align-items: center;
  padding: 9px 10px; border: 1px solid var(--line-site); border-radius: 10px;
}
.sc-espace-doc > svg { width: 17px; height: 17px; color: #525252; }
.sc-espace-doc > span { display: flex; flex-direction: column; min-width: 0; }
.sc-espace-doc b { font-size: 0.75rem; font-weight: 700; line-height: 16px; }
.sc-espace-doc small { font-size: 0.6875rem; line-height: 14px; color: #737373; }
.sc-espace-doc em { font-size: 0.75rem; font-weight: 700; font-style: normal; white-space: nowrap; }
.sc-espace-jauge { display: block; height: 5px; margin-top: 5px; overflow: hidden; border-radius: 3px; background: #EEEEEE; }
.sc-espace-jauge-part { display: block; height: 100%; border-radius: 3px; background: #0A0A0A; transform: scaleX(0); transform-origin: 0 50%; }
.sc-espace-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-espace-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-espace-sf-adresse small { font-size: 0.6875rem; font-weight: 600; }
.sc-espace-sf-adresse svg { width: 13px; height: 13px; }
.sc-espace-sf-outils { display: flex; align-items: center; justify-content: space-between; height: 28px; margin-top: 4px; padding: 0 6px; color: var(--ios-bleu); }
.sc-espace-sf-outils svg { width: 17px; height: 17px; }
.sc-espace-sf-outils svg:nth-child(2) { color: #C7C7CC; }

/* Le doigt de Camille. */
.sc-espace-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-cur      { animation-name: sc-cur-espace; }
.sc-cur-onde { animation-name: sc-onde-espace; }
.sc-espace-doigt           { animation-name: sc-espace-doigt; }
.sc-espace-m-bouton        { animation-name: sc-espace-bouton; }
.sc-espace-safari          { animation-name: sc-espace-safari; }
.sc-espace-r--tables       { animation-name: sc-espace-r-tables; }
.sc-espace-r--documents    { animation-name: sc-espace-r-documents; }
.sc-espace-v--tables       { animation-name: sc-espace-v-tables; }
.sc-espace-v--documents    { animation-name: sc-espace-v-documents; }
.sc-espace-jauge-part      { animation-name: sc-espace-jauge; }
.sc-espace-r--tables-pro   { animation-name: sc-espace-r-tables-pro; }
.sc-espace-r--groupees     { animation-name: sc-espace-r-groupees; }
.sc-espace-v--tables-pro   { animation-name: sc-espace-v-tables-pro; }
.sc-espace-v--groupees     { animation-name: sc-espace-v-groupees; }

/* ═══ CAMILLE ═════════════════════════════════════════════════════════
   LE DOIGT. Deux cibles MESURÉES dans la toile (le rond de 26 px s'y
   centre, translate = centre - 13) : « Ouvrir mon espace » et l'onglet
   « Documents ». */
@keyframes sc-espace-doigt {
  0%, 7.6%     { transform: translate(var(--sc-es-bouton)) scale(1.3); opacity: 0; }
  7.9%         { transform: translate(var(--sc-es-bouton)); opacity: 1; animation-timing-function: ease-out; }
  8.2%         { transform: translate(var(--sc-es-bouton)) scale(.84); opacity: 1; }
  8.6%         { transform: translate(var(--sc-es-bouton)); opacity: 0; }
  21.6%        { transform: translate(var(--sc-es-documents)) scale(1.3); opacity: 0; }
  21.9%        { transform: translate(var(--sc-es-documents)); opacity: 1; animation-timing-function: ease-out; }
  22.2%        { transform: translate(var(--sc-es-documents)) scale(.84); opacity: 1; }
  22.6%, 98.4% { transform: translate(var(--sc-es-documents)); opacity: 0; }
  99.9%, 100%  { transform: translate(var(--sc-es-bouton)) scale(1.3); opacity: 0; }
}
@keyframes sc-espace-bouton {
  0%, 7.9%     { transform: none; }
  8.2%         { transform: scale(.97); }
  8.6%, 100%   { transform: none; }
}
/* Safari glisse depuis la droite, sur son espace. */
@keyframes sc-espace-safari {
  0%, 8.4%     { transform: translateX(100%); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  9.6%, 98.4%  { transform: none; }
  99.9%, 100%  { transform: translateX(100%); }
}
/* « Documents » : l'onglet passe au noir, sa vue remplace celle des tables. */
@keyframes sc-espace-r-tables {
  0%, 22.1%    { border-color: #0A0A0A; background: #0A0A0A; color: #FFFFFF; }
  22.2%, 98.4% { border-color: #E0E0E0; background: #FFFFFF; color: #3F3F3F; }
  99.9%, 100%  { border-color: #0A0A0A; background: #0A0A0A; color: #FFFFFF; }
}
@keyframes sc-espace-r-documents {
  0%, 22.1%    { border-color: #E0E0E0; background: #FFFFFF; color: #3F3F3F; }
  22.2%, 98.4% { border-color: #0A0A0A; background: #0A0A0A; color: #FFFFFF; }
  99.9%, 100%  { border-color: #E0E0E0; background: #FFFFFF; color: #3F3F3F; }
}
@keyframes sc-espace-v-tables {
  0%, 22.2%    { opacity: 1; }
  22.6%, 98.4% { opacity: 0; }
  99.9%, 100%  { opacity: 1; }
}
@keyframes sc-espace-v-documents {
  0%, 22.4%    { opacity: 0; transform: translateY(6px); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  23.2%, 98.4% { opacity: 1; transform: none; }
  99.9%, 100%  { opacity: 0; transform: translateY(6px); }
}
/* Le bon cadeau : il reste 36 € sur 60 €, soit 60 % de la jauge. */
@keyframes sc-espace-jauge {
  0%, 23.2%    { transform: scaleX(0); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  26%, 98.4%   { transform: scaleX(.6); }
  99.9%, 100%  { transform: scaleX(0); }
}

/* ═══ MARC ════════════════════════════════════════════════════════════
   LE CURSEUR. Une cible MESURÉE dans la toile, la pointe de la flèche posée
   dessus (translate = cible - 4,6 / 2,3) : l'onglet « Commandes pro ». */
@keyframes sc-cur-espace {
  0%, 32%      { transform: translate(470px, 470px); opacity: 0; }
  33%          { transform: translate(470px, 470px); opacity: 1; animation-timing-function: cubic-bezier(.3, 0, .2, 1); }
  38.8%        { transform: translate(var(--sc-es-groupees)); }
  39.6%        { transform: translate(var(--sc-es-groupees)) scale(.86); }
  40.2%        { transform: translate(var(--sc-es-groupees)); animation-timing-function: cubic-bezier(.3, 0, .2, 1); }
  43%, 98.4%   { transform: translate(478px, 452px); opacity: 1; }
  99.9%, 100%  { transform: translate(470px, 470px); opacity: 0; }
}
@keyframes sc-onde-espace {
  0%, 39.4%    { transform: scale(.4); opacity: 0; }
  39.6%        { transform: scale(.4); opacity: .9; }
  41.6%, 100%  { transform: scale(2.2); opacity: 0; }
}
@keyframes sc-espace-r-tables-pro {
  0%, 39.7%    { border-color: #0A0A0A; background: #0A0A0A; color: #FFFFFF; }
  39.8%, 98.4% { border-color: #E0E0E0; background: #FFFFFF; color: #3F3F3F; }
  99.9%, 100%  { border-color: #0A0A0A; background: #0A0A0A; color: #FFFFFF; }
}
@keyframes sc-espace-r-groupees {
  0%, 39.7%    { border-color: #E0E0E0; background: #FFFFFF; color: #3F3F3F; }
  39.8%, 98.4% { border-color: #0A0A0A; background: #0A0A0A; color: #FFFFFF; }
  99.9%, 100%  { border-color: #E0E0E0; background: #FFFFFF; color: #3F3F3F; }
}
@keyframes sc-espace-v-tables-pro {
  0%, 39.8%    { opacity: 1; }
  40.2%, 98.4% { opacity: 0; }
  99.9%, 100%  { opacity: 1; }
}
@keyframes sc-espace-v-groupees {
  0%, 40%      { opacity: 0; transform: translateY(6px); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  40.8%, 98.4% { opacity: 1; transform: none; }
  99.9%, 100%  { opacity: 0; transform: translateY(6px); }
}

/* Moins de mouvement : l'état d'arrivée. Son espace sur ses documents, le
   sien sur ses commandes groupées. */
@media (prefers-reduced-motion: reduce) {
  .sc-espace-safari { transform: none; }
  .sc-espace-v--tables, .sc-espace-v--tables-pro { opacity: 0; }
  .sc-espace-v--documents, .sc-espace-v--groupees { opacity: 1; }
  .sc-espace-jauge-part { transform: scaleX(.6); }
  .sc-espace-r--tables, .sc-espace-r--tables-pro { border-color: #E0E0E0; background: #FFFFFF; color: #3F3F3F; }
  .sc-espace-r--documents, .sc-espace-r--groupees { border-color: #0A0A0A; background: #0A0A0A; color: #FFFFFF; }
}