/* =========================================================
   Spoonful-co — style brutaliste / anti-design
   Police monospace, noir sur blanc, bordures épaisses,
   angles droits, aucune fioriture. La hiérarchie vient
   du poids, des majuscules et de l'espacement des lettres
   — pas de la taille : toutes les tailles de texte sont
   quasiment identiques (une seule taille réduite, réservée
   aux éléments d'interface trop exigus pour en faire autrement).
   ========================================================= */

* { box-sizing: border-box; border-radius: 0; }

:root {
  --ink: #000000;
  --muted: #506579;
  --line: #000000;
  --paper: #FFFFFF;
  --panel: #E8E8E8;
  --link: #0000FF;
  --link-visited: #8b36d1;
  --font: 'Times New Roman', Times, serif;
  --border: 0px;
  --small: 18px;

  /* Échelle d'espacement — toutes les marges, paddings et écarts du site doivent
     utiliser l'une de ces six valeurs plutôt qu'un nombre en pixels choisi au cas
     par cas. Pour resserrer ou aérer le site globalement, changer ces valeurs ici. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 10px;
  --space-4: 20px;
  --space-5: 30px;
  --space-6: 30px;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 18px;
  line-height: 1.3;
  overflow-wrap: break-word;
}

/* Jamais stylisé nulle part jusqu'ici : prenait donc la taille et la police par défaut
   du navigateur (souvent plus petite, une autre police) au lieu de rester cohérent avec
   le reste du texte — repéré sur l'onglet Adhérents, mais valait pour tout le site. */
code {
  font-family: 'Courier New', Courier, monospace;
  font-size: 18px;
  background: var(--panel);
  padding: 1px 4px;
}

/* Aucun texte en gras nulle part sur le site — le texte important est souligné à la
   place, y compris pour les balises <strong>/<b> saisies dans le contenu des documents. */
strong, b { font-weight: normal; text-decoration: underline; }

h1, h2, h3, h4, h5, h6 {
  font-family: inherit;
  font-size: 18px;
  font-weight: normal; text-decoration: underline;
  margin: 1em 0 0.5em;
}

a { color: var(--link); text-decoration: underline; }
a:visited { color: var(--link-visited); }

.page {
  margin: 0 auto;
  padding: var(--space-2) clamp(8px, 1.5vw, 20px) var(--space-5);
  border: var(--border) solid var(--ink);
  min-height: 100vh;
}

/* --- Header --- */

.app-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-2);
  flex-wrap: wrap;
  gap: var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: var(--border) solid var(--ink);
}

.app-name, .app-name:visited {
  font-weight: normal; text-decoration: underline;
  color: var(--ink);
  text-decoration: none;
}
.app-name:hover { text-decoration: underline; }

.app-account-cluster { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.app-account-cluster .account-info { color: var(--muted); }

.header-right { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }

.actions-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: var(--space-3) 0 var(--space-3);
  flex-wrap: wrap;
  gap: var(--space-2);
}
.actions-row-buttons { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }

.version-badge {
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--ink);
  padding: 3px var(--space-2);
  white-space: nowrap;
}

.eyebrow {
  color: var(--muted);
  margin-bottom: var(--space-1);
  display: block;
}

.title { margin: 0; }

/* --- Boutons : style natif du navigateur, aucune personnalisation --- */

/* --- Onglets principaux --- */

.main-tabs {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: var(--border) solid var(--ink);
  overflow-x: auto;
  flex-wrap: wrap;
}
.main-tabs-group-label {
  display: flex;
  align-items: center;
  font-size: 18px;
  color: var(--muted);
  white-space: nowrap;
  padding-left: var(--space-2);
  margin-left: var(--space-1);
  border-left: 1px solid var(--ink);
}

/* --- Contrôles --- */

.controls-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  flex-wrap: wrap;
}

.tabs { display: flex; gap: var(--space-1); flex-wrap: wrap; }

.view-toggle { display: inline; gap: var(--space-2); }

/* Bureau : "Événements à venir" et les boutons Liste/Calendrier/Abonnement partagent
   la même ligne, boutons alignés à droite. Sur mobile, ça reste empilé (voir plus bas). */
.public-events-header-row { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-2) 0; }
.public-events-header-row .public-section-title { margin: 0; border-bottom: none; padding-bottom: 0; }
.public-events-header-row .view-toggle { flex-shrink: 0; }

/* Indicateur minimal d'état actif/sélectionné — texte gras + souligné, sans fond ni
   bordure, pour rester dans l'esprit "aucun style de bouton" tout en gardant un repère
   visuel indispensable (savoir dans quel mode/filtre on se trouve). */
.tab.active, .view-btn.active, .main-tab.active, .choice-btn.selected {
  font-weight: normal; text-decoration: underline;
}

.membres-count { color: var(--muted); }

/* --- Recherche --- */

.search-row { margin-bottom: var(--space-3); display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }
.search-input { max-width: 320px; }

/* --- États --- */

.error-banner {
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  padding: var(--space-2) var(--space-2);
  margin-bottom: var(--space-3);
  font-weight: normal; text-decoration: underline;
}

.loading-state, .empty-state {
  color: var(--muted);
  text-align: center;
  padding: var(--space-4) var(--space-3);
}

.empty-state { border: 1px dashed var(--ink); }

.table-hint { color: var(--muted); margin: -4px 0 14px; }
.field-note { color: var(--muted); margin: var(--space-1) 0 0; }
.field-note-inline { color: var(--muted); }

/* --- Programmation : vue liste --- */

.month-title { color: var(--ink); margin: 0 0 var(--space-2); padding-bottom: var(--space-1); border-bottom: var(--border) solid var(--ink); }
.month-section { margin-bottom: var(--space-4); }
.event-list { display: flex; flex-direction: column; gap: var(--space-2); }

.card {
  background: var(--paper);
  border: 1px solid var(--ink);
  border-left: 1px solid var(--ink);
  padding: var(--space-2);
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
}

.card-thumb { width: 48px; height: 48px; object-fit: cover; flex-shrink: 0; background: var(--panel); border: 1px solid var(--ink); }
.card-body { display: flex; gap: var(--space-2); flex: 1; min-width: 0; }
.card-main { flex: 1; min-width: 0; }
.card-top { display: flex; align-items: center; gap: var(--space-1); margin-bottom: var(--space-1); flex-wrap: wrap; }

.salle-tag { padding: 1px var(--space-1); color: var(--ink); border: 1px solid var(--ink); }
.statut-label { color: var(--muted); }
.card-title { margin-bottom: 2px; font-weight: normal; text-decoration: underline; overflow-wrap: break-word; word-break: break-word; }
.card-meta { color: var(--muted); }
.card-notes { color: var(--ink); margin-top: var(--space-1); overflow-wrap: break-word; word-break: break-word; }

.card-note-interne {
  background: var(--panel);
  border-left: 1px solid var(--ink);
  padding: var(--space-1) var(--space-2);
  margin-top: var(--space-1);
  color: var(--ink);
  overflow-wrap: break-word;
  word-break: break-word;
}

.card-detail-link { display: inline-block; margin-top: var(--space-1); }

.card-title.statut-annule, .event-detail-title.statut-annule { color: #CC0000; }
.card-title.statut-propose, .event-detail-title.statut-propose { color: #B36B00; }
.card-title.statut-confirme, .event-detail-title.statut-confirme { color: #006600; }

.ouverture-tag { padding: 1px var(--space-1); border: 1px solid var(--ink); }
.ouverture-tag.ouverture-privatisation { background: var(--ink); color: var(--paper); }
.ouverture-tag.ouverture-membres { background: var(--panel); }
.ouverture-tag.ouverture-public { color: var(--muted); }

.salles-checkboxes { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-1); }
.salle-checkbox-label { display: flex; align-items: center; gap: var(--space-1); font-weight: normal; text-transform: none; cursor: pointer; }
.salle-checkbox-label input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; }

.card-actions { display: flex; gap: 2px; align-items: flex-start; }

/* --- Calendrier --- */

.calendar-nav { display: flex; align-items: center; justify-content: center; gap: var(--space-2); margin-bottom: var(--space-3); flex-wrap: wrap; }
.calendar-month-label { min-width: 150px; text-align: center; }

.calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
  margin-bottom: 3px;
  color: var(--muted);
  text-align: center;
  font-size: var(--small);
}

.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--space-1); }

.cal-day {
  min-height: 110px;
  background: var(--paper);
  border: 1px solid var(--ink);
  padding: var(--space-1);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  cursor: pointer;
  overflow: hidden;
}
.cal-day.empty { background: transparent; border-color: transparent; cursor: default; }
.cal-day.today { border: var(--border) solid var(--ink); background: var(--panel); }
.cal-day-number { color: var(--muted); }

.cal-event-dot {
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--ink);
  padding: 2px var(--space-1);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.3;
}
.cal-event-more { color: var(--muted); }

/* --- Tableau membres --- */

.table-wrap { overflow-x: auto; border: var(--border) solid var(--ink); }
.membres-table { width: 100%; border-collapse: collapse; min-width: 720px; }

.membres-table th {
  text-align: left;
  color: var(--ink);
  background: var(--panel);
  padding: var(--space-2) var(--space-2);
  white-space: nowrap;
  border-bottom: var(--border) solid var(--ink);
}

.membres-table td { padding: var(--space-2) var(--space-2); border-bottom: 1px solid var(--ink); white-space: nowrap; }
.membres-table td.cell-wrap { white-space: normal; word-break: break-word; max-width: 220px; }
.membres-table tr:last-child td { border-bottom: none; }
.membres-table tr:hover td { background: var(--panel); }
.membres-table .cell-muted { color: var(--muted); }
.membres-actions { display: flex; gap: 2px; justify-content: flex-end; }

.membres-table th.sortable { cursor: pointer; user-select: none; }
.membres-table th.sortable:hover { text-decoration: underline; }
.membres-table th.sortable .sort-arrow { margin-left: var(--space-1); }

.type-badge { padding: 1px var(--space-1); color: var(--ink); border: 1px solid var(--ink); }

.cell-editable { display: flex; align-items: center; gap: var(--space-1); }
.cell-value { cursor: pointer; }
.cell-value:hover { text-decoration: underline dotted; text-underline-offset: 3px; }

.copy-btn {
  background: transparent;
  border: 1px solid transparent;
  color: var(--muted);
  cursor: pointer;
  padding: 1px 3px;
  opacity: 0;
}
.membres-table tr:hover .copy-btn, .cell-editable:hover .copy-btn { opacity: 1; }
.copy-btn:hover { border-color: var(--ink); color: var(--ink); }

.cell-input {
  background: var(--paper);
  border: 1px solid var(--ink);
  color: var(--ink);
  padding: 3px var(--space-1);
  font-family: inherit;
  font-size: inherit;
  width: 100%;
  min-width: 80px;
}

/* --- Sélection en masse (Membres) --- */

.checkbox-col { width: 32px; }
.membres-table input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; accent-color: var(--ink); }

.bulk-action-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  padding: var(--space-2) var(--space-2);
  margin-bottom: var(--space-3);
  flex-wrap: wrap;
}
.bulk-action-buttons { display: flex; gap: var(--space-1); flex-wrap: wrap; }

.membres-table tr.row-selected td { background: var(--panel); }

.archive-badge {
  display: inline-block;
  padding: 1px var(--space-1);
  border: 1px solid var(--ink);
  color: var(--ink);
  margin-left: var(--space-1);
}

/* --- Documents --- */

.doc-list { display: flex; flex-direction: column; gap: var(--space-2); }

.doc-card {
  background: var(--paper);
  border: 1px solid var(--ink);
  padding: var(--space-2);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.doc-icon {
  width: 38px;
  height: 38px;
  background: var(--panel);
  border: 1px solid var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.doc-main { flex: 1; min-width: 0; }
.doc-title { margin-bottom: 2px; font-weight: normal; text-decoration: underline; }
.doc-meta { color: var(--muted); }
.doc-description { color: var(--ink); margin-top: var(--space-1); }

.doc-category-tag {
  display: inline-block;
  padding: 1px var(--space-1);
  border: 1px solid var(--ink);
  color: var(--ink);
  margin-left: var(--space-1);
}

.doc-actions { display: flex; gap: var(--space-1); align-items: center; flex-shrink: 0; flex-wrap: wrap; }

.doc-download {
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--ink);
  padding: var(--space-1) var(--space-2);
  text-decoration: underline;
  white-space: nowrap;
}
.doc-download:hover { background: var(--ink); color: var(--paper); }

/* --- Dépenses --- */

.depense-statut-tag { padding: 1px var(--space-1); color: var(--ink); border: 1px solid var(--ink); white-space: nowrap; }
.depense-montant { }

.depense-statut-actions { display: flex; gap: var(--space-1); flex-wrap: wrap; margin-top: var(--space-1); align-items: center; }
.depense-statut-actions button {
  background: var(--paper);
  border: 1px solid var(--ink);
  color: var(--ink);
  padding: var(--space-1) var(--space-2);
  cursor: pointer;
  font-family: inherit;
}
.depense-statut-actions button:hover { background: var(--ink); color: var(--paper); }

/* --- Planning ménage --- */

.menage-nav { display: flex; align-items: center; justify-content: center; gap: var(--space-2); margin-bottom: var(--space-2); }
.menage-period-label { min-width: 180px; text-align: center; }

.menage-list { display: flex; flex-direction: column; gap: var(--space-1); }

.menage-week-card {
  background: var(--paper);
  border: 1px solid var(--ink);
  border-left: 1px solid var(--ink);
  padding: var(--space-2) var(--space-2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.menage-week-card.current-week { background: var(--panel); }

.menage-week-main { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; flex: 1; cursor: pointer; min-width: 260px; }
.menage-week-main:hover .menage-week-dates { text-decoration: underline; }

.menage-week-dates { color: var(--muted); min-width: 150px; }
.menage-week-members { display: flex; gap: var(--space-1); flex-wrap: wrap; }
.menage-week-comment { flex-basis: 100%; color: var(--ink); margin-top: 2px; overflow-wrap: break-word; }

.menage-comment-btn { padding: var(--space-1) var(--space-2); white-space: nowrap; }

.menage-member-chip { padding: 2px var(--space-2); border: 1px solid var(--ink); color: var(--ink); }
.menage-member-chip.empty { color: var(--muted); }

/* --- Liste de courses --- */

.courses-layout { display: grid; grid-template-columns: 380px 1fr; gap: var(--space-4); align-items: start; }
.courses-form-col { position: sticky; top: 16px; }

.course-form {
  border: var(--border) solid var(--ink);
  padding: var(--space-3);
  margin-bottom: var(--space-4);
}
.course-form-row { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.course-form-row > div { flex: 1; min-width: 180px; }
.course-form-qty { max-width: 200px; }

.course-list { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-4); }

.course-item {
  background: var(--paper);
  border: 1px solid var(--ink);
  border-left: 1px solid var(--ink);
  padding: var(--space-2) var(--space-3);
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}
.course-item.achete { border-left-color: var(--muted); opacity: 0.6; }
.course-item.achete .course-objet { text-decoration: line-through; }

.course-check { width: 20px; height: 20px; margin-top: 2px; cursor: pointer; flex-shrink: 0; accent-color: var(--ink); }
.course-check:disabled { cursor: default; }

.course-main { flex: 1; min-width: 0; }
.course-objet { font-weight: normal; text-decoration: underline; }
.course-qty { color: var(--muted); margin-left: var(--space-1); font-weight: normal; }
.course-meta { color: var(--muted); margin-top: 2px; }
.course-comment { margin-top: var(--space-1); overflow-wrap: break-word; }

.course-done-title { color: var(--muted); }

/* --- Tableau de bord --- */

.dashboard-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  align-items: start;
}
.dashboard-col-left, .dashboard-col-right {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.dashboard-block { border: 1px solid var(--ink); padding: var(--space-3); min-height: 0; }
.dashboard-block > h2 { margin: 0 0 var(--space-3); padding-bottom: var(--space-2); border-bottom: 1px solid var(--ink); }
.dashboard-events-list, .dashboard-list { display: flex; flex-direction: column; gap: var(--space-2); max-height: 320px; overflow-y: auto; }
.dashboard-empty { color: var(--muted); }
.dashboard-menage-line { margin-bottom: var(--space-2); }
.dashboard-menage-text { margin: 0; padding-bottom: var(--space-2); border-bottom: 1px solid var(--ink); }
.dashboard-finance-line { margin-bottom: var(--space-2); }

.dashboard-event-item { border-left: 1px solid var(--ink); padding: var(--space-1) var(--space-2); }
.dashboard-event-title { font-weight: normal; text-decoration: underline; }
.dashboard-event-date { color: var(--muted); }

.dashboard-discussion-item, .dashboard-course-item {
  border: 1px solid var(--ink);
  padding: var(--space-2) var(--space-2);
  cursor: pointer;
}
.dashboard-discussion-item:hover, .dashboard-course-item:hover { background: var(--panel); }
.dashboard-discussion-title { font-weight: normal; text-decoration: underline; }
.dashboard-discussion-meta { color: var(--muted); }

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

/* --- Discussion (forum) --- */

.discussion-groupes-row { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; margin-bottom: var(--space-3); }
.discussion-groupe-btn.active { font-weight: bold; text-decoration: underline; }
.discussion-topic-groupe { color: var(--muted); }

.discussion-topic-card {
  background: var(--paper);
  border: 1px solid var(--ink);
  border-left: 1px solid var(--ink);
  padding: var(--space-2) var(--space-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  cursor: pointer;
  flex-wrap: wrap;
}
.discussion-topic-card:hover { background: var(--panel); }
.discussion-topic-title { font-weight: normal; text-decoration: underline; }
.discussion-topic-meta { color: var(--muted); }
.discussion-topic-count { border: 1px solid var(--ink); padding: 2px var(--space-2); white-space: nowrap; }

.discussion-message-card {
  background: var(--paper);
  border: 1px solid var(--ink);
  padding: var(--space-2) var(--space-3);
}
.discussion-message-author { font-weight: normal; text-decoration: underline; }
.discussion-message-date { color: var(--muted); margin-left: var(--space-2); }
.discussion-message-content { margin-top: var(--space-1); white-space: pre-wrap; }
.discussion-message-delete { float: right; }

/* --- Pied de page --- */

.footer { text-align: center; color: var(--muted); margin-top: var(--space-5); padding-top: var(--space-3); border-top: var(--border) solid var(--ink); }

/* --- Modales --- */

.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2);
  z-index: 50;
}

.modal {
  background: var(--paper);
  border: var(--border) solid var(--ink);
  padding: var(--space-2);
  width: 100%;
  max-width: 440px;
  max-height: 90vh;
  overflow-y: auto;
}

.modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-1); }
.modal-title { margin: 0; }

.label { display: block; color: var(--ink); margin-top: var(--space-2); margin-bottom: var(--space-1); font-weight: normal; text-decoration: underline; }
.form-section-title { margin: var(--space-4) 0 0; padding-top: var(--space-3); border-top: 1px solid var(--ink); font-weight: bold; }
.form-section-title:first-of-type { margin-top: var(--space-2); padding-top: 0; border-top: none; }

.input {
  background: var(--paper);
  border: 1px solid var(--ink);
  color: var(--ink);
  padding: var(--space-2);
  width: 100%;
  font-family: inherit;
  font-size: inherit;
}
.input:focus { outline: var(--border) solid var(--ink); outline-offset: -2px; }
.input[readonly] { background: var(--panel); color: var(--ink); }

.choice-group { display: flex; gap: var(--space-1); flex-wrap: wrap; }

.choice-btn { flex: 1; }

.row { display: flex; gap: var(--space-2); }
.col { flex: 1; }
.modal-footer { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-3); }

.overlap-warning {
  background: var(--panel);
  color: var(--ink);
  border: 1px solid var(--ink);
  padding: var(--space-2) var(--space-2);
  margin-top: var(--space-2);
}

/* --- Champ image / fichier --- */

.image-field { border: 1px dashed var(--ink); padding: var(--space-2); margin-top: var(--space-1); }
.image-preview { width: 100%; max-height: 150px; object-fit: cover; margin-bottom: var(--space-2); display: block; border: 1px solid var(--ink); }
.image-field-actions { display: flex; gap: var(--space-1); flex-wrap: wrap; }
.image-upload-status { color: var(--muted); margin-top: var(--space-1); }

/* --- Éditeur de texte simple --- */

.rte-toolbar {
  display: flex;
  gap: 2px;
  align-items: center;
  background: var(--panel);
  border: 1px solid var(--ink);
  border-bottom: none;
  padding: var(--space-1);
  flex-wrap: wrap;
}

.rte-sep { width: 1px; height: 16px; background: var(--ink); margin: 0 3px; }

.rte-editor {
  background: var(--paper);
  border: 1px solid var(--ink);
  padding: var(--space-2) var(--space-2);
  min-height: 150px;
  max-height: 320px;
  overflow-y: auto;
}
.rte-editor:empty:before { content: attr(data-placeholder); color: var(--muted); }
.rte-editor h2, .rte-editor h3 { margin: 0 0 var(--space-1); }
.rte-editor p { margin: 0 0 var(--space-2); }
.rte-editor ul, .rte-editor ol { margin: 0 0 var(--space-2); padding-left: var(--space-3); }

/* --- Aperçu de document --- */

.preview-modal { max-width: 680px; }
.preview-body { margin-top: var(--space-2); max-height: 65vh; overflow-y: auto; }
.journal-entry { padding: var(--space-2) 0; border-bottom: 1px solid var(--line); }
.journal-date { color: var(--muted); margin-right: var(--space-2); }
.journal-action { border: 1px solid var(--ink); padding: 1px var(--space-1); margin-right: var(--space-2); }
.preview-body iframe { width: 100%; height: 58vh; border: 1px solid var(--ink); background: #fff; }
.preview-body img { max-width: 100%; display: block; margin: 0 auto; border: 1px solid var(--ink); }
.preview-unsupported { text-align: center; padding: var(--space-4) var(--space-3); color: var(--muted); }
.preview-texte-content { background: var(--paper); border: 1px solid var(--ink); padding: var(--space-3); }
.preview-texte-content h2, .preview-texte-content h3 { margin: 0 0 var(--space-1); }
.preview-texte-content p { margin: 0 0 var(--space-2); }
.preview-texte-content ul, .preview-texte-content ol { margin: 0 0 var(--space-2); padding-left: var(--space-3); }

/* --- Budget / Loyer --- */

.budget-nav { display: flex; align-items: center; justify-content: center; gap: var(--space-2); margin-bottom: var(--space-3); }
.budget-table { width: 100%; border-collapse: collapse; min-width: 780px; }

.budget-table th {
  color: var(--ink);
  background: var(--panel);
  padding: var(--space-1) var(--space-1);
  text-align: center;
  white-space: nowrap;
  border-bottom: var(--border) solid var(--ink);
}
.budget-table th.budget-name-col { text-align: left; padding-left: var(--space-2); }

.budget-table td { padding: var(--space-1); border-bottom: 1px solid var(--ink); text-align: center; }
.budget-table tr:last-child td { border-bottom: none; }

.budget-name-cell { text-align: left !important; padding-left: var(--space-2) !important; white-space: nowrap; }
.budget-name-cell .budget-loyer { color: var(--muted); margin-left: var(--space-1); }

.budget-caution-input {
  width: 100%;
  min-width: 80px;
  padding: var(--space-1) var(--space-1);
  text-align: center;
}
.budget-caution-input:disabled { background: var(--panel); color: var(--muted); border-color: var(--ink); }

.budget-comments-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.budget-comment-item .label { margin-top: 0; }
.budget-comment-textarea { min-height: 60px; resize: vertical; }
.budget-comment-textarea:disabled { background: var(--panel); color: var(--muted); border-color: var(--ink); resize: none; }

.budget-cell-btn {
  width: 100%;
  min-width: 42px;
  height: 26px;
  border: 1px solid var(--ink);
  background: var(--paper);
  cursor: pointer;
  color: var(--muted);
  font-family: inherit;
  font-size: var(--small);
}
.budget-cell-btn.paye { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.budget-cell-btn:hover { background: var(--panel); }
.budget-cell-btn.paye:hover { background: var(--ink); }

.budget-total-row td { background: var(--ink); color: var(--paper); padding-top: var(--space-2); padding-bottom: var(--space-2); border-top: var(--border) solid var(--ink); }
.budget-total-row .budget-name-cell { color: var(--paper); }

/* --- Toasts --- */

.toast-container {
  position: fixed;
  bottom: 16px;
  right: 16px;
  display: flex;
  flex-direction: column-reverse;
  gap: var(--space-1);
  z-index: 100;
  align-items: flex-end;
  max-width: min(340px, calc(100vw - 32px));
}

.toast {
  background: var(--ink);
  color: var(--paper);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--ink);
  font-family: inherit;
}

/* --- Confirmation --- */

.confirm-modal { max-width: 360px; }
.confirm-message { color: var(--ink); margin: var(--space-1) 0 0; }

/* --- Page de connexion --- */

.login-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; max-width: 100%; border: none; }
.login-card { background: var(--paper); border: var(--border) solid var(--ink); padding: var(--space-4); width: 100%; max-width: 360px; }
.login-title { text-align: center; margin: var(--space-1) 0 var(--space-3); }
.login-submit { width: 100%; margin-top: var(--space-3); text-align: center; }

.auth-gate {
  position: fixed;
  inset: 0;
  background: var(--paper);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
}
.auth-gate.hidden { display: none; }

/* --- Rôles : éléments réservés aux administrateurs --- */

.role-adherent .admin-only { display: none !important; }
.role-adherent .budget-cell-btn,
.role-adherent .menage-week-main,
.role-adherent .cell-value { cursor: default; }
.role-adherent .cell-value:hover { text-decoration: none; }

.home-account-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-1) 0 0;
  color: var(--muted);
}

.readonly-note {
  background: var(--panel);
  border: 1px solid var(--ink);
  padding: var(--space-1) var(--space-2);
  margin-bottom: var(--space-3);
  color: var(--ink);
  display: none;
}
.role-adherent .readonly-note { display: block; }

/* --- Page d'accueil --- */

.home-page { max-width: 1600px; padding-top: var(--space-5); padding-left: clamp(8px, 1.5vw, 20px); padding-right: clamp(8px, 1.5vw, 20px); border: var(--border) solid var(--ink); }
.home-header { text-align: center; margin-bottom: var(--space-4); }
.home-header .eyebrow { text-align: center; }
.home-title { margin: var(--space-1) 0 var(--space-2); }
.home-tagline { color: var(--muted); margin: 0; }

.home-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }

.home-card, .home-card:visited {
  background: var(--paper);
  border: var(--border) solid var(--ink);
  padding: var(--space-4) var(--space-3);
  text-decoration: none;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-height: min(30vh, 300px);
  justify-content: center;
  align-items: center;
  text-align: center;
}
.home-card:hover { background: var(--ink); color: var(--paper); }
.home-card-label { font-weight: normal; text-decoration: underline; }
.home-card-desc { color: var(--muted); }
.home-card:hover .home-card-desc { color: var(--panel); }

/* --- Page événement dédiée --- */

.event-page { max-width: 1500px; padding-top: var(--space-2); padding-bottom: var(--space-1); padding-left: clamp(8px, 1.5vw, 20px); padding-right: clamp(8px, 1.5vw, 20px); border: var(--border) solid var(--ink); }
.back-link { display: inline-block; margin-bottom: var(--space-2); }
.event-detail-card { border: var(--border) solid var(--ink); overflow: hidden; }
.event-detail-layout { display: flex; flex-direction: column; }
.event-detail-media { background: var(--panel); order: -1; }
.event-detail-image { width: 100%; max-height: 340px; object-fit: contain; display: block; border: none; }
.event-detail-content { padding: var(--space-2); }
.event-detail-tags { display: flex; gap: var(--space-1); margin-bottom: var(--space-2); flex-wrap: wrap; }
.statut-tag { padding: 1px var(--space-1); color: var(--ink); border: 1px solid var(--ink); }
.inscription-tag { padding: 1px var(--space-1); border: 1px solid var(--ink); }
.inscription-tag.requise {  padding: 1px var(--space-1); border: 1px solid var(--ink); }
.inscription-tag.libre { color: var(--muted); }
.event-detail-price-tag { padding: 1px var(--space-1); border: 1px solid var(--ink); background: var(--ink); color: var(--paper); }
.event-detail-title-top { margin: 0 0 var(--space-2); padding: 1px var(--space-1); border: 1px solid var(--ink); display: inline-block; align-self: flex-start; }
.event-detail-link-url { word-break: break-all; max-width: 100%; }
.event-detail-dates { margin-bottom: var(--space-2); }
.event-detail-info-grid { display: flex; flex-direction: column; gap: var(--space-2);}
.event-detail-notes { margin: var(--space-4) 0; }
.event-detail-actions { margin-top: var(--space-2); padding: 0 var(--space-2) var(--space-2); display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: flex-start; }

/* Écran large : informations à gauche, image à droite — hauteur de l'image plafonnée pour
   qu'une image portrait ne pousse jamais la carte (et la page) à déborder verticalement. */
@media (min-width: 720px) {
  .event-detail-layout:not(.no-image) { display: grid; grid-template-columns: 1fr minmax(280px, 42%); align-items: stretch; }
  .event-detail-media { position: relative; order: 0; }
  .event-detail-image { height: 100%; max-height: 85vh; }
  .event-detail-content { padding: var(--space-2); display: flex; flex-direction: column; justify-content: flex-start; }
  .event-detail-info-grid { flex-direction: row; flex-wrap: wrap; gap: var(--space-2) var(--space-2); }
  .event-detail-title-top { }

  /* La carte occupe au moins toute la hauteur restante de l'écran, et les boutons d'action
     restent calés en bas grâce à la marge automatique — mais si le contenu (ex. des notes
     longues) dépasse cette hauteur, la carte grandit avec lui plutôt que de le couper : rien
     n'est jamais caché, seuls les cas courts profitent du calage en bas d'écran. */
  .event-page { min-height: 100vh; display: flex; flex-direction: column; }
  .event-page .event-detail-card { flex: 1; display: flex; flex-direction: column; }
  .event-page .event-detail-actions { margin-top: auto; }
}

/* --- Page publique --- */

.public-page {
  padding-top: var(--space-2);
  padding-bottom: var(--space-2);
  padding-left: var(--space-2);
  padding-right: var(--space-2);
}

.public-top-bar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--space-4);
  flex-shrink: 0;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.public-header-inline { text-align: left; display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; }
.public-header-inline .home-title { margin: 0; }
.public-top-bar-actions { display: flex; align-items: center; gap: var(--space-3); flex-shrink: 0; }
.public-login-btn {
  text-decoration: none;
  border: none;
  background: none;
  color: var(--muted);
  padding: 2px 0;
}
.public-login-btn:hover { color: var(--ink); text-decoration: underline; }
.lang-switch { color: var(--muted); }
.lang-switch a { color: var(--muted); text-decoration: none; }
.lang-switch a.active { color: var(--ink); font-weight: normal; text-decoration: underline; }
.lang-switch span { margin: 0 var(--space-1); }

.public-header { text-align: center; margin-bottom: var(--space-5); flex-shrink: 0; }
.public-title-compact { margin: 0; }
.public-tagline { color: var(--muted); margin: var(--space-2) 0 0; }
.public-header-inline .public-tagline { margin: 0; }
.public-tagline-link { color: var(--muted); text-decoration: none; }
.public-tagline-link:hover { text-decoration: underline; }
.public-section { max-width: 760px; margin: 0 auto 36px; }
.public-section-narrow { max-width: 480px; }
.public-page-simple { display: block; height: auto; overflow: visible; padding-top: var(--space-4); }

.inscription-success {
  border: var(--border) solid var(--ink);
  padding: var(--space-4);
  text-align: center;
}
.inscription-success p { margin: 0 0 var(--space-3); }
.inscription-success .btn-secondary { text-decoration: none; }

.inscription-events-list { display: flex; flex-direction: column; gap: var(--space-2); }

.inscription-event-choice {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  text-align: left;
  background: var(--paper);
  border: 1px solid var(--ink);
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  color: var(--ink);
}
.inscription-event-choice:hover { background: var(--panel); }
.inscription-event-choice.selected { border: var(--border) solid var(--ink); font-weight: normal; text-decoration: underline; background: var(--panel); }
.inscription-event-date { color: var(--muted); white-space: nowrap; font-weight: normal; }
.inscription-event-general { color: var(--muted); }
.inscription-event-general.selected { color: var(--ink); }

.public-section-title-row { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); flex-wrap: wrap; }
.public-section-title-row .public-section-title { margin-bottom: 0; flex: 1; }

.public-section-title { margin: 0 0 var(--space-2); padding-bottom: var(--space-1); border-bottom: var(--border) solid var(--ink); }
.public-empty { color: var(--muted); }
.public-address { margin: 0 0 var(--space-2); }
.public-map-wrap { border: 1px solid var(--ink); overflow: hidden; }
.public-map { width: 100%; height: 200px; border: none; display: block; }
.public-map-link { display: inline-block; margin-top: var(--space-2); }

.public-about-text { margin: 0; line-height: 1.3; }

.public-members-list { margin: 0; line-height: 1.3; }
.public-members-list a { text-decoration: none; }
.public-members-list a:hover { text-decoration: underline; }
.public-members-list .no-instagram { color: var(--ink); }

.public-month-section { margin-bottom: var(--space-4); }
.public-month-title { margin: 0 0 var(--space-2); padding-bottom: var(--space-1); border-bottom: 1px solid var(--ink); }

.venir-metro-list { list-style: none; padding: 0; margin: 0; }
.venir-metro-list li { margin-bottom: var(--space-2); }
.venir-ligne {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 1px solid var(--ink);
  border-radius: 50%;
  font-weight: normal; text-decoration: underline;
  margin-left: var(--space-1);
}
.venir-map { height: 320px; }
.public-event-card { border-left: 1px solid var(--ink); overflow: hidden; display: flex; flex-direction: column; padding: 0; gap: 0; }

/* Section "Événements à venir" : fond jaune pâle uniquement au survol de la zone */
.public-events-section { background: transparent; }

/* Une carte d'événement précise : fond orange pâle au survol, visible sous l'image */
.public-event-card { transition: background 0.15s ease; }
.public-event-card:hover .public-event-card-content { background: var(--couleur-categorie-pale, #ddffad); }

/* Dans les cartes publiques précisément, tous les badges restent noir sur blanc,
   y compris "Inscription requise" (qui est normalement inversé ailleurs sur le site). */
.public-event-card .inscription-tag.requise { }
.public-event-card .inscription-tag.libre {  }

/* --- Page d'abonnement à l'agenda --- */
.subscribe-page-content { padding: var(--space-4); }
.subscribe-page-intro { color: var(--muted); margin: 0 0 var(--space-4); max-width: 60ch; }
.subscribe-page-options { display: flex; flex-direction: column; gap: var(--space-3); }
.subscribe-option {
  display: block;
  border: 1px solid var(--ink);
  padding: var(--space-3);
  text-decoration: none;
  color: inherit;
}
.subscribe-option:hover { background: var(--panel); }
.subscribe-option-title { display: block; text-decoration: underline; margin-bottom: var(--space-1); }
.subscribe-option-desc { display: block; color: var(--muted); }

@media (min-width: 720px) {
  .subscribe-page-content { padding: var(--space-5); }
  .subscribe-page-options { flex-direction: row; }
  .subscribe-option { flex: 1; }
}

.public-subscribe-row { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-4); }
.cal-day-more { color: var(--muted); }

/* Agenda mobile — alternative à la grille du calendrier, illisible sur petit écran une
   fois réduite à 7 colonnes. Masqué par défaut, affiché uniquement sous 641px. */
.calendar-mobile-agenda { display: none; }
.agenda-day { margin-bottom: var(--space-4); }
.agenda-day-title { margin: 0 0 var(--space-1); padding-bottom: 0; text-decoration: none; }
.agenda-event {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4);
  padding: var(--space-2) 0;
  text-decoration: none;
  color: var(--ink);
}
.agenda-event:last-child { border-bottom: none; }
.agenda-event-title { text-decoration: underline; flex: 1; min-width: 140px; }
.agenda-event-time { color: var(--muted); }

.cal-event-dot { text-decoration: none; }
.public-event-card-content { display: flex; flex-direction: column; width: 100%; min-width: 0; padding: var(--space-1); gap: var(--space-1); }
.public-event-title-link { display: block; text-decoration: none; color: inherit; }
.public-event-title-link:hover .public-event-title { text-decoration: underline; }
.public-section-title-link { color: inherit; text-decoration: inherit; }

/* Image en pleine largeur/hauteur du cadre, titre en surimpression noir sur blanc */
.public-event-media-link { display: block; text-decoration: none; color: inherit; }
.public-event-media { position: relative; height: 200px; background: var(--panel); overflow: hidden; }
.public-event-media-noimg { background: var(--panel); }
.public-event-thumb { width: 100%; height: 100%; object-fit: cover; display: block; }
.public-event-title-overlay {
  position: absolute;
  left: var(--space-1);
  right: var(--space-1);
  bottom: var(--space-1);
  display: inline-block;
  width: fit-content;
  max-width: calc(100% - 2 * var(--space-1));
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--ink);
  padding: 1px var(--space-1);
}
.prix-tag { padding: 1px var(--space-1); border: 1px solid var(--ink); }
.public-event-title { margin-bottom: var(--space-2); }
.public-event-dates { color: var(--muted); }

.public-contact-list { list-style: none; padding: 0; margin: 0; }
.public-contact-list li { margin-bottom: var(--space-2); }

/* --- Mise en page de la page publique --- */

.public-block { flex-shrink: 0; margin-bottom: var(--space-2); }
.public-block:last-child { margin-bottom: 0; }

/* Liste des événements en mode Liste : défilement HORIZONTAL, une carte à côté de l'autre. */
.scroll-hint { color: var(--muted); margin: 0 0 var(--space-2); }

.public-events-scroll-wrap { position: relative; }

.scroll-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: var(--paper);
  border: 1px solid var(--ink);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}
.scroll-arrow-left { left: var(--space-2); }
.scroll-arrow-right { right: var(--space-2); }

.public-events-scroll-h {
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: var(--space-3);
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  scrollbar-width: auto;
  scrollbar-color: var(--ink) var(--panel);
  
}
.public-events-scroll-h::-webkit-scrollbar { height: 10px; }
.public-events-scroll-h::-webkit-scrollbar-track { background: var(--panel); }
.public-events-scroll-h::-webkit-scrollbar-thumb { background: var(--ink); border: 2px solid var(--panel); }
.event-list-h { display: flex; gap: var(--space-3); align-items: stretch; }
.event-list-h .public-event-card { flex: 0 0 340px; width: 340px; scroll-snap-align: start;}

/* Barre d'infos (À propos, Membres, Nous trouver, Contact), maintenant en haut de page,
   au-dessus des événements — affichage normal, ne défile plus indépendamment. */
.public-info-top {
  border-bottom: var(--border) solid var(--ink);
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-5);
}
.public-info-top .public-block { margin-bottom: var(--space-3); }

/* Accordéon À propos / Membres / Venir / Contact — par défaut (ordinateur), le bouton se
   comporte comme du texte simple et le contenu reste toujours affiché ; le comportement
   pliable n'est activé que sous 901px (voir plus bas). */
.accordion-toggle {
  all: unset;
  display: block;
  width: 100%;
  font: inherit;
  color: inherit;
  text-decoration: none;
  cursor: default;
}
.accordion-content { display: block; }
.accordion-header { display: block; }
.accordion-icon { display: none; }

@media (min-width: 901px) {
  .public-main-grid { display: block; }
  .public-col { display: flex; flex-direction: column; }

  .public-info-top { display: flex; gap: var(--space-5); }
  .public-info-top .public-block { flex: 1; min-width: 220px; margin-bottom: 0; }

  /* Accueil uniquement : la page tient dans la hauteur de l'écran, sans espace vide en
     bas — la section "Événements à venir" (et donc l'image des cartes) grandit pour
     occuper tout l'espace restant sous la barre d'infos. */
  .index-fill { height: 100vh; display: flex; flex-direction: column; overflow: hidden; }
  .index-fill .public-top-bar, .index-fill .public-info-top { flex-shrink: 0; }
  .index-fill .public-main-grid { flex: 1; min-height: 0; }
  .index-fill .public-col-main { height: 100%; min-height: 0; }
  .index-fill .public-events-section { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  .index-fill .public-events-section > .public-events-header-row,
  .index-fill .public-events-section > .scroll-hint,
  .index-fill .public-events-section > .public-subscribe-row { flex-shrink: 0; }
  .index-fill .public-events-scroll-wrap { flex: 1; min-height: 0; }
  .index-fill .public-events-scroll-h { height: 100%; }
  .index-fill .event-list-h { height: 100%; }
  .index-fill .event-list-h .public-event-card { height: 100%; }
  .index-fill .public-event-media-link { flex: 1; min-height: 0; }
  .index-fill .public-event-media { height: 100%; }
  .index-fill .public-event-card-content { flex-shrink: 0; }
}

/* Mobile/tablette : une seule colonne */
@media (max-width: 900px) {
  .public-main-grid { display: block; }
  .public-col { display: block; }
  .public-map { height: 220px; }
  .courses-layout { grid-template-columns: 1fr; }
  .courses-form-col { position: static; }

  /* À propos / Membres / Venir / Contact deviennent pliables — repliés par défaut, le
     titre reste toujours visible et sert de bouton pour déplier le contenu. */
  .accordion-header { display: flex; align-items: center; gap: var(--space-2); cursor: pointer; }
  .accordion-header .public-section-title { margin: 0; }
  .accordion-toggle { cursor: pointer; }
  .accordion-icon {
    display: inline;
    flex-shrink: 0;
    text-decoration: none;
    cursor: pointer;
    order: -1;
  }
  .accordion-content { display: none; }
  .accordion-content.expanded { display: block; margin-top: var(--space-2); }
  .public-info-top { margin-top: var(--space-3); margin-bottom: var(--space-4); padding-bottom: var(--space-2); }
  .public-info-top .public-block { margin-bottom: 0; padding: var(--space-1) 0; }
  .public-info-top .public-block:first-child { padding-top: 0; }

  /* Le bandeau du haut (logo + adresse + FR/EN/Intranet/Mentions légales) reste affiché
     en haut de l'écran pendant le défilement, avec un fond opaque pour ne pas laisser le
     contenu défiler visible en transparence par-dessous. */
  .public-top-bar {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--paper);
    padding-top: var(--space-2);
    padding-bottom: var(--space-2);
  }
  .public-top-bar-actions { margin-left: auto; }
}

/* Sous 641px (téléphone) : calendrier en agenda plutôt qu'en grille à 7 colonnes
   illisible, cartes d'événements à la largeur de l'écran, flèches de défilement
   remplacées par le geste de balayage (plus naturel au doigt). */
@media (max-width: 640px) {
  .calendar-weekdays, .calendar-grid { display: none; }
  .calendar-mobile-agenda { display: block; }
  .event-list-h .public-event-card { width: 90vw; flex-basis: 90vw; min-height: 420px; }
  .public-event-media { height: 70vh; }
  .scroll-arrow { display: none; }
  .scroll-hint-arrows { display: none; }
  .scroll-hint { font-size: 18px; }
  .public-subscribe-row { flex-direction: column; align-items: stretch; gap: var(--space-2); }
  .public-subscribe-row a { text-align: center; padding: var(--space-2); }
}

/* --- Responsive : tablette et mobile --- */

@media (max-width: 900px) and (min-width: 641px) {
  .home-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .page { padding: var(--space-3) var(--space-2) var(--space-5); }

  .app-header { flex-direction: column; align-items: flex-start; }
  .app-account-cluster { justify-content: space-between; width: 100%; }
  .actions-row { flex-direction: column; align-items: stretch; }
  .header-right { justify-content: space-between; }

  .main-tabs { overflow-x: auto; }
  .controls-row { flex-direction: column; align-items: stretch; }
  .view-toggle { align-self: flex-end; }

  .card { flex-direction: column; }
  .card-actions { flex-direction: row; justify-content: flex-end; }

  .cal-day { min-height: 70px; padding: var(--space-1); }
  .calendar-month-label { min-width: auto; }

  .doc-card { flex-direction: column; align-items: stretch; text-align: center; }
  .doc-actions { justify-content: center; }

  .rte-editor { min-height: 110px; }
  .budget-table { min-width: 680px; }

  .modal { padding: var(--space-3); max-height: 95vh; }
  .row { flex-direction: column; gap: 0; }

  .home-grid { grid-template-columns: 1fr; }
  .home-page { padding-top: var(--space-4); }
}