/* ============================================================================= FICHIER : assets/css/style.css PROJET : Pokémon Champions VERSION : 1.2 DATE : 2026-04-15 CONTENU : 1. Variables CSS (moteur des thèmes) 2. Reset & Base 3. Navigation 3b. Sélecteur de langue (dropdown dynamique) 4. Héro 5. Boutons 6. Section Features 7. Cards 8. DevBlog 9. Footer 10. Animations 11. Responsive (mobile) ============================================================================= */ /* ============================================================================= 1. VARIABLES CSS — MOTEUR DES THÈMES QUOI : Des "cases" nommées qui stockent les couleurs du thème actif. POURQUOI: Changer un thème = changer ces cases → tout le site change. COMMENT : JavaScript ajoute "theme-black" ou "theme-white" sur . Le bon ensemble de variables s'active automatiquement. ============================================================================= */ /* ---- Thème par défaut : BLACK ---- */ :root { --color-bg: #0d0d1a; --color-bg-card: #1a1a2e; --color-bg-nav: #12122080; --color-text: #e8e8f0; --color-text-muted: #8888aa; --color-text-nav: #e8e8f0; --color-primary: #e63946; --color-primary-hover: #c1121f; --color-secondary: #457b9d; --color-border: #2a2a4a; --shadow-card: 0 4px 24px rgba(0,0,0,0.4); --shadow-nav: 0 2px 20px rgba(0,0,0,0.5); --radius: 12px; --radius-sm: 8px; --transition: 0.3s ease; } /* ---- Thème WHITE ---- */ body.theme-white { --color-bg: #f0f2f5; --color-bg-card: #ffffff; --color-bg-nav: #ffffffcc; --color-text: #1a1a2e; --color-text-muted: #5a5a7a; --color-text-nav: #1a1a2e; --color-primary: #e63946; --color-primary-hover: #c1121f; --color-secondary: #457b9d; --color-border: #dde1e9; --shadow-card: 0 4px 24px rgba(0,0,0,0.08); --shadow-nav: 0 2px 20px rgba(0,0,0,0.1); } /* ============================================================================= 2. RESET & BASE Neutralise les styles par défaut du navigateur pour partir d'une base propre. ============================================================================= */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: 'Inter', system-ui, -apple-system, sans-serif; background-color: var(--color-bg); color: var(--color-text); transition: background-color var(--transition), color var(--transition); line-height: 1.6; min-height: 100vh; } /* ============================================================================= 3. NAVIGATION Barre fixée en haut, toujours visible lors du défilement (sticky). Effet "verre dépoli" via backdrop-filter. ============================================================================= */ .navbar { position: sticky; top: 0; z-index: 1000; background: var(--color-bg-nav); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--color-border); box-shadow: var(--shadow-nav); transition: background var(--transition); } .navbar-inner { max-width: 1200px; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; height: 64px; } /* Logo */ .navbar-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--color-text-nav); font-weight: 700; font-size: 1.2rem; letter-spacing: -0.02em; } /* Pokéball dessinée en CSS pur */ .navbar-brand .pokeball-icon { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(180deg, var(--color-primary) 50%, white 50%); border: 2px solid var(--color-border); position: relative; flex-shrink: 0; } .navbar-brand .pokeball-icon::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 8px; height: 8px; border-radius: 50%; background: white; border: 2px solid var(--color-border); } /* Liens */ .navbar-links { display: flex; align-items: center; gap: 4px; list-style: none; } .navbar-links a { display: block; padding: 8px 14px; text-decoration: none; color: var(--color-text-nav); font-size: 0.9rem; font-weight: 500; border-radius: var(--radius-sm); transition: background var(--transition), color var(--transition); } .navbar-links a:hover, .navbar-links a.active { background: var(--color-primary); color: white; } /* Contrôles (thème + langue) */ .navbar-controls { display: flex; align-items: center; gap: 8px; } .ctrl-btn { display: flex; align-items: center; gap: 6px; padding: 7px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: transparent; color: var(--color-text); font-family: inherit; font-size: 0.85rem; font-weight: 500; cursor: pointer; transition: all var(--transition); white-space: nowrap; } .ctrl-btn:hover { background: var(--color-primary); border-color: var(--color-primary); color: white; } /* Bouton hamburger mobile */ .navbar-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 4px; } .navbar-toggle span { display: block; width: 24px; height: 2px; background: var(--color-text); border-radius: 2px; transition: all var(--transition); } /* ============================================================================= 3a. ICÔNES FONT AWESOME — RÈGLES GLOBALES QUOI : Ajustements pour les icônes FA utilisées dans le projet. COMMENT : Font Awesome génère des balises ou avec des classes. On s'assure ici qu'elles s'intègrent bien dans notre design. ============================================================================= */ /* Icône dans les cards — taille et espacement */ .card-icon { font-size: 2rem; margin-bottom: 16px; display: block; /* Force le passage à la ligne */ color: var(--color-primary); } /* Icône dans l'en-tête du DevBlog */ .devblog-icon { font-size: 1.1rem; color: var(--color-primary); } /* Icône dans le footer */ footer .fa-circle-info { opacity: 0.5; font-size: 0.8rem; } /* Icônes dans les boutons (héro, navbar) — alignement vertical */ .btn-primary i, .btn-outline i, .ctrl-btn i { font-size: 0.9em; /* Légèrement plus petit que le texte environnant */ vertical-align: middle; } /* Chevron du sélecteur de langue — remplacement de l'ancien span .lang-arrow */ .ctrl-btn .fa-chevron-down { font-size: 0.65rem; opacity: 0.7; transition: transform var(--transition); } .lang-selector.open .fa-chevron-down { transform: rotate(180deg); } /* ============================================================================= 3b. SÉLECTEUR DE LANGUE — DROPDOWN DYNAMIQUE QUOI : Menu déroulant qui liste toutes les langues disponibles. COMMENT : Le bouton affiche la langue courante (flag + code). Au clic, un dropdown apparaît avec toutes les options. Le JS ajoute la classe "open" pour l'afficher. Les options sont générées dynamiquement depuis langs.json. ============================================================================= */ /* Conteneur relatif — le dropdown se positionne par rapport à lui */ .lang-selector { position: relative; } /* Dropdown — caché par défaut, affiché quand la classe "open" est présente */ .lang-dropdown { display: none; position: absolute; top: calc(100% + 8px); /* 8px sous le bouton */ right: 0; /* Aligné à droite du bouton */ min-width: 160px; background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--radius-sm); box-shadow: var(--shadow-card); overflow: hidden; z-index: 200; } .lang-dropdown.open { display: block; animation: fadeInUp 0.15s ease both; } /* Note : la flèche est maintenant gérée par .fa-chevron-down dans la section 3a */ /* Chaque option de langue dans le dropdown */ .lang-option { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 14px; background: none; border: none; cursor: pointer; font-family: inherit; font-size: 0.88rem; color: var(--color-text); text-align: left; transition: background var(--transition), color var(--transition); border-bottom: 1px solid var(--color-border); } .lang-option:last-child { border-bottom: none; } .lang-option:hover { background: var(--color-primary); color: white; } /* Langue actuellement active — surlignée en rouge discret */ .lang-option.active { background: rgba(230, 57, 70, 0.08); color: var(--color-primary); font-weight: 600; } .lang-option-flag { font-size: 1.1rem; flex-shrink: 0; } .lang-option-label { font-weight: 700; font-size: 0.82rem; min-width: 22px; } .lang-option-name { color: inherit; font-size: 0.85rem; opacity: 0.85; } /* ============================================================================= 4. HÉRO Grande bannière d'accueil avec halo lumineux en arrière-plan. clamp(min, préféré, max) = taille de texte fluide selon la largeur d'écran. ============================================================================= */ .hero { padding: 100px 24px 80px; text-align: center; background: radial-gradient(ellipse at 50% 0%, rgba(230,57,70,0.12) 0%, transparent 65%); } .hero-tag { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border: 1px solid var(--color-primary); border-radius: 100px; color: var(--color-primary); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 24px; } .hero h1 { font-size: clamp(2.2rem, 5vw, 4rem); font-weight: 700; line-height: 1.15; letter-spacing: -0.03em; margin-bottom: 20px; } .hero h1 .highlight { color: var(--color-primary); } .hero p { max-width: 560px; margin: 0 auto 36px; color: var(--color-text-muted); font-size: 1.1rem; line-height: 1.7; } .hero-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } /* ============================================================================= 5. BOUTONS ============================================================================= */ /* Bouton principal — rouge, plein */ .btn-primary { display: inline-flex; align-items: center; gap: 8px; padding: 14px 28px; background: var(--color-primary); color: white; text-decoration: none; border-radius: var(--radius-sm); font-weight: 600; font-size: 0.95rem; border: none; cursor: pointer; transition: background var(--transition), transform 0.15s ease, box-shadow var(--transition); } .btn-primary:hover { background: var(--color-primary-hover); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(230,57,70,0.3); } /* Bouton secondaire — contour */ .btn-outline { display: inline-flex; align-items: center; gap: 8px; padding: 14px 28px; background: transparent; color: var(--color-text); text-decoration: none; border-radius: var(--radius-sm); font-weight: 600; font-size: 0.95rem; border: 1px solid var(--color-border); cursor: pointer; transition: all var(--transition); } .btn-outline:hover { border-color: var(--color-text-muted); transform: translateY(-2px); } /* ============================================================================= 6. SECTION FEATURES ============================================================================= */ .section { max-width: 1200px; margin: 0 auto; padding: 60px 24px; } .section-header { text-align: center; margin-bottom: 48px; } .section-header h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 700; letter-spacing: -0.02em; margin-bottom: 12px; } .section-header p { color: var(--color-text-muted); font-size: 1rem; max-width: 500px; margin: 0 auto; } /* Grille 3 colonnes → responsive */ .features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } /* ============================================================================= 7. CARDS ============================================================================= */ .card { background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 28px; transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); } .card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); border-color: var(--color-primary); } /* .card-icon est défini dans la section 3a (Font Awesome) */ .card h3 { font-size: 1rem; font-weight: 600; margin-bottom: 10px; } .card p { font-size: 0.88rem; color: var(--color-text-muted); line-height: 1.6; } .card-badge { display: inline-block; margin-top: 14px; padding: 3px 10px; border-radius: 100px; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; } .badge-coming { background: rgba(69,123,157,0.15); color: var(--color-secondary); } .badge-wip { background: rgba(230,57,70,0.12); color: var(--color-primary); } .badge-done { background: rgba(43,174,102,0.12); color: #2bae66; } /* ============================================================================= 8. DEVBLOG ============================================================================= */ .devblog { background: var(--color-bg-card); border: 1px solid var(--color-border); border-left: 4px solid var(--color-primary); border-radius: var(--radius); padding: 32px; max-width: 1200px; margin: 0 auto 60px; } .devblog-header { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; padding-bottom: 16px; border-bottom: 1px solid var(--color-border); } .devblog-header h2 { font-size: 1.1rem; font-weight: 700; flex: 1; } .devblog-version { padding: 4px 12px; background: var(--color-primary); color: white; border-radius: 100px; font-size: 0.78rem; font-weight: 700; } .devblog-date { font-size: 0.82rem; color: var(--color-text-muted); } .devblog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .devblog-col h4 { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; margin-bottom: 10px; padding-bottom: 6px; border-bottom: 1px solid var(--color-border); } .devblog-col.done h4 { color: #2bae66; } .devblog-col.todo h4 { color: var(--color-secondary); } .devblog-col.notes h4 { color: #f4a261; } .devblog-col ul { list-style: none; } .devblog-col ul li { font-size: 0.85rem; color: var(--color-text-muted); padding: 5px 0; border-bottom: 1px solid var(--color-border); display: flex; align-items: flex-start; gap: 8px; } .devblog-col ul li::before { flex-shrink: 0; margin-top: 2px; font-size: 0.7rem; } .devblog-col.done ul li::before { content: '✅'; } .devblog-col.todo ul li::before { content: '⏳'; } .devblog-col.notes ul li::before { content: '📌'; } .devblog-tech { margin-top: 20px; padding: 16px; background: var(--color-bg); border-radius: var(--radius-sm); border: 1px solid var(--color-border); } .devblog-tech h4 { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: #f4a261; margin-bottom: 8px; } .devblog-tech p { font-size: 0.83rem; color: var(--color-text-muted); line-height: 1.65; } /* ============================================================================= 9. FOOTER ============================================================================= */ footer { border-top: 1px solid var(--color-border); padding: 24px; text-align: center; color: var(--color-text-muted); font-size: 0.82rem; } footer a { color: var(--color-primary); text-decoration: none; } /* ============================================================================= 10. ANIMATIONS fadeInUp : les éléments du héro apparaissent en glissant vers le haut. "animation: X delay both" = démarre après X secondes, garde l'état final. ============================================================================= */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } .hero-tag { animation: fadeInUp 0.5s ease 0.0s both; } .hero h1 { animation: fadeInUp 0.5s ease 0.1s both; } .hero p { animation: fadeInUp 0.5s ease 0.2s both; } .hero-buttons { animation: fadeInUp 0.5s ease 0.3s both; } /* ============================================================================= 11. RESPONSIVE — MOBILE Les règles ci-dessous s'appliquent uniquement si l'écran est < 768px. ============================================================================= */ @media (max-width: 768px) { /* Menu : caché par défaut, affiché quand la classe "open" est présente */ .navbar-links { display: none; flex-direction: column; position: absolute; top: 64px; left: 0; right: 0; background: var(--color-bg-card); border-bottom: 1px solid var(--color-border); padding: 12px 16px; gap: 4px; } .navbar-links.open { display: flex; } .navbar-toggle { display: flex; } /* Grilles : 1 colonne sur mobile */ .features-grid, .devblog-grid { grid-template-columns: 1fr; } .hero { padding: 60px 20px 48px; } }