/* ═══════════════════════════════════════════════════════════
   GAMIFY.CSS — Couche "mode jeu" pour Mon Projet de Vie
   Additive uniquement : ne modifie aucune règle existante,
   n'ajoute que des classes préfixées .gm-
═══════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────
   0. Utilitaires de visibilité (pilotage du "une question à la fois")
─────────────────────────────────────────────────────────── */
.gm-on .gm-step{ display:none !important; }
.gm-on .gm-step.gm-current{
  display:block !important;
  animation:gmCardIn .42s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes gmCardIn{
  from{opacity:0;transform:translateY(18px) scale(.97)}
  to{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  .gm-on .gm-step.gm-current{animation:none}
}

/* Quand le mode jeu est actif, on adoucit visuellement les cartes restées seules */
.gm-on .qcard{ margin-bottom:0; }
.gm-on .section .g2.gm-step{ display:none !important; }
.gm-on .section .g2.gm-step.gm-current{ display:grid !important; }

/* La barre "← Retour / Continuer →" en haut gère déjà toute la navigation
   question par question ET le passage au chapitre suivant ("Terminer ce
   chapitre"). On masque donc les anciens boutons de bas de section en
   mode jeu pour éviter une double navigation source de confusion. */
.gm-on .section.gm-gamified .form-nav.bottom-nav{ display:none !important; }

/* ───────────────────────────────────────────────────────────
   1. HUD — chip XP/niveau/streak dans le header
─────────────────────────────────────────────────────────── */
.gm-hud{
  position:relative; display:flex; align-items:center; gap:6px;
  order:-1;
}
.gm-hud-chip{
  display:flex; align-items:center; gap:7px;
  background:rgba(255,255,255,.12); border:1.5px solid rgba(255,255,255,.22);
  border-radius:99px; padding:5px 10px 5px 5px; cursor:pointer;
  font-family:'Nunito',sans-serif; color:#fff; transition:.2s ease;
}
.gm-hud-chip:hover{ background:rgba(255,255,255,.22); transform:translateY(-1px); }
.gm-lvl-badge{
  width:26px;height:26px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,var(--gold),var(--sun));
  color:var(--navy); font-weight:900; font-size:.72rem;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 8px rgba(232,160,32,.5);
}
.gm-hud-text{ display:flex; flex-direction:column; line-height:1.1; }
.gm-hud-xp{ font-size:.7rem; font-weight:800; color:var(--sun); }
.gm-hud-streak{ font-size:.62rem; font-weight:700; color:rgba(255,255,255,.7); }
.gm-hud-streak.hot{ color:#FF9F43; animation:gmFlicker 1s ease-in-out infinite; }
@keyframes gmFlicker{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}

/* Panneau déroulant */
.gm-panel{
  position:absolute; top:calc(100% + 10px); right:0; z-index:400;
  width:260px; background:#fff; border-radius:var(--r); box-shadow:var(--sh-lg);
  padding:16px; display:none; color:var(--text);
  font-family:'Nunito',sans-serif;
  animation:gmPanelIn .22s cubic-bezier(.34,1.56,.64,1) both;
}
.gm-panel.open{ display:block; }
@keyframes gmPanelIn{ from{opacity:0;transform:translateY(-8px) scale(.96)} to{opacity:1;transform:none} }
.gm-panel h4{ font-size:.85rem; color:var(--navy); margin-bottom:8px; font-weight:900; }
.gm-xp-ring-row{ display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.gm-xp-ring{ width:52px; height:52px; flex-shrink:0; }
.gm-xp-ring circle{ transition:stroke-dashoffset .5s ease; }
.gm-xp-detail{ font-size:.72rem; color:var(--gmid); line-height:1.5; }
.gm-xp-detail b{ color:var(--navy); }
.gm-badges-mini{ display:flex; flex-wrap:wrap; gap:6px; }

.gm-total-progress{ margin-top:14px; }
.gm-total-progress-label{
  display:flex; justify-content:space-between; align-items:baseline;
  font-size:.72rem; font-weight:800; color:var(--gmid); margin-bottom:5px;
}
.gm-total-progress-label span{ color:var(--navy); font-size:.76rem; }
.gm-total-bar{
  height:8px; border-radius:99px; background:#F0F3F8; overflow:hidden;
}
.gm-total-bar-fill{
  height:100%; border-radius:99px; width:0%;
  background:linear-gradient(90deg,var(--gold),var(--mint));
  transition:width .5s cubic-bezier(.34,1.2,.64,1);
}
.gm-badge-mini{
  width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:16px;
  background:var(--gray); filter:grayscale(1) opacity(.4);
  transition:.2s;
}
.gm-badge-mini.earned{
  background:linear-gradient(135deg,var(--gold),var(--sun));
  filter:none; box-shadow:0 2px 8px rgba(232,160,32,.4);
  animation:gmBadgePop .4s cubic-bezier(.34,1.56,.64,1);
}
@keyframes gmBadgePop{ from{transform:scale(0)} to{transform:scale(1)} }
.gm-mode-toggle{
  display:flex; align-items:center; justify-content:space-between;
  margin-top:12px; padding-top:12px; border-top:1px solid var(--gray);
  font-size:.72rem; font-weight:700; color:var(--gmid);
}
.gm-switch{
  position:relative; width:38px; height:21px; border-radius:99px;
  background:var(--gray); cursor:pointer; border:none; flex-shrink:0;
  transition:.2s;
}
.gm-switch::after{
  content:''; position:absolute; top:2px; left:2px; width:17px; height:17px;
  border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.3);
  transition:.2s;
}
.gm-switch.on{ background:var(--teal); }
.gm-switch.on::after{ transform:translateX(17px); }

/* ───────────────────────────────────────────────────────────
   2. Barre de progression interne à la section (points/étapes)
─────────────────────────────────────────────────────────── */
.gm-stepnav{
  display:flex; flex-direction:column; gap:14px; align-items:center;
  margin:0 0 8px;
  /* Toujours visible et atteignable (clavier ou souris) sans avoir à
     scroller : elle reste collée sous le header pendant qu'on répond.
     C'est l'utilisateur qui choisit de descendre voir la suite. */
  position: sticky;
  top: var(--gm-header-h, 64px);
  z-index: 150;
  background: rgba(245,243,255,.92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 14px 10px 10px;
  border-radius: 0 0 16px 16px;
}
@media (max-width: 480px){
  .gm-stepnav{ padding: 10px 6px 8px; gap: 10px; }
}
.gm-dots{ display:flex; gap:6px; flex-wrap:wrap; justify-content:center; max-width:400px; }
.gm-dot{
  width:8px; height:8px; border-radius:50%; background:var(--gray);
  transition:.25s; cursor:pointer; flex-shrink:0;
}
.gm-dot.done{ background:var(--mint); }
.gm-dot.current{ background:var(--gold); width:22px; border-radius:99px; }
.gm-stepnav-actions{ display:flex; gap:10px; width:100%; justify-content:center; }
.gm-btn-next{
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 30px; border-radius:99px; border:none;
  background:linear-gradient(135deg,var(--teal),var(--mint)); color:#fff;
  font-family:'Nunito',sans-serif; font-weight:900; font-size:.92rem;
  cursor:pointer; transition:.2s; box-shadow:0 6px 18px rgba(26,140,124,.3);
}
.gm-btn-next:hover{ transform:translateY(-2px); box-shadow:0 8px 24px rgba(26,140,124,.45); }
.gm-btn-next[disabled]{ opacity:.4; cursor:not-allowed; transform:none; box-shadow:none; }
.gm-btn-back{
  display:inline-flex; align-items:center; gap:6px;
  padding:13px 18px; border-radius:99px; border:2px solid var(--gray);
  background:#fff; color:var(--gmid);
  font-family:'Nunito',sans-serif; font-weight:800; font-size:.86rem;
  cursor:pointer; transition:.2s;
}
.gm-btn-back:hover{ border-color:var(--blue); color:var(--blue); }
.gm-hint-skip{ font-size:.72rem; color:var(--gmid); text-align:center; }

/* ───────────────────────────────────────────────────────────
   3. Réactions / feedback immédiat sur une réponse
─────────────────────────────────────────────────────────── */
.gm-xp-float{
  position:absolute; z-index:60; pointer-events:none;
  font-family:'Fredoka One',cursive; font-size:1rem; color:var(--gold);
  text-shadow:0 1px 3px rgba(0,0,0,.15);
  animation:gmFloatUp 1s ease-out forwards;
}
@keyframes gmFloatUp{
  0%{opacity:0; transform:translateY(0) scale(.7)}
  15%{opacity:1; transform:translateY(-6px) scale(1.1)}
  100%{opacity:0; transform:translateY(-46px) scale(1)}
}
.qcard.gm-answered{ animation:gmPulseGood .5s ease; }
@keyframes gmPulseGood{
  0%{box-shadow:0 0 0 0 rgba(78,232,192,.55)}
  100%{box-shadow:0 0 0 16px rgba(78,232,192,0)}
}
@media (prefers-reduced-motion:reduce){
  .gm-xp-float, .qcard.gm-answered{ animation:none; }
}

/* Combo toast */
.gm-combo{
  position:fixed; top:18%; left:50%; transform:translate(-50%,-10px);
  background:linear-gradient(135deg,#FF6B8A,#FFD060);
  color:#fff; font-family:'Fredoka One',cursive; font-size:1.15rem;
  padding:12px 26px; border-radius:99px; z-index:9500;
  box-shadow:0 10px 30px rgba(255,107,138,.4);
  opacity:0; animation:gmComboPop 1.6s cubic-bezier(.34,1.56,.64,1) forwards;
}
@keyframes gmComboPop{
  0%{opacity:0; transform:translate(-50%,10px) scale(.7)}
  15%{opacity:1; transform:translate(-50%,-10px) scale(1.08)}
  25%{transform:translate(-50%,-10px) scale(1)}
  80%{opacity:1}
  100%{opacity:0; transform:translate(-50%,-30px) scale(.95)}
}

/* ───────────────────────────────────────────────────────────
   4. Level-up — plein écran
─────────────────────────────────────────────────────────── */
.gm-levelup-overlay{
  position:fixed; inset:0; z-index:9600; display:none;
  align-items:center; justify-content:center;
  background:radial-gradient(circle at 50% 40%, rgba(124,58,237,.92), rgba(13,31,53,.96));
  backdrop-filter:blur(6px);
}
.gm-levelup-overlay.open{ display:flex; animation:gmFadeIn .25s ease; }
@keyframes gmFadeIn{ from{opacity:0} to{opacity:1} }
.gm-levelup-card{ text-align:center; color:#fff; padding:20px; }
.gm-levelup-emoji{ font-size:76px; display:block; animation:gmLevelBounce .7s ease infinite; }
@keyframes gmLevelBounce{ 0%,100%{transform:translateY(0) rotate(-4deg)} 50%{transform:translateY(-16px) rotate(4deg)} }
.gm-levelup-card h2{
  font-family:'Fredoka One',cursive; font-size:2.1rem; margin:10px 0 6px;
  background:linear-gradient(135deg,#FFD060,#FF6FD8);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.gm-levelup-card p{ font-size:.95rem; color:rgba(255,255,255,.85); max-width:340px; margin:0 auto 22px; }
.gm-levelup-card button{
  padding:13px 30px; border-radius:99px; border:none;
  background:linear-gradient(135deg,var(--gold),var(--sun)); color:var(--navy);
  font-family:'Nunito',sans-serif; font-weight:900; font-size:.92rem; cursor:pointer;
}

/* Badge (fin de chapitre) — plein écran, plus léger que level-up */
.gm-badge-overlay{
  position:fixed; inset:0; z-index:9550; display:none;
  align-items:center; justify-content:center;
  background:rgba(13,31,53,.75); backdrop-filter:blur(4px);
}
.gm-badge-overlay.open{ display:flex; animation:gmFadeIn .25s ease; }
.gm-badge-card{
  background:#fff; border-radius:var(--r-lg); padding:32px 28px; text-align:center;
  max-width:320px; box-shadow:var(--sh-lg);
  animation:gmCardIn .4s cubic-bezier(.34,1.56,.64,1);
}
.gm-badge-card .gm-b-emoji{
  font-size:56px; display:inline-flex; align-items:center; justify-content:center;
  width:96px; height:96px; border-radius:50%;
  background:linear-gradient(135deg,var(--gold),var(--sun));
  box-shadow:0 8px 24px rgba(232,160,32,.4); margin-bottom:14px;
}
.gm-badge-card h3{ font-family:'Playfair Display',serif; color:var(--navy); font-size:1.2rem; margin-bottom:6px; }
.gm-badge-card p{ color:var(--gmid); font-size:.85rem; margin-bottom:18px; line-height:1.5; }
.gm-badge-card button{
  padding:11px 24px; border-radius:99px; border:none;
  background:linear-gradient(135deg,var(--teal),var(--mint)); color:#fff;
  font-family:'Nunito',sans-serif; font-weight:800; cursor:pointer;
}

/* ───────────────────────────────────────────────────────────
   5. Interstitiel de chapitre (chap-banner devient une étape jeu)
─────────────────────────────────────────────────────────── */
.gm-step.gm-interstitial{ text-align:center; padding:36px 20px; }
.gm-step.gm-interstitial .chap-banner{
  flex-direction:column; text-align:center; padding:28px 22px;
  margin-bottom:18px;
}
.gm-step.gm-interstitial .cb-ico{ font-size:40px; margin-bottom:8px; }

/* ───────────────────────────────────────────────────────────
   6. Petits riffs sur les widgets existants (choix, sliders)
─────────────────────────────────────────────────────────── */
.gm-on .radio-card.sel,
.gm-on .cadran-card.sel,
.gm-on .maslow-item.sel{
  animation:gmChoicePick .32s cubic-bezier(.34,1.56,.64,1);
}
@keyframes gmChoicePick{
  0%{transform:scale(1)}
  40%{transform:scale(1.05)}
  100%{transform:scale(1)}
}
.gm-on input[type=range]{ height:8px; }
.gm-mascot{
  position:fixed; bottom:18px; left:16px; z-index:400;
  max-width:230px; background:#fff; border-radius:var(--r);
  padding:10px 14px; box-shadow:var(--sh-lg); font-size:.78rem;
  color:var(--navy); font-weight:700; display:none; gap:8px; align-items:flex-start;
  animation:gmCardIn .3s cubic-bezier(.34,1.56,.64,1);
}
.gm-mascot.show{ display:flex; }
.gm-mascot .gm-m-face{ font-size:22px; flex-shrink:0; }

@media(max-width:480px){
  .gm-panel{ width:220px; right:-10px; }
  .gm-mascot{ left:10px; right:10px; max-width:none; bottom:14px; }
}