/* Garde-robe — Pièces (htdocs/assets/garderobe/pieces.css), lot B. Racine : .ec-pieces (§ 8.2) ;
   la feuille de tri a la sienne : .pc-feuille-tri. Les composants g-* ne sont que placés et dimensionnés
   ici ; aucune couleur en dur (jetons seulement) ; deux classes de spécificité au plus (:where au-delà). */

.ec-pieces { position: relative; padding-bottom: 24px; }

/* ---------------- En-tête (mobile) ---------------- */
.ec-pieces .pc-titre-bureau, .ec-pieces .pc-titre-nb, .ec-pieces .pc-outils { display: none; }
.ec-pieces .pc-titre { margin: 8px 0 0; }
.ec-pieces .pc-haut { margin-top: 16px; }

/* Recherche : pilule de 52 dépliée sous l'en-tête ; « Effacer » (ou « Fermer ») dans la pilule. */
.ec-pieces .pc-recherche { position: relative; margin: 0 var(--gr-marge) 16px; }
.ec-pieces .pc-effacer { position: absolute; right: 4px; top: 4px; color: var(--gr-texte-2); }
.ec-pieces [data-recherche]::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
.ec-pieces [data-recherche]::-webkit-search-decoration { -webkit-appearance: none; }

/* Carte Aujourd'hui, jours à rattraper, À surveiller. */
.ec-pieces .pc-jour { margin: 0 var(--gr-marge); }
.ec-pieces .pc-carte-a-noter { cursor: pointer; }
.ec-pieces .g-lien-trous { margin-top: 4px; }
/* « 12 pièces à compléter » (vers #completer) : la mesure du lien des jours à rattraper, en encre secondaire (la rouille
   ne dit que les trous et la mort). */
.ec-pieces .pc-completer { margin: 0 var(--gr-marge); }
.ec-pieces .pc-jour:not(:has(.g-lien-trous)) + .pc-completer { margin-top: 4px; }
.ec-pieces .pc-completer-lien {
    display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--gr-texte-2);
    font: 600 13px/16px var(--gr-sans); text-decoration: none; border-radius: var(--r-ctrl);
}
.ec-pieces .pc-completer-lien > :where(.g-ic) { flex: none; }
.ec-pieces .pc-surveiller { margin: 4px var(--gr-marge) 0; }
.ec-pieces .pc-surveiller-lien {
    display: flex; align-items: flex-start; gap: 8px; min-height: 44px; padding: 6px 0;
    color: var(--gr-texte); text-decoration: none; border-radius: var(--r-ctrl);
}
.ec-pieces .pc-surveiller-lien > :where(.t-chapo) { flex: 1; min-width: 0; }
/* Un nom très long sans espace (60 caractères, une recherche collée, une catégorie) se coupe où il faut :
   jamais de défilement horizontal de la page. */
.ec-pieces :where(.pc-section-titre, .pc-surveiller-lien, .pc-aucune) { overflow-wrap: anywhere; }
.ec-pieces .pc-surveiller-lien > :where(.g-ic) { margin-top: 6px; color: var(--gr-texte-3); }

/* Puces de catégorie : elles défilent pleine largeur (fondu à droite), le tri au bout. */
.ec-pieces .pc-filtres { display: flex; align-items: center; gap: 2px; margin-top: 16px; padding-right: calc(var(--gr-marge-d) - 10px); }
.ec-pieces .pc-puces { flex: 1 1 auto; min-width: 0; padding: 4px 16px 4px var(--gr-marge); }
.ec-pieces .pc-trier { flex: none; }

/* ---------------- Liste ---------------- */
.ec-pieces .pc-liste { margin-top: 4px; }
.ec-pieces .pc-section-titre { display: flex; align-items: baseline; gap: 8px; margin: 28px var(--gr-marge) 12px; font: inherit; }
.ec-pieces .pc-section-nb { font: 500 15px/20px var(--gr-sans); color: var(--gr-texte-3); font-variant-numeric: tabular-nums; }
.ec-pieces .pc-grille {
    list-style: none; margin: 0 var(--gr-marge); padding: 0;
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 12px;
}
.ec-pieces [data-col="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 8px; }
.ec-pieces .pc-grille > li { min-width: 0; }
.ec-pieces [data-col="3"] :where(.g-tuile-nom) { font-size: 13px; line-height: 18px; }
.ec-pieces [data-col="3"] :where(.g-vg-camera) { right: 4px; bottom: 4px; }
.ec-pieces [data-col="3"] :where(.g-tuile-marque) { left: 4px; top: 4px; max-width: calc(100% - 8px); padding: 0 6px; font-size: 10px; }
/* Appui long : ni loupe, ni aperçu du lien, ni sélection du texte. */
.ec-pieces .g-tuile { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; touch-action: manipulation; }
/* La pièce ouverte dans le panneau (bureau) : l'anneau encre de la sélection, détaché de 2 px. */
.ec-pieces :where(.g-tuile[aria-current="true"]) > .g-vg { box-shadow: 0 0 0 2px var(--gr-fond), 0 0 0 4px var(--gr-texte); }

/* Au rebut : replié en fin de page. */
.ec-pieces .pc-rebut { margin-top: 36px; }
.ec-pieces .pc-rebut-resume {
    display: flex; align-items: center; gap: 8px; min-height: 44px; margin: 0 var(--gr-marge) 8px;
    list-style: none; cursor: pointer; border-radius: var(--r-ctrl);
}
.ec-pieces .pc-rebut-resume::-webkit-details-marker { display: none; }
.ec-pieces .pc-rebut-resume > :where(.t-titre) { color: var(--gr-texte-2); }
.ec-pieces .pc-rebut-chevron { color: var(--gr-texte-3); transition: transform var(--d-court) var(--c-standard); }
.ec-pieces :where(.pc-rebut[open]) .pc-rebut-chevron { transform: rotate(180deg); }

/* États : squelettes, résultats, rien ici, erreur. */
.ec-pieces .pc-squelettes { margin-top: 28px; }
.ec-pieces .pc-resultats { margin: 16px var(--gr-marge) 12px; color: var(--gr-texte-2); }
.ec-pieces .pc-aucune { margin: 32px var(--gr-marge); display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.ec-pieces .pc-aucune > :where(.t-chapo) { color: var(--gr-texte-2); }
.ec-pieces .pc-filtre-vide { margin: 32px var(--gr-marge); color: var(--gr-texte-2); }
.ec-pieces .pc-erreur { margin: 40px var(--gr-marge); display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.ec-pieces .pc-erreur-texte { display: flex; gap: 8px; align-items: flex-start; color: var(--gr-danger); font: 500 15px/21px var(--gr-sans); }
.ec-pieces .pc-erreur-texte > :where(.g-ic) { margin-top: 1px; }
.ec-pieces .pc-importer { margin-top: 0; color: var(--gr-texte-2); }

/* ---------------- Feuille de tri ---------------- */
.pc-feuille-tri .pc-tri-liste { margin: 0 var(--gr-marge); }
.pc-feuille-tri .pc-tri-coche { flex: none; margin-left: auto; }
.pc-feuille-tri [aria-checked="true"] { font-weight: 600; }
.pc-feuille-tri .pc-tri-titre { margin: 24px var(--gr-marge) 8px; color: var(--gr-texte-2); }
.pc-feuille-tri .pc-tri-colonnes { margin: 0 var(--gr-marge) 8px; }

/* ---------------- Vue Tableau (bureau) ---------------- */
.ec-pieces .pc-tableau-zone { container-type: inline-size; margin: 16px var(--gr-marge) 0; }
.ec-pieces .pc-defile { overflow-x: auto; border-radius: var(--r-ctrl); }
.ec-pieces .pc-tableau { width: 100%; border-collapse: collapse; font: 500 15px/20px var(--gr-sans); font-variant-numeric: tabular-nums; }
.ec-pieces .pc-tableau th {
    height: 40px; padding: 0 8px; text-align: left; white-space: nowrap; vertical-align: middle;
    font: 600 12px/16px var(--gr-sans); color: var(--gr-texte-2); border-bottom: 1px solid var(--gr-ligne-forte);
}
.ec-pieces .pc-tableau td { height: 44px; padding: 4px 8px; border-bottom: 1px solid var(--gr-ligne); white-space: nowrap; vertical-align: middle; }
.ec-pieces th.nombre, .ec-pieces td.nombre { text-align: right; }
.ec-pieces .pc-tri-col {
    display: inline-flex; align-items: center; gap: 2px; min-height: 40px; padding: 0; border: 0; background: none;
    font: inherit; color: inherit; cursor: pointer; border-radius: var(--r-tirage);
}
.ec-pieces th[aria-sort] { color: var(--gr-texte); }
.ec-pieces tbody > tr { cursor: pointer; }
.ec-pieces tbody > tr:hover { background: var(--gr-survol); }
.ec-pieces tr[aria-current="true"] { background: var(--gr-presse); box-shadow: inset 2px 0 0 var(--gr-texte); }
.ec-pieces .pc-c-vg { width: 48px; --vg: 32px; }
.ec-pieces .pc-nom { font: 600 15px/20px var(--gr-sans); color: var(--gr-texte); text-decoration: none; border-radius: var(--r-tirage); }
@media (hover: hover) { .ec-pieces .pc-nom:where(:hover) { text-decoration: underline; text-underline-offset: 3px; } }
.ec-pieces .pc-alias { display: block; max-width: 220px; overflow: hidden; text-overflow: ellipsis; font: 500 13px/16px var(--gr-sans); color: var(--gr-texte-3); }
/* « · 7 paires » : le nombre d'exemplaires d'une référence, à la suite du nom. */
.ec-pieces .pc-nombre { font: 500 13px/16px var(--gr-sans); color: var(--gr-texte-3); }
.ec-pieces .pc-c-categorie, .ec-pieces .pc-c-dernier { color: var(--gr-texte-2); }
.ec-pieces .pc-c-etat { color: var(--gr-texte-2); }
.ec-pieces .pc-c-etat > :where(.g-ic) { margin-right: 4px; vertical-align: -3px; }
.ec-pieces .pc-c-vie { width: 112px; }
.ec-pieces .pc-tiret { color: var(--gr-texte-3); }
.ec-pieces .pc-rebut-ligne { color: var(--gr-texte-2); }
/* Colonne étroite (le panneau de détail prend 440 px) : on garde nom, ports, dernier port, vie. */
@container (max-width: 760px) {
    .ec-pieces .pc-c-categorie, .ec-pieces .pc-c-etat { display: none; }
}
@container (max-width: 620px) {
    .ec-pieces .pc-c-rythme, .ec-pieces .pc-c-cout { display: none; }
}

/* ---------------- Bureau (1024 et plus) : barre d'outils, grille fluide ---------------- */
@media (min-width: 1024px) {
    .ec-pieces { padding-top: 24px; container-type: inline-size; }
    .ec-pieces .pc-compacte, .ec-pieces .pc-entete-ligne, .ec-pieces .pc-titre-mobile { display: none; }
    .ec-pieces .pc-titre-ligne { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; min-height: 56px; }
    .ec-pieces .pc-titre { display: flex; align-items: baseline; gap: 10px; margin: 0; font-size: 34px; line-height: 40px; }
    .ec-pieces .pc-titre-bureau { display: inline; }
    .ec-pieces .pc-titre-nb { display: inline; font: 500 15px/20px var(--gr-sans); color: var(--gr-texte-3); font-variant-numeric: tabular-nums; }
    .ec-pieces .pc-outils { display: flex; align-items: center; gap: 8px; }
    .ec-pieces .pc-haut { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin: 16px var(--gr-marge) 0; }
    .ec-pieces .pc-recherche { flex: none; width: 280px; margin: 0; }
    .ec-pieces .pc-jour, .ec-pieces .pc-surveiller, .ec-pieces .pc-trier { display: none; }
    .ec-pieces .pc-filtres { flex: 1 1 260px; min-width: 0; margin: 0; padding: 0; }
    /* Au pointeur fin, les puces passent à la ligne : toutes atteignables, sans défilement caché. */
    .ec-pieces .pc-puces { flex-wrap: wrap; overflow: visible; padding: 0; -webkit-mask: none; mask: none; }
    .ec-pieces .pc-section-titre { margin: 32px var(--gr-marge) 16px; }
    .ec-pieces .pc-grille { grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 32px 24px; }
    .ec-pieces .pc-liste { margin-top: 8px; }
}
@container (max-width: 600px) {
    /* Colonne principale étroite (bureau à 1280 : 608 px) : le segmenté garde ses icônes, ses libellés restent lus. */
    .ec-pieces :where(.pc-outils [role="radio"] > span) {
        position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
    }
    .ec-pieces :where(.pc-outils [role="radio"]) { padding: 0 10px; }
}