/* Factures Odoo (téléphone) : une colonne, gros boutons, fort contraste (lisible au soleil). */
:root {
  --fond: #f2f4f7;
  --carte: #ffffff;
  --texte: #111111;
  --discret: #444b55;
  --bordure: #6b7280;
  --principal: #0b3d91;
  --principal-actif: #082c69;
  --principal-texte: #ffffff;
  --succes: #0f6b2f;
  --erreur: #a3001b;
  --erreur-fond: #fde8eb;
  --avertissement: #8a4b00;
  --avertissement-fond: #fff1db;
  --douteux: #ffb74d;
  --douteux-fond: #fff3e0;
  --rayon: 12px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font: 18px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Noto Sans Arabic", sans-serif;
  padding-bottom: env(safe-area-inset-bottom);
}
main { max-width: 640px; margin: 0 auto; padding: 12px 16px 120px; }

.entete {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: calc(10px + env(safe-area-inset-top)) 16px 10px;
  background: var(--principal); color: var(--principal-texte);
}
.entete h1 { margin: 0; font-size: 1.15rem; }
.entete-droite { display: flex; align-items: center; gap: 10px; min-width: 0; }
.entete .discret { color: #dfe7f7; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 40vw; }
.bouton-lien { background: none; border: 2px solid #fff; color: #fff; border-radius: 8px; padding: 6px 10px; font: inherit; font-size: .9rem; min-height: 40px; }

.carte {
  background: var(--carte); border-radius: var(--rayon); padding: 16px; margin: 0 0 14px;
  box-shadow: 0 1px 2px rgba(0,0,0,.12);
}
.carte h2 { margin: 0 0 10px; font-size: 1.15rem; }

label { display: block; font-weight: 600; margin: 12px 0 4px; }
input[type=text], input[type=url], input[type=password], input[type=search], input[type=date], select {
  width: 100%; min-height: 52px; padding: 10px 12px;
  font: inherit; font-size: 18px; color: var(--texte);
  background: #fff; border: 2px solid var(--bordure); border-radius: 10px;
}
input:focus, select:focus, button:focus-visible, .bouton-fichier:focus-within { outline: 3px solid #f5a300; outline-offset: 1px; }
.douteux { border-color: var(--douteux) !important; background: var(--douteux-fond) !important; }

.bouton-principal, .bouton-secondaire {
  display: flex; align-items: center; justify-content: center; text-align: center;
  width: 100%; min-height: 56px; margin-top: 12px; padding: 10px 14px;
  font: inherit; font-weight: 700; border-radius: 12px; text-decoration: none; cursor: pointer;
}
.bouton-principal { background: var(--principal); color: var(--principal-texte); border: 2px solid var(--principal); }
.bouton-principal:active { background: var(--principal-actif); }
.bouton-principal:disabled { background: #8a97ad; border-color: #8a97ad; }
.bouton-secondaire { background: #fff; color: var(--principal); border: 2px solid var(--principal); }
.bouton-ia { background: #5b2a86; border-color: #5b2a86; }
.deux-boutons { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.deux-boutons > * { margin-top: 12px; }
.bouton-fichier { position: relative; overflow: hidden; font-size: 1rem; }
.bouton-fichier input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }

.choix-mode { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.choix-mode label { margin: 0; }
.choix-mode input { position: absolute; opacity: 0; }
.choix-mode span {
  display: block; text-align: center; padding: 10px 6px; min-height: 64px; border-radius: 12px;
  border: 2px solid var(--principal); background: #fff; color: var(--principal); font-weight: 700;
}
.choix-mode input:checked + span { background: var(--principal); color: #fff; }
.choix-mode input:focus-visible + span { outline: 3px solid #f5a300; }
.choix-mode small { font-weight: 400; }

.aide, .discret { color: var(--discret); font-size: .92rem; margin: 6px 0 0; }
.choisi { font-weight: 700; color: var(--succes); margin: 10px 0 0; }
.choisi.vide { color: var(--discret); font-weight: 400; }
.avis { color: var(--avertissement); font-weight: 600; }
.texte-bloquant { color: var(--erreur); font-weight: 700; }

.recherche { position: relative; }
.suggestions {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 4; margin: 4px 0 0; padding: 0; list-style: none;
  background: #fff; border: 2px solid var(--principal); border-radius: 10px; max-height: 50vh; overflow: auto;
}
.suggestions li { padding: 12px; min-height: 52px; border-bottom: 1px solid #d8dde6; cursor: pointer; }
.suggestions li:last-child { border-bottom: 0; }
.suggestions li[aria-selected=true], .suggestions li:active { background: #e3ebfa; }
.suggestions small { display: block; color: var(--discret); }

.miniatures { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; margin-top: 12px; }
.miniature { position: relative; border: 2px solid var(--bordure); border-radius: 10px; overflow: hidden; background: #eef1f5; aspect-ratio: 3 / 4; }
.miniature img { width: 100%; height: 100%; object-fit: cover; display: block; }
.miniature .pdf { display: flex; align-items: center; justify-content: center; height: 100%; font-weight: 700; }
.miniature button {
  position: absolute; top: 4px; right: 4px; width: 40px; height: 40px; border-radius: 50%;
  border: 2px solid #fff; background: rgba(0,0,0,.75); color: #fff; font-size: 20px; line-height: 1;
}

.ligne { border: 2px solid #c9d0db; border-radius: 12px; padding: 4px 12px 12px; margin-bottom: 12px; }
.ligne.douteux { background: var(--douteux-fond); }
.ligne.ecart-commande { background: var(--douteux-fond); border-left: 4px solid var(--douteux); }
#champ-commande { font-size: .95rem; }
.ligne .trois { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ligne .montant { text-align: right; font-weight: 700; margin: 8px 0 0; }
.ligne .bouton-supprimer { min-height: 48px; margin-top: 8px; border-color: var(--erreur); color: var(--erreur); }

.totaux div { display: flex; justify-content: space-between; padding: 4px 0; font-size: 1.05rem; }
.totaux .total-ttc { border-top: 2px solid var(--texte); margin-top: 6px; padding-top: 8px; font-size: 1.3rem; }

.controles { list-style: none; margin: 0; padding: 0; }
.controles li { padding: 8px 10px; border-radius: 8px; margin-bottom: 6px; }
.controles .ok { background: #e3f4e8; color: var(--succes); font-weight: 600; }
.controles .erreur { background: var(--erreur-fond); color: var(--erreur); font-weight: 600; }
.controles .avertissement { background: var(--avertissement-fond); color: var(--avertissement); }

.case { display: flex; align-items: center; gap: 12px; margin: 0; min-height: 48px; }
.case input { width: 28px; height: 28px; accent-color: var(--principal); }

.barre-action {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; padding: 8px 16px calc(8px + env(safe-area-inset-bottom));
  background: rgba(242,244,247,.97); border-top: 1px solid #c9d0db;
}
.barre-action .bouton-principal { max-width: 608px; margin: 0 auto; }

.bandeau { margin: 0; padding: 12px 16px; font-weight: 600; white-space: pre-line; }
.bandeau-erreur { background: var(--erreur); color: #fff; }
.bandeau-avertissement { background: var(--avertissement-fond); color: var(--avertissement); }
.bandeau-info { background: #e3ebfa; color: var(--principal); }

.resultat { text-align: center; }
.grand-coche { font-size: 3.2rem; color: var(--succes); margin: 0; }
.numero { font-size: 1.7rem; font-weight: 800; margin: 6px 0; word-break: break-all; }

dialog {
  width: min(560px, calc(100vw - 24px)); max-height: calc(100vh - 32px); border: 0; border-radius: 16px; padding: 18px;
  color: var(--texte);
}
dialog::backdrop { background: rgba(0,0,0,.55); }
dialog h2 { margin-top: 0; }
.explication { margin: 4px 0 8px; font-size: .95rem; color: var(--discret); }
.doublon { border: 2px solid #c9d0db; border-radius: 10px; padding: 10px; margin: 8px 0; font-size: .95rem; }
.doublon.bloquant { border-color: var(--erreur); }
.doublon a { display: inline-block; margin-top: 6px; font-weight: 700; color: var(--principal); padding: 8px 0; }

.mode-vente .achat-seulement { display: none; }
.mode-achat .vente-seulement { display: none; }
[hidden] { display: none !important; }

/* Totaux lus sur la facture / recalculés à partir des lignes */
.comparaison table { width: 100%; border-collapse: collapse; margin-top: 10px; font-variant-numeric: tabular-nums; }
.comparaison th, .comparaison td { padding: 6px 4px; border-bottom: 1px solid #d8dde6; text-align: right; }
.comparaison th:first-child, .comparaison td:first-child { text-align: left; }
.comparaison tr.different td { background: var(--douteux-fond); font-weight: 700; }
.comparaison p { margin: 8px 0 0; }
.ajustement { background: #e3ebfa; color: var(--principal); border-radius: 8px; padding: 10px; text-align: left; }

textarea { width: 100%; padding: 10px 12px; font: inherit; font-size: 18px; border: 2px solid var(--bordure); border-radius: 10px; }
#liste-memoires li { background: #f4f6fa; cursor: pointer; min-height: 52px; }
#liste-memoires li small { display: block; color: var(--discret); }

/* ---------------------------------------------------------------- mode cabinet */
.bandeau-client { border-left: 10px solid var(--couleur-client, var(--principal)); }
.bandeau-client p { margin: 0; font-weight: 600; white-space: pre-line; }
.pastille { display: inline-block; margin: 0 0 6px; padding: 4px 10px; border-radius: 999px; font-weight: 700;
  background: var(--couleur-client, var(--principal)); color: #fff; }
.onglets { display: flex; gap: 6px; overflow-x: auto; margin: 0 -16px 12px; padding: 0 16px 4px; scrollbar-width: none; }
.onglets button { flex: 0 0 auto; min-height: 44px; padding: 8px 14px; border-radius: 999px; font: inherit; font-size: .95rem;
  font-weight: 700; border: 2px solid var(--principal); background: #fff; color: var(--principal); }
.onglets button.actif { background: var(--principal); color: #fff; }
.filtres { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.filtres label { margin-top: 0; }
.liste-factures { list-style: none; margin: 0; padding: 0; }
.liste-factures li { background: #fff; border-radius: var(--rayon); margin: 0 0 10px; padding: 12px 12px 12px 16px;
  border-left: 8px solid var(--couleur-client, var(--principal)); box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.liste-factures li.cliquable { cursor: pointer; }
.liste-factures li.cliquable:active { background: #e3ebfa; }
.liste-factures .ligne-titre { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-weight: 700; }
.liste-factures small { display: block; color: var(--discret); margin-top: 2px; }
.etat { flex: 0 0 auto; font-size: .8rem; font-weight: 800; padding: 3px 9px; border-radius: 999px; color: #fff; white-space: nowrap; }
.etat-recue { background: #0b3d91; }
.etat-en_cours { background: #8a4b00; }
.etat-creee { background: var(--succes); }
.etat-rejetee { background: var(--erreur); }
.alerte-http { background: var(--avertissement-fond); color: var(--avertissement); border-left: 8px solid var(--avertissement); font-weight: 600; font-size: .95rem; }
.renvoi { background: var(--erreur-fond); border-left: 6px solid var(--erreur); border-radius: 10px; padding: 10px 12px; margin-bottom: 4px; }
.renvoi p { margin: 0; font-weight: 600; color: var(--erreur); white-space: pre-line; }
.renvoi .bouton-secondaire { min-height: 44px; margin-top: 8px; }
.liste-factures .lien-renvoi { margin-top: 8px; min-height: 48px; }
.motif { color: var(--erreur); font-weight: 600; margin-top: 4px; }
.journal { list-style: none; margin: 0; padding: 0; font-size: .92rem; }
.journal li { padding: 8px 0; border-bottom: 1px solid #d8dde6; white-space: pre-line; }
.journal li strong { display: block; }
.tableau-defilant { overflow-x: auto; margin-top: 10px; }
.tableau { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: .95rem; }
.tableau th, .tableau td { padding: 8px 6px; border-bottom: 1px solid #d8dde6; text-align: right; }
.tableau th:first-child, .tableau td:first-child { text-align: left; }
input[type=color] { width: 100%; height: 52px; border: 2px solid var(--bordure); border-radius: 10px; padding: 4px; background: #fff; }
input[type=month] { width: 100%; min-height: 52px; padding: 10px 12px; font: inherit; border: 2px solid var(--bordure); border-radius: 10px; }
.bouton-supprimer { color: var(--erreur); border-color: var(--erreur); }
.role-saisie .admin-seulement, .role-comptable .admin-seulement { display: none; }
.avis.ok { color: var(--succes); }

/* ---------------------------------------------------------------- abonnement */
.barre-abonnement { position: sticky; top: var(--hauteur-entete, 64px); z-index: 4; margin: -12px -16px 12px; padding: 10px 16px 6px;
  background: #fff; border-bottom: 1px solid #c9d0db; box-shadow: 0 2px 4px rgba(0,0,0,.06); }
.base-active { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pastille-base { display: inline-block; max-width: 100%; margin: 0; padding: 6px 12px; border-radius: 14px; font-weight: 800;
  color: #fff; background: var(--couleur-base, var(--principal)); line-height: 1.25; overflow-wrap: anywhere; }
.base-active .pastille-base { flex: 1 1 auto; min-width: 0; }
.bouton-mini { flex: 0 0 auto; min-height: 40px; padding: 6px 10px; border-radius: 10px; font: inherit; font-size: .9rem;
  font-weight: 700; border: 2px solid var(--principal); background: #fff; color: var(--principal); }
.ligne-quota { margin: 6px 0 4px; font-size: .92rem; font-weight: 600; color: var(--succes); }
.ligne-quota.alerte { color: var(--avertissement); }
.ligne-quota.bloque { color: var(--erreur); }
.message-abonnement { margin: 4px 0; padding: 8px 10px; border-radius: 8px; font-size: .92rem; font-weight: 600;
  background: var(--avertissement-fond); color: var(--avertissement); }
.message-abonnement.bloquant { background: var(--erreur-fond); color: var(--erreur); }
.onglets-modes { display: grid; grid-template-columns: 1fr 1.25fr 1fr; gap: 6px; margin: 6px 0 0; padding: 0 0 2px; overflow: visible; }
.onglets-modes button { padding: 6px 4px; font-size: .88rem; min-width: 0; }
.onglets-modes button:disabled { opacity: .45; border-style: dashed; }
.liste-factures li.base { border-left-color: var(--couleur-client, var(--principal)); }
.liste-factures .actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.liste-factures .actions button { min-height: 44px; margin: 0; font-size: .95rem; }
.etat-attente, .etat-lecture { background: #6b7280; }
.etat-prete { background: var(--succes); }
.etat-verifier { background: #8a4b00; }
.etat-doublon, .etat-erreur, .etat-suspendu, .etat-expire { background: var(--erreur); }
.etat-essai { background: #5b2a86; }
.etat-actif { background: var(--succes); }
.pre { white-space: pre-line; }
.filtres-boutons { display: flex; align-items: flex-end; }
.filtres-boutons button { margin: 0; min-height: 52px; }
#champs-formulaire label:first-child { margin-top: 0; }

/* Première configuration et Réglages IA */
.code-fichier { font-family: ui-monospace, Menlo, Consolas, monospace; background: #eef2f8; border-radius: 8px;
  padding: 8px 10px; overflow-wrap: anywhere; margin: 6px 0; }
.etat-cle { font-weight: 600; margin: 4px 0; }
.etat-cle.ok, #ia-resultat.ok { color: var(--succes); }
.etat-cle.absente, #ia-resultat.echec { color: var(--erreur); }
#ia-resultat { font-weight: 600; min-height: 1.2em; }
#formulaire-installation input, #formulaire-reglages-ia input { width: 100%; }
#ecran-admin .onglets { flex-wrap: wrap; overflow: visible; }

/* Fiche d'accès (identifiant et mot de passe générés) */
.fiche-acces p { margin: 6px 0; display: flex; flex-direction: column; }
.fiche-acces .code-acces { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 1.25rem; letter-spacing: .04em;
  background: #eef2f8; border-radius: 8px; padding: 6px 10px; overflow-wrap: anywhere; user-select: all; }
.fiche-acces button { width: 100%; margin-top: 8px; }
.liste-factures li.base .bouton-mini { margin-top: 8px; align-self: flex-start; }

/* ---------------------------------------------------------------- grand écran (PC) */
@media (min-width: 1100px) {
  main { max-width: 1440px; padding-left: 24px; padding-right: 24px; }
  .ecran:not(#ecran-facture) { max-width: 920px; margin-left: auto; margin-right: auto; }
  /* Deux colonnes : en-tête de la facture à gauche, lignes / totaux / contrôles à droite */
  .colonnes-facture { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 0 20px; align-items: start; }
  .colonne-facture > .carte, .colonne-facture > button { margin-top: 0; }
  .miniatures { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  /* Une ligne de facture sur une seule rangée : désignation | quantité + prix | taxe | montant + supprimer */
  .ligne label { font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 4px; }
  .ligne .montant { font-size: .9rem; }
  .ligne { display: grid; grid-template-columns: minmax(0, 3.4fr) minmax(0, 2.4fr) minmax(0, 1.6fr) minmax(0, 1.2fr);
    column-gap: 12px; align-items: end; padding: 6px 12px 10px; }
  .ligne > label:first-of-type { grid-column: 1; grid-row: 1; }
  .ligne > .l-description { grid-column: 1; grid-row: 2; }
  .ligne > .trois { grid-column: 2; grid-row: 1 / span 2; align-self: end; }
  .ligne > label:nth-of-type(2) { grid-column: 3; grid-row: 1; }
  .ligne > .l-taxe { grid-column: 3; grid-row: 2; }
  .ligne > .montant { grid-column: 4; grid-row: 1; margin: 0; }
  .ligne > .l-article-zone { grid-column: 1 / -1; grid-row: 3; }
  .ligne > .bouton-supprimer { grid-column: 4; grid-row: 2; min-height: 44px; margin: 0; font-size: .85rem; padding: 4px 6px; }
  /* Barre de l'abonnement sur une seule rangée : base active | quota | modes */
  .barre-abonnement { display: grid; grid-template-columns: minmax(0, 1.4fr) auto minmax(0, 1.5fr); column-gap: 16px;
    align-items: center; margin-left: -24px; margin-right: -24px; padding: 8px 24px; }
  .barre-abonnement > .base-active { grid-column: 1; grid-row: 1; }
  .barre-abonnement > .ligne-quota { grid-column: 2; grid-row: 1; margin: 0; }
  .barre-abonnement > .onglets-modes { grid-column: 3; grid-row: 1; margin: 0; }
  .barre-abonnement > .message-abonnement, .barre-abonnement > #mode-indisponible { grid-column: 1 / -1; }
  .barre-action .bouton-principal { max-width: 520px; }
}

.choix-creation { margin-top: 12px; padding-top: 8px; border-top: 1px solid #e3e7ee; }
.l-article-zone select { width: 100%; }