:root {
  --main-color: #6c63ff;
  --second-color: #8b7cff;
  --bg-color: #f4f5fb;
  --card-color: #ffffff;
  --text-color: #222222;
  --soft-color: #f5f6ff;
  --border-color: #dddddd;
  --danger-color: #e74c3c;
  --success-color: #2ecc71;
}
/* BASE */

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background: var(--bg-color);
  color: var(--text-color);
}

main {
  width: min(1320px, calc(100vw - 24px));
  max-width: calc(100vw - 24px);
  margin: 24px auto;
  padding: 12px;
  display: grid;
  grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
  gap: 22px;
}

main > section {
  min-width: 0;
}

.card {
  max-width: 100%;
  min-width: 0;
  background:
    linear-gradient(var(--card-color), var(--card-color)) padding-box,
    conic-gradient(
      #4b6cff,
      #ff4b8b,
      #00a86b,
      #ff9800,
      #222222,
      #8e44ad,
      #4b6cff
    ) border-box;
  border: 2px solid transparent;
  border-radius: 22px;
  padding: 18px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  margin-bottom: 18px;
}

.card:hover {
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
}

h2 {
  margin: 0 0 14px;
  font-size: 22px;
}

input,
textarea,
button {
  width: 100%;
  font-size: 16px;
  border-radius: 12px;
  border: 1px solid #cccccc;
  padding: 12px;
  margin-top: 8px;
}

textarea {
  min-height: 95px;
  resize: vertical;
}

button {
  background: var(--main-color);
  color: white;
  border: none;
  cursor: pointer;
  font-weight: bold;
}

button:hover {
  filter: brightness(0.92);
}

button.secondary {
  background: #eeeeee;
  color: #222222;
}

button.danger {
  background: var(--danger-color);
  color: white;
}

button.success {
  background: var(--success-color);
  color: white;
}

.small {
  font-size: 14px;
  color: #666666;
}

.hidden {
  display: none !important;
}

hr {
  border: none;
  border-top: 1px solid var(--border-color);
  margin: 16px 0;
}

/* HEADER / LOGO */

.site-header {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  background: linear-gradient(135deg, var(--main-color), var(--second-color));
  color: white;
  padding: 22px 16px;
  text-align: center;
}

.logo-header-box {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.site-logo {
  width: 145px;
  height: 145px;
  object-fit: contain;
  border-radius: 50%;
  background: white;
  padding: 4px;
  box-shadow: 0 5px 18px rgba(0, 0, 0, 0.25);
}

.logo-header-box h1 {
  margin: 0;
  font-size: 40px;
  line-height: 1.1;
}

.logo-header-box p {
  margin: 7px 0 0;
  font-size: 18px;
  opacity: 0.95;
}

/* COMPTE / PROFIL */

.account-profile-line {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 14px;
}

.account-profile-text {
  min-width: 0;
}

.account-profile-line h2 {
  margin: 0;
  font-size: 24px;
  line-height: 1.1;
  word-break: break-word;
}

.account-profile-line .small {
  margin: 4px 0 0;
}

.account-avatar-wrapper {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
}

.account-avatar {
  width: 99px;
  height: 99px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  padding: 5px;
  background:
    linear-gradient(white, white) padding-box,
    conic-gradient(
      #4b6cff,
      #ff4b8b,
      #00a86b,
      #ff9800,
      #222222,
      #8e44ad,
      #4b6cff
    ) border-box;
  border: 5px solid transparent;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.25);
}

.account-notification-dot {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  border-radius: 999px;
  background: red;
  color: white;
  font-size: 15px;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 4px solid white;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
  z-index: 10;
}

.account-like-heart-dot {
  position: absolute;
  top: -9px;
  right: -45px;
  width: 42px;
  height: 42px;
  z-index: 11;
}

.account-like-heart-icon {
  position: absolute;
  inset: 0;
  color: red;
  font-size: 46px;
  line-height: 42px;
  text-align: center;
  -webkit-text-stroke: 3px white;
  paint-order: stroke fill;
  text-shadow: 0 3px 8px rgba(0, 0, 0, 0.28);
}

.account-like-heart-count {
  position: absolute;
  top: 12px;
  left: 0;
  right: 0;
  color: white;
  font-size: 14px;
  font-weight: 900;
  text-align: center;
  z-index: 2;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

/* MODALES / POP-UP */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 18px;
  z-index: 9999;
}

.modal-box {
  width: 100%;
  max-width: 440px;
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    conic-gradient(
      #4b6cff,
      #ff4b8b,
      #00a86b,
      #ff9800,
      #222222,
      #8e44ad,
      #4b6cff
    ) border-box;
  border: 3px solid transparent;
  border-radius: 24px;
  padding: 22px;
  box-shadow: 0 15px 45px rgba(0, 0, 0, 0.30);
  position: relative;
  animation: modalAppear 0.18s ease-out;
}

.modal-box-large {
  max-width: 620px;
}

.large-modal {
  width: min(1100px, 95vw);
  max-height: 90vh;
  overflow-y: auto;
}

@keyframes modalAppear {
  from {
    transform: scale(0.94);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

.modal-close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  width: auto;
  margin: 0;
  padding: 7px 10px;
  border-radius: 50%;
  background: #eeeeee;
  color: #222222;
  font-size: 14px;
}

.modal-box h2 {
  padding-right: 40px;
}

/* STATUT */

.status {
  display: none;
  padding: 12px;
  border-radius: 12px;
  margin-bottom: 18px;
  font-size: 15px;
  font-weight: bold;
}

.status.ok {
  display: block;
  background: #d4edda;
  color: #155724;
}

.status.error {
  display: block;
  background: #f8d7da;
  color: #721c24;
}

.status.info {
  display: block;
  background: #fff3cd;
  color: #856404;
}

/* CARTES D'ACTION */

.action-card {
  text-align: center;
}

.action-card h2 {
  margin-bottom: 6px;
}

.action-card p {
  margin-top: 0;
}

/* CHOIX DES COULEURS */

.color-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}

.color-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  padding: 0;
  margin: 0;
  border: 3px solid white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.color-btn:hover {
  transform: scale(1.08);
}

/* NOTIFICATIONS APPLICATION */

.notifications-box {
  margin-top: 14px;
  margin-bottom: 12px;
  padding: 12px;
  border-radius: 16px;
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    conic-gradient(
      #4b6cff,
      #ff4b8b,
      #00a86b,
      #ff9800,
      #222222,
      #8e44ad,
      #4b6cff
    ) border-box;
  border: 2px solid transparent;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.07);
}

.notifications-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.notifications-badge {
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  border-radius: 999px;
  background: #e74c3c;
  color: white;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  border: 3px solid white;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.18);
}

.notifications-lines p {
  margin: 5px 0;
  font-size: 14px;
}

.notification-line {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 8px 0;
  line-height: 1.25;
}

.notification-line-icon {
  width: 24px;
  min-width: 24px;
  text-align: center;
}

/* MES GROUPES */

.groups-top-card {
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
}

.groups-horizontal-list {
  display: flex;
  gap: 14px;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 10px 6px 12px;
  scroll-behavior: smooth;
}

.groups-horizontal-list::-webkit-scrollbar {
  height: 10px;
}

.groups-horizontal-list::-webkit-scrollbar-track {
  background: #eeeeee;
  border-radius: 999px;
}

.groups-horizontal-list::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, var(--main-color), var(--second-color));
  border-radius: 999px;
}

.group-item {
  position: relative;
  overflow: visible;
  flex: 0 0 185px;
  min-width: 185px;
  max-width: 185px;
  min-height: 125px;
  background:
    linear-gradient(var(--soft-color), var(--soft-color)) padding-box,
    conic-gradient(
      #4b6cff,
      #ff4b8b,
      #00a86b,
      #ff9800,
      #222222,
      #8e44ad,
      #4b6cff
    ) border-box;
  padding: 12px 72px 12px 12px;
  border-radius: 16px;
  cursor: pointer;
  border: 2px solid transparent;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
  flex-shrink: 0;
}

.group-item:hover,
.group-item.active {
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    conic-gradient(
      #4b6cff,
      #ff4b8b,
      #00a86b,
      #ff9800,
      #222222,
      #8e44ad,
      #4b6cff
    ) border-box;
  border: 3px solid transparent;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.14);
}

.group-title-line {
  position: relative;
  padding-right: 45px;
}

.group-item strong {
  display: block;
  max-width: 105px;
  font-size: 15px;
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.group-item .small {
  max-width: 105px;
  margin: 4px 0;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.group-info-line {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.group-meta {
  margin-top: 8px;
  font-size: 13px;
  font-weight: bold;
}

.group-meta .members-count {
  color: #004bff;
}

.group-meta .online-count {
  color: #00a86b;
}

/* ANCIENNE PASTILLE SI UTILISÉE */

.group-badge {
  position: absolute;
  top: 9px;
  right: 9px;
  min-width: 26px;
  height: 26px;
  background: #ff1f3d;
  color: white;
  border: 2px solid white;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* PASTILLE ROUGE MESSAGES */

.group-message-badge {
  position: absolute;
  top: 8px;
  right: 13px;
  min-width: 34px;
  height: 34px;
  border-radius: 50%;
  background: red;
  color: white;
  font-size: 19px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 4px solid white;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
  z-index: 10;
}

/* CŒUR ROUGE DES NOUVEAUX J'AIME */

.group-like-heart {
  position: absolute;
  right: 13px;
  bottom: 18px;
  width: 48px;
  height: 48px;
  z-index: 9;
}

.group-like-heart-icon {
  position: absolute;
  inset: 0;
  color: red;
  font-size: 53px;
  line-height: 48px;
  text-align: center;
  -webkit-text-stroke: 4px white;
  paint-order: stroke fill;
  text-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
}

.group-like-heart-count {
  position: absolute;
  top: 14px;
  left: 0;
  right: 0;
  color: white;
  font-size: 17px;
  font-weight: 900;
  text-align: center;
  z-index: 2;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

/* MEMBRES */

.card-title-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.card-title-line h2 {
  margin-bottom: 0;
}

.collapse-btn {
  width: auto;
  padding: 8px 12px;
  margin: 0;
  border-radius: 10px;
  background: #eeeeee;
  color: #222222;
}

.hidden-panel {
  display: none;
}

.member {
  background:
    linear-gradient(var(--soft-color), var(--soft-color)) padding-box,
    conic-gradient(
      #4b6cff,
      #ff4b8b,
      #00a86b,
      #ff9800,
      #222222,
      #8e44ad,
      #4b6cff
    ) border-box;
  border: 2px solid transparent;
  padding: 10px;
  border-radius: 12px;
  margin-bottom: 8px;
}

.member-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.member-name {
  font-weight: bold;
  flex: 1;
  min-width: 150px;
}

.member-name-with-avatar {
  display: flex;
  align-items: center;
  gap: 9px;
}

.member-name-with-avatar .avatar-small,
.member-name-with-avatar .avatar-placeholder {
  width: 38px;
  height: 38px;
  font-size: 16px;
  border: 3px solid transparent;
}

.member-status {
  font-size: 13px;
  padding: 4px 8px;
  border-radius: 999px;
  white-space: nowrap;
}

.member-status.online {
  background: #d4edda;
  color: #155724;
}

.member-status.offline {
  background: #eeeeee;
  color: #555555;
}

.member-actions-inline {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.member-actions-inline button {
  width: auto;
  margin: 0;
  padding: 6px 9px;
  font-size: 13px;
  border-radius: 9px;
}

/* FIL D'ACTUALITÉ / MESSAGES */

.posts-scroll-zone {
  max-height: 620px;
  overflow-y: auto;
  padding-right: 6px;
}

.posts-scroll-zone::-webkit-scrollbar {
  width: 10px;
}

.posts-scroll-zone::-webkit-scrollbar-track {
  background: #eeeeee;
  border-radius: 999px;
}

.posts-scroll-zone::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--main-color), var(--second-color));
  border-radius: 999px;
}

.post {
  background:
    linear-gradient(#f7f8fb, #f7f8fb) padding-box,
    conic-gradient(
      #4b6cff,
      #ff4b8b,
      #00a86b,
      #ff9800,
      #222222,
      #8e44ad,
      #4b6cff
    ) border-box;
  border: 2px solid transparent;
  border-radius: 16px;
  padding: 14px;
  margin-bottom: 14px;
}

.post-header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
  color: #555555;
  margin-bottom: 10px;
}

.post-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.post-text {
  white-space: pre-wrap;
  line-height: 1.45;
  font-size: 16px;
}

.post-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.post-actions button {
  width: auto;
  padding: 8px 11px;
  margin: 0;
  font-size: 14px;
}

/* J'AIME PUBLICATIONS */

.like-btn {
  background: #eeeeee;
  color: #222222;
}

.like-btn.active {
  background: #ff4b8b;
  color: white;
}

/* EMOJIS DES PUBLICATIONS */

#emojiBox {
  display: none;
  flex-wrap: wrap;
  gap: 7px;
  background: #f7f7f7;
  padding: 10px;
  border-radius: 12px;
  margin-top: 8px;
}

#emojiBox button {
  width: auto;
  background: white;
  color: #222222;
  border: 1px solid #dddddd;
  padding: 7px 9px;
  margin: 0;
  font-size: 20px;
}

/* COMMENTAIRES */

.comments-zone {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border-color);
}

.comments-title {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 8px;
  color: #555555;
}

.comments-list {
  margin-bottom: 8px;
}

.comment {
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    conic-gradient(
      #4b6cff,
      #ff4b8b,
      #00a86b,
      #ff9800,
      #222222,
      #8e44ad,
      #4b6cff
    ) border-box;
  border: 2px solid transparent;
  border-radius: 10px;
  padding: 8px 10px;
  margin-bottom: 8px;
}

.comment-header {
  font-size: 13px;
  color: #666666;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}

.comment-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.comment-text {
  font-size: 14px;
  white-space: pre-wrap;
}

.comment-form {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.comment-form input {
  margin-top: 0;
}

.comment-form button {
  width: auto;
  margin-top: 0;
  padding: 10px 12px;
}

/* ACTIONS SUR LES COMMENTAIRES */

.comment-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 8px;
}

.comment-actions button,
.comment button {
  width: auto;
  margin: 0;
  padding: 6px 9px;
  font-size: 13px;
  border-radius: 9px;
}

.comment-like-btn {
  background: #eeeeee;
  color: #222222;
}

.comment-like-btn.active {
  background: #ff4b8b;
  color: white;
}

/* EMOJIS DES COMMENTAIRES */

.comment-emoji-btn {
  width: auto;
  margin-top: 8px;
  padding: 8px 10px;
}

.comment-emoji-box {
  display: none;
  flex-wrap: wrap;
  gap: 6px;
  background: #f7f7f7;
  padding: 8px;
  border-radius: 10px;
  margin-top: 8px;
}

.comment-emoji-box button {
  width: auto;
  background: white;
  color: #222222;
  border: 1px solid #dddddd;
  padding: 6px 8px;
  margin: 0;
  font-size: 18px;
}

/* PHOTOS DE PROFIL ET IMAGES */

.profile-photo-zone {
  margin-top: 10px;
}

.profile-preview {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  margin-bottom: 8px;
  padding: 4px;
  background:
    linear-gradient(white, white) padding-box,
    conic-gradient(
      #4b6cff,
      #ff4b8b,
      #00a86b,
      #ff9800,
      #222222,
      #8e44ad,
      #4b6cff
    ) border-box;
  border: 4px solid transparent;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.avatar-small {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  padding: 3px;
  background:
    linear-gradient(white, white) padding-box,
    conic-gradient(
      #4b6cff,
      #ff4b8b,
      #00a86b,
      #ff9800,
      #222222,
      #8e44ad,
      #4b6cff
    ) border-box;
  border: 3px solid transparent;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);
}

.avatar-placeholder {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background:
    linear-gradient(#eeeeee, #eeeeee) padding-box,
    conic-gradient(
      #4b6cff,
      #ff4b8b,
      #00a86b,
      #ff9800,
      #222222,
      #8e44ad,
      #4b6cff
    ) border-box;
  border: 3px solid transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.image-preview-box {
  margin-top: 10px;
  background: #f7f7f7;
  padding: 10px;
  border-radius: 12px;
}

.post-image-preview {
  max-width: 100%;
  max-height: 280px;
  border-radius: 12px;
  object-fit: contain;
  display: block;
  margin-bottom: 8px;
}

.post-image {
  max-width: 100%;
  max-height: 520px;
  border-radius: 14px;
  object-fit: contain;
  display: block;
  margin-top: 12px;
  background: #eeeeee;
}

/* ADMINISTRATION */

.admin-results {
  margin-top: 14px;
}

.admin-user-card,
.admin-report-card,
.admin-warning-card {
  background:
    linear-gradient(#f7f8fb, #f7f8fb) padding-box,
    conic-gradient(
      #4b6cff,
      #ff4b8b,
      #00a86b,
      #ff9800,
      #222222,
      #8e44ad,
      #4b6cff
    ) border-box;
  border: 2px solid transparent;
  border-radius: 16px;
  padding: 14px;
  margin-bottom: 12px;
}

.admin-user-header,
.admin-report-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.admin-user-main,
.admin-report-main {
  min-width: 0;
}

.admin-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.admin-actions button {
  width: auto;
  margin: 0;
  padding: 8px 11px;
  font-size: 14px;
}

.admin-scroll-zone {
  max-height: 620px;
  overflow-y: auto;
  padding-right: 6px;
}

.admin-scroll-zone::-webkit-scrollbar {
  width: 10px;
}

.admin-scroll-zone::-webkit-scrollbar-track {
  background: #eeeeee;
  border-radius: 999px;
}

.admin-scroll-zone::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--main-color), var(--second-color));
  border-radius: 999px;
}

.admin-badge {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: bold;
}

.admin-badge.new {
  background: #f39c12;
  color: white;
}

.admin-badge.done,
.admin-badge.ok {
  background: #2ecc71;
  color: white;
}

.admin-badge.banned {
  background: #e74c3c;
  color: white;
}

.admin-danger-text {
  color: #e74c3c;
  font-weight: bold;
}

.admin-muted-box {
  background: #eeeeee;
  border-radius: 12px;
  padding: 10px;
  margin-top: 8px;
  white-space: pre-wrap;
}

/* COMPTE BANNI */

.banned-box {
  background: #f8d7da;
  color: #721c24;
  border: 2px solid #e74c3c;
  border-radius: 18px;
  padding: 16px;
  margin-bottom: 18px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.banned-box h2 {
  margin: 0 0 8px;
  color: #721c24;
}

.banned-reason {
  background: rgba(255, 255, 255, 0.7);
  padding: 10px;
  border-radius: 12px;
  margin-top: 10px;
  white-space: pre-wrap;
}

.is-banned button:not(#logoutBtn):not(#adminLogoutBtn):not(#backToAppBtn),
.is-banned input,
.is-banned textarea {
  opacity: 0.55;
}

.is-banned #openProfileModalBtn,
.is-banned #logoutBtn {
  opacity: 1;
}

/* AVERTISSEMENTS CÔTÉ UTILISATEUR */

.user-warnings-box {
  background:
    linear-gradient(#fff3cd, #fff3cd) padding-box,
    conic-gradient(
      #4b6cff,
      #ff4b8b,
      #00a86b,
      #ff9800,
      #222222,
      #8e44ad,
      #4b6cff
    ) border-box;
  border: 2px solid transparent;
  border-radius: 18px;
  padding: 14px;
  margin-top: 14px;
  color: #856404;
}

.user-warnings-box h3 {
  margin: 0 0 10px;
  font-size: 18px;
}

.user-warning-item {
  background: rgba(255, 255, 255, 0.75);
  border-radius: 12px;
  padding: 10px;
  margin-top: 10px;
}

.user-warning-item strong {
  display: block;
  margin-bottom: 5px;
}

.user-warning-date {
  font-size: 13px;
  color: #666666;
  margin-bottom: 6px;
}

.warning-read-btn {
  margin-top: 10px;
  background: #2ecc71;
  color: white;
}

.warning-read-btn:hover {
  filter: brightness(0.92);
}

/* TABLEAU ADMIN DES AVERTISSEMENTS */

.table-actions {
  display: flex;
  justify-content: flex-end;
  margin: 12px 0;
}

.warnings-table-actions {
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.warnings-table-actions input {
  flex: 1;
  min-width: 240px;
}

.warnings-table-container {
  overflow-x: auto;
  margin-top: 12px;
}

.warnings-admin-table {
  width: 100%;
  border-collapse: collapse;
  background: white;
  border-radius: 14px;
  overflow: hidden;
  min-width: 850px;
}

.warnings-admin-table th,
.warnings-admin-table td {
  padding: 10px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  text-align: left;
  font-size: 14px;
}

.warnings-admin-table th {
  background: #f1f3f8;
  font-weight: 700;
}

.warnings-admin-table tr:hover {
  background: #fafafa;
}

.warning-count-badge {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
}

.warning-count-total {
  background: #34495e;
  color: white;
}

.warning-count-read {
  background: #2ecc71;
  color: white;
}

.warning-count-unread {
  background: #f39c12;
  color: white;
}

.warning-details-box {
  background: #f8f9fb;
  border-radius: 12px;
  padding: 10px;
  margin-top: 8px;
  font-size: 13px;
}

.warning-details-box + .warning-details-box {
  margin-top: 8px;
}

/* JOURNAL ADMIN */

.admin-log-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 14px;
  margin-top: 12px;
  border-left: 6px solid #34495e;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.06);
}

.admin-log-header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-bottom: 8px;
}

.admin-log-card.danger-log {
  border-left-color: #e74c3c;
}

.admin-log-card.success-log {
  border-left-color: #2ecc71;
}

.admin-log-card.warning-log {
  border-left-color: #f39c12;
}

/* RÉDUIRE / AGRANDIR LES CARTES ADMIN */

.admin-card-content {
  margin-top: 12px;
}

.collapse-card-btn {
  white-space: nowrap;
  font-size: 14px;
  padding: 8px 12px;
}

.collapsed-card .admin-card-content {
  display: none;
}

.simple-admin-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.simple-admin-header h2 {
  margin: 0;
}

/* HAUTEUR LIMITÉE SIGNALEMENTS ET JOURNAL */

#reportsList,
#adminLogsList {
  max-height: 420px;
  overflow-y: auto;
  padding-right: 8px;
}

#reportsList::-webkit-scrollbar,
#adminLogsList::-webkit-scrollbar {
  width: 10px;
}

#reportsList::-webkit-scrollbar-track,
#adminLogsList::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 999px;
}

#reportsList::-webkit-scrollbar-thumb,
#adminLogsList::-webkit-scrollbar-thumb {
  background: #b8b8b8;
  border-radius: 999px;
}

#reportsList::-webkit-scrollbar-thumb:hover,
#adminLogsList::-webkit-scrollbar-thumb:hover {
  background: #888888;
}

/* RESPONSIVE */

@media (max-width: 1000px) {
  main {
    grid-template-columns: 1fr;
    width: calc(100vw - 20px);
    max-width: calc(100vw - 20px);
  }

  .groups-horizontal-list .group-item {
    flex: 0 0 180px;
    min-width: 180px;
    max-width: 180px;
  }
}

@media (max-width: 850px) {
  main {
    grid-template-columns: 1fr;
  }

  .groups-horizontal-list {
    padding-bottom: 12px;
  }

  .post-header,
  .comment-header {
    flex-direction: column;
    gap: 4px;
  }

  .post-actions {
    flex-direction: column;
  }

  .post-actions button {
    width: 100%;
  }

  .comment-form {
    flex-direction: column;
  }

  .comment-form button {
    width: 100%;
  }

  .comment-emoji-btn {
    width: 100%;
  }

  .member-line {
    align-items: flex-start;
    flex-direction: column;
  }

  .member-actions-inline {
    width: 100%;
  }

  .member-actions-inline button {
    flex: 1;
  }

  .posts-scroll-zone {
    max-height: 520px;
  }
}

@media (max-width: 700px) {
  .warnings-table-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .warnings-table-actions input {
    width: 100%;
    min-width: 0;
  }

  .admin-log-header {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 650px) {
  main {
    width: calc(100vw - 16px);
    max-width: calc(100vw - 16px);
    padding: 8px;
  }

  .logo-header-box {
    flex-direction: column;
    gap: 10px;
  }

  .site-logo {
    width: 120px;
    height: 120px;
    object-fit: contain;
  }

  .logo-header-box h1 {
    font-size: 28px;
  }

  .logo-header-box p {
    font-size: 15px;
  }

  .modal-box {
    max-width: 94vw;
    padding: 18px;
  }

  .account-profile-line {
    flex-direction: column;
    text-align: center;
  }

  .account-avatar {
    width: 105px;
    height: 105px;
  }

  .groups-horizontal-list .group-item {
    flex: 0 0 78%;
    min-width: 78%;
    max-width: 78%;
    min-height: 130px;
    padding-right: 82px;
  }

  .group-item strong,
  .group-item .small {
    max-width: calc(100% - 72px);
  }

  .group-like-heart {
    right: 10px;
    bottom: 12px;
  }

  .comment-actions {
    flex-direction: column;
  }

  .comment-actions button {
    width: 100%;
  }

  .admin-actions {
    flex-direction: column;
  }

  .admin-actions button {
    width: 100%;
  }
}

/* =========================================================
   CORRECTIONS FINALES EBF
   - Notifications des groupes alignées à gauche
   - Rond et cœur même taille que ceux du profil
   - Contour blanc du cœur renforcé
   - Titres des groupes plus lisibles
   ========================================================= */

/* Cartes groupes plus larges et espace à gauche pour les notifications */
.group-item {
  position: relative;
  overflow: visible !important;
  flex: 0 0 245px !important;
  min-width: 245px !important;
  max-width: 245px !important;
  min-height: 135px !important;
  padding: 12px 12px 12px 62px !important;
}

/* Le titre du groupe peut s'écrire sur plusieurs lignes */
.group-title-line {
  padding-right: 0 !important;
}

.group-item strong {
  display: block !important;
  max-width: 100% !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  line-height: 1.18 !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
}

/* Le texte de description reste lisible */
.group-item .small {
  max-width: 100% !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  line-height: 1.25 !important;
}

/* Rond rouge des nouvelles activités : à gauche et même taille que le profil */
.group-message-badge {
  position: absolute !important;
  top: 10px !important;
  left: 13px !important;
  right: auto !important;

  min-width: 28px !important;
  height: 28px !important;
  padding: 0 8px !important;
  border-radius: 999px !important;

  background: red !important;
  color: white !important;
  font-size: 15px !important;
  font-weight: 900 !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  border: 4px solid white !important;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25) !important;
  z-index: 20 !important;
}

/* Cœur rouge des nouveaux J'aime : à gauche et même taille que le profil */
.group-like-heart {
  position: absolute !important;
  left: 7px !important;
  right: auto !important;
  bottom: 18px !important;

  width: 42px !important;
  height: 42px !important;
  z-index: 19 !important;
}

.group-like-heart-icon {
  position: absolute !important;
  inset: 0 !important;

  color: red !important;
  font-size: 46px !important;
  line-height: 42px !important;
  text-align: center !important;

  -webkit-text-stroke: 4px white !important;
  paint-order: stroke fill !important;

  text-shadow:
    -3px -3px 0 white,
     0   -3px 0 white,
     3px -3px 0 white,
    -3px  0   0 white,
     3px  0   0 white,
    -3px  3px 0 white,
     0    3px 0 white,
     3px  3px 0 white,
     0    4px 9px rgba(0, 0, 0, 0.28) !important;
}

.group-like-heart-count {
  position: absolute !important;
  top: 12px !important;
  left: 0 !important;
  right: 0 !important;

  color: white !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  text-align: center !important;
  z-index: 2 !important;

  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55) !important;
}

/* Cœur au-dessus de la photo de profil : contour blanc renforcé */
.account-like-heart-icon {
  -webkit-text-stroke: 4px white !important;
  paint-order: stroke fill !important;

  text-shadow:
    -3px -3px 0 white,
     0   -3px 0 white,
     3px -3px 0 white,
    -3px  0   0 white,
     3px  0   0 white,
    -3px  3px 0 white,
     0    3px 0 white,
     3px  3px 0 white,
     0    4px 9px rgba(0, 0, 0, 0.28) !important;
}

/* Mobile */
@media (max-width: 650px) {
  .groups-horizontal-list .group-item {
    flex: 0 0 86% !important;
    min-width: 86% !important;
    max-width: 86% !important;
    min-height: 140px !important;
    padding: 12px 12px 12px 62px !important;
  }

  .group-item strong,
  .group-item .small {
    max-width: 100% !important;
  }
}

/* =========================================================
   MISE EN PAGE PRÉFÉRÉE DES NOTIFICATIONS GROUPES
   - Rond rouge en bas à gauche dans la carte groupe
   - Cœur rouge en bas à droite dans la carte groupe
   - Même style que sur la capture
   - Titres plus lisibles
   ========================================================= */

.group-item {
  position: relative !important;
  overflow: visible !important;

  flex: 0 0 245px !important;
  min-width: 245px !important;
  max-width: 245px !important;
  min-height: 135px !important;

  padding: 18px 62px 42px 30px !important;
}

/* Titre du groupe lisible */
.group-title-line {
  padding-right: 0 !important;
}

.group-item strong {
  display: block !important;
  max-width: 100% !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  line-height: 1.18 !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
}

/* Description et infos lisibles */
.group-item .small {
  max-width: 100% !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  line-height: 1.25 !important;
}

/* Rond rouge : en bas à gauche */
.group-message-badge {
  position: absolute !important;
  left: 30px !important;
  right: auto !important;
  top: auto !important;
  bottom: 10px !important;

  min-width: 28px !important;
  height: 28px !important;
  padding: 0 8px !important;
  border-radius: 999px !important;

  background: red !important;
  color: white !important;
  font-size: 15px !important;
  font-weight: 900 !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  border: 4px solid white !important;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25) !important;
  z-index: 20 !important;
}

/* Cœur rouge : en bas à droite */
.group-like-heart {
  position: absolute !important;
  right: 24px !important;
  left: auto !important;
  top: auto !important;
  bottom: 4px !important;

  width: 42px !important;
  height: 42px !important;
  z-index: 19 !important;
}

/* Cœur avec contour blanc visible */
.group-like-heart-icon {
  position: absolute !important;
  inset: 0 !important;

  color: red !important;
  font-size: 46px !important;
  line-height: 42px !important;
  text-align: center !important;

  -webkit-text-stroke: 4px white !important;
  paint-order: stroke fill !important;

  text-shadow:
    -3px -3px 0 white,
     0   -3px 0 white,
     3px -3px 0 white,
    -3px  0   0 white,
     3px  0   0 white,
    -3px  3px 0 white,
     0    3px 0 white,
     3px  3px 0 white,
     0    4px 9px rgba(0, 0, 0, 0.28) !important;
}

/* Nombre au centre du cœur */
.group-like-heart-count {
  position: absolute !important;
  top: 12px !important;
  left: 0 !important;
  right: 0 !important;

  color: white !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  text-align: center !important;
  z-index: 2 !important;

  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55) !important;
}

/* On garde aussi le contour blanc du cœur du profil */
.account-like-heart-icon {
  -webkit-text-stroke: 4px white !important;
  paint-order: stroke fill !important;

  text-shadow:
    -3px -3px 0 white,
     0   -3px 0 white,
     3px -3px 0 white,
    -3px  0   0 white,
     3px  0   0 white,
    -3px  3px 0 white,
     0    3px 0 white,
     3px  3px 0 white,
     0    4px 9px rgba(0, 0, 0, 0.28) !important;
}

/* Téléphone */
@media (max-width: 650px) {
  .groups-horizontal-list .group-item {
    flex: 0 0 86% !important;
    min-width: 86% !important;
    max-width: 86% !important;
    min-height: 140px !important;
    padding: 18px 62px 42px 30px !important;
  }
}

/* =========================================================
   CORRECTION FORTE - POSITION ROND ET CŒUR DANS MES GROUPES
   Cette correction doit être tout en bas du CSS.
   Problème corrigé : le rond restait accroché au titre du groupe.
   ========================================================= */

/* La carte devient la référence de position */
.group-item {
  position: relative !important;
  overflow: visible !important;

  flex: 0 0 245px !important;
  min-width: 245px !important;
  max-width: 245px !important;
  min-height: 135px !important;

  padding: 18px 62px 42px 30px !important;
}

/* IMPORTANT : le titre ne doit plus servir de référence au rond rouge */
.group-title-line {
  position: static !important;
  display: block !important;
  padding-right: 0 !important;
}

/* Titre lisible */
.group-item strong {
  display: block !important;
  max-width: 100% !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  line-height: 1.18 !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
}

/* Description et infos lisibles */
.group-item .small {
  max-width: 100% !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  line-height: 1.25 !important;
}

/* Rond rouge : en bas à gauche de la carte groupe */
.group-item .group-message-badge,
.group-message-badge {
  position: absolute !important;
  top: auto !important;
  right: auto !important;
  bottom: 10px !important;
  left: 30px !important;

  min-width: 28px !important;
  width: auto !important;
  height: 28px !important;
  padding: 0 8px !important;
  border-radius: 999px !important;

  background: red !important;
  color: white !important;
  font-size: 15px !important;
  line-height: 28px !important;
  font-weight: 900 !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  border: 4px solid white !important;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25) !important;
  z-index: 50 !important;
}

/* Cœur rouge : en bas à droite de la carte groupe */
.group-item .group-like-heart,
.group-like-heart {
  position: absolute !important;
  top: auto !important;
  left: auto !important;
  right: 24px !important;
  bottom: 4px !important;

  width: 42px !important;
  height: 42px !important;
  z-index: 49 !important;
}

/* Cœur avec contour blanc */
.group-like-heart-icon {
  position: absolute !important;
  inset: 0 !important;

  color: red !important;
  font-size: 46px !important;
  line-height: 42px !important;
  text-align: center !important;

  -webkit-text-stroke: 4px white !important;
  paint-order: stroke fill !important;

  text-shadow:
    -3px -3px 0 white,
     0   -3px 0 white,
     3px -3px 0 white,
    -3px  0   0 white,
     3px  0   0 white,
    -3px  3px 0 white,
     0    3px 0 white,
     3px  3px 0 white,
     0    4px 9px rgba(0, 0, 0, 0.28) !important;
}

/* Nombre au centre du cœur */
.group-like-heart-count {
  position: absolute !important;
  top: 12px !important;
  left: 0 !important;
  right: 0 !important;

  color: white !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  text-align: center !important;
  z-index: 2 !important;

  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55) !important;
}

/* Cœur profil : contour blanc renforcé aussi */
.account-like-heart-icon {
  -webkit-text-stroke: 4px white !important;
  paint-order: stroke fill !important;

  text-shadow:
    -3px -3px 0 white,
     0   -3px 0 white,
     3px -3px 0 white,
    -3px  0   0 white,
     3px  0   0 white,
    -3px  3px 0 white,
     0    3px 0 white,
     3px  3px 0 white,
     0    4px 9px rgba(0, 0, 0, 0.28) !important;
}

/* Mobile */
@media (max-width: 650px) {
  .groups-horizontal-list .group-item {
    flex: 0 0 86% !important;
    min-width: 86% !important;
    max-width: 86% !important;
    min-height: 140px !important;
    padding: 18px 62px 42px 30px !important;
  }
}

/* =========================================================
   CORRECTION PROFIL - MÊME POSITION QUE DANS MES GROUPES
   - Rond rouge en bas à gauche de la photo de profil
   - Cœur rouge en bas à droite de la photo de profil
   - Même taille que dans les groupes
   ========================================================= */

.account-avatar-wrapper {
  position: relative !important;
  display: inline-flex !important;
  flex-shrink: 0 !important;
}

/* Rond rouge du profil */
#accountNotificationDot,
.account-notification-dot {
  position: absolute !important;

  top: auto !important;
  right: auto !important;
  bottom: 4px !important;
  left: 4px !important;

  min-width: 28px !important;
  height: 28px !important;
  padding: 0 8px !important;
  border-radius: 999px !important;

  background: red !important;
  color: white !important;
  font-size: 15px !important;
  line-height: 28px !important;
  font-weight: 900 !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  border: 4px solid white !important;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25) !important;
  z-index: 50 !important;
}

/* Cœur rouge du profil */
#accountLikeHeartDot,
.account-like-heart-dot {
  position: absolute !important;

  top: auto !important;
  left: auto !important;
  right: -2px !important;
  bottom: -2px !important;

  width: 42px !important;
  height: 42px !important;
  z-index: 49 !important;
}

/* Forme du cœur avec contour blanc */
#accountLikeHeartDot .account-like-heart-icon,
.account-like-heart-icon {
  position: absolute !important;
  inset: 0 !important;

  color: red !important;
  font-size: 46px !important;
  line-height: 42px !important;
  text-align: center !important;

  -webkit-text-stroke: 4px white !important;
  paint-order: stroke fill !important;

  text-shadow:
    -3px -3px 0 white,
     0   -3px 0 white,
     3px -3px 0 white,
    -3px  0   0 white,
     3px  0   0 white,
    -3px  3px 0 white,
     0    3px 0 white,
     3px  3px 0 white,
     0    4px 9px rgba(0, 0, 0, 0.28) !important;
}

/* Nombre dans le cœur */
#accountLikeHeartDot .account-like-heart-count,
.account-like-heart-count {
  position: absolute !important;
  top: 12px !important;
  left: 0 !important;
  right: 0 !important;

  color: white !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  text-align: center !important;
  z-index: 2 !important;

  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55) !important;
}

/* Un peu d'espace entre la photo et le nom */
.account-profile-line {
  gap: 20px !important;
}

/* =========================================================
   CORRECTION FINALE : MASQUER LES NOTIFICATIONS À 0
   À garder tout en bas du CSS.
   ========================================================= */

/* Si JavaScript ajoute .hidden, les pastilles doivent vraiment disparaître */
#accountNotificationDot.hidden,
.account-notification-dot.hidden,
#accountLikeHeartDot.hidden,
.account-like-heart-dot.hidden,
.group-message-badge.hidden,
.group-like-heart.hidden,
.notif-badge.hidden {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Si une pastille est vide, elle disparaît aussi */
#accountNotificationDot:empty,
.account-notification-dot:empty,
#accountLikeHeartDot:empty,
.account-like-heart-dot:empty,
.group-message-badge:empty,
.notif-badge:empty {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* =========================================================
   NOUVELLES PUBLICATIONS / NOUVEAUX COMMENTAIRES NON VUS
   ========================================================= */

.new-content-block {
  position: relative;
  border: 3px solid #ff9800 !important;
  box-shadow:
    0 0 0 4px rgba(255, 152, 0, 0.16),
    0 10px 26px rgba(255, 152, 0, 0.22) !important;
  background:
    linear-gradient(#fff8e6, #fff8e6) padding-box,
    conic-gradient(
      #ff9800,
      #ff4b8b,
      #4b6cff,
      #00a86b,
      #ff9800
    ) border-box !important;
}

.new-content-badge {
  width: auto;
  min-width: 92px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;

  padding: 7px 10px;
  border-radius: 999px;

  background: #ff9800;
  color: white;
  font-size: 14px;
  font-weight: 900;

  border: 3px solid white;
  box-shadow: 0 4px 12px rgba(255, 152, 0, 0.35);
  white-space: nowrap;
}

.new-content-badge.small-badge {
  min-width: 82px;
  padding: 5px 8px;
  font-size: 12px;
}

.comment.new-content-block {
  border-width: 2px !important;
  box-shadow:
    0 0 0 3px rgba(255, 152, 0, 0.14),
    0 6px 16px rgba(255, 152, 0, 0.18) !important;
}

@media (max-width: 650px) {
  .new-content-badge {
    width: 100%;
    margin-top: 6px;
  }
}

/* =========================================================
   NOUVEAUTÉS PLUS DISCRÈTES
   On garde seulement le badge 🆕 Nouveau.
   On enlève le contour orange et le fond orange.
   ========================================================= */

.new-content-block {
  border: inherit !important;
  box-shadow: inherit !important;
  background: inherit !important;
}

/* Pour les publications, on garde le style normal de publication */
.post.new-content-block {
  background:
    linear-gradient(#f7f8fb, #f7f8fb) padding-box,
    conic-gradient(
      #4b6cff,
      #ff4b8b,
      #00a86b,
      #ff9800,
      #222222,
      #8e44ad,
      #4b6cff
    ) border-box !important;
  border: 2px solid transparent !important;
  box-shadow: none !important;
}

/* Pour les commentaires, on garde le style normal de commentaire */
.comment.new-content-block {
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    conic-gradient(
      #4b6cff,
      #ff4b8b,
      #00a86b,
      #ff9800,
      #222222,
      #8e44ad,
      #4b6cff
    ) border-box !important;
  border: 2px solid transparent !important;
  box-shadow: none !important;
}

/* Le badge reste visible, mais moins agressif */
.new-content-badge {
  width: auto;
  min-width: 92px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;

  padding: 7px 10px;
  border-radius: 999px;

  background: #4b6cff !important;
  color: white !important;
  font-size: 14px;
  font-weight: 900;

  border: 3px solid white;
  box-shadow: 0 4px 12px rgba(75, 108, 255, 0.28);
  white-space: nowrap;
}

.new-content-badge.small-badge {
  min-width: 82px;
  padding: 5px 8px;
  font-size: 12px;
}

/* =========================================================
   BADGE NOUVEAU - VERSION SIMPLE
   - Plus de petit logo dans le texte
   - Fond avec la couleur principale du site
   - Texte blanc
   ========================================================= */

.new-content-badge {
  background: var(--main-color) !important;
  color: white !important;
  border: 3px solid white !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18) !important;
}

.new-content-badge.small-badge {
  background: var(--main-color) !important;
  color: white !important;
}

/* =========================================================
   NOTIFICATIONS CLIQUABLES
   ========================================================= */

.clickable-notification,
.clickable-notification-dot {
  cursor: pointer !important;
}

.notification-line.clickable-notification {
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.notification-line.clickable-notification:hover {
  transform: translateY(-1px);
  background: rgba(75, 108, 255, 0.08);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.10);
}

.account-notification-dot.clickable-notification-dot:hover,
#accountNotificationDot.clickable-notification-dot:hover,
.account-like-heart-dot.clickable-notification-dot:hover,
#accountLikeHeartDot.clickable-notification-dot:hover {
  transform: scale(1.08);
  filter: brightness(1.05);
}

/* =========================================================
   PROFIL MEMBRE + MESSAGES PRIVÉS ENTRE MEMBRES DU GROUPE
   ========================================================= */

.member-actions-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  align-items: center;
}

.member-actions-inline button {
  white-space: nowrap;
}

.member-profile-modal-box,
.private-chat-modal-box {
  width: min(720px, 94vw);
  max-height: 88vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.modal-title-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.modal-close-btn {
  min-width: 42px;
}

.member-profile-content {
  overflow-y: auto;
  padding-right: 4px;
}

.member-profile-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 14px 0 18px;
}

.member-profile-avatar {
  width: 86px;
  height: 86px;
  border-radius: 999px;
  overflow: hidden;
  border: 4px solid white;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  flex: 0 0 auto;
  background: #f3f4f7;
}

.member-profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.member-profile-info {
  background: rgba(75, 108, 255, 0.06);
  border-radius: 18px;
  padding: 14px;
  margin-bottom: 14px;
}

.member-profile-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.private-chat-messages {
  flex: 1;
  min-height: 260px;
  max-height: 52vh;
  overflow-y: auto;
  padding: 12px;
  border-radius: 18px;
  background: #f4f6fb;
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.private-message {
  display: flex;
  margin: 8px 0;
}

.private-message.mine {
  justify-content: flex-end;
}

.private-message.other {
  justify-content: flex-start;
}

.private-message-bubble {
  max-width: min(78%, 520px);
  padding: 10px 12px;
  border-radius: 18px;
  background: white;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
}

.private-message.mine .private-message-bubble {
  background: var(--main-color);
  color: white;
}

.private-message-meta {
  display: flex;
  gap: 10px;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  opacity: 0.78;
  margin-bottom: 4px;
}

.private-message-text {
  white-space: pre-wrap;
  word-break: break-word;
}

.private-chat-send-line {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  align-items: stretch;
}

.private-chat-send-line textarea {
  flex: 1;
  resize: vertical;
  min-height: 54px;
}

.private-chat-send-line button {
  align-self: stretch;
}

.private-chat-help {
  margin-top: 8px;
}

@media (max-width: 650px) {
  .member-line {
    align-items: flex-start;
  }

  .member-actions-inline {
    justify-content: flex-start;
    width: 100%;
  }

  .private-chat-send-line {
    flex-direction: column;
  }

  .private-message-bubble {
    max-width: 92%;
  }
}

/* =========================================================
   CORRECTION MESSAGE PRIVÉ - ZONE DE TEXTE
   - La zone d'écriture prend toute la largeur
   - Le bouton Envoyer passe en dessous
   - La barre haut/bas reste bien dans la zone de texte
   ========================================================= */

.private-chat-send-line {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin-top: 12px !important;
  width: 100% !important;
  align-items: stretch !important;
}

/* Zone où on écrit le message privé */
#privateChatInput,
.private-chat-send-line textarea {
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;

  min-height: 92px !important;
  max-height: 170px !important;

  display: block !important;
  box-sizing: border-box !important;

  padding: 12px 14px !important;
  border-radius: 16px !important;

  resize: vertical !important;
  overflow-y: auto !important;

  pointer-events: auto !important;
  opacity: 1 !important;
  background: white !important;
  color: #222 !important;

  font-size: 16px !important;
  line-height: 1.4 !important;
}

/* Bouton envoyer sous la zone texte */
#privateChatSendBtn,
.private-chat-send-line button {
  width: 100% !important;
  min-height: 52px !important;
  align-self: stretch !important;
  margin: 0 !important;
}

/* Fenêtre un peu mieux équilibrée */
.private-chat-modal-box {
  width: min(620px, 94vw) !important;
}

.private-chat-messages {
  min-height: 230px !important;
  max-height: 42vh !important;
}

/* =========================================================
   MESSAGE PRIVÉ - PHOTO À CÔTÉ DU NOM
   ========================================================= */

.private-chat-title-content {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-width: 0 !important;
}

.private-chat-title-avatar,
.private-message-avatar {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  border-radius: 999px !important;
  background: #f2f3f7 !important;
  border: 3px solid white !important;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.16) !important;
  flex: 0 0 auto !important;
}

.private-chat-title-avatar {
  width: 44px !important;
  height: 44px !important;
}

.private-message-avatar {
  width: 28px !important;
  height: 28px !important;
  border-width: 2px !important;
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.12) !important;
}

.private-chat-title-avatar img,
.private-message-avatar img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.private-message-meta-with-photo {
  align-items: center !important;
}

.private-message-author {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  min-width: 0 !important;
}

.private-message.mine .private-message-avatar {
  border-color: rgba(255, 255, 255, 0.9) !important;
}

@media (max-width: 650px) {
  .private-chat-title-content {
    gap: 8px !important;
  }

  .private-chat-title-avatar {
    width: 38px !important;
    height: 38px !important;
  }
}

/* =========================================================
   NOTIFICATION MESSAGE PRIVÉ - VERSION SÉCURISÉE
   ========================================================= */

#accountPrivateMessageDot,
.account-private-message-dot {
  position: absolute !important;
  top: -6px !important;
  right: -8px !important;

  min-width: 34px !important;
  height: 30px !important;
  padding: 0 8px !important;
  border-radius: 999px !important;

  background: var(--main-color) !important;
  color: white !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;

  border: 4px solid white !important;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25) !important;
  z-index: 52 !important;
}

#accountPrivateMessageDot.hidden,
.account-private-message-dot.hidden {
  display: none !important;
}

.account-private-message-icon {
  font-size: 15px !important;
  line-height: 1 !important;
}

.account-private-message-count {
  font-size: 14px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
}

.private-messages-notification-line.clickable-notification {
  cursor: pointer !important;
}

#accountPrivateMessageDot.clickable-notification-dot:hover,
.account-private-message-dot.clickable-notification-dot:hover {
  transform: scale(1.08);
  filter: brightness(1.05);
}

/* =========================================================
   NOTIFICATION MESSAGE PRIVÉ - PAR GROUPE
   ========================================================= */

#accountPrivateMessageDot,
.account-private-message-dot {
  position: absolute !important;
  top: -6px !important;
  right: -8px !important;

  min-width: 34px !important;
  height: 30px !important;
  padding: 0 8px !important;
  border-radius: 999px !important;

  background: var(--main-color) !important;
  color: white !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;

  border: 4px solid white !important;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25) !important;
  z-index: 52 !important;
}

#accountPrivateMessageDot.hidden,
.account-private-message-dot.hidden {
  display: none !important;
}

.account-private-message-icon {
  font-size: 15px !important;
  line-height: 1 !important;
}

.account-private-message-count {
  font-size: 14px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
}

.private-messages-notification-line.clickable-notification {
  cursor: pointer !important;
}

#accountPrivateMessageDot.clickable-notification-dot:hover,
.account-private-message-dot.clickable-notification-dot:hover {
  transform: scale(1.08);
  filter: brightness(1.05);
}

/* =========================================================
   NOTIFICATION SPÉCIALE DEMANDES D'ENTRÉE
   ========================================================= */

.join-requests-notification-line.hidden {
  display: none !important;
}

.join-requests-notification-line {
  background: rgba(255, 152, 0, 0.08);
  border-radius: 12px;
  padding: 6px 8px;
}

.join-requests-notification-line.clickable-notification {
  cursor: pointer !important;
}

.join-requests-notification-line.clickable-notification:hover {
  background: rgba(255, 152, 0, 0.18);
  transform: translateY(-1px);
}

.join-requests-box {
  border: 2px solid rgba(255, 152, 0, 0.45) !important;
  background: rgba(255, 152, 0, 0.07) !important;
}

.join-requests-highlight {
  animation: joinRequestPulse 0.8s ease-in-out 3;
}

@keyframes joinRequestPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 152, 0, 0.45);
  }

  50% {
    box-shadow: 0 0 0 8px rgba(255, 152, 0, 0.12);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(255, 152, 0, 0);
  }
}

/* =========================================================
   PASTILLE DEMANDES D'ENTRÉE SUR LA PHOTO DE PROFIL
   ========================================================= */

#accountJoinRequestDot,
.account-join-request-dot {
  position: absolute !important;
  top: -6px !important;
  left: -8px !important;

  min-width: 34px !important;
  height: 30px !important;
  padding: 0 8px !important;
  border-radius: 999px !important;

  background: #ff9800 !important;
  color: white !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;

  border: 4px solid white !important;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25) !important;
  z-index: 53 !important;
}

#accountJoinRequestDot.hidden,
.account-join-request-dot.hidden {
  display: none !important;
}

.account-join-request-icon {
  font-size: 14px !important;
  line-height: 1 !important;
}

.account-join-request-count {
  font-size: 14px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
}

#accountJoinRequestDot.clickable-notification-dot:hover,
.account-join-request-dot.clickable-notification-dot:hover {
  transform: scale(1.08);
  filter: brightness(1.05);
}

/* =========================================================
   PAGE PROFIL MEMBRE AMÉLIORÉE
   ========================================================= */

.member-profile-header-big {
  align-items: center;
  padding: 12px;
  border-radius: 22px;
  background: rgba(75, 108, 255, 0.06);
}

.member-profile-avatar-big {
  width: 118px !important;
  height: 118px !important;
}

.member-profile-main {
  min-width: 0;
}

.member-profile-main h3 {
  margin: 0 0 8px;
  font-size: 26px;
}

.member-profile-status-line {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}

.profile-status-pill,
.profile-role-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 6px 10px;
  border-radius: 999px;

  font-size: 13px;
  font-weight: 800;

  border: 2px solid white;
  box-shadow: 0 3px 9px rgba(0, 0, 0, 0.08);
}

.profile-status-pill.online {
  background: rgba(0, 168, 107, 0.14);
  color: #007a4d;
}

.profile-status-pill.offline {
  background: rgba(0, 0, 0, 0.06);
  color: #555;
}

.profile-role-pill {
  background: rgba(75, 108, 255, 0.14);
  color: var(--main-color);
}

.member-profile-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 14px 0;
}

.member-profile-panel {
  padding: 14px;
  border-radius: 18px;
  background: rgba(75, 108, 255, 0.06);
}

.member-profile-panel h4 {
  margin: 0 0 8px;
}

.member-profile-panel p {
  margin: 6px 0;
}

.common-groups-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.common-groups-list span {
  display: inline-flex;
  padding: 6px 10px;
  border-radius: 999px;

  background: var(--main-color);
  color: white;
  font-size: 13px;
  font-weight: 800;
}

.member-profile-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 14px 0;
}

.member-profile-stats div {
  padding: 12px;
  border-radius: 18px;

  background: white;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);

  text-align: center;
}

.member-profile-stats strong {
  display: block;
  font-size: 24px;
  color: var(--main-color);
}

.member-profile-stats span {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 700;
  color: #555;
}

@media (max-width: 650px) {
  .member-profile-header-big {
    flex-direction: column;
    text-align: center;
  }

  .member-profile-grid {
    grid-template-columns: 1fr;
  }

  .member-profile-stats {
    grid-template-columns: 1fr;
  }

  .member-profile-status-line {
    justify-content: center;
  }
}

/* =========================================================
   MESSAGES PRIVÉS - EMOJIS ET PHOTOS
   ========================================================= */

.private-chat-tools-line {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 8px;
}

.private-chat-tools-line button {
  flex: 1;
  min-width: 120px;
}

.private-chat-emoji-box {
  display: grid;
  grid-template-columns: repeat(10, minmax(32px, 1fr));
  gap: 6px;
  padding: 8px;
  margin-bottom: 8px;

  border-radius: 16px;
  background: #f4f6fb;
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.private-chat-emoji-box.hidden {
  display: none !important;
}

.private-chat-emoji-box button {
  min-height: 34px;
  padding: 4px;
  border-radius: 10px;

  background: white;
  border: 1px solid rgba(0, 0, 0, 0.08);

  font-size: 20px;
  cursor: pointer;
}

.private-chat-emoji-box button:hover {
  transform: translateY(-1px);
  background: rgba(75, 108, 255, 0.08);
}

.private-chat-image-preview-box {
  display: flex;
  align-items: center;
  gap: 10px;

  margin: 8px 0;
  padding: 10px;
  border-radius: 18px;

  background: rgba(75, 108, 255, 0.06);
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.private-chat-image-preview-box.hidden {
  display: none !important;
}

.private-chat-image-preview-box img {
  width: 88px;
  height: 88px;
  object-fit: cover;
  border-radius: 16px;
  border: 3px solid white;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.16);
}

.private-chat-image-preview-box button {
  flex: 1;
}

.private-message-image-wrap {
  margin: 8px 0;
}

.private-message-image-wrap img {
  display: block;
  max-width: min(100%, 320px);
  max-height: 360px;
  object-fit: contain;

  border-radius: 16px;
  border: 3px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16);
  background: white;
}

.private-message.mine .private-message-image-wrap img {
  border-color: rgba(255, 255, 255, 0.95);
}

.private-message.other .private-message-image-wrap img {
  border-color: white;
}

#privateChatSendBtn:disabled {
  opacity: 0.65;
  cursor: wait;
}

@media (max-width: 650px) {
  .private-chat-emoji-box {
    grid-template-columns: repeat(5, minmax(34px, 1fr));
  }

  .private-chat-image-preview-box {
    flex-direction: column;
    align-items: stretch;
  }

  .private-chat-image-preview-box img {
    width: 100%;
    height: 180px;
  }

  .private-message-image-wrap img {
    max-width: 100%;
  }
}

/* =========================================================
   MESSAGES PRIVÉS - PHOTOS SANS DÉBORDEMENT + EMOJIS EN BOUTON
   ========================================================= */

/* La fenêtre reste toujours contenue dans l'écran */
.private-chat-modal-box {
  width: min(620px, 94vw) !important;
  max-width: 94vw !important;
  max-height: 88vh !important;
  overflow: hidden !important;
}

/* La zone des messages a son propre scroll */
.private-chat-messages {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  max-width: 100% !important;
}

/* Aucune bulle ne peut sortir de la fenêtre */
.private-message,
.private-message-bubble {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.private-message-bubble {
  overflow: hidden !important;
}

/* Les photos envoyées restent petites et contenues dans la pop-up */
.private-message-image-wrap {
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

.private-message-image-wrap img {
  display: block !important;

  width: auto !important;
  max-width: min(260px, 100%) !important;
  max-height: 260px !important;

  object-fit: contain !important;
  border-radius: 16px !important;

  margin: 6px 0 !important;
}

/* Aperçu avant envoi : ne déborde jamais */
.private-chat-image-preview-box {
  max-width: 100% !important;
  overflow: hidden !important;
}

.private-chat-image-preview-box img {
  width: 82px !important;
  height: 82px !important;
  max-width: 82px !important;
  max-height: 82px !important;
  object-fit: cover !important;
  flex: 0 0 auto !important;
}

/* Outils comme dans les publications : les emojis restent cachés derrière le bouton */
.private-chat-tools-line {
  position: relative !important;
  display: flex !important;
  gap: 8px !important;
  margin: 10px 0 8px !important;
}

#privateChatEmojiBtn,
#privateChatImageBtn {
  min-height: 42px !important;
}

/* Palette compacte, cachée par défaut, comme un menu */
.private-chat-emoji-box {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: calc(100% + 8px) !important;

  z-index: 80 !important;

  display: grid !important;
  grid-template-columns: repeat(8, minmax(34px, 1fr)) !important;
  gap: 6px !important;

  max-height: 210px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;

  padding: 10px !important;
  border-radius: 18px !important;

  background: white !important;
  border: 2px solid rgba(75, 108, 255, 0.18) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18) !important;
}

.private-chat-emoji-box.hidden {
  display: none !important;
}

.private-chat-emoji-box button {
  min-height: 36px !important;
  padding: 4px !important;
  border-radius: 10px !important;

  background: #f7f8fb !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;

  font-size: 21px !important;
  line-height: 1 !important;
  cursor: pointer !important;
}

.private-chat-emoji-box button:hover {
  background: rgba(75, 108, 255, 0.12) !important;
  transform: translateY(-1px) !important;
}

@media (max-width: 650px) {
  .private-message-image-wrap img {
    max-width: min(220px, 100%) !important;
    max-height: 220px !important;
  }

  .private-chat-emoji-box {
    grid-template-columns: repeat(5, minmax(34px, 1fr)) !important;
    max-height: 185px !important;
  }

  .private-chat-image-preview-box {
    flex-direction: row !important;
    align-items: center !important;
  }

  .private-chat-image-preview-box img {
    width: 72px !important;
    height: 72px !important;
  }
}

/* =========================================================
   MESSAGES PRIVÉS - POP-UP COMPACTE
   - Zone texte en haut
   - Emojis sous la zone "Écris ton message"
   - Tout reste dans la pop-up
   ========================================================= */

.private-chat-modal-box {
  width: min(600px, 94vw) !important;
  max-width: 94vw !important;
  height: auto !important;
  max-height: 88vh !important;
  overflow: hidden !important;

  display: flex !important;
  flex-direction: column !important;
}

/* La liste des messages prend la place disponible et scrolle */
.private-chat-messages {
  flex: 1 1 auto !important;
  min-height: 150px !important;
  max-height: none !important;

  overflow-y: auto !important;
  overflow-x: hidden !important;

  box-sizing: border-box !important;
  max-width: 100% !important;
}

/* Bloc d'écriture fixé en bas de la pop-up */
.private-chat-compose-zone {
  flex: 0 0 auto !important;

  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;

  margin-top: 10px !important;
  padding: 8px !important;

  border-radius: 18px !important;
  background: rgba(75, 108, 255, 0.05) !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;

  max-height: 40vh !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

/* La zone de texte reste compacte */
#privateChatInput,
.private-chat-compose-zone textarea {
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;

  min-height: 70px !important;
  max-height: 105px !important;

  resize: vertical !important;
  overflow-y: auto !important;
  box-sizing: border-box !important;

  display: block !important;
  margin: 0 !important;
}

/* Les boutons Emoji / Photo restent sous la zone texte */
.private-chat-tools-line {
  position: relative !important;

  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;

  margin: 0 !important;
  width: 100% !important;
}

#privateChatEmojiBtn,
#privateChatImageBtn {
  width: 100% !important;
  min-height: 40px !important;
}

/* Palette emoji sous le bouton et sous la zone texte, pas au-dessus */
.private-chat-emoji-box {
  position: static !important;

  display: grid !important;
  grid-template-columns: repeat(8, minmax(32px, 1fr)) !important;
  gap: 5px !important;

  width: 100% !important;
  max-width: 100% !important;
  max-height: 130px !important;

  overflow-y: auto !important;
  overflow-x: hidden !important;

  padding: 8px !important;
  margin: 0 !important;

  box-sizing: border-box !important;
  border-radius: 16px !important;

  background: white !important;
  border: 2px solid rgba(75, 108, 255, 0.16) !important;
  box-shadow: none !important;
}

.private-chat-emoji-box.hidden {
  display: none !important;
}

.private-chat-emoji-box button {
  min-height: 32px !important;
  padding: 3px !important;
  border-radius: 9px !important;

  background: #f7f8fb !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;

  font-size: 19px !important;
  line-height: 1 !important;
  cursor: pointer !important;
}

/* Aperçu photo compact */
.private-chat-image-preview-box {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;

  max-width: 100% !important;
  overflow: hidden !important;

  margin: 0 !important;
  padding: 8px !important;
  box-sizing: border-box !important;
}

.private-chat-image-preview-box.hidden {
  display: none !important;
}

.private-chat-image-preview-box img {
  width: 70px !important;
  height: 70px !important;
  max-width: 70px !important;
  max-height: 70px !important;

  object-fit: cover !important;
  flex: 0 0 auto !important;
}

.private-chat-image-preview-box button {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

/* Bouton Envoyer compact */
#privateChatSendBtn {
  width: 100% !important;
  min-height: 44px !important;
  margin: 0 !important;
}

/* Les photos déjà envoyées ne débordent jamais */
.private-message,
.private-message-bubble,
.private-message-image-wrap {
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.private-message-image-wrap img {
  display: block !important;

  width: auto !important;
  max-width: min(230px, 100%) !important;
  max-height: 230px !important;

  object-fit: contain !important;
  border-radius: 14px !important;
  margin: 6px 0 !important;
}

/* Aide plus discrète pour gagner de la place */
.private-chat-help {
  margin: 6px 0 0 !important;
  font-size: 12px !important;
}

@media (max-width: 650px) {
  .private-chat-modal-box {
    width: 96vw !important;
    max-height: 90vh !important;
  }

  .private-chat-messages {
    min-height: 120px !important;
  }

  .private-chat-compose-zone {
    max-height: 44vh !important;
  }

  .private-chat-emoji-box {
    grid-template-columns: repeat(5, minmax(32px, 1fr)) !important;
    max-height: 120px !important;
  }

  .private-message-image-wrap img {
    max-width: min(200px, 100%) !important;
    max-height: 200px !important;
  }
}

/* =========================================================
   CORRECTION FORTE MESSAGE PRIVÉ
   POP-UP PLUS GRANDE + EMOJIS VISIBLES SOUS LE TEXTE
   ========================================================= */

/* Pop-up plus grande, mais toujours dans l'écran */
#privateChatModal .private-chat-modal-box {
  width: min(760px, 96vw) !important;
  max-width: 96vw !important;

  height: min(860px, 92vh) !important;
  max-height: 92vh !important;

  padding: 20px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;

  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
}

/* Le titre ne prend pas trop de place */
#privateChatModal .modal-title-line {
  flex: 0 0 auto !important;
  margin-bottom: 10px !important;
}

#privateChatModal .modal-title-line h2,
#privateChatTitle {
  font-size: 25px !important;
  line-height: 1.15 !important;
  margin: 0 !important;
}

/* La zone des messages devient plus basse pour laisser la place aux emojis */
#privateChatMessages.private-chat-messages {
  flex: 0 1 210px !important;

  min-height: 145px !important;
  height: 210px !important;
  max-height: 210px !important;

  overflow-y: auto !important;
  overflow-x: hidden !important;

  padding: 10px !important;
  margin-bottom: 10px !important;
  box-sizing: border-box !important;
}

/* Zone d'écriture sous les messages */
#privateChatModal .private-chat-compose-zone {
  flex: 0 0 auto !important;

  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;

  width: 100% !important;
  max-width: 100% !important;

  max-height: none !important;
  overflow: visible !important;

  padding: 8px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

/* Texte plus compact pour laisser de la place */
#privateChatInput {
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;

  min-height: 64px !important;
  height: 72px !important;
  max-height: 90px !important;

  resize: vertical !important;
  overflow-y: auto !important;
  box-sizing: border-box !important;
}

/* Boutons juste sous le texte */
#privateChatModal .private-chat-tools-line {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;

  width: 100% !important;
  margin: 0 !important;
  position: static !important;
}

#privateChatEmojiBtn,
#privateChatImageBtn {
  min-height: 42px !important;
  height: 42px !important;
  padding: 8px !important;
}

/* Emojis visibles sous les boutons, dans la pop-up */
#privateChatEmojiBox.private-chat-emoji-box {
  position: static !important;

  display: grid !important;
  grid-template-columns: repeat(10, minmax(34px, 1fr)) !important;
  gap: 6px !important;

  width: 100% !important;
  max-width: 100% !important;

  height: auto !important;
  min-height: 150px !important;
  max-height: 180px !important;

  overflow-y: auto !important;
  overflow-x: hidden !important;

  padding: 8px !important;
  margin: 0 !important;
  box-sizing: border-box !important;

  border-radius: 16px !important;
  background: #ffffff !important;
  border: 2px solid rgba(75, 108, 255, 0.18) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.8) !important;
}

/* Important : si hidden, on cache vraiment */
#privateChatEmojiBox.private-chat-emoji-box.hidden {
  display: none !important;
}

/* Boutons emojis plus visibles */
#privateChatEmojiBox.private-chat-emoji-box button {
  min-height: 34px !important;
  height: 34px !important;
  padding: 3px !important;

  border-radius: 10px !important;
  font-size: 20px !important;
  line-height: 1 !important;

  background: #f4f6fb !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

/* Aperçu photo compact */
#privateChatImagePreviewBox.private-chat-image-preview-box {
  max-height: 92px !important;
  overflow: hidden !important;
  padding: 8px !important;
}

#privateChatImagePreviewBox.private-chat-image-preview-box img {
  width: 68px !important;
  height: 68px !important;
  max-width: 68px !important;
  max-height: 68px !important;
  object-fit: cover !important;
}

/* Envoyer ne prend pas trop de hauteur */
#privateChatSendBtn {
  min-height: 42px !important;
  height: 42px !important;
  margin: 0 !important;
}

/* Les photos envoyées restent dans la bulle */
#privateChatModal .private-message-image-wrap img {
  max-width: min(260px, 100%) !important;
  max-height: 210px !important;
  object-fit: contain !important;
}

/* Texte d'aide discret */
#privateChatModal .private-chat-help {
  flex: 0 0 auto !important;
  margin: 6px 0 0 !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
}

/* Écran plus petit */
@media (max-width: 700px) {
  #privateChatModal .private-chat-modal-box {
    width: 96vw !important;
    height: 92vh !important;
    padding: 14px !important;
  }

  #privateChatMessages.private-chat-messages {
    height: 160px !important;
    min-height: 120px !important;
    max-height: 160px !important;
  }

  #privateChatInput {
    height: 62px !important;
    min-height: 58px !important;
  }

  #privateChatEmojiBox.private-chat-emoji-box {
    grid-template-columns: repeat(6, minmax(32px, 1fr)) !important;
    min-height: 125px !important;
    max-height: 145px !important;
  }

  #privateChatModal .private-message-image-wrap img {
    max-width: min(210px, 100%) !important;
    max-height: 180px !important;
  }
}

/* =========================================================
   MON PROFIL PUBLIC COMPLET
   ========================================================= */

#profileModal .modal-box {
  max-width: 620px !important;
  max-height: 90vh !important;
  overflow-y: auto !important;
}

.profile-extra-fields {
  margin: 14px 0;
  padding: 14px;
  border-radius: 18px;
  background: rgba(75, 108, 255, 0.06);
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.profile-section-title {
  font-size: 18px;
  font-weight: 900;
  margin-bottom: 10px;
}

.profile-field-label {
  display: block;
  margin: 10px 0 6px;
  font-size: 14px;
  font-weight: 800;
}

#profileBioInput,
#profileMoodInput,
#profileInterestsInput {
  width: 100%;
  box-sizing: border-box;
}

#profileBioInput {
  resize: vertical;
  min-height: 90px;
  max-height: 160px;
}

.my-profile-public-preview {
  margin-top: 14px;
}

.my-profile-preview-title {
  font-weight: 900;
  margin-bottom: 8px;
}

.my-profile-preview-card {
  display: flex;
  gap: 12px;
  align-items: flex-start;

  padding: 12px;
  border-radius: 18px;

  background: white;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}

.my-profile-preview-avatar {
  width: 72px;
  height: 72px;
  border-radius: 999px;
  overflow: hidden;
  flex: 0 0 auto;
  background: #f3f4f7;
  border: 3px solid white;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.16);
}

.my-profile-preview-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.my-profile-preview-info {
  min-width: 0;
}

.my-profile-preview-info strong {
  display: block;
  font-size: 18px;
  margin-bottom: 4px;
}

.my-profile-preview-info p {
  margin: 6px 0;
  white-space: pre-wrap;
  word-break: break-word;
}

.my-profile-preview-info small {
  display: block;
  color: #555;
  font-weight: 700;
}

.my-profile-preview-mood {
  display: inline-flex;
  margin: 4px 0;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(75, 108, 255, 0.10);
  color: var(--main-color);
  font-size: 13px;
  font-weight: 800;
}

.profile-privacy-note {
  margin-bottom: 0;
}

.member-profile-mood {
  display: inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(75, 108, 255, 0.10);
  color: var(--main-color);
  font-weight: 800;
}

@media (max-width: 650px) {
  .my-profile-preview-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}

/* =========================================================
   CADRAGE PHOTO DE PROFIL
   ========================================================= */

.profile-cropper-box {
  margin: 14px 0;
  padding: 14px;
  border-radius: 20px;
  background: rgba(75, 108, 255, 0.06);
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.profile-cropper-box.hidden {
  display: none !important;
}

.profile-cropper-title {
  font-weight: 900;
  margin-bottom: 10px;
}

.profile-cropper-viewport {
  position: relative;
  width: 240px;
  height: 240px;
  max-width: 78vw;

  margin: 0 auto 12px;
  overflow: hidden;

  border-radius: 50%;
  background: #111111;
  border: 5px solid white;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);

  touch-action: none;
  cursor: grab;
}

.profile-cropper-viewport:active {
  cursor: grabbing;
}

.profile-cropper-viewport img {
  position: absolute;
  top: 50%;
  left: 50%;

  max-width: none !important;
  user-select: none;
  -webkit-user-drag: none;

  transform-origin: center center;
}

.profile-cropper-circle-guide {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;

  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.85),
    inset 0 0 0 999px rgba(255, 255, 255, 0.02);
}

.profile-cropper-controls {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: center;
  margin: 8px 0;
}

.profile-cropper-controls label {
  font-weight: 800;
}

#profileCropperZoomRange {
  width: 100%;
}

.profile-cropper-actions {
  display: flex;
  justify-content: center;
  margin-top: 8px;
}

.profile-cropper-actions button {
  width: auto;
  min-width: 140px;
}

.profile-cropper-help {
  text-align: center;
  margin-bottom: 0;
}

@media (max-width: 650px) {
  .profile-cropper-viewport {
    width: 210px;
    height: 210px;
  }

  .profile-cropper-controls {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   SÉCURITÉ - SIGNALEMENTS PROFILS ET MESSAGES PRIVÉS
   ========================================================= */

.member-profile-actions {
  flex-wrap: wrap;
}

#reportMemberProfileBtn {
  background: #e74c3c !important;
  color: white !important;
}

.private-message-security-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}

.private-message-report-btn {
  width: auto !important;
  min-height: 28px !important;
  padding: 5px 9px !important;
  border-radius: 999px !important;

  background: rgba(231, 76, 60, 0.12) !important;
  color: #c0392b !important;
  border: 1px solid rgba(231, 76, 60, 0.25) !important;

  font-size: 12px !important;
  font-weight: 900 !important;
  cursor: pointer !important;
}

.private-message-report-btn:hover {
  background: #e74c3c !important;
  color: white !important;
  transform: translateY(-1px);
}

.private-message.mine .private-message-security-actions {
  display: none !important;
}

/* =========================================================
   ADMINISTRATION - CENTRE DE SIGNALEMENTS
   ========================================================= */

.admin-has-new-reports {
  background: #e74c3c !important;
  color: white !important;
  animation: adminReportsPulse 1.4s infinite;
}

@keyframes adminReportsPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.4);
  }

  70% {
    box-shadow: 0 0 0 8px rgba(231, 76, 60, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(231, 76, 60, 0);
  }
}

.admin-reports-modal-box {
  width: min(960px, 96vw) !important;
  max-width: 96vw !important;
  max-height: 92vh !important;
  overflow-y: auto !important;
}

.admin-reports-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  margin: 10px 0 14px;
  padding: 10px;
  border-radius: 16px;
  background: rgba(75, 108, 255, 0.06);
}

.admin-reports-toolbar button {
  width: auto;
  min-width: 130px;
}

.admin-reports-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.admin-report-card {
  padding: 14px;
  border-radius: 18px;
  background: #ffffff;
  border: 2px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.08);
}

.admin-report-card.new {
  border-color: rgba(231, 76, 60, 0.55);
  background: rgba(231, 76, 60, 0.04);
}

.admin-report-header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;

  margin-bottom: 10px;
}

.admin-report-status {
  display: inline-flex;
  margin-left: 8px;
  padding: 4px 8px;
  border-radius: 999px;

  font-size: 12px;
  font-weight: 900;
  background: #eeeeee;
}

.admin-report-status.new {
  background: #e74c3c;
  color: white;
}

.admin-report-status.processed {
  background: #00a86b;
  color: white;
}

.admin-report-status.ignored {
  background: #777777;
  color: white;
}

.admin-report-body p {
  margin: 6px 0;
}

.admin-report-content {
  margin-top: 10px;
  padding: 10px;
  border-radius: 14px;
  background: #f4f6fb;
}

.admin-report-content p {
  white-space: pre-wrap;
  word-break: break-word;
}

.admin-report-image {
  margin-top: 10px;
}

.admin-report-image img {
  max-width: 240px;
  max-height: 220px;
  object-fit: contain;
  border-radius: 16px;
  border: 3px solid white;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16);
  background: white;
}

.admin-report-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.admin-report-actions button {
  width: auto;
  min-width: 130px;
}

.error-text {
  color: #c0392b;
  font-weight: 800;
}

@media (max-width: 650px) {
  .admin-reports-toolbar,
  .admin-report-header {
    flex-direction: column;
    align-items: stretch;
  }

  .admin-report-actions button,
  .admin-reports-toolbar button {
    width: 100%;
  }

  .admin-report-image img {
    max-width: 100%;
  }
}
/* =========================================================
   COULEUR DU SITE DANS LA POP-UP PROFIL
   À COLLER TOUT EN BAS DU FICHIER style.css
   ========================================================= */

.profile-theme-zone {
  margin-top: 14px;
  margin-bottom: 10px;
  padding: 12px;
  border-radius: 16px;
  background: #f7f8fb;
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.profile-theme-zone .small {
  margin: 0 0 8px;
  font-weight: bold;
}

.profile-color-buttons {
  margin-top: 8px;
}

.profile-color-buttons .color-btn {
  width: 38px;
  height: 38px;
}

/* =========================================================
   ENTRE BEST FRIENDS - AJOUTS PROPRES VALIDÉS
   Cette partie remplace les anciens blocs ajoutés en désordre.
   À garder tout en bas du fichier.
   ========================================================= */


/* =========================================================
   1) COULEUR DU SITE DANS LA POP-UP PROFIL
   ========================================================= */

.profile-theme-zone {
  margin-top: 14px;
  margin-bottom: 10px;
  padding: 12px;
  border-radius: 16px;
  background: #f7f8fb;
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.profile-theme-zone .small {
  margin: 0 0 8px;
  font-weight: bold;
}

.profile-color-buttons {
  margin-top: 8px;
}

.profile-color-buttons .color-btn {
  width: 38px;
  height: 38px;
}


/* =========================================================
   2) HEADER PLUS PROPRE, SANS CHANGER LA DISPOSITION
   ========================================================= */

.site-header {
  background: linear-gradient(135deg, var(--main-color), var(--second-color)) !important;
  color: white !important;
  padding: 18px 16px !important;
  text-align: center !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14) !important;
}

.logo-header-box {
  max-width: 1100px !important;
  margin: 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 16px !important;
}

.site-logo {
  width: 92px !important;
  height: 92px !important;
  object-fit: contain !important;
  border-radius: 50% !important;
  background: white !important;
  padding: 4px !important;
  border: 4px solid rgba(255, 255, 255, 0.85) !important;
  box-shadow:
    0 5px 16px rgba(0, 0, 0, 0.25),
    0 0 0 4px rgba(255, 255, 255, 0.18) !important;
}

.logo-header-box h1 {
  margin: 0 !important;
  font-size: 30px !important;
  line-height: 1.1 !important;
  font-weight: 900 !important;
  letter-spacing: -0.02em !important;
}

.logo-header-box p {
  margin: 5px 0 0 !important;
  font-size: 14px !important;
  opacity: 0.95 !important;
  font-weight: 600 !important;
}


/* =========================================================
   3) CONTOURS DES CARTES SELON LA COULEUR DU SITE
   ========================================================= */

.card,
.admin-card,
.action-card,
#selectedGroupCard,
#noGroupSelectedCard,
.notifications-box,
.group-item,
.member,
.post,
.comment,
.admin-user-card,
.admin-report-card,
.admin-warning-card,
.user-warnings-box {
  background:
    linear-gradient(var(--card-color), var(--card-color)) padding-box,
    linear-gradient(135deg, var(--main-color), var(--second-color)) border-box !important;
  border: 2px solid transparent !important;
}

.group-item:hover,
.group-item.active {
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(135deg, var(--main-color), var(--second-color)) border-box !important;
  border: 3px solid transparent !important;
}

.post {
  background:
    linear-gradient(#f7f8fb, #f7f8fb) padding-box,
    linear-gradient(135deg, var(--main-color), var(--second-color)) border-box !important;
}

.comment {
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(135deg, var(--main-color), var(--second-color)) border-box !important;
}

.account-avatar,
.profile-preview,
.avatar-small,
.avatar-placeholder {
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(135deg, var(--main-color), var(--second-color)) border-box !important;
  border-color: transparent !important;
}

.modal-box,
.large-modal-box,
.large-modal {
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(135deg, var(--main-color), var(--second-color)) border-box !important;
  border: 3px solid transparent !important;
}

.groups-horizontal-list::-webkit-scrollbar-thumb,
.posts-scroll-zone::-webkit-scrollbar-thumb,
.admin-scroll-zone::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, var(--main-color), var(--second-color)) !important;
}


/* =========================================================
   4) BOUTONS ET CHAMPS UN PEU PLUS PROPRES
   ========================================================= */

button {
  transition: filter 0.15s ease, transform 0.15s ease;
}

button:hover {
  transform: translateY(-1px);
}

button.secondary:hover,
button.danger:hover,
button.success:hover {
  transform: translateY(-1px);
}

input:focus,
textarea:focus {
  outline: none;
  border-color: var(--main-color) !important;
  box-shadow: 0 0 0 3px rgba(108, 99, 255, 0.14);
}


/* =========================================================
   5) RESPONSIVE DU HEADER
   ========================================================= */

@media (max-width: 650px) {
  .site-header {
    padding: 16px 12px !important;
  }

  .logo-header-box {
    flex-direction: column !important;
    gap: 8px !important;
  }

  .site-logo {
    width: 86px !important;
    height: 86px !important;
  }

  .logo-header-box h1 {
    font-size: 26px !important;
  }

  .logo-header-box p {
    font-size: 13px !important;
  }
}

/* =========================================================
   ENTRE BEST FRIENDS - ÉTAPE 4 : BOUTONS PLUS MODERNES
   Fichier complet propre.
   Objectif :
   - Boutons plus modernes
   - Couleurs cohérentes avec le thème choisi
   - Boutons secondaires plus doux
   - Boutons danger plus propres
   - Sans changer la disposition
   - Sans toucher au JavaScript
   ========================================================= */

/* Boutons généraux */
button {
  border-radius: 14px !important;
  border: none !important;

  background: linear-gradient(135deg, var(--main-color), var(--second-color)) !important;
  color: #ffffff !important;

  font-weight: 800 !important;
  letter-spacing: 0.01em !important;

  box-shadow:
    0 6px 14px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;

  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    filter 0.15s ease,
    background 0.15s ease !important;
}

button:hover {
  transform: translateY(-1px) !important;
  filter: brightness(0.96) !important;
  box-shadow:
    0 8px 18px rgba(0, 0, 0, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
}

button:active {
  transform: translateY(0) scale(0.99) !important;
  box-shadow:
    0 4px 10px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
}

/* Boutons secondaires */
button.secondary,
.secondary {
  background: #eef0f7 !important;
  color: #25283a !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow:
    0 4px 10px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
}

button.secondary:hover,
.secondary:hover {
  background: #e4e7f2 !important;
  filter: none !important;
}

/* Boutons danger */
button.danger,
.danger {
  background: linear-gradient(135deg, #e74c3c, #c0392b) !important;
  color: #ffffff !important;
  box-shadow:
    0 6px 14px rgba(231, 76, 60, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
}

button.danger:hover,
.danger:hover {
  filter: brightness(0.95) !important;
}

/* Boutons succès */
button.success,
.success {
  background: linear-gradient(135deg, #2ecc71, #27ae60) !important;
  color: #ffffff !important;
  box-shadow:
    0 6px 14px rgba(46, 204, 113, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
}

/* Petits boutons dans les publications, commentaires, membres et admin */
.post-actions button,
.comment-actions button,
.comment button,
.member-actions-inline button,
.admin-actions button,
.collapse-btn,
.collapse-card-btn,
.modal-close-btn {
  border-radius: 12px !important;
  padding: 8px 12px !important;
  font-size: 14px !important;
  box-shadow:
    0 4px 10px rgba(0, 0, 0, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
}

/* Bouton fermer des pop-ups */
.modal-close-btn {
  background: #eef0f7 !important;
  color: #222222 !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

/* Boutons j'aime */
.like-btn,
.comment-like-btn {
  background: #eef0f7 !important;
  color: #25283a !important;
}

.like-btn.active,
.comment-like-btn.active {
  background: linear-gradient(135deg, #ff4b8b, #ff7bbd) !important;
  color: #ffffff !important;
}

/* Boutons couleurs : on ne leur applique pas le dégradé général */
.color-btn {
  background: inherit !important;
  border: 3px solid white !important;
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.25),
    0 0 0 1px rgba(0, 0, 0, 0.08) !important;
}

.color-btn:hover {
  transform: scale(1.08) !important;
}

/* Boutons emoji : on garde un style clair */
#emojiBox button,
.comment-emoji-box button {
  background: #ffffff !important;
  color: #222222 !important;
  border: 1px solid #dddddd !important;
  box-shadow: none !important;
}

#emojiBox button:hover,
.comment-emoji-box button:hover {
  background: #f0f2f8 !important;
  transform: translateY(-1px) !important;
}

/* Bouton message privé */
#privateChatSendBtn {
  min-height: 52px !important;
}

/* Mobile : boutons confortables */
@media (max-width: 650px) {
  button {
    min-height: 46px !important;
  }

  .post-actions button,
  .comment-actions button,
  .member-actions-inline button,
  .admin-actions button {
    width: 100% !important;
  }
}

/* =========================================================
   ENTRE BEST FRIENDS - ÉTAPE 5 : POP-UP IMAGE RESPONSIVE
   Fichier complet propre.

   Problème corrigé :
   - Quand on ajoute une image, l'aperçu devient trop grand.
   - La fenêtre grandit trop sur un petit écran 14 pouces.
   - Les boutons sortent de l'écran.

   Objectif :
   - La pop-up reste toujours dans l'écran.
   - L'aperçu image s'adapte à la taille disponible.
   - Les boutons restent accessibles.
   - Une barre de défilement apparaît si nécessaire.
   - Sans toucher au JavaScript.
   ========================================================= */


/* Toutes les pop-ups doivent rester dans la hauteur visible */
.modal-overlay {
  align-items: center !important;
  justify-content: center !important;
  padding: 14px !important;
  overflow-y: auto !important;
}

/* Boîte de pop-up limitée à l'écran */
.modal-box,
.modal-box-large,
.large-modal,
.large-modal-box {
  max-height: calc(100vh - 28px) !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
}

/* Pop-up grande : largeur raisonnable, hauteur maîtrisée */
.modal-box-large,
.large-modal,
.large-modal-box {
  width: min(760px, 94vw) !important;
}

/* Zone d'aperçu image : ne doit jamais pousser la fenêtre hors écran */
.image-preview-box {
  max-height: min(42vh, 300px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;

  margin-top: 10px !important;
  padding: 10px !important;

  border-radius: 14px !important;
  background: #f4f6fb !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

/* Image d'aperçu avant publication */
.post-image-preview,
#imagePreview,
#postImagePreview,
.image-preview-box img {
  display: block !important;

  max-width: 100% !important;
  width: auto !important;

  max-height: min(32vh, 230px) !important;
  height: auto !important;

  object-fit: contain !important;
  margin: 0 auto 8px auto !important;

  border-radius: 12px !important;
}

/* Image dans une publication déjà postée : grande mais maîtrisée */
.post-image {
  max-width: 100% !important;
  max-height: min(56vh, 520px) !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
}

/* Le bouton de suppression d'image doit rester visible */
#removeImageBtn,
.image-preview-box button {
  position: sticky !important;
  bottom: 0 !important;
  z-index: 5 !important;
  margin-top: 8px !important;
}

/* Formulaire de publication : éviter que les champs débordent */
#postModal textarea,
#postText,
#createPostText,
textarea {
  max-width: 100% !important;
}

/* Sur petits écrans ou portables 14 pouces avec faible hauteur */
@media (max-height: 820px) {
  .modal-overlay {
    align-items: flex-start !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

  .modal-box,
  .modal-box-large,
  .large-modal,
  .large-modal-box {
    max-height: calc(100vh - 20px) !important;
  }

  .image-preview-box {
    max-height: 240px !important;
  }

  .post-image-preview,
  #imagePreview,
  #postImagePreview,
  .image-preview-box img {
    max-height: 170px !important;
  }
}

/* Sur téléphone */
@media (max-width: 650px) {
  .modal-overlay {
    padding: 10px !important;
    align-items: flex-start !important;
  }

  .modal-box,
  .modal-box-large,
  .large-modal,
  .large-modal-box {
    max-width: 96vw !important;
    max-height: calc(100vh - 20px) !important;
  }

  .image-preview-box {
    max-height: 220px !important;
  }

  .post-image-preview,
  #imagePreview,
  #postImagePreview,
  .image-preview-box img {
    max-height: 160px !important;
  }
}

/* =========================================================
   ENTRE BEST FRIENDS - ÉTAPE 6 : MES GROUPES PLUS LISIBLES
   Fichier complet propre.

   Objectif :
   - Améliorer la zone Mes groupes
   - Garder le défilement horizontal
   - Rendre les groupes plus lisibles
   - Garder les pastilles notification et cœur bien placés
   - Contours selon la couleur choisie du site
   - Sans toucher au JavaScript
   ========================================================= */


/* Carte Mes groupes */
.groups-top-card {
  overflow: hidden !important;
}

.groups-top-card h2 {
  margin-bottom: 8px !important;
}

/* Petite indication plus douce */
.groups-top-card .small {
  color: #697184 !important;
}

/* Liste horizontale plus propre */
.groups-horizontal-list {
  gap: 16px !important;
  padding: 12px 8px 16px !important;
  scroll-snap-type: x proximity !important;
}

/* Barre de défilement plus moderne */
.groups-horizontal-list::-webkit-scrollbar {
  height: 9px !important;
}

.groups-horizontal-list::-webkit-scrollbar-track {
  background: #e8ebf3 !important;
  border-radius: 999px !important;
}

.groups-horizontal-list::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, var(--main-color), var(--second-color)) !important;
  border-radius: 999px !important;
}

/* Carte groupe */
.group-item {
  scroll-snap-align: start !important;

  position: relative !important;
  overflow: visible !important;

  flex: 0 0 255px !important;
  min-width: 255px !important;
  max-width: 255px !important;
  min-height: 145px !important;

  padding: 18px 62px 46px 28px !important;

  border-radius: 20px !important;

  background:
    linear-gradient(#ffffff, #f8f9ff) padding-box,
    linear-gradient(135deg, var(--main-color), var(--second-color)) border-box !important;

  border: 2px solid transparent !important;

  box-shadow:
    0 7px 18px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.75) !important;

  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    background 0.15s ease !important;
}

/* Survol et groupe actif */
.group-item:hover,
.group-item.active {
  transform: translateY(-3px) !important;

  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(135deg, var(--main-color), var(--second-color)) border-box !important;

  border: 3px solid transparent !important;

  box-shadow:
    0 11px 26px rgba(0, 0, 0, 0.14),
    0 0 0 4px rgba(108, 99, 255, 0.08) !important;
}

/* Groupe actif : petit repère intérieur */
.group-item.active::after {
  content: "✓" !important;
  position: absolute !important;
  top: 10px !important;
  right: 12px !important;

  width: 24px !important;
  height: 24px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: 50% !important;
  background: linear-gradient(135deg, var(--main-color), var(--second-color)) !important;
  color: white !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  border: 3px solid white !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18) !important;
}

/* Titre du groupe */
.group-title-line {
  position: static !important;
  display: block !important;
  padding-right: 0 !important;
}

.group-item strong {
  display: block !important;
  max-width: 100% !important;

  font-size: 16px !important;
  line-height: 1.18 !important;
  font-weight: 900 !important;
  color: #202334 !important;

  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;

  margin-bottom: 7px !important;
}

/* Description / code / infos */
.group-item .small {
  max-width: 100% !important;
  color: #687184 !important;
  font-size: 13px !important;
  line-height: 1.28 !important;

  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

.group-info-line {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
}

/* Infos membres / en ligne */
.group-meta {
  position: absolute !important;
  left: 28px !important;
  right: 62px !important;
  bottom: 16px !important;

  margin: 0 !important;
  font-size: 13px !important;
  font-weight: 800 !important;

  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  align-items: center !important;
}

.group-meta .members-count,
.group-meta .online-count {
  display: inline-flex !important;
  align-items: center !important;
  padding: 3px 7px !important;
  border-radius: 999px !important;
  background: #eef0f7 !important;
}

.group-meta .members-count {
  color: var(--main-color) !important;
}

.group-meta .online-count {
  color: #00a86b !important;
}

/* Rond rouge : messages / nouvelles activités */
.group-item .group-message-badge,
.group-message-badge {
  position: absolute !important;
  top: auto !important;
  right: auto !important;
  bottom: 10px !important;
  left: 28px !important;

  min-width: 28px !important;
  width: auto !important;
  height: 28px !important;
  padding: 0 8px !important;
  border-radius: 999px !important;

  background: #ff1f3d !important;
  color: white !important;
  font-size: 15px !important;
  line-height: 28px !important;
  font-weight: 900 !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  border: 4px solid white !important;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25) !important;
  z-index: 50 !important;
}

/* Cœur rouge : nouveaux j'aime */
.group-item .group-like-heart,
.group-like-heart {
  position: absolute !important;
  top: auto !important;
  left: auto !important;
  right: 22px !important;
  bottom: 4px !important;

  width: 42px !important;
  height: 42px !important;
  z-index: 49 !important;
}

.group-like-heart-icon {
  position: absolute !important;
  inset: 0 !important;

  color: red !important;
  font-size: 46px !important;
  line-height: 42px !important;
  text-align: center !important;

  -webkit-text-stroke: 4px white !important;
  paint-order: stroke fill !important;

  text-shadow:
    -3px -3px 0 white,
     0   -3px 0 white,
     3px -3px 0 white,
    -3px  0   0 white,
     3px  0   0 white,
    -3px  3px 0 white,
     0    3px 0 white,
     3px  3px 0 white,
     0    4px 9px rgba(0, 0, 0, 0.28) !important;
}

.group-like-heart-count {
  position: absolute !important;
  top: 12px !important;
  left: 0 !important;
  right: 0 !important;

  color: white !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  text-align: center !important;
  z-index: 2 !important;

  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55) !important;
}

/* Pastille ancienne si encore utilisée */
.group-badge {
  background: #ff1f3d !important;
  border: 4px solid white !important;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25) !important;
}

/* Cas où les notifications sont cachées */
.group-message-badge.hidden,
.group-like-heart.hidden,
.group-badge.hidden {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* Mobile */
@media (max-width: 650px) {
  .groups-horizontal-list {
    gap: 14px !important;
    padding: 10px 5px 14px !important;
  }

  .groups-horizontal-list .group-item,
  .group-item {
    flex: 0 0 86% !important;
    min-width: 86% !important;
    max-width: 86% !important;
    min-height: 148px !important;
    padding: 18px 62px 48px 24px !important;
  }

  .group-meta {
    left: 24px !important;
    right: 62px !important;
  }

  .group-message-badge {
    left: 24px !important;
  }
}

/* =========================================================
   ENTRE BEST FRIENDS - ÉTAPE 6B : MES GROUPES PLUS COMPACTS
   Fichier complet propre.

   Problème corrigé :
   - Les cartes Mes groupes étaient trop hautes visuellement.

   Objectif :
   - Réduire la hauteur des cartes groupe
   - Garder les cartes lisibles
   - Garder le groupe sélectionné en premier
   - Garder les notifications et les cœurs bien placés
   - Sans toucher au JavaScript
   ========================================================= */


/* Liste Mes groupes : un peu moins haute */
.groups-horizontal-list {
  gap: 14px !important;
  padding: 8px 8px 12px !important;
}

/* Carte groupe plus compacte */
.group-item {
  flex: 0 0 245px !important;
  min-width: 245px !important;
  max-width: 245px !important;

  min-height: 112px !important;
  height: 112px !important;

  padding: 12px 56px 34px 22px !important;

  border-radius: 18px !important;
}

/* Survol et actif : on garde l'effet, mais plus discret */
.group-item:hover,
.group-item.active {
  transform: translateY(-2px) !important;
}

/* Coche du groupe actif plus petite */
.group-item.active::after {
  top: 7px !important;
  right: 9px !important;
  width: 21px !important;
  height: 21px !important;
  font-size: 12px !important;
  border-width: 2px !important;
}

/* Titre plus compact */
.group-item strong {
  font-size: 15px !important;
  line-height: 1.12 !important;
  margin-bottom: 4px !important;

  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* Texte secondaire plus compact */
.group-item .small {
  font-size: 12px !important;
  line-height: 1.18 !important;

  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* Infos membres / en ligne plus basses et plus compactes */
.group-meta {
  left: 22px !important;
  right: 56px !important;
  bottom: 9px !important;

  font-size: 12px !important;
  gap: 4px !important;
}

.group-meta .members-count,
.group-meta .online-count {
  padding: 2px 6px !important;
}

/* Rond rouge en bas à gauche, ajusté à la nouvelle hauteur */
.group-item .group-message-badge,
.group-message-badge {
  left: 22px !important;
  bottom: 7px !important;

  min-width: 25px !important;
  height: 25px !important;
  padding: 0 7px !important;

  font-size: 13px !important;
  line-height: 25px !important;
  border-width: 3px !important;
}

/* Cœur rouge en bas à droite, un peu plus petit */
.group-item .group-like-heart,
.group-like-heart {
  right: 18px !important;
  bottom: 0 !important;

  width: 38px !important;
  height: 38px !important;
}

.group-like-heart-icon {
  font-size: 42px !important;
  line-height: 38px !important;
  -webkit-text-stroke: 3px white !important;
}

.group-like-heart-count {
  top: 10px !important;
  font-size: 13px !important;
}

/* Mobile : cartes compactes mais encore faciles à cliquer */
@media (max-width: 650px) {
  .groups-horizontal-list {
    padding: 8px 5px 12px !important;
  }

  .groups-horizontal-list .group-item,
  .group-item {
    flex: 0 0 82% !important;
    min-width: 82% !important;
    max-width: 82% !important;

    min-height: 118px !important;
    height: 118px !important;

    padding: 12px 56px 36px 20px !important;
  }

  .group-meta {
    left: 20px !important;
    right: 56px !important;
    bottom: 9px !important;
  }

  .group-message-badge {
    left: 20px !important;
  }
}

/* =========================================================
   ENTRE BEST FRIENDS - ÉTAPE 6C : CORRECTION BOUTONS COULEUR PROFIL
   Fichier complet propre.

   Problème corrigé :
   - Dans Modifier mon profil, les boutons de couleur apparaissaient blancs.
   - La couleur changeait quand même, mais visuellement on ne voyait pas les couleurs.

   Cause :
   - Le style moderne des boutons écrasait le fond des boutons couleur.

   Objectif :
   - Afficher à nouveau les vraies couleurs.
   - Garder les boutons arrondis et propres.
   - Ne pas toucher au JavaScript.
   ========================================================= */


/* Les boutons de couleur ne doivent pas prendre le style des boutons classiques */
.color-buttons .color-btn,
.profile-color-buttons .color-btn,
button.color-btn {
  width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;

  padding: 0 !important;
  margin: 0 !important;

  border-radius: 50% !important;
  border: 3px solid white !important;

  color: transparent !important;
  font-size: 0 !important;

  box-shadow:
    0 3px 9px rgba(0, 0, 0, 0.22),
    0 0 0 1px rgba(0, 0, 0, 0.10) !important;

  transform: none !important;
  filter: none !important;
}

/* On remet explicitement les couleurs */
.color-btn[data-main="#4b6cff"] {
  background: #4b6cff !important;
}

.color-btn[data-main="#ff4b8b"] {
  background: #ff4b8b !important;
}

.color-btn[data-main="#00a86b"] {
  background: #00a86b !important;
}

.color-btn[data-main="#ff9800"] {
  background: #ff9800 !important;
}

.color-btn[data-main="#222222"] {
  background: #222222 !important;
}

.color-btn[data-main="#8e44ad"] {
  background: #8e44ad !important;
}

/* Effet au survol */
.color-buttons .color-btn:hover,
.profile-color-buttons .color-btn:hover,
button.color-btn:hover {
  transform: scale(1.08) !important;
  filter: brightness(1.03) !important;
}

/* Bouton couleur sélectionné : petit contour plus visible */
.color-buttons .color-btn.active,
.profile-color-buttons .color-btn.active,
button.color-btn.active {
  border: 4px solid #ffffff !important;
  box-shadow:
    0 0 0 3px var(--main-color),
    0 4px 12px rgba(0, 0, 0, 0.25) !important;
}

/* Zone couleur dans le profil : un peu plus lisible */
.profile-theme-zone {
  background: #f5f6fb !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

.profile-theme-zone .small {
  color: #555d70 !important;
  font-size: 15px !important;
}

/* =========================================================
   ENTRE BEST FRIENDS - ÉTAPE 6D : DÉGRADÉS PLUS BEAUX POUR CHAQUE COULEUR
   Fichier complet propre.

   Problème corrigé :
   - Le premier choix bleu/violet avait un bel effet.
   - Les autres couleurs paraissaient trop plates.

   Objectif :
   - Chaque thème couleur a maintenant un vrai duo de couleurs.
   - Les boutons couleur affichent aussi leur dégradé.
   - Les contours, boutons et header gardent un rendu plus riche.
   - Sans toucher au JavaScript.
   ========================================================= */


/* Boutons couleur avec vrais dégradés visibles */
.color-btn[data-main="#4b6cff"] {
  background: linear-gradient(135deg, #4b6cff, #7b4bff) !important;
}

.color-btn[data-main="#ff4b8b"] {
  background: linear-gradient(135deg, #ff4b8b, #ff7bbd) !important;
}

.color-btn[data-main="#00a86b"] {
  background: linear-gradient(135deg, #00a86b, #00c897) !important;
}

.color-btn[data-main="#ff9800"] {
  background: linear-gradient(135deg, #ff9800, #ffc107) !important;
}

.color-btn[data-main="#222222"] {
  background: linear-gradient(135deg, #111111, #555555) !important;
}

.color-btn[data-main="#8e44ad"] {
  background: linear-gradient(135deg, #8e44ad, #3498db) !important;
}


/* Effet plus riche sur le header */
.site-header {
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.28), transparent 28%),
    linear-gradient(135deg, var(--main-color), var(--second-color)) !important;
}


/* Effet plus riche sur les boutons principaux */
button:not(.secondary):not(.danger):not(.success):not(.color-btn):not(.modal-close-btn):not(.like-btn):not(.comment-like-btn) {
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.22), transparent 32%),
    linear-gradient(135deg, var(--main-color), var(--second-color)) !important;
}


/* Effet plus riche sur les contours des cartes */
.card,
.admin-card,
.action-card,
#selectedGroupCard,
#noGroupSelectedCard,
.notifications-box,
.group-item,
.member,
.post,
.comment,
.admin-user-card,
.admin-report-card,
.admin-warning-card,
.user-warnings-box,
.modal-box,
.large-modal-box,
.large-modal {
  background:
    linear-gradient(var(--card-color), var(--card-color)) padding-box,
    linear-gradient(135deg, var(--main-color), var(--second-color)) border-box !important;
}


/* Légère lumière interne sur les cartes pour rappeler l'effet du premier thème */
.card,
.group-item,
.member,
.post,
.comment {
  box-shadow:
    0 7px 18px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.75) !important;
}


/* Groupe actif : contour encore plus visible avec le thème choisi */
.group-item.active {
  box-shadow:
    0 11px 26px rgba(0, 0, 0, 0.14),
    0 0 0 4px rgba(108, 99, 255, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.85) !important;
}


/* Bouton couleur sélectionné : halo avec le thème choisi */
.color-buttons .color-btn.active,
.profile-color-buttons .color-btn.active,
button.color-btn.active {
  border: 4px solid #ffffff !important;
  box-shadow:
    0 0 0 3px var(--main-color),
    0 4px 12px rgba(0, 0, 0, 0.25) !important;
}


/* Petit texte explicatif optionnel dans la zone couleur */
.profile-theme-zone {
  background:
    linear-gradient(#f7f8fb, #f1f3fa) padding-box,
    linear-gradient(135deg, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.02)) border-box !important;
}

/* =========================================================
   ENTRE BEST FRIENDS - ÉTAPE 7B : SIGNALER PLUS LÉGER ET NOTIFICATION CONSERVÉE
   Fichier complet propre.

   Objectif :
   - Garder la notification de message privé près de la photo de profil.
   - Rendre seulement le bouton Signaler plus léger.
   - Ne pas masquer la pastille privée.
   ========================================================= */


/* On force la pastille message privé à rester disponible */
#accountPrivateMessageDot,
.account-private-message-dot {
  display: inline-flex !important;
}

#accountPrivateMessageDot.hidden,
.account-private-message-dot.hidden {
  display: none !important;
}


/* Bouton Signaler dans les messages privés : discret, sans gros fond */
.private-message-security-actions {
  margin-top: 6px !important;
  display: flex !important;
  justify-content: flex-end !important;
}

.private-message-report-btn {
  width: auto !important;
  min-height: auto !important;

  margin: 0 !important;
  padding: 3px 6px !important;

  background: transparent !important;
  background-image: none !important;

  color: #9b1c1c !important;
  border: none !important;
  box-shadow: none !important;

  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;

  border-radius: 6px !important;
  opacity: 0.72 !important;

  transform: none !important;
  filter: none !important;
}

.private-message-report-btn:hover {
  background: rgba(231, 76, 60, 0.08) !important;
  color: #e74c3c !important;
  opacity: 1 !important;
  transform: none !important;
  box-shadow: none !important;
  filter: none !important;
}

.private-message-report-btn:active {
  transform: none !important;
  box-shadow: none !important;
}


/* Signaler publication/commentaire : plus léger aussi */
.report-btn,
.comment-report-btn {
  width: auto !important;
  min-height: auto !important;

  background: transparent !important;
  background-image: none !important;

  color: #9b1c1c !important;
  border: none !important;
  box-shadow: none !important;

  padding: 6px 8px !important;
  font-size: 13px !important;
  font-weight: 700 !important;

  opacity: 0.78 !important;
}

.report-btn:hover,
.comment-report-btn:hover {
  background: rgba(231, 76, 60, 0.08) !important;
  color: #e74c3c !important;
  opacity: 1 !important;
  transform: none !important;
  box-shadow: none !important;
}


/* Bouton Signaler le profil : visible mais moins agressif */
#reportMemberProfileBtn {
  background: transparent !important;
  background-image: none !important;
  color: #9b1c1c !important;
  border: 1px solid rgba(231, 76, 60, 0.28) !important;
  box-shadow: none !important;
  font-size: 14px !important;
  font-weight: 800 !important;
}

#reportMemberProfileBtn:hover {
  background: rgba(231, 76, 60, 0.08) !important;
  color: #e74c3c !important;
  transform: none !important;
  box-shadow: none !important;
}


@media (max-width: 650px) {
  .private-message-security-actions {
    justify-content: flex-start !important;
  }

  .private-message-report-btn,
  .report-btn,
  .comment-report-btn {
    width: auto !important;
  }
}

/* =========================================================
   ENTRE BEST FRIENDS - ÉTAPE 8 : MEMBRES DU GROUPE PLUS LISIBLES
   Fichier complet propre.

   Objectif :
   - Améliorer la carte Membres du groupe
   - Rendre les membres plus lisibles
   - Rendre les boutons Profil / Message privé / Bloquer plus légers
   - Garder les fonctions existantes
   - Sans toucher au JavaScript
   ========================================================= */


/* Carte membres : un peu plus claire */
#membersCard,
.members-card {
  overflow: hidden !important;
}

/* Titre de la carte membres */
#membersCard .card-title-line,
.members-card .card-title-line {
  margin-bottom: 12px !important;
}

/* Zone liste des membres */
#membersList {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

/* Ligne membre plus moderne */
.member {
  border-radius: 16px !important;
  padding: 10px 12px !important;

  background:
    linear-gradient(#ffffff, #f8f9ff) padding-box,
    linear-gradient(135deg, var(--main-color), var(--second-color)) border-box !important;

  border: 2px solid transparent !important;

  box-shadow:
    0 5px 14px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}

/* Ligne interne */
.member-line {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto auto !important;
  gap: 10px !important;
  align-items: center !important;
}

/* Nom + avatar */
.member-name,
.member-name-with-avatar {
  min-width: 0 !important;
}

.member-name-with-avatar {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.member-name-with-avatar strong,
.member-name {
  font-size: 15px !important;
  font-weight: 900 !important;
  color: #202334 !important;
  overflow-wrap: anywhere !important;
}

/* Avatar membre plus propre */
.member-name-with-avatar .avatar-small,
.member-name-with-avatar .avatar-placeholder {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;

  border-radius: 50% !important;
  border: 3px solid white !important;

  box-shadow:
    0 3px 9px rgba(0, 0, 0, 0.16),
    0 0 0 2px rgba(108, 99, 255, 0.08) !important;
}

/* Statut en ligne / hors ligne */
.member-status {
  justify-self: end !important;

  font-size: 12px !important;
  font-weight: 800 !important;

  padding: 5px 9px !important;
  border-radius: 999px !important;

  border: 1px solid rgba(0, 0, 0, 0.06) !important;
}

.member-status.online {
  background: rgba(46, 204, 113, 0.14) !important;
  color: #1f8b4c !important;
}

.member-status.offline {
  background: rgba(0, 0, 0, 0.05) !important;
  color: #666666 !important;
}

/* Actions des membres */
.member-actions-inline {
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 6px !important;
}

/* Petits boutons membres plus compacts */
.member-actions-inline button {
  width: auto !important;
  min-height: 30px !important;

  margin: 0 !important;
  padding: 6px 9px !important;

  border-radius: 999px !important;

  font-size: 12px !important;
  font-weight: 800 !important;

  box-shadow: none !important;
}

/* Bouton Profil plus discret */
.member-actions-inline button:not(.danger):not(.success) {
  background: #eef0f7 !important;
  color: #25283a !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

/* Bouton Message privé : couleur thème mais léger */
.member-actions-inline button.private-message-btn,
.member-actions-inline button[data-action="private-message"] {
  background: rgba(108, 99, 255, 0.10) !important;
  color: var(--main-color) !important;
  border: 1px solid rgba(108, 99, 255, 0.20) !important;
}

/* Boutons danger dans les membres moins énormes */
.member-actions-inline button.danger {
  background: rgba(231, 76, 60, 0.10) !important;
  color: #c0392b !important;
  border: 1px solid rgba(231, 76, 60, 0.20) !important;
}

.member-actions-inline button.danger:hover {
  background: rgba(231, 76, 60, 0.18) !important;
  color: #a93226 !important;
}

/* Bloc demandes d'entrée dans les membres */
.join-requests-box {
  border-radius: 16px !important;
  padding: 10px 12px !important;
  margin-bottom: 10px !important;
}

/* Modération du groupe */
.group-moderation-box,
.moderation-box {
  border-radius: 16px !important;
  padding: 10px 12px !important;
  background: #f8f9ff !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

/* Mobile : les membres restent bien lisibles */
@media (max-width: 850px) {
  .member-line {
    grid-template-columns: 1fr !important;
    align-items: stretch !important;
  }

  .member-status {
    justify-self: start !important;
  }

  .member-actions-inline {
    justify-content: flex-start !important;
    width: 100% !important;
  }

  .member-actions-inline button {
    flex: 1 1 auto !important;
  }
}

@media (max-width: 650px) {
  .member {
    padding: 10px !important;
  }

  .member-actions-inline {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
  }

  .member-actions-inline button {
    width: 100% !important;
  }
}

/* =========================================================
   ENTRE BEST FRIENDS - ÉTAPE 8B : AFFICHER MASQUER EN TEXTE DISCRET
   Fichier complet propre.

   Objectif :
   - Remplacer visuellement les gros boutons Afficher / Masquer
     par un simple texte cliquable discret.
   - Garder la même fonction JavaScript.
   - Ne pas toucher au HTML.
   ========================================================= */


/* Ligne de titre avec action discrète */
.card-title-line,
.simple-admin-header {
  align-items: center !important;
}

/* Boutons Afficher / Masquer transformés en texte */
.collapse-btn,
.collapse-card-btn {
  width: auto !important;
  min-height: auto !important;

  margin: 0 !important;
  padding: 0 !important;

  background: transparent !important;
  background-image: none !important;

  color: var(--main-color) !important;
  border: none !important;
  box-shadow: none !important;

  border-radius: 0 !important;

  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;

  text-decoration: none !important;
  cursor: pointer !important;

  opacity: 0.78 !important;

  transform: none !important;
  filter: none !important;
}

/* Petit effet au survol, mais pas de gros bouton */
.collapse-btn:hover,
.collapse-card-btn:hover {
  background: transparent !important;
  background-image: none !important;

  color: var(--second-color) !important;
  text-decoration: underline !important;

  box-shadow: none !important;
  transform: none !important;
  filter: none !important;

  opacity: 1 !important;
}

/* Clic : aucun effet de bouton massif */
.collapse-btn:active,
.collapse-card-btn:active {
  transform: none !important;
  box-shadow: none !important;
}

/* Variante si le texte contient une flèche ou une icône */
.collapse-btn::after,
.collapse-card-btn::after {
  content: "" !important;
}

/* Sur mobile, le lien reste discret et ne prend pas toute la largeur */
@media (max-width: 650px) {
  .collapse-btn,
  .collapse-card-btn {
    width: auto !important;
    min-height: auto !important;
    font-size: 13px !important;
    padding: 0 !important;
  }

  .card-title-line,
  .simple-admin-header {
    gap: 10px !important;
  }
}

/* =========================================================
   ENTRE BEST FRIENDS - ÉTAPE 8C : AFFICHER MASQUER TRANSPARENT COULEUR SITE
   Fichier complet propre.

   Objectif :
   - Le texte Afficher / Masquer doit avoir un fond totalement transparent.
   - Sa couleur doit suivre la couleur choisie du site.
   - Aucun contour, aucune ombre, aucun effet de bouton.
   ========================================================= */

.collapse-btn,
.collapse-card-btn,
button.collapse-btn,
button.collapse-card-btn {
  width: auto !important;
  min-width: 0 !important;
  min-height: auto !important;

  margin: 0 !important;
  padding: 0 !important;

  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;

  color: var(--main-color) !important;

  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;

  border-radius: 0 !important;

  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;

  text-decoration: none !important;
  cursor: pointer !important;

  opacity: 0.9 !important;

  transform: none !important;
  filter: none !important;

  appearance: none !important;
  -webkit-appearance: none !important;
}

/* Survol : couleur secondaire du thème, toujours sans fond */
.collapse-btn:hover,
.collapse-card-btn:hover,
button.collapse-btn:hover,
button.collapse-card-btn:hover {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;

  color: var(--second-color) !important;

  border: 0 !important;
  box-shadow: none !important;

  text-decoration: underline !important;

  opacity: 1 !important;

  transform: none !important;
  filter: none !important;
}

/* Clic : aucun effet visuel de bouton */
.collapse-btn:active,
.collapse-card-btn:active,
button.collapse-btn:active,
button.collapse-card-btn:active {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;

  color: var(--main-color) !important;

  border: 0 !important;
  box-shadow: none !important;

  transform: none !important;
  filter: none !important;
}

/* Focus clavier : léger soulignement, pas de cadre bouton */
.collapse-btn:focus,
.collapse-card-btn:focus,
button.collapse-btn:focus,
button.collapse-card-btn:focus {
  outline: none !important;
  text-decoration: underline !important;
  box-shadow: none !important;
}

/* Sur mobile, le texte ne prend jamais toute la largeur */
@media (max-width: 650px) {
  .collapse-btn,
  .collapse-card-btn,
  button.collapse-btn,
  button.collapse-card-btn {
    width: auto !important;
    min-width: 0 !important;
    min-height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
  }
}

/* =========================================================
   ENTRE BEST FRIENDS - ÉTAPE 8D : AFFICHER MASQUER VRAI TEXTE
   Correction forte à garder tout en bas du CSS.

   Problème :
   - Le style général des boutons reprenait encore le dessus.
   - Masquer / Afficher ressemblait encore à un bouton.

   Solution :
   - On remet totalement à zéro ces boutons avec all: unset.
   - Ils deviennent de vrais textes cliquables.
   - Leur couleur suit la couleur choisie du site.
   ========================================================= */

#toggleMembersBtn,
#toggleMembersBtn.collapse-btn,
.card-title-line > .collapse-btn,
.card-title-line button.collapse-btn,
.simple-admin-header > .collapse-card-btn,
.simple-admin-header button.collapse-card-btn,
.collapse-btn,
.collapse-card-btn {
  all: unset !important;

  display: inline !important;
  box-sizing: border-box !important;

  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  background: none !important;
  background-color: transparent !important;
  background-image: none !important;

  color: var(--main-color) !important;

  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;

  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;

  text-decoration: none !important;
  text-align: right !important;
  white-space: nowrap !important;

  cursor: pointer !important;
  opacity: 0.92 !important;

  appearance: none !important;
  -webkit-appearance: none !important;

  transform: none !important;
  filter: none !important;
}

/* Survol : toujours aucun fond, seulement couleur + soulignement */
#toggleMembersBtn:hover,
#toggleMembersBtn.collapse-btn:hover,
.card-title-line > .collapse-btn:hover,
.card-title-line button.collapse-btn:hover,
.simple-admin-header > .collapse-card-btn:hover,
.simple-admin-header button.collapse-card-btn:hover,
.collapse-btn:hover,
.collapse-card-btn:hover {
  all: unset !important;

  display: inline !important;

  color: var(--second-color) !important;

  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;

  text-decoration: underline !important;
  white-space: nowrap !important;

  cursor: pointer !important;
  opacity: 1 !important;

  background: none !important;
  background-color: transparent !important;
  background-image: none !important;

  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;

  transform: none !important;
  filter: none !important;
}

/* Clic / focus : aucun effet de bouton */
#toggleMembersBtn:active,
#toggleMembersBtn:focus,
.collapse-btn:active,
.collapse-btn:focus,
.collapse-card-btn:active,
.collapse-card-btn:focus {
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;

  color: var(--main-color) !important;

  border: none !important;
  outline: none !important;
  box-shadow: none !important;

  transform: none !important;
  filter: none !important;
}

/* La ligne du titre garde le texte à droite proprement */
.card-title-line,
.simple-admin-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
}

/* Mobile : le texte reste petit et à droite */
@media (max-width: 650px) {
  #toggleMembersBtn,
  .collapse-btn,
  .collapse-card-btn {
    font-size: 13px !important;
  }
}

/* =========================================================
   ENTRE BEST FRIENDS - ÉTAPE 8E : SIGNALER MESSAGE PRIVÉ EN TEXTE ROUGE
   Correction forte à garder tout en bas du CSS.

   Objectif :
   - Dans les messages privés, Signaler ne doit plus ressembler à un bouton.
   - Il doit devenir un simple texte cliquable.
   - Le texte Signaler doit rester rouge.
   - Sans toucher au JavaScript.
   ========================================================= */

/* Zone du lien Signaler sous un message privé */
.private-message-security-actions {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;

  margin-top: 5px !important;
  padding: 0 !important;

  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Signaler devient un vrai texte rouge cliquable */
.private-message-report-btn,
button.private-message-report-btn {
  all: unset !important;

  display: inline !important;
  box-sizing: border-box !important;

  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  background: none !important;
  background-color: transparent !important;
  background-image: none !important;

  color: #c0392b !important;

  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;

  font-family: inherit !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;

  text-decoration: none !important;
  text-align: right !important;
  white-space: nowrap !important;

  cursor: pointer !important;
  opacity: 0.82 !important;

  appearance: none !important;
  -webkit-appearance: none !important;

  transform: none !important;
  filter: none !important;
}

/* Survol : rouge plus vif + soulignement, toujours sans fond */
.private-message-report-btn:hover,
button.private-message-report-btn:hover {
  all: unset !important;

  display: inline !important;

  color: #e74c3c !important;

  font-family: inherit !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;

  text-decoration: underline !important;
  white-space: nowrap !important;

  cursor: pointer !important;
  opacity: 1 !important;

  background: none !important;
  background-color: transparent !important;
  background-image: none !important;

  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;

  transform: none !important;
  filter: none !important;
}

/* Clic / focus : aucun retour de style bouton */
.private-message-report-btn:active,
.private-message-report-btn:focus,
button.private-message-report-btn:active,
button.private-message-report-btn:focus {
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;

  color: #c0392b !important;

  border: none !important;
  outline: none !important;
  box-shadow: none !important;

  transform: none !important;
  filter: none !important;
}

/* On continue de ne pas afficher Signaler sur mes propres messages */
.private-message.mine .private-message-security-actions {
  display: none !important;
}

/* Mobile : le texte reste discret */
@media (max-width: 650px) {
  .private-message-security-actions {
    justify-content: flex-end !important;
  }

  .private-message-report-btn,
  button.private-message-report-btn {
    font-size: 12px !important;
  }
}

/* =========================================================
   ENTRE BEST FRIENDS - ÉTAPE 8F : SIGNALER MESSAGE PRIVÉ FORCÉ EN TEXTE
   Correction très forte à garder tout en bas du CSS.

   Problème :
   - Le bouton Signaler dans Message privé gardait encore son fond.
   - L'emoji 🚨 restait visible.
   - Le style général des boutons reprenait le dessus.

   Solution :
   - On cible très précisément le bouton dans la pop-up de message privé.
   - On cache son texte original avec font-size: 0.
   - On recrée seulement le mot "Signaler" en rouge avec ::after.
   ========================================================= */


/* Zone sous le message privé */
#privateChatModal .private-message-security-actions,
.private-chat-modal-box .private-message-security-actions,
.private-message-bubble .private-message-security-actions {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;

  margin: 4px 0 0 0 !important;
  padding: 0 !important;

  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;

  border: none !important;
  box-shadow: none !important;
}


/* Le vrai bouton est rendu invisible visuellement comme bouton */
#privateChatModal .private-message-report-btn,
#privateChatModal button.private-message-report-btn,
.private-chat-modal-box .private-message-report-btn,
.private-chat-modal-box button.private-message-report-btn,
.private-message-bubble .private-message-report-btn,
.private-message-bubble button.private-message-report-btn {
  all: unset !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;

  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;

  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;

  color: transparent !important;
  font-size: 0 !important;
  line-height: 1 !important;

  text-decoration: none !important;
  white-space: nowrap !important;

  cursor: pointer !important;
  opacity: 0.86 !important;

  appearance: none !important;
  -webkit-appearance: none !important;

  transform: none !important;
  filter: none !important;
}


/* On affiche uniquement le texte rouge Signaler */
#privateChatModal .private-message-report-btn::after,
#privateChatModal button.private-message-report-btn::after,
.private-chat-modal-box .private-message-report-btn::after,
.private-chat-modal-box button.private-message-report-btn::after,
.private-message-bubble .private-message-report-btn::after,
.private-message-bubble button.private-message-report-btn::after {
  content: "Signaler" !important;

  display: inline !important;

  color: #c0392b !important;

  font-family: Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;

  text-decoration: none !important;
}


/* Survol : seulement souligné et rouge plus vif */
#privateChatModal .private-message-report-btn:hover,
#privateChatModal button.private-message-report-btn:hover,
.private-chat-modal-box .private-message-report-btn:hover,
.private-chat-modal-box button.private-message-report-btn:hover,
.private-message-bubble .private-message-report-btn:hover,
.private-message-bubble button.private-message-report-btn:hover {
  all: unset !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;

  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;

  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;

  color: transparent !important;
  font-size: 0 !important;

  cursor: pointer !important;
  opacity: 1 !important;

  transform: none !important;
  filter: none !important;
}

#privateChatModal .private-message-report-btn:hover::after,
#privateChatModal button.private-message-report-btn:hover::after,
.private-chat-modal-box .private-message-report-btn:hover::after,
.private-chat-modal-box button.private-message-report-btn:hover::after,
.private-message-bubble .private-message-report-btn:hover::after,
.private-message-bubble button.private-message-report-btn:hover::after {
  content: "Signaler" !important;
  color: #e74c3c !important;
  text-decoration: underline !important;
  font-family: Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}


/* Focus / clic : aucun retour de fond */
#privateChatModal .private-message-report-btn:focus,
#privateChatModal .private-message-report-btn:active,
#privateChatModal button.private-message-report-btn:focus,
#privateChatModal button.private-message-report-btn:active {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;

  border: none !important;
  outline: none !important;
  box-shadow: none !important;

  transform: none !important;
  filter: none !important;
}


/* On cache Signaler sur mes propres messages */
#privateChatModal .private-message.mine .private-message-security-actions,
.private-message.mine .private-message-security-actions {
  display: none !important;
}

/* =========================================================
   ENTRE BEST FRIENDS - ÉTAPE 9 : FIL D'ACTUALITÉ PLUS NET
   Fichier complet propre.

   Objectif :
   - Rendre les publications plus lisibles.
   - Alléger les boutons secondaires.
   - Mieux séparer les commentaires.
   - Garder les vrais boutons pour les actions importantes.
   - Sans toucher au JavaScript.
   ========================================================= */


/* Carte Publication : titre mieux équilibré */
#postCard,
.post-card {
  overflow: hidden !important;
}

/* Zone des publications */
.posts-scroll-zone {
  padding-right: 8px !important;
  scroll-behavior: smooth !important;
}

/* Publication plus nette */
.post {
  position: relative !important;

  padding: 15px 16px !important;
  margin-bottom: 16px !important;

  border-radius: 20px !important;

  background:
    linear-gradient(#ffffff, #f8f9ff) padding-box,
    linear-gradient(135deg, var(--main-color), var(--second-color)) border-box !important;

  border: 2px solid transparent !important;

  box-shadow:
    0 7px 18px rgba(0, 0, 0, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}

/* En-tête de publication */
.post-header {
  align-items: center !important;
  margin-bottom: 10px !important;
  padding-bottom: 8px !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
}

.post-header-left {
  min-width: 0 !important;
}

.post-header strong {
  color: #202334 !important;
  font-weight: 900 !important;
}

.post-header .small,
.post-header span {
  color: #6c7280 !important;
}

/* Texte de publication plus agréable */
.post-text {
  font-size: 16px !important;
  line-height: 1.5 !important;
  color: #202334 !important;
  margin: 8px 0 !important;
}

/* Image publication plus propre */
.post-image {
  border-radius: 18px !important;
  margin-top: 12px !important;

  border: 3px solid white !important;
  box-shadow:
    0 6px 18px rgba(0, 0, 0, 0.12) !important;

  background: #f2f3f7 !important;
}

/* Actions de publication : moins massives */
.post-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;

  margin-top: 12px !important;
  padding-top: 10px !important;

  border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
}

/* Boutons d'action publication compacts */
.post-actions button {
  width: auto !important;
  min-height: 34px !important;

  margin: 0 !important;
  padding: 7px 11px !important;

  border-radius: 999px !important;

  font-size: 13px !important;
  font-weight: 850 !important;

  box-shadow: none !important;
}

/* J'aime : bouton doux */
.like-btn {
  background: rgba(255, 75, 139, 0.10) !important;
  color: #d63384 !important;
  border: 1px solid rgba(255, 75, 139, 0.22) !important;
}

.like-btn:hover {
  background: rgba(255, 75, 139, 0.16) !important;
  color: #c2185b !important;
  transform: none !important;
}

.like-btn.active {
  background: linear-gradient(135deg, #ff4b8b, #ff7bbd) !important;
  color: white !important;
}

/* Emoji publication : doux */
.post-actions .emoji-btn,
#emojiBtn {
  background: rgba(108, 99, 255, 0.10) !important;
  color: var(--main-color) !important;
  border: 1px solid rgba(108, 99, 255, 0.20) !important;
}

/* Signaler publication : texte rouge discret */
.report-btn,
button.report-btn {
  all: unset !important;

  display: inline-flex !important;
  align-items: center !important;

  width: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;

  margin: 0 !important;
  padding: 7px 2px !important;

  color: #c0392b !important;

  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;

  cursor: pointer !important;
  opacity: 0.82 !important;

  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;

  transform: none !important;
  filter: none !important;
}

.report-btn:hover,
button.report-btn:hover {
  color: #e74c3c !important;
  text-decoration: underline !important;
  opacity: 1 !important;

  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  transform: none !important;
  filter: none !important;
}


/* =========================================================
   COMMENTAIRES PLUS PROPRES
   ========================================================= */

.comments-zone {
  margin-top: 14px !important;
  padding-top: 12px !important;

  border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
}

.comments-title {
  color: #4d5363 !important;
  font-size: 14px !important;
  font-weight: 900 !important;
}

/* Commentaire */
.comment {
  padding: 9px 10px !important;
  margin-bottom: 8px !important;

  border-radius: 14px !important;

  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(135deg, rgba(108, 99, 255, 0.45), rgba(139, 124, 255, 0.45)) border-box !important;

  border: 1px solid transparent !important;

  box-shadow:
    0 3px 10px rgba(0, 0, 0, 0.04) !important;
}

/* En-tête commentaire */
.comment-header {
  align-items: center !important;
  font-size: 12px !important;
  color: #6c7280 !important;
  margin-bottom: 5px !important;
}

.comment-header-left {
  min-width: 0 !important;
}

.comment-text {
  font-size: 14px !important;
  line-height: 1.42 !important;
  color: #202334 !important;
}

/* Actions commentaire */
.comment-actions {
  margin-top: 7px !important;
  gap: 8px !important;
  align-items: center !important;
}

/* Boutons commentaire plus légers */
.comment-actions button,
.comment button {
  width: auto !important;
  min-height: 28px !important;

  padding: 5px 8px !important;
  margin: 0 !important;

  border-radius: 999px !important;

  font-size: 12px !important;
  font-weight: 850 !important;

  box-shadow: none !important;
}

/* J'aime commentaire */
.comment-like-btn {
  background: rgba(255, 75, 139, 0.10) !important;
  color: #d63384 !important;
  border: 1px solid rgba(255, 75, 139, 0.22) !important;
}

.comment-like-btn.active {
  background: linear-gradient(135deg, #ff4b8b, #ff7bbd) !important;
  color: white !important;
}

/* Signaler commentaire : texte rouge discret */
.comment-report-btn,
button.comment-report-btn {
  all: unset !important;

  display: inline-flex !important;
  align-items: center !important;

  width: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;

  margin: 0 !important;
  padding: 5px 2px !important;

  color: #c0392b !important;

  font-family: inherit !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;

  cursor: pointer !important;
  opacity: 0.82 !important;

  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;

  transform: none !important;
  filter: none !important;
}

.comment-report-btn:hover,
button.comment-report-btn:hover {
  color: #e74c3c !important;
  text-decoration: underline !important;
  opacity: 1 !important;

  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  transform: none !important;
  filter: none !important;
}

/* Formulaire commentaire plus propre */
.comment-form {
  gap: 8px !important;
  margin-top: 10px !important;
}

.comment-form input {
  border-radius: 999px !important;
  background: #f8f9ff !important;
  border: 1px solid rgba(0, 0, 0, 0.10) !important;
}

.comment-form button {
  border-radius: 999px !important;
  min-height: 42px !important;
  padding: 8px 14px !important;
}

/* Boîtes emojis publications/commentaires */
#emojiBox,
.comment-emoji-box {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.10) !important;
}

#emojiBox button,
.comment-emoji-box button {
  border-radius: 10px !important;
}


/* Mobile */
@media (max-width: 650px) {
  .post {
    padding: 13px !important;
  }

  .post-actions {
    gap: 7px !important;
  }

  .post-actions button {
    width: auto !important;
    flex: 1 1 auto !important;
  }

  .report-btn,
  button.report-btn {
    flex: 0 0 auto !important;
  }

  .comment-form {
    flex-direction: column !important;
  }

  .comment-form button {
    width: 100% !important;
  }

  .comment-actions {
    display: flex !important;
    flex-wrap: wrap !important;
  }

  .comment-actions button {
    width: auto !important;
  }
}

/* =========================================================
   ENTRE BEST FRIENDS - ÉTAPE 10 : CRÉER UNE PUBLICATION PLUS PROPRE
   Fichier complet propre.

   Objectif :
   - Rendre la zone Créer une publication plus moderne.
   - Mieux l'intégrer au fil d'actualité.
   - Garder un vrai bouton visible pour publier.
   - Alléger les boutons secondaires.
   - Sans toucher au JavaScript.
   ========================================================= */


/* Carte Créer une publication */
#postActionCard,
.post-action-card {
  position: relative !important;
  overflow: hidden !important;

  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.85), transparent 28%) padding-box,
    linear-gradient(#ffffff, #f8f9ff) padding-box,
    linear-gradient(135deg, var(--main-color), var(--second-color)) border-box !important;

  border: 2px solid transparent !important;
  border-radius: 22px !important;

  box-shadow:
    0 8px 22px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}

/* Petit repère visuel discret */
#postActionCard::before,
.post-action-card::before {
  content: "" !important;

  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;

  height: 5px !important;

  background: linear-gradient(135deg, var(--main-color), var(--second-color)) !important;
}

/* Titre */
#postActionCard h2,
.post-action-card h2 {
  margin-bottom: 6px !important;
  font-size: 21px !important;
  font-weight: 900 !important;
  color: #202334 !important;
}

/* Texte explicatif */
#postActionCard .small,
.post-action-card .small {
  color: #667085 !important;
  line-height: 1.35 !important;
}

/* Bouton ouvrir la pop-up publication */
#openPostModalBtn,
.open-post-modal-btn {
  margin-top: 12px !important;

  min-height: 48px !important;
  border-radius: 999px !important;

  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.26), transparent 34%),
    linear-gradient(135deg, var(--main-color), var(--second-color)) !important;

  color: white !important;

  font-size: 15px !important;
  font-weight: 900 !important;

  box-shadow:
    0 7px 18px rgba(0, 0, 0, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.20) !important;
}

#openPostModalBtn:hover,
.open-post-modal-btn:hover {
  transform: translateY(-1px) !important;
  filter: brightness(0.98) !important;
}


/* =========================================================
   POP-UP NOUVELLE PUBLICATION
   ========================================================= */

/* Pop-up publication un peu plus large et agréable */
#postModal .modal-box,
#postModal .modal-box-large {
  width: min(620px, 94vw) !important;
  max-width: 94vw !important;

  border-radius: 24px !important;

  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(135deg, var(--main-color), var(--second-color)) border-box !important;

  border: 3px solid transparent !important;
}

/* Titre pop-up */
#postModal h2 {
  font-size: 24px !important;
  font-weight: 900 !important;
  color: #202334 !important;
}

/* Zone texte publication */
#postText,
#createPostText,
#postModal textarea {
  width: 100% !important;
  min-height: 140px !important;
  max-height: 240px !important;

  resize: vertical !important;

  border-radius: 18px !important;

  background: #f8f9ff !important;
  border: 1px solid rgba(0, 0, 0, 0.10) !important;

  padding: 14px !important;

  font-size: 16px !important;
  line-height: 1.45 !important;
  color: #202334 !important;

  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

#postText:focus,
#createPostText:focus,
#postModal textarea:focus {
  background: white !important;
  border-color: var(--main-color) !important;
  box-shadow:
    0 0 0 3px rgba(108, 99, 255, 0.14),
    inset 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

/* Boutons dans la pop-up publication */
#postModal button {
  border-radius: 999px !important;
}

/* Bouton publier : vrai bouton principal */
#sendPostBtn,
#createPostBtn,
#publishPostBtn,
#postModal button.success {
  min-height: 46px !important;

  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.24), transparent 34%),
    linear-gradient(135deg, var(--main-color), var(--second-color)) !important;

  color: white !important;
  font-weight: 900 !important;
}

/* Boutons secondaires de la pop-up publication */
#postModal button.secondary,
#postModal .secondary {
  background: #eef0f7 !important;
  color: #25283a !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: none !important;
}

/* Bouton emoji dans publication */
#emojiBtn,
#postEmojiBtn {
  background: rgba(108, 99, 255, 0.10) !important;
  color: var(--main-color) !important;
  border: 1px solid rgba(108, 99, 255, 0.20) !important;
}

/* Bouton ajouter image */
#imageBtn,
#postImageBtn,
#postImageInputBtn {
  background: rgba(0, 168, 107, 0.10) !important;
  color: #008b59 !important;
  border: 1px solid rgba(0, 168, 107, 0.20) !important;
}

/* Emoji box publication plus propre */
#emojiBox {
  margin-top: 10px !important;
  padding: 10px !important;

  border-radius: 18px !important;

  background: white !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.10) !important;
}

#emojiBox button {
  min-height: 36px !important;
  border-radius: 10px !important;
  font-size: 20px !important;
}

/* Aperçu image dans la pop-up */
.image-preview-box {
  border-radius: 18px !important;
  background: #f4f6fb !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;

  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75) !important;
}

.post-image-preview,
#imagePreview,
#postImagePreview,
.image-preview-box img {
  border-radius: 16px !important;
  border: 3px solid white !important;
  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.12) !important;
}

/* Supprimer image : texte rouge discret */
#removeImageBtn,
.image-preview-box button.danger {
  all: unset !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;

  margin-top: 8px !important;
  padding: 4px 2px !important;

  color: #c0392b !important;

  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;

  cursor: pointer !important;
  opacity: 0.85 !important;

  background: transparent !important;
  border: none !important;
  box-shadow: none !important;

  text-decoration: none !important;

  transform: none !important;
  filter: none !important;
}

#removeImageBtn:hover,
.image-preview-box button.danger:hover {
  color: #e74c3c !important;
  text-decoration: underline !important;
  opacity: 1 !important;

  background: transparent !important;
  border: none !important;
  box-shadow: none !important;

  transform: none !important;
  filter: none !important;
}


/* Mobile */
@media (max-width: 650px) {
  #postActionCard,
  .post-action-card {
    padding: 16px !important;
  }

  #postModal .modal-box,
  #postModal .modal-box-large {
    width: 96vw !important;
  }

  #postText,
  #createPostText,
  #postModal textarea {
    min-height: 120px !important;
  }

  #openPostModalBtn {
    min-height: 46px !important;
  }
}

/* =========================================================
   ENTRE BEST FRIENDS - ÉTAPE 10C : CORRECTION VISUELLE SANS TOUCHER APP JS
   Correction à garder tout en bas du CSS.

   Objectif :
   - Ne plus toucher au JavaScript pour les petits +.
   - Supprimer le gros trait sur la carte Publication.
   - Forcer visuellement les boutons principaux à avoir un + blanc.
   - Garder l'app.js stable.
   ========================================================= */


/* 1) Suppression du gros trait en haut de la carte Publication */
#postActionCard::before,
.post-action-card::before {
  display: none !important;
  content: none !important;
  height: 0 !important;
  background: transparent !important;
}


/* 2) Bouton Publier : on masque le contenu d'origine et on réaffiche proprement */
#openPostModalBtn {
  color: transparent !important;
  font-size: 0 !important;
  position: relative !important;
}

#openPostModalBtn::after {
  content: "+ Publier" !important;

  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;

  font-family: Arial, sans-serif !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  line-height: 1 !important;

  text-shadow: none !important;
}


/* 3) Bouton Créer un groupe : même principe */
#createGroupBtn,
#openCreateGroupModalBtn,
#createGroupModalBtn {
  color: transparent !important;
  font-size: 0 !important;
  position: relative !important;
}

#createGroupBtn::after,
#openCreateGroupModalBtn::after,
#createGroupModalBtn::after {
  content: "+ Créer un groupe" !important;

  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;

  font-family: Arial, sans-serif !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  line-height: 1 !important;

  text-shadow: none !important;
}


/* 4) Si un bouton contient un span plus dans une ancienne version, on le force aussi en blanc */
.btn-plus,
.button-plus,
.plus-icon,
.action-plus {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}


/* 5) Les vrais boutons principaux gardent leur texte blanc */
#openPostModalBtn,
#createGroupBtn,
#openCreateGroupModalBtn,
#createGroupModalBtn {
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.24), transparent 34%),
    linear-gradient(135deg, var(--main-color), var(--second-color)) !important;
}


/* Mobile */
@media (max-width: 650px) {
  #openPostModalBtn::after,
  #createGroupBtn::after,
  #openCreateGroupModalBtn::after,
  #createGroupModalBtn::after {
    font-size: 14px !important;
  }
}

/* =========================================================
   ENTRE BEST FRIENDS - ÉTAPE 10D : PUBLICATION SIMPLIFIÉE
   Correction à garder tout en bas du CSS.

   Objectif :
   - Supprimer le gros titre "Publication".
   - Garder seulement le bouton principal.
   - Le bouton affiche "Ajouter une publication".
   - Le texte explicatif passe sous le bouton.
   - Ne pas toucher à app.js.
   ========================================================= */


/* Carte publication : organisation simple */
#postActionCard,
.post-action-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 10px !important;

  text-align: center !important;
}

/* On masque le titre Publication */
#postActionCard h2,
.post-action-card h2 {
  display: none !important;
}

/* Le texte explicatif passe sous le bouton */
#postActionCard .small,
.post-action-card .small {
  order: 2 !important;

  margin: 0 !important;
  padding: 0 !important;

  color: #667085 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  text-align: center !important;
}

/* Le bouton passe en premier */
#openPostModalBtn,
.open-post-modal-btn {
  order: 1 !important;

  width: 100% !important;
  min-height: 52px !important;

  margin: 0 !important;

  border-radius: 999px !important;

  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.24), transparent 34%),
    linear-gradient(135deg, var(--main-color), var(--second-color)) !important;

  box-shadow:
    0 7px 18px rgba(0, 0, 0, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.20) !important;
}

/* On remplace visuellement le texte du bouton */
#openPostModalBtn {
  color: transparent !important;
  font-size: 0 !important;
  position: relative !important;
}

#openPostModalBtn::after {
  content: "Ajouter une publication" !important;

  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;

  font-family: Arial, sans-serif !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  line-height: 1 !important;

  text-shadow: none !important;
}

/* Plus de barre décorative */
#postActionCard::before,
.post-action-card::before {
  display: none !important;
  content: none !important;
}

/* Mobile */
@media (max-width: 650px) {
  #openPostModalBtn::after {
    font-size: 15px !important;
  }

  #postActionCard .small,
  .post-action-card .small {
    font-size: 13px !important;
  }
}

/* =========================================================
   ENTRE BEST FRIENDS - ÉTAPE 10E : TEXTE AIDE PUBLICATION PLUS LÉGER
   Correction à garder tout en bas du CSS.

   Objectif :
   - Le texte sous le bouton Ajouter une publication ne doit pas être en gras.
   - Il doit être plus léger et plus discret.
   ========================================================= */

#postActionCard .small,
.post-action-card .small {
  font-weight: 400 !important;
  color: #6f7685 !important;
  font-size: 14px !important;
  line-height: 1.35 !important;
  opacity: 0.92 !important;
}

/* Mobile */
@media (max-width: 650px) {
  #postActionCard .small,
  .post-action-card .small {
    font-size: 13px !important;
    font-weight: 400 !important;
  }
}

/* =========================================================
   ENTRE BEST FRIENDS - ÉTAPE 11 : INVITATIONS ET ACTIONS GROUPES
   Fichier complet propre.

   Objectif :
   - Réduire l'ancien encadré du groupe sélectionné.
   - Le remplacer par un bouton Envoyer des invitations.
   - Mettre Inviter / Supprimer / Quitter dans Mes groupes.
   - Créer une pop-up invitation propre.
   ========================================================= */


/* Encadré du groupe sélectionné simplifié */
.selected-group-invite-card,
#selectedGroupCard.selected-group-invite-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 8px !important;

  padding: 16px !important;
  text-align: center !important;
}

.invite-main-btn {
  width: 100% !important;
  min-height: 50px !important;

  margin: 0 !important;
  border-radius: 999px !important;

  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.24), transparent 34%),
    linear-gradient(135deg, var(--main-color), var(--second-color)) !important;

  color: white !important;
  font-size: 16px !important;
  font-weight: 900 !important;

  box-shadow:
    0 7px 18px rgba(0, 0, 0, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.20) !important;
}

.selected-group-invite-help {
  margin: 0 !important;
  font-weight: 400 !important;
  color: #6f7685 !important;
}


/* Actions directement dans Mes groupes */
.group-card-actions {
  position: absolute !important;
  left: 18px !important;
  right: 18px !important;
  bottom: 8px !important;

  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 8px !important;

  z-index: 60 !important;
}

/* Petits liens actions groupe */
.group-card-action-btn {
  all: unset !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: auto !important;
  min-width: 0 !important;

  cursor: pointer !important;

  font-family: inherit !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;

  text-decoration: none !important;

  background: transparent !important;
  border: none !important;
  box-shadow: none !important;

  opacity: 0.86 !important;
}

.group-card-action-btn:hover {
  text-decoration: underline !important;
  opacity: 1 !important;
}

.group-card-invite-btn {
  color: var(--main-color) !important;
}

.group-card-leave-btn,
.group-card-delete-btn {
  color: #c0392b !important;
}

.group-card-delete-btn:hover,
.group-card-leave-btn:hover {
  color: #e74c3c !important;
}

/* On remonte légèrement les infos pour laisser de la place aux actions */
.group-item.active {
  padding-bottom: 54px !important;
  min-height: 132px !important;
  height: auto !important;
}

.group-item.active .group-meta {
  bottom: 30px !important;
}

/* Si cœur/j'aime, on évite qu'il écrase les actions */
.group-item.active .group-like-heart {
  bottom: 28px !important;
}


/* Pop-up invitation */
.invite-group-modal-box {
  width: min(560px, 94vw) !important;
  max-width: 94vw !important;

  text-align: center !important;
}

.invite-group-name {
  margin: 0 0 12px !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  color: #202334 !important;
}

.invite-code-box {
  margin: 12px 0 !important;
  padding: 14px !important;

  border-radius: 18px !important;

  background:
    linear-gradient(#f8f9ff, #f8f9ff) padding-box,
    linear-gradient(135deg, var(--main-color), var(--second-color)) border-box !important;

  border: 2px solid transparent !important;
}

.invite-code-box span {
  display: block !important;
  margin-bottom: 6px !important;
}

.invite-code-box strong {
  display: block !important;

  font-size: 30px !important;
  letter-spacing: 0.06em !important;
  color: var(--main-color) !important;
}

.invite-oral-text {
  margin: 8px 0 12px !important;
  font-weight: 400 !important;
  color: #6f7685 !important;
}

.invite-actions-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
  margin: 12px 0 !important;
}

.invite-actions-grid button,
.invite-action-link {
  width: auto !important;
  min-height: 42px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 10px 12px !important;

  border-radius: 999px !important;

  background: #eef0f7 !important;
  color: #25283a !important;

  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: none !important;

  font-size: 14px !important;
  font-weight: 900 !important;

  text-decoration: none !important;
  cursor: pointer !important;
}

.invite-actions-grid button:hover,
.invite-action-link:hover {
  background: #e4e7f2 !important;
  transform: none !important;
  filter: none !important;
}

.invite-qr-zone {
  margin-top: 14px !important;
  padding: 12px !important;

  border-radius: 18px !important;
  background: #f8f9ff !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

.invite-qr-zone img {
  width: 180px !important;
  height: 180px !important;
  max-width: 70vw !important;
  max-height: 70vw !important;

  display: block !important;
  margin: 8px auto 0 !important;

  border-radius: 12px !important;
  border: 4px solid white !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.14) !important;
  background: white !important;
}

.invite-help {
  margin-bottom: 0 !important;
  font-weight: 400 !important;
  color: #6f7685 !important;
}

/* Mobile */
@media (max-width: 650px) {
  .invite-actions-grid {
    grid-template-columns: 1fr !important;
  }

  .group-card-actions {
    left: 14px !important;
    right: 14px !important;
  }

  .group-card-action-btn {
    font-size: 12px !important;
  }

  .invite-code-box strong {
    font-size: 24px !important;
  }
}

/* =========================================================
   ENTRE BEST FRIENDS - ÉTAPE 11B : ACTIONS MES GROUPES PLUS LISIBLES
   Correction à garder tout en bas du CSS.

   Objectif :
   - Dans Mes groupes, ne plus afficher Inviter.
   - Garder seulement Supprimer ou Quitter.
   - Rendre le texte parfaitement lisible.
   - Éviter le fond violet/bleu derrière le texte.
   ========================================================= */


/* Zone action dans la carte groupe sélectionnée */
.group-card-actions {
  position: absolute !important;
  left: 18px !important;
  right: 18px !important;
  bottom: 8px !important;

  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 8px !important;

  padding: 0 !important;
  margin: 0 !important;

  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;

  border: none !important;
  box-shadow: none !important;

  z-index: 80 !important;
}

/* On cache Inviter au cas où une ancienne version l'affiche encore */
.group-card-invite-btn {
  display: none !important;
}

/* Supprimer / Quitter : vrai texte rouge lisible */
.group-card-action-btn,
.group-card-delete-btn,
.group-card-leave-btn,
button.group-card-action-btn,
button.group-card-delete-btn,
button.group-card-leave-btn {
  all: unset !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;

  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;

  margin: 0 !important;
  padding: 0 !important;

  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;

  color: #c0392b !important;
  -webkit-text-fill-color: #c0392b !important;

  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;

  font-family: Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;

  text-decoration: none !important;
  white-space: nowrap !important;

  cursor: pointer !important;
  opacity: 1 !important;

  transform: none !important;
  filter: none !important;
}

/* Survol : seulement souligné */
.group-card-action-btn:hover,
.group-card-delete-btn:hover,
.group-card-leave-btn:hover,
button.group-card-action-btn:hover,
button.group-card-delete-btn:hover,
button.group-card-leave-btn:hover {
  all: unset !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;

  color: #e74c3c !important;
  -webkit-text-fill-color: #e74c3c !important;

  font-family: Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;

  text-decoration: underline !important;
  white-space: nowrap !important;

  cursor: pointer !important;

  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;

  border: none !important;
  outline: none !important;
  box-shadow: none !important;

  transform: none !important;
  filter: none !important;
}

/* La carte sélectionnée laisse juste assez de place au texte rouge */
.group-item.active {
  padding-bottom: 48px !important;
}

/* Les infos membres/en ligne remontent un peu */
.group-item.active .group-info-line {
  margin-bottom: 18px !important;
}

/* Mobile */
@media (max-width: 650px) {
  .group-card-actions {
    left: 14px !important;
    right: 14px !important;
    bottom: 8px !important;
  }

  .group-card-action-btn,
  .group-card-delete-btn,
  .group-card-leave-btn,
  button.group-card-action-btn,
  button.group-card-delete-btn,
  button.group-card-leave-btn {
    font-size: 13px !important;
  }
}

/* =========================================================
   ENTRE BEST FRIENDS - ÉTAPE 11C : ACTIONS GROUPES EN VRAI TEXTE
   Correction à garder tout en bas du CSS.

   Objectif :
   - Supprimer / Quitter ne doivent plus avoir de fond.
   - Ce ne sont plus des boutons, mais de vrais textes cliquables.
   - Le texte reste rouge et lisible.
   ========================================================= */


/* Zone action dans Mes groupes */
.group-card-actions {
  position: absolute !important;
  left: 18px !important;
  right: 18px !important;
  bottom: 8px !important;

  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;

  padding: 0 !important;
  margin: 0 !important;

  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;

  border: none !important;
  box-shadow: none !important;

  z-index: 100 !important;
}

/* On cache toute ancienne version en bouton */
.group-card-action-btn,
.group-card-delete-btn,
.group-card-leave-btn,
button.group-card-action-btn,
button.group-card-delete-btn,
button.group-card-leave-btn,
.group-card-invite-btn {
  display: none !important;
}

/* Nouveau vrai texte cliquable */
.group-card-action-text,
.group-card-delete-text,
.group-card-leave-text {
  display: inline !important;

  margin: 0 !important;
  padding: 0 !important;

  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;

  color: #c0392b !important;
  -webkit-text-fill-color: #c0392b !important;

  border: none !important;
  outline: none !important;
  box-shadow: none !important;

  font-family: Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;

  text-decoration: none !important;
  white-space: nowrap !important;

  cursor: pointer !important;
  opacity: 1 !important;
}

/* Survol */
.group-card-action-text:hover,
.group-card-delete-text:hover,
.group-card-leave-text:hover {
  color: #e74c3c !important;
  -webkit-text-fill-color: #e74c3c !important;

  text-decoration: underline !important;

  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;

  border: none !important;
  box-shadow: none !important;
}

/* Focus clavier */
.group-card-action-text:focus,
.group-card-delete-text:focus,
.group-card-leave-text:focus {
  outline: none !important;
  text-decoration: underline !important;
}

/* Carte sélectionnée : assez de place, mais pas trop */
.group-item.active {
  padding-bottom: 48px !important;
}

.group-item.active .group-info-line {
  margin-bottom: 18px !important;
}

/* Mobile */
@media (max-width: 650px) {
  .group-card-actions {
    left: 14px !important;
    right: 14px !important;
  }

  .group-card-action-text,
  .group-card-delete-text,
  .group-card-leave-text {
    font-size: 13px !important;
  }
}

/* =========================================================
   ENTRE BEST FRIENDS - ÉTAPE 11D : ACTIONS CE GROUPE PLUS CLAIRES
   Correction à garder tout en bas du CSS.

   Objectif :
   - Afficher Supprimer ce groupe / Quitter ce groupe.
   - Garder le texte rouge, lisible, sans fond.
   - Laisser assez de place dans la carte.
   ========================================================= */

.group-card-actions {
  left: 16px !important;
  right: 16px !important;
  bottom: 8px !important;
  justify-content: flex-end !important;
}

.group-card-action-text,
.group-card-delete-text,
.group-card-leave-text {
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: -0.01em !important;

  color: #c0392b !important;
  -webkit-text-fill-color: #c0392b !important;

  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;

  border: none !important;
  box-shadow: none !important;
  text-decoration: none !important;
}

.group-card-action-text:hover,
.group-card-delete-text:hover,
.group-card-leave-text:hover {
  color: #e74c3c !important;
  -webkit-text-fill-color: #e74c3c !important;
  text-decoration: underline !important;
}

/* Un peu plus d'espace en bas de la carte sélectionnée */
.group-item.active {
  padding-bottom: 52px !important;
}

/* Mobile */
@media (max-width: 650px) {
  .group-card-action-text,
  .group-card-delete-text,
  .group-card-leave-text {
    font-size: 12px !important;
  }
}

/* =========================================================
   ENTRE BEST FRIENDS - ÉTAPE 12 : NOTIFICATIONS GAUCHE ALLÉGÉES
   Correction à garder tout en bas du CSS.

   Objectif :
   - Le bloc Notifications ne doit plus répéter les messages.
   - Les messages et messages privés sont déjà autour de la photo.
   - Le bloc garde surtout les avertissements importants.
   ========================================================= */

#groupsNotificationsLine.hidden,
#privateMessagesNotificationLine.hidden,
.private-messages-notification-line.hidden,
.notification-line.hidden {
  display: none !important;
}

.notifications-lines {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.warning-notification-line,
#warningsNotificationsLine {
  padding: 8px 10px !important;
  border-radius: 12px !important;

  background: rgba(255, 152, 0, 0.10) !important;
  color: #7a4b00 !important;

  font-weight: 500 !important;
}

.notifications-badge.hidden {
  display: none !important;
}

/* =========================================================
   ENTRE BEST FRIENDS - ÉTAPE 12B : NOTIFICATIONS SANS TITRE
   Correction à garder tout en bas du CSS.

   Objectif :
   - Supprimer le haut du bloc Notifications.
   - Ne garder que l'avertissement quand il existe.
   - Supprimer l'espace vide barré en rouge.
   ========================================================= */

/* On masque le titre / en-tête du bloc Notifications */
.notifications-box .notifications-header,
.notifications-header {
  display: none !important;
}

/* Bloc Notifications compact */
.notifications-box {
  padding: 10px !important;
  margin-top: 12px !important;
  margin-bottom: 12px !important;
}

/* Pas d'espace inutile */
.notifications-lines {
  margin: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
}

/* Les lignes cachées disparaissent vraiment */
#groupsNotificationsLine.hidden,
#privateMessagesNotificationLine.hidden,
.private-messages-notification-line.hidden,
.notification-line.hidden {
  display: none !important;
}

/* Avertissement seul dans le bloc */
#warningsNotificationsLine,
.warning-notification-line {
  margin: 0 !important;
  padding: 10px 12px !important;

  border-radius: 12px !important;

  background: rgba(255, 152, 0, 0.12) !important;
  color: #7a4b00 !important;

  font-weight: 500 !important;
  line-height: 1.35 !important;
}

/* Icône alignée proprement */
#warningsNotificationsLine .notification-line-icon,
.warning-notification-line .notification-line-icon {
  margin-top: 1px !important;
}

/* =========================================================
   ENTRE BEST FRIENDS - ÉTAPE 12C : CACHER AUCUN MESSAGE PRIVÉ
   Correction à garder tout en bas du CSS.

   Objectif :
   - La ligne Aucun message privé ne doit jamais apparaître
     dans le bloc Notifications de gauche.
   - Les messages privés restent gérés autour de la photo.
   ========================================================= */

#privateMessagesNotificationLine,
#privateMessageNotificationLine,
.private-messages-notification-line,
.private-message-notification-line {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

/* Le bloc Notifications reste compact quand il n'y a que l'avertissement */
.notifications-box {
  padding: 10px !important;
}

.notifications-lines {
  gap: 0 !important;
}


/* =========================================================
   ENTRE BEST FRIENDS - ÉTAPE 13 : MEMBRES BANNIS / SUPPRIMÉS
   Aucun changement visuel majeur.
   Cette étape est surtout corrigée dans app.js.
   ========================================================= */

/* =========================================================
   ENTRE BEST FRIENDS - ÉTAPE 13B : NETTOYAGE FORT MEMBRES BANNIS
   Correction principalement dans app.js.
   ========================================================= */

/* =========================================================
   ENTRE BEST FRIENDS - ÉTAPE 14 : POP-UP INVITATIONS AMÉLIORÉE
   Correction à garder tout en bas du CSS.

   Objectif :
   - Pop-up invitation plus claire.
   - Code bien visible.
   - Méthodes d'envoi mieux séparées.
   - QR code plus propre.
   ========================================================= */

.invite-group-modal-box {
  width: min(620px, 94vw) !important;
  max-width: 94vw !important;
  max-height: 92vh !important;
  overflow-y: auto !important;

  text-align: center !important;
}

.invite-modal-header h2 {
  margin-bottom: 6px !important;
}

.invite-modal-header .small {
  margin: 0 0 12px !important;
  font-weight: 400 !important;
  color: #6f7685 !important;
}

.invite-group-summary {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;

  margin: 10px 0 12px !important;
  padding: 10px 12px !important;

  border-radius: 16px !important;
  background: rgba(108, 99, 255, 0.07) !important;
  border: 1px solid rgba(108, 99, 255, 0.14) !important;
}

.invite-group-label {
  font-size: 12px !important;
  font-weight: 800 !important;
  color: #6f7685 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
}

.invite-group-summary strong {
  font-size: 18px !important;
  font-weight: 900 !important;
  color: #202334 !important;
}

.invite-code-box {
  margin: 12px 0 !important;
  padding: 16px !important;

  border-radius: 20px !important;

  background:
    linear-gradient(#ffffff, #f8f9ff) padding-box,
    linear-gradient(135deg, var(--main-color), var(--second-color)) border-box !important;

  border: 2px solid transparent !important;

  box-shadow:
    0 7px 18px rgba(0, 0, 0, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}

.invite-code-box > .small {
  display: block !important;
  margin-bottom: 8px !important;

  font-weight: 700 !important;
  color: #6f7685 !important;
}

#inviteGroupCode {
  display: block !important;

  margin: 6px 0 12px !important;

  font-size: clamp(28px, 6vw, 42px) !important;
  font-weight: 950 !important;
  letter-spacing: 0.08em !important;
  line-height: 1 !important;

  color: var(--main-color) !important;
  -webkit-text-fill-color: var(--main-color) !important;
}

.invite-copy-main-btn {
  width: 100% !important;
  min-height: 46px !important;

  margin: 0 !important;
  border-radius: 999px !important;

  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.24), transparent 34%),
    linear-gradient(135deg, var(--main-color), var(--second-color)) !important;

  color: white !important;
  font-size: 15px !important;
  font-weight: 900 !important;

  box-shadow:
    0 7px 18px rgba(0, 0, 0, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.20) !important;
}

.invite-methods {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 8px !important;

  margin: 12px 0 !important;
}

.invite-method-btn,
.invite-action-link {
  min-height: 42px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 9px 12px !important;

  border-radius: 999px !important;

  background: #eef0f7 !important;
  color: #25283a !important;

  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: none !important;

  font-size: 14px !important;
  font-weight: 900 !important;

  text-decoration: none !important;
  cursor: pointer !important;
}

.invite-method-btn:hover,
.invite-action-link:hover {
  background: #e4e7f2 !important;
  transform: none !important;
  filter: none !important;
}

.invite-oral-box {
  margin: 12px 0 !important;
  padding: 12px !important;

  border-radius: 16px !important;
  background: rgba(255, 152, 0, 0.09) !important;
  border: 1px solid rgba(255, 152, 0, 0.18) !important;
}

.invite-oral-box strong {
  display: block !important;
  margin-bottom: 5px !important;
  color: #7a4b00 !important;
}

.invite-oral-box .small {
  margin: 0 !important;
  font-weight: 400 !important;
  color: #7a4b00 !important;
}

.invite-qr-zone {
  margin-top: 12px !important;
  padding: 12px !important;

  border-radius: 18px !important;
  background: #f8f9ff !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

.invite-qr-title-line {
  display: flex !important;
  justify-content: center !important;
  align-items: baseline !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

.invite-qr-title-line strong {
  color: #202334 !important;
}

.invite-qr-title-line .small,
.invite-qr-help {
  font-weight: 400 !important;
  color: #6f7685 !important;
}

.invite-qr-zone img {
  width: 220px !important;
  height: 220px !important;
  max-width: 72vw !important;
  max-height: 72vw !important;

  display: block !important;
  margin: 10px auto !important;

  border-radius: 14px !important;
  border: 5px solid white !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.16) !important;
  background: white !important;
}

.invite-qr-help {
  margin: 0 !important;
  line-height: 1.35 !important;
}

/* Desktop : méthodes en 3 colonnes si assez large */
@media (min-width: 720px) {
  .invite-methods {
    grid-template-columns: 1fr 1fr 1fr !important;
  }
}

/* Mobile */
@media (max-width: 650px) {
  .invite-group-modal-box {
    width: 96vw !important;
  }

  .invite-code-box {
    padding: 14px !important;
  }

  .invite-qr-zone img {
    width: 190px !important;
    height: 190px !important;
  }
}

/* =========================================================
   ENTRE BEST FRIENDS - ÉTAPE 14B : BOUTONS INVITATION LISIBLES
   Correction à garder tout en bas du CSS.

   Objectif :
   - Tous les boutons de la pop-up invitation doivent être cohérents.
   - Le texte doit être blanc et lisible.
   - Plus de bouton avec fond coloré et texte foncé.
   ========================================================= */

/* Tous les boutons d'action dans la pop-up invitation */
#inviteGroupModal .invite-copy-main-btn,
#inviteGroupModal .invite-method-btn,
#inviteGroupModal .invite-action-link,
#copyInviteCodeBtn,
#copyInviteMessageBtn,
#inviteEmailLink,
#inviteSmsLink {
  width: 100% !important;
  min-height: 46px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  margin: 0 !important;
  padding: 10px 14px !important;

  border-radius: 999px !important;

  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.24), transparent 34%),
    linear-gradient(135deg, var(--main-color), var(--second-color)) !important;

  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;

  border: none !important;
  box-shadow:
    0 7px 18px rgba(0, 0, 0, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.20) !important;

  font-family: Arial, sans-serif !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
  text-align: center !important;
  text-decoration: none !important;

  cursor: pointer !important;

  transform: none !important;
  filter: none !important;
}

/* Survol : même couleur, juste un léger éclaircissement */
#inviteGroupModal .invite-copy-main-btn:hover,
#inviteGroupModal .invite-method-btn:hover,
#inviteGroupModal .invite-action-link:hover,
#copyInviteCodeBtn:hover,
#copyInviteMessageBtn:hover,
#inviteEmailLink:hover,
#inviteSmsLink:hover {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;

  filter: brightness(1.04) !important;
  transform: translateY(-1px) !important;

  text-decoration: none !important;
}

/* Clic */
#inviteGroupModal .invite-copy-main-btn:active,
#inviteGroupModal .invite-method-btn:active,
#inviteGroupModal .invite-action-link:active,
#copyInviteCodeBtn:active,
#copyInviteMessageBtn:active,
#inviteEmailLink:active,
#inviteSmsLink:active {
  transform: translateY(0) scale(0.99) !important;
  filter: brightness(0.98) !important;
}

/* Si un navigateur applique un style spécial aux liens */
#inviteGroupModal a,
#inviteGroupModal a:visited {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Organisation des boutons */
.invite-methods {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;
}

/* Sur grand écran, les trois boutons restent alignés mais lisibles */
@media (min-width: 720px) {
  .invite-methods {
    grid-template-columns: 1fr 1fr 1fr !important;
  }

  #inviteGroupModal .invite-method-btn,
  #inviteGroupModal .invite-action-link {
    min-height: 58px !important;
  }
}

/* Mobile */
@media (max-width: 650px) {
  #inviteGroupModal .invite-copy-main-btn,
  #inviteGroupModal .invite-method-btn,
  #inviteGroupModal .invite-action-link,
  #copyInviteCodeBtn,
  #copyInviteMessageBtn,
  #inviteEmailLink,
  #inviteSmsLink {
    font-size: 14px !important;
    min-height: 44px !important;
  }
}

/* =========================================================
   ENTRE BEST FRIENDS - ÉTAPE 14C : INVITATIONS CRÉATEUR SEULEMENT
   Correction à garder tout en bas du CSS.

   Objectif :
   - Quand le membre n'est pas créateur du groupe,
     le bloc Envoyer des invitations disparaît complètement.
   ========================================================= */

#selectedGroupCard.hidden,
.selected-group-invite-card.hidden {
  display: none !important;
}

/* =========================================================
   ENTRE BEST FRIENDS - ÉTAPE 14D : INVITATION ACTIONS EN TEXTES CLIQUABLES
   Correction à garder tout en bas du CSS.

   Objectif :
   - Les actions de la pop-up invitation ne doivent plus ressembler
     à de gros boutons.
   - Copier le code, copier le message, e-mail et SMS deviennent
     des textes cliquables plus légers.
   - Le code et le QR code restent bien visibles.
   ========================================================= */


/* Copier le code devient un texte cliquable sous le code */
#inviteGroupModal .invite-copy-main-btn,
#copyInviteCodeBtn {
  all: unset !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;

  margin: 2px auto 0 !important;
  padding: 0 !important;

  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;

  color: var(--main-color) !important;
  -webkit-text-fill-color: var(--main-color) !important;

  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;

  font-family: Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;

  text-decoration: none !important;
  text-align: center !important;
  cursor: pointer !important;

  opacity: 0.95 !important;

  transform: none !important;
  filter: none !important;
}


/* Les autres méthodes deviennent aussi des textes cliquables */
#inviteGroupModal .invite-methods {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;

  gap: 8px 18px !important;

  margin: 14px 0 10px !important;
  padding: 0 !important;

  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

#inviteGroupModal .invite-method-btn,
#inviteGroupModal .invite-action-link,
#copyInviteMessageBtn,
#inviteEmailLink,
#inviteSmsLink {
  all: unset !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;

  color: var(--main-color) !important;
  -webkit-text-fill-color: var(--main-color) !important;

  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;

  font-family: Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;

  text-decoration: none !important;
  text-align: center !important;
  white-space: nowrap !important;

  cursor: pointer !important;
  opacity: 0.92 !important;

  transform: none !important;
  filter: none !important;
}


/* Petits séparateurs visuels entre les textes */
#inviteGroupModal .invite-method-btn:not(:last-child)::after,
#inviteGroupModal .invite-action-link:not(:last-child)::after,
#copyInviteMessageBtn::after,
#inviteEmailLink::after {
  content: "•" !important;

  display: inline-block !important;
  margin-left: 18px !important;

  color: #a0a6b5 !important;
  -webkit-text-fill-color: #a0a6b5 !important;

  font-weight: 700 !important;
  text-decoration: none !important;
}


/* Survol : soulignement léger, pas de fond */
#inviteGroupModal .invite-copy-main-btn:hover,
#copyInviteCodeBtn:hover,
#inviteGroupModal .invite-method-btn:hover,
#inviteGroupModal .invite-action-link:hover,
#copyInviteMessageBtn:hover,
#inviteEmailLink:hover,
#inviteSmsLink:hover {
  color: var(--second-color) !important;
  -webkit-text-fill-color: var(--second-color) !important;

  text-decoration: underline !important;
  opacity: 1 !important;

  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;

  border: none !important;
  outline: none !important;
  box-shadow: none !important;

  transform: none !important;
  filter: none !important;
}


/* Clic / focus : aucun retour de gros bouton */
#inviteGroupModal .invite-copy-main-btn:active,
#inviteGroupModal .invite-copy-main-btn:focus,
#copyInviteCodeBtn:active,
#copyInviteCodeBtn:focus,
#inviteGroupModal .invite-method-btn:active,
#inviteGroupModal .invite-method-btn:focus,
#inviteGroupModal .invite-action-link:active,
#inviteGroupModal .invite-action-link:focus,
#copyInviteMessageBtn:active,
#copyInviteMessageBtn:focus,
#inviteEmailLink:active,
#inviteEmailLink:focus,
#inviteSmsLink:active,
#inviteSmsLink:focus {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;

  border: none !important;
  outline: none !important;
  box-shadow: none !important;

  transform: none !important;
  filter: none !important;
}


/* On garde le code comme élément principal de la pop-up */
#inviteGroupCode {
  margin-bottom: 8px !important;
}


/* Boîte du code un peu moins haute maintenant que le bouton est léger */
.invite-code-box {
  padding: 15px !important;
}


/* Mobile : les textes peuvent passer sur plusieurs lignes */
@media (max-width: 650px) {
  #inviteGroupModal .invite-methods {
    flex-direction: column !important;
    gap: 8px !important;
  }

  #inviteGroupModal .invite-method-btn,
  #inviteGroupModal .invite-action-link,
  #copyInviteMessageBtn,
  #inviteEmailLink,
  #inviteSmsLink {
    white-space: normal !important;
    font-size: 14px !important;
  }

  #inviteGroupModal .invite-method-btn::after,
  #inviteGroupModal .invite-action-link::after,
  #copyInviteMessageBtn::after,
  #inviteEmailLink::after {
    content: "" !important;
    display: none !important;
    margin: 0 !important;
  }
}

/* =========================================================
   ENTRE BEST FRIENDS - ÉTAPE 15 : MEMBRES ET MODÉRATION PLUS PROPRE
   Correction à garder tout en bas du CSS.

   Objectif :
   - Rendre la liste des membres plus propre.
   - Garder Profil / Message privé comme petits boutons doux.
   - Rendre Éjecter / Bloquer moins massifs.
   - Garder les actions de modération bien visibles.
   - Sans toucher au JavaScript.
   ========================================================= */


/* Carte membre plus nette */
.member {
  padding: 12px !important;
  border-radius: 18px !important;

  background:
    linear-gradient(#ffffff, #f8f9ff) padding-box,
    linear-gradient(135deg, var(--main-color), var(--second-color)) border-box !important;

  border: 2px solid transparent !important;

  box-shadow:
    0 5px 14px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.85) !important;
}

/* Ligne membre mieux alignée */
.member-line {
  display: grid !important;
  grid-template-columns: minmax(180px, 1fr) auto auto !important;
  align-items: center !important;
  gap: 10px !important;
}

/* Nom + avatar */
.member-name,
.member-name-with-avatar {
  min-width: 0 !important;
}

.member-name-with-avatar {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.member-name-with-avatar strong,
.member-name {
  color: #202334 !important;
  font-weight: 900 !important;
  overflow-wrap: anywhere !important;
}

/* Statut en ligne / hors ligne plus doux */
.member-status {
  min-width: 100px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 7px 10px !important;

  border-radius: 999px !important;

  font-size: 13px !important;
  font-weight: 900 !important;

  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  box-shadow: none !important;
}

.member-status.online {
  background: rgba(46, 204, 113, 0.16) !important;
  color: #0b8a4a !important;
}

.member-status.offline {
  background: rgba(0, 0, 0, 0.06) !important;
  color: #5f6673 !important;
}

/* Zone actions */
.member-actions-inline {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 8px !important;
}

/* Profil et Message privé : petits boutons doux */
.member-actions-inline button:not(.danger):not(.admin-danger-btn):not(.block-btn):not(.kick-btn) {
  width: auto !important;
  min-height: 34px !important;

  margin: 0 !important;
  padding: 7px 12px !important;

  border-radius: 999px !important;

  background: #eef0f7 !important;
  color: #202334 !important;
  -webkit-text-fill-color: #202334 !important;

  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: none !important;

  font-size: 13px !important;
  font-weight: 900 !important;

  transform: none !important;
  filter: none !important;
}

.member-actions-inline button:not(.danger):not(.admin-danger-btn):not(.block-btn):not(.kick-btn):hover {
  background: #e4e7f2 !important;
  color: #202334 !important;
  -webkit-text-fill-color: #202334 !important;

  transform: none !important;
  filter: none !important;
  box-shadow: none !important;
}

/* Éjecter / Bloquer : version plus légère en texte rouge/orange */
.member-actions-inline button.danger,
.member-actions-inline .danger,
.member-actions-inline .admin-danger-btn,
.member-actions-inline .block-btn,
.member-actions-inline .kick-btn {
  all: unset !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;

  border: none !important;
  outline: none !important;
  box-shadow: none !important;

  font-family: Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;

  text-decoration: none !important;
  white-space: nowrap !important;

  cursor: pointer !important;

  transform: none !important;
  filter: none !important;
}

/* Éjecter plutôt orange/brun */
.member-actions-inline button[onclick*="kick"],
.member-actions-inline button.kick-btn,
.member-actions-inline .kick-btn {
  color: #b85b00 !important;
  -webkit-text-fill-color: #b85b00 !important;
}

/* Bloquer plutôt rouge */
.member-actions-inline button.danger,
.member-actions-inline .danger,
.member-actions-inline .block-btn,
.member-actions-inline .admin-danger-btn {
  color: #c0392b !important;
  -webkit-text-fill-color: #c0392b !important;
}

/* Survol des actions de modération */
.member-actions-inline button.danger:hover,
.member-actions-inline .danger:hover,
.member-actions-inline .admin-danger-btn:hover,
.member-actions-inline .block-btn:hover,
.member-actions-inline .kick-btn:hover {
  text-decoration: underline !important;

  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;

  border: none !important;
  box-shadow: none !important;

  transform: none !important;
  filter: none !important;
}

/* Si le texte contient une icône, elle reste lisible */
.member-actions-inline button.danger *,
.member-actions-inline .danger *,
.member-actions-inline .admin-danger-btn *,
.member-actions-inline .block-btn *,
.member-actions-inline .kick-btn * {
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important;
}


/* Bloc Modération du groupe plus doux */
.member + .moderation-box,
.group-moderation-box,
.moderation-box {
  border-radius: 18px !important;
  background: #ffffff !important;
  border: 2px solid rgba(231, 76, 60, 0.20) !important;
  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.05) !important;
}

/* Mobile / écran étroit */
@media (max-width: 850px) {
  .member-line {
    grid-template-columns: 1fr !important;
    align-items: flex-start !important;
  }

  .member-status {
    min-width: 0 !important;
  }

  .member-actions-inline {
    width: 100% !important;
    justify-content: flex-start !important;
  }

  .member-actions-inline button:not(.danger):not(.admin-danger-btn):not(.block-btn):not(.kick-btn) {
    width: auto !important;
  }
}

@media (max-width: 650px) {
  .member {
    padding: 11px !important;
  }

  .member-actions-inline {
    gap: 10px !important;
  }

  .member-actions-inline button:not(.danger):not(.admin-danger-btn):not(.block-btn):not(.kick-btn) {
    flex: 1 1 auto !important;
  }
}

/* =========================================================
   ENTRE BEST FRIENDS - ÉTAPE 16 : BLOC MODÉRATION DU GROUPE PLUS PROPRE
   Correction à garder tout en bas du CSS.

   Objectif :
   - Rendre le bloc Modération du groupe plus discret.
   - Présenter clairement les personnes en lecture seule.
   - Garder les actions utiles visibles sans gros boutons.
   - Sans toucher au JavaScript.
   ========================================================= */


/* Bloc Modération du groupe */
.group-moderation-box,
.moderation-box,
.blocked-members-box,
#blockedMembersBox {
  margin-top: 12px !important;
  padding: 12px !important;

  border-radius: 18px !important;

  background:
    linear-gradient(#ffffff, #fffafa) padding-box,
    linear-gradient(135deg, rgba(231, 76, 60, 0.40), rgba(255, 152, 0, 0.35)) border-box !important;

  border: 2px solid transparent !important;

  box-shadow:
    0 5px 14px rgba(0, 0, 0, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.85) !important;
}

/* Titre du bloc modération */
.group-moderation-box h3,
.group-moderation-box h4,
.moderation-box h3,
.moderation-box h4,
.blocked-members-box h3,
.blocked-members-box h4,
#blockedMembersBox h3,
#blockedMembersBox h4 {
  margin: 0 0 8px !important;

  color: #202334 !important;
  font-size: 18px !important;
  font-weight: 900 !important;
}

/* Texte d'information */
.group-moderation-box .small,
.moderation-box .small,
.blocked-members-box .small,
#blockedMembersBox .small {
  color: #6f7685 !important;
  font-weight: 400 !important;
  line-height: 1.35 !important;
}

/* Ligne d'une personne en lecture seule */
.blocked-member,
.blocked-member-line,
.readonly-member,
.readonly-member-line,
.moderation-member-line {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;

  margin-top: 8px !important;
  padding: 10px !important;

  border-radius: 14px !important;

  background: rgba(231, 76, 60, 0.06) !important;
  border: 1px solid rgba(231, 76, 60, 0.12) !important;

  box-shadow: none !important;
}

/* Nom de la personne */
.blocked-member strong,
.blocked-member-line strong,
.readonly-member strong,
.readonly-member-line strong,
.moderation-member-line strong {
  color: #202334 !important;
  font-weight: 900 !important;
}

/* Texte secondaire */
.blocked-member .small,
.blocked-member-line .small,
.readonly-member .small,
.readonly-member-line .small,
.moderation-member-line .small {
  margin: 0 !important;
  color: #6f7685 !important;
}

/* Boutons / actions dans modération : texte cliquable */
.group-moderation-box button,
.moderation-box button,
.blocked-members-box button,
#blockedMembersBox button {
  all: unset !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;

  color: var(--main-color) !important;
  -webkit-text-fill-color: var(--main-color) !important;

  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;

  font-family: Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;

  text-decoration: none !important;
  white-space: nowrap !important;

  cursor: pointer !important;
  opacity: 0.92 !important;

  transform: none !important;
  filter: none !important;
}

/* Survol action modération */
.group-moderation-box button:hover,
.moderation-box button:hover,
.blocked-members-box button:hover,
#blockedMembersBox button:hover {
  color: var(--second-color) !important;
  -webkit-text-fill-color: var(--second-color) !important;

  text-decoration: underline !important;
  opacity: 1 !important;

  background: transparent !important;
  border: none !important;
  box-shadow: none !important;

  transform: none !important;
  filter: none !important;
}

/* Si bouton dangereux dans ce bloc, il reste rouge */
.group-moderation-box button.danger,
.moderation-box button.danger,
.blocked-members-box button.danger,
#blockedMembersBox button.danger {
  color: #c0392b !important;
  -webkit-text-fill-color: #c0392b !important;
}

.group-moderation-box button.danger:hover,
.moderation-box button.danger:hover,
.blocked-members-box button.danger:hover,
#blockedMembersBox button.danger:hover {
  color: #e74c3c !important;
  -webkit-text-fill-color: #e74c3c !important;
}

/* Compteur lecture seule */
.moderation-count,
.readonly-count,
.blocked-count {
  display: inline-flex !important;
  align-items: center !important;

  padding: 4px 8px !important;
  border-radius: 999px !important;

  background: rgba(231, 76, 60, 0.10) !important;
  color: #c0392b !important;

  font-size: 12px !important;
  font-weight: 900 !important;
}

/* Mobile */
@media (max-width: 650px) {
  .blocked-member,
  .blocked-member-line,
  .readonly-member,
  .readonly-member-line,
  .moderation-member-line {
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .group-moderation-box button,
  .moderation-box button,
  .blocked-members-box button,
  #blockedMembersBox button {
    white-space: normal !important;
  }
}

/* =========================================================
   ENTRE BEST FRIENDS - ÉTAPE 17 : ADMINISTRATION PLUS CLAIRE
   Correction à garder tout en bas du CSS.

   Objectif :
   - Rendre l'administration plus propre.
   - Mieux séparer recherche, signalements, avertissements et journal.
   - Alléger les boutons secondaires.
   - Garder les actions importantes visibles.
   - Sans toucher au JavaScript.
   ========================================================= */


/* Cartes admin plus nettes */
.admin-card,
.admin-user-card,
.admin-report-card,
.admin-warning-card,
.admin-log-card {
  border-radius: 20px !important;

  background:
    linear-gradient(#ffffff, #f8f9ff) padding-box,
    linear-gradient(135deg, var(--main-color), var(--second-color)) border-box !important;

  border: 2px solid transparent !important;

  box-shadow:
    0 7px 18px rgba(0, 0, 0, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
}

/* En-têtes admin */
.simple-admin-header,
.admin-user-header,
.admin-report-header,
.admin-log-header {
  align-items: center !important;
  gap: 12px !important;
}

/* Titres admin */
.simple-admin-header h2,
.admin-card h2,
.admin-user-card h3,
.admin-report-card h3,
.admin-warning-card h3 {
  color: #202334 !important;
  font-weight: 900 !important;
}

/* Contenu repliable plus aéré */
.admin-card-content {
  margin-top: 12px !important;
}

/* Champs de recherche admin */
.admin-card input,
.admin-card textarea,
#adminSearchInput,
#warningsSearchInput {
  border-radius: 16px !important;
  background: #f8f9ff !important;
  border: 1px solid rgba(0, 0, 0, 0.10) !important;

  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

.admin-card input:focus,
.admin-card textarea:focus,
#adminSearchInput:focus,
#warningsSearchInput:focus {
  background: white !important;
  border-color: var(--main-color) !important;

  box-shadow:
    0 0 0 3px rgba(108, 99, 255, 0.14),
    inset 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

/* Résultats admin */
.admin-results {
  margin-top: 14px !important;
}

/* Carte utilisateur admin */
.admin-user-card {
  padding: 14px !important;
}

.admin-user-main strong,
.admin-report-main strong {
  color: #202334 !important;
  font-weight: 900 !important;
}

.admin-user-main .small,
.admin-report-main .small {
  color: #6f7685 !important;
  font-weight: 400 !important;
}

/* Actions admin : mieux rangées */
.admin-actions,
.admin-report-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;

  margin-top: 12px !important;
}

/* Boutons admin normaux : petits et doux */
.admin-actions button:not(.danger):not(.success),
.admin-report-actions button:not(.danger):not(.success),
.table-actions button:not(.danger):not(.success) {
  width: auto !important;
  min-height: 34px !important;

  margin: 0 !important;
  padding: 7px 12px !important;

  border-radius: 999px !important;

  background: #eef0f7 !important;
  color: #202334 !important;
  -webkit-text-fill-color: #202334 !important;

  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: none !important;

  font-size: 13px !important;
  font-weight: 900 !important;

  transform: none !important;
  filter: none !important;
}

.admin-actions button:not(.danger):not(.success):hover,
.admin-report-actions button:not(.danger):not(.success):hover,
.table-actions button:not(.danger):not(.success):hover {
  background: #e4e7f2 !important;
  transform: none !important;
  filter: none !important;
  box-shadow: none !important;
}

/* Actions dangereuses admin : texte rouge au lieu de gros bouton */
.admin-actions button.danger,
.admin-report-actions button.danger,
.table-actions button.danger {
  all: unset !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: auto !important;
  min-width: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;

  color: #c0392b !important;
  -webkit-text-fill-color: #c0392b !important;

  border: none !important;
  outline: none !important;
  box-shadow: none !important;

  font-family: Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;

  text-decoration: none !important;
  white-space: nowrap !important;

  cursor: pointer !important;

  transform: none !important;
  filter: none !important;
}

.admin-actions button.danger:hover,
.admin-report-actions button.danger:hover,
.table-actions button.danger:hover {
  color: #e74c3c !important;
  -webkit-text-fill-color: #e74c3c !important;

  text-decoration: underline !important;

  background: transparent !important;
  border: none !important;
  box-shadow: none !important;

  transform: none !important;
  filter: none !important;
}

/* Actions succès admin : bouton vert doux mais visible */
.admin-actions button.success,
.admin-report-actions button.success,
.table-actions button.success {
  width: auto !important;
  min-height: 34px !important;

  margin: 0 !important;
  padding: 7px 12px !important;

  border-radius: 999px !important;

  background: rgba(46, 204, 113, 0.14) !important;
  color: #0b8a4a !important;
  -webkit-text-fill-color: #0b8a4a !important;

  border: 1px solid rgba(46, 204, 113, 0.24) !important;
  box-shadow: none !important;

  font-size: 13px !important;
  font-weight: 900 !important;
}

/* Badges admin */
.admin-badge,
.warning-count-badge,
.admin-report-status {
  border-radius: 999px !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  padding: 5px 8px !important;
}

/* Signalements */
.admin-report-card {
  padding: 14px !important;
}

.admin-report-card.new {
  background:
    linear-gradient(#fffafa, #ffffff) padding-box,
    linear-gradient(135deg, #e74c3c, var(--second-color)) border-box !important;

  border: 2px solid transparent !important;
}

.admin-report-content {
  border-radius: 16px !important;
  background: #f4f6fb !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
}

/* Images dans les signalements */
.admin-report-image img {
  border-radius: 16px !important;
  border: 4px solid white !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.14) !important;
}

/* Tableau avertissements */
.warnings-table-container {
  border-radius: 16px !important;
  overflow-x: auto !important;
  background: white !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

.warnings-admin-table {
  border-radius: 16px !important;
  overflow: hidden !important;
}

.warnings-admin-table th {
  background: #eef0f7 !important;
  color: #202334 !important;
  font-weight: 900 !important;
}

.warnings-admin-table td {
  color: #303444 !important;
}

/* Journal admin */
.admin-log-card {
  border-left: none !important;
}

.admin-log-card.danger-log {
  background:
    linear-gradient(#fffafa, #ffffff) padding-box,
    linear-gradient(135deg, #e74c3c, #ffb199) border-box !important;
}

.admin-log-card.success-log {
  background:
    linear-gradient(#ffffff, #f8fff9) padding-box,
    linear-gradient(135deg, #2ecc71, #9be7b3) border-box !important;
}

.admin-log-card.warning-log {
  background:
    linear-gradient(#ffffff, #fffaf0) padding-box,
    linear-gradient(135deg, #f39c12, #ffd27a) border-box !important;
}

/* Zones scroll admin plus propres */
#reportsList,
#adminLogsList,
.admin-scroll-zone {
  border-radius: 16px !important;
  background: rgba(248, 249, 255, 0.60) !important;
  padding: 8px !important;
}

/* Mobile */
@media (max-width: 650px) {
  .admin-actions,
  .admin-report-actions {
    gap: 10px !important;
  }

  .admin-actions button:not(.danger):not(.success),
  .admin-report-actions button:not(.danger):not(.success),
  .admin-actions button.success,
  .admin-report-actions button.success {
    width: auto !important;
    flex: 1 1 auto !important;
  }

  .admin-actions button.danger,
  .admin-report-actions button.danger {
    width: auto !important;
  }

  .simple-admin-header,
  .admin-user-header,
  .admin-report-header {
    align-items: flex-start !important;
  }
}

/* =========================================================
   ENTRE BEST FRIENDS - ÉTAPE 18 : ADMINISTRATION LISTES LONGUES ET SCROLL
   Correction à garder tout en bas du CSS.

   Objectif :
   - Éviter que l'administration devienne trop longue.
   - Garder signalements, avertissements et journal lisibles.
   - Adapter aux écrans 14 pouces.
   - Sans toucher au JavaScript.
   ========================================================= */


/* Zones longues de l'administration */
#reportsList,
#adminLogsList,
#adminWarningsList,
#warningsTableContainer,
.warnings-table-container,
.admin-results,
.admin-scroll-zone {
  max-height: min(460px, 58vh) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;

  padding-right: 6px !important;

  scrollbar-width: thin !important;
  scrollbar-color: rgba(108, 99, 255, 0.45) rgba(0, 0, 0, 0.06) !important;
}

/* Scrollbar Chrome / Edge */
#reportsList::-webkit-scrollbar,
#adminLogsList::-webkit-scrollbar,
#adminWarningsList::-webkit-scrollbar,
#warningsTableContainer::-webkit-scrollbar,
.warnings-table-container::-webkit-scrollbar,
.admin-results::-webkit-scrollbar,
.admin-scroll-zone::-webkit-scrollbar {
  width: 8px !important;
  height: 8px !important;
}

#reportsList::-webkit-scrollbar-track,
#adminLogsList::-webkit-scrollbar-track,
#adminWarningsList::-webkit-scrollbar-track,
#warningsTableContainer::-webkit-scrollbar-track,
.warnings-table-container::-webkit-scrollbar-track,
.admin-results::-webkit-scrollbar-track,
.admin-scroll-zone::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05) !important;
  border-radius: 999px !important;
}

#reportsList::-webkit-scrollbar-thumb,
#adminLogsList::-webkit-scrollbar-thumb,
#adminWarningsList::-webkit-scrollbar-thumb,
#warningsTableContainer::-webkit-scrollbar-thumb,
.warnings-table-container::-webkit-scrollbar-thumb,
.admin-results::-webkit-scrollbar-thumb,
.admin-scroll-zone::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--main-color), var(--second-color)) !important;
  border-radius: 999px !important;
}


/* Les cartes dans les listes prennent moins de hauteur */
#reportsList .admin-report-card,
#adminLogsList .admin-log-card,
#adminWarningsList .admin-warning-card,
.admin-results .admin-user-card {
  margin-bottom: 10px !important;
  padding: 12px !important;
}


/* Signalements : contenu plus compact */
.admin-report-content {
  margin-top: 8px !important;
  padding: 10px !important;

  max-height: 180px !important;
  overflow-y: auto !important;
}

.admin-report-content p {
  margin: 4px 0 !important;
  line-height: 1.35 !important;
}


/* Images signalées moins envahissantes */
.admin-report-image {
  margin-top: 8px !important;
}

.admin-report-image img {
  max-height: 220px !important;
  object-fit: contain !important;
}


/* Journal admin plus compact */
.admin-log-card {
  padding: 11px 12px !important;
}

.admin-log-card p {
  margin: 3px 0 !important;
  line-height: 1.35 !important;
}

.admin-log-card .small {
  font-size: 12px !important;
}


/* Tableau avertissements : en-tête sticky si la zone défile */
.warnings-table-container {
  max-height: min(420px, 54vh) !important;
  overflow: auto !important;
}

.warnings-admin-table {
  min-width: 720px !important;
}

.warnings-admin-table thead th {
  position: sticky !important;
  top: 0 !important;
  z-index: 2 !important;
}


/* Cellules plus compactes */
.warnings-admin-table th,
.warnings-admin-table td {
  padding: 8px 10px !important;
  vertical-align: top !important;
  line-height: 1.3 !important;
}


/* Recherche utilisateur : résultats pas trop hauts */
#adminUsersResults,
.admin-users-results {
  max-height: min(420px, 54vh) !important;
  overflow-y: auto !important;
  padding-right: 6px !important;
}


/* Petits séparateurs doux entre éléments */
.admin-report-card + .admin-report-card,
.admin-log-card + .admin-log-card,
.admin-warning-card + .admin-warning-card,
.admin-user-card + .admin-user-card {
  margin-top: 10px !important;
}


/* Sur 14 pouces, on réduit un peu les marges internes */
@media (max-height: 820px) {
  #reportsList,
  #adminLogsList,
  #adminWarningsList,
  #warningsTableContainer,
  .warnings-table-container,
  .admin-results,
  .admin-scroll-zone {
    max-height: 360px !important;
  }

  .admin-report-content {
    max-height: 140px !important;
  }

  .admin-report-image img {
    max-height: 170px !important;
  }
}


/* Mobile */
@media (max-width: 650px) {
  #reportsList,
  #adminLogsList,
  #adminWarningsList,
  #warningsTableContainer,
  .warnings-table-container,
  .admin-results,
  .admin-scroll-zone {
    max-height: 420px !important;
  }

  .warnings-admin-table {
    min-width: 680px !important;
  }

  .admin-report-image img {
    max-height: 180px !important;
  }
}

/* =========================================================
   ENTRE BEST FRIENDS - ÉTAPE 19 : ADMIN STATUTS ET BADGES PLUS CLAIRS
   Correction à garder tout en bas du CSS.

   Objectif :
   - Rendre les statuts admin plus lisibles.
   - Mieux différencier actif, banni, lu, non lu, traité.
   - Garder une administration propre et professionnelle.
   - Sans toucher au JavaScript.
   ========================================================= */


/* Badges généraux dans l'administration */
.admin-badge,
.admin-status-badge,
.warning-count-badge,
.admin-report-status,
.status-badge,
.user-status-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: fit-content !important;
  min-height: 24px !important;

  padding: 5px 9px !important;
  border-radius: 999px !important;

  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;

  white-space: nowrap !important;

  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  box-shadow: none !important;
}


/* Statut actif / ok */
.admin-badge.ok,
.admin-badge.active,
.admin-status-badge.ok,
.admin-status-badge.active,
.status-badge.ok,
.status-badge.active,
.user-status-badge.ok,
.user-status-badge.active {
  background: rgba(46, 204, 113, 0.14) !important;
  color: #0b8a4a !important;
  -webkit-text-fill-color: #0b8a4a !important;
  border-color: rgba(46, 204, 113, 0.24) !important;
}


/* Statut banni / supprimé / danger */
.admin-badge.banned,
.admin-badge.deleted,
.admin-badge.danger,
.admin-status-badge.banned,
.admin-status-badge.deleted,
.admin-status-badge.danger,
.status-badge.banned,
.status-badge.deleted,
.status-badge.danger,
.user-status-badge.banned,
.user-status-badge.deleted,
.user-status-badge.danger {
  background: rgba(231, 76, 60, 0.13) !important;
  color: #c0392b !important;
  -webkit-text-fill-color: #c0392b !important;
  border-color: rgba(231, 76, 60, 0.24) !important;
}


/* Statut attention / avertissement */
.admin-badge.warning,
.admin-status-badge.warning,
.status-badge.warning,
.user-status-badge.warning,
.warning-count-badge {
  background: rgba(243, 156, 18, 0.14) !important;
  color: #a65f00 !important;
  -webkit-text-fill-color: #a65f00 !important;
  border-color: rgba(243, 156, 18, 0.26) !important;
}


/* Statut neutre / traité */
.admin-badge.neutral,
.admin-badge.done,
.admin-badge.read,
.admin-status-badge.neutral,
.admin-status-badge.done,
.admin-status-badge.read,
.admin-report-status.done,
.admin-report-status.read,
.status-badge.neutral,
.status-badge.done,
.status-badge.read {
  background: rgba(0, 0, 0, 0.06) !important;
  color: #5f6673 !important;
  -webkit-text-fill-color: #5f6673 !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}


/* Nouveau signalement / non lu */
.admin-badge.new,
.admin-badge.unread,
.admin-status-badge.new,
.admin-status-badge.unread,
.admin-report-status.new,
.admin-report-status.unread,
.status-badge.new,
.status-badge.unread {
  background: rgba(108, 99, 255, 0.13) !important;
  color: var(--main-color) !important;
  -webkit-text-fill-color: var(--main-color) !important;
  border-color: rgba(108, 99, 255, 0.24) !important;
}


/* Les cartes avec problème ressortent, mais restent propres */
.admin-user-card.banned,
.admin-user-card.deleted,
.admin-report-card.new,
.admin-warning-card.unread {
  position: relative !important;
}

.admin-user-card.banned::before,
.admin-user-card.deleted::before,
.admin-report-card.new::before,
.admin-warning-card.unread::before {
  content: "" !important;

  position: absolute !important;
  left: 10px !important;
  top: 12px !important;
  bottom: 12px !important;

  width: 4px !important;
  border-radius: 999px !important;

  background: linear-gradient(180deg, var(--main-color), var(--second-color)) !important;
}

.admin-user-card.banned,
.admin-user-card.deleted,
.admin-report-card.new,
.admin-warning-card.unread {
  padding-left: 20px !important;
}


/* Résumé utilisateur admin */
.admin-user-main {
  display: grid !important;
  gap: 4px !important;
}

.admin-user-main strong {
  font-size: 16px !important;
  color: #202334 !important;
}

.admin-user-main .small {
  line-height: 1.35 !important;
}


/* Ligne de métadonnées admin */
.admin-meta-line,
.admin-user-meta,
.admin-report-meta,
.admin-warning-meta {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 6px !important;

  margin-top: 6px !important;
}


/* Petites informations dans les cartes */
.admin-card .small,
.admin-user-card .small,
.admin-report-card .small,
.admin-warning-card .small,
.admin-log-card .small {
  color: #6f7685 !important;
  font-weight: 400 !important;
}


/* Boutons de recherche principaux dans l'admin */
.admin-card > button,
.admin-search-line button,
.admin-search-row button {
  min-height: 38px !important;
  border-radius: 999px !important;
}


/* Recherche admin sur une ligne propre */
.admin-search-line,
.admin-search-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.admin-search-line input,
.admin-search-row input {
  flex: 1 1 auto !important;
}


/* Actions critiques : bien espacées des autres */
.admin-actions button.danger,
.admin-report-actions button.danger,
.table-actions button.danger {
  margin-left: 4px !important;
}


/* Séparateur doux entre les zones admin */
.admin-section-separator {
  height: 1px !important;
  margin: 12px 0 !important;
  background: rgba(0, 0, 0, 0.08) !important;
  border: none !important;
}


/* États vides */
.admin-empty,
.admin-no-result,
.admin-empty-state {
  padding: 12px !important;

  border-radius: 16px !important;

  background: rgba(108, 99, 255, 0.07) !important;
  color: #6f7685 !important;

  font-weight: 400 !important;
  text-align: center !important;
}


/* Tableau : badges pas écrasés */
.warnings-admin-table .admin-badge,
.warnings-admin-table .status-badge,
.warnings-admin-table .warning-count-badge {
  margin: 2px !important;
}


/* Mobile */
@media (max-width: 650px) {
  .admin-search-line,
  .admin-search-row {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .admin-search-line button,
  .admin-search-row button {
    width: 100% !important;
  }

  .admin-meta-line,
  .admin-user-meta,
  .admin-report-meta,
  .admin-warning-meta {
    gap: 5px !important;
  }

  .admin-badge,
  .admin-status-badge,
  .warning-count-badge,
  .admin-report-status,
  .status-badge,
  .user-status-badge {
    font-size: 11px !important;
  }
}

/* =========================================================
   ENTRE BEST FRIENDS - ÉTAPE 20 : RECHERCHE UTILISATEURS ADMIN PLUS PROPRE
   Correction à garder tout en bas du CSS.

   Objectif :
   - Améliorer les résultats de recherche utilisateur.
   - Rendre les fiches plus compactes et plus lisibles.
   - Garder les actions admin claires.
   - Adapter aux écrans 14 pouces.
   - Sans toucher au JavaScript.
   ========================================================= */


/* Zone de recherche utilisateur admin */
#adminSearchInput,
.admin-search-line input,
.admin-search-row input {
  min-height: 42px !important;

  padding: 10px 13px !important;

  font-size: 14px !important;
  font-weight: 600 !important;

  border-radius: 999px !important;
}


/* Ligne recherche + bouton */
.admin-search-line,
.admin-search-row {
  margin-top: 8px !important;
  margin-bottom: 10px !important;
}

.admin-search-line button,
.admin-search-row button {
  min-height: 42px !important;

  padding: 9px 16px !important;

  border-radius: 999px !important;

  font-size: 14px !important;
  font-weight: 900 !important;
}


/* Résultats de recherche utilisateurs */
#adminUsersResults,
.admin-users-results,
.admin-results {
  display: grid !important;
  gap: 10px !important;
}


/* Fiche utilisateur admin plus propre */
.admin-user-card {
  display: grid !important;
  gap: 10px !important;

  padding: 13px !important;

  border-radius: 18px !important;
}


/* En-tête fiche utilisateur */
.admin-user-header {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 12px !important;
}


/* Bloc identité utilisateur */
.admin-user-main {
  min-width: 0 !important;
}

.admin-user-main strong {
  display: block !important;

  margin-bottom: 3px !important;

  font-size: 16px !important;
  font-weight: 950 !important;
  color: #202334 !important;

  overflow-wrap: anywhere !important;
}

.admin-user-main .small {
  display: block !important;

  margin: 2px 0 !important;

  font-size: 13px !important;
  line-height: 1.35 !important;

  color: #6f7685 !important;

  overflow-wrap: anywhere !important;
}


/* Informations utilisateur en petites pastilles */
.admin-user-info-line,
.admin-user-meta,
.admin-meta-line {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 6px !important;

  margin-top: 4px !important;
}

.admin-user-info-line span,
.admin-user-meta span,
.admin-meta-line span {
  max-width: 100% !important;
}


/* Séparation légère avant les actions */
.admin-user-card .admin-actions {
  padding-top: 8px !important;
  border-top: 1px solid rgba(0, 0, 0, 0.07) !important;
}


/* Actions utilisateur admin */
.admin-user-card .admin-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px 12px !important;

  margin-top: 0 !important;
}


/* Actions normales utilisateur : petits textes/boutons doux */
.admin-user-card .admin-actions button:not(.danger):not(.success) {
  min-height: 32px !important;

  padding: 7px 11px !important;

  border-radius: 999px !important;

  background: #eef0f7 !important;
  color: #202334 !important;
  -webkit-text-fill-color: #202334 !important;

  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: none !important;

  font-size: 13px !important;
  font-weight: 900 !important;
}


/* Bannir / supprimer : texte rouge plus léger */
.admin-user-card .admin-actions button.danger {
  all: unset !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;

  color: #c0392b !important;
  -webkit-text-fill-color: #c0392b !important;

  font-family: Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;

  text-decoration: none !important;
  white-space: nowrap !important;

  cursor: pointer !important;
}

.admin-user-card .admin-actions button.danger:hover {
  color: #e74c3c !important;
  -webkit-text-fill-color: #e74c3c !important;

  text-decoration: underline !important;
}


/* Débannir / réactiver : vert doux */
.admin-user-card .admin-actions button.success {
  min-height: 32px !important;

  padding: 7px 11px !important;

  border-radius: 999px !important;

  background: rgba(46, 204, 113, 0.14) !important;
  color: #0b8a4a !important;
  -webkit-text-fill-color: #0b8a4a !important;

  border: 1px solid rgba(46, 204, 113, 0.24) !important;
  box-shadow: none !important;

  font-size: 13px !important;
  font-weight: 900 !important;
}


/* Carte utilisateur banni plus reconnaissable */
.admin-user-card.banned,
.admin-user-card.deleted {
  background:
    linear-gradient(#fffafa, #ffffff) padding-box,
    linear-gradient(135deg, #e74c3c, #ffb199) border-box !important;

  border: 2px solid transparent !important;
}


/* Carte utilisateur actif */
.admin-user-card.active,
.admin-user-card.ok {
  background:
    linear-gradient(#ffffff, #f8fff9) padding-box,
    linear-gradient(135deg, rgba(46, 204, 113, 0.55), rgba(108, 99, 255, 0.35)) border-box !important;

  border: 2px solid transparent !important;
}


/* Message aucun résultat */
#adminUsersResults:empty::after,
.admin-users-results:empty::after {
  content: "Aucun utilisateur à afficher." !important;

  display: block !important;

  padding: 12px !important;

  border-radius: 16px !important;

  background: rgba(108, 99, 255, 0.07) !important;
  color: #6f7685 !important;

  font-size: 14px !important;
  font-weight: 400 !important;
  text-align: center !important;
}


/* Confort écran 14 pouces */
@media (max-height: 820px) {
  .admin-user-card {
    padding: 11px !important;
    gap: 8px !important;
  }

  .admin-user-main strong {
    font-size: 15px !important;
  }

  .admin-user-card .admin-actions {
    padding-top: 7px !important;
  }
}


/* Mobile */
@media (max-width: 650px) {
  .admin-user-header {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .admin-user-card .admin-actions {
    gap: 10px !important;
  }

  .admin-user-card .admin-actions button:not(.danger):not(.success),
  .admin-user-card .admin-actions button.success {
    flex: 1 1 auto !important;
  }

  .admin-user-card .admin-actions button.danger {
    width: auto !important;
  }
}

/* =========================================================
   ENTRE BEST FRIENDS - ÉTAPE 21 : TABLEAU AVERTISSEMENTS ADMIN PLUS LISIBLE
   Correction à garder tout en bas du CSS.

   Objectif :
   - Rendre le tableau des avertissements plus lisible.
   - Mieux différencier lu / non lu.
   - Alléger les actions.
   - Garder l'en-tête du tableau visible pendant le scroll.
   - Sans toucher au JavaScript.
   ========================================================= */


/* Conteneur du tableau */
.warnings-table-container,
#warningsTableContainer {
  margin-top: 12px !important;

  border-radius: 18px !important;
  overflow: auto !important;

  background: #ffffff !important;

  border: 1px solid rgba(0, 0, 0, 0.08) !important;

  box-shadow:
    0 5px 14px rgba(0, 0, 0, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.85) !important;
}


/* Tableau avertissements */
.warnings-admin-table {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;

  min-width: 760px !important;

  background: white !important;
}


/* En-tête sticky */
.warnings-admin-table thead th {
  position: sticky !important;
  top: 0 !important;
  z-index: 5 !important;

  padding: 10px 12px !important;

  background:
    linear-gradient(135deg, rgba(108, 99, 255, 0.13), rgba(0, 213, 255, 0.10)) !important;

  color: #202334 !important;

  font-size: 13px !important;
  font-weight: 950 !important;
  text-align: left !important;

  border-bottom: 1px solid rgba(0, 0, 0, 0.10) !important;
}


/* Cellules */
.warnings-admin-table tbody td {
  padding: 10px 12px !important;

  color: #303444 !important;

  font-size: 13px !important;
  line-height: 1.35 !important;
  vertical-align: top !important;

  border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
}


/* Alternance légère */
.warnings-admin-table tbody tr:nth-child(even) td {
  background: rgba(248, 249, 255, 0.62) !important;
}

.warnings-admin-table tbody tr:nth-child(odd) td {
  background: #ffffff !important;
}


/* Ligne non lue / importante */
.warnings-admin-table tbody tr.unread td,
.warnings-admin-table tbody tr.warning-unread td,
.warnings-admin-table tbody tr.new td {
  background: rgba(255, 152, 0, 0.08) !important;
  font-weight: 700 !important;
}


/* Ligne lue */
.warnings-admin-table tbody tr.read td,
.warnings-admin-table tbody tr.warning-read td {
  opacity: 0.86 !important;
}


/* Première colonne un peu plus forte */
.warnings-admin-table tbody td:first-child {
  font-weight: 900 !important;
  color: #202334 !important;
}


/* Message / raison de l'avertissement */
.warnings-admin-table .warning-message,
.warnings-admin-table .warning-reason,
.warnings-admin-table .warning-text {
  display: block !important;

  max-width: 360px !important;

  color: #303444 !important;

  overflow-wrap: anywhere !important;
}


/* Badges lu / non lu */
.warnings-admin-table .warning-read,
.warnings-admin-table .warning-unread,
.warnings-admin-table .read,
.warnings-admin-table .unread {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 5px 9px !important;

  border-radius: 999px !important;

  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;

  white-space: nowrap !important;
}

.warnings-admin-table .warning-unread,
.warnings-admin-table .unread {
  background: rgba(243, 156, 18, 0.14) !important;
  color: #a65f00 !important;
  -webkit-text-fill-color: #a65f00 !important;
  border: 1px solid rgba(243, 156, 18, 0.25) !important;
}

.warnings-admin-table .warning-read,
.warnings-admin-table .read {
  background: rgba(0, 0, 0, 0.06) !important;
  color: #5f6673 !important;
  -webkit-text-fill-color: #5f6673 !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
}


/* Actions dans le tableau : plus légères */
.warnings-admin-table button,
.warnings-table-container button,
#warningsTableContainer button {
  all: unset !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  margin: 2px 8px 2px 0 !important;
  padding: 0 !important;

  color: var(--main-color) !important;
  -webkit-text-fill-color: var(--main-color) !important;

  font-family: Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;

  cursor: pointer !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

.warnings-admin-table button:hover,
.warnings-table-container button:hover,
#warningsTableContainer button:hover {
  color: var(--second-color) !important;
  -webkit-text-fill-color: var(--second-color) !important;
  text-decoration: underline !important;
}


/* Actions dangereuses dans le tableau */
.warnings-admin-table button.danger,
.warnings-table-container button.danger,
#warningsTableContainer button.danger {
  color: #c0392b !important;
  -webkit-text-fill-color: #c0392b !important;
}

.warnings-admin-table button.danger:hover,
.warnings-table-container button.danger:hover,
#warningsTableContainer button.danger:hover {
  color: #e74c3c !important;
  -webkit-text-fill-color: #e74c3c !important;
}


/* Zone de recherche avertissements */
#warningsSearchInput {
  min-height: 42px !important;
  border-radius: 999px !important;
  padding: 10px 13px !important;
}


/* Texte si aucun avertissement */
#warningsTableContainer:empty::after,
.warnings-table-container:empty::after {
  content: "Aucun avertissement à afficher." !important;

  display: block !important;

  padding: 14px !important;

  color: #6f7685 !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  text-align: center !important;
}


/* Écran 14 pouces */
@media (max-height: 820px) {
  .warnings-table-container,
  #warningsTableContainer {
    max-height: 340px !important;
  }

  .warnings-admin-table thead th,
  .warnings-admin-table tbody td {
    padding: 8px 10px !important;
  }
}


/* Mobile */
@media (max-width: 650px) {
  .warnings-admin-table {
    min-width: 720px !important;
  }

  .warnings-admin-table thead th,
  .warnings-admin-table tbody td {
    font-size: 12px !important;
  }
}

/* =========================================================
   ENTRE BEST FRIENDS - ÉTAPE 24B : CONNEXION GOOGLE PROPRE
   À garder tout en bas du CSS.

   Objectif :
   - Ajouter un bouton Continuer avec Google.
   - Style simple, propre et lisible.
   ========================================================= */

.google-auth-separator {
  width: 100% !important;

  display: flex !important;
  align-items: center !important;
  gap: 10px !important;

  margin: 14px 0 10px !important;

  color: #8a90a0 !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  text-align: center !important;
}

.google-auth-separator::before,
.google-auth-separator::after {
  content: "" !important;
  flex: 1 1 auto !important;
  height: 1px !important;
  background: rgba(0, 0, 0, 0.10) !important;
}

.google-auth-btn {
  width: 100% !important;
  min-height: 46px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;

  margin: 0 !important;
  padding: 10px 14px !important;

  border-radius: 999px !important;

  background: #ffffff !important;
  color: #202334 !important;
  -webkit-text-fill-color: #202334 !important;

  border: 1px solid rgba(0, 0, 0, 0.14) !important;

  box-shadow:
    0 6px 16px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.85) !important;

  font-size: 15px !important;
  font-weight: 900 !important;

  cursor: pointer !important;

  transform: none !important;
  filter: none !important;
}

.google-auth-btn:hover {
  background: #f8f9ff !important;
  color: #202334 !important;
  -webkit-text-fill-color: #202334 !important;

  transform: translateY(-1px) !important;
  filter: none !important;

  box-shadow:
    0 8px 18px rgba(0, 0, 0, 0.11),
    inset 0 1px 0 rgba(255, 255, 255, 0.85) !important;
}

.google-auth-btn:active {
  transform: translateY(0) scale(0.99) !important;
}

.google-auth-icon {
  width: 24px !important;
  height: 24px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: 50% !important;

  background: linear-gradient(135deg, #4285f4, #34a853, #fbbc05, #ea4335) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;

  font-size: 14px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
}

@media (max-width: 650px) {
  .google-auth-btn {
    min-height: 44px !important;
    font-size: 14px !important;
  }
}

/* =========================================================
   ENTRE BEST FRIENDS - ÉTAPE 25 : PROFIL GOOGLE PLUS PROPRE
   À garder tout en bas du CSS.

   Objectif :
   - Afficher proprement que le compte est connecté avec Google.
   - Garder un badge discret dans la carte profil.
   ========================================================= */

.google-account-badge {
  width: 100% !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;

  margin: 10px 0 !important;
  padding: 9px 12px !important;

  border-radius: 999px !important;

  background: rgba(66, 133, 244, 0.10) !important;
  color: #202334 !important;
  -webkit-text-fill-color: #202334 !important;

  border: 1px solid rgba(66, 133, 244, 0.22) !important;

  font-size: 13px !important;
  font-weight: 900 !important;

  box-shadow: none !important;
}

.google-account-badge .google-auth-icon {
  width: 22px !important;
  height: 22px !important;

  font-size: 13px !important;
  flex: 0 0 auto !important;
}

/* Photo Google : éviter les images déformées dans le profil */
.profile-card img,
.account-card img,
#profileCard img,
#accountCard img {
  object-fit: cover !important;
}

/* Dans les cartes membres/admin, les photos Google restent rondes */
.member img,
.admin-user-card img {
  object-fit: cover !important;
  border-radius: 50% !important;
}

@media (max-width: 650px) {
  .google-account-badge {
    font-size: 12px !important;
    padding: 8px 10px !important;
  }
}

/* =========================================================
   ENTRE BEST FRIENDS - ÉTAPE 25B : PHOTO GOOGLE PLUS COMPATIBLE
   À garder tout en bas du CSS.

   Objectif :
   - Éviter les photos Google déformées.
   - Forcer les photos profil/membres/admin à bien remplir le rond.
   ========================================================= */

.profile-photo img,
.avatar img,
.user-avatar img,
.member-avatar img,
.profile-card img,
.account-card img,
#profileCard img,
#accountCard img,
.member img,
.admin-user-card img {
  object-fit: cover !important;
  object-position: center !important;
}

/* Si l'image Google est dans un avatar rond */
.profile-photo,
.avatar,
.user-avatar,
.member-avatar {
  overflow: hidden !important;
}

/* =========================================================
   ENTRE BEST FRIENDS - ÉTAPE 26 : CRÉATION PROFIL APRÈS INSCRIPTION
   À garder tout en bas du CSS.

   Objectif :
   - Après création de compte, l'utilisateur complète son profil.
   - La photo Google n'est plus récupérée du tout.
   - La photo se choisit dans Modifier mon profil.
   ========================================================= */

#profileModal .modal-box {
  max-height: 92vh !important;
  overflow-y: auto !important;
}

.google-account-badge {
  opacity: 0.92 !important;
}

.avatar-placeholder {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  background: linear-gradient(135deg, #eef0f7, #ffffff) !important;
  color: var(--main-color) !important;

  border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

/* =========================================================
   ENTRE BEST FRIENDS - ÉTAPE 27D : CHAMPS OBLIGATOIRES PROPRES
   À garder tout en bas du CSS.

   Objectif :
   - Corriger la taille des cases à cocher.
   - Ajouter des liens Lire le règlement / conditions / confidentialité.
   - Photo facultative.
   ========================================================= */

.required-profile-fields-27d {
  margin: 14px 0 !important;
  padding: 14px !important;

  border-radius: 18px !important;

  background:
    linear-gradient(#ffffff, #f8f9ff) padding-box,
    linear-gradient(135deg, var(--main-color), var(--second-color)) border-box !important;

  border: 2px solid transparent !important;

  box-shadow:
    0 6px 16px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.85) !important;
}

.required-profile-fields-27d h3 {
  margin: 0 0 6px !important;

  color: #202334 !important;
  font-size: 18px !important;
  font-weight: 950 !important;
}

.required-profile-fields-27d .small {
  margin: 0 0 10px !important;

  color: #6f7685 !important;
  font-weight: 400 !important;
  line-height: 1.35 !important;
}

.required-profile-label-27d {
  display: block !important;

  margin: 12px 0 6px !important;

  color: #202334 !important;
  font-size: 14px !important;
  font-weight: 900 !important;
}

#birthDateInput27D {
  width: 100% !important;
  min-height: 42px !important;

  padding: 10px 13px !important;

  border-radius: 999px !important;

  background: #f8f9ff !important;
  border: 1px solid rgba(0, 0, 0, 0.10) !important;

  font-size: 14px !important;
  font-weight: 700 !important;
}

.calculated-age-text-27d {
  margin: 8px 0 12px !important;

  color: var(--main-color) !important;
  font-size: 14px !important;
  font-weight: 900 !important;
}

.required-checks-27d {
  display: grid !important;
  gap: 9px !important;

  margin: 12px 0 0 !important;
}

.required-checks-27d label {
  display: grid !important;
  grid-template-columns: 22px minmax(0, 1fr) !important;
  align-items: flex-start !important;
  gap: 10px !important;

  width: 100% !important;
  max-width: 100% !important;

  padding: 10px !important;

  border-radius: 14px !important;

  background: rgba(248, 249, 255, 0.88) !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;

  color: #303444 !important;

  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;

  overflow: hidden !important;
}

.required-checks-27d input[type="checkbox"] {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  max-width: 18px !important;
  max-height: 18px !important;

  margin: 1px 0 0 !important;
  padding: 0 !important;

  flex: 0 0 18px !important;

  accent-color: var(--main-color) !important;
  transform: none !important;
}

.required-checks-27d label span {
  min-width: 0 !important;
  max-width: 100% !important;

  display: block !important;

  overflow-wrap: anywhere !important;
  word-break: normal !important;
}

.legal-link-27d {
  all: unset !important;

  display: inline !important;

  margin-left: 4px !important;

  color: var(--main-color) !important;
  -webkit-text-fill-color: var(--main-color) !important;

  font-weight: 900 !important;
  text-decoration: underline !important;

  cursor: pointer !important;
}

.legal-link-27d:hover {
  color: var(--second-color) !important;
  -webkit-text-fill-color: var(--second-color) !important;
}

.legal-document-modal-27d {
  z-index: 100000 !important;
}

.legal-document-box-27d {
  width: min(620px, 94vw) !important;
  max-height: 88vh !important;
  overflow-y: auto !important;

  text-align: left !important;
}

.legal-document-box-27d h2 {
  margin: 0 0 10px !important;

  color: #202334 !important;
  font-size: 22px !important;
  font-weight: 950 !important;
  text-align: center !important;
}

.legal-document-content-27d {
  color: #303444 !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
}

.legal-document-content-27d p {
  margin: 8px 0 !important;
}

.legal-document-content-27d ul {
  margin: 8px 0 0 18px !important;
  padding: 0 !important;
}

.legal-document-content-27d li {
  margin: 6px 0 !important;
}

@media (max-width: 650px) {
  .required-profile-fields-27d {
    padding: 12px !important;
  }

  .required-checks-27d label {
    font-size: 12px !important;
    grid-template-columns: 20px minmax(0, 1fr) !important;
  }

  .required-checks-27d input[type="checkbox"] {
    width: 17px !important;
    height: 17px !important;
    min-width: 17px !important;
    min-height: 17px !important;
    max-width: 17px !important;
    max-height: 17px !important;
  }
}

/* =========================================================
   ENTRE BEST FRIENDS - ÉTAPE 27E : LIENS DOCUMENTS EN TEXTE SIMPLE
   À garder tout en bas du CSS.

   Objectif :
   - Les liens Lire le règlement / conditions / confidentialité
     doivent être de simples textes cliquables.
   - Pas de fond, pas de bloc, pas d'effet bouton.
   ========================================================= */

.required-checks-27d .legal-link-27d,
.legal-link-27d,
button.legal-link-27d {
  all: unset !important;

  display: inline !important;

  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;

  margin: 0 0 0 6px !important;
  padding: 0 !important;

  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;

  color: var(--main-color) !important;
  -webkit-text-fill-color: var(--main-color) !important;

  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;

  font-family: Arial, sans-serif !important;
  font-size: inherit !important;
  font-weight: 900 !important;
  line-height: inherit !important;

  text-decoration: underline !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 2px !important;

  cursor: pointer !important;

  opacity: 0.95 !important;

  transform: none !important;
  filter: none !important;
}

/* Aucun effet bouton au survol */
.required-checks-27d .legal-link-27d:hover,
.legal-link-27d:hover,
button.legal-link-27d:hover {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;

  color: var(--second-color) !important;
  -webkit-text-fill-color: var(--second-color) !important;

  border: none !important;
  outline: none !important;
  box-shadow: none !important;

  text-decoration: underline !important;

  transform: none !important;
  filter: none !important;

  opacity: 1 !important;
}

/* Aucun gros effet de focus / sélection */
.required-checks-27d .legal-link-27d:focus,
.required-checks-27d .legal-link-27d:active,
.legal-link-27d:focus,
.legal-link-27d:active,
button.legal-link-27d:focus,
button.legal-link-27d:active {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;

  color: var(--main-color) !important;
  -webkit-text-fill-color: var(--main-color) !important;

  border: none !important;
  outline: none !important;
  box-shadow: none !important;

  transform: none !important;
  filter: none !important;
}

/* Le texte de la case reste bien sur une seule zone lisible */
.required-checks-27d label span {
  display: inline !important;
  line-height: 1.35 !important;
}

/* La ligne garde une hauteur normale */
.required-checks-27d label {
  min-height: 0 !important;
  height: auto !important;
}

/* =========================================================
   ENTRE BEST FRIENDS - ÉTAPE 27F : VRAIS TEXTES CLIQUABLES DOCUMENTS
   À garder tout en bas du CSS.

   Objectif :
   - Les liens des documents ne sont plus des boutons dans app.js.
   - Ils sont maintenant des spans cliquables.
   - Affichage très simple : texte coloré, sans fond.
   ========================================================= */

.required-checks-27d .legal-link-27d,
.legal-link-27d,
span.legal-link-27d {
  display: inline !important;

  width: auto !important;
  height: auto !important;

  margin: 0 0 0 6px !important;
  padding: 0 !important;

  background: none !important;
  background-color: transparent !important;
  background-image: none !important;

  color: var(--main-color) !important;
  -webkit-text-fill-color: var(--main-color) !important;

  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;

  font: inherit !important;
  font-weight: 900 !important;
  line-height: inherit !important;

  text-decoration: underline !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 2px !important;

  cursor: pointer !important;

  user-select: none !important;
  transform: none !important;
  filter: none !important;
}

.required-checks-27d .legal-link-27d:hover,
.legal-link-27d:hover,
span.legal-link-27d:hover {
  color: var(--second-color) !important;
  -webkit-text-fill-color: var(--second-color) !important;

  background: none !important;
  background-color: transparent !important;
  background-image: none !important;

  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;

  transform: none !important;
  filter: none !important;
}

.required-checks-27d .legal-link-27d:focus,
.legal-link-27d:focus,
span.legal-link-27d:focus {
  outline: 1px dashed var(--main-color) !important;
  outline-offset: 2px !important;
}

/* Les lignes de validation restent compactes */
.required-checks-27d label {
  display: grid !important;
  grid-template-columns: 22px minmax(0, 1fr) !important;
  align-items: flex-start !important;
  gap: 10px !important;

  min-height: 0 !important;
  height: auto !important;
}

.required-checks-27d label span:not(.legal-link-27d) {
  display: block !important;
  min-width: 0 !important;
  max-width: 100% !important;
  line-height: 1.35 !important;
  overflow-wrap: anywhere !important;
}

.required-checks-27d input[type="checkbox"] {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  max-width: 18px !important;
  max-height: 18px !important;

  margin: 1px 0 0 !important;
  padding: 0 !important;

  transform: none !important;
  flex: 0 0 18px !important;
}

/* =========================================================
   ENTRE BEST FRIENDS - ÉTAPE 28 : MINEURS ET ACCORD PARENTAL
   À garder tout en bas du CSS.

   Objectif :
   - Moins de 13 ans : inscription refusée.
   - 13 à 14 ans : accord parent / responsable légal.
   - 15 ans et plus : validation utilisateur normale.
   ========================================================= */

.parent-consent-box-28 {
  margin: 12px 0 !important;
  padding: 12px !important;

  border-radius: 16px !important;

  background: rgba(243, 156, 18, 0.10) !important;
  border: 1px solid rgba(243, 156, 18, 0.24) !important;
}

.parent-consent-box-28.hidden {
  display: none !important;
}

.parent-consent-box-28 h4 {
  margin: 0 0 6px !important;

  color: #8a5200 !important;
  font-size: 16px !important;
  font-weight: 950 !important;
}

.parent-consent-box-28 .small {
  color: #7a4b00 !important;
  font-weight: 400 !important;
  line-height: 1.35 !important;
}

#parentEmailInput28 {
  width: 100% !important;
  min-height: 42px !important;

  padding: 10px 13px !important;

  border-radius: 999px !important;

  background: #fffaf0 !important;
  border: 1px solid rgba(243, 156, 18, 0.28) !important;

  font-size: 14px !important;
  font-weight: 700 !important;
}

.parent-consent-check-28 {
  display: grid !important;
  grid-template-columns: 22px minmax(0, 1fr) !important;
  align-items: flex-start !important;
  gap: 10px !important;

  margin: 10px 0 !important;
  padding: 10px !important;

  border-radius: 14px !important;

  background: rgba(255, 255, 255, 0.72) !important;
  border: 1px solid rgba(243, 156, 18, 0.18) !important;

  color: #303444 !important;

  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
}

.parent-consent-check-28 input[type="checkbox"] {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;

  margin: 1px 0 0 !important;

  accent-color: var(--main-color) !important;
}

.parent-consent-check-28 span {
  display: block !important;
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
}

@media (max-width: 650px) {
  .parent-consent-box-28 {
    padding: 10px !important;
  }

  .parent-consent-check-28 {
    font-size: 12px !important;
  }
}

/* =========================================================
   ENTRE BEST FRIENDS - ÉTAPE 29 : DOCUMENTS PROVISOIRES COMPLETS
   À garder tout en bas du CSS.

   Objectif :
   - Règlement, conditions et confidentialité plus lisibles.
   - Documents intégrés dans les textes cliquables.
   ========================================================= */

.legal-document-box-27d {
  width: min(760px, 94vw) !important;
  max-height: 88vh !important;

  padding: 22px !important;

  overflow-y: auto !important;

  text-align: left !important;
}

.legal-document-box-27d h2 {
  margin: 0 0 14px !important;

  color: #202334 !important;
  font-size: 24px !important;
  font-weight: 950 !important;
  text-align: center !important;
}

.legal-document-content-27d {
  color: #303444 !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
}

.legal-document-content-27d h3 {
  margin: 16px 0 6px !important;

  color: #202334 !important;
  font-size: 16px !important;
  font-weight: 950 !important;
}

.legal-document-content-27d p {
  margin: 8px 0 !important;
}

.legal-document-content-27d ul {
  margin: 8px 0 0 18px !important;
  padding: 0 !important;
}

.legal-document-content-27d li {
  margin: 6px 0 !important;
}

.legal-document-content-27d strong {
  color: var(--main-color) !important;
  font-weight: 950 !important;
}

@media (max-width: 650px) {
  .legal-document-box-27d {
    width: 96vw !important;
    padding: 18px !important;
  }

  .legal-document-content-27d {
    font-size: 13px !important;
  }
}

/* =========================================================
   ENTRE BEST FRIENDS - ÉTAPE 31 : BANNISSEMENT BLOQUANT
   À garder tout en bas du CSS.

   Objectif :
   - Si le compte est banni/supprimé, affichage plein écran.
   - Impossible de continuer à utiliser l'application.
   ========================================================= */

.blocked-account-overlay-31 {
  position: fixed !important;
  inset: 0 !important;

  z-index: 999999 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 20px !important;

  background:
    radial-gradient(circle at top, rgba(255, 255, 255, 0.22), transparent 34%),
    linear-gradient(135deg, rgba(20, 20, 30, 0.96), rgba(80, 0, 0, 0.94)) !important;

  backdrop-filter: blur(8px) !important;
}

.blocked-account-overlay-31.hidden {
  display: none !important;
}

.blocked-account-box-31 {
  width: min(560px, 94vw) !important;

  padding: 28px !important;

  border-radius: 26px !important;

  background: #ffffff !important;
  border: 2px solid rgba(220, 53, 69, 0.35) !important;

  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;

  text-align: center !important;
}

.blocked-account-icon-31 {
  width: 72px !important;
  height: 72px !important;

  margin: 0 auto 14px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: 999px !important;

  background: rgba(220, 53, 69, 0.12) !important;

  font-size: 38px !important;
}

.blocked-account-box-31 h2 {
  margin: 0 0 12px !important;

  color: #b00020 !important;

  font-size: 26px !important;
  font-weight: 950 !important;
}

#blockedAccountMessage31 {
  margin: 0 0 12px !important;

  color: #202334 !important;

  font-size: 17px !important;
  font-weight: 900 !important;
  line-height: 1.35 !important;
}

.blocked-account-detail-31 {
  margin: 0 0 18px !important;

  color: #606878 !important;

  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.45 !important;
}

#blockedAccountSignOutBtn31 {
  width: 100% !important;
  max-width: 320px !important;

  min-height: 48px !important;

  padding: 12px 18px !important;

  border: none !important;
  border-radius: 999px !important;

  background: linear-gradient(135deg, #dc3545, #8b0000) !important;
  color: white !important;
  -webkit-text-fill-color: white !important;

  font-size: 15px !important;
  font-weight: 950 !important;

  cursor: pointer !important;

  box-shadow: 0 12px 26px rgba(220, 53, 69, 0.28) !important;
}

#blockedAccountSignOutBtn31:hover {
  transform: translateY(-1px) !important;
  filter: brightness(1.04) !important;
}

body.account-blocked-31 {
  overflow: hidden !important;
}

@media (max-width: 650px) {
  .blocked-account-box-31 {
    padding: 22px !important;
  }

  .blocked-account-box-31 h2 {
    font-size: 22px !important;
  }

  #blockedAccountMessage31 {
    font-size: 15px !important;
  }
}

/* =========================================================
   ENTRE BEST FRIENDS - ÉTAPE 31E
   Correction app.js uniquement :
   - création compte e-mail/mot de passe non bloquée
     si la vérification bannedEmails échoue avant connexion.
   ========================================================= */

/* =========================================================
   ENTRE BEST FRIENDS - ÉTAPE 31F : VRAI BANNISSEMENT APPLICATION
   À garder tout en bas du CSS.
   ========================================================= */

.ban-meaning-note-31f {
  margin: 0 0 12px !important;
  padding: 10px 12px !important;

  border-radius: 14px !important;

  background: rgba(220, 53, 69, 0.10) !important;
  border: 1px solid rgba(220, 53, 69, 0.22) !important;

  color: #9b111e !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1.35 !important;
}

.ban-user-btn,
.admin-ban-btn,
.btn-ban-user,
[data-action='ban-user'],
[data-action='ban'] {
  background: linear-gradient(135deg, #dc3545, #8b0000) !important;
  color: white !important;
  -webkit-text-fill-color: white !important;
}

.unban-user-btn,
.admin-unban-btn,
.btn-unban-user,
[data-action='unban-user'],
[data-action='unban'] {
  background: linear-gradient(135deg, #198754, #0b6b3a) !important;
  color: white !important;
  -webkit-text-fill-color: white !important;
}

/* =========================================================
   ENTRE BEST FRIENDS - ÉTAPE 31G : BOUTON BANNIR APPLICATION
   À garder tout en bas du CSS.
   ========================================================= */

.ban-application-btn-31g {
  background: linear-gradient(135deg, #b00020, #5f0000) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border: none !important;
  font-weight: 950 !important;
}

.ban-application-btn-31g:hover {
  filter: brightness(1.05) !important;
  transform: translateY(-1px) !important;
}

/* Pour bien différencier les deux actions */
.member-actions-inline button.danger:not(.ban-application-btn-31g) {
  opacity: 0.88 !important;
}



/* =========================================================
   ENTRE BEST FRIENDS - COLONNE OUTILS À DROITE
   Ajout sans changer les fonctions existantes :
   - Statut rapide
   - Activité récente
   - Groupes populaires
   ========================================================= */

@media (min-width: 1001px) {
  main:not(.admin-container) {
    grid-template-columns: minmax(280px, 330px) minmax(0, 1fr) minmax(260px, 320px) !important;
    align-items: start !important;
  }

  .right-tools-column {
    position: sticky !important;
    top: 18px !important;
    align-self: start !important;
  }
}

.right-tools-column {
  min-width: 0 !important;
}

.tool-card {
  padding: 18px !important;
  border-radius: 20px !important;
  background:
    linear-gradient(#ffffff, #fbfcff) padding-box,
    linear-gradient(135deg, rgba(75, 108, 255, 0.55), rgba(139, 76, 255, 0.42)) border-box !important;
  border: 2px solid transparent !important;
  box-shadow: 0 12px 30px rgba(20, 40, 90, 0.08) !important;
}

.tool-card-title {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 14px !important;
}

.tool-card-title h2 {
  margin: 0 !important;
  font-size: 20px !important;
  color: #10204a !important;
  letter-spacing: -0.02em !important;
}

.tool-title-icon {
  width: 34px !important;
  height: 34px !important;
  border-radius: 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(108, 99, 255, 0.10) !important;
  color: var(--main-color) !important;
  font-size: 18px !important;
  flex: 0 0 auto !important;
}

.quick-status-options {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  padding: 10px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(16, 32, 74, 0.10) !important;
  background: linear-gradient(180deg, #ffffff, #f8f9ff) !important;
}

.quick-status-option {
  width: 100% !important;
  margin: 0 !important;
  padding: 10px 8px !important;
  border: none !important;
  background: transparent !important;
  color: #10204a !important;
  display: grid !important;
  grid-template-columns: 38px 1fr 24px !important;
  gap: 10px !important;
  align-items: center !important;
  text-align: left !important;
  border-radius: 14px !important;
  cursor: pointer !important;
  box-shadow: none !important;
}

.quick-status-option:hover {
  background: rgba(75, 108, 255, 0.07) !important;
  filter: none !important;
}

.quick-status-option.active {
  background: rgba(75, 108, 255, 0.10) !important;
}

.quick-status-icon {
  width: 34px !important;
  height: 34px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 900 !important;
}

.quick-status-online {
  color: #14b86a !important;
  background: rgba(20, 184, 106, 0.12) !important;
}

.quick-status-away {
  color: #ff9800 !important;
  background: rgba(255, 152, 0, 0.14) !important;
}

.quick-status-dnd {
  color: #ff3b5c !important;
  background: rgba(255, 59, 92, 0.12) !important;
}

.quick-status-text {
  min-width: 0 !important;
}

.quick-status-text strong {
  display: block !important;
  font-size: 15px !important;
  color: #10204a !important;
  line-height: 1.15 !important;
}

.quick-status-text small {
  display: block !important;
  margin-top: 3px !important;
  color: #667085 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

.quick-status-radio {
  width: 20px !important;
  height: 20px !important;
  border-radius: 999px !important;
  border: 2px solid rgba(16, 32, 74, 0.24) !important;
  background: white !important;
  box-shadow: inset 0 0 0 5px white !important;
}

.quick-status-option.active .quick-status-radio {
  border-color: var(--main-color) !important;
  background: var(--main-color) !important;
}

.recent-activity-list,
.popular-groups-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

.recent-activity-item,
.popular-group-item {
  display: grid !important;
  grid-template-columns: 38px 1fr !important;
  gap: 10px !important;
  align-items: center !important;
  padding: 9px 8px !important;
  border-radius: 14px !important;
  background: transparent !important;
}

.recent-activity-item:hover,
.popular-group-item:hover {
  background: rgba(75, 108, 255, 0.06) !important;
}

.recent-activity-icon,
.popular-group-avatar {
  width: 34px !important;
  height: 34px !important;
  border-radius: 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 17px !important;
  font-weight: 900 !important;
  flex: 0 0 auto !important;
}

.recent-activity-icon.post-activity {
  color: #246bfe !important;
  background: rgba(36, 107, 254, 0.10) !important;
}

.recent-activity-icon.comment-activity {
  color: #18a957 !important;
  background: rgba(24, 169, 87, 0.10) !important;
}

.recent-activity-icon.like-activity {
  color: #ff3b88 !important;
  background: rgba(255, 59, 136, 0.10) !important;
}

.recent-activity-icon.group-activity {
  color: #ff9800 !important;
  background: rgba(255, 152, 0, 0.13) !important;
}

.recent-activity-text strong,
.popular-group-text strong {
  display: block !important;
  color: #10204a !important;
  font-size: 13px !important;
  line-height: 1.25 !important;
  word-break: break-word !important;
}

.recent-activity-text small,
.popular-group-text small {
  display: block !important;
  margin-top: 2px !important;
  color: #667085 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

.popular-group-item {
  cursor: pointer !important;
}

.popular-group-avatar {
  border-radius: 999px !important;
  background: linear-gradient(135deg, rgba(75, 108, 255, 0.12), rgba(255, 75, 139, 0.12)) !important;
  border: 2px solid rgba(255, 255, 255, 0.9) !important;
  box-shadow: 0 4px 12px rgba(20, 40, 90, 0.08) !important;
}

.tool-wide-btn {
  margin-top: 14px !important;
  width: 100% !important;
  border-radius: 12px !important;
  background: linear-gradient(#ffffff, #f8f9ff) !important;
  color: #10204a !important;
  border: 1px solid rgba(16, 32, 74, 0.12) !important;
}

.tool-empty-state {
  padding: 12px !important;
  border-radius: 14px !important;
  background: rgba(75, 108, 255, 0.06) !important;
  color: #667085 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

.member-status.away {
  background: #fff3cd !important;
  color: #856404 !important;
}

.member-status.dnd {
  background: #f8d7da !important;
  color: #721c24 !important;
}

@media (max-width: 1000px) {
  .right-tools-column {
    order: 3 !important;
  }
}

@media (max-width: 650px) {
  .tool-card-title h2 {
    font-size: 18px !important;
  }

  .quick-status-option {
    grid-template-columns: 34px 1fr 22px !important;
  }
}

/* =========================================================
   ENTRE BEST FRIENDS - AJUSTEMENT LARGEUR COLONNES
   Objectif : réduire les colonnes gauche/droite pour donner
   plus de place au fil central, sans changer le HTML ni le JS.
   À garder tout en bas du CSS.
   ========================================================= */

@media (min-width: 1001px) {
  main:not(.admin-container) {
    width: min(1500px, calc(100vw - 18px)) !important;
    max-width: calc(100vw - 18px) !important;
    grid-template-columns: minmax(220px, 260px) minmax(0, 1fr) minmax(210px, 250px) !important;
    gap: 14px !important;
    padding: 10px !important;
  }

  main:not(.admin-container) > section:first-child .card,
  main:not(.admin-container) > .right-tools-column .card {
    padding: 14px !important;
    border-radius: 18px !important;
  }

  main:not(.admin-container) > section:first-child h2,
  main:not(.admin-container) > .right-tools-column h2 {
    font-size: 18px !important;
  }

  main:not(.admin-container) > section:first-child .small,
  main:not(.admin-container) > .right-tools-column .small {
    font-size: 12px !important;
  }

  .right-tools-column .tool-card {
    padding: 14px !important;
  }

  .quick-status-options {
    gap: 6px !important;
    padding: 8px !important;
  }

  .quick-status-option {
    grid-template-columns: 32px 1fr 20px !important;
    gap: 8px !important;
    padding: 8px 6px !important;
  }

  .quick-status-icon,
  .recent-activity-icon,
  .popular-group-avatar {
    width: 30px !important;
    height: 30px !important;
    font-size: 15px !important;
  }

  .recent-activity-item,
  .popular-group-item {
    grid-template-columns: 32px 1fr !important;
    gap: 8px !important;
    padding: 7px 6px !important;
  }

  .recent-activity-text strong,
  .popular-group-text strong {
    font-size: 12px !important;
  }

  .recent-activity-text small,
  .popular-group-text small,
  .quick-status-text small {
    font-size: 11px !important;
  }

  .account-avatar {
    width: 84px !important;
    height: 84px !important;
  }

  .account-profile-line h2 {
    font-size: 18px !important;
  }

  .site-logo {
    width: 110px !important;
    height: 110px !important;
  }
}

@media (min-width: 1001px) and (max-width: 1240px) {
  main:not(.admin-container) {
    grid-template-columns: minmax(205px, 235px) minmax(0, 1fr) minmax(195px, 225px) !important;
    gap: 12px !important;
  }
}

/* =========================================================
   ENTRE BEST FRIENDS - CORRECTION STATUT RAPIDE SOBRE
   Objectif : enlever l'effet gros bouton bleu dans la colonne
   de droite et garder seulement un texte cliquable propre.
   À garder tout en bas du CSS.
   ========================================================= */

.quick-status-card .quick-status-options {
  gap: 8px !important;
  padding: 8px !important;
  border-radius: 16px !important;
  background: linear-gradient(180deg, #ffffff, #fbfcff) !important;
  border: 1px solid rgba(16, 32, 74, 0.10) !important;
}

.quick-status-card .quick-status-option,
.quick-status-card button.quick-status-option,
main:not(.admin-container) .right-tools-column .quick-status-option {
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  align-self: flex-start !important;

  display: inline-grid !important;
  grid-template-columns: 30px auto !important;
  align-items: center !important;
  gap: 9px !important;

  margin: 0 !important;
  padding: 6px 8px !important;

  background: transparent !important;
  background-image: none !important;
  color: #10204a !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  border-radius: 10px !important;

  text-align: left !important;
  cursor: pointer !important;
  filter: none !important;
  transform: none !important;
}

.quick-status-card .quick-status-option:hover,
.quick-status-card button.quick-status-option:hover,
main:not(.admin-container) .right-tools-column .quick-status-option:hover {
  background: rgba(75, 108, 255, 0.06) !important;
  background-image: none !important;
  filter: none !important;
  transform: none !important;
  box-shadow: none !important;
}

.quick-status-card .quick-status-option.active,
.quick-status-card button.quick-status-option.active,
main:not(.admin-container) .right-tools-column .quick-status-option.active {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

.quick-status-card .quick-status-option.active:hover {
  background: rgba(75, 108, 255, 0.06) !important;
}

.quick-status-card .quick-status-icon {
  width: 28px !important;
  height: 28px !important;
  font-size: 14px !important;
  flex: 0 0 auto !important;
}

.quick-status-card .quick-status-text strong {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 14px !important;
  line-height: 1.15 !important;
  color: #10204a !important;
}

.quick-status-card .quick-status-text small {
  font-size: 11px !important;
  line-height: 1.2 !important;
  color: #667085 !important;
}

.quick-status-card .quick-status-radio {
  display: none !important;
}

.quick-status-card .quick-status-option.active .quick-status-text strong {
  color: var(--main-color) !important;
}

.quick-status-card .quick-status-option.active .quick-status-text strong::after {
  content: "✓";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--main-color);
  color: #ffffff;
  font-size: 12px;
  font-weight: 900;
}

@media (min-width: 1001px) {
  main:not(.admin-container) > .right-tools-column .quick-status-option,
  main:not(.admin-container) .right-tools-column button.quick-status-option {
    width: auto !important;
    grid-template-columns: 28px auto !important;
    gap: 8px !important;
    padding: 6px 6px !important;
  }
}

@media (max-width: 650px) {
  .quick-status-card .quick-status-option,
  .quick-status-card button.quick-status-option {
    width: auto !important;
    grid-template-columns: 30px auto !important;
  }
}

/* =========================================================
   CORRECTION FINALE STATUT RAPIDE - VERSION PROPRE
   - pas de gros bouton bleu
   - petite icône à gauche
   - texte au centre
   - case ronde à droite qui s'allume
   À garder tout en bas du CSS.
   ========================================================= */

.right-tools-column .quick-status-card .quick-status-options {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  padding: 8px 10px !important;
  border-radius: 16px !important;
  background: #ffffff !important;
  border: 1px solid rgba(16, 32, 74, 0.12) !important;
  box-shadow: none !important;
}

.right-tools-column .quick-status-card button.quick-status-option,
.right-tools-column .quick-status-card .quick-status-option,
main:not(.admin-container) .right-tools-column .quick-status-card button.quick-status-option {
  -webkit-appearance: none !important;
  appearance: none !important;

  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: 50px !important;

  display: grid !important;
  grid-template-columns: 32px minmax(0, 1fr) 22px !important;
  align-items: center !important;
  gap: 10px !important;

  margin: 0 !important;
  padding: 8px 2px !important;

  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(16, 32, 74, 0.08) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;

  color: #10204a !important;
  text-align: left !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  filter: none !important;
  transform: none !important;
}

.right-tools-column .quick-status-card button.quick-status-option:last-child,
.right-tools-column .quick-status-card .quick-status-option:last-child {
  border-bottom: 0 !important;
}

.right-tools-column .quick-status-card button.quick-status-option:hover,
.right-tools-column .quick-status-card .quick-status-option:hover,
main:not(.admin-container) .right-tools-column .quick-status-card button.quick-status-option:hover {
  background: rgba(75, 108, 255, 0.06) !important;
  background-color: rgba(75, 108, 255, 0.06) !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
}

.right-tools-column .quick-status-card button.quick-status-option.active,
.right-tools-column .quick-status-card .quick-status-option.active,
main:not(.admin-container) .right-tools-column .quick-status-card button.quick-status-option.active {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

.right-tools-column .quick-status-card .quick-status-icon {
  width: 30px !important;
  height: 30px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  flex: 0 0 auto !important;
}

.right-tools-column .quick-status-card .quick-status-text {
  min-width: 0 !important;
  display: block !important;
}

.right-tools-column .quick-status-card .quick-status-text strong {
  display: block !important;
  color: #10204a !important;
  font-size: 14px !important;
  line-height: 1.15 !important;
  font-weight: 900 !important;
  white-space: normal !important;
}

.right-tools-column .quick-status-card .quick-status-text strong::after {
  content: none !important;
  display: none !important;
}

.right-tools-column .quick-status-card .quick-status-text small {
  display: block !important;
  margin-top: 3px !important;
  color: #667085 !important;
  font-size: 11px !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
}

.right-tools-column .quick-status-card .quick-status-radio {
  display: inline-flex !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  border-radius: 999px !important;
  border: 2px solid #a8b0c3 !important;
  background: #ffffff !important;
  background-image: none !important;
  box-shadow: inset 0 0 0 4px #ffffff, 0 2px 6px rgba(16, 32, 74, 0.14) !important;
  justify-self: end !important;
}

.right-tools-column .quick-status-card .quick-status-option.active .quick-status-radio {
  border-color: var(--main-color) !important;
  background: var(--main-color) !important;
  background-image: none !important;
  box-shadow: inset 0 0 0 4px #ffffff, 0 0 0 3px rgba(108, 99, 255, 0.18) !important;
}

.right-tools-column .quick-status-card .quick-status-option.active .quick-status-text strong {
  color: var(--main-color) !important;
}

@media (min-width: 1001px) {
  main:not(.admin-container) .right-tools-column .quick-status-card button.quick-status-option,
  main:not(.admin-container) .right-tools-column .quick-status-card .quick-status-option {
    width: 100% !important;
    grid-template-columns: 30px minmax(0, 1fr) 20px !important;
    gap: 8px !important;
    padding: 8px 0 !important;
  }
}

/* =========================================================
   CORRECTION STATUT RAPIDE - FOND TRANSPARENT
   - enlève le fond blanc autour des 3 lignes
   - garde seulement les lignes, le texte et les cases rondes
   À garder tout en bas du CSS.
   ========================================================= */

.right-tools-column .quick-status-card .quick-status-options {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 4px 0 !important;
}

.right-tools-column .quick-status-card button.quick-status-option,
.right-tools-column .quick-status-card .quick-status-option,
main:not(.admin-container) .right-tools-column .quick-status-card button.quick-status-option {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

.right-tools-column .quick-status-card button.quick-status-option:hover,
.right-tools-column .quick-status-card .quick-status-option:hover,
main:not(.admin-container) .right-tools-column .quick-status-card button.quick-status-option:hover {
  background: rgba(108, 99, 255, 0.06) !important;
  background-color: rgba(108, 99, 255, 0.06) !important;
  border-radius: 12px !important;
}

.right-tools-column .quick-status-card button.quick-status-option.active,
.right-tools-column .quick-status-card .quick-status-option.active,
main:not(.admin-container) .right-tools-column .quick-status-card button.quick-status-option.active {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

/* =========================================================
   CORRECTION TRÈS FORTE - STATUT RAPIDE SANS FOND
   À garder absolument tout en bas du fichier style.css.
   Cette version neutralise complètement le style global des boutons.
   ========================================================= */

body main .right-tools-column .quick-status-card .quick-status-options,
body main:not(.admin-container) .right-tools-column .quick-status-card .quick-status-options {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  margin: 8px 0 0 0 !important;
  padding: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

body main .right-tools-column .quick-status-card button.quick-status-option,
body main .right-tools-column .quick-status-card button.quick-status-option.active,
body main .right-tools-column .quick-status-card button.quick-status-option:hover,
body main .right-tools-column .quick-status-card button.quick-status-option:focus,
body main .right-tools-column .quick-status-card button.quick-status-option:active,
body main:not(.admin-container) .right-tools-column .quick-status-card button.quick-status-option,
body main:not(.admin-container) .right-tools-column .quick-status-card button.quick-status-option.active,
body main:not(.admin-container) .right-tools-column .quick-status-card button.quick-status-option:hover,
body main:not(.admin-container) .right-tools-column .quick-status-card button.quick-status-option:focus,
body main:not(.admin-container) .right-tools-column .quick-status-card button.quick-status-option:active {
  all: unset !important;
  box-sizing: border-box !important;

  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: 50px !important;

  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) 22px !important;
  align-items: center !important;
  gap: 10px !important;

  margin: 0 !important;
  padding: 8px 0 !important;

  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;

  border: 0 !important;
  border-bottom: 1px solid rgba(16, 32, 74, 0.10) !important;
  border-radius: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;

  color: #10204a !important;
  cursor: pointer !important;
  text-align: left !important;
  font-family: inherit !important;
}

body main .right-tools-column .quick-status-card button.quick-status-option:last-child,
body main:not(.admin-container) .right-tools-column .quick-status-card button.quick-status-option:last-child {
  border-bottom: 0 !important;
}

body main .right-tools-column .quick-status-card button.quick-status-option:hover,
body main:not(.admin-container) .right-tools-column .quick-status-card button.quick-status-option:hover {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

body main .right-tools-column .quick-status-card button.quick-status-option .quick-status-icon,
body main:not(.admin-container) .right-tools-column .quick-status-card button.quick-status-option .quick-status-icon {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  background: rgba(108, 99, 255, 0.10) !important;
}

body main .right-tools-column .quick-status-card button.quick-status-option .quick-status-text,
body main:not(.admin-container) .right-tools-column .quick-status-card button.quick-status-option .quick-status-text {
  display: block !important;
  min-width: 0 !important;
}

body main .right-tools-column .quick-status-card button.quick-status-option .quick-status-text strong,
body main:not(.admin-container) .right-tools-column .quick-status-card button.quick-status-option .quick-status-text strong {
  display: block !important;
  color: #10204a !important;
  font-size: 15px !important;
  line-height: 1.15 !important;
  font-weight: 900 !important;
  white-space: normal !important;
}

body main .right-tools-column .quick-status-card button.quick-status-option .quick-status-text strong::after,
body main:not(.admin-container) .right-tools-column .quick-status-card button.quick-status-option .quick-status-text strong::after {
  content: none !important;
  display: none !important;
}

body main .right-tools-column .quick-status-card button.quick-status-option .quick-status-text small,
body main:not(.admin-container) .right-tools-column .quick-status-card button.quick-status-option .quick-status-text small {
  display: block !important;
  margin-top: 3px !important;
  color: #667085 !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
}

body main .right-tools-column .quick-status-card button.quick-status-option .quick-status-radio,
body main:not(.admin-container) .right-tools-column .quick-status-card button.quick-status-option .quick-status-radio {
  display: inline-flex !important;
  width: 19px !important;
  height: 19px !important;
  min-width: 19px !important;
  border-radius: 999px !important;
  justify-self: end !important;
  border: 2px solid #a8b0c3 !important;
  background: #ffffff !important;
  background-image: none !important;
  box-shadow: inset 0 0 0 4px #ffffff, 0 2px 6px rgba(16, 32, 74, 0.14) !important;
}

body main .right-tools-column .quick-status-card button.quick-status-option.active .quick-status-radio,
body main:not(.admin-container) .right-tools-column .quick-status-card button.quick-status-option.active .quick-status-radio {
  border-color: var(--main-color) !important;
  background: var(--main-color) !important;
  background-color: var(--main-color) !important;
  background-image: none !important;
  box-shadow: inset 0 0 0 4px #ffffff, 0 0 0 3px rgba(108, 99, 255, 0.18) !important;
}

body main .right-tools-column .quick-status-card button.quick-status-option.active .quick-status-text strong,
body main:not(.admin-container) .right-tools-column .quick-status-card button.quick-status-option.active .quick-status-text strong {
  color: var(--main-color) !important;
}


/* =========================================================
   STATUT RAPIDE - VERSION SANS BOUTON BLEU
   Correction robuste : les choix ne sont plus des <button>,
   mais des lignes cliquables propres.
   À garder tout en bas du fichier.
   ========================================================= */

body main .right-tools-column .quick-status-card .quick-status-options {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  margin: 8px 0 0 0 !important;
  padding: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
}

body main .right-tools-column .quick-status-card .quick-status-option,
body main .right-tools-column .quick-status-card .quick-status-option.active,
body main .right-tools-column .quick-status-card .quick-status-option:hover,
body main .right-tools-column .quick-status-card .quick-status-option:focus,
body main .right-tools-column .quick-status-card .quick-status-option:active {
  all: unset !important;
  box-sizing: border-box !important;

  width: 100% !important;
  min-height: 50px !important;
  display: grid !important;
  grid-template-columns: 32px minmax(0, 1fr) 22px !important;
  align-items: center !important;
  gap: 10px !important;

  margin: 0 !important;
  padding: 8px 0 !important;

  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;

  border: 0 !important;
  border-bottom: 1px solid rgba(16, 32, 74, 0.10) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  filter: none !important;
  transform: none !important;

  color: #10204a !important;
  cursor: pointer !important;
  text-align: left !important;
  font-family: inherit !important;
}

body main .right-tools-column .quick-status-card .quick-status-option:last-child {
  border-bottom: 0 !important;
}

body main .right-tools-column .quick-status-card .quick-status-option:hover,
body main .right-tools-column .quick-status-card .quick-status-option:focus-visible {
  background: rgba(108, 99, 255, 0.055) !important;
  border-radius: 12px !important;
  padding-left: 6px !important;
  padding-right: 6px !important;
}

body main .right-tools-column .quick-status-card .quick-status-icon {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 15px !important;
  font-weight: 900 !important;
}

body main .right-tools-column .quick-status-card .quick-status-online {
  color: #14b86a !important;
  background: rgba(20, 184, 106, 0.12) !important;
}

body main .right-tools-column .quick-status-card .quick-status-away {
  color: #ff9800 !important;
  background: rgba(255, 152, 0, 0.14) !important;
}

body main .right-tools-column .quick-status-card .quick-status-dnd {
  color: #ff3b5c !important;
  background: rgba(255, 59, 92, 0.12) !important;
}

body main .right-tools-column .quick-status-card .quick-status-text {
  display: block !important;
  min-width: 0 !important;
}

body main .right-tools-column .quick-status-card .quick-status-text strong {
  display: block !important;
  color: #10204a !important;
  font-size: 15px !important;
  line-height: 1.15 !important;
  font-weight: 900 !important;
  white-space: normal !important;
}

body main .right-tools-column .quick-status-card .quick-status-text strong::after {
  content: none !important;
  display: none !important;
}

body main .right-tools-column .quick-status-card .quick-status-text small {
  display: block !important;
  margin-top: 3px !important;
  color: #667085 !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
}

body main .right-tools-column .quick-status-card .quick-status-radio {
  display: inline-flex !important;
  width: 19px !important;
  height: 19px !important;
  min-width: 19px !important;
  border-radius: 999px !important;
  justify-self: end !important;
  border: 2px solid #a8b0c3 !important;
  background: #ffffff !important;
  background-image: none !important;
  box-shadow: inset 0 0 0 4px #ffffff, 0 2px 6px rgba(16, 32, 74, 0.14) !important;
}

body main .right-tools-column .quick-status-card .quick-status-option.active .quick-status-radio {
  border-color: var(--main-color) !important;
  background: var(--main-color) !important;
  background-color: var(--main-color) !important;
  background-image: none !important;
  box-shadow: inset 0 0 0 4px #ffffff, 0 0 0 3px rgba(108, 99, 255, 0.18) !important;
}

body main .right-tools-column .quick-status-card .quick-status-option.active .quick-status-text strong {
  color: var(--main-color) !important;
}

/* =========================================================
   CORRECTION EBF - MISE EN PAGE MEMBRES DU GROUPE
   - lignes membres plus propres
   - actions mieux alignées
   - demandes d'entrée et modération plus lisibles
   - uniquement de la mise en page, sans changer les données Firebase
   ========================================================= */

#membersCard {
  overflow: hidden !important;
}

#membersCard .card-title-line {
  align-items: center !important;
  margin-bottom: 14px !important;
}

#membersPanel {
  margin-top: 8px !important;
}

#membersList {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

/* Carte demande d'entrée */
#membersList .join-requests-box {
  padding: 14px 16px !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, 0.72) !important;
  box-shadow: 0 8px 18px rgba(16, 32, 74, 0.05) !important;
}

#membersList .join-requests-box strong {
  display: block !important;
  font-size: 17px !important;
  margin-bottom: 8px !important;
  color: #15182c !important;
}

#membersList .join-requests-box .small {
  margin: 0 !important;
  font-size: 15px !important;
}

/* Carte membre */
#membersList .member-user-card,
#membersList .member-request-card {
  padding: 12px 14px !important;
  border-radius: 20px !important;
  background:
    linear-gradient(rgba(255, 255, 255, 0.88), rgba(248, 249, 255, 0.88)) padding-box,
    linear-gradient(135deg, var(--main-color), var(--second-color)) border-box !important;
  border: 2px solid transparent !important;
  box-shadow:
    0 8px 20px rgba(16, 32, 74, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
}

/* Ligne membre : identité / statut / actions */
#membersList .member-user-card .member-line,
#membersList .member-request-card .member-line {
  display: grid !important;
  grid-template-columns: minmax(210px, 1fr) auto minmax(220px, max-content) !important;
  gap: 12px !important;
  align-items: center !important;
}

#membersList .member-name-with-avatar {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-width: 0 !important;
}

#membersList .member-name-with-avatar > span,
#membersList .member-name {
  min-width: 0 !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  color: #16192d !important;
  overflow-wrap: anywhere !important;
}

#membersList .member-name-with-avatar .small {
  margin-left: 5px !important;
  font-weight: 800 !important;
  color: #5f667a !important;
}

#membersList .member-name-with-avatar .avatar-small,
#membersList .member-name-with-avatar .avatar-placeholder {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  border-radius: 999px !important;
  border: 4px solid white !important;
  box-shadow:
    0 4px 12px rgba(16, 32, 74, 0.18),
    0 0 0 2px rgba(108, 99, 255, 0.10) !important;
}

/* Statut membre plus discret */
#membersList .member-user-card .member-status {
  justify-self: end !important;
  white-space: nowrap !important;
  min-width: 112px !important;
  text-align: center !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  padding: 7px 12px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(16, 32, 74, 0.08) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}

#membersList .member-user-card .member-status.online {
  background: rgba(46, 204, 113, 0.16) !important;
  color: #07843f !important;
}

#membersList .member-user-card .member-status.offline {
  background: rgba(16, 32, 74, 0.06) !important;
  color: #667085 !important;
}

/* Actions : petites pastilles propres */
#membersList .member-actions-inline {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 7px !important;
  min-width: 0 !important;
  max-width: 440px !important;
}

#membersList .member-actions-inline button {
  width: auto !important;
  min-width: 0 !important;
  min-height: 34px !important;
  margin: 0 !important;
  padding: 7px 12px !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  line-height: 1.1 !important;
  font-weight: 900 !important;
  box-shadow: none !important;
  white-space: nowrap !important;
}

#membersList .member-actions-inline button.secondary,
#membersList .member-actions-inline button:not(.danger):not(.success) {
  background: rgba(16, 32, 74, 0.06) !important;
  color: #15182c !important;
  border: 1px solid rgba(16, 32, 74, 0.10) !important;
}

#membersList .member-actions-inline .private-message-member-btn {
  background: rgba(108, 99, 255, 0.10) !important;
  color: var(--main-color) !important;
  border: 1px solid rgba(108, 99, 255, 0.22) !important;
}

#membersList .member-actions-inline button.danger {
  background: rgba(231, 76, 60, 0.10) !important;
  color: #c0392b !important;
  border: 1px solid rgba(231, 76, 60, 0.22) !important;
}

#membersList .member-actions-inline button.success {
  background: rgba(46, 204, 113, 0.12) !important;
  color: #07843f !important;
  border: 1px solid rgba(46, 204, 113, 0.24) !important;
}

#membersList .member-actions-inline button:hover {
  transform: translateY(-1px) !important;
  filter: none !important;
  box-shadow: 0 5px 12px rgba(16, 32, 74, 0.10) !important;
}

/* Bloc modération plus compact */
#membersList .group-moderation-box {
  padding: 12px 16px !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, 0.72) !important;
  border: 1px solid rgba(16, 32, 74, 0.10) !important;
  box-shadow: 0 8px 18px rgba(16, 32, 74, 0.05) !important;
}

.group-moderation-header {
  font-size: 16px !important;
  font-weight: 900 !important;
  color: #15182c !important;
  margin-bottom: 8px !important;
}

.group-moderation-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

.group-moderation-grid span {
  display: inline-flex !important;
  align-items: center !important;
  padding: 7px 11px !important;
  border-radius: 999px !important;
  background: rgba(16, 32, 74, 0.06) !important;
  color: #5f667a !important;
  font-size: 13px !important;
  font-weight: 800 !important;
}

@media (max-width: 1200px) {
  #membersList .member-user-card .member-line,
  #membersList .member-request-card .member-line {
    grid-template-columns: minmax(0, 1fr) auto !important;
  }

  #membersList .member-actions-inline {
    grid-column: 1 / -1 !important;
    justify-content: flex-end !important;
    padding-top: 8px !important;
    margin-top: 2px !important;
    border-top: 1px solid rgba(16, 32, 74, 0.08) !important;
    max-width: none !important;
  }
}

@media (max-width: 650px) {
  #membersList .member-user-card .member-line,
  #membersList .member-request-card .member-line {
    grid-template-columns: 1fr !important;
    gap: 9px !important;
  }

  #membersList .member-user-card .member-status {
    justify-self: start !important;
  }

  #membersList .member-actions-inline {
    justify-content: stretch !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
  }

  #membersList .member-actions-inline button {
    width: 100% !important;
  }
}

/* =========================================================
   EBF - MEMBRES DU GROUPE PLUS PROPRE
   - La liste des membres reste simple
   - Les actions d'administration passent dans une pop-up
   ========================================================= */

.members-header-tools {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.group-management-open-btn {
  width: auto !important;
  margin: 0 !important;
  padding: 9px 13px !important;
  border-radius: 999px !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  background: #f2f4fb !important;
  color: #1b2140 !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

.member-display-card {
  background: #ffffff !important;
  border: 2px solid rgba(255, 152, 0, 0.85) !important;
  border-radius: 22px !important;
  padding: 14px 16px !important;
  margin-bottom: 12px !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.04) !important;
}

.member-line-simple {
  display: grid !important;
  grid-template-columns: minmax(220px, 1fr) auto auto !important;
  align-items: center !important;
  gap: 12px !important;
}

.member-actions-clean {
  justify-content: flex-end !important;
  flex-wrap: nowrap !important;
}

.member-actions-clean button {
  width: auto !important;
  min-width: 76px !important;
  margin: 0 !important;
  padding: 8px 12px !important;
  border-radius: 999px !important;
  font-size: 13px !important;
}

.group-management-modal-box {
  width: min(920px, 95vw) !important;
  max-width: 95vw !important;
  max-height: 88vh !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

.group-management-content {
  flex: 1 !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  padding-right: 6px !important;
}

.group-management-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px;
  border-radius: 18px;
  background: rgba(255, 152, 0, 0.08);
  border: 1px solid rgba(255, 152, 0, 0.28);
  margin-bottom: 14px;
}

.group-management-summary strong {
  font-size: 18px;
  margin-right: auto;
}

.group-management-summary span {
  display: inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  background: white;
  font-size: 13px;
  font-weight: 800;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.06);
}

.group-management-section {
  padding: 14px;
  border-radius: 20px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  margin-bottom: 14px;
}

.group-management-section h3 {
  margin: 0 0 12px;
  font-size: 18px;
}

.group-management-muted {
  background: #f7f8fb;
}

.group-management-muted p {
  margin: 6px 0;
  color: #555;
}

.management-row {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 18px;
  background: #f8f9fc;
  border: 1px solid rgba(0, 0, 0, 0.07);
  margin-bottom: 10px;
}

.management-row.is-me {
  background: rgba(46, 204, 113, 0.08);
}

.management-user {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.management-user span {
  min-width: 0;
}

.management-user strong,
.management-user small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}

.management-user small {
  margin-top: 3px;
  color: #666;
  font-size: 13px;
}

.management-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  flex-wrap: wrap;
}

.management-actions button {
  width: auto !important;
  min-width: 72px !important;
  margin: 0 !important;
  padding: 8px 10px !important;
  border-radius: 999px !important;
  font-size: 13px !important;
}

@media (max-width: 850px) {
  .member-line-simple,
  .management-row {
    grid-template-columns: 1fr !important;
    align-items: stretch !important;
  }

  .member-actions-clean,
  .management-actions {
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
  }

  .management-actions button,
  .member-actions-clean button {
    flex: 1 1 auto !important;
  }
}

@media (max-width: 650px) {
  .card-title-line {
    align-items: flex-start;
  }

  .members-header-tools {
    width: 100%;
    justify-content: space-between;
  }

  .group-management-open-btn {
    flex: 1;
  }
}

/* =========================================================
   EBF - CORRECTION COULEUR DYNAMIQUE DES NOUVEAUX OUTILS
   Objectif : les nouvelles cartes ajoutées récemment suivent
   toujours la teinte choisie dans le profil.
   ========================================================= */

/* Colonne droite : Statut rapide / Activité récente / Groupes populaires */
body main .right-tools-column .tool-card,
body main .right-tools-column .quick-status-card,
body main .right-tools-column .recent-activity-card,
body main .right-tools-column .popular-groups-card {
  background:
    linear-gradient(#ffffff, #fbfcff) padding-box,
    linear-gradient(135deg, var(--main-color), var(--second-color)) border-box !important;
  border: 2px solid transparent !important;
  box-shadow: 0 12px 30px rgba(20, 40, 90, 0.08) !important;
}

body main .right-tools-column .tool-title-icon {
  color: var(--main-color) !important;
  background: #f5f6ff !important;
  border: 1px solid var(--main-color) !important;
}

body main .right-tools-column .tool-card-title h2 {
  color: #10204a !important;
}

/* Statut rapide : fond propre, seul le rond suit la couleur choisie */
body main .right-tools-column .quick-status-options {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

body main .right-tools-column .quick-status-option {
  background: transparent !important;
  border-bottom: 1px solid rgba(16, 32, 74, 0.08) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

body main .right-tools-column .quick-status-option:last-child {
  border-bottom: none !important;
}

body main .right-tools-column .quick-status-option:hover {
  background: rgba(16, 32, 74, 0.04) !important;
  filter: none !important;
}

body main .right-tools-column .quick-status-option.active {
  background: transparent !important;
}

body main .right-tools-column .quick-status-option.active .quick-status-text strong {
  color: var(--main-color) !important;
}

body main .right-tools-column .quick-status-radio {
  border-color: rgba(16, 32, 74, 0.30) !important;
  background: #ffffff !important;
  box-shadow: inset 0 0 0 5px #ffffff !important;
}

body main .right-tools-column .quick-status-option.active .quick-status-radio {
  border-color: var(--main-color) !important;
  background: var(--main-color) !important;
  box-shadow: inset 0 0 0 4px #ffffff, 0 0 0 3px rgba(0, 0, 0, 0.08) !important;
}

/* Boutons et états vides dans les outils */
body main .right-tools-column .tool-wide-btn,
body main .right-tools-column .tool-empty-state {
  background:
    linear-gradient(#ffffff, #f9fbff) padding-box,
    linear-gradient(135deg, var(--main-color), var(--second-color)) border-box !important;
  border: 1px solid transparent !important;
  color: #10204a !important;
}

body main .right-tools-column .popular-group-avatar {
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(135deg, var(--main-color), var(--second-color)) border-box !important;
  border: 2px solid transparent !important;
}

/* Membres du groupe : nouvelles cartes simples */
#membersList .member-display-card,
.member-display-card {
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(135deg, var(--main-color), var(--second-color)) border-box !important;
  border: 2px solid transparent !important;
}

.group-management-open-btn {
  background:
    linear-gradient(#ffffff, #f9fbff) padding-box,
    linear-gradient(135deg, var(--main-color), var(--second-color)) border-box !important;
  border: 1px solid transparent !important;
  color: var(--main-color) !important;
}

.group-management-open-btn:hover {
  filter: brightness(0.98) !important;
  box-shadow: 0 6px 14px rgba(16, 32, 74, 0.12) !important;
}

/* Pop-up Gestion du groupe */
.group-management-modal-box {
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(135deg, var(--main-color), var(--second-color)) border-box !important;
  border: 3px solid transparent !important;
}

.group-management-summary {
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(135deg, var(--main-color), var(--second-color)) border-box !important;
  border: 1px solid transparent !important;
}

.group-management-summary span {
  border: 1px solid rgba(16, 32, 74, 0.08) !important;
}

.group-management-section {
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(135deg, var(--main-color), var(--second-color)) border-box !important;
  border: 1px solid transparent !important;
}

.management-row {
  background:
    linear-gradient(#f8f9fc, #f8f9fc) padding-box,
    linear-gradient(135deg, var(--main-color), var(--second-color)) border-box !important;
  border: 1px solid transparent !important;
}

.management-row.is-me {
  background:
    linear-gradient(#f1fff6, #f1fff6) padding-box,
    linear-gradient(135deg, #2ecc71, var(--main-color)) border-box !important;
  border: 1px solid transparent !important;
}


/* =========================================================
   IMAGES / ICÔNES DE GROUPE
   - Choix à la création du groupe
   - Modification dans Gestion du groupe
   - Affichage dans Mes groupes et Groupes populaires
   ========================================================= */

.group-image-create-zone {
  margin-top: 12px !important;
}

.group-image-picker {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin-top: 8px !important;
}

.group-image-choice {
  width: 100% !important;
  min-height: 68px !important;
  margin: 0 !important;
  padding: 8px 6px !important;
  border-radius: 16px !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;

  background: rgba(255, 255, 255, 0.72) !important;
  color: #222222 !important;
  border: 2px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: none !important;
  cursor: pointer !important;
}

.group-image-choice:hover {
  background: rgba(255, 255, 255, 0.94) !important;
  border-color: var(--main-color) !important;
  transform: translateY(-1px) !important;
}

.group-image-choice.active {
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(135deg, var(--main-color), var(--second-color)) border-box !important;
  border: 3px solid transparent !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12) !important;
}

.group-image-choice-emoji {
  font-size: 26px !important;
  line-height: 1 !important;
}

.group-image-choice-label {
  font-size: 11px !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  color: #444444 !important;
}

.group-image-badge {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  border-radius: 16px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(135deg, var(--main-color), var(--second-color)) border-box !important;
  border: 3px solid transparent !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14) !important;

  font-size: 22px !important;
  line-height: 1 !important;
  flex: 0 0 auto !important;
}

.group-title-line-with-image {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.group-title-line-with-image strong {
  min-width: 0 !important;
  flex: 1 !important;
}

.group-card-image {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  border-radius: 14px !important;
  font-size: 20px !important;
  border-width: 3px !important;
}

.popular-group-avatar.group-image-badge {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  border-radius: 14px !important;
  font-size: 21px !important;
}

.group-image-management-section {
  background: rgba(255, 255, 255, 0.66) !important;
}

.group-management-image-current {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 8px 0 12px !important;
}

.group-management-image-current span:not(.group-image-badge) {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  min-width: 0 !important;
}

.group-management-image-current small {
  color: #666666 !important;
  font-size: 13px !important;
  line-height: 1.25 !important;
}

.group-management-current-image {
  width: 54px !important;
  height: 54px !important;
  min-width: 54px !important;
  border-radius: 18px !important;
  font-size: 28px !important;
}

.group-image-management-picker {
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
}

.group-image-management-picker .group-image-choice {
  min-height: 62px !important;
}

@media (max-width: 850px) {
  .group-image-management-picker {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 650px) {
  .group-image-picker,
  .group-image-management-picker {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .group-image-choice {
    min-height: 64px !important;
  }
}


/* =========================================================
   V13 - ICÔNES DE GROUPE EN LISTE DÉPLIABLE
   - Plus d'icônes disponibles
   - Les icônes apparaissent seulement quand on clique sur l'image
   - Le choix est appliqué uniquement après validation
   ========================================================= */

.group-image-create-zone {
  margin-top: 14px !important;
}

.group-image-selected-btn,
.group-management-image-current.group-image-selected-btn {
  width: 100% !important;
  margin: 8px 0 0 !important;
  padding: 10px 12px !important;
  border-radius: 18px !important;

  display: flex !important;
  align-items: center !important;
  gap: 12px !important;

  background: rgba(255, 255, 255, 0.62) !important;
  color: var(--text-color) !important;
  border: 2px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: none !important;
  text-align: left !important;
  cursor: pointer !important;
}

.group-image-selected-btn:hover,
.group-management-image-current.group-image-selected-btn:hover {
  background: rgba(255, 255, 255, 0.86) !important;
  border-color: var(--main-color) !important;
  transform: translateY(-1px) !important;
}

.group-image-selected-btn.open,
.group-management-image-current.group-image-selected-btn.open {
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(135deg, var(--main-color), var(--second-color)) border-box !important;
  border: 2px solid transparent !important;
}

.group-image-selected-text {
  flex: 1 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.group-image-selected-text strong {
  font-size: 15px !important;
  line-height: 1.2 !important;
  color: #222222 !important;
}

.group-image-selected-text small {
  font-size: 12px !important;
  line-height: 1.25 !important;
  color: #666666 !important;
}

.group-image-selected-arrow {
  width: 28px !important;
  height: 28px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(0, 0, 0, 0.06) !important;
  color: #444444 !important;
  font-weight: 900 !important;
  flex: 0 0 auto !important;
}

.group-image-selected-btn.open .group-image-selected-arrow {
  transform: rotate(180deg) !important;
  background: var(--main-color) !important;
  color: white !important;
}

.group-image-selected-badge,
.group-management-current-image {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  border-radius: 17px !important;
  font-size: 25px !important;
}

.group-image-picker-panel {
  margin-top: 10px !important;
  padding: 10px !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, 0.52) !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

.group-image-picker,
.group-image-management-picker {
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  max-height: 260px !important;
  overflow-y: auto !important;
  padding: 3px 3px 8px !important;
}

.group-image-picker::-webkit-scrollbar,
.group-image-management-picker::-webkit-scrollbar {
  width: 8px !important;
}

.group-image-picker::-webkit-scrollbar-track,
.group-image-management-picker::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.06) !important;
  border-radius: 999px !important;
}

.group-image-picker::-webkit-scrollbar-thumb,
.group-image-management-picker::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--main-color), var(--second-color)) !important;
  border-radius: 999px !important;
}

.group-image-choice {
  min-height: 62px !important;
}

.group-image-choice-emoji {
  font-size: 24px !important;
}

.group-image-picker-actions {
  margin-top: 10px !important;
  display: flex !important;
  justify-content: flex-end !important;
}

.group-image-picker-actions button {
  width: auto !important;
  min-width: 170px !important;
  margin: 0 !important;
  background: var(--main-color) !important;
  color: white !important;
}

.group-image-management-section {
  background: rgba(255, 255, 255, 0.52) !important;
}

@media (max-width: 850px) {
  .group-image-picker,
  .group-image-management-picker {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 650px) {
  .group-image-picker,
  .group-image-management-picker {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .group-image-picker-actions button {
    width: 100% !important;
  }
}


/* =========================================================
   EBF - GROUPES POPULAIRES ACTIFS
   - Classement visible
   - Membres + activité récente
   - Clique sur un groupe pour l'ouvrir
   ========================================================= */

body main .right-tools-column .popular-group-item-active,
.popular-group-item-active {
  grid-template-columns: 24px 40px 1fr !important;
  gap: 9px !important;
  align-items: center !important;
  padding: 10px 8px !important;
  border-radius: 16px !important;
  cursor: pointer !important;
}

.popular-group-rank {
  width: 24px !important;
  height: 24px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  color: var(--main-color) !important;
  background: rgba(255, 255, 255, 0.74) !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
}

.popular-group-item-active:hover .popular-group-rank {
  color: white !important;
  background: var(--main-color) !important;
}

.popular-group-last-activity {
  font-size: 11px !important;
  font-weight: 600 !important;
  opacity: 0.86 !important;
}

@media (max-width: 650px) {
  body main .right-tools-column .popular-group-item-active,
  .popular-group-item-active {
    grid-template-columns: 24px 38px 1fr !important;
  }
}


/* =========================================================
   MODULE QUIZZ DE GROUPE - V1
   ========================================================= */

.quiz-open-btn {
  margin-top: 10px !important;
  background: rgba(255, 255, 255, 0.92) !important;
  color: var(--main-color) !important;
  border: 2px solid rgba(0, 0, 0, 0.06) !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08) !important;
}

.quiz-open-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12) !important;
}

.quiz-modal-box {
  width: min(860px, 96vw) !important;
  max-width: 96vw !important;
  max-height: 92vh !important;
  overflow-y: auto !important;
}

.quiz-modal-title-line {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-right: 42px;
}

.quiz-modal-title-line h2 {
  margin-bottom: 4px;
}

.quiz-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0;
  padding: 8px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--main-color) 8%, transparent);
}

.quiz-tab {
  width: auto !important;
  flex: 1 1 140px;
  margin: 0 !important;
  border-radius: 999px !important;
  padding: 10px 12px !important;
}

.quiz-tab.active {
  background: linear-gradient(135deg, var(--main-color), var(--second-color)) !important;
  color: white !important;
}

.quiz-view {
  margin-top: 10px;
}

.quiz-view-header,
.quiz-play-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.quiz-view-header h3,
.quiz-play-header h3 {
  margin: 0;
}

.small-action-btn {
  width: auto !important;
  margin: 0 !important;
  padding: 8px 12px !important;
  font-size: 14px !important;
}

.quiz-list,
.quiz-score-list,
.quiz-draft-questions-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.quiz-list-item,
.quiz-score-item,
.quiz-draft-question-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border-radius: 18px;
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(135deg, var(--main-color), var(--second-color)) border-box;
  border: 2px solid transparent;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.07);
}

.quiz-list-item-main,
.quiz-score-main,
.quiz-draft-main {
  min-width: 0;
}

.quiz-list-item-main strong,
.quiz-score-main strong,
.quiz-draft-main strong {
  display: block;
  word-break: break-word;
}

.quiz-list-item button,
.quiz-draft-question-item button {
  width: auto !important;
  margin: 0 !important;
  padding: 8px 12px !important;
  white-space: nowrap;
}

.quiz-question-editor {
  padding: 12px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.74);
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.quiz-correct-label {
  display: block;
  margin-top: 10px;
  font-size: 14px;
  font-weight: 800;
  color: #555;
}

#quizCorrectSelect {
  width: 100%;
  margin-top: 8px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid #cccccc;
  font-size: 16px;
  background: white;
}

.quiz-draft-box {
  margin-top: 14px;
  padding: 12px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--main-color) 7%, white);
}

.quiz-draft-box h4 {
  margin: 0 0 10px;
}

.quiz-play-box,
.quiz-finish-box {
  padding: 16px;
  border-radius: 22px;
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(135deg, var(--main-color), var(--second-color)) border-box;
  border: 2px solid transparent;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.10);
}

.quiz-play-box h4 {
  margin: 0 0 14px;
  font-size: 20px;
  line-height: 1.35;
}

.quiz-play-answers {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-bottom: 14px;
}

.quiz-answer-option {
  width: 100% !important;
  margin: 0 !important;
  padding: 12px 14px !important;
  border-radius: 16px !important;
  background: #f4f6fb !important;
  color: #222 !important;
  border: 2px solid transparent !important;
  text-align: left !important;
  font-weight: 800 !important;
}

.quiz-answer-option:hover {
  background: color-mix(in srgb, var(--main-color) 10%, white) !important;
}

.quiz-answer-option.selected {
  background: color-mix(in srgb, var(--main-color) 18%, white) !important;
  border-color: var(--main-color) !important;
  color: var(--main-color) !important;
}

.quiz-next-btn {
  margin-top: 0 !important;
}

.quiz-score-text {
  font-size: 26px;
  font-weight: 900;
  color: var(--main-color);
  text-align: center;
}

.quiz-finish-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.quiz-finish-actions button {
  flex: 1 1 220px;
}

.quiz-score-badge {
  min-width: 52px;
  height: 52px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  background: linear-gradient(135deg, var(--main-color), var(--second-color));
  color: white;
  font-weight: 900;
  border: 4px solid white;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}

.recent-activity-icon.quiz-activity {
  background: color-mix(in srgb, var(--main-color) 14%, white) !important;
  color: var(--main-color) !important;
}

@media (max-width: 650px) {
  .quiz-view-header,
  .quiz-play-header,
  .quiz-list-item,
  .quiz-score-item,
  .quiz-draft-question-item {
    align-items: stretch;
    flex-direction: column;
  }

  .quiz-list-item button,
  .quiz-draft-question-item button,
  .small-action-btn {
    width: 100% !important;
  }
}

/* =========================================================
   CORRECTION QUIZZ - TEXTE BLANC SUR LES CHOIX DE RÉPONSES
   ========================================================= */

.quiz-answer-option {
  background: linear-gradient(135deg, var(--main-color), var(--second-color)) !important;
  color: white !important;
  border: 2px solid rgba(255, 255, 255, 0.72) !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12) !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.28) !important;
}

.quiz-answer-option:hover {
  background: linear-gradient(135deg, var(--second-color), var(--main-color)) !important;
  color: white !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 9px 22px rgba(0, 0, 0, 0.16) !important;
}

.quiz-answer-option.selected {
  background: linear-gradient(135deg, var(--main-color), var(--second-color)) !important;
  color: white !important;
  border: 3px solid white !important;
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--main-color) 35%, transparent),
    0 10px 24px rgba(0, 0, 0, 0.18) !important;
}


/* =========================================================
   V21 - SONDAGES + DURÉE DE VIE DES PUBLICATIONS
   ========================================================= */

.quiz-open-btn,
.poll-open-btn {
  margin-top: 10px !important;
}

.post-lifetime-box {
  margin: 12px 0 !important;
  padding: 12px !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, 0.68) !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

.post-lifetime-box label {
  display: block !important;
  font-weight: 900 !important;
  margin-bottom: 6px !important;
  color: #10204a !important;
}

.post-lifetime-box select,
.quiz-correct-label + select,
#quizCorrectSelect {
  width: 100% !important;
  font-size: 16px !important;
  border-radius: 12px !important;
  border: 1px solid #cccccc !important;
  padding: 12px !important;
  background: white !important;
  color: #222222 !important;
}

.post-expiration-info {
  margin-top: 2px !important;
  color: var(--main-color) !important;
  font-weight: 800 !important;
}

.old-posts-gate {
  margin: 14px 0 !important;
  padding: 14px !important;
  border-radius: 18px !important;
  background:
    linear-gradient(#ffffff, #f9fbff) padding-box,
    linear-gradient(135deg, var(--main-color), var(--second-color)) border-box !important;
  border: 2px solid transparent !important;
  box-shadow: 0 8px 22px rgba(16, 32, 74, 0.08) !important;
}

.old-posts-gate strong {
  color: #10204a !important;
}

.old-posts-actions {
  display: flex !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  margin-top: 10px !important;
}

.old-posts-actions button {
  width: auto !important;
  flex: 1 1 180px !important;
  margin: 0 !important;
}

.poll-modal-box {
  width: min(760px, 94vw) !important;
  max-height: 90vh !important;
  overflow-y: auto !important;
}

.poll-modal-title-line,
.poll-view-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 12px !important;
}

.poll-modal-title-line h2,
.poll-view-header h3 {
  margin: 0 !important;
}

.poll-tabs {
  display: flex !important;
  gap: 8px !important;
  margin: 14px 0 !important;
}

.poll-tab {
  margin: 0 !important;
  flex: 1 !important;
}

.poll-tab.active {
  background: var(--main-color) !important;
  color: white !important;
}

.poll-view {
  margin-top: 12px !important;
}

.poll-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  margin-top: 12px !important;
}

.poll-list-item {
  position: relative !important;
  padding: 14px !important;
  border-radius: 18px !important;
  background:
    linear-gradient(#ffffff, #f9fbff) padding-box,
    linear-gradient(135deg, var(--main-color), var(--second-color)) border-box !important;
  border: 2px solid transparent !important;
  box-shadow: 0 8px 22px rgba(16, 32, 74, 0.08) !important;
}

.poll-list-item.closed {
  opacity: 0.78 !important;
}

.poll-list-header {
  display: flex !important;
  justify-content: space-between !important;
  gap: 12px !important;
  align-items: flex-start !important;
  margin-bottom: 10px !important;
}

.poll-status-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 70px !important;
  padding: 5px 9px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  color: white !important;
}

.poll-status-badge.active {
  background: #2ecc71 !important;
}

.poll-status-badge.closed {
  background: #777777 !important;
}

.poll-options-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.poll-vote-option {
  position: relative !important;
  overflow: hidden !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 11px 12px !important;
  border-radius: 14px !important;
  background: rgba(16, 32, 74, 0.06) !important;
  color: #10204a !important;
  border: 1px solid rgba(16, 32, 74, 0.10) !important;
  box-shadow: none !important;
  display: flex !important;
  justify-content: space-between !important;
  gap: 12px !important;
  align-items: center !important;
  text-align: left !important;
}

.poll-vote-option:hover:not(:disabled) {
  border-color: var(--main-color) !important;
  transform: translateY(-1px) !important;
  filter: none !important;
}

.poll-vote-option.selected {
  background: var(--main-color) !important;
  color: white !important;
  border-color: var(--main-color) !important;
}

.poll-vote-option:disabled {
  cursor: default !important;
}

.poll-option-label,
.poll-option-result {
  position: relative !important;
  z-index: 2 !important;
}

.poll-option-label {
  font-weight: 900 !important;
}

.poll-option-result {
  font-size: 13px !important;
  opacity: 0.9 !important;
  white-space: nowrap !important;
}

.poll-option-bar {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  background: rgba(30, 144, 255, 0.16) !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

.poll-vote-option.selected .poll-option-bar {
  background: rgba(255, 255, 255, 0.18) !important;
}

.poll-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  margin-top: 12px !important;
}

.poll-actions button {
  width: auto !important;
  margin: 0 !important;
}

.poll-options-editor {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin-top: 10px !important;
}

.poll-option-edit-row {
  display: flex !important;
  gap: 8px !important;
  align-items: center !important;
}

.poll-option-edit-row input {
  margin: 0 !important;
}

.poll-remove-option-btn {
  width: auto !important;
  min-width: 44px !important;
  margin: 0 !important;
}

.poll-check-line {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 12px 0 !important;
  font-size: 14px !important;
  color: #444444 !important;
}

.poll-check-line input {
  width: auto !important;
  margin: 0 !important;
}

.recent-activity-icon.poll-activity {
  background: rgba(30, 144, 255, 0.12) !important;
  color: var(--main-color) !important;
}

@media (max-width: 650px) {
  .poll-modal-title-line,
  .poll-view-header,
  .poll-list-header,
  .poll-actions {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .poll-tabs {
    flex-direction: column !important;
  }

  .poll-vote-option {
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .old-posts-actions button,
  .poll-actions button {
    width: 100% !important;
  }
}

/* =========================================================
   V22 - CORRECTION LISIBILITÉ SONDAGES
   - Les choix non sélectionnés restent clairs même avec le thème noir.
   - La barre de résultat reste légère et ne masque plus le texte.
   - Le choix sélectionné garde la couleur du thème avec texte blanc.
   ========================================================= */

.poll-list-item .poll-vote-option,
.poll-list-item button.poll-vote-option,
.poll-options-list .poll-vote-option,
.poll-options-list button.poll-vote-option {
  background: #ffffff !important;
  color: #10204a !important;
  border: 2px solid rgba(16, 32, 74, 0.12) !important;
  box-shadow: 0 4px 12px rgba(16, 32, 74, 0.06) !important;
  text-shadow: none !important;
  opacity: 1 !important;
}

.poll-list-item .poll-vote-option .poll-option-label,
.poll-list-item .poll-vote-option .poll-option-result,
.poll-options-list .poll-vote-option .poll-option-label,
.poll-options-list .poll-vote-option .poll-option-result {
  color: #10204a !important;
  text-shadow: none !important;
}

.poll-list-item .poll-vote-option .poll-option-bar,
.poll-options-list .poll-vote-option .poll-option-bar {
  background: linear-gradient(
    90deg,
    rgba(30, 144, 255, 0.18),
    rgba(139, 124, 255, 0.10)
  ) !important;
  opacity: 1 !important;
}

.poll-list-item .poll-vote-option:hover:not(:disabled),
.poll-options-list .poll-vote-option:hover:not(:disabled) {
  background: #ffffff !important;
  color: #10204a !important;
  border-color: var(--main-color) !important;
  transform: translateY(-1px) !important;
  filter: none !important;
}

.poll-list-item .poll-vote-option.selected,
.poll-list-item button.poll-vote-option.selected,
.poll-options-list .poll-vote-option.selected,
.poll-options-list button.poll-vote-option.selected {
  background: linear-gradient(135deg, var(--main-color), var(--second-color)) !important;
  color: #ffffff !important;
  border: 3px solid #ffffff !important;
  box-shadow: 0 8px 20px rgba(16, 32, 74, 0.18) !important;
}

.poll-list-item .poll-vote-option.selected .poll-option-label,
.poll-list-item .poll-vote-option.selected .poll-option-result,
.poll-options-list .poll-vote-option.selected .poll-option-label,
.poll-options-list .poll-vote-option.selected .poll-option-result {
  color: #ffffff !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35) !important;
}

.poll-list-item .poll-vote-option.selected .poll-option-bar,
.poll-options-list .poll-vote-option.selected .poll-option-bar {
  background: rgba(255, 255, 255, 0.18) !important;
}

.poll-list-item .poll-vote-option:disabled:not(.selected),
.poll-options-list .poll-vote-option:disabled:not(.selected) {
  background: #ffffff !important;
  color: #10204a !important;
  opacity: 1 !important;
  cursor: default !important;
}


/* =========================================================
   ADMIN - MAINTENANCE / NETTOYAGE DES PUBLICATIONS EXPIRÉES
   ========================================================= */

.maintenance-summary-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin: 14px 0 !important;
}

.maintenance-stat-card {
  padding: 14px !important;
  border-radius: 18px !important;
  background:
    linear-gradient(#ffffff, #f8f9ff) padding-box,
    linear-gradient(135deg, var(--main-color), var(--second-color)) border-box !important;
  border: 2px solid transparent !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06) !important;
  text-align: center !important;
}

.maintenance-stat-card strong {
  display: block !important;
  font-size: 28px !important;
  font-weight: 900 !important;
  color: var(--main-color) !important;
  line-height: 1 !important;
}

.maintenance-stat-card span {
  display: block !important;
  margin-top: 6px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #5d6476 !important;
}

.danger-maintenance-stat strong {
  color: var(--danger-color) !important;
}

.maintenance-box {
  margin-top: 12px !important;
  padding: 14px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

.maintenance-ok-box {
  background: rgba(46, 204, 113, 0.10) !important;
  color: #145a32 !important;
}

.maintenance-warning-box {
  background: rgba(243, 156, 18, 0.12) !important;
  color: #6f4500 !important;
}

.maintenance-expired-list {
  margin-top: 12px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

.maintenance-expired-item {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 12px !important;
  border-radius: 16px !important;
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04) !important;
}

.maintenance-expired-item strong {
  color: #202334 !important;
}

.maintenance-more-line {
  padding: 10px 12px !important;
  border-radius: 14px !important;
  background: rgba(0, 0, 0, 0.04) !important;
}

@media (max-width: 900px) {
  .maintenance-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 560px) {
  .maintenance-summary-grid {
    grid-template-columns: 1fr !important;
  }

  .maintenance-expired-item {
    align-items: flex-start !important;
    flex-direction: column !important;
  }
}

/* =========================================================
   CORRECTION ADMIN V25 - MISE EN PAGE ADMIN PROPRE
   Objectif : corriger l'affichage cassé de l'administration
   après l'ajout du bloc Maintenance.
   ========================================================= */

body:has(.admin-header) {
  background: #f4f6fb !important;
}

.admin-header {
  width: min(1320px, calc(100vw - 24px)) !important;
  max-width: calc(100vw - 24px) !important;
  margin: 22px auto 0 !important;
  padding: 18px 22px !important;
  border-radius: 24px !important;
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(135deg, var(--main-color), var(--second-color)) border-box !important;
  border: 2px solid transparent !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
}

.admin-header h1 {
  margin: 0 !important;
  font-size: 30px !important;
  line-height: 1.1 !important;
  font-weight: 900 !important;
  color: #151827 !important;
}

.admin-header .small {
  margin: 6px 0 0 !important;
}

.admin-header-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}

.admin-header-actions button,
.admin-header button {
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 10px 14px !important;
  border-radius: 999px !important;
  font-size: 14px !important;
  white-space: nowrap !important;
}

main.admin-container {
  width: min(1320px, calc(100vw - 24px)) !important;
  max-width: calc(100vw - 24px) !important;
  margin: 22px auto !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(300px, 360px) minmax(0, 1fr) !important;
  gap: 22px !important;
  align-items: start !important;
}

main.admin-container > #adminStatus {
  grid-column: 1 / -1 !important;
  margin: 0 !important;
}

main.admin-container > .admin-card {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 18px !important;
  overflow: hidden !important;
}

main.admin-container > .admin-card:nth-of-type(1),
main.admin-container > .admin-card:nth-of-type(3),
main.admin-container > .admin-card:nth-of-type(5) {
  grid-column: 1 !important;
}

main.admin-container > .admin-card:nth-of-type(2),
main.admin-container > .admin-card:nth-of-type(4) {
  grid-column: 2 !important;
}

main.admin-container > .admin-card:nth-of-type(5) {
  grid-column: 1 / -1 !important;
}

main.admin-container .admin-card h2 {
  margin: 0 0 12px !important;
  font-size: 24px !important;
  line-height: 1.15 !important;
  word-break: normal !important;
}

main.admin-container .admin-card .small,
main.admin-container .admin-card p {
  line-height: 1.35 !important;
}

main.admin-container .admin-search-line {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 10px !important;
  align-items: center !important;
  margin: 10px 0 14px !important;
}

main.admin-container .admin-search-line input {
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
}

main.admin-container .admin-search-line button {
  width: auto !important;
  min-width: 128px !important;
  margin: 0 !important;
}

main.admin-container .admin-actions {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin-top: 12px !important;
}

main.admin-container .admin-actions button,
main.admin-container .admin-card button,
main.admin-container .admin-results button {
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 9px 13px !important;
  border-radius: 999px !important;
  font-size: 14px !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
}

main.admin-container #cleanExpiredPostsBtn {
  color: white !important;
  background: var(--danger-color) !important;
}

main.admin-container .admin-results {
  display: block !important;
  min-width: 0 !important;
  margin-top: 14px !important;
}

main.admin-container #reportsList,
main.admin-container #adminLogsList,
main.admin-container #maintenanceResults,
main.admin-container #warningsList,
main.admin-container #usersResults {
  max-width: 100% !important;
  overflow-x: hidden !important;
}

main.admin-container #reportsList,
main.admin-container #adminLogsList {
  max-height: 420px !important;
  overflow-y: auto !important;
  padding-right: 8px !important;
}

main.admin-container .admin-user-card,
main.admin-container .admin-report-card,
main.admin-container .admin-warning-card,
main.admin-container .admin-log-card,
main.admin-container .maintenance-result-card {
  max-width: 100% !important;
  overflow: hidden !important;
  word-break: break-word !important;
}

/* Modales admin : pas de bouton qui prend toute la largeur sans raison */
.modal-box .modal-title-line button,
.modal-box .modal-actions button,
.modal-box .admin-actions button {
  width: auto !important;
}

@media (max-width: 1050px) {
  .admin-header {
    align-items: flex-start !important;
    flex-direction: column !important;
  }

  .admin-header-actions {
    width: 100% !important;
    justify-content: flex-start !important;
  }

  main.admin-container {
    grid-template-columns: 1fr !important;
  }

  main.admin-container > .admin-card,
  main.admin-container > .admin-card:nth-of-type(1),
  main.admin-container > .admin-card:nth-of-type(2),
  main.admin-container > .admin-card:nth-of-type(3),
  main.admin-container > .admin-card:nth-of-type(4),
  main.admin-container > .admin-card:nth-of-type(5) {
    grid-column: 1 !important;
  }
}

@media (max-width: 650px) {
  .admin-header {
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    padding: 14px !important;
  }

  .admin-header-actions,
  main.admin-container .admin-actions {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .admin-header-actions button,
  main.admin-container .admin-actions button,
  main.admin-container .admin-card button,
  main.admin-container .admin-results button {
    width: 100% !important;
  }

  main.admin-container {
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    gap: 16px !important;
  }

  main.admin-container .admin-search-line {
    grid-template-columns: 1fr !important;
  }

  main.admin-container .admin-search-line button {
    width: 100% !important;
  }
}

/* =========================================================
   ADMIN - LISTE DES PROFILS PAR ORDRE ALPHABÉTIQUE
   ========================================================= */

.admin-profiles-search-line {
  align-items: stretch;
}

.admin-profiles-search-line input {
  min-width: 220px;
}

.admin-profiles-summary {
  margin: 10px 0 14px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(75, 108, 255, 0.08);
  color: var(--text-color);
  font-weight: 800;
}

.admin-profile-row {
  display: grid;
  grid-template-columns: minmax(220px, 0.9fr) minmax(260px, 1.2fr) auto;
  gap: 14px;
  align-items: center;
  padding: 14px;
  margin-bottom: 12px;
  border-radius: 18px;
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(135deg, var(--main-color), var(--second-color)) border-box;
  border: 2px solid transparent;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.06);
}

.admin-profile-row-main {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.admin-profile-avatar-mini {
  width: 54px;
  height: 54px;
  border-radius: 999px;
  flex: 0 0 auto;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #f2f3f8;
  border: 3px solid white;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.16);
  font-size: 24px;
}

.admin-profile-avatar-mini img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.admin-profile-info {
  min-width: 0;
}

.admin-profile-info p {
  margin: 3px 0;
  word-break: break-word;
}

.admin-profile-name-line {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.admin-profile-groups {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
}

.admin-profile-group-tag {
  display: inline-flex;
  flex-direction: column;
  gap: 1px;
  padding: 7px 9px;
  border-radius: 14px;
  background: #f3f4f8;
  border: 1px solid rgba(0, 0, 0, 0.08);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.15;
}

.admin-profile-group-tag small {
  font-size: 11px;
  font-weight: 700;
  color: #666;
}

.admin-profile-group-tag.admin-role-owner {
  background: rgba(46, 204, 113, 0.12);
  border-color: rgba(46, 204, 113, 0.32);
}

.admin-profile-group-tag.admin-role-blocked,
.admin-profile-group-tag.admin-role-excluded {
  background: rgba(231, 76, 60, 0.10);
  border-color: rgba(231, 76, 60, 0.28);
}

.admin-profile-group-tag.admin-role-pending {
  background: rgba(243, 156, 18, 0.12);
  border-color: rgba(243, 156, 18, 0.32);
}

.admin-profile-group-tag.admin-role-none {
  color: #777;
  font-weight: 700;
}

.admin-profile-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  justify-content: flex-end;
}

.admin-profile-actions button {
  width: auto;
  margin: 0;
  padding: 8px 10px;
  font-size: 13px;
  border-radius: 12px;
  white-space: nowrap;
}

@media (max-width: 1100px) {
  .admin-profile-row {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .admin-profile-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 650px) {
  .admin-profiles-search-line {
    flex-direction: column;
  }

  .admin-profile-row-main {
    align-items: flex-start;
  }

  .admin-profile-actions {
    flex-direction: column;
  }

  .admin-profile-actions button {
    width: 100%;
  }
}


/* =========================================================
   DOCUMENTS ET RÈGLES - APPLICATION + ADMIN
   ========================================================= */

.legal-docs-card h2,
.admin-documents-card h2 {
  margin-bottom: 8px;
}

.legal-docs-modal-box {
  width: min(920px, 94vw) !important;
  max-width: 94vw !important;
  max-height: 88vh !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

.legal-docs-content {
  margin-top: 14px;
  padding-right: 6px;
  overflow-y: auto;
  overflow-x: hidden;
}

.legal-doc-section {
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(135deg, var(--main-color), var(--second-color)) border-box;
  border: 2px solid transparent;
  border-radius: 18px;
  padding: 12px 14px;
  margin-bottom: 12px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.05);
}

.legal-doc-section summary {
  cursor: pointer;
  font-weight: 900;
  color: #101936;
  font-size: 17px;
  list-style: none;
}

.legal-doc-section summary::-webkit-details-marker {
  display: none;
}

.legal-doc-section summary::after {
  content: "⌄";
  float: right;
  color: var(--main-color);
  font-weight: 900;
}

.legal-doc-section[open] summary::after {
  content: "⌃";
}

.legal-doc-section div,
.legal-doc-section p,
.legal-doc-section li {
  color: #4f5b6f;
  line-height: 1.45;
}

.legal-doc-section ul {
  padding-left: 22px;
  margin-bottom: 0;
}

.admin-legal-docs-content .legal-doc-section {
  background:
    linear-gradient(#f7f8fb, #f7f8fb) padding-box,
    linear-gradient(135deg, var(--main-color), var(--second-color)) border-box;
}

@media (max-width: 650px) {
  .legal-docs-modal-box {
    max-height: 90vh !important;
    padding: 18px !important;
  }

  .legal-doc-section summary {
    font-size: 15px;
  }
}


/* =========================================================
   ADMIN - PROFILS À LA DEMANDE + FILTRES
   ========================================================= */

.admin-profiles-card .simple-admin-header {
  align-items: flex-start;
}

.admin-toggle-profiles-btn {
  width: auto !important;
  min-width: 190px;
  margin: 0 !important;
  white-space: nowrap;
}

.admin-profiles-panel {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.admin-profile-tools {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(190px, 260px) auto;
  gap: 10px;
  align-items: stretch;
}

.admin-profile-tools input,
.admin-profile-tools select,
.admin-profile-tools button {
  margin: 0 !important;
  min-height: 48px;
}

.admin-profile-tools select {
  width: 100%;
  font-size: 15px;
  border-radius: 14px;
  border: 1px solid rgba(0, 0, 0, 0.16);
  padding: 0 12px;
  background: #ffffff;
  color: var(--text-color);
  font-weight: 700;
}

.admin-profile-quick-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.admin-profile-quick-filters button {
  width: auto !important;
  margin: 0 !important;
  padding: 8px 12px !important;
  font-size: 13px !important;
  border-radius: 999px !important;
}

.admin-profile-summary-mode {
  display: inline-flex;
  margin-left: 10px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.07);
  font-size: 13px;
  font-weight: 800;
}

.admin-profile-date-line {
  margin-top: 4px !important;
  font-weight: 700;
  color: #4f5b75 !important;
}

@media (max-width: 900px) {
  .admin-profile-tools {
    grid-template-columns: 1fr;
  }

  .admin-toggle-profiles-btn {
    width: 100% !important;
    min-width: 0;
    margin-top: 10px !important;
  }
}


/* =========================================================
   ADMIN - COURBES PROFILS ET CONNEXIONS
   ========================================================= */

.admin-growth-stats-card {
  overflow: hidden;
}

.admin-growth-actions {
  display: flex;
  gap: 10px;
  align-items: stretch;
  flex-wrap: wrap;
  margin: 12px 0;
}

.admin-growth-actions select {
  width: auto;
  min-width: 190px;
  margin-top: 8px;
  padding: 11px 12px;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.16);
  background: white;
  font-weight: 800;
}

.admin-growth-actions button {
  width: auto;
  min-width: 190px;
}

.admin-growth-stats-content {
  margin-top: 12px;
}

.admin-growth-mini-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 12px 0;
}

.admin-growth-mini-stat {
  min-width: 0;
  padding: 12px;
  border-radius: 18px;
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(135deg, var(--main-color), var(--second-color)) border-box;
  border: 2px solid transparent;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.07);
}

.admin-growth-mini-stat strong {
  display: block;
  font-size: 26px;
  line-height: 1.05;
  color: var(--main-color);
  margin-bottom: 5px;
}

.admin-growth-mini-stat span {
  display: block;
  font-size: 12px;
  font-weight: 900;
  color: #555555;
  line-height: 1.2;
}

.admin-growth-mini-stat.good strong {
  color: #00a86b;
}

.admin-growth-mini-stat.bad strong {
  color: #e74c3c;
}

.admin-growth-mini-stat.main {
  background:
    linear-gradient(rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.96)) padding-box,
    linear-gradient(135deg, var(--main-color), var(--second-color)) border-box;
}

.admin-growth-charts-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 14px;
}

.admin-growth-chart-card {
  min-width: 0;
  padding: 12px;
  border-radius: 18px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
}

.admin-growth-chart-card h3 {
  margin: 0 0 10px;
  font-size: 17px;
}

.admin-growth-chart-wrap {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 2px;
}

.admin-growth-chart {
  min-width: 660px;
  width: 100%;
  height: auto;
  display: block;
}

.admin-growth-chart .axis {
  stroke: rgba(0, 0, 0, 0.34);
  stroke-width: 1.5;
}

.admin-growth-chart .grid {
  stroke: rgba(0, 0, 0, 0.08);
  stroke-width: 1;
}

.admin-growth-chart .area {
  fill: color-mix(in srgb, var(--main-color) 18%, transparent);
}

.admin-growth-chart .line {
  fill: none;
  stroke: var(--main-color);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.admin-growth-chart circle {
  fill: var(--second-color);
  stroke: white;
  stroke-width: 2;
}

.admin-growth-chart text {
  fill: #555555;
  font-size: 12px;
  font-weight: 800;
}

.admin-growth-chart .value-label {
  fill: #777777;
}

.admin-growth-note {
  margin: 10px 0;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(75, 108, 255, 0.08);
  border: 1px solid rgba(75, 108, 255, 0.18);
  font-size: 13px;
  font-weight: 800;
}

.admin-growth-note.warn {
  background: rgba(243, 156, 18, 0.10);
  border-color: rgba(243, 156, 18, 0.25);
}

.admin-growth-footer-note {
  margin-top: 10px;
}

@media (max-width: 1000px) {
  .admin-growth-mini-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 650px) {
  .admin-growth-actions {
    flex-direction: column;
  }

  .admin-growth-actions select,
  .admin-growth-actions button {
    width: 100%;
    min-width: 0;
  }

  .admin-growth-mini-grid {
    grid-template-columns: 1fr;
  }

  .admin-growth-mini-stat strong {
    font-size: 23px;
  }
}


/* =========================================================
   CORRECTION ADMIN V30
   - Les cartes réduites restent ré-agrandissables
   - La liste des profils reste visible avec son bouton
   - Placement admin stable sans dépendre de nth-of-type
   ========================================================= */

main.admin-container {
  width: min(1380px, calc(100vw - 24px)) !important;
  max-width: calc(100vw - 24px) !important;
  margin: 22px auto !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(310px, 420px) minmax(0, 1fr) !important;
  gap: 22px !important;
  align-items: start !important;
}

main.admin-container > #adminStatus {
  grid-column: 1 / -1 !important;
}

main.admin-container > .admin-card {
  grid-column: auto !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 18px !important;
  overflow: hidden !important;
}

main.admin-container > .admin-growth-stats-card,
main.admin-container > .admin-profiles-card {
  grid-column: 1 / -1 !important;
}

main.admin-container > .admin-search-card,
main.admin-container > .admin-warnings-card,
main.admin-container > .admin-documents-card {
  grid-column: 1 !important;
}

main.admin-container > .admin-reports-card,
main.admin-container > .admin-maintenance-card,
main.admin-container > .admin-logs-card {
  grid-column: 2 !important;
}

.admin-section-header,
.simple-admin-header.admin-section-header,
main.admin-container .admin-section-header {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 14px !important;
  width: 100% !important;
  margin: 0 0 12px !important;
}

.admin-section-header > div,
.simple-admin-header.admin-section-header > div {
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

.admin-section-header h2,
.simple-admin-header.admin-section-header h2,
main.admin-container .admin-section-header h2 {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.15 !important;
}

.admin-section-header .small,
.simple-admin-header.admin-section-header .small {
  margin: 6px 0 0 !important;
}

.admin-card-content {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
}

.collapsed-card .admin-card-content {
  display: none !important;
}

.collapsed-card {
  min-height: 0 !important;
}

main.admin-container .collapse-card-btn,
main.admin-container button.collapse-card-btn {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 118px !important;
  margin: 0 !important;
  padding: 8px 12px !important;
  border-radius: 999px !important;
  font-size: 14px !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

.admin-profiles-card .admin-toggle-profiles-btn {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 160px !important;
  margin: 0 !important;
}

.admin-profiles-panel.hidden {
  display: none !important;
}

.admin-profiles-panel:not(.hidden) {
  display: block !important;
}

.admin-profile-tools {
  display: grid !important;
  grid-template-columns: minmax(220px, 1fr) minmax(180px, 260px) auto !important;
  gap: 10px !important;
  align-items: center !important;
  margin: 12px 0 !important;
}

.admin-profile-tools input,
.admin-profile-tools select,
.admin-profile-tools button {
  width: 100% !important;
  margin: 0 !important;
}

.admin-profile-quick-filters {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin: 10px 0 14px !important;
}

.admin-profile-quick-filters button {
  width: auto !important;
  margin: 0 !important;
}

#adminProfilesList {
  max-height: 620px !important;
  overflow-y: auto !important;
  padding-right: 8px !important;
}

@media (max-width: 1050px) {
  main.admin-container {
    grid-template-columns: 1fr !important;
  }

  main.admin-container > .admin-card,
  main.admin-container > .admin-growth-stats-card,
  main.admin-container > .admin-profiles-card,
  main.admin-container > .admin-search-card,
  main.admin-container > .admin-warnings-card,
  main.admin-container > .admin-documents-card,
  main.admin-container > .admin-reports-card,
  main.admin-container > .admin-maintenance-card,
  main.admin-container > .admin-logs-card {
    grid-column: 1 !important;
  }
}

@media (max-width: 700px) {
  .admin-section-header,
  .simple-admin-header.admin-section-header,
  main.admin-container .admin-section-header {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  main.admin-container .collapse-card-btn,
  main.admin-container button.collapse-card-btn,
  .admin-profiles-card .admin-toggle-profiles-btn {
    width: 100% !important;
  }

  .admin-profile-tools {
    grid-template-columns: 1fr !important;
  }
}


/* =========================================================
   PWA MOBILE PROPRE
   - bouton installer
   - meilleure gestion plein écran / téléphone
   ========================================================= */

.pwa-install-btn {
  position: fixed !important;
  left: max(14px, env(safe-area-inset-left)) !important;
  right: max(14px, env(safe-area-inset-right)) !important;
  bottom: max(14px, env(safe-area-inset-bottom)) !important;
  z-index: 100000 !important;

  width: auto !important;
  max-width: 520px !important;
  margin: 0 auto !important;

  padding: 14px 18px !important;
  border-radius: 999px !important;
  border: 4px solid white !important;

  background: linear-gradient(135deg, var(--main-color), var(--second-color)) !important;
  color: white !important;

  font-weight: 900 !important;
  font-size: 16px !important;
  text-align: center !important;

  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.26) !important;
}

.pwa-install-btn.hidden {
  display: none !important;
}

@media (display-mode: standalone) {
  body {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }

  .site-header {
    padding-top: calc(22px + env(safe-area-inset-top));
  }

  .admin-header {
    padding-top: calc(18px + env(safe-area-inset-top));
  }

  main,
  .admin-container {
    padding-bottom: calc(22px + env(safe-area-inset-bottom));
  }
}

@media (max-width: 650px) {
  .pwa-install-btn {
    font-size: 15px !important;
    padding: 13px 16px !important;
  }
}

/* =========================================================
   VERSION MOBILE PROPRE - ENTRE BEST FRIENDS
   À garder tout en bas du fichier style.css
   Ne modifie pas la version ordinateur.
   S'applique seulement aux petits écrans.
   ========================================================= */

@media (max-width: 650px) {

  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    font-size: 16px !important;
  }

  body {
    background: var(--bg-color) !important;
  }

  /* HAUT DE PAGE PLUS COMPACT */
  .site-header {
    padding: 18px 12px 20px !important;
  }

  .logo-header-box {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    text-align: center !important;
  }

  .site-logo {
    width: 88px !important;
    height: 88px !important;
    min-width: 88px !important;
    min-height: 88px !important;
    max-width: 88px !important;
    max-height: 88px !important;
    object-fit: contain !important;
    border-radius: 50% !important;
    background: white !important;
    padding: 5px !important;
    box-shadow: 0 5px 16px rgba(0, 0, 0, 0.22) !important;
  }

  .logo-header-box h1 {
    font-size: 27px !important;
    line-height: 1.08 !important;
    margin: 4px 0 0 !important;
  }

  .logo-header-box p {
    font-size: 14px !important;
    line-height: 1.25 !important;
    margin: 4px 0 0 !important;
  }

  /* PAGE PLUS LISIBLE SUR MOBILE */
  main {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 12px 10px 80px !important;
    display: block !important;
  }

  main > section {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 0 14px !important;
    padding: 15px !important;
    border-radius: 18px !important;
  }

  h2 {
    font-size: 21px !important;
    line-height: 1.18 !important;
    margin-bottom: 10px !important;
  }

  h3 {
    font-size: 18px !important;
    line-height: 1.2 !important;
  }

  p,
  .small {
    line-height: 1.35 !important;
  }

  /* PROFIL */
  .account-profile-line {
    flex-direction: row !important;
    text-align: left !important;
    align-items: center !important;
    gap: 12px !important;
  }

  .account-profile-line h2 {
    font-size: 21px !important;
  }

  .account-avatar {
    width: 82px !important;
    height: 82px !important;
  }

  #accountNotificationDot,
  .account-notification-dot {
    min-width: 24px !important;
    height: 24px !important;
    font-size: 13px !important;
    border-width: 3px !important;
  }

  #accountLikeHeartDot,
  .account-like-heart-dot {
    width: 36px !important;
    height: 36px !important;
  }

  #accountLikeHeartDot .account-like-heart-icon,
  .account-like-heart-icon {
    font-size: 39px !important;
    line-height: 36px !important;
  }

  #accountLikeHeartDot .account-like-heart-count,
  .account-like-heart-count {
    top: 10px !important;
    font-size: 12px !important;
  }

  /* CHAMPS ET BOUTONS */
  input,
  textarea,
  select {
    width: 100% !important;
    max-width: 100% !important;
    font-size: 16px !important;
    padding: 12px 13px !important;
    border-radius: 14px !important;
  }

  textarea {
    min-height: 86px !important;
  }

  button,
  .btn,
  .primary-btn,
  .secondary-btn,
  .danger-btn,
  [type="submit"] {
    width: 100% !important;
    min-height: 46px !important;
    font-size: 15px !important;
    border-radius: 14px !important;
    padding: 11px 12px !important;
  }

  .collapse-btn,
  .modal-close-btn,
  .color-btn,
  #emojiBox button,
  .comment-emoji-box button,
  .post-actions button,
  .comment-actions button,
  .member-actions-inline button {
    width: auto !important;
  }

  /* MES GROUPES : CARTES PLUS PROPRES */
  .groups-top-card {
    overflow: hidden !important;
  }

  .groups-horizontal-list {
    gap: 10px !important;
    padding: 8px 2px 12px !important;
  }

  .groups-horizontal-list .group-item,
  .group-item {
    flex: 0 0 82% !important;
    min-width: 82% !important;
    max-width: 82% !important;
    min-height: 118px !important;
    padding: 14px 54px 38px 18px !important;
    border-radius: 16px !important;
  }

  .group-item strong {
    font-size: 15px !important;
    line-height: 1.15 !important;
  }

  .group-item .small {
    font-size: 12px !important;
    line-height: 1.2 !important;
  }

  .group-message-badge {
    left: 18px !important;
    bottom: 8px !important;
    min-width: 24px !important;
    height: 24px !important;
    font-size: 13px !important;
    border-width: 3px !important;
  }

  .group-like-heart {
    right: 15px !important;
    bottom: 2px !important;
    width: 36px !important;
    height: 36px !important;
  }

  .group-like-heart-icon {
    font-size: 39px !important;
    line-height: 36px !important;
  }

  .group-like-heart-count {
    top: 10px !important;
    font-size: 12px !important;
  }

  /* MEMBRES */
  .member {
    padding: 10px !important;
  }

  .member-line {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }

  .member-name {
    min-width: 0 !important;
  }

  .member-actions-inline {
    width: 100% !important;
    justify-content: stretch !important;
  }

  .member-actions-inline button {
    flex: 1 1 auto !important;
    min-width: 110px !important;
  }

  /* PUBLICATIONS */
  .posts-scroll-zone {
    max-height: none !important;
    overflow: visible !important;
    padding-right: 0 !important;
  }

  .post {
    padding: 12px !important;
    border-radius: 15px !important;
  }

  .post-header,
  .comment-header {
    flex-direction: column !important;
    gap: 5px !important;
  }

  .post-text {
    font-size: 15px !important;
    line-height: 1.38 !important;
  }

  .post-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  .post-actions button {
    width: 100% !important;
    font-size: 13px !important;
    padding: 9px 8px !important;
  }

  /* COMMENTAIRES */
  .comment {
    padding: 9px !important;
    border-radius: 12px !important;
  }

  .comment-form {
    flex-direction: column !important;
    gap: 8px !important;
  }

  .comment-form button {
    width: 100% !important;
  }

  .comment-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 7px !important;
  }

  .comment-actions button {
    width: 100% !important;
    font-size: 13px !important;
  }

  /* MODALES / POPUPS */
  .modal-overlay {
    align-items: flex-start !important;
    padding: 10px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .modal-box,
  .modal-content,
  .member-profile-modal-box,
  .private-chat-modal-box {
    width: 100% !important;
    max-width: calc(100vw - 20px) !important;
    max-height: calc(100dvh - 20px) !important;
    overflow-y: auto !important;
    padding: 16px !important;
    border-radius: 20px !important;
  }

  .modal-box h2 {
    padding-right: 38px !important;
  }

  .modal-close-btn {
    min-width: 34px !important;
    width: 34px !important;
    height: 34px !important;
    padding: 0 !important;
    font-size: 13px !important;
  }

  /* PROFIL MEMBRE */
  .member-profile-header {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 10px !important;
  }

  .member-profile-avatar {
    width: 76px !important;
    height: 76px !important;
  }

  .member-profile-actions {
    flex-direction: column !important;
  }

  /* MESSAGES PRIVÉS */
  .private-chat-title-content {
    gap: 8px !important;
  }

  .private-chat-title-avatar {
    width: 36px !important;
    height: 36px !important;
  }

  .private-chat-messages,
  #privateChatMessages {
    min-height: 220px !important;
    max-height: 42dvh !important;
    padding: 10px !important;
    border-radius: 15px !important;
    overflow-y: auto !important;
  }

  .private-message-bubble {
    max-width: 92% !important;
    font-size: 14px !important;
    border-radius: 16px !important;
  }

  .private-chat-send-line {
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
  }

  #privateChatInput,
  .private-chat-send-line textarea {
    width: 100% !important;
    min-height: 82px !important;
    max-height: 145px !important;
    font-size: 16px !important;
  }

  #privateChatSendBtn,
  .private-chat-send-line button {
    width: 100% !important;
    min-height: 48px !important;
  }

  /* ADMIN SUR MOBILE */
  .admin-actions {
    flex-direction: column !important;
  }

  .admin-actions button {
    width: 100% !important;
  }

  .admin-scroll-zone,
  #reportsList,
  #adminLogsList {
    max-height: 360px !important;
  }

  .warnings-table-container {
    overflow-x: auto !important;
  }

  /* PWA */
  .pwa-install-btn {
    width: calc(100% - 20px) !important;
    left: 10px !important;
    right: 10px !important;
    bottom: calc(10px + env(safe-area-inset-bottom)) !important;
    font-size: 15px !important;
    padding: 12px 14px !important;
    border-radius: 16px !important;
  }
}

/* Très petits téléphones */
@media (max-width: 390px) {
  .logo-header-box h1 {
    font-size: 24px !important;
  }

  .site-logo {
    width: 78px !important;
    height: 78px !important;
    min-width: 78px !important;
    min-height: 78px !important;
  }

  .post-actions,
  .comment-actions {
    grid-template-columns: 1fr !important;
  }

  .groups-horizontal-list .group-item,
  .group-item {
    flex: 0 0 88% !important;
    min-width: 88% !important;
    max-width: 88% !important;
  }
}