/* Garde-robe — Compositeur de tenues (htdocs/assets/garderobe/compositeur.css), lot compositeur.
   Cahier « quantités + compositeur » § 7.9. Racine .ec-compositeur (écran poussé au téléphone, panneau de 440 au
   bureau : même ordre, mêmes bandes). Le défileur est .g-detail : la barre (44) et la bande « Votre tenue » y
   restent collées en haut, le pied en bas. Composants du socle placés et dimensionnés ici seulement (.g-cellule,
   .g-planche, .g-puce, .g-pastille). Couleurs : jetons. */

.ec-compositeur:not([hidden]) { display: flex; flex-direction: column; }
/* La largeur des cellules suit celle de l'écran : 4,3 cellules visibles au téléphone (la suivante dépasse sous le
   fondu : la rangée se lit défilante), 78 px au plus (visuel m) dès qu'il y a la place (panneau du bureau). */
.ec-compositeur { container-type: inline-size; --co-cellule: 78px; }
@container (max-width: 470px) {
    .ec-compositeur .co-piste, .ec-compositeur .co-sq-piste { --co-cellule: clamp(64px, calc((100cqi - var(--gr-marge) + 12px) / 4.3 - 12px), 78px); }
}
.ec-compositeur .co-barre { justify-content: flex-start; flex: none; }
.ec-compositeur .co-titre { outline: none; }

/* ---------------- Bande « Votre tenue » (collée sous la barre) ---------------- */
.ec-compositeur .co-collee {
    position: sticky; top: 44px; z-index: calc(var(--z-barre) - 1); flex: none;
    background: var(--gr-fond); border-bottom: 1px solid var(--gr-ligne);
}
.ec-compositeur .co-bande { position: relative; display: flex; align-items: center; gap: 16px; min-height: 128px; padding: 8px var(--gr-marge); }
.ec-compositeur .co-planche { flex: none; width: 84px; }
.ec-compositeur .co-planche > .g-planche { width: 84px; padding: 8px; }
.ec-compositeur .co-bande-texte { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.ec-compositeur .co-bande-nom {
    margin: 0; font: 600 17px/22px var(--gr-sans); overflow-wrap: anywhere;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ec-compositeur .co-bande-nom.vide { font-weight: 500; color: var(--gr-texte-2); }
.ec-compositeur .co-bande-meta { margin: 0; font: 500 13px/18px var(--gr-sans); color: var(--gr-texte-2); font-variant-numeric: tabular-nums; }
/* Le texte du bouton s'aligne sur celui de la bande (le bouton texte petit a 14 px de marge intérieure). */
.ec-compositeur .co-tout { margin: 2px 0 0 -14px; }
.ec-compositeur .co-refus { margin: -4px 0 0; padding: 0 var(--gr-marge) 8px; font: 500 13px/18px var(--gr-sans); color: var(--gr-attention); }
.ec-compositeur .co-refus:empty { display: none; }

/* ---------------- Corps ---------------- */
.ec-compositeur .co-corps { flex: 1 0 auto; display: flex; flex-direction: column; gap: 32px; padding: 24px 0 40px; min-width: 0; }
.ec-compositeur .co-alerte {
    display: flex; gap: 8px; align-items: flex-start; margin: 0 var(--gr-marge); padding: 12px 14px; border-radius: var(--r-ctrl);
    background: var(--gr-danger-doux); color: var(--gr-danger); font: 500 15px/21px var(--gr-sans); overflow-wrap: anywhere;
}
.ec-compositeur .co-alerte > .g-ic { flex: none; margin-top: 1px; }
.ec-compositeur .co-rangees { display: flex; flex-direction: column; gap: 24px; }
.ec-compositeur .co-titre-section { margin: 0; font: 400 22px/28px var(--gr-serif); }
.ec-compositeur .co-groupe-tete { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin: 0 var(--gr-marge) 4px; }
.ec-compositeur .co-groupe-meta { font: 500 13px/18px var(--gr-sans); color: var(--gr-texte-2); font-variant-numeric: tabular-nums; }
/* La bande défilante : cellules de 78 (visuel m), écart 12, fondu de 16 au bord droit. 8 px dessus et dessous :
   le disque-coche (−6) et l'anneau de focus (4 + 2) restent dans la zone visible du défilement. */
.ec-compositeur .co-piste {
    display: flex; gap: 12px; overflow-x: auto; overflow-y: hidden; padding: 8px calc(var(--gr-marge-d) + 16px) 8px var(--gr-marge);
    scroll-snap-type: x proximity; scroll-padding: 0 var(--gr-marge); scrollbar-width: none; overscroll-behavior-x: contain;
    -webkit-mask: linear-gradient(to right, var(--gr-texte) calc(100% - 16px), transparent);
    mask: linear-gradient(to right, var(--gr-texte) calc(100% - 16px), transparent);
}
.ec-compositeur .co-piste::-webkit-scrollbar { display: none; }
.ec-compositeur .co-piste > .co-cellule { flex: 0 0 var(--co-cellule); width: var(--co-cellule); scroll-snap-align: start; }
.ec-compositeur .co-cellule[aria-disabled="true"] { cursor: default; }
/* Essais de simulation (le brouillon, « Simuler » avant de garder) : la galerie de la feuille Simuler, avec sa phrase. */
.ec-compositeur .co-essais { display: flex; flex-direction: column; gap: 8px; margin: 0 var(--gr-marge); }
.ec-compositeur .co-essais[hidden] { display: none; }
.ec-compositeur .co-essais-aide { margin: 0; font: 500 13px/18px var(--gr-sans); color: var(--gr-texte-2); }
.ec-compositeur .co-essais .sm-galerie-titre { margin: 4px 0 0; }
/* Grand écran (bureau, html[data-detail-large]) : le bouton de la barre ; les rangées passent à la ligne au lieu de
   défiler, et le corps se centre sur une colonne de lecture. */
.ec-compositeur .co-agrandir { display: none; }
@media (min-width: 1024px) { .ec-compositeur .co-agrandir { display: inline-flex; } }
html[data-detail-large] .ec-compositeur .co-piste { flex-wrap: wrap; overflow-x: visible; -webkit-mask: none; mask: none; padding-right: var(--gr-marge-d); }
html[data-detail-large] .ec-compositeur .co-corps, html[data-detail-large] .ec-compositeur .co-collee > * { width: 100%; max-width: 1080px; margin-left: auto; margin-right: auto; }
.ec-compositeur .co-groupe-vide { margin: 4px var(--gr-marge) 0; font: 500 15px/21px var(--gr-sans); color: var(--gr-texte-2); }
.ec-compositeur .co-groupe-vide a { color: var(--gr-texte); font-weight: 600; text-underline-offset: 3px; display: inline-block; padding: 12px 0; margin: -12px 0; }

/* ---------------- Détails ---------------- */
.ec-compositeur .co-details { display: flex; flex-direction: column; gap: 20px; padding: 0 var(--gr-marge); }
.ec-compositeur .co-details > .co-titre-section { margin-bottom: -8px; }
.ec-compositeur .co-champ { display: flex; flex-direction: column; min-width: 0; }
.ec-compositeur .co-champ > input, .ec-compositeur .co-champ > textarea { width: 100%; }
.ec-compositeur .co-aide { margin: 6px 0 0; font: 500 13px/18px var(--gr-sans); color: var(--gr-texte-2); }
.ec-compositeur .co-occasions { margin-top: 12px; }
/* Le dossier (19/10/2026) : une rangée de groupe dans les détails, déjà dans la marge des détails ; un nom long se coupe. */
.ec-compositeur .co-dossier.g-groupe { margin: 0; }
.ec-compositeur .co-dossier .g-rangee-libelle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ec-compositeur .g-erreur[hidden] { display: none; }

/* ---------------- Dictionnaire de Wada (option, 19/10/2026) ----------------
   L'interrupteur (rangée de groupe, après les rangées des pièces, avant les détails), puis le panneau : aide des proportions, cartes des combinaisons
   (pastilles côte à côte, de même largeur, comme les planches du livre ; nom de la couleur, pièce qui la porte), « Ce que dit
   le livre ». Pastilles : --c1 posé par la page, liseré --c-encre (jetons.css), comme les pastilles de la palette. */
.ec-compositeur .co-wada { display: flex; flex-direction: column; gap: 12px; }
.ec-compositeur .co-wada-option .g-rangee-libelle > small cite { font-style: italic; }
.ec-compositeur .co-wada-corps { display: flex; flex-direction: column; gap: 12px; padding: 0 var(--gr-marge); }
.ec-compositeur .co-wada-corps[hidden], .ec-compositeur .co-wada-carte[hidden], .ec-compositeur .co-bande-wada[hidden] { display: none; }
.ec-compositeur .co-wada-aide { margin: 0; }
.ec-compositeur .co-wada-zone { display: flex; flex-direction: column; align-items: stretch; gap: 4px; min-width: 0; }
.ec-compositeur .co-wada-vide { margin: 0; display: flex; gap: 8px; align-items: flex-start; font: 500 15px/21px var(--gr-sans); color: var(--gr-texte-2); }
.ec-compositeur .co-wada-vide > .g-ic { flex: none; margin-top: 1px; }
.ec-compositeur .co-wada-vide.erreur { color: var(--gr-danger); }
.ec-compositeur .co-wada-reessayer { align-self: flex-start; margin-top: 8px; }
.ec-compositeur .co-wada-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; border-radius: var(--r-ctrl); }
.ec-compositeur .co-wada-liste:focus { outline: none; }
.ec-compositeur .co-wada-liste:focus-visible { outline: 2px solid var(--gr-focus); outline-offset: 4px; }
.ec-compositeur .co-wada-carte { min-width: 0; padding: 12px; border-radius: var(--r-ctrl); background: var(--gr-surface); }
.ec-compositeur .co-wada-tete {
    display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 10px; margin: 0 0 10px;
    font: 500 13px/18px var(--gr-sans); color: var(--gr-texte-2);
}
.ec-compositeur .co-wada-num { font: 400 20px/24px var(--gr-serif); color: var(--gr-texte); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Le numéro mène à la page Couleurs (#couleurs/<n>), qui explique la combinaison avec les pièces du compte. */
.ec-compositeur a.co-wada-num { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; border-radius: 4px; }
@media (hover: hover) { .ec-compositeur a.co-wada-num:hover { text-decoration-thickness: 2px; } }
.ec-compositeur .co-wada-page { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--gr-texte); font-weight: 600;
    text-decoration: underline; text-underline-offset: 3px; }
.ec-compositeur .co-wada-page > .g-ic { flex: none; }
.ec-compositeur .co-wada-etat { font-weight: 600; color: var(--gr-texte); }
.ec-compositeur .co-wada-etat.presque { color: var(--gr-attention); }
.ec-compositeur .co-wada-couleurs {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(var(--k, 3), minmax(0, 1fr)); gap: 8px;
}
.ec-compositeur .co-wada-c { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ec-compositeur .co-wada-pastille { display: block; height: 40px; border-radius: 6px; background: var(--c1); box-shadow: inset 0 0 0 1px var(--c-encre); }
/* La couleur qui manque : la même pastille, cernée de tirets (on voit ce qu'il faut trouver). */
.ec-compositeur .co-wada-c.manque .co-wada-pastille { outline: 2px dashed var(--gr-ligne-forte); outline-offset: 2px; }
.ec-compositeur .co-wada-nom, .ec-compositeur .co-wada-piece {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere;
}
.ec-compositeur .co-wada-nom { margin-top: 2px; font: 600 13px/16px var(--gr-sans); color: var(--gr-texte); }
.ec-compositeur .co-wada-piece { font: 500 13px/16px var(--gr-sans); color: var(--gr-texte-2); }
.ec-compositeur .co-wada-c.manque .co-wada-piece { font-style: italic; }
.ec-compositeur .co-wada-note { margin: 10px 0 0; font: 500 13px/18px var(--gr-sans); color: var(--gr-texte-2); overflow-wrap: anywhere; }
/* Le texte du bouton s'aligne sur le bord des cartes (le bouton texte petit a 14 px de marge intérieure). */
.ec-compositeur .co-wada-autres { align-self: flex-start; margin: 4px 0 0 -14px; }
.ec-compositeur .co-wada-plus { margin: 0; }
.ec-compositeur .co-wada-plus ul { margin: 4px 0 8px; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.ec-compositeur .co-wada-plus p { margin: 0 0 8px; }
/* Étiquette d'une suggestion du livre (« n° 214 ») : un point de la couleur apportée. */
.ec-compositeur .co-wada-point {
    display: inline-block; width: 8px; height: 8px; margin-right: 4px; border-radius: 50%; vertical-align: 0;
    background: var(--c1); box-shadow: inset 0 0 0 1px var(--c-encre);
}
/* La ligne de la bande « Votre tenue » : la meilleure combinaison, un bouton qui mène au panneau. */
.ec-compositeur .co-bande-wada {
    position: relative; display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: 24px; margin: 2px 0 0; padding: 0;
    border: 0; background: none; color: var(--gr-texte-2); cursor: pointer; text-align: left;
    font: 500 13px/18px var(--gr-sans); font-variant-numeric: tabular-nums; border-radius: 6px;
}
.ec-compositeur .co-bande-wada > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ec-compositeur .co-bande-wada:focus-visible { outline: 2px solid var(--gr-focus); outline-offset: 2px; }
@media (hover: hover) { .ec-compositeur .co-bande-wada:hover > span:last-child { color: var(--gr-texte); text-decoration: underline; text-underline-offset: 3px; } }
.ec-compositeur .co-bande-wada-p { display: inline-flex; flex: none; }
.ec-compositeur .co-bande-wada-p > i { display: block; width: 12px; height: 12px; background: var(--c1); box-shadow: inset 0 0 0 1px var(--c-encre); }
.ec-compositeur .co-bande-wada-p > i:first-child { border-radius: 3px 0 0 3px; }
.ec-compositeur .co-bande-wada-p > i:last-child { border-radius: 0 3px 3px 0; }
.ec-compositeur .co-bande-wada-p > i.manque { opacity: .45; }
/* Couleurs forcées : la couleur est le contenu de la pastille, elle reste (cernée de la couleur du texte). */
@media (forced-colors: active) {
    .ec-compositeur .co-wada-pastille, .ec-compositeur .co-wada-point, .ec-compositeur .co-bande-wada-p > i {
        forced-color-adjust: none; box-shadow: inset 0 0 0 1px CanvasText;
    }
}

/* ---------------- Pied collé ---------------- */
.ec-compositeur .co-pied {
    position: sticky; bottom: 0; z-index: var(--z-barre); flex: none;
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 8px var(--gr-marge) calc(8px + env(safe-area-inset-bottom)); border-top: 1px solid var(--gr-ligne);
}
.ec-compositeur .co-pied > .g-bouton.bas { max-width: 480px; }
.ec-compositeur .co-tourne { animation: co-tourne 800ms linear infinite; }
@keyframes co-tourne { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ec-compositeur .co-tourne { animation-duration: 2400ms; } }

/* Un contrôle focalisé au clavier ne passe jamais sous la barre et la bande collées, ni sous le pied. */
.g-detail:has(> .ec-compositeur:not([hidden])) {
    scroll-padding-top: 182px;
    scroll-padding-bottom: calc(var(--co-pied, 69px) + 8px);
}

/* ---------------- États : chargement, erreur ---------------- */
.ec-compositeur .co-sq-bande { display: flex; align-items: center; gap: 16px; min-height: 128px; padding: 8px var(--gr-marge); border-bottom: 1px solid var(--gr-ligne); }
.ec-compositeur .co-sq-planche { flex: none; width: 84px; aspect-ratio: 3 / 4; }
.ec-compositeur .co-sq-texte { flex: 1; min-width: 0; }
.ec-compositeur .co-sq-titre { width: 96px; height: 20px; margin: 0 var(--gr-marge) 8px; }
.ec-compositeur .co-sq-cellule { flex: 0 0 var(--co-cellule); }
.ec-compositeur .co-erreur { margin: 24px var(--gr-marge); display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.ec-compositeur .co-erreur-texte { margin: 0; display: flex; gap: 8px; align-items: flex-start; color: var(--gr-danger); font: 500 15px/21px var(--gr-sans); overflow-wrap: anywhere; }
.ec-compositeur .co-erreur-texte > .g-ic { flex: none; margin-top: 1px; }

/* ---------------- Écran bas (375 × 667) : bande de 88 (planche 66 × 88) ---------------- */
@media (max-height: 700px) {
    .ec-compositeur .co-bande, .ec-compositeur .co-sq-bande { min-height: 104px; }
    .ec-compositeur .co-planche, .ec-compositeur .co-planche > .g-planche, .ec-compositeur .co-sq-planche { width: 66px; }
    .ec-compositeur .co-planche > .g-planche { padding: 6px; }
    .g-detail:has(> .ec-compositeur:not([hidden])) { scroll-padding-top: 158px; }
}
/* La ligne du Dictionnaire de Wada allonge la bande (jusqu'à 146 avec un nom sur deux lignes, à toutes les hauteurs) :
   la marge de défilement suit (plus spécifique que les deux règles du dessus). */
.g-detail:has(> .ec-compositeur:not([hidden]) .co-bande-wada:not([hidden])) { scroll-padding-top: 200px; }