/* ========================================================================== Upzy League — feuille de style principale Charte : accent cyan #00E5B4, Rajdhani + Inter, découpes biseautées. Aucun coin arrondi : les composants sont taillés au clip-path. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Jetons de design Thème clair par défaut ; le thème sombre s'active via data-theme="dark" sur , ou automatiquement selon la préférence système. -------------------------------------------------------------------------- */ :root { /* Accent (commun aux deux thèmes) */ --accent: #00e5b4; --accent-hover: #00b890; --accent-soft: #e6faf5; --accent-contraste: #06121f; /* texte posé sur un fond cyan */ --glow: rgba(0, 229, 180, 0.4); /* Neutres — thème clair */ --bg: #f4f7f6; --surface: #ffffff; --surface-2: #ffffff; --text: #0f172a; --text-muted: #64748b; --border: #e2e8f0; --grille: rgba(15, 23, 42, 0.04); /* Sémantique */ --live: #ff4e50; --mvp: #f5b500; /* Couleurs par jeu */ --valorant: #00e5b4; --rl-bleu: #2563eb; --rl-orange: #f59e0b; --cs2: #ea580c; /* Découpes signature */ --biseau-bouton: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px); --biseau-carte: polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px); --biseau-badge: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); /* Rythme */ --largeur-max: 1180px; --gouttiere: 24px; } /* Le thème clair est le défaut voulu par le client : la préférence système n'est volontairement PAS suivie au premier chargement. Le thème sombre s'obtient uniquement par le bouton de bascule, puis reste mémorisé. */ /* Thème sombre — activé par le bouton de bascule */ :root[data-theme="dark"] { --accent-hover: #33edc4; --accent-soft: rgba(0, 229, 180, 0.12); --glow: rgba(0, 229, 180, 0.45); --bg: #0a0f1a; --surface: #131c2e; --surface-2: #1b2740; --text: #f1f5f9; --text-muted: #94a3b8; --border: #24314a; --grille: rgba(255, 255, 255, 0.05); } /* Thème clair — choix explicite (doit pouvoir annuler la préférence système) */ :root[data-theme="light"] { --accent-hover: #00b890; --accent-soft: #e6faf5; --glow: rgba(0, 229, 180, 0.4); --bg: #f4f7f6; --surface: #ffffff; --surface-2: #ffffff; --text: #0f172a; --text-muted: #64748b; --border: #e2e8f0; --grille: rgba(15, 23, 42, 0.04); } /* -------------------------------------------------------------------------- 2. Base -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { min-height: 100vh; display: flex; flex-direction: column; font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 16px; line-height: 1.6; color: var(--text); background-color: var(--bg); /* Trame quadrillée tactique 40 × 40 px */ background-image: linear-gradient(var(--grille) 1px, transparent 1px), linear-gradient(90deg, var(--grille) 1px, transparent 1px); background-size: 40px 40px; -webkit-font-smoothing: antialiased; transition: background-color 0.2s ease, color 0.2s ease; } img { max-width: 100%; height: auto; display: block; } a { color: var(--accent-hover); text-decoration: none; } a:hover { text-decoration: underline; } /* Accessibilité : focus clavier toujours visible */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .conteneur { width: 100%; max-width: var(--largeur-max); margin-inline: auto; padding-inline: var(--gouttiere); } /* -------------------------------------------------------------------------- 3. Typographie -------------------------------------------------------------------------- */ h1, h2, h3, h4, .titre { font-family: "Rajdhani", "Inter", sans-serif; font-weight: 700; line-height: 1.1; letter-spacing: 0.01em; text-transform: uppercase; text-wrap: balance; } h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); } h2 { font-size: clamp(1.6rem, 3.5vw, 2.4rem); } h3 { font-size: clamp(1.2rem, 2.5vw, 1.5rem); } .sur-titre { font-family: "Rajdhani", sans-serif; font-weight: 600; text-transform: uppercase; letter-spacing: 0.22em; font-size: 0.8rem; color: var(--accent-hover); display: inline-flex; align-items: center; gap: 0.6em; } .sur-titre::before { content: ""; width: 26px; height: 2px; background: currentColor; } .discret { color: var(--text-muted); } /* Chiffres alignés en colonnes */ .nombres { font-variant-numeric: tabular-nums; } /* -------------------------------------------------------------------------- 4. Boutons -------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.6em; font-family: "Rajdhani", sans-serif; font-weight: 700; font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.06em; padding: 13px 26px; border: 0; cursor: pointer; clip-path: var(--biseau-bouton); transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease; } .btn:hover { text-decoration: none; } .btn-principal { background: var(--accent); color: var(--accent-contraste); } .btn-principal:hover { background: var(--accent-hover); transform: translateY(-2px); box-shadow: 0 8px 30px var(--glow); } .btn-secondaire { background: transparent; color: var(--accent-hover); box-shadow: inset 0 0 0 1.5px var(--accent); } .btn-secondaire:hover { background: var(--accent-soft); transform: translateY(-2px); } /* -------------------------------------------------------------------------- 5. Cartes, badges, jauges -------------------------------------------------------------------------- */ .carte { background: var(--surface); border: 1px solid var(--border); clip-path: var(--biseau-carte); padding: 22px; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .carte:hover { border-color: var(--accent); box-shadow: 0 10px 40px var(--glow); } .badge { display: inline-flex; align-items: center; gap: 0.5em; font-family: "Rajdhani", sans-serif; font-weight: 700; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.08em; padding: 6px 12px; clip-path: var(--biseau-badge); } .badge-live { background: rgba(255, 78, 80, 0.14); color: var(--live); } .badge-ouvert { background: var(--accent-soft); color: var(--accent-hover); } .badge-mvp { background: rgba(245, 181, 0, 0.14); color: var(--mvp); } .badge-neutre { background: var(--border); color: var(--text-muted); } /* Point d'état animé */ .point { width: 8px; height: 8px; border-radius: 50%; background: currentColor; position: relative; flex: none; } .point-pulse::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: currentColor; animation: pulsation 1.4s cubic-bezier(0, 0, 0.2, 1) infinite; } @keyframes pulsation { 0% { transform: scale(1); opacity: 0.7; } 75%, 100% { transform: scale(2.6); opacity: 0; } } /* Jauge d'inscriptions */ .jauge-piste { height: 12px; background: var(--bg); border: 1px solid var(--border); clip-path: var(--biseau-badge); overflow: hidden; } .jauge-remplissage { height: 100%; background: linear-gradient(90deg, var(--accent-hover), var(--accent)); } /* -------------------------------------------------------------------------- 6. En-tête -------------------------------------------------------------------------- */ .entete { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); } .entete-interieur { display: flex; align-items: center; gap: 28px; min-height: 72px; } /* Le logo assure le retour à l'accueil : il n'y a pas d'entrée « Accueil » */ .logo { display: flex; align-items: center; gap: 12px; flex: none; } .logo:hover { text-decoration: none; } .logo img { height: 40px; width: auto; } /* Halo cyan sur le logo, uniquement sur fond sombre */ :root[data-theme="dark"] .logo img { filter: drop-shadow(0 0 12px var(--glow)); } .logo-texte { font-family: "Rajdhani", sans-serif; font-weight: 700; font-size: 1.35rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text); } .nav { display: flex; align-items: center; gap: 22px; margin-left: auto; } /* :not(.btn) est indispensable — sans lui, cette règle (spécificité supérieure à .btn) écraserait le padding et la taille des boutons placés dans la navigation. */ .nav a:not(.btn) { font-family: "Rajdhani", sans-serif; font-weight: 600; font-size: 1rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text); padding: 6px 0; border-bottom: 2px solid transparent; } .nav a:not(.btn):hover, .nav a:not(.btn).actif { color: var(--accent-hover); border-bottom-color: var(--accent); text-decoration: none; } /* Bouton de bascule de thème */ .bascule-theme { background: transparent; border: 1px solid var(--border); color: var(--text); width: 38px; height: 38px; display: grid; place-items: center; cursor: pointer; clip-path: var(--biseau-badge); transition: border-color 0.15s ease, color 0.15s ease; } .bascule-theme:hover { border-color: var(--accent); color: var(--accent-hover); } .bascule-theme svg { width: 18px; height: 18px; } /* Une seule icône visible à la fois : la lune en thème clair (pour aller vers le sombre), le soleil en thème sombre. */ .icone-soleil { display: none; } .icone-lune { display: block; } :root[data-theme="dark"] .icone-soleil { display: block; } :root[data-theme="dark"] .icone-lune { display: none; } /* Menu mobile */ .bouton-menu { display: none; } @media (max-width: 900px) { .bouton-menu { display: grid; place-items: center; background: transparent; border: 1px solid var(--border); color: var(--text); width: 38px; height: 38px; cursor: pointer; clip-path: var(--biseau-badge); margin-left: auto; } .nav { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; margin: 0; padding: 12px var(--gouttiere) 20px; background: var(--surface); border-bottom: 1px solid var(--border); } .nav:not(.ouvert) { display: none; } .nav a:not(.btn) { padding: 12px 0; border-bottom: 1px solid var(--border); } .nav .btn { margin-top: 12px; align-self: flex-start; } } /* -------------------------------------------------------------------------- 7. Sections -------------------------------------------------------------------------- */ main { flex: 1; } /* padding-block uniquement : le raccourci « padding » écraserait le padding horizontal hérité de .conteneur (même spécificité, déclaré après). */ .section { padding-block: 72px; } .section-entete { margin-bottom: 34px; } .section-entete h2 { margin-top: 12px; } .section-entete p { margin-top: 10px; max-width: 62ch; color: var(--text-muted); } .grille { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } /* Hero */ .hero { padding-block: 84px 64px; } .hero p { margin-top: 16px; max-width: 56ch; color: var(--text-muted); font-size: 1.05rem; } .hero-actions { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 14px; } .accent { color: var(--accent-hover); } /* État vide — affiché quand une rubrique n'a pas encore de contenu. Préféré à des données fictives, qui induiraient le visiteur en erreur. */ .vide { background: var(--surface); border: 1px dashed var(--border); clip-path: var(--biseau-carte); padding: 48px 28px; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; } .vide svg { width: 40px; height: 40px; color: var(--accent); opacity: 0.65; } .vide p { color: var(--text-muted); max-width: 46ch; } /* -------------------------------------------------------------------------- 8. Tableaux (classements) -------------------------------------------------------------------------- */ .tableau-enveloppe { overflow-x: auto; /* le débordement reste dans le conteneur, jamais sur la page */ background: var(--surface); border: 1px solid var(--border); clip-path: var(--biseau-carte); } .tableau { width: 100%; border-collapse: collapse; font-size: 0.95rem; } .tableau th { font-family: "Rajdhani", sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.82rem; color: var(--text-muted); text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--border); white-space: nowrap; } .tableau td { padding: 13px 16px; border-bottom: 1px solid var(--border); } .tableau tbody tr:last-child td { border-bottom: 0; } .tableau tbody tr:hover { background: var(--accent-soft); } .tableau .rang { font-family: "Rajdhani", sans-serif; font-weight: 700; font-size: 1.1rem; color: var(--text-muted); } .tableau tr:nth-child(1) .rang { color: var(--accent-hover); } /* -------------------------------------------------------------------------- 9. Pied de page -------------------------------------------------------------------------- */ .pied { margin-top: 64px; border-top: 1px solid var(--border); padding: 44px 0 28px; background: var(--surface); } .pied-grille { display: grid; gap: 32px; grid-template-columns: 2fr 1fr 1fr; } @media (max-width: 760px) { .pied-grille { grid-template-columns: 1fr; } } .pied h4 { font-size: 0.85rem; letter-spacing: 0.14em; color: var(--text-muted); margin-bottom: 14px; } .pied-liens { display: flex; flex-direction: column; gap: 9px; } .pied-liens a { color: var(--text); font-size: 0.94rem; } .pied-liens a:hover { color: var(--accent-hover); } .pied-bas { margin-top: 34px; padding-top: 20px; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; font-size: 0.85rem; color: var(--text-muted); } /* -------------------------------------------------------------------------- 10. Préférences d'accessibilité -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }