/* 16/10 — THÈME « YEUX SIGHT » (perso.py, static/theme-yeux.js) : arrière-plan et bandeau aux yeux Sight qui flottent, clignent et suivent le regard. */

/* ---------- arrière-plan animé : un seul canvas fixe sous le contenu ---------- */
.sg-yeux-fond{position:fixed;top:0;bottom:0;right:0;height:100%;z-index:-1;pointer-events:none;opacity:.78}
html.sg-yeux-on{background:radial-gradient(1100px 620px at 70% -8%,#15120a 0%,rgba(6,7,11,0) 62%),#06070b}
html.sg-yeux-on body.sg{background:transparent!important}
html.sg-yeux-on[data-theme=light]{background:radial-gradient(1100px 620px at 70% -8%,#fff3cf 0%,rgba(246,243,234,0) 62%),#f6f3ea}
html.sg-yeux-on[data-theme=light] .sg-yeux-fond{opacity:.9}
/* lisibilité : les grands panneaux restent opaques ; le contenu dense (fil, formulaires, lecteurs) garde sa carte pleine */
html.sg-yeux-on:not([data-theme=light]) main .card{background-color:rgba(10,11,16,.94)}
@media (max-width:760px){.sg-yeux-fond{opacity:.55}}

/* ---------- bandeau Yeux Sight ---------- */
[data-ban-yeux]{position:relative;overflow:hidden;isolation:isolate}
[data-ban-yeux]::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(60% 120% at 50% 50%,transparent 40%,rgba(5,6,10,.55) 100%),linear-gradient(180deg,transparent 55%,rgba(5,6,10,.45))}
[data-ban-yeux="anime"]{background-image:none!important;background-color:#06070b!important}
/* l'avatar qui chevauche le bandeau reste au-dessus des yeux */
.ban[data-ban-yeux]~.prof-in{position:relative;z-index:2}.vt-ban[data-ban-yeux]~.vt-id{z-index:2}
.sg-yeux-ban{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;display:block}
html[data-theme=light] [data-ban-yeux]{background-color:#f6f3ea!important}
html[data-theme=light] [data-ban-yeux="fixe"]{background-image:url(/static/yeux-motif-clair.svg?v=1)!important}
html[data-theme=light] [data-ban-yeux]::after{background:radial-gradient(60% 120% at 50% 50%,transparent 45%,rgba(246,243,234,.6) 100%)}

/* ---------- choix dans « Mon profil » : section « Nouveau · identité Sight » ---------- */
.yx-sec{position:relative;margin:14px 0 10px;padding:16px 18px 18px;border-radius:26px / 22px;border:1px solid rgba(212,166,58,.55);
  background:radial-gradient(70% 90% at 0% 0%,rgba(247,201,72,.14),transparent 60%),linear-gradient(160deg,#0d0e14,#08090d);box-shadow:0 10px 30px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.04)}
.yx-hd{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.yx-new{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:999px;background:linear-gradient(135deg,#ffd84d,#d4a63a);color:#1a1200;
  font:800 11px/1 system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;box-shadow:0 0 0 3px rgba(247,201,72,.15)}
.yx-hd b{font-size:15px;color:#f3f4f6}.yx-hd span.mut{font-size:12.5px}
.yx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.yx-grid.bnd{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.yx-c{position:relative;display:block;cursor:pointer;margin:0!important;border-radius:22px / 18px;overflow:hidden;border:2px solid rgba(212,166,58,.28);background:#06070b;
  transition:border-color .15s,box-shadow .15s,transform .15s}
.yx-c:hover{transform:translateY(-2px);border-color:rgba(247,201,72,.7)}
.yx-c:has(input:checked){border-color:#f7c948;box-shadow:0 0 0 3px rgba(247,201,72,.28),0 10px 26px rgba(212,166,58,.25)}
.yx-c input{position:absolute;opacity:0;pointer-events:none}
.yx-p{position:relative;display:block;aspect-ratio:16/9;background:#06070b url(/static/yeux-motif.svg?v=1) 0 0/240px 160px repeat;overflow:hidden}
.yx-grid.bnd .yx-p{aspect-ratio:15/4}
.yx-p[data-yeux-prev="anime"]{background-image:none}
.yx-p::after{content:"";position:absolute;inset:0;background:radial-gradient(70% 110% at 50% 45%,transparent 45%,rgba(5,6,10,.6) 100%);pointer-events:none}
.yx-l{position:absolute;left:10px;right:10px;bottom:8px;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:8px;color:#fff;font:700 12.5px/1.2 system-ui,sans-serif;text-shadow:0 1px 4px #000}
.yx-l em{font-style:normal;font-weight:800;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;padding:3px 8px;border-radius:999px;background:rgba(6,7,11,.75);border:1px solid rgba(247,201,72,.55);color:#f7c948}
.yx-c:has(input:checked) .yx-l::before{content:"✓";display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:#f7c948;color:#111;font-size:12px;margin-right:6px;text-shadow:none}
.yx-l b{flex:1;display:flex;align-items:center}
html[data-theme=light] .yx-sec{background:radial-gradient(70% 90% at 0% 0%,rgba(247,201,72,.22),transparent 60%),#fff;border-color:#e3c77a;box-shadow:0 6px 20px rgba(15,23,42,.08)}
html[data-theme=light] .yx-hd b{color:#0f172a}
html[data-theme=light] .yx-c{background:#f6f3ea}
html[data-theme=light] .yx-p{background-color:#f6f3ea;background-image:url(/static/yeux-motif-clair.svg?v=1)}
html[data-theme=light] .yx-p[data-yeux-prev="anime"]{background-image:none}
html[data-theme=light] .yx-p::after{background:radial-gradient(70% 110% at 50% 45%,transparent 50%,rgba(246,243,234,.55) 100%)}
@media (prefers-reduced-motion:reduce){.yx-c,.yx-c:hover{transition:none;transform:none}}