/*
  Thème Jumathes : repris des factures officielles émises (encre, gris, or, filets pâles ;
  titres en Cormorant Garamond, texte en Josefin Sans). Documentation : docs/design/theme.md.
  Toute couleur est un jeton ci-dessous : aucune couleur en dur ailleurs (contrôlé par tests/test_theme.py).
*/

:root {
  /* Couleurs relevées sur les factures */
  --encre: #151412;
  --gris: #6b6864;
  --or: #b48c3c;          /* filets et décors seulement : trop clair pour du texte */
  --or-fonce: #7a6030;    /* texte et liens dorés, survols */
  --filet: #eceae6;
  --or-clair: #e3d3ac;    /* contour des cartes, comme les cadres des factures */
  /* Neutres dérivés */
  --fond: #faf9f7;
  --carte: #ffffff;
  --contour: #8a857d;     /* bordure des champs : 3:1 minimum sur fond blanc */
  /* Messages */
  --erreur: #9b2c2c;
  --erreur-fond: #fbeeee;
  --succes: #2f6b3f;
  --succes-fond: #eef6f0;
  --alerte: #7a6030;
  --alerte-fond: #f8f1e1;
  /* Typographie : Cormorant Garamond (titres) et Josefin Sans (texte), avec repli */
  --police-titre: "Cormorant Garamond", Garamond, Georgia, "Times New Roman", serif;
  --police-texte: "Josefin Sans", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --police-code: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --rayon: 6px;
}

/* Polices embarquées (licence SIL OFL, textes dans static/fonts) : polices variables, toutes graisses */
@font-face { font-family: "Cormorant Garamond"; font-weight: 300 700; font-style: normal; font-display: swap;
             src: url("/static/fonts/CormorantGaramond-VF.ttf") format("truetype"); }
@font-face { font-family: "Josefin Sans"; font-weight: 100 700; font-style: normal; font-display: swap;
             src: url("/static/fonts/JosefinSans-VF.ttf") format("truetype"); }

body { font-family: var(--police-texte); font-size: 1.05rem; line-height: 1.55; margin: 0;
       color: var(--encre); background: var(--fond); }
main { max-width: 64rem; margin: 2rem auto; padding: 0 1.2rem; }

h1, h2, h3 { font-family: var(--police-titre); font-weight: 500; letter-spacing: 0.02em; margin: 0 0 0.8rem; }
h1 { font-size: 2.2rem; line-height: 1.15; }
h2 { font-size: 1.5rem; }
a { color: var(--or-fonce); text-underline-offset: 0.2em; }
a:hover { color: var(--encre); }
:focus-visible { outline: 2px solid var(--or-fonce); outline-offset: 2px; }
code { font-family: var(--police-code); }

/* En-tête : marque en lettres espacées, navigation discrète */
header { background: var(--carte); border-bottom: 1px solid var(--filet); padding: 0.9rem 1.2rem;
         display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1.1rem; }
header a { color: var(--gris); text-decoration: none; text-transform: uppercase; font-size: 0.74rem;
           letter-spacing: 0.12em; padding: 0.2rem 0; border-bottom: 1px solid transparent; }
header a:hover { color: var(--or-fonce); border-bottom-color: var(--or); }
header .marque { font-family: var(--police-titre); font-size: 1.7rem; text-transform: none;
                 letter-spacing: 0.22em; color: var(--encre); margin-right: 0.6rem; font-weight: 500; }
header .marque small { display: block; font-family: var(--police-texte); font-size: 0.55rem;
                       letter-spacing: 0.4em; text-transform: uppercase; color: var(--gris); }
header .droite { margin-left: auto; display: flex; align-items: center; gap: 1rem; }
header .droite button { background: none; border: 0; color: var(--gris); cursor: pointer;
                        font: inherit; font-size: 0.74rem; text-transform: uppercase;
                        letter-spacing: 0.12em; padding: 0.2rem 0; }
header .droite button:hover { color: var(--or-fonce); }
form.en-ligne { display: inline; }

/* Étiquettes en lettres espacées, comme « ÉMETTEUR » ou « DESTINATAIRE » sur les factures */
.etiquette, th { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.18em;
                 color: var(--or-fonce); font-weight: 400; }

/* Tableaux : filets fins, sans quadrillage */
table { width: 100%; border-collapse: collapse; background: var(--carte); }
th, td { padding: 0.7rem 0.8rem; border-bottom: 1px solid var(--filet); text-align: left; vertical-align: top; }
thead th { border-bottom: 1px solid var(--or-clair); }
td.nb, th.nb { text-align: right; white-space: nowrap; }

/* Cartes : cadre pâle, comme les blocs Émetteur et Destinataire */
.carte { background: var(--carte); border: 1px solid var(--or-clair); border-radius: var(--rayon);
         padding: 1.1rem 1.4rem; margin-bottom: 1.2rem; }
.carte h2 { padding-bottom: 0.5rem; border-bottom: 1px solid var(--or-clair); }
.rappel { border-left: 4px solid var(--or); }
.discret { color: var(--gris); }

/* Boutons */
.bouton { display: inline-block; padding: 0.55rem 1.2rem; border-radius: var(--rayon); border: 1px solid var(--encre);
          background: var(--encre); color: var(--carte); text-decoration: none; cursor: pointer;
          font: inherit; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.14em; }
.bouton:hover { background: var(--or-fonce); border-color: var(--or-fonce); color: var(--carte); }
.bouton.secondaire { background: var(--carte); color: var(--encre); border-color: var(--or-fonce); }
.bouton.secondaire:hover { background: var(--alerte-fond); color: var(--encre); }

/* Champs */
label { font-size: 0.85rem; color: var(--gris); }
input[type=text], input[type=password], select { padding: 0.5rem 0.6rem; font: inherit; max-width: 100%;
    color: var(--encre); background: var(--carte); border: 1px solid var(--contour); border-radius: var(--rayon); }
input[type=file] { font: inherit; }

/* Formulaires de filtre : champs alignés sur une ligne */
.filtres { display: flex; flex-wrap: wrap; gap: 0.8rem 1.2rem; align-items: flex-end; }
.filtres label { display: flex; flex-direction: column; gap: 0.2rem; }
.filtres br { display: none; }

/* Messages */
.erreur, .succes { padding: 0.7rem 1rem; margin: 0.8rem 0; border-radius: var(--rayon); }
.erreur { background: var(--erreur-fond); color: var(--erreur); border-left: 4px solid var(--erreur); }
.succes { background: var(--succes-fond); color: var(--succes); border-left: 4px solid var(--succes); }
.alerte { background: var(--alerte-fond); color: var(--alerte); border-left: 4px solid var(--or);
          padding: 0.7rem 1rem; margin: 0.8rem 0; border-radius: var(--rayon); }

.codes { font-family: var(--police-code); font-size: 1.1rem; columns: 2; }
.qr svg { max-width: 14rem; height: auto; }

/* Étapes d'un dossier : libellé + pastille, jamais la couleur seule */
.pastille { display: inline-block; width: 0.7rem; height: 0.7rem; border-radius: 50%; margin-right: 0.45rem;
            background: var(--gris); vertical-align: baseline; }
.s-commande { background: var(--gris); } .s-pro_forma_emise { background: var(--or); }
.s-payee { background: var(--or-fonce); } .s-achetee { background: var(--encre); }
.s-livree { background: var(--succes); } .s-cloturee { background: var(--contour); }
.s-annulee { background: var(--erreur); }
.etapes { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-bottom: 0.8rem; }
.etape { display: block; flex: 1 1 8rem; text-decoration: none; color: var(--encre); background: var(--fond);
         border: 1px solid var(--filet); border-radius: var(--rayon); padding: 0.7rem 0.9rem; }
.etape:hover { border-color: var(--or); }
.etape .chiffre { display: block; font-family: var(--police-titre); font-size: 2.2rem; line-height: 1.1; }
.etape .libelle { font-size: 0.85rem; color: var(--gris); }

/* Palette du guide de style */
.echantillons { display: flex; flex-wrap: wrap; gap: 0.8rem; }
.echantillon { width: 8.5rem; border: 1px solid var(--filet); border-radius: var(--rayon); background: var(--carte); }
.echantillon .teinte { height: 3.2rem; border-radius: var(--rayon) var(--rayon) 0 0; }
.echantillon p { margin: 0; padding: 0.4rem 0.6rem; font-size: 0.8rem; }
.t-encre { background: var(--encre); } .t-gris { background: var(--gris); } .t-or { background: var(--or); }
.t-or-fonce { background: var(--or-fonce); } .t-filet { background: var(--filet); }
.t-or-clair { background: var(--or-clair); } .t-fond { background: var(--fond); } .t-carte { background: var(--carte); }
.t-contour { background: var(--contour); } .t-erreur { background: var(--erreur); }
.t-succes { background: var(--succes); } .t-alerte { background: var(--alerte); }
.t-erreur-fond { background: var(--erreur-fond); } .t-succes-fond { background: var(--succes-fond); }
.t-alerte-fond { background: var(--alerte-fond); }
.specimen-titre { font-family: var(--police-titre); font-size: 2rem; }
.specimen-texte { font-family: var(--police-texte); }

@media (max-width: 40rem) {
  body { font-size: 1rem; }
  h1 { font-size: 1.8rem; }
  th, td { padding: 0.5rem 0.5rem; }
  header { gap: 0.3rem 1rem; }
}