/* Teebox — style « Néo-brutal » (test du skill neobrutalism).
   S'active avec <html data-style="neo">. Tout est rangé sous ce sélecteur : le style Teebox d'origine reste intact.
   Règles : bordures franches 2px, ombres décalées sans flou, jaune #FDC800 pour l'action, indigo #432DD7 pour les liens,
   fond chaud #FBFBF9, texte #1C293C, Inter + JetBrains Mono, espacements 4/8/12/16/24/32. */

:root[data-style="neo"]{
  --nb-primary:#FDC800; --nb-primary-hover:#FFD633; --nb-secondary:#432DD7; --nb-success:#16A34A; --nb-warning:#D97706; --nb-danger:#DC2626;
  --nb-surface:#FBFBF9; --nb-text:#1C293C; --nb-edge:#1C293C; --nb-on-primary:#1C293C;
  --nb-b:2px solid var(--nb-edge); --nb-sh:4px 4px 0 var(--nb-edge); --nb-sh-sm:2px 2px 0 var(--nb-edge); --nb-sh-lg:6px 6px 0 var(--nb-edge);
  --nb-r:10px; --nb-r-sm:6px;
  --bg:var(--nb-surface); --fg:var(--nb-text); --muted:#4A5568; --line:var(--nb-edge); --soft:#F1EFE8; --mint:#FFF1B3; --card:#FFFFFF;
  --g:var(--nb-secondary); --g2:var(--nb-secondary); --flag:var(--nb-primary); --flag-bg:#FFF1B3; --ink:var(--nb-text); --red:var(--nb-danger);
  --amber:#8A4B00; --amber-bg:#FFE7C2; --ok-bg:#C9F2D6; --ok-fg:#0E5A2B; --danger-bg:#FFE1E1; --danger-line:var(--nb-danger);
  --glass:rgba(251,251,249,.96); --shadow:rgba(28,41,60,1);
  --ring:var(--nb-primary);
  --font:"Inter",ui-sans-serif,system-ui,-apple-system,sans-serif; --mono:"JetBrains Mono",ui-monospace,monospace;
  --ease:cubic-bezier(.3,.7,.4,1);
}
/* sombre : surface ardoise, les bordures et ombres passent en crème pour rester visibles */
@media (prefers-color-scheme:dark){:root[data-style="neo"]:not([data-theme="light"]){
  --nb-surface:#121722; --nb-text:#F4F2EA; --nb-edge:#F4F2EA; --muted:#B7BFCC; --soft:#1C2331; --mint:#3A3210; --card:#1A2130;
  --g:#A99BFF; --g2:#A99BFF; --flag-bg:#3A3210; --amber:#FFC46B; --amber-bg:#3B2A10; --ok-bg:#103A22; --ok-fg:#7BE3A1; --danger-bg:#3D1414;
  --glass:rgba(18,23,34,.96); --nb-sh:4px 4px 0 #000; --nb-sh-sm:2px 2px 0 #000; --nb-sh-lg:6px 6px 0 #000;
  color-scheme:dark}}
:root[data-style="neo"][data-theme="dark"]{
  --nb-surface:#121722; --nb-text:#F4F2EA; --nb-edge:#F4F2EA; --muted:#B7BFCC; --soft:#1C2331; --mint:#3A3210; --card:#1A2130;
  --g:#A99BFF; --g2:#A99BFF; --flag-bg:#3A3210; --amber:#FFC46B; --amber-bg:#3B2A10; --ok-bg:#103A22; --ok-fg:#7BE3A1; --danger-bg:#3D1414;
  --glass:rgba(18,23,34,.96); --nb-sh:4px 4px 0 #000; --nb-sh-sm:2px 2px 0 #000; --nb-sh-lg:6px 6px 0 #000;
  color-scheme:dark}

/* ---------- base ---------- */
[data-style="neo"] body{font-size:15px;letter-spacing:-.005em}
[data-style="neo"] h1,[data-style="neo"] h2,[data-style="neo"] h3{font-weight:900;letter-spacing:-.03em}
[data-style="neo"] :focus-visible{outline:3px solid var(--nb-secondary);outline-offset:3px;border-radius:var(--nb-r-sm)}
[data-style="neo"] .muted{color:var(--muted)}
[data-style="neo"] .wordmark{font-weight:900;color:var(--fg)}
[data-style="neo"] .link{color:var(--g);font-weight:800;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px}

/* ---------- boutons : jaune, bord noir, ombre décalée qui « s'enfonce » au clic ---------- */
[data-style="neo"] .btn{background:var(--nb-primary);color:var(--nb-on-primary);border:var(--nb-b);border-radius:var(--nb-r);box-shadow:var(--nb-sh);font-weight:800;transition:transform .12s var(--ease),box-shadow .12s var(--ease),background .12s}
[data-style="neo"] .btn:hover{background:var(--nb-primary-hover);box-shadow:var(--nb-sh-lg);transform:translate(-2px,-2px)}
[data-style="neo"] .btn:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--nb-edge)}
[data-style="neo"] .btn.soft{background:var(--card);color:var(--fg)}
[data-style="neo"] .btn.ghost{background:transparent;color:var(--fg);border:var(--nb-b);box-shadow:none}
[data-style="neo"] .btn.ghost:hover{box-shadow:var(--nb-sh-sm);transform:translate(-1px,-1px)}
[data-style="neo"] .btn.dark{background:var(--nb-secondary);color:#fff}
[data-style="neo"] .btn[disabled]{opacity:1;background:var(--soft);color:var(--muted);box-shadow:none;border-style:dashed}
[data-style="neo"] .icon-btn.liked{color:var(--nb-danger)}

/* ---------- champs ---------- */
[data-style="neo"] .field,[data-style="neo"] .search{border:var(--nb-b);border-radius:var(--nb-r);background:var(--card);color:var(--fg);box-shadow:none}
[data-style="neo"] .field:focus-within,[data-style="neo"] .search:focus-within{border-color:var(--nb-edge);box-shadow:var(--nb-sh);color:var(--fg)}
[data-style="neo"] .lbl{color:var(--fg);font-weight:800;text-transform:uppercase;font-size:11.5px;letter-spacing:.06em}
[data-style="neo"] .err,[data-style="neo"] .msg-err{color:var(--nb-danger);font-weight:700}
[data-style="neo"] .otp input{border:var(--nb-b)!important;border-radius:var(--nb-r)!important;font-family:var(--mono)}
[data-style="neo"] .otp input:focus{box-shadow:var(--nb-sh)!important}
[data-style="neo"] .secret,[data-style="neo"] code{font-family:var(--mono)}

/* ---------- chips, pastilles, onglets ---------- */
[data-style="neo"] .chip{border:var(--nb-b);border-radius:var(--nb-r-sm);background:var(--card);font-weight:700}
[data-style="neo"] .chip:hover{box-shadow:var(--nb-sh-sm)}
[data-style="neo"] .chip.on{background:var(--nb-primary);border-color:var(--nb-edge);color:var(--nb-on-primary);box-shadow:var(--nb-sh-sm)}
[data-style="neo"] .pill{border:1.5px solid var(--nb-edge);border-radius:var(--nb-r-sm);font-weight:800}
[data-style="neo"] .pill.promo{background:var(--nb-primary);color:var(--nb-on-primary)}
[data-style="neo"] .seg{background:var(--card);border:var(--nb-b);border-radius:var(--nb-r);padding:3px}
[data-style="neo"] .seg button{border-radius:var(--nb-r-sm);color:var(--fg)}
[data-style="neo"] .seg button.on{background:var(--nb-primary);color:var(--nb-on-primary);box-shadow:inset 0 0 0 2px var(--nb-edge)}
[data-style="neo"] .ptabs button.on{color:var(--fg);box-shadow:inset 0 -4px 0 var(--nb-primary)}
[data-style="neo"] .price{font-family:var(--mono);font-weight:800}

/* ---------- cartes : tout ce qui est un bloc prend le bord + l'ombre ---------- */
[data-style="neo"] .card,[data-style="neo"] .widget,[data-style="neo"] .mycard,[data-style="neo"] .kpi,[data-style="neo"] .rg-box,
[data-style="neo"] .wl-card,[data-style="neo"] .gr,[data-style="neo"] .req,[data-style="neo"] .acc,[data-style="neo"] .demo,[data-style="neo"] .hero-card,[data-style="neo"] .map-card{
  border:var(--nb-b);border-radius:var(--nb-r);box-shadow:var(--nb-sh);background:var(--card)}
[data-style="neo"] .kpi{background:var(--card)}
[data-style="neo"] .kpi.warn{background:var(--nb-primary);color:var(--nb-on-primary)}
[data-style="neo"] .hero-card{background:var(--nb-secondary);color:#fff}
[data-style="neo"] .demo{border-style:dashed;box-shadow:none;background:var(--soft)}
[data-style="neo"] .next-w,[data-style="neo"] a.kpi,[data-style="neo"] .gr,[data-style="neo"] .crow{transition:transform .12s var(--ease),box-shadow .12s var(--ease)}
[data-style="neo"] .next-w:hover,[data-style="neo"] a.kpi:hover,[data-style="neo"] .gr:hover{transform:translate(-2px,-2px);box-shadow:var(--nb-sh-lg)}
[data-style="neo"] .next-w{background:var(--nb-primary);color:var(--nb-on-primary)}
[data-style="neo"] .next-w small,[data-style="neo"] .next-w span{color:var(--nb-on-primary)}
[data-style="neo"] .widget h5{text-transform:uppercase;letter-spacing:.06em;font-size:12px;font-weight:900}
[data-style="neo"] .card.danger{border-color:var(--nb-danger);box-shadow:4px 4px 0 var(--nb-danger)}

/* ---------- navigation ---------- */
[data-style="neo"] .side{border-right:var(--nb-b);background:var(--nb-surface)}
[data-style="neo"] .nav-a{border:2px solid transparent;border-radius:var(--nb-r)}
[data-style="neo"] .nav-a:hover{border-color:var(--nb-edge);background:var(--card)}
[data-style="neo"] .nav-a.on{background:var(--nb-primary);color:var(--nb-on-primary);border-color:var(--nb-edge);box-shadow:var(--nb-sh-sm)}
[data-style="neo"] .topbar{border-bottom:var(--nb-b);background:var(--nb-surface)}
[data-style="neo"] .bottombar{border-top:var(--nb-b);background:var(--nb-surface)}

/* ---------- fil : stories, publications, compositeur ---------- */
[data-style="neo"] .story .ring{background:var(--nb-primary);border:var(--nb-b);padding:3px;border-radius:var(--nb-r)}
[data-style="neo"] .story .ring>div{border-radius:var(--nb-r-sm);border:2px solid var(--nb-edge)}
[data-style="neo"] .story.seen .ring{background:var(--soft)}
[data-style="neo"] .story span{font-weight:700}
[data-style="neo"] .composer{border:var(--nb-b);border-radius:var(--nb-r);box-shadow:var(--nb-sh)}
[data-style="neo"] .composer:hover{border-color:var(--nb-edge);box-shadow:var(--nb-sh-lg)}
[data-style="neo"] .composer .cam{background:var(--nb-primary);color:var(--nb-on-primary);border:var(--nb-b);border-radius:var(--nb-r-sm)}
[data-style="neo"] .av{border:2px solid var(--nb-edge);border-radius:var(--nb-r-sm)}
[data-style="neo"] .post{border:var(--nb-b);border-radius:var(--nb-r);box-shadow:var(--nb-sh);background:var(--card);padding:12px 12px 14px;margin-bottom:24px}
[data-style="neo"] .media{border:var(--nb-b);border-radius:var(--nb-r-sm)}
[data-style="neo"] .media .date{border:var(--nb-b);border-radius:var(--nb-r-sm);box-shadow:var(--nb-sh-sm);background:var(--nb-primary);color:var(--nb-on-primary)}
[data-style="neo"] .media .tag{border:2px solid var(--nb-edge);border-radius:var(--nb-r-sm)}
[data-style="neo"] .textcard{background:var(--nb-secondary)!important;font-weight:900}
[data-style="neo"] .mini .mi-art{border:var(--nb-b);border-radius:var(--nb-r-sm);box-shadow:var(--nb-sh-sm)}
[data-style="neo"] .tile{border:var(--nb-b);border-radius:var(--nb-r-sm)}
[data-style="neo"] .rank{font-family:var(--mono);font-weight:800}
[data-style="neo"] .tr-row .th{border:2px solid var(--nb-edge);border-radius:var(--nb-r-sm)}

/* ---------- feuilles, toast, menus ---------- */
[data-style="neo"] .sheet-panel{border:var(--nb-b);border-bottom:0;border-radius:var(--nb-r) var(--nb-r) 0 0;box-shadow:0 -4px 0 var(--nb-edge)}
[data-style="neo"] .pmenu{border:var(--nb-b);border-radius:var(--nb-r);box-shadow:var(--nb-sh)}
[data-style="neo"] #toast{background:var(--nb-text);color:var(--nb-surface);border:var(--nb-b);border-radius:var(--nb-r);box-shadow:var(--nb-sh)}
[data-style="neo"] #topbar-load{background:var(--nb-secondary)}

/* ---------- connexion façon JUNNA, version néo-brutale ---------- */
[data-style="neo"] .ag-carte{border:3px solid var(--nb-edge);border-radius:var(--nb-r);box-shadow:8px 8px 0 var(--nb-edge)}
[data-style="neo"] .ag-panneau{background:var(--nb-secondary);border-left:3px solid var(--nb-edge);border-right:3px solid var(--nb-edge);box-shadow:none}
[data-style="neo"] .ag-panneau::after{display:none}
[data-style="neo"] .ag-panneau>svg{opacity:.18;mix-blend-mode:luminosity}
[data-style="neo"] .ag-texte button{background:var(--nb-primary);color:var(--nb-on-primary);border:var(--nb-b);border-radius:var(--nb-r);box-shadow:4px 4px 0 #000}
[data-style="neo"] .auth-visuel{border-bottom:3px solid var(--nb-edge)}
[data-style="neo"] .separateur::before,[data-style="neo"] .separateur::after{background:var(--nb-edge);height:2px}
[data-style="neo"] .lien{color:var(--g);font-weight:800}

/* ---------- réglages ---------- */
[data-style="neo"] .rg h4{text-transform:uppercase;letter-spacing:.06em;font-size:12px;font-weight:900;color:var(--fg)}
[data-style="neo"] .rg-row{border-bottom:2px solid var(--nb-edge)}
[data-style="neo"] .rg-ic{border:2px solid var(--nb-edge);border-radius:var(--nb-r-sm)}
[data-style="neo"] .switch-in{border:var(--nb-b)}
[data-style="neo"] .switch-in:checked{background:var(--nb-success)}
[data-style="neo"] .bubble{border:var(--nb-b);border-radius:var(--nb-r);box-shadow:var(--nb-sh-sm)}
[data-style="neo"] .bubble.me{background:var(--nb-primary);color:var(--nb-on-primary)}

/* ---------- carte : marqueurs ---------- */
[data-style="neo"] .mk{border:2px solid var(--nb-edge)!important;box-shadow:var(--nb-sh-sm)!important}
[data-style="neo"] .mk.on{background:var(--nb-primary)!important;color:var(--nb-on-primary)!important}

/* mouvement réduit : on garde les ombres mais plus de déplacement */
@media (prefers-reduced-motion:reduce){[data-style="neo"] .btn:hover,[data-style="neo"] .btn:active,[data-style="neo"] .gr:hover,[data-style="neo"] .next-w:hover{transform:none}}

/* téléphone : les cartes ne collent pas au bord de l'écran (gouttière 12px) */
@media (max-width:900px){[data-style="neo"] .post{margin:0 12px 24px}}