/* ---------- LE FIL PASSE DERRIÈRE LA PAGE (js/trait.js) ----------
   EXTENSION de la charte (règles en tête de motion.css). Un seul fil
   d'encre de 2 px, piloté par le défilement : il entre par un bout du
   filet de chaque Entrée, le parcourt et ressort par l'autre ; entre
   deux, il passe derrière la page. Il trace l'ouverture du prix et
   tombe dans « Demander l'audit » : ces deux morceaux restent. Sans JS,
   en mouvement réduit, en couleurs forcées et à l'impression : pas de
   fil, la page d'aujourd'hui.
   Chemin CSS (animation-timeline: scroll(), animation-range) : Chrome
   et Edge 115+, Safari 26+, Firefox 159+ (sortie prévue fin octobre
   2026). Ailleurs (Firefox 158 et ESR, Safari 18 et avant) : repli
   requestAnimationFrame, même tracé. */
.tr-fil {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    pointer-events: none;
}

.tr-fil i {
    position: absolute;
    height: var(--epaisseur-trait);
    background: var(--encre);
    transform-origin: 0 0;
}

.tr-fil .tr-v { width: var(--epaisseur-trait); }  /* la descente dans le bouton */
.tr-fil .tr-g { transform-origin: 100% 0; }      /* part de la droite */
.tr-fil .tr-b { background: var(--sur-bande); }  /* sur la bande */

/* hauteur d'écran stable, barre d'adresse repliée ou non */
.tr-fil b {
    position: fixed;
    top: 0;
    height: 100vh;
    height: 100lvh;
    visibility: hidden;
}

/* l'anneau de focus du bouton reste entier */
:root:has(.cta-final .btn-primary:focus-visible) .tr-v {
    clip-path: inset(0 0 4px 0);
}

/* entre, parcourt, ressort ; les morceaux qui restent se tracent seulement */
@keyframes tr-passe   { from { transform: translateX(0) scaleX(0); } 50% { transform: translateX(0) scaleX(1); } to { transform: translateX(100%) scaleX(0); } }
@keyframes tr-passe-g { from { transform: translateX(0) scaleX(0); } 50% { transform: translateX(0) scaleX(1); } to { transform: translateX(-100%) scaleX(0); } }
@keyframes tr-x { from { transform: scaleX(0); } }
@keyframes tr-y { from { transform: scaleY(0); } }

/* pas de (forced-colors: none) ici : inconnu avant Safari 16, il ferait
   sauter tout le bloc ; en couleurs forcées, le fil est masqué plus bas */
@media screen and (prefers-reduced-motion: no-preference) {
    .tr-css .tr-fil i {
        animation: tr-passe 1ms linear both;
        animation-timeline: scroll(root);
    }

    .tr-css .tr-fil .tr-g { animation-name: tr-passe-g; }
    .tr-css .tr-fil .tr-reste { animation-name: tr-x; }
    .tr-css .tr-fil .tr-v { animation-name: tr-y; }

    /* le fil trace lui-même l'ouverture du prix */
    .tr-on .advantages .price-callout { border-top-color: transparent; }

    /* la carte du projet est déjà là quand le fil passe sur son filet */
    .tr-on .project-card {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* le fil n'a de sens qu'en mouvement ; posé en px pour l'écran, faux sur papier */
@media print, (prefers-reduced-motion: reduce), (forced-colors: active) {
    .tr-fil { display: none; }
}