:root {
  --encre: #1f2933;
  /* Contrastes WCAG AA : texte secondaire 6:1 sur le fond, bordures de champ au moins 3:1. */
  --gris: #52606d;
  --bordure: #7b8794;
  --fond: #f5f7fa;
  --libre: #ffffff;
  --occupe: #ffd6a5;
  --occupe-encre: #7a3e00;
  --accent: #2b6cb0;
  --alerte: #c53030;
  --alerte-encre: #9b2c2c;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--encre);
  background: var(--fond);
  line-height: 1.4;
}

a { color: var(--accent); }

/* Focus toujours visible au clavier, contrasté (3:1) sur tous les fonds de l'application. */
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* Texte réservé aux lecteurs d'écran (ex. « libre » dans le calendrier). */
.visuellement-masque { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.lien-action { display: inline-flex; align-items: center; min-height: 44px; }

.entete {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  background: #fff;
  border-bottom: 1px solid #e1e5ea;
}

.marque { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; text-decoration: none; color: var(--encre); }
.lien-entete { display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.6rem; font-weight: 600; text-decoration: none; }
.evitement { position: absolute; left: -999px; display: inline-flex; align-items: center; min-height: 44px; top: 0.5rem; padding: 0.5rem 0.9rem; background: #fff; color: var(--accent); border: 2px solid var(--accent); border-radius: 6px; z-index: 1; }
.evitement:focus { left: 0.5rem; }
.actions-entete { display: flex; gap: 0.5rem; align-items: center; }
.deconnexion { margin: 0; }

.bouton {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.5rem 0.9rem;
  border-radius: 6px;
  background: var(--accent);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  border: 0;
  font-size: 1rem;
  cursor: pointer;
}

.bouton.secondaire { background: #fff; color: var(--accent); border: 1px solid var(--accent); }
.bouton.danger { background: var(--alerte); }
/* Pendant l'envoi : couleurs dédiées plutôt qu'une opacité, le libellé reste lisible (6:1). */
.bouton:disabled { background: var(--gris); color: #fff; cursor: progress; }
.bouton.secondaire:disabled { background: #fff; color: var(--gris); border-color: var(--gris); }

main { padding: 1rem; max-width: 900px; margin: 0 auto; }

h1 { font-size: 1.4rem; margin: 0; }
/* Seul le mois du calendrier prend une majuscule (« février 2026 » → « Février 2026 »). */
.navigation-mois h1 { text-transform: capitalize; }
h2 { font-size: 1.1rem; margin: 1.5rem 0 0.5rem; }

.navigation-mois {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.navigation-mois a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; font-size: 1.5rem; text-decoration: none; padding: 0 0.5rem; }

.logement { color: var(--gris); margin: 0.25rem 0 1rem; }

.grille {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}

.entete-jour { text-align: center; font-size: 0.75rem; color: var(--gris); text-transform: uppercase; }

.jour {
  min-height: 3.2rem;
  border-radius: 4px;
  padding: 0;
  font-size: 0.85rem;
  overflow: hidden;
}

.jour.libre { background: var(--libre); border: 1px solid #e1e5ea; }
.jour.occupe { background: var(--occupe); color: var(--occupe-encre); }
/* Jour courant : bordure épaisse et numéro souligné, repérables sans la couleur. */
.jour.aujourdhui { box-shadow: inset 0 0 0 3px var(--accent); }
.jour.aujourdhui .numero { text-decoration: underline; text-underline-offset: 2px; }

/* Le lien couvre toute la case (cible tactile d'au moins 44 px, même sur 390 px de large). */
.jour a, .jour > .numero { padding: 0.2rem; }
/* La case coupe ce qui dépasse : le contour de focus du lien est tracé à l'intérieur. */
.jour a:focus-visible { outline-offset: -3px; }
.jour a {
  display: block;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

.jour .numero { display: block; font-weight: 600; }

.jour .client {
  display: block;
  font-size: 0.7rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sejours-du-mois ul { list-style: none; padding: 0; margin: 0; }

.sejours-du-mois li {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  padding: 0.6rem 0;
  border-bottom: 1px solid #e1e5ea;
}

.sejours-du-mois li a { display: flex; flex-direction: column; text-decoration: none; color: var(--encre); flex: 1 1 12rem; }

.vide { color: var(--gris); }

.badge {
  font-size: 0.75rem;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: #e1e5ea;
}

.badge.alerte { background: #fed7d7; color: var(--alerte-encre); }
.badge.reste-du { background: #fefcbf; color: #744210; }

.message { padding: 0.75rem 1rem; border-radius: 6px; margin: 0 0 1rem; }
.message.erreur { background: #fed7d7; color: var(--alerte-encre); }
.message.avertissement { background: #fefcbf; color: #744210; }
.message.succes { background: #c6f6d5; color: #22543d; }
/* Un lien dans un message prend la couleur du message (au moins 5,7:1 sur son fond). */
.message a { color: inherit; }
.client-choisi { padding: 0.75rem 1rem; border: 1px solid var(--bordure); border-radius: 6px; background: #f5f7fa; }

/* Formulaires */
.formulaire form, .actions-sejour form { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1rem; }
.formulaire label, .actions-sejour label { font-weight: 600; }
.formulaire input[type="text"], .formulaire input[type="tel"], .formulaire input[type="date"], .formulaire input[type="password"], .formulaire select,
.actions-sejour input[type="number"], .actions-sejour input[type="date"], .actions-sejour input[type="text"],
.actions-sejour input[type="tel"], .actions-sejour select {
  min-height: 44px;
  font-size: 1rem;
  padding: 0.5rem;
  border: 1px solid var(--bordure);
  border-radius: 6px;
  width: 100%;
  max-width: 24rem;
}
.formulaire fieldset { border: 0; padding: 0; margin: 0; display: flex; gap: 1rem; }
.formulaire fieldset.identite, .formulaire fieldset.note { flex-direction: column; gap: 0.4rem; }
.formulaire legend { font-weight: 600; margin-bottom: 0.25rem; }
.formulaire .case { font-weight: 400; }
/* Cases et boutons radio : le libellé qui les entoure sert de zone tactile de 44 px. */
.formulaire label:has(> input[type="radio"]), .formulaire label:has(> input[type="checkbox"]) { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 44px; min-width: 44px; }
.formulaire input[type="radio"], .formulaire input[type="checkbox"] { width: 1.25rem; height: 1.25rem; margin: 0; }
.connexion { max-width: 24rem; margin-top: 3rem; }
.actions { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.5rem; }
.actions-sejour form { padding: 0.75rem; background: #fff; border: 1px solid #e1e5ea; border-radius: 6px; }
.actions-sejour button { align-self: flex-start; }

/* Paiements */
.paiements .encaissement { display: flex; flex-direction: column; gap: 0.4rem; padding: 0.75rem; margin-top: 1rem; background: #fff; border: 1px solid #e1e5ea; border-radius: 6px; }
.paiements .encaissement label { font-weight: 600; }
.paiements .encaissement input, .paiements .encaissement select { min-height: 44px; font-size: 1rem; padding: 0.5rem; border: 1px solid var(--bordure); border-radius: 6px; width: 100%; max-width: 24rem; }
.paiements .encaissement button { align-self: flex-start; }
.paiements .encaissement h2 { margin: 0 0 0.25rem; }
/* Montant : le champ passe sous son libellé et laisse la place au « € » sur sa ligne. */
.paiements .encaissement input[type="number"] { width: calc(100% - 1.5rem); max-width: 22rem; margin-right: 0.25rem; }

/* Notes du client */
.notes { list-style: none; padding: 0; margin: 0 0 1rem; }
.notes li { display: flex; flex-direction: column; gap: 0.3rem; padding: 0.75rem; margin-top: 0.5rem; background: #fff; border: 1px solid #e1e5ea; border-radius: 6px; }
.notes time { font-weight: 600; color: var(--gris); }
.notes p { margin: 0; white-space: pre-line; }
.notes form { margin: 0; }
.notes-client .formulaire textarea { font-size: 1rem; padding: 0.5rem; border: 1px solid var(--bordure); border-radius: 6px; width: 100%; max-width: 32rem; }
.notes-client .formulaire { display: flex; flex-direction: column; gap: 0.4rem; }
.notes-client .formulaire button { align-self: flex-start; }

/* Fiche */
.fiche h1 { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.resume { display: grid; grid-template-columns: max-content 1fr; gap: 0.25rem 1rem; margin: 1rem 0; }
.resume dt { color: var(--gris); }
.resume dd { margin: 0; }
.message ul, ul.message { list-style: none; padding-left: 1rem; }

/* Clients (mobile d'abord : une colonne, cibles de 44 px, tableau défilant) */
.recherche { display: flex; flex-direction: column; gap: 0.4rem; margin: 1rem 0; }
.recherche label { font-weight: 600; }
.champ-recherche { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.recherche input[type="search"] { flex: 1 1 12rem; min-height: 44px; font-size: 1rem; padding: 0.5rem; border: 1px solid var(--bordure); border-radius: 6px; }
.recherche .bouton { min-height: 44px; }
/* Listes en cartes : une carte par élément, lisible sur 390 px sans défilement horizontal. */
.compte { color: var(--gris); margin: 1rem 0 0.5rem; }
.cartes { list-style: none; padding: 0; margin: 0 0 1rem; display: flex; flex-direction: column; gap: 0.5rem; }
.carte { padding: 0.5rem 0.75rem; background: #fff; border: 1px solid #e1e5ea; border-radius: 6px; }
.carte p { margin: 0; }
.carte-titre { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-weight: 600; }
.carte-detail { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.75rem; color: var(--gris); padding-bottom: 0.25rem; }
.carte-detail strong { color: var(--encre); }
.fusion-suppression .formulaire { display: flex; flex-direction: column; align-items: flex-start; gap: 0.4rem; margin-bottom: 1rem; }

/* Fiche séjour : paiements d'abord, actions rares repliées. */
.resume-financier { display: grid; grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr)); gap: 0.5rem; margin: 1rem 0; }
.resume-financier dt { color: var(--gris); font-size: 0.85rem; }
.resume-financier dd { margin: 0; font-size: 1.15rem; font-weight: 700; }
.prix-ligne { display: flex; flex-direction: column; gap: 0.25rem; margin-top: 0.5rem; }
.prix-ligne label { font-weight: 600; }
.champ-prix { display: flex; align-items: center; gap: 0.5rem; }
.champ-prix input { width: 7rem; min-height: 44px; padding: 0.5rem; font-size: 1rem; border: 1px solid var(--bordure); border-radius: 6px; }
.total-sejour { display: flex; justify-content: space-between; align-items: baseline; padding: 0.5rem 0.75rem; margin: 0 0 1rem; }
.total-sejour strong { font-size: 1.15rem; }
.repli { margin-bottom: 0.5rem; background: #fff; border: 1px solid #e1e5ea; border-radius: 6px; }
.repli > summary { display: flex; align-items: center; min-height: 44px; padding: 0 0.75rem; font-weight: 600; cursor: pointer; }
.repli[open] > summary { border-bottom: 1px solid #e1e5ea; }
/* Signe « + » / « − » à droite : la section se déplie, même sans le triangle du navigateur. */
.repli > summary::-webkit-details-marker { display: none; }
.repli > summary::after { content: "+"; margin-left: auto; font-size: 1.25rem; color: var(--accent); }
.repli[open] > summary::after { content: "−"; }
.repli form, .repli > div { margin: 0.75rem; }
.actions-sejour .repli form { padding: 0; border: 0; }