/* Scène « formulaires métier » : à gauche le téléphone d'un candidat sur le
   formulaire de Chez Lucie, à droite le back-office de Lucie, dans Chrome,
   avec son suivi à trois colonnes. Pas de légende. Le rideau de fin vient
   du kit.

   LE MINUTAGE, en pourcentages d'une boucle de 12 secondes :
        8 %  le candidat touche « Candidature » : les questions changent
       20 %  il joint son CV
       30 %  il envoie ; son numéro de suivi (30,5 %)
       35 %  sa carte arrive dans « Reçues », Camille descend d'un cran
       50 %  le curseur la prend, la glisse dans « En cours », la pose
             (55,9 %) ; plus rien ne bouge après 58 %
       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. Le tableau : trois colonnes, trois places par colonne
   (26, 88 et 150 px sous le haut du tableau). */
.fn-scene--formulaires {
  --sc-haut: 560px;
  /* Les filets, tous neutres. */
  --line-chrome: #E3E6EA; --line-site: #E8E8E8; --line-champ: #D4D4D4; --line-safari: rgba(0, 0, 0, .08);
  --wp-fond: #F0F0F1; --wp-noir: #1D2327; --wp-gris: #646970; --wp-bord: #C3C4C7; --wp-bleu: #2271B1;
  /* Les cibles, mesurées au banc : le coin du doigt (rond de 26 px) et la
     pointe du curseur, puis le déplacement de la carte. */
  --sc-fm-cand: 57.7px, 235px; --sc-fm-cv: 109px, 359px; --sc-fm-envoi: 109px, 413px;
  --sc-fm-prise: 280.4px, 229.7px; --sc-fm-pose: 370.7px, 291.7px; --sc-fm-glisse: 91.2px, 62px;
  line-height: 1.35;
}
.fn-scene--formulaires svg { display: block; }
.fn-scene--formulaires p { margin: 0; }
.fn-scene--formulaires i { font-style: normal; }

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

/* ═══ LE BACK-OFFICE DE LUCIE : CHROME ════════════════════════════════ */
.sc-formulaires-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-formulaires-c-onglets { position: relative; flex: none; height: 30px; background: #DEE3EA; }
.sc-formulaires-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-formulaires-c-onglet > svg { width: 10px; height: 10px; flex: none; color: #474747; }
.sc-formulaires-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-formulaires-c-titre { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; font-size: 0.6875rem; }
.sc-formulaires-c-plus { position: absolute; top: 10px; left: 196px; color: #474747; }
.sc-formulaires-c-plus svg { width: 12px; height: 12px; }
.sc-formulaires-fen { position: absolute; top: 0; right: 0; display: flex; height: 100%; }
.sc-formulaires-fen i { display: grid; place-items: center; width: 24px; height: 100%; color: #1F1F1F; }
.sc-formulaires-fen svg { width: 10px; height: 10px; }
.sc-formulaires-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-formulaires-c-outils > i { display: grid; place-items: center; width: 24px; height: 24px; }
.sc-formulaires-c-outils > i svg { width: 13px; height: 13px; }
.sc-formulaires-c-off { color: #C4C7C5; }
.sc-formulaires-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-formulaires-c-adresse > svg { width: 12px; height: 12px; flex: none; }
.sc-formulaires-c-etoile { margin-left: auto; }
.sc-formulaires-c-etoile svg { width: 12px; height: 12px; }
.sc-formulaires-vue { position: relative; flex: 1; overflow: hidden; background: var(--wp-fond); color: var(--wp-noir); }

/* La barre noire de WordPress, puis la page « Demandes ». */
.sc-formulaires-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-formulaires-wp-barre span { display: flex; align-items: center; gap: 5px; }
.sc-formulaires-wp-barre svg { width: 13px; height: 13px; color: #A7AAAD; }
.sc-formulaires-wp { display: block; padding: 12px 8px; }
.fn-scene--formulaires .sc-formulaires-wp-h1 { margin-bottom: 10px; font-size: 1.0625rem; font-weight: 400; line-height: 21px; }
.sc-formulaires-board { position: relative; display: flex; gap: 5px; height: 348px; }
.sc-formulaires-col { display: block; flex: 1; min-width: 0; padding: 5px 6px; border-radius: 4px; background: #E6E7E8; }
.sc-formulaires-col-t { display: flex; align-items: center; justify-content: space-between; font-size: 0.6875rem; font-weight: 700; line-height: 16px; }
.sc-formulaires-n { position: relative; display: block; width: 18px; height: 16px; }
.sc-formulaires-n-v {
  position: absolute; inset: 0; display: grid; place-items: center;
  border-radius: 5px; background: #FFFFFF; color: var(--wp-gris); font-size: 0.6875rem; font-weight: 600;
}
.sc-formulaires-recues-2,
.sc-formulaires-cours-2 { opacity: 0; }
/* Les cartes : trois colonnes de (100 % - 10 px) / 3, trois places
   (26, 88 et 150 px sous le haut du tableau). */
.sc-formulaires-carte {
  position: absolute; top: 26px; left: 0;
  display: flex; flex-direction: column;
  width: calc((100% - 10px) / 3); height: 56px; padding: 5px 6px;
  border: 1px solid var(--wp-bord); border-radius: 4px; background: #FFFFFF;
  font-size: 0.6875rem; line-height: 14px; white-space: nowrap;
}
.sc-formulaires-carte b { font-weight: 700; }
.sc-formulaires-carte small { font-size: 0.6875rem; color: var(--wp-gris); overflow: hidden; }
.sc-formulaires-carte--helene { left: calc((100% - 10px) / 3 + 5px); }
.sc-formulaires-carte--marc,
.sc-formulaires-carte--julie,
.sc-formulaires-carte--paul { left: calc((100% - 10px) / 3 * 2 + 10px); }
.sc-formulaires-carte--julie { top: 88px; }
.sc-formulaires-carte--paul { top: 150px; }
.sc-formulaires-carte--mael { z-index: 2; opacity: 0; }

/* ═══ LE TÉLÉPHONE DU CANDIDAT : SAFARI ═══════════════════════════════ */
.sc-formulaires-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-formulaires-ecran { position: relative; height: 100%; overflow: hidden; border-radius: 33px; background: #FFFFFF; color: #0A0A0A; }
.sc-formulaires-ilot {
  position: absolute; top: 8px; left: 50%; z-index: 9;
  width: 66px; height: 19px; margin-left: -33px; border-radius: 10px; background: #000000;
}
.sc-formulaires-maison {
  position: absolute; bottom: 5px; left: 50%; z-index: 9;
  width: 80px; height: 4px; margin-left: -40px; border-radius: 2px; background: #0A0A0A;
}
.sc-formulaires-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-formulaires-statut b { flex: 1; font-weight: 700; }
.sc-formulaires-reseau { display: flex; align-items: flex-end; gap: 1.5px; height: 8px; }
.sc-formulaires-reseau i { display: block; width: 2.5px; border-radius: 1px; background: currentColor; }
.sc-formulaires-reseau i:nth-child(1) { height: 3px; }
.sc-formulaires-reseau i:nth-child(2) { height: 4.5px; }
.sc-formulaires-reseau i:nth-child(3) { height: 6px; }
.sc-formulaires-reseau i:nth-child(4) { height: 8px; }
.sc-formulaires-pile { display: block; width: 16px; height: 8px; padding: 1px; border: 1px solid currentColor; border-radius: 2.5px; opacity: .9; }
.sc-formulaires-pile i { display: block; width: 75%; height: 100%; border-radius: 1px; background: currentColor; }
.sc-formulaires-sf-vue { position: absolute; top: 34px; left: 0; right: 0; bottom: 84px; overflow: hidden; }
.sc-formulaires-s-nav {
  display: flex; align-items: center; justify-content: space-between;
  height: 36px; padding: 0 14px; border-bottom: 1px solid var(--line-site);
}
.sc-formulaires-s-nav b { font-size: 0.8125rem; font-weight: 800; letter-spacing: -.01em; }
.sc-formulaires-s-nav svg { width: 16px; height: 16px; }
.sc-formulaires-form { display: flex; flex-direction: column; padding: 12px 14px 0; }
.fn-scene--formulaires .sc-formulaires-h { margin-bottom: 10px; font-size: 1rem; font-weight: 800; line-height: 20px; letter-spacing: -.01em; }
.sc-formulaires-lab { display: block; margin-bottom: 6px; font-size: 0.6875rem; font-weight: 700; line-height: 14px; letter-spacing: .06em; text-transform: uppercase; color: #737373; }
.sc-formulaires-types { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.sc-formulaires-type {
  display: grid; place-items: center; height: 30px; padding: 0 9px;
  border: 1px solid var(--line-champ); border-radius: 8px;
  font-size: 0.75rem; font-weight: 600; white-space: nowrap;
}
.sc-formulaires-type--groupe { border-color: #0A0A0A; background: #0A0A0A; color: #FFFFFF; }
.sc-formulaires-qs { position: relative; display: block; height: 116px; }
.sc-formulaires-q { position: absolute; inset: 0; display: flex; flex-direction: column; }
.sc-formulaires-q--cand { opacity: 0; }
.sc-formulaires-pas { display: flex; align-items: center; gap: 10px; height: 32px; margin-bottom: 10px; }
.sc-formulaires-pas i { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--line-champ); border-radius: 8px; }
.sc-formulaires-pas i svg { width: 13px; height: 13px; }
.sc-formulaires-pas b { min-width: 22px; font-size: 0.9375rem; font-weight: 800; text-align: center; }
.sc-formulaires-jours { display: flex; gap: 6px; margin-bottom: 10px; }
.sc-formulaires-jour {
  display: grid; place-items: center; height: 30px; padding: 0 9px;
  border: 1px solid var(--line-champ); border-radius: 8px;
  font-size: 0.75rem; white-space: nowrap;
}
.sc-formulaires-jour--ici { border-color: #0A0A0A; font-weight: 700; }
.sc-formulaires-cv { position: relative; display: block; height: 34px; }
.sc-formulaires-cv-vide,
.sc-formulaires-cv-joint {
  position: absolute; inset: 0; display: flex; align-items: center; gap: 7px;
  padding: 0 10px; border-radius: 8px; font-size: 0.75rem;
}
.sc-formulaires-cv-vide { justify-content: center; border: 1px dashed #A3A3A3; color: #525252; }
.sc-formulaires-cv-vide svg { width: 14px; height: 14px; }
.sc-formulaires-cv-joint { border: 1px solid var(--line-champ); background: #F5F5F3; opacity: 0; }
.sc-formulaires-cv-joint svg { width: 15px; height: 15px; flex: none; }
.sc-formulaires-cv-joint b { flex: 1; min-width: 0; overflow: hidden; font-weight: 600; white-space: nowrap; }
.sc-formulaires-cv-joint small { font-size: 0.6875rem; color: #737373; }
.sc-formulaires-envoyer {
  position: relative; display: block; height: 42px; margin-top: 14px;
  border-radius: 10px; background: #0A0A0A; color: #FFFFFF;
  font-size: 0.8125rem; font-weight: 600;
}
.sc-formulaires-e { position: absolute; inset: 0; display: grid; place-items: center; white-space: nowrap; }
.sc-formulaires-e--cand { opacity: 0; }
/* Le récapitulatif, à l'envoi. */
.sc-formulaires-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 20px; background: #FFFFFF; text-align: center;
  opacity: 0;
}
.sc-formulaires-merci i { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 8px; border-radius: 50%; background: #0A0A0A; color: #FFFFFF; }
.sc-formulaires-merci i svg { width: 22px; height: 22px; stroke-width: 2; }
.sc-formulaires-merci b { font-size: 1rem; font-weight: 800; }
.sc-formulaires-merci span { margin-top: 8px; font-size: 0.75rem; color: #525252; }
.sc-formulaires-merci strong { font-size: 1.25rem; font-weight: 800; letter-spacing: .02em; }
.sc-formulaires-merci small { margin-top: 8px; font-size: 0.6875rem; line-height: 1.45; color: #737373; }
.sc-formulaires-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-formulaires-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-formulaires-sf-adresse small { font-size: 0.6875rem; font-weight: 600; }
.sc-formulaires-sf-adresse svg { width: 13px; height: 13px; }
.sc-formulaires-sf-outils { display: flex; align-items: center; justify-content: space-between; height: 28px; margin-top: 4px; padding: 0 6px; color: #0A84FF; }
.sc-formulaires-sf-outils svg { width: 17px; height: 17px; }
.sc-formulaires-sf-outils svg:nth-child(2) { color: #C7C7CC; }

/* Le doigt du candidat. */
.sc-formulaires-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-formulaires; }
.sc-cur-onde { animation-name: sc-onde-formulaires; }
.sc-formulaires-doigt          { animation-name: sc-formulaires-doigt; }
.sc-formulaires-type--groupe   { animation-name: sc-formulaires-t-groupe; }
.sc-formulaires-type--cand     { animation-name: sc-formulaires-t-cand; }
.sc-formulaires-q--groupe      { animation-name: sc-formulaires-q-groupe; }
.sc-formulaires-q--cand        { animation-name: sc-formulaires-q-cand; }
.sc-formulaires-e--groupe      { animation-name: sc-formulaires-e-groupe; }
.sc-formulaires-e--cand        { animation-name: sc-formulaires-e-cand; }
.sc-formulaires-cv-vide        { animation-name: sc-formulaires-cv-vide; }
.sc-formulaires-cv-joint       { animation-name: sc-formulaires-cv-joint; }
.sc-formulaires-envoyer        { animation-name: sc-formulaires-envoyer; }
.sc-formulaires-merci          { animation-name: sc-formulaires-merci; }
.sc-formulaires-carte--mael    { animation-name: sc-formulaires-mael; }
.sc-formulaires-carte--camille { animation-name: sc-formulaires-camille; }
.sc-formulaires-recues-1       { animation-name: sc-formulaires-un; }
.sc-formulaires-recues-2       { animation-name: sc-formulaires-deux; }
.sc-formulaires-cours-1        { animation-name: sc-formulaires-cours-un; }
.sc-formulaires-cours-2        { animation-name: sc-formulaires-cours-deux; }

/* ═══ LE CANDIDAT ═════════════════════════════════════════════════════
   LE DOIGT. Trois cibles MESURÉES dans la toile (le rond de 26 px s'y
   centre, translate = centre - 13) : « Candidature », « Joindre mon CV »,
   le bouton d'envoi. */
@keyframes sc-formulaires-doigt {
  0%, 7.6%     { transform: translate(var(--sc-fm-cand)) scale(1.3); opacity: 0; }
  7.9%         { transform: translate(var(--sc-fm-cand)); opacity: 1; animation-timing-function: ease-out; }
  8.2%         { transform: translate(var(--sc-fm-cand)) scale(.84); opacity: 1; }
  8.6%         { transform: translate(var(--sc-fm-cand)); opacity: 0; }
  19.6%        { transform: translate(var(--sc-fm-cv)) scale(1.3); opacity: 0; }
  19.9%        { transform: translate(var(--sc-fm-cv)); opacity: 1; animation-timing-function: ease-out; }
  20.2%        { transform: translate(var(--sc-fm-cv)) scale(.84); opacity: 1; }
  20.6%        { transform: translate(var(--sc-fm-cv)); opacity: 0; }
  29.6%        { transform: translate(var(--sc-fm-envoi)) scale(1.3); opacity: 0; }
  29.9%        { transform: translate(var(--sc-fm-envoi)); opacity: 1; animation-timing-function: ease-out; }
  30.2%        { transform: translate(var(--sc-fm-envoi)) scale(.84); opacity: 1; }
  30.6%, 98.4% { transform: translate(var(--sc-fm-envoi)); opacity: 0; }
  99.9%, 100%  { transform: translate(var(--sc-fm-cand)) scale(1.3); opacity: 0; }
}
/* « Candidature » : l'étiquette passe au noir, les questions se relaient. */
@keyframes sc-formulaires-t-groupe {
  0%, 8.1%     { border-color: #0A0A0A; background: #0A0A0A; color: #FFFFFF; }
  8.2%, 98.4%  { border-color: #D4D4D4; background: #FFFFFF; color: #0A0A0A; }
  99.9%, 100%  { border-color: #0A0A0A; background: #0A0A0A; color: #FFFFFF; }
}
@keyframes sc-formulaires-t-cand {
  0%, 8.1%     { border-color: #D4D4D4; background: #FFFFFF; color: #0A0A0A; }
  8.2%, 98.4%  { border-color: #0A0A0A; background: #0A0A0A; color: #FFFFFF; }
  99.9%, 100%  { border-color: #D4D4D4; background: #FFFFFF; color: #0A0A0A; }
}
@keyframes sc-formulaires-q-groupe {
  0%, 8.2%     { opacity: 1; }
  8.6%, 98.4%  { opacity: 0; }
  99.9%, 100%  { opacity: 1; }
}
@keyframes sc-formulaires-q-cand {
  0%, 8.6%     { opacity: 0; transform: translateY(6px); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  9.4%, 98.4%  { opacity: 1; transform: none; }
  99.9%, 100%  { opacity: 0; transform: translateY(6px); }
}
@keyframes sc-formulaires-e-groupe {
  0%, 8.1%     { opacity: 1; }
  8.2%, 98.4%  { opacity: 0; }
  99.9%, 100%  { opacity: 1; }
}
@keyframes sc-formulaires-e-cand {
  0%, 8.1%     { opacity: 0; }
  8.2%, 98.4%  { opacity: 1; }
  99.9%, 100%  { opacity: 0; }
}
/* Le CV joint. */
@keyframes sc-formulaires-cv-vide {
  0%, 20.2%    { opacity: 1; }
  20.4%, 98.4% { opacity: 0; }
  99.9%, 100%  { opacity: 1; }
}
@keyframes sc-formulaires-cv-joint {
  0%, 20.3%    { opacity: 0; }
  20.8%, 98.4% { opacity: 1; }
  99.9%, 100%  { opacity: 0; }
}
@keyframes sc-formulaires-envoyer {
  0%, 29.9%    { transform: none; }
  30.2%        { transform: scale(.97); }
  30.6%, 100%  { transform: none; }
}
/* Envoyé : le numéro de suivi. */
@keyframes sc-formulaires-merci {
  0%, 30.5%    { opacity: 0; transform: translateY(8px); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  31.5%, 98.4% { opacity: 1; transform: none; }
  99.9%, 100%  { opacity: 0; transform: translateY(8px); }
}

/* ═══ LUCIE ═══════════════════════════════════════════════════════════
   Sa carte arrive dans « Reçues » ; Camille descend d'un cran. */
@keyframes sc-formulaires-camille {
  0%, 35%      { transform: none; animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  36%, 55.9%   { transform: translateY(62px); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  57%, 100%    { transform: none; }
}
/* LE CURSEUR. Deux points MESURÉS : la carte de Maël dans « Reçues », puis
   sa place dans « En cours » (la pointe de la flèche posée dessus). Il la
   prend, la glisse, la pose. */
@keyframes sc-cur-formulaires {
  0%, 43%      { transform: translate(470px, 470px); opacity: 0; }
  44%          { transform: translate(470px, 470px); opacity: 1; animation-timing-function: cubic-bezier(.3, 0, .2, 1); }
  49.4%        { transform: translate(var(--sc-fm-prise)); }
  50%          { transform: translate(var(--sc-fm-prise)) scale(.86); animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
  55.5%        { transform: translate(var(--sc-fm-pose)) scale(.86); }
  55.9%        { transform: translate(var(--sc-fm-pose)); animation-timing-function: cubic-bezier(.3, 0, .2, 1); }
  58%, 98.4%   { transform: translate(478px, 452px); opacity: 1; }
  99.9%, 100%  { transform: translate(470px, 470px); opacity: 0; }
}
@keyframes sc-onde-formulaires {
  0%, 49.8%    { transform: scale(.4); opacity: 0; }
  50%          { transform: scale(.4); opacity: .9; }
  52%, 100%    { transform: scale(2.2); opacity: 0; }
}
@keyframes sc-formulaires-mael {
  0%, 35%      { opacity: 0; transform: translateY(-10px); background: #F0F6FC; box-shadow: none; animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  36%          { opacity: 1; transform: none; background: #F0F6FC; box-shadow: none; }
  42%          { opacity: 1; transform: none; background: #FFFFFF; box-shadow: none; }
  49.9%        { opacity: 1; transform: none; background: #FFFFFF; box-shadow: none; }
  50.2%        { opacity: 1; transform: rotate(-2deg) scale(1.04); background: #FFFFFF; box-shadow: 0 8px 18px rgba(0, 0, 0, .18); animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
  55.5%        { opacity: 1; transform: translate(var(--sc-fm-glisse)) rotate(-2deg) scale(1.04); background: #FFFFFF; box-shadow: 0 8px 18px rgba(0, 0, 0, .18); }
  55.9%, 98.4% { opacity: 1; transform: translate(var(--sc-fm-glisse)); background: #FFFFFF; box-shadow: none; }
  99.9%, 100%  { opacity: 0; transform: translateY(-10px); background: #F0F6FC; box-shadow: none; }
}
/* Les compteurs des colonnes suivent. */
@keyframes sc-formulaires-un {
  0%, 35.4%    { opacity: 1; }
  35.5%, 55.8% { opacity: 0; }
  55.9%, 100%  { opacity: 1; }
}
@keyframes sc-formulaires-deux {
  0%, 35.4%    { opacity: 0; }
  35.5%, 55.8% { opacity: 1; }
  55.9%, 100%  { opacity: 0; }
}
@keyframes sc-formulaires-cours-un {
  0%, 55.8%    { opacity: 1; }
  55.9%, 98.4% { opacity: 0; }
  99.9%, 100%  { opacity: 1; }
}
@keyframes sc-formulaires-cours-deux {
  0%, 55.8%    { opacity: 0; }
  55.9%, 98.4% { opacity: 1; }
  99.9%, 100%  { opacity: 0; }
}

/* Moins de mouvement : l'état d'arrivée. Le numéro de suivi, la carte de
   Maël dans « En cours ». */
@media (prefers-reduced-motion: reduce) {
  .sc-formulaires-merci, .sc-formulaires-carte--mael, .sc-formulaires-cours-2 { opacity: 1; }
  .sc-formulaires-carte--mael { transform: translate(var(--sc-fm-glisse)); }
  .sc-formulaires-cours-1 { opacity: 0; }
}