/* ==========================================================================
   Remises Titres-Restaurant — charte « Le Fournil » (La Tradition)
   ========================================================================== */

/* Police de titrage embarquée : aucune dépendance à un service extérieur. */
@font-face {
  font-family: "Playfair Display"; font-style: normal; font-weight: 500;
  src: url("polices/playfair-500-normal.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Playfair Display"; font-style: normal; font-weight: 600;
  src: url("polices/playfair-600-normal.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Playfair Display"; font-style: normal; font-weight: 700;
  src: url("polices/playfair-700-normal.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Playfair Display"; font-style: italic; font-weight: 600;
  src: url("polices/playfair-600-italic.woff2") format("woff2");
  font-display: swap;
}

:root {
  /* Fonds chauds */
  --fond-haut:   #efdcb4;
  --fond-bas:    #fdf8ef;
  --surface:     #fdfbf6;
  --surface-2:   #f8f0e1;
  --tuile:       #f6ecd9;

  /* Traits et textes */
  --bord:        rgba(150, 112, 58, .16);
  --bord-fort:   rgba(150, 112, 58, .32);
  --texte:       #2f2417;
  --texte-doux:  #8a7355;

  /* Or / brun */
  --or:          #a97730;
  --or-fonce:    #8a5d1f;
  --or-clair:    #d9b978;
  --brun:        #3d2c19;

  /* États */
  --ok:          #4c7a45;
  --erreur:      #b3402f;
  --attention:   #a9711c;

  --rayon:       18px;
  --rayon-petit: 12px;
  --ombre:       0 1px 2px rgba(87, 62, 28, .05), 0 8px 24px rgba(87, 62, 28, .07);
  --ombre-forte: 0 12px 40px rgba(87, 62, 28, .16);

  --serif: "Playfair Display", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans:  system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
}

* { box-sizing: border-box; }

html { min-height: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--texte);
  font: 16px/1.55 var(--sans);
  background:
    radial-gradient(90% 70% at 0% 0%,   #eedcb2 0%, rgba(238,220,178,0) 65%),
    radial-gradient(80% 60% at 100% 0%, #f3e5c4 0%, rgba(243,229,196,0) 60%),
    linear-gradient(165deg, #f6e8cb 0%, #fbf3e4 45%, #fdfaf3 100%);
  background-attachment: fixed;
  -webkit-text-size-adjust: 100%;
}

/* Playfair utilise des chiffres « elzéviriens » par défaut : on force les
   chiffres alignés, plus lisibles pour des montants. */
.tg-montant, .ce-montant, .lt-montant, .total-mini,
.tableau .gros, .tableau tfoot th, .entete-ref strong {
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
}

h1, h2, h3, .serif { font-family: var(--serif); font-weight: 600; letter-spacing: -.005em; }
h1 { font-size: 1.75rem; margin: 0 0 .2rem; }
h2 { font-size: 1.25rem; margin: 1.9rem 0 .8rem; }
h3 { font-size: 1rem; margin: 1.3rem 0 .5rem; }
code, .mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .85em; }

/* Titre de section « GESTION ———— » */
.section {
  display: flex; align-items: center; gap: .9rem;
  font-family: var(--sans); font-size: .74rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .19em; color: var(--or-fonce);
  margin: 2rem 0 .9rem;
}
.section::after { content: ""; flex: 1; height: 1px; background: var(--bord); }

/* --------------------------------------------------------- pages simples */
.page-simple {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh; padding: 1.5rem 1rem;
}
.carte-centre {
  background: rgba(253, 251, 246, .82);
  backdrop-filter: blur(6px);
  border: 1px solid var(--bord);
  border-radius: 24px; box-shadow: var(--ombre);
  padding: 2.5rem 2rem; width: 100%; max-width: 430px; text-align: center;
}
.logo-accueil { width: 130px; height: auto; margin: 0 auto .5rem; display: block; }
.logo-accueil-texte {
  font-family: var(--serif); font-size: 2.6rem; letter-spacing: .06em;
  color: var(--brun); line-height: 1;
}
.salutation { font-size: 1.85rem; margin: .8rem 0 .1rem; }
.salutation em { font-style: italic; color: var(--or); }
.sous-titre { color: var(--texte-doux); margin: .1rem 0 1.8rem; font-size: .9rem; }

/* --------------------------------------------------------- barre du haut */
.barre {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  background: rgba(253, 251, 246, .78);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--bord);
  padding: .7rem 1.25rem; position: sticky; top: 0; z-index: 20;
}
.barre-titre { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.barre-titre strong { font-family: var(--serif); font-size: 1.08rem; font-weight: 600; }
.barre-titre small { display: block; color: var(--texte-doux); font-size: .78rem; }
.logo-mini { width: 38px; height: 38px; object-fit: contain; flex: none; }
.logo-lettres {
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 1.1rem; color: var(--brun);
  background: var(--tuile); border-radius: 10px;
}
.barre-nav { display: flex; gap: .25rem; flex-wrap: wrap; align-items: center; }
.barre-nav a {
  color: var(--texte-doux); text-decoration: none; font-size: .88rem;
  padding: .45rem .8rem; border-radius: 999px; transition: background .15s, color .15s;
}
.barre-nav a:hover { background: var(--tuile); color: var(--brun); }
.barre-nav .lien-sortie {
  border: 1px solid var(--bord-fort); color: var(--or-fonce); background: rgba(255,255,255,.6);
}
.barre-nav .lien-sortie:hover { background: var(--tuile); }

/* --------------------------------------------------------- mise en page */
.grille {
  display: grid; grid-template-columns: minmax(0,1.45fr) minmax(300px,1fr);
  gap: 1.1rem; padding: 1.4rem 1.25rem 3rem; align-items: start;
  max-width: 1180px; margin: 0 auto;
}
.grille > * { min-width: 0; }
@media (max-width: 900px) { .grille { grid-template-columns: 1fr; } }

.bloc {
  background: var(--surface); border: 1px solid var(--bord);
  border-radius: var(--rayon); box-shadow: var(--ombre);
  padding: 1.35rem 1.45rem 1.6rem;
}
.bloc > h2:first-child { margin-top: 0; }
.feuille { max-width: 1000px; margin: 0 auto; padding: 1.5rem 1.25rem 4rem; }

/* --------------------------------------------------------- zone de scan */
.zone-scan { display: flex; gap: .6rem; }
#champ-scan {
  flex: 1; min-width: 0; font-size: 1.2rem; padding: .95rem 1rem;
  border: 1.5px solid var(--or-clair); border-radius: 14px;
  font-family: ui-monospace, Menlo, Consolas, monospace; letter-spacing: .02em;
  background: rgba(255, 253, 249, .9); color: var(--texte);
}
#champ-scan::placeholder { color: #bda986; font-family: var(--sans); letter-spacing: 0; }
#champ-scan:focus {
  outline: none; border-color: var(--or);
  box-shadow: 0 0 0 4px rgba(169, 119, 48, .14);
}
.aide { color: var(--texte-doux); font-size: .85rem; margin: .55rem 0 0; }

#zone-video { position: relative; margin: .9rem 0 .6rem; border-radius: 14px; overflow: hidden; background: #1c150c; }
#video { width: 100%; max-height: 55vh; display: block; object-fit: cover; }
.viseur {
  position: absolute; inset: 28% 8%; border: 3px solid rgba(255, 248, 232, .9);
  border-radius: 12px; box-shadow: 0 0 0 9999px rgba(28, 21, 12, .35);
}

/* --------------------------------------------------------- retour visuel */
.retour {
  margin: .9rem 0 0; padding: .75rem 1rem; border-radius: 12px;
  font-weight: 600; font-size: .95rem;
}
.retour:empty { display: none; }
.retour-ok        { background: #eef4e9; color: #3c6236; border: 1px solid #cfe0c6; }
.retour-erreur    { background: #fbeeea; color: #8f3225; border: 1px solid #f0cec5; }
.retour-attention { background: #fbf1de; color: #8a5c15; border: 1px solid #ecd6a6; }
.retour-attente   { background: var(--surface-2); color: var(--texte-doux); border: 1px solid var(--bord); }

/* --------------------------------------------------------- liste titres */
.puce {
  display: inline-block; background: var(--tuile); color: var(--or-fonce);
  border-radius: 999px; padding: .05rem .55rem; font-size: .75rem; font-weight: 700;
  font-family: var(--sans); vertical-align: middle;
}
.liste-titres { list-style: none; margin: 0; padding: 0; max-height: 46vh; overflow-y: auto; }
.liste-titres li {
  display: grid; grid-template-columns: 12px 1fr auto auto 28px;
  align-items: center; gap: .65rem; min-width: 0;
  padding: .55rem .35rem; border-bottom: 1px solid var(--bord); font-size: .92rem;
}
.liste-titres li:last-child { border-bottom: none; }
.liste-titres li.apparait { animation: apparait .28s ease-out; }
@keyframes apparait { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; } }
.pastille { width: 11px; height: 11px; border-radius: 50%; display: inline-block; flex: none; }
.lt-emetteur { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lt-code { color: #b09a76; font-family: ui-monospace, Menlo, monospace; font-size: .78rem; }
.lt-montant { font-weight: 700; font-variant-numeric: tabular-nums; font-family: var(--serif); }
.lt-suppr {
  border: none; background: transparent; color: #d3c3a4; cursor: pointer;
  font-size: 1rem; padding: .1rem .35rem; border-radius: 8px; line-height: 1;
}
.lt-suppr:hover { color: var(--erreur); background: #fbeeea; }

/* --------------------------------------------------------- totaux */
.total-general {
  text-align: center; padding: 1.35rem 1rem;
  background: linear-gradient(150deg, #4a361f 0%, #2f2214 100%);
  color: #f7ecd6; border-radius: 16px; margin-bottom: 1.1rem;
  box-shadow: inset 0 1px 0 rgba(255, 235, 200, .12);
}
.tg-montant {
  font-family: var(--serif); font-size: 2.35rem; font-weight: 600;
  font-variant-numeric: tabular-nums; letter-spacing: -.01em; color: #f5e2bd;
}
.tg-nb { opacity: .72; font-size: .88rem; letter-spacing: .04em; }

.cartes-emetteurs { display: grid; gap: .65rem; margin-bottom: 1.25rem; }
@media (min-width: 901px) { .bloc-totaux .cartes-emetteurs { grid-template-columns: 1fr; } }
.feuille .cartes-emetteurs { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.carte-emetteur {
  border: 1px solid var(--bord); border-left: 4px solid var(--c, #c7b391);
  border-radius: var(--rayon-petit); padding: .75rem .95rem;
  background: rgba(255, 253, 248, .85);
}
.ce-nom { font-size: .84rem; color: var(--texte-doux); }
.ce-montant {
  font-family: var(--serif); font-size: 1.4rem; font-weight: 600;
  font-variant-numeric: tabular-nums; color: var(--brun);
}
.ce-nb { font-size: .8rem; color: var(--texte-doux); }

/* --------------------------------------------------------- boutons */
.bouton {
  display: inline-block; border: 1px solid transparent; border-radius: 999px;
  padding: .65rem 1.25rem; font-size: .93rem; font-weight: 600; cursor: pointer;
  text-decoration: none; text-align: center; font-family: var(--sans);
  transition: background .15s, box-shadow .15s, transform .08s;
}
.bouton:active { transform: translateY(1px); }
.bouton-principal {
  background: linear-gradient(160deg, var(--or) 0%, var(--or-fonce) 100%);
  color: #fffaf0; box-shadow: 0 2px 10px rgba(138, 93, 31, .25);
}
.bouton-principal:hover { background: var(--or-fonce); }
.bouton-secondaire {
  background: rgba(255, 253, 248, .9); color: var(--brun); border-color: var(--bord-fort);
}
.bouton-secondaire:hover { background: var(--tuile); }
.bouton-danger { color: var(--erreur); border-color: #eccec6; background: #fff; }
.bouton-danger:hover { background: #fbeeea; }
.bouton-large { width: 100%; padding: .9rem 1rem; }
.bouton-mini { padding: .3rem .75rem; font-size: .8rem; font-weight: 500; }

/* --------------------------------------------------------- formulaires */
.champ { display: block; text-align: left; margin-bottom: 1rem; }
.champ > span {
  display: block; font-size: .78rem; color: var(--or-fonce); margin-bottom: .3rem;
  text-transform: uppercase; letter-spacing: .1em; font-weight: 600;
}
.champ input, .champ select {
  width: 100%; padding: .7rem .85rem; border: 1px solid var(--bord-fort);
  border-radius: 12px; font-size: 1rem; font-family: inherit;
  background: rgba(255, 253, 249, .9); color: var(--texte);
}
.champ input:focus, .champ select:focus {
  outline: none; border-color: var(--or); box-shadow: 0 0 0 4px rgba(169, 119, 48, .13);
}
.case {
  display: flex; gap: .6rem; align-items: flex-start; text-align: left;
  font-size: .86rem; color: var(--texte-doux); margin-bottom: .6rem;
}
.case input { margin-top: .25rem; flex: none; accent-color: var(--or); }
.ligne-formulaire { display: flex; gap: .5rem; flex-wrap: wrap; margin: .85rem 0 0; }
.ligne-formulaire input[type=text], .ligne-formulaire input[type=password] {
  flex: 1; min-width: 200px; padding: .65rem .85rem;
  border: 1px solid var(--bord-fort); border-radius: 12px; font-size: .95rem;
  font-family: inherit; background: rgba(255,253,249,.9);
}
.ligne-formulaire input[type=color] {
  width: 48px; height: 42px; border: 1px solid var(--bord-fort);
  border-radius: 12px; background: #fff; padding: 3px;
}
.ligne-actions { margin: .6rem 0 1.1rem; }

.raccourcis-montant { display: flex; flex-wrap: wrap; gap: .4rem; margin: -.5rem 0 1rem; }
.puce-montant {
  border: 1px solid var(--bord-fort); background: var(--surface-2); border-radius: 999px;
  padding: .35rem .8rem; font-size: .83rem; cursor: pointer; font-family: var(--sans);
  color: var(--brun);
}
.puce-montant:hover { background: var(--or-clair); border-color: var(--or); }

/* --------------------------------------------------------- modale */
.modale {
  position: fixed; inset: 0; background: rgba(47, 36, 23, .5);
  backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; padding: 1rem; z-index: 50;
}
.modale[hidden] { display: none; }
.modale-boite {
  background: var(--surface); border: 1px solid var(--bord); border-radius: 22px;
  padding: 1.7rem; width: 100%; max-width: 470px; max-height: 92vh; overflow-y: auto;
  box-shadow: var(--ombre-forte);
}
.modale-boite h2 { margin-top: 0; }
.modale-code { font-size: .85rem; color: var(--texte-doux); word-break: break-all; }
.modale-code code { color: var(--or-fonce); }
.modale-actions { display: flex; gap: .5rem; justify-content: flex-end; margin-top: 1.1rem; }

/* --------------------------------------------------------- alertes */
.alerte { padding: .8rem 1rem; border-radius: 12px; font-size: .9rem; margin: .8rem 0; }
.alerte-ok        { background: #eef4e9; color: #3c6236; border: 1px solid #cfe0c6; }
.alerte-erreur    { background: #fbeeea; color: #8f3225; border: 1px solid #f0cec5; }
.alerte-attention { background: #fbf1de; color: #8a5c15; border: 1px solid #ecd6a6; }
.liste-ok { text-align: left; font-size: .9rem; color: var(--texte-doux); }

/* --------------------------------------------------------- tableaux */
.tableau {
  width: 100%; border-collapse: collapse; background: var(--surface);
  border: 1px solid var(--bord); border-radius: var(--rayon); overflow: hidden;
  font-size: .9rem; margin-bottom: 1.1rem; box-shadow: var(--ombre);
}
.tableau th, .tableau td { padding: .68rem .85rem; text-align: left; border-bottom: 1px solid var(--bord); }
.tableau thead th {
  background: var(--surface-2); font-size: .72rem; text-transform: uppercase;
  letter-spacing: .13em; color: var(--or-fonce); font-weight: 700;
}
.tableau tfoot th { background: var(--surface-2); font-weight: 700; font-family: var(--serif); }
.tableau .num { text-align: right; font-variant-numeric: tabular-nums; }
.tableau .gros { font-size: 1.05rem; font-weight: 700; font-family: var(--serif); }
.tableau tbody tr:last-child td { border-bottom: none; }
.tableau tbody tr:hover { background: rgba(246, 236, 217, .45); }
.tableau form { margin: 0; }

.badge { display: inline-block; padding: .18rem .6rem; border-radius: 999px; font-size: .74rem; font-weight: 700; }
.badge-ouverte  { background: #efe0bf; color: #7a5613; }
.badge-cloturee { background: var(--surface-2); color: var(--texte-doux); }

/* --------------------------------------------------------- bordereau */
.entete-doc {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 1.5rem; border-bottom: 2px solid var(--brun);
  padding-bottom: .9rem; margin-bottom: 1.2rem;
}
.entete-doc .logo-doc { width: 96px; height: auto; }
.entete-ref { text-align: right; font-size: .9rem; color: var(--texte-doux); }
.entete-ref strong { font-family: var(--serif); font-size: 1.05rem; color: var(--texte); }
.titre-groupe { color: var(--brun); font-size: 1.05rem; margin-top: 1.7rem; }
.signature { margin-top: 2.5rem; font-size: .9rem; color: var(--texte-doux); }

/* --------------------------------------------------------- total mobile */
.total-mini { display: none; }
@media (max-width: 900px) {
  .total-mini {
    display: inline-block; margin-left: auto; white-space: nowrap;
    background: linear-gradient(150deg, #4a361f, #2f2214); color: #f5e2bd;
    font-family: var(--serif); font-weight: 600;
    padding: .35rem .85rem; border-radius: 999px; font-size: 1rem;
    font-variant-numeric: tabular-nums;
  }
  .barre { gap: .5rem; padding: .55rem .85rem; }
  .barre-titre { flex: 1 1 auto; min-width: 0; }
  .barre-titre > div { min-width: 0; }
  .barre-titre strong {
    display: block; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; font-size: .98rem;
  }
  .barre-titre small { display: none; }
  .logo-mini { width: 32px; height: 32px; }
  .barre-nav { order: 3; width: 100%; border-top: 1px solid var(--bord); padding-top: .4rem; }
  .barre-nav a { padding: .35rem .65rem; }
  .grille { padding: 1rem .85rem 3rem; }
  .bloc { padding: 1.1rem 1.1rem 1.3rem; }
}

/* --------------------------------------------------------- impression */
@media print {
  body { background: #fff; }
  .sans-impression, .barre { display: none !important; }
  .feuille { max-width: none; padding: 0; }
  .tableau { box-shadow: none; border: 1px solid #999; }
  .tableau thead th { background: #f2f2f2; color: #333; }
  .saut-page { page-break-before: always; }
  .tableau-detail { font-size: .78rem; }
  a { color: inherit; text-decoration: none; }
}