/*
 * Surcharges ASN — ne jamais modifier les fichiers Tabler (static/vendor/tabler/).
 *
 * Les variables --asn-primary et --asn-primary-rgb sont définies dans base.html à
 * partir de BRAND_PRIMARY_COLOR (context processor apps.core.context_processors.branding).
 * Ce fichier les répercute sur les variables Tabler.
 */

:root {
  --tblr-primary: var(--asn-primary);
  --tblr-primary-rgb: var(--asn-primary-rgb);
  --tblr-brand: var(--asn-primary);
  --tblr-primary-darken: color-mix(in oklab, var(--asn-primary), #000 10%);
  --tblr-primary-lt: color-mix(in oklab, var(--asn-primary) 10%, transparent);
  --tblr-primary-text-emphasis: color-mix(in oklab, var(--asn-primary), #000 40%);
  --tblr-primary-bg-subtle: color-mix(in oklab, var(--asn-primary) 20%, #fff);
  --tblr-primary-border-subtle: color-mix(in oklab, var(--asn-primary) 40%, #fff);
  --tblr-link-color: var(--asn-primary);
  --tblr-link-color-rgb: var(--asn-primary-rgb);
  --tblr-link-hover-color: color-mix(in oklab, var(--asn-primary), #000 15%);
  --tblr-focus-ring-color: rgba(var(--asn-primary-rgb), 0.25);
}

.asn-brand-name {
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.navbar-vertical .navbar-brand .badge {
  vertical-align: middle;
}

.navbar-vertical .nav-link.disabled {
  opacity: 0.5;
}

.asn-qr-code {
  background: #fff;
  border: 1px solid var(--tblr-border-color);
  border-radius: var(--tblr-border-radius);
  padding: 0.5rem;
  max-width: 100%;
  height: auto;
}

.asn-backup-codes code {
  font-size: 1rem;
  letter-spacing: 0.05em;
}

.navbar-brand-image {
  max-height: 2.5rem;
  width: auto;
}

/* Logo : page de connexion (~72 px de haut) et barre latérale (~180 px de large). */
.asn-auth-logo {
  height: 72px;
  width: auto;
  max-width: 100%;
}

.asn-sidebar-logo {
  display: block;
  width: 180px;
  max-width: 100%;
  height: auto;
}

/* Sans BRAND_LOGO_DARK : logo standard sur une pastille blanche lisible sur fond sombre. */
.asn-logo-pill {
  display: inline-block;
  background: #fff;
  border-radius: 0.75rem;
  padding: 0.375rem 0.75rem;
  line-height: 0;
}

.asn-logo-pill .asn-sidebar-logo {
  width: 156px;
}

.asn-graph {
  position: relative;
  height: 220px;
}

/* Console noVNC (D4) : écran noir, canvas mis à l'échelle par noVNC (scaleViewport). */
.asn-console-screen {
  height: 70vh;
  min-height: 320px;
  background: #000;
  overflow: hidden;
}
.asn-console-screen:fullscreen {
  height: 100vh;
}

/* Collage dans la console (D4-bis) : zone de capture du raccourci Ctrl+V, focalisable mais invisible. */
.asn-console-offscreen {
  position: fixed;
  top: 0;
  left: -10000px;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.asn-console-help > summary {
  cursor: pointer;
  list-style: none;
}

/* Paiements Stripe (E1) */
.asn-stripe-element { min-height: 3rem; }
.asn-mock-3ds {
  position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center;
  background: rgba(24, 36, 51, 0.6);
}
.asn-mock-3ds .card { max-width: 26rem; width: 100%; }

/* ==========================================================================
 * Tunnel de commande (E1-bis) : catalogue, configuration, récapitulatif, paiement, suivi.
 * Couleurs dérivées de --asn-primary (marque) ; textes sombres sur fonds clairs (contraste AA).
 * ========================================================================== */
:root {
  --asn-ink: #0f172a;
  --asn-muted: #52606d;             /* 6,3:1 sur blanc */
  --asn-success-ink: #17652b;       /* 7:1 sur blanc, 6,3:1 sur #e7f5ea */
  --asn-success-soft: #e7f5ea;
  --asn-warning-ink: #8a4b00;       /* 6,1:1 sur #fff4e0 */
  --asn-warning-soft: #fff4e0;
  --asn-danger-ink: #a61b1b;
  --asn-danger-soft: #fdecec;
  --asn-primary-ink: color-mix(in oklab, var(--asn-primary), #000 25%);
  --asn-primary-soft: color-mix(in oklab, var(--asn-primary) 8%, #fff);
  --asn-primary-deep: color-mix(in oklab, var(--asn-primary), #0b1220 55%);
  --asn-radius: 0.875rem;
  --asn-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 8px 24px rgba(15, 23, 42, 0.06);
  --asn-shadow-strong: 0 2px 4px rgba(15, 23, 42, 0.06), 0 16px 40px rgba(15, 23, 42, 0.12);
}

/* --- En-tête du catalogue ------------------------------------------------- */
.asn-hero {
  position: relative;
  overflow: hidden;
  border-radius: calc(var(--asn-radius) + 0.25rem);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem;
  padding: 1.25rem 1.5rem;
  color: #fff;
  background:
    radial-gradient(60rem 20rem at 110% -40%, rgba(255, 255, 255, 0.18), transparent 60%),
    radial-gradient(30rem 16rem at -10% 130%, rgba(255, 255, 255, 0.10), transparent 60%),
    linear-gradient(135deg, var(--asn-primary-deep), color-mix(in oklab, var(--asn-primary), #0b1220 30%));
}
.asn-hero-text { min-width: 0; }
.asn-hero-title { font-size: clamp(1.25rem, 1rem + 0.9vw, 1.75rem); font-weight: 700; line-height: 1.2; margin: 0 0 0.25rem; color: #fff; }
.asn-hero-subtitle { font-size: 0.9375rem; max-width: 44rem; margin: 0; color: rgba(255, 255, 255, 0.92); }
/* Arguments généraux (ORDER_ARGUMENTS) en pastilles dans l'en-tête : blanc sur fond sombre (≥ 9:1). */
.asn-hero-arguments { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.asn-hero-argument {
  display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.3125rem 0.75rem; border-radius: 2rem;
  font-size: 0.8125rem; color: #fff; background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.18);
}
.asn-hero-argument strong { font-weight: 600; }
.asn-argument-text { display: block; color: var(--asn-muted); font-size: 0.8125rem; }
.asn-argument-icon {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; border-radius: 0.75rem;
  background: var(--asn-primary-soft); color: var(--asn-primary-ink); font-size: 1.375rem;
}

.asn-section-eyebrow { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--asn-primary-ink); margin-bottom: 0.25rem; }
.asn-section-title { font-size: 1.5rem; font-weight: 700; color: var(--asn-ink); margin-bottom: 0.75rem; }

/* --- Cartes d'offre --------------------------------------------------------- */
.asn-offer {
  position: relative; height: 100%; display: flex; flex-direction: column; gap: 1rem;
  padding: 1.5rem; background: var(--tblr-bg-surface);
  border: 1px solid var(--tblr-border-color); border-radius: var(--asn-radius); box-shadow: var(--asn-shadow);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.asn-offer:hover { transform: translateY(-2px); box-shadow: var(--asn-shadow-strong); border-color: color-mix(in oklab, var(--asn-primary) 35%, var(--tblr-border-color)); }
.asn-offer.is-highlighted { border: 2px solid var(--asn-primary); box-shadow: 0 0 0 4px color-mix(in oklab, var(--asn-primary) 10%, transparent), var(--asn-shadow-strong); }
.asn-offer-badges { position: absolute; top: -0.75rem; left: 1.25rem; display: flex; gap: 0.375rem; }
.asn-badge {
  display: inline-flex; align-items: center; gap: 0.25rem; white-space: nowrap;
  font-size: 0.75rem; font-weight: 600; line-height: 1; padding: 0.375rem 0.625rem; border-radius: 2rem;
}
.asn-badge-primary { background: var(--asn-primary-deep); color: #fff; }
.asn-badge-new { background: var(--asn-success-soft); color: var(--asn-success-ink); border: 1px solid color-mix(in oklab, var(--asn-success-ink) 25%, #fff); }
/* U3 / U3-bis : offre de lancement (stockage) — bloc sous la description : badge ambre, ligne principale, mention. */
.asn-badge-launch { background: var(--asn-warning-soft); color: var(--asn-warning-ink); border: 1px solid color-mix(in oklab, var(--asn-warning-ink) 25%, #fff); }
.asn-launch-offer { display: flex; flex-direction: column; align-items: flex-start; gap: 0.375rem; margin: 0; }
.asn-launch-offer-main { margin: 0.125rem 0 0; color: var(--asn-ink); font-weight: 700; font-size: 0.9375rem; line-height: 1.4; }
.asn-launch-offer-note { margin: 0; color: var(--asn-muted); font-size: 0.8125rem; line-height: 1.4; }
/* Segments insécables : à faible largeur, la ligne se coupe après le « · », jamais au milieu d'un montant. */
.asn-launch-offer-main > span, .asn-launch-offer-note > span { white-space: nowrap; }
.asn-launch-sep { color: var(--asn-muted); font-weight: 400; }
[data-bs-theme="dark"] .asn-badge-launch {
  background: color-mix(in oklab, #f59f00 18%, transparent); color: #ffd8a8; border-color: color-mix(in oklab, #f59f00 40%, transparent);
}
[data-bs-theme="dark"] .asn-launch-offer-main { color: var(--tblr-body-color); }
[data-bs-theme="dark"] .asn-launch-offer-note, [data-bs-theme="dark"] .asn-launch-sep { color: var(--tblr-secondary); }
.asn-badge-saving { background: var(--asn-success-soft); color: var(--asn-success-ink); }
.asn-offer-name { font-size: 1.5rem; font-weight: 700; margin: 0; color: var(--asn-ink); }
.asn-offer-ref { font-size: 0.75rem; letter-spacing: 0.04em; color: var(--asn-muted); font-family: var(--tblr-font-monospace); }
/* Usage sur 2 lignes au plus (E1-quater), points de suspension à la 2e ligne ; texte complet dans title. */
.asn-offer-usage {
  margin: 0.375rem 0 0; color: var(--asn-muted); font-size: 0.875rem; line-height: 1.35;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; overflow-wrap: anywhere;
}
.asn-offer-usage-full { margin: 0.375rem 0 0; color: var(--asn-muted); font-size: 0.875rem; }
.asn-price { font-size: 2.25rem; font-weight: 700; line-height: 1; color: var(--asn-ink); letter-spacing: -0.02em; }
.asn-price-unit { color: var(--asn-muted); font-size: 0.875rem; }
.asn-price-ttc { color: var(--asn-muted); font-size: 0.8125rem; margin-top: 0.375rem; }
.asn-saving { color: var(--asn-success-ink); font-weight: 600; }
/* Specs en liste verticale (E1-ter) : une ligne par caractéristique, icône + valeur + libellé. */
.asn-specs { list-style: none; margin: 0; padding: 0.875rem 0 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.4375rem; border-top: 1px solid var(--tblr-border-color); }
/* Retrait suspendu : un libellé long passe à la ligne sous le texte, jamais sous l'icône. */
.asn-spec { position: relative; min-width: 0; padding-left: 1.75rem; font-size: 0.875rem; line-height: 1.35; }
.asn-spec .ti { position: absolute; left: 0; top: 0; width: 1.25rem; font-size: 1.125rem; line-height: 1.2; color: var(--asn-primary-ink); }
.asn-spec-value { font-weight: 600; color: var(--asn-ink); white-space: nowrap; }
.asn-spec-label { font-size: 0.8125rem; color: var(--asn-muted); min-width: 0; }
.asn-checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.375rem; font-size: 0.875rem; }
.asn-checklist li { display: flex; gap: 0.5rem; align-items: baseline; }
.asn-checklist .ti { color: var(--asn-success-ink); flex: none; }
.asn-offer-action { margin-top: auto; }
/* Place pour les badges posés sur le bord supérieur des cartes. */
.row.asn-offers { --tblr-gutter-y: 2rem; }

/* --- Visuel du stockage ------------------------------------------------------ */
.asn-drive-visual svg { display: block; width: 100%; max-width: 22rem; height: auto; margin: 0 auto; }
.asn-v-soft { fill: color-mix(in oklab, var(--asn-primary) 12%, #fff); }
.asn-v-softer { fill: color-mix(in oklab, var(--asn-primary) 20%, #fff); }
.asn-v-cloud { fill: #fff; stroke: color-mix(in oklab, var(--asn-primary) 25%, #fff); stroke-width: 2; }
.asn-v-folder-back, .asn-v-folder-tab { fill: color-mix(in oklab, var(--asn-primary), #fff 35%); }
.asn-v-folder { fill: var(--asn-primary); }
.asn-v-line { fill: rgba(255, 255, 255, 0.75); }
.asn-v-shield { fill: #1f9d55; stroke: #fff; stroke-width: 3; }
.asn-v-check { stroke: #fff; }
.asn-v-sync circle { fill: #fff; stroke: color-mix(in oklab, var(--asn-primary) 30%, #fff); stroke-width: 2; }
.asn-v-sync path { stroke: var(--asn-primary); }

/* --- Étapes et fil d'Ariane ------------------------------------------------- */
.asn-breadcrumb { font-size: 0.8125rem; }
.asn-steps { list-style: none; margin: 0; padding: 0; display: flex; counter-reset: none; }
.asn-step { position: relative; flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 0.375rem; text-align: center; color: var(--asn-muted); font-size: 0.8125rem; font-weight: 500; }
.asn-step:not(:first-child)::before {
  content: ""; position: absolute; top: 1rem; right: 50%; width: 100%; height: 2px;
  background: var(--tblr-border-color); z-index: 0;
}
.asn-step.is-done:not(:first-child)::before, .asn-step.is-active:not(:first-child)::before { background: var(--asn-primary); }
.asn-step-marker {
  position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; border-radius: 50%; font-weight: 600;
  background: var(--tblr-bg-surface); border: 2px solid var(--tblr-border-color); color: var(--asn-muted);
}
.asn-step.is-done .asn-step-marker { background: var(--asn-primary); border-color: var(--asn-primary); color: #fff; }
.asn-step.is-active .asn-step-marker { border-color: var(--asn-primary); color: var(--asn-primary-ink); box-shadow: 0 0 0 4px color-mix(in oklab, var(--asn-primary) 15%, transparent); }
.asn-step.is-active, .asn-step.is-done { color: var(--asn-ink); }
.asn-step.is-active .asn-step-label { font-weight: 700; }

/* --- Panneaux et cartes-radio ----------------------------------------------- */
.asn-panel {
  margin: 0 0 1.25rem; padding: 1.25rem 1.25rem 1.375rem; min-width: 0;
  background: var(--tblr-bg-surface); border: 1px solid var(--tblr-border-color);
  border-radius: var(--asn-radius); box-shadow: var(--asn-shadow);
}
.asn-panel-title { float: left; width: 100%; display: flex; align-items: center; gap: 0.625rem; font-size: 1rem; font-weight: 600; color: var(--asn-ink); margin-bottom: 1rem; padding: 0; }
.asn-panel-number { display: inline-flex; align-items: center; justify-content: center; width: 1.625rem; height: 1.625rem; border-radius: 50%; font-size: 0.8125rem; background: var(--asn-primary-soft); color: var(--asn-primary-ink); }

.asn-choice { position: relative; display: block; height: 100%; margin: 0; cursor: pointer; }
.asn-choice-input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.asn-choice-body {
  position: relative; height: 100%; display: flex; align-items: center; gap: 0.75rem;
  padding: 0.875rem 1rem; border: 1px solid var(--tblr-border-color); border-radius: 0.75rem;
  background: var(--tblr-bg-surface); color: var(--asn-ink);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.asn-choice:hover .asn-choice-body { border-color: color-mix(in oklab, var(--asn-primary) 45%, var(--tblr-border-color)); }
.asn-choice-input:checked + .asn-choice-body { border-color: var(--asn-primary); background: var(--asn-primary-soft); box-shadow: inset 0 0 0 1px var(--asn-primary); }
.asn-choice-input:focus-visible + .asn-choice-body { outline: 3px solid color-mix(in oklab, var(--asn-primary) 45%, transparent); outline-offset: 2px; }
.asn-choice-check {
  position: absolute; top: 0.5rem; right: 0.5rem; display: inline-flex; align-items: center; justify-content: center;
  width: 1.25rem; height: 1.25rem; border-radius: 50%; font-size: 0.8125rem;
  border: 1px solid var(--tblr-border-color); color: transparent; background: var(--tblr-bg-surface);
  transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.asn-choice-input:checked + .asn-choice-body .asn-choice-check { background: var(--asn-primary); border-color: var(--asn-primary); color: #fff; transform: scale(1.05); }
.asn-choice-icon {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem; border-radius: 0.625rem; font-size: 1.25rem;
  background: var(--tblr-bg-surface-secondary, #f6f8fb); color: var(--asn-primary-ink);
}
.asn-choice-text { display: flex; flex-direction: column; min-width: 0; padding-right: 1.25rem; }
.asn-choice-title { font-weight: 600; line-height: 1.3; }
.asn-choice-meta { font-size: 0.8125rem; color: var(--asn-muted); }
.asn-choice-cycle { flex-direction: column; align-items: flex-start; gap: 0.125rem; padding-top: 0.75rem; }
.asn-cycle-price { font-size: 1.25rem; font-weight: 700; margin-top: 0.25rem; }
.asn-cycle-price small { font-size: 0.75rem; font-weight: 500; color: var(--asn-muted); margin-left: 0.25rem; }
.asn-cycle-total { font-size: 0.75rem; color: var(--asn-muted); }
.asn-choice-cycle .asn-badge-saving { margin-top: 0.375rem; }
.asn-choice-os { flex-direction: column; text-align: center; justify-content: center; gap: 0.5rem; padding: 1rem 0.75rem; }
.asn-choice-os .asn-choice-text { padding-right: 0; align-items: center; }
.asn-choice-os .asn-choice-icon { width: 2.75rem; height: 2.75rem; font-size: 1.75rem; }
/* Couleurs d'accent des systèmes (icônes décoratives, le libellé porte l'information). */
.asn-os-debian { color: #a80030; }
.asn-os-ubuntu { color: #c7410f; }
.asn-os-windows { color: #0067b8; }
.asn-os-redhat { color: #b00; }
.asn-os-docker { color: #1d63ed; }
.asn-choice-row .asn-choice-body { padding: 0.625rem 0.875rem; }
.asn-key-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.5rem; }
.asn-choice-row, .asn-choice-row .asn-choice-body { min-width: 0; }
.asn-choice-row .asn-choice-text { flex: 1 1 auto; }
.asn-choice-row .asn-choice-meta { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.asn-inline-action { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0; border: 0; background: none; font-size: 0.8125rem; font-weight: 500; color: var(--tblr-link-color); text-decoration: none; }
.asn-inline-action:hover { text-decoration: underline; }
.asn-select-icon { padding-left: 2.5rem; }

.asn-live-feedback { min-height: 1.25rem; margin-top: 0.375rem; }
.asn-feedback { display: flex; align-items: center; gap: 0.375rem; font-size: 0.8125rem; animation: asn-fade-in 0.2s ease; }
.asn-feedback.is-valid { color: var(--asn-success-ink); }
.asn-feedback.is-invalid { color: var(--asn-danger-ink); }
.asn-feedback.is-invalid .invalid-feedback { color: inherit; }

.asn-promo { padding-block: 0.875rem; }
.asn-promo-summary { display: flex; align-items: center; gap: 0.5rem; list-style: none; cursor: pointer; font-weight: 600; color: var(--asn-primary-ink); }
.asn-promo-summary::-webkit-details-marker { display: none; }
.asn-promo-chevron { margin-left: auto; transition: transform 0.2s ease; }
.asn-promo[open] .asn-promo-chevron { transform: rotate(180deg); }

/* --- Colonne « Votre commande » et devis ------------------------------------ */
@media (min-width: 992px) {
  .asn-sticky { position: sticky; top: 1.25rem; }
}
.asn-order-card { border-radius: var(--asn-radius); box-shadow: var(--asn-shadow); border-color: var(--tblr-border-color); }
.asn-order-name { font-size: 1.25rem; font-weight: 700; color: var(--asn-ink); }
.asn-specs-inline { list-style: none; margin: 0.75rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.375rem 1rem; font-size: 0.8125rem; }
.asn-specs-inline li { display: inline-flex; align-items: center; gap: 0.25rem; }
.asn-specs-inline .ti { color: var(--asn-primary-ink); }
.asn-quote { border-top: 1px solid var(--tblr-border-color); padding: 1rem 1.25rem; transition: opacity 0.15s ease; }
.htmx-request .asn-quote, .asn-quote.htmx-request { opacity: 0.55; }
.asn-quote-lines { list-style: none; margin: 0 0 0.75rem; padding: 0; display: grid; gap: 0.625rem; font-size: 0.875rem; }
.asn-quote-lines li { display: flex; justify-content: space-between; gap: 1rem; }
.asn-quote-label { display: flex; flex-direction: column; min-width: 0; color: var(--asn-ink); }
.asn-quote-detail { font-size: 0.75rem; color: var(--asn-muted); }
.asn-quote-amount { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--asn-ink); }
.asn-quote-promo .asn-quote-amount { color: var(--asn-success-ink); font-weight: 600; }
.asn-quote-totals { margin: 0; padding-top: 0.75rem; border-top: 1px dashed var(--tblr-border-color); display: grid; gap: 0.25rem; font-size: 0.875rem; }
.asn-quote-totals div { display: flex; justify-content: space-between; gap: 1rem; }
.asn-quote-totals dt { font-weight: 400; color: var(--asn-muted); }
.asn-quote-totals dd { margin: 0; font-variant-numeric: tabular-nums; color: var(--asn-ink); }
.asn-quote-total { margin-top: 0.375rem; padding-top: 0.5rem; border-top: 1px solid var(--tblr-border-color); }
.asn-quote-total dt, .asn-quote-total dd { font-size: 1.125rem; font-weight: 700; color: var(--asn-ink); }
/* E3 — panier : avoir imputé au devis, lignes et indicateur de la barre supérieure. */
.asn-quote-credit { color: var(--asn-success-ink); }
.asn-quote-credit dt, .asn-quote-credit dd { color: var(--asn-success-ink); font-weight: 600; }
.asn-cart-lines { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 0.875rem; }
.asn-cart-line { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: flex-start; padding: 0.875rem 1rem; border: 1px solid var(--tblr-border-color); border-radius: 0.75rem; }
.asn-cart-line-main { min-width: 0; flex: 1 1 16rem; }
.asn-cart-line-side { display: flex; flex-direction: column; align-items: flex-end; gap: 0.5rem; }
.asn-cart-line-amount { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--asn-ink); }
.asn-cart-line-amount small { font-size: 0.75rem; font-weight: 400; color: var(--asn-muted); }
.asn-cart-line-actions { display: flex; gap: 0.75rem; align-items: center; }
.asn-cart-line-actions form { margin: 0; }
.asn-cart-badge { position: absolute; top: 0.125rem; right: 0; min-width: 1.05rem; height: 1.05rem; padding: 0 0.25rem; border-radius: 999px; background: var(--asn-primary); color: #fff; font-size: 0.6875rem; line-height: 1.05rem; text-align: center; font-weight: 700; }

.asn-quote-error { display: flex; gap: 0.5rem; align-items: flex-start; margin: 0 1.25rem 1rem; padding: 0.625rem 0.75rem; border-radius: 0.625rem; font-size: 0.8125rem; background: var(--asn-warning-soft); color: var(--asn-warning-ink); }
.asn-order-card .asn-order-actions { border-top: 0; padding-top: 0; }
.asn-reassurance { list-style: none; margin: 0.875rem 0 0; padding: 0; display: grid; gap: 0.375rem; font-size: 0.8125rem; color: var(--asn-muted); }
.asn-reassurance li { display: flex; align-items: center; gap: 0.5rem; }
.asn-reassurance .ti { color: var(--asn-success-ink); }

.asn-recap { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 0.5rem; }
.asn-recap li { display: grid; grid-template-columns: auto 7.5rem 1fr; align-items: baseline; gap: 0.5rem; font-size: 0.875rem; }
.asn-recap .ti { color: var(--asn-primary-ink); }
.asn-recap-label { color: var(--asn-muted); }
.asn-recap-value { font-weight: 600; color: var(--asn-ink); min-width: 0; }
.asn-total-highlight { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin: 0.5rem 0 1rem; padding: 0.875rem 1rem; border-radius: 0.75rem; background: var(--asn-primary-soft); color: var(--asn-ink); }
.asn-total-highlight strong { font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.asn-total-highlight small { font-size: 0.75rem; color: var(--asn-muted); }
.asn-cgv { padding: 0.75rem 0.875rem 0.75rem 2.5rem; border: 1px solid var(--tblr-border-color); border-radius: 0.625rem; }
.asn-assurances { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.asn-assurance { display: flex; gap: 0.75rem; padding: 1rem; border-radius: var(--asn-radius); border: 1px solid var(--tblr-border-color); background: var(--tblr-bg-surface); }
.asn-assurance > .ti { font-size: 1.5rem; color: var(--asn-primary-ink); flex: none; }
.asn-assurance strong { display: block; color: var(--asn-ink); font-size: 0.875rem; }
.asn-assurance span { display: block; color: var(--asn-muted); font-size: 0.8125rem; }
.asn-secure-pill { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.25rem 0.625rem; border-radius: 2rem; font-size: 0.75rem; font-weight: 600; background: var(--asn-success-soft); color: var(--asn-success-ink); }

/* Bandeau discret du mode test (simulation). */
.asn-test-notice {
  display: inline-flex; align-items: center; gap: 0.5rem; max-width: 100%;
  padding: 0.375rem 0.75rem; border-radius: 2rem; font-size: 0.8125rem;
  background: var(--asn-warning-soft); color: var(--asn-warning-ink); border: 1px solid color-mix(in oklab, var(--asn-warning-ink) 20%, #fff);
}
.asn-test-notice .ti { flex: none; }

/* --- Suivi de livraison ----------------------------------------------------- */
.asn-tracking { border-radius: var(--asn-radius); box-shadow: var(--asn-shadow); }
.asn-status-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 3.25rem; height: 3.25rem; border-radius: 1rem; font-size: 1.875rem; }
.asn-status-icon.is-success { background: var(--asn-success-soft); color: var(--asn-success-ink); animation: asn-pop 0.4s ease; }
.asn-status-icon.is-progress { background: var(--asn-primary-soft); color: var(--asn-primary-ink); }
.asn-status-icon.is-progress .ti { animation: asn-spin 1.1s linear infinite; }
.asn-status-icon.is-test, .asn-status-icon.is-warning { background: var(--asn-warning-soft); color: var(--asn-warning-ink); }
.asn-status-icon.is-danger { background: var(--asn-danger-soft); color: var(--asn-danger-ink); }
.asn-status-head { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 1rem; margin-bottom: 1rem; }
.asn-status-body { flex: 1 1 14rem; min-width: 0; }
.asn-status-title { font-size: 1.25rem; font-weight: 700; margin: 0 0 0.25rem; color: var(--asn-ink); }
.asn-eta { display: inline-flex; align-items: center; gap: 0.375rem; margin-top: 0.5rem; font-size: 0.8125rem; font-weight: 600; color: var(--asn-primary-ink); }
.asn-state-badge { flex: none; font-weight: 600; }
.asn-state-badge.is-success { background: var(--asn-success-soft); color: var(--asn-success-ink); }
.asn-state-badge.is-progress { background: var(--asn-primary-soft); color: var(--asn-primary-ink); }
.asn-state-badge.is-test, .asn-state-badge.is-warning { background: var(--asn-warning-soft); color: var(--asn-warning-ink); }
.asn-test-explainer { display: grid; gap: 0.25rem; margin-top: 0.5rem; padding: 0.875rem 1rem; border-radius: 0.75rem; background: var(--asn-warning-soft); color: var(--asn-warning-ink); font-size: 0.875rem; }
.asn-progress { height: 0.375rem; border-radius: 1rem; background: var(--tblr-bg-surface-secondary, #eef1f5); overflow: hidden; margin: 0.5rem 0 1.25rem; }
.asn-progress-bar { height: 100%; border-radius: inherit; background: var(--asn-primary); transition: width 0.8s ease; }
.asn-progress-bar.is-running { background-image: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent); background-size: 200% 100%; background-color: var(--asn-primary); animation: asn-shimmer 1.6s linear infinite; }
.asn-timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.asn-timeline-item { position: relative; display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0; color: var(--asn-muted); transition: color 0.4s ease; }
.asn-timeline-item:not(:last-child)::after { content: ""; position: absolute; left: 0.8125rem; top: 2.25rem; bottom: -0.25rem; width: 2px; background: var(--tblr-border-color); transition: background-color 0.4s ease; }
.asn-timeline-item.is-done:not(:last-child)::after { background: var(--asn-primary); }
.asn-timeline-marker {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border-radius: 50%;
  border: 2px solid var(--tblr-border-color); background: var(--tblr-bg-surface); color: transparent; font-size: 0.875rem;
  transition: background-color 0.4s ease, border-color 0.4s ease, color 0.4s ease, transform 0.4s ease;
}
.asn-timeline-item.is-done { color: var(--asn-ink); }
.asn-timeline-item.is-done .asn-timeline-marker { background: var(--asn-primary); border-color: var(--asn-primary); color: #fff; transform: scale(1.08); }
.asn-timeline-item.is-current { color: var(--asn-ink); font-weight: 600; }
.asn-timeline-item.is-current .asn-timeline-marker { border-color: var(--asn-primary); animation: asn-pulse 1.6s ease-out infinite; }
.asn-timeline-item.is-skipped .asn-timeline-marker { border-style: dashed; }
.asn-timeline.is-test .asn-timeline-item.is-done .asn-timeline-marker { background: var(--asn-warning-ink); border-color: var(--asn-warning-ink); }

@keyframes asn-spin { to { transform: rotate(360deg); } }
@keyframes asn-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--asn-primary) 45%, transparent); } 100% { box-shadow: 0 0 0 0.625rem transparent; } }
@keyframes asn-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes asn-pop { 0% { transform: scale(0.6); opacity: 0; } 70% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); } }
@keyframes asn-fade-in { from { opacity: 0; transform: translateY(-2px); } to { opacity: 1; transform: none; } }

/* ==========================================================================
 * Catalogue par catégories (E1-ter) : onglets, bandeau de catégorie, grilles d'offres, devis.
 * ========================================================================== */
.asn-cat-tabs { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; gap: 0.625rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) { .asn-cat-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.asn-cat-tabs-item { display: flex; min-width: 0; }
.asn-cat-tab {
  flex: 1 1 auto; display: flex; align-items: center; gap: 0.625rem; min-width: 0;
  padding: 0.75rem 0.875rem; border: 1px solid var(--tblr-border-color); border-radius: 0.75rem;
  background: var(--tblr-bg-surface); color: var(--asn-ink); text-decoration: none; box-shadow: var(--asn-shadow);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.asn-cat-tab:hover { color: var(--asn-ink); text-decoration: none; border-color: color-mix(in oklab, var(--asn-primary) 45%, var(--tblr-border-color)); }
.asn-cat-tab:focus-visible { outline: 3px solid color-mix(in oklab, var(--asn-primary) 45%, transparent); outline-offset: 2px; }
.asn-cat-tab.is-active { border-color: var(--asn-primary); background: var(--asn-primary-soft); box-shadow: inset 0 0 0 1px var(--asn-primary), var(--asn-shadow); }
.asn-cat-tab-icon {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem;
  border-radius: 0.625rem; font-size: 1.25rem; background: var(--asn-primary-soft); color: var(--asn-primary-ink);
}
.asn-cat-tab.is-active .asn-cat-tab-icon { background: var(--asn-primary); color: #fff; }
.asn-cat-tab-text { display: flex; flex-direction: column; min-width: 0; }
.asn-cat-tab-name { font-weight: 600; font-size: 0.9375rem; line-height: 1.25; }
.asn-cat-tab.is-active .asn-cat-tab-name { color: var(--asn-primary-ink); }
.asn-cat-tab-meta { font-size: 0.75rem; line-height: 1.3; color: var(--asn-muted); }
@media (min-width: 1400px) {
  /* Une ligne d'onglets : icône au-dessus du texte pour garder nom et prix d'appel lisibles sur ~180 px. */
  .asn-cat-tabs { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  .asn-cat-tab { flex-direction: column; justify-content: center; gap: 0.5rem; text-align: center; }
  .asn-cat-tab-text { align-items: center; }
  .asn-cat-tab-icon { width: 2rem; height: 2rem; font-size: 1.125rem; }
}
/* Bascule HTMX : panneau atténué pendant le chargement. */
.asn-cat-panel { transition: opacity 0.15s ease; }
.asn-catalog:has(.htmx-request) .asn-cat-panel { opacity: 0.55; }

.asn-cat-header {
  display: grid; gap: 1rem 2rem; grid-template-columns: minmax(0, 1fr); align-items: center;
  margin-bottom: 1.5rem; padding: 1.25rem 1.5rem; border-radius: var(--asn-radius);
  border: 1px solid var(--tblr-border-color); background: linear-gradient(180deg, var(--asn-primary-soft), var(--tblr-bg-surface));
}
@media (min-width: 1200px) { .asn-cat-header { grid-template-columns: minmax(15rem, 2fr) minmax(0, 3fr); } }
.asn-cat-title { font-size: 1.375rem; font-weight: 700; color: var(--asn-ink); margin: 0 0 0.25rem; }
.asn-cat-description { margin: 0 0 0.625rem; color: var(--asn-muted); }
.asn-mode-pill { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.25rem 0.625rem; border-radius: 2rem; font-size: 0.75rem; font-weight: 600; }
.asn-mode-pill.is-online { background: var(--asn-success-soft); color: var(--asn-success-ink); }
.asn-mode-pill.is-quote { background: #fff; color: var(--asn-primary-ink); border: 1px solid color-mix(in oklab, var(--asn-primary) 25%, #fff); }
.asn-cat-arguments { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem 1rem; grid-template-columns: repeat(auto-fit, minmax(11.5rem, 1fr)); }
.asn-cat-argument { display: flex; align-items: center; gap: 0.625rem; min-width: 0; }
.asn-cat-argument strong { display: block; color: var(--asn-ink); font-size: 0.875rem; }
.asn-cat-argument .asn-argument-icon { background: #fff; border: 1px solid color-mix(in oklab, var(--asn-primary) 18%, #fff); }
.asn-offers-note { display: flex; align-items: center; justify-content: flex-end; gap: 0.375rem; margin: -0.5rem 0 0.5rem; font-size: 0.8125rem; color: var(--asn-muted); }

/* VPS : une ligne de 5 dès 1400 px, puis 3, 2, 1 colonnes ; moins de cartes = colonnes bornées et centrées. */
.asn-offer-grid { display: grid; gap: 1.75rem 1rem; padding-top: 0.75rem; grid-template-columns: minmax(0, 1fr); justify-content: center; }
@media (min-width: 576px) {
  .asn-offer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .asn-offer-grid-1 { grid-template-columns: minmax(0, 20rem); }
}
@media (min-width: 992px) {
  .asn-offer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .asn-offer-grid-2 { grid-template-columns: repeat(2, minmax(0, 20rem)); }
}
@media (min-width: 1400px) {
  .asn-offer-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .asn-offer-grid-3 { grid-template-columns: repeat(3, minmax(0, 17.5rem)); }
  .asn-offer-grid-4 { grid-template-columns: repeat(4, minmax(0, 17.5rem)); }
}
.asn-offer-grid .asn-offer { padding: 1.25rem 1.125rem 1.125rem; gap: 0.875rem; }
.asn-offer-grid .asn-offer-name { font-size: 1.25rem; }
.asn-offer-grid .asn-price { font-size: 1.875rem; }
.asn-offer-grid .asn-price-unit { display: block; margin-top: 0.125rem; }
/* Deux lignes réservées : prix et specs restent alignés d'une carte à l'autre, usage court ou long. */
.asn-offer-grid .asn-offer-usage { font-size: 0.8125rem; min-height: calc(2em * 1.35); }
.asn-offer-grid .asn-offer-badges { left: 1rem; }
@media (min-width: 992px) {
  .asn-offer-grid .asn-offer.is-highlighted { transform: translateY(-0.5rem); }
  .asn-offer-grid .asn-offer.is-highlighted:hover { transform: translateY(-0.625rem); }
}

/* E6 — éditeur des caractéristiques d'une offre (admin) : libellé, valeur, et les boutons. */
.asn-feature-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) auto; gap: 0.5rem; margin-bottom: 0.5rem; align-items: center; }
@media (max-width: 767.98px) {
  .asn-feature-row { grid-template-columns: minmax(0, 1fr); }
}
/* E6-bis : case « Sur devis » posée à côté de son montant, alignée sur le champ et non sur son libellé. */
@media (min-width: 576px) { .asn-on-quote-toggle { padding-top: 1.875rem; } }
.asn-offer-preview { max-width: 22rem; margin: 0 auto; padding-top: 0.875rem; }
/* Le badge d'une carte déborde en haut : sans cette marge il chevaucherait le libellé du bloc. */
.asn-offer-aside { padding-top: 0.875rem; }
.asn-offer-preview .asn-offer { padding: 1.25rem 1.125rem 1.125rem; gap: 0.875rem; }
.asn-offer-preview .asn-offer:hover { transform: none; }

/* E6 — blocs du formulaire de demande de devis sur une offre. Le récapitulatif reprend la fiche
   alignée du site public : libellé à gauche, valeur à droite, une ligne par caractéristique. Il est
   en lecture seule — ce que le client relit ici est mot pour mot ce que le commerce reçoit. */
.asn-quote-block { margin-bottom: 1.5rem; }
.asn-quote-block:last-of-type { margin-bottom: 0; }
.asn-recap-list { margin: 0.5rem 0 0; display: grid; gap: 0.25rem; }
.asn-recap-list.is-boxed { padding: 0.875rem 1rem; border: 1px solid var(--tblr-border-color); border-radius: 0.5rem; background: var(--tblr-bg-surface-secondary, var(--asn-primary-soft)); }
.asn-recap-row { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: 0.75rem; align-items: baseline; font-size: 0.875rem; }
.asn-recap-row dt { font-weight: 400; color: var(--asn-muted); }
.asn-recap-row dd { margin: 0; font-weight: 600; color: var(--asn-ink); min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 575.98px) {
  .asn-recap-row { grid-template-columns: minmax(0, 1fr); gap: 0; }
}

/* E6 — offres sur devis (serveurs dédiés, colocation) : la carte des VPS, avec une liste de
   caractéristiques libellé / valeur plutôt que des specs à icône. Les libellés varient d'une offre
   à l'autre (« Espace », « Puissance », « vCPU ») : une colonne dimensionnée sur le contenu les
   aligne dans une même carte sans figer une largeur qui ne vaudrait que pour une famille d'offres. */
.asn-offer-features { list-style: none; margin: 0; padding: 0.875rem 0 0; display: grid; gap: 0.4375rem; border-top: 1px solid var(--tblr-border-color); }
.asn-offer-feature { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: 0.5rem; align-items: baseline; font-size: 0.875rem; line-height: 1.35; }
.asn-offer-feature-label { color: var(--asn-muted); font-size: 0.8125rem; white-space: nowrap; }
.asn-offer-feature-value { font-weight: 600; color: var(--asn-ink); min-width: 0; text-align: right; }
.asn-offer-terms { list-style: none; margin: 0.5rem 0 0; padding: 0; display: grid; gap: 0.1875rem; font-size: 0.8125rem; color: var(--asn-muted); }
.asn-offer-terms li { display: flex; align-items: center; gap: 0.375rem; }
.asn-offer-terms .ti { color: var(--asn-primary-ink); font-size: 1rem; }
.asn-offers-footnote { margin: 1rem 0 0; font-size: 0.8125rem; color: var(--asn-muted); text-align: center; }
/* Sous 480 px, libellé et valeur s'empilent : « 1 × RJ45 ou SFP/SFP+ » en face de son libellé sur
   une carte de téléphone laisserait deux colonnes de trois caractères de large. */
@media (max-width: 479.98px) {
  .asn-offer-feature { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .asn-offer-feature-value { text-align: left; }
}

/* Stockage : cartes larges côte à côte, visuel à gauche. */
.asn-offer-wide-list { display: grid; gap: 1.75rem 1.25rem; padding-top: 0.75rem; grid-template-columns: minmax(0, 1fr); justify-content: center; }
@media (min-width: 1200px) {
  .asn-offer-wide-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .asn-offer-wide-list.is-single { grid-template-columns: minmax(0, 54rem); }
}
.asn-offer-wide { gap: 1.25rem; }
.asn-offer-wide-visual { display: flex; align-items: center; justify-content: center; padding: 1rem; border-radius: 0.75rem; background: var(--asn-primary-soft); }
.asn-offer-wide-visual .asn-drive-visual svg { max-width: 15rem; }
.asn-offer-wide-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1rem; }
.asn-offer-wide-footer { margin-top: auto; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; padding-top: 1rem; border-top: 1px solid var(--tblr-border-color); }
.asn-offer-wide-footer .asn-offer-action { margin-top: 0; }
@media (min-width: 768px) {
  .asn-offer-wide { flex-direction: row; align-items: stretch; }
  .asn-offer-wide-visual { flex: 0 0 36%; }
}

/* Offres sur devis et encarts. */
.asn-quote-grid { display: grid; gap: 1.75rem 1rem; padding-top: 0.5rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 576px) { .asn-quote-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1400px) { .asn-quote-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.asn-offer-quote { padding: 1.25rem 1.125rem 1.125rem; gap: 0.875rem; }
.asn-offer-quote .asn-offer-name { font-size: 1.25rem; }
.asn-price-sm { font-size: 1.5rem; }
.asn-quote-mention { display: inline-flex; align-items: center; gap: 0.25rem; margin-top: 0.375rem; font-size: 0.75rem; font-weight: 600; color: var(--asn-primary-ink); }
.asn-quote-cta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1rem;
  margin-top: 1.5rem; padding: 1rem 1.25rem; border: 1px dashed color-mix(in oklab, var(--asn-primary) 30%, var(--tblr-border-color));
  border-radius: var(--asn-radius); background: var(--tblr-bg-surface); color: var(--asn-muted); font-size: 0.875rem;
}
.asn-quote-cta > span { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.asn-quote-cta .ti { flex: none; font-size: 1.25rem; color: var(--asn-primary-ink); }
.asn-coming-soon {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; padding: 1.5rem;
  border-radius: var(--asn-radius); border: 1px solid var(--tblr-border-color); background: var(--tblr-bg-surface); box-shadow: var(--asn-shadow);
}
.asn-coming-soon-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 3.25rem; height: 3.25rem; border-radius: 1rem; font-size: 1.75rem; background: var(--asn-warning-soft); color: var(--asn-warning-ink); }
.asn-coming-soon-body { flex: 1 1 18rem; min-width: 0; color: var(--asn-muted); }
.asn-coming-soon-title { font-size: 1.125rem; font-weight: 700; color: var(--asn-ink); margin: 0 0 0.25rem; }
.asn-quote-form-head { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.25rem; }
.asn-quote-sent { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 1rem; }

/* --- Parcours simplifié (E5) : curseur des paliers, prix, repli sans JavaScript -------------- */
/* Le curseur est masqué par défaut (`hidden`) : sans JavaScript, c'est la liste déroulante et le
   bouton « Recalculer » qui servent. app.js dévoile le curseur et masque le repli — la liste reste
   dans le formulaire (masquée, donc toujours soumise) : un seul champ, aucun doublon. */
.asn-simple { max-width: 34rem; margin-inline: auto; }
.asn-simple-usage { margin-top: 0.375rem; color: var(--asn-muted); font-size: 0.9375rem; }
.asn-simple-slider { padding-bottom: 0.5rem; }
.asn-simple-current { font-size: 1.25rem; font-weight: 700; color: var(--asn-primary-ink); font-variant-numeric: tabular-nums; }
.asn-simple-range { width: 100%; margin: 0.75rem 0 0.25rem; accent-color: var(--asn-primary); }
.asn-simple-range:focus-visible { outline: 2px solid var(--asn-primary); outline-offset: 0.25rem; }
.asn-simple-ticks { list-style: none; display: flex; justify-content: space-between; gap: 0.25rem; margin: 0; padding: 0; font-size: 0.75rem; color: var(--asn-muted); }
.asn-simple-ticks li { flex: 1 1 0; min-width: 0; text-align: center; white-space: nowrap; overflow: hidden; font-variant-numeric: tabular-nums; }
.asn-simple-ticks li:first-child { text-align: left; }
.asn-simple-ticks li:last-child { text-align: right; }
.asn-simple-ticks li.is-current { color: var(--asn-primary-ink); font-weight: 700; }
.asn-simple-fallback { margin-top: 0.75rem; }
/* L'offre réelle compte jusqu'à neuf paliers : sur un écran étroit, seuls les extrêmes et le cran
   courant restent lisibles — les autres gardent leur place (visibility) pour ne pas décaler l'échelle. */
@media (max-width: 767.98px) {
  .asn-simple-ticks li:not(:first-child):not(:last-child):not(.is-current) { visibility: hidden; }
}
.asn-simple-price-body { border-top: 1px solid var(--tblr-border-color); }
.asn-simple-price-main { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
.asn-simple-price-ttc { color: var(--asn-muted); font-size: 0.875rem; }
.asn-simple-welcome, .asn-simple-credit { display: flex; align-items: flex-start; gap: 0.5rem; margin: 0.75rem 0 0; font-size: 0.875rem; }
.asn-simple-welcome { color: var(--asn-success-ink); }
.asn-simple-launch-range { display: flex; align-items: flex-start; gap: 0.5rem; margin: 0.75rem 0 0; font-size: 0.875rem; color: var(--asn-muted); }
.asn-simple-launch-range .ti { flex: none; }
.asn-simple-welcome .ti, .asn-simple-credit .ti { flex: none; }
.asn-simple-credit { color: var(--asn-muted); }
.asn-simple-aside { margin-top: 0.875rem; text-align: center; }
.asn-offer-secondary { justify-content: center; margin-top: 0.5rem; font-size: 0.8125rem; }

/* --- Formulaires (E1-quinque) : aide sur la ligne du libellé, boutons dans la carte ---------- */
.asn-label-row { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 0.5rem; row-gap: 0.125rem; margin-bottom: 0.5rem; }
.asn-label-row .form-label { margin-bottom: 0; }
.asn-label-hint { font-size: 0.75rem; line-height: 1.3; color: var(--asn-muted); }
.asn-form-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.5rem; }

/* --- Lignes de tableau cliquables (E5-bis, Admin → Services) ------------------ */
.asn-row-link { cursor: pointer; }
.asn-row-link:hover { background: var(--tblr-bg-surface-secondary, rgba(0, 0, 0, 0.03)); }

/* --- Petits écrans et mouvement réduit -------------------------------------- */
@media (max-width: 575.98px) {
  .asn-hero { padding: 1rem 1.125rem; }
  .asn-hero-argument { font-size: 0.75rem; padding: 0.25rem 0.625rem; }
  .asn-cat-header { padding: 1rem; }
  .asn-cat-tab { padding: 0.625rem; gap: 0.5rem; }
  .asn-cat-tab-icon { width: 2rem; height: 2rem; font-size: 1.125rem; }
  .asn-cat-tab-name { font-size: 0.875rem; }
  .asn-panel { padding: 1rem; }
  .asn-step-label { font-size: 0.6875rem; }
  .asn-step:not(.is-active) .asn-step-label { color: var(--asn-muted); }
  .asn-price { font-size: 2rem; }
  .asn-recap li { grid-template-columns: auto 6rem minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .asn-offer, .asn-choice-body, .asn-choice-check, .asn-progress-bar, .asn-timeline-item, .asn-timeline-marker, .asn-quote, .asn-cat-tab, .asn-cat-panel { transition: none; }
  .asn-offer:hover { transform: none; }
  .asn-status-icon, .asn-status-icon .ti, .asn-progress-bar.is-running, .asn-timeline-item.is-current .asn-timeline-marker, .asn-feedback { animation: none; }
}

/* ==========================================================================
   U1 — Interface d'administration : menu en groupes, cadres de tableau,
   blocs d'aide, sommaire des paramètres, réordonnancement du catalogue.
   ========================================================================== */

/* --- Menu latéral en groupes repliables (livrable A) ------------------------ */
.asn-nav-group-title {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 0.5rem;
  background: none;
  border: 0;
  text-align: left;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.72;
}
.asn-nav-group-title:hover, .asn-nav-group-title:focus-visible { opacity: 1; }
.asn-nav-group.is-current > .asn-nav-group-title { opacity: 1; font-weight: 600; }
.asn-nav-chevron { margin-left: auto; transition: transform 0.15s ease; }
/* Le chevron pointe vers le bas quand le groupe est ouvert, vers la droite quand il est fermé :
   c'est la convention à laquelle tout le monde s'attend, et elle double `aria-expanded`. */
.asn-nav-group-title[aria-expanded="false"] .asn-nav-chevron { transform: rotate(-90deg); }
.asn-nav-group-title[aria-expanded="false"] + .asn-nav-group-items { display: none; }
.asn-nav-group-items { padding-left: 0.5rem; }
.asn-nav-group-items .nav-link { padding-top: 0.3rem; padding-bottom: 0.3rem; }
/* Pastille du titre : visible seulement quand le groupe est replié (l'entrée porte la sienne). */
.asn-nav-group-title[aria-expanded="true"] .asn-nav-group-badge { display: none; }
.asn-nav-group-title[aria-expanded="false"] .asn-nav-chevron { margin-left: 0; }
.asn-nav-group-title[aria-expanded="false"] .asn-nav-group-badge { margin-left: auto; }

/* --- Cadre de tableau défilant (livrable C) --------------------------------- */
/* Le tableau défile DANS son cadre, pas avec la page : l'ascenseur horizontal reste donc en bas
   de l'écran et non en bas d'un document de trois mille pixels, où personne ne le trouvait.
   `max-height` est posée en ligne par app.js (fenêtre moins le haut du cadre) ; la valeur ci-
   dessous est le repli quand JavaScript ne tourne pas — un cadre trop haut vaut mieux qu'un
   cadre écrasé. */
.asn-table-frame {
  max-height: 70vh;
  overflow: auto;
  overscroll-behavior: contain;
}
.asn-table-frame > table { margin-bottom: 0; }
/* En-tête collé. Le fond doit être OPAQUE : une cellule translucide laisserait défiler les
   lignes en transparence derrière les libellés. */
.asn-table-frame > table > thead > tr > th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--tblr-bg-surface, #fff);
  box-shadow: inset 0 -1px 0 var(--tblr-border-color, #e6e7e9);
}
/* Première colonne collée à gauche, avec un liseré et une ombre courte qui marquent le bord :
   sans ce repère, on ne sait plus si la colonne fait partie du tableau ou le surplombe. */
.asn-table-frame > table > tbody > tr > td:first-child,
.asn-table-frame > table > thead > tr > th:first-child {
  position: sticky;
  left: 0;
  background: var(--tblr-bg-surface, #fff);
  box-shadow: 1px 0 0 var(--tblr-border-color, #e6e7e9), 4px 0 6px -4px rgba(0, 0, 0, 0.25);
}
.asn-table-frame > table > tbody > tr > td:first-child { z-index: 1; }
.asn-table-frame > table > thead > tr > th:first-child { z-index: 3; }
/* Le survol d'une ligne doit teinter aussi la cellule collée, sinon elle reste blanche et la
   ligne paraît coupée en deux. */
.asn-table-frame > table > tbody > tr:hover > td:first-child {
  /* Même variable que `.asn-row-link:hover` — mais un repli OPAQUE, et c'est la raison d'être
     de la différence : la cellule est collée, et une teinte translucide laisserait défiler les
     lignes en transparence derrière elle au survol. */
  background: var(--tblr-bg-surface-secondary, #f6f7f9);
}
/* `is-overflowing` est posée par app.js quand le contenu dépasse réellement le cadre. Elle ne
   change rien à l'affichage (un `max-height` ne force pas une hauteur) : elle donne un repère
   aux tests, qui doivent pouvoir vérifier que le cadre défile vraiment. */

/* --- Sélecteur de colonnes (livrable C, page Trafic) ------------------------ */
.asn-columns-menu { min-width: 15rem; max-height: 60vh; overflow-y: auto; }
.asn-columns-menu .form-check { margin-bottom: 0.25rem; }

/* --- Bloc d'aide repliable (livrable D) ------------------------------------- */
/* Toujours au-dessus, sur toute la largeur, jamais en colonne à côté du contenu : une aide
   posée à droite rétrécit le tableau qu'elle explique, et c'est le tableau qu'on est venu voir. */
.asn-help { width: 100%; }
.asn-help-summary { display: flex; gap: 0.5rem; align-items: flex-start; }
.asn-help-more { padding-top: 0.5rem; }
.asn-help-toggle { white-space: nowrap; }

/* --- Paramètres : sommaire fixe (livrable B) -------------------------------- */
.asn-settings-toc { position: sticky; top: 1rem; max-height: calc(100vh - 6rem); overflow-y: auto; }
.asn-settings-toc .list-group-item.is-current {
  font-weight: 600;
  border-left: 3px solid var(--asn-primary);
}
/* F2-K (F.2) : paramètre texte — champ large, bouton jamais tronqué, retour à la ligne sur mobile. */
.asn-setting-value-text { min-width: 18rem; }
.asn-setting-text { flex: 1 1 14rem; min-width: 14rem; }
@media (max-width: 575.98px) {
  .asn-setting-value-text { min-width: 0; }
  .asn-setting-text { min-width: 0; flex-basis: 100%; }
}
.asn-setting-row.is-hidden, .asn-settings-section.is-hidden, .asn-settings-subsection.is-hidden { display: none; }

/* --- Catalogue : réordonnancement par glisser-déposer (livrable E) ---------- */
.asn-drag-handle { cursor: grab; touch-action: none; }
.asn-drag-handle:active { cursor: grabbing; }
tr.asn-dragging { opacity: 0.45; }
tr.asn-drop-target > td { box-shadow: inset 0 2px 0 var(--asn-primary); }
.asn-truncate { display: block; max-width: 32rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  .asn-nav-chevron { transition: none; }
}

/* ---------------------------------------------------------------------------
 * U2 — Page publique de création de compte.
 * Carte de ~560 px, espacements resserrés : le formulaire complet (logo, tous les champs, bouton)
 * tient dans une fenêtre de 1440 × 800 à 100 %, en « Particulier » comme en « Société ».
 * ------------------------------------------------------------------------- */
.asn-auth-register {
  max-width: 560px;
}

.asn-auth-register.py-4 {
  padding-top: 1.75rem !important;
  padding-bottom: 1.75rem !important;
}

/* Ancrée en haut et non centrée : passer à « Société » (un champ de plus) ne fait pas sauter la page. */
.page-center:has(> .asn-auth-register) {
  justify-content: flex-start;
}

.asn-auth-register .card-body {
  padding: 1.25rem 1.5rem;
}

/* U2-ter — erreur générale (la plus longue : « L'inscription est momentanément indisponible… »,
   avec l'adresse du support et la référence) : encadré resserré, et la phrase d'accroche
   s'efface pour que le bouton reste visible sur 1440 × 800. Rien ne change sans erreur. */
.asn-auth-register .alert {
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.75rem;
  font-size: 0.8125rem;
  line-height: 1.35;
}

.asn-auth-register .card-body:has([data-testid="form-errors"]) .asn-reg-subtitle {
  display: none;
}

.asn-reg-field {
  margin-bottom: 0.75rem;
}

.asn-reg-field .form-label {
  margin-bottom: 0.25rem;
}

fieldset.asn-reg-field {
  border: 0;
  padding: 0;
  min-width: 0;
}

/* Sélecteur Particulier / Société : deux tuiles de même largeur, de vrais boutons radio dedans. */
.asn-type-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

.asn-type-tile {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 60px;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--tblr-border-color);
  border-radius: var(--tblr-border-radius);
  background: var(--tblr-bg-surface);
  cursor: pointer;
}

/* Le radio couvre toute la tuile (clic n'importe où), invisible mais focalisable et annoncé. */
.asn-type-tile-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.asn-type-tile:hover {
  border-color: rgba(var(--asn-primary-rgb), 0.5);
}

.asn-type-tile:has(.asn-type-tile-input:checked) {
  border-color: var(--asn-primary);
  background: rgba(var(--asn-primary-rgb), 0.06);
  box-shadow: inset 0 0 0 1px var(--asn-primary);
}

.asn-type-tile:has(.asn-type-tile-input:focus-visible) {
  outline: 2px solid var(--asn-primary);
  outline-offset: 2px;
}

.asn-type-tile.is-invalid {
  border-color: var(--tblr-danger);
}

.asn-type-tile-icon {
  flex: none;
  font-size: 1.5rem;
  color: var(--tblr-secondary);
}

.asn-type-tile:has(.asn-type-tile-input:checked) .asn-type-tile-icon {
  color: var(--asn-primary);
}

.asn-type-tile-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.25;
}

.asn-type-tile-label {
  font-weight: 600;
}

.asn-type-tile-sub {
  font-size: 0.75rem;
  color: var(--tblr-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Coche en pastille sur le coin : elle ne prend pas de largeur au libellé. */
.asn-type-tile-check {
  position: absolute;
  top: -0.5rem;
  right: -0.5rem;
  font-size: 1.125rem;
  line-height: 1;
  border-radius: 50%;
  background: var(--tblr-bg-surface);
  color: var(--asn-primary);
  visibility: hidden;
  pointer-events: none;
}

.asn-type-tile:has(.asn-type-tile-input:checked) .asn-type-tile-check {
  visibility: visible;
}

/* Bouton œil des champs mot de passe. */
.asn-password-toggle {
  display: inline-flex;
  align-items: center;
  padding: 0;
  border: 0;
  background: none;
  color: var(--tblr-secondary);
  line-height: 1;
  cursor: pointer;
}

.asn-password-toggle:hover,
.asn-password-toggle[aria-pressed="true"] {
  color: var(--asn-primary);
}

.asn-password-toggle:focus-visible {
  outline: 2px solid var(--asn-primary);
  outline-offset: 2px;
  border-radius: 2px;
}

.asn-password-toggle .ti {
  font-size: 1.125rem;
}

/* Erreur sur un champ mot de passe : bordure rouge jusque sous l'œil, sans la croix de Tabler. */
.asn-reg-field .input-group.is-invalid .form-control {
  background-image: none;
  padding-right: 0.75rem;
}

.asn-reg-field .input-group.is-invalid .input-group-text {
  border-color: var(--tblr-danger);
}

@media (max-width: 575.98px) {
  .asn-type-tile {
    padding: 0.5rem 0.625rem;
    gap: 0.5rem;
  }

  .asn-type-tile-sub {
    white-space: normal;
  }
}

.asn-reg-password-help {
  margin-top: -0.375rem;
  margin-bottom: 1rem;
}

/* U2-ter — « Se connecter · Mot de passe oublié ? » sous l'erreur « adresse déjà utilisée ». */
.asn-reg-error-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.375rem;
  margin-top: 0.125rem;
}

.asn-reg-error-links a {
  font-weight: 600;
}

/* « Déjà client ? Se connecter » et le choix de la langue, sur une seule ligne. */
.asn-auth-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0 0.375rem;
  margin-top: 0.75rem;
}

.asn-auth-links .btn-link {
  padding-top: 0;
  padding-bottom: 0;
}

/* F2-I — encart d'un client hors ligne : `.alert` est une rangée flex (Tabler) ; un seul enfant qui prend
 * toute la largeur, le prix en gras sur sa ligne, puis le texte précédé d'une icône discrète. */
.asn-offline-notice-body { flex: 1 1 auto; min-width: 0; }
.asn-offline-notice-price { font-weight: var(--tblr-font-weight-bold, 600); margin-bottom: 0.375rem; overflow-wrap: anywhere; }
.asn-offline-notice-text { display: flex; align-items: flex-start; gap: 0.5rem; overflow-wrap: anywhere; }
.asn-offline-notice-text .ti { flex: 0 0 auto; margin-top: 0.15rem; opacity: 0.75; }

/* U4 — « Livraison en cours » : service payé dont la VM n'est pas encore rattachée. */
.asn-delivery-line { display: flex; gap: 0.25rem; align-items: baseline; margin-top: 0.25rem; max-width: 18rem; white-space: normal; line-height: 1.35; }
.asn-delivery-notice .alert-icon { margin-right: 0.5rem; }

/* M1 — modèles d'e-mails : éditeur HTML (CodeJar + Prism), aperçu, différences.
 *
 * M1-ter — CodeJar colore SON PROPRE contenu : il n'y a qu'un élément, et c'est la mise en page
 * de ses jetons qui faisait chevaucher les lignes. Prism nomme une balise `token tag`, et Tabler
 * stylise `.tag` (composant « étiquette » : inline-flex, hauteur 1,5 rem, marge intérieure,
 * bordure, ombre). Chaque balise HTML devenait une boîte de 24 px qui ne se coupe pas : plus haute
 * que la ligne, elle débordait sur la suivante dès qu'elle était renvoyée. Tous les jetons sont
 * donc ramenés à du texte en ligne, sans rien qui touche à la géométrie (police, taille,
 * interlignage, graisse, marges, bordures) : seule la couleur change. Même chose pour `.number`,
 * `.string`, `.comment`… que Tabler ou une future version pourrait styliser. */
.asn-code-textarea,
.asn-code-editor,
.asn-code-gutter {
  font-family: var(--tblr-font-monospace, monospace);
  font-size: .8125rem;
  line-height: 1.25rem;
  tab-size: 2;
}
.asn-code-textarea { min-height: 38.5rem; resize: vertical; white-space: pre-wrap; overflow-wrap: anywhere; }
/* Cadre : 30 lignes au moins, poignée en bas, le défilement se fait ici et pas dans la page. */
.asn-code-frame {
  height: 38.5rem;
  min-height: 38.5rem;
  overflow: auto;
  resize: vertical;
  border: 1px solid var(--tblr-border-color);
  border-radius: var(--tblr-border-radius);
  background: #fbfbfd;
}
.asn-code-frame:focus-within { outline: 2px solid rgba(var(--tblr-primary-rgb), .35); outline-offset: 1px; }
.asn-code-grid { display: grid; grid-template-columns: auto minmax(0, 1fr); min-height: 100%; }
.asn-code-gutter {
  position: relative;
  min-width: 3.25rem;
  padding: .5rem .5rem .5rem 0;
  background: #f1f3f7;
  border-right: 1px solid var(--tblr-border-color);
  color: #8a94a6;
  text-align: right;
  user-select: none;
}
.asn-code-gutter span { position: absolute; right: .5rem; height: 1.25rem; }
.asn-code-editor {
  min-height: 100%;
  padding: .5rem .75rem;
  outline: none;
  white-space: pre-wrap;
  word-break: normal;
  overflow-wrap: anywhere;
}
.asn-code-editor .token {
  display: inline;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: none;
  font: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  vertical-align: baseline;
  white-space: inherit;
  transform: none;
}
.asn-code-editor .token.asn-var { color: #b54708; background: #fff4e5; }
/* Aperçu en fenêtre (modale) : rendu isolé dans un cadre, largeur ordinateur ou mobile. */
.asn-email-preview-stage { background: #f4f6fa; padding: 1rem; }
.asn-email-preview { width: 100%; height: 72vh; border: 0; background: #fff; display: block; margin: 0 auto; }
.asn-email-preview.is-mobile { width: 375px; max-width: 100%; border: 1px solid var(--tblr-border-color); border-radius: 1rem; }
.asn-email-variables .btn,
.asn-email-variables .badge { flex: none; white-space: nowrap; }
.asn-diff { white-space: pre-wrap; word-break: break-word; font-size: .75rem; padding: .5rem; background: #f8fafc; border-radius: var(--tblr-border-radius); }
.asn-diff span { display: block; }
.asn-diff-add { background: #e7f6ec; color: #1a7f37; }
.asn-diff-del { background: #fdecec; color: #b42318; }
.asn-diff-meta { color: #6b7280; }

/* F2-D — pot de miel du formulaire d'inscription : hors écran (pas display:none, que certains
   robots savent ignorer), hors tabulation, ignoré des lecteurs d'écran. */
.asn-hp {
  position: absolute !important;
  left: -10000px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

/* F2-G — première facture au prorata (« Aujourd'hui … » / « Ensuite … »). */
.asn-first-period { margin: 0.75rem 1rem 0; padding: 0.625rem 0.875rem; border-radius: 0.5rem; background: var(--asn-primary-soft); color: var(--asn-ink); font-size: 0.875rem; display: grid; gap: 0.25rem; }
.asn-simple-price .asn-first-period { margin: 0.75rem 0 0; }
.asn-first-period .ti { color: var(--asn-muted); }

/* F2-J — tuile « Factures » d'un client hors ligne : détail complet (au plus deux lignes) au lieu
   d'une troncature ; les tuiles de la rangée gardent la même hauteur (row-deck). */
.asn-tile-detail-wrap { overflow-wrap: anywhere; line-height: 1.3; }

/* F2-L — contenu riche d'une alerte Tabler (rangée flex) : un seul enfant qui prend toute la
 * largeur et peut rétrécir, sinon formulaires et listes s'écrasent en colonnes étroites. */
.asn-alert-body { min-width: 0; }
.alert .btn-close { flex: 0 0 auto; }
.asn-console-header .card-actions { margin-left: auto; }
@media (max-width: 575.98px) {
  .asn-console-header .card-actions { margin-left: 0; width: 100%; }
}

/* F2-M — journal des e-mails : des colonnes de texte qui peuvent se couper, sans s'écraser (le tableau
   défile dans son cadre plutôt que d'écrire un objet lettre par lettre). */
.asn-email-log { min-width: 62rem; }
.asn-email-log td:nth-last-child(1) { min-width: 15rem; }
.asn-email-log td:nth-last-child(3) { min-width: 14rem; }

/* F2-O — écran « Sécuriser mon serveur » : une carte par accès conservé, choix d'adresse côte à côte. */
.asn-secure-cards { display: grid; gap: 0.75rem; }
.asn-secure-card { border: 1px solid var(--tblr-border-color); border-radius: var(--tblr-border-radius); padding: 0.75rem 1rem; min-width: 0; }
.asn-secure-scope { border: 0; margin: 0.5rem 0 0; padding: 0; min-width: 0; }
.asn-segmented { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.asn-segmented .btn { flex: 1 1 auto; min-width: 0; white-space: normal; }
.asn-segmented .btn-check:checked + .btn { background: var(--tblr-primary); border-color: var(--tblr-primary); color: var(--tblr-primary-fg, #fff); }
.asn-segmented .btn-check:checked + .btn code { background: transparent; color: inherit; }
.asn-secure-other { display: none; max-width: 22rem; }
.asn-secure-scope:has(.asn-scope-other:checked) .asn-secure-other { display: block; }
@supports not selector(:has(*)) { .asn-secure-other { display: block; } }

/* F2-O — Admin → Diagnostic : tuiles, liste « À traiter », pastilles de la pile. Vert discret, orange
   « à surveiller », rouge « agir » : la couleur ne sert qu'à dire ce qui demande une action. */
.asn-diag-tile { display: block; height: 100%; color: inherit; border: 1px solid var(--tblr-border-color); border-left-width: 4px; border-radius: var(--tblr-border-radius); padding: 0.75rem 1rem; background: var(--tblr-bg-surface); }
.asn-diag-tile:hover { text-decoration: none; background: var(--tblr-bg-surface-secondary); }
.asn-diag-tile[data-status="ok"] { border-left-color: var(--tblr-green); }
.asn-diag-tile[data-status="warning"] { border-left-color: var(--tblr-orange); }
.asn-diag-tile[data-status="error"] { border-left-color: var(--tblr-red); }
.asn-diag-tile[data-status="unknown"] { border-left-color: var(--tblr-border-color); }
.asn-diag-pills { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.asn-diag-pill > summary { list-style: none; cursor: pointer; }
.asn-diag-pill > summary::-webkit-details-marker { display: none; }
/* Les sept onglets tiennent sur deux lignes à partir de la tablette ; en dessous, ils défilent. */
@media (max-width: 767.98px) { .asn-diag-nav { flex-wrap: nowrap; overflow-x: auto; } }
/* F2-P : le tableau des tâches tient dans sa carte à 1000 px : colonnes proportionnelles, retours à la ligne. */
.asn-diag-tasks { table-layout: fixed; width: 100%; }
.asn-diag-tasks thead th, .asn-diag-tasks td { white-space: normal; overflow-wrap: anywhere; }
.asn-diag-tasks th:nth-child(1) { width: 32%; }
.asn-diag-tasks th:nth-child(2) { width: 16%; }
.asn-diag-tasks th:nth-child(3), .asn-diag-tasks th:nth-child(5) { width: 18%; }
@media (max-width: 767.98px) { .asn-diag-tasks { table-layout: auto; min-width: 40rem; } }
.asn-diag-config td:nth-child(1) { width: 40%; }
.asn-diag-config td:nth-child(2) { width: 7.5rem; }
.asn-diag-summary { cursor: pointer; list-style: none; }
.asn-diag-summary::-webkit-details-marker { display: none; }
details[open] > .asn-diag-summary .asn-diag-chevron { transform: rotate(180deg); }

/* F2-S (§13.2) — champ de saisie des fenêtres de confirmation (SweetAlert2 + .form-control de
   Tabler). Tabler pose width: 100 % ; SweetAlert2 ajoute 2em de marge de chaque côté : le champ
   dépassait à droite du cadre (restauration d'une sauvegarde). Largeur du contenu, bordures
   comprises (box-sizing), centré, y compris à 375 px. */
.swal2-popup .swal2-input,
.swal2-popup .swal2-textarea {
  box-sizing: border-box;
  width: calc(100% - 3.2em);
  max-width: calc(100% - 3.2em);
  margin: 1em auto 3px;
}
.swal2-popup .swal2-input-label {
  margin: 1em 1.6em 0;
  justify-content: center;
  text-align: center;
}
.asn-btn-busy { cursor: progress; }
.asn-submit-once-note { max-width: 40rem; }
/* F2-U (§3) — bandeau de la consultation en lecture seule : fixe, rouge, au-dessus de tout. */
.asn-view-as-banner { position: sticky; top: 0; z-index: 1040; background: #d63939; color: #fff; padding: .5rem 0; }
.asn-view-as-banner .btn-light { color: #d63939; }
/* F2-U (§7c) — Admin → Jobs : à 1000 px de large (menu latéral compris), le tableau débordait de
   105 px. Les cellules se replient ; l'adresse de l'auteur et le nom du service se coupent au
   besoin plutôt que d'élargir le tableau. */
.asn-jobs-table td, .asn-jobs-table thead th { white-space: normal; }
.asn-jobs-table td:nth-child(3), .asn-jobs-table td:nth-child(5) { overflow-wrap: anywhere; min-width: 6.5rem; }