/* Mise en page du questionnaire : une question par écran. */
  html, body { height: 100%; }
  body { display: flex; flex-direction: column; min-height: 100dvh; overflow: hidden; }

  .progression { position: relative; height: 6px; background: var(--filet-doux); flex: none; }
  .progression span { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--accent); transition: width .5s var(--douceur); }

  .entete {
    display: flex; align-items: center; justify-content: space-between; gap: 1em;
    padding: 14px clamp(16px, 4vw, 48px); flex: none; font-size: .85rem; color: var(--encre-douce);
  }
  .signature { font-weight: 700; color: var(--encre); }
  .ou { text-align: right; }
  .ou strong { color: var(--encre); font-weight: 700; }

  #scene { position: relative; flex: 1; min-height: 0; }
  .ecran {
    position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain;
    display: grid; padding: 24px clamp(16px, 6vw, 96px) 120px;
  }
  .ecran-contenu { width: 100%; max-width: 46rem; margin: auto; }
  .ecran.large .ecran-contenu { max-width: 72rem; }

  .entre-bas { animation: entre-bas .55s var(--douceur) both; }
  .entre-haut { animation: entre-haut .55s var(--douceur) both; }
  .sort-haut { animation: sort-haut .35s ease-in both; pointer-events: none; }
  .sort-bas { animation: sort-bas .35s ease-in both; pointer-events: none; }
  @keyframes entre-bas { from { opacity: 0; transform: translateY(48px); } }
  @keyframes entre-haut { from { opacity: 0; transform: translateY(-48px); } }
  @keyframes sort-haut { to { opacity: 0; transform: translateY(-48px); } }
  @keyframes sort-bas { to { opacity: 0; transform: translateY(48px); } }

  .q-num { display: flex; align-items: center; gap: .4em; color: var(--accent); font-weight: 700; font-size: .9em; margin-bottom: .6em; }
  .q-num svg { width: 1em; height: 1em; }
  .q-titre { font-size: var(--t-titre); line-height: 1.12; font-weight: 700; letter-spacing: -.015em; }
  .q-aide { margin-top: .6em; font-size: var(--t-aide); color: var(--encre-douce); }
  .champ { margin-top: 1.6em; }

  .champ-text .saisie, .champ-champs input.saisie, .precision .saisie {
    font-size: var(--t-saisie); padding: .25em 0; border: 0; border-bottom: 2px solid var(--filet);
    border-radius: 0; background: transparent;
  }
  .champ-text .saisie:focus, .champ-champs input.saisie:focus, .precision .saisie:focus { box-shadow: none; border-bottom-color: var(--accent); border-bottom-width: 3px; }
  .champ-textarea .saisie, .champ-champs textarea.saisie { font-size: 1.1em; }
  .champ-champs .sous-label { font-size: .85em; color: var(--encre-douce); font-weight: 600; margin-bottom: 0; }
  .champ-champs .sous-champ + .sous-champ, .champ-guided .sous-champ + .sous-champ { margin-top: 1.4em; }
  .sous-aide { font-size: .8em; color: var(--encre-douce); }
  .champ-guided .saisie { font-size: 1.05em; }
  .choix-liste:not(.ambiances) { max-width: 34rem; }
  .champ-multi .choix-liste { max-width: 40rem; }
  .choix { font-size: 1.05em; }
  .precision { margin-top: 1.2em; max-width: 34rem; animation: entre-bas .35s var(--douceur) both; }
  .precision[hidden] { display: none; }
  .precision .sous-label { font-size: .85em; color: var(--encre-douce); font-weight: 600; }

  .actions { display: flex; flex-wrap: wrap; align-items: center; gap: .8em 1.2em; margin-top: 1.8em; }
  .indice { font-size: .85rem; color: var(--encre-douce); }
  kbd { font-family: inherit; font-weight: 700; padding: .05em .4em; border: 1px solid var(--filet); border-radius: 5px; }
  .erreur { margin-top: 1em; }

  /* Accueil */
  .accueil-titre { font-size: clamp(2.6rem, 1.4rem + 5vw, 6.5rem); line-height: .98; font-weight: 800; letter-spacing: -.03em; }
  .accueil-texte { margin-top: .8em; font-size: var(--t-aide); color: var(--encre-douce); max-width: 36rem; }
  .accueil-points { list-style: none; padding: 0; margin: 1.4em 0 0; display: grid; gap: .4em; font-size: var(--t-aide); }
  .accueil-points li { display: flex; gap: .6em; align-items: baseline; }
  .accueil-points li::before { content: ""; flex: none; width: .55em; height: .55em; border-radius: 50%; background: var(--accent); transform: translateY(-.1em); }
  .accueil-pdf { margin-top: 2em; font-size: .85em; color: var(--encre-douce); }
  .accueil-pdf a { color: inherit; }

  /* Revenir à la question précédente : un vrai bouton, à côté de OK */
  /* Revenir en arrière : dans le coin en bas à gauche, loin de OK */
  .btn-retour {
    position: fixed; left: clamp(16px, 3vw, 40px); bottom: clamp(16px, 3vw, 32px); z-index: 5;
    border-color: var(--filet); box-shadow: var(--ombre);
  }
  .btn-retour svg { width: 1.1em; height: 1.1em; margin-left: -.2em; }

  /* Fin */
  .fin-titre { font-size: var(--t-titre); line-height: 1.1; font-weight: 800; letter-spacing: -.02em; }
  .fin-titre:focus { outline: none; }
  .resume-titre { margin-top: 1.8em; font-size: .8em; text-transform: uppercase; letter-spacing: .08em; color: var(--accent); }
  .resume-ligne dd.vide { color: var(--encre-douce); font-weight: 400; }
  .note-loi { margin-top: 1.6em; max-width: 40rem; }
  .essai { margin-top: 1.6em; padding: .8em 1em; border: 1.5px dashed var(--filet); border-radius: 12px; font-size: .85em; color: var(--encre-douce); }
  .essai summary { cursor: pointer; font-weight: 700; color: var(--encre); }
  .essai pre { white-space: pre-wrap; font-family: inherit; margin: .8em 0 0; color: var(--encre); }

  @media (max-width: 600px) {
    .indice { display: none; }
    .ecran { padding-bottom: 96px; }
    /* Au téléphone, OK prend toute la largeur : c'est clairement lui qu'on touche */
    .actions .btn-principal { flex: 1 1 100%; min-height: 56px; font-size: 1.1em; }
    .ou span { display: none; }
  }