/* ══════════════════════════════════════════════════════════════════════════
   ANNUAIRE D'ÉVÉNEMENTS (26/10/2026) — la même feuille sur Whileresume et
   Hiring Notes. Les couleurs viennent de variables : chaque site pose les
   siennes sur `.ev` (accent, encre, fond), les publics gardent les leurs.

     candidats  (Whileresume)  violet pastel
     freelances (Whileproject) bleu
     recruteurs (Hiring Notes) violet
   ══════════════════════════════════════════════════════════════════════════ */

.ev {
  --ev-candidats: #A78BFA;
  --ev-candidats-fonce: #7C5CD6;
  --ev-freelances: #2B63D1;
  --ev-freelances-fonce: #1F4FA8;
  --ev-recruteurs: #7E22CE;
  --ev-recruteurs-fonce: #5B1696;
  --ev-encre: #1E1B2E;
  --ev-doux: #6B7280;
  --ev-trait: #E8E5F0;
  --ev-fond: #F7F5FC;
  --ev-carte-bg: #fff;
  --ev-r: 18px;
  color: var(--ev-encre);
}

/* ── En-tête ─────────────────────────────────────────────────────────── */
/* Les accents de chaque site (boutons, dates, liens) ; les publics, eux,
   gardent leurs couleurs partout. Whileresume : les replis ci-dessous. */
.ev--hn {
  --ev-accent: var(--theme, #C73E9B);
  --ev-accent-fonce: var(--theme-hover, #952E74);
  --ev-accent-pale: var(--theme-voile, #FDF7FB);
  --ev-encre: var(--encre, #22223B);
  --ev-doux: var(--gris, #5C5C74);
  --ev-trait: var(--trait, #E4E0EE);
  --ev-fond: var(--violet-fond, #F4F2F9);
}

.ev-tete { margin-bottom: 22px; }
.ev-tete__sur { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ev-accent-fonce, #6B47A6); background: var(--ev-accent-pale, #F2EDFA); padding: 6px 12px; border-radius: 999px; margin-bottom: 14px; }
.ev-tete h1 { font-size: clamp(28px, 3.2vw, 40px); line-height: 1.12; letter-spacing: -.02em; margin: 0 0 10px; font-weight: 800; }
.ev-tete p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--ev-doux); max-width: 720px; }

/* ── Onglets : les trois publics ─────────────────────────────────────── */
.ev-onglets { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; }
.ev-onglet {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 10px 16px; border-radius: 999px; border: 1.5px solid var(--ev-trait);
  background: #fff; color: var(--ev-encre); font-weight: 600; font-size: 14.5px; text-decoration: none;
}
.ev-onglet:hover { border-color: currentColor; }
.ev-onglet__point { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.ev-onglet__site { font-size: 12px; font-weight: 500; color: var(--ev-doux); }
.ev-onglet--candidats .ev-onglet__point { background: var(--ev-candidats); }
.ev-onglet--freelances .ev-onglet__point { background: var(--ev-freelances); }
.ev-onglet--recruteurs .ev-onglet__point { background: var(--ev-recruteurs); }
.ev-onglet.est-actif { color: #fff; border-color: transparent; }
.ev-onglet.est-actif .ev-onglet__site { color: rgba(255, 255, 255, .8); }
.ev-onglet.est-actif .ev-onglet__point { background: #fff; }
.ev-onglet--candidats.est-actif { background: var(--ev-candidats-fonce); }
.ev-onglet--freelances.est-actif { background: var(--ev-freelances); }
.ev-onglet--recruteurs.est-actif { background: var(--ev-recruteurs); }
.ev-ailleurs { margin: 0 0 18px; font-size: 13.5px; color: var(--ev-doux); }
.ev-ailleurs a { font-weight: 600; color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* ── Filtres ─────────────────────────────────────────────────────────── */
.ev-filtres {
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, .8fr) minmax(0, .8fr) auto;
  gap: 12px; align-items: end;
  padding: 16px; margin: 0 0 18px;
  background: var(--ev-carte-bg); border: 1px solid var(--ev-trait); border-radius: var(--ev-r);
}
.ev-filtres label { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ev-filtres label > span { font-size: 12.5px; font-weight: 600; color: var(--ev-doux); }
.ev-filtres select, .ev-filtres input {
  width: 100%; min-width: 0; height: 42px; padding: 0 12px; border-radius: 12px;
  border: 1px solid var(--ev-trait); background: #fff; font: inherit; font-size: 14px; color: var(--ev-encre);
}
.ev-filtres__actions { display: flex; gap: 8px; align-items: center; }
.ev-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 42px; padding: 0 18px; border-radius: 12px; border: 0; cursor: pointer;
  background: var(--ev-accent, #8A63C1); color: #fff; font: inherit; font-size: 14px; font-weight: 700; text-decoration: none; white-space: nowrap;
}
.ev-btn:hover { background: var(--ev-accent-fonce, #6B47A6); color: #fff; }
.ev-btn--doux { background: transparent; color: var(--ev-doux); padding: 0 8px; font-weight: 600; }
.ev-btn--doux:hover { background: transparent; color: var(--ev-encre); text-decoration: underline; }

/* ── La carte ────────────────────────────────────────────────────────── */
.ev-carte-cadre { position: relative; margin: 0 0 28px; }
.ev-carte {
  height: clamp(360px, 58vh, 560px); border-radius: var(--ev-r); overflow: hidden;
  border: 1px solid var(--ev-trait); background: #EEF0F4; z-index: 0;
}
.ev-carte.est-en-charge::after {
  content: ""; position: absolute; top: 12px; right: 12px; z-index: 500;
  width: 18px; height: 18px; border-radius: 50%;
  border: 2.5px solid rgba(0, 0, 0, .12); border-top-color: var(--ev-accent, #8A63C1);
  animation: ev-tourne .7s linear infinite;
}
@keyframes ev-tourne { to { transform: rotate(360deg); } }
.ev-compteur {
  position: absolute; left: 12px; bottom: 12px; z-index: 500;
  padding: 7px 12px; border-radius: 999px; background: rgba(255, 255, 255, .94);
  box-shadow: 0 4px 14px rgba(20, 20, 40, .12); font-size: 13px; font-weight: 600; color: var(--ev-encre);
}

/* Le point : une goutte à la couleur du public. */
.ev-pin { background: transparent; border: 0; }
.ev-pin__corps {
  position: absolute; left: 3px; top: 0; width: 20px; height: 20px;
  border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
  background: var(--ev-pin, var(--ev-candidats)); border: 3px solid #fff;
  box-shadow: 0 3px 8px rgba(20, 20, 40, .28);
}
.ev-pin--candidats { --ev-pin: var(--ev-candidats); }
.ev-pin--freelances { --ev-pin: var(--ev-freelances); }
.ev-pin--recruteurs { --ev-pin: var(--ev-recruteurs); }

/* Les grappes : une pastille cerclée, le nombre au centre. */
.ev-grappe { background: transparent; border: 0; }
.ev-grappe span {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; border-radius: 50%;
  background: var(--ev-pin, var(--ev-candidats)); color: #fff; font-weight: 800; font-size: 13px;
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--ev-pin, var(--ev-candidats)) 28%, transparent), 0 4px 12px rgba(20, 20, 40, .2);
}
.ev-grappe--m span { font-size: 14px; }
.ev-grappe--g span { font-size: 15px; }

/* La bulle d'un événement. */
.ev-popup .leaflet-popup-content-wrapper { border-radius: 14px; }
.ev-popup .leaflet-popup-content { margin: 12px 14px; }
.ev-bulle { display: flex; flex-direction: column; gap: 4px; font: 13px/1.45 inherit; }
.ev-bulle__titre { font-size: 14.5px; line-height: 1.3; color: var(--ev-encre, #1E1B2E); }
a.ev-bulle__titre { text-decoration: none; font-weight: 700; }
a.ev-bulle__titre:hover { text-decoration: underline; color: var(--ev-accent-fonce, #6B47A6); }
.ev-bulle__date { font-weight: 600; color: var(--ev-accent-fonce, #6B47A6); }
.ev-bulle__lieu { color: #6B7280; }
.ev-bulle__liens { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.ev-bulle__lien { font-weight: 700; color: var(--ev-accent-fonce, #6B47A6) !important; text-decoration: none; }
.ev-bulle__lien--doux { font-weight: 600; color: #6B7280 !important; }
.ev-bulle__lien:hover { text-decoration: underline; }

/* ── La liste ────────────────────────────────────────────────────────── */
.ev-liste__tete { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 14px; }
.ev-liste__tete h2 { margin: 0; font-size: 20px; font-weight: 800; }
.ev-liste__tete span { font-size: 13.5px; color: var(--ev-doux); }
.ev-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; list-style: none; margin: 0; padding: 0; }
.ev-item {
  display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 16px;
  padding: 18px; border-radius: var(--ev-r); background: var(--ev-carte-bg);
  border: 1px solid var(--ev-trait); scroll-margin-top: 90px;
}
.ev-item:target { box-shadow: 0 0 0 3px var(--ev-accent-pale, #F2EDFA), 0 0 0 4px var(--ev-accent, #8A63C1); }
.ev-date {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 70px; border-radius: 14px; background: var(--ev-fond); text-align: center;
}
.ev-date__jour { font-size: 24px; font-weight: 800; line-height: 1; }
.ev-date__mois { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ev-accent-fonce, #6B47A6); margin-top: 4px; }
.ev-item--candidats .ev-date { background: color-mix(in srgb, var(--ev-candidats) 16%, #fff); }
.ev-item--freelances .ev-date { background: color-mix(in srgb, var(--ev-freelances) 12%, #fff); }
.ev-item--recruteurs .ev-date { background: color-mix(in srgb, var(--ev-recruteurs) 12%, #fff); }
.ev-item__corps { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.ev-item__titre { margin: 0; font-size: 16.5px; line-height: 1.3; font-weight: 700; }
.ev-item__titre a { color: inherit; text-decoration: none; }
.ev-item__titre a:hover { color: var(--ev-accent-fonce, #6B47A6); text-decoration: underline; }
.ev-tete__proposer { margin-top: 14px; }
.ev-item__quand { font-size: 13.5px; font-weight: 600; color: var(--ev-accent-fonce, #6B47A6); }
.ev-item__ou { font-size: 13.5px; color: var(--ev-doux); }
.ev-metiers { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.ev-metier { font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: var(--ev-fond); color: var(--ev-encre); }
.ev-item__desc { margin: 4px 0 0; font-size: 14px; line-height: 1.6; color: #374151; white-space: pre-line; }
.ev-item__desc--court { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ev-item details summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--ev-accent-fonce, #6B47A6); list-style: none; margin-top: 2px; }
.ev-item details summary::-webkit-details-marker { display: none; }
.ev-item details[open] summary { display: none; }
.ev-item__corps:has(details[open]) .ev-item__desc--court { display: none; }
.ev-item__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.ev-lien {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: 999px;
  font-size: 13px; font-weight: 700; text-decoration: none; cursor: pointer; font-family: inherit;
  border: 1px solid var(--ev-trait); background: #fff; color: var(--ev-encre);
}
.ev-lien:hover { border-color: var(--ev-accent, #8A63C1); color: var(--ev-accent-fonce, #6B47A6); }
.ev-lien--plein { background: var(--ev-accent, #8A63C1); border-color: transparent; color: #fff; }
.ev-lien--plein:hover { background: var(--ev-accent-fonce, #6B47A6); color: #fff; }
.ev-lien svg { width: 14px; height: 14px; }

.ev-vide { padding: 36px 20px; text-align: center; border: 1.5px dashed var(--ev-trait); border-radius: var(--ev-r); color: var(--ev-doux); background: var(--ev-carte-bg); }
.ev-vide strong { display: block; color: var(--ev-encre); font-size: 17px; margin-bottom: 6px; }

.ev-pages { display: flex; justify-content: center; align-items: center; gap: 6px; flex-wrap: wrap; margin: 24px 0 0; }
.ev-pages a, .ev-pages span {
  min-width: 38px; height: 38px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px; border: 1px solid var(--ev-trait); background: #fff; color: var(--ev-encre);
  font-size: 14px; font-weight: 600; text-decoration: none;
}
.ev-pages a:hover { border-color: var(--ev-accent, #8A63C1); }
.ev-pages .est-actif { background: var(--ev-accent, #8A63C1); border-color: transparent; color: #fff; }
.ev-pages .ev-pages__trou { border: 0; background: transparent; min-width: 0; }

@media (max-width: 1100px) {
  .ev-filtres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ev-filtres__actions { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  .ev-liste { grid-template-columns: minmax(0, 1fr); }
}
/* ⚠️  `!important` À DESSEIN : Hiring Notes impose sous 767 px des tailles
       de titres en `!important` (h2 25 px, h3 23 px). Un titre de carte
       d'événement à 23 px prenait trois lignes sur un téléphone. */
@media (max-width: 767px) {
  .ev .ev-liste__tete h2 { font-size: 19px !important; }
  .ev .ev-item__titre { font-size: 16px !important; }
}
@media (max-width: 560px) {
  /* Métier et pays sur toute la largeur, les deux dates côte à côte. */
  .ev-filtres { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 14px; }
  .ev-filtres__large, .ev-filtres__actions { grid-column: 1 / -1; }
  .ev-filtres__actions .ev-btn:not(.ev-btn--doux) { flex: 1; }
  .ev-item { grid-template-columns: 52px minmax(0, 1fr); gap: 12px; padding: 14px; }
  .ev-date { height: 58px; }
  .ev-date__jour { font-size: 20px; }
  .ev-onglet { padding: 9px 13px; font-size: 14px; }
  .ev-onglet__site { display: none; }
}
@media (prefers-reduced-motion: reduce) { .ev-carte.est-en-charge::after { animation: none; } }