/* Giri Thérapia — charte GOLD « marbre lumineux » (motif signature Giri, jamais de fond sombre hors salle visio) */
:root {
  --clair:#fdfaf2; --or:#c9971b; --or-vif:#e8b93a; --or-lum:#f7e3a4; --or-profond:#8a6512;
  --or-texte:#7a5a10; --encre:#221d15; --texte:#443c31; --doux:#6a6154;
  --carte:#ffffff; --ombre:0 12px 44px rgba(138,101,18,.12);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: system-ui, 'Segoe UI', sans-serif; color: var(--texte);
  background:
    radial-gradient(1100px 520px at 85% -8%, rgba(232,185,58,.16), transparent 60%),
    radial-gradient(900px 480px at -10% 108%, rgba(201,151,27,.10), transparent 55%),
    var(--clair);
}
h1,h2,h3 { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600; color: var(--encre); }
h1 b, h1 em, h2 b {
  font-style: normal;
  background: linear-gradient(100deg, var(--or-profond), var(--or-vif) 45%, var(--or-lum) 55%, var(--or));
  background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: glisse 6s ease-in-out infinite;
}
@keyframes glisse { 0%,100% { background-position: 0% 0; } 50% { background-position: 100% 0; } }
.wrap { max-width: 1080px; margin: 0 auto; padding: 24px; }
.brand { display:flex; align-items:center; gap:12px; font-family:'Cormorant Garamond', Georgia, serif; font-size:1.5rem; font-weight:600; color: var(--encre); }
.brand .orbe { width:34px; height:34px; border-radius:50%; filter: drop-shadow(0 0 14px rgba(232,185,58,.65)); animation: flotte 4s ease-in-out infinite; }
.card { background: var(--carte); border: 1px solid rgba(201,151,27,.16); border-radius: 20px; box-shadow: var(--ombre); padding: 28px; }
.btn {
  display:inline-block; border:none; cursor:pointer; border-radius: 12px; padding: 13px 26px;
  font-size: 1rem; font-weight: 700; color:#3a2c08; position:relative; overflow:hidden;
  background: linear-gradient(135deg, var(--or-lum), var(--or-vif) 45%, var(--or));
  box-shadow: 0 6px 20px rgba(201,151,27,.35); transition: transform .15s, box-shadow .15s;
}
.btn::after { content:''; position:absolute; top:0; left:-70%; width:45%; height:100%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.55), transparent); animation: sheen 3.2s infinite; }
@keyframes sheen { 0% { left:-70%; } 55%,100% { left:130%; } }
.btn:hover { transform: translateY(-1px); box-shadow: 0 10px 28px rgba(201,151,27,.5); }
.btn.or { background: linear-gradient(135deg, var(--or-lum), var(--or-vif) 45%, var(--or)); }
.btn.ghost { background:#fff; color:var(--or-texte); border:1.5px solid var(--or); box-shadow:none; }
.btn.ghost::after { display:none; }
.btn.danger { background:#c0564b; color:#fff; }
.btn.danger::after { display:none; }
input, select, textarea { width:100%; padding: 12px 14px; border:1.5px solid #eadfc4; border-radius: 10px; font-size:1rem; background:#fff; color:var(--encre); font-variant-numeric: lining-nums; }
input:focus, textarea:focus { outline:none; border-color: var(--or-vif); box-shadow: 0 0 0 3px rgba(232,185,58,.18); }
label { font-size:.85rem; color:var(--doux); display:block; margin: 12px 0 5px; }
.muted { color:var(--doux); font-size:.9rem; }
.row { display:flex; gap:16px; flex-wrap:wrap; }
.pill { display:inline-block; padding:3px 12px; border-radius:999px; font-size:.78rem; font-weight:600; font-variant-numeric: lining-nums; }
.pill.live { background:#fdf1cf; color:var(--or-profond); }
.pill.done { background:#f1ede2; color:var(--doux); }
.pill.planned { background:#fdf3dd; color:#9a7420; }
/* Salle visio — sombre fonctionnel autour de la vidéo, accents or */
.salle { display:flex; flex-direction:column; height:100vh; background:#171310; }
.videos { flex:1; position:relative; display:flex; align-items:center; justify-content:center; overflow:hidden; }
#remoteVideo { width:100%; height:100%; object-fit:cover; }
#localVideo { position:absolute; bottom:18px; right:18px; width:200px; max-width:28vw; border-radius:14px; box-shadow:0 8px 30px rgba(0,0,0,.5); border:2px solid rgba(232,185,58,.5); }
.toolbar { display:flex; justify-content:center; align-items:center; gap:14px; padding:16px; background:rgba(23,19,16,.97); border-top:1px solid rgba(201,151,27,.25); }
.tb-btn { width:52px; height:52px; border-radius:50%; border:1px solid rgba(232,185,58,.28); cursor:pointer; font-size:1.25rem; background:#2a231b; color:#fff; transition: background .15s; }
.tb-btn:hover { background:#3d3222; }
.tb-btn.off { background:#c0564b; }
.tb-btn.hang { background:#c0564b; width:64px; border:none; }
.rec-dot { display:none; align-items:center; gap:7px; color:#ffb3ab; font-weight:700; font-size:.85rem; letter-spacing:.4px; font-variant-numeric: lining-nums; }
.rec-dot.on { display:flex; }
.rec-dot i { width:10px; height:10px; border-radius:50%; background:#ff5252; animation: pulse 1.2s infinite; }
@keyframes pulse { 50% { opacity:.35; } }
.attente { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; color:#f3ead6; background:radial-gradient(ellipse at center, #2a2318, #171310); }
.attente .orbe { width:84px; height:84px; border-radius:50%; filter: drop-shadow(0 0 34px rgba(232,185,58,.7)); animation: flotte 3s ease-in-out infinite; }
.attente h2 { color:#f7e3a4; }
@keyframes flotte { 50% { transform: translateY(-10px); } }
.bandeau-rec { position:absolute; top:14px; left:50%; transform:translateX(-50%); background:rgba(23,19,16,.72); color:#ffe4c4; border:1px solid rgba(232,185,58,.35); padding:6px 16px; border-radius:999px; font-size:.8rem; display:none; }
.bandeau-rec.on { display:block; }
table { width:100%; border-collapse:collapse; font-variant-numeric: lining-nums; }
td, th { text-align:left; padding:10px 8px; border-bottom:1px solid #f1ead8; font-size:.95rem; }
.modal-bg { position:fixed; inset:0; background:rgba(34,29,21,.5); display:none; align-items:center; justify-content:center; z-index:50; }
.modal-bg.open { display:flex; }
.modal { width:min(480px, 92vw); }
#poussiere { position:fixed; inset:0; pointer-events:none; z-index:1; }
.z2 { position:relative; z-index:2; }
