/* =============================
   RESET DE BASE
============================= */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial, sans-serif;
}

body {
  background: #f9f9f9;
  color: #333;
  line-height: 1.6;
}

html, body {
  touch-action: manipulation;
  -webkit-user-drag: none;
  -webkit-tap-highlight-color: transparent;
}

/* =============================
   SECTION HERO
============================= */
.hero {
  position: relative;
  background-size: cover;
  background-position: center;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.hero .overlay {
  background: rgba(0, 0, 0, 0.55);
  padding: 40px 20px;
  border-radius: 12px;
  color: #fff;
  max-width: 600px;
  width: 90%;
}

.hero .logo {
  height: 60px;
  width: auto;
  margin-bottom: 15px;
}

.hero h1 {
  font-size: 26px;
  margin-bottom: 15px;
}

.hero-subtitle {
  font-size: 16px;
  margin-bottom: 20px;
  font-style: italic;
  opacity: 0.9;
}

/* CTA principal */
.cta-btn {
  background: #e63946;
  border: none;
  padding: 14px 28px;
  border-radius: 8px;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.3s, transform 0.2s;
}

.cta-btn:hover {
  background: #d62828;
  transform: translateY(-2px);
}

.cta-btn.big {
  background: #ffffff;
  font-size: 18px;
  padding: 16px 34px;
  color: #e63946;
}

/* Lien Connexion */
.link-btn {
  background: transparent;
  color: #fff;
  text-decoration: underline;
  font-size: 15px;
  cursor: pointer;
}

/* =============================
   SECTION PROBLÈME → SOLUTION
============================= */
.problem-solution {
  background: #fff;
  padding: 60px 20px;
  text-align: center;
}

.problem-solution h2 {
  font-size: 24px;
  margin-bottom: 12px;
  color: #e63946;
}

.problem-solution p {
  font-size: 16px;
  color: #444;
}

/* =============================
   SECTION PREUVE SOCIALE
============================= */
.social-proof {
  text-align: center;
  padding: 50px 20px;
  background: #f9f9f9;
}

.social-proof h2 {
  font-size: 22px;
  margin-bottom: 8px;
}

.social-proof .subtitle {
  font-size: 16px;
  color: #666;
  margin-bottom: 20px;
}

/* Avatars */
.avatars {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
  margin-bottom: 25px;
}

.avatar-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 60px;
}

.avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  color: #fff;
  font-size: 18px;
}

.pseudo {
  margin-top: 5px;
  font-size: 13px;
  color: #333;
}

/* Témoignages */
.testimonials {
  text-align: center;
  margin: 40px auto 80px; /* marge dessous + dessus */
  max-width: 800px;
  min-height: 140px; /* hauteur minimale pour stabiliser */
  position: relative;
}

.testimonials blockquote {
  background: #fff;
  border-left: 4px solid #e63946;
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

.testimonials footer {
  margin-top: 8px;
  font-size: 13px;
  font-weight: bold;
  color: #666;
  text-align: right;
}

/* =============================
   SECTION AVANTAGES
============================= */
.advantages {
  background: #fff;
  padding: 60px 20px;
  text-align: center;
  margin-top: 80px;
}

.advantages h2 {
  font-size: 24px;
  margin-bottom: 30px;
  color: #333;
}

.cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.card {
  background: #f9f9f9;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  transition: transform 0.3s;
}

.card:hover {
  transform: translateY(-5px);
}

.card .icon {
  font-size: 32px;
  margin-bottom: 10px;
}

.card h3 {
  font-size: 18px;
  margin-bottom: 10px;
  color: #222;
}

.card p {
  font-size: 14px;
  color: #555;
}

/* =============================
   CTA FINAL
============================= */
.final-cta {
  background: #e63946;
  color: #fff;
  text-align: center;
  padding: 50px 20px;
}

.final-cta h2 {
  font-size: 24px;
  margin-bottom: 20px;
}

/* Liste des bénéfices CTA */
.cta-benefits {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0;
  text-align: left;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

.cta-benefits li {
  font-size: 1.1rem;
  color: #fff;              /* texte blanc pour contraster */
  margin-bottom: 0.8rem;
  padding-left: 2rem;
  position: relative;
  line-height: 1.6;
  font-weight: 500;
}

.cta-benefits li::before {
  content: "✔️";
  position: absolute;
  left: 0;
  top: 0;
  font-size: 1.2rem;
  color: #2ecc71;           /* vert vif qui ressort sur rouge/violet */
}


/* =============================
   RESPONSIVE
============================= */
@media (max-width: 768px) {
  .hero h1 { font-size: 22px; }
  .hero-subtitle { font-size: 14px; }
  .cards { grid-template-columns: 1fr; }
}








/* Boutons */
button {
  background: #e63946;
  border: none;
  padding: 12px 24px;
  margin-top: 10px;
  border-radius: 6px;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.3s;
}

button:hover {
  background: #d62828;
}

.link-btn {
  background: transparent;
  color: #fff;
  text-decoration: underline;
  font-size: 15px;
  cursor: pointer;
}

/* Modales */
.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0; top: 0;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.6);
  justify-content: center;
  align-items: center;
  overflow-y: auto; /* important pour mobile si le form est grand */
}

.modal-content {
  background: #fff;
  padding: 25px;
  width: 90%;
  max-width: 400px;
  height: auto;
  max-height: 80%;
  overflow: auto;
  border-radius: 8px;
  position: relative;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

/* Liens dans les modales */
.modal-content a {
  color: #0077cc; /* bleu lisible */
  text-decoration: underline;
  font-size: 14px;
  display: inline-block;
  margin-top: 5px;
  transition: color 0.3s;
}

.modal-content a:hover {
  color: #005fa3;
}

.modal .close {
  position: absolute;
  top: 10px; right: 15px;
  font-size: 22px;
  font-weight: bold;
  cursor: pointer;
}

/* Formulaires */
form {
  margin-top: 10px;
}

.form-group {
  margin-bottom: 15px;
  text-align: left;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: 500;
  font-size: 14px;
}

.form-group input,
.form-group select {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 15px;
}

.btn-primary {
  background: #007bff;
  color: #fff;
  border: none;
  padding: 12px;
  width: 100%;
  border-radius: 6px;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.2s;
}

.btn-primary:hover {
  background: #0056b3;
}

.form-footer {
  margin-top: 15px;
  font-size: 14px;
  text-align: center;
}

/* CGU aligné */
.form-group.cgu {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}

.form-group.cgu input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
}



/* Étapes du formulaire */
.form-step { display: none; }
.form-step.active { display: block; }

/* Boutons navigation */
.form-nav {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.btn-secondary {
  background: #ccc;
  color: #333;
  padding: 12px;
  width: 48%;
  border-radius: 6px;
  font-size: 16px;
  cursor: pointer;
}

.btn-secondary:hover {
  background: #bbb;
}

.error-msg {
  color: #e63946;       /* rouge */
  font-size: 13px;
  margin-top: 4px;
  display: none;        /* caché par défaut */
}

input.invalid {
  border-color: #e63946;
  background: #ffeaea;
}


/* Footer fixe avec fond assombri marqué */
#popup-filtre .filters-footer {
  position: sticky;
  bottom: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.25), rgba(0,0,0,0.08), rgba(255,255,255,0));
  border-top: 1px solid rgba(0,0,0,0.2);
  padding: 14px 12px;
  display: flex;
  justify-content: center;
  gap: 12px;
  z-index: 10;
  backdrop-filter: blur(6px); /* effet verre dépoli plus marqué */
}


/* Responsive */
@media (min-width: 768px) {
  .hero .overlay {
    padding: 60px;
  }

  button {
    font-size: 18px;
  }
}





/* Connexion auto (checkbox) */
.remember-row{
  margin: 8px 0 14px;
}

.remember-label{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  font-size: 15px;
  color: #222;
}

/* checkbox un peu plus “premium” */
.remember-label input[type="checkbox"]{
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: #ff3b6b; /* adapte si tu veux la couleur de ta marque */
  cursor: pointer;
}

/* texte */
.remember-text{
  line-height: 1.2;
}




.social-proof {
  text-align: center;
  padding: 40px 20px;
  background: #fff;
}

.social-proof h2 {
  font-size: 22px;
  margin-bottom: 8px;
}

.social-proof .subtitle {
  font-size: 16px;
  color: #666;
  margin-bottom: 20px;
}

.avatars {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
}

.avatar-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 60px;
}

.avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  color: #fff;
  font-size: 18px;
}

.pseudo {
  margin-top: 5px;
  font-size: 13px;
  color: #333;
  word-break: break-word;
}





/* Section avantages */
.advantages {
  background: #f9f9f9;
  padding: 50px 20px;
  text-align: center;
}

.advantages h2 {
  font-size: 22px;
  margin-bottom: 30px;
  color: #333;
}

.cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.card {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  transition: transform 0.3s;
}

.card:hover {
  transform: translateY(-5px);
}

.card .icon {
  font-size: 32px;
  margin-bottom: 10px;
}

.card h3 {
  font-size: 18px;
  margin-bottom: 10px;
  color: #222;
}

.card p {
  font-size: 14px;
  color: #666;
}

/* Responsive mobile */
@media (max-width: 600px) {
  .cards {
    grid-template-columns: 1fr;
  }
}







.contact-form {
  display: flex;
  flex-direction: column;
}

.contact-form label {
  margin-top: 10px;
  font-weight: bold;
  color: #333;
  text-align: left;
}

.contact-form input,
.contact-form textarea {
  padding: 10px;
  margin-top: 5px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 14px;
}

/* Champ texte long (contact, messages, etc.) */
.contact-form textarea {
  width: 100%;
  min-height: 120px;   /* hauteur de base */
  resize: vertical;    /* l’utilisateur peut l’agrandir verticalement */
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 15px;
  line-height: 1.4;
}

.contact-form button {
  margin-top: 15px;
  background: #e63946;
  color: #fff;
  border: none;
  padding: 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
}

.contact-form button:hover {
  background: #d62828;
}





/* ===== HEADER (dashboard) ===== */
.site-header {
  background:#fff;
  border-bottom:1px solid #eee;
  box-shadow:0 2px 4px rgba(0,0,0,.05);
  position:sticky; top:0; z-index:100;
}
.site-header .container{
  max-width:1200px; margin:0 auto;
  padding:10px 20px;
  display:flex; align-items:center; justify-content:space-between;
}
.site-header .logo img{height:32px; width:auto;}





	
	
.profile-thumb img{
  height:36px; width:36px; border-radius:50%; object-fit:cover;
  border:2px solid #1d72f3;
}

.profile-thumb {
  width: 45px;   /* taille fixe */
  height: 45px;
  border-radius: 50%;
  overflow: hidden; /* coupe ce qui dépasse */
  flex-shrink: 0;
}


.profile-thumb img,
.avatar-thumb img {
  width: 100%;
  height: 100%;
  border-radius: 50%;      /* cercle parfait */
  object-fit: cover;       /* remplissage complet */
  background: #f2f2f2;     /* couleur de fond neutre si image transparente */
  display: block;
}


.profile-menu {
  margin-left: 15px;
}

.btn-logout {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: #f5f5f5;
  border-radius: 6px;
  color: #333;
  font-size: 14px;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}

.btn-logout:hover {
  background: #e63946;
  color: #fff;
}



/* ===== LAYOUT (dashboard uniquement) ===== */
#content {
  width: 100%;
}

.dashboard-page{
  min-height:100vh; display:flex; background:#f7f9fc;
}

/* Gardez cette règle pour le pied de page */
.dashboard-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: #f7f9fc;
}

/* Modifiez cette règle pour les marges du contenu */
.dashboard-page .dashboard-container {
  flex: 1;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px; /* C'est le padding que vous souhaitez */
}

/* ===== Welcome box ===== */
.welcome-box{
  background:linear-gradient(180deg,#f1f7ff, #eaf3ff);
  padding:24px; border-radius:14px; text-align:center; margin-bottom:26px;
  border:1px solid #e6eefc;
}
.welcome-box h2{font-size:1.4rem; font-weight:700; margin-bottom:14px; color:#202b3a;}
.btn-primary{
  display:inline-block; background:#1d72f3; color:#fff; text-decoration:none;
  padding:12px 22px; border-radius:8px; font-weight:600; box-shadow:0 6px 14px rgba(29,114,243,.25);
}
.btn-primary:hover{filter:brightness(1.02); transform:translateY(-1px);}

/* ===== Grid ===== */
.dashboard-grid{display:grid; gap:22px;}
@media (min-width: 900px){
  .dashboard-grid{grid-template-columns:2fr 1fr;}
}

/* ===== Sections ===== */
.section-title{font-size:1.05rem; font-weight:700; color:#263442; margin:16px 0 10px;}

/* Membres en ligne */
.members-online{
  display:flex; gap:14px; overflow-x:auto; padding:10px 4px 2px;
}
.members-online .member{flex:0 0 auto; text-align:center; font-size:.9rem; color:#374151;}
.members-online img{
  width:64px; height:64px; border-radius:50%; object-fit:cover;
  border:3px solid #fff; box-shadow:0 2px 6px rgba(0,0,0,.12);
}
.members-online .status{
  display:block; width:12px; height:12px; background:#22c55e; border-radius:50%;
  margin:-16px auto 6px; border:2px solid #fff;
}

/* Suggestions */
.suggestions{display:grid; grid-template-columns:1fr; gap:16px;}
@media (min-width: 600px){ .suggestions{grid-template-columns:repeat(2,1fr);} }
@media (min-width: 900px){ .suggestions{grid-template-columns:repeat(3,1fr);} }

.suggestion-card{
  background:#fff; border:1px solid #eaeef6; border-radius:12px; padding:12px;
  box-shadow:0 2px 10px rgba(18,42,66,.05);
  text-align:center;
}
.suggestion-card img{width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:10px; margin-bottom:10px;}
.suggestion-card h3{font-size:1rem; margin-bottom:4px; color:#111827;}
.suggestion-card p{font-size:.92rem; color:#6b7280;}
.suggestion-card .btn-profile{
  display:inline-block; margin-top:8px; padding:8px 14px; border-radius:8px;
  background:#1d72f3; color:#fff; text-decoration:none; font-weight:600;
}

/* Sidebar */
.sidebar{padding:10px;}
.sidebar h3{font-size:1rem; font-weight:700; margin:10px 0 8px; color:#263442;}
.sidebar ul{list-style:none; padding:0; margin:0 0 14px;}
.sidebar li{margin:6px 0;}
.sidebar a{color:#1d72f3; text-decoration:none;}
.sidebar a:hover{text-decoration:underline;}
.message-preview{
  background:#fff; border:1px solid #eaeef6; border-radius:12px; padding:12px;
  color:#374151; box-shadow:0 2px 10px rgba(18,42,66,.05);
}









/* Réinitialisez le conteneur qui contient les cartes */
.members-container {
  width: 100%;
  padding: 0;
  box-sizing: border-box;
  margin-top: 100px;
  margin-bottom: 20px;
}


/* --- Bouton filtre --- */
.members-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 10px 15px;
}

.filter-btn {
  background: #fff;
  border: 1px solid #ddd;
  padding: 6px 14px;     /* 🔽 plus large pour le texte */
  border-radius: 8px;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
    color: #333;
}

.filter-btn i {
  color: #e91e63;
  font-size: 15px;
}

.filter-btn:hover {
  background: #f8f8f8;
}

/* Sur PC → afficher texte "Filtrer" */
@media (min-width: 769px) {
  .filter-btn span {
    display: inline;
  }
}

/* Sur mobile → masquer texte, icône seule */
@media (max-width: 768px) {
  .filter-btn span {
    display: none;
  }
 .filter-btn {
   width: auto !important;
  }
}

/* En mobile : supprime le grand espace au-dessus */
@media (max-width: 768px) {
  .members-container {
    margin-top: 10px; /* ou 0 si tu veux coller direct */
    margin-bottom: 10px;
  }
}

#members-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
  align-items: start; /* aligne le contenu en haut */
}

@media (max-width: 768px) {
  #members-list {
    display: block; /* ⚡ évite la grille en mobile */
  }
}

.member-card {
  background: #fff;
  border-radius: 10px;
  padding: 20px;
  text-align: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}


.members-layout {
  display: grid;
  grid-template-columns: 2fr 1fr; /* contenu principal + sidebar */
  gap: 20px;
}

/* Sidebar */
.members-sidebar {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 10px;
  padding: 15px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

.members-sidebar h3 {
  font-size: 1rem;
  margin-bottom: 10px;
  color: #333;
}

.members-sidebar ul {
  list-style: none;
  padding: 0;
  margin: 0 0 20px 0;
}

.members-sidebar ul li {
  margin-bottom: 8px;
}

.members-sidebar ul li a {
  color: #1d72f3;
  text-decoration: none;
  font-size: 0.95rem;
}

.members-sidebar ul li a:hover {
  text-decoration: underline;
}

.message-preview {
  background: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 10px;
  font-size: 0.9rem;
  color: #444;
}


.members-sidebar .badge {
  background: #e74c3c;
  color: #fff;
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 10px;
  margin-left: 6px;
}

/* RESPONSIVE : sur mobile, la sidebar passe en dessous */
@media (max-width: 900px) {
  .members-layout {
    display: flex;
    flex-direction: column;
  }

  .members-sidebar {
    margin-top: 20px;
    order: 2; /* en dessous de la liste */
  }

  #members-list {
    order: 1;
  }
}


/* Accent masculin */
.member-card.masculin {
  border-top: 4px solid #1d72f3;  /* bleu moderne */
}

/* Accent féminin */
.member-card.feminin {
  border-top: 4px solid #e83e8c;  /* rose framboise */
}

/* Option plus discrète : effet halo */
.member-card.masculin:hover {
  box-shadow: 0 4px 12px rgba(29, 114, 243, 0.25);
}
.member-card.feminin:hover {
  box-shadow: 0 4px 12px rgba(232, 62, 140, 0.25);
}


/* Couleur du pseudo selon le sexe */
.pseudo.feminin { color: #e91e63; } /* rose */
.pseudo.masculin { color: #2196f3; } /* bleu */

/* Badge Premium */
.premium-badge {
  position: absolute;
  top: 6px;
  left: 6px;
  background: linear-gradient(135deg, #ffcc00, #ff9900);
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  padding: 2px 6px;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

/* Bordure dorée pour premium */
.member-card.premium,
.member-list-item.premium {
  border: 2px solid #ffcc00 !important;
  box-shadow: 0 0 10px rgba(255, 204, 0, 0.5);
}


.member-avatar {
  width: 120px;        /* largeur fixe */
  height: 120px;       /* hauteur fixe identique */
  border-radius: 50%;  /* cercle parfait */
  object-fit: cover;   /* recadre dans le cercle */
  display: block;
  margin: 0 auto 10px auto;
  background: #ffffff; /* fond neutre si vide */
}

.member-card img {
  max-width: 100%;
  height: auto;
  object-fit: cover;
}

.avatar-wrapper {
  width: 120px;
  height: 120px;
  margin: 0 auto 10px auto;
  position: relative;
}

.avatar-wrapper img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

/* Par défaut */
.member-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 380px;              /* hauteur totale augmentée */
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  overflow: hidden;
}

.member-card .photo-wrapper {
  flex: 1;
  height: 250px;              /* plus grand pour mieux voir */
  overflow: hidden;
  background: #f9f9f9;
}

.photo-wrapper {
  position: relative;
}


.badges_desktop {
  position: absolute !important;
  bottom: 5px !important;
  left: 5px !important;
  display: flex !important;
  gap: 6px !important; /* espace entre 💎 et 🆕 */
}

.premium-badge,
.new-badge {
  font-size: 12px;
  font-weight: bold;
  padding: 2px 6px;
  border-radius: 10px;
  line-height: 1.2;
  white-space: nowrap;
}

.premium-badge {
  background: gold;
  color: black;
}

.new-badge {
  background: #4CAF50; /* vert vif */
  color: white;
}

.member-card .photo-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;          /* zoom/remplissage */
  object-position: center;    /* centré sur visage */
  display: block;
    border-radius: 16px 16px 0 0;
}

/* Infos en dessous */
.member-card .member-info {
  text-align: center;
  padding: 8px 6px 0;
  background: #fff;
  font-size: 14px;
}

.member-card .member-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  padding: 8px 0 12px;
  background: #fff;
}

.member-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.12);
}

/* Accent masculin */
.member-card.male {
  border: 2px solid #3498db33;   /* bleu léger */
}
.member-card.male h3 {
  color: #2c7ed6;
}

/* Accent féminin */
.member-card.female {
  border: 2px solid #e8439333;   /* rose léger */
}
.member-card.female h3 {
  color: #d6336c;
}

/* On peut aussi personnaliser les boutons */
.member-card.male .btn-profile {
  background: #3498db;
}
.member-card.female .btn-profile {
  background: #e84393;
}

.member-card.neutral {
  border: 2px solid #ddd;
}





.member-actions {
  margin-top: 10px;
  display: flex;
  justify-content: center;
  gap: 12px;
}

.action-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #f0f0f0;
  color: #555;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  text-decoration: none;
  transition: all 0.2s ease;
}

.action-btn:hover {
  background: #1d72f3;
  color: #fff;
}

.action-btn.favorite {
  color: #e63946;
}

.action-btn.favorite:hover {
  background: #e63946;
  color: #fff;
}




/* --- Mode Tinder (uniquement mobile) --- */
@media (max-width: 768px) {
	
	 
.members-container {
    margin-top: 10px !important;   /* annule le 100px */
    margin-bottom: 0 !important;
  }
	 
	 
  .members-sidebar { display: none !important; }

#members-list.tinder-mode {
  display: block !important;  /* plus de grille */
  position: relative;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  height: calc(100vh - 200px);
  overflow: hidden;
}

  #members-list.tinder-mode .member-card {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 90%;
    max-width: 420px;
    height: 75%; /* 🔽 réduit de 93% à 85% */
    border-radius: 12px;
    background: #fff;
    transition: transform 0.3s ease, opacity 0.3s ease;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
  }




#members-list.tinder-mode .member-card.active {
  z-index: 10;                   /* seule la carte active est au-dessus */
}


/* Zone photo */
.tinder-mode .member-card .photo-wrapper {
  flex: 0 0 auto;
  height: 60%;                  /* prend ~60% de la hauteur de la carte */
  overflow: hidden;
}

.tinder-mode .member-card .photo-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
 /* Infos */
.tinder-mode .member-card .member-info {
  padding: 12px 10px 4px;
  text-align: center;
}

.tinder-mode .member-card .member-info h3 {
  font-size: 18px;
  margin: 4px 0;
  color: #222;
}

.tinder-mode .member-card .member-info p {
  font-size: 14px;
  color: #666;
}

/* Boutons actions */
.tinder-mode .member-card .member-actions {
  display: flex;
  justify-content: center;
  gap: 18px;
  padding: 10px 0 14px;
}

.tinder-mode .member-card .action-btn {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #f5f5f5;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  color: #444;
  transition: all 0.2s ease;
}

.tinder-mode .member-card .action-btn:hover {
  background: #1d72f3;
  color: #fff;
}

.tinder-mode .member-card .action-btn.favorite {
  color: #e63946;
}
.tinder-mode .member-card .action-btn.favorite:hover {
  background: #e63946;
  color: #fff;
}
  /* Cacher le menu du header sur mobile */
    .profile-menu {
    display: none;
  }
  
  
 
/* Conteneur pile Tinder */
.tinder-mode {
  position: relative;
  min-height: 420px;
  overflow: hidden;
}

/* Cartes */
.tinder-mode .member-card {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.15);
  transition: transform 0.35s ease, opacity 0.35s ease;
  will-change: transform, opacity;
}

/* Carte principale : au-dessus */
.tinder-mode .member-card:first-child {
  cursor: grab;
}

/* Cartes en arrière-plan avec effet perspective */
.tinder-mode .member-card:nth-child(2) {
  transform: rotate(-6deg) scale(0.95) translateX(-20px) translateY(6px);
  opacity: 0.9;
  z-index: -1;
}
.tinder-mode .member-card:nth-child(3) {
  transform: rotate(6deg) scale(0.92) translateX(20px) translateY(22px);
  opacity: 0.8;
  z-index: -2;
}

/* Les cartes encore plus loin sont invisibles */
.tinder-mode .member-card:nth-child(n+4) {
  opacity: 0;
  pointer-events: none;
}

/* Effets swipe */
.tinder-mode .member-card.swipe-left {
  transform: translateX(-120%) rotate(-20deg);
  opacity: 0;
}
.tinder-mode .member-card.swipe-right {
  transform: translateX(120%) rotate(20deg);
  opacity: 0;
}

/* Petite animation retour */
.tinder-mode .member-card.return {
  animation: cardReturn 0.4s ease forwards;
}

@keyframes cardReturn {
  from {
    transform: translateX(-50%) scale(0.9);
    opacity: 0.5;
  }
  to {
    transform: none;
    opacity: 1;
  }
}

  
  

  
  
  
}


.member-card.swipe-left  { transform: translateX(-120%) rotate(-15deg) !important; opacity: 0; }
.member-card.swipe-right { transform: translateX(120%) rotate(15deg) !important; opacity: 0; }



@media (max-width: 768px) {
  body.tinder-active {
    overflow: hidden;
    height: 100%;
  }
}



/* Empilement */
.tinder-active #members-list {
  position: relative;
}
.tinder-active .member-card {
  position: absolute;          /* cartes en pile */
  top: 0; left: 0; right: 0;
  margin: 0 auto;
  transition: transform .28s ease, opacity .28s ease;
  will-change: transform, opacity;
  touch-action: pan-y;         /* on garde le scroll vertical, bloque le horizontal natif */
}

/* Gestes */
.member-card.swipe-left  { transform: translateX(-110%) rotate(-12deg); opacity: 0; }
.member-card.swipe-right { transform: translateX( 110%) rotate( 12deg); opacity: 0; }

/* Cartes 2/3 dans la pile (effet éventail) */
.tinder-active .member-card:nth-child(n+2) { opacity: .95; }

/* Empêche le navigateur d'interpréter le geste horizontal comme un scroll */
.tinder-active .member-card { touch-action: pan-y; }

/* Visible surtout en mode tinder */
.tinder-active .member-card .member-actions {
  position: absolute;
  left: 0; right: 0; bottom: 12px;
  display: flex; justify-content: center; gap: 14px;
  pointer-events: none; /* évite de bloquer les gestes */
}
.tinder-active .member-card .member-actions .action-btn {
  pointer-events: auto;
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center;
  background: #fff;
  box-shadow: 0 10px 25px rgba(0,0,0,.18);
}
.tinder-active .member-card .member-actions .btn-pass i  { font-size: 22px; }
.tinder-active .member-card .member-actions .btn-heart i { font-size: 22px; }

/* Ensure the card is a stacking context */
.tinder-active .member-card {
  position: relative;
  overflow: hidden;
}

/* Make the photo the background layer */
.tinder-active .member-card .photo-wrapper {
  position: relative;
  z-index: 1;
}

/* Add a bottom gradient so white text is readable on photos */
.tinder-active .member-card .photo-wrapper::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 42%;
  background: linear-gradient(transparent, rgba(0,0,0,0.7));
  pointer-events: none;
  z-index: 2;
}

/* Overlay the member info on top of the photo near the bottom */
.tinder-active .member-card .member-info {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 84px;               /* leave room for the action buttons */
  z-index: 3;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.6);
}

.tinder-active .member-card .member-info h3 {
  margin: 0 0 4px 0;
  font-size: 18px;
  line-height: 1.2;
  font-weight: 700;
}
.tinder-active .member-card .member-info p {
  margin: 0;
  font-size: 14px;
  opacity: .95;
}

/* Place the action buttons above everything, centered */
.tinder-active .member-card .member-actions {
  position: absolute;
  left: 0; right: 0; bottom: 12px;
  display: flex; justify-content: center; gap: 14px;
  z-index: 4;
  pointer-events: none;                  /* don’t block gestures */
}
.tinder-active .member-card .member-actions .action-btn {
  pointer-events: auto;                  /* buttons still clickable */
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center;
  background: #fff;
  box-shadow: 0 10px 25px rgba(0,0,0,.18);
}

/* Make sure only the 4th+ cards are hidden (your JS already handles this),
   but do NOT hide the first ones */
.tinder-active .member-card.hidden { display: none; }



/* Puce de statut */
.status-dot {
  position: absolute;
  bottom: 6px;
  right: 6px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid #fff;
}

.status-dot.online {
  background-color: #2ecc71; /* vert */
}

.status-dot.offline {
  background-color: #bdc3c7; /* gris */
  opacity: 0.6;
}

/* Positionner le wrapper en relatif pour placer la puce */
.photo-wrapper {
  position: relative;
  display: inline-block;
}






@media (max-width: 768px){

  /* MODE LISTE */
  .member-list-item{
    gap:14px;
    padding:14px 14px; /* un peu plus “premium” */
  }

  .member-list-item .photo-wrapper{
    width:88px;
    height:88px;
    min-width:88px;
    min-height:88px;
    border-radius:50%;
    overflow:hidden;
    flex:0 0 88px;
  }

  .member-list-item .photo-wrapper img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }

  /* Boutons un poil plus grands */
  .member-list-item .member-actions .action-btn{
    width:44px;
    height:44px;
    border-radius:12px;
  }

  /* Texte : évite que ça déborde */
  .member-list-item .member-info{
    min-width:0;
  }
  .member-list-item .member-info h3,
  .member-list-item .member-info p{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    max-width: 42vw;
  }
}







/* --- Formulaire Filtre --- */
#form-filtre {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

#form-filtre label {
  font-size: 14px;
  font-weight: 600;
  color: #444;
}

#form-filtre input,
#form-filtre select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 14px;
  background: #f9f9f9;
  transition: border 0.2s, box-shadow 0.2s;
}

#form-filtre input:focus,
#form-filtre select:focus {
  border-color: #2a9d8f;
  box-shadow: 0 0 0 3px rgba(42,157,143,0.2);
  outline: none;
}

/* Bouton appliquer */
#form-filtre .btn {
  background: #2a9d8f;
  color: #fff;
  padding: 12px;
  font-size: 15px;
  font-weight: bold;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s;
}

#form-filtre .btn:hover {
  background: #21867a;
}



/* 🔹 Groupe checkbox dans le filtre */
#form-filtre .checkbox-group {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 15px 0;
  cursor: pointer;
  font-size: 15px;
}

/* 🔹 La case elle-même */
#form-filtre .checkbox-group input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: #2ecc71; /* Vert moderne (change la couleur si tu veux) */
}



/* Message aucun résultat */
#members-list .no-results {
  grid-column: 1 / -1;
  width: 100%;
  box-sizing: border-box;

  text-align: center;
  padding: 40px 24px;

  background: #f7f8fa;              /* légèrement teinté */
  border: 1px solid #e2e5ea;
  border-radius: 10px;
}

#members-list .no-results strong {
  display: block;
  font-size: 17px;
  color: #333;                      /* titre plus lisible */
  margin-bottom: 10px;
}

#members-list .no-results .sub {
  font-size: 15px;
  color: #666;
  margin-bottom: 8px;
}

#members-list .no-results .hint {
  font-size: 14px;
  color: #888;
  margin-bottom: 16px;
}



/* Forcer liseré sur mobile */
@media (max-width: 768px) {
  #members-list.tinder-mode .member-card.feminin {
    border-top: 4px solid #e83e8c !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
  }

  #members-list.tinder-mode .member-card.masculin {
    border-top: 4px solid #007bff !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
  }
}



/* Bouton reinitialisé */ 
/* Bouton appliquer (déjà bleu) */
.btn-blue {
  background-color: #007BFF;
  color: #fff;
  border: none;
}

/* Bouton réinitialiser */
button.btn.btn-reset {
  background-color: #dc3545 !important; /* Rouge */
  color: #fff !important;
  border: none !important;
}

button.btn.btn-reset:hover {
  background-color: #c82333 !important;
}




.date-now-cta {
  background: #007BFF;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 15px;
  text-decoration: none !important;  /* ✅ force la suppression */
  color: #fff !important;            /* ✅ évite les overrides */
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  transition: background 0.2s ease, color 0.2s ease;
  text-align: center;
  display: block;
}
.date-now-cta:hover {
  background: #2a6df4;
  color: #fff !important;
  text-decoration: none !important;  /* ✅ pas de soulignement même au hover */
}


.date-now-cta span {
margin-left: 15px;
background-color: white;
padding: 2px 8px;
border-radius: 10px;
border: 1px solid #d0d0d0;
color: #404040 !important;
}

.date-now-cta span:hover {
background-color: white;
color: #404040 !important;
}






/* Page home  */ 
.members-online {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.member-bubble {
  position: relative;
  text-align: center;
  width: 100px;
}

.member-bubble img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 3px solid #ddd;
  object-fit: cover;
}

.member-bubble.masculin img {
  border-color: #3498db;
}

.member-bubble.feminin img {
  border-color: #e84393;
}

.status-dot {
  position: absolute;
  bottom: 10px;
  right: 20px;
  width: 12px;
  height: 12px;
  background: #44bd32;
  border-radius: 50%;
  border: 2px solid #fff;
}

.bubble-info {
  margin-top: 5px;
  font-size: 14px;
}




/* === Mode LISTE (style annuaire horizontal) === */
#members-list.list-mode {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  overflow: visible !important;
  height: auto !important;
  touch-action: pan-y !important;
}

#members-list.list-mode .member-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: none;
  padding: 10px 14px;
  border: 1px solid #ddd;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

/* Ligne principale (photo + infos alignées) */
#members-list.list-mode .top-row {
  display: flex;
  align-items: center;   /* ✅ centre verticalement */
  gap: 12px;
  width: 100%;
}

/* --- Mode LISTE compact (annuaire) --- */
.member-list-item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background: #fff;
  border-radius: 8px;
  margin: 6px 0;
  padding: 8px 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  width: 100%;
}

.member-left {
  margin-right: 12px;
  flex-shrink: 0;
}

.member-left .photo-wrapper {
  width: 55px;
  height: 55px;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
}

.member-left .photo-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.member-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.member-right .member-info {
  margin-bottom: 4px;
}

.member-right .member-info h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.member-right .member-info p {
  margin: 0;
  font-size: 14px;
  color: #666;
}

.member-right .member-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-start;
}

.member-right .member-actions button {
  background: none;
  border: none;
  font-size: 18px;
  color: #555;
}










/* Bouton toggle discret */
.mode-btn {
  margin-left: 8px;
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: #555;
}

.mode-btn:hover {
  color: #000;
}

/* Cacher sur PC */
@media (min-width: 769px) {
  #btn-toggle-mode {
    display: none !important;
  }
}




/* === OVERRIDE pour mode LISTE (annuaire compact) === */
#members-list.list-mode {
  display: flex;
  flex-direction: column;
  gap: 8px; /* plus serré */
  width: 100%;
}


#members-list.list-mode .member-card {
  all: unset; /* reset tous les styles hérités */
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  width: 100% !important;
  min-height: 70px;
  padding: 10px 14px;
  margin: 0;
  border: 1px solid #ddd;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  gap: 12px;
  cursor: default !important;
  transform: none !important;
  position: relative !important;
}

/* Photo */
#members-list.list-mode .photo-wrapper {
  flex-shrink: 0;
  width: 55px;
  height: 55px;
  border-radius: 50%;
  overflow: hidden;
}
#members-list.list-mode .photo-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

/* Infos */
#members-list.list-mode .member-info {
  flex: 1;
  text-align: left;
  overflow: hidden;
}


.member-list-item .member-info h3 {
  display: flex;
  align-items: center;
  gap: 6px;
}

.member-list-item .status-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.member-list-item .status-dot.online {
  background-color: #4caf50; /* vert connecté */
}

.member-list-item .status-dot.offline {
  background-color: #aaa; /* gris déconnecté */
}


/* --- Correction statut en mode liste --- */
.member-list-item .member-info .status-dot {
  position: static !important;   /* annule le positionnement absolu de la version photo */
  margin-right: 6px;
  flex-shrink: 0;
}


#members-list.list-mode .member-info p {
  margin: 0;
  font-size: 14px;
  color: #666;
}

/* Actions */
#members-list.list-mode .member-actions {
  display: flex;
  gap: 10px;
}
#members-list.list-mode .member-actions button {
  background: none;
  border: none;
  font-size: 18px;
  color: #555;
}
#members-list.list-mode .member-actions .favorite {
  color: #e63946; /* ❤️ rouge permanent */
}


/* Boutons actions dans les cartes */
.member-actions button,
.member-actions a.action-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #f9f9f9;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  transition: all 0.2s ease;
  border: none;
}

/* Icône profil */
.member-actions .fa-user {
  color: #1d72f3; /* bleu */
}

/* Icône message */
.member-actions .fa-comments {
  color: #ff9800; /* orange */
}

/* Icône cœur */
.member-actions .fa-heart {
  color: #e63946; /* rouge */
}

/* Icône profil complet (optionnel) */
.member-actions .fa-id-card {
  color: #28a745; /* vert */
}

/* Hover effet */
.member-actions button:hover,
.member-actions a.action-btn:hover {
  background: #eee;
  transform: scale(1.1);
}


/* Mode LISTE - différencier homme / femme */
#members-list.list-mode .member-list-item.masculin {
  border-left: 4px solid #1d72f3; /* bleu */
}

#members-list.list-mode .member-list-item.feminin {
  border-left: 4px solid #e83e8c; /* rose */
}


.profile-link {
	cursor: pointer;
}


/* Boutons édition discrets */
.profile-section .btn-edit, button.btn-photo-rules {
  background: none !important;
  border: none !important;
  color: #999 !important;              /* gris sobre */
  font-size: 15px !important;
  margin-left: 6px;
  cursor: pointer;
  transition: color 0.2s ease;
  vertical-align: middle;
  box-shadow: none !important;
}

a.btn-photo-rules {
  background: none !important;
  border: none !important;
  color: #999 !important;              /* gris sobre */
  font-size: 15px !important;
  margin-left: 6px;
  cursor: pointer;
  transition: color 0.2s ease;
  vertical-align: middle;
  box-shadow: none !important;
}

.profile-section .btn-edit:hover {
  color: #666 !important;              /* gris légèrement plus foncé au survol */
  background: none !important;         /* supprime tout fond rouge éventuel */
}

/* Le titre devient un conteneur flex */
.profile-section h3{
  display:flex;
  align-items:center;
  gap:.5rem;           /* espace entre éléments (titre / boutons) */
}

/* ⚠️ 'justify-items' ne fonctionne pas en flex */
 /* .profile-section h3 { justify-items:end; }  => à supprimer */

/* Pousse tout ce qui suit (les boutons) à droite */
.profile-section h3 .btn-edit, h3 .btn-upload-photo{
  margin-left:auto;     /* met tout ce qui suit à droite */
}

/* Style des deux boutons icônes pour qu’ils soient côte à côte et jolis */
.profile-section h3 .btn-edit,
.profile-section h3 .btn-photo-rules{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#111;
  cursor:pointer;
  font-size:14px;
}


/* Différencier l’icône "règles" */
.profile-section h3 .btn-photo-rules{
  color:#666 !important;
}
.profile-section h3 .btn-photo-rules:hover{
  transform:translateY(-1px);
}

/* (inchangé) */
.gallery-item{ position:relative; display:inline-block; }
.gallery-item .btn-delete-photo:hover{ background:rgba(183,28,28,1); }


.gallery-item img.floutee {
  filter: blur(8px);
  pointer-events: none;
}

.gallery-item .photo-status {
  position: absolute;
  bottom: 6px;
  left: 6px;
  background: rgba(0,0,0,0.65);
  color: #fff;
  font-size: 12px;
  padding: 3px 6px;
  border-radius: 4px;
}

.gallery-item .photo-status.private {
  background: rgba(232, 62, 140, 0.8); /* rose framboise */
  top: 6px;
  bottom: auto;
}



.photo-actions {
  position: absolute;
  top: 6px;
  right: 6px;
  display: flex;       /* ✅ alignement horizontal */
  gap: 6px;            /* ✅ espace entre les boutons */
  z-index: 5;          /* ✅ par-dessus l’image */
}

.btn-action-photo {
  background: rgba(0,0,0,0.6);
  border: none;
  color: white;
  padding: 6px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-action-photo:hover {
  background: rgba(0,0,0,0.8);
}


.notif-toast {
  position: fixed;
  top: 15px;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px 20px;
  border-radius: 6px;
  color: #fff;
  font-weight: bold;
  z-index: 10000;
}
.notif-toast.success { background: #2a9d8f; }
.notif-toast.error { background: #e63946; }




/* --- Liste photos attente --- */
.photos-attente {
  padding: 20px;
  padding-top: calc(60px + 20px); /* pour compenser le header */
}
.photos-attente h2 {
  margin-bottom: 15px;
}
.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 15px;
}
.photo-card {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  overflow: hidden;
  text-align: center;
  cursor: pointer;
  transition: transform 0.2s;
}
.photo-card:hover {
  transform: translateY(-3px);
}
.photo-card img {
  width: 100%;
  height: 140px;
  object-fit: cover;
}
.photo-info {
  padding: 6px;
  font-size: 14px;
}








/* --- Modale modération — layout et contrôles --- */
.modal_gerer_photo .photo-moderation{
  position:relative; background:#fff; color:#111; border-radius:12px;
  width:min(1100px, 92vw);
  box-shadow:0 20px 60px rgba(0,0,0,.3);
}

.modal_gerer_photo .modal-close{
  position:absolute; top:10px; right:12px; z-index:10;
  width:38px; height:38px; border:0; border-radius:999px;
  background:rgba(0,0,0,.78); color:#fff; font-size:22px;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.modal_gerer_photo .modal-close:hover{ background:rgba(0,0,0,.9); }

.modal_gerer_photo .two-cols{
  display:grid; gap:16px; padding:16px;
  grid-template-columns: 1.2fr 1fr; /* photo à gauche, formulaire à droite */
}

.modal_gerer_photo .modal-left{
  position:relative; overflow:visible;
}
#moderationBig{
  display:block; max-width:100%; max-height:72vh; width:auto; height:auto;
  border-radius:8px; background:#111;
}

.rotate-toolbar{
  position:absolute; top:8px; left:8px; z-index:8;
  display:flex; gap:8px;
}
.rotate-toolbar button{
  width:36px; height:36px; border:0; border-radius:999px;
  background:rgba(0,0,0,.78); color:#fff; font-size:18px;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  box-shadow:0 4px 16px rgba(0,0,0,.25);
}
.rotate-toolbar button:hover{ background:rgba(0,0,0,.9); }
.rotate-toolbar button:disabled{ opacity:.55; cursor:not-allowed; }

.modal_gerer_photo .modal-right{
  max-height:76vh; overflow:auto; padding-right:4px;
}

@media (max-width: 900px){
  .modal_gerer_photo .two-cols{ grid-template-columns: 1fr; }
  .modal_gerer_photo .modal-right{ max-height:none; }
}


/* Modales génériques */
.modal_gerer_photo{
  display:none;                 /* 👈 cachée au chargement */
  position:fixed;
  inset:0;
  z-index:4000;
  background:rgba(0,0,0,.55);
  align-items:center;
  justify-content:center;
  padding:16px;
}

/* Contenu de la modale */
.modal_gerer_photo .modal-content{
  background:#fff;
  color:#111;
  border-radius:12px;
  max-width:96vw;
  max-height:90vh;
  overflow:auto;
  box-shadow:0 20px 60px rgba(0,0,0,.35);
}

/* Empêcher le scroll du body quand modale ouverte */
body.modal-open{ overflow:hidden; }


/* ===== Modale modération (hidden by default) ===== */
.modal_gerer_photo{
  position: fixed; inset: 0;
  display: none;               /* 👈 cachée par défaut */
  align-items: center; justify-content: center;
  background: rgba(0,0,0,.55);
  padding: 24px;
  z-index: 4000;
}

/* Carte modale */
.modal_gerer_photo .modal-content.photo-moderation{
  width: min(1100px, 94vw);
  max-height: 90vh;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
  overflow: hidden;
  position: relative;
}

/* Bouton fermer (toujours visible) */
.modal_gerer_photo .modal-close{
  position: absolute; top: 10px; right: 10px;
  width: 34px; height: 34px; line-height: 34px;
  border: 0; border-radius: 999px;
  background: #111; color: #fff;
  font-size: 18px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(0,0,0,.25);
}
.modal_gerer_photo .modal-close:hover{ background:#000; }

/* Corps à 2 colonnes */
.modal_gerer_photo .modal-body.two-cols{
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 18px;
  padding: 18px;
  align-items: start;
}

/* Colonne image */
.modal_gerer_photo .modal-left{
  position: relative;
  background: #111;
  border-radius: 10px;
  overflow: hidden;
}
#moderationBig{
  display: block;
  width: 100%;
  max-height: calc(90vh - 140px);
  object-fit: contain;          /* la photo ne déborde plus */
  background: #111;
}

/* Toolbar rotation */
.modal_gerer_photo .toolbar{
  position: absolute; top: 10px; right: 10px; z-index: 2;
  display: flex; gap: 8px;
}
.modal_gerer_photo .icon-btn{
  border: 0; border-radius: 10px;
  padding: 8px 10px; cursor: pointer;
  background: rgba(0,0,0,.75); color: #fff;
  backdrop-filter: blur(4px);
  box-shadow: 0 4px 10px rgba(0,0,0,.25);
}
.modal_gerer_photo .icon-btn:hover{ background: rgba(0,0,0,.9); }

/* Colonne formulaire */
.modal_gerer_photo .modal-right{
  display: flex; flex-direction: column; gap: 10px;
  max-height: calc(90vh - 80px);
  overflow: auto !important;
}
.modal_gerer_photo .modal-info{
  margin: 0 0 6px; font-weight: 600; color:#111;
}

/* Champs */
#moderationForm label{ font-size: 14px; color:#333; margin: 6px 0 4px; display:block; }
#moderationForm select,
#moderationForm textarea{
  width: 100%; box-sizing: border-box;
  border: 1px solid #e5e7eb; border-radius: 10px;
  padding: 10px 12px; font: inherit; background: #fff;
}
#moderationForm textarea{ min-height: 90px; resize: vertical; }

/* Catégories */
.cat-fieldset{
  border: 1px dashed #e5e7eb; border-radius: 10px;
  padding: 10px 12px; margin-top: 6px;
}
.cat-fieldset legend{ font-size: 12px; color:#666; padding: 0 6px; }
.cat-option{ display: inline-flex; align-items: center; gap: 8px; margin-right: 14px; }

/* Actions */
#moderationForm .actions{
  display: flex; gap: 10px; margin-top: 8px;
}
#moderationForm .btn-approve,
#moderationForm .btn-delete{
  flex: 1; border: 0; border-radius: 10px; padding: 12px 14px;
  color:#fff; cursor: pointer; font-weight: 600;
}
#moderationForm .btn-approve{ background:#10b981; }   /* vert */
#moderationForm .btn-approve:hover{ background:#0ea371; }
#moderationForm .btn-delete{ background:#ef4444; }    /* rouge */
#moderationForm .btn-delete:hover{ background:#dc2626; }

/* Responsive : pile en 1 colonne sous 900px */
@media (max-width: 900px){
  .modal_gerer_photo .modal-body.two-cols{
    grid-template-columns: 1fr;
  }
  #moderationBig{ max-height: 50vh; }
  
  
    /* ✅ la carte prend l'écran et SCROLLE */
  .modal_gerer_photo .modal-content.photo-moderation{
    width: 100%;
    height: calc(100dvh - 180px);      /* ✅ hauteur fixe = scroll fiable */
    max-height: none;
    overflow: auto;                   /* ✅ c’est ICI que ça scroll */
    -webkit-overflow-scrolling: touch;
    border-radius: 16px;
  }
  
}












/* Wrapper favoris */
.favorites-wrapper {
  padding: 15px;
}

.favorites-wrapper .title {
  font-size: 18px;
  margin-bottom: 12px;
  color: #ff2d7a;
}

.empty-state {
  text-align: center;
  color: #777;
  font-size: 14px;
}

/* Liste par défaut = colonne (mobile first) */
.favorites-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Carte compacte */
.favorite-card {
  display: flex;
  align-items: center;
  background: #fff;
  padding: 10px 14px;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease;
}
.favorite-card:hover {
  transform: translateY(-2px);
}

/* Avatar rond */
.fav-avatar img {
  width: 55px;
  height: 55px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 12px;
  border: 2px solid #eee;
}

/* Infos */
.fav-info h3 {
  margin: 0;
  font-size: 16px;
  color: #333;
}
.fav-info p {
  margin: 2px 0 0;
  font-size: 13px;
  color: #666;
}

/* Icône étoile */
.fav-icon {
  margin-left: auto;
  color: #ff9800;
  font-size: 16px;
}

/* --- Responsive : grille sur écrans larges --- */
@media (min-width: 768px) {
  .favorites-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 colonnes sur tablette */
    gap: 15px;
  }
}

@media (min-width: 1100px) {
  .favorites-list {
    grid-template-columns: repeat(3, 1fr); /* 3 colonnes sur grand écran */
  }
}











.visites-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.visite-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #fff;
  text-decoration: none;   /* ❌ enlève le soulignement */
  color: inherit;          /* ❌ garde la couleur normale */
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.visite-card:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  transform: translateY(-2px);
}

/* Avatar rond */
.visite-avatar img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
}

.visite-info h3 {
  margin: 0;
  font-size: 16px;
  color: #333;
}

.visite-info h3 .age {
  font-weight: normal;
  font-size: 14px;
  color: #666;
  margin-left: 6px;
}

.visite-info p {
  margin: 2px 0;
  font-size: 14px;
  color: #555;
}

.visite-info .total-visits {
  font-weight: bold;
  color: #1d72f3;
}

/* ✅ Desktop : grille 2 colonnes */
@media (min-width: 768px) {
  .visites-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ✅ Large desktop : grille 3 colonnes */
@media (min-width: 1200px) {
  .visites-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}






.conv-item {
  display: flex;
  flex-direction: column;
  padding: 10px;
  border-bottom: 1px solid #eee;
  cursor: pointer;
  transition: background 0.2s;
}

.conv-item:hover {
  background: #f9f9f9;
}

.conv-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.conv-user {
  font-weight: bold;
  font-size: 14px;
  color: #333;
}

.btn-delete-conv {
  background: transparent;
  border: none;
  color: #888;
  font-size: 14px;
  cursor: pointer;
  padding: 4px;
  transition: color 0.2s;
}

.btn-delete-conv:hover {
  color: #e74c3c; /* rouge */
}

.conv-preview {
  font-size: 13px;
  color: #555;
  margin-top: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.conv-date {
  font-size: 11px;
  color: #aaa;
  margin-top: 2px;
}

.conv-item.unread .conv-user {
  color: #2196f3; /* bleu si non lu */
}















/* === Dashboard global === */
.dashboard {
  padding: 16px;
  max-width: 1200px;
  margin: auto;
  font-family: Arial, sans-serif;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* === Blocs généraux === */
.sidebar-block,
.block,
.welcome-card {
  background: #fff;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  margin-bottom: 20px;
}

.spacer-10 {
  margin-top: 10px;
}

.spacer-30 {
  margin-top: 30px;
}

.admin-link {
  display: inline-block;
  margin-top: 12px;   /* espace au-dessus */
  font-weight: 500;   /* un peu plus visible */
}


.section-title {
  margin: 0 0 12px;
  font-weight: bold;
  font-size: 16px;
  color: #333;
}

/* === Bloc accueil === */
.welcome-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: #f8f9ff;
}
.welcome-info {
  display: flex;
  align-items: center;
  gap: 12px;
}
.welcome-card .avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 2px solid #2a6df4;
}
.username {
  font-weight: bold;
  color: #2a6df4;
}
.btn-blue {
  display: inline-block;
  background: #2a6df4;       /* ton bleu actuel */
  color: #ffffff !important; /* ✅ texte bien blanc, priorité maximale */
  font-weight: 600;
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 15px;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease;
  text-align: center;
}
.btn-blue:hover {
  background: #1d52b8;
  color: #ffffff !important; /* ✅ reste blanc même au hover */
  transform: translateY(-2px);
}

.main-action span {
	margin: 0 !important;
	background: none !important;
	font-weight: 700 !important;
	border: none !important;
	color: #fff !important;
}



/* === Statistiques rapides === */
.quick-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 15px;
  margin-top: 10px;
}

.stat-card {
  background: #fff;
  border-radius: 10px;
  padding: 15px;
  text-align: center;
  box-shadow: 0 2px 5px rgba(0,0,0,0.08);
  transition: transform 0.2s ease;
}

.stat-card:hover {
  transform: translateY(-3px);
}

.stat-card span {
  font-size: 1.5rem;
  display: block;
  margin-bottom: 5px;
}

.stat-card p {
  margin: 0;
  font-size: 0.95rem;
  color: #444;
  font-weight: 500;
}

.count {
  font-weight: bold;
  font-size: 1.2rem;
  color: #1d72f3;
}


/* === Liens utilisateur & filtres === */
.quick-filters,
.user-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.filter-btn,
.user-link {
  background: #f0f2f5;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 15px;
  text-decoration: none !important;  /* ✅ force la suppression */
  color: #333 !important;            /* ✅ évite les overrides */
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  transition: background 0.2s ease, color 0.2s ease;
  text-align: center;
  display: block;
}
.filter-btn:hover,
.user-link:hover {
  background: #2a6df4;
  color: #fff !important;
  text-decoration: none !important;  /* ✅ pas de soulignement même au hover */
}





.badge-pending {
  display: inline-flex;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  line-height: 22px;
  justify-content: center;
  align-items: center;
  background: #e02424;     /* rouge modération */
  color: #fff;
  border: 1px solid rgba(255,255,255,.25);
  box-shadow: 0 1px 2px rgba(0,0,0,.15);
}



.filter-btn span {
margin-left: 15px;
background-color: white;
padding: 2px 8px;
border-radius: 10px;
border: 1px solid #d0d0d0;
color: #404040 !important;
}

.filter-btn span:hover {
background-color: white;
color: #404040 !important;
}


/* === Suggestions de profils === */
.profile-carousel {
  display: flex;
  overflow-x: auto;
  gap: 12px;
}
.profile-card {
  flex: 0 0 140px;
  background: #fff;
  border-radius: 12px;
  padding: 10px;
  text-align: center;
  box-shadow: 0 2px 5px rgba(0,0,0,0.08);
  transition: transform 0.2s ease;
}
.profile-card:hover {
  transform: translateY(-3px);
}
.profile-card img {
  width: 100%;
  border-radius: 10px;
  margin-bottom: 6px;
}
.profile-card p {
  font-size: 14px;
  color: #333;
}

/* === Responsive PC : 2 colonnes === */
@media (min-width: 992px) {
  .dashboard {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 24px;
  }

  .sidebar {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .main-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .quick-stats {
    grid-template-columns: repeat(3, 1fr);
  }

  .profile-carousel {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    overflow-x: unset;
  }
}


/* === Ajustement mobile === */
@media (max-width: 768px) {
  .dashboard {
    padding: 8px; /* réduit la marge intérieure globale */
  }

  .stat-card,
  .filter-btn,
  .user-link,
  .welcome-card,
  .profile-card {
    width: 100%;           /* ✅ occupe toute la largeur */
    max-width: 100%;       /* ✅ pas de bloc étroit */
  }

  .quick-stats {
    grid-template-columns: 1fr 1fr; /* ✅ 2 colonnes sur mobile */
    gap: 10px;
  }

  .quick-filters,
  .user-links {
    flex-direction: column; /* ✅ bien empilé */
    gap: 8px;
  }
}










.coup-de-coeur-page {
  margin: 16px 0 24px;
  font-family: Arial, sans-serif;
}

.coup-de-coeur-page h2 {
  margin-bottom: 16px;
  font-size: 20px;
  color: #2a6df4;
}

.section-title {
  margin: 20px 0 10px;
  font-weight: bold;
  font-size: 16px;
  color: #333;
}

.empty-state {
  font-size: 14px;
  color: #777;
  margin: 8px 0 20px;
}

.coup-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.coup-card {
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 10px;
  padding: 10px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  text-decoration: none;
  color: #333;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.coup-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.coup-card img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin-right: 12px;
}

.coup-card h4 {
  margin: 0;
  font-size: 16px;
}

.coup-card p {
  margin: 2px 0;
  font-size: 14px;
  color: #555;
}

.coup-card .date {
  font-size: 12px;
  color: #888;
}

.coup-card.mutuel {
  border-left: 5px solid #e91e63;
}

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

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












.visites-page {
  margin: 16px;
}

.visites-page h2 {
  margin-bottom: 16px;
}

/* --- Gamification --- */
.visites-gamification {
  background: #f8f9ff;
  padding: 16px;
  border-radius: 12px;
  margin-bottom: 20px;
  text-align: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}
.visites-total {
  font-size: 18px;
  margin-bottom: 10px;
}

/* Couleur des pseudos selon sexe */
.pseudo-feminin {
  color: #e83e8c !important; /* rose */
  font-weight: 600;
}
.pseudo-masculin {
  color: #007bff !important; /* bleu */
  font-weight: 600;
}


.progress-bar {
  height: 10px;
  background: #e0e0e0;
  border-radius: 6px;
  overflow: hidden;
  margin: 8px 0;
}
.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #2a6df4, #1d52b8);
}
.progress-text {
  font-size: 14px;
  color: #555;
}
.earned-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
  margin-top: 20px;
}
.badge {
  display: inline-block;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 6px 10px;
  margin: 4px;
  font-size: 14px;
}

.badge-large {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.badge-icon-large {
  width: 96px;   /* taille du gros badge */
  height: auto;
  display: block;
  margin-bottom: 8px;
}

.badge-label {
  font-size: 14px;
  font-weight: 600;
  color: #333;
}








/* --- Visites --- */
.visite-card {
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 8px;
  margin-bottom: 12px;
  padding: 10px;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.2s;
  border-left: 6px solid transparent;
}
.visite-card:hover {
  box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}
.visite-card.visite-feminin {
  border-left-color: #e91e63;
}
.visite-card.visite-masculin {
  border-left-color: #2196f3;
}
.visite-avatar img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
}
.visite-info {
  margin-left: 12px;
}
.visite-info h3 {
  margin: 0;
  font-size: 1.1rem;
}
.visite-info .age {
  font-weight: normal;
  font-size: 0.9rem;
  margin-left: 6px;
  color: #777;
}









/* --- Modale restriction crédits --- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-box {
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  max-width: 400px;
  text-align: center;
  box-shadow: 0 6px 16px rgba(0,0,0,0.3);
  animation: pop 0.3s ease-out;
}

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

.modal-box h2 {
  margin-bottom: 12px;
  font-size: 20px;
  color: #333;
}

.modal-box p {
  margin: 8px 0;
  color: #555;
}

.modal-actions {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.btn {
  display: inline-block;
  padding: 10px 16px;
  border-radius: 8px;
  font-weight: bold;
  text-decoration: none;
  transition: background 0.2s;
}

.btn-yes {
  background: #4CAF50;
  color: white;
}

.btn-yes:hover { background: #45a049; }

.btn-no {
  background: #ccc;
  color: #333;
}

.btn-no:hover { background: #bbb; }

.no-credit {
  color: #d9534f;
  font-weight: bold;
}











/* ===============================
   Suggestions de profils
   =============================== */
/* Conteneur */
#suggestions-wrapper {
  text-align: center;
  margin-top: 15px;
}

/* Grille des cartes */
#suggestions {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 15px;
  margin-bottom: 15px;
}

/* Carte suggestion */
.suggestion-card {
  display: block;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  text-align: left;
  text-decoration: none;
  transition: transform 0.2s ease;
  position: relative;
    border: 2px solid transparent; /* on gère avec les classes sexe */
}
.suggestion-card:hover {
  transform: translateY(-3px);
}


/* Masculin = bleu */
.suggestion-card.masculin {
  border-color: #2196f3;
}
.suggestion-card.masculin .suggestion-info h4 {
  color: #1565c0;
}

/* Féminin = rose */
.suggestion-card.feminin {
  border-color: #e91e63;
}
.suggestion-card.feminin .suggestion-info h4 {
  color: #ad1457;
}

/* Autre = gris neutre */
.suggestion-card.autre {
  border-color: #9e9e9e;
}


/* Image + wrapper */
.card-image-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 1/1; /* carré */
  overflow: hidden;
}
.suggestion-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: filter 0.3s ease;
}

/* Overlay cadenas */
.card-overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: #fff;
}

/* Info */
.suggestion-info {
  padding: 8px 10px;
}
.suggestion-info h4 {
  margin: 0;
  font-size: 14px;
  color: #333;
}
.suggestion-info p {
  margin: 4px 0 0;
  font-size: 12px;
  color: #666;
}

/* Floutage non-premium */
.blurred img {
  filter: blur(20px);
  pointer-events: none;
}

/* Bouton voir plus */
#see-more-suggestions {
  padding: 8px 15px;
  font-size: 14px;
  border: none;
  border-radius: 8px;
  background: #007bff;
  color: #fff;
  cursor: pointer;
  transition: background 0.2s;
}
#see-more-suggestions:hover {
  background: #0056b3;
}

/* Texte upgrade */
.upgrade-hint {
  margin-top: 10px;
  font-size: 13px;
  color: #444;
}
.upgrade-hint .premium-link {
  font-weight: bold;
  color: #007bff;
  text-decoration: none;
}
.upgrade-hint .premium-link:hover {
  text-decoration: underline;
}



.suggestions-banner {
  background: #f0f7ff;
  border: 1px solid #cce0ff;
  border-radius: 6px;
  padding: 8px 12px;
  margin: 10px 0;
  font-size: 14px;
  color: #004085;
  text-align: center;
}





.premium-container {
  background: #fff;
  padding: 32px 24px;
  border-radius: 16px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.1);
  max-width: 420px;
  width: 90%;
  text-align: center;
  margin: 40px auto;
  animation: fadeIn 0.6s ease;
}

.premium-container h2 {
  margin: 16px 0 8px;
  font-size: 1.6rem;
}

.premium-container p {
  margin: 8px 0;
  line-height: 1.5;
}

.icon {
  font-size: 3rem;
  margin-bottom: 12px;
}

.icon.success { color: #2ecc71; }
.icon.cancel { color: #e74c3c; }

.btn-return {
  display: inline-block;
  margin-top: 20px;
  padding: 12px 20px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  background: #3498db;
  color: #fff;
  transition: background 0.2s ease;
}

.btn-return:hover {
  background: #2980b9;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.success-page { background: #eafaf1; }
.cancel-page  { background: #fdeaea; }


/* Supprimer les puces des listes d'offres Premium */
.premium-offers ul {
  list-style: none;   /* enlève les points noirs */
  padding-left: 0;    /* retire le retrait à gauche */
  margin: 0;          /* harmonise l'affichage */
}

.premium-offers li {
  margin: 6px 0;      /* espace entre chaque ligne */
  font-size: 15px;
  line-height: 1.4;
}


/* Bloc Premium dans sidebar */
.sidebar-block.premium-promo {
  background: #fff8f5;
  border: 2px solid #ff9800;
  border-radius: 12px;
  padding: 16px;
  margin-top: 20px;
  text-align: center;
}

.sidebar-block.premium-promo .premium-benefits {
  list-style: none;
  padding: 0;
  margin: 12px 0;
  text-align: left;
}

.sidebar-block.premium-promo .premium-benefits li {
  font-size: 0.9rem;
  margin: 6px 0;
}

.btn-premium-cta {
  display: inline-block;
  background: #7b3fe4 !important;
  color: #fff !important;
  padding: 10px 16px;
  border-radius: 8px;
  font-weight: bold;
  margin-top: 12px;
  text-decoration: none !important;
}

.btn-premium-cta:hover {
  background: #5c2db6 !important;
    text-decoration: none !important;
}

.premium-note {
  font-size: 0.85rem;
  color: #666;
  margin-top: 10px;
}

.premium-active {
  color: #2e7d32;
  font-weight: bold;
  margin: 10px 0;
}





/* Bloc qui contient les badges Premium et Nouveau */
.badges_desktop {
  position: absolute;
  top: 6px;
  left: 6px;
  display: flex;
  flex-direction: column; /* ou row si tu veux côte à côte */
  gap: 4px;
  z-index: 2;
}

/* Style générique des badges */
.premium-badge,
.new-badge {
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 6px;
  font-weight: 600;
  color: #fff;
  line-height: 1.2;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  display: inline-block;
}

/* Premium */
.premium-badge {
  background: linear-gradient(135deg, #ffcc00, #ff9900);
}

/* Nouveau */
.new-badge {
  background: #28a745; /* Vert visible */
}



/* --- Corriger Premium en mode swipe --- */

/* Contour doré autour de la carte Premium */
#members-list.tinder-mode .member-card.premium {
  border: 2px solid #ffcc00 !important;
  box-shadow: 0 0 12px rgba(255, 204, 0, 0.5) !important;
}

/* Badges dans Tinder mode */
#members-list.tinder-mode .member-card .badges_desktop {
  position: absolute;
  top: 8px;
  left: 8px;
  display: flex;
  flex-direction: column; /* ou row si tu veux les mettre côte à côte */
  gap: 4px;
  z-index: 10; /* 🔥 remonte au-dessus de l'image */
}

/* Style des badges */
#members-list.tinder-mode .member-card .premium-badge,
#members-list.tinder-mode .member-card .new-badge {
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 6px;
  font-weight: bold;
  color: #fff;
  line-height: 1.2;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}

/* Premium badge spécifique */
#members-list.tinder-mode .member-card .premium-badge {
  background: linear-gradient(135deg, #ffcc00, #ff9900);
  color: #000;
}

/* Nouveau badge spécifique */
#members-list.tinder-mode .member-card .new-badge {
  background: #28a745;
}


/* --- Pseudo coloré dans tous les modes --- */
.member-card .pseudo.masculin {
  color: #007bff !important; /* Bleu */
}
.member-card .pseudo.feminin {
  color: #e83e8c !important; /* Rose */
}

/* --- Premium contour doré même en mode swipe --- */
.member-card.premium {
  border: 2px solid #ffcc00;
  box-shadow: 0 0 12px rgba(255, 204, 0, 0.5);
  border-radius: 12px;
}

/* --- Badges regroupés en haut à gauche --- */
.member-card .badges_desktop {
  position: absolute;
  top: 8px;
  left: 8px;
  display: flex;
  flex-direction: row; /* horizontal */
  gap: 6px;
  z-index: 10;
}

/* Style général des badges */
.member-card .premium-badge,
.member-card .new-badge {
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 6px;
  font-weight: bold;
  color: #fff;
  line-height: 1.2;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}

/* Premium badge spécifique */
.member-card .premium-badge {
  background: linear-gradient(135deg, #ffcc00, #ff9900);
  color: #000;
}

/* Nouveau badge spécifique */
.member-card .new-badge {
  background: #28a745;
}



/* Forcer une taille lisible partout */
.member-card {
  font-size: 16px !important;
}

.member-card .pseudo {
  font-size: 18px !important;
  font-weight: 600;
}







#toggle-advanced-filters {
  background: #f0f0f0;
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 14px;
  cursor: pointer;
  width: 100%;
  text-align: left;
  transition: background 0.2s;
}

#toggle-advanced-filters:hover {
  background: #e8e8e8;
}

#toggle-advanced-filters .chevron {
  float: right;
  transition: transform 0.3s;
}

#toggle-advanced-filters.active .chevron {
  transform: rotate(180deg);
}


#advanced-filters .form-group {
  margin-bottom: 1rem;
}

#advanced-filters .form-inline {
  display: flex;
  gap: 10px;
  margin-bottom: 1rem;
}

#advanced-filters hr {
  border: none;
  border-top: 1px solid #ddd;
  margin: 1rem 0;
}






/* ===== NAVIGATION (PC + Mobile) ===== */

/* Lien de base */
.main-nav a,
.mobile-nav a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 8px;
  transition: all 0.25s ease;
  font-weight: 500;
  color: #444;
  text-decoration: none;
}

.main-nav a i,
.mobile-nav a i {
  margin-right: 6px;
  font-size: 18px;
}

/* Couleurs d’icônes (au repos, non actif) */
.main-nav a[data-page="home.php"] i,
.mobile-nav a[data-page="home.php"] i { color: #1d72f3; }

.main-nav a[data-page="members.php"] i,
.mobile-nav a[data-page="members.php"] i { color: #e63946; }

.main-nav a[data-page="messagerie.php"] i,
.mobile-nav a[data-page="messagerie.php"] i { color: #f4a261; }

.main-nav a[data-page="visites.php"] i,
.mobile-nav a[data-page="visites.php"] i { color: #2a9d8f; }

.main-nav a[data-page="profile.php"] i,
.mobile-nav a[data-page="profile.php"] i { color: #6a4c93; }

/* Hover */
.main-nav a:hover,
.mobile-nav a:hover {
  background: linear-gradient(135deg, #1d72f3 0%, #4dabf7 100%);
  color: #fff !important;
}
.main-nav a:hover i,
.mobile-nav a:hover i {
  color: #fff !important;
  transform: scale(1.1);
  transition: all 0.2s ease-in-out;
}

/* Actif (PC + Mobile) */
.main-nav a.active,
.mobile-nav a.active {
  background: linear-gradient(135deg, #1d72f3 0%, #4dabf7 100%);
  color: #fff !important;
  box-shadow: 0 3px 6px rgba(0,0,0,0.15);
  border: none;
}
.main-nav a.active i,
.mobile-nav a.active i {
  color: #fff !important;
}

/* ===== MENU MOBILE ===== */
:root {
  --mobile-nav-h: 64px;
}

.mobile-nav {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: var(--mobile-nav-h);
  background: #fff;
  border-top: 1px solid #ddd;
  display: none;  /* affiché uniquement en mobile */
  justify-content: space-around;
  align-items: center;
  padding: 6px 0;
  z-index: 1000;
}

.mobile-nav a {
  flex: 1;
  text-align: center;
  font-size: 12px;
  flex-direction: column;
  gap: 4px;
}

.mobile-nav a i { font-size: 20px; }

/* Actif mobile → fond coloré par section */
.mobile-nav a.active[data-page="home.php"] { background: #1d72f3; }
.mobile-nav a.active[data-page="members.php"] { background: #e63946; }
.mobile-nav a.active[data-page="messagerie.php"] { background: #f4a261; }
.mobile-nav a.active[data-page="visites.php"] { background: #2a9d8f; }
.mobile-nav a.active[data-page="profile.php"] { background: #6a4c93; }

.mobile-nav a.active i,
.mobile-nav a.active span {
  color: #fff !important;
}




/* ===== Mobile: bulle de notif Messages ===== */
@media (max-width: 768px) {
  /* l'ancre devient le repère de positionnement */
  .mobile-nav a { position: relative; }

  /* style de la bulle */
  .mobile-nav .notif-bubble {
    position: absolute;
    top: 2px;
    right: 18px;                /* ajuste si besoin (16–22px) */
    display: none;              /* JS la met en inline-block quand >0 */
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: #e02424;        /* fond rouge visible */
    color: #fff !important;     /* texte blanc */
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    border: 2px solid #fff;     /* liseré blanc pour ressortir sur le fond */
    box-shadow: 0 1px 3px rgba(0,0,0,.25);
    pointer-events: none;       /* ne bloque pas le tap sur le bouton */
    z-index: 2;
  }
}


.stats-intro {
  font-size: 15px;
  margin-bottom: 10px;
  color: #444;
  font-style: italic;
}

.stats-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.stats-list li {
  background: #f8f9fb;
  margin: 4px 0;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 14px;
}




.activity-intro {
  font-size: 14px;
  margin-bottom: 1rem;
  color: #444;
  text-align: center;
  font-style: italic;
}

.activity-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.activity-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 15px;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 10px;
  text-decoration: none;
  color: #333;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  transition: all 0.2s ease-in-out;
}

.activity-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.activity-card .icon {
  font-size: 22px;
  flex-shrink: 0;
}

.activity-card .title {
  font-weight: bold;
  font-size: 15px;
}

.activity-card .subtitle {
  font-size: 13px;
  color: #777;
  display: block;
}

/* Desktop : grille plus élégante */
@media (min-width: 768px) {
  .activity-cards {
    flex-direction: row;
    justify-content: space-between;
  }
  .activity-card {
    flex: 1;
    flex-direction: column;
    text-align: center;
    padding: 20px;
  }
  .activity-card .icon {
    font-size: 28px;
    margin-bottom: 8px;
  }
}




/* === Footer (clair & harmonieux) === */
.site-footer {
  background: #fafafa;                 /* clair */
  color: #666;                         /* gris doux */
  padding: 24px 20px;
  text-align: center;
  border-top: 1px solid #eee;          /* liseré fin */
  display: block;
}

.site-footer .footer-container {
  max-width: 1000px;
  margin: 0 auto;
}

.site-footer .footer-logo img {
  height: 40px;
  margin-bottom: 12px;
  filter: saturate(0.9);
}

/* Liens du footer */
.site-footer a {
  color: #666;
  text-decoration: none;
  margin: 0 10px;
  transition: color .2s ease, opacity .2s ease;
}
.site-footer a:hover {
  color: #1d72f3;                      /* bleu principal du site */
}

/* Navigation secondaire */
.footer-nav { margin: 12px 0; }
.footer-nav a { font-size: 14px; }

/* Réseaux sociaux */
.social-links { margin: 10px 0; }
.social-links a {
  font-size: 18px;
  color: #777;
}
.social-links a:hover { color: #1d72f3; }

/* Copyright */
.site-footer .copyright {
  font-size: 13px;
  margin-top: 12px;
  color: #888;
}

/* Mobile : on garde ton choix de masquer */
@media (max-width: 768px) {
  .site-footer { display: none; }
}







/* === FIX: barre mobile collée en bas === */
:root {
  --mobile-nav-h: 64px;
}

/* Forcer l'affichage et la position collée en bas (mobile uniquement) */
@media (max-width: 768px) {
  /* cacher le menu desktop */
  .site-header nav.main-nav { display: none !important; }

  /* afficher la barre mobile en bas */
  .mobile-nav {
    display: flex !important;
    position: fixed !important;
    left: 0; right: 0; bottom: 0;
    height: var(--mobile-nav-h);
    background: #fff;
    border-top: 1px solid #ddd;
    justify-content: space-around;
    align-items: center;
    padding: 6px 0;
    z-index: 10000; /* au-dessus du contenu */
  }

  /* éviter que le contenu passe sous la barre */
  body.dashboard-page,
  .dashboard-page .dashboard-container,
  main.dashboard-container {
    padding-bottom: calc(var(--mobile-nav-h) + 8px) !important;
  }
}

/* Support des zones sûres iOS (notch) */
@supports (padding: max(0px)) {
  @media (max-width: 768px) {
    .mobile-nav {
      height: calc(var(--mobile-nav-h) + max(env(safe-area-inset-bottom), 0px));
      padding-bottom: max(env(safe-area-inset-bottom), 6px);
    }
    body.dashboard-page,
    .dashboard-page .dashboard-container,
    main.dashboard-container {
      padding-bottom: calc(var(--mobile-nav-h) + max(env(safe-area-inset-bottom), 0px) + 8px) !important;
    }
  }
}





/* ----- Fix UNIQUEMENT le badge "Nouveau" sans toucher Premium ----- */
.members-container #members-list .member-card .new-badge {
  /* annule les anciens styles de ruban vertical */
  position: static !important;
  display: inline-block !important;
  height: auto !important;
  width: auto !important;
  padding: 4px 8px !important;
  margin: 0 !important;
  line-height: 1.1 !important;
  border-radius: 999px !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.12) !important;
  box-sizing: border-box !important;

  /* couleurs du badge "Nouveau" */
  background: #10b981 !important; /* vert */
  color: #fff !important;

  /* désactive toute rotation/écriture verticale héritée des anciens rubans */
  transform: none !important;
  writing-mode: horizontal-tb !important;
  white-space: nowrap !important;

  /* nettoie les contraintes de position d’un ancien ruban absolu */
  top: auto !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
}

/* si d’anciens styles ajoutent des triangles via ::before/::after, on les coupe */
.members-container #members-list .member-card .new-badge::before,
.members-container #members-list .member-card .new-badge::after {
  content: none !important;
  display: none !important;
}

/* s’assure que le conteneur des badges n’étire pas la carte */
.members-container #members-list .member-card .badges_desktop {
  display: flex;
  gap: 6px;
  align-items: flex-start;
}



/* ===========================
   Page Paramètres — Thème clair (SCOPÉ)
   =========================== */
.settings-page {
  --sp-bg: #ffffff;
  --sp-card: #ffffff;
  --sp-soft: #f7f8fa;
  --sp-border: #e5e7eb;
  --sp-muted: #6b7280;
  --sp-text: #111827;
  --sp-primary: #e91e63;
  --sp-primary-weak: rgba(233, 30, 99, .12);
  --sp-success: #10b981;
  --sp-danger: #ef4444;
  --sp-warning: #f59e0b;
  --sp-radius: 14px;
  --sp-gap: 16px;
  --sp-shadow: 0 8px 20px rgba(17, 24, 39, .06);
  color: var(--sp-text);
}

/* Conteneur */
.settings-page .settings-wrap {
  max-width: 1100px;
  margin: 24px auto 64px;
  padding: 0 16px;
  background: transparent;
}

/* Titres */
.settings-page .settings-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 8px 0 18px;
  color: var(--sp-text);
}
.settings-page .settings-subtitle {
  font-size: 14px;
  color: var(--sp-muted);
  margin-top: -6px;
  margin-bottom: 22px;
}

/* ===== Grille principale =====
   - Mobile: 1 colonne
   - ≥560px: 2 colonnes
   - ≥1024px: 3 colonnes
*/
.settings-page .settings-grid {
  display: grid;
  gap: 16px;
}
@media (min-width: 560px) {
  .settings-page .settings-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .settings-page .settings-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Spans optionnels */
.settings-page .settings-card.span-2 { grid-column: span 2; }
.settings-page .settings-card.span-3 { grid-column: 1 / -1; }

/* ===== Cartes ===== */
.settings-page .settings-card {
  background: var(--sp-card);
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius);
  box-shadow: var(--sp-shadow);
  padding: 18px;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.settings-page .settings-card h3 {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 10px;
  color: var(--sp-text);
}
.settings-page .settings-hint {
  font-size: 14px;
  color: var(--sp-muted);
  margin: 0 0 14px;
}

/* Danger zone */
.settings-page .danger-card {
  border-color: rgba(239, 68, 68, .28);
}
.settings-page .danger-card .settings-hint { color: #b91c1c; }

/* ===== Formulaires ===== */
.settings-page .settings-form { margin-top: 6px; }
.settings-page .form-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
}
@media (max-width: 700px) {
  .settings-page .form-row { grid-template-columns: 1fr; }
}
.settings-page .form-row label {
  font-size: 14px;
  font-weight: 600;
  color: var(--sp-text);
}

.settings-page input[type="text"],
.settings-page input[type="email"],
.settings-page input[type="password"],
.settings-page textarea,
.settings-page select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--sp-border);
  border-radius: 10px;
  background: var(--sp-soft);
  color: var(--sp-text);
  font-size: 14px;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
  box-sizing: border-box;
}
.settings-page textarea { min-height: 110px; resize: vertical; }
.settings-page input:focus,
.settings-page textarea:focus,
.settings-page select:focus {
  border-color: var(--sp-primary);
  box-shadow: 0 0 0 3px var(--sp-primary-weak);
  background: #fff;
}

/* ===== Boutons (scopés) ===== */
.settings-page .btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 12px;
}
.settings-page .btn {
  --h: 42px;
  height: var(--h);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 16px;
  font-weight: 700;
  font-size: 14px;
  border-radius: 10px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .06s ease, box-shadow .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
  user-select: none;
  text-decoration: none;
}
.settings-page .btn:active { transform: translateY(1px); }

.settings-page .btn-primary {
  background: var(--sp-primary);
  color: #fff;
  box-shadow: 0 6px 14px rgba(233, 30, 99, .24);
}
.settings-page .btn-primary:hover { filter: brightness(1.05); }

.settings-page .btn-outline {
  background: #fff;
  color: var(--sp-text);
  border-color: var(--sp-border);
}
.settings-page .btn-outline:hover {
  border-color: var(--sp-primary);
  color: var(--sp-primary);
}

.settings-page .btn-danger {
  background: var(--sp-danger);
  color: #fff;
  box-shadow: 0 6px 14px rgba(239, 68, 68, .18);
}
.settings-page .btn-danger:hover { filter: brightness(1.05); }

/* “Actions en bas” si besoin */
.settings-page .card-actions { margin-top: auto; }

/* ===== Incognito (toggle) ===== */
.settings-page .incognito-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 10px 0 2px;
}
.settings-page .switch {
  position: relative;
  display: inline-block;
  width: 54px;
  height: 30px;
}
.settings-page .switch input {
  position: absolute;
  opacity: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.settings-page .slider {
  position: absolute;
  inset: 0;
  background: #e5e7eb;
  border: 1px solid var(--sp-border);
  border-radius: 999px;
  transition: background .2s ease, border-color .2s ease;
}
.settings-page .slider::before {
  content: "";
  position: absolute;
  left: 3px; top: 3px;
  width: 24px; height: 24px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,.15);
  transition: transform .2s ease;
}
.settings-page .switch input:checked + .slider {
  background: var(--sp-primary);
  border-color: transparent;
}
.settings-page .switch input:checked + .slider::before { transform: translateX(24px); }
.settings-page .switch input:disabled + .slider { opacity: .6; cursor: not-allowed; }

/* ===== Messages / retours ===== */
.settings-page .settings-response {
  margin-top: 8px;
  min-height: 18px; /* évite les sauts */
  font-size: 14px;
  color: var(--sp-muted);
}
.settings-page .settings-response.success { color: var(--sp-success); }
.settings-page .settings-response.error { color: var(--sp-danger); }

/* ===== Sidebar mini-blocs ===== */
.settings-page .settings-aside { display: grid; gap: 16px; }
.settings-page .mini-list { display: grid; gap: 10px; }
.settings-page .mini-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--sp-border);
  border-radius: 10px;
  background: #fff;
  color: var(--sp-muted);
  font-size: 14px;
}

/* Séparateur doux */
.settings-page .sep {
  height: 1px;
  background: var(--sp-border);
  margin: 14px 0;
}

/* Accessibilité focus */
.settings-page a:focus,
.settings-page button:focus,
.settings-page .btn:focus,
.settings-page input:focus-visible,
.settings-page select:focus-visible,
.settings-page textarea:focus-visible {
  outline: 3px solid var(--sp-primary-weak);
  outline-offset: 2px;
  border-radius: 10px;
}



/* ====== Largeur confortable des champs + cartes “wide” ====== */
.settings-page .settings-grid {
  /* si tu es déjà en 2 colonnes + aside, garde-le.
     Ici on priorise la largeur des formulaires en permettant
     à certaines cartes de s'étendre sur toute la grille. */
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 16px;
}

/* Les cartes marquées .wide prennent toute la rangée */
.settings-page .settings-card.wide {
  grid-column: 1 / -1;
}

/* Si ton navigateur supporte :has(), on force la pleine largeur
   spécifiquement pour les cartes mot de passe et e-mail */
@supports(selector(:has(*))) {
  .settings-page .settings-card:has(#formChangePassword),
  .settings-page .settings-card:has(#formChangeEmail) {
    grid-column: 1 / -1;
  }
}

/* Form rows : libellé (fixe) + champ qui prend vraiment tout l'espace */
.settings-page .settings-form .form-row {
  display: grid;
  grid-template-columns: 220px minmax(360px, 1fr);
  gap: 14px;
  align-items: center;
}

@media (max-width: 820px) {
  .settings-page .settings-form .form-row {
    grid-template-columns: 1fr;
  }
}

/* Champs au max + padding adapté pour l’icône œil */
.settings-page .settings-form input[type="text"],
.settings-page .settings-form input[type="email"],
.settings-page .settings-form input[type="password"] {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 44px 10px 12px; /* place à droite pour le bouton œil */
}

/* Wrapper du champ + toggle */
.settings-page .pw-wrap {
  position: relative;
  width: 100%;
}

/* input : place pour le bouton à droite */
.settings-page .pw-wrap > input[type="password"],
.settings-page .pw-wrap > input[type="text"] {
  width: 100%;
  padding-right: 48px !important; /* laisse la place au bouton */
  box-sizing: border-box;
}

/* bouton œil */
.settings-page .pw-toggle {
  position: absolute;
  top: -10px;
  right: 8px;
  height: 100%;
  width: 40px;
  display: flex;
  align-items: center;     /* vertical center */
  justify-content: center; /* horizontal center */
  border: 0;
  background: transparent;
  cursor: pointer;
  color: #9ca3af;
  padding: 0;
}


.settings-page .pw-toggle:hover {
  background: rgba(0,0,0,.04);
}

/* L'icône interne (SVG) */
/* icônes */
.settings-page .pw-toggle svg {

  width: 20px; height: 20px;
}


/* état par défaut: œil visible, œil barré caché */
.settings-page .pw-toggle .eye { display: inline; }
.settings-page .pw-toggle .eye-off { display: none; }

/* quand le mot de passe est visible -> on montre l’œil barré */
.settings-page .pw-toggle.is-visible .eye { display: none; }
.settings-page .pw-toggle.is-visible .eye-off { display: inline; }

/* Pills / sous-motifs */
.choice-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.choice-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border: 1px solid var(--sp-border, #e5e7eb);
  border-radius: 999px;
  background: #fff;
  color: #333;
  cursor: pointer;
  user-select: none;
  transition: background .15s, border-color .15s, transform .05s;
}
.choice-chip input {
  appearance: none;
  width: 14px; height: 14px;
  border: 1px solid #bbb; border-radius: 3px;
  display: inline-block;
  position: relative;
}
.choice-chip input:checked {
  border-color: #1d72f3; background: #1d72f3;
}
.choice-chip:active { transform: translateY(1px); }

/* Simple repère visuel quand le flag est actif */
body.swipe-v2-flag #members-list::after {
  content: "SWIPE_V2 ON";
  position: fixed;
  right: 8px;
  bottom: 8px;
  font: 600 11px/1 system-ui, sans-serif;
  padding: 4px 6px;
  background: rgba(0,0,0,.6);
  color: #fff;
  border-radius: 4px;
  z-index: 9999;
  pointer-events: none;
}




/* Empêche toute coupe des cartes rotées */
#members-list.tinder-mode {
  overflow: visible !important;
}

/* Cartes plus étroites en mode Tinder (mobile) */
@media (max-width: 768px) {
  .tinder-mode .member-card {
    width: 88vw;              /* au lieu de quasiment 100vw */
    max-width: 520px;         /* borne de sécurité si grands téléphones */
    margin: 0 auto;           /* centrage */
    transform-origin: center; /* rotation propre autour du centre */
  }

  /* Option : un poil plus d’air autour du deck */
  #members-list.tinder-mode {
    padding-left: 4vw;
    padding-right: 4vw;
  }
}

/* (Facultatif) un peu plus étroit aussi sur petits desktops/tablettes */
@media (min-width: 769px) and (max-width: 1200px) {
  .tinder-mode .member-card {
    width: 420px;
    margin: 0 auto;
  }
}

/* Retire l’ombre noire sur les textes pseudo/âge/ville */
.member-card .member-info h3.pseudo,
.member-card .member-info p {
  text-shadow: none !important;
  color: #1f2937;        /* gris foncé net */
}


/* Le header/toolbar des membres doit toujours passer AU-DESSUS */
#members-toolbar, .members-toolbar {
  position: sticky; /* si tu l’utilises en sticky */
  top: var(--header-height, 56px);   /* adapte si besoin */
  z-index: 40;
  background: #fff;                  /* pour éviter la transparence lors du scroll */
}

/* Le deck ne doit pas être coupé ET doit laisser de l'air en haut */
#members-list.tinder-mode {
  overflow: visible !important;
  padding-top: 8px;                  /* évite que la 1re carte touche le toolbar */
}

/* Assure que la 1re carte reste sous le toolbar si z-index mis ailleurs */
.tinder-mode .member-card {
  position: relative;
  z-index: 1;
}



/* === FIX chevauchement badges (desktop) === */
/* On s'assure que le conteneur badges est en absolu, aligné en haut-gauche */
.member-card .photo-wrapper { position: relative; }
.member-card .badges_desktop{
  position: absolute !important;
  bottom: 8px !important;
  left: 8px !important;
  display: flex !important;
  flex-direction: row !important;   /* badges côte à côte */
  gap: 6px !important;
  align-items: flex-start !important;
  flex-wrap: nowrap !important;
  z-index: 10 !important;
}

/* Neutralise toute ancienne position absolue des badges individuels */
.member-card .badges_desktop .premium-badge,
.member-card .badges_desktop .new-badge{
  position: static !important;
  display: inline-flex !important;
  align-items: center !important;
  white-space: nowrap !important;
  line-height: 1.1 !important;
  padding: 3px 8px !important;
  border-radius: 8px !important;
  transform: none !important;
  writing-mode: horizontal-tb !important;
}

/* Optionnel : assure une lisibilité homogène */
.member-card .badges_desktop .premium-badge{
  background: linear-gradient(135deg, #ffcc00, #ff9900) !important;
  color: #000 !important;
}
.member-card .badges_desktop .new-badge{
  background: #28a745 !important;
  color: #fff !important;
}




/* Scope fiable (spécificité > 0) */
.member-card .photos-badge,
.member-card .photo-count {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: #f6f6f6 !important;
  border-radius: 999px !important;
  padding: 2px 8px !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
}

.member-card .photos-badge i,
.member-card .photo-count i {
  font-size: 12px !important;
  line-height: 1 !important;
}





/* === Page Crédits (credits_info.php) === */
.credits-info {
  max-width: 720px;
  margin: 2rem auto;
  background: #fff;
  border-radius: 12px;
  padding: 28px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.credits-info h2 {
  text-align: center;
  color: #222;
  margin-bottom: 1rem;
}

.credits-info p {
  text-align: center;
  color: #555;
}

.premium-banner,
.upgrade-banner {
  background: linear-gradient(90deg, #ffeaa7, #fdcb6e);
  border-radius: 10px;
  padding: 12px 16px;
  margin: 16px 0;
  font-weight: 600;
  text-align: center;
  color: #222;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.premium-banner i {
  color: #f1c40f;
}

.premium-banner span {
  color: #007bff;
}

.upgrade-banner {
  background: #f8f9fa;
  border: 2px dashed #007bff;
  flex-direction: column;
}

.btn-upgrade {
  display: inline-block;
  margin-top: 6px;
  background: #007bff;
  color: white;
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 14px;
  text-decoration: none;
}

.credits-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin: 1.5rem 0;
}

.credits-col {
  border-radius: 8px;
  padding: 16px;
}

.credits-col.debit {
  background: #ffe5e9;
  border: 2px solid #e83e8c;
}

.credits-col.gain {
  background: #e5f2ff;
  border: 2px solid #007bff;
}

.credits-col h3 {
  margin-bottom: 0.8rem;
  font-size: 1.1rem;
  text-align: center;
}

.credits-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.credits-col li {
  padding: 6px 0;
  font-size: 15px;
  color: #333;
}

.credits-hint {
  text-align: center;
  margin-top: 1rem;
  font-style: italic;
  color: #555;
}


@media (max-width: 768px) {
  .credits-grid {
    grid-template-columns: 1fr; /* une seule colonne sur mobile */
    gap: 16px;
  }

  .credits-col {
    text-align: center;
  }

  .credits-col h3 {
    font-size: 1rem;
  }
}





/* public/css/ban.css */

/* ==== Base ==== */
#ban-root{
  --gap: 24px;
  --radius: 12px;
  --card-bg: #fff;
  --line: rgba(0,0,0,.08);
  --muted: #6b7280;
}

#ban-root .section-title{ margin:0 0 6px; font-size:18px; line-height:1.2; }
#ban-root .section-subtitle{ margin:0 0 16px; color:var(--muted); font-size:14px; }
#ban-root .sep{ margin:20px 0; border:0; height:1px; background:var(--line); }

/* ==== Formulaire ==== */
#banForm{
  background:var(--card-bg);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:16px;
  box-shadow:0 2px 6px rgba(0,0,0,.04);
}
#banForm .form-row{ display:flex; flex-direction:column; gap:6px; margin-bottom:12px; }
#banForm label{ font-size:13px; color:#374151; }
#banForm input[type="text"],
#banForm select,
#banForm textarea,
#banSearch{
  width:100%; border:1px solid rgba(0,0,0,.12); border-radius:10px;
  padding:10px 12px; font-size:14px; background:#fff; outline:none;
  transition:border-color .15s ease, box-shadow .15s ease;
}
#banForm textarea{ resize:vertical; }
#banForm input:focus, #banForm select:focus, #banForm textarea:focus, #banSearch:focus{
  border-color:#2563eb; box-shadow:0 0 0 3px rgba(37,99,235,.08);
}
#banForm .form-actions{ margin-top:6px; }
#banForm .btn.btn-red{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 14px; border-radius:10px; font-weight:600;
  border:1px solid transparent; background:#ef4444; color:#fff;
  cursor:pointer; transition:transform .06s, box-shadow .15s, background .15s;
}
#banForm .btn.btn-red:hover{ background:#dc2626; }
#banForm .btn.btn-red:active{ transform:translateY(1px); }
#banResponse{ font-size:14px; min-height:18px; }

/* ==== Liste des bans ==== */
.ban-list-wrap{
  background:var(--card-bg);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:0 2px 6px rgba(0,0,0,.04);
}

.ban-table{ width:100%; display:grid; grid-template-rows:auto 1fr; }

.ban-thead{
  display:grid;
  grid-template-columns:2fr 1.4fr 1.1fr 1.2fr;
  background:#f6f7f9; border-bottom:1px solid rgba(0,0,0,.06);
  color:#4a5568; font-weight:600; font-size:14px;
}
.ban-thead > div{ padding:12px 14px; white-space:nowrap; }

.ban-tbody{ display:block; }

.ban-row{
  display:grid;
  grid-template-columns:2fr 1.4fr 1.1fr 1.2fr;
  border-bottom:1px solid rgba(0,0,0,.05);
}
.ban-row:last-child{ border-bottom:none; }
.ban-cell{ padding:12px 14px; display:flex; flex-direction:column; gap:6px; min-width:0; }
.ban-cell strong{ color:#1f2937; }
.ban-details{
  margin-top:4px; font-size:13px; line-height:1.4; color:#6b7280;
  background:#f8fafc; border:1px dashed rgba(0,0,0,.08);
  border-radius:8px; padding:8px 10px; word-break:break-word;
}
.ban-row:hover{ background:#fbfdff; }

.ban-pseudo-line {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
}

.btn-unban {
  margin-left: auto;
  padding: 4px 10px;
  font-size: 12px;
  border-radius: 6px;
  border: 1px solid #2e7d32;
  background: #e8f5e9;
  color: #2e7d32;
  cursor: pointer;
  white-space: nowrap;
}

.btn-unban:hover {
  background: #c8e6c9;
}


/* Empêche les colonnes de se recalculer bizarrement */
.ban-thead, .ban-row{
  grid-template-columns: minmax(0,2fr) minmax(0,1.4fr) minmax(0,1.1fr) minmax(0,1.2fr);
}

/* La cellule pseudo doit pouvoir rétrécir */
.ban-cell{ min-width:0; }

/* ✅ Le duo pseudo + bouton en GRID (1fr + auto) = jamais de retour à la ligne “sale” */
.ban-pseudo-line{
  display:grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items:center;
  column-gap:10px;
  width:100%;
  min-width:0;
}

/* pseudo ellipsis au lieu de pousser */
.ban-pseudo-line strong{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* bouton toujours à droite */
.btn-unban{
  justify-self:end;
  white-space:nowrap;
  flex:0 0 auto;
  padding:4px 10px;
  font-size:12px;
  border-radius:6px;
  border:1px solid #2e7d32;
  background:#e8f5e9;
  color:#2e7d32;
  cursor:pointer;
}
.btn-unban:hover{ background:#c8e6c9; }



/* =========================
   LAYOUT 2 COLONNES DESKTOP
   ========================= */
@media (min-width:1024px){
  /* Grille parent : 2 colonnes + densification pour remonter la colonne droite */
  #ban-root{
    display:grid;
    grid-template-columns:minmax(340px,420px) minmax(560px,1fr);
    gap:var(--gap);
    align-items:start;
    grid-auto-flow:dense;  /* <= IMPORTANT : remonte la colonne droite */
  }

  /* Colonne gauche : le titre 1, le sous-titre et le formulaire */
  #ban-root > .section-title:first-of-type,
  #ban-root > .section-subtitle,
  #ban-root > #banForm{
    grid-column:1;
  }

  /* On ne veut pas du <hr> sur desktop */
  #ban-root > .sep{ display:none; }

  /* Colonne droite : le titre 2 (historique), la recherche (form-row direct) et la liste */
  #ban-root > .section-title:nth-of-type(2),
  #ban-root > .form-row,         /* c’est UNIQUEMENT la rangée de recherche car c’est un enfant direct */
  #ban-root > #banListWrap{
    grid-column:2;
  }

  /* Aligner la colonne droite en haut */
  #ban-root > .section-title:nth-of-type(2){ margin-top:0; align-self:start; }

  /* Option : petit espaçage entre le titre 2 et la recherche */
  #ban-root > .form-row{ margin:8px 0 12px; max-width:680px; }

  /* Titre intégré dans la carte si tu préfères (désactive si tu gardes le h3) */
  /* #ban-root > #banListWrap::before{
    content:"📜 Historique des bannissements";
    display:block; font-weight:700; font-size:16px; color:#111827; margin:0 0 10px;
  } */
}

/* =========================
   MOBILE : tout empilé
   ========================= */
@media (max-width:1023.98px){
  .ban-thead{ display:none; }
  .ban-row{
    grid-template-columns:1fr;
    border:none; border-bottom:1px solid rgba(0,0,0,.06);
    padding:10px 12px;
  }
  .ban-cell{ padding:6px 0; }
  .ban-cell:nth-child(4){ color:#4b5563; font-size:12.5px; }
}

/* =========================
   DARK MODE (optionnel)
   ========================= */
body.dark #ban-root{
  --card-bg:#0f172a; --line:rgba(255,255,255,.06); --muted:#93a3af;
}
body.dark #banForm, body.dark .ban-list-wrap{ box-shadow:none; }
body.dark #banForm label{ color:#cbd5e1; }
body.dark #banForm input, body.dark #banForm select, body.dark #banForm textarea, body.dark #banSearch{
  background:#0b1224; color:#e5e7eb; border-color:rgba(255,255,255,.12);
}
body.dark #banSearch::placeholder{ color:#64748b; }
body.dark .ban-thead{ background:#0b1224; color:#cbd5e1; border-bottom-color:rgba(255,255,255,.06); }
body.dark .ban-row{ border-bottom-color:rgba(255,255,255,.06); }
body.dark .ban-row:hover{ background:#0b1224; }
body.dark .ban-cell strong{ color:#e5e7eb; }
body.dark .ban-details{ background:#0b1224; color:#93a3b8; border-color:rgba(255,255,255,.08); }



/* La carte historique prend toute la largeur dispo */
#ban-root .form-row,
#ban-root #banListWrap{
  width: 100%;
  max-width: 100%;
}

/* Si un écran est trop étroit, on scroll horizontalement au lieu de casser */
.ban-list-wrap{
  overflow-x: auto;  /* au lieu de forcer un wrap moche */
}
.ban-table{
  min-width: 760px; /* ajuste si tu veux, mais ça stabilise la table */
}




:root {
  --bg:#ffffff;
  --card:#ffffff;
  --muted:#556070;
  --text:#0f172a;
  --ok:#16a34a;
  --warn:#b45309;
  --bad:#b91c1c;
  --border:#e5e7eb;
  --shadow:0 6px 24px rgba(16,24,40,.06);
}

.stats-wrap { max-width:1200px; margin:0 auto; padding:16px; color:var(--text); background:var(--bg); }
.stats-wrap h1 { font-size:28px; margin:0 0 8px; }
.stats-wrap .subtitle{opacity:.8;margin-top:-4px;margin-bottom:16px}

.grid { display:grid; gap:16px; grid-template-columns: repeat(12, 1fr); }
.card { background:var(--card); border-radius:14px; padding:16px; box-shadow: var(--shadow); border:1px solid var(--border); }
.kpi { grid-column: span 3; }
.kpi h3 { margin:0; font-size:12px; color:var(--muted); font-weight:600; letter-spacing:.02em; text-transform:uppercase; }
.kpi .val { font-size:28px; font-weight:700; margin-top:6px; color:var(--text); white-space:nowrap; }
.kpi.small .val { font-size:22px; }

.span-12 { grid-column: 1 / -1; }
.span-6 { grid-column: span 6; }
.row { display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.badge { font-size:12px; padding:2px 10px; border-radius:999px; background:#f1f5f9; color:#334155; border:1px solid var(--border); }

/* ❌ remove the global canvas height that caused the growth */
/* canvas { width:100%; height:320px; } */

/* ✅ chart sizing controlled by the wrapper */
.chart-box {
  position: relative;
  height: 280px;            /* adjust 240–360px to taste */
  max-height: 320px;
  overflow: hidden;         /* safety against legend overflow */
}

/* make sure the canvas fills the wrapper and doesn't pick up old inline sizes */
.chart-box > canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

/* tables */
table { width:100%; border-collapse: collapse; margin-top:8px; font-size:14px; table-layout: fixed; }
th, td { padding:10px 8px; border-bottom:1px solid var(--border); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
th { text-align:left; color:var(--muted); font-weight:600; }

.ok{color:var(--ok)} .warn{color:var(--warn)} .bad{color:var(--bad)}

@media (max-width: 900px){
  .kpi{grid-column: span 6}
  .span-6{grid-column: span 12}
  .chart-box{ height:240px; max-height:260px; } /* a bit shorter on tablets */
}
@media (max-width: 600px){
  .kpi{grid-column: span 12}
  .chart-box{ height:220px; max-height:240px; }
}





/*  // === Blocage / Déblocage — page blocked.php ===  */
.blocked-page { padding: 10px 4px 20px; }
.blocked-page .page-title { margin: 0 0 6px; }
.blocked-page .page-subtitle, .blocked-page .hint { opacity:.8; margin: 0 0 12px; }
.blocked-page .sep { margin:16px 0; opacity:.15; }

.cards-list { display:grid; gap:10px; grid-template-columns: repeat(auto-fill,minmax(280px,1fr)); }
.blocked-card, .result-card {
  display:flex; align-items:center; gap:12px;
  padding:10px; border:1px solid #e5e7eb; border-radius:12px; background:#fff;
}
.border-feminin { border-color:#f9a8d4; }
.border-masculin { border-color:#93c5fd; }

.avatar { width:48px; height:48px; border-radius:50%; object-fit:cover; }
.info { flex:1; min-width:0; }
.info .name { font-weight:600; }
.info .meta { font-size:.9em; opacity:.75; }

.btn { cursor:pointer; padding:8px 12px; border-radius:10px; border:none; }
.btn-outline { border:1px solid #ddd; background:#fff; }
.btn-danger  { background:#b00020; color:#fff; }
.btn-primary { background:#0ea5e9; color:#fff; }

.search-row { margin:8px 0 12px; }
#blockSearchInput { width:100%; max-width:420px; padding:10px 12px; border-radius:10px; border:1px solid #ddd; }
.result-card .right { display:flex; gap:8px; }
.placeholder { opacity:.7; padding:6px 0; }
.error { color:#b00020; }

.blocked-card .btn-unblock { background:#0ea5e9 !important; color:#fff !important; }








/* Banniere information compte en attente et nouveaux inscrits non visible */
.info-banner{
  display:flex; align-items:center; gap:.75rem;
  padding:.75rem 1rem; margin:12px 16px 8px;
  border-radius:12px; background:#eef6ff; color:#0b3552;
  box-shadow:0 2px 10px rgba(0,0,0,.06);
  border:1px solid #d7e9ff; position:sticky; top:0; z-index:20;
}
.info-banner .icon{ font-size:1.15rem; }
.info-banner .text{ flex:1; line-height:1.35; }
.info-banner .close{
  border:0; background:transparent; font-size:20px; line-height:1;
  cursor:pointer; color:#0b3552; opacity:.7;
}
.info-banner .close:hover{ opacity:1; }
@media (max-width: 768px){
  .info-banner{ margin:8px 8px 6px; border-radius:10px; }
}
/* cache VRAIMENT le bandeau quand il est hidden */
.info-banner[hidden] { 
  display: none !important; 
}







/* ===== Page attente (sobre & cohérente) ===== */
#waitlist-root{
  --bg:#fff;
  --text:#333;
  --muted:#666;
  --line:#e8e8e8;
  --card:#fff;
  --shadow:0 2px 8px rgba(0,0,0,.06);
  --primary:#1d72f3;   /* bleu du site */
  --danger:#e63946;    /* rouge du site */
  --radius:12px;

  width:min(96vw, 1000px);
  margin: 18px auto 40px;
  padding: 16px;
  background: var(--bg);
  border:1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  color: var(--text);
}

#waitlist-root h1{
  margin:0 0 6px;
  font-size: clamp(20px, 2.4vw, 26px);
  line-height:1.25;
}
#waitlist-root > p{
  margin:0 0 14px;
  color: var(--muted);
  font-size: 14px;
}

/* Grille */
#waitlist-root .grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width:720px){
  #waitlist-root .grid{ grid-template-columns: 1.2fr 1fr; }
}

/* Cartes */
#waitlist-root .card{
  background: var(--card);
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  box-shadow: 0 1px 4px rgba(0,0,0,.04);
}
#waitlist-root .card h3{
  margin:0 0 8px;
  font-size: 18px;
}
#waitlist-root .card p{ margin:0 0 8px; color:#444; }
#waitlist-root .card ul{ margin:6px 0 8px; padding-left:18px; }
#waitlist-root .card li{ margin:6px 0; }

/* Séparateur */
#waitlist-root .separator{
  height:1px;
  background: var(--line);
  margin: 10px 0;
}

/* KPI ratio */
#waitlist-root .kpi{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border:1px solid var(--line);
  border-radius: 999px;
  background:#f4f8ff;              /* léger bleu */
  color:#1f3b68;
  font-weight:700;
  font-size:13px;
}
#waitlist-root .kpi::before{
  content:"•";
  color: var(--primary);
  font-size:18px;
  line-height:1;
}

/* Boutons (scopés) */
#waitlist-root .btn-row{ display:flex; flex-wrap:wrap; gap:10px; }

#waitlist-root .btn{
  appearance:none;
  border:1px solid var(--line);
  background:#f5f7fb;
  color:#222;
  padding:10px 14px;
  border-radius:8px;
  cursor:pointer;
  font-weight:600;
  text-decoration:none;
  transition: background .2s ease, border-color .2s ease, transform .06s;
  display:inline-flex; align-items:center; justify-content:center;
}
#waitlist-root .btn:hover{ background:#eef3ff; border-color:#d7e6ff; }
#waitlist-root .btn:active{ transform: translateY(1px); }

/* Variante primaire (lien premium ou CTA) */
#waitlist-root a.btn,
#waitlist-root .btn.primary{
  background: var(--primary);
  color:#fff;
  border-color: var(--primary);
}
#waitlist-root a.btn:hover,
#waitlist-root .btn.primary:hover{ filter: brightness(1.05); }

#waitlist-root a.btn:hover { background:#e63946; }

/* Indications courtes */
#waitlist-root .hint{
  color: var(--muted);
  font-size: 13.5px;
  margin-top: 6px;
}

/* Très petits écrans */
@media (max-width: 360px){
  #waitlist-root .btn{ width:100%; }
  #waitlist-root .kpi{ width:100%; justify-content:center; }
}

/* Mode clair/standard déjà géré par défaut – dark optionnel, discret */
@media (prefers-color-scheme: dark){
  #waitlist-root{
    --bg:#0f1115; --card:#12151c; --text:#e8eaee; --muted:#a7afbd;
    --line:#232833; --shadow:none;
    background: var(--bg); color: var(--text);
  }
  #waitlist-root .card{ background: var(--card); border-color: var(--line); }
  #waitlist-root .btn{ background:#1a2030; color:#e8eaee; border-color:#2a3241; }
  #waitlist-root .btn:hover{ background:#202840; }
  #waitlist-root .kpi{ background:#17233b; color:#dbe9ff; border-color:#24324a; }
}








/* ==============================
   Reset Password page (reset_password.php)
   ============================== */

body.reset-page {
  --rp-bg: #0f172a;        /* slate-900 */
  --rp-card: #0b1226;      /* slate-950-ish */
  --rp-text: #e5e7eb;      /* gray-200 */
  --rp-muted: #9ca3af;     /* gray-400 */
  --rp-primary: #6366f1;   /* indigo-500 */
  --rp-primary-2: #4f46e5; /* indigo-600 */
  --rp-danger: #ef4444;    /* red-500 */
  --rp-success: #22c55e;   /* green-500 */
  --rp-ring: rgba(99,102,241,.35);

  min-height: 100dvh;
  margin: 0;
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(99,102,241,.15), transparent 60%),
    radial-gradient(900px 500px at 100% 0%, rgba(236,72,153,.12), transparent 60%),
    var(--rp-bg);
  color: var(--rp-text);
  font: 16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  display: grid;
  place-items: center;
  padding: 24px;
}

.reset-wrap {
  width: 100%;
  max-width: 520px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
  padding: 28px;
  backdrop-filter: blur(6px);
}

.reset-title {
  margin: 0 0 18px;
  font-size: clamp(22px, 3.5vw, 28px);
  letter-spacing: .2px;
}

.reset-muted {
  color: var(--rp-muted);
  margin: 0 0 18px;
  font-size: 14px;
}

/* Form */
#resetForm {
  display: grid;
  gap: 14px;
}

#resetForm label {
  font-size: 14px;
  color: var(--rp-muted);
}

#resetForm input[type="password"] {
  width: 100%;
  appearance: none;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(15,23,42,.6);
  color: var(--rp-text);
  border-radius: 10px;
  padding: 12px 14px;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

#resetForm input[type="password"]::placeholder {
  color: #94a3b8; /* slate-400 */
}

#resetForm input[type="password"]:focus {
  border-color: var(--rp-primary);
  box-shadow: 0 0 0 4px var(--rp-ring);
  background: rgba(15,23,42,.8);
}

/* Button */
#resetForm button[type="submit"] {
  cursor: pointer;
  border: 0;
  border-radius: 10px;
  padding: 12px 16px;
  font-weight: 600;
  color: #404040;
  background: linear-gradient(180deg, var(--rp-primary), var(--rp-primary-2));
  box-shadow: 0 8px 20px rgba(79,70,229,.35);
  transition: transform .06s ease, filter .15s ease, box-shadow .15s ease;
}

#resetForm button[type="submit"]:hover {
  filter: brightness(1.05);
  box-shadow: 0 10px 24px rgba(79,70,229,.45);
}

#resetForm button[type="submit"]:active {
  transform: translateY(1px);
}

/* Message de réponse */
#resetResp {
  margin-top: 10px;
  font-size: 14px;
  min-height: 18px;
}

/* Helpers si tu veux poser des classes plutôt que color inline via JS */
#resetResp.is-success { color: var(--rp-success); }
#resetResp.is-error   { color: var(--rp-danger); }

/* Lien invalide */
.reset-error {
  color: var(--rp-danger);
  font-weight: 600;
}

/* Responsive padding un peu plus large sur mobile */
@media (max-width: 420px) {
  .reset-wrap { padding: 22px; }
}





/* =============================
   Formulaire "Mot de passe oublié"
   ============================= */

/* Carte + centrage (optionnel) */
.forgot-card {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
  width: 100%;
  max-width: 420px;
  padding: 18px;
  margin: 20px auto;
}

/* Le formulaire en lui-même */
#forgotPasswordForm {
  display: grid;
  gap: 12px;
}

/* Libellé */
#forgotPasswordForm label {
  display: block;
  font-weight: 600;
  font-size: 14px;
  color: #333;
}

/* Champ email */
#forgotPasswordForm input[type="email"] {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 15px;
  background: #fff;
  transition: border-color .2s, box-shadow .2s, background .2s;
  outline: none;
}

#forgotPasswordForm input[type="email"]::placeholder {
  color: #9aa3ad;
}

#forgotPasswordForm input[type="email"]:focus {
  border-color: #1d72f3;
  box-shadow: 0 0 0 3px rgba(29,114,243,.18);
  background: #fff;
}

/* Bouton envoyer — même style que .btn-primary bleu */
#forgotPasswordForm button[type="submit"] {
  background: #1d72f3;
  color: #fff;
  border: none;
  padding: 12px;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  width: 100%;
  transition: background .2s, transform .06s, box-shadow .15s;
  box-shadow: 0 6px 14px rgba(29,114,243,.25);
}

#forgotPasswordForm button[type="submit"]:hover {
  background: #155fc8;
}

#forgotPasswordForm button[type="submit"]:active {
  transform: translateY(1px);
}

/* Zone de retour (message succès/erreur) */
#forgotResponse {
  margin-top: 8px;
  min-height: 18px;  /* évite les sauts */
  font-size: 14px;
  color: #666;
}

#forgotResponse.success { color: #2a9d8f; }  /* vert succès */
#forgotResponse.error   { color: #e63946; }  /* rouge erreur */

/* Petit resserrage sur mobile */
@media (max-width: 480px) {
  .forgot-card { padding: 16px; margin: 14px auto; }
  #forgotPasswordForm button[type="submit"] { font-size: 15px; }
}








/* ============================
   PRIVATE ACCESS — styles scopés
   ============================ */
.private-access-page{
  --pa-primary: #7b3fe4;          /* violet du site */
  --pa-primary-2: #ff2d7a;        /* rose du site */
  --pa-text: #111827;
  --pa-muted: #6b7280;
  --pa-line: #e5e7eb;
  --pa-card: #fff;
  --pa-radius: 12px;
  --pa-shadow: 0 2px 10px rgba(18,42,66,.06);
  max-width: 980px;
  margin: 18px auto 32px !important;
  padding: 16px;
  background: var(--pa-card);
  border: 1px solid var(--pa-line);
  border-radius: var(--pa-radius);
  box-shadow: var(--pa-shadow);
  color: var(--pa-text);
}

/* Titre & sous-titres */
.private-access-page h2{
  margin: 0 0 10px;
  font-size: clamp(20px, 2.2vw, 24px);
  font-weight: 800;
  letter-spacing: -.02em;
}
.private-access-page h3{
  margin: 12px 0 8px;
  font-size: 16px;
  font-weight: 700;
  color: var(--pa-text);
}

/* Formulaire d’ajout */
.private-access-page .inline-form{
  display: flex !important;
  gap: 8px !important;
  margin: 10px 0 6px !important;
}
.private-access-page #pa-input{
  flex: 1;
  padding: 12px 12px;
  border: 1px solid var(--pa-line);
  border-radius: 10px;
  background: #f9fafb;
  font-size: 15px;
  outline: none;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.private-access-page #pa-input:focus{
  background: #fff;
  border-color: var(--pa-primary);
  box-shadow: 0 0 0 3px rgba(123,63,228,.15);
}

/* Bouton “Ajouter” – override du rouge global */
.private-access-page .btn-primary,
.private-access-page button[type="submit"]{
  all: unset;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 18px;
  border-radius: 10px;
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  background: linear-gradient(90deg, var(--pa-primary), var(--pa-primary-2));
  box-shadow: 0 6px 14px rgba(123,63,228,.25);
}
.private-access-page .btn-primary:hover{ filter: brightness(1.05); }
.private-access-page .btn-primary:active{ transform: translateY(1px); }

/* Feedback */
.private-access-page #pa-feedback{
  min-height: 18px;
  font-size: 14px;
}

/* Liste des profils */
.private-access-page .pa-list{
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  display: grid;
  gap: 8px;
}
.private-access-page .pa-list li{
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid var(--pa-line);
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.private-access-page .pa-list li .pa-pseudo{
  font-weight: 700;
  color: var(--pa-text);
}
.private-access-page .pa-list li .pa-meta{
  font-size: 12px;
  color: var(--pa-muted);
}

/* Bouton retirer – VISIBLE, discret, pas rouge par défaut */
.private-access-page .pa-remove-btn{
  appearance: none;
  border: 1px solid #d9dbe1;
  background: #fff;
  color: #b00020;                 /* texte rouge doux */
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  opacity: 1 !important;          /* force visible (si un style global le masque) */
  transition: background .15s, border-color .15s, color .15s, transform .06s;
}
.private-access-page .pa-remove-btn:hover{
  background: #ffecec;
  border-color: #e6a6ad;
}
.private-access-page .pa-remove-btn:active{ transform: translateY(1px); }

/* Petit spinner texte utilisé par le JS */
.private-access-page .pa-spinner{
  font-size: 13px;
  color: var(--pa-muted);
}

/* Mobile */
@media (max-width: 560px){
  .private-access-page{ padding: 12px; }
  .private-access-page .inline-form{ flex-direction: column; }
}






/* ===== Scoped: Status Center (home.php) ===== */
/* Tout est scellé sous .status-center pour éviter les fuites de styles */
.status-center {
  --nz-primary: #7b3fe4;          /* violet du site */
}



.status-center {
  border: 1px solid var(--nz-border);
  border-radius: 12px;
  background: #fff;
  padding: 10px 12px;
  margin-bottom: 16px;
  color: #0f172a !important;   
}

/* Entête */
.status-center .status-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 0 6px;
}
.status-center .status-header strong {
  font-size: 15px;
  color: var(--nz-text);
}
.status-center .status-toggle {
  appearance: none;
  border: 1px solid var(--nz-border);
  background: #f8fafc !important;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
  color: #0f172a !important;   
}

/* Corps */
.status-center .status-body { margin-top: 6px; }

.status-center .status-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px dashed var(--nz-border);
}
.status-center .status-item:first-child { border-top: 0; }

.status-center .status-item-main {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  max-width: 70%;
}

.status-center .status-icon {
  font-size: 20px;
  line-height: 1;
}

.status-center .status-title {
  font-weight: 700;
  color: var(--nz-text);
  margin-bottom: 4px;
}

.status-center .status-desc {
  color: var(--nz-muted);
  font-size: 14px;
}

/* CTA (ne touche pas vos .btn globales hors du composant) */
.status-center .status-cta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* --- Patch lisibilité boutons dans .status-center --- 
.status-center .status-cta .btn,
.status-center .status-cta a.btn,
.status-center .status-cta button.btn {
  background: var(--nz-primary) !important;
  border: 1px solid #e5e7eb !important;
  color: #0f172a !important; 
  text-decoration: none !important;
  box-shadow: none !important;
}*/

.status-center .status-cta .btn:hover,
.status-center .status-cta a.btn:hover,
.status-center .status-cta button.btn:hover {
  background: #eef2f7 !important;
  color: var(--nz-primary) !important;
}

/* bouton d’action principal (ex: “Compléter mon profil”) */
.status-center .status-cta .btn-primary {
  background: var(--nz-primary) !important;
  border-color: var(--nz-primary) !important;
  color: #fff !important;
  box-shadow: 0 6px 16px rgba(255,46,122,.18) !important;
}
.status-center .status-cta .btn-primary:hover {
  background: var(--nz-primary-600) !important;
  border-color: var(--nz-primary-600) !important;
  color: #fff !important;
}

/* si tu utilises des “ghost” dans ce bloc */
.status-center .status-cta .btn-ghost {
  background: #f8fafc !important;
  border: 1px solid #e5e7eb !important;
  color: #0f172a !important;
}


/* Responsive propre au composant */
@media (max-width: 768px) {
  .status-center .status-item { flex-direction: column; gap: 8px; }
  .status-center .status-item-main { max-width: 100%; }
}








/* Scoped to regles_photos.php */
#photo-rules { 
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color:#111; 
}
#photo-rules .pr-hero {
  background: #f8fafc;
  border:1px solid #e5e7eb;
  border-radius:16px;
  padding:18px 20px;
  margin-bottom:16px;
}
#photo-rules h2 { margin:0 0 6px; font-size:1.35rem; }
#photo-rules h3 { margin:0 0 10px; font-size:1.05rem; }
#photo-rules p { margin:0 0 8px; line-height:1.5; color:#444; }

#photo-rules .pr-cta{
  display:inline-block;
  margin-top:8px;
  padding:10px 14px;
  border-radius:10px;
  background:#111827;
  color:#fff !important;
  text-decoration:none;
  font-weight:600;
  box-shadow:0 10px 30px rgba(255,105,180,0.25), 0 2px 10px rgba(255,105,180,0.35);
}
#photo-rules .pr-cta:hover{ opacity:.95; }

#photo-rules .pr-card{
  border:1px solid #e5e7eb;
  background:#fff;
  border-radius:14px;
  padding:16px;
  margin:12px 0;
}

#photo-rules .pr-grid{
  display:grid;
  gap:12px;
}
@media (min-width: 820px){
  #photo-rules .pr-grid{ grid-template-columns: 1fr 1fr; }
}

#photo-rules .pr-list{ margin:0; padding-left:18px; }
#photo-rules .pr-list li{ margin:6px 0; }
#photo-rules .pr-list.ok li::marker{ content: "✔ "; color:#059669; }
#photo-rules .pr-list.no li::marker{ content: "✖ "; color:#dc2626; }

#photo-rules .pr-steps{ padding-left:18px; margin:0; }
#photo-rules .pr-steps li{ margin:6px 0; }

#photo-rules .pr-note{ margin-top:8px; font-size:.95rem; color:#6b7280; }

#photo-rules .pr-faq details{
  border:1px solid #eef0f3;
  border-radius:10px;
  padding:10px 12px;
  margin:8px 0;
  background:#fafafa;
}
#photo-rules .pr-faq summary{
  cursor:pointer; font-weight:600;
}
#photo-rules .pr-faq p{ margin:8px 0 0; }

#photo-rules .pr-footer{
  text-align:center;
  margin-top:16px;
  color:#6b7280;
}
#photo-rules .pr-updated{ font-size:.85rem; margin-top:8px; }






/* === BADGES + ONLINE — MODE CARTE (grid/tinder) ======================= */
.member-card .photo-wrapper{position:relative} /* au cas où */
.member-card .status-dot{
  position:absolute; right:10px; bottom:10px;
  width:14px; height:14px; border-radius:50%;
  border:2px solid #fff; box-shadow:0 0 0 1px rgba(0,0,0,.06);
}
.member-card .status-dot.online{background:#22c55e}
.member-card .status-dot.offline{background:#bdbdbd}

.member-card .badges_desktop{
  position:absolute; left:10px; bottom:10px;
  display:flex; align-items:center; gap:6px; z-index:2;
  /* pour qu’ils reposent tous sur la même ligne que le point online */
}

/* puces compactes et lisibles sur photo */
.premium-badge,
.new-badge,
.photos-badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 8px; border-radius:999px; font-size:12px; line-height:1;
  background:rgba(255,255,255,.92); color:#111;
  box-shadow:0 2px 6px rgba(0,0,0,.15);
  backdrop-filter:saturate(1.2);
}

.premium-badge{ 
  background:linear-gradient(135deg,#ffd54f,#ffb300);
  color:#111; font-weight:700;
}
.new-badge{
  background:#22c55e; color:#fff; font-weight:700;
}
.photos-badge i{font-size:12px; line-height:1}

/* === BADGES + ONLINE — MODE LISTE ==================================== */
.member-list-item .member-info .pseudo{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  /* aligne le texte, le point online et les badges sur une seule ligne */
}
.member-list-item .member-info .status-dot{
  width:10px; height:10px; border-radius:50%;
  border:2px solid #fff; box-shadow:0 0 0 1px rgba(0,0,0,.08);
}
.member-list-item .member-info .status-dot.online{background:#22c55e}
.member-list-item .member-info .status-dot.offline{background:#bdbdbd}

/* versions “liste” des puces — mêmes styles que sur la photo pour cohérence */
.member-list-item .premium-icon,
.member-list-item .badge-new,
.member-list-item .photo-count{
  display:inline-flex; align-items:center; gap:6px;
  padding:3px 8px; border-radius:999px; font-size:12px; line-height:1;
  background:#f5f5f5; color:#111; box-shadow:0 1px 3px rgba(0,0,0,.08);
}

.member-list-item .premium-icon{
  background:linear-gradient(135deg,#ffd54f,#ffb300); color:#111; font-weight:700;
}
.member-list-item .badge-new{
  background:#22c55e; color:#fff; font-weight:700;
}
.member-list-item .photo-count i{font-size:12px; line-height:1}

/* === PETITS DÉTAILS D’EMPILAGE ======================================= */
/* Assure la lecture au-dessus de l’image (si gradient/tint sur la photo) */
.member-card .badges_desktop,
.member-card .status-dot{ z-index:3 }



/* === PATCH FORCE — badges en bas à gauche + online en bas à droite === */

/* 1) Assure le contexte */
#members-list .member-card .photo-wrapper { position: relative !important; }

/* 2) Badges en bas à gauche (tous les modes, y compris Tinder) */
#members-list .member-card .badges_desktop,
#members-list.tinder-mode .member-card .badges_desktop {
  position: absolute !important;
  top: auto !important;
  right: auto !important;
  bottom: 10px !important;
  left: 10px !important;
  display: flex !important;
  gap: 6px !important;
  align-items: center !important;
  z-index: 5 !important;
}

/* neutralise d’anciens rubans/positions sur les badges individuels */
#members-list .member-card .badges_desktop .premium-badge,
#members-list .member-card .badges_desktop .new-badge,
#members-list .member-card .badges_desktop .photos-badge {
  position: static !important;
  transform: none !important;
  writing-mode: horizontal-tb !important;
}

/* 3) Point online en bas à droite (tous les modes) */
#members-list .member-card .status-dot,
#members-list.tinder-mode .member-card .status-dot {
  position: absolute !important;
  top: auto !important;
  left: auto !important;
  right: 10px !important;
  bottom: 10px !important;
  width: 14px !important;
  height: 14px !important;
  border-radius: 50% !important;
  border: 2px solid #fff !important;
  box-shadow: 0 0 0 1px rgba(0,0,0,.08) !important;
}
#members-list .member-card .status-dot.online  { background: #22c55e !important; }
#members-list .member-card .status-dot.offline { background: #bdbdbd !important; }


.credit-badge{
  font-weight:600;
  margin-left:6px;
  font-size:.9em;
  display:inline-flex;
  align-items:center;
  gap:4px;
  vertical-align:middle;
}


@media (max-width: 768px) {
  #suggestions {
    display: flex;
    overflow: hidden;
    scroll-snap-type: x mandatory;
    padding: 0; /* important pour éviter que la carte dépasse */
  }

  .suggestion-card {
    flex: 0 0 100%;
    max-width: 100%;
    box-sizing: border-box;
    scroll-snap-align: center;
  }
}

/* === Flèches du carrousel suggestions === */
.suggestions-nav button {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(145deg, #e8edff, #d7dfff);
  color: #3b82f6;
  font-size: 18px;
  font-weight: bold;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;
}

.suggestions-nav button:hover {
  background: linear-gradient(145deg, #dbe6ff, #c8d6ff);
  color: #2563eb;
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 6px 16px rgba(59, 130, 246, 0.3);
}

.suggestions-nav button:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(59, 130, 246, 0.25);
}

/* position centrée si besoin */
.suggestions-nav {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 10px;
}












/* =============== ACCESS GATE (blocked-card) =============== */
.access-gate{
  --gate-bg:#ffffff;
  --gate-border:#e5e7eb;
  --gate-muted:#6b7280;
  --gate-text:#111827;
  --gate-primary:#2563eb;
  --gate-primary-ghost:#eef2ff;
  --gate-shadow:0 8px 24px rgba(17,24,39,0.06);

  display:grid;
  grid-template-columns: 56px 1fr 320px;
  gap:24px;
  align-items:flex-start;

  max-width:980px;
  margin:20px auto;
  padding:20px;
  background:var(--gate-bg);
  border:1px solid var(--gate-border);
  border-radius:16px;
  box-shadow:var(--gate-shadow);
}

.gate-icon{
  width:56px;height:56px;
  display:flex;align-items:center;justify-content:center;
  font-size:28px; line-height:1;
  background:#f3f4f6;
  border-radius:14px;
}

.gate-main{min-width:0;}
.gate-title{
  margin:2px 0 8px;
  font-size:22px; line-height:1.2;
  color:var(--gate-text); font-weight:800;
}
.gate-text{
  margin:0 0 14px;
  color:#374151; line-height:1.55;
}

/* Statut à puces en carte */
.gate-status{
  list-style:none; margin:0; padding:12px;
  border:1px solid var(--gate-border);
  border-radius:12px;
  background:#fafafa;
  display:grid; gap:10px;
}
.gate-status li{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px;
}
.gate-status .label{ color:var(--gate-muted); font-size:14px; }
.gate-status .value{ font-weight:700; color:#111827; }

/* Colonne actions (PC) */
.gate-side{
  display:flex; flex-direction:column; gap:10px;
}
.gate-btn{
  display:flex; align-items:center; justify-content:center;
  gap:8px;
  padding:12px 14px;
  border-radius:12px;
  text-decoration:none;
  font-weight:700;
  transition:transform .08s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease;
  border:1px solid transparent;
  box-shadow:0 1px 0 rgba(0,0,0,0.02);
}
.gate-btn:active{ transform:translateY(1px); }

/* Variants */
.gate-btn--primary{
  background:var(--gate-primary);
  color:#fff;
  border-color:var(--gate-primary);
}
.gate-btn--primary:hover{ filter:brightness(.96); }

.gate-btn--outline{
  background:#fff;
  color:var(--gate-primary);
  border-color:var(--gate-primary);
}
.gate-btn--outline:hover{
  background:var(--gate-primary-ghost);
}

.gate-btn--ghost{
  background:#f9fafb;
  color:#374151;
  border-color:var(--gate-border);
}
.gate-btn--ghost:hover{
  background:#f3f4f6;
}

.gate-hint{
  margin:6px 0 0;
  text-align:center;
  color:var(--gate-muted);
  font-size:13px;
}

/* =============== Responsive =============== */
@media (max-width: 920px){
  .access-gate{
    grid-template-columns: 48px 1fr;
    gap:16px;
    padding:16px;
    border-radius:14px;
  }
  .gate-icon{ width:48px;height:48px;font-size:24px;border-radius:12px; }
  .gate-title{ font-size:20px; }
  .gate-side{
    grid-column: 1 / -1; /* passe en dessous */
    flex-direction:column;
  }
}

@media (max-width: 520px){
  .access-gate{
    grid-template-columns: 1fr;
    padding:14px;
    gap:12px;
  }
  .gate-icon{ display:none; }
  .gate-status{ padding:10px; }
  .gate-btn{ padding:11px 12px; font-size:15px; }
  .gate-title{ font-size:18px; }
}






/* ===== Bloc Optimise ton profil ===== */
.block.home-checklist{
  border: 1px solid #e5e7eb;
  background: #ffffff;
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 6px 16px rgba(17, 24, 39, .06);
}

/* Titre du bloc (plus grand que le corps) */
.block.home-checklist .section-title{
  font-size: 18px;
  line-height: 1.2;
  font-weight: 700;
  color: #111827; /* gris très foncé */
}

/* Badge % de complétion */
.block.home-checklist .completion-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:44px;
  padding:4px 10px;
  border-radius:999px;
  background:#EEF2FF;        /* lavande pâle */
  border:1px solid #C7D2FE;  /* liseré doux */
  color:#1E40AF;             /* indigo foncé */
  font-weight:700;
  line-height:1;
  font-size:14px;
}

/* Phrase d'explication (une seule, lisible) */
.block.home-checklist .guidance-strong{
  margin: 10px 0 6px;
  font-size: 15px;
  line-height: 1.55;
  color: #1f2937;            /* gris-900 */
  font-weight: 500;          /* medium, pas gras agressif */
}

/* Liste des actions à faire (uniquement les manquantes) */
.block.home-checklist ul{
  margin: 6px 0 12px 18px;
  padding: 0;
}
.block.home-checklist li{
  margin: 6px 0;
  font-size: 15px;
  line-height: 1.55;
  color: #374151;            /* gris-700 */
  font-weight: 400;
}

/* Ligne des boutons */
.block.home-checklist .btn-row{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 6px;
}

/* Boutons du bloc (si ta classe .btn existe déjà, ces règles affinent juste dans ce contexte) */
.block.home-checklist .btn{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 10px;
  text-decoration:none;
  font-size:14px;
  font-weight:600;
  border: 1px solid #2563eb;
  color: #ffffff;
  background: #2563eb;
  transition: transform .04s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.block.home-checklist .btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(37, 99, 235, .18);
}
.block.home-checklist .btn:active{
  transform: translateY(0);
  box-shadow: none;
}

/* Variante bouton “secondaire” si tu veux que certains liens soient blancs bord bleu :
   — ajoute simplement la classe .btn--outline au lien concerné */
.block.home-checklist .btn.btn--outline{
  background: #fff;
  color: #2563eb;
  border: 1px solid #2563eb;
}
.block.home-checklist .btn.btn--outline:hover{
  background: #eff6ff; /* bleu très pâle */
  box-shadow: none;
}

/* Petit rappel doux (pas agressif) */
.block.home-checklist .guidance-boost{
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.55;
  color: #4b5563;            /* gris-600 */
  font-weight: 400;
}

/* ===== Réactivité mobile ===== */
@media (max-width: 480px){
  .block.home-checklist{
    padding: 14px;
    border-radius: 12px;
  }
  .block.home-checklist .section-title{
    font-size: 17px;
  }
  .block.home-checklist .guidance-strong,
  .block.home-checklist li{
    font-size: 14.5px;
  }
  .block.home-checklist .completion-badge{
    font-size: 13px;
    min-width: 40px;
    padding: 3px 8px;
  }
  .block.home-checklist .btn{
    padding: 9px 12px;
    font-size: 14px;
  }
}



/* ================================
   🔔 Notification Badge (PC + Mobile)
   ================================ */

/* =========================
   BADGE NOTIFICATION (PC)
   ========================= */
.notif-badge {
  position: absolute;
  top: -6px;
  right: 0px;               /* ← décale visuellement vers la gauche */

  min-width: 22px;
  height: 22px;
  padding: 0 6px;

  border-radius: 999px;
  background-color: #7C3AED;  /* violet Nout2ou */
  color: #ffffff;

  font-size: 12px;
  font-weight: 700;
  line-height: 22px;
  text-align: center;

  display: none;              /* affiché via JS */
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
  z-index: 1000;
}

/* =========================
   BADGE NOTIFICATION (MOBILE)
   ========================= */
.notif-badge-mobile {
  position: absolute;
  top: 2px;
  right: 0px;                /* ← bien calé au-dessus de l’icône */

  min-width: 20px;
  height: 20px;
  padding: 0 5px;

  border-radius: 999px;
  background-color: #7C3AED;
  color: #ffffff;

  font-size: 11px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;

  display: none;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
  z-index: 1000;
}

/* =========================
   CONTENEUR LIEN
   ========================= */
.nav-notif,
.mobile-notif {
  position: relative;
}

/* =========================
   ANIMATION DOUCE (1 seule fois)
   ========================= */
.notif-badge:not(:empty),
.notif-badge-mobile:not(:empty) {
  animation: notif-pop 0.25s ease-out;
}

@keyframes notif-pop {
  0% {
    transform: scale(0.7);
    opacity: 0;
  }
  70% {
    transform: scale(1.15);
    opacity: 1;
  }
  100% {
    transform: scale(1);
  }
}






/* Badge sur les cartes (Home: Visites / Coups de coeur etc.) */
.activity-card.has-badge { position: relative; }

.notif-badge--card{
  position:absolute;
  top: 10px;
  right: 12px;   /* tu peux réduire pour “plus à gauche”, ex: right: 20px; */
  min-width: 26px;
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  background: #7C3AED; /* violet */
  color:#fff;
  font-size: 13px;
  font-weight: 800;
  line-height: 26px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.22);
  z-index: 5;
}





/* ================================
   Profile Gate (Members page)
   ================================ */
.profile-gate-card{
  display:flex;
  justify-content:space-between;
  gap:16px;
  padding:14px 16px;
  border-radius:14px;
  background:#f5f3ff; /* violet très doux */
  border:1px solid rgba(124,58,237,.25);
  box-shadow:0 6px 18px rgba(0,0,0,.06);
  margin: 10px 0 16px;
  position: relative;
}


.pg-left{
  display:flex;
  gap:12px;
  align-items:flex-start;
  min-width:0;
}

.pg-icon{
  width:44px;
  height:44px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#7C3AED; /* violet Nout2ou */
  color:#fff;
  font-size:20px;
  flex:0 0 auto;
}

.pg-text{ min-width:0; }

.pg-title{
  font-weight:800;
  font-size:15px;
  color:#111827;
  margin-bottom:4px;
}

.pg-sub{
  font-size:13px;
  color:#4b5563;
  line-height:1.35;
}

.pg-meters{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:10px;
}

.pg-chip{
  display:inline-flex;
  gap:8px;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  font-size:12px;
  color:#374151;
}

.pg-chip strong{ color:#111827; }

.pg-actions{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  justify-content:flex-end;
  flex:0 0 auto;
}

.pg-btn{
  text-decoration:none;
  padding:10px 12px;
  border-radius:12px;
  font-weight:700;
  font-size:13px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:1px solid transparent;
  white-space:nowrap;
}

.pg-btn--primary{
  background:#7C3AED;
  color:#fff;
}
.pg-btn--primary:hover{ filter:brightness(.95); }

.pg-btn--outline{
  background:#fff;
  color:#7C3AED;
  border-color: rgba(124,58,237,.35);
}

.pg-btn--ghost{
  background:transparent;
  color:#374151;
  border-color: rgba(0,0,0,.08);
}

/* Responsive */
@media (max-width: 760px){
  .profile-gate-card{
    flex-direction:column;
    align-items:stretch;
  }
  .pg-actions{
    justify-content:flex-start;
  }
  .pg-btn{
    width:100%;
    justify-content:center;
  }
}
 
 
 
 /* ✅ croix */
.pg-close{
  position:absolute;
  top:10px;
  right:10px;
  width:34px;
  height:34px;
  border-radius:10px;
  border:1px solid rgba(0,0,0,.08);
  background:#fff;
  color:#6b7280;
  font-size:22px;
  line-height:30px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 6px 16px rgba(0,0,0,.08);
  z-index:2;
}

.pg-close:active{
  transform: scale(.98);
}

/* Mobile : croix un peu plus accessible */
@media (max-width: 480px){
  .pg-close{
    top:8px;
    right:8px;
    width:38px;
    height:38px;
    border-radius:12px;
    font-size:24px;
  }
}




/* =========================================================
   Landing - Section "Marre des applis impersonnelles ?"
   ========================================================= */

.lp-proof {
  padding: 44px 16px;
  background: #ffffff;
}

.lp-proof__container {
  max-width: 980px;
  margin: 0 auto;
  text-align: center;
}

.lp-proof__title {
  margin: 0 0 10px;
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #1b1b1b;
}

.lp-proof__subtitle {
  margin: 0 auto 18px;
  max-width: 760px;
  font-size: 16px;
  line-height: 1.55;
  color: #4b5563; /* gris doux */
}

.lp-proof__subtitle strong {
  color: #111827;
  font-weight: 700;
}

/* chips */
.lp-proof__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 14px;
}

.lp-proof__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  background: #fafafa;
  box-shadow: 0 6px 18px rgba(0,0,0,0.04);
}

.lp-proof__chipIcon {
  display: inline-flex;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  align-items: center;
  justify-content: center;
  background: rgba(255, 59, 107, 0.12);
  font-size: 15px;
}

.lp-proof__chipText {
  font-size: 14px;
  font-weight: 700;
  color: #111827;
}

/* responsive */
@media (min-width: 768px) {
  .lp-proof {
    padding: 58px 20px;
  }
  .lp-proof__subtitle {
    font-size: 17px;
  }
}


/* Pagination – admin incomplete */
#admIncPager{
  margin-top: 16px;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

#admIncPager .adm-pager-btn{
  background: #1f2937;      /* gris foncé */
  color: #ffffff;
  border: 1px solid #1f2937;
  border-radius: 10px;
  padding: 8px 14px;
  font-weight: 600;
  cursor: pointer;
}

#admIncPager .adm-pager-btn:hover:not(:disabled){
  background: #111827;
}

#admIncPager .adm-pager-btn:disabled{
  opacity: 0.45;
  cursor: not-allowed;
}

/* Colonne Actions : ne jamais tronquer */
.admin-incomplete-page td:last-child,
.admin-incomplete-page th:last-child{
  width: 360px;            /* ajuste si tu veux plus/moins */
  min-width: 320px;
}

/* Conteneur des boutons */
.adm-actions{
  display: flex;
  flex-wrap: wrap;         /* ✅ permet retour à la ligne */
  gap: 8px;
  align-items: center;
}

/* Boutons : pas de coupe interne */
.adm-act{
  white-space: nowrap;
  flex: 0 0 auto;
}



.email-help-card{
  margin-top: 14px;
  padding: 14px;
  border-radius: 14px;
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(0,0,0,.08);
  backdrop-filter: blur(6px);
}

.email-help-title{
  font-weight: 800;
  margin-bottom: 8px;
}

.email-help-list{
  margin: 0 0 10px 18px;
  padding: 0;
}

.email-help-actions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.email-help-feedback{
  margin-top: 10px;
  font-size: 14px;
  opacity: .9;
}
.email-help-feedback.ok{ color: #0f7a2a; }
.email-help-feedback.err{ color: #b00020; }