/* HOLO + (Prisme) — les effets injectés par holo-plus.js, tout en retenue :
 * sol holographique, cadres HUD, particules et halo du curseur, bordures
 * animées. Sur l'accueil seulement, un graphique en bougies derrière l'équipe.
 * Tout est purement décoratif.
 */

@property --hp-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

@keyframes hpSolCarre   { to { background-position: 0 var(--hp-pas), 0 0; } }
@keyframes hpHorizon    { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }
@keyframes hpTourne     { to { --hp-a: 360deg; } }
@keyframes hpClignote   { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@keyframes hpReflet     { 0% { left: -70%; } 28%, 100% { left: 130%; } }

/* ─────────────────────────── 1. sol holographique ─────────────────────────── */
html[data-hp] .hp-sol {
  position: absolute; z-index: -2;
  left: 50%; translate: -50% 0;
  width: min(100vw, 1800px); height: 340px;
  top: calc(100% - 250px);
  pointer-events: none; overflow: hidden;
  perspective: 380px; perspective-origin: 50% 0%;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 34%, #000 62%, transparent 100%), radial-gradient(ellipse 52% 100% at 50% 40%, #000 30%, transparent 78%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, transparent 0%, #000 34%, #000 62%, transparent 100%), radial-gradient(ellipse 52% 100% at 50% 40%, #000 30%, transparent 78%);
  mask-composite: intersect;
}
/* les enfants du titre de page sont relatifs : on rend la main au sol */
html[data-hp] .page-hero > .hp-sol, html[data-hp] .merci-hero > .hp-sol { position: absolute; z-index: -2; }
html[data-hp] .hp-sol i {
  position: absolute; left: -60%; right: -60%; bottom: 0; height: 1400px;
  transform-origin: 50% 100%; transform: rotateX(78deg);
  --hp-pas: 64px;
  --hp-ligne: rgba(var(--accent-light-rgb), .16);
  background:
    linear-gradient(to bottom, var(--hp-ligne) 1px, transparent 1px) 0 0 / 100% var(--hp-pas),
    linear-gradient(to right, var(--hp-ligne) 1px, transparent 1px) 50% 0 / var(--hp-pas) 100%;
  animation: hpSolCarre 9s linear infinite;
}
/* la ligne d'horizon, là où le sol rejoint la lumière du titre */
html[data-hp] .hp-sol b {
  position: absolute; left: 10%; right: 10%; top: 33%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--accent-light-rgb), .55), transparent);
  box-shadow: 0 0 18px 2px rgba(var(--accent-rgb), .35);
  animation: hpHorizon 5s ease-in-out infinite;
}
/* écrans de connexion : pas de titre de page, le sol tient le bas de l'écran */
html[data-hp] .hp-sol.hp-sol-fixe { position: fixed; top: auto; bottom: 0; height: 42vh; z-index: -1; }

/* Accueil : un graphique en bougies se dresse derrière l'équipe détourée.
   Le canevas et l'image détourée sont posés dans la scène, sur la photo :
   ils en suivent la taille et le fondu des bords. */
html[data-mur] .scene > .hp-mur, html[data-mur] .scene > .hp-equipe {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; opacity: 0;
}
html[data-mur] .scene > .hp-equipe { object-fit: cover; animation: none; }
/* le graphique s'arrête sous le titre et s'éteint aux épaules, avant le texte du bas */
html[data-mur] .scene > .hp-mur {
  transition: opacity 1.6s ease-out;
  filter: drop-shadow(0 0 5px rgba(var(--accent-rgb), .55));
  -webkit-mask-image: linear-gradient(to bottom, transparent 28%, #000 31.5%, #000 54%, transparent 64%);
  mask-image: linear-gradient(to bottom, transparent 28%, #000 31.5%, #000 54%, transparent 64%);
}
html[data-mur] .scene.hp-pret > .hp-mur, html[data-mur] .scene.hp-pret > .hp-equipe { opacity: 1; }

/* ─────────────────────────── 2. cadres HUD ─────────────────────────── */
html[data-hp] .hp-hud {
  --c: rgba(var(--accent-light-rgb), .55); --l: 12px; --e: 1px;
  position: absolute; inset: -7px; z-index: 3;
  pointer-events: none; border-radius: 0;
  background:
    linear-gradient(var(--c), var(--c)) left top / var(--l) var(--e),
    linear-gradient(var(--c), var(--c)) left top / var(--e) var(--l),
    linear-gradient(var(--c), var(--c)) right top / var(--l) var(--e),
    linear-gradient(var(--c), var(--c)) right top / var(--e) var(--l),
    linear-gradient(var(--c), var(--c)) left bottom / var(--l) var(--e),
    linear-gradient(var(--c), var(--c)) left bottom / var(--e) var(--l),
    linear-gradient(var(--c), var(--c)) right bottom / var(--l) var(--e),
    linear-gradient(var(--c), var(--c)) right bottom / var(--e) var(--l);
  background-repeat: no-repeat;
  opacity: .38;
  transition: opacity .35s, inset .45s cubic-bezier(.2, .8, .2, 1), --c .35s;
}
html[data-hp] .hp-dedans > .hp-hud { inset: 7px; }
html[data-hp] .hp-petit > .hp-hud { opacity: 0; }
html[data-hp] .hp-carte:hover > .hp-hud { opacity: .9; inset: -11px; }
html[data-hp] .hp-dedans:hover > .hp-hud { inset: 4px; }
html[data-hp] .hp-tag {
  position: absolute; z-index: 3; right: 16px; bottom: 12px;
  display: inline-flex; align-items: center; gap: 6px;
  font: 600 9px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(var(--accent-light-rgb), .55); pointer-events: none; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
html[data-hp] .hp-tag::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent-light); box-shadow: 0 0 8px var(--accent-light);
  animation: hpClignote 2.4s ease-in-out infinite;
}
html[data-hp] .hp-petit > .hp-tag { display: none; }

/* ─────────────────────────── 3. particules et halo du curseur ─────────────────────────── */
.hp-ciel { position: fixed; inset: 0; z-index: -1; pointer-events: none; width: 100%; height: 100%; }
.hp-halo {
  position: fixed; left: 0; top: 0; z-index: 9990; pointer-events: none;
  width: 560px; height: 560px; margin: -280px 0 0 -280px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(var(--accent-rgb), .13), rgba(var(--accent-rgb), .04) 55%, transparent);
  mix-blend-mode: screen; opacity: 0; transition: opacity .5s;
  will-change: transform;
}
.hp-halo.hp-la { opacity: 1; }

/* ─────────────────────────── 4. bordures animées ─────────────────────────── */
html[data-hp] .hp-bord {
  position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none;
  padding: 1.5px;
  background: conic-gradient(from var(--hp-a), transparent 0 64%, rgba(var(--accent-rgb), .7) 76%, var(--holo-nacre) 82%, rgba(var(--accent-light-rgb), .8) 88%, transparent 96%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: hpTourne 6s linear infinite; animation-play-state: paused;
  display: none;
}
html[data-hp] .hp-vu > .hp-bord { animation-play-state: running; }
html[data-hp] .hp-cle > .hp-bord { display: block; }
html[data-hp] .hp-cle { box-shadow: 0 0 0 1px rgba(var(--accent-light-rgb), .08), 0 24px 70px -30px rgba(var(--accent-rgb), .55); }
/* boutons : le reflet passe tout seul, sans attendre le survol */
html[data-hp] .btn-primary::after, html[data-hp] .btn-auth::after, html[data-hp] body.accueil .btn::after {
  animation: hpReflet 5s cubic-bezier(.4, 0, .2, 1) infinite; transition: none;
}

/* ─────────────────────────── mobile et sobriété ─────────────────────────── */
@media (max-width: 768px) {
  html[data-hp] .hp-sol { height: 240px; top: calc(100% - 170px); }
  html[data-hp] .hp-hud { inset: -5px; }
  html[data-hp] .hp-carte:hover > .hp-hud { inset: -5px; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-hp] .hp-sol i, html[data-hp] .hp-sol b, html[data-hp] .hp-bord,
  html[data-hp] .hp-tag::before, html[data-hp] .btn-primary::after, html[data-hp] .btn-auth::after,
  html[data-hp] body.accueil .btn::after { animation: none; }
  .hp-halo { display: none; }
}