/* =========================== Thème & variables de couleur =========================== */ :root { /* Couleurs (modifiable en un seul endroit) */ --bg: #f6f0de; /* crème */ --text: #111111; /* texte principal */ --muted: #2b2b2b; /* texte secondaire / boutons fantôme */ --accent: #cf4d21; /* orange course */ --accent-contrast: #ffffff; /* texte sur accent */ --card: #ffffff; --shadow: 0 8px 24px rgba(0,0,0,.08); /* Rythme & rayons */ --radius: 18px; --gap: clamp(16px, 2.5vw, 28px); /* Typo */ --font-display: "Anton", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --font-base: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --h1: clamp(40px, 6.5vw, 72px); --h2: clamp(22px, 3.2vw, 32px); --lead: clamp(18px, 2.5vw, 24px); } /* Variante sombre (activée via data-theme="dark" sur ) */ html[data-theme="dark"] { --bg: #111212; --text: #f6f0de; --muted: #d9d1bc; --accent: #d65a2d; --accent-contrast: #0e0e0e; --card: #323436; --shadow: 0 8px 24px rgba(0,0,0,.35); } /* =========================== Reset minimal =========================== */ * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; font-family: var(--font-base); color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { max-width: 100%; height: auto; display: block; } .container { width: min(1120px, 92vw); margin-inline: auto; } /* =========================== Header =========================== */ .site-header { position: sticky; top: 0; backdrop-filter: blur(6px); background: color-mix(in oklab, var(--bg) 75%, transparent); border-bottom: 1px solid color-mix(in oklab, var(--text) 10%, transparent); z-index: 10; } .site-header .container { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; } .brand__title { font-family: var(--font-display); font-size: clamp(22px, 3.2vw, 32px); letter-spacing: .5px; text-decoration: none; color: var(--text-color); } .brand__title:visited { color: var(--text-color); /* même couleur qu’avant */ text-decoration: none; /* pas de soulignement */ } .theme-toggle { appearance: none; border: 1px solid color-mix(in oklab, var(--text) 15%, transparent); background: var(--card); border-radius: 999px; padding: 8px 12px; cursor: pointer; box-shadow: var(--shadow); } .theme-toggle[data-theme="dark"] { background: var(--card); } /* =========================== Hero =========================== */ .hero { display: grid; align-items: center; min-height: calc(100dvh - 64px); } .hero__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--gap); align-items: center; padding-block: clamp(24px, 6vw, 60px); } @media (max-width: 900px) { .hero__grid { grid-template-columns: 1fr; text-align: center; } } .hero__title { font-family: var(--font-display); font-size: var(--h1); line-height: 1; margin: 0 0 12px 0; } .hero__tagline { font-size: var(--lead); margin: 0 0 22px 0; letter-spacing: .2px; } .cta { display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-start; } @media (max-width: 900px) { .cta { justify-content: center; } } .btn { appearance: none; border: 0; font-weight: 600; padding: 14px 18px; border-radius: var(--radius); cursor: pointer; transition: transform .06s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease; will-change: transform; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; box-shadow: var(--shadow); } .btn--primary { background: var(--accent); color: var(--accent-contrast); } .btn--primary:hover { transform: translateY(-1px); } .btn--primary:active { transform: translateY(0); } .btn--ghost { background: var(--muted); color: var(--accent-contrast); } html[data-theme="dark"] .btn--ghost { background: color-mix(in oklab, var(--text) 85%, var(--bg) 15%); color: #0e0e0e; } .hero__image { width: min(440px, 86%); margin-inline: auto; filter: drop-shadow(0 16px 30px rgba(0,0,0,.18)); aspect-ratio: 1 / 1; object-fit: contain; } /* Section suivante (ancre #jouer) */ .next-section { padding: 48px 0 64px 0; border-top: 1px dashed color-mix(in oklab, var(--text) 15%, transparent); } .next-section h2 { font-family: var(--font-display); font-size: var(--h2); margin: 0 0 8px 0; } /* =========================== Modale =========================== */ .modal { border: none; padding: 0; background: transparent; } .modal::backdrop { background: rgba(0,0,0,.35); } .modal__card { background: var(--card); color: var(--text); width: min(720px, 92vw); margin: auto; padding: 22px; border-radius: calc(var(--radius) + 4px); box-shadow: var(--shadow); } .modal__actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; } /* =========================== Footer =========================== */ .site-footer { padding: 28px 0 40px 0; color: color-mix(in oklab, var(--text) 70%, transparent); text-align: center; } /* =========================== Page Jouer / Auth =========================== */ .auth-page { min-height: 100dvh; display: grid; grid-template-rows: auto 1fr auto; /* header | main (prend la hauteur) | footer */ } .site-header, .site-footer { width: 100%; } .auth-container { width: min(480px, 92vw); justify-self: center; align-self: center; text-align: center; } .auth-container h1 { font-family: var(--font-display); font-size: clamp(28px, 5vw, 40px); line-height: 1.06; margin: 0 0 1rem 0; max-width: 20ch; margin-inline: auto; } .auth-box { display: flex; flex-direction: column; gap: 1rem; background: var(--card); padding: 2rem; border-radius: var(--radius); box-shadow: var(--shadow); } .login-form label { display: block; text-align: left; margin-bottom: 1rem; } .login-form input { width: 100%; padding: 0.6rem; border: 1px solid #ccc; border-radius: var(--radius); font-size: 1rem; } .forgot { display: block; margin-top: .8rem; font-size: 0.9rem; color: var(--text); text-decoration: underline; } .ajax-return { margin-bottom: 12px; padding: 12px; border-radius: var(--radius); background: color-mix(in oklab, var(--card) 85%, var(--bg)); box-shadow: var(--shadow); } .ajax-return.ok { border: 1px solid #2e7d32; } .ajax-return.warn { border: 1px solid #a67c00; } .ajax-return.error { border: 1px solid #b00020; } .auth-box p.ok { color: #2e7d32; font-weight: 600; } .auth-box p.warn { color: #a67c00; font-weight: 500; } .auth-box p.error { color: #b00020; font-weight: 600; } .auth-box a { color: var(--accent-color); text-decoration: underline; }