:root { --fond:#04060C; --panel:#0A0F1C; --panel2:#0F172A; --bleu:#2F8BFF; --bleu-clair:#7CC0FF; --bleu-glow:rgba(47,139,255,.55);
            --or:#E0A92F; --or-clair:#FFD97A; --or-glow:rgba(255,200,80,.5);
            --texte:#EEF3FA; --doux:#8D9BB3; --rouge:#FF5C7A; --vert:#4DF0B0; color-scheme:dark;
            --accent:#2F8BFF; --accent-clair:#7CC0FF; --accent-glow:rgba(47,139,255,.55); --trait:rgba(124,192,255,.2); --trait-fort:rgba(124,192,255,.5);
            --btn-grad:linear-gradient(180deg,#5AAEFF,#1763E6); --btn-txt:#fff;
            --ban-grad:linear-gradient(180deg,#FFFFFF,#AEB9CB 55%,#E9EFF7); }
    .theme-reparation { --accent:#E0A92F; --accent-clair:#FFD97A; --accent-glow:rgba(255,200,80,.5); --trait:rgba(224,169,47,.25); --trait-fort:rgba(224,169,47,.55);
            --btn-grad:linear-gradient(180deg,#FFE08A,#D49A22); --btn-txt:#1A1205; --ban-grad:linear-gradient(180deg,#FFE9A8,#E0A92F 60%,#B9801A); }
    * { box-sizing:border-box; }
    body { margin:0; color:var(--texte); font-family:"Barlow","Segoe UI",-apple-system,Roboto,Arial,sans-serif; font-size:15px; line-height:1.5; min-height:100vh;
           background:radial-gradient(900px 520px at 6% -8%, rgba(47,139,255,.30), transparent 60%),
                      radial-gradient(800px 520px at 102% 108%, rgba(224,169,47,.22), transparent 60%),
                      repeating-linear-gradient(135deg, rgba(255,255,255,.018) 0 2px, transparent 2px 16px), var(--fond);
           background-attachment:fixed; }
    h1,h2,h3 { font-weight:800; letter-spacing:.03em; margin:0; font-style:italic; }
    h3 { font-size:19px; text-transform:uppercase; }
    a { color:var(--bleu-clair); }
    code { color:var(--accent-clair); font-weight:700; letter-spacing:.06em; }

    /* Logo + barre du haut */
    .logo { font-style:italic; font-weight:900; font-size:26px; letter-spacing:.01em; white-space:nowrap; }
    .logo .ls { background:linear-gradient(180deg,#fff,#8C98AC 55%,#E6ECF5); -webkit-background-clip:text; background-clip:text; color:transparent; }
    .logo .cu { color:var(--bleu-clair); text-shadow:0 0 16px var(--bleu-glow); }
    .topbar { position:relative; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:12px 28px; background:rgba(4,6,12,.88); backdrop-filter:blur(8px); }
    .topbar::after { content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:linear-gradient(90deg,transparent,var(--bleu) 25%,var(--or) 75%,transparent); }
    .topbar .marque { display:flex; align-items:baseline; gap:10px; text-decoration:none; }
    .topbar .sous-marque { font-size:12px; letter-spacing:.25em; text-transform:uppercase; color:var(--doux); }
    .topbar .moi { font-size:14px; color:var(--doux); display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
    .main { max-width:1040px; margin:0 auto; padding:30px 20px 60px; }

    /* Bandeau chrome */
    .titre-chrome { display:inline-block; margin-bottom:22px; padding:9px 44px; font-size:22px; font-weight:900; font-style:italic; text-transform:uppercase; letter-spacing:.14em; color:#05070C;
                    background:linear-gradient(180deg,#FFFFFF,#AEB9CB 55%,#E9EFF7); clip-path:polygon(16px 0,calc(100% - 16px) 0,100% 50%,calc(100% - 16px) 100%,16px 100%,0 50%);
                    filter:drop-shadow(0 0 10px rgba(124,192,255,.45)); }

    .card { position:relative; background:linear-gradient(180deg,var(--panel2),var(--panel)); border:1px solid var(--trait); border-radius:16px; padding:22px 24px; margin-bottom:20px;
            box-shadow:0 18px 40px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.04); }
    .btn { display:inline-block; border:none; cursor:pointer; text-decoration:none; padding:11px 22px; border-radius:10px; font:inherit; font-weight:800; font-style:italic; letter-spacing:.04em; text-transform:uppercase;
           color:var(--btn-txt); background:var(--btn-grad); box-shadow:0 0 18px var(--accent-glow); transition:transform .12s, filter .12s; }
    .btn:hover { filter:brightness(1.12); transform:translateY(-1px); }
    .btn.secondary { background:rgba(255,255,255,.03); color:var(--texte); border:1px solid var(--trait-fort); box-shadow:none; }
    .btn.secondary:hover { background:rgba(255,255,255,.08); }
    .btn.discord { background:#5865F2; color:#fff; box-shadow:0 0 22px rgba(88,101,242,.5); }
    .btn.vertbtn { background:linear-gradient(180deg,#7CF3C6,#1FAE80); color:#04140D; box-shadow:0 0 18px rgba(77,240,176,.4); }
    .btn.danger { background:transparent; color:#FFC0CD; border:1px solid rgba(255,92,122,.55); box-shadow:none; }
    .btn.gros { padding:14px 28px; font-size:16px; }
    .btn.petit { padding:6px 14px; font-size:12px; }
    input[type=text] { width:100%; padding:11px 12px; margin-top:6px; font:inherit; border:1px solid var(--trait-fort); border-radius:9px; background:rgba(0,0,0,.45); color:var(--texte); }
    input:focus { outline:none; border-color:var(--bleu-clair); box-shadow:0 0 0 3px rgba(47,139,255,.28); }
    label { font-size:12px; color:var(--doux); display:block; text-transform:uppercase; letter-spacing:.1em; font-weight:600; }

    /* Choix du type de carte */
    .form-carte { display:grid; grid-template-columns:1fr 1fr auto; gap:14px; align-items:end; margin-top:16px; }
    .choix-type { grid-column:1/-1; display:grid; grid-template-columns:1fr 1fr; gap:14px; }
    .tuile { position:relative; display:block; text-transform:none; letter-spacing:0; font-size:inherit; }
    .tuile input { position:absolute; opacity:0; pointer-events:none; }
    .tuile-in { display:block; padding:16px 18px; border-radius:14px; border:1px solid; cursor:pointer; transition:box-shadow .15s, background .15s; }
    .tuile-in b { display:block; font-size:20px; font-style:italic; font-weight:900; text-transform:uppercase; letter-spacing:.05em; }
    .tuile-in small { color:var(--doux); font-size:13px; }
    .tuile-custom .tuile-in { border-color:rgba(124,192,255,.4); background:rgba(47,139,255,.07); }
    .tuile-custom b { color:var(--bleu-clair); }
    .tuile-custom input:checked + .tuile-in { background:rgba(47,139,255,.2); box-shadow:0 0 0 2px var(--bleu), 0 0 24px rgba(47,139,255,.55); }
    .tuile-reparation .tuile-in { border-color:rgba(224,169,47,.45); background:rgba(224,169,47,.07); }
    .tuile-reparation b { color:var(--or-clair); }
    .tuile-reparation input:checked + .tuile-in { background:rgba(224,169,47,.2); box-shadow:0 0 0 2px var(--or), 0 0 24px rgba(255,200,80,.5); }

    table { width:100%; border-collapse:collapse; }
    th,td { text-align:left; padding:12px 12px; font-size:14px; }
    th { color:var(--doux); font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.1em; border-bottom:1px solid var(--trait-fort); white-space:nowrap; }
    td { border-bottom:1px solid rgba(255,255,255,.06); }
    tr:last-child td { border-bottom:none; }
    tbody tr:hover td { background:rgba(124,192,255,.06); }
    tr[data-cat=custom] td:first-child { box-shadow:inset 3px 0 0 var(--bleu); }
    tr[data-cat=reparation] td:first-child { box-shadow:inset 3px 0 0 var(--or); }
    .table-wrap { overflow-x:auto; }
    .mini { display:inline-flex; gap:3px; vertical-align:middle; margin-left:8px; }
    .mini i { width:7px; height:13px; border-radius:2px; background:rgba(255,255,255,.12); }
    tr[data-cat=custom] .mini i.on { background:var(--bleu); box-shadow:0 0 6px var(--bleu-glow); }
    tr[data-cat=reparation] .mini i.on { background:var(--or); box-shadow:0 0 6px var(--or-glow); }

    .badge { display:inline-block; font-size:11px; font-weight:800; font-style:italic; text-transform:uppercase; letter-spacing:.08em; padding:3px 12px; border-radius:999px; border:1px solid var(--trait-fort); color:var(--accent-clair); white-space:nowrap; }
    .badge.vert { color:var(--vert); border-color:rgba(77,240,176,.45); }
    .badge.custom { color:var(--bleu-clair); border-color:rgba(124,192,255,.6); background:rgba(47,139,255,.12); }
    .badge.reparation { color:var(--or-clair); border-color:rgba(224,169,47,.6); background:rgba(224,169,47,.12); }
    .alert { padding:13px 17px; border-radius:11px; margin-bottom:18px; border:1px solid; }
    .alert.success { background:rgba(77,240,176,.1); color:#C2FBE3; border-color:rgba(77,240,176,.4); }
    .alert.error { background:rgba(255,92,122,.12); color:#FFC0CD; border-color:rgba(255,92,122,.45); }
    .alert.info { background:rgba(47,139,255,.1); color:var(--bleu-clair); border-color:rgba(124,192,255,.4); }
    .text-muted { color:var(--doux); font-size:13px; }
    .barre { display:flex; gap:12px; align-items:center; justify-content:space-between; flex-wrap:wrap; margin-bottom:14px; }
    .barre input { max-width:340px; margin-top:0; }
    .onglets { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
    .onglets button.actif { background:var(--btn-grad); color:var(--btn-txt); border-color:transparent; box-shadow:0 0 14px var(--accent-glow); }

    /* Connexion */
    .centre { display:flex; align-items:center; justify-content:center; min-height:100vh; padding:24px; }
    .login-box { width:430px; max-width:100%; text-align:center; padding:40px 34px; border-radius:22px; position:relative;
                 background:linear-gradient(180deg,#0F172A,#080C17); border:1px solid transparent;
                 background-image:linear-gradient(180deg,#0F172A,#080C17), linear-gradient(135deg,var(--bleu),#1a2540 45%,var(--or));
                 background-origin:border-box; background-clip:padding-box, border-box; box-shadow:0 30px 80px rgba(0,0,0,.65), 0 0 60px rgba(47,139,255,.18); }
    .login-box .logo { font-size:44px; display:block; margin-bottom:6px; }
    .login-box .titre-mini { display:inline-block; margin:6px 0 16px; padding:6px 30px; font-size:14px; font-weight:900; font-style:italic; text-transform:uppercase; letter-spacing:.16em; color:#05070C;
                    background:linear-gradient(180deg,#FFFFFF,#AEB9CB 55%,#E9EFF7); clip-path:polygon(12px 0,calc(100% - 12px) 0,100% 50%,calc(100% - 12px) 100%,12px 100%,0 50%); }

    /* Carte image + cases de points */
    .carte-visuel { position:relative; width:680px; max-width:100%; margin:6px auto 22px; border-radius:18px; overflow:hidden; line-height:0;
                    box-shadow:0 0 0 1px var(--trait-fort), 0 0 46px var(--accent-glow), 0 24px 50px rgba(0,0,0,.6); }
    .carte-visuel img { width:100%; height:auto; display:block; }
    .pt { position:absolute; transform:translate(-50%,-50%); display:none; align-items:center; justify-content:center; font-size:clamp(14px,3.6vw,30px); font-weight:900; line-height:1; }
    .pt.plein { display:flex; animation:pop .35s ease-out; }
    @keyframes pop { from { transform:translate(-50%,-50%) scale(.3); opacity:0; } to { transform:translate(-50%,-50%) scale(1); opacity:1; } }
    .cat-custom .pt { width:11.4%; height:14%; clip-path:polygon(50% 0,96% 10%,96% 68%,50% 100%,4% 68%,4% 10%);
                      background:radial-gradient(circle at 50% 35%,#9AD2FF,#2F7BFF 70%); color:#fff; text-shadow:0 0 8px rgba(0,60,200,.9); box-shadow:0 0 18px #4DA3FF; }
    .cat-reparation .pt { width:11.9%; height:11.9%; border-radius:50%;
                      background:radial-gradient(circle at 50% 35%,#FFE9A8,#E0A92F 75%); color:#1A1205; box-shadow:0 0 18px rgba(255,200,80,.85); }

    .solde { text-align:center; margin-bottom:10px; }
    .solde .grand { font-size:52px; font-weight:900; font-style:italic; line-height:1.1; margin-top:8px;
                    background:linear-gradient(180deg,#fff,var(--accent-clair) 60%,var(--accent)); -webkit-background-clip:text; background-clip:text; color:transparent; filter:drop-shadow(0 0 14px var(--accent-glow)); }
    .solde .grand small { font-size:22px; }
    .barre-prog { height:10px; border-radius:99px; background:rgba(255,255,255,.08); overflow:hidden; max-width:420px; margin:10px auto 14px; }
    .barre-prog > i { display:block; height:100%; background:var(--btn-grad); box-shadow:0 0 14px var(--accent-glow); border-radius:99px; transition:width .4s; }
    .recompense { text-align:center; margin:0 auto 18px; max-width:560px; padding:14px 30px; font-weight:900; font-style:italic; text-transform:uppercase; letter-spacing:.06em; color:#080808;
                  background:var(--ban-grad); clip-path:polygon(16px 0,calc(100% - 16px) 0,100% 50%,calc(100% - 16px) 100%,16px 100%,0 50%); filter:drop-shadow(0 0 14px var(--accent-glow)); }
    .actions-points { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin:14px 0 6px; }
    .actions-points form { margin:0; }
    .centre-txt { text-align:center; }
    @media (max-width:700px) { .form-carte { grid-template-columns:1fr; } .choix-type { grid-template-columns:1fr; } .topbar { padding:12px 14px; } .main { padding:20px 12px 48px; } .titre-chrome { font-size:17px; padding:8px 30px; } }
    @media print { .no-print { display:none !important; } body { background:#fff !important; } .carte-visuel { box-shadow:none; -webkit-print-color-adjust:exact; print-color-adjust:exact; } }