/* =============================================================================
   DÉMONSTRATION ANIMÉE DU PRODUIT
   =============================================================================
   Un lecteur qui joue quatre étapes en boucle : la saisie, les nombres,
   l'analyse qui s'écrit, le document composé.

   Tout est en CSS et en texte — pas une image, pas une vidéo. Un GIF du même
   contenu pèserait plusieurs mégaoctets, arriverait flou sur un écran dense
   et ne se traduirait pas. Ici la démonstration est nette à toute résolution,
   traduite par le dictionnaire du site, et lue par les moteurs de recherche.

   La hauteur du cadre est fixe : sans cela, chaque changement d'étape ferait
   sauter toute la page sous les yeux du visiteur.
   ========================================================================== */

.demo-produit {
    max-width: 780px;
    margin: 0 auto 3rem;
    padding: 0 1rem;
}

.demo-cadre {
    position: relative;
    /* Hauteur FIXE, et non minimale. En minimale, l'étape 3 — la plus longue —
       poussait le cadre de soixante pixels, et la barre de commande sautait
       sous le curseur au moment précis où l'on veut cliquer dessus. */
    height: 420px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1.8rem 1.6rem;
    background: var(--glass-cosmic, rgba(255, 255, 255, 0.05));
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    overflow: hidden;
}

/* Un liseré doré en haut du cadre : il signale un bloc de démonstration sans
   avoir à écrire « démonstration » dessus. */
.demo-cadre::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--cosmic-gold, #D8A441), transparent);
}

.demo-legende {
    margin: 0 0 1.2rem;
    text-align: center;
    font-size: 0.92rem;
    color: var(--cosmic-silver, #98A0C4);
}

/* --- Apparition commune ---------------------------------------------------
   Chaque élément porte son propre retard, posé en JavaScript. Le décalage
   est ce qui fait lire l'étape comme une action qui se déroule, plutôt que
   comme une image qui s'allume d'un coup. */

@keyframes demo-apparait {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

.demo-champ,
.demo-vignette,
.demo-case,
.demo-ligne {
    opacity: 0;
    animation: demo-apparait 0.5s ease forwards;
    animation-delay: var(--retard, 0ms);
}

/* Les feuilles ont leur propre apparition, qui ne touche pas au « transform ».
   Elles partageaient celle des autres — laquelle se termine sur
   « transform: none » et écrasait donc l'éventail : les trois pages
   finissaient exactement l'une sur l'autre, et on n'en voyait qu'une. */
.demo-feuille {
    opacity: 0;
    animation: demo-feuille-apparait 0.5s ease forwards;
    animation-delay: var(--retard, 0ms);
}

@keyframes demo-feuille-apparait {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* En pause, tout ce qui est apparu le reste : figer à l'état initial
   effacerait l'étape qu'on voulait justement regarder. */
.demo-produit.en-pause .demo-champ,
.demo-produit.en-pause .demo-vignette,
.demo-produit.en-pause .demo-case,
.demo-produit.en-pause .demo-ligne,
.demo-produit.en-pause .demo-feuille {
    animation-play-state: paused;
    opacity: 1;
}

/* --- Étape 1 : la saisie -------------------------------------------------- */

.demo-formulaire {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    max-width: 380px;
    margin: 0 auto;
    width: 100%;
}

.demo-champ {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: 0.6rem 0.9rem;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
}

.demo-champ-libelle {
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--cosmic-silver, #98A0C4);
}

.demo-champ-valeur {
    font-size: 1rem;
    color: var(--cosmic-white, #EEF0F8);
}

/* Le curseur qui clignote au bout du dernier champ : c'est le seul détail
   qui dit « quelqu'un est en train de taper » sans l'écrire. */
.demo-champ:last-of-type .demo-champ-valeur::after {
    content: '';
    display: inline-block;
    width: 1px;
    height: 1em;
    margin-left: 2px;
    background: var(--cosmic-gold, #D8A441);
    vertical-align: -0.15em;
    animation: demo-curseur 1s steps(2) infinite;
}

@keyframes demo-curseur { to { opacity: 0; } }

.demo-bouton {
    margin-top: 0.4rem;
    padding: 0.7rem 1rem;
    text-align: center;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(111, 109, 234, 0.9), rgba(216, 164, 65, 0.85));
    color: #fff;
    font-weight: 600;
    font-size: 0.95rem;
    animation: demo-pression 1.6s ease-in-out 2.2s infinite;
}

@keyframes demo-pression {
    0%, 70%, 100% { transform: none; }
    80%           { transform: scale(0.96); }
}

/* --- Étape 2 : les nombres ------------------------------------------------ */

.demo-nombres {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.7rem;
    margin-bottom: 1.4rem;
}

.demo-vignette {
    text-align: center;
    padding: 0.9rem 0.5rem;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
}

.demo-vignette-valeur {
    display: block;
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1;
    color: var(--cosmic-gold, #D8A441);
}

.demo-vignette-libelle {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--cosmic-silver, #98A0C4);
}

.demo-inclusion { text-align: center; }

.demo-inclusion-titre {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--cosmic-silver, #98A0C4);
}

.demo-grille {
    display: inline-grid;
    grid-template-columns: repeat(3, 38px);
    gap: 4px;
}

.demo-case {
    display: grid;
    place-items: center;
    height: 38px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.07);
    font-size: 0.95rem;
    color: var(--cosmic-white, #EEF0F8);
}

/* Un chiffre absent est le cœur de l'analyse : il doit se voir d'un coup
   d'œil, comme sur la vraie table. */
.demo-case.manquant {
    background: rgba(216, 164, 65, 0.16);
    border: 1px solid rgba(216, 164, 65, 0.5);
    color: var(--cosmic-gold, #D8A441);
    font-weight: 700;
}

/* --- Étape 3 : le rapport qui s'écrit ------------------------------------- */

.demo-page {
    max-width: 520px;
    margin: 0 auto;
    padding: 1.1rem 1.3rem;
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    text-align: left;
}

.demo-ligne { margin: 0 0 0.5rem; line-height: 1.5; }
.demo-ligne:last-child { margin-bottom: 0; }

.demo-ligne-titre {
    font-family: var(--font-display, Georgia, serif);
    font-size: 1.05rem;
    color: var(--cosmic-gold, #D8A441);
}

.demo-ligne-sous {
    margin-top: 0.8rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--cosmic-white, #EEF0F8);
}

.demo-ligne-texte {
    font-size: 0.85rem;
    color: var(--cosmic-silver, #98A0C4);
}

/* --- Étape 4 : le document ------------------------------------------------ */

.demo-pile {
    position: relative;
    height: 130px;
    margin-bottom: 1.4rem;
}

.demo-feuille {
    position: absolute;
    left: 50%;
    top: 0;
    width: 96px;
    height: 124px;
    background: linear-gradient(180deg, #FDFCF8, #E9E6DC);
    border-radius: 4px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
    transform: translateX(calc(-50% + (var(--rang) - 1) * 34px))
               rotate(calc((var(--rang) - 1) * 5deg));
}

/* Des traits gris qui suggèrent du texte : une page blanche ne se lit pas
   comme un document. */
.demo-feuille::after {
    content: '';
    position: absolute;
    inset: 16px 12px auto;
    height: 74px;
    background: repeating-linear-gradient(
        180deg, #B9B4A6 0 2px, transparent 2px 9px);
    opacity: 0.75;
}

.demo-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.7rem;
}

.demo-lien {
    padding: 0.6rem 1.2rem;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 8px;
    color: var(--cosmic-white, #EEF0F8);
    font: inherit;
    font-size: 0.9rem;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}

.demo-lien:hover { border-color: var(--cosmic-gold, #D8A441); }

.demo-lien.principal {
    background: linear-gradient(135deg, rgba(111, 109, 234, 0.9), rgba(216, 164, 65, 0.85));
    border-color: transparent;
    font-weight: 600;
}

/* --- La barre de commande ------------------------------------------------- */

.demo-barre {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-top: 0.8rem;
}

/* Le symbole est DESSINÉ, pas écrit. « ⏸ » et « ▶ » sont des caractères que
   toutes les polices ne portent pas : là où ils manquent, le navigateur
   affiche un rectangle vide — c'est ce qu'on a vu au premier rendu. Deux
   barres et un triangle en CSS ne dépendent de rien. */
.demo-lecture {
    position: relative;
    flex: none;
    width: 34px;
    height: 34px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 50%;
    font-size: 0;
    cursor: pointer;
}

/* Pause : deux barres. */
.demo-lecture::before,
.demo-lecture::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 3px;
    height: 11px;
    background: var(--cosmic-white, #EEF0F8);
    transform: translateY(-50%);
}
.demo-lecture::before { left: 12px; }
.demo-lecture::after  { right: 12px; }

/* Lecture : un triangle. La barre de gauche disparaît, celle de droite
   devient la pointe. */
.demo-produit.en-pause .demo-lecture::before { opacity: 0; }
.demo-produit.en-pause .demo-lecture::after {
    right: 10px;
    width: 0;
    height: 0;
    background: none;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 10px solid var(--cosmic-white, #EEF0F8);
}

.demo-puces {
    display: flex;
    flex: 1;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.demo-puces li { flex: 1; }

/* Le libellé de l'étape sert de piste de progression : le texte EST la
   barre, plutôt qu'un trait muet sous une légende. */
.demo-puce {
    width: 100%;
    padding: 0.35rem 0.2rem 0.5rem;
    background: none;
    border: none;
    border-bottom: 2px solid rgba(255, 255, 255, 0.14);
    color: var(--cosmic-silver, #98A0C4);
    font: inherit;
    font-size: 0.72rem;
    letter-spacing: 0.03em;
    cursor: pointer;
    transition: color 0.25s, border-color 0.25s;
}

.demo-puce.active {
    color: var(--cosmic-gold, #D8A441);
    border-bottom-color: var(--cosmic-gold, #D8A441);
}

.demo-lecture:focus-visible,
.demo-puce:focus-visible,
.demo-lien:focus-visible {
    outline: 2px solid var(--cosmic-gold, #D8A441);
    outline-offset: 2px;
}

.visuellement-cache {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* En petite largeur, les quatre vignettes passent sur deux rangées et
   l'étape 2 dépassait du cadre : « Chemin de vie », la première et la plus
   importante, se retrouvait coupée en haut par le « overflow: hidden ». Les
   vignettes sont donc resserrées ici plutôt que le cadre indéfiniment
   agrandi — une démonstration qui occupe tout l'écran d'un téléphone
   n'invite plus à faire défiler la page. */
@media (max-width: 560px) {
    .demo-cadre { height: 500px; padding: 1.4rem 1rem; }
    .demo-puce { font-size: 0.65rem; }

    .demo-nombres { grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
    .demo-vignette { padding: 0.55rem 0.4rem; }
    .demo-vignette-valeur { font-size: 1.45rem; }
    .demo-vignette-libelle { font-size: 0.62rem; margin-top: 0.2rem; }

    .demo-grille { grid-template-columns: repeat(3, 34px); }
    .demo-case { height: 34px; }
    .demo-legende { margin-bottom: 0.9rem; font-size: 0.86rem; }
    .demo-page { padding: 0.9rem 1rem; }
    .demo-ligne-texte { font-size: 0.8rem; }
}

/* Réglage système : on ne discute pas ce choix, parfois posé pour des
   troubles vestibulaires où une animation provoque un malaise réel. Le
   lecteur s'immobilise alors sur la dernière étape, celle qui porte le
   message et les deux boutons. */
@media (prefers-reduced-motion: reduce) {
    .demo-champ,
    .demo-vignette,
    .demo-case,
    .demo-ligne,
    .demo-feuille,
    .demo-bouton,
    .demo-champ:last-of-type .demo-champ-valeur::after {
        animation: none;
        opacity: 1;
    }
}