/* Espace client sur téléphone (640 px et moins) : tableau de bord, commande, facturation,
 * panel d'un serveur, profil, support. Chargée après panel.css sur chaque page de l'espace
 * client. Rien ne change au-dessus de 640 px.
 *
 * Même principe que les pages publiques (site-mobile.css) : sur un petit écran, l'essentiel
 * d'abord (mes serveurs, le prix, l'action), le reste condensé ou retiré.
 * Les pages chargent leur propre <style> après cette feuille : d'où les !important.
 */
@media(max-width:640px){

  /* ══ Tableau de bord ══ */
  /* Barre du haut : la salutation ne tient pas à côté des boutons */
  .topbar-dash .topbar-dash-title{display:none!important}
  .topbar-dash .btn{white-space:nowrap}
  /* Mes serveurs d'abord, puis les chiffres, les suggestions et les commandes */
  .content:has(> #serversSection){display:flex;flex-direction:column}
  .content > #serversSection{order:1;margin-bottom:16px}
  .content > #statsGrid{order:2;margin-bottom:16px!important}
  .content > #noticeZone{order:3;margin-bottom:16px!important}
  .content:has(> #serversSection) > .orders-card{order:4}
  /* Chiffres : libellés entiers, sans les pictogrammes */
  #statsGrid .stat-card{padding:14px!important}
  #statsGrid .stat-card-top{margin-bottom:8px!important}
  #statsGrid .stat-card-icon{display:none!important}
  #statsGrid .stat-card-label{white-space:normal!important;line-height:1.3}
  /* Suggestions (double authentification, options) : une ligne chacune */
  #noticeZone{gap:8px!important}
  #noticeZone .notice{flex-wrap:nowrap!important;align-items:center;gap:10px;padding:10px 12px}
  #noticeZone .notice-ico{width:32px;height:32px}
  #noticeZone .notice-desc{display:none}
  #noticeZone .notice-title{font-size:13px}
  #noticeZone .notice-btn{width:auto!important;height:30px;padding:0 10px;margin-right:14px}
  /* Commandes récentes : service, montant et statut */
  #ordersTable th:nth-child(3),#ordersTable td:nth-child(3),
  #ordersTable th:nth-child(5),#ordersTable td:nth-child(5){display:none}
  #ordersTable{min-width:0!important;width:100%}
  #ordersTable th,#ordersTable td{padding-left:12px;padding-right:12px}

  /* ══ Facturation ══ */
  /* Abonnements : une carte par serveur (le tableau de sept colonnes cachait le prix et les boutons) */
  #subscriptionsList .table-wrap{overflow:visible}
  #subscriptionsList table,#subscriptionsList tbody{display:block;width:100%;min-width:0}
  #subscriptionsList thead{display:none}
  #subscriptionsList tbody tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 12px;align-items:center;padding:14px 16px;border-bottom:1px solid var(--border)}
  #subscriptionsList tbody tr:last-child{border-bottom:0}
  #subscriptionsList tbody td{display:block;padding:0!important;border:0!important;min-width:0}
  #subscriptionsList tbody td:nth-child(1){grid-column:1;grid-row:1;font-size:14.5px}
  #subscriptionsList tbody td:nth-child(5){grid-column:2;grid-row:1;text-align:right;white-space:nowrap}
  #subscriptionsList tbody td:nth-child(2){grid-column:1;grid-row:2;font-size:12.5px}
  #subscriptionsList tbody td:nth-child(6){grid-column:2;grid-row:2;justify-self:end}
  #subscriptionsList tbody td:nth-child(3){grid-column:1/-1;grid-row:3;font-size:12.5px;color:var(--fg-3)}
  #subscriptionsList tbody td:nth-child(4){display:none}
  #subscriptionsList tbody td:nth-child(7){grid-column:1/-1;grid-row:4;margin-top:8px}
  #subscriptionsList tbody td:nth-child(7)>div{flex-wrap:wrap}
  #subscriptionsList tbody td:nth-child(7) .btn{flex:1 1 auto;justify-content:center;text-align:center}
  /* Répartitions par formule et par jeu : retirées, le détail est dans la liste au-dessus */
  #usageSection{display:none!important}
  /* Factures : numéro, date, montant */
  #invoiceList table th:nth-child(2),#invoiceList table td:nth-child(2){display:none}

  /* ══ Commande ══ */
  /* Étapes : pastilles serrées, sans traits, pour ne pas passer sous le choix de langue */
  .steps-bar{padding-left:58px!important}
  .steps-bar .step-sep{display:none!important}
  .steps-bar .step-item{gap:6px;margin-right:6px}
  .steps-bar .step-num{width:20px;height:20px;font-size:10.5px}
  .step-pane .step-sub{margin-bottom:18px!important}
  /* Type de service : trois cartes courtes (pictogramme, nom, une phrase) */
  .type-grid{gap:10px!important;margin-bottom:18px!important}
  .type-card{display:grid!important;grid-template-columns:auto minmax(0,1fr);column-gap:14px;align-items:start;padding:16px!important}
  .type-card .type-card-icon{grid-row:1/span 2;width:44px;height:44px;margin:0!important}
  .type-card h3{font-size:16px!important;margin:0 0 4px!important;padding-right:30px}
  .type-card p{font-size:13px!important;line-height:1.5!important;margin:0!important}
  .type-card .type-card-features{display:none!important}
  .type-card .type-check{top:14px!important;right:14px!important}
  /* Formules : prix et ressources, sans la liste de ce qui est inclus partout */
  .plan-pick-grid{gap:12px!important;margin-bottom:18px!important}
  .plan-pick{padding:20px 16px 16px!important}
  .plan-pick .plan-tier-label{margin-bottom:8px!important}
  .plan-pick .plan-price{font-size:28px!important}
  .plan-pick .plan-sep{margin:12px 0!important}
  .plan-pick .plan-specs-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:6px!important;margin-bottom:0!important}
  .plan-pick .plan-spec-tile{padding:6px 8px!important}
  .plan-pick .plan-spec-tile-k{font-size:8.5px;letter-spacing:.06em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .plan-pick .plan-spec-tile-v{font-size:12px!important;white-space:nowrap}
  .plan-pick .plan-feats{display:none!important}
  /* La carte de l'essai gratuit garde sa liste : c'est elle qui explique l'offre */
  .trial-card .plan-specs-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  /* Barre du bas : flèche seule pour revenir, le prix au milieu */
  .wizard-nav{gap:10px}
  .wizard-nav #btnBack{font-size:0!important;gap:0!important;padding:0 12px!important;min-width:42px;height:38px;justify-content:center}
  .wizard-nav .nav-mid{flex:1}
  .wizard-nav .nav-total{font-size:12.5px;justify-content:center}

  /* ══ Panel d'un serveur ══ */
  /* Onglet Abonnement : formule en cours */
  .sb-hero-in{padding:16px!important;gap:12px!important}
  .sb-hero-cover{width:96px!important;height:46px!important}
  .sb-hero-total{margin-left:0!important;text-align:left!important;width:100%}
  .sb-sec{margin:20px 0 10px!important}
  /* Formules : nom, prix et ressources en étiquettes, sans les barres */
  .sb-plans{gap:10px!important}
  .sb-plan{padding:14px!important;gap:8px!important}
  .sb-res{flex-direction:row!important;flex-wrap:wrap;gap:6px!important;padding-top:10px!important}
  .sb-r{display:inline-flex!important;align-items:center;gap:5px!important;padding:3px 8px;border-radius:980px;background:var(--subtle);border:1px solid var(--border)}
  .sb-r svg,.sb-r .sb-bar{display:none!important}
  .sb-r b{order:-1}
  /* Carte « changer de jeu » et cartes voisines : le texte passe sous l'image au lieu d'être écrasé */
  .sb-card{flex-wrap:wrap!important;gap:12px!important;padding:14px!important}
  .sb-card>div{flex:1 1 160px;min-width:0}
  .sb-card>.btn,.sb-card>button,.sb-card>a.btn{flex:1 1 100%;justify-content:center}
  .sb-addon{padding:14px!important}

  /* ══ Profil ══ */
  .pf-kpi-k{white-space:normal!important;line-height:1.25}
}