/* ===========================================================================
   PARC ET LIBRE-SERVICE — Easy Print Center
   ---------------------------------------------------------------------------
   Mon parc (les machines du magasin, en cartes illustrees), la fiche d'une
   machine (le type se choisit sur image), et le libre-service a la caisse :
   une tuile par machine avec son bouton lecture ou arret, puis les travaux
   qui attendent leur ticket.

   Le bouton lecture prend le geste du tampon (trait d'encre, ombre franche)
   comme le bouton principal : c'est l'action qu'on fait cinquante fois par
   jour, elle doit se trouver du coin de l'oeil.
   =========================================================================== */

/* --- Mon parc : familles et cartes --------------------------------------- */

.parc-chiffres { margin-bottom: var(--space-5); }

.parc-famille { margin-bottom: var(--space-5); }

.parc-famille-titre {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0 0 var(--space-3);
    font-family: var(--font-titre);
    font-size: var(--font-size-h2);
}

.parc-compte,
.ls-compte {
    display: inline-grid;
    place-items: center;
    min-width: 26px;
    height: 22px;
    padding: 0 7px;
    border-radius: var(--radius-rond);
    background: var(--color-jaune);
    color: #16161d;
    font-family: var(--font-sans);
    font-size: var(--font-size-small);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.parc-grille {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.machine-carte { min-width: 0; }

.machine-lien {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    height: 100%;
    padding: var(--space-3);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    color: inherit;
    text-decoration: none;
    transition: border-color var(--duree-1) var(--sortie),
                transform var(--duree-2) var(--sortie),
                box-shadow var(--duree-2) var(--sortie);
}

a.machine-lien:hover {
    border-color: var(--trait);
    box-shadow: var(--ombre-encre);
    transform: translateY(-2px);
    color: inherit;
    text-decoration: none;
}

a.machine-lien:focus-visible {
    outline: 3px solid color-mix(in oklab, var(--color-brand) 55%, transparent);
    outline-offset: 2px;
}

/* La trame : un semis de points sous la machine, comme une photogravure. */
.machine-visuel {
    display: grid;
    place-items: center;
    height: 150px;
    margin: calc(-1 * var(--space-3)) calc(-1 * var(--space-3)) 4px;
    border-bottom: 1px solid var(--color-line);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    background-color: var(--color-surface-2);
    background-image: radial-gradient(color-mix(in oklab, var(--color-ink) 13%, transparent) 1px, transparent 1.4px);
    background-size: 9px 9px;
}

.machine-visuel img {
    width: 132px;
    height: 132px;
    object-fit: contain;
    transition: transform var(--duree-3) var(--sortie);
}

a.machine-lien:hover .machine-visuel img { transform: scale(1.04) rotate(-1.5deg); }

/* Le numero de la machine, celui qui est colle dessus au magasin. */
.machine-numero {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 1;
    display: grid;
    place-items: center;
    min-width: 34px;
    height: 34px;
    padding: 0 7px;
    border: 2px solid var(--trait);
    border-radius: var(--radius-rond);
    background: var(--color-surface);
    color: var(--color-ink);
    font-family: var(--font-affiche);
    font-size: 1rem;
    line-height: 1;
    box-shadow: 0 2px 0 var(--trait);
}

.machine-nom {
    font-family: var(--font-titre);
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.25;
}

.machine-modele {
    color: var(--color-ink-3);
    font-size: var(--font-size-label);
}

/* Les trois encres sous l'etiquette « Couleur ». */
.machine-encre--couleur {
    background:
        linear-gradient(90deg, #00a0e3 0 33.3%, #e4007c 33.3% 66.6%, #ffd400 66.6%) bottom / 100% 3px no-repeat,
        var(--color-surface);
}

.machine-pied {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin-top: auto;
    padding-top: 6px;
}

.machine-compteur {
    color: var(--color-ink-3);
    font-size: var(--font-size-small);
    font-variant-numeric: tabular-nums;
}

/* Sur telephone, deux machines par rangee : le parc reste une vue d'ensemble. */
@media (max-width: 560px) {
    .parc-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
    .machine-lien { padding: var(--space-2); }
    .machine-visuel { height: 112px; margin: calc(-1 * var(--space-2)) calc(-1 * var(--space-2)) 4px; }
    .machine-visuel img { width: 96px; height: 96px; }
    .machine-numero { top: 6px; left: 6px; min-width: 28px; height: 28px; font-size: 0.875rem; }
    .machine-nom { font-size: 0.9375rem; }
    .machine-pied { flex-direction: column; align-items: flex-start; }
}

.machine-carte--arret .machine-visuel img {
    filter: grayscale(1);
    opacity: 0.5;
}

.machine-carte--occupee .machine-lien { border-color: var(--color-warn); }

.parc-vide {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-6) var(--space-4);
    text-align: center;
}

.parc-vide h2 { margin: 0; font-family: var(--font-titre); }
.parc-vide p { max-width: 52ch; margin: 0 0 var(--space-2); color: var(--color-ink-2); }

/* --- Fiche machine : le type sur image ----------------------------------- */

.types-famille {
    margin: 0 0 var(--space-3);
    padding: 0;
    border: 0;
}

.types-famille legend {
    margin-bottom: var(--space-2);
    padding: 0;
    color: var(--color-ink-3);
    font-size: var(--font-size-small);
    font-weight: 650;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.types-grille {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: var(--space-2);
}

.type-machine {
    position: relative;
    display: grid;
    grid-template-columns: 56px 1fr;
    grid-template-rows: auto 1fr;
    column-gap: 10px;
    align-items: start;
    padding: 10px;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    cursor: pointer;
    transition: border-color var(--duree-1) var(--sortie),
                background-color var(--duree-1) var(--sortie),
                box-shadow var(--duree-1) var(--sortie);
}

.type-machine:hover { border-color: var(--color-line-2); background: var(--color-surface-2); }

/* Le bouton radio reste dans le flux du clavier, invisible : toute la carte
   est la cible. */
.type-machine input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.type-machine img {
    grid-row: span 2;
    width: 56px;
    height: 56px;
    object-fit: contain;
}

.type-nom { font-weight: 650; line-height: 1.25; }

.type-description {
    color: var(--color-ink-3);
    font-size: var(--font-size-small);
    line-height: 1.35;
}

.type-machine:has(input:checked) {
    border-color: var(--trait);
    background: var(--color-brand-tint);
    box-shadow: var(--ombre-encre);
}

.type-machine:has(input:focus-visible) {
    outline: 3px solid color-mix(in oklab, var(--color-brand) 55%, transparent);
    outline-offset: 2px;
}

.capacites {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.capacite { position: relative; }

.capacite input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.capacite span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    padding: 6px 14px;
    border: 1px solid var(--color-line-2);
    border-radius: var(--radius-rond);
    background: var(--color-surface);
    color: var(--color-ink-2);
    font-size: var(--font-size-label);
    font-weight: 600;
    cursor: pointer;
    transition: background-color var(--duree-1) var(--sortie), color var(--duree-1) var(--sortie);
}

.capacite span:hover { border-color: var(--trait); }

.capacite input:checked + span {
    border-color: var(--trait);
    background: var(--color-ink);
    color: var(--color-surface);
}

.capacite input:checked + span::before { content: '✓'; }

.capacite input:focus-visible + span {
    outline: 3px solid color-mix(in oklab, var(--color-brand) 55%, transparent);
    outline-offset: 2px;
}

/* L'explication d'un interrupteur sous son nom, pas a sa suite. */
.fiche-machine .bascule-note { display: block; }

.ls-aide { margin-top: var(--space-2); }
.ls-prix { margin-top: var(--space-3); }

.fiche-machine-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-line);
}

.retirer-machine { margin-top: var(--space-3); }

/* Une impression de borne qui n'est pas sortie : le client va venir en parler. */
.ls-ratees {
    display: inline-block;
    margin-top: 2px;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--color-danger-tint);
    color: var(--color-danger-d);
    font-size: var(--font-size-label, .8rem);
    font-weight: 700;
    white-space: nowrap;
}

/* La mise en service d'une borne : deux chemins côte à côte, chacun expliqué. */
.borne-installation { margin-top: var(--space-4); }
.borne-installation-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: var(--space-3);
    margin-top: var(--space-2);
}
.borne-installation-actions .champ-aide { margin-top: var(--space-1); }
[data-si-poste] { margin-top: var(--space-3); }

/* --- Caisse : les tuiles du libre-service -------------------------------- */

.ls {
    margin: var(--space-4) 0;
    padding: var(--space-4);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
}

.ls-tete {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px var(--space-3);
    margin-bottom: var(--space-3);
}

.ls-tete h2 { margin: 0; font-family: var(--font-titre); }
.ls-tete p { margin: 0; color: var(--color-ink-3); font-size: var(--font-size-label); }
.ls-vide { margin: 0; color: var(--color-ink-3); }

.ls-grille {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.ls-machine {
    position: relative;
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-2);
    padding: 10px 12px 10px 10px;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    background: var(--color-surface-2);
    transition: border-color var(--duree-2) var(--sortie), background-color var(--duree-2) var(--sortie);
}

.ls-visuel {
    width: 56px;
    height: 56px;
    object-fit: contain;
}

.ls-numero {
    position: absolute;
    top: 6px;
    left: 6px;
    display: grid;
    place-items: center;
    min-width: 22px;
    height: 22px;
    padding: 0 5px;
    border: 1.5px solid var(--trait);
    border-radius: var(--radius-rond);
    background: var(--color-surface);
    color: var(--color-ink);
    font-family: var(--font-affiche);
    font-size: 0.75rem;
    line-height: 1;
}

.ls-infos {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ls-infos strong,
.ls-etat {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ls-etat {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--color-ink-3);
    font-size: var(--font-size-label);
}

.ls-machine--en-cours {
    border-color: var(--color-brand);
    background: var(--color-brand-tint);
    box-shadow: inset 4px 0 0 var(--color-brand);
}

.ls-machine--en-cours .ls-etat { color: var(--color-brand-d); font-weight: 650; }

/* Le point qui bat : une machine occupee se reconnait de loin. */
.ls-machine--en-cours .ls-etat::before {
    content: '';
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-brand);
    animation: ls-pouls 1.6s ease-in-out infinite;
}

@keyframes ls-pouls {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.35; transform: scale(0.8); }
}

.ls-chrono { font-variant-numeric: tabular-nums; }

.ls-bouton {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 2px solid var(--trait);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 3px 0 var(--trait);
    transition: transform var(--duree-1) var(--sortie), box-shadow var(--duree-1) var(--sortie);
}

.ls-bouton svg { width: 22px; height: 22px; }
.ls-bouton:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--trait); }

.ls-bouton:focus-visible {
    outline: 3px solid color-mix(in oklab, var(--color-brand) 55%, transparent);
    outline-offset: 3px;
}

.ls-bouton--lecture { background: var(--color-brand); color: var(--color-brand-contraste); }
.ls-bouton--lecture svg { margin-left: 3px; }
.ls-bouton--lecture:hover { background: var(--color-brand-d); }
.ls-bouton--arret { background: var(--color-ink); color: var(--color-surface); }

/* --- Dialogue d'arret ---------------------------------------------------- */

.ls-depart {
    margin-left: auto;
    color: var(--color-ink-3);
    font-size: var(--font-size-small);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.ls-apercu {
    margin: 0;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    background: var(--color-brand-tint);
    color: var(--color-brand-d);
    font-weight: 650;
    font-variant-numeric: tabular-nums;
}

.ls-apercu--faute { background: var(--color-danger-tint); color: var(--color-danger); }

.ls-apercu-duree {
    margin: 0 0 var(--space-2);
    font-size: 1.125rem;
    font-weight: 650;
}

.ls-formats {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ls-arret-pied { flex-wrap: wrap; }
.ls-arret-pied > .btn--fantome { order: 1; }
.ls-arret-pied > .btn:not(.btn--primaire):not(.btn--fantome) { order: 2; }
.ls-arret-pied > .btn--primaire { order: 3; }

.ls-abandon {
    padding: 0 var(--space-4) var(--space-3);
    text-align: right;
}

/* --- Les travaux a encaisser --------------------------------------------- */

.ls-attente {
    margin-top: var(--space-4);
    padding-top: var(--space-3);
    border-top: 1px dashed var(--color-line-2);
}

.ls-attente h3 {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0 0 var(--space-2);
}

.ls-travaux {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ls-travail {
    display: grid;
    grid-template-columns: auto 40px minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-2);
    padding: 8px 10px;
    border: 1px solid color-mix(in oklab, var(--color-jaune) 55%, var(--color-line));
    border-radius: var(--radius-md);
    background: var(--color-jaune-tint);
}

.ls-travail img {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.ls-travail-texte {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ls-travail-detail {
    color: var(--color-ink-2);
    font-size: var(--font-size-label);
    font-variant-numeric: tabular-nums;
}

.ls-travail-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}

.ls-coche input { width: 18px; height: 18px; margin: 0; }

.ls-ensemble {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-2);
    font-size: var(--font-size-label);
}

.ls-ensemble[hidden] { display: none; }

@media (max-width: 640px) {
    .ls-travail { grid-template-columns: auto 40px minmax(0, 1fr); }
    .ls-travail-actions { grid-column: 1 / -1; justify-content: flex-start; }
}

/* --- Le ticket : les travaux amenes depuis l'accueil --------------------- */

.ls-ticket {
    margin-bottom: var(--space-3);
    padding: var(--space-3);
    border: 1px solid color-mix(in oklab, var(--color-brand) 40%, var(--color-line));
    border-radius: var(--radius-md);
    background: var(--color-brand-tint);
}

.ls-ticket h3 { margin: 0 0 var(--space-2); }
.ls-ticket td { vertical-align: middle; }

.ls-ticket img {
    width: 32px;
    height: 32px;
    margin-right: 6px;
    object-fit: contain;
    vertical-align: middle;
}

.ls-quantite-boite {
    display: inline-block;
    width: 96px;
    margin-right: 6px;
    vertical-align: middle;
}

@media (prefers-reduced-motion: reduce) {
    .ls-machine--en-cours .ls-etat::before { animation: none; }
    a.machine-lien:hover,
    a.machine-lien:hover .machine-visuel img { transform: none; }
}

/* --- Le releve automatique ----------------------------------------------- */

.releve-auto {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3) var(--space-5);
    margin-bottom: var(--space-5);
}

.releve-auto-texte { flex: 1 1 360px; min-width: 0; }
.releve-auto-texte h2 { margin: 0 0 var(--space-1); font-family: var(--font-titre); font-size: var(--font-size-h2); }
.releve-auto-texte p { margin: 0 0 var(--space-2); color: var(--color-ink-2); max-width: 62ch; }

.releve-auto-etat {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-label);
}

.releve-auto-action { flex: 0 1 320px; display: flex; flex-direction: column; gap: var(--space-2); }

.releve-modeles {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.fiche-machine textarea[name^="oids"] { font-family: var(--font-mono); font-size: var(--font-size-label); }

.releve-lu {
    margin: var(--space-2) 0 0;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    background: var(--color-ok-tint);
    color: var(--color-ink);
    font-size: var(--font-size-label);
    font-variant-numeric: tabular-nums;
}

/* Sur la carte d'une machine : le compteur lu tout seul, ou le silence. */
.machine-compteur--auto::before,
.machine-compteur--muet::before {
    content: '';
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 5px;
    border-radius: 50%;
    background: var(--color-ok);
    vertical-align: 1px;
}

.machine-compteur--muet { color: var(--color-warn); font-weight: 600; }
.machine-compteur--muet::before { background: var(--color-warn); }

/* Dans les fenetres de la caisse. */
.ls-auto {
    margin: 0 0 var(--space-3);
    padding: 10px 12px;
    border-radius: var(--radius-md);
    background: var(--color-ok-tint);
    color: var(--color-ink);
    font-size: var(--font-size-label);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.ls-auto:empty { display: none; }
.ls-auto--muet { background: var(--color-warn-tint); }

/* --- L'impression directe ------------------------------------------------ */

.etiquette--impression {
    border-color: color-mix(in oklab, var(--color-brand) 40%, var(--color-line));
    background: var(--color-brand-tint);
    color: var(--color-brand-d);
}

.choix-impression {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

.impressions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.impression {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: var(--space-2) var(--space-3);
    padding: 10px 12px;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}

.impression-quand { color: var(--color-ink-3); font-size: var(--font-size-label); font-variant-numeric: tabular-nums; }
.impression-quoi { display: flex; flex-direction: column; min-width: 0; }
.impression-reglages { color: var(--color-ink-2); font-size: var(--font-size-label); }
.impression-message { color: var(--color-danger); font-size: var(--font-size-label); }
.impression-actions form { margin: 0; }

@media (max-width: 640px) {
    .impression { grid-template-columns: minmax(0, 1fr) auto; }
    .impression-quand { grid-column: 1 / -1; }
}

/* Dans la fenetre d'impression, les interrupteurs ne collent pas aux libelles du dessous. */
.form-impression .bascule { margin-bottom: var(--space-3); }

/* L'historique des impressions : la largeur des cartes a tableau, et pas le
   rouge que l'outil donne aux listes des cartes (celui des erreurs de
   formulaire) : ce n'en est pas une. */
.form-card--impressions { max-width: none; }
.form-card .impressions { color: var(--color-ink); }