/* Pavu sur tablette et téléphone (2026-11-03). Chargé après privacy.css : privacy.css fixait la grille de « Vérifier »
   à trois colonnes (250 / image / 330 px) sans tenir compte des largeurs, ce qui écrasait l'image à zéro sur téléphone.
   Ce fichier ne change pas l'identité : il réorganise les mêmes composants pour un écran étroit et le pouce.
   Version précédente : _versions/2026-11-03-avant-mobile/. */

/* ---------- Tablette : la file à gauche, l'image à droite, les réglages dessous ---------- */
@media (max-width: 1180px) {
  .page-verify { grid-template-columns: 220px minmax(0, 1fr); }
}

/* ---------- Téléphone ---------- */
@media (max-width: 760px) {
  /* En-tête : marque et badge sur une ligne, les trois étapes en segments égaux sur la suivante */
  .topbar { padding: 10px 18px 12px; gap: 10px 12px; }
  .brand { gap: 8px; }
  .brand img { width: 34px; height: 34px; }
  .wordmark::after { font-size: 24px; }
  .local-badge, .local-badge.label-black { margin-left: auto; padding: 7px 11px; font-size: 13px; gap: 6px; }
  .steps { order: 3; flex-basis: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .step { justify-content: center; padding: 4px 8px 4px 4px; gap: 6px; font-size: 13px; min-width: 0; }
  .step span { width: 24px; height: 24px; font-size: 12px; flex: none; }

  .page { padding: 16px 18px 40px; }

  /* 1. Importer : illustration plus basse, scénarios en lignes compactes (image à gauche, texte à droite) */
  .page-import { padding-top: 18px; gap: 22px; }
  .dropzone { padding: 170px 18px 24px; }
  .dropzone::after { top: 12px; height: 145px; }
  .scenario-cards { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .scenario-cards > div {
    display: grid; grid-template-columns: 76px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; row-gap: 2px;
    align-items: center; padding: 10px 14px 10px 10px;
  }
  .scenario-cards > div::before { grid-row: 1 / 3; width: 76px; height: 76px; margin: 0; }
  .scenario-cards b { align-self: end; font-size: 16px; }
  .scenario-cards span { align-self: start; font-size: 13px; line-height: 1.35; }

  /* 2. Vérifier : une colonne. La file devient une bande de vignettes, l'image prend toute la largeur,
     le bouton « Valider » reste sous le pouce (barre collée en bas), les réglages suivent. */
  .topbar { position: static; }
  .page-verify { grid-template-columns: minmax(0, 1fr); gap: 14px; padding-bottom: 96px; }
  /* l'image d'abord : la file (souvent un seul fichier) passe dessous */
  .stage-card { order: 1; } .queue { order: 2; } .inspector { order: 3; }
  .queue { padding: 12px; gap: 8px; }
  .queue .section-title { font-size: 16px; }
  .queue-list { padding-bottom: 6px; scroll-snap-type: x mandatory; }
  .q-row { flex: 0 0 168px; scroll-snap-align: start; }
  .q-pick { padding: 6px 26px 6px 6px; gap: 8px; }
  .q-thumb { width: 46px; height: 38px; }
  .q-name { font-size: 13px; }
  .stage-card { padding: 10px; gap: 10px; }
  .stage-head .file-name { max-width: 22ch; }
  .stage canvas { max-height: 62vh; }
  .stage-foot {
    position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; margin: 0;
    padding: 10px 18px calc(10px + env(safe-area-inset-bottom)); border-radius: 18px 18px 0 0;
    background: #fff; box-shadow: 0 -8px 24px rgba(31, 31, 59, 0.12);
  }
  .stage-foot .hint { flex-basis: 100%; font-size: 12.5px; line-height: 1.35; gap: 0; }
  .stage-foot .hint::before { display: none; }
  .stage-foot .btn-lg { width: 100%; }
  .inspector { display: flex !important; flex-direction: column; gap: 12px; }
  .panel { padding: 16px 14px 14px; }

  /* 3. Exporter */
  .export-card { padding: 24px 16px 20px; }
  .export-actions { flex-direction: column-reverse; align-items: stretch; }
  .export-actions .btn { width: 100%; justify-content: center; }
  .results-actions .btn { width: 100%; justify-content: center; }
}

/* Une vidéo garde ses commandes au-dessus de la barre collée */
@media (max-width: 760px) {
  .video-controls { margin-bottom: 4px; }
}