@import url('https://fonts.googleapis.com/css2?family=Urbanist:wght@400;600;800&display=swap');

:root {
  --vh: 1vh;        /* fallback */
  --kb: 0px;        /* hauteur clavier dynamique */
  --input-h: 64px;  /* hauteur de #input-area, mise à jour en JS */
}

html, body {
  height: 100%;
  overscroll-behavior: contain;
}

* 

{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Style du corps de la page */
body {
  font-family: 'Urbanist', sans-serif; /* Plus sexy et lisible en mode sombre [cite : 4.2] */
  background-color: #0f0f1a; /* Un ton plus profond [cite : 1.2] */
  color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: 100vh;
  margin: 0;
  padding-top: 30px; /* espace pour laisser la place à la bannière */
  position: relative;
  overflow-x: hidden;
}

body::before {
    content: "";
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: url("https://grainy-gradients.vercel.app/noise.svg");
    opacity: 0.05; /* Très léger */
    pointer-events: none;
    z-index: 9999;
}

/* Centrer le header en haut de la page */
.header {
  width: 100%;
  text-align: center;
  margin-bottom: 0px;
  margin-top:20px;
}

/* Masquer le header lorsque le chat est actif */
.header.hidden {
  display: none;
}

/* Style du conteneur principal */
.container {
  background-color: #0f0f1a;
  padding: 5px;
  border-radius: 8px;
  max-width: 700px!important;
  text-align: center;
  width: 100%;
  margin: 0 auto;
}



/* Mode plein écran pour le conteneur */
.container.fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100vh;
  max-width: none;
  padding: 0;
}

/* Style du titre */
h1 {
  color: white;
  font-size: 24px;
  margin-bottom: 10px;
}

/* Style du paragraphe */
p {
  font-size: 17px;
  color: #ffffff;
  margin-bottom: 0px;
}

/* Style pour la section des options de chat */
.chat-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 5px; /* Par défaut sur mobile */
}

@media (min-width: 768px) {
  .chat-options {
    gap: 15px; /* Plus d’espace sur desktop */
  }
}

.chat-card {
  position: relative;
background: rgba(57, 57, 86, 0.4); /* Plus transparent [cite : 3.3] */
  border-radius: 10px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  cursor: pointer;
  height: 100%;
  backdrop-filter: blur(12px); /* Effet verre dépoli [cite : 3.6] */
  border: 1px solid rgba(255, 255, 255, 0.08); /* Bordure fine pour la définition [cite : 3.1] */
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.chat-card:hover {
    transform: translateY(-8px) scale(1.02); /* Soulèvement plus dynamique [cite : 4.1, 4.6] */
    background: rgba(57, 57, 86, 0.6);
    border-color: #dd4d9d; /* La bordure s'allume au survol */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5), 0 0 15px rgba(221, 77, 157, 0.3); /* Glow rose [cite : 4.6] */
}

.chat-card img {
  width: 100%;
  max-width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.card-content {
  position: absolute;
  bottom: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0.6);
  color: #ffffff;
  text-align: center;
}

.card-content h3 {
    font-size: 13px;
    color: #dd4d9d;
    margin-bottom: 3px;
    margin-top: 3px;
}

.card-content p {
    font-size: 12px;
    color: #b0b0c3;
    margin-bottom:3px;
}

/* Zone de chat plein écran et responsive au clavier */
#chat-box {
  position: fixed;
  inset: 0;
  display: none;
  flex-direction: column;
  min-height: 100dvh;
  height: calc(var(--vh, 1vh) * 100);
  overflow: hidden; /* OK */
  background: transparent;
  border-radius: 10px;
  box-shadow: 0 0 20px rgba(221,77,157,.08);
  z-index: 1;
}






/* En-tête du chat */
#chat-header {
  display: flex;
  align-items: center;
  padding-bottom: 10px;
  padding-top: 10px;
  border-bottom: 1px solid #444;
  margin-bottom: 10px;
      background: linear-gradient(to right, rgba(43, 43, 61, 0.8), rgba(30, 30, 47, 0.4));
}

#back-btn {
  background: none;
  border: none;
  color: #ffffff;
  font-size: 1.2em;
  cursor: pointer;
  margin-right: 10px;
  padding: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  transition: background-color 0.3s;
  margin-left: 10px;
}

#back-btn:hover {
  background-color: #444;
}

.chat-profile-pic {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid transparent;
  background: linear-gradient(135deg, #dd4d9d, #8a2be2);
  padding: 2px;
  object-fit: cover;
  box-shadow: 0 0 10px rgba(221, 77, 157, 0.6);
  margin-right: 10px;
}

video.chat-profile-pic {
  object-fit: cover;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid transparent;
  background: linear-gradient(135deg, #dd4d9d, #8a2be2);
  padding: 2px;
  box-shadow: 0 0 10px rgba(221, 77, 157, 0.6);
  margin-right: 10px;
}


#chat-name {
  font-size: 1.3em;
  font-weight: bold;
  background: white;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-left: 5px;
}


/* Liste des messages = zone scrollable */
#messages {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 10px 10px 14px;
  margin-bottom: 0;
  /* 👇 réserve la place pour la barre + clavier + quick replies */
  padding-bottom: calc(var(--input-h) + var(--kb) + env(safe-area-inset-bottom) + 35px);
  box-shadow: inset 0 0 8px rgba(255,255,255,0.02);
}






.user-message, .bot-message {
  max-width: 70%;
  padding: 10px;
  margin-bottom: 12px;
  border-radius: 20px;
  font-size: 0.9em;
  display: inline-block;
  word-wrap: break-word;
}

.user-message {
  background: linear-gradient(135deg, #dd4d9d, #8a2be2);
  color: #ffffff;
  align-self: flex-end;
  text-align: right;
  box-shadow: 0 0 10px rgba(221, 77, 157, 0.3);
}

.bot-message {
  background: linear-gradient(to bottom right, #2f2f4f, #3d2d5a);
  color: #ffffff;
  align-self: flex-start;
  text-align: left;
  margin-right: auto;
  border-radius: 20px;
  padding: 12px 16px;
  max-width: 75%;
  font-size: 0.9em;
  position: relative;
  
  transition: box-shadow 0.3s ease;
}




/* Barre d’entrée, collée en bas du chat mais *dans* le flux */
#input-area {
  position: fixed;
  left: 0;
  right: 0;
  bottom: var(--kb, 0px);            /* 👈 monte au-dessus du clavier */
  width: 100%;
  background-color: rgba(46, 46, 68, 0.85);
  backdrop-filter: blur(8px);
  padding: 10px;
  display: flex;
  gap: 10px;
  align-items: center;
  z-index: 1000;
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-bottom: max(10px, env(safe-area-inset-bottom));
}



#user-input {
  flex: 1;
  padding: 10px;
  border-radius: 20px;
  border: 1px solid #dd4d9d;
  background-color: #1e1e2f;
  color: #ffffff;
  box-shadow: 0 0 8px rgba(221, 77, 157, 0.15);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  font-size: 16px; /* ✅ anti zoom iOS */
  -webkit-text-size-adjust: 100%;
}


#user-input:focus {
  border-color: #ff78b0;
  outline: none;
  box-shadow: 0 0 12px rgba(255, 120, 176, 0.6);
}

#send-btn {
  background: linear-gradient(to right, #dd4d9d, #8a2be2);
  border: none;
  padding: 10px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  color: #ffffff;
  font-size: 1.5em;
  cursor: pointer;
  box-shadow: 0 0 8px rgba(221, 77, 157, 0.3);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#send-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 0 14px rgba(255, 120, 176, 0.5);
}


/* Styles pour l'image générée */
.generated-image {
  width: 100%;
  height: auto;
  max-width: 300px;
  border-radius: 8px;
  margin-top: 10px;
  border: 2px solid #444;
}

/* Style de l'indicateur de saisie */
#typing-indicator {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 10px;
  margin: 10px 0;
}

#typing-indicator.hidden {
  display: none; /* Masquer par défaut */
}

#typing-indicator .dot {
  width: 8px;
  height: 8px;
  background-color: #dd4d9d;
  border-radius: 50%;
  animation: typingAnimation 1.5s infinite;
}

#typing-indicator .dot:nth-child(1) {
  animation-delay: 0s;
}

#typing-indicator .dot:nth-child(2) {
  animation-delay: 0.2s;
}

#typing-indicator .dot:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes typingAnimation {
  0% {
    opacity: 0.3;
    transform: scale(0.8);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0.3;
    transform: scale(0.8);
  }
}



/* Responsive design for larger screens */
@media (min-width: 600px) {
  .chat-options {
      grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 768px) {
  .chat-options {
      grid-template-columns: repeat(2, 1fr);
  }
}

.audio-button {
  background: none;
  border: none;
  color: #dd4d9d;
  font-size: 1.2em;
  cursor: pointer;
  margin-left: 10px;
}

.audio-button:hover {
  color: #ff5f7a;
}

.level-up-message {
  font-size: 0.9em;
  color: #888;
  text-align: center;
  margin: 8px 0;
}

/* Style pour la pop-up "Level up" */
.popup {
  position: fixed;
  top: 20px;
  right: 20px;
  padding: 10px 20px;
  color: white;
  font-weight: bold;
  border-radius: 5px;
  z-index: 1000;
  transition: opacity 0.5s ease;
  opacity: 0.9;
}

.level-update-popup {
  position: fixed;
  top: 20px;
  right: 20px;
  padding: 10px 20px;
  color: white;
  font-weight: bold;
  border-radius: 5px;
  z-index: 1000;
  transition: opacity 0.5s ease;
}

@keyframes fadein {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeout {
  from { opacity: 1; }
  to { opacity: 0; }
}
/* Style pour le conteneur modal */
.modal {
  display: none; /* Caché par défaut */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8); /* Fond semi-transparent */
  justify-content: center;
  align-items: center;
  z-index: 1000; /* Pour qu'il soit au-dessus de tout */
  overflow-y: auto; /* Permet le scroll si besoin */
}

/* Limite la hauteur pour éviter que le contenu dépasse l'écran */
/* Conteneur de la fiche profil amélioré */
.profile-content {
  background: linear-gradient(145deg, #2b2b3d, #1e1e2f);
  padding: 0; /* On gère le padding à l'intérieur pour que l'image colle en haut */
  border-radius: 20px; /* Plus arrondi pour un look moderne */
  text-align: center;
  color: #ffffff;
  max-width: 400px;
  width: 92%;
  max-height: 85vh;
  overflow-y: auto;
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
  -ms-overflow-style: none;  /* IE et Edge */
  scrollbar-width: none;     /* Firefox */
}

/* Pour Chrome, Safari et Opera */
.profile-content::-webkit-scrollbar {
  display: none;
}

/* Style spécifique pour le contenu textuel sous l'image */
.profile-details {
  padding: 30px 25px; /* 30px en haut/bas, 25px sur les côtés */
  text-align: left; /* Aligné à gauche pour une meilleure lecture des infos */
}

/* On s'assure que la vidéo/image occupe bien le haut sans bordures blanches */
.profile-content video, 
.profile-content img {
  width: 100%;
  border-radius: 20px 20px 0 0; /* Arrondis seulement en haut */
  margin-bottom: 0;
  display: block;
  object-fit: cover;
}

/* Le nom en dégradé */
#profile-name {
  font-size: 2rem;
  margin-top: 15px;
  margin-bottom: 10px;
  font-weight: 800;
  background: linear-gradient(to right, #dd4d9d, #8a2be2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-align: center;
}

/* Style des paragraphes dans la modal */
.profile-content p {
  font-size: 0.95rem;
  line-height: 1.8;   /* Augmente l'espace entre les lignes (interlignage) */
  margin-bottom: 20px; /* Espace entre les blocs Taille / Profil / Situation */
  color: #d1d1e0;
}

/* Mise en avant des labels (ex: Taille, Passions) */
.profile-content p strong {
  color: #dd4d9d; /* Rose pour les titres de section */
  display: block; /* Met le titre au dessus de la valeur pour plus de clarté */
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 1px;
 margin-bottom: 5px; /* Espace entre "SITUATION :" et le texte descriptif */
}

/* Ajustements sur mobile pour maximiser l'affichage */
@media (max-width: 768px) {
  .profile-content {
    max-width: 95%;
    max-height: 85vh; /* Augmente un peu la hauteur sur mobile */
    padding: 15px;
  }
}

.profile-content img {
  max-width: 100%;
  border-radius: 10px;
  margin-bottom: 15px;
}

/* Style du menu */

/* ==== Nouveau menu  ==== */


.menu {
  position: fixed;
  display: flex;

  top: 0;
  left: 0;
  width: 240px;
  height: 100vh;
  background-color: #191a2a;
  box-shadow: 2px 0 12px rgba(0, 0, 0, 0.4);
  padding: 20px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
   transform: translateX(-100%); /* 💡 menu caché au départ */
  transition: transform 0.4s cubic-bezier(0.77, 0, 0.175, 1); /* 💃 glissement sexy */
   background: rgba(25, 26, 42, 0.5); /* ✅ fond sombre semi-transparent */
  backdrop-filter: blur(12px);       /* ✅ effet de flou sexy */
  
  
}

.menu.open {
  transform: translateX(0);
  z-index:3000;
}

.menu-toggle {
  position: fixed;
  top: 15px;
  left: 15px;
  z-index: 100;
  background: none;
  border: none;
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

.hamburger {
  display: block;
  width: 25px;
  height: 3px;
  background-color: #ffffff;
  border-radius: 2px;
  position: relative;
}
.hamburger::before,
.hamburger::after {
  content: "";
  width: 25px;
  height: 3px;
  background-color: #ffffff;
  border-radius: 2px;
  position: absolute;
  left: 0;
  transition: transform 0.3s ease;
}
.hamburger::before {
  top: -8px;
}
.hamburger::after {
  top: 8px;
}

.menu-close {
  position: absolute;
  top: 15px;
  left: 15px;
  background: none;
  border: none;
  color: white;
  font-size: 18px;
  padding: 8px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 3001;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  transition: background 0.3s;
}

.menu-close:hover {
 background: none; 
}

.menu.open + #menu-toggle {
  display: none;
}


.menu-items {
  list-style: none;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  width: 100%;
  margin-top: 40px;
}

.menu-items li {
  width: 100%;
}

.menu-items li a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0px 0px 17px;
  color: white;
  text-decoration: none;
  font-size: 16px;
  border-radius: 12px;
  transition: background-color 0.3s ease;
}
.menu-items li a:hover {
  
}

.menu-items li a i {
  font-size: 18px;
  min-width: 20px;
}

/* Bannière dans le menu */
#menu-banner-container {
  margin-top: auto;
  padding: 0px;
  width: 100%;
}

.menu-banner-image {
  width: 93%;
  border-radius: 12px;
  display: block;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}



.hamburger {
  display: block;
  width: 25px;
  height: 3px;
  background-color: #ffffff;
  border-radius: 2px;
  position: relative;
}

.hamburger::before,
.hamburger::after {
  content: "";
  width: 25px;
  height: 3px;
  background-color: #ffffff;
  border-radius: 2px;
  position: absolute;
  left: 0;
  transition: transform 0.3s ease;
}

.hamburger::before {
  top: -8px;
}

.hamburger::after {
  top: 8px;
}

/* Masquer le menu par défaut sur mobile */


.menu-items.visible {
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: absolute;
  top: 50px;
  left: 0;
  right: 0;
  padding: 10px 0;
}


/* Adaptation pour mobile */
@media (max-width: 768px) {
  .menu-items {
    
    flex-direction: column;
  }

  .menu-toggle {
    display: block;
  }
}
/*Adaptation hamburger pour desktop*/

@media (min-width: 768px) {
  .menu-items {
    flex-direction: column; /* Conserve la disposition en colonne */
  }

  .menu-toggle {
    display: block; /* Le bouton hamburger reste visible */
  }
}


.hidden {
  display: none!important;
}

/* Style pour le bouton de fermeture avec rond blanc */
.close-modal-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: #ffffff; /* Fond blanc pour le rond */
  border: none;
  font-size: 18px; /* Taille de la croix */
  font-weight: bold;
  color: #000000; /* Couleur noire pour la croix */
  cursor: pointer;
  width: 30px; /* Largeur du bouton */
  height: 30px; /* Hauteur du bouton */
  border-radius: 50%; /* Transforme en cercle */
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Ajout d'une ombre légère */
  transition: background-color 0.3s ease, color 0.3s ease;
}

.close-modal-btn:hover {
  background-color: #dd4d9d; /* Fond rose au survol */
  color: #ffffff; /* Couleur blanche pour la croix au survol */
}
#signup-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #2b2b3d;
  padding: 20px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  border-radius: 8px;
  color: white;
}

.blurred-image {
  width: 100%; /* Même largeur que les images non floutées */
  height: auto; /* Respecte le ratio de l'image */
  max-width: 300px; /* Taille maximale adaptée */
  border-radius: 8px; /* Coins arrondis comme pour les autres images */
  margin-top: 10px; /* Espacement au-dessus */
  border: 2px solid #444; /* Bordure pour la cohérence */
  filter: blur(20px); /* Flou renforcé */
  pointer-events: none; /* Empêche les interactions */
  transition: filter 0.9s ease; /* Transition fluide pour déflouter */
}

.image-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  position: relative; /* ✅ Permet de positionner le bouton par rapport à l'image */
}

.unlock-button {
  position: absolute; /* ✅ Positionne le bouton au-dessus de l'image */
  top: 50%; 
  left: 50%;
  transform: translate(-50%, -50%); /* ✅ Centre parfaitement le bouton */
  background-color: #dd4d9d;
  color: white;
  border: none;
  padding: 10px 15px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 14px;
  font-weight: bold;
  transition: background 0.3s ease;
}

.unlock-button:hover {
  background-color: #c2185b;
}



.clear-image {
  width: 100%;
  height: auto;
  max-width: 300px; /* Taille maximale de l'image */
  border-radius: 8px;
  margin-top: 10px;
  border: 2px solid #444;
}

/* Style général pour la page Premium */
.premium-page {
  text-align: center;
  padding: 20px;
}

.p-title {
  font-size: 2em;
  background: linear-gradient(to right, #dd4d9d, #8a2be2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: bold;
  margin-bottom: 20px;
  text-align: center;
}


.p-description {
  font-size: 1.1em;
  color: #ffffff;
  margin-bottom: 30px;
  padding: 0 10px; /* Ajout de padding pour éviter le débordement sur mobile */
text-align: left;
}

/* Section des avantages */
.premium-benefits {
  margin-top: 40px;
      margin-right: 20px;
    margin-left: 20px;
}

.benefit-list {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: left;
  display: inline-block;
  margin-left:20px;
  margin-right:20px;
}

.benefit-list li {
  font-size: 1.1em;
  color: #d1d1e0;
  margin: 10px 0;
  display: flex;
  align-items: center;
}

.benefit-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(145deg, #ff4b9b, #8a2be2);
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.2);
  display: inline-block;
  margin-right: 10px;
  position: relative;
}


.benefit-icon::before {
  content: '✔';
  color: #ffffff;
  font-size: 14px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Style général de la section des abonnements */
.pricing-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 400px;
  margin: 20px auto;
}

/* Style de chaque plan */
.plan {
  background: #2c2135; /* Fond foncé pour contraste */
  border-radius: 12px;
  padding: 20px;
  width: 100%;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
  text-align: center;
  border: 2px solid #b73787; /* Ajout d'une bordure colorée */
  position: relative;
}

/* Titre du plan */
.plan h3 {
  font-size: 1.4rem;
  color: #ff9cef;
  margin-bottom: 5px;
}

/* Prix et durée */
.plan .price {
  font-size: 1.3rem;
  font-weight: bold;
  color: white;
  margin-bottom: 5px;
}

.plan .description {
  font-size: 0.95rem;
  color: #d9d9d9;
  margin-bottom: 10px;
}

/* Bouton d'achat */
.checkout-button {
  background-color: #ff4b9b;
  color: white;
  border: none;
  padding: 12px 15px;
  width: 100%;
  font-size: 1rem;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.3s;
      max-width: 200px;
}

.checkout-button:hover {
  background-color: #ff1e7c;
}

/* Badge promo */
.promo {
  position: absolute;
  top: -10px;
  right: -10px;
  background-color: #ff4b4b;
  color: white;
  font-size: 0.8rem;
  padding: 5px 10px;
  border-radius: 5px;
  font-weight: bold;
}

.promo-green {
  position: absolute;
  top: -10px;
  right: -10px;
  background-color: #2ed839;
  color: white;
  font-size: 0.8rem;
  padding: 5px 10px;
  border-radius: 5px;
  font-weight: bold;
}

/* Meilleur plan mis en avant */
.plan.popular {
  border: 3px solid #ff4b9b;
  transform: scale(1.05);
}

/* Adaptation mobile */
@media (max-width: 480px) {
  .pricing-section {
      width: 90%;
  }
  
  .plan {
      width: 100%;
  }
}


/* Boutons classiques*/
/* Accordéon pour le formulaire de changement de mot de passe */
/* Accordéon pour le formulaire de changement de mot de passe */
#password-form-container {
  max-height: 0; /* Masqué par défaut */
  overflow: hidden; /* Cache le contenu dépassant */
  transition: max-height 0.4s ease; /* Transition pour un effet fluide */
}

#password-form-container.visible {
  max-height: 300px; /* Hauteur suffisante pour afficher le formulaire */
}

/* Boutons stylisés */
.button {
  background-color: #dd4d9d;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1em;
  transition: background-color 0.3s ease;
}

.button:hover {
  background-color: #c2185b;
}

/* Boutons de checkout */
.checkout-button {
  background-color: #dd4d9d;
  color: #ffffff;
  padding: 10px 20px;
  font-size: 1em;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.checkout-button:hover {
  background-color: #c2185b;
}

/* Responsive Design */
@media (max-width: 768px) {
  .premium-description {
    font-size: 1em; /* Réduit la taille de la description */
  }

  .pricing-card {
    width: 100%; /* Les cartes prennent toute la largeur */
  }
}

@media (max-width: 480px) {
  .premium-title {
    font-size: 1.8em; /* Réduit la taille du titre sur mobile */
  }

  .premium-description {
    font-size: 0.9em; /* Réduit encore la taille sur petit écran */
  }

  .checkout-button {
    font-size: 0.9em; /* Réduit la taille des boutons */
    padding: 8px 16px;
  }
}

/* Section des icônes de sécurité */
.security-section {
  display: flex;
  justify-content: center;
  gap: 40px;
  padding: 20px 0;
  margin: 0 20px; /* Ajoute une marge de 20px sur les côtés */
  
}

.security-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #ffffff; /* blanc */
  font-size: 1em;
  text-align: center;
  opacity: 0.85; /* plus doux */
}

.security-item i {
  font-size: 36px;
  margin-bottom: 10px;
  background: linear-gradient(to right, #8a2be2, #dd4d9d);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 6px rgba(221, 77, 157, 0.6);
  transition: transform 0.3s ease;
}


.security-item p {
  color: #ffffff;
  font-size: 0.95em;
  font-weight: 500;
}

/* Section des garanties */
.guarantees-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
  margin: 0 20px;
  text-align: left;
}

.guarantee-item {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #16ca00; /* Couleur verte */
}

.shield-icon {
  position: relative;
  width: 15px;
  height: 15px; /* Taille réduite du bouclier */
}

.shield-icon i {
  font-size: 15px; /* Taille réduite de l'icône bouclier */
  color: #16ca00; /* Couleur verte */
}

.check-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 8px; /* Taille ajustée du check */
  color: #ffffff; /* Check blanc */
  font-weight: bold;
}

.guarantee-item p {
  margin: 0;
  font-size: 0.9em;
  color: #d1d1e0; /* Couleur du texte */
}
.forgot-password-link {
  font-size: 0.9em;
  color: #dd4d9d;
  text-decoration: none;
  cursor: pointer;
}

.forgot-password-link:hover {
  text-decoration: underline;
}

#unsubscribe-container {
  margin-top: 20px;
  padding: 15px;
  background-color: #393956;
  color: white;
  border-radius: 5px;
  text-align: center;
}

#unsubscribe-container .button {
  margin-top: 10px;
  background-color: #dd4d9d;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1em;
}

#unsubscribe-container .button:hover {
  background-color: #c2185b;
}

/* Section Profil */

/* Conteneur de la section profil */
.profile-section {
  margin: 20px 0;
  padding: 15px;
  background-color: #393956; /* Correspond à vos cartes actuelles */
  border-radius: 8px; /* Coins arrondis */
}
.profile-sectionv2 {
  margin: 20px 0;
  padding: 15px;
  background-color: #393956; /* Correspond à vos cartes actuelles */
  border-radius: 8px; /* Coins arrondis */
  
}

/* Titre des sections */
.profile-section h2 {
  font-size: 1.5rem;
  color: white ; /* Votre couleur principale */
  margin-bottom: 10px;
}

/* Boutons dans les sections */
.profile-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Style des boutons de profil */
.profile-button {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 10px 15px;
  background-color: #dd4d9d; /* Votre couleur principale */
  color: #ffffff;
  border: none;
  border-radius: 5px;
  text-decoration: none;
  font-size: 16px;
  transition: background-color 0.3s ease, transform 0.2s ease;
  cursor: pointer;
}

.profile-button i {
  margin-right: 10px;
}

.profile-button:hover {
  background-color: #c2185b; /* Couleur au survol */
  transform: scale(1.05);
}

/* Boutons spécifiques */
.profile-button.danger {
  background-color: #393956; /* Variation pour les actions sensibles */
  color : grey;
  font-size: 13px;

}

.profile-button.danger:hover {
  background-color: #393956;
}

/* Conteneur pour les utilisateurs connectés */
#profile-info {
  text-align: center;
}

/* Partie connexion*/
/* Champs du formulaire */
/* Champs du formulaire - version sexy */
form input[type="email"],
form input[type="password"] {
  width: 90%;
  padding: 12px 15px;
  margin: 12px auto;
  border: 1px solid #dd4d9d;
  border-radius: 8px;
  font-size: 1.05rem;
  background-color: #1e1e2f;
  color: #ffffff;
  box-shadow: 0 0 8px rgba(221, 77, 157, 0.2);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

form input[type="email"]:focus,
form input[type="password"]:focus {
  border-color: #ff78b0;
  outline: none;
  box-shadow: 0 0 12px rgba(255, 120, 176, 0.6);
}


/* Placeholder des champs */
form input::placeholder {
  color: #aaaaaa;
}

/* Lien entre les sections */
#signup-container p,
#signin-container p {
  margin-top: 20px;
  font-size: 0.9rem;
  color: white;
}

#signup-container a,
#signin-container a {
  color: rgb(39 40 44);
  text-decoration: none;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
}

#signup-container a:hover,
#signin-container a:hover {
  text-decoration: underline;
}

 /* Styles simples pour le bouton Google */
 .login-container {
  max-width: 400px;
  margin: 50px auto;
  text-align: center;
  font-family: Arial, sans-serif;
}

.google-login-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background-color: white;
  color: #333;
  text-decoration: none;
  padding: 10px 20px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.google-login-btn:hover {
  background-color: #f1f1f1;
}

.google-logo {
  height: 20px;
  width: 20px;
}
#show-signin{
  color : #dd4d9d!important;
  text-decoration: underline!important;

}
#show-signup{
  color : #dd4d9d!important;
  text-decoration: underline!important;
  
}

.premium-link {
  color: #007bff;
  text-decoration: underline;
  font-weight: bold;
  cursor: pointer;
}

.premium-link:hover {
  color: #0056b3;
  text-decoration: none;
}

/* pied de page */
.footer {
  text-align: center;
  padding: 15px 0;
 
  font-size: 0.9em;
  color: #d1d1e0; /* Texte dans un gris clair */
  margin-top: 20px;
}

.footer p {
  margin: 5px 0;
}

.footer-link {
  color: #dd4d9d; /* Utilisation de la couleur principale */
  text-decoration: none;
  margin: 0 5px;
  transition: color 0.3s ease;
}

.footer-link:hover {
  color: #ff5f7a; /* Couleur légèrement plus vive au survol */
  text-decoration: underline;
}

.footer span {
  color: #d1d1e0; /* Couleur du séparateur "|" */
  margin: 0 5px;
}


.chat-image {
  max-width: 100%;  /* Empêche l’image de dépasser */
  height: auto;
  border-radius: 10px;
}



.pink{
  color : #dd4d9d!important;
  text-decoration: underline!important;
margin:auto;
}

/* Styles pour les images envoyées par l'IA */
img.chat-image {
  max-width: 100%; /* Empêche l'image de dépasser la largeur du conteneur */
  height: auto; /* Maintient les proportions */
  display: block; /* Évite les espaces vides sous l'image */
  margin: 10px auto; /* Centre l'image */
  border-radius: 8px; /* Arrondi les bords pour un meilleur rendu */
}

/* Limite la taille des images sur ordinateur */
@media screen and (min-width: 768px) {
  img.chat-image {
    max-width: 400px; /* Fixe une largeur maximale pour les écrans larges */
  }
}




#mode-toggle-container {
  
  align-items: center;
  gap: 10px;
  font-size: 16px;
  margin-bottom: 10px;
}

.switch {
  position: relative;
  display: inline-block;
  width: 34px;
  height: 20px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #878787;
  transition: 0.4s;
  border-radius: 20px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 14px;
  width: 14px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.4s;
  border-radius: 50%;
}

input:checked + .slider {
  background: linear-gradient(135deg, #dd4d9d, #8a2be2);
  box-shadow: 0 0 8px rgba(221, 77, 157, 0.7);
}

input:checked + .slider:before {
  transform: translateX(14px);
}


/* 🔴 Badge rouge pour "Nouvelle sur MyAiCrush" */
.new-badge {
  
  background-color: #ff4757; /* Rouge */
  
}

/* 🟢 Badge vert pour "🎥 Vidéos disponibles" */
.video-badge {
 
  background-color: #28a745; /* Vert */
  
}

/* 🔴 Bordure lumineuse rouge pour "Nouvelle sur MyAiCrush" */
.chat-card.new {
  border: 3px solid #ff4757;
  box-shadow: 0px 0px 15px rgba(255, 71, 87, 0.8);
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}



/* ✅ Effet lumineux renforcé au survol */
.chat-card.new:hover {
  transform: scale(1.05);
  box-shadow: 0px 0px 25px rgba(255, 71, 87, 1);
}

.chat-card.hasVideos:hover {
  transform: scale(1.05);
  box-shadow: 0px 0px 25px rgba(40, 167, 69, 1);
}

/* ✅ Ajustement pour les grands écrans */
@media screen and (min-width: 768px) {
  .new-badge,
  .video-badge {
      padding: 4px 8px;
      font-size: 10px;
  }
}

@media screen and (min-width: 1024px) {
  .new-badge,
  .video-badge {
      padding: 3px 7px;
      font-size: 9px;
  }
}


#upload-btn {
  background: linear-gradient(to right, #dd4d9d, #8a2be2);
  border: none;
  cursor: pointer;
  font-size: 20px;
  padding: 8px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 8px rgba(221, 77, 157, 0.4);
}

#upload-btn i {
  color: white;
}



.image-message {
  background-color: #dd4d9d; /* Rose comme les messages utilisateur */
  padding: 10px;
  border-radius: 15px;
  max-width: 250px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.image-message img {
  max-width: 100%;
  border-radius: 10px;
}

.voice-button {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 5px;
  padding: 4px 10px;
  font-size: 12px;  /* 🔹 Taille réduite */
  font-weight: bold;
  background-color: transparent;
  border: 1px solid;
  border-image: linear-gradient(to right, #dd4d9d, #8a2be2);
  border-image-slice: 1;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  text-align: center;
  width: fit-content;
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
  background-image: linear-gradient(to right, #dd4d9d, #8a2be2);
  -webkit-text-fill-color: transparent;
}

.voice-button:hover {
  background-image: linear-gradient(to right, #dd4d9d, #8a2be2);
  color: white;
  -webkit-text-fill-color: white;
}

.voice-button:active {
  transform: scale(0.95);
}

/* 🔊 Icône FontAwesome */
.voice-button i {
  font-size: 12px;
  margin-right: 6px;
  background: linear-gradient(to right, #dd4d9d, #8a2be2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}


.small-icon {
  font-size: 12px; /* Ajuste la taille selon tes besoins */
  margin-right: 5px; /* Ajoute un petit espace entre l'icône et le texte */
}



.token-benefits {
  list-style-type: disc; /* Points classiques */
  margin: 10px 0 20px 20px; /* Ajustement des marges */
  padding-left: 15px;
  color: #ffffff; /* Couleur du texte */
  text-align: left;
}

.token-benefits li {
  margin-bottom: 5px; /* Espacement entre les éléments */
  font-size: 1.1em;
  text-align: left;
}

.bot-message.warning {
  background: linear-gradient(135deg, rgba(221, 77, 157, 0.5), rgba(138, 43, 226, 0.5));
  color: #ffe4f2;
  font-weight: 500;
  text-align: left;
  padding: 12px 16px;
  border-radius: 16px;
  max-width: 75%;
  margin: 12px 0;
  font-size: 14.5px;
  line-height: 1.6;
  font-family: inherit;
  box-shadow: 0 0 12px rgba(221, 77, 157, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(4px);
}


#nymphoModeToggle {
  display: none;
}

/* 🟣 Badge violet pour "🥵 Mode Nympho disponible" */
.nympho-badge {
  
  background-color: #8a2be2; /* Couleur par défaut (vert vidéo) */
  
}




/* Effet lumineux renforcé au survol */
.chat-card.nympho:hover {
  transform: scale(1.05);
  box-shadow: 0px 0px 25px rgba(138, 43, 226, 1);
}


/* 🔵 Badge bleu pour "🔊 Appel audio" */
.call-audio-badge {
  background-color: #007bff; /* Bleu lumineux */
}



/* Effet lumineux renforcé au survol */
.chat-card.callAudio:hover {
  transform: scale(1.05);
  box-shadow: 0px 0px 25px rgba(0, 123, 255, 1);
}




.character-badge {
    position: absolute;
    top: 5px;
    left: 3px;
    color: white;
    padding: 2px 2px;
    font-size: 12px;
    font-weight: 550;
    border-radius: 3px;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
}

@media (max-width: 480px) {
  .character-badge {
    font-size: 10px; /* Un poil plus gros sur mobile */
  }
}


.audio-call-btn {
  background-color: #1dd193; /* ✅ Vert doux, pas trop flashy */
  border: none;
  padding: 6px;
  border-radius: 50%;
  margin: 0 10 0 15px; /* Garde l’espacement avec la photo */
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: none; /* ❌ Supprime l’effet de glow */
  transition: none; /* ❌ Supprime les animations inutiles */
}

.audio-call-btn i {
  font-size: 18px;
  color: white;
}


@keyframes pulse-glow {
  0% {
    box-shadow: 0 0 6px rgba(0, 255, 180, 0.4);
  }
  50% {
    box-shadow: 0 0 12px rgba(0, 255, 180, 0.8);
  }
  100% {
    box-shadow: 0 0 6px rgba(0, 255, 180, 0.4);
  }
}


.token-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 0px;     /* Un peu d'espace horizontal */
  row-gap: 0px;         /* ✅ Supprime presque tout l’espace entre les lignes */
  justify-items: center;
  max-width: 500px;
  margin: 0 auto;
  padding: 0;
}

.token-image {
  width: 100%;
  max-width: 280px;
  height: auto;
  cursor: pointer;
  transition: transform 0.3s ease;
  border-radius: 14px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

.token-image:hover {
  transform: scale(1.05);
}



/* BANNIERE PREMIUM */


  .dynamic-banner {
    position: fixed;
    top: 20px; /* ✅ en dessous du menu (ajuste si nécessaire) */
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: linear-gradient(to right, #8a2be2, #dd4d9d);
    padding: 10px 20px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: bold;
    color: white;
    z-index: 1; /* assez haut pour rester visible */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  

.dynamic-banner .plan-icon {
  font-size: 18px;
  margin-right: 8px;
}

.dynamic-banner .plan-text {
  background-color: rgba(255, 255, 255, 0.15);
  padding: 4px 10px;
  border-radius: 20px;
}

.dynamic-banner .plan-discount {
  background-color: #ff4b9b;
  padding: 4px 10px;
  border-radius: 20px;
  color: white;
}

form label {
  display: block;
  margin-bottom: 5px;
  text-align: left;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
}

.horizontal-banner {
  width: 100%;
  margin: 10px 0;
  grid-column: 1 / -1; /* 👉 occupe toute la ligne en mode grid */
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);

}

.horizontal-banner img.banner-image {
  width: 100%;
  height: auto;
  border-radius: 12px;
  display: block;
}



/* Section Témoignages */
.testimonial-section {
  margin: 50px auto;
  max-width: 900px;
  padding: 20px;
  text-align: center;
}

.testimonial-title {
  font-size: 1.8em;
  background: linear-gradient(to right, #dd4d9d, #8a2be2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: bold;
  margin-bottom: 30px;
}
.testimonial-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
}

@media (min-width: 600px) {
  .testimonial-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1000px) {
  .testimonial-grid {
    grid-template-columns: repeat(1, 1fr);
  }
}


.testimonial-card {
  background-color: rgba(57, 57, 86, 0.85);
  border-radius: 12px;
  padding: 20px;
  color: #ffffff;
  text-align: left;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.testimonial-stars {
  color: gold;
  font-size: 18px;
  margin-bottom: 10px;
}

.testimonial-text {
  font-style: italic;
  font-size: 0.95em;
  margin-bottom: 10px;
}

.testimonial-author {
  color: #ccc;
  font-weight: bold;
  font-size: 0.85em;
  text-align: right;
}


.faq-section {
  max-width: 700px;
  margin: 60px auto;
  padding: 0 20px;
  text-align: left;
}

.faq-title {
  font-size: 1.8em;
  background: linear-gradient(to right, #dd4d9d, #8a2be2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: bold;
  margin-bottom: 30px;
  text-align: center;
  
}

.faq-item {
  margin-bottom: 15px;
  border-radius: 10px;
  overflow: hidden;
  background-color: #2b2b3d;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.faq-question {
  width: 100%;
  padding: 15px;
  font-size: 1.1em;
  color: white;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  font-weight: bold;
  background-color: #393956;
  transition: background 0.3s;
}

.faq-question:hover {
  background-color: #4b4b6d;
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  background-color: #2b2b3d;
  transition: max-height 0.4s ease;
  padding: 0 15px;
}

.faq-answer.open {
  padding: 15px;
  max-height: 500px;
}

.faq-answer p {
  color: #ccc;
  font-size: 1em;
  margin: 0;
}

#loader {
  position: fixed;
  z-index: 9999;
  background: #1e1e2f;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.1em;
  font-family: Arial, sans-serif;
  transition: opacity 0.3s ease;
}

.heart-loader {
  position: relative;
  width: 60px;
  height: 54px;
  margin-bottom: 15px;
}

.heart {
  position: absolute;
  top: 0;
  left: 0;
  width: 60px;
  height: 54px;
  background: linear-gradient(to bottom, transparent 50%, #dd4d9d 50%, #8a2be2 100%);

  background-size: 100% 200%;
  background-position: 0% 0%;
  clip-path: path("M30 52 L10 32 A10 10 0 0 1 30 12 A10 10 0 0 1 50 32 Z");
  animation: fillHeart 5s ease-in-out forwards;


}

@keyframes fillHeart {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: 0% 100%;
  }
}


.chat-video {
  max-width: 100%;
  border-radius: 12px;
  object-fit: cover;
  display: block;
}

/* ✅ Version desktop */
@media (min-width: 768px) {
  .chat-video {
    max-width: 350px !important;
  } 
}



.loader-text {
  opacity: 0;
  transition: opacity 3s ease;
  font-size: 1em;
  text-align: center;
  margin-top: 20px;
  color: white;
  max-width: 80%;
}
.loader-text.visible {
  opacity: 1;
}

video {
  background-color: black; /* ✅ évite l'écran gris */
  object-fit: cover;
}

.private-preview {
  max-width: 300px; /* Largeur maximale (tu peux ajuster, ex: 250px) */
  width: 100%;      /* Pour que ça s’adapte en responsive */
  height: auto;     /* Pour garder les proportions */
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  transition: transform 0.3s ease;
}

.private-preview:hover {
  transform: scale(1.05); /* Petit zoom au survol */
}

/* ✅ Style général pour chaque carte privée */
.private-card {
  width: 100%;
  max-width: 450px; /* 💡 Réduit la largeur sur desktop pour centrer joliment */
  margin: 20px auto; /* Toujours centré */
  text-align: center;
  background-color: #2b2b3d;
  border-radius: 12px;
  padding: 15px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.5);
}

/* ✅ Images et vidéos dans les cartes */
.private-card img.private-preview,
.private-card video.private-preview {
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  object-fit: cover;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  transition: transform 0.3s ease;
}

.private-card img.private-preview:hover,
.private-card video.private-preview:hover {
  transform: scale(1.02);
}

/* ✅ Titres et descriptions */
.private-card h3 {
  color: #dd4d9d;
  margin-top: 12px;
  font-size: 1.4em;
}

.private-card p {
  color: #d1d1e0;
  margin: 8px 0 15px;
  font-size: 1em;
}

/* ✅ Bouton de déblocage / voir le contenu */
.private-card .unlock-button {
  background-color: #dd4d9d;
  color: white;
  border: none;
  padding: 12px 20px;
  border-radius: 30px;
  cursor: pointer;
  font-size: 1em;
  font-weight: bold;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.private-card .unlock-button:hover {
  background-color: #c2185b;
  transform: scale(1.05);
}

/* ✅ Responsive : ajustements sur mobile */
@media (max-width: 768px) {
  .private-card {
    max-width: 90%;
    margin: 15px auto;
    padding: 10px;
  }

  .private-card h3 {
    font-size: 1.2em;
  }

  .private-card p {
    font-size: 0.95em;
  }

  .private-card .unlock-button {
    padding: 10px 16px;
    font-size: 0.95em;
  }
}

/* ✅ Bouton positionné au milieu pour floutage */
.private-unlock-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #dd4d9d;
  color: white;
  border: none;
  padding: 10px 15px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 14px;
  font-weight: bold;
  transition: background-color 0.3s ease;
}

.private-unlock-btn:hover {
  background-color: #c2185b;
}




.private-unlock-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #dd4d9d;
  color: white;
  border: none;
  padding: 10px 15px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 14px;
  font-weight: bold;
  transition: background-color 0.3s ease;
}

.private-unlock-btn:hover {
  background-color: #c2185b;
}


/* === Nouvelle carte pour page contenu privé === */

/* ✅ Nouveau conteneur en grid */
#private-contents {
  display: grid;
  grid-template-columns: 1fr; /* Par défaut mobile = 1 colonne */
  gap: 20px;
  justify-content: center;
  padding: 10px;
}

/* Desktop : 2 colonnes */
@media (min-width: 768px) {
  #private-contents {
    grid-template-columns: repeat(2, 1fr);
  }
}

.private-content-card {
  position: relative;
  width: 100%;
  max-width: 320px;
  background-color: #2b2b3d;
  border-radius: 14px;
  padding: 15px 15px 20px;
  text-align: left;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5);
  
  margin:auto;
}

.private-content-card:hover {
 
}

.private-content-card img.preview-image {
  width: 100%;
  height: auto;
  border-radius: 12px;
  object-fit: cover;
  margin-bottom: 10px;
}

.private-content-card h3 {
  font-size: 1.1em;
  color: #dd4d9d;
  margin: 8px 0 5px;
}

.private-content-card p.description {
  font-size: 0.95em;
  color: #ccc;
  margin: 0 0 12px;
  line-height: 1.3;
  min-height: 45px;
}

.private-content-card .token-info {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.95em;
  color: #ffc107;
  margin-bottom: 10px;
  font-weight: bold;
}

.private-content-card .token-info i {
  color: #ffc107;
}

.private-content-card .unlock-btn {
  display: block;
  width: 100%;
  background-color: #dd4d9d;
  color: #fff;
  border: none;
  border-radius: 30px;
  padding: 10px 0;
  font-weight: bold;
  font-size: 1em;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.2s;
}

.private-content-card .unlock-btn:hover {
  background-color: #c2185b;
  transform: scale(1.03);
}

/* ✅ Ajustement mobile déjà inclus */
@media (max-width: 768px) {
  .private-content-card {
    max-width: 90%;
  }
}




.private-profile-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  width: 100%;
}

.private-profile-header .profile-pic {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid #dd4d9d;
  flex-shrink: 0; /* ✅ Évite de rétrécir */
}

.private-profile-header .private-profile-name {
  display: inline-block;
  color: white;
  font-weight: bold;
  font-size: 1em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; /* ✅ si jamais ça dépasse */
}

.preview-wrapper {
  position: relative;
  display: inline-block;
  width: 100%;
}

.lock-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0,0,0,0.6);
  border-radius: 50%;
  padding: 10px;
  z-index: 2;
}

.lock-icon i {
  color: #fff;
  font-size: 1.2em;
}

.preview-wrapper {
  position: relative;
}



.private-toggle-wrapper {
  text-align: center;
  margin: 20px auto;
}

.private-toggle-btn {
  background-color: transparent;
  color: #dd4d9d;
  border: 2px solid #dd4d9d;
  padding: 8px 18px;
  border-radius: 25px;
  font-size: 1em;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.private-toggle-btn:hover {
  background-color: #dd4d9d;
  color: white;
}


.private-slider-section {
  display: flex;
  justify-content: center;
  margin-top: 20px; /* ✅ Marge autour */
  width: 100%;
}

.private-slider {
  position: relative;
  width: 100%;
  max-width: 500px; /* ✅ Largeur "2 cartes" environ sur desktop, ajuste si besoin */
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 10px;
  cursor: pointer;
}

.slider-inner {
  display: flex;
  transition: transform 0.5s ease;
  height: 100%;
}

.slider-inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  flex-shrink: 0;
}

.slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0,0,0,0.5);
  color: white;
  border: none;
  padding: 5px 10px;
  cursor: pointer;
  border-radius: 50%;
}

.left-arrow {
  left: 5px;
}

.right-arrow {
  right: 5px;
}

.slider-arrow:hover {
  background-color: rgba(0,0,0,0.8);
}

/* ✅ Style général popup */
    .jetons-popup, .confirm-popup {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.85);
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 9999;
    }

 .popup-content, .confirm-content {
  background: #1e1e1e;
  border-radius: 20px;
  padding: 30px 2px;
  text-align: center;
  max-width: 450px;
  width: 95%;
  box-shadow: 0 0 30px rgba(255, 75, 155, 0.4);
  position: relative;
  animation: popup-fade 0.3s ease;
  max-height: 90vh;
  overflow-y: auto;
  overflow-x: hidden; /* ✅ empêche le scroll horizontal */
  -webkit-overflow-scrolling: touch; /* smooth scroll iOS */
}


    

    @keyframes popup-fade {
      from { transform: scale(0.9); opacity: 0; }
      to   { transform: scale(1); opacity: 1; }
    }

    .close-btn {
      position: absolute;
      top: 15px;
      right: 20px;
      font-size: 22px;
      background: none;
      border: none;
      color: white;
      cursor: pointer;
    }


    .card-icon {
      width: 60px;
      margin-bottom: 15px;
    }

    .confirm-buttons button {
      background: #dd4d9d;
      color: white;
      border: none;
      padding: 10px 22px;
      margin: 10px;
      border-radius: 10px;
      font-size: 16px;
      cursor: pointer;
    }

    .confirm-buttons button:first-child {
      background: #333;
    }

 .offers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0px;
  margin-top: 20px;
}
.offer-img {
  width: 100%;
  max-width: none;
  height: auto;
}

/* ✅ Loader overlay */
.loader-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  z-index: 9999;
}

/* ✅ Spinner classique aux couleurs MyAiCrush */
.spinner {
  width: 60px;
  height: 60px;
  border: 6px solid #333;
  border-top: 6px solid #dd4d9d;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 20px;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.loader-text {
  color: white;
  font-size: 16px;
  font-family: 'Arial', sans-serif;
}

vapi-widget {
  all: unset;
  position: fixed !important;
  bottom: 20px !important;
  right: 20px !important;
  z-index: 9999 !important;
  max-width: 360px !important;
  width: auto !important;
  height: auto !important;
  pointer-events: auto !important;
}


/* ---------- HERO VIDEO DANS LA POPUP ---------- */
.popup-hero{
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;                 /* garde un ratio propre */
  border-radius: 18px;                 /* arrondis comme tes cartes */
  overflow: hidden;                    /* masque les bords de la vidéo */
  border: 1px solid rgba(221,77,157,.35); /* léger contour rose */
  box-shadow: 0 10px 30px rgba(0,0,0,.35); /* ombre douce */
  background: radial-gradient(80% 100% at 50% 40%, rgba(255,255,255,.05) 0, rgba(0,0,0,.25) 100%);
}

/* vidéo responsive, sans bandes noires */
.popup-hero__video{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;                   /* remplit le cadre */
  object-position: 50% 40%;            /* focus légèrement haut */
  filter: contrast(1.05) saturate(1.05);
}

/* vignette douce sur les bords pour fondre avec la popup */
.popup-hero::after{
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 100% at 50% 100%, rgba(0,0,0,0) 50%, rgba(0,0,0,.35) 100%), /* bas */
    linear-gradient(to top, rgba(0,0,0,.35), rgba(0,0,0,0) 35%);                     /* haut */
  mix-blend-mode: normal;
}

/* petit liseré lumineux au survol (optionnel) */
.popup-hero:hover{
  border-color: rgba(221,77,157,.55);
  box-shadow: 0 14px 38px rgba(0,0,0,.45), 0 0 0 2px rgba(221,77,157,.15) inset;
}

/* ===== Premium Hero Video ===== */
:root{
  --pink:#dd4d9d;
  --violet:#8a2be2;
  --card:#171823;     /* fond des cartes de ta page */
}

.hero-media{
  position:relative;
  margin:18px auto 28px;
  width:100%;
    max-width:480px;    /* ✅ largeur max pour desktop */
  aspect-ratio:16/9;
  border-radius:22px;
  isolation:isolate;
}


.hero-media::before{
  content:"";
  position:absolute; inset:-6px;
  border-radius:26px;
  background: radial-gradient(120% 100% at 10% 0%, color-mix(in oklab, var(--pink), transparent 30%) 0%, transparent 60%),
              radial-gradient(120% 100% at 100% 90%, color-mix(in oklab, var(--violet), transparent 35%) 0%, transparent 65%);
  filter: blur(28px) opacity(.7);
  z-index:-1;
}

/* anneau dégradé fin autour de la vidéo */
.hero-media::after{
  content:"";
  position:absolute; inset:0;
  border-radius:22px;
  padding:1px;                 /* épaisseur de l’anneau */
  background:linear-gradient(135deg, var(--pink), var(--violet));
  -webkit-mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;     /* annule le centre: anneau seulement */
  opacity:.75;
}

/* la vidéo elle-même */
.hero-video{
  width:100%; height:100%;
  display:block;
  object-fit:cover;            /* couvre proprement */
  border-radius:20px;
  background:#000;             /* évite flash blanc */
  box-shadow:
    0 12px 40px rgba(0,0,0,.55),
    0 1px 0 rgba(255,255,255,.06) inset;
  border:1px solid rgba(255,255,255,.07);
}

/* vignette douce pour fondre dans le décor */
.hero-media .vignette{
  position:absolute; inset:0;
  pointer-events:none;
  border-radius:20px;
  box-shadow: inset 0 0 90px rgba(0,0,0,.55),
              inset 0 -60px 120px rgba(0,0,0,.35);
}

/* légère animation au survol (desktop) */
@media (hover:hover){
  .hero-media:hover{
    transform: translateY(-2px);
    transition:.25s ease;
  }
}

/* petits écrans: bord plus doux */
@media (max-width:420px){
  .hero-media{ border-radius:18px; }
  .hero-media::after{ border-radius:18px; }
  .hero-video, .hero-media .vignette{ border-radius:16px; }
}






/* Le cadenas est poussé complètement à droite */
.chat-lock-link {
  margin-left: auto;
  margin-right: 12px; /* espace à droite */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(221, 77, 157, 0.15); /* halo rose léger */
  padding: 4px;
}

.chat-lock-link:hover {
  background: rgba(221, 77, 157, 0.25);
}

.chat-lock-icon {
  width: 35px;
  height: 35px;
  object-fit: contain;
}

/* ===== Loader branding MyAiCrush ===== */

.loader-brand {
  margin-top: 16px;
  text-align: center;
  animation: loaderFadeUp 0.8s ease-out 0.3s both;
}

.loader-logo {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  /* Dégradé dans les tons MyAiCrush */
  background: linear-gradient(120deg, #ff77c8, #dd4d9d, #ffb4e0);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  text-shadow: 0 0 12px rgba(221, 77, 157, 0.45);
  animation: loaderGlow 1.8s ease-in-out infinite alternate;

}

.loader-subtitle {
  margin-top: 4px;
  font-size: 0.9rem;
  font-weight: 500;
  color: #f5dff0;
  opacity: 0.9;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Petite anim de slide + fade pour le bloc marque */
@keyframes loaderFadeUp {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Optionnel : un léger glow pulsé sur le logo pour matcher le cœur animé */
@keyframes loaderGlow {
  0% {
    text-shadow: 0 0 8px rgba(221, 77, 157, 0.35);
  }
  50% {
    text-shadow: 0 0 16px rgba(221, 77, 157, 0.7);
  }
  100% {
    text-shadow: 0 0 8px rgba(221, 77, 157, 0.35);
  }
}

/* Bandeau de réponses suggérées, toujours au-dessus de la barre d'input */
.quick-replies {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(var(--kb, 0px) + var(--input-h, 64px)); /* toujours au-dessus du input-area */
  display: flex;
  flex-wrap: nowrap;          /* tout sur une seule ligne */
  overflow-x: auto;           /* scroll horizontal si ça déborde */
  gap: 6px;
  padding: 6px 10px 8px;

  z-index: 1001;              /* au-dessus des messages, juste sous la barre */
  scrollbar-width: none;      /* Firefox : cache la barre de scroll */
}

.quick-replies::-webkit-scrollbar {
  display: none;              /* Chrome/Safari : cache la barre de scroll */
}



.quick-reply-btn {
  flex: 0 0 auto;            /* taille selon le contenu */
  background: #1f2933;
  border: 1px solid #dd4d9d;
  color: #fff;
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 12px;
  cursor: pointer;
  max-width: 80vw;           /* ne dépasse jamais la largeur de l’écran */
  white-space: normal;       /* autorise le retour à la ligne */
  word-break: break-word;    /* coupe les mots très longs si besoin */
  text-align: left;          /* plus naturel en multi-ligne */
}



.quick-reply-btn:hover {
  background: #dd4d9d;
}


.stories-wrapper {
  display: flex;
  align-items: center;
  padding: 10px 15px;
  overflow-x: auto;
  gap: 12px;
  margin-bottom: 10px;
  padding-top: 0px;

  /* 👉 masque la barre de scroll mais garde le scroll au doigt */
  scrollbar-width: none;          /* Firefox */
}

.stories-wrapper::-webkit-scrollbar {
  display: none;                  /* Chrome / Edge / Safari */
}



#stories {
  display: flex;
  gap: 12px;
}

.story-item {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}

.story-thumb {
  width: 60px;
  height: 60px;
  border-radius: 999px;
  object-fit: cover;
  border: 2px solid #dd4d9d; /* couleur MyAiCrush */
  overflow: hidden;
}

.story-item video.story-thumb {
  object-fit: cover;
}

.story-name {
  margin-top: 4px;
  font-size: 11px;
  color: #fff;
  text-align: center;
  max-width: 70px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Fullscreen viewer */
/* ---------- VIEWER FULLSCREEN ---------- */

.story-viewer {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.story-viewer.hidden {
  display: none;
}

.story-viewer-content {
  position: relative;
  width: min(420px, 100%);
  height: min(90vh, 800px);   /* 🔥 Hauteur stricte = ne déborde plus */
  padding: 0;                 /* 🔥 On enlève le padding qui cassait tout */
  display: flex;
  flex-direction: column;
  overflow: hidden;           /* 🔥 Empêche tout débordement */
  border-radius: 18px;
}


/* Header avatar + nom */
.story-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.story-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.story-avatar {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  object-fit: cover;
  margin-left:7px;
}

.story-username {
  color: #fff;
  font-size: 14px;
  font-weight: 600;
}

.story-close-btn {
  font-size: 28px;
  color: #fff;
  cursor: pointer;
  background: none;
  border: none;
  margin-right:10px;
}

/* Barre de progression */
.story-progress {
  display: flex;
  gap: 4px;
  margin-bottom: 10px;
}

.story-progress-segment {
  flex: 1;
  height: 2px;
  background: rgba(255,255,255,0.3);
  border-radius: 999px;
  overflow: hidden;
}

.story-progress-inner {
  height: 100%;
  width: 0%;
  background: #fff;
}

/* Média */
.story-media {
  width: 100%;
  max-width: 400px;
  aspect-ratio: 9 / 16;    /* format story */
  object-fit: cover;       /* exactement comme Instagram */
  border-radius: 20px;     /* bords arrondis */
  margin: 0 auto;
  display: block;
  background: #000;
}

.story-media-video {
  width: 100%;
  max-width: 400px;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border-radius: 20px;
  margin: 0 auto;
  display: block;
  background: #000;
}




.story-media.hidden {
  display: none;
}

/* Zones clic droite/gauche */
.story-nav-left,
.story-nav-right {
  position: absolute;
  top: 60px; /* sous le header */
  width: 50%;
  height: calc(100% - 120px); /* laisse la place pour la barre de reply */
  cursor: pointer;
}

.story-nav-left { left: 0; }
.story-nav-right { right: 0; }



/* Barre de réponse en bas */
.story-reply-bar {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 20px;
  display: flex;
  align-items: center;
  gap: 8px;

  /* 🆕 fond “pill” propre */
  padding: 6px 8px;
  background: rgba(0, 0, 0, 0.45);
  border-radius: 999px;
}

#story-reply-input {
  flex: 1;
  padding: 8px 10px;
  border-radius: 999px;

  /* 🆕 on enlève le contour noir */
  border: none;
  outline: none;
  background: transparent;

  color: #fff;
  font-size: 14px;
}

#story-reply-input::placeholder {
  color: rgba(255, 255, 255, 0.7);
}


#story-reply-send {
  padding: 6px 12px;
  border-radius: 20px;
  border: none;
  background: #dd4d9d;
  color: #fff;
  font-size: 13px;
  cursor: pointer;
}


/* Désactiver le flash bleu / tap highlight sur les zones de navigation */
.story-viewer,
.story-nav-left,
.story-nav-right {
  -webkit-tap-highlight-color: transparent;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  user-select: none;
}

.story-nav-left:focus,
.story-nav-right:focus,
#story-close-btn:focus,
#story-reply-send:focus {
  outline: none;
}