/*
 * WinetPay — « LE FIL », la scène du héros de l'accueil (choisie par le propriétaire le 2026-09-14).
 *
 * 🔑 **CE QU'ELLE RACONTE EST LE FONCTIONNEMENT RÉEL** : un client paie par Mobile Money, une impulsion
 * parcourt le fil, les ondes WiFi du disque central se résolvent en coche (le symbole de la marque),
 * « Accès ouvert » apparaît, puis l'impulsion atteint vos revenus. Voir le partiel pour le détail.
 *
 * 🔴 **MÊME TRAITEMENT QUE « L'ONDE »** (`scene-annonces.css`) : profondeur, lumière, mouvement
 * continu. Les neuf héros PLATS refusés pour les annonces ne doivent pas avoir de dixième.
 *
 * ⚠️ **UNE FEUILLE À PART**, chargée par le partiel lui-même : la page d'accueil ne porte que ce que
 * son héros demande, et `site.css` n'enfle pas pour un décor.
 *
 * ⚠️ Animations par `transform` et `opacity` uniquement — le contrat de performance mesuré sur les
 * écrans d'accès : cette page s'ouvre sur des téléphones d'entrée de gamme.
 */

/*
 * ═══ LE GARDE-FOU `[hidden]`, EN TÊTE DE FEUILLE ═══
 * `[hidden] { display: none }` est une règle du NAVIGATEUR, la plus faible qui soit : la moindre règle
 * de classe qui pose un `display:` la bat. Un test du projet vérifie ce garde-fou sur CHAQUE feuille.
 */
[hidden] { display: none !important; }


/* ═══════════════════ LA TOILE ═══════════════════ */
.ac-scene {
    position: relative;
    inline-size: 100%;
    max-inline-size: 100%;
    aspect-ratio: 11 / 9;
    overflow: hidden;
    border: 1px solid var(--c-border);
    border-radius: clamp(20px, 3vw, 28px);

    /*
     * 🔑 **UNE TOILE CLAIRE, TEINTÉE PAR LE THÈME.** Les deux lueurs viennent de la marque (primaire et
     * accent) : écrites en dur, elles auraient survécu à un changement de thème et menti sur les huit.
     */
    background:
        radial-gradient(55% 50% at 88% 8%, color-mix(in srgb, var(--c-accent) 20%, transparent), transparent 70%),
        radial-gradient(65% 55% at 6% 94%, color-mix(in srgb, var(--c-primary) 16%, transparent), transparent 70%),
        linear-gradient(160deg, color-mix(in srgb, var(--c-primary) 5%, var(--c-surface)), var(--c-surface));
    box-shadow: 0 30px 70px color-mix(in srgb, var(--c-neutral-900) 10%, transparent);
}

.ac-dessin {
    display: block;
    inline-size: 100%;
    block-size: 100%;
}

/* Le texte d'un SVG en ligne suit la police du document : la scène parle la même langue que le titre. */
.ac-dessin text { font-family: inherit; }


/* ═══════════════════ LES COULEURS ═══════════════════
   ⛔ Aucune couleur en dur (garde-fou du projet). Ce qui est CALCULÉ vit ici, et suit le thème. */

.ac-verre-teinte { stop-color: color-mix(in srgb, var(--c-primary) 5%, var(--c-surface-raised)); }
.ac-bord { stroke: var(--c-border); }
.ac-bord-disque { stroke: color-mix(in srgb, var(--c-primary) 16%, var(--c-surface-raised)); }
.ac-pastille { fill: var(--c-primary-50); }
.ac-poussiere { fill: var(--c-primary); }

.ac-t-titre { font-size: 12.5px; font-weight: 700; fill: var(--c-text); }
.ac-t-doux { font-size: 10.5px; fill: var(--c-text-muted); }
.ac-t-petit { font-size: 11px; font-weight: 500; fill: var(--c-text-muted); }
.ac-t-hausse { font-size: 18px; font-weight: 750; fill: var(--c-success); }
.ac-t-acces { font-size: 11px; font-weight: 650; fill: var(--c-text); }


/* ═══════════════════ LE MOUVEMENT ═══════════════════
   Un cycle de QUATRE secondes pour le récit (impulsion, coche, accès, revenus) ; les flottements ont
   chacun leur durée, pour que la scène ne batte jamais d'un seul bloc. */

@keyframes ac-flot { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes ac-flot-court { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

.ac-flot-1 { animation: ac-flot-court 7s ease-in-out infinite; }
.ac-flot-2 { animation: ac-flot 8s ease-in-out infinite; }
.ac-flot-3 { animation: ac-flot-court 6.5s ease-in-out infinite; }

.ac-etincelle { opacity: .15; animation: ac-etincelle 6s ease-in-out infinite; }
@keyframes ac-etincelle { 0%, 100% { opacity: .15; } 18% { opacity: .9; } 40% { opacity: .15; } }

/* Les ondes s'allument de l'intérieur vers l'extérieur quand l'impulsion arrive (30 % du cycle). */
.ac-arc { opacity: .22; animation: ac-arc 4s ease-in-out infinite; }
.ac-arc-2 { animation-delay: .1s; }
.ac-arc-3 { animation-delay: .2s; }
@keyframes ac-arc { 0%, 28% { opacity: .22; } 34% { opacity: 1; } 46% { opacity: 1; } 52%, 100% { opacity: .14; } }

/* ⚠️ `transform-box: view-box` : sans lui, l'origine se calcule dans la boîte du tracé et la coche
   grossirait depuis son propre coin au lieu du centre du disque. */
.ac-coche {
    transform-box: view-box;
    transform-origin: 222px 184px;
    opacity: 0;
    animation: ac-coche 4s cubic-bezier(.2, .8, .2, 1) infinite;
}
@keyframes ac-coche {
    0%, 46% { opacity: 0; transform: scale(.55); }
    54% { opacity: 1; transform: scale(1.08); }
    60% { transform: scale(1); }
    86% { opacity: 1; transform: scale(1); }
    96%, 100% { opacity: 0; transform: scale(1); }
}

.ac-anneau { opacity: 0; animation: ac-anneau 4s ease-out infinite; }
@keyframes ac-anneau { 0%, 50% { opacity: 0; } 56% { opacity: .9; } 80% { opacity: .9; } 92%, 100% { opacity: 0; } }

.ac-acces { opacity: 0; animation: ac-acces 4s ease-out infinite; }
@keyframes ac-acces {
    0%, 52% { opacity: 0; transform: translateY(6px); }
    60% { opacity: 1; transform: translateY(0); }
    88% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(0); }
}

/* Vos revenus s'allument à l'arrivée de l'impulsion (85 % du cycle). */
.ac-recu { opacity: 0; animation: ac-recu 4s ease-out infinite; }
@keyframes ac-recu { 0%, 82% { opacity: 0; } 88% { opacity: 1; } 100% { opacity: 0; } }

.ac-barre {
    transform-box: fill-box;
    transform-origin: 50% 100%;
    animation: ac-barre 4s ease-in-out infinite;
}
@keyframes ac-barre { 0%, 100% { transform: scaleY(.55); } 50% { transform: scaleY(1); } }


/* ═══════════════════ SUR TÉLÉPHONE ═══════════════════
   ⚠️ **CES SURCHARGES SONT *APRÈS* CE QU'ELLES SURCHARGENT** : à spécificité égale, une requête média
   ne donne aucun poids, c'est la dernière règle déclarée qui gagne.

   Au-dessous de 900 px le héros passe en une colonne et la scène monte AU-DESSUS du titre (`site.css`).
   Elle y prend un rapport plus large, pour laisser la promesse dans le premier écran. */
@media (max-width: 900px) {
    .ac-scene { aspect-ratio: 16 / 11; }
}

/*
 * 🔴 **LES ÉCRANS COURTS — c'est la HAUTEUR qui manque, pas la largeur** (leçon mesurée sur le héros des
 * annonces : un iPhone SE, 375 × 667, gardait la promesse sous la ligne de flottaison alors que des
 * écrans plus étroits allaient bien). On réduit donc la LARGEUR de la scène, qui garde son rapport :
 * un recadrage plus serré mordrait sur les cartes du dessin.
 */
@media (max-width: 900px) and (max-height: 700px) {
    .ac-scene { max-inline-size: 320px; margin-inline: auto; }
}

@media (max-width: 900px) and (max-height: 620px) {
    .ac-scene { max-inline-size: 260px; }
}


/* ⚠️ **LE MOUVEMENT EST UN AGRÉMENT.** Il ne porte aucune information que la scène ne montre déjà à
   l'arrêt — c'est ce qui permet de le couper sans rien perdre.

   🔴 **LES ÉLÉMENTS ANIMÉS DEPUIS `opacity: 0` DOIVENT ÊTRE RENDUS VISIBLES**, sans quoi couper
   l'animation les éteindrait pour toujours. On fige l'état RÉSOLU : la coche formée, l'anneau allumé,
   l'accès ouvert. L'impulsion est retirée — la couper en CSS ne suffit pas, sa trajectoire est en SMIL. */
@media (prefers-reduced-motion: reduce) {
    .ac-flot-1,
    .ac-flot-2,
    .ac-flot-3,
    .ac-etincelle,
    .ac-arc,
    .ac-coche,
    .ac-anneau,
    .ac-acces,
    .ac-recu,
    .ac-barre { animation: none; }

    .ac-pouls { display: none; }
    .ac-arc { opacity: .14; }
    .ac-coche,
    .ac-acces { opacity: 1; transform: none; }
    .ac-anneau { opacity: .9; }
    .ac-etincelle { opacity: .5; }
}

/* Décalages portés par des CLASSES (2026-09-16) : la CSP des pages publiques refuse les attributs
   style. Placés en FIN de feuille : le raccourci `animation:` plus haut remet le délai à zéro. */
.ac-d02 { animation-delay: .2s; }
.ac-d04 { animation-delay: .4s; }
.ac-d05 { animation-delay: .5s; }
.ac-d06 { animation-delay: .6s; }
.ac-d12 { animation-delay: 1.2s; }
.ac-d20 { animation-delay: 2s; }
.ac-d32 { animation-delay: 3.2s; }
.ac-d44 { animation-delay: 4.4s; }