/* ===== Couche « futuriste » de gestop.fr ===== */
@property --fx-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

/* 2 + 7 · grille qui s'illumine autour du curseur, lignes de lumière, halo d'ambiance */
.fx-fond { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.fx-grille { position: absolute; left: 0; top: 0; width: 528px; height: 528px; will-change: transform;
  background-image: linear-gradient(rgba(197,38,38,.35) 1px, transparent 1px), linear-gradient(90deg, rgba(197,38,38,.35) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(closest-side, #000, transparent); mask-image: radial-gradient(closest-side, #000, transparent); }
.fx-halo { position: absolute; width: 900px; height: 900px; left: calc(var(--fx-x, 50vw) - 450px); top: calc(var(--fx-y, 30vh) - 450px);
  background: radial-gradient(closest-side, rgba(255,90,78,.10), transparent); transition: left .5s ease-out, top .5s ease-out; }
.fx-trait { position: absolute; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,90,78,.7), transparent); opacity: .0; animation: fxTrait 9s linear infinite; }
.fx-trait.v { top: 0; bottom: 0; width: 1px; height: auto; left: 0; right: auto; background: linear-gradient(180deg, transparent, rgba(255,90,78,.6), transparent); animation-name: fxTraitV; animation-duration: 13s; }
@keyframes fxTrait { 0% { top: -2%; opacity: 0 } 8% { opacity: .9 } 60% { opacity: .9 } 100% { top: 102%; opacity: 0 } }
@keyframes fxTraitV { 0% { left: -2%; opacity: 0 } 10% { opacity: .8 } 70% { opacity: .8 } 100% { left: 102%; opacity: 0 } }

/* 1 · cartes d'opérations qui flottent en 3D derrière le titre de l'accueil */
.fx-hero3d { position: absolute; inset: 0; pointer-events: none; z-index: 1; perspective: 1400px; }
.fx-hc { position: absolute; width: 230px; padding: 18px 20px; border-radius: 20px; background: linear-gradient(180deg, #1B1F26, #111418); color: #ECEAE5;
  font-family: var(--film-texte, system-ui, sans-serif); box-shadow: 0 40px 80px rgba(15,27,40,.28); border: 1px solid rgba(255,255,255,.07); will-change: transform; }
.fx-hc small { display: block; font-size: 12px; font-weight: 700; color: #8A919C; }
.fx-hc b { display: block; font-size: 26px; font-weight: 800; margin-top: 4px; font-variant-numeric: tabular-nums; }
.fx-hc i { display: block; height: 6px; border-radius: 3px; margin-top: 12px; background: #2A2F37; overflow: hidden; }
.fx-hc i::after { content: ''; display: block; height: 100%; width: var(--w, 60%); background: var(--c, #4CC38A); border-radius: 3px; }
@media (max-width: 1100px) { .fx-hero3d { display: none; } }

/* 5 · mur de modules en perspective qui défile sans fin */
.fx-mur { position: relative; height: 300px; overflow: hidden; perspective: 1200px; margin: 20px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.fx-mur-plan { position: absolute; left: 50%; top: 50%; width: 2600px; transform: translate(-50%, -50%) rotateX(52deg) rotateZ(-8deg); }
.fx-mur-ligne { display: flex; gap: 16px; margin: 8px 0; width: max-content; animation: fxMur 40s linear infinite; }
.fx-mur-ligne:nth-child(2) { animation-direction: reverse; animation-duration: 48s; }
.fx-mur-ligne span { padding: 18px 22px; border-radius: 14px; background: #15181D; color: #fff; font: 800 18px var(--film-texte, system-ui, sans-serif); white-space: nowrap; box-shadow: 0 14px 30px rgba(15,27,40,.2); }
.fx-mur-ligne span:nth-child(7n+3) { background: #C52626; }
@keyframes fxMur { to { transform: translateX(-50%); } }

/* 6 · indicateur de chapitre façon tableau de bord (à droite) */
.fx-chap { position: fixed; right: 22px; top: 50%; transform: translateY(-50%); z-index: 9000; display: flex; flex-direction: column; gap: 10px; align-items: flex-end; pointer-events: none; }
.fx-chap-num { font: 800 13px var(--film-texte, system-ui, sans-serif); color: #fff; background: #14171C; padding: 8px 12px; border-radius: 10px; box-shadow: 0 12px 26px rgba(15,27,40,.25); opacity: 0; transform: translateX(10px); transition: opacity .3s, transform .3s; }
.fx-chap-num b { color: #FF5A4E; margin-right: 6px; font-variant-numeric: tabular-nums; }
.fx-chap.on .fx-chap-num { opacity: 1; transform: none; }
.fx-chap-pts { display: flex; flex-direction: column; gap: 6px; }
.fx-chap-pts i { width: 6px; height: 6px; border-radius: 50%; background: rgba(15,27,40,.25); transition: background .3s, transform .3s; }
.fx-chap-pts i.on { background: #FF5A4E; transform: scale(1.6); box-shadow: 0 0 10px rgba(255,90,78,.8); }
@media (max-width: 1100px) { .fx-chap { display: none; } }

/* 8 · anneau rouge qui pulse, trait de lumière qui en fait le tour */
.film-anneau::before { animation: fxPulse 3.2s ease-in-out infinite; }
.film-anneau::after { content: ''; position: absolute; left: 50%; top: -120px; width: min(980px, 86vw); height: 240px; transform: translateX(-50%); border-radius: 50%;
  background: conic-gradient(from var(--fx-a), transparent 0 80%, rgba(255,255,255,.95) 90%, transparent 96%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px)); mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
  animation: fxTour 4.5s linear infinite; filter: drop-shadow(0 0 6px #FF5A4E); }
@keyframes fxPulse { 50% { box-shadow: 0 0 70px 16px rgba(232,71,60,.38), inset 0 0 40px 6px rgba(232,71,60,.3); } }
@keyframes fxTour { to { --fx-a: 360deg; } }

/* 9 · onde au clic sur les boutons */
.fx-onde { position: absolute; border-radius: 50%; background: rgba(255,255,255,.5); transform: scale(0); animation: fxOnde .6s ease-out forwards; pointer-events: none; }
@keyframes fxOnde { to { transform: scale(4); opacity: 0; } }

/* 10 · curseur : point rouge et anneau qui grossit sur ce qui est cliquable */
.fx-cur, .fx-cur-r { position: fixed; left: 0; top: 0; pointer-events: none; z-index: 10001; border-radius: 50%; }
.fx-cur { width: 8px; height: 8px; margin: -4px 0 0 -4px; background: #FF5A4E; box-shadow: 0 0 10px rgba(255,90,78,.9); }
.fx-cur-r { width: 34px; height: 34px; margin: -17px 0 0 -17px; border: 1.5px solid rgba(197,38,38,.55); transition: width .2s, height .2s, margin .2s, background .2s, border-color .2s; }
.fx-cur-r.lien { width: 56px; height: 56px; margin: -28px 0 0 -28px; background: rgba(255,90,78,.08); border-color: rgba(255,90,78,.9); }

/* 11 · mini-démo animée dans le panneau des fonctionnalités */
.fx-demo { display: block; width: 100%; height: 64px; margin: 0 0 10px; border-radius: 12px; background: #1C2128; overflow: hidden; }
.fx-demo .trace { stroke-dasharray: 300; stroke-dashoffset: 300; animation: fxTrace 1.6s ease-out forwards infinite; }
.fx-demo .barre { transform-origin: 0 50%; animation: fxBarre 1.8s ease-in-out infinite alternate; }
.fx-demo .pt { animation: fxPt 1.2s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; }
@keyframes fxTrace { 70%, 100% { stroke-dashoffset: 0; } }
@keyframes fxBarre { from { transform: scaleX(.85); fill: #4CC38A; } to { transform: scaleX(.35); fill: #FF5A4E; } }
@keyframes fxPt { to { transform: scale(1.6); opacity: .6; } }

/* 12 · transitions entre pages, comme la mise au point du film */
body.fx-sortie { animation: fxSortie .32s ease-in forwards; }
@keyframes fxSortie { to { opacity: 0; filter: blur(10px); transform: scale(.985); } }
body.fx-entree { animation: fxEntree .5s cubic-bezier(.16,1,.3,1); }
@keyframes fxEntree { from { opacity: 0; filter: blur(12px); transform: scale(1.01); } }

/* 3 + 4 · chiffres et titres qui se décodent : rien à styler, c'est du texte */

@media (prefers-reduced-motion: reduce) {
  .fx-mur-ligne, .film-anneau::before, .film-anneau::after, .fx-demo * { animation: none !important; }
  body.fx-sortie, body.fx-entree { animation: none !important; }
}

/* curseur normal partout : ni point de couleur ni curseur personnalisé */
html body { cursor: auto !important; }
#cursor, .cursor, .fx-cur, .fx-cur-r { display: none !important; }
.fx-demo { display: none !important; }

/* ===== Fond unique sur tout le site : la grille, rien d'autre ===== */
html { background: #F6F5F1 !important; }
html body { background: transparent !important; } /* la couleur est portée par html : sinon le fond du body recouvre la grille */
html body::before { content: ''; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background-image: linear-gradient(rgba(15,27,40,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(15,27,40,.055) 1px, transparent 1px);
  background-size: 48px 48px; }
body :is(section, .section, .dark-section, .light-section, .hero, main, .s, .page, .wrap, .marquee-wrap, .bandeau):not(.s-tag) {
  background: transparent !important; background-image: none !important; }
body > header:not(nav) { background: transparent !important; }
.orb, .orb1, .orb2, .orb3, .hero-grid, .dashboard-glow, .fx-halo, .fx-trait { display: none !important; }

/* anciennes sections sombres : textes, puces et cartes adaptés au fond clair */
body .dark-section .s-title, body .s-title.dark { color: #0F1B28 !important; }
body .s-sub.dark { color: #5B6573 !important; }
body .faq-item { background: rgba(255,255,255,.75) !important; border: 1px solid rgba(197,38,38,.16) !important; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 14px 30px rgba(15,27,40,.06); }
body .faq-item .faq-q { color: #0F1B28 !important; }
body .faq-item .faq-a { color: #5B6573 !important; }
body .faq-item .faq-icon { color: #C52626 !important; border-color: rgba(197,38,38,.35) !important; }
body .stat-item { background: rgba(255,255,255,.75) !important; border: 1px solid rgba(197,38,38,.16) !important; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
body .stat-item .stat-label { color: #5B6573 !important; }
body :is(.stat-value, .stat-num) { color: #C52626 !important; }

/* curseur : un point noir */
@media (hover: hover) and (pointer: fine) {
  html body, html body * { cursor: none !important; }
  html body :is(input, textarea, select, [contenteditable="true"]) { cursor: text !important; }
}
.fx-point { will-change: transform; position: fixed; left: 0; top: 0; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: #0F1B28; pointer-events: none; z-index: 100000;
  transition: width .18s ease, height .18s ease, margin .18s ease, background .18s ease, opacity .2s; }
.fx-point.lien { width: 30px; height: 30px; margin: -15px 0 0 -15px; background: rgba(15,27,40,.18); box-shadow: 0 0 0 1.5px #0F1B28 inset; }
.fx-point.cache { opacity: 0; }

/* fluidité : pas de flou d'arrière-plan sur les nombreuses cartes */
body :is(.feature-card, .p-card, .faq-item, .stat-item) { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
body :is(.feature-card, .p-card):not(.dark-card) { background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.88)) !important; }
body :is(.faq-item, .stat-item) { background: rgba(255,255,255,.92) !important; }