/* ================================================================
   MOTRO FRANCE — parcours.css
   Le parcours client en motion design.

   1. L'interface Motro, simplifiee   2. La commande
   3. La notification                 4. Le clic -> Gmail
   5. Le devis dans le mail, paye     6. La reception du moteur
   7. L'avis ecrit, puis 5 etoiles

   ────────────────────────────────────────────────────────────────
   FIDELITE AU REEL

   Le mail n'est pas invente : il reprend le modele `tpl_devis` du
   CRM (crm/js/logic.js), expediteur compris.

     objet : « Votre devis moteur {code_moteur} »
     corps : « Bonjour {prenom_client}, Suite a votre demande,
              veuillez trouver ci-joint votre devis pour le moteur
              {code_moteur}, au tarif de {prix_devis}. Pour passer
              au paiement de votre moteur veuillez cliquer ici.
              Ce devis est valable 7 jours. [...] L'equipe Motro »
     de     : contact@motro.fr

   Les variables sont substituees avec des valeurs plausibles
   (Julien, N47D20C, 2 178 € TTC), exactement comme le fait le CRM.

   ────────────────────────────────────────────────────────────────
   POURQUOI ELLE A LE DROIT D'EXISTER

   Le portail : combien de fois par jour ? Une, a la premiere
   visite. Et son but est EXPLICATIF — montrer un parcours de
   commande qu'un paragraphe raconte mal. C'est l'un des rares
   usages ou une duree longue est legitime.

   Deux garde-fous : en pause hors ecran, et rien ne joue du tout
   en mouvement reduit.

   ────────────────────────────────────────────────────────────────
   TECHNIQUE

   Une timeline maitre unique de 18s. Chaque element s'anime sur
   CETTE meme timeline avec ses propres plateaux en pourcentage :
   il n'y a pas huit horloges a recaler, il n'y en a qu'une.

   Animations CSS, pas JS : elles tournent hors du thread principal
   et ne saccadent pas pendant que la page charge ses images.
   transform et opacity — plus clip-path pour la frappe.
   ================================================================ */

.pj-stage {
    --pj: 20s;
    position: relative;
    width: 100%;
    height: 470px;
    border-radius: 20px;
    background: linear-gradient(180deg, #f7f7f9 0%, #ededf1 100%);
    overflow: hidden;
    isolation: isolate;
    font-family: var(--font-corps);
}

/* ────────────────────────────────────────────────────────────────
   L'ETAT AU REPOS
   motion.js ajoute .is-playing a l'entree dans le viewport. Tant
   qu'il n'est pas la on ne met pas les animations en pause : figees
   a 0%, elles laisseraient tout a opacity 0 et la scene serait un
   rectangle vide si le JS ne s'executait jamais. On les coupe, et
   on ecrit un etat lisible : l'interface Motro, plaque saisie.
   ──────────────────────────────────────────────────────────────── */
.pj-stage:not(.is-playing) * { animation: none !important; }
.pj-stage:not(.is-playing) .pj-site  { opacity: 1; transform: none; }
.pj-stage:not(.is-playing) .pj-plate { width: auto; }
.pj-stage:not(.is-playing) .pj-caret,
.pj-stage:not(.is-playing) .pj-notif,
.pj-stage:not(.is-playing) .pj-gmail,
.pj-stage:not(.is-playing) .pj-paid,
.pj-stage:not(.is-playing) .pj-engine,
.pj-stage:not(.is-playing) .pj-review,
.pj-stage:not(.is-playing) .pj-cursor { opacity: 0; }


/* ================================================================
   TEMPS 1 — L'INTERFACE MOTRO, SIMPLIFIEE
   ================================================================
   Pas un navigateur generique : le site lui-meme, reduit a ce qui
   le rend reconnaissable — le logo, le titre jaune et noir, le
   champ plaque, le bouton jaune. Le visiteur doit reconnaitre la
   page qu'il a sous les yeux.
   ================================================================ */

.pj-site {
    position: absolute;
    left: 5%; right: 5%; top: 34px;
    border-radius: 16px;
    background: #fff;
    box-shadow: var(--elev-3, 0 14px 40px rgba(17,17,17,0.10));
    overflow: hidden;
    transform-origin: 50% 30%;
    animation: pjSite var(--pj) var(--ease-out) infinite both;
}

.pj-site-nav {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 11px 16px;
    border-bottom: 1px solid rgba(17,17,17,0.07);
}
.pj-logo {
    font-size: 14px;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--c-noir);
}
.pj-logo span { color: var(--c-jaune); }
.pj-site-nav i {
    font-style: normal;
    font-size: 10.5px;
    font-weight: 500;
    color: #a2a2a8;
}
.pj-site-nav .pj-tel {
    margin-left: auto;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--c-noir);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
}

.pj-site-body { padding: 22px 22px 24px; text-align: center; }

.pj-h1 {
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.12;
    color: var(--c-noir);
    margin-bottom: 14px;
}
.pj-h1 span { color: var(--c-jaune); }

.pj-input {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    margin: 0 auto;
    max-width: 260px;
    border: 1.5px solid rgba(17,17,17,0.14);
    border-radius: 10px;
    background: #fff;
    animation: pjInput var(--pj) var(--ease-out) infinite both;
}
.pj-plate {
    font-family: var(--font-mono);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.09em;
    color: var(--c-noir);
    /* La revelation se fait par la LARGEUR, pas par clip-path.
       Avec clip-path, la boite gardait sa largeur pleine et le curseur de
       saisie — un element frere — restait plante a la fin du champ pendant que
       les lettres apparaissaient. En animant la largeur d'une boite en
       inline-block a debordement masque, le frere se decale naturellement :
       le trait suit la frappe, lettre a lettre.
       Largeur cible = 9 caracteres + leur interlettrage (0.09em chacun). */
    display: inline-block;
    vertical-align: bottom;
    overflow: hidden;
    white-space: nowrap;
    width: 0;
    animation: pjType var(--pj) steps(9, end) infinite both;
}
.pj-caret {
    width: 1.5px; height: 19px;
    margin-left: 2px;
    background: var(--c-noir);
    animation: pjCaretBlink 0.9s steps(1, end) infinite,
               pjCaretShow var(--pj) linear infinite both;
}

.pj-cta {
    display: block;
    max-width: 260px;
    margin: 12px auto 0;
    padding: 12px 18px;
    border-radius: 10px;
    background: var(--c-jaune);
    color: var(--c-noir);
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    transform-origin: 50% 50%;
    animation: pjPress var(--pj) var(--ease-out) infinite both;
}


/* ================================================================
   TEMPS 3 — LA NOTIFICATION
   ================================================================
   Elle entre par la droite et sortira par la droite. Le chemin
   symetrique fait comprendre d'ou elle vient — et rendrait un
   balayage pour la chasser evident.
   ================================================================ */

.pj-notif {
    position: absolute;
    top: 46px; right: 18px;
    z-index: 3;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 250px;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(255,255,255,0.93);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    box-shadow: var(--elev-4, 0 28px 72px rgba(17,17,17,0.14));
    transform-origin: 100% 0;
    animation: pjNotif var(--pj) var(--ease-out) infinite both;
}
.pj-notif-ico {
    flex: none;
    width: 26px; height: 26px;
    border-radius: 7px;
    background: #EA4335;          /* le rouge Gmail : on annonce ou l'on va */
    color: #fff;
    display: grid; place-items: center;
    font-size: 12px; font-weight: 800;
}
.pj-notif strong {
    display: block;
    font-size: 12.5px; font-weight: 700;
    letter-spacing: -0.005em; color: var(--c-noir);
}
.pj-notif small {
    display: block; margin-top: 1px;
    font-size: 11.5px; font-weight: 400; color: #7c7c83;
}
.pj-notif-dot {
    position: absolute;
    top: 9px; right: 11px;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--c-jaune);
    box-shadow: 0 0 0 0 rgba(255, 204, 0, 0.55);
    animation: pjDot 1.7s var(--ease-out) infinite;
}


/* ================================================================
   TEMPS 4 & 5 — GMAIL, LE DEVIS, LE PAIEMENT
   ================================================================
   Point de craft central : la boite mail grandit DEPUIS le coin
   haut-droit, la ou etait la notification qu'on vient de cliquer.
   Un panneau qui surgirait du centre semblerait venir d'ailleurs et
   le lien de cause a effet se perdrait.
   ================================================================ */

.pj-gmail {
    position: absolute;
    z-index: 4;
    top: 46px; left: 50%;
    width: min(360px, 82%);
    margin-left: calc(min(360px, 82%) / -2);
    border-radius: 14px;
    background: #fff;
    box-shadow: var(--elev-4, 0 28px 72px rgba(17,17,17,0.14));
    overflow: hidden;
    transform-origin: 100% 0;
    animation: pjGmail var(--pj) var(--ease-out) infinite both;
}

.pj-gmail-bar {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 13px;
    border-bottom: 1px solid rgba(17,17,17,0.07);
    background: #fafafa;
}
.pj-gmail-bar svg { width: 15px; height: 15px; color: #9a9aa0; }
.pj-gmail-bar b {
    margin-left: auto;
    font-size: 11px; font-weight: 700; letter-spacing: -0.01em;
    color: #EA4335;
}

.pj-mail { padding: 14px 16px 16px; }

.pj-mail-objet {
    font-size: 14px; font-weight: 700;
    letter-spacing: -0.015em; color: var(--c-noir);
    margin-bottom: 10px;
}
.pj-mail-de {
    display: flex; align-items: center; gap: 9px;
    padding-bottom: 11px; margin-bottom: 11px;
    border-bottom: 1px solid rgba(17,17,17,0.07);
}
.pj-avatar {
    flex: none; width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--c-noir); color: var(--c-jaune);
    display: grid; place-items: center;
    font-size: 12px; font-weight: 800;
}
.pj-mail-de strong { display: block; font-size: 12px; font-weight: 700; }
.pj-mail-de small  { display: block; font-size: 11px; color: #8a8a90; font-weight: 400; }
.pj-mail-heure     { margin-left: auto; font-size: 10.5px; color: #a2a2a8; }

/* Les lignes du corps arrivent en cascade : on lit un mail ligne a
   ligne, pas d'un bloc. */
.pj-mail-corps p {
    font-size: 12px;
    line-height: 1.55;
    color: #4a4a52;
    margin: 0 0 7px;
    animation: pjLigne var(--pj) var(--ease-out) infinite both;
}
.pj-mail-corps p:nth-of-type(1) { animation-delay: calc(var(--pj) * 0.000); }
.pj-mail-corps p:nth-of-type(2) { animation-delay: calc(var(--pj) * 0.004); }
.pj-mail-corps p:nth-of-type(3) { animation-delay: calc(var(--pj) * 0.008); }
.pj-mail-corps p:nth-of-type(4) { animation-delay: calc(var(--pj) * 0.012); }
.pj-mail-corps p:nth-of-type(5) { animation-delay: calc(var(--pj) * 0.016); }

.pj-mail-corps b { color: var(--c-noir); font-weight: 700; }

/* « cliquer ici » : la formulation exacte du template CRM. */
.pj-lien {
    color: #1a56db;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.pj-piece {
    display: inline-flex; align-items: center; gap: 8px;
    margin-top: 4px;
    padding: 8px 12px;
    border: 1px solid rgba(17,17,17,0.12);
    border-radius: 9px;
    background: #fafafa;
    animation: pjPiece var(--pj) var(--ease-out) infinite both;
}
.pj-piece-ico {
    width: 22px; height: 26px;
    border-radius: 4px;
    background: var(--c-jaune);
    display: grid; place-items: center;
    font-size: 8px; font-weight: 800; color: var(--c-noir);
}
.pj-piece-txt > span  { display: block; font-size: 11.5px; font-weight: 600; color: var(--c-noir); }
.pj-piece-txt > small { display: block; font-size: 10.5px; color: #9a9aa0; }

.pj-paid {
    position: absolute;
    left: 16px; right: 16px; bottom: 14px;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 11px;
    border-radius: 10px;
    background: rgba(52, 199, 89, 0.10);
    color: #1e8e3e;
    font-size: 12.5px; font-weight: 700;
    animation: pjPaid var(--pj) var(--ease-out) infinite both;
}
.pj-paid svg { width: 16px; height: 16px; flex: none; }
.pj-paid path {
    stroke-dasharray: 22; stroke-dashoffset: 22;
    animation: pjCheck var(--pj) var(--ease-out) infinite both;
}


/* ================================================================
   TEMPS 6 — LE MOTEUR ARRIVE
   ================================================================ */

.pj-engine {
    position: absolute;
    z-index: 5;
    left: 50%; top: 130px;
    width: min(300px, 74%);
    margin-left: calc(min(300px, 74%) / -2);
    padding: 18px 20px;
    border-radius: 16px;
    background: var(--c-noir);
    color: #fff;
    box-shadow: var(--elev-4, 0 28px 72px rgba(17,17,17,0.14));
    animation: pjEngine var(--pj) var(--ease-out) infinite both;
}
.pj-engine-top { display: flex; align-items: center; gap: 12px; margin-bottom: 13px; }
.pj-engine-ico {
    flex: none; width: 40px; height: 40px;
    border-radius: 11px; background: var(--c-jaune);
    display: grid; place-items: center;
}
.pj-engine-ico svg { width: 21px; height: 21px; color: var(--c-noir); }
.pj-engine strong { display: block; font-size: 14px; font-weight: 700; letter-spacing: -0.01em; }
.pj-engine small  { display: block; margin-top: 2px; font-size: 11.5px; color: rgba(255,255,255,0.62); }
.pj-engine-bar { height: 4px; border-radius: 2px; background: rgba(255,255,255,0.14); overflow: hidden; }
.pj-engine-bar i {
    display: block; height: 100%; width: 100%; border-radius: 2px;
    background: var(--c-jaune); transform-origin: 0 50%;
    animation: pjDeliver var(--pj) var(--ease-out) infinite both;
}
.pj-engine-etat {
    margin-top: 8px;
    font-size: 11px; font-weight: 700;
    letter-spacing: 0.05em; text-transform: uppercase;
    color: var(--c-jaune);
}


/* ================================================================
   TEMPS 7 — L'AVIS S'ECRIT, PUIS LES CINQ ETOILES
   ================================================================
   L'avis se tape sous les yeux du visiteur : c'est un geste, pas un
   resultat. Puis les etoiles s'allument une par une, 110ms d'ecart —
   deux fois plus lent que les grilles du site, parce qu'ici la
   cascade EST le contenu : c'est le geste de noter.
   ================================================================ */

.pj-review {
    position: absolute;
    z-index: 6;
    left: 50%; top: 120px;
    width: min(320px, 78%);
    margin-left: calc(min(320px, 78%) / -2);
    padding: 20px;
    border-radius: 16px;
    background: #fff;
    box-shadow: var(--elev-4, 0 28px 72px rgba(17,17,17,0.14));
    animation: pjReview var(--pj) var(--ease-out) infinite both;
}
.pj-review-titre {
    font-size: 12.5px; font-weight: 700;
    color: var(--c-noir); margin-bottom: 12px;
}
.pj-zone {
    min-height: 56px;
    padding: 10px 12px;
    border: 1.5px solid rgba(17,17,17,0.12);
    border-radius: 10px;
    background: #fbfbfc;
    margin-bottom: 14px;
    animation: pjZone var(--pj) var(--ease-out) infinite both;
}
.pj-avis-texte {
    display: inline-block;
    font-size: 12.5px; line-height: 1.5; color: var(--c-noir);
    /* Meme correctif que la plaque : revelation par la largeur pour que le
       curseur de saisie, element frere, suive le texte au lieu de rester fige
       a la fin de la zone. */
    overflow: hidden;
    white-space: nowrap;
    width: 0;
    animation: pjEcrit var(--pj) steps(34, end) infinite both;
}
.pj-avis-caret {
    display: inline-block;
    width: 1.5px; height: 15px;
    vertical-align: -2px;
    background: var(--c-noir);
    animation: pjCaretBlink 0.9s steps(1, end) infinite,
               pjAvisCaret var(--pj) linear infinite both;
}

.pj-stars { display: flex; justify-content: center; gap: 7px; }
.pj-stars i {
    font-style: normal; font-size: 26px; line-height: 1;
    color: var(--c-jaune);
    transform-origin: 50% 60%;
    animation: pjStar var(--pj) var(--ease-out) infinite both;
}
.pj-stars i:nth-child(1) { animation-delay: calc(var(--pj) * 0.000); }
.pj-stars i:nth-child(2) { animation-delay: calc(var(--pj) * 0.006); }
.pj-stars i:nth-child(3) { animation-delay: calc(var(--pj) * 0.012); }
.pj-stars i:nth-child(4) { animation-delay: calc(var(--pj) * 0.018); }
.pj-stars i:nth-child(5) { animation-delay: calc(var(--pj) * 0.024); }

.pj-merci {
    margin-top: 11px; text-align: center;
    font-size: 11.5px; font-weight: 600; color: #7c7c83;
    animation: pjMerci var(--pj) var(--ease-out) infinite both;
}


/* ================================================================
   LE CURSEUR
   ================================================================
   Il s'etale sur toute la scene (inset: 0) et porte le pictogramme
   dans son coin. C'est ce qui permet d'exprimer son trajet en
   pourcentages de SCENE : les % de translate() se calculent sur la
   taille de l'element, pas sur celle du parent.
   ================================================================ */

.pj-cursor {
    position: absolute;
    z-index: 9;
    inset: 0;
    pointer-events: none;
    animation: pjCursor var(--pj) var(--ease-in-out) infinite both;
}
.pj-cursor svg {
    position: absolute; left: 0; top: 0;
    width: 21px; height: 21px;
    filter: drop-shadow(0 2px 5px rgba(0,0,0,0.28));
}


/* ================================================================
   LA TIMELINE MAITRE — 20s
   ================================================================
   Regle de montage : deux plans ne se chevauchent jamais a demi.
   Un element est sorti AVANT que le suivant entre, sinon deux
   surfaces a 50% d'opacite se superposent et l'oeil ne lit plus
   ni l'une ni l'autre. Les fenetres ci-dessous sont donc
   disjointes, avec un souffle entre chaque.

      0-5    l'interface Motro apparait
      5-17   la plaque se tape
     17-20   clic sur "Verifier la disponibilite"
     20-30   la notification entre, puis on la clique
     30-36   Gmail s'ouvre depuis le coin de la notification
     36-48   le mail se lit, la piece jointe arrive
     48-52   clic sur "cliquer ici"
     52-58   paiement confirme (remplace la piece jointe)
     58-62   Gmail se referme
     62-72   le moteur est expedie puis pose
     72-88   l'avis s'ecrit
     86-93   les cinq etoiles s'allument
     93-100  remerciement, fondu, on reboucle
   ================================================================ */

@keyframes pjSite {
    0%          { opacity: 0; transform: translateY(14px) scale(0.965); }
    5%, 30%     { opacity: 1; transform: translateY(0)    scale(1); }
    /* Recule quand Gmail passe devant : la profondeur dit ou est le
       focus, sans avoir a assombrir la scene. */
    36%, 92%    { opacity: 0.4; transform: translateY(0)  scale(0.975); }
    97%, 100%   { opacity: 0;   transform: translateY(0)  scale(0.975); }
}

@keyframes pjInput {
    0%, 6%    { border-color: rgba(17,17,17,0.14); }
    9%, 18%   { border-color: rgba(17,17,17,0.45); }
    21%, 100% { border-color: rgba(17,17,17,0.14); }
}

@keyframes pjType {
    0%, 7%    { width: 0; }
    16%, 100% { width: calc(9ch + 0.81em); }
}
@keyframes pjCaretShow {
    0%, 6%    { opacity: 0; }
    7%, 17%   { opacity: 1; }
    18%, 100% { opacity: 0; }
}
@keyframes pjCaretBlink {
    0%, 49%   { opacity: 1; }
    50%, 100% { opacity: 0; }
}

@keyframes pjPress {
    0%, 18%   { transform: scale(1); }
    19.5%     { transform: scale(0.97); }
    21%, 100% { transform: scale(1); }
}

@keyframes pjNotif {
    0%, 21%     { opacity: 0; transform: translateX(120%) scale(0.98); }
    25%, 28.5%  { opacity: 1; transform: translateX(0)    scale(1); }
    29.5%       { opacity: 1; transform: translateX(0)    scale(0.97); }
    33%, 100%   { opacity: 0; transform: translateX(0)    scale(1.02); }
}
@keyframes pjDot {
    0%        { box-shadow: 0 0 0 0   rgba(255, 204, 0, 0.55); }
    70%, 100% { box-shadow: 0 0 0 8px rgba(255, 204, 0, 0); }
}

@keyframes pjGmail {
    0%, 30%     { opacity: 0; transform: scale(0.90) translateY(-8px); }
    36%, 58%    { opacity: 1; transform: scale(1)    translateY(0); }
    62%, 100%   { opacity: 0; transform: scale(0.97) translateY(-4px); }
}

@keyframes pjLigne {
    0%, 37%     { opacity: 0; transform: translateY(4px); }
    42%, 100%   { opacity: 1; transform: translateY(0); }
}

/* La piece jointe s'efface pour laisser la place a la confirmation :
   c'est le meme emplacement qui change d'etat, pas deux blocs qui
   s'empilent. */
@keyframes pjPiece {
    0%, 43%     { opacity: 0; transform: translateY(6px) scale(0.97); }
    47%, 51%    { opacity: 1; transform: translateY(0)   scale(1); }
    54%, 100%   { opacity: 0; transform: translateY(0)   scale(1); }
}

@keyframes pjPaid {
    0%, 53%     { opacity: 0; transform: translateY(6px); }
    56%, 58%    { opacity: 1; transform: translateY(0); }
    61%, 100%   { opacity: 0; transform: translateY(0); }
}
@keyframes pjCheck {
    0%, 54%     { stroke-dashoffset: 22; }
    58%, 100%   { stroke-dashoffset: 0; }
}

@keyframes pjEngine {
    0%, 63%     { opacity: 0; transform: translateY(18px) scale(0.96); }
    67%, 71%    { opacity: 1; transform: translateY(0)    scale(1); }
    75%, 100%   { opacity: 0; transform: translateY(-8px) scale(0.98); }
}
@keyframes pjDeliver {
    0%, 66%     { transform: scaleX(0.06); }
    71%, 100%   { transform: scaleX(1); }
}

@keyframes pjReview {
    0%, 74%     { opacity: 0; transform: translateY(16px) scale(0.96); }
    78%, 96%    { opacity: 1; transform: translateY(0)    scale(1); }
    100%        { opacity: 0; transform: translateY(0)    scale(0.99); }
}
@keyframes pjZone {
    0%, 78%     { border-color: rgba(17,17,17,0.12); }
    80%, 87%    { border-color: rgba(17,17,17,0.45); }
    89%, 100%   { border-color: rgba(17,17,17,0.12); }
}
@keyframes pjEcrit {
    0%, 79%     { width: 0; }
    87%, 100%   { width: 100%; }
}
@keyframes pjAvisCaret {
    0%, 78%     { opacity: 0; }
    79%, 87%    { opacity: 1; }
    88%, 100%   { opacity: 0; }
}

@keyframes pjStar {
    0%, 87%     { opacity: 0; transform: scale(0.4) rotate(-16deg); }
    /* Le seul rebond de tout le site. Il est ici parce que mettre
       cinq etoiles est un geste joyeux. */
    89.5%       { opacity: 1; transform: scale(1.16) rotate(3deg); }
    91%, 97%    { opacity: 1; transform: scale(1)    rotate(0deg); }
    100%        { opacity: 0; transform: scale(1)    rotate(0deg); }
}
@keyframes pjMerci {
    0%, 92%     { opacity: 0; transform: translateY(4px); }
    94%, 97%    { opacity: 1; transform: translateY(0); }
    100%        { opacity: 0; transform: translateY(0); }
}

/* Trajet du curseur, en % de la scene (470px de haut).
   Coordonnees relevees sur le rendu reel, pas estimees :
   champ 32% · bouton 44% · notification 15% · "cliquer ici" 56%
   zone d'avis 42% · etoiles 52%                                  */
/* Positions MESUREES, pas estimees. La pointe de la fleche est le coin haut
   gauche du SVG, et la couche .pj-cursor fait la taille de la scene : un
   translate(X%, Y%) place donc la pointe a (X% de la largeur, Y% de la hauteur)
   de la scene. Chaque valeur ci-dessous est le centre de sa cible, releve en
   figeant l'animation a l'instant du clic (la cible est alors a sa place
   d'arrivee, pas a sa position de repos).
   Les anciennes valeurs rataient tout : 56 px a gauche du champ, 31 px a droite
   de la notification, et 91 px a droite du lien "cliquer ici". */
@keyframes pjCursor {
    0%, 4%      { opacity: 0; transform: translate(50%, 92%); }
    7%, 16%     { opacity: 1; transform: translate(50%, 34.5%); }   /* le champ */
    18.5%, 21%  { opacity: 1; transform: translate(50%, 46.4%); }   /* "Verifier" */
    24%, 26%    { opacity: 0; transform: translate(50%, 46.4%); }
    27.5%, 29%  { opacity: 1; transform: translate(74.4%, 18.3%); } /* la notification */
    29.5%       { opacity: 1; transform: translate(74.4%, 19.8%); } /* le clic */
    34%, 46%    { opacity: 1; transform: translate(25%, 50%); }     /* on lit le mail */
    49%, 52%    { opacity: 1; transform: translate(49.7%, 58.3%); } /* "cliquer ici" */
    56%, 74%    { opacity: 0; transform: translate(49.7%, 64%); }
    80%, 86%    { opacity: 1; transform: translate(50%, 42.4%); }   /* la zone d'avis */
    88.5%, 91%  { opacity: 1; transform: translate(50%, 57.6%); }   /* les etoiles */
    96%, 100%   { opacity: 0; transform: translate(50%, 92%); }
}


/* ================================================================
   MOUVEMENT REDUIT
   ================================================================
   On ne joue rien. On montre les deux images qui resument le mieux
   l'histoire — le mail avec son devis, et les cinq etoiles — et la
   liste numerotee a cote raconte deja la sequence en toutes lettres.
   Mouvement reduit veut dire moins et plus doux, pas "contenu retire".
   ================================================================ */

@media (prefers-reduced-motion: reduce) {
    .pj-stage * { animation: none !important; }

    .pj-site   { opacity: 1; transform: none; }
    .pj-plate  { width: auto; }
    .pj-caret,
    .pj-avis-caret,
    .pj-notif,
    .pj-engine,
    .pj-paid,
    .pj-cursor { display: none; }

    .pj-gmail  { opacity: 1; transform: none; top: 150px; }
    .pj-mail-corps p,
    .pj-piece  { opacity: 1; transform: none; }
    .pj-avis-texte { width: auto; white-space: normal; }

    .pj-review { opacity: 1; transform: none; position: static;
                 width: auto; margin: 14px 5% 0; }
    .pj-stars i, .pj-merci { opacity: 1; transform: none; }
}

@media (prefers-reduced-transparency: reduce) {
    .pj-notif { background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; }
}


/* ================================================================
   MOBILE
   ================================================================ */

@media (max-width: 720px) {
    .pj-stage  { height: 420px; }
    .pj-site   { left: 3%; right: 3%; top: 26px; }
    .pj-notif  { left: 12px; right: 12px; width: auto; top: 14px; }
    .pj-gmail  { top: 36px; width: 92%; margin-left: -46%; }
    .pj-engine { top: 108px; }
    .pj-review { top: 100px; }
    .pj-cursor { display: none; }   /* il n'y a pas de curseur au doigt */
}