/* ======================================================================= QuizAI — main.css (FUSION de tous les CSS, dans cet ordre : theme (système) → index → setup → quiz → results) ======================================================================= */ /* ===================== theme.css ===================== */ /* ========================================================================= QuizAI — SYSTÈME DE THÈMES CENTRALISÉ ------------------------------------------------------------------------- Tout le "design" du site vit ici, sous forme de VARIABLES CSS. On a deux univers visuels radicalement différents : [data-mode="organic"] → défaut : Futurisme organique (fluide, doux) [data-mode="automotive"] → Easter egg voitures : Automotive Sleek (tendu) Pour basculer, on change UN SEUL attribut sur la balise : document.documentElement.dataset.mode = 'automotive' ...et tout le site se transforme, car chaque composant lit ces variables. ========================================================================= */ /* ========================================================================= 1. THÈME ORGANIQUE (par défaut) ========================================================================= */ :root, [data-mode="organic"] { /* — Couleurs de fond — */ --bg: #08090F; --bg-deep: #050509; --surface: rgba(255, 255, 255, .035); --surface-2: rgba(255, 255, 255, .06); --border: rgba(255, 255, 255, .09); --border-strong: rgba(255, 255, 255, .16); /* — Texte — */ --text: #EDEBF6; --text-2: #B9B7D0; --muted: #7C7A98; --faint: #4A4863; /* — Accents iridescents (lilas → aqua → blush) — */ --accent: #9B8CFF; --accent-2: #5EEAD4; --accent-3: #FFB4C6; --grad: linear-gradient(135deg, #9B8CFF 0%, #6FE9DA 55%, #FFB4C6 100%); --grad-soft: linear-gradient(135deg, rgba(155,140,255,.18), rgba(94,234,212,.12)); --glow: rgba(155, 140, 255, .35); /* — Couleurs de retour (bonne / mauvaise réponse) — */ --ok: #5EEAD4; --bad: #FF6B81; /* — Formes : tout est arrondi et organique — */ --r-sm: 14px; --r-md: 22px; --r-lg: 34px; --r-xl: 46px; --r-pill: 999px; /* "blob" : un rayon irrégulier pour des formes vivantes */ --blob: 42% 58% 63% 37% / 41% 44% 56% 59%; /* — Typographie — */ --font-display: 'Bricolage Grotesque', 'Inter', sans-serif; --font-body: 'Inter', sans-serif; --font-num: 'Bricolage Grotesque', sans-serif; --tracking: -0.01em; /* léger resserrement, élégant */ /* — Mouvement : lent, ample, "expo out" — */ --ease: cubic-bezier(.16, 1, .3, 1); --ease-io: cubic-bezier(.65, 0, .35, 1); --dur: .7s; --dur-sm: .4s; /* — Ombres douces et halos — */ --shadow: 0 30px 80px -20px rgba(0, 0, 0, .6); --ring: 0 0 0 1px var(--border); --cursor-size: 13px; --cursor-ring: 46px; } /* ========================================================================= 2. THÈME AUTOMOTIVE (Easter egg — quiz "Voitures") Rupture totale : carbone, rouge/chrome, lignes tendues, vitesse. ========================================================================= */ [data-mode="automotive"] { --bg: #0A0A0B; --bg-deep: #060607; --surface: rgba(255, 255, 255, .022); --surface-2: rgba(255, 255, 255, .045); --border: rgba(255, 255, 255, .10); --border-strong: rgba(255, 45, 45, .55); --text: #F3F4F6; --text-2: #B6B9C0; --muted: #75787F; --faint: #3A3C42; /* Rouge "feu de freinage" + chrome */ --accent: #FF2D2D; --accent-2: #FF7A18; --accent-3: #E8EAEE; --grad: linear-gradient(100deg, #FF2D2D 0%, #FF7A18 100%); --grad-soft: linear-gradient(100deg, rgba(255,45,45,.16), rgba(255,122,24,.08)); --glow: rgba(255, 45, 45, .45); /* Vert "tableau de bord" pour la réussite, rouge vif pour l'erreur */ --ok: #19E3B1; --bad: #FF2D2D; /* Formes tendues : presque pas d'arrondi */ --r-sm: 2px; --r-md: 3px; --r-lg: 4px; --r-xl: 6px; --r-pill: 4px; --blob: 3px; /* Typo technique, condensée, "motorsport" */ --font-display: 'Chakra Petch', sans-serif; --font-body: 'Inter', sans-serif; --font-num: 'Chakra Petch', sans-serif; --tracking: 0.04em; /* lettres écartées, façon tableau de bord */ /* Mouvement : sec, rapide, nerveux */ --ease: cubic-bezier(.85, 0, .15, 1); --ease-io: cubic-bezier(.9, 0, .1, 1); --dur: .32s; --dur-sm: .18s; --shadow: 0 20px 60px -25px rgba(0, 0, 0, .85); --ring: 0 0 0 1px var(--border); --cursor-size: 9px; --cursor-ring: 34px; } /* ========================================================================= 2bis. PALETTES PAR THÈME (mode organique) Choisir un thème recolore tout le site → chaque sujet a son ambiance. On ne change QUE les accents : formes, polices et mouvement restent ceux du mode organique. (Le thème "cars" est géré par le mode automotive.) ========================================================================= */ [data-theme="science"] { --accent:#3FC7FF; --accent-2:#6EE7B7; --accent-3:#A5B4FC; } [data-theme="history"] { --accent:#E5B567; --accent-2:#E08E5A; --accent-3:#C7A27C; } [data-theme="tech"] { --accent:#8B7CFF; --accent-2:#22D3EE; --accent-3:#C084FC; } [data-theme="geo"] { --accent:#34D399; --accent-2:#38BDF8; --accent-3:#A3E635; } [data-theme="cinema"] { --accent:#FF6FB5; --accent-2:#FFC857; --accent-3:#C084FC; } [data-theme="sport"] { --accent:#A3E635; --accent-2:#FB923C; --accent-3:#22D3EE; } [data-theme="music"] { --accent:#F472B6; --accent-2:#A78BFA; --accent-3:#60A5FA; } [data-theme="nature"] { --accent:#4ADE80; --accent-2:#86EFAC; --accent-3:#FBBF24; } /* Le dégradé et le halo se recalculent à partir des accents ci-dessus */ [data-theme]:not([data-theme="cars"]) { --grad: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 55%, var(--accent-3) 100%); --grad-soft: linear-gradient(135deg, color-mix(in srgb, var(--accent) 18%, transparent), color-mix(in srgb, var(--accent-2) 12%, transparent)); --glow: color-mix(in srgb, var(--accent) 38%, transparent); } /* ========================================================================= 3. RESET + BASE ========================================================================= */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { background: var(--bg); color: var(--text); font-family: var(--font-body); letter-spacing: var(--tracking); line-height: 1.6; -webkit-font-smoothing: antialiased; /* Le fond et les couleurs se transforment en douceur lors d'une bascule */ transition: background var(--dur) var(--ease), color var(--dur) var(--ease); } /* Sur ordinateur, on masque le curseur natif (remplacé par le nôtre) */ @media (hover: hover) and (pointer: fine) { body.has-cursor, body.has-cursor * { cursor: none; } } a { color: inherit; text-decoration: none; } button { font-family: inherit; letter-spacing: inherit; } ::selection { background: var(--accent); color: #07080d; } /* ========================================================================= 4. FONDS ANIMÉS (remplis par ui.js selon le mode) ========================================================================= */ .bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: radial-gradient(120% 120% at 50% -10%, var(--bg) 40%, var(--bg-deep) 100%); } /* — Blobs organiques (mode organic) — */ .blob { position: absolute; width: 46vmax; height: 46vmax; border-radius: var(--blob); filter: blur(60px); opacity: .5; mix-blend-mode: screen; will-change: transform, border-radius; } .blob.b1 { background: radial-gradient(circle at 30% 30%, var(--accent), transparent 70%); } .blob.b2 { background: radial-gradient(circle at 70% 40%, var(--accent-2), transparent 70%); } .blob.b3 { background: radial-gradient(circle at 50% 60%, var(--accent-3), transparent 70%); } /* Grain léger pour un rendu "matière" (organique) */ .grain { position: absolute; inset: -50%; opacity: .04; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* — Mode automotive : grille carbone + lignes de vitesse — */ .bg-grid { position: absolute; inset: 0; opacity: 0; background-image: linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px); background-size: 46px 46px; /* perspective de piste qui file vers l'horizon */ transform: perspective(420px) rotateX(60deg) translateY(0); transform-origin: center top; mask-image: linear-gradient(to bottom, transparent, #000 35%, #000 60%, transparent); } .speed-line { position: absolute; height: 2px; width: 18vw; background: linear-gradient(90deg, transparent, var(--accent)); opacity: 0; will-change: transform, opacity; } /* On affiche le bon décor selon le mode */ [data-mode="organic"] .bg-grid, [data-mode="organic"] .speed-line { display: none; } [data-mode="automotive"] .blob { display: none; } [data-mode="automotive"] .bg-grid { opacity: 1; transition: opacity var(--dur); } /* — Grand emblème de thème (mode organique) : filigrane géant et discret — */ .theme-emblem { position: absolute; right: -3%; bottom: -10%; font-size: 50vmin; line-height: 1; opacity: .06; filter: saturate(.5); user-select: none; will-change: transform; } /* — Scène 3D voiture (mode automotive) : cadrage 3/4 ANCRÉ À DROITE — Centrage vertical via top/bottom (pas de transform : GSAP gère x/y/scale). */ .car-stage { position: absolute; top: 3%; bottom: 3%; right: -6%; width: min(72vw, 1060px); display: flex; align-items: center; justify-content: flex-end; /* fondu radial : la voiture émerge à droite, le texte reste lisible à gauche */ -webkit-mask-image: radial-gradient(125% 105% at 72% 50%, #000 52%, transparent 100%); mask-image: radial-gradient(125% 105% at 72% 50%, #000 52%, transparent 100%); will-change: transform; } .car-stage model-viewer { width: 100%; height: 100%; --poster-color: transparent; } @media (max-width: 640px) { .car-stage { right: -12%; width: 100vw; opacity: .85; } } /* Silhouette de secours (si le modèle 3D ne charge pas) */ .car-svg { width: min(1100px, 122vw); height: auto; filter: drop-shadow(0 30px 50px rgba(0,0,0,.6)); } /* — Voile de transition entre les pages (entrée/sortie animées en GSAP) — */ .page-veil { position: fixed; inset: 0; z-index: 8000; background: var(--bg); opacity: 0; pointer-events: none; will-change: opacity; } /* ========================================================================= 5. CURSEUR PERSONNALISÉ (animé par ui.js avec inertie) ========================================================================= */ /* Le centrage (-50%) est géré par GSAP (xPercent/yPercent) — pas en CSS, sinon il serait écrasé par les transformations d'inertie. */ .cursor-dot, .cursor-ring, .cursor-ripple { position: fixed; top: 0; left: 0; border-radius: 50%; pointer-events: none; } /* Point central : couleur d'accent + halo lumineux, visible sur tout fond */ .cursor-dot { z-index: 9999; width: var(--cursor-size); height: var(--cursor-size); background: var(--accent); box-shadow: 0 0 12px 2px var(--glow), 0 0 0 2px rgba(0, 0, 0, .4); } /* Anneau : contour d'accent épais + halo intérieur/extérieur */ .cursor-ring { z-index: 9999; width: var(--cursor-ring); height: var(--cursor-ring); border: 2px solid var(--accent); box-shadow: 0 0 20px -2px var(--glow), inset 0 0 12px -6px var(--glow); transition: width var(--dur-sm) var(--ease), height var(--dur-sm) var(--ease), border-radius var(--dur-sm) var(--ease), background var(--dur-sm) var(--ease); } /* En mode automotive, l'anneau devient un viseur carré */ [data-mode="automotive"] .cursor-ring { border-radius: 3px; } /* Survol d'un élément interactif : l'anneau grandit et se remplit d'accent */ body.cursor-hover .cursor-ring { width: calc(var(--cursor-ring) * 1.95); height: calc(var(--cursor-ring) * 1.95); background: color-mix(in srgb, var(--accent) 18%, transparent); } /* Onde propagée au clic */ .cursor-ripple { z-index: 9998; width: 18px; height: 18px; border: 2px solid var(--accent); box-shadow: 0 0 14px -2px var(--glow); } [data-mode="automotive"] .cursor-ripple { border-radius: 3px; } @media (hover: none), (pointer: coarse) { .cursor-dot, .cursor-ring, .cursor-ripple { display: none; } } /* ========================================================================= 6. COMPOSANTS PARTAGÉS (avec variantes par thème) ========================================================================= */ /* — Survol de page : barre supérieure translucide — */ .topbar { position: fixed; inset: 0 0 auto 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; padding: 1.1rem 1.6rem; background: color-mix(in srgb, var(--bg) 70%, transparent); backdrop-filter: blur(14px); border-bottom: 1px solid var(--border); } .brand { font-family: var(--font-display); font-weight: 800; font-size: 1rem; letter-spacing: var(--tracking); background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* — Eyebrow : petit sur-titre en majuscules — */ .eyebrow { font-size: .68rem; letter-spacing: .28em; text-transform: uppercase; color: var(--muted); font-weight: 500; } /* — Bouton principal — */ .btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .6rem; padding: 1.05rem 2.6rem; border: none; border-radius: var(--r-pill); background: var(--grad); color: #08080f; font-family: var(--font-display); font-weight: 700; font-size: .95rem; letter-spacing: var(--tracking); cursor: pointer; overflow: hidden; isolation: isolate; transition: transform var(--dur-sm) var(--ease), box-shadow var(--dur-sm) var(--ease), border-radius var(--dur) var(--ease); } .btn::after { /* halo lumineux au survol */ content: ''; position: absolute; inset: 0; z-index: -1; background: var(--grad); filter: blur(22px); opacity: 0; transition: opacity var(--dur-sm) var(--ease); } .btn:hover { box-shadow: 0 18px 50px -12px var(--glow); } .btn:hover::after { opacity: .8; } .btn:active { transform: scale(.97); } [data-mode="automotive"] .btn { color: #fff; text-transform: uppercase; font-weight: 600; /* coin biseauté, façon carrosserie */ clip-path: polygon(0 0, 100% 0, 100% 70%, 94% 100%, 0 100%); } /* — Bouton secondaire (contour) — */ .btn-ghost { display: inline-flex; align-items: center; gap: .5rem; padding: .55rem 1.1rem; border: 1px solid var(--border-strong); border-radius: var(--r-pill); background: var(--surface); color: var(--text-2); font-size: .82rem; cursor: pointer; transition: border-color var(--dur-sm) var(--ease), color var(--dur-sm) var(--ease), background var(--dur-sm) var(--ease), border-radius var(--dur) var(--ease); } .btn-ghost:hover { border-color: var(--accent); color: var(--accent); } [data-mode="automotive"] .btn-ghost { text-transform: uppercase; font-size: .74rem; letter-spacing: .12em; } /* — Panneau / carte en verre — */ .panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); backdrop-filter: blur(16px); box-shadow: var(--shadow); transition: border-radius var(--dur) var(--ease), border-color var(--dur-sm) var(--ease), background var(--dur-sm) var(--ease); } /* — Pastille / tag — */ .pill { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .8rem; border-radius: var(--r-pill); border: 1px solid var(--border); background: var(--surface); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); transition: border-radius var(--dur) var(--ease); } /* — Titres — */ .display { font-family: var(--font-display); font-weight: 800; line-height: .95; letter-spacing: var(--tracking); } .gradient-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* ========================================================================= 7. ANIMATIONS D'APPARITION (pilotées par ui.js / GSAP) Valeur de départ : invisible + légèrement décalé. GSAP fait le reste. ========================================================================= */ [data-reveal] { opacity: 0; will-change: transform, opacity; } /* ========================================================================= 8. ACCESSIBILITÉ : on coupe les animations si l'utilisateur le demande ========================================================================= */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } [data-reveal] { opacity: 1 !important; } .cursor-dot, .cursor-ring { display: none; } } /* ===================== index.css ===================== */ /* ========================================================= QuizAI — Page d'accueil (index.html) Mise en page spécifique à cette page. Les couleurs, formes, polices et animations viennent du système central (theme.css). ========================================================= */ html, body { height: 100%; overflow: hidden; } /* Conteneur centré */ .landing { position: relative; z-index: 10; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 2rem 1.5rem; } /* Sur-titre + badges */ .intro-tags { display: flex; gap: .6rem; flex-wrap: wrap; justify-content: center; margin-bottom: 2.2rem; } .badge-live { color: var(--accent-2); border-color: color-mix(in srgb, var(--accent-2) 35%, transparent); } .badge-live::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-2); box-shadow: 0 0 10px var(--accent-2); animation: pulse-dot 1.5s ease-in-out infinite; } @keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: .25; } } /* Logo / titre principal */ .logo { font-family: var(--font-display); font-weight: 800; font-size: clamp(3.4rem, 13vw, 9rem); line-height: 1.04; /* évite que le sous-titre soit chevauché */ letter-spacing: -0.015em; margin-bottom: 1.1rem; padding: .06em .16em; /* marge interne : l'italique et le dégradé ne sont plus rognés */ } .logo span { display: inline-block; } .logo .quiz { padding-right: .03em; } .logo .ai { font-style: italic; padding-right: .14em; } /* l'italique déborde à droite → on lui laisse la place */ [data-mode="automotive"] .logo { letter-spacing: .02em; } [data-mode="automotive"] .logo .ai { font-style: normal; padding-right: .04em; } .logo-sub { font-family: var(--font-display); font-size: .72rem; color: var(--muted); letter-spacing: .3em; text-transform: uppercase; margin-bottom: 2rem; } /* Phrase d'accroche */ .tagline { max-width: 440px; font-size: clamp(.95rem, 2.4vw, 1.12rem); color: var(--text-2); line-height: 1.75; font-weight: 300; margin-bottom: 3rem; } .tagline em { color: var(--accent-2); font-style: normal; font-weight: 500; } /* Bouton jouer */ .play-wrap { margin-bottom: 3.5rem; } .btn-play { font-size: 1.05rem; padding: 1.15rem 3.4rem; } /* Rangée de stats */ .stats { display: flex; gap: 1rem; } .stat { padding: 1rem 1.6rem; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--border); min-width: 110px; transition: border-radius var(--dur) var(--ease), border-color var(--dur-sm) var(--ease); } .stat:hover { border-color: var(--border-strong); } .stat-val { font-family: var(--font-num); font-size: 1.7rem; font-weight: 800; } .stat-lbl { font-size: .6rem; color: var(--muted); text-transform: uppercase; letter-spacing: .18em; margin-top: .3rem; } /* Pied de page */ .footer { position: fixed; bottom: 1.4rem; left: 0; right: 0; text-align: center; font-size: .68rem; color: var(--faint); z-index: 10; } .footer a { color: var(--muted); cursor: pointer; transition: color var(--dur-sm); } .footer a:hover { color: var(--accent); } /* ===================== setup.css ===================== */ /* ========================================================= QuizAI — Page de configuration (setup.html) ========================================================= */ body { min-height: 100%; overflow-x: hidden; } .shell { position: relative; z-index: 10; min-height: 100vh; display: flex; flex-direction: column; align-items: center; padding: 6rem 1.5rem 4rem; } /* ── Indicateur d'étapes ── */ .steps { display: flex; align-items: center; gap: .6rem; margin-bottom: 3.2rem; } .step { display: flex; align-items: center; gap: .5rem; font-size: .68rem; text-transform: uppercase; letter-spacing: .18em; color: var(--faint); } .step-dot { width: 24px; height: 24px; border-radius: var(--r-pill); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-family: var(--font-num); font-size: .62rem; font-weight: 700; transition: all var(--dur-sm) var(--ease), border-radius var(--dur) var(--ease); } .step.active { color: var(--accent); } .step.active .step-dot { border-color: var(--accent); color: var(--accent); background: var(--grad-soft); } .step-sep { width: 34px; height: 1px; background: var(--border); } /* ── Sections ── */ .section { width: 100%; max-width: 720px; margin-bottom: 2.6rem; } .section-head { display: flex; align-items: center; gap: .8rem; margin-bottom: 1.2rem; } .section-icon { width: 34px; height: 34px; border-radius: var(--r-sm); background: var(--grad-soft); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: .95rem; transition: border-radius var(--dur) var(--ease); } .section-title { color: var(--text-2); } /* ── Cartes de choix (difficulté / mode / thème) ── */ .grid { display: grid; gap: .7rem; } .grid-4 { grid-template-columns: repeat(4, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-theme { grid-template-columns: repeat(2, 1fr); } @media (min-width: 520px) { .grid-theme { grid-template-columns: repeat(5, 1fr); } } @media (max-width: 520px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } } .choice { position: relative; padding: 1.1rem .8rem; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--surface); cursor: pointer; text-align: center; overflow: hidden; transition: transform var(--dur-sm) var(--ease), border-color var(--dur-sm) var(--ease), background var(--dur-sm) var(--ease), border-radius var(--dur) var(--ease); } .choice:hover { transform: translateY(-3px); border-color: var(--border-strong); } .choice.active { border-color: var(--accent); background: var(--grad-soft); } .choice-icon { font-size: 1.5rem; display: block; margin-bottom: .45rem; } .choice-name { font-size: .8rem; font-weight: 600; color: var(--text); display: block; } .choice.active .choice-name { color: var(--accent); } .choice-desc { font-size: .64rem; color: var(--muted); line-height: 1.4; margin-top: .3rem; display: block; } .mode-card { text-align: left; } /* La carte secrète "Voitures" : un éclat qui intrigue (Easter egg) */ .choice.secret::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgba(255, 45, 45, .14) 50%, transparent 65%); background-size: 220% 100%; animation: sweep 2.6s linear infinite; pointer-events: none; } @keyframes sweep { 0% { background-position: 200% 0; } 100% { background-position: -120% 0; } } /* ── Résumé + lancement ── */ .launch { width: 100%; max-width: 720px; margin-top: 1rem; text-align: center; } .summary { display: flex; gap: .55rem; justify-content: center; flex-wrap: wrap; margin-bottom: 1.3rem; } .summary .pill { border-color: var(--accent); color: var(--accent); background: var(--grad-soft); } .btn-start { width: 100%; max-width: 420px; } /* ===================== quiz.css ===================== */ /* ========================================================= QuizAI — Page de jeu (quiz.html) ========================================================= */ html, body { height: 100%; overflow: hidden; } .shell { position: fixed; inset: 0; z-index: 10; display: flex; flex-direction: column; align-items: center; padding: 1.4rem 1.5rem 2rem; overflow-y: auto; } /* ── Barre supérieure de jeu ── */ .gamebar { width: 100%; max-width: 760px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; flex-shrink: 0; } .gamebar-right { display: flex; align-items: center; gap: 1rem; } .lives { display: flex; gap: .3rem; font-size: 1.05rem; } .score { font-family: var(--font-num); font-weight: 700; font-size: 1rem; } .score b { color: var(--accent); } .mode-pill { color: var(--accent); border-color: var(--border-strong); background: var(--grad-soft); } /* ── Chrono (mode vitesse) ── */ .chrono { width: 100%; max-width: 760px; margin-bottom: .7rem; display: none; } .chrono.on { display: block; } .chrono-label { font-family: var(--font-num); font-size: .72rem; color: var(--accent-2); text-align: right; margin-bottom: .3rem; } .chrono-track { height: 4px; background: var(--surface-2); border-radius: var(--r-pill); overflow: hidden; } .chrono-fill { height: 100%; width: 100%; border-radius: var(--r-pill); background: var(--grad); } /* ── Progression ── */ .progress { width: 100%; max-width: 760px; margin-bottom: 1.2rem; } .progress-track { height: 5px; background: var(--surface-2); border-radius: var(--r-pill); overflow: hidden; } .progress-fill { height: 100%; width: 0%; border-radius: var(--r-pill); background: var(--grad); transition: width var(--dur) var(--ease); } .q-counter { font-size: .64rem; color: var(--muted); text-align: right; margin-top: .45rem; letter-spacing: .12em; text-transform: uppercase; } /* ── Carte question ── */ .q-card { width: 100%; max-width: 760px; padding: 2.2rem; flex-shrink: 0; } .q-badge { margin-bottom: 1.3rem; color: var(--accent); border-color: var(--border-strong); background: var(--grad-soft); } .q-text { font-family: var(--font-display); font-size: clamp(1.15rem, 3vw, 1.5rem); font-weight: 600; line-height: 1.45; color: var(--text); margin-bottom: 2rem; min-height: 50px; } /* ── Options ── */ .options { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; } @media (max-width: 520px) { .options { grid-template-columns: 1fr; } } .opt { position: relative; padding: 1.05rem 1.2rem 1.05rem 1.4rem; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--surface); color: var(--text-2); font-size: .92rem; text-align: left; cursor: pointer; line-height: 1.45; overflow: hidden; transition: transform var(--dur-sm) var(--ease), border-color var(--dur-sm) var(--ease), background var(--dur-sm) var(--ease), color var(--dur-sm) var(--ease), border-radius var(--dur) var(--ease); } .opt::before { /* liseré coloré à gauche */ content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: transparent; transition: background var(--dur-sm) var(--ease); } .opt:hover:not(:disabled) { transform: translateX(4px); border-color: var(--accent); color: var(--text); background: var(--grad-soft); } .opt:hover:not(:disabled)::before { background: var(--accent); } .opt:disabled { cursor: default; } /* États de réponse */ .opt.correct { border-color: var(--ok) !important; color: var(--ok) !important; background: color-mix(in srgb, var(--ok) 12%, transparent) !important; } .opt.correct::before { background: var(--ok) !important; } .opt.wrong { border-color: var(--bad) !important; color: var(--bad) !important; background: color-mix(in srgb, var(--bad) 10%, transparent) !important; } .opt.wrong::before { background: var(--bad) !important; } .opt.dim { opacity: .38; } /* ── Explication ── */ .explain { width: 100%; max-width: 760px; margin-top: 1.2rem; padding: 1rem 1.2rem; border-radius: var(--r-sm); border-left: 3px solid; font-size: .85rem; line-height: 1.6; display: none; flex-shrink: 0; } .explain.on { display: block; } .explain.correct { background: color-mix(in srgb, var(--ok) 7%, transparent); border-color: var(--ok); color: var(--ok); } .explain.wrong { background: color-mix(in srgb, var(--bad) 7%, transparent); border-color: var(--bad); color: var(--bad); } /* ── Bouton suivant ── */ .next { width: 100%; max-width: 760px; margin-top: 1.1rem; padding: .95rem; border-radius: var(--r-md); border: 1px solid var(--accent); background: transparent; color: var(--accent); font-family: var(--font-display); font-weight: 600; font-size: .85rem; letter-spacing: .06em; cursor: pointer; display: none; flex-shrink: 0; transition: background var(--dur-sm) var(--ease), box-shadow var(--dur-sm) var(--ease), border-radius var(--dur) var(--ease); } .next.on { display: block; } .next:hover { background: var(--grad-soft); box-shadow: 0 0 28px -6px var(--glow); } /* ── Chargement (génération IA) ── */ .loading { text-align: center; padding: 3rem 1rem; color: var(--muted); } .spinner { width: 40px; height: 40px; margin: 0 auto 1.3rem; border: 3px solid var(--surface-2); border-top-color: var(--accent); border-radius: 50%; animation: spin 1s linear infinite; } [data-mode="automotive"] .spinner { border-radius: 4px; animation-duration: .5s; } @keyframes spin { to { transform: rotate(360deg); } } .loading-sub { font-size: .72rem; color: var(--faint); margin-top: .4rem; } /* ── Écran de fin (mode survie) ── */ .dead { position: fixed; inset: 0; z-index: 50; display: none; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 2rem; background: color-mix(in srgb, var(--bg-deep) 86%, transparent); backdrop-filter: blur(10px); } .dead.on { display: flex; } .dead-emoji { font-size: 4rem; margin-bottom: 1rem; } .dead-title { font-family: var(--font-display); font-weight: 800; font-size: 2rem; color: var(--bad); margin-bottom: .6rem; } .dead-msg { color: var(--muted); margin-bottom: 2rem; line-height: 1.6; max-width: 380px; } .dead-btns { display: flex; gap: .7rem; flex-wrap: wrap; justify-content: center; } /* ===================== results.css ===================== */ /* ========================================================= QuizAI — Page de résultats (results.html) ========================================================= */ html, body { height: 100%; overflow: hidden; } .shell { position: fixed; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center; padding: 2rem 1.5rem; } .card { width: 100%; max-width: 500px; padding: 2.8rem 2.2rem; text-align: center; } /* ── Anneau de score ── */ .ring { position: relative; width: 168px; height: 168px; margin: 0 auto 1.8rem; } .ring svg { width: 168px; height: 168px; transform: rotate(-90deg); } .ring-bg { fill: none; stroke: var(--surface-2); stroke-width: 6; } .ring-arc { fill: none; stroke: url(#ring-grad); stroke-width: 6; stroke-linecap: round; transition: stroke-dasharray 1.2s var(--ease) .3s; } /* Les couleurs de l'anneau suivent le thème */ #ring-grad .stop-a { stop-color: var(--accent); } #ring-grad .stop-b { stop-color: var(--accent-2); } [data-mode="automotive"] .ring-arc { stroke-linecap: butt; } .ring-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; } .score-num { font-family: var(--font-num); font-weight: 800; font-size: 2.4rem; line-height: 1; } .score-of { font-size: .6rem; color: var(--muted); text-transform: uppercase; letter-spacing: .25em; margin-top: .35rem; } /* ── Badges ── */ .badges { display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; margin-bottom: 1.6rem; } /* ── Titre + message ── */ .r-emoji { font-size: 2.2rem; display: block; margin-bottom: .5rem; } .r-title { font-family: var(--font-display); font-weight: 800; font-size: 1.6rem; margin-bottom: .6rem; } .r-msg { font-size: .88rem; color: var(--muted); line-height: 1.7; margin: 0 auto 2rem; max-width: 360px; } /* ── Stats ── */ .stats { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .7rem; margin-bottom: 2rem; } .stat-box { padding: 1rem .5rem; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--border); transition: border-radius var(--dur) var(--ease); } .stat-box-val { font-family: var(--font-num); font-weight: 800; font-size: 1.1rem; color: var(--accent); } .stat-box-lbl { font-size: .58rem; color: var(--muted); text-transform: uppercase; letter-spacing: .14em; margin-top: .35rem; } /* ── Boutons ── */ .r-btns { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; } /* ── Confettis / étincelles ── */ .confetti { position: fixed; top: 30%; z-index: 5; width: 7px; height: 7px; border-radius: 2px; pointer-events: none; animation: confetti-fall 1.5s ease-in forwards; } [data-mode="automotive"] .confetti { border-radius: 0; width: 3px; height: 14px; } @keyframes confetti-fall { 0% { opacity: 1; transform: translateY(0) rotate(0deg); } 100% { opacity: 0; transform: translateY(140px) rotate(360deg); } }