/* Feuille de style unique, sans dépendance ni compilation.
   Conçue pour le téléphone d'abord : la saisie d'une facture se fait rarement
   devant un ordinateur. */

:root {
  --encre: #16202b;
  --encre-douce: #5c6b7a;
  --papier: #f6f7f9;
  --carte: #ffffff;
  --trait: #dfe4ea;
  --accent: #1f5f8b;
  --favorable: #1a7f5a;
  --defavorable: #b3261e;
  --attention: #9a6700;
  --rayon: 10px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--encre);
  background: var(--papier);
}

main { max-width: 1000px; margin: 0 auto; padding: 1rem 1rem 3rem; }

h1 { font-size: 1.35rem; margin: 0 0 .25rem; }
h2 { font-size: 1.05rem; margin: 1.75rem 0 .6rem; }
h3 { font-size: .95rem; margin: 0 0 .5rem; }

a { color: var(--accent); }

.discret { color: var(--encre-douce); font-size: .85rem; }

/* ---------------------------------------------------------------- entête */

.entete {
  background: var(--carte);
  border-bottom: 1px solid var(--trait);
  padding: .7rem 1rem;
  position: sticky;
  top: 0;
  z-index: 10;
}
.entete-titre { display: flex; flex-direction: column; margin-bottom: .5rem; }
.entete nav { display: flex; gap: .35rem; overflow-x: auto; }
.entete nav a {
  padding: .35rem .7rem;
  border-radius: var(--rayon);
  text-decoration: none;
  color: var(--encre-douce);
  white-space: nowrap;
  font-size: .9rem;
}
.entete nav a.actif { background: var(--accent); color: #fff; }

footer { max-width: 1000px; margin: 0 auto; padding: 0 1rem 2rem; }

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

.carte {
  background: var(--carte);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  padding: 1rem;
  margin-bottom: 1rem;
}

.grille { display: grid; gap: .75rem; grid-template-columns: 1fr; }
@media (min-width: 700px) {
  .grille-2 { grid-template-columns: 1fr 1fr; }
  .grille-3 { grid-template-columns: repeat(3, 1fr); }
  .entete { display: flex; align-items: center; justify-content: space-between; }
  .entete-titre { margin-bottom: 0; }
}

/* Un chiffre clé : le libellé au-dessus, la valeur en grand, la nuance en dessous. */
.chiffre { display: flex; flex-direction: column; }
.chiffre .libelle { font-size: .8rem; color: var(--encre-douce); text-transform: uppercase; letter-spacing: .03em; }
.chiffre .valeur { font-size: 1.6rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.chiffre .note { font-size: .8rem; color: var(--encre-douce); }
.positif { color: var(--favorable); }
.negatif { color: var(--defavorable); }

/* ------------------------------------------------------------- tableaux */

table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th, td { padding: .45rem .5rem; text-align: right; border-bottom: 1px solid var(--trait); }
th:first-child, td:first-child { text-align: left; }
thead th { font-size: .78rem; text-transform: uppercase; color: var(--encre-douce); letter-spacing: .03em; }
tbody tr:hover { background: var(--papier); }
td.montant, th.montant { font-variant-numeric: tabular-nums; white-space: nowrap; }
tr.total td { font-weight: 600; border-top: 2px solid var(--trait); }
.defilant { overflow-x: auto; }

/* Une estimation ne doit jamais avoir l'apparence d'un montant certain. */
.estime { border-bottom: 1px dashed var(--attention); }

/* -------------------------------------------------------------- alertes */

.alerte {
  border-left: 4px solid var(--encre-douce);
  background: var(--carte);
  border-radius: 0 var(--rayon) var(--rayon) 0;
  padding: .6rem .8rem;
  margin-bottom: .5rem;
  font-size: .9rem;
}
.alerte-risque { border-left-color: var(--defavorable); }
.alerte-attention { border-left-color: var(--attention); }
.alerte-info { border-left-color: var(--accent); }

.badge {
  display: inline-block;
  font-size: .72rem;
  padding: .1rem .45rem;
  border-radius: 999px;
  background: var(--papier);
  border: 1px solid var(--trait);
  color: var(--encre-douce);
}
.badge-previsionnel { border-color: var(--attention); color: var(--attention); }
.badge-reel { border-color: var(--favorable); color: var(--favorable); }

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

label { display: block; font-size: .85rem; margin-bottom: .15rem; color: var(--encre-douce); }
input, select, textarea {
  width: 100%;
  padding: .55rem .6rem;
  font-size: 16px; /* en dessous de 16px, iOS zoome à chaque champ */
  font-family: inherit;
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  background: #fff;
  color: var(--encre);
}
input:focus, select:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.champ { margin-bottom: .75rem; }
.champ-inline { display: flex; align-items: center; gap: .5rem; }
.champ-inline input[type=checkbox] { width: auto; }
.champ-inline label { margin: 0; }

button {
  padding: .6rem 1.1rem;
  font-size: 1rem;
  font-family: inherit;
  border: none;
  border-radius: var(--rayon);
  background: var(--accent);
  color: #fff;
  cursor: pointer;
}
button:hover { filter: brightness(1.1); }
button.discret-bouton {
  background: none;
  color: var(--defavorable);
  padding: .2rem .4rem;
  font-size: .85rem;
}

.message { padding: .6rem .8rem; border-radius: var(--rayon); margin-bottom: .75rem; font-size: .9rem; }
.message-erreur { background: #fdecea; color: var(--defavorable); }
.message-succes { background: #e6f4ee; color: var(--favorable); }

.vide { text-align: center; color: var(--encre-douce); padding: 1.5rem 0; font-size: .9rem; }

/* --- Écran de déclaration ------------------------------------------------ */

.actions-dossier { display: flex; gap: .6rem; flex-wrap: wrap; margin: 1rem 0 .5rem; }
.bouton {
  display: inline-block;
  padding: .6rem 1rem;
  border-radius: var(--rayon);
  background: var(--accent);
  color: #fff;
  text-decoration: none;
  font-size: .95rem;
}
.bouton:hover { filter: brightness(1.1); }
.bouton-secondaire { background: none; color: var(--accent); border: 1px solid var(--accent); }

.bloc-report, .bloc-tableau, .bloc-avertissements {
  background: var(--carte);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  padding: 1rem;
  margin-bottom: 1rem;
}
.bloc-report { border-left: 4px solid var(--accent); }

/* La case du cerfa est l'information que l'œil doit trouver en premier :
   c'est la seule chose à recopier sur impots.gouv.fr. */
.cases .case {
  background: var(--accent);
  color: #fff;
  text-align: center;
  border-radius: 3px;
  width: 3.5rem;
  font-size: 1rem;
  letter-spacing: .05em;
}
.formulaire {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  padding: .1rem .45rem;
  border-radius: 3px;
  font-size: .75rem;
  vertical-align: middle;
  margin-right: .35rem;
}
.ligne-total td { font-weight: 700; border-top: 1px solid var(--encre-douce); }
.compte { color: var(--encre-douce); font-size: .8rem; white-space: nowrap; }
.note { display: block; color: var(--encre-douce); font-size: .8rem; }
.a-completer { color: #b45309; font-style: italic; }
.bloc-avertissements { background: #f4f4f5; font-size: .875rem; }
.bloc-avertissements li { margin-bottom: .4rem; }

/* Le libellé suit la case du cerfa, donc n'est plus la première cellule :
   la règle générale d'alignement à droite ne doit pas l'attraper. */
.cases td { text-align: left; }
.cases td.montant { text-align: right; }
/* Une note reste une note, même sur une ligne de total : le gras est réservé
   au montant, sinon tout crie et plus rien ne ressort. */
.ligne-total .note { font-weight: 400; }

/* --- Connexion ----------------------------------------------------------- */

.page-connexion {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 1rem;
}
.carte-connexion { width: 100%; max-width: 22rem; }
.carte-connexion h1 { margin-top: 0; }
.carte-connexion button { width: 100%; margin-top: .75rem; }

.deconnexion { display: inline; margin-left: auto; }