/* ========================================================================== GC_ - Thème WHMCS "Axion" pour Global Création Fichier : custom.css Base : thème natif WHMCS "Twenty-One" (Bootstrap 4) ------------------------------------------------------------------------- ⚠️ Design générique de départ : ce fichier utilise des variables CSS pour QUE TU PUISSES remplacer facilement les couleurs/polices une fois que tu m'auras donné les vraies valeurs d'asso-axion.fr. Toutes les couleurs "réelles" sont centralisées dans le bloc :root ci-dessous : il suffit de modifier ces valeurs, tout le thème suit. ========================================================================== */ /* -------------------- 1. VARIABLES DE MARQUE (à ajuster) -------------------- */ :root { /* Couleurs principales - à remplacer par les vraies couleurs d'Axion */ --axion-primary: #2F6FED; /* Couleur d'action principale (boutons, liens) */ --axion-primary-dark: #1E4FBF; /* Variante foncée (hover) */ --axion-secondary: #101828; /* Couleur secondaire (header, footer, textes forts) */ --axion-accent: #22C55E; /* Couleur d'accent (badges, succès, mise en avant) */ /* Fonds et textes */ --axion-bg: #F7F9FC; /* Fond général du site */ --axion-surface: #FFFFFF; /* Fond des cartes / panneaux */ --axion-text: #1E2430; /* Texte principal */ --axion-text-muted: #6B7280; /* Texte secondaire / atténué */ --axion-border: #E5E9F0; /* Bordures discrètes */ /* Typographie */ --axion-font-heading: 'Poppins', 'Segoe UI', sans-serif; --axion-font-body: 'Inter', 'Segoe UI', sans-serif; /* Style général */ --axion-radius: 12px; /* Arrondi des boutons/cartes */ --axion-radius-sm: 8px; --axion-shadow: 0 4px 16px rgba(16, 24, 40, 0.08); --axion-shadow-hover: 0 8px 24px rgba(16, 24, 40, 0.12); } /* -------------------- 2. IMPORT DES POLICES -------------------- */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Poppins:wght@500;600;700&display=swap'); /* -------------------- 3. BASE -------------------- */ /* Correctif "sticky footer" : quand une page a peu de contenu (ex: Annonces), le footer doit quand même rester collé en bas du viewport au lieu de flotter juste après le contenu. On transforme en conteneur flex vertical qui occupe toute la hauteur de l'écran, puis on pousse le footer tout en bas avec margin-top:auto. */ html { height: 100%; } body { min-height: 100vh; display: flex; flex-direction: column; background-color: var(--axion-bg); color: var(--axion-text); font-family: var(--axion-font-body); font-size: 15px; line-height: 1.6; } /* Le contenu (tout ce qui n'est pas le footer) doit pouvoir grandir pour occuper l'espace disponible, afin que le footer soit repoussé en bas même sur une page courte. */ #footer, .footer { margin-top: auto; } h1, h2, h3, h4, h5, h6, .page-title, .panel-title { font-family: var(--axion-font-heading); font-weight: 600; color: var(--axion-secondary); } a { color: var(--axion-primary); transition: color 0.2s ease; } a:hover { color: var(--axion-primary-dark); } /* -------------------- 4. HEADER / NAVBAR -------------------- */ #header, .navbar, .navbar-default { background-color: var(--axion-secondary) !important; border: none; box-shadow: var(--axion-shadow); } .navbar .navbar-brand, .navbar .navbar-nav > li > a { color: #FFFFFF !important; font-family: var(--axion-font-heading); font-weight: 500; } .navbar .navbar-nav > li > a:hover, .navbar .navbar-nav > li.active > a { color: var(--axion-primary) !important; } /* Barre de connexion / recherche en haut si présente */ .navbar-top, .top-header { background-color: #0B1220; color: #CBD5E1; } /* -------------------- 5. BOUTONS -------------------- */ .btn, button, input[type="submit"] { border-radius: var(--axion-radius-sm); font-family: var(--axion-font-body); font-weight: 500; transition: all 0.2s ease; } .btn-primary, .btn-axion { background-color: var(--axion-primary); border-color: var(--axion-primary); } .btn-primary:hover, .btn-axion:hover { background-color: var(--axion-primary-dark); border-color: var(--axion-primary-dark); box-shadow: var(--axion-shadow-hover); transform: translateY(-1px); } .btn-success { background-color: var(--axion-accent); border-color: var(--axion-accent); } /* -------------------- 6. CARTES / PANNEAUX -------------------- */ .panel, .card, .well, .list-group, .pricing-table { background-color: var(--axion-surface); border: 1px solid var(--axion-border); border-radius: var(--axion-radius); box-shadow: var(--axion-shadow); } .panel-heading, .card-header { border-radius: var(--axion-radius) var(--axion-radius) 0 0 !important; font-family: var(--axion-font-heading); } /* Tableaux de facturation / produits */ .table thead th { background-color: var(--axion-bg); color: var(--axion-secondary); font-family: var(--axion-font-heading); border-bottom: 2px solid var(--axion-border); } /* -------------------- 7. FOOTER -------------------- */ /* ⚠️ margin-top: auto est défini plus haut (section BASE) pour le sticky footer : on ne le redéfinit pas ici pour ne pas l'écraser. */ #footer, .footer { background-color: var(--axion-secondary); color: #CBD5E1; padding: 40px 0 20px; } .footer a { color: #FFFFFF; } .footer a:hover { color: var(--axion-primary); } .footer .footer-heading { font-family: var(--axion-font-heading); color: #FFFFFF; font-weight: 600; margin-bottom: 12px; } /* -------------------- 8. FORMULAIRES -------------------- */ .form-control { border-radius: var(--axion-radius-sm); border: 1px solid var(--axion-border); } .form-control:focus { border-color: var(--axion-primary); box-shadow: 0 0 0 3px rgba(47, 111, 237, 0.15); } /* -------------------- 9. RESPONSIVE / MOBILE-FRIENDLY -------------------- */ @media (max-width: 991px) { .navbar-nav { background-color: var(--axion-secondary); } } @media (max-width: 767px) { body { font-size: 14px; } .panel, .card { border-radius: var(--axion-radius-sm); } #footer, .footer { text-align: center; padding: 24px 0; } } @media (max-width: 480px) { .btn { width: 100%; } }