/* Espace « Recherche » du débouché.
   Reprend les codes du portail : fond clair, cartes blanches, vert Greenr en accent. */

.sourcing-wrap {
    max-width: 1180px;
    margin: 0 auto;
    padding: 24px 20px 60px;
}

.sourcing-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 28px;
}

.sourcing-header h1 {
    margin: 0 0 6px;
    font-size: 1.6rem;
}

.sourcing-intro {
    margin: 0;
    color: #5a6b62;
    max-width: 62ch;
}

.sourcing-loading,
.sourcing-muted {
    color: #7a8b82;
}

.sourcing-empty,
.sourcing-empty-matches {
    background: #fff;
    border: 1px solid #e3eae6;
    border-radius: 12px;
    padding: 32px;
    text-align: center;
    color: #5a6b62;
}

.sourcing-empty h2 {
    margin-top: 0;
    font-size: 1.15rem;
}

/* ------------------------------------------------------------- rassurance */

/* Le débouché qui découvre l'écran se demande d'abord « et concrètement, il se passe
   quoi ? ». Ces quatre points répondent avant qu'il ouvre une recherche : logistique
   prise en charge, relation humaine préservée, démarche exploratoire, décision commune. */
.sourcing-rassurance {
    background: #f4faf7;
    border: 1px solid #d9eae1;
    border-left: 3px solid #2f7d5b;
    border-radius: 12px;
    padding: 18px 20px;
    margin-bottom: 28px;
}

.sourcing-rassurance-titre {
    margin: 0 0 12px;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #2f7d5b;
}

.sourcing-rassurance-liste {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 28px;
}

.sourcing-rassurance-liste li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: #4a5b53;
    font-size: 0.92rem;
    line-height: 1.45;
}

.sourcing-rassurance-liste i {
    color: #2f7d5b;
    margin-top: 3px;
    flex: 0 0 16px;
    text-align: center;
}

.sourcing-rassurance-liste strong {
    color: #2b3a33;
}

@media (max-width: 720px) {
    .sourcing-rassurance-liste { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------- recherches */

.sourcing-searches {
    margin-bottom: 32px;
}

.sourcing-searches h2 {
    font-size: 1.05rem;
    margin: 0 0 12px;
}

/* La carte de recherche a cessé d'être un <button> (elle en contient un, ce que le HTML
   interdit) : le curseur et le survol que l'élément natif fournissait doivent donc être
   rendus à la main. Même vert clair que les lignes de gisements — deux listes cliquables
   dans le même écran ne peuvent pas réagir différemment au survol. */
.sourcing-search {
    background: #fff;
    border: 1px solid #e3eae6;
    border-radius: 10px;
    padding: 14px 18px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: background-color 0.12s ease, border-color 0.12s ease;
}

.sourcing-search:hover {
    background: #f6faf8;
    border-color: #cfe0d8;
}

.sourcing-search:focus-visible {
    outline: 2px solid #2f7d5b;
    outline-offset: 2px;
}

/* Le bouton interne garde sa propre identité : sans cela il hériterait du survol de la
   carte et on ne saurait plus lequel des deux on s'apprête à déclencher. */
.sourcing-search .sourcing-link:hover {
    background: #fff;
}

.sourcing-search-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
}

.sourcing-search h3 {
    margin: 0 0 8px;
    font-size: 1rem;
}

.sourcing-search-meta {
    display: flex;
    align-items: center;
    gap: 14px;
    white-space: nowrap;
}

.sourcing-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.sourcing-chip {
    display: inline-block;
    background: #f2f7f4;
    border: 1px solid #dbe8e1;
    border-radius: 999px;
    padding: 2px 10px;
    font-size: 0.8rem;
    color: #3f5a4d;
}

.sourcing-chip-muted {
    background: #f7f8f8;
    color: #8a9992;
}

.sourcing-count {
    font-weight: 600;
    color: #2e7d5b;
}

/* ---------------------------------------------------------------- tableau */

.sourcing-group {
    margin-bottom: 34px;
}

.sourcing-group h3 {
    font-size: 1.05rem;
    margin: 0 0 10px;
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.sourcing-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border: 1px solid #e3eae6;
    border-radius: 10px;
    overflow: hidden;
}

.sourcing-table th {
    text-align: left;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #8a9992;
    padding: 10px 14px;
    border-bottom: 1px solid #eef2f0;
}

.sourcing-table td {
    padding: 12px 14px;
    border-bottom: 1px solid #f2f5f3;
    vertical-align: middle;
}

.sourcing-table tr:last-child td {
    border-bottom: none;
}

.sourcing-matiere {
    font-weight: 600;
}

.sourcing-sub {
    font-size: 0.82rem;
    color: #8a9992;
}

.sourcing-img img,
.sourcing-img-vide {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    object-fit: cover;
    display: block;
    background: #eef3f0;
}

.sourcing-tag {
    display: inline-block;
    background: #e8f5ee;
    color: #2e7d5b;
    border-radius: 999px;
    padding: 2px 10px;
    font-size: 0.78rem;
}

/* Une donnée manquante se signale, elle ne se cache pas : le débouché doit savoir
   que la caractéristique n'a pas été vérifiée, pas croire qu'elle est absente. */
.sourcing-flag {
    display: inline-block;
    background: #fdf4e3;
    color: #8a6d1f;
    border-radius: 999px;
    padding: 2px 10px;
    font-size: 0.78rem;
}

.sourcing-actions {
    text-align: right;
}

.sourcing-choice {
    font-size: 0.85rem;
    font-weight: 600;
}

.sourcing-choice-interested {
    color: #2e7d5b;
}

.sourcing-choice-not_interested {
    color: #97a39c;
}

/* ---------------------------------------------------------------- boutons */

.sourcing-btn {
    background: #fff;
    border: 1px solid #cddcd4;
    border-radius: 8px;
    padding: 7px 14px;
    font-size: 0.88rem;
    cursor: pointer;
    color: #2f4a3d;
}

.sourcing-btn:hover {
    border-color: #2e7d5b;
}

.sourcing-btn-primary {
    background: #2e7d5b;
    border-color: #2e7d5b;
    color: #fff;
}

.sourcing-btn-primary:hover {
    background: #266b4d;
}

.sourcing-btn:disabled {
    opacity: 0.6;
    cursor: default;
}

.sourcing-link {
    background: none;
    border: none;
    color: #2e7d5b;
    cursor: pointer;
    text-decoration: underline;
    padding: 0;
    font-size: 0.85rem;
}

.sourcing-more {
    margin-top: 10px;
    background: none;
    border: 1px dashed #cddcd4;
    border-radius: 8px;
    padding: 8px 14px;
    cursor: pointer;
    color: #3f5a4d;
    width: 100%;
}

/* ---------------------------------------------------------------- modale */

.sourcing-modal {
    position: fixed;
    inset: 0;
    background: rgba(20, 35, 28, 0.45);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 40px 16px;
    overflow-y: auto;
    /* Au-dessus de TOUT : le header est à 1000, le bandeau d'impersonation à 1100 et celui
       de staging à 1200. À 1000, la modale passait dessous — on la voyait tronquée par le
       haut, sans pouvoir atteindre sa croix. */
    z-index: 13100;
}

.sourcing-modal.hidden {
    display: none;
}

.sourcing-modal-box {
    background: #fff;
    border-radius: 14px;
    width: min(680px, 100%);
    padding: 22px 26px 26px;
    /* La boîte ne doit jamais dépasser l'écran : c'est elle qui défile, pas la page
       derrière. Sinon le pied du formulaire (« Enregistrer ») devient inatteignable. */
    max-height: calc(100vh - 80px);
    overflow-y: auto;
}

/* Fiche d'un gisement : le visuel à gauche, la lecture à droite. L'image sert à
   reconnaître la matière, pas à occuper la moitié de l'écran. */
.sourcing-modal-gisement {
    width: min(880px, 100%);
}

.sourcing-fiche-corps {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 22px;
    align-items: start;
}

.sourcing-fiche-visuel img {
    width: 100%;
    border-radius: 10px;
    display: block;
}

.sourcing-fiche-detail > section + section {
    margin-top: 18px;
}

.sourcing-fiche-detail h3 {
    margin: 0 0 8px;
    font-size: 15px;
}

@media (max-width: 720px) {
    .sourcing-fiche-corps { grid-template-columns: 1fr; }
    .sourcing-fiche-visuel { max-width: 200px; }
}

.sourcing-modal-box header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.sourcing-modal-box h2 {
    margin: 0;
    font-size: 1.2rem;
}

.sourcing-close {
    background: none;
    border: none;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    color: #8a9992;
}

.sourcing-modal-box fieldset {
    border: 1px solid #e6ece9;
    border-radius: 10px;
    padding: 14px 16px;
    margin: 0 0 14px;
}

.sourcing-modal-box legend {
    font-size: 0.85rem;
    font-weight: 600;
    color: #3f5a4d;
    padding: 0 6px;
}

.sourcing-modal-box label {
    display: block;
    font-size: 0.88rem;
    color: #3f5a4d;
    margin-bottom: 10px;
}

.sourcing-modal-box input,
.sourcing-modal-box select,
.sourcing-modal-box textarea {
    width: 100%;
    margin-top: 4px;
    padding: 8px 10px;
    border: 1px solid #cddcd4;
    border-radius: 8px;
    font: inherit;
}

.sourcing-row {
    display: flex;
    gap: 14px;
}

.sourcing-row > label {
    flex: 1;
}

/* Capacité technique : le Oui/Non tient sur un tiers, le commentaire prend le reste.
   Le commentaire est la moitié utile de l'information — il ne doit pas ressembler à un
   champ optionnel relégué en bout de ligne. */
.sourcing-capacite {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 10px 0;
    border-bottom: 1px solid var(--border, #e5e7eb);
}

.sourcing-capacite:last-of-type {
    border-bottom: none;
}

.sourcing-capacite > label {
    flex: 1;
}

.sourcing-capacite > .sourcing-capacite-note {
    flex: 2;
}

.sourcing-capacite textarea {
    width: 100%;
    resize: vertical;
    font: inherit;
}

@media (max-width: 640px) {
    .sourcing-capacite { flex-direction: column; gap: 6px; }
}

/* Date de dernière exécution : discrète, mais toujours présente. Un « 0 gisement » sans
   date ne se distingue pas d'un calcul jamais lancé. */
.sourcing-maj {
    margin: 6px 0 0;
    font-size: 12px;
    color: var(--text-muted, #6b7280);
}

.sourcing-maj-encours {
    color: var(--accent, #2563eb);
}

/* Spinner : il remplace le compteur, il ne s'y ajoute pas — afficher un nombre qu'on sait
   périmé à côté d'une animation de chargement serait contradictoire. */
.sourcing-spinner {
    display: inline-block;
    width: 22px;
    height: 22px;
    border: 2px solid var(--border, #e5e7eb);
    border-top-color: var(--accent, #2563eb);
    border-radius: 50%;
    animation: sourcing-spin 0.7s linear infinite;
}

@keyframes sourcing-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .sourcing-spinner { animation-duration: 2.5s; }
}

/* Ligne de gisement cliquable : c'est la ligne entière qui ouvre la fiche, un bouton
   « Voir la fiche » répété trente fois disait la même chose trente fois. */
.sourcing-ligne {
    cursor: pointer;
}

.sourcing-ligne:hover {
    background: #f6faf8;
}

.sourcing-ligne:focus-visible {
    outline: 2px solid #2f7d5b;
    outline-offset: -2px;
}

.sourcing-chargement {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 26px 4px;
    color: #6b7280;
}

/* Une capacité manquante se dit en une ligne à l'étage de la liste : le détail par
   contrainte appartient à la recherche ouverte, où il porte sur une matière précise. */
.sourcing-arenseigner {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 8px 0 0;
    padding: 7px 11px;
    border-radius: 7px;
    background: #fffbeb;
    color: #92400e;
    font-size: 13px;
}

.sourcing-arenseigner .sourcing-link {
    color: #b45309;
    font-weight: 600;
}

/* Deux champs côte à côte, sans chevauchement possible.
   `.sourcing-row` reposait sur `flex` sans `min-width: 0` : les champs number gardent une
   largeur intrinsèque et débordaient l'un sur l'autre. Une grille fixe règle le problème
   à la racine plutôt que de le rattraper au cas par cas. */
.sourcing-grille2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.sourcing-grille2 > label,
.sourcing-row > label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.sourcing-grille2 input,
.sourcing-row input,
.sourcing-row select {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

@media (max-width: 560px) {
    .sourcing-grille2 { grid-template-columns: 1fr; }
}

/* Fiche débouché : identité et ICPE en deux colonnes, chaque couple libellé/valeur
   restant solidaire. Un <dl> à plat séparait le terme de sa définition dès que la
   largeur changeait. */
.sourcing-fiche-grille {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 22px;
    margin: 0;
}

.sourcing-fiche-grille > div {
    min-width: 0;
}

.sourcing-fiche-grille dt {
    font-size: 12px;
    color: #6b7280;
    margin: 0;
}

.sourcing-fiche-grille dd {
    margin: 2px 0 0;
    font-weight: 600;
    overflow-wrap: anywhere;
}

@media (max-width: 560px) {
    .sourcing-fiche-grille { grid-template-columns: 1fr; }
}

/* Le nombre de gisements suspendus à une capacité : c'est lui qui donne une raison de
   remplir le champ, donc il se place juste sous le champ concerné. */
.sourcing-enjeu {
    display: inline-block;
    margin-top: 4px;
    font-size: 12px;
    font-weight: 600;
    color: #b45309;
}

/* Capacité sans réponse : le champ lui-même porte l'appel, pas seulement le texte à côté.
   C'est le même orange que partout ailleurs dans le portail pour « information manquante »
   (bandeau de la liste, verdicts de contraintes) — une quatrième nuance d'orange ferait
   perdre au code couleur le sens qu'on vient de lui donner.
   La classe est retirée dès que l'utilisateur répond : une couleur qui ne bouge jamais
   devient un décor, et on cesse de la voir. */
.sourcing-select-vide {
    background-color: #fffbeb;
    border-color: #f4c77b !important;
    color: #92400e;
    font-weight: 600;
}

.sourcing-select-vide:focus {
    outline: 2px solid #d97706;
    outline-offset: 1px;
}

/* Qui gère la recherche. L'information n'est pas décorative : elle explique pourquoi le
   bouton « Modifier » est là ou non, et évite de proposer une action que le serveur
   refuse — c'est ce qui produisait un 403 muet. */
.sourcing-origine {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    background: #eef2f7;
    color: #475569;
    font-size: 11px;
    font-weight: 600;
    vertical-align: middle;
}

.sourcing-origine-vous {
    background: #e6f4ec;
    color: #216c47;
}

.sourcing-gere-par {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 12px;
    border-radius: 8px;
    background: #eef2f7;
    color: #475569;
    font-size: 13px;
    font-weight: 600;
}

/* « Pas d'intérêt » ferme un dossier : il doit se distinguer au premier coup d'œil de
   « Ce gisement m'intéresse ». Rouge PLEIN et non bordé — les deux boutons sont côte à
   côte et de même taille, une simple bordure ne suffisait pas à les départager. */
.sourcing-btn-refus {
    background: #b91c1c;
    border-color: #b91c1c;
    color: #fff;
}

.sourcing-btn-refus:hover {
    background: #991b1b;
    border-color: #991b1b;
}

.sourcing-btn-danger {
    border-color: #e5b4b4;
    color: #b91c1c;
}

.sourcing-btn-danger:hover {
    background: #fef2f2;
}

/* État du croisement — où en est ce gisement pour ce débouché.
   Ces états ne viennent pas du portail dans leur majorité : ils ont été posés au téléphone
   par l'équipe avant-vente. C'est ce qui permet à un débouché de retrouver un dossier
   engagé sans avoir à demander. */
.sourcing-etat {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.sourcing-etat-retenu  { background: #dcfce7; color: #166534; }
.sourcing-etat-etude   { background: #dbeafe; color: #1e40af; }
.sourcing-etat-contact { background: #ede9fe; color: #5b21b6; }
.sourcing-etat-ecarte  { background: #f1f5f9; color: #64748b; }

.sourcing-etat-fiche {
    margin: 0 0 14px;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 14px;
}

.sourcing-etat-fiche.sourcing-etat-retenu  { background: #dcfce7; color: #14532d; }
.sourcing-etat-fiche.sourcing-etat-etude   { background: #dbeafe; color: #1e3a8a; }
.sourcing-etat-fiche.sourcing-etat-contact { background: #ede9fe; color: #4c1d95; }
.sourcing-etat-fiche.sourcing-etat-ecarte  { background: #f1f5f9; color: #475569; }

/* Deux boutons plutôt qu'une case à cocher : « Masquer ceux déjà traités » ne nommait
   qu'un seul des deux états, et il fallait déduire l'autre. Ici les deux vues sont
   nommées, et celle qu'on regarde est visiblement enfoncée. */
/* Quatre vues depuis que « Traités » s'est scindé en « Sélectionnés » et « Écartés » :
   le groupe ne tient plus systématiquement sur une ligne, il doit pouvoir se replier
   plutôt que de pousser la barre d'outils hors de l'écran. */
.sourcing-bascule {
    display: inline-flex;
    flex-wrap: wrap;
    border: 1px solid #dbe5e0;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}

.sourcing-bascule button {
    border: none;
    background: none;
    padding: 7px 14px;
    font: inherit;
    font-size: 13px;
    color: #4a6b5c;
    cursor: pointer;
    white-space: nowrap;
}

.sourcing-bascule button + button { border-left: 1px solid #dbe5e0; }

.sourcing-bascule button span {
    margin-left: 6px;
    font-weight: 700;
    opacity: 0.65;
}

.sourcing-bascule button.is-actif {
    background: #2f7d5b;
    color: #fff;
}

.sourcing-bascule button.is-actif span { opacity: 0.85; }

/* --- Formulaire de recherche : lecture de gauche à droite --------------------------
   Empilé verticalement, le formulaire faisait défiler sur trois écrans et on ne voyait
   jamais deux critères à la fois. Les blocs se placent donc côte à côte tant que la
   largeur le permet, et repassent en colonne unique sur téléphone — nos débouchés
   consultent souvent depuis le champ. */

.sourcing-primaires {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}

.sourcing-deux-blocs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    align-items: start;
}

.sourcing-deux-blocs > fieldset {
    margin: 0;
}

/* Cases à cocher : un <select multiple> exige Ctrl/Cmd pour choisir plusieurs valeurs —
   un geste que personne ne devine, et qui n'existe pas au doigt. */
.sourcing-cases {
    border: 1px solid #e3eae6;
    border-radius: 8px;
    padding: 8px 12px 10px;
    margin: 0;
}

.sourcing-cases legend {
    padding: 0 6px;
    font-size: 13px;
    font-weight: 600;
}

.sourcing-case {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 2px;
    cursor: pointer;
    /* 40px : la cible reste atteignable au doigt sans viser. */
    min-height: 34px;
}

.sourcing-case input {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    accent-color: #2f7d5b;
}

@media (max-width: 860px) {
    .sourcing-primaires,
    .sourcing-deux-blocs { grid-template-columns: 1fr; }
}

/* --- Mobile : le tableau devient une liste de cartes ------------------------------
   Huit colonnes ne tiennent pas sur un téléphone, et un tableau qui déborde pousse la
   page entière de travers. Chaque ligne devient un bloc, chaque cellule porte son
   libellé via `data-label`. */
@media (max-width: 760px) {
    .sourcing-table thead { display: none; }

    .sourcing-table,
    .sourcing-table tbody,
    .sourcing-table tr,
    .sourcing-table td { display: block; width: 100%; }

    .sourcing-table tr {
        position: relative;
        border: 1px solid #e3eae6;
        border-radius: 10px;
        margin-bottom: 10px;
        padding: 12px 14px;
        background: #fff;
    }

    .sourcing-table td {
        border: none;
        padding: 3px 0;
    }

    .sourcing-table td[data-label]::before {
        content: attr(data-label) " : ";
        font-weight: 600;
        color: #6b7280;
    }

    /* La vignette et les trois verdicts se remettent en ligne : ce sont des repères
       visuels, pas des données à lire l'une sous l'autre. */
    .sourcing-table td.sourcing-img { display: inline-block; width: auto; vertical-align: middle; }
    .sourcing-table td.cu-col { display: inline-block; width: auto; padding-right: 8px; }

    .sourcing-table td.sourcing-actions {
        position: absolute;
        top: 12px;
        right: 12px;
        width: auto;
    }
}

/* Référence lisible d'une recherche (RB-0021). C'est ce qu'on dicte au téléphone :
   monospace pour ne pas confondre 0 et O, sélectionnable d'un clic. */
.sourcing-ref {
    display: inline-block;
    margin-right: 8px;
    padding: 1px 7px;
    border-radius: 5px;
    background: #eef2f7;
    color: #475569;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    font-weight: 600;
    vertical-align: middle;
    user-select: all;
}

/* Interrupteur actif / arrêté. Un interrupteur plutôt qu'un bouton « Arrêter » : il
   montre l'état COURANT, alors qu'un bouton ne montre que l'action possible — et on ne
   sait jamais si « Arrêter » signifie « c'est actif » ou « ça vient d'être arrêté ». */
.sourcing-toggle {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    flex-shrink: 0;
}

.sourcing-toggle input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* L'état est ÉCRIT dans l'interrupteur. Une couleur seule ne dit pas si l'on est allumé
   ou éteint : il faut connaître la convention. Le mot, lui, se lit.
   Largeur fixe pour « Actif » comme pour « Inactif » — sinon le bouton change de taille
   en basculant, et l'œil perd le repère. */
.sourcing-toggle-piste {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 86px;
    height: 26px;
    border-radius: 999px;
    background: #94a3b8;
    transition: background-color 0.15s ease;
}

/* La pastille : à gauche quand inactif, à droite quand actif. */
.sourcing-toggle-piste::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    transition: transform 0.15s ease;
}

.sourcing-toggle-mot {
    flex: 1;
    text-align: center;
    padding-left: 20px;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.02em;
    transition: padding 0.15s ease;
}

.sourcing-toggle input:checked + .sourcing-toggle-piste { background: #2f7d5b; }
.sourcing-toggle input:checked + .sourcing-toggle-piste::after { transform: translateX(60px); }
/* Actif : la pastille passe à droite, le mot se recentre à gauche. */
.sourcing-toggle input:checked + .sourcing-toggle-piste .sourcing-toggle-mot {
    padding-left: 0;
    padding-right: 20px;
}
.sourcing-toggle input:focus-visible + .sourcing-toggle-piste { outline: 2px solid #2f7d5b; outline-offset: 2px; }

/* Une recherche arrêtée reste listée — sinon on ne pourrait pas la relancer — mais elle
   ne doit pas se confondre avec les actives. */
.sourcing-arretee {
    padding: 3px 10px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #64748b;
    font-size: 11px;
    font-weight: 700;
}

.sourcing-search:has(.sourcing-toggle input:not(:checked)) {
    background: #fbfcfc;
    opacity: 0.78;
}

.sourcing-check {
    display: flex !important;
    align-items: center;
    gap: 8px;
}

.sourcing-check input {
    width: auto;
    margin: 0;
}

.sourcing-hint {
    color: #8a9992;
    font-size: 0.78rem;
    font-weight: 400;
}

.sourcing-modal-box footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 6px;
}

.sourcing-form-error {
    color: #b3261e;
    font-size: 0.85rem;
    margin-top: 10px;
}

.sourcing-form-error.hidden {
    display: none;
}

.sourcing-fiche dl {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 8px 16px;
    margin: 0 0 14px;
}

.sourcing-fiche dt {
    color: #8a9992;
    font-size: 0.85rem;
}

.sourcing-fiche dd {
    margin: 0;
}

.sourcing-note {
    background: #fdf4e3;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 0.85rem;
    color: #8a6d1f;
}

.sourcing-choix {
    display: flex;
    gap: 10px;
    margin: 18px 0 6px;
}

@media (max-width: 720px) {
    .sourcing-header { flex-direction: column; }
    .sourcing-row { flex-direction: column; gap: 0; }
    .sourcing-table th:first-child,
    .sourcing-table td:first-child { display: none; }
}

/* Sélecteur d'entreprise : toujours présent, désactivé s'il n'y en a qu'une.
   Une recherche appartient à une entreprise — l'utilisateur doit voir laquelle. */
.sourcing-company {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px 0 4px;
}

.sourcing-company label {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #8a9992;
}

.sourcing-company select {
    padding: 6px 10px;
    border: 1px solid #cddcd4;
    border-radius: 8px;
    font: inherit;
    background: #fff;
    min-width: 260px;
}

.sourcing-company select:disabled {
    background: #f4f7f5;
    color: #3f5a4d;
    cursor: default;
}

/* Explication d'un résultat : pourquoi ce nombre, et ce qui est actionnable. */
.sourcing-explication {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sourcing-explication li {
    font-size: 0.85rem;
    padding: 6px 10px;
    border-radius: 8px;
    background: #f7f9f8;
    color: #5a6b62;
}

/* Une contrainte établie : le gisement existe, l'unité ne peut pas le traiter. */
.sourcing-blocage-bloquant {
    background: #fdf0ee;
    color: #8a3a2f;
}

/* Une fiche muette : c'est réparable, et ça débloque des gisements réels. */
.sourcing-blocage-a_renseigner {
    background: #fdf4e3;
    color: #8a6d1f;
}

.sourcing-blocage .sourcing-link {
    margin-left: 8px;
}

.sourcing-motifs {
    color: #7a8b82;
}

/* ------------------------------------------------- liste cliquable des recherches */

/* Chaque recherche est un bouton : on l'ouvre pour voir ses gisements. */
button.sourcing-search {
    display: block;
    width: 100%;
    text-align: left;
    font: inherit;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
}

button.sourcing-search:hover {
    border-color: #2e7d5b;
    box-shadow: 0 1px 6px rgba(46, 125, 91, 0.12);
}

.sourcing-search-main {
    flex: 1;
    min-width: 0;
}

.sourcing-search-meta {
    flex-direction: column;
    align-items: flex-end;
    gap: 0;
}

.sourcing-count-label {
    font-size: 0.75rem;
    color: #8a9992;
}

.sourcing-chevron {
    font-size: 1.5rem;
    color: #b7c6bf;
    line-height: 1;
    margin-top: 4px;
}

/* ------------------------------------------------- page d'une recherche */

.sourcing-back {
    background: none;
    border: none;
    color: #2e7d5b;
    cursor: pointer;
    padding: 0;
    margin-bottom: 16px;
    font-size: 0.9rem;
}

.sourcing-back:hover {
    text-decoration: underline;
}

.sourcing-header-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.sourcing-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px 14px;
    margin-bottom: 14px;
}

.sourcing-filtre {
    flex: 1;
    max-width: 380px;
    padding: 9px 12px;
    border: 1px solid #cddcd4;
    border-radius: 8px;
    font: inherit;
}

.sourcing-filtre:focus {
    outline: none;
    border-color: #2e7d5b;
}

/* ------------------------------------------------- formulaire en accordéons */

.sourcing-modal-large {
    width: min(760px, 100%);
}

.sourcing-nom {
    margin-bottom: 18px !important;
}

.sourcing-accordeon {
    border: 1px solid #e6ece9;
    border-radius: 10px;
    margin-bottom: 6px;
    overflow: hidden;
    transition: opacity 0.15s;
}

.sourcing-accordeon-tete {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "titre fleche" "sous fleche";
    gap: 2px 12px;
    width: 100%;
    text-align: left;
    background: #f7f9f8;
    border: none;
    padding: 14px 16px;
    cursor: pointer;
    font: inherit;
}

.sourcing-accordeon-tete:hover {
    background: #f1f6f3;
}

.sourcing-accordeon-titre {
    grid-area: titre;
    font-weight: 600;
    color: #2f4a3d;
}

.sourcing-accordeon-sous {
    grid-area: sous;
    font-size: 0.82rem;
    color: #8a9992;
}

.sourcing-accordeon-fleche {
    grid-area: fleche;
    align-self: center;
    color: #8a9992;
    transition: transform 0.15s;
}

.sourcing-accordeon-tete[aria-expanded="true"] .sourcing-accordeon-fleche {
    transform: rotate(180deg);
}

.sourcing-accordeon-corps {
    padding: 16px;
}

.sourcing-accordeon-corps.hidden {
    display: none;
}

/* Le bloc non retenu s'efface : on cherche par matière OU par profil, pas les deux. */
.sourcing-accordeon-inactif {
    opacity: 0.45;
    pointer-events: none;
}

.sourcing-ou {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 10px 0;
    color: #8a9992;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.sourcing-ou::before,
.sourcing-ou::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #e6ece9;
}

/* ------------------------------------------------- sélection des matières */

.sourcing-matieres {
    max-height: 260px;
    overflow-y: auto;
    border: 1px solid #e6ece9;
    border-radius: 8px;
    margin-top: 10px;
}

.sourcing-matiere-item {
    display: grid !important;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 7px 12px;
    margin: 0 !important;
    border-bottom: 1px solid #f2f5f3;
    cursor: pointer;
}

.sourcing-matiere-item:last-child {
    border-bottom: none;
}

.sourcing-matiere-item:hover {
    background: #f7f9f8;
}

.sourcing-matiere-item.hidden {
    display: none !important;
}

.sourcing-matiere-item input {
    width: auto !important;
    margin: 0 !important;
}

.sourcing-matiere-nom {
    color: #2f4a3d;
}

/* Le nombre de gisements guide le choix : une matière sans gisement ne sert à rien. */
.sourcing-matiere-nb {
    font-size: 0.78rem;
    color: #8a9992;
    background: #f2f7f4;
    border-radius: 999px;
    padding: 1px 8px;
}

.sourcing-toujours {
    margin-top: 16px !important;
}

/* ------------------------------------------------- fiche gisement */

.sourcing-fiche h3 {
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #8a9992;
    margin: 18px 0 8px;
}

.sourcing-fiche h3:first-of-type {
    margin-top: 0;
}

.sourcing-fiche-img {
    width: 100%;
    max-height: 180px;
    object-fit: cover;
    border-radius: 10px;
    margin-bottom: 16px;
}

.sourcing-contraintes {
    background: #f7f9f8;
    border-radius: 10px;
    padding: 12px 14px;
    margin: 0 0 8px;
}

.sourcing-contraintes dt {
    color: #5a6b62;
}

/* « 24 gisements » se lit d'un trait. Empilés, le nombre et son unité obligeaient l'œil
   à descendre pour savoir de quoi on parle. */
.sourcing-compte {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    white-space: nowrap;
}

/* Attente pendant la bascule : même encombrement que l'interrupteur (86 x 26), pour que
   la ligne ne se réorganise pas le temps de l'appel. */
.sourcing-toggle-attente {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 86px;
    height: 26px;
    flex-shrink: 0;
}

.sourcing-toggle-attente .sourcing-spinner {
    width: 18px;
    height: 18px;
}

/* Spinner dans un bouton : il précède le libellé, sur la même ligne. */
.sourcing-spinner-bouton {
    width: 13px;
    height: 13px;
    border-width: 2px;
    margin-right: 8px;
    vertical-align: -2px;
    display: inline-block;
}

/* Modale de confirmation : plus étroite qu'une fiche, parce qu'elle ne porte qu'une
   question. Une boîte large donnerait à une décision simple l'air d'un formulaire. */
.sourcing-modal-etroite {
    width: min(460px, 100%);
}

.sourcing-modal-etroite footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 18px;
}

/* Nom suggéré : le champ s'allume deux secondes. Assez pour qu'on voie d'où vient le
   texte, assez bref pour ne pas s'imposer — le nom reste modifiable, c'est une
   proposition, pas une décision. */
.sourcing-nom-suggere input,
input.sourcing-nom-suggere {
    border-color: #2f7d5b;
    box-shadow: 0 0 0 3px rgba(47, 125, 91, 0.15);
    transition: border-color 0.4s ease, box-shadow 0.4s ease;
}

@media (prefers-reduced-motion: reduce) {
    input.sourcing-nom-suggere { transition: none; }
}

/* Écran vide expliqué. Un « aucun résultat » nu se lit comme une panne ; les causes sont
   déjà calculées par le moteur, autant les montrer. */
.sourcing-vide {
    padding: 22px;
    background: #f9fbfa;
    border: 1px solid #e3eae6;
    border-radius: 10px;
}

.sourcing-vide-titre { margin: 0 0 12px; font-weight: 600; }

.sourcing-vide-motifs {
    margin: 6px 0 14px;
    padding-left: 20px;
    color: #4a5b53;
    font-size: 14px;
}

.sourcing-vide-action {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 10px 12px;
    border-radius: 7px;
    background: #fffbeb;
    color: #92400e;
    font-size: 13px;
}


/* ------------------------------------------------- premier pas : aucune recherche

   Un écran vide ne doit pas se contenter de constater le vide. Le bouton de l'en-tête
   existe déjà, mais il est petit, en haut à droite, et voisin de « Ma fiche » : ce n'est
   pas là qu'on va pour son tout premier geste. Ici il occupe le centre, juste après le
   bloc qui vient d'expliquer à quoi sert l'outil. */
.sourcing-demarrage {
    background: #fff;
    border: 1px solid #e3eae6;
    border-radius: 14px;
    padding: 40px 24px 44px;
    text-align: center;
}

.sourcing-demarrage i {
    font-size: 2rem;
    color: #9dc3b0;
}

.sourcing-demarrage h2 {
    margin: 14px 0 6px;
    font-size: 1.15rem;
    color: #2b3a33;
}

.sourcing-demarrage p {
    margin: 0 auto 22px;
    max-width: 46ch;
    color: #5a6b62;
}

.sourcing-btn-grand {
    font-size: 1rem;
    padding: 13px 26px;
    border-radius: 10px;
}

/* ------------------------------------------------- repère géographique du titre

   La ville n'est plus répétée sur chaque ligne du tableau : elle est dite une fois, ici,
   parce qu'elle ne change pas d'un gisement à l'autre. Plus petite et plus claire que le
   titre — c'est un complément, pas une seconde information de même rang. */
.sourcing-proximite {
    display: inline-block;
    margin-left: 10px;
    font-size: 0.85rem;
    font-weight: 400;
    color: #7a8b82;
    vertical-align: middle;
}

/* ------------------------------------------------- référence dans le titre d'une fiche */
.sourcing-fiche-ref {
    display: inline-block;
    margin-left: 8px;
    font-size: 0.8rem;
    font-weight: 400;
    color: #7a8b82;
    vertical-align: middle;
}

/* Seule la valeur est en monospace et sélectionnable d'un clic : c'est elle qu'on copie
   dans un message, pas la phrase qui l'introduit. */
.sourcing-ref-valeur {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-weight: 600;
    color: #475569;
    user-select: all;
}

/* ------------------------------------------------- fiche du débouché en deux colonnes

   À gauche ce que Greenr sait et que le débouché ne peut que lire ; à droite ce qu'il
   déclare et peut corriger. Empilés, les champs modifiables n'arrivaient qu'après un
   écran entier de lecture seule, et le travail à faire passait inaperçu. */
.sourcing-modal-fiche {
    width: min(1040px, 100%);
}

.sourcing-fiche-colonnes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 20px;
    align-items: start;
}

.sourcing-fiche-colonne {
    min-width: 0;
}

/* Une seule colonne dès que la largeur ne permet plus de lire deux blocs de front. Le
   seuil est haut (980 px) : ces fieldsets portent des textarea, ils s'étranglent bien
   avant un simple champ. */
@media (max-width: 980px) {
    .sourcing-fiche-colonnes { grid-template-columns: 1fr; }
}

/* Un champ seul ne prend pas toute la largeur d'une modale : un input de 700 px pour
   trois chiffres se lit comme une zone de texte. */
.sourcing-champ-seul {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-width: 320px;
}


/* ==================================================================================
   MOBILE — l'espace Recherche se consulte debout, dehors, d'une main.

   Nos débouchés sont des éleveurs, des méthaniseurs, des composteurs : ils ouvrent cet
   écran depuis un téléphone, souvent dans un champ, parfois avec des gants. Trois règles
   en découlent, et elles priment sur la densité :

     1. rien ne déborde horizontalement — une page qui glisse de côté se perd ;
     2. toute cible se touche sans viser (44 px, la taille d'un pouce) ;
     3. les champs font 16 px, sinon iOS zoome à la mise au point et l'écran saute.
   ================================================================================== */

@media (max-width: 760px) {
    /* Le mot de chaque capacité réapparaît dans la cellule : l'en-tête de colonne qui le
       portait vient de disparaître avec le passage en cartes, et un pictogramme seul
       n'est lisible que par qui connaît déjà la convention. */
    .sourcing-table .cu-compact-libelle { display: inline; }

    .sourcing-table td.cu-col {
        display: inline-flex;
        align-items: center;
        width: auto;
        margin: 4px 10px 0 0;
        padding: 0;
    }

    /* Les actions reviennent dans le flux : en position absolue, l'état du croisement
       (« En cours d'étude ») chevauchait le nom de la matière dès qu'il était long. */
    .sourcing-table td.sourcing-actions {
        position: static;
        width: 100%;
        text-align: left;
        margin-top: 6px;
    }
}

@media (max-width: 720px) {
    .sourcing-wrap { padding: 16px 14px 48px; }

    .sourcing-header { gap: 14px; }
    .sourcing-header h1 { font-size: 1.35rem; }

    /* Le titre d'une recherche et son repère géographique : sur une seule ligne, la
       ville poussait la référence hors de l'écran. */
    .sourcing-proximite {
        display: block;
        margin: 4px 0 0;
    }

    /* Le sélecteur d'entreprise prend la largeur : 260 px fixes débordaient sur un
       téléphone étroit, et c'est lui qui dit AU NOM DE QUI on cherche. */
    .sourcing-company {
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
    }

    .sourcing-company select {
        min-width: 0;
        width: 100%;
    }

    /* Les quatre vues en deux rangées de deux : au doigt, quatre onglets alignés sont
       trop étroits pour être visés. */
    .sourcing-bascule {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }

    .sourcing-bascule button {
        min-height: 44px;
        border-left: 1px solid #dbe5e0;
        border-top: 1px solid #dbe5e0;
    }

    .sourcing-bascule button:nth-child(odd) { border-left: none; }
    .sourcing-bascule button:nth-child(-n + 2) { border-top: none; }

    .sourcing-filtre {
        flex: 1 1 100%;
        max-width: none;
    }

    /* Cible atteignable au pouce. 44 px est la mesure d'Apple comme de Google — en
       dessous, on rate le bouton une fois sur trois avec des mains sales. */
    .sourcing-btn,
    .sourcing-back,
    .sourcing-more {
        min-height: 44px;
    }

    .sourcing-header-actions .sourcing-btn { flex: 1 1 auto; }

    /* Le chevron de fin de ligne n'apporte rien sur un écran où toute la carte se touche,
       et il vole la place du compteur. */
    .sourcing-search-head { flex-direction: column; gap: 10px; }
    .sourcing-search-meta {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        gap: 12px;
    }
    .sourcing-search-meta .sourcing-chevron { display: none; }
}

@media (max-width: 640px) {
    /* La modale occupe l'écran : 40 px de marge autour d'une boîte sur un téléphone,
       c'est un quart de la surface utile perdue, et le pied du formulaire devient
       inatteignable. */
    .sourcing-modal { padding: 10px 8px; align-items: flex-start; }

    .sourcing-modal-box {
        padding: 16px 16px 20px;
        border-radius: 12px;
        max-height: calc(100vh - 20px);
    }

    .sourcing-modal-box h2 { font-size: 1.05rem; }
    .sourcing-modal-box fieldset { padding: 12px 12px 10px; }

    /* 16 px : en dessous, Safari iOS zoome à la mise au point du champ et l'écran se
       décale — on perd de vue ce qu'on remplissait. */
    .sourcing-modal-box input,
    .sourcing-modal-box select,
    .sourcing-modal-box textarea,
    .sourcing-filtre,
    .sourcing-company select {
        font-size: 16px;
        min-height: 44px;
    }

    .sourcing-modal-box textarea { min-height: 66px; }

    /* Décider tient à un bouton : pleine largeur et empilés, dans l'ordre où on les lit —
       « Ce gisement m'intéresse » d'abord, « Pas d'intérêt » ensuite. Côte à côte sur un
       écran étroit, ils tombaient à 120 px chacun : on visait l'un et on touchait l'autre. */
    .sourcing-choix,
    .sourcing-modal-box footer {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .sourcing-choix .sourcing-btn,
    .sourcing-modal-box footer .sourcing-btn {
        width: 100%;
        min-height: 46px;
    }

    /* La fiche d'un gisement : l'image passe en bandeau au-dessus du texte plutôt qu'en
       vignette centrée, qui laissait deux colonnes de vide de chaque côté. */
    .sourcing-fiche-visuel { max-width: none; }
    .sourcing-fiche-visuel img { max-height: 160px; object-fit: cover; }

    .sourcing-fiche-ref { display: block; margin: 4px 0 0; }

    /* Les caractéristiques en deux colonnes serrées coupaient les valeurs en trois
       lignes. Le libellé au-dessus de sa valeur se lit mieux qu'à côté, à l'étroit. */
    .sourcing-contraintes { padding: 10px 12px; }

    .sourcing-demarrage { padding: 28px 16px 32px; }
    .sourcing-btn-grand { width: 100%; }

    /* Le tableau des matières du formulaire : plus haut sur un écran étroit, sinon on ne
       voit que trois lignes et on ne sait pas qu'il y en a deux cents. */
    .sourcing-matieres { max-height: 46vh; }
    .sourcing-matiere-item { min-height: 44px; }
}