/* =================== Card (réutilisable) ============== */

.ai-card {
  min-height: calc(90dvh - var(--nav-h));
  scroll-snap-align: start;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: rgba(20, 20, 28, 0.95);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-radius: 35px; /*le coins */
  margin: 50px; /* la taille dans chaque coté */
  box-shadow: 0 20px 40px rgba(0,0,0,0.25);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
   scroll-margin-top: var(--nav-h); /*scrole directement ai sous le yeux*/ 
}

.ai-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 60px rgba(0,0,0,0.35);
}


.ai-vibe {
  opacity: 0.8;
  margin-top: 8px;
}

.ai-actions {
  display: flex;
  gap: 16px;
}

.ai-btn {
  cursor: pointer;
  padding: 10px 14px;
  border-radius: 12px;
  background: #222;
  -webkit-user-select : none;
  user-select: none;
  transition: transform 0.15s ease;
}

.ai-btn:active {
  transform: scale(0.95);
}

.tag-green { color: var(--apt-green); }
.tag-amber { color: var(--apt-amber); }
.tag-red { color: var(--apt-red); }

.ai-card:hover .ai-badge {
  transform: scale(1.15) translateY(-2px);
  background: rgba(46,204,113,0.25);
}

@keyframes floatBadge {
  0% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
  100% { transform: translateY(0); }
}

/* Ombres */ 
.ai-card {
  box-shadow: 0 16px 32px rgba(0,0,0,0.28);
}

.ai-card:hover {
  box-shadow: 0 24px 48px rgba(0,0,0,0.35);
}
.ai-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
}


/*======= TITRE ==== */
.ai-header {
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;

  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.2;
}

.ai-header {
  text-shadow: 0 6px 20px rgba(0,0,0,0.45);
}


.ai-card:hover .ai-header {
  letter-spacing: 0.04em;
}


.ai-header {
  text-transform: uppercase;
}

.ai-header {
  background: linear-gradient(
    90deg,
    #6cf2c2,
    #4cc9f0,
    #9b5de5,
    #f15bb5
  
  );
  background-size: 200% auto;

  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.ai-card:hover .ai-header {
  background-position: 100% center;
}

.ai-header {
  filter: drop-shadow(0 6px 18px rgba(0,0,0,0.5));
}


/* =======================  LOGO FIX   ========================= */ 

.ai-logo img {
  border-radius: 50%;
  transition: transform 0.2s ease;
}

.ai-card:hover .ai-logo img {
  transform: scale(1.15) rotate(4deg);
}

.ai-top {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

.ai-info {
  flex: 1;
}

.ai-logo {
  width: 90px;              /* ajuste si tu veux plus grand */
  height: 90px;
  border-radius: 50%;
  overflow: hidden;         /* OBLIGATOIRE */
  border: 3px solid rgba(255,255,255,0.1);
  
  display: flex;
  align-items: center;
  justify-content: center;

  flex-shrink: 0;
}

.ai-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;        /* remplit complètement */
}



.ai-card:hover .ai-logo img {
  transform: scale(1.18);
  filter:
    drop-shadow(0 18px 36px rgba(0,0,0,0.75))
    saturate(1.25)
    contrast(1.15);
}

.ai-card:hover {
  transform: translateY(-6px) scale(1.015);
}

.ai-card:active {
  transform: scale(0.98);
}
/* =================  carde image   ==========================*/
/* Container fixe pour l'image */
.ai-center {
  width: 100%;
  max-height: 250px;   /* limite la hauteur du container */
  height: 250px;       /* hauteur fixe pour uniformité */
  border-radius: 20px;
  overflow: hidden;
  flex: 1;   
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
/* L'image à l'intérieur */
.ai-center img {
  width: 100%;
  height: 100%;
  object-fit: cover;  /* ne déforme pas l'image */
  border-radius: 20px;
  transition: transform 0.35s ease, filter 0.35s ease;
}


/* =================   Punchli    ==========================*/
.ai-punchline {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.4;
  max-width: 520px;

    background: linear-gradient( 120deg,#6cf2c2,
    #4cc9f0,
    #9b5de5,
    #f15bb5
    );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 8px 24px rgba(0,0,0,0.6);

  animation: punchFadeIn 0.6s ease-out both;
  transition: transform 0.2s ease;
}

.ai-card:hover .ai-punchline {
  transform: scale(1.08) translateY(-2px);
}

/* glow subtil */
@keyframes punchGlow {
  0% { text-shadow: 0 4px 12px rgba(108,242,194,0.5); }
  50% { text-shadow: 0 6px 18px rgba(76,201,240,0.6); }
  100% { text-shadow: 0 4px 12px rgba(155,93,229,0.5); }
}

/*-----------  FLASH  -------  

.punchlight {
  display: inline-block;
  margin-left: 0.3em;
  font-size: 1.4em;   
  background: linear-gradient(
    120deg,
    #6cf2c2,
    #4cc9f0,
    #9b5de5,
    #f15bb5
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 6px 16px rgba(0,0,0,0.5);
  
  animation: punchlightGlow 1.2s ease-in-out infinite alternate,
             punchlightBounce 2s ease-in-out infinite;
}

@keyframes punchlightGlow {
  0%   { filter: drop-shadow(0 4px 12px rgba(108,242,194,0.5)); }
  50%  { filter: drop-shadow(0 8px 24px rgba(76,201,240,0.7)); }
  100% { filter: drop-shadow(0 4px 12px rgba(155,93,229,0.5)); }
}

*/

/* =============== Like button modernisé ====================  */
.like-btn {
  position: relative;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  
 /* on supprime le fond et la bordure */
  background: none;
  border: none;
  padding: 0;
  box-shadow: none;
  transition: transform 0.2s ease, color 0.2s ease;
}

.like-btn:active {
  transform: scale(0.95);
}

.like-btn.liked {
  color: #ff4d6d;
}


.like-float {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.2rem;
  pointer-events: none;
}

@keyframes likePop {
  0% { transform: scale(1) translateY(0); opacity: 1; }
  50% { transform: scale(1.5) translateY(-20px); opacity: 1; }
  100% { transform: scale(1) translateY(0); opacity: 0.8; }
}

.like-btn.liked {
  color: #ff4d6d;
  animation: likePop 0.5s ease forwards;
}

.like-btn svg.icon-heart {
  width: 24px;
  height: 24px;
  
  transition: transform 0.2s ease, stroke 0.2s ease;
}

.like-btn.liked svg.icon-heart {
  stroke: #ff4d6d;
  transform: scale(1.5);
}


.ai-card {
  cursor: pointer;
}

.like-btn {
  cursor: pointer;
}



/* =============== signals badges ============== */

.ai-badges {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;

  justify-content: center;   /* ⬅️ centre horizontalement */
  align-items: center;
  text-align: center;
  position: relative;
  margin-top: 8px;
}

.ai-badges::before {
  content: "";
  position: absolute;
  inset: -8px; /* un peu plus resserré */
  
  /* gradient doux comme le titre, léger et translucide */
  background: radial-gradient(
    circle,
    rgba(108, 242, 194, 0.08),
    rgba(76, 201, 240, 0.06),
    rgba(155, 93, 229, 0.04),
    transparent 80%
  );

  z-index: -1;
  border-radius: 999px; /* arrondi pour rester subtil */
}


.ai-badge {
  background: rgba(255,255,255,0.08);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  
}

.ai-badge {
  
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 600;
  white-space: nowrap;
  color: #fff;

  animation: floatBadge 3s ease-in-out infinite alternate;
  transition: transform 0.25s ease, background 0.25s ease;
}






/*===============  CARTES PC FIRSt ======================  */
#feed-cards {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 20px;
}

/*============= RESPONSIVE  PC / Desktop ============== */
@media (min-width: 1024px) {

 #feed-cards {
    flex-direction: row;        /* ✅ cartes horizontales */
    flex-wrap: wrap;            /* plusieurs lignes si besoin */
    justify-content: center;    /* centre le tout */
    align-items: flex-start;    /* cartes alignées en haut */
    gap: 30px;                  /* espace entre les cartes */
    
  }

  .ai-card {
    min-height: 413px;          /* même hauteur pour toutes, tu peux ajuster */
    max-width: 370px;           /* largeur fixe pour toutes les cartes */
    height: auto;               /* laisse le contenu décider si c’est plus grand */
    scroll-snap-align: none;    /* désactive snap sur PC */
    
  }
  .ai-center {
    padding: 20px 0;
    transform: none;
  }

  .ai-punchline {
    font-size: 1.4rem;             /* plus sage sur PC */
    max-width: 100%;
  }

}


@media (hover: hover) and (min-width: 1024px) {
  .ai-card:hover {
    transform: translateY(-3px);
  }

  .ai-card:hover .ai-punchline {
    transform: scale(1.03);
  }
}




/*======== L'EFFET QUI POUSSE A CLIQUER ======= */

@media (hover: hover) {
  .ai-card {
    animation: cardBreath 6s ease-in-out infinite;
  }

  .ai-card:hover {
    animation: none;
  }
}

@keyframes cardBreath {
  0% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
  100% { transform: translateY(0); }
}





/* ================  RESPONSIVE MOBILE ================ */

@media (max-width: 414px) {
  /* Cards prennent presque toute la largeur */
  .ai-card {
    margin: 20px;
    width: calc(100% - 40px);
  }

  /* Logo plus petit pour mobile */
  .ai-logo {
    width: 90px;
    height: 90px;
  }

  .ai-logo img {
    width: 100%;
    height: 100%;
  }

  /* Punchline plus petite et centrée */
  .ai-punchline {
    font-size: 1.2rem;
    max-width: 100%;
    text-align: center;
  }

  /* Badges flex-wrap pour éviter chevauchement */
  .ai-badges {
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
  }

  .ai-badge {
    font-size: 0.85rem;
    padding: 4px 10px;
  }

  .ai-center {
    width: 100%;
    max-height: 40dvh; /* comme sponsor card */
    border-radius: 20px;
    overflow: hidden;
    
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
  }

  .ai-center img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
    transition: transform 0.35s ease, filter 0.35s ease;
  }
}

/* On s'assure que la card peut accueillir des éléments absolus */
.ai-card {
  position: relative;
  overflow: hidden;
}


/* =====================================================
   ::before = Bordure fine + label "Vérifié"
===================================================== */

.ai-card::before {
  content: "Vérifié";
  position: absolute;
  inset: 0;
  border-radius: inherit;

  /* Bordure fine existante conservée */
  border: 1px solid rgba(255,255,255,0.05);

  pointer-events: none;

  /* Placement texte */
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  padding: 14px 18px;

  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;

  background: linear-gradient(
    120deg,
    #6cf2c2,
    #4cc9f0,
    #9b5de5,
    #f15bb5
  );

  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;

  opacity: 0.65;
}


/* =====================================================
   ::after = Halo punchline subtil
===================================================== */

.ai-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;

  background: radial-gradient(
    circle at top right,
    rgba(108, 242, 194, 0.08),
    rgba(76, 201, 240, 0.06),
    rgba(155, 93, 229, 0.05),
    transparent 65%
  );
}


/* =====================================================
   Animation respiration verified


@media (hover: hover) {
  .ai-card {
    animation: verifiedGlow 6s ease-in-out infinite;
  }

  .ai-card:hover {
    animation: none;
  }
}

@keyframes verifiedGlow {
  0%   { box-shadow: 0 16px 32px rgba(0,0,0,0.28); }
  50%  { box-shadow: 0 20px 40px rgba(108,242,194,0.15); }
  100% { box-shadow: 0 16px 32px rgba(0,0,0,0.28); }
}
===================================================== */

/* ===================== MEDIA CENTER ====================== */
.ai-center {
  width: 100%;
  max-height: 250px; /* comme sponsor card */
  border-radius: 20px;
  overflow: hidden;
  

  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.ai-center img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 20px;
  transition: transform 0.35s ease, filter 0.35s ease;
  
}

.ai-card:hover .ai-center img {
  transform: scale(1.05);
  
}



.ai-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
  padding: 0 8px;
}

.clicks-display {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.95rem;
  font-weight: 600;
  color: rgba(255,255,255,0.75);
  -webkit-user-select: none;
  user-select: none;

}

.clicks-display i.ph {
  font-size: 1.2rem;
  color: #6cf2c2; /* couleur flashy */
}

/* afficher au hover */
.clicks-display:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(-4px);
}