/* =====================================================================
   free_training.css — Thème crème / beige / doré de l'espace gratuit
   (formation_gratuite*.php). Contours dorés + lueur, repris de l'anneau
   doré de GH TV (gh-tv-src/public/assets/css/site.css, .gold-ring).
   ===================================================================== */
:root {
  --cream:#fbf6ea; --cream-2:#fffdf7; --beige:#f3e6cc; --sand:#e8d5ae;
  --gold:#d4a437; --gold-l:#f6d77a; --gold-xl:#fff1c1; --gold-d:#8a6115; --gold-dd:#6b4a0e;
  --ink:#3c2a19; --muted:#8a7558; --line:#ecdcb8;
  --ok:#3f8f4f; --ok-bg:#e9f4e3; --live:#c0392b;
  --gold-border: linear-gradient(135deg,#f6d77a,#b8862b 30%,#fff1c1 50%,#d4a437 70%,#8a6115);
  --glow: 0 0 0 1px rgba(246,215,122,.35) inset, 0 0 22px rgba(212,164,55,.20), 0 12px 32px rgba(138,97,21,.12);
  --glow-hover: 0 0 0 1px rgba(246,215,122,.55) inset, 0 0 34px rgba(212,164,55,.38), 0 16px 40px rgba(138,97,21,.18);
}
html, body { background:var(--cream); }
body { color:var(--ink); font-family:'Tajawal',sans-serif;
  background:
    radial-gradient(1200px 500px at 85% -10%, rgba(246,215,122,.22), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(212,164,55,.14), transparent 60%),
    var(--cream); background-attachment:fixed; }

/* Cadre doré : contour en dégradé or + lueur */
.gold-frame { position:relative; border:1.5px solid transparent; border-radius:20px;
  background: linear-gradient(180deg,var(--cream-2),#f9fbf6) padding-box, var(--gold-border) border-box;
  box-shadow:var(--glow); transition:transform .2s ease, box-shadow .25s ease; }
a.gold-frame:hover, .gold-frame.lift:hover { transform:translateY(-3px); box-shadow:var(--glow-hover); }

/* Anneau doré animé autour des photos (comme GH TV) */
.gold-ring { position:relative; flex:none; width:104px; height:104px; border-radius:50%; padding:4px; isolation:isolate;
  background: conic-gradient(from var(--gold-a,0deg), #7a5410, #f6d77a, #fff6cf, #d4a437, #8a6115, #f3cf6a, #fffbe6, #b8862b, #7a5410);
  box-shadow: 0 0 0 1px rgba(255,215,120,.35), 0 0 18px rgba(246,205,98,.45), 0 0 42px rgba(212,164,55,.25);
  animation: goldSpin 6s linear infinite; }
.gold-ring::after { content:""; position:absolute; inset:-6px; border-radius:50%; z-index:-1;
  background: radial-gradient(closest-side, rgba(246,205,98,.40), transparent 75%); filter:blur(6px); }
.gold-ring img { width:100%; height:100%; border-radius:50%; object-fit:cover; display:block; border:2px solid var(--cream-2); background:var(--beige); }
@property --gold-a { syntax:"<angle>"; inherits:false; initial-value:0deg; }
@keyframes goldSpin { to { --gold-a:360deg; } }

/* Boutons et pastilles dorés */
.gold-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; border:none; cursor:pointer; text-decoration:none;
  font:inherit; font-weight:800; color:#2b1d07; padding:11px 22px; border-radius:14px;
  background: linear-gradient(135deg,#f6d77a,#d4a437 55%,#b8862b);
  box-shadow: 0 0 0 1px rgba(255,241,193,.7) inset, 0 6px 18px rgba(184,134,43,.35); transition:transform .15s, box-shadow .2s, filter .2s; }
.gold-btn:hover { transform:translateY(-2px); filter:brightness(1.05); box-shadow:0 0 0 1px rgba(255,241,193,.9) inset, 0 0 24px rgba(246,205,98,.55), 0 10px 22px rgba(184,134,43,.35); }
.ghost-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; text-decoration:none; cursor:pointer; font:inherit; font-weight:700;
  color:var(--gold-d); padding:10px 20px; border-radius:14px; background:rgba(246,215,122,.14); border:1px solid rgba(212,164,55,.45); transition:background .2s, box-shadow .2s; }
.ghost-btn:hover { background:rgba(246,215,122,.28); box-shadow:0 0 18px rgba(212,164,55,.25); }
.gold-pill { display:inline-block; padding:.2em .9em; border-radius:999px; font-size:.8rem; font-weight:700; color:#2b1d07;
  background:linear-gradient(135deg,#f6d77a,#d4a437); box-shadow:0 0 12px rgba(246,205,98,.45); }
.gold-pill.soft { color:var(--gold-d); background:rgba(246,215,122,.18); border:1px solid rgba(212,164,55,.4); box-shadow:none; }

/* Logo de l'académie avec halo doré */
.ft-logo { display:inline-flex; align-items:center; justify-content:center; text-decoration:none; }
.ft-logo img { height:64px; width:auto; display:block; filter:drop-shadow(0 0 10px rgba(246,205,98,.55)) drop-shadow(0 2px 4px rgba(107,74,14,.25)); }

/* Titre doré */
.gold-title { background:linear-gradient(180deg,#8a6115,#b8862b 45%,#6b4a0e); -webkit-background-clip:text; background-clip:text; color:transparent; }
.gold-sep { height:1px; border:none; margin:14px 0; background:linear-gradient(90deg,transparent,rgba(212,164,55,.6),transparent); }

/* Barre de progression dorée */
.gbar { height:9px; background:#f1e4c6; border-radius:999px; overflow:hidden; box-shadow:0 0 0 1px rgba(212,164,55,.18) inset; }
.gbar i { display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,#b8862b,#f6d77a 60%,#fff1c1); box-shadow:0 0 10px rgba(246,205,98,.6); }

@media (prefers-reduced-motion: reduce) { .gold-ring { animation:none; } }