/* config/theme.css */ /* Palette de couleurs et variables de design du site CDM 2026. Modifiez ce fichier pour changer l'apparence globale du site sans toucher aux composants. */ :root { /* ── Couleurs principales ── */ --couleur-primaire: #16213e; /* Bleu nuit profond (header, boutons principaux) */ --couleur-secondaire: #0f3460; /* Bleu marine (accents, bordures actives) */ --couleur-accent: #e94560; /* Rouge vif (highlights, badges, alertes positives) */ --couleur-fond: #f4f6f8; /* Gris très clair (fond de page) */ --couleur-fond-carte: #ffffff; /* Blanc (fond des cartes et panneaux) */ --couleur-fond-zebre: #e7ecf2; /* Bandeau de zébrage (lignes alternées dans les listes/matchs) */ --couleur-fond-leger: #f8fafc; /* Gris très clair (contraste léger sur fond clair) */ --couleur-texte: #1a1a2e; /* Presque noir (texte principal) */ --couleur-texte-leger: #6b7280; /* Gris moyen (texte secondaire, placeholders) */ --couleur-bordure: #e5e7eb; /* Gris clair (bordures, séparateurs) */ --couleur-bordure-info: #dbeafe; /* Bordure bleutée pour cartes (effet halo) */ /* Couleur "primaire en texte" — équivalent à primaire en clair, mais doit rester lisible en dark (où primaire reste sombre car utilisée pour les fonds du header / boutons). À utiliser pour les titres, stats, etc. */ --couleur-titre-fort: #16213e; /* identique à primaire en clair */ /* Points classement (colonnes "groupes" et "élim") — bleu unique pour les deux */ --couleur-points-classement: #16213e; /* bleu marine en clair */ /* ── Formulaires ── */ --couleur-input-fond: #ffffff; /* Fond des inputs/selects/textareas */ --couleur-focus-anneau: rgba(15,52,96,0.12); /* Box-shadow ring au focus */ --couleur-switch-off: #cbd5e1; /* Piste du toggle switch à l'état OFF */ /* ── États et feedback ── */ --couleur-succes: #10b981; /* Vert (messages de succès) */ --couleur-succes-fond: #d1fae5; --couleur-succes-texte: #065f46; /* Vert sombre (texte sur fond succès) */ --couleur-succes-bord: #6ee7b7; --couleur-erreur: #ef4444; /* Rouge (messages d'erreur) */ --couleur-erreur-fond: #fee2e2; --couleur-erreur-texte: #991b1b; /* Rouge sombre (texte sur fond erreur) */ --couleur-erreur-texte-md: #dc2626; /* Rouge moyen (asterisques required, erreurs inline) */ --couleur-erreur-bord: #fca5a5; --couleur-info: #3b82f6; /* Bleu (informations) */ --couleur-info-fond: #dbeafe; --couleur-info-texte: #1e40af; /* Bleu sombre (texte sur fond info) */ --couleur-info-bord: #93c5fd; --couleur-avertissement: #f59e0b; /* Orange (avertissements, date limite) */ --couleur-avert-fond: #fef3c7; --couleur-avert-texte: #92400e; /* Brun (texte sur fond avertissement) */ --couleur-avert-bord: #fcd34d; /* ── Tons "soft" — encarts d'aide (plus pâles que les alertes) ── */ --couleur-info-fond-soft: #eff6ff; --couleur-info-bord-soft: #bfdbfe; --couleur-info-texte-soft: #1e3a8a; --couleur-erreur-fond-soft: #fef2f2; --couleur-erreur-bord-soft: #fecaca; --couleur-erreur-texte-soft: #991b1b; --couleur-succes-fond-soft: #f0fdf4; --couleur-succes-bord-soft: #bbf7d0; --couleur-succes-texte-soft: #14532d; /* ── Médailles (rangs 1/2/3) ── */ --couleur-medal-or: #d97706; /* Or — rang 1 */ --couleur-medal-argent: #9ca3af; /* Argent — rang 2 */ --couleur-medal-bronze: #92400e; /* Bronze — rang 3 */ /* ── Trophées — carte acquise (page /trophees) ── */ --couleur-trophee-acquis-fond: #fffdf6; /* Fond doux d'une carte trophée acquise */ --couleur-trophee-acquis-bord: #d97706; /* Liseré d'une carte trophée acquise */ /* ── Points et scores ── */ --couleur-points-pos: #10b981; /* Vert = points gagnés */ --couleur-points-zero: #9ca3af; /* Gris = zéro point */ /* ── Header / Navigation (sur fond primaire) ── */ --couleur-nav-bg: rgba(255,255,255,0.08); /* Fond burger / nav items */ --couleur-nav-bg-hover: rgba(255,255,255,0.18); --couleur-nav-bg-actif: rgba(255,255,255,0.12); --couleur-nav-bordure: rgba(255,255,255,0.15); --couleur-nav-lien: rgba(255,255,255,0.82); --couleur-nav-lien-hover: #ffffff; --couleur-nav-decon-bg: rgba(233,69,96,0.18); --couleur-nav-decon-bg-h: rgba(233,69,96,0.35); --couleur-nav-decon-texte: #fca5a5; --couleur-footer-texte: rgba(255,255,255,0.5); /* Texte du footer (sur fond primaire) */ --couleur-drapeau-outline: rgba(0,0,0,0.25); /* ── Bandeaux d'information (plus saturés que les alertes plates) ── */ --couleur-bandeau-warning-bord: #d97706; --couleur-bandeau-warning-texte: #78350f; /* ── Bannière cookies (toujours assombrie, indép. du thème clair) ── */ --couleur-cookie-bg: #1e293b; --couleur-cookie-texte: #cbd5e1; --couleur-cookie-lien: #93c5fd; /* ── Citation expert (encart "Parole d'expert" du header) ── */ --couleur-citation-fond: #edf0f5; --couleur-citation-texte: #1a3a5c; --couleur-citation-bord: #0f3460; --couleur-citation-label: #0f3460; /* ── Gradients ── */ --gradient-fond-page: radial-gradient(circle, rgba(100,130,200,0.18) 1px, transparent 1px); --gradient-bandeau-warning: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%); --gradient-socle-1: linear-gradient(180deg, #fef3c7 0%, #fde68a 100%); /* Or, podium 1er */ --gradient-socle-2: linear-gradient(180deg, #f1f5f9 0%, #e2e8f0 100%); /* Argent, podium 2e */ --gradient-socle-3: linear-gradient(180deg, #fff7ed 0%, #fed7aa 100%); /* Bronze, podium 3e */ --gradient-trophee-mini: linear-gradient(180deg, #fffdf6 0%, #fdf4d8 100%); --gradient-bandeau-info: linear-gradient(90deg, #dde8fb, #e8edfb); --couleur-bandeau-info-bord: #93b4e8; /* ── Bandeau install / notif (bleu plein vif — identique clair & sombre) ── */ --gradient-bandeau-install: linear-gradient(90deg, #2563eb, #3b82f6); --couleur-install-texte: #ffffff; --couleur-install-bord: rgba(255,255,255,.25); --ombre-bandeau-install: 0 3px 10px rgba(37,99,235,.35); /* ── Podium dashboard (état 3) ── */ --podium-1-fond: #fef3c7; --podium-1-bord: #f59e0b; --podium-1-texte: #92400e; --podium-2-fond: #f1f5f9; --podium-2-bord: #94a3b8; --podium-2-texte: #64748b; --podium-3-fond: #fff7ed; --podium-3-bord: #d97706; --podium-3-texte: #92400e; --couleur-trophee-mini-bord: #f3e0a0; /* ── Halos et ombres dynamiques (timeline / hover) ── */ --couleur-accent-halo: rgba(233,69,96,0.18); --couleur-accent-halo-doux: rgba(233,69,96,0.08); --couleur-avert-halo: rgba(245,158,11,0.18); --couleur-avert-halo-doux: rgba(245,158,11,0.08); --ombre-card-hover: 0 10px 28px rgba(15,52,96,0.18); /* ── Couleur générique d'encre sur fond coloré ── */ --couleur-sur-couleur: #ffffff; /* ── En-tête profil « Mon compte » (texte blanc sur fond primaire navy — le navy reste sombre dans les deux thèmes, donc valeurs identiques) ── */ --couleur-hero-texte: #ffffff; --couleur-hero-texte-doux: rgba(255,255,255,0.72); --couleur-hero-avatar-fond: rgba(255,255,255,0.14); --couleur-hero-avatar-bord: rgba(255,255,255,0.32); --couleur-hero-pill-fond: rgba(255,255,255,0.16); --couleur-hero-pill-bord: rgba(255,255,255,0.24); --couleur-hero-sheen: rgba(255,255,255,0.10); /* ── Typographie ── */ --font-famille: 'Segoe UI', system-ui, -apple-system, sans-serif; --font-taille-base: 16px; --font-taille-sm: 14px; --font-taille-lg: 18px; --font-taille-xl: 22px; --font-taille-titre: 28px; /* ── Espacements ── */ --espacement-xs: 4px; --espacement-sm: 8px; --espacement-md: 16px; --espacement-lg: 24px; --espacement-xl: 32px; --espacement-xxl: 48px; /* ── Bordures et ombres ── */ --rayon-bordure: 8px; --rayon-bordure-lg: 12px; --ombre-carte: 0 1px 3px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.05); --ombre-carte-large: 0 6px 20px rgba(15,52,96,0.10), 0 1px 4px rgba(0,0,0,0.06); --ombre-dropdown: 0 12px 28px rgba(0,0,0,0.18); --ombre-menu: 0 4px 16px rgba(0,0,0,0.12); --ombre-modal: 0 8px 40px rgba(0,0,0,0.2); --ombre-toast: 0 10px 30px rgba(15,52,96,0.18), 0 2px 6px rgba(15,52,96,0.08); --ombre-cookie: 0 -2px 12px rgba(0,0,0,0.25); --couleur-overlay: rgba(0,0,0,0.5); /* ── Transitions ── */ --transition: all 0.18s ease; /* ── Largeur max du contenu ── */ --largeur-max: 1100px; --largeur-max-form: 480px; }