/* Very Up Quiz — charte : crème / noir Very Up / accents Pantone, Haas Grot Disp + Queens */
@font-face { font-family: 'Haas'; font-weight: 300; src: url(/fonts/NeueHaasGrotDisp-45Light.ttf) format('truetype'); font-display: swap; }
@font-face { font-family: 'Haas'; font-weight: 500; src: url(/fonts/NeueHaasGrotDisp-65Medium.ttf) format('truetype'); font-display: swap; }
@font-face { font-family: 'Haas'; font-weight: 700; src: url(/fonts/NeueHaasGrotDisp-75Bold.ttf) format('truetype'); font-display: swap; }
@font-face { font-family: 'Queens'; font-weight: 500; src: url(/fonts/Queens-Medium.ttf) format('truetype'); font-display: swap; }

:root {
  --cream: #FAF8F0; --beige: #EAE7DB; --ink: #202020; --white: #FFFFFF;
  --blue: #58A4C6; --yellow: #FFD737; --green: #769965; --coral: #EFA495; --orange: #F47C52; --grey: #545454;
  --sans: 'Haas', Arial, sans-serif; --serif: 'Queens', Georgia, serif;
  --r: 18px;
}
* { box-sizing: border-box; margin: 0; }
html, body { height: 100%; }
body { background: var(--cream); color: var(--ink); font: 300 17px/1.45 var(--sans); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
h1, h2, h3 { font-weight: 700; line-height: 1.1; letter-spacing: -.01em; }
.serif { font-family: var(--serif); font-weight: 500; }
.muted { color: var(--grey); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }

/* Marque */
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; }
.brand img { height: 20px; width: auto; }
.brand .serif { font-size: 1.15em; }

/* Boutons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 22px; border-radius: 999px; border: 1.5px solid var(--ink); background: transparent; font-weight: 500; transition: transform .08s, background .15s; text-decoration: none; }
.btn { color: var(--ink); }
.btn:hover { background: var(--beige); }
.btn:active { transform: scale(.97); }
.btn.primary { background: var(--ink); color: var(--cream); }
.btn.primary:hover { background: #3a3a3a; }
.btn.accent { background: var(--yellow); border-color: var(--ink); }
.btn.accent:hover { background: #ffe066; }
.btn.danger { border-color: var(--orange); color: #b8451f; }
.btn.small { padding: 7px 14px; font-size: 14px; }
.btn.icon { padding: 8px 10px; }
.btn[disabled] { opacity: .4; pointer-events: none; }

/* Champs */
.field { display: grid; gap: 6px; }
.field > label, .lbl { font-weight: 500; font-size: 14px; }
input[type=text], input[type=password], input[type=number], select, textarea {
  width: 100%; padding: 12px 14px; border-radius: 12px; border: 1.5px solid #cfcabb; background: var(--white); outline: none; transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(88,164,198,.35); }
textarea { resize: vertical; min-height: 84px; }

/* Carte */
.card { background: var(--white); border: 1.5px solid var(--ink); border-radius: var(--r); padding: 24px; }

/* Couleurs & symboles des réponses */
.ans-0 { --c: var(--orange); --fg: var(--ink); }
.ans-1 { --c: var(--blue); --fg: var(--ink); }
.ans-2 { --c: var(--yellow); --fg: var(--ink); }
.ans-3 { --c: var(--green); --fg: var(--white); }
.ans-4 { --c: var(--coral); --fg: var(--ink); }
.ans-5 { --c: var(--grey); --fg: var(--white); }
.shape { width: 1em; height: 1em; display: inline-block; flex: none; }
.shape svg { width: 100%; height: 100%; display: block; fill: currentColor; }

/* Toasts & bandeau de connexion */
.conn { position: fixed; left: 50%; top: 10px; transform: translate(-50%, -80px); background: var(--ink); color: var(--cream); padding: 8px 16px; border-radius: 999px; font-size: 14px; z-index: 50; transition: transform .25s; display: flex; gap: 8px; align-items: center; }
.conn.show { transform: translate(-50%, 0); }
.conn::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--yellow); animation: pulse 1s infinite; }
@keyframes pulse { 50% { opacity: .3; } }
.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: var(--ink); color: var(--cream); padding: 12px 20px; border-radius: 999px; z-index: 60; animation: toast 3s forwards; }
@keyframes toast { 0%, 90% { opacity: 1; } 100% { opacity: 0; } }

/* Décor filaire (cercles/carrés contour fin) */
.deco { position: absolute; pointer-events: none; border: 1.5px solid var(--ink); opacity: .9; }
.deco.circle { border-radius: 50%; }
.deco.square { border-radius: 22%; }