/* SPDX-License-Identifier: AGPL-3.0-only */
/* Mascotte « La Sentinelle de cuivre » (page de démonstration).
   Mode par défaut : hologramme 2,5D (vendor/sentinelle-holo.min.js) — image
   détourée + masques visière / lumières, couches ci-dessous. Mode 3D
   (data-mode="3d", modèle GLB définitif) : vendor/sentinelle.min.js.
   Les jetons --sentinelle-* pilotent les couleurs des deux modes : changer une
   couleur ici suffit. */
:root {
  --sentinelle-cuivre: #c8743a; --sentinelle-cyan: #3fe0ff; --sentinelle-violet: #9b6bff;
  --sentinelle-alerte: #ff4049; --sentinelle-propre: #40f5c2; --sentinelle-or: #ffd27a;
}
:root.light {
  --sentinelle-cuivre: #c06a32; --sentinelle-cyan: #19b8d8; --sentinelle-violet: #7a52e6;
  --sentinelle-alerte: #e5262b; --sentinelle-propre: #12a77e; --sentinelle-or: #e9a93a;
}

.sentinelle-demo {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; gap: 4vw;
  padding: 56px max(24px, calc((100vw - 1320px) / 2)) 64px;
  background: var(--background-deep);
  border-bottom: 1px solid var(--border);
}
.sentinelle-demo__texte { position: relative; z-index: 2; max-width: 560px; }
.sentinelle-demo__kicker {
  display: inline-flex; gap: 8px; align-items: center; margin: 0 0 18px;
  padding: 6px 12px; border: 1px solid var(--border); border-radius: 99px;
  color: var(--violet-bright); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}
.sentinelle-demo h1 {
  margin: 0 0 18px; color: var(--foreground);
  font: 600 clamp(40px, 5vw, 76px)/.95 var(--font-heading); letter-spacing: -0.02em; text-wrap: balance;
}
.sentinelle-demo h1 em { font-style: normal; color: var(--copper); }
.sentinelle-demo__intro { color: var(--muted-foreground); font-size: 17px; line-height: 1.6; margin: 0 0 28px; }

.sentinelle-demo__commandes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0 0 18px; }
.sentinelle-demo__commandes .btn { justify-content: center; }
.sentinelle-demo__commandes .btn[aria-pressed="true"] {
  border-color: var(--copper); box-shadow: var(--shadow-focus);
}
.btn-etat::before {
  content: ""; width: 9px; height: 9px; border-radius: 50%; flex: none;
  background: var(--etat-couleur, var(--copper)); box-shadow: 0 0 10px var(--etat-couleur, var(--copper));
}
.btn-etat[data-etat-demo="scan"] { --etat-couleur: var(--sentinelle-cyan); }
.btn-etat[data-etat-demo="alerte"] { --etat-couleur: var(--sentinelle-alerte); }
.btn-etat[data-etat-demo="propre"] { --etat-couleur: var(--sentinelle-or); }
.btn-etat[data-etat-demo="repos"] { --etat-couleur: var(--sentinelle-cuivre); }
.sentinelle-demo__statut { min-height: 1.5em; margin: 0 0 10px; color: var(--foreground); font-weight: 600; }
.sentinelle-demo__aide { color: var(--text-dim); font-size: 14px; margin: 0; }

/* Cadre de la mascotte. */
.sentinelle {
  position: relative; width: 100%; height: min(80vh, 740px); min-height: 440px;
  cursor: pointer; isolation: isolate;
}
/* Halo du mode 3D (l'hologramme a le sien). */
.sentinelle[data-mode="3d"]::before {
  content: ""; position: absolute; inset: 6% 8% 4%; z-index: -1; border-radius: 50%;
  background:
    radial-gradient(closest-side, color-mix(in oklab, var(--etat-halo, var(--violet)) 26%, transparent), transparent 72%),
    radial-gradient(closest-side at 50% 62%, color-mix(in oklab, var(--copper) 18%, transparent), transparent 80%);
  transition: background var(--duration-slow) var(--ease-standard);
}
.sentinelle[data-etat="scan"] { --etat-halo: var(--sentinelle-cyan); }
.sentinelle[data-etat="alerte"] { --etat-halo: var(--sentinelle-alerte); }
.sentinelle[data-etat="propre"] { --etat-halo: var(--sentinelle-propre); }
.sentinelle__scene { position: absolute; inset: 0; }
.sentinelle__scene canvas { display: block; width: 100%; height: 100%; }
.sentinelle.is-static { cursor: default; display: grid; place-items: center; }
.sentinelle__repli {
  display: block; max-width: 100%; max-height: 88%; width: auto; height: 88%; object-fit: contain;
  filter: drop-shadow(0 18px 24px rgb(0 0 0 / .35));
}

/* ------------------------------------------------------------------ */
/* Hologramme 2,5D                                                     */
/* ------------------------------------------------------------------ */

/* Couleurs d'état interpolées en douceur (propriétés typées). */
@property --lueur { syntax: "<color>"; inherits: true; initial-value: #3fe0ff; }
@property --lueur2 { syntax: "<color>"; inherits: true; initial-value: #9b6bff; }
@property --teinte { syntax: "<color>"; inherits: true; initial-value: #3fe0ff; }
@property --teinte-force { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --visiere-force { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --bloom-force { syntax: "<number>"; inherits: true; initial-value: .5; }
@property --halo-force { syntax: "<percentage>"; inherits: true; initial-value: 26%; }
@property --balayage { syntax: "<percentage>"; inherits: true; initial-value: 54%; }

.holo {
  --image: url("/modeles/sentinelle-holo.webp");
  --masque-visiere: url("/modeles/sentinelle-holo-visiere.webp");
  --masque-lumieres: url("/modeles/sentinelle-holo-lumieres.webp");
  --rx: 0deg; --ry: 0deg; --sx: 50%; --sy: 32%; --px: 0px; --py: 0px;
  --lueur: var(--sentinelle-cyan); --lueur2: var(--sentinelle-violet);
  --teinte: var(--sentinelle-cyan); --teinte-force: 0; --visiere-force: 0;
  --bloom-force: .5; --halo-force: 30%;
  --ombre: rgb(0 0 0 / .62);
  position: absolute; inset: 0; opacity: 0;
  transition: opacity .7s ease, --lueur .6s ease, --lueur2 .6s ease, --teinte .45s ease,
    --teinte-force .45s ease, --visiere-force .45s ease, --bloom-force .6s ease, --halo-force .8s ease;
}
.is-ready > .holo { opacity: 1; }
:root.light .holo { --ombre: rgb(60 45 20 / .32); --halo-force: 34%; }

/* États : couleur de la lueur, teinte des lumières (masques), force du bloom. */
.holo[data-etat="scan"] { --lueur2: var(--sentinelle-cyan); --bloom-force: .85; --visiere-force: .35; --teinte: #a8f4ff; --halo-force: 36%; }
.holo[data-etat="alerte"] {
  --lueur: var(--sentinelle-alerte); --lueur2: color-mix(in oklab, var(--sentinelle-alerte) 60%, #5a0a14);
  --teinte: color-mix(in oklab, var(--sentinelle-alerte) 72%, #c4000f); --teinte-force: 1; --visiere-force: 1; --bloom-force: .75; --halo-force: 40%;
}
.holo[data-etat="propre"] {
  --lueur: var(--sentinelle-or); --lueur2: color-mix(in oklab, var(--sentinelle-or) 55%, var(--sentinelle-cuivre));
  --teinte: color-mix(in oklab, var(--sentinelle-or) 70%, #fff); --teinte-force: 1; --visiere-force: 1; --bloom-force: .7; --halo-force: 34%;
}
:root.light .holo[data-etat="alerte"] { --halo-force: 30%; }

/* Halo de fond (cuivre, cyan, violet ; rouge en alerte, or en célébration). */
.holo__halo {
  position: absolute; left: 50%; top: 45%; width: min(100%, 700px); aspect-ratio: 1;
  transform: translate(calc(-50% - var(--px)), calc(-50% + var(--py)));
  background:
    radial-gradient(closest-side, color-mix(in oklab, var(--lueur) var(--halo-force), transparent), color-mix(in oklab, var(--lueur2) calc(var(--halo-force) * .4), transparent) 42%, color-mix(in oklab, var(--lueur2) calc(var(--halo-force) * .1), transparent) 68%, transparent 96%),
    radial-gradient(ellipse 40% 24% at 50% 72%, color-mix(in oklab, var(--sentinelle-cuivre) 16%, transparent), transparent 100%);
  animation: holo-halo 7s ease-in-out infinite;
  pointer-events: none;
}
.holo[data-etat="alerte"] .holo__halo { animation: holo-halo-alerte 1.8s ease-in-out infinite; }

.holo__particules { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; }

/* Scène : la mascotte occupe le même cadre que son socle. */
.holo__scene { position: absolute; inset: 0; perspective: 1500px; perspective-origin: 50% 40%; }
.holo__socle, .holo__flottant {
  position: absolute; left: 50%; bottom: 8%; height: 84%; aspect-ratio: 597 / 1000; transform: translateX(-50%);
}
.holo__saut, .holo__corps { position: absolute; inset: 0; }
.holo__flottant { animation: holo-respire 6.5s ease-in-out infinite; z-index: 1; }
.holo__corps { transform: rotateX(var(--rx)) rotateY(var(--ry)); transform-origin: 50% 60%; will-change: transform; }
.holo.is-salut .holo__saut { animation: holo-saut .8s cubic-bezier(.3, .7, .4, 1); }

/* Sol : ombre douce, anneau holographique, reflet estompé. */
.holo__ombre {
  position: absolute; left: -4%; right: -4%; bottom: -3.6%; height: 8%; border-radius: 50%;
  background: radial-gradient(closest-side, var(--ombre), transparent);
  animation: holo-ombre 6.5s ease-in-out infinite;
}
.holo__anneau {
  position: absolute; left: 4%; right: 4%; bottom: -1.8%; height: 6.4%; border-radius: 50%;
  border: 1px solid color-mix(in oklab, var(--lueur) 55%, transparent);
  box-shadow: 0 0 18px color-mix(in oklab, var(--lueur) 35%, transparent), inset 0 0 22px color-mix(in oklab, var(--lueur) 22%, transparent);
  background: radial-gradient(closest-side, color-mix(in oklab, var(--lueur) 10%, transparent), transparent);
  opacity: .75;
}
.holo__reflet {
  position: absolute; left: 0; top: 99%; width: 100%; height: 100%;
  transform: scaleY(-1); opacity: .16; pointer-events: none; user-select: none;
  -webkit-mask-image: linear-gradient(to top, #000, transparent 18%);
  mask-image: linear-gradient(to top, #000, transparent 18%);
}
:root.light .holo__reflet { opacity: .12; }

/* Couches de la mascotte : toutes au cadre exact de l'image. */
.holo__corps > *, .holo__forme { position: absolute; inset: 0; pointer-events: none; }
.holo__image { display: block; width: 100%; height: 100%; user-select: none; -webkit-user-drag: none; }
:root.light .holo__image { filter: drop-shadow(0 2px 3px rgb(60 45 20 / .18)); }

/* Couches découpées sur la silhouette (alpha de l'image). */
.holo__aura .holo__forme, .holo__speculaire, .holo__lignes, .holo__faisceau, .holo__eclat, .holo__impulsion {
  -webkit-mask: var(--image) center / 100% 100% no-repeat;
  mask: var(--image) center / 100% 100% no-repeat;
}
/* Contre-jour coloré autour de la silhouette. */
.holo__aura { filter: blur(16px); opacity: .55; animation: holo-aura 6.5s ease-in-out infinite; }
.holo__aura .holo__forme { background: linear-gradient(to bottom, var(--lueur), var(--lueur2) 70%, transparent); }
:root.light .holo__aura { opacity: .4; }

/* Lumières (bouclier, liserés) et visière : teinte d'état + bloom. */
.holo__teinte--lumieres, .holo__bloom--lumieres .holo__forme {
  -webkit-mask: var(--masque-lumieres) center / 100% 100% no-repeat;
  mask: var(--masque-lumieres) center / 100% 100% no-repeat;
}
.holo__teinte--visiere, .holo__bloom--visiere .holo__forme {
  -webkit-mask: var(--masque-visiere) center / 100% 100% no-repeat;
  mask: var(--masque-visiere) center / 100% 100% no-repeat;
}
.holo__teinte { background: var(--teinte); }
.holo__teinte--lumieres { opacity: var(--teinte-force); }
.holo__teinte--visiere { opacity: var(--visiere-force); }
.holo__bloom { mix-blend-mode: plus-lighter; filter: blur(5px); }
/* Fond clair : une addition lumineuse y tire vers le jaune citron ; simple voile coloré. */
:root.light .holo__bloom { mix-blend-mode: normal; }
:root.light .holo[data-etat="propre"] { --teinte: color-mix(in oklab, var(--sentinelle-or) 85%, #fff); }
.holo__bloom .holo__forme { background: var(--lueur); }
.holo__bloom--lumieres { opacity: calc(var(--bloom-force) * .8); }
.holo__bloom--visiere { filter: blur(4px); opacity: var(--bloom-force); animation: holo-visiere 4.2s ease-in-out infinite; }
.holo[data-etat="repos"] .holo__bloom .holo__forme { background: var(--sentinelle-cyan); }
.holo[data-etat="alerte"] .holo__bloom .holo__forme { background: color-mix(in oklab, var(--sentinelle-alerte) 75%, #5a0008); }
.holo[data-etat="propre"] .holo__bloom .holo__forme { background: color-mix(in oklab, var(--sentinelle-or) 70%, var(--sentinelle-cuivre)); }
.holo[data-etat="scan"] .holo__bloom--visiere { animation-duration: 1.1s; }
.holo[data-etat="alerte"] .holo__teinte, .holo[data-etat="alerte"] .holo__bloom { animation: holo-alerte 2.2s linear infinite; }
.holo[data-etat="propre"] .holo__bloom--lumieres { animation: holo-propre 2.6s ease-in-out infinite; }

/* Reflet spéculaire métallique qui glisse avec le pointeur. */
.holo__speculaire {
  mix-blend-mode: soft-light; opacity: .9;
  background:
    radial-gradient(ellipse 46% 30% at var(--sx) var(--sy), rgb(255 255 255 / .75), rgb(255 255 255 / 0) 70%),
    linear-gradient(calc(100deg + var(--ry) * 3), transparent 30%, rgb(255 255 255 / .22) 46%, transparent 60%);
}
.holo.is-leger .holo__speculaire { opacity: .5; }

/* Scan : faisceau horizontal cyan qui balaie la silhouette, lignes fines. */
.holo__lignes {
  opacity: 0; mix-blend-mode: screen; transition: opacity .4s ease;
  background: repeating-linear-gradient(to bottom, color-mix(in oklab, var(--sentinelle-cyan) 32%, transparent) 0 1px, transparent 1px 4px);
  animation: holo-lignes 1.6s linear infinite;
}
.holo__faisceau { opacity: 0; mix-blend-mode: plus-lighter; transition: opacity .4s ease; overflow: hidden; }
.holo__bande {
  position: absolute; left: 0; right: 0; height: 22%; top: calc(var(--balayage) - 22%);
  background: linear-gradient(to bottom,
    transparent,
    color-mix(in oklab, var(--sentinelle-cyan) 10%, transparent) 55%,
    color-mix(in oklab, var(--sentinelle-cyan) 45%, transparent) 92%,
    #e6fcff 98.5%, transparent);
}
.holo__plan {
  left: -16%; right: -16%; bottom: auto; height: 2px; top: var(--balayage); opacity: 0;
  background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--sentinelle-cyan) 70%, transparent) 30%, #e6fcff 50%, color-mix(in oklab, var(--sentinelle-cyan) 70%, transparent) 70%, transparent);
  box-shadow: 0 0 12px 1px color-mix(in oklab, var(--sentinelle-cyan) 60%, transparent);
  transition: opacity .4s ease;
}
.holo[data-etat="scan"] .holo__lignes { opacity: .55; }
.holo[data-etat="scan"] .holo__faisceau { opacity: 1; }
.holo[data-etat="scan"] .holo__plan { opacity: .8; }
.holo[data-etat="scan"] .holo__corps { animation: holo-balayage 2.8s cubic-bezier(.45, .05, .55, .95) infinite; }

/* Propre : éclat blanc-or qui parcourt la silhouette. */
.holo__eclat {
  opacity: 0; mix-blend-mode: plus-lighter; transition: opacity .4s ease;
  background: linear-gradient(125deg, transparent 46.5%, rgb(255 214 140 / .16) 48.6%, rgb(255 244 214 / .5) 50%, rgb(255 214 140 / .16) 51.4%, transparent 53.5%) 0 0 / 300% 100% no-repeat;
}
.holo[data-etat="propre"] .holo__eclat { opacity: 1; animation: holo-eclat 3.2s ease-in-out infinite; }

/* Salut : brève impulsion lumineuse. */
.holo__impulsion {
  opacity: 0; mix-blend-mode: plus-lighter;
  background: radial-gradient(circle at 50% 28%, color-mix(in oklab, var(--lueur) 70%, #fff), transparent 62%);
}
.holo.is-salut .holo__impulsion { animation: holo-impulsion .8s ease-out; }

/* Pause hors écran ou onglet caché. */
.holo.is-pause, .holo.is-pause * { animation-play-state: paused !important; }

/* Petit écran : version allégée (ni particules ni inclinaison). */
.holo.is-leger .holo__particules { display: none; }
.holo.is-leger .holo__aura { filter: blur(10px); }

@keyframes holo-respire { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, -7px); } }
@keyframes holo-ombre { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.93); opacity: .78; } }
@keyframes holo-halo { 0%, 100% { opacity: .92; } 50% { opacity: 1; } }
@keyframes holo-halo-alerte { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }
@keyframes holo-aura { 0%, 100% { opacity: .45; } 50% { opacity: .62; } }
@keyframes holo-visiere { 0%, 100% { opacity: calc(var(--bloom-force) * .55); } 50% { opacity: var(--bloom-force); } }
@keyframes holo-alerte {
  0%, 38%, 46%, 100% { opacity: 1; }
  42% { opacity: .42; }
  70% { opacity: .78; }
}
@keyframes holo-propre { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes holo-lignes { from { background-position: 0 0; } to { background-position: 0 8px; } }
@keyframes holo-balayage { 0% { --balayage: -2%; } 82%, 100% { --balayage: 104%; } }
@keyframes holo-eclat { 0% { background-position: 100% 0; } 55%, 100% { background-position: 0 0; } }
@keyframes holo-impulsion { 0% { opacity: 0; } 18% { opacity: .6; } 100% { opacity: 0; } }
@keyframes holo-saut {
  0% { transform: translateY(0); } 30% { transform: translateY(-22px); }
  58% { transform: translateY(0); } 76% { transform: translateY(-6px); } 100% { transform: translateY(0); }
}

/* Mouvement réduit : image fixe, lueur statique ; le faisceau reste à mi-hauteur. */
@media (prefers-reduced-motion: reduce) {
  .holo, .holo * { animation: none !important; transition: none !important; }
  .holo[data-etat="scan"] .holo__corps { --balayage: 54%; }
}

:root.light .sentinelle-demo { background: var(--background); }

@media (max-width: 900px) {
  .sentinelle-demo { grid-template-columns: 1fr; padding-top: 36px; }
  .sentinelle-demo__texte { max-width: none; }
  .sentinelle { order: -1; height: 62vh; min-height: 380px; }
}
@media (max-width: 480px) {
  .sentinelle-demo__commandes { grid-template-columns: 1fr; }
  .sentinelle { height: 440px; min-height: 0; }
}

/* La section colle à l'en-tête, comme le héros de l'accueil. */
main:has(> .sentinelle-demo:first-child) { padding-top: 0; }