:root{
    /* ---- neutres ---------------------------------------------------- */
    --ink:#1b2140;          /* navy de la barre de navigation */
    --ink-soft:#252c52;
    --ink-line:#343c69;
    --paper:#f4f5f9;        /* fond de page */
    --surface:#ffffff;
    --border:#e7e9f2;
    --border-strong:#d5d9ea;
    --text:#1c2033;
    --text-soft:#646b85;
    --text-faint:#959bb2;

    /* ---- marque : le violet de la maquette --------------------------- */
    --brand:#6c4ee0;
    --brand-dark:#5334c4;
    --brand-light:#8b6df0;
    --brand-tint:#eee9fd;

    /* ---- accents de service ------------------------------------------
       La rangée de tuiles du bandeau. Une teinte par famille de service,
       toujours la même : le violet reste l'hébergement, le bleu les
       domaines, le turquoise les bases, le vert la facturation, l'orange
       les serveurs de jeu. La couleur est un repère, pas une décoration. */
    --acc-web:#7c5cfc;
    --acc-dns:#3b82f6;
    --acc-db:#14b8a6;
    --acc-pay:#22c55e;
    --acc-game:#f97316;

    /* ---- statuts ----------------------------------------------------- */
    --success:#16a34a;
    --success-dark:#15803d;
    --success-tint:#dcfce7;
    --danger:#dc2626;
    --danger-tint:#fee2e2;
    --warning:#d97706;
    --warning-tint:#fef3c7;

    /* ---- mode jeu (néon, conservé pour les pages serveurs) ----------- */
    --game:#f97316;
    --game-dark:#c2410c;
    --game-2:#a855f7;
    --game-bg:#0f1120;
    --game-surface:rgba(255,255,255,.045);
    --game-surface-solid:#181b2e;
    --game-border:rgba(255,255,255,.09);
    --game-text:#f4f4f6;
    --game-text-soft:#989ba6;

    --radius:12px;
    --font-display:'Space Grotesk',sans-serif;
    --font-body:'Inter',sans-serif;
    --font-mono:'JetBrains Mono',monospace;
    --shadow-sm:0 1px 2px rgba(28,32,51,.05);
    --shadow-md:0 1px 2px rgba(28,32,51,.05), 0 8px 20px -12px rgba(28,32,51,.18);
    --shadow-lg:0 1px 2px rgba(28,32,51,.05), 0 22px 44px -24px rgba(28,32,51,.35);
    --shadow-brand:0 8px 20px -8px rgba(108,78,224,.55);
    --shadow-game:0 8px 20px -8px rgba(249,115,22,.55);
  }
  *,*::before,*::after{box-sizing:border-box;}
  .sr-only{
    position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
  }
  body{margin:0;}
  html,body{height:100%;}
  body{
    font-family:var(--font-body);
    background:var(--paper);
    color:var(--text);
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3{font-family:var(--font-display);font-weight:600;margin:0;color:var(--text);}
  p{margin:0;}
  a{color:inherit;}
  button{font-family:var(--font-body);}
  input,select,textarea,button{outline:none;}
  :focus-visible{box-shadow:0 0 0 3px var(--brand-tint), 0 0 0 1px var(--brand);border-radius:6px;}
  ::selection{background:var(--brand-tint);color:var(--brand-dark);}

  /* ---------- icons ---------- */
  .icon{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;}
  .icon-sm{width:14px;height:14px;}
  .icon-lg{width:26px;height:26px;}

  /* ---------- buttons / inputs ---------- */
  .btn{
    display:inline-flex;align-items:center;justify-content:center;gap:7px;
    padding:9px 16px;border-radius:9px;border:1px solid var(--border-strong);
    background:var(--surface);color:var(--text);font-size:13px;font-weight:500;
    cursor:pointer;transition:.15s ease;white-space:nowrap;
  }
  .btn:hover{background:var(--paper);border-color:var(--text-faint);transform:translateY(-1px);}
  .btn:active{transform:scale(.98);}
  .btn-primary{background:linear-gradient(135deg,var(--brand),var(--brand-light));border-color:transparent;color:#fff;box-shadow:var(--shadow-brand);}
  .btn-primary:hover{filter:brightness(1.06);box-shadow:0 8px 22px rgba(91,52,222,.32);}
  .btn-ghost{border-color:transparent;background:transparent;}
  .btn-ghost:hover{background:var(--paper);border-color:var(--border);}
  .btn-danger{color:var(--danger);border-color:var(--danger-tint);}
  .btn-danger:hover{background:var(--danger-tint);border-color:var(--danger-tint);}
  .btn-icon{padding:8px;width:36px;height:36px;}
  .btn-sm{padding:6px 12px;font-size:12px;}
  .btn-block{width:100%;}
  .btn[disabled]{opacity:.5;cursor:not-allowed;}

  label{display:block;font-size:13px;font-weight:500;color:var(--text-soft);margin-bottom:6px;}
  input[type=text],input[type=email],input[type=password],input[type=number],input[type=tel],input[type=search],select{
    width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:9px;
    font-size:14px;font-family:var(--font-body);background:var(--surface);color:var(--text);
  }
  input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;}
  input:hover,select:hover{border-color:var(--border-strong);}
  input:focus,select:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-tint);}
  .field{margin-bottom:16px;}
  .checkrow{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-soft);}
  .checkrow input{width:auto;}

  /* toggle switch */
  .toggle{position:relative;display:inline-block;width:38px;height:21px;flex-shrink:0;}
  .toggle input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;z-index:1;}
  .toggle .track{position:absolute;inset:0;background:var(--border-strong);border-radius:999px;transition:.15s;}
  .toggle .track::before{content:"";position:absolute;width:15px;height:15px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.15s;}
  .toggle input:checked + .track{background:var(--brand);}
  .toggle input:checked + .track::before{transform:translateX(17px);}

  /* ---------- cards / layout helpers ---------- */
  .card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow-md);}
  .grid{display:grid;gap:16px;}
  .grid-4{grid-template-columns:repeat(4,minmax(0,1fr));}
  .grid-3{grid-template-columns:repeat(3,minmax(0,1fr));}
  .grid-2{grid-template-columns:repeat(2,minmax(0,1fr));}
  .flex{display:flex;}
  .flex-between{display:flex;align-items:center;justify-content:space-between;}
  .flex-center{display:flex;align-items:center;}
  .gap-8{gap:8px;} .gap-10{gap:10px;} .gap-12{gap:12px;} .gap-16{gap:16px;}
  .muted{color:var(--text-soft);}
  .faint{color:var(--text-faint);}
  .mono{font-family:var(--font-mono);}
  .text-sm{font-size:13px;} .text-xs{font-size:12px;}

  /* pills */
  .pill{display:inline-flex;align-items:center;gap:6px;padding:3px 10px 3px 8px;border-radius:999px;font-size:12px;font-weight:500;}
  .pill.online{background:var(--success-tint);color:var(--success-dark);}
  .pill.offline{background:var(--danger-tint);color:var(--danger);}
  .pill.pending{background:var(--warning-tint);color:var(--warning);}
  .pill.neutral{background:var(--paper);color:var(--text-soft);}
  .dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0;}
  .dot.live{animation:blink 1.6s ease-in-out infinite;}
  @keyframes blink{0%,100%{opacity:1;}50%{opacity:.3;}}

  /* progress bar */
  .progress{height:6px;background:var(--border);border-radius:999px;overflow:hidden;}
  .progress > i{display:block;height:100%;background:var(--brand);border-radius:999px;transition:width .6s ease;}
  .progress.warn > i{background:var(--warning);}

  /* gauge ring */
  .gauge{width:62px;height:62px;border-radius:50%;position:relative;flex-shrink:0;
    background:conic-gradient(var(--brand) calc(var(--pct)*3.6deg), var(--border) 0);transition:background .6s ease;}
  .gauge::after{content:"";position:absolute;inset:6px;background:var(--surface);border-radius:50%;}
  .gauge span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;z-index:1;}

  /* table */
  table.table{width:100%;border-collapse:collapse;font-size:13.5px;}
  table.table th{text-align:left;color:var(--text-faint);font-weight:500;font-size:11px;text-transform:uppercase;letter-spacing:.05em;padding:0 12px 10px;border-bottom:1px solid var(--border);}
  table.table td{padding:13px 12px;border-bottom:1px solid var(--border);}
  table.table tr:last-child td{border-bottom:none;}

  /* toast */
  #toast{position:fixed;bottom:22px;right:22px;background:var(--ink);color:#fff;padding:12px 18px;
    border-radius:9px;font-size:13px;font-weight:500;display:flex;align-items:center;gap:9px;
    box-shadow:0 8px 24px rgba(0,0,0,.18);transform:translateY(20px);opacity:0;pointer-events:none;
    transition:.25s ease;z-index:500;}
  #toast.show{transform:translateY(0);opacity:1;}
  #toast .icon{stroke:var(--success);}

  /* pin / location */
  .loc{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;color:var(--text-faint);}
  .loc .icon{width:12px;height:12px;}

  /* ================= LOGIN ================= */
  #view-login{min-height:100vh;display:grid;grid-template-columns:1fr 1fr;}
  .brand-panel{background:radial-gradient(900px circle at 10% -10%, rgba(124,92,252,.35), transparent 55%),
      radial-gradient(700px circle at 100% 100%, rgba(255,122,26,.12), transparent 50%), var(--ink);
    color:#eef0ee;padding:56px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden;}
  .brand-mark{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-size:19px;font-weight:600;color:#fff;}
  .brand-mark .dot{width:10px;height:10px;background:linear-gradient(135deg,var(--brand-light),var(--game));border-radius:50%;box-shadow:0 0 0 5px rgba(124,92,252,.22);}
  .brand-copy h1{color:#fff;font-size:34px;line-height:1.25;max-width:420px;}
  .brand-copy p{color:#a9adb4;font-size:15px;margin-top:14px;max-width:400px;line-height:1.6;}
  .brand-features{display:flex;flex-direction:column;gap:14px;margin-top:28px;}
  .brand-features .item{display:flex;align-items:center;gap:10px;font-size:13.5px;color:#c7cad0;}
  .brand-features .item .icon{stroke:var(--brand-light);}
  .wave-wrap{height:64px;overflow:hidden;position:relative;margin:8px 0 0;opacity:.9;}
  .wave-track{display:flex;width:200%;animation:scroll 9s linear infinite;}
  .wave-track svg{width:50%;height:64px;flex-shrink:0;}
  @keyframes scroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}
  .brand-foot{font-size:12px;color:#71767f;}

  .login-panel{display:flex;align-items:center;justify-content:center;padding:40px;background:var(--paper);}
  .login-box{width:100%;max-width:360px;}
  .login-box h2{font-size:22px;margin-bottom:6px;}
  .login-box > p.sub{color:var(--text-soft);font-size:14px;margin-bottom:28px;}
  .pwd-wrap{position:relative;}
  .pwd-wrap input{padding-right:40px;}
  .pwd-toggle{position:absolute;right:6px;top:6px;background:none;border:none;padding:6px;cursor:pointer;color:var(--text-faint);}
  .login-row-between{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;font-size:13px;}
  .login-foot{margin-top:22px;text-align:center;font-size:13.5px;color:var(--text-soft);}
  .login-foot a{color:var(--brand-dark);font-weight:500;text-decoration:none;}
  .secure-note{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:24px;color:var(--text-faint);font-size:12px;}
  .secure-note .icon{stroke:var(--text-faint);}

  @media (max-width:860px){
    #view-login{grid-template-columns:1fr;}
    .brand-panel{padding:32px;min-height:260px;}
    .brand-copy h1{font-size:26px;}
  }

  /* =====================================================================
     COQUE — barre de navigation haute + rail de raccourcis
     ---------------------------------------------------------------------
     La navigation principale passe en haut, sur le navy de la maquette ;
     le rail latéral devient clair et ne porte plus que du contextuel
     (raccourcis, consommation, support). Deux niveaux de navigation, deux
     traitements : on ne confond plus « aller ailleurs » et « agir ici ».
     ===================================================================== */

  .topnav{
    position:sticky;top:0;z-index:40;
    background:var(--ink);
    color:#c9cee4;
    border-bottom:1px solid rgba(255,255,255,.07);
  }
  .topnav-inner{
    display:flex;align-items:center;gap:22px;
    padding:0 24px;height:58px;
  }
  .topnav .brand-mark{
    display:flex;align-items:center;gap:10px;flex-shrink:0;
    color:#fff;text-decoration:none;
    font-family:var(--font-display);font-size:15px;font-weight:600;
    letter-spacing:-.01em;
  }
  .brand-badge{
    width:30px;height:30px;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;
    border-radius:9px;color:#fff;
    background:linear-gradient(135deg,var(--brand),var(--brand-light));
    box-shadow:0 6px 14px -6px rgba(108,78,224,.9);
  }
  .brand-badge .icon{width:17px;height:17px;}
  .brand-mark .brand-txt{display:flex;flex-direction:column;line-height:1.15;}
  .brand-mark .brand-txt small{
    font-family:var(--font-body);font-size:9.5px;font-weight:400;
    color:#8891b5;letter-spacing:.02em;
  }

  /* --- liens principaux --- */
  .topnav-links{display:flex;align-items:center;gap:2px;min-width:0;overflow-x:auto;}
  .topnav-links::-webkit-scrollbar{display:none;}
  .nav-item{
    position:relative;
    display:flex;align-items:center;gap:8px;
    padding:8px 13px;border-radius:9px;
    font-size:13px;font-weight:500;white-space:nowrap;
    color:#a3abcc;text-decoration:none;
    transition:.15s ease;
  }
  .nav-item .icon{width:16px;height:16px;stroke:currentColor;opacity:.75;}
  .nav-item:hover{background:rgba(255,255,255,.07);color:#fff;}
  .nav-item:hover .icon{opacity:1;}
  .nav-item.active{background:rgba(255,255,255,.11);color:#fff;}
  .nav-item.active .icon{opacity:1;}
  .nav-item.active::after{
    content:"";position:absolute;left:13px;right:13px;bottom:-9px;height:2px;
    border-radius:2px;
    background:linear-gradient(90deg,var(--brand-light),var(--acc-dns));
  }
  .nav-item.nav-game.active::after{background:linear-gradient(90deg,var(--game),#fbbf24);}
  .nav-item .badge{
    background:rgba(255,255,255,.14);color:#dfe4f5;
    font-size:10.5px;font-weight:600;padding:1px 6px;border-radius:999px;
  }
  .nav-item.active .badge{background:rgba(255,255,255,.24);color:#fff;}

  /* --- outils à droite --- */
  .topnav-tools{display:flex;align-items:center;gap:9px;margin-left:auto;flex-shrink:0;}
  .search-box{
    display:flex;align-items:center;gap:8px;
    width:210px;padding:7px 12px;border-radius:9px;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.1);
    color:#8891b5;
  }
  .search-box:focus-within{border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.12);}
  .search-box input{
    border:none;background:none;padding:0;width:100%;
    font-size:13px;color:#fff;
  }
  .search-box input::placeholder{color:#7e87ab;}
  .search-box input:focus{box-shadow:none;}

  .icon-btn{
    position:relative;
    width:36px;height:36px;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;
    border-radius:9px;cursor:pointer;
    background:rgba(255,255,255,.07);
    border:1px solid rgba(255,255,255,.1);
    color:#c9cee4;
    transition:.15s ease;
  }
  .icon-btn:hover{background:rgba(255,255,255,.14);color:#fff;}
  .icon-btn .ping{
    position:absolute;top:6px;right:7px;width:7px;height:7px;border-radius:50%;
    background:var(--acc-game);box-shadow:0 0 0 2px var(--ink);
  }

  .user-pill{
    display:flex;align-items:center;gap:9px;
    padding:5px 12px 5px 5px;border-radius:999px;cursor:pointer;
    background:rgba(255,255,255,.07);
    border:1px solid rgba(255,255,255,.1);
    color:#e6e9f5;font-size:12.5px;font-weight:500;
    transition:.15s ease;
  }
  .user-pill:hover{background:rgba(255,255,255,.14);}
  .user-pill .mini-avatar{
    width:26px;height:26px;flex-shrink:0;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-family:var(--font-display);font-size:10.5px;font-weight:600;color:#fff;
    background:linear-gradient(135deg,var(--brand),var(--brand-light));
  }
  .user-pill .tag{color:#8891b5;font-weight:400;}
  .user-pill .icon{width:14px;height:14px;color:#8891b5;}

  /* --- menus déroulants --- */
  .dropdown-wrap{position:relative;}
  .dropdown{
    position:absolute;top:46px;right:0;z-index:50;
    min-width:250px;padding:8px;display:none;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:14px;
    box-shadow:var(--shadow-lg);
    color:var(--text);
  }
  .dropdown.show{display:block;}
  .dropdown-head{padding:9px 10px 10px;}
  .dropdown-head strong{display:block;font-size:13.5px;}
  .dropdown-head span{font-size:12px;color:var(--text-faint);}
  .dropdown-item{
    display:flex;align-items:center;gap:10px;
    padding:9px 10px;border-radius:9px;
    font-size:13.5px;color:var(--text);text-decoration:none;cursor:pointer;
  }
  .dropdown-item:hover{background:var(--paper);}
  .dropdown-item .icon{stroke:var(--text-soft);}
  .dropdown-divider{height:1px;background:var(--border);margin:6px 2px;}
  .notif-item{padding:10px;border-radius:9px;}
  .notif-item:hover{background:var(--paper);}
  .notif-item p{font-size:13px;}
  .notif-item .t{font-size:11.5px;color:var(--text-faint);margin-top:2px;}
  .notif-vide{padding:18px 12px;text-align:center;font-size:13px;color:var(--text-faint);}

  /* =====================================================================
     Rail de raccourcis (clair)
     ===================================================================== */

  #app-shell{display:grid;grid-template-columns:236px minmax(0,1fr);align-items:start;}

  .sidebar{
    position:sticky;top:58px;
    height:calc(100vh - 58px);overflow-y:auto;
    padding:22px 16px 30px;
    background:var(--surface);
    border-right:1px solid var(--border);
    display:flex;flex-direction:column;gap:26px;
  }
  .rail-group > .rail-label{
    font-family:var(--font-display);
    font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
    color:var(--text-faint);
    padding:0 8px;margin-bottom:9px;
  }
  .rail-item{
    display:flex;align-items:center;gap:10px;
    padding:8px 10px;border-radius:9px;margin-bottom:1px;
    font-size:13px;font-weight:500;
    color:var(--text-soft);text-decoration:none;
    transition:.14s ease;
  }
  .rail-item .icon{width:16px;height:16px;color:var(--text-faint);}
  .rail-item:hover{background:var(--paper);color:var(--text);}
  .rail-item:hover .icon{color:var(--brand);}
  .rail-item.active{background:var(--brand-tint);color:var(--brand-dark);font-weight:600;}
  .rail-item.active .icon{color:var(--brand);}
  .rail-item .rail-count{
    margin-left:auto;font-size:11px;font-weight:600;
    color:var(--text-faint);
  }
  .rail-item.active .rail-count{color:var(--brand);}

  /* consommation : une barre par quota réellement ouvert */
  .rail-usage{display:flex;flex-direction:column;gap:13px;padding:0 8px;}
  .rail-meter .m-head{
    display:flex;justify-content:space-between;align-items:baseline;
    font-size:11.5px;color:var(--text-soft);margin-bottom:5px;
  }
  .rail-meter .m-head b{font-size:11.5px;font-weight:600;color:var(--text);}
  .rail-meter .m-track{height:5px;border-radius:999px;background:var(--border);overflow:hidden;}
  .rail-meter .m-track > i{
    display:block;height:100%;border-radius:999px;
    background:var(--m-tone,var(--brand));
    transition:width .7s cubic-bezier(.2,.8,.2,1);
  }
  .rail-meter[data-level="warn"] .m-track > i{background:var(--warning);}
  .rail-meter[data-level="crit"] .m-track > i{background:var(--danger);}
  .rail-empty{padding:0 8px;font-size:12px;line-height:1.55;color:var(--text-faint);}

  .rail-card{
    margin:0 4px;padding:14px;border-radius:13px;
    background:linear-gradient(150deg,var(--ink),#2a3160);
    color:#dfe4f5;
  }
  .rail-card strong{display:block;color:#fff;font-size:13px;font-family:var(--font-display);}
  .rail-card p{font-size:11.5px;line-height:1.5;color:#a3abcc;margin-top:4px;}
  .rail-card .rail-cta{
    display:inline-flex;align-items:center;gap:6px;margin-top:11px;
    padding:7px 12px;border-radius:8px;
    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.16);
    color:#fff;font-size:12px;font-weight:500;text-decoration:none;
    transition:.15s ease;
  }
  .rail-card .rail-cta:hover{background:rgba(255,255,255,.22);}

  .sidebar-user{
    margin-top:auto;padding-top:16px;border-top:1px solid var(--border);
    display:flex;align-items:center;gap:10px;
  }
  .avatar{
    width:34px;height:34px;flex-shrink:0;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-family:var(--font-display);font-size:12.5px;font-weight:600;color:#fff;
    background:linear-gradient(135deg,var(--brand),var(--brand-light));
  }
  .sidebar-user .name{font-size:12.5px;font-weight:600;}
  .sidebar-user .plan{font-size:11px;color:var(--text-faint);}
  .btn-logout{
    margin-left:auto;padding:7px;border-radius:8px;
    color:var(--text-faint);display:flex;text-decoration:none;
  }
  .btn-logout:hover{background:var(--paper);color:var(--danger);}

  .main{display:flex;flex-direction:column;min-height:calc(100vh - 58px);}

  /* promo banner */
  .promo-banner{display:flex;align-items:center;justify-content:space-between;gap:16px;color:#fff;
    background:linear-gradient(120deg,var(--brand-dark) 0%,var(--brand) 50%,var(--brand-light) 100%);border-radius:var(--radius);
    padding:15px 20px;margin-bottom:24px;box-shadow:var(--shadow-brand);}
  .promo-banner p{font-size:13.5px;line-height:1.4;}
  .promo-actions{display:flex;align-items:center;gap:6px;flex-shrink:0;}
  .promo-close{background:none;border:none;color:rgba(255,255,255,.75);cursor:pointer;padding:6px;display:flex;}
  .promo-close:hover{color:#fff;}

  .content{padding:28px 32px 60px;flex:1;}
  /* Le serveur n'envoie qu'une seule vue par page : plus de bascule JS. */
  .view{display:block;animation:fade .18s ease;}
  @keyframes fade{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:none;}}

  .section-head{display:flex;align-items:baseline;justify-content:space-between;margin:34px 0 14px;}
  .section-head:first-child{margin-top:0;}
  .section-head h2{font-size:16px;}
  .section-head a.link,.link-btn{font-size:13px;color:var(--brand-dark);font-weight:500;text-decoration:none;background:none;border:none;cursor:pointer;padding:0;}

  .stat-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow-md);transition:transform .15s ease;}
  .stat-card:hover{transform:translateY(-2px);}
  .stat-card .stat-icon{width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;margin-bottom:12px;}
  .stat-card .stat-icon .icon{width:16px;height:16px;}
  .stat-card .stat-icon.c-brand{background:var(--brand-tint);color:var(--brand-dark);}
  .stat-card .stat-icon.c-success{background:var(--success-tint);color:var(--success-dark);}
  .stat-card .stat-icon.c-warning{background:var(--warning-tint);color:var(--warning);}
  .stat-card .stat-icon.c-game{background:#fdece0;color:var(--game-dark);}
  .stat-card .label{font-size:12.5px;color:var(--text-soft);margin-bottom:6px;}
  .stat-card .value{font-size:23px;font-family:var(--font-display);font-weight:600;}
  .stat-card .value small{font-size:13px;font-weight:500;color:var(--text-soft);font-family:var(--font-body);}

  .service-row{display:flex;align-items:center;gap:16px;padding:15px 16px;border:1px solid var(--border);border-radius:14px;margin-bottom:10px;cursor:pointer;transition:.15s;background:var(--surface);box-shadow:var(--shadow-sm);}
  .service-row:hover{border-color:var(--border-strong);box-shadow:var(--shadow-md);transform:translateY(-1px);}
  .service-row .icon-badge{width:38px;height:38px;border-radius:10px;background:var(--brand-tint);color:var(--brand-dark);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
  .service-row .icon-badge.hosting{background:#eae8f5;color:#5b4fa0;}
  .service-row .main-txt{flex:1;min-width:0;}
  .service-row .main-txt .name{font-size:14px;font-weight:500;}
  .service-row .main-txt .sub{font-size:12.5px;color:var(--text-soft);}
  .service-row .mid{display:flex;align-items:center;gap:18px;}
  .service-row .actions{display:flex;gap:6px;}

  .activity-item{display:flex;gap:12px;padding:10px 0;border-bottom:1px solid var(--border);}
  .activity-item:last-child{border-bottom:none;}
  .activity-item .icon-badge{width:30px;height:30px;border-radius:8px;background:var(--paper);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
  .activity-item .icon-badge .icon{width:15px;height:15px;stroke:var(--text-soft);}
  .activity-item p{font-size:13.5px;}
  .activity-item .t{font-size:12px;color:var(--text-faint);margin-top:2px;}

  /* filter chips */
  .chip-row{display:flex;gap:8px;margin-bottom:18px;}
  .chip{padding:6px 13px;border-radius:999px;border:1px solid var(--border);font-size:12.5px;font-weight:500;color:var(--text-soft);background:var(--surface);cursor:pointer;transition:.15s;}
  .chip:hover{border-color:var(--border-strong);}
  .chip.active{background:var(--ink);color:#fff;border-color:var(--ink);}

  /* server card (list) */
  .server-card{border:1px solid var(--border);border-radius:14px;padding:18px 20px;margin-bottom:12px;background:var(--surface);box-shadow:var(--shadow-sm);transition:.15s;}
  .server-card:hover{box-shadow:var(--shadow-md);}
  .server-card .top-row{display:flex;align-items:center;gap:14px;margin-bottom:14px;}
  .server-card .icon-badge{width:40px;height:40px;border-radius:11px;background:var(--brand-tint);color:var(--brand-dark);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
  .server-card .name{font-size:14.5px;font-weight:500;}
  .server-card .game{font-size:12.5px;color:var(--text-soft);}
  .server-card .ip{font-size:12px;color:var(--text-faint);margin-top:2px;}
  .server-card .bottom-row{display:flex;align-items:center;gap:26px;flex-wrap:wrap;}
  .server-card .metric{min-width:110px;}
  .server-card .metric .l{font-size:11px;color:var(--text-faint);margin-bottom:5px;}
  .server-card .spacer{flex:1;}

  /* server detail */
  .back-link{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--text-soft);cursor:pointer;margin-bottom:16px;background:none;border:none;padding:0;}
  .back-link:hover{color:var(--text);}
  .sd-header{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:24px;flex-wrap:wrap;}
  .sd-title{display:flex;align-items:center;gap:14px;}
  .sd-title .icon-badge{width:46px;height:46px;border-radius:13px;background:var(--brand-tint);color:var(--brand-dark);display:flex;align-items:center;justify-content:center;}
  .sd-title h1{font-size:20px;}
  .sd-title .game{font-size:13px;color:var(--text-soft);margin-top:2px;}
  .sd-meta{display:flex;align-items:center;gap:14px;margin-top:10px;flex-wrap:wrap;}
  .ip-copy{display:flex;align-items:center;gap:7px;font-family:var(--font-mono);font-size:12.5px;background:var(--paper);border:1px solid var(--border);padding:5px 10px;border-radius:8px;}
  .ip-copy button{background:none;border:none;cursor:pointer;color:var(--text-faint);display:flex;padding:0;}
  .ip-copy button:hover{color:var(--brand-dark);}
  .sd-actions{display:flex;gap:8px;}

  .gauge-row{display:flex;gap:14px;margin-bottom:26px;}
  .gauge-card{flex:1;display:flex;align-items:center;gap:14px;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:16px;box-shadow:var(--shadow-sm);}
  .gauge-card .g-label{font-size:12.5px;color:var(--text-soft);}
  .gauge-card .g-value{font-size:16px;font-weight:600;font-family:var(--font-display);margin-top:2px;}

  .tabs{display:flex;gap:4px;border-bottom:1px solid var(--border);margin-bottom:20px;overflow-x:auto;}
  .tab-btn{padding:10px 14px;font-size:13.5px;font-weight:500;color:var(--text-soft);background:none;border:none;
    cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap;margin-bottom:-1px;transition:.15s;}
  .tab-btn:hover{color:var(--text);}
  .tab-btn.active{color:var(--brand-dark);border-bottom-color:var(--brand);}
  .tab-panel{display:none;}
  .tab-panel.active{display:block;animation:fade .15s ease;}

  .console-box{background:var(--ink);border-radius:12px;padding:16px 18px;height:280px;overflow:auto;font-family:var(--font-mono);font-size:12.5px;line-height:1.9;color:#c7cad0;}
  /* Les logs ARK contiennent des lignes très longues sans espace (paramètres de
     lancement : TheIsland_WP?listen?SessionName=…). Sans coupure, cette ligne
     déborde et ÉLARGIT toute la page. On casse donc les mots trop longs et on
     confine tout débordement résiduel à la boîte (overflow:auto ci-dessus). */
  .console-box > div{overflow-wrap:anywhere;word-break:break-word;}
  .console-box .l-info{color:#9aa0a8;}
  .console-box .l-warn{color:#e3ab5d;}
  .console-box .l-err{color:#e37c7c;}
  .console-box .l-ok{color:#4ade80;}
  /* Sortie renvoyée par le serveur, en retrait visuel de la commande saisie. */
  .console-box .l-dim{color:#8a93a6;}
  .console-input-row{display:flex;gap:8px;margin-top:12px;}
  .console-input-row input{font-family:var(--font-mono);font-size:13px;}
  .quick-cmds{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap;}
  .quick-cmd{font-family:var(--font-mono);font-size:11.5px;background:var(--paper);border:1px solid var(--border);
    padding:4px 9px;border-radius:6px;cursor:pointer;color:var(--text-soft);}
  .quick-cmd:hover{border-color:var(--border-strong);color:var(--text);}

  .list-row{display:flex;align-items:center;gap:14px;padding:13px 4px;border-bottom:1px solid var(--border);}
  .list-row:last-child{border-bottom:none;}
  .list-row .icon-badge{width:32px;height:32px;border-radius:8px;background:var(--paper);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--text-soft);}
  .list-row .grow{flex:1;min-width:0;}
  .list-row .name{font-size:13.5px;font-weight:500;}
  .list-row .sub{font-size:12px;color:var(--text-faint);margin-top:2px;}
  .plugin-state{font-size:12px;font-weight:500;}
  .plugin-state.on{color:var(--success-dark);}
  .plugin-state.off{color:var(--text-faint);}

  .danger-zone{border:1px solid var(--danger-tint);background:var(--danger-tint);border-radius:14px;padding:18px 20px;margin-top:24px;}
  .danger-zone h3{font-size:14px;color:var(--danger);margin-bottom:4px;}
  .danger-zone p{font-size:13px;color:#8a3c3c;margin-bottom:14px;}
  .danger-zone .row{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-top:1px solid rgba(220,38,38,.18);}
  .danger-zone .row:first-of-type{border-top:none;}


  /* ================= MODE GAME (Serveurs de jeu — inspiré Nitrado / G-Portal) ================= */
  .main.mode-game{
    background:
      radial-gradient(650px circle at 12% 0%, rgba(255,122,26,.09), transparent 60%),
      radial-gradient(550px circle at 92% 25%, rgba(168,85,247,.10), transparent 55%),
      var(--game-bg);
  }
  .main.mode-game .topbar{background:rgba(10,12,17,.78);border-bottom-color:var(--game-border);backdrop-filter:blur(12px);}
  .main.mode-game .topbar h1{color:#fff;}
  .main.mode-game .topbar-sep{color:var(--game-border);}
  .main.mode-game .workspace-pill{background:rgba(255,255,255,.06);border-color:var(--game-border);color:var(--game-text);}
  .main.mode-game .search-box{background:rgba(255,255,255,.05);border-color:var(--game-border);color:var(--game-text-soft);}
  .main.mode-game .search-box input{color:var(--game-text);}
  .main.mode-game .icon-btn{border-color:var(--game-border);color:var(--game-text-soft);}
  .main.mode-game .icon-btn:hover{background:rgba(255,255,255,.08);}
  .main.mode-game .dropdown{background:#15181f;border-color:var(--game-border);}
  .main.mode-game .dropdown-item{color:var(--game-text);}
  .main.mode-game .dropdown-item:hover{background:rgba(255,255,255,.06);}
  .main.mode-game .dropdown-divider{background:var(--game-border);}
  .main.mode-game .notif-item:hover{background:rgba(255,255,255,.06);}

  .main.mode-game .section-head h2, .main.mode-game h2{color:#fff;}
  .main.mode-game .muted, .main.mode-game p.muted{color:var(--game-text-soft);}
  .main.mode-game .link-btn{color:var(--game);}
  .main.mode-game .back-link{color:var(--game-text-soft);}
  .main.mode-game .back-link:hover{color:#fff;}

  .main.mode-game .chip{background:rgba(255,255,255,.05);border-color:var(--game-border);color:var(--game-text-soft);}
  .main.mode-game .chip:hover{border-color:rgba(255,255,255,.2);}
  .main.mode-game .chip.active{background:linear-gradient(135deg,var(--game),#ffab5e);border-color:transparent;color:#2a1500;}

  .main.mode-game .card,.main.mode-game .server-card,.main.mode-game .gauge-card{
    background:var(--game-surface);border-color:var(--game-border);color:var(--game-text);
    backdrop-filter:blur(16px);box-shadow:none;}
  .main.mode-game .server-card:hover{border-color:rgba(255,255,255,.16);}
  .main.mode-game .icon-badge{background:rgba(255,122,26,.14);color:var(--game);}
  .main.mode-game .server-card .ip,.main.mode-game .loc{color:var(--game-text-soft);}
  .main.mode-game .server-card .metric .l{color:var(--game-text-soft);}

  .main.mode-game .btn{background:rgba(255,255,255,.05);border-color:var(--game-border);color:var(--game-text);}
  .main.mode-game .btn:hover{background:rgba(255,255,255,.1);}
  .main.mode-game .btn-primary{background:linear-gradient(135deg,var(--game),#ffab5e);border-color:transparent;color:#2a1500;box-shadow:var(--shadow-game);}
  .main.mode-game .btn-primary:hover{filter:brightness(1.05);}
  .main.mode-game .btn-danger{color:#ff9c9c;border-color:rgba(220,38,38,.35);}
  .main.mode-game .btn-danger:hover{background:rgba(220,38,38,.14);}

  .main.mode-game .pill.online{background:rgba(22,163,74,.16);color:#4ade80;box-shadow:0 0 14px rgba(74,222,128,.25);}
  .main.mode-game .pill.offline{background:rgba(220,38,38,.16);color:#f87171;}
  .main.mode-game .pill.pending{background:rgba(217,119,6,.18);color:#fbbf24;}
  .main.mode-game .pill.neutral{background:rgba(255,255,255,.07);color:var(--game-text-soft);}

  .main.mode-game .progress{background:var(--game-border);}
  .main.mode-game .progress > i{background:linear-gradient(90deg,var(--game),#ffab5e);}
  .main.mode-game .progress.warn > i{background:linear-gradient(90deg,#f59e0b,#fbbf24);}

  .main.mode-game .gauge{background:conic-gradient(var(--game) calc(var(--pct)*3.6deg), var(--game-border) 0);}
  .main.mode-game .gauge::after{background:var(--game-surface-solid);}
  .main.mode-game .gauge span{color:#fff;}

  .main.mode-game .sd-title h1{color:#fff;}
  .main.mode-game .sd-title .game{color:var(--game-text-soft);}
  .main.mode-game .ip-copy{background:rgba(255,255,255,.05);border-color:var(--game-border);color:var(--game-text);}
  .main.mode-game .ip-copy button:hover{color:var(--game);}

  .main.mode-game .tabs{border-bottom-color:var(--game-border);}
  .main.mode-game .tab-btn{color:var(--game-text-soft);}
  .main.mode-game .tab-btn:hover{color:#fff;}
  .main.mode-game .tab-btn.active{color:var(--game);border-bottom-color:var(--game);}

  .main.mode-game .console-box{background:#000;border:1px solid var(--game-border);}
  .main.mode-game .quick-cmd{background:rgba(255,255,255,.05);border-color:var(--game-border);color:var(--game-text-soft);}
  .main.mode-game .quick-cmd:hover{border-color:rgba(255,255,255,.25);color:#fff;}

  .main.mode-game .list-row{border-bottom-color:var(--game-border);}
  .main.mode-game .list-row .name{color:var(--game-text);}
  .main.mode-game .list-row .icon-badge{background:rgba(255,255,255,.06);color:var(--game-text-soft);}
  .main.mode-game .plugin-state.off{color:var(--game-text-soft);}

  .main.mode-game label{color:var(--game-text-soft);}
  .main.mode-game input,.main.mode-game select{background:rgba(255,255,255,.05);border-color:var(--game-border);color:var(--game-text);}
  .main.mode-game input:focus,.main.mode-game select:focus{border-color:var(--game);box-shadow:0 0 0 3px rgba(255,122,26,.18);}

  .main.mode-game .danger-zone{background:rgba(220,38,38,.09);border-color:rgba(220,38,38,.3);}
  .main.mode-game .danger-zone h3{color:#ff9c9c;}
  .main.mode-game .danger-zone p{color:#e3aeae;}

  /* mobile */
  @media (max-width:1080px){
    #app-shell{grid-template-columns:1fr;}
    .sidebar{
      position:static;height:auto;overflow:visible;
      flex-direction:row;flex-wrap:wrap;align-items:flex-start;gap:18px;
      border-right:0;border-bottom:1px solid var(--border);
      padding:16px 20px;
    }
    .rail-group{flex:1;min-width:190px;}
    .sidebar-user{margin-top:0;border-top:0;padding-top:0;width:100%;}
  }
  @media (max-width:820px){
    .topnav-inner{height:auto;padding:10px 16px;flex-wrap:wrap;gap:10px;}
    .topnav-links{order:3;width:100%;padding-bottom:2px;}
    .nav-item.active::after{bottom:-2px;}
    .topnav-tools{margin-left:auto;}
    .search-box{display:none;}
    .user-pill .u-name,.user-pill .tag{display:none;}
    .sidebar{position:static;top:auto;}
    .rail-card{display:none;}
    .content{padding:20px 16px 50px;}
    .grid-4,.grid-3,.grid-2{grid-template-columns:repeat(2,minmax(0,1fr));}
    .gauge-row{flex-wrap:wrap;}
    .gauge-card{min-width:140px;}
  }
  @media (max-width:560px){
    .grid-4,.grid-3,.grid-2{grid-template-columns:1fr;}
  }



/* =====================================================================
   AUTH — alertes, code OTP, écrans d'état
   ===================================================================== */

.auth-alert{
  padding:11px 13px;
  border-radius:10px;
  font-size:13.5px;
  line-height:1.45;
  margin-bottom:18px;
  border:1px solid transparent;
}
.auth-alert.is-error{
  background:var(--danger-tint);
  border-color:var(--danger);
  color:var(--danger);
}
.auth-alert.is-success{
  background:var(--success-tint);
  border-color:var(--success);
  color:var(--success-dark);
}

.auth-link{
  color:var(--brand-dark);
  text-decoration:none;
  font-size:13px;
  font-weight:500;
}
.auth-link:hover{text-decoration:underline;}

/* Champ code à 6 chiffres */
.otp-input{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:26px;
  letter-spacing:.42em;
  text-align:center;
  padding-left:.42em; /* compense le letter-spacing du dernier caractère */
}

/* Pastilles d'état (mail envoyé / lien expiré) */
.auth-icon-ok,
.auth-icon-ko{
  width:52px;height:52px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  margin:0 0 18px;
}
.auth-icon-ok{background:var(--brand-tint);color:var(--brand);}
.auth-icon-ko{background:var(--warning-tint);color:var(--warning);}
.auth-icon-ok .icon,
.auth-icon-ko .icon{width:26px;height:26px;}

.btn[disabled]{opacity:.55;cursor:not-allowed;pointer-events:none;}

/* =====================================================================
   PAGES D'ERREUR — 404 / 500
   ===================================================================== */

.error-page{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:60vh;
  padding:40px 24px;
}
/* Hors du shell applicatif (visiteur non connecté), on centre sur la page. */
body.is-guest .error-page{min-height:100vh;background:var(--paper);}

.error-card{
  width:100%;
  max-width:520px;
  text-align:center;
}

.error-code{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  font-family:'Space Grotesk',sans-serif;
  font-size:76px;
  font-weight:600;
  line-height:1;
  color:var(--text);
  margin-bottom:22px;
}
.error-code .icon{
  width:60px;height:60px;
  color:var(--brand);
  opacity:.85;
}

.error-icon-ko{
  width:60px;height:60px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--danger-tint);
  color:var(--danger);
  margin:0 auto 22px;
}
.error-icon-ko .icon{width:30px;height:30px;}

.error-card h1{
  font-family:'Space Grotesk',sans-serif;
  font-size:24px;
  font-weight:600;
  color:var(--text);
  margin:0 0 10px;
}
.error-sub{
  font-size:14.5px;
  line-height:1.6;
  color:var(--text-soft);
  margin:0 auto 26px;
  max-width:400px;
}

.error-actions{
  display:flex;
  gap:10px;
  justify-content:center;
  flex-wrap:wrap;
  margin-bottom:34px;
}

.error-links{
  border-top:1px solid var(--border);
  padding-top:22px;
  display:flex;
  flex-wrap:wrap;
  gap:8px 20px;
  align-items:center;
  justify-content:center;
}
.error-links-title{
  width:100%;
  font-size:11px;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--text-faint);
  margin-bottom:4px;
}
.error-links a{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:13.5px;
  color:var(--text-soft);
  text-decoration:none;
  padding:5px 0;
}
.error-links a:hover{color:var(--brand-dark);}
.error-links a .icon{color:var(--text-faint);}
.error-links a:hover .icon{color:var(--brand);}

.error-ref{
  margin-top:26px;
  font-size:12px;
  color:var(--text-faint);
}
.error-ref code{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  background:var(--paper);
  border:1px solid var(--border);
  border-radius:6px;
  padding:2px 6px;
  font-size:11.5px;
  word-break:break-all;
}

@media (max-width:520px){
  .error-code{font-size:56px;}
  .error-code .icon{width:44px;height:44px;}
}

/* Navigation : les entrées sont désormais des liens <a>, pas des <div>. */
.sidebar a.nav-item,
.sidebar a.brand-mark,
.dropdown a.dropdown-item{text-decoration:none;}
a.btn-logout{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
}

/* =====================================================================
   JAUGES — sortie de la fonction jauge()
   ===================================================================== */

.jauge{margin:0 0 12px;}
.jauge-label{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  font-size:12.5px;
  color:var(--text-soft);
  margin-bottom:6px;
}
.jauge-label span{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:12px;
  color:var(--text);
}
.jauge-piste{
  height:6px;
  border-radius:6px;
  background:var(--border);
  overflow:hidden;
}
.jauge-piste span{
  display:block;
  height:100%;
  border-radius:6px;
  background:var(--brand);
  transition:width .3s ease;
}
/* La couleur change quand la ressource approche de la saturation. */
.jauge-alerte  .jauge-piste span{background:var(--warning);}
.jauge-critique .jauge-piste span{background:var(--danger);}
.jauge-critique .jauge-label span{color:var(--danger);font-weight:600;}

/* =====================================================================
   TABLEAU DE BORD
   ===================================================================== */

.dash-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:20px;
  margin-bottom:22px;
  flex-wrap:wrap;
}
.dash-head h2{
  font-family:'Space Grotesk',sans-serif;
  font-size:21px;
  font-weight:600;
  margin:0;
}
.dash-plan{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:1px;
  padding:10px 14px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--surface);
}
.dash-plan-label{
  font-size:10.5px;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--text-faint);
}
.dash-plan strong{font-size:14px;}

/* Bandeau d'échéance */
.dash-alert{
  display:flex;
  align-items:center;
  gap:12px;
  padding:13px 16px;
  border-radius:10px;
  margin-bottom:20px;
  background:var(--warning-tint);
  border:1px solid var(--warning);
  font-size:13.5px;
}
.dash-alert .icon{color:var(--warning);flex-shrink:0;}
.dash-alert-txt{flex:1;}
.dash-alert.is-urgent{
  background:var(--danger-tint);
  border-color:var(--danger);
}
.dash-alert.is-urgent .icon{color:var(--danger);}

/* Colonnes : la carte de gauche ne doit pas s'étirer sur la hauteur
   de la colonne de droite. */
.dash-cols{margin-top:20px;align-items:start;}
.dash-side{display:flex;flex-direction:column;gap:16px;}

/* Lignes de service */
.service-main{flex:1;min-width:0;}
.service-main .name{
  display:flex;
  align-items:center;
  gap:6px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.service-metrics{
  display:flex;
  gap:12px;
  margin-top:5px;
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:11px;
  color:var(--text-faint);
}
a.service-row{text-decoration:none;color:inherit;}
a.service-row:hover{background:var(--paper);}

.ssl-tag{display:inline-flex;color:var(--success);}
.ssl-tag .icon{width:13px;height:13px;}

/* Barre de quota compacte, sous une ligne de service */
.mini-piste{
  height:3px;
  border-radius:3px;
  background:var(--border);
  margin-top:7px;
  overflow:hidden;
}
.mini-piste span{
  display:block;
  height:100%;
  border-radius:3px;
  background:var(--brand);
}

/* État vide */
.dash-empty{
  text-align:center;
  padding:56px 24px;
  border:1px dashed var(--border-strong);
  border-radius:14px;
  background:var(--surface);
}
.dash-empty-icon{
  width:56px;height:56px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--brand-tint);
  color:var(--brand);
  margin:0 auto 18px;
}
.dash-empty-icon .icon{width:26px;height:26px;}
.dash-empty h3{
  font-family:'Space Grotesk',sans-serif;
  font-size:18px;
  margin:0 0 8px;
}
.dash-empty p{
  color:var(--text-soft);
  font-size:14px;
  max-width:380px;
  margin:0 auto 22px;
  line-height:1.6;
}
.dash-empty-actions{
  display:flex;
  gap:10px;
  justify-content:center;
  flex-wrap:wrap;
}

@media (max-width:900px){
  .dash-head{flex-direction:column;}
  .dash-plan{align-items:flex-start;width:100%;}
}

/* =====================================================================
   MODALES
   ===================================================================== */

.modal-overlay{
  position:fixed;
  inset:0;
  background:rgba(16,20,29,.55);
  backdrop-filter:blur(2px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  z-index:200;
  animation:auth-in .16s ease-out;
}
.modal-overlay[hidden]{display:none;}

.modal{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:12px;
  width:100%;
  max-width:460px;
  max-height:90vh;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  box-shadow:0 20px 60px rgba(16,20,29,.28);
}
.modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:16px 18px;
  border-bottom:1px solid var(--border);
}
.modal-head h3{
  font-family:'Space Grotesk',sans-serif;
  font-size:16px;
  margin:0;
}
.modal-close{
  background:none;
  border:0;
  cursor:pointer;
  color:var(--text-faint);
  display:flex;
  padding:4px;
  border-radius:6px;
}
.modal-close:hover{background:var(--paper);color:var(--text);}

.modal-body{padding:18px;overflow-y:auto;}
.modal-body .field:last-child{margin-bottom:0;}

/* Barre de défilement fine et discrète plutôt que la barre grise par défaut
   du navigateur — visible seulement au survol pour rester légère. */
.modal-body{
  scrollbar-width:thin;
  scrollbar-color:transparent transparent;
}
.modal-body:hover{ scrollbar-color:var(--border-strong) transparent; }
.modal-body::-webkit-scrollbar{ width:7px; }
.modal-body::-webkit-scrollbar-track{ background:transparent; }
.modal-body::-webkit-scrollbar-thumb{
  background:transparent;
  border-radius:999px;
}
.modal-body:hover::-webkit-scrollbar-thumb{ background:var(--border-strong); }
.modal-body::-webkit-scrollbar-thumb:hover{ background:var(--text-faint); }

.modal-foot{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  padding:14px 18px;
  border-top:1px solid var(--border);
  background:var(--paper);
  border-radius:0 0 12px 12px;
}

.field-hint{
  font-size:12px;
  color:var(--text-faint);
  margin-top:6px;
}

/* Un select doit s'aligner sur les autres champs du formulaire */
.field select{
  width:100%;
  padding:9px 11px;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--surface);
  color:var(--text);
  font-family:inherit;
  font-size:13.5px;
}
.field select:focus{
  outline:none;
  border-color:var(--brand);
  box-shadow:0 0 0 3px var(--brand-tint);
}
.field select option:disabled{color:var(--text-faint);}

/* =====================================================================
   ZONE DANGEREUSE
   ===================================================================== */

.danger-zone{
  border-color:var(--danger);
  margin-top:16px;
}
.danger-zone .section-head h3{color:var(--danger);}
.danger-zone p{margin:0 0 14px;line-height:1.6;}

/* Le quota atteint n'est pas une erreur : on informe sans alarmer */
.quota-note{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 12px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--paper);
  font-size:12.5px;
  color:var(--text-soft);
}
.quota-note .icon{color:var(--warning);flex-shrink:0;}

/* =====================================================================
   TABLEAUX DE DONNÉES
   ===================================================================== */

.data-table{
  width:100%;
  border-collapse:collapse;
  font-size:13.5px;
}
.data-table th{
  text-align:left;
  font-size:11px;
  font-weight:600;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--text-faint);
  padding:8px 10px;
  border-bottom:1px solid var(--border);
}
.data-table td{
  padding:11px 10px;
  border-bottom:1px solid var(--border);
}
.data-table tr:last-child td{border-bottom:0;}
.data-table tbody tr:hover{background:var(--paper);}

/* Lignes clé / valeur */
.kv-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  padding:11px 0;
  border-bottom:1px solid var(--border);
  font-size:13.5px;
}
.kv-row:last-child{border-bottom:0;}
.kv-key{color:var(--text-soft);}
.kv-val{font-weight:500;text-align:right;}

.hour-chip{
  display:inline-block;
  padding:2px 8px;
  border-radius:6px;
  background:var(--brand-tint);
  color:var(--brand-dark);
  font-size:12px;
  font-family:'JetBrains Mono',ui-monospace,monospace;
  margin-left:4px;
}

/* Les onglets sont des liens : le routage est serveur */
a.tab-btn{text-decoration:none;}
a.chip{text-decoration:none;}
a.back-link{text-decoration:none;display:inline-flex;align-items:center;gap:6px;}

.console-input-row{
  display:flex;
  gap:8px;
  margin-top:12px;
}
.console-input-row input{
  flex:1;
  padding:9px 11px;
  border:1px solid var(--border);
  border-radius:8px;
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:12.5px;
}
.console-input-row input:disabled{background:var(--paper);color:var(--text-faint);}

/* =====================================================================
   TABLEAU DE BORD — CARTE D'OFFRE
   ===================================================================== */

/* Remplace .dash-plan : la même place à l'écran, mais on y lit aussi le prix
   et la date de renouvellement — les deux questions que le client se pose. */
.plan-card{
  display:flex;
  flex-direction:column;
  gap:3px;
  min-width:250px;
  padding:12px 14px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface);
  box-shadow:var(--shadow-sm);
  text-decoration:none;
  color:inherit;
  transition:.15s ease;
}
.plan-card:hover{border-color:var(--brand);box-shadow:var(--shadow-md);}
.plan-card-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.plan-card-label{
  font-size:10.5px;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--text-faint);
}
.plan-card strong{font-size:15px;font-family:var(--font-display);}
.plan-card-meta{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
  font-size:12.5px;
  color:var(--text-soft);
}

/* =====================================================================
   BANDE DE DÉPLOIEMENT
   ---------------------------------------------------------------------
   Seule zone sombre de l'espace client. Le contraste est le message : au-
   dessus on gère un compte, ici on lance un serveur de jeu. Les tokens
   --game-* existaient déjà dans la charte, ils servent enfin.
   ===================================================================== */

.deploy-band{
  position:relative;
  overflow:hidden;
  margin-bottom:20px;
  padding:20px;
  border:1px solid var(--game-border);
  border-radius:14px;
  background:
    radial-gradient(700px circle at 0% 0%, rgba(255,122,26,.16), transparent 55%),
    radial-gradient(600px circle at 100% 120%, rgba(124,92,252,.20), transparent 55%),
    var(--game-bg);
  color:var(--game-text);
}
.deploy-band-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  margin-bottom:16px;
}
.deploy-band-head h3{
  font-family:var(--font-display);
  font-size:16px;
  color:var(--game-text);
  margin:0 0 4px;
}
.deploy-band-head p{
  font-size:12.5px;
  color:var(--game-text-soft);
}
.deploy-tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  border:1px solid var(--game-border);
  border-radius:999px;
  background:var(--game-surface);
  font-size:11.5px;
  color:var(--game-text-soft);
  flex-shrink:0;
}

/* Tuiles de jeu — auto-fit : 6 jeux tiennent sur une ligne en grand écran,
   la grille se replie seule sans point de rupture à maintenir. */
.game-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:10px;
}
.game-tile{
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:12px;
  border:1px solid var(--game-border);
  border-radius:11px;
  background:var(--game-surface);
  text-decoration:none;
  color:var(--game-text);
  transition:.16s ease;
}
a.game-tile:hover{
  border-color:var(--jeu);
  background:var(--game-surface-solid);
  transform:translateY(-2px);
  box-shadow:0 8px 22px rgba(0,0,0,.4);
}
a.game-tile:focus-visible{box-shadow:0 0 0 2px var(--jeu);}

/* Le monogramme porte la couleur du jeu : c'est le seul repère d'identité,
   il doit rester lisible sur fond sombre. */
.game-mono{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  margin-bottom:8px;
  border-radius:9px;
  background:color-mix(in srgb, var(--jeu) 22%, transparent);
  border:1px solid color-mix(in srgb, var(--jeu) 45%, transparent);
  color:var(--jeu);
  font-family:var(--font-display);
  font-size:12px;
  font-weight:600;
  letter-spacing:.02em;
}
.game-name{
  font-size:13px;
  font-weight:500;
  line-height:1.3;
}
.game-meta{
  font-family:var(--font-mono);
  font-size:10.5px;
  color:var(--game-text-soft);
}

/* Jeu hors budget mémoire : visible mais clairement inaccessible. On ne le
   masque pas — savoir que Rust existe est une raison de monter d'offre. */
.game-tile.is-locked{
  opacity:.42;
  cursor:not-allowed;
}
.game-tile.is-locked .game-meta{color:var(--game);}

@media (prefers-reduced-motion:reduce){
  a.game-tile:hover{transform:none;}
}

/* =====================================================================
   COMPTEURS — part de quota
   ===================================================================== */

.stat-max{
  font-size:15px;
  font-weight:500;
  color:var(--text-faint);
  margin-left:1px;
}

/* =====================================================================
   PREMIERS PAS
   ===================================================================== */

.steps{
  list-style:none;
  margin:0;
  padding:0;
}
.step{
  display:flex;
  align-items:flex-start;
  gap:11px;
  padding:10px 0;
  border-bottom:1px solid var(--border);
}
.step:last-child{border-bottom:0;padding-bottom:0;}
.step-mark{
  display:flex;
  align-items:center;
  justify-content:center;
  width:19px;
  height:19px;
  margin-top:1px;
  flex-shrink:0;
  border:1.5px solid var(--border-strong);
  border-radius:50%;
  color:#fff;
}
.step.is-done .step-mark{
  background:var(--success);
  border-color:var(--success);
}
.step.is-done .step-mark .icon{width:11px;height:11px;stroke-width:3;}
.step-txt{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:1px;
  min-width:0;
}
.step-txt strong{font-size:13.5px;font-weight:500;}
.step.is-done .step-txt strong{color:var(--text-soft);}

/* =====================================================================
   CARTE « VOTRE OFFRE » / AIDE
   ===================================================================== */

.quota-line{
  margin:-4px 0 14px;
  font-size:12px;
  color:var(--text-faint);
}
.help-card .btn{justify-content:center;}

@media (max-width:900px){
  .plan-card{width:100%;}
  .deploy-band-head{flex-direction:column;gap:12px;}
}

/* Sous 640px, deux colonnes de cartes ne laissent plus la place de lire :
   le tableau de bord passe en pile. Les compteurs, eux, restent à deux —
   un chiffre et son libellé tiennent dans une demi-largeur. */
@media (max-width:640px){
  .grid-2,.dash-cols{grid-template-columns:minmax(0,1fr);}
  .deploy-band{padding:16px;}
  .game-grid{grid-template-columns:repeat(auto-fit,minmax(128px,1fr));}
}

/* =====================================================================
   MODALE DE DÉPLOIEMENT
   ===================================================================== */

.modal-lg{max-width:740px;}

/* Choix du jeu : des vraies cases à cocher, cachées mais présentes — le
   clavier et les lecteurs d'écran continuent de fonctionner, ce qu'une
   grille de <div> cliquables aurait perdu. */
.jeu-choix{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:8px;
}
.jeu-opt{
  position:relative;
  display:flex;
  align-items:center;
  gap:10px;
  margin:0;
  padding:9px 10px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--surface);
  cursor:pointer;
  transition:.14s ease;
}
/* Masquage visuel, pas fonctionnel : la case garde une taille réelle (1px) et
   reste dans le flux du clavier. À 0×0, certains navigateurs la sortent de
   l'ordre de tabulation — le sélecteur deviendrait inutilisable sans souris. */
.jeu-opt input{
  position:absolute;
  opacity:0;
  width:1px;
  height:1px;
  margin:0;
  top:12px;
  left:12px;
}
.jeu-opt:hover{border-color:var(--jeu);background:var(--paper);}
.jeu-opt:has(input:checked){
  border-color:var(--jeu);
  background:color-mix(in srgb, var(--jeu) 8%, var(--surface));
  box-shadow:0 0 0 1px var(--jeu);
}
.jeu-opt:has(input:focus-visible){box-shadow:0 0 0 3px color-mix(in srgb, var(--jeu) 30%, transparent);}

.jeu-opt-mono{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:30px;
  height:30px;
  flex-shrink:0;
  border-radius:8px;
  background:color-mix(in srgb, var(--jeu) 15%, transparent);
  border:1px solid color-mix(in srgb, var(--jeu) 40%, transparent);
  color:var(--jeu);
  font-family:var(--font-display);
  font-size:11px;
  font-weight:600;
}
.jeu-opt-txt{display:flex;flex-direction:column;gap:1px;min-width:0;}
.jeu-opt-nom{
  font-size:12.5px;
  font-weight:500;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.jeu-opt-meta{font-family:var(--font-mono);font-size:10px;color:var(--text-faint);}

.jeu-opt-coche{
  margin-left:auto;
  display:none;
  color:var(--jeu);
  flex-shrink:0;
}
.jeu-opt:has(input:checked) .jeu-opt-coche{display:inline-flex;}

.jeu-opt.is-locked{
  opacity:.5;
  cursor:not-allowed;
  background:var(--paper);
}
.jeu-opt.is-locked:hover{border-color:var(--border);}
.jeu-opt.is-locked .jeu-opt-meta{color:var(--warning);}

/* Port et sa disponibilité */
.port-row{display:flex;align-items:center;gap:10px;}
.port-row input{max-width:140px;}

.port-etat{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  font-weight:500;
  color:var(--text-faint);
  min-height:18px;
}
.port-etat::before{
  content:"";
  width:7px;
  height:7px;
  border-radius:50%;
  background:currentColor;
  flex-shrink:0;
}
.port-etat:empty::before{display:none;}
.port-etat.is-libre{color:var(--success-dark);}
.port-etat.is-pris{color:var(--danger);}
.port-etat.is-attente{color:var(--text-faint);}

.port-suggestions{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
  margin-top:8px;
}
.port-sugg-label{font-size:12px;color:var(--text-soft);}
.port-sugg{
  padding:3px 9px;
  border:1px solid var(--border-strong);
  border-radius:7px;
  background:var(--surface);
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--text);
  cursor:pointer;
  transition:.14s;
}
.port-sugg:hover{border-color:var(--brand);color:var(--brand-dark);background:var(--brand-tint);}

@media (max-width:640px){
  .jeu-choix{grid-template-columns:minmax(0,1fr);}
  .modal-lg .grid-3{grid-template-columns:minmax(0,1fr);}
}

/* =====================================================================
   HÉBERGEMENT — APPLICATIONS INSTALLÉES
   ===================================================================== */

.install-row{
  display:flex;
  align-items:center;
  gap:11px;
  margin-top:10px;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--paper);
}
.install-row > .icon{color:var(--success);flex-shrink:0;}
.install-row.is-error{
  border-color:var(--danger-tint-border, var(--border));
  background:var(--danger-tint, var(--paper));
}
.install-row.is-error > .icon{color:var(--danger);}
.install-row.is-running{border-style:dashed;}

.install-txt{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1;}
.install-txt strong{font-size:13px;font-weight:500;}
.install-row .btn{margin-left:auto;flex-shrink:0;}

/* Indicateur d'attente : une installation dure une minute, le client doit
   voir que ça travaille plutôt qu'un écran figé. */
.spin{
  width:14px;
  height:14px;
  flex-shrink:0;
  border:2px solid var(--border-strong);
  border-top-color:var(--brand);
  border-radius:50%;
  animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}
@media (prefers-reduced-motion:reduce){
  .spin{animation-duration:2.5s;}
}

/* Chemin d'installation : le domaine est affiché en préfixe, pour que le
   client voie l'URL finale et non un champ hors contexte. */
.path-row{
  display:flex;
  align-items:stretch;
  border:1px solid var(--border-strong);
  border-radius:9px;
  overflow:hidden;
  background:var(--surface);
}
.path-row:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-tint);}
.path-prefix{
  display:flex;
  align-items:center;
  padding:0 4px 0 11px;
  background:var(--paper);
  border-right:1px solid var(--border);
  font-family:var(--font-mono);
  font-size:12.5px;
  color:var(--text-faint);
  white-space:nowrap;
}
.path-row input{
  border:0;
  border-radius:0;
  background:transparent;
  flex:1;
  min-width:0;
}
.path-row input:focus{box-shadow:none;}

.pass-row{display:flex;gap:8px;align-items:center;}
.pass-row input{flex:1;min-width:0;}
.pass-row .btn{flex-shrink:0;}

/* Budget mémoire restant, rappelé dans l'en-tête de la modale de déploiement :
   le client découpe une enveloppe, il doit voir ce qu'il lui reste sans fermer. */
.modal-budget{
  margin-left:auto;
  margin-right:10px;
  padding:3px 9px;
  border:1px solid var(--border);
  border-radius:999px;
  background:var(--paper);
  font-family:var(--font-mono);
  font-size:11.5px;
  color:var(--text-soft);
  white-space:nowrap;
}

/* =====================================================================
   GESTION D'HÉBERGEMENT — TUILES D'APPLICATION
   ---------------------------------------------------------------------
   Le geste demandé est « un clic = une application ». Des boutons, donc,
   et non des cases à cocher : il n'y a rien à valider ensuite, la tuile
   EST l'action.
   ===================================================================== */

.app-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(158px,1fr));
  gap:10px;
}
.app-tile{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:2px;
  padding:12px;
  border:1px solid var(--border);
  border-radius:11px;
  background:var(--surface);
  text-align:left;
  cursor:pointer;
  font:inherit;
  color:inherit;
  transition:.15s ease;
}
.app-tile:hover:not([disabled]){
  border-color:var(--jeu);
  box-shadow:0 0 0 1px var(--jeu), var(--shadow-md);
  transform:translateY(-2px);
}
.app-tile:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb, var(--jeu) 35%, transparent);}

.app-mono{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:32px;
  height:32px;
  padding:0 6px;
  margin-bottom:8px;
  border-radius:8px;
  background:color-mix(in srgb, var(--jeu) 14%, transparent);
  border:1px solid color-mix(in srgb, var(--jeu) 40%, transparent);
  color:var(--jeu);
  font-family:var(--font-display);
  font-size:11.5px;
  font-weight:600;
}
.app-nom{font-size:13px;font-weight:500;}
.app-desc{
  font-size:11.5px;
  color:var(--text-faint);
  line-height:1.4;
  margin-bottom:6px;
}
/* Distinguer « prêt à l'emploi » d'« assistant web » n'est pas un détail :
   c'est la différence entre se connecter et remplir six écrans. */
.app-mode{
  margin-top:auto;
  padding:2px 7px;
  border-radius:999px;
  background:var(--paper);
  border:1px solid var(--border);
  font-size:10px;
  color:var(--text-soft);
}

.app-tile[disabled]{
  opacity:.45;
  cursor:not-allowed;
}
.app-tile[disabled] .app-desc{color:var(--warning);}

.hb-empty-msg{
  padding:24px 0;
  text-align:center;
  color:var(--text-faint);
  font-size:13px;
}

.pager{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  margin-top:16px;
}
.pager span{font-size:12.5px;color:var(--text-soft);}
.pager .btn[disabled]{opacity:.4;cursor:not-allowed;}

@media (prefers-reduced-motion:reduce){
  .app-tile:hover:not([disabled]){transform:none;}
}

/* =====================================================================
   BASES DE DONNÉES
   ===================================================================== */

.db-form{
  display:flex;
  gap:8px;
  align-items:center;
  margin-top:12px;
}
.db-form input{flex:1;min-width:0;}
.db-form .btn{flex-shrink:0;}

/* Identifiants affichés UNE seule fois : l'agent efface le mot de passe dès la
   base créée. L'encart reste donc à l'écran — un toast qui s'efface au bout de
   trois secondes ferait perdre au client un secret irrécupérable. */
.db-creds{
  margin-top:12px;
  padding:12px 14px;
  border:1px solid var(--warning);
  border-radius:10px;
  background:color-mix(in srgb, var(--warning) 7%, var(--surface));
}
.db-creds-head{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:8px;
}
.db-creds-head strong{font-size:13px;}
.db-creds-head span{font-size:11.5px;color:var(--text-soft);}
.db-creds dl{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:4px 12px;
  margin:0 0 10px;
}
.db-creds dt{font-size:12px;color:var(--text-soft);}
.db-creds dd{margin:0;font-size:12.5px;word-break:break-all;}

/* =====================================================================
   VERSION DE PHP
   ===================================================================== */

.php-row{display:flex;gap:8px;align-items:center;margin-bottom:8px;}
.php-row select{flex:1;min-width:0;}
.php-row .btn{flex-shrink:0;}

/* =====================================================================
   COURBE D'OCCUPATION
   ---------------------------------------------------------------------
   SVG inline, sans bibliothèque : 30 points ne justifient pas 200 Ko de
   JavaScript, et le graphique s'affiche même si le script ne charge pas.
   ===================================================================== */

.courbe{margin-top:14px;}
.courbe svg{
  display:block;
  width:100%;
  height:96px;
  color:var(--brand);
  overflow:visible;
}
.courbe-aire{
  fill:color-mix(in srgb, var(--brand) 10%, transparent);
  stroke:none;
}
.courbe-ligne{
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linejoin:round;
  stroke-linecap:round;
  /* vector-effect : sans lui, l'étirement du viewBox écrase le trait
     horizontalement et l'épaissit verticalement. */
  vector-effect:non-scaling-stroke;
}
.courbe-point{
  fill:var(--surface);
  stroke:currentColor;
  stroke-width:2;
  vector-effect:non-scaling-stroke;
}
.courbe-pied{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  margin-top:6px;
  font-size:11px;
  color:var(--text-faint);
}
.courbe-sens{
  font-family:var(--font-mono);
  color:var(--text-soft);
}

/* =====================================================================
   PAGE DE CRÉATION
   ===================================================================== */

.liste-check{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:9px;
}
.liste-check li{
  display:flex;
  align-items:flex-start;
  gap:9px;
  font-size:13px;
  color:var(--text-soft);
}
.liste-check .icon{
  width:14px;
  height:14px;
  flex-shrink:0;
  margin-top:2px;
  color:var(--success);
  stroke-width:3;
}

@media (max-width:640px){
  .app-grid{grid-template-columns:repeat(auto-fit,minmax(132px,1fr));}
  .db-form{flex-direction:column;align-items:stretch;}
  .db-creds dl{grid-template-columns:1fr;}
  .db-creds dt{margin-top:6px;}
}

/* =====================================================================
   PAGE DE GESTION D'UN HÉBERGEMENT
   ===================================================================== */

.back-link{
  display:inline-flex;
  align-items:center;
  gap:5px;
  margin-bottom:14px;
  font-size:13px;
  color:var(--text-soft);
  text-decoration:none;
}
.back-link:hover{color:var(--brand-dark);}

.detail-head{
  display:flex;
  align-items:flex-start;
  gap:14px;
  margin-bottom:18px;
}
.detail-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:46px;
  height:46px;
  flex-shrink:0;
  border-radius:12px;
  background:var(--brand-tint);
  color:var(--brand);
}
.detail-id{flex:1;min-width:0;}
.detail-id h2{font-size:20px;margin:0 0 2px;font-family:var(--font-display);}
.detail-tags{display:flex;gap:7px;flex-wrap:wrap;margin-top:8px;}
.detail-actions{flex-shrink:0;}

/* Compteur discret sur l'onglet : le client voit ce qu'il a sans y entrer. */
.tab-badge{
  margin-left:6px;
  padding:0 6px;
  border-radius:999px;
  background:var(--brand-tint);
  color:var(--brand-dark);
  font-size:10.5px;
  font-weight:600;
}

/* ---------- Graphique d'occupation -----------------------------------
   SVG étiré en largeur, hauteur fixe. preserveAspectRatio="none" déforme
   volontairement : sur une courbe de tendance, seule la forme compte, et
   vector-effect garde le trait d'épaisseur constante malgré l'étirement.
   -------------------------------------------------------------------- */
.graphe{
  width:100%;
  height:130px;
  display:block;
  margin-bottom:6px;
  overflow:visible;
}
.graphe-aire{fill:var(--brand-tint);stroke:none;}
.graphe-ligne{
  fill:none;
  stroke:var(--brand);
  stroke-width:2;
  vector-effect:non-scaling-stroke;
  stroke-linejoin:round;
}
.graphe-quota{
  stroke:var(--danger);
  stroke-width:1;
  stroke-dasharray:4 4;
  vector-effect:non-scaling-stroke;
  opacity:.6;
}
.graphe-axe{
  display:flex;
  justify-content:space-between;
  margin-bottom:14px;
  font-size:11px;
  color:var(--text-faint);
}
.graphe-vide{
  padding:26px 12px;
  margin-bottom:14px;
  border:1px dashed var(--border-strong);
  border-radius:10px;
  text-align:center;
  font-size:12.5px;
  color:var(--text-faint);
}

/* ---------- Bases de données ----------------------------------------- */
.db-row{
  display:flex;
  align-items:center;
  gap:11px;
  padding:11px 0;
  border-bottom:1px solid var(--border);
}
.db-row:last-of-type{border-bottom:0;}
.db-main{flex:1;min-width:0;}
.db-main .name{
  font-size:13.5px;
  font-weight:500;
  font-family:var(--font-mono);
  word-break:break-all;
}
.db-label{
  margin-left:7px;
  padding:1px 7px;
  border-radius:999px;
  background:var(--paper);
  border:1px solid var(--border);
  font-family:var(--font);
  font-size:10.5px;
  font-weight:400;
  color:var(--text-faint);
}
.db-creds-line{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:3px;
  font-size:11.5px;
  color:var(--text-faint);
}
.db-creds-line code{
  background:var(--paper);
  padding:1px 5px;
  border-radius:4px;
  font-size:11px;
}

@media (max-width:640px){
  .detail-head{flex-wrap:wrap;}
  .detail-actions{width:100%;}
}

/* =====================================================================
   BANDEAU — CLOCHE ET MENU COMPTE
   ===================================================================== */

/* Le pastille de notification était en dur dans le HTML : elle s'affichait à
   tout le monde, en permanence. Une alerte permanente n'alerte plus personne —
   le JS ne la révèle que si le compte est réellement supérieur à zéro. */

.notif-vide{
  padding:18px 14px;
  text-align:center;
  font-size:12.5px;
  color:var(--text-faint);
}

/* Non lue : un point sur le bord, pas un fond coloré. Le menu en contient
   huit au plus, huit fonds colorés deviendraient illisibles. */
.notif-item.is-unread{
  position:relative;
  background:var(--brand-tint);
}
.notif-item.is-unread::before{
  content:"";
  position:absolute;
  left:5px;
  top:50%;
  transform:translateY(-50%);
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--brand);
}
.notif-item.is-critical::before{background:var(--danger);}

a.notif-item{text-decoration:none;color:inherit;display:block;}
a.notif-item:hover{background:var(--paper);}

.notif-tout-lu{
  display:block;
  width:100%;
  padding:9px;
  border:0;
  border-top:1px solid var(--border);
  background:none;
  font-size:12px;
  color:var(--brand-dark);
  cursor:pointer;
}
.notif-tout-lu:hover{background:var(--paper);}

/* Rappel de qui est connecté : le bandeau affichait « Alexandre Morel » à
   chaque client. Voir son propre e-mail lève le doute d'un coup d'œil. */
.dropdown-head{
  display:flex;
  flex-direction:column;
  gap:1px;
  padding:10px 12px;
}
.dropdown-head strong{font-size:13px;}
.dropdown-head span{
  font-size:11.5px;
  color:var(--text-faint);
  overflow:hidden;
  text-overflow:ellipsis;
}

/* La pastille devient un lien vers le compte : le chevron d'origine promettait
   un sélecteur d'espaces de travail qui n'a jamais existé — aucun JS derrière. */
a.workspace-pill{text-decoration:none;}

/* Console figée : l'agent ne rapporte plus. Le distinguer d'un serveur
   silencieux évite un ticket « mon serveur est mort » alors qu'il tourne. */
.console-stale{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:10px;
  padding:8px 12px;
  border:1px solid var(--warning);
  border-radius:9px;
  background:var(--warning-tint);
  font-size:12px;
  color:var(--warning-dark, var(--text));
}
.console-stale .icon{color:var(--warning);flex-shrink:0;}

/* =====================================================================
   PROGRESSION D'INSTALLATION
   ---------------------------------------------------------------------
   Counter-Strike 2 télécharge 69 Go via steamcmd au premier démarrage. Le
   conteneur « tourne » pendant tout ce temps : sans cette barre, le panel
   affichait « En ligne » et le client tentait de se connecter pendant des
   heures. C'est le seul endroit de la fiche qui dit la vérité à ce
   moment-là — elle doit donc être impossible à rater.
   ===================================================================== */

.srv-progress{
  margin-top:12px;
  padding:10px 12px;
  border:1px solid var(--brand);
  border-radius:10px;
  background:var(--brand-tint);
  max-width:520px;
}
.srv-progress-top{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  margin-bottom:7px;
  font-size:12.5px;
}
.srv-progress-top span:first-child{
  font-weight:500;
  font-family:var(--font-mono);
  color:var(--brand-dark);
}
.srv-progress .progress{background:var(--surface);}

/* Bandeau « l'agent ne répond plus » : un agent arrêté ressemble à un serveur
   parfaitement stable — rien ne bouge. Il faut le dire. */
.agent-stale{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:16px;
  padding:9px 13px;
  border:1px solid var(--warning);
  border-radius:9px;
  background:var(--warning-tint);
  font-size:12.5px;
}
.agent-stale .icon{color:var(--warning);flex-shrink:0;}

/* L'attribut `hidden` doit l'emporter sur le display:flex ci-dessus : sans
   cette règle, le JS a beau poser hidden=true, le bandeau reste affiché
   (le display:none de l'attribut a une priorité trop faible). Spécificité
   volontairement supérieure, et n'agit QUE quand hidden est présent. */
.agent-stale[hidden],
.console-stale[hidden]{ display:none; }

@media (max-width:640px){
  .srv-progress-top{flex-direction:column;gap:2px;}
}

/* Lien txAdmin : une pastille cliquable, pas un simple texte. Le client doit
   comprendre au premier regard que c'est une porte vers ailleurs. */
a.tx-link{text-decoration:none;transition:.14s;}
a.tx-link:hover{border-color:var(--brand);color:var(--brand-dark);background:var(--brand-tint);}

/* ============================================================
   Onglet Paramètres — grille d'infos + carte d'identifiants
   Nouvelles classes scopées : n'altèrent pas .kv-row global.
   ============================================================ */
.info-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(215px,1fr));
  gap:10px;
}
.info-tile{
  background:var(--paper);
  border:1px solid var(--border);
  border-radius:10px;
  padding:11px 13px;
  display:flex;flex-direction:column;gap:3px;
  min-width:0;
}
.info-tile .k{
  font-size:11px;color:var(--text-faint);
  text-transform:uppercase;letter-spacing:.05em;font-weight:600;
}
.info-tile .v{font-size:14px;font-weight:600;color:var(--text);word-break:break-word;}
.info-tile .v.mono{font-family:var(--font-mono);font-weight:500;font-size:13px;}

.cred-list{display:flex;flex-direction:column;gap:8px;}
.cred-row{
  display:grid;
  grid-template-columns:128px minmax(0,1fr) auto;
  align-items:center;gap:12px;
  background:var(--paper);
  border:1px solid var(--border);
  border-radius:10px;
  padding:8px 10px 8px 14px;
}
.cred-row .k{font-size:12.5px;color:var(--text-soft);}
.cred-row .v{
  font-family:var(--font-mono);font-size:13px;color:var(--ink-soft);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;
}
.cred-actions{display:flex;align-items:center;gap:6px;}
.cred-copy{
  border:1px solid var(--border);background:var(--surface);
  border-radius:8px;width:32px;height:32px;
  display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;color:var(--text-soft);transition:all .12s ease;flex:0 0 auto;
}
.cred-copy:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-tint);}
.cred-copy:active{transform:scale(.94);}
.cred-reveal{
  border:1px solid var(--border);background:var(--surface);
  border-radius:8px;height:32px;padding:0 10px;
  font-size:12px;color:var(--text-soft);cursor:pointer;transition:all .12s ease;
  white-space:nowrap;
}
.cred-reveal:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-tint);}
@media(max-width:600px){
  .cred-row{grid-template-columns:1fr auto;padding:10px 12px;}
  .cred-row .k{grid-column:1 / -1;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--text-faint);}
}

/* Thème sombre des pages jeu, si la vue y bascule */
.main.mode-game .info-tile,
.main.mode-game .cred-row{background:var(--game-surface);border-color:var(--game-border);}
.main.mode-game .info-tile .v,
.main.mode-game .cred-row .v{color:var(--game-text);}
.main.mode-game .cred-copy,
.main.mode-game .cred-reveal{background:var(--game-surface-solid);border-color:var(--game-border);color:var(--game-text-soft);}

/* ============================================================
   Polish — liste des serveurs & fiche détail
   Raffinements purement additifs (aucun changement de markup).
   ============================================================ */

/* --- Cartes serveur : accent de statut + relief au survol --- */
#server-list .server-card{
  position:relative;
  padding-left:22px;
  transition:box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
#server-list .server-card::before{
  content:"";position:absolute;left:0;top:16px;bottom:16px;width:3px;
  border-radius:0 3px 3px 0;background:var(--border-strong);
  transition:background .18s ease;
}
#server-list .server-card[data-status="online"]::before{background:var(--success);}
#server-list .server-card[data-status="offline"]::before{background:var(--danger);}
#server-list .server-card[data-status="pending"]::before{background:var(--warning);}
#server-list .server-card:hover{
  transform:translateY(-2px);
  border-color:var(--border-strong);
  box-shadow:var(--shadow-md);
}
#server-list .server-card .name{font-size:15px;font-weight:600;}
#server-list .server-card .metric .l{
  text-transform:uppercase;letter-spacing:.04em;font-weight:600;
}
#server-list .server-card .progress{height:6px;border-radius:999px;}
/* Bouton « Gérer » : contour brand, cohérent avec les CTA du panel */
#server-list .server-card .actions a.btn{
  border-color:var(--brand);color:var(--brand-dark);font-weight:500;
}
#server-list .server-card .actions a.btn:hover{background:var(--brand-tint);}

/* --- Filtres (chips) : actif légèrement plus doux que le noir plein --- */
.chip-row .chip.active{background:var(--brand);border-color:var(--brand);color:#fff;}

/* --- Cartes-jauges : même relief au survol que les cartes serveur --- */
.gauge-row .gauge-card{transition:box-shadow .18s ease, transform .18s ease;}
.gauge-row .gauge-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);}
.gauge-row .gauge-card .g-label{
  text-transform:uppercase;letter-spacing:.04em;font-size:11px;font-weight:600;
  color:var(--text-faint);
}

/* --- Onglets : coins arrondis + survol doux (thème clair) --- */
.tabs .tab-btn{border-radius:9px 9px 0 0;transition:background .15s ease, color .15s ease;}
.main:not(.mode-game) .tabs .tab-btn:hover{background:var(--paper);}

/* --- En-tête détail : méta un peu plus aérée --- */
.sd-meta{gap:10px 12px;}
.sd-title h1{font-family:var(--font-display);}

/* --- État vide : icône plus douce --- */
.dash-empty .dash-empty-icon{opacity:.9;}


/* ============================================================
   Paramètres — tuiles Informations & lignes d'identifiants
   Plus de définition, moins « plat » (corrige l'aspect délavé).
   ============================================================ */
.info-grid{gap:12px;}
.info-tile{
  background:var(--surface);
  box-shadow:var(--shadow-sm);
  padding:13px 15px;
  transition:box-shadow .16s ease, transform .16s ease, border-color .16s ease;
}
.info-tile:hover{
  border-color:var(--border-strong);box-shadow:var(--shadow-md);transform:translateY(-1px);
}

.cred-row{
  background:var(--surface);
  box-shadow:var(--shadow-sm);
  transition:border-color .16s ease, box-shadow .16s ease;
}
.cred-row:hover{border-color:var(--border-strong);box-shadow:var(--shadow-md);}
/* La valeur devient une puce mono compacte, collée au libellé : fini le grand
   vide entre le texte et le bouton copier. */
.cred-row .v{
  justify-self:start;max-width:100%;
  padding:4px 10px;border-radius:7px;
  background:var(--paper);border:1px solid var(--border);
}
.main:not(.mode-game) .cred-row .v{background:var(--paper);}
.main.mode-game .cred-row .v{background:var(--game-surface-solid);border-color:var(--game-border);}


/* ============================================================
   Identité visuelle des jeux — vignettes (modale) & bannière (fiche)
   ============================================================ */

/* Vignette du jeu dans la modale : le fond (dégradé ou image) est posé en
   inline ; ici on assure le rendu texte blanc et une taille un peu plus
   généreuse. */
.jeu-opt-mono{
  width:38px;height:38px;border:none;color:#fff;
  font-size:12px;letter-spacing:.02em;
  background-size:cover;background-position:center;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.15), 0 1px 2px rgba(20,15,40,.15);
}

/* Bannière-héros de la fiche serveur : nom, statut et infos par-dessus le
   visuel du jeu (dégradé ou image licenciée). */
.sd-hero{
  position:relative;border-radius:18px;margin-bottom:18px;overflow:hidden;
  background-size:cover;background-position:center;box-shadow:var(--shadow-sm);
}
.sd-hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(12,10,24,.30) 0%, rgba(12,10,24,.62) 100%);
}
.sd-hero-inner{
  position:relative;z-index:1;
  display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:20px 22px;
}
.sd-hero-main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:12px;}

.sd-hero .sd-title{display:flex;align-items:center;gap:14px;}
.sd-hero .sd-game-badge{
  width:52px;height:52px;flex-shrink:0;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.16);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);
}
.sd-hero .sd-game-mono{color:#fff;font-family:var(--font-display);font-weight:700;font-size:16px;letter-spacing:.02em;}
.sd-title-txt{min-width:0;}
.sd-hero-tag{
  display:block;color:rgba(255,255,255,.82);font-family:var(--font-mono);
  font-size:11px;letter-spacing:.04em;text-transform:uppercase;margin-bottom:2px;
  text-shadow:0 1px 2px rgba(0,0,0,.35);
}
.sd-hero h1{
  margin:0;color:#fff;font-family:var(--font-display);font-weight:700;
  font-size:24px;line-height:1.15;letter-spacing:-.01em;text-shadow:0 1px 4px rgba(0,0,0,.4);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:56ch;
}

.sd-hero-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.sd-hero-info{color:rgba(255,255,255,.85);font-size:12.5px;text-shadow:0 1px 2px rgba(0,0,0,.3);}
.sd-hero-info span{color:#fff;font-weight:600;}
.sd-hero-ip{
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);
  border-radius:8px;padding:3px 8px;color:#fff;font-family:var(--font-mono);font-size:12px;
}
.sd-hero-ip button{background:none;border:none;color:rgba(255,255,255,.85);cursor:pointer;display:inline-flex;padding:0;}
.sd-hero-ip button:hover{color:#fff;}

/* Actions dans la bannière : bouton neutre en verre blanc, danger/primary
   gardent leur couleur forte. */
.sd-hero .sd-actions{position:relative;z-index:1;display:flex;gap:8px;flex-shrink:0;}
.sd-hero .sd-actions .btn{
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);color:#fff;
}
.sd-hero .sd-actions .btn:hover{background:rgba(255,255,255,.26);}
.sd-hero .sd-actions .btn:disabled{opacity:.5;}
.sd-hero .sd-actions .btn-danger{background:var(--danger);border-color:transparent;color:#fff;}
.sd-hero .sd-actions .btn-danger:hover{background:var(--danger);filter:brightness(1.06);}
.sd-hero .sd-actions .btn-primary{background:#fff;border-color:transparent;color:var(--brand);}
.sd-hero .sd-actions .btn-primary:hover{background:#fff;filter:brightness(.97);}

@media (max-width:640px){
  .sd-hero h1{font-size:20px;}
  .sd-hero-inner{padding:16px;}
  .sd-hero .sd-actions{width:100%;}
  .sd-hero .sd-actions .btn{flex:1;justify-content:center;}
}

/* Pastille de titre générique (hors héros) : reprend le visuel du jeu */
.sd-game-badge{color:#fff;background-size:cover;background-position:center;}
.sd-game-mono{font-family:var(--font-display);font-weight:700;font-size:13px;letter-spacing:.02em;}

.main.mode-game .sd-hero{box-shadow:none;}

/* Retrait animé d'une carte serveur quand la suppression est terminée */
.server-card{transition:opacity .3s ease, transform .3s ease;}
.server-card.is-removing{opacity:0;transform:translateY(-6px) scale(.98);pointer-events:none;}

/* ============================================================
   Onglets de la fiche serveur — plus d'air, style « hébergeur »
   (Nitrado / G-Portal / Pterodactyl). Les cartes étaient collées.
   ============================================================ */
.tab-body{ display:flex; flex-direction:column; gap:18px; margin-top:4px; }
.tab-body > .card{ padding:22px 24px; }
.tab-body .section-head{ margin-bottom:16px; }

/* Grille d'informations : tuiles plus larges et aérées */
.tab-body .info-grid{ gap:14px; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); }
.tab-body .info-tile{ padding:14px 16px; gap:6px; border-radius:12px; }
.tab-body .info-tile .k{ letter-spacing:.06em; }
.tab-body .info-tile .v{ font-size:15px; line-height:1.3; }

/* Réglages : champs plus respirants */
.tab-body .field{ margin-bottom:18px; }

/* Identifiants (base de données, FTP) : lignes plus espacées */
.tab-body .cred-list{ gap:10px; }

/* ============================================================
   Cartes de métriques : sparkline à droite + icône centrée.
   ============================================================ */
.gauge-card{ align-items:center; }
.gauge-card .gauge,
.gauge-card .icon-badge{ flex-shrink:0; }
/* Le badge réseau n'héritait d'aucun centrage (contrairement à .server-row
   etc.) : le pictogramme wifi se calait en haut à gauche du cercle. */
.gauge-card .icon-badge{ display:flex; align-items:center; justify-content:center; }
.gauge-card .icon-badge .icon{ width:24px; height:24px; }
.gauge-card .g-body{ flex:1 1 auto; min-width:0; }
.gauge-card .spark{ width:76px; height:34px; flex-shrink:0; overflow:visible; align-self:center; }
.gauge-card .spark polyline{
  fill:none; stroke-width:2; stroke-linejoin:round; stroke-linecap:round;
  vector-effect:non-scaling-stroke; transition:none;
}
.spark-cpu polyline{ stroke:#6d5ae6; }
.spark-ram polyline{ stroke:#2f9e78; }
.spark-players polyline{ stroke:#e0872f; }
.spark-net polyline{ stroke:#3a8fd0; }
.main.mode-game .spark polyline{ opacity:.92; }

/* Sur écrans étroits, on masque la sparkline pour ne pas serrer le texte. */
@media (max-width: 720px){ .gauge-card .spark{ display:none; } }

/* =====================================================================
   =====================================================================

   ESPACE WEB — Hébergement & Domaines
   Refonte visuelle, palette empruntée aux quatre repères du marché :
     bleu profond OVHcloud · violet Hostinger · cyan IONOS · orange LWS

   Tout est portée sous #view-hosting, #view-hosting-detail,
   #view-domains et #view-domain-detail, avec les préfixes « hb- » et
   « dm- » : aucune règle générique du fichier n'est modifiée, et les
   classes partagées avec le détail serveur (.tabs, .app-tile, .modal)
   ne sont repeintes qu'à l'intérieur de ces pages.

   =====================================================================
   ===================================================================== */


#view-hosting,
#view-hosting-detail{
  --hb-deep:#0b1fa8;    /* bleu profond — OVHcloud */
  --hb-violet:#6c4ee0;  /* violet        — Hostinger */
  --hb-cyan:#17bee8;    /* cyan          — IONOS */
  --hb-orange:#ff7a18;  /* orange        — LWS */
  --hb-green:#19be6f;
  --hb-red:#e0304a;
  --hb-radius:18px;
}

/* =====================================================================
   Bandeau d'en-tête
   ===================================================================== */

.hb-hero{
  position:relative;
  overflow:hidden;
  margin-bottom:22px;
  padding:26px 28px 26px;
  border-radius:22px;
  color:#fff;
  background:
    radial-gradient(640px circle at 90% -40%, rgba(255,122,24,.55), transparent 62%),
    radial-gradient(520px circle at 8% 140%,  rgba(23,190,232,.6),  transparent 62%),
    linear-gradient(112deg, var(--hb-deep) 0%, #3a24c9 40%, var(--hb-violet) 68%, #8258ff 100%);
  box-shadow:0 20px 44px -20px rgba(11,31,168,.6);
}
/* filet aux quatre couleurs, en pied de bandeau */
.hb-hero::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:3px;
  background:linear-gradient(90deg,
    var(--hb-deep) 0%, var(--hb-violet) 34%, var(--hb-cyan) 66%, var(--hb-orange) 100%);
}

.hb-hero-grid{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:26px;
  align-items:flex-end;
}
.hb-eyebrow{
  font-family:var(--font-display);
  font-size:10.5px;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(255,255,255,.62);
  margin-bottom:9px;
}
.hb-hero h1{
  color:#fff;
  font-size:29px;
  line-height:1.15;
  letter-spacing:-.015em;
}
.hb-hero .hb-sub{
  margin-top:9px;
  max-width:46ch;
  font-size:13.5px;
  line-height:1.55;
  color:rgba(255,255,255,.78);
}
.hb-hero .hb-sub b{color:#fff;font-weight:600;}

/* jauges d'offre, en verre */
.hb-chips{display:flex;gap:10px;flex-wrap:wrap;}
.hb-chip{
  min-width:112px;
  padding:11px 15px 12px;
  border-radius:14px;
  background:rgba(255,255,255,.13);
  border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(8px);
}
.hb-chip .k{
  display:block;
  font-family:var(--font-display);
  font-size:9.5px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(255,255,255,.66);
}
.hb-chip .v{
  display:block;
  margin-top:4px;
  font-size:19px;
  font-weight:600;
  font-family:var(--font-display);
  line-height:1.1;
}
.hb-chip .v small{font-size:12px;font-weight:500;color:rgba(255,255,255,.6);}
.hb-chip.is-alert{background:rgba(255,122,24,.24);border-color:rgba(255,180,120,.5);}

/* barre de stockage cumulé */
.hb-hero-meter{position:relative;margin-top:20px;}
.hb-hero-meter .lbl{
  display:flex;justify-content:space-between;align-items:baseline;
  font-size:11.5px;color:rgba(255,255,255,.7);margin-bottom:7px;
}
.hb-hero-meter .lbl b{color:#fff;font-family:var(--font-mono);font-size:11.5px;font-weight:500;}
.hb-hero-meter .track{
  height:7px;border-radius:999px;overflow:hidden;
  background:rgba(255,255,255,.18);
}
.hb-hero-meter .track > i{
  display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg,var(--hb-cyan),#fff);
  box-shadow:0 0 12px rgba(23,190,232,.7);
  transition:width .8s cubic-bezier(.2,.8,.2,1);
}

/* =====================================================================
   Grille de sites
   ===================================================================== */

.hb-grid{
  display:grid;
  gap:18px;
  grid-template-columns:repeat(auto-fill,minmax(370px,1fr));
}

.hb-card{
  position:relative;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--hb-radius);
  box-shadow:0 1px 2px rgba(20,20,60,.04), 0 16px 32px -26px rgba(20,20,60,.5);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.hb-card:hover{
  transform:translateY(-3px);
  border-color:var(--border-strong);
  box-shadow:0 1px 2px rgba(20,20,60,.04), 0 26px 44px -28px rgba(20,20,60,.6);
}
/* liseré supérieur : la couleur dit l'état */
.hb-card::before{
  content:"";
  position:absolute;top:0;left:0;right:0;height:4px;
  background:var(--hb-accent);
  background-size:220% 100%;
}
.hb-card{--hb-accent:linear-gradient(90deg,var(--hb-violet),var(--hb-cyan));}
.hb-card[data-state="creating"]{--hb-accent:linear-gradient(90deg,var(--hb-cyan),var(--hb-violet),var(--hb-cyan),var(--hb-violet));}
.hb-card[data-state="creating"]::before{animation:hb-slide 2.2s linear infinite;}
.hb-card[data-state="error"]{--hb-accent:linear-gradient(90deg,var(--hb-red),var(--hb-orange));}
.hb-card[data-state="suspended"]{--hb-accent:linear-gradient(90deg,#9aa0ad,#c7cbd4);}

@keyframes hb-slide{from{background-position:0 0;} to{background-position:-220% 0;}}

/* ---------- barre d'adresse (élément signature) ---------- */

.hb-chrome{
  display:flex;align-items:center;gap:11px;
  padding:15px 16px 13px;
  background:linear-gradient(180deg,#f8f7fe,#fff);
  border-bottom:1px solid var(--border);
}
.hb-dots{display:flex;gap:5px;flex-shrink:0;}
.hb-dots i{width:9px;height:9px;border-radius:50%;}
.hb-dots i:nth-child(1){background:var(--hb-violet);}
.hb-dots i:nth-child(2){background:var(--hb-cyan);}
.hb-dots i:nth-child(3){background:var(--hb-orange);}

.hb-url{
  flex:1;min-width:0;
  display:flex;align-items:center;gap:7px;
  padding:7px 12px;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--paper);
  font-family:var(--font-mono);
  font-size:12.5px;
  text-decoration:none;
  color:var(--text);
  transition:.16s ease;
}
.hb-url:hover{background:#fff;border-color:var(--hb-violet);box-shadow:0 0 0 3px rgba(108,78,224,.13);}
.hb-url .hb-scheme{color:var(--text-faint);}
.hb-url .hb-host{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.hb-url .hb-lock{width:13px;height:13px;flex-shrink:0;color:var(--text-faint);}
.hb-url .hb-go{width:12px;height:12px;margin-left:auto;flex-shrink:0;color:var(--text-faint);}

.hb-url[data-ssl="active"]{border-color:rgba(25,190,111,.42);background:rgba(25,190,111,.07);}
.hb-url[data-ssl="active"] .hb-lock{color:var(--hb-green);}
.hb-url[data-ssl="pending"]{border-color:rgba(255,122,24,.42);background:rgba(255,122,24,.07);}
.hb-url[data-ssl="pending"] .hb-lock{color:var(--hb-orange);}
.hb-url[data-ssl="error"]{border-color:rgba(224,48,74,.42);background:rgba(224,48,74,.06);}
.hb-url[data-ssl="error"] .hb-lock{color:var(--hb-red);}

/* Hébergement sans domaine (slot en attente) : barre grise, non cliquable. */
.hb-url.is-empty{
  flex:1;min-width:0;
  display:flex;align-items:center;gap:8px;
  padding:7px 12px;border-radius:999px;
  border:1px dashed var(--border-strong);
  background:var(--paper);
  font-family:var(--font-mono);font-size:12.5px;color:var(--text-soft);
}
.hb-url.is-empty .icon{width:14px;height:14px;flex-shrink:0;color:var(--text-faint);}
.hb-url.is-empty .hb-host{font-family:var(--font-body);font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.hb-pending-tag{
  margin-left:auto;flex-shrink:0;
  font-family:var(--font-body);font-size:10.5px;font-weight:500;
  padding:2px 8px;border-radius:6px;
  background:rgba(255,122,24,.1);color:#c85a10;border:1px solid rgba(255,122,24,.25);
}

/* ---------- corps ---------- */

.hb-body{padding:16px;display:flex;flex-direction:column;gap:15px;}

.hb-tags{display:flex;flex-wrap:wrap;gap:7px;align-items:center;}
.hb-tag{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 10px;border-radius:8px;
  font-size:11.5px;font-weight:500;
  background:var(--paper);border:1px solid var(--border);color:var(--text-soft);
}
.hb-tag.is-stack{background:rgba(23,190,232,.1);border-color:rgba(23,190,232,.3);color:#0a6d8a;}
.hb-tag.is-php{background:rgba(108,78,224,.09);border-color:rgba(108,78,224,.24);color:#4a24c6;font-family:var(--font-mono);}
.hb-tag.is-warn{background:rgba(255,122,24,.1);border-color:rgba(255,122,24,.3);color:#8a3d00;}

/* pastilles héritées : mêmes coins que les tags, pour l'alignement */
#view-hosting .pill{border-radius:8px;padding:4px 10px;font-size:11.5px;}

.hb-note{
  display:flex;gap:10px;align-items:flex-start;
  padding:11px 13px;border-radius:12px;
  font-size:12.5px;line-height:1.45;
  background:rgba(255,122,24,.08);
  border:1px solid rgba(255,122,24,.3);
  color:#8a3d00;
}
.hb-note strong{display:block;margin-bottom:2px;color:inherit;}
.hb-note .icon{flex-shrink:0;margin-top:1px;}
.hb-note.is-error{background:rgba(224,48,74,.07);border-color:rgba(224,48,74,.3);color:#a41326;}
.hb-note.is-run{background:rgba(23,190,232,.08);border-color:rgba(23,190,232,.32);color:#0a6d8a;}

.hb-spin{
  width:15px;height:15px;flex-shrink:0;margin-top:1px;
  border-radius:50%;
  border:2px solid rgba(23,190,232,.3);
  border-top-color:var(--hb-cyan);
  animation:hb-spin .8s linear infinite;
}
@keyframes hb-spin{to{transform:rotate(360deg);}}

/* ---------- jauge disque segmentée ---------- */

.hb-meter-head{
  display:flex;justify-content:space-between;align-items:baseline;
  margin-bottom:8px;
  font-family:var(--font-display);
  font-size:10.5px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-faint);
}
.hb-meter-head b{
  font-family:var(--font-mono);font-size:11.5px;font-weight:500;
  letter-spacing:0;text-transform:none;color:var(--text);
}
.hb-segs{display:flex;gap:3px;height:9px;}
.hb-segs i{flex:1;border-radius:2px;background:var(--border);transition:background .3s ease;}
.hb-segs i.on{background:linear-gradient(180deg,var(--hb-cyan),var(--hb-violet));}
.hb-segs[data-level="warn"] i.on{background:linear-gradient(180deg,#ffb15c,var(--hb-orange));}
.hb-segs[data-level="crit"] i.on{background:linear-gradient(180deg,#ff6b7f,var(--hb-red));}
.hb-segs[data-level="warn"] + .hb-meter-note{color:#8a3d00;}
.hb-segs[data-level="crit"] + .hb-meter-note{color:#a41326;}
.hb-meter-note{margin-top:7px;font-size:11.5px;}

/* ---------- faits ---------- */

.hb-facts{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;
  padding-top:13px;border-top:1px dashed var(--border-strong);
}
.hb-fact .k{
  font-family:var(--font-display);
  font-size:9.5px;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;
  color:var(--text-faint);
}
.hb-fact .v{margin-top:3px;font-size:13px;font-weight:500;}

/* ---------- actions ---------- */

.hb-actions{
  display:flex;gap:9px;margin-top:auto;
  padding:14px 16px;
  background:linear-gradient(180deg,#fbfaff,#f5f4fb);
  border-top:1px solid var(--border);
}
.hb-btn{
  flex:1;
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:9px 14px;border-radius:11px;
  font-size:12.5px;font-weight:500;
  text-decoration:none;
  border:1px solid var(--border-strong);
  background:#fff;color:var(--text);
  transition:.16s ease;
}
.hb-btn:hover{transform:translateY(-1px);border-color:var(--hb-violet);color:var(--hb-violet);}
.hb-btn-primary{
  border-color:transparent;color:#fff;
  background:linear-gradient(120deg,var(--hb-deep) 0%,var(--hb-violet) 58%,#8a5bff 100%);
  box-shadow:0 10px 20px -10px rgba(108,78,224,.9);
}
.hb-btn-primary:hover{color:#fff;filter:brightness(1.08);}
.hb-btn[aria-disabled="true"]{opacity:.45;pointer-events:none;}
.hb-btn-sm{flex:0 0 auto;padding:6px 12px;font-size:12px;}
.hb-btn[disabled]{opacity:.5;cursor:not-allowed;pointer-events:none;}

/* Lien-action discret : « Changer d'application » à côté d'un bouton plein.
   Volontairement effacé — action rare et lourde, on ne veut pas concurrencer
   « Modifier mon site ». */
.hb-link-quiet{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 4px;border:0;background:none;cursor:pointer;
  font-size:12px;font-weight:500;color:var(--text-soft);
  text-decoration:none;transition:.16s ease;
}
.hb-link-quiet:hover{color:var(--hb-violet);}
.hb-link-quiet svg{width:15px;height:15px;}

/* Formulaire de création d'email (boîte / alias) — hérite de .hb-db-form. */
.hb-mail-form{flex-wrap:wrap;align-items:center;}
.hb-mail-form .mail-local{flex:0 1 150px;min-width:90px;}
.hb-mail-form .mail-prefix{
  order:2;font-family:var(--font-mono);font-size:12px;color:var(--text-soft);
  white-space:nowrap;
}
.hb-mail-form .mail-arrow{color:var(--text-faint);font-size:15px;padding:0 2px;}
.mail-dns-recs{margin-top:10px;display:flex;flex-direction:column;gap:6px;font-size:12.5px;}
.mail-dns-recs > div{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.mail-dns-recs .t{
  display:inline-block;min-width:38px;padding:1px 7px;border-radius:6px;
  background:var(--surface-2,#eef);color:var(--hb-violet);font-weight:600;
  font-size:11px;text-align:center;
}
.mail-dns-recs code{font-size:12px;word-break:break-all;}
@media (max-width:640px){
  .hb-mail-form{flex-direction:column;align-items:stretch;}
  .hb-mail-form .mail-prefix{order:0;}
  .hb-mail-form .mail-local{flex:1 1 auto;}
}

/* =====================================================================
   Page vide
   ===================================================================== */

.hb-empty{
  position:relative;overflow:hidden;
  padding:56px 28px;
  text-align:center;
  border-radius:22px;
  background:var(--surface);
  border:1px solid var(--border);
  box-shadow:0 16px 34px -28px rgba(20,20,60,.5);
}
.hb-empty::before{
  content:"";
  position:absolute;top:-160px;left:-10%;right:-10%;height:340px;
  background:
    radial-gradient(closest-side,rgba(108,78,224,.2),transparent 72%),
    radial-gradient(closest-side,rgba(23,190,232,.18),transparent 72%),
    radial-gradient(closest-side,rgba(255,122,24,.14),transparent 72%);
  background-position:18% 60%, 76% 40%, 50% 90%;
  background-size:340px 340px, 300px 300px, 260px 260px;
  background-repeat:no-repeat;
}
.hb-empty > *{position:relative;}
.hb-medallion{
  width:62px;height:62px;margin:0 auto 20px;
  display:flex;align-items:center;justify-content:center;
  border-radius:20px;
  color:#fff;
  background:linear-gradient(135deg,var(--hb-deep),var(--hb-violet) 55%,var(--hb-cyan));
  box-shadow:0 14px 26px -12px rgba(108,78,224,.75);
}
.hb-medallion .icon{width:28px;height:28px;}
.hb-empty h2{font-size:20px;margin-bottom:9px;}
.hb-empty p{
  max-width:44ch;margin:0 auto 24px;
  font-size:14px;line-height:1.6;color:var(--text-soft);
}
.hb-empty-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}
.hb-empty-actions .hb-btn{flex:0 0 auto;}

/* =====================================================================
   Adaptations
   ===================================================================== */

@media (max-width:900px){
  .hb-hero{padding:22px 20px;border-radius:18px;}
  .hb-hero-grid{grid-template-columns:1fr;align-items:stretch;gap:20px;}
  .hb-hero h1{font-size:24px;}
  .hb-chip{flex:1;min-width:104px;}
}
@media (max-width:640px){
  .hb-grid{grid-template-columns:1fr;}
  .hb-facts{grid-template-columns:1fr;}
  .hb-actions{flex-direction:column;}
}

@media (prefers-reduced-motion:reduce){
  .hb-card,.hb-btn,.hb-url,.hb-hero-meter .track > i{transition:none;}
  .hb-card:hover,.hb-btn:hover{transform:none;}
  .hb-card[data-state="creating"]::before,.hb-spin{animation:none;}
}

#view-hosting a:focus-visible,
#view-hosting button:focus-visible,
#view-hosting-detail a:focus-visible,
#view-hosting-detail button:focus-visible{
  outline:2px solid var(--hb-violet);
  outline-offset:2px;
  box-shadow:0 0 0 4px rgba(108,78,224,.18);
}


/* =====================================================================
   =====================================================================
   /hebergement/<id> — page de gestion
   ---------------------------------------------------------------------
   Même grammaire que la liste : la barre d'adresse reste l'élément
   signature (elle devient ici le titre de page), la couleur reste
   porteuse de sens. Tout est portée sous #view-hosting-detail : les
   classes partagées avec le détail serveur (.tabs, .card, .app-tile)
   ne sont pas touchées ailleurs.
   =====================================================================
   ===================================================================== */

/* ---------- retour ---------- */

.hb-back{
  display:inline-flex;align-items:center;gap:6px;
  margin-bottom:14px;
  font-size:13px;font-weight:500;
  color:var(--text-soft);text-decoration:none;
  transition:.15s ease;
}
.hb-back:hover{color:var(--hb-violet);gap:9px;}

/* ---------- bandeau du site ---------- */

.hb-hero--detail{padding:24px 26px 22px;}
.hb-hero--detail .hb-hero-grid{align-items:center;}

.hb-hero-title{margin:0;font-size:inherit;font-weight:400;}

/* barre d'adresse, version fond sombre */
.hb-url.is-dark{
  display:inline-flex;max-width:100%;
  padding:10px 16px;
  font-size:15px;
  background:rgba(255,255,255,.13);
  border-color:rgba(255,255,255,.26);
  color:#fff;
  backdrop-filter:blur(8px);
}
.hb-url.is-dark:hover{
  background:rgba(255,255,255,.2);
  border-color:rgba(255,255,255,.5);
  box-shadow:0 0 0 4px rgba(255,255,255,.1);
}
.hb-url.is-dark .hb-scheme{color:rgba(255,255,255,.6);}
.hb-url.is-dark .hb-go,
.hb-url.is-dark .hb-lock{color:rgba(255,255,255,.75);}
.hb-url.is-dark[data-ssl="active"]{background:rgba(25,190,111,.22);border-color:rgba(120,240,185,.55);}
.hb-url.is-dark[data-ssl="active"] .hb-lock{color:#7ff0b9;}
.hb-url.is-dark[data-ssl="pending"]{background:rgba(255,160,60,.24);border-color:rgba(255,196,130,.6);}
.hb-url.is-dark[data-ssl="pending"] .hb-lock{color:#ffc482;}
.hb-url.is-dark[data-ssl="error"]{background:rgba(255,90,110,.24);border-color:rgba(255,150,165,.6);}
.hb-url.is-dark[data-ssl="error"] .hb-lock{color:#ff96a5;}

/* pastilles techniques du bandeau */
.hb-hero-meta{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px;}
.hb-hero-meta .hb-mtag{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 11px;border-radius:8px;
  font-size:11.5px;font-weight:500;
  color:#fff;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.22);
}
.hb-hero-meta .hb-mtag .icon{width:13px;height:13px;}
.hb-hero-meta .hb-mtag.is-mono{font-family:var(--font-mono);}
.hb-hero-meta .hb-mtag[data-state="active"]{background:rgba(25,190,111,.26);border-color:rgba(120,240,185,.5);}
.hb-hero-meta .hb-mtag[data-state="creating"]{background:rgba(23,190,232,.28);border-color:rgba(140,230,255,.5);}
.hb-hero-meta .hb-mtag[data-state="error"]{background:rgba(255,90,110,.28);border-color:rgba(255,150,165,.5);}
.hb-hero-meta .hb-mtag .dot{width:6px;height:6px;border-radius:50%;background:currentColor;}

/* jauge disque compacte, dans le bandeau */
.hb-hero-disk{
  min-width:190px;
  padding:13px 16px 14px;
  border-radius:14px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(8px);
}
.hb-hero-disk .k{
  display:flex;justify-content:space-between;align-items:baseline;
  font-family:var(--font-display);
  font-size:9.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.66);
}
.hb-hero-disk .k b{font-size:14px;letter-spacing:0;color:#fff;}
.hb-hero-disk .hb-segs{margin-top:9px;}
.hb-hero-disk .hb-segs i{background:rgba(255,255,255,.22);}
.hb-hero-disk .hb-segs i.on{background:linear-gradient(180deg,#8ef0ff,#fff);}
.hb-hero-disk[data-level="warn"] .hb-segs i.on{background:linear-gradient(180deg,#ffd9a8,#ffa64d);}
.hb-hero-disk[data-level="crit"] .hb-segs i.on{background:linear-gradient(180deg,#ffc3cc,#ff6b7f);}
.hb-hero-disk .v{margin-top:9px;font-size:11.5px;color:rgba(255,255,255,.78);font-family:var(--font-mono);}

/* ---------- alerte pleine largeur ---------- */

#view-hosting-detail .hb-note{margin-bottom:18px;}

/* ---------- onglets ---------- */

#view-hosting-detail .tabs{
  display:flex;gap:5px;flex-wrap:wrap;
  margin-bottom:20px;padding:5px;
  border-radius:14px;
  background:var(--surface);
  border:1px solid var(--border);
  box-shadow:var(--shadow-sm);
}
#view-hosting-detail .hb-tab{
  display:inline-flex;align-items:center;gap:7px;
  padding:9px 15px;border-radius:10px;
  font-size:13px;font-weight:500;
  color:var(--text-soft);text-decoration:none;
  border:0;
  transition:.16s ease;
}
#view-hosting-detail .hb-tab:hover{background:var(--paper);color:var(--text);}
#view-hosting-detail .hb-tab.active{
  color:#fff;
  background:linear-gradient(120deg,var(--hb-deep),var(--hb-violet) 62%,#8a5bff);
  box-shadow:0 8px 18px -10px rgba(108,78,224,.95);
}
#view-hosting-detail .hb-tab .tab-badge{
  min-width:18px;height:18px;padding:0 5px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:999px;
  font-size:10.5px;font-weight:600;
  background:var(--paper);color:var(--text-soft);
  border:1px solid var(--border);
}
#view-hosting-detail .hb-tab.active .tab-badge{
  background:rgba(255,255,255,.24);color:#fff;border-color:transparent;
}

/* ---------- cartes de statistique ---------- */

.hb-stats{
  display:grid;gap:14px;margin-bottom:18px;
  grid-template-columns:repeat(4,minmax(0,1fr));
}
.hb-stat{
  position:relative;overflow:hidden;
  display:flex;align-items:flex-start;gap:13px;
  padding:16px;
  border-radius:16px;
  background:var(--surface);
  border:1px solid var(--border);
  box-shadow:0 1px 2px rgba(20,20,60,.04), 0 14px 28px -26px rgba(20,20,60,.5);
}
.hb-stat::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:var(--hb-tone);
}
.hb-stat .ic{
  width:38px;height:38px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  border-radius:12px;color:#fff;
  background:var(--hb-tone);
}
.hb-stat .ic .icon{width:19px;height:19px;}
.hb-stat .k{
  font-family:var(--font-display);
  font-size:9.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-faint);
}
.hb-stat .v{font-size:21px;font-weight:600;font-family:var(--font-display);line-height:1.15;margin-top:3px;}
.hb-stat .v small{font-size:13px;color:var(--text-faint);font-weight:500;}
.hb-stat .s{margin-top:2px;font-size:12px;color:var(--text-soft);}

.hb-stat[data-tone="disk"]{--hb-tone:linear-gradient(135deg,var(--hb-violet),#9b7bff);}
.hb-stat[data-tone="apps"]{--hb-tone:linear-gradient(135deg,#0f9ec2,var(--hb-cyan));}
.hb-stat[data-tone="db"]{--hb-tone:linear-gradient(135deg,var(--hb-deep),#3a4fe0);}
.hb-stat[data-tone="ssl-on"]{--hb-tone:linear-gradient(135deg,#12a35e,var(--hb-green));}
.hb-stat[data-tone="ssl-off"]{--hb-tone:linear-gradient(135deg,#e05a00,var(--hb-orange));}

/* ---------- panneaux ---------- */

.hb-cols{display:grid;gap:16px;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;}
.hb-col{display:flex;flex-direction:column;gap:16px;}

.hb-panel{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:16px;
  padding:18px;
  box-shadow:0 1px 2px rgba(20,20,60,.04), 0 14px 30px -28px rgba(20,20,60,.5);
}
.hb-panel-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-bottom:14px;
}
.hb-panel-head h3{
  display:flex;align-items:center;gap:8px;
  font-size:14.5px;
}
.hb-panel-head h3::before{
  content:"";width:4px;height:15px;border-radius:2px;
  background:linear-gradient(180deg,var(--hb-violet),var(--hb-cyan));
}
.hb-panel-head .hb-aside{font-size:11.5px;color:var(--text-faint);}

/* courbe */
#view-hosting-detail .graphe{width:100%;height:130px;display:block;margin-bottom:14px;}
#view-hosting-detail .graphe-aire{fill:rgba(108,78,224,.14);stroke:none;}
#view-hosting-detail .graphe-ligne{fill:none;stroke:var(--hb-violet);stroke-width:2;stroke-linejoin:round;}
#view-hosting-detail .graphe-quota{stroke:var(--hb-orange);stroke-width:1;stroke-dasharray:4 4;}
#view-hosting-detail .graphe-vide{
  padding:26px 14px;text-align:center;
  font-size:12.5px;color:var(--text-faint);
  border:1px dashed var(--border-strong);border-radius:12px;margin-bottom:14px;
}

.hb-quota-line{margin-top:10px;font-size:12.5px;color:var(--text-soft);}
.hb-quota-line b{color:var(--text);font-family:var(--font-mono);font-weight:500;}

/* couples clé / valeur */
.hb-kv{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:10px 0;border-bottom:1px solid var(--border);font-size:13px;}
.hb-kv:last-of-type{border-bottom:0;}
.hb-kv .k{color:var(--text-soft);flex-shrink:0;}
.hb-kv .v{font-weight:500;text-align:right;min-width:0;overflow-wrap:anywhere;}
.hb-kv .v.mono{font-family:var(--font-mono);font-size:12.5px;}

.hb-hint{margin-top:11px;font-size:12px;line-height:1.55;color:var(--text-faint);}
.hb-hint code{
  font-family:var(--font-mono);font-size:11.5px;
  padding:1px 5px;border-radius:5px;
  background:rgba(108,78,224,.09);color:#4a24c6;
}

/* fil des opérations */
.hb-timeline{display:flex;flex-direction:column;}
.hb-op{display:flex;gap:12px;padding-bottom:14px;position:relative;}
.hb-op:last-child{padding-bottom:0;}
.hb-op::before{
  content:"";position:absolute;left:6px;top:16px;bottom:0;width:1px;
  background:var(--border);
}
.hb-op:last-child::before{display:none;}
.hb-op .bullet{
  width:13px;height:13px;flex-shrink:0;margin-top:2px;
  border-radius:50%;
  background:var(--surface);
  border:3px solid var(--hb-green);
  z-index:1;
}
.hb-op[data-op="error"] .bullet{border-color:var(--hb-red);}
.hb-op[data-op="running"] .bullet{border-color:var(--hb-cyan);animation:hb-pulse 1.4s ease-in-out infinite;}
.hb-op .txt{min-width:0;}
.hb-op .txt strong{display:block;font-size:13px;font-weight:500;}
.hb-op .txt span{font-size:12px;color:var(--text-soft);}
@keyframes hb-pulse{0%,100%{box-shadow:0 0 0 0 rgba(23,190,232,.5);}50%{box-shadow:0 0 0 5px rgba(23,190,232,0);}}

/* ---------- applications ---------- */

.hb-app-status{display:flex;flex-direction:column;gap:10px;margin-bottom:18px;}

.hb-installed{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--border);}
.hb-installed:last-child{border-bottom:0;}
.hb-installed .mono-badge{
  width:36px;height:36px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  border-radius:11px;
  font-family:var(--font-display);font-size:12px;font-weight:600;
  color:#fff;background:var(--jeu,var(--hb-violet));
}
.hb-installed .txt{flex:1;min-width:0;}
.hb-installed .txt strong{display:block;font-size:13.5px;font-weight:500;}
.hb-installed .txt span{font-size:12px;color:var(--text-soft);}

#view-hosting-detail .app-grid{
  display:grid;gap:14px;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
}
#view-hosting-detail .app-tile{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;align-items:flex-start;gap:7px;
  padding:16px;
  text-align:left;cursor:pointer;
  border-radius:16px;
  border:1px solid var(--border);
  background:var(--surface);
  box-shadow:0 1px 2px rgba(20,20,60,.04);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
#view-hosting-detail .app-tile::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--jeu);
  opacity:.85;
}
#view-hosting-detail .app-tile:hover:not([disabled]){
  transform:translateY(-3px);
  border-color:color-mix(in srgb, var(--jeu) 45%, var(--border));
  box-shadow:0 20px 34px -24px color-mix(in srgb, var(--jeu) 75%, transparent);
}
#view-hosting-detail .app-mono{
  width:40px;height:40px;
  display:flex;align-items:center;justify-content:center;
  border-radius:12px;
  font-family:var(--font-display);font-size:13px;font-weight:600;
  color:#fff;background:var(--jeu);
  box-shadow:0 8px 16px -8px color-mix(in srgb, var(--jeu) 85%, transparent);
}
#view-hosting-detail .app-nom{font-size:13.5px;font-weight:600;font-family:var(--font-display);}
#view-hosting-detail .app-desc{font-size:12px;line-height:1.5;color:var(--text-soft);}
#view-hosting-detail .app-mode{
  margin-top:auto;padding:3px 9px;border-radius:7px;
  font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  background:var(--paper);color:var(--text-faint);border:1px solid var(--border);
}
#view-hosting-detail .app-mode.is-full{
  background:rgba(25,190,111,.1);color:#0d7a48;border-color:rgba(25,190,111,.3);
}
#view-hosting-detail .app-tile[disabled]{
  cursor:not-allowed;opacity:.72;background:var(--paper);box-shadow:none;
}
#view-hosting-detail .app-tile[disabled]::before{opacity:.3;}
#view-hosting-detail .app-tile[disabled] .app-mono{filter:grayscale(.7);box-shadow:none;}
#view-hosting-detail .app-tile[disabled] .app-desc{color:#8a3d00;}
#view-hosting-detail .app-tile:focus-visible{
  outline:2px solid var(--jeu);outline-offset:2px;
}

/* ---------- bases ---------- */

/* Chaque base est une carte encadrée (au lieu d'une simple ligne à filet) :
   plus lisible quand il n'y en a qu'une ou deux, et la corbeille reste
   ancrée à sa ligne au lieu de flotter. */
.hb-db{
  display:flex;align-items:center;gap:13px;
  padding:14px;margin-bottom:10px;
  border:1px solid var(--border);border-radius:14px;
  background:var(--surface);
  box-shadow:0 1px 2px rgba(20,20,60,.03);
}
.hb-db:last-of-type{margin-bottom:0;}
.hb-db .ic{
  width:36px;height:36px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  border-radius:11px;color:#fff;
  background:linear-gradient(135deg,var(--hb-deep),#3a4fe0);
}
.hb-db[data-db="error"] .ic{background:linear-gradient(135deg,#b8172e,var(--hb-red));}
.hb-db[data-db="pending"] .ic{background:linear-gradient(135deg,#0f9ec2,var(--hb-cyan));}
/* Pastille d'état visible pendant la création/suppression : le client voit
   que ça travaille, sans avoir à recharger. */
.hb-db[data-db="pending"]{border-color:rgba(15,158,194,.35);background:rgba(15,158,194,.04);}
.hb-db[data-db="pending"] .creds{color:var(--hb-cyan);font-weight:500;}
.hb-db[data-db="pending"] .creds::before{
  content:"";width:12px;height:12px;flex:0 0 auto;border-radius:50%;
  border:2px solid rgba(15,158,194,.3);border-top-color:var(--hb-cyan);
  display:inline-block;margin-right:6px;vertical-align:-2px;
  animation:hbdbspin .7s linear infinite;
}
@keyframes hbdbspin{to{transform:rotate(360deg);}}
.hb-db .main{flex:1;min-width:0;min-height:0;}
.hb-db .name{font-size:13.5px;font-weight:500;font-family:var(--font-mono);display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.hb-db .tagname{
  font-family:var(--font-body);font-size:11px;font-weight:500;
  padding:2px 8px;border-radius:6px;
  background:rgba(108,78,224,.09);color:#4a24c6;border:1px solid rgba(108,78,224,.2);
}
.hb-db .creds{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-top:4px;font-size:11.5px;color:var(--text-soft);}
.hb-db .creds code{
  font-family:var(--font-mono);
  padding:1px 5px;border-radius:5px;background:var(--paper);border:1px solid var(--border);
}
.hb-db-del{
  flex-shrink:0;
  width:34px;height:34px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:10px;cursor:pointer;
  border:1px solid rgba(224,48,74,.25);
  background:rgba(224,48,74,.06);
  color:var(--hb-red);
  transition:.15s ease;
}
.hb-db-del:hover{background:var(--hb-red);color:#fff;border-color:transparent;}

.hb-db-form{
  display:flex;gap:9px;margin-top:16px;padding-top:16px;
  border-top:1px dashed var(--border-strong);
}
.hb-db-form input{flex:1;min-width:0;}
.hb-db-form .hb-btn{flex:0 0 auto;}

#view-hosting-detail #db-creds{
  margin-top:14px;padding:14px;
  border-radius:12px;
  background:rgba(25,190,111,.07);
  border:1px solid rgba(25,190,111,.3);
}

/* ---------- sécurité ---------- */

.hb-ssl-state{
  display:flex;gap:12px;align-items:flex-start;
  padding:14px;border-radius:12px;
  background:rgba(25,190,111,.07);
  border:1px solid rgba(25,190,111,.3);
  color:#0d7a48;
  font-size:12.5px;line-height:1.5;
}
.hb-ssl-state strong{display:block;margin-bottom:2px;}
.hb-ssl-state .icon{flex-shrink:0;margin-top:1px;}

.hb-prose{font-size:13px;line-height:1.65;color:var(--text-soft);margin-bottom:14px;}
.hb-prose strong{color:var(--text);}

.hb-inline-form{display:flex;gap:9px;align-items:center;}
.hb-inline-form select{flex:1;min-width:0;}

/* ---------- Configuration PHP (onglet Sécurité & PHP) ---------- */
.hb-phpinfo{display:flex;flex-direction:column;gap:2px;margin-bottom:18px;}
.hb-phpinfo-row{
  display:grid;grid-template-columns:minmax(120px,1fr) auto;
  grid-template-areas:"cle val" "desc desc";
  gap:2px 10px;align-items:center;
  padding:9px 0;border-bottom:1px solid var(--border);
}
.hb-phpinfo-row:last-child{border-bottom:0;}
.hb-phpinfo-row code{grid-area:cle;font-family:var(--font-mono);font-size:12.5px;color:var(--text);}
.hb-phpinfo-val{grid-area:val;font-weight:600;font-size:13px;color:var(--hb-deep);justify-self:end;}
.hb-phpinfo-desc{grid-area:desc;font-size:11.5px;color:var(--text-soft);}
.hb-phpinfo-ext strong{display:block;font-size:12.5px;margin-bottom:8px;}
.hb-phpinfo-tags{display:flex;flex-wrap:wrap;gap:6px;}
.hb-tag-ext{
  font-family:var(--font-mono);font-size:11px;
  padding:3px 8px;border-radius:6px;
  background:rgba(108,78,224,.08);color:#4a24c6;border:1px solid rgba(108,78,224,.18);
}
.hb-btn-block{width:100%;flex:none;}

/* ---------- modale d'installation ---------- */

#view-hosting-detail .modal{border-radius:18px;overflow:hidden;}
#view-hosting-detail .modal-head{
  border-bottom:1px solid var(--border);
  background:linear-gradient(120deg,var(--hb-deep),var(--hb-violet) 65%,#8a5bff);
  color:#fff;
}
#view-hosting-detail .modal-head h3{color:#fff;}
#view-hosting-detail .modal-close{color:rgba(255,255,255,.8);}
#view-hosting-detail .modal-close:hover{background:rgba(255,255,255,.16);color:#fff;}
#view-hosting-detail .path-row:focus-within{
  border-color:var(--hb-violet);box-shadow:0 0 0 3px rgba(108,78,224,.15);
}
#view-hosting-detail input:focus,
#view-hosting-detail select:focus{
  border-color:var(--hb-violet);box-shadow:0 0 0 3px rgba(108,78,224,.15);
}

/* ---------- adaptations ---------- */

@media (max-width:1080px){
  .hb-stats{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:900px){
  .hb-hero--detail .hb-hero-grid{grid-template-columns:1fr;}
  .hb-cols{grid-template-columns:1fr;}
  .hb-url.is-dark{font-size:13px;padding:9px 13px;}
  #view-hosting-detail .tabs{flex-wrap:nowrap;overflow-x:auto;}
  #view-hosting-detail .hb-tab{white-space:nowrap;}
}
@media (max-width:560px){
  .hb-stats{grid-template-columns:1fr;}
  .hb-db-form{flex-direction:column;}
}
@media (prefers-reduced-motion:reduce){
  #view-hosting-detail .app-tile{transition:none;}
  #view-hosting-detail .app-tile:hover:not([disabled]){transform:none;}
  .hb-op[data-op="running"] .bullet{animation:none;}
  .hb-back:hover{gap:6px;}
}

/* ---------------------------------------------------------------------
   Neutralisations ciblées
   .tabs / .tab-btn / .tab-badge sont partagés avec le détail serveur : on
   n'y touche pas globalement, on annule seulement ici les propriétés que
   l'ancien habillage laissait passer (soulignement d'onglet, marges).
   --------------------------------------------------------------------- */

#view-hosting-detail .tabs{border-bottom:1px solid var(--border);}
#view-hosting-detail .hb-tab{margin-bottom:0;border-bottom:0;}
#view-hosting-detail .hb-tab.active{border-bottom-color:transparent;}
#view-hosting-detail .hb-tab .tab-badge{margin-left:0;}

/* .hb-btn est étiré sur la liste (deux boutons de largeur égale) ;
   sur la page de gestion il se dimensionne à son contenu. */
#view-hosting-detail .hb-btn{flex:0 0 auto;}
#view-hosting-detail .hb-btn-block{width:100%;}


/* =====================================================================
   /domaines et /domaines/<id> — habillage dédié
   ---------------------------------------------------------------------
   Même palette que l'hébergement — bleu profond OVHcloud, violet
   Hostinger, cyan IONOS, orange LWS — mais deux idées propres au sujet :

   1. L'extension porte une couleur. Chaque TLD reçoit toujours la même
      teinte, si bien qu'une liste de domaines se relit par la couleur
      avant même le nom.
   2. Un domaine est un bail. La barre de bail montre le terme écoulé
      entre l'enregistrement et l'expiration, avec un curseur sur le jour
      présent — la vraie question du client n'est pas « quelle date »,
      c'est « combien de temps me reste-t-il ».

   Le fichier est autonome : il redéclare ses jetons et n'utilise que le
   préfixe « dm- ». Le retirer annule la refonte sans toucher au reste.
   ===================================================================== */

#view-domains,
#view-domain-detail{
  --dm-deep:#0b1fa8;
  --dm-violet:#6c4ee0;
  --dm-cyan:#17bee8;
  --dm-orange:#ff7a18;
  --dm-green:#19be6f;
  --dm-red:#e0304a;
  --dm-radius:18px;
}

/* teintes attribuées aux extensions */
[data-tld-tone="deep"]{--dm-tone:var(--dm-deep);--dm-tone-2:#3a4fe0;}
[data-tld-tone="violet"]{--dm-tone:var(--dm-violet);--dm-tone-2:#9b7bff;}
[data-tld-tone="cyan"]{--dm-tone:#0f9ec2;--dm-tone-2:var(--dm-cyan);}
[data-tld-tone="orange"]{--dm-tone:#e05a00;--dm-tone-2:var(--dm-orange);}

/* =====================================================================
   Bandeau commun
   ===================================================================== */

.dm-hero{
  position:relative;
  overflow:hidden;
  margin-bottom:22px;
  padding:24px 26px;
  border-radius:22px;
  color:#fff;
  background:
    radial-gradient(620px circle at 92% -40%, rgba(255,122,24,.5), transparent 62%),
    radial-gradient(520px circle at 6% 140%,  rgba(23,190,232,.58), transparent 62%),
    linear-gradient(112deg, var(--dm-deep) 0%, #3a24c9 40%, var(--dm-violet) 68%, #8258ff 100%);
  box-shadow:0 20px 44px -20px rgba(11,31,168,.6);
}
.dm-hero::after{
  content:"";
  position:absolute;left:0;right:0;bottom:0;height:3px;
  background:linear-gradient(90deg,
    var(--dm-deep) 0%, var(--dm-violet) 34%, var(--dm-cyan) 66%, var(--dm-orange) 100%);
}
.dm-hero-grid{
  position:relative;
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:flex-end;
}
.dm-eyebrow{
  font-family:var(--font-display);
  font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.62);
  margin-bottom:9px;
}
.dm-hero h1{color:#fff;font-size:28px;line-height:1.15;letter-spacing:-.015em;}
.dm-hero .dm-sub{
  margin-top:9px;max-width:48ch;
  font-size:13.5px;line-height:1.55;color:rgba(255,255,255,.78);
}
.dm-hero .dm-sub b{color:#fff;font-weight:600;}

.dm-chips{display:flex;gap:10px;flex-wrap:wrap;}
.dm-chip{
  min-width:106px;padding:11px 15px 12px;border-radius:14px;
  background:rgba(255,255,255,.13);
  border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(8px);
}
.dm-chip .k{
  display:block;font-family:var(--font-display);
  font-size:9.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.66);
}
.dm-chip .v{
  display:block;margin-top:4px;
  font-size:19px;font-weight:600;font-family:var(--font-display);line-height:1.1;
}
.dm-chip.is-alert{background:rgba(255,122,24,.24);border-color:rgba(255,180,120,.5);}

/* =====================================================================
   Nom de domaine : radical + extension colorée
   ===================================================================== */

.dm-name{
  display:flex;align-items:baseline;gap:2px;flex-wrap:wrap;
  font-family:var(--font-mono);
  min-width:0;
}
.dm-name .radical{
  font-size:17px;font-weight:500;letter-spacing:-.01em;
  overflow:hidden;text-overflow:ellipsis;
}
.dm-tld{
  display:inline-flex;align-items:center;
  padding:2px 9px;margin-left:5px;
  border-radius:7px;
  font-family:var(--font-display);
  font-size:12px;font-weight:600;letter-spacing:.01em;
  color:#fff;
  background:linear-gradient(120deg,var(--dm-tone),var(--dm-tone-2));
  box-shadow:0 6px 14px -8px var(--dm-tone);
}

/* version bandeau, sur fond sombre */
.dm-hero .dm-name .radical{font-size:26px;color:#fff;}
.dm-hero .dm-tld{font-size:14px;padding:3px 12px;margin-left:8px;box-shadow:none;}

/* =====================================================================
   Barre de bail — élément signature
   ===================================================================== */

.dm-lease{--dm-lease-c:var(--dm-green);}
.dm-lease[data-etat="bientot"]{--dm-lease-c:var(--dm-orange);}
.dm-lease[data-etat="expire"]{--dm-lease-c:var(--dm-red);}

.dm-lease-head{
  display:flex;justify-content:space-between;align-items:baseline;
  margin-bottom:8px;
  font-family:var(--font-display);
  font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-faint);
}
.dm-lease-head b{
  font-family:var(--font-body);font-size:12.5px;font-weight:600;
  letter-spacing:0;text-transform:none;color:var(--dm-lease-c);
}
.dm-lease-track{
  position:relative;height:8px;border-radius:999px;
  background:var(--border);
}
.dm-lease-track > i{
  display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg,var(--dm-cyan),var(--dm-violet));
  transition:width .8s cubic-bezier(.2,.8,.2,1);
}
.dm-lease[data-etat="bientot"] .dm-lease-track > i{background:linear-gradient(90deg,#ffb15c,var(--dm-orange));}
.dm-lease[data-etat="expire"] .dm-lease-track > i{background:linear-gradient(90deg,#ff8095,var(--dm-red));}
.dm-lease-track .today{
  position:absolute;top:50%;width:3px;height:16px;
  transform:translate(-50%,-50%);
  border-radius:2px;
  background:var(--surface);
  box-shadow:0 0 0 2px var(--dm-lease-c);
}
.dm-lease-foot{
  display:flex;justify-content:space-between;
  margin-top:7px;
  font-family:var(--font-mono);font-size:11px;color:var(--text-faint);
}

/* dans le bandeau sombre */
.dm-hero .dm-lease-head{color:rgba(255,255,255,.62);}
.dm-hero .dm-lease-head b{color:#fff;}
.dm-hero .dm-lease-track{background:rgba(255,255,255,.2);}
.dm-hero .dm-lease-track > i{background:linear-gradient(90deg,#8ef0ff,#fff);}
.dm-hero .dm-lease[data-etat="bientot"] .dm-lease-track > i{background:linear-gradient(90deg,#ffd9a8,#ffa64d);}
.dm-hero .dm-lease[data-etat="expire"] .dm-lease-track > i{background:linear-gradient(90deg,#ffc3cc,#ff6b7f);}
.dm-hero .dm-lease-track .today{background:#fff;box-shadow:0 0 0 2px rgba(0,0,0,.25);}
.dm-hero .dm-lease-foot{color:rgba(255,255,255,.6);}

/* =====================================================================
   Liste des domaines
   ===================================================================== */

.dm-grid{
  display:grid;gap:18px;
  grid-template-columns:repeat(auto-fill,minmax(380px,1fr));
}

.dm-card{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--dm-radius);
  box-shadow:0 1px 2px rgba(20,20,60,.04), 0 16px 32px -26px rgba(20,20,60,.5);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.dm-card:hover{
  transform:translateY(-3px);
  border-color:var(--border-strong);
  box-shadow:0 1px 2px rgba(20,20,60,.04), 0 26px 44px -28px rgba(20,20,60,.6);
}
/* liseré à la couleur de l'extension */
.dm-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--dm-tone),var(--dm-tone-2));
}

.dm-card-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding:17px 18px 14px;
  border-bottom:1px solid var(--border);
}
.dm-card-body{padding:16px 18px;display:flex;flex-direction:column;gap:15px;}

.dm-state{
  display:inline-flex;align-items:center;gap:6px;flex-shrink:0;
  padding:4px 10px;border-radius:8px;
  font-size:11.5px;font-weight:500;
}
.dm-state .dot{width:6px;height:6px;border-radius:50%;background:currentColor;}
.dm-state[data-etat="online"]{background:rgba(25,190,111,.1);color:#0d7a48;}
.dm-state[data-etat="pending"]{background:rgba(255,122,24,.1);color:#8a3d00;}
.dm-state[data-etat="offline"]{background:rgba(224,48,74,.08);color:#a41326;}
.dm-state[data-etat="neutral"]{background:var(--paper);color:var(--text-soft);}

.dm-tags{display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin-top:7px;}
.dm-tag{
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 9px;border-radius:7px;
  font-size:11px;font-weight:500;
  background:var(--paper);border:1px solid var(--border);color:var(--text-soft);
}
.dm-tag .icon{width:12px;height:12px;}
.dm-tag.is-auto{background:rgba(25,190,111,.09);border-color:rgba(25,190,111,.28);color:#0d7a48;}

.dm-ns{
  display:flex;flex-direction:column;gap:5px;
  padding-top:13px;border-top:1px dashed var(--border-strong);
}
.dm-ns .k{
  font-family:var(--font-display);
  font-size:9.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--text-faint);
}
.dm-ns .v{font-family:var(--font-mono);font-size:12px;color:var(--text-soft);overflow-wrap:anywhere;}

.dm-actions{
  display:flex;gap:9px;margin-top:auto;
  padding:14px 18px;
  background:linear-gradient(180deg,#fbfaff,#f5f4fb);
  border-top:1px solid var(--border);
}

/* Assignation d'un hébergement à ce domaine (page /domaines). */
.dm-assign{
  display:flex;gap:8px;align-items:center;
  padding:12px 18px;border-top:1px solid var(--border);
  background:rgba(108,78,224,.04);
}
.dm-assign-select{
  flex:1;min-width:0;padding:8px 10px;
  border:1px solid var(--border);border-radius:8px;
  font-size:12.5px;background:#fff;color:var(--text);
}
.dm-assign .dm-btn{flex:0 0 auto;}
.dm-assigned{
  display:flex;align-items:center;gap:7px;
  padding:11px 18px;border-top:1px solid var(--border);
  font-size:12.5px;color:var(--hb-green,#19be6f);font-weight:500;
}
.dm-assigned .icon{flex-shrink:0;}

/* =====================================================================
   Boutons
   ===================================================================== */

.dm-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:9px 14px;border-radius:11px;
  font-size:12.5px;font-weight:500;
  text-decoration:none;cursor:pointer;
  border:1px solid var(--border-strong);
  background:#fff;color:var(--text);
  transition:.16s ease;
}
.dm-btn:hover{transform:translateY(-1px);border-color:var(--dm-violet);color:var(--dm-violet);}
.dm-btn-primary{
  border-color:transparent;color:#fff;
  background:linear-gradient(120deg,var(--dm-deep) 0%,var(--dm-violet) 58%,#8a5bff 100%);
  box-shadow:0 10px 20px -10px rgba(108,78,224,.9);
}
.dm-btn-primary:hover{color:#fff;filter:brightness(1.08);}
.dm-btn-grow{flex:1;}
.dm-btn[disabled]{opacity:.5;cursor:not-allowed;transform:none;}

.dm-icon-btn{
  width:32px;height:32px;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:9px;cursor:pointer;
  border:1px solid var(--border);
  background:var(--surface);color:var(--text-soft);
  transition:.15s ease;
}
.dm-icon-btn:hover{border-color:var(--dm-violet);color:var(--dm-violet);background:#fff;}
.dm-icon-btn.is-danger:hover{border-color:var(--dm-red);color:#fff;background:var(--dm-red);}

.dm-back{
  display:inline-flex;align-items:center;gap:6px;
  margin-bottom:14px;
  font-size:13px;font-weight:500;
  color:var(--text-soft);text-decoration:none;
  transition:.15s ease;
}
.dm-back:hover{color:var(--dm-violet);gap:9px;}

/* =====================================================================
   Panneaux (fiche domaine)
   ===================================================================== */

.dm-panel{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:16px;
  padding:18px;
  margin-bottom:16px;
  box-shadow:0 1px 2px rgba(20,20,60,.04), 0 14px 30px -28px rgba(20,20,60,.5);
}
.dm-panel:last-child{margin-bottom:0;}
.dm-panel-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-bottom:14px;
}
.dm-panel-head h2{display:flex;align-items:center;gap:8px;font-size:14.5px;}
.dm-panel-head h2::before{
  content:"";width:4px;height:15px;border-radius:2px;
  background:linear-gradient(180deg,var(--dm-violet),var(--dm-cyan));
}
.dm-prose{font-size:13px;line-height:1.6;color:var(--text-soft);margin-bottom:14px;}

.dm-tiles{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));}
.dm-tile{
  padding:12px 14px;border-radius:12px;
  background:var(--paper);border:1px solid var(--border);
}
.dm-tile .k{
  font-family:var(--font-display);
  font-size:9.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--text-faint);
}
.dm-tile .v{margin-top:4px;font-size:13.5px;font-weight:500;overflow-wrap:anywhere;}
.dm-tile .v.mono{font-family:var(--font-mono);font-size:12.5px;}
.dm-tile .v.is-warning{color:#8a3d00;}
.dm-tile .v.is-danger{color:#a41326;}

/* serveurs de noms */
.dm-nsrow{
  display:flex;align-items:center;gap:12px;
  padding:11px 0;border-bottom:1px solid var(--border);
}
.dm-nsrow:last-of-type{border-bottom:0;}
.dm-nsrow .k{
  width:38px;flex-shrink:0;
  font-family:var(--font-display);font-size:11px;font-weight:600;
  letter-spacing:.08em;color:var(--text-faint);
}
.dm-nsrow .v{
  flex:1;min-width:0;
  padding:5px 11px;border-radius:8px;
  font-family:var(--font-mono);font-size:12.5px;
  background:var(--paper);border:1px solid var(--border);
  overflow-wrap:anywhere;
}

/* =====================================================================
   Zone DNS
   ===================================================================== */

.dm-empty-zone{
  display:flex;gap:16px;align-items:flex-start;
  padding:20px;
  border-radius:14px;
  background:
    radial-gradient(400px circle at 90% -60%, rgba(23,190,232,.14), transparent 70%),
    var(--paper);
  border:1px dashed var(--border-strong);
}
.dm-empty-zone .medal{
  width:46px;height:46px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  border-radius:14px;color:#fff;
  background:linear-gradient(135deg,var(--dm-deep),var(--dm-violet) 60%,var(--dm-cyan));
  box-shadow:0 12px 22px -12px rgba(108,78,224,.8);
}
.dm-empty-zone .medal .icon{width:22px;height:22px;}
.dm-empty-zone h3{font-size:14.5px;margin-bottom:5px;}
.dm-empty-zone.is-down .medal{background:linear-gradient(135deg,#b8172e,var(--dm-red));box-shadow:none;}

/* formulaire d'ajout / édition */
#view-domain-detail #dns-form{
  margin-bottom:16px;padding:16px;
  border-radius:14px;
  background:linear-gradient(180deg,#faf9ff,#f5f4fb);
  border:1px solid var(--border-strong);
}
#view-domain-detail #dns-form[hidden]{display:none;}
.dm-form-grid{
  display:grid;gap:12px;
  grid-template-columns:120px 160px minmax(0,1fr) 100px;
}
.dm-fld{display:flex;flex-direction:column;gap:5px;min-width:0;}
.dm-fld > span{
  font-family:var(--font-display);
  font-size:9.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--text-faint);
}
#view-domain-detail #dns-hint{
  margin-top:11px;font-size:12px;line-height:1.5;color:var(--text-faint);
}
#view-domain-detail #dns-error{margin-top:11px;margin-bottom:0;}
.dm-form-actions{display:flex;gap:9px;margin-top:14px;}

#view-domain-detail input[type=text],
#view-domain-detail input[type=number],
#view-domain-detail select{
  padding:9px 11px;border-radius:9px;font-size:13.5px;
}
#view-domain-detail input:focus,
#view-domain-detail select:focus{
  border-color:var(--dm-violet);box-shadow:0 0 0 3px rgba(108,78,224,.15);
}

/* table des enregistrements */
.dm-table-wrap{overflow-x:auto;margin:0 -4px;padding:0 4px;}
.dm-table{width:100%;border-collapse:collapse;font-size:13.5px;}
.dm-table th{
  text-align:left;padding:0 12px 9px;
  font-family:var(--font-display);
  font-size:9.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--text-faint);
  border-bottom:1px solid var(--border);
}
.dm-table td{padding:11px 12px;border-bottom:1px solid var(--border);vertical-align:middle;}
.dm-table tr:last-child td{border-bottom:none;}
.dm-table tbody tr{transition:background .14s ease;}
.dm-table tbody tr:hover{background:var(--paper);}
.dm-table .mono{font-family:var(--font-mono);font-size:12.5px;}
.dm-table .val{max-width:340px;overflow-wrap:anywhere;}
.dm-table .ttl{font-family:var(--font-mono);font-size:12px;color:var(--text-faint);}
.dm-table .acts{text-align:right;white-space:nowrap;}
.dm-table .acts .dm-icon-btn + .dm-icon-btn{margin-left:6px;}

/* étiquette de type : une couleur par nature d'enregistrement */
.dm-rt{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:52px;padding:3px 9px;
  border-radius:7px;
  font-family:var(--font-display);
  font-size:11px;font-weight:600;letter-spacing:.04em;
  color:#fff;
  background:var(--rt,#8b8f9c);
}
.dm-rt[data-t="A"]{--rt:#6c4ee0;}
.dm-rt[data-t="AAAA"]{--rt:#9b7bff;}
.dm-rt[data-t="CNAME"]{--rt:#17bee8;}
.dm-rt[data-t="MX"]{--rt:#ff7a18;}
.dm-rt[data-t="TXT"]{--rt:#6b7280;}
.dm-rt[data-t="NS"]{--rt:#0b1fa8;}
.dm-rt[data-t="SOA"]{--rt:#1f2937;}
.dm-rt[data-t="SRV"]{--rt:#0f9ec2;}
.dm-rt[data-t="CAA"]{--rt:#19be6f;}

.dm-managed{
  font-size:11px;font-weight:500;
  padding:3px 9px;border-radius:7px;
  background:var(--paper);border:1px solid var(--border);color:var(--text-faint);
}

.dm-foot-note{margin-top:13px;font-size:12px;line-height:1.55;color:var(--text-faint);}

/* =====================================================================
   Page vide
   ===================================================================== */

.dm-empty{
  position:relative;overflow:hidden;
  padding:56px 28px;text-align:center;
  border-radius:22px;
  background:var(--surface);
  border:1px solid var(--border);
  box-shadow:0 16px 34px -28px rgba(20,20,60,.5);
}
.dm-empty::before{
  content:"";
  position:absolute;top:-160px;left:-10%;right:-10%;height:340px;
  background:
    radial-gradient(closest-side,rgba(108,78,224,.2),transparent 72%),
    radial-gradient(closest-side,rgba(23,190,232,.18),transparent 72%),
    radial-gradient(closest-side,rgba(255,122,24,.14),transparent 72%);
  background-position:18% 60%, 76% 40%, 50% 90%;
  background-size:340px 340px, 300px 300px, 260px 260px;
  background-repeat:no-repeat;
}
.dm-empty > *{position:relative;}
.dm-medallion{
  width:62px;height:62px;margin:0 auto 20px;
  display:flex;align-items:center;justify-content:center;
  border-radius:20px;color:#fff;
  background:linear-gradient(135deg,var(--dm-deep),var(--dm-violet) 55%,var(--dm-cyan));
  box-shadow:0 14px 26px -12px rgba(108,78,224,.75);
}
.dm-medallion .icon{width:28px;height:28px;}
.dm-empty h2{font-size:20px;margin-bottom:9px;}
.dm-empty p{
  max-width:46ch;margin:0 auto 24px;
  font-size:14px;line-height:1.6;color:var(--text-soft);
}
.dm-empty-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}

/* =====================================================================
   Adaptations
   ===================================================================== */

@media (max-width:1000px){
  .dm-form-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:900px){
  .dm-hero{padding:20px;border-radius:18px;}
  .dm-hero-grid{grid-template-columns:1fr;align-items:stretch;gap:18px;}
  .dm-hero h1{font-size:23px;}
  .dm-hero .dm-name .radical{font-size:21px;}
  .dm-chip{flex:1;min-width:104px;}
}
@media (max-width:640px){
  .dm-grid{grid-template-columns:1fr;}
  .dm-form-grid{grid-template-columns:1fr;}
  .dm-actions{flex-direction:column;}
}

@media (prefers-reduced-motion:reduce){
  .dm-card,.dm-btn,.dm-icon-btn,.dm-lease-track > i{transition:none;}
  .dm-card:hover,.dm-btn:hover{transform:none;}
  .dm-back:hover{gap:6px;}
}

#view-domains a:focus-visible,
#view-domains button:focus-visible,
#view-domain-detail a:focus-visible,
#view-domain-detail button:focus-visible{
  outline:2px solid var(--dm-violet);
  outline-offset:2px;
  box-shadow:0 0 0 4px rgba(108,78,224,.18);
}


/* =====================================================================
   =====================================================================

   COMPOSANTS DE LA MAQUETTE
   Bandeau d'accueil, anneaux de consommation, bandeau de ressources,
   cartes de services associés.

   =====================================================================
   ===================================================================== */

/* ---------------------------------------------------------------------
   Bandeau d'accueil
   Le dégradé de la maquette, et à droite une rangée de tuiles colorées
   qui sont de vrais raccourcis — une teinte par famille de service,
   reprise partout ailleurs dans le panel.
   --------------------------------------------------------------------- */

.hero-banner{
  position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:space-between;gap:26px;
  padding:22px 26px;margin-bottom:26px;
  border-radius:16px;color:#fff;
  background:
    radial-gradient(600px circle at 88% -60%, rgba(255,255,255,.22), transparent 60%),
    linear-gradient(105deg,#5b34c9 0%,#7c4de0 42%,#9d5cf0 68%,#6366f1 100%);
  box-shadow:0 18px 38px -20px rgba(91,52,201,.75);
}
.hero-copy h2{color:#fff;font-size:19px;line-height:1.25;letter-spacing:-.01em;}
.hero-copy p{margin-top:5px;font-size:13px;color:rgba(255,255,255,.8);max-width:60ch;}
.hero-copy .hero-eyebrow{
  font-family:var(--font-display);
  font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.6);margin-bottom:7px;
}

.hero-tiles{display:flex;gap:9px;flex-shrink:0;}
.hero-tile{
  width:42px;height:42px;
  display:flex;align-items:center;justify-content:center;
  border-radius:11px;color:#fff;text-decoration:none;
  background:var(--t,rgba(255,255,255,.16));
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 8px 16px -8px rgba(0,0,0,.45);
  transition:transform .16s ease, filter .16s ease;
}
.hero-tile:hover{transform:translateY(-3px);filter:brightness(1.12);}
.hero-tile .icon{width:19px;height:19px;}
.hero-tile[data-t="web"]{--t:linear-gradient(135deg,#8b6df0,#6c4ee0);}
.hero-tile[data-t="dns"]{--t:linear-gradient(135deg,#60a5fa,#3b82f6);}
.hero-tile[data-t="db"]{--t:linear-gradient(135deg,#2dd4bf,#14b8a6);}
.hero-tile[data-t="pay"]{--t:linear-gradient(135deg,#4ade80,#22c55e);}
.hero-tile[data-t="game"]{--t:linear-gradient(135deg,#fb923c,#f97316);}

/* ---------------------------------------------------------------------
   Titres de section
   --------------------------------------------------------------------- */

.section-title{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  margin:0 0 13px;
}
.section-title h2{font-size:15.5px;letter-spacing:-.01em;}
.section-title a{
  font-size:12.5px;font-weight:500;color:var(--brand-dark);text-decoration:none;
}
.section-title a:hover{text-decoration:underline;}
.section-title + .section-title{margin-top:28px;}
.stack-24 > * + *{margin-top:24px;}

/* ---------------------------------------------------------------------
   Carte d'offre + bandeau de ressources
   --------------------------------------------------------------------- */

.plan-panel{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-md);
  overflow:hidden;
}
.plan-panel-head{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:16px 20px;
  border-bottom:1px solid var(--border);
}
.plan-panel-head .plan-id{display:flex;align-items:center;gap:11px;}
.plan-panel-head .plan-id strong{font-family:var(--font-display);font-size:17px;}
.plan-panel-head .renew{font-size:12.5px;color:var(--text-soft);}
.plan-panel-head .renew b{color:var(--text);font-weight:600;}

.res-label{
  padding:14px 20px 0;
  font-family:var(--font-display);
  font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-faint);
}
.res-strip{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  padding:14px 20px 20px;gap:10px;
}
.res-cell{
  display:flex;align-items:center;gap:13px;
  padding:0 16px;
  border-left:1px solid var(--border);
}
.res-cell:first-child{border-left:0;padding-left:0;}
.res-cell .r-body{min-width:0;}
.res-cell .r-label{font-size:12px;color:var(--text-soft);margin-bottom:6px;}
.res-cell .r-value{font-family:var(--font-display);font-size:16px;font-weight:600;line-height:1.2;}
.res-cell .r-sub{font-size:11.5px;color:var(--text-faint);margin-top:3px;}
.res-cell .r-bar{height:7px;border-radius:999px;background:var(--border);overflow:hidden;margin-bottom:7px;}
.res-cell .r-bar > i{
  display:block;height:100%;border-radius:999px;
  background:var(--r-tone,var(--brand));
  transition:width .8s cubic-bezier(.2,.8,.2,1);
}
.res-cell[data-tone="web"]{--r-tone:linear-gradient(90deg,#8b6df0,#6c4ee0);}
.res-cell[data-tone="dns"]{--r-tone:linear-gradient(90deg,#60a5fa,#3b82f6);}
.res-cell[data-tone="db"]{--r-tone:linear-gradient(90deg,#2dd4bf,#14b8a6);}
.res-cell[data-tone="pay"]{--r-tone:linear-gradient(90deg,#4ade80,#22c55e);}
.res-cell[data-tone="game"]{--r-tone:linear-gradient(90deg,#fb923c,#f97316);}
.res-cell[data-level="warn"]{--r-tone:linear-gradient(90deg,#fbbf24,#d97706);}
.res-cell[data-level="crit"]{--r-tone:linear-gradient(90deg,#f87171,#dc2626);}

/* anneau de consommation */
.ring{
  position:relative;flex-shrink:0;
  width:58px;height:58px;border-radius:50%;
  background:conic-gradient(var(--ring-c,var(--brand)) calc(var(--pct,0) * 3.6deg), var(--border) 0);
}
.ring::after{content:"";position:absolute;inset:6px;border-radius:50%;background:var(--surface);}
.ring span{
  position:absolute;inset:0;z-index:1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-family:var(--font-display);font-size:13px;font-weight:600;line-height:1;
}
.ring span small{font-size:8.5px;font-weight:500;color:var(--text-faint);margin-top:2px;letter-spacing:.04em;}
.res-cell[data-tone="web"] .ring{--ring-c:#6c4ee0;}
.res-cell[data-tone="dns"] .ring{--ring-c:#3b82f6;}
.res-cell[data-tone="db"] .ring{--ring-c:#14b8a6;}
.res-cell[data-tone="pay"] .ring{--ring-c:#22c55e;}
.res-cell[data-tone="game"] .ring{--ring-c:#f97316;}
.res-cell[data-level="warn"] .ring{--ring-c:#d97706;}
.res-cell[data-level="crit"] .ring{--ring-c:#dc2626;}

/* ---------------------------------------------------------------------
   Cartes de services associés
   --------------------------------------------------------------------- */

.svc-grid{display:grid;gap:16px;grid-template-columns:repeat(3,minmax(0,1fr));}

.svc-card{
  display:flex;flex-direction:column;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-md);
  overflow:hidden;
}
.svc-head{
  display:flex;align-items:center;gap:10px;
  padding:14px 16px;border-bottom:1px solid var(--border);
}
.svc-head .svc-ic{
  width:30px;height:30px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  border-radius:9px;color:#fff;background:var(--s-tone,var(--brand));
}
.svc-head .svc-ic .icon{width:15px;height:15px;}
.svc-head h3{font-size:13.5px;flex:1;min-width:0;}
.svc-head .svc-count{font-size:11.5px;color:var(--text-faint);}
.svc-card[data-tone="web"]{--s-tone:linear-gradient(135deg,#8b6df0,#6c4ee0);}
.svc-card[data-tone="dns"]{--s-tone:linear-gradient(135deg,#60a5fa,#3b82f6);}
.svc-card[data-tone="db"]{--s-tone:linear-gradient(135deg,#2dd4bf,#14b8a6);}
.svc-card[data-tone="pay"]{--s-tone:linear-gradient(135deg,#4ade80,#22c55e);}
.svc-card[data-tone="game"]{--s-tone:linear-gradient(135deg,#fb923c,#f97316);}

.svc-body{padding:6px 16px 10px;flex:1;}
.svc-row{
  display:flex;align-items:center;gap:10px;
  padding:10px 0;border-bottom:1px solid var(--border);
  text-decoration:none;color:inherit;
}
.svc-row:last-child{border-bottom:0;}
.svc-row .s-main{flex:1;min-width:0;}
.svc-row .s-name{
  font-size:13px;font-weight:500;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.svc-row .s-name.mono{font-family:var(--font-mono);font-size:12.5px;}
.svc-row .s-sub{font-size:11.5px;color:var(--text-faint);margin-top:2px;}
.svc-empty{padding:16px 0 18px;font-size:12.5px;line-height:1.55;color:var(--text-faint);}
.svc-foot{
  padding:11px 16px;border-top:1px solid var(--border);
  background:var(--paper);
}
.svc-foot a{font-size:12.5px;font-weight:500;color:var(--brand-dark);text-decoration:none;}
.svc-foot a:hover{text-decoration:underline;}

/* pastille compacte, façon maquette */
.tag-ok,.tag-warn,.tag-off{
  flex-shrink:0;
  padding:2px 9px;border-radius:7px;
  font-size:11px;font-weight:600;
}
.tag-ok{background:var(--success-tint);color:var(--success-dark);}
.tag-warn{background:var(--warning-tint);color:#92400e;}
.tag-off{background:var(--paper);color:var(--text-faint);border:1px solid var(--border);}

@media (max-width:1180px){
  .res-strip{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:20px;}
  .res-cell:nth-child(4){border-left:0;padding-left:0;}
  .svc-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:760px){
  .hero-banner{flex-direction:column;align-items:flex-start;gap:18px;}
  .res-strip{grid-template-columns:repeat(2,minmax(0,1fr));}
  .res-cell{border-left:0;padding-left:0;}
  .svc-grid{grid-template-columns:1fr;}
}
@media (max-width:420px){
  .res-strip{grid-template-columns:1fr;}
}

@media (prefers-reduced-motion:reduce){
  .hero-tile:hover{transform:none;}
  .res-cell .r-bar > i,.rail-meter .m-track > i{transition:none;}
}


/* =====================================================================
   CHARTE ACTI-INFORMATIQUE
   ---------------------------------------------------------------------
   Le logo, le nom et le slogan viennent de la table `settings`
   (platform_logo_url, platform_name, platform_tagline) : rien n'est codé
   en dur, la marque se change depuis l'administration.

   Les couleurs suivent le même principe. Deux clés suffisent :

     brand_primary  -> couleur d'accent (boutons, liens, état actif)
     brand_ink      -> navy de la barre de navigation

   marque_theme_css() en dérive toute la rampe (foncé, clair, teinte,
   ombre) et l'injecte dans :root, après cette feuille. Tant que les deux
   clés sont vides, les valeurs par défaut ci-dessus s'appliquent.
   ===================================================================== */

.brand-logo{
  height:30px;width:auto;max-width:150px;
  display:block;object-fit:contain;flex-shrink:0;
}
.topnav .brand-logo{filter:brightness(0) invert(1);}
.brand-panel .brand-logo{height:34px;max-width:190px;filter:brightness(0) invert(1);}

/* Le nom à côté du logo ferait doublon quand le logo est un logotype
   (texte inclus dans l'image). On le réserve donc aux lecteurs d'écran
   et on ne garde visible que la mention « Espace client ». */
.brand-mark:has(.brand-logo) .brand-txt{
  font-size:0;
}
.brand-mark:has(.brand-logo) .brand-txt small{
  font-size:9.5px;
}