/* VDW, justificatifs : feuille de style unique, écrite à la main, embarquée dans le binaire.
   Jetons et composants repris des maquettes (docs/maquettes/index.html), sans le cadre téléphone. */

/* ===== Polices (auto-hébergées, licence OFL : voir fonts/OFL.txt) ===== */
@font-face { font-family: "Barlow"; font-weight: 400; font-style: normal; font-display: swap; src: url("/static/fonts/barlow-400.woff2?v=392281838c94") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 500; font-style: normal; font-display: swap; src: url("/static/fonts/barlow-500.woff2?v=392281838c94") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 600; font-style: normal; font-display: swap; src: url("/static/fonts/barlow-600.woff2?v=392281838c94") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 700; font-style: normal; font-display: swap; src: url("/static/fonts/barlow-700.woff2?v=392281838c94") format("woff2"); }
@font-face { font-family: "Barlow Semi Condensed"; font-weight: 600; font-style: normal; font-display: swap; src: url("/static/fonts/barlow-semi-condensed-600.woff2?v=392281838c94") format("woff2"); }
@font-face { font-family: "Barlow Semi Condensed"; font-weight: 700; font-style: normal; font-display: swap; src: url("/static/fonts/barlow-semi-condensed-700.woff2?v=392281838c94") format("woff2"); }

/* ===== Jetons ===== */
:root {
  --vert: #1F3A2E;        /* vert écurie : carte A, VDW */
  --vert-clair: #2C5241;
  --bleu: #22385E;        /* bleu de concours : carte B, filiale */
  --laiton: #C2A15A;      /* piqûre du tapis de selle, détails */
  --chaux: #F1F3EF;       /* fond */
  --papier: #FFFFFF;      /* surfaces */
  --encre: #18201B;       /* texte */
  --gris: #5B655F;        /* texte secondaire */
  --trait: #D8DDD6;
  --paille: #9A6A00;      /* à vérifier : texte */
  --paille-fond: #FBF0D2;
  --paille-bord: #E2B648;
  --ok: #24693F;
  --ok-fond: #E2F0E6;
  --ardoise: #4A5560;     /* exportée */
  --ardoise-fond: #E6E9EC;
  --rouge: #A52A1F;
  --rouge-fond: #F8E3E0;
  --actif: var(--vert);   /* onglet actif des barres de navigation */
  --r-s: 6px; --r-m: 12px;
  --texte: "Barlow", system-ui, sans-serif;
  --chiffres: "Barlow Semi Condensed", "Barlow", system-ui, sans-serif;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --chaux: #101512; --papier: #1A211D; --encre: #E6EAE6; --gris: #9DA8A1; --trait: #2E3833;
    --paille: #F0C75E; --paille-fond: #3A2F12; --paille-bord: #8C6B1A;
    --ok: #7CC796; --ok-fond: #183324; --ardoise: #B5C0CA; --ardoise-fond: #262E35;
    --rouge: #F08A7E; --rouge-fond: #3A1B17;
    --actif: #9CCFB2;
  }
}
:root[data-theme="dark"] {
  --chaux: #101512; --papier: #1A211D; --encre: #E6EAE6; --gris: #9DA8A1; --trait: #2E3833;
  --paille: #F0C75E; --paille-fond: #3A2F12; --paille-bord: #8C6B1A;
  --ok: #7CC796; --ok-fond: #183324; --ardoise: #B5C0CA; --ardoise-fond: #262E35;
  --rouge: #F08A7E; --rouge-fond: #3A1B17;
  --actif: #9CCFB2;
}

/* ===== Base ===== */
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: var(--texte); color: var(--encre); background: var(--chaux);
  font-size: 16px; line-height: 1.45; -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { line-height: 1.2; }
a { color: inherit; }
.num { font-family: var(--chiffres); font-variant-numeric: tabular-nums; }
:focus-visible { outline: 3px solid var(--laiton); outline-offset: 2px; }

/* ===== Écran : colonne pleine hauteur, contenu qui défile, barre basse ===== */
.ecran {
  min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column;
  background: var(--chaux);
}
.defile { flex: 1; min-width: 0; padding: max(12px, env(safe-area-inset-top)) 16px 24px; }
.defile > h1, .defile > h2 { font-size: 24px; margin: 8px 0 4px; }
.defile > p.sous { margin: 0 0 20px; color: var(--gris); }

/* Barre basse (porteur : Accueil / Photo / Mois ; admin : 4 entrées) */
.barre {
  position: sticky; bottom: 0; z-index: 5; flex: none; display: grid;
  grid-template-columns: 1fr 96px 1fr; align-items: center;
  background: var(--papier); border-top: 1px solid var(--trait);
  padding: 6px 12px max(10px, env(safe-area-inset-bottom));
}
.barre a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 44px; font-size: 16px; color: var(--gris); text-decoration: none;
}
.barre a.actif { color: var(--actif); font-weight: 600; }
.barre svg { width: 24px; height: 24px; }
.btn-photo {
  justify-self: center; width: 72px; height: 72px; margin-top: -30px; border-radius: 50%;
  background: var(--vert); color: #fff; display: grid; place-items: center; text-decoration: none;
  box-shadow: 0 0 0 5px var(--papier), 0 8px 18px -6px rgba(31, 58, 46, .6);
  border: 0;
}
.barre a.btn-photo { min-height: 72px; color: #fff; }
.btn-photo svg { width: 32px; height: 32px; }
.barre.admin { grid-template-columns: repeat(4, 1fr); padding-top: 8px; }
.barre.admin a { font-size: 16px; }

/* Barre latérale (admin, 1024 px et plus) */
.lateral {
  display: none; background: var(--vert); color: #fff; padding: 22px 14px;
  flex-direction: column; gap: 4px;
}
.lateral .marque { display: flex; align-items: center; gap: 10px; padding: 0 8px 22px; font-weight: 700; font-size: 18px; }
.lateral .marque span { width: 46px; height: 46px; border-radius: 50%; border: 1.5px dashed var(--laiton); display: grid; place-items: center; font: 700 16px var(--chiffres); }
.lateral a { color: rgba(255,255,255,.86); text-decoration: none; padding: 10px 12px; min-height: 44px; border-radius: var(--r-s); display: flex; align-items: center; justify-content: space-between; font-weight: 500; }
.lateral a.actif { background: rgba(255,255,255,.12); color: #fff; font-weight: 600; }
.lateral a .pastille { background: var(--laiton); color: var(--vert); font: 700 16px/20px var(--chiffres); border-radius: 99px; padding: 0 7px; }
.lateral .bas { margin-top: auto; font-size: 16px; color: rgba(255,255,255,.8); padding: 0 12px; display: grid; gap: 8px; }
.lateral .bas form { margin: 0; }
.lateral .lien-bouton { color: #fff; }

@media (min-width: 1024px) {
  .ecran.admin { display: grid; grid-template-columns: 232px minmax(0, 1fr); }
  .ecran.admin .lateral { display: flex; position: sticky; top: 0; height: 100vh; height: 100dvh; }
  .ecran.admin .barre { display: none; }
  .ecran.admin .defile { padding: 26px 32px; }
}

/* Mode démo : changement de profil en un tap */
.bandeau-demo {
  display: flex; align-items: center; gap: 6px; margin: 0 0 14px; padding: 4px;
  background: var(--papier); border: 1.5px dashed var(--laiton); border-radius: var(--r-m);
}
.bandeau-demo span { padding: 0 6px; font-weight: 600; color: var(--gris); }
.bandeau-demo button {
  flex: 1; min-height: 44px; border: 0; border-radius: var(--r-s); background: none;
  font: 500 16px var(--texte); color: var(--encre); cursor: pointer;
}
.bandeau-demo button[aria-current] { background: var(--vert); color: #fff; font-weight: 600; cursor: default; }

/* Bouton d'action discret (déconnexion…) */
.lien-bouton {
  font: 500 16px var(--texte); background: none; border: 0; padding: 0; min-height: 44px;
  color: var(--gris); text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}

/* ===== Tapis de selle : seul élément « signature » ===== */
.tapis {
  position: relative; color: #fff; background: var(--vert); border-radius: 4px 4px 22px 22px;
  padding: 18px 20px 22px; margin: 4px 0 18px;
}
.tapis.b { background: var(--bleu); }
.tapis::before {
  content: ""; position: absolute; inset: 7px; border: 1.5px dashed var(--laiton);
  border-radius: 2px 2px 16px 16px; opacity: .85; pointer-events: none;
}
.tapis .qui { display: flex; justify-content: space-between; font-size: 16px; opacity: .9; }
.tapis .montant { font: 700 46px/1.05 var(--chiffres); letter-spacing: -.01em; margin: 14px 0 2px; }
.tapis .montant small { font-size: 26px; font-weight: 600; opacity: .85; }
.tapis .sous { font-size: 16px; opacity: .85; }

/* ===== Bandeaux ===== */
.bandeau {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-m);
  background: var(--paille-fond); color: var(--encre); border: 1px solid var(--paille-bord);
  margin-bottom: 18px; text-decoration: none; min-height: 44px;
}
.bandeau b { color: var(--paille); }
.bandeau .fleche { margin-left: auto; color: var(--paille); font-weight: 700; }
.bandeau.hors-ligne { background: var(--ardoise-fond); border-color: var(--trait); }
.bandeau.ok { background: var(--ok-fond); border-color: var(--ok); color: var(--ok); font-weight: 500; }
.bandeau.erreur { background: var(--rouge-fond); border-color: var(--rouge); color: var(--rouge); font-weight: 500; }

/* ===== Listes de dépenses ===== */
.titre-liste { display: flex; justify-content: space-between; align-items: baseline; margin: 6px 2px 8px; }
.titre-liste h3 { margin: 0; font-size: 17px; }
.titre-liste a { color: var(--gris); font-size: 16px; }
.liste { list-style: none; margin: 0; padding: 0; background: var(--papier); border-radius: var(--r-m); border: 1px solid var(--trait); }
.liste li { display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center; padding: 11px 14px; min-height: 64px; }
.liste li + li { border-top: 1px solid var(--trait); }
.vignette { width: 44px; height: 52px; border-radius: 4px; background: repeating-linear-gradient(180deg, #fff 0 5px, #e9ece8 5px 6px); border: 1px solid var(--trait); }
.vignette.attente { background: var(--chaux); display: grid; place-items: center; color: var(--gris); }
.liste .f { font-weight: 600; font-size: 16px; line-height: 1.2; }
.liste .m { font-size: 16px; color: var(--gris); }
.liste .t { text-align: right; font: 600 18px var(--chiffres); font-variant-numeric: tabular-nums; }
.etat { display: inline-block; font: 600 16px/1 var(--texte); padding: 4px 9px; border-radius: 99px; margin-top: 4px; }
.etat.verif { background: var(--paille-fond); color: var(--paille); }
.etat.ok { background: var(--ok-fond); color: var(--ok); }
.etat.exp { background: var(--ardoise-fond); color: var(--ardoise); }
.etat.lecture { background: var(--chaux); color: var(--gris); border: 1px dashed var(--trait); }

/* ===== Boutons ===== */
.btn {
  font: 600 17px var(--texte); border-radius: var(--r-m); min-height: 52px; border: 0;
  display: flex; align-items: center; justify-content: center; gap: 10px; padding: 0 18px;
  width: 100%; cursor: pointer; text-decoration: none;
}
.btn.clair { background: #fff; color: var(--vert); }
.btn.lien { background: transparent; color: #fff; text-decoration: underline; text-underline-offset: 3px; font-weight: 500; }
.btn.plein { background: var(--vert); color: #fff; }
.btn.contour { background: var(--papier); color: var(--encre); border: 1.5px solid var(--trait); }
.btn svg { width: 24px; height: 24px; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .btn.plein { background: var(--vert-clair); }
}
:root[data-theme="dark"] .btn.plein { background: var(--vert-clair); }

/* ===== Formulaires ===== */
.champs { display: grid; gap: 14px; }
.champ label { display: block; font-size: 16px; font-weight: 600; color: var(--gris); margin-bottom: 4px; }
.champ input, .champ select {
  display: block; width: 100%; min-height: 48px; padding: 10px 12px; font: 17px var(--texte);
  color: var(--encre); background: var(--papier); border: 1.5px solid var(--trait); border-radius: var(--r-s);
}
.champ .aide { font-size: 16px; color: var(--gris); margin-top: 4px; }
.champ .valeur { background: var(--papier); border: 1.5px solid var(--trait); border-radius: var(--r-s); min-height: 48px; padding: 11px 12px; font-size: 17px; }
.champ .valeur.gros { font: 600 24px var(--chiffres); padding: 7px 12px; }
.champ.incertain .valeur { border-color: var(--paille-bord); background: var(--paille-fond); }
.deux { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* ===== En-têtes ===== */
.entete { display: flex; align-items: center; gap: 10px; padding: 4px 0 12px; }
.entete h2 { margin: 0; font-size: 20px; }
.entete .retour { width: 44px; height: 44px; display: grid; place-items: center; margin-left: -12px; color: var(--encre); text-decoration: none; }
.entete .droite { margin-left: auto; color: var(--gris); font-size: 16px; }

/* ===== Écran de connexion ===== */
.ecran.connexion { background: var(--vert); color: #fff; }
.connexion .corps { flex: 1; display: flex; flex-direction: column; width: 100%; max-width: 440px; margin: 0 auto; padding: 0 28px max(32px, env(safe-area-inset-bottom)); }
.monogramme {
  margin: max(56px, 12vh) auto 0; width: 104px; height: 104px; border-radius: 50%; border: 1.5px dashed var(--laiton);
  display: grid; place-items: center; font: 700 34px var(--chiffres); letter-spacing: .04em;
}
.connexion h1 { text-align: center; font-size: 24px; margin: 22px 0 6px; }
.connexion p.intro { text-align: center; opacity: .85; margin: 0 0 24px; }
.connexion .champ label { color: #fff; opacity: .92; }
.connexion .champ input { border-color: transparent; color: #18201B; background: #fff; }
.connexion .actions { margin-top: 24px; display: grid; gap: 12px; }
.connexion .bandeau { margin-bottom: 16px; }
.connexion .passkey-actions { margin: 0 0 24px; }
.connexion .passkey-actions .btn.lien { min-height: 44px; }
.connexion .actions + .champs { margin-top: 8px; }

/* ===== Panneaux et tableaux (admin) ===== */
.panneau { background: var(--papier); border: 1px solid var(--trait); border-radius: var(--r-m); }
.panneau h2, .panneau h3 { margin: 0; padding: 14px 18px; font-size: 16px; border-bottom: 1px solid var(--trait); display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.panneau h2 a, .panneau h3 a { font-weight: 500; color: var(--gris); font-size: 16px; }
.panneau.formulaire { padding: 18px; }
table { border-collapse: collapse; width: 100%; font-size: 16px; }
th { text-align: left; font-size: 16px; color: var(--gris); font-weight: 600; padding: 9px 14px; border-bottom: 1px solid var(--trait); background: var(--papier); }
td { padding: 10px 14px; border-bottom: 1px solid var(--trait); white-space: nowrap; }
td.mt, th.mt { text-align: right; font-family: var(--chiffres); font-variant-numeric: tabular-nums; font-size: 16px; }
.puce { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 16px; }
.puce::before { content: ""; width: 10px; height: 10px; border-radius: 2px 2px 5px 5px; background: var(--vert); }
.puce.b::before { background: var(--bleu); }

/* ===== Paramètres de l'admin : onglets, grille tableau + formulaire, tableaux qui s'empilent ===== */
.sr { font-size: 16px; position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.discret { color: var(--gris); }
.onglets { display: flex; gap: 4px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; border-bottom: 1px solid var(--trait); margin: 12px 0 18px; }
.onglets a {
  flex: none; display: flex; align-items: center; min-height: 44px; padding: 0 14px; color: var(--gris);
  text-decoration: none; font-weight: 500; border-bottom: 3px solid transparent; margin-bottom: -1px;
}
.onglets a.actif { color: var(--actif); border-bottom-color: var(--actif); font-weight: 600; }
.grille-parametres { display: grid; gap: 20px; align-items: start; }
.en-edition > #formulaire { order: -1; }
.panneau .corps { padding: 18px; }
.panneau .vide, .panneau .vide-form, .panneau .note { margin: 0; padding: 16px 18px; color: var(--gris); }
.panneau .corps .vide-form { padding: 0; }
.panneau .note { border-top: 1px solid var(--trait); font-size: 16px; }
.panneau .etiquette, .champ .etiquette { display: block; font-size: 16px; font-weight: 600; color: var(--gris); margin: 0 0 4px; }
.table-defile { overflow-x: auto; }
table.empilee th, table.empilee td { padding-left: 10px; padding-right: 10px; }
table.empilee td { white-space: normal; }
table.empilee td.num, table.empilee td.mt { white-space: nowrap; }
tr.inactive td { color: var(--gris); }
td.actions { white-space: normal; min-width: 150px; }
td.actions > * { margin: 2px 6px 2px 0; }
td.actions form { display: inline-block; margin-top: 2px; margin-bottom: 2px; }
.btn-ligne {
  font: 600 16px var(--texte); min-height: 44px; padding: 0 14px; border-radius: var(--r-s);
  border: 1.5px solid var(--trait); background: var(--papier); color: var(--encre);
  display: inline-flex; align-items: center; cursor: pointer; text-decoration: none; white-space: nowrap;
}
.btn-ligne.danger { color: var(--rouge); border-color: var(--rouge); }
details.confirmer { display: inline-block; vertical-align: top; }
details.confirmer summary { list-style: none; }
details.confirmer summary::-webkit-details-marker { display: none; }
details.confirmer[open] { display: block; flex-basis: 100%; }
details.confirmer form { padding: 8px 0; }
details.confirmer p { margin: 0 0 8px; max-width: 34ch; white-space: normal; }
.filtres { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; align-items: center; }
.filtre { background: var(--papier); border: 1px solid var(--trait); border-radius: var(--r-s); padding: 0 12px; font-size: 16px; min-height: 44px; display: flex; align-items: center; gap: 8px; }
.filtres input[type="search"] {
  flex: 1; min-width: 0; min-height: 40px; border: 0; background: transparent; color: var(--encre);
  font: 16px var(--texte);
}
.filtre.recherche { flex: 1; min-width: 200px; max-width: 420px; }
.mdp-temporaire {
  display: inline-block; font: 700 28px ui-monospace, Consolas, monospace; letter-spacing: .08em;
  background: var(--chaux); border: 1.5px dashed var(--laiton); border-radius: var(--r-s);
  padding: 10px 16px; user-select: all; overflow-wrap: anywhere;
}
.resultat .btn { max-width: 320px; }
@media (min-width: 1024px) {
  .grille-parametres { grid-template-columns: minmax(0, 1fr) 340px; }
  .en-edition > #formulaire { order: 0; }
}
@media (max-width: 719px) {
  table.empilee thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  table.empilee, table.empilee tbody, table.empilee tr, table.empilee td { display: block; }
  table.empilee tr { padding: 10px 14px; border-bottom: 1px solid var(--trait); }
  table.empilee tr:last-child { border-bottom: 0; }
  table.empilee td {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    border: 0; padding: 3px 0; white-space: normal; font-size: 16px; text-align: right;
  }
  table.empilee td::before { content: attr(data-label); color: var(--gris); font-weight: 600; text-align: left; }
  table.empilee td.actions { display: flex; flex-wrap: wrap; justify-content: flex-start; padding-top: 8px; }
  table.empilee td.actions::before { content: none; }
  table.empilee td:empty { display: none; }
}

/* Page d'erreur simple */
.page-erreur { max-width: 36rem; margin: 15vh auto 0; padding: 0 16px; }
.page-erreur a { color: var(--actif); }

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }

/* ===== Écrans du porteur (accueil, à vérifier, vérification, détail, mois) ===== */
.defile > h1.salut { font-size: 17px; font-weight: 500; color: var(--gris); margin: 4px 0 10px; }
.entete h1 { margin: 0; font-size: 20px; }
.entete .etat { margin-top: 0; }
.entete .droite.etat { font-size: 16px; }
.compte { margin: 22px 0 0; }
.compte a { display: inline-flex; align-items: center; min-height: 44px; color: var(--gris); }
.vide-accueil { text-align: center; padding: 22px 8px; }
.vide-accueil p { margin: 0 0 16px; color: var(--gris); font-size: 17px; }
.vide-accueil .btn { max-width: 320px; margin: 0 auto; }
.aide-liste { margin: 8px 2px; color: var(--gris); font-size: 16px; }
.titre-liste h2 { margin: 0; font-size: 17px; }

/* Liste : toute la ligne est un lien */
.liste li.lien { display: block; padding: 0; }
.liste li.lien > a {
  display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center;
  padding: 11px 14px; min-height: 64px; color: inherit; text-decoration: none;
}
.liste li.lien > a:active { background: var(--chaux); }
.vignette.a4 { background-image: linear-gradient(180deg, transparent 10px, #dfe3de 10px 12px, transparent 12px 18px, #dfe3de 18px 19px, transparent 19px 24px, #dfe3de 24px 25px, transparent 25px); background-color: #fff; }

/* Photo du justificatif : une page par vue, défilement horizontal s'il y en a plusieurs */
.photo-verif {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -16px 14px;
  background: #2a2f2c; -webkit-overflow-scrolling: touch;
}
.photo-verif .page {
  flex: 0 0 100%; scroll-snap-align: center; position: relative; display: grid; place-items: center;
  height: 230px; color: #fff; text-decoration: none;
}
.photo-verif img {
  max-width: 100%; max-height: 100%; object-fit: contain;
  touch-action: pan-x pan-y pinch-zoom; /* le pincement zoome, le doigt fait toujours défiler la page */
}
.photo-verif .pdf { font-size: 18px; }
.photo-verif .zoom {
  position: absolute; right: 12px; bottom: 10px; color: #fff; font-size: 16px;
  background: rgba(0, 0, 0, .55); padding: 4px 9px; border-radius: 99px;
}
.photo-verif .aucune-photo { color: #fff; margin: 0; align-self: center; padding: 0 16px; }

/* Formulaire de relecture */
.champ textarea {
  display: block; width: 100%; min-height: 72px; padding: 10px 12px; font: 17px var(--texte);
  color: var(--encre); background: var(--papier); border: 1.5px solid var(--trait); border-radius: var(--r-s);
  resize: vertical;
}
.champ input.gros { font: 600 24px var(--chiffres); min-height: 56px; }
.champ input[type="file"] { padding: 12px; }
.champ.incertain input, .champ.incertain select { border-color: var(--paille-bord); background: var(--paille-fond); }
.champ.incertain .aide { color: var(--paille); font-weight: 500; }
.tva-bloc {
  display: grid; gap: 8px; background: var(--papier); border: 1px solid var(--trait);
  border-radius: var(--r-s); padding: 10px 12px;
}
.champ.incertain .tva-bloc { border-color: var(--paille-bord); background: var(--paille-fond); }
.tva-bloc .aide-liste { margin: 0; }
.tva-ligne { display: grid; grid-template-columns: 84px minmax(0, 1fr) minmax(0, 1fr) 44px; gap: 6px; align-items: center; }
.tva-ligne select, .tva-ligne input { min-height: 44px; padding: 8px; font-size: 16px; min-width: 0; }
.tva-entete { font-size: 16px; color: var(--gris); }
.tva-entete span:last-child { width: 44px; }
.retirer {
  width: 44px; height: 44px; border: 1.5px solid var(--trait); background: var(--papier);
  color: var(--rouge); border-radius: var(--r-s); font-size: 22px; line-height: 1; cursor: pointer;
}
.tva-note { margin: 0; font-size: 16px; color: var(--paille); }
.tva-note.ok { color: var(--ok); }
.btn.petit { min-height: 44px; font-size: 16px; }
.btn.danger { background: var(--papier); color: var(--rouge); border: 1.5px solid var(--rouge); }
details.confirmer { margin: 22px 0 8px; display: block; }
details.confirmer form p { max-width: none; }

/* Barre d'actions collée en bas pendant la relecture */
.pied {
  position: sticky; bottom: 0; z-index: 5; flex: none; display: grid; grid-template-columns: 1fr 2fr; gap: 10px;
  padding: 12px 16px max(14px, env(safe-area-inset-bottom)); background: var(--papier); border-top: 1px solid var(--trait);
}

/* Détail en lecture seule et historique */
.fiche { margin: 0 0 18px; background: var(--papier); border: 1px solid var(--trait); border-radius: var(--r-m); }
.fiche > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 11px 14px; }
.fiche > div + div { border-top: 1px solid var(--trait); }
.fiche dt { color: var(--gris); font-size: 16px; flex: none; }
.fiche dd { margin: 0; text-align: right; overflow-wrap: anywhere; }
.fiche dd.gros { font: 600 22px var(--chiffres); }
.historique { margin: 22px 0 8px; }
.historique h2 { font-size: 17px; margin: 0 0 8px; }
.historique ul { list-style: none; margin: 0; padding: 0; background: var(--papier); border: 1px solid var(--trait); border-radius: var(--r-m); }
.historique li { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; }
.historique li + li { border-top: 1px solid var(--trait); }
.historique .discret { font-size: 16px; }

/* Mois */
.mois-nav { display: flex; align-items: center; justify-content: space-between; margin: 4px 0 12px; }
.mois-nav a, .mois-nav .inactif {
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--trait); background: var(--papier);
  color: var(--encre); font-size: 22px; display: grid; place-items: center; text-decoration: none;
}
.mois-nav .inactif { opacity: .35; }
.mois-nav h1 { font-size: 19px; margin: 0; }
.total-mois { text-align: center; margin-bottom: 14px; }
.total-mois .num { font-size: 38px; font-weight: 700; }
.total-mois div:last-child { color: var(--gris); font-size: 16px; }
.cats { background: var(--papier); border: 1px solid var(--trait); border-radius: var(--r-m); padding: 12px 14px; display: grid; gap: 10px; margin-bottom: 16px; }
.cat { display: grid; grid-template-columns: 1fr auto; gap: 3px 10px; font-size: 16px; }
.cat .barre-cat { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: var(--chaux); overflow: hidden; }
.cat .barre-cat i { display: block; height: 100%; background: var(--vert-clair); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .cat .barre-cat i { background: #6FA88A; } }
:root[data-theme="dark"] .cat .barre-cat i { background: #6FA88A; }
.jour { font-size: 16px; font-weight: 600; color: var(--gris); margin: 14px 2px 6px; display: flex; justify-content: space-between; }
.defile .filtres { margin-bottom: 4px; }

/* ===== PWA : capture, mode rafale, file d'envoi hors ligne ===== */
[hidden] { display: none !important; }

/* Pastille « en attente » sur le bouton Photo de la barre basse */
.btn-photo { position: relative; }
.badge-file {
  position: absolute; top: -2px; right: -10px; min-width: 24px; height: 24px; padding: 0 6px;
  border-radius: 99px; background: var(--laiton); color: var(--vert); text-align: center;
  font: 700 16px/24px var(--chiffres); box-shadow: 0 0 0 3px var(--papier);
}

/* Bandeaux de la file (hors ligne, en attente, reconnexion, refus) : insérés par file-envoi.js */
.file-bandeaux:empty { display: none; }
.file-bandeaux .bandeau { flex-wrap: wrap; }
.file-bandeaux .bandeau > span:first-child { flex: 1 1 14rem; }
.file-bandeaux .bandeau .btn-ligne { flex: none; }

/* Page de capture */
.capture > p.sous { margin: 0 0 18px; color: var(--gris); }
.apercu {
  margin: 0 0 14px; min-height: 160px; display: grid; place-items: center; overflow: hidden;
  background: #2a2f2c; border-radius: var(--r-m); color: #fff;
}
.apercu img { display: block; max-width: 100%; max-height: min(60vh, 520px); object-fit: contain; }
.apercu figcaption { padding: 40px 16px; font-size: 18px; overflow-wrap: anywhere; }
.pages { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; align-items: center; }
.pages-liste { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.pages .p {
  width: 46px; height: 58px; border-radius: 4px; border: 2px solid var(--actif); background: #fff;
  display: grid; place-items: center; overflow: hidden; font: 600 16px var(--chiffres); color: var(--vert);
}
.pages .p img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pages .ajout {
  border: 1.5px dashed var(--gris); color: var(--gris); background: transparent; font-size: 24px; cursor: pointer;
}
.pages .txt { flex: 1 1 10rem; margin-left: 6px; color: var(--gris); }
.choix { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.prise { display: grid; gap: 12px; margin-bottom: 14px; }
.prise .btn { position: relative; }
label.btn:focus-within { outline: 3px solid var(--laiton); outline-offset: 2px; }
.btn:disabled { opacity: .55; cursor: default; }
.bascule {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; cursor: pointer;
  background: var(--papier); border: 1px solid var(--trait); border-radius: var(--r-m); padding: 10px 14px; margin-top: 14px;
}
.bascule small { display: block; color: var(--gris); font-size: 16px; }
.interrupteur {
  -webkit-appearance: none; appearance: none; flex: none; position: relative; width: 50px; height: 30px; margin: 0;
  border-radius: 99px; background: var(--gris); cursor: pointer; transition: background .15s;
}
.interrupteur::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .15s;
}
.interrupteur:checked { background: var(--vert); }
.interrupteur:checked::after { transform: translateX(20px); }
.interrupteur:disabled { opacity: .5; cursor: default; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .interrupteur:checked { background: var(--vert-clair); }
}
:root[data-theme="dark"] .interrupteur:checked { background: var(--vert-clair); }
.rafale-compteur { margin: 10px 2px 0; font: 600 18px var(--chiffres); color: var(--ok); }

/* ===== Connexion rapide (passkeys) : liste de l'admin ===== */
.passkeys { display: grid; gap: 10px; width: 100%; }
.passkey { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; text-align: left; }
.passkey + .passkey { border-top: 1px solid var(--trait); padding-top: 10px; }

/* ===== Admin : tableau de bord, dépenses, corbeille ===== */
.cartes-admin { display: grid; gap: 16px; margin-bottom: 22px; }
.cartes-admin .tapis { margin: 0; padding: 20px 22px 24px; }
.compteurs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; position: relative; }
.compteurs a {
  color: #fff; text-decoration: none; background: rgba(255, 255, 255, .12); border-radius: var(--r-s);
  padding: 8px 12px; font-size: 16px; min-height: 44px; flex: 1 1 8rem;
}
.compteurs a b { font: 700 22px var(--chiffres); display: block; }
.compteurs a.alerte b { color: #F4D58A; }
.compteurs a:hover { background: rgba(255, 255, 255, .2); }
@media (min-width: 720px) { .cartes-admin { grid-template-columns: 1fr 1fr; gap: 20px; } }
@media (min-width: 1024px) { .cartes-admin .tapis .montant { font-size: 44px; } }

/* Tableaux dont la ligne entière mène à la dépense */
tr.ligne-lien { position: relative; }
tr.ligne-lien:hover td { background: color-mix(in srgb, var(--vert) 7%, var(--papier)); }
a.lien-ligne { font-weight: 600; text-decoration: none; }
a.lien-ligne::after { content: ""; position: absolute; inset: 0; }
a.lien-ligne:focus-visible { outline: none; }
a.lien-ligne:focus-visible::after { outline: 3px solid var(--laiton); outline-offset: -3px; }
td.motifs .etat { margin: 2px 6px 2px 0; }
.etat.err { background: var(--rouge-fond); color: var(--rouge); }
.panneau .table-defile + .note { border-top: 1px solid var(--trait); }

/* Filtres de la liste : un formulaire GET, donc une adresse partageable */
form.filtres { margin-bottom: 18px; }
.filtre .nom-filtre { color: var(--gris); font-size: 16px; }
.filtre select, .filtre input[type="date"] {
  min-height: 40px; border: 0; background: transparent; color: var(--encre); font: 16px var(--texte);
  max-width: 100%;
}
label.filtre { cursor: pointer; }
.filtre select { min-width: 5.5rem; }
button.btn-ligne.plein { background: var(--vert); border-color: var(--vert); color: #fff; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) button.btn-ligne.plein { background: var(--vert-clair); border-color: var(--vert-clair); }
}
:root[data-theme="dark"] button.btn-ligne.plein { background: var(--vert-clair); border-color: var(--vert-clair); }
form.filtres .total { margin-left: auto; font: 600 18px var(--chiffres); font-variant-numeric: tabular-nums; }
form.filtres .total .discret { font: 400 16px var(--texte); }
@media (max-width: 719px) {
  form.filtres { gap: 8px; }
  form.filtres .filtre { flex: 1 1 calc(50% - 4px); min-width: 0; padding: 0 10px; gap: 6px; }
  form.filtres .filtre.recherche { flex-basis: 100%; max-width: none; }
  form.filtres .filtre select, form.filtres .filtre input[type="date"] { flex: 1; min-width: 0; width: 100%; }
  form.filtres .total { margin-left: 0; width: 100%; }
}
.pagination { display: flex; justify-content: center; align-items: center; gap: 14px; margin: 18px 0 8px; flex-wrap: wrap; }
.btn-ligne.inactif { opacity: .4; }
.defile .sous a { color: var(--actif); }

/* Détail d'une dépense : justificatif d'un côté, formulaire de l'autre */
.depense-admin { display: grid; gap: 18px; align-items: start; margin-bottom: 8px; }
.apercu-justificatif { display: grid; gap: 12px; }
.page-justificatif { margin: 0; background: #2a2f2c; border-radius: var(--r-m); overflow: hidden; }
.page-justificatif a { display: block; }
.page-justificatif img { display: block; width: 100%; height: auto; max-height: 70vh; object-fit: contain; }
.page-justificatif figcaption { padding: 8px 12px; color: #fff; font-size: 16px; background: rgba(0, 0, 0, .35); }
.page-justificatif.pdf { background: var(--papier); border: 1px solid var(--trait); }
.page-justificatif object { display: block; width: 100%; height: 70vh; min-height: 360px; }
.page-justificatif object a { padding: 22px; text-align: center; }
.apercu-justificatif .aucune-photo { margin: 0; padding: 24px 16px; text-align: center; color: var(--gris); background: var(--papier); border: 1px solid var(--trait); border-radius: var(--r-m); }
.depense-admin .panneau.formulaire h2 { border-bottom: 1px solid var(--trait); }
.actions-depense { display: grid; gap: 10px; margin-top: 18px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
/* Sur téléphone et tablette, le formulaire n'a pas de cadre : les lignes de TVA ont besoin de la largeur. */
@media (max-width: 1023px) {
  .depense-admin .panneau.formulaire { border: 0; background: transparent; }
  .depense-admin .panneau.formulaire h2 { padding: 0 0 8px; border-bottom: 0; }
  .depense-admin .panneau.formulaire .corps { padding: 0; }
}
.bandeau.verrou { flex-wrap: wrap; justify-content: space-between; }
.bandeau.verrou form { margin: 0; }
@media (min-width: 1024px) {
  .depense-admin { grid-template-columns: minmax(0, 1fr) minmax(360px, 460px); }
  .apercu-justificatif { position: sticky; top: 16px; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow-y: auto; }
  .page-justificatif object { height: calc(100vh - 140px); }
}

/* ===== Export comptable : formulaire, aperçu, historique, état ===== */
.export-grille { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
.export-grille > *, .form-export > * { min-width: 0; }
.form-export { padding: 18px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.form-export .champs { gap: 14px; grid-template-columns: minmax(0, 1fr); }
.form-export .deux { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.form-export .champ { min-width: 0; }
.form-export .champ input, .form-export .champ select { min-width: 0; }
.form-export fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.form-export legend { padding: 0; font-weight: 600; color: var(--gris); margin-bottom: 4px; }
.segment { display: flex; flex-wrap: wrap; border: 1.5px solid var(--trait); border-radius: var(--r-s); overflow: hidden; }
.segment label { flex: 1 1 auto; position: relative; }
.segment input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.segment span { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 12px; text-align: center; font-weight: 500; border-left: 1px solid var(--trait); }
.segment label:first-child span { border-left: 0; }
.segment input:checked + span { background: var(--vert); color: #fff; font-weight: 600; }
.segment input:focus-visible + span { outline: 3px solid var(--laiton); outline-offset: -3px; }
.case { display: flex; align-items: center; gap: 12px; min-height: 44px; font-size: 17px; cursor: pointer; }
.case input { flex: none; width: 24px; height: 24px; margin: 0; accent-color: var(--vert); }
.resume { background: var(--chaux); border-radius: var(--r-s); padding: 14px 16px; display: grid; gap: 4px; border: 1px solid var(--trait); }
.resume .apercu-export { font-size: 20px; font-weight: 700; line-height: 1.3; }
.resume .note { color: var(--paille); }
.contenu-zip { margin: 0; font: 16px/1.6 ui-monospace, Consolas, monospace; color: var(--gris); background: var(--chaux); border-radius: var(--r-s); padding: 10px 14px; white-space: pre; overflow-x: auto; }
.envoi { margin: 0; }
.export-historique h2 { border-bottom: 1px solid var(--trait); }
.historique-tableau { display: none; }
.historique-liste { border: 0; border-radius: 0 0 var(--r-m) var(--r-m); }
.liste li.export-ligne { grid-template-columns: 1fr auto; }
.liste .dl { font: 600 17px var(--texte); color: var(--actif); text-decoration: underline; text-underline-offset: 3px; min-height: 44px; display: flex; align-items: center; }
.liste .dl .etat { text-decoration: none; margin-top: 0; }
a.lien-export { color: var(--actif); font-weight: 600; display: inline-flex; align-items: center; min-height: 44px; }
.bandeau a { color: inherit; font-weight: 600; }
.etat-export .corps { display: grid; gap: 14px; max-width: 40rem; }
.etat-export .corps p { margin: 0; }
.etat-export .etat { font-size: 18px; padding: 6px 12px; }
.etat-export .btn { max-width: 24rem; }
.fiche-export { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; margin: 0; }
.fiche-export div { display: grid; gap: 2px; }
.fiche-export dt { color: var(--gris); font-weight: 600; }
.fiche-export dd { margin: 0; font-size: 18px; font-weight: 600; }
@media (min-width: 720px) {
  .historique-tableau { display: block; }
  .historique-liste { display: none; }
}
@media (min-width: 1024px) {
  .export-grille { grid-template-columns: minmax(380px, 460px) minmax(0, 1fr); }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .segment input:checked + span { background: var(--vert-clair); }
}
:root[data-theme="dark"] .segment input:checked + span { background: var(--vert-clair); }