/* ==========================================================================
   PADC — contribution : dépôt avec reconnaissance du texte, visionneuse à côté
   des champs, vérification intermédiaire, suivi d'une contribution (v0.3)
   ========================================================================== */
.grille-cartes--4 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }

/* --- Étape 1 : document -------------------------------------------------------- */
.depot__consigne { color: var(--encre-2); }
.depot__consigne .icone { color: var(--vert-600); vertical-align: -0.15em; }

/* --- Étape 2 : analyse ---------------------------------------------------------- */
.phases { display: grid; gap: var(--e-2); margin: var(--e-5) 0 0; padding: 0; list-style: none; counter-reset: phase; }
.phase {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--e-3);
  margin: 0;
  padding: var(--e-3) var(--e-4);
  border: 1px solid var(--trait);
  border-radius: var(--r-2);
  background: var(--surface-2);
  color: var(--encre-3);
}
.phase__icone { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--surface); border: 1px solid var(--trait); }
.phase__libelle { font-weight: 600; }
.phase__etat { color: var(--encre-3); font-size: var(--taille-s); font-variant-numeric: tabular-nums; }
.phase.est-en-cours { border-color: var(--info-trait); background: var(--info-fond); color: var(--encre); }
.phase.est-en-cours .phase__icone { border-color: var(--info); color: var(--info); }
.phase.est-faite { border-color: var(--succes-trait); background: var(--surface); color: var(--encre); }
.phase.est-faite .phase__icone { border-color: var(--succes); background: var(--succes-fond); color: var(--succes); }
.phase.est-echec { border-color: var(--alerte-trait); background: var(--alerte-fond); color: var(--encre); }
.phase.est-echec .phase__icone { border-color: var(--alerte); color: var(--alerte); }
.bilan-analyse h3 { margin-top: var(--e-5); font-size: var(--taille-l); }

/* --- Étapes 3 et 4 : formulaire et visionneuse côte à côte ---------------------------- */
.depot-double { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: var(--e-6); align-items: start; }
.depot-double__visionneuse { position: sticky; top: var(--e-3); }
.depot-double__formulaire > .groupe-champs--titre:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
@media (max-width: 63.99rem) {
  .depot-double { grid-template-columns: minmax(0, 1fr); gap: var(--e-5); }
  .depot-double__visionneuse { position: static; order: -1; }
}

.visionneuse-depot {
  display: grid;
  gap: var(--e-3);
  padding: var(--e-4);
  border: 1px solid var(--trait);
  border-radius: var(--r-3);
  background: var(--surface-2);
  box-shadow: var(--ombre-1);
}
.visionneuse-depot__entete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-2) var(--e-3); }
.visionneuse-depot__titre { display: flex; align-items: center; gap: var(--e-2); margin: 0; font-size: var(--taille-m); }
.visionneuse-depot__titre .icone { color: var(--vert-600); }
.visionneuse-depot__navigation { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); font-size: var(--taille-s); }
.visionneuse-depot__navigation label { font-weight: 650; }
.visionneuse-depot__navigation [data-zoom] { margin-inline-start: auto; }
.visionneuse-depot__vue { min-height: 16rem; }
.visionneuse-depot__etat { margin: 0; color: var(--encre-3); font-size: var(--taille-xs); }
.visionneuse-depot__pdf { display: block; width: 100%; height: min(78vh, 60rem); border: 1px solid var(--trait); border-radius: var(--r-2); background: #fff; }
.visionneuse-depot__original { display: block; width: 100%; height: auto; border: 1px solid var(--trait); background: #fff; }

.bascule { display: inline-flex; flex-wrap: wrap; padding: 3px; border: 1px solid var(--trait-fort); border-radius: var(--r-pilule); background: var(--surface); }
.bascule__bouton {
  min-height: 36px;
  padding: 0.3rem 0.85rem;
  border: 0;
  border-radius: var(--r-pilule);
  background: transparent;
  color: var(--encre-2);
  font: inherit;
  font-size: var(--taille-xs);
  font-weight: 650;
  cursor: pointer;
}
.bascule__bouton:hover { color: var(--vert-900); background: var(--vert-50); }
.bascule__bouton[aria-pressed="true"] { background: var(--vert-700); color: #fff; }

.page-ocr { position: relative; max-height: min(78vh, 60rem); overflow: auto; border: 1px solid var(--trait); border-radius: var(--r-2); background: #e9edec; }
.page-ocr__feuille { position: relative; margin: 0 auto; background: #fff; box-shadow: 0 2px 10px rgba(10, 53, 48, 0.12); }
.page-ocr__feuille img { display: block; width: 100%; height: auto; }
.page-ocr--zoom .page-ocr__feuille { width: 200%; }
.page-ocr__surlignage {
  position: absolute;
  border-radius: 3px;
  background: rgba(255, 209, 102, 0.35);
  box-shadow: 0 0 0 2px #d9a92e;
  pointer-events: none;
}
.page-ocr--attente { display: grid; place-items: center; min-height: 16rem; padding: var(--e-5); background: repeating-linear-gradient(-45deg, #fafbfb 0 10px, #f3f5f4 10px 20px); color: var(--encre-2); text-align: center; }
.page-ocr__qualite { display: flex; gap: var(--e-1); align-items: flex-start; margin: 0; color: var(--alerte); font-size: var(--taille-xs); font-weight: 600; }

.texte-ocr {
  max-height: min(78vh, 60rem);
  overflow: auto;
  padding: var(--e-4);
  border: 1px solid var(--trait);
  border-radius: var(--r-2);
  background: var(--papier);
  font-family: var(--police-document);
  font-size: 1rem;
  line-height: 1.55;
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.texte-ocr--lignes { white-space: normal; }
.texte-ocr--lignes p { margin: 0 0 2px; padding: 1px var(--e-1); border-radius: 3px; }
.texte-ocr--lignes .est-surligne { background: #fff5c2; box-shadow: inset 3px 0 0 #d9a92e; }
.texte-ocr--lignes mark { background: transparent; padding: 0; }

/* Suggestions de la reconnaissance, sous le libellé de chaque champ. */
.champ__aide-texte { display: block; margin-bottom: var(--e-1); }
.suggestion {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px var(--e-2);
  margin-top: 2px;
  padding: var(--e-2) var(--e-3);
  border: 1px solid var(--vert-200);
  border-inline-start: 3px solid var(--vert-500);
  border-radius: 0 var(--r-2) var(--r-2) 0;
  background: var(--vert-50);
  color: var(--encre-2);
  font-size: var(--taille-xs);
}
.suggestion__badge { color: var(--vert-800); font-weight: 700; white-space: nowrap; }
.suggestion__badge .icone { vertical-align: -2px; }
.suggestion__ligne { flex: 1 1 14rem; min-width: 0; font-family: var(--police-code); overflow-wrap: anywhere; }
.suggestion__note { flex-basis: 100%; color: var(--encre-2); font-style: italic; }
.suggestion__voir { font-size: var(--taille-xs); font-weight: 650; }
.suggestion--modifiee { border-color: var(--info-trait); border-inline-start-color: var(--info); background: var(--info-fond); }
.suggestion--modifiee .suggestion__badge { color: var(--info); }

.lien-bouton {
  padding: 0;
  border: 0;
  background: none;
  color: var(--vert-700);
  font: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  cursor: pointer;
}
.lien-bouton:hover { color: var(--vert-900); text-decoration-thickness: 2px; }
.lien-bouton:disabled { color: var(--encre-3); cursor: default; }

.contribution__coordonnees { padding: var(--e-4); border: 1px solid var(--vert-200) !important; border-radius: var(--r-3); background: var(--vert-50); }
.contribution__coordonnees > legend { float: none !important; width: auto !important; padding: 0 var(--e-2); margin-bottom: var(--e-1) !important; }
.contribution__coordonnees > .champ__aide { display: block; margin-bottom: var(--e-3); }

/* --- Étape 4 : contrôle de cohérence ------------------------------------------------------ */
.coherence h3 { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-2); margin: 0; font-size: var(--taille-l); }
.coherence__bilan { font-size: var(--taille-s); font-weight: 600; }
.controle__actions { display: flex; flex-wrap: wrap; gap: var(--e-3); margin-top: 2px; font-size: var(--taille-xs); font-weight: 650; }
.coherence + h3 { margin-top: var(--e-6); font-size: var(--taille-l); }

/* --- Confirmation et lien de suivi ------------------------------------------------------ */
.suivi-lien { margin: var(--e-5) 0; padding: var(--e-4); border: 1px solid var(--trait); border-radius: var(--r-3); background: var(--surface-2); }
.suivi-lien h2 { display: flex; align-items: center; gap: var(--e-2); margin: 0 0 var(--e-2); }
.suivi-lien h2 .icone { color: var(--vert-600); }
.suivi-lien__champ { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.suivi-lien__champ .saisie { flex: 1 1 18rem; min-width: 0; font-family: var(--police-code); font-size: var(--taille-xs); }

/* --- Suivi d'une contribution ------------------------------------------------------------- */
.suivi { padding: var(--e-5); }
.suivi__formulaire { padding: var(--e-5); }
.suivi__entete { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); margin-bottom: var(--e-3); }
.suivi__objet { margin: 0 0 var(--e-1); font-family: var(--police-document); font-size: var(--taille-xl); font-weight: 600; }
.suivi__etapes { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--e-2); margin: var(--e-5) 0; padding: 0; list-style: none; }
.suivi__etapes li { position: relative; display: grid; gap: 2px; margin: 0; padding: var(--e-3); border: 1px solid var(--trait); border-radius: var(--r-2); background: var(--surface-2); color: var(--encre-3); font-size: var(--taille-s); }
.suivi__etapes li strong { color: var(--encre-2); font-size: var(--taille-m); }
.suivi__point { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; margin-bottom: var(--e-1); border: 2px solid var(--trait-fort); border-radius: 50%; background: var(--surface); }
.suivi__point .icone { width: 1rem; height: 1rem; }
.suivi__etapes .est-faite { border-color: var(--succes-trait); background: var(--succes-fond); color: var(--encre-2); }
.suivi__etapes .est-faite strong { color: var(--succes); }
.suivi__etapes .est-faite .suivi__point { border-color: var(--succes); background: var(--succes); color: #fff; }
.suivi__etapes .est-refus { border-color: var(--erreur-trait); background: var(--erreur-fond); }
.suivi__etapes .est-refus strong { color: var(--erreur); }
.suivi__etapes .est-refus .suivi__point { border-color: var(--erreur); background: var(--erreur); color: #fff; }

/* --- Bibliothèque : contributions publiées ------------------------------------------------ */
.etiquette--contribution { display: inline-flex; align-items: center; gap: 4px; border-color: var(--info-trait); background: var(--info-fond); color: var(--info); }
.carte-document__sans-image { display: grid; place-items: center; width: 100%; height: 100%; min-height: 8rem; background: var(--surface-2); color: var(--encre-3); }
.groupe-documents--contributions { padding: var(--e-4); border: 1px solid var(--info-trait); border-radius: var(--r-3); background: linear-gradient(180deg, var(--info-fond), var(--surface) 12rem); }


/* ==========================================================================
   Espace contributeur (/portail/compte) et formulaire de proposition
   (/portail/proposer) : accès, notifications, suivi et circuit de validation.
   ========================================================================== */

/* --- Accès (connexion / inscription) --------------------------------------- */
.compte-acces {
  display: grid;
  gap: var(--e-5);
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  align-items: start;
}

.compte-panneau {
  padding: var(--e-5);
  border: 1px solid var(--trait);
  border-radius: var(--r-3);
  background: var(--surface);
  box-shadow: var(--ombre-1);
}

.compte-panneau h2 { margin-top: 0; }

/* --- En-tête de session ----------------------------------------------------- */
.compte-entete {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  margin-bottom: var(--e-6);
  padding: var(--e-4) var(--e-5);
  border: 1px solid var(--succes-trait);
  border-radius: var(--r-3);
  background: var(--succes-fond);
}

.compte-identite {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  margin: 0;
  font-size: var(--taille-m);
}

.compte-role { color: var(--encre-3); font-size: var(--taille-s); }

.compte-nonlues {
  display: inline-grid;
  place-items: center;
  min-width: 1.5rem;
  height: 1.5rem;
  padding: 0 var(--e-1);
  border-radius: var(--r-pilule);
  background: var(--rouge-ali);
  color: #fff;
  font-size: var(--taille-xs);
  font-weight: 700;
}

.compte-vide { color: var(--encre-3); font-style: italic; }

/* --- Notifications ------------------------------------------------------------ */
.notifications {
  margin: var(--e-3) 0 var(--e-7);
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--e-2);
}

.notification {
  padding: var(--e-3) var(--e-4);
  border: 1px solid var(--trait);
  border-radius: var(--r-2);
  background: var(--surface);
}

.notification--nonlue {
  border-inline-start: 4px solid var(--vert-600);
  background: var(--vert-50);
}

.notification__message { margin: 0; }
.notification__meta { margin: var(--e-1) 0 0; color: var(--encre-3); font-size: var(--taille-xs); }

/* --- Cartes de propositions ---------------------------------------------------- */
.propositions {
  display: grid;
  gap: var(--e-4);
  margin-top: var(--e-3);
}

.proposition {
  padding: var(--e-4) var(--e-5);
  border: 1px solid var(--trait);
  border-radius: var(--r-3);
  background: var(--surface);
}

.proposition__entete {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-2);
}

.proposition__titre { margin: 0; font-size: var(--taille-l); }

.proposition__meta { margin: var(--e-1) 0 var(--e-3); color: var(--encre-3); font-size: var(--taille-xs); }

.proposition__details { margin: 0 0 var(--e-3); }

.proposition__explication {
  padding: var(--e-3);
  border-inline-start: 3px solid var(--trait-fort);
  background: var(--surface-2);
  font-size: var(--taille-s);
}

.proposition__actuel summary { cursor: pointer; color: var(--encre-2); font-size: var(--taille-s); }
.proposition__actuel pre {
  overflow-x: auto;
  padding: var(--e-3);
  background: var(--surface-2);
  font-size: var(--taille-xs);
}

.proposition__historique {
  margin: var(--e-3) 0 0;
  padding-inline-start: var(--e-5);
  font-size: var(--taille-xs);
  color: var(--encre-2);
}

.proposition__historique li { margin-bottom: var(--e-1); }

.proposition__reponse {
  margin-top: var(--e-4);
  padding-top: var(--e-4);
  border-top: 1px dashed var(--trait);
}

.proposition__reponse h4 { margin-top: 0; }

/* --- Statuts du circuit de validation ------------------------------------------- */
.statut-proposition {
  display: inline-flex;
  align-items: center;
  gap: var(--e-1);
  padding: var(--e-1) var(--e-3);
  border-radius: var(--r-pilule);
  font-size: var(--taille-xs);
  font-weight: 650;
  white-space: nowrap;
}

.statut-proposition--attente { background: var(--alerte-fond); color: var(--alerte); }
.statut-proposition--correction { background: var(--info-fond); color: var(--info); }
.statut-proposition--succes { background: var(--succes-fond); color: var(--succes); }
.statut-proposition--rejet { background: var(--erreur-fond); color: var(--erreur); }

/* --- Formulaire de proposition ---------------------------------------------------- */
.formulaire-proposition {
  max-width: 46rem;
  display: grid;
  gap: var(--e-4);
}

.proposition-duree {
  margin: 0;
  padding: var(--e-3);
  border: 1px solid var(--trait);
  border-radius: var(--r-2);
}

.proposition-duree legend { padding: 0 var(--e-2); font-weight: 650; font-size: var(--taille-s); }
.proposition-duree .champ__aide { margin: 0 0 var(--e-2); }

.proposition-duree__ligne {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  align-items: center;
}

.proposition-duree__valeur { max-width: 7rem; }

.proposition-actuel {
  margin-bottom: var(--e-4);
  padding: var(--e-4);
  border: 1px solid var(--alerte-trait);
  border-radius: var(--r-3);
  background: var(--alerte-fond);
}

.proposition-actuel h3 { margin-top: 0; }
.proposition-actuel .faits { margin-bottom: 0; }