/* Garde-robe — À compléter (htdocs/assets/garderobe/completer.css), 19/10/2026. Racine : .ec-completer (route #completer).
   Téléphone d'abord : « ‹ Pièces », l'affiche et son nombre, le résumé « 12 sans photo · 3 sans prix », la case des
   éléments secondaires, puis une carte par catégorie (surface, rangées séparées par un filet) : vignette de 56, nom,
   « À recevoir », pastilles des éléments essentiels qui manquent, ligne discrète des secondaires, et sous le texte les
   actions « Compléter » et « Normaliser » (boutons texte) ; dès 560 px de colonne, les actions à droite. Chaque manque
   est un bouton (pastille marquée « + », ou mot souligné pour un secondaire), posé au-dessus du lien de la pièce,
   lui-même étendu à toute la rangée (::after) : toucher ailleurs ouvre la fiche, comme avant. Bureau (1024 et
   plus) : sans « ‹ Pièces » ni barre compacte (la colonne latérale y mène), l'affiche à 34, la pièce ouverte dans le
   panneau marquée (fond pressé, filet encre à gauche). Les composants g-* ne sont que placés et dimensionnés ici ;
   aucune couleur en dur (jetons seulement). */

.ec-completer { position: relative; padding-bottom: 24px; container-type: inline-size; }
.ec-completer :where(.cp-titre, .cp-resume, .cp-section-titre, .cp-nom, .cp-secondaires, .cp-erreur-texte) { overflow-wrap: anywhere; }

/* ---------------- En-tête ---------------- */
.ec-completer .cp-entete-ligne { margin-left: -10px; }
.ec-completer .cp-titre { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin: 8px 0 0; }
.ec-completer .cp-titre-nb { font: 500 17px/22px var(--gr-sans); color: var(--gr-texte-2); font-variant-numeric: tabular-nums; }
.ec-completer .cp-resume { margin: 10px 0 0; font: 500 15px/21px var(--gr-sans); color: var(--gr-texte-2); font-variant-numeric: tabular-nums; }
.ec-completer .cp-resume-item { white-space: nowrap; }
.ec-completer .cp-reglage { margin: 12px var(--gr-marge) 0; }
.ec-completer .cp-case { padding-bottom: 4px; }

/* ---------------- Sections : une carte par catégorie ---------------- */
.ec-completer .cp-section-titre { display: flex; align-items: baseline; gap: 8px; margin: 28px var(--gr-marge) 12px; font: inherit; }
.ec-completer .cp-section-nb { font: 500 15px/20px var(--gr-sans); color: var(--gr-texte-3); font-variant-numeric: tabular-nums; }
.ec-completer .cp-pieces { list-style: none; margin: 0 var(--gr-marge); padding: 0; background: var(--gr-surface); border-radius: var(--r-ctrl); }
.ec-completer .cp-piece { position: relative; padding: 12px 12px 12px 16px; }
.ec-completer .cp-piece:first-child { border-radius: var(--r-ctrl) var(--r-ctrl) 0 0; }
.ec-completer .cp-piece:last-child { border-radius: 0 0 var(--r-ctrl) var(--r-ctrl); }
.ec-completer .cp-piece:only-child { border-radius: var(--r-ctrl); }
.ec-completer .cp-piece + .cp-piece::before { content: ''; position: absolute; top: 0; left: 84px; right: 0; border-top: 1px solid var(--gr-ligne); }

/* La rangée : vignette (56), texte (le nom, LE lien de la pièce, puis ses manques), chevron ; ses actions dessous,
   alignées sur le texte. Le lien couvre toute la rangée par son ::after (la rangée est son bloc conteneur) ; les
   boutons (manques, actions) passent au-dessus. */
.ec-completer .cp-piece { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; column-gap: 12px; align-items: start; }
.ec-completer .cp-vg { grid-column: 1; grid-row: 1; display: block; }
.ec-completer .cp-vg > .g-vg { --vg: 56px; }
.ec-completer .cp-texte { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; padding-top: 2px; }
.ec-completer .cp-lien {
    display: flex; flex-direction: column; align-items: flex-start; gap: 6px; max-width: 100%;
    color: var(--gr-texte); text-decoration: none; -webkit-tap-highlight-color: transparent;
}
.ec-completer .cp-lien::after { content: ''; position: absolute; inset: 0; }
.ec-completer .cp-lien:focus-visible { outline: none; }
.ec-completer .cp-lien:focus-visible::after { outline: 2px solid var(--gr-focus); outline-offset: -2px; border-radius: var(--r-ctrl); }
.ec-completer .cp-nom { font: 600 16px/21px var(--gr-sans); }
.ec-completer .cp-etat { display: inline-flex; align-items: center; gap: 4px; font: 500 13px/18px var(--gr-sans); color: var(--gr-texte-2); }
.ec-completer .cp-manques { display: flex; flex-wrap: wrap; gap: 8px 6px; }
/* Un élément essentiel qui manque : une pastille encre sur la piste (pas de rouille : elle dit les trous et la mort),
   un « + » devant : la toucher le remplit. 24 de haut, 32 de cible (::before), sans empiéter sur la rangée voisine. */
.ec-completer .cp-manque {
    position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 3px; height: 24px; padding: 0 10px 0 7px;
    border: 0; border-radius: 12px; background: var(--gr-surface-2); box-shadow: inset 0 0 0 1px var(--gr-ligne-forte);
    font: 600 13px/1 var(--gr-sans); color: var(--gr-texte); white-space: nowrap; cursor: pointer;
    -webkit-tap-highlight-color: transparent; transition: background-color var(--d-court);
}
.ec-completer .cp-manque::before { content: ''; position: absolute; inset: -4px -3px; }
.ec-completer .cp-manque > .cp-manque-ic { width: 13px; height: 13px; flex: none; }
.ec-completer .cp-manque:active { background-image: linear-gradient(var(--gr-presse), var(--gr-presse)); }
.ec-completer .cp-manque:focus-visible { outline: 2px solid var(--gr-focus); outline-offset: 2px; border-radius: 12px; }
.ec-completer .cp-secondaires { margin: 2px 0 0; font: 500 13px/18px var(--gr-sans); color: var(--gr-texte-2); }
.ec-completer .cp-aussi { font-weight: 600; }
.ec-completer .cp-sec-item { white-space: nowrap; }
/* Un secondaire : un mot souligné, discret ; 26 de cible en hauteur (::before), jamais sur son voisin. */
.ec-completer .cp-sec {
    position: relative; z-index: 1; display: inline-block; margin: 0; padding: 0; border: 0; background: none;
    font: inherit; color: inherit; cursor: pointer; text-decoration: underline; text-decoration-thickness: 1px;
    text-underline-offset: 3px; -webkit-tap-highlight-color: transparent;
}
.ec-completer .cp-sec::before { content: ''; position: absolute; inset: -4px 0; }
.ec-completer .cp-sec:active { color: var(--gr-texte); }
.ec-completer .cp-sec:focus-visible { outline: 2px solid var(--gr-focus); outline-offset: 2px; border-radius: 2px; }
.ec-completer .cp-chevron { grid-column: 3; grid-row: 1; width: 20px; height: 20px; margin-top: 18px; color: var(--gr-texte-3); }
/* Les actions, des boutons texte (une liste de vingt boutons tonals pèserait plus que les pièces) : l'icône alignée sur
   le texte de la pièce ; 36 de haut, 44 de cible (.g-bouton.petit::before). */
.ec-completer .cp-actions { grid-column: 2 / -1; grid-row: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 4px; margin: 4px 0 -4px -10px; }
.ec-completer .cp-actions > .g-bouton.texte { z-index: 1; height: 36px; padding: 0 10px; gap: 6px; font: 600 15px/1 var(--gr-sans); }
.ec-completer .cp-actions .g-ic { width: 18px; height: 18px; }
@media (hover: hover) {
    .ec-completer .cp-lien:hover .cp-nom { text-decoration: underline; text-underline-offset: 3px; }
    .ec-completer .cp-manque:hover { background-image: linear-gradient(var(--gr-survol), var(--gr-survol)); box-shadow: inset 0 0 0 1px var(--gr-texte-2); }
    .ec-completer .cp-sec:hover { color: var(--gr-texte); }
}
.ec-completer .cp-piece:has(.cp-lien:active) .cp-vg > .g-vg { opacity: .85; }
/* La pièce ouverte dans le panneau (bureau) : comme la rangée du tableau de Pièces. */
.ec-completer .cp-piece:has(.cp-lien[aria-current="true"]) { background: var(--gr-presse); box-shadow: inset 2px 0 0 var(--gr-texte); }
/* Couleurs forcées (Windows) : l'ombre du liseré disparaît ; un bord de bouton garde la pastille lisible comme bouton. */
@media (forced-colors: active) {
    .ec-completer .cp-manque { border: 1px solid ButtonText; }
}

/* ---------------- États : squelettes, erreur, vide, tout est complet ---------------- */
.ec-completer .cp-squelettes { margin: 28px var(--gr-marge) 0; padding: 4px 16px; background: var(--gr-surface); border-radius: var(--r-ctrl); }
.ec-completer .cp-squelette { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 12px; padding: 12px 0; }
.ec-completer .cp-squelette .g-squelette.vg { width: 56px; }
.ec-completer .cp-erreur { margin: 40px var(--gr-marge); display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.ec-completer .cp-erreur-texte { display: flex; gap: 8px; align-items: flex-start; color: var(--gr-danger); font: 500 15px/21px var(--gr-sans); }
.ec-completer .cp-erreur-texte > :where(.g-ic) { flex: none; margin-top: 1px; }
.ec-completer .cp-reste { margin: 0; max-width: 34ch; font: 500 15px/21px var(--gr-sans); color: var(--gr-texte-2); }

/* ---------------- Bureau (1024 et plus) ---------------- */
@media (min-width: 1024px) {
    .ec-completer { padding-top: 24px; }
    .ec-completer .cp-compacte, .ec-completer .cp-entete-ligne { display: none; }
    .ec-completer .cp-entete { padding-top: 0; }
    .ec-completer .cp-titre { margin: 0; min-height: 56px; align-items: center; font-size: 34px; line-height: 40px; }
    .ec-completer .cp-titre-nb { font: 500 15px/20px var(--gr-sans); color: var(--gr-texte-3); }
    .ec-completer .cp-resume { margin-top: 4px; }
    .ec-completer .cp-reglage { margin-top: 16px; }
    .ec-completer .cp-section-titre { margin: 32px var(--gr-marge) 12px; }
    .ec-completer :where(.cp-pieces, .cp-squelettes, .cp-section-titre) { max-width: 760px; }
    .ec-completer .cp-piece { padding: 12px 12px 12px 16px; }
}
/* Colonne large (bureau : 608 px à 1280 avec le panneau ; tablette en paysage) : les actions passent à droite du texte,
   la rangée garde sa hauteur de vignette. */
@container (min-width: 560px) {
    .ec-completer .cp-actions { grid-column: 3; grid-row: 1; align-self: center; flex-direction: column; align-items: flex-end; margin: 0; }
    .ec-completer .cp-chevron { display: none; }
}