/* =========================
   CE.css — Cartouche Événement
   Photo à gauche (quasi carrée), infos à droite, 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;
}

/* ===== MAIN : PHOTO + INFOS COTE À COTE (CHANGÉ) ===== */
.CE .cartouche-main{
  display: flex;
  flex-direction: row;          /* était column */
  align-items: stretch;
  gap: 14px;                    /* léger espace entre photo et infos */
}

/* ===== PHOTO À GAUCHE (CHANGÉ) =====
   Bloc fixe, ratio 1:1, l'image couvre sans déformer */
.CE .cartouche-photo{
  flex: 0 0 160px;              /* largeur par défaut */
  max-width: 160px;
  aspect-ratio: 1 / 1;          /* quasi carré propre */
  border-radius: 10px;
  overflow: hidden;
  background: #eee;
  position: relative;
}
.CE .cartouche-photo img{
  width: 100%;
  height: 100%;
  object-fit: cover;            /* couvre le cadre */
  display: block;
}

/* ===== INFOS À DROITE ===== */
.CE .cartouche-infos{
  min-width: 0;
  flex: 1 1 auto;               /* prend le reste de la place */
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.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) */
.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 */
.CE .cartouche-cta{
  align-self: stretch;
  text-align: center;
  margin-top: 2px;
}

/* Avatar organisateur en badge (inchangé) */
.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);
  z-index: 4; /* ✅ au-dessus de .cartouche-stretch (z-index:1) et des contenus */
}
.CE .cartouche-organisateur img{
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* Étiquette “INSCRIT” (ta version ruban, conservée) */
.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;
  z-index: 3;
}

/* Étiquette “AMI INSCRIT” (cohérente avec ton ruban) */
.CE .cartouche-ami {
  position: absolute;
  top: 40px;                    /* descend sous INSCRIT si présent */
  left: -6px;
  background: var(--ok, #2f6fed);
  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;
}

/* Avatars compacts dans le badge ami */
.CE .cartouche-ami-avatars{
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
}
.CE .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;
}
.CE .cartouche-ami-avatar img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.CE .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;
}
.CE .cartouche-ami-label{ white-space: nowrap; }

/* ===== OPTIONNEL : style “pill” moderne pour les badges =====
   Active-le en ajoutant la classe .is-pill-badges sur le conteneur .CE */
.CE.is-pill-badges .cartouche-inscrit,
.CE.is-pill-badges .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);
  transform: none;              /* pas d’inclinaison */
  border-radius: 999px;
}
.CE.is-pill-badges .cartouche-inscrit{
  background: #0ea5e9;
  color: #fff;
}
.CE.is-pill-badges .cartouche-ami{
  background: #10b981;
  color: #062e23;
}
/* On décale le second badge si les deux existent */
.CE.is-pill-badges .cartouche-inscrit + .cartouche-ami{
  left: auto;
  right: 8px;
}

/* ===== Responsive : on garde la photo à gauche, on réduit sa largeur ===== */
@media (max-width: 540px){
  .CE .cartouche-photo{ flex-basis: 120px; max-width:120px; }
}
@media (max-width: 380px){
  .CE .cartouche-photo{ flex-basis: 100px; max-width:100px; }
  .CE .cartouche-infos .meta{ gap:6px; }
}
/* (on n’utilise plus les hauteurs fixes de l’image selon les breakpoints) */

/* Compat GN grid : carte pleine hauteur */
.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%; }

/* Neutralise marges parasites éventuelles sur <article> */
.CE .cartouche-evenement{ margin:0; }
/* Lien overlay cliquable sur tout le cartouche */

.CE .cartouche-stretch{
  position: absolute;
  inset: 0;
  z-index: 1;             /* sous les autres liens/badges */
  text-decoration: none;
  color: inherit;
}
/* Les éléments qui doivent rester cliquables au-dessus de l’overlay
   (badges, avatars amis, organisateur, etc.) ont déjà des z-index élevés */

/* En mode compact (sidebar/notifications) : on retire l’overlay global */
.CE--compact .cartouche-stretch {
  display: none;   /* => les petits liens internes restent cliquables */
}

.CE .CE-creator-badge{
  position: absolute;
  top: 48px; /* sous l’avatar 36px placé à top:8px */
  right: 8px;
  z-index: 4; /* au-dessus de l’overlay (z-index:1) */
  padding: 2px 6px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em;
  background: var(--brand, #20466e); color: #fff;
  border-radius: 999px; line-height: 1.3;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
}

/* Option : masquer en mobile si ça gêne */
@media (max-width:640px){
  .CE .CE-creator-badge{ display:none; }
}

/* =========================================================
   OVERRIDES SPÉCIFIQUES À LA COLONNE GAUCHE (sideleft)
   => vignette carrée au-dessus + texte en dessous
   ========================================================= */
.sideleft .CE .cartouche-main{
  flex-direction: column;   /* empile */
  gap: 8px;
}

.sideleft .CE .cartouche-photo{
  width: 100%;
  max-width: none;          /* supprime la limite 160px */
  flex: 0 0 auto;           /* pas de largeur fixe */
  aspect-ratio: 1 / 1;      /* carré */
  border-radius: 10px;
  overflow: hidden;
}

.sideleft .CE .cartouche-photo img{
  width: 100%;
  height: 100%;
  object-fit: cover;        /* recadrage propre sans déformation */
  display: block;
}

.sideleft .CE .cartouche-infos{
  width: 100%;
  flex: 0 0 auto;           /* s’affiche en dessous, largeur pleine */
  gap: 6px;
}

.sideleft .CE .cartouche-infos .titre{
  font-size: 0.95rem;
  line-height: 1.2;
  margin: 2px 0 4px;
}

.sideleft .CE .meta{
  font-size: .86em;
}

.sideleft .CE .desc{
  font-size: .86em;
  margin-top: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sideleft .CE .cartouche-cta .GN-btn{
  padding: 6px 10px;
  font-size: 0.85rem;
}

/* petits ajustements de badges en mode vignette */
.sideleft .CE .cartouche-organisateur{
  top: 8px;
  right: 8px;
}
.sideleft .CE .cartouche-ami{
  top: 40px;
}
/* =========================================================
   OVERRIDES — Colonne droite (sideright / notifications)
   Image carrée au-dessus + texte en dessous
   ========================================================= */
.GN-side--right .CE .cartouche-main,
.GN-notifList .CE .cartouche-main{
  flex-direction: column;   /* empile */
  gap: 8px;
}

.GN-side--right .CE .cartouche-photo,
.GN-notifList .CE .cartouche-photo{
  width: 100%;
  max-width: none;          /* supprime la limite 160px */
  flex: 0 0 auto;
  aspect-ratio: 1 / 1;      /* carré */
  border-radius: 10px;
  overflow: hidden;
}

.GN-side--right .CE .cartouche-photo img,
.GN-notifList .CE .cartouche-photo img{
  width: 100%;
  height: 100%;
  object-fit: cover;        /* recadrage propre sans déformation */
  display: block;
}

.GN-side--right .CE .cartouche-infos,
.GN-notifList .CE .cartouche-infos{
  width: 100%;
  flex: 0 0 auto;           /* sous l’image, pleine largeur */
  gap: 6px;
}

/* compacité typographique pour la colonne droite */
.GN-side--right .CE .cartouche-infos .titre,
.GN-notifList .CE .cartouche-infos .titre{
  font-size: 0.95rem;
  line-height: 1.2;
  margin: 2px 0 4px;
}
.GN-side--right .CE .meta,
.GN-notifList .CE .meta{
  font-size: .86em;
}
.GN-side--right .CE .desc,
.GN-notifList .CE .desc{
  font-size: .86em;
  margin-top: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* CTA plus discret en notif */
.GN-side--right .CE .cartouche-cta .GN-btn,
.GN-notifList .CE .cartouche-cta .GN-btn{
  padding: 6px 10px;
  font-size: 0.85rem;
}

/* Badges : positions safe avec la nouvelle vignette */
.GN-side--right .CE .cartouche-organisateur,
.GN-notifList .CE .cartouche-organisateur{
  top: 8px;
  right: 8px;
}
.GN-side--right .CE .cartouche-ami,
.GN-notifList .CE .cartouche-ami{
  top: 40px; /* sous INSCRIT si présent */
}