/* site/sante/sante.css — LES QUESTIONNAIRES DE SANTÉ MENTALE (GAD-7, PHQ-9), 28/10/2026.
   Complète /assets/style.css (variables --p, --bord, --doux… ; classes .carte .btn .pastille…).
   Mobile d'abord : tout tient en 375 px, cibles tactiles ≥ 44 px, couleurs douces et lisibles. */

/* ── Accueil ─────────────────────────────────────────────────────────────────────────────── */
.s-depart { margin: 4px 0 6px; }
.s-infos { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; padding: 0; }
.s-infos li { background: var(--p-pale); border: 1px solid var(--p-bord); color: var(--p-fonce); border-radius: 99px; padding: 4px 11px; font-size: .84rem; font-weight: 600; }
.s-prudence { font-size: .88rem; color: #334155; margin-top: 12px; }
.s-ligne-aide { display: flex; gap: 8px; align-items: flex-start; font-size: .88rem; color: #1e3a8a; background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 10px; padding: 10px 12px; margin-top: 12px; }
.s-ligne-aide a { color: #1d4ed8; font-weight: 700; }
.s-intro-aide { margin-bottom: 10px; }
.insecable { white-space: nowrap; }      /* « (GAD-7) » ne se coupe pas au tiret sur téléphone */
.s-licence { margin-top: 4px; }

/* ── Questions : une à la fois, grands boutons ──────────────────────────────────────────────── */
#s-questions.ecran, #s-resultat.ecran { max-width: 680px; margin: 0 auto; padding: 22px 0 60px; }
.s-haut { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-weight: 700; font-size: .9rem; color: var(--doux); margin-bottom: 6px; }
.s-haut .lien-btn { min-height: 44px; padding: 8px 4px; }
.s-carte { margin-top: 14px; }
.s-consigne { font-size: .88rem; color: var(--doux); margin-bottom: 10px; }
.s-item { font-size: clamp(1.15rem, 4.4vw, 1.42rem); font-weight: 700; line-height: 1.35; margin-bottom: 18px; outline: none; }
.s-choix { display: grid; gap: 10px; }
.s-option { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 58px; text-align: left; background: #fff; border: 2px solid var(--bord); border-radius: 14px; padding: 12px 16px; font: inherit; font-weight: 650; font-size: 1.02rem; color: var(--texte); cursor: pointer; transition: border-color .12s, background .12s, color .12s; touch-action: manipulation; }
@media (hover: hover) { .s-option:hover { border-color: var(--p-clair); background: var(--p-pale); } }   /* au doigt, pas de survol « collé » sur la question suivante */
.s-option:focus-visible { outline: 3px solid var(--or); outline-offset: 2px; }
.s-option[aria-pressed="true"] { border-color: var(--p); background: var(--p); color: #fff; }
.s-points { display: inline-flex; gap: 4px; flex: none; }
.s-points i { width: 12px; height: 12px; border-radius: 50%; border: 2px solid #94a3b8; }
.s-points i.plein { background: var(--p); border-color: var(--p); }
.s-option[aria-pressed="true"] .s-points i { border-color: #fff; }
.s-option[aria-pressed="true"] .s-points i.plein { background: #fff; }
.s-note { margin-top: 14px; background: #eff6ff; border: 1px solid #bfdbfe; border-left: 5px solid #3b82f6; border-radius: 10px; padding: 10px 12px; font-size: .92rem; color: #1e3a8a; }
.s-nav { display: flex; justify-content: flex-start; margin-top: 8px; }
.s-nav .lien-btn { min-height: 44px; padding: 8px 4px; }
.s-aide-discrete { margin-top: 14px; background: #fff; border: 1px solid var(--bord); border-radius: 12px; padding: 4px 14px; }
.s-aide-discrete summary { cursor: pointer; font-weight: 700; color: #1e3a8a; min-height: 44px; display: flex; align-items: center; }
.s-aide-discrete .aide-bloc { padding-bottom: 10px; }
.s-rien { font-size: .82rem; color: var(--doux); margin-top: 12px; text-align: center; }

/* ── Blocs d'aide (numéros cliquables, choix du pays) ──────────────────────────────────────── */
.aide-pays { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 10px; }
.aide-pays .pastille { min-height: 44px; padding: 8px 13px; font-size: .88rem; }
.aide-lignes { display: grid; gap: 10px; }
.aide-ligne { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.aide-appel { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; width: 100%; background: #fff; border: 2px solid var(--p); border-radius: 12px; padding: 12px 14px; min-height: 56px; text-decoration: none; color: var(--texte); }
@media (hover: hover) { .aide-appel:hover { background: var(--p-pale); } }
.aide-appel:focus-visible, .aide-plus:focus-visible { outline: 3px solid var(--or); outline-offset: 2px; }
.aide-num { font-size: 1.35rem; font-weight: 900; color: var(--p-fonce); white-space: nowrap; }
.aide-quoi { flex: 1 1 190px; display: flex; flex-direction: column; min-width: 0; }
.aide-quoi small { color: #475569; font-size: .84rem; line-height: 1.4; }
.aide-plus { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; font-size: .9rem; font-weight: 700; color: #1d4ed8; }
.aide-danger { margin-top: 10px; font-size: .92rem; font-weight: 600; }
.aide-danger a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0 10px; margin: 2px; border: 2px solid var(--rouge); border-radius: 10px; background: #fff; font-weight: 900; color: var(--rouge); text-decoration: none; }
.aide-source { font-size: .74rem; color: var(--doux); margin-top: 4px; }

/* L'encadré EN HAUT du résultat : impossible à manquer, sans être effrayant */
.aide-alerte { background: #fff7ed; border: 2px solid #fb923c; border-left-width: 8px; border-radius: var(--r); padding: 18px; margin: 0 0 18px; color: #431407; box-shadow: var(--ombre); }
.aide-alerte.aide-urgence { background: #fef2f2; border-color: #dc2626; color: #450a0a; }
.aide-alerte .aide-titre { font-size: 1.25rem; line-height: 1.3; margin-bottom: 8px; outline: none; }
.aide-alerte p { margin-bottom: 8px; }
.aide-alerte .aide-appel { border-color: #ea580c; }
.aide-alerte.aide-urgence .aide-appel { border-color: #dc2626; }
.aide-alerte .aide-num { color: #9a3412; }
.aide-alerte.aide-urgence .aide-num { color: #991b1b; }
.aide-apres { margin-top: 12px; font-weight: 600; }
.aide-bas h3 { font-size: 1.05rem; margin-bottom: 4px; }

/* ── Résultat ──────────────────────────────────────────────────────────────────────────────── */
.r-carte { text-align: center; }
.r-echelle { color: var(--doux); font-size: .88rem; }
.r-score { line-height: 1.1; margin: 6px 0 2px; }
.r-score b { font-size: 3.4rem; font-weight: 900; color: var(--p-fonce); }
.r-score small { font-size: 1.4rem; color: var(--doux); font-weight: 700; }
.r-niveau { font-size: 1.2rem; line-height: 1.3; margin: 4px 0 6px; outline: none; }
.r-seuils { font-size: .76rem; color: var(--doux); margin-top: 8px; }
.r-texte { font-size: 1.02rem; color: #1e293b; max-width: 540px; margin: 12px auto 0; }
.r-conseils h3, .r-finale h3 { font-size: 1.08rem; margin-bottom: 8px; }
.r-conseils ul { padding-left: 20px; }
.r-conseils li { margin-bottom: 6px; }
.r-medecins { margin-top: 10px; font-size: .88rem; color: #334155; background: var(--fond); border: 1px solid var(--bord); border-radius: 10px; padding: 10px 12px; }
.r-finale small { font-weight: 500; color: var(--doux); font-size: .8rem; }
.r-detail summary { cursor: pointer; font-weight: 700; min-height: 44px; display: flex; align-items: center; }
.r-reponses { padding-left: 22px; margin-top: 8px; }
.r-reponses li { padding: 8px 0; border-bottom: 1px solid var(--bord); font-size: .92rem; }
.r-reponses li:last-child { border-bottom: 0; }
.r-item { display: block; }
.r-rep { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; font-weight: 700; color: var(--p-fonce); }

/* La jauge : une zone par niveau publié, repère noir sur le score */
.jauge { margin: 34px 0 4px; }
.jauge-barre { position: relative; display: flex; height: 34px; }
.jauge-zone { flex-basis: 0; min-width: 0; display: flex; align-items: center; justify-content: center; font-size: .72rem; font-weight: 700; color: #334155; white-space: nowrap; overflow: hidden; }
.jauge-zone:first-child { border-radius: 10px 0 0 10px; }
.jauge-zone:last-of-type { border-radius: 0 10px 10px 0; }
.jauge-zone.z0 { background: #dcfce7; } .jauge-zone.z1 { background: #fef9c3; } .jauge-zone.z2 { background: #fde68a; }
.jauge-zone.z3 { background: #fed7aa; } .jauge-zone.z4 { background: #fecaca; }
.jauge-zone.actif { color: #0f172a; font-weight: 900; box-shadow: inset 0 0 0 2px rgba(15, 23, 42, .35); }
.jauge-repere { position: absolute; top: -28px; bottom: -4px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; pointer-events: none; }
.jauge-repere b { background: #0f172a; color: #fff; font-size: .8rem; line-height: 1.5; padding: 0 8px; border-radius: 99px; }
.jauge-repere::after { content: ""; flex: 1; width: 3px; background: #0f172a; border-radius: 2px; }
.jauge-noms { display: flex; margin-top: 6px; }
.jauge-noms span { flex-basis: 0; min-width: 0; font-size: .7rem; line-height: 1.2; color: var(--doux); text-align: center; padding: 0 1px; }
.jauge-noms span.actif { color: var(--texte); font-weight: 800; }

/* Petits triangles d'ouverture (le résumé en « flex » perd le triangle du navigateur) */
.r-detail summary::before, .s-aide-discrete summary::before { content: "▸"; display: inline-block; width: 1.1em; transition: transform .15s; }
.r-detail[open] summary::before, .s-aide-discrete[open] summary::before { transform: rotate(90deg); }

/* « Et maintenant ? » : la règle globale « .suite span » de style.css (suites de nombres du test de QI)
   déborde sur ce bloc ; on la neutralise ici en attendant qu'elle soit restreinte à #q-figure. */
#r-suite .suite { display: block; }
#r-suite .suite span { min-width: 0; padding: 0; text-align: left; font-size: inherit; font-weight: inherit; background: none; border: 0; border-radius: 0; }
#r-suite .suite .suite-icone { font-size: 2rem; }
#r-suite .suite .suite-accroche { font-size: .85rem; }
#r-suite .suite .suite-fleche { font-size: 1.6rem; font-weight: 800; }
/* Cibles tactiles ≥ 44 px pour les boutons communs du bas de résultat (partage, idées de suite) */
#s-resultat .btn-share { min-height: 44px; }
#r-suite .suite-idees a, #r-suite .suite-tout { display: inline-flex; align-items: center; min-height: 44px; }

@media (prefers-reduced-motion: reduce) {
  .r-detail summary::before, .s-aide-discrete summary::before { transition: none; }
  .s-option, #s-barre { transition: none; }
}

/* Impression « pour mon médecin » : le résultat seul */
@media print {
  .entete-origine, .pied, #s-accueil, #s-questions, .share-bar, #r-aff, #r-suite, .fin-boutons, .aide-pays, .s-rien { display: none !important; }
  #s-resultat.ecran { padding: 0; }
  .aide-alerte, .carte { box-shadow: none; break-inside: avoid; }
}