/* =========================================================================
   EasyPlanning - feuille de style unique.
   Tout est piloté par des variables CSS : js/theme.js les réécrit quand on
   change de palette, sans recharger la page.
   Conçue en "mobile d'abord" : la mise en page de base vaut pour le
   téléphone, les media queries ajoutent les colonnes sur écrans plus larges.
   ========================================================================= */

:root {
  --brand: #2563eb;
  --brand-strong: #1d4ed8;
  --brand-soft: #eff6ff;
  --brand-contrast: #ffffff;
  --accent: #34d399;
  --accent-contrast: #111827;

  --bg: #f8fafc;
  --surface: #ffffff;
  --surface-2: #f8fafc;
  --text: #1e293b;
  --muted: #64748b;
  --faint: #94a3b8;
  --border: #e2e8f0;

  --danger: #dc2626;
  --danger-soft: #fef2f2;
  --success: #059669;
  --warning: #d97706;

  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.18);

  --nav-height: 56px;
  --tap: 44px; /* cible tactile minimale */
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
}

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

img {
  max-width: 100%;
}

[hidden] {
  display: none !important;
}

.container,
.container-sm {
  width: 100%;
  margin: 0 auto;
  padding: 16px 14px 48px;
}
.container {
  max-width: 1140px;
}
.container-sm {
  max-width: 720px;
}

@media (min-width: 700px) {
  .container,
  .container-sm {
    padding: 24px 20px 64px;
  }
}

/* ---------------------------------------------------------------- Titres */

h1 {
  font-size: 24px;
  line-height: 1.25;
  letter-spacing: -0.015em;
  margin: 0 0 6px;
}
h2 {
  font-size: 16px;
  letter-spacing: -0.01em;
  margin: 0;
}
h3 {
  font-size: 14px;
  margin: 0;
}
.subtitle {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
  margin: 0 0 22px;
}
.text-muted {
  color: var(--muted);
  font-size: 13px;
}
.text-small {
  font-size: 12px;
}
.text-danger {
  color: var(--danger);
}
.text-success {
  color: var(--success);
}

/* ------------------------------------------------------------ Navigation */

#nav {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 40;
}

.nav-inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: var(--nav-height);
}

.nav-brand {
  font-weight: 700;
  color: var(--brand);
  text-decoration: none;
  font-size: 16px;
  white-space: nowrap;
}

.nav-burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap);
  height: var(--tap);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}

.nav-links {
  display: none;
  gap: 2px;
  flex-wrap: wrap;
}

.nav-link {
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
}
.nav-link:hover {
  background: var(--surface-2);
  color: var(--text);
}
.nav-link.active {
  background: var(--brand-soft);
  color: var(--brand);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.nav-user {
  display: none;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--muted);
  text-decoration: none;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
}
.nav-user:hover {
  background: var(--surface-2);
}

/* Menu déroulant sur mobile */
.nav-drawer {
  display: none;
  border-top: 1px solid var(--border);
  background: var(--surface);
  padding: 8px 14px 14px;
}
.nav-drawer.open {
  display: block;
}
.nav-drawer .nav-link {
  padding: 12px;
  font-size: 15px;
  border-radius: var(--radius-sm);
}
.nav-drawer-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

@media (min-width: 1100px) {
  .nav-burger {
    display: none;
  }
  .nav-links {
    display: flex;
    flex-wrap: nowrap;
  }
  .nav-user {
    display: flex;
  }
  .nav-drawer {
    display: none !important;
  }
}

/* Pastille de compteur (messages, notifications) */
.badge-count {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.icon-btn {
  position: relative;
  width: var(--tap);
  height: var(--tap);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  font-size: 17px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.icon-btn:hover {
  background: var(--surface-2);
}
.icon-btn .badge-count {
  position: absolute;
  top: -6px;
  right: -6px;
}

/* Panneau des notifications */
.popover {
  position: absolute;
  top: calc(var(--nav-height) - 4px);
  right: 10px;
  width: min(360px, calc(100vw - 20px));
  max-height: 70vh;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  z-index: 60;
  padding: 8px;
}
.popover-item {
  padding: 10px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  display: block;
  color: inherit;
  text-decoration: none;
}
.popover-item:hover {
  background: var(--surface-2);
}
.popover-item.unread {
  background: var(--brand-soft);
}

/* ------------------------------------------------------------ Composants */

.card {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
  padding: 18px;
  margin-bottom: 20px;
}
@media (min-width: 700px) {
  .card {
    padding: 24px;
    margin-bottom: 24px;
  }
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: var(--radius-sm);
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  border: 1px solid transparent;
  cursor: pointer;
  min-height: var(--tap);
  transition: background-color 0.15s, border-color 0.15s;
  text-decoration: none;
  white-space: nowrap;
}
.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.btn-primary {
  background: var(--brand);
  color: var(--brand-contrast);
}
.btn-primary:hover:not(:disabled) {
  background: var(--brand-strong);
}
.btn-secondary {
  background: var(--surface-2);
  color: var(--text);
  border-color: var(--border);
}
.btn-secondary:hover:not(:disabled) {
  background: var(--border);
}
.btn-ghost {
  background: transparent;
  color: var(--muted);
  border-color: transparent;
}
.btn-ghost:hover:not(:disabled) {
  background: var(--surface-2);
  color: var(--text);
}
.btn-danger {
  background: var(--danger-soft);
  color: var(--danger);
  border-color: transparent;
}
.btn-xs {
  font-size: 12px;
  padding: 6px 10px;
  min-height: 34px;
}
.btn-block {
  width: 100%;
}

.input,
select.input,
textarea.input {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 16px; /* 16px : empêche le zoom automatique sur iOS */
  font-family: inherit;
  background: var(--surface);
  color: var(--text);
  min-height: var(--tap);
}
@media (min-width: 700px) {
  .input,
  select.input,
  textarea.input {
    font-size: 14px;
  }
}
.input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}
textarea.input {
  min-height: 80px;
  resize: vertical;
}

.input-color {
  width: 100%;
  max-width: 72px;
  height: var(--tap);
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  cursor: pointer;
}

.label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.field {
  margin-bottom: 14px;
  min-width: 0;
}
.field:last-child {
  margin-bottom: 0;
}

.checkbox-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  min-height: var(--tap);
  cursor: pointer;
}
.checkbox-row input[type="checkbox"] {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  accent-color: var(--brand);
  cursor: pointer;
}

.row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

/* Grille de formulaire : les champs s'alignent tout seuls sur une ligne
   quand la place le permet, et le bouton reste aligné sur les champs. */
/* Les champs se calent en HAUT de leur case : leurs étiquettes s'alignent
   alors sur une même ligne, même quand le voisin est plus grand (une rangée
   de pastilles qui passe sur deux lignes, par exemple). Les boutons, eux,
   continuent de se caler en bas grâce à .form-action. */
.form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  align-items: stretch;
}
.form-grid .field {
  margin-bottom: 0;
}
.form-grid .form-action {
  display: flex;
  align-items: flex-end;
}
.form-grid .form-action .btn {
  width: 100%;
}

@media (min-width: 640px) {
  .form-grid {
    grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr));
  }
  .form-grid .form-action .btn {
    width: auto;
    min-width: 120px;
  }
}

/* Champ mot de passe avec l'oeil de visualisation */
.password-field {
  position: relative;
}
.password-field .input {
  padding-right: 46px;
}
.password-toggle {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 16px;
  color: var(--muted);
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.password-toggle:hover {
  background: var(--surface-2);
  color: var(--text);
}

.dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  color: #fff;
  white-space: nowrap;
}
.chip-soft {
  background: var(--surface-2);
  color: var(--muted);
  border: 1px solid var(--border);
}
.chip button {
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0 0 0 2px;
}

.close-x {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--faint);
  font-size: 20px;
  line-height: 1;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}
.close-x:hover {
  color: var(--danger);
  background: var(--danger-soft);
}

.pill-tabs {
  display: flex;
  gap: 4px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.pill-tab {
  flex: 1;
  min-width: max-content;
  border: none;
  background: transparent;
  color: var(--muted);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
}
.pill-tab.active {
  background: var(--surface);
  color: var(--brand);
  box-shadow: var(--shadow);
}

ul.plain {
  list-style: none;
  margin: 0;
  padding: 0;
}
ul.plain li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 0;
  font-size: 14px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
ul.plain li:last-child {
  border-bottom: none;
}
.list-main {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1 1 200px;
}
.list-side {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 13px;
  flex-shrink: 0;
}

.grid-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 860px) {
  .grid-2 {
    grid-template-columns: 1fr 1fr;
  }
}

.empty {
  color: var(--muted);
  font-size: 14px;
  padding: 14px 0;
  text-align: center;
}

/* Bandeau d'alerte / message flottant */
.alert {
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 13px;
  margin-bottom: 12px;
  border: 1px solid transparent;
}
.alert-error {
  background: var(--danger-soft);
  color: var(--danger);
}
.alert-success {
  background: #ecfdf5;
  color: var(--success);
}
.alert-info {
  background: var(--brand-soft);
  color: var(--brand);
}

#toast {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%) translateY(20px);
  background: var(--text);
  color: var(--surface);
  padding: 12px 18px;
  border-radius: 999px;
  font-size: 14px;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
  z-index: 100;
  max-width: calc(100vw - 32px);
  text-align: center;
}
#toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ---------------------------------------------------------------- Modale */

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 80;
}
@media (min-width: 640px) {
  .modal-backdrop {
    align-items: center;
    padding: 20px;
  }
}
.modal-box {
  background: var(--surface);
  border-radius: var(--radius) var(--radius) 0 0;
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 480px;
  max-height: 92vh;
  overflow-y: auto;
  padding: 18px;
}
@media (min-width: 640px) {
  .modal-box {
    border-radius: var(--radius);
  }
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 16px;
}

/* ------------------------------------------------------------ Connexion */

.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, var(--brand-soft), var(--bg));
  padding: 20px 14px;
}
.login-card {
  width: 100%;
  max-width: 420px;
  margin-bottom: 0;
}
.login-logo {
  font-size: 26px;
  font-weight: 700;
  color: var(--brand);
  margin: 0;
}

/* -------------------------------------------------- Calendrier vue mois */

.month-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.month-grid .day-label {
  background: var(--surface-2);
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  padding: 7px 0;
}
.month-cell {
  background: var(--surface);
  min-height: 62px;
  padding: 4px;
  cursor: pointer;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
@media (min-width: 700px) {
  .month-cell {
    min-height: 118px;
    padding: 7px;
  }
}
.month-cell:hover {
  background: var(--surface-2);
}

/* Le jour même se repère comme sur l'accueil : la case entière est cernée
   et teintée, pas seulement son numéro. Un liseré intérieur plutôt qu'une
   bordure, pour ne pas décaler la grille d'un pixel. */
.month-cell.today {
  background: var(--brand-soft);
  box-shadow: inset 0 0 0 2px var(--brand);
}
.month-cell.today:hover {
  background: var(--brand-soft);
}
.month-cell.out-of-month {
  opacity: 0.45;
}
.month-cell-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
}
.month-cell-daynum {
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
}
.month-cell-daynum.today {
  background: var(--brand);
  color: var(--brand-contrast);
  border-radius: 999px;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}
/* La barre de disponibilité d'une case du mois : même langage visuel que
   la bande de l'accueil, en miniature. Piste grise = la journée de 6h à
   minuit, traits = toutes les trois heures, vert = tout le monde est libre
   en même temps. On lit le mois sans ouvrir un seul jour. */
/* Les occupations de chacun dans une case du mois : une ligne par personne,
   sa couleur, et les mêmes repères d'heures que partout ailleurs. */
.mini-stack {
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 0 0 3px;
  padding: 1px;
  border-radius: 4px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  overflow: hidden;
}
.mini-row {
  position: relative;
  display: block;
  width: 100%;
}
.mini-row > span {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 1px;
}
.mini-stack > .mini-mark {
  z-index: 2;
}

.mini-timeline {
  position: relative;
  height: 8px;
  margin: 4px 0 2px;
  border-radius: 4px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  overflow: hidden;
}
.mini-mark {
  position: absolute;
  top: 0;
  bottom: 0;
  border-left: 1px dashed var(--faint);
  opacity: 0.7;
}
.mini-free {
  position: absolute;
  top: 0;
  bottom: 0;
  background: var(--accent);
}

.entry-pill {
  font-size: 10px;
  color: #fff;
  padding: 2px 5px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  overflow: hidden;
  white-space: nowrap;
}
.entry-pill .txt {
  overflow: hidden;
  text-overflow: ellipsis;
}
.entry-pill button {
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  opacity: 0.75;
  flex-shrink: 0;
  font-size: 13px;
  line-height: 1;
  padding: 0 2px;
}
.entry-pill button:hover {
  opacity: 1;
}
/* Sur petit écran, les entrées deviennent de simples points de couleur. */
.entry-dots {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}
.entry-dots .dot {
  width: 7px;
  height: 7px;
}
@media (min-width: 700px) {
  .entry-dots {
    display: none;
  }
}
@media (max-width: 699px) {
  .entry-pill,
  .month-more {
    display: none;
  }
}
.month-more {
  font-size: 10px;
  color: var(--muted);
}

/* ------------------------------------------- Frises de disponibilité */

.week-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
@media (min-width: 620px) {
  .week-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1000px) {
  .week-grid {
    grid-template-columns: repeat(7, 1fr);
  }
}
.day-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px;
  background: var(--surface);
}
.day-card.today {
  border-color: var(--brand);
  background: var(--brand-soft);
}
.day-card-title {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 8px;
}
.day-card-title .num {
  font-weight: 400;
  color: var(--muted);
}
/* La pile des barres d'une journée : les traits d'heures la traversent de
   haut en bas, ce qui permet de lire une colonne — « à 18h, ces trois-là
   sont libres en même temps » — sans faire l'aller-retour entre les lignes. */
.timeline-stack {
  position: relative;
  /* La gouttière des visages, à gauche des barres. Les traits d'heures et
     l'échelle se décalent d'autant, sinon ils ne tomberaient plus en face. */
  --tl-gutter: 22px;
}

/* Une ligne = un visage + sa barre. */
.tl-row {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 5px;
}
.tl-row .timeline {
  flex: 1;
  min-width: 0;
  margin-bottom: 0;
}
.tl-face {
  width: 18px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

.timeline-grid {
  position: absolute;
  inset: 0 0 0 var(--tl-gutter);
  pointer-events: none;
  z-index: 3;
}
.timeline-grid span {
  position: absolute;
  top: 0;
  bottom: 0;
  border-left: 1px dashed var(--faint);
  opacity: 0.45;
}

/* L'échelle, sous la pile : on sait enfin à quelle heure on regarde. */
/* L'échelle est posée AU-DESSUS des barres : on lit l'heure d'abord, les
   barres ensuite — dans cet ordre, comme un axe de graphique. En dessous,
   il fallait parcourir toute la pile avant de savoir de quoi on parlait. */
.hour-axis {
  position: relative;
  height: 13px;
  margin: 0 0 4px 22px;
  font-size: 10px;
  line-height: 1;
  color: var(--muted);
}
.hour-axis span {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  white-space: nowrap;
}
.hour-axis span:first-child {
  transform: none;
}
.hour-axis span:last-child {
  transform: translateX(-100%);
}

.timeline {
  position: relative;
  width: 100%;
  height: 18px;
  border-radius: 6px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  overflow: hidden;
  margin-bottom: 5px;
}
.timeline-green {
  background: var(--border);
}
.timeline-segment {
  position: absolute;
  top: 0;
  bottom: 0;
}
.timeline-segment.free {
  background: var(--accent);
}
.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 12px;
}
.legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Le visage, cerclé de la couleur qui lui sert de barre. */
.legend-face {
  display: inline-flex;
  padding: 2px;
  border: 2px solid var(--border);
  border-radius: 50%;
  line-height: 0;
}

/* --------------------------------------------------- Mini calendrier */

.paint-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 780px) {
  .paint-layout {
    grid-template-columns: 1fr 240px;
  }
}
.mini-cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
.mini-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
  text-align: center;
}
.mini-cal-daylabel {
  font-size: 10px;
  color: var(--muted);
  font-weight: 600;
  padding-bottom: 2px;
}
.mini-cal-day {
  position: relative;
  font-size: 13px;
  border-radius: var(--radius-sm);
  height: 40px;
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  color: var(--text);
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mini-cal-day:hover {
  background: var(--surface-2);
}
.mini-cal-day.out-of-month {
  color: var(--faint);
}
/* Journée déjà posée au calendrier : couleur de fond du code d'horaire. */
.mini-cal-day.applied {
  color: #fff;
  font-weight: 600;
}
/* Journée simplement sélectionnée, pas encore appliquée : contour épais. */
.mini-cal-day.selected {
  border: 2px dashed var(--brand);
  font-weight: 700;
}
.mini-cal-day.applied.selected {
  border-color: #fff;
}
.mini-cal-day .today-marker {
  position: absolute;
  bottom: 3px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--brand);
}
.mini-cal-day.applied .today-marker {
  background: #fff;
}

.codes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
/* Carte d'un code d'horaire : libellé au-dessus, actions dessous, pour que
   rien ne se coupe en plusieurs lignes sur les écrans étroits. */
.code-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--surface);
}
.code-card-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  min-width: 0;
}
.code-card-label span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.code-card-actions {
  display: flex;
  gap: 4px;
  align-items: center;
  justify-content: flex-end;
  margin-top: 2px;
}

/* ------------------------------------------------------------ Météo */

.weather-card {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.weather-icon {
  font-size: 38px;
  line-height: 1;
}
.weather-temp {
  font-size: 26px;
  font-weight: 700;
}
.weather-meta {
  color: var(--muted);
  font-size: 13px;
}
.warning-line {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  margin-top: 8px;
  border-left: 4px solid;
}
.warning-jaune {
  background: #fefce8;
  color: #854d0e;
  border-color: #eab308;
}
.warning-orange {
  background: #fff7ed;
  color: #9a3412;
  border-color: #f97316;
}
.warning-rouge {
  background: #fef2f2;
  color: #991b1b;
  border-color: #dc2626;
}

/* -------------------------------------------------------------- Carte */

#map {
  height: 320px;
  width: 100%;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  z-index: 1;
}
@media (min-width: 700px) {
  #map {
    height: 420px;
  }
}
.map-pin {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50% 50% 50% 4px;
  transform: rotate(-45deg);
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  font-size: 12px;
}
.map-pin span {
  transform: rotate(45deg);
}
.travel-list li {
  gap: 8px;
}

/* --------------------------------------------------------------- Chat */

.chat-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 860px) {
  .chat-layout {
    grid-template-columns: 280px 1fr;
    align-items: start;
  }
}
.conv-list {
  max-height: 320px;
  overflow-y: auto;
}
@media (min-width: 860px) {
  .conv-list {
    max-height: 64vh;
  }
}
.conv-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  font-family: inherit;
  padding: 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: inherit;
}
.conv-item:hover {
  background: var(--surface-2);
}
.conv-item.active {
  background: var(--brand-soft);
}
.conv-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.conv-text {
  min-width: 0;
  flex: 1;
}
.conv-title {
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.conv-preview {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.messages {
  height: 52vh;
  min-height: 300px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 4px;
}
.message {
  max-width: 78%;
  padding: 9px 13px;
  border-radius: 16px;
  font-size: 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  align-self: flex-start;
}
/* Seul le corps du message conserve les retours à la ligne saisis par
   l'utilisateur : sinon l'indentation du gabarit HTML créerait du vide. */
.message-body {
  white-space: pre-wrap;
  word-break: break-word;
}
.message.mine {
  align-self: flex-end;
  background: var(--brand);
  color: var(--brand-contrast);
  border-color: transparent;
}
.message-meta {
  font-size: 11px;
  opacity: 0.7;
  margin-bottom: 2px;
}
.message-form {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  align-items: flex-end;
}
.message-form textarea {
  flex: 1;
  min-height: var(--tap);
  max-height: 140px;
}
.day-separator {
  align-self: center;
  font-size: 11px;
  color: var(--muted);
  background: var(--surface-2);
  padding: 3px 12px;
  border-radius: 999px;
}

/* Sur téléphone, la liste des discussions se déroule à l'horizontale.
   Empilée, sa colonne de 320 px repoussait le fil de messages et le champ
   de saisie hors de l'écran : on ouvrait Messages et on ne voyait aucun
   message. En rangée de visages, tout tient dans la première vue. */
@media (max-width: 859px) {
  .conv-list {
    display: flex;
    gap: 6px;
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 4px;
    scroll-snap-type: x proximity;
  }
  .conv-list > .label {
    display: none;
  }
  .conv-item {
    position: relative;
    flex: 0 0 auto;
    width: 80px;
    flex-direction: column;
    gap: 6px;
    padding: 8px 4px;
    text-align: center;
    scroll-snap-align: start;
  }
  .conv-item .conv-text {
    flex: none;
    max-width: 100%;
  }
  .conv-preview {
    display: none;
  }
  .conv-title {
    font-size: 12px;
    max-width: 72px;
  }
  .conv-item .badge-count {
    position: absolute;
    top: 4px;
    right: 10px;
  }
  .messages {
    height: 46vh;
    min-height: 240px;
  }
}


/* ------------------------------------------------------------ Thèmes */

.theme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}
.theme-swatch {
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px;
  cursor: pointer;
  background: var(--surface);
  font-family: inherit;
  text-align: left;
  color: var(--text);
  position: relative;
}
.theme-swatch.active {
  border-color: var(--brand);
}
.theme-swatch-colors {
  display: flex;
  gap: 4px;
  margin-bottom: 8px;
}
.theme-swatch-colors span {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 1px solid rgba(0, 0, 0, 0.08);
}
.theme-swatch-name {
  font-size: 12px;
  font-weight: 500;
}
.theme-swatch .close-x {
  position: absolute;
  top: 2px;
  right: 2px;
  font-size: 15px;
  width: 24px;
  height: 24px;
}

/* Membres / plannings */
.group-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px;
  margin-bottom: 10px;
  background: var(--surface);
}
.group-card.active {
  border-color: var(--brand);
  background: var(--brand-soft);
}
.share-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 16px;
  letter-spacing: 0.12em;
  font-weight: 600;
  background: var(--surface-2);
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  display: inline-block;
  user-select: all;
}

/* Tâches */
.task-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.task-row:last-child {
  border-bottom: none;
}
.task-main {
  flex: 1 1 220px;
  min-width: 0;
}
.task-title {
  font-size: 14px;
}
.task-title.done {
  text-decoration: line-through;
  color: var(--faint);
}
.task-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
}
.task-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}
.status-pending {
  color: var(--warning);
}
.status-declined {
  color: var(--danger);
}

/* Utilitaires */
.stack > * + * {
  margin-top: 12px;
}
.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.scroll-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}


/* ------------------------------------------------- Sections repliables */

/* Un en-tête de section entier est cliquable : le titre à gauche, le chevron
   à droite. Bien plus lisible qu'un caractère collé au texte. */
.section-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 28px;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.section-toggle:hover .chevron {
  opacity: 0.85;
}

.chevron {
  flex: none;
  width: 16px;
  height: 16px;
  opacity: 0.4;
  transition: transform 0.18s ease, opacity 0.18s ease;
}
.section-toggle[aria-expanded="true"] .chevron {
  transform: rotate(90deg);
  opacity: 0.7;
}

.section-body {
  margin-top: 18px;
}

/* La ligne résumé d'un bloc de filtres : elle dit l'état sans qu'on déplie. */
.section-summary {
  color: var(--muted);
  font-size: 13.5px;
  font-weight: 400;
}
.section-summary strong {
  color: var(--text);
  font-weight: 600;
}

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

.tabs {
  display: flex;
  gap: 2px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--border);
  margin-bottom: 24px;
}

.tab {
  padding: 11px 16px;
  margin-bottom: -1px;
  font-size: 14px;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.tab:hover {
  color: var(--text);
}
.tab.active {
  color: var(--text);
  font-weight: 600;
  border-bottom-color: var(--brand);
}

/* --------------------------------------------------------- Pastilles */

/* Une rangée de pastilles remplace une liste déroulante quand les choix
   sont peu nombreux : tout est visible d'un coup d'oeil, et choisir ne
   demande plus qu'un seul clic. */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.chip {
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font-family: inherit;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.chip:hover {
  color: var(--text);
  border-color: var(--faint);
}
.chip.active {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--brand-contrast);
  font-weight: 600;
}

/* Petite icône alignée sur le texte (engrenage des réglages). */
.icon {
  width: 15px;
  height: 15px;
  flex: none;
  opacity: 0.55;
  vertical-align: -2px;
}

/* ------------------------------------------------------- Confirmation */

.dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(15, 23, 42, 0.45);
}

.dialog-box {
  width: 100%;
  max-width: 420px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 22px;
}
.dialog-box h3 {
  font-size: 16px;
  margin: 0 0 8px;
}
.dialog-message {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
  margin: 0 0 20px;
}
.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

/* ---------------------------------------------------- Listes déroulantes */

/* Le panneau se pose en surcouche, exactement aligné sur le bouton et de la
   même largeur : la page ne bouge pas d'un pixel quand on l'ouvre. */
.dropdown {
  position: relative;
  min-width: 170px;
  flex: 1 1 auto;
}

.dropdown-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: var(--tap);
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease;
}
.dropdown-toggle:hover {
  border-color: var(--faint);
}
.dropdown-toggle[aria-expanded="true"] {
  border-color: var(--brand);
}
.dropdown-toggle[aria-expanded="true"] .chevron {
  transform: rotate(90deg);
}
.dropdown-value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dropdown-panel {
  position: absolute;
  z-index: 120;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  min-width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  padding: 5px;
  max-height: 272px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* Pas la place en dessous : le panneau s'ouvre vers le haut. */
.dropdown-panel.up {
  top: auto;
  bottom: calc(100% + 6px);
}

.dropdown-item {
  display: block;
  width: 100%;
  padding: 9px 11px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}
.dropdown-item:hover {
  background: var(--brand-soft);
}
.dropdown-item.active {
  background: var(--brand);
  color: var(--brand-contrast);
  font-weight: 600;
}

/* ------------------------------------------------------------- Pas-à-pas */

/* « Au moins n personnes » : une rangée de pastilles marche à cinq, pas à
   cent. Le pas-à-pas garde la même largeur quelle que soit la taille du
   planning. */
.stepper {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
}

.stepper-btn {
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--muted);
  font-family: inherit;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.stepper-btn:hover:not(:disabled) {
  background: var(--brand-soft);
  color: var(--brand);
}
.stepper-btn:disabled {
  opacity: 0.3;
  cursor: default;
}

.stepper-value {
  min-width: 46px;
  padding: 0 6px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}

/* --------------------------------------------- Équipes d'une même journée */

/* Une ligne par équipe, pas une par personne : les visages disent qui, le
   détail nominatif ne s'ouvre que si on le demande. */
ul.plain li.day-group {
  display: block;
  padding: 10px 0;
}
.day-group .section-toggle {
  gap: 10px;
  align-items: center;
}
.day-group-body {
  margin-top: 8px;
  padding-left: 16px;
  border-left: 2px solid var(--border);
}

.face-stack {
  display: inline-flex;
  align-items: center;
}
.face-stack .avatar {
  margin-left: -6px;
  border: 2px solid var(--surface);
}
.face-stack .avatar:first-child {
  margin-left: 0;
}

/* ------------------------------------------------- Propositions d'adresse */

/* Les adresses proposées pendant la frappe : une liste sobre, cliquable
   d'un bout à l'autre de la ligne — pas de bouton « Choisir » à viser. */
.suggestions {
  margin-top: 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  overflow: hidden;
  max-height: 240px;
  overflow-y: auto;
}

.suggestion {
  display: block;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: none;
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}
.suggestion:last-child {
  border-bottom: 0;
}
.suggestion:hover {
  background: var(--brand-soft);
}

/* ------------------------------------------------------- Carte en fenêtre */

.map-dialog {
  max-width: 620px;
}
.map-dialog-canvas {
  height: 320px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--border);
}
@media (max-width: 560px) {
  .map-dialog-canvas {
    height: 240px;
  }
}

/* Une ligne qu'on peut ouvrir sur la carte : discrète, mais cliquable. */
.map-link {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  color: var(--brand);
  text-align: left;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 3px;
}
.map-link:hover {
  text-decoration-style: solid;
}

/* ----------------------------------------------------------- Infobulles */

.tooltip {
  position: fixed;
  z-index: 300;
  max-width: 280px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  background: var(--text);
  color: var(--surface);
  font-size: 12.5px;
  line-height: 1.5;
  box-shadow: var(--shadow-lg);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.12s ease;
}
.tooltip.visible {
  opacity: 1;
}

/* Le petit « i » qui remplace un paragraphe d'explication. */
.hint-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  margin-left: 7px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--muted);
  font-family: inherit;
  font-size: 11px;
  font-style: italic;
  font-weight: 600;
  line-height: 1;
  vertical-align: 2px;
  cursor: help;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.hint-btn:hover {
  color: var(--brand);
  border-color: var(--brand);
}