/* ============================================================================
   MICRO-EFFETS (2026-10-13), pilotés par js/effets.js. Chargé APRÈS responsive.css.
   Règles : transform, opacity et le flou d'apparition (plus une découpe sur la bascule
   et la jauge du score), courbe ressort de DESIGN.md (--ressort, base.css), aucune
   nouvelle couleur. html.fx est posé par le script : sans JS, rien ne s'applique et
   tout reste à l'état final.
   ========================================================================== */
@property --pct { syntax: '<number>'; inherits: false; initial-value: 0; }

:root { --fx-courbe: var(--ressort); }

/* Texte lu par les lecteurs d'écran pendant qu'un montant défile (valeur finale). */
.fx-sr {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* 1. Apparition au défilement : blocs situés sous la ligne de flottaison initiale
      (24 px, flou de 8 px, 900 ms). */
@keyframes fx-monte { from { opacity: 0; transform: translateY(24px); filter: blur(8px); } }
html.fx .fx-attente { opacity: 0; transform: translateY(24px); filter: blur(8px); }
html.fx .fx-entre { animation: fx-monte 900ms var(--fx-courbe) backwards; }

/* 2. Ticket de calcul : lignes l'une après l'autre (100 ms de décalage), le total en dernier. */
@keyframes fx-ligne { from { opacity: 0; transform: translateX(-12px); } }
html.fx .fx-echelon-attente > .calc-row { opacity: 0; }
html.fx .fx-echelon > .calc-row {
    animation: fx-ligne 700ms var(--fx-courbe) backwards;
    animation-delay: calc(var(--fx-i, 0) * 100ms);
}

/* 3. Jauge du verdict : anneau et segments se remplissent depuis zéro (1,4 s, comme les barres). */
@keyframes fx-anneau { from { --pct: 0; } }
html.fx .score-ring { animation: fx-anneau 1400ms var(--fx-courbe) backwards; }
@keyframes fx-segment { from { transform: scaleX(0); } }
html.fx .db-cell .gauge-seg i.on { transform-origin: left center; animation: fx-segment 700ms var(--fx-courbe) backwards; }
html.fx .db-cell .gauge-seg i.on:nth-child(2) { animation-delay: 100ms; }
html.fx .db-cell .gauge-seg i.on:nth-child(3) { animation-delay: 200ms; }
html.fx .db-cell .gauge-seg i.on:nth-child(4) { animation-delay: 300ms; }
html.fx .db-cell .gauge-seg i.on:nth-child(5) { animation-delay: 400ms; }

/* 4. Squelettes : pulsation d'opacité de .5 à .8 (DESIGN.md), même rayon que la carte finale. */
@keyframes fx-pulsation { from { opacity: .5; } to { opacity: .8; } }
.fx-sq {
    height: 12px; border-radius: var(--radius-pill); margin-bottom: 10px;
    background: rgba(255, 255, 255, .08);
    animation: fx-pulsation 1.4s var(--fx-courbe) infinite alternate;
}
.car-card.fx-squelette { cursor: default; pointer-events: none; }
/* Hauteurs de chaque zone : components.css (« .car-card.fx-squelette »), relevées sur les
   cartes du système de verre ; ici seulement la mise en colonne des zones. */
.fx-z { display: flex; flex-direction: column; justify-content: space-evenly; }
.fx-z .fx-sq { margin: 0; }
.fx-sq-verdict { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.fx-sq-anneau { width: 76px; height: 76px; border-radius: 50%; margin: 0; flex: none; }
.fx-sq-col { flex: 1; }

/* 5. Survol, sur les appareils qui en ont un : la carte monte de 3 px en 700 ms. */
@media (hover: hover) {
    .car-card, .gemv-card, .pricing-card {
        transition: transform 700ms var(--fx-courbe), border-color 300ms var(--fx-courbe),
                    background-color 300ms var(--fx-courbe), box-shadow 700ms var(--fx-courbe), opacity 300ms var(--fx-courbe);
    }
    .car-card:hover, .gemv-card:hover, .pricing-card:hover { transform: translateY(-3px); }
    .car-card:hover, .gemv-card:hover, .pricing-card:not(.featured):hover { border-color: var(--border-strong); }
    /* Photo : zoom à 1,03 dans son cadre. La carte de résultat n'a pas de cadre propre
       à la photo : ancrée en bas, l'image ne déborde que vers le haut et les côtés,
       que la carte (overflow: hidden) découpe. */
    .car-card-img, .gemv-photo img { transition: transform 700ms var(--fx-courbe); }
    .car-card-img { transform-origin: 50% 100%; }
    .car-card:hover .car-card-img, .gemv-card:hover .gemv-photo img { transform: scale(1.03); }
}
/* Boutons : transitions et appui portés par base.css (300 ms, ressort, scale(.98)).
   6. En-tête : l'îlot se fonce au défilement (html.entete-defile, base.css) ; l'ancienne
      ombre sous la barre collante n'a plus d'objet. */

/* 7. Indicateur qui glisse : bascule mensuel ou annuel de /tarifs. La navigation n'a
      plus de trait glissant : l'entrée active de l'îlot est une pilule (base.css). */
.fx-indic-hote { position: relative; }
.fx-bascule-indic {
    position: absolute; inset: 0; background: var(--text-1); pointer-events: none;
    transition: clip-path 500ms var(--fx-courbe), opacity 300ms var(--fx-courbe);
}
.fx-sans-transition { transition: none !important; }
/* Le bouton actif laisse voir la pilule qui glisse dessous ; texte au-dessus d'elle. */
.pricing-toggle.fx-indic-hote .pricing-period { position: relative; z-index: 1; }
.pricing-toggle.fx-indic-hote .pricing-period.active { background: transparent; }

/* 8. Notifications : entrée par le bas en ressort, dans base.css (toast-entree). */

/* Mouvement réduit : tout à l'état final, sans délai. Impression : rien de masqué. */
@media (prefers-reduced-motion: reduce) {
    html.fx .fx-entre, html.fx .fx-echelon > .calc-row, html.fx .score-ring,
    html.fx .db-cell .gauge-seg i.on, .fx-sq { animation: none !important; }
    html.fx .fx-attente, html.fx .fx-echelon-attente > .calc-row { opacity: 1; transform: none; filter: none; }
    .fx-bascule-indic { transition: none; }
    .car-card:hover, .gemv-card:hover, .pricing-card:hover,
    .car-card:hover .car-card-img, .gemv-card:hover .gemv-photo img { transform: none; }
}
@media print {
    html.fx .fx-attente, html.fx .fx-echelon-attente > .calc-row { opacity: 1 !important; transform: none !important; filter: none !important; }
    .fx-bascule-indic { display: none; }
}