/* Effets inspirés de React Bits (recette du 28/10/2026), réécrits en CSS et JavaScript natifs (js/vitrine-v3/effets.js) :
   titres mot par mot, cartes qui s'inclinent et s'allument à l'approche du pointeur, grille de points des heros,
   transitions entre pages (View Transitions API). Couleurs unies, aucune boucle au repos, rien avec la réduction des
   mouvements. */

/* Titre mot par mot : chaque mot est un bloc en ligne, pour que sa montée ne déplace pas la ligne. */
[data-vitrine-v3] h1 .v3-mot { display: inline-block; }

/* Cartes : la bordure prend la couleur d'accent selon la proximité du pointeur (--v3-proche, de 0 à 1) ; les cartes de
   navigation s'inclinent vers lui (--v3-incl-x, --v3-incl-y) et se soulèvent d'un pixel. */
/* Les transitions d'apparition au défilement (mouvements.css) sont reprises telles quelles, la bordure s'y ajoute. */
[data-vitrine-v3] [data-v3-carte] { transition: border-color 220ms ease, opacity 520ms ease var(--v3-reveal-delay, 0ms), transform 620ms cubic-bezier(0.2, 0.7, 0.2, 1) var(--v3-reveal-delay, 0ms); }
[data-vitrine-v3] [data-v3-carte][data-v3-proche] { border-color: color-mix(in srgb, var(--v3-brique, var(--v3-blue)) calc(var(--v3-proche, 0) * 70%), var(--v3-line)); }
[data-vitrine-v3] [data-v3-carte]:focus-within { border-color: var(--v3-brique, var(--v3-blue)); }
[data-vitrine-v3] [data-v3-carte][data-v3-inclinee] { transform: perspective(900px) rotateX(var(--v3-incl-x, 0deg)) rotateY(var(--v3-incl-y, 0deg)) translateY(-2px); transition-duration: 220ms, 520ms, 260ms; transition-delay: 0ms; }

/* Grille de points derrière les heros : sous le contenu, sans capter le pointeur. */
[data-vitrine-v3] [data-v3-grille-points] { position: relative; isolation: isolate; overflow: hidden; }
[data-vitrine-v3] .v3-grille-points { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }

/* Fonds vidéo (recette du 28/10/2026) : section sombre dans les deux thèmes, vidéo sous un voile uni (pas de dégradé)
   qui garde le texte lisible ; sans vidéo, le fond uni suffit. Le bouton pause passe au-dessus du contenu. */
[data-vitrine-v3] .v3-hero-video { position: relative; isolation: isolate; overflow: hidden; border-color: #2b3e58; background: #12243a; color: #f4f7fc; color-scheme: dark; }
[data-vitrine-v3] .v3-video-fond { position: absolute; inset: 0; }
[data-vitrine-v3] .v3-video-fond-media { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
[data-vitrine-v3] .v3-video-fond-voile { position: absolute; inset: 0; z-index: -1; background: #0b1726; opacity: 0.72; }
[data-vitrine-v3] .v3-video-fond-pause { position: absolute; right: 16px; bottom: 16px; z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid #ffffff40; border-radius: 8px; background: #0b172699; color: #ffffff; cursor: pointer; }
[data-vitrine-v3] .v3-video-fond-pause:hover { background: #0b1726cc; }
/* Bandeau d'appel final : le bouton en haut à droite, hors de la zone de la barre d'outils (audit du 28/10/2026). */
[data-vitrine-v3] .v3-cta .v3-video-fond-pause { top: 16px; bottom: auto; }
[data-vitrine-v3] .v3-video-fond-pause .lucide { width: 16px; height: 16px; }
[data-vitrine-v3] .v3-hero-video :is(h1, h2, h3) { color: #ffffff; }
[data-vitrine-v3] .v3-hero-video .v3-lead { color: #d3dfec; }
[data-vitrine-v3] .v3-hero-video .v3-frise-etape p { color: #c3d1e2; }
[data-vitrine-v3] .v3-hero-video .v3-frise-etape:not(:last-child)::before { background: #ffffff33; }
[data-vitrine-v3] .v3-page-hero.v3-hero-video { border-bottom: 0; }
/* Le bouton principal garde le bleu du thème de la page : le color-scheme: dark du fond vidéo ferait basculer
   --v3-action (light-dark) dans sa valeur sombre, même en thème clair (audit du 28/10/2026). */
[data-vitrine-v3] .v3-hero-video { --v3-action: #194bd1; --v3-action-hover: #103ba9; }
:root[data-v3-theme="sombre"] [data-vitrine-v3] .v3-hero-video { --v3-action: #2f5fe3; --v3-action-hover: #4471ee; }
@media (prefers-color-scheme: dark) {
    :root:not([data-v3-theme]) [data-vitrine-v3] .v3-hero-video { --v3-action: #2f5fe3; --v3-action-hover: #4471ee; }
}

/* L'en-tête flotte au-dessus du hero de chaque page : le hero (son fond, sa vidéo, sa grille de points, le GPS de
   l'accueil) remonte sous lui jusqu'en haut de la fenêtre, et son espace intérieur grandit d'autant, le contenu ne
   bouge pas. --v3-hero-haut reprend l'espace haut d'origine du hero (52 px, 35 px sur téléphone, vitrine-v3.css).
   Hauteur de l'en-tête : 12 + 64 px en grand écran, 8 + 58 px sur mobile. Recette du 28/10/2026 : heros de pages
   (solutions, intégrations, tarifs, guides…) ajoutés aux heros sombres. */
[data-vitrine-v3] { --v3-entete-hauteur: 76px; }
[data-vitrine-v3] main > :is(.v3-accueil-hero, .v3-page-hero):first-child,
[data-vitrine-v3] main > .v3-solution-page:first-child > .v3-solution-hero:first-child { margin-top: calc(-1 * var(--v3-entete-hauteur)); padding-top: calc(var(--v3-hero-haut, 52px) + var(--v3-entete-hauteur)); }
[data-vitrine-v3] main > .v3-accueil-hero:first-child { --v3-hero-haut: 44px; }
/* GPS de l'accueil en grand écran : la carte couvre tout le hero, jusqu'en haut de la fenêtre, derrière l'en-tête. Ses
   étapes (accueil.css), son trajet et le cadrage de la caméra se calculent sur la zone sous la bande --v3-gps-haut
   (gps-animation.js, gps-scene-3d.js) : la scène s'étend vers le haut sans que rien ne bouge dans la zone visible. */
@media (min-width: 64rem) {
    [data-vitrine-v3] main > .v3-accueil-hero:first-child [data-v3-gps] { --v3-gps-haut: var(--v3-entete-hauteur); }
}
@media (max-width: 63.999rem) {
    [data-vitrine-v3] { --v3-entete-hauteur: 66px; }
    [data-vitrine-v3] .v3-header { position: relative; }
    [data-vitrine-v3][data-v3-enhanced] .v3-header { position: sticky; }
    [data-vitrine-v3] main > .v3-hero-video:first-child { --v3-hero-haut: 35px; }
}
@media (max-width: 47.999rem) {
    [data-vitrine-v3] main > .v3-page-hero:first-child,
    [data-vitrine-v3] main > .v3-solution-page:first-child > .v3-solution-hero:first-child { --v3-hero-haut: 35px; }
}
@media print {
    [data-vitrine-v3] main > :is(.v3-accueil-hero, .v3-page-hero):first-child,
    [data-vitrine-v3] main > .v3-solution-page:first-child > .v3-solution-hero:first-child { margin-top: 0; padding-top: 24px; }
}

/* Transitions entre pages : un fondu court de la page, l'en-tête et la barre d'outils restent en place. */
@view-transition { navigation: auto; }
[data-vitrine-v3] .v3-header-inner { view-transition-name: v3-entete; }
[data-vitrine-v3] .v3-outils { view-transition-name: v3-outils; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 220ms; }

@media (prefers-reduced-motion: reduce) {
    @view-transition { navigation: none; }
    [data-vitrine-v3] [data-v3-carte] { transition: none; }
    [data-vitrine-v3] .v3-grille-points { display: none; }
    [data-vitrine-v3] .v3-video-fond-pause { display: none; }
}