/* Accueil et quiz (chantier 3). Cartes : bordure pleine sur les quatre côtés, jamais d’un seul côté.
   Entrées : ressorts de lib/ressort.js (--ressort-* et --duree-* posées par installerRessorts ; repli ci-dessous). */
:root {
  --bleu-fonce: #0066E0;
  --bleu-clair: #5DB0FF;
  --ressort-snappy: cubic-bezier(.3, 1.3, .5, 1); --duree-snappy: 450ms;
  --ressort-default: cubic-bezier(.2, .9, .3, 1); --duree-default: 650ms;
}
.mono { font: 400 11px/1.45 var(--mono); letter-spacing: .09em; text-transform: uppercase; }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.marque { display: inline-flex; align-items: center; gap: 6px; color: var(--encre); }
.logo-symbole { height: 18px; width: auto; }
.logo-mot { height: 13px; width: auto; }
h1:focus, h2:focus { outline: none; }

/* Bouton principal */
.q-bouton { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 14px 22px; border: 1px solid var(--bleu);
  border-radius: 14px; background: var(--bleu); color: #FFFFFF; font: 600 16px/1.2 var(--texte); cursor: pointer;
  box-shadow: 0 10px 24px #0080FF40; transition: transform var(--duree-snappy) var(--ressort-snappy), background .2s; }
.q-bouton:hover { background: var(--bleu-fonce); }
.q-bouton:active { transform: scale(.97); }
.q-bouton.grand { width: 100%; max-width: 360px; min-height: 58px; font-size: 17px; }

/* Accueil */
.accueil { position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden; background: #FFFFFF; }
.aurore { position: absolute; inset: -30% -30% auto; height: 120%; pointer-events: none; filter: blur(34px);
  background: radial-gradient(38% 30% at 25% 30%, #0080ff3a, transparent 70%), radial-gradient(34% 28% at 78% 22%, #5db0ff4d, transparent 70%), radial-gradient(30% 26% at 60% 62%, #3d6bff26, transparent 70%);
  animation: derive 10s ease-in-out infinite alternate; }
@keyframes derive { to { transform: translate(5%, 4%) rotate(8deg) scale(1.06); } }
.trame { position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(#0080ff10 1px, transparent 1px), linear-gradient(90deg, #0080ff10 1px, transparent 1px); background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(70% 55% at 50% 35%, #000 20%, transparent 75%); mask-image: radial-gradient(70% 55% at 50% 35%, #000 20%, transparent 75%); }
.accueil-contenu { position: relative; max-width: 560px; margin: 0 auto; padding: 18px 16px 32px; text-align: center; }
.accueil-haut { display: flex; justify-content: center; min-height: 24px; margin-bottom: 40px; }
.surtitre { display: inline-flex; align-items: center; gap: 8px; margin: 0; color: var(--bleu); }
.point { width: 8px; height: 8px; border-radius: 50%; background: var(--bleu); box-shadow: 0 0 0 4px #0080FF26; }
.accueil h1 { margin: 14px 0 12px; font: 800 clamp(32px, 9vw, 46px)/1.08 var(--titre); letter-spacing: -.02em; }
.chapeau { margin: 0 auto 26px; max-width: 460px; color: var(--gris); font-size: 17px; }
.accueil .petit { margin: 14px 0 0; color: var(--gris); }
.apercu { width: min(300px, 80vw); margin: 22px auto 0; }
.accueil-pied { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0 4px; margin-top: 28px; color: var(--gris); font-size: 16px; }
.accueil-pied a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; color: var(--gris); }   /* cibles de 44 px */

/* Radar (accueil et quiz) */
.radar { display: block; width: 100%; height: auto; overflow: visible; }
.radar .g { fill: none; stroke: #DDE5EE; stroke-width: 1; }
.radar text { font: 400 9px var(--mono); fill: var(--gris); letter-spacing: .04em; text-transform: uppercase; transition: fill .3s; }
.radar text.actif { fill: var(--bleu); }
.q-radar .radar text, .apercu .radar text { font-size: 12.5px; }
.radar .forme { fill: #0080ff22; stroke: var(--bleu); stroke-width: 2; stroke-linejoin: round; }
.radar .fantome { display: none; }

/* Quiz */
body.en-quiz { background: var(--fond); }
.q { max-width: 560px; min-height: 100vh; min-height: 100svh; margin: 0 auto; padding: 8px 16px 28px; display: flex; flex-direction: column; }
.q-barre { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 48px; }
.q-retour { justify-self: start; display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 8px 0 0; border: 0; background: none;
  color: var(--gris); font: 400 15px var(--texte); cursor: pointer; }
.q-logo { justify-self: center; }
.q-compte { justify-self: end; color: var(--gris); }
.q-progression { height: 4px; border-radius: 4px; background: #DDE5EE; overflow: hidden; }
.q-progression span { display: block; height: 100%; background: linear-gradient(90deg, var(--bleu-clair), var(--bleu)); transform-origin: left; transform: scaleX(0);
  transition: transform var(--duree-default) var(--ressort-default); }
.q-radar { width: min(230px, 62vw); margin: 10px auto 0; transition: width var(--duree-default) var(--ressort-default), opacity .3s, margin .3s; }
.q.profil .q-radar { width: 0; opacity: 0; margin-top: 0; }
.q-section { margin: 8px 0 0; color: var(--bleu); text-align: center; min-height: 16px; }
.q-carte { margin-top: 10px; transition: transform var(--duree-default) var(--ressort-default), opacity .25s; }
.q-carte.sort-haut { transform: translateY(-26px); opacity: 0; transition: transform .17s ease-in, opacity .17s; }
.q-carte.sort-bas { transform: translateY(26px); opacity: 0; transition: transform .17s ease-in, opacity .17s; }
.q-carte.entre-bas { transform: translateY(30px); opacity: 0; transition: none; }
.q-carte.entre-haut { transform: translateY(-30px); opacity: 0; transition: none; }
.q-titre { margin: 0 0 16px; font: 800 23px/1.22 var(--titre); text-align: center; letter-spacing: -.01em; }
.q-aide { margin: -6px 0 14px; color: var(--gris); font-size: 15px; text-align: center; }
.q-options { display: grid; gap: 10px; }
.q-options.nombreuses { grid-template-columns: 1fr 1fr; gap: 8px; }
.q-option, .q-bouton, .q-retour { touch-action: manipulation; }
.q-option { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 56px; padding: 12px 16px;
  border: 1px solid var(--bordure); border-radius: 14px; background: #FFFFFF; color: var(--encre); font: 400 16px/1.3 var(--texte); text-align: left; cursor: pointer;
  box-shadow: 0 1px 2px #1C16290D; transition: border-color .2s, background .2s, color .2s, box-shadow .2s; }
.q-options.nombreuses .q-option { min-height: 52px; padding: 10px 12px; font-size: 15px; }
@media (hover: hover) { .q-option:hover { border-color: var(--bleu-clair); } }
.q-option .coche { flex: none; opacity: 0; transform: scale(.4); transition: opacity .15s, transform var(--duree-snappy) var(--ressort-snappy); }
.q-option.choisi { border-color: var(--bleu); background: var(--bleu); color: #FFFFFF; box-shadow: 0 10px 22px #0080FF38; }
.q-option.choisi .coche { opacity: 1; transform: none; }
.q-option.choisi:not(.deja) { animation: pop var(--duree-snappy) var(--ressort-snappy); }
@keyframes pop { from { transform: scale(.96); } to { transform: none; } }
.q-curseur { display: grid; gap: 10px; justify-items: center; }
.q-valeur { font: 800 44px/1.1 var(--titre); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.q-curseur input[type="range"] { width: 100%; height: 44px; accent-color: var(--bleu); cursor: pointer; }
.q-bornes { display: flex; justify-content: space-between; width: 100%; margin-top: -8px; color: var(--gris); }
.q-plus { margin: 4px 0 0; color: var(--encre); font: 600 16px/1.35 var(--texte); text-align: center; min-height: 22px; }
.q-source { margin: -4px 0 0; color: var(--gris); text-align: center; }
.q-curseur .q-bouton { width: 100%; margin-top: 8px; }
.q-indice { margin: 18px 0 0; color: var(--gris); text-align: center; min-height: 16px; }
.q.fini .q-radar { width: min(280px, 70vw); }
.q-fin { margin-top: 18px; }
.q-fin::after { content: ''; display: block; width: 120px; height: 3px; margin: 18px auto 0; border-radius: 3px;
  background: linear-gradient(90deg, transparent, var(--bleu), transparent) 0 0 / 200% 100%; animation: glisse 1s linear infinite; }
@keyframes glisse { to { background-position: -200% 0; } }
.sans-js { padding: 16px; text-align: center; }

@media (min-width: 720px) {
  .accueil-contenu { padding-top: 32px; }
  .accueil-haut { margin-bottom: 64px; }
  .q-titre { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}