/* ==========================================================================
   1SWISS1 - support et compte de l'espace client (refonte v01, phase 5)
   Chargé par les templates du périmètre (tickets, compte, annonces, base de
   connaissances, téléchargements, état du réseau, connexion, mot de passe
   oublié, double authentification). Changer le paramètre ?v= dans
   includes/s1-account-css.tpl à chaque modification.
   S'appuie sur les jetons et composants de s1-ui.css (--s1-*, .btn-primary,
   .btn-default, .btn-link, .form-control, .alert, .modal).
   ========================================================================== */

.s1a { padding: var(--s1-page-pt) 0 72px; color: var(--s1-ink); }
.s1a *, .s1a *::before, .s1a *::after { box-sizing: border-box; }

/* ---------- en-tête de page ---------- */
.s1a-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 32px; margin: 0 0 36px; }
.s1a-head > div:first-child { min-width: 0; flex: 1 1 420px; }
.s1a-head h1 { margin: 0; font-size: var(--s1-h1); line-height: 1.1; color: var(--s1-ink); overflow-wrap: anywhere; }
.s1a-sub { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 20px; margin: 12px 0 0; font-size: 16px; line-height: 1.5; color: var(--s1-ink-2); }
.s1a-sub a { color: var(--s1-ink); }
.s1a-head__a { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- onglets du compte ---------- */
.s1a-tabs { display: flex; gap: 0 28px; margin: -8px 0 40px; padding: 0; border-bottom: 1px solid var(--s1-line); list-style: none; overflow-x: auto; scrollbar-width: none; }
.s1a-tabs::-webkit-scrollbar { display: none; }
.s1a-tabs a { display: block; padding: 12px 0; color: var(--s1-ink-2); font-size: 16px; white-space: nowrap; text-decoration: none; box-shadow: inset 0 -2px 0 transparent; }
.s1a-tabs a:hover { color: var(--s1-ink); text-decoration: none; }
.s1a-tabs a[aria-current="page"] { color: var(--s1-ink); box-shadow: inset 0 -2px 0 var(--s1-ink); }

/* ---------- titres de section : petit carré rouge + capitales (charte) ---------- */
.s1a-sq { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; font-size: 14px; line-height: 1.3; font-weight: var(--s1-w-subtitle); letter-spacing: .08em; text-transform: uppercase; color: var(--s1-ink); }
.s1a-sq::before { content: ""; flex: none; width: 8px; height: 8px; background: var(--s1-red); }
.s1a-sq > .s1a-cnt { margin-left: auto; font-size: 15px; font-weight: var(--s1-w-body); letter-spacing: 0; text-transform: none; color: var(--s1-ink-2); }
.s1a-sec { margin-top: 48px; }
.s1a-sec:first-child { margin-top: 0; }
.s1a-lead { margin: 0 0 20px; max-width: 68ch; font-size: 15px; line-height: 1.55; color: var(--s1-ink-2); }

/* ---------- blocs ---------- */
.s1a-card { min-width: 0; padding: 28px 30px; border: 1px solid var(--s1-line); border-radius: var(--s1-r-xl); background: var(--s1-g50); }
.s1a-card > h2 { margin: 0 0 8px; font-size: 22px; line-height: 1.25; }
.s1a-card > .s1a-lead:last-child, .s1a-card > p:last-child { margin-bottom: 0; }
.s1a-g2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
.s1a-state { margin: 4px 0 8px; font-size: 20px; line-height: 1.3; }
.s1a-state--ok { color: var(--s1-ok); }

/* ---------- formulaires ---------- */
.s1a-form { max-width: 760px; }
.s1a-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 18px; }
.s1a-fld { display: flex; flex-direction: column; gap: 8px; min-width: 0; margin: 0; }
.s1a-fld + .s1a-fld, .s1a-fld + .s1a-grid, .s1a-grid + .s1a-fld, .s1a-grid + .s1a-grid { margin-top: 20px; }
.s1a-fld--full { grid-column: 1 / -1; }
.s1a-fld > label, .s1a-lbl { margin: 0; font-size: 15px; font-weight: var(--s1-w-body); color: var(--s1-ink); }
.s1a-fld .form-control, .s1a-fld select, .s1a-fld input[type="text"], .s1a-fld input[type="email"], .s1a-fld input[type="tel"], .s1a-fld input[type="password"] { width: 100%; }
.s1a-fld select:not(.form-control), .s1a-fld input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not(.form-control) {
    min-height: var(--s1-h-field); padding: 11px 14px; border: 1px solid var(--s1-field); border-radius: var(--s1-r-md); background-color: var(--s1-white); color: var(--s1-ink); font-family: var(--s1-font); font-size: 16px; }
.s1a-fld .iti, .s1a-fld .intl-tel-input { width: 100%; }
.s1a-hint, .s1a-fld .form-text { margin: 0; font-size: 14px; line-height: 1.45; color: var(--s1-ink-2); }
.s1a-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 28px; }
.s1a-actions--end { justify-content: flex-end; }
.s1a-fs { margin: 40px 0 0; padding: 0; border: 0; min-width: 0; }
.s1a-fs:first-child { margin-top: 0; }
.s1a-fs > legend { width: auto; float: none; }
.s1a-inline { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.s1a-inline > .s1a-fld { flex: 1 1 280px; }

/* cases à cocher en liste */
.s1a-checks { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.s1a-check { display: flex; align-items: flex-start; gap: 12px; margin: 0; font-size: 15px; line-height: 1.45; font-weight: var(--s1-w-body); color: var(--s1-ink); cursor: pointer; }
.s1a-check input[type="checkbox"], .s1a-check input[type="radio"] { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--s1-ink); cursor: pointer; }
.s1a-check small { display: block; margin-top: 2px; font-size: 14px; color: var(--s1-ink-2); }
.s1a-check.is-locked { cursor: default; opacity: .7; }

/* choix en pilules (priorité, rôle) */
.s1a-choice { display: flex; flex-wrap: wrap; gap: 10px; }
.s1a-choice label { position: relative; margin: 0; cursor: pointer; }
.s1a-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.s1a-choice span { display: inline-flex; align-items: center; min-height: var(--s1-h-ctl); padding: 10px 18px; border: 1px solid var(--s1-line); border-radius: var(--s1-r-pill); background: var(--s1-white); font-size: 15px; color: var(--s1-ink); transition: border-color var(--s1-dur) var(--s1-ease); }
.s1a-choice label:hover span { border-color: var(--s1-line-strong); }
.s1a-choice input:checked + span { border: 2px solid var(--s1-ink); padding: 9px 17px; font-weight: var(--s1-w-strong); }
.s1a-choice input:focus-visible + span { outline: 2px solid var(--s1-ink); outline-offset: 3px; }

/* rôles (invitation, permissions) : cartes simples */
.s1a-roles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.s1a-role { position: relative; display: block; margin: 0; cursor: pointer; }
.s1a-role input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.s1a-role > span { display: block; height: 100%; padding: 16px 18px; border: 1px solid var(--s1-line); border-radius: var(--s1-r-lg); background: var(--s1-white); }
.s1a-role strong { display: block; font-size: 16px; font-weight: var(--s1-w-strong); }
.s1a-role small { display: block; margin-top: 4px; font-size: 14px; line-height: 1.45; color: var(--s1-ink-2); }
.s1a-role:hover > span { border-color: var(--s1-line-strong); }
.s1a-role input:checked + span { border: 2px solid var(--s1-ink); padding: 15px 17px; }
.s1a-role input:focus-visible + span { outline: 2px solid var(--s1-ink); outline-offset: 3px; }
.s1a-perms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; margin-top: 20px; padding: 20px 22px; border: 1px solid var(--s1-line); border-radius: var(--s1-r-lg); background: var(--s1-white); }

/* fichiers joints (input natif Bootstrap .custom-file conservé pour le JS WHMCS) */
.s1a-files { display: grid; gap: 10px; }
.s1a .custom-file { position: relative; display: block; width: 100%; height: auto; margin: 0; }
.s1a .custom-file-input { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.s1a .custom-file-label { position: relative; inset: auto; display: flex; align-items: center; gap: 10px; height: auto; min-height: var(--s1-h-field); margin: 0; padding: 11px 16px; border: 1px dashed var(--s1-field); border-radius: var(--s1-r-md); background: var(--s1-white); color: var(--s1-ink-2); font-size: 15px; line-height: 1.4; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; box-shadow: none; }
.s1a .custom-file-label::after { display: none; }
.s1a .custom-file:hover .custom-file-label { border-color: var(--s1-ink); color: var(--s1-ink); }
.s1a .custom-file-input:focus ~ .custom-file-label { border-color: var(--s1-ink); box-shadow: var(--s1-ring); }
.s1a .custom-file-label i { color: var(--s1-ink); }
.s1a #fileUploadsContainer:empty { display: none; }
.s1a #fileUploadsContainer > * + * { margin-top: 10px; }

/* éditeur Markdown : compteur "lines / words" en anglais (JS du coeur) masqué */
.s1a .md-footer:has(.markdown-editor-status) { display: none; }
.s1a .markdown-editor-status { display: none; }

/* ---------- barre d'outils : recherche + filtres ---------- */
.s1a-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; margin: 0 0 20px; }
.s1a-search { position: relative; flex: 1 1 260px; max-width: 380px; }
.s1a-search i { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--s1-ink-2); pointer-events: none; }
.s1a-search .form-control { padding-left: 44px; }
.s1a-pills { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 4px; border-radius: 24px; background: var(--s1-soft); }
.s1a-pills button, .s1a-pills a { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 16px; border: 0; border-radius: var(--s1-r-pill); background: transparent; color: var(--s1-ink); font-family: var(--s1-font); font-size: 15px; line-height: 1.2; text-decoration: none; cursor: pointer; }
.s1a-pills button:hover, .s1a-pills a:hover { background: rgba(255, 255, 255, .6); color: var(--s1-ink); text-decoration: none; }
.s1a-pills [aria-pressed="true"], .s1a-pills [aria-current="page"] { background: var(--s1-white); box-shadow: 0 0 0 1px var(--s1-line); }
.s1a-pills .c { font-size: 13px; color: var(--s1-ink-2); font-variant-numeric: tabular-nums; }

/* ---------- lignes de liste ---------- */
.s1a-rows { margin: 0; padding: 0; border-top: 1px solid var(--s1-line); list-style: none; }
.s1a-row { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 4px 18px; align-items: center; padding: 18px 8px; border-bottom: 1px solid var(--s1-line); color: var(--s1-ink); text-decoration: none; }
.s1a-row--plain { grid-template-columns: minmax(0, 1fr) auto; }
a.s1a-row:hover, button.s1a-row:hover { background: var(--s1-g50); color: var(--s1-ink); text-decoration: none; }
a.s1a-row:hover .s1a-row__t { text-decoration: underline; text-underline-offset: 3px; }
button.s1a-row { width: 100%; border-width: 0 0 1px; background: transparent; font: inherit; text-align: left; cursor: pointer; }
.s1a-row > i { font-size: 18px; text-align: center; color: var(--s1-ink); }
.s1a-row__m { min-width: 0; }
.s1a-row__t { display: block; font-size: 16px; line-height: 1.4; overflow-wrap: anywhere; }
.s1a-row__s { display: block; margin-top: 3px; font-size: 14px; line-height: 1.45; color: var(--s1-ink-2); overflow-wrap: anywhere; }
.s1a-row__e { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px 18px; font-size: 14px; color: var(--s1-ink-2); text-align: right; }
.s1a-row__e .num { white-space: nowrap; }
.s1a-row.is-unread .s1a-row__t { font-weight: var(--s1-w-strong); }
.s1a-dot { display: inline-block; width: 8px; height: 8px; margin: 0 8px 2px 0; border-radius: 50%; background: var(--s1-red); vertical-align: middle; }
.s1a-foot { margin: 14px 0 0; font-size: 14px; color: var(--s1-ink-2); text-align: right; }

/* statuts : texte discret à couleur sémantique */
.s1a-st { font-size: 14px; white-space: nowrap; color: var(--s1-ink-2); }
.s1a-st--open, .s1a-st--ok { color: var(--s1-ok); }
.s1a-st--answered, .s1a-st--in-progress, .s1a-st--info { color: var(--s1-info); }
.s1a-st--customer-reply, .s1a-st--on-hold, .s1a-st--warn { color: var(--s1-warn); }
.s1a-st--crit { color: var(--s1-crit); font-weight: var(--s1-w-strong); }
.s1a-tag { display: inline-block; margin-left: 8px; font-size: 14px; font-weight: var(--s1-w-body); color: var(--s1-ink-2); }

/* ---------- état vide ---------- */
.s1a-empty { padding: 36px 32px; border: 1px solid var(--s1-line); border-radius: var(--s1-r-xl); }
.s1a-empty h2 { margin: 0; font-size: 22px; line-height: 1.3; }
.s1a-empty p { margin: 8px 0 0; max-width: 60ch; color: var(--s1-ink-2); }
.s1a-empty .btn { margin-top: 20px; }

/* ---------- fil de ticket ---------- */
.s1a-meta { display: flex; flex-wrap: wrap; gap: 12px 36px; margin: -8px 0 36px; padding: 0; }
.s1a-meta div { min-width: 0; }
.s1a-meta dt { margin: 0; font-size: 13px; font-weight: var(--s1-w-body); color: var(--s1-ink-2); }
.s1a-meta dd { margin: 2px 0 0; font-size: 15px; }
.s1a-thread { display: grid; gap: 16px; max-width: 860px; margin: 0; padding: 0; list-style: none; }
.s1a-msg { min-width: 0; padding: 22px 26px; border: 1px solid var(--s1-line); border-radius: var(--s1-r-lg); background: var(--s1-white); }
.s1a-msg--staff { background: var(--s1-g50); }
.s1a-msg__h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; margin-bottom: 12px; }
.s1a-msg__h strong { font-size: 16px; font-weight: var(--s1-w-strong); }
.s1a-msg__h span { font-size: 14px; color: var(--s1-ink-2); font-variant-numeric: tabular-nums; }
.s1a-msg__b { font-size: 16px; line-height: 1.6; overflow-wrap: anywhere; }
.s1a-msg__b > :last-child { margin-bottom: 0; }
.s1a-msg__b p { margin: 0 0 12px; }
.s1a-msg__b img { max-width: 100%; height: auto; }
.s1a-msg__b pre { max-width: 100%; overflow: auto; padding: 14px 16px; border-radius: var(--s1-r-md); background: var(--s1-soft); }
.s1a-msg__b blockquote { margin: 0 0 12px; padding-left: 14px; border-left: 2px solid var(--s1-line); color: var(--s1-ink-2); }
.s1a-msg__ip { margin-top: 14px; font-size: 13px; color: var(--s1-ink-2); }
.s1a-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.s1a-chips a, .s1a-chips span { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; max-width: 100%; padding: 6px 14px; border: 1px solid var(--s1-line); border-radius: var(--s1-r-pill); background: var(--s1-white); font-size: 14px; color: var(--s1-ink); text-decoration: none; overflow-wrap: anywhere; }
.s1a-chips a:hover { border-color: var(--s1-line-strong); color: var(--s1-ink); text-decoration: none; }
.s1a-chips .is-removed { color: var(--s1-ink-2); text-decoration: line-through; }
.s1a-wait { display: flex; gap: 10px; align-items: baseline; max-width: 860px; margin: 18px 0 0; font-size: 15px; color: var(--s1-ink-2); }
.s1a-reply { max-width: 860px; margin-top: 48px; }
/* notation des réponses (JS WHMCS : .rating .star) */
.s1a .rating, .s1a .rating-done { display: inline-flex; flex-direction: row-reverse; gap: 2px; margin-top: 14px; }
.s1a .rating-done { flex-direction: row; align-items: center; }
.s1a .rating .star, .s1a .rating-done .star { font-size: 20px; line-height: 1; color: var(--s1-line-strong); cursor: pointer; }
.s1a .rating-done .star { cursor: default; }
.s1a .rating .star::before, .s1a .rating-done .star::before { content: "\2605"; }
.s1a .rating .star:hover, .s1a .rating .star:hover ~ .star, .s1a .rating-done .star.active { color: var(--s1-ink); }
.s1a .rating-done .rated { margin-left: 10px; font-size: 14px; color: var(--s1-ink-2); }

/* ---------- confirmation ---------- */
.s1a-done { max-width: 620px; }
.s1a-done .s1a-ref { display: inline-block; margin: 14px 0 0; font-size: 18px; font-variant-numeric: tabular-nums; }

/* ---------- articles (annonces, base de connaissances, téléchargements) ---------- */
.s1a-cats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--s1-line); }
.s1a-cats .s1a-row { grid-template-columns: minmax(0, 1fr) auto; }
.s1a-post { padding: 28px 0; border-bottom: 1px solid var(--s1-line); }
.s1a-post:first-child { padding-top: 0; }
.s1a-post time, .s1a-date { display: block; font-size: 14px; color: var(--s1-ink-2); }
.s1a-post h2 { margin: 6px 0 10px; font-size: 22px; line-height: 1.3; }
.s1a-post h2 a { color: var(--s1-ink); text-decoration: none; }
.s1a-post h2 a:hover { text-decoration: underline; text-underline-offset: 3px; }
.s1a-post__b { max-width: 72ch; font-size: 16px; line-height: 1.6; color: var(--s1-ink-2); }
.s1a-post__b > :last-child { margin-bottom: 0; }
.s1a-post .btn-link { margin-top: 6px; padding-left: 0; }
.s1a-doc { max-width: 76ch; font-size: 17px; line-height: 1.7; overflow-wrap: anywhere; }
.s1a-doc > :first-child { margin-top: 0; }
.s1a-doc h1, .s1a-doc h2, .s1a-doc h3, .s1a-doc h4 { margin: 36px 0 12px; line-height: 1.25; font-weight: var(--s1-w-subtitle); }
.s1a-doc h1 { font-size: 30px; } .s1a-doc h2 { font-size: 24px; } .s1a-doc h3 { font-size: 20px; } .s1a-doc h4 { font-size: 18px; }
.s1a-doc p { margin: 0 0 16px; }
.s1a-doc a { color: var(--s1-ink); text-decoration: underline; text-decoration-color: var(--s1-red); text-underline-offset: 3px; }
.s1a-doc ul { padding-left: 0; list-style: none; }
.s1a-doc ul > li { position: relative; padding-left: 22px; margin-bottom: 8px; }
.s1a-doc ul > li::before { content: ""; position: absolute; left: 2px; top: .7em; width: 7px; height: 7px; background: var(--s1-red); }
.s1a-doc ol { padding-left: 22px; }
.s1a-doc ol > li { margin-bottom: 8px; }
.s1a-doc blockquote { margin: 24px 0; padding: 16px 20px; border-radius: var(--s1-r-md); background: var(--s1-g50); }
.s1a-doc code { padding: 2px 6px; border-radius: 6px; background: var(--s1-soft); color: var(--s1-ink); font-size: .9em; }
.s1a-doc pre { overflow: auto; padding: 16px 18px; border-radius: var(--s1-r-md); background: var(--s1-ink); color: #fff; }
.s1a-doc pre code { padding: 0; background: none; color: inherit; }
.s1a-doc table { display: block; width: 100%; max-width: 100%; overflow-x: auto; margin: 24px 0; border-collapse: collapse; font-size: 15px; }
.s1a-doc th, .s1a-doc td { padding: 10px 12px; border-bottom: 1px solid var(--s1-line); text-align: left; vertical-align: top; }
.s1a-doc img { max-width: 100%; height: auto; border-radius: var(--s1-r-md); }
.s1a-vote { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; max-width: 76ch; margin-top: 40px; padding: 22px 24px; border: 1px solid var(--s1-line); border-radius: var(--s1-r-lg); }
.s1a-vote h2 { margin: 0; font-size: 18px; }
.s1a-vote p { margin: 4px 0 0; font-size: 14px; color: var(--s1-ink-2); }
.s1a-vote form { display: flex; flex-wrap: wrap; gap: 10px; }
.s1a-back { margin-top: 36px; }

/* état du réseau */
.s1a-banner { display: flex; gap: 12px; align-items: baseline; margin: 0 0 28px; padding: 16px 20px; border-radius: var(--s1-r-lg); background: var(--s1-g50); font-size: 15px; }
.s1a-banner--ok { background: var(--s1-ok-bg); color: var(--s1-ok); }
.s1a-banner--warn { background: var(--s1-ink); color: #fff; }
.s1a-banner--warn i { color: var(--s1-red); }
.s1a-banner a { color: inherit; text-decoration: underline; }
.s1a-srv { padding: 22px 0; border-bottom: 1px solid var(--s1-line); }
.s1a-srv:first-child { border-top: 1px solid var(--s1-line); }
.s1a-srv__h { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; margin-bottom: 14px; }
.s1a-srv__h h3 { margin: 0; font-size: 18px; }
.s1a-srv dl { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px 20px; margin: 0; }
.s1a-srv dt { font-size: 13px; font-weight: var(--s1-w-body); color: var(--s1-ink-2); }
.s1a-srv dd { margin: 2px 0 0; font-size: 15px; }
.s1a-srv dd .label { font-size: 15px; }
.s1a-issue { padding: 24px 0; border-bottom: 1px solid var(--s1-line); }
.s1a-issue:first-child { border-top: 1px solid var(--s1-line); }
.s1a-issue h3 { margin: 0; font-size: 18px; }
.s1a-issue__h { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.s1a-issue__h h3 { margin: 0 6px 0 0; }
.s1a-pill { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: var(--s1-r-pill); font-size: 13px; font-weight: var(--s1-w-strong); white-space: nowrap; background: var(--s1-soft); color: var(--s1-ink-2); }
.s1a-pill.is-ok { background: var(--s1-ok-bg); color: var(--s1-ok); }
.s1a-pill.is-warn { background: var(--s1-warn-bg); color: var(--s1-warn); }
.s1a-pill.is-crit { background: var(--s1-crit-bg); color: var(--s1-crit); }
.s1a-issue__m { display: flex; flex-wrap: wrap; gap: 8px 32px; margin: 12px 0 14px; }
.s1a-issue__m dt { margin: 0 0 2px; font-size: 13px; font-weight: 400; color: var(--s1-ink-2); }
.s1a-issue__m dd { margin: 0; font-size: 15px; color: var(--s1-ink); }
.s1a-issue__warn { margin: 0 0 12px; padding: 10px 14px; border-radius: var(--s1-r-lg); background: var(--s1-crit-bg); color: var(--s1-crit); font-size: 14px; }
.s1a-issue.is-done .s1a-issue__b { color: var(--s1-ink-2); }
.s1a-issue__b { max-width: 72ch; font-size: 15px; line-height: 1.6; }
.s1a-pager { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }

/* ---------- connexion, mot de passe oublié, double authentification ---------- */
.s1x-auth { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: stretch; max-width: 1180px; margin: 0 auto; padding: 72px 0 96px; color: var(--s1-ink); }
.s1x-auth__f { max-width: 460px; width: 100%; justify-self: center; align-self: center; }
.s1x-auth__f h1 { margin: 0; font-size: clamp(32px, 4vw, 44px); line-height: 1.1; font-weight: var(--s1-w-title); }
.s1x-auth__f .s1a-sub { margin-bottom: 32px; }
.s1x-auth__f form + form, .s1x-auth__f form + p { margin-top: 20px; }
.s1x-auth .s1a-fld { margin-bottom: 20px; }
.s1x-auth .s1a-fld + .s1a-fld { margin-top: 0; }
.s1x-auth__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.s1x-auth__row label { margin: 0; }
.s1x-auth__row a { font-size: 14px; }
.s1x-auth .btn-block { margin-top: 8px; }
.s1x-auth__alt { margin: 28px 0 0; padding-top: 20px; border-top: 1px solid var(--s1-line); font-size: 15px; color: var(--s1-ink-2); }
.s1x-auth__alt a { color: var(--s1-ink); text-decoration: underline; text-underline-offset: 3px; }
.s1x-auth__v { display: flex; flex-direction: column; justify-content: space-between; gap: 40px; min-height: 520px; padding: 48px 44px; border-radius: var(--s1-r-xl); background: var(--s1-ink); color: #fff; }
.s1x-auth__v h2 { margin: 0; max-width: 18ch; font-size: clamp(28px, 3vw, 38px); line-height: 1.15; font-weight: var(--s1-w-title); color: #fff; }
.s1x-auth__v p { margin: 16px 0 0; max-width: 46ch; font-size: 16px; line-height: 1.6; color: var(--s1-on-dark-2); }
.s1x-auth__v ul { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.s1x-auth__v li { position: relative; padding-left: 22px; font-size: 16px; color: var(--s1-on-dark); }
.s1x-auth__v li::before { content: ""; position: absolute; left: 0; top: .5em; width: 8px; height: 8px; background: var(--s1-red); }
.s1x-auth__pw { position: relative; }
.s1x-auth__pw .form-control { padding-right: 52px; }
.s1x-auth__pw .btn-reveal-pw { position: absolute; top: 50%; right: 4px; transform: translateY(-50%); min-height: 40px; width: 44px; padding: 0; border: 0; border-radius: var(--s1-r-pill); background: transparent; color: var(--s1-ink-2); }
.s1x-auth__pw .btn-reveal-pw:hover { background: var(--s1-soft); color: var(--s1-ink); }
.s1x-auth .providerLinkingFeedback:empty { display: none; }
.s1x-auth__code { display: block; margin: 12px 0 16px; padding: 18px 20px; border-radius: var(--s1-r-md); background: var(--s1-soft); font-family: var(--s1-mono); font-size: 22px; letter-spacing: .08em; text-align: center; overflow-wrap: anywhere; }
/* bloc rendu par le module 2FA (TOTP...) : champs et bouton remappés */
.s1x-tfa-slot input[type="text"], .s1x-tfa-slot input[type="number"], .s1x-tfa-slot input[type="tel"] { width: 100%; max-width: 100%; }
.s1x-tfa-slot .text-center { text-align: left !important; }
.s1x-tfa-slot img { max-width: 100%; height: auto; }
.s1x-tfa-slot .btn, .s1x-tfa-slot input[type="submit"] { width: 100%; margin-top: 12px; }

/* modale d'activation de la double authentification (contenu WHMCS) */
.modal.twofa-setup .modal-body { color: var(--s1-ink); font-size: 15px; line-height: 1.55; }
.modal.twofa-setup .modal-body img { display: block; max-width: 220px; height: auto; margin: 12px 0; }
.modal.twofa-setup .modal-body .panel, .modal.twofa-setup .modal-body .card { margin-bottom: 10px; border-radius: var(--s1-r-lg); }
.modal.twofa-setup .modal-body .panel-body { padding: 16px 18px; }
.modal.twofa-setup .modal-body input[type="text"] { width: 100%; min-height: var(--s1-h-field); padding: 11px 14px; border: 1px solid var(--s1-field); border-radius: var(--s1-r-md); font-size: 16px; }

/* ---------- impression ---------- */
@media print {
    .s1a-tabs, .s1a-head__a, .s1a-reply, .s1a-vote, .s1a-back { display: none !important; }
}

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
    .s1x-auth { grid-template-columns: minmax(0, 1fr); padding: 48px 0 72px; }
    .s1x-auth__v { display: none; }
}
@media (max-width: 900px) {
    .s1a-g2, .s1a-cats { grid-template-columns: minmax(0, 1fr); }
    .s1a-srv dl { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .s1a { padding-bottom: 56px; }
    .s1a-head { margin-bottom: 28px; }
    .s1a-head__a, .s1a-head__a .btn { width: 100%; }
    /* Mobile : onglets sur plusieurs lignes, aucun hors écran (Sécurité était masqué à 390 px). */
    .s1a-tabs { flex-wrap: wrap; overflow-x: visible; gap: 0 20px; margin-bottom: 32px; }
    .s1a-tabs a { padding: 10px 0; }
    .s1a-grid, .s1a-roles, .s1a-perms { grid-template-columns: minmax(0, 1fr); }
    .s1a-card { padding: 22px 20px; }
    .s1a-row { grid-template-columns: 20px minmax(0, 1fr); padding: 16px 4px; }
    .s1a-row--plain, .s1a-cats .s1a-row { grid-template-columns: minmax(0, 1fr); }
    .s1a-row__e { grid-column: 2; justify-content: flex-start; text-align: left; }
    .s1a-row--plain .s1a-row__e, .s1a-cats .s1a-row__e { grid-column: 1; }
    .s1a-tools { align-items: stretch; }
    .s1a-search { max-width: none; }
    .s1a-msg { padding: 18px; }
    .s1a-actions > .btn { flex: 1 1 auto; }
    .s1a-srv dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .s1a-empty { padding: 26px 20px; }
    .s1x-auth { padding: 32px 0 56px; }
}

/* étapes guidées (activation de la double authentification) */
.s1a-steps { display: grid; gap: 10px; margin: 0 0 4px; padding: 0; list-style: none; counter-reset: s1step; }
.s1a-steps li { position: relative; padding-left: 34px; font-size: 15px; line-height: 1.5; counter-increment: s1step; }
.s1a-steps li::before { content: counter(s1step); position: absolute; left: 0; top: 0; width: 24px; height: 24px; border: 1px solid var(--s1-line-strong); border-radius: 50%; font-size: 13px; line-height: 22px; text-align: center; font-variant-numeric: tabular-nums; }
/* jauge de force du mot de passe (includes/pwstrength.tpl) */
.s1a-pwmeter > br { display: none; }
.s1a-pwmeter .progress { height: 6px; margin: 4px 0 10px !important; }
.s1a-pwmeter .progress-bar.bg-danger { background-color: var(--s1-crit) !important; }
.s1a-pwmeter .progress-bar.bg-warning { background-color: #c27a12 !important; }
.s1a-pwmeter .progress-bar.bg-success { background-color: var(--s1-ok) !important; }
.s1a-pwmeter .alert { margin: 0; padding: 0; background: none; font-size: 14px; color: var(--s1-ink-2); }
.s1a-pwmeter .alert i { display: none; }
.s1a-fld .form-control.is-warning { border-color: #c27a12; }
.s1a-fld .form-control.is-valid { border-color: var(--s1-ok); background-image: none; padding-right: 14px; }
.s1a-perms--locked .s1a-check { cursor: default; }
.s1a-perms--locked .s1a-check input { opacity: .55; }
.modal-body.s1a { padding-top: 12px; padding-bottom: 8px; }
.modal-body.s1a .s1a-perms { margin-top: 16px; }
/* infos du ticket reprises de la barre latérale WHMCS (libellé HTML brut) */
.s1a-meta--raw { list-style: none; }
.s1a-meta--raw li { min-width: 0; font-size: 15px; }
.s1a-meta--raw .title { display: block; font-size: 13px; color: var(--s1-ink-2); }
.s1a-meta--raw br { display: none; }
.s1a-meta--raw .label, .s1a-meta--raw .badge { font-size: 15px; }
.s1a-files + .file-upload + div .btn-link { padding-left: 0; }
.s1a-captcha:not(:empty) { margin-top: 20px; }
.s1x-auth .s1a-captcha:not(:empty) { margin: 0 0 20px; }

body:has(.s1x-auth) .s1-footer { margin-top: 0; }
.s1a-grid > .s1a-fld, .s1a-grid > .s1a-fld + .s1a-fld { margin-top: 0; }
.s1a-meta--raw .label, .s1a-meta--raw .badge, .s1a-meta--raw [style*="background"] { display: inline; padding: 0; border-radius: 0; background: none !important; color: inherit !important; font-weight: var(--s1-w-body); }
.s1a .w-hidden, .s1x-auth .w-hidden { display: none !important; }
.s1a-fld .input-group > .form-control { width: 1%; flex: 1 1 auto; min-width: 0; }
.s1a .s1a-pwmeter .alert, .s1x-auth .s1a-pwmeter .alert { margin: 0 !important; padding: 12px 14px !important; border: 0 !important; border-radius: var(--s1-r-md) !important; background: var(--s1-white) !important; box-shadow: none !important; color: var(--s1-ink-2) !important; font-size: 14px !important; line-height: 1.5 !important; }
.s1a-card .s1a-pwmeter .alert { background: var(--s1-white) !important; }
.s1a-pwmeter .alert *, .s1a-pwmeter .alert small { color: inherit !important; font-size: inherit !important; font-weight: var(--s1-w-body) !important; }
.s1a-pwmeter .alert strong, .s1a-pwmeter .alert b { color: var(--s1-ink) !important; font-weight: var(--s1-w-strong) !important; }
.s1a #emailChangePasswordConfirmation[readonly] { background-color: var(--s1-white); border-color: var(--s1-field); }

/* visiteur non connecté (en-tête public fixe de 64 px, pas de gouttière de coquille) */
body:not(.is-logged-in) .s1a { max-width: 1240px; margin: 0 auto; padding: 120px 32px 80px; }
body:not(.is-logged-in) .s1x-auth { padding: 128px 32px 96px; }
@media (max-width: 640px) {
    body:not(.is-logged-in) .s1a { padding: 96px 16px 56px; }
    body:not(.is-logged-in) .s1x-auth { padding: 96px 16px 56px; }
}
.s1a-head h1, .s1a-done h1, .s1x-auth__f h1 { font-family: var(--s1-font); font-weight: var(--s1-w-title); letter-spacing: -0.015em; }
.s1x-auth__pw > .form-control { border-radius: var(--s1-r-md) !important; }

/* Mot de passe (Sécurité, profil, invitation) : "Générer" détaché du champ, même hauteur
   et même forme pilule que les autres boutons ; conseils en encadré neutre à filet. */
.s1a-fld .input-group { flex-wrap: nowrap; gap: 8px; align-items: stretch; }
.s1a-fld .input-group > .form-control { border-radius: var(--s1-r-md) !important; }
.s1a-fld .input-group-append { margin-left: 0; }
.s1a-fld .input-group-append > .btn { border-radius: var(--s1-r-pill) !important; min-height: var(--s1-h-ctl); padding: 0 20px; white-space: nowrap; }
.s1a .s1a-pwmeter .alert, .s1x-auth .s1a-pwmeter .alert, .s1a-card .s1a-pwmeter .alert { border: 1px solid var(--s1-line) !important; background: transparent !important; }

/* ===== Revue 08.10 : cases de la charte (comme Mes domaines) et interrupteurs pour les e-mails ===== */
.s1a-check input[type="checkbox"] {
    -webkit-appearance: none; appearance: none; width: 18px; height: 18px; margin: 2px 0 0;
    border: 1.5px solid var(--s1-line-strong); border-radius: 5px; background: #fff center / 12px 12px no-repeat;
    transition: background-color .15s ease, border-color .15s ease;
}
.s1a-check input[type="checkbox"]:hover { border-color: var(--s1-ink-2); }
.s1a-check input[type="checkbox"]:checked {
    border-color: var(--s1-red); background-color: var(--s1-red);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-4.9' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.s1a-check input[type="checkbox"]:focus-visible { outline: 2px solid var(--s1-red); outline-offset: 2px; }
/* Interrupteurs : texte à gauche, interrupteur à droite. */
.s1a-checks--sw { gap: 0; max-width: 760px; }
.s1a-checks--sw .s1a-check, .s1a-check--sw { flex-direction: row-reverse; justify-content: space-between; align-items: center; gap: 24px; padding: 12px 0; max-width: 760px; }
.s1a-checks--sw .s1a-check input[type="checkbox"], .s1a-check--sw input[type="checkbox"] {
    width: 44px; height: 26px; margin: 0; border: 0; border-radius: 999px; background-color: #8a8a8a;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%23fff'/%3E%3C/svg%3E");
    background-size: 20px 20px; background-position: 3px center; background-repeat: no-repeat;
    transition: background-color .2s ease, background-position .2s ease;
}
.s1a-checks--sw .s1a-check input[type="checkbox"]:checked, .s1a-check--sw input[type="checkbox"]:checked {
    background-color: var(--s1-red); background-position: 21px center;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%23fff'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: reduce) { .s1a-check input[type="checkbox"] { transition: none; } }

/* Mes tickets : référence sous le sujet, statut en pastille (revue lot 3). */
.s1a-row__s .num { margin-right: 10px; font-variant-numeric: tabular-nums; }
.s1a-tkst { display: inline-flex; align-items: center; min-height: 26px; padding: 3px 12px; border-radius: var(--s1-r-pill); background: var(--s1-soft); color: var(--s1-ink); font-size: 13px; line-height: 1.3; white-space: nowrap; }
.s1a-tkst--answered { background: var(--s1-warn-bg); color: var(--s1-warn); font-weight: var(--s1-w-strong); }
.s1a-tkst--closed { color: var(--s1-ink-2); }

/* Base de connaissances : catégories en tuiles (comme l'accueil) et articles visiblement cliquables (retour Nolann 08.10). */
.s1kb-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.s1kb-tile { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; padding: 22px; border: 1px solid var(--s1-line); border-radius: var(--s1-r-xl); background: var(--s1-white); transition: border-color var(--s1-dur) var(--s1-ease); }
.s1kb-tile:hover { border-color: rgba(34, 34, 34, .35); }
.s1kb-tile:has(.s1kb-tile__t:focus-visible) { outline: 2px solid var(--s1-red); outline-offset: 3px; }
.s1kb-tile__ic { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-bottom: 4px; border-radius: var(--s1-r-md, 10px); background: var(--s1-tint); color: var(--s1-red); font-size: 18px; }
.s1kb-tile__t { font-size: 17px; line-height: 1.3; font-weight: var(--s1-w-strong); color: var(--s1-ink); text-decoration: none; }
.s1kb-tile__t::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.s1kb-tile__t:hover { color: var(--s1-ink); text-decoration: underline; text-underline-offset: 3px; }
.s1kb-tile__t:focus-visible { outline: 0; }
.s1kb-tile__d { margin: 0; font-size: 14px; line-height: 1.5; color: var(--s1-ink-2); }
.s1kb-tile__n { margin-top: auto; padding-top: 4px; font-size: 14px; color: var(--s1-ink-2); font-variant-numeric: tabular-nums; }
.s1a-row--plain:has(.s1kb-chev) { grid-template-columns: minmax(0, 1fr) auto; }
.s1a-row--plain .s1a-row__t { font-weight: var(--s1-w-strong); }
a.s1a-row--plain:hover { background: var(--s1-soft); }
.s1kb-chev { font-size: 16px; color: var(--s1-ink-2); }
@media (max-width: 560px) { .s1kb-tiles { grid-template-columns: minmax(0, 1fr); gap: 10px; } .s1kb-tile { padding: 18px; } }
@media (max-width: 640px) { .s1a-row--plain:has(.s1kb-chev) { grid-template-columns: minmax(0, 1fr) auto; } .s1a-row--plain:has(.s1kb-chev) .s1a-row__e { grid-column: 2; grid-row: 1 / span 2; align-self: center; } }

/* Détail d'un ticket : ligne d'infos (statut en pastille, priorité à part). */
.s1vt-meta { display: flex; flex-wrap: wrap; gap: 16px 40px; margin: 0 0 32px; }
.s1vt-meta > div { min-width: 0; }
.s1vt-meta dt { margin: 0 0 4px; font-size: 14px; font-weight: var(--s1-w-body); color: var(--s1-ink-2); }
.s1vt-meta dd { margin: 0; font-size: 16px; color: var(--s1-ink); }