:root { --rose: #c2478b; --rose-dark: #a13570; --rose-light: #ffe3f0; --lavender: #7c5cbf; --ink: #3a2e3a; --ink-soft: #6b5b6b; --bg: #fdf6f9; --bg-start: #fff8fb; --bg-end: #f7ecf3; --card-bg: #ffffff; --border: #f0dbe6; --shadow: 0 10px 30px -12px rgba(150, 60, 110, 0.25); --shadow-accent: rgba(194, 71, 139, 0.55); --radius: 18px; --tier-high: #c2478b; --tier-moderate: #d98c3f; --tier-low: #7c9fbf; --tier-minimal: #9aa89a; font-size: 16px; } /* Thème "Homme" : mêmes tokens, palette bleue. Activé en posant data-gender="homme" sur dès que le genre est choisi. */ body[data-gender="homme"] { --rose: #2f6fb0; --rose-dark: #1f5490; --rose-light: #dceaf7; --lavender: #4a4fd1; --bg: #eef5fc; --bg-start: #f5f9ff; --bg-end: #e8f1fa; --border: #d9e6f2; --shadow: 0 10px 30px -12px rgba(31, 84, 144, 0.25); --shadow-accent: rgba(47, 111, 176, 0.55); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: radial-gradient(circle at top, var(--bg-start) 0%, var(--bg) 55%, var(--bg-end) 100%); color: var(--ink); font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif; min-height: 100%; -webkit-font-smoothing: antialiased; transition: background 0.3s ease; } #app { min-height: 100dvh; display: flex; flex-direction: column; align-items: center; padding: 24px 16px calc(48px + env(safe-area-inset-bottom)); } .screen { width: 100%; max-width: 640px; display: none; } .screen.active { display: block; animation: fade-in 0.35s ease both; } @keyframes fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 28px 24px; margin-bottom: 18px; } /* ---------- Typography ---------- */ h1 { font-size: 1.6rem; line-height: 1.25; margin: 8px 0 16px; text-align: center; color: var(--ink); } h2 { margin: 4px 0 6px; } h3 { margin: 0 0 12px; font-size: 1.05rem; } .dove { text-align: center; font-size: 1.8rem; margin: 0 0 4px; } .verse { font-style: italic; color: var(--ink-soft); border-left: 3px solid var(--rose); padding: 6px 0 6px 14px; margin: 0 0 20px; font-size: 0.95rem; line-height: 1.5; } .verse cite { display: block; margin-top: 6px; font-style: normal; font-weight: 600; color: var(--rose-dark); font-size: 0.82rem; } .verse-small { font-size: 0.85rem; text-align: center; border-left: none; border-top: 1px solid var(--border); padding: 12px 0 0; margin-top: 12px; } .intro { color: var(--ink-soft); line-height: 1.6; margin-bottom: 18px; } .facts { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 8px; } .facts li { background: var(--rose-light); color: var(--rose-dark); border-radius: 10px; padding: 10px 14px; font-size: 0.92rem; } /* ---------- Forms & buttons ---------- */ /* Le display:none de [hidden] vient de la feuille du navigateur, et TOUTE règle d'auteur le supplante quelle que soit sa spécificité : le `display: flex` ci-dessous suffisait à réafficher les formulaires masqués de l'écran de connexion, les trois se superposant à l'écran alors que la propriété `hidden` était bien posée en JS. */ [hidden] { display: none !important; } form { display: flex; flex-direction: column; gap: 6px; } label { font-size: 0.88rem; font-weight: 600; color: var(--ink-soft); } .optional { font-weight: 400; color: #a897a8; } input[type="text"], input[type="email"], input[type="tel"] { border: 1px solid var(--border); border-radius: 12px; padding: 13px 14px; font-size: 1rem; margin-bottom: 14px; background: #fffafc; color: var(--ink); width: 100%; font-family: inherit; } input[type="text"]:focus, input[type="email"]:focus, input[type="tel"]:focus { outline: 2px solid var(--rose); outline-offset: 1px; } .form-row { display: flex; gap: 10px; } .form-col { flex: 1; min-width: 0; } .form-col-narrow { flex: 0 0 38%; } .consent-label { display: flex; align-items: flex-start; gap: 10px; font-size: 0.82rem; font-weight: 400; color: var(--ink-soft); line-height: 1.45; margin: 6px 0 18px; cursor: pointer; } .consent-label input[type="checkbox"] { flex: none; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--rose); } .gender-picker { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; } .gender-option { position: relative; border: 1.5px solid var(--border); border-radius: 12px; padding: 14px 10px; text-align: center; cursor: pointer; background: #fffafc; transition: all 0.15s ease; } .gender-option input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; } .gender-option .gender-label { display: block; font-weight: 700; color: var(--ink); font-size: 0.95rem; } /* Champ téléphone : indicatif pays + numéro national sur une même ligne. */ .phone-row { display: flex; gap: 8px; margin-bottom: 4px; } .phone-row select { flex: 0 1 auto; /* Assez large pour afficher le nom du pays en entier, sans écraser le champ du numéro sur les petits écrans. */ min-width: 8.5rem; max-width: 52%; border: 1px solid var(--border); border-radius: 12px; padding: 13px 10px; font-size: 0.95rem; font-family: inherit; background: #fffafc; color: var(--ink); } .phone-row select:focus { outline: 2px solid var(--rose); outline-offset: 1px; } .phone-row input[type="tel"] { flex: 1 1 auto; min-width: 0; margin-bottom: 0; } .field-hint { font-size: 0.76rem; color: var(--ink-soft); margin: 0 0 14px; line-height: 1.4; } /* Sur les écrans étroits, un sélecteur natif tronque le nom du pays. On empile alors indicatif et numéro pour garder les deux lisibles. */ @media (max-width: 430px) { .phone-row { flex-direction: column; } .phone-row select { max-width: 100%; width: 100%; } .phone-row input[type="tel"] { width: 100%; } } .gender-option:has(input:checked) { border-color: var(--rose); background: var(--rose-light); box-shadow: 0 4px 14px -6px var(--shadow-accent); } .gender-option:has(input:focus-visible) { outline: 2px solid var(--rose); outline-offset: 2px; } .section-note { text-align: center; color: var(--ink-soft); font-size: 0.86rem; margin: -6px 0 14px; } .attempt-meta { text-align: center; color: var(--rose-dark); font-weight: 600; font-size: 0.85rem; margin: -8px 0 14px; } .btn { border: none; border-radius: 999px; padding: 15px 22px; font-size: 1rem; font-weight: 700; cursor: pointer; text-align: center; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease; -webkit-tap-highlight-color: transparent; } .btn:active { transform: scale(0.97); } .btn-primary { background: linear-gradient(135deg, var(--rose), var(--lavender)); color: #fff; box-shadow: 0 8px 20px -6px var(--shadow-accent); } .btn-primary:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; } .btn-ghost { background: transparent; color: var(--rose-dark); border: 1.5px solid var(--border); } .link-btn { background: none; border: none; color: var(--rose-dark); font-weight: 600; text-decoration: underline; cursor: pointer; font-size: 0.9rem; padding: 4px; } .resume-banner { margin-top: 16px; font-size: 0.86rem; color: var(--ink-soft); background: #f7f1fa; border-radius: 10px; padding: 10px 12px; text-align: center; } /* ---------- Quiz screen ---------- */ .quiz-shell { width: 100%; } .quiz-header { margin-bottom: 16px; } .progress-track { height: 8px; background: var(--rose-light); border-radius: 999px; overflow: hidden; } .progress-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--rose), var(--lavender)); border-radius: 999px; transition: width 0.3s ease; } .quiz-meta { display: flex; justify-content: center; align-items: center; margin-top: 10px; font-size: 0.85rem; } .progress-label { color: var(--ink-soft); font-weight: 600; } .question-card { text-align: center; } .question-text { font-size: 1.25rem; line-height: 1.45; margin: 6px 0 26px; color: var(--ink); min-height: 84px; } .answer-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .answer-btn { border: 2px solid var(--border); background: #fffafc; border-radius: 14px; padding: 16px 8px; font-size: 1rem; font-weight: 700; color: var(--ink); cursor: pointer; transition: all 0.15s ease; } .answer-btn:hover { border-color: var(--rose); } .answer-btn.selected { background: linear-gradient(135deg, var(--rose), var(--lavender)); border-color: transparent; color: #fff; box-shadow: 0 6px 16px -6px var(--shadow-accent); } .quiz-nav { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 18px; text-align: center; } .quiz-nav .btn-ghost { align-self: flex-start; } .hint { font-size: 0.82rem; color: var(--ink-soft); } /* ---------- Results screen ---------- */ .results-shell { width: 100%; } .results-header { text-align: center; } .dominant-card { text-align: center; border-top: 4px solid var(--rose); } .eyebrow { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.75rem; color: var(--rose-dark); font-weight: 700; margin: 0 0 6px; } #dominant-name { font-size: 1.8rem; color: var(--ink); } .mask-line { color: var(--ink-soft); font-weight: 600; margin: 0 0 4px; } .score-line { color: var(--rose-dark); font-weight: 700; margin: 0; } .chart-card { padding-bottom: 20px; } .score-chart { display: flex; flex-direction: column; gap: 14px; } .chart-row { display: grid; grid-template-columns: 96px 1fr 52px; align-items: center; gap: 10px; font-size: 0.88rem; } .chart-row .name { font-weight: 700; color: var(--ink); } .chart-track { height: 12px; border-radius: 999px; background: #f2e7ee; overflow: hidden; } .chart-fill { height: 100%; border-radius: 999px; transition: width 0.6s ease; } .chart-row .value { text-align: right; font-weight: 700; color: var(--ink-soft); } .legend { display: flex; flex-wrap: wrap; gap: 10px 16px; margin-top: 18px; font-size: 0.78rem; color: var(--ink-soft); } .legend span { display: inline-flex; align-items: center; gap: 6px; } .dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; } .dot-high { background: var(--tier-high); } .dot-moderate { background: var(--tier-moderate); } .dot-low { background: var(--tier-low); } .dot-minimal { background: var(--tier-minimal); } /* Accordion */ .accordion { display: flex; flex-direction: column; gap: 12px; margin-bottom: 18px; } .accordion-item { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; } .accordion-item[data-dominant="true"] { border-color: var(--rose); } .accordion-toggle { width: 100%; background: none; border: none; padding: 18px 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; text-align: left; font: inherit; color: var(--ink); } .accordion-toggle .toggle-left { display: flex; align-items: center; gap: 10px; } .wound-swatch { width: 12px; height: 12px; border-radius: 50%; flex: none; } .accordion-toggle strong { font-size: 1.02rem; } .accordion-toggle .toggle-meta { display: block; font-size: 0.78rem; color: var(--ink-soft); font-weight: 500; } .accordion-toggle .chev { transition: transform 0.2s ease; color: var(--ink-soft); flex: none; } .accordion-item.open .chev { transform: rotate(180deg); } .accordion-body { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; padding: 0 20px; } .accordion-item.open .accordion-body { max-height: 900px; padding: 0 20px 20px; } .accordion-body h4 { margin: 14px 0 6px; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--rose-dark); } .accordion-body p, .accordion-body li { color: var(--ink-soft); line-height: 1.55; font-size: 0.93rem; } .accordion-body ul { margin: 6px 0; padding-left: 20px; } .accordion-body ol { margin: 6px 0; padding-left: 20px; } .cta-card { text-align: center; } .cta-card p { color: var(--ink-soft); line-height: 1.6; margin-bottom: 18px; } .cta-actions { display: flex; flex-direction: column; gap: 10px; } .results-footer { text-align: center; margin-top: 6px; } /* ---------- Responsive ---------- */ @media (min-width: 560px) { #app { padding-top: 48px; } h1 { font-size: 1.9rem; } .cta-actions { flex-direction: row; justify-content: center; } .cta-actions .btn { flex: 0 0 auto; min-width: 220px; } } @media (max-width: 380px) { .card { padding: 22px 16px; } .answer-options { gap: 8px; } .answer-btn { padding: 14px 4px; font-size: 0.92rem; } .chart-row { grid-template-columns: 76px 1fr 44px; font-size: 0.8rem; } } /* ---------- Print ---------- */ /* ---------- Évolution et historique du participant ---------- */ .range-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; } .range-toolbar h3 { margin: 0; } .range-buttons { display: flex; gap: 6px; flex-wrap: wrap; } .range-btn { border: 1.5px solid var(--border); background: var(--card-bg); color: var(--rose-dark); border-radius: 999px; padding: 6px 13px; font-size: 0.78rem; font-weight: 700; font-family: inherit; cursor: pointer; } .range-btn.active { background: var(--rose); border-color: var(--rose); color: #fff; } .evolution-intro { text-align: left; margin: 0 0 14px; } .evolution-chart { width: 100%; overflow-x: auto; } .evolution-chart svg { width: 100%; height: auto; min-width: 460px; } .evolution-empty { text-align: center; color: var(--ink-soft); padding: 30px 0; font-size: 0.9rem; } .table-scroll { overflow-x: auto; } .history-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; white-space: nowrap; } .history-table th { text-align: left; padding: 8px 10px; color: var(--ink-soft); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 2px solid var(--border); } .history-table td { padding: 11px 10px; border-bottom: 1px solid var(--border); } .history-row { cursor: pointer; transition: background 0.15s ease; } .history-row:hover { background: var(--rose-light); } /* Le test actuellement affiché plus haut sur la page. */ .history-row.current { background: var(--rose-light); font-weight: 700; } .history-viewing { margin: 14px 0 0; padding: 10px 12px; background: var(--rose-light); border-radius: 10px; font-size: 0.85rem; color: var(--rose-dark); text-align: center; } /* ---------- Connexion et espace participant ---------- */ .welcome-login-hint { text-align: center; font-size: 0.86rem; color: var(--ink-soft); margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--border); } .login-card { max-width: 460px; margin: 0 auto; text-align: center; } .login-card form { text-align: left; } .login-card .intro { text-align: left; } /* Le code se lit chiffre par chiffre : chasse fixe et lettres espacées. */ .code-input { font-family: "SFMono-Regular", "Consolas", "Liberation Mono", monospace; font-size: 1.5rem; letter-spacing: 0.4em; text-align: center; } .form-error { color: #b0223a; background: #fdeaee; border-radius: 10px; padding: 10px 12px; font-size: 0.85rem; margin-top: 12px; text-align: left; } .account-header { text-align: center; } .account-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 14px; text-align: center; margin-bottom: 20px; } .account-stat .num { display: block; font-size: 1.7rem; font-weight: 800; color: var(--rose-dark); line-height: 1.2; } /* Un nom de blessure ne tient pas à la taille d'un compteur. */ .account-stat .num.small { font-size: 1rem; font-weight: 700; padding: 8px 0; } .account-stat .label { font-size: 0.76rem; color: var(--ink-soft); } .account-actions { display: flex; flex-wrap: wrap; gap: 10px; } /* .section-note porte une marge haute négative, faite pour la rapprocher d'un titre. Sous une rangée de boutons, elle la collait dessus : on la remplace par un écart franc. */ .account-actions-note { margin: 16px 0 0; } /* Dossier sans mot de passe : la carte se signale d'elle-même, c'est la seule action réellement à faire en arrivant par un code e-mail. */ #account-password-card.highlight { border-color: var(--rose); border-left-width: 3px; } #account-password-card form { margin-top: 14px; } /* En-tête cliquable d'une carte repliable. Le bouton occupe toute la largeur pour que la zone de clic couvre la ligne entière, et non le seul libellé. */ .card-toggle { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: none; border: 0; padding: 0; margin: 0; text-align: left; cursor: pointer; color: inherit; font: inherit; } .card-toggle:focus-visible { outline: 2px solid var(--rose); outline-offset: 4px; border-radius: 8px; } .card-toggle-text { display: flex; flex-direction: column; gap: 4px; } .card-toggle-title { font-size: 1.05rem; font-weight: 700; color: var(--ink); } .card-toggle-note { font-size: 0.84rem; color: var(--ink-soft); line-height: 1.45; } .card-toggle .chev { flex: 0 0 auto; color: var(--rose-dark); font-size: 1.3rem; line-height: 1; transition: transform 0.22s ease; } .card-toggle[aria-expanded="true"] .chev { transform: rotate(180deg); } .form-success { color: #1d6b4a; background: #e4f5ec; } .account-actions .btn { flex: 1 1 200px; margin: 0; } /* ---------- Avertissement d'enregistrement ---------- */ /* Couleurs volontairement indépendantes du genre et du thème : une alerte doit rester une alerte. La déclinaison « signature » est redonnée dans themes.css, sans quoi le fond de .card du thème (spécificité supérieure) reprendrait le dessus. */ .card.save-warning { background: #fdf1e7; border: 1.5px solid #e0955a; border-left-width: 5px; color: #6d3b12; } .save-warning h2 { margin: 0 0 8px; font-size: 1.05rem; font-weight: 800; color: #a2521a; } .save-warning p { margin: 0 0 8px; font-size: 0.9rem; line-height: 1.5; } .save-warning p:last-child { margin-bottom: 0; font-weight: 600; } /* ---------- Bandeau de félicitations ---------- */ .progress-card { border: 1.5px solid var(--rose); border-left-width: 5px; background: linear-gradient(135deg, var(--rose-light), var(--card-bg) 65%); } .progress-headline { margin: 0 0 6px; font-size: 1.15rem; font-weight: 800; color: var(--rose-dark); } .progress-lead { margin: 0 0 10px; font-size: 0.9rem; color: var(--ink-soft); } .progress-list { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; } .progress-list li { font-size: 0.92rem; line-height: 1.5; } .progress-list em { font-style: normal; font-weight: 700; color: var(--rose-dark); } .progress-foot { margin: 12px 0 0; font-size: 0.82rem; color: var(--ink-soft); } /* Le confetti se superpose à toute la page sans jamais capter un clic. */ .confetti-canvas { position: fixed; inset: 0; z-index: 60; pointer-events: none; } @media print { .btn, .quiz-nav, #print-btn, /* Le confetti est une animation d'écran : il n'a rien à faire sur le PDF, contrairement au bandeau de félicitations qui, lui, est conservé. */ .confetti-canvas, .results-footer, .cta-actions, /* Les filtres de période et l'invite à cliquer n'ont pas de sens sur papier : le PDF fige la vue complète telle qu'affichée. */ .range-buttons, #history-card .section-note, .history-viewing { display: none !important; } .accordion-body { max-height: none !important; padding: 0 20px 20px !important; } /* Le graphique d'évolution doit apparaître en entier, sans barre de défilement horizontale masquant une partie des données. */ .evolution-chart { overflow: visible !important; } .evolution-chart svg { min-width: 0 !important; } body { background: #fff; } }