:root {
  color-scheme: dark;
  --fond: #14110f;
  --fond-carte: #1b1714;
  --bord: #3a322a;
  --encre: #e8ded0;
  --encre-douce: #b7a894;
  --accent: #c9a227;
  --erreur: #d98878;
  --reussite: #8fb87a;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  font: 16px/1.6 system-ui, -apple-system, 'Segoe UI', sans-serif;
  background: var(--fond);
  color: var(--encre);
}

main { width: 100%; max-width: 30rem; }

h1 {
  font-size: 1.6rem;
  margin: 0 0 .3rem;
  letter-spacing: .02em;
}

p { margin: .5rem 0; color: var(--encre-douce); }

.carte {
  border: 1px solid var(--bord);
  background: var(--fond-carte);
  border-radius: .6rem;
  padding: 1.4rem;
  margin-top: 1.2rem;
}

.onglets { display: flex; gap: .4rem; margin-bottom: 1.2rem; }

.onglets button {
  flex: 1;
  padding: .5rem;
  border: 1px solid var(--bord);
  border-radius: .4rem;
  background: transparent;
  color: var(--encre-douce);
  font: inherit;
  cursor: pointer;
}

.onglets button[aria-selected='true'] {
  background: var(--bord);
  color: var(--encre);
}

label { display: block; margin-top: .9rem; font-size: .9rem; color: var(--encre-douce); }

input {
  width: 100%;
  margin-top: .25rem;
  padding: .55rem .7rem;
  border: 1px solid var(--bord);
  border-radius: .4rem;
  background: #100d0b;
  color: var(--encre);
  font: inherit;
}

input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

button.principal {
  width: 100%;
  margin-top: 1.3rem;
  padding: .65rem;
  border: none;
  border-radius: .4rem;
  background: var(--accent);
  color: #191308;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

button.principal:disabled { opacity: .55; cursor: progress; }

.lien {
  background: none;
  border: none;
  padding: 0;
  margin-top: 1rem;
  color: var(--encre-douce);
  font: inherit;
  font-size: .88rem;
  text-decoration: underline;
  cursor: pointer;
}

.message { margin-top: 1rem; font-size: .9rem; }
.message.erreur { color: var(--erreur); }
.message.reussite { color: var(--reussite); }

.mention {
  margin-top: 1.2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--bord);
  font-size: .82rem;
  line-height: 1.5;
  color: var(--encre-douce);
}

.code {
  margin: 1rem 0;
  padding: 1rem;
  border: 1px dashed var(--accent);
  border-radius: .4rem;
  font-family: ui-monospace, Consolas, monospace;
  font-size: 1.15rem;
  letter-spacing: .08em;
  text-align: center;
  color: var(--encre);
  word-break: break-all;
}

.technique {
  margin-top: 1.2rem;
  padding: .8rem 1rem;
  border: 1px solid var(--bord);
  border-radius: .5rem;
  background: var(--fond-carte);
  font-family: ui-monospace, Consolas, monospace;
  font-size: .82rem;
  white-space: pre-wrap;
  color: var(--encre-douce);
}

.cache { display: none !important; }

/* Même garde que dans `app.css` : le `display: none` d'un élément `hidden` est
   une règle d'agent utilisateur, que la moindre règle d'auteur bat. Ces pages
   n'ont pas encore payé ce défaut ; elles ne le paieront pas. */
[hidden] { display: none !important; }

/* --------------------------------------------------------------------------
 * La liste des sauvegardes (provisoire : l'interface des arbres arrive au
 * lot 4, celle-ci sert à manipuler ses mondes en attendant).
 * -------------------------------------------------------------------------- */

body.haut { align-items: flex-start; }
main.large { max-width: 46rem; }

.entete {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1rem;
  align-items: baseline;
  justify-content: space-between;
}

.entete .lien { margin-top: 0; }

.rangee { display: flex; flex-wrap: wrap; gap: .6rem; align-items: flex-end; }
.rangee label { flex: 1 1 14rem; margin-top: 0; }

.bouton {
  padding: .45rem .8rem;
  border: 1px solid var(--bord);
  border-radius: .4rem;
  background: transparent;
  color: var(--encre);
  font: inherit;
  font-size: .88rem;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}

.bouton:hover { border-color: var(--accent); }
.bouton.accent { background: var(--accent); border-color: var(--accent); color: #191308; font-weight: 600; }
.bouton.danger:hover { border-color: var(--erreur); color: var(--erreur); }
/* Un bouton éteint parce qu'il n'est pas encore armé n'est pas un bouton qui
   travaille. Le curseur « progress » d'avant faisait attendre la fin d'un
   calcul qui n'avait jamais commencé — on nous a rapporté « le bouton charge
   longtemps ». Seule la classe `occupe`, posée le temps d'une requête, annonce
   une attente. */
.bouton:disabled { opacity: .55; cursor: not-allowed; }
.bouton.occupe { cursor: progress; }

.liste { list-style: none; margin: 1.2rem 0 0; padding: 0; }

.liste li {
  border: 1px solid var(--bord);
  border-radius: .5rem;
  padding: .8rem 1rem;
  margin-top: .6rem;
}

.liste .titre { font-weight: 600; }
.liste .detail { margin-top: .15rem; font-size: .82rem; color: var(--encre-douce); }
.liste .actions { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .7rem; }

.vide {
  margin-top: 1.2rem;
  padding: 1.2rem;
  border: 1px dashed var(--bord);
  border-radius: .5rem;
  text-align: center;
}

/* ------------------------------------------------- page « Vos données » */

/* Cette page est plus large que la connexion : c'est un tableau, pas un
   formulaire de trois champs. */
body.large main { max-width: 44rem; }

h2 { font-size: 1.05rem; margin: 0 0 .6rem; color: var(--encre); }

.donnees { width: 100%; border-collapse: collapse; font-size: .9rem; }
.donnees th,
.donnees td { padding: .45rem .2rem; border-bottom: 1px solid var(--bord); text-align: left; }
.donnees th { color: var(--encre-douce); font-weight: 500; width: 42%; }
.donnees tr:last-child th,
.donnees tr:last-child td { border-bottom: 0; }

.carte.danger { border-color: #6d3a33; }
.carte.danger h2 { color: var(--erreur); }

/* Un bouton qui efface ne doit pas ressembler à un bouton qui enregistre. */
.principal.danger { background: var(--erreur); color: #1b1714; }

a.principal { display: block; text-align: center; text-decoration: none; }

code {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: .88em;
  color: var(--accent);
}

/* ------------------------------------------------- page « Administration » */

body.tres-large main { max-width: 68rem; }

/* Ce qu'on engage en ouvrant l'arbre de quelqu'un d'autre, dit avant de le
   faire — pas dans une page de mentions. */
.bandeau {
  border: 1px solid var(--accent);
  border-left-width: 3px;
  background: rgba(201, 162, 39, .07);
  padding: .7rem .9rem;
  border-radius: 4px;
  font-size: .86rem;
  line-height: 1.5;
  color: var(--encre-douce);
  margin-bottom: 1rem;
}
.bandeau.lecture { margin-bottom: .8rem; }
.bandeau strong { color: var(--accent); }

/* Les tableaux d'administration débordent : ils défilent dans leur boîte,
   jamais la page. */
.defilant { overflow-x: auto; }
.donnees.serree { font-size: .82rem; white-space: nowrap; }
.donnees.serree th { width: auto; color: var(--encre-douce); }
.donnees.serree td { color: var(--encre); }

/* La colonne d'actions reste collée au bord droit.
 *
 * Signalé le 13/08/2026 : « je ne vois pas comment faire passer une personne
 * intendant, ni comment accéder aux arbres des différents comptes ». Les deux
 * boutons existaient — « Nommer intendant » et « Arbres » — mais le tableau
 * mesurait 1087 px dans une boîte de 1042 : **la colonne entière tombait à
 * droite de l'écran**, derrière un défilement horizontal que rien n'annonçait.
 * Elle ne bouge plus.
 *
 * `box-shadow: inset` plutôt que `border-bottom` : sur une table en
 * `border-collapse: collapse`, les bordures d'une cellule collante ne se
 * dessinent pas. Le second voile, à gauche, dit qu'il y a du contenu dessous. */
.donnees.serree td.actions,
.donnees.serree thead th:last-child {
  position: sticky;
  right: 0;
  background: var(--fond-carte);
  box-shadow:
    inset 0 -1px 0 var(--bord),
    -8px 0 8px -8px rgba(0, 0, 0, .55);
}

/* -------------------------------------------- l'administration au doigt (12.B)
 *
 * Mesuré le 14/08/2026 sur 375 px : le tableau des comptes faisait **715 px
 * dans une boîte de 281** — 434 px de défilement latéral pour lire une ligne,
 * colonne par colonne, l'en-tête resté hors champ. Et les cases à cocher, dont
 * dépendent les lots, le panorama et les tutelles, mesuraient **13 × 13 px**.
 *
 * Un tableau de sept colonnes ne rentre pas dans 375 px et n'y rentrera jamais.
 * On cesse donc d'en faire un : chaque ligne devient une carte, chaque cellule
 * porte l'intitulé de sa colonne à gauche. Les tableaux qui restent des
 * tableaux — le panorama, le résultat d'un lot, l'arbre à plat — n'ont pas la
 * classe `cartes` : ce sont des relevés qu'on parcourt, pas des objets sur
 * lesquels on agit, et leur défilement latéral est le bon comportement.
 */
@media (max-width: 760px) {
  /* 1,5 rem de marge de chaque côté sur un écran de 375, c'est 13 % de la
     largeur donnée au vide. */
  body { padding: .8rem; }
  .carte { padding: .9rem; }

  /* La colonne d'actions collée serait pire que le mal : elle fait 386 px, plus
     large que l'écran — elle recouvrirait le tableau qu'elle accompagne. */
  .donnees.serree td.actions,
  .donnees.serree thead th:last-child { position: static; box-shadow: none; }
  .donnees.serree td.actions { white-space: normal; }
  .donnees.serree td.actions .lien,
  .donnees.serree td.actions a { display: inline-flex; align-items: center; }

  /* Le tableau cesse d'être une grille. `display: block` partout : les cellules
     ne sont plus alignées entre lignes, et c'est exactement le but. */
  .donnees.serree.cartes,
  .donnees.serree.cartes tbody,
  .donnees.serree.cartes tr,
  .donnees.serree.cartes td { display: block; width: auto; }
  .donnees.serree.cartes { white-space: normal; }
  .donnees.serree.cartes thead { display: none; }

  .donnees.serree.cartes tr {
    border: 1px solid var(--bord);
    border-radius: .5rem;
    padding: .55rem .7rem;
    margin-bottom: .7rem;
  }
  .donnees.serree.cartes td {
    display: flex;
    gap: .6rem;
    align-items: baseline;
    padding: .22rem 0;
    border-bottom: 0;
  }
  /* L'intitulé vient du `<th>`, recopié par `etiqueter()`. Une cellule sans
     intitulé — la colonne d'actions, une ligne « il n'y a rien » — s'étale sur
     toute la largeur, ce qui est le bon rendu pour elles. */
  .donnees.serree.cartes td[data-libelle]::before {
    content: attr(data-libelle);
    flex: 0 0 7rem;
    color: var(--encre-douce);
    font-size: .78rem;
  }

  /* La case à cocher gouverne toute la carte : c'est elle qui décide si le
     compte entre dans un lot. À 13 px, on la manquait une fois sur deux. */
  .donnees.serree.cartes td.coche {
    width: auto;
    min-height: 40px;
    align-items: center;
    cursor: pointer;
  }
  .donnees.serree.cartes input[type='checkbox'] { width: 22px; height: 22px; }

  .donnees.serree.cartes td.actions {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem .9rem;
    margin-top: .45rem;
    padding-top: .45rem;
    border-top: 1px solid var(--bord);
  }

  /* Une seule règle pour toute la page : à cette largeur, rien de ce qui se
     touche ne descend sous 40 px. « ← Revenir à mes arbres », le seul bouton
     toujours présent, en faisait 23. */
  .lien,
  .bouton { min-height: 40px; display: inline-flex; align-items: center; }

  /* Les champs du formulaire de lot. `font-size: 16px` n'est pas une
     coquetterie : en dessous, iOS zoome sur le champ au premier appui et laisse
     la page décadrée, impossible à récupérer d'une main. */
  select,
  textarea,
  input:not([type='checkbox']) { min-height: 40px; font-size: 16px; }
  /* Les bascules du lot — « Poser la date », « Poser le lien de campagne » —
     décidaient d'un geste sur tous les arbres d'une table depuis 13 px. */
  .bascule { min-height: 40px; }
  .bascule input[type='checkbox'] { width: 22px; height: 22px; }
}

.actions { display: flex; gap: .6rem; align-items: center; }
.actions .lien,
.actions a { margin: 0; font-size: .8rem; white-space: nowrap; }
.actions a { color: var(--encre-douce); }
.lien.danger { color: var(--erreur); }

.note { font-size: .8rem; color: var(--encre-douce); margin: .6rem 0 0; }

/* ----------------------------------------------- les lots (10.A) */

/* `input` est large par défaut sur les pages de formulaire ; une case à cocher
   qui prend toute la colonne rendrait le tableau illisible. */
.donnees .coche { width: 2rem; }
input[type='checkbox'] { width: auto; margin: 0; vertical-align: middle; }

/* `select` n'existait pas avant cette page : il s'aligne sur `input`. */
select {
  width: 100%;
  margin-top: .25rem;
  padding: .55rem .7rem;
  border: 1px solid var(--bord);
  border-radius: .4rem;
  background: #100d0b;
  color: var(--encre);
  font: inherit;
}
select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

textarea {
  width: 100%;
  margin-top: .25rem;
  padding: .55rem .7rem;
  border: 1px solid var(--bord);
  border-radius: .4rem;
  background: #100d0b;
  color: var(--encre);
  font: inherit;
  resize: vertical;
}

/* Les champs d'un lot : deux colonnes tant que la place le permet. */
.grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 0 1rem;
  margin-top: .4rem;
}
.grille label { margin-top: .7rem; }

/* Les sept caractéristiques d'une maison : plus étroites, elles tiennent en
   une bande plutôt qu'en colonne. */
.grille.serree { grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); }

.sous-titre {
  margin: 1.1rem 0 0;
  font-size: .82rem;
  color: var(--encre-douce);
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* Une case à cocher suivie de son libellé, sur la même ligne. */
.bascule { display: flex; align-items: center; gap: .5rem; margin-top: .9rem; font-size: .9rem; }
.bascule input { flex: none; }
label .bascule { margin-top: .35rem; }
label .note { display: block; margin-top: .25rem; }
input:disabled, select:disabled, textarea:disabled { opacity: .45; }

.actions { margin-top: 1rem; }

/* La raison pour laquelle « Appliquer » est éteint, à côté du bouton et non
   dans un paragraphe plus haut : c'est là qu'on regarde. */
.actions .raison { margin: 0; flex: 1 1 14rem; white-space: normal; }

/* L'issue de chaque sauvegarde dans un lot, lisible d'un coup d'œil. */
.etat-cree { color: var(--reussite); }
.etat-mis_a_jour { color: var(--accent); }
.etat-inchange { color: var(--encre-douce); }
.etat-refuse { color: var(--erreur); }

/* Ce que les comptes partagent, et ce qui n'est qu'à certains. */
.etiquettes { display: flex; flex-wrap: wrap; gap: .35rem; margin: .3rem 0 0; padding: 0; list-style: none; }
.etiquettes li {
  border: 1px solid var(--bord);
  border-radius: .8rem;
  padding: .1rem .55rem;
  font-size: .78rem;
  color: var(--encre-douce);
}
.etiquettes li.partage { border-color: var(--reussite); color: var(--reussite); }

/* ------------------------------ le rapprochement des fiches (12.C) */

/* Un groupe = une personne, et ses écritures concurrentes. Pas un tableau :
   il n'y a que deux ou trois lignes par groupe, et chacune porte un bouton —
   une liste se lit mieux, et tient au téléphone sans défiler de côté. */
.groupe-fiches {
  border: 1px solid var(--bord);
  border-radius: .5rem;
  padding: .6rem .8rem;
  margin-top: .7rem;
}
.groupe-fiches .titre-groupe { margin: 0; font-weight: 600; font-size: .92rem; }

.liste-variantes { list-style: none; margin: .5rem 0 0; padding: 0; }
.liste-variantes li {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
  justify-content: space-between;
  padding: .45rem 0;
  border-top: 1px solid var(--bord);
}
.variante-quoi { display: flex; flex-wrap: wrap; gap: .2rem .6rem; align-items: baseline; }
.variante-nom { font-size: .88rem; }
/* L'identifiant est la vraie information de cette ligne : c'est lui qui décide
   si un lot met à jour la fiche ou en fabrique une de plus. */
.liste-variantes code { font-size: .78rem; color: var(--accent); }
.liste-variantes .detail {
  flex-basis: 100%;
  font-size: .78rem;
  color: var(--encre-douce);
}

/* ------------------------------------------- la connexion Google (10.C) */

/* Un « ou » posé sur un trait : les deux façons d'entrer sont équivalentes,
   la mise en page doit le dire. */
.separateur {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin: 1.2rem 0 .9rem;
  color: var(--encre-douce);
  font-size: .82rem;
}
.separateur::before,
.separateur::after {
  content: '';
  flex: 1;
  border-top: 1px solid var(--bord);
}

.bouton.pleine-largeur {
  display: block;
  width: 100%;
  padding: .65rem;
  text-align: center;
  font-size: 1rem;
}