/* Feuille de style unique, pensée d'abord pour le téléphone. Aucune ressource externe. */
:root {
  --fond: #f6f7f9;
  --surface: #ffffff;
  --texte: #1d2330;
  --texte-doux: #5b6475;
  --bordure: #d7dbe3;
  --principal: #1f5fbf;
  --principal-fonce: #174a96;
  --succes: #1e7b3c;
  --succes-fond: #e3f4e8;
  --alerte: #a15c00;
  --alerte-fond: #fff3dc;
  --erreur: #b3261e;
  --erreur-fond: #fde7e5;
  --rayon: 10px;
  --cible: 48px; /* hauteur minimale des éléments touchés au doigt */
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.45;
  color: var(--texte);
  background: var(--fond);
}

* { box-sizing: border-box; }
body { margin: 0; }
h1 { font-size: 1.5rem; margin: 0 0 1rem; }
h2 { font-size: 1.2rem; margin: 1.5rem 0 .75rem; }
a { color: var(--principal); }

.entete {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem;
  padding: .6rem 1rem; background: var(--surface); border-bottom: 1px solid var(--bordure);
  position: sticky; top: 0; z-index: 10;
}
.entete-titre { font-weight: 700; text-decoration: none; color: var(--texte); }
.entete-gauche { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; min-width: 0; }
.entete-compte { margin-left: auto; display: flex; align-items: center; gap: .5rem; }
.pastille {
  font-size: .85rem; padding: .15rem .6rem; border-radius: 999px;
  background: var(--fond); border: 1px solid var(--bordure); color: var(--texte-doux);
}

.contenu { padding: 1rem; max-width: 1100px; margin: 0 auto; }
.carte { background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--rayon); padding: 1.25rem; }
.carte-etroite { max-width: 28rem; margin: 1.5rem auto; }

.formulaire { display: grid; gap: 1rem; }
.formulaire label { display: grid; gap: .3rem; font-weight: 600; }
.formulaire .case { display: flex; align-items: center; gap: .6rem; font-weight: 400; min-height: var(--cible); }
.aide { font-weight: 400; font-size: .9rem; color: var(--texte-doux); }
input, select, textarea {
  font: inherit; min-height: var(--cible); padding: .5rem .75rem;
  border: 1px solid var(--bordure); border-radius: 8px; background: var(--surface); width: 100%;
}
input[type="checkbox"] { width: 1.5rem; min-height: 1.5rem; height: 1.5rem; }
input:focus, select:focus, textarea:focus, .bouton:focus-visible { outline: 3px solid #9cc0f5; outline-offset: 1px; }

.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  min-height: var(--cible); padding: .5rem 1.1rem; border-radius: 8px;
  border: 1px solid var(--bordure); background: var(--surface); color: var(--texte);
  font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
}
.bouton-principal { background: var(--principal); border-color: var(--principal); color: #fff; }
.bouton-principal:hover { background: var(--principal-fonce); }
.bouton-danger { color: var(--erreur); border-color: var(--erreur); }
.bouton-discret { min-height: 36px; padding: .25rem .7rem; font-weight: 500; }
.boutons { display: flex; flex-wrap: wrap; gap: .5rem; }

.alerte { padding: .75rem 1rem; border-radius: 8px; background: var(--alerte-fond); color: var(--alerte); }
.alerte-erreur { background: var(--erreur-fond); color: var(--erreur); }
.alerte-succes { background: var(--succes-fond); color: var(--succes); }

.tuiles { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); }
.tuile {
  display: grid; gap: .25rem; padding: 1rem; min-height: 5rem; text-decoration: none; color: var(--texte);
  background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--rayon);
}
.tuile span { color: var(--texte-doux); font-size: .9rem; }
.tuile:hover { border-color: var(--principal); }

/* Tableaux : restent des tableaux sur téléphone, avec défilement horizontal et en-tête fixe. */
.tableau-conteneur { overflow: auto; max-height: 75vh; border: 1px solid var(--bordure); border-radius: var(--rayon); background: var(--surface); }
table { border-collapse: collapse; width: 100%; font-size: .95rem; }
th, td { padding: .5rem .6rem; border-bottom: 1px solid var(--bordure); text-align: left; white-space: nowrap; }
th { position: sticky; top: 0; background: var(--fond); z-index: 1; }
td.nombre, th.nombre { text-align: right; font-variant-numeric: tabular-nums; }

@media (min-width: 700px) {
  .contenu { padding: 1.5rem; }
}

/* Petit formulaire sur une ligne (dans un tableau). */
.ligne-formulaire { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.ligne-formulaire input:not([type="checkbox"]) { width: auto; min-width: 10rem; flex: 1; }
.ligne-formulaire .case { min-height: auto; }
.numero-vendeur { font-size: 1.4rem; letter-spacing: .05em; }

.barre-outils { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: space-between; margin-bottom: .5rem; }
.barre-outils > form { flex: 1; min-width: 16rem; }
details.carte > summary { cursor: pointer; min-height: var(--cible); display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
details.carte[open] > summary { margin-bottom: 1rem; }
.carte-alerte { border-color: var(--alerte); background: var(--alerte-fond); margin-bottom: 1rem; }
.carte-alerte h2 { margin-top: 0; color: var(--alerte); }
.liste-doublons { list-style: none; padding: 0; display: grid; gap: .5rem; }
.liste-doublons .bouton { width: 100%; justify-content: flex-start; white-space: normal; text-align: left; }

/* Jouets */
.bouton-large { width: 100%; }
.boutons-pleins .bouton { flex: 1 1 14rem; }
.actions { display: flex; gap: .35rem; flex-wrap: nowrap; }
.actions form { margin: 0; }
th a { color: inherit; text-decoration: none; display: block; }
td.description { max-width: 10.5rem; overflow: hidden; text-overflow: ellipsis; }
.tableau-jouets th, .tableau-jouets td { padding: .5rem .4rem; }
.etat { display: inline-block; padding: .1rem .5rem; border-radius: 999px; font-size: .85rem; background: var(--fond); border: 1px solid var(--bordure); }
.etat-a_vendre { background: #e7efff; border-color: #b8cdf3; color: #174a96; }
.etat-vendu { background: var(--succes-fond); border-color: #a9d8b6; color: var(--succes); }
.etat-a_rendre { background: var(--alerte-fond); border-color: #f0cf8f; color: var(--alerte); }
.etat-perdu { background: var(--erreur-fond); border-color: #f2b8b3; color: var(--erreur); }
.filtres { margin-bottom: .75rem; padding: .5rem 1rem; }
.mention { font-size: .8rem; color: var(--alerte); font-weight: 600; }
@media (min-width: 700px) {
  .bouton-large { width: auto; }
  td.description { max-width: 28rem; }
  .tableau-jouets th, .tableau-jouets td { padding: .5rem .6rem; }
}

/* Saisie rapide en station : tout sur une ligne sur un écran de PC. */
.saisie-rapide { display: grid; gap: .75rem; margin-bottom: .75rem; }
.saisie-rapide label { display: grid; gap: .25rem; font-weight: 600; }
.saisie-rapide .case { display: flex; align-items: center; gap: .5rem; }
@media (min-width: 900px) {
  .saisie-rapide { grid-template-columns: 13rem 1fr 7rem auto 10rem auto; align-items: end; }
}

/* Correction rapide du prix dans une liste (vérification). */
.prix-rapide { display: flex; align-items: center; gap: .35rem; }
.prix-rapide input[name="prix"] { width: 5.5rem; min-height: 36px; padding: .25rem .5rem; text-align: right; }
.prix-rapide .case { display: flex; align-items: center; gap: .25rem; font-weight: 400; }
tr:target { background: #fff8d6; }
.tableau-grand table { font-size: 1.05rem; }
.tableau-grand td.description { max-width: 24rem; }

/* Écrans de scan (avant installation, caisse, inventaire) : lisibles de loin, gros retours visuels. */
.scan { display: flex; gap: .75rem; margin: 1rem 0; }
.champ-scan { font-size: 2rem; min-height: 4rem; letter-spacing: .08em; flex: 1; }
.resultat { padding: 1.25rem 1rem; border-radius: var(--rayon); font-size: 1.4rem; font-weight: 700; background: var(--surface); border: 2px solid var(--bordure); min-height: 5rem; }
.resultat-succes { background: var(--succes-fond); border-color: var(--succes); color: var(--succes); }
.resultat-discret { background: #eef2f7; border-color: #9aa8bd; color: #3d4b61; font-weight: 600; }
.resultat-alerte { background: var(--erreur-fond); border-color: var(--erreur); color: var(--erreur); }
.compteur { font-size: 1.6rem; }
.journal { padding-left: 1.5rem; display: grid; gap: .25rem; }
.journal li.resultat-succes, .journal li.resultat-discret, .journal li.resultat-alerte { background: none; border: 0; font-size: 1rem; }
.groupe-vendeur { margin-bottom: .5rem; }

/* Caisse */
.alerte-attention { background: #ffe9c7; color: #8a4b00; border: 2px solid #e09a2b; font-weight: 700; font-size: 1.1rem; }
.caisse { display: grid; gap: 1rem; }
.caisse .scan { margin-top: 0; }
.caisse-total { background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--rayon); padding: 1rem; display: grid; gap: .75rem; align-content: start; }
.total-libelle { margin: 0; color: var(--texte-doux); }
.total-montant { margin: 0; font-size: 2.6rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.tableau-panier td { white-space: normal; }
.ligne-attention { background: #fff3dc; }
@media (min-width: 1000px) {
  .caisse { grid-template-columns: 1fr 24rem; align-items: start; }
}
.reglement { gap: .45rem; }
.reglement input { min-height: 42px; }
.reglement label { grid-template-columns: 1fr 9rem; align-items: center; display: grid; }
.reglement input { text-align: right; }
.infos-cheque { display: grid; gap: .4rem; padding-left: 1rem; border-left: 3px solid var(--bordure); font-size: .95rem; }
.infos-cheque summary { cursor: pointer; color: var(--texte-doux); }
.infos-cheque label { grid-template-columns: 1fr 9rem; font-weight: 400; }
.infos-cheque input { text-align: left; }
.rendu { margin: 0; font-size: 1.3rem; font-weight: 800; color: var(--succes); }
.bouton-payer { min-height: 3.5rem; font-size: 1.2rem; }
.modes-rapides .bouton { flex: 1; }
.derniere-vente { border-top: 1px solid var(--bordure); padding-top: .5rem; }
.prix-barre { color: var(--texte-doux); font-size: .9rem; }
.badge-ristourne { display: inline-block; background: #111; color: #fff; border-radius: 999px; padding: 0 .45rem; font-size: .8rem; font-weight: 700; }
.bandeau-ristourne { grid-column: 1 / -1; margin: 0; padding: .5rem 1rem; border-radius: 8px; background: var(--fond); border: 1px dashed var(--bordure); color: var(--texte-doux); }
.bandeau-ristourne.en-cours { background: #111; color: #fff; border: 0; font-weight: 700; }
.paniers-attente { border-top: 1px solid var(--bordure); padding-top: .5rem; }
.paniers-attente h2 { margin: .25rem 0 .5rem; font-size: 1rem; }
.paniers-attente ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.paniers-attente li { display: grid; gap: .3rem; }
.ligne-retiree td { color: var(--texte-doux); text-decoration: line-through; }
.ligne-retiree td:last-child, .ligne-retiree .aide { text-decoration: none; }
.sous-menu { margin-bottom: .75rem; }
.facture summary { cursor: pointer; font-weight: 700; min-height: 2.5rem; display: flex; align-items: center; }
.champs-acheteur { display: grid; gap: .4rem; }
.reglement .champs-acheteur label { grid-template-columns: 1fr; }
.reglement .champs-acheteur input, .reglement .champs-acheteur textarea { text-align: left; }

/* Inventaire */
.alerte-discret { background: #eef2f7; color: #3d4b61; border: 1px solid #9aa8bd; }
.alerte-bloquant { background: var(--erreur); color: #fff; font-weight: 800; font-size: 1.3rem; }
.alerte-plein-ecran { position: fixed; inset: 0; z-index: 100; background: #c62828; color: #fff; display: grid; place-content: center; gap: 2rem; padding: 2rem; text-align: center; }
.alerte-plein-ecran p { font-size: clamp(1.5rem, 4vw, 2.6rem); font-weight: 800; max-width: 50rem; margin: 0; }
.alerte-plein-ecran .bouton { font-size: 1.3rem; min-height: 4rem; justify-self: center; }
.compteur-restant { font-size: 1.3rem; }
.inventaire-termine { background: var(--succes-fond); color: var(--succes); }
.inventaire-en_cours { background: var(--alerte-fond); color: var(--alerte); }

/* Chèques */
.bandeau-restants { background: var(--erreur); color: #fff; border-radius: var(--rayon); padding: 1rem 1.25rem; margin-bottom: 1rem; }
.bandeau-restants h2 { margin-top: 0; }
.bandeau-restants a { color: #fff; }
.montants-cheque dl { display: grid; grid-template-columns: 1fr auto; gap: .35rem 1.5rem; margin: 0 0 1rem; max-width: 32rem; }
.montants-cheque dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.montants-cheque .principal { font-size: 1.4rem; font-weight: 800; }
.cheque-emis { background: var(--alerte-fond); color: var(--alerte); }
.cheque-remis { background: var(--succes-fond); color: var(--succes); }
.apercu-email { white-space: pre-wrap; font-family: inherit; background: var(--fond); padding: 1rem; border-radius: 8px; }
code { background: var(--fond); padding: 0 .3rem; border-radius: 4px; }

/* Tableau de bord */
.recherche-globale { margin-bottom: 1rem; }
.tableau-de-bord { margin-top: 1.5rem; }
.indicateurs { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); margin-bottom: .75rem; }
.indicateur { background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--rayon); padding: .75rem 1rem; display: grid; gap: .2rem; }
.indicateur span { color: var(--texte-doux); font-size: .9rem; }
.indicateur strong { font-size: 1.7rem; font-variant-numeric: tabular-nums; }
.indicateurs-petits { grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); }
.indicateurs-petits strong { font-size: 1.25rem; }
@keyframes surligne { from { background: #fff1a8; } to { background: transparent; } }
.change { animation: surligne 1.5s ease-out; border-radius: 4px; }
.jeton { font-size: 1.1rem; word-break: break-all; display: inline-block; padding: .5rem; }
.liste-imprimantes { list-style: none; padding: 0; display: grid; gap: .5rem; }
.liste-imprimantes li { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.voyant { width: .8rem; height: .8rem; border-radius: 50%; display: inline-block; }
.voyant-vert { background: var(--succes); }
.voyant-rouge { background: var(--erreur); }
form.en-ligne { display: inline; }
.choix-lot { border: 1px solid var(--bordure); border-radius: 8px; display: grid; gap: .5rem; }
.choix-lot .case { flex-wrap: wrap; }
.champ-court { width: 8rem !important; }

/* Menu latéral des PC de la salle : plein, icônes seules ou masqué (bouton ☰). */
.avec-menu {
  --hauteur-entete: 56px; --largeur-menu: 240px; --largeur-icones: 64px; --principal-doux: #e8eefe;
  padding-top: var(--hauteur-entete); transition: padding-left .2s ease;
}
/* Barre du haut en trois colonnes : le nom de la page reste centré tant que la place le permet. */
.avec-menu .entete {
  position: fixed; inset: 0 0 auto 0; height: var(--hauteur-entete); padding: 0 .75rem;
  display: grid; grid-template-columns: minmax(max-content, 1fr) minmax(0, auto) minmax(max-content, 1fr); gap: .75rem;
}
.avec-menu .entete-gauche { flex-wrap: nowrap; gap: .75rem; }
.avec-menu .entete-titre { white-space: nowrap; }
.avec-menu .pastille { white-space: nowrap; }
.avec-menu .entete-compte { justify-self: end; margin-left: 0; }
.entete-page { margin: 0; font-size: 1.5rem; font-weight: 700; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bouton-menu {
  flex: none; width: 40px; height: 40px; border: 0; border-radius: 8px;
  background: transparent; color: var(--texte); display: grid; place-items: center; cursor: pointer;
}
.bouton-menu svg { width: 22px; height: 22px; }
.bouton-menu:hover { background: var(--principal-doux); }
.bouton-menu:focus-visible, .menu-lateral a:focus-visible { outline: 3px solid #9cc0f5; outline-offset: 1px; }
.menu-lateral {
  position: fixed; top: var(--hauteur-entete); bottom: 0; left: 0; z-index: 9; width: var(--largeur-menu);
  background: var(--surface); border-right: 1px solid var(--bordure); overflow-x: hidden; overflow-y: auto;
  transition: width .2s ease, transform .2s ease;
}
.menu-lateral ul { list-style: none; margin: 0; padding: .5rem; display: grid; gap: .25rem; }
.menu-lateral a {
  display: flex; align-items: center; gap: 14px; height: 44px; padding: 0 12px;
  border-radius: var(--rayon); color: var(--texte); text-decoration: none; white-space: nowrap;
}
.menu-lateral a:hover { background: var(--principal-doux); }
.menu-lateral a[aria-current="page"] { background: var(--principal-doux); color: var(--principal); font-weight: 600; }
.menu-lateral svg { flex: none; width: 22px; height: 22px; }
.menu-separateur { height: 1px; background: var(--bordure); margin: .4rem .25rem; }
.menu-voile { display: none; }
/* Ordinateur : le contenu se décale ; le choix est retenu (cookie « menu »). */
@media (min-width: 701px) {
  .avec-menu[data-menu="plein"] { padding-left: var(--largeur-menu); }
  .avec-menu[data-menu="icones"] { padding-left: var(--largeur-icones); }
  [data-menu="icones"] .menu-lateral { width: var(--largeur-icones); }
  [data-menu="icones"] .menu-libelle { display: none; }
  [data-menu="masque"] .menu-lateral { transform: translateX(-100%); }
}
/* Téléphone : menu fermé à chaque page ; ouvert en plein, il passe par-dessus le contenu. */
@media (max-width: 700px) {
  .avec-menu .entete-nom, .avec-menu .entete-titre, .avec-menu .pastille { display: none; }
  .entete-page { font-size: 1.2rem; }
  .menu-lateral { transform: translateX(-100%); }
  [data-menu-mobile="plein"] .menu-lateral, [data-menu-mobile="icones"] .menu-lateral { transform: none; }
  [data-menu-mobile="plein"] .menu-lateral { box-shadow: 4px 0 20px rgba(0, 0, 0, .15); }
  [data-menu-mobile="plein"] .menu-voile { display: block; position: fixed; inset: var(--hauteur-entete) 0 0 0; z-index: 8; background: rgba(0, 0, 0, .35); }
  .avec-menu[data-menu-mobile="icones"] { padding-left: var(--largeur-icones); }
  [data-menu-mobile="icones"] .menu-lateral { width: var(--largeur-icones); }
  [data-menu-mobile="icones"] .menu-libelle { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .avec-menu, .menu-lateral { transition: none; }
}