/* Version classique (22/10/2026, Vincent : « pour les vieux ordinateurs ») : même page, sans animation ni effet coûteux.
   Activée par la classe html.classic (index.html : lien du pied de page, bouton « La page vous semble lente ? », ?classique=1).
   Reprend les règles « mouvement réduit » de site.css, kit.css et links, et coupe les flous (très lourds pour une vieille carte graphique). */
html.classic { scroll-behavior: auto; }
html.classic .rv { opacity: 1; transform: none; transition: none; }
html.classic .scene { height: auto; }
html.classic .stage { position: relative; height: auto; min-height: 100svh; }
html.classic *, html.classic *::before, html.classic *::after { transition-duration: .01s !important; transition-delay: 0s !important; animation-duration: .01s !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; }
html.classic * { will-change: auto !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
html.classic .nav { background: rgba(255,255,255,.97); }
html.classic .es { background: rgba(11,22,38,.7); }
html.classic .wk-slot.float { animation: none; }
html.classic .wl-mk { stroke-dashoffset: 0 !important; }
html.classic .wl-g.dash .wl-ln { animation: none; }
html.classic .wl-chip { display: none; }
html.classic .wl-g.flow .wl-pulse, html.classic .wl-g.flow .wl-halo { animation: none; opacity: 0; }
html.classic .wl-g.flow .wl-eh, html.classic .wl-g.flow .wl-ec { opacity: 0; }
html.classic .sbar, html.classic .shint { display: none !important; }
/* Lien de bascule en pied de page */
.foot__mode { margin-top: 14px !important; }
.foot__mode a { color: rgba(255,255,255,.75); font-size: 14px; text-decoration: underline; text-underline-offset: 3px; }
.foot__mode a:hover { color: #fff; }
/* Proposition quand la page rame */
.slow { position: fixed; z-index: 800; left: 50%; bottom: 20px; display: flex; align-items: center; gap: 12px; max-width: calc(100% - 32px); padding: 10px 10px 10px 18px;
  border-radius: 999px; background: var(--navy); color: #fff; font: 500 15px var(--ff-text); box-shadow: 0 12px 32px rgba(11,22,38,.3);
  transform: translate(-50%, 20px); opacity: 0; transition: transform .35s var(--ease), opacity .35s var(--ease); }
.slow.on { transform: translate(-50%, 0); opacity: 1; }
.slow p { margin: 0; white-space: nowrap; }
.slow__go { height: 38px; padding: 0 16px; border: 0; border-radius: 999px; background: #fff; color: var(--navy); font: 600 14px var(--ff-text); cursor: pointer; white-space: nowrap; }
.slow__x { width: 32px; height: 32px; border: 0; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; font-size: 18px; line-height: 1; cursor: pointer; }
@media (max-width: 599px) { .slow { left: 16px; right: 16px; transform: translateY(20px); flex-wrap: wrap; border-radius: 22px; padding: 14px 16px; } .slow.on { transform: none; } .slow p { flex: 1 1 100%; } .slow__go { flex: 1; } }
/* Aimant (Vincent 22/10) : souple (proximity), la page se cale sur une scène seulement si on s'arrête près d'elle */
html.classic { scroll-snap-type: y proximity; }
html.classic .stage.paged { scroll-snap-align: start; scroll-margin-top: calc(-1 * var(--nav-h)); } /* calée en haut de la fenêtre, sous le menu, comme dans la version animée */
/* Pagination : pilule flottante en bas de l'écran ; la scène (.cst) s'arrête au-dessus d'elle, pour qu'elle ne cache rien */
html.classic .stage.paged { --cpg: 76px; height: 100svh; min-height: 0; touch-action: pan-y; }
html.classic .cst { position: absolute; left: 0; right: 0; top: 0; height: calc(100svh - var(--cpg)); overflow: hidden; }
html.classic .caps-dots { display: none; } /* les points de la pilule les remplacent */
.cpg { position: fixed; z-index: 700; left: 50%; bottom: 14px; display: flex; align-items: center; gap: 12px; padding: 5px; border-radius: 999px;
  background: rgba(255,255,255,.96); box-shadow: 0 8px 26px rgba(11,22,38,.18), 0 1px 3px rgba(11,22,38,.08);
  opacity: 0; transform: translate(-50%, 10px); pointer-events: none; }
html.classic .cpg { transition: opacity .25s ease, transform .25s ease !important; }
.cpg.on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.cpg__a { width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--navy); cursor: pointer;
  box-shadow: 0 2px 8px rgba(11,22,38,.14), 0 0 0 1px rgba(11,22,38,.04); }
.cpg__a svg { width: 18px; height: 18px; }
.cpg__a:hover { box-shadow: 0 4px 12px rgba(11,22,38,.2), 0 0 0 1px rgba(11,22,38,.05); }
.cpg__a:disabled { opacity: .35; cursor: default; box-shadow: none; }
.cpg__a:focus-visible, .cpg__dots button:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.cpg__dots { position: relative; display: flex; align-items: center; gap: 8px; }
.cpg__ind { position: absolute; z-index: 1; top: 50%; height: 9px; margin-top: -4.5px; border-radius: 999px; background: var(--slate); pointer-events: none; }
.cpg__dots button { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 999px; background: rgba(90,123,165,.35); cursor: pointer; }
.cpg__dots button.on { width: 26px; background: transparent; }
@media (max-width: 599px) { html.classic .stage.paged { --cpg: 68px; } .cpg { bottom: 10px; } }
html.classic #creer .stage.paged:not(.st4) { background: #0B1626; } /* la nuit d'« En un geste » descend jusque sous la pilule */
/* Départ sur téléphone : le cadre est plus court (place de la pilule) ; sans le gros plan sur le Mac, titre et étiquettes ne se chevauchent plus */
@media (max-width: 899px) { html.classic #depart .stage .world { --z: 1; --px: 50%; --py: 50%; } }
html.classic .cpg__dots button { transition: none !important; } /* largeurs lues tout de suite par la bulle */
/* PC large (Vincent 22/10 : « ça pousse les éléments à gauche au lieu de redimensionner ») : les places sont en % de la largeur
   mais les tailles suivent --k (souvent la hauteur) ; le cadre prend donc la largeur du dessin (1440 × --k), centré, et la scène s'y compose
   comme sur l'écran de référence. Le fond reste sur toute la largeur. */
@media (min-width: 900px) { html.classic .cst { left: 50%; right: auto; width: min(100%, calc(var(--k) * 1440px)); transform: translateX(-50%); } }
/* les titres des scènes suivent la même échelle que les appareils (sinon, sur un écran bas, le serveur montait sur le titre) ; 47,5 px = 3,3vw à 1440 */
@media (min-width: 900px) { html.classic .stage .h2 { font-size: clamp(26px, calc(var(--k) * 47.5px), 58px); } }
/* Chute : la vidéo joue (site.js), sans le flou (recalculé 24 fois par seconde, trop lourd pour une vieille carte graphique) ;
   un voile sombre fixe garde la phrase lisible, comme le faisait l'assombrissement de la version animée */
html.classic #fin .stage video { filter: none; }
html.classic #fin .veil { opacity: 1; background: linear-gradient(rgba(11,22,38,.3), rgba(11,22,38,.42) 40%, rgba(11,22,38,.86)); }
html.classic #fin .w { opacity: 1; }
/* Téléphone : le cadre a la hauteur d'un écran (mise en page de la version animée) et il est réduit (--cs, posé par site.js) pour laisser la place à la pilule */
@media (max-width: 899px) { html.classic .stage.paged .cst { height: 100svh; transform-origin: 50% 0; transform: scale(var(--cs, .9)); } }
/* Bascule du menu (navSwitch, site.js) : petit bouton rond à gauche de « Mon compte Entreprise », sur PC et téléphone */
.nav__mode { position: relative; flex: none; display: grid; place-items: center; width: 38px; height: 38px; margin-left: 12px; padding: 0; border-radius: 50%; border: 1px solid rgba(90,123,165,.30);
  background: transparent; color: var(--slate); cursor: pointer; }
.nav__mode svg { width: 18px; height: 18px; }
.nav__mode:hover { background: rgba(90,123,165,.08); }
.nav__mode + .nav__account { margin-left: 8px; }
.nav__mode::after { content: attr(data-tip); position: absolute; top: calc(100% + 10px); right: 0; padding: 8px 12px; border-radius: 10px; background: var(--navy); color: #fff;
  font: 500 13px var(--ff-text); white-space: nowrap; opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity .2s, transform .2s; }
@media (hover: hover) { .nav__mode:hover::after { opacity: 1; transform: none; } }
.nav__pop { position: fixed; top: calc(var(--nav-h) + 8px); right: 12px; z-index: 60; padding: 6px; border-radius: 16px; background: #fff; box-shadow: 0 12px 32px rgba(11,22,38,.18); }
.nav__pop-go { height: 44px; padding: 0 18px; border: 0; border-radius: 12px; background: var(--slate); color: #fff; font: 600 15px var(--ff-text); cursor: pointer; white-space: nowrap; }
@media (max-width: 1023px) { .nav__mode { margin-left: auto; } }
@media (max-width: 599px) { .nav__mode { width: 42px; height: 42px; } }
/* Review 22/10, PC à écran bas (jusqu'à 900 px de haut), le cadre étant plus court que l'écran (place de la pilule) :
   LiveCard, ouverture : le téléphone passait sur la phrase d'introduction → elle est retirée, comme sur téléphone ;
   « En un geste », étape 1 : la carte de visite recouvrait le texte de l'étape (à gauche, plus de place entre titre et texte) → elle passe à droite du téléphone, libre à cette étape */
@media (min-width: 900px) and (max-height: 900px) {
  html.classic #livecard .copy .txt { display: none; }
  html.classic #creer .stage:not(.st2) .card { left: 73%; top: 47%; transform: translate(-50%, -50%) rotate(8deg) scale(calc(var(--k) * .66)); }
}