/* KREATIVE SCAN · feuille du parcours · 2026-10-02
 *
 * Chargee par UNE seule page, donc aucun risque de derive de cache entre
 * plusieurs pages : le `?v=` ne vit qu'a un endroit.
 *
 * Les champs sont a 16 px sous pointeur grossier, et ce n'est pas un detail de
 * confort : en dessous, iOS ZOOME a la mise au point et le parcours devient
 * penible a traverser sur le telephone, qui est l'appareil de la majorite des
 * visiteurs de ce site.
 */
/* Cette page ne charge PAS styles.css : elle n'herite donc d'aucune remise a
 * zero, et `box-sizing` vaut `content-box` par defaut. Mesure avant correctif,
 * dans Chrome a 390 px : un champ en `width: 100%` avec 14 px de marge interne
 * de chaque cote faisait defiler la page de 24 px sur le cote. Aucun element ne
 * sortait de l'ecran a la mesure, ce qui rend le defaut invisible a un controle
 * qui ne regarde que les rectangles : c'est le debordement SYMETRIQUE deja
 * documente dans le CLAUDE.md du projet. */
*, *::before, *::after { box-sizing: border-box; }

:root {
  --sc-red: #AE0000;
  --sc-ink: #111111;
  --sc-gris: #555555;
  --sc-ligne: #E6E6E6;
  --sc-fond: #F2F2F2;
}

.sc-page {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  color: var(--sc-ink);
  font-family: var(--font-b, system-ui, sans-serif);
}

/* Progression par CHAPITRE. Le handoff interdit « Question 37 sur 64 » : un
 * compteur qui annonce soixante-quatre questions fait abandonner avant la
 * premiere. */
.sc-chapitres {
  display: flex;
  gap: 4px;
  padding: 16px;
  list-style: none;
  margin: 0;
  border-bottom: 1px solid var(--sc-ligne);
  overflow-x: auto;
}
.sc-chapitre {
  flex: 1 1 0;
  min-width: 0;
  font-family: var(--font-accent, system-ui, sans-serif);
  font-size: 11.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--sc-gris);
  padding-bottom: 8px;
  border-bottom: 3px solid var(--sc-ligne);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sc-chapitre[data-etat="encours"] { color: var(--sc-red); border-bottom-color: var(--sc-red); }
.sc-chapitre[data-etat="fait"] { color: var(--sc-ink); border-bottom-color: var(--sc-ink); }

.sc-corps {
  flex: 1;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 32px 16px 120px;
  min-width: 0;
}

.sc-titre {
  font-family: var(--font-h, system-ui, sans-serif);
  font-size: clamp(1.4rem, min(6vw, 2.2rem), 2.2rem);
  line-height: 1.15;
  margin: 0 0 8px;
}
.sc-aide { color: var(--sc-gris); margin: 0 0 24px; font-size: .95rem; }

/* Une carte par choix. Toute la carte est cliquable : sur telephone, viser une
 * case a cocher de 16 px est le meilleur moyen de se tromper de reponse. */
.sc-choix { display: grid; gap: 8px; margin: 0 0 24px; }
.sc-choix label {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  border: 1px solid var(--sc-ligne);
  background: #FFFFFF;
  cursor: pointer;
  min-height: 48px;
}
.sc-choix label:hover { border-color: var(--sc-ink); }
.sc-choix input { margin: 2px 0 0; width: 18px; height: 18px; accent-color: var(--sc-red); flex: none; }
.sc-choix input:focus-visible { outline: 2px solid var(--sc-red); outline-offset: 2px; }
.sc-choix label:has(input:checked) { border-color: var(--sc-red); box-shadow: inset 3px 0 0 var(--sc-red); }
.sc-choix-l { display: block; }
.sc-choix-a { display: block; color: var(--sc-gris); font-size: .9rem; margin-top: 2px; }

.sc-champ { display: grid; gap: 6px; margin: 0 0 16px; }
.sc-champ > span { font-size: .9rem; color: var(--sc-gris); }
.sc-page input[type="text"],
.sc-page input[type="email"],
.sc-page input[type="tel"],
.sc-page input[type="date"],
.sc-page input[type="number"],
.sc-page select,
.sc-page textarea {
  width: 100%;
  font: inherit;
  font-size: 16px;
  padding: 12px 14px;
  border: 1px solid var(--sc-ligne);
  background: #FFFFFF;
  color: var(--sc-ink);
  border-radius: 0;
}
.sc-page textarea { min-height: 140px; resize: vertical; }
.sc-page :is(input, select, textarea):focus-visible { outline: 2px solid var(--sc-red); outline-offset: 1px; }

.sc-repete { border: 1px solid var(--sc-ligne); padding: 16px; margin: 0 0 12px; }
.sc-repete h3 { font-family: var(--font-h, system-ui, sans-serif); font-size: 1rem; margin: 0 0 12px; }

.sc-matrice { width: 100%; border-collapse: collapse; margin: 0 0 24px; font-size: .9rem; }
.sc-matrice th, .sc-matrice td { border-bottom: 1px solid var(--sc-ligne); padding: 10px 6px; text-align: center; }
.sc-matrice th:first-child, .sc-matrice td:first-child { text-align: left; }
.sc-matrice thead th { font-family: var(--font-accent, system-ui, sans-serif); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--sc-gris); }

.sc-rang { display: grid; gap: 8px; margin: 0 0 24px; }
.sc-rang-ligne { display: flex; gap: 12px; align-items: center; border: 1px solid var(--sc-ligne); padding: 10px 14px; }
.sc-rang-ligne select { max-width: 90px; }

/* Barre d'action fixe : sur un parcours long, le bouton doit toujours etre a
 * portee du pouce, jamais a chercher en bas de page. */
.sc-barre {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  background: #FFFFFF;
  border-top: 1px solid var(--sc-ligne);
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}
.sc-barre-in { width: 100%; max-width: 720px; margin: 0 auto; display: flex; gap: 12px; align-items: center; }
.sc-btn {
  font: inherit;
  font-weight: 700;
  padding: 14px 24px;
  border: 1px solid var(--sc-red);
  background: var(--sc-red);
  color: #FFFFFF;
  cursor: pointer;
  min-height: 48px;
  border-radius: 0;
  flex: 1;
}
.sc-btn:disabled { opacity: .5; cursor: not-allowed; }
.sc-btn--fin { background: #FFFFFF; color: var(--sc-red); flex: none; }
.sc-btn:focus-visible { outline: 2px solid var(--sc-ink); outline-offset: 2px; }

.sc-etat { color: var(--sc-gris); font-size: .85rem; min-height: 1.2em; }
.sc-erreur { color: var(--sc-red); font-weight: 600; }

.sc-fin { text-align: left; padding: 48px 0; }
.sc-fin h1 { font-family: var(--font-h, system-ui, sans-serif); font-size: clamp(1.6rem, min(7vw, 2.6rem), 2.6rem); margin: 0 0 16px; }
.sc-fin p { color: var(--sc-gris); max-width: 52ch; }
.sc-filet { width: 56px; height: 3px; background: var(--sc-red); margin: 0 0 24px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}