p {
    font-size: 14px !important; 
    line-height: 1.4 !important; 
}

@media (max-width: 767px) {
    /* Forcer l'alignement à gauche pour les formulaires WHMCS sur mobile */
    .client-area-content .form-horizontal .control-label,
    .client-area-content form label,
    #frmContact label,
    .col-form-label {
        text-align: left !important;
        justify-content: flex-start !important; /* Si le thème utilise Flexbox */
        display: block !important;
        width: 100% !important;
        padding-top: 0 !important;
    }
    
    /* Si le thème force l'alignement à droite avec une classe utilitaire */
    .client-area-content .text-right {
        text-align: left !important;
    }
}
/* =========================================================
   GREYFOX STUDIO - THEME WHMCS CUSTOM SOMBRE
   ========================================================= */

/* =========================================================
   1. IMPORTATION DES POLICES GOOGLE
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,700&family=Syne:wght@700&display=swap');

/* =========================================================
   2. ASSIGNATION DES POLICES
   ========================================================= */
body, p, a, li, span, div, h5, h6, input, textarea, button, select, .nav-link {
    font-family: 'Barlow', sans-serif !important;
}

h1, h2, h3, h4, .page-title, .h1, .h2, .h3, .h4 {
    font-family: 'Syne', sans-serif !important;
    font-weight: 700 !important;
}

/* Forcer le chargement de la police d'icônes dans l'éditeur */
.md-editor > .md-header .btn-default span,
.md-editor > .md-header .btn-default i {
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome" !important;
    font-weight: 900 !important;
}

/* =========================================================
   3. FORCER LE DARK MODE SUR LES ÉLÉMENTS RÉCALCITRANTS
   ========================================================= */

/* Fond principal de la page */
body, .main-body, .app-main {
    background-color: #121212 !important;
    color: #e0e0e0 !important;
}

/* Les fameuses "boîtes blanches" (Cartes, conteneurs, fond de page) */
.card, .bg-white, .container.bg-white, .main-content, .panel {
    background-color: #1e1e1e !important;
    border: 1px solid #333333 !important;
    color: #e0e0e0 !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3) !important;
}

/* Textes et Titres pour être lisibles sur fond sombre */
h1, h2, h3, h4, h5, h6, .text-dark, .card-title, label {
    color: #ffffff !important;
}
p, span, div {
    color: #cccccc !important;
}

/* L'en-tête (Header / Navbar) */
header, .navbar, .navbar-light, .bg-light {
    background-color: #121212 !important;
    border-bottom: 1px solid #333333 !important;
}
.navbar-brand, .nav-link, .navbar-nav .nav-link {
    color: #ffffff !important;
}
.navbar-nav .nav-link:hover {
    color: #FF6600 !important;
}

/* Le pied de page (Footer) */
footer, .footer, .bottom-nav {
    background-color: #0a0a0a !important;
    color: #888888 !important;
    border-top: 1px solid #222222 !important;
}

/* =========================================================
   4. LES FORMULAIRES ET BOUTONS (Ton orange #FF6600)
   ========================================================= */

/* Champs de texte (Inputs, Textarea) */
.form-control, select, input[type="text"], input[type="email"], textarea {
    background-color: #2a2a2a !important;
    border: 1px solid #444444 !important;
    color: #ffffff !important;
}
.form-control:focus, input:focus, textarea:focus {
    background-color: #333333 !important;
    border-color: #FF6600 !important;
    box-shadow: 0 0 0 0.2rem rgba(255, 102, 0, 0.25) !important;
    color: #ffffff !important;
}

/* Les boutons d'action */
.btn-primary, .btn-default.bg-color-primary, button[type="submit"] {
    background-color: #FF6600 !important;
    border-color: #FF6600 !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    border-radius: 4px !important;
    transition: all 0.3s ease !important;
}
.btn-primary:hover, .btn-default.bg-color-primary:hover, button[type="submit"]:hover {
    background-color: #cc5200 !important;
    border-color: #cc5200 !important;
}

/* Liens généraux */
a {
    color: #FF6600 !important;
    text-decoration: none !important;
}
a:hover {
    color: #cc5200 !important;
}

/* =========================================================
   5. LES BOÎTES BLANCHES RÉCALCITRANTES (Accueil & Latéral)
   ========================================================= */

/* Menus de la barre latérale et tuiles de la page d'accueil */
.list-group-item, 
.client-home-panels .card, 
.client-home-panels .panel, 
.feature-box, 
.panel-default > .panel-heading,
.bg-color-white {
    background-color: #1e1e1e !important;
    border-color: #333333 !important;
    color: #e0e0e0 !important;
}

/* Effet au survol dans le menu latéral */
.list-group-item:hover, 
a.list-group-item:hover, 
a.list-group-item:focus {
    background-color: #2a2a2a !important;
    color: #FF6600 !important;
}

/* Mettre les icônes bleu pâle de l'accueil en Orange GreyFox */
.feature-box i, 
.feature-box .icon, 
.client-home-panels i,
.list-group-item i {
    color: #FF6600 !important;
}

/* Le bouton blanc "Poursuivre la lecture" */
.btn-default, 
.btn-light {
    background-color: transparent !important;
    border: 1px solid #FF6600 !important;
    color: #FF6600 !important;
}

.btn-default:hover, 
.btn-light:hover {
    background-color: #FF6600 !important;
    color: #ffffff !important;
}

/* =========================================================
   6. LES TUILES DE LA PAGE D'ACCUEIL (Raccourcis)
   ========================================================= */

/* Forcer le fond sombre sur les boîtes de raccourcis */
.home-shortcuts a,
.home-shortcuts .card,
.client-home-cards .card,
.tiles .tile {
    background-color: #1e1e1e !important;
    border: 1px solid #333333 !important;
    border-radius: 6px !important;
    transition: all 0.3s ease !important;
}

/* Effet au survol des tuiles (Fond plus clair et bordure orange) */
.home-shortcuts a:hover,
.home-shortcuts .card:hover,
.client-home-cards .card:hover {
    background-color: #2a2a2a !important;
    border-color: #FF6600 !important;
    text-decoration: none !important;
}

/* Forcer les icônes (Remplacer le bleu pâle par l'orange) */
.home-shortcuts i,
.home-shortcuts svg,
.home-shortcuts img,
.home-shortcuts .icon,
.client-home-cards i,
.client-home-cards svg {
    color: #FF6600 !important;
    fill: #FF6600 !important; 
    opacity: 0.9 !important;
}

/* =========================================================
   7. LES MENUS DÉROULANTS (Dropdowns - Compte & Actions)
   ========================================================= */
.dropdown-menu,
.navbar-nav .dropdown-menu {
    background-color: #1e1e1e !important;
    border: 1px solid #333333 !important;
    box-shadow: 0 8px 15px rgba(0,0,0,0.5) !important;
}

/* Les liens à l'intérieur des menus */
.dropdown-item,
.dropdown-menu > li > a,
.dropdown-menu a {
    color: #e0e0e0 !important;
    background-color: transparent !important;
    padding: 8px 20px !important;
}

/* L'effet de survol (Hover) dans les menus */
.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-menu > li > a:hover,
.dropdown-menu a:hover {
    background-color: #2a2a2a !important;
    color: #FF6600 !important;
}

/* La petite ligne de séparation dans les menus */
.dropdown-divider,
.dropdown-menu .divider {
    border-top: 1px solid #333333 !important;
}

/* =========================================================
   8. FORCER LES TUILES D'ACCUEIL (L'artillerie lourde)
   ========================================================= */
/* On vise TOUS les liens qui ont l'apparence de cartes (cards) */
a.card, 
.card.bg-white,
.client-home-panels .card,
.quick-nav .card {
    background-color: #1e1e1e !important;
    background: #1e1e1e !important; /* Force l'écrasement si un gradient est présent */
    border: 1px solid #333333 !important;
    border-radius: 6px !important;
}

/* Forcer la couleur du texte à l'intérieur de ces tuiles */
a.card *, 
.card.bg-white * {
    color: #e0e0e0 !important;
}

/* Forcer ton orange sur les icônes (FontAwesome ou SVG) */
a.card i, 
a.card svg,
.card.bg-white i,
.card.bg-white svg {
    color: #FF6600 !important;
    fill: #FF6600 !important;
    opacity: 1 !important;
}

/* Effet interactif au survol des tuiles */
a.card:hover,
.card.bg-white:hover {
    background-color: #2a2a2a !important;
    background: #2a2a2a !important;
    border-color: #FF6600 !important;
}


/* =========================================================
   9. EN-TÊTES DES PANNEAUX (Panier d'achat et Actions)
   ========================================================= */

/* Forcer le fond sombre sur le haut des boîtes (Headers) */
.card-header,
.panel-heading,
.cart-sidebar .panel-heading.card-header,
.panel-default > .panel-heading {
    background-color: #1e1e1e !important;
    background: #1e1e1e !important; /* Écrase les dégradés potentiels */
    border-bottom: 1px solid #333333 !important;
    border-radius: 6px 6px 0 0 !important; /* Garde les coins ronds en haut */
}

/* Forcer le texte du titre en blanc pour qu'il soit lisible */
.card-header *,
.panel-heading *,
.panel-title,
.cart-sidebar .panel-title {
    color: #ffffff !important;
}


/* =========================================================
   10. TUILES D'ACCUEIL (Contrôle total via HTML personnalisé)
   ========================================================= */

/* La boîte principale */
.greyfox-tile {
    background-color: #1e1e1e !important;
    border: 1px solid #333333 !important;
    border-top: 1px solid #333333 !important; /* Garde ta bordure du haut corrigée */
    border-radius: 6px !important;
    height: 140px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    text-decoration: none !important;
    margin: 0 0 15px 0 !important;
    transition: background-color 0.2s ease, border-color 0.2s ease !important;
}

/* Écraser la grosse bordure native par NOTRE bordure fine */
.action-icon-btns a[class*="card-accent-"] {
    border-top: 1px solid #333333 !important; 
}

.action-icon-btns a[class*="card-accent-"]:hover {
    border-top: 1px solid #FF6600 !important; 
}

/* La boîte au survol */
.greyfox-tile:hover {
    background-color: #2a2a2a !important;
    border-color: #FF6600 !important;
    border-top: 1px solid #FF6600 !important;
    text-decoration: none !important;
}

/* L'enveloppe de notre icône (Fixe l'espace) */
.gf-icon-wrap {
    height: 50px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 10px !important;
}

/* L'icône en elle-même */
.gf-icon-wrap i {
    color: #FF6600 !important;
    font-size: 35px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform-origin: center center !important; /* Force le grossissement depuis le centre exact */
    transition: transform 0.2s ease-in-out !important; /* Animation fluide */
}

/* L'effet de loupe au survol (Maintenant 100% stable) */
.greyfox-tile:hover .gf-icon-wrap i {
    transform: scale(1.3) !important;
    color: #FF6600 !important;
}

/* L'enveloppe de notre texte */
.gf-text-wrap {
    color: #ffffff !important;
    font-size: 16px !important;
    text-align: center !important;
    margin: 0 !important;
    padding: 0 10px !important;
    line-height: 1.2 !important;
}

.greyfox-tile:hover .gf-text-wrap {
    color: #ffffff !important; /* Assure que ça reste blanc */
}

/* =========================================================
   11. PAGE DES DOMAINES (Style natif GreyFox)
   ========================================================= */

/* 1. Le fond de recherche (Fini le gros jaune aveuglant et le globe !) */
.gf-domain-bg {
    background: #1e1e1e !important;
    background-image: none !important;
    border: 1px solid #333333 !important;
    border-radius: 6px !important;
    padding: 30px !important;
}

/* On s'assure que le texte du filtre est lisible */
.gf-domain-bg, .gf-domain-bg label, .gf-domain-bg span {
    color: #e0e0e0 !important;
}

/* On efface les fausses boîtes blanches autour du champ et du Captcha */
.gf-domain-bg .input-group-box, 
.gf-domain-bg .captcha-container, 
#captchaContainer {
    background-color: transparent !important;
    border: none !important;
}

/* 2. Le tableau des prix (Fini la grosse boîte blanche) */
.gf-pricing-table {
    background-color: #1e1e1e !important;
    border: 1px solid #333333 !important;
    border-radius: 6px !important;
    color: #e0e0e0 !important;
    margin-bottom: 30px !important;
}

/* L'en-tête du tableau (Domaine | Enregistrement | etc.) */
.gf-pricing-table .tld-pricing-header {
    background-color: #2a2a2a !important;
    border-bottom: 1px solid #333333 !important;
    color: #ffffff !important;
    padding: 10px 0 !important;
}

/* Les lignes de prix avec effet au survol */
.gf-pricing-table .tld-row {
    border-bottom: 1px solid #333333 !important;
    padding: 10px 0 !important;
    transition: background-color 0.2s ease !important;
}
.gf-pricing-table .tld-row:hover {
    background-color: #2a2a2a !important;
}

/* 3. Les onglets des catégories (Filtres) */
.tld-filters a.badge {
    background-color: #2a2a2a !important;
    color: #aaaaaa !important;
    border: 1px solid #333333 !important;
    padding: 8px 15px !important;
    margin-bottom: 5px !important;
}
.tld-filters a.badge:hover, 
.tld-filters a.badge.active {
    background-color: #FF6600 !important;
    color: #ffffff !important;
    border-color: #FF6600 !important;
}

/* 4. Les boîtes promotionnelles du bas */
.gf-promo-box {
    background-color: #1e1e1e !important;
    border: 1px solid #333333 !important;
    border-radius: 6px !important;
    color: #e0e0e0 !important;
    padding: 25px !important;
}

/* Forcer les couleurs pour que tout soit lisible et élégant */
.gf-promo-box h3, .gf-promo-box i {
    color: #FF6600 !important; /* Ton orange */
}
.gf-promo-box .text-warning, .gf-promo-box .text-primary {
    color: #ffffff !important; /* Texte en dessous du titre */
}

/* Le bouton jaune des promos qu'on passe en orange GreyFox */
.gf-promo-box .btn-warning {
    background-color: #FF6600 !important;
    border-color: #FF6600 !important;
    color: #ffffff !important;
}
.gf-promo-box .btn-warning:hover {
    background-color: #cc5200 !important;
    border-color: #cc5200 !important;
}

/* =========================================================
   12. CORRECTIONS FINALES - PAGE DOMAINES (Dark Mode)
   ========================================================= */

/* 1. Réparation de la zone de recherche écrasée */
.gf-domain-bg .input-group-box {
    display: flex !important;
    flex-direction: column !important; /* Empile le texte et le bouton proprement */
    gap: 15px !important;
    background: transparent !important;
    border: none !important;
}

/* Le champ de texte (textarea) */
.gf-domain-bg textarea,
.gf-domain-bg input[type="text"] {
    background-color: #2a2a2a !important;
    border: 1px solid #444444 !important;
    color: #ffffff !important;
    border-radius: 6px !important;
    padding: 15px !important;
    width: 100% !important;
}

/* 2. Le gros bloc blanc du Captcha */
.captcha-container,
#captchaContainer {
    background-color: #1e1e1e !important;
    border: 1px solid #333333 !important;
    border-radius: 6px !important;
    color: #ffffff !important;
}

/* 3. La grosse barre blanche (Domaine | Enregistrement | Transfert) */
.gf-pricing-table .tld-pricing-header {
    background-color: #2a2a2a !important; /* Gris un peu plus pâle pour faire ressortir l'en-tête */
    border-bottom: 2px solid #FF6600 !important; /* Belle petite ligne orange */
    color: #ffffff !important;
    border-radius: 6px 6px 0 0 !important;
}

/* Force les boîtes derrière les textes de la table en gris foncé */
.gf-pricing-table .row, 
.gf-pricing-table .col-md-8,
.gf-pricing-table .bg-white {
    background-color: transparent !important;
    background: transparent !important;
    color: #e0e0e0 !important;
}

/* Correction de la couleur du texte "Recherche sécurisée" */
.gf-domain-bg label {
    color: #ffffff !important;
}

/* =========================================================
   13. NETTOYAGE EXTRÊME : Filtres inutiles et En-tête de prix
   ========================================================= */

/* 1. ON CACHE LES FILTRES LAIDS (Longueur et TLD) */
.gf-domain-bg .btn-group,
.gf-domain-bg .multiselect-native-select,
.gf-domain-bg select {
    display: none !important; /* Disparition totale */
}

/* On ajuste la zone de texte (qui utilise l'IA de WHMCS) pour qu'elle respire */
.gf-domain-bg textarea {
    min-height: 80px !important;
    margin-bottom: 15px !important;
}

/* 2. RÉPARATION DE L'EN-TÊTE DU TABLEAU DES PRIX */
/* On lui redonne un look de "Titre de colonnes" et non de boutons */
.gf-pricing-table .tld-pricing-header {
    background-color: #2a2a2a !important;
    border-bottom: 2px solid #FF6600 !important;
    padding: 15px 0 !important;
    margin: 0 !important;
    border-radius: 6px 6px 0 0 !important;
}

/* On force TOUT l'intérieur de l'en-tête à être sombre et propre (Extermination du blanc) */
.gf-pricing-table .tld-pricing-header,
.gf-pricing-table .tld-pricing-header div,
.gf-pricing-table .tld-pricing-header span {
    background-color: transparent !important;
    background: transparent !important;
    background-image: none !important;
    color: #ffffff !important;
    font-weight: bold !important;
    border: none !important;
    box-shadow: none !important;
}

/* 3. Le fond du Captcha */
.gf-domain-bg .default-captcha,
.default-captcha-register-margin {
    background-color: transparent !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
/* =========================================================
   14. RÉSULTATS DE RECHERCHE DE DOMAINES (Dark Mode)
   ========================================================= */

/* 1. Remplacer la ligne verte par du Orange GreyFox */
.primary-domain-header {
    border-bottom: 2px solid #FF6600 !important;
    color: #ffffff !important;
    padding-bottom: 10px !important;
}

/* 2. Éliminer le gris pâle des messages du système et suggestions */
.domain-lookup-result,
.domain-lookup-message,
.suggested-domains .panel-body,
.suggested-domains .list-group-item,
.domain-checker-result-headline {
    background-color: #1e1e1e !important;
    border-color: #333333 !important;
    color: #e0e0e0 !important;
}

/* 3. Ajuster le texte d'erreur pour qu'il soit bien lisible */
.domain-invalid, .domain-unavailable {
    color: #ff4444 !important; /* Rouge doux pour les erreurs */
    font-weight: bold !important;
}

/* =========================================================
   15. ALIGNEMENT PARFAIT (Texte, Bouton et Case à cocher)
   ========================================================= */

/* On recrée la grille intelligente */
.gf-domain-bg .input-group-box {
    display: grid !important;
    grid-template-columns: auto 1fr !important; /* Col 1: largeur du bouton, Col 2: le reste de l'espace */
    gap: 15px !important;
    width: 100% !important;
    background: transparent !important;
    border: none !important;
    align-items: center !important; /* Aligne le bouton et la case verticalement */
}

/* Le rectangle de texte prend toute la largeur sur sa propre ligne au-dessus */
.gf-domain-bg textarea,
.gf-domain-bg input[type="text"] {
    grid-column: 1 / -1 !important; /* S'étire sur toutes les colonnes */
    width: 100% !important;
    margin: 0 !important;
    min-height: 80px !important;
}

/* Le bouton "Chercher" retrouve une taille normale et se place à gauche en bas */
.gf-domain-bg button#btnCheckAvailability,
.gf-domain-bg .domain-check-availability {
    grid-column: 1 / 2 !important; /* Se place dans la première colonne */
    position: static !important; 
    margin: 0 !important;
    height: auto !important; /* Retire l'étirement monstrueux */
    min-height: 0 !important; /* Annule l'ancienne hauteur forcée */
    padding: 12px 24px !important; /* Hauteur identique à "Parcourez les offres" */
        width: 150px !important;
    border-radius: 6px !important;
    transform: none !important;
    font-weight: bold !important;
    white-space: nowrap !important;
}

/* La case "Recherche sécurisée" se place juste à droite du bouton */
.gf-domain-bg label {
    grid-column: 2 / 3 !important; /* Se place dans la deuxième colonne */
    margin: 0 !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important; /* Un petit espace pour décoller le texte de la case */
}

/* =========================================================
   16. PAGE DE TRANSFERT DE DOMAINE (Dark Mode & Alignement)
   ========================================================= */

/* 1. Éliminer la redondance : On cache le conteneur du 2e gros titre */
#order-standard_cart .cart-body > .text-center {
    display: none !important; 
}

/* S'assurer que le bouton dans le formulaire reste visible et s'aligne à droite */
#frmDomainTransfer .text-center {
    display: block !important;
    text-align: right !important;
}

/* 2. Le pied du formulaire : On redonne de l'oxygène au bouton ! */
#frmDomainTransfer .panel-footer,
#frmDomainTransfer .card-footer,
#frmDomainTransfer .bg-light,
#frmDomainTransfer .bg-white {
    background-color: transparent !important;
    background: transparent !important;
    border-top: 1px solid #333333 !important;
    padding: 25px !important; /* 25 pixels d'espace de TOUS les côtés (Fini l'étouffement) */
}

/* 3. Le bouton "Ajouter au panier" : Texte blanc pur et élégance */
#frmDomainTransfer .btn,
#frmDomainTransfer button[type="submit"] {
    color: #ffffff !important; /* Force le texte en blanc */
    font-weight: bold !important;
    padding: 12px 25px !important; /* Lui donne une belle taille homogène */
}

/* =========================================================
   17. LOGO GREYFOX STUDIO
   ========================================================= */

/* Remplacer le texte natif par ton image de logo */
.navbar-brand, .logo {
    background-image: url('https://clients.greyfoxstudio.ca/assets/img/logo-white.png') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center left !important;
    color: transparent !important; /* Cache le texte s'il y en a un */
    min-width: 200px !important; /* Ajuste selon la largeur de ton logo */
    min-height: 50px !important; /* Ajuste pour qu'il respire bien */
}

/* Cache l'ancienne image si le thème en forçait une */
.navbar-brand img, .logo img {
    display: none !important;
}

/* =========================================================
   18. CORRECTION FANTÔME (Rectangle jaune de Transfert)
   ========================================================= */

/* 1. Rendre le conteneur du Captcha et les alertes transparents */
#frmDomainTransfer .captcha-container,
#frmDomainTransfer .alert,
#frmDomainTransfer .alert-warning,
.domain-transfer-info {
    background-color: transparent !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: #e0e0e0 !important; /* Rend le texte lisible s'il y en a un */
    padding: 0 !important;
    margin-bottom: 15px !important;
}

/* 2. Cacher complètement la boîte si elle est vide */
#frmDomainTransfer .captcha-container:empty {
    display: none !important;
}


/* =========================================================
   19. PAGE DU PANIER (Vérifier & commander)
   ========================================================= */

/* 1. Éliminer la grosse boîte blanche des articles / panier vide */
#order-standard_cart .view-cart-items,
#order-standard_cart .view-cart-empty,
#order-standard_cart .view-cart-items .bg-white,
#order-standard_cart .cart-body .bg-white {
    background-color: #1e1e1e !important; /* Ton gris anthracite */
    background: #1e1e1e !important;
    border: 1px solid #333333 !important;
    border-radius: 6px !important;
    color: #e0e0e0 !important;
}

/* Rendre le texte "Votre panier est vide" bien lisible */
#order-standard_cart .view-cart-empty {
    color: #ffffff !important;
    font-size: 18px !important;
    padding: 40px !important;
}

/* S'assurer que les futurs articles dans le panier ont des bordures propres */
#order-standard_cart .view-cart-items .item {
    border-bottom: 1px solid #333333 !important;
    color: #e0e0e0 !important;
}

/* 2. Réparer le bouton "Appliquer le code promotionnel" */
#order-standard_cart .promo-code-btn,
#order-standard_cart a.btn-default.text-success {
    background-color: #2a2a2a !important; /* Fond sombre */
    color: #FF6600 !important; /* Texte orange */
    border: 1px solid #FF6600 !important; /* Bordure orange pour le style */
    border-radius: 6px !important;
    text-shadow: none !important;
    box-shadow: none !important;
}

#order-standard_cart .promo-code-btn:hover,
#order-standard_cart a.btn-default.text-success:hover {
    background-color: #FF6600 !important;
    color: #ffffff !important;
}

/* 3. Le bouton final "Passer la commande" (Call to action principal !) */
#btnCompleteOrder, 
#order-standard_cart .btn-checkout {
    background-color: #FF6600 !important; /* Fond solidement orange */
    color: #ffffff !important; /* Texte blanc pur */
    border: none !important;
    border-radius: 6px !important;
    font-weight: bold !important;
    font-size: 20px !important;
    padding: 15px 20px !important;
    text-shadow: none !important;
    transition: background-color 0.2s ease !important;
}

#btnCompleteOrder:hover, 
#order-standard_cart .btn-checkout:hover {
    background-color: #cc5200 !important; /* Orange plus foncé au survol */
}

/* S'assurer que la boîte du résumé de commande reste propre */
#order-standard_cart .ordersummary {
    background-color: #1e1e1e !important;
    border: 1px solid #333333 !important;
}

/* =========================================================
   19.1 CORRECTION EXTRÊME : Bouton Code Promo
   ========================================================= */

#order-standard_cart #btnShowPromoCode,
#order-standard_cart .view-cart-promo .btn,
#order-standard_cart .view-cart-promo button,
#order-standard_cart button.btn-link {
    background-color: #2a2a2a !important;
    background: #2a2a2a !important; /* Force le retrait du blanc */
    background-image: none !important;
    color: #FF6600 !important;
    border: 1px solid #FF6600 !important;
    border-radius: 6px !important;
    padding: 10px 15px !important;
    text-decoration: none !important;
    display: inline-block !important;
}

#order-standard_cart #btnShowPromoCode:hover,
#order-standard_cart .view-cart-promo .btn:hover {
    background-color: #FF6600 !important;
    background: #FF6600 !important;
    color: #ffffff !important;
}

/* =========================================================
   19.2 CORRECTION : Onglets (Code Promo / Estimer les taxes)
   ========================================================= */

/* L'onglet en état normal */
#order-standard_cart .view-cart-tabs .nav-tabs > li > a,
#order-standard_cart .view-cart-tabs .nav-tabs .nav-link {
    background-color: #2a2a2a !important; /* Fond gris foncé */
    color: #ffffff !important; /* Texte blanc */
    border: 1px solid #333333 !important;
    border-radius: 6px 6px 0 0 !important;
    margin-right: 5px !important;
}

/* L'onglet "Actif" (celui qui est actuellement sélectionné) */
#order-standard_cart .view-cart-tabs .nav-tabs > li.active > a,
#order-standard_cart .view-cart-tabs .nav-tabs > li > a.active,
#order-standard_cart .view-cart-tabs .nav-tabs .nav-link.active {
    background-color: #1e1e1e !important; /* Gris très sombre pour fusionner avec le fond */
    color: #FF6600 !important; /* Texte Orange GreyFox */
    border: 1px solid #FF6600 !important; /* Bordure orange */
    border-bottom: 1px solid #1e1e1e !important; /* Fait disparaître la ligne du bas */
}

/* On enlève la vieille bordure blanche sous l'onglet */
#order-standard_cart .view-cart-tabs .nav-tabs {
    border-bottom: 1px solid #FF6600 !important; /* Ligne orange qui relie l'onglet */
}

/* ---------------------------------------------------
   CORRECTIONS MODE SOMBRE - CONFIGURATION DES DOMAINES
------------------------------------------------------ */

/* 1. Correction du fond blanc derrière les titres (Domaine et Serveurs DNS) */
.sub-heading span,
h3.strike-through span,
.headline span,
.domain-config-title span {
    background-color: #121212 !important; /* Remplace par le code couleur exact de ton fond noir si ce n'est pas le bon */
    color: #ffffff !important;
}

/* 2. Correction de la bande de prix blanche dans les options (Gestion DNS, ID Protection, etc.) */
.panel-addon .panel-footer,
.domain-addon-pricing,
.addon-box .price-block {
    background-color: #242424 !important; /* Change le fond blanc pour un gris foncé */
    color: #ffffff !important; /* Met le texte "GRATUIT !" en blanc */
    border-top: 1px solid #333333 !important; /* Adoucit la ligne de séparation */
}

/* 3. S'assurer que le texte dans cette bande est bien visible */
.panel-addon .panel-footer span,
.panel-addon .panel-footer strong,
.domain-addon-pricing span,
.domain-addon-pricing strong {
    color: #ffffff !important;
}

/* 4. Retirer les petites bordures blanches ou grises autour des boîtes d'options pour que ça "blend" mieux */
.panel-addon,
.addon-box {
    border-color: #333333 !important;
}

/* Forcer la couleur des bandes "GRATUIT" dans les options de domaines */
.domain-addon-pricing,
.panel-addon .panel-footer,
.domain-selection-options .panel-footer,
.addon-box .price-block,
div.domain-addon-pricing {
    background-color: #1a1a1a !important; /* Un gris très foncé, presque noir */
    color: #ffffff !important; /* Texte en blanc */
    border-top: 1px solid #333333 !important;
}

/* S'assurer que le texte à l'intérieur ne reste pas gris pâle */
.domain-addon-pricing span,
.domain-addon-pricing strong,
.panel-addon .panel-footer span {
    color: #ffffff !important;
}

/* ---------------------------------------------------
   AJUSTEMENTS BOÎTES D'OPTIONS (ADDONS) DOMAINES
------------------------------------------------------ */

/* 1. Faire "respirer" le haut de la boîte (Case à cocher et Titre) */
.panel-addon .panel-body,
.addon-box .panel-body,
div[data-addon] .panel-body {
    padding-top: 25px !important; /* Ajoute de l'espace à l'intérieur, en haut de la boîte */
}

/* S'assurer que le label lui-même a de l'espace si le padding ne suffit pas */
.panel-addon label,
.addon-box label {
    margin-top: 10px !important;
    display: inline-block !important; 
}

/* 2. Méthode "nucléaire" pour forcer le fond de la bande de prix récalcitrante */
.panel-addon .panel-footer,
.panel-addon div[class*="footer"],
.panel-addon div[class*="bg-light"],
.panel-addon div[class*="price"],
.addon-box .panel-footer {
    background: #1a1a1a !important; /* Remplace le fond blanc/gris par du gris très foncé */
    background-color: #1a1a1a !important;
    color: #ffffff !important; /* Texte en blanc */
    border-top: 1px solid #333333 !important;
}

/* Forcer le texte à l'intérieur à être blanc peu importe sa balise */
.panel-addon .panel-footer *,
.panel-addon div[class*="bg-light"] *,
.addon-box .panel-footer * {
    color: #ffffff !important;
}


/* ---------------------------------------------------
   CORRECTIONS MODE SOMBRE - PAGE DU PANIER (VIEW CART)
------------------------------------------------------ */

/* 1. Remplacer le gros fond blanc de la liste des articles */
.view-cart-items .item,
.view-cart-items .view-cart-items-header,
#order-standard_cart .view-cart-items .item {
    background-color: #1a1a1a !important; /* Gris très foncé / presque noir */
    border-top: 1px solid #333333 !important;
    border-bottom: 1px solid #333333 !important;
}

/* 2. Forcer le texte principal (titres et prix) en blanc */
.view-cart-items .item span,
.view-cart-items .item div,
.view-cart-items .item strong {
    color: #ffffff !important;
}

/* 3. Ajuster le texte secondaire (comme le nom de domaine en plus petit) */
.view-cart-items .item .item-domain,
.view-cart-items .item .text-muted,
.view-cart-items .item .item-title span {
    color: #cccccc !important; /* Gris clair pour garder une petite hiérarchie visuelle */
}

/* 4. Enlever tout fond blanc résiduel dans le conteneur principal du panier */
.view-cart-items {
    background-color: transparent !important;
}

/* ---------------------------------------------------
   CORRECTIONS MODE SOMBRE - PAGE DE PAIEMENT (CHECKOUT)
------------------------------------------------------ */

/* 1. Correction des blocs de sélection de compte (Blanc et Gris) */
.checkout-user-details .radio, 
.checkout-user-details .bg-light,
.checkout-user-details .bg-white,
.view-cart-user-details div[class*="bg-"],
.client-selection-container .panel,
div[data-role="checkout-user-details"] > div {
    background-color: #1a1a1a !important; /* Fond gris très foncé */
    color: #ffffff !important; /* Texte principal en blanc */
    border-color: #333333 !important;
}

/* Garder le texte secondaire (comme l'adresse) un peu plus effacé */
.checkout-user-details .text-muted,
.checkout-user-details span.text-muted {
    color: #bbbbbb !important;
}

/* 2. Correction de la boîte "Total à payer aujourd'hui" (Fond vert pâle) */
.alert-success {
    background-color: #1a1a1a !important;
    border: 1px solid #333333 !important;
    color: #ffffff !important;
}
/* Forcer tout le texte de cette boîte en blanc */
.alert-success *, .alert-success h1, .alert-success h2, .alert-success h3 {
    color: #ffffff !important;
}

/* 3. Correction de l'avertissement de sécurité IP au bas (Fond jaune pâle) */
.alert-warning, 
.alert-info {
    background-color: #1a1a1a !important;
    border: 1px solid #333333 !important;
    color: #cccccc !important; /* Un peu plus gris pour contraster avec le total */
}
/* Forcer l'icône de cadenas et le texte à s'ajuster */
.alert-warning *, .alert-info *, .alert-warning i {
    color: #cccccc !important;
}

/* ---------------------------------------------------
   CORRECTION ULTIME - SÉLECTION DE COMPTE CHECKOUT
------------------------------------------------------ */

.checkout-user-details > div,
.checkout-user-details .bg-white,
.checkout-user-details .bg-light,
#checkout-user-details-container > div,
.client-selection-item {
    background-color: #1a1a1a !important;
    background: #1a1a1a !important;
    border: 1px solid #333333 !important;
}

/* Forcer tout le texte principal en blanc */
.checkout-user-details label,
.checkout-user-details div,
.checkout-user-details strong {
    color: #ffffff !important;
}

/* Garder la petite adresse en dessous plus effacée */
.checkout-user-details .text-muted,
.checkout-user-details span,
.checkout-user-details small {
    color: #bbbbbb !important;
}

/* On s'assure que le petit badge "CAD" bleu reste lisible */
.checkout-user-details .badge {
    color: #ffffff !important;
}

/* ---------------------------------------------------
   CORRECTION FINALE - BOÎTES DE COMPTE WHMCS 8+
------------------------------------------------------ */

/* Boîte non-sélectionnée (Créer un compte) */
.account-select-container .account {
    background-color: #1a1a1a !important;
    border-color: #333333 !important;
}

/* Boîte sélectionnée (Miguel Bérubé) */
.account-select-container .account.active {
    background-color: #242424 !important; /* Un gris très légèrement plus clair pour la distinguer */
    border-color: #ed792e !important; /* J'ai mis le orange de ton site pour faire un bel effet de sélection ! */
}

/* Forcer le texte à l'intérieur en blanc */
.account-select-container .account strong,
.account-select-container .account span,
.account-select-container .account label {
    color: #ffffff !important;
}

/* Garder l'adresse un peu plus discrète en gris pâle */
.account-select-container .account .small,
.account-select-container .account .text-muted {
    color: #bbbbbb !important;
}

/* ---------------------------------------------------
   CORRECTION MODE SOMBRE - FENÊTRES POP-UP (MODALS)
------------------------------------------------------ */

/* Le fond principal de la fenêtre */
.modal-content {
    background-color: #1a1a1a !important; /* Gris très foncé */
    border: 1px solid #333333 !important;
}

/* Forcer tout le texte à l'intérieur en blanc pour qu'il soit lisible */
.modal-content h1,
.modal-content h2,
.modal-content h3,
.modal-content h4,
.modal-content h5,
.modal-content p,
.modal-content span,
.modal-content div {
    color: #ffffff !important;
}

/* Les lignes de séparation en haut et en bas dans le pop-up (si présentes) */
.modal-header,
.modal-footer {
    border-color: #333333 !important;
    background-color: transparent !important;
}

/* Le petit "X" en haut à droite pour fermer */
.modal-header .close,
button.close {
    color: #ffffff !important;
    text-shadow: none !important;
    opacity: 0.8 !important;
}

button.close:hover {
    opacity: 1 !important;
}

/* ---------------------------------------------------
   CORRECTIONS MODE SOMBRE - SYSTÈME DE TICKETS
------------------------------------------------------ */

/* 1. L'éditeur de texte principal (Markdown) */
.md-editor {
    border: 1px solid #333333 !important;
}
.md-editor > .md-header,
.md-editor > .md-preview {
    background-color: #242424 !important; /* Fond gris foncé pour la barre d'outils */
    border-bottom: 1px solid #333333 !important;
}
.md-editor > textarea {
    background-color: #1a1a1a !important; /* Fond très foncé pour la zone de texte */
    color: #ffffff !important; /* Texte tapé en blanc */
}

/* 2. Les boutons de la barre d'outils de l'éditeur */
.md-editor > .md-header .btn-default {
    background-color: #1a1a1a !important;
    border-color: #333333 !important;
    color: #ffffff !important;
}
.md-editor > .md-header .btn-default:hover {
    background-color: #333333 !important;
}

/* 3. Champ d'ajout de pièce jointe (Upload) */
.fileinput .form-control {
    background-color: #1a1a1a !important;
    border-color: #333333 !important;
    color: #ffffff !important;
}
.fileinput .input-group-addon {
    background-color: #242424 !important;
    border-color: #333333 !important;
    color: #ffffff !important;
}

/* ---------------------------------------------------
   CORRECTIONS MODE SOMBRE - BILLETS D'ASSISTANCE
------------------------------------------------------ */

/* 1. Zone de texte principale de l'éditeur Markdown */
.md-editor textarea.md-input,
.md-editor > textarea {
    background-color: #1a1a1a !important; /* Gris très foncé / Noir */
    color: #ffffff !important; /* Texte en blanc */
    border: none !important;
}

/* 2. Petite barre de statut au bas de l'éditeur (lines: 0 words: 0) */
.md-editor > .md-footer,
.md-editor-footer {
    background-color: #242424 !important; /* Un peu plus pâle pour faire une belle division */
    border-top: 1px solid #333333 !important;
    color: #aaaaaa !important; /* Texte discret */
}

/* 3. Champ d'ajout de pièce jointe (Le gros rectangle blanc) */
.fileinput .form-control,
.fileinput-preview,
.fileinput-new,
.fileinput .uneditable-input {
    background-color: #1a1a1a !important;
    background: #1a1a1a !important;
    color: #ffffff !important;
    border-color: #333333 !important;
}

/* 4. Le bouton "Browse" collé au champ de pièce jointe */
.fileinput .input-group-addon.btn-default,
.fileinput .btn-default.btn-file {
    background-color: #242424 !important;
    color: #ffffff !important;
    border-color: #333333 !important;
    text-shadow: none !important;
}
.fileinput .btn-default.btn-file:hover {
    background-color: #333333 !important;
}
/* ---------------------------------------------------
   RÉPARATION CHIRURGICALE - BILLETS D'ASSISTANCE
------------------------------------------------------ */

/* 1. Protéger les icônes contre la police Barlow globale */
.md-editor .btn span, 
.md-editor .btn i,
.md-editor span[class*="fa"],
.md-editor span[class*="glyphicon"] {
    font-family: "Font Awesome 5 Free", "Font Awesome 6 Free", "FontAwesome" !important;
    font-weight: 900 !important;
    color: #ffffff !important;
}

/* 2. Tuer le rectangle blanc de la pièce jointe (Sans casser le reste) */
.custom-file-label,
.fileinput .form-control {
    background-color: #1a1a1a !important;
    color: #ffffff !important;
    border: 1px solid #333333 !important;
}

/* Le petit bouton "Browse" / "Ajouter" collé au champ */
.custom-file-label::after,
.fileinput .input-group-addon {
    background-color: #242424 !important;
    color: #ffffff !important;
    border-left: 1px solid #333333 !important;
}

/* 3. Assombrir l'éditeur principal si ce n'était pas resté */
.md-editor textarea {
    background-color: #1a1a1a !important;
    color: #ffffff !important;
    border: none !important;
}

/* ---------------------------------------------------
   CORRECTION TABLEAU DE BORD - BANDES BLANCHES (FOOTERS)
------------------------------------------------------ */
.client-home-panels .panel-footer,
.client-home-panels .card-footer,
.client-home-panels .bg-white,
.client-home-panels .bg-light {
    background-color: #1e1e1e !important; 
    background: #1e1e1e !important;
    border-top: 1px solid #333333 !important;
    border-bottom: none !important;
    border-left: none !important;
    border-right: none !important;
    color: #e0e0e0 !important;
}

/* S'assurer que les petits liens dans ces zones restent aux couleurs de GreyFox */
.client-home-panels .panel-footer a,
.client-home-panels .card-footer a {
    color: #FF6600 !important;
}

.client-home-panels .panel-footer a:hover,
.client-home-panels .card-footer a:hover {
    color: #cc5200 !important;
    text-decoration: none !important;
}

/* ---------------------------------------------------
   CORRECTION TABLEAUX DE DONNÉES (SERVICES, FACTURES, ETC.)
------------------------------------------------------ */

/* Le fond global du tableau */
table.dataTable,
table.table-list,
.dataTables_wrapper .table {
    background-color: transparent !important;
    border-color: #333333 !important;
}

/* L'en-tête du tableau (Titres des colonnes) */
table.dataTable thead th,
table.table-list thead th,
.table-list th {
    background-color: #2a2a2a !important; /* Gris foncé */
    color: #ffffff !important;
    border-bottom: 2px solid #FF6600 !important; /* Ligne orange GreyFox */
    border-top: none !important;
}

/* Les lignes du tableau (Remplacer le blanc et gris pâle) */
table.dataTable tbody tr,
table.dataTable tbody tr:nth-of-type(odd),
table.dataTable tbody tr:nth-of-type(even),
table.table-list tbody tr,
.table-striped tbody tr:nth-of-type(odd) {
    background-color: #1e1e1e !important;
    background: #1e1e1e !important;
    color: #e0e0e0 !important;
}

/* Effet au survol d'une ligne du tableau */
table.dataTable tbody tr:hover,
table.table-list tbody tr:hover {
    background-color: #2a2a2a !important;
    background: #2a2a2a !important;
}

/* Les cellules individuelles */
table.dataTable tbody td,
table.table-list tbody td {
    border-top: 1px solid #333333 !important;
    border-color: #333333 !important;
    vertical-align: middle !important;
}

/* Rendre les textes principaux dans le tableau blancs */
table.dataTable tbody td strong,
table.dataTable tbody td b,
table.dataTable tbody td span:not(.label) {
    color: #ffffff !important;
}

/* ---------------------------------------------------
   CORRECTION PAGINATION (Boutons 1, 2, Précédent, Suivant)
------------------------------------------------------ */

/* Boutons inactifs normaux */
.pagination > li > a,
.pagination > li > span,
.dataTables_paginate .pagination > li > a {
    background-color: #1e1e1e !important;
    color: #FF6600 !important;
    border-color: #333333 !important;
}

/* Boutons au survol */
.pagination > li > a:hover,
.pagination > li > span:hover,
.dataTables_paginate .pagination > li > a:hover {
    background-color: #2a2a2a !important;
    color: #ffffff !important;
    border-color: #FF6600 !important;
}

/* Bouton actif (Page actuelle) */
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover {
    background-color: #FF6600 !important;
    color: #ffffff !important;
    border-color: #FF6600 !important;
}

/* Boutons désactivés (Ex: "Précédent" quand on est à la page 1) */
.pagination > .disabled > a,
.pagination > .disabled > a:hover,
.pagination > .disabled > span {
    background-color: #1a1a1a !important;
    color: #666666 !important;
    border-color: #333333 !important;
}

/* ---------------------------------------------------
   LES DERNIERS BASTIONS BLANCS (TABLEAUX & ACCUEIL)
------------------------------------------------------ */

/* 1. Lignes des tableaux (Factures, Services, Domaines) */
.table > tbody > tr > td,
.table > tbody > tr > th,
.table-striped tbody tr:nth-of-type(odd) td,
.table-striped tbody tr:nth-of-type(even) td,
table.dataTable tbody tr td {
    background-color: #1e1e1e !important;
    background: #1e1e1e !important;
    border-color: #333333 !important;
    color: #e0e0e0 !important;
    vertical-align: middle !important;
}

/* Forcer le texte noir à l'intérieur en blanc/gris */
.table > tbody > tr > td *,
table.dataTable tbody tr td * {
    color: #e0e0e0 !important;
}

/* Protéger les badges de couleur (ex: "Actif" ou "Payée") */
.table > tbody > tr > td .label,
.table > tbody > tr > td .badge,
table.dataTable tbody tr td .label,
table.dataTable tbody tr td .badge {
    color: #ffffff !important;
}

/* Effet au survol des lignes */
.table > tbody > tr:hover > td,
table.dataTable tbody tr:hover td {
    background-color: #2a2a2a !important;
    background: #2a2a2a !important;
}

/* 2. Lignes à l'intérieur du tableau de bord (Hébergement, etc.) */
.list-group-item,
.client-home-panels .list-group-item {
    background-color: #1e1e1e !important;
    background: #1e1e1e !important;
    border-color: #333333 !important;
    color: #e0e0e0 !important;
}

/* Forcer le texte de ces lignes en blanc */
.list-group-item strong, 
.list-group-item a,
.client-home-panels .list-group-item strong,
.client-home-panels .list-group-item a {
    color: #ffffff !important;
}

/* 3. Pieds de page du tableau de bord (Bandes "Voir plus...") */
.panel-footer,
.card-footer,
.client-home-panels .panel-footer,
.client-home-panels .card-footer {
    background-color: #1a1a1a !important;
    background: #1a1a1a !important;
    border-top: 1px solid #333333 !important;
}
/* ---------------------------------------------------
   SOLUTION DÉFINITIVE : SYMBOLES UNIVERSELS
------------------------------------------------------ */

/* 1. On détruit les vieux carrés cassés de WHMCS */
.md-editor .md-header .btn span,
.md-editor .md-header .btn i {
    display: none !important;
}

/* 2. On prépare nos propres icônes textuelles */
.md-editor .md-header .btn::before {
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 15px !important;
    font-weight: bold !important;
    color: #ffffff !important;
    line-height: 1 !important;
}

/* 3. On injecte des symboles natifs (Ils marchent partout, 0 bug possible) */
.md-editor .btn[data-handler="bootstrap-markdown-cmdBold"]::before { content: "B" !important; }
.md-editor .btn[data-handler="bootstrap-markdown-cmdItalic"]::before { content: "I" !important; font-style: italic !important; }
.md-editor .btn[data-handler="bootstrap-markdown-cmdHeading"]::before { content: "H" !important; }
.md-editor .btn[data-handler="bootstrap-markdown-cmdUrl"]::before { content: "🔗" !important; font-weight: normal !important; }
.md-editor .btn[data-handler="bootstrap-markdown-cmdImage"]::before { content: "📷" !important; font-weight: normal !important; }
.md-editor .btn[data-handler="bootstrap-markdown-cmdList"]::before { content: "☰" !important; font-weight: normal !important; }
.md-editor .btn[data-handler="bootstrap-markdown-cmdListO"]::before { content: "1." !important; }
.md-editor .btn[data-handler="bootstrap-markdown-cmdCode"]::before { content: "</>" !important; }
.md-editor .btn[data-handler="bootstrap-markdown-cmdQuote"]::before { content: "❝" !important; }
.md-editor .btn[data-handler="bootstrap-markdown-cmdFullscreen"]::before { content: "⛶" !important; font-weight: normal !important; font-size: 18px !important; }

/* 4. Le bouton Prévisualiser (On remplace son texte) */
.md-editor .btn[data-handler="bootstrap-markdown-cmdPreview"] {
    font-size: 0 !important; /* Cache le vieux texte */
}
.md-editor .btn[data-handler="bootstrap-markdown-cmdPreview"]::before { 
    content: "👁 Prévisualiser" !important; 
    font-size: 14px !important;
}

/* ---------------------------------------------------
   CORRECTION MODAL - GUIDE DE MISE EN FORME
------------------------------------------------------ */

/* Cibler les blocs d'exemples de code dans la fenêtre */
.modal-body code,
.modal-body pre,
.modal-body kbd {
    background-color: #2a2a2a !important; /* Fond gris légèrement plus pâle que le fond principal */
    color: #e0e0e0 !important; /* Texte gris clair très lisible */
    border: 1px solid #444444 !important; /* Petite bordure pour délimiter l'exemple */
    border-radius: 4px !important;
    padding: 10px !important;
    text-shadow: none !important;
    display: block !important;
    white-space: pre-wrap !important; /* Empêche le texte de dépasser de la boîte */
}

/* S'assurer que le texte normal ou grisé à l'intérieur est blanc */
.modal-body,
.modal-body p,
.modal-body li,
.modal-body .text-muted {
    color: #ffffff !important;
}

/* Fixer la couleur des petites bordures du tableau d'exemple Markdown */
.modal-body table,
.modal-body th,
.modal-body td {
    border-color: #444444 !important;
}

/* ---------------------------------------------------
   CORRECTION EXTRÊME - PRODUITS ADDITIONNELS (BAZOOKA 2.0)
------------------------------------------------------ */

/* 1. Tuer le fond blanc avec une précision chirurgicale */
body #order-standard_cart .row .panel.panel-default .panel-body,
body #order-standard_cart div[class*="addon"] .panel-body,
body #order-standard_cart .addon-products .panel-body,
body #order-standard_cart .product-info {
    background-color: #1e1e1e !important;
    background: #1e1e1e !important;
    border: none !important;
}

/* 2. Rendre le texte gris pâle (qui était invisible) bien lisible */
body #order-standard_cart .row .panel.panel-default .panel-body,
body #order-standard_cart .row .panel.panel-default .panel-body p,
body #order-standard_cart .row .panel.panel-default .panel-body span,
body #order-standard_cart .row .panel.panel-default .panel-body div,
body #order-standard_cart .addon-products .panel-body * {
    color: #cccccc !important;
    text-shadow: none !important;
}

/* 3. Assombrir les menus déroulants dans ces boîtes spécifiques */
body #order-standard_cart .row .panel.panel-default .panel-body select,
body #order-standard_cart .addon-products select {
    background-color: #2a2a2a !important;
    background: #2a2a2a !important;
    color: #ffffff !important;
    border: 1px solid #FF6600 !important; /* Petite bordure orange GreyFox pour le style */
    padding: 8px !important;
}

/* ---------------------------------------------------
   CORRECTION - BARRE DE FORCE DU MOT DE PASSE
------------------------------------------------------ */

/* Le fond de la barre de progression (quand elle est vide) */
.progress,
.password-strength-meter .progress,
div[data-role="password-strength-meter"] {
    background-color: #1a1a1a !important; /* Fond gris très foncé */
    background: #1a1a1a !important;
    border: 1px solid #333333 !important;
    border-radius: 4px !important;
    box-shadow: none !important;
}

/* S'assurer que le texte à l'intérieur (ex: "Faible", "Fort") reste lisible */
.progress-bar,
.password-strength-meter .progress-bar {
    color: #ffffff !important;
    font-weight: bold !important;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5) !important; /* Aide à lire sur le rouge/jaune/vert */
}

/* =========================================================
   17. LOGO GREYFOX STUDIO
   ========================================================= */

/* Remplacer le texte natif par ton image de logo */
.navbar-brand, .logo {
    background-image: url('https://clients.greyfoxstudio.ca/assets/img/logo-white.png') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center left !important;
    min-width: 200px !important; /* Ajuste selon la largeur de ton logo */
    min-height: 50px !important; /* Ajuste pour qu'il respire bien */
}

/* Tuer le texte natif "GreyFox Studio" définitivement (Même au survol) */
.navbar-brand, .logo, 
.navbar-brand:hover, .logo:hover, 
.navbar-brand:focus, .logo:focus {
    color: transparent !important;
    font-size: 0 !important; /* Désintègre le texte physiquement */
}

/* Cache l'ancienne image si le thème en forçait une */
.navbar-brand img, .logo img {
    display: none !important;
}


/* --- OVERRIDE POUR BLANCHIR LA FACTURE NEXUS --- */

/* 1. Blanchir les grosses boîtes (Cards) et leurs bordures */
.invoice-container .card, 
.invoice-container .card.bg-default {
    background-color: #ffffff !important;
    border: 1px solid #dddddd !important;
}

/* 2. Éclaircir les en-têtes des boîtes (Items et Grand livre) et forcer le texte foncé */
.invoice-container .card-header, 
.invoice-container .card-title.bg-info {
    background-color: #f8f8f8 !important; /* Fond gris très clair */
    color: #222222 !important; /* Texte presque noir */
    border-bottom: 1px solid #dddddd !important;
}

/* 3. Forcer tout le texte de la facture en gris foncé/noir pour la lisibilité */
.invoice-container, 
.invoice-container p, 
.invoice-container address, 
.invoice-container .small-text, 
.invoice-container .table td {
    color: #444444 !important; /* Gris foncé */
}

/* 4. S'assurer que les mots en gras et les totaux ressortent bien */
.invoice-container strong, 
.invoice-container .total-row td {
    color: #111111 !important; /* Noir pur */
    background-color: #ffffff !important;
}
/* --- FIN DE LA CORRECTION --- */

/* 5. Blanchir l'intérieur des tableaux (Items et Grand livre) */
.invoice-container .table,
.invoice-container .table tr,
.invoice-container .table th,
.invoice-container .table td {
    background-color: #ffffff !important;
    color: #444444 !important; /* Force le texte gris foncé */
    border-color: #eeeeee !important; /* Lignes de séparation discrètes */
}

/* 6. Blanchir la boîte de succès et foncer son texte */
.invoice-container .panel-body,
.invoice-container .card-body {
    background-color: #ffffff !important;
    color: #222222 !important; /* Texte presque noir */
    font-weight: bold !important;
}

/* 7. Foncer le texte du message de succès */
.invoice-container .card-body,
.invoice-container .card-body p,
.invoice-container .panel-body,
.invoice-container .panel-body p {
    color: #222222 !important;
}

/* 8. Foncer les étiquettes en gras (Sous-total, Taxes, Total) dans le tableau */
.invoice-container .table .total-row td,
.invoice-container .table .total-row td strong,
.invoice-container .table td strong {
    color: #222222 !important;
}

/* --- OVERRIDE EXTRÊME POUR LE TEXTE DU PANNEAU DE SUCCÈS --- */
.invoice-container .panel-body,
.invoice-container .panel-body *,
.invoice-container .alert,
.invoice-container .alert * {
    color: #222222 !important;
}


/* --- BAZOOKA CSS POUR LE MESSAGE DE SUCCÈS --- */
html body .invoice-container div.panel.panel-success div.panel-body,
html body .invoice-container div.panel.panel-success div.panel-body p,
html body .invoice-container div.card.bg-success div.card-body,
html body .invoice-container div.card.bg-success div.card-body p,
html body .invoice-container div.panel-body.text-center {
    color: #111111 !important; /* Noir très foncé */
    opacity: 1 !important; /* Enlève tout effet délavé ou transparent */
    font-weight: 600 !important; /* Rend le texte un tout petit peu plus épais pour la lisibilité */
}


/* --- DESTRUCTION DES BOÎTES BLANCHES DU PANIER (STANDARD CART) --- */

/* 1. Rendre tous les conteneurs principaux transparents pour laisser le Dark Mode agir */
#order-standard_cart .cart-sidebar,
#order-standard_cart .cart-body,
#order-standard_cart .domain-checker-bg,
#order-standard_cart .domain-promo-box,
#order-standard_cart .panel,
#order-standard_cart .card,
#order-standard_cart .categories-collapsed {
    background-color: transparent !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* 2. Forcer tout le texte principal, les titres et paragraphes en blanc/gris clair */
#order-standard_cart,
#order-standard_cart h1,
#order-standard_cart h2,
#order-standard_cart h3,
#order-standard_cart h4,
#order-standard_cart p,
#order-standard_cart span:not(.badge):not(.btn),
#order-standard_cart .domain-promo-box p,
#order-standard_cart .cart-sidebar .panel-title,
#order-standard_cart .cart-sidebar .list-group-item {
    color: #eeeeee !important;
}

/* 3. Assombrir légèrement les éléments du menu latéral pour bien les découper */
#order-standard_cart .cart-sidebar .list-group-item {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* 4. Garder un fond noir léger et propre pour les champs de texte afin qu'on puisse y écrire */
#order-standard_cart .form-control,
#order-standard_cart input[type="text"],
#order-standard_cart textarea {
    background-color: #222222 !important;
    color: #ffffff !important;
    border: 1px solid #444444 !important;
}

/* --- BAZOOKA FINAL POUR LE FOND BLANC DU PANIER --- */
html body div#order-standard_cart div.cart-body,
html body div#order-standard_cart div.cart-body .domain-checker-container,
html body div#order-standard_cart div.cart-body .domain-checker-bg,
html body div#order-standard_cart div.cart-body .gf-domain-bg {
    background-color: transparent !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
}
/* --- FIN DE L'INTÉGRATION DARK MODE --- */

/* --- L'EXPLOSIF POUR LA CAGE BLANCHE EXTERNE --- */

/* Cette règle trouve automatiquement le conteneur PARENT inconnu du panier et le rend transparent */
div:has(> #order-standard_cart),
div:has(> div > #order-standard_cart),
div.card:has(#order-standard_cart),
body .main-content,
body .clientarea-content {
    background-color: transparent !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Double sécurité sur le panier lui-même au cas où */
#order-standard_cart,
#order-standard_cart .cart-body {
    background-color: transparent !important;
    background: transparent !important;
}


/* --- LA FRAPPE CHIRURGICALE POUR LA PAGE DOMAINE --- */
#order-standard_cart .domain-selection-options,
#order-standard_cart .domain-selection-options .option {
    background-color: transparent !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: #eeeeee !important;
}

/* S'assurer que le texte des boutons radio est bien blanc/gris pâle */
#order-standard_cart .domain-selection-options .option label {
    color: #eeeeee !important;
}

/* --- CORRECTION DU "www." INVISIBLE --- */
#order-standard_cart .input-group-addon,
#order-standard_cart .input-group-text {
    background-color: #333333 !important; /* Fond gris foncé pour s'agencer au thème */
    color: #ffffff !important; /* Texte blanc bien visible */
    border: 1px solid #444444 !important; /* Bordure discrète */
}


/* --- SAUVETAGE DES CARTOUCHES D'ENCRE (MODE IMPRESSION) --- */
@media print {
    /* 1. Ajuster les marges de l'imprimante pour commencer tout en haut */
    @page {
        margin: 1cm;
    }

    /* 2. Détruire tout fond sombre et forcer une hauteur naturelle sans espacement invisible */
    html, body, .main-content, .clientarea-content, .client-area-box, #main-body {
        background-color: #ffffff !important;
        background: none !important;
        height: auto !important;
        min-height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* 3. Coller la facture au plafond et empêcher les sauts de page bizarres */
    .invoice-container {
        background-color: #ffffff !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
        page-break-before: avoid !important;
    }

    /* 4. Forcer absolument tout le texte à être noir pur */
    .invoice-container, 
    .invoice-container p, 
    .invoice-container strong, 
    .invoice-container span, 
    .invoice-container td, 
    .invoice-container th, 
    .invoice-container div, 
    .invoice-container address {
        color: #000000 !important;
    }

    /* 5. Garder des lignes grises propres pour les tableaux et boîtes */
    .invoice-container .card,
    .invoice-container .card-header,
    .invoice-container .panel,
    .invoice-container .panel-heading,
    .invoice-container .table,
    .invoice-container .table tr,
    .invoice-container .table td,
    .invoice-container .table th {
        background-color: #ffffff !important;
        border: 1px solid #cccccc !important;
    }
}
/* --- FIN DU SAUVETAGE D'ENCRE --- */


/* --- CORRECTION DU TITRE DE FACTURE INVISIBLE --- */
.invoice-container h1, 
.invoice-container h2, 
.invoice-container h3 {
    color: #111111 !important; /* Noir très foncé/presque noir pour un bon contraste */
}

/* --- 1. BOÎTE D'ALERTE (ROSE/JAUNE) EN ORANGE --- */
#main-body .alert-danger, 
#main-body .alert-warning,
.clientarea-content .alert-warning,
.clientarea-content .alert-danger,
div.alert.alert-warning {
    background-color: #f28b24 !important;
    color: #000000 !important;
    border-color: #d67a1f !important;
}
/* Forcer le texte à l'intérieur en noir */
#main-body .alert-danger *, 
#main-body .alert-warning *,
.clientarea-content .alert-warning * {
    color: #000000 !important;
}

/* --- 2. ONGLET ACTIF (BLANC -> GRIS FONCÉ) --- */
.nav-tabs > li.active > a, 
.nav-tabs > li.active > a:focus, 
.nav-tabs > li.active > a:hover,
.nav .nav-link.active,
.clientarea-content .nav-tabs li.active a {
    background-color: #333333 !important;
    color: #eeeeee !important;
    border: 1px solid #444444 !important;
    border-bottom-color: #333333 !important; /* Pour fusionner avec le bas */
}

/* --- 3. RECTANGLES AU BOUT DES CHAMPS (GRIS -> NOIR) --- */
.input-group-addon,
.input-group-text,
.input-group .input-group-text,
.client-area-box .input-group-addon {
    background-color: #000000 !important;
    color: #ffffff !important;
    border: 1px solid #444444 !important;
}

/* --- FINI LE GROS BOUTON VERT, BONJOUR L'ORANGE GREYFOX --- */
.btn-success,
a.btn-success,
button.btn-success {
    background-color: #ff6600 !important; /* Ton orange signature */
    border-color: #ff6600 !important;
    color: #ffffff !important;            /* Texte blanc */
    font-weight: bold !important;         /* Texte en gras */
    background-image: none !important;    /* Enlève les vieux dégradés de WHMCS */
    text-shadow: none !important;         /* Enlève l'ombrage du texte */
}

/* L'effet quand on passe la souris dessus (un orange un peu plus foncé) */
.btn-success:hover, 
.btn-success:focus, 
.btn-success:active {
    background-color: #e65c00 !important; 
    border-color: #e65c00 !important;
    color: #ffffff !important;
}


/* Changer la couleur des entêtes de tableau pour le mode sombre */
.table thead th,
.table thead td {
    color: #ff6600 !important;
}

/* Correction du menu mobile (cible exactement le bouton du header.tpl) */
button[data-target="#mainNavbar"] span.fa-bars::before {
    content: "\2630" !important; /* Le symbole universel ☰ */
    font-family: Arial, Helvetica, sans-serif !important; /* On écrase FontAwesome */
    font-weight: normal !important;
    font-size: 26px !important;
    color: #ffffff !important; /* En blanc pour qu'il soit visible */
    line-height: 1 !important;
}

/* Style du pied de page légal */
.custom-footer-legal {
    text-align: center;
    padding: 20px 0;
    color: #888888;
}
.custom-footer-legal .legal-links {
    margin-left: 15px;
    display: inline-block;
}
.custom-footer-legal a {
    color: #cccccc;
    text-decoration: none;
    transition: color 0.3s ease;
}
.custom-footer-legal a:hover {
    color: #ff6600; /* Ton orange GreyFox */
}
.custom-footer-legal .separator {
    color: #555555;
    margin: 0 10px;
}
@media (max-width: 768px) {
    .custom-footer-legal .legal-links {
        display: block;
        margin-left: 0;
        margin-top: 10px;
    }
}


/* 1. Fond de la boîte popover de notifications (Thème Nexus) */
.popover.popover-user-notifications,
.popover.popover-user-notifications .popover-inner,
.popover.popover-user-notifications .popover-body {
    background-color: #2b2b2b !important; /* Gris foncé, pas totalement noir */
    border-color: #444444 !important; /* Bordure discrète */
}

/* 2. Ciblage chirurgical du texte du message - Gris clair */
.popover.popover-user-notifications .client-alerts li a .message {
    color: #e0e0e0 !important; /* Gris clair pour le texte uniquement */
}

/* 3. Ciblage chirurgical de l'icône (le "i" dans le cercle) - TON ORANGE VIF */
.popover.popover-user-notifications .client-alerts li a i {
    color: #FF6600 !important; /* Orange vif exact du bouton "Mettre à jour" */
}

/* 4. Effet au survol de la souris (Ajustement subtil) */
.popover.popover-user-notifications .client-alerts li a:hover {
    background-color: #3b3b3b !important;
}
.popover.popover-user-notifications .client-alerts li a:hover .message {
    color: #ffffff !important; /* Texte devient blanc au survol */
}
/* Note: On ne change pas la couleur de l'icône au survol pour qu'elle reste orange */

/* 5. Colorer la petite flèche (triangle) au-dessus de la boîte */
.popover.bs-popover-bottom .arrow::after {
    border-bottom-color: #2b2b2b !important;
}
.popover.bs-popover-bottom .arrow::before {
    border-bottom-color: #444444 !important;
}

/* --- Style pour l'intégration du macaron SSL --- */

/* Conteneur principal qui aligne le prix et le macaron */
.prix-securite-container {
    display: flex;
    justify-content: space-between; /* Pousse le prix à gauche et le macaron à droite */
    align-items: center; /* Aligne verticalement au centre */
    margin-top: 25px; /* Espace après la liste à puces */
    margin-bottom: 25px; /* Espace avant le bouton commander */
    padding-left: 20px; /* Aligne le prix avec la liste */
    padding-right: 15px; /* Petit espace avec le bord droit */
}

/* Style pour le bloc de prix (montant + fréquence) */
.prix-details {
    display: flex;
    flex-direction: column; /* Empile le montant et la fréquence */
    color: #FFF;
    text-align: left;
}

.prix-montant {
    font-size: 24px;
    font-weight: bold;
}

.prix-frequence {
    font-size: 14px;
    opacity: 0.8; /* Légèrement transparent */
}

/* Style pour le macaron lui-même */
.ssl-badge {
    width: 75px; /* Taille du macaron */
    height: 75px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ssl-badge img {
    width: 100%;
    height: auto;
    /* L'effet de lueur (Glow) : assorti à l'orange de l'en-tête */
    filter: drop-shadow(0 0 10px rgba(230, 126, 34, 0.7));
    transition: filter 0.3s ease; /* Animation au survol */
}

/* Effet interactif au survol de la boîte */
.prix-securite-container:hover .ssl-badge img {
    filter: drop-shadow(0 0 15px rgba(230, 126, 34, 0.9)); /* Lueur plus forte */
}

/* --- Ajustements responsifs pour mobiles --- */
@media (max-width: 768px) {
    .prix-securite-container {
        flex-direction: column; /* Empile verticalement sur petit écran */
        text-align: center;
        padding-left: 0;
        padding-right: 0;
    }

    .prix-details {
        text-align: center;
        margin-bottom: 15px; /* Espace avant le macaron */
    }

    .ssl-badge {
        width: 65px; /* Macaron un peu plus petit sur mobile */
        height: 65px;
    }
}



/* 1. Éliminer la grosse zone bleue de fond */
.landing-page.ssl .validation-levels {
    background-color: transparent !important; /* Retire complètement la couleur bleue */
    background-image: none !important; /* Bloque les dégradés potentiels de WHMCS */
    /* Note : Si 'transparent' affiche un fond blanc en dessous, remplace 'transparent' par ton gris foncé : #222222 */
}

/* 2. S'assurer que le titre "Choisissez votre niveau..." est bien en blanc */
.landing-page.ssl .validation-levels h3 {
    color: #ffffff !important;
}

/* 3. Transformer les grosses boîtes blanches en boîtes "Dark Mode" */
.landing-page.ssl .validation-levels .item {
    background-color: #2b2b2b !important; /* Un beau gris foncé pour la boîte */
    border: 1px solid #444444 !important; /* Une bordure subtile */
}

/* 4. Rendre les petits textes à l'intérieur des boîtes lisibles (gris pâle) */
.landing-page.ssl .validation-levels .item p,
.landing-page.ssl .validation-levels .item span,
.landing-page.ssl .validation-levels .item div {
    color: #cccccc !important; 
}


/* 5. Transformer le fond blanc de la section détaillée en gris foncé */
.landing-page.ssl .detailed-info {
    background-color: #222222 !important; /* Ton gris foncé de fond */
}

/* 6. S'assurer que les titres et les paragraphes de cette section sont pâles */
.landing-page.ssl .detailed-info h2,
.landing-page.ssl .detailed-info h3,
.landing-page.ssl .detailed-info p {
    color: #cccccc !important; 
}

/* 7. Retirer le fond blanc de la carte (boîte d'accordéon) */
.landing-page.ssl #sslAccordion .card,
.landing-page.ssl #sslAccordion .card-body {
    background-color: #222222 !important; /* Ton fond gris foncé */
    border: none !important; /* Enlève la ligne de bordure de la boîte si elle dérange */
}

/* 8. S'assurer que tout le texte à l'intérieur de cette boîte reste pâle et lisible */
.landing-page.ssl #sslAccordion .card-body p,
.landing-page.ssl #sslAccordion .card-body ul,
.landing-page.ssl #sslAccordion .card-body h4,
.landing-page.ssl #sslAccordion .card-body .ideal {
    color: #cccccc !important; 
}

/* 9. Enlever le gros rectangle blanc sur le menu actif */
.landing-page.ssl .navbar-light .navbar-nav .nav-item.active .nav-link {
    background-color: transparent !important; /* Tue le fond blanc */
    color: #ff6600 !important; /* Met le texte en orange GreyFox pour montrer qu'il est sélectionné */
}

/* 10. (Optionnel) Au cas où il y aurait un fond blanc quand tu passes la souris (hover) */
.landing-page.ssl .navbar-light .navbar-nav .nav-item .nav-link:hover {
    background-color: transparent !important;
    color: #ff6600 !important;
}

/* 11. S'assurer que les autres liens inactifs restent blancs ou gris pâle */
.landing-page.ssl .navbar-light .navbar-nav .nav-item:not(.active) .nav-link {
    color: #cccccc !important;
}

/* Garder le prix et le sceau SSL côte à côte sur mobile */
@media (max-width: 767px) {
    .prix-securite-container {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: space-between !important;
        align-items: center !important;
    }
    
    /* On force le texte du prix à rester aligné à gauche */
    .prix-securite-container .prix-details,
    .prix-securite-container .product-pricing {
        text-align: left !important;
        width: auto !important;
        margin-bottom: 0 !important;
    }
}