/* Server-manager — feuille unique du bundle (règle 17) : classes .sm-*, jetons du socle, clair et sombre.
   Ne redéfinit aucun composant du ui-bundle (.card, .btn, .badge…). */

/* Valeur à copier (commande, clé, URL) : bloc monospace sur fond nuit + bouton copier. */
.sm-terminal { display: flex; align-items: stretch; overflow: hidden; border-radius: var(--radius-item); background: var(--color-night); }
.sm-terminal > pre { flex: 1; min-width: 0; margin: 0; padding: .5rem .75rem; color: var(--color-on-night); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8125rem; white-space: pre-wrap; word-break: break-all; background: transparent; }
.sm-terminal > .btn { border-radius: 0; color: var(--color-on-night); }

/* Texte technique en ligne (chemin, nom de service, IP) dans une carte ou un tableau. */
.sm-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8125rem; }

/* ── Lot serveur (parc, fiche : système, capacité, paquets, jobs, runner) ───────────────────────────── */
/* Menu des environnements d'un serveur dans le parc : peut compter une centaine d'entrées, il défile. */
.sm-server-envs .menu { width: min(22rem, calc(100vw - 2rem)); max-height: min(26rem, 70dvh); overflow-y: auto; }
/* Jauge d'occupation (RAM, swap, disque, partition) : pavé discret sur le fond de tuile. */
.sm-server-gauge { min-width: 0; padding: .875rem 1rem; border-radius: var(--radius-tile); background: var(--color-tile); }
/* ── fin du lot serveur ── */
/* ── Lot pages de service (MySQL, PHP-FPM, Elasticsearch, Postfix, SSHD…) ── */
/* Contenu d'un fichier de configuration : monospace sur fond de tuile, défilement borné. */
.sm-svc-code { margin: 0; max-height: 32rem; overflow: auto; padding: .75rem 1rem; border-radius: var(--radius-item); background: var(--color-tile); color: var(--color-ink-2); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .75rem; line-height: 1.5; white-space: pre; }
/* Jauge (.progress du socle) dont le remplissage vient de la variable --sm-svc-pct posée sur la jauge. */
.sm-svc-meter > span { width: var(--sm-svc-pct, 0%); }
/* Libellé « utilisé / total · % » au-dessus d'une jauge. */
.sm-svc-meter-label { display: flex; justify-content: space-between; gap: .5rem; margin-bottom: .25rem; color: var(--color-muted); font-size: .75rem; }
/* Grand chiffre d'un indicateur dans une carte (taux de succès OPcache…), coloré par le ton de la carte. */
.sm-svc-figure { font-size: 1.75rem; font-weight: 700; line-height: 1.1; letter-spacing: -.02em; color: var(--tone, var(--color-ink)); }
/* Fichier de configuration repliable dans une carte (une version PHP-FPM, Elasticsearch…) : <details> natif. */
.sm-svc-file { border-top: 1px solid var(--color-line); }
.sm-svc-file > summary { display: flex; align-items: center; gap: .5rem; padding: .75rem 0; cursor: pointer; list-style: none; font-size: .8125rem; font-weight: 600; }
.sm-svc-file > summary::-webkit-details-marker { display: none; }
.sm-svc-file > summary > small { color: var(--color-muted); font-weight: 400; }
.sm-svc-file > summary > .sm-svc-file-chevron { display: inline-block; margin-left: auto; color: var(--color-muted); transition: transform .15s; }
.sm-svc-file[open] > summary > .sm-svc-file-chevron { transform: rotate(180deg); }
.sm-svc-file > .sm-svc-code { margin-bottom: .75rem; }
/* ── fin du lot pages de service ── */

/* ── Lot hébergements et tableaux de bord transverses (.sm-hosting-*, .sm-dash-*, .sm-backup-*) ── */
/* Tuile de dimension (santé du parc) : chiffre qui appelle une action, en gros, coloré par son ton. */
.sm-dash-figure { display: flex; align-items: baseline; flex-wrap: wrap; gap: .375rem; margin: .375rem 0 .125rem; }
.sm-dash-figure > strong { font-size: 1.75rem; font-weight: 700; line-height: 1.1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--tone, var(--color-ink)); }
.sm-dash-figure.tone-neutral > strong { color: var(--color-ink); }
.sm-dash-figure > span { font-size: .875rem; font-weight: 600; color: var(--color-ink-2); }
.sm-dash-dim .card-sub { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .375rem; }
.sm-dash-spark { min-height: 3rem; margin-top: .25rem; }
/* Graphique d'une carte de tendance. */
.sm-dash-chart { min-height: 18.75rem; }
/* Indicateurs chiffrés en tête d'un tableau de bord (bande stat-strip dans une carte). */
.sm-dash-kpis .stat-strip-item > strong { font-size: 1.625rem; }
/* Part d'un total (RAM, disque) : barre fine dont la longueur vient de --sm-share. */
.sm-dash-share { display: flex; align-items: center; justify-content: flex-end; gap: .5rem; margin-top: .25rem; font-size: .6875rem; color: var(--color-muted); }
.sm-dash-share > span { display: block; width: 3.75rem; height: .25rem; border-radius: 999px; background: var(--color-tile-2); overflow: hidden; }
.sm-dash-share > span > span { display: block; height: 100%; width: var(--sm-share, 0%); border-radius: inherit; background: var(--tone, var(--color-accent)); }
/* Jauge pleine largeur (RAM PHP mesurée face à la RAM du serveur). */
.sm-dash-meter { height: .375rem; border-radius: 999px; background: var(--color-tile-2); overflow: hidden; }
.sm-dash-meter > span { display: block; height: 100%; width: var(--sm-share, 0%); border-radius: inherit; background: var(--tone, var(--color-accent)); }
/* Valeur technique en cellule, alignée sur les chiffres. */
.sm-dash-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.sm-dash-num.tone-danger, .sm-dash-num.tone-warning { color: var(--tone); font-weight: 600; }

/* Environnements d'un compte : une ligne par environnement (icône, nom/domaine, badges). */
.sm-hosting-envs { display: grid; gap: .375rem; margin: 0; padding: 0; list-style: none; font-size: .8125rem; }
.sm-hosting-envs > li, .sm-hosting-envs > li > a { display: flex; align-items: center; flex-wrap: wrap; gap: .25rem .5rem; min-width: 0; color: var(--color-ink-2); }
.sm-hosting-envs > li:not(:has(> a)) { flex-wrap: nowrap; }
.sm-hosting-envs > li:not(:has(> a)) > strong { flex-shrink: 0; }
.sm-hosting-envs > li > a:hover strong { color: var(--color-link); }
.sm-hosting-envs i { color: var(--tone, var(--color-muted)); }
.sm-hosting-envs strong { color: var(--color-ink); font-weight: 600; overflow-wrap: anywhere; }

/* Table des comptes par serveur : colonne « Compte » de même largeur d'une carte à l'autre. */
.sm-hosting-table > thead > tr > th:first-child { width: 16rem; }
/* Téléphone : chaque compte devient un bloc (compte + réglage sur une ligne, environnements dessous), sans défilement latéral. */
@media (max-width: 767px) {
  .sm-hosting-table > thead { display: none; }
  .sm-hosting-table > tbody > tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .sm-hosting-table > tbody > tr { border-bottom: 1px solid var(--color-table-line); }
  .sm-hosting-table > tbody > tr > td { border-bottom: 0; }
  .sm-hosting-table > tbody > tr > td:nth-child(2) { grid-column: 1 / -1; grid-row: 2; padding: 0 1rem .75rem 4.25rem; }
}

/* Pastilles des dernières exécutions d'une sauvegarde (succès, échec, en cours) : chacune ouvre son détail. */
.sm-backup-dots { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .3125rem; }
.sm-backup-dot { width: .875rem; height: .875rem; padding: 0; border: 0; border-radius: 999px; background: var(--tone, var(--color-gray-300)); cursor: pointer; transition: transform .15s; }
.sm-backup-dot:hover, .sm-backup-dot:focus-visible { transform: scale(1.25); }
.sm-backup-dot.tone-neutral { background: var(--color-gray-300); }
/* Journal (échecs, historique) : une ligne par exécution. */
.sm-backup-log { display: grid; gap: .875rem; }
.sm-backup-log-row { display: flex; align-items: flex-start; gap: .75rem; min-width: 0; }
.sm-backup-log-row > .sm-backup-dot { flex: none; margin-top: .25rem; cursor: default; }
.sm-backup-log-row > div { flex: 1; min-width: 0; }
.sm-backup-cause { display: block; margin-top: .25rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-danger); }
.sm-backup-month { margin: 1rem 0 .375rem; font-size: .6875rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--color-muted); }
.sm-backup-month:first-child { margin-top: 0; }
.sm-backup-run { display: flex; align-items: center; gap: .75rem; width: 100%; padding: .5rem .25rem; border: 0; border-radius: var(--radius-item); background: transparent; color: var(--color-ink-2); font-size: .8125rem; text-align: left; cursor: pointer; }
.sm-backup-run:hover { background: var(--color-row-hover); }
.sm-backup-run > .sm-backup-dot { flex: none; width: .5rem; height: .5rem; cursor: inherit; }
.sm-backup-run > span:nth-child(2) { flex: 1; min-width: 0; }
/* Partiels génériques de l'hébergement (Generic/*) : état marche/arrêt, valeur technique longue dans un repère. */
.sm-status { display: inline-flex; align-items: center; gap: .5rem; font-size: .8125rem; font-weight: 600; color: var(--color-ink); }
.sm-status.tone-neutral { font-weight: 500; color: var(--color-muted); }
.sm-status-dot { width: .4375rem; height: .4375rem; border-radius: 999px; background: var(--tone, var(--color-gray-300)); }
.sm-status.tone-neutral .sm-status-dot { background: var(--color-gray-300); }
.sm-info-mono { overflow-wrap: anywhere; }
/* ── fin du lot hébergements ── */

/* ── Lot services B : Apache, CrowdSec, guides d'installation (.sm-apache-*, .sm-crowdsec-*, .sm-guide-*) ── */
/* Fichier de configuration brut (apache2.conf) : défilement borné dans sa carte repliable. */
.sm-apache-code { max-height: 32rem; margin: 0; padding: .75rem 1rem; overflow: auto; border-radius: var(--radius-item); background: var(--color-tile); color: var(--color-ink); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .78125rem; line-height: 1.5; white-space: pre; }
.sm-apache-policy { display: grid; gap: .625rem; }
.sm-apache-policy > p { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0; }
.sm-apache-vhost { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
/* Chemins de la configuration : deux colonnes dès que la carte est large. */
@media (min-width: 64rem) {
    .sm-apache-paths { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; }
    .sm-apache-paths > .detail:nth-child(2) { border-top: 0; }
}

/* CrowdSec : baseline (états, écarts, listes de badges), inventaire des scénarios. */
.sm-crowdsec-baseline { display: grid; gap: 1rem; }
.sm-crowdsec-state { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; color: var(--color-muted); font-size: .8125rem; }
.sm-crowdsec-state .fa-circle-check { color: var(--color-success); }
.sm-crowdsec-state > .btn { margin-left: auto; }
.sm-crowdsec-notice-action { margin-top: .625rem; }
.sm-crowdsec-tags { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .25rem; }
td > .sm-crowdsec-tags { margin-top: 0; }
.sm-crowdsec-baseline .notice p { margin: .5rem 0 0; }
.sm-crowdsec-gap { margin-top: 1rem; }
.sm-crowdsec-name { display: inline-flex; align-items: center; gap: .5rem; overflow-wrap: anywhere; }
.sm-crowdsec-alias { display: block; margin-top: .125rem; color: var(--color-muted); font-size: .71875rem; }
.sm-crowdsec-override { color: var(--color-primary-500); }
.sm-crowdsec-switch { display: inline-flex; align-items: center; gap: .5rem; margin-left: auto; font-size: .8125rem; color: var(--color-ink-2); cursor: pointer; }
.sm-crowdsec-col-name { min-width: 15rem; }
.sm-crowdsec-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; }
textarea.sm-crowdsec-yaml { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .78125rem; }

/* Guides d'installation / désinstallation (panneau) : étapes numérotées, chacune sa commande à copier. */
.sm-guide-intro { margin-bottom: 1rem; color: var(--color-ink-2); font-size: .8125rem; line-height: 1.55; }
.sm-guide-intro > p { margin: 0; }
.sm-guide-intro code, .sm-guide-step-hint code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .75rem; padding: .0625rem .25rem; border-radius: .25rem; background: var(--color-tile); }
.sm-guide-steps { display: grid; gap: 1.25rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.sm-guide-step { display: grid; gap: .5rem; min-width: 0; }
.sm-guide-step-title { display: flex; align-items: center; gap: .625rem; margin: 0; color: var(--color-ink); font-size: .84375rem; font-weight: 600; line-height: 1.4; }
.sm-guide-step-num { display: inline-flex; flex: none; align-items: center; justify-content: center; min-width: 1.5rem; height: 1.5rem; padding: 0 .375rem; border-radius: 62.4375rem; background: var(--color-primary-500); color: var(--color-on-night); font-size: .71875rem; font-weight: 700; }
.sm-guide-steps.is-danger .sm-guide-step-num { background: var(--color-danger); }
.sm-guide-step-hint { margin: 0; color: var(--color-muted); font-size: .78125rem; }
.sm-guide-doc { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem; margin: 1rem 0 0; color: var(--color-muted); font-size: .78125rem; }

/* ── Fiche environnement (lot environnements) : résumé, barre « Appliquer », réglages PHP. ─────────────────── */
/* Sélecteur « autres environnements » : déclencheur pleine largeur, menu borné et défilant. */
.sm-env-switch { display: flex; }
.sm-env-switch-trigger { flex: 1; min-width: 0; justify-content: flex-start; }
.sm-env-switch-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: start; }
.sm-env-switch-menu { width: min(20rem, calc(100vw - 2rem)); max-height: 26rem; overflow-y: auto; overscroll-behavior: contain; }
/* Ligne libellé / valeur avec un bouton copier à droite. */
.detail.sm-env-copyable { grid-template-columns: 2.1875rem minmax(0, 1fr) auto; }
.detail.sm-env-copyable strong { overflow-wrap: anywhere; }
/* Dimensionnement PHP-FPM : profil choisi (bouton pressé), curseur, jauge de RAM. */
.sm-env-profiles { display: grid; gap: .5rem; }
.sm-env-profiles > .choice-tile { gap: .875rem; padding: .75rem 1rem; border-radius: var(--radius-item); background: transparent; text-align: start; }
.sm-env-profiles > .choice-tile > i { font-size: 1.375rem; }
.sm-env-profiles > .choice-tile strong { font-size: .875rem; line-height: 1.4; }
.sm-env-profiles > .choice-tile small { display: block; font-size: .75rem; line-height: 1.4; }
.sm-env-profiles > .choice-tile[aria-pressed="true"] { border-style: solid; border-color: var(--color-primary-500); background: var(--color-accent-soft); }
.sm-env-range { width: 100%; accent-color: var(--color-accent); }
.sm-env-sizing { display: grid; gap: .75rem; margin-top: 1rem; }
.sm-env-sizing-figures { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; padding: .75rem 1rem; border-radius: var(--radius-item); background: var(--color-tile); font-size: .8125rem; }
/* Barre .progress dont la largeur vient du gabarit (variable CSS) : part de RAM du pool. */
.sm-env-share > span { width: var(--sm-env-share); }
.sm-env-sizing-warning { color: var(--color-danger); font-size: .8125rem; font-weight: 600; }
.sm-env-scale { display: flex; justify-content: space-between; color: var(--color-muted); font-size: .75rem; }
/* ── fin du lot environnements ── */

/* ── Suivi des tâches (jobs et recettes) : tableau de bord, historique, fiche, panneau, dock ──────────────── */
/* Ligne de tâche ou de recette (dock, tiroir, activité du tableau de bord) : pastille d'état, libellé, repères, badge. */
.sm-job-list { display: grid; }
.sm-job-list > * + * { border-top: 1px solid var(--color-line); }
.sm-job-item { display: flex; align-items: center; gap: .75rem; width: 100%; min-width: 0; padding: .75rem 0; color: var(--color-ink); text-align: left; background: none; border: 0; cursor: pointer; }
.sm-job-item:hover .sm-job-item-title { color: var(--color-link); }
.sm-job-item:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: var(--radius-item); }
.sm-job-item-body { display: grid; flex: 1; gap: .25rem; min-width: 0; }
.sm-job-item-title { overflow: hidden; font-size: .875rem; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 767px) { .sm-job-item-title { white-space: normal; overflow-wrap: anywhere; } }
.sm-job-item-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .625rem; color: var(--color-muted); font-size: .75rem; }
.sm-job-item-meta i { margin-right: .25rem; }
.sm-job-item-end { display: flex; flex: none; align-items: center; gap: .5rem; color: var(--color-muted); }

/* Jauge d'avancement : segments réussis puis échoués (largeur dans --sm-w), compteur à droite. */
.sm-job-meter { display: flex; align-items: center; gap: .625rem; min-width: 0; }
.sm-job-meter > .progress { flex: 1; min-width: 4rem; }
.sm-job-meter > .progress > span { width: var(--sm-w, 0%); border-radius: 0; }
.sm-job-meter > small { flex: none; color: var(--color-muted); font-size: .75rem; font-weight: 600; font-variant-numeric: tabular-nums; }

/* Pastille d'une légende ou d'une répartition (ton du socle dans --tone). */
.sm-job-dot { display: inline-block; flex: none; width: .5rem; height: .5rem; border-radius: 62.4375rem; background: var(--tone, var(--color-muted)); }
.sm-job-legend { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; color: var(--color-muted); font-size: .75rem; }
.sm-job-legend > span { display: inline-flex; align-items: center; gap: .5rem; }

/* Sortie structurée : une console teinte « night » du socle (sombre en thème clair, claire en thème sombre, comme .sm-terminal), une commande repliable par ligne. */
.sm-job-console { min-width: 0; overflow: hidden; border-radius: var(--radius-item); background: var(--color-night); color: var(--color-on-night); }
.sm-job-console-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .625rem 1rem; border-bottom: 1px solid color-mix(in srgb, var(--color-on-night) 12%, transparent); font-size: .75rem; font-weight: 600; letter-spacing: .02em; opacity: .85; }
.sm-job-console-head i { margin-right: .375rem; }
.sm-job-cmd + .sm-job-cmd { border-top: 1px solid color-mix(in srgb, var(--color-on-night) 12%, transparent); }
.sm-job-cmd > summary { display: flex; align-items: center; gap: .75rem; padding: .75rem 1rem; list-style: none; cursor: pointer; }
.sm-job-cmd > summary::-webkit-details-marker { display: none; }
.sm-job-cmd > summary:hover { background: color-mix(in srgb, var(--color-on-night) 6%, transparent); }
.sm-job-cmd-status { flex: none; color: var(--tone); }
.sm-job-cmd-title { flex: 1; min-width: 0; overflow: hidden; font-size: .8125rem; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.sm-job-cmd-title small { margin-right: .5rem; font-weight: 500; opacity: .6; }
.sm-job-cmd-meta { display: flex; flex: none; align-items: center; gap: .5rem; font-size: .75rem; font-variant-numeric: tabular-nums; opacity: .8; }
.sm-job-cmd-chevron { flex: none; font-size: .75rem; opacity: .6; transition: rotate .15s; }
.sm-job-cmd[open] .sm-job-cmd-chevron { rotate: 180deg; }
.sm-job-cmd-body { display: grid; gap: .5rem; padding: 0 1rem 1rem; }
.sm-job-cmd-line { display: flex; align-items: flex-start; gap: .5rem; padding: .5rem .75rem; border-radius: var(--radius-item); background: color-mix(in srgb, var(--color-on-night) 7%, transparent); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .75rem; word-break: break-all; }
.sm-job-cmd-line > span { color: var(--color-success); user-select: none; }
.sm-job-cmd-line > code { flex: 1; min-width: 0; white-space: pre-wrap; }
.sm-job-cmd-line > .btn { flex: none; margin: -.25rem -.5rem -.25rem 0; color: inherit; }
.sm-job-cmd-out { max-height: var(--sm-output-max, 22rem); margin: 0; padding: .75rem; overflow: auto; border-radius: var(--radius-item); background: color-mix(in srgb, var(--color-black) 25%, transparent); color: var(--color-on-night); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .75rem; line-height: 1.55; white-space: pre-wrap; word-break: break-word; }
.sm-job-cmd-empty { margin: 0; font-size: .75rem; font-style: italic; opacity: .6; }

/* Étapes d'une recette, regroupées par phase (les étapes d'une même phase partent en parallèle). */
.sm-job-steps { display: grid; grid-template-columns: minmax(0, 1fr); gap: .5rem; margin: 0; padding: 0; list-style: none; }
.sm-job-phase { display: flex; align-items: center; gap: .5rem; margin-top: .75rem; color: var(--color-muted); font-size: .75rem; font-weight: 600; }
.sm-job-phase:first-child { margin-top: 0; }
.sm-job-phase::after { flex: 1; height: 1px; background: var(--color-line); content: ""; }
.sm-job-step { overflow: hidden; border-radius: var(--radius-item); background: var(--color-tile); box-shadow: inset 3px 0 0 var(--tone, var(--color-line)); }
.sm-job-step-head { display: flex; align-items: center; gap: .75rem; padding: .625rem .875rem; list-style: none; }
.sm-job-step-head::-webkit-details-marker { display: none; }
summary.sm-job-step-head { cursor: pointer; }
summary.sm-job-step-head:hover .sm-job-item-title { color: var(--color-link); }
.sm-job-step-icon { flex: none; width: 1.25rem; color: var(--tone, var(--color-muted)); text-align: center; }
.sm-job-step[open] .sm-job-cmd-chevron { rotate: 180deg; }
.sm-job-step-body { padding: 0 .875rem .875rem; }

/* Dock des tâches : bas droit de l'écran (hors du menu latéral), pastilles des dernières tâches lancées à la main au-dessus du bouton. */
.sm-job-dock { position: fixed; inset-inline-end: 1rem; inset-block-end: 1rem; z-index: 40; }
/* Espace réservé sous le contenu quand le dock est présent : le bouton ne recouvre jamais le bas de page (fin de liste, boutons d'action). */
body:has(.sm-job-dock) .stamina-content { padding-block-end: 5rem; }
.sm-job-dock-stack { display: flex; flex-direction: column; align-items: flex-end; gap: .5rem; }
.sm-job-dock-item { display: flex; align-items: center; gap: .625rem; width: 15rem; max-width: calc(100vw - 3rem); padding: .5rem .75rem; border: 0; border-radius: var(--radius-tile); background: var(--color-surface); box-shadow: var(--shadow-card), 0 0 0 1px var(--color-line), inset 3px 0 0 var(--tone); color: var(--color-ink); text-align: left; cursor: pointer; }
.sm-job-dock-item:hover { background: var(--color-tile); }
.sm-job-dock-item > i { flex: none; color: var(--tone); }
.sm-job-dock-item .sm-job-item-body { gap: .125rem; }
.sm-job-dock-item .sm-job-item-title { font-size: .78125rem; }
.sm-job-dock-item .progress { height: .25rem; }
.sm-job-fab { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border: 0; border-radius: 62.4375rem; background: var(--color-night); box-shadow: var(--shadow-card), 0 0 0 1px var(--color-line); color: var(--color-on-night); font-size: 1.0625rem; cursor: pointer; }
.sm-job-fab.is-active { background: var(--color-primary-500); color: var(--color-on-accent); }
.sm-job-fab:hover { filter: brightness(1.1); }
.sm-job-fab-count { position: absolute; inset-block-start: -.25rem; inset-inline-end: -.25rem; min-width: 1.25rem; height: 1.25rem; padding: 0 .3125rem; border-radius: 62.4375rem; background: var(--color-surface); box-shadow: 0 0 0 2px var(--color-primary-500); color: var(--color-primary-500); font-size: .6875rem; font-weight: 700; line-height: 1.25rem; text-align: center; }
@media (max-width: 767px) {
    .sm-job-dock-item { display: none; }
}

/* Certificats par domaine (onglet Web d'un environnement, panneau Domaines) : une ligne par certificat ou par domaine,
   badges qui passent à la ligne, menu d'actions calé en haut à droite. */
.sm-cert-row { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; padding: .75rem 0; border-top: 1px solid var(--color-line); }
.sm-cert-row:first-child { border-top: 0; padding-top: 0; }
.sm-cert-row:last-of-type { padding-bottom: 0; }
.sm-cert-row-main { display: flex; flex-direction: column; gap: .375rem; min-width: 0; }
.sm-cert-name { overflow-wrap: anywhere; color: var(--color-ink); font-weight: 600; }
.sm-cert-name:hover { color: var(--color-link); }
.sm-cert-badges { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem .5rem; min-width: 0; overflow-wrap: anywhere; }

/* Fiche serveur et pages de service : une carte repliable posée dans une pile (record-stack, record-layout-main, grille à gap)
   n'ajoute pas sa marge basse du socle, l'espacement vient déjà du gap. */
.record-stack > .disclosure-card, .record-layout-main > .disclosure-card, .record-layout-main .grid > .disclosure-card { margin-block-end: 0; }

/* Choix riches des panneaux d'environnement (confinement, profil, validation ACME, domaines couverts) : une ligne pleine largeur par option,
   libellé et description empilés, au lieu de pastilles à hauteur fixe où la description déborde. */
.pills.sm-choice-list { flex-direction: column; flex-wrap: nowrap; gap: .375rem; margin-block-end: .5rem; }
.pills.sm-choice-list > label { height: auto; min-height: 2.25rem; padding: .5rem .875rem .5rem .6875rem; border-radius: var(--radius-tile); align-items: flex-start; }
.pills.sm-choice-list > label::before, .pills.sm-choice-list > label > i { margin-block-start: .1875rem; }
.pills.sm-choice-list > label > span { display: grid; gap: .125rem; line-height: 1.25; }

/* ===== Indicateurs en cartes du tableau de bord (pages du parc) =====
   La mosaïque du tableau de bord garde un pied pour son rangement ; sur une page, la pile (record-stack) espace déjà. */
.sm-kpi-board { padding-bottom: 0; }

/* ===== Tableau des comptes d'hébergement (_accounts_table) =====
   Compte : pastille + nom alignés ; sites : une ligne par environnement, domaine en clair, environnement dessous. */
.sm-account-cell { display: flex; align-items: center; gap: .75rem; min-width: 0; color: inherit; text-decoration: none; }
.sm-site-line { display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-width: 0; padding: .125rem 0; color: inherit; text-decoration: none; }
.sm-site-line + .sm-site-line { margin-top: .5rem; }
.sm-site-line:hover strong { color: var(--color-primary); }
/* Colonnes fixes : les tableaux de comptes de /hostings (un par serveur) s'alignent d'une carte à l'autre. */
.sm-accounts-table { table-layout: fixed; }
.sm-accounts-table th:first-child { width: 40%; }
.sm-accounts-table th:last-child { width: 4rem; }
.sm-accounts-table td { vertical-align: middle; }
/* Mobile : les indicateurs carrés vont deux par ligne (le tableau de bord les empile un par un, trop haut pour une page),
   sans dessin ni pastille, qui chevaucheraient le constat à cette largeur. */
@container dc-board (max-width: 559px) {
    .sm-kpi-board .dc-grid { --cols: 4; --row: 9.5rem; }
    .sm-kpi-board :is(.dc-drawing, .dc-done, .dc-badge) { display: none; }
}

/* ===== Fiche environnement : carte « à appliquer », identité sans pastilles, onglets Web et PHP « façon hébergeur » =====
   Les couleurs viennent des jetons du socle (clair et sombre) ; aucune animation sous prefers-reduced-motion. */

/* Carte « N changements à appliquer » : une ligne, l'icône pulse, la fusée lance « Appliquer ». */
.sm-apply { padding: .875rem 1rem; }
.sm-apply-row { display: flex; align-items: center; gap: .75rem; }
.sm-apply-pulse { position: relative; display: grid; flex: none; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: color-mix(in srgb, var(--color-accent) 14%, transparent); color: var(--color-accent); font-size: .875rem; }
.sm-apply-pulse::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--color-accent); opacity: 0; animation: sm-apply-ring 2.2s ease-out infinite; }
.sm-apply-pulse i { animation: sm-apply-up 2.2s ease-in-out infinite; }
.sm-apply.is-syncing .sm-apply-pulse::after, .sm-apply.is-syncing .sm-apply-pulse i { animation: none; }
.sm-apply-copy { flex: 1; min-width: 0; line-height: 1.25; }
.sm-apply-copy b { display: block; color: var(--color-ink); font-size: .84375rem; }
.sm-apply-copy small { display: block; overflow: hidden; color: var(--color-muted); font-size: .75rem; text-overflow: ellipsis; white-space: nowrap; }
@keyframes sm-apply-ring { 0% { transform: scale(.8); opacity: .55; } 100% { transform: scale(1.5); opacity: 0; } }
@keyframes sm-apply-up { 0%, 100% { transform: translateY(1px); } 50% { transform: translateY(-2px); } }
@media (prefers-reduced-motion: reduce) {
    .sm-apply-pulse::after, .sm-apply-pulse i { animation: none; }
}

/* Identité : une ligne de texte discrète à la place des pastilles ; état des services : un point coloré + texte gris. */
.sm-idline { margin: -.25rem 0 0; color: var(--color-muted); font-size: .8125rem; }
.sm-dot-state { display: inline-flex; align-items: center; gap: .375rem; color: var(--color-muted); font-size: .75rem; white-space: nowrap; }
.sm-dot { flex: none; width: .4375rem; height: .4375rem; border-radius: 50%; background: var(--color-line); }
.sm-dot.is-success { background: var(--color-success); }
.sm-dot.is-warning { background: var(--color-warning); }
.sm-dot.is-danger { background: var(--color-danger); }

/* Carte dont le corps est fait de lignes bord à bord. */
.card-body:has(> .sm-flush) { padding: 0; }

/* Indicateur d'enregistrement (posé sur le champ par stamina-ui-autosave : is-saving, is-saved, is-error). */
.sm-saved { display: inline-flex; align-items: center; gap: .3125rem; color: var(--color-success); font-size: .75rem; white-space: nowrap; opacity: 0; transition: opacity .2s; pointer-events: none; }
.sm-saved-spin { display: none; width: .75rem; height: .75rem; border: 1.5px solid var(--color-line); border-top-color: var(--color-accent); border-radius: 50%; animation: sm-saved-turn .7s linear infinite; }
.is-saving > .sm-saved, .is-saving > .sm-set-ctl > .sm-saved, .is-saving > .sm-sizing-head > .sm-saved { color: var(--color-muted); opacity: 1; }
.is-saving .sm-saved-spin { display: inline-block; }
.is-saving .sm-saved .fa-check, .is-saving .sm-saved span { display: none; }
.is-saved > .sm-saved, .is-saved > .sm-set-ctl > .sm-saved, .is-saved > .sm-sizing-head > .sm-saved { opacity: 1; }
.is-error > .sm-saved, .is-error > .sm-set-ctl > .sm-saved { opacity: 0; }
@keyframes sm-saved-turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .sm-saved { transition: none; }
    .sm-saved-spin { animation: none; border-right-color: var(--color-accent); }
}

/* Erreur d'enregistrement ou de validation (.hint.is-error du thème, ou message du contrôleur d'autosave), sous la ligne. */
:is(.sm-set, .sm-domain, .sm-toggle) > :is(.hint, .field-inline__error) { flex-basis: 100%; margin: 0; color: var(--color-danger); font-size: .75rem; }

/* Domaines : une ligne par domaine (cadenas, nom, état en clair, choix HTTPS à droite). */
.sm-domain { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .875rem; padding: .875rem 1.25rem; border-top: 1px solid var(--color-line); }
.sm-flush > :first-child { border-top: 0; }
.sm-domain-ico { display: grid; flex: none; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: .625rem; font-size: .875rem; }
.sm-domain-ico.is-secure { background: color-mix(in srgb, var(--color-success) 12%, transparent); color: var(--color-success); }
.sm-domain-ico.is-plain { background: color-mix(in srgb, var(--color-warning) 14%, transparent); color: var(--color-warning); }
.sm-domain-copy { flex: 1; min-width: 12rem; }
.sm-domain-name { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .5rem; color: var(--color-ink); font-size: .9375rem; font-weight: 650; overflow-wrap: anywhere; }
.sm-domain-name a { color: inherit; }
.sm-domain-name a:hover { color: var(--color-link); }
.sm-tag { padding: .0625rem .5rem; border: 1px solid var(--color-line); border-radius: 62.4375rem; color: var(--color-muted); font-size: .6875rem; font-weight: 600; }
.sm-domain-meta { margin-top: .0625rem; color: var(--color-muted); font-size: .8125rem; }
.sm-domain-warn { color: var(--color-warning); }
.sm-pick-wrap { position: relative; flex: none; }
.sm-pick { display: inline-flex; align-items: center; justify-content: space-between; gap: .625rem; min-width: 11.5rem; padding: .4375rem .75rem; border: 1px solid var(--color-line); border-radius: .625rem; background: var(--color-surface); color: var(--color-ink); font-size: .8125rem; font-weight: 600; }
.sm-pick:hover { border-color: var(--color-muted); }
.sm-pick i { color: var(--color-muted); font-size: .6875rem; }
.sm-pick-menu { width: min(21rem, calc(100vw - 2rem)); }
.sm-pick-menu .menu-link { align-items: flex-start; white-space: normal; text-align: start; }
.sm-pick-menu .menu-link:disabled { opacity: .5; cursor: not-allowed; }
.sm-pick-menu .menu-title small { display: block; margin-top: .0625rem; color: var(--color-muted); font-weight: 400; }
.sm-pick-on { margin-inline-start: auto; color: var(--color-accent); }

/* Pied de la carte Domaines : interrupteurs à libellé court. */
.sm-foot { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 2rem; padding: 1rem 1.25rem; border-top: 1px solid var(--color-line); background: color-mix(in srgb, var(--color-tile) 50%, transparent); }
.sm-toggle { display: flex; flex-wrap: wrap; align-items: center; gap: .625rem; }
.sm-toggle label { display: inline-flex; align-items: center; gap: .75rem; color: var(--color-ink); font-size: .84375rem; font-weight: 600; cursor: pointer; }
.sm-toggle label small { display: block; color: var(--color-muted); font-size: .75rem; font-weight: 400; }

/* Réglage « façon hébergeur » : titre et phrase courte à gauche, contrôle à droite. */
.sm-set { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem 1.5rem; padding: 1rem 1.25rem; border-top: 1px solid var(--color-line); }
.sm-flush > :first-child > .sm-set:first-child { border-top: 0; }
.sm-set-copy { flex: 1 1 14rem; min-width: 0; }
.sm-set-copy b { display: block; color: var(--color-ink); font-size: .875rem; font-weight: 650; }
.sm-set-copy small { display: block; margin-top: .125rem; color: var(--color-muted); font-size: .78125rem; }
.sm-set-ctl { display: flex; flex: none; align-items: center; gap: .625rem; }
.sm-set-ctl :is(.input, .select, .choice-widget) { min-width: 13rem; }
.sm-set-ctl .sm-mono { font-size: .8125rem; }
.sm-set.is-area { align-items: flex-start; }
.sm-set.is-area .sm-set-ctl { flex: 1 1 18rem; max-width: 30rem; }
.sm-set.is-area .sm-set-ctl .textarea { width: 100%; }
.sm-set-link { width: 100%; color: inherit; text-align: start; cursor: pointer; }
.sm-set-link:hover { background: var(--color-row-hover); }
.sm-set-link > .fa-chevron-right { color: var(--color-muted); }
.sm-confirm { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; padding: .75rem 1.25rem; border-top: 1px solid var(--color-line); background: var(--color-warning-soft); color: var(--color-ink); font-size: .8125rem; }
.sm-confirm[hidden] { display: none; }
.sm-confirm > span { flex: 1 1 16rem; }
.sm-set > .fa-lock { color: var(--color-muted); }
/* Section repliable dans une carte (réglages fins, avancé, vhost) : le résumé est une ligne, les réglages dessous. */
.sm-fold { display: block; padding: 0; }
.sm-fold > summary { padding: .875rem 1.25rem; color: var(--color-muted); font-size: .8125rem; cursor: pointer; }
.sm-fold > summary:hover { color: var(--color-ink); }
.sm-fold[open] > summary { color: var(--color-ink); }
.sm-fold > .sm-flush { border-top: 1px solid var(--color-line); }
.sm-fold > pre { margin: 0 1.25rem 1rem; }
/* Dimensionnement du pool (onglet PHP) : profils et curseur avant les réglages fins. */
.sm-sizing { display: grid; gap: .75rem; padding: 1.25rem; }
.sm-sizing-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.sm-sizing .sm-env-sizing { margin-top: .5rem; }
@media (max-width: 700px) {
    .sm-set { flex-direction: column; align-items: stretch; gap: .5rem; }
    .sm-set-copy { flex: none; }
    .sm-set-ctl { flex: none; justify-content: space-between; flex-direction: row-reverse; }
    .sm-set-ctl :is(.input, .select, .choice-widget) { min-width: 0; width: 100%; }
    .sm-set-link { flex-direction: row; align-items: center; }
    .sm-set.is-area .sm-set-ctl { max-width: none; flex-direction: column; align-items: stretch; }
    .sm-domain-copy { flex-basis: calc(100% - 3.5rem); }
    .sm-pick-wrap { flex: 1; }
    .sm-pick { width: 100%; }
}