:root {
  --bg: #f6f3ee;
  --card: #ffffff;
  --text: #2b2a27;
  --muted: #77736b;
  --line: #e6e1d8;
  --accent: #2f6f5e;
  --accent-soft: #e3efe9;
  --danger: #b4423a;

  --demande-bg: #fdf1dc; --demande-fg: #8a5a00;
  --prevision-bg: #e2ecfb; --prevision-fg: #1f4f99;
  --validee-bg: #dff2e5; --validee-fg: #1e6b3a;
  --refusee-bg: #fbe3e1; --refusee-fg: #a03a32;
  --annulee-bg: #eeece8; --annulee-fg: #7a766e;

  /* Couleurs des maisons */
  --bleue: #2f6fd0;
  --jaune: #e2ad00;
  --verte: #2e8b57;
}
.m-bleue { --c: var(--bleue); }
.m-jaune { --c: var(--jaune); }
.m-verte { --c: var(--verte); }

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  line-height: 1.45;
}
/* Fond aquarelle de la maison (fixe, derrière tout le contenu) */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--bg) url('fond-aquarelle.jpg') center 40% / cover no-repeat;
}
h1, h2, h3 { margin: 0 0 .5rem; line-height: 1.2; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1.05rem; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }

/* ---------- Boutons & formulaires ---------- */
.btn {
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--text);
  border-radius: 8px;
  padding: .55rem 1rem;
  font: inherit;
  cursor: pointer;
}
.btn:hover { filter: brightness(.97); }
.btn:disabled { opacity: .6; cursor: wait; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.btn.ok { background: var(--validee-fg); border-color: var(--validee-fg); color: #fff; }
.btn.danger { background: var(--card); border-color: var(--danger); color: var(--danger); }
.btn.ghost { background: transparent; }
.btn.small { padding: .3rem .7rem; font-size: .85rem; }

.form { display: grid; gap: .9rem; }
label { display: grid; gap: .3rem; font-weight: 600; font-size: .9rem; }
input, textarea, select {
  font: inherit;
  font-weight: 400;
  padding: .55rem .7rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  width: 100%;
}
input:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }

/* ---------- Mise en page ---------- */
.card {
  background: rgba(255, 255, 255, .78);
  backdrop-filter: blur(3px);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1.2rem;
}
.demo-banner {
  background: #fff4c7;
  border-bottom: 1px solid #ecd98a;
  padding: .5rem 1rem;
  font-size: .85rem;
  text-align: center;
}

.login { min-height: 90vh; display: grid; place-items: center; padding: 1rem; }
.login-card { width: 100%; max-width: 380px; display: grid; gap: .9rem; text-align: center; }
.login-card label { text-align: left; }
.logo { font-size: 2.5rem; }

.topbar {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: .6rem 1.2rem;
  background: linear-gradient(90deg, #1d4e89, #2f6fd0); color: #fff;  /* bandeau bleu */
}
.brand { font-weight: 700; font-size: 1.1rem; display: flex; align-items: center; gap: .7rem; }
.logo-fs2k { width: 40px; height: 40px; display: block; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .25)); }
.who { display: flex; align-items: center; gap: .7rem; font-size: .9rem; }
.who .btn { color: #fff; border-color: rgba(255,255,255,.5); }

.tabs {
  display: flex; gap: .3rem; overflow-x: auto;
  padding: .6rem 1rem 0; background: rgba(255, 255, 255, .72); backdrop-filter: blur(3px);
  border-bottom: 1px solid var(--line);
}
.tab {
  border: none; background: none; font: inherit; cursor: pointer; white-space: nowrap;
  padding: .6rem .9rem; color: var(--muted); border-bottom: 3px solid transparent;
}
.tab.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.count {
  display: inline-block; min-width: 1.3rem; padding: 0 .35rem; margin-left: .2rem;
  border-radius: 99px; background: var(--danger); color: #fff; font-size: .75rem; text-align: center;
}

.view { max-width: 1000px; margin: 0 auto; padding: 1rem; display: grid; gap: 1rem; }
.narrow { max-width: 560px; width: 100%; justify-self: center; }

/* ---------- Statuts ---------- */
.badge { display: inline-block; padding: .15rem .6rem; border-radius: 99px; font-size: .8rem; font-weight: 600; white-space: nowrap; }
.s-demande   { background: var(--demande-bg);   color: var(--demande-fg); }
.s-prevision { background: var(--prevision-bg); color: var(--prevision-fg); }
.s-validee   { background: var(--validee-bg);   color: var(--validee-fg); }
.s-refusee   { background: var(--refusee-bg);   color: var(--refusee-fg); }
.s-annulee   { background: var(--annulee-bg);   color: var(--annulee-fg); }
.legend { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; margin-bottom: .8rem; font-size: .85rem; }
.legend-sep { width: 1px; height: 1.1em; background: var(--line); }

/* ---------- Maisons ---------- */
.maisons { display: flex; flex-wrap: wrap; gap: .2rem .8rem; }
.pour-qui { border: none; padding: 0; margin: 0; display: grid; gap: .4rem; }
.pour-qui legend { font-weight: 600; font-size: .9rem; margin-bottom: .3rem; padding: 0; }
.warn ul { margin: .3rem 0 0; padding-left: 1.2rem; }
.maison { display: inline-flex; align-items: center; white-space: nowrap; font-weight: 600; }
.dot { width: .75em; height: .75em; border-radius: 50%; margin-right: .35em; background: var(--c); flex: none; }
.swatch { width: 1.6em; height: .8em; border-radius: 3px; margin-right: .35em; --c: #8a857c; }
.plein { background: var(--c); }
.hachure {
  background: repeating-linear-gradient(135deg,
    color-mix(in srgb, var(--c) 45%, white) 0 4px,
    color-mix(in srgb, var(--c) 18%, white) 4px 8px);
}

.choix-maison { border: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.choix-maison legend { font-weight: 600; font-size: .9rem; margin-bottom: .3rem; padding: 0; }
.carte-maison {
  display: flex; align-items: center; gap: .5rem; cursor: pointer;
  border: 2px solid var(--line); border-top: 6px solid var(--c); border-radius: 10px; padding: .6rem .7rem;
}
.carte-maison input { width: auto; accent-color: var(--c); }
.carte-maison:has(input:checked) { border-color: var(--c); background: color-mix(in srgb, var(--c) 10%, white); }

/* ---------- Calendrier : une grille par semaine, une barre par séjour ---------- */
.cal-head { display: flex; align-items: center; gap: .5rem; margin-bottom: .6rem; }
.cal-head h2 { flex: 1; margin: 0; text-transform: capitalize; text-align: center; }
.cal { --lane-h: 20px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.dows, .week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.week { row-gap: 3px; }
.dow { text-align: center; font-size: .8rem; color: var(--muted); padding: .3rem 0;
       border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: rgba(240, 236, 228, .45); }
.day-bg { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.day-bg.out { background: rgba(240, 236, 228, .45); }
/* Le calendrier laisse voir l'aquarelle ; presque transparent quand le mois est vide */
.cal-card { background: rgba(255, 255, 255, .55); backdrop-filter: none; }
.cal-card.vide { background: rgba(255, 255, 255, .3); }
.cal-card .cal-head .btn { background: rgba(255, 255, 255, .85); }
.cal-card.vide .dow, .cal-card.vide .day-bg.out { background: transparent; }
.cal-card .cal-head h2, .cal-card .legend, .cal-card .num, .cal-card .dow {
  text-shadow: 0 0 3px #fff, 0 0 6px #fff;  /* reste lisible sur l'image */
}
.cal-card .num { color: var(--text); }
.cal-vide { text-align: center; margin: .8rem 0 0; }
.cal-vide::before { content: '🏡 '; }
.cal-vide { font-weight: 600; color: var(--text); text-shadow: 0 0 4px #fff, 0 0 8px #fff; }
.num { grid-row: 1; font-size: .8rem; color: var(--muted); margin: 3px 0 0 4px; justify-self: start; position: relative; }
.num.out { opacity: .5; }
.num.today { background: var(--accent); color: #fff; border-radius: 99px; padding: 0 .45em; }
.lane {
  display: block; border: none; padding: 0 6px; margin: 0; min-width: 0; position: relative;
  font: inherit; font-size: .75rem; font-weight: 600; line-height: var(--lane-h); text-align: left;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
button.lane { cursor: pointer; }
.lane.plein { color: #fff; }
.lane.m-jaune.plein { color: #3d2e00; }
.lane.hachure { color: var(--text); }
.lane.debut { margin-left: 3px; border-radius: 5px 0 0 5px; }
.lane.fin { margin-right: 3px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; }
button.lane:hover { filter: brightness(.92); }

/* ---------- Listes ---------- */
.list { display: grid; gap: .4rem; }
.row {
  display: flex; justify-content: space-between; align-items: center; gap: .8rem;
  width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer;
  background: #faf8f4; border: 1px solid var(--line); border-radius: 10px; padding: .7rem .9rem;
}
.row:hover { border-color: var(--accent); }
.row-main { display: grid; gap: .1rem; min-width: 0; }
.empty { text-align: center; padding: 1.5rem; color: var(--muted); }

/* ---------- Validation ---------- */
.vcard { display: grid; gap: .7rem; }
.vcard header { display: flex; justify-content: space-between; align-items: flex-start; gap: .8rem; }
.comment { margin: 0; padding: .6rem .8rem; background: #faf8f4; border-radius: 8px; font-style: italic; }
.warn { padding: .6rem .8rem; background: var(--demande-bg); color: var(--demande-fg); border-radius: 8px; font-size: .9rem; }
.error { padding: .6rem .8rem; background: var(--refusee-bg); color: var(--refusee-fg); border-radius: 8px; font-size: .9rem; }
.votes { display: grid; gap: .25rem; margin: 0; padding: 0; list-style: none; font-size: .9rem; }
.votes .v-ok { color: var(--validee-fg); }
.votes .v-no { color: var(--refusee-fg); }
.votes .v-wait { color: var(--muted); }
.vote { display: flex; gap: .5rem; flex-wrap: wrap; }
.vote input { flex: 1 1 200px; width: auto; }

/* ---------- Modale & toast ---------- */
.modal {
  position: fixed; inset: 0; background: rgba(30, 28, 24, .45);
  display: grid; place-items: center; padding: 1rem; z-index: 10;
}
.modal-box { position: relative; width: 100%; max-width: 520px; max-height: 90vh; overflow: auto; display: grid; gap: .8rem; }
.close { position: absolute; top: .5rem; right: .7rem; border: none; background: none; font-size: 1.6rem; cursor: pointer; color: var(--muted); }
.details { display: grid; grid-template-columns: auto 1fr; gap: .3rem 1rem; margin: 0; }
.details dt { color: var(--muted); }
.details dd { margin: 0; }
.actions { display: flex; gap: .5rem; flex-wrap: wrap; }

.toast {
  position: fixed; left: 50%; bottom: 1.2rem; transform: translateX(-50%);
  background: var(--text); color: #fff; padding: .7rem 1.1rem; border-radius: 10px;
  z-index: 20; max-width: calc(100% - 2rem); box-shadow: 0 6px 20px rgba(0,0,0,.2);
}
.toast.error { background: var(--danger); }

.link { border: none; background: none; padding: 0; font: inherit; color: var(--accent); text-decoration: underline; cursor: pointer; }

/* ---------- Administration ---------- */
.attente { border-color: var(--demande-fg); background: var(--demande-bg); }
.demande-compte { cursor: default; background: var(--card); flex-wrap: wrap; }
.demande-compte .actions { align-items: center; }
.demande-compte select { width: auto; padding: .3rem .4rem; }
.info { background: var(--accent-soft); border-color: var(--accent); line-height: 1.8; }
code { background: rgba(0,0,0,.06); padding: .1em .4em; border-radius: 4px; font-size: .95em; user-select: all; }
.inline { display: flex; gap: .4rem; }
.check { display: flex; align-items: center; gap: .5rem; font-weight: 400; }
.check input { width: auto; }
.table-wrap { overflow-x: auto; }
.users { width: 100%; border-collapse: collapse; font-size: .9rem; }
.users th { text-align: left; color: var(--muted); font-weight: 600; font-size: .8rem; padding: .4rem; border-bottom: 1px solid var(--line); }
.users td { padding: .45rem .4rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
.users select { padding: .3rem .4rem; width: auto; }
.users input[type=checkbox] { width: auto; }
.nowrap { white-space: nowrap; }

@media (max-width: 640px) {
  .view { padding: .6rem; }
  .card { padding: .9rem; }
  .cal { --lane-h: 16px; }
  .lane { font-size: .62rem; padding: 0 3px; }
  .choix-maison { grid-template-columns: 1fr; }
  .grid2 { grid-template-columns: 1fr; }
  .topbar { padding: .7rem .9rem; }
  #user-name { display: none; }
}

/* ---------- Modifications de séjour ---------- */
.badges { display: flex; flex-wrap: wrap; gap: .3rem; justify-content: flex-end; }
.s-modif { background: #efe4fb; color: #5b2d8f; }
.diff { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.diff > div { background: #faf8f4; border: 1px solid var(--line); border-radius: 10px; padding: .7rem; display: grid; gap: .4rem; }
.diff > div:last-child { border-color: #b996e0; background: #f8f3fd; }
.diff h4 { margin: 0; font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
.vcard.modif { border-color: #b996e0; }
@media (max-width: 640px) { .diff { grid-template-columns: 1fr; } }

/* ---------- Dépenses ---------- */
.depense { cursor: default; flex-wrap: wrap; }
.depense .actions { align-items: center; justify-content: flex-end; }
.filtres { display: flex; gap: .4rem; margin: .4rem 0 .8rem; }
.apercu { max-width: 100%; max-height: 70vh; border-radius: 8px; justify-self: center; }

/* ---------- Infos maison ---------- */
.topbar .btn-infos { border-color: rgba(255,255,255,.5); }
.topbar .btn-infos.active { background: rgba(255,255,255,.22); }
.sommaire { display: flex; flex-wrap: wrap; gap: .4rem; }
.sommaire a { padding: .3rem .7rem; border: 1px solid var(--line); border-radius: 99px; background: #fff;
              color: var(--accent); text-decoration: none; font-size: .9rem; }
.doc { display: grid; gap: .6rem; scroll-margin-top: 1rem; }
.doc-head { display: flex; justify-content: space-between; align-items: center; gap: .8rem; }
.doc-head h2 { margin: 0; }
.doc-texte { line-height: 1.6; }
.doc-texte h3, .doc-texte h4, .doc-texte h5 { margin: 1rem 0 .3rem; }
.doc-texte p { margin: 0 0 .7rem; }
.doc-texte ul { margin: 0 0 .7rem; padding-left: 1.3rem; }
.doc-texte a { color: var(--accent); }
.doc textarea { font-family: inherit; line-height: 1.5; }
.inline-form { grid-template-columns: 1fr auto; align-items: end; }
@media (max-width: 640px) { .topbar .who { gap: .4rem; } }
.doc > .btn { justify-self: start; }

/* ---------- Bonnes idées et Travaux ---------- */
details > summary { list-style: none; cursor: pointer; text-align: center; }
details > summary::-webkit-details-marker { display: none; }
details[open] > summary { margin-bottom: 1rem; }
.choix-cat { border: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.puce { display: inline-flex; align-items: center; gap: .35rem; font-weight: 500; cursor: pointer;
        border: 1px solid var(--line); border-radius: 99px; padding: .35rem .8rem; background: #fff; }
.puce input { width: auto; margin: 0; }
.puce:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.mur { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; align-items: start; }
.idee, .realisation { display: grid; gap: .5rem; }
.idee h3 { margin: 0; }
.idee.passee { opacity: .7; }
.realisation { background: rgba(255, 255, 255, .7); border: 1px solid var(--line); border-radius: 12px; padding: .8rem; }
.badges-g { display: flex; flex-wrap: wrap; gap: .3rem .6rem; align-items: center; }
.cat-balade { background: var(--validee-bg); color: var(--validee-fg); }
.cat-sortie { background: #fde7dc; color: #9a3d16; }
.cat-evenement { background: var(--prevision-bg); color: var(--prevision-fg); }
.cat-autre, .type-apporter { background: #efe4fb; color: #5b2d8f; }
.type-travaux { background: var(--demande-bg); color: var(--demande-fg); }
.type-achat { background: var(--prevision-bg); color: var(--prevision-fg); }
.liens { display: flex; flex-wrap: wrap; gap: .3rem 1rem; margin: 0; }
.liens a { color: var(--accent); }
.vignettes { display: flex; flex-wrap: wrap; gap: .4rem; }
.vignette { padding: 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; cursor: zoom-in; background: #fff; }
.vignette img { display: block; width: 84px; height: 84px; object-fit: cover; }
.realisation .vignette img { width: 120px; height: 100px; }
.travail { cursor: default; align-items: flex-start; flex-wrap: wrap; }
.travail .row-main { gap: .35rem; flex: 1 1 260px; }
.travail .actions { align-items: center; }
footer.muted { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.btn-infos { white-space: nowrap; }
@media (max-width: 640px) { .btn-infos .txt { display: none; } }