/* ========== NAVIGATION ========== */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: #01152d;
  border-bottom: 1px solid rgba(183, 144, 68, 0.25);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.25);
  transition: all 0.3s ease;
}

.nav-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0.5rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
  text-decoration: none;
  color: var(--cream);
}

.brand-mark {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--navy-900);
  border: 1.5px solid var(--gold-500);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'StraightHyphen', 'Cormorant Garamond', serif;
  font-weight: 700;
  color: var(--cream);
  font-size: 1.1rem;
  letter-spacing: 0.02em;
  position: relative;
}

.brand-mark::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid rgba(183, 144, 68, 0.3);
}

.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-name { font-family: 'StraightHyphen', 'Cormorant Garamond', serif; font-weight: 600; font-size: 1.2rem; color: var(--cream); letter-spacing: 0.05em; }
.brand-sub { font-size: 0.65rem; color: var(--gold-400); letter-spacing: 0.18em; text-transform: uppercase; font-weight: 500; }

.nav-links { display: flex; gap: 2rem; align-items: center; list-style: none; }

.nav-link {
  background: none; border: none; cursor: pointer;
  font-family: 'Manrope', sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
  color: rgba(245, 239, 227, 0.75);
  letter-spacing: 0.02em;
  transition: color 0.2s ease;
  position: relative;
  padding: 0.5rem 0;
}

.nav-link:hover, .nav-link.active { color: var(--gold-400); }
.nav-link.active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0; right: 0;
  height: 1px;
  background: var(--gold-500);
}

.nav-cta {
  background: var(--gold-500);
  color: var(--navy-950);
  padding: 0.65rem 1.4rem;
  border-radius: 2px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  transition: all 0.25s ease;
}

.nav-cta:hover { background: var(--gold-400); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(183, 144, 68, 0.3); }

/* Variante du CTA pour la déconnexion : ton plus discret, contour doré */
.nav-cta.nav-logout {
  background: transparent;
  color: var(--gold-400);
  border: 1px solid var(--gold-500);
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
.nav-cta.nav-logout:hover {
  background: var(--gold-500);
  color: var(--navy-950);
  box-shadow: 0 6px 20px rgba(183, 144, 68, 0.3);
}
.nav-cta.nav-logout svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* ========== CENTRE DE NOTIFICATIONS ========== */
.notif-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* Conteneur de la cloche notifications quand elle est sortie de
   .nav-links (cf. index.html). Visible en permanence à côté du burger
   sur mobile, et juste avant le burger en desktop. La cloche reste donc
   accessible aux membres connectés sans devoir ouvrir le menu hamburger.

   Sur desktop, la cloche est collée aux onglets (groupe onglets+cloche
   poussé à droite, logo seul à gauche) plutôt que flottée à l'extrême
   droite par le `space-between` natif de .nav-inner. */
.nav-notif-standalone {
  display: inline-flex;
  align-items: center;
  margin-left: auto;
  margin-right: 0.6rem;
}

@media (min-width: 769px) {
  /* En desktop, on veut le groupe "onglets + cloche" collé à droite,
     avec un espacement naturel entre les deux. Pour ça, on pousse les
     onglets contre la cloche via margin-left: auto sur .nav-links —
     le logo reste seul à gauche, le groupe onglets/cloche reste à droite
     avec une distance de 1.2rem (équivalent gap) au lieu de l'énorme vide
     créé par justify-content: space-between sur .nav-inner. */
  .nav-links {
    margin-left: auto;
  }
  .nav-notif-standalone {
    margin-left: 1.2rem;
    margin-right: 0;
  }
}

.notif-bell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  background: transparent;
  border: 1px solid rgba(183, 144, 68, 0.35);
  border-radius: 50%;
  color: var(--gold-400);
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

.notif-bell:hover {
  background: rgba(183, 144, 68, 0.12);
  color: var(--gold-300);
  border-color: var(--gold-500);
}

.notif-bell svg {
  width: 17px;
  height: 17px;
}

.notif-bell.has-unread svg {
  color: var(--gold-400);
}

.notif-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: #c4302b;
  color: white;
  border-radius: 9px;
  font-size: 10px;
  font-weight: 700;
  display: none;
  align-items: center;
  justify-content: center;
  letter-spacing: 0;
  border: 2px solid var(--navy-950);
  font-family: 'Manrope', sans-serif;
  line-height: 1;
}

.notif-badge.is-visible {
  display: inline-flex;
}

.notif-panel {
  position: absolute;
  top: calc(100% + 14px);
  right: 0;
  width: 380px;
  max-width: calc(100vw - 2rem);
  background: var(--cream);
  border: 1px solid rgba(183, 144, 68, 0.35);
  border-radius: 4px;
  box-shadow: 0 20px 60px rgba(1, 21, 45, 0.25);
  z-index: 110;
  display: none;
  overflow: hidden;
  color: var(--ink);
}

.notif-panel.is-open {
  display: block;
  animation: notifPanelIn 0.18s ease-out;
}

@keyframes notifPanelIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.notif-panel::before {
  content: '';
  position: absolute;
  top: -7px;
  right: 14px;
  width: 12px;
  height: 12px;
  background: var(--cream);
  border-top: 1px solid rgba(183, 144, 68, 0.35);
  border-left: 1px solid rgba(183, 144, 68, 0.35);
  transform: rotate(45deg);
}

.notif-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.2rem 0.8rem;
  border-bottom: 1px solid rgba(183, 144, 68, 0.18);
  background: var(--cream);
  position: relative;
}

.notif-panel-title {
  font-family: 'StraightHyphen', 'Cormorant Garamond', serif;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--navy-950);
  margin: 0;
}

.notif-panel-count {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--gold-600);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.notif-panel-list {
  max-height: 420px;
  overflow-y: auto;
}

.notif-item {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 0.95rem 1.2rem;
  border-bottom: 1px solid rgba(183, 144, 68, 0.12);
  cursor: pointer;
  transition: background 0.15s ease;
  text-align: left;
  width: 100%;
  background: transparent;
  border-left: none;
  border-right: none;
  border-top: none;
  font-family: inherit;
  color: inherit;
}

.notif-item:hover {
  background: rgba(183, 144, 68, 0.06);
}

.notif-item:last-child {
  border-bottom: none;
}

.notif-item.is-unread {
  background: rgba(183, 144, 68, 0.08);
}

.notif-item.is-unread:hover {
  background: rgba(183, 144, 68, 0.13);
}

.notif-item-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--navy-900);
  color: var(--gold-400);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.notif-item-icon svg {
  width: 16px;
  height: 16px;
}

/* Variantes par type de notification */
.notif-item-icon.notif-icon-accept {
  background: rgba(76, 145, 80, 0.16);
  color: #2f6c33;
}

.notif-item-icon.notif-icon-decline {
  background: rgba(196, 69, 61, 0.14);
  color: var(--red-700);
}

/* Mise en relation effectuée : doré plus saturé pour évoquer la réussite */
.notif-item-icon.notif-icon-effective {
  background: rgba(183, 144, 68, 0.22);
  color: var(--gold-600, #8d6520);
}

/* Adhésion à valider (admin) : navy avec contour doré pour le distinguer */
.notif-item-icon.notif-icon-admin {
  background: var(--navy-950);
  color: var(--gold-400);
  box-shadow: inset 0 0 0 1.5px rgba(183, 144, 68, 0.5);
}

/* Affaire conclue suite à votre mise en relation : doré profond + halo
   plus prononcé pour évoquer la valeur générée par votre recommandation. */
.notif-item-icon.notif-icon-business {
  background: rgba(183, 144, 68, 0.18);
  color: var(--gold-600, #8d6520);
  box-shadow: inset 0 0 0 1.5px rgba(183, 144, 68, 0.45);
}

.notif-item-body {
  flex: 1;
  min-width: 0;
}

.notif-item-title {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--navy-950);
  margin: 0 0 0.15rem 0;
  line-height: 1.3;
}

.notif-item-subtitle {
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.4;
  margin: 0 0 0.25rem 0;
  /* Tronque proprement sur 2 lignes */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.notif-item-time {
  font-size: 0.7rem;
  color: var(--gold-600);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 500;
}

.notif-item-dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  background: var(--gold-500);
  border-radius: 50%;
  margin-top: 0.55rem;
}

.notif-empty {
  padding: 2rem 1.2rem;
  text-align: center;
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.5;
}

.notif-empty svg {
  width: 32px;
  height: 32px;
  color: rgba(183, 144, 68, 0.4);
  margin-bottom: 0.6rem;
}

.notif-panel-footer {
  padding: 0.7rem 1.2rem;
  text-align: center;
  border-top: 1px solid rgba(183, 144, 68, 0.18);
  background: rgba(245, 239, 227, 0.5);
}

.notif-panel-footer button {
  background: none;
  border: none;
  color: var(--gold-600);
  font-family: 'Manrope', sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 0.3rem 0.8rem;
  transition: color 0.2s ease;
}

.notif-panel-footer button:hover {
  color: var(--navy-950);
}

/* Mobile : panneau plein écran depuis le bas.
   Le breakpoint 768px correspond exactement à celui où la nav-links se replie
   dans le menu burger : à partir de cette largeur, la cloche est dans un
   menu vertical pleine largeur, et un panneau "absolute right:0; width:380px"
   se comporte mal (débordement variable selon la position du li parent).
   En passant en "position: fixed" plein viewport, on garantit qu'il ne peut
   plus rien déborder. C'est aussi l'UX standard mobile (Instagram, Twitter…). */
@media (max-width: 768px) {
  .notif-panel {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    border-radius: 4px 4px 0 0;
    box-shadow: 0 -10px 40px rgba(1, 21, 45, 0.3);
  }
  .notif-panel::before {
    display: none;
  }
  .notif-panel-list {
    max-height: 60vh;
  }
  /* Sur mobile, on ajoute un overlay sombre derrière le panneau pour le
     détacher visuellement du menu burger ouvert en arrière-plan */
  .notif-panel.is-open::after {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(1, 21, 45, 0.5);
    z-index: -1;
    pointer-events: none;
  }
}

.burger {
  display: none;
  background: none; border: none;
  color: var(--cream);
  cursor: pointer;
  padding: 0.5rem;
}

/* ============================================================================
   Critères de mot de passe (formulaires d'adhésion et de reset)
   ============================================================================
   Encart visuel placé au-dessus du champ mot de passe pour indiquer les
   exigences de complexité (Supabase : Lowercase, Uppercase, Digits, Symbols
   + min 8 caractères). Discret mais clair, sur fond bleuté pour rester
   cohérent avec les autres encarts d'information du site.
   ============================================================================ */
.password-rules {
  background: rgba(44, 70, 116, 0.06);
  border-left: 3px solid #2c4674;
  padding: 0.7rem 1rem 0.7rem 1.1rem;
  border-radius: 2px;
  margin: 0 0 1rem 0;
  font-size: 0.82rem;
  color: var(--ink);
  line-height: 1.5;
}
.password-rules strong {
  display: block;
  font-weight: 600;
  margin-bottom: 0.35rem;
  color: var(--navy-900);
}
.password-rules ul {
  margin: 0;
  padding-left: 1.2rem;
  list-style: disc;
}
.password-rules li {
  margin: 0.1rem 0;
}