/* ============================================================
   Vue équipe « Repère » — styles SPÉCIFIQUES à cette vue.
   Le commun (charte, en-tête, badges, listes, états) vient de
   static/css/base.css et static/css/composants.css.
   ============================================================ */

/* ---------- Connexion ---------- */
.connexion {
  max-width: 24rem;
  margin: 2rem auto 0;
  display: flex;
  flex-direction: column;
}

.connexion__intro {
  color: var(--color-text-muted);
  margin-bottom: 1.25rem;
}

.connexion__label {
  font-weight: 600;
  margin-bottom: 0.35rem;
}

.connexion__champ {
  min-height: var(--touch-target-lg);
  padding: 0 1rem;
  margin-bottom: 1.1rem;
  border: 2px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.connexion__champ:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: var(--shadow-focus);
}

.connexion__bouton {
  min-height: var(--touch-target-lg);
  margin-top: 0.5rem;
  border: none;
  border-radius: var(--radius-lg);
  background: var(--color-primary);
  color: var(--color-text-on-primary);
  font-weight: 700;
  cursor: pointer;
}

.connexion__bouton:active { background: var(--color-primary-dark); }

/* ---------- Accueil : recherche ---------- */
.recherche {
  display: flex;
  gap: 0.5rem;
  margin-block: 0.5rem 1.5rem;
}

.recherche__champ {
  flex: 1;
  min-height: var(--touch-target-lg);
  padding: 0 1rem;
  border: 2px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.recherche__champ:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: var(--shadow-focus);
}

.recherche__bouton {
  min-height: var(--touch-target-lg);
  min-width: var(--touch-target-lg);
  border: none;
  border-radius: var(--radius-lg);
  background: var(--color-primary);
  color: var(--color-text-on-primary);
  font-size: 1.3rem;
  cursor: pointer;
}

.recherche__bouton:active { background: var(--color-primary-dark); }

/* ---------- Accueil : les portes ---------- */
.portes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}

@media (min-width: 600px) { .portes { grid-template-columns: repeat(4, 1fr); } }

.porte {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 6rem;
  padding: 1rem 0.5rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: var(--color-text);
  text-align: center;
}

.porte:active { background: var(--color-primary-bg); }
.porte__icone { font-size: 1.6rem; color: var(--color-primary); }
.porte__titre { font-weight: 600; }
.porte__question { font-size: 0.8rem; color: var(--color-text-muted); }

/* ---------- Fiche : le gabarit ---------- */
.fiche__titre { font-size: 1.35rem; font-weight: 700; margin-block: 0.25rem 0.5rem; }
.fiche__badges { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 1rem; }

.fiche__section {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 1rem;
  margin-bottom: 0.75rem;
}

.fiche__section h2 {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-primary-dark);
  margin-bottom: 0.5rem;
}

/* Les champs du gabarit sont du texte brut : préserver les retours à la ligne */
.fiche__texte { white-space: pre-line; }

.fiche__section--alerte { border-left: 4px solid var(--color-warning); }

.fiche__attribution {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin-top: 0.75rem;
}

/* ---------- Médias ---------- */
.media { margin-top: 1rem; }

.media img, .media video {
  width: 100%;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
}

/* Visionneuse de documents (PDF, Word) — remplace le cadre <iframe> du MVP 1,
   qui n'affichait rien sur Android. Le document est rendu par pdf.js /
   docx-preview dans ce bloc (voir equipe/visionneuse.js). */
.media .visionneuse {
  /* Le bloc Word est mis à l'échelle en JS pour tenir dans la colonne :
     l'origine du débordement est en bas à droite, jamais visible. */
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  /* Le document reste dans le flux de la fiche : sur un téléphone tenu en
     main, une hauteur fixe obligerait à faire défiler DANS le document tout
     en faisant défiler la fiche — deux ascenseurs imbriqués, ingérable avec
     des gants. */
}

/* Un indicateur d'attente doit occuper une place le temps du chargement,
   sinon la fiche « saute » quand le document arrive. */
.media .visionneuse:has(.spinner) {
  display: grid;
  place-items: center;
  min-height: 12rem;
}

/* docx-preview enrobe ses pages dans un cadre gris de 30 px qui les CENTRE
   (`align-items: center`). Sur un écran plus étroit qu'une page A4, la page
   déborde alors des deux côtés et sa moitié gauche devient inatteignable —
   constaté sur tablette le 2026-09-03. On neutralise le cadre : la page
   s'aligne à gauche, et le débordement restant est mesuré puis réduit en JS. */
.media .visionneuse .docx-wrapper {
  display: block;
  padding: 0;
  background: transparent;
}

.media .visionneuse .docx-wrapper > section.docx {
  margin: 0 0 0.5rem;
  box-shadow: none;
}

/* Mode recomposé (téléphone) : le document occupe la largeur disponible au lieu
   d'être réduit à une taille illisible. Un tableau plus large que l'écran défile
   alors horizontalement plutôt que d'être coupé. */
.media .visionneuse--recomposee {
  overflow-x: auto;
}

/* Une page de PDF : le cadre garde le rapport largeur/hauteur du document
   avant même d'être dessiné (aspect-ratio posé en JS), pour que la barre de
   défilement soit juste dès le premier affichage. */
.media .visionneuse__page {
  width: 100%;
  background: #fff;
}

.media .visionneuse__page + .visionneuse__page {
  margin-top: 0.5rem;
  border-top: 1px solid var(--color-border);
}

.media .visionneuse__page canvas {
  display: block;
  width: 100%;
  height: auto;
}

.media figcaption {
  font-size: 0.85rem;
  color: var(--color-text-secondary);
  margin-top: 0.4rem;
}

/* ---------- Filtre par domaine (puces au-dessus des listes) ---------- */

/* Défilement horizontal plutôt que retour à la ligne : si un jour le référentiel
   compte six domaines, la barre reste sur une ligne et la liste de fiches ne
   descend pas hors de l'écran. */
.puces {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding-bottom: 0.35rem;
  margin-bottom: 0.85rem;
  scrollbar-width: none;
}

.puces::-webkit-scrollbar { display: none; }

.puce {
  flex: none;
  min-height: var(--touch-target);
  padding: 0 1rem;
  border: 2px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  color: var(--color-text);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.puce:active { background: var(--color-primary-bg); }

.puce--active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-on-primary);
}

/* Rappel sous la liste : un filtre actif ne doit jamais passer inaperçu */
.filtre-actif {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-lg);
  background: var(--color-surface-alt);
  color: var(--color-text-secondary);
  font-size: 0.9rem;
}

.filtre-actif__bouton {
  margin-left: auto;
  min-height: var(--touch-target);
  padding: 0 1rem;
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-lg);
  background: transparent;
  color: var(--color-primary);
  font-weight: 600;
  cursor: pointer;
}

.filtre-actif__bouton:active { background: var(--color-primary-bg); }

/* ---------- « Je ne trouve pas ma réponse » ---------- */
.pas-trouve {
  margin-top: 1.5rem;
  text-align: center;
}

.pas-trouve__bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch-target-lg);
  padding: 0 1.5rem;
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-lg);
  background: transparent;
  color: var(--color-primary);
  font-weight: 600;
  cursor: pointer;
}

.pas-trouve__bouton:active { background: var(--color-primary-bg); }

.pas-trouve__merci {
  background: var(--color-success-bg);
  color: var(--color-success);
  border-radius: var(--radius-lg);
  padding: 1rem;
  font-weight: 600;
}

/* ---------- Assistant de saisie (lot 3 du 2026-09-08) ---------- */

.ecriture-entree {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.75rem;
  padding: 1rem;
  min-height: var(--touch-target-lg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: #fff;
  color: inherit;
  font-weight: 600;
  text-decoration: none;
}

.ecriture-entree > span:first-of-type { flex: 1; }

.ecriture-entree__compte {
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  background: var(--color-primary-bg);
  color: var(--color-primary);
  font-size: 0.85rem;
}

.chantiers { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1.25rem; }

.chantier {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: #fff;
  text-decoration: none;
  color: inherit;
}

.chantier__titre { font-weight: 600; }
.chantier__etat { font-size: 0.85rem; color: var(--color-text-muted); }
.chantier__etat--prete { color: var(--color-primary); font-weight: 600; }
.chantier__etat--attente { color: var(--color-text-muted); font-style: italic; }

/* Le motif d'un renvoi passe avant tout le reste : c'est la seule chose que
   l'auteur doit lire pour savoir quoi corriger. */
.chantier__motif {
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-lg);
  background: var(--color-primary-bg);
  color: var(--color-primary);
  font-size: 0.9rem;
}

/* Savoir où l'on en est tient l'attention : sans repère de progression, un
   formulaire long donne l'impression de ne jamais finir. */
.assistant__compte { color: var(--color-text-muted); font-size: 0.9rem; margin: 0 0 0.4rem; }

.assistant__jauge {
  height: 6px;
  border-radius: 999px;
  background: var(--color-border);
  overflow: hidden;
  margin-bottom: 1.25rem;
}

.assistant__jauge span { display: block; height: 100%; background: var(--color-primary); }

/* La question en grand : c'est elle qui porte l'écran, pas un libellé de champ. */
.assistant__question { font-size: 1.4rem; line-height: 1.3; margin: 0 0 0.5rem; }
.assistant__aide { color: var(--color-text-muted); margin: 0 0 1.25rem; }

.assistant__motif {
  padding: 0.75rem 1rem;
  border-radius: var(--radius-lg);
  background: var(--color-primary-bg);
  color: var(--color-primary);
  margin-bottom: 1.25rem;
}

.assistant__ligne,
.assistant__zone {
  width: 100%;
  padding: 0.85rem;
  border: 2px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  font: inherit;
  box-sizing: border-box;
}

.assistant__zone { resize: vertical; }
.assistant__ligne:focus,
.assistant__zone:focus { outline: none; border-color: var(--color-primary); }

.assistant__ou {
  text-align: center;
  color: var(--color-text-muted);
  font-size: 0.9rem;
  margin: 1rem 0 0.75rem;
}

.assistant__echelle { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 0.75rem; }

.repere-mini { margin: 0; width: 8rem; }
.repere-mini figcaption { font-size: 0.8rem; font-weight: 600; margin-bottom: 0.25rem; }
.repere-mini img { width: 100%; border-radius: var(--radius-lg); }

.lien-bloc {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: var(--touch-target-lg);
  padding: 0 1rem;
  border: 2px dashed var(--color-primary);
  border-radius: var(--radius-lg);
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: none;
}

.assistant__gestes {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.5rem;
}

.assistant__precedent { color: var(--color-text-muted); font-weight: 600; text-decoration: none; }

.assistant__suivant {
  min-height: var(--touch-target-lg);
  padding: 0 1.75rem;
  border: none;
  border-radius: var(--radius-lg);
  background: var(--color-primary);
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.assistant__suivant:disabled { opacity: 0.6; }

.facettes { border: none; padding: 0; margin: 0 0 1.5rem; }
.facettes legend { font-weight: 600; padding: 0; margin-bottom: 0.5rem; }
.facettes--obligatoire legend { color: var(--color-primary); }
.facettes__cases { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* Cible tactile « gants » : une case à cocher nue est intouchable avec des
   gants, c'est l'étiquette entière qui se presse. */
.case {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: var(--touch-target);
  padding: 0 0.85rem;
  border: 1px solid var(--color-border-strong);
  border-radius: 999px;
  background: #fff;
  cursor: pointer;
}

.case input { width: 1.1rem; height: 1.1rem; }
.case:has(input:checked) { border-color: var(--color-primary); background: var(--color-primary-bg); }

.manquants { display: flex; flex-direction: column; gap: 0.75rem; }

/* Ce qui manque est listé avec les questions elles-mêmes, et chaque ligne
   ramène à son écran : montrer un bouton « Envoyer » grisé sans dire pourquoi
   laisserait la personne devant sans comprendre. */
.manquant {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: var(--touch-target-lg);
  padding: 0.75rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: #fff;
  color: inherit;
  text-decoration: none;
  font-weight: 600;
}

.verdict-attente {
  padding: 1.25rem;
  border-radius: var(--radius-lg);
  background: var(--color-primary-bg);
  color: var(--color-primary);
  text-align: center;
}

/* ---------- Validation (lot 2 du 2026-09-08) ---------- */

/* L'entrée sur l'accueil : visible sans être criarde. Elle n'apparaît que pour
   un valideur qui a effectivement du travail, donc elle a le droit de se voir. */
.validation-entree {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.5rem;
  padding: 1rem;
  min-height: var(--touch-target-lg);
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-lg);
  background: var(--color-primary-bg);
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: none;
}

.validation-entree span { flex: 1; }

.validation-file {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.validation-ligne {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1rem;
  min-height: var(--touch-target-lg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: #fff;
  text-decoration: none;
  color: inherit;
}

.validation-ligne__titre { font-weight: 600; }
.validation-ligne__meta { font-size: 0.85rem; color: var(--color-text-muted); }

/* Dire ce qu'on regarde AVANT de le regarder : un valideur doit savoir qu'il
   voit le rendu réel, pas un aperçu d'administration. */
.validation-rappel {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-lg);
  background: var(--color-primary-bg);
  color: var(--color-primary);
  font-weight: 600;
}

/* Les gestes après la fiche, jamais flottants au-dessus : on ne doit pas
   pouvoir trancher sans avoir fait défiler ce sur quoi on tranche. */
.validation-gestes {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 2rem;
}

.validation-gestes button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: 100%;
  min-height: var(--touch-target-lg);
  border-radius: var(--radius-lg);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.validation-gestes__publier {
  border: none;
  background: var(--color-primary);
  color: #fff;
}

/* Le renvoi n'est pas un bouton de danger : renvoyer une fiche est un acte
   normal et utile, pas un échec. Secondaire, donc, mais pas rouge. */
.validation-gestes__renvoyer {
  border: 2px solid var(--color-primary);
  background: transparent;
  color: var(--color-primary);
}

.validation-gestes button:disabled { opacity: 0.6; }

.validation-motif {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1rem;
}

.contribution__secondaire {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: 100%;
  min-height: var(--touch-target-lg);
  margin-top: 0.75rem;
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-lg);
  background: transparent;
  color: var(--color-primary);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.contribution__secondaire:disabled { opacity: 0.6; }

.chantier__nature { font-size: 0.85rem; color: var(--color-primary); font-weight: 600; }

/* Le valideur doit savoir qu'il ne lit pas une fiche neuve mais la réécriture
   de quelque chose qui tourne déjà en atelier : la question « faut-il publier
   ça ? » n'est pas la même dans les deux cas. */
.validation-correction {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.85rem 1rem;
  border-radius: var(--radius-lg);
  border: 2px solid var(--color-primary);
  background: #fff;
  font-weight: 600;
}

/* ---------- Signalement « ça ne se passe pas comme ça au poste » ---------- */

/* Discret à dessein : la fiche fait autorité tant que personne n'a montré le
   contraire. Un gros bouton d'alerte sous chaque fiche la ferait paraître
   douteuse par défaut. La cible tactile reste dimensionnée pour des gants. */
.signalement {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--color-border);
  text-align: center;
}

.signalement__lien {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: var(--touch-target);
  padding: 0 0.75rem;
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
}

.signalement__lien:active { color: var(--color-primary); }

.signalement__form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  text-align: left;
}

.signalement__label { font-weight: 600; }

.signalement__champ {
  width: 100%;
  padding: 0.75rem;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  font: inherit;
  resize: vertical;
}

.signalement__champ:focus {
  outline: none;
  border-color: var(--color-primary);
}

.signalement__envoyer {
  min-height: var(--touch-target-lg);
  border: none;
  border-radius: var(--radius-lg);
  background: var(--color-primary);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}

.signalement__envoyer:disabled { opacity: 0.6; }

.signalement__merci {
  background: var(--color-success-bg);
  color: var(--color-success);
  border-radius: var(--radius-lg);
  padding: 1rem;
  font-weight: 600;
}

/* ---------- Bandeau d'état de synchronisation (étape 6 PWA) ---------- */

[x-cloak] { display: none !important; }

.bandeau-sync {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  font-weight: 600;
  background: var(--color-warning-bg, #fdf3e0);
  color: var(--color-warning, #8a5a00);
}

.bandeau-sync--horsligne {
  background: var(--color-surface-alt);
  color: var(--color-text-secondary);
}

.bandeau-sync__bouton {
  margin-left: auto;
  min-height: var(--touch-target, 2.5rem);
  padding: 0 0.9rem;
  border: 1px solid currentColor;
  border-radius: var(--radius-lg);
  background: transparent;
  color: inherit;
  font-weight: 600;
}

/* ---------- Média indisponible hors-ligne (vidéo ou document manquant) ---------- */

.media__indisponible {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  padding: 2.2rem 1rem;
  border: 2px dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
  color: var(--color-text-secondary);
  text-align: center;
}

.media__indisponible .fa-solid { font-size: 1.6rem; opacity: 0.6; }

/* ---------- Contribution : ajouter un média depuis la tablette (2026-09-01) ---------- */

.contribution { margin-top: 2rem; }

/* Cible tactile « gants » comme les portes de navigation : ce bouton se presse
   debout à l'atelier, pas assis au bureau. */
.contribution__bouton {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: 100%;
  min-height: var(--touch-target-lg);
  padding: 0.75rem 1rem;
  border: none;
  border-radius: var(--radius-lg);
  background: var(--color-primary);
  color: var(--color-text-on-primary);
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
}

.contribution__bouton:active { background: var(--color-primary-dark); }

/* Hors zone wifi : le bouton reste VISIBLE et dit pourquoi (décision du
   2026-09-01). Un bouton absent ferait conclure que la fonction n'existe pas. */
.contribution__bouton--inactif {
  background: var(--color-surface-alt);
  color: var(--color-text-muted);
  border: 1px dashed var(--color-border-strong);
  cursor: default;
}

/* Les trois gestes d'ajout : de grosses cibles, une par ligne sur téléphone. */
.gestes {
  display: grid;
  gap: 0.6rem;
  margin-top: 1rem;
}

@media (min-width: 600px) { .gestes { grid-template-columns: repeat(3, 1fr); } }

.geste {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 5.5rem;
  padding: 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
}

.geste:active { background: var(--color-primary-bg); }
.geste i { font-size: 1.5rem; color: var(--color-primary); }

.gestes__secondaire { margin-top: 0.75rem; text-align: center; }

.lien {
  min-height: var(--touch-target);
  padding: 0.5rem;
  border: none;
  background: transparent;
  color: var(--color-primary);
  font-size: 0.95rem;
  text-decoration: underline;
  cursor: pointer;
}

.champ {
  display: block;
  margin-top: 1rem;
  font-weight: 600;
  color: var(--color-text-secondary);
}

.champ__aide { font-weight: 400; color: var(--color-text-muted); }

.champ input, .champ select {
  display: block;
  width: 100%;
  min-height: var(--touch-target-lg);
  margin-top: 0.35rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 1rem;
  font-weight: 400;
}

.ajout__fichier {
  margin-top: 1.25rem;
  padding: 0.75rem;
  border-radius: var(--radius-md);
  background: var(--color-primary-bg);
  color: var(--color-primary-dark);
  word-break: break-all;
}

/* Sans barre de progression, un envoi de 20 Mo sur le wifi du vestiaire donne
   l'impression que rien ne se passe — et l'opérateur appuie une deuxième fois. */
.progression {
  height: 0.75rem;
  margin-top: 1rem;
  overflow: hidden;
  border-radius: var(--radius-full);
  background: var(--color-surface-alt);
}

.progression__barre {
  width: 0;
  height: 100%;
  background: var(--color-primary);
  transition: width 0.2s linear;
}

.progression__texte {
  margin-top: 0.4rem;
  color: var(--color-text-secondary);
  text-align: center;
}

/* ---------- Échelle de repères visuels (2026-09-03) ---------- */

/* Empilées et non côte à côte : la comparaison qui compte se fait entre le
   produit qu'on a EN MAIN et la référence, pas entre les trois références. Il
   faut donc voir chaque référence en grand — trois vignettes de 120 px sur un
   téléphone ne permettent pas de juger un grain de poivre. */
.echelle {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.repere {
  margin: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-surface);
}

.repere img {
  display: block;
  width: 100%;
  border: none;
  border-radius: 0;
}

/* Le libellé est AU-DESSUS de la photo, jamais en dessous : sur un écran de
   téléphone on voit l'image avant la légende, et un opérateur pressé pourrait
   prendre « trop » pour la bonne valeur s'il lisait après avoir regardé. */
.repere__niveau {
  padding: 0.6rem 0.9rem;
  background: var(--color-surface-alt);
  color: var(--color-text-secondary);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
}

/* La bonne valeur se distingue par la couleur ET par une coche : la couleur
   seule exclurait un opérateur daltonien, et l'atelier n'est pas l'endroit où
   demander à quelqu'un de deviner. */
.repere--conforme {
  border-color: var(--color-success);
  border-width: 2px;
}

.repere--conforme .repere__niveau {
  background: var(--color-success-bg);
  color: var(--color-success);
}

.repere__legende {
  margin: 0;
  padding: 0.5rem 0.9rem 0.7rem;
  color: var(--color-text-secondary);
  font-size: 0.9rem;
}