/* ============================================================
   Les familles de MISE EN PAGE.
   ------------------------------------------------------------
   Daniel (17.09) : « je ne veux pas qu'il y ait que des couleurs,
   je veux tout l'aspect — comme ça je peux montrer plus de choses
   par rapport à ce que les gens veulent. »

   Deuxième axe, indépendant du style : trois façons de construire
   un écran. Elles se combinent avec les onze styles.

       <body data-style="ardoise" data-mise="registre">

   Ce qui change vraiment d'une famille à l'autre : la navigation,
   la forme d'une ligne de liste, le nombre de colonnes, la taille
   des cibles. Pas la couleur — ça, c'est themes.css.
   ============================================================ */

/* ============================================================
   1. CARTES — la mise en page d'origine
   Menu fixe à gauche, une carte par élément, une colonne.
   Rien à redéfinir : c'est app.css tel quel.
   ============================================================ */

/* ============================================================
   2. REGISTRE — une ligne par affaire, comme un journal de bord
   Menu étroit, tout sur une ligne, deux colonnes dès qu'il y a
   la place. Pour qui veut voir vingt chantiers d'un coup d'œil.
   ============================================================ */
body[data-mise="registre"] {
  --dense:.55;
  --radius:4px;
}
/* le menu se resserre : on vient y cliquer, pas y lire */
@media (min-width:900px) {
  body[data-mise="registre"] aside { width:186px; padding-left:8px; padding-right:8px; }
  body[data-mise="registre"] aside button { padding:7px 10px; font-size:14px; }
  body[data-mise="registre"] .content { margin-left:186px; }
}
body[data-mise="registre"] main { padding:10px 14px 40px; }
body[data-mise="registre"] header { padding-top:calc(env(safe-area-inset-top) + 10px); padding-bottom:7px; }

/* une affaire = une ligne : le titre à gauche, les informations à droite */
body[data-mise="registre"] #view .card {
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  /* 30 px à droite : le chevron ▾ de app.css est posé là, en absolu */
  padding:7px 30px 7px 11px; margin-bottom:3px;
}
body[data-mise="registre"] #view .card .t { flex:1 1 190px; min-width:0; font-size:14px; }
body[data-mise="registre"] #view .card .s {
  flex:1 1 170px; min-width:0; margin-top:0; font-size:12px;
  flex-wrap:nowrap; overflow:hidden; justify-content:flex-end;
}
body[data-mise="registre"] #view .card .s > * { white-space:nowrap; }
body[data-mise="registre"] .badge { font-size:11px; padding:1px 7px; }

/* deux colonnes dès que l'écran le permet — c'est là que la densité paie */
@media (min-width:1600px) {
  body[data-mise="registre"] #view { column-count:2; column-gap:14px; }
  body[data-mise="registre"] #view .card,
  body[data-mise="registre"] #view .detail { break-inside:avoid; }
  /* une fiche détail ouverte reprend toute la largeur : on y lit, on n'y scanne pas */
  body[data-mise="registre"] #view:has(.detail) { column-count:1; }
}

/* les tableaux de lignes se resserrent aussi */
body[data-mise="registre"] .lines th { padding:4px 6px; font-size:11px; }
body[data-mise="registre"] .lines td { padding:4px 6px; font-size:13px; }
body[data-mise="registre"] .grid { grid-template-columns:repeat(auto-fit,minmax(118px,1fr)); gap:6px; }
body[data-mise="registre"] .stat b { font-size:20px; }
body[data-mise="registre"] .stat span { font-size:12px; }

/* ============================================================
   3. TERRAIN — pour le téléphone, dans la camionnette
   Navigation en tiroir, grosses cibles, une colonne, le statut
   lisible à bout de bras. Pour qui sort l'application sur place.
   ============================================================ */
body[data-mise="terrain"] {
  --dense:1.35;
}
/* le menu devient un tiroir À TOUTES LES LARGEURS, pas seulement sur mobile */
body[data-mise="terrain"] aside { transform:translateX(-100%); width:264px; }
body[data-mise="terrain"] aside.open { transform:translateX(0); box-shadow:0 0 30px rgba(0,0,0,.25); }
body[data-mise="terrain"] .content { margin-left:0; }
body[data-mise="terrain"] #burger { display:block; min-width:46px; min-height:46px; font-size:20px; }
body[data-mise="terrain"] aside button { padding:15px 14px; font-size:17px; }
body[data-mise="terrain"] header h1 { font-size:21px; }

/* l'écran se lit à bout de bras : une seule colonne, des blocs hauts */
body[data-mise="terrain"] main { padding:16px 16px calc(env(safe-area-inset-bottom) + 48px); }
body[data-mise="terrain"] #view .card { padding:17px 18px; margin-bottom:11px; }
body[data-mise="terrain"] #view .card .t { font-size:17px; }
body[data-mise="terrain"] #view .card .s { font-size:14px; gap:8px 12px; margin-top:7px; }
body[data-mise="terrain"] .badge { font-size:13px; padding:4px 12px; }

/* le statut se voit avant le texte : un bandeau sur le flanc de la fiche */
body[data-mise="terrain"] #view .card.click {
  border-left-width:7px; border-left-style:solid; border-left-color:var(--st-nouveau);
}

/* tout ce qui se touche fait au moins 52 px */
body[data-mise="terrain"] .actions { gap:10px; }
body[data-mise="terrain"] .actions button,
body[data-mise="terrain"] .btn { flex:1 1 200px; min-height:52px; font-size:16px; text-align:center; }
body[data-mise="terrain"] .chips button { min-height:44px; padding:10px 18px; font-size:15px; }
body[data-mise="terrain"] .search { padding:15px 16px; font-size:17px; }

/* l'accueil devient des tuiles d'action, deux par rangée */
body[data-mise="terrain"] .grid { grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:11px; }
body[data-mise="terrain"] .stat { padding:20px 16px; }
body[data-mise="terrain"] .stat b { font-size:32px; }

/* un tableau de lignes ne tient pas sur un téléphone : il défile seul */
body[data-mise="terrain"] .lines td,
body[data-mise="terrain"] .lines th { padding:10px 8px; font-size:15px; }

/* ============================================================
   Le sélecteur de mise en page, sous celui du style
   ============================================================ */
.mise{padding:0 10px 14px;border-bottom:1px solid var(--line);margin-bottom:6px}
.mise label{display:block;font-size:11px;font-weight:700;letter-spacing:.8px;
            text-transform:uppercase;color:var(--muted);margin-bottom:5px}
.mise select{width:100%;padding:7px 8px;border:1px solid var(--line);border-radius:8px;
             background:var(--surface);font-size:13px;color:var(--text);
             font-family:var(--font)}
/* c'est ce bloc-là qui ferme la série : les deux du dessus perdent leur filet */
.theme{border-bottom:0;margin-bottom:0;padding-bottom:8px}