/* ============================================================================
 * Mandaris - jetons et styles.
 *
 * Les valeurs viennent telles quelles de dcweb/src/styles.scss, la source de
 * verite de la charte DigitalCraftery. On ne les approche pas, on les copie.
 *
 * Piege connu de la charte : --signature (le lime) ne fait QUE 1,9:1 sur fond
 * clair. Il ne sert jamais de couleur de texte, de lien ou de bordure - cet
 * usage est celui de --travail. Le lime est un aplat, jamais un trait.
 * ========================================================================= */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../polices/inter-variable-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../polices/poppins-500-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../polices/poppins-600-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../polices/poppins-700-latin.woff2") format("woff2");
}

:root {
  --fond: #f1f3e6;
  --surface: #fbfcf5;
  --creux: #e5e8d4;
  --trait: #d7dbc3;
  --encre: #171911;
  --signature: #b0cb1f;
  --travail: #5a6a0c;
  --ambre: #e8a317;

  --texte-doux: color-mix(in srgb, var(--encre) 62%, var(--fond));
  --danger: #8d3a2a;
  --danger-fond: #f8ece8;
  --danger-trait: #e2c4bb;

  --police-titre: "Poppins", system-ui, sans-serif;
  --police-corps: "Inter", system-ui, sans-serif;
  --police-code: ui-monospace, "SFMono-Regular", Consolas, monospace;

  --rayon: 10px;
  --ombre: 0 1px 2px rgba(23, 25, 17, 0.08), 0 4px 16px rgba(23, 25, 17, 0.06);
  --colonne: 68ch;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fond: #14150f;
    --surface: #23261c;
    --creux: #1b1d15;
    --trait: #3a3f2f;
    --encre: #f7f9f4;
    --signature: #c6e22b;
    --travail: #c6e22b;
    --ambre: #f0b84a;
    --danger: #dd8b76;
    --danger-fond: #2b1a14;
    --danger-trait: #4d2e24;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font-family: var(--police-corps);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--police-titre); text-wrap: balance; margin: 0; line-height: 1.2; }
h1 { font-size: clamp(24px, 4vw, 32px); font-weight: 700; letter-spacing: -0.01em; }
h2 { font-size: 22px; font-weight: 600; }
h3 { font-size: 17px; font-weight: 600; }

p { margin: 0 0 0.6em; max-width: var(--colonne); }
p:last-child { margin-bottom: 0; }

a { color: var(--travail); text-decoration-thickness: 1px; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible,
select:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--travail);
  outline-offset: 2px;
}

small, .doux { color: var(--texte-doux); font-size: 13.5px; }

code, .mono { font-family: var(--police-code); font-size: 0.92em; }

/* ---------- structure ---------- */

.app-entete {
  border-bottom: 1px solid var(--trait);
  background: var(--surface);
}

.app-entete-barre {
  max-width: 980px;
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.marque {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: 17px;
  color: var(--encre);
  text-decoration: none;
}

.marque img { width: 28px; height: 28px; border-radius: 7px; display: block; }

.app-entete-nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 4px;
}

.app-entete-nav a, .app-entete-nav button.lien {
  padding: 7px 12px;
  border-radius: 8px;
  color: var(--travail);
  text-decoration: none;
  font-size: 14.5px;
  font-weight: 500;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--police-corps);
}

.app-entete-nav a[aria-current="page"] { background: var(--creux); color: var(--encre); }
.app-entete-nav a:hover, .app-entete-nav button.lien:hover { background: var(--creux); }

/* En dessous de 600px l'entete tenait sur une seule ligne et coupait
   "Deconnexion" hors du viewport - trouve en testant a 375px, jamais visible
   au format bureau. La nav passe sur sa propre ligne et defile plutot que de
   rogner si elle est encore trop large pour un tres petit ecran. */
@media (max-width: 600px) {
  .app-entete-barre { flex-wrap: wrap; padding: 10px 16px; gap: 6px; }
  .app-entete-nav {
    width: 100%;
    margin-left: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .app-entete-nav a, .app-entete-nav button.lien {
    white-space: nowrap;
    font-size: 13.5px;
    padding: 6px 10px;
  }
}

main {
  max-width: 980px;
  margin: 0 auto;
  padding: 28px 20px 64px;
}

.page-tete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}

.page-tete p { margin-top: 4px; }

/* ---------- boutons ---------- */

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--police-corps);
  font-size: 14.5px;
  font-weight: 600;
  padding: 10px 16px;
  border-radius: 9px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  line-height: 1.2;
  transition: filter 0.1s ease, transform 0.05s ease;
}

.bouton:active { transform: translateY(1px); }
.bouton:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }

.bouton-principal { background: var(--signature); color: var(--encre-sur-lime, #22240f); }
.bouton-principal:hover:not(:disabled) { filter: brightness(0.96); }

.bouton-second {
  background: var(--surface);
  color: var(--travail);
  border-color: var(--trait);
}
.bouton-second:hover:not(:disabled) { background: var(--creux); }

.bouton-discret {
  background: none;
  color: var(--travail);
  padding: 8px 10px;
}
.bouton-discret:hover:not(:disabled) { background: var(--creux); }

.bouton-danger { background: var(--danger); color: #fff; }
.bouton-danger:hover:not(:disabled) { filter: brightness(1.08); }

.bouton-large { width: 100%; padding: 12px 16px; }

.grappe-boutons { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }

/* ---------- formulaires ---------- */

.champ { margin-bottom: 16px; }

.champ label {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--texte-doux);
  margin-bottom: 6px;
}

.champ input, .champ textarea, .champ select {
  width: 100%;
  font-family: var(--police-corps);
  font-size: 15px;
  padding: 10px 12px;
  border: 1px solid var(--trait);
  border-radius: 8px;
  background: var(--surface);
  color: var(--encre);
}

.champ input:focus, .champ textarea:focus, .champ select:focus {
  outline: 2px solid var(--travail);
  outline-offset: 1px;
  border-color: var(--travail);
}

.champ .aide { font-size: 12.5px; color: var(--texte-doux); margin-top: 4px; }

.ligne-de-champs { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }

@media (max-width: 560px) {
  .ligne-de-champs { grid-template-columns: 1fr; }
}

form { max-width: 440px; }
form.large { max-width: 640px; }

/* ---------- cartes ---------- */

.carte {
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  padding: 20px;
}

.carte + .carte { margin-top: 14px; }

.carte-etroite { max-width: 440px; margin: 40px auto; }

/* ---------- liste de mandats ---------- */

.liste-mandats { display: grid; gap: 10px; }

.mandat-ligne {
  display: block;
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  padding: 14px 16px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.1s ease;
}

.mandat-ligne:hover { border-color: var(--travail); }

.mandat-ligne-tete {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}

.mandat-ligne-ref { font-family: var(--police-code); font-size: 13px; color: var(--texte-doux); }
.mandat-ligne-objet { margin-top: 3px; font-weight: 500; }

/* ---------- badges ---------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
}

.badge-neutre { background: var(--creux); color: var(--texte-doux); border-color: var(--trait); }
.badge-etat { background: var(--creux); color: var(--encre); border-color: var(--trait); }

/* Echelle du niveau de preuve : monte vers le lime, comme le veut la charte
   pour tout ce qui se prouve davantage. */
.badge-interne { background: var(--creux); color: var(--texte-doux); border-color: var(--trait); }
.badge-declare-seul { background: var(--danger-fond); color: var(--danger); border-color: var(--danger-trait); }
.badge-contresigne { background: var(--signature); color: var(--encre-sur-lime, #22240f); }

.badge-argent { background: var(--ambre); color: #2a1f04; }

/* ---------- registre (actes) ---------- */

.registre { border: 1px solid var(--trait); border-radius: var(--rayon); overflow: hidden; }

.acte {
  padding: 14px 16px;
  border-bottom: 1px solid var(--trait);
  background: var(--surface);
}

.acte:last-child { border-bottom: none; }
.acte.acte-correction { background: var(--creux); }

.acte-tete {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.acte-rang {
  font-family: var(--police-code);
  font-size: 12px;
  color: var(--texte-doux);
  min-width: 22px;
}

.acte-type { font-weight: 600; }

.acte-quand { margin-left: auto; font-size: 12.5px; color: var(--texte-doux); }

.acte-detail { margin-top: 8px; font-size: 14.5px; color: var(--texte-doux); }
.acte-detail strong { color: var(--encre); font-weight: 600; }

.acte-actions { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- reserves ---------- */

.reserve {
  border: 1px solid var(--danger-trait);
  background: var(--danger-fond);
  border-radius: var(--rayon);
  padding: 12px 14px;
  margin-top: 8px;
}

.reserve.reserve-levee { opacity: 0.6; }
.reserve-motif { font-size: 14.5px; }
.reserve-meta { margin-top: 6px; font-size: 12.5px; color: var(--texte-doux); }

/* ---------- profil ---------- */

.profil-grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.profil-chiffre {
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  padding: 16px;
}

.profil-chiffre .valeur {
  font-family: var(--police-titre);
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
}

.profil-chiffre .etiquette {
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--texte-doux);
}

.profil-chiffre .valeur.vide { color: var(--texte-doux); font-size: 15px; font-weight: 600; }

/* ---------- alertes et etats ---------- */

.alerte {
  padding: 12px 14px;
  border-radius: var(--rayon);
  font-size: 14.5px;
  margin-bottom: 16px;
  border: 1px solid var(--trait);
  background: var(--creux);
}

.alerte-erreur { background: var(--danger-fond); border-color: var(--danger-trait); color: var(--danger); }
.alerte-succes { background: color-mix(in srgb, var(--signature) 22%, var(--surface)); border-color: var(--signature); }

.etat-vide {
  text-align: center;
  padding: 48px 20px;
  color: var(--texte-doux);
}

.chargement { padding: 24px; text-align: center; color: var(--texte-doux); }

/* ---------- montants ---------- */

.montant { font-variant-numeric: tabular-nums; }
.montant-fort { color: var(--ambre); font-weight: 700; }

/* ---------- lien de partage ---------- */

.lien-partage {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--creux);
  border: 1px solid var(--trait);
  border-radius: 8px;
  padding: 8px 10px;
}

.lien-partage input {
  flex: 1;
  border: none;
  background: none;
  font-family: var(--police-code);
  font-size: 13px;
  color: var(--encre);
}

.lien-partage input:focus { outline: none; }

/* ---------- boite de dialogue ---------- */

.modal-fond {
  position: fixed;
  inset: 0;
  background: rgba(23, 25, 17, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 100;
}

.modal {
  background: var(--surface);
  border-radius: var(--rayon);
  border: 1px solid var(--trait);
  box-shadow: var(--ombre);
  padding: 22px;
  width: 100%;
  max-width: 440px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
}

.modal h2 { margin-bottom: 4px; }
.modal form { max-width: none; }

/* ---------- utilitaires ---------- */

.pile { display: flex; flex-direction: column; gap: 4px; }
.entre { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.centre-page { min-height: calc(100vh - 60px); display: flex; align-items: center; justify-content: center; padding: 20px; }
.masque { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }