/* Couleurs et polices du Manoir, pour que les autres pieces lui ressemblent. */
:root {
  --encre: #17302A;
  --papier: #E4EBE7;
  --trait: #C3D0CA;
  --discret: #566C65;
  --accent: #1E3A34;
  --alerte: #9A6F17;
  --ko: #8A2D37;
}
h1 { font-family: "Bodoni Moda", Didot, Georgia, serif; }

* { box-sizing: border-box; }

/* La barre de navigation est collante. Sans cette reserve, tout element
   amene a l'ecran par defilement, ancre, focus clavier ou lien, se retrouve
   cache dessous et un clic a cet endroit tombe sur la barre. Constate le
   09/10/2026 en testant le formulaire de tache dans le navigateur. */
html { scroll-padding-top: 7rem; }

body {
  margin: 0;
  font: 16px/1.55 Karla, "Segoe UI", system-ui, sans-serif;
  color: var(--encre);
  background: var(--papier);
}

nav {
  display: flex; flex-wrap: wrap; gap: .25rem;
  padding: .5rem 1rem;
  border-bottom: 1px solid var(--trait);
  background: #fff;
  position: sticky; top: 0; z-index: 5;
}
nav a {
  padding: .4rem .7rem; border-radius: .4rem;
  color: var(--discret); text-decoration: none; font-size: .95rem;
}
nav a.on { background: var(--accent); color: #fff; }

.pastille {
  background: var(--alerte); color: #fff; border-radius: 1rem;
  padding: 0 .4rem; font-size: .75rem; margin-left: .2rem;
}

main { max-width: 46rem; margin: 0 auto; padding: 1rem 1rem 4rem; }

h1 { font-size: 1.4rem; margin: 1rem 0 .3rem; }
h2 { font-size: 1.05rem; margin: 1.8rem 0 .4rem; color: var(--accent); }

.discret { color: var(--discret); font-size: .85rem; }
.ok    { background: #e8f0ea; border-left: 3px solid var(--accent); padding: .6rem .8rem; }
.ko    { background: #f7e9e9; border-left: 3px solid var(--ko);     padding: .6rem .8rem; }
.alerte{ background: #f7efe6; border-left: 3px solid var(--alerte); padding: .6rem .8rem; }

textarea, input, select, button {
  font: inherit; padding: .55rem .6rem;
  border: 1px solid var(--trait); border-radius: .4rem;
  background: #fff; color: inherit;
}
textarea { width: 100%; resize: vertical; }
label { display: flex; flex-direction: column; gap: .2rem;
        font-size: .82rem; color: var(--discret); }
label input, label select { color: var(--encre); }
label.case { flex-direction: row; align-items: center; gap: .4rem; }

button { background: var(--accent); color: #fff; border-color: var(--accent);
         cursor: pointer; }
button.secondaire { background: #fff; color: var(--discret);
                    border-color: var(--trait); }
button.petit { padding: .25rem .5rem; font-size: .8rem; }
button.micro { background: #fff; color: var(--accent); border-color: var(--accent); }
button.micro.actif { background: var(--alerte); color: #fff; border-color: var(--alerte); }

.ligne { display: flex; flex-wrap: wrap; gap: .6rem;
         align-items: flex-end; margin: .7rem 0; }
.enligne { display: inline-flex; gap: .3rem; vertical-align: middle;
           margin-left: .4rem; }

.carte { border: 1px solid var(--trait); border-radius: .6rem;
         padding: .9rem; margin: .9rem 0; background: #fff; }
.carte.note { background: #fbfaf5; }
.carte label { margin-bottom: .4rem; }
.carte input, .carte select { width: 100%; }

.liste { list-style: none; padding: 0; }
.liste li { border-bottom: 1px solid var(--trait); padding: .6rem 0; }
.liste li.retard { border-left: 3px solid var(--alerte); padding-left: .6rem; }

table { border-collapse: collapse; width: 100%; font-size: .92rem;
        margin: .5rem 0; }
th, td { text-align: left; padding: .4rem .5rem;
         border-bottom: 1px solid var(--trait); vertical-align: top; }
th { font-size: .78rem; text-transform: uppercase; color: var(--discret);
     font-weight: 600; }

footer { max-width: 46rem; margin: 0 auto; padding: 1rem;
         color: var(--discret); font-size: .8rem;
         border-top: 1px solid var(--trait); }

@media (max-width: 30rem) {
  .ligne { flex-direction: column; align-items: stretch; }
  .ligne > * { width: 100%; }
}

/* 02/11/2026 : entrees, validation par operation, agenda, base .md */
.etiquette { display: inline-block; font-size: .72rem; padding: 0 .4rem;
             border-radius: .3rem; background: #eceae3; color: var(--discret); }
.etiquette.a_valider, .etiquette.modifier { background: #f7efe6; color: var(--alerte); }
.etiquette.echec, .etiquette.supprimer { background: #f7e9e9; color: var(--ko); }
.etiquette.traitee, .etiquette.ajouter { background: #e8f0ea; color: var(--accent); }
.ko-texte { color: var(--ko); font-size: .85rem; }
.alerte-texte { color: var(--alerte); font-size: .85rem; }
.ligne.compacte { margin: .3rem 0 0; gap: .4rem; align-items: center; }
.liste li.close { opacity: .6; }
.liste li.close strong { text-decoration: line-through; }
.bloc { border-top: 2px solid var(--trait); margin-top: 1.4rem; padding-top: .6rem; }
.entete-bloc { display: flex; gap: 1rem; justify-content: space-between;
               align-items: flex-start; }
.entete-bloc p { margin: .3rem 0; }
.carte.supprimer { border-color: #e2c3c3; }
.grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
          gap: .5rem; }
.grille label { margin: 0; }
pre.brut, pre.diff { white-space: pre-wrap; word-break: break-word; font-size: .82rem;
                     background: #fff; border: 1px solid var(--trait);
                     border-radius: .4rem; padding: .6rem; max-height: 22rem;
                     overflow: auto; }
pre.diff .plus  { color: var(--accent); }
pre.diff .moins { color: var(--ko); text-decoration: line-through; }
.md { overflow-x: auto; }
.md h1 { font-size: 1.2rem; }
.md table { font-size: .85rem; }
textarea.code { font-family: ui-monospace, Consolas, monospace; font-size: .82rem; }
input.large { flex: 1 1 18rem; }
input[type=file] { width: 100%; background: #fff; }
button[disabled] { opacity: .6; cursor: wait; }

@media (max-width: 30rem) {
  .entete-bloc { flex-direction: column; }
  .ligne.compacte { flex-direction: row; }
  .ligne.compacte > * { width: auto; }
}

/* 02/11/2026 : page de connexion */
main.connexion { max-width: 24rem; padding-top: 12vh; }
main.connexion h1 { font-size: 1.8rem; color: var(--accent); margin-bottom: .2rem; }
main.connexion .carte label { margin-bottom: .8rem; }
main.connexion .carte input { width: 100%; }
main.connexion button[type=submit] { width: 100%; margin-top: .4rem; }
footer .ligne.compacte { margin-bottom: .6rem; }