/* Scène « email » : un devis part du téléphone de Lucie au nom de son
   restaurant, arrive chez sa cliente, et la réponse revient dans la même
   appli. Deux appareils : l'iPhone de Lucie (Mail) devant, à gauche ;
   l'ordinateur de Camille (sa boîte mail dans Chrome) derrière, à droite.
   Ancienne scène (panneau de gestion des adresses) rangée dans
   _avant-refonte-ux/adresse-email-professionnelle/. Le rideau de fin vient
   du kit.

   LISIBLE SANS ZOOMER (consigne de Théo du 24 septembre) : rien sous 11 px
   dans la toile, 12 px pour tout ce qu'on lit (messages, adresses, champs).
   D'où des interfaces allégées : pas de barre d'icônes au-dessus du message
   ouvert, deux onglets dans la boîte de Camille, un devis de deux lignes.

   FICHIER ÉCRIT PAR scene-css.py : les @keyframes (doigt, curseur, roue,
   frappe, arrivées) sont calculés là-bas depuis un seul minutage et des
   mesures prises au banc (mesures.json). Modifier scene-fixe.css ou le
   script, jamais scene.css.

   LE MINUTAGE, en pourcentages d'une boucle de 12 secondes :
      5 %  Lucie touche « De : » ; la roue des adresses monte à la place du
           clavier (5,6 à 8 %)
   10,2 %  elle fait tourner la roue d'un cran : contact@ (13 %)
     16 %  elle envoie ; la feuille descend, « Envoi de 1 sur 1 »
     21 %  le devis arrive en tête de la boîte de Camille
   26,8 %  Camille l'ouvre (le curseur) ; elle le lit
   40,8 %  « Répondre » ; elle tape « Parfait, on confirme ! » (43,2 %)
   53,2 %  « Envoyer » ; « Message envoyé. »
     57 %  la notification arrive sur le téléphone de Lucie ; elle la
           touche (61 %) : la réponse, adressée à contact@ (63,8 %) ; plus
           rien ne bouge après 66 %
     95 %  fondu au blanc ; tout revient au début entre 98,4 et 99,9 %

   LA TOILE : 520 x 592, fond blanc. La fenêtre Chrome de (196, 36) à
   (520, 566) ; sa liste de messages à (241, 150), 270 de large. Le
   téléphone de (2, 118) à (234, 586), devant la fenêtre, écran de 220 x 456
   en (8, 124). */
.fn-scene--email {
  --sc-haut: 592px;
  /* Les filets, tous neutres. */
  --line-chrome: #E3E6EA; --line-g: #ECECEC; --line-ios: #D8D8DC;
  /* Les couleurs des deux interfaces. */
  --g-bleu: #0B57D0; --g-texte: #1F1F1F; --g-gris: #444746; --g-gris2: #5E5E5E;
  --ios-bleu: #007AFF; --ios-gris: #8E8E93;
  line-height: 1.35;
}
.fn-scene--email svg { display: block; }
.fn-scene--email p { margin: 0; }
.fn-scene--email i { font-style: normal; }
/* L'arobase, dessinée : elle n'existe pas dans le HTML. */
.sc-email-at::before { content: "@"; }

/* ═══ LES TITRES ══════════════════════════════════════════════════════ */
.sc-email-qui {
  position: absolute;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  text-align: center; white-space: nowrap;
}
.sc-email-qui b { font-size: 0.8125rem; font-weight: 800; line-height: 17px; letter-spacing: -.01em; color: #0A0A0A; }
.sc-email-qui span { font-size: 0.6875rem; line-height: 14px; color: #737373; }
.sc-email-qui--pc { top: 0; left: 196px; width: 324px; }
.sc-email-qui--tel { top: 84px; left: 2px; width: 232px; }

/* ═══ CHROME ══════════════════════════════════════════════════════════ */
.sc-email-chrome {
  position: absolute; top: 36px; left: 196px; z-index: 1;
  display: flex; flex-direction: column;
  width: 324px; height: 530px; overflow: hidden;
  border: 1px solid #C7CCD4; border-radius: 8px; background: #FFFFFF;
  box-shadow: 0 12px 30px rgba(31, 36, 46, .14);
}
.sc-email-c-onglets { position: relative; flex: none; height: 30px; background: #DEE3EA; }
.sc-email-c-onglet {
  position: absolute; top: 6px; left: 8px;
  display: flex; align-items: center; gap: 6px;
  width: 172px; height: 24px; padding: 0 8px 0 9px;
  border-radius: 8px 8px 0 0; background: #FFFFFF; color: #1F1F1F;
}
.sc-email-c-onglet > svg { width: 10px; height: 10px; flex: none; color: #474747; }
.sc-email-c-favi svg { width: 13px; height: 13px; color: #5F6368; }
.sc-email-c-titre { position: relative; flex: 1; min-width: 0; height: 14px; font-size: 0.6875rem; }
.sc-email-c-t { position: absolute; left: 0; top: 0; line-height: 14px; white-space: nowrap; }
.sc-email-c-t--4 { opacity: 0; }
.sc-email-c-plus { position: absolute; top: 9px; left: 190px; color: #474747; }
.sc-email-c-plus svg { width: 12px; height: 12px; }
.sc-email-fen { position: absolute; top: 0; right: 0; display: flex; height: 100%; }
.sc-email-fen i { display: grid; place-items: center; width: 30px; height: 100%; color: #1F1F1F; }
.sc-email-fen svg { width: 10px; height: 10px; }
.sc-email-c-outils {
  display: flex; align-items: center; gap: 1px; flex: none;
  height: 34px; padding: 0 5px;
  border-bottom: 1px solid var(--line-chrome); color: #474747;
}
.sc-email-c-outils > i { display: grid; place-items: center; flex: none; width: 24px; height: 24px; }
.sc-email-c-outils > i svg { width: 14px; height: 14px; }
.sc-email-c-off { color: #C4C7C5; }
/* Chrome n'écrit pas « … » au bout d'une adresse trop longue : il l'efface. */
.sc-email-c-adresse {
  display: flex; align-items: center; gap: 7px; flex: 1; min-width: 0; overflow: hidden;
  height: 26px; margin: 0 5px; padding: 0 9px;
  border-radius: 13px; background: #EDF1F7;
  font-size: 0.6875rem; color: #1F1F1F; white-space: nowrap;
}
.sc-email-c-adresse > svg { width: 13px; height: 13px; flex: none; }
.sc-email-c-adresse > span {
  -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent);
  mask-image: linear-gradient(90deg, #000 85%, transparent);
}

/* ═══ LA MESSAGERIE DE CAMILLE ════════════════════════════════════════ */
.sc-email-g { position: relative; flex: 1; overflow: hidden; background: #F6F8FC; color: var(--g-texte); }
.sc-email-g-haut { position: absolute; top: 0; left: 0; right: 0; height: 48px; }
.sc-email-g-ico { position: absolute; top: 15px; left: 14px; color: var(--g-gris); }
.sc-email-g-ico svg { width: 17px; height: 17px; }
.sc-email-g-cherche {
  position: absolute; top: 8px; left: 50px; right: 50px;
  display: flex; align-items: center; gap: 8px;
  height: 32px; padding: 0 10px;
  border-radius: 8px; background: #E9EEF6;
  font-size: 0.75rem; color: var(--g-gris); white-space: nowrap; overflow: hidden;
}
.sc-email-g-cherche svg { width: 14px; height: 14px; flex: none; }
.sc-email-g-moi {
  position: absolute; top: 10px; right: 12px;
  display: grid; place-items: center; width: 28px; height: 28px;
  border-radius: 50%; background: #7B4FB8; color: #FFFFFF;
  font-size: 0.75rem; font-weight: 600;
}
.sc-email-g-rail { position: absolute; top: 48px; left: 0; width: 44px; }
.sc-email-g-rail > i { display: grid; place-items: center; margin: 0 auto; color: var(--g-gris); }
.sc-email-g-rail svg { width: 15px; height: 15px; }
.sc-email-g-rediger { width: 36px; height: 36px; margin-top: 2px !important; border-radius: 12px; background: #C2E7FF; color: #001D35 !important; }
.sc-email-g-nav { width: 34px; height: 26px; margin-top: 8px !important; border-radius: 9px; }
.sc-email-g-nav--actif { background: #D3E3FD; color: #001D35 !important; }

.sc-email-g-panneau {
  position: absolute; top: 48px; left: 44px; right: 8px; bottom: 8px;
  overflow: hidden; border-radius: 14px; background: #FFFFFF;
}
.sc-email-g-liste,
.sc-email-g-msg { position: absolute; inset: 0; }
.sc-email-g-msg { opacity: 0; }
.sc-email-g-outils { display: flex; align-items: center; gap: 16px; height: 34px; padding: 0 14px; color: var(--g-gris); }
.sc-email-g-outils svg { width: 14px; height: 14px; }
.sc-email-g-onglets {
  display: flex; height: 40px;
  background: linear-gradient(var(--line-g), var(--line-g)) left bottom / 100% 1px no-repeat;
  font-size: 0.6875rem; color: var(--g-gris);
}
.sc-email-g-onglets > * { display: flex; align-items: center; gap: 7px; padding: 0 14px; white-space: nowrap; }
.sc-email-g-onglets svg { width: 14px; height: 14px; flex: none; }
/* L'onglet actif : un fond de 3 px sous l'onglet, pas un bord d'un seul
   côté (interdit par la charte). */
.sc-email-g-onglets b { font-weight: 700; color: var(--g-bleu); background: linear-gradient(var(--g-bleu), var(--g-bleu)) 10px bottom / calc(100% - 20px) 3px no-repeat; }
/* Le cadre s'arrête à 330 px : la dernière ligne visible y entre toujours
   entière, avant comme après l'arrivée du devis. */
.sc-email-g-cadre { position: absolute; top: 74px; left: 0; right: 0; height: 330px; overflow: hidden; }
.sc-email-g-lignes { transform: translateY(-66px); }
.sc-email-g-ligne {
  display: grid; grid-template-columns: 14px 78px minmax(0, 1fr) auto; align-items: start; gap: 8px;
  height: 42px; padding: 13px 12px 0 10px;
  background: #FFFFFF linear-gradient(var(--line-g), var(--line-g)) left bottom / 100% 1px no-repeat;
  font-size: 0.75rem; line-height: 16px; color: var(--g-gris2);
}
.sc-email-g-ligne > svg { width: 14px; height: 14px; margin-top: 1px; color: #C4C7C5; }
.sc-email-g-ligne--lu { background-color: #F2F6FC; }
.sc-email-g-ligne--lucie { height: 66px; opacity: 0; }
.sc-email-g-de {
  overflow: hidden; white-space: nowrap; color: var(--g-texte); font-weight: 400;
  -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent);
  mask-image: linear-gradient(90deg, #000 85%, transparent);
}
b.sc-email-g-de { font-weight: 700; }
.sc-email-g-sujet { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; min-width: 0; }
.sc-email-g-sujet-l {
  display: block; width: 100%; overflow: hidden; white-space: nowrap;
  -webkit-mask-image: linear-gradient(90deg, #000 80%, transparent);
  mask-image: linear-gradient(90deg, #000 80%, transparent);
}
.sc-email-g-sujet-l b { font-weight: 700; color: var(--g-texte); }
.sc-email-g-quand { font-size: 0.6875rem; color: var(--g-gris2); font-weight: 400; }
b.sc-email-g-quand { font-weight: 700; color: var(--g-texte); }
.sc-email-g-pj {
  display: inline-flex; align-items: center; gap: 5px;
  height: 22px; padding: 0 9px 0 6px;
  border: 1px solid #DADCE0; border-radius: 11px;
  font-size: 0.6875rem; line-height: 1; color: var(--g-texte); white-space: nowrap;
}

/* L'icône PDF, commune aux deux appareils. */
.sc-email-pdf {
  position: relative; display: block; flex: none; width: 11px; height: 14px;
  border-radius: 2px; background: #FFFFFF; box-shadow: inset 0 0 0 1px #C9CDD2;
}
.sc-email-pdf i {
  position: absolute; left: -1px; right: -1px; bottom: 2px;
  display: grid; place-items: center; height: 5px; border-radius: 1px;
  background: #D93025; color: #FFFFFF;
  font-size: 3.5px; font-weight: 800; line-height: 1; letter-spacing: .02em;
}

/* ── Le devis ouvert ─────────────────────────────────────────────────── */
.fn-scene--email .sc-email-g-objet { display: flex; align-items: center; gap: 8px; margin: 14px 12px 0; font-size: 0.9375rem; line-height: 20px; color: var(--g-texte); white-space: nowrap; }
.sc-email-g-objet span {
  display: inline-flex; align-items: center; gap: 4px;
  height: 18px; padding: 0 5px 0 7px; border-radius: 4px; background: #E3E5E8;
  font-size: 0.6875rem; line-height: 1; color: var(--g-gris);
}
.sc-email-g-objet svg { width: 8px; height: 8px; }
.sc-email-g-exp { display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; padding: 0 12px; }
.sc-email-g-av {
  display: grid; place-items: center; flex: none; width: 30px; height: 30px;
  border-radius: 50%; color: #FFFFFF; font-size: 0.8125rem; font-weight: 500;
}
.sc-email-g-av--lucie { background: #0B8043; }
.sc-email-g-av--moi { background: #7B4FB8; }
.sc-email-g-exp-txt { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.sc-email-g-exp-l1 { display: flex; align-items: center; justify-content: space-between; font-size: 0.75rem; line-height: 16px; }
.sc-email-g-exp-l1 b { font-weight: 700; color: var(--g-texte); }
.sc-email-g-exp-l1 small { display: flex; align-items: center; gap: 6px; font-size: 0.6875rem; color: var(--g-gris2); }
.sc-email-g-exp-l1 svg { width: 13px; height: 13px; color: var(--g-gris); }
.fn-scene--email .sc-email-g-exp-adr { display: block; font-size: 0.6875rem; line-height: 15px; color: var(--g-gris2); white-space: nowrap; }
.sc-email-g-exp-moi { display: flex; align-items: center; gap: 2px; font-size: 0.6875rem; line-height: 15px; color: var(--g-gris2); }
.sc-email-g-exp-moi svg { width: 10px; height: 10px; }
.sc-email-g-corps { margin: 10px 12px 0 50px; font-size: 0.75rem; line-height: 1.45; color: var(--g-texte); }
.sc-email-g-corps p { margin-bottom: 6px; }
.sc-email-g-sig { color: var(--g-gris2); }
.sc-email-g-pjs { margin: 8px 12px 0 50px; }
.sc-email-g-carte { display: block; width: 140px; overflow: hidden; border: 1px solid #DADCE0; border-radius: 8px; }
.sc-email-g-apercu { position: relative; display: block; height: 42px; overflow: hidden; background: #F1F3F4; }
.sc-email-g-page {
  position: absolute; top: 7px; left: 38px; width: 64px; height: 50px;
  display: flex; flex-direction: column; gap: 4px; padding: 6px 7px;
  background: #FFFFFF; box-shadow: 0 1px 2px rgba(31, 36, 46, .16);
}
.sc-email-g-page b { font-size: 5px; font-weight: 800; line-height: 6px; letter-spacing: .06em; color: #1F1F1F; }
.sc-email-g-page i { display: block; height: 2px; border-radius: 1px; background: #DADCE0; }
.sc-email-g-page i:nth-of-type(2) { width: 70%; }
.sc-email-g-page i:nth-of-type(4) { width: 55%; }
.sc-email-g-carte-nom { display: flex; align-items: center; gap: 6px; height: 24px; padding: 0 7px; font-size: 0.6875rem; color: var(--g-texte); white-space: nowrap; }
.sc-email-g-bas { position: relative; height: 92px; margin: 12px 12px 0 50px; }
.sc-email-g-boutons { position: absolute; top: 0; left: 0; display: flex; gap: 8px; }
.sc-email-g-bouton {
  display: flex; align-items: center; gap: 5px;
  height: 30px; padding: 0 12px 0 10px;
  border: 1px solid #747775; border-radius: 10px;
  font-size: 0.75rem; color: var(--g-texte); white-space: nowrap;
}
.sc-email-g-bouton svg { width: 12px; height: 12px; }
.sc-email-g-rep {
  position: absolute; top: 0; left: 0; right: 0; height: 88px;
  padding: 8px 10px; border: 1px solid #E3E3E3; border-radius: 10px; background: #FFFFFF;
  box-shadow: 0 1px 4px rgba(31, 36, 46, .16);
  opacity: 0;
}
.sc-email-g-rep-a { display: flex; align-items: center; gap: 3px; font-size: 0.6875rem; line-height: 14px; color: var(--g-gris); }
.sc-email-g-rep-a svg { width: 11px; height: 11px; }
.sc-email-g-rep-txt { display: flex; align-items: center; height: 17px; margin-top: 6px; font-size: 0.75rem; color: var(--g-texte); }
.sc-email-g-tape { display: block; overflow: hidden; white-space: nowrap; width: 0; }
.sc-email-g-tape span { display: inline-block; }
.sc-email-g-caret { display: block; width: 1px; height: 15px; margin-left: 1px; background: var(--g-texte); }
.sc-email-g-rep-pied { position: absolute; left: 10px; right: 10px; bottom: 8px; display: flex; align-items: center; gap: 10px; color: var(--g-gris); }
.sc-email-g-rep-pied svg { width: 12px; height: 12px; }
.sc-email-g-envoyer {
  display: grid; place-items: center; height: 28px; padding: 0 15px; margin-right: 2px;
  border-radius: 10px; background: var(--g-bleu); color: #FFFFFF;
  font-size: 0.75rem; font-weight: 600;
}
.sc-email-g-parti {
  position: absolute; top: 0; left: -38px; right: 0;
  display: flex; align-items: flex-start; gap: 8px; padding-top: 10px;
  background: linear-gradient(var(--line-g), var(--line-g)) left top / 100% 1px no-repeat;
  opacity: 0;
}
.sc-email-g-parti > span { display: flex; flex-direction: column; gap: 1px; flex: 1; font-size: 0.75rem; line-height: 16px; }
.sc-email-g-parti b { font-weight: 700; }
.sc-email-g-parti small { font-size: 0.75rem; color: var(--g-gris2); }
.fn-scene--email .sc-email-g-parti-h { padding-top: 1px; font-size: 0.6875rem; }
.sc-email-g-toast {
  position: absolute; left: 52px; bottom: 16px; z-index: 2;
  display: flex; align-items: center; gap: 14px;
  height: 32px; padding: 0 14px;
  border-radius: 6px; background: #303030; color: #FFFFFF;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .2);
  font-size: 0.6875rem; white-space: nowrap; opacity: 0;
}
.sc-email-g-toast b { font-weight: 600; color: #A8C7FA; }

/* ═══ LE TÉLÉPHONE ════════════════════════════════════════════════════ */
.sc-email-tel {
  position: absolute; top: 118px; left: 2px; z-index: 2;
  width: 232px; height: 468px; padding: 6px;
  border-radius: 38px; background: #0A0A0A;
  box-shadow: 0 18px 40px rgba(31, 36, 46, .22);
}
.sc-email-ecran {
  position: relative; height: 456px; overflow: hidden;
  border-radius: 32px; background: #000000; color: #000000;
}
.sc-email-ilot { position: absolute; top: 9px; left: 78px; z-index: 20; width: 64px; height: 19px; border-radius: 10px; background: #000000; }
.sc-email-statut {
  position: absolute; top: 0; left: 0; right: 0; z-index: 19;
  display: flex; align-items: center; justify-content: space-between;
  height: 36px; padding: 3px 18px 0 28px; font-size: 0.6875rem;
}
.sc-email-statut b { font-weight: 700; }
.sc-email-statut--noir { color: #000000; opacity: 0; }
.sc-email-statut--blanc { color: #FFFFFF; }
.sc-email-statut-ico { display: flex; align-items: center; gap: 4px; }
.sc-email-statut-ico svg { width: 12px; height: 9px; fill: currentColor; }
.sc-email-pile { display: block; width: 19px; height: 9px; padding: 1px; border: 1px solid currentColor; border-radius: 3px; opacity: .9; }
.sc-email-pile i { display: block; width: 72%; height: 100%; border-radius: 1px; background: currentColor; }
.sc-email-ecran svg:not([viewBox="0 0 17 11"]):not([viewBox="0 0 16 12"]) { stroke-width: 1.5; }

/* La boîte de réception : réduite derrière la feuille au départ. */
.sc-email-t-fond {
  position: absolute; inset: 0; z-index: 1; overflow: hidden;
  border-radius: 12px; background: #FFFFFF;
  transform-origin: 50% 0; transform: translateY(30px) scale(.92);
}
.sc-email-t-nav {
  position: absolute; top: 36px; left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between;
  height: 26px; padding: 0 12px 0 6px;
  font-size: 0.75rem; color: var(--ios-bleu);
}
.sc-email-t-nav > span { display: flex; align-items: center; gap: 1px; }
.sc-email-t-nav svg { width: 15px; height: 15px; stroke-width: 2 !important; }
.sc-email-t-fleches { gap: 12px !important; }
.sc-email-t-titre { position: absolute; top: 62px; left: 14px; font-size: 1.375rem; font-weight: 700; line-height: 28px; letter-spacing: -.02em; }
.sc-email-t-cherche {
  position: absolute; top: 94px; left: 12px; right: 12px;
  display: flex; align-items: center; gap: 5px;
  height: 28px; padding: 0 8px; border-radius: 9px; background: #EEEEF0;
  font-size: 0.75rem; color: var(--ios-gris);
}
.sc-email-t-cherche svg { width: 13px; height: 13px; }
.sc-email-t-cherche span { flex: 1; }
.sc-email-t-cadre { position: absolute; top: 130px; left: 0; right: 0; height: 280px; overflow: hidden; }
.sc-email-t-lignes { transform: translateY(-70px); }
.sc-email-t-ligne {
  display: block; height: 70px; padding: 8px 12px 0 16px;
  background: linear-gradient(var(--line-ios), var(--line-ios)) right bottom / calc(100% - 16px) 1px no-repeat;
}
.sc-email-t-l1 { display: flex; align-items: center; gap: 4px; line-height: 16px; }
.sc-email-t-l1 b { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; font-size: 0.75rem; font-weight: 700; }
.sc-email-t-l1 small { font-size: 0.6875rem; color: var(--ios-gris); }
.sc-email-t-l1 svg { width: 10px; height: 10px; color: #C7C7CC; stroke-width: 2 !important; }
.sc-email-t-l2 { display: block; margin-top: 1px; overflow: hidden; white-space: nowrap; font-size: 0.75rem; line-height: 16px; }
.sc-email-t-l3 { display: block; height: 28px; margin-top: 1px; overflow: hidden; font-size: 0.6875rem; line-height: 14px; color: var(--ios-gris); }
.sc-email-t-outils {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: flex-start; justify-content: space-between;
  height: 46px; padding: 8px 14px 0;
  background: #F9F9F9 linear-gradient(var(--line-ios), var(--line-ios)) left top / 100% 1px no-repeat;
}
.sc-email-t-outils > i { color: var(--ios-bleu); }
.sc-email-t-outils > i svg { width: 18px; height: 18px; }
.sc-email-t-etat { position: relative; flex: 1; height: 20px; font-size: 0.6875rem; color: #3C3C43; }
.sc-email-t-maj,
.sc-email-t-envoi { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; white-space: nowrap; }
.sc-email-t-envoi { opacity: 0; }
.sc-email-t-envoi i { display: block; width: 70px; height: 2px; overflow: hidden; border-radius: 1px; background: #D1D1D6; }
.sc-email-t-envoi-b { display: block; height: 100%; background: var(--ios-bleu); transform-origin: 0 50%; transform: scaleX(0); }
.sc-email-t-voile { position: absolute; inset: 0; z-index: 2; background: rgba(0, 0, 0, .14); }

/* La feuille de rédaction. */
.sc-email-t-feuille {
  position: absolute; top: 44px; left: 0; right: 0; bottom: 0; z-index: 3;
  overflow: hidden; border-radius: 12px 12px 0 0; background: #FFFFFF;
}
.sc-email-t-barre-f { position: relative; display: flex; align-items: center; justify-content: space-between; height: 44px; padding: 0 10px 0 14px; font-size: 0.75rem; color: var(--ios-bleu); }
.sc-email-t-barre-f b { position: absolute; left: 50%; transform: translateX(-50%); font-size: 0.8125rem; font-weight: 700; color: #000000; white-space: nowrap; }
.sc-email-t-envoyer { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--ios-bleu); color: #FFFFFF; }
.sc-email-t-envoyer svg { width: 14px; height: 14px; stroke-width: 2.2 !important; }
.sc-email-t-champ {
  display: flex; align-items: center; gap: 5px;
  height: 30px; padding: 0 10px 0 12px;
  background: linear-gradient(var(--line-ios), var(--line-ios)) right bottom / calc(100% - 12px) 1px no-repeat;
  font-size: 0.75rem; white-space: nowrap;
}
.sc-email-t-champ > span:first-child { color: var(--ios-gris); }
.sc-email-t-bleu { color: var(--ios-bleu); }
.sc-email-t-noir { color: #000000; }
.sc-email-t-de { background-color: rgba(229, 229, 234, 0); }
.sc-email-t-de-val { position: relative; flex: 1; height: 16px; }
.sc-email-t-de-a,
.sc-email-t-de-b { position: absolute; left: 0; top: 0; line-height: 16px; letter-spacing: -.01em; color: #6C6C70; }
.sc-email-t-de-b { opacity: 0; }
.sc-email-t-corps { padding: 11px 12px 0; font-size: 0.75rem; line-height: 1.45; }
.sc-email-t-corps p { margin-bottom: 6px; }
.fn-scene--email .sc-email-t-pj { display: flex; align-items: center; gap: 8px; margin: 8px 0; }
.sc-email-t-pj .sc-email-pdf { width: 22px; height: 28px; border-radius: 3px; }
.sc-email-t-pj .sc-email-pdf i { bottom: 5px; height: 9px; font-size: 5.5px; border-radius: 1.5px; }
.sc-email-t-pj > span { display: flex; flex-direction: column; font-size: 0.75rem; line-height: 1.3; }
.sc-email-t-pj small { font-size: 0.6875rem; color: var(--ios-gris); }
.sc-email-t-sig { color: var(--ios-gris); }
.sc-email-t-choix {
  position: absolute; left: 0; right: 0; bottom: 0; height: 150px;
  background: #E7E8EC linear-gradient(var(--line-ios), var(--line-ios)) left top / 100% 1px no-repeat;
  transform: translateY(150px);
}
.sc-email-t-bande { position: absolute; top: 62px; left: 8px; right: 8px; height: 26px; border-radius: 8px; background: rgba(118, 118, 128, .14); }
.sc-email-t-roue {
  position: absolute; top: 10px; left: 0; right: 0; height: 130px; overflow: hidden;
  -webkit-mask-image: linear-gradient(transparent, #000 36%, #000 64%, transparent);
  mask-image: linear-gradient(transparent, #000 36%, #000 64%, transparent);
}
.sc-email-t-roue-l { position: absolute; top: 52px; left: 0; right: 0; }
.sc-email-t-roue-l span { display: block; height: 26px; font-size: 0.75rem; line-height: 26px; text-align: center; white-space: nowrap; }

/* La réponse de Camille, ouverte. */
.sc-email-t-lu { position: absolute; inset: 0; z-index: 4; background: #FFFFFF; transform: translateX(100%); }
.sc-email-t-lu-tete { position: absolute; top: 72px; left: 14px; right: 14px; display: flex; align-items: center; gap: 9px; }
.sc-email-t-av {
  display: grid; place-items: center; flex: none; width: 34px; height: 34px;
  border-radius: 50%; background: linear-gradient(#A7ABB4, #858A93); color: #FFFFFF;
  font-size: 0.75rem; font-weight: 700;
}
.sc-email-t-lu-tete b { flex: 1; font-size: 0.8125rem; font-weight: 700; }
.sc-email-t-lu-h { font-size: 0.6875rem; color: var(--ios-gris); }
.sc-email-t-lu-a { position: absolute; top: 114px; left: 14px; right: 8px; font-size: 0.6875rem; color: var(--ios-gris); white-space: nowrap; }
.sc-email-t-lu-objet {
  position: absolute; top: 136px; left: 14px; right: 14px; padding-top: 11px;
  background: linear-gradient(var(--line-ios), var(--line-ios)) left top / 100% 1px no-repeat;
  font-size: 0.875rem; font-weight: 700;
}
.sc-email-t-lu-corps { position: absolute; top: 174px; left: 14px; right: 14px; font-size: 0.75rem; line-height: 1.5; }
.sc-email-t-lu-corps p { margin-bottom: 8px; }
.sc-email-t-lu-outils {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; justify-content: space-around; height: 46px; padding-top: 10px;
  background: #F9F9F9 linear-gradient(var(--line-ios), var(--line-ios)) left top / 100% 1px no-repeat;
  color: var(--ios-bleu);
}
.sc-email-t-lu-outils svg { width: 17px; height: 17px; }

/* La notification. */
.sc-email-t-notif {
  position: absolute; top: 42px; left: 8px; right: 8px; z-index: 6;
  display: flex; align-items: flex-start; gap: 9px;
  padding: 10px 11px; border-radius: 16px; background: rgba(242, 242, 244, .97);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .16);
  transform: translateY(-110px);
}
.sc-email-t-notif-ico {
  display: grid; place-items: center; flex: none; width: 28px; height: 28px;
  border-radius: 7px; background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--line-ios); color: var(--ios-bleu);
}
.sc-email-t-notif-ico svg { width: 16px; height: 16px; }
.sc-email-t-notif > span { display: flex; flex-direction: column; flex: 1; min-width: 0; font-size: 0.75rem; line-height: 1.3; }
.sc-email-t-notif-l1 { display: flex; justify-content: space-between; align-items: baseline; }
.sc-email-t-notif-l1 b { font-weight: 700; }
.sc-email-t-notif-l1 small { font-size: 0.6875rem; color: var(--ios-gris); }
.sc-email-t-notif-l3 { color: #3C3C43; }
.sc-email-t-maison { position: absolute; bottom: 7px; left: 75px; z-index: 7; width: 70px; height: 4px; border-radius: 2px; background: #000000; }

/* ── Le doigt ─────────────────────────────────────────────────────────── */
.sc-email-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 animations ───────────────────────────────────────────────────── */
.sc-email-doigt { animation-name: sc-email-doigt; }
.sc-email-t-de { animation-name: sc-email-de; }
.sc-email-t-choix { animation-name: sc-email-choix; }
.sc-email-t-roue-l { animation-name: sc-email-roue; }
.sc-email-t-de-a { animation-name: sc-email-de-a; }
.sc-email-t-de-b { animation-name: sc-email-de-b; }
.sc-email-t-feuille { animation-name: sc-email-feuille; }
.sc-email-t-fond { animation-name: sc-email-fond; }
.sc-email-t-voile { animation-name: sc-email-voile; }
.sc-email-statut--blanc { animation-name: sc-email-statut-b; }
.sc-email-statut--noir { animation-name: sc-email-statut-n; }
.sc-email-t-maj { animation-name: sc-email-maj; }
.sc-email-t-envoi { animation-name: sc-email-envoi; }
.sc-email-t-envoi-b { animation-name: sc-email-envoi-b; }
.sc-email-g-lignes { animation-name: sc-email-g-lignes; }
.sc-email-g-ligne--lucie { animation-name: sc-email-g-lucie; }
.sc-email-c-t--4 { animation-name: sc-email-c-t4; }
.sc-email-c-t--3 { animation-name: sc-email-c-t3; }
.sc-email-g-liste { animation-name: sc-email-g-liste; }
.sc-email-g-msg { animation-name: sc-email-g-msg; }
.sc-email-g-boutons { animation-name: sc-email-g-boutons; }
.sc-email-g-rep { animation-name: sc-email-g-rep; }
.sc-email-g-tape { animation-name: sc-email-g-tape; }
.sc-email-g-parti { animation-name: sc-email-g-parti; }
.sc-email-g-toast { animation-name: sc-email-g-toast; }
.fn-scene--email .sc-cur { animation-name: sc-cur-email; }
.fn-scene--email .sc-cur-onde { animation-name: sc-email-onde; }
.sc-email-t-notif { animation-name: sc-email-notif; }
.sc-email-t-lignes { animation-name: sc-email-t-lignes; }
.sc-email-t-lu { animation-name: sc-email-t-lu; }

@keyframes sc-email-doigt {
  0%            { opacity: 0; transform: translate(107px, 274px) scale(1.3); }
  4.65%         { opacity: 0; transform: translate(107px, 274px) scale(1.3); }
  4.9%          { opacity: 1; transform: translate(107px, 274px) scale(1); animation-timing-function: ease-out; }
  5.2%          { opacity: 1; transform: translate(107px, 274px) scale(0.84); }
  5.6%          { opacity: 0; transform: translate(107px, 274px) scale(1); }
  9.7%          { opacity: 0; transform: translate(105px, 518px) scale(1.3); }
  10.1%         { opacity: 1; transform: translate(105px, 518px) scale(1); animation-timing-function: ease-out; }
  10.4%         { opacity: 1; transform: translate(105px, 518px) scale(0.88); }
  10.6%         { opacity: 1; transform: translate(105px, 518px) scale(0.88); animation-timing-function: cubic-bezier(.3, 0, .2, 1); }
  12.6%         { opacity: 1; transform: translate(105px, 492px) scale(0.88); }
  13%           { opacity: 0; transform: translate(105px, 492px) scale(1); }
  15.65%        { opacity: 0; transform: translate(191px, 177px) scale(1.3); }
  15.9%         { opacity: 1; transform: translate(191px, 177px) scale(1); animation-timing-function: ease-out; }
  16.2%         { opacity: 1; transform: translate(191px, 177px) scale(0.84); }
  16.6%         { opacity: 0; transform: translate(191px, 177px) scale(1); }
  60.65%        { opacity: 0; transform: translate(105px, 186px) scale(1.3); }
  60.9%         { opacity: 1; transform: translate(105px, 186px) scale(1); animation-timing-function: ease-out; }
  61.2%         { opacity: 1; transform: translate(105px, 186px) scale(0.84); }
  61.6%, 98.4%  { opacity: 0; transform: translate(105px, 186px) scale(1); }
  99.9%, 100%   { opacity: 0; transform: translate(107px, 274px) scale(1.3); }
}
@keyframes sc-email-de {
  0%            { background-color: rgba(229, 229, 234, 0); }
  4.9%          { background-color: rgba(229, 229, 234, 0); }
  5.1%          { background-color: rgba(229, 229, 234, 1); }
  6.2%          { background-color: rgba(229, 229, 234, 1); }
  7%, 98.4%     { background-color: rgba(229, 229, 234, 0); }
  99.9%, 100%   { background-color: rgba(229, 229, 234, 0); }
}
@keyframes sc-email-choix {
  0%            { transform: translateY(150px); }
  5.6%          { transform: translateY(150px); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  8%, 98.4%     { transform: translateY(0); }
  99.9%, 100%   { transform: translateY(150px); }
}
@keyframes sc-email-roue {
  0%            { transform: translateY(0); }
  10.6%         { transform: translateY(0); animation-timing-function: cubic-bezier(.3, 0, .2, 1); }
  12.6%, 98.4%  { transform: translateY(-26px); }
  99.9%, 100%   { transform: translateY(0); }
}
@keyframes sc-email-de-a {
  0%            { opacity: 1; }
  12.8%         { opacity: 1; }
  13.6%, 98.4%  { opacity: 0; }
  99.9%, 100%   { opacity: 1; }
}
@keyframes sc-email-de-b {
  0%            { opacity: 0; }
  12.8%         { opacity: 0; }
  13.6%, 98.4%  { opacity: 1; }
  99.9%, 100%   { opacity: 0; }
}
@keyframes sc-email-feuille {
  0%            { transform: translateY(0); }
  16.4%         { transform: translateY(0); animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
  18.6%, 98.4%  { transform: translateY(420px); }
  99.9%, 100%   { transform: translateY(0); }
}
@keyframes sc-email-fond {
  0%            { transform: translateY(30px) scale(.92); border-radius: 12px; }
  16.4%         { transform: translateY(30px) scale(.92); border-radius: 12px; animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
  18.6%, 98.4%  { transform: translateY(0) scale(1); border-radius: 0; }
  99.9%, 100%   { transform: translateY(30px) scale(.92); border-radius: 12px; }
}
@keyframes sc-email-voile {
  0%            { opacity: 1; }
  16.4%         { opacity: 1; }
  18.4%, 98.4%  { opacity: 0; }
  99.9%, 100%   { opacity: 1; }
}
@keyframes sc-email-statut-b {
  0%            { opacity: 1; }
  17%           { opacity: 1; }
  17.8%, 98.4%  { opacity: 0; }
  99.9%, 100%   { opacity: 1; }
}
@keyframes sc-email-statut-n {
  0%            { opacity: 0; }
  17%           { opacity: 0; }
  17.8%, 98.4%  { opacity: 1; }
  99.9%, 100%   { opacity: 0; }
}
@keyframes sc-email-maj {
  0%            { opacity: 1; }
  17.2%         { opacity: 1; }
  17.6%         { opacity: 0; }
  20.8%         { opacity: 0; }
  21.4%, 98.4%  { opacity: 1; }
  99.9%, 100%   { opacity: 1; }
}
@keyframes sc-email-envoi {
  0%            { opacity: 0; }
  17.4%         { opacity: 0; }
  17.8%         { opacity: 1; }
  20.6%         { opacity: 1; }
  21%, 98.4%    { opacity: 0; }
  99.9%, 100%   { opacity: 0; }
}
@keyframes sc-email-envoi-b {
  0%            { transform: scaleX(0); }
  17.8%         { transform: scaleX(0); animation-timing-function: cubic-bezier(.3, .5, .4, 1); }
  20.4%, 98.4%  { transform: scaleX(1); }
  99.9%, 100%   { transform: scaleX(0); }
}
@keyframes sc-email-g-lignes {
  0%            { transform: translateY(-66px); }
  21%           { transform: translateY(-66px); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  22.4%, 98.4%  { transform: translateY(0); }
  99.9%, 100%   { transform: translateY(-66px); }
}
@keyframes sc-email-g-lucie {
  0%            { opacity: 0; }
  21.2%         { opacity: 0; }
  22.2%, 98.4%  { opacity: 1; }
  99.9%, 100%   { opacity: 0; }
}
@keyframes sc-email-c-t4 {
  0%            { opacity: 0; }
  21%           { opacity: 0; }
  21.2%         { opacity: 1; }
  28%           { opacity: 1; }
  28.2%, 98.4%  { opacity: 0; }
  99.9%, 100%   { opacity: 0; }
}
@keyframes sc-email-c-t3 {
  0%            { opacity: 1; }
  21%           { opacity: 1; }
  21.2%         { opacity: 0; }
  28%           { opacity: 0; }
  28.2%, 98.4%  { opacity: 1; }
  99.9%, 100%   { opacity: 1; }
}
@keyframes sc-email-g-liste {
  0%            { opacity: 1; }
  27.4%         { opacity: 1; }
  27.9%, 98.4%  { opacity: 0; }
  99.9%, 100%   { opacity: 1; }
}
@keyframes sc-email-g-msg {
  0%            { opacity: 0; transform: translateY(6px); }
  27.6%         { opacity: 0; transform: translateY(6px); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  28.8%, 98.4%  { opacity: 1; transform: translateY(0); }
  99.9%, 100%   { opacity: 0; transform: translateY(6px); }
}
@keyframes sc-email-g-boutons {
  0%            { opacity: 1; }
  41%           { opacity: 1; }
  41.4%, 98.4%  { opacity: 0; }
  99.9%, 100%   { opacity: 1; }
}
@keyframes sc-email-g-rep {
  0%            { opacity: 0; transform: translateY(4px); }
  41.2%         { opacity: 0; transform: translateY(4px); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  42.6%         { opacity: 1; transform: translateY(0); }
  53.6%         { opacity: 1; transform: translateY(0); }
  54.4%, 98.4%  { opacity: 0; transform: translateY(0); }
  99.9%, 100%   { opacity: 0; transform: translateY(4px); }
}
@keyframes sc-email-g-tape {
  0%            { width: 0; animation-timing-function: steps(1, end); }
  43.2%         { width: 8.3px; animation-timing-function: steps(1, end); }
  43.5%         { width: 15px; animation-timing-function: steps(1, end); }
  43.8%         { width: 19.7px; animation-timing-function: steps(1, end); }
  44.1%         { width: 24px; animation-timing-function: steps(1, end); }
  44.4%         { width: 30.7px; animation-timing-function: steps(1, end); }
  44.7%         { width: 33.6px; animation-timing-function: steps(1, end); }
  45%           { width: 37.5px; animation-timing-function: steps(1, end); }
  45.3%         { width: 41px; animation-timing-function: steps(1, end); }
  45.6%         { width: 44.4px; animation-timing-function: steps(1, end); }
  45.9%         { width: 51.6px; animation-timing-function: steps(1, end); }
  46.2%         { width: 58.7px; animation-timing-function: steps(1, end); }
  46.5%         { width: 62px; animation-timing-function: steps(1, end); }
  46.8%         { width: 68.9px; animation-timing-function: steps(1, end); }
  47.1%         { width: 76.1px; animation-timing-function: steps(1, end); }
  47.4%         { width: 83.2px; animation-timing-function: steps(1, end); }
  47.7%         { width: 87.6px; animation-timing-function: steps(1, end); }
  48%           { width: 90.5px; animation-timing-function: steps(1, end); }
  48.3%         { width: 95.2px; animation-timing-function: steps(1, end); }
  48.6%         { width: 105.7px; animation-timing-function: steps(1, end); }
  48.9%         { width: 112.7px; animation-timing-function: steps(1, end); }
  49.2%         { width: 116.1px; animation-timing-function: steps(1, end); }
  49.5%, 98.4%  { width: 119.6px; animation-timing-function: steps(1, end); }
  99.9%, 100%   { width: 0; }
}
@keyframes sc-email-g-parti {
  0%            { opacity: 0; transform: translateY(4px); }
  54.2%         { opacity: 0; transform: translateY(4px); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  55.4%, 98.4%  { opacity: 1; transform: translateY(0); }
  99.9%, 100%   { opacity: 0; transform: translateY(4px); }
}
@keyframes sc-email-g-toast {
  0%            { opacity: 0; transform: translateY(6px); }
  54.6%         { opacity: 0; transform: translateY(6px); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  55.6%         { opacity: 1; transform: translateY(0); }
  65%           { opacity: 1; transform: translateY(0); }
  66%, 98.4%    { opacity: 0; transform: translateY(0); }
  99.9%, 100%   { opacity: 0; transform: translateY(6px); }
}
@keyframes sc-cur-email {
  0%            { opacity: 0; transform: translate(475.4px, 542.7px) scale(1); }
  21.8%         { opacity: 0; transform: translate(475.4px, 542.7px) scale(1); }
  22.6%         { opacity: 1; transform: translate(475.4px, 542.7px) scale(1); }
  22.8%         { opacity: 1; transform: translate(475.4px, 542.7px) scale(1); animation-timing-function: cubic-bezier(.45, 0, .25, 1); }
  26.4%         { opacity: 1; transform: translate(300.4px, 241.7px) scale(1); }
  26.65%        { opacity: 1; transform: translate(300.4px, 241.7px) scale(1); }
  26.8%         { opacity: 1; transform: translate(300.4px, 241.7px) scale(0.86); }
  27.1%         { opacity: 1; transform: translate(300.4px, 241.7px) scale(1); }
  29.5%         { opacity: 1; transform: translate(300.4px, 241.7px) scale(1); animation-timing-function: cubic-bezier(.45, 0, .25, 1); }
  32.5%         { opacity: 1; transform: translate(465.4px, 417.7px) scale(1); }
  37%           { opacity: 1; transform: translate(465.4px, 417.7px) scale(1); animation-timing-function: cubic-bezier(.45, 0, .25, 1); }
  40.4%         { opacity: 1; transform: translate(325.4px, 474.7px) scale(1); }
  40.65%        { opacity: 1; transform: translate(325.4px, 474.7px) scale(1); }
  40.8%         { opacity: 1; transform: translate(325.4px, 474.7px) scale(0.86); }
  41.1%         { opacity: 1; transform: translate(325.4px, 474.7px) scale(1); }
  50%           { opacity: 1; transform: translate(325.4px, 474.7px) scale(1); animation-timing-function: cubic-bezier(.45, 0, .25, 1); }
  52.8%         { opacity: 1; transform: translate(333.4px, 525.7px) scale(1); }
  53.05%        { opacity: 1; transform: translate(333.4px, 525.7px) scale(1); }
  53.2%         { opacity: 1; transform: translate(333.4px, 525.7px) scale(0.86); }
  53.5%         { opacity: 1; transform: translate(333.4px, 525.7px) scale(1); }
  55.5%         { opacity: 1; transform: translate(333.4px, 525.7px) scale(1); animation-timing-function: cubic-bezier(.45, 0, .25, 1); }
  58%           { opacity: 1; transform: translate(475.4px, 542.7px) scale(1); }
  59%, 98.4%    { opacity: 0; transform: translate(475.4px, 542.7px) scale(1); }
  99.9%, 100%   { opacity: 0; transform: translate(475.4px, 542.7px) scale(1); }
}
@keyframes sc-email-onde {
  0%            { opacity: 0; transform: scale(.4); }
  26.75%        { opacity: 0; transform: scale(.4); }
  26.8%         { opacity: .9; transform: scale(.4); animation-timing-function: ease-out; }
  27.6%         { opacity: 0; transform: scale(2.2); }
  40.75%        { opacity: 0; transform: scale(.4); }
  40.8%         { opacity: .9; transform: scale(.4); animation-timing-function: ease-out; }
  41.6%         { opacity: 0; transform: scale(2.2); }
  53.15%        { opacity: 0; transform: scale(.4); }
  53.2%         { opacity: .9; transform: scale(.4); animation-timing-function: ease-out; }
  54%, 98.4%    { opacity: 0; transform: scale(2.2); }
  99.9%, 100%   { opacity: 0; transform: scale(.4); }
}
@keyframes sc-email-notif {
  0%            { opacity: 1; transform: translateY(-110px) scale(1); }
  57%           { opacity: 1; transform: translateY(-110px) scale(1); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  59%           { opacity: 1; transform: translateY(0) scale(1); }
  60.9%         { opacity: 1; transform: translateY(0) scale(1); }
  61.2%         { opacity: 1; transform: translateY(0) scale(.97); }
  61.4%         { opacity: 1; transform: translateY(0) scale(.97); animation-timing-function: ease-in; }
  62%, 98.4%    { opacity: 0; transform: translateY(-10px) scale(.97); }
  99.9%, 100%   { opacity: 1; transform: translateY(-110px) scale(1); }
}
@keyframes sc-email-t-lignes {
  0%            { transform: translateY(-70px); }
  57.4%         { transform: translateY(-70px); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  58.8%, 98.4%  { transform: translateY(0); }
  99.9%, 100%   { transform: translateY(-70px); }
}
@keyframes sc-email-t-lu {
  0%            { transform: translateX(100%); }
  61.6%         { transform: translateX(100%); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  63.8%, 98.4%  { transform: translateX(0); }
  99.9%, 100%   { transform: translateX(100%); }
}

/* Moins de mouvement : l'état d'arrivée, immobile. Le devis est ouvert chez
   Camille avec sa réponse envoyée ; la réponse est ouverte chez Lucie. */
@media (prefers-reduced-motion: reduce) {
  .sc-email-t-fond { transform: none; border-radius: 0; }
  .sc-email-t-voile, .sc-email-t-feuille, .sc-email-statut--blanc,
  .sc-email-g-liste, .sc-email-g-boutons, .sc-email-g-rep, .sc-email-doigt { opacity: 0; }
  .sc-email-statut--noir, .sc-email-g-msg, .sc-email-g-parti { opacity: 1; }
  .sc-email-t-lu { transform: none; }
}