/* Styles.css */ /* 1. Importation d'une police plus moderne (optionnel mais recommandé) */ /* @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap'); */ /* Variables Globales ou Communes (Définies une seule fois dans :root) */ :root { /* Variables communes pour toutes les pages */ --couleur-primaire: #007bff; /* Bleu commun */ --couleur-fond-sombre: #343a40; /* Gris foncé pour le footer, commun */ /* On pourrait aussi mettre d'autres variables communes ici */ } /* ---------------------------------------------------------------------- */ /* Variables Spécifiques à 'index.html' */ /* Assurez-vous d'avoir dans index.html */ .index-page { /* Surcharge ou définition des variables spécifiques à index.html */ --couleur-fond-claire: #f8f9fa; /* Gris très clair pour le fond */ /* Les autres variables non redéfinies hériteront de :root */ } /* ---------------------------------------------------------------------- */ /* Variables Spécifiques à 'results.html' */ /* Assurez-vous d'avoir dans results.html */ .results-page { /* Surcharge ou définition des variables spécifiques à results.html */ --couleur-primaire-foncee: #0056b3; --couleur-secondaire: #6c757d; /* Gris */ --couleur-fond-claire: #f0f2f5; /* Fond léger */ --couleur-accent: #28a745; /* Vert pour les totaux (Succès/Réussite) */ /* Les autres variables non redéfinies hériteront de :root */ } /* Exemple d'utilisation dans la page 'results.html' */ .results-page header { background-color: var(--couleur-fond-sombre); /* Hérité de :root */ color: white; } .results-page .total-score { color: var(--couleur-accent); /* Spécifique à results.html */ font-weight: bold; } /* Exemple d'utilisation dans la page 'index.html' */ .index-page main { background-color: var(--couleur-fond-claire); /* Spécifique à index.html */ padding: 20px; } /* --- Style de la Carte du Formulaire --- */ /* S'assurer que la carte est bien mise en valeur */ .card { /* Ombre un peu plus prononcée pour l'effet "flottant" */ box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important; /* Rendre le fond de la carte opaque pour une lisibilité maximale */ background-color: #ffffff; } /* Ajustements pour les éléments Bootstrap pour s'harmoniser */ .btn-primary { background-color: var(--couleur-primaire); border-color: var(--couleur-primaire); } .btn-primary:hover { background-color: #0056b3; /* Bleu plus foncé au survol */ border-color: #0056b3; } .badge.bg-primary { background-color: var(--couleur-primaire) !important; } /* Style pour l'en-tête (s'il est inclus via JS) */ #header-container { background-color: var(--couleur-fond-sombre); color: white; } /* Style pour le pied de page */ .footer { border-top: 1px solid rgba(255, 255, 255, 0.1); }