/* ==========================================================================
   1SWISS1 - s1-ui.css : système de design de l'espace client (refonte v01)
   --------------------------------------------------------------------------
   Chargé EN DERNIER dans includes/head.tpl (après custom.css). Rôle :
     1. jetons (police, couleurs charte, rayons, espacements) + remappage des
        anciens jetons --1s1-* pour que tout le thème suive ;
     2. remappage des composants Bootstrap / thème (boutons 3 niveaux,
        champs, cartes, tableaux, statuts, alertes, onglets, pagination,
        modales, menus déroulants, liens) ;
     3. coquille de l'espace client (barre latérale, barre haute, palette de
        recherche, pied de page).
   Spécificité volontairement basse (classe seule, + :where() pour les
   exclusions) : les styles propres à une page (blocs <style> des .tpl,
   chargés après) gardent la main ; les couches génériques du thème
   (theme.min.css, _components.css, custom.css) sont écrasées par l'ordre de
   chargement. Les scopes génériques plus spécifiques du thème (.s1-page,
   .s1skin, .sidebar-card) sont repris explicitement dans les sélecteurs.
   Exclusion : l'app Vue ModulesGarden (.modulesgarden-app-main-container)
   garde son propre design (cf. mémoire project_theme_module_button_clobber).
   Pour changer de police : modifier UNIQUEMENT --s1-font (et au besoin les
   graisses --s1-w-*).
   ========================================================================== */

/* ---------- 0. Police Lato (charte 1SWISS1), auto-hébergée ---------- */
@font-face { font-family: "Lato"; font-style: normal; font-weight: 300; font-display: swap; src: url("../fonts/lato/lato-latin-300-normal.woff2") format("woff2"); }
@font-face { font-family: "Lato"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/lato/lato-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Lato"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/lato/lato-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Lato"; font-style: normal; font-weight: 900; font-display: swap; src: url("../fonts/lato/lato-latin-900-normal.woff2") format("woff2"); }

/* ---------- 1. Jetons ---------- */
:root {
    /* Typographie : UNE variable pour toute l'interface */
    --s1-font: "Lato", "Aptos Narrow", Calibri, system-ui, -apple-system, "Segoe UI", sans-serif;
    --s1-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    --s1-w-light: 300;
    --s1-w-body: 400;
    --s1-w-strong: 700;
    --s1-w-title: 900;    /* titres de page (charte : Black) */
    --s1-w-subtitle: 700; /* intertitres (charte : Bold) */
    --s1-w-btn: 700;

    /* Couleurs charte */
    --s1-red: #FF555D;
    --s1-red-hover: #ff7077;
    --s1-red-deep: #E52D36;          /* uniquement en départ de dégradé */
    --s1-gradient: linear-gradient(90deg, #E52D36, #FF555D);
    --s1-ink: #222222;
    --s1-ink-2: #555555;
    --s1-line: #E3E3E3;
    --s1-line-strong: #b9b9b9;
    --s1-field: #8a8a8a;
    --s1-soft: #F4F4F4;
    --s1-g50: #fbfbfb;
    --s1-white: #ffffff;
    --s1-on-dark: #F4F4F4;
    --s1-on-dark-2: #CCCCCC;
    /* Sémantique (statuts, conformité), avec sobriété */
    --s1-ok: #1b6b35;   --s1-ok-bg: #e7f4ea;
    --s1-warn: #7a4300; --s1-warn-bg: #fff1dc;
    --s1-info: #1d4a8a; --s1-info-bg: #e8f0fb;
    --s1-crit: #b42318; --s1-crit-bg: #fff4f4;

    /* Rayons, espacements, mouvement */
    --s1-r-sm: 10px;
    --s1-r-md: 12px;
    --s1-r-lg: 16px;
    --s1-r-xl: 20px;
    --s1-r-pill: 9999px;
    --s1-sp-1: 4px; --s1-sp-2: 8px; --s1-sp-3: 12px; --s1-sp-4: 16px; --s1-sp-5: 20px;
    --s1-sp-6: 24px; --s1-sp-8: 32px; --s1-sp-10: 40px; --s1-sp-12: 48px; --s1-sp-16: 64px;
    --s1-ease: cubic-bezier(0.7, 0, 0.31, 0.99);
    --s1-dur: 450ms;
    --s1-h-ctl: 44px;    /* hauteur commune des boutons */
    --s1-h-field: 48px;  /* hauteur des champs */
    --s1-ring: 0 0 0 3px rgba(255, 85, 93, .35);
    --s1-shadow-pop: 0 10px 30px rgba(0, 0, 0, .08);

    /* Remappage des anciens jetons du thème (_design-tokens.css) */
    --1s1-font-sans: var(--s1-font);
    --1s1-font-mono: var(--s1-mono);
    --1s1-brand: var(--s1-red);
    --1s1-brand-rgb: 255, 85, 93;
    --1s1-brand-hover: var(--s1-red-hover);
    --1s1-brand-active: #f0434c;
    --1s1-brand-soft: #fff1f1;
    --1s1-brand-on: var(--s1-ink);
    --1s1-accent: var(--s1-ink);          /* plus d'indigo : l'interactif est anthracite */
    --1s1-accent-hover: #000000;
    --1s1-accent-soft: var(--s1-soft);
    --1s1-accent-on: #ffffff;
    --1s1-bg: #ffffff;
    --1s1-surface: #ffffff;
    --1s1-surface-raised: #ffffff;
    --1s1-surface-sunken: var(--s1-soft);
    --1s1-border: var(--s1-line);
    --1s1-border-strong: var(--s1-line-strong);
    --1s1-text: var(--s1-ink);
    --1s1-text-muted: var(--s1-ink-2);
    --1s1-text-subtle: var(--s1-field);
    --1s1-text-link: var(--s1-ink);
    --1s1-text-link-hover: #000000;
    --1s1-dark: var(--s1-ink);
    --1s1-success: #2e7d4f;  --1s1-success-soft: var(--s1-ok-bg);   --1s1-success-text: var(--s1-ok);
    --1s1-warning: #c27a12;  --1s1-warning-soft: var(--s1-warn-bg); --1s1-warning-text: var(--s1-warn);
    --1s1-danger: var(--s1-crit); --1s1-danger-soft: var(--s1-crit-bg); --1s1-danger-text: var(--s1-crit);
    --1s1-info: var(--s1-info); --1s1-info-soft: var(--s1-info-bg); --1s1-info-text: var(--s1-info);
    --1s1-shadow-xs: none;
    --1s1-shadow-sm: none;
    --1s1-shadow-md: 0 1px 2px rgba(0, 0, 0, .04);
    --1s1-shadow-lg: var(--s1-shadow-pop);
    --1s1-shadow-xl: var(--s1-shadow-pop);
    --1s1-shadow-focus: var(--s1-ring);
    --1s1-shadow-focus-soft: var(--s1-ring);
}

/* ---------- 2. Base ---------- */
body {
    font-family: var(--s1-font);
    font-feature-settings: normal;
    font-weight: var(--s1-w-body);
    color: var(--s1-ink);
    background: var(--s1-white);
}
body.is-logged-in { background: var(--s1-white); }
button, input, optgroup, select, textarea { font-family: inherit; }
::selection { background: rgba(255, 85, 93, .25); color: var(--s1-ink); }
:focus-visible { outline: 2px solid var(--s1-red); outline-offset: 3px; }
code, kbd, pre, samp { font-family: var(--s1-mono); }

/* Titres de page : Lato Black (charte) ; intertitres Bold */
body.is-logged-in .s1-page-content h1:where(:not(.modulesgarden-app-main-container *)) {
    font-family: var(--s1-font);
    font-weight: var(--s1-w-title);
    letter-spacing: -0.015em;
}
body.is-logged-in .s1-page-content :is(h2, h3):where(:not(.modulesgarden-app-main-container *)) {
    font-family: var(--s1-font);
    font-weight: var(--s1-w-subtitle);
}
.num, .tabular { font-variant-numeric: tabular-nums; }

/* Liens : plus de bleu Bootstrap ; anthracite, soulignement au survol */
a { color: var(--s1-ink); text-underline-offset: 3px; }
a:hover { color: #000; text-decoration-color: var(--s1-red); }
.text-primary { color: var(--s1-ink) !important; }
.bg-primary { background-color: var(--s1-red) !important; color: var(--s1-ink); }
.border-primary { border-color: var(--s1-red) !important; }
.text-muted { color: var(--s1-ink-2) !important; }
.text-success { color: var(--s1-ok) !important; }
.text-warning { color: var(--s1-warn) !important; }
.text-danger { color: var(--s1-crit) !important; }
.text-info { color: var(--s1-info) !important; }

/* ---------- 3. Boutons : 3 niveaux, même hauteur, même rayon, même texte ---------- */
.btn:where(:not(.modulesgarden-app-main-container *)),
.s1-page .btn:where(:not(.modulesgarden-app-main-container *)),
.s1skin .btn,
.sidebar-card .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: var(--s1-h-ctl);
    padding: 10px 20px;
    border: 1px solid var(--s1-line);
    border-radius: var(--s1-r-pill);
    background: var(--s1-white);
    color: var(--s1-ink);
    font-family: var(--s1-font);
    font-size: 15px;
    font-weight: var(--s1-w-btn);
    line-height: 1.2;
    letter-spacing: 0;
    text-transform: none;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: none;
    transition: background-color var(--s1-dur) var(--s1-ease), border-color var(--s1-dur) var(--s1-ease), color var(--s1-dur) var(--s1-ease), transform 150ms var(--s1-ease);
}
.btn:where(:not(.modulesgarden-app-main-container *)):active:not(:disabled) { transform: scale(.98); }
.btn:where(:not(.modulesgarden-app-main-container *)):focus,
.btn:where(:not(.modulesgarden-app-main-container *)).focus { box-shadow: none; outline: 0; }
.btn:where(:not(.modulesgarden-app-main-container *)):focus-visible { outline: 2px solid var(--s1-red); outline-offset: 3px; }
.btn:where(:not(.modulesgarden-app-main-container *)):disabled,
.btn:where(:not(.modulesgarden-app-main-container *)).disabled { opacity: .5; cursor: not-allowed; }
/* tailles : une seule hauteur (44 px) ; sm/lg/xs ne changent que la largeur interne */
.btn-sm:where(:not(.modulesgarden-app-main-container *)),
.btn-lg:where(:not(.modulesgarden-app-main-container *)),
.btn-xs:where(:not(.modulesgarden-app-main-container *)),
.s1-page .btn-sm, .s1-page .btn-lg {
    min-height: var(--s1-h-ctl);
    padding: 10px 18px;
    font-size: 15px;
    border-radius: var(--s1-r-pill);
}
.btn-block:where(:not(.modulesgarden-app-main-container *)) { display: flex; width: 100%; }

/* (a) principal : rouge plein, texte anthracite */
.btn-primary:where(:not(.modulesgarden-app-main-container *)),
.btn-success:where(:not(.modulesgarden-app-main-container *)),
.s1-page .btn-primary, .s1skin .btn-primary, .s1skin .btn-success,
.sidebar-card .btn-primary, .sidebar-card .btn-success {
    background: var(--s1-red);
    border-color: var(--s1-red);
    color: var(--s1-ink);
}
.btn-primary:where(:not(.modulesgarden-app-main-container *)):hover,
.btn-success:where(:not(.modulesgarden-app-main-container *)):hover,
.btn-primary:where(:not(.modulesgarden-app-main-container *)):focus,
.btn-success:where(:not(.modulesgarden-app-main-container *)):focus,
.btn-primary:where(:not(.modulesgarden-app-main-container *)):not(:disabled):not(.disabled):active,
.btn-success:where(:not(.modulesgarden-app-main-container *)):not(:disabled):not(.disabled):active,
.s1-page .btn-primary:hover, .s1skin .btn-primary:hover, .s1skin .btn-success:hover,
.sidebar-card .btn-primary:hover, .sidebar-card .btn-success:hover {
    background: var(--s1-red-hover);
    border-color: var(--s1-red-hover);
    color: var(--s1-ink);
}
.btn-primary:where(:not(.modulesgarden-app-main-container *)):disabled,
.btn-success:where(:not(.modulesgarden-app-main-container *)):disabled,
.btn-primary:where(:not(.modulesgarden-app-main-container *)).disabled,
.btn-success:where(:not(.modulesgarden-app-main-container *)).disabled {
    background: var(--s1-red);
    border-color: var(--s1-red);
    color: var(--s1-ink);
}

/* (b) secondaire : blanc, filet gris, texte anthracite */
.btn-default:where(:not(.modulesgarden-app-main-container *)),
.btn-secondary:where(:not(.modulesgarden-app-main-container *)),
.btn-light:where(:not(.modulesgarden-app-main-container *)),
.btn-dark:where(:not(.modulesgarden-app-main-container *)),
.btn-info:where(:not(.modulesgarden-app-main-container *)),
.btn-warning:where(:not(.modulesgarden-app-main-container *)),
.btn-danger:where(:not(.modulesgarden-app-main-container *)),
[class*="btn-outline-"]:where(.btn):where(:not(.modulesgarden-app-main-container *)),
.s1-page .btn-default, .s1-page .btn-secondary,
.s1skin .btn-default, .s1skin .btn-secondary, .s1skin .btn-light, .s1skin .btn-danger {
    background: var(--s1-white);
    border-color: var(--s1-line);
    color: var(--s1-ink);
}
.btn-default:where(:not(.modulesgarden-app-main-container *)):hover,
.btn-secondary:where(:not(.modulesgarden-app-main-container *)):hover,
.btn-light:where(:not(.modulesgarden-app-main-container *)):hover,
.btn-dark:where(:not(.modulesgarden-app-main-container *)):hover,
.btn-info:where(:not(.modulesgarden-app-main-container *)):hover,
.btn-warning:where(:not(.modulesgarden-app-main-container *)):hover,
.btn-danger:where(:not(.modulesgarden-app-main-container *)):hover,
[class*="btn-outline-"]:where(.btn):where(:not(.modulesgarden-app-main-container *)):hover,
.btn-default:where(:not(.modulesgarden-app-main-container *)):not(:disabled):not(.disabled):active,
.btn-secondary:where(:not(.modulesgarden-app-main-container *)):not(:disabled):not(.disabled):active,
[class*="btn-outline-"]:where(.btn):where(:not(.modulesgarden-app-main-container *)):not(:disabled):not(.disabled):active,
.s1-page .btn-default:hover, .s1-page .btn-secondary:hover,
.s1skin .btn-default:hover, .s1skin .btn-secondary:hover, .s1skin .btn-danger:hover {
    background: var(--s1-white);
    border-color: var(--s1-line-strong);
    color: var(--s1-ink);
}
/* action destructive : secondaire, texte rouge foncé (statut) */
.btn-danger:where(:not(.modulesgarden-app-main-container *)),
.btn-outline-danger:where(:not(.modulesgarden-app-main-container *)),
.s1skin .btn-danger { color: var(--s1-crit); }
.btn-danger:where(:not(.modulesgarden-app-main-container *)):hover,
.btn-outline-danger:where(:not(.modulesgarden-app-main-container *)):hover { color: var(--s1-crit); border-color: var(--s1-crit); }

/* (c) tertiaire : lien texte souligné */
.btn-link:where(:not(.modulesgarden-app-main-container *)),
.s1skin .btn-link {
    background: none;
    border-color: transparent;
    border-radius: 0;
    padding: 10px 2px;
    color: var(--s1-ink);
    font-weight: var(--s1-w-body);
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-color: rgba(34, 34, 34, .35);
}
.btn-link:where(:not(.modulesgarden-app-main-container *)):hover,
.btn-link:where(:not(.modulesgarden-app-main-container *)):focus {
    background: none;
    border-color: transparent;
    color: #000;
    text-decoration: underline;
    text-decoration-color: var(--s1-ink);
}

/* boutons dans un groupe de champs : collés au champ, sans pilule */
.input-group .btn:where(:not(.modulesgarden-app-main-container *)),
.s1-page .input-group .btn {
    min-height: var(--s1-h-field);
    border-radius: 0;
    border-color: var(--s1-field);
}
.input-group > .input-group-append:last-child > .btn:where(:not(.modulesgarden-app-main-container *)):last-child { border-radius: 0 var(--s1-r-md) var(--s1-r-md) 0; }
.input-group > .input-group-prepend:first-child > .btn:where(:not(.modulesgarden-app-main-container *)):first-child { border-radius: var(--s1-r-md) 0 0 var(--s1-r-md); }
.btn-group > .btn:where(:not(.modulesgarden-app-main-container *)) { border-radius: 0; }
.btn-group > .btn:where(:not(.modulesgarden-app-main-container *)):first-child { border-radius: var(--s1-r-pill) 0 0 var(--s1-r-pill); }
.btn-group > .btn:where(:not(.modulesgarden-app-main-container *)):last-child { border-radius: 0 var(--s1-r-pill) var(--s1-r-pill) 0; }
.btn-group > .btn:where(:not(.modulesgarden-app-main-container *)):only-child { border-radius: var(--s1-r-pill); }

/* ---------- 4. Champs de formulaire ---------- */
.form-control:where(:not(.modulesgarden-app-main-container *)),
.custom-select:where(:not(.modulesgarden-app-main-container *)),
.s1-page .form-control {
    min-height: var(--s1-h-field);
    height: auto;
    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;
    line-height: 1.4;
    box-shadow: none;
    transition: border-color var(--s1-dur) var(--s1-ease), box-shadow var(--s1-dur) var(--s1-ease);
}
.form-control:where(:not(.modulesgarden-app-main-container *)):hover,
.custom-select:where(:not(.modulesgarden-app-main-container *)):hover { border-color: var(--s1-ink); }
.form-control:where(:not(.modulesgarden-app-main-container *)):focus,
.custom-select:where(:not(.modulesgarden-app-main-container *)):focus,
.s1-page .form-control:focus {
    border-color: var(--s1-ink);
    box-shadow: var(--s1-ring);
    outline: 0;
    color: var(--s1-ink);
}
.form-control:where(:not(.modulesgarden-app-main-container *))::placeholder { color: #767676; opacity: 1; }
.form-control:where(:not(.modulesgarden-app-main-container *)):disabled,
.form-control:where(:not(.modulesgarden-app-main-container *))[readonly] { background-color: var(--s1-soft); border-color: var(--s1-line); }
.form-control.is-invalid:where(:not(.modulesgarden-app-main-container *)),
.was-validated .form-control:invalid { border-color: var(--s1-red); border-width: 2px; padding: 10px 13px; background-image: none; }
textarea.form-control:where(:not(.modulesgarden-app-main-container *)) { min-height: 120px; line-height: 1.5; }
.form-control-sm:where(:not(.modulesgarden-app-main-container *)),
.form-control-lg:where(:not(.modulesgarden-app-main-container *)) { min-height: var(--s1-h-field); font-size: 16px; border-radius: var(--s1-r-md); }
select.form-control:where(:not(.modulesgarden-app-main-container *)):not([multiple]):not([size]),
.custom-select:where(:not(.modulesgarden-app-main-container *)) {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 40px;
    background-image: linear-gradient(45deg, transparent 50%, var(--s1-ink) 50%), linear-gradient(135deg, var(--s1-ink) 50%, transparent 50%);
    background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}
label, .control-label, .col-form-label { color: var(--s1-ink); }
.form-text, .help-block, small.text-muted { color: var(--s1-ink-2); }
.invalid-feedback { color: var(--s1-crit); }
.input-group-text:where(:not(.modulesgarden-app-main-container *)) {
    background: var(--s1-soft);
    border-color: var(--s1-field);
    color: var(--s1-ink-2);
    border-radius: var(--s1-r-md);
}
.input-group > .form-control:where(:not(.modulesgarden-app-main-container *)):not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-group > .form-control:where(:not(.modulesgarden-app-main-container *)):not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
/* cases à cocher / boutons radio natifs et Bootstrap : anthracite */
input[type="checkbox"], input[type="radio"] { accent-color: var(--s1-ink); }
.custom-control-input:checked ~ .custom-control-label::before { background-color: var(--s1-ink); border-color: var(--s1-ink); }
.custom-control-input:focus ~ .custom-control-label::before { box-shadow: var(--s1-ring); }
.custom-control-input:focus:not(:checked) ~ .custom-control-label::before { border-color: var(--s1-ink); }
.custom-switch .custom-control-input:checked ~ .custom-control-label::before { background-color: var(--s1-red); border-color: var(--s1-red); }
/* iCheck (WHMCS, skin square-blue) redessiné sans bleu */
.icheckbox_square-blue, .iradio_square-blue {
    width: 22px; height: 22px;
    background: var(--s1-white);
    border: 1.5px solid var(--s1-field);
    border-radius: 6px;
    vertical-align: middle;
    transition: border-color 200ms var(--s1-ease), background-color 200ms var(--s1-ease), box-shadow 200ms var(--s1-ease);
}
.iradio_square-blue { border-radius: 50%; }
.icheckbox_square-blue.hover, .iradio_square-blue.hover { border-color: var(--s1-ink); }
.icheckbox_square-blue.checked {
    background: var(--s1-ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 15px no-repeat;
    border-color: var(--s1-ink);
}
.iradio_square-blue.checked { background: var(--s1-white); border-color: var(--s1-ink); box-shadow: inset 0 0 0 5px var(--s1-ink); }
.icheckbox_square-blue.disabled, .iradio_square-blue.disabled { opacity: .5; }
.custom-range::-webkit-slider-thumb { background-color: var(--s1-ink); }
.custom-range::-moz-range-thumb { background-color: var(--s1-ink); }
.progress:where(:not(.modulesgarden-app-main-container *)) { background: var(--s1-soft); border-radius: var(--s1-r-pill); }
.progress-bar:where(:not(.modulesgarden-app-main-container *)) { background-color: var(--s1-ink); }

/* ---------- 5. Cartes, panneaux, listes ---------- */
.card:where(:not(.modulesgarden-app-main-container *)),
.panel:where(:not(.modulesgarden-app-main-container *)) {
    background: var(--s1-white);
    border: 1px solid var(--s1-line);
    border-radius: var(--s1-r-lg);
    box-shadow: none;
    color: var(--s1-ink);
}
.card-header:where(:not(.modulesgarden-app-main-container *)),
.panel-heading:where(:not(.modulesgarden-app-main-container *)) {
    background: transparent;
    border-bottom: 1px solid var(--s1-line);
    color: var(--s1-ink);
    padding: 18px 24px;
}
.card-header:first-child { border-radius: var(--s1-r-lg) var(--s1-r-lg) 0 0; }
.card-footer:where(:not(.modulesgarden-app-main-container *)),
.panel-footer:where(:not(.modulesgarden-app-main-container *)) {
    background: transparent;
    border-top: 1px solid var(--s1-line);
    padding: 16px 24px;
}
.card-body:where(:not(.modulesgarden-app-main-container *)),
.panel-body:where(:not(.modulesgarden-app-main-container *)) { padding: 24px; }
.card-title:where(:not(.modulesgarden-app-main-container *)),
.panel-title:where(:not(.modulesgarden-app-main-container *)) { font-family: var(--s1-font); font-weight: var(--s1-w-subtitle); color: var(--s1-ink); }
.list-group-item:where(:not(.modulesgarden-app-main-container *)) { border-color: var(--s1-line); color: var(--s1-ink); }
.list-group-item.active:where(:not(.modulesgarden-app-main-container *)) { background: var(--s1-soft); border-color: var(--s1-line); color: var(--s1-ink); font-weight: var(--s1-w-strong); }
.list-group-item-action:hover, .list-group-item-action:focus { background: var(--s1-g50); color: var(--s1-ink); }
hr { border-top-color: var(--s1-line); }
.well { background: var(--s1-g50); border: 0; border-radius: var(--s1-r-lg); box-shadow: none; }

/* ---------- 6. Tableaux ---------- */
.table:where(:not(.modulesgarden-app-main-container *)) {
    color: var(--s1-ink);
    font-size: 15px;
    border-color: var(--s1-line);
}
.table:where(:not(.modulesgarden-app-main-container *)) th,
.table:where(:not(.modulesgarden-app-main-container *)) td {
    border-color: var(--s1-line);
    vertical-align: middle;
    padding: 14px 16px;
}
.table:where(:not(.modulesgarden-app-main-container *)) thead th {
    border-top: 0;
    border-bottom: 1px solid var(--s1-line);
    color: var(--s1-ink-2);
    font-size: 14px;
    font-weight: var(--s1-w-body);
    letter-spacing: 0;
    text-transform: none;
    background: transparent;
}
.table-striped:where(:not(.modulesgarden-app-main-container *)) tbody tr:nth-of-type(odd) { background-color: var(--s1-g50); }
.table-hover:where(:not(.modulesgarden-app-main-container *)) tbody tr:hover { background-color: var(--s1-g50); color: var(--s1-ink); }
.table-bordered:where(:not(.modulesgarden-app-main-container *)),
.table-bordered:where(:not(.modulesgarden-app-main-container *)) th,
.table-bordered:where(:not(.modulesgarden-app-main-container *)) td { border-color: var(--s1-line); }
.table:where(:not(.modulesgarden-app-main-container *)) td.text-right,
.table:where(:not(.modulesgarden-app-main-container *)) .num { font-variant-numeric: tabular-nums; }
.table-responsive { -webkit-overflow-scrolling: touch; }
/* DataTables (listes WHMCS) */
.dataTables_wrapper .dataTables_info { color: var(--s1-ink-2); font-size: 14px; }
table.dataTable thead .sorting::after, table.dataTable thead .sorting_asc::after, table.dataTable thead .sorting_desc::after { color: var(--s1-ink-2); }

/* ---------- 7. Statuts et badges : texte discret à couleur sémantique ---------- */
.badge:where(:not(.modulesgarden-app-main-container *)),
.label:where(:not(.modulesgarden-app-main-container *)) {
    background: none;
    border: 0;
    border-radius: 0;
    padding: 0;
    color: var(--s1-ink-2);
    font-family: var(--s1-font);
    font-size: 14px;
    font-weight: var(--s1-w-body);
    letter-spacing: 0;
    text-transform: none;
    line-height: 1.4;
}
.badge-success, .label-success, .label.status-active, .label.status-paid, .label.status-open, .label.status-completed, .label.status-delivered,
.badge.status-active, .badge.status-paid, .badge.status-open { background: none; color: var(--s1-ok); }
.badge-warning, .label-warning, .label.status-pending, .label.status-unpaid, .label.status-payment-pending, .label.status-pending-transfer, .label.status-pending-registration, .label.status-customer-reply, .label.status-onhold,
.badge.status-pending, .badge.status-unpaid { background: none; color: var(--s1-warn); }
.badge-danger, .label-danger, .label.status-overdue, .label.status-suspended, .label.status-fraud, .label.status-expired,
.badge.status-overdue, .badge.status-suspended { background: none; color: var(--s1-crit); font-weight: var(--s1-w-strong); }
.badge-info, .label-info, .badge-primary, .label-primary, .label.status-answered, .label.status-in-progress { background: none; color: var(--s1-info); }
.badge-secondary, .badge-light, .badge-dark, .label-default, .label.status-terminated, .label.status-cancelled, .label.status-closed, .label.status-refunded, .label.status-collections, .label.status-draft,
.badge.status-cancelled, .badge.status-closed, .badge.status-terminated { background: none; color: var(--s1-ink-2); }
a.badge:hover, a.badge:focus { background: none; color: var(--s1-ink); text-decoration: underline; }
/* compteurs : petit nombre sur fond gris (pas une pastille rouge partout) */
.badge-pill:where(:not(.modulesgarden-app-main-container *)) {
    min-width: 22px;
    padding: 1px 7px;
    border-radius: var(--s1-r-pill);
    background: var(--s1-soft);
    color: var(--s1-ink);
    font-size: 12px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* ---------- 8. Alertes ---------- */
.alert:where(:not(.modulesgarden-app-main-container *)) {
    border: 0;
    border-radius: var(--s1-r-lg);
    padding: 18px 22px;
    background: var(--s1-g50);
    color: var(--s1-ink);
    font-size: 15px;
    line-height: 1.5;
}
.alert-info:where(:not(.modulesgarden-app-main-container *)),
.alert-primary:where(:not(.modulesgarden-app-main-container *)),
.alert-secondary:where(:not(.modulesgarden-app-main-container *)),
.alert-light:where(:not(.modulesgarden-app-main-container *)) { background: var(--s1-g50); color: var(--s1-ink); }
.alert-success:where(:not(.modulesgarden-app-main-container *)) { background: var(--s1-ok-bg); color: var(--s1-ok); }
.alert-warning:where(:not(.modulesgarden-app-main-container *)) { background: var(--s1-white); border: 1px solid var(--s1-line); color: var(--s1-ink); }
/* urgent : anthracite, accent rouge */
.alert-danger:where(:not(.modulesgarden-app-main-container *)),
.alert-dark:where(:not(.modulesgarden-app-main-container *)) { background: var(--s1-ink); color: #fff; }
.alert-danger:where(:not(.modulesgarden-app-main-container *)) > i:first-child,
.alert-danger:where(:not(.modulesgarden-app-main-container *)) .fa:first-child,
.alert-danger:where(:not(.modulesgarden-app-main-container *)) .fas:first-child { color: var(--s1-red); }
.alert-danger:where(:not(.modulesgarden-app-main-container *)) a,
.alert-dark:where(:not(.modulesgarden-app-main-container *)) a { color: #fff; text-decoration: underline; }
.alert-danger:where(:not(.modulesgarden-app-main-container *)) :focus-visible { outline-color: #fff; }
.alert-danger:where(:not(.modulesgarden-app-main-container *)) .btn-default,
.alert-danger:where(:not(.modulesgarden-app-main-container *)) .btn-secondary { border-color: rgba(255, 255, 255, .4); }
.alert-link:where(:not(.modulesgarden-app-main-container *)) { color: inherit; font-weight: var(--s1-w-strong); text-decoration: underline; }
.alert .close, .alert-dismissible .close { color: inherit; opacity: .7; text-shadow: none; }

/* ---------- 9. Onglets et pastilles ---------- */
.nav-tabs:where(:not(.modulesgarden-app-main-container *)) {
    border-bottom: 1px solid var(--s1-line);
    gap: 4px;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: thin;
}
.nav-tabs:where(:not(.modulesgarden-app-main-container *)) .nav-link {
    border: 0;
    border-radius: 0;
    margin-bottom: 0;
    padding: 12px 14px;
    background: transparent;
    color: var(--s1-ink-2);
    font-size: 15px;
    white-space: nowrap;
}
.nav-tabs:where(:not(.modulesgarden-app-main-container *)) .nav-link:hover { color: var(--s1-ink); border: 0; }
.nav-tabs:where(:not(.modulesgarden-app-main-container *)) .nav-link.active,
.nav-tabs:where(:not(.modulesgarden-app-main-container *)) .nav-item.show .nav-link {
    background: transparent;
    color: var(--s1-ink);
    font-weight: var(--s1-w-strong);
    box-shadow: inset 0 -3px 0 var(--s1-red);
}
.nav-pills:where(:not(.modulesgarden-app-main-container *)) .nav-link { border-radius: var(--s1-r-pill); color: var(--s1-ink); padding: 8px 16px; }
.nav-pills:where(:not(.modulesgarden-app-main-container *)) .nav-link.active,
.nav-pills:where(:not(.modulesgarden-app-main-container *)) .show > .nav-link {
    background: var(--s1-white);
    color: var(--s1-ink);
    box-shadow: 0 0 0 1px var(--s1-line);
}

/* ---------- 10. Pagination ---------- */
.pagination:where(:not(.modulesgarden-app-main-container *)) { gap: 4px; flex-wrap: wrap; }
.page-link:where(:not(.modulesgarden-app-main-container *)),
.dataTables_wrapper .pagination .page-link {
    min-width: 40px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 0;
    padding: 8px 12px;
    border: 1px solid transparent;
    border-radius: var(--s1-r-pill) !important;
    background: transparent;
    color: var(--s1-ink);
    font-size: 15px;
    box-shadow: none;
}
.page-link:where(:not(.modulesgarden-app-main-container *)):hover { background: var(--s1-soft); border-color: transparent; color: var(--s1-ink); }
.page-link:where(:not(.modulesgarden-app-main-container *)):focus { box-shadow: none; outline: 2px solid var(--s1-red); outline-offset: 2px; }
.page-item.active .page-link:where(:not(.modulesgarden-app-main-container *)) {
    background: var(--s1-white);
    border-color: var(--s1-ink);
    color: var(--s1-ink);
    font-weight: var(--s1-w-strong);
}
.page-item.disabled .page-link:where(:not(.modulesgarden-app-main-container *)) { background: transparent; color: var(--s1-field); border-color: transparent; }

/* ---------- 11. Modales, menus déroulants, infobulles ---------- */
.modal-backdrop.show { opacity: 1; background: rgba(34, 34, 34, .55); }
.modal-content:where(:not(.modulesgarden-app-main-container *)) {
    border: 0;
    border-radius: var(--s1-r-xl);
    box-shadow: var(--s1-shadow-pop);
    color: var(--s1-ink);
}
.modal-header:where(:not(.modulesgarden-app-main-container *)) { border-bottom: 0; padding: 24px 28px 8px; align-items: flex-start; }
.modal-title:where(:not(.modulesgarden-app-main-container *)) { font-family: var(--s1-font); font-weight: var(--s1-w-subtitle); font-size: 22px; line-height: 1.2; }
.modal-body:where(:not(.modulesgarden-app-main-container *)) { padding: 12px 28px 8px; color: var(--s1-ink-2); }
.modal-footer:where(:not(.modulesgarden-app-main-container *)) { border-top: 0; padding: 20px 28px 24px; gap: 10px; }
.modal-footer:where(:not(.modulesgarden-app-main-container *)) > * { margin: 0; }
.modal .close:where(:not(.modulesgarden-app-main-container *)) {
    width: 40px; height: 40px; margin: -6px -10px 0 auto; padding: 0;
    border-radius: var(--s1-r-pill);
    opacity: 1; text-shadow: none; color: var(--s1-ink); font-weight: 400;
}
.modal .close:where(:not(.modulesgarden-app-main-container *)):hover { background: var(--s1-soft); opacity: 1; }
.dropdown-menu:where(:not(.modulesgarden-app-main-container *)) {
    border: 1px solid var(--s1-line);
    border-radius: var(--s1-r-lg);
    box-shadow: var(--s1-shadow-pop);
    padding: 8px;
    color: var(--s1-ink);
    font-size: 15px;
}
.dropdown-item:where(:not(.modulesgarden-app-main-container *)) { border-radius: var(--s1-r-sm); padding: 10px 12px; color: var(--s1-ink); }
.dropdown-item:where(:not(.modulesgarden-app-main-container *)):hover,
.dropdown-item:where(:not(.modulesgarden-app-main-container *)):focus { background: var(--s1-soft); color: var(--s1-ink); }
.dropdown-item.active:where(:not(.modulesgarden-app-main-container *)),
.dropdown-item:where(:not(.modulesgarden-app-main-container *)):active { background: var(--s1-soft); color: var(--s1-ink); font-weight: var(--s1-w-strong); }
.dropdown-divider { border-top-color: var(--s1-line); }
.tooltip-inner { background: var(--s1-ink); color: #fff; border-radius: var(--s1-r-sm); font-family: var(--s1-font); font-size: 13px; padding: 6px 10px; }
.bs-tooltip-top .arrow::before { border-top-color: var(--s1-ink); }
.bs-tooltip-bottom .arrow::before { border-bottom-color: var(--s1-ink); }
.popover { border-color: var(--s1-line); border-radius: var(--s1-r-lg); box-shadow: var(--s1-shadow-pop); font-family: var(--s1-font); }
.popover-header { background: transparent; border-bottom-color: var(--s1-line); }
.toast { border-radius: 14px; }

/* ==========================================================================
   12. Coquille : barre latérale (maquette v01, itération 5, version compacte)
   ========================================================================== */
:root { --s1sb-w: 272px; }
html.s1sb-mini { --s1sb-w: 80px; }
body.has-side-nav { padding-left: var(--s1sb-w) !important; padding-top: 0 !important; }
html.s1sb-lock, html.s1sb-lock body { overflow: hidden; }
.s1skip {
    position: absolute; left: 12px; top: -60px; z-index: 2000;
    padding: 10px 16px; border-radius: var(--s1-r-pill);
    background: var(--s1-ink); color: #fff; font-size: 14px; text-decoration: none;
}
.s1skip:focus { top: 12px; color: #fff; }
.s1sb {
    position: fixed; left: 0; top: 0; bottom: 0; z-index: 1035;
    width: var(--s1sb-w); height: 100vh; height: 100dvh;
    display: flex; flex-direction: column; min-width: 0;
    background: var(--s1-ink); color: var(--s1-on-dark);
    font-family: var(--s1-font);
}
.s1sb :focus-visible { outline-color: #fff; }
.s1sb-top {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    height: 60px; padding: 0 14px 0 22px; flex: none;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.s1sb-logo { display: inline-flex; align-items: center; min-width: 0; text-decoration: none; }
.s1sb-logo img { height: 22px; width: auto; display: block; }
.s1sb-logo .s1sb-logo-mini { display: none; height: 30px; width: 30px; }
.s1sb-fold, .s1sb-close {
    width: 40px; height: 40px; flex: none; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--s1-r-pill); border: 1px solid rgba(255, 255, 255, .18);
    background: transparent; color: #fff; font-size: 14px; cursor: pointer;
    transition: background-color var(--s1-dur) var(--s1-ease), border-color var(--s1-dur) var(--s1-ease);
}
.s1sb-fold:hover, .s1sb-close:hover { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .4); }
.s1sb-fold i { font-weight: 300; transition: transform var(--s1-dur) var(--s1-ease); }
.s1sb-close { display: none; }
.s1sb-nav {
    flex: 1 1 auto; min-height: 0; position: relative;
    overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
    padding: 10px 12px 14px;
    scrollbar-width: thin; scrollbar-color: #444 transparent;
}
.s1sb-nav.more {
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 40px), transparent);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 40px), transparent);
}
.s1sb-end { display: block; height: 1px; }
.s1sb-list, .s1sb-sub { list-style: none; margin: 0; padding: 0; }
.s1sb-list { display: grid; gap: 2px; }
.s1sb-i {
    position: relative; display: flex; align-items: center; gap: 12px;
    width: 100%; min-height: 38px; padding: 7px 12px; margin: 0;
    border: 0; border-radius: var(--s1-r-md); background: transparent;
    color: #e9e9e9; font: inherit; font-size: 14.5px; line-height: 1.25;
    text-align: left; text-decoration: none; cursor: pointer;
    transition: background-color var(--s1-dur) var(--s1-ease), color var(--s1-dur) var(--s1-ease);
}
.s1sb-i > i:first-child {
    width: 22px; flex: none; text-align: center;
    font-size: 18px; font-weight: 300; color: var(--s1-on-dark-2);
    transition: color var(--s1-dur) var(--s1-ease);
}
.s1sb-i .lbl { flex: 1 1 auto; min-width: 0; }
.s1sb-i .car { flex: none; font-size: 12px; font-weight: 300; color: #9a9a9a; transition: transform 300ms var(--s1-ease); }
.s1sb-i[aria-expanded="true"] .car { transform: rotate(180deg); }
.s1sb-i:hover, .s1sb-i:focus-visible { background: rgba(255, 255, 255, .07); color: #fff; text-decoration: none; }
.s1sb-i:hover > i:first-child { color: #fff; }
.s1sb-i.cur, .s1sb-i[aria-current="page"] { background: rgba(255, 255, 255, .1); color: #fff; }
.s1sb-i.cur > i:first-child, .s1sb-i[aria-current="page"] > i:first-child { color: var(--s1-red); }
.s1sb-nb {
    flex: none; min-width: 22px; height: 22px; padding: 0 7px;
    border-radius: var(--s1-r-pill); background: var(--s1-red); color: var(--s1-ink);
    font-size: 12px; line-height: 22px; text-align: center; font-variant-numeric: tabular-nums;
}
.s1sb-i[aria-expanded="true"] > .s1sb-nb { display: none; }
.s1sb-sub {
    display: grid; gap: 1px; margin: 0 0 4px 22px; padding-left: 12px;
    border-left: 1px solid rgba(255, 255, 255, .12);
}
.s1sb-sub[hidden] { display: none; }
.s1sb-sub a {
    position: relative; display: flex; align-items: center; gap: 10px;
    min-height: 34px; padding: 6px 12px; border-radius: var(--s1-r-sm);
    color: var(--s1-on-dark-2); font-size: 14px; line-height: 1.3; text-decoration: none;
    transition: background-color var(--s1-dur) var(--s1-ease), color var(--s1-dur) var(--s1-ease);
}
.s1sb-sub a span:first-child { flex: 1 1 auto; }
.s1sb-sub a:hover, .s1sb-sub a:focus-visible { background: rgba(255, 255, 255, .07); color: #fff; text-decoration: none; }
/* Sous-menu : la page courante n'a plus de fond (retour Nolann 07.10 : se confondait avec le
   parent) ; texte blanc en gras + trait rouge posé sur le filet vertical. */
.s1sb-sub a[aria-current="page"] { background: none; color: #fff; font-weight: var(--s1-w-strong); }
.s1sb-sub a[aria-current="page"]::before { content: ""; position: absolute; left: -13px; top: 7px; bottom: 7px; width: 2px; border-radius: 2px; background: var(--s1-red); }
.s1sb-sub a[aria-current="page"]:hover { background: rgba(255, 255, 255, .07); }
.s1sb-li.nav-divider, .s1sb-li.dropdown-divider { height: 1px; background: rgba(255, 255, 255, .08); margin: 6px 12px; }
/* bas : carte utilisateur + panier */
.s1sb-foot {
    position: relative; flex: none; display: flex; align-items: center; gap: 8px;
    padding: 10px 12px; border-top: 1px solid rgba(255, 255, 255, .08);
}
.s1sb-mew { position: relative; flex: 1; min-width: 0; }
.s1sb-me {
    display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px;
    padding: 7px 10px; border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .04);
    color: #fff; font: inherit; text-align: left; text-decoration: none; cursor: pointer;
    transition: background-color var(--s1-dur) var(--s1-ease), border-color var(--s1-dur) var(--s1-ease);
}
.s1sb-me:hover, .s1sb-me[aria-expanded="true"] { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .25); color: #fff; text-decoration: none; }
.s1sb-me .av {
    width: 32px; height: 32px; flex: none; border-radius: var(--s1-r-pill);
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--s1-red); color: var(--s1-ink); font-size: 14px; font-weight: var(--s1-w-strong);
}
.s1sb-me .who { flex: 1 1 auto; min-width: 0; line-height: 1.2; }
.s1sb-me .who strong { display: block; font-weight: var(--s1-w-body); font-size: 14px; overflow-wrap: anywhere; }
.s1sb-me .who small { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.25; color: var(--s1-on-dark-2); overflow-wrap: anywhere; }
.s1sb-crown { color: var(--s1-red); font-size: 11px; margin-left: 2px; }
.s1sb-cart {
    position: relative; width: 44px; height: 44px; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--s1-r-pill); border: 1px solid rgba(255, 255, 255, .18);
    color: #fff; font-size: 17px; text-decoration: none;
    transition: background-color var(--s1-dur) var(--s1-ease);
}
.s1sb-cart i { font-weight: 300; }
.s1sb-cart:hover, .s1sb-cart:focus-visible { background: rgba(255, 255, 255, .08); color: #fff; }
.s1sb-cart[aria-current="page"] { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .3); }
.s1cnt {
    position: absolute; top: -3px; right: -3px; min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: var(--s1-r-pill); background: var(--s1-red); color: var(--s1-ink);
    font-size: 11px; line-height: 18px; text-align: center; font-variant-numeric: tabular-nums;
}
.s1cnt:empty { display: none; }
/* menus déroulants communs (compte, notifications) */
.s1menu-wrap { position: relative; }
.s1menu {
    position: absolute; right: 0; top: calc(100% + 10px); z-index: 1060;
    width: min(380px, calc(100vw - 24px)); max-height: calc(100vh - 96px); overflow-y: auto;
    padding: 8px; border: 1px solid var(--s1-line); border-radius: var(--s1-r-lg);
    background: #fff; color: var(--s1-ink); box-shadow: var(--s1-shadow-pop);
    font-family: var(--s1-font); font-size: 15px; text-align: left;
}
.s1menu[hidden], .s1menu-al[hidden], .s1menu-empty[hidden], .s1cnt[hidden] { display: none; }
.s1menu :focus-visible { outline-color: var(--s1-red); }
.s1menu hr { margin: 6px 4px; border: 0; border-top: 1px solid var(--s1-line); }
.s1menu-h { padding: 10px 12px 8px; font-size: 14px; line-height: 1.35; }
.s1menu-h strong { display: block; font-weight: var(--s1-w-strong); }
.s1menu-h small, .s1menu small { display: block; color: var(--s1-ink-2); font-size: 13px; }
.s1menu a {
    display: flex; gap: 12px; align-items: flex-start; width: 100%;
    padding: 10px 12px; border-radius: var(--s1-r-sm);
    color: var(--s1-ink); text-decoration: none; line-height: 1.35;
}
.s1menu a:hover, .s1menu a:focus-visible { background: var(--s1-soft); color: var(--s1-ink); text-decoration: none; }
.s1menu a > i { width: 18px; flex: none; margin-top: 2px; text-align: center; font-size: 16px; font-weight: 300; color: var(--s1-ink-2); }
.s1menu .s1menu-out, .s1menu .s1menu-out i { color: var(--s1-crit); }
.s1menu-empty { margin: 0; padding: 18px 12px; color: var(--s1-ink-2); font-size: 14px; }
.s1menu-al--danger > i { color: var(--s1-crit); }
.s1menu-al--warning > i { color: var(--s1-warn); }
.s1sb .s1sb-dd { left: 0; right: auto; top: auto; bottom: calc(100% + 6px); width: 300px; max-height: calc(100vh - 120px); }
/* barre repliée : icônes seules */
html.s1sb-mini .s1sb-top { flex-direction: column; justify-content: center; height: auto; gap: 10px; padding: 16px 10px 14px; }
html.s1sb-mini .s1sb-logo .s1sb-logo-full { display: none; }
html.s1sb-mini .s1sb-logo .s1sb-logo-mini { display: block; }
html.s1sb-mini .s1sb-fold i { transform: rotate(180deg); }
html.s1sb-mini .s1sb-nav { padding: 12px 10px; }
html.s1sb-mini .s1sb-i { justify-content: center; padding: 9px 0; }
html.s1sb-mini .s1sb-i .lbl, html.s1sb-mini .s1sb-i .car, html.s1sb-mini .s1sb-me .who {
    position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap;
}
html.s1sb-mini .s1sb-i .s1sb-nb { position: absolute; top: 2px; right: 6px; min-width: 18px; height: 18px; padding: 0 5px; font-size: 11px; line-height: 18px; }
html.s1sb-mini .s1sb-sub { display: none; }
html.s1sb-mini .s1sb-foot { flex-direction: column; }
html.s1sb-mini .s1sb-mew { flex: none; }
html.s1sb-mini .s1sb-me { justify-content: center; padding: 9px; width: auto; border: 0; background: transparent; }
.s1sb-back {
    position: fixed; inset: 0; z-index: 1034;
    background: rgba(34, 34, 34, .55); opacity: 0; transition: opacity 250ms var(--s1-ease);
}
.s1sb-back.show { opacity: 1; }
.s1sb-back[hidden] { display: none; }

/* ==========================================================================
   13. Coquille : barre haute, palette de recherche
   ========================================================================== */
.s1ub {
    position: sticky; top: 0; z-index: 1020;
    background: #fff; border-bottom: 1px solid var(--s1-line);
    font-family: var(--s1-font);
}
.s1ub-in { display: flex; align-items: center; gap: 12px; height: 68px; padding: 0 48px; }
.s1ub .s1ub-burger, .s1ub .s1ub-logo { display: none; }
.s1ub-logo img { height: 20px; width: auto; display: block; }
.s1ub-r { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.s1ub-srch {
    display: inline-flex; align-items: center; gap: 10px;
    width: min(420px, 100%); height: 44px; padding: 6px 8px 6px 16px;
    border: 1px solid rgba(34, 34, 34, .25); border-radius: var(--s1-r-pill);
    background: #fff; color: var(--s1-ink-2); font: inherit; font-size: 15px; white-space: nowrap; cursor: pointer;
    transition: border-color var(--s1-dur) var(--s1-ease);
}
.s1ub-srch:hover { border-color: var(--s1-ink); }
.s1ub-srch i { font-size: 16px; font-weight: 300; color: var(--s1-ink); }
.s1ub-srch kbd {
    margin-left: auto; padding: 3px 10px; border-radius: var(--s1-r-pill);
    background: var(--s1-soft); color: var(--s1-ink-2); font-family: inherit; font-size: 12px; box-shadow: none;
}
.s1ib {
    position: relative; width: 44px; height: 44px; flex: none; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0; border-radius: var(--s1-r-pill); background: var(--s1-soft); color: var(--s1-ink);
    font-size: 17px; cursor: pointer; transition: background-color var(--s1-dur) var(--s1-ease);
}
.s1ib i { font-weight: 300; }
.s1ib:hover { background: var(--s1-line); }
.s1q-back {
    position: fixed; inset: 0; z-index: 1070;
    display: flex; justify-content: center; align-items: flex-start;
    padding: 10vh 16px 16px; background: rgba(34, 34, 34, .55);
}
.s1q-back[hidden] { display: none; }
.s1q-dlg {
    display: flex; flex-direction: column; overflow: hidden;
    width: min(640px, 100%); max-height: 78vh;
    border-radius: var(--s1-r-xl); background: #fff; color: var(--s1-ink); font-family: var(--s1-font);
}
.s1q-row { display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 18px; border-bottom: 1px solid var(--s1-line); }
.s1q-row > i { font-size: 18px; font-weight: 300; }
.s1q-row input {
    flex: 1; min-width: 0; padding: 10px 0; border: 0; outline: 0;
    background: transparent; color: var(--s1-ink); font: inherit; font-size: 18px;
}
.s1q-row input::-webkit-search-cancel-button { display: none; }
.s1q-res { overflow-y: auto; padding: 8px; }
.s1q-grp { margin: 0; padding: 12px 12px 4px; color: var(--s1-ink-2); font-size: 13px; }
.s1q-opt { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 12px; border-radius: var(--s1-r-sm); cursor: pointer; }
.s1q-opt .s1q-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s1q-opt small { flex: none; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--s1-ink-2); font-size: 13px; }
.s1q-opt[aria-selected="true"] { background: var(--s1-soft); }
.s1q-empty { margin: 0; padding: 18px 12px; color: var(--s1-ink-2); font-size: 15px; }
.s1q-foot { display: flex; flex-wrap: wrap; gap: 16px; padding: 10px 18px; border-top: 1px solid var(--s1-line); color: var(--s1-ink-2); font-size: 12px; }
.s1q-foot kbd { padding: 1px 6px; border-radius: 6px; background: var(--s1-soft); color: var(--s1-ink-2); font-family: inherit; font-size: 12px; box-shadow: none; }

/* ---------- Tiroir < 1024 px ---------- */
@media (max-width: 1023px) {
    :root, html.s1sb-mini { --s1sb-w: 0px; }
    body.has-side-nav { padding-left: 0 !important; padding-top: 0 !important; }
    .s1sb {
        width: min(320px, 88vw);
        transform: translateX(-102%); visibility: hidden;
        transition: transform 300ms var(--s1-ease), visibility 0s linear 300ms;
    }
    .s1sb.open { transform: none; visibility: visible; transition: transform 300ms var(--s1-ease); }
    .s1sb-fold { display: none; }
    .s1sb-close { display: inline-flex; }
    html.s1sb-mini .s1sb-top { flex-direction: row; height: 60px; padding: 0 14px 0 22px; justify-content: space-between; }
    html.s1sb-mini .s1sb-logo .s1sb-logo-full { display: block; }
    html.s1sb-mini .s1sb-logo .s1sb-logo-mini { display: none; }
    html.s1sb-mini .s1sb-nav { padding: 10px 12px 14px; }
    html.s1sb-mini .s1sb-i { justify-content: flex-start; padding: 7px 12px; }
    html.s1sb-mini .s1sb-i .lbl, html.s1sb-mini .s1sb-i .car, html.s1sb-mini .s1sb-me .who {
        position: static !important; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal;
    }
    html.s1sb-mini .s1sb-i .s1sb-nb { position: static; }
    html.s1sb-mini .s1sb-sub { display: grid; }
    html.s1sb-mini .s1sb-sub[hidden] { display: none; }
    html.s1sb-mini .s1sb-foot { flex-direction: row; }
    html.s1sb-mini .s1sb-mew { flex: 1; }
    html.s1sb-mini .s1sb-me { justify-content: flex-start; padding: 7px 10px; width: 100%; border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .04); }
    .s1ub .s1ub-burger, .s1ub .s1ub-logo { display: inline-flex; }
    .s1ub-in { height: 64px; padding: 0 20px; }
    .s1ub-srch { width: 44px; height: 44px; padding: 0; justify-content: center; flex: none; border: 0; background: var(--s1-soft); }
    .s1ub-srch .t, .s1ub-srch kbd { display: none; }
    .s1ub-logo { margin-right: auto; }
    .s1ub-r { margin-left: 0; gap: 6px; }
    .s1sb .s1sb-dd { width: auto; right: 0; }
}
@media (max-width: 760px) {
    .s1ub .s1menu { position: fixed; left: 12px; right: 12px; top: 70px; width: auto; max-height: calc(100vh - 90px); }
}
@media (max-width: 640px) { .s1ub-in { padding: 0 16px; } }
@media (prefers-reduced-motion: reduce) { .s1sb, .s1sb.open, .s1sb-back { transition: none; } }
@media print { .s1sb, .s1sb-back, .s1ub, .s1q-back, .s1skip { display: none !important; } body.has-side-nav { padding-left: 0 !important; } }

/* ==========================================================================
   14. Pied de page de l'espace client (compact, anthracite)
   ========================================================================== */
.s1ft { background: var(--s1-ink); color: var(--s1-on-dark-2); font-family: var(--s1-font); font-size: 14px; }
.s1ft-in { padding-left: 48px; padding-right: 48px; }
.s1ft-top { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px 32px; padding-top: 36px; padding-bottom: 28px; }
.s1ft-top img { width: 160px; height: auto; display: block; }
.s1ft-top ul { display: flex; flex-wrap: wrap; gap: 10px 24px; margin: 0; padding: 0; list-style: none; }
.s1ft a { color: var(--s1-on-dark-2); font-size: 13px; letter-spacing: .03em; text-transform: uppercase; text-decoration: none; transition: color var(--s1-dur) var(--s1-ease); }
.s1ft a:hover, .s1ft a:focus-visible { color: var(--s1-red); text-decoration: none; }
.s1ft :focus-visible { outline-color: #fff; }
.s1ft-bot { position: relative; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px 24px; padding-top: 18px; padding-bottom: 24px; font-size: 13px; }
.s1ft-bot::before { content: ""; position: absolute; left: 48px; right: 48px; top: 0; border-top: 1px solid rgba(255, 255, 255, .1); }
.s1ft-brand { color: var(--s1-on-dark); letter-spacing: .18em; }
.s1ft-locale {
    display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 14px;
    border: 1px solid rgba(255, 255, 255, .2); border-radius: var(--s1-r-pill);
    background: transparent; color: var(--s1-on-dark); font: inherit; font-size: 13px; cursor: pointer;
}
.s1ft-locale:hover { border-color: rgba(255, 255, 255, .45); }
.s1ft-locale i { font-weight: 300; }
@media (max-width: 1023px) { .s1ft-in { padding-left: 20px; padding-right: 20px; } .s1ft-bot::before { left: 20px; right: 20px; } }
@media (min-width: 1024px) { .s1ft-bot { padding-right: 120px; } }
@media (max-width: 1023px) { .s1ft-bot { padding-bottom: 96px; } }

/* ==========================================================================
   15. Fil d'Ariane (posé par header.tpl) : sobre, non collant, comme la maquette
   ========================================================================== */
.s1-breadcrumb-nav {
    position: static; top: auto; z-index: auto;
    background: transparent; border-bottom: 0;
    -webkit-backdrop-filter: none; backdrop-filter: none;
}
/* En-tête de page commun à tous les lots : même marge haute, même taille de titre.
   --s1-page-pt = marge au-dessus du titre ; quand le fil d'Ariane de la coquille est
   affiché, c'est lui qui porte la marge et la page ne garde que l'écart fil/titre. */
:root { --s1-page-pt: 48px; --s1-page-crumb-gap: 14px; --s1-h1: clamp(32px, 3.2vw, 46px); }
@media (max-width: 700px) { :root { --s1-page-pt: 28px; } }
#s1main:has(> .s1-breadcrumb-nav) { --s1-page-pt: var(--s1-page-crumb-gap); }
/* Pages qui dessinent leur propre fil (fiche service, hébergement) : pas de doublon. */
#s1main:has(.s1sv-crumbs) > .s1-breadcrumb-nav { display: none; }

.s1-breadcrumb-nav__inner { padding: 48px 48px 0; }
.s1-breadcrumb { gap: 6px 8px; font-size: 15px; font-weight: var(--s1-w-body); color: var(--s1-ink-2); font-family: var(--s1-font); }
.s1-breadcrumb__item { gap: 8px; min-width: 0; }
.s1-breadcrumb__item + .s1-breadcrumb__item::before { content: "\f105"; font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free"; font-weight: 300; font-size: 13px; color: var(--s1-ink-2); }
.s1-breadcrumb__item a { padding: 0; border-radius: 0; color: var(--s1-ink-2); background: none; text-decoration: none; }
.s1-breadcrumb__item a:hover { color: var(--s1-ink); background: none; text-decoration: underline; text-underline-offset: 3px; }
.s1-breadcrumb__item.is-current { padding: 0; background: none; border: 0; box-shadow: none; color: var(--s1-ink-2); font-weight: var(--s1-w-body); overflow-wrap: anywhere; }
@media (max-width: 1023px) { .s1-breadcrumb-nav__inner { padding: 28px 20px 0; } body.is-logged-in #s1main .s1-breadcrumb-nav__inner { padding-left: 0; padding-right: 0; } }

/* ==========================================================================
   16. Correctifs ciblés liés au remappage des boutons
   ========================================================================== */
/* éditeur Markdown (tickets) : barre d'outils compacte ; "Prévisualiser" en
   secondaire pour garder un seul bouton rouge (l'envoi) à l'écran */
.md-editor .btn-toolbar .btn { min-height: 38px; padding: 6px 12px; font-weight: var(--s1-w-body); }
.md-editor .btn-toolbar .btn-primary { background: var(--s1-white); border-color: var(--s1-line); color: var(--s1-ink); }
.md-editor .btn-toolbar .btn-primary:hover { background: var(--s1-white); border-color: var(--s1-line-strong); color: var(--s1-ink); }

/* ==========================================================================
   16. Largeur de lecture (comme la maquette v01) : sur grand écran, le contenu,
       la barre haute et le pied de page sont limités à --s1-wrap et centrés
       dans la zone à droite de la barre latérale. Le fond reste pleine largeur
       (on joue sur les marges internes, pas sur la largeur des blocs).
   ========================================================================== */
/* --s1-gutter-r : gouttière droite au moins égale à la place du bouton rond de l'assistant
   (60 px fixé à 22 px du bord + respiration), pour qu'il ne recouvre jamais le contenu ;
   sans effet dès que la gouttière centrée est plus large (grands écrans). */
:root { --s1-wrap: 1280px; --s1-gutter-x: max(48px, calc((100% - var(--s1-wrap)) / 2)); --s1-gutter-r: max(112px, calc((100% - var(--s1-wrap)) / 2)); }
@media (min-width: 1024px) {
    .s1ub-in,
    .s1ft-in { padding-left: var(--s1-gutter-x); padding-right: var(--s1-gutter-r); }
    .s1ft-bot::before { left: var(--s1-gutter-x); right: var(--s1-gutter-r); }
    body.is-logged-in #s1main.s1-main-gutter {
        padding-left: var(--s1-gutter-x) !important;
        padding-right: var(--s1-gutter-r) !important;
    }
    /* Le fil d'Ariane est DANS #s1main : il ne doit pas rajouter sa propre
       gouttière (décalage de 48 px signalé sur toutes les pages). */
    body.is-logged-in #s1main .s1-breadcrumb-nav__inner { padding-left: 0; padding-right: 0; }
}

/* Mobile et tablette : le bouton rond de l'assistant reste au-dessus du contenu pendant le
   défilement ; une réserve en bas de page garantit que le dernier bloc et ses actions
   remontent toujours au-dessus de lui. */
@media (max-width: 1023px) {
    body.is-logged-in #s1main.s1-main-gutter { padding-bottom: 96px !important; }
}

/* ---------- Couche couleur de la charte sur l'espace client (retour Nolann 07.10 : "trop noir
   et blanc, ça s'éloigne de notre DA") ----------
   En-tête de chaque page connectée dans un bandeau rose très pâle (même teinte que les en-têtes
   des pages produit publiques), statut principal en pastille, onglet actif souligné de rouge.
   Pas de liseré décoratif ni de dégradé. */
:root { --s1-tint: #FFF4F4; }
#s1main :is(.s1d-head, .s1dm-head, .s1sv-head, .s1b-head, .s1a-head, .s1m-head) {
    padding: 32px 36px; border-radius: var(--s1-r-xl); background: var(--s1-tint); align-items: center;
}
#s1main :is(.s1sv-crumbs, .s1v-crumbs) { margin-bottom: 16px; }
#s1main .s1dm-head .s1dm-st { display: inline-flex; align-items: center; padding: 3px 12px; border-radius: var(--s1-r-pill); background: var(--s1-white); font-weight: var(--s1-w-strong); }
#s1main .s1dm-head .s1dm-st.is-ok { background: var(--s1-ok-bg); }
#s1main .s1dm-head .s1dm-st.is-warn { background: var(--s1-warn-bg); }
#s1main .s1dm-head .s1dm-st.is-crit { background: var(--s1-crit-bg); }
@media (max-width: 700px) {
    #s1main :is(.s1d-head, .s1dm-head, .s1sv-head, .s1b-head, .s1a-head, .s1m-head) { padding: 22px 20px; border-radius: var(--s1-r-lg); }
}

/* Voyants de statut en pastille (retour Nolann 07.10 : "les voyants Actif sont trop discrets").
   Fond teinté de la couleur sémantique du statut (vert actif / payé, orange en attente, rouge
   suspendu / en retard, gris terminé), texte en gras. Le chevron des cartes du tableau de bord
   est masqué : la carte entière est déjà un lien. */
#s1main :is(.s1sv-st, .s1d-st, .s1b-st, .s1dm-st, .s1m-st) {
    display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px; border-radius: var(--s1-r-pill);
    background: color-mix(in srgb, currentColor 13%, #fff); font-size: 13px; line-height: 1.4;
    font-weight: var(--s1-w-strong); white-space: nowrap;
}
#s1main :is(.s1sv-st, .s1d-st, .s1b-st, .s1dm-st, .s1m-st)::before { content: ""; width: 6px; height: 6px; background: currentColor; }
#s1main .s1d-st > i { display: none; }
#s1main .s1dm-head .s1dm-st { padding: 4px 13px; font-size: 14px; }

/* Option Support Premium (retour Nolann 07.10 : "discret, en mode l'option est activée") :
   petite pastille dans l'en-tête du tableau de bord et de Mes services, pas une carte de service. */
#s1main .s1-prem { display: inline-flex; align-items: center; gap: 7px; padding: 3px 12px; border-radius: var(--s1-r-pill);
    background: var(--s1-white); border: 1px solid rgba(255, 85, 93, .3); font-size: 14px; font-weight: var(--s1-w-strong);
    color: var(--s1-ink) !important; text-decoration: none; }
#s1main .s1-prem i { font-size: 12px; color: var(--s1-red); }
#s1main .s1-prem:hover { border-color: var(--s1-red); text-decoration: none; }

/* ==========================================================================
   17. Tunnel de commande et boutique (connecté, bureau) : même gouttière que les
       autres pages (audit 08.10 : contenu entre 272 et 384 px selon la page, fil
       d'Ariane collé à la barre latérale). #s1main n'a pas .s1-main-gutter dans le
       panier : la gouttière est portée par le conteneur extérieur de chaque page.
   ========================================================================== */
@media (min-width: 1024px) {
    body.is-logged-in #s1main:not(.s1-main-gutter) :is(#s1cf.s1cf, .s1pl--landing, .s1dr-page, .s1tr-page, #s1vc.s1vc, #order-standard_cart.s1ck, .s1rn, .s1sv.s1ad, #s1pd.s1pd),
    body.is-logged-in #s1main:not(.s1-main-gutter) > .s1-breadcrumb-nav .s1-breadcrumb-nav__inner {
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: var(--s1-gutter-x) !important;
        padding-right: var(--s1-gutter-r) !important;
    }
    /* Marges internes en double (boutique, enregistrement de domaine). */
    body.is-logged-in #s1main:not(.s1-main-gutter) .s1dr-page > .s1dr,
    body.is-logged-in #s1main:not(.s1-main-gutter) .s1pl--landing > .s1m { padding-left: 0 !important; padding-right: 0 !important; max-width: none !important; }
}
@media (max-width: 1023px) {
    body.is-logged-in #s1main:not(.s1-main-gutter) :is(#s1cf.s1cf, .s1pl--landing, .s1dr-page, .s1tr-page, #s1vc.s1vc, #order-standard_cart.s1ck, .s1rn, .s1sv.s1ad, #s1pd.s1pd),
    body.is-logged-in #s1main:not(.s1-main-gutter) > .s1-breadcrumb-nav .s1-breadcrumb-nav__inner { padding-left: 16px !important; padding-right: 16px !important; }
}
/* Titres du tunnel : même graisse que les autres pages (Lato Black), au lieu des 400 hérités. */
#s1main :is(.s1vc__title, .s1vc__hero-title, .s1ck__title, .s1rn .s1dm-head h1) { font-weight: var(--s1-w-title) !important; letter-spacing: normal !important; }
#s1main .s1rn .s1dm-head h1 { font-size: var(--s1-h1) !important; line-height: 1.1 !important; margin: 0 !important; color: var(--s1-ink) !important; }
#s1main .s1rn .s1dm-empty h2 { font-size: 21px !important; font-weight: var(--s1-w-subtitle) !important; letter-spacing: normal !important; }
#s1main .s1rn .s1dm-empty > i { font-weight: 300 !important; }
/* Fil d'Ariane de la boutique : séparateur "/" écrit dans le HTML en plus du chevron commun. */
.s1-breadcrumb__sep { display: none !important; }

/* ==========================================================================
   18. Bandeau "facture impayée" (includes/s1-unpaid-banner.tpl), fiches service et domaine
   ========================================================================== */
.s1-unpaid { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 8px 16px; align-items: center;
    margin: 24px 0 24px; padding: 18px 22px; border-radius: var(--s1-r-lg); background: var(--s1-g50); border: 1px solid var(--s1-line); color: var(--s1-ink); }
.s1-unpaid > i { font-size: 19px; text-align: center; color: var(--s1-ink); }
.s1-unpaid p { margin: 0; font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
.s1-unpaid.is-overdue { background: var(--s1-ink); border-color: var(--s1-ink); color: #fff; }
.s1-unpaid.is-overdue > i { color: var(--s1-red); }
.s1-unpaid.is-overdue :focus-visible { outline-color: #fff; }
@media (max-width: 640px) { .s1-unpaid { grid-template-columns: 24px minmax(0, 1fr); } .s1-unpaid .btn { grid-column: 1 / -1; justify-self: start; } }

/* Menu du profil : pas de double séparateur quand un groupe se termine par un séparateur (retour Nolann 08.10). */
.s1menu hr + hr { display: none; }

/* 19. Onglets de filtre soulignés, partagés (Mes tickets, Mes factures), même dessin que Mes services (revue lot 3). */
.s1-tabs { display: flex; flex: 1 1 auto; flex-wrap: wrap; gap: 0 4px; border-bottom: 1px solid var(--s1-line); }
.s1-tabs button { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 -1px; padding: 12px 14px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none; font: inherit; font-size: 15px; color: var(--s1-ink-2); cursor: pointer; }
.s1-tabs button:hover { color: var(--s1-ink); }
.s1-tabs button[aria-pressed="true"] { color: var(--s1-ink); font-weight: var(--s1-w-strong); border-bottom-color: var(--s1-red); }
.s1-tabs button[hidden] { display: none; }
.s1-tabs .c { font-size: 13px; font-weight: var(--s1-w-body); color: var(--s1-ink-2); font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .s1-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; max-width: 100%; } .s1-tabs button { flex: none; white-space: nowrap; padding: 10px 12px; } }
.s1a-tools + .s1a-rows, .s1b-tools + .s1b-rows { border-top: 0; }
.s1b-tools + .s1b-rows { margin-top: 8px; }
@media (max-width: 640px) { .s1-tabs { border-bottom: 0; box-shadow: inset 0 -1px 0 var(--s1-line); } .s1-tabs button { margin-bottom: 0; } }

/* 20. Éditeur de message : 3 outils + menu "Plus" (js/s1-shell.js, revue lot 3). */
.md-editor .s1md-wrap { position: relative; float: none; }
.md-editor .s1md-main { display: inline-flex; float: none; }
.md-editor .s1md-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; min-width: 220px; padding: 6px; border: 1px solid var(--s1-line); border-radius: var(--s1-r-lg); background: #fff; box-shadow: 0 8px 24px rgba(34, 34, 34, .08); }
.md-editor .s1md-menu[hidden] { display: none; }
.md-editor .s1md-menu .s1md-item { display: flex; align-items: center; justify-content: flex-start; gap: 12px; width: 100%; min-height: 38px; margin: 0; padding: 8px 12px; border: 0; border-radius: 8px; background: none; color: var(--s1-ink); font-size: 14px; text-align: left; box-shadow: none; float: none; }
.md-editor .s1md-menu .s1md-item:hover, .md-editor .s1md-menu .s1md-item:focus-visible { background: var(--s1-soft); }
.md-editor .s1md-menu .s1md-item > .fa, .md-editor .s1md-menu .s1md-item > [class*="fa-"] { width: 16px; text-align: center; color: var(--s1-ink-2); }
.md-editor .s1md-menu .s1md-item.active { color: var(--s1-red); }

/* Choix du domaine (configureproductdomain) : page alignée à gauche comme le panier, formulaire à largeur de lecture (revue lot 4). */
#s1pd.s1pd .s1pd__hero, #s1pd.s1pd .s1pd__form { max-width: 860px; }

/* 21. Barre latérale en sections ouvertes (includes/s1-sidebar.tpl, retour Nolann 08.10). */
.s1sb-sec { margin-top: 18px; }
.s1sb-sec-t { margin: 0 0 6px; padding: 0 12px; font-size: 13px; font-weight: var(--s1-w-strong); color: var(--s1-on-dark-2, #CCCCCC); letter-spacing: 0; }
html.s1sb-mini .s1sb-sec { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .08); }
html.s1sb-mini .s1sb-sec-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 1023px) { html.s1sb-mini .s1sb-sec { border-top: 0; padding-top: 0; margin-top: 18px; } html.s1sb-mini .s1sb-sec-t { position: static; width: auto; height: auto; clip: auto; } }

/* 22. Menus déroulants du site public (Compte, Boutique...) : graisse 400 (Lato n'a pas de 500, rendu
   simulé), pas de puce ronde (charte), survol gris neutre comme le menu du profil (retour Nolann 08.10). */
.s1-nav__dropdown-link { font-weight: var(--s1-w-body); font-size: 15px; color: var(--s1-ink); padding: 9px 12px; }
.s1-nav__dropdown-link:hover, .s1-nav__dropdown-link:focus-visible { background: var(--s1-soft); color: var(--s1-ink); }
.s1-nav__dropdown-bullet { display: none; }

/* 23. Inscription (clientregister.tpl) : même dessin que Connexion (revue lot 5). Lato, anthracite,
   titre à gauche, plus d'étiquette ni de numéros 01/02, champs aux angles de la charte, blocs sans ombre.
   Les champs, leur ordre et leurs noms ne changent pas. */
html body #registration.s1-register { padding: calc(64px + 56px) 24px 80px !important; font-family: var(--s1-font) !important; color: var(--s1-ink); }
html body #registration .s1-register__header { text-align: left; margin-bottom: 40px; }
html body #registration .s1-register__eyebrow { display: none; }
html body #registration .s1-register__title { font-size: var(--s1-h1); font-weight: var(--s1-w-title); letter-spacing: normal; line-height: 1.1; color: var(--s1-ink); margin: 0 0 12px; }
html body #registration .s1-register__lead { margin: 0; max-width: none; font-size: 17px; line-height: 1.55; color: var(--s1-ink-2); }
html body #registration .s1-register__section { border: 1px solid var(--s1-line); border-radius: var(--s1-r-lg, 16px); box-shadow: none; padding: 28px; }
html body #registration .s1-register__section:hover { border-color: var(--s1-line); box-shadow: none; }
html body #registration .s1-register__section-title { font-size: 19px; font-weight: var(--s1-w-strong); color: var(--s1-ink); letter-spacing: 0; margin: 0 0 20px; }
html body #registration .s1-register__section-title::before { content: none; display: none; }
html body #registration .s1-register__section-hint { font-style: normal; font-size: 14px; color: var(--s1-ink-2); margin: -12px 0 20px; }
html body #registration .s1-register__field label { font-size: 15px; font-weight: var(--s1-w-body); color: var(--s1-ink); }
html body #registration .s1-register__hint { font-size: 14px; color: var(--s1-ink-2); }
html body #registration.s1-register :is(.field, .form-control, select, input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="number"]) {
    font-family: var(--s1-font) !important; color: var(--s1-ink) !important; border-color: var(--s1-line-strong) !important;
    border-radius: var(--s1-r-md, 10px) !important; min-height: 48px !important; padding: 11px 14px !important; font-size: 16px !important;
}
html body #registration.s1-register input::placeholder { color: var(--s1-ink-2); opacity: .7; }
html body #registration.s1-register :is(.form-control, .field):focus { border-color: var(--s1-red) !important; box-shadow: var(--s1-ring) !important; }
html body #registration .s1-register__opt-text, html body #registration .s1-register__toggle-label, html body #registration .s1-register__tos, html body #registration .s1-register__signin { font-size: 15px; color: var(--s1-ink-2); }
html body #registration .s1-register__toggle input[type="checkbox"]:checked { background: var(--s1-red); }
html body #registration .s1-register__submit { align-items: flex-start; border-top: 0; padding-top: 0; margin-top: 32px; gap: 20px; }
html body #registration .s1-register__tos a, html body #registration .s1-register__signin a { color: var(--s1-ink); text-decoration: underline; text-underline-offset: 3px; font-weight: var(--s1-w-body); }
html body #registration .s1-register__tos input[type="checkbox"] { accent-color: var(--s1-red); }
html body #registration .s1-register__signin { margin: 0; }
html body #registration .generate-password { border: 0 !important; background: none !important; padding: 0 !important; min-height: 0 !important; color: var(--s1-ink) !important; text-decoration: underline; text-underline-offset: 3px; font-weight: var(--s1-w-body) !important; font-size: 15px !important; justify-content: flex-start; width: auto !important; }
html body #registration .s1-register__pw-label { font-size: 14px; color: var(--s1-ink-2); }
@media (max-width: 640px) { html body #registration.s1-register { padding: calc(64px + 24px) 16px 64px !important; } }
html body #registration .intl-tel-input.separate-dial-code :is(input[type="tel"], input[type="text"]) { padding-left: 92px !important; }
html body #registration .intl-tel-input.separate-dial-code.iti-sdc-3 :is(input[type="tel"], input[type="text"]) { padding-left: 104px !important; }
html body #registration .intl-tel-input.separate-dial-code.iti-sdc-4 :is(input[type="tel"], input[type="text"]) { padding-left: 116px !important; }
html body #registration .intl-tel-input .selected-flag { padding: 0 12px 0 14px !important; border-radius: var(--s1-r-md, 10px) 0 0 var(--s1-r-md, 10px); }
html body #registration label { font-weight: var(--s1-w-body); }

/* 24. Tableaux comparatifs des vitrines : la zone de défilement ne doit pas élargir la page sur mobile
   (Microsoft 365 et Vulnerability Checker débordaient de 12 à 28 px à 390 px : textes sr-only en absolu hors de la zone de défilement). */
.s1m, .s1m-sec, .s1v2-sec { min-width: 0; }
.s1m-scroll { max-width: 100%; position: relative; }