/* ===========================================================================
   Demande de sourcing — page publique /demande-de-sourcing, sa confirmation, et
   les deux écrans de l'espace (/espace/sourcing, /espace/sourcing/mes-demandes).

   Aucun composant de base.css n'est redéfini ici (.bouton, .champ, .entree,
   .carte, .badge, .alerte, .table gardent leur habillage) et aucune couleur
   n'est écrite en dur : seulement les jetons. Mobile d'abord : chaque grille
   part d'une colonne et s'élargit ensuite.

   Colonne de lecture : tout bloc de texte courant porte max-width: var(--mesure)
   — jamais le conteneur, toujours le paragraphe (docs/ARCHITECTURE.md).
   =========================================================================== */

/* ---------- Page publique : les trois étapes ---------- */

.sourcing-etapes {
  list-style: none;
  margin: 0 0 clamp(1.5rem, 4vw, 2.25rem);
  padding: 0;
  display: grid;
  gap: 1rem;
}
@media (min-width: 46rem) {
  .sourcing-etapes { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
}
.sourcing-etape {
  background: var(--surface);
  border: 1px solid var(--ligne);
  border-radius: var(--rayon);
  padding: 1.25rem 1.25rem 1.35rem;
  box-shadow: var(--ombre-1);
}
.sourcing-etape-rang {
  margin: 0 0 0.6rem;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  background: var(--sable-clair);
  color: var(--sable-fonce);
  font-family: var(--police-titre);
  font-size: 1.05rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sourcing-etape-titre { margin: 0 0 0.35rem; font-size: 1.05rem; }
.sourcing-etape-texte { margin: 0; color: var(--encre-2); font-size: var(--texte-s); max-width: var(--mesure); }

/* ---------- Page publique : ce que la demande n'engage pas ----------
   L'encadré garde sa largeur (c'est ce qui le fait remarquer) ; ce sont ses
   paragraphes qui reviennent à la colonne de lecture. */
.sourcing-transparence {
  background: var(--surface-2);
  border: 1px solid var(--ligne);
  border-left: 3px solid var(--sable);
  border-radius: 0 var(--rayon) var(--rayon) 0;
  padding: 1.15rem 1.35rem;
}
.sourcing-transparence-titre { margin: 0 0 0.5rem; font-size: 1.05rem; }
.sourcing-transparence p { margin: 0 0 0.5rem; color: var(--encre-2); font-size: var(--texte-s); max-width: var(--mesure); }
.sourcing-transparence p:last-child { margin-bottom: 0; }

/* ---------- Le formulaire (public et espace) ---------- */

.sourcing-form fieldset {
  border: 0;
  margin: 0 0 1.75rem;
  padding: 0;
}
.sourcing-form fieldset:last-of-type { margin-bottom: 1.25rem; }
.sourcing-form legend {
  padding: 0;
  margin-bottom: 0.9rem;
  font-family: var(--police-titre);
  font-size: 1.15rem;
  color: var(--encre);
}
.sourcing-obligatoire { margin-bottom: 1.1rem; }
.sourcing-consentement { align-items: flex-start; }
.sourcing-consentement span { max-width: var(--mesure); }

/* Quantité et unité : deux cases d'une même information, côte à côte dès qu'il y a la place. */
.sourcing-quantite { display: grid; gap: 0.5rem; grid-template-columns: 1fr; }
@media (min-width: 30rem) {
  .sourcing-quantite { grid-template-columns: 7rem 1fr; }
}

.sourcing-pied { margin: 1.5rem 0 0; max-width: var(--mesure); }

/* ---------- Confirmation ---------- */

.sourcing-confirmation-carte { text-align: left; }
.sourcing-coche {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--succes-clair);
  color: var(--succes-texte);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}
.sourcing-coche svg { width: 1.6rem; height: 1.6rem; }
.sourcing-confirmation-titre { margin: 0 0 1rem; }
.sourcing-confirmation-sous-titre { margin: 1.75rem 0 0.9rem; font-size: 1.15rem; }
.sourcing-confirmation-etapes { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; }
.sourcing-confirmation-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }
.sourcing-confirmation-contact { margin-top: 1rem; }

/* ---------- Espace : coordonnées déjà connues, affichées et non saisies ---------- */

.sourcing-coordonnees {
  margin: 0 0 0.75rem;
  display: grid;
  gap: 0.6rem 1.5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 40rem) {
  .sourcing-coordonnees { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.sourcing-coordonnee dt { font-size: var(--texte-xs); color: var(--encre-3); margin: 0 0 0.1rem; }
.sourcing-coordonnee dd { margin: 0; font-weight: 600; }

/* ---------- Espace : suivi ---------- */

.sourcing-vide { max-width: 46rem; }
.sourcing-vide h2 { margin: 0 0 0.5rem; font-size: 1.25rem; }
.sourcing-vide p { max-width: var(--mesure); }
.sourcing-reference { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--encre-2); }
.sourcing-designation { margin: 0; font-weight: 600; }
.sourcing-famille { margin: 0.1rem 0 0; font-size: var(--texte-xs); color: var(--encre-3); }
.sourcing-fiche { margin: 0.35rem 0 0; font-size: var(--texte-s); }
.sourcing-motif { margin: 0.35rem 0 0; font-size: var(--texte-xs); color: var(--encre-2); max-width: var(--mesure); }
.sourcing-legende { margin-top: 0.9rem; }

/* ---------- Corrections du 17/09/2026 ---------- */

/* Champ appât : masqué pour de bon, et non déporté hors écran. Un champ hors écran reste dans la mise en page
   et reste remplissable par un gestionnaire de formulaires ; un champ en display:none est ignoré par la
   plupart d'entre eux. La règle est portée ici, et non sur `.hp` de base.css, pour ne rien changer aux autres
   formulaires du site. */
.sourcing-form .hp { display: none !important; }

/* Résumé des erreurs : cible du focus après un envoi refusé, il porte donc un anneau visible. */
.sourcing-erreurs { scroll-margin-top: 1.5rem; }
.sourcing-erreurs:focus-visible { outline: 2px solid var(--encre-1); outline-offset: 3px; }
.sourcing-erreurs-liste { margin: 0.5rem 0 0; padding-left: 1.1rem; font-size: var(--texte-s); }
.sourcing-erreurs-liste li + li { margin-top: 0.25rem; }

/* Raccourci « Décrire mon produit » sous le chapeau (le formulaire est loin, sur téléphone). */
.section-entete-actions { margin: 1.2rem 0 0; }

/* Détail d'une demande dans l'espace : le lien d'exemple est réaffiché en texte, jamais en lien cliquable —
   c'est l'établissement lui-même qui l'a écrit, et le réafficher ne demande pas de l'ouvrir. */
.sourcing-lien-envoye { overflow-wrap: anywhere; color: var(--encre-2); }