/* ======================================== FEUILLE DE STYLE CSS - FitGraisse Projet NSI Terminale ======================================== */ /* ========== 1. STYLES GÉNÉRAUX ========== */ /* Sélecteur * : cible TOUS les éléments. box-sizing: border-box fait que padding et border sont inclus dans la taille. */ * { margin: 0; /* Supprime les marges par défaut */ padding: 0; /* Supprime les espacements internes par défaut */ box-sizing: border-box; /* Calcul de taille plus intuitif */ } /* Sélecteur body : styles du corps de la page. C'est ici qu'on définit la police, couleurs de fond et texte par défaut. */ body { font-family: Arial, sans-serif; /* Police de caractères (Arial ou sans-serif par défaut) */ font-size: 16px; /* Taille de police de base */ line-height: 1.6; /* Hauteur de ligne (espacement vertical du texte) */ color: #333; /* Couleur du texte (gris foncé) */ background-color: #ffffff; /* Couleur de fond (blanc) */ } /* Mode sombre : appliqué quand la classe "dark" est sur */ html.dark body { background-color: #1a1a1a; /* Fond très sombre */ color: #e0e0e0; /* Texte clair */ } /* ========== 2. CONTENEURS ET LAYOUT ========== */ /* Classe .container : limite la largeur du contenu et le centre. Utilisée dans toutes les sections pour garder une mise en page cohérente. */ .container { max-width: 1200px; /* Largeur maximale */ margin: 0 auto; /* Centre horizontalement (marges auto à gauche et droite) */ padding: 0 20px; /* Espacement interne gauche/droite */ } /* ========== 3. HEADER (En-tête) ========== */ /* Classe .site-header : barre de navigation en haut de page. position: sticky permet de la fixer en haut lors du scroll. */ .site-header { background-color: #ffffff; /* Fond blanc */ border-bottom: 2px solid #ddd; /* Bordure inférieure grise */ padding: 15px 0; /* Espacement haut/bas */ position: sticky; /* Reste visible en haut lors du scroll */ top: 0; /* Position en haut */ z-index: 100; /* Superpose les autres éléments */ } /* Mode sombre pour le header */ html.dark .site-header { background-color: #2a2a2a; border-bottom-color: #444; } /* Container du header avec disposition flex */ .site-header .container { display: flex; /* Flexbox : permet d'aligner les éléments sur une ligne */ justify-content: space-between; /* Espace entre les éléments */ align-items: center; /* Centre verticalement */ flex-wrap: wrap; /* Passe à la ligne si nécessaire (responsive) */ } /* Logo */ .logo { height: 50px; /* Hauteur du logo */ width: auto; /* Largeur automatique (garde les proportions) */ } /* Menu de navigation */ .nav-menu { list-style: none; /* Supprime les puces de la liste */ display: flex; /* Aligne les éléments horizontalement */ gap: 20px; /* Espace entre les liens */ } /* Liens de navigation */ .nav-menu a { text-decoration: none; /* Supprime le soulignement */ color: #333; /* Couleur du texte */ font-weight: bold; /* Texte en gras */ padding: 8px 15px; /* Espacement interne */ border-radius: 5px; /* Coins arrondis */ transition: background-color 0.3s ease; /* Animation de transition */ } /* Au survol (hover) ou lien actif */ .nav-menu a:hover, .nav-menu a.active { background-color: #f0f0f0; /* Fond gris clair */ } /* Mode sombre pour les liens */ html.dark .nav-menu a { color: #e0e0e0; } html.dark .nav-menu a:hover, html.dark .nav-menu a.active { background-color: #444; } /* Bouton mode sombre */ .btn-theme { padding: 8px 15px; background-color: #333; color: #fff; border: none; border-radius: 5px; cursor: pointer; /* Curseur en forme de main */ font-size: 14px; } .btn-theme:hover { background-color: #555; } /* ========== 4. SECTION HERO (Bannière principale) ========== */ .hero { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); /* Dégradé de couleur (gradient) */ color: white; padding: 60px 0; text-align: center; } .hero-content { display: flex; /* Flexbox pour aligner texte et image */ flex-wrap: wrap; /* Passe à la ligne sur petit écran */ align-items: center; justify-content: center; gap: 40px; } .hero-text { flex: 1; /* Prend l'espace disponible */ min-width: 300px; } .hero-text h1 { font-size: 2.5em; /* Taille de police (em = relatif) */ margin-bottom: 15px; } .hero-text p { font-size: 1.2em; margin-bottom: 20px; } .hero-media { flex: 1; max-width: 500px; } .promo-image { width: 100%; /* Prend toute la largeur du conteneur */ height: auto; /* Hauteur automatique (garde les proportions) */ border-radius: 10px; /* Coins arrondis */ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); /* Ombre portée */ } /* ========== 5. BOUTONS ========== */ /* Classe générique pour tous les boutons */ .btn { display: inline-block; /* Affichage en ligne mais avec dimensions */ padding: 12px 25px; /* Espacement interne */ font-size: 16px; font-weight: bold; text-decoration: none; /* Pas de soulignement si c'est un lien */ border: none; /* Pas de bordure */ border-radius: 5px; /* Coins arrondis */ cursor: pointer; /* Curseur main */ transition: transform 0.2s ease, background-color 0.3s ease; /* Transitions : animations douces */ } /* Au survol : légère élévation */ .btn:hover { transform: translateY(-2px); /* Déplace vers le haut de 2px */ } /* Bouton primaire (principal) */ .btn-primary { background-color: #667eea; color: white; } .btn-primary:hover { background-color: #5568d3; } /* Bouton secondaire */ .btn-secondary { background-color: #48bb78; color: white; } .btn-secondary:hover { background-color: #38a169; } /* Bouton like (cœur) */ .btn-like { background-color: #f56565; color: white; font-size: 18px; } .btn-like:hover { background-color: #e53e3e; } /* ========== 6. SECTIONS ========== */ /* Sections génériques */ section { padding: 50px 0; /* Espacement haut/bas */ } /* Sections avec fond alterné */ .section-testimonials, .section-game, .legal-section { background-color: #f7fafc; /* Fond gris très clair */ } html.dark .section-testimonials, html.dark .section-game, html.dark .legal-section { background-color: #2d2d2d; } /* Titres des sections */ h2 { font-size: 2em; margin-bottom: 20px; text-align: center; color: #667eea; } html.dark h2 { color: #a78bfa; } /* ========== 7. CARTES (Cards) ========== */ /* Container des cartes : affichage en grille */ .cards-container { display: grid; /* Grille CSS */ grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Colonnes adaptatives : au moins 280px, maximum 1 fraction */ gap: 30px; /* Espace entre les cartes */ margin-top: 30px; } /* Style d'une carte */ .card { background-color: white; border: 1px solid #ddd; border-radius: 10px; /* Coins arrondis */ overflow: hidden; /* Cache ce qui dépasse */ box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1); /* Ombre légère */ transition: transform 0.3s ease, box-shadow 0.3s ease; } /* Au survol : légère élévation */ .card:hover { transform: translateY(-5px); box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2); } /* Mode sombre pour les cartes */ html.dark .card { background-color: #2a2a2a; border-color: #444; } /* Image de la carte */ .card-image { width: 100%; height: auto; /* Laisser l'image s'adapter à sa proportion réelle */ max-height: 320px; /* Limite la hauteur pour garder un layout propre */ object-fit: contain; /* Affiche l'image en entier (pas de cropping) */ object-position: center;/* Centre l'image si des marges apparaissent */ display: block; } /* Image cliquable : curseur main */ .card-image.clickable { cursor: pointer; } /* Corps de la carte (texte) */ .card-body { padding: 20px; } .card-title { font-size: 1.5em; margin-bottom: 10px; color: #333; } html.dark .card-title { color: #e0e0e0; } .card-body p { margin-bottom: 15px; color: #666; } html.dark .card-body p { color: #aaa; } /* ========== 8. LISTES ========== */ /* Liste de témoignages */ .testimonials-list { list-style: none; max-width: 800px; margin: 30px auto; } .testimonials-list li { background-color: white; padding: 20px; margin-bottom: 15px; border-left: 4px solid #667eea; /* Bordure gauche colorée */ border-radius: 5px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); } html.dark .testimonials-list li { background-color: #2a2a2a; border-left-color: #a78bfa; } /* Liste ordonnée (règles) */ .rules-list { max-width: 700px; margin: 20px auto; padding-left: 25px; line-height: 2; } .rules-list li { margin-bottom: 10px; color: #555; } html.dark .rules-list li { color: #ccc; } /* Liste des sources */ .sources-list { max-width: 700px; margin: 20px auto; padding-left: 25px; } .sources-list li { margin-bottom: 8px; } /* ========== 9. TABLEAU ========== */ /* Container responsive pour le tableau */ .table-container { overflow-x: auto; /* Scroll horizontal si nécessaire */ margin: 30px 0; } /* Tableau */ .programme-table { width: 100%; border-collapse: collapse; /* Fusionne les bordures */ background-color: white; } html.dark .programme-table { background-color: #2a2a2a; } /* Cellules du tableau */ .programme-table th, .programme-table td { border: 1px solid #ddd; padding: 12px; text-align: left; } html.dark .programme-table th, html.dark .programme-table td { border-color: #444; } /* En-tête du tableau */ .programme-table thead { background-color: #667eea; color: white; font-weight: bold; } html.dark .programme-table thead { background-color: #a78bfa; } /* Lignes alternées (zebra striping) */ .programme-table tbody tr:nth-child(even) { background-color: #f7fafc; } html.dark .programme-table tbody tr:nth-child(even) { background-color: #1a1a1a; } /* Caption (titre du tableau) */ caption { caption-side: top; font-size: 1.2em; font-weight: bold; margin-bottom: 10px; color: #333; } html.dark caption { color: #e0e0e0; } /* ========== 10. FORMULAIRES ========== */ /* Formulaire de contact */ .contact-form { max-width: 600px; margin: 30px auto; background-color: white; padding: 30px; border-radius: 10px; box-shadow: 0 3px 15px rgba(0, 0, 0, 0.1); } html.dark .contact-form { background-color: #2a2a2a; } /* Groupe de champ (label + input) */ .form-group { margin-bottom: 20px; } /* Label */ .form-group label { display: block; /* Prend toute la largeur */ margin-bottom: 5px; font-weight: bold; color: #333; } html.dark .form-group label { color: #e0e0e0; } /* Champs de saisie */ .form-group input, .form-group select, .form-group textarea { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 5px; font-size: 16px; font-family: Arial, sans-serif; background-color: white; color: #333; } html.dark .form-group input, html.dark .form-group select, html.dark .form-group textarea { background-color: #1a1a1a; border-color: #444; color: #e0e0e0; } /* Focus (quand on clique dans le champ) */ .form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; /* Supprime le contour par défaut */ border-color: #667eea; /* Bordure colorée */ box-shadow: 0 0 5px rgba(102, 126, 234, 0.5); /* Lueur */ } /* Actions du formulaire (boutons) */ .form-actions { display: flex; gap: 10px; flex-wrap: wrap; } /* Message de retour du formulaire */ .form-message { margin-top: 15px; padding: 10px; border-radius: 5px; font-weight: bold; text-align: center; } /* ========== 11. MODALES (fenêtres popup) ========== */ /* Modale : fenêtre qui s'affiche par-dessus le contenu. position: fixed la fixe sur l'écran. */ .modal { display: none; /* Cachée par défaut */ position: fixed; /* Fixée sur l'écran */ top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); /* Fond semi-transparent */ z-index: 1000; /* Au-dessus de tout */ justify-content: center; /* Centre horizontalement */ align-items: center; /* Centre verticalement */ } /* Modale visible : affichée en flex */ .modal.visible { display: flex; } /* Contenu de la modale */ .modal-content { background-color: white; padding: 30px; border-radius: 10px; max-width: 500px; width: 90%; position: relative; box-shadow: 0 5px 25px rgba(0, 0, 0, 0.5); } html.dark .modal-content { background-color: #2a2a2a; } /* Bouton fermer (croix) */ .modal-close { position: absolute; top: 10px; right: 15px; font-size: 30px; background: none; border: none; cursor: pointer; color: #999; } .modal-close:hover { color: #333; } html.dark .modal-close { color: #ccc; } html.dark .modal-close:hover { color: #fff; } /* Section du minuteur dans la modale */ .timer-section { margin-top: 20px; padding: 15px; background-color: #f7fafc; border-radius: 5px; text-align: center; } html.dark .timer-section { background-color: #1a1a1a; } .timer-display { font-size: 2em; font-weight: bold; color: #667eea; font-family: 'Courier New', monospace; /* Police monospace */ } html.dark .timer-display { color: #a78bfa; } /* ========== 12. SLIDER AVANT/APRÈS ========== */ .slider-container { position: relative; max-width: 700px; margin: 30px auto; overflow: hidden; border-radius: 10px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); } .slider-img { width: 100%; display: block; } /* Overlay : image "après" par-dessus */ .slider-overlay { position: absolute; top: 0; left: 0; width: 50%; /* Largeur initiale 50% */ height: 100%; overflow: hidden; /* Cache ce qui dépasse */ } /* Input range (curseur) */ .slider-range { width: 100%; margin-top: 10px; cursor: pointer; } /* ========== 13. MINI-JEU ========== */ .game-area { max-width: 500px; margin: 30px auto; padding: 30px; background-color: white; border-radius: 10px; box-shadow: 0 3px 15px rgba(0, 0, 0, 0.1); text-align: center; } html.dark .game-area { background-color: #2a2a2a; } /* Affichage du timer du jeu */ .timer-display { font-size: 1.5em; font-weight: bold; color: #667eea; margin: 10px 0; } /* Burger cliquable */ .burger-button { font-size: 5em; background: none; border: 3px dashed #f59e0b; border-radius: 50%; /* Forme circulaire */ padding: 20px; cursor: pointer; margin: 20px 0; transition: transform 0.1s ease; } .burger-button:hover { transform: scale(1.1); /* Agrandit légèrement */ } .burger-button:active { transform: scale(0.95); /* Rétrécie au clic */ } .burger-button:disabled { opacity: 0.5; /* Semi-transparent quand désactivé */ cursor: not-allowed; } /* Affichage du score */ .score-display { font-size: 1.3em; margin: 15px 0; font-weight: bold; } /* Tableau des scores */ .scoreboard { margin-top: 30px; text-align: left; } .scoreboard h3 { text-align: center; margin-bottom: 15px; } #scores-list { max-width: 300px; margin: 0 auto; padding-left: 25px; } #scores-list li { padding: 8px; margin-bottom: 5px; background-color: #f7fafc; border-radius: 5px; } html.dark #scores-list li { background-color: #1a1a1a; } /* ========== 14. SECTION LIKE ========== */ .like-section { text-align: center; margin: 30px 0; } .like-section p { font-size: 1.2em; margin-top: 15px; } /* ========== 15. SECTION BIO (À propos) ========== */ .bio-section { margin: 40px 0; } .bio-content { display: flex; flex-wrap: wrap; align-items: center; gap: 30px; margin-top: 20px; } .bio-image { width: 200px; height: 200px; border-radius: 50%; /* Image ronde */ object-fit: cover; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); } .bio-text { flex: 1; min-width: 300px; } .bio-text p { margin-bottom: 15px; line-height: 1.8; } /* ========== 16. FOOTER ========== */ .site-footer { background-color: #333; color: white; padding: 30px 0; text-align: center; } html.dark .site-footer { background-color: #1a1a1a; } .footer-links { list-style: none; display: flex; justify-content: center; gap: 20px; margin-bottom: 15px; } .footer-links a { color: white; text-decoration: none; } .footer-links a:hover { text-decoration: underline; } .disclaimer { font-size: 0.9em; margin: 15px 0; color: #aaa; } /* ========== 17. RESPONSIVE (Adaptation mobile) ========== */ /* Sur écrans petits (moins de 768px) */ @media (max-width: 768px) { /* Titres plus petits */ h1 { font-size: 2em; } h2 { font-size: 1.5em; } /* Menu vertical sur mobile */ .nav-menu { flex-direction: column; gap: 10px; } /* Hero en colonne */ .hero-content { flex-direction: column; } /* Cartes en une colonne */ .cards-container { grid-template-columns: 1fr; } /* Bio en colonne */ .bio-content { flex-direction: column; text-align: center; } } /* ========== 404 (page introuvable) ========== */ .error-404 { min-height: 60vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: 2rem; } .error-404 h1 { font-size: 2rem; margin-bottom: .5rem; } .error-404 p { margin: .5rem 0; } .btn-home { display: inline-block; margin-top: 1rem; } .error-footer { text-align: center; padding: 1rem 0; color: #999; font-size: .85rem; } /* ========== FIN DU FICHIER CSS ========== */