/*
style.css — WebAR V1 (clean)
- Overlay : halo vivant (décalé vers le haut) + panel sobre + lueur au sol
- Bouton : statique (pas de shine/respiration)
- UI scanner : reticle simple, sans glow
- Pages légales : fond clair, styles unifiés
- Z-index : overlay 99999 / footer 100001
*/

/* ========================= PALETTE & TOKENS ========================= */
:root{
  /* Brand */
  --inoa-bg: #0d1216;
  --inoa-txt: #ffffff;
  --inoa-accent: #d8b56c;

  /* FX overlay */
  --magic-1: rgba(216,181,108,.55); /* ≈ var(--inoa-accent) */
  --magic-2: rgba(255,198,0,.35);   /* #FFC600 */
  --magic-3: rgba(255,253,245,.28); /* #FFFDF5 */

  /* Aura placement */
  --aura-center-y: 22%;  /* déplace le cœur du halo vers le haut (vs 50%) */
  --aura-opacity: .38;   /* atténuation globale du halo */

  /* Legal */
  --legal-bg: #fffdf5;
  --legal-txt: #06023c;
  --legal-muted: #4c4a70;
  --legal-border: #eae6da;
}

/* ============================== RESET BASE ============================== */
html, body { height:100%; margin:0; overflow:hidden; }
body { font-family: Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif; color:var(--inoa-txt); background:var(--inoa-bg); }
h1, h2, h3, .brand-title, .brand-tagline { font-family:"Raleway", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; }

/* Scène & vidéo MindAR plein écran */
a-scene, canvas.a-canvas,
.mindar-container, .mindar-container video, .mindar-video {
  position: fixed !important; inset: 0 !important;
  width: 100vw !important; height: 100vh !important;
}
.mindar-video, .mindar-container video { object-fit: cover !important; background:#000 !important; }

/* Patch A: s'assurer que la caméra/scène reste sous l'overlay */
.mindar-container,
.mindar-container video,
.mindar-video,
canvas.a-canvas,
a-scene {
  z-index: 1 !important;
}

/* Masque l’UI MindAR par défaut */
.mindar-ui-overlay, .mindar-ui-scanning, .mindar-ui-loading, .mindar-ui-processing { display:none !important; }

/* =============================== OVERLAY =============================== */
#overlay{
  position: fixed; inset: 0; z-index: 2147483647 !important;
  /* Masqué par défaut; l'app JS affichera l'overlay quand nécessaire */
  display: none; place-items: center; text-align:center;
  background: #0d1216;
  -webkit-tap-highlight-color: transparent; user-select: none; cursor: pointer;
  isolation: isolate; /* calques FX derrière le contenu */
}

/* Helper: si nécessaire, JS peut ajouter la classe .visible pour forcer l'affichage */
#overlay.visible { display: grid !important; }
/* Halo vivant (déplacé vers le haut) + zone centrale assombrie pour éviter la “lumière sur le bouton” */
#overlay::before{
  content:""; position:fixed; inset:-20%; z-index:0; pointer-events:none;
  background:
    /* zone calme au centre (dim) */
    radial-gradient(22% 20% at 50% 58%, rgba(13,18,22,.45) 0%, transparent 70%),
    /* halos principaux déplacés vers le haut */
    radial-gradient(60% 60% at 50% var(--aura-center-y), var(--magic-1) 0%, transparent 60%),
    radial-gradient(45% 45% at 18% 18%, var(--magic-2) 0%, transparent 62%),
    radial-gradient(50% 50% at 82% 24%, rgba(132,155,255,.22) 0%, transparent 60%);
  filter: blur(42px) saturate(115%);
  opacity: var(--aura-opacity);
  animation: fx-breathe 6s ease-in-out infinite alternate, fx-drift 18s linear infinite;
}
/* Contenu overlay au-dessus des FX */
#overlay > *{ position:relative; z-index:2; }

/* Panneau */
#overlay .panel{
  max-width: min(92vw, 620px);
  margin: 0 40px;
  text-align: center; padding: 24px 28px; border-radius: 20px;
  background: rgba(13,18,22, 0.55);
  border: 1px solid rgba(216,181,108, 0.22);
  box-shadow: 0 12px 40px rgba(0,0,0,0.35);
  backdrop-filter: blur(6px);
}
/* Lueur douce “au sol” sous le panel */
#overlay .panel::after{
  content:""; position:absolute; left:8%; right:8%; bottom:-28px; height:46px;
  border-radius:50%;
  background: radial-gradient(50% 60% at 50% 40%, var(--magic-2), transparent 70%);
  filter: blur(14px); opacity:.45; pointer-events:none;
  animation: fx-ground 5.4s ease-in-out infinite;
}

/* Typo overlay */
#overlay h1 { margin:0 0 30px; font-size:clamp(20px, 5.2vw, 26px); letter-spacing:.06em; text-transform:uppercase; font-weight:800; color:var(--inoa-txt); }
#overlay p  { margin:0; font-size:clamp(13px, 3.4vw, 15px); color:var(--inoa-txt); opacity:.85; }
#overlay .brand-tagline{ margin:0 0 12px; font-size:clamp(14px, 3.8vw, 16px); font-weight:400; color:rgba(255,255,255,.85); }
#overlay .brand-sub{ margin:0 0 16px; font-size:clamp(13px, 3.4vw, 15px); color:rgba(255,255,255,.82); }
#overlay .brand-sub strong{ color:var(--inoa-txt); font-weight:500; }

/* Wrapper pour empêcher le “saut” au tap */
#overlay .ov-wrap{ display:grid; justify-items:center; gap:20px; }

/* Steps */
#overlay .steps{ list-style:none; margin:16px 0 0; padding:0; text-align:left; }
#overlay .steps li{ display:flex; align-items:center; gap:10px; margin:10px 0; font-size:.95rem; color:#fff; line-height:1.4; }
#overlay .steps .num{
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; border-radius:50%; background:#fff; color:#0d1216;
  font-weight:700; font-size:.8rem; flex-shrink:0;
}

/* Bouton Démarrer — statique */
#overlay .overlay-actions{ margin-top:18px; text-align:center; }
#overlay .overlay-btn{
  font:700 14px/1 "Raleway", sans-serif; text-transform:uppercase; letter-spacing:.04em;
  padding:12px 18px; border-radius:999px; border:none; cursor:pointer;
  background:#ffffff; color:#0d1216; box-shadow:0 6px 20px rgba(0,0,0,.2);
  -webkit-tap-highlight-color:transparent;
}
#overlay .overlay-btn:active{ transform: translateY(1px); }

/* Message de chargement — amélioré (spinner inline avant le texte) */
#overlay .loading-msg{
  margin-top: 8px;
  font-size: clamp(13px, 3.2vw, 15px);
  color: var(--inoa-txt);
  opacity: .9;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
}
#overlay .loading-msg::before{
  content: "";
  width: 14px; height: 14px;
  border: 2px solid rgba(255,253,245,.25);
  border-top-color: #FFC600;
  border-radius: 50%;
  animation: ar-spin 800ms linear infinite;
}

/* ============================== CTA FLOTTANT ============================== */
.cta.hidden{ display:none; }
#cta{ position:fixed; left:50%; transform:translateX(-50%); top:20%; z-index:20; }
#cta-btn{
  font:700 16px/1.1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  padding:12px 16px; border:1px solid rgba(255,255,255,.35); border-radius:999px;
  color:#0d1216; background:#fff; box-shadow:0 6px 20px rgba(0,0,0,.18); backdrop-filter:blur(6px);
}
#cta-btn:hover{ background:#f7f7f7; }
#cta-btn:active{ transform: translateY(1px); }

/* ============================== UI SCANNER ============================== */
#ar-guide{
  position: fixed; inset: 0; z-index: 100000; pointer-events: none;
  display:grid; place-items:center; transition:opacity 200ms ease;
}
#ar-guide.hidden { opacity: 0; visibility: hidden; }
#ar-guide .guide-wrap{ display:grid; gap:16px; justify-items:center; }
#ar-guide .scanner{ position:relative; width:min(54vmin, 320px); height:min(54vmin, 320px); }

/* Reticle simple (sans glow/anim) */
#ar-guide .reticle{
  position:absolute; inset:0; border-radius:16px; opacity:.9;
  background:
    linear-gradient(#FFFDF5, #FFFDF5) left top / 20% 2px no-repeat,
    linear-gradient(#FFFDF5, #FFFDF5) left top / 2px 20% no-repeat,
    linear-gradient(#FFFDF5, #FFFDF5) right top / 20% 2px no-repeat,
    linear-gradient(#FFFDF5, #FFFDF5) right top / 2px 20% no-repeat,
    linear-gradient(#FFFDF5, #FFFDF5) left bottom / 20% 2px no-repeat,
    linear-gradient(#FFFDF5, #FFFDF5) left bottom / 2px 20% no-repeat,
    linear-gradient(#FFFDF5, #FFFDF5) right bottom / 20% 2px no-repeat,
    linear-gradient(#FFFDF5, #FFFDF5) right bottom / 2px 20% no-repeat;
}

/* Cadre pulse (retour visuel léger pendant le scan) */
#ar-guide .pulse{
  position:absolute; inset:8%; border-radius:12px;
  border:1px solid #FFFDF5; opacity:.55;
  animation: guide-pulse 1500ms ease-in-out infinite;
}
#ar-guide .guide-text{
  text-align:center; color:#FFFDF5; text-shadow:0 1px 8px rgba(0,0,0,.45);
  max-width:90vw; font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}
#ar-guide .guide-text .t{ font-weight:700; font-size:clamp(16px, 3.8vw, 20px); margin-bottom:4px; }
#ar-guide .guide-text .s{ font-weight:500; font-size:clamp(13px, 3.2vw, 16px); opacity:.9; }

@keyframes guide-pulse{
  0% { transform:scale(.98); opacity:.45; }
  50%{ transform:scale(1.02); opacity:.75; }
  100%{ transform:scale(.98); opacity:.45; }
}

/* ============================== PAGES LÉGALES ============================== */
html.legal-page, html.legal-page body{ background:var(--legal-bg); color:var(--legal-txt); overflow:auto; }
html.legal-page a{ color:inherit; }
html.legal-page header{
  padding:24px 16px; border-bottom:1px solid var(--legal-border);
  background:#fff; position:sticky; top:0; z-index:10;
}
html.legal-page .wrap{ max-width:920px; margin:0 auto; padding:0 8px; }
html.legal-page h1{ margin:0 0 6px; font-size:clamp(22px,3.2vw,30px); }
html.legal-page h2{ margin-top:28px; font-size:clamp(18px,2.6vw,22px); }
html.legal-page h3{ margin-top:22px; font-size:clamp(16px,2.2vw,20px); }
html.legal-page .sub{ color:var(--legal-muted); font-size:14px; }
html.legal-page .updated{ font-size:13px; color:var(--legal-muted); }
html.legal-page nav.toc{ display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; }
html.legal-page nav.toc a{
  text-decoration:none; color:var(--legal-txt);
  border:1px solid var(--legal-border); padding:6px 10px; border-radius:999px; font-size:14px; background:#fff;
}
html.legal-page main{ padding:24px 16px; }
html.legal-page ul{ padding-left:20px; }
html.legal-page code, html.legal-page .mono{
  font-family: ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:90%;
  background:#fff7d1; padding:0 4px; border-radius:4px;
}
html.legal-page .box{
  background:#fff; border:1px solid var(--legal-border); border-radius:12px; padding:16px; margin:12px 0;
}
html.legal-page footer.page-footer{
  border-top:1px solid var(--legal-border); background:#fff; margin-top:32px; padding:16px 0; color:var(--legal-muted);
}

/* ============================== FOOTER LÉGAL ============================== */
footer.legal-footer{
  position:fixed; left:0; right:0; bottom:max(12px, env(safe-area-inset-bottom));
  z-index:100001; display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:8px 10px 6px; text-align:center; background:transparent; backdrop-filter:blur(2px);
  color:rgba(255,255,255,.60);
}
footer.legal-footer .brand{ font-size:12px; color:rgba(255,255,255,.55); }
footer.legal-footer .legal-link{
  color:rgba(255,255,255,.75); font-size:11px; font-weight:normal; text-decoration:none;
}
footer.legal-footer .legal-link:hover{ text-decoration:underline; }

/* ============================== KEYFRAMES FX ============================== */
@keyframes fx-breathe{ 0%{opacity:.35; transform:scale(1)} 100%{opacity:.55; transform:scale(1.06)} }
@keyframes fx-drift{ 0%{transform:translate3d(0,0,0) rotate(0)} 100%{transform:translate3d(0,-2%,0) rotate(360deg)} }
@keyframes fx-ground{ 0%,100%{opacity:.35; transform:translateY(0) scaleX(1)} 50%{opacity:.55; transform:translateY(2px) scaleX(1.06)} }

/* ============================== ACCESSIBILITÉ ============================== */
@media (prefers-reduced-motion: reduce){
  #overlay::before, #overlay .panel::after{ animation:none !important; }
  #ar-guide .pulse{ animation:none !important; }
  /* Désactive aussi les spinners si réduction de mouvement */
  #overlay .loading-msg::before,
  #ar-loading .ring{ animation:none !important; }
}

/* ============================== BOOTING STATE ============================== */

/* Mode léger pendant l'init AR */
html.booting #overlay::before {
  /* pas de blur ni anim sur le halo géant */
  filter: none !important;
  animation: none !important;
  opacity: .25;              /* halo très discret */
  background:
    radial-gradient(22% 20% at 50% 58%, rgba(13,18,22,.45) 0%, transparent 70%),
    radial-gradient(60% 60% at 50% var(--aura-center-y), rgba(216,181,108,.25) 0%, transparent 60%);
}

/* Scanner: pulse statique (pas d'anim) */
html.booting #ar-guide .pulse {
  animation: none !important;
  opacity: .4;
}

/* Option: stoppe TOUTES les keyframes du thème pendant l'init */
html.booting *, html.booting *::before, html.booting *::after {
  animation: none !important;
}

/* Laisse tourner uniquement les spinners pendant le boot */
html.booting #overlay .loading-msg::before,
html.booting #ar-loading .ring{
  animation: ar-spin 800ms linear infinite !important;
}

/* ============================== LOADER AR ============================== */
#ar-loading{
  position:fixed; inset:0; display:grid; place-items:center; z-index:100000;
  pointer-events:none; opacity:0; visibility:hidden; transition:opacity .18s ease;
}
#ar-loading.show{ opacity:1; visibility:visible; }

#ar-loading .ring{
  width:54px; height:54px; border:2px solid rgba(255,253,245,.22);
  border-top-color:#FFC600; border-radius:50%;
  margin-top:14px; animation: ar-spin 800ms linear infinite;
}
#ar-loading .wrap{ display:grid; justify-items:center; gap:8px; }

@keyframes ar-bounce { 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-10px) } }
@keyframes ar-spin { to{ transform:rotate(360deg) } }