/* ==========================================================================
   GUIDE DE PREMIÈRE UTILISATION — habillage
   START ON agency

   Le voile sombre couvre l'écran, et le « trou » est simplement un cadre
   dont l'ombre portée déborde à l'infini : c'est ce qui découpe la fenêtre
   claire autour de l'élément expliqué, sans masque ni SVG.
   ========================================================================== */

.gd-voile{
  position:fixed; inset:0; z-index:9600; background:rgba(4,7,13,.30);
  animation:gd-entre .25s ease both;
}
/* Pas de flou, et un voile léger : le joueur doit voir l'écran entier et
   comprendre à quoi correspond ce que la bulle lui montre. Le cadre doré,
   sa lueur et un léger battement suffisent à attirer l'œil. */
.gd-trou{
  position:fixed; z-index:9601; border-radius:14px; pointer-events:none;
  box-shadow:0 0 0 9999px rgba(4,7,13,.22), 0 0 0 3px #e2b24a,
             0 0 0 7px rgba(226,178,74,.22), 0 0 40px -2px rgba(226,178,74,.9);
  animation:gd-entre .25s ease both, gd-bat 1.8s ease-in-out .3s infinite;
  transition:left .3s cubic-bezier(.16,1,.3,1), top .3s cubic-bezier(.16,1,.3,1),
             width .3s cubic-bezier(.16,1,.3,1), height .3s cubic-bezier(.16,1,.3,1),
             opacity .2s ease;
  animation:gd-entre .25s ease both;
}
/* Le trou porte déjà l'assombrissement dans son ombre portée. Le voile ne
   sert donc qu'aux étapes sans cible ; sinon les deux se cumuleraient et
   l'écran deviendrait illisible. C'est le script qui bascule cette classe. */
.gd-voile.gd-efface{ opacity:0 }

.gd-bulle{
  position:fixed; z-index:9602; width:340px; max-width:calc(100vw - 24px);
  padding:18px 18px 14px; border-radius:18px;
  background:#141926; color:#eef2f9; border:1px solid rgba(255,255,255,.16);
  box-shadow:0 26px 60px -26px #000, 0 0 0 1px rgba(226,178,74,.16) inset;
  font-family:"Manrope", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size:15px; line-height:1.55;
  animation:gd-bulle-entre .32s cubic-bezier(.16,1,.3,1) both;
}
@keyframes gd-entre{ from{ opacity:0 } to{ opacity:1 } }
@keyframes gd-bat{
  0%,100%{ box-shadow:0 0 0 9999px rgba(4,7,13,.22), 0 0 0 3px #e2b24a, 0 0 0 7px rgba(226,178,74,.22), 0 0 40px -2px rgba(226,178,74,.9) }
  50%{ box-shadow:0 0 0 9999px rgba(4,7,13,.22), 0 0 0 3px #f5d98a, 0 0 0 11px rgba(226,178,74,.10), 0 0 54px 2px rgba(226,178,74,.75) }
}
@keyframes gd-bulle-entre{
  from{ opacity:0; transform:translateY(10px) scale(.97) }
  to  { opacity:1; transform:none }
}
.gd-bulle.gd-centre{ animation:gd-centre-entre .34s cubic-bezier(.16,1,.3,1) both }
@keyframes gd-centre-entre{
  from{ opacity:0; transform:translate(-50%,-46%) scale(.95) }
  to  { opacity:1; transform:translate(-50%,-50%) }
}

/* la petite pointe vers l'élément expliqué */
.gd-bulle::before{
  content:""; position:absolute; left:50%; margin-left:-8px;
  border:8px solid transparent; pointer-events:none;
}
.gd-bulle.gd-dessous::before{ top:-16px; border-bottom-color:#141926 }
.gd-bulle.gd-dessus::before { bottom:-16px; border-top-color:#141926 }
.gd-bulle.gd-centre::before { display:none }

.gd-fermer{
  position:absolute; top:10px; right:10px; width:30px; height:30px;
  display:grid; place-items:center; border-radius:9px; cursor:pointer;
  background:transparent; border:0; color:rgba(255,255,255,.42); font-size:14px;
  font-family:inherit; transition:color .2s, background .2s;
}
.gd-fermer:hover{ color:#fff; background:rgba(255,255,255,.08) }

.gd-num{
  font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  color:#e2b24a; font-weight:800; margin-bottom:6px;
}
.gd-titre{
  font-family:"Bricolage Grotesque", "Manrope", Inter, sans-serif;
  font-size:1.12rem; font-weight:700; margin:0 0 6px; line-height:1.22;
  padding-right:26px; text-wrap:balance;
}
.gd-texte{ margin:0 0 15px; color:rgba(238,242,249,.76); font-size:.92rem }
.gd-texte b{ color:#fff; font-weight:700 }
.gd-texte em{ font-style:normal; color:#e2b24a; font-weight:700 }

.gd-pied{ display:flex; align-items:center; justify-content:space-between; gap:12px }
.gd-points{ display:flex; gap:5px; flex-wrap:wrap; max-width:120px }
.gd-points i{
  width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.2);
  transition:background .25s, transform .25s;
}
.gd-points i.fait{ background:rgba(226,178,74,.45) }
.gd-points i.on{ background:#e2b24a; transform:scale(1.5) }

.gd-actions{ display:flex; align-items:center; gap:8px }
.gd-passer{
  background:none; border:0; cursor:pointer; font-family:inherit;
  font-size:.84rem; color:rgba(238,242,249,.5); padding:8px 4px;
  transition:color .2s;
}
.gd-passer:hover{ color:#eef2f9 }
.gd-passer[hidden]{ display:none }
.gd-suivant{
  padding:11px 20px; border-radius:999px; border:0; cursor:pointer; font-family:inherit;
  font-size:.88rem; font-weight:800; background:#e2b24a; color:#1a1305;
  transition:transform .15s ease, box-shadow .24s ease;
}
.gd-suivant:hover{ box-shadow:0 0 26px -6px #e2b24a; transform:translateY(-1px) }
.gd-suivant:active{ transform:scale(.96) }
.gd-suivant:focus-visible, .gd-passer:focus-visible, .gd-fermer:focus-visible{
  outline:2px solid #3fe0ff; outline-offset:2px;
}

.gd-part{ animation:gd-sort .24s ease both !important }
@keyframes gd-sort{ to{ opacity:0; transform:scale(.97) } }

/* pendant le guide, rien ne défile derrière */
body.gd-actif{ overflow:hidden }

/* le bouton « Revoir le guide », posé par chaque espace */
.gd-revoir{
  display:inline-flex; align-items:center; gap:7px; padding:8px 14px;
  border-radius:999px; cursor:pointer; font-family:inherit; font-size:.8rem; font-weight:700;
  border:1px solid rgba(226,178,74,.45); background:rgba(226,178,74,.1); color:#e2b24a;
  transition:transform .15s ease, background .2s, box-shadow .24s;
}
.gd-revoir:hover{ background:rgba(226,178,74,.18); transform:translateY(-1px);
                  box-shadow:0 0 20px -8px #e2b24a }
.gd-revoir:active{ transform:scale(.96) }

@media (max-width:480px){
  .gd-bulle{ padding:16px 15px 12px; font-size:14px }
  .gd-titre{ font-size:1.04rem }
  .gd-suivant{ padding:10px 16px }
}
@media (prefers-reduced-motion: reduce){
  .gd-voile, .gd-trou, .gd-bulle, .gd-part{ animation:none !important }
  .gd-trou{ transition:none !important }
}