html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
}

body {
  font-family: Arial, sans-serif;
  transition: background-color 0.3s;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  min-height: 100vh;
}

/* ============================================================
   BOUTONS D'ACTION DU PROFIL
   ============================================================ */
.profil-actions {
  position: fixed;
  top: 70px;
  right: 20px;
  z-index: 1; /* Bien en-dessous de la navbar qui est à 9000 */
  display: flex;
  gap: 10px;
}

/* MASQUER LES BOUTONS quand trophées ou points en plein écran */
#trophees-section:not([style*="display: none"]) ~ .profil-actions,
#trophees-section[style*="display: block"] ~ .profil-actions,
#points-section:not([style*="display: none"]) ~ .profil-actions,
#points-section[style*="display: block"] ~ .profil-actions {
  display: none !important;
}

/* Alternative: cacher quand le body a une classe spéciale */
body.trophees-fullscreen .profil-actions,
body.points-fullscreen .profil-actions {
  display: none !important;
  visibility: hidden !important;
}

/* CLASSE POUR MASQUER LES BOUTONS QUAND TROPHEES/POINTS OUVERTS */
.profil-actions.hidden-for-fullscreen {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.profil-actions button {
  padding: 10px 20px;
  border: none;
  border-radius: 8px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.profil-actions button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

#profile-settings {
  width: 40px;
  height: 40px;
  padding: 0;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M19.14,12.94c0.04-0.3,0.06-0.61,0.06-0.94c0-0.32-0.02-0.64-0.07-0.94l2.03-1.58c0.18-0.14,0.23-0.41,0.12-0.61 l-1.92-3.32c-0.12-0.22-0.37-0.29-0.59-0.22l-2.39,0.96c-0.5-0.38-1.03-0.7-1.62-0.94L14.4,2.81c-0.04-0.24-0.24-0.41-0.48-0.41 h-3.84c-0.24,0-0.43,0.17-0.47,0.41L9.25,5.35C8.66,5.59,8.12,5.92,7.63,6.29L5.24,5.33c-0.22-0.08-0.47,0-0.59,0.22L2.74,8.87 C2.62,9.08,2.66,9.34,2.86,9.48l2.03,1.58C4.84,11.36,4.8,11.69,4.8,12s0.02,0.64,0.07,0.94l-2.03,1.58 c-0.18,0.14-0.23,0.41-0.12,0.61l1.92,3.32c0.12,0.22,0.37,0.29,0.59,0.22l2.39-0.96c0.5,0.38,1.03,0.7,1.62,0.94l0.36,2.54 c0.05,0.24,0.24,0.41,0.48,0.41h3.84c0.24,0,0.44-0.17,0.47-0.41l0.36-2.54c0.59-0.24,1.13-0.56,1.62-0.94l2.39,0.96 c0.22,0.08,0.47,0,0.59-0.22l1.92-3.32c0.12-0.22,0.07-0.47-0.12-0.61L19.14,12.94z M12,15.6c-1.98,0-3.6-1.62-3.6-3.6 s1.62-3.6,3.6-3.6s3.6,1.62,3.6,3.6S13.98,15.6,12,15.6z"/></svg>');
  background-size: 24px 24px;
  background-position: center;
  background-repeat: no-repeat;
}

#profile-settings:hover {
  background-color: #5568d3;
}

/* Wrapper pour le fond du profil (couvre TOUT l'écran) */
.profil-wrapper {
  width: 100%;
  min-height: 100vh;
  position: relative;
  padding: 0;
  margin: 0;
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* Conteneur profil */
.profil {
  max-width: 900px;
  margin: 100px auto 30px auto;
  border-radius: 10px;
  overflow: hidden;
  transition: background 0.3s, box-shadow 0.3s;
}

/* Bandeau bleu secondaire (À propos, Photos, etc.) */
.profil-nav-secondaire {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  transition: background-color 0.3s;
  height: 44px;
  gap: 10px;
}

.profil-nav-secondaire a {
  color: white;
  font-weight: bold;
  text-decoration: none;
  padding: 0 15px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease;
  min-width: 140px;
}

#commentaires-link {
  min-width: 180px;
}

.profil-nav-secondaire a.active {
  color: #ffd700;
}

/* Haut du profil : photo + infos */
.profil-haut {
  display: flex;
  align-items: center;
  padding: 20px;
  gap: 20px;
  min-height: 150px;
  position: relative;
}

.photo-de-profil {
  width: 130px;
  height: 130px;
  border-radius: 20px;
  object-fit: cover;
  border: 4px solid white;
  transition: border-color 0.3s;
  margin-top: -10px;
}

.infos-haut {
  flex: 1;
  margin-top: -30px;
  position: relative;
  z-index: 5;
}

/* Modification ici pour mettre l'âge à côté du pseudo */
#pseudo {
  font-size: clamp(1.1em, 4vw, 2em);
  font-weight: bold;
  margin-bottom: 10px;
  word-break: break-word;
  overflow-wrap: anywhere;
  line-height: 1.2;
}

#display-age {
  font-size: 0.7em;
  display: inline !important;
  visibility: visible !important;
  opacity: 1 !important;
  transition: color 0.3s;
}

.last-connexion {
  font-size: 0.9em;
  display: block !important;
  margin-top: 8px;
  font-weight: 400;
  color: #888;
  opacity: 0.7;
  transition: color 0.3s;
}

/* Conteneur biographie + infos perso côte à côte */
.bio-infos-container {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  padding: 20px;
  max-width: 900px;
  margin: 0 auto;
  box-sizing: border-box;
}

/* Biographie */
.bio-container {
  flex: 2;
  border-radius: 10px;
  padding: 15px 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  transition: background-color 0.3s, border-color 0.3s;
}

.bio-container h2 {
  margin: 0 0 8px 0;
  font-size: 1.4em;
  font-weight: bold;
  color: #9c27b0 !important;
  transition: color 0.3s;
}

.bio-container p#bio-text {
  margin: 0;
  line-height: 1.4;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

.bio-container textarea#bio {
  margin-top: 5px;
  resize: vertical;
  min-height: 100px;
  font-size: 16px;
  padding: 8px;
  border-radius: 6px;
  font-family: Arial, sans-serif;
  box-sizing: border-box;
  transition: background-color 0.3s, border-color 0.3s, color 0.3s;
}

/* Droite : uniquement infos personnelles */
.droite-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Infos personnelles */
.infos-personnelles {
  border-radius: 10px;
  padding: 20px;
  box-sizing: border-box;
  font-size: 16px;
  transition: background-color 0.3s, border-color 0.3s, color 0.3s;
}

.infos-personnelles h2 {
  margin-top: 0;
  margin-bottom: 15px;
  font-weight: bold;
  color: #9c27b0 !important;
  transition: color 0.3s;
}

.infos-personnelles p {
  margin: 8px 0;
}

/* Centres d'intérêt */
.centres-interets-container {
  max-width: 900px;
  margin: 0 auto 30px auto;
  padding: 15px 20px;
  border-radius: 10px;
  box-sizing: border-box;
  width: calc(100% - 40px);
  transition: background-color 0.3s, border-color 0.3s;
}

.centres-interets-container h2 {
  margin-top: 0;
  margin-bottom: 10px;
  font-weight: bold;
  font-size: 1.4em;
  color: #9c27b0 !important;
  transition: color 0.3s;
}

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

.centres-interets li {
  display: inline-block;
  padding: 5px 10px;
  margin: 5px 5px 0 0;
  border-radius: 20px;
  font-size: 14px;
  transition: background 0.3s;
}

.centres-interets li span {
  margin-left: 8px;
  color: red;
  cursor: pointer;
  font-weight: bold;
}

/* Masquer les croix en mode lecture */
.interest-delete {
  display: none !important;
}

body.edit-mode .interest-delete {
  display: inline !important;
}

/* IMPORTANT: Forcer l'affichage des croix même avec edit-only */
body.edit-mode .interest-delete.edit-only {
  display: inline !important;
}

/* Formulaire ajout centres d'intérêt */
#add-interest-form {
  display: none !important;
  gap: 8px;
  align-items: center;
}

body.edit-mode #add-interest-form {
  display: flex !important;
}

#add-interest-form input[type="text"] {
  padding: 6px;
  border-radius: 6px;
  flex: 1;
  max-width: calc(100% - 95px);
  font-size: 14px;
  box-sizing: border-box;
  transition: background-color 0.3s, border-color 0.3s, color 0.3s;
}

#add-interest-form button {
  padding: 6px 12px;
  border: none;
  background-color: #008cff;
  color: white;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  vertical-align: middle;
}

#add-interest-form button:hover {
  background-color: #006fd1;
}

/* Bouton envoyer message */
#send-message-btn {
  margin: 20px auto;
  display: block;
  padding: 12px 25px;
  background-color: #008cff;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 16px;
}

#send-message-btn:hover {
  background-color: #006fd1;
}

/* Zone édition */
.edit-only {
  display: none !important;
}

body.edit-mode .edit-only {
  display: block !important;
}

body.edit-mode #add-interest-form {
  display: flex !important;
  gap: 8px;
  align-items: center;
}

body.edit-mode .read-only {
  display: none !important;
}

/* Container global de la zone d'édition */
.edit-zone.edit-only {
  max-width: 600px;
  margin: 20px auto;
  padding: 10px 20px;
  box-sizing: border-box;
}

.edit-zone.edit-only > div {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 20px;
  padding-left: 0;
}

.edit-zone.edit-only label {
  font-weight: bold;
  white-space: nowrap;
  margin-left: 15px;
  min-width: auto;
  transition: color 0.3s;
}

.edit-zone.edit-only input[type="text"],
.edit-zone.edit-only input[type="number"],
.edit-zone.edit-only select {
  flex-grow: 1;
  max-width: 380px;
  margin: 0;
  padding: 8px;
  font-size: 15px;
  border-radius: 6px;
  box-sizing: border-box;
  text-align: center;
  display: block;
  transition: background-color 0.3s, border-color 0.3s, color 0.3s;
}

#edit-genre-autre,
#edit-orientation-autre,
#edit-religion-autre {
  margin-left: 15px;
  margin-top: 6px;
  display: none;
  width: calc(100% - 15px);
  padding: 8px;
  font-size: 15px;
  border-radius: 6px;
  box-sizing: border-box;
  text-align: center;
  transition: background-color 0.3s, border-color 0.3s, color 0.3s;
}

.edit-zone.edit-only input[type="file"] {
  margin-left: 15px;
  display: block;
  max-width: 380px;
  width: 100%;
}

/* Responsive (petits écrans) */
@media (max-width: 700px) {
  .edit-zone.edit-only {
    max-width: 100%;
    padding: 10px;
  }

  .edit-zone.edit-only > div {
    flex-direction: column;
    align-items: flex-start;
    padding-left: 0;
    margin-bottom: 15px;
    gap: 8px;
  }

  .edit-zone.edit-only > div label {
    margin-left: 0;
  }

  #edit-genre-autre,
  #edit-orientation-autre,
  #edit-religion-autre,
  .edit-zone.edit-only input[type="file"],
  .edit-zone.edit-only input[type="text"],
  .edit-zone.edit-only input[type="number"],
  .edit-zone.edit-only select {
    margin-left: 0;
    width: 100%;
    text-align: left;
  }
}

/* Fond personnalisé de la biographie */
#bio-container {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Bouton Ajouter ami - desktop */
#add-friend-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Positionnement des boutons like/dislike */
.profil-likes-container {
  position: absolute;
  top: 55px;
  right: 20px;
  z-index: 100;
}

/* Style de la dernière connexion */
.derniere-connexion {
  margin: 5px 0 0 0;
  font-size: 0.9em;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: nowrap;
  position: relative;
}

/* Badge total de trophées */
.trophees-total {
  margin-top: 35px;
}

.trophee-badge-total {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 700;
  color: white;
  background: linear-gradient(135deg, #FFD700 0%, #FFF59D 50%, #FFB700 100%);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
}

.trophee-badge-total:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.trophee-count-total {
  font-weight: 800;
  font-size: 15px;
}
/* ============================================================
   RESPONSIVE - TABLETTE (≤ 900px)
   ============================================================ */

@media (max-width: 900px) {
  .profil {
    max-width: 100%;
    margin: 80px 10px 30px 10px;
    border-radius: 8px;
  }

  .bio-infos-container {
    flex-direction: column;
    gap: 16px;
    padding: 15px;
  }

  .droite-container {
    width: 100%;
  }

  .centres-interets-container {
    width: calc(100% - 20px);
    margin: 0 10px 20px 10px;
    padding: 15px;
  }

  /* Boutons d'action */
  .profil-actions {
    top: 68px;
    right: 10px;
    gap: 6px;
  }

  .profil-actions button {
    padding: 8px 14px;
    font-size: 0.9em;
  }

  #add-friend-btn {
    top: 15px;
    right: 15px;
  }

  .profil-likes-container {
    top: 50px;
    right: 15px;
  }
}

/* ============================================================
   RESPONSIVE - MOBILE (≤ 640px)
   ============================================================ */

@media (max-width: 640px) {
  .profil {
    margin: 70px 0 0 0;
    border-radius: 0;
    overflow: visible;
  }

  /* Header profil : photo + infos empilés */
  .profil-haut {
    flex-direction: column;
    align-items: flex-start;
    padding: 15px;
    gap: 12px;
    min-height: unset;
  }

  .photo-de-profil {
    width: 90px;
    height: 90px;
    border-radius: 16px;
    margin-top: 0;
    align-self: center;
  }

  .infos-haut {
    width: 100%;
    margin-top: 0;
    text-align: center;
  }

  .derniere-connexion {
    justify-content: center;
  }

  .trophees-total {
    margin-top: 10px;
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
  }

  /* Like/Dislike : repositionner sous le header */
  .profil-likes-container {
    position: static;
    display: flex;
    justify-content: center;
    gap: 12px;
    width: 100%;
    padding: 8px 0 4px;
    order: 10; /* Pousse en bas du flex */
  }

  /* Bouton Ajouter ami : sous trophées/points, au-dessus de la nav secondaire */
  #add-friend-btn {
    position: static !important;
    top: unset !important;
    right: unset !important;
    order: 5; /* Après infos-haut (order:0/dom:2), avant likes (order:10) */
    align-self: center;
    width: auto !important;
    max-width: 240px;
    padding: 8px 18px;
    font-size: 0.85em;
    margin: 4px 0;
  }

  /* Nav secondaire : compacte sur mobile */
  .profil-nav-secondaire {
    height: 28px;
    gap: 0;
    padding: 0;
  }

  .profil-nav-secondaire a {
    white-space: nowrap;
    padding: 0 8px;
    font-size: 0.65em;
    min-width: 60px !important;
  }
  
  #commentaires-link {
    min-width: 100px !important;
  }

  /* Bio + infos en colonne */
  .bio-infos-container {
    flex-direction: column;
    padding: 12px;
    gap: 12px;
  }

  .bio-container,
  .infos-personnelles {
    width: 100%;
    box-sizing: border-box;
  }

  /* Centres d'intérêt */
  .centres-interets-container {
    margin: 0 12px 16px 12px;
    width: calc(100% - 24px);
    border-radius: 10px;
    box-sizing: border-box;
    padding: 12px;
  }

  /* Boutons d'actions : haut à droite, compacts */
  .profil-actions {
    top: 68px;
    right: 10px;
    bottom: unset;
    flex-direction: row;
    align-items: center;
    gap: 6px;
  }

  .profil-actions button:not(#profile-settings) {
    padding: 5px 10px;
    font-size: 0.78em;
    border-radius: 16px;
    white-space: nowrap;
  }

  #profile-settings {
    width: 30px;
    height: 30px;
    background-size: 16px 16px;
    flex-shrink: 0;
  }

  /* Bouton message */
  #send-message-btn {
    width: calc(100% - 24px);
    margin: 12px;
  }

  /* Status dropdown ne déborde pas */
  #status-dropdown {
    left: 0 !important;
    right: auto !important;
  }
}

/* ============================================================
   RESPONSIVE - TRÈS PETIT MOBILE (≤ 380px)
   ============================================================ */

@media (max-width: 380px) {
  .profil-nav-secondaire a {
    padding: 10px 10px;
    font-size: 0.8em;
  }
  .photo-de-profil {
    width: 76px;
    height: 76px;
  }

  .profil-actions {
    top: 68px;
    right: 6px;
  }

  .profil-actions button:not(#profile-settings) {
    font-size: 0.72em;
    padding: 4px 8px;
  }
}

/* ============================================================
   BOUTON MODIFIER PROFIL - ICÔNE SEULE SUR MOBILE
   ============================================================ */

@media (max-width: 640px) {
  #toggle-edit {
    width: 30px;
    height: 30px;
    padding: 0;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    position: relative;
    font-size: 0 !important;
    color: transparent !important;
  }

  /* Icône crayon par-dessus */
  #toggle-edit::after {
    content: '✏️';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: white;
  }
}

/* Badge mail sur bouton paramètres */
.settings-btn-wrapper {
    position: relative;
    display: inline-flex;
}

.settings-mail-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #ff4444;
    color: #fff;
    border-radius: 20px;
    padding: 2px 5px;
    min-width: 18px;
    height: 18px;
    font-size: 10px;
    font-weight: 700;
    font-family: Arial, sans-serif;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #ffffff;
    box-shadow: 0 0 8px rgba(255, 68, 68, 0.7);
    animation: pulse 2s infinite;
    pointer-events: none;
    z-index: 10;
}