:root {
  color-scheme: dark;
  --fond: #0a1428;
  --fond-2: #0f1e3d;
  --carte: #13244a;
  --ligne: #22386a;
  --texte: #f2f5fa;
  --doux: #9fb0cc;
  --bleu: #1f6fff;
  --rouge: #ff5a5f;
  --vert: #35c07a;
}
:root[data-theme="light"] {
  color-scheme: light;
  --fond: #f3f6fb;
  --fond-2: #ffffff;
  --carte: #ffffff;
  --ligne: #d5deec;
  --texte: #0b1730;
  --doux: #5a6a85;
  --bleu: #1a5fe0;
  --rouge: #d42a1e;
  --vert: #14804a;
}
:root[data-theme="light"] .tuile, :root[data-theme="light"] .fiche,
:root[data-theme="light"] .carte-formulaire, :root[data-theme="light"] .graphique,
:root[data-theme="light"] .graphe-anneau { border: 1px solid var(--ligne); }
:root[data-theme="light"] .ambre { color: #a35a00; }
button.theme { background: transparent; color: var(--doux); border: 1px solid var(--ligne); padding: 6px 10px; }
.connexion button.theme { position: fixed; top: 12px; right: 12px; }
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  min-height: 100vh;
  background: var(--fond);
  color: var(--texte);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
}
[hidden] { display: none !important; }
h1 span, strong span { color: var(--bleu); }
.doux { color: var(--doux); }
.erreur { color: var(--rouge); min-height: 1.2em; }

.connexion {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 100vh; padding: 16px;
  background: radial-gradient(ellipse at top, var(--fond-2), var(--fond) 70%);
}
.connexion .logo { width: 72px; border-radius: 22%; }
.connexion form { width: min(340px, 100%); display: grid; gap: 12px; }
.connexion .qr { width: 200px; height: 200px; background: #fff; border-radius: 8px; padding: 8px; justify-self: center; }
code { word-break: break-all; }
.approbation { width: min(340px, 100%); display: grid; gap: 12px; text-align: center; }
.nombre { font-size: 4rem; font-weight: 700; margin: 0; color: var(--texte); }

label { display: grid; gap: 4px; color: var(--doux); font-size: .9rem; }
input, select {
  font: inherit; color: var(--texte); background: var(--fond-2);
  border: 1px solid var(--ligne); border-radius: 8px; padding: 9px 10px;
}
button {
  font: inherit; font-weight: 600; color: #fff; background: var(--bleu);
  border: 0; border-radius: 8px; padding: 9px 14px; cursor: pointer;
}
button.discret { background: transparent; color: var(--doux); border: 1px solid var(--ligne); }
button.danger { background: var(--rouge); }
button:disabled { opacity: .5; cursor: default; }

/* La coquille : une colonne de navigation à gauche, le contenu à droite. */
.coquille { display: grid; grid-template-columns: 232px 1fr; min-height: 100vh; }
.cote {
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 20px;
  padding: 20px 14px; background: var(--fond-2); border-right: 1px solid var(--ligne);
}
.marque { display: flex; align-items: center; gap: 10px; padding: 0 8px; }
.marque img { width: 32px; height: 32px; border-radius: 22%; }
.marque strong { font-size: 1.15rem; }
.marque em { font-style: normal; color: var(--doux); font-size: .85rem; margin-left: auto; }
.cote nav { display: grid; gap: 2px; }
.cote nav button {
  text-align: left; background: transparent; color: var(--doux); font-weight: 500;
  padding: 9px 12px; border-radius: 8px;
}
.cote nav button:hover { background: var(--carte); color: var(--texte); }
.cote nav button.actif { background: var(--bleu); color: #fff; }
.compte { margin-top: auto; display: grid; gap: 10px; padding: 12px 8px 0; border-top: 1px solid var(--ligne); }
.compte #qui { display: grid; gap: 6px; justify-items: start; font-size: .8rem; }
.compte .courriel { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.compte-actions { display: grid; gap: 8px; }
.compte-actions button { width: 100%; padding: 8px 10px; font-size: .85rem; white-space: nowrap; }
.principal { min-width: 0; }

/* Téléphone : la colonne devient une bande, les sections défilent. */
@media (max-width: 800px) {
  .coquille { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .cote {
    position: sticky; top: 0; z-index: 1; height: auto; display: grid; gap: 10px;
    grid-template-columns: 1fr auto; padding: 10px 12px; border-right: 0; border-bottom: 1px solid var(--ligne);
  }
  .marque { padding: 0; }
  .marque em, .compte #qui { display: none; }
  .compte { grid-column: 2; grid-row: 1; margin: 0; padding: 0; border: 0; }
  .compte-actions { display: flex; }
  .compte-actions button { width: auto; padding: 6px 10px; }
  .cote nav { grid-column: 1 / -1; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
  .cote nav::-webkit-scrollbar { display: none; }
  .cote nav button { white-space: nowrap; padding: 7px 14px; border-radius: 999px; background: var(--fond); }
}

.message { margin: 12px 16px 0; padding: 10px 12px; border-radius: 8px; background: var(--carte); }
.message.erreur { color: #fff; background: var(--rouge); }

main#contenu { padding: 16px; max-width: 1100px; margin: 0 auto; }
h2 { margin: 8px 0 12px; }
h3 { margin: 20px 0 8px; }
.outils { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; align-items: end; }
.outils input { flex: 1; min-width: 180px; }

.tuiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.tuile { background: var(--carte); border-radius: 12px; padding: 14px; }
.tuile b { display: block; font-size: 1.8rem; }

.table { width: 100%; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 8px; border-bottom: 1px solid var(--ligne); vertical-align: top; }
th { color: var(--doux); font-weight: 500; font-size: .85rem; }
tr.cliquable { cursor: pointer; }
tr.cliquable:hover td { background: var(--carte); }
.pastille { display: inline-block; padding: 1px 8px; border-radius: 999px; background: var(--ligne); font-size: .8rem; }
.pastille.proprio { background: var(--bleu); color: #fff; }

.fiche { background: var(--carte); border-radius: 12px; padding: 16px; display: grid; gap: 12px; }
.fiche .grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; }
ul.simple { margin: 0; padding-left: 18px; }
pre { white-space: pre-wrap; word-break: break-word; margin: 0; font-size: .8rem; color: var(--doux); }

/* Le bouton d'Apple : noir, logo et texte blancs (règles d'Apple). */
button.apple { background: #000; color: #fff; border: 1px solid #555; display: flex; align-items: center; justify-content: center; gap: 8px; }
button.apple svg { width: 15px; height: 18px; margin-top: -3px; }
.connexion .ou { text-align: center; color: var(--doux); margin: 0; }

/* Finances : graphiques SVG faits ici. */
.vert { color: var(--vert); }
.rouge { color: var(--rouge); }
.ambre { color: #f5b642; }
.graphique { width: 100%; height: auto; display: block; background: var(--carte); border-radius: 12px; padding: 8px; }
.legende { display: flex; flex-wrap: wrap; gap: 14px; margin: 8px 4px; color: var(--doux); font-size: .85rem; }
.legende span { display: inline-flex; align-items: center; gap: 6px; }
svg.point { width: 10px; height: 10px; vertical-align: middle; }
.graphe-anneau { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; background: var(--carte); border-radius: 12px; padding: 12px; }
.anneau { width: 160px; height: 160px; }
ul.parts { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; flex: 1; min-width: 180px; }
ul.parts li { display: flex; align-items: center; gap: 8px; }
ul.parts li b { margin-left: auto; font-weight: 500; }
.deux-colonnes { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
label.case { display: inline-flex; align-items: center; gap: 8px; color: var(--texte); font-size: .95rem; }
label.case input { width: 18px; height: 18px; margin: 0; accent-color: var(--bleu); }
.carte-formulaire { background: var(--carte); border-radius: 12px; padding: 16px; display: grid; gap: 16px; }
.carte-formulaire .champs { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.carte-formulaire .champs .large { grid-column: span 2; }
.carte-formulaire input, .carte-formulaire select { width: 100%; height: 40px; }
.carte-formulaire .pied-formulaire { display: flex; flex-wrap: wrap; align-items: end; gap: 16px; }
.carte-formulaire .pied-formulaire label:not(.case) { min-width: 180px; }
.carte-formulaire .pied-formulaire button { margin-left: auto; height: 40px; }
@media (max-width: 520px) { .carte-formulaire .champs .large { grid-column: auto; } }

/* Photos à approuver */
.photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.photos .tuile { display: flex; flex-direction: column; gap: 6px; }
.photos .photo { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; background: var(--fond); }