:root { --color-white: #FFFDF9; --color-primary: #4D25F7; --color-yellow: #EBF893; --color-pink: #FE7B98; --color-green: #79E0A5; --color-black: #201625; /* Aliases pour compatibilité */ --color-audace: #4D25F7; --color-authenticite: #79E0A5; --color-accent: #4D25F7; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: var(--color-green); min-height: 100vh; padding: 20px; font-size: 16px; line-height: 1.6; } /* Hiérarchie typographique */ h1, .h1 { font-family: 'Space Grotesk', sans-serif; font-size: 2.5em; font-weight: 700; color: var(--color-black); margin-bottom: 0.5em; line-height: 1.2; } h2, .h2 { font-family: 'Space Grotesk', sans-serif; font-size: 1.8em; font-weight: 600; color: var(--color-black); margin-bottom: 0.75em; line-height: 1.3; } h3, .h3 { font-family: 'Space Grotesk', sans-serif; font-size: 1.4em; font-weight: 600; color: var(--color-black); margin-bottom: 0.5em; line-height: 1.4; } h4, .h4 { font-family: 'Inter', sans-serif; font-size: 1.1em; font-weight: 600; color: var(--color-black); margin-bottom: 0.5em; } p { margin-bottom: 1em; } .text-center { text-align: center; } .mb-small { margin-bottom: 1em; } .mb-medium { margin-bottom: 2em; } .mb-large { margin-bottom: 3em; } .container { max-width: 1200px; margin: 0 auto; background: var(--color-white); border-radius: 20px; box-shadow: 0 20px 60px rgba(32, 22, 37, 0.3); overflow: hidden; } .header { background: var(--color-primary); color: var(--color-white); padding: 50px 40px; text-align: center; position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 20px; border-bottom: 4px solid var(--color-yellow); } .header-logo { width: 100px; height: auto; margin-bottom: 15px; display: flex; align-items: center; justify-content: center; } .header-logo svg { width: 100%; height: auto; max-height: 150px; filter: brightness(1.1); } .header-content { display: flex; flex-direction: column; align-items: center; gap: 10px; } .header h1 { font-family: 'Space Grotesk', sans-serif; font-size: 2.8em; margin: 0; font-weight: 700; color: var(--color-white); } .header p { font-size: 1.3em; margin: 0; color: var(--color-white); font-weight: 500; opacity: 0.95; } .content { padding: 40px; } .welcome-screen, .quiz-container, .results-screen, .branch-score-screen { display: none; } .welcome-screen.active, .quiz-container.active, .results-screen.active, .branch-score-screen.active { display: block; } .welcome-content { text-align: center; padding: 40px 0; } .welcome-content h2 { font-family: 'Space Grotesk', sans-serif; color: var(--color-black); font-size: 2em; margin-bottom: 1em; font-weight: 700; } .welcome-content p { color: var(--color-black); font-size: 1em; line-height: 1.7; margin-bottom: 1em; max-width: 800px; margin-left: auto; margin-right: auto; opacity: 0.85; } .radar-dimensions { background: var(--color-yellow); border-radius: 12px; padding: 40px 30px; margin: 40px 0; } .radar-dimensions h3 { font-family: 'Space Grotesk', sans-serif; color: var(--color-black); margin-bottom: 30px; text-align: center; font-weight: 600; font-size: 1.5em; } .branch-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 15px; margin-bottom: 20px; } .branch-item { background: var(--color-white); padding: 15px; border-radius: 8px; border-left: 4px solid var(--color-primary); } .branch-item strong { color: var(--color-black); display: block; margin-bottom: 5px; font-weight: 600; } .branch-item span { color: var(--color-black); font-size: 0.9em; opacity: 0.7; } .btn { background: var(--color-primary); color: var(--color-white); border: none; padding: 15px 40px; font-size: 1.1em; border-radius: 50px; cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; margin: 10px; font-weight: 600; } .btn:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(77, 37, 247, 0.4); } .btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; } .btn-secondary { background: var(--color-black); } .btn-secondary:hover { box-shadow: 0 10px 20px rgba(32, 22, 37, 0.4); } .question-container { background: var(--color-yellow); border-radius: 12px; padding: 30px; margin-bottom: 30px; } .progress-bar { background: #e9ecef; height: 8px; border-radius: 4px; margin-bottom: 30px; overflow: hidden; } .progress-fill { background: var(--color-primary); height: 100%; transition: width 0.3s; } .branch-indicator { background: transparent; color: var(--color-black); padding: 0; border-radius: 0; margin-bottom: 20px; display: block; } .category-indicator { background: var(--color-white); border: 2px solid; border-radius: 12px; padding: 15px 25px; margin-bottom: 25px; display: flex; align-items: center; gap: 15px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } .category-icon { font-size: 2em; } .category-info { flex: 1; } .category-name { font-family: 'Space Grotesk', sans-serif; font-size: 1.2em; font-weight: 600; color: var(--color-black); margin-bottom: 3px; } .category-desc { font-size: 0.9em; color: var(--color-black); opacity: 0.6; } .question-text { font-family: 'Space Grotesk', sans-serif; color: var(--color-black); font-size: 1.5em; font-weight: 600; margin-bottom: 30px; line-height: 1.4; } .options { display: flex; flex-direction: column; gap: 15px; } .option { background: var(--color-white); border: 2px solid #e9ecef; padding: 20px; border-radius: 10px; cursor: pointer; transition: all 0.2s; display: flex; align-items: flex-start; } .option:hover { border-color: var(--color-primary); transform: translateX(5px); } .option.selected { border-color: var(--color-primary); background: var(--color-green); } .option.correct { border-color: #28a745; background: #d4edda; } .option.incorrect { border-color: #dc3545; background: #f8d7da; } .option-letter { background: var(--color-primary); color: var(--color-white); width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; margin-right: 15px; flex-shrink: 0; } .option-text { color: var(--color-black); line-height: 1.5; } .navigation { display: flex; justify-content: space-between; margin-top: 30px; } .chart-container { max-width: 700px; margin: 40px auto; padding: 30px; background: var(--color-white); border-radius: 12px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); border: 2px solid var(--color-yellow); } .about-yeita { max-width: 900px; margin: 50px auto; padding: 40px; background: var(--color-white); border-radius: 12px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); border: 2px solid var(--color-primary); } .about-yeita h3 { font-family: 'Space Grotesk', sans-serif; font-size: 2em; color: var(--color-primary); margin-bottom: 25px; font-weight: 700; } .about-yeita-content { display: grid; grid-template-columns: 1fr 250px; gap: 40px; align-items: center; } .about-yeita-text { font-size: 1em; line-height: 1.8; color: var(--color-black); } .about-yeita-text p { margin-bottom: 15px; } .about-yeita-text strong { color: var(--color-primary); font-weight: 600; } .about-yeita-text a { color: var(--color-primary); text-decoration: underline; font-weight: 600; transition: color 0.3s ease; } .about-yeita-text a:hover { color: var(--color-pink); } .about-yeita-logo { display: flex; align-items: center; justify-content: center; } .about-yeita-logo svg { width: 100%; height: auto; max-width: 250px; } .scores-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin: 30px 0; } .score-card { background: var(--color-primary); color: var(--color-white); padding: 20px; border-radius: 12px; text-align: center; } .score-card h4 { font-size: 0.9em; opacity: 0.9; margin-bottom: 10px; } .score-card .score { font-size: 2.5em; font-weight: bold; } .branch-score-screen { text-align: center; padding: 60px 40px; } .branch-score-screen h2 { font-family: 'Space Grotesk', sans-serif; color: var(--color-black); font-size: 1.8em; margin-bottom: 30px; font-weight: 600; } .branch-score-display { background: var(--color-green); border-radius: 20px; padding: 50px 40px; margin: 30px auto; max-width: 450px; } .branch-score-display h3 { font-family: 'Space Grotesk', sans-serif; color: var(--color-black); font-size: 1.3em; margin-bottom: 20px; font-weight: 600; } .branch-score-display .big-score { font-size: 4em; font-weight: bold; color: var(--color-black); margin: 25px 0; } .branch-score-display .score-label { font-size: 1em; color: var(--color-black); opacity: 0.7; } .branch-summary { margin: 30px auto; max-width: 600px; padding: 25px; background: var(--color-yellow); border-radius: 12px; } .branch-summary p { color: var(--color-black); line-height: 1.6; opacity: 0.85; font-size: 1.05em; margin: 0; } .category-scores { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 25px; margin: 40px 0; } .category-score-card { background: var(--color-white); border-radius: 16px; padding: 30px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); border: 3px solid; transition: transform 0.2s; } .category-score-card:hover { transform: translateY(-5px); } .category-score-header { display: flex; align-items: center; gap: 15px; margin-bottom: 20px; } .category-score-icon { font-size: 2.5em; } .category-score-title { font-family: 'Space Grotesk', sans-serif; font-size: 1.2em; font-weight: 700; color: var(--color-black); } .category-score-value { font-size: 2.5em; font-weight: bold; text-align: center; margin: 20px 0 15px 0; color: var(--color-black); } .category-score-label { text-align: center; color: var(--color-black); opacity: 0.7; font-size: 0.85em; margin-bottom: 15px; } .category-dimensions { margin-top: 20px; padding-top: 20px; border-top: 1px solid rgba(0, 0, 0, 0.1); } .category-branch-item { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; font-size: 0.9em; } .category-branch-name { color: var(--color-black); opacity: 0.8; } .category-branch-score { font-weight: 600; color: var(--color-black); } .category-insight { margin-top: 20px; padding: 15px; background: rgba(0, 0, 0, 0.03); border-radius: 8px; } .category-level { display: inline-block; padding: 4px 12px; border-radius: 20px; font-size: 0.85em; font-weight: 600; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.5px; } .level-debutant { background: #FFF3CD; color: #856404; } .level-intermediaire { background: #D1ECF1; color: #0C5460; } .level-avance { background: #D4EDDA; color: #155724; } .category-recommendation { font-size: 0.9em; color: var(--color-black); line-height: 1.5; margin-top: 8px; } .category-recommendation strong { color: var(--color-black); font-weight: 600; } .results-intro { text-align: center; margin-bottom: 50px; padding: 35px 30px; background: var(--color-yellow); border-radius: 16px; } .results-intro h3 { font-family: 'Space Grotesk', sans-serif; font-size: 1.6em; color: var(--color-black); margin-bottom: 15px; font-weight: 700; } .results-intro p { color: var(--color-black); opacity: 0.85; line-height: 1.7; max-width: 800px; margin: 0 auto; font-size: 1em; } .radar-legend { display: flex; justify-content: center; gap: 30px; flex-wrap: wrap; margin-top: 25px; padding: 20px; background: var(--color-yellow); border-radius: 10px; } .radar-legend-item { display: flex; align-items: center; gap: 10px; padding: 8px 15px; background: var(--color-white); border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .radar-legend-color { width: 24px; height: 24px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); } .radar-legend-text { font-size: 1em; color: var(--color-black); font-weight: 600; } /* Styles pour la modale d'inscription */ .modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(32, 22, 37, 0.8); display: flex; justify-content: center; align-items: center; z-index: 1000; padding: 20px; } .modal-overlay.hidden { display: none; } .modal-content { background: var(--color-white); border-radius: 20px; padding: 40px; max-width: 600px; width: 100%; max-height: 90vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(32, 22, 37, 0.5); position: relative; } .modal-header { text-align: center; margin-bottom: 30px; } .modal-header h2 { font-family: 'Space Grotesk', sans-serif; color: var(--color-primary); font-size: 2em; margin-bottom: 10px; font-weight: 700; } .modal-header p { color: var(--color-black); opacity: 0.7; font-size: 1em; } .modal-form { display: flex; flex-direction: column; gap: 20px; } .form-group { display: flex; flex-direction: column; gap: 8px; } .form-group label { font-family: 'Space Grotesk', sans-serif; color: var(--color-black); font-weight: 600; font-size: 0.95em; } .form-group input, .form-group textarea { padding: 12px 16px; border: 2px solid #e9ecef; border-radius: 10px; font-family: 'Inter', sans-serif; font-size: 1em; color: var(--color-black); transition: border-color 0.2s; } .form-group input:focus, .form-group textarea:focus { outline: none; border-color: var(--color-primary); } .form-group textarea { min-height: 100px; resize: vertical; } .form-group .required { color: var(--color-pink); } .form-group .optional { color: var(--color-black); opacity: 0.6; font-size: 0.85em; font-style: italic; } .modal-actions { display: flex; gap: 15px; margin-top: 10px; } .modal-actions .btn { flex: 1; margin: 0; } .error-message { color: var(--color-pink); font-size: 0.9em; margin-top: 5px; display: none; } .error-message.show { display: block; } @media (max-width: 768px) { body { font-size: 15px; } h1, .h1 { font-size: 2em; } h2, .h2 { font-size: 1.5em; } h3, .h3 { font-size: 1.2em; } .header h1 { font-size: 1.8em; } .header p { font-size: 1em; } .header { padding: 40px 20px; min-height: 180px; } .header-logo { width: 70px; } .content { padding: 20px; } .branch-list { grid-template-columns: 1fr; } .branch-score-display .big-score { font-size: 3em; } .category-score-value { font-size: 2em; } .question-text { font-size: 1.2em; } .welcome-content h2 { font-size: 1.6em; } .about-yeita { padding: 25px; } .about-yeita h3 { font-size: 1.5em; } .about-yeita-content { grid-template-columns: 1fr; gap: 25px; } .about-yeita-logo svg { max-width: 200px; } .modal-content { padding: 30px 20px; } .modal-header h2 { font-size: 1.6em; } .modal-actions { flex-direction: column; } }