/* ===========================================================================
   PROPERTY OS — STYLES DES ÉCRANS
   Cartes de biens, fiche d'un bien, indicateurs du tableau de bord.
   Aucune couleur ni taille en dur : tout vient de tokens.css.
   =========================================================================== */

/* --- BARRE D'OUTILS D'UN ÉCRAN (filtres + compte) ------------------------- */
.outils {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e1);
  margin-bottom: var(--e3);
}
.outils__compte {
  margin-left: auto;
  color: var(--texte-discret);
  font-size: var(--t-petit);
}
.filtre {
  background: transparent;
  border: 1px solid var(--filet);
  border-radius: var(--rayon-pastille);
  color: var(--texte-doux);
  cursor: pointer;
  font-size: var(--t-etiquette);
  font-weight: var(--graisse-forte);
  letter-spacing: 0.16em;
  padding: 8px 15px;
  text-transform: uppercase;
  transition: border-color var(--duree), color var(--duree), background var(--duree);
}
.filtre:hover { border-color: var(--filet-marque); color: var(--texte); }
.filtre--actif {
  background: var(--fond-actif);
  border-color: var(--accent);
  color: var(--texte);
}
.filtre__compte { color: var(--texte-discret); margin-left: 6px; }

/* --- GRILLE DE CARTES -----------------------------------------------------
   1 colonne sur téléphone, 2 à partir de 660 px, 3 au-delà de 1320 px.
   L'efficacité en usage quotidien prime sur la respiration (règle 13).      */
.grille-biens {
  display: grid;
  gap: var(--e2);
  grid-template-columns: 1fr;
}
@media (min-width: 660px)  { .grille-biens { grid-template-columns: repeat(2, 1fr); gap: var(--e3); } }
@media (min-width: 1320px) { .grille-biens { grid-template-columns: repeat(3, 1fr); } }

/* --- CARTE D'UN BIEN ------------------------------------------------------ */
.carte-bien {
  background: var(--fond-carte);
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
  text-align: left;
  transition: border-color var(--duree), background var(--duree);
  width: 100%;
}
.carte-bien:hover { border-color: var(--filet-marque); background: var(--fond-actif); }

/* Image d'attente : un dégradé sobre tant qu'aucune photo n'est chargée. */
.carte-bien__visuel {
  align-items: flex-start;
  aspect-ratio: 16 / 9;
  background: linear-gradient(140deg, var(--photo-2), var(--photo-1) 55%, var(--photo-3));
  display: flex;
  justify-content: space-between;
  padding: var(--e2);
}
.carte-bien__reference {
  background: rgba(10, 10, 9, 0.55);
  border-radius: var(--rayon-pastille);
  color: var(--texte-doux);
  font-size: var(--t-etiquette);
  letter-spacing: 0.1em;
  padding: 5px 11px;
  white-space: nowrap;
}
/* Une pastille de statut ne se coupe jamais en deux lignes. */
.carte-bien__visuel .pastille { white-space: nowrap; }
.carte-bien__corps { padding: var(--e2); display: flex; flex-direction: column; gap: var(--e1); }
.carte-bien__nom {
  font-family: var(--police-titre);
  font-size: var(--t-grand);
  font-weight: var(--graisse-titre);
  line-height: 1.1;
}
.carte-bien__adresse { color: var(--texte-doux); font-size: var(--t-petit); }
.carte-bien__meta {
  border-top: 1px solid var(--filet);
  color: var(--texte-discret);
  display: flex;
  flex-wrap: wrap;
  font-size: var(--t-petit);
  gap: var(--e1);
  margin-top: var(--e1);
  padding-top: var(--e1);
}
.carte-bien__meta span + span::before { content: '·'; margin-right: var(--e1); }

/* Le propriétaire sur sa propre ligne : c'est une information d'une autre
   nature que la surface ou la capacité, et elle est souvent longue. */
.carte-bien__proprietaire {
  color: var(--texte-doux);
  font-size: var(--t-petit);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- FICHE D'UN BIEN ------------------------------------------------------ */
.fiche__retour {
  background: none;
  border: none;
  color: var(--texte-doux);
  cursor: pointer;
  font-size: var(--t-petit);
  margin-bottom: var(--e2);
  padding: 0;
}
.fiche__retour:hover { color: var(--texte); }

.fiche__entete {
  align-items: flex-start;
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
  justify-content: space-between;
  margin-bottom: var(--e3);
}
.fiche__titre { font-size: var(--t-geant); }
.fiche__adresse { color: var(--texte-doux); margin-top: var(--e1); }

.fiche__sections { display: grid; gap: var(--e2); }
@media (min-width: 900px) { .fiche__sections { grid-template-columns: repeat(2, 1fr); } }

.panneau {
  background: var(--fond-carte);
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  padding: var(--e3);
}
.panneau__titre { font-size: 21px; margin-bottom: var(--e2); }

.liste-infos { display: grid; gap: var(--e2); }
.liste-infos__ligne {
  align-items: baseline;
  display: flex;
  gap: var(--e2);
  justify-content: space-between;
}
.liste-infos__valeur { text-align: right; }

/* --- INDICATEURS DU TABLEAU DE BORD --------------------------------------- */
.indicateurs {
  display: grid;
  gap: var(--e2);
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  margin-bottom: var(--e3);
}
.indicateur {
  background: var(--fond-carte);
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  padding: var(--e3);
}
.indicateur__valeur {
  display: block;
  font-family: var(--police-titre);
  font-size: var(--t-chiffre);
  font-weight: var(--graisse-titre);
  line-height: 1;
  margin-top: var(--e1);
}
.indicateur__precision { color: var(--texte-discret); font-size: var(--t-petit); }

.repartition { display: grid; gap: var(--e1); }
.repartition__ligne {
  align-items: center;
  display: flex;
  gap: var(--e2);
  justify-content: space-between;
}
.repartition__barre {
  background: var(--fond-actif);
  border-radius: var(--rayon-pastille);
  flex: 1;
  height: 6px;
  overflow: hidden;
}
.repartition__part { background: var(--accent); display: block; height: 100%; }

/* --- PHOTOS D'UN BIEN ------------------------------------------------------
   Des vignettes qui tiennent sur une ligne de pouce, et la photo principale
   repérée sans fioriture. Les photos sont privées : chaque adresse expire. */
.carte-bien__visuel--photo {
  background-position: center;
  background-size: cover;
}
.carte-bien__visuel--photo .carte-bien__reference,
.carte-bien__visuel--photo .pastille { backdrop-filter: blur(6px); }

.photos { display: grid; gap: var(--e2); }
.photos__grille {
  display: grid;
  gap: var(--e1);
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
}

.photos__vignette {
  background: var(--fond-surface);
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  margin: 0;
  overflow: hidden;
  position: relative;
}
.photos__vignette--principale { border-color: var(--accent); }

.photos__image {
  aspect-ratio: 4 / 3;
  display: block;
  height: auto;
  object-fit: cover;
  width: 100%;
}
.photos__image--absente {
  align-items: center;
  color: var(--texte-discret);
  display: flex;
  font-size: var(--t-petit);
  justify-content: center;
  text-align: center;
}

.photos__badge {
  background: var(--accent);
  border-radius: var(--rayon-pastille);
  color: var(--fond);
  font-size: var(--t-etiquette);
  font-weight: var(--graisse-forte);
  left: 8px;
  letter-spacing: 0.1em;
  padding: 3px 9px;
  position: absolute;
  text-transform: uppercase;
  top: 8px;
}

.photos__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e1);
  padding: var(--e1);
}
.photos__action {
  background: none;
  border: none;
  color: var(--texte-doux);
  cursor: pointer;
  font-size: var(--t-petit);
  padding: 0;
}
.photos__action:hover { color: var(--texte); }
.photos__action--retirer:hover { color: var(--critique); }

.photos__depot { align-items: center; display: flex; flex-wrap: wrap; gap: var(--e2); }
.photos__aide { color: var(--texte-discret); font-size: var(--t-petit); flex: 1; min-width: 200px; }
.photos__place { color: var(--texte-discret); font-size: var(--t-petit); margin: 0; }

/* Les filtres par pièce, au-dessus de la grille. */
.photos__filtres { display: flex; flex-wrap: wrap; gap: var(--e1); }

/* Ranger une photo dans une pièce : la liste tient dans la largeur de la
   vignette, et ne doit jamais la faire grandir. */
.photos__piece {
  background: var(--fond-actif);
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  color: var(--texte-doux);
  font-family: inherit;
  font-size: var(--t-petit);
  max-width: 100%;
  padding: 2px 4px;
  width: 100%;
}

/* --- LES PIÈCES D'UN BIEN -------------------------------------------------
   Une ligne par pièce : rang, nom modifiable sur place, type, et les gestes
   (monter, descendre, retirer). Pas de fenêtre, pas d'écran de plus.        */
.pieces { display: grid; gap: var(--e2); }
.pieces__liste { display: grid; gap: 2px; }

.piece {
  align-items: center;
  border-bottom: 1px solid var(--filet);
  display: grid;
  gap: var(--e1);
  grid-template-columns: 1.6rem minmax(0, 1fr) auto auto;
  padding: var(--e1) 0;
}
.piece:last-child { border-bottom: none; }
.piece__rang { color: var(--texte-discret); font-size: var(--t-petit); }

.piece__nom {
  background: none;
  border: 1px solid transparent;
  border-radius: var(--rayon);
  color: var(--texte);
  font-family: inherit;
  font-size: inherit;
  min-width: 0;
  padding: 4px 6px;
  width: 100%;
}
.piece__nom:hover { border-color: var(--filet); }
.piece__nom:focus { background: var(--fond-actif); border-color: var(--accent); outline: none; }
.piece__nom--fixe { padding: 4px 6px; }

.piece__type { color: var(--texte-discret); font-size: var(--t-petit); white-space: nowrap; }
.piece__actions { display: flex; gap: var(--e1); }
.piece__fleche {
  background: none;
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  color: var(--texte-doux);
  cursor: pointer;
  font-size: var(--t-petit);
  line-height: 1;
  padding: 4px 7px;
}
.piece__fleche:hover:not(:disabled) { border-color: var(--accent); color: var(--texte); }
.piece__fleche:disabled { opacity: 0.3; cursor: default; }

.pieces__ajout { display: flex; flex-wrap: wrap; gap: var(--e1); }
.pieces__ajout input { flex: 2; min-width: 160px; }
.pieces__ajout select { flex: 1; min-width: 150px; }
.pieces__vide { display: grid; gap: var(--e1); }
.pieces__proposition { color: var(--texte-doux); margin: 0; }
.pieces__vide-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
  margin-top: var(--e1);
}

/* --- PROPRIÉTAIRES : RECHERCHE ET ACCÈS DIRECT AUX BIENS ------------------ */
.recherche-proprios { flex: 1; min-width: 220px; }

/* Un bien listé sur la fiche d'un propriétaire s'ouvre d'un clic. */
.annonce--cliquable {
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  text-align: left;
  width: 100%;
}
.annonce--cliquable:hover { background: var(--fond-actif); }
.annonce__fleche { color: var(--accent); margin-left: var(--e1); }

.formulaire-bien__details { margin-top: var(--e2); }
.formulaire-bien__details summary {
  color: var(--accent);
  cursor: pointer;
  font-size: var(--t-petit);
  padding: var(--e1) 0;
}

/* --- LES DOCUMENTS --------------------------------------------------------
   La donnée la plus sensible : l'écran doit le montrer sans crier.          */
.documents { display: grid; gap: var(--e2); }

.documents__afournir {
  background: var(--accent-fond);
  border-radius: var(--rayon);
  display: grid;
  gap: var(--e1);
  padding: var(--e2);
}
.documents__manquantes { display: grid; gap: var(--e1); }
.documents__manquante { display: grid; gap: var(--e1); grid-template-columns: 1rem 1fr; }
.documents__puce { color: var(--critique); }
.documents__manquante-nom { display: block; }
.documents__manquante-nom em { color: var(--texte-discret); font-style: normal; }
.documents__aide {
  color: var(--texte-discret);
  display: block;
  font-size: var(--t-petit);
}

.documents__liste { display: grid; gap: 2px; }
.documents__ligne {
  align-items: center;
  border-bottom: 1px solid var(--filet);
  display: grid;
  gap: var(--e1);
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) auto auto;
  padding: var(--e1) 0;
}
.documents__ligne:last-child { border-bottom: none; }
.documents__type { color: var(--texte-doux); font-size: var(--t-petit); }
.documents__titre { min-width: 0; }
.documents__titre em {
  color: var(--texte-discret);
  display: block;
  font-size: var(--t-petit);
  font-style: normal;
}
.documents__cadenas { margin-left: 6px; }
.documents__gestes { display: flex; gap: var(--e1); }

.documents__depot { align-items: center; display: flex; flex-wrap: wrap; gap: var(--e1); }
.documents__modif {
  align-items: center;
  background: var(--fond-actif);
  border-radius: var(--rayon);
  display: flex;
  flex-wrap: wrap;
  gap: var(--e1);
  padding: var(--e1);
}
.documents__modif input[type="text"] { flex: 1; min-width: 160px; }
.documents__date { align-items: center; display: flex; font-size: var(--t-petit); gap: 6px; }
.documents__date span { color: var(--texte-discret); }
.documents__case { align-items: center; color: var(--texte-doux); display: flex; font-size: var(--t-petit); gap: 6px; }

@media (max-width: 700px) {
  .documents__ligne { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; }
  .documents__type { grid-column: 1; }
  .documents__titre { grid-column: 1 / span 2; grid-row: 2; }
  .documents__gestes { grid-column: 1 / span 2; grid-row: 3; justify-content: flex-end; }
}

/* --- LE CAHIER D'AMÉNAGEMENT ----------------------------------------------
   Une checklist visuelle, pas un tableau de gestion : on doit lire l'état
   d'une pièce sans ouvrir une seule ligne.                                  */
.cahier { display: grid; gap: var(--e3); }
.cahier__tete {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
  justify-content: space-between;
}
.cahier__avancement { color: var(--accent); font-size: var(--t-petit); }

.cahier__piece { display: grid; gap: var(--e1); }
.cahier__piece-tete {
  align-items: center;
  border-bottom: 1px solid var(--filet-marque);
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
  padding-bottom: var(--e1);
}
.cahier__piece-nom { font-size: 1.05rem; font-weight: var(--graisse-forte); }
.cahier__compte { color: var(--texte-discret); font-size: var(--t-petit); }

/* La barre tricolore : l'état de la pièce, d'un coup d'œil. */
.cahier__barre {
  background: var(--fond-actif);
  border-radius: var(--rayon-pastille);
  display: flex;
  flex: 1;
  height: 5px;
  min-width: 90px;
  overflow: hidden;
}
.cahier__part { display: block; height: 100%; }
.cahier__part--recu { background: var(--ok); }
.cahier__part--commande { background: var(--attention); }
.cahier__part--pas { background: var(--critique); }

.cahier__lignes { display: grid; gap: 2px; }
.cahier__ligne {
  align-items: center;
  border-bottom: 1px solid var(--filet);
  display: grid;
  gap: var(--e1);
  /* Le nom d'abord : c'est lui qu'on lit, puis le lien, qui doit rester
     entièrement lisible — un « Voir le produ… » ne sert à rien. */
  grid-template-columns: minmax(0, 2fr) minmax(8.5rem, 1.4fr) auto auto;
  padding: var(--e1) 0;
}
.cahier__ligne:last-child { border-bottom: none; }

.cahier__nom { min-width: 0; }
.cahier__nom em {
  color: var(--texte-discret);
  font-size: var(--t-petit);
  font-style: normal;
}
.cahier__nom em::before { content: ' — '; }

.cahier__lien {
  color: var(--accent);
  font-size: var(--t-petit);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cahier__lien--absent { color: var(--texte-discret); }
.cahier__site { color: var(--texte-discret); }
.cahier__site::before { content: ' · '; }
@media (max-width: 1100px) { .cahier__site { display: none; } }

.cahier__facultatifs {
  display: flex;
  flex-basis: 100%;
  flex-wrap: wrap;
  gap: var(--e1);
}
.cahier__facultatifs input { flex: 1; min-width: 140px; }

/* Un clic sur la pastille ouvre le choix des trois statuts : jamais de
   passage automatique au suivant. */
select.cahier__statut {
  background: var(--fond-actif);
  border: 1px solid var(--filet);
  border-radius: var(--rayon-pastille);
  color: var(--texte);
  font-family: inherit;
  font-size: var(--t-petit);
  padding: 4px 8px;
}
select.cahier__statut--ok { border-color: var(--ok); color: var(--ok); }
select.cahier__statut--attente { border-color: var(--attention); color: var(--attention); }
select.cahier__statut--alerte { border-color: var(--critique); color: var(--critique); }

.cahier__gestes { align-items: center; display: flex; gap: var(--e1); }
/* La pièce est déjà écrite en tête du groupe : cette liste ne sert qu'à
   déplacer une ligne, elle reste donc discrète et étroite. */
.cahier__piece-choix {
  background: none;
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  color: var(--texte-discret);
  font-family: inherit;
  font-size: var(--t-petit);
  max-width: 6.5rem;
  padding: 3px 4px;
}

.cahier__vide { color: var(--texte-discret); font-size: var(--t-petit); margin: 0; }
.cahier__ajout { display: flex; flex-wrap: wrap; gap: var(--e1); margin-top: var(--e1); }
.cahier__ajout input { flex: 1; min-width: 130px; }

/* Sur téléphone, chaque ligne se replie : le nom en haut, le lien et les
   gestes dessous. Le pouce doit atteindre la pastille sans zoomer. */
@media (max-width: 700px) {
  .cahier__ligne {
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: 6px;
  }
  .cahier__nom { grid-column: 1 / span 2; }
  .cahier__lien { grid-column: 1; }
  select.cahier__statut { grid-column: 2; grid-row: 2; }
  .cahier__gestes { grid-column: 1 / span 2; justify-content: flex-end; }
}

/* Sur téléphone, le nom prend toute la largeur (c'est lui qu'on tape), et le
   type et les gestes passent dessous. */
@media (max-width: 560px) {
  .piece { grid-template-columns: 1.4rem minmax(0, 1fr) auto; }
  .piece__nom, .piece__nom--fixe { grid-column: 2 / span 2; }
  .piece__type { align-self: center; grid-column: 2; grid-row: 2; }
  .piece__actions { grid-column: 3; grid-row: 2; }
}

/* --- ANNONCES D'UN BIEN ---------------------------------------------------
   Visible dès l'ouverture de la fiche : sur quelles plateformes le bien est
   en ligne, et le lien direct vers chaque annonce.                          */
.carte-bien__plateformes {
  color: var(--accent);
  font-size: var(--t-petit);
}

.annonces { display: grid; gap: var(--e2); }
.annonces__vide { color: var(--texte-doux); margin: 0; }
.annonces__liste { display: grid; gap: var(--e1); }

.annonce {
  align-items: center;
  border-bottom: 1px solid var(--filet);
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
  justify-content: space-between;
  padding-bottom: var(--e1);
}
.annonce:last-child { border-bottom: none; padding-bottom: 0; }
.annonce__canal { display: flex; flex-direction: column; gap: 2px; }
.annonce__lien { color: var(--accent); font-size: var(--t-petit); }
.annonce__lien:hover { text-decoration: underline; }
.annonce__lien--absent { color: var(--texte-discret); }
.annonce__actions { align-items: center; display: flex; gap: var(--e1); }

.annonce__statut {
  background: var(--fond-champ);
  border: 1px solid var(--filet-marque);
  border-radius: var(--rayon);
  color: var(--texte-doux);
  font-size: var(--t-petit);
  padding: 7px 10px;
}
.annonce__retirer {
  background: none;
  border: none;
  color: var(--texte-discret);
  cursor: pointer;
  font-size: var(--t-petit);
}
.annonce__retirer:hover { color: var(--critique); }

.annonces__ajout {
  border-top: 1px solid var(--filet);
  display: grid;
  gap: var(--e1);
  grid-template-columns: 1fr;
  padding-top: var(--e2);
}
@media (min-width: 620px) {
  .annonces__ajout { grid-template-columns: auto 1fr auto; align-items: center; }
}
.annonces__ajout select,
.annonces__ajout input {
  background: var(--fond-champ);
  border: 1px solid var(--filet-marque);
  border-radius: var(--rayon);
  color: var(--texte);
  padding: 12px 14px;
}
.annonces__ajout input::placeholder { color: var(--texte-discret); }
.annonces__ajout .message { grid-column: 1 / -1; }

/* --- FORMULAIRE D'UN BIEN -------------------------------------------------
   Six champs visibles, le reste replié : on peut créer un bien en dix
   secondes et le compléter plus tard (affichage progressif).               */
.bouton--compact { padding: 10px 16px; font-size: var(--t-etiquette); }

.formulaire-bien { max-width: 720px; }
.formulaire-bien__essentiel { display: grid; gap: var(--e2); margin-top: var(--e3); }
.formulaire-bien__duo { display: grid; gap: var(--e2); grid-template-columns: 1fr; }
@media (min-width: 560px) { .formulaire-bien__duo { grid-template-columns: 1fr 2fr; } }

.formulaire-bien__plus {
  border-top: 1px solid var(--filet);
  margin-top: var(--e3);
  padding-top: var(--e2);
}
.formulaire-bien__plus > summary {
  color: var(--texte-doux);
  cursor: pointer;
  font-size: var(--t-petit);
  list-style: none;
}
.formulaire-bien__plus > summary::-webkit-details-marker { display: none; }
.formulaire-bien__plus > summary::before { content: '＋ '; color: var(--accent); }
.formulaire-bien__plus[open] > summary::before { content: '− '; }
.formulaire-bien__plus > summary:hover { color: var(--texte); }

.formulaire-bien__grille {
  display: grid;
  gap: var(--e2);
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  margin-top: var(--e3);
}
.formulaire-bien__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
  margin-top: var(--e3);
}
.formulaire-bien .message { margin-top: var(--e2); }

/* Adresses proposées par la Base Adresse Nationale */
.champ-adresse { position: relative; }
.suggestions {
  background: var(--fond-carte);
  border-radius: var(--rayon);
  display: flex;
  flex-direction: column;
  margin-top: 4px;
  overflow: hidden;
}
.suggestions:not(:empty) { border: 1px solid var(--filet-marque); }
.suggestions__ligne {
  background: none;
  border: none;
  border-bottom: 1px solid var(--filet);
  color: var(--texte-doux);
  cursor: pointer;
  font-size: var(--t-petit);
  padding: 12px 14px;
  text-align: left;
}
.suggestions__ligne:last-child { border-bottom: none; }
.suggestions__ligne:hover { background: var(--fond-actif); color: var(--texte); }

/* Création d'un propriétaire sans quitter la fiche du bien */
.nouveau-proprietaire {
  background: var(--accent-fond);
  border: 1px solid var(--filet-marque);
  border-radius: var(--rayon);
  display: grid;
  gap: var(--e2);
  padding: var(--e2);
}
.nouveau-proprietaire__note { color: var(--texte-discret); font-size: var(--t-petit); margin: 0; }
.case { align-items: center; color: var(--texte-doux); display: flex; font-size: var(--t-petit); gap: var(--e1); }
.case input { accent-color: var(--accent); height: 18px; width: 18px; }

/* --- AIDE ET RECHERCHE -----------------------------------------------------
   « Où est quoi ? » : un champ de recherche, puis un guide écrit à la main.
   Pas d'intelligence artificielle : des données et des phrases.           */
.aide__recherche { max-width: 720px; }
.aide__champ {
  background: var(--fond-champ);
  border: 1px solid var(--filet-marque);
  border-radius: var(--rayon);
  color: var(--texte);
  padding: 15px 16px;
  width: 100%;
}
.aide__champ:focus { border-color: var(--accent); outline: none; }
.aide__resultats:not(:empty) { margin-top: var(--e2); }

.aide__resultat {
  background: var(--fond-carte);
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  color: inherit;
  cursor: pointer;
  display: grid;
  gap: 3px;
  padding: var(--e2);
  text-align: left;
  transition: border-color var(--duree), background var(--duree);
  width: 100%;
}
.aide__resultat:hover { background: var(--fond-actif); border-color: var(--filet-marque); }
.aide__resultat-titre { font-size: var(--t-normal); }
.aide__resultat-detail { color: var(--texte-doux); font-size: var(--t-petit); }

/* Le voyant des sauvegardes, en tête du tableau de bord : une ligne, lisible
   d'un coup d'œil, verte quand tout va bien, rouge quand il faut agir. */
.voyant-sauvegarde { margin: 0 0 var(--e3); }

/* --- CALENDRIER DU MOIS ----------------------------------------------------
   Une ligne par bien, une colonne par jour. Sur téléphone, la grille défile
   horizontalement et la colonne des biens reste visible : c'est le seul
   moyen honnête de montrer un mois entier sans mentir sur la place.        */
.calendrier {
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  overflow-x: auto;
  overflow-y: hidden;
}
.calendrier__grille {
  display: grid;
  grid-template-columns: 132px repeat(var(--jours), minmax(26px, 1fr));
  min-width: max-content;
}
.calendrier__mois {
  font-family: var(--police-titre);
  font-size: 21px;
  padding: 0 var(--e1);
}

.calendrier__coin,
.calendrier__bien {
  background: var(--fond-surface);
  border-right: 1px solid var(--filet);
  font-size: var(--t-petit);
  left: 0;
  overflow: hidden;
  padding: 8px var(--e1);
  position: sticky;
  text-overflow: ellipsis;
  white-space: nowrap;
  z-index: 2;
}
.calendrier__coin {
  color: var(--texte-discret);
  font-size: var(--t-etiquette);
  letter-spacing: var(--espace-lettres);
  text-transform: uppercase;
}

.calendrier__jour {
  align-items: center;
  border-bottom: 1px solid var(--filet);
  color: var(--texte-discret);
  display: flex;
  flex-direction: column;
  font-size: 10px;
  gap: 1px;
  padding: 6px 0;
}
.calendrier__jour--weekend { background: var(--fond-surface); }
.calendrier__jour--aujourdhui { color: var(--accent); }
.calendrier__jour-numero { font-size: 11px; }

.calendrier__case {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--filet);
  border-right: 1px solid var(--filet);
  cursor: pointer;
  height: 34px;
  padding: 0;
  transition: filter var(--duree);
}
.calendrier__case:hover { filter: brightness(1.5); }
.calendrier__case--weekend { background: var(--fond-surface); }
.calendrier__case--aujourdhui { box-shadow: inset 0 0 0 1px var(--accent); }

.calendrier__case--ok        { background: var(--ok); }
.calendrier__case--info      { background: var(--info); }
.calendrier__case--attention { background: var(--attention); }
.calendrier__case--critique  { background: var(--critique); }
.calendrier__case--neutre    { background: var(--filet-marque); }
.calendrier__case--bloquee   {
  background: repeating-linear-gradient(45deg,
    var(--filet-marque), var(--filet-marque) 4px, var(--fond-carte) 4px, var(--fond-carte) 8px);
}

.calendrier__detail {
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  margin-top: var(--e2);
  min-height: 58px;
  padding: var(--e2);
}
.calendrier__detail-ligne { align-items: center; display: flex; flex-wrap: wrap; gap: var(--e2); }
.calendrier__note { color: var(--texte-doux); font-size: var(--t-petit); }

.calendrier__legende {
  color: var(--texte-discret);
  display: flex;
  flex-wrap: wrap;
  font-size: var(--t-petit);
  gap: var(--e2);
  margin-top: var(--e2);
}
.calendrier__legende-item { align-items: center; display: flex; gap: 6px; }
.calendrier__puce {
  border-radius: 2px;
  display: inline-block;
  height: 12px;
  width: 12px;
}

/* --- LA JOURNÉE (tableau de bord) ------------------------------------------
   Arrivées, départs, séjours en cours : trois colonnes sur grand écran, une
   seule sur téléphone, dans cet ordre de lecture.                           */
.journee { display: grid; gap: var(--e3); grid-template-columns: 1fr; }
@media (min-width: 900px) { .journee { grid-template-columns: repeat(3, 1fr); } }

.journee__entete {
  align-items: baseline;
  border-bottom: 1px solid var(--filet);
  display: flex;
  gap: var(--e1);
  justify-content: space-between;
  padding-bottom: var(--e1);
}
.journee__nombre { color: var(--accent); font-size: 18px; }
.journee__rien { color: var(--texte-discret); margin: var(--e2) 0 0; }
.journee__liste { display: grid; gap: var(--e2); margin-top: var(--e2); }

.journee__ligne { align-items: flex-start; display: flex; gap: var(--e1); }
.journee__heure { color: var(--texte-doux); font-size: var(--t-petit); min-width: 44px; }
.journee__details { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.journee__bien { font-size: var(--t-normal); }
.journee__voyageur { color: var(--texte-discret); font-size: var(--t-petit); }
.journee__ligne .pastille { white-space: nowrap; }

/* --- LISTE DES SÉJOURS -----------------------------------------------------
   Une ligne par séjour : les dates d'abord, c'est ce qu'on cherche le matin. */
.liste-sejours { display: grid; gap: var(--e1); }

.sejour {
  align-items: center;
  background: var(--fond-carte);
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  color: inherit;
  cursor: pointer;
  display: grid;
  gap: var(--e1) var(--e2);
  grid-template-columns: 1fr;
  padding: var(--e2);
  text-align: left;
  transition: border-color var(--duree), background var(--duree);
  width: 100%;
}
.sejour:hover { background: var(--fond-actif); border-color: var(--filet-marque); }
/* Trois colonnes seulement quand il y a vraiment la place : en dessous, les
   informations s'empilent plutôt que de se chevaucher. */
@media (min-width: 1000px) {
  .sejour { grid-template-columns: minmax(240px, auto) minmax(0, 1fr) auto; }
}

.sejour__dates { align-items: baseline; display: flex; flex-wrap: wrap; gap: var(--e1); }
.sejour__arrivee, .sejour__depart { font-size: var(--t-normal); }
.sejour__fleche { color: var(--texte-discret); }
.sejour__nuits { color: var(--texte-discret); font-size: var(--t-petit); }

.sejour__corps { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sejour__bien {
  font-family: var(--police-titre);
  font-size: 21px;
  font-weight: var(--graisse-titre);
  line-height: 1.15;
}
.sejour__voyageur {
  color: var(--texte-doux);
  font-size: var(--t-petit);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sejour__fin { align-items: center; display: flex; gap: var(--e2); justify-content: space-between; }
.sejour__fin .pastille { white-space: nowrap; }
@media (min-width: 1000px) { .sejour__fin { justify-content: flex-end; } }
.sejour__total { color: var(--texte); font-size: var(--t-normal); }

/* Les cases propres au bail mobilité, mises en évidence sans crier */
.bail-mobilite {
  background: var(--accent-fond);
  border: 1px solid var(--filet-marque);
  border-radius: var(--rayon);
  display: grid;
  gap: var(--e2);
  padding: var(--e2);
}

/* --- ÉTATS (chargement, vide, erreur) ------------------------------------- */
.etat {
  color: var(--texte-doux);
  padding: var(--e4) 0;
  text-align: center;
}
.etat__titre { font-size: 23px; margin-bottom: var(--e1); }