/* ============================================================
   ollo — design system (v2, direction « épurée »)
   Fichier unique. Aucune couleur, taille ou police ne doit être
   écrite ailleurs que dans ce fichier.
   ============================================================ */

/* --- 1. Jetons ------------------------------------------------ */
:root {
  /* Encres */
  --encre:        #1A1F36;
  --encre-2:      #697386;
  --encre-3:      #A3ACB9;

  /* Marque */
  --bleu:         #1F5EFF;   /* bleu exact du point du logo */
  --bleu-fonce:   #1549D6;
  --bleu-pale:    #F1F5FF;

  /* Surfaces */
  --page:         #FBFBFD;
  --craie:        #FFFFFF;
  --survol:       #FAFAFC;
  --ligne:        #E9EBF0;
  --ligne-forte:  #D7DBE3;

  /* Statuts — teintes basses, jamais d'aplat saturé */
  --vert:         #0E6245;  --vert-pale:  #E8F7F0;
  --orange:       #B45309;  --orange-fonce: #8F400A;
  --ambre:        #8C5A00;  --ambre-pale: #FBF3E4;
  --rouge:        #B02318;  --rouge-pale: #FCEEEC;

  /* Rayons */
  --r1: 6px;
  --r2: 8px;
  --r3: 12px;

  /* Ombres — présentes mais presque invisibles */
  --ombre-1: 0 1px 1px rgba(26, 31, 54, .04), 0 2px 5px rgba(26, 31, 54, .04);
  --ombre-2: 0 2px 6px rgba(26, 31, 54, .06), 0 8px 24px rgba(26, 31, 54, .07);
  --ombre-3: 0 12px 40px rgba(26, 31, 54, .16);

  /* Polices — Söhne (Stripe) est payante : Geist en tient lieu.
     Pour passer à Söhne un jour, une seule ligne change ici. */
  --ui:   'Geist', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'SF Mono', monospace;

  /* Gabarit */
  --sidebar-l: 224px;
  --topbar-h:  60px;
  --tabbar-h:  62px;
}

/* --- 2. Base -------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--ui);
  font-size: .875rem;
  line-height: 1.55;
  color: var(--encre);
  background: var(--page);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
svg { display: block; }
table { border-collapse: collapse; width: 100%; }

:focus-visible { outline: 2px solid var(--bleu); outline-offset: 2px; border-radius: 4px; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* --- 3. Typographie ------------------------------------------- */
.titre-page    { font-size: 1.3125rem; font-weight: 600; letter-spacing: -.018em; }
.titre-section { font-size: .9375rem;  font-weight: 600; letter-spacing: -.008em; }
.surtitre      { font-size: .8125rem;  font-weight: 500; color: var(--encre-2); }

.texte-2 { color: var(--encre-2); }
.texte-alerte { color: var(--orange); }
.texte-3 { color: var(--encre-3); }
.petit   { font-size: .8125rem; }

.chiffre, td, .stat-valeur, .montant { font-variant-numeric: tabular-nums; }
.montant { font-weight: 500; }

/* --- 4. Gabarit de l'application ------------------------------ */
.app { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar-l);
  flex: 0 0 var(--sidebar-l);
  background: var(--craie);
  border-right: 1px solid var(--ligne);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  z-index: 40;
}

.sidebar-marque {
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  padding: 0 1.25rem;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -.04em;
}

.sidebar-marque { gap: .4375rem; }
.sidebar-marque img { height: 20px; width: auto; display: block; }
.sidebar-marque .pro {
  font-size: .8125rem;
  font-weight: 500;
  color: var(--encre-2);
  letter-spacing: .01em;
  margin-top: 3px;
}

.sidebar-nav { flex: 1; overflow-y: auto; padding: .5rem .625rem; }
.nav-groupe + .nav-groupe { margin-top: 1.5rem; }

.nav-lien {
  display: flex;
  align-items: center;
  gap: .625rem;
  height: 34px;
  padding: 0 .625rem;
  border-radius: var(--r1);
  color: var(--encre-2);
  font-size: .875rem;
  font-weight: 500;
  transition: color .12s, background .12s;
}

.nav-lien:hover { background: var(--survol); color: var(--encre); }
.nav-lien.actif { background: var(--bleu-pale); color: var(--bleu); }
.nav-lien svg { width: 16px; height: 16px; flex: 0 0 16px; opacity: .8; }
.nav-lien .pastille { margin-left: auto; }

.sidebar-pied {
  border-top: 1px solid var(--ligne);
  padding: .75rem;
  display: flex;
  align-items: center;
  gap: .625rem;
}

.avatar {
  width: 30px; height: 30px; flex: 0 0 30px;
  border-radius: 50%;
  background: var(--bleu-pale);
  color: var(--bleu);
  display: grid; place-items: center;
  font-size: .6875rem; font-weight: 600;
}

.sidebar-pied-id { min-width: 0; line-height: 1.3; }
.sidebar-pied-id strong { display: block; font-size: .8125rem; font-weight: 500; }
.sidebar-pied-id span { font-size: .75rem; color: var(--encre-3); }

.icone-bouton {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border: none; border-radius: var(--r1);
  background: none; color: var(--encre-2);
  cursor: pointer; position: relative;
  transition: background .12s, color .12s;
}

.icone-bouton:hover { background: var(--survol); color: var(--encre); }
.icone-bouton svg { width: 17px; height: 17px; }

.contenu { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
  height: var(--topbar-h);
  flex: 0 0 var(--topbar-h);
  background: var(--craie);
  border-bottom: 1px solid var(--ligne);
  display: flex; align-items: center; gap: .75rem;
  padding: 0 1.75rem;
  position: sticky; top: 0; z-index: 30;
}

.topbar-titre { font-size: .9375rem; font-weight: 500; }
.topbar-date { color: var(--encre-3); font-size: .8125rem; margin-left: .625rem; }
.topbar-fin { margin-left: auto; display: flex; align-items: center; gap: .125rem; }
.burger { display: none; }

.page { padding: 2rem 1.75rem 4rem; max-width: 1180px; width: 100%; }
.page > * + * { margin-top: 1.5rem; }
.page-entete p { color: var(--encre-2); margin-top: .125rem; }

.tabbar {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0;
  height: var(--tabbar-h);
  background: var(--craie);
  border-top: 1px solid var(--ligne);
  z-index: 45;
  padding-bottom: env(safe-area-inset-bottom);
}

.tabbar-lien {
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 3px;
  font-size: .625rem; font-weight: 500;
  color: var(--encre-3); position: relative;
}

.tabbar-lien svg { width: 20px; height: 20px; }
.tabbar-lien.actif { color: var(--bleu); }
.tabbar-lien .pastille { position: absolute; top: 5px; left: 50%; margin-left: 3px; }

/* --- 5. Cartes ------------------------------------------------ */
.carte {
  background: var(--craie);
  border: 1px solid var(--ligne);
  border-radius: var(--r3);
  box-shadow: var(--ombre-1);
  overflow: hidden;
}

.carte-tete {
  display: flex; align-items: center; gap: .75rem;
  padding: 1.0625rem 1.375rem;
}

.carte-tete + * { border-top: 1px solid var(--ligne); }
.carte-tete .titre-section { margin-right: auto; }
.carte-corps { padding: 1.375rem; }
.carte-corps-serre { padding: .875rem 1.375rem; }

.grille { display: grid; gap: 1.5rem; }
.grille-2-1 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.grille-3   { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* --- 6. Chiffres clés ----------------------------------------- */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }

.stat { padding: 1.25rem 1.375rem; }
.stat + .stat { border-left: 1px solid var(--ligne); }
.stat-label { color: var(--encre-2); font-size: .8125rem; }

.stat-valeur {
  display: block;
  font-size: 1.625rem;
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: 1.25;
  margin-top: .25rem;
}

.stat-note { color: var(--encre-3); font-size: .75rem; }
.stat-valeur.alerte { color: var(--orange); }
.stat .btn { margin-top: .625rem; }

/* Trait d'occupation — 3 px, une seule couleur */
.jauge {
  height: 3px;
  border-radius: 999px;
  background: var(--ligne);
  overflow: hidden;
  margin-top: .625rem;
}

.jauge i { display: block; height: 100%; border-radius: 999px; background: var(--bleu); }
.jauge-mini { width: 72px; margin: .375rem 0 0; }

/* --- 7. Plan de places ---------------------------------------- */
/* Réservé à la fiche parking : voir quelle place est libre, pas
   seulement combien. Volontairement discret, deux teintes.       */
.plan { display: flex; flex-wrap: wrap; gap: 4px; }

.place {
  width: 30px; height: 34px;
  border-radius: 4px;
  display: grid; place-items: center;
  font-family: var(--mono);
  font-size: .625rem; font-weight: 500;
  border: 1px solid;
}

.place--louee  { background: var(--bleu-pale); border-color: #D8E3FF; color: var(--bleu); }
.place--libre  { background: var(--craie); border-color: var(--ligne); color: var(--encre-3); cursor: pointer; }
.place--libre:hover { border-color: var(--orange); color: var(--orange); }
.place.selectionnee {
  background: var(--ambre-pale);
  border-color: var(--orange);
  color: var(--orange);
  box-shadow: 0 0 0 2px rgba(180, 83, 9, .16);
}
.place--expire { background: var(--ambre-pale); border-color: #EFE0C4; color: var(--ambre); }
.place--impaye { background: var(--rouge-pale); border-color: #F5D8D4; color: var(--rouge); }

.plan-mini { gap: 3px; }
.plan-mini .place { width: 8px; height: 14px; border-radius: 2px; }

/* Au-delà de ~80 places, les numéros ne sont plus lisibles :
   la vue compacte les retire et les rend au survol (title).  */
.plan-dense { gap: 3px; }
.plan-dense .place { width: 13px; height: 19px; border-radius: 2px; font-size: 0; }
.plan-dense .place:hover { outline: 2px solid var(--bleu); outline-offset: 1px; }

.plan-rangee { display: flex; align-items: center; gap: .625rem; margin-bottom: .375rem; }
.plan-rangee-nom { width: 62px; flex: 0 0 62px; font-size: .75rem; color: var(--encre-3); }

.legende {
  display: flex; flex-wrap: wrap; gap: 1rem;
  margin-top: 1rem;
  font-size: .8125rem; color: var(--encre-2);
}

.legende i {
  width: 10px; height: 12px; border-radius: 2px;
  border: 1px solid; display: inline-block;
  vertical-align: -2px; margin-right: .375rem;
}

/* --- 8. Boutons ----------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .375rem;
  height: 34px; padding: 0 .8125rem;
  border: 1px solid transparent;
  border-radius: var(--r1);
  background: none;
  font-size: .8125rem; font-weight: 500;
  cursor: pointer; white-space: nowrap;
  transition: background .12s, border-color .12s, color .12s, box-shadow .12s;
}

.btn svg { width: 15px; height: 15px; }

.btn-primaire { background: var(--bleu); color: #fff; box-shadow: var(--ombre-1); }
.btn-primaire:hover { background: var(--bleu-fonce); }

.btn-secondaire { background: var(--craie); border-color: var(--ligne-forte); color: var(--encre); box-shadow: var(--ombre-1); }
.btn-secondaire:hover { background: var(--survol); }

.btn-fantome { color: var(--bleu); padding: 0 .5rem; }
.btn-fantome:hover { background: var(--bleu-pale); }

.btn-danger { background: var(--rouge); color: #fff; }
.btn-danger:hover { filter: brightness(.94); }

.btn-sm { height: 28px; padding: 0 .625rem; font-size: .78125rem; }
.btn:disabled { opacity: .45; cursor: not-allowed; }

.btn-alerte { background: var(--orange); color: #fff; box-shadow: var(--ombre-1); }
.btn-alerte:hover { background: var(--orange-fonce); }
.btn-fantome-alerte { color: var(--orange); padding: 0 .5rem; }
.btn-fantome-alerte:hover { background: var(--ambre-pale); }

/* --- 9. Badges et pastilles ----------------------------------- */
.badge {
  display: inline-flex; align-items: center;
  height: 21px; padding: 0 .5rem;
  border-radius: 5px;
  font-size: .75rem; font-weight: 500;
  white-space: nowrap;
}

.badge-ok        { background: var(--vert-pale);  color: var(--vert); }
.badge-attention { background: var(--ambre-pale); color: var(--ambre); }
.badge-danger    { background: var(--rouge-pale); color: var(--rouge); }
.badge-neutre    { background: var(--page);       color: var(--encre-2); box-shadow: inset 0 0 0 1px var(--ligne); }
.badge-info      { background: var(--bleu-pale);  color: var(--bleu); }

.pastille {
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px;
  background: var(--encre-3); color: #fff;
  font-size: .6875rem; font-weight: 600;
  display: inline-grid; place-items: center;
}

.pastille-bleue { background: var(--bleu); }
.pastille-rouge { background: var(--rouge); }

.point { width: 6px; height: 6px; border-radius: 50%; display: inline-block; flex: 0 0 6px; }
.point-danger    { background: var(--rouge); }
.point-attention { background: var(--orange); }
.point-info      { background: var(--bleu); }
.point-ok        { background: var(--vert); }

.code {
  font-family: var(--mono);
  font-size: .8125rem;
  color: var(--encre-2);
}

/* --- 10. Tableaux et listes ----------------------------------- */
.tableau th {
  text-align: left;
  padding: .6875rem 1.375rem;
  border-bottom: 1px solid var(--ligne);
  font-size: .75rem; font-weight: 500;
  color: var(--encre-2);
  white-space: nowrap;
}

.tableau td {
  padding: .875rem 1.375rem;
  border-bottom: 1px solid var(--ligne);
  vertical-align: middle;
}

.tableau tbody tr:last-child td { border-bottom: none; }
.tableau-cliquable tbody tr { cursor: pointer; }
.tableau-cliquable tbody tr:hover { background: var(--survol); }
.tableau .fin { text-align: right; }

.cellule-titre { font-weight: 500; }
.cellule-sous { display: block; font-size: .8125rem; color: var(--encre-3); }

.ligne {
  display: flex; align-items: center; gap: 1rem;
  padding: .9375rem 1.375rem;
  border-bottom: 1px solid var(--ligne);
  cursor: pointer;
  transition: background .12s;
}

.ligne:last-child { border-bottom: none; }
.ligne:hover { background: var(--survol); }
.ligne-id { min-width: 0; flex: 1; }
.ligne-id strong { display: block; font-weight: 500; }
.ligne-id span { font-size: .8125rem; color: var(--encre-3); }
.ligne-mesure { flex: 0 0 auto; text-align: right; width: 116px; }
.ligne-mesure span { font-size: .8125rem; color: var(--encre-2); }
.ligne-mesure .jauge { margin-left: auto; }
.ligne-chiffres { flex: 0 0 auto; text-align: right; width: 108px; }
.ligne-chiffres strong { display: block; font-weight: 500; font-variant-numeric: tabular-nums; }
.ligne-chiffres span { font-size: .75rem; color: var(--encre-3); }
.ligne-fleche { color: var(--encre-3); flex: 0 0 16px; }
.ligne-fleche svg { width: 16px; height: 16px; }

/* Tâches (« à traiter ») */
.tache {
  display: flex; align-items: center; gap: .75rem;
  padding: .9375rem 1.375rem;
  border-bottom: 1px solid var(--ligne);
}

.tache:last-child { border-bottom: none; }
.tache-corps { flex: 1; min-width: 0; }
.tache-titre { font-weight: 500; }
.tache-detail { font-size: .8125rem; color: var(--encre-2); }

/* Liste de places à confier (modale) */
.choix-groupe {
  font-size: .75rem; font-weight: 500;
  color: var(--encre-2);
  margin: 1.125rem 0 .25rem;
}

.choix-groupe:first-child { margin-top: 0; }

.choix {
  display: flex; align-items: center; gap: .625rem;
  padding: .5rem 0;
  border-bottom: 1px solid var(--ligne);
  cursor: pointer;
}

.choix:last-child { border-bottom: none; }
.choix-nom { flex: 1; font-size: .8125rem; }
.choix-prix { font-size: .8125rem; color: var(--encre-2); font-variant-numeric: tabular-nums; }

.case {
  width: 17px; height: 17px; flex: 0 0 17px;
  border: 1.5px solid var(--ligne-forte);
  border-radius: 4px;
  background: var(--craie);
  display: grid; place-items: center;
}

.case svg { width: 11px; height: 11px; color: #fff; opacity: 0; }
.choix:hover .case { border-color: var(--orange); }
.choix.coche .case { background: var(--orange); border-color: var(--orange); }
.choix.coche .case svg { opacity: 1; }
.modale-pied .total { margin-right: auto; font-size: .8125rem; color: var(--encre-2); }

/* --- 11. Formulaires ------------------------------------------ */
.champ { display: block; }
.champ + .champ { margin-top: 1.125rem; }
.champ-label { display: block; font-size: .8125rem; font-weight: 500; margin-bottom: .375rem; }
.champ-aide { font-size: .75rem; color: var(--encre-3); margin-top: .375rem; }

/* Ligne à cocher : une place à confier, dans la modale de délégation. */
.champ-choix {
  display: flex; align-items: flex-start; gap: .625rem;
  padding: .75rem; cursor: pointer;
  border: 1px solid var(--ligne); border-radius: var(--r2);
}
.champ-choix + .champ-choix { margin-top: .5rem; }
.champ-choix:hover { border-color: var(--ligne-forte); background: var(--survol); }
.champ-choix input { flex: none; margin-top: .1875rem; accent-color: var(--bleu); }
.champ-choix-corps { display: flex; flex-direction: column; min-width: 0; }

.saisie {
  width: 100%; height: 36px;
  padding: 0 .6875rem;
  border: 1px solid var(--ligne-forte);
  border-radius: var(--r1);
  background: var(--craie);
  box-shadow: 0 1px 1px rgba(26, 31, 54, .04);
  transition: border-color .12s, box-shadow .12s;
}

textarea.saisie { height: auto; padding: .5rem .6875rem; resize: vertical; }
.saisie:focus { outline: none; border-color: var(--bleu); box-shadow: 0 0 0 3px var(--bleu-pale); }
.saisie::placeholder { color: var(--encre-3); }
.saisie-erreur { border-color: var(--rouge); }
.champ-erreur { font-size: .75rem; color: var(--rouge); margin-top: .375rem; }

.recherche { position: relative; }
.recherche .saisie { padding-left: 2.125rem; }
.recherche svg {
  position: absolute; left: .6875rem; top: 50%;
  transform: translateY(-50%);
  width: 15px; height: 15px; color: var(--encre-3);
}

.onglets { display: flex; gap: .125rem; }

.onglet {
  height: 28px; padding: 0 .625rem;
  border: none; background: none;
  border-radius: var(--r1);
  font-size: .8125rem; font-weight: 500;
  color: var(--encre-2); cursor: pointer;
}

.onglet:hover { background: var(--survol); color: var(--encre); }
.onglet.actif { background: var(--bleu-pale); color: var(--bleu); }

/* --- 12. Messages --------------------------------------------- */
.bandeau {
  display: flex; align-items: center; gap: .625rem;
  padding: .75rem 1rem;
  border: 1px solid var(--ligne);
  border-radius: var(--r2);
  background: var(--craie);
  font-size: .8125rem;
}

.bandeau .btn { margin-left: auto; }
.bandeau svg { width: 16px; height: 16px; flex: 0 0 16px; }
.bandeau-attention { background: var(--ambre-pale); border-color: #F0E3CB; color: var(--ambre); }
.bandeau-danger    { background: var(--rouge-pale); border-color: #F5DAD6; color: var(--rouge); }
.bandeau-info      { background: var(--bleu-pale);  border-color: #D8E3FF; color: var(--bleu-fonce); }
.bandeau-ok        { background: var(--vert-pale);  border-color: #CDEBDD; color: var(--vert); }

/* --- 13. Fil d'ariane et écran vide --------------------------- */
.fil { display: flex; align-items: center; gap: .375rem; font-size: .8125rem; color: var(--encre-3); }
.fil a:hover { color: var(--bleu); }
.fil b { color: var(--encre); font-weight: 500; }

.vide { padding: 3.5rem 1.5rem; text-align: center; }
.vide h3 { font-size: .9375rem; font-weight: 600; margin-bottom: .25rem; }
.vide p { color: var(--encre-2); margin-bottom: 1.25rem; }

/* --- 14. Modale ----------------------------------------------- */
.voile {
  position: fixed; inset: 0;
  background: rgba(26, 31, 54, .35);
  backdrop-filter: blur(2px);
  display: none; place-items: center;
  padding: 1rem; z-index: 60;
}

.voile.ouvert { display: grid; }

.modale {
  background: var(--craie);
  border-radius: var(--r3);
  box-shadow: var(--ombre-3);
  width: 100%; max-width: 440px;
  max-height: 90vh; overflow-y: auto;
  animation: modale-entree .16s ease-out;
}

@keyframes modale-entree { from { opacity: 0; transform: translateY(6px); } }

.modale-tete {
  display: flex; align-items: center;
  padding: 1.125rem 1.375rem;
  border-bottom: 1px solid var(--ligne);
}

.modale-tete { align-items: flex-start; }
.modale-tete .modale-titres { margin-right: auto; }
.modale-tete .modale-titres p { font-size: .8125rem; color: var(--encre-2); margin-top: .125rem; }
.choix-entete { display: flex; align-items: center; margin-bottom: .25rem; }
.choix-entete .btn { margin-left: auto; }
.modale-corps { padding: 1.375rem; }

.modale-pied {
  display: flex; justify-content: flex-end; gap: .5rem;
  padding: 1rem 1.375rem;
  border-top: 1px solid var(--ligne);
  /* La modale scrolle en entier : le pied reste visible, sinon le total
     et le bouton de validation sortent de l'écran sur une longue liste. */
  position: sticky; bottom: 0;
  background: var(--craie);
}

/* --- 15. Notifications passagères ----------------------------- */
.toasts {
  position: fixed; bottom: 1.5rem; right: 1.5rem;
  display: flex; flex-direction: column; gap: .5rem; z-index: 70;
}

.toast {
  display: flex; align-items: center; gap: .625rem;
  min-width: 270px;
  padding: .75rem .9375rem;
  background: var(--craie);
  border: 1px solid var(--ligne);
  border-radius: var(--r2);
  box-shadow: var(--ombre-2);
  font-size: .8125rem;
  animation: toast-entree .18s ease-out;
}

@keyframes toast-entree { from { opacity: 0; transform: translateY(8px); } }

.toast svg { width: 16px; height: 16px; flex: 0 0 16px; }
.toast-ok svg { color: var(--vert); }
.toast-erreur svg { color: var(--rouge); }

/* --- 16. Adaptation mobile ------------------------------------ */
@media (max-width: 900px) {
  .sidebar {
    position: fixed; left: 0; top: 0;
    transform: translateX(-100%);
    transition: transform .2s ease-out;
    box-shadow: var(--ombre-3);
  }

  .sidebar.ouvert { transform: none; }
  .burger { display: grid; }
  .tabbar { display: flex; }
  .topbar { padding: 0 1rem; }
  .page { padding: 1.25rem 1rem calc(var(--tabbar-h) + 2rem); }
  .page > * + * { margin-top: 1rem; }

  .grille-2-1, .grille-3 { grid-template-columns: minmax(0, 1fr); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat + .stat { border-left: none; }
  .stat:nth-child(even) { border-left: 1px solid var(--ligne); }
  .stat:nth-child(n+3) { border-top: 1px solid var(--ligne); }
  .stat { padding: 1rem 1.125rem; }
  .stat-valeur { font-size: 1.375rem; }

  /* Une tuile fait une demi-largeur d'écran : un libellé long comme
     « Confier des places » déborde. Le bouton prend la largeur de la
     tuile et son texte passe à la ligne plutôt que de pousser la page. */
  .stat .btn, .stat form { width: 100%; }
  .stat .btn {
    height: auto; min-height: 30px;
    padding-top: .25rem; padding-bottom: .25rem;
    white-space: normal; line-height: 1.3;
  }

  .ligne-mesure { display: none; }

  .tableau thead { display: none; }
  .tableau tbody tr { display: block; padding: .5rem 0; border-bottom: 1px solid var(--ligne); }
  .tableau tbody tr:last-child { border-bottom: none; }

  .tableau td {
    display: flex; justify-content: space-between; align-items: center;
    gap: 1rem; border: none;
    padding: .3125rem 1.125rem; text-align: right;
  }

  .tableau td::before {
    content: attr(data-label);
    font-size: .8125rem; color: var(--encre-2); text-align: left;
  }

  .toasts { left: 1rem; right: 1rem; bottom: calc(var(--tabbar-h) + 1rem); }
}

@media (max-width: 480px) {
  /* Pied de modale : le total et les deux boutons ne tiennent plus sur
     une ligne. Le total passe au-dessus, les boutons restent à droite. */
  .modale-pied { flex-wrap: wrap; }
  .modale-pied .total { width: 100%; margin: 0 0 .125rem; }
}

/* --- 17. Compléments d'écran ---------------------------------- */
/* Classes nommées pour les besoins que les maquettes exprimaient en
   style inline. Mêmes jetons, aucune valeur nouvelle.              */

/* En-tête de fiche : titre à gauche, actions à droite. */
.entete-fiche { display: flex; align-items: flex-start; gap: 1rem; margin-top: .5rem; flex-wrap: wrap; }
.entete-fiche-id { flex: 1; min-width: 240px; }
.entete-actions { display: flex; gap: .5rem; flex-wrap: wrap; }

/* Un formulaire dans une tuile se cale comme un bouton. */
.stat form { margin-top: .625rem; }

/* Cellule « statut » : badge puis actions, alignés à droite. */
.cellule-actions {
  display: flex; align-items: center; justify-content: flex-end;
  gap: .375rem; flex-wrap: wrap;
}
.cellule-actions form { margin: 0; }

/* Barre d'outils d'un tableau : onglets à gauche, recherche à droite. */
.outils-tableau { max-width: 200px; margin-left: auto; }

/* Modales — app.js ouvre et ferme par les classes .active et .ouvert.
   Les deux valent ouverture, pour que les écrans hérités et les
   écrans repris marchent avec le même script. */
.voile.active { display: grid; }

/* Deux champs sur une ligne. */
.champs-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.125rem; }
.champ + .champs-2, .champs-2 + .champ, .champs-2 + .champs-2 { margin-top: 1.125rem; }

/* Libellé de champ avec une action à droite (« Locataire mensuel »). */
.champ-entete { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.champ-entete .champ-label { margin-bottom: 0; }

/* Bloc d'une modale séparé du précédent par un filet. */
.modale-bloc { border-top: 1px solid var(--ligne); margin-top: 1.375rem; padding-top: 1.125rem; }
.modale-bloc-titre { font-size: .8125rem; font-weight: 500; margin-bottom: .75rem; }
.modale-liste { max-height: 200px; overflow-y: auto; }
.btn-pleine { width: 100%; }

/* Champ fichier : même boîte que .saisie, hauteur libre. */
.saisie-fichier { height: auto; padding: .375rem .5rem; font-size: .8125rem; }

/* Envoi d'un document : le champ puis son bouton. La classe sert
   aussi de point d'accroche au script d'upload. */
.doc-upload-form { display: grid; gap: .5rem; margin-top: .375rem; }

@media (max-width: 900px) {
  .champs-2 { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .entete-actions { width: 100%; }
  .entete-actions .btn { flex: 1; }
  .outils-tableau { max-width: none; margin-left: 0; width: 100%; }
  .cellule-actions { justify-content: flex-end; }

  /* En-tête de carte : le titre garde sa ligne, les onglets et la
     recherche passent dessous. Sans ça, les onglets se cassent en
     trois lignes et le champ de recherche se réduit à deux lettres. */
  .carte-tete { flex-wrap: wrap; }
  .onglets {
    max-width: 100%; overflow-x: auto;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .onglets::-webkit-scrollbar { display: none; }
  .onglet { white-space: nowrap; flex: none; }

  /* Lignes compactes : une place tenait sur six lignes empilées, soit
     près de 190 px. On passe le nom en tête sans étiquette, les quatre
     champs courts sur deux colonnes, et le statut en pied. */
  .tableau-compact tbody tr {
    display: grid; grid-template-columns: 1fr 1fr;
    row-gap: .0625rem; padding: .75rem 0;
  }
  .tableau-compact td { padding: 0 1.125rem; }

  /* En bloc, pas en flex : sinon le titre et son détail se rangent
     côte à côte au lieu de s'empiler (« Libre depuis 5 mois » d'un
     côté, « 500 € perdus… » de l'autre). */
  .tableau-compact td[data-label="Locataire"] {
    order: 1; grid-column: 1 / -1;
    display: block; text-align: left;
    font-size: .9375rem; padding-bottom: .375rem;
  }
  .tableau-compact td[data-label="Place"]       { order: 2; }
  .tableau-compact td[data-label="Loyer"]       { order: 3; }
  .tableau-compact td[data-label="Plaque"]      { order: 4; }
  .tableau-compact td[data-label="Fin de bail"] { order: 5; }

  /* Étiquettes courtes et insécables : sur une demi-largeur,
     « Fin de bail » se cassait en deux lignes et gonflait la carte. */
  .tableau-compact td::before { white-space: nowrap; font-size: .75rem; }
  .tableau-compact td[data-label="Fin de bail"]::before { content: "Fin"; }
  .tableau-compact td[data-label="Statut"] {
    order: 6; grid-column: 1 / -1; padding-top: .5rem;
  }

  /* Le nom et le statut se lisent seuls : leur étiquette est du bruit. */
  .tableau-compact td[data-label="Locataire"]::before,
  .tableau-compact td[data-label="Statut"]::before { display: none; }
}

/* --- 18. Fusion de layout.css --------------------------------- */
/* layout.css est supprimé : ses règles encore utiles sont reprises
   ici. Les écrans pas encore repris chargent ollo.css *avant*
   styles.css, donc leurs anciennes classes gardent la main sur leur
   propre contenu ; seule la coquille (sidebar, topbar, tabbar) est
   neuve. Chaque bloc de cette section disparaît quand l'écran
   concerné passe au nouveau design.
   Aucune couleur ni police n'est inventée ici : on rebranche les
   classes héritées sur les jetons déclarés en tête de fichier.     */

/* Coquille — pin des valeurs du design system face au .avatar de
   styles.css, chargé après ollo.css sur les écrans hérités. */
.sidebar .avatar {
  width: 30px; height: 30px; flex: 0 0 30px;
  font-size: .6875rem; font-weight: 600;
  background: var(--bleu-pale); color: var(--bleu);
}

/* Écrans hérités — <main class="main-content"> vit désormais dans
   .contenu. layout.css lui imposait « max-width:none » et un décalage
   de sidebar ; styles.css le bride à 1200 px et le centre. On aligne
   simplement sur .page pour que tous les écrans aient la même zone de
   contenu, quel que soit leur avancement dans la refonte. */
.contenu > .main-content {
  margin: 0;
  width: 100%;
  max-width: 1180px;
  padding: 2rem 1.75rem 4rem;
}

/* Zone de toasts héritée : #toast-container est alimenté par
   app.js, on lui donne la position de .toasts. */
#toast-container {
  position: fixed; bottom: 1.5rem; right: 1.5rem;
  display: flex; flex-direction: column; gap: .5rem; z-index: 70;
}

@media (max-width: 900px) {
  #toast-container { left: 1rem; right: 1rem; bottom: calc(var(--tabbar-h) + 1rem); }

  .contenu > .main-content {
    padding: 1.25rem 1rem calc(var(--tabbar-h) + 2rem);
  }

  /* Tableaux hérités (.data-table) → cartes empilées, même bascule
     que .tableau. Repris de layout.css, seuil aligné sur 900 px. */
  .data-table thead { display: none; }
  .data-table tbody tr {
    display: block; padding: .5rem 0;
    border-bottom: 1px solid var(--ligne);
  }
  .data-table tbody tr:last-child { border-bottom: none; }
  .data-table tbody td {
    display: flex; justify-content: space-between; align-items: center;
    gap: 1rem; border: none;
    padding: .3125rem 1.125rem; text-align: right;
  }
  .data-table tbody td::before {
    content: attr(data-label);
    font-size: .8125rem; color: var(--encre-2); text-align: left;
  }
  .data-table tbody td[data-label=""]::before { display: none; }

  /* Modales héritées en plein écran. Repris de layout.css. */
  .modal-overlay, .t-modal-overlay { padding: 0 !important; align-items: stretch !important; }
  .modal, .modal-lg, .t-modal {
    max-width: 100% !important; width: 100% !important;
    max-height: 100vh !important; height: 100vh !important;
    border-radius: 0 !important; overflow-y: auto !important;
  }

  /* Saisies à 16 px (évite le zoom automatique d'iOS) et cibles
     tactiles à 44 px. Repris de layout.css, mais cantonné aux écrans
     hérités : le design system fixe déjà ses propres hauteurs et ne
     doit pas être écrasé ici. */
  .main-content input, .main-content select, .main-content textarea { font-size: 16px !important; }
  .main-content .btn,
  .main-content button[type="submit"],
  .main-content button[type="button"] { min-height: 44px; }
}

/* --- 15. Histogramme 12 mois ----------------------------------- */
/* Réservé aux statistiques : le tableau de bord donne l'instantané,
   ici on montre la pente. Barres CSS, aucune librairie.           */
.histo {
  display: flex;
  align-items: stretch;
  gap: 5px;
  height: 132px;
  margin-top: .25rem;
}

.histo-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .375rem;
  min-width: 0;
}

.histo-piste {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: flex-end;
  background: var(--page);
  border-radius: var(--r1);
  overflow: hidden;
}

.histo-piste i {
  display: block;
  width: 100%;
  min-height: 2px;
  background: var(--bleu);
  border-radius: var(--r1) var(--r1) 0 0;
}

.histo-col:last-child .histo-piste i { background: var(--bleu-fonce); }

.histo-label {
  font-size: .6875rem;
  color: var(--encre-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.histo-col:last-child .histo-label { color: var(--encre-2); font-weight: 500; }

/* Ligne de repère sous un histogramme : légende chiffrée à gauche,
   valeur du dernier mois à droite.                                */
.histo-pied {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-top: .75rem;
  font-size: .8125rem;
  color: var(--encre-2);
}

@media (max-width: 640px) {
  .histo { height: 104px; gap: 3px; }
  .histo-label { font-size: .5625rem; }
}

/* --- 19. Écrans d'authentification ----------------------------- */
.page-auth {
  min-height: 100vh;
  /* dvh suit la barre d'adresse mobile ; 100vh reste le repli. */
  min-height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  padding: 2rem 1.25rem;
}
.auth { width: 100%; max-width: 380px; }
.auth-carte { padding: 2.25rem 2rem 1.875rem; }

.auth-titre {
  font-size: 1.25rem; font-weight: 600;
  letter-spacing: -.01em; text-align: center;
}
.auth-trait {
  width: 32px; height: 2px;
  background: var(--bleu); border-radius: 2px;
  margin: .875rem auto 0;
}
.auth-sous {
  text-align: center; color: var(--encre-2);
  font-size: .8125rem; margin-top: .5rem;
}
.auth-carte form { margin-top: 1.75rem; }
.auth-carte .btn-pleine { margin-top: 1.375rem; }
.auth-carte .bandeau { margin-top: 1.5rem; }

.auth-lien {
  display: block; text-align: center;
  margin-top: 1.25rem;
  font-size: .8125rem; color: var(--encre-2);
}
.auth-lien:hover { color: var(--bleu); }

.auth-pied {
  text-align: center; margin-top: 1.5rem;
  font-size: .75rem; color: var(--encre-3);
}

/* Écran d'erreur : même gabarit, contenu centré. */
.auth-erreur { text-align: center; }
.auth-erreur .auth-titre { margin-bottom: .5rem; }
.auth-erreur p { color: var(--encre-2); }
.auth-erreur .btn { margin-top: 1.75rem; }