/* ══════════════════════════════════
   POLICES (self-hosted)
   ══════════════════════════════════ */

/* Cormorant — 300 normal */
@font-face {
  font-family: 'Cormorant';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/cormorant-v24-latin_latin-ext-300.woff2') format('woff2');
}

/* Cormorant — 300 italic */
@font-face {
  font-family: 'Cormorant';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/cormorant-v24-latin_latin-ext-300italic.woff2') format('woff2');
}

/* Cormorant — 400 normal */
@font-face {
  font-family: 'Cormorant';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/cormorant-v24-latin_latin-ext-regular.woff2') format('woff2');
}

/* Cormorant — 400 italic */
@font-face {
  font-family: 'Cormorant';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/cormorant-v24-latin_latin-ext-italic.woff2') format('woff2');
}

/* Jost — 300 */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/jost-v20-latin_latin-ext-300.woff2') format('woff2');
}

/* Jost — 400 */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/jost-v20-latin_latin-ext-regular.woff2') format('woff2');
}

/* ══════════════════════════════════
   VARIABLES CSS COMMUNES
   ══════════════════════════════════ */

:root {
  --bg:           #060606;
  --bg2:          #0e0d0b;
  --white:        #f0ece4;
  --off-white:    #c8c3bc;
  --grey:         #b0aaa4;
  --grey-sub:     #aaaaaa;
  --border:       #2c2824;
  --border-faint: #1a1816;
}

/* ══════════════════════════════════
   RESET & BASE
   ══════════════════════════════════ */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--white);
  font-family: 'Jost', sans-serif;
  font-weight: 400;
  font-size: 16px;
  overflow-x: hidden;
}

/* Grain overlay (texture subtile sur toute la page) */
body::before {
  content: '';
  position: fixed; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none; z-index: 500; opacity: 0.45;
}

/* ══════════════════════════════════
   HEADER
   ══════════════════════════════════ */

header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 48px;
  background: var(--bg);
  border-bottom: 1px solid var(--border-faint);
}

.logo {
  display: flex; align-items: center; gap: 11px;
  text-decoration: none;
}

.logo-name {
  font-family: 'Cormorant', serif;
  font-size: 22px; font-weight: 300;
  letter-spacing: 0.14em; color: var(--white);
}
.logo-name span { color: var(--grey-sub); }

.btn-connect {
  font-family: 'Jost', sans-serif;
  font-weight: 300; font-size: 12px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--off-white); text-decoration: none;
  padding: 10px 22px;
  border: 1px solid var(--border);
  transition: border-color 0.3s, color 0.3s;
  white-space: nowrap;
}
.btn-connect:hover { border-color: var(--grey-sub); color: var(--white); }

/* ══════════════════════════════════
   FOOTER
   ══════════════════════════════════ */

footer {
  background: var(--bg);
  border-top: 1px solid var(--border);
  padding: 32px 48px;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 20px;
}

.footer-copy {
  font-family: 'Cormorant', serif;
  font-size: 15px; font-weight: 300; letter-spacing: 0.1em; color: var(--grey);
}

.footer-nav { display: flex; gap: 28px; flex-wrap: wrap; }
.footer-nav a {
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--grey-sub); text-decoration: none; transition: color 0.2s;
}
.footer-nav a:hover { color: var(--grey); }

/* ══════════════════════════════════
   REVEAL (animation au scroll)
   ══════════════════════════════════ */

.reveal {
  opacity: 0; transform: translateY(28px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ══════════════════════════════════
   BOUTON CTA (appel à l'action principal)
   Utilisé sur les landing pages, modales de succès, etc.
   ══════════════════════════════════ */

.btn-cta {
  display: inline-block;
  background: var(--off-white); color: var(--bg);
  font-family: 'Jost', sans-serif; font-weight: 400; font-size: 12px;
  letter-spacing: 0.2em; text-transform: uppercase;
  padding: 17px 52px; text-decoration: none;
  border: none; cursor: pointer;
  transition: opacity 0.3s;
}
.btn-cta:hover { opacity: 0.82; }

/* ══════════════════════════════════
   SECTION "COMPTE" (CTA inscription + connexion)
   ══════════════════════════════════ */

.section-account {
  text-align: center;
  padding: 80px 24px 96px;
  border-top: 1px solid var(--border-faint);
}
.section-account h2 {
  font-family: 'Cormorant', serif;
  font-size: clamp(26px, 4vw, 44px); font-weight: 300;
  letter-spacing: 0.02em; color: var(--white);
  margin-bottom: 12px;
}

.account-tagline {
  font-size: 15px; font-weight: 300; letter-spacing: 0.1em;
  color: var(--grey); margin-bottom: 48px;
}

.account-login-hint {
  display: block; margin-top: 20px;
  font-size: 14px; color: var(--grey-sub);
  letter-spacing: 0.04em;
}
.account-login-hint a {
  color: var(--grey); text-decoration: none;
  border-bottom: 1px solid var(--border); padding-bottom: 1px;
  transition: color 0.2s, border-color 0.2s;
}
.account-login-hint a:hover { color: var(--off-white); border-color: var(--grey-sub); }

/* ══════════════════════════════════
   PAGES DE CONTENU (mentions, confidentialité, accessibilité, contact, don)
   Mise en page simple, sobre, orientée lecture.
   ══════════════════════════════════ */

.content-page {
  max-width: 640px;
  margin: 0 auto;
  padding: 140px 32px 96px;
}

.content-page .page-eyebrow {
  font-size: 11px; font-weight: 300; letter-spacing: 0.28em;
  text-transform: uppercase; color: var(--grey-sub);
  margin-bottom: 20px;
}

.content-page h1 {
  font-family: 'Cormorant', serif;
  font-size: clamp(32px, 5vw, 52px); font-weight: 300;
  line-height: 1.1; color: var(--white);
  margin-bottom: 16px;
  letter-spacing: 0.01em;
}

.content-page .page-intro {
  font-size: clamp(15px, 1.6vw, 17px);
  color: var(--grey); line-height: 1.75;
  margin-bottom: 56px;
  max-width: 620px;
}

.content-page h2 {
  font-family: 'Cormorant', serif;
  font-size: clamp(22px, 2.6vw, 28px); font-weight: 300;
  color: var(--white);
  margin-top: 56px; margin-bottom: 20px;
  letter-spacing: 0.01em;
}

.content-page h3 {
  font-size: 13px; font-weight: 400; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--off-white);
  margin-top: 32px; margin-bottom: 14px;
}

.content-page p {
  font-size: 15px; font-weight: 300; line-height: 1.8;
  color: var(--grey); margin-bottom: 18px;
}

.content-page a {
  color: var(--off-white); text-decoration: none;
  border-bottom: 1px solid var(--border);
  transition: color 0.2s, border-color 0.2s;
}
.content-page a:hover {
  color: var(--white); border-color: var(--grey-sub);
}

.content-page ul {
  list-style: none;
  margin: 14px 0 24px;
  padding-left: 0;
}
.content-page ul li {
  font-size: 15px; font-weight: 300; line-height: 1.8;
  color: var(--grey);
  padding-left: 20px;
  position: relative;
  margin-bottom: 10px;
}
.content-page ul li::before {
  content: '·';
  position: absolute; left: 6px; top: 0;
  color: var(--grey-sub);
  font-size: 20px; line-height: 1.4;
}

.content-page strong { font-weight: 400; color: var(--off-white); }
.content-page em { font-style: italic; color: var(--off-white); }

.content-page .page-note {
  margin-top: 48px; padding: 20px 24px;
  border-left: 2px solid var(--border);
  background: var(--bg2);
  font-size: 14px; line-height: 1.75; color: var(--grey);
}

.content-page .page-last-updated {
  margin-top: 72px; padding-top: 24px;
  border-top: 1px solid var(--border-faint);
  font-size: 12px; letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--grey-sub);
}

@media (max-width: 768px) {
  .content-page { padding: 110px 24px 72px; }
  .content-page h2 { margin-top: 44px; }
}

/* ══════════════════════════════════
   KEYFRAMES
   ══════════════════════════════════ */

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

/* ══════════════════════════════════
   RESPONSIVE (commun)
   ══════════════════════════════════ */

@media (max-width: 768px) {
  header { padding: 18px 28px; }
  footer { padding: 28px 24px; flex-direction: column; align-items: flex-start; gap: 16px; }
  .footer-nav { gap: 14px; }
  .section-account { padding: 64px 24px 80px; }
}

@media (max-width: 480px) {
  header { padding: 16px 18px; }
  .logo-name { font-size: 19px; }
  .btn-cta { padding: 16px 32px; width: 100%; max-width: 280px; text-align: center; }
  footer { padding: 24px 18px; }
  .footer-nav { gap: 12px; }
}

/* ══════════════════════════════════
   MODALE GÉNÉRIQUE
   ══════════════════════════════════ */

.fn-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 24px;
  animation: fnModalFadeIn 0.25s ease;
}
.fn-modal-overlay.active { display: flex; }

.fn-modal-card {
  position: relative;
  background: #111111;
  border: 1px solid #3a3830;
  border-radius: 2px;
  width: 100%;
  max-width: 415px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  padding: 36px 32px;
  animation: fnModalSlideUp 0.3s ease;
}

.fn-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  background: none;
  border: none;
  color: #9a9590;
  cursor: pointer;
  padding: 6px;
  line-height: 1;
  transition: color 0.2s;
}
.fn-modal-close:hover { color: #f0ece4; }

@keyframes fnModalFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes fnModalSlideUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ══════════════════════════════════
   MODALE D'AUTHENTIFICATION
   ══════════════════════════════════ */

.fn-auth, .fn-auth *, .fn-auth *::before, .fn-auth *::after {
  box-sizing: border-box;
}
.fn-auth {
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  color: #f0ece4;
}

.fn-auth-tabs {
  display: flex;
  margin-bottom: 28px;
  border-bottom: 1px solid #2c2824;
}
.fn-auth-tab {
  flex: 1;
  background: none;
  border: none;
  color: #aaaaaa;
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0 0 14px;
  cursor: pointer;
  transition: color 0.2s;
  position: relative;
}
.fn-auth-tab::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 0; right: 0;
  height: 1px;
  background: #c8c3bc;
  transform: scaleX(0);
  transition: transform 0.2s;
}
.fn-auth-tab.active { color: #f0ece4; }
.fn-auth-tab.active::after { transform: scaleX(1); }

.fn-auth-panel { display: none; }
.fn-auth-panel.active { display: block; }

.fn-auth-group { margin-bottom: 18px; }

.fn-auth-label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #aaaaaa;
  margin-bottom: 8px;
}

.fn-auth-input {
  width: 100%;
  background: #060606;
  border: 1px solid #2c2824;
  border-radius: 1px;
  color: #f0ece4;
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  font-size: 15px;
  padding: 12px 14px;
  outline: none;
  transition: border-color 0.2s;
}
.fn-auth-input:focus { border-color: #aaaaaa; }
.fn-auth-input::placeholder { color: #555049; }

.fn-auth-input-pwd { padding-right: 42px; }

.fn-auth-pwd-wrap { position: relative; }
.fn-auth-pwd-toggle {
  position: absolute;
  right: 12px; top: 50%;
  transform: translateY(-50%);
  background: none; border: none;
  cursor: pointer;
  color: #aaaaaa;
  padding: 0; line-height: 1;
}
.fn-auth-pwd-toggle:hover { color: #f0ece4; }

.fn-auth-btn {
  width: 100%;
  background: #c8c3bc;
  color: #060606;
  border: none;
  border-radius: 1px;
  font-family: 'Jost', sans-serif;
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 14px;
  cursor: pointer;
  margin-top: 6px;
  transition: opacity 0.2s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.fn-auth-btn:hover { opacity: 0.85; }
.fn-auth-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.fn-auth-spinner {
  animation: fn-auth-spin 0.9s linear infinite;
  flex-shrink: 0;
}
@keyframes fn-auth-spin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .fn-auth-spinner { animation: none; }
}

.fn-auth-forgot {
  display: block;
  width: 100%;
  text-align: center;
  margin-top: 18px;
  background: none; border: none;
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  font-size: 12px;
  color: #aaaaaa;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: color 0.2s;
}
.fn-auth-forgot:hover { color: #f0ece4; }

.fn-auth-msg {
  margin-top: 14px;
  padding: 11px 14px;
  border-radius: 1px;
  font-size: 13px;
  letter-spacing: 0.04em;
  display: none;
}
.fn-auth-msg.error {
  background: rgba(196,90,90,0.12);
  border: 1px solid rgba(196,90,90,0.3);
  color: #e08080;
  display: block;
}
.fn-auth-msg.success {
  background: rgba(106,171,128,0.12);
  border: 1px solid rgba(106,171,128,0.3);
  color: #90c8a0;
  display: block;
}

/* Conteneur Turnstile : en mode interaction-only avec lazy load,
   le widget reste invisible sauf si Cloudflare décide qu'un challenge
   interactif est nécessaire (cas rare, traffic suspect). On garde
   juste une marge pour le cas où il s'affiche. */
.fn-auth-turnstile { margin-top: 0; }
.fn-auth-turnstile:not(:empty) { margin-top: 16px; }

.fn-auth-guest {
  margin-top: 24px;
  text-align: center;
  font-size: 13px;
  color: #aaaaaa;
  letter-spacing: 0.04em;
}
.fn-auth-guest-link {
  background: none;
  border: 1px solid #5a5550;
  color: #d8d3cc;
  font-family: 'Jost', sans-serif;
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0.06em;
  padding: 10px 22px;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.fn-auth-guest-link:hover {
  color: #f0ece4;
  border-color: #aaaaaa;
  background: rgba(255,255,255,0.03);
}

/* ══════════════════════════════════
   HEADER DYNAMIQUE (auth)
   ══════════════════════════════════ */

.fn-header-login {
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #c8c3bc;
  background: none;
  border: 1px solid #2c2824;
  padding: 10px 22px;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.3s, color 0.3s;
}
.fn-header-login:hover {
  border-color: #aaaaaa;
  color: #f0ece4;
}
.fn-header-register {
  background: #f0ece4;
  color: #0c0a09;
  border-color: #f0ece4;
}
.fn-header-register:hover {
  background: #ffffff;
  border-color: #ffffff;
  color: #0c0a09;
}

.fn-header-user {
  position: relative;
}
.fn-header-user-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 8px 4px 4px;
  color: #f0ece4;
  font-family: 'Jost', sans-serif;
  font-weight: 300;
}
.fn-header-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #c8c3bc;
  color: #060606;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Jost', sans-serif;
  font-weight: 400;
  font-size: 14px;
  text-transform: uppercase;
}
.fn-header-pseudo {
  font-size: 13px;
  letter-spacing: 0.06em;
  color: #c8c3bc;
}
.fn-header-user-btn:hover .fn-header-pseudo { color: #f0ece4; }

/* ══════════════════════════════════
   NOTIFICATIONS : cloche + popover
   ══════════════════════════════════ */
#fn-header-auth {
  display: flex;
  align-items: center;
  gap: 4px;
}

.fn-notif-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-right: 4px;
}
.fn-notif-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  color: #c8c3bc;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border-radius: 50%;
  transition: color 0.15s, background 0.15s;
}
.fn-notif-btn:hover { color: #f0ece4; background: rgba(255,255,255,0.04); }
.fn-notif-btn svg { width: 20px; height: 20px; }

.fn-notif-badge {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  background: #c4607a;
  color: #fff;
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: 10px;
  line-height: 16px;
  text-align: center;
  border-radius: 8px;
  display: none;
}
.fn-notif-badge.visible { display: block; }

.fn-notif-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: #0e0d0b;
  border: 1px solid #2c2824;
  width: 340px;
  max-width: calc(100vw - 24px);
  display: none;
  z-index: 200;
  font-family: 'Jost', sans-serif;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
.fn-notif-popover.active { display: block; }

.fn-notif-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid #2c2824;
}
.fn-notif-title {
  font-size: 13px;
  letter-spacing: 0.08em;
  color: #f0ece4;
  font-weight: 400;
}
.fn-notif-mark-all {
  background: none;
  border: none;
  color: #c8c3bc;
  font-size: 11px;
  cursor: pointer;
  padding: 2px 6px;
  font-family: 'Jost', sans-serif;
}
.fn-notif-mark-all:hover { color: #f0ece4; }
.fn-notif-mark-all:disabled { opacity: 0.3; cursor: default; }

.fn-notif-list {
  max-height: 420px;
  overflow-y: auto;
}
.fn-notif-item {
  display: block;
  padding: 12px 14px;
  border-bottom: 1px solid #1a1815;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  background: transparent;
  border-left: 3px solid transparent;
  transition: background 0.15s, border-color 0.15s;
}
.fn-notif-item:last-child { border-bottom: none; }
.fn-notif-item:hover { background: rgba(255,255,255,0.03); }
.fn-notif-item.unread { border-left-color: #c4607a; }
.fn-notif-item-text {
  font-size: 13px;
  line-height: 1.5;
  color: #e0dcd4;
  margin-bottom: 4px;
}
.fn-notif-item.unread .fn-notif-item-text { color: #f0ece4; font-weight: 500; }
.fn-notif-item-time {
  font-size: 10px;
  letter-spacing: 0.08em;
  color: #8a857d;
  text-transform: uppercase;
}

.fn-notif-empty {
  padding: 32px 14px;
  text-align: center;
  font-size: 13px;
  color: #8a857d;
}

.fn-notif-footer {
  padding: 10px 14px;
  border-top: 1px solid #2c2824;
  text-align: center;
}
.fn-notif-footer a {
  font-size: 12px;
  letter-spacing: 0.08em;
  color: #c8c3bc;
  text-decoration: none;
}
.fn-notif-footer a:hover { color: #f0ece4; }

@media (max-width: 480px) {
  .fn-notif-popover {
    position: fixed;
    top: 60px;
    right: 12px;
    left: 12px;
    width: auto;
  }
}

.fn-header-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: #0e0d0b;
  border: 1px solid #2c2824;
  min-width: 180px;
  display: none;
  z-index: 300;
}
.fn-header-menu.active { display: block; }
.fn-header-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 12px 16px;
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: #c8c3bc;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.fn-header-menu-item:hover {
  background: #1a1816;
  color: #f0ece4;
  text-decoration: none;
}

/* ══════════════════════════════════
   HINT MOT DE PASSE (règle permanente)
   ══════════════════════════════════ */

.fn-pwd-hint {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  line-height: 1.5;
  color: #777066;
  letter-spacing: 0.02em;
  transition: color 0.2s;
}
.fn-pwd-hint.error {
  color: #e08080;
}

/* Masquer le hint par défaut (ex: pseudo à l'inscription) */
.fn-pwd-hint-hidden {
  display: none;
}

/* ══════════════════════════════════
   CHAMPS OBLIGATOIRES
   Astérisque rouge après les labels + mention en bas
   ══════════════════════════════════ */

.fn-auth-required {
  color: #e08080;
  margin-left: 3px;
  font-weight: 400;
}

.fn-auth-required-note {
  margin-top: 18px;
  font-size: 11px;
  line-height: 1.5;
  color: #777066;
  letter-spacing: 0.04em;
  text-align: right;
}

/* ══════════════════════════════════
   CASES À COCHER (auth modale)
   Utilisées pour le consentement RGPD et la certification de
   majorité dans le formulaire d'inscription. Style sobre,
   alignement label cliquable avec wrap propre des liens.
   ══════════════════════════════════ */

.fn-auth-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 10px 0 6px;
  padding: 0 2px;
}

.fn-auth-check-input {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin: 2px 0 0 0;
  accent-color: var(--off-white);
  cursor: pointer;
}

.fn-auth-check-label {
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  font-size: 13px;
  line-height: 1.55;
  color: var(--grey);
  cursor: pointer;
  user-select: none;
}

.fn-auth-check-label a {
  color: var(--off-white);
  text-decoration: underline;
  text-decoration-color: var(--border);
  text-underline-offset: 2px;
  transition: text-decoration-color 0.2s;
}

.fn-auth-check-label a:hover {
  text-decoration-color: var(--off-white);
}

/* ══════════════════════════════════
   TOASTS (notifications discrètes)
   API unique pour tous les retours utilisateurs : succès d'action,
   erreurs, confirmations. Position fixe bas-droite, auto-dismiss.
   ══════════════════════════════════ */

.fn-toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 1200;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
  max-width: calc(100vw - 48px);
}

.fn-toast {
  pointer-events: auto;
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: #111111;
  border: 1px solid var(--border);
  border-left-width: 3px;
  padding: 14px 16px;
  padding-bottom: 16px;
  max-width: 380px;
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  font-size: 14px;
  line-height: 1.5;
  color: var(--off-white);
  opacity: 0;
  transform: translateX(20px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  overflow: hidden;
}

.fn-toast.visible {
  opacity: 1;
  transform: translateX(0);
}

.fn-toast.leaving {
  opacity: 0;
  transform: translateX(20px);
}

.fn-toast-success {
  border-color: rgba(106, 171, 128, 0.3);
  border-left-color: #6aab80;
  background: linear-gradient(to right, rgba(106, 171, 128, 0.07), #111111 70%);
}

.fn-toast-error {
  border-color: rgba(196, 90, 90, 0.3);
  border-left-color: #c46a6a;
  background: linear-gradient(to right, rgba(196, 90, 90, 0.07), #111111 70%);
}

.fn-toast-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 20px;
  line-height: 0;
}

.fn-toast-success .fn-toast-icon {
  color: #8fc9a2;
}

.fn-toast-error .fn-toast-icon {
  color: #e08080;
}

.fn-toast-text {
  flex: 1;
  padding-top: 1px;
}

.fn-toast-close {
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--grey-sub);
  cursor: pointer;
  padding: 2px;
  line-height: 1;
  transition: color 0.15s;
}

.fn-toast-close:hover {
  color: var(--white);
}

/* Barre de progression : indique visuellement le temps restant
   avant la disparition automatique. */
.fn-toast-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: currentColor;
  transform-origin: left center;
  animation: fnToastProgress linear forwards;
  pointer-events: none;
}

.fn-toast-success .fn-toast-progress {
  color: #6aab80;
}

.fn-toast-error .fn-toast-progress {
  color: #c46a6a;
}

@keyframes fnToastProgress {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .fn-toast {
    transition: opacity 0.15s ease;
    transform: none;
  }
  .fn-toast.visible,
  .fn-toast.leaving {
    transform: none;
  }
  /* La barre de progression est une animation visuelle, on la cache */
  .fn-toast-progress {
    display: none;
  }
}

@media (max-width: 480px) {
  .fn-toast-container {
    bottom: 16px;
    right: 16px;
    left: 16px;
    max-width: none;
  }
  .fn-toast {
    max-width: none;
  }
}

/* ══════════════════════════════════
   PAGE COMPTE
   Formulaires, sections, boutons primaires/secondaires
   ══════════════════════════════════ */

.fn-account-section {
  margin-top: 56px;
}

.fn-account-section:first-of-type {
  margin-top: 0;
}

.fn-account-section-intro {
  margin-bottom: 24px;
}

.fn-account-form {
  margin-top: 8px;
}

.fn-field {
  margin-bottom: 24px;
}

.fn-field-label {
  display: block;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grey-sub);
  margin-bottom: 10px;
}

.fn-field-input {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 1px;
  color: var(--white);
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  font-size: 15px;
  padding: 12px 14px;
  outline: none;
  transition: border-color 0.2s;
}

.fn-field-input:focus {
  border-color: var(--grey-sub);
}

.fn-field-input:disabled,
.fn-field-input[readonly] {
  color: var(--grey-sub);
  background: var(--bg2);
  cursor: not-allowed;
}

.fn-field-help {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.5;
  color: #777066;
  letter-spacing: 0.02em;
}

.fn-field-help.error {
  color: #e08080;
}

.fn-field-help-hidden {
  display: none;
}

/* Radio group horizontal style segmented control */
.fn-radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.fn-radio {
  position: relative;
  flex: 1;
  min-width: 100px;
}

.fn-radio input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.fn-radio-label {
  display: block;
  padding: 12px 14px;
  text-align: center;
  border: 1px solid var(--border);
  border-radius: 1px;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--grey);
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}

.fn-radio input:checked + .fn-radio-label {
  border-color: var(--off-white);
  color: var(--white);
  background: var(--bg2);
}

.fn-radio input:focus-visible + .fn-radio-label {
  outline: 1px solid var(--grey-sub);
  outline-offset: 2px;
}

.fn-radio-label:hover {
  border-color: var(--grey-sub);
  color: var(--off-white);
}

/* État désactivé : utilisé pour "Non précisé" une fois qu'un sexe a été
   défini (la transition vers NULL est interdite). On éteint le hover et
   on grise la cible pour signaler l'absence d'interactivité. */
.fn-radio input:disabled + .fn-radio-label {
  cursor: not-allowed;
  opacity: 0.45;
  color: var(--grey-sub);
}

.fn-radio input:disabled + .fn-radio-label:hover {
  border-color: var(--border);
  color: var(--grey-sub);
}

/* Zones d'actions et boutons */
.fn-account-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
}

.fn-account-actions-left {
  justify-content: flex-start;
}

.fn-btn-primary {
  background: var(--off-white);
  color: var(--bg);
  font-family: 'Jost', sans-serif;
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 13px 32px;
  border: none;
  border-radius: 1px;
  cursor: pointer;
  transition: opacity 0.2s;
}

.fn-btn-primary:hover:not(:disabled) {
  opacity: 0.85;
}

.fn-btn-primary:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.fn-btn-secondary {
  background: none;
  color: var(--off-white);
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 13px 32px;
  border: 1px solid var(--border);
  border-radius: 1px;
  cursor: pointer;
  transition: border-color 0.3s, color 0.3s, opacity 0.2s;
}

.fn-btn-secondary:hover:not(:disabled) {
  border-color: var(--grey-sub);
  color: var(--white);
}

.fn-btn-secondary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Bouton "danger ghost" : bordure et texte rouges, fond transparent.
   Utilisé pour les actions destructives en contexte de section
   (typiquement "Supprimer mon compte" sur la page compte). */
.fn-btn-danger {
  background: none;
  color: #c46a6a;
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 13px 32px;
  border: 1px solid rgba(196, 90, 90, 0.5);
  border-radius: 1px;
  cursor: pointer;
  transition: border-color 0.3s, color 0.3s, background 0.3s;
}

.fn-btn-danger:hover:not(:disabled) {
  border-color: #c46a6a;
  color: #e08080;
  background: rgba(196, 90, 90, 0.08);
}

.fn-btn-danger:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Bouton "danger solid" : fond rouge plein.
   Utilisé pour la confirmation finale dans la modale de suppression.
   Ne s'active qu'une fois la phrase de confirmation correctement saisie. */
.fn-btn-danger-solid {
  background: #a04848;
  color: var(--white);
  font-family: 'Jost', sans-serif;
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 13px 32px;
  border: none;
  border-radius: 1px;
  cursor: pointer;
  transition: background 0.2s, opacity 0.2s;
}

.fn-btn-danger-solid:hover:not(:disabled) {
  background: #b85454;
}

.fn-btn-danger-solid:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* ══════════════════════════════════
   MODALE DE SUPPRESSION DE COMPTE
   ══════════════════════════════════ */

.fn-delete-modal {
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  color: var(--off-white);
}

.fn-delete-title {
  font-family: 'Cormorant', serif;
  font-size: 22px;
  font-weight: 300;
  color: var(--white);
  margin-bottom: 18px;
  letter-spacing: 0.01em;
}

.fn-delete-text {
  font-size: 14px;
  line-height: 1.7;
  color: var(--grey);
  margin-bottom: 14px;
}

.fn-delete-list {
  list-style: none;
  margin: 0 0 18px;
  padding-left: 0;
}

.fn-delete-list li {
  font-size: 14px;
  line-height: 1.7;
  color: var(--grey);
  padding-left: 18px;
  position: relative;
  margin-bottom: 4px;
}

.fn-delete-list li::before {
  content: '·';
  position: absolute;
  left: 6px;
  top: 0;
  color: var(--grey-sub);
  font-size: 18px;
  line-height: 1.5;
}

.fn-delete-pseudo {
  color: var(--white);
  font-weight: 400;
  letter-spacing: 0.02em;
}

/* Label spécifique à la modale de suppression : on n'utilise pas
   .fn-field-label parce qu'il applique un text-transform:uppercase
   qui altèrerait visuellement le pseudo affiché à recopier. */
.fn-delete-confirm-label {
  display: block;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--off-white);
  margin-bottom: 10px;
  letter-spacing: 0.02em;
}

/* État d'erreur pour un champ texte : bordure rouge discrète. */
.fn-field-input-error {
  border-color: rgba(196, 90, 90, 0.6);
}

.fn-field-input-error:focus {
  border-color: #c46a6a;
}

.fn-delete-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 24px;
  flex-wrap: wrap;
}

.fn-delete-actions .fn-btn-secondary,
.fn-delete-actions .fn-btn-danger-solid {
  flex: 1;
  min-width: 140px;
  padding: 13px 16px;
}

@media (max-width: 480px) {
  .fn-delete-actions {
    flex-direction: column-reverse;
  }
  .fn-delete-actions .fn-btn-secondary,
  .fn-delete-actions .fn-btn-danger-solid {
    width: 100%;
  }
}

/* ══════════════════════════════════
   SECTION "MON PARTENAIRE" (page compte)
   États : vide (formulaire d'invitation) et invitation en attente.
   États supplémentaires (invitations reçues, partenaire actif)
   à venir dans les étapes suivantes.
   ══════════════════════════════════ */

/* Carte d'information neutre, utilisée pour afficher l'état
   d'une invitation pending sortante ou un message contextuel
   (ex. avertissement quand le sexe n'est pas défini).
   Utilisable seule ou en combinaison avec des actions. */
.fn-partner-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 1px;
  padding: 18px 20px;
  margin-top: 8px;
}

.fn-partner-card-title {
  font-family: 'Cormorant', serif;
  font-size: 18px;
  font-weight: 300;
  color: var(--white);
  margin: 0 0 8px;
  letter-spacing: 0.01em;
}

.fn-partner-card-text {
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  font-size: 14px;
  line-height: 1.7;
  color: var(--grey);
  margin: 0;
}

.fn-partner-card-text + .fn-partner-card-text {
  margin-top: 10px;
}

/* Mise en évidence d'une valeur dans une carte (email, date, pseudo). */
.fn-partner-card-value {
  color: var(--off-white);
  font-weight: 400;
  letter-spacing: 0.02em;
}

/* Zone d'actions en bas d'une carte : alignée à droite par défaut,
   passe en pleine largeur sur mobile. */
.fn-partner-card-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 16px;
  flex-wrap: wrap;
}

@media (max-width: 480px) {
  .fn-partner-card-actions {
    flex-direction: column-reverse;
  }
  .fn-partner-card-actions .fn-btn-primary,
  .fn-partner-card-actions .fn-btn-secondary,
  .fn-partner-card-actions .fn-btn-danger,
  .fn-partner-card-actions .fn-btn-danger-solid {
    width: 100%;
  }
}

/* ══════════════════════════════════
   MODALE DE CONFIRMATION GÉNÉRIQUE
   Réutilisable pour : annuler une invitation, refuser une
   invitation, rompre un partenariat. Plus légère que la modale
   de suppression de compte (pas de saisie de pseudo requise).
   ══════════════════════════════════ */

.fn-confirm-modal {
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  color: var(--off-white);
}

.fn-confirm-title {
  font-family: 'Cormorant', serif;
  font-size: 22px;
  font-weight: 300;
  color: var(--white);
  margin-bottom: 16px;
  letter-spacing: 0.01em;
}

.fn-confirm-text {
  font-size: 14px;
  line-height: 1.7;
  color: var(--grey);
  margin-bottom: 14px;
}

.fn-confirm-text:last-of-type {
  margin-bottom: 0;
}

.fn-confirm-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 24px;
  flex-wrap: wrap;
}

.fn-confirm-actions .fn-btn-primary,
.fn-confirm-actions .fn-btn-secondary,
.fn-confirm-actions .fn-btn-danger,
.fn-confirm-actions .fn-btn-danger-solid {
  flex: 1;
  min-width: 140px;
  padding: 13px 16px;
}

@media (max-width: 480px) {
  .fn-confirm-actions {
    flex-direction: column-reverse;
  }
  .fn-confirm-actions .fn-btn-primary,
  .fn-confirm-actions .fn-btn-secondary,
  .fn-confirm-actions .fn-btn-danger,
  .fn-confirm-actions .fn-btn-danger-solid {
    width: 100%;
  }
}

/* Bloc liste des invitations reçues : conteneur sous le bloc principal
   de la section partenaire. Espacement entre cartes successives. */
.fn-received-invitations {
  margin-top: 16px;
}

.fn-received-invitations-title {
  font-family: 'Cormorant', serif;
  font-size: 16px;
  font-weight: 300;
  color: var(--grey);
  margin: 0 0 10px;
  letter-spacing: 0.04em;
  text-transform: none;
}

.fn-received-invitations-title:empty {
  display: none;
}

.fn-received-invitation + .fn-received-invitation {
  margin-top: 12px;
}

/* Petit message d'aide affiché dans une carte d'invitation
   reçue lorsque l'acceptation n'est pas possible (sexes
   incompatibles, sexe non défini). */
.fn-partner-card-help {
  font-style: italic;
  color: var(--grey-sub);
  font-size: 13px;
}