/* =========================
   CE.css — Cartouche Événement
   Tout en colonne : photo en haut, infos dessous, CTA en bas
   ========================= */

.CE .cartouche-evenement{
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--card-bg, #fff);
  border: 1px solid var(--bd, rgba(16,24,40,.10));
  border-radius: 12px;
  padding: 12px;
  box-sizing: border-box;
}

/* Photo en haut, toujours pleine largeur */
.CE .cartouche-main{
  display: flex;
  flex-direction: column;        /* <- impose pile */
  gap: 10px;
}

.CE .cartouche-photo img{
  width: 100%;
  height: 200px;                 /* hauteur stable */
  object-fit: cover;
  display: block;
  border-radius: 10px;
}

/* Zone texte en-dessous de la photo */
.CE .cartouche-infos{
  min-width: 0;
  flex: 1;                       /* prend la place dispo au-dessus du CTA */
}

.CE .cartouche-infos .titre{
  margin: 0 0 6px;
  font-size: 1.05rem;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* Méta : lisibles et compactes */
.CE .meta{
  font-size: .92em;
  color: var(--muted, #64748b);
  line-height: 1.35;
  margin: 0 0 6px;
}
.CE .meta.row{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.CE .meta .chip{
  background: #eef3f9;
  color: #20466e;
  border-radius: 999px;
  padding: 2px 8px;
  font-weight: 600;
  font-size: .86em;
}
.CE .meta.ellipsis{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Description clamp (3 lignes) pour garder la carte compacte */
.CE .desc{
  margin: 6px 0 0;
  font-size: .95em;
  line-height: 1.45;
  color: var(--text, #1f2a44);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.CE .distance{
  margin-top: 4px;
  font-size: .85em;
  color: var(--muted, #64748b);
}

/* CTA : toujours en bas à l’intérieur du cartouche */
.CE .cartouche-cta{
  align-self: stretch;
  text-align: center;
  margin-top: 2px;
}

/* Avatar organisateur en badge */
.CE .cartouche-organisateur{
  position: absolute;
  top: 8px;
  right: 8px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(16,24,40,.2);
}
.CE .cartouche-organisateur img{
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* Étiquette “INSCRIT” */
.CE .cartouche-inscrit{
  position: absolute;
  top: 8px;
  left: -6px;
  background: #16a34a;
  color: #fff;
  font-weight: 800;
  font-size: .75em;
  padding: 6px 10px 6px 16px;
  transform: skewX(-12deg);
  border-radius: 0 8px 8px 0;
}

/* Responsive */
@media (max-width: 540px){
  .CE .cartouche-photo img{ height: 180px; }
}
@media (min-width: 1024px){
  .CE .cartouche-photo img{ height: 220px; } /* un peu plus grande en desktop */
}
/* Compat GN grid : s’assure que la carte prend toute la hauteur et reste un bloc */
.GN-cards-grid > .CE{ display:block; height:100%; }
.GN-cards-grid > .CE > .cartouche-evenement{ height:100%; }

/* Sécurité images si un reset externe casse l’affichage */
.CE img{ max-width:100%; height:auto; }

/* Si d’autres CSS imposent des marges au <article>, on les neutralise ici */
.CE .cartouche-evenement{ margin:0; }


/* Étiquette “AMI INSCRIT” (même style que INSCRIT) */
.CE .cartouche-ami {
  position: absolute;
  top: 8px;                /* par défaut en haut si seul */
  left: -6px;
  background: var(--ok, #2f6fed); /* bleu “action” cohérent */
  color: #fff;
  font-weight: 800;
  font-size: .75em;
  padding: 6px 10px 6px 16px;
  transform: skewX(-12deg);
  border-radius: 0 8px 8px 0;
  z-index: 2;
}

/* Si le badge INSCRIT est juste avant dans le DOM, AMI descend d’un cran */
.CE .cartouche-inscrit + .cartouche-ami {
  top: 40px;
}

.CE .cartouche-inscrit { z-index: 3; }
.CE .cartouche-ami     { z-index: 2; } /* tu l’as déjà, garde-le */

/* ===== Badge "AMI INSCRIT" ===== */
.cartouche-evenement {
  position: relative;
}

.cartouche-inscrit,
.cartouche-ami {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
  backdrop-filter: blur(4px);
}

/* On décale le second badge si les deux existent */
.cartouche-inscrit + .cartouche-ami {
  left: auto;
  right: 8px;
}

/* Couleurs (garde ton thème si besoin) */
.cartouche-inscrit {
  background: #0ea5e9; /* bleu */
  color: #fff;
}
.cartouche-ami {
  background: #10b981; /* vert */
  color: #062e23;      /* texte foncé lisible */
}

/* Avatars compacts dans le badge */
.cartouche-ami-avatars {
  display: inline-flex;
  align-items: center;
}
.cartouche-ami-avatar {
  display: inline-flex;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  overflow: hidden;
  border: 2px solid rgba(255,255,255,.8);
  margin-right: -6px; /* overlap léger */
}
.cartouche-ami-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cartouche-ami-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  background: rgba(255,255,255,.9);
  border: 2px solid rgba(255,255,255,.9);
  margin-left: 4px;
  color: #047857; /* ton vert foncé */
}

.cartouche-ami-label {
  white-space: nowrap;
}