/* Scène « testez votre site » : dans Chrome, la page du diagnostic. On tape
   chezlucie.fr, on lance, la vraie attente défile, et le vrai rapport
   arrive. Pas de légende. Le rideau de fin vient du kit.

   LE MINUTAGE, en pourcentages d'une boucle de 12 secondes :
        5 %  le curseur clique dans le champ ; il tape « chezlucie.fr »
             (5,8 à 11,9 %, une lettre toutes les 66 ms)
       15 %  « Lancer le diagnostic » ; le bouton passe à « en cours »
     16,6 %  les six étapes, une toutes les 4,5 %, et la barre qui avance
       43 %  100 % ; le rapport remplace la page à 45 %
       46 %  58 sur 100, la phrase, puis les trois points « à faire »
             (48, 49,4, 50,8 %) ; plus rien ne bouge ensuite
       95 %  fondu au blanc ; tout revient au début entre 98,4 et 99,9 %

   LA TOILE : 520 x 500. La fenêtre Chrome de (2, 2) à (518, 498), sa vue de
   514 x 430 en (3, 67). Tailles de lecture : 11 à 14 px, 22 px au titre,
   44 px pour la note. Couleurs du rapport : vert, orange, rouge. */
.fn-scene--diagnostic {
  --sc-haut: 500px;
  /* Les filets, tous neutres. */
  --line-chrome: #E3E6EA; --line-site: #E5E5E5; --line-champ: #D4D4D4;
  --bleu: #3F7BFF;
  --ok: #15803D; --moyen: #B45309; --faible: #B91C1C;
  /* Les cibles du curseur (pointe de la flèche), mesurées au banc. */
  --sc-dg-champ: 62.4px, 225.2px; --sc-dg-lancer: 400.4px, 225.2px;
  line-height: 1.35;
}
.fn-scene--diagnostic svg { display: block; }
.fn-scene--diagnostic p { margin: 0; }
.fn-scene--diagnostic img { max-width: none; }
.fn-scene--diagnostic i { font-style: normal; }

/* ═══ CHROME ══════════════════════════════════════════════════════════ */
.sc-diagnostic-chrome {
  position: absolute; top: 2px; left: 2px; z-index: 1;
  display: flex; flex-direction: column;
  width: 516px; height: 496px; overflow: hidden;
  border: 1px solid #C7CCD4; border-radius: 8px; background: #FFFFFF;
  box-shadow: 0 12px 30px rgba(31, 36, 46, .14);
}
.sc-diagnostic-c-onglets { position: relative; flex: none; height: 30px; background: #DEE3EA; }
.sc-diagnostic-c-onglet {
  position: absolute; top: 6px; left: 12px;
  display: flex; align-items: center; gap: 7px;
  width: 230px; height: 24px; padding: 0 8px 0 10px;
  border-radius: 8px 8px 0 0; background: #FFFFFF; color: #1F1F1F;
}
.sc-diagnostic-c-onglet img { width: 14px; height: 14px; border-radius: 50%; flex: none; }
.sc-diagnostic-c-onglet > svg { width: 10px; height: 10px; flex: none; color: #474747; }
.sc-diagnostic-c-titre { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; font-size: 0.6875rem; }
.sc-diagnostic-c-plus { position: absolute; top: 10px; left: 254px; color: #474747; }
.sc-diagnostic-c-plus svg { width: 12px; height: 12px; }
.sc-diagnostic-fen { position: absolute; top: 0; right: 0; display: flex; height: 100%; }
.sc-diagnostic-fen i { display: grid; place-items: center; width: 34px; height: 100%; color: #1F1F1F; }
.sc-diagnostic-fen svg { width: 10px; height: 10px; }
.sc-diagnostic-c-outils {
  display: flex; align-items: center; gap: 2px; flex: none;
  height: 34px; padding: 0 8px;
  border-bottom: 1px solid var(--line-chrome); color: #474747;
}
.sc-diagnostic-c-outils > i { display: grid; place-items: center; width: 26px; height: 26px; }
.sc-diagnostic-c-outils > i svg { width: 14px; height: 14px; }
.sc-diagnostic-c-off { color: #C4C7C5; }
.sc-diagnostic-c-adresse {
  display: flex; align-items: center; gap: 8px; flex: 1;
  height: 26px; margin: 0 6px; padding: 0 12px;
  border-radius: 13px; background: #EDF1F7;
  font-size: 0.75rem; color: #1F1F1F; white-space: nowrap;
}
.sc-diagnostic-c-adresse > svg { width: 12px; height: 12px; flex: none; }
.sc-diagnostic-c-etoile { margin-left: auto; }
.sc-diagnostic-c-etoile svg { width: 12px; height: 12px; }

.sc-diagnostic-vue { position: relative; flex: 1; overflow: hidden; background: #FFFFFF; color: #0A0A0A; }
.sc-diagnostic-page { position: absolute; inset: 0; display: block; padding: 22px 24px; }
.sc-diagnostic-page--rapport { padding: 16px; background: #F6F7F9; opacity: 0; }

/* ═══ LE FORMULAIRE ═══════════════════════════════════════════════════ */
.sc-diagnostic-sur { font-size: 0.6875rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--bleu); }
.fn-scene--diagnostic .sc-diagnostic-h1 { margin: 8px 0 0; max-width: 400px; font-size: 1.375rem; font-weight: 800; line-height: 1.2; letter-spacing: -.02em; }
.sc-diagnostic-h1 em { font-style: normal; color: var(--bleu); white-space: nowrap; }
.fn-scene--diagnostic .sc-diagnostic-lab { margin: 18px 0 8px; font-size: 0.6875rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #737373; }
.sc-diagnostic-saisie { display: flex; gap: 10px; }
.sc-diagnostic-champ {
  position: relative; display: flex; align-items: center; flex: 1;
  height: 44px; padding: 0 14px;
  border: 1px solid var(--line-champ); border-radius: 10px; background: #FFFFFF;
  font-size: 0.875rem;
}
.sc-diagnostic-vide { position: absolute; left: 14px; top: 0; line-height: 42px; color: #A3A3A3; }
.sc-diagnostic-tape { display: block; flex: none; overflow: hidden; white-space: nowrap; width: 0; }
.sc-diagnostic-tape-txt { display: inline-block; }
.sc-diagnostic-caret { display: block; flex: none; width: 1.5px; height: 18px; margin-left: 1px; border-radius: 1px; background: #0A0A0A; opacity: 0; }
.sc-diagnostic-lancer {
  position: relative; display: block; flex: none;
  width: 176px; height: 44px; border-radius: 10px; background: #0A0A0A; color: #FFFFFF;
  font-size: 0.875rem; font-weight: 700;
}
.sc-diagnostic-l { position: absolute; inset: 0; display: grid; place-items: center; white-space: nowrap; }
.sc-diagnostic-l--cours { opacity: 0; }
.fn-scene--diagnostic .sc-diagnostic-note { margin: 10px 0 0; font-size: 0.71875rem; color: #737373; }

/* L'attente : l'étape en cours, le pourcentage, la barre bleue. */
.sc-diagnostic-attente {
  display: block; margin-top: 22px; padding: 16px 18px;
  border: 1px solid var(--line-site); border-radius: 14px; background: #FFFFFF;
  opacity: 0;
}
.sc-diagnostic-a-haut { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; height: 26px; margin-bottom: 12px; }
.sc-diagnostic-etapes { position: relative; display: block; flex: 1; height: 20px; }
.sc-diagnostic-etape { position: absolute; left: 0; top: 0; font-size: 0.875rem; font-weight: 600; line-height: 20px; white-space: nowrap; opacity: 0; }
.sc-diagnostic-pcts { position: relative; display: block; width: 56px; height: 26px; }
.sc-diagnostic-pct {
  position: absolute; right: 0; top: 0;
  font-size: 1.25rem; font-weight: 800; line-height: 26px; letter-spacing: -.03em;
  color: var(--bleu); font-variant-numeric: tabular-nums; opacity: 0;
}
.sc-diagnostic-pct small { margin-left: 1px; font-size: 0.8125rem; font-weight: 700; }
.sc-diagnostic-piste { display: block; height: 8px; overflow: hidden; border-radius: 5px; background: #EEF1F6; }
.sc-diagnostic-part { display: block; height: 100%; border-radius: 5px; background: var(--bleu); transform: scaleX(0); transform-origin: 0 50%; }
.sc-diagnostic-a-note { display: block; margin-top: 12px; font-size: 0.71875rem; line-height: 1.5; color: #737373; }

/* ═══ LE RAPPORT ══════════════════════════════════════════════════════ */
.sc-diagnostic-entete {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 16px;
  border: 1px solid var(--line-site); border-radius: 14px; background: #FFFFFF;
}
.sc-diagnostic-entete > span:first-child { display: flex; flex-direction: column; }
.sc-diagnostic-entete small { font-size: 0.6875rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #737373; }
.sc-diagnostic-entete b { font-size: 1.0625rem; font-weight: 800; letter-spacing: -.02em; }
.sc-diagnostic-quand { font-size: 0.6875rem; color: #737373; white-space: nowrap; }
.sc-diagnostic-familles { display: flex; gap: 6px; margin-top: 8px; }
.sc-diagnostic-fam {
  display: flex; align-items: center; justify-content: space-between; gap: 6px; flex: 1;
  height: 42px; padding: 0 10px;
  border: 1px solid var(--line-site); border-radius: 10px; background: #FFFFFF;
}
.sc-diagnostic-fam > span { display: flex; flex-direction: column; gap: 4px; font-size: 0.6875rem; font-weight: 600; white-space: nowrap; }
.sc-diagnostic-fam > span i { display: block; width: 26px; height: 3px; border-radius: 2px; }
.sc-diagnostic-fam b { font-size: 0.8125rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.sc-diagnostic-fam--moyen > span i { background: var(--moyen); }
.sc-diagnostic-fam--faible > span i { background: var(--faible); }
.sc-diagnostic-fam--ici { border-color: #0A0A0A; background: #0A0A0A; color: #FFFFFF; }
.sc-diagnostic-bas { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 8px; margin-top: 8px; }
.sc-diagnostic-note-bloc,
.sc-diagnostic-faire {
  display: flex; flex-direction: column;
  padding: 14px; border: 1px solid var(--line-site); border-radius: 14px; background: #FFFFFF;
}
.sc-diagnostic-nb { display: flex; align-items: baseline; gap: 6px; }
.sc-diagnostic-nb b { font-size: 2.75rem; font-weight: 800; line-height: 1; letter-spacing: -.04em; color: var(--moyen); }
.sc-diagnostic-nb small { font-size: 0.6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #737373; }
.sc-diagnostic-verdict { display: block; margin-top: 12px; font-size: 0.75rem; line-height: 1.45; }
.sc-diagnostic-f-tete { display: block; margin-bottom: 10px; font-size: 0.6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #737373; }
.sc-diagnostic-point { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; opacity: 0; }
.sc-diagnostic-point + .sc-diagnostic-point { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line-site); }
.sc-diagnostic-point > i {
  display: grid; place-items: center; width: 20px; height: 20px;
  border-radius: 5px; background: #0A0A0A; color: #FFFFFF;
  font-size: 0.6875rem; font-weight: 700;
}
.sc-diagnostic-p-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sc-diagnostic-p-haut { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.sc-diagnostic-p-haut b { font-size: 0.8125rem; font-weight: 700; white-space: nowrap; }
.sc-diagnostic-p-haut small { font-size: 0.6875rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #737373; white-space: nowrap; }
.sc-diagnostic-p-dit { font-size: 0.75rem; line-height: 1.4; color: #525252; }

/* ═══ LES NOMS D'ANIMATION ════════════════════════════════════════════ */
.sc-fin { animation-name: sc-conclure; }
.sc-cur      { animation-name: sc-cur-diagnostic; }
.sc-cur-onde { animation-name: sc-onde-diagnostic; }
.sc-diagnostic-champ     { animation-name: sc-diagnostic-champ; }
.sc-diagnostic-vide      { animation-name: sc-diagnostic-vide; }
.sc-diagnostic-tape      { animation-name: sc-diagnostic-tape; }
.sc-diagnostic-caret     { animation-name: sc-diagnostic-caret; }
.sc-diagnostic-lancer    { animation-name: sc-diagnostic-lancer; }
.sc-diagnostic-l--avant  { animation-name: sc-diagnostic-avant; }
.sc-diagnostic-l--cours  { animation-name: sc-diagnostic-cours; }
.sc-diagnostic-attente   { animation-name: sc-diagnostic-attente; }
.sc-diagnostic-part      { animation-name: sc-diagnostic-part; }
.sc-diagnostic-etape--1  { animation-name: sc-diagnostic-e1; }
.sc-diagnostic-etape--2  { animation-name: sc-diagnostic-e2; }
.sc-diagnostic-etape--3  { animation-name: sc-diagnostic-e3; }
.sc-diagnostic-etape--4  { animation-name: sc-diagnostic-e4; }
.sc-diagnostic-etape--5  { animation-name: sc-diagnostic-e5; }
.sc-diagnostic-etape--6  { animation-name: sc-diagnostic-e6; }
.sc-diagnostic-pct--1    { animation-name: sc-diagnostic-e1; }
.sc-diagnostic-pct--2    { animation-name: sc-diagnostic-e2; }
.sc-diagnostic-pct--3    { animation-name: sc-diagnostic-e3; }
.sc-diagnostic-pct--4    { animation-name: sc-diagnostic-e4; }
.sc-diagnostic-pct--5    { animation-name: sc-diagnostic-e5; }
.sc-diagnostic-pct--6    { animation-name: sc-diagnostic-p6; }
.sc-diagnostic-pct--7    { animation-name: sc-diagnostic-p7; }
.sc-diagnostic-page--form    { animation-name: sc-diagnostic-form; }
.sc-diagnostic-page--rapport { animation-name: sc-diagnostic-rapport; }
.sc-diagnostic-nb        { animation-name: sc-diagnostic-nb; }
.sc-diagnostic-verdict   { animation-name: sc-diagnostic-verdict; }
.sc-diagnostic-point--1  { animation-name: sc-diagnostic-point-1; }
.sc-diagnostic-point--2  { animation-name: sc-diagnostic-point-2; }
.sc-diagnostic-point--3  { animation-name: sc-diagnostic-point-3; }

/* ═══ LE CURSEUR ══════════════════════════════════════════════════════
   Deux cibles MESURÉES dans la toile, la pointe de la flèche posée dessus
   (translate = cible - 4,6 / 2,3) : le champ et « Lancer le diagnostic ». */
@keyframes sc-cur-diagnostic {
  0%           { transform: translate(300px, 420px); opacity: 0; }
  2%           { transform: translate(300px, 420px); opacity: 1; animation-timing-function: cubic-bezier(.3, 0, .2, 1); }
  4.4%         { transform: translate(var(--sc-dg-champ)); }
  5%           { transform: translate(var(--sc-dg-champ)) scale(.86); }
  5.6%         { transform: translate(var(--sc-dg-champ)); animation-timing-function: cubic-bezier(.3, 0, .2, 1); }
  7%, 12.6%    { transform: translate(250px, 262px); animation-timing-function: cubic-bezier(.3, 0, .2, 1); }
  14.4%        { transform: translate(var(--sc-dg-lancer)); }
  15%          { transform: translate(var(--sc-dg-lancer)) scale(.86); }
  15.6%        { transform: translate(var(--sc-dg-lancer)); animation-timing-function: cubic-bezier(.3, 0, .2, 1); }
  18%, 98.4%   { transform: translate(470px, 452px); opacity: 1; }
  99.9%, 100%  { transform: translate(300px, 420px); opacity: 0; }
}
@keyframes sc-onde-diagnostic {
  0%, 4.8%     { transform: scale(.4); opacity: 0; }
  5%           { transform: scale(.4); opacity: .9; }
  7%           { transform: scale(2.2); opacity: 0; }
  14.8%        { transform: scale(.4); opacity: 0; }
  15%          { transform: scale(.4); opacity: .9; }
  17%, 100%    { transform: scale(2.2); opacity: 0; }
}

/* ═══ LA SAISIE ═══════════════════════════════════════════════════════ */
@keyframes sc-diagnostic-champ {
  0%, 5%       { border-color: #D4D4D4; }
  5.1%, 15%    { border-color: #3F7BFF; }
  15.1%, 100%  { border-color: #D4D4D4; }
}
@keyframes sc-diagnostic-vide {
  0%, 5.7%     { opacity: 1; }
  5.8%, 98.4%  { opacity: 0; }
  99.9%, 100%  { opacity: 1; }
}
@keyframes sc-diagnostic-caret {
  0%, 5%       { opacity: 0; }
  5.1%, 15%    { opacity: 1; }
  15.1%, 100%  { opacity: 0; }
}
/* « chezlucie.fr », une lettre à la fois : les largeurs sont MESURÉES au
   banc, lettre après lettre (+0,6 px). */
@keyframes sc-diagnostic-tape {
  0%           { width: 0; animation-timing-function: steps(1, end); }
  5.8%         { width: 8.6px; animation-timing-function: steps(1, end); }
  6.35%        { width: 16.9px; animation-timing-function: steps(1, end); }
  6.9%         { width: 24.8px; animation-timing-function: steps(1, end); }
  7.45%        { width: 32.6px; animation-timing-function: steps(1, end); }
  8%           { width: 36px; animation-timing-function: steps(1, end); }
  8.55%        { width: 44.2px; animation-timing-function: steps(1, end); }
  9.1%         { width: 52.2px; animation-timing-function: steps(1, end); }
  9.65%        { width: 55.6px; animation-timing-function: steps(1, end); }
  10.2%        { width: 63.8px; animation-timing-function: steps(1, end); }
  10.75%       { width: 67.8px; animation-timing-function: steps(1, end); }
  11.3%        { width: 73px; animation-timing-function: steps(1, end); }
  11.85%       { width: 78.3px; animation-timing-function: steps(1, end); }
  98.4%        { width: 78.3px; animation-timing-function: steps(1, end); }
  99.9%, 100%  { width: 0; }
}
@keyframes sc-diagnostic-lancer {
  0%, 14.9%    { transform: none; background: #0A0A0A; }
  15%          { transform: scale(.97); background: #0A0A0A; }
  15.1%        { transform: scale(.97); background: #A3A3A3; }
  15.6%, 98.4% { transform: none; background: #A3A3A3; }
  99.9%, 100%  { transform: none; background: #0A0A0A; }
}
@keyframes sc-diagnostic-avant {
  0%, 15%      { opacity: 1; }
  15.1%, 98.4% { opacity: 0; }
  99.9%, 100%  { opacity: 1; }
}
@keyframes sc-diagnostic-cours {
  0%, 15%      { opacity: 0; }
  15.1%, 98.4% { opacity: 1; }
  99.9%, 100%  { opacity: 0; }
}

/* ═══ L'ATTENTE ═══════════════════════════════════════════════════════ */
@keyframes sc-diagnostic-attente {
  0%, 15.6%    { opacity: 0; transform: translateY(8px); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  16.6%, 98.4% { opacity: 1; transform: none; }
  99.9%, 100%  { opacity: 0; transform: translateY(8px); }
}
/* La barre suit les étapes, d'un palier à l'autre. */
@keyframes sc-diagnostic-part {
  0%, 15.6%    { transform: scaleX(0); animation-timing-function: linear; }
  16.6%        { transform: scaleX(.1); animation-timing-function: linear; }
  21%          { transform: scaleX(.26); animation-timing-function: linear; }
  25.5%        { transform: scaleX(.42); animation-timing-function: linear; }
  30%          { transform: scaleX(.58); animation-timing-function: linear; }
  34.5%        { transform: scaleX(.74); animation-timing-function: linear; }
  39%          { transform: scaleX(.88); animation-timing-function: linear; }
  43%, 98.4%   { transform: scaleX(1); }
  99.9%, 100%  { transform: scaleX(0); }
}
/* Chaque étape, et son pourcentage, le temps de son palier. */
@keyframes sc-diagnostic-e1 {
  0%, 16.5%    { opacity: 0; }
  16.6%, 20.9% { opacity: 1; }
  21%, 100%    { opacity: 0; }
}
@keyframes sc-diagnostic-e2 {
  0%, 20.9%    { opacity: 0; }
  21%, 25.4%   { opacity: 1; }
  25.5%, 100%  { opacity: 0; }
}
@keyframes sc-diagnostic-e3 {
  0%, 25.4%    { opacity: 0; }
  25.5%, 29.9% { opacity: 1; }
  30%, 100%    { opacity: 0; }
}
@keyframes sc-diagnostic-e4 {
  0%, 29.9%    { opacity: 0; }
  30%, 34.4%   { opacity: 1; }
  34.5%, 100%  { opacity: 0; }
}
@keyframes sc-diagnostic-e5 {
  0%, 34.4%    { opacity: 0; }
  34.5%, 38.9% { opacity: 1; }
  39%, 100%    { opacity: 0; }
}
@keyframes sc-diagnostic-e6 {
  0%, 38.9%    { opacity: 0; }
  39%, 98.4%   { opacity: 1; }
  99.9%, 100%  { opacity: 0; }
}
@keyframes sc-diagnostic-p6 {
  0%, 38.9%    { opacity: 0; }
  39%, 42.9%   { opacity: 1; }
  43%, 100%    { opacity: 0; }
}
@keyframes sc-diagnostic-p7 {
  0%, 42.9%    { opacity: 0; }
  43%, 98.4%   { opacity: 1; }
  99.9%, 100%  { opacity: 0; }
}

/* ═══ LE RAPPORT ══════════════════════════════════════════════════════ */
@keyframes sc-diagnostic-form {
  0%, 44.4%    { opacity: 1; }
  45.2%, 98.4% { opacity: 0; }
  99.9%, 100%  { opacity: 1; }
}
@keyframes sc-diagnostic-rapport {
  0%, 44.6%    { opacity: 0; transform: translateY(10px); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  45.8%, 98.4% { opacity: 1; transform: none; }
  99.9%, 100%  { opacity: 0; transform: translateY(10px); }
}
@keyframes sc-diagnostic-nb {
  0%, 45.8%    { opacity: 0; transform: scale(.8); transform-origin: 0 100%; animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  47%, 98.4%   { opacity: 1; transform: none; transform-origin: 0 100%; }
  99.9%, 100%  { opacity: 0; transform: scale(.8); transform-origin: 0 100%; }
}
@keyframes sc-diagnostic-verdict {
  0%, 46.6%    { opacity: 0; }
  47.8%, 98.4% { opacity: 1; }
  99.9%, 100%  { opacity: 0; }
}
@keyframes sc-diagnostic-point-1 {
  0%, 48%      { opacity: 0; transform: translateX(-6px); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  49%, 98.4%   { opacity: 1; transform: none; }
  99.9%, 100%  { opacity: 0; transform: translateX(-6px); }
}
@keyframes sc-diagnostic-point-2 {
  0%, 49.4%    { opacity: 0; transform: translateX(-6px); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  50.4%, 98.4% { opacity: 1; transform: none; }
  99.9%, 100%  { opacity: 0; transform: translateX(-6px); }
}
@keyframes sc-diagnostic-point-3 {
  0%, 50.8%    { opacity: 0; transform: translateX(-6px); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  51.8%, 98.4% { opacity: 1; transform: none; }
  99.9%, 100%  { opacity: 0; transform: translateX(-6px); }
}

/* Moins de mouvement : le rapport, tel qu'il arrive. */
@media (prefers-reduced-motion: reduce) {
  .sc-diagnostic-page--form { opacity: 0; }
  .sc-diagnostic-page--rapport, .sc-diagnostic-point { opacity: 1; }
}