@charset "UTF-8";
/* ==========================================================================
   PixHeberg — theme espace client WHMCS
   Assorti a pixheberg.fr : fond noir/graphite, accent acier #8A8F9E,
   Plus Jakarta Sans, cartes a coins doux, transitions fluides.

   Child theme de "six" (Bootstrap 3). Ce fichier est charge
   automatiquement par le theme parent — aucun template n'est surcharge,
   donc rien ne casse lors d'une mise a jour de WHMCS.

   Sommaire
     01. Tokens & police
     02. Base, scrollbar, selection, focus
     03. Typographie
     04. En-tete / navigation
     05. Bandeau d'accueil & raccourcis
     06. Corps de page & fil d'ariane
     07. Boutons
     08. Formulaires
     09. Cartes (panels)
     10. Barre laterale
     11. Tableaux
     12. Alertes, labels, badges
     13. Onglets, pagination
     14. Modales, dropdowns, tooltips
     15. Page de connexion
     16. Commande & panier
     17. Tickets & factures
     18. Pied de page
     19. Animations
     20. Responsive & impression
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap");

/* --------------------------------------------------------------------------
   01. Tokens — miroir exact des couleurs du site
   -------------------------------------------------------------------------- */
:root {
    /* Surfaces (identiques a tailwind.config.ts du site) */
    --px-bg: #08090d;
    --px-surface: #0f1116;
    --px-card: #16181f;
    --px-card-hover: #1b1e26;
    --px-elevated: #202430;

    /* Traits */
    --px-line: rgba(255, 255, 255, 0.08);
    --px-line-strong: rgba(255, 255, 255, 0.14);
    --px-line-hover: rgba(255, 255, 255, 0.2);

    /* Texte */
    --px-text: #ffffff;
    --px-muted: #8a8f9e;
    --px-muted-soft: rgba(138, 143, 158, 0.7);

    /* Accent acier (couleur du logo) */
    --px-steel: #8a8f9e;

    /* Semantiques — conservees lisibles sur fond sombre */
    --px-success: #34d399;
    --px-success-bg: rgba(52, 211, 153, 0.12);
    --px-warning: #fbbf24;
    --px-warning-bg: rgba(251, 191, 36, 0.12);
    --px-danger: #f87171;
    --px-danger-bg: rgba(248, 113, 113, 0.12);
    --px-info: #a7abb6;
    --px-info-bg: rgba(167, 171, 182, 0.1);

    /* Rayons — alignes sur les classes Tailwind du site */
    --px-r-sm: 8px;
    --px-r: 12px;
    --px-r-lg: 16px;
    --px-r-pill: 999px;

    /* Ombres */
    --px-shadow: 0 4px 24px -8px rgba(0, 0, 0, 0.5);
    --px-shadow-lg: 0 18px 48px -16px rgba(0, 0, 0, 0.65);
    --px-glow: 0 0 60px -15px rgba(255, 255, 255, 0.18);

    /* Mouvement */
    --px-ease: cubic-bezier(0.21, 0.47, 0.32, 0.98);
    --px-t: 0.2s var(--px-ease);

    --px-font: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system,
        "Segoe UI", Roboto, sans-serif;
    --px-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
}

/* --------------------------------------------------------------------------
   02. Base
   -------------------------------------------------------------------------- */
html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--px-bg);
    background-image:
        radial-gradient(circle at 12% -5%, rgba(138, 143, 158, 0.13), transparent 45%),
        radial-gradient(circle at 100% 0%, rgba(138, 143, 158, 0.07), transparent 40%);
    background-attachment: fixed;
    background-repeat: no-repeat;
    color: var(--px-text);
    font-family: var(--px-font);
    font-size: 15px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

::selection {
    background-color: #ffffff;
    color: var(--px-bg);
}

/* Scrollbar assortie au fond sombre */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--px-elevated) transparent;
}
*::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
*::-webkit-scrollbar-track {
    background: transparent;
}
*::-webkit-scrollbar-thumb {
    background-color: var(--px-elevated);
    border: 2px solid var(--px-bg);
    border-radius: var(--px-r-pill);
}
*::-webkit-scrollbar-thumb:hover {
    background-color: #2b3040;
}

/* Anneau de focus coherent et accessible */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--px-steel);
    outline-offset: 2px;
    border-radius: var(--px-r-sm);
}

a {
    color: var(--px-text);
    transition: color var(--px-t), opacity var(--px-t);
}
a:hover,
a:focus {
    color: var(--px-text);
    text-decoration: none;
    opacity: 0.82;
}

hr {
    border-color: var(--px-line);
}

code,
kbd,
pre,
samp {
    font-family: var(--px-mono);
}
code {
    background-color: var(--px-surface);
    border: 1px solid var(--px-line);
    border-radius: var(--px-r-sm);
    color: var(--px-text);
    padding: 0.15em 0.45em;
}
pre {
    background-color: var(--px-surface);
    border: 1px solid var(--px-line);
    border-radius: var(--px-r);
    color: var(--px-muted);
}

/* --------------------------------------------------------------------------
   03. Typographie
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--px-font);
    color: var(--px-text);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.25;
}

h1, .h1 { font-size: 33.6px; }
h2, .h2 { font-size: 27.2px; }
h3, .h3 { font-size: 20.8px; }
h4, .h4 { font-size: 17.6px; }

p {
    color: var(--px-muted);
}

.lead {
    color: var(--px-muted);
    font-size: 16.8px;
    font-weight: 400;
}

small,
.small {
    color: var(--px-muted-soft);
}

.text-muted {
    color: var(--px-muted) !important;
}
.text-success { color: var(--px-success) !important; }
.text-warning { color: var(--px-warning) !important; }
.text-danger  { color: var(--px-danger) !important; }
.text-info    { color: var(--px-info) !important; }
.text-primary { color: var(--px-text) !important; }

/* --------------------------------------------------------------------------
   04. En-tete & navigation
   Six separe l'en-tete en deux bandes : #header (logo + actions) et
   #main-menu (liens). On les rend visuellement solidaires et collantes,
   pour retrouver la barre unique et floutee du site.
   -------------------------------------------------------------------------- */
section#header {
    background: rgba(8, 9, 13, 0.82);
    -webkit-backdrop-filter: saturate(140%) blur(14px);
    backdrop-filter: saturate(140%) blur(14px);
    border-bottom: 1px solid var(--px-line);
    padding: 0;
    position: sticky;
    top: 0;
    z-index: 1030;
}

/* Bootstrap ajoute un clearfix ::before/::after sur .container ; en contexte
   flex ces pseudo-elements deviennent des items et decalent le logo. */
section#header .container::before,
section#header .container::after {
    display: none;
}

section#header .container {
    align-items: center;
    display: flex;
    gap: 16px;
    justify-content: space-between;
    min-height: 68px;
}

/* Logo — texte ou image */
section#header .logo {
    align-items: center;
    display: inline-flex;
    float: none;
    gap: 9.6px;
    margin: 0;
    order: 1;
    padding: 0;
}
section#header .logo img {
    height: 36px;
    width: auto;
}
section#header .logo.logo-text {
    color: var(--px-text);
    font-size: 19.2px;
    font-weight: 700;
    letter-spacing: -0.02em;
}
section#header .logo:hover {
    opacity: 0.85;
}

/* Actions a droite (langue, notifications, connexion, panier) */
section#header .top-nav {
    align-items: center;
    display: flex;
    float: none;
    gap: 5.6px;
    list-style: none;
    margin: 0;
    order: 2;
    padding: 0;
}
section#header .top-nav > li {
    display: inline-flex;
}
section#header .top-nav > li > a {
    border-radius: var(--px-r-pill);
    color: var(--px-muted);
    display: inline-flex;
    align-items: center;
    gap: 6.4px;
    font-size: 14px;
    font-weight: 500;
    padding: 8px 13.6px;
    transition: color var(--px-t), background-color var(--px-t);
}
section#header .top-nav > li > a:hover,
section#header .top-nav > li > a:focus {
    background-color: var(--px-card);
    color: var(--px-text);
    opacity: 1;
}

/* Bouton d'action principal (panier / deconnexion) — le CTA blanc du site */
section#header .top-nav .primary-action > a.btn,
section#header .top-nav > li > a.btn {
    background-color: #ffffff;
    border: 0;
    border-radius: var(--px-r-pill);
    color: var(--px-bg);
    font-size: 14px;
    font-weight: 600;
    margin-left: 5.6px;
    padding: 8.8px 20px;
    transition: transform 0.15s var(--px-ease), box-shadow var(--px-t);
}
section#header .top-nav .primary-action > a.btn:hover,
section#header .top-nav > li > a.btn:hover {
    background-color: #ffffff;
    box-shadow: 0 8px 24px -10px rgba(255, 255, 255, 0.45);
    color: var(--px-bg);
    opacity: 1;
    transform: translateY(-1px) scale(1.03);
}
section#header .top-nav .primary-action > a.btn:active,
section#header .top-nav > li > a.btn:active {
    transform: scale(0.97);
}
/* Le bouton "retour admin" reste discret, pas en CTA blanc.
   Le selecteur doit passer par > li > a comme la regle CTA ci-dessus, sinon
   il est moins specifique qu'elle et le bouton ressort blanc quand meme. */
section#header .top-nav > li > a.btn.btn-logged-in-admin {
    background-color: var(--px-card);
    border: 1px solid var(--px-line);
    color: var(--px-muted);
}
section#header .top-nav > li > a.btn.btn-logged-in-admin:hover {
    background-color: var(--px-card-hover);
    box-shadow: none;
    color: var(--px-text);
}

/* Barre des liens de navigation */
section#main-menu {
    /* Six pose ici un turquoise (#006687). La barre interne etant translucide,
       il transparaissait derriere elle : on neutralise le fond du conteneur. */
    background-color: transparent;
    position: sticky;
    top: 68px;
    z-index: 1029;
}
section#main-menu .navbar-main,
section#main-menu .navbar-default {
    background: rgba(8, 9, 13, 0.82);
    -webkit-backdrop-filter: saturate(140%) blur(14px);
    backdrop-filter: saturate(140%) blur(14px);
    border: 0;
    border-bottom: 1px solid var(--px-line);
    border-radius: 0;
    margin: 0;
    min-height: 52px;
}

section#main-menu .navbar-nav > li > a {
    color: var(--px-muted);
    font-size: 14.4px;
    font-weight: 500;
    padding: 16px 15.2px;
    position: relative;
    transition: color var(--px-t);
}
section#main-menu .navbar-nav > li > a:hover,
section#main-menu .navbar-nav > li > a:focus {
    background-color: transparent;
    color: var(--px-text);
}

/* Soulignement fin de l'onglet actif — repris de la nav du site */
section#main-menu .navbar-nav > li > a::after {
    background-color: #ffffff;
    bottom: 8.8px;
    content: "";
    height: 1px;
    left: 15.2px;
    opacity: 0;
    position: absolute;
    right: 15.2px;
    transform: scaleX(0.4);
    transition: opacity var(--px-t), transform var(--px-t);
}
section#main-menu .navbar-nav > li.active > a::after,
section#main-menu .navbar-nav > li > a:hover::after {
    opacity: 1;
    transform: scaleX(1);
}
section#main-menu .navbar-nav > li.active > a,
section#main-menu .navbar-nav > .active > a:hover,
section#main-menu .navbar-nav > .active > a:focus {
    background-color: transparent;
    color: var(--px-text);
    font-weight: 600;
}

section#main-menu .navbar-nav > .open > a,
section#main-menu .navbar-nav > .open > a:hover,
section#main-menu .navbar-nav > .open > a:focus {
    background-color: transparent;
    color: var(--px-text);
}

/* Bouton hamburger mobile */
.navbar-default .navbar-toggle {
    border: 1px solid var(--px-line);
    border-radius: var(--px-r-sm);
    transition: border-color var(--px-t), background-color var(--px-t);
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
    background-color: var(--px-card);
    border-color: var(--px-line-hover);
}
.navbar-default .navbar-toggle .icon-bar {
    background-color: var(--px-text);
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
    border-color: var(--px-line);
}

/* --------------------------------------------------------------------------
   05. Bandeau d'accueil & raccourcis
   -------------------------------------------------------------------------- */
section#home-banner {
    background: transparent;
    border-bottom: 1px solid var(--px-line);
    padding: 80px 0 64px;
    position: relative;
}
section#home-banner h2 {
    font-size: 40px;
    font-weight: 700;
    letter-spacing: -0.03em;
    margin-bottom: 32px;
}
section#home-banner .input-group-lg .form-control,
section#home-banner .input-group-lg textarea {
    background-color: var(--px-card);
    border: 1px solid var(--px-line);
    box-shadow: none;
    color: var(--px-text);
    font-size: 16px;
    height: auto;
    padding: 14.4px 24px;
}
section#home-banner .input-group-btn .btn {
    font-size: 15.2px;
    padding: 14.4px 28px;
}

.home-shortcuts {
    background: transparent;
    border-bottom: 1px solid var(--px-line);
    padding: 24px 0;
}
.home-shortcuts .lead {
    color: var(--px-muted);
    margin: 0;
    padding-top: 12px;
}
.home-shortcuts ul {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.home-shortcuts ul li {
    flex: 1 1 192px;
}
.home-shortcuts ul li a {
    align-items: center;
    background-color: var(--px-card);
    border: 1px solid var(--px-line);
    border-radius: var(--px-r-lg);
    color: var(--px-text);
    display: flex;
    gap: 13.6px;
    height: 100%;
    padding: 16px 18.4px;
    transition: border-color var(--px-t), transform 0.15s var(--px-ease),
        background-color var(--px-t);
}
.home-shortcuts ul li a:hover {
    background-color: var(--px-card-hover);
    border-color: var(--px-line-hover);
    opacity: 1;
    transform: translateY(-3px);
}
.home-shortcuts ul li a i {
    color: var(--px-text);
    font-size: 18.4px;
}
.home-shortcuts ul li a p {
    color: var(--px-text);
    font-size: 14.4px;
    font-weight: 600;
    margin: 0;
}
.home-shortcuts ul li a p span {
    color: var(--px-muted);
}

/* --------------------------------------------------------------------------
   06. Corps de page, en-tete de page, fil d'ariane
   -------------------------------------------------------------------------- */
section#main-body {
    background: transparent;
    padding: 40px 0 64px;
}

.header-lined {
    border-bottom: 1px solid var(--px-line);
    margin-bottom: 28px;
    padding-bottom: 13.6px;
}
.header-lined h1 {
    font-size: 28px;
    margin: 0 0 5.6px;
}

.breadcrumb {
    background: transparent;
    font-size: 13.6px;
    margin-bottom: 16px;
    padding: 0;
}
.breadcrumb > li + li:before {
    color: var(--px-muted-soft);
    content: "/";
    padding: 0 8px;
}
.breadcrumb > li > a {
    color: var(--px-muted);
}
.breadcrumb > li > a:hover {
    color: var(--px-text);
}
.breadcrumb > .active {
    color: var(--px-text);
}

/* --------------------------------------------------------------------------
   07. Boutons
   -------------------------------------------------------------------------- */
.btn {
    border: 1px solid transparent;
    border-radius: var(--px-r-pill);
    font-family: var(--px-font);
    font-size: 14.4px;
    font-weight: 600;
    letter-spacing: -0.01em;
    padding: 8.8px 20px;
    transition: background-color var(--px-t), border-color var(--px-t),
        color var(--px-t), transform 0.15s var(--px-ease), box-shadow var(--px-t);
}
.btn:active,
.btn.active {
    box-shadow: none;
    transform: scale(0.97);
}

/* Primaire = le CTA blanc du site */
.btn-primary {
    background-color: #ffffff;
    border-color: #ffffff;
    color: var(--px-bg);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus {
    background-color: #f2f3f5;
    border-color: #f2f3f5;
    box-shadow: 0 8px 24px -12px rgba(255, 255, 255, 0.5);
    color: var(--px-bg);
}
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
    background-color: #e8e9ec;
    border-color: #e8e9ec;
    color: var(--px-bg);
}

/* Secondaire = carte bordee du site */
.btn-default,
.btn-secondary {
    background-color: var(--px-card);
    border-color: var(--px-line);
    color: var(--px-text);
}
.btn-default:hover,
.btn-default:focus,
.btn-secondary:hover {
    background-color: var(--px-card-hover);
    border-color: var(--px-line-hover);
    color: var(--px-text);
}
.btn-default:active,
.btn-default.active,
.open > .dropdown-toggle.btn-default {
    background-color: var(--px-elevated);
    border-color: var(--px-line-hover);
    color: var(--px-text);
}

/* Variantes semantiques — teintees, lisibles sur fond sombre */
.btn-success {
    background-color: var(--px-success-bg);
    border-color: rgba(52, 211, 153, 0.35);
    color: var(--px-success);
}
.btn-success:hover,
.btn-success:focus {
    background-color: rgba(52, 211, 153, 0.2);
    border-color: var(--px-success);
    color: var(--px-success);
}
.btn-danger {
    background-color: var(--px-danger-bg);
    border-color: rgba(248, 113, 113, 0.35);
    color: var(--px-danger);
}
.btn-danger:hover,
.btn-danger:focus {
    background-color: rgba(248, 113, 113, 0.2);
    border-color: var(--px-danger);
    color: var(--px-danger);
}
.btn-warning {
    background-color: var(--px-warning-bg);
    border-color: rgba(251, 191, 36, 0.35);
    color: var(--px-warning);
}
.btn-warning:hover,
.btn-warning:focus {
    background-color: rgba(251, 191, 36, 0.2);
    border-color: var(--px-warning);
    color: var(--px-warning);
}
.btn-info {
    background-color: var(--px-info-bg);
    border-color: var(--px-line-strong);
    color: var(--px-text);
}
.btn-info:hover,
.btn-info:focus {
    background-color: rgba(167, 171, 182, 0.18);
    border-color: var(--px-line-hover);
    color: var(--px-text);
}
.btn-link {
    color: var(--px-muted);
}
.btn-link:hover {
    color: var(--px-text);
    text-decoration: none;
}

.btn-lg {
    font-size: 16px;
    padding: 13.6px 30.4px;
}
.btn-sm,
.btn-xs {
    font-size: 12.8px;
    padding: 5.6px 14.4px;
}

.btn.disabled,
.btn[disabled],
fieldset[disabled] .btn {
    opacity: 0.45;
    transform: none;
}

.btn-group > .btn:first-child:not(:last-child) {
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
}
.btn-group > .btn:last-child:not(:first-child),
.btn-group > .dropdown-toggle:not(:first-child) {
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
}

/* --------------------------------------------------------------------------
   08. Formulaires
   -------------------------------------------------------------------------- */
label,
.control-label {
    color: var(--px-text);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin-bottom: 6.4px;
}

.form-control {
    background-color: var(--px-surface);
    border: 1px solid var(--px-line);
    border-radius: var(--px-r);
    box-shadow: none;
    color: var(--px-text);
    font-family: var(--px-font);
    font-size: 14.4px;
    height: auto;
    padding: 9.6px 14.4px;
    transition: border-color var(--px-t), background-color var(--px-t),
        box-shadow var(--px-t);
}
.form-control:focus {
    background-color: var(--px-card);
    border-color: var(--px-steel);
    box-shadow: 0 0 0 3px rgba(138, 143, 158, 0.16);
    color: var(--px-text);
    outline: none;
}
.form-control::placeholder {
    color: var(--px-muted-soft);
}
.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
    background-color: var(--px-bg);
    color: var(--px-muted-soft);
    opacity: 0.7;
}
textarea.form-control {
    line-height: 1.6;
    min-height: 112px;
}
select.form-control {
    appearance: none;
    -webkit-appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--px-muted) 50%),
        linear-gradient(135deg, var(--px-muted) 50%, transparent 50%);
    background-position: calc(100% - 18px) center, calc(100% - 13px) center;
    background-repeat: no-repeat;
    background-size: 5px 5px, 5px 5px;
    padding-right: 36px;
}
select.form-control option {
    background-color: var(--px-card);
    color: var(--px-text);
}

.input-group-addon {
    background-color: var(--px-card);
    border: 1px solid var(--px-line);
    border-radius: var(--px-r);
    color: var(--px-muted);
}
.input-group .form-control:first-child,
.input-group-addon:first-child {
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
}
.input-group .form-control:last-child,
.input-group-addon:last-child {
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
}

.help-block {
    color: var(--px-muted-soft);
    font-size: 13.12px;
}

.has-error .form-control {
    border-color: var(--px-danger);
}
.has-error .form-control:focus {
    box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.18);
}
.has-error .control-label,
.has-error .help-block {
    color: var(--px-danger);
}
.has-success .form-control {
    border-color: var(--px-success);
}
.has-success .control-label {
    color: var(--px-success);
}

.checkbox label,
.radio label {
    color: var(--px-muted);
    font-weight: 400;
}

/* iCheck (utilise par six) */
.iCheck-helper + ins,
.icheckbox_square-blue,
.iradio_square-blue {
    filter: grayscale(1) brightness(1.6);
}

/* Select2, utilise sur plusieurs ecrans WHMCS */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    background-color: var(--px-surface);
    border: 1px solid var(--px-line);
    border-radius: var(--px-r);
    min-height: 41.6px;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--px-text);
    line-height: 38.4px;
}
.select2-dropdown {
    background-color: var(--px-card);
    border: 1px solid var(--px-line-strong);
    border-radius: var(--px-r);
    box-shadow: var(--px-shadow-lg);
}
.select2-container--default .select2-results__option {
    color: var(--px-muted);
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--px-elevated);
    color: var(--px-text);
}
.select2-container--default .select2-search--dropdown .select2-search__field {
    background-color: var(--px-surface);
    border: 1px solid var(--px-line);
    border-radius: var(--px-r-sm);
    color: var(--px-text);
}

/* --------------------------------------------------------------------------
   09. Cartes (panels) — le composant signature du site
   -------------------------------------------------------------------------- */
.panel {
    background-color: var(--px-card);
    border: 1px solid var(--px-line);
    border-radius: var(--px-r-lg);
    box-shadow: var(--px-shadow);
    margin-bottom: 24px;
    transition: border-color var(--px-t), box-shadow var(--px-t),
        transform 0.15s var(--px-ease);
}
.panel:hover {
    border-color: var(--px-line-hover);
}

.panel-heading {
    background-color: transparent;
    border-bottom: 1px solid var(--px-line);
    border-radius: var(--px-r-lg) var(--px-r-lg) 0 0;
    color: var(--px-text);
    padding: 17.6px 21.6px;
}
.panel-title {
    color: var(--px-text);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.01em;
}
.panel-title > a {
    color: var(--px-text);
}
.panel-body {
    color: var(--px-muted);
    padding: 21.6px;
}
.panel-body p:last-child {
    margin-bottom: 0;
}
.panel-footer {
    background-color: var(--px-surface);
    border-top: 1px solid var(--px-line);
    border-radius: 0 0 var(--px-r-lg) var(--px-r-lg);
    color: var(--px-muted);
    padding: 16px 21.6px;
}

/* Toutes les variantes colorees de panel retombent sur la carte sombre :
   c'est la teinte du titre/bordure qui porte le sens, pas un fond vif. */
.panel-default,
.panel-primary,
.panel-info,
.panel-success,
.panel-warning,
.panel-danger {
    background-color: var(--px-card);
    border-color: var(--px-line);
}
.panel-primary > .panel-heading,
.panel-info > .panel-heading,
.panel-default > .panel-heading {
    background-color: transparent;
    border-color: var(--px-line);
    color: var(--px-text);
}
.panel-success > .panel-heading {
    background-color: var(--px-success-bg);
    border-color: rgba(52, 211, 153, 0.25);
    color: var(--px-success);
}
.panel-warning > .panel-heading {
    background-color: var(--px-warning-bg);
    border-color: rgba(251, 191, 36, 0.25);
    color: var(--px-warning);
}
.panel-danger > .panel-heading {
    background-color: var(--px-danger-bg);
    border-color: rgba(248, 113, 113, 0.25);
    color: var(--px-danger);
}
.panel-success > .panel-heading .panel-title { color: var(--px-success); }
.panel-warning > .panel-heading .panel-title { color: var(--px-warning); }
.panel-danger  > .panel-heading .panel-title { color: var(--px-danger); }

.well {
    background-color: var(--px-surface);
    border: 1px solid var(--px-line);
    border-radius: var(--px-r-lg);
    box-shadow: none;
    color: var(--px-muted);
}

/* --------------------------------------------------------------------------
   10. Barre laterale
   -------------------------------------------------------------------------- */
.sidebar .panel {
    box-shadow: none;
}
.sidebar .panel-heading .panel-title {
    align-items: center;
    display: flex;
    font-size: 12.8px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.sidebar .panel-heading .panel-title i:first-child {
    color: var(--px-muted);
    margin-right: 8px;
}
.sidebar .panel-minimise {
    color: var(--px-muted);
    cursor: pointer;
    /* le titre est en flex : float:right (classe .pull-right de WHMCS)
       n'a plus d'effet, on repousse donc l'icone avec une marge auto */
    margin-left: auto;
    transition: transform var(--px-t), color var(--px-t);
}
.sidebar .panel-minimise:hover {
    color: var(--px-text);
}

.list-group {
    border-radius: 0 0 var(--px-r-lg) var(--px-r-lg);
}
.list-group-item {
    background-color: transparent;
    border: 0;
    border-top: 1px solid var(--px-line);
    color: var(--px-muted);
    font-size: 14.4px;
    padding: 11.2px 21.6px;
    position: relative;
    transition: background-color var(--px-t), color var(--px-t),
        padding-left var(--px-t);
}
.list-group-item:first-child {
    border-top: 0;
}
.list-group-item:last-child {
    border-radius: 0 0 var(--px-r-lg) var(--px-r-lg);
}
.list-group-item:hover,
.list-group-item:focus {
    background-color: var(--px-card-hover);
    color: var(--px-text);
    padding-left: 24.8px;
}
.list-group-item.active,
.list-group-item.active:hover,
.list-group-item.active:focus {
    background-color: var(--px-elevated);
    border-color: var(--px-line);
    color: var(--px-text);
    font-weight: 600;
}
/* Liseré blanc a gauche de l'entree active */
.list-group-item.active::before {
    background-color: #ffffff;
    border-radius: 0 2px 2px 0;
    bottom: 5.6px;
    content: "";
    left: 0;
    position: absolute;
    top: 5.6px;
    width: 2px;
}
.list-group-item.disabled,
.list-group-item.disabled:hover {
    background-color: transparent;
    color: var(--px-muted-soft);
    opacity: 0.5;
}
.list-group-item .sidebar-menu-item-icon {
    color: var(--px-muted);
    margin-right: 8px;
    width: 16px;
}
.list-group-item.active .sidebar-menu-item-icon {
    color: var(--px-text);
}

/* --------------------------------------------------------------------------
   11. Tableaux
   -------------------------------------------------------------------------- */
.table {
    color: var(--px-muted);
    margin-bottom: 0;
}
.table > thead > tr > th {
    border-bottom: 1px solid var(--px-line-strong);
    color: var(--px-muted);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.05em;
    padding: 13.6px 16px;
    text-transform: uppercase;
    vertical-align: middle;
}
.table > tbody > tr > td,
.table > tfoot > tr > td {
    border-top: 1px solid var(--px-line);
    color: var(--px-muted);
    padding: 13.6px 16px;
    vertical-align: middle;
}
.table > tbody > tr > td a {
    color: var(--px-text);
    font-weight: 500;
}
.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, 0.015);
}
.table-hover > tbody > tr:hover {
    background-color: var(--px-card-hover);
}
.table-bordered,
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > td {
    border-color: var(--px-line);
}
.panel > .table:last-child,
.panel > .table-responsive:last-child > .table:last-child {
    border-radius: 0 0 var(--px-r-lg) var(--px-r-lg);
    overflow: hidden;
}
.table-responsive {
    border-color: var(--px-line);
}

/* DataTables (listes de services, factures, tickets) */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_processing,
.dataTables_wrapper .dataTables_paginate {
    color: var(--px-muted);
}
.dataTables_wrapper .dataTables_filter input {
    background-color: var(--px-surface);
    border: 1px solid var(--px-line);
    border-radius: var(--px-r-sm);
    color: var(--px-text);
    padding: 5.6px 11.2px;
}
table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after {
    color: var(--px-muted-soft);
}

/* --------------------------------------------------------------------------
   12. Alertes, labels, badges
   -------------------------------------------------------------------------- */
.alert {
    border: 1px solid var(--px-line);
    border-radius: var(--px-r-lg);
    color: var(--px-muted);
    font-size: 14.4px;
    padding: 16px 20px;
}
.alert a,
.alert .alert-link {
    color: var(--px-text);
    font-weight: 600;
    text-decoration: underline;
}
.alert-success {
    background-color: var(--px-success-bg);
    border-color: rgba(52, 211, 153, 0.3);
    color: var(--px-success);
}
.alert-info {
    background-color: var(--px-info-bg);
    border-color: var(--px-line-strong);
    color: var(--px-info);
}
.alert-warning {
    background-color: var(--px-warning-bg);
    border-color: rgba(251, 191, 36, 0.3);
    color: var(--px-warning);
}
.alert-danger {
    background-color: var(--px-danger-bg);
    border-color: rgba(248, 113, 113, 0.3);
    color: var(--px-danger);
}
.alert .close {
    color: currentColor;
    opacity: 0.6;
    text-shadow: none;
}
.alert .close:hover {
    opacity: 1;
}

/* Pastilles — reprises des badges "Gratuit" du site */
.label,
.badge {
    border: 1px solid var(--px-line);
    border-radius: var(--px-r-pill);
    font-size: 11.52px;
    font-weight: 600;
    letter-spacing: 0.01em;
    padding: 0.28em 0.75em;
}
.label-default,
.badge {
    background-color: var(--px-surface);
    color: var(--px-muted);
}
.label-primary,
.label-info {
    background-color: var(--px-info-bg);
    border-color: var(--px-line-strong);
    color: var(--px-text);
}
.label-success {
    background-color: var(--px-success-bg);
    border-color: rgba(52, 211, 153, 0.3);
    color: var(--px-success);
}
.label-warning {
    background-color: var(--px-warning-bg);
    border-color: rgba(251, 191, 36, 0.3);
    color: var(--px-warning);
}
.label-danger {
    background-color: var(--px-danger-bg);
    border-color: rgba(248, 113, 113, 0.3);
    color: var(--px-danger);
}
.list-group-item .badge {
    background-color: var(--px-elevated);
    color: var(--px-muted);
}

/* Etats de service/facture affiches par WHMCS */
.status,
.textgreen { color: var(--px-success); }
.textred { color: var(--px-danger); }
.textorange { color: var(--px-warning); }

/* --------------------------------------------------------------------------
   13. Onglets & pagination
   -------------------------------------------------------------------------- */
.nav-tabs {
    border-bottom: 1px solid var(--px-line);
}
.nav-tabs > li > a {
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    color: var(--px-muted);
    font-size: 14.4px;
    font-weight: 500;
    margin-right: 4px;
    padding: 11.2px 16px;
    transition: color var(--px-t), border-color var(--px-t);
}
.nav-tabs > li > a:hover {
    background-color: transparent;
    border-color: transparent transparent var(--px-line-hover);
    color: var(--px-text);
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    background-color: transparent;
    border: 0;
    border-bottom: 2px solid #ffffff;
    color: var(--px-text);
    font-weight: 600;
}
.tab-content {
    padding-top: 24px;
}

.nav-pills > li > a {
    border-radius: var(--px-r-pill);
    color: var(--px-muted);
    font-size: 14px;
}
.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus {
    background-color: var(--px-elevated);
    color: var(--px-text);
}

.pagination > li > a,
.pagination > li > span {
    background-color: var(--px-card);
    border: 1px solid var(--px-line);
    color: var(--px-muted);
    margin: 0 2px;
    border-radius: var(--px-r-sm) !important;
    transition: background-color var(--px-t), color var(--px-t),
        border-color var(--px-t);
}
.pagination > li > a:hover,
.pagination > li > span:hover {
    background-color: var(--px-card-hover);
    border-color: var(--px-line-hover);
    color: var(--px-text);
}
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover {
    background-color: #ffffff;
    border-color: #ffffff;
    color: var(--px-bg);
}
.pagination > .disabled > a,
.pagination > .disabled > span {
    background-color: var(--px-surface);
    border-color: var(--px-line);
    color: var(--px-muted-soft);
}

/* --------------------------------------------------------------------------
   14. Modales, dropdowns, tooltips, popovers
   -------------------------------------------------------------------------- */
.modal-backdrop.in {
    background-color: #000000;
    opacity: 0.7;
}
.modal-content {
    background-color: var(--px-card);
    border: 1px solid var(--px-line-strong);
    border-radius: var(--px-r-lg);
    box-shadow: var(--px-shadow-lg);
}
.modal-header {
    border-bottom: 1px solid var(--px-line);
    padding: 18.4px 22.4px;
}
.modal-title {
    color: var(--px-text);
    font-size: 16.8px;
    font-weight: 600;
}
.modal-body {
    color: var(--px-muted);
    padding: 22.4px;
}
.modal-footer {
    background-color: var(--px-surface);
    border-top: 1px solid var(--px-line);
    border-radius: 0 0 var(--px-r-lg) var(--px-r-lg);
    padding: 16px 22.4px;
}
.modal .close,
.close {
    color: var(--px-muted);
    opacity: 0.8;
    text-shadow: none;
}
.modal .close:hover,
.close:hover {
    color: var(--px-text);
    opacity: 1;
}

.dropdown-menu {
    background-color: var(--px-card);
    border: 1px solid var(--px-line-strong);
    border-radius: var(--px-r);
    box-shadow: var(--px-shadow-lg);
    padding: 5.6px;
}
.dropdown-menu > li > a {
    border-radius: var(--px-r-sm);
    color: var(--px-muted);
    font-size: 14px;
    padding: 8px 13.6px;
    transition: background-color var(--px-t), color var(--px-t);
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
    background-color: var(--px-elevated);
    color: var(--px-text);
}
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover {
    background-color: var(--px-elevated);
    color: var(--px-text);
}
.dropdown-menu .divider {
    background-color: var(--px-line);
}
.dropdown-header {
    color: var(--px-muted-soft);
    font-size: 11.52px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.tooltip-inner {
    background-color: var(--px-elevated);
    border-radius: var(--px-r-sm);
    color: var(--px-text);
    font-size: 12.8px;
    padding: 6.4px 11.2px;
}
.tooltip.top .tooltip-arrow { border-top-color: var(--px-elevated); }
.tooltip.bottom .tooltip-arrow { border-bottom-color: var(--px-elevated); }
.tooltip.left .tooltip-arrow { border-left-color: var(--px-elevated); }
.tooltip.right .tooltip-arrow { border-right-color: var(--px-elevated); }

.popover {
    background-color: var(--px-card);
    border: 1px solid var(--px-line-strong);
    border-radius: var(--px-r);
    box-shadow: var(--px-shadow-lg);
}
.popover-title {
    background-color: var(--px-surface);
    border-bottom: 1px solid var(--px-line);
    border-radius: var(--px-r) var(--px-r) 0 0;
    color: var(--px-text);
    font-weight: 600;
}
.popover-content {
    color: var(--px-muted);
}
.popover.bottom > .arrow:after { border-bottom-color: var(--px-card); }
.popover.top > .arrow:after { border-top-color: var(--px-card); }
.popover.left > .arrow:after { border-left-color: var(--px-card); }
.popover.right > .arrow:after { border-right-color: var(--px-card); }

/* Notifications de l'en-tete */
.client-alerts li a {
    color: var(--px-muted);
}
.client-alerts li a:hover {
    color: var(--px-text);
}

/* Surcouche de chargement plein ecran */
#fullpage-overlay {
    background-color: rgba(8, 9, 13, 0.9);
}
#fullpage-overlay .msg {
    color: var(--px-muted);
}

/* --------------------------------------------------------------------------
   15. Page de connexion
   -------------------------------------------------------------------------- */
body.login .main-content,
section#main-body .logincontainer {
    margin: 0 auto;
    max-width: 480px;
}
.logincontainer .panel,
#frmLogin .panel {
    box-shadow: var(--px-shadow-lg), var(--px-glow);
}
#login .form-control,
#frmLogin .form-control {
    padding: 12px 16px;
}
#login .btn-primary,
#frmLogin .btn-primary {
    padding: 12px 24px;
    width: 100%;
}
.login-flow-wrapper,
.login-flow-container {
    background-color: var(--px-card);
    border: 1px solid var(--px-line);
    border-radius: var(--px-r-lg);
}

/* --------------------------------------------------------------------------
   16. Commande & panier
   -------------------------------------------------------------------------- */
#order-standard_cart .products .product,
#order-standard_cart .product {
    background-color: var(--px-card);
    border: 1px solid var(--px-line);
    border-radius: var(--px-r-lg);
    transition: border-color var(--px-t), transform 0.15s var(--px-ease);
}
#order-standard_cart .products .product:hover,
#order-standard_cart .product:hover {
    border-color: var(--px-line-hover);
    transform: translateY(-3px);
}
#order-standard_cart .products .product header,
#order-standard_cart .product header {
    background-color: var(--px-surface);
    border-bottom: 1px solid var(--px-line);
    border-radius: var(--px-r-lg) var(--px-r-lg) 0 0;
    color: var(--px-text);
}
#order-standard_cart .products .product .product-desc {
    color: var(--px-muted);
}
#order-standard_cart .products .product .price {
    color: var(--px-text);
    font-weight: 700;
}
#order-standard_cart .cart-sidebar,
#order-standard_cart .summary-container {
    background-color: var(--px-card);
    border: 1px solid var(--px-line);
    border-radius: var(--px-r-lg);
}
#order-standard_cart .view-cart-items-header,
#order-standard_cart .order-summary {
    color: var(--px-muted);
}
#order-standard_cart .header-lined h1 {
    color: var(--px-text);
}
.cycle-selector .btn,
.term-selector .btn {
    border-radius: var(--px-r-pill);
}

/* Categories du panier */
#order-standard_cart #products-categories .list-group-item {
    border-top-color: var(--px-line);
}

/* Recapitulatif de commande */
.order-summary .summary-item,
.summary-container .summary-item {
    border-bottom: 1px solid var(--px-line);
    color: var(--px-muted);
}
.order-summary .summary-total,
.summary-container .summary-total {
    color: var(--px-text);
    font-weight: 700;
}

/* --------------------------------------------------------------------------
   17. Tickets & factures
   -------------------------------------------------------------------------- */
.ticket-reply,
.ticket-message {
    background-color: var(--px-card);
    border: 1px solid var(--px-line);
    border-radius: var(--px-r-lg);
    margin-bottom: 16px;
}
.ticket-reply .ticket-header,
.ticket-message .ticket-header {
    background-color: var(--px-surface);
    border-bottom: 1px solid var(--px-line);
    border-radius: var(--px-r-lg) var(--px-r-lg) 0 0;
    color: var(--px-text);
}
.ticket-reply.ticket-staff,
.ticket-message.staff {
    border-color: var(--px-line-strong);
}
.ticket-reply .ticket-body,
.ticket-message .ticket-body {
    color: var(--px-muted);
}

/* Editeur markdown des tickets */
.editor-toolbar,
.CodeMirror {
    background-color: var(--px-surface);
    border-color: var(--px-line);
    color: var(--px-text);
}
.editor-toolbar a {
    color: var(--px-muted) !important;
}
.editor-toolbar a:hover,
.editor-toolbar a.active {
    background-color: var(--px-elevated);
    border-color: var(--px-line);
    color: var(--px-text) !important;
}
.editor-preview,
.editor-preview-side {
    background-color: var(--px-card);
    color: var(--px-muted);
}
.CodeMirror-cursor {
    border-left-color: var(--px-text);
}

/* Facture imprimable / affichee */
.invoice-container,
#invoice {
    background-color: var(--px-card);
    border: 1px solid var(--px-line);
    border-radius: var(--px-r-lg);
    color: var(--px-muted);
}
.invoice-header,
#invoice h1 {
    color: var(--px-text);
}
.invoice-total,
.invoice-container .total {
    color: var(--px-text);
    font-weight: 700;
}

/* Base de connaissances & annonces */
.kb-article,
.announcement {
    background-color: var(--px-card);
    border: 1px solid var(--px-line);
    border-radius: var(--px-r-lg);
    transition: border-color var(--px-t);
}
.kb-article:hover,
.announcement:hover {
    border-color: var(--px-line-hover);
}

/* --------------------------------------------------------------------------
   18. Pied de page
   -------------------------------------------------------------------------- */
section#footer {
    background-color: transparent;
    border-top: 1px solid var(--px-line);
    color: var(--px-muted-soft);
    margin-top: 48px;
    padding: 40px 0;
}
section#footer p {
    color: var(--px-muted-soft);
    font-size: 13.6px;
    margin: 0;
}
section#footer a {
    color: var(--px-muted);
}
section#footer a:hover {
    color: var(--px-text);
}
section#footer .back-to-top {
    float: right;
    background-color: var(--px-card);
    border: 1px solid var(--px-line);
    border-radius: var(--px-r-pill);
    color: var(--px-muted);
    height: 40px;
    line-height: 37.6px;
    text-align: center;
    transition: border-color var(--px-t), color var(--px-t),
        transform 0.15s var(--px-ease);
    width: 40px;
}
section#footer .back-to-top:hover {
    border-color: var(--px-line-hover);
    color: var(--px-text);
    transform: translateY(-2px);
}

/* --------------------------------------------------------------------------
   19. Animations — reprise du "fade + montee" du site
   -------------------------------------------------------------------------- */
@keyframes px-fade-up {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

section#main-body .main-content > *,
section#main-body .sidebar .panel {
    animation: px-fade-up 0.45s var(--px-ease) both;
}
section#main-body .main-content > *:nth-child(1) { animation-delay: 0.02s; }
section#main-body .main-content > *:nth-child(2) { animation-delay: 0.06s; }
section#main-body .main-content > *:nth-child(3) { animation-delay: 0.1s; }
section#main-body .main-content > *:nth-child(4) { animation-delay: 0.14s; }
section#main-body .sidebar .panel:nth-child(1) { animation-delay: 0.04s; }
section#main-body .sidebar .panel:nth-child(2) { animation-delay: 0.08s; }
section#main-body .sidebar .panel:nth-child(3) { animation-delay: 0.12s; }

/* Respecte le reglage systeme "reduire les animations" */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* --------------------------------------------------------------------------
   20. Responsive & impression
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
    section#header .container {
        min-height: 60px;
    }
    section#main-menu {
        position: static;
    }
    section#main-menu .navbar-nav > li > a {
        padding: 12px 16px;
    }
    section#main-menu .navbar-nav > li > a::after {
        display: none;
    }
    section#main-menu .navbar-nav > li.active > a {
        background-color: var(--px-card);
        border-radius: var(--px-r-sm);
    }
    section#home-banner {
        padding: 48px 0 40px;
    }
    section#home-banner h2 {
        font-size: 28.8px;
    }
}

@media (max-width: 767px) {
    body {
        font-size: 14px;
    }
    section#header {
        position: static;
    }
    section#header .container {
        flex-wrap: wrap;
        gap: 8px;
        padding-bottom: 12px;
        padding-top: 12px;
    }
    section#header .top-nav {
        flex-wrap: wrap;
        justify-content: flex-end;
    }
    section#header .top-nav > li > a {
        padding: 6.4px 9.6px;
    }
    section#main-body {
        padding: 24px 0 40px;
    }
    .panel-body,
    .panel-heading,
    .panel-footer {
        padding: 16px;
    }
    .list-group-item {
        padding-left: 16px;
        padding-right: 16px;
    }
    .table > thead > tr > th,
    .table > tbody > tr > td {
        padding: 10.4px 11.2px;
    }
    .home-shortcuts ul li {
        flex-basis: 100%;
    }

    /* Un tableau large (services, factures) deborde sinon hors de sa carte et
       fait scroller toute la page lateralement : on le rend scrollable
       horizontalement a l'interieur de son panel. */
    .panel > .table,
    .table-responsive > .table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

@media print {
    body {
        background: #ffffff !important;
        color: #000000 !important;
    }
    section#header,
    section#main-menu,
    section#footer,
    .sidebar,
    .btn {
        display: none !important;
    }
    .panel {
        border: 1px solid #cccccc !important;
        box-shadow: none !important;
    }
    .panel-body,
    .table > tbody > tr > td,
    p {
        color: #000000 !important;
    }
}

/* --------------------------------------------------------------------------
   99. Corrections de specificite

   Six restreint certaines regles a un contexte (section#home-banner .btn,
   section#header .search .form-control...). Ces selecteurs portent un ID et
   battent donc les miens, qui visent le composant nu, quel que soit l'ordre
   de chargement. On redeclare ici la meme intention avec la portee de six :
   a specificite egale, custom.css est charge en dernier et l'emporte.

   Bloc genere par audit de whmcs/templates/six/css/all.min.css.
   -------------------------------------------------------------------------- */

.jumbotron .h1 {
    color: var(--px-text);
}
.h1 .small {
    color: var(--px-muted-soft);
}
.h2 .small {
    color: var(--px-muted-soft);
}
.h3 .small {
    color: var(--px-muted-soft);
}
.h4 .small {
    color: var(--px-muted-soft);
}
.h5 .small {
    color: var(--px-muted-soft);
}
.h6 .small {
    color: var(--px-muted-soft);
}
h1 .small {
    color: var(--px-muted-soft);
}
h2 .small {
    color: var(--px-muted-soft);
}
h3 .small {
    color: var(--px-muted-soft);
}
h4 .small {
    color: var(--px-muted-soft);
}
h5 .small {
    color: var(--px-muted-soft);
}
h6 .small {
    color: var(--px-muted-soft);
}
blockquote .small {
    color: var(--px-muted-soft);
}
.panel-title > .small {
    color: var(--px-muted-soft);
}
div.header-lined .breadcrumb {
    background: transparent;
}
section#home-banner .btn {
    border: 1px solid transparent;
}
.client-home-panels .panel>.panel-heading .panel-title .btn {
    border: 1px solid transparent;
}
.promo-banner .btn {
    border: 1px solid transparent;
}
.md-editor.md-fullscreen-mode .btn {
    border: 1px solid transparent;
}
.navbar-default .btn-link {
    color: var(--px-muted);
}
.navbar-inverse .btn-link {
    color: var(--px-muted);
}
.has-warning .control-label {
    color: var(--px-text);
}
.has-warning .form-control {
    background-color: var(--px-surface);
    border: 1px solid var(--px-line);
    box-shadow: none;
    color: var(--px-text);
}
section#header .search .form-control {
    background-color: var(--px-surface);
    border: 1px solid var(--px-line);
    box-shadow: none;
    color: var(--px-text);
}
section#home-banner .form-control {
    background-color: var(--px-surface);
    border: 1px solid var(--px-line);
    box-shadow: none;
    color: var(--px-text);
}
.home-kb-search .form-control {
    background-color: var(--px-surface);
    border: 1px solid var(--px-line);
    box-shadow: none;
    color: var(--px-text);
}
.dataTables_wrapper .dataTables_filter label .form-control {
    background-color: var(--px-surface);
    border: 1px solid var(--px-line);
    box-shadow: none;
    color: var(--px-text);
}
.dataTables_wrapper .dataTables_length label .form-control {
    background-color: var(--px-surface);
    border: 1px solid var(--px-line);
    box-shadow: none;
    color: var(--px-text);
}
.kb-search .form-control {
    background-color: var(--px-surface);
    border: 1px solid var(--px-line);
    box-shadow: none;
    color: var(--px-text);
}
#registration .form-control {
    background-color: var(--px-surface);
    border: 1px solid var(--px-line);
    box-shadow: none;
    color: var(--px-text);
}
#registration .form-control::placeholder {
    color: var(--px-muted-soft);
}
fieldset[disabled] .form-control[disabled] {
    background-color: var(--px-bg);
    color: var(--px-muted-soft);
}
#registration .form-control[disabled] {
    background-color: var(--px-bg);
    color: var(--px-muted-soft);
}
form[data-role=json-form] .has-error .form-control[disabled] {
    background-color: var(--px-bg);
    color: var(--px-muted-soft);
}
fieldset[disabled] .form-control[readonly] {
    background-color: var(--px-bg);
    color: var(--px-muted-soft);
}
#registration .form-control[readonly] {
    background-color: var(--px-bg);
    color: var(--px-muted-soft);
}
form[data-role=json-form] .has-error .form-control[readonly] {
    background-color: var(--px-bg);
    color: var(--px-muted-soft);
}
#registration fieldset[disabled] .form-control {
    background-color: var(--px-bg);
    color: var(--px-muted-soft);
}
form[data-role=json-form] .has-error fieldset[disabled] .form-control {
    background-color: var(--px-bg);
    color: var(--px-muted-soft);
}
.has-success .input-group-addon {
    background-color: var(--px-card);
    border: 1px solid var(--px-line);
    color: var(--px-muted);
}
.has-warning .input-group-addon {
    background-color: var(--px-card);
    border: 1px solid var(--px-line);
    color: var(--px-muted);
}
.has-error .input-group-addon {
    background-color: var(--px-card);
    border: 1px solid var(--px-line);
    color: var(--px-muted);
}
.has-success .help-block {
    color: var(--px-muted-soft);
}
.has-warning .help-block {
    color: var(--px-muted-soft);
}
section#header .search .has-error .form-control {
    border-color: var(--px-danger);
}
section#header .search .has-success .form-control {
    border-color: var(--px-success);
}
.panel-group .panel-heading {
    background-color: transparent;
    border-bottom: 1px solid var(--px-line);
    color: var(--px-text);
}
.client-home-panels .panel > .panel-heading {
    background-color: transparent;
    border-bottom: 1px solid var(--px-line);
    color: var(--px-text);
}
.panel-sidebar > .panel-heading {
    background-color: transparent;
    border-bottom: 1px solid var(--px-line);
    color: var(--px-text);
}
.panel-sidebar .panel-title {
    color: var(--px-text);
}
.panel-group .panel-footer {
    background-color: var(--px-surface);
    border-top: 1px solid var(--px-line);
    color: var(--px-muted);
}
.client-home-panels .panel > .panel-footer {
    background-color: var(--px-surface);
    border-top: 1px solid var(--px-line);
    color: var(--px-muted);
}
.panel-sidebar > .panel-footer {
    background-color: var(--px-surface);
    border-top: 1px solid var(--px-line);
    color: var(--px-muted);
}
.client-home-panels .panel > .panel-primary > .panel-heading {
    background-color: transparent;
    border-color: var(--px-line);
    color: var(--px-text);
}
.client-home-panels .panel > .panel-info > .panel-heading {
    background-color: transparent;
    border-color: var(--px-line);
    color: var(--px-text);
}
.client-home-panels .panel > .panel-default > .panel-heading {
    background-color: transparent;
    border-color: var(--px-line);
    color: var(--px-text);
}
.client-home-panels .panel > .panel-success > .panel-heading {
    background-color: var(--px-success-bg);
    border-color: rgba(52, 211, 153, 0.25);
    color: var(--px-success);
}
.client-home-panels .panel > .panel-warning > .panel-heading {
    background-color: var(--px-warning-bg);
    border-color: rgba(251, 191, 36, 0.25);
    color: var(--px-warning);
}
.client-home-panels .panel > .panel-danger > .panel-heading {
    background-color: var(--px-danger-bg);
    border-color: rgba(248, 113, 113, 0.25);
    color: var(--px-danger);
}
.panel-actions>.list-group .list-group-item {
    background-color: transparent;
    border: 0;
    border-top: 1px solid var(--px-line);
    color: var(--px-muted);
}
.panel>.list-group:first-child .list-group-item:first-child {
    border-top: 0;
}
.panel>.panel-collapse>.list-group:first-child .list-group-item:first-child {
    border-top: 0;
}
.verification-banner .btn.close {
    color: currentColor;
    text-shadow: none;
}
.btn-default .badge {
    background-color: var(--px-surface);
    color: var(--px-muted);
}
.btn-primary .badge {
    background-color: var(--px-surface);
    color: var(--px-muted);
}
.btn-success .badge {
    background-color: var(--px-surface);
    color: var(--px-muted);
}
.btn-info .badge {
    background-color: var(--px-surface);
    color: var(--px-muted);
}
.btn-warning .badge {
    background-color: var(--px-surface);
    color: var(--px-muted);
}
.btn-danger .badge {
    background-color: var(--px-surface);
    color: var(--px-muted);
}
.panel-default>.panel-heading .badge {
    background-color: var(--px-surface);
    color: var(--px-muted);
}
.panel-primary>.panel-heading .badge {
    background-color: var(--px-surface);
    color: var(--px-muted);
}
.panel-success>.panel-heading .badge {
    background-color: var(--px-surface);
    color: var(--px-muted);
}
.panel-info>.panel-heading .badge {
    background-color: var(--px-surface);
    color: var(--px-muted);
}
.panel-warning>.panel-heading .badge {
    background-color: var(--px-surface);
    color: var(--px-muted);
}
.panel-danger>.panel-heading .badge {
    background-color: var(--px-surface);
    color: var(--px-muted);
}
div.sidebar .list-group-item-selected .badge {
    background-color: var(--px-surface);
    color: var(--px-muted);
}
.panel-default>.panel-heading .list-group-item .badge {
    background-color: var(--px-elevated);
    color: var(--px-muted);
}
.panel-primary>.panel-heading .list-group-item .badge {
    background-color: var(--px-elevated);
    color: var(--px-muted);
}
.panel-success>.panel-heading .list-group-item .badge {
    background-color: var(--px-elevated);
    color: var(--px-muted);
}
.panel-info>.panel-heading .list-group-item .badge {
    background-color: var(--px-elevated);
    color: var(--px-muted);
}
.panel-warning>.panel-heading .list-group-item .badge {
    background-color: var(--px-elevated);
    color: var(--px-muted);
}
.panel-danger>.panel-heading .list-group-item .badge {
    background-color: var(--px-elevated);
    color: var(--px-muted);
}
div.sidebar .list-group-item-selected .list-group-item .badge {
    background-color: var(--px-elevated);
    color: var(--px-muted);
}
.nav-tabs.nav-justified {
    border-bottom: 1px solid var(--px-line);
}
.alert-dismissable .close {
    color: var(--px-muted);
    text-shadow: none;
}
.alert-dismissible .close {
    color: var(--px-muted);
    text-shadow: none;
}
section#home-banner .tooltip-inner {
    background-color: var(--px-elevated);
    color: var(--px-text);
}
form[data-role=json-form] .has-error .tooltip-inner {
    background-color: var(--px-elevated);
    color: var(--px-text);
}
form[data-role=json-form] .has-error .tooltip.top .tooltip.top .tooltip-arrow {
    border-top-color: var(--px-elevated);
}
section#home-banner .tooltip.bottom .tooltip.bottom .tooltip-arrow {
    border-bottom-color: var(--px-elevated);
}
section#home-banner .tooltip.left .tooltip.left .tooltip-arrow {
    border-left-color: var(--px-elevated);
}
section#home-banner .tooltip.right .tooltip.right .tooltip-arrow {
    border-right-color: var(--px-elevated);
}
.language-popover.popover.bottom > .popover.bottom > .arrow:after {
    border-bottom-color: var(--px-card);
}
.ticket-reply.staff {
    background-color: var(--px-card);
    border: 1px solid var(--px-line);
}

/* --------------------------------------------------------------------------
   100. Recherche de domaine — boutons Search / Transfer

   Six colore ces deux boutons a lui (vert #338464 pour Search, gris pour
   Transfer) via section#home-banner .btn.search, de specificite [1,2,1] :
   une regle sur .btn ne peut pas les atteindre. On reprend donc exactement sa
   portee, et on garde sa distinction — action principale contre action
   secondaire — avec la palette du theme.
   -------------------------------------------------------------------------- */
section#home-banner .btn.search,
section#header .search .btn.search {
    background-color: var(--px-text);
    border-color: var(--px-text);
    color: var(--px-bg);
}
section#home-banner .btn.search:hover,
section#home-banner .btn.search:focus,
section#header .search .btn.search:hover {
    background-color: rgba(255, 255, 255, 0.86);
    border-color: rgba(255, 255, 255, 0.86);
    color: var(--px-bg);
}
section#home-banner .btn.transfer,
section#header .search .btn.transfer {
    background-color: var(--px-card);
    border-color: var(--px-line);
    color: var(--px-text);
}
section#home-banner .btn.transfer:hover,
section#home-banner .btn.transfer:focus,
section#header .search .btn.transfer:hover {
    background-color: var(--px-card-hover);
    border-color: var(--px-line-hover);
    color: var(--px-text);
}

/* --------------------------------------------------------------------------
   101. Recherche de domaine — bloc .advanced-input

   Ce conteneur n'etait pas couvert par le theme : six lui donne un fond blanc
   et positionne ses boutons en absolu (right:185px; top:65px), calages faits
   pour ses propres dimensions de champ. Des que le theme change la hauteur des
   champs, les boutons se retrouvent par-dessus la saisie.
   On rend donc le bloc au flux normal de Bootstrap, ou le reste du theme
   s'applique naturellement.
   -------------------------------------------------------------------------- */
section#home-banner .advanced-input {
    background-color: transparent;
}
section#home-banner .advanced-input .input-group-btn {
    position: static;
    right: auto;
    top: auto;
}
section#home-banner .advanced-input label {
    color: var(--px-muted);
    font-size: 13px;
    font-weight: 500;
}
section#home-banner .advanced-input .form-control,
section#home-banner .advanced-input .btn-group .btn {
    background-color: var(--px-card);
    border-color: var(--px-line);
    color: var(--px-text);
}

/* ==========================================================================
   102. Zones laissees a six — reprises une a une

   Chaque bloc ci-dessous corrige un endroit ou six impose son propre habillage
   clair. La regle de six est citee au-dessus de la correction : la specificite
   employee ici l'egale, et custom.css etant charge en dernier, elle l'emporte.
   ========================================================================== */

/* --- Raccourcis d'accueil : supprimer les separateurs bleus ----------------
   six : .home-shortcuts li{border-right:1px solid #0e88b0}
         .home-shortcuts li:first-child{border-left:1px solid #0e88b0}         */
.home-shortcuts li,
.home-shortcuts li:first-child {
    border: 0;
}

/* --- Recherche de domaine avancee -----------------------------------------
   six : .advanced-input .input-group-btn{position:absolute;right:185px;top:65px}
   Ce calage absolu suppose ses propres hauteurs de champ. Le contenu n'etant
   pas un .form-control mais un <textarea>, la mise en page en table de
   Bootstrap l'ecrase a quelques dizaines de pixels. On remplace l'ensemble par
   une disposition en flex, qui tient quelle que soit la hauteur des champs.   */
section#home-banner div.advanced-input {
    align-items: center;
    background-color: transparent;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}
/* Le champ porte un identifiant, et six le vise par deux ID a la fois :
   section#home-banner textarea#message{width:100%;height:120px;border-left:none;
   border-right:none}. Il faut donc reprendre #message, sinon la hauteur de
   120 px et la largeur pleine subsistent et renvoient les boutons a la ligne. */
section#home-banner div.advanced-input > textarea#message {
    background-color: var(--px-card);
    border: 1px solid var(--px-line);
    border-radius: var(--px-r);
    width: auto;
    color: var(--px-text);
    /* Base nulle et largeur minimale : le champ prend la place restante apres
       les boutons au lieu de reclamer une largeur qui les renvoie a la ligne. */
    flex: 1 1 0%;
    font-size: 15px;
    height: 52px;
    line-height: 24px;
    min-width: 200px;
    overflow: hidden;
    padding: 13px 20px;
    resize: none;
    white-space: nowrap;
}
section#home-banner div.advanced-input > textarea#message:focus {
    border-color: var(--px-line-hover);
    outline: 0;
}
section#home-banner div.advanced-input > .input-group-btn {
    display: flex;
    flex: 0 0 auto;
    gap: 8px;
    position: static;
    right: auto;
    top: auto;
    width: auto;
}
/* Seconde ligne : filtres TLD, longueur maximale et Safe Search */
section#home-banner span.advanced-input {
    align-items: center;
    display: flex;
    flex: 1 1 100%;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}
section#home-banner span.advanced-input .btn-group > .btn,
section#home-banner .multiselect.btn {
    background-color: var(--px-card);
    border: 1px solid var(--px-line);
    border-radius: var(--px-r-sm);
    color: var(--px-text);
    font-size: 14px;
}
section#home-banner .multiselect-search {
    background-color: var(--px-card);
    border: 1px solid var(--px-line);
    color: var(--px-text);
}

/* --- Menus deroulants -----------------------------------------------------
   six : .dropdown-menu{background-color:#fff;border:1px solid rgba(0,0,0,.15)}
         .dropdown-menu .divider{background-color:#e5e5e5}
         .navbar-main .dropdown-menu>li>a:hover{background-color:#006687}      */
.dropdown-menu,
.navbar-main .dropdown-menu {
    background-color: var(--px-elevated);
    border: 1px solid var(--px-line);
    border-radius: var(--px-r);
    box-shadow: var(--px-shadow-lg);
    margin-top: 8px;
    min-width: 190px;
    padding: 6px;
}
.dropdown-menu > li > a,
.navbar-main .dropdown-menu > li > a {
    border-radius: var(--px-r-sm);
    color: var(--px-muted);
    font-size: 14px;
    padding: 9px 14px;
    transition: background-color var(--px-t), color var(--px-t);
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.navbar-main .dropdown-menu > li > a:hover,
.navbar-main .dropdown-menu > li > a:focus {
    background-color: var(--px-card-hover);
    color: var(--px-text);
}
.dropdown-menu .divider,
.navbar-inverse .navbar-nav .open .dropdown-menu .divider {
    background-color: var(--px-line);
    margin: 6px 4px;
}
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
    background-color: var(--px-card-hover);
    color: var(--px-text);
}

/* --- Formulaire d'inscription ---------------------------------------------
   six : #registration .field,#registration .form-control{background:#fff}
   Certains champs du gabarit portent class="field" sans .form-control : viser
   .form-control seul en laissait donc une partie en blanc.
   six : #registration .sub-heading span{background-color:#fff;color:#058}     */
#registration .field,
#registration .form-control {
    background: var(--px-card);
    border: 1px solid var(--px-line);
    border-radius: var(--px-r-sm);
    color: var(--px-text);
    font-size: 14px;
    height: 46px;
}
#registration .field:focus,
#registration .form-control:focus {
    border-color: var(--px-line-hover);
    box-shadow: none;
}
#registration textarea.field {
    height: auto;
    padding: 12px 16px;
}
#registration label {
    color: var(--px-muted);
}
#registration .sub-heading {
    border-top: 1px solid var(--px-line);
}
#registration .sub-heading span {
    background-color: var(--px-bg);
    color: var(--px-text);
    font-weight: 600;
}
#registration .field-icon,
#registration .prepend-icon i {
    color: var(--px-muted);
}
.marketing-email-optin {
    background-color: var(--px-surface);
    border: 1px solid var(--px-line);
    border-radius: var(--px-r);
    color: var(--px-muted);
}
.progress {
    background-color: var(--px-card);
    border: 1px solid var(--px-line);
    box-shadow: none;
}

/* --- Espace client : tuiles de synthese ------------------------------------
   six : .tiles .tile{background-color:#f8f8f8;border-right:1px solid #ccc}
         .tile .icon{color:#ccc}  .tile .title{color:#888}                     */
.tiles {
    background-color: var(--px-card);
    border: 1px solid var(--px-line);
    border-radius: var(--px-r-lg);
    overflow: hidden;
}
.tiles .tile {
    background-color: transparent;
    border-right: 1px solid var(--px-line);
    padding: 18px 22px;
    transition: background-color var(--px-t);
}
.tiles .tile:last-child {
    border-right: 0;
}
.tiles .tile:hover {
    background-color: var(--px-card-hover);
}
.tile .icon {
    color: var(--px-line-strong);
    font-size: 38px;
}
.tile .stat {
    color: var(--px-text);
    font-weight: 700;
}
.tile .title {
    color: var(--px-muted);
    letter-spacing: 0.06em;
}
.tile .highlight {
    opacity: 0.85;
}

/* --- Listes de tickets et autres tableaux DataTables -----------------------
   six : .dataTables_info{background-color:#4f5360;color:#fff}
         table.table-list thead th{border-bottom:4px solid #a2d27a}
         .dataTables_filter label .form-control{background:url(search.png) #fff}
         .dataTables_length{background-color:#f6f6f6}
   Le vert et le gris viennent de la, ainsi que l'icone loupe en image de fond. */
.dataTables_wrapper .dataTables_info {
    background-color: var(--px-surface);
    border-bottom: 1px solid var(--px-line);
    color: var(--px-muted);
    padding: 14px 18px;
}
.dataTables_wrapper table.table-list thead th,
.dataTables_wrapper table.table-list thead th:nth-child(even) {
    background-color: var(--px-surface);
    border-bottom: 1px solid var(--px-line);
    color: var(--px-muted);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.dataTables_wrapper table.table-list thead th.sorting_desc,
.dataTables_wrapper table.table-list thead th.sorting_asc {
    background-color: var(--px-card-hover);
}
.dataTables_wrapper table.table-list tbody td {
    background-color: transparent;
    border-color: var(--px-line);
    color: var(--px-text);
}
.dataTables_wrapper .dataTables_empty {
    color: var(--px-muted);
}
.dataTables_wrapper .dataTables_filter label .form-control {
    background-color: var(--px-card);
    background-image: none;
    border: 1px solid var(--px-line);
    border-radius: var(--px-r-pill);
    color: var(--px-text);
    height: auto;
    padding: 9px 16px !important;
    width: 220px;
}
.dataTables_wrapper .dataTables_length {
    background-color: var(--px-surface);
    border-top: 1px solid var(--px-line);
    color: var(--px-muted);
    padding: 10px 18px;
}
.dataTables_wrapper .dataTables_length label {
    align-items: center;
    display: inline-flex;
    gap: 8px;
    margin: 0;
}
.dataTables_wrapper .dataTables_length label .form-control {
    background-color: var(--px-card);
    border: 1px solid var(--px-line);
    border-radius: var(--px-r-sm);
    color: var(--px-text);
    display: inline-block;
    height: 32px;
    padding: 4px 10px;
    width: auto;
}

/* --- Deux finitions relevees au balayage final ----------------------------- */

/* six : .btn-primary .badge{color:#337ab7;background-color:#fff}
   Le bouton principal du theme etant blanc, la pastille disparaissait dessus. */
.btn-primary .badge {
    background-color: var(--px-bg);
    color: var(--px-text);
}

/* Listes deroulantes natives. WHMCS remplace la plupart par un composant
   Bootstrap, mais celles qu'il laisse telles quelles restaient blanches. */
select.form-control,
select.multiselect,
select.field {
    background-color: var(--px-card);
    border: 1px solid var(--px-line);
    color: var(--px-text);
}
select.form-control option,
select.multiselect option,
select.field option {
    background-color: var(--px-card);
    color: var(--px-text);
}

/* ==========================================================================
   103. Reprises apres relecture
   ========================================================================== */

/* --- Recherche de domaine : capsules distinctes ---------------------------
   Bootstrap simule un groupe soude autour du champ :
     .input-group-lg>.input-group-btn>.btn{border-radius:6px}          [0,3,0]
     .input-group-btn:last-child>.btn:not(:last-child){radius droite:0} [0,4,0]
     .input-group-btn>.btn+.btn{margin-left:-1px}                      [0,2,0]
   D'ou des boutons a angles droits et colles l'un a l'autre. Les selecteurs
   ci-dessous portent l'ID de la section : un ID l'emporte sur n'importe quel
   nombre de classes, ils passent donc devant les trois regles a la fois.      */
section#home-banner .input-group-btn > .btn,
section#home-banner .input-group-lg > .input-group-btn > .btn {
    border-radius: var(--px-r-pill);
    font-size: 15px;
    height: auto;
    padding: 13px 28px;
}
section#home-banner .input-group-btn > .btn + .btn {
    margin-left: 0;
}

/* Le champ prend la meme capsule que les boutons, et coupe proprement le
   texte trop long au lieu de le laisser filer sous le bord arrondi. */
section#home-banner div.advanced-input > textarea#message {
    border-radius: var(--px-r-pill);
    padding: 13px 26px;
    text-overflow: ellipsis;
}

/* Seconde ligne : memes capsules, pour que l'ensemble se lise comme un tout. */
section#home-banner span.advanced-input .btn-group > .btn,
section#home-banner .multiselect.btn {
    border-radius: var(--px-r-pill);
    padding: 9px 18px;
}

/* La case a cocher restait au rendu natif du navigateur, donc blanche. */
section#home-banner .advanced-input input[type="checkbox"] {
    accent-color: var(--px-text);
    height: 15px;
    vertical-align: middle;
    width: 15px;
}

/* --- Menu deroulant : arrondi complet et detache de son bouton -------------
   six : .navbar-nav>li>.dropdown-menu{margin-top:0;border-top-left-radius:0;
         border-top-right-radius:0}                                    [0,2,1]
   Mes regles precedentes valaient [0,1,0] et [0,2,0] : elles ne pouvaient pas
   arrondir le haut ni ecarter le menu. On reprend ici la portee exacte.       */
.navbar-nav > li > .dropdown-menu {
    border-radius: var(--px-r);
    margin-top: 10px;
}

/* Le separateur n'est pas un .divider mais un <li class="nav-divider">, pose
   par WHMCS via getClass(). Il restait donc au gris clair de six.            */
.nav .nav-divider,
.dropdown-menu .nav-divider {
    background-color: var(--px-line);
    margin: 6px 4px;
}

/* --- Pied de page toujours en bas -----------------------------------------
   Sur les pages courtes (connexion, liste vide, erreur), le pied de page
   remontait au milieu de l'ecran. On met le corps en colonne : le contenu
   principal occupe l'espace disponible et repousse le pied de page en bas,
   sans jamais le decoller du contenu sur les pages longues.                  */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
section#main-body {
    flex: 1 0 auto;
}
section#footer {
    flex-shrink: 0;
    margin-top: auto;
}