/* Sillon — le socle visuel. Palette neutre de travail, en attendant la
   marque : rien n'y vient d'une autre application. */
:root {
  --fond: #f6f5f1; --surface: #ffffff; --encre: #1d2320; --doux: #5c6660; --trait: #dedbd2;
  --accent: #2f6b4f; --accent-encre: #ffffff; --accent-doux: #e4efe8;
  --attention: #9a5b12; --attention-doux: #fbf0de; --danger: #b3261e; --danger-doux: #fbe7e5;
  --ok: #2f6b4f; --rayon: 10px; --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 24px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fond: #141816; --surface: #1d2320; --encre: #ecefe9; --doux: #a3aca6; --trait: #313a35;
    --accent: #6fbf95; --accent-encre: #0f1a14; --accent-doux: #22352b;
    --attention: #e0a85a; --attention-doux: #3a2d1a; --danger: #f08a80; --danger-doux: #3d2220; --ok: #6fbf95;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --fond: #141816; --surface: #1d2320; --encre: #ecefe9; --doux: #a3aca6; --trait: #313a35;
  --accent: #6fbf95; --accent-encre: #0f1a14; --accent-doux: #22352b;
  --attention: #e0a85a; --attention-doux: #3a2d1a; --danger: #f08a80; --danger-doux: #3d2220; --ok: #6fbf95;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--fond); color: var(--encre); font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
a { color: var(--accent); }
.barre { display: flex; align-items: center; gap: var(--e3); padding: var(--e3) var(--e4); background: var(--surface);
  border-bottom: 1px solid var(--trait); position: sticky; top: 0; z-index: 5; flex-wrap: wrap; }
.barre .marque { font-weight: 700; letter-spacing: .02em; color: var(--encre); text-decoration: none; }
.barre .agence { color: var(--doux); }
.barre nav { display: flex; gap: var(--e2); flex-wrap: wrap; }
.barre nav a { text-decoration: none; padding: var(--e1) var(--e2); border-radius: 6px; color: var(--encre); }
.barre nav a.ici { background: var(--accent-doux); color: var(--accent); font-weight: 600; }
.barre .droite { margin-left: auto; display: flex; gap: var(--e2); align-items: center; }
.page { max-width: 1100px; margin: 0 auto; padding: var(--e5) var(--e4) 64px; }
.page.etroite { max-width: 460px; }
h1 { font-size: 1.5rem; margin: 0 0 var(--e2); }
h2 { font-size: 1.1rem; margin: 0 0 var(--e3); }
.sous { color: var(--doux); margin: 0 0 var(--e4); }
.carte { background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon); padding: var(--e4); margin-bottom: var(--e4); }
.grille { display: grid; gap: var(--e4); grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.tuile { background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon); padding: var(--e4); cursor: pointer; }
.tuile:hover { border-color: var(--accent); }
.tuile .chiffre { font-size: 1.6rem; font-weight: 700; }
.doux { color: var(--doux); }
label { display: block; margin-bottom: var(--e3); font-size: .9rem; color: var(--doux); }
label > input, label > select, label > textarea { display: block; width: 100%; margin-top: var(--e1); }
input, select, textarea, button { font: inherit; }
input, select, textarea { padding: 9px 10px; border: 1px solid var(--trait); border-radius: 8px; background: var(--surface); color: var(--encre); min-height: 42px; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; min-height: 42px; border-radius: 8px; border: 1px solid var(--accent);
  background: var(--accent); color: var(--accent-encre); cursor: pointer; font-weight: 600; text-decoration: none; }
.btn.second { background: transparent; color: var(--accent); }
.btn.discret { background: transparent; border-color: var(--trait); color: var(--encre); font-weight: 400; }
.btn.danger { background: transparent; border-color: var(--danger); color: var(--danger); }
.btn:disabled { opacity: .55; cursor: wait; }
.rang { display: flex; gap: var(--e2); flex-wrap: wrap; align-items: flex-end; }
.rang > label { flex: 1 1 180px; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--trait); vertical-align: top; }
th { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--doux); font-weight: 600; }
tr.ouvre { cursor: pointer; }
tr.ouvre:hover td { background: var(--accent-doux); }
.table-defile { overflow-x: auto; }
.badge { display: inline-block; padding: 1px 8px; border-radius: 99px; font-size: .8rem; background: var(--trait); color: var(--encre); }
.badge.ok { background: var(--accent-doux); color: var(--ok); }
.badge.attention { background: var(--attention-doux); color: var(--attention); }
.badge.danger { background: var(--danger-doux); color: var(--danger); }
.message { padding: var(--e3) var(--e4); border-radius: 8px; margin-bottom: var(--e4); }
.message.erreur { background: var(--danger-doux); color: var(--danger); border: 1px solid var(--danger); }
.message.ok { background: var(--accent-doux); color: var(--ok); border: 1px solid var(--ok); }
.message.info { background: var(--attention-doux); color: var(--attention); border: 1px solid var(--attention); }
.lien-copie { display: flex; gap: var(--e2); margin-top: var(--e2); }
.lien-copie input { flex: 1; font-family: ui-monospace, monospace; font-size: .85rem; }
.vide { color: var(--doux); padding: var(--e4); text-align: center; }
dialog { border: 1px solid var(--trait); border-radius: var(--rayon); background: var(--surface); color: var(--encre); padding: 0; width: min(560px, calc(100vw - 32px)); }
dialog::backdrop { background: rgba(0,0,0,.35); }
dialog .tete { padding: var(--e4); border-bottom: 1px solid var(--trait); display: flex; align-items: center; gap: var(--e2); }
dialog .tete h2 { margin: 0; flex: 1; }
dialog .corps { padding: var(--e4); max-height: 70vh; overflow: auto; }
dialog .pied { padding: var(--e3) var(--e4); border-top: 1px solid var(--trait); display: flex; gap: var(--e2); justify-content: flex-end; flex-wrap: wrap; }
.historique { list-style: none; padding: 0; margin: 0; }
.historique li { padding: var(--e2) 0; border-bottom: 1px dashed var(--trait); }
.historique li:last-child { border-bottom: 0; }
/* Le téléphone */
.app .page { padding: var(--e4) var(--e4) 88px; }
.app .membre { display: flex; justify-content: space-between; align-items: center; gap: var(--e2); padding: var(--e3) 0; border-bottom: 1px solid var(--trait); }
.app .membre:last-child { border-bottom: 0; }
@media (max-width: 640px) {
  .barre { padding: var(--e2) var(--e4); }
  .page { padding: var(--e4) var(--e4) 64px; }
  th.masque-mobile, td.masque-mobile { display: none; }
}
/* Une case à cocher avec son texte, sur une ligne. */
label.case { display: inline-flex; gap: 8px; align-items: center; color: var(--encre); }
label.case > input { display: inline-block; width: auto; min-height: auto; margin: 0; }

/* ── Repris des écrans (08/11/2026) : le style ne vit plus que dans ce fichier ── */
/* Les grilles */
  .cols { display: grid; gap: var(--e4); grid-template-columns: minmax(240px, 300px) 1fr; align-items: start; }
  @media (max-width: 800px) { .cols { grid-template-columns: 1fr; } }
  .liste-grilles button { display: block; width: 100%; text-align: left; margin-bottom: var(--e2); }
  .liste-grilles button.ici { border-color: var(--accent); background: var(--accent-doux); }
  td input, td select { width: 100%; min-width: 80px; }
/* Le téléphone : onglets et ventes */
  .onglets { display: flex; gap: var(--e2); margin-bottom: var(--e4); overflow-x: auto; }
  .onglets button { flex: 1 0 auto; }
  .onglets button.ici { background: var(--accent); color: var(--accent-encre); border-color: var(--accent); }
  .app input, .app select { font-size: 16px; }
  .vente { padding: var(--e3) 0; border-bottom: 1px solid var(--trait); cursor: pointer; }
  .vente:last-child { border-bottom: 0; }