/* =====================================================================
   CCS — Système de design (charte imposée, section 7 du cahier des charges)
   Style éditorial / terminal, sombre, couleurs du CCS : lie-de-vin + or.
   Polices : DM Sans (corps/données) + Bebas Neue (titres/chiffres).
   Ce fichier est LA référence visuelle de toute l'app : tout doit s'y conformer.
   ===================================================================== */

/* ---------- 1. Variables (à reprendre telles quelles) ---------- */
:root {
  --black: #0a0a0a; /* fond */
  --white: #f5f5f0; /* texte principal */
  --grey:  #a8a29c; /* texte secondaire, libellés (éclairci pour la lisibilité) */
  --mid:   #1a1a1a; /* surfaces / cartes */
  --line:  #333333; /* bordures (plus visibles) */
  --wine:  #641835; /* lie-de-vin : REMPLISSAGES (fonds boutons, bordures d'accent, badges) */
  --gold:  #EFBF04; /* or : TEXTE & accents lisibles (liens, focus, 1re colonne, chiffres clés) */

  /* Transitions courtes pour les hovers (charte 7.4) */
  --t: .13s ease;
}

/* ---------- 2. Reset léger ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--black);
  color: var(--white);
  font-family: 'DM Sans', sans-serif;
  font-size: .92rem;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  /* Supprime le flash bleu au tap (cosmétique) sans bloquer la sélection. */
  -webkit-tap-highlight-color: transparent;
  /* Mode app (PWA) : empêche l'effet « élastique » quand la page ne déborde
     pas — sinon tout l'écran se déplace de haut en bas au doigt. */
  overscroll-behavior-y: none;
}

/* user-select : approche ciblée.
   On bloque la sélection uniquement sur les éléments d'UI pure (boutons, labels,
   titres, badges…) pour éviter la sélection accidentelle au tap sur mobile.
   Le texte « contenu » (descriptions, paragraphes, champs) reste sélectionnable
   normalement sur PC comme sur mobile (appui long). */
h1, h2, h3,
.label,
.badge,
.nav__links a,
.nav__profile-name,
.event__title,
.event__case-l,
.bignum,
table.data th,
.member-card__name,
.chip {
  -webkit-user-select: none;
  user-select: none;
}

img { max-width: 100%; display: block; }

/* ---------- 3. Typographie ---------- */
h1, h2, h3, .display {
  font-family: 'Bebas Neue', sans-serif;
  font-weight: 400;
  letter-spacing: .14em;
  margin: 0 0 .4em;
  line-height: 1.05;
}

h1 { font-size: 2.4rem; text-transform: uppercase; }
h2 { font-size: 1.7rem; text-transform: uppercase; }
/* h3 : titres de section en gris, comme demandé */
h3 {
  font-size: 1.15rem;
  text-transform: uppercase;
  color: var(--grey);
  letter-spacing: .16em;
}

/* Micro-libellé : petits, majuscules, gris, très espacés (en-têtes de carte, labels) */
.label {
  display: block;
  font-size: .62rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--grey);
}

a {
  color: var(--gold);
  text-decoration: none;
  transition: color var(--t);
}
a:hover { color: var(--white); }

strong { font-weight: 500; }

/* ---------- 4. Mise en page ---------- */
.container {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 4rem;
}

.page-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .75rem;
  border-bottom: 1px solid var(--line);
  padding-bottom: .75rem;
  margin-bottom: 1.5rem;
}

/* ---------- 5. Barre de navigation ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  background: var(--black);
  border-bottom: 1px solid var(--line);
  padding: .85rem 1.25rem;
}

.nav__logo {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.5rem;
  letter-spacing: .14em;
  color: var(--white);
}
.nav__logo:hover { color: var(--white); }
.nav__logo .dot { color: var(--gold); }
.nav__logo-img { height: 34px; width: auto; display: block; }

.nav__links {
  display: flex;
  gap: 1.25rem;
  flex: 1;
  flex-wrap: wrap;
}
.nav__links a {
  color: var(--grey);
  text-transform: uppercase;
  font-size: .72rem;
  letter-spacing: .12em;
}
.nav__links a:hover,
.nav__links a.is-active { color: var(--white); }
.nav__links a.is-active { border-bottom: 2px solid var(--wine); padding-bottom: 2px; }

/* Pastille profil (avatar + nom de baptême), clairement cliquable */
.nav__profile {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .25rem .7rem .25rem .25rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  text-decoration: none;
  transition: border-color var(--t), background var(--t);
}
.nav__profile:hover { border-color: var(--gold); background: var(--mid); }
.nav__profile-name {
  color: var(--white);
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  max-width: 160px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nav__avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1px solid var(--line);
  object-fit: cover;
  flex-shrink: 0;
}
/* Avatar de remplacement (initiale) quand pas de photo */
.nav__avatar--ph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--wine);
  color: var(--gold);
  font-family: 'Bebas Neue', sans-serif;
  font-size: .95rem;
  line-height: 1;
}

/* ---------- 5b. Barre d'onglets mobile ----------
   Sur téléphone, la nav du haut n'affiche plus les liens : ils passent dans
   une barre fixée en bas de l'écran, accessible au pouce (comme une vraie
   app). Cachée sur desktop. `env(safe-area-inset-bottom)` évite que la barre
   home de l'iPhone recouvre les onglets en mode plein écran (PWA). */
.tabbar {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 50;
  background: var(--black);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.tabbar__tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .25rem;
  padding: .55rem .2rem .5rem;
  color: var(--grey);
  text-transform: uppercase;
  font-size: .55rem;
  letter-spacing: .1em;
  border-top: 2px solid transparent;
  white-space: nowrap;
  -webkit-user-select: none;
  user-select: none;
}
.tabbar__tab .nav-ico { width: 21px; height: 21px; }
.tabbar__tab.is-active {
  color: var(--gold);
  border-top-color: var(--wine);
  background: var(--mid);
}

/* Icône « Membres » (console) en haut à droite — même gabarit rond que le
   bouton thème. Cachée sur desktop (le lien texte existe dans la nav). */
.nav__members {
  display: none;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--grey);
  flex-shrink: 0;
  transition: border-color var(--t), color var(--t);
}
.nav__members .nav-ico { width: 19px; height: 19px; }
.nav__members:hover { border-color: var(--gold); color: var(--white); }
.nav__members.is-active { border-color: var(--wine); color: var(--gold); background: var(--mid); }

/* ---------- 5c. Pied de page ---------- */
.footer {
  max-width: 1100px;
  margin: 2rem auto 0;
  padding: 1rem 1.25rem calc(1rem + env(safe-area-inset-bottom, 0));
  border-top: 1px solid var(--line);
  text-align: center;
}
.footer a {
  color: var(--grey);
  font-size: .62rem;
  text-transform: uppercase;
  letter-spacing: .1em;
}
.footer a:hover { color: var(--gold); }

/* ---------- 6. Surfaces / cartes ---------- */
.card {
  background: var(--mid);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 1.3rem 1.4rem;
}

.grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
/* Sans ça, un <select> à option longue (ou tout contenu large) impose sa
   taille "min-content" à sa colonne et fait déborder toute la grille sur
   mobile — les enfants d'une grille ne rétrécissent pas sous leur contenu
   par défaut. */
.grid > * { min-width: 0; }

/* Encadré « highlight » : bordure gauche lie-de-vin, <strong> en or */
.highlight {
  background: var(--mid);
  border: 1px solid var(--line);
  border-left: 3px solid var(--wine);
  border-radius: 2px;
  padding: .9rem 1.1rem;
}
.highlight strong { color: var(--gold); }

/* ---------- 7. Gros chiffres (solde, totaux) ---------- */
.bignum {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 3.2rem;
  letter-spacing: .04em;
  line-height: 1;
  color: var(--white);
}
.bignum--gold { color: var(--gold); }
.bignum__unit { font-size: 1.4rem; color: var(--grey); }

/* ---------- 8. Tableaux de données ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 2px; }

/* Cartes mobiles pour certains tableaux (ex. trésorerie "À valider" /
   "Transactions") : sur petit écran, le défilement horizontal d'un tableau à
   beaucoup de colonnes cache les boutons d'action à droite (Valider/Refuser).
   On bascule alors sur des cartes empilées (.event) — voir media query 720px. */
.tx-cards { display: none; }

table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: .88rem;
}
table.data th {
  font-family: 'Bebas Neue', sans-serif;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--grey);
  font-weight: 400;
  text-align: left;
  padding: .85rem 1rem;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
table.data td {
  padding: .8rem 1rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
table.data tbody tr:last-child td { border-bottom: none; }
table.data tbody tr:hover { background: rgba(255,255,255,.02); }
/* Première colonne en or (style signature du tableau des transactions) */
table.data td:first-child { color: var(--gold); white-space: nowrap; }

/* ---------- 9. Badges / statuts ---------- */
.badge {
  display: inline-block;
  font-size: .58rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  padding: .15rem .5rem;
  border-radius: 2px;
  background: var(--mid);
  border: 1px solid var(--line);
  color: var(--white);
}
.badge--attente { border-color: #7a6410; color: #EFBF04; background: #1a1505; }
.badge--valide  { border-color: #166534; color: #4ade80; background: #052e16; }
.badge--refuse  { border-color: #7f1d1d; color: #f87171; background: #140808; }

/* ---------- 10. Boutons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-family: 'DM Sans', sans-serif;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  padding: .6rem 1.1rem;
  border-radius: 2px;
  border: 1px solid var(--line);
  background: var(--mid);
  color: var(--white);
  cursor: pointer;
  transition: border-color var(--t), background var(--t), color var(--t);
  text-decoration: none;
}
.btn:hover { border-color: var(--gold); color: var(--white); }

/* Action principale : fond lie-de-vin + texte or */
.btn--primary {
  background: var(--wine);
  border-color: var(--wine);
  color: var(--gold);
}
.btn--primary:hover { background: #7a1d40; border-color: var(--gold); color: var(--gold); }

.btn--block { width: 100%; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* Action destructive (supprimer un compte) : rouge, sobre */
.btn--danger { border-color: #7f1d1d; color: #f87171; }
.btn--danger:hover { border-color: #f87171; color: #f87171; background: #140808; }

/* ---------- 11. Formulaires / champs ---------- */
.field { margin-bottom: 1rem; }
.field .label { margin-bottom: .35rem; }

input, select, textarea {
  width: 100%;
  font-family: 'DM Sans', sans-serif;
  font-size: .82rem;
  color: var(--white);
  background: var(--black);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: .55rem .7rem;
  /* Hauteur commune à tous les contrôles : sinon le champ fichier
     (justificatif), dont le bouton natif ajoute sa propre hauteur, était
     plus haut que les <input>/<select> voisins de la même grille. */
  min-height: 2.4rem;
  transition: border-color var(--t);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--gold);
}
input::placeholder, textarea::placeholder { color: #555; }
textarea { resize: vertical; min-height: 80px; }

/* Cases à cocher / radios : sans ça, le navigateur affiche son bleu par
   défaut une fois cochées — jure avec la charte (lie-de-vin/or, jamais de
   bleu). `accent-color` couvre Chrome/Safari/Firefox récents en une ligne. */
input[type="checkbox"], input[type="radio"] {
  accent-color: var(--gold);
}

/* Champ fichier (justificatif) : le texte natif (« Choisir un fichier » + nom
   du fichier) déborde sur mobile → bouton compact et nom tronqué avec « … ». */
input[type="file"] {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  /* Le bouton natif ajoute sa propre hauteur : on retire le padding vertical
     et on centre le contenu sur la hauteur commune (min-height ci-dessus),
     pour que le champ fasse exactement la même taille que ses voisins. */
  padding-top: 0;
  padding-bottom: 0;
  line-height: calc(2.4rem - 2px);
}
input[type="file"]::file-selector-button {
  font-family: 'DM Sans', sans-serif;
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: .35rem .7rem;
  margin-right: .7rem;
  border-radius: 2px;
  border: 1px solid var(--line);
  background: var(--mid);
  color: var(--white);
  cursor: pointer;
  vertical-align: middle;
}

/* Champs date : on force le thème sombre natif → l'icône calendrier et le
   popup s'affichent en clair (visibles sur fond noir), sans bidouille. */
input[type="date"], input[type="datetime-local"], input[type="time"], input[type="month"] {
  color-scheme: dark;
}
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: .8;
}
input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }

/* ---------- 12. Utilitaires ---------- */
.muted { color: var(--grey); }
.gold  { color: var(--gold); }
.center { text-align: center; }
.row { display: flex; gap: .75rem; flex-wrap: wrap; align-items: center; }
.spread { justify-content: space-between; }
.mt { margin-top: 1rem; }
.mt2 { margin-top: 2rem; }
.hidden { display: none !important; }

/* Texte de chargement / état vide */
.empty {
  text-align: center;
  color: var(--grey);
  padding: 2rem 1rem;
  font-size: .8rem;
}

/* ---------- 13. Écran de connexion (index.html) ---------- */
.login-screen {
  min-height: 100vh;
  /* dvh = hauteur RÉELLE visible (iOS PWA : 100vh déborde et fait défiler
     la page ; dvh centre correctement la carte, sans défilement). */
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.login-card {
  width: 100%;
  max-width: 380px;
  background: var(--mid);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 2.2rem 1.8rem;
  text-align: center;
}
.login-card .logo {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 2.6rem;
  letter-spacing: .16em;
  margin-bottom: .2rem;
}
.login-card .logo .dot { color: var(--gold); }
/* Logo image sur la page de connexion / 404 */
.login-logo {
  display: block;
  margin: 0 auto .6rem;
  max-width: 200px;
  width: 80%;
  height: auto;
}
.login-card .tagline {
  color: var(--grey);
  font-size: .6rem;
  text-transform: uppercase;
  letter-spacing: .18em;
  margin-bottom: 2rem;
}

/* Bouton « connexion Google » : on garde la charte (lie-de-vin + or) */
.btn-google { width: 100%; }
/* Pastille blanche derrière le « G » Google (pour qu'il ressorte sur le bouton) */
.g-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 2px;
  padding: 3px;
}
.g-icon svg { display: block; }

/* Message d'erreur d'accès (compte non autorisé, etc.) */
.access-msg {
  margin-top: 1.2rem;
  font-size: .72rem;
  line-height: 1.6;
}
.access-msg--error { color: #f87171; }

/* ---------- 13b. Calendrier (agenda) ---------- */
.cal-nav { display: flex; align-items: center; gap: 1rem; }
.cal-nav .cal-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.3rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  min-width: 200px;
  text-align: center;
}
.cal {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 2px;
  overflow: hidden;
}
.cal__head {
  background: var(--black);
  text-align: center;
  padding: .4rem;
  font-size: .55rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--grey);
}
.cal__cell { background: var(--mid); min-height: 84px; padding: .35rem; }
.cal__cell--out { opacity: .35; }
.cal__cell--today { box-shadow: inset 0 0 0 1px var(--gold); }
.cal__daynum { font-size: .6rem; color: var(--grey); }
.cal__ev {
  display: block;
  margin-top: 2px;
  padding: 1px 4px;
  background: var(--wine);
  color: var(--gold);
  border-radius: 2px;
  font-size: .58rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}

/* Carte événement (vue liste) avec accent gauche lie-de-vin */
.event {
  background: var(--mid);
  border: 1px solid var(--line);
  border-left: 3px solid var(--wine);
  border-radius: 2px;
  padding: .9rem 1.1rem;
  margin-bottom: .75rem;
}
.event__title { font-family: 'Bebas Neue', sans-serif; font-size: 1.35rem; letter-spacing: .08em; }
.event__meta { color: var(--grey); font-size: .75rem; }

/* Bouton menu (⋯) unique d'une carte événement : ouvre Modifier / Rappel /
   Supprimer dans un seul choix, plutôt que 3 boutons qui prenaient toute la
   largeur en bas de carte. */
.event__menu-btn {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 3px;
  color: var(--grey);
  cursor: pointer;
  transition: border-color var(--t), color var(--t);
}
.event__menu-btn:hover { border-color: var(--gold); color: var(--gold); }
.event__menu-btn svg { width: 18px; height: 18px; }

/* Sélection multiple (rappel groupé) : case à cocher devant le titre. */
.event__select { flex-shrink: 0; width: auto !important; margin-right: .15rem; }
.event--selectable { cursor: pointer; }

/* Barre flottante « N sélectionné(s) » pendant le rappel groupé. Au-dessus de
   la barre d'onglets mobile (z-index supérieur), safe-area comprise. */
.reminder-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  background: var(--wine);
  color: var(--white);
  padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom, 0));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  box-shadow: 0 -4px 16px rgba(0,0,0,.4);
}
.reminder-bar .btn { border-color: rgba(245,245,240,.4); color: var(--white); }
.reminder-bar .btn--primary { background: var(--gold); border-color: var(--gold); color: var(--black); font-weight: 700; }
/* Pendant la sélection (rappel groupé), la barre d'onglets mobile s'efface
   pour ne pas empiler deux barres fixes en bas d'écran. */
body.selecting-reminder .tabbar { display: none; }

/* Événements passés : repliés dans un <details>, atténués et bordure grise
   (au lieu du lie-de-vin) pour bien les distinguer des événements à venir. */
.past-events > summary { color: var(--grey); }
.past-events__list .event { opacity: .62; border-left-color: var(--line); }

/* Cases d'info d'un événement : Date / Heure / Lieu / Récurrence / Concerne…
   Flex (pas grid) : chaque case garde la largeur ET la hauteur de SON
   contenu — sur grand écran, une grille en colonnes égales étirait les
   petites cases (Lieu, Concerne...) sur toute une colonne large, avec
   l'icône flottant dans un immense vide. En flex, plusieurs cases courtes
   se rangent naturellement sur une même ligne (2 sur mobile, davantage sur
   desktop), sans jamais s'étirer au-delà de leur contenu. La case
   Récurrence (texte souvent long) force sa propre ligne via
   .event__case--wide (posé par agenda.js), sans pousser sa voisine à
   s'agrandir. */
.event__cases { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: .85rem; }
.event__case {
  display: inline-flex;
  flex: 0 1 auto;
  align-items: center;
  gap: .55rem;
  background: var(--black);
  border: 1px solid var(--line);
  border-left: 2px solid var(--wine);
  border-radius: 3px;
  padding: .5rem .7rem;
  min-width: 0;
  max-width: 100%;
  /* Cases cliquables (Lieu → Maps, Facebook…) : la case ENTIÈRE est un <a>
     (cf. eventmeta.js) plutôt qu'un lien souligné noyé dans le texte — plus
     lisible, plus facile à taper au doigt. Le survol suffit à signaler que
     c'est cliquable, pas besoin de soulignement. */
  text-decoration: none;
  color: inherit;
}
a.event__case { cursor: pointer; transition: border-color var(--t), background var(--t); }
a.event__case:hover { border-color: var(--gold); background: #141414; }
a.event__case:hover .event__case-v { color: var(--gold); }
.event__case--wide { flex-basis: 100%; }
.event__case-ico {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
}
.event__case-ico svg { width: 100%; height: 100%; }
.event__case-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.event__case-l {
  font-size: .56rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--grey);
  line-height: 1.2;
}
.event__case-v { font-size: .88rem; color: var(--white); line-height: 1.25; }
/* Variante priorité haute (tâches) : accent or */
.event__case--haute { border-left-color: var(--gold); }
.event__case--haute .event__case-v { color: var(--gold); }
/* Variante « à confirmer » (heure/lieu pas encore fixés) : atténuée, en italique */
.event__case--tbc { border-left-color: var(--grey); }
.event__case--tbc .event__case-v { color: var(--grey); font-style: italic; }

/* ---------- 14. Responsive ---------- */
@media (max-width: 720px) {
  h1 { font-size: 2rem; }
  .bignum { font-size: 2.6rem; }

  /* Nav du haut : logo + thème + profil. Les liens passent dans la barre
     d'onglets fixée en bas (cf. section 5b). */
  .nav { padding-top: calc(.85rem + env(safe-area-inset-top, 0)); }
  .nav__links { display: none; }
  .nav__members { display: inline-flex; margin-left: auto; }
  /* Si pas de bouton Membres (non-console), c'est le thème qui pousse à droite. */
  .nav__members + .nav__theme { margin-left: 0; }
  .nav__theme { margin-left: auto; }
  .nav__profile { margin-left: 0; }
  .nav__profile-name { max-width: 90px; }
  .tabbar { display: flex; }

  /* Laisse la place à la barre d'onglets sous le contenu. */
  .container { padding-bottom: calc(4rem + 56px + env(safe-area-inset-bottom, 0)); }

  /* 16px minimum : en dessous, iOS zoome automatiquement sur le champ au
     focus (effet « page qui saute », très anti-app). */
  input, select, textarea { font-size: 16px; }
  /* Sauf le champ fichier : pas de clavier donc pas de zoom iOS, et son texte
     natif (« Choisir un fichier » + nom) est déjà trop long sur mobile. */
  input[type="file"] { font-size: .72rem; }

  /* Cibles tactiles plus généreuses. */
  .btn { padding: .75rem 1.2rem; }
  .chip { padding: .5rem .85rem; }

  /* Tableaux "À valider" / "Transactions" (trésorerie) : cartes plutôt que
     défilement horizontal, pour garder les boutons d'action visibles. */
  .tx-table-wrap { display: none; }
  .tx-cards { display: block; }
}

/* ---------- 15. Console Membres (cartes d'édition) ----------
   La gestion des membres n'est plus un tableau (trop à l'étroit : les menus
   déroulants étaient tronqués). Chaque membre / invitation est une CARTE, qui
   laisse de la place à chaque contrôle et s'empile proprement sur mobile. */
.member-list {
  display: grid;
  gap: .9rem;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.member-card {
  background: var(--mid);
  border: 1px solid var(--line);
  border-left: 3px solid var(--wine);
  border-radius: 2px;
  padding: 1rem 1.1rem;
}
.member-card--off { opacity: .6; }

.member-card__head {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: .8rem;
}
.member-card__avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--line);
  object-fit: cover;
  flex-shrink: 0;
}
.member-card__avatar.is-ph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--wine);
  color: var(--gold);
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.15rem;
  line-height: 1;
}
.member-card__name {
  flex: 1;
  min-width: 0;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.25rem;
  letter-spacing: .08em;
  color: var(--gold);
  line-height: 1.1;
  /* Une seule ligne (… si trop long) pour que les cartes restent alignées */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.member-card__field { margin-bottom: .7rem; }
.member-card__field:last-child { margin-bottom: 0; }
.member-card__field > .label { margin-bottom: .3rem; }
/* Valeur en lecture seule (poste / poste prévu quand non éditable) */
.member-card__val { font-size: .82rem; }

/* Deux champs côte à côte (Prénom / Nom) */
.member-card__row2 { display: flex; gap: .6rem; }
.member-card__row2 > * { flex: 1; min-width: 0; }

/* ---------- 16. Chips de délég (sélection tactile on/off) ----------
   Remplace les cases à cocher : pastilles cliquables, claires au pouce, et
   qui montrent bien l'état sélectionné (fond lie-de-vin + texte or). */
.chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip {
  font-family: 'DM Sans', sans-serif;
  font-size: .62rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: .35rem .7rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--black);
  color: var(--grey);
  cursor: pointer;
  transition: border-color var(--t), background var(--t), color var(--t);
  -webkit-user-select: none;
  user-select: none;
}
.chip:hover { border-color: var(--gold); }
.chip.is-on { background: var(--wine); border-color: var(--wine); color: var(--gold); }
.chip[disabled] { cursor: default; }
.chip[disabled]:hover { border-color: var(--line); }
.chip[disabled].is-on:hover { border-color: var(--wine); }

/* Chips de la section « Catégories de l'app » (console) : libellé + croix
   pour supprimer. La croix est un vrai bouton (cible tactile correcte). */
.chip--liste { display: inline-flex; align-items: center; gap: .45rem; cursor: default; }
.chip--liste:hover { border-color: var(--line); }
.chip-x {
  border: 0; background: none; padding: 0; margin: 0;
  font-size: .8rem; line-height: 1; color: var(--grey);
  cursor: pointer;
}
.chip-x:hover { color: #f87171; }

/* ---------- 17. Thème clair ---------- */
[data-theme="light"] {
  --black: #f0efe9;
  --white: #1c1b18;
  --grey:  #706b64;
  --mid:   #e5e3dc;
  --line:  #ccc9c0;
  /* --wine : inchangé (accent, fonctionne sur clair aussi) */
  /* --gold : assombri pour rester lisible sur fond clair */
  --gold:  #7a6200;
}
[data-theme="light"] input,
[data-theme="light"] select,
[data-theme="light"] textarea {
  color-scheme: light;
}

/* Bouton de bascule de thème (nav, à gauche du profil) */
.nav__theme {
  background: none;
  border: 1px solid var(--line);
  color: var(--grey);
  font-size: 1rem;
  width: 34px; height: 34px;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--t), color var(--t);
  flex-shrink: 0;
  -webkit-user-select: none;
  user-select: none;
}
.nav__theme:hover { border-color: var(--gold); color: var(--white); }

/* Case email dans les cartes membres : lecture seule, clic pour copier */
.member-email-case {
  display: flex;
  align-items: center;
  gap: .5rem;
  background: var(--black);
  border: 1px solid var(--line);
  border-left: 2px solid var(--wine);
  border-radius: 2px;
  padding: .3rem .7rem;
  cursor: pointer;
  transition: border-color var(--t), background var(--t);
  width: 100%;
  margin-bottom: .7rem;
  overflow: hidden;
}
.member-email-case:hover { border-color: var(--gold); background: var(--mid); }
.member-email-case__label {
  font-size: .5rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--gold);
  white-space: nowrap;
  flex-shrink: 0;
  -webkit-user-select: none;
  user-select: none;
}
.member-email-case__val {
  font-size: .82rem;
  color: var(--grey);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}
.member-email-case__icon {
  font-size: .75rem;
  color: var(--grey);
  flex-shrink: 0;
  opacity: .6;
  -webkit-user-select: none;
  user-select: none;
}
.member-email-case--copied .member-email-case__val { color: var(--gold); }

/* ---------- 18. Contrôle segmenté (pilule à plusieurs boutons) ----------
   Remplace les paires de .btn séparés pour choisir une vue (Liste/Calendrier,
   Toutes/Entrées/Sorties, Mes tâches/Circle Park/Toutes…). */
.segmented {
  display: inline-flex;
  background: var(--black);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 2px;
  gap: 2px;
}
.segmented__btn {
  font-family: 'DM Sans', sans-serif;
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: .5rem .8rem;
  border: none;
  border-radius: 1px;
  background: transparent;
  color: var(--grey);
  cursor: pointer;
  transition: background var(--t), color var(--t);
  -webkit-user-select: none;
  user-select: none;
}
.segmented__btn:hover { color: var(--white); }
.segmented__btn.is-on { background: var(--wine); color: var(--gold); }
.segmented__btn.is-on:hover { color: var(--gold); }

/* ---------- 19. Barre de proportion (caisse / banque) ---------- */
.propbar {
  display: flex;
  gap: 2px;
  height: 7px;
  border-radius: 2px;
  overflow: hidden;
}
.propbar--lg { height: 10px; }
.propbar__seg--caisse { background: var(--wine); }
.propbar__seg--banque { background: var(--gold); }
.propbar__legend { display: flex; gap: 1.2rem; margin-top: .5rem; font-size: .7rem; color: var(--grey); flex-wrap: wrap; }
.propbar__legend-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 2px;
  margin-right: .4rem;
}

/* ---------- 20. Barre de répartition (catégories) ---------- */
.catbar-row { margin-bottom: .6rem; }
.catbar-row__head { display: flex; justify-content: space-between; font-size: .75rem; margin-bottom: .25rem; }
.catbar { height: 6px; background: var(--line); border-radius: 2px; overflow: hidden; }
.catbar__fill { height: 100%; background: var(--wine); border-radius: 2px; }

/* ---------- 21. Pile d'avatars (assignés à une tâche/mission) ---------- */
.avatar-stack { display: flex; }
.avatar-stack__item {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--wine);
  color: var(--gold);
  font-family: 'Bebas Neue', sans-serif;
  font-size: .72rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--mid);
  flex-shrink: 0;
}
.avatar-stack__item + .avatar-stack__item { margin-left: -8px; }

/* ---------- 22. Fil d'activité (accueil) ---------- */
.activity-row {
  display: flex;
  align-items: center;
  gap: .8rem;
  background: var(--mid);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: .6rem .9rem;
  margin-bottom: .5rem;
}
.activity__icon {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--wine);
  color: var(--gold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .85rem;
  flex-shrink: 0;
}
.activity-row__label { flex: 1; font-size: .82rem; }
.activity-row__time { color: var(--grey); font-size: .68rem; white-space: nowrap; }

/* ---------- 23. Chat ---------- */
.chat-bubble {
  position: fixed;
  bottom: 1.5rem; right: 1.5rem;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--wine);
  border: 1px solid var(--wine);
  color: var(--gold);
  font-size: 1.4rem;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0,0,0,.5);
  z-index: 60;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.chat-bubble__dot {
  position: absolute;
  top: 4px; right: 4px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--gold);
  border: 2px solid var(--black);
}
.chat-panel {
  position: fixed;
  bottom: 5.5rem; right: 1.5rem;
  width: 680px; max-width: calc(100vw - 2rem);
  height: 520px; max-height: calc(100vh - 8rem);
  background: var(--mid);
  border: 1px solid var(--line);
  border-radius: 2px;
  box-shadow: 0 8px 32px rgba(0,0,0,.6);
  display: flex;
  overflow: hidden;
  z-index: 61;
}
.chat-panel__list {
  width: 240px;
  flex-shrink: 0;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  min-height: 0;
}
/* min-height:0 est indispensable ici : sans ça, un flex-item enfant avec
   `flex:1; overflow-y:auto` (.chat-thread__messages) ne peut jamais se
   contenter de l'espace disponible — il force tout le parent à grandir pour
   accueillir son contenu, ce qui pousse le champ de saisie hors écran (visible
   surtout sur mobile / une longue conversation avec photo, car le panneau
   flottant desktop a son propre `overflow:hidden` qui masquait le bug). */
.chat-panel__thread { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.chat-full {
  display: flex;
  flex-direction: column;
  min-height: 0;
  /* Repli pour les navigateurs sans support de :has() (rare) : approximation
     de la hauteur du header. Écrasé par `flex:1` juste en dessous quand
     :has() est supporté (voir la structure flex de <body> plus bas), qui
     remplit l'espace restant quelle que soit la vraie hauteur du header. */
  height: calc(100dvh - 62px);
  flex: 1;
}
.chat-full .chat-panel__list,
.chat-full .chat-panel__thread { width: 100%; border-right: none; }
.chat-full .chat-panel__list { flex: 1; }

/* <body> de chat.html : colonne plein écran (header naturel + chat qui
   occupe tout le reste), pour ne jamais dépendre d'une hauteur de header
   supposée. */
body:has(> .chat-full) {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  overflow: hidden;
}

.chat-conv-list { flex: 1; overflow-y: auto; }
.chat-conv-row {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .6rem .9rem;
  cursor: pointer;
  border-bottom: 1px solid var(--line);
  transition: background var(--t);
}
.chat-conv-row:hover { background: var(--black); }
.chat-conv-row.is-active { background: var(--black); }
.chat-conv-row__avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--wine);
  color: var(--gold);
  font-size: .72rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.chat-conv-row__body { flex: 1; min-width: 0; }
.chat-conv-row__name { font-weight: 500; font-size: .8rem; display: block; }
.chat-conv-row__preview {
  color: var(--grey);
  font-size: .72rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-conv-row__time { color: var(--grey); font-size: .64rem; white-space: nowrap; }
.chat-conv-row__unread {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--gold);
  flex-shrink: 0;
}

.chat-thread__head {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .7rem 1rem;
  border-bottom: 1px solid var(--line);
}
.chat-thread__back {
  background: none; border: none; color: var(--white);
  font-size: 1.1rem; cursor: pointer; padding: 0;
}
.chat-thread__close {
  background: none; border: none; color: var(--grey);
  font-size: 1rem; cursor: pointer; padding: 0;
}
#chat-thread-tel { margin-left: auto; display: inline-flex; }
.chat-thread__messages { flex: 1; overflow-y: auto; padding: .9rem; display: flex; flex-direction: column; gap: .5rem; }
.chat-thread__form { display: flex; gap: .5rem; padding: .7rem; border-top: 1px solid var(--line); align-items: center; }
.chat-thread__form input[type="text"] { flex: 1; }
.chat-thread__attach {
  background: none; border: 1px solid var(--line); color: var(--grey);
  width: 2.4rem; height: 2.4rem; border-radius: 2px; cursor: pointer;
  font-size: 1rem; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
}
.chat-thread__attach:hover { border-color: var(--gold); color: var(--white); }
.chat-thread__attach-name {
  font-size: .68rem; color: var(--grey); padding: 0 .7rem;
  display: flex; align-items: center; gap: .4rem; border-top: 1px solid var(--line);
}
.chat-thread__attach-name button { background: none; border: none; color: var(--grey); cursor: pointer; font-size: .8rem; }

.msg-row { display: flex; }
.msg-row.is-mine { justify-content: flex-end; }
.msg-bubble {
  max-width: 75%;
  padding: .5rem .75rem;
  border-radius: 2px;
  font-size: .8rem;
  line-height: 1.4;
  background: var(--black);
  color: var(--white);
  border: 1px solid var(--line);
  word-break: break-word;
}
.msg-bubble__from { display: block; font-size: .62rem; color: var(--gold); margin-bottom: .15rem; text-transform: uppercase; letter-spacing: .06em; }
.msg-bubble__time { display: block; font-size: .58rem; color: var(--grey); margin-top: .2rem; text-align: right; }
.msg-row.is-mine .msg-bubble__time { color: rgba(239,191,4,.65); }
.msg-row.is-mine .msg-bubble { background: var(--wine); color: var(--gold); border: none; }
.msg-bubble__img {
  display: block; max-width: 100%; max-height: 260px; border-radius: 2px; cursor: pointer;
}
.msg-bubble__file {
  display: inline-flex; align-items: center; gap: .4rem; color: inherit; text-decoration: underline;
}

@media (max-width: 720px) {
  .chat-bubble { display: none; }
  /* Sur mobile, la barre d'onglets (.tabbar) est fixée en bas de l'écran :
     sans cette marge sur le conteneur plein écran, elle recouvre le champ de
     saisie du chat. (Repli pour navigateurs sans :has(), voir plus haut.) */
  .chat-full {
    height: calc(100dvh - 62px - 56px - env(safe-area-inset-bottom, 0px));
  }
  body:has(> .chat-full) {
    padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
  }
}

/* ---------------- 24. Téléphone (appel rapide) ----------------
   Lien tel: pour appeler quelqu'un en un tap — dans l'en-tête du chat (carré,
   à droite du nom) et à côté d'un nom dans les listes (tâches, Circle Park…). */
.tel-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.2rem; height: 2.2rem; flex-shrink: 0;
  border: 1px solid var(--line); border-radius: 2px;
  color: var(--grey); font-size: 1rem; text-decoration: none;
  transition: border-color var(--t), color var(--t);
}
.tel-btn:hover { border-color: var(--gold); color: var(--gold); }
.tel-btn--sm {
  width: auto; height: auto; border: none; font-size: .85rem;
  padding: 0; margin-left: .35rem; color: var(--gold);
}
.tel-btn--sm:hover { color: var(--white); }