:root {
  --mavka-color-teal: #3DA298;
  --mavka-color-teal-light: #DFF1EE;
  --mavka-color-purple: #8D5D99;
  --mavka-color-purple-dark: #58385F;
  --mavka-color-orange: #DD721F;
  --mavka-color-orange-dark: #C95F10;
  --mavka-color-cream: #FAF7F6;
  --mavka-color-cream-soft: #F3ECE7;
  --mavka-color-ink: #241B28;
  --mavka-color-text: #3D2B35;
  --mavka-color-text-muted: #6B5B63;
  --mavka-color-success-bg: #DCEEDC;
  --mavka-color-success-text: #2F7A3B;
  --mavka-color-danger-bg: #F6DCDC;
  --mavka-color-danger-text: #A32F2F;
  --mavka-font-display: 'Paprika', 'Quicksand', sans-serif;
  --mavka-font-body: 'Quicksand', sans-serif;
  --mavka-radius-pill: 40px;
  --mavka-radius-card: 16px;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--mavka-font-body);
  background: var(--mavka-color-cream);
  color: var(--mavka-color-text);
}
h1, h2, h3 { font-family: var(--mavka-font-display); font-weight: 400; color: var(--mavka-color-ink); margin: 0 0 6px; }
a { color: var(--mavka-color-purple); }

.mavka-admin-shell { display: flex; min-height: 100vh; }
.mavka-admin-sidebar {
  width: 220px; flex-shrink: 0; background: #fff;
  border-right: 2px solid var(--mavka-color-teal-light);
  padding: 24px 18px; display: flex; flex-direction: column; gap: 4px;
}
.mavka-admin-sidebar .brand { font-family: var(--mavka-font-display); font-size: 20px; color: var(--mavka-color-ink); margin-bottom: 18px; }
.mavka-admin-sidebar a {
  display: block; padding: 10px 12px; border-radius: 10px; text-decoration: none;
  color: var(--mavka-color-text); font-weight: 600; font-size: 14.5px;
}
.mavka-admin-sidebar a:hover, .mavka-admin-sidebar a.active { background: var(--mavka-color-teal-light); color: var(--mavka-color-teal); }
/* Sépare "ce qui concerne cette personne" (Mes activités/Mes rapports/Mon profil) de
   "l'administration de l'association" (Activités/Intervenants/Messages/Accès) — deux mondes
   différents pour un compte bénévole qui a aussi ses propres activités à gérer. */
.mavka-sidebar-groupe {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--mavka-color-ink); opacity: .55; padding: 14px 12px 2px;
}
.mavka-admin-main { flex-grow: 1; padding: 32px 40px; }

.mavka-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: var(--mavka-radius-pill); border: 2px solid var(--mavka-color-ink);
  font-family: var(--mavka-font-body); font-weight: 700; font-size: 14.5px;
  padding: 10px 20px; line-height: 1; cursor: pointer; text-decoration: none;
  background: #fff; color: var(--mavka-color-ink);
}
.mavka-btn--primary { background: var(--mavka-color-purple); border-color: var(--mavka-color-purple); color: #fff; }
.mavka-btn--sm { padding: 6px 14px; font-size: 13px; }
/* Supprimer : volontairement discret au repos (pas de couleur d'alerte, plus petit, décalé de
   ses voisins) pour qu'un clic dessus soit un choix, pas un réflexe — le rouge n'apparaît qu'au
   survol, juste avant le clic. Placé après .mavka-btn--sm pour gagner sur son padding/taille,
   les deux classes étant toujours combinées ensemble dans le HTML. */
.mavka-btn--danger {
  background: transparent; border-color: transparent; color: var(--mavka-color-text-muted);
  font-weight: 400; padding: 5px 10px; font-size: 12.5px; margin-left: 14px;
}
.mavka-btn--danger:hover, .mavka-btn--danger:focus-visible {
  background: var(--mavka-color-danger-bg); border-color: var(--mavka-color-danger-text); color: var(--mavka-color-danger-text);
}

.mavka-card { background: #fff; border: 2px solid var(--mavka-color-teal); border-radius: var(--mavka-radius-card); padding: 24px; }

table.mavka-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: var(--mavka-radius-card); overflow: hidden; border: 2px solid var(--mavka-color-teal-light); }
table.mavka-table th, table.mavka-table td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--mavka-color-cream-soft); font-size: 14px; }
table.mavka-table th { background: var(--mavka-color-teal-light); color: var(--mavka-color-teal); font-weight: 700; }
table.mavka-table tr:last-child td { border-bottom: none; }

.mavka-badge { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 700; }
.mavka-badge--publie { background: var(--mavka-color-success-bg); color: var(--mavka-color-success-text); }
.mavka-badge--brouillon { background: var(--mavka-color-cream-soft); color: var(--mavka-color-text-muted); }

/* Tableau : tri, colonnes configurables, édition rapide (intervenants.php) */
table.mavka-table th a { color: inherit; text-decoration: none; white-space: nowrap; }
table.mavka-table th a:hover { text-decoration: underline; }
.mavka-fill-yes { color: var(--mavka-color-success-text); font-weight: 700; }
.mavka-fill-no { color: var(--mavka-color-text-muted); }

/* Activité incomplète (pas de lien d'inscription, ou en attente d'acceptation par
   l'intervenant·e lié·e) : n'apparaît pas encore sur le site public — voir activite_incomplete()
   (includes/functions.php) et la vue activites_publiques. */
.mavka-tag-alerte { color: var(--mavka-color-danger-text); font-weight: 700; white-space: nowrap; }
tr.mavka-row--incomplete td { background: var(--mavka-color-danger-bg); }
tr.mavka-row--incomplete .mavka-editable:hover { background: rgba(255,255,255,.6); }
.mavka-btn--alerte { background: var(--mavka-color-danger-bg); border-color: var(--mavka-color-danger-text); color: var(--mavka-color-danger-text); }
.mavka-btn--alerte-actif { background: var(--mavka-color-danger-text); border-color: var(--mavka-color-danger-text); color: #fff; }
.mavka-editable { cursor: text; border-radius: 6px; padding: 3px 6px; margin: -3px -6px; }
.mavka-editable:hover { background: var(--mavka-color-teal-light); }
/* Un champ vide au premier remplissage n'a pas de texte à cliquer — le span quasi invisible
   rendait la case impossible à atteindre pour AJOUTER une valeur (repéré par Larysa : "champ
   non renseigné au départ = impossible à compléter ensuite"). display:inline-block + une taille
   mini donne une vraie zone cliquable même sans contenu. */
.mavka-editable:empty { display: inline-block; min-width: 70px; min-height: 1.3em; }
.mavka-editable input[type="text"], .mavka-editable input[type="email"], .mavka-editable input[type="number"] {
  font: inherit; width: 100%; padding: 3px 6px; border: 1.5px solid var(--mavka-color-teal); border-radius: 6px;
}
.mavka-editable select { font: inherit; padding: 3px 6px; border: 1.5px solid var(--mavka-color-teal); border-radius: 6px; background: #fff; }
.mavka-colpicker-wrap { position: relative; display: inline-block; }
.mavka-colpicker { position: absolute; right: 0; top: calc(100% + 6px); z-index: 10; background: #fff;
  border: 2px solid var(--mavka-color-teal-light); border-radius: var(--mavka-radius-card); padding: 12px 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12); min-width: 240px; max-height: 360px; overflow-y: auto; }
.mavka-colpicker label { display: flex; align-items: center; gap: 8px; font-size: 13.5px; padding: 4px 0; font-weight: 400; }

/* Onglets pour basculer entre deux blocs sans allonger la page (ex. Rencontres / Projets d'un
   partenaire) — placés en haut à droite du bloc plutôt qu'empilés l'un sous l'autre. */
.mavka-tabs { display: flex; justify-content: flex-end; gap: 6px; margin-bottom: 16px; }
.mavka-tab {
  font: inherit; font-weight: 700; font-size: 13.5px; padding: 7px 16px; cursor: pointer;
  border-radius: var(--mavka-radius-pill); border: 2px solid var(--mavka-color-teal-light);
  background: #fff; color: var(--mavka-color-text-muted);
}
.mavka-tab:hover { border-color: var(--mavka-color-teal); }
.mavka-tab--active { background: var(--mavka-color-teal); border-color: var(--mavka-color-teal); color: #fff; }

.mavka-form label { display: block; font-weight: 700; font-size: 13.5px; margin: 14px 0 5px; color: var(--mavka-color-ink); }
.mavka-form input, .mavka-form select, .mavka-form textarea {
  width: 100%; padding: 10px 12px; border-radius: 10px; border: 1.5px solid var(--mavka-color-teal-light);
  font-family: var(--mavka-font-body); font-size: 14.5px; background: #fff;
}
.mavka-form textarea { min-height: 100px; resize: vertical; }
.mavka-form .row { display: flex; gap: 16px; }
.mavka-form .row > * { flex: 1; }

.mavka-flash { padding: 12px 16px; border-radius: 10px; margin-bottom: 18px; font-weight: 600; font-size: 14px; }
.mavka-flash--ok { background: var(--mavka-color-success-bg); color: var(--mavka-color-success-text); }
.mavka-flash--err { background: var(--mavka-color-danger-bg); color: var(--mavka-color-danger-text); }

.mavka-login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.mavka-login-wrap .mavka-card { width: 360px; }

.mavka-picklist {
  display: flex; flex-direction: column; max-height: 220px; overflow-y: auto;
  border: 1.5px solid var(--mavka-color-teal-light); border-radius: 10px; background: #fff;
}
.mavka-picklist__item {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; font-weight: 400 !important;
  font-size: 14.5px; border-bottom: 1px solid var(--mavka-color-cream-soft); margin: 0 !important; cursor: pointer;
}
.mavka-picklist__item:last-child { border-bottom: none; }
.mavka-picklist__item:hover { background: var(--mavka-color-cream-soft); }
.mavka-picklist__item input[type="checkbox"] { width: auto; flex-shrink: 0; }

/* Sections colorées, pliables (<details>/<summary>) et réordonnables par glisser-déposer.
   Bandeau de couleur pleine en en-tête (comme une carte), corps blanc en dessous —
   un simple filet de couleur se perdait sur le fond crème de la page. */
.mavka-form-section {
  border-radius: var(--mavka-radius-card); overflow: hidden; margin-bottom: 18px;
  border: 2.5px solid var(--section-color, var(--mavka-color-teal));
  box-shadow: 0 2px 6px rgba(36, 27, 40, 0.06);
}
.mavka-form-section.mavka-dragging { opacity: .4; }
.mavka-form-section__header {
  background: var(--section-color, var(--mavka-color-teal));
  padding: 12px 18px 12px 10px;
  display: flex; align-items: center; gap: 10px;
  cursor: grab; list-style: none; user-select: none;
}
.mavka-form-section__header::-webkit-details-marker { display: none; }
.mavka-form-section__grip { color: rgba(255,255,255,.65); font-size: 15px; letter-spacing: -1px; flex-shrink: 0; }
.mavka-form-section__title {
  display: flex; align-items: center; gap: 8px; font-family: var(--mavka-font-display);
  font-size: 17px; color: #fff; margin: 0; flex-grow: 1;
}
.mavka-form-section__chevron { flex-shrink: 0; transition: transform .18s ease; color: #fff; }
.mavka-form-section[open] > .mavka-form-section__header .mavka-form-section__chevron { transform: rotate(180deg); }
.mavka-form-section__body { background: #fff; padding: 20px 24px 24px; }
.mavka-form-section__hint { font-size: 12.5px; color: var(--mavka-color-text-muted); margin: 0 0 10px; }
.mavka-form-section__body > label:first-child { margin-top: 0; }

.mavka-form-section--identite  { --section-color: var(--mavka-color-teal); }
.mavka-form-section--public    { --section-color: var(--mavka-color-purple); }
.mavka-form-section--documents { --section-color: var(--mavka-color-orange); }
.mavka-form-section--photo     { --section-color: var(--mavka-color-teal-dark, #276A62); }
.mavka-form-section--interne   { --section-color: var(--mavka-color-text-muted); }
.mavka-form-section--acces     { --section-color: var(--mavka-color-purple-dark); }
.mavka-form-section--ateliers  { --section-color: #C95F10; }

.mavka-form-stack { max-width: 720px; }

/* Ligne compacte "lien + fichier" pour un document : les deux tiennent sur une seule ligne
   au lieu d'une URL brute pleine largeur qui ne dit rien visuellement. */
.mavka-doc-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.mavka-doc-row__lien { flex: 1 1 200px; max-width: 280px; margin: 0 !important; }

.mavka-link-chip {
  display: flex; align-items: center; gap: 6px; flex-shrink: 0;
  border: 1.5px solid var(--mavka-color-success-text); background: var(--mavka-color-success-bg);
  border-radius: 10px; padding: 6px 10px 6px 12px;
}
.mavka-link-chip__check { color: var(--mavka-color-success-text); font-weight: 700; font-size: 13px; }
.mavka-link-chip__label { color: var(--mavka-color-ink); font-weight: 600; font-size: 13px; text-decoration: none; white-space: nowrap; }
.mavka-link-chip__edit {
  background: none; border: none; cursor: pointer; font-size: 12px; padding: 2px 3px;
  color: var(--mavka-color-success-text); line-height: 1;
}

.mavka-file-slot__preview, .mavka-file-slot__empty {
  display: flex; align-items: center; gap: 8px; text-decoration: none;
  font-size: 13.5px; font-weight: 600; color: var(--mavka-color-ink);
  border: 1.5px solid var(--mavka-color-teal-light); border-radius: 10px; padding: 6px 12px;
}
.mavka-file-slot__preview img { width: 26px; height: 26px; border-radius: 5px; object-fit: cover; }
.mavka-file-slot__badge {
  width: 26px; height: 22px; border-radius: 5px; background: var(--mavka-color-orange);
  color: #fff; font-size: 9.5px; font-weight: 700; display: flex; align-items: center; justify-content: center;
}
.mavka-file-slot__empty {
  border-style: dashed; color: var(--mavka-color-text-muted); cursor: pointer;
}
.mavka-file-slot__empty:hover { border-color: var(--mavka-color-teal); color: var(--mavka-color-teal); }
.mavka-file-slot__replace {
  width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--mavka-color-teal-light);
  display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 13px; flex-shrink: 0;
}
.mavka-file-slot__replace:hover { background: var(--mavka-color-teal-light); }

/* Photo de profil avec pastille crayon superposée */
.mavka-photo-edit { display: inline-block; position: relative; cursor: pointer; }
.mavka-photo-edit__preview {
  width: 88px; height: 88px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--mavka-color-teal-light); color: var(--mavka-color-teal); overflow: hidden;
  font-family: var(--mavka-font-display); font-size: 30px; border: 2px solid #fff; box-shadow: 0 0 0 2px var(--mavka-color-teal-light);
}
.mavka-photo-edit__preview img { width: 100%; height: 100%; object-fit: cover; }
.mavka-photo-edit__badge {
  position: absolute; right: -2px; bottom: -2px; width: 30px; height: 30px; border-radius: 50%;
  background: var(--mavka-color-teal); color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 13px; border: 2px solid #fff;
}

/* Historique des anciennes versions d'un document — discret, replié par défaut */
.mavka-doc-historique { margin-top: 6px; font-size: 12.5px; color: var(--mavka-color-text-muted); }
.mavka-doc-historique summary { cursor: pointer; }
.mavka-doc-historique ul { margin: 6px 0 0; padding-left: 18px; }
.mavka-doc-historique li { margin-bottom: 3px; }

/* Champ date compact — le navigateur affiche déjà sa propre icône calendrier,
   pas besoin d'en ajouter une deuxième ; juste éviter qu'il prenne toute la largeur. */
.mavka-date-field input[type="date"] { max-width: 190px; }

/* Bandeau "qui j'édite en ce moment" — reste visible en scrollant les longues fiches */
.mavka-sticky-identity {
  position: sticky; top: 14px; z-index: 20; width: fit-content;
  display: flex; align-items: center; gap: 12px;
  background: #fff; border: 2px solid var(--mavka-color-teal);
  border-radius: var(--mavka-radius-pill); padding: 7px 22px 7px 7px;
  margin: 14px 0 20px; box-shadow: 0 4px 14px rgba(36, 27, 40, 0.12);
}
.mavka-sticky-identity img, .mavka-sticky-identity__placeholder {
  width: 42px; height: 42px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
}
.mavka-sticky-identity__placeholder {
  background: var(--mavka-color-teal-light); color: var(--mavka-color-teal);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mavka-font-display); font-size: 18px;
}
.mavka-sticky-identity__name { font-family: var(--mavka-font-display); font-size: 16px; color: var(--mavka-color-ink); line-height: 1.2; }

/* Galerie publique (photos de réalisations / de l'atelier, page volontaire) */
.mavka-galerie-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px;
  margin: 10px 0 20px;
}
.mavka-galerie-item { position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--mavka-color-teal-light); }
.mavka-galerie-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mavka-galerie-item__delete {
  position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border-radius: 50%;
  background: rgba(36, 27, 40, 0.72); color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 12px; text-decoration: none; line-height: 1;
}
.mavka-galerie-item__delete:hover { background: var(--mavka-color-danger-text); }

/* Kanban des projets/accords (admin/projets.php) — colonnes par statut, une carte par projet. */
.mavka-kanban { display: flex; gap: 16px; align-items: flex-start; overflow-x: auto; padding-bottom: 8px; }
.mavka-kanban-col {
  flex: 1 1 260px; min-width: 240px; background: var(--mavka-color-cream-soft);
  border-radius: var(--mavka-radius-card); padding: 14px; border-top: 4px solid var(--col-color, var(--mavka-color-teal));
}
.mavka-kanban-col--en_cours   { --col-color: var(--mavka-color-teal); }
.mavka-kanban-col--termine    { --col-color: var(--mavka-color-purple); }
.mavka-kanban-col--abandonne  { --col-color: var(--mavka-color-text-muted); }
.mavka-kanban-col__title { font-family: var(--mavka-font-display); font-size: 16px; margin: 0 0 12px; display: flex; align-items: center; gap: 8px; }
.mavka-kanban-count { background: #fff; border-radius: 20px; padding: 1px 9px; font-size: 12px; font-weight: 700; color: var(--mavka-color-text-muted); }
.mavka-kanban-card { background: #fff; border: 1.5px solid var(--mavka-color-teal-light); border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; }
.mavka-kanban-card__title { font-weight: 700; margin: 0 0 4px; }
.mavka-kanban-card__meta { font-size: 12.5px; color: var(--mavka-color-text-muted); margin: 0 0 4px; }
.mavka-kanban-card__desc { font-size: 13px; margin: 6px 0 8px; }
.mavka-kanban-card select { width: 100%; padding: 5px 8px; border-radius: 8px; border: 1.5px solid var(--mavka-color-teal-light); font-size: 13px; }

/* Sélecteur "Participants" (rencontre/projet) : chercher une organisation (nom, ville ou type)
   filtre la liste ; cliquer une organisation affiche ses membres à cocher ; les personnes
   cochées apparaissent en résumé (chips) au-dessus, même une fois le groupe masqué — voir le
   script partagé .mavka-participants-picker. Sélecteurs volontairement plus spécifiques que
   ".mavka-form label/input/select" génériques (sinon ces règles prennent le dessus et cassent
   l'affichage). */
.mavka-participants-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.mavka-participants-chip {
  display: inline-flex; align-items: center; gap: 2px; background: var(--mavka-color-teal-light);
  color: var(--mavka-color-teal-dark, #276A62); border-radius: 20px; padding: 4px 4px 4px 12px;
  font-size: 13px; font-weight: 700;
}
.mavka-participants-chip button {
  border: none; background: none; cursor: pointer; font-size: 16px; line-height: 1; color: inherit;
  padding: 3px 6px; border-radius: 50%;
}
.mavka-participants-chip button:hover { background: rgba(36, 27, 40, 0.1); }
.mavka-participants-picker .mavka-participants-search {
  width: 100%; padding: 9px 12px; border-radius: 10px; border: 1.5px solid var(--mavka-color-teal-light);
  font-family: var(--mavka-font-body); font-size: 14px; background: #fff;
}
.mavka-participants-orglist {
  border: 1.5px solid var(--mavka-color-teal-light); border-radius: 10px; margin: 4px 0 10px;
  max-height: 240px; overflow-y: auto; background: #fff;
}
.mavka-participants-orglist__item {
  display: block; width: 100%; text-align: left; padding: 8px 12px; border: none; background: none;
  border-bottom: 1px solid var(--mavka-color-cream-soft); font-family: var(--mavka-font-body); font-size: 14px; cursor: pointer;
}
/* Le "display: block" ci-dessus, en CSS d'auteur, prendrait autrement le pas sur le
   "display: none" implicite de l'attribut [hidden] (qui vient de la feuille de style du
   navigateur) — sans cette règle, le filtrage JS (btn.hidden = ...) ne masque rien visuellement. */
.mavka-participants-orglist__item[hidden] { display: none; }
.mavka-participants-orglist__item:last-child { border-bottom: none; }
.mavka-participants-orglist__item:hover { background: var(--mavka-color-teal-light); }
.mavka-participants-orglist__count { color: var(--mavka-color-text-muted); font-size: 12.5px; }
.mavka-participants-orglist__vide { padding: 10px 12px; margin: 0; color: var(--mavka-color-text-muted); font-size: 13px; }
.mavka-participants-picker .mavka-participants__groupe {
  border: 1.5px solid var(--mavka-color-teal-light); border-radius: 10px; padding: 8px 12px; margin: 0 0 10px;
}
.mavka-participants__groupe legend { font-size: 12px; font-weight: 700; color: var(--mavka-color-text-muted); padding: 0 4px; }
.mavka-participants-picker .mavka-participants__item {
  display: flex; align-items: center; gap: 6px; font-weight: 400; font-size: 14px; margin: 4px 0; cursor: pointer;
}
.mavka-participants__item input[type="checkbox"] {
  width: auto; padding: 0; border: none; border-radius: 0; background: none; accent-color: var(--mavka-color-teal);
}