@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ==========================================================================
   SEITOS - habillage de l'espace client WHMCS (theme de base : Twenty-One)
   A coller dans Addons > Theme Editor > custom.css
   Auteur : Yunus OZDEMIR
   --------------------------------------------------------------------------
   IMPORTANT : aucune variable CSS ici, tout est en dur. Le minifieur du
   Theme Editor WHMCS supprime le bloc :root, ce qui casse tout le rendu.

   Pour changer la palette, fais un rechercher/remplacer sur ces valeurs :
     #0D1324  fond general          #F9B233  ambre SEITOS
     #151C36  fond alternatif       #FFC24D  ambre survol
     #1A2140  cards / panels        #101728  texte sur ambre
     #212A4E  survol / champs       #FFFFFF  texte principal
     #2B3560  bordures              #C8D3EC  texte courant
                                    #8D9DC4  texte attenue

   Police Inter : ajoute cette ligne dans header.tpl, juste avant </head> :
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap">
   Sans ca, le rendu retombe sur la police systeme (sans-serif, propre aussi).
   ========================================================================== */

/* ==========================================================================
   1. Base
   ========================================================================== */

body,
html {
  background: #0D1324 !important;
  color: #C8D3EC !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
  -webkit-font-smoothing: antialiased;
}

/* WHMCS pose des fonds blancs un peu partout : on les neutralise */
.bg-white,
.bg-light,
#main-body,
.main-content,
.content-inner {
  background: transparent !important;
}

a {
  color: #F9B233;
  transition: color .15s ease;
}
a:hover,
a:focus {
  color: #FFC24D;
  text-decoration: none;
}

hr {
  border-top: 1px solid #2B3560 !important;
  opacity: 1;
}

::selection {
  background: #F9B233;
  color: #101728;
}

:focus-visible {
  outline: 2px solid #F9B233;
  outline-offset: 2px;
}

/* ==========================================================================
   2. Typographie
   ========================================================================== */

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4,
.panel-title,
.card-title {
  color: #FFFFFF !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -.02em;
  line-height: 1.15;
}

h1, .h1 { font-size: 2.1rem; }
h2, .h2 { font-size: 1.6rem; }
h3, .h3 { font-size: 1.25rem; }

p, li, td, dd, label, .form-text {
  color: #C8D3EC;
}

small,
.small,
.text-muted,
.help-block,
.form-text.text-muted {
  color: #8D9DC4 !important;
}

strong, b { color: #FFFFFF; }

code, kbd, pre, samp {
  font-family: 'JetBrains Mono', 'SFMono-Regular', Consolas, Menlo, monospace !important;
  background: #0A0F1C !important;
  color: #35D28A !important;
  border: 1px solid #2B3560;
  border-radius: 8px;
}

/* Titre de page + fil d'ariane */
.page-header,
#main-body > .container > h1:first-child {
  border-bottom: 1px solid #2B3560;
  padding-bottom: 14px;
  margin-bottom: 26px;
}

.breadcrumb {
  background: transparent !important;
  padding-left: 0;
  font-size: .875rem;
}
.breadcrumb-item,
.breadcrumb-item a { color: #8D9DC4; }
.breadcrumb-item.active { color: #C8D3EC; }
.breadcrumb-item + .breadcrumb-item::before { color: #2B3560; }

/* ==========================================================================
   3. En-tête et navigation
   ========================================================================== */

#header,
.header,
header,
.top-bar,
.navbar {
  background: #0D1324 !important;
  border: 0 !important;
  box-shadow: none !important;
}

#header,
.header-lined,
.navbar.navbar-expand-lg {
  border-bottom: 1px solid #2B3560 !important;
}

.logo img,
.navbar-brand img {
  max-height: 34px;
  width: auto;
}

/* Liens du menu principal */
#main-menu .nav-link,
.navbar-nav .nav-link,
.top-nav a,
#top-nav a {
  color: #C8D3EC !important;
  font-weight: 500;
  font-size: .95rem;
  padding: .6rem .95rem !important;
  border-radius: 8px;
  transition: background .15s ease, color .15s ease;
}

#main-menu .nav-link:hover,
.navbar-nav .nav-link:hover,
.top-nav a:hover {
  color: #FFFFFF !important;
  background: #1A2140;
}

#main-menu .nav-item.active > .nav-link,
.navbar-nav .nav-item.active > .nav-link,
.navbar-nav .nav-link.active {
  color: #F9B233 !important;
  background: rgba(249, 178, 51, .1);
}

.navbar-toggler {
  border: 1px solid #2B3560 !important;
  border-radius: 8px;
}
.navbar-toggler-icon {
  filter: invert(1) brightness(1.4);
}

/* Menus déroulants */
.dropdown-menu {
  background: #1A2140 !important;
  border: 1px solid #2B3560 !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .45);
  padding: 6px;
}
.dropdown-item {
  color: #C8D3EC !important;
  border-radius: 8px;
  padding: .5rem .75rem;
}
.dropdown-item:hover,
.dropdown-item:focus {
  background: #212A4E !important;
  color: #FFFFFF !important;
}
.dropdown-divider { border-top-color: #2B3560 !important; }
.dropdown-header { color: #8D9DC4 !important; }

/* ==========================================================================
   4. Cards, panels, sidebar
   ========================================================================== */

.card,
.panel,
.well,
.jumbotron,
.list-group,
.modal-content {
  background: #1A2140 !important;
  border: 1px solid #2B3560 !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  color: #C8D3EC;
}

.card-header,
.panel-heading {
  background: transparent !important;
  border-bottom: 1px solid #2B3560 !important;
  border-radius: 12px 12px 0 0 !important;
  padding: 16px 20px !important;
  font-weight: 700;
  color: #FFFFFF !important;
}

.card-body,
.panel-body {
  background: transparent !important;
  padding: 20px !important;
}

.card-footer,
.panel-footer {
  background: #151C36 !important;
  border-top: 1px solid #2B3560 !important;
  border-radius: 0 0 12px 12px !important;
  color: #8D9DC4 !important;
}

/* Variantes colorées de panel (WHMCS les utilise pour les statuts) */
.panel-primary > .panel-heading,
.card-primary > .card-header { border-bottom-color: #F9B233 !important; }
.panel-danger  > .panel-heading { border-bottom-color: #F2646A !important; }
.panel-success > .panel-heading { border-bottom-color: #35D28A !important; }

/* Sidebar */
.sidebar .panel,
.panel-sidebar {
  margin-bottom: 18px;
}
.panel-sidebar .panel-heading {
  font-size: .8rem;
  letter-spacing: .04em;
  color: #8D9DC4 !important;
}

.list-group-item {
  background: transparent !important;
  border: 0 !important;
  border-top: 1px solid #2B3560 !important;
  color: #C8D3EC !important;
  padding: .7rem 1.1rem;
  transition: background .15s ease;
}
.list-group-item:first-child { border-top: 0 !important; }
.list-group-item:hover {
  background: #212A4E !important;
  color: #FFFFFF !important;
}
.list-group-item.active {
  background: rgba(249, 178, 51, .12) !important;
  color: #F9B233 !important;
  box-shadow: inset 3px 0 0 #F9B233;
}

/* Raccourcis de l'accueil client */
.home-shortcuts .btn,
.client-home-shortcuts .btn {
  background: #1A2140 !important;
  border: 1px solid #2B3560 !important;
  color: #FFFFFF !important;
  border-radius: 12px !important;
  padding: 18px 14px !important;
}
.home-shortcuts .btn:hover {
  border-color: #F9B233 !important;
  background: #212A4E !important;
}

/* ==========================================================================
   5. Boutons
   ========================================================================== */

.btn {
  border-radius: 8px !important;
  font-weight: 600 !important;
  font-size: .925rem;
  padding: .55rem 1.1rem;
  border-width: 1px;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.btn-primary,
.btn-warning,
.btn-order,
.btn-checkout {
  background: #F9B233 !important;
  border-color: #F9B233 !important;
  color: #101728 !important;
}
.btn-primary:hover,
.btn-warning:hover,
.btn-primary:focus,
.btn-order:hover {
  background: #FFC24D !important;
  border-color: #FFC24D !important;
  color: #101728 !important;
}

.btn-secondary,
.btn-default,
.btn-light {
  background: #212A4E !important;
  border-color: #2B3560 !important;
  color: #FFFFFF !important;
}
.btn-secondary:hover,
.btn-default:hover {
  background: #2B3560 !important;
  color: #FFFFFF !important;
}

.btn-outline-primary,
.btn-outline-secondary {
  background: transparent !important;
  border-color: #2B3560 !important;
  color: #FFFFFF !important;
}
.btn-outline-primary:hover,
.btn-outline-secondary:hover {
  background: #212A4E !important;
  border-color: #F9B233 !important;
  color: #F9B233 !important;
}

.btn-success { background: #35D28A !important; border-color: #35D28A !important; color: #06210F !important; }
.btn-danger  { background: #F2646A  !important; border-color: #F2646A  !important; color: #2A0A0C !important; }
.btn-info    { background: #5B8DEF    !important; border-color: #5B8DEF    !important; color: #06142E !important; }

.btn-link { color: #F9B233 !important; }

.btn-lg  { padding: .8rem 1.6rem; font-size: 1rem; }
.btn-sm  { padding: .35rem .75rem; font-size: .825rem; }

/* ==========================================================================
   6. Formulaires
   ========================================================================== */

.form-control,
.custom-select,
select,
textarea,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="tel"] {
  background: #151C36 !important;
  border: 1px solid #2B3560 !important;
  border-radius: 8px !important;
  color: #FFFFFF !important;
  padding: .6rem .85rem;
  height: auto;
  box-shadow: none !important;
  transition: border-color .15s ease, background .15s ease;
}

.form-control:focus,
select:focus,
textarea:focus {
  background: #212A4E !important;
  border-color: #F9B233 !important;
  color: #FFFFFF !important;
  box-shadow: 0 0 0 3px rgba(249, 178, 51, .18) !important;
}

.form-control::placeholder { color: #8D9DC4 !important; opacity: 1; }

/* Les <option> héritent du fond du système : on force */
select option { background: #1A2140; color: #FFFFFF; }

label,
.control-label,
.col-form-label {
  color: #C8D3EC !important;
  font-weight: 500;
  font-size: .9rem;
}

.input-group-text,
.input-group-addon {
  background: #212A4E !important;
  border: 1px solid #2B3560 !important;
  color: #8D9DC4 !important;
  border-radius: 8px;
}

.custom-control-label::before {
  background: #151C36 !important;
  border-color: #2B3560 !important;
}
.custom-control-input:checked ~ .custom-control-label::before {
  background: #F9B233 !important;
  border-color: #F9B233 !important;
}

.form-group { margin-bottom: 1.1rem; }

/* Écran de connexion / inscription */
#loginfrm,
.login-form,
#frmLogin {
  background: #1A2140;
  border: 1px solid #2B3560;
  border-radius: 12px;
  padding: 28px;
}

/* ==========================================================================
   7. Tableaux
   ========================================================================== */

.table,
table {
  color: #C8D3EC !important;
  border-color: #2B3560 !important;
}

.table thead th,
table thead th {
  background: #151C36 !important;
  color: #8D9DC4 !important;
  border-bottom: 1px solid #2B3560 !important;
  border-top: 0 !important;
  font-weight: 600;
  font-size: .8rem;
  letter-spacing: .03em;
  padding: 13px 16px;
}

.table td,
table td {
  border-top: 1px solid #2B3560 !important;
  padding: 14px 16px;
  vertical-align: middle;
}

.table-striped tbody tr:nth-of-type(odd) {
  background: rgba(255, 255, 255, .018) !important;
}

.table-hover tbody tr:hover {
  background: #212A4E !important;
  color: #FFFFFF !important;
}

.table-bordered,
.table-bordered td,
.table-bordered th { border-color: #2B3560 !important; }

/* Tableaux dans une card : on colle aux bords */
.card > .table,
.panel > .table,
.card .table-responsive { margin-bottom: 0; }

/* DataTables (factures, tickets, services) */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate { color: #8D9DC4 !important; }

.dataTables_wrapper .paginate_button {
  background: #1A2140 !important;
  border: 1px solid #2B3560 !important;
  border-radius: 8px !important;
  color: #C8D3EC !important;
  margin: 0 2px;
}
.dataTables_wrapper .paginate_button.current,
.dataTables_wrapper .paginate_button:hover {
  background: #F9B233 !important;
  border-color: #F9B233 !important;
  color: #101728 !important;
}

.page-link {
  background: #1A2140 !important;
  border-color: #2B3560 !important;
  color: #C8D3EC !important;
}
.page-item.active .page-link {
  background: #F9B233 !important;
  border-color: #F9B233 !important;
  color: #101728 !important;
}

/* ==========================================================================
   8. Alertes, badges, statuts
   ========================================================================== */

.alert {
  border: 1px solid #2B3560 !important;
  border-radius: 12px !important;
  background: #1A2140 !important;
  color: #C8D3EC !important;
  padding: 14px 18px;
}
.alert-success { border-left: 3px solid #35D28A !important; }
.alert-danger  { border-left: 3px solid #F2646A  !important; }
.alert-warning { border-left: 3px solid #F9B233 !important; }
.alert-info    { border-left: 3px solid #5B8DEF    !important; }

.badge,
.label,
.status {
  border-radius: 999px !important;
  font-weight: 600;
  font-size: .72rem;
  padding: .38em .8em;
  letter-spacing: .01em;
}

.badge-success, .label-success, .status-Active, .status-Paid, .status-Open {
  background: rgba(53, 210, 138, .15) !important;
  color: #35D28A !important;
}
.badge-warning, .label-warning, .status-Pending, .status-Unpaid {
  background: rgba(249, 178, 51, .15) !important;
  color: #F9B233 !important;
}
.badge-danger, .label-danger, .status-Terminated, .status-Suspended, .status-Cancelled, .status-Overdue {
  background: rgba(242, 100, 106, .15) !important;
  color: #F2646A !important;
}
.badge-info, .label-info, .status-Answered {
  background: rgba(91, 141, 239, .15) !important;
  color: #5B8DEF !important;
}
.badge-secondary, .label-default, .status-Closed {
  background: #212A4E !important;
  color: #8D9DC4 !important;
}

/* ==========================================================================
   9. Onglets, modales, divers
   ========================================================================== */

.nav-tabs {
  border-bottom: 1px solid #2B3560 !important;
}
.nav-tabs .nav-link {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  color: #8D9DC4 !important;
  font-weight: 600;
  padding: .7rem 1.1rem;
}
.nav-tabs .nav-link:hover { color: #FFFFFF !important; }
.nav-tabs .nav-link.active {
  color: #F9B233 !important;
  border-bottom-color: #F9B233 !important;
}

.nav-pills .nav-link {
  border-radius: 999px !important;
  color: #C8D3EC !important;
}
.nav-pills .nav-link.active {
  background: #F9B233 !important;
  color: #101728 !important;
}

.modal-header,
.modal-footer { border-color: #2B3560 !important; }
.modal-backdrop.show { opacity: .7; }
.close, .btn-close { color: #FFFFFF !important; opacity: .7; text-shadow: none; }

.progress { background: #151C36 !important; border-radius: 999px; height: 8px; }
.progress-bar { background: #F9B233 !important; }

.tooltip-inner { background: #212A4E; border: 1px solid #2B3560; border-radius: 8px; }
.popover { background: #1A2140; border-color: #2B3560; }
.popover-header { background: #151C36; color: #FFFFFF; border-bottom-color: #2B3560; }

/* Accordéons (FAQ / base de connaissances) */
.accordion .card-header,
.panel-group .panel-heading { cursor: pointer; }
.accordion .card-header:hover { background: #212A4E !important; }

/* ==========================================================================
   10. Tunnel de commande (Standard Cart)
   ========================================================================== */

#order-standard_cart .products .product,
#order-standard_cart .product-info,
.cart-body,
#products .product {
  background: #1A2140 !important;
  border: 1px solid #2B3560 !important;
  border-radius: 12px !important;
  color: #C8D3EC !important;
}

#order-standard_cart .product h3,
#products .product h3 { color: #FFFFFF !important; }

#order-standard_cart .price,
.product-pricing,
.cart-total-price {
  color: #F9B233 !important;
  font-weight: 800;
}

#order-standard_cart .header-lined h1,
.cart-sidebar { border-color: #2B3560 !important; }

#order-standard_cart .cart-sidebar,
.order-summary {
  background: #1A2140 !important;
  border: 1px solid #2B3560 !important;
  border-radius: 12px !important;
}

.domain-checker-container,
#domain-selection-options {
  background: #151C36 !important;
  border: 1px solid #2B3560 !important;
  border-radius: 12px !important;
}

/* ==========================================================================
   11. Tickets support
   ========================================================================== */

.ticket-reply,
.ticket-message {
  background: #1A2140 !important;
  border: 1px solid #2B3560 !important;
  border-radius: 12px !important;
  margin-bottom: 16px;
}
.ticket-reply.ticket-staff,
.ticket-reply.admin {
  border-left: 3px solid #F9B233 !important;
}
.ticket-reply .ticket-header,
.ticket-message-header {
  background: #151C36 !important;
  border-bottom: 1px solid #2B3560 !important;
  color: #8D9DC4 !important;
}

/* ==========================================================================
   12. Pied de page
   ========================================================================== */

#footer,
footer,
.footer {
  background: #151C36 !important;
  border-top: 1px solid #2B3560 !important;
  color: #8D9DC4 !important;
  padding: 36px 0 28px !important;
  margin-top: 60px;
}

#footer a,
footer a {
  color: #C8D3EC !important;
  font-size: .92rem;
}
#footer a:hover,
footer a:hover { color: #F9B233 !important; }

#footer h5,
footer h5 {
  font-size: .95rem;
  margin-bottom: 14px;
}

/* ==========================================================================
   13. Responsive
   ========================================================================== */

@media (max-width: 991px) {
  h1, .h1 { font-size: 1.7rem; }
  .card-body, .panel-body { padding: 16px !important; }

  #main-menu .nav-link,
  .navbar-nav .nav-link {
    padding: .7rem .5rem !important;
    border-bottom: 1px solid #2B3560;
    border-radius: 0;
  }

  .navbar-collapse {
    background: #1A2140;
    border: 1px solid #2B3560;
    border-radius: 12px;
    padding: 8px 14px;
    margin-top: 12px;
  }

  .table-responsive { border: 0; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ==========================================================================
   14. Corrections de contraste - surspecificite
   --------------------------------------------------------------------------
   Twenty-One cible certains blocs avec des selecteurs plus specifiques que
   les miens. A !important egal, c'est la specificite qui gagne : on prefixe
   donc par "html body" et on double les classes pour passer devant.
   ========================================================================== */

/* --- Tuiles blanches de l'accueil (raccourcis + Votre compte) --- */
html body .card.card,
html body .panel.panel,
html body .tile.tile,
html body .well.well,
html body .thumbnail.thumbnail,
html body .jumbotron.jumbotron,
html body [class*="tile"],
html body [class*="shortcut"] > a,
html body .home-shortcuts a,
html body #home-shortcuts a,
html body .client-home-panels .panel {
  background: #1A2140 !important;
  background-color: #1A2140 !important;
  border-color: #2B3560 !important;
  border-radius: 12px !important;
  color: #C8D3EC !important;
  box-shadow: none !important;
}

html body .card.card:hover,
html body [class*="tile"]:hover,
html body .home-shortcuts a:hover,
html body #home-shortcuts a:hover {
  background: #212A4E !important;
  background-color: #212A4E !important;
  border-color: #F9B233 !important;
}

/* Contenu des tuiles : libelles et icones */
html body [class*="tile"] *,
html body .home-shortcuts a *,
html body #home-shortcuts a *,
html body .card.card > *,
html body .panel.panel > * {
  background: transparent !important;
  color: inherit;
}

html body [class*="tile"] i,
html body [class*="tile"] svg,
html body .home-shortcuts i,
html body .home-shortcuts svg,
html body #home-shortcuts i,
html body #home-shortcuts svg {
  color: #F9B233 !important;
  fill: #F9B233 !important;
}

html body [class*="tile"] span,
html body [class*="tile"] h3,
html body [class*="tile"] h4,
html body .home-shortcuts a span,
html body #home-shortcuts a span {
  color: #FFFFFF !important;
  font-weight: 600 !important;
}

/* --- En-tete : logo et liens --- */
html body #header .logo,
html body #header .logo a,
html body .navbar-brand,
html body .navbar-brand a,
html body #header h1,
html body #header h2 {
  color: #FFFFFF !important;
  font-weight: 800 !important;
  letter-spacing: -.02em;
}

html body #header a,
html body #top-nav a,
html body .navbar a,
html body .navbar .nav-link,
html body .navbar .dropdown-toggle {
  color: #C8D3EC !important;
}

html body #header a:hover,
html body .navbar a:hover,
html body .navbar .nav-link:hover {
  color: #FFFFFF !important;
}

/* --- Bandeau de fil d'ariane (la bande grise sous le menu) --- */
html body .breadcrumb,
html body #breadcrumb,
html body .breadcrumb-bar,
html body section.breadcrumb,
html body .header-lined,
html body div[class*="breadcrumb"] {
  background: #151C36 !important;
  background-color: #151C36 !important;
  border: 0 !important;
  border-bottom: 1px solid #2B3560 !important;
  border-radius: 0 !important;
  margin-bottom: 0;
}

html body .breadcrumb a,
html body #breadcrumb a,
html body div[class*="breadcrumb"] a {
  color: #8D9DC4 !important;
}
html body .breadcrumb a:hover { color: #F9B233 !important; }

/* --- Barre de recherche de l'en-tete --- */
html body #header .form-control,
html body #header input,
html body .search-form input {
  background: #1A2140 !important;
  border-color: #2B3560 !important;
  color: #FFFFFF !important;
}

html body #header .btn,
html body .search-form .btn {
  background: #212A4E !important;
  border-color: #2B3560 !important;
  color: #C8D3EC !important;
}

/* --- Filet de securite : tout fond blanc residuel dans le corps --- */
html body #main-body [style*="background-color: #fff"],
html body #main-body [style*="background-color:#fff"],
html body #main-body [style*="background: #fff"],
html body #main-body .bg-white,
html body #main-body .bg-light {
  background: #1A2140 !important;
  background-color: #1A2140 !important;
  color: #C8D3EC !important;
}

/* ==========================================================================
   15. Tuiles d'accueil et bande de fil d'ariane
   --------------------------------------------------------------------------
   Les tuiles blanches de l'accueil n'utilisent ni .card ni .panel. On les
   cible donc par leur structure : une colonne qui contient une icone et un
   libelle. C'est ce que fait :has() ci-dessous.
   ========================================================================== */

/* --- Tuiles : cible structurelle (icone + libelle dans une colonne) --- */
html body #main-body [class*="col"] > a:has(i),
html body #main-body [class*="col"] > a:has(svg),
html body #main-body [class*="col"] > div:has(> i),
html body #main-body [class*="col"] > div:has(> svg),
html body #main-body [class*="col"] > div:has(> a > i),
html body #main-body [class*="col"] > div:has(> a > svg) {
  background: #1A2140 !important;
  background-color: #1A2140 !important;
  border-color: #2B3560 !important;
  color: #C8D3EC !important;
  box-shadow: none !important;
}

html body #main-body [class*="col"] > a:has(i):hover,
html body #main-body [class*="col"] > div:has(> a > i):hover {
  background-color: #212A4E !important;
  border-color: #F9B233 !important;
}

/* Icones et libelles a l'interieur */
html body #main-body [class*="col"] > a:has(i) i,
html body #main-body [class*="col"] > a:has(svg) svg,
html body #main-body [class*="col"] > div:has(> a > i) i {
  color: #F9B233 !important;
  fill: #F9B233 !important;
  opacity: 1 !important;
}

html body #main-body [class*="col"] > a:has(i),
html body #main-body [class*="col"] > a:has(i) span,
html body #main-body [class*="col"] > div:has(> a > i) a {
  color: #FFFFFF !important;
}

/* --- Bande de fil d'ariane : le fond gris est sur le conteneur pleine
       largeur, pas sur .breadcrumb. On attrape les utilitaires Bootstrap
       globalement (et plus seulement dans #main-body). --- */
html body .bg-light,
html body .bg-white,
html body .bg-secondary,
html body .bg-gray,
html body .bg-lightgray,
html body .breadcrumb-wrapper,
html body .breadcrumb-container,
html body nav[aria-label*="readcrumb"],
html body nav[aria-label*="il d"] {
  background: #151C36 !important;
  background-color: #151C36 !important;
  color: #C8D3EC !important;
}

/* L'element qui suit immediatement la barre de navigation = la bande */
html body .navbar + div,
html body .navbar + section,
html body .navbar + nav,
html body #main-menu + div,
html body #header + div,
html body #header + section {
  background: #151C36 !important;
  background-color: #151C36 !important;
  border-bottom: 1px solid #2B3560 !important;
}

/* --- Bas de page : supprimer la bande vide sous le footer --- */
html body #footer,
html body footer {
  margin-bottom: 0 !important;
}

/* ==========================================================================
   16. Blocs internes, typographie, finitions
   ========================================================================== */

/* --- Tout conteneur imbrique dans une card/panel repasse en transparent.
       C'est ce qui elimine les encarts blancs (resume d'annonce, encadres
       de la base de connaissances, blocs d'info du panier...). --- */
html body .card div:not(.progress):not(.progress-bar):not([class*="alert"]):not([class*="badge"]),
html body .card p,
html body .card blockquote,
html body .card article,
html body .card section,
html body .panel div:not(.progress):not(.progress-bar):not([class*="alert"]):not([class*="badge"]),
html body .panel p,
html body .panel blockquote,
html body .panel article,
html body #main-body blockquote,
html body #main-body [class*="summary"],
html body #main-body [class*="excerpt"] {
  background: transparent !important;
  background-color: transparent !important;
}

html body .card p,
html body .card li,
html body .card blockquote,
html body .panel p,
html body .panel li,
html body #main-body blockquote,
html body #main-body [class*="summary"] {
  color: #C8D3EC !important;
}

/* Un resume garde un filet ambre a gauche plutot qu'un pave blanc */
html body #main-body blockquote,
html body #main-body [class*="summary"] {
  border-left: 3px solid #F9B233 !important;
  border-top: 0 !important;
  border-right: 0 !important;
  border-bottom: 0 !important;
  padding: 4px 0 4px 18px !important;
  margin: 18px 0 !important;
  font-size: .97rem;
  line-height: 1.7;
}

/* --- Typographie : on serre les titres comme sur la vitrine --- */
html body h1,
html body h2,
html body h3,
html body .card-header,
html body .panel-heading {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
  letter-spacing: -.025em !important;
}

html body h1 { font-size: 2.15rem !important; font-weight: 800 !important; }
html body h2 { font-size: 1.55rem !important; font-weight: 800 !important; }
html body h3 { font-size: 1.2rem  !important; font-weight: 700 !important; }

html body p,
html body li,
html body td { line-height: 1.7; }

/* --- Cards : un peu plus d'air et une separation plus douce --- */
html body .card,
html body .panel {
  margin-bottom: 22px;
  overflow: hidden;
}

html body .card-header,
html body .panel-heading {
  font-size: 1.02rem !important;
  padding: 15px 20px !important;
}

/* Icones des entetes de panneaux en ambre */
html body .card-header i,
html body .panel-heading i,
html body .card-header svg,
html body .panel-heading svg {
  color: #F9B233 !important;
  fill: #F9B233 !important;
  margin-right: 8px;
}

/* --- Sidebar : item actif plus lisible --- */
html body .list-group-item i,
html body .list-group-item svg {
  color: #8D9DC4 !important;
  width: 18px;
  margin-right: 6px;
}
html body .list-group-item.active i,
html body .list-group-item.active svg,
html body .list-group-item:hover i {
  color: #F9B233 !important;
}

/* --- Boutons secondaires : on remonte le contraste --- */
html body .btn-default,
html body .btn-secondary {
  background: #212A4E !important;
  border-color: #3A4780 !important;
  color: #FFFFFF !important;
}
html body .btn-default:hover,
html body .btn-secondary:hover {
  background: #2B3560 !important;
  border-color: #F9B233 !important;
  color: #F9B233 !important;
}

/* --- Liens dans le contenu : soulignes au survol pour la lisibilite --- */
html body #main-body a:not(.btn):not(.list-group-item):not(.nav-link):hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --- Pied de page : separation nette avec le contenu --- */
html body #footer,
html body footer {
  background: #141B34 !important;
  border-top: 1px solid #2B3560 !important;
}

/* ==========================================================================
   17. Raffinements - formes, hierarchie, alignement
   ========================================================================== */

/* --- Tuiles : arrondi, respiration, reaction au survol --- */
html body #main-body [class*="col"] > a:has(i),
html body #main-body [class*="col"] > a:has(svg),
html body #main-body [class*="col"] > div:has(> i),
html body #main-body [class*="col"] > div:has(> svg),
html body #main-body [class*="col"] > div:has(> a > i),
html body #main-body [class*="col"] > div:has(> a > svg) {
  border-radius: 12px !important;
  border: 1px solid #2B3560 !important;
  padding: 26px 16px !important;
  transition: transform .18s ease, border-color .18s ease,
              background-color .18s ease, box-shadow .18s ease !important;
}

html body #main-body [class*="col"] > a:has(i):hover,
html body #main-body [class*="col"] > div:has(> a > i):hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .45) !important;
}

html body #main-body [class*="col"] > a:has(i) i,
html body #main-body [class*="col"] > div:has(> a > i) i,
html body #main-body [class*="col"] i.fa-3x,
html body #main-body [class*="col"] i.fa-2x {
  font-size: 30px !important;
  margin-bottom: 14px !important;
  display: block;
}

/* --- Hierarchie et alignement : on calque la vitrine (aligne a gauche) --- */
html body #main-body h1,
html body #main-body h2,
html body #main-body h3,
html body #main-body > .container > p {
  text-align: left !important;
}

html body #main-body h1 {
  font-size: 2.4rem !important;
  margin-bottom: 8px !important;
  color: #FFFFFF !important;
}

/* Filet ambre sous le titre de page */
html body #main-body > .container > h1::after,
html body #main-body > .container > div > h1::after {
  content: '';
  display: block;
  width: 54px;
  height: 3px;
  background: #F9B233;
  border-radius: 2px;
  margin-top: 16px;
}

html body #main-body h2 {
  font-size: 1.3rem !important;
  font-weight: 700 !important;
  color: #C8D3EC !important;
  margin-top: 46px !important;
  margin-bottom: 20px !important;
}

/* --- Navigation : indicateur de page active --- */
html body .navbar .nav-item.active > .nav-link,
html body .navbar .nav-link.active {
  position: relative;
  color: #FFFFFF !important;
  background: transparent !important;
}
html body .navbar .nav-item.active > .nav-link::after,
html body .navbar .nav-link.active::after {
  content: '';
  position: absolute;
  left: .95rem;
  right: .95rem;
  bottom: 0;
  height: 2px;
  background: #F9B233;
  border-radius: 2px;
}

/* --- Bande de fil d'ariane : filet sur toute la largeur --- */
html body .breadcrumb {
  border-bottom: 0 !important;
  padding-top: 12px;
  padding-bottom: 12px;
  margin-bottom: 0 !important;
}

/* --- Mention WHMCS : discrete, elle ne doit pas capter l'oeil --- */
html body a[href*="whmcs.com"],
html body a[href*="WHMComplete"] {
  color: #5C6A8F !important;
  font-size: .85rem;
  text-decoration: none !important;
}
html body a[href*="whmcs.com"]:hover { color: #8D9DC4 !important; }

/* --- Rythme vertical --- */
html body #main-body {
  padding-top: 38px !important;
  padding-bottom: 56px !important;
}

html body #main-body .row + .row { margin-top: 6px; }

/* --- Barre de recherche de l'entete : plus compacte --- */
html body #header .form-control,
html body .search-form .form-control {
  border-radius: 8px 0 0 8px !important;
  height: 42px;
}
html body #header .input-group-prepend .btn,
html body #header .input-group-append .btn {
  border-radius: 0 8px 8px 0 !important;
}

/* --- Selecteur de langue / devise du pied de page --- */
html body #footer .btn,
html body footer .btn {
  background: #212A4E !important;
  border: 1px solid #2B3560 !important;
  color: #C8D3EC !important;
  border-radius: 999px !important;
  padding: .4rem 1rem !important;
}

/* ==========================================================================
   18. Accueil SEITOS - styles du homepage.tpl
   --------------------------------------------------------------------------
   Ne s'applique qu'aux blocs .seitos-* de la page d'accueil personnalisee.
   ========================================================================== */

/* --- Neutralisation des regles generiques sur cette page --- */
html body .seitos-hero h1::after,
html body .seitos-section h2::after,
html body .seitos-final h2::after { display: none !important; content: none !important; }

html body [class^="seitos-"],
html body [class^="seitos-"] * { box-sizing: border-box; }

/* --- Utilitaire pleine largeur (sort du .container de WHMCS) --- */
.seitos-bleed {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: calc(50vw - 50%);
  padding-right: calc(50vw - 50%);
  background: #151C36;
  border-top: 1px solid #2B3560;
  border-bottom: 1px solid #2B3560;
}
.seitos-inner { max-width: 100%; }

/* --- HERO --- */
.seitos-hero {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 56px;
  align-items: center;
  padding: 54px 0 68px;
}

html body .seitos-hero h1 {
  font-size: 3.15rem !important;
  line-height: 1.05 !important;
  font-weight: 800 !important;
  letter-spacing: -.035em !important;
  color: #FFFFFF !important;
  margin: 0 0 22px !important;
  max-width: 13ch;
}

.seitos-lead {
  color: #9FB0D4 !important;
  font-size: 1.02rem;
  line-height: 1.75;
  max-width: 52ch;
  margin: 0 0 30px;
}
.seitos-lead-narrow { max-width: 58ch; }

.seitos-cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 44px; }

/* --- Boutons SEITOS --- */
html body .seitos-btn {
  display: inline-block;
  border-radius: 8px;
  font-weight: 700;
  font-size: .95rem;
  padding: .72rem 1.35rem;
  text-decoration: none !important;
  border: 1px solid transparent;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease;
  white-space: nowrap;
}
html body .seitos-btn-primary { background: #F9B233 !important; color: #101728 !important; }
html body .seitos-btn-primary:hover { background: #FFC24D !important; color: #101728 !important; }
html body .seitos-btn-ghost { background: #1E2649 !important; color: #FFFFFF !important; border-color: #313D73 !important; }
html body .seitos-btn-ghost:hover { background: #2B3560 !important; border-color: #F9B233 !important; color: #FFFFFF !important; }
html body .seitos-btn-dark { background: #17203C !important; color: #FFFFFF !important; }
html body .seitos-btn-dark:hover { background: #0D1324 !important; color: #F9B233 !important; }
html body .seitos-btn-sm { padding: .5rem 1rem; font-size: .875rem; }

/* --- Chiffres cles --- */
.seitos-stats { display: grid; grid-template-columns: repeat(4, auto); gap: 26px 40px; justify-content: start; }
.seitos-stat strong { display: block; color: #FFFFFF !important; font-weight: 700; font-size: 1.02rem; margin-bottom: 3px; }
.seitos-stat span { color: #8D9DC4 !important; font-size: .875rem; }

/* --- Carte du hero --- */
.seitos-hero-card { background: #1B2450; border: 1px solid #313D73; border-radius: 14px; overflow: hidden; }
.seitos-card-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid #313D73;
}
.seitos-card-title { color: #FFFFFF; font-weight: 700; font-size: .98rem; }
.seitos-dots i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-left: 5px; }
.seitos-dots i:nth-child(1) { background: #35D28A; }
.seitos-dots i:nth-child(2) { background: #F9B233; }
.seitos-dots i:nth-child(3) { background: #3D4A85; }

.seitos-card-body { padding: 18px 20px 20px; }
.seitos-spec { display: flex; justify-content: space-between; align-items: baseline; padding: 9px 0; border-bottom: 1px solid #2A3468; }
.seitos-spec span { color: #8D9DC4; font-size: .9rem; }
.seitos-spec small { color: #6B7BA8; font-size: .78rem; }
.seitos-spec strong { color: #FFFFFF; font-weight: 700; font-size: .95rem; }

.seitos-price-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 0 18px; }
.seitos-price { color: #FFFFFF; font-size: 2rem; font-weight: 800; letter-spacing: -.03em; }
.seitos-price span { color: #8D9DC4; font-size: .85rem; font-weight: 500; letter-spacing: 0; }

.seitos-terminal {
  background: #0F1633 !important;
  border: 1px solid #2A3468 !important;
  border-radius: 10px;
  color: #9FB0D4 !important;
  font-family: 'JetBrains Mono', 'SFMono-Regular', Consolas, Menlo, monospace !important;
  font-size: .8rem;
  line-height: 1.85;
  padding: 14px 16px;
  margin: 0;
  white-space: pre-wrap;
  overflow-x: auto;
}
.seitos-terminal b { color: #35D28A !important; font-weight: 400; }
.seitos-terminal em { color: #35D28A !important; font-style: normal; }

/* --- Sections --- */
.seitos-section { padding: 62px 0; }
html body .seitos-section h2.seitos-h2,
html body .seitos-final h2 {
  font-size: 2.05rem !important;
  font-weight: 800 !important;
  letter-spacing: -.03em !important;
  line-height: 1.15 !important;
  color: #FFFFFF !important;
  margin: 0 0 16px !important;
  max-width: 20ch;
}

/* --- Tableau des offres --- */
.seitos-table-wrap { border: 1px solid #2B3560; border-radius: 14px; overflow: hidden; margin-top: 34px; }
html body table.seitos-table { width: 100%; margin: 0; border-collapse: collapse; background: #151C36 !important; }
html body table.seitos-table thead th {
  background: #1B2450 !important; color: #8D9DC4 !important;
  font-size: .8rem; font-weight: 600; text-align: left;
  padding: 15px 18px; border: 0 !important;
}
html body table.seitos-table td {
  padding: 16px 18px; border: 0 !important;
  border-top: 1px solid #2B3560 !important;
  color: #C8D3EC !important; vertical-align: middle;
}
html body table.seitos-table td strong { color: #FFFFFF !important; font-size: 1.02rem; }
html body table.seitos-table tbody tr:hover td { background: #1B2450 !important; }
html body table.seitos-table .seitos-row-featured td { background: #1B2450 !important; }
.seitos-cell-price { color: #FFFFFF !important; font-weight: 800; font-size: 1.05rem; white-space: nowrap; }
.seitos-cell-price span { color: #8D9DC4 !important; font-weight: 500; font-size: .82rem; }
.seitos-tag {
  display: inline-block; background: #F9B233; color: #101728;
  font-size: .7rem; font-weight: 700; border-radius: 5px;
  padding: .18em .5em; margin-left: 8px; vertical-align: middle;
}

/* --- Frise du parcours --- */
html body ol.seitos-timeline {
  list-style: none; margin: 40px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
}
html body ol.seitos-timeline li { position: relative; padding: 0 26px 0 0; }
html body ol.seitos-timeline li::before {
  content: ''; position: absolute; top: 15px; left: 32px; right: 0;
  height: 1px; background: #3A4780;
}
html body ol.seitos-timeline li:last-child::before { display: none; }
.seitos-step {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  width: 31px; height: 31px; border-radius: 50%;
  background: #E8EDF8; color: #101728; font-weight: 700; font-size: .88rem;
  margin-bottom: 18px;
}
.seitos-time {
  display: block; color: #7E8FBC; font-size: .8rem; margin-bottom: 8px;
  font-family: 'JetBrains Mono', Consolas, monospace;
}
html body ol.seitos-timeline strong { display: block; color: #FFFFFF !important; font-size: 1.02rem; margin-bottom: 8px; }
html body ol.seitos-timeline p { color: #8D9DC4 !important; font-size: .9rem; line-height: 1.65; margin: 0; padding-right: 18px; }

/* --- Infrastructure --- */
.seitos-split { display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; margin-top: 38px; align-items: start; }
.seitos-specs { display: grid; grid-template-columns: 1fr 1fr; gap: 0 36px; }
.seitos-spec-item { padding: 18px 0; border-bottom: 1px solid #2B3560; }
.seitos-spec-item span { display: block; color: #8D9DC4 !important; font-size: .82rem; margin-bottom: 5px; }
.seitos-spec-item strong { color: #FFFFFF !important; font-size: 1.02rem; font-weight: 700; }

.seitos-panel { background: #1B2450; border: 1px solid #313D73; border-radius: 14px; overflow: hidden; }
.seitos-panel-head { padding: 16px 20px; border-bottom: 1px solid #313D73; color: #FFFFFF; font-weight: 700; }
html body a.seitos-panel-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px; border-bottom: 1px solid #2A3468;
  text-decoration: none !important; transition: background-color .15s ease;
}
html body a.seitos-panel-row:last-child { border-bottom: 0; }
html body a.seitos-panel-row:hover { background: #222C5C; }
html body a.seitos-panel-row span { color: #C8D3EC !important; font-size: .95rem; }
html body a.seitos-panel-row em {
  font-style: normal; color: #F9B233 !important; font-size: .82rem; font-weight: 600;
  background: rgba(249, 178, 51, .12); border-radius: 999px; padding: .25em .8em;
}

/* --- FAQ --- */
.seitos-faq { margin-top: 34px; max-width: 760px; }
.seitos-faq details { border-bottom: 1px solid #2B3560; }
.seitos-faq summary {
  cursor: pointer; list-style: none;
  padding: 18px 34px 18px 0; position: relative;
  color: #FFFFFF; font-weight: 700; font-size: .98rem;
}
.seitos-faq summary::-webkit-details-marker { display: none; }
.seitos-faq summary::after {
  content: '+'; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  color: #8D9DC4; font-size: 1.3rem; font-weight: 400; line-height: 1;
}
.seitos-faq details[open] summary::after { content: '–'; color: #F9B233; }
.seitos-faq details[open] summary { color: #F9B233; }
html body .seitos-faq p { color: #9FB0D4 !important; font-size: .94rem; line-height: 1.75; margin: 0 0 20px; padding-right: 34px; }

/* --- CTA final --- */
.seitos-final {
  background: #F9B233;
  border-radius: 16px;
  padding: 46px 48px;
  margin: 20px 0 66px;
  display: flex; align-items: center; justify-content: space-between; gap: 32px;
}
html body .seitos-final h2 { color: #101728 !important; margin: 0 !important; max-width: 14ch; }

/* --- Responsive --- */
@media (max-width: 991px) {
  .seitos-hero { grid-template-columns: 1fr; gap: 38px; padding: 34px 0 44px; }
  html body .seitos-hero h1 { font-size: 2.3rem !important; max-width: none; }
  .seitos-stats { grid-template-columns: 1fr 1fr; gap: 20px 24px; }
  html body ol.seitos-timeline { grid-template-columns: 1fr; gap: 26px; }
  html body ol.seitos-timeline li::before { display: none; }
  html body ol.seitos-timeline li { padding-right: 0; }
  .seitos-split { grid-template-columns: 1fr; gap: 32px; }
  .seitos-specs { grid-template-columns: 1fr; gap: 0; }
  .seitos-section { padding: 42px 0; }
  html body .seitos-section h2.seitos-h2 { font-size: 1.6rem !important; max-width: none; }
  .seitos-final { flex-direction: column; align-items: flex-start; padding: 32px 26px; }
  .seitos-table-wrap { overflow-x: auto; }
  html body table.seitos-table { min-width: 720px; }
}

/* ==========================================================================
   19. Masquage des pages non utilisees
   --------------------------------------------------------------------------
   On cible les liens par leur href, donc ca fonctionne quelle que soit la
   langue du libelle. Retire une ligne pour reafficher l'entree concernee.
   ========================================================================== */

/* --- Entrees du menu principal --- */
html body .navbar li:has(> a[href*="announcements"]),
html body .navbar li:has(> a[href*="knowledgebase"]),
html body .navbar li:has(> a[href*="serverstatus"]),
html body .navbar li:has(> a[href*="downloads"]),
html body .navbar a[href*="announcements"],
html body .navbar a[href*="knowledgebase"],
html body .navbar a[href*="serverstatus"],
html body .navbar a[href*="downloads"] {
  display: none !important;
}

/* --- Entrees du pied de page --- */
html body #footer a[href*="announcements"],
html body #footer a[href*="knowledgebase"],
html body #footer a[href*="serverstatus"],
html body #footer a[href*="downloads"],
html body footer a[href*="announcements"],
html body footer a[href*="knowledgebase"],
html body footer a[href*="serverstatus"],
html body footer a[href*="downloads"] {
  display: none !important;
}

/* --- Entrees de la barre laterale (panneau Assistance) --- */
html body .list-group-item[href*="announcements"],
html body .list-group-item[href*="knowledgebase"],
html body .list-group-item[href*="serverstatus"],
html body .list-group-item[href*="downloads"],
html body .sidebar li:has(> a[href*="announcements"]),
html body .sidebar li:has(> a[href*="knowledgebase"]),
html body .sidebar li:has(> a[href*="serverstatus"]),
html body .sidebar li:has(> a[href*="downloads"]) {
  display: none !important;
}

/* --- Barre de recherche de la base de connaissances dans l'entete --- */
html body #header form[action*="knowledgebase"],
html body #header .input-group:has(input[name="search"]) {
  display: none !important;
}

/* --- Entree "Accueil" du menu principal.
       Supprime ce bloc si tu veux la garder. Le logo reste cliquable et
       ramene a l'accueil, il n'est pas concerne. --- */
html body .navbar li:has(> a[href$="/index.php"]),
html body .navbar li:has(> a[href$="index.php"]),
html body .navbar li.first:has(> a[href$="/"]) {
  display: none !important;
}