/* 15/10 (patron) : CHARTE GRAPHIQUE SIGHT — icônes (icones.py) + barre du haut + menu regroupé. Voir /charte.
   Icônes : trait 1,75 px arrondi, couleur du texte ; le détail OR (.a trait, .af point) = la signature Sight. */
:root{--ic-or:#d4a63a;--ic-or2:#f7c948;--ic-fond:rgba(212,166,58,.12)}
:root[data-theme=light]{--ic-or:#b07d12;--ic-or2:#8a6200;--ic-fond:rgba(176,125,18,.12)}
.ic{fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex:none;display:inline-block;vertical-align:middle;overflow:visible}
.ic .a{stroke:var(--ic-or)}.ic .af{fill:var(--ic-or);stroke:none}
/* menu de gauche */
.sg-nav .mi{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;font-size:17px}
.sg-nav a .ic{width:21px;height:21px;color:#8f9bb3;transition:color .15s,transform .15s}
.sg-nav a:hover .ic{color:#e6ebf5;transform:translateY(-1px)}
.sg-nav a.on .ic{color:var(--ic-or)}.sg-nav a.on .ic .a{stroke:var(--ic-or2)}.sg-nav a.on .ic .af{fill:var(--ic-or2)}
.sg-nav .nv-sec{display:flex;align-items:center;gap:8px;margin:14px 12px 4px 14px;font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#5d6984}
.sg-nav .nv-sec::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(212,166,58,.28),transparent)}
.sg-nav .nv-sec:first-child{margin-top:2px}
:root[data-theme=light] .sg-nav a .ic{color:#5b667c}:root[data-theme=light] .sg-nav a:hover .ic{color:#0f172a}
:root[data-theme=light] .sg-nav a.on .ic{color:var(--ic-or)}:root[data-theme=light] .sg-nav .nv-sec{color:#7a8499}
.sg-foot a.ft-aide{display:flex;align-items:center;gap:8px;padding:8px 10px;margin:0 0 4px;border:1px solid var(--line2);border-radius:10px;color:var(--text);font-size:13px;font-weight:600}
.sg-foot a.ft-aide:hover{border-color:var(--ic-or);text-decoration:none}.sg-foot a.ft-aide .ic{width:18px;height:18px}
.sg-foot a.ft-l{display:flex;align-items:center;gap:8px}.sg-foot a.ft-l .ic{width:15px;height:15px}
/* barre du haut */
.top .ico .ic{width:21px;height:21px}.top .ico:hover .ic .a{stroke:var(--ic-or2)}
.top .ico.th-btn .ic-cl{display:none}:root[data-theme=light] .top .ico.th-btn .ic-cl{display:inline-block}:root[data-theme=light] .top .ico.th-btn .ic-fc{display:none}
.srch-top>.ic{width:18px;height:18px;color:#8f9bb3}
.top .ico.bell .bdg{position:absolute}
/* barre du bas (téléphone) */
.sg-bottom a span{display:flex}.sg-bottom a .ic{width:23px;height:23px}.sg-bottom a.on .ic{color:var(--ic-or)}.sg-bottom a.on .ic .a{stroke:var(--ic-or2)}
/* téléphone : le bouton thème tient dans la barre du haut sans débordement */
@media (max-width:440px){.top{gap:2px!important}.top .ico{width:33px!important;height:36px}.top .gr-top{padding:6px 9px!important;font-size:12.5px!important;gap:4px!important}}
/* sous-navigation de la Communauté (Traders · Explorer) */
.cm-nav{display:flex;width:fit-content;max-width:100%;gap:4px;margin:0 0 14px;padding:5px;background:rgba(7,11,22,.94);border:1px solid #1e2738;border-radius:14px;backdrop-filter:blur(8px)}
.cm-nav a{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:10px;color:#c5cbe0;font-weight:700;font-size:14px}
.cm-nav a:hover{background:#111a2e;color:#fff;text-decoration:none}.cm-nav a.on{background:linear-gradient(135deg,#f7c948,#d4a63a);color:#1a1200}
:root[data-theme=light] .cm-nav{background:#fff;border-color:#d9dee8}:root[data-theme=light] .cm-nav a{color:#334155}:root[data-theme=light] .cm-nav a:hover{background:#eef2f8;color:#0f172a}
:root[data-theme=light] .cm-nav a.on{color:#1a1200}
.cm-nav a.on .ic,.cm-nav a.on .ic .a{stroke:#1a1200}.cm-nav a.on .ic .af{fill:#1a1200}.cm-nav a .ic{width:18px;height:18px}
/* onglets de Mes contenus */
.mc-nav a{display:inline-flex;align-items:center;gap:7px}.mc-nav a .ic{width:17px;height:17px}
.mc-nav a.on .ic,.mc-nav a.on .ic .a{stroke:#1a1200}.mc-nav a.on .ic .af{fill:#1a1200}
.mc-act i{display:flex}.mc-act i .ic{width:30px;height:30px;color:#e6ebf5}:root[data-theme=light] .mc-act i .ic{color:#1e293b}
/* passe 2 : pictogrammes posés dans le texte (convertisseur icones-sight.js) */
.ic.ic-t{width:1.15em;height:1.15em;vertical-align:-.2em}
.btn.pri .ic .a,.btn.pri .ic .af,.gr-top .ic .a,.vk-cta .ic .a,.btn-ana .ic .a,.tabs a.on .ic .a,.mc-nav a.on .ic .a{stroke:currentColor}
.btn.pri .ic .af,.gr-top .ic .af,.vk-cta .ic .af,.btn-ana .ic .af{fill:currentColor}
.gr-top .ic{width:19px;height:19px}
.btn.dan .ic .a{stroke:currentColor}
/* tuiles d'action (Accueil, espace créateur) : pictogramme doré dans une pastille ; 8 tuiles = 4 × 2 (pas de trou) */
.act-ic .ic{width:26px;height:26px;color:var(--ic-or)}.act-ic .ic .a{stroke:var(--ic-or2)}.act-ic .ic .af{fill:var(--ic-or2)}
.acts-g.acts-g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1100px){.acts-g.acts-g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
.sec-t .ic{width:22px;height:22px;margin-right:8px;vertical-align:-4px;color:var(--ic-or)}
/* titre de page : pictogramme Sight doré */
h1 .ic.h1-ic{width:30px;height:30px;margin:0 10px 0 0;color:var(--ic-or);vertical-align:-5px}h1 .ic.h1-ic .a{stroke:var(--ic-or2)}h1 .ic.h1-ic .af{fill:var(--ic-or2)}
/* onglets génériques (.tabs) avec icône */
.tabs a{display:inline-flex;align-items:center;gap:7px}.tabs a .ic{width:17px;height:17px}
.tabs a.on .ic,.tabs a.on .ic .a{stroke:#141006}.tabs a.on .ic .af{fill:#141006}
/* pastille d'icône (notifications, cartes) */
.ic-pas{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--ic-fond);color:var(--ic-or);flex:0 0 36px}
.ic-pas .ic{width:18px;height:18px}.ic-pas .ic .a{stroke:var(--ic-or2)}.ic-pas .ic .af{fill:var(--ic-or2)}
/* ======================================================================================================
   15/10 (patron : « je ne veux pas des fenêtres carrées — plus d'arrondis, plus d'ovales, la forme de l'ŒIL ; design et original,
   propre à notre charte ») — CHARTE v2 « L'ŒIL SIGHT », appliquée à TOUS les modules :
   · fenêtres (cartes) en AMANDE : grands arrondis elliptiques + « paupière » dorée en haut, reflet d'iris au centre ;
   · tuiles d'action et chiffres clés en forme d'ŒIL (lentille) ;
   · boutons, onglets, recherche, menus = gélules ; champs très arrondis ; fenêtres modales en amande.
   ====================================================================================================== */
:root{--oeil-r:34px;--oeil-rv:30px;--oeil-paup:rgba(212,166,58,.55);--oeil-iris:rgba(212,166,58,.09)}
:root[data-theme=light]{--oeil-paup:rgba(176,125,18,.45);--oeil-iris:rgba(212,166,58,.08)}
/* fenêtres */
.card{position:relative;border-radius:var(--oeil-r)/var(--oeil-rv);
  background-image:radial-gradient(60% 46px at 50% 0,var(--oeil-iris),transparent 100%),linear-gradient(180deg,rgba(14,20,36,.92),rgba(10,15,28,.92))}
:root[data-theme=light] .card{background-image:radial-gradient(60% 46px at 50% 0,var(--oeil-iris),transparent 100%)}
.card::before{content:"";position:absolute;left:14%;right:14%;top:-1px;height:16px;border-top:1.5px solid var(--oeil-paup);border-radius:50%/100% 100% 0 0;pointer-events:none}
.card::after{content:"";position:absolute;left:26%;right:26%;bottom:-1px;height:10px;border-bottom:1px solid var(--oeil-paup);border-radius:50%/0 0 100% 100%;opacity:.45;pointer-events:none}
.card>h2:first-child,.card>h1:first-child{position:relative}
/* tuiles d'action (accueil, espace créateur, bêta…) : une lentille, comme l'œil */
.acts-g .card.act,.card.act{border-radius:50%/38%;padding:22px 30px;text-align:center;align-items:center;justify-content:center;min-height:150px;transition:transform .18s,border-color .18s,box-shadow .18s}
.card.act:hover{transform:translateY(-2px);box-shadow:0 18px 40px -22px rgba(212,166,58,.55)}
.card.act::before{left:22%;right:22%}
.act-ic{display:inline-grid;place-items:center;width:52px;height:34px;border-radius:50%;background:radial-gradient(circle at 50% 50%,rgba(212,166,58,.22),rgba(212,166,58,.05) 70%);margin-bottom:2px}
/* chiffres clés (revenus, ventes, insights, bêta…) */
.bt-stats .card,.stats-g .card,.kpi,.card.kpi{border-radius:50%/42%;text-align:center;align-items:center;padding:18px 26px}
/* boutons, onglets, recherche : gélules */
.btn,button.btn{border-radius:999px;padding-left:18px;padding-right:18px}.btn.sm{padding-left:12px;padding-right:12px}
.btn.big{border-radius:999px}
.srch-top{border-radius:999px}
.mk-m,.sg-sheet .sh-b{border-radius:26px}
.sg-nav a{border-radius:999px}
/* champs */
input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea{border-radius:16px}
textarea{border-radius:20px}
/* images et aperçus */
.shot img,.prev img,.vcell img{border-radius:26px}
.av{box-shadow:0 0 0 2px rgba(212,166,58,.18)}
/* fenêtres pleine page (messagerie, modales) */
.chat.mx{border-radius:38px/32px}
.mx-mod-b,.bt-tir-b{border-radius:38px/32px}
.mx-dc,.mx-apv,.mx-vis-c>span{border-radius:28px/24px}
.mx-tu{border-radius:50%/42%}
.mx-tu.xl{border-radius:50%/40%}
/* titres de page : soulignement en forme de paupière */
.pg-hd h1,.bt-hd h1,.mb-hd h1{position:relative;padding-bottom:10px}
.pg-hd h1::after,.bt-hd h1::after,.mb-hd h1::after{content:"";position:absolute;left:0;bottom:0;width:120px;height:10px;border-bottom:2px solid var(--oeil-paup);border-radius:0 0 50% 50%/0 0 100% 100%}
/* flèche de retour (barre du haut) */
.top .sg-retour{flex:none}
.top .sg-retour .ic{width:22px;height:22px}
.top .sg-retour:hover{background:rgba(212,166,58,.12)}
@media (max-width:820px){.top .sg-retour{width:34px}}
.oeil-p::before{content:"";position:absolute;left:16%;right:16%;top:-1px;height:14px;border-top:1.5px solid var(--oeil-paup);border-radius:50%/100% 100% 0 0;pointer-events:none;z-index:1}

/* ======================================================================================================
   15/10 soir (patron, 2e demande : « TOUS les modules un peu OVALES, comme un ŒIL — pas beaucoup, mais quand même ; pense à mon
   identité graphique, quelque chose de plus ORIGINAL ») — CHARTE v3 « L'ŒIL SIGHT ».
   Le vocabulaire (tout passe par les jetons ci-dessous) :
   · AMANDE   : les fenêtres ont des coins étirés à l'horizontale (comme le coin d'un œil) — la passe charte.js calcule l'arrondi
                exact de chaque fenêtre selon sa marge intérieure, pour que le texte ne soit JAMAIS rogné par la courbe ;
   · PAUPIÈRES: un trait d'or qui s'estompe aux extrémités, bombé au-dessus de la fenêtre (paupière haute) et plus discret dessous ;
   · BANDEAU  : les titres de page sont une amande franche, avec un œil Sight en filigrane ;
   · LENTILLE : tuiles d'action, chiffres clés, onglets et états vides ont la forme de l'œil ;
   · IRIS     : l'élément actif / principal (onglet choisi, bouton principal) = un iris doré (dégradé radial + anneau) ;
   · CLIGNEMENT : au survol, les boutons principaux clignent, les paupières des fenêtres cliquables s'abaissent (sauf « réduire les animations »).
   ====================================================================================================== */
:root{
  --oe-l:clamp(40px,8%,96px) / 28px;          /* fenêtres (valeur de repli — charte.js affine fenêtre par fenêtre) */
  --oe-m:clamp(28px,10%,56px) / 22px;         /* fenêtres moyennes, fenêtres internes */
  --oe-hd:15% / 50%;                          /* bandeaux de titre : amande franche */
  --oe-lens:50% / 32%;                        /* tuiles / chiffres clés : lentille */
  --oe-fente:50% / 50%;                       /* onglets, états vides : la fente de l'œil */
  --oe-modal:clamp(40px,9%,110px) / 34px;     /* fenêtres modales, tiroirs */
  --oe-pad-hd:clamp(26px,5.5%,64px);          /* marge des bandeaux (texte jamais rogné par l'amande) */
  --oe-iris:radial-gradient(120% 150% at 50% 30%,#ffe7a3 0%,#f7c948 34%,#d4a63a 74%,#b0820f 100%);
  --oe-iris-anneau:inset 0 0 0 1px rgba(255,240,200,.45),0 0 0 3px rgba(212,166,58,.16);
  --oe-lueur:rgba(212,166,58,.10);
  --oe-cil:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 12' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g'%3E%3Cstop offset='0' stop-color='%23d4a63a' stop-opacity='0'/%3E%3Cstop offset='.5' stop-color='%23f7c948' stop-opacity='.95'/%3E%3Cstop offset='1' stop-color='%23d4a63a' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 11.5Q50 -9 100 11.5' fill='none' stroke='url(%23g)' stroke-width='1.6' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  --oe-cil-bas:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 12' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g'%3E%3Cstop offset='0' stop-color='%23d4a63a' stop-opacity='0'/%3E%3Cstop offset='.5' stop-color='%23d4a63a' stop-opacity='.8'/%3E%3Cstop offset='1' stop-color='%23d4a63a' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 .5Q50 21 100 .5' fill='none' stroke='url(%23g)' stroke-width='1.2' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  --oe-filigrane:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 60'%3E%3Cg fill='none' stroke='%23d4a63a' stroke-width='1.6'%3E%3Cpath d='M3 30Q60 -15 117 30Q60 75 3 30Z'/%3E%3Ccircle cx='60' cy='30' r='15'/%3E%3Ccircle cx='60' cy='30' r='6' fill='%23d4a63a' fill-opacity='.5'/%3E%3C/g%3E%3C/svg%3E");
}
:root[data-theme=light]{
  --oe-lueur:rgba(212,166,58,.09);
  --oe-iris-anneau:inset 0 0 0 1px rgba(255,248,225,.6),0 0 0 3px rgba(176,125,18,.14);
  --oe-cil:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 12' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g'%3E%3Cstop offset='0' stop-color='%23b07d12' stop-opacity='0'/%3E%3Cstop offset='.5' stop-color='%23b07d12' stop-opacity='.9'/%3E%3Cstop offset='1' stop-color='%23b07d12' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 11.5Q50 -9 100 11.5' fill='none' stroke='url(%23g)' stroke-width='1.6' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  --oe-cil-bas:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 12' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g'%3E%3Cstop offset='0' stop-color='%23b07d12' stop-opacity='0'/%3E%3Cstop offset='.5' stop-color='%23b07d12' stop-opacity='.7'/%3E%3Cstop offset='1' stop-color='%23b07d12' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 .5Q50 21 100 .5' fill='none' stroke='url(%23g)' stroke-width='1.2' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  --oe-filigrane:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 60'%3E%3Cg fill='none' stroke='%23b07d12' stroke-width='1.6'%3E%3Cpath d='M3 30Q60 -15 117 30Q60 75 3 30Z'/%3E%3Ccircle cx='60' cy='30' r='15'/%3E%3Ccircle cx='60' cy='30' r='6' fill='%23b07d12' fill-opacity='.5'/%3E%3C/g%3E%3C/svg%3E");
}
/* ---- AMANDE : fenêtres ---- */
.card{border-radius:var(--oe-l)}
.card::before{left:7%;right:7%;top:-6px;height:12px;border:0;border-radius:0;background:var(--oe-cil) center/100% 100% no-repeat;transform-origin:50% 100%;transition:transform .32s ease,opacity .32s}
.card::after{left:24%;right:24%;bottom:-5px;height:10px;border:0;border-radius:0;background:var(--oe-cil-bas) center/100% 100% no-repeat;opacity:.55}
.oeil-p::before{left:8%;right:8%;top:-6px;height:12px;border:0;border-radius:0;background:var(--oe-cil) center/100% 100% no-repeat}
/* lueur d'iris en haut de chaque fenêtre */
.card{background-image:radial-gradient(46% 54px at 50% 0,var(--oe-lueur),transparent 100%),linear-gradient(180deg,rgba(14,20,36,.92),rgba(10,15,28,.92))}
:root[data-theme=light] .card{background-image:radial-gradient(46% 54px at 50% 0,var(--oe-lueur),transparent 100%)}
/* fenêtre cliquable : la paupière s'abaisse au survol (clignement) */
a.card:hover::before,.card.act:hover::before,.ec-tile:hover::before,.ec-rac:hover::before{transform:translateY(3px) scaleY(.45)}
/* ---- BANDEAU de titre de page : amande franche + œil Sight en filigrane ---- */
main .pg-hd,main .mb-hd,main .bt-hd{position:relative;isolation:isolate;border-radius:var(--oe-hd)!important;
  padding:16px var(--oe-pad-hd)!important;background-color:var(--panel,#0b1020);border:1px solid var(--line,#1a2236);
  background-image:radial-gradient(40% 70% at 50% 0,var(--oe-lueur),transparent 100%),linear-gradient(180deg,rgba(14,20,36,.95),rgba(9,13,25,.95))}
:root[data-theme=light] main .pg-hd,:root[data-theme=light] main .mb-hd,:root[data-theme=light] main .bt-hd{background-color:#fff;border-color:#d6dce6;
  background-image:radial-gradient(40% 70% at 50% 0,var(--oe-lueur),transparent 100%);box-shadow:0 1px 4px rgba(15,23,42,.08)}
main .pg-hd::before,main .mb-hd::before,main .bt-hd::before{content:"";position:absolute;z-index:-1;right:calc(var(--oe-pad-hd) - 6px);top:50%;width:min(150px,26%);aspect-ratio:2/1;
  transform:translateY(-50%);background:var(--oe-filigrane) center/contain no-repeat;opacity:.16;pointer-events:none}
main .pg-hd::after,main .mb-hd::after,main .bt-hd::after{content:"";position:absolute;left:12%;right:12%;top:-6px;height:12px;background:var(--oe-cil) center/100% 100% no-repeat;pointer-events:none}
main .pg-hd.cours-hd{padding-bottom:18px!important}
/* pastilles de titres / textes posés sur l'arrière-plan : en amande */
main .sec-t,main h1:not(.card *):not(.pg-hd *):not(.mb-hd *):not(.bt-hd *),main h2:not(.card *):not(.pg-hd *):not(.mb-hd *):not(.bt-hd *),main .gal-t,main .warn,main .mc-note{border-radius:44px / 50%!important}
main .sec-t:not(.card *),main .gal-t:not(.card *){padding-left:20px!important;padding-right:20px!important}
main .ec-hd{border-radius:var(--oe-m)!important}
/* ---- LENTILLE : tuiles d'action et chiffres clés ---- */
main .ec-tile,main .ec-rac,.bt-stats .card,.stats-g .card,.kpi,.card.kpi{border-radius:var(--oe-lens)!important;padding:16px 24px!important;text-align:center;align-items:center;justify-content:center;
  background-image:radial-gradient(38% 52% at 50% 50%,var(--oe-lueur),transparent 100%),linear-gradient(180deg,rgba(14,20,36,.92),rgba(10,15,28,.92))}
:root[data-theme=light] main .ec-tile,:root[data-theme=light] main .ec-rac,:root[data-theme=light] .bt-stats .card,:root[data-theme=light] .stats-g .card,:root[data-theme=light] .kpi{background-image:radial-gradient(38% 52% at 50% 50%,var(--oe-lueur),transparent 100%)}
main .ec-tile::before,main .ec-rac::before{left:20%;right:20%}
.acts-g .card.act,.card.act{border-radius:50% / 40%}
.act-ic{width:58px;height:36px;border-radius:50%;background:radial-gradient(circle at 50% 50%,rgba(247,201,72,.30) 0,rgba(212,166,58,.10) 46%,transparent 72%);box-shadow:inset 0 0 0 1px rgba(212,166,58,.28)}
/* figures de statistiques (Sight Insights, revenus) */
main figure.st-fig{border-radius:clamp(26px,9%,60px) / 24px}
/* ---- FENTE : onglets en forme d'œil, l'onglet choisi = IRIS ---- */
.tabs a,.mc-nav a,.cm-nav a,.bq-tabs a,.pc-fms a,.st-per a{border-radius:var(--oe-fente)!important;padding-left:18px!important;padding-right:18px!important}
.tabs a.on,.mc-nav a.on,.cm-nav a.on,.bq-tabs a.on,.pc-fms a.on,.st-per a.on{background:var(--oe-iris)!important;box-shadow:var(--oe-iris-anneau);border-color:#d4a63a!important;color:#1a1200!important}
main .tabs,main .ec-tabs,main .mc-nav,main .cm-nav,main .bq-tabs,main .pc-fms,main nav[class*=tabs]{border-radius:clamp(26px,7%,80px) / 50%!important;padding-left:14px!important;padding-right:14px!important}
main .ec-tabs{border-radius:clamp(30px,8%,90px) / 46px!important;padding:6px 16px!important}
/* ---- états vides : l'œil fermé ---- */
main .empty,main p.mut.empty,main .mb-vide{border-radius:var(--oe-fente)!important;text-align:center}
/* ---- IRIS : boutons principaux + clignement ---- */
.btn.pri,.vk-cta{background:var(--oe-iris);box-shadow:var(--oe-iris-anneau)}
.top .gr-top{background:var(--oe-iris)!important;box-shadow:var(--oe-iris-anneau)}
@keyframes oe-cligne{0%,100%{scale:1 1}40%{scale:1 .74}}
@keyframes oe-paupiere{0%,100%{transform:none}40%{transform:translateY(4px) scaleY(.2)}}
.btn.pri:hover,.top .gr-top:hover,.vk-cta:hover{animation:oe-cligne .34s ease-in-out 1}
/* ---- avatars : anneau d'iris ---- */
.av{box-shadow:0 0 0 2px var(--bg,#02050c),0 0 0 3.5px rgba(212,166,58,.45)}
/* ---- images et aperçus : coins d'œil ---- */
.shot img,.prev img,.vcell img{border-radius:clamp(18px,10%,48px) / 18px}
/* portraits des professeurs : vus sous une paupière (haut en arche) */
.card.pc{border-radius:50% 50% 30px 30px / 46px 46px 26px 26px!important}
.card.pc::before{left:10%;right:10%;top:-7px}
/* ---- fenêtres modales, tiroirs, feuilles ---- */
.mx-mod-b,.bt-tir-b,.mp-modal>.card,.at-modal>*{border-radius:var(--oe-modal)!important}
.sg-sheet .sh-b{border-radius:clamp(40px,14%,110px) clamp(40px,14%,110px) 18px 18px / 34px 34px 18px 18px}
.vdrawer{border-radius:clamp(40px,14%,110px) clamp(40px,14%,110px) 0 0 / 30px 30px 0 0}
.mk-m{border-radius:28px / 22px}
/* ---- téléphone : amandes un peu plus douces, marges gardées ---- */
@media (max-width:640px){
  :root{--oe-hd:12% / 42%;--oe-pad-hd:24px;--oe-lens:50% / 30%}
  main .pg-hd::before,main .mb-hd::before,main .bt-hd::before{opacity:.10;width:110px}
  .st-per{display:flex;flex-wrap:wrap;gap:6px;max-width:100%}
  .st-per a,.tabs a,.mc-nav a,.cm-nav a{padding-left:14px!important;padding-right:14px!important}
}
@media (prefers-reduced-motion:reduce){
  .btn.pri:hover,.top .gr-top:hover,.vk-cta:hover{animation:none}
  .card::before,a.card:hover::before,.card.act:hover::before{transition:none;transform:none}
}
/* 25/10 nuit (patron : « deux boutons pour revenir au graphique, la flèche ET le bouton jaune ») : un seul accès — le bouton jaune « Accéder au graphique » */
/* 29/10 (patron : « un bouton de retour en arrière pour tous les onglets ») : la flèche revient — page précédente de Sight, jamais le graphique */
/* 30/10 (patron : « chaque onglet, chaque fenêtre a sa flèche de retour ») : flèche posée par charte.js sur les grandes fenêtres plein écran */
button.sgr-b.sgr-b{position:absolute;top:12px;left:12px;z-index:2147483000;width:38px;height:38px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;padding:0;cursor:pointer;
  background:rgba(15,22,40,.92);border:1px solid rgba(247,201,72,.45);color:#e6ecff;box-shadow:0 4px 16px rgba(0,0,0,.45);transition:background .18s,border-color .18s,transform .18s}
button.sgr-b:hover{background:rgba(247,201,72,.16);border-color:#f7c948;transform:translateX(-1px)}button.sgr-b:focus-visible{outline:2px solid #f7c948;outline-offset:2px}
button.sgr-b .ic{width:20px;height:20px}
:root[data-theme=light] button.sgr-b{background:#fff;color:#1b2333;border-color:rgba(176,132,20,.55)}
button.sgr-b.sgr-b.sgr-in{position:static;flex:none;width:34px;height:34px;margin-right:8px;box-shadow:none;order:-1;align-self:center}

/* 31/10 (patron) : plus de barre Accueil / Publier / Messages / Mon espace : seul le menu reste */
.sg-bottom,nav.sg-bottom{display:none!important}

/* 02/11 (patron : « aucun moyen de revenir en arrière ») : la flèche de retour de la barre du haut est cerclée d'or, bien visible (absente seulement sur l'Accueil et les graphiques) */
.top .sg-retour{width:40px;height:40px;border-radius:50%;border:1.5px solid rgba(247,201,72,.55);background:rgba(247,201,72,.08)}
.top .sg-retour:hover{background:rgba(247,201,72,.2);border-color:#f7c948}
:root[data-theme=light] .top .sg-retour{border-color:rgba(154,107,0,.55);background:rgba(154,107,0,.07)}

/* 03/11 (patron : « créer de vrais chemins dans chaque page ») : fil d'Ariane du shell (server.fil_ariane) — « Page précédente » en amande dorée + chemin en vrais liens */
.sg-fil{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:0 0 14px;font-size:13px;color:var(--muted,#9b9ba3)}
.sg-fil-prec{display:inline-flex;align-items:center;gap:6px;padding:6px 16px;border-radius:999px;border:1.5px solid rgba(247,201,72,.55);background:rgba(247,201,72,.08);color:#f7c948;font:inherit;font-weight:700;cursor:pointer}
.sg-fil-prec:hover{background:rgba(247,201,72,.2);border-color:#f7c948}
.sg-fil-ch{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px;min-width:0}
.sg-fil-ch a{color:#f7c948;font-weight:600;text-decoration:none}
.sg-fil-ch a:hover{text-decoration:underline}
.sg-fil-ch b{color:var(--text,#ececef);font-weight:600;max-width:46ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:root[data-theme=light] .sg-fil-prec{color:#7a5400;border-color:rgba(154,107,0,.55);background:rgba(154,107,0,.07)}
:root[data-theme=light] .sg-fil-ch a{color:#8a6200}