/* ══════════════════════════════════════════════════════════════════════════
   HONORAIRES — l'habillage TG Invest (25/09/2026)

   Demande du Dr TAILLAINT : « un design ultra premium, comme tginvest.fr ».
   Cette feuille se charge EN DERNIER sur chaque page (après `hon-charte.css` et
   les styles propres à la page) : elle ne change aucun comportement, elle
   repeint. Les écrans partagés avec Sonolix lisent les jetons `--snx-*` ; on les
   redéfinit ici avec la palette de tginvest.fr (tg.css), et tout suit sans
   toucher au fichier découpé dans Sonolix.

   Clair par défaut, comme tginvest.fr. Le sombre reste disponible, en bleu nuit.
   ══════════════════════════════════════════════════════════════════════════ */

:root:not([data-snx-theme="dark"]) {
  color-scheme: light;
  --snx-bg:#F4F6FB; --snx-navy:rgba(244,246,251,.78); --snx-card:#FFFFFF; --snx-card2:#F1F5FF;
  --snx-ink:#0A1122; --snx-muted:#5A6478; --snx-faint:#8690A2;
  --snx-rule:rgba(12,24,52,.09); --snx-rule2:rgba(12,24,52,.18); --snx-wash:rgba(12,24,52,.035);
  --snx-neon:#2F6BFF; --snx-teal2:#1B3FD6; --snx-on-accent:#FFFFFF;
  --snx-acc-wash:rgba(47,107,255,.08); --snx-acc-line:rgba(47,107,255,.38);
  --snx-ok:#0E9F57; --snx-ok-wash:#E9F8F0; --snx-ok-line:#BFE9D2;
  --snx-warn:#A45F00; --snx-warn-wash:#FFF7E8; --snx-warn-line:#F4D9A6;
  --snx-bad:#D93A1E; --snx-bad-wash:#FFF0EC; --snx-bad-line:#F8C9BD;
  --snx-viol:#7C4DEB; --snx-viol-wash:#F3EEFE; --snx-viol-line:#DCD0FB;
  --snx-orange:#E0501F; --snx-orange-wash:#FFF1EB; --snx-orange-line:#F9CDB9;
  --snx-info:#2F6BFF; --snx-info-wash:#EEF3FF; --snx-info-line:#CFDCFF;
  --snx-overlay:rgba(10,17,34,.42);
  --snx-shadow-pop:0 40px 90px -40px rgba(16,32,80,.45),0 4px 14px -6px rgba(16,32,80,.12);
  --snx-card-shadow:0 24px 60px -36px rgba(16,32,80,.32),0 2px 6px -2px rgba(16,32,80,.06);
  --snx-card-shadow-hover:0 34px 70px -34px rgba(16,32,80,.42),0 4px 12px -4px rgba(16,32,80,.1);
  --snxann-acc1:#1B3FD6; --snxann-acc2:#2F6BFF; --snxann-encre:#FFFFFF;
  --tg-verre:rgba(255,255,255,.72); --tg-verre-bord:rgba(255,255,255,.95);
  --tg-nuage-o:.30;
}
:root[data-snx-theme="dark"] {
  color-scheme: dark;
  --snx-bg:#060A16; --snx-navy:rgba(6,10,22,.72); --snx-card:#0D1428; --snx-card2:#131C36;
  --snx-ink:#EAF0FF; --snx-muted:rgba(222,231,255,.62); --snx-faint:rgba(222,231,255,.42);
  --snx-rule:rgba(160,185,255,.10); --snx-rule2:rgba(160,185,255,.22); --snx-wash:rgba(160,185,255,.05);
  --snx-neon:#7FA6FF; --snx-teal2:#9DBBFF; --snx-on-accent:#FFFFFF;
  --snx-acc-wash:rgba(79,130,255,.14); --snx-acc-line:rgba(127,166,255,.45);
  --snx-ok:#3DD68C; --snx-ok-wash:rgba(61,214,140,.10); --snx-ok-line:rgba(61,214,140,.36);
  --snx-warn:#FFC061; --snx-warn-wash:rgba(255,192,97,.09); --snx-warn-line:rgba(255,192,97,.34);
  --snx-bad:#FF7A5C; --snx-bad-wash:rgba(255,122,92,.10); --snx-bad-line:rgba(255,122,92,.38);
  --snx-viol:#B49BFF; --snx-viol-wash:rgba(180,155,255,.12); --snx-viol-line:rgba(180,155,255,.4);
  --snx-orange:#FF9A6B; --snx-orange-wash:rgba(255,154,107,.12); --snx-orange-line:rgba(255,154,107,.4);
  --snx-info:#7FA6FF; --snx-info-wash:rgba(127,166,255,.12); --snx-info-line:rgba(127,166,255,.4);
  --snx-overlay:rgba(2,4,10,.72);
  --snx-shadow-pop:0 40px 90px -30px rgba(0,0,0,.8);
  --snx-card-shadow:0 30px 60px -40px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.04);
  --snx-card-shadow-hover:0 40px 80px -36px rgba(20,50,160,.55),inset 0 1px 0 rgba(255,255,255,.06);
  --snxann-acc1:#2F6BFF; --snxann-acc2:#5B8CFF; --snxann-encre:#FFFFFF;
  --tg-verre:rgba(13,20,40,.66); --tg-verre-bord:rgba(160,185,255,.12);
  --tg-nuage-o:.22;
}

:root{
  --tg-sans:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue","Segoe UI",Inter,system-ui,sans-serif;
  --tg-b1:#1B3FD6; --tg-b2:#2F6BFF; --tg-b3:#27B8E6;
  --tg-avant:#2F6BFF; --tg-pendant:#0E9FB0; --tg-apres:#EE5A36; --tg-coulisses:#8B5CF6;
  --tg-grad:linear-gradient(100deg,var(--tg-b1) 0%,var(--tg-b2) 48%,var(--tg-b3) 100%);
}

/* ── le fond : clair, vivant, jamais plat ── */
html{background:var(--snx-bg)}
body{font-family:var(--tg-sans);font-size:15px;letter-spacing:-.005em;background:transparent;position:relative;min-height:100vh}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(46vmax 46vmax at -8% -18%,color-mix(in srgb,var(--tg-avant) calc(var(--tg-nuage-o)*100%),transparent),transparent 70%),
    radial-gradient(40vmax 40vmax at 108% -6%,color-mix(in srgb,var(--tg-pendant) calc(var(--tg-nuage-o)*80%),transparent),transparent 70%),
    radial-gradient(34vmax 34vmax at 70% 110%,color-mix(in srgb,var(--tg-coulisses) calc(var(--tg-nuage-o)*55%),transparent),transparent 70%),
    var(--snx-bg)}
h1,h2,h3,h4{letter-spacing:-.025em}
::selection{background:rgba(47,107,255,.18)}
:focus-visible{outline:3px solid var(--tg-b2);outline-offset:2px;border-radius:8px}

/* ── la barre du haut : verre dépoli, comme tginvest.fr ── */
.hon-tete{min-height:64px;padding:10px clamp(16px,4vw,40px);gap:14px;
  background:var(--snx-navy);border-bottom:1px solid var(--snx-rule);
  backdrop-filter:saturate(180%) blur(18px);-webkit-backdrop-filter:saturate(180%) blur(18px)}
.hon-titre{font-size:1.02rem;font-weight:700;letter-spacing:-.025em;text-transform:none;gap:11px;color:var(--snx-ink)}
.hon-pastille{width:32px;height:32px;border-radius:0;flex:none;
  background:url(marque/tginvest-symbole.svg) center/contain no-repeat;
  filter:drop-shadow(0 6px 12px rgba(47,107,255,.35))}

/* ── les boutons : pilules, le plein en dégradé bleu ── */
.btn{height:38px;padding:0 17px;border-radius:100px;font-size:.84rem;font-weight:600;letter-spacing:-.01em;
  border:1px solid var(--snx-rule2);background:var(--snx-card);color:var(--snx-ink);text-decoration:none;
  transition:transform .25s cubic-bezier(.3,1.4,.6,1),box-shadow .25s,background .25s,border-color .25s}
.btn:hover{transform:translateY(-1px);border-color:var(--snx-ink);background:var(--snx-card)}
.btn.btn-ghost{background:transparent;border-color:transparent}
.btn.btn-ghost:hover{background:var(--snx-acc-wash);border-color:transparent;color:var(--snx-ink)}
.btn-acc,.btn-plein{border-color:transparent;color:#fff;
  background:linear-gradient(135deg,var(--tg-b1),var(--tg-b2) 60%,#3F86FF);
  box-shadow:0 12px 26px -12px rgba(47,107,255,.75)}
.btn-acc:hover,.btn-plein:hover{border-color:transparent;color:#fff;
  background:linear-gradient(135deg,var(--tg-b1),var(--tg-b2) 60%,#3F86FF);box-shadow:0 16px 32px -12px rgba(47,107,255,.9)}
.btn-ic{width:38px;padding:0}
.btn:disabled,.btn:disabled:hover{transform:none;box-shadow:none}
a{color:var(--snx-neon)}

/* ── les boutons des panneaux partagés avec Sonolix (hon_boutons.css) ── */
.btn-primary,.btn-success,.btn-teal,.btn-ghost:not(.btn),.btn-danger{border-radius:100px}
.btn-primary,.btn-teal{color:#fff;border:0;background:linear-gradient(135deg,var(--tg-b1),var(--tg-b2) 60%,#3F86FF);
  box-shadow:0 12px 26px -12px rgba(47,107,255,.75)}
.btn-primary:hover,.btn-teal:hover{background:linear-gradient(135deg,var(--tg-b1),var(--tg-b2) 60%,#3F86FF);
  box-shadow:0 16px 32px -12px rgba(47,107,255,.9);filter:none}
.field-input{border-radius:12px!important}

/* ── les blocs : papier blanc, grands rayons, ombre longue ── */
.carte,.bloc,.tuile{border-radius:22px;background:var(--snx-card);border:1px solid var(--snx-rule);box-shadow:var(--snx-card-shadow)}
.carte,.bloc{padding:20px 22px}
.carte h3,.bloc h3{font-size:.68rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--tg-b2)}
:root[data-snx-theme="dark"] .carte h3,:root[data-snx-theme="dark"] .bloc h3{color:var(--snx-neon)}

/* ── l'avertissement « en essai » : discret, pas une alarme ── */
.chantier{border-radius:18px;padding:14px 18px;font-size:.84rem;line-height:1.6;
  background:var(--tg-verre);border:1px solid var(--snx-warn-line);box-shadow:var(--snx-card-shadow);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}

/* ── les onglets : une commande segmentée ── */
.onglets{border-bottom:0;gap:4px;padding:5px;border-radius:100px;width:max-content;max-width:100%;overflow-x:auto;
  background:var(--tg-verre);border:1px solid var(--snx-rule);box-shadow:var(--snx-card-shadow);scrollbar-width:none;margin:18px 0 20px}
.onglets::-webkit-scrollbar{display:none}
.onglet{border:0;border-radius:100px;padding:8px 16px;white-space:nowrap;color:var(--snx-muted);transition:background .2s,color .2s,box-shadow .2s}
.onglet:hover{color:var(--snx-ink)}
.onglet[aria-selected="true"]{color:#fff;background:linear-gradient(135deg,var(--tg-b1),var(--tg-b2));box-shadow:0 10px 22px -12px rgba(47,107,255,.9)}
.onglet[aria-selected="true"] .compte{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.35);color:#fff}

/* ── les tableaux ── */
table.t{font-size:.86rem}
table.t th{font-size:.64rem;letter-spacing:.12em;color:var(--snx-faint);padding:10px;border-bottom:1px solid var(--snx-rule)}
table.t td{padding:12px 10px}
table.t tbody tr{transition:background .15s}
table.t tbody tr:hover td{background:var(--snx-wash)}
table.t tr.tot td{border-top:2px solid var(--snx-rule2)}

/* ── les champs ── */
.champ input,.champ select,.champ textarea,
.grille input,.grille select,.grille textarea{border-radius:12px;background:var(--snx-card);border:1px solid var(--snx-rule2);
  padding:10px 12px;transition:border-color .2s,box-shadow .2s}
.champ input:focus,.champ select:focus,.champ textarea:focus,
.grille input:focus,.grille select:focus,.grille textarea:focus{outline:0;border-color:var(--tg-b2);box-shadow:0 0 0 4px rgba(47,107,255,.14)}

/* ── les pastilles d'état : celles de tginvest.fr ── */
.puce,.pilule{font-family:ui-monospace,"SF Mono",SFMono-Regular,Menlo,monospace;font-size:.62rem;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;padding:3px 10px;border-radius:100px}

/* ── dialogues ── */
dialog{border-radius:24px;border:1px solid var(--snx-rule);padding:24px;box-shadow:var(--snx-shadow-pop)}
dialog::backdrop{backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}

/* ── petits écrans : gouttière de 16 px, rien ne déborde ── */
@media (max-width:640px){
  .hon-tete{padding:10px 16px}
  .enveloppe,.hon-corps{padding-left:16px!important;padding-right:16px!important}
  .onglets{width:100%}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}