/* VERSION = "1.0.0" */

/* ─── SCAN LIVE (bouton + modal caméra avec détection bords) ──────────────── */
/* Masqué par défaut : n'apparaît QUE si le SDK Scanbot s'initialise avec succès.
   index.js ajoute body.scanbot-available après ensureScanbotInit() résolu.
   Évite le "bouton fantôme" 1-3s + le clic accidentel quand Scanbot est inactif
   (license trial expirée). Fallback : upload natif toujours dispo. */
.scan-live-btn {
  display: none;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  width: 100%;
  padding: 14px 18px;
  margin-bottom: var(--sp-3);
  background: linear-gradient(135deg, var(--c-red) 0%, #a00015 100%);
  color: var(--c-white);
  border: none;
  border-radius: var(--rad-sm);
  font-family: var(--ff);
  font-size: 13px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 2px 8px rgba(213, 0, 28, 0.25);
}
/* Affiché dès que le scan auto est activé. Si les bibliothèques chargent encore,
   un clic ouvre l'overlay de préparation existant au lieu de laisser croire que
   seule la capture native est disponible. */
body.autoscan-loading .scan-live-btn,
body.autoscan-available .scan-live-btn,
body.scanbot-available .scan-live-btn { display: flex; }
.scan-live-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(213, 0, 28, 0.4); }
.scan-live-btn:active { transform: translateY(0); }
.scan-live-btn svg { flex-shrink: 0; }

/* Scroll-to-erreur : surlignage bref du champ manquant à la validation étape 3 */
.field-flash { animation: pf-field-flash 1.6s ease; border-radius: var(--rad-sm); }
@keyframes pf-field-flash {
  0%, 100% { box-shadow: 0 0 0 0 rgba(213, 0, 28, 0); }
  15%, 70% { box-shadow: 0 0 0 3px rgba(213, 0, 28, 0.6); }
}
@media (prefers-reduced-motion: reduce) {
  .field-flash { animation: none; box-shadow: 0 0 0 3px rgba(213, 0, 28, 0.6); }
}

/* ─── SUGGESTION MOBILE (étape 3) ──────────────────────────────────────────── */
.mobile-tip {
  display: flex; align-items: flex-start; gap: 8px;
  background: rgba(171, 127, 76, 0.10); border: 1px solid rgba(171, 127, 76, 0.35);
  color: var(--c-gold, #ab7f4c); border-radius: var(--rad-sm, 8px);
  padding: 12px 14px; font-size: 13px; line-height: 1.45; margin-bottom: var(--sp-4, 16px);
}
.mobile-tip[hidden] { display: none; }
.desktop-callout {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: rgba(171, 127, 76, 0.12); border: 1px solid var(--c-gold, #ab7f4c);
  border-radius: 12px; padding: 16px 18px; margin-bottom: var(--sp-5, 20px);
}
.desktop-callout[hidden] { display: none; }
.desktop-callout .dc-text { flex: 1; min-width: 220px; font-size: 14px; line-height: 1.5; color: var(--c-white, #fff); }
.desktop-callout .dc-copy {
  flex: none; background: transparent; color: var(--c-gold, #ab7f4c);
  border: 1px solid var(--c-gold, #ab7f4c); border-radius: 999px; padding: 10px 18px;
  font-family: var(--ff, inherit); font-size: 13px; font-weight: var(--fw-bold, 700); cursor: pointer; transition: background .14s;
}
.desktop-callout .dc-copy:hover { background: rgba(171, 127, 76, 0.15); }

/* ─── OVERLAY SCANNER AUTO (caméra plein écran, jscanify+OpenCV) ──────────── */
.as-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: #000; display: none;
  flex-direction: column;
  padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
}
.as-overlay.open { display: flex; }
.as-stage {
  position: relative; flex: 1; min-height: 0;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
/* Géométrie identique au sandbox scan-test.html (object-fit:contain) : le flux
   caméra remplit le stage en letterbox, sans clip ni repli sur iOS Safari. */
.as-display { width: 100%; height: 100%; object-fit: contain; display: block; }
.as-badge {
  position: absolute; top: 16px; left: 50%; transform: translateX(-50%);
  font-size: 13px; font-weight: var(--fw-bold); color: #fff;
  padding: 8px 16px; border-radius: 999px; white-space: nowrap;
  background: rgba(0,0,0,.65); border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(6px); transition: color .2s, border-color .2s;
}
.as-badge.ok { color: #1db954; border-color: #1db954; }
.as-badge.err { color: #ff6b6b; border-color: #ff6b6b; }
.as-loader {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 16px;
  color: #cfcfcf; font-size: 14px; text-align: center; padding: 24px;
}
.as-loader.hidden { display: none; }
.as-spin {
  width: 36px; height: 36px; border: 3px solid rgba(255,255,255,.18);
  border-top-color: var(--c-gold, #ab7f4c); border-radius: 50%;
  animation: as-spin 1s linear infinite;
}
@keyframes as-spin { to { transform: rotate(360deg); } }
.as-hint {
  color: #9a9a9a; font-size: 12px; line-height: 1.45; text-align: center;
  padding: 10px 24px 0;
}
.as-controls {
  display: flex; align-items: center; justify-content: center;
  gap: 12px; padding: 12px 18px calc(16px + env(safe-area-inset-bottom));
}
.as-controls.hidden, .as-hint.hidden { display: none; }
.as-cancel {
  flex: 0 0 auto;
  background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.25);
  border-radius: var(--rad-sm, 8px); padding: 14px 18px;
  font-family: var(--ff); font-size: 14px; font-weight: var(--fw-bold); cursor: pointer;
}
.as-shot {
  flex: 1 1 auto; max-width: 320px; cursor: pointer;
  background: var(--c-red, #d5001c); color: #fff; border: none;
  border-radius: var(--rad-sm, 8px); padding: 15px 18px;
  font-family: var(--ff); font-size: 15px; font-weight: var(--fw-bold);
  letter-spacing: .04em; transition: transform .12s, opacity .12s;
}
.as-shot:active { transform: scale(.98); }
.as-shot:disabled { opacity: .5; cursor: not-allowed; }

/* Écran de revue après capture (validation manuelle : Reprendre / Valider) */
.as-review {
  position: absolute; inset: 0; z-index: 2; display: none; flex-direction: column;
  background: #0a0a0a;
  padding: calc(12px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom));
}
.as-review.open { display: flex; }
.as-review-img { flex: 1; min-height: 0; width: 100%; object-fit: contain; background: #000; border-radius: 10px; }
.as-review-msg { color: #cfcfcf; font-size: 12px; text-align: center; padding: 10px 6px 6px; line-height: 1.4; }
.as-review-actions { display: flex; gap: 12px; }
/* [hidden] doit primer sur les display: explicites ci-dessus (éditeur de coins ouvert) */
.as-review-img[hidden], .as-review-actions[hidden] { display: none; }
.as-retake {
  flex: 0 0 auto; background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.25);
  border-radius: var(--rad-sm, 8px); padding: 14px 18px;
  font-family: var(--ff); font-size: 14px; font-weight: var(--fw-bold); cursor: pointer;
}
.as-accept {
  flex: 1 1 auto; background: var(--c-green, #1db954); color: #fff; border: none;
  border-radius: var(--rad-sm, 8px); padding: 15px;
  font-family: var(--ff); font-size: 15px; font-weight: var(--fw-bold); letter-spacing: .04em; cursor: pointer;
}
.as-adjust {
  flex: 0 0 auto; background: transparent; color: var(--c-gold, #ab7f4c);
  border: 1px solid var(--c-gold, #ab7f4c);
  border-radius: var(--rad-sm, 8px); padding: 14px 14px;
  font-family: var(--ff); font-size: 13px; font-weight: var(--fw-bold); cursor: pointer;
}
.as-accept:active, .as-retake:active, .as-adjust:active { transform: scale(.98); }
/* Conteneur de l'éditeur de coins Scanic (occupe la place de l'aperçu) */
.as-editor { flex: 1; min-height: 0; width: 100%; position: relative; background: #000; border-radius: 10px; overflow: hidden; }
.as-editor[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .as-spin { animation: none; } }

/* Modal plein écran caméra */
.scanner-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #000;
  display: none;
  flex-direction: column;
}
.scanner-modal.active { display: flex; }

.scanner-video-wrapper {
  position: relative;
  flex: 1;
  overflow: hidden;
  background: #000;
}
.scanner-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.scanner-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.scanner-status {
  position: absolute;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  color: var(--c-white);
  padding: 10px 18px;
  border-radius: 24px;
  font-size: 13px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.scanner-status.detected { background: rgba(0, 95, 46, 0.85); }

.scanner-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px calc(20px + env(safe-area-inset-bottom));
  background: var(--c-black);
  gap: var(--sp-3);
}
.scanner-cancel-btn {
  background: transparent;
  border: 1px solid var(--c-white-30);
  color: var(--c-white);
  padding: 12px 22px;
  border-radius: var(--rad-sm);
  font-family: var(--ff);
  font-size: 13px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
.scanner-capture-btn {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--c-white);
  border: 4px solid rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
  position: relative;
}
.scanner-capture-btn::before {
  content: '';
  position: absolute;
  inset: 6px;
  background: var(--c-white);
  border-radius: 50%;
  border: 2px solid var(--c-black);
}
.scanner-capture-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.scanner-capture-btn:not(:disabled):hover { transform: scale(1.05); }
.scanner-capture-btn:not(:disabled) {
  box-shadow: 0 0 0 0 rgba(0, 95, 46, 0.6);
  animation: pulse-ready 1.6s infinite;
}
@keyframes pulse-ready {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 95, 46, 0.6); }
  50% { box-shadow: 0 0 0 12px rgba(0, 95, 46, 0); }
}

.scanner-spacer { width: 100px; } /* équilibre avec le bouton cancel à gauche */

/* ─── CIVILITÉ (radio group) ─────────────────────────────────────────────── */
.civilite-group {
  display: flex;
  gap: var(--sp-3);
}
.civilite-opt {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 14px 18px;
  background: var(--c-black);
  border: 1px solid var(--c-white-10);
  border-radius: var(--rad-sm);
  cursor: pointer;
  transition: all 0.15s ease;
  font-size: 14px;
  color: var(--c-white-80);
}
.civilite-opt:hover {
  border-color: var(--c-white-30);
  color: var(--c-white);
}
.civilite-opt input[type="radio"] {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--c-red);
  cursor: pointer;
}
.civilite-opt:has(input:checked) {
  border-color: var(--c-red);
  background: rgba(213, 0, 28, 0.08);
  color: var(--c-white);
}

.role-choice-group {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3);
}
.role-choice-opt {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: var(--sp-3);
  align-items: flex-start;
  min-height: 92px;
  padding: 16px 18px;
  background: var(--c-black);
  border: 1px solid var(--c-white-10);
  border-radius: var(--rad-sm);
  color: var(--c-white-70);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.role-choice-opt:hover {
  border-color: var(--c-white-30);
  color: var(--c-white);
}
.role-choice-opt input[type="radio"] {
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--c-red);
  cursor: pointer;
}
.role-choice-opt:has(input:checked) {
  border-color: var(--c-red);
  background: rgba(213, 0, 28, 0.08);
  color: var(--c-white);
}
.role-choice-copy {
  display: grid;
  gap: 6px;
  min-width: 0;
}
.role-choice-title {
  color: var(--c-white);
  font-size: 15px;
  font-weight: 700;
}
.role-choice-desc {
  color: var(--c-white-60);
  font-size: 13px;
  line-height: 1.45;
}
.role-choice-opt:has(input:checked) .role-choice-desc {
  color: var(--c-white-75);
}

/* ─── LAYOUT ─────────────────────────────────────────────────────────────── */
body {
  min-height: 100dvh;
  background: var(--c-black);
}

.portal-wrapper {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ─── PORTAL HEADER ──────────────────────────────────────────────────────── */
.portal-header {
  width: 100%;
  padding: var(--sp-6) var(--sp-4) var(--sp-5);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  border-bottom: 1px solid var(--c-border);
  background: var(--c-surface);
}
.portal-wordmark {
  width: 168px;
  height: auto;
}
.portal-festival-logo {
  width: 128px;
  height: auto;
  margin-top: var(--sp-2);
}
.portal-countdown {
  display: inline-block;
  padding: 4px 14px;
  border: 1px solid var(--c-border-2);
  border-radius: 999px;
  font-size: 12px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.12em;
  color: var(--c-white);
}
.portal-countdown[hidden] { display: none; }
.portal-event-info {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-gold);
  text-align: center;
}

/* ─── CONTENT ────────────────────────────────────────────────────────────── */
.portal-content {
  width: 100%;
  max-width: 560px;
  padding: var(--sp-8) var(--sp-4) var(--sp-16);
  flex: 1;
}

/* ─── STEPPER ────────────────────────────────────────────────────────────── */
.stepper {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: var(--sp-8);
  position: relative;
}
.stepper-line {
  flex: 1;
  height: 1px;
  background: var(--c-border);
  position: relative;
  transition: background var(--t-slow);
}
.stepper-line.active { background: var(--c-red); }

.step-dot {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  position: relative;
  z-index: 1;
}
.step-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.5px solid var(--c-border);
  background: var(--c-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: var(--fw-bold);
  color: var(--c-white-40);
  transition: all var(--t-slow);
  flex-shrink: 0;
}
.step-dot.active .step-circle {
  border-color: var(--c-red);
  background: var(--c-red);
  color: var(--c-white);
  box-shadow: 0 0 0 4px rgba(213,0,28,0.18);
}
.step-dot.done .step-circle {
  border-color: var(--c-green);
  background: var(--c-green);
  color: var(--c-white);
}
.step-label {
  font-size: 9px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-white-40);
  text-align: center;
  white-space: nowrap;
  margin-top: 4px;
  transition: color var(--t-base);
}
.step-dot.active .step-label { color: var(--c-white-80); }
.step-dot.done .step-label { color: var(--c-green); }

/* ─── STEP PANELS ────────────────────────────────────────────────────────── */
.step-panel {
  display: none;
  animation: fadeSlideIn var(--t-slow) forwards;
}
.step-panel.active { display: block; }

@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.step-title {
  font-size: 22px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.02em;
  color: var(--c-white);
  margin-bottom: var(--sp-2);
}
.step-subtitle {
  font-size: 14px;
  color: var(--c-white-60);
  margin-bottom: var(--sp-6);
  line-height: 1.6;
}

/* ─── FORM SECTIONS ──────────────────────────────────────────────────────── */
.form-section {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
}
.form-section-title {
  font-size: 10px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-white-40);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--c-border);
}

/* ─── SCAN UPLOAD ────────────────────────────────────────────────────────── */
.upload-zone {
  position: relative;
  border: 1.5px dashed var(--c-border-2);
  border-radius: var(--r-md);
  padding: var(--sp-8) var(--sp-4);
  text-align: center;
  transition: border-color var(--t-fast), background var(--t-fast);
  cursor: pointer;
}
.upload-zone:hover, .upload-zone.drag-over {
  border-color: var(--c-red);
  background: rgba(213,0,28,0.04);
}
.upload-zone.uploaded {
  border-color: var(--c-green);
  background: rgba(0,95,46,0.06);
}
.upload-zone input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
}
.upload-icon { font-size: 28px; margin-bottom: var(--sp-2); }
.upload-title {
  font-size: 14px;
  font-weight: var(--fw-bold);
  color: var(--c-white-80);
  margin-bottom: 4px;
}
.upload-subtitle { font-size: 12px; color: var(--c-white-40); }
.upload-preview {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
}
.upload-zone.uploaded .upload-preview { display: flex; }
.upload-zone.uploaded .upload-placeholder { display: none; }
.upload-preview img {
  max-height: 100px;
  border-radius: var(--r-sm);
  object-fit: cover;
}
.upload-preview-name {
  font-size: 12px;
  color: var(--c-green);
  font-weight: var(--fw-bold);
}
.upload-preview-change {
  font-size: 11px;
  color: var(--c-white-40);
  text-decoration: underline;
  cursor: pointer;
}

.scanbot-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  width: 100%;
  padding: 12px;
  background: var(--c-surface-2);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  font-size: 13px;
  font-weight: var(--fw-bold);
  color: var(--c-white-80);
  cursor: pointer;
  font-family: var(--font);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: all var(--t-fast);
}
.scanbot-btn:hover { border-color: var(--c-red); color: var(--c-white); }

/* ─── DECHARGE PDF ───────────────────────────────────────────────────────── */
.decharge-viewer {
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  overflow: hidden;
  margin-bottom: var(--sp-4);
}
.decharge-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-surface-2);
  border-bottom: 1px solid var(--c-border);
}
.decharge-label {
  font-size: 11px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-white-60);
}
.decharge-scroll-hint {
  font-size: 11px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-gold);
  transition: opacity 0.35s;
}
.decharge-scroll-hint.done {
  opacity: 0;
  pointer-events: none;
}
.decharge-body {
  height: 280px;
  overflow-y: auto;
  padding: var(--sp-6);
  background: var(--c-surface);
  font-size: 13px;
  line-height: 1.8;
  color: var(--c-white-80);
  outline: none; /* focus géré par :focus-visible uniquement */
}
.decharge-body:focus-visible {
  outline: 2px solid var(--c-gold);
  outline-offset: -2px;
}
.decharge-body h2 {
  font-size: 14px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-white);
  margin-bottom: var(--sp-4);
  text-align: center;
}
.decharge-body p { margin-bottom: var(--sp-3); }
.decharge-body ol { padding-left: 20px; margin-bottom: var(--sp-3); }
.decharge-body ul { padding-left: 20px; margin: var(--sp-2) 0; list-style: disc; }
.decharge-body li { margin-bottom: var(--sp-2); }

.read-confirm {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-4);
  background: var(--c-surface-2);
  border-top: 1px solid var(--c-border);
  cursor: pointer;
  user-select: none;
}
.read-confirm input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--c-red);
  margin-top: 1px;
  flex-shrink: 0;
  cursor: pointer;
}
.read-confirm label {
  font-size: 13px;
  color: var(--c-white-80);
  cursor: pointer;
  line-height: 1.5;
}
/* Scroll-gate : checkbox verrouillée jusqu'à fin de lecture */
.read-confirm.locked {
  opacity: 0.45;
  cursor: not-allowed;
  user-select: none;
}
.read-confirm.locked input[type="checkbox"],
.read-confirm.locked label {
  cursor: not-allowed;
  pointer-events: none;
}

/* ─── SIGNATURE CANVAS ───────────────────────────────────────────────────── */
.signature-wrapper {
  border: 1.5px solid var(--c-border-2);
  border-radius: var(--r-md);
  overflow: hidden;
  background: #0f0f0f;
}
.signature-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-2) var(--sp-4);
  border-bottom: 1px solid var(--c-border);
  background: var(--c-surface-2);
}
.signature-label {
  font-size: 11px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-white-60);
}
#signature-canvas {
  display: block;
  width: 100%;
  height: 150px;
  cursor: crosshair;
  touch-action: none;
  overscroll-behavior: contain;
  -webkit-user-select: none;
  user-select: none;
}
.signature-actions {
  display: flex;
  gap: var(--sp-2);
}
.signature-btn,
.signature-clear {
  /* WCAG 2.5.5 AAA — touch target ≥ 44×44 px sur mobile-first portail */
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  font-size: 11px;
  color: var(--c-white-80);
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  background: transparent;
  cursor: pointer;
  font-family: var(--font);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: all var(--t-fast);
}
.signature-btn:hover,
.signature-clear:hover { color: var(--c-white-80); border-color: var(--c-border-2); }
.signature-btn:focus-visible,
.signature-clear:focus-visible {
  outline: 2px solid var(--c-gold);
  outline-offset: 2px;
}
/* Bouton "Signer électroniquement" — bordure dorée subtile au repos
   (texte blanc pour respecter WCAG 1.4.3 ≥ 4.5:1, doré sur :hover/:focus seulement) */
#sig-keyboard {
  color: var(--c-white-80);
  border-color: rgba(171, 127, 76, 0.4);
}
#sig-keyboard:hover,
#sig-keyboard:focus-visible {
  color: var(--c-gold);
  border-color: var(--c-gold);
  background: rgba(171, 127, 76, 0.08);
}
.signature-hint { font-size: 11px; color: var(--c-white-40); padding: 4px var(--sp-4) var(--sp-2); background: var(--c-surface-2); text-align: center; }

/* ─── CONFIRMATION SCREENS ───────────────────────────────────────────────── */
.screen-confirm,
.screen-error,
.screen-blocked,
.screen-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60dvh;
  text-align: center;
  padding: var(--sp-8) var(--sp-4);
  gap: var(--sp-4);
}
.screen-icon { font-size: 48px; margin-bottom: var(--sp-2); }
.screen-message p { margin: 0 0 var(--sp-3); }
.screen-message p:last-child { margin-bottom: 0; }
.screen-title {
  font-size: 22px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  color: var(--c-white);
}
.screen-message {
  font-size: 15px;
  color: var(--c-white-60);
  max-width: 400px;
  line-height: 1.7;
}
.screen-code-label {
  font-size: 10px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-white-40);
  margin-top: var(--sp-2);
}
.screen-code {
  font-size: 13px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.12em;
  color: var(--c-gold);
  padding: var(--sp-3) var(--sp-5);
  border: 1px solid rgba(171,127,76,0.3);
  border-radius: var(--r-sm);
  background: rgba(171,127,76,0.06);
}
.email-delivery-status {
  max-width: 420px;
  margin: 0;
}
.screen-code-hint {
  font-size: 12px;
  color: var(--c-white-40);
  max-width: 360px;
  line-height: 1.6;
}

/* ─── SUBMIT AREA ────────────────────────────────────────────────────────── */
.submit-area {
  margin-top: var(--sp-8);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.utac-submit-confirm {
  position: fixed;
  top: 50%;
  left: 50%;
  width: min(520px, calc(100% - 32px));
  max-height: min(86vh, 520px);
  margin: 0;
  padding: 0;
  border: 1px solid var(--c-border-2);
  border-radius: var(--r-md);
  background: var(--c-surface);
  color: var(--c-white);
  transform: translate(-50%, -50%);
  box-shadow: 0 24px 80px rgba(0, 0, 0, .55);
  overflow: auto;
}
.utac-submit-confirm::backdrop { background: rgba(0, 0, 0, .78); }
.utac-submit-confirm-card { padding: var(--sp-6); }
.utac-submit-confirm-card h2 { margin: 0 0 var(--sp-4); font-size: 21px; }
.utac-submit-confirm-card p { color: var(--c-white-80); line-height: 1.55; }
.utac-submit-confirm-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
}
@media (max-width: 520px) {
  .role-choice-group { grid-template-columns: 1fr; }
  .role-choice-opt { min-height: 0; }
  .utac-submit-confirm-actions .btn { width: 100%; }
}

/* ─── OFFLINE BANNER ─────────────────────────────────────────────────────── */
.offline-banner {
  display: none;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: rgba(171,127,76,0.12);
  border-bottom: 1px solid rgba(171,127,76,0.2);
  font-size: 13px;
  color: var(--c-gold);
  text-align: center;
  justify-content: center;
}
.offline-banner.visible { display: flex; }

/* ─── CONTRÔLE QUALITÉ DE CAPTURE ─────────────────────────────────────────── */
/* Retour immédiat au candidat après une photo : nette / limite / floue.
   Volontairement informatif et jamais bloquant (cf. js/index.js § QUALITE). */
.qualite-hint {
  margin-top: var(--sp-2);
  padding: 10px 13px;
  border-radius: var(--r-sm);
  font-size: 12.5px;
  line-height: 1.5;
  border-left: 3px solid;
}
.qualite-ok {
  color: #7fd6a2;
  background: rgba(0, 95, 46, 0.14);
  border-left-color: var(--c-green);
}
.qualite-moyen {
  color: #e8c98c;
  background: rgba(171, 127, 76, 0.14);
  border-left-color: var(--c-gold);
}
.qualite-ko {
  color: #ffa8a8;
  background: rgba(213, 0, 28, 0.12);
  border-left-color: var(--c-red);
  font-weight: 600;
}

/* ─── ASSISTANCE CANDIDAT ─────────────────────────────────────────────────── */
/* Discret pendant le parcours normal, franchement visible dès que ça bloque. */
.aide {
  margin-top: var(--sp-5, 28px);
  padding-top: var(--sp-4, 20px);
  border-top: 1px solid rgba(255, 255, 255, .1);
  text-align: center;
}
.aide-titre {
  font-size: 13px; font-weight: var(--fw-bold); color: var(--c-white);
  margin-bottom: 4px;
}
.aide-actions {
  display: flex; flex-wrap: wrap; gap: 10px;
  justify-content: center; margin-top: 12px;
}
.aide-lien {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 11px 18px;
  border: 1px solid rgba(255, 255, 255, .22); border-radius: var(--rad-sm, 8px);
  color: var(--c-white); text-decoration: none;
  font-size: 13px; font-weight: var(--fw-bold);
}
.aide-lien:hover, .aide-lien:focus-visible { border-color: var(--c-gold); color: var(--c-gold); }
.aide-lien:focus-visible { outline: 2px solid var(--c-gold); outline-offset: 2px; }
.aide-lien-principal {
  background: #25D366; border-color: #25D366; color: #0a0a0a;
}
.aide-lien-principal:hover, .aide-lien-principal:focus-visible {
  background: #1fb855; border-color: #1fb855; color: #0a0a0a;
}
.aide-horaires {
  margin-top: 10px; font-size: 11px; color: var(--c-white-40); line-height: 1.5;
}

/* Sur un écran bloquant : encadré, sans dépendre d'une bordure supérieure */
.aide-urgent {
  margin-top: var(--sp-4, 20px);
  padding: var(--sp-4, 20px);
  border: 1px solid rgba(171, 127, 76, .45);
  border-radius: var(--rad-sm, 8px);
  background: rgba(171, 127, 76, .07);
}
.aide-urgent .aide-titre { font-size: 15px; }

@media (max-width: 480px) {
  .aide-actions { flex-direction: column; }
  .aide-lien { width: 100%; }
}

/* ─── DÉCHARGE ET SIGNATURE SUR FOND BLANC ────────────────────────────────── */
/* Demande client (30/07). Ce sont les deux seules zones où le propriétaire lit
   un document juridique et y apporse sa signature : le blanc s'impose, autant
   pour la lisibilité que parce que le document sera imprimé ou archivé.
   Le reste de l'interface conserve la charte sombre. */
.decharge-body {
  background: #ffffff;
  color: #1a1a1a;
}
.decharge-body h2,
.decharge-body h3,
.decharge-body strong { color: #000000; }
.decharge-body a { color: #8a0014; }

/* Barre d'outils accordée au document, pour éviter un contraste brutal */
.decharge-toolbar {
  background: #f2f0ec;
  border-bottom: 1px solid rgba(0, 0, 0, .14);
}
.decharge-label { color: #55504a; }
.decharge-scroll-hint { color: #8a6a3c; }

/* Bouton de téléchargement de la décharge */
.decharge-dl {
  flex: 0 0 auto; margin-left: auto; padding: 7px 13px;
  background: transparent; border: 1px solid rgba(0, 0, 0, .3);
  border-radius: var(--rad-sm, 6px); color: #1a1a1a;
  font-family: var(--ff); font-size: 11px; font-weight: var(--fw-bold);
  letter-spacing: .04em; cursor: pointer; white-space: nowrap;
}
.decharge-dl:hover { border-color: #8a0014; color: #8a0014; }
.decharge-dl:focus-visible { outline: 2px solid #8a6a3c; outline-offset: 2px; }
.decharge-dl.fait { border-color: #005f2e; color: #005f2e; }

/* La zone de signature suit la même logique : on signe sur du blanc */
#signature-canvas {
  background: #ffffff;
  border-color: rgba(0, 0, 0, .18);
}
.signature-header {
  background: #f2f0ec;
  border-bottom: 1px solid rgba(0, 0, 0, .14);
}
.signature-label { color: #55504a; }
.signature-wrapper .signature-btn {
  border-color: rgba(0, 0, 0, .3);
  color: #1a1a1a;
}
.signature-wrapper .signature-btn:hover,
.signature-wrapper .signature-btn:focus-visible { border-color: #8a0014; color: #8a0014; }

/* Assistance remontée en tête d'écran (attente / confirmation) */
.aide.aide-haut {
  margin-top: var(--sp-4, 20px);
  padding: var(--sp-4, 20px);
  border: 1px solid rgba(171, 127, 76, .4);
  border-top: 1px solid rgba(171, 127, 76, .4);
  border-radius: var(--rad-sm, 8px);
  background: rgba(171, 127, 76, .06);
}

/* Note du verrou de soumission (décharge à télécharger) */
.verrou-note {
  margin-bottom: var(--sp-3, 12px); padding: 11px 14px;
  background: rgba(171, 127, 76, .1); border: 1px solid rgba(171, 127, 76, .4);
  border-radius: var(--rad-sm, 8px);
  color: var(--c-gold, #ab7f4c); font-size: 12.5px; line-height: 1.5; text-align: center;
}
.verrou-note[hidden] { display: none; }

/* Harmonisation des abords des zones blanches : sans ça, la ligne de
   confirmation et l'aide restaient sombres sous un document clair. */
.decharge-viewer .read-confirm {
  background: #f2f0ec;
  border-top: 1px solid rgba(0, 0, 0, .14);
  color: #1a1a1a;
}
.decharge-viewer .read-confirm label { color: #2a2a2a; }
.decharge-viewer .read-confirm input[type=checkbox] { accent-color: #8a0014; }
.signature-wrapper .signature-hint {
  background: #f2f0ec;
  border-top: 1px solid rgba(0, 0, 0, .14);
  color: #55504a;
}
/* Le bouton de signature manquait de contraste sur le beige */
.signature-wrapper .signature-btn {
  background: #ffffff;
  border-color: rgba(0, 0, 0, .35);
  color: #1a1a1a;
}
.signature-wrapper .signature-btn:disabled { opacity: .45; }
/* Espace entre le libellé, l'indication de défilement et le bouton */
.decharge-toolbar { gap: 12px; flex-wrap: wrap; }
.decharge-scroll-hint { margin-right: auto; }

/* Ces deux règles doivent primer sur `#sig-keyboard` et sur `.read-confirm`
   définis plus haut : un sélecteur d'identifiant l'emporte sur une classe, et
   le texte du bouton de signature ressortait blanc sur blanc (invisible).
   D'où la spécificité renforcée ici plutôt qu'un !important. */
.signature-wrapper #sig-keyboard {
  color: #1a1a1a;
  background: #ffffff;
  border-color: rgba(0, 0, 0, .35);
}
.signature-wrapper #sig-keyboard:hover,
.signature-wrapper #sig-keyboard:focus-visible {
  color: #8a0014;
  border-color: #8a0014;
  background: rgba(138, 0, 20, .05);
}
.decharge-viewer .read-confirm,
.decharge-viewer .read-confirm.locked {
  background: #f2f0ec;
}
/* UTAC, renseignements privés de l'étape Dossier uniquement. */
.utac-fields-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.utac-fields-grid .form-input { width: 100%; min-width: 0; font-size: 16px; }
#utac-identity { margin: 16px 0; overflow-wrap: anywhere; line-height: 1.6; }
.utac-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.utac-details dt { font-weight: bold; font-size: 13px; }
.utac-details dd { margin: 0; overflow-wrap: anywhere; }
.decharge-body footer { border-top: 1px solid #bbb; margin-top: 18px; padding-top: 12px; font-size: 12px; }
.utac-pictogram { display: block; font-weight: bold; }
#utac-copy[hidden] { display: none; }
@media (max-width: 540px) {
  .utac-fields-grid, .utac-details { grid-template-columns: 1fr; }
}

/* ─── THÈME CLAIR (retours Porsche Maroc du 24/09) ────────────────────────────
   Décision de Sami : tout le parcours candidat sur fond blanc. Les couleurs de
   la page passent par les variables de shared.css : on les redéfinit ici, pour
   la seule page candidat (body.theme-clair). Les noms historiques restent :
   --c-black est le fond, --c-white la couleur du texte.
   Or foncé : l'or de la charte (#ab7f4c) plafonne à 3,4:1 sur blanc, sous le
   seuil de 4,5:1 exigé pour du petit texte. */
body.theme-clair {
  --c-black:     #ffffff;
  --c-surface:   #f6f6f6;
  --c-surface-2: #ffffff;
  --c-surface-3: #ececec;
  --c-border:    rgba(0, 0, 0, 0.14);
  --c-border-2:  rgba(0, 0, 0, 0.28);
  --c-white:     #0a0a0a;
  --c-white-80:  rgba(0, 0, 0, 0.80);
  --c-white-75:  rgba(0, 0, 0, 0.75);
  --c-white-70:  rgba(0, 0, 0, 0.72);
  --c-white-60:  rgba(0, 0, 0, 0.66);
  --c-white-40:  rgba(0, 0, 0, 0.60);
  --c-white-30:  rgba(0, 0, 0, 0.30);
  --c-white-20:  rgba(0, 0, 0, 0.20);
  --c-white-10:  rgba(0, 0, 0, 0.12);
  --c-white-08:  rgba(0, 0, 0, 0.06);
  --c-gold:      #8a6a3c;
  color-scheme: light;
}
body.theme-clair .portal-header { background: #ffffff; }
/* Logo définitif rouge et noir (24/09) : l'or n'y a plus sa place. */
body.theme-clair .portal-event-info { color: var(--c-white-60); }
/* Texte blanc sur fond de couleur : il reste blanc. */
body.theme-clair .btn-primary,
body.theme-clair .btn-danger,
body.theme-clair .scan-live-btn,
body.theme-clair .toast-success,
body.theme-clair .toast-error,
body.theme-clair .step-dot.active .step-circle,
body.theme-clair .step-dot.done .step-circle { color: #ffffff; }
body.theme-clair .form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='rgba(0,0,0,0.55)' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
}
body.theme-clair .aide { border-top-color: rgba(0, 0, 0, 0.12); }
body.theme-clair .aide-lien { border-color: rgba(0, 0, 0, 0.24); }
/* La caméra de scan reste sombre : l'image du document s'y lit mieux. */
body.theme-clair .scanner-modal,
body.theme-clair .as-overlay {
  --c-black:     #0a0a0a;
  --c-surface:   #141414;
  --c-surface-2: #1e1e1e;
  --c-border:    rgba(255, 255, 255, 0.10);
  --c-border-2:  rgba(255, 255, 255, 0.18);
  --c-white:     #ffffff;
  --c-white-80:  rgba(255, 255, 255, 0.80);
  --c-white-60:  rgba(255, 255, 255, 0.60);
  --c-white-40:  rgba(255, 255, 255, 0.62);
  --c-white-30:  rgba(255, 255, 255, 0.30);
  --c-gold:      #ab7f4c;
  color-scheme: dark;
}
/* Qualité de photo : les teintes pastel prévues pour le noir tombaient à
   1,4:1 sur blanc (revue Codex du 24/09). Teintes foncées, même code couleur. */
body.theme-clair .qualite-ok    { color: #004a24; }
body.theme-clair .qualite-moyen { color: #5e4521; }
body.theme-clair .qualite-ko    { color: #9e0016; }