/* ============================================================
   ollo — design system (v2, direction « épurée »)
   Les couleurs viennent de theme.css, importé ci-dessous : c'est la
   source unique du produit. Tailles, polices et ombres restent ici,
   et ne doivent pas être écrites ailleurs.
   ============================================================ */
@import url('theme.css');


/* --- 1. Jetons ------------------------------------------------ */
:root {
  /* Les couleurs sont dans theme.css. Ne rien redéfinir ici : une
     copie locale rendrait la personnalisation par client fausse sur
     cette feuille seulement. */

  /* 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); }

/* Mention d'éditeur — affichée seulement sur les comptes qui l'ont
   demandée. Discrète : elle informe, elle ne se dispute pas la place avec
   la marque du client. */
.mention-editeur {
  padding: 0 16px 12px;
  font-size: .6875rem;
  color: var(--encre-3);
  letter-spacing: .02em;
}

.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: var(--bleu-bord); 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: var(--ambre-bord); color: var(--ambre); }
.place--impaye { background: var(--rouge-pale); border-color: var(--rouge-bord); 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: var(--craie); 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: var(--craie); }
.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: var(--craie); 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: var(--craie);
  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; }

/* Sélection multiple dans une liste : la case en tête de ligne, et la barre
   d'actions qui n'existe qu'une fois quelque chose de coché. La barre colle
   au bas de la fenêtre — sur cent parkings, l'action doit rester à portée
   sans remonter. */
.ligne-case { flex: 0 0 16px; display: grid; place-items: center; }
.ligne-case input { width: 15px; height: 15px; accent-color: var(--bleu); cursor: pointer; }
.ligne.selectionnee { background: var(--bleu-pale); }

.barre-lot {
  position: sticky; bottom: 1rem; z-index: 30;
  display: none; align-items: center; gap: .75rem; flex-wrap: wrap;
  margin: .75rem 1.375rem;
  padding: .625rem .875rem;
  background: var(--encre); color: var(--craie);
  border-radius: var(--r2);
  box-shadow: var(--ombre-3);
}
.barre-lot.ouverte { display: flex; }
.barre-lot-compte { font-weight: 500; }
.barre-lot-actions { margin-left: auto; display: flex; gap: .5rem; }

/* 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: var(--craie); 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);
}

/* Autocomplétion d'adresse (API Adresse de l'État). Le conteneur du champ
   porte .champ-auto, qui donne à la liste son repère de positionnement. */
.champ-auto { position: relative; }

.suggestions {
  position: absolute; z-index: 40; top: 100%; left: 0; right: 0;
  margin-top: .25rem;
  display: none;
  max-height: 264px; overflow-y: auto;
  background: var(--craie);
  border: 1px solid var(--ligne-forte);
  border-radius: var(--r2);
  box-shadow: var(--ombre-2);
}
.suggestions.ouverte { display: block; }

.suggestion {
  display: block; width: 100%; text-align: left;
  padding: .5rem .6875rem;
  border: none; border-bottom: 1px solid var(--ligne);
  background: none; cursor: pointer;
  font-family: inherit; color: inherit;
}
.suggestion:last-child { border-bottom: none; }
.suggestion:hover, .suggestion.survol { background: var(--bleu-pale); }
.suggestion b { display: block; font-weight: 500; font-size: .8125rem; }
.suggestion span { font-size: .75rem; color: var(--encre-2); }
.suggestion-vide { padding: .625rem .6875rem; font-size: .8125rem; color: var(--encre-2); }

.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: var(--ambre-bord-2); color: var(--ambre); }
.bandeau-danger    { background: var(--rouge-pale); border-color: var(--rouge-bord-2); color: var(--rouge); }
.bandeau-info      { background: var(--bleu-pale);  border-color: var(--bleu-bord); color: var(--bleu-fonce); }
.bandeau-ok        { background: var(--vert-pale);  border-color: var(--vert-bord); 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; }

/* --- 19. Onglets qui naviguent -------------------------------- */
/* Les filtres de la liste des demandes changent la requête, pas
   l'affichage : leur état doit tenir dans l'URL pour qu'un lien
   partagé ou un rafraîchissement retombe sur la même liste. Ce sont
   donc des liens, à qui .onglet ne suffit pas — un <a> est en ligne
   et ignore la hauteur. */
a.onglet { display: inline-flex; align-items: center; text-decoration: none; }
a.onglet:hover { text-decoration: none; }

/* Bloc d'informations en paires étiquette / valeur : la fiche d'une
   demande, où il n'y a rien à modifier, seulement à lire et à
   recopier dans un téléphone. */
.paires { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.125rem; }
.paire-label {
  display: block; font-size: .75rem; font-weight: 500;
  color: var(--encre-3); text-transform: uppercase; letter-spacing: .04em;
  margin-bottom: .25rem;
}
.paire-valeur { font-size: .9375rem; font-weight: 500; word-break: break-word; }
.paire-valeur a { color: var(--bleu); text-decoration: none; }
.paire-valeur a:hover { text-decoration: underline; }
.paire-large { grid-column: 1 / -1; }
.paire-texte { font-weight: 400; white-space: pre-wrap; line-height: 1.6; }

@media (max-width: 900px) {
  .paires { grid-template-columns: 1fr; gap: .875rem; }
}

/* Mini-carte de placement d'un parking sur la vitrine publique.
   Poser un point à la main vaut mieux que faire chercher des
   coordonnées sur un autre site pour les recopier ici. */
.carte-placement {
  height: 260px;
  border: 1px solid var(--ligne-forte);
  border-radius: var(--r2);
  overflow: hidden;
  background: var(--page);
}

@media (max-width: 900px) {
  .carte-placement { height: 220px; }
}