/* ============================================================================
   Demande de pièces — /demandes-pieces (2026-10-23)
   Page partagée technicien / chef de centre : formulaire de demande, liste « à traiter »
   en cartes (copie des références en un clic), onglet des traitées. Mobile d'abord
   (Samsung A15, ~393 px) : une colonne, boutons tactiles de 44 px, animations
   transform/opacité seulement. Jetons : wwwroot/css/tokens.css.
   ============================================================================ */

.pcs-root {
    max-width: 880px;
    margin: 0 auto;
    padding: var(--df-esp-4, 16px) var(--df-esp-4, 16px) var(--df-esp-10, 48px);
    font-family: var(--df-police, Inter, system-ui, sans-serif);
    color: var(--df-texte, #111827);
}

/* ---- En-tête ---- */
.pcs-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--df-esp-4, 16px);
    margin-bottom: var(--df-esp-4, 16px);
}
.pcs-header__texte { min-width: 0; }
.pcs-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--df-taille-12, 12px);
    font-weight: var(--df-graisse-forte, 600);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--df-texte-second, #6b7280);
}
.pcs-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--df-rouge, #BF1E2E);
}
.pcs-title {
    margin: 4px 0 2px;
    font-size: 22px;
    font-weight: var(--df-graisse-forte, 600);
    line-height: 1.2;
}
.pcs-sub {
    margin: 0;
    font-size: var(--df-taille-14, 14px);
    color: var(--df-texte-second, #6b7280);
    max-width: 60ch;
}
.pcs-header__action { flex-shrink: 0; }

/* ---- Boutons ---- */
.pcs-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: var(--df-hauteur-tactile, 44px);
    padding: 0 16px;
    border-radius: 999px;
    border: 1.5px solid var(--df-bordure-forte, #d1d5db);
    background: var(--df-surface, #fff);
    color: var(--df-texte, #111827);
    font: inherit;
    font-size: var(--df-taille-14, 14px);
    font-weight: var(--df-graisse-forte, 600);
    cursor: pointer;
    transition: transform .12s ease, background-color .12s ease, opacity .12s ease;
    white-space: nowrap;
}
.pcs-btn:hover { background: var(--df-surface-survol, #f3f4f6); }
.pcs-btn:active { transform: scale(.98); }
.pcs-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.pcs-btn--primaire {
    background: var(--df-primaire, #1F2937);
    border-color: var(--df-primaire, #1F2937);
    color: var(--df-primaire-texte, #fff);
}
.pcs-btn--primaire:hover { background: var(--df-primaire-survol, #111827); }
.pcs-btn--danger {
    background: var(--df-rouge, #BF1E2E);
    border-color: var(--df-rouge, #BF1E2E);
    color: #fff;
}
.pcs-btn--danger:hover { background: var(--df-rouge-fonce, #9a1826); }
.pcs-lien {
    background: none;
    border: 0;
    padding: 6px 4px;
    min-height: 32px;
    color: var(--df-primaire, #1F2937);
    font: inherit;
    font-size: var(--df-taille-13, 13px);
    font-weight: var(--df-graisse-forte, 600);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}
.pcs-icone {
    width: 36px; height: 36px;
    border-radius: 50%;
    border: 0;
    background: transparent;
    color: var(--df-texte-second, #6b7280);
    cursor: pointer;
    flex-shrink: 0;
}
.pcs-icone:hover { background: var(--df-erreur-pale, #fee2e2); color: var(--df-erreur, #b91c1c); }

/* ---- Bandeau hors ligne et messages ---- */
.pcs-bandeau {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px;
    margin-bottom: var(--df-esp-4, 16px);
    border-radius: var(--df-rayon, 10px);
    background: var(--df-alerte-pale, #fef3c7);
    color: #92400e;
    font-size: var(--df-taille-13, 13px);
}
.pcs-msg {
    display: flex; align-items: flex-start; gap: 8px;
    margin: 0 0 var(--df-esp-3, 12px);
    padding: 10px 14px;
    border-radius: var(--df-rayon, 10px);
    font-size: var(--df-taille-14, 14px);
}
.pcs-msg--ok { background: var(--df-succes-pale, #dcfce7); color: #166534; }
.pcs-msg--erreur { background: var(--df-erreur-pale, #fee2e2); color: var(--df-erreur, #b91c1c); }

/* ---- Formulaire ---- */
.pcs-form {
    background: var(--df-surface, #fff);
    border: 1px solid var(--df-bordure, #e5e7eb);
    border-radius: var(--df-rayon-panneau, 16px);
    padding: var(--df-esp-4, 16px);
    margin-bottom: var(--df-esp-5, 20px);
    box-shadow: 0 10px 30px -18px rgba(17, 24, 39, .35);
    animation: pcs-entree .22s ease both;
}
.pcs-form__titre {
    display: flex; align-items: center; gap: 8px;
    margin: 0 0 var(--df-esp-4, 16px);
    font-size: var(--df-taille-16, 16px);
    font-weight: var(--df-graisse-forte, 600);
}
.pcs-champ { margin-bottom: var(--df-esp-4, 16px); }
.pcs-label {
    display: block;
    margin-bottom: 6px;
    font-size: var(--df-taille-13, 13px);
    font-weight: var(--df-graisse-forte, 600);
    color: var(--df-texte-second, #6b7280);
    text-transform: uppercase;
    letter-spacing: .04em;
}
.pcs-hint {
    margin: 6px 0 0;
    font-size: var(--df-taille-12, 12px);
    color: var(--df-texte-second, #6b7280);
}
.pcs-vide-lignes {
    margin: 10px 0 0;
    padding: 12px;
    border: 1.5px dashed var(--df-bordure-forte, #d1d5db);
    border-radius: var(--df-rayon, 10px);
    text-align: center;
    font-size: var(--df-taille-13, 13px);
    color: var(--df-texte-inactif, #9ca3af);
}
.pcs-input {
    width: 100%;
    min-height: var(--df-hauteur-tactile, 44px);
    padding: 8px 12px;
    border: 1.5px solid var(--df-bordure-forte, #d1d5db);
    border-radius: var(--df-rayon, 10px);
    background: #fff;
    font: inherit;
    font-size: 16px; /* iOS : pas de zoom au toucher */
    color: var(--df-texte, #111827);
}
.pcs-input:focus { outline: none; border-color: var(--df-focus, #2563eb); box-shadow: 0 0 0 3px rgba(37, 99, 235, .15); }
.pcs-textarea { resize: vertical; min-height: 60px; }

/* Destination : deux gros boutons, un seul actif */
.pcs-seg {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.pcs-seg__btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 52px;
    border-radius: var(--df-rayon, 10px);
    border: 1.5px solid var(--df-bordure-forte, #d1d5db);
    background: var(--df-surface, #fff);
    color: var(--df-texte, #111827);
    font: inherit;
    font-size: var(--df-taille-14, 14px);
    font-weight: var(--df-graisse-forte, 600);
    cursor: pointer;
    transition: background-color .12s ease, border-color .12s ease, transform .12s ease;
}
.pcs-seg__btn .bi { font-size: 18px; }
.pcs-seg__btn:active { transform: scale(.98); }
.pcs-seg__btn--actif {
    background: var(--df-primaire, #1F2937);
    border-color: var(--df-primaire, #1F2937);
    color: var(--df-primaire-texte, #fff);
}

/* Client choisi */
.pcs-client {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px;
    padding: 10px 12px;
    border-radius: var(--df-rayon, 10px);
    background: var(--df-info-pale, #dbeafe);
    color: #1e3a8a;
    font-size: var(--df-taille-14, 14px);
}
.pcs-client__nom { font-weight: var(--df-graisse-forte, 600); }
.pcs-client__code, .pcs-client__ville { font-size: var(--df-taille-12, 12px); opacity: .85; }
.pcs-client .pcs-lien { margin-left: auto; color: inherit; }

/* Ajout d'un article : recherche + quantité */
.pcs-ajout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 92px;
    gap: 8px;
    align-items: start;
}
.pcs-ajout__qte {
    display: flex; flex-direction: column; gap: 2px;
    font-size: var(--df-taille-12, 12px);
    font-weight: var(--df-graisse-forte, 600);
    color: var(--df-texte-second, #6b7280);
}
.pcs-ajout__qte .pcs-input { text-align: center; }

.pcs-form__actions {
    display: flex; justify-content: flex-end; gap: 10px;
    margin-top: var(--df-esp-2, 8px);
}

/* ---- Lignes d'articles (formulaire et cartes) ---- */
.pcs-lignes {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    border: 1px solid var(--df-bordure, #e5e7eb);
    border-radius: var(--df-rayon, 10px);
    overflow: hidden;
}
.pcs-ligne {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px;
    border-top: 1px solid var(--df-bordure, #e5e7eb);
    background: var(--df-surface, #fff);
}
.pcs-ligne:first-child { border-top: 0; }
.pcs-ligne__texte { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pcs-ref {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--df-texte, #111827);
    word-break: break-all;
}
.pcs-des {
    font-size: var(--df-taille-13, 13px);
    color: var(--df-texte-second, #6b7280);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pcs-ligne__qte { width: 72px; flex-shrink: 0; text-align: center; min-height: 40px; }
.pcs-qte {
    flex-shrink: 0;
    min-width: 44px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--df-fond-app, #f3f4f6);
    font-size: var(--df-taille-14, 14px);
    font-weight: var(--df-graisse-forte, 600);
    text-align: center;
}

/* Copier une référence (chef de centre) */
.pcs-copier {
    display: inline-flex; align-items: center; gap: 6px;
    flex-shrink: 0;
    min-height: 40px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1.5px solid var(--df-bordure-forte, #d1d5db);
    background: var(--df-surface, #fff);
    color: var(--df-primaire, #1F2937);
    font: inherit;
    font-size: var(--df-taille-13, 13px);
    font-weight: var(--df-graisse-forte, 600);
    cursor: pointer;
    transition: background-color .12s ease, color .12s ease, border-color .12s ease, transform .12s ease;
}
.pcs-copier:hover { background: var(--df-surface-survol, #f3f4f6); }
.pcs-copier:active { transform: scale(.96); }
.pcs-copier--fait {
    background: var(--df-succes, #16a34a);
    border-color: var(--df-succes, #16a34a);
    color: #fff;
}

/* ---- Onglets ---- */
.pcs-onglets {
    display: flex; gap: 6px;
    margin-bottom: var(--df-esp-3, 12px);
    padding: 4px;
    border-radius: 999px;
    background: var(--df-fond-app, #f3f4f6);
    width: fit-content;
    max-width: 100%;
}
.pcs-onglet {
    display: inline-flex; align-items: center; gap: 6px;
    min-height: 40px;
    padding: 0 14px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--df-texte-second, #6b7280);
    font: inherit;
    font-size: var(--df-taille-14, 14px);
    font-weight: var(--df-graisse-forte, 600);
    cursor: pointer;
    transition: background-color .12s ease, color .12s ease;
}
.pcs-onglet--actif {
    background: var(--df-surface, #fff);
    color: var(--df-texte, #111827);
    box-shadow: 0 1px 3px rgba(17, 24, 39, .12);
}
.pcs-compte {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 22px; height: 22px; padding: 0 7px;
    border-radius: 999px;
    background: var(--df-rouge, #BF1E2E);
    color: #fff;
    font-size: var(--df-taille-12, 12px);
}

/* ---- États ---- */
.pcs-etat {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    padding: 28px 16px;
    border-radius: var(--df-rayon-panneau, 16px);
    border: 1.5px dashed var(--df-bordure-forte, #d1d5db);
    color: var(--df-texte-second, #6b7280);
    font-size: var(--df-taille-14, 14px);
    text-align: center;
    flex-wrap: wrap;
}
.pcs-etat--erreur { border-style: solid; border-color: var(--df-erreur, #b91c1c); color: var(--df-erreur, #b91c1c); }
.pcs-etat--vide .bi { font-size: 28px; color: var(--df-succes, #16a34a); }
.pcs-spinner {
    width: 16px; height: 16px;
    border: 2px solid rgba(255, 255, 255, .45);
    border-top-color: #fff;
    border-radius: 50%;
    animation: pcs-tour .8s linear infinite;
    flex-shrink: 0;
}
.pcs-spinner--sombre { border-color: var(--df-bordure-forte, #d1d5db); border-top-color: var(--df-primaire, #1F2937); }

/* ---- Cartes de demande ---- */
.pcs-liste { display: flex; flex-direction: column; gap: var(--df-esp-3, 12px); }
.pcs-carte {
    background: var(--df-surface, #fff);
    border: 1px solid var(--df-bordure, #e5e7eb);
    border-radius: var(--df-rayon-panneau, 16px);
    padding: 14px;
    box-shadow: 0 1px 2px rgba(17, 24, 39, .05);
    animation: pcs-entree .22s ease both;
}
.pcs-carte--traitee { opacity: .9; background: #fafafa; }
.pcs-carte--focus {
    border-color: var(--df-rouge, #BF1E2E);
    box-shadow: 0 0 0 3px rgba(191, 30, 46, .15);
}
.pcs-carte__tete {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    margin-bottom: 10px;
}
.pcs-carte__qui { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pcs-avatar {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 50%;
    background: var(--df-primaire, #1F2937);
    color: #fff;
    font-size: var(--df-taille-13, 13px);
    font-weight: 700;
    flex-shrink: 0;
}
.pcs-carte__nom { font-weight: var(--df-graisse-forte, 600); font-size: var(--df-taille-14, 14px); }
.pcs-carte__date { font-size: var(--df-taille-12, 12px); color: var(--df-texte-second, #6b7280); }
.pcs-badge {
    display: inline-flex; align-items: center; gap: 6px;
    max-width: 55%;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: var(--df-taille-12, 12px);
    font-weight: var(--df-graisse-forte, 600);
    white-space: nowrap;
    overflow: hidden;
}
.pcs-badge__nom { overflow: hidden; text-overflow: ellipsis; }
.pcs-badge small { opacity: .75; }
.pcs-badge--camion { background: var(--df-alerte-pale, #fef3c7); color: #92400e; }
.pcs-badge--client { background: var(--df-info-pale, #dbeafe); color: #1e3a8a; }
.pcs-carte__com {
    display: flex; gap: 8px; align-items: flex-start;
    margin: 0 0 8px;
    padding: 8px 10px;
    border-radius: var(--df-rayon, 10px);
    background: var(--df-fond-app, #f3f4f6);
    font-size: var(--df-taille-13, 13px);
    color: var(--df-texte, #111827);
    white-space: pre-line;
}
.pcs-carte__pied {
    display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px;
    margin-top: 12px;
}
.pcs-carte__pied .pcs-attente, .pcs-carte__pied .pcs-traitee {
    margin-right: auto;
    display: inline-flex; align-items: center; gap: 6px;
    font-size: var(--df-taille-13, 13px);
}
.pcs-attente { color: var(--df-texte-second, #6b7280); }
.pcs-traitee { color: #166534; font-weight: var(--df-graisse-forte, 600); }

/* ---- Animations (transform / opacité seulement : A15) ---- */
@keyframes pcs-entree {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}
@keyframes pcs-tour { to { transform: rotate(360deg); } }

/* ---- Téléphone ---- */
@media (max-width: 600px) {
    .pcs-root { padding-left: 12px; padding-right: 12px; }
    .pcs-header { flex-direction: column; align-items: stretch; }
    .pcs-header__action { width: 100%; }
    .pcs-form__actions { flex-direction: column-reverse; }
    .pcs-form__actions .pcs-btn { width: 100%; }
    .pcs-carte__pied .pcs-btn { flex: 1 1 100%; }
    .pcs-carte__pied .pcs-attente, .pcs-carte__pied .pcs-traitee { flex: 1 1 100%; margin-right: 0; }
    .pcs-badge { max-width: 48%; }
    .pcs-copier span { display: none; }
    .pcs-copier { width: 40px; padding: 0; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
    .pcs-form, .pcs-carte { animation: none; }
}

/* ---- 2026-10-23 (suite) : scan QR, demande gardée sur le téléphone, pièces prêtes ---- */
.pcs-btn--scan {
    width: 100%;
    margin-bottom: 8px;
    border-style: dashed;
    background: var(--df-fond-app, #f3f4f6);
}
.pcs-btn--scan .bi { font-size: 18px; }
.pcs-carte--locale {
    border-style: dashed;
    border-color: #f59e0b;
    background: #fffbeb;
}
.pcs-carte--refusee { border-color: var(--df-erreur, #b91c1c); background: var(--df-erreur-pale, #fee2e2); }
.pcs-avatar--local { background: #f59e0b; }
.pcs-attente--erreur { color: var(--df-erreur, #b91c1c); font-weight: var(--df-graisse-forte, 600); }
.pcs-modifiee { margin-left: 4px; color: var(--df-alerte, #d97706); }
.pcs-compte--neutre { background: var(--df-texte-second, #6b7280); }

/* Trois onglets sur 393 px : « En attente » se coupait sur deux lignes. Libellés sur une ligne,
   rangée défilable si elle ne tient pas. */
.pcs-onglet { white-space: nowrap; }
@media (max-width: 600px) {
    .pcs-onglets { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .pcs-onglets::-webkit-scrollbar { display: none; }
    .pcs-onglet { padding: 0 10px; font-size: var(--df-taille-13, 13px); }
}