/* ============================================================================
   portal-da.css — Couche de DIRECTION ARTISTIQUE (re-skin) du portail client.
   Chargée APRÈS portal.css → surcharge via la cascade, sans modifier une seule
   règle existante ni la logique. Retrait = supprimer le <link> dans portal.html.
   Cible : layout sidebar + contenu, palette indigo/émeraude, cartes douces,
   hero sombre, stepper, offres — d'après le mockup fourni.
   ============================================================================ */

/* ---- 1. Palette (surcharge des variables → re-skin global instantané) ---- */
:root {
  --bg: #f1f2ec;          /* fond warm gris-vert clair */
  --panel: #ffffff;
  --ink: #15171c;
  --muted: #6b7280;
  --border: #e7e8e1;
  --dark: #0e1014;        /* hero sombre */
  --yellow: #34d399;      /* (réutilisé) accent décoratif → vert */
  --blue: #5b50e0;        /* accent principal indigo/violet */
  --green: #10b981;       /* succès émeraude */
  --red: #e0564f;
  --accent: #5b50e0;
  --accent-soft: #ecebfd;
  --ok: #10b981;
  --ok-soft: #e7f7ef;
  --ring: #2fcf8e;        /* anneau de progression */
  --radius: 18px;
  --radius-sm: 12px;
  --shadow: 0 18px 40px rgba(17, 22, 34, .07);
}

body { background: var(--bg); color: var(--ink); }

/* ---- 2. Layout : sidebar fixe à gauche + contenu à droite ---- */
.dash.client-dashboard-v3 {
  max-width: none;
  margin: 0;
  padding: 26px 34px 60px calc(264px + 34px);
  min-height: 100vh;
}
/* ---- Bouton hamburger + fond assombri : masqués sur desktop ---- */
.client-burger { display: none; }
.client-menu-backdrop { display: none; }

/* ---- MOBILE : VRAI menu hamburger → tiroir (drawer) qui glisse depuis la gauche,
   avec fond assombri. Fiable et propre — pas de barre qui défile. ---- */
@media (max-width: 900px) {
  .dash.client-dashboard-v3 { padding: 14px 14px 48px !important; }

  /* Le bouton hamburger (taille contrainte au contenu, pas pleine largeur) */
  .client-burger {
    display: inline-flex !important; align-items: center; gap: 9px;
    width: fit-content !important; align-self: flex-start !important; flex: 0 0 auto !important;
    background: #ffffff; color: var(--ink);
    border: 1px solid var(--border); border-radius: 12px;
    padding: 10px 15px; font: 700 14px system-ui; cursor: pointer;
    box-shadow: 0 6px 18px rgba(17, 22, 34, .08);
    margin: 0 0 14px;
  }
  .client-burger svg { display: block; }
  .client-burger:active { transform: scale(.98); }

  /* La sidebar devient un tiroir hors-écran à gauche (items en colonne, style normal) */
  .client-page-tabs.client-menu-v3 {
    position: fixed !important;
    top: 0 !important; left: 0 !important; bottom: 0 !important; right: auto !important;
    width: 286px !important; max-width: 85vw !important; height: auto !important;
    flex-direction: column !important; flex-wrap: nowrap !important; gap: 4px;
    margin: 0 !important; padding: 18px 14px !important;
    border-right: 1px solid var(--border) !important; border-bottom: none !important;
    overflow-y: auto; overflow-x: hidden;
    background: #fbfbf8;
    transform: translateX(-104%) !important;
    transition: transform .26s cubic-bezier(.4, 0, .2, 1);
    box-shadow: 0 24px 60px rgba(10, 12, 18, .3);
    /* !important indispensable : la règle de base (.client-menu-v3{z-index:30})
       est plus bas dans le fichier et, à spécificité égale, l'emporterait sinon →
       le tiroir passait SOUS le fond assombri et les liens devenaient incliquables. */
    z-index: 1200 !important;
  }
  .dash.client-dashboard-v3.menu-ouvert .client-page-tabs.client-menu-v3 {
    transform: translateX(0) !important;
  }

  /* Fond assombri quand le menu est ouvert (cliquable pour fermer) — TOUJOURS
     sous le tiroir (z 1100 < 1200) pour ne pas voler les clics des liens. */
  .dash.client-dashboard-v3.menu-ouvert .client-menu-backdrop {
    display: block; position: fixed; inset: 0;
    background: rgba(10, 12, 18, .45); z-index: 1100 !important;
  }

  /* En-tête : plus de décalage (la sidebar est en tiroir) */
  .page:has(.client-dashboard-v3) .hero { padding-left: 14px !important; }

  .client-overview-grid { grid-template-columns: 1fr !important; }
  .client-service-grid { grid-template-columns: 1fr !important; }
  .service-banner-head { flex-direction: column; gap: 10px; }
  .client-current-repairs, .panel, .client-service-banner { padding: 18px 16px; }
  .client-footer { flex-direction: column; gap: 4px; }
  h1 { font-size: 25px; }
  .section-head { flex-wrap: wrap; gap: 8px; }
}

/* Sidebar */
.client-page-tabs.client-menu-v3 {
  position: fixed;
  left: 0; top: 0; bottom: 0;
  width: 264px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 22px 16px;
  background: #fbfbf8;
  border-right: 1px solid var(--border);
  overflow-y: auto;
  z-index: 30;
}
.client-page-tabs.client-menu-v3 a {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 0 8px;
  padding: 11px 13px;
  border-radius: 12px;
  text-decoration: none;
  color: #4b5160;
  border: none;
  background: transparent;
  position: relative;
  transition: background .14s ease, color .14s ease;
}
.client-page-tabs.client-menu-v3 a:hover { background: #f0f0ea; color: var(--ink); }
.client-page-tabs.client-menu-v3 a span {
  grid-column: 1; grid-row: 1;
  font-weight: 600; font-size: 14.5px; color: inherit;
}
.client-page-tabs.client-menu-v3 a small {
  grid-column: 1; grid-row: 2;
  font-size: 11.5px; color: #9aa0ab; font-weight: 500;
}
.client-page-tabs.client-menu-v3 a b {
  grid-column: 2; grid-row: 1 / span 2;
  min-width: 20px; height: 20px; padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent); color: #fff;
  border-radius: 999px; font-size: 11px; font-weight: 700;
}
.client-page-tabs.client-menu-v3 a.active {
  background: var(--accent-soft); color: #2a2580;
}
.client-page-tabs.client-menu-v3 a.active span { color: #2a2580; }
.client-page-tabs.client-menu-v3 a.active::before {
  content: ""; position: absolute; left: 0; top: 9px; bottom: 9px;
  width: 3px; border-radius: 0 3px 3px 0; background: var(--accent);
}
/* séparateur « ATELIER » avant l'item Magasin (7e lien) */
.client-page-tabs.client-menu-v3 a:nth-child(7) {
  margin-top: 16px; padding-top: 18px;
  border-top: 1px solid var(--border);
}

/* ---- 3. « Réparation en cours » : carte CLAIRE (même couleur que le reste) ---- */
.client-current-repairs {
  background: var(--panel);
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px 26px;
  margin: 0 0 22px;
  box-shadow: var(--shadow);
}
.client-current-repairs::before { content: none; }
.client-current-repairs .eyebrow { color: var(--accent); letter-spacing: .07em; }
.client-current-repairs h2 { color: var(--ink); }
.client-current-repairs p { color: var(--muted); }

/* ---- 4. Cartes (.panel) douces ---- */
.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px 22px;
}
.eyebrow {
  text-transform: uppercase; letter-spacing: .07em;
  font-size: 11px; font-weight: 700; color: var(--muted);
}
h1, h2, h3 { letter-spacing: -.01em; }
.section-head h2 { font-size: 19px; }

/* ---- 5. Boutons ---- */
.btn {
  border-radius: 11px; font-weight: 600; min-height: 42px;
  border: 1px solid var(--border); transition: filter .14s ease, background .14s ease;
}
.btn.primary {
  background: var(--accent); border-color: var(--accent); color: #fff;
}
.btn.primary:hover { filter: brightness(1.07); }
.btn.green { background: var(--green); border-color: var(--green); }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--border); }

/* ---- 6. Grille d'aperçu (main + colonne droite) ---- */
.client-overview-grid {
  display: grid; grid-template-columns: minmax(0,1fr) 360px; gap: 20px; align-items: start;
}
.client-overview-main, .client-overview-side { display: grid; gap: 18px; min-width: 0; }
@media (max-width: 1100px) { .client-overview-grid { grid-template-columns: 1fr; } }

/* ---- 7. Accès rapides (cartes) ---- */
.client-quick-access { display: grid; gap: 12px; }
.client-quick-card {
  display: block; padding: 16px 18px; border-radius: 14px;
  border: 1px solid var(--border); background: var(--panel); text-decoration: none; color: var(--ink);
  transition: border-color .14s ease, transform .14s ease;
}
.client-quick-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.client-quick-card strong { display: block; font-size: 14.5px; }
.client-quick-card span { font-size: 12.5px; color: var(--muted); }

/* ---- 8. Offres atelier ---- */
.client-service-banner {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 22px 24px; margin: 0 0 22px; box-shadow: var(--shadow);
}
.service-banner-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.service-price-chip {
  background: var(--ok-soft); color: #0a7f57; font-weight: 700; font-size: 13px;
  padding: 7px 14px; border-radius: 999px; white-space: nowrap;
}
.client-service-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; margin-top: 16px; }
@media (max-width: 800px) { .client-service-grid { grid-template-columns: 1fr; } }
.client-service-offer {
  border: 1px solid var(--border); border-radius: 16px; padding: 20px; background: #fcfcfb;
  display: flex; flex-direction: column; gap: 10px;
}
.service-badge {
  align-self: flex-start; background: var(--accent-soft); color: #3a32a8;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  padding: 5px 11px; border-radius: 999px;
}
.client-service-offer.office .service-badge,
.client-service-offer[class*="office"] .service-badge { background: var(--ok-soft); color: #0a7f57; }
.client-service-offer h3 { font-size: 17px; margin: 2px 0 0; }
.client-service-offer p { color: var(--muted); font-size: 13.5px; line-height: 1.5; }
.client-service-offer ul { list-style: none; padding: 0; margin: 4px 0; display: grid; gap: 7px; }
.client-service-offer ul li { position: relative; padding-left: 24px; font-size: 13.5px; color: #374151; }
.client-service-offer ul li::before {
  content: "\2713"; position: absolute; left: 0; top: 0;
  color: var(--green); font-weight: 800;
}
.service-offer-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 6px; }
.service-offer-foot strong { font-size: 22px; }

/* ---- 9. Stepper (étapes du dossier) ---- */
.steps { display: flex; gap: 0; }
.step {
  flex: 1; background: transparent; border: none; border-radius: 0; padding: 0;
  display: flex; flex-direction: column; align-items: center; text-align: center; position: relative;
}
.step span {
  width: 30px; height: 30px; border-radius: 50%;
  background: #e5e7df; color: #9aa0ab; border: none; font-weight: 800; z-index: 1;
}

/* ---- 10. Footer / divers ---- */
.client-footer {
  display: flex; justify-content: space-between; gap: 12px;
  color: var(--muted); font-size: 12.5px; margin-top: 28px; padding-top: 16px;
  border-top: 1px solid var(--border);
}
.live-chip, .badge {
  background: var(--ok-soft); color: #0a7f57; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; padding: 4px 11px;
}
.empty { color: var(--muted); }

/* ---- 11. Correctif : l'en-tête (.hero) ne doit plus passer SOUS la sidebar ----
   Scopé au tableau de bord connecté (présence de .client-dashboard-v3) via :has()
   → la page de connexion (sans sidebar) n'est pas décalée. */
.page:has(.client-dashboard-v3) .hero {
  padding-left: calc(264px + 34px);
  background: transparent;
}
.page:has(.client-dashboard-v3) .hero::before,
.page:has(.client-dashboard-v3) .hero::after { content: none; display: none; }
.page:has(.client-dashboard-v3) .hero-inner { max-width: none; margin: 0; padding-top: 6px; }
.page:has(.client-dashboard-v3) .hero h1 { color: var(--ink); font-size: clamp(24px, 3vw, 32px); }
.page:has(.client-dashboard-v3) .hero p { color: var(--muted); }
@media (max-width: 860px) {
  .page:has(.client-dashboard-v3) .hero { padding-left: 16px; }
}

/* ---- 12. Page de connexion : même DA (cartes douces, indigo) ---- */
.auth-grid { gap: 18px; }
.intro-panel, .auth-grid .panel {
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}
.tabs { background: #efefe8; border-radius: 12px; }
.tabs button.active { background: #fff; color: var(--accent); box-shadow: 0 1px 3px rgba(17,22,34,.08); }
.field input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(91,80,224,.14); }
.link-button { color: var(--accent); }
.intro-panel h2 { color: var(--ink); }

/* ---- Offre de rachat (panneau espace client) ---- */
.client-buyback-panel { border-left: 4px solid var(--accent); background: linear-gradient(135deg, #f5f4ff, #ffffff); }
.client-buyback-panel.accepted { border-left-color: var(--green); background: linear-gradient(135deg, #f0fbf5, #ffffff); }
.client-buyback-panel h2 { font-size: 20px; margin: 4px 0 6px; }
.client-buyback-panel .buyback-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.client-buyback-panel .buyback-consent { display: flex; gap: 9px; align-items: flex-start; margin-top: 14px; padding: 11px 13px; border: 1px solid #e3e1f7; border-radius: 10px; background: #faf9ff; font-size: 12.5px; line-height: 1.45; color: #4a4a55; cursor: pointer; }
.client-buyback-panel .buyback-consent input { margin-top: 2px; flex: 0 0 auto; width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }
.signature-log { margin-top: 10px; padding: 10px 12px; border: 1px solid #d3cffa; border-radius: 10px; background: #faf9ff; }
.signature-log-title { font-size: 11px; font-weight: 800; color: var(--accent); text-transform: uppercase; letter-spacing: .03em; margin-bottom: 6px; }
.signature-log-row { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; padding: 2px 0; }
.signature-log-row span { color: #6b6b72; }
.signature-log-row strong { color: #1c1c22; font-weight: 600; text-align: right; word-break: break-word; }
.signature-log-note { font-size: 11px; color: #6b6b72; margin: 8px 0 0; line-height: 1.45; }

/* ===================== RMA / retours (portail client) ===================== */
.rma-ship-global { background: var(--accent-soft, #eef0ff); border: 1px solid var(--border, #e3e6ee); border-radius: 12px; padding: 12px 14px; margin: 10px 0 16px; }
.rma-ship-global address { font-style: normal; font-weight: 600; margin: 4px 0; line-height: 1.5; }
.rma-card { border: 1px solid var(--border, #e3e6ee); border-radius: 14px; padding: 14px 16px; margin-bottom: 14px; background: #fff; }
.rma-card.focus { box-shadow: 0 0 0 2px var(--accent, #5b50e0); }
.rma-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.rma-card-head strong { font-size: 16px; }
.rma-status { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 20px; background: #eef0f4; color: #444; white-space: nowrap; }
.rma-status-waiting_shipment, .rma-status-pending { background: #fff3d6; color: #8a6100; }
.rma-status-in_transit { background: #e0ecff; color: #1d4ed8; }
.rma-status-received, .rma-status-in_workshop { background: #e7e2ff; color: #5b50e0; }
.rma-status-waiting_return, .rma-status-returned { background: #dff5e6; color: #1a7f43; }
.rma-status-closed { background: #eef0f4; color: #555; }
.rma-status-cancelled { background: #fde8e8; color: #b42318; }
.rma-issue { color: var(--muted, #6b7280); font-size: 13.5px; margin: 8px 0; white-space: pre-wrap; }
.rma-track { font-size: 13px; margin: 6px 0; }
.rma-track code { background: #f3f4f8; padding: 1px 6px; border-radius: 6px; }
.rma-track-h { font-weight: 700; }
.rma-track-form { display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; align-items: end; margin: 12px 0 6px; background: #f8f9fc; border: 1px solid var(--border, #e3e6ee); border-radius: 12px; padding: 12px; }
.rma-track-form .field { display: flex; flex-direction: column; gap: 4px; }
.rma-track-form .field label { font-size: 12px; font-weight: 600; color: var(--muted, #6b7280); }
.rma-track-form input { border: 1px solid var(--border, #e3e6ee); border-radius: 9px; padding: 8px 10px; font: inherit; }
.rma-track-form button { white-space: nowrap; }
.rma-track-msg { grid-column: 1 / -1; }
@media (max-width: 720px) { .rma-track-form { grid-template-columns: 1fr; } }

/* Archive Indy (documents antérieurs) — espace client */
.archive-group { margin: 14px 0; }
.archive-group h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted, #6b7280); margin: 0 0 8px; }
.archive-row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 12px; padding: 9px 12px; border: 1px solid var(--border, #e3e6ee); border-radius: 10px; margin-bottom: 7px; background: #fff; }
.archive-main { display: flex; flex-direction: column; min-width: 0; }
.archive-main strong { font-size: 14px; }
.archive-main span { font-size: 12px; color: var(--muted, #6b7280); }
.archive-amount { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 560px) { .archive-row { grid-template-columns: 1fr auto; } .archive-amount { grid-column: 1; } }

/* ===== Mise en avant services (serveurs / hébergement / sites web) ===== */
.client-services-promo { margin: 16px 0; border-radius: 18px; padding: 18px 20px; color: #fff; background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 52%, #2563eb 100%); box-shadow: 0 12px 32px rgba(79,70,229,.28); }
.csp-badge { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; background: rgba(255,255,255,.2); padding: 3px 11px; border-radius: 999px; }
.csp-head h2 { margin: 9px 0 4px; font-size: 21px; color: #fff; line-height: 1.2; }
.csp-head p { margin: 0; color: rgba(255,255,255,.92); font-size: 14px; line-height: 1.5; }
.csp-head p b { color: #fff; font-weight: 700; }
.csp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 15px 0; }
@media (max-width: 720px) { .csp-grid { grid-template-columns: repeat(2, 1fr); } }
.csp-card { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; padding: 12px; border: 1px solid rgba(255,255,255,.28); border-radius: 13px; background: rgba(255,255,255,.1); color: #fff; cursor: pointer; transition: transform .12s ease, background .12s ease, border-color .12s ease; }
.csp-card:hover { transform: translateY(-2px); background: rgba(255,255,255,.2); }
.csp-card.active { background: #fff; color: #4338ca; border-color: #fff; box-shadow: 0 6px 18px rgba(0,0,0,.15); }
.csp-card.active small { color: #6366f1; }
.csp-ico { font-size: 24px; line-height: 1; }
.csp-card strong { font-size: 14px; }
.csp-card small { font-size: 11.5px; opacity: .92; line-height: 1.35; }
.csp-selected { font-size: 13px; margin-bottom: 9px; color: rgba(255,255,255,.95); }
.csp-form-row { display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap; }
.csp-form textarea { flex: 1; min-width: 220px; border: none; border-radius: 11px; padding: 11px 13px; font-size: 14px; resize: vertical; font-family: inherit; color: #1f2330; }
.csp-form .btn.primary { background: #fff; color: #4338ca; border: none; font-weight: 700; white-space: nowrap; align-self: stretch; }
.csp-form .btn.primary:hover { background: #eef0ff; }
.csp-hint { margin: 9px 0 0; font-size: 12px; color: rgba(255,255,255,.82); }
.csp-done { background: rgba(255,255,255,.16); border-radius: 13px; padding: 15px 17px; display: flex; flex-direction: column; gap: 3px; }
.csp-done strong { font-size: 16px; }
.csp-done span { color: rgba(255,255,255,.9); font-size: 13px; }
#serviceRequestMsg .support-confirm.error { background: rgba(255,255,255,.96); color: #c0392b; border-radius: 9px; padding: 8px 11px; margin-top: 8px; font-size: 13px; }

/* ===== L'Empreinte (passeport appareil, espace client) ===== */
.emp-intro { margin: 0 0 14px; }
.emp-cards { display: flex; flex-direction: column; gap: 14px; }
.emp-card { border: 1px solid var(--border, #e3e6ee); border-radius: 16px; padding: 16px; background: #fff; }
.emp-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.emp-code { font-family: ui-monospace, monospace; font-size: 12px; color: var(--muted, #6b7280); }
.emp-card-head h3 { margin: 3px 0 2px; font-size: 18px; }
.emp-meta { font-size: 12.5px; color: var(--muted, #6b7280); }
.emp-sealbadge { background: rgba(16,185,129,.14); color: #0a8f43; font-weight: 700; font-size: 12.5px; padding: 5px 11px; border-radius: 999px; white-space: nowrap; }
.emp-repairs { list-style: none; margin: 12px 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.emp-repairs li { display: flex; gap: 10px; align-items: center; padding: 7px 11px; background: #f7f8fc; border-radius: 9px; font-size: 13px; }
.emp-r-num { font-weight: 700; }
.emp-r-status { margin-left: auto; font-size: 11.5px; color: var(--muted, #6b7280); }
.emp-verify { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0 12px; font-size: 13px; }
.emp-verify .btn.ghost { border-color: var(--border, #e3e6ee); color: #4338ca; }
.emp-verify .btn.ghost:hover { border-color: var(--accent, #5b50e0); background: #f6f5ff; }
.emp-premium { border-radius: 13px; padding: 14px; }
.emp-premium.locked { background: linear-gradient(135deg, #4f46e5, #7c3aed); color: #fff; }
.emp-premium.requested { background: rgba(16,185,129,.1); border: 1px solid rgba(16,185,129,.3); color: #0a6b3a; }
.emp-premium.requested p { margin: 4px 0 0; font-size: 13px; }
.emp-premium-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.emp-price { background: rgba(255,255,255,.22); padding: 3px 11px; border-radius: 999px; font-weight: 800; }
.emp-premium.locked p { color: rgba(255,255,255,.92); font-size: 13.5px; margin: 0 0 10px; }
.emp-premium.locked .btn.primary { background: #fff; color: #4338ca; border: none; font-weight: 700; }
.emp-premium.locked small { display: block; margin-top: 8px; color: rgba(255,255,255,.8); }
.emp-premium.unlocked { background: #faf9ff; border: 1px solid #e6e2ff; }
.emp-badge-on { background: rgba(16,185,129,.16); color: #0a8f43; font-weight: 700; font-size: 12px; padding: 3px 10px; border-radius: 999px; }
.emp-prem-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 10px 0; }
.emp-stat { background: #fff; border: 1px solid var(--border, #e3e6ee); border-radius: 11px; padding: 11px; text-align: center; }
.emp-stat b { display: block; font-size: 17px; }
.emp-stat span { font-size: 11px; color: var(--muted, #6b7280); }
.emp-tips ul { margin: 5px 0 0; padding-left: 18px; font-size: 13px; line-height: 1.5; }
@media (max-width: 560px) { .emp-prem-grid { grid-template-columns: 1fr; } }
.emp-details { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 18px; margin: 12px 0; }
.emp-d { display: flex; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--border, #e3e6ee); padding: 6px 0; font-size: 13px; }
.emp-d span { color: var(--muted, #6b7280); }
.emp-d b { text-align: right; word-break: break-word; }
.emp-rep-label { font-size: 12px; color: var(--muted, #6b7280); text-transform: uppercase; letter-spacing: .04em; margin: 8px 0 4px; }
@media (max-width: 560px) { .emp-details { grid-template-columns: 1fr; } }
/* Contenu IA du passeport */
.emp-condition { margin: 8px 0; }
.emp-condition p { margin: 3px 0 0; font-size: 13.5px; line-height: 1.5; }
.emp-advice-h { display: block; font-weight: 600; font-size: 13px; margin-bottom: 4px; }
.emp-advice { margin: 10px 0; }
.emp-advice ul { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.5; }
.emp-ai-premium { margin-top: 12px; padding-top: 10px; border-top: 1px dashed #d9d4f5; }
.emp-ai-premium > p { font-size: 13.5px; line-height: 1.5; margin: 6px 0; }
.emp-ai-sub { margin: 8px 0; }
.emp-ai-sub ul { margin: 3px 0 0; padding-left: 18px; font-size: 13px; line-height: 1.5; }

/* ===== L'Empreinte — hero + fiche enrichie (client) ===== */
.emp-hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: 18px; background: linear-gradient(135deg, #0f1226, #23284e); color: #e8eaf6; border-radius: 16px; padding: 20px 22px; margin: 4px 0 18px; }
.emp-hero-main h3 { margin: 0 0 8px; font-size: 20px; }
.emp-hero-main p { margin: 0; font-size: 13.5px; line-height: 1.6; color: #c3c7ee; }
.emp-hero-main strong { color: #fff; }
.emp-hero-uses { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.emp-use { display: flex; gap: 9px; align-items: flex-start; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.09); border-radius: 11px; padding: 10px; }
.emp-use-ico { font-size: 18px; line-height: 1.2; }
.emp-use b { display: block; font-size: 13px; }
.emp-use small { color: #aab0e0; font-size: 11.5px; line-height: 1.4; }
@media (max-width: 720px) { .emp-hero { grid-template-columns: 1fr; } }
@media (max-width: 460px) { .emp-hero-uses { grid-template-columns: 1fr; } }
.emp-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin: 12px 0; }
.emp-photo { width: 100%; height: 96px; object-fit: cover; border-radius: 10px; border: 1px solid var(--border, #e3e6ee); cursor: zoom-in; transition: transform .12s; }
.emp-photo:hover { transform: scale(1.03); }
.emp-lightbox { position: fixed; inset: 0; background: rgba(8,10,24,.86); display: none; align-items: center; justify-content: center; z-index: 9999; padding: 24px; cursor: zoom-out; }
.emp-lightbox.show { display: flex; }
.emp-lightbox img { max-width: 94vw; max-height: 92vh; border-radius: 12px; box-shadow: 0 24px 70px rgba(0,0,0,.5); }
.emp-block { margin: 12px 0; }
.emp-block-h { display: block; font-weight: 700; font-size: 13px; margin-bottom: 6px; }
.emp-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 18px; margin: 12px 0; }
@media (max-width: 560px) { .emp-fields { grid-template-columns: 1fr; } }
.emp-comp-list { display: flex; flex-direction: column; gap: 5px; }
.emp-comp { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 8px 11px; background: #f7f8fc; border-radius: 9px; font-size: 13px; }
.emp-comp-name code { background: #ececff; color: #4338ca; padding: 1px 6px; border-radius: 5px; font-size: 11.5px; }
.emp-comp-status { font-size: 11.5px; color: var(--muted, #6b7280); white-space: nowrap; }
.emp-sections { display: flex; flex-direction: column; gap: 6px; }
.emp-section { border: 1px solid var(--border, #e3e6ee); border-radius: 10px; overflow: hidden; }
.emp-section > summary { cursor: pointer; padding: 9px 12px; font-weight: 600; font-size: 13.5px; background: #f7f8fc; list-style: none; }
.emp-section > summary::-webkit-details-marker { display: none; }
.emp-section > summary::before { content: '▸ '; color: var(--muted, #6b7280); }
.emp-section[open] > summary::before { content: '▾ '; }
.emp-section-body { padding: 11px 13px; font-size: 13px; line-height: 1.6; }
.emp-timeline { list-style: none; margin: 0; padding: 0; }
.emp-timeline li { display: flex; gap: 12px; padding: 0 0 12px; position: relative; padding-left: 16px; border-left: 2px solid #e6e2ff; margin-left: 4px; }
.emp-timeline li::before { content: ''; position: absolute; left: -6px; top: 3px; width: 10px; height: 10px; border-radius: 50%; background: #7c3aed; }
.emp-tl-date { font-size: 11.5px; color: var(--muted, #6b7280); min-width: 64px; font-weight: 600; }
.emp-tl-body b { font-size: 13.5px; }
.emp-tl-body p { margin: 2px 0 0; font-size: 12.5px; color: #555a72; line-height: 1.5; }
.emp-why { font-size: 12px; color: #555a72; background: #f6f5ff; border: 1px solid #e6e2ff; border-radius: 10px; padding: 9px 12px; margin: 10px 0; line-height: 1.5; }
.emp-why code { font-size: 11px; word-break: break-all; }
.emp-price small { font-weight: 600; font-size: 11px; opacity: .85; }
.emp-premium-tag { color: rgba(255,255,255,.95) !important; font-size: 13.5px !important; margin: 2px 0 10px !important; }
.emp-prem-benefits { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.emp-prem-benefits li { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.45; }
.emp-prem-benefits li > span { font-size: 16px; line-height: 1.2; flex-shrink: 0; }
.emp-prem-benefits b { color: #fff; }
.emp-resale-hi { display: flex; justify-content: space-between; align-items: center; gap: 12px; background: linear-gradient(135deg, #ecfdf3, #eef2ff); border: 1px solid #c7eed6; border-radius: 11px; padding: 11px 14px; margin: 4px 0 10px; flex-wrap: wrap; }
.emp-resale-hi span.muted { font-size: 11.5px; }
.emp-resale-hi b { display: block; font-size: 20px; color: #0a8f43; }
.emp-resale-bonus { background: rgba(16,185,129,.16); color: #0a8f43; font-weight: 700; font-size: 12px; padding: 4px 10px; border-radius: 999px; }
.emp-pitch { margin: 10px 0; }
.emp-pitch-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; }
.emp-pitch-txt { width: 100%; border: 1px solid var(--border, #e3e6ee); border-radius: 9px; padding: 9px 11px; font-size: 12.5px; font-family: inherit; line-height: 1.5; background: #fff; color: inherit; resize: vertical; }
.emp-resale-note { font-size: 11.5px; color: var(--muted, #6b7280); margin: 6px 0 0; font-style: italic; }

/* ===== Cloud / transfert (espace client) ===== */
.cloud-transfer-card { border: 1px solid var(--border, #e3e6ee); border-radius: 14px; padding: 14px 16px; margin-bottom: 12px; background: #fff; }
.cloud-tc-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.cloud-files { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.cloud-file { display: flex; align-items: center; gap: 10px; padding: 8px 11px; border: 1px solid var(--border, #e3e6ee); border-radius: 9px; background: #f7f8fc; font-size: 13px; }
.cloud-file a { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: none; color: #4338ca; }
/* ---- Cloud privé payant (client) ---- */
.cloud-private-banner { display: flex; gap: 14px; align-items: flex-start; background: linear-gradient(135deg, #eef2ff, #f5f3ff); border: 1px solid #dfe3f5; border-radius: 14px; padding: 14px 16px; margin: 4px 0 16px; }
.cloud-private-banner .cpb-ico { font-size: 26px; line-height: 1; }
.cloud-private-banner strong { display: block; margin-bottom: 4px; }
.cloud-private-banner p { margin: 0; font-size: 13px; color: #555a72; }
.cloud-quota-card { border: 1px solid var(--border, #e3e6ee); border-radius: 14px; padding: 16px; margin-bottom: 14px; background: #fff; }
.cloud-quota-card.active { border-color: #b7e2c4; background: #f3fbf5; }
.cloud-quota-card.requested { border-color: #f3dca6; background: #fffaf0; }
.cqc-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.cloud-usage { margin: 10px 0; }
.cloud-usage-bar { height: 10px; border-radius: 6px; background: #e7eaf3; overflow: hidden; }
.cloud-usage-bar > div { height: 100%; background: #4338ca; border-radius: 6px; transition: width .3s; }
.cloud-usage-lbl { font-size: 12.5px; margin-top: 5px; color: #555a72; }
.cloud-slider-wrap { display: flex; flex-direction: column; gap: 9px; margin-top: 8px; }
.cloud-slider-wrap input[type=range] { width: 100%; accent-color: #4338ca; }
.cloud-slider-vals { font-size: 15px; }
.cloud-slider-vals strong { color: #4338ca; }
.cloud-upgrade { margin-top: 10px; }
.cloud-upgrade summary { cursor: pointer; font-size: 13px; color: #4338ca; }
.cloud-my { margin: 6px 0 4px; }
.cloud-drop { border: 2px dashed #c7ccde; border-radius: 12px; padding: 18px; text-align: center; color: #555a72; font-size: 14px; background: #fafbff; transition: .15s; }
.cloud-drop.over { border-color: #4338ca; background: #eef0fe; }
.cloud-my-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 14px 0 8px; }
.cloud-file-del { border: none; background: transparent; color: #b53b3b; cursor: pointer; font-size: 14px; padding: 2px 6px; border-radius: 6px; }
.cloud-file-del:hover { background: #fbeaea; }
/* Explorateur paginé des transferts reçus. */
.cloud-browser { min-height:100px; border:1px solid var(--border, #e3e6ee); border-radius:var(--radius-md, 12px); overflow:hidden; background:var(--panel, #fff); }
.cloud-browser-loading { padding:28px 16px; color:var(--muted); text-align:center; }
.cloud-browser-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 12px; border-bottom:1px solid var(--border, #e3e6ee); background:rgba(99,102,241,.035); }
.cloud-browser-breadcrumbs { display:flex; align-items:center; flex-wrap:wrap; gap:4px; min-width:0; }
.cloud-browser-crumb { appearance:none; border:0; background:transparent; color:var(--accent, #4338ca); padding:3px 4px; border-radius:6px; font:inherit; font-size:12px; cursor:pointer; max-width:210px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cloud-browser-crumb:not(.current):hover { background:rgba(99,102,241,.10); }
.cloud-browser-crumb.current { color:var(--ink); font-weight:700; cursor:default; }
.cloud-browser-sep { color:var(--muted); }
.cloud-browser-totals { color:var(--muted); font-size:12px; white-space:nowrap; }
.cloud-browser-list { display:flex; flex-direction:column; }
.cloud-browser-row { display:grid; grid-template-columns:28px minmax(0,1fr) auto 34px; align-items:center; gap:9px; min-height:50px; padding:7px 9px 7px 12px; border-bottom:1px solid var(--border, #e3e6ee); }
.cloud-browser-row:last-child { border-bottom:0; }
.cloud-browser-row.folder { cursor:pointer; }
.cloud-browser-row:hover { background:#f4f5ff; }
.cloud-browser-row.locked { opacity:.82; }
.cloud-browser-icon { font-size:18px; line-height:1; }
.cloud-browser-name { min-width:0; color:inherit; text-decoration:none; overflow:hidden; }
.cloud-browser-name strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; }
.cloud-browser-name small { display:block; margin-top:2px; color:var(--muted); font-size:11px; }
.cloud-browser-size { color:var(--muted); font-size:12px; white-space:nowrap; }
.cloud-browser-chevron { color:var(--muted); font-size:20px; text-align:center; }
.cloud-browser-pagination { display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap; padding:10px 12px; border-top:1px solid var(--border, #e3e6ee); }
.cloud-browser-pagination span { color:var(--muted); font-size:12px; }
.cloud-browser-pagination button:disabled { opacity:.45; pointer-events:none; }
@media (max-width:640px) {
  .cloud-browser-toolbar { align-items:flex-start; flex-direction:column; }
  .cloud-browser-totals { white-space:normal; }
  .cloud-browser-row { grid-template-columns:24px minmax(0,1fr) 30px; }
  .cloud-browser-size { display:none; }
}
/* Arborescence (dossiers) */
.cloud-tree .cloud-tree-dir { margin: 2px 0; }
.cloud-tree-dir > summary { cursor: pointer; display: flex; justify-content: space-between; gap: 10px; padding: 5px 8px; border-radius: 8px; font-size: 13px; list-style: none; }
.cloud-tree-dir > summary::-webkit-details-marker { display: none; }
.cloud-tree-dir > summary:hover { background: #eef0fe; }
.cloud-tree-dir > summary .cloud-tree-name { font-weight: 600; }
.cloud-tree-children { margin-left: 14px; padding-left: 8px; border-left: 1px solid #e3e6ee; }
/* Hébergement web (client) */
.web-cta { background: linear-gradient(135deg, #eef2ff, #f5f3ff); border: 1px solid #dfe3f5; border-radius: 16px; padding: 22px; text-align: center; }
.web-cta h3 { margin: 8px 0 6px; }
.web-cta p { max-width: 620px; margin: 0 auto 14px; color: #555a72; font-size: 13.5px; }
.web-site-card { border: 1px solid var(--border, #e3e6ee); border-radius: 14px; padding: 16px; margin-bottom: 14px; background: #fff; }
.web-site-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.web-pill { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; background: #eef0fe; color: #4338ca; }
.web-pill.web-live { background: #e7f7ec; color: #1a7f3c; }
.web-pill.web-error { background: #fbeaea; color: #b53b3b; }
.web-dns { background: #fafbff; border: 1px solid #eceefb; border-radius: 10px; padding: 11px 13px; font-size: 13px; margin-bottom: 12px; }
.web-dns.ok { background: #f3fbf5; border-color: #b7e2c4; }
.web-dns-rec { margin: 6px 0; padding: 7px 10px; background: #fff; border: 1px dashed #c7ccde; border-radius: 8px; font-family: ui-monospace, monospace; font-size: 12.5px; }
.web-upload { margin: 10px 0; }
.web-newsite { border-top: 1px dashed #e3e6ee; padding-top: 14px; margin-top: 6px; }
.web-newrow { display: flex; gap: 8px; flex-wrap: wrap; }
.web-newrow input { flex: 1; min-width: 200px; padding: 9px 11px; border: 1px solid var(--border, #e3e6ee); border-radius: 9px; font-size: 14px; }
/* Overlay de transfert global (façon Windows/cloud) */
.cloud-ov { position: fixed; right: 18px; bottom: 18px; width: 360px; max-width: calc(100vw - 24px); background: #fff; border: 1px solid #dfe3f5; border-radius: 14px; box-shadow: 0 14px 40px rgba(30,27,75,.22); padding: 14px 16px; z-index: 9999; transform: translateY(140%); opacity: 0; transition: transform .25s, opacity .25s; }
.cloud-ov.show { transform: translateY(0); opacity: 1; }
.cloud-ov.done { border-color: #b7e2c4; }
.cloud-ov.err { border-color: #e0a0a0; }
.cloud-ov-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.cloud-ov-title { flex: 1; font-size: 14px; }
.cloud-ov-count { font-size: 12px; color: #6b7280; }
.cloud-ov-x { border: none; background: transparent; font-size: 18px; line-height: 1; cursor: pointer; color: #6b7280; }
.cloud-ov-bar { height: 9px; border-radius: 6px; background: #e7eaf3; overflow: hidden; }
.cloud-ov-bar > div { height: 100%; width: 0; background: #4338ca; border-radius: 6px; transition: width .2s; }
.cloud-ov.done .cloud-ov-bar > div { background: #2faa55; }
.cloud-ov.err .cloud-ov-bar > div { background: #e0533d; }
.cloud-ov-stats { font-size: 12px; color: #555a72; margin-top: 6px; }
.cloud-ov-file { font-size: 12.5px; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cloud-ov-fname { color: #4338ca; }
/* Menu clic droit */
.cloud-ctx { position: fixed; z-index: 10000; background: #fff; border: 1px solid #dfe3f5; border-radius: 10px; box-shadow: 0 10px 30px rgba(30,27,75,.2); padding: 5px; min-width: 180px; }
.cloud-ctx-item { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; border: none; background: transparent; padding: 9px 11px; border-radius: 7px; font-size: 13.5px; cursor: pointer; color: inherit; }
.cloud-ctx-item:hover { background: #eef0fe; }
.cloud-ctx-item.danger { color: #b53b3b; }
.cloud-ctx-item.danger:hover { background: #fbeaea; }
.cloud-file { position: relative; }
.web-type { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 4px 0 12px; font-size: 13px; }
.web-type select { padding: 7px 9px; border: 1px solid var(--border, #e3e6ee); border-radius: 8px; font-size: 13px; background: #fff; }
.web-soon { font-size: 12px; color: #9a6b00; background: #fff7e6; border: 1px solid #f3dca6; border-radius: 999px; padding: 2px 9px; }
.web-pill.web-running { background: #e7f7ec; color: #1a7f3c; }
.web-pill.web-stopped { background: #eef0f4; color: #6b7280; }
.web-runtime { background: #0e1016; border: 1px solid #232838; border-radius: 12px; padding: 12px 14px; margin: 10px 0; }
.web-rt-head { display: flex; align-items: center; gap: 10px; color: #e6edf3; margin-bottom: 8px; }
.web-rt-cfg { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 6px; }
.web-rt-cfg input, .web-rt-cfg select { padding: 5px 8px; border-radius: 7px; border: 1px solid #2a3142; background: #11131a; color: #e6edf3; font-size: 12.5px; }
.web-rt-cfg input { width: 100%; }
.web-runtime .muted { color: #8b93a7; }
.web-rt-log { background: #07090d; color: #cfe3d0; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11.5px; line-height: 1.45; border-radius: 9px; padding: 11px; max-height: 260px; overflow-y: auto; white-space: pre-wrap; word-break: break-word; margin: 8px 0 0; }
.web-db-panel { background: #fafbff; border: 1px solid #eceefb; border-radius: 12px; padding: 14px 16px; }
.web-db-row { border: 1px solid var(--border, #e3e6ee); border-radius: 10px; padding: 10px 12px; margin: 8px 0; background: #fff; }
.web-db-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px 14px; margin-bottom: 8px; }
.web-db-grid > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.web-db-grid .muted { font-size: 11px; }
.web-db-grid code { background: #11131a; color: #cfe3d0; padding: 4px 7px; border-radius: 6px; font-size: 12px; user-select: all; overflow: hidden; text-overflow: ellipsis; }
.web-db-pass { letter-spacing: 0.5px; }
.ws-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin: 8px 0; }
.ws-kpi { background: #fafbff; border: 1px solid #eceefb; border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; }
.ws-kpi .muted { font-size: 11px; } .ws-kpi b { font-size: 20px; font-variant-numeric: tabular-nums; color: #1f2430; }
.ws-chart { display: flex; align-items: flex-end; gap: 8px; height: 130px; padding: 8px 4px 0; }
.ws-bar { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 3px; }
.ws-bar span { width: 70%; min-height: 2px; background: linear-gradient(180deg, #6366f1, #818cf8); border-radius: 5px 5px 0 0; transition: height .4s ease; }
.ws-bar small { font-size: 10px; color: #6b7280; } .ws-bar em { font-size: 10px; color: #4338ca; font-style: normal; font-weight: 600; }
.wf-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: #eef0fe; border-radius: 9px; padding: 7px 11px; margin: 8px 0; }
.wf-actions #wfSelCount { font-size: 12.5px; margin-right: auto; }
.gf-item .wf-chk { flex: 0 0 auto; margin: 0 4px 0 0; width: 16px; height: 16px; }
/* Panel de jeux */
.game-card { border: 1px solid var(--border, #e3e6ee); border-radius: 14px; padding: 16px; margin-bottom: 14px; background: #fff; }
.game-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.game-badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; background: #eef0fe; color: #4338ca; }
.game-badge.game-running { background: #e7f7ec; color: #1a7f3c; }
.game-badge.game-error { background: #fbeaea; color: #b53b3b; }
.game-badge.game-suspended { background: #f1f1f4; color: #6b7280; }
.game-connect code { background: #f3fbf5; border: 1px solid #b7e2c4; border-radius: 6px; padding: 2px 7px; font-size: 12.5px; }
.game-console { background: #11131a; color: #cfe3d0; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; line-height: 1.45; border-radius: 10px; padding: 12px; height: 240px; overflow-y: auto; white-space: pre-wrap; word-break: break-word; margin: 10px 0; }
.game-cmd { display: flex; gap: 8px; }
.game-cmd input { flex: 1; padding: 9px 11px; border: 1px solid var(--border, #e3e6ee); border-radius: 9px; font-family: ui-monospace, monospace; font-size: 13px; }
.game-stats { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; background: #f7f8fc; border: 1px solid var(--border, #e3e6ee); border-radius: 10px; padding: 10px 14px; margin: 8px 0; }
.game-stat { display: flex; flex-direction: column; }
.game-stat span { font-size: 11px; } .game-stat b { font-size: 15px; }
.game-spark { width: 130px; height: 34px; margin-left: auto; background: #11131a; border-radius: 6px; }
/* Graphes de performance live (CPU / RAM séparés) */
.game-graphs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 10px 0; }
.game-graph { background: #0e1016; border: 1px solid #232838; border-radius: 12px; padding: 10px 12px; }
.game-graph-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 6px; }
.game-graph-head .muted { font-size: 11.5px; color: #8b93a7; } .game-graph-head b { font-size: 16px; color: #e6edf3; font-variant-numeric: tabular-nums; }
.game-graph-svg { display: block; width: 100%; height: 92px; }
.gg-line { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.gg-cpu { stroke: #4ade80; } .gg-mem { stroke: #60a5fa; }
.gg-area { stroke: none; }
.gg-area-cpu { fill: rgba(74, 222, 128, 0.16); } .gg-area-mem { fill: rgba(96, 165, 250, 0.16); }
.game-graph-foot { display: flex; justify-content: space-between; margin-top: 4px; font-size: 10.5px; }
.game-graph-foot .muted { color: #6b7280; } .game-graph-foot b { color: #cbd5e1; }
.game-substat { font-size: 12.5px; margin: 2px 0 8px; }
.game-substat b { font-variant-numeric: tabular-nums; }
.btn.danger, .btn.small.danger { background: #dc2626; border-color: #dc2626; color: #fff; }
.btn.danger:hover:not(:disabled), .btn.small.danger:hover:not(:disabled) { background: #b91c1c; }
@media (max-width: 560px) { .game-graphs { grid-template-columns: 1fr; } }
.game-settings-modal { max-width: 640px; }
.game-set-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; margin-top: 10px; }
.game-set-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; }
.game-set-row span { color: var(--muted, #6b7280); }
.game-set-row input[type=text], .game-set-row input[type=number], .game-set-row select { flex: 0 0 52%; padding: 6px 8px; border: 1px solid var(--border, #e3e6ee); border-radius: 7px; font-size: 13px; }
@media (max-width: 560px) { .game-set-grid { grid-template-columns: 1fr; } }
.game-offer-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin: 8px 0; }
.game-offer { border: 1px solid var(--border, #e3e6ee); border-radius: 12px; padding: 14px; background: #fff; display: flex; flex-direction: column; gap: 4px; }
.game-offer-price { margin: 6px 0; } .game-offer-price b { font-size: 18px; color: #4338ca; }
.game-up-modal { max-width: 560px; }
.game-up-plan { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border, #eee); }
.game-up-proration { margin-top: 12px; padding: 12px; border-radius: 10px; background: #f3fbf5; border: 1px solid #b7e2c4; }
.game-up-proration p { margin: 4px 0; font-size: 13.5px; }
.game-files-modal { max-width: 760px; }
.gf-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 8px 0; }
.gf-path { background: #11131a; color: #cfe3d0; padding: 5px 9px; border-radius: 7px; font-size: 12.5px; }
.gf-toolbar { display: flex; gap: 6px; flex-wrap: wrap; }
.gf-list { max-height: 360px; overflow-y: auto; border: 1px solid var(--border, #e3e6ee); border-radius: 10px; }
.gf-item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--border, #eee); font-size: 13.5px; }
.gf-item:last-child { border-bottom: none; }
.gf-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gf-name a { text-decoration: none; color: #4338ca; }
.gf-size { flex: 0 0 auto; font-size: 12px; }
.gf-acts { flex: 0 0 auto; display: flex; gap: 4px; }
.gf-a { border: none; background: transparent; cursor: pointer; font-size: 14px; padding: 2px 6px; border-radius: 6px; }
.gf-a:hover { background: #eef0fe; }
.gf-editor { margin-top: 12px; }
.gf-edit-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 13px; }
.gf-editor textarea { width: 100%; height: 320px; background: #11131a; color: #e6edf3; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12.5px; line-height: 1.5; border-radius: 10px; padding: 12px; border: 1px solid var(--border, #333); resize: vertical; }
.cloud-up-row { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; padding: 7px 0; }
.cloud-up-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.cloud-up-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cloud-up-meta { flex: 0 0 auto; font-size: 11.5px; color: #4338ca; white-space: nowrap; }
.cloud-up-bar { height: 7px; background: #e7eaf3; border-radius: 5px; overflow: hidden; }
.cloud-up-bar > div { height: 100%; width: 0; background: #4338ca; transition: width .2s; }
.cloud-up-row.done .cloud-up-bar > div { background: #2faa55; }
.cloud-up-row.err .cloud-up-bar > div { background: #e0533d; }
/* promo cloud sur le dashboard */
.client-cloud-promo { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; background: linear-gradient(135deg, #1e1b4b, #312e81); color: #fff; border-radius: 16px; padding: 18px 22px; margin: 16px 0; cursor: pointer; transition: transform .15s, box-shadow .15s; }
.client-cloud-promo:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(30,27,75,.28); }
.client-cloud-promo .ccp-badge { display: inline-block; background: rgba(255,255,255,.16); padding: 3px 10px; border-radius: 999px; font-size: 12px; margin-bottom: 6px; }
.client-cloud-promo h2 { margin: 2px 0 6px; font-size: 19px; }
.client-cloud-promo p { margin: 0; font-size: 13px; color: #d6d4f0; max-width: 640px; }
.client-cloud-promo .ccp-cta .btn { white-space: nowrap; }

/* ============================================================================
   v4 (22/06/2026) — Navigation regroupée (menus + sous-menus) + contenu pleine
   largeur. Bloc en fin de fichier = priorité maximale dans la cascade.
   ============================================================================ */

/* ---- 1. Le tableau de bord connecté utilise TOUTE la largeur (fini le cap 1320) ---- */
.page:has(.client-dashboard-v3) .shell { max-width: none; margin: 0; padding: 0; }
.page:has(.client-dashboard-v3) .hero-inner { max-width: none; }
.page:has(.client-dashboard-v3) .hero { padding-right: 34px; }
/* Le contenu remplit la largeur des moniteurs courants mais reste borné (~1680px) pour
   ne pas s'étirer en lignes illisibles sur écran 27"/ultrawide ; aligné à gauche, contre la sidebar. */
.dash.client-dashboard-v3 { max-width: none; margin: 0; padding: 26px 34px 64px calc(264px + 34px); grid-template-columns: minmax(0, 1680px); justify-content: start; }

/* ---- 2. Sidebar : en-tête de marque + groupes repliables (accordéon) ---- */
.client-page-tabs.client-menu-v3 { padding: 16px 14px 28px; gap: 2px; }
.cmenu-brand { display: flex; align-items: center; gap: 11px; padding: 4px 8px 14px; margin-bottom: 6px; border-bottom: 1px solid var(--border); cursor: pointer; border-radius: 0; }
.cmenu-brand:hover .cmenu-brand-txt strong { color: var(--accent); }
.cmenu-home { margin-bottom: 8px; }
.cmenu-brand-txt strong { display: block; font-size: 14px; line-height: 1.15; color: var(--ink); }
.cmenu-brand-txt small { font-size: 11.5px; color: var(--muted); }
.cmenu-group { display: flex; flex-direction: column; }
.cmenu-group + .cmenu-group { margin-top: 4px; }
.cmenu-group-h { display: flex; align-items: center; gap: 8px; width: 100%; border: none; background: transparent; cursor: pointer; padding: 10px 10px 6px; color: var(--muted); font: 800 11px/1 system-ui, sans-serif; text-transform: uppercase; letter-spacing: .05em; }
.cmenu-group-ico { font-size: 13px; }
.cmenu-group-lbl { flex: 1; text-align: left; }
.cmenu-chev { transition: transform .18s ease; flex: 0 0 auto; color: #b3b8c2; }
.cmenu-group.collapsed .cmenu-chev { transform: rotate(-90deg); }
.cmenu-group-h:hover { color: var(--ink); }
.cmenu-items { display: flex; flex-direction: column; gap: 2px; }
.cmenu-group.collapsed .cmenu-items { display: none; }
/* neutralise l'ancien séparateur nth-child(7) (les <a> sont désormais dans .cmenu-items) */
.client-page-tabs.client-menu-v3 .cmenu-items a:nth-child(7) { margin-top: 0; padding-top: 11px; border-top: none; }

/* ---- 3. Offre « Office » : Licence à VIE mise en évidence ---- */
.service-offer-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.client-service-offer.is-lifetime { border-color: #b7e2c4; background: linear-gradient(180deg, #f3fbf5, #fcfdfc); box-shadow: 0 0 0 1px rgba(16,185,129,.16); }
.service-lifetime { background: var(--green); color: #fff; font-size: 11.5px; font-weight: 800; letter-spacing: .02em; padding: 4px 11px; border-radius: 999px; box-shadow: 0 4px 12px rgba(16,185,129,.32); white-space: nowrap; }
.client-service-offer ul li.li-strong { font-weight: 700; color: #0a7f57; }
.client-service-offer ul li.li-strong::before { color: #0a7f57; }
.service-lifetime-note { margin: 2px 0 0 !important; font-size: 12.5px !important; font-weight: 600; color: #0a7f57 !important; background: #eafaf0; border: 1px solid #cdeedd; border-radius: 9px; padding: 7px 10px; line-height: 1.4; }

/* ---- 4. Modules d'accueil : remplir la largeur disponible ---- */
.client-overview-grid { grid-template-columns: minmax(0, 1fr) 380px; }
@media (min-width: 1500px) { .client-overview-grid { grid-template-columns: minmax(0, 1fr) 420px; } }

/* ---- 5. Mobile : le tiroir garde les groupes, le contenu prend toute la largeur ---- */
@media (max-width: 900px) {
  .dash.client-dashboard-v3 { padding: 14px 14px 48px !important; grid-template-columns: minmax(0, 1fr); }
  .page:has(.client-dashboard-v3) .hero { padding-right: 14px; }
  .client-page-tabs.client-menu-v3 { padding: 16px 12px 26px !important; }
  .cmenu-brand { padding-top: 2px; }
}

/* ============================================================================
   Hébergement web — refonte « webx » (22/06/2026) : hero + process + cartes +
   galerie 1-clic. Beau, ergonomique, responsive.
   ============================================================================ */
.webx { padding: 0 !important; border: none !important; background: transparent !important; box-shadow: none !important; }
.webx-hero { background: linear-gradient(135deg, #1e1b4b 0%, #4f46e5 60%, #6d28d9 100%); color: #fff; border-radius: 20px; padding: 26px 28px; display: grid; grid-template-columns: 1.2fr 1fr; gap: 26px; align-items: center; box-shadow: 0 18px 44px rgba(79,70,229,.26); }
.webx-flag { display: inline-block; background: rgba(255,255,255,.15); padding: 5px 13px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .03em; }
.webx-hero-main h2 { color: #fff; font-size: 27px; margin: 12px 0 8px; }
.webx-hero-main p { color: rgba(255,255,255,.92); font-size: 14px; line-height: 1.6; margin: 0; }
.webx-hero-main b { color: #fff; }
.webx-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.webx-steps li { display: flex; align-items: center; gap: 12px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16); border-radius: 13px; padding: 11px 14px; }
.webx-steps li > span { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; background: #fff; color: #4f46e5; font-weight: 800; display: grid; place-items: center; }
.webx-steps li b { display: block; font-size: 14px; }
.webx-steps li small { color: rgba(255,255,255,.82); font-size: 12px; }
@media (max-width: 820px) { .webx-hero { grid-template-columns: 1fr; gap: 18px; padding: 22px; } }

.webx-card { border: 1px solid var(--border, #e7e8e1); border-radius: 18px; background: #fff; padding: 20px 22px; margin-top: 16px; box-shadow: var(--shadow, 0 18px 40px rgba(17,22,34,.07)); }
.webx-card-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.webx-card-id { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-width: 0; }
.webx-card-id h3 { font-size: 19px; margin: 0; word-break: break-word; }
.webx-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.webx-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 16px 0; }
.webx-kpi { background: #f7f8fc; border: 1px solid var(--border, #e7e8e1); border-radius: 12px; padding: 11px 13px; display: flex; flex-direction: column; gap: 2px; }
.webx-kpi span { font-size: 11px; color: var(--muted, #6b7280); }
.webx-kpi b { font-size: 16px; }
@media (max-width: 620px) { .webx-kpis { grid-template-columns: repeat(2, 1fr); } }

.webx-gallery { border: 1px solid #e6e2ff; border-radius: 14px; background: linear-gradient(180deg, #faf9ff, #fff); margin: 14px 0; overflow: hidden; }
.webx-gallery > summary { cursor: pointer; list-style: none; padding: 14px 16px; display: flex; align-items: baseline; gap: 10px; font-weight: 700; }
.webx-gallery > summary::-webkit-details-marker { display: none; }
.webx-gallery > summary::before { content: '▸'; color: #5b50e0; margin-right: 2px; transition: transform .15s; }
.webx-gallery[open] > summary::before { content: '▾'; }
.webx-gallery > summary small { font-weight: 500; }
.webx-gal-body { padding: 4px 16px 16px; }
.webx-gal-h { font-size: 12.5px; font-weight: 700; color: #4b4660; margin: 6px 0 9px; }
.webx-gal-h .muted { font-weight: 500; }
.webx-tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 10px; }
.webx-tpl { text-align: left; cursor: pointer; border: 1px solid var(--border, #e7e8e1); background: #fff; border-radius: 13px; padding: 14px; display: flex; flex-direction: column; gap: 3px; transition: .15s; min-height: 96px; }
.webx-tpl:hover { border-color: #5b50e0; transform: translateY(-2px); box-shadow: 0 10px 22px rgba(91,80,224,.14); }
.webx-tpl-ico { font-size: 26px; line-height: 1.1; }
.webx-tpl b { font-size: 14px; }
.webx-tpl small { font-size: 11.5px; color: var(--muted, #6b7280); line-height: 1.35; }
.webx-app { background: linear-gradient(180deg, #f3fbf5, #fff); border-color: #cdeedd; }
.webx-app:hover { border-color: #10b981; box-shadow: 0 10px 22px rgba(16,185,129,.16); }
.webx-gal-warn { font-size: 12px; margin-top: 12px; background: #fff7e6; border: 1px solid #f3dca6; border-radius: 9px; padding: 8px 11px; color: #8a6100; }
.webx-actions { display: flex; flex-wrap: wrap; align-items: center; margin-top: 14px; gap: 8px; }
.webx-card .web-type { margin: 14px 0; }
.webx-gallery > summary { align-items: center; }
.webx-tpl small { color: #5b6270; }

/* ============================================================================
   Chat en direct — widget flottant client (bottom-right)
   ============================================================================ */
.lc-widget { position: fixed; right: 20px; bottom: 20px; z-index: 9998; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.lc-fab { width: 60px; height: 60px; border-radius: 50%; border: none; cursor: pointer; background: linear-gradient(135deg, #5b50e0, #7c3aed); color: #fff; font-size: 26px; box-shadow: 0 12px 30px rgba(91,80,224,.4); position: relative; transition: transform .15s; }
.lc-fab:hover { transform: scale(1.06); }
.lc-widget.open .lc-fab { transform: scale(.9); opacity: .85; }
.lc-badge { position: absolute; top: -3px; right: -3px; min-width: 21px; height: 21px; padding: 0 5px; border-radius: 999px; background: #e0533d; color: #fff; font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; border: 2px solid #fff; }
.lc-panel { width: 370px; max-width: calc(100vw - 32px); height: 520px; max-height: calc(100vh - 120px); background: #fff; border: 1px solid var(--border, #e7e8e1); border-radius: 18px; box-shadow: 0 24px 60px rgba(17,22,34,.28); display: flex; flex-direction: column; overflow: hidden; }
.lc-panel[hidden] { display: none; }
.lc-head { background: linear-gradient(135deg, #1e1b4b, #4f46e5); color: #fff; padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex: 0 0 auto; }
.lc-head-txt strong { display: block; font-size: 15px; }
.lc-head-txt small { font-size: 12px; color: rgba(255,255,255,.82); }
.lc-x { background: rgba(255,255,255,.18); border: none; color: #fff; width: 30px; height: 30px; border-radius: 9px; font-size: 20px; line-height: 1; cursor: pointer; }
.lc-x:hover { background: rgba(255,255,255,.3); }
.lc-msgs { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 8px; background: #f7f8fc; }
.lc-intro { background: #fff; border: 1px solid var(--border, #e7e8e1); border-radius: 12px; padding: 12px 14px; font-size: 13px; color: #4b5160; line-height: 1.5; }
.lc-msg { display: flex; flex-direction: column; max-width: 84%; }
.lc-msg.me { align-self: flex-end; align-items: flex-end; }
.lc-msg.them { align-self: flex-start; align-items: flex-start; }
.lc-who { font-size: 11px; color: #8b90a0; margin: 0 0 2px 4px; font-weight: 600; }
.lc-bubble { padding: 9px 13px; border-radius: 14px; font-size: 13.5px; line-height: 1.45; word-break: break-word; white-space: pre-wrap; }
.lc-msg.me .lc-bubble { background: linear-gradient(135deg, #5b50e0, #6d28d9); color: #fff; border-bottom-right-radius: 5px; }
.lc-msg.them .lc-bubble { background: #fff; border: 1px solid var(--border, #e7e8e1); color: #1f2430; border-bottom-left-radius: 5px; }
.lc-sys { align-self: center; font-size: 11.5px; color: #8b90a0; background: #eceef5; border-radius: 999px; padding: 4px 12px; max-width: 90%; text-align: center; }
.lc-input { flex: 0 0 auto; display: flex; gap: 8px; align-items: flex-end; padding: 10px 12px; border-top: 1px solid var(--border, #e7e8e1); background: #fff; }
.lc-input textarea { flex: 1; resize: none; border: 1px solid var(--border, #e7e8e1); border-radius: 12px; padding: 10px 12px; font: inherit; font-size: 13.5px; max-height: 96px; line-height: 1.4; }
.lc-input textarea:focus { outline: none; border-color: var(--accent, #5b50e0); box-shadow: 0 0 0 3px rgba(91,80,224,.14); }
.lc-send { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 12px; border: none; background: var(--accent, #5b50e0); color: #fff; font-size: 18px; cursor: pointer; transition: filter .15s; }
.lc-send:hover { filter: brightness(1.08); }
@media (max-width: 520px) {
  .lc-widget { right: 14px; bottom: 14px; }
  .lc-panel { width: calc(100vw - 28px); height: calc(100vh - 110px); }
}

/* ============================================================================
   Serveurs de jeu — remake « façon Pterodactyl » (carte propre, zones claires)
   ============================================================================ */
.game-card.gx { border: 1px solid var(--border, #e7e8e1); border-radius: 16px; padding: 0; overflow: hidden; background: #fff; box-shadow: var(--shadow, 0 18px 40px rgba(17,22,34,.07)); margin-bottom: 16px; }
.gx-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 18px; border-bottom: 1px solid var(--border, #e7e8e1); background: linear-gradient(180deg, #fbfbfe, #fff); }
.gx-id { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.gx-id strong { font-size: 17px; }
.gx-id small { font-size: 12.5px; }
.gx-connect { display: inline-flex; align-items: center; gap: 7px; border: 1px solid #cdeedd; background: #f3fbf5; border-radius: 10px; padding: 6px 11px; cursor: pointer; font-size: 13px; }
.gx-connect code { background: transparent; color: #0a7f43; font-weight: 700; }
.gx-connect:hover { border-color: #10b981; }
.gx-copy { opacity: .7; }
.gx-power { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 12px 18px; border-bottom: 1px solid var(--border, #e7e8e1); }
.gx-power-spacer { flex: 1 1 12px; }
.gx-btn { border: 1px solid var(--border, #e7e8e1); background: var(--panel, #fff); color: var(--ink, #15171c); border-radius: 10px; padding: 9px 14px; font-weight: 600; font-size: 13.5px; cursor: pointer; transition: .12s; }
.gx-btn:hover:not(:disabled) { border-color: var(--accent, #5b50e0); transform: translateY(-1px); }
.gx-btn:disabled { opacity: .45; cursor: not-allowed; }
.gx-btn.gx-start { background: #10b981; border-color: #10b981; color: #fff; }
.gx-btn.gx-start:hover:not(:disabled) { filter: brightness(1.06); }
.gx-btn.gx-kill { background: #fff; border-color: #f0c8c2; color: #c0392b; }
.gx-btn.gx-kill:hover:not(:disabled) { background: #dc2626; border-color: #dc2626; color: #fff; }
.gx-btn.ghost { background: transparent; color: var(--muted, #6b7280); font-weight: 600; }
.gx-btn.ghost:hover { color: var(--ink, #15171c); border-color: var(--accent, #5b50e0); }
.gx-stats { display: grid; grid-template-columns: 1fr 1fr 0.8fr; gap: 12px; padding: 14px 18px; }
.gx-stat-tile { background: #0e1016; border: 1px solid #232838; border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; }
.gx-stat-tile .game-graph-head b { font-size: 17px; color: #e6edf3; }
.gx-tile-note { flex: 1; display: flex; align-items: center; color: #8b93a7; font-size: 12px; }
@media (max-width: 720px) { .gx-stats { grid-template-columns: 1fr; } }
.gx-console-wrap { padding: 0 18px 16px; }
.gx-console-bar { display: flex; align-items: center; justify-content: space-between; padding: 8px 2px; }
.gx-console-title { font-weight: 700; font-size: 13.5px; }
.gx-live { color: #34d399; font-size: 11.5px; font-weight: 700; margin-left: 6px; animation: gxpulse 2s ease-in-out infinite; }
@keyframes gxpulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
.gx-clear { border: 1px solid var(--border, #e7e8e1); background: var(--panel, #fff); border-radius: 8px; padding: 5px 10px; font-size: 12.5px; cursor: pointer; color: var(--muted, #6b7280); }
.gx-clear:hover { color: var(--ink, #15171c); }
.gx-console { height: 460px; max-height: 64vh; margin: 0 0 10px; border-radius: 12px; font-size: 12.5px; }
.gx-cmd { gap: 8px; }
.gx-cmd input { border-radius: 10px; }

/* Bouton marketplace mis en avant */
.gx-btn.market { background: linear-gradient(135deg, #5b50e0, #7c3aed); color: #fff; border: none; font-weight: 700; }
.gx-btn.market:hover { filter: brightness(1.07); }
/* Marketplace plugins/mods (modale) */
.gx-market { width: min(740px, 100%); }
.gx-market-search { display: flex; gap: 8px; margin: 10px 0; }
.gx-market-search input { flex: 1; border: 1px solid var(--border, #e7e8e1); border-radius: 9px; padding: 9px 11px; font: inherit; }
.gx-results { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; max-height: 50vh; overflow: auto; margin-top: 10px; padding-right: 4px; }
@media (max-width: 640px) { .gx-results { grid-template-columns: 1fr; } }
.gx-addon { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 9px 11px; border: 1px solid var(--border, #e7e8e1); border-radius: 12px; background: var(--panel, #fff); }
.gx-addon-ic img { width: 44px; height: 44px; border-radius: 9px; object-fit: cover; display: block; }
.gx-ic-ph { width: 44px; height: 44px; border-radius: 9px; display: flex; align-items: center; justify-content: center; background: rgba(120,120,140,.14); font-size: 20px; }
.gx-addon-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.gx-addon-main strong { font-size: 13.5px; }
.gx-addon-desc { font-size: 11.5px; line-height: 1.35; max-height: 32px; overflow: hidden; }
.gx-installed { margin: 8px 0; }
.gx-inst-title { font-size: 12px; font-weight: 700; margin-bottom: 6px; }
.gx-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.gx-chip { display: inline-flex; align-items: center; gap: 6px; background: rgba(91,80,224,.12); color: #5b50e0; border-radius: 999px; padding: 3px 6px 3px 11px; font-size: 12px; font-weight: 600; }
.gx-chip button { border: none; background: rgba(91,80,224,.18); color: inherit; cursor: pointer; width: 18px; height: 18px; border-radius: 50%; font-size: 11px; line-height: 1; }
/* Onglets du panel serveur de jeu (Console / Stats / Plugins / Version) */
.gx-tabs { display: flex; gap: 4px; padding: 0 18px; border-bottom: 1px solid var(--border, #e7e8e1); flex-wrap: wrap; }
.gx-tab { border: none; background: transparent; padding: 10px 14px; font-size: 13px; font-weight: 700; color: var(--muted, #6b7280); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.gx-tab:hover { color: var(--ink, #15171c); }
.gx-tab.active { color: #5b50e0; border-bottom-color: #5b50e0; }
.gx-tabwrap { padding: 14px 18px 16px; }
.gx-panel[hidden] { display: none; }
.gx-panel .gx-console-wrap { padding: 0; }
.gx-ver-grid { display: grid; gap: 9px; max-width: 540px; }

/* ============ PANEL JEUX — DESIGN FUTURISTE (hébergeur du futur) ============ */
.game-card.gx { background: linear-gradient(180deg, #0e1424, #0a0f1c); border: 1px solid rgba(124,92,255,.22); box-shadow: 0 0 0 1px rgba(124,92,255,.05), 0 24px 60px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.04); color: #e6edf6; position: relative; }
.game-card.gx::before { content: ''; position: absolute; inset: 0; border-radius: 16px; padding: 1px; background: linear-gradient(135deg, rgba(34,211,238,.5), rgba(124,92,255,.35) 42%, transparent 72%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; opacity: .55; }
.game-card.gx .gx-top { background: linear-gradient(180deg, rgba(124,92,255,.12), rgba(10,15,28,0)); border-bottom-color: rgba(124,150,220,.14); }
.game-card.gx .gx-id strong { color: #f3f6fc; letter-spacing: .2px; }
.game-card.gx .gx-id small, .game-card.gx .muted, .game-card.gx .game-graph-head .muted, .game-card.gx .game-graph-foot .muted { color: #8a96b3; }
.game-card.gx .gx-connect { background: rgba(34,211,238,.07); border-color: rgba(34,211,238,.3); color: #8af0ff; }
.game-card.gx .gx-connect code { color: #5ee9ff; }
.game-card.gx .gx-connect:hover { border-color: #22d3ee; box-shadow: 0 0 16px rgba(34,211,238,.25); }
.game-card.gx .gx-power { border-bottom-color: rgba(124,150,220,.12); }
.game-card.gx .gx-btn { background: rgba(255,255,255,.04); border-color: rgba(140,160,210,.2); color: #dbe4f5; }
.game-card.gx .gx-btn:hover:not(:disabled) { border-color: #7c5cff; box-shadow: 0 0 16px rgba(124,92,255,.3); color: #fff; }
.game-card.gx .gx-btn.gx-start { background: linear-gradient(135deg, #10b981, #0d9488); border: none; color: #fff; box-shadow: 0 0 18px rgba(16,185,129,.4); }
.game-card.gx .gx-btn.gx-kill { background: rgba(255,93,108,.08); border-color: rgba(255,93,108,.35); color: #ff8b96; }
.game-card.gx .gx-btn.gx-kill:hover:not(:disabled) { background: #ff5d6c; color: #fff; box-shadow: 0 0 18px rgba(255,93,108,.45); }
.game-card.gx .gx-btn.ghost { color: #9aa6c2; }
.game-card.gx .gx-btn.ghost:hover { color: #fff; border-color: #7c5cff; }
.game-card.gx .game-badge { background: rgba(124,140,180,.14); color: #c4cde0; box-shadow: inset 0 0 0 1px rgba(140,160,210,.18); }
.game-card.gx .game-badge.game-running { background: rgba(52,226,154,.14); color: #5ef0b0; box-shadow: inset 0 0 0 1px rgba(52,226,154,.4), 0 0 14px rgba(52,226,154,.35); animation: gxPulse 2.4s ease-in-out infinite; }
@keyframes gxPulse { 0%, 100% { box-shadow: inset 0 0 0 1px rgba(52,226,154,.4), 0 0 8px rgba(52,226,154,.25); } 50% { box-shadow: inset 0 0 0 1px rgba(52,226,154,.6), 0 0 18px rgba(52,226,154,.5); } }
.game-card.gx .game-badge.game-error { background: rgba(255,93,108,.14); color: #ff9aa3; }
.game-card.gx .gx-tabs { border-bottom-color: rgba(124,150,220,.14); }
.game-card.gx .gx-tab { color: #8a96b3; }
.game-card.gx .gx-tab:hover { color: #dbe4f5; }
.game-card.gx .gx-tab.active { color: #a8c7ff; border-bottom-color: transparent; position: relative; }
.game-card.gx .gx-tab.active::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #22d3ee, #7c5cff); box-shadow: 0 0 10px rgba(124,92,255,.6); }
.game-card.gx .gx-console { background: #05070d; color: #c9f7d8; box-shadow: inset 0 0 0 1px rgba(52,226,154,.12), inset 0 0 40px rgba(0,0,0,.6); }
.game-card.gx .gx-console-title { color: #dbe4f5; }
.game-card.gx .gx-live { color: #34e29a; }
.game-card.gx .gx-clear { background: rgba(255,255,255,.05); border-color: rgba(140,160,210,.2); color: #9aa6c2; }
.game-card.gx .gx-cmd input { background: #05070d; border-color: rgba(140,160,210,.2); color: #c9f7d8; }
.game-card.gx .gx-cmd input:focus { border-color: #34e29a; box-shadow: 0 0 0 3px rgba(52,226,154,.15); outline: none; }
.game-card.gx .game-graph { background: #070b14; border-color: rgba(124,150,220,.16); }
.game-card.gx .game-graph-head b { font-size: 18px; color: #eef2fb; text-shadow: 0 0 10px rgba(124,92,255,.3); }
.game-card.gx .gg-cpu { stroke: #34e29a; filter: drop-shadow(0 0 4px rgba(52,226,154,.6)); }
.game-card.gx .gg-mem { stroke: #38bdf8; filter: drop-shadow(0 0 4px rgba(56,189,248,.6)); }
.game-card.gx .gg-area-cpu { fill: rgba(52,226,154,.14); }
.game-card.gx .gg-area-mem { fill: rgba(56,189,248,.14); }
.game-card.gx .gx-stat-tile { background: #070b14; border: 1px solid rgba(124,150,220,.16); border-radius: 12px; padding: 10px 12px; }
.game-card.gx .gx-addon { background: rgba(255,255,255,.03); border-color: rgba(140,160,210,.16); }
.game-card.gx .gx-addon strong { color: #eef2fb; }
.game-card.gx .gx-ic-ph { background: rgba(124,92,255,.16); }
.game-card.gx .gx-market-search input, .game-card.gx .gx-ver-grid select, .game-card.gx .gx-ver-grid input { background: rgba(255,255,255,.04); border: 1px solid rgba(140,160,210,.2); color: #e6edf6; border-radius: 9px; padding: 8px 10px; }
.game-card.gx .gx-ver-grid select option { background: #0e1424; color: #e6edf6; }
.game-card.gx .gx-chip { background: rgba(124,92,255,.18); color: #c3b4ff; }
.game-card.gx .gx-chip button { background: rgba(124,92,255,.3); color: #fff; }
.game-card.gx .gx-inst-title { color: #c4cde0; }

/* ===== Console couleurs (façon Mclogs) — classes .lc-* injectées par colorizeLine() ===== */
.game-card.gx .gx-console { white-space: pre-wrap; word-break: break-word; }
.lc-dim { color: #5b6577; font-style: italic; }
.lc-ts { color: #8af0ff; }
.lc-info { color: #5ee9ff; }
.lc-warn, .lc-warning, .lc-notice { color: #ffb454; font-weight: 600; }
.lc-error { color: #ff8b96; font-weight: 600; }
.lc-fatal, .lc-severe { color: #ff5d6c; font-weight: 700; }
.lc-debug { color: #9fa8c9; }
.lc-trace { color: #7a8599; }
.lc-thread { color: #a8c7ff; }
.lc-logger { color: #b4a7ff; }
.lc-player { color: #34e29a; font-weight: 600; }
.lc-player-joined { color: #5ef0b0; }
.lc-player-left { color: #c9a8a8; }
.lc-progress { color: #ffd86b; font-weight: 600; }
.lc-cmd { color: #7dffb0; font-weight: 600; }
.lc-stacktrace { color: #c9a8a8; }
.lc-addon { color: #c3b4ff; font-weight: 600; }
.game-card.gx .gx-console a { color: #5ee9ff; text-decoration: underline; }
.game-card.gx .gx-console .lc-line { white-space: pre-wrap; word-break: break-word; min-height: 1em; }

/* ===== Layout split façon Pterodactyl : console + sidebar stats live ===== */
.game-card.gx .gx-split { display: grid; grid-template-columns: minmax(0,1fr) 248px; gap: 12px; align-items: stretch; }
.game-card.gx .gx-console-col { min-width: 0; display: flex; flex-direction: column; }
.game-card.gx .gx-console-col .gx-console { flex: 1 1 auto; }
.game-card.gx .gx-side { display: flex; flex-direction: column; gap: 10px; }
.game-card.gx .gx-side-metric { background: #070b14; border: 1px solid rgba(124,150,220,.16); border-radius: 12px; padding: 10px 12px; }
.game-card.gx .gx-side-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.game-card.gx .gx-side-row span { font-size: 12px; }
.game-card.gx .gx-side-row b { font-size: 17px; color: #eef2fb; font-variant-numeric: tabular-nums; letter-spacing: .3px; }
.game-card.gx .gx-side-spark { width: 100%; height: 42px; display: block; margin: 7px 0 3px; }
.game-card.gx .gx-side-sub { display: flex; justify-content: space-between; font-size: 11px; }
.game-card.gx .gx-side-sub b { color: #c4cde0; }
.game-card.gx .gx-side-players { display: flex; flex-direction: column; justify-content: center; }
.game-card.gx .gx-side-note { font-size: 10.5px; margin-top: 5px; }
@media (max-width: 760px) {
  .game-card.gx .gx-split { grid-template-columns: 1fr; }
  .game-card.gx .gx-side { flex-direction: row; flex-wrap: wrap; }
  .game-card.gx .gx-side-metric { flex: 1 1 46%; }
}

/* ============ Hébergement Web & Cloud — refonte premium ("banger") ============ */
/* — Web : héros profond + étapes vivantes — */
.webx-hero { position: relative; overflow: hidden; background: linear-gradient(135deg, #1e1b4b 0%, #4f46e5 58%, #7c3aed 100%); color: #fff; border-radius: 20px; padding: 28px 30px; box-shadow: 0 24px 60px rgba(79,70,229,.30); display: grid; grid-template-columns: 1.25fr 1fr; gap: 28px; align-items: center; }
.webx-hero::after { content: ''; position: absolute; inset: 0; background: radial-gradient(900px 320px at 85% -25%, rgba(255,255,255,.18), transparent 60%); pointer-events: none; }
.webx-hero-main { position: relative; z-index: 1; }
.webx-flag { display: inline-block; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.24); color: #fff; padding: 5px 13px; border-radius: 999px; font-size: 12.5px; font-weight: 600; }
.webx-hero-main h2 { color: #fff; font-size: 27px; margin: 13px 0 9px; letter-spacing: -.3px; }
.webx-hero-main p { color: rgba(255,255,255,.92); font-size: 14px; line-height: 1.6; }
.webx-steps { position: relative; z-index: 1; list-style: none; display: grid; gap: 10px; margin: 0; padding: 0; }
.webx-steps li { display: flex; align-items: center; gap: 12px; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.16); border-radius: 13px; padding: 11px 14px; transition: transform .15s, background .15s; }
.webx-steps li:hover { transform: translateX(3px); background: rgba(255,255,255,.17); }
.webx-steps li > span { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: #fff; color: #4f46e5; font-weight: 800; }
.webx-steps li b { font-size: 14px; } .webx-steps li small { color: rgba(255,255,255,.82); font-size: 12px; display: block; }
@media (max-width: 900px) { .webx-hero { grid-template-columns: 1fr; padding: 22px; } }
/* — Web : cartes site qui se soulèvent + liseré accent — */
.web-site-card { border: 1px solid #e7e8f3; border-radius: 18px; padding: 18px 20px; box-shadow: 0 16px 38px rgba(17,22,34,.07); transition: transform .15s, box-shadow .15s; position: relative; overflow: hidden; }
.web-site-card::before { content: ''; position: absolute; left: 0; top: 0; right: 0; height: 3px; background: linear-gradient(90deg, #5b50e0, #7c3aed); }
.web-site-card:hover { transform: translateY(-2px); box-shadow: 0 22px 50px rgba(79,70,229,.15); }
.web-db-panel { border-radius: 16px; box-shadow: 0 12px 32px rgba(17,22,34,.06); }
/* — Cloud : bannière + jauge de quota animée — */
.cloud-private-banner { background: linear-gradient(135deg, #eef2ff, #f5f3ff); border: 1px solid #e0e3f7; border-radius: 16px; box-shadow: 0 12px 32px rgba(79,70,229,.08); }
.cloud-quota-card { border-radius: 16px; box-shadow: 0 14px 36px rgba(17,22,34,.06); }
.cloud-usage-bar { height: 12px; border-radius: 8px; background: #e9ecf6; box-shadow: inset 0 1px 2px rgba(0,0,0,.06); }
.cloud-usage-bar > div { background: linear-gradient(90deg, #4338ca, #7c3aed); border-radius: 8px; position: relative; overflow: hidden; }
.cloud-usage-bar > div::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent); animation: cloudShimmer 1.9s linear infinite; }
@keyframes cloudShimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.cloud-slider-vals strong { color: #5b50e0; }
.cloud-drop { border-radius: 14px; transition: box-shadow .15s, border-color .15s, background .15s; }
.cloud-drop.over { box-shadow: 0 0 0 3px rgba(91,80,224,.16); }
.cloud-transfer-card { border-radius: 16px; box-shadow: 0 10px 28px rgba(17,22,34,.05); }

/* Barre console (actions) + modal Logs complets */
.gx-console-acts { display: inline-flex; gap: 8px; align-items: center; }
.gx-logs-modal { max-width: 1000px; width: 94vw; }
.gx-logs-modal .gx-logs-pre { height: 70vh; max-height: 70vh; margin-top: 12px; overflow: auto; background: #05070d; color: #c9f7d8; border: 1px solid rgba(124,150,220,.2); border-radius: 12px; padding: 12px 14px; white-space: pre-wrap; word-break: break-word; font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: 12px; line-height: 1.5; }
.gx-logs-modal .gx-logs-pre .lc-line { white-space: pre-wrap; word-break: break-word; }

/* ===== Boutique de Services (catalogue offres) ===== */
.svc-hero { position: relative; overflow: hidden; background: linear-gradient(135deg, #1e1b4b 0%, #4f46e5 58%, #7c3aed 100%); color: #fff; border-radius: 20px; padding: 26px 28px; box-shadow: 0 24px 60px rgba(79,70,229,.30); margin-bottom: 18px; }
.svc-hero::after { content: ''; position: absolute; inset: 0; background: radial-gradient(900px 320px at 88% -25%, rgba(255,255,255,.18), transparent 60%); pointer-events: none; }
.svc-hero-main { position: relative; z-index: 1; max-width: 720px; }
.svc-flag { display: inline-block; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.24); color: #fff; padding: 5px 13px; border-radius: 999px; font-size: 12.5px; font-weight: 600; }
.svc-hero h2 { color: #fff; font-size: 26px; margin: 12px 0 8px; letter-spacing: -.3px; }
.svc-hero p { color: rgba(255,255,255,.92); font-size: 14px; line-height: 1.6; margin: 0; }
.svc-hero-cats { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.svc-cat-pill { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); color: #fff; padding: 6px 13px; border-radius: 999px; font-size: 12.5px; font-weight: 600; text-decoration: none; transition: background .15s; }
.svc-cat-pill:hover { background: rgba(255,255,255,.22); }
.svc-cat { margin: 22px 0; }
.svc-cat-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.svc-cat-ico { font-size: 26px; line-height: 1; }
.svc-cat-head h3 { margin: 0; font-size: 17px; }
.svc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.svc-card { display: flex; flex-direction: column; gap: 9px; background: #fff; border: 1px solid #e7e8f3; border-radius: 16px; padding: 17px 18px; box-shadow: 0 14px 34px rgba(17,22,34,.06); transition: transform .15s, box-shadow .15s; position: relative; overflow: hidden; }
.svc-card::before { content: ''; position: absolute; left: 0; top: 0; right: 0; height: 3px; background: linear-gradient(90deg, #5b50e0, #7c3aed); }
.svc-card:hover { transform: translateY(-2px); box-shadow: 0 22px 48px rgba(79,70,229,.14); }
.svc-card.owned { border-color: #b7e2c4; background: #f6fdf8; }
.svc-card-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.svc-card-top strong { font-size: 15.5px; }
.svc-owned-badge { font-size: 11px; font-weight: 700; color: #10b981; background: #e9f9f0; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.svc-card-desc { font-size: 12.5px; margin: 0; }
.svc-specs { list-style: none; margin: 2px 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.svc-specs li { font-size: 12.5px; color: #444b5e; }
.svc-card-foot { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 9px; border-top: 1px solid #f0f1f6; }
.svc-price b { font-size: 21px; color: #15171c; } .svc-price span { font-size: 12px; margin-left: 2px; }
/* Mes Abonnements */
.sub-card .sub-meta { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; }
.sub-card .sub-meta b { color: #15171c; }
.sub-pill { font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.sub-pill.sub-ok { color: #10b981; background: #e9f9f0; }
.sub-pill.sub-warn { color: #b8860b; background: #fff6e0; }
.sub-pill.sub-err { color: #c0392b; background: #fbeaea; }
.sub-resil { font-size: 12px; color: #b8860b; background: #fff6e0; border-radius: 9px; padding: 7px 10px; }
.sub-foot { gap: 8px; }
/* Monitoring sidebar (réseau/disque/pids/uptime) */
.game-card.gx .gx-side-mon { display: flex; flex-direction: column; gap: 5px; }
.game-card.gx .gx-side-mon .gx-side-row b { font-size: 12.5px; font-weight: 600; color: #c4cde0; }

/* ============ REFONTE v2 — BOLD/PREMIUM (pages produit Web/Cloud/Boutique, scopé) ============ */
#client-web .webx-hero, #client-services .svc-hero, #client-cloud .cloud-private-banner {
  background: linear-gradient(125deg, #3b0d7a 0%, #5b50e0 38%, #7c3aed 62%, #2563eb 100%) !important;
  background-size: 220% 220% !important; animation: heroFlow 14s ease-in-out infinite !important;
  color: #fff !important; border: 1px solid rgba(255,255,255,.14) !important; border-radius: 26px !important;
  padding: 44px 40px !important; box-shadow: 0 34px 90px rgba(79,70,229,.45), inset 0 1px 0 rgba(255,255,255,.22) !important;
  position: relative !important; overflow: hidden !important; margin-bottom: 22px !important;
}
@keyframes heroFlow { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
#client-web .webx-hero::after, #client-services .svc-hero::after, #client-cloud .cloud-private-banner::after {
  content: ''; position: absolute; width: 460px; height: 460px; right: -130px; top: -180px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.30), transparent 64%); pointer-events: none;
}
#client-web .webx-hero h2, #client-services .svc-hero h2 { color: #fff !important; font-size: 40px !important; font-weight: 800 !important; letter-spacing: -1.2px !important; line-height: 1.05 !important; margin: 14px 0 12px !important; }
#client-web .webx-hero p, #client-services .svc-hero p { color: rgba(255,255,255,.92) !important; font-size: 15px !important; }
#client-cloud .cloud-private-banner strong { color: #fff !important; font-size: 22px !important; }
#client-cloud .cloud-private-banner p { color: rgba(255,255,255,.9) !important; }
#client-services .svc-card, #client-web .web-site-card, #client-web .webx-card, #client-cloud .cloud-quota-card, #client-cloud .cloud-transfer-card {
  border-radius: 20px !important; border: 1px solid #e6e3f7 !important;
  box-shadow: 0 18px 48px rgba(79,70,229,.12) !important; transition: transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s !important;
}
#client-services .svc-card:hover, #client-web .web-site-card:hover, #client-web .webx-card:hover, #client-cloud .cloud-quota-card:hover {
  transform: translateY(-6px) scale(1.012) !important; box-shadow: 0 32px 72px rgba(79,70,229,.28) !important;
}
#client-services .svc-card::before, #client-web .web-site-card::before { height: 5px !important; background: linear-gradient(90deg, #22d3ee, #5b50e0, #7c3aed) !important; }
#client-web .webx-kpi { background: linear-gradient(180deg, #f6f7ff, #fff) !important; border: 1px solid #e6e3f7 !important; border-radius: 14px !important; }
#client-web .webx-kpi b, #client-web .webx-kpi strong { font-size: 19px !important; color: #15171c !important; }
#client-services .svc-card .btn.primary, #client-cloud .btn.primary, #client-web .btn.primary { background: linear-gradient(135deg, #5b50e0, #7c3aed) !important; border: none !important; color: #fff !important; box-shadow: 0 8px 22px rgba(124,92,255,.4) !important; }
#client-services .svc-cat-head h3, #client-web .section-head h2, #client-cloud .section-head h2 { font-size: 21px !important; letter-spacing: -.4px !important; }

/* ============ REFONTE v3 — LIGHT PREMIUM À FOND (verre + animations + dégradés) ============ */
#client-web, #client-cloud, #client-services {
  background: radial-gradient(1100px 480px at 12% -6%, #efeefe 0%, transparent 55%), radial-gradient(1000px 480px at 96% 0%, #e7f0ff 0%, transparent 50%), linear-gradient(180deg, #fcfcff, #f7f8ff) !important;
}
/* Héros encore plus grands + 2e blob animé cyan */
#client-web .webx-hero, #client-services .svc-hero, #client-cloud .cloud-private-banner { padding: 52px 46px !important; border-radius: 30px !important; }
#client-web .webx-hero::before, #client-services .svc-hero::before, #client-cloud .cloud-private-banner::before {
  content: ''; position: absolute; left: -90px; bottom: -150px; width: 400px; height: 400px; border-radius: 50%;
  background: radial-gradient(circle, rgba(34,211,238,.4), transparent 60%); filter: blur(8px); animation: blobFloat 9s ease-in-out infinite; pointer-events: none;
}
@keyframes blobFloat { 0%,100% { transform: translate(0,0); } 50% { transform: translate(46px,-34px); } }
#client-web .webx-hero h2, #client-services .svc-hero h2 { font-size: 46px !important; }
/* Cartes en VERRE : glassmorphism + bordure dégradée + entrée animée */
#client-services .svc-card, #client-web .web-site-card, #client-cloud .cloud-quota-card {
  background: rgba(255,255,255,.7) !important; backdrop-filter: blur(16px) saturate(1.35) !important; -webkit-backdrop-filter: blur(16px) saturate(1.35) !important;
  border: 1px solid rgba(124,92,255,.14) !important; border-radius: 22px !important;
  box-shadow: 0 22px 58px rgba(79,70,229,.15), inset 0 1px 0 rgba(255,255,255,.75) !important;
  animation: cardIn .5s cubic-bezier(.2,.8,.2,1) both !important;
}
@keyframes cardIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
#client-services .svc-card::after, #client-web .web-site-card::after {
  content: ''; position: absolute; inset: 0; border-radius: 22px; padding: 1.5px;
  background: linear-gradient(135deg, #22d3ee, #7c3aed 60%, transparent 85%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: .55; pointer-events: none;
}
/* Chiffres KPI en dégradé + plus gros */
#client-web .webx-kpi b, #client-web .webx-kpi strong, #client-web .webx-kpi > b {
  font-size: 22px !important; background: linear-gradient(135deg, #5b50e0, #7c3aed) !important;
  -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important;
}
/* Boutons brillants */
#client-services .svc-card .btn.primary, #client-cloud .btn.primary, #client-web .btn.primary {
  background: linear-gradient(135deg, #6366f1, #8b5cf6) !important; box-shadow: 0 10px 26px rgba(124,92,255,.45) !important; transition: transform .15s, box-shadow .15s !important;
}
#client-services .svc-card .btn.primary:hover, #client-cloud .btn.primary:hover, #client-web .btn.primary:hover { transform: translateY(-2px) !important; box-shadow: 0 16px 34px rgba(124,92,255,.55) !important; }
/* jauge cloud plus épaisse + glow */
#client-cloud .cloud-usage-bar { height: 14px !important; }
#client-cloud .cloud-usage-bar > div { box-shadow: 0 0 14px rgba(124,92,255,.5) !important; }

/* ============================================================================
   REFONTE DESIGN SYSTEM (23/06/2026) — pages produit Web / Cloud / Jeux.
   GARDE-FOUS : on N'ÉCRASE PAS les tokens :root existants déjà utilisés partout
   (--accent, --panel, --ink, --border, --muted, --bg, --shadow, --radius-sm…) ;
   on AJOUTE seulement les nouveaux tokens. Les composants génériques redéfinis
   par la spec (.card/.btn/.pill/.section-head/.banner/.kpi…) sont SCOPÉS aux
   conteneurs des 3 pages refaites (.webx2 / #client-web, .cloudx / #client-cloud,
   .game-card.gx) pour NE PAS repeindre le reste du portail (devis, factures,
   tickets, RMA, Empreinte, boutique…).
   ============================================================================ */

/* ---- Tokens AJOUTÉS (les existants ne sont pas redéclarés ici) ---- */
:root {
  --accent-muted: #b3afdb;
  --red-soft: #fbeaea;
  --amber: #c77700;
  --amber-soft: #fff7e6;
  --panel-soft: #f7f8fc;
  --shadow-sm: 0 6px 16px rgba(17, 22, 34, .06);
  --shadow-lg: 0 24px 60px rgba(17, 22, 34, .15);
  /* Spacing (échelle modulaire base 12px) */
  --gap-xs: 4px;
  --gap-sm: 8px;
  --gap-base: 12px;
  --gap-md: 16px;
  --gap-lg: 18px;
  --gap-xl: 22px;
  /* Rayons NOUVEAUX (on garde --radius-sm:12px existant, non touché) */
  --radius-xs: 8px;
  --radius-md: 12px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-pill: 999px;
  /* Motion */
  --transition-fast: 0.12s ease;
  --transition-normal: 0.14s ease;
  --transition-slow: 0.25s ease;
}

/* ====================== PAGE JEUX (CSS-only, scopé .game-card.gx) ====================== */
/* Override de tokens en thème sombre — UNIQUEMENT à l'intérieur de .game-card.gx, ne
   fuit pas vers Web/Cloud. Les règles visuelles existantes (.game-card.gx … plus haut)
   restent en place ; ce bloc ne fait qu'exposer les variables du design system aux
   composants génériques éventuels rendus dans une carte de jeu. */
.game-card.gx {
  --accent: #7c5cff;
  --accent-soft: rgba(124, 92, 255, .12);
  --accent-muted: #c3b4ff;
  --ok: #34e29a;
  --ok-soft: rgba(52, 226, 154, .14);
  --red: #ff5d6c;
  --red-soft: rgba(255, 93, 108, .08);
  --amber: #ffb454;
  --amber-soft: rgba(255, 180, 84, .12);
  --cyan: #22d3ee;
  --panel-soft: rgba(255, 255, 255, .03);
  --ink: #e6edf6;
  --muted: #8a96b3;
  --shadow: 0 0 0 1px rgba(52, 226, 154, .12), inset 0 0 40px rgba(0, 0, 0, .6);
  --glow-purple: 0 0 16px rgba(124, 92, 255, .3);
  --glow-cyan: 0 0 16px rgba(34, 211, 238, .25);
  --glow-green: 0 0 18px rgba(52, 226, 154, .4);
}

/* ============ COMPOSANTS PARTAGÉS — SCOPÉS Web (.webx2) + Cloud (.cloudx) ============ */
/* .card-head, .kpi*, .pill.status-*, .gauge : utilisés par les markups Web & Cloud refaits.
   Scopés pour ne jamais toucher les autres pages. */
.webx2 .card-head,
.cloudx .card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--gap-base);
  flex-wrap: wrap;
}

/* KPI tiles + grid (bare .kpi/.kpi-grid : premiers consommateurs = ces pages) */
.webx2 .kpi-grid,
.cloudx .kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--gap-base);
}
.webx2 .kpi,
.cloudx .kpi {
  background: var(--panel-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 11px 13px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.webx2 .kpi-label,
.cloudx .kpi-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.webx2 .kpi-value,
.cloudx .kpi-value { font-size: 16px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.webx2 .kpi-sub,
.cloudx .kpi-sub { font-size: 10px; color: var(--muted); }

/* Pills statut (scopés) */
.webx2 .pill,
.cloudx .pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 11px;
  border-radius: var(--radius-pill);
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
  background: var(--panel-soft);
  color: var(--muted);
  border: 1px solid var(--border);
}
.webx2 .pill.status-live,
.cloudx .pill.status-live { background: var(--ok-soft); color: #0a7f43; border-color: rgba(16, 185, 129, .3); }
.webx2 .pill.status-dns_ok,
.webx2 .pill.status-provisioning { background: #e7f7ec; color: #0a7f43; border-color: rgba(16, 185, 129, .2); }
.webx2 .pill.status-error,
.cloudx .pill.status-error { background: var(--red-soft); color: #8b3a3a; border-color: rgba(224, 86, 79, .3); }
.webx2 .pill.status-pending,
.webx2 .pill.status-dns_pending,
.cloudx .pill.status-pending { background: var(--amber-soft); color: #8a6100; border-color: rgba(199, 119, 0, .3); }
.webx2 .pill.status-info,
.cloudx .pill.status-info { background: var(--accent-soft); color: #4338ca; border-color: rgba(91, 80, 224, .2); }
.webx2 .pill.status-disabled,
.cloudx .pill.status-disabled { background: #f1f1f4; color: #6b7280; border-color: transparent; }

/* Jauge (Cloud quota) */
.cloudx .gauge {
  height: 10px;
  border-radius: 6px;
  background: var(--border);
  overflow: hidden;
  border: 1px solid var(--border);
}
.cloudx .gauge > div {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), #5b50e0);
  border-radius: 6px;
  transition: width var(--transition-slow);
}

/* Boutons variantes — SCOPÉS (la prod a déjà .btn/.btn.primary/.btn.green/.btn.ghost
   globaux ; on n'ajoute QUE .danger et un .ghost cohérent à l'intérieur des 2 pages). */
.webx2 .btn.danger,
.cloudx .btn.danger {
  background: transparent;
  border-color: #f0c8c2;
  color: #c0392b;
}
.webx2 .btn.danger:hover:not(:disabled),
.cloudx .btn.danger:hover:not(:disabled) {
  background: #dc2626;
  border-color: #dc2626;
  color: #fff;
}
.webx2 .btn.ghost,
.cloudx .btn.ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--border);
}
.webx2 .btn.ghost:hover:not(:disabled),
.cloudx .btn.ghost:hover:not(:disabled) {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-soft);
}

/* ============================ PAGE CLOUD (scopé .cloudx) ============================ */
/* Carte cloud refaite — classe dédiée .cloudx-card (et non bare .card global) */
.cloudx .cloudx-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: var(--gap-xl);
  display: flex;
  flex-direction: column;
  gap: var(--gap-base);
  margin-bottom: var(--gap-md);
  transition: border-color var(--transition-normal), box-shadow var(--transition-normal), transform var(--transition-normal);
}
.cloudx-banner {
  background: linear-gradient(135deg, #1e1b4b 0%, #4f46e5 60%, #6d28d9 100%);
  color: #fff;
  border-radius: var(--radius-xl);
  padding: 22px 24px;
  box-shadow: 0 18px 44px rgba(79, 70, 229, .26);
  margin: 4px 0 16px;
}
.cloudx-banner strong { color: #fff; }
/* La page Cloud réutilise .cloud-file / .cloud-tree-* / .cloud-drop / .cloud-ov / .cloud-ctx
   déjà définis plus haut dans ce fichier — conservés tels quels (rétro-compat). */

/* ---------- Dashboard Cloud enterprise (carte à onglets .cdash) ---------- */
/* La section devient un "dashboard" : header de synthèse + KPIs, barre d'onglets
   pleine largeur, corps de panneaux. Calqué sur .wdash (page Web) mais scopé .cloudx. */
.cloudx.cdash {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow);
  padding: 0;
  overflow: hidden;
}

/* En-tête de synthèse (titre + sous-texte + KPIs) */
.cloudx .cdash-head {
  padding: 22px 24px 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: linear-gradient(135deg, #f7f7fe 0%, #f3f1fd 100%);
  border-bottom: 1px solid var(--border);
}
.cloudx .cdash-head-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.cloudx .cdash-title h2 { margin: 4px 0 6px; }
.cloudx .cdash-sub { margin: 0; font-size: 13px; line-height: 1.5; color: var(--muted); max-width: 60ch; }
.cloudx .cdash-sub b { color: var(--ink); }
.cloudx .cdash-kpis { grid-template-columns: repeat(4, 1fr); }

/* Barre d'onglets */
.cloudx .cdash-tabs {
  display: flex; gap: 2px; flex-wrap: wrap;
  padding: 0 14px;
  background: var(--panel-soft);
  border-bottom: 1px solid var(--border);
}
.cloudx .cdash-tab {
  border: none; background: transparent;
  padding: 12px 14px; font-size: 13px; font-weight: 700;
  color: var(--muted); cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color .14s ease, border-color .14s ease;
  white-space: nowrap;
}
.cloudx .cdash-tab:hover { color: var(--ink); }
.cloudx .cdash-tab.active { color: var(--accent); border-bottom-color: var(--accent); }

/* Corps + panneaux */
.cloudx .cdash-body { padding: 18px 20px 20px; }
.cloudx .cdash-panel { display: flex; flex-direction: column; gap: var(--gap-base); }
.cloudx .cdash-panel[hidden] { display: none; }

/* Panneau "appel à l'action" (ex. pas d'abonnement, dans l'onglet Mes fichiers) */
.cloudx .cdash-cta-panel {
  background: var(--panel-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 20px;
  display: flex; flex-direction: column; gap: 10px; align-items: flex-start;
}
.cloudx .cdash-cta-panel h4 { margin: 0; font-size: 15px; color: var(--ink); }
.cloudx .cdash-cta-panel p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--muted); }
.cloudx .cdash-cta-panel[hidden] { display: none; }

/* Onglet Sécurité & infos : grille de cartes + note */
.cloudx .cdash-sec-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap-md); }
.cloudx .cdash-sec-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 18px 20px;
  display: flex; flex-direction: column; gap: 6px;
}
.cloudx .cdash-sec-ico { font-size: 26px; line-height: 1; }
.cloudx .cdash-sec-card h4 { margin: 2px 0 0; font-size: 15px; color: var(--ink); }
.cloudx .cdash-sec-card p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--muted); }
.cloudx .cdash-sec-card p b { color: var(--ink); }
.cloudx .cdash-sec-note {
  margin-top: var(--gap-md);
  background: linear-gradient(135deg, #1e1b4b 0%, #4f46e5 60%, #6d28d9 100%);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 18px 22px;
  box-shadow: 0 14px 36px rgba(79, 70, 229, .22);
}
.cloudx .cdash-sec-note strong { color: #fff; display: block; margin-bottom: 4px; font-size: 15px; }
.cloudx .cdash-sec-note p { margin: 0; font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, .9); }

/* Responsive (scopé Cloud) */
@media (max-width: 900px) {
  .cloudx .cdash-kpis { grid-template-columns: repeat(2, 1fr); }
  .cloudx .cdash-tabs { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
}
@media (max-width: 640px) {
  .cloudx .cdash-kpis { grid-template-columns: repeat(2, 1fr); }
  .cloudx .cdash-sec-grid { grid-template-columns: 1fr; }
  .cloudx .cdash-head, .cloudx .cdash-body { padding-left: 14px; padding-right: 14px; }
}

/* ====================== PAGE WEB (scopé .webx2 — refonte cartes) ====================== */
/* Hero : on garde la version existante .webx-hero (gradient sombre déjà stylé plus haut).
   Carte de site refaite : structure .web-site-card.active / .card-head / kpi / gallery. */
.webx2 .web-site-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: var(--gap-base);
  position: relative;
  overflow: hidden;
  margin-bottom: 16px;
}
.webx2 .web-site-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), #7c3aed);
}
.webx2 .web-site-card.suspended::before { background: var(--red); }
.webx2 .web-card-id h3 { margin: 0 0 6px; font-size: 17px; font-weight: 700; color: var(--ink); }
.webx2 .web-pills { display: flex; gap: 8px; flex-wrap: wrap; }

/* Galerie templates (collapsible) */
.webx2 .web-gallery {
  background: var(--panel-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
}
.webx2 .web-gallery > summary {
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  user-select: none;
  padding: 6px 0;
  list-style: none;
}
.webx2 .web-gallery > summary::-webkit-details-marker { display: none; }
.webx2 .web-gallery > summary::before {
  content: '▶ ';
  color: var(--muted);
  font-weight: 600;
  font-size: 12px;
  display: inline-block;
  transition: transform 0.14s ease;
  width: 12px;
}
.webx2 .web-gallery[open] > summary::before { transform: rotate(90deg); }
.webx2 .summary-main { font-weight: 600; color: var(--ink); font-size: 14px; }
.webx2 .summary-sub { font-size: 12px; margin-left: auto; }
.webx2 .web-starters { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 12px; }

/* Sélecteur de type */
.webx2 .web-type-selector {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px;
  background: var(--panel-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.webx2 .web-type-selector label { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 200px; }
.webx2 .web-type-selector .label { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.webx2 .web-type-selector select { padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-xs); font-size: 13px; background: var(--panel); color: var(--ink); cursor: pointer; flex: 1; min-width: 150px; }
.webx2 .web-type-selector select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(91, 80, 224, .14); outline: none; }
.webx2 .web-soon { font-size: 11.5px; color: #0a7f43; background: var(--ok-soft); border: 1px solid rgba(16, 185, 129, .2); border-radius: var(--radius-pill); padding: 4px 11px; white-space: nowrap; }

/* Panneau runtime (sombre) */
.webx2 .web-runtime-panel {
  background: #0e1016;
  border: 1px solid #232838;
  border-radius: var(--radius-lg);
  color: #e6edf3;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: var(--gap-base);
}
.webx2 .web-rt-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.webx2 .web-rt-header h4 { margin: 0; font-size: 14px; color: #e6edf3; }
.webx2 .web-rt-status { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.webx2 .web-rt-config { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 12px 0; }
.webx2 .web-rt-config .field { display: flex; flex-direction: column; gap: 6px; }
.webx2 .web-rt-config .field label { font-size: 12px; font-weight: 600; color: #9a96a3; text-transform: uppercase; letter-spacing: .04em; }
.webx2 .web-rt-config input,
.webx2 .web-rt-config select { padding: 8px 10px; border: 1px solid #2a3142; border-radius: 7px; background: #11131a; color: #e6edf3; font-size: 13px; font-family: inherit; }
.webx2 .web-rt-config input:focus,
.webx2 .web-rt-config select:focus { border-color: #34e29a; box-shadow: 0 0 0 3px rgba(52, 226, 154, .15); outline: none; }
.webx2 .web-rt-buttons { margin-top: 12px; gap: 10px; }

/* Bloc DNS refait */
.webx2 .web-dns {
  border-radius: var(--radius-md);
  padding: 14px;
  margin: 12px 0;
  font-size: 13px;
  line-height: 1.6;
}
.webx2 .web-dns.success { background: var(--ok-soft); border: 1px solid rgba(16, 185, 129, .2); color: #0a7f43; }
.webx2 .web-dns.pending { background: #fffaf0; border: 1px solid rgba(199, 119, 0, .2); color: #555a72; }
.webx2 .web-dns.info { background: var(--panel-soft); border: 1px solid var(--border); color: var(--ink); }
.webx2 .web-dns.warning { background: #fbeaea; border: 1px solid rgba(224, 86, 79, .2); color: #8b3a3a; }
.webx2 .web-dns-instruction { font-weight: 600; margin-bottom: 10px; }
.webx2 .web-dns-records { display: grid; gap: 8px; margin: 12px 0; background: rgba(255, 255, 255, .5); padding: 10px; border-radius: var(--radius-xs); }
.webx2 .web-dns-rec { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.webx2 .rec-label { font-weight: 600; min-width: 60px; }
.webx2 .rec-value { display: flex; align-items: center; gap: 8px; font-family: ui-monospace, monospace; }
.webx2 .rec-value code { background: rgba(0, 0, 0, .1); padding: 2px 6px; border-radius: 4px; font-size: 12px; user-select: all; }
.webx2 .btn-copy { border: none; background: transparent; cursor: pointer; padding: 2px 6px; border-radius: 4px; transition: background 0.14s ease; font-size: 14px; }
.webx2 .btn-copy:hover { background: rgba(91, 80, 224, .1); }
.webx2 .web-dns-status { font-weight: 600; margin-top: 10px; color: inherit; }

/* Zone d'upload refaite */
.webx2 .web-upload-zone { display: flex; flex-direction: column; gap: 12px; margin: 12px 0; }
.webx2 .cloud-drop-icon { font-size: 32px; line-height: 1; margin-bottom: 8px; }
.webx2 .cloud-drop-text { font-size: 14px; color: var(--ink); font-weight: 500; margin-bottom: 10px; }
.webx2 .cloud-drop-text b { color: var(--accent); }
.webx2 .cloud-drop-buttons { display: flex; gap: 10px; justify-content: center; margin-top: 10px; flex-wrap: wrap; }
.webx2 .web-files-tree { display: flex; flex-direction: column; gap: 6px; }

/* Actions (primaire + secondaires) — legacy, conservé pour rétro-compat */
.webx2 .web-actions { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border); }
.webx2 .web-actions-primary { display: flex; gap: 10px; }
.webx2 .web-actions-primary .btn { flex: 1; }
.webx2 .web-actions-secondary { display: flex; gap: 10px; flex-wrap: wrap; }
.webx2 .web-actions-secondary .btn { flex: 0 1 auto; }

/* ====================== DASHBOARD HÉBERGEUR (carte à onglets .wdash) ====================== */
/* La carte passe en layout "dashboard" : header collé en haut, barre d'onglets pleine largeur,
   corps de panneau. On annule le gap/padding hérités de .web-site-card pour un rendu net. */
.webx2 .web-site-card.wdash { padding: 0; gap: 0; overflow: hidden; }

/* En-tête compact (domaine + pills + Voir le site + KPIs, toujours visible) */
.webx2 .wdash-head { padding: 18px 20px 14px; display: flex; flex-direction: column; gap: 14px; }
.webx2 .wdash-head .card-head { align-items: center; }
.webx2 .wdash-kpis { grid-template-columns: repeat(4, 1fr); }

/* Barre d'onglets */
.webx2 .wdash-tabs {
  display: flex; gap: 2px; flex-wrap: wrap;
  padding: 0 14px;
  background: var(--panel-soft);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.webx2 .wdash-tab {
  border: none; background: transparent;
  padding: 12px 14px; font-size: 13px; font-weight: 700;
  color: var(--muted); cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color .14s ease, border-color .14s ease;
  white-space: nowrap;
}
.webx2 .wdash-tab:hover { color: var(--ink); }
.webx2 .wdash-tab.active { color: var(--accent); border-bottom-color: var(--accent); }

/* Corps + panneaux */
.webx2 .wdash-body { padding: 18px 20px 20px; }
.webx2 .wdash-panel { display: flex; flex-direction: column; gap: var(--gap-base); }
.webx2 .wdash-panel[hidden] { display: none; }

/* Barre d'actions rapides (dans les panneaux) */
.webx2 .wdash-quick { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.webx2 .wdash-quick .btn.primary { flex: 0 0 auto; }

/* Hôte des bases de données (reçoit #webDbSection déplacé) */
.webx2 .wdash-db-host { min-height: 20px; }
.webx2 .wdash-db-host .web-db-panel { margin: 0; }

/* Panneaux "appel à l'action" (SFTP / Backups / Stats : ouvrent une modale) */
.webx2 .wdash-cta-panel {
  background: var(--panel-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 20px;
  display: flex; flex-direction: column; gap: 10px; align-items: flex-start;
}
.webx2 .wdash-cta-panel h4 { margin: 0; font-size: 15px; color: var(--ink); }
.webx2 .wdash-cta-panel p { margin: 0; font-size: 13px; line-height: 1.5; }

/* Responsive (scopé) */
@media (max-width: 900px) {
  .webx2 .kpi-grid, .cloudx .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .webx2 .wdash-kpis { grid-template-columns: repeat(2, 1fr); }
  .webx2 .web-rt-config { grid-template-columns: 1fr; }
  .webx2 .web-actions-secondary { flex-direction: column; }
  .webx2 .web-actions-secondary .btn { width: 100%; }
  .webx2 .wdash-tabs { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
}
@media (max-width: 640px) {
  .webx2 .kpi-grid, .cloudx .kpi-grid { grid-template-columns: 1fr; }
  .webx2 .wdash-kpis { grid-template-columns: repeat(2, 1fr); }
  .webx2 .web-actions-primary { flex-direction: column; }
  .webx2 .web-actions-primary .btn { width: 100%; }
  .webx2 .wdash-head, .webx2 .wdash-body { padding-left: 14px; padding-right: 14px; }
}
/* Certificats d'irréparabilité — rubrique déverrouillée par dossier client */
.client-certificates-page .section-head{align-items:flex-start;gap:24px}
.client-certificates-page .section-head p{margin:.45rem 0 0;max-width:760px;color:var(--muted,#6b7280);line-height:1.6}
.client-certificates-list{display:grid;gap:14px;margin-top:22px}
.client-certificate-card{position:relative;display:grid;grid-template-columns:58px minmax(0,1fr) minmax(210px,auto);align-items:center;gap:20px;padding:22px;border:1px solid rgba(176,119,76,.28);background:linear-gradient(135deg,rgba(255,255,255,.94),rgba(246,241,234,.86));box-shadow:0 14px 34px rgba(31,26,22,.07);overflow:hidden}
.client-certificate-card::before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:#b6774c}
.client-certificate-card.is-ready::before{background:#20875a}.client-certificate-card.is-locked::before{background:#c07b23}.client-certificate-card.is-preparing::before{background:#748091}
.client-certificate-icon{width:52px;height:52px;display:grid;place-items:center;border:1px solid rgba(176,119,76,.3);background:#181b18;color:#e4a578;font-size:1.25rem}
.client-certificate-copy h3{margin:.25rem 0 .3rem;font-size:1.25rem}.client-certificate-copy>p{margin:0;color:#687078}
.client-certificate-meta{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:12px;font-size:.85rem}.client-certificate-meta span{color:#66707a}.client-certificate-meta strong{color:#1c2521}
.client-certificate-action{display:flex;min-width:215px;flex-direction:column;align-items:stretch;gap:8px;text-align:center}.client-certificate-action .btn{justify-content:center}.client-certificate-action small{max-width:260px;color:#687078;line-height:1.35}
.client-certificate-wait{display:flex;align-items:center;justify-content:center;gap:9px;padding:12px;border:1px solid rgba(91,104,119,.25);background:rgba(91,104,119,.07);font-weight:700;color:#4d5864}
.client-certificate-legal{display:flex;gap:12px;align-items:flex-start;margin-top:18px;padding:15px 17px;border:1px solid rgba(176,119,76,.22);background:rgba(176,119,76,.06);color:#5d554e}.client-certificate-legal p{margin:0;line-height:1.55}
@media(max-width:760px){.client-certificate-card{grid-template-columns:46px minmax(0,1fr);padding:18px;gap:14px}.client-certificate-icon{width:44px;height:44px}.client-certificate-action{grid-column:1/-1;min-width:0}.client-certificate-action small{max-width:none}.client-certificates-page .section-head{display:block}.client-certificates-page .live-chip{display:inline-flex;margin-top:12px}}