/* * Vitrine jokkomat.io — ce que la vitrine ajoute à l'accueil capturé : le bandeau d'ouverture, * la fenêtre « Ouverture prochaine » et le mouvement. * * Règle d'or : l'état par défaut est **visible**. Tout ce qui masque avant d'apparaître est * préfixé `.jv-anime`, classe que `vitrine.js` pose sur seulement si le navigateur sait * l'animer et si le visiteur n'a pas demandé moins de mouvement. Sans JavaScript, la page est * entière et immobile. Uniquement `transform` et `opacity` ; aucune ombre, aucun flou. * * Feuille hors couche (`@layer`) : elle l'emporte sur les classes `jk-*` de l'application, qui * vivent dans `@layer components`. */ /* — Bandeau d'ouverture ———————————————————————————————————————————————— */ .jv-bandeau { position: relative; background: #1d2b4f; color: #fff; padding: 10px 16px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 20px; text-align: center; } .jv-bandeau p { margin: 0; font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 8px; } .jv-bandeau p b { color: #f0731e; font-weight: 700; } /* Le point « en direct » : il pulse, le compte tourne. */ .jv-direct { position: relative; width: 8px; height: 8px; border-radius: 999px; background: #f0731e; flex-shrink: 0; } .jv-anime .jv-direct::after { content: ""; position: absolute; inset: 0; border-radius: 999px; background: #f0731e; animation: jv-onde 2s cubic-bezier(0, 0, 0.2, 1) infinite; } @keyframes jv-onde { from { transform: scale(1); opacity: 0.7; } to { transform: scale(3); opacity: 0; } } .jv-horloge { display: flex; gap: 6px; align-items: flex-start; } .jv-horloge > div { display: flex; flex-direction: column; align-items: center; min-width: 46px; } .jv-horloge strong { display: block; overflow: hidden; height: 24px; font-family: var(--font-condensed, "Barlow Condensed"), "Arial Narrow", sans-serif; font-weight: 800; font-size: 24px; line-height: 1; font-variant-numeric: tabular-nums; } .jv-horloge strong span { display: block; } .jv-horloge > div > span { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: #b8c0d4; margin-top: 3px; } .jv-horloge i { font-style: normal; font-weight: 800; font-size: 20px; line-height: 1; color: #f0731e; } /* Le chiffre qui change arrive par le bas. */ .jv-anime .jv-tic { animation: jv-tic 0.38s cubic-bezier(0.22, 1, 0.36, 1); } @keyframes jv-tic { from { transform: translateY(70%); opacity: 0; } to { transform: none; opacity: 1; } } /* — Progression de lecture ——————————————————————————————————————————————— */ .jv-progression { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 40; background: #f0731e; transform: scaleX(0); transform-origin: left; pointer-events: none; } /* — Fenêtre « Ouverture prochaine » ——————————————————————————————————————— */ .jv-fenetre { border: 1px solid #e6e2da; border-radius: 14px; padding: 28px 24px; max-width: 420px; width: calc(100% - 32px); color: #1b2337; text-align: center; } .jv-fenetre::backdrop { background: rgba(27, 35, 55, 0.55); } .jv-fenetre h2 { margin: 0 0 8px; font-family: var(--font-condensed, "Barlow Condensed"), "Arial Narrow", sans-serif; font-weight: 800; font-style: italic; font-size: 28px; color: #1d2b4f; } .jv-fenetre p { margin: 0 0 18px; font-size: 15px; line-height: 1.5; color: #5b6478; } .jv-fenetre .jv-horloge { justify-content: center; background: #1d2b4f; color: #fff; border-radius: 12px; padding: 14px 8px; margin-bottom: 18px; } .jv-fenetre button { min-height: 48px; padding: 0 28px; border: 0; border-radius: 12px; background: #f0731e; color: #fff; font: inherit; font-weight: 700; font-size: 15px; cursor: pointer; } .jv-fenetre button:focus-visible { outline: 2px solid #1d2b4f; outline-offset: 2px; } .jv-anime .jv-fenetre[open] { animation: jv-fenetre-entre 0.32s cubic-bezier(0.22, 1, 0.36, 1); } .jv-anime .jv-fenetre[open]::backdrop { animation: jv-fondu 0.32s ease; } .jv-anime .jv-fenetre.jv-ferme { animation: jv-fenetre-sort 0.2s ease-in forwards; } .jv-anime .jv-fenetre.jv-ferme::backdrop { animation: jv-fondu 0.2s ease-in reverse forwards; } @keyframes jv-fenetre-entre { from { opacity: 0; transform: translateY(12px) scale(0.96); } to { opacity: 1; transform: none; } } @keyframes jv-fenetre-sort { to { opacity: 0; transform: translateY(8px) scale(0.97); } } @keyframes jv-fondu { from { opacity: 0; } to { opacity: 1; } } /* — Apparitions au défilement, tous navigateurs ——————————————————————————— */ /* La chronologie `view()` de l'application ne tourne ni sous Safari ni sous Firefox : on la remplace par une classe posée à l'entrée dans l'écran. */ .jv-anime .jk-apparait { animation: none !important; opacity: 0; transform: translateY(26px); transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); transition-delay: var(--jv-retard, 0ms); } .jv-anime .jk-apparait.jv-vu { opacity: 1; transform: none; } /* — Le rail du modèle suit la lecture ——————————————————————————————————————— */ .jv-anime .jk-remplit { animation: none !important; transform: scaleY(0); transform-origin: top; will-change: transform; } .jv-pastille { transition: background-color 0.35s ease, border-color 0.35s ease, color 0.35s ease; } .jv-pastille.jv-atteinte { background-color: #f0731e !important; border-color: #f0731e !important; color: #fff !important; animation: jv-pop 0.4s cubic-bezier(0.34, 1.4, 0.64, 1); } @keyframes jv-pop { 50% { transform: scale(1.14); } } /* — Carte des zones —————————————————————————————————————————————————————— */ .jv-anime .jk-teinte { animation: none !important; opacity: 0.1; transition: opacity 0.6s ease; transition-delay: var(--jv-retard, 0ms); } .jv-anime .jv-vu .jk-teinte { opacity: 1; } .jv-carte path { cursor: pointer; } .jv-carte.jv-carte-active path.jk-teinte { opacity: 0.22; transition-delay: 0ms; } .jv-carte.jv-carte-active path.jk-teinte.jv-zone-active { opacity: 1; } .jv-zone { cursor: pointer; transition: border-color 0.2s ease, background-color 0.2s ease; } /* Une fiche de zone apparaît aussi au défilement : les deux transitions doivent coexister. */ .jv-anime .jk-apparait.jv-zone { transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.2s ease, background-color 0.2s ease; } .jv-zone.jv-zone-active { border-color: #1d2b4f; background-color: #faf8f5; } /* — La scène du héros, vivante ———————————————————————————————————————————— */ /* Des paquets lumineux descendent les faisceaux : besoin → fournisseurs → Jokkomat → propositions. `pathLength=100` sur chaque tracé : un tiret de 24, un vide de 200, jamais deux paquets à la fois. */ .jv-flux { stroke: #fff; stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 24 200; stroke-dashoffset: 24; opacity: 0; } .jv-scene-vivante .jv-flux { animation: jv-flux 4.2s cubic-bezier(0.45, 0, 0.55, 1) var(--jv-d, 0ms) infinite; } @keyframes jv-flux { 0% { stroke-dashoffset: 24; opacity: 0; } 3% { opacity: 1; } 24% { stroke-dashoffset: -100; opacity: 1; } 25%, 100% { stroke-dashoffset: -100; opacity: 0; } } /* Les coches répondent quand le paquet arrive sur leur tuile. */ .jv-scene-vivante .jv-coche { animation: jv-coche 4.2s ease-in-out var(--jv-d, 0ms) infinite !important; } @keyframes jv-coche { 0%, 22%, 36%, 100% { transform: scale(1); } 28% { transform: scale(1.35); } } /* « Jokkomat compare » s'allume quand les six réponses arrivent. */ .jv-scene-vivante .jv-compare { animation: jv-compare 4.2s ease-in-out var(--jv-d, 0ms) infinite; } @keyframes jv-compare { 0%, 48%, 66%, 100% { transform: scale(1); } 56% { transform: scale(1.08); } } /* La Proposition 1 respire quand les trois propositions tombent. */ .jv-scene-vivante .jk-cerne { animation: jv-respire 4.2s ease-in-out var(--jv-d, 0ms) infinite !important; } @keyframes jv-respire { 0%, 78%, 100% { opacity: 1; transform: scale(1); } 86% { opacity: 0.55; transform: scale(1.04); } } .jv-pause .jv-flux, .jv-pause .jv-coche, .jv-pause .jv-compare, .jv-pause .jk-cerne { animation-play-state: paused !important; } /* — Appels à l'action ———————————————————————————————————————————————————— */ .jv-reflet { position: relative; overflow: hidden; } .jv-reflet::after { content: ""; position: absolute; inset: 0; background: linear-gradient( 105deg, transparent 30%, rgba(255, 255, 255, 0.38) 50%, transparent 70% ); transform: translateX(-120%); pointer-events: none; } .jv-anime .jv-reflet.jv-brille::after { animation: jv-reflet 1.1s cubic-bezier(0.4, 0, 0.2, 1); } @keyframes jv-reflet { to { transform: translateX(120%); } } /* Un appui se sent : le bouton cède un peu sous le doigt. */ .jv-anime a.rounded-bouton, .jv-anime .jv-fenetre button { transition: transform 0.15s ease, background-color 0.15s ease, color 0.15s ease; } .jv-anime a.rounded-bouton:active, .jv-anime .jv-fenetre button:active { transform: scale(0.97); }