/* Dernier appel — le noir à motif, VALIDÉ par Theo le 18/09 (« version actuelle mais avec un pattern derrière comme avec terre brûlée », puis « je valide, fige et retire le reste »).
   html[data-finv="motif"] est posé par le script. La composition est celle du traitement « bloc » de la page, inchangée : le titre à gauche, le texte et le bouton à droite, sur noir.
   Derrière, les petites pièces du logo (/patterns.js, preset « brule », palette de pièces « temo-sombre », graine 23 : bruns sombres, olive, quelques accents clairs, les tons du panneau
   des témoignages) courent d'un bord à l'autre de l'écran, atténuées sous le titre et franches à droite. Le calque est le .panneau déjà présent dans le HTML, étiré bord à bord ;
   le script y dessine le motif et le redessine au redimensionnement. Le pied de page ne change pas.
   Essayés le même jour et retirés (l'historique git les garde) : le noir uni, l'aplat terre brûlée, le miroir du hero avec sa bande de mosaïque vivante, le bouton géant en cellule. */
html[data-finv="motif"] .fin { overflow-x: clip; }
html[data-finv="motif"] .fin .appel { position: relative; }
html[data-finv="motif"] .fin .appel > :not(.panneau) { position: relative; z-index: 1; }
html[data-finv="motif"] .fin .panneau { display: block !important; position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw; margin-left: -50vw; z-index: 0; aspect-ratio: auto; border-radius: 0; background: none; overflow: hidden; pointer-events: none; }
html[data-finv="motif"] .fin .panneau canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; -webkit-mask-image: linear-gradient(100deg, rgba(0,0,0,0.12) 0, rgba(0,0,0,0.3) 45%, #000 85%); mask-image: linear-gradient(100deg, rgba(0,0,0,0.12) 0, rgba(0,0,0,0.3) 45%, #000 85%); }
/* Tablette et mobile : le texte occupe toute la largeur, le motif se fait plus léger */
@media (max-width: 1100px) { html[data-finv="motif"] .fin .panneau canvas { opacity: 0.55; } }