/* Carte "activité" — UNE seule définition, utilisée telle quelle par le site public
   (includes/site_functions.php → render_event_card) et par l'aperçu modifiable de
   admin/activite-form.php. L'admin ajoute juste des champs de saisie par-dessus les mêmes
   classes ; elle ne redéfinit jamais son propre style pour la carte. Si la carte doit changer,
   elle change ici, une fois, pour les deux.
   Jetons autonomes (scopés sous .event), mais qui SUIVENT la palette du site (--card/--mint/
   --ink/--teal/--violet/--sun de assets/site.css) quand elle est chargée, via des valeurs
   par défaut dans var(...) : sur une page qui ne charge pas site.css (l'admin), ces
   variables n'existent pas et chaque jeton retombe sur son défaut ci-dessous, repris de la
   palette du site — la carte reste autonome mais cohérente avec le site. */
.event{
  --ec-card:var(--card,#fff); --ec-mint:var(--mint,#DFF1EE); --ec-line:var(--card-line,#A9D8C4);
  --ec-ink:var(--ink,#241B28); --ec-ink-2:var(--ink-2,#3D2B35); --ec-ink-3:var(--ink-3,#6B5B63);
  --ec-teal:var(--teal,#3DA298); --ec-teal-deep:var(--teal-deep,#276A62);
  --ec-sun:var(--sun,#FFCB4D); --ec-sun-pale:color-mix(in srgb, var(--ec-sun) 22%, white);
  --ec-sun-deep:var(--sun-deep,#E8A716);
  --ec-violet:var(--violet,#8D5D99); --ec-violet-tint:var(--violet-tint,#F0E9F1);
  --ec-r:22px; --ec-display:"PT Serif",Georgia,"Times New Roman",serif;
  --ec-body:"Nunito Sans","Helvetica Neue",Arial,sans-serif;
}
.event{
  font-family:var(--ec-body); display:grid; grid-template-rows:auto auto 1fr;
  /* Bordure sur --ec-line (dédiée), pas --ec-mint (le fond de la photo de secours) — sinon
     la carte se fond dans une section déjà vert pâle (.sand) quand les deux tokens sont
     identiques. */
  border-radius:var(--ec-r); background:var(--ec-card); border:1px solid var(--ec-line); overflow:hidden;
}
/* Carte entière cliquable (teaser de l'accueil, voir render_event_card() $hrefCarte) — léger
   survol pour signaler que toute la carte répond au clic, pas juste le bouton. */
.event--cliquable{transition:box-shadow .15s ease, transform .15s ease}
.event--cliquable:hover{box-shadow:0 6px 18px rgba(0,0,0,.08); transform:translateY(-2px)}

/* Photo (ou habillage de secours par catégorie, si pas de photo) */
.cover{position:relative; aspect-ratio:16/9; background:var(--ec-mint); overflow:hidden}
.cover.sun{background:#FFF6D6} .cover.lilac{background:#F1E9FA} .cover.mint{background:#D6F2EA}
/* contain plutôt que cover : une photo qui n'est pas exactement en 16:9 (dimension
   recommandée pour les nouveaux imports) se voit entière, quitte à laisser un bandeau
   de chaque côté, plutôt que d'être rognée. Fond blanc plutôt que le mint par défaut de
   .cover — se fond mieux avec le blanc déjà présent dans la plupart des illustrations. */
.cover.photo-cover{background:#fff}
.cover.photo-cover>img{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; display:block}
/* Avatar par direction (photo-cover + sun/lilac/mint, voir render_event_card()) : le fond teinté
   doit l'emporter sur le blanc par défaut de .photo-cover — même spécificité, on force via un
   sélecteur combiné plus précis plutôt que de réordonner les règles ci-dessus. */
.cover.photo-cover.sun{background:#FFF6D6} .cover.photo-cover.lilac{background:#F1E9FA} .cover.photo-cover.mint{background:#D6F2EA}
.cover .mascot{position:absolute; right:8%; bottom:-6%; height:104%; width:auto}

/* corner--tl : plashka "sous-titre" (ex. "Nouveau cours") — jaune, volontairement voyant,
   c'est son rôle (signaler). Format/Public/Places (tr/br/br2) : blanc translucide, neutre —
   ne rivalise pas avec le sous-titre ni avec la plashka jaune n'existe que là. */
.corner{
  position:absolute; z-index:1; max-width:calc(50% - 24px);
  font-family:var(--ec-body); font-size:11px; font-weight:700; letter-spacing:.02em;
  padding:4px 9px; border-radius:999px;
  box-shadow:0 1px 3px rgba(30,42,58,.2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.corner:empty{display:none}
.corner--tl{top:10px; left:10px; background:var(--ec-sun); color:var(--ec-ink)}
.corner--tr{top:10px; right:10px; background:rgba(255,255,255,.92); color:var(--ec-ink)}
.corner--br{right:10px; bottom:10px; background:rgba(255,255,255,.92); color:var(--ec-ink)}
.corner--br2{right:10px; bottom:38px; background:rgba(255,255,255,.92); color:var(--ec-ink)}

/* Bandeau vert sous la photo (même vert que les boutons) : un pavé carré vert vif
   (date/heure, ou récurrence) posé dessus, puis lieu/ville juste à côté sur le pâle —
   toujours visible, sur le site comme en admin (où ce sont les mêmes champs, modifiables
   sur place). Mix 42% avec du blanc (ni --ec-teal-tint ni --ec-line, tous deux essayés et
   rejetés — ils se noient dans une section déjà vert pâle comme .agenda-teaser). */
.strip{background:color-mix(in srgb, var(--ec-teal) 42%, white); padding:12px 16px; display:flex; align-items:center; gap:14px; color:var(--ec-ink)}
.strip__row{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap}
.strip__badge{
  background:var(--ec-sun); color:var(--ec-ink); border-radius:14px; flex:none; width:58px; height:58px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; line-height:1.05;
}
.strip__badge--wide{width:auto; min-width:58px; padding:8px 10px}
.strip__date{font-family:var(--ec-display); font-weight:800; font-size:1.3rem; font-variant-numeric:tabular-nums}
.strip__date--text{font-size:.68rem; text-transform:uppercase; letter-spacing:.02em; max-width:92px; line-height:1.15}
.strip__date-unit{display:block; font-size:.6rem; text-transform:uppercase; letter-spacing:.04em; font-weight:700; margin-top:-2px}
/* Dans le badge texte ("Dates à venir", récurrence...), la 1re ligne est déjà petite (.68rem,
   pas 1.3rem comme un chiffre de jour) : le margin-top négatif ci-dessus les ferait se chevaucher. */
.strip__date--text .strip__date-unit{margin-top:1px}
.strip__time{font-family:var(--ec-body); font-weight:700; font-size:.68rem; margin-top:2px}
.strip__loc{font-size:1rem; color:var(--ec-ink); opacity:.85; display:flex; flex-direction:column; gap:2px; min-width:0}
.strip__ville{text-transform:uppercase}

.event-row{display:grid; gap:8px; align-content:start; padding:22px}
.event-title-row{display:flex; align-items:center; gap:8px}
.event-avatars{display:flex; flex:none}
.event-avatar{
  width:24px; height:24px; border-radius:50%; object-fit:cover; flex:none; background:var(--ec-mint);
  border:2px solid var(--ec-card); margin-left:-10px; box-shadow:0 1px 2px rgba(30,42,58,.15);
}
.event-avatar:first-child{margin-left:0}
.event-row h3{font-family:var(--ec-display); font-weight:700; font-size:1.25rem; line-height:1.2; color:var(--ec-ink); margin:0}
.event-body{display:grid; gap:8px; align-content:start}
.event-body .meta{font-size:.9rem; color:var(--ec-ink-3); display:flex; align-items:center; gap:8px}
.event-body p{color:var(--ec-ink-2); font-size:.95rem; line-height:1.5; white-space:pre-line}
.event-body .btn{justify-self:start; margin-top:4px}

.tag{
  display:inline-block; justify-self:start; font-size:.74rem; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; padding:4px 10px; border-radius:999px; background:#F1E9FA; color:var(--ec-violet);
}

/* Préfixées par .event : .btn/.btn-primary/.btn-ghost existent aussi, avec un tout autre
   sens, dans assets/site.css (bouton du Hero, du CTA...). Sans ce préfixe, ces règles ici
   s'appliquaient partout sur le site — pas seulement dans la carte — et cassaient tous les
   autres boutons de la page : var(--ec-teal)/var(--ec-sun) n'existent que dans .event, donc
   hors d'une carte ces propriétés étaient invalides → fond transparent, mauvaise bordure. */
.event .btn{
  display:inline-flex; align-items:center; gap:8px; padding:13px 22px; border-radius:999px;
  font-weight:700; font-size:.98rem; border:1.5px solid transparent; cursor:pointer;
  font-family:var(--ec-body); line-height:1.2; white-space:nowrap; text-decoration:none;
}
.event .btn:hover{text-decoration:none}
/* primary = jaune (action principale, ex. Préinscription), ghost = vert (secondaire, ex. Voir
   sa page) — même inversion que .btn-primary/.btn-ghost dans assets/site.css. */
.event .btn-primary{background:var(--ec-sun); color:var(--ec-ink); border-color:var(--ec-sun)}
.event .btn-primary:hover{background:var(--ec-sun-deep)}
.event .btn-ghost{background:var(--ec-teal); color:#fff; border-color:var(--ec-teal)}
.event .btn-ghost:hover{background:var(--ec-teal-deep)}
.event .btn-sm{padding:9px 16px; font-size:.9rem}