/* ==========================================================================
   Simulation d'examen en ligne — passeur et pages d'état (phase 9)

   Repose sur les jetons du Design System 2 (client_design_system2.css) :
   fond crème, encre, filets, rouge de marque pour la seule action signature
   de l'écran, vert sémantique pour la réponse choisie et la progression,
   ambre puis rouge pour le chronomètre. Nunito, rayons 12 px (contrôles) et
   16 px (cartes). Préfixe `sim-` : ces classes vivent ici et nulle part
   ailleurs. Aucun autre framework n'est chargé sur ces pages.
   ========================================================================== */

.sim-body { margin: 0; background: var(--color-creme); color: var(--color-encre); font-family: var(--font-nunito); }
.sim-root { min-height: 100vh; display: flex; flex-direction: column; }
.sim-root *:focus-visible { outline: 3px solid var(--color-rouge); outline-offset: 2px; border-radius: 4px; }
.sim-root button { font-family: inherit; }
.sim-root .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; }

/* ---- Chargement / pages d'état ---------------------------------------- */
.sim-loading, .sim-gate__main { flex: 1; display: flex; align-items: center; justify-content: center; padding: 32px 16px; }
.sim-loading__card, .sim-gate__card { max-width: 560px; width: 100%; padding: 36px 32px; text-align: center; }
.sim-loading__title { font: 700 18px/1.4 var(--font-nunito); margin: 0 0 8px; }
.sim-loading__support, .sim-gate__support { color: var(--color-encre-2); font-size: 14px; margin: 18px 0 0; }
.sim-gate__logo { display: block; margin: 0 auto 18px; max-width: 140px; }
.sim-gate__title { font: 800 26px/1.2 var(--font-nunito); letter-spacing: -.01em; margin: 0 0 12px; }
.sim-gate__body { font-size: 16px; line-height: 1.5; color: var(--color-encre-2); margin: 0; }
.sim-gate__cta { display: inline-block; margin-top: 22px; }
.sim-gate__lang { margin: 14px 0 0; font-size: 13px; }
.sim-gate__lang a { color: var(--color-encre-2); text-decoration: none; }
.sim-gate__lang a[aria-current="true"] { color: var(--color-encre); font-weight: 700; }
.sim-gate__support a { color: var(--color-encre-2); }

/* ---- Barre du haut ------------------------------------------------------ */
.sim-top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 16px; padding: 10px 20px;
           background: rgba(250, 247, 242, .96); backdrop-filter: blur(6px); border-bottom: 1px solid var(--color-filet); }
.sim-top__brand { display: flex; align-items: center; gap: 10px; font-weight: 800; letter-spacing: -.01em; }
.sim-top__brand img { height: 28px; width: auto; display: block; }
.sim-top__test { color: var(--color-encre-2); font-size: 14px; font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sim-top__lang { display: flex; gap: 2px; border: 1px solid var(--color-filet-fort); border-radius: 12px; padding: 2px; }
.sim-top__lang button { border: 0; background: transparent; padding: 4px 10px; border-radius: 12px; font-size: 13px; font-weight: 700; color: var(--color-encre-2); cursor: pointer; }
.sim-top__lang button[aria-pressed="true"] { background: var(--color-surface); color: var(--color-encre); box-shadow: 0 1px 2px rgba(0,0,0,.06); }

/* ---- Rangée d'état : progression + chronomètre ------------------------- */
.sim-status { display: flex; align-items: center; gap: 20px; padding: 12px 20px 0; max-width: 1180px; margin: 0 auto; width: 100%; box-sizing: border-box; }
.sim-progress { flex: 1; min-width: 0; }
.sim-progress__label { font-size: 14px; font-weight: 700; margin-bottom: 6px; display: flex; justify-content: space-between; }
.sim-progress__bar, .sim-timer__bar { height: 6px; border-radius: 4px; background: var(--color-filet); overflow: hidden; }
/* Les remplissages bougent par transform (pas par width) : aucun recalcul de mise en page. */
.sim-progress__fill { height: 100%; width: 100%; background: var(--color-succes); border-radius: 4px; transform-origin: left center; transform: scaleX(0); transition: transform .25s ease; }
.sim-timer { width: 220px; }
.sim-timer__label { font-size: 14px; font-weight: 700; display: flex; justify-content: space-between; margin-bottom: 6px; }
.sim-timer__value { font-variant-numeric: tabular-nums; }
.sim-timer__fill { height: 100%; width: 100%; background: var(--color-succes); border-radius: 4px; transform-origin: left center; transform: scaleX(1); transition: transform 1s linear, background-color .3s; }
.sim-timer--warn .sim-timer__fill, .sim-timer--warn .sim-timer__value { background: var(--color-attention); color: var(--color-attention); }
.sim-timer--warn .sim-timer__value { background: transparent; }
.sim-timer--danger .sim-timer__fill { background: var(--color-rouge); }
.sim-timer--danger .sim-timer__value { color: var(--color-rouge); font-weight: 800; }
.sim-timer--untimed .sim-timer__bar { display: none; }

/* ---- Corps ---------------------------------------------------------------- */
.sim-main { flex: 1; width: 100%; max-width: 1180px; margin: 0 auto; padding: 16px 20px 110px; box-sizing: border-box; }
.sim-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.sim-single { max-width: 820px; margin: 0 auto; }
@media (min-width: 1024px) { .sim-grid { grid-template-columns: minmax(0, 7fr) minmax(300px, 5fr); align-items: start; } }
.sim-card { background: var(--color-surface); border: 1px solid var(--color-filet); border-radius: 16px; padding: 24px 26px; box-shadow: 0 1px 2px rgba(44, 38, 34, .04); }
.sim-card__eyebrow { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--color-encre-2); margin: 0 0 8px; }
.sim-card h1, .sim-card h2 { margin: 0 0 12px; font-weight: 800; letter-spacing: -.01em; line-height: 1.2; }
.sim-card h1 { font-size: 28px; }
.sim-card h2 { font-size: 22px; }
.sim-card p, .sim-card li { font-size: 16px; line-height: 1.55; }
.sim-card ul { padding-left: 20px; margin: 8px 0 0; }
.sim-card li + li { margin-top: 6px; }
.sim-muted { color: var(--color-encre-2); }

.sim-prompt { font-size: 18px; line-height: 1.5; font-weight: 600; margin: 0 0 16px; }
.sim-figure { display: flex; justify-content: center; margin: 8px 0 4px; }
.sim-figure svg { max-width: 100%; height: auto; }
.sim-passage { max-height: 62vh; overflow: auto; padding-right: 8px; }
.sim-passage h2 { font-size: 18px; }
.sim-passage p { font-size: 16px; line-height: 1.6; }
.sim-passage p + p { margin-top: 12px; }

/* ---- Réponses ---------------------------------------------------------------- */
.sim-choices { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.sim-choice { display: flex; align-items: flex-start; gap: 14px; width: 100%; text-align: left; padding: 14px 16px; border-radius: 12px;
              border: 1.5px solid var(--color-filet-fort); background: var(--color-surface); color: var(--color-encre); font-size: 16px; line-height: 1.45; cursor: pointer;
              transition: border-color .15s, background-color .15s, box-shadow .15s; }
.sim-choice:hover { border-color: var(--color-encre-2); background: var(--color-hover); }
.sim-choice__key { flex: 0 0 30px; height: 30px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center;
                   font-weight: 800; font-size: 14px; background: var(--color-hover); color: var(--color-encre-2); }
.sim-choice[aria-checked="true"] { border-color: var(--color-succes); background: var(--color-succes-bg); box-shadow: 0 0 0 3px rgba(46, 125, 82, .15); }
.sim-choice[aria-checked="true"] .sim-choice__key { background: var(--color-succes); color: #fff; }
.sim-choice--dk { margin-top: 6px; border-style: dashed; color: var(--color-encre-2); }
.sim-choice--dk[aria-checked="true"] { color: var(--color-encre); }
.sim-choice--flash { animation: sim-flash .4s ease; }
@keyframes sim-flash { 0% { box-shadow: 0 0 0 0 rgba(46,125,82,.35); } 100% { box-shadow: 0 0 0 8px rgba(46,125,82,0); } }
@media (prefers-reduced-motion: reduce) { .sim-choice--flash { animation: none; } .sim-progress__fill, .sim-timer__fill { transition: none; } }

/* ---- Navigation basse ----------------------------------------------------- */
.sim-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: rgba(250, 247, 242, .97); border-top: 1px solid var(--color-filet); }
.sim-nav__inner { max-width: 1180px; margin: 0 auto; padding: 12px 20px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sim-nav__spacer { flex: 1; }
.sim-btn { border-radius: 12px; padding: 10px 16px; font-weight: 700; font-size: 15px; cursor: pointer; border: 1.5px solid var(--color-filet-fort);
           background: var(--color-surface); color: var(--color-encre); transition: background-color .15s, border-color .15s; }
.sim-btn:hover { background: var(--color-hover); border-color: var(--color-encre-2); }
.sim-btn:disabled { opacity: .45; cursor: not-allowed; }
.sim-btn--ghost { border-color: transparent; background: transparent; color: var(--color-encre-2); }
.sim-btn--ghost:hover { background: var(--color-hover); border-color: transparent; }
.sim-btn--signature { background: var(--color-rouge); border-color: var(--color-rouge); color: #fff; padding: 12px 22px; font-size: 16px; }
.sim-btn--signature:hover { background: var(--color-rouge-fonce); border-color: var(--color-rouge-fonce); }
.sim-btn--lg { padding: 14px 26px; font-size: 17px; }

/* ---- Fenêtres modales (instructions, problème, révision) --------------- */
.sim-modal { position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(44, 38, 34, .45); }
.sim-modal__card { background: var(--color-surface); border-radius: 20px; max-width: 640px; width: 100%; max-height: 88vh; overflow: auto; padding: 26px 28px; box-shadow: 0 18px 50px rgba(0,0,0,.2); }
.sim-modal__actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; flex-wrap: wrap; }
.sim-modal textarea { width: 100%; box-sizing: border-box; border: 1.5px solid var(--color-filet-fort); border-radius: 14px; padding: 10px 12px; font: inherit; min-height: 90px; resize: vertical; }

/* ---- Révision ------------------------------------------------------------- */
.sim-blank-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.sim-blank-list button { border-radius: 12px; border: 1.5px solid var(--color-attention); background: var(--color-attention-bg); color: var(--color-encre); font-weight: 700; padding: 6px 12px; cursor: pointer; }

/* ---- Bandeaux ------------------------------------------------------------- */
.sim-banner { position: fixed; top: 58px; left: 50%; transform: translateX(-50%); z-index: 30; max-width: 720px; width: calc(100% - 32px);
              padding: 10px 14px; border-radius: 12px; font-size: 14px; font-weight: 600; box-shadow: 0 6px 20px rgba(0,0,0,.08); }
.sim-banner--offline { background: var(--color-attention-bg); color: var(--color-encre); border: 1px solid var(--color-attention); }
.sim-banner--ok { background: var(--color-succes-bg); color: var(--color-succes); border: 1px solid var(--color-succes); }
.sim-banner--error { background: var(--color-rouge-clair); color: var(--color-rouge-fonce); border: 1px solid var(--color-rouge); }

/* ---- Accueil / fin ------------------------------------------------------ */
.sim-plan { display: grid; gap: 10px; margin: 12px 0 0; padding: 0; list-style: none; }
.sim-plan li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; border: 1px solid var(--color-filet); border-radius: 12px; background: var(--color-creme); font-size: 15px; }
.sim-plan li span:last-child { color: var(--color-encre-2); white-space: nowrap; }
.sim-check { display: flex; align-items: flex-start; gap: 12px; margin: 22px 0 0; font-size: 16px; cursor: pointer; }
.sim-check input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--color-succes); }
.sim-actions { margin-top: 24px; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.sim-big-time { font: 800 44px/1 var(--font-nunito); letter-spacing: -.02em; font-variant-numeric: tabular-nums; margin: 12px 0; }
.sim-end { text-align: center; padding: 44px 30px; }
.sim-end h1 { font-size: 32px; }

/* ---- Téléphone ----------------------------------------------------------- */
@media (max-width: 767px) {
  .sim-status { flex-direction: column; align-items: stretch; gap: 10px; }
  .sim-timer { width: auto; }
  .sim-card { padding: 18px 16px; }
  .sim-prompt { font-size: 17px; }
}

/* ---- Achat (formulaire public) --------------------------------------------- */
.sim-buy .sim-grid { align-items: start; }
.sim-form label { display: block; font-weight: 700; font-size: 14px; color: var(--color-encre-2); }
.sim-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 16px; }
/* L'ATTRIBUT `hidden` NE SUFFIT PAS ICI. La règle du navigateur,
   `[hidden] { display: none }`, perd contre n'importe quel `display`
   posé par la feuille — et `.sim-fields` en pose un. Un bloc masqué par
   `hidden` restait donc visible (constaté le 2026-09-15 sur le choix de
   l'enfant à l'achat). Cette classe gagne par spécificité, sans `!important`. */
.sim-fields.sim-cache { display: none; }
.sim-input { display: block; width: 100%; box-sizing: border-box; margin-top: 6px; padding: 11px 12px; border: 1.5px solid var(--color-filet-fort);
             border-radius: 14px; background: var(--color-surface); color: var(--color-encre); font: 600 15px/1.3 var(--font-nunito); }
.sim-input:focus { border-color: var(--color-encre-2); outline: none; box-shadow: 0 0 0 3px rgba(44, 38, 34, .08); }
.sim-fieldset { border: 0; padding: 0; margin: 16px 0 0; }
.sim-form .sim-choice input[type="radio"] { width: 18px; height: 18px; accent-color: var(--color-succes); flex: 0 0 18px; }
.sim-form .sim-choice:has(input:checked) { border-color: var(--color-succes); background: var(--color-succes-bg); }
.sim-top__lang a[aria-current="true"] { background: var(--color-surface); color: var(--color-encre); }


/* ---- Page « merci » : renvoi du lien (2026-09-09) --------------------------- */
.sim-gate__help { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--color-filet); }
.sim-gate__help .sim-gate__body { font-size: 15px; }
.sim-gate__resend { margin: 4px 0 10px; }
.sim-gate__resend .sim-gate__cta { margin-top: 10px; }
.sim-gate__notice { margin-top: 14px; padding: 10px 14px; border-radius: var(--r-controle, 10px); border: 1px solid var(--color-filet-fort); color: var(--color-encre); font-size: 15px; }
.sim-gate__notice--ok { border-color: var(--color-succes); color: var(--color-succes); }

/* ---- Page « merci » : les quatre questions du débriefing (2026-09-09) --------- */
.sim-gate__debrief { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--color-filet); text-align: left; }
.sim-gate__h2 { font: 800 20px/1.25 var(--font-nunito); color: var(--color-encre); margin: 0 0 8px; }
.sim-gate__details { margin-top: 6px; }
.sim-gate__summary { cursor: pointer; font-size: 15px; color: var(--color-encre-2); line-height: 1.5; }
.sim-gate__form { margin-top: 14px; }
.sim-gate__field { border: 0; padding: 0; margin: 18px 0 0; }
.sim-gate__field legend { font: 700 15px/1.4 var(--font-nunito); color: var(--color-encre); margin-bottom: 8px; padding: 0; }
/* Disponibilités de la famille sur la page « merci » : une grille jour x plage.
   Nommée sim-dispos et NON sim-grid : la page d'achat a sa propre .sim-grid
   (deux colonnes) définie plus haut, et une deuxième définition du même nom,
   plus bas dans le fichier, la remplaçait partout en silence. Le formulaire
   d'achat s'est retrouvé en quatre colonnes, un mot par ligne (2026-09-11). */
.sim-dispos { display: grid; grid-template-columns: 3.2em repeat(3, 1fr); gap: 6px; max-width: 420px; }
.sim-dispos__head, .sim-dispos__day { font-size: 13px; color: var(--color-encre-2); align-self: center; }
.sim-dispos__head { text-align: center; }
.sim-dispos__cell { position: relative; display: block; height: 34px; border: 1px solid var(--color-filet-fort); border-radius: 8px; background: #fff; cursor: pointer; }
.sim-dispos__cell input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.sim-dispos__cell span { position: absolute; inset: 0; border-radius: 8px; }
.sim-dispos__cell input:checked + span { background: var(--color-rouge); }
.sim-dispos__cell input:focus-visible + span { outline: 2px solid var(--color-encre); outline-offset: 2px; }
.sim-select, .sim-textarea { display: block; width: 100%; max-width: 420px; margin-top: 6px; padding: 9px 12px; font: 400 15px/1.4 var(--font-nunito); color: var(--color-encre); border: 1px solid var(--color-filet-fort); border-radius: 8px; background: #fff; }
.sim-gate__debrief .sim-check { margin: 8px 0 0; font-size: 15px; }