/* La feuille de style de compta.bailleurtranquille.com.
 *
 * Elle est servie en `immutable` par nginx, et c'est tenable parce que
 * `page.php` porte la version du dépôt dans son adresse — voir le
 * commentaire de ce fichier-là. Sur une adresse fixe, `immutable` fige
 * l'écran dans le navigateur de chacun sans que rien côté serveur ne le
 * voie.
 *
 * Un vrai fichier plutôt qu'un bloc <style> en PHP : le contrôle
 * typographique du dépôt saute les blocs de style, et le cache du
 * navigateur ne sait pas garder ce qui est enfermé dans une page. */

/* ─── La palette du code couleur, complète dès maintenant ────────────────
 *
 * Elle vient du CLAUDE.md commun, et elle dit LA NATURE DE L'OBJET, jamais
 * la marque ni la société. Le groupe porte quatre identités d'agence et la
 * pente naturelle serait une couleur par agence : elle serait fausse. Un
 * utilisateur ne passe pas sa journée à se demander pour quelle société il
 * travaille — un sélecteur le lui dit — mais il a besoin de savoir d'un
 * coup d'œil ce qu'il a sous les yeux.
 *
 * Elle est posée entière alors qu'un seul domaine sert aujourd'hui : c'est
 * une liste fermée, elle ne se complète pas au fil des écrans, et la
 * recopier écran par écran est exactement la façon dont sept teintes
 * finissent par en faire douze.
 *
 * La teinte porte la nature, la clarté porte l'état : un objet qui n'est
 * pas encore devenu ce qu'il sera prend un dégradé de sa couleur
 * d'arrivée — un candidat locataire porte le bleu éclairci, un mandat en
 * cours de signature le vert éclairci. */
:root {
  --jour:          #136e72;   /* le travail du jour — laurier */
  --locataires:    #2c6b95;   /* bleu */
  --proprietaires: #2f6b46;   /* vert */
  --fournisseurs:  #8a5a12;   /* ocre */
  --banques:       #41586b;   /* ardoise */
  --cautions:      #6b3f63;   /* prune */
  --comptabilite:  #4a4a8a;   /* indigo */

  --domaine: var(--jour);

  --papier:   #fbfbf9;
  --carte:    #ffffff;
  --encre:    #16211f;
  --gris:     #5f6b69;
  --reglure:  #e2e6e2;
  --ombre:    0 1px 2px rgba(16, 32, 31, .05), 0 10px 28px rgba(16, 32, 31, .06);
}

[data-domaine="jour"]          { --domaine: var(--jour); }
[data-domaine="locataires"]    { --domaine: var(--locataires); }
[data-domaine="proprietaires"] { --domaine: var(--proprietaires); }
[data-domaine="fournisseurs"]  { --domaine: var(--fournisseurs); }
[data-domaine="banques"]       { --domaine: var(--banques); }
[data-domaine="cautions"]      { --domaine: var(--cautions); }
[data-domaine="comptabilite"]  { --domaine: var(--comptabilite); }

/* La police du groupe, servie depuis ce domaine et jamais depuis Google
 * Fonts : aucune requête vers un tiers, donc pas de bandeau de
 * consentement. Les fichiers sont posés par le déploiement, qui les tire
 * de @fontsource/philosopher. L'italique gras est laissé au navigateur,
 * qui le synthétise. */
@font-face {
  font-family: "Philosopher";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/polices/philosopher-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Philosopher";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/polices/philosopher-latin-700-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Philosopher";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/polices/philosopher-latin-400-italic.woff2") format("woff2");
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font: 16px/1.62 "Philosopher", "Palatino Linotype", Palatino, Georgia, serif;
  -webkit-font-smoothing: antialiased;
}

/* Les blocs de texte sont justifiés sur tous les sites du groupe. */
p, li, dd, blockquote { text-align: justify; }

.bandeau {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.6rem 1.5rem 1.1rem;
  /* Le filet du titre porte la couleur du domaine — une seule à la fois.
   * Le reste demeure neutre. */
  border-bottom: 3px solid var(--domaine);
  background: var(--carte);
}

.bandeau h1 {
  margin: 0;
  font-size: 1.5rem;
  color: var(--domaine);
}

/* Le bouton retour et le titre voyagent ensemble, à gauche du bandeau. */
.bandeau-debut { display: flex; align-items: center; gap: .9rem; min-width: 0; }

.qui {
  margin: 0;
  font-size: .92rem;
  color: var(--gris);
  text-align: right;
}

.qui .role {
  border: 1px solid var(--reglure);
  border-radius: 99px;
  padding: .1em .6em;
  font-size: .82rem;
}

.qui a { color: var(--domaine); }

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

.carte {
  background: var(--carte);
  border: 1px solid var(--reglure);
  border-left: 4px solid var(--domaine);
  border-radius: 0 10px 10px 0;
  padding: 1.4rem 1.6rem;
  box-shadow: var(--ombre);
}

.carte h2 {
  margin: 0 0 .5em;
  font-size: 1.15rem;
  color: var(--domaine);
}

.carte p + p { margin-top: .8em; }

.bouton {
  display: inline-block;
  margin-top: 1.2rem;
  padding: .7em 1.4em;
  border-radius: 8px;
  background: var(--domaine);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}

.bouton:hover { filter: brightness(1.08); }

footer {
  max-width: 46rem;
  margin: 0 auto;
  padding: 1rem 1.5rem 3rem;
  border-top: 1px solid var(--reglure);
  color: var(--gris);
  font-size: .82rem;
}

/* Le mode sombre suit le réglage du visiteur. Les teintes de domaine sont
 * éclaircies pour tenir le contraste sur fond foncé ; leurs rôles ne
 * changent pas — c'est la même liste, jamais une seconde. */
@media (prefers-color-scheme: dark) {
  :root {
    --jour:          #5fb8b6;
    --locataires:    #7fb0d8;
    --proprietaires: #7cc39a;
    --fournisseurs:  #d6a24f;
    --banques:       #93a8b8;
    --cautions:      #c090b8;
    --comptabilite:  #9d9dd6;

    --papier:  #111817;
    --carte:   #18211f;
    --encre:   #e6ece9;
    --gris:    #9caba8;
    --reglure: #233230;
    --ombre:   0 1px 2px rgba(0, 0, 0, .3), 0 10px 28px rgba(0, 0, 0, .35);
  }

  .bouton { color: #0d1615; }
}

/* « Créer un tiers » dans le bandeau — 1er octobre 2026. Le sommaire suit la
   forme des boutons ronds (boutons-ronds.css ne vise que button et a, et il
   est commun aux trois applications : on ne l'élargit pas d'ici). */
.creer-tiers { position: relative; align-self: center; }
.creer-tiers > summary { list-style: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; font-size: 0; cursor: pointer; box-shadow: inset 0 0 0 1px currentColor; color: #c3d5d2; }
.creer-tiers > summary::-webkit-details-marker { display: none; }
.creer-tiers > summary > svg.ic { width: 28px; height: 28px; }
.creer-tiers > summary:focus-visible { outline: 2px solid var(--domaine); outline-offset: 2px; }
.creer-tiers > div { position: absolute; z-index: 50; top: calc(100% + .3rem); left: 0; display: grid; min-width: 15rem; padding: .3rem 0; background: var(--carte); border: 1px solid var(--reglure); border-radius: 6px; box-shadow: 0 6px 18px rgb(0 0 0 / .15); }
.bandeau details.creer-tiers > div > a { color: var(--encre); font-size: .9rem; padding: .45rem .9rem; text-decoration: none; white-space: nowrap; }
.creer-tiers > div > a:hover, .creer-tiers > div > a:focus-visible { background: color-mix(in srgb, var(--domaine) 12%, transparent); }

/* L'agence sur laquelle on travaille, à côté du nom — 2 octobre 2026. */
.qui .agence, .qui .agence-choix select { border: 1px solid currentColor; border-radius: 99px; padding: .1em .6em; font-size: .82rem; color: inherit; background: transparent; }
.qui .agence-choix { display: inline; margin: 0; }
.qui .agence-choix select { width: auto; min-height: 0; margin: 0; cursor: pointer; }
.qui .agence-choix option { color: var(--encre); background: var(--carte); }

/* Le bandeau prend la couleur de l'agence (13 octobre 2026) : sur fond
 * sombre, ses textes passent en clair. Le préfixe « html body » (0,3,2)
 * l'emporte sur les règles des écrans « espace » (enumerations.css, chargé
 * après, 0,3,1), pour un bloc d'une seule couleur. */
html body .bandeau[data-agence] h1, html body .bandeau[data-agence] .qui, html body .bandeau[data-agence] a { color: #fff; }