/* Garde-robe — éditeur d'un jour (htdocs/assets/garderobe/saisie.css), lot A.
   Racines : .ec-saisie (GR.saisie.monter, dans l'outil du jour, la feuille du Journal ou le panneau du bureau)
   et .dc-feuille (la feuille « Dicter »). Les composants (.g-cellule, .g-puce, .g-bouton, .g-confirmation…)
   viennent de composants.css : on ne fait ici que les placer et les dimensionner.
   Règle : deux classes de spécificité au plus ; un état passe par :where(), sans poids. Aucune couleur en dur. */

/* =====================================================================
   Groupes et grilles (§ 8.1 a, c)
   ===================================================================== */
.ec-saisie { position: relative; }
.ec-saisie .sa-zone { overflow-x: clip; }
.ec-saisie .sa-contenu { padding-bottom: 16px; }
.ec-saisie:where([data-mode="page"]) .sa-contenu { padding-bottom: calc(var(--sa-barre, 64px) + 16px); }
.ec-saisie .sa-groupe { position: relative; }
.ec-saisie .sa-groupe + section { margin-top: 16px; }
.ec-saisie .sa-tete {
    position: relative; display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    height: 32px; margin: 0 var(--gr-marge) 4px;
}
.ec-saisie .sa-tete > h2, .ec-saisie .sa-tete > h3 { margin: 0; line-height: 32px; white-space: nowrap; }
.ec-saisie .sa-grille {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 8px;
    margin: 0 var(--gr-marge);
}
/* Repère « en rodage » (cahier quantités § 7.4) : il prend 18 px de la première ligne ; la coupure française
   (« Mocas-sins Lupin ») garde le nom entier au lieu de renvoyer le premier mot à la ligne et d'en perdre la fin. */
.ec-saisie :where(.g-cellule[data-rodage="true"]) .g-cellule-nom { -webkit-hyphens: auto; hyphens: auto; }

/* « Autre » : bouton texte à droite du titre ; activé, une puce encre « coche Autre ».
   Sa cible de 44 est calée sur l'en-tête (position: relative), pas sur le bouton que l'alignement des lignes de
   base décale : 8 au-dessus de l'en-tête, jusqu'au haut de la grille, jamais sur les cellules ni sur la bande. */
.ec-saisie .sa-autre {
    display: inline-flex; align-items: center; gap: 4px; flex: none;
    height: 32px; padding: 0 4px; margin-right: -4px; border: 0; border-radius: 16px; cursor: pointer;
    background: none; color: var(--gr-texte-2); font: 500 15px/20px var(--gr-sans);
    transition: background-color var(--d-court) var(--c-standard), color var(--d-court);
}
.ec-saisie .sa-autre::before { content: ''; position: absolute; top: -8px; bottom: -4px; right: -8px; width: 96px; }
.ec-saisie .sa-autre > svg { display: none; }
.ec-saisie .sa-autre:where([aria-pressed="true"]) { background: var(--gr-texte); color: var(--gr-inverse); padding: 0 12px 0 10px; margin-right: 0; }
.ec-saisie .sa-autre:where([aria-pressed="true"]) > svg { display: block; }
@media (hover: hover) { .ec-saisie .sa-autre:where([aria-pressed="false"]:hover) { background: var(--gr-survol); } }

/* « Haut, manteau, accessoires » et « Ajouter une note » : rangées de 48 sur un filet. */
.ec-saisie .sa-reste { margin-top: 24px; }
.ec-saisie .sa-rangee {
    position: relative; display: flex; align-items: center; gap: 12px;
    width: calc(100% - 2 * var(--gr-marge)); min-height: 48px; margin: 0 var(--gr-marge); padding: 0;
    border: 0; border-top: 1px solid var(--gr-ligne); background: none; color: var(--gr-texte);
    font: 400 17px/24px var(--gr-sans); text-align: left; cursor: pointer;
}
/* Le libellé passe avant les vignettes (deux au plus, puis « +2 ») : elles cèdent la place les premières. */
.ec-saisie .sa-rangee-libelle { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ec-saisie .sa-reste-vgs { display: flex; align-items: center; gap: 4px; flex: 0 100 auto; min-width: 0; overflow: hidden; }
.ec-saisie .sa-reste-plus { flex: none; padding-left: 2px; font: 500 13px/24px var(--gr-sans); color: var(--gr-texte-2); font-variant-numeric: tabular-nums; }
.ec-saisie .sa-chevron { color: var(--gr-texte-3); flex: none; transition: transform var(--d-court) var(--c-standard); }
.ec-saisie :where([aria-expanded="true"]) > .sa-chevron { transform: rotate(180deg); }
.ec-saisie .sa-reste-corps { padding: 8px 0 16px; }
.ec-saisie .sa-note-tete { display: block; }
.ec-saisie .sa-citation {
    display: block; width: calc(100% - 2 * var(--gr-marge)); margin: 0 var(--gr-marge); padding: 12px 0;
    border: 0; border-top: 1px solid var(--gr-ligne); background: none; color: var(--gr-texte);
    text-align: left; cursor: pointer; overflow-wrap: anywhere;
}
.ec-saisie .sa-note-champ { display: block; width: calc(100% - 2 * var(--gr-marge)); margin: 12px var(--gr-marge) 0; }
.ec-saisie .sa-suggestions { margin: 12px var(--gr-marge) 0; }
.ec-saisie .sa-suggestion { max-width: 100%; }
.ec-saisie .sa-suggestion > span { overflow: hidden; text-overflow: ellipsis; }

/* Bulle d'aide unique sous la cellule (premier appui long réussi, § 8.1 f). */
.ec-saisie .sa-bulle {
    position: absolute; z-index: 5; max-width: 240px; padding: 8px 12px; border-radius: var(--r-ctrl);
    background: var(--gr-texte); color: var(--gr-inverse); font: 500 13px/18px var(--gr-sans);
    box-shadow: var(--gr-o-flottant); pointer-events: none; animation: g-fondu var(--d-court) linear;
}

/* =====================================================================
   Barre basse (§ 8.1 e) : [micro 48] [de mémoire 48] [action de droite]
   Page : fixée au bas de la fenêtre. Feuille, panneau : collée au bas du conteneur.
   ===================================================================== */
.ec-saisie .sa-barre {
    z-index: var(--z-barre); border-top: 1px solid var(--gr-ligne);
    padding: 8px var(--gr-marge) calc(8px + env(safe-area-inset-bottom));
}
.ec-saisie:where([data-mode="page"]) .sa-barre { position: fixed; left: 0; right: 0; bottom: 0; }
.ec-saisie:where([data-mode="feuille"], [data-mode="panneau"]) .sa-barre { position: sticky; bottom: 0; padding-bottom: 8px; }
/* Dans une feuille (GR.feuille), le corps a 16 px de marge basse : la barre descend jusqu'au bord de la feuille. */
.ec-saisie:where([data-mode="feuille"]) .sa-barre { bottom: calc(-1 * var(--sa-feuille-bas, 16px)); margin-bottom: calc(-1 * var(--sa-feuille-bas, 16px)); }
.ec-saisie .sa-ligne, .ec-saisie .sa-puces { max-width: 440px; margin: 0 auto; }
.ec-saisie .sa-ligne { display: flex; align-items: center; gap: 8px; min-height: 48px; }
.ec-saisie .sa-puces { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.ec-saisie .sa-puce { flex: 0 1 auto; min-width: 0; padding: 0 12px; }
.ec-saisie .sa-micro, .ec-saisie .sa-approx {
    position: relative; flex: none; display: grid; place-items: center; width: 48px; height: 48px; padding: 0;
    border: 0; border-radius: 50%; background: var(--gr-surface-2); color: var(--gr-texte); cursor: pointer;
    transition: background-color var(--d-court), color var(--d-court), transform var(--d-instant);
}
.ec-saisie .sa-micro:where(:active), .ec-saisie .sa-approx:where(:active) { transform: scale(.94); }
.ec-saisie .sa-approx:where([aria-pressed="true"]) { background: var(--gr-texte); color: var(--gr-inverse); }
.ec-saisie .sa-droite { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; min-height: 48px; }
.ec-saisie .sa-droite > div { flex: 1; }

/* Primaire « Comme hier » : deux vignettes de 32 superposées de 8, titre et tenue. */
.ec-saisie .sa-comme { flex: 1; min-width: 0; justify-content: flex-start; gap: 10px; padding: 0 14px 0 8px; text-align: left; }
.ec-saisie .sa-comme-vgs { display: flex; flex: none; --vg: 32px; }
.ec-saisie .sa-comme-vgs > * { box-shadow: 0 0 0 2px var(--gr-texte); }
.ec-saisie .sa-comme-vgs > * + * { margin-left: -8px; }
.ec-saisie .sa-comme-texte { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0; }
.ec-saisie .sa-comme-texte > b { font: 600 16px/20px var(--gr-sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ec-saisie .sa-comme-texte > small { font: 500 12px/16px var(--gr-sans); opacity: .72; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Secondaires : « NB os, comme hier », « Remplir mer. 14 ». */
.ec-saisie .sa-completer, .ec-saisie .sa-remplir { flex: 1; min-width: 0; font: 600 15px/20px var(--gr-sans); }
.ec-saisie .sa-completer { justify-content: flex-start; padding: 0 16px 0 8px; }
.ec-saisie :where(.sa-completer) .sa-comme-vgs > * { box-shadow: 0 0 0 2px var(--gr-surface-2); }
/* Sur deux lignes au besoin (« Autre bas, comme / sam. 26 ») : la barre garde ses 48 px. */
.ec-saisie .sa-completer-texte {
    min-width: 0; overflow: hidden; white-space: normal; text-align: left; font: 600 14px/17px var(--gr-sans);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
/* Textes d'état. */
.ec-saisie .sa-texte {
    flex: 1; min-width: 0; margin: 0; display: flex; align-items: center; gap: 6px;
    font: 500 15px/20px var(--gr-sans); color: var(--gr-texte-2);
}
.ec-saisie .sa-texte > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ec-saisie .sa-ok { color: var(--gr-ok); }
.ec-saisie .sa-attention { color: var(--gr-attention); }
.ec-saisie .sa-danger { color: var(--gr-danger); flex: 0 1 auto; }
.ec-saisie .sa-reessayer { margin-left: auto; flex: none; }

/* Rattrapage : sous 390 px, ni vignettes dans « Comme… » ni icônes sur les deux dernières puces. */
@media (max-width: 389px) {
    .ec-saisie:where(.sa-en-rattrapage) .sa-comme-vgs { display: none; }
    .ec-saisie .sa-facultative { display: none; }
    .ec-saisie .sa-puce { padding: 0 11px; }
}

/* =====================================================================
   Variante compacte (iPhone SE, hauteur < 700) : titres de 24, groupes plus serrés.
   ===================================================================== */
@media (max-height: 700px) {
    /* 8 sous l'en-tête : la cible d'« Autre » garde ses 44 entre la bande (ou la grille d'avant) et la grille. */
    .ec-saisie .sa-tete { height: 28px; margin-bottom: 8px; }
    .ec-saisie .sa-autre::before { bottom: -8px; }
    .ec-saisie .sa-tete > h2, .ec-saisie .sa-tete > h3 { font-size: 24px; line-height: 28px; }
    .ec-saisie .sa-groupe + section { margin-top: 12px; }
    .ec-saisie .sa-reste { margin-top: 20px; }
}

/* =====================================================================
   La feuille « Dicter » (§ 8.1 h) : calée au-dessus du clavier (--clavier, posé par dictee.js).
   ===================================================================== */
.dc-feuille { bottom: var(--clavier, 0px); max-height: calc(92dvh - var(--clavier, 0px)); }
.dc-feuille .dc-corps { padding: 0 var(--gr-marge); }
.dc-feuille .dc-exemple { margin: 8px 4px 0; font: 500 13px/18px var(--gr-sans); color: var(--gr-texte-3); }
.dc-feuille .dc-apercu { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.dc-feuille .dc-apercu:where(:empty) { display: none; }
.dc-feuille .dc-jour { padding-top: 12px; border-top: 1px solid var(--gr-ligne); }
.dc-feuille .dc-surtitre { margin: 0; color: var(--gr-texte-2); }
.dc-feuille .dc-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; min-height: 40px; margin-top: 8px; }
.dc-feuille .dc-piece { display: inline-flex; align-items: center; gap: 8px; --vg: 32px; font: 600 15px/20px var(--gr-sans); }
.dc-feuille .dc-piece small { display: block; font: 500 12px/16px var(--gr-sans); color: var(--gr-texte-2); }
.dc-feuille .dc-etiquette {
    display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 10px; border-radius: 14px;
    background: var(--gr-surface-2); color: var(--gr-texte); font: 500 13px/1 var(--gr-sans);
}
/* « Autre bas » qui retire une pièce notée : la puce, et « remplace 555 noir » à côté (comme sous une pièce). */
.dc-feuille .dc-autre { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.dc-feuille .dc-autre > small { font: 500 12px/16px var(--gr-sans); color: var(--gr-texte-2); }
.dc-feuille .dc-note { font: italic 400 17px/22px var(--gr-serif); color: var(--gr-texte-2); }
.dc-feuille .dc-question { margin: 12px 0 8px; font: 500 15px/20px var(--gr-sans); color: var(--gr-texte); }
.dc-feuille .dc-message { margin: 0; font: 500 15px/20px var(--gr-sans); color: var(--gr-texte-2); }
.dc-feuille .dc-rien { font: 500 15px/20px var(--gr-sans); color: var(--gr-texte-3); }
.dc-feuille .dc-erreur { margin: 0; }
.dc-feuille .dc-puces > * { max-width: 100%; }
/* Jets et rachats dictés (cahier quantités § 7.7) : une carte par action, avant les jours ; vignette de 32 (ou le signe
   moins / plus tant que la pièce n'est pas choisie) et la phrase de ce qui sera écrit. */
.dc-feuille .dc-action-ligne { display: flex; align-items: center; gap: 8px; min-height: 40px; margin: 8px 0 0; --vg: 32px;
                               font: 600 15px/20px var(--gr-sans); overflow-wrap: anywhere; }
.dc-feuille .dc-action-ligne > :where(span:last-child) { min-width: 0; }
.dc-feuille .dc-action-ic { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: var(--r-tirage);
                            background: var(--gr-puits); color: var(--gr-texte-2); }
.dc-feuille :where(.dc-action-ic) > .g-ic { width: 16px; height: 16px; }
.dc-feuille :where(.dc-action) .dc-puces { margin-top: 8px; }
.dc-feuille :where(.dc-action) .dc-erreur { margin-top: 8px; }
.dc-feuille .dc-apercu:where([aria-busy="true"]) { opacity: .6; transition: opacity var(--d-court); }
@media (min-width: 1024px) { .dc-feuille { bottom: 0; max-height: 86vh; } }