/* Sobre et apaisé : peu de contraste agressif, pas d'animation, de grandes
 * cibles tactiles. Clair et sombre suivent le réglage de l'appareil. */

:root {
  --fond: #f5f3ee;
  --surface: #fffdf9;
  --texte: #2c3034;
  --doux: #5f666c;
  --ligne: #dcd8cf;
  --accent: #3f6f78;
  --accent-doux: #dbe8ea;
  --rail: #e7e3da;
  --seuil: #a5683a;
  --temoin: #8a9399;
  --autiste: #5a4f86;
  --danger: #9a3b3b;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fond: #1b1e21;
    --surface: #23272b;
    --texte: #e4e1da;
    --doux: #a3a9ad;
    --ligne: #3a3f44;
    --accent: #84b4bc;
    --accent-doux: #2c3b3e;
    --rail: #33383d;
    --seuil: #d69a68;
    --temoin: #9aa3a9;
    --autiste: #a99fd6;
    --danger: #d98a8a;
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: 'Figtree', system-ui, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
}

main {
  max-width: 44rem;
  margin: 0 auto;
  padding: 1.5rem 1rem 4rem;
}

h1, h2 { font-weight: 600; line-height: 1.3; }
h1 { font-size: 1.75rem; margin: 0 0 .5rem; }
h2 { font-size: 1.2rem; margin: 2rem 0 1rem; }

.entete { margin: 1rem 0 1.5rem; }
.chapeau { color: var(--doux); margin: 0; }

.encart {
  background: var(--accent-doux);
  border-radius: .75rem;
  padding: .25rem 1.25rem;
}

button { font: inherit; color: inherit; cursor: pointer; }
button:disabled { opacity: .35; cursor: default; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.bouton {
  background: var(--accent);
  color: var(--surface);
  border: 0;
  border-radius: .6rem;
  padding: .8rem 1.4rem;
  font-weight: 600;
}

.lien {
  background: none;
  border: 0;
  padding: .5rem 0;
  color: var(--accent);
  font-weight: 500;
}
.lien.danger { color: var(--danger); }

/* Accueil */

.cartes { display: grid; gap: .9rem; }

.carte {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--ligne);
  border-radius: .9rem;
  padding: 1.1rem 1.25rem;
}
.carte:hover { border-color: var(--accent); }
.carte-tete { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.carte-nom { font-weight: 600; font-size: 1.15rem; color: var(--accent); }
.carte-duree { color: var(--doux); font-size: .9rem; white-space: nowrap; }
.carte-titre { font-weight: 500; }
.carte-resume { color: var(--doux); font-size: .95rem; }
.carte-statut { font-size: .9rem; font-weight: 500; margin-top: .3rem; }

.actions-accueil { margin: 1.5rem 0; }

.apropos {
  border-top: 1px solid var(--ligne);
  padding: .75rem 0;
}
.apropos summary { font-weight: 600; cursor: pointer; padding: .25rem 0; }

/* Questionnaire */

.barre-haut { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.q-nom { color: var(--doux); font-size: .9rem; }

.progression { height: .4rem; background: var(--rail); border-radius: 1rem; margin: .75rem 0; overflow: hidden; }
#progression-barre { height: 100%; width: 0; background: var(--accent); }

.compteur { color: var(--doux); font-size: .9rem; margin: 0; }
.consigne { color: var(--doux); font-size: .95rem; }
.avertissement { font-size: .9rem; color: var(--seuil); }

.question {
  font-size: 1.35rem;
  font-weight: 500;
  margin: 1.5rem 0;
  min-height: 4.5em;
}
.question:focus { outline: none; }

.reponses { display: grid; gap: .6rem; }

.reponse {
  display: flex;
  align-items: center;
  gap: .9rem;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--ligne);
  border-radius: .7rem;
  padding: .85rem 1rem;
  min-height: 3.2rem;
}
.reponse:hover { border-color: var(--accent); }
.reponse[aria-pressed="true"] { border: 2px solid var(--accent); background: var(--accent-doux); }
.touche {
  flex: none;
  width: 1.7rem; height: 1.7rem;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--ligne);
  color: var(--doux);
  font-size: .85rem;
}

.navigation { display: flex; justify-content: space-between; margin-top: 1.5rem; }

/* Profil */

.legende { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; font-size: .85rem; color: var(--doux); margin: 1.5rem 0 0; }
.legende-item { display: inline-flex; align-items: center; gap: .4rem; }
.pastille { display: inline-block; width: .8rem; height: .8rem; border-radius: 50%; }
.pastille.rempli { background: var(--accent); border-radius: .2rem; }
.pastille.seuil { background: var(--seuil); width: .25rem; height: 1rem; border-radius: 0; }
.pastille.temoin { background: var(--temoin); }
.pastille.autiste { background: var(--autiste); }

.resultat {
  background: var(--surface);
  border: 1px solid var(--ligne);
  border-radius: .9rem;
  padding: .5rem 1.25rem 1rem;
  margin: 1.25rem 0;
  break-inside: avoid;
}
.resultat-tete h2 { margin: .75rem 0 0; }
.resultat-date { color: var(--doux); font-size: .9rem; margin: .1rem 0 .5rem; }

.ligne { padding: .8rem 0; border-top: 1px solid var(--ligne); break-inside: avoid; }
.ligne.total { border-top: 0; }
.ligne-tete { display: flex; justify-content: space-between; gap: 1rem; font-weight: 600; }
.ligne.total .ligne-score { font-size: 1.2rem; color: var(--accent); }
.ligne-lecture { color: var(--doux); font-size: .92rem; margin: .4rem 0 0; }

.jauge { padding: .55rem 0 .3rem; }
.rail { position: relative; height: .75rem; background: var(--rail); border-radius: 1rem; }
.rempli { height: 100%; background: var(--accent); border-radius: 1rem; }
.marque.seuil {
  position: absolute; top: -.3rem; bottom: -.3rem; width: .2rem;
  margin-left: -.1rem; background: var(--seuil); border-radius: .1rem;
}
.point {
  position: absolute; top: 50%; width: .8rem; height: .8rem;
  margin: -.4rem 0 0 -.4rem; border-radius: 50%;
  border: 2px solid var(--surface);
}
.point.temoin { background: var(--temoin); }
.point.autiste { background: var(--autiste); }

.source { font-size: .8rem; color: var(--doux); margin: .8rem 0 0; }
.note, .aide { font-size: .85rem; color: var(--doux); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 1.5rem; }

@media (max-width: 30rem) {
  h1 { font-size: 1.5rem; }
  .question { font-size: 1.2rem; }
}

/* Impression et PDF : le profil seul, sur fond blanc, couleurs conservées. */
@media print {
  :root {
    --fond: #fff; --surface: #fff; --texte: #1d1f21; --doux: #4a5055;
    --ligne: #d4d0c8; --accent: #3f6f78; --accent-doux: #eef3f4; --rail: #e7e3da;
    --seuil: #a5683a; --temoin: #8a9399; --autiste: #5a4f86;
  }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body { font-size: 11pt; }
  main { max-width: none; padding: 0; }
  .ecran-seul, #accueil, #questionnaire { display: none !important; }
  .resultat { border-color: var(--ligne); }
  @page { margin: 14mm; }
}