@charset "UTF-8";

/*
 * Sincères — sinceres.css  v4.9
 * CSS principal du thème WordPress
 * Restructuré le 25 mai 2026 : PARTIE A (global) + PARTIE B (pages)
 * Chargé via functions.php → wp_enqueue_style()
 *
 * ── TABLE DES MATIÈRES ──────────────────────────────────────────────────────
 *
 *  PARTIE A · STYLES GLOBAUX (communs à toutes les pages)
 *  ────────────────────────────────────────────────────────
 *  1.  Variables & Reset
 *  2.  Typographie
 *  3.  Boutons
 *  4.  Navigation principale
 *  5.  Layout général
 *  6.  Sidebar membre
 *  7.  Formulaires
 *  8.  Cards, badges & alertes
 *  9.  Utilitaires & animations
 * 10.  Responsive global
 *
 *  PARTIE B · PAGES SPÉCIFIQUES (propres à chaque template)
 *  ────────────────────────────────────────────────────────
 * 11.  Home page — grille membres (visiteurs : flou+overlay / connectés : cloisonnement)
 * 12.  Inscription & connexion
 * 13.  Trombinoscope
 * 14.  Messagerie
 * 15.  Espace membre — Tableau de bord
 * 16.  Note de rendez-vous
 * 17.  Footer
 *
 * ────────────────────────────────────────────────────────────────────────────
 */



/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║                                                                        ║
   ║   ██████╗  █████╗ ██████╗ ████████╗██╗███████╗     █████╗             ║
   ║   ██╔══██╗██╔══██╗██╔══██╗╚══██╔══╝██║██╔════╝    ██╔══██╗            ║
   ║   ██████╔╝███████║██████╔╝   ██║   ██║█████╗      ███████║            ║
   ║   ██╔═══╝ ██╔══██║██╔══██╗   ██║   ██║██╔══╝      ██╔══██║            ║
   ║   ██║     ██║  ██║██║  ██║   ██║   ██║███████╗    ██║  ██║            ║
   ║   ╚═╝     ╚═╝  ╚═╝╚═╝  ╚═╝   ╚═╝   ╚═╝╚══════╝    ╚═╝  ╚═╝            ║
   ║                                                                        ║
   ║   PARTIE A — STYLES GLOBAUX                                            ║
   ║   Communs à toutes les pages du site                                   ║
   ║                                                                        ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */

/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  1. VARIABLES & RESET                                                   ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */

:root {
  /* Couleurs */
  --rose:        #C94F6D;
  --rose-light:  #F5E6EA;
  --rose-dark:   #8B2D45;
  --rose-alpha:  rgba(201,79,109,0.10);
  --cream:       #FAF7F4;
  --warm:        #F0E8E0;
  --white:       #FFFFFF;
  --charcoal:    #1C1C1C;
  --muted:       #6B6460;
  --subtle:      #A09590;
  --gold:        #C4A882;

  /* Typographie */
  --font-serif:  'Playfair Display', Georgia, serif;
  --font-sans:   'DM Sans', Arial, sans-serif;

  /* Rayons */
  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-lg:   20px;
  --radius-xl:   24px;
  --radius-pill: 100px;

  /* Ombres */
  --shadow-sm:   0 2px 8px rgba(0,0,0,0.06);
  --shadow-md:   0 8px 24px rgba(0,0,0,0.08);
  --shadow-lg:   0 20px 60px rgba(0,0,0,0.13);
  --shadow-rose: 0 8px 32px rgba(201,79,109,0.25);

  /* Transitions */
  --transition:  0.2s ease;

  /* Variables trombinoscope — ajoutées v3.2 · 25 mai 2026 */
  --nav-h:       72px;              /* hauteur du header fixe — utilisée dans .profils-layout */
  --rose-mid:    rgba(201,79,109,0.35); /* rose intermédiaire — bordures et scrollbar */
  --muted-light: #A09590;           /* gris clair — textes secondaires trombinoscope */
  --cream-dark:  #E8E0D8;           /* beige foncé — bordures et fonds neutres */
  --white:       #FFFFFF;           /* blanc pur — alias de --white déjà défini */
  --radius:      16px;              /* rayon générique — cartes trombinoscope */
}

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

html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  background: var(--cream);
  color: var(--charcoal);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img, video { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }
ul, ol { list-style: none; }
button { cursor: pointer; font-family: var(--font-sans); }


/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  2. TYPOGRAPHIE                                                         ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */

h1, h2, h3, h4, h5 {
  font-family: var(--font-serif);
  line-height: 1.2;
  color: var(--charcoal);
}

h1 { font-size: clamp(28px, 4vw, 42px); font-weight: 600; }
h2 { font-size: clamp(22px, 3vw, 32px); font-weight: 600; }
h3 { font-size: clamp(18px, 2.5vw, 24px); font-weight: 600; }
h4 { font-size: 16px; font-weight: 500; font-family: var(--font-sans); }

h1 em, h2 em, h3 em { font-style: italic; color: var(--rose); }

p {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.7;
  font-weight: 300;
}

.label {
  display: block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rose);
  margin-bottom: 16px;
}


/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  3. BOUTONS                                                             ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */

.btn-primary {
  display: inline-block;
  background: var(--rose);
  color: white;
  padding: 14px 32px;
  border-radius: var(--radius-pill);
  font-size: 15px;
  font-weight: 500;
  border: none;
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
  box-shadow: var(--shadow-rose);
}
.btn-primary:hover {
  background: var(--rose-dark);
  transform: translateY(-2px);
  box-shadow: 0 12px 36px rgba(201,79,109,0.35);
  color: white;
}

.btn-secondary {
  display: inline-block;
  background: transparent;
  color: var(--charcoal);
  padding: 14px 32px;
  border-radius: var(--radius-pill);
  font-size: 15px;
  font-weight: 400;
  border: 1.5px solid rgba(28,28,28,0.2);
  transition: border-color var(--transition), background var(--transition), color var(--transition);
}
.btn-secondary:hover {
  border-color: var(--rose);
  color: var(--rose);
  background: var(--rose-light);
}

.btn-outline {
  display: inline-block;
  background: transparent;
  color: var(--rose);
  padding: 12px 28px;
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 500;
  border: 1.5px solid var(--rose);
  transition: background var(--transition), color var(--transition);
}
.btn-outline:hover {
  background: var(--rose);
  color: white;
}


/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  4. NAVIGATION PRINCIPALE                                               ║
   ╚══════════════════════════════════════════════════════════════════════════╝

   STRUCTURE HTML générée par header.php + wp_nav_menu() :
   <nav class="nav-sinceres">
     <a class="nav-logo"><img class="nav-logo-img"></a>
     <button class="nav-burger">
     <ul class="nav-links">          ← généré par wp_nav_menu()
       <li class="menu-item"><a>
       <li class="menu-item menu-cta"><a>   ← dernier lien = bouton rose

   HAUTEUR FIXE : 72px
   Le body doit avoir padding-top: 72px pour que le contenu
   commence bien sous le header et que les erreurs PHP soient visibles.

   DEUX ÉTATS :
   - Visiteur non connecté → menu-principal (Accueil, Connexion, Inscription)
   - Membre connecté       → menu-membres (Profils, Espace membre, Déconnexion)
   Le switch est fait en PHP dans header.php selon $_SESSION['membre_id'].
   ============================================================ */

/* ── Barre de navigation principale ── */
.nav-sinceres {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;

  /* Hauteur fixe 72px — padding vertical calculé en conséquence */
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 48px;

  /* Fond crème semi-transparent avec blur — l'arrière-plan transparaît légèrement */
  background: rgba(250,247,244,0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  /* Séparateur subtil rose en bas */
  border-bottom: 1px solid rgba(201,79,109,0.12);

  transition: box-shadow var(--transition);
}

/* Ombre portée quand on scrolle — classe ajoutée par le JS dans header.php */
.nav-sinceres.scrolled {
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

/* ── Logo ──
   Affiche l'image logo-header.png (height: 48px) ou le nom du site en texte.
   flex-shrink: 0 empêche le logo de se réduire quand le menu prend de la place. */
.nav-logo {
  font-family: var(--font-serif);
  font-size: 22px;
  color: var(--rose);
  letter-spacing: 0.5px;
  text-decoration: none;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

/* Image du logo — height 48px pour tenir dans la nav de 72px avec marges */
.nav-logo img,
.nav-logo-img {
  height: 48px;
  width: auto;
  display: block;
}

/* ── Liens de navigation ──
   wp_nav_menu() génère : <ul class="nav-links"><li class="menu-item"><a>
   On cible donc à la fois .nav-links > li > a ET .nav-links > a (fallback) */
.nav-links {
  display: flex;
  gap: 32px;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links li { list-style: none; }

.nav-links li a,
.nav-links a {
  font-size: 14px;
  font-weight: 400;
  color: var(--muted);
  text-decoration: none;
  transition: color var(--transition);
  white-space: nowrap;
}

/* ── Hover : fond clair (nav-sinceres) — charcoal sur crème ──
   S'applique aux pages intérieures (connexion, profils, messages…).
   Sur la nav home (#mainNav), cette règle est surchargée par la spécificité ID. */
.nav-links li a:hover,
.nav-links a:hover {
  color: var(--charcoal);
}

/* ── Lien actif (page courante) ──
   wp_nav_menu() ajoute automatiquement .current-menu-item sur le <li> du lien actif.
   Couleur rose var(--rose) : clairement visible sur fond crème, cohérent avec l'identité du site.
   font-weight 500 : léger renforcement pour distinguer l'actif du hover.
   Sur la nav home (#mainNav), cette règle est surchargée par #mainNav .nav-links li.current-menu-item > a
   qui applique le rose pâle #F4A0B5 adapté au fond sombre du slider. */
.nav-links li.current-menu-item > a {
  color: var(--rose);
  font-weight: 500;
}

/* ── Bouton CTA "Rejoindre" ou "Déconnexion" ──
   Dans WP-Admin → Menus, ajouter la classe CSS "nav-cta" au dernier lien
   pour lui appliquer le style bouton rose.
   !important nécessaire car wp_nav_menu() génère des styles en ligne parfois. */
.nav-cta,
.nav-links li.menu-cta > a,
.nav-links li:last-child > a {
  background: var(--rose) !important;
  color: white !important;
  padding: 10px 24px !important;
  border-radius: var(--radius-pill) !important;
  font-weight: 500 !important;
  transition: background var(--transition), transform var(--transition) !important;
}
.nav-cta:hover,
.nav-links li.menu-cta > a:hover,
.nav-links li:last-child > a:hover {
  background: var(--rose-dark) !important;
  color: white !important;
  transform: translateY(-1px) !important;
}

/* ── Bouton CTA actif (page courante = inscription) ──
   Quand on est sur la page inscription, le bouton passe en outline (fond transparent,
   bordure rose, texte rose) plutôt qu'en plein, pour signaler "vous êtes ici"
   sans confondre avec le hover.
   Convention UX : bouton plein = invitation à agir / bouton outline = vous y êtes déjà.
   Placé APRÈS les règles CTA (qui ont !important) pour les surcharger par cascade. */
.nav-links li.current-menu-item:last-child > a,
.nav-links li.current-menu-item.menu-cta > a {
  background: transparent !important;
  color: var(--rose) !important;
  border: 1.5px solid var(--rose) !important;
  font-weight: 700 !important; /* Gras : renforce la lisibilité de l'état actif */
  box-shadow: none !important;
  transform: none !important;
}

/* Hover sur le bouton CTA actif : légère teinte rose (≠ hover normal = rose foncé) */
.nav-links li.current-menu-item:last-child > a:hover,
.nav-links li.current-menu-item.menu-cta > a:hover {
  background: var(--rose-alpha) !important; /* rgba(201,79,109,0.10) — teinte subtile */
  color: var(--rose) !important;
  transform: none !important;
}

/* ── Lien "Se connecter" — style discret ──
   Avant-dernier lien dans la nav publique (ex: "connexion" avant "inscription").
   :not(.current-menu-item) : exclut le cas où ce lien est la page active —
   sans ce :not(), la spécificité 0-2-2 écrase la règle current-menu-item (aussi 0-2-2)
   car cette règle arrive après dans le fichier et gagnerait par cascade. */
.nav-links li:nth-last-child(2):not(.current-menu-item) > a {
  color: var(--muted);
}
.nav-links li:nth-last-child(2):not(.current-menu-item) > a:hover {
  color: var(--charcoal);
}

/* ── Badge messages non lus ──
   Petit rond rouge avec le nombre de messages non lus.
   Ajouté par JS sur le lien /messages/ quand la messagerie sera active.
   Code déjà prévu dans header.php — décommenter quand étape 11 sera codée. */
.nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--rose);
  color: white;
  font-size: 10px;
  font-weight: 600;
  width: 18px; height: 18px;
  border-radius: 50%;
  margin-left: 6px;
  vertical-align: middle;
  flex-shrink: 0;
}

/* Badge coup de cœur reçu → rouge framboise (même que le bouton coup de cœur) */
.nav-badge--coeur { background: #E11D48; }

/* Badge demande d'ami → bleu (même que le bouton ami) */
.nav-badge--ami   { background: #2563EB; }

/* ── Prénom membre connecté ──
   Pill rose clair à l'extrême droite de la nav, juste après les liens.
   flex-shrink:0 empêche le pill de se comprimer si le menu manque de place.
   Fonctionne avec justify-content:space-between de .nav-sinceres :
   logo (gauche) | nav-links (milieu) | nav-membre-lien (droite). */
.nav-membre-lien {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px;
  border-radius: 20px;
  background: var(--rose-light);      /* Fond rose très clair */
  color: var(--rose);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background var(--transition), color var(--transition);
}
.nav-membre-lien:hover {
  background: var(--rose);
  color: white;
}
.nav-membre-avatar {
  font-size: 15px;
  line-height: 1;
}

/* ── Burger mobile ──
   Trois barres horizontales → visible uniquement sur mobile (display:none sur desktop).
   La classe .open est ajoutée par le JS de header.php au clic.
   Les transformations CSS animent les barres en croix (×) quand ouvert. */
.nav-burger {
  display: none;      /* Caché sur desktop — affiché via media query mobile */
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  padding: 8px;
  cursor: pointer;
  flex-shrink: 0;
}

.nav-burger span {
  display: block;
  width: 24px; height: 2px;
  background: var(--charcoal);
  border-radius: 2px;
  transition: all 0.3s ease;
}

/* Animation burger → croix quand menu ouvert */
.nav-burger.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.nav-burger.open span:nth-child(2) { opacity: 0; transform: translateX(-8px); }
.nav-burger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* ── Espacement body ──
   Le header est fixe (position: fixed) sur 72px de haut.
   Sans ce padding, le contenu des pages commence DERRIÈRE le header
   et les erreurs PHP sont masquées par la nav. */
body {
  padding-top: 72px;
}


/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  5. LAYOUT GÉNÉRAL                                                      ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */

.page-wrapper {
  padding-top: 70px;
  min-height: 100vh;
}

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}

.container-sm {
  max-width: 680px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Layout espace membre : sidebar + contenu */
.membre-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 32px;
  padding: 32px 48px;
  min-height: calc(100vh - 70px);
}


/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  6. SIDEBAR MEMBRE                                                      ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */

.sidebar {
  background: white;
  border-radius: var(--radius-xl);
  padding: 28px 20px;
  border: 1px solid rgba(201,79,109,0.1);
  height: fit-content;
  position: sticky;
  top: 90px;
}

.sidebar-avatar {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: var(--warm);
  margin: 0 auto 16px;
  overflow: hidden;
  border: 3px solid var(--rose-light);
}

.sidebar-name {
  font-family: var(--font-serif);
  font-size: 17px;
  text-align: center;
  margin-bottom: 4px;
}

.sidebar-status {
  font-size: 12px;
  color: var(--muted);
  text-align: center;
  margin-bottom: 24px;
}

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

.sidebar-nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  font-size: 14px;
  color: var(--muted);
  font-weight: 400;
  transition: background var(--transition), color var(--transition);
}
.sidebar-nav a:hover,
.sidebar-nav a.active {
  background: var(--rose-light);
  color: var(--rose-dark);
  font-weight: 500;
}


/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  7. FORMULAIRES                                                         ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}

.form-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--charcoal);
}

.form-input,
.form-select,
.form-textarea {
  padding: 14px 18px;
  border: 1.5px solid rgba(28,28,28,0.12);
  border-radius: var(--radius-md);
  font-size: 15px;
  font-family: var(--font-sans);
  background: white;
  color: var(--charcoal);
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
  width: 100%;
  appearance: none;
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--rose);
  box-shadow: 0 0 0 3px rgba(201,79,109,0.10);
}
.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--subtle);
  font-weight: 300;
}

.form-textarea { resize: vertical; min-height: 120px; }

.form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.form-error  { font-size: 12px; color: #B71C1C; margin-top: 4px; }
.form-success { font-size: 12px; color: #2E7D32; margin-top: 4px; }

/* Formulaire hero en slides */
.form-step { display: none; padding: 28px 28px 20px; }
.form-step.active { display: block; }

.form-step-title {
  font-family: var(--font-serif);
  font-size: 19px;
  font-weight: 600;
  color: var(--charcoal);
  margin-bottom: 4px;
}
.form-step-sub {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 20px;
  font-weight: 300;
}

.form-options { display: flex; flex-direction: column; gap: 10px; }

.form-option {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 16px;
  border: 1.5px solid rgba(0,0,0,0.09);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.25s;
  font-size: 14px;
  color: var(--charcoal);
  background: white;
  text-align: left;
  width: 100%;
}
.form-option:hover {
  border-color: var(--rose);
  background: var(--rose-alpha);
  transform: translateX(4px);
}
.form-option-icon { font-size: 20px; }

.form-options-row {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 10px;
  margin-bottom: 14px;
}

.form-option-card {
  padding: 14px 8px;
  border: 1.5px solid rgba(0,0,0,0.09);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.25s;
  text-align: center;
  background: white;
  width: 100%;
}
.form-option-card:hover { border-color: var(--rose); background: var(--rose-alpha); }
.form-option-card.selected { border-color: var(--rose); background: rgba(201,79,109,0.09); }
.form-option-card-icon { font-size: 24px; display: block; margin-bottom: 6px; }
.form-option-card-label { font-size: 12px; color: var(--charcoal); }

.form-separator {
  font-size: 12px;
  color: var(--muted);
  text-align: center;
  margin: 12px 0 10px;
  font-weight: 300;
}

.form-progress {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 14px 28px 20px;
}
.form-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(0,0,0,0.12);
  transition: all 0.3s;
}
.form-dot.active {
  width: 20px;
  border-radius: 3px;
  background: var(--rose);
}

.form-note {
  text-align: center;
  font-size: 12px;
  color: var(--muted);
  margin-top: 10px;
  font-weight: 300;
}

.btn-form {
  width: 100%;
  padding: 14px;
  background: var(--rose);
  color: white;
  border: none;
  border-radius: var(--radius-md);
  font-size: 15px;
  font-weight: 500;
  font-family: var(--font-sans);
  cursor: pointer;
  transition: all var(--transition);
  margin-top: 6px;
}
.btn-form:hover {
  background: var(--rose-dark);
  transform: translateY(-1px);
  box-shadow: var(--shadow-rose);
}
.btn-form:disabled {
  background: #ddd;
  transform: none;
  box-shadow: none;
  cursor: not-allowed;
}


/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  8.  CARDS, BADGES & ALERTES                                            ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */

.card {
  background: white;
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  border: 1px solid rgba(201,79,109,0.08);
  transition: transform var(--transition), box-shadow var(--transition);
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.card-titre {
  font-family: var(--font-serif);
  font-size: 18px;
  margin-bottom: 12px;
}

.alerte {
  padding: 14px 18px;
  border-radius: var(--radius-md);
  font-size: 14px;
  margin-bottom: 16px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.alerte-info    { background: #E3F2FD; color: #1565C0; border-left: 3px solid #1565C0; }
.alerte-succes  { background: #E8F5E9; color: #2E7D32; border-left: 3px solid #2E7D32; }
.alerte-warning { background: #FFF3E0; color: #E65100; border-left: 3px solid var(--rose); }
.alerte-erreur  { background: #FFEBEE; color: #B71C1C; border-left: 3px solid #B71C1C; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
}
.badge-rose   { background: var(--rose-light); color: var(--rose-dark); }
.badge-vert   { background: #E8F5E9; color: #2E7D32; }
.badge-orange { background: #FFF3E0; color: #E65100; }
.badge-or     { background: #FFF8E1; color: #F57F17; }


/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  9.  UTILITAIRES & ANIMATIONS                                           ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */

.text-center { text-align: center; }
.text-rose   { color: var(--rose); }
.text-muted  { color: var(--muted); }
.text-white  { color: white; }
.hidden      { display: none !important; }

.mt-8  { margin-top:  8px; }  .mb-8  { margin-bottom:  8px; }
.mt-16 { margin-top: 16px; }  .mb-16 { margin-bottom: 16px; }
.mt-24 { margin-top: 24px; }  .mb-24 { margin-bottom: 24px; }
.mt-32 { margin-top: 32px; }  .mb-32 { margin-bottom: 32px; }
.mt-48 { margin-top: 48px; }  .mb-48 { margin-bottom: 48px; }

@keyframes fadeUp   { from { opacity:0; transform:translateY(28px); } to { opacity:1; transform:translateY(0); } }
@keyframes fadeDown { from { opacity:0; transform:translateY(-20px); } to { opacity:1; transform:translateY(0); } }
@keyframes fadeIn   { from { opacity:0; } to { opacity:1; } }
@keyframes slideIn  { from { opacity:0; transform:translateX(30px); } to { opacity:1; transform:translateX(0); } }

.animate-fade-up   { animation: fadeUp   0.8s ease both; }
.animate-fade-down { animation: fadeDown 0.8s ease both; }
.animate-fade-in   { animation: fadeIn   0.6s ease both; }

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--cream); }
::-webkit-scrollbar-thumb { background: rgba(201,79,109,0.3); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--rose); }


/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  10. RESPONSIVE GLOBAL                                                         ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */

@media (max-width: 1024px) {
  .membre-layout { grid-template-columns: 220px 1fr; padding: 24px 32px; }
  .valeurs-grid  { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 768px) {
  /* ── Navigation mobile ──
     Sur mobile, le burger remplace la nav horizontale.
     Le menu s'ouvre en panneau vertical fixe sous le header (top: 72px).
     La classe .nav-open est ajoutée/retirée par le JS de header.php. */
  .nav-sinceres { padding: 0 20px; }        /* Padding horizontal réduit sur mobile */
  .nav-burger   { display: flex; }           /* Burger visible sur mobile uniquement */
  /* Pill prénom masqué sur mobile — le prénom est visible dans le menu burger */
  .nav-membre-lien { display: none; }

  /* Menu déroulant mobile — caché par défaut, affiché avec .nav-open */
  .nav-links {
    display: none;
    position: fixed;
    top: 72px;                               /* Juste sous le header de 72px */
    left: 0; right: 0;
    background: rgba(250,247,244,0.98);
    backdrop-filter: blur(12px);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 0 16px;
    border-bottom: 1px solid rgba(0,0,0,0.08);
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    z-index: 999;
  }
  .nav-links.nav-open { display: flex; }    /* Ouvert par le JS via burger */

  /* Liens en pleine largeur sur mobile */
  .nav-links li a, .nav-links a {
    display: block;
    padding: 14px 24px;
    font-size: 15px;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    color: var(--charcoal);
  }

  /* Bouton CTA (Rejoindre / Déconnexion) sur mobile — centré avec marges */
  .nav-cta,
  .nav-links li.menu-cta > a,
  .nav-links li:last-child > a {
    margin: 12px 20px 0 !important;
    border-radius: var(--radius-pill) !important;
    text-align: center !important;
    border-bottom: none !important;
    display: block !important;
  }

  /* Layout membre */
  .membre-layout {
    grid-template-columns: 1fr;
    padding: 16px;
  }
  .sidebar {
    position: static;
    display: flex; align-items: center;
    gap: 16px; padding: 16px;
  }
  .sidebar-nav { flex-direction: row; flex-wrap: wrap; }

  /* Trombinoscope */
  .profils-grid { grid-template-columns: repeat(2,1fr); gap: 12px; }

  /* Messagerie */
  .messagerie-layout { flex-direction: column; height: auto; }
  .messagerie-liste  { width: 100%; border-right: none; border-bottom: 1px solid var(--warm); max-height: 200px; }

  /* Formulaires */
  .form-grid-2 { grid-template-columns: 1fr; }

  /* Proof bar */
  .proof-bar { padding: 16px 20px; gap: 16px; }

  /* Hero */
  .hero-content { padding: 80px 16px 160px; }
  .hero-proof   { gap: 12px; padding: 10px 16px; }

  /* CTA */
  .cta-section { padding: 60px 20px; }

  /* Valeurs */
  .valeurs-grid { grid-template-columns: 1fr; }

  /* Footer */
  .footer-sinceres { padding: 20px; }
}

@media (max-width: 480px) {
  .profils-grid { grid-template-columns: 1fr; }
  .container, .container-sm { padding: 0 16px; }
  .hero-proof { display: grid; grid-template-columns: 1fr 1fr; }
  .form-options-row { grid-template-columns: repeat(3,1fr); }
}




/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║                                                                        ║
   ║   ██████╗  █████╗ ██████╗ ████████╗██╗███████╗    ██████╗             ║
   ║   ██╔══██╗██╔══██╗██╔══██╗╚══██╔══╝██║██╔════╝    ██╔══██╗            ║
   ║   ██████╔╝███████║██████╔╝   ██║   ██║█████╗      ██████╔╝            ║
   ║   ██╔═══╝ ██╔══██║██╔══██╗   ██║   ██║██╔══╝      ██╔══██╗            ║
   ║   ██║     ██║  ██║██║  ██║   ██║   ██║███████╗    ██████╔╝            ║
   ║   ╚═╝     ╚═╝  ╚═╝╚═╝  ╚═╝   ╚═╝   ╚═╝╚══════╝    ╚═════╝             ║
   ║                                                                        ║
   ║   PARTIE B — PAGES SPÉCIFIQUES                                         ║
   ║   Styles propres à chaque template                                     ║
   ║                                                                        ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */

/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  11. HOME PAGE — Page d'accueil publique                                ║
   ║  Page : rencontres-sinceres.com/                                        ║
   ║  Template : templates/home.php                                          ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */

/* ═══════════════ 11A. SURCHARGES DE VARIABLES — home page uniquement ═══════════════
   WordPress ajoute automatiquement la classe "home" sur <body> quand on est
   sur la page d'accueil statique (Réglages → Lecture → Page d'accueil).
   Ces surcharges localisent les valeurs propres à la home sans toucher aux
   variables globales utilisées par les autres pages du site.
   ════════════════════════════════════════════════════════════════════════════════════ */

body.home {
  --nav-h:       68px;       /* Hauteur nav home (glass-morphism) — différente de la nav membres (72px) */
  --muted:       #7A6E6A;   /* Ton légèrement plus chaud que le --muted global (#6B6460) */
  --muted-light: #A09890;   /* Gris clair home — proche du global mais légèrement différent */
  --rose-mid:    #d9607d;   /* Rose intermédiaire home (opaque) — ≠ du rose alpha du trombinoscope */
  --cream-dark:  #F0EBE5;   /* Beige foncé home — plus clair que #E8E0D8 du trombinoscope */
  padding-top:   0 !important; /* Annule le padding-top:72px du body global — la nav home est superposée au hero */
}

/* Barre admin WordPress (32px) — décale la nav home vers le bas quand admin connecté */
body.home.admin-bar {
  padding-top: 0 !important;
}
body.home.admin-bar .nav {
  top: 32px;
}
body.home.admin-bar .hero {
  padding-top: 32px;
}

/* ═══════════════ 11B. NAVIGATION HOME (glass-morphism) ═══════════════
   La home a sa propre nav transparente qui s'applique SUR le slider hero.
   Elle est distincte de .nav-sinceres (nav commune de toutes les pages membres).
   La classe .scrolled est ajoutée par JS quand l'utilisateur scrolle > 60px.
   body.home .nav-sinceres : masqué sur la home pour éviter le doublon de navs.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Masquer la nav commune (header.php) sur la home — elle est remplacée par .nav */
body.home .nav-sinceres {
  display: none;
}

.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-h);
  z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 48px;
  background: rgba(0,0,0,0.3);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px); /* Safari */
  border-bottom: 1px solid rgba(255,255,255,0.08);
  transition: background 0.4s;
}

/* État scrollé : fond sombre semi-opaque pour lisibilité */
.nav.scrolled {
  background: rgba(28,28,28,0.95);
}

.nav-logo {
  font-family: var(--font-serif);
  font-size: 22px; font-weight: 600;
  color: white; text-decoration: none;
  letter-spacing: -0.02em;
}
.nav-logo em {
  font-style: italic;
  color: #F4A0B5; /* Rose pâle sur fond sombre */
}

/* Liste de liens nav home (générée par wp_nav_menu() — ≠ du .nav-sinceres des autres pages) */
.nav-links {
  display: flex; align-items: center; gap: 32px;
  list-style: none;
}

/* ── État passif ──
   Scopé sur #mainNav (ID unique de la nav home) — garantit que ces règles ne s'appliquent
   jamais à .nav-sinceres (autres pages), peu importe la spécificité des règles en section 4.
   La spécificité d'un sélecteur ID (1-0-0) bat tout sélecteur de classe (0-x-x).
   Opacité 0.82 : légèrement plus lisible que 0.70, tout en gardant la hiérarchie visuelle.
   text-shadow : apporte du contraste sur les images claires du slider (overlay en haut = 25% seulement). */
#mainNav .nav-links a {
  font-size: 13px; font-weight: 400;
  color: rgba(255,255,255,0.82);
  text-decoration: none;
  transition: color 0.2s, text-shadow 0.2s;
  text-shadow: 0 1px 3px rgba(0,0,0,0.45);
}

/* ── État hover ──
   Blanc pur + ombre légèrement renforcée pour "soulever" le lien au survol.
   La spécificité ID écrase aussi .nav-links li:nth-last-child(2) > a (section 4)
   qui colorait "connexion" en gris var(--muted) même sur la nav home. */
#mainNav .nav-links a:hover {
  color: white;
  text-shadow: 0 1px 5px rgba(0,0,0,0.55);
}

/* ── État actif (page courante) ──
   WordPress ajoute automatiquement .current-menu-item sur le <li> du lien de la page en cours.
   #F4A0B5 : rose pâle — même ton que .nav-logo em, signature douce du site. */
#mainNav .nav-links li.current-menu-item > a {
  color: #F4A0B5;
  text-shadow: 0 1px 5px rgba(0,0,0,0.55);
}

/* ── Séparateur ancres / liens WP ──
   Trait vertical blanc semi-transparent entre "La communauté" et les liens WordPress.
   Injecté en PHP dans items_wrap via <li class="nav-sep" aria-hidden="true">.
   pointer-events:none : la barre ne réagit pas au clic ni au hover. */
#mainNav .nav-links .nav-sep {
  width: 1px;
  height: 18px;
  background: rgba(255,255,255,0.28);
  border-radius: 1px;
  align-self: center;
  margin: 0 4px;
  pointer-events: none;
}

/* Bouton CTA dans la nav : fond rose, pill radius */
.nav-cta {
  padding: 9px 22px;
  background: var(--rose);
  color: white !important;
  border-radius: var(--radius-pill);
  font-weight: 500 !important;
  transition: background 0.2s, transform 0.2s !important;
}
.nav-cta:hover {
  background: #b8435f !important;
  transform: translateY(-1px);
}

/* ═══════════════ 11C. HERO — slider plein écran ═══════════════
   Le hero couvre tout le viewport (100vh) avec un slider d'images en fond.
   Les images elles-mêmes (.slide:nth-child background-image) sont injectées
   en inline dans home.php car leur URL dépend de get_template_directory_uri()
   (PHP) — impossible dans un fichier CSS statique.
   ═══════════════════════════════════════════════════════════════ */

.hero {
  position: relative;
  height: 100vh;        /* Hauteur fixe : permet aux enfants position:absolute (slider, slides) de s'étirer correctement */
  min-height: 100vh;    /* Sécurité : si le contenu dépasse, la section grandit quand même */
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  overflow: hidden;     /* Cache les débordements du slider — le contenu doit tenir dans 100vh grâce aux media queries */
  background: var(--charcoal); /* Fond sombre de secours : texte blanc lisible si images non chargées */
}

/* Conteneur des slides — remplit tout le hero
   inset:0 remplacé par top/left/width/height explicites — plus fiable dans les flex containers */
.slider {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
}

.slide {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  opacity: 0;
  transition: opacity 1.8s ease-in-out;
  background-size: cover;
  background-position: center;
}
.slide.active { opacity: 1; }

/* Dégradé sombre vertical : léger en haut, fort en bas pour lisibilité du texte */
.slide-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom,
    rgba(0,0,0,0.25) 0%,
    rgba(0,0,0,0.38) 45%,
    rgba(0,0,0,0.70) 100%);
}

/* Légendes des slides (numéro + titre + sous-titre) */
.slide-caption {
  position: absolute; bottom: 120px; left: 50%;
  transform: translateX(-50%);
  text-align: center; z-index: 3;
  opacity: 0; transition: opacity 1s ease;
  width: 90%; max-width: 600px;
}
.slide-caption.active { opacity: 1; }

.slide-caption-num {
  font-size: 11px; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase;
  color: rgba(255,255,255,.5); margin-bottom: 6px;
}
.slide-caption-title {
  font-family: var(--font-serif);
  font-size: clamp(16px, 2.5vw, 24px);
  font-weight: 600; color: white; margin-bottom: 4px;
}
.slide-caption-sub {
  font-size: clamp(12px, 1.5vw, 14px);
  font-weight: 300; color: rgba(255,255,255,.65); font-style: italic;
}

/* Points de navigation du slider (dots) */
.slider-dots {
  position: absolute; bottom: 88px; left: 50%;
  transform: translateX(-50%);
  display: flex; gap: 8px; z-index: 4;
}
.slider-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255,255,255,.35);
  transition: all .4s; cursor: pointer; border: none;
}
/* Dot actif : élargi en rectangle pour indiquer le slide courant */
.slider-dot.active {
  width: 24px; border-radius: 3px; background: white;
}

/* Barre de progression animée en bas de l'écran (5s par slide) */
.slider-progress {
  position: absolute; bottom: 0; left: 0;
  height: 3px; background: rgba(201,79,109,.85);
  width: 0%; z-index: 4; transition: width 5s linear;
}
.slider-progress.running { width: 100%; }

/* Contenu hero (texte + formulaire) — au-dessus du slider via z-index */
.hero-content {
  position: relative; z-index: 2;
  display: flex; flex-direction: column;
  align-items: center; width: 100%;
  padding: 120px 24px 180px; /* 120px top pour passer sous la nav fixe */
}

/* ── Écrin pill du logo hero ──
   Masque les bords nets du PNG (fond crème non transparent) dans un pill glass.
   backdrop-filter : effet verre dépoli identique à la nav home (.scrolled).
   background rgba(crème, 0.18) : fond quasi-invisible qui harmonise le crème
   du PNG avec le hero sombre — pas de rupture visuelle.
   border-radius:100px : pill parfait quelque soit la taille.
   L'animation est sur le wrap : tout l'écrin apparaît en fondu. */
.hero-logo-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(250, 247, 244, 0.18);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: 100px;
  padding: 18px 52px;
  margin: 0 auto 28px;
  border: 1px solid rgba(255,255,255,0.14);
  animation: fadeDown .7s ease both;
  animation-delay: 0s;
}

/* Image du logo à l'intérieur du pill — pas d'animation propre (c'est le wrap qui anime) */
.hero-logo {
  display: block;
  width: 380px;
  max-width: 100%;
}

.hero-eyebrow {
  font-size: 11px; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase;
  color: rgba(255,255,255,.78); margin-bottom: 20px;
  animation: fadeDown .7s .15s ease both; /* légèrement décalé après le logo */
}

.hero-content h1 {
  font-family: var(--font-serif);
  font-size: clamp(44px, 7vw, 88px);
  font-weight: 600; line-height: 1.0; color: white;
  text-align: center; margin-bottom: 16px;
  animation: fadeDown .7s .1s ease both;
}
/* "votre histoire" en italique rose pâle */
.hero-content h1 em { font-style: italic; color: #F4A0B5; }

.hero-content > p {
  font-size: clamp(14px, 1.8vw, 17px); font-weight: 300;
  color: rgba(255,255,255,.75); max-width: 460px;
  text-align: center; line-height: 1.75; margin-bottom: 32px;
  animation: fadeDown .7s .2s ease both;
}

/* ═══════════════ 11D. FORMULAIRE MULTI-ÉTAPES (hero) ═══════════════
   Formulaire en 3 étapes : 1. type de recherche → 2. genre → 3. email.
   Les étapes sont masquées par défaut (display:none) et activées par JS (.active).
   La soumission redirige vers /inscription/ avec les paramètres en query string.
   ═══════════════════════════════════════════════════════════════════ */

.hero-form-wrap {
  width: 100%; max-width: 460px;
  animation: fadeUp .8s .35s ease both;
}

.hero-form {
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 20px; overflow: hidden;
  box-shadow: 0 28px 72px rgba(0,0,0,.35);
}

/* Chaque étape est masquée, seule la .active est visible */
.form-step { display: none; padding: 24px 24px 16px; }
.form-step.active { display: block; }

.form-step-title {
  font-family: var(--font-serif);
  font-size: 17px; font-weight: 600;
  color: var(--charcoal); margin-bottom: 4px;
}
.form-step-sub {
  font-size: 12px; color: var(--muted);
  margin-bottom: 16px; font-weight: 300;
}

/* Options de sélection en colonne (étape 1 : type de relation) */
.form-options { display: flex; flex-direction: column; gap: 8px; }

.form-option {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  border: 1.5px solid rgba(0,0,0,.09);
  border-radius: 12px; cursor: pointer;
  transition: all .25s;
  font-size: 14px; color: var(--charcoal);
  background: white; text-align: left; width: 100%;
}
.form-option:hover {
  border-color: var(--rose);
  background: rgba(201,79,109,.04);
  transform: translateX(5px); /* glissement vers la droite au survol */
}
.form-option-icon { font-size: 20px; }

/* Options en grille 3 colonnes (étape 2 : genre) */
.form-options-row {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 8px; margin-bottom: 12px;
}
.form-option-card {
  padding: 12px 6px;
  border: 1.5px solid rgba(0,0,0,.09);
  border-radius: 12px; cursor: pointer;
  transition: all .25s;
  text-align: center; background: white; width: 100%;
}
.form-option-card:hover { border-color: var(--rose); background: rgba(201,79,109,.04); }
.form-option-card.selected { border-color: var(--rose); background: rgba(201,79,109,.09); }
.form-option-card-icon { font-size: 22px; display: block; margin-bottom: 4px; }
.form-option-card-label { font-size: 11px; color: var(--charcoal); }

.form-separator {
  font-size: 12px; color: var(--muted);
  text-align: center; margin: 10px 0 8px; font-weight: 300;
}

/* Champs texte / email (étape 3) */
.form-input {
  width: 100%; padding: 12px 14px;
  border: 1.5px solid rgba(0,0,0,.1);
  border-radius: 12px; font-size: 14px;
  font-family: var(--font-sans);
  color: var(--charcoal); background: white;
  outline: none; transition: border-color .2s;
  margin-bottom: 10px; display: block;
}
.form-input:focus { border-color: var(--rose); }
.form-input::placeholder { color: var(--muted); font-weight: 300; }

/* Bouton "Continuer" / "Découvrir les profils" */
.btn-next {
  width: 100%; padding: 13px;
  background: var(--rose); color: white;
  border: none; border-radius: 12px;
  font-size: 14px; font-weight: 500;
  font-family: var(--font-sans);
  cursor: pointer; transition: all .3s; margin-top: 4px;
}
.btn-next:hover {
  background: #b8435f;
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(201,79,109,.3);
}
.btn-next:disabled {
  background: #ddd;
  transform: none; box-shadow: none; cursor: not-allowed;
}

/* Indicateur de progression (dots en bas du formulaire) */
.form-progress {
  display: flex; align-items: center; justify-content: center;
  gap: 6px; padding: 12px 24px 18px;
}
.form-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(0,0,0,.12); transition: all .3s;
}
/* Dot actif : élargi en rectangle rose */
.form-dot.active { width: 18px; border-radius: 3px; background: var(--rose); }

.form-note {
  text-align: center; font-size: 11px;
  color: var(--muted); margin-top: 8px; font-weight: 300;
}

/* ═══════════════ 11E. BANDEAU "PREUVES SOCIALES" (bas du hero) ═══════════════
   Barre fixée en bas du hero (position:absolute) avec les arguments de confiance.
   Fond semi-transparent avec blur pour rester lisible sur les photos du slider.
   ═══════════════════════════════════════════════════════════════════════════════ */

.hero-proof {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 3;
  background: rgba(0,0,0,.38); backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255,255,255,.1);
  display: flex; justify-content: center;
  gap: 32px; padding: 14px 24px; flex-wrap: wrap;
}
.proof-item {
  display: flex; align-items: center; gap: 7px;
  font-size: 12px; color: rgba(255,255,255,.7); white-space: nowrap;
}
.proof-item span { font-size: 15px; }
.proof-item strong { color: white; font-weight: 500; }

/* ═══════════════ 11F. SECTION PHILOSOPHIE ═══════════════
   Grille 2 colonnes : texte édito à gauche, liste de valeurs à droite.
   ═══════════════════════════════════════════════════════ */

.philosophie {
  padding: 100px 80px;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 80px; align-items: start;
  max-width: 1200px; margin: 0 auto;
}

.philo-label {
  font-size: 11px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--rose); margin-bottom: 20px;
}
.philo h2 {
  font-family: var(--font-serif);
  font-size: clamp(28px, 3.5vw, 44px);
  font-weight: 600; line-height: 1.2; margin-bottom: 24px;
}
.philo h2 em { font-style: italic; color: var(--rose); }
.philo p {
  font-size: 16px; color: var(--muted);
  font-weight: 300; line-height: 1.8; margin-bottom: 16px;
}

/* Liste de valeurs (icône + titre + description) */
.philo-valeurs { display: flex; flex-direction: column; gap: 14px; }
.philo-val {
  display: flex; align-items: flex-start; gap: 16px;
  background: white; border-radius: var(--radius);
  padding: 20px 18px; transition: all .3s;
}
/* Glissement vers la droite au survol (feedback visuel) */
.philo-val:hover { transform: translateX(6px); box-shadow: var(--shadow-md); }

.philo-val-icon {
  width: 42px; height: 42px; border-radius: 12px;
  background: rgba(201,79,109,.1);
  display: flex; align-items: center; justify-content: center;
  font-size: 19px; flex-shrink: 0;
}
.philo-val-title { font-size: 14px; font-weight: 500; margin-bottom: 4px; }
.philo-val-desc { font-size: 12px; color: var(--muted); line-height: 1.6; font-weight: 300; }

/* ═══════════════ 11G. GRILLE MEMBRES — home page ═══════════════
   Remplace l'ancien carousel par une grille 3 colonnes statique.
   Deux états gérés côté PHP (home.php) :
     • Visiteur non connecté → photos floutées (.flou), prénoms masqués ("···"),
       overlay CTA inscription (.home-profils-overlay) recouvrant le bas de la grille.
     • Membre connecté       → photos nettes, cloisonnement par abonnement,
       cartes <a> cliquables vers la page publique du profil.
   ════════════════════════════════════════════════════════════════ */

/* Section conteneur — fond charcoal, espace vertical généreux */
.membres {
  background: var(--charcoal);
  padding: 80px 0 100px;
  overflow: hidden;
}

/* Inner wrapper — titre de section uniquement */
.membres-inner {
  max-width: 1200px; margin: 0 auto;
  padding: 0 80px 48px;
}

/* Supra-label : "La communauté" en petites majuscules espacées */
.membres-label {
  font-size: 11px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255,255,255,.35); margin-bottom: 12px;
}

/* Titre de section serif */
.membres-title {
  font-family: var(--font-serif);
  font-size: clamp(26px, 3vw, 40px);
  font-weight: 600; color: white; line-height: 1.2;
}
.membres-title em { font-style: italic; color: #F4A0B5; }

/* ── Conteneur outer de la grille ──
   position:relative indispensable : l'overlay visiteur (.home-profils-overlay)
   est en position:absolute et se positionne par rapport à ce bloc.
   max-width et padding alignés sur .membres-inner pour des marges cohérentes. */
.home-profils-outer {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 80px 40px;
}

/* ── Grille 6 colonnes ──
   repeat(6, 1fr) : 6 cartes en une ligne, chacune ≈ 160px (≈4cm à 96dpi).
   gap: 14px : espacement compact, proportionnel à la taille des cartes.
   Responsive : 4 colonnes à 900px, 3 colonnes à 480px (voir 11L). */
.home-profils-grille {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
}

/* ── Carte membre ──
   Fonctionne à la fois comme <a> (membre connecté) et comme <div> (visiteur).
   aspect-ratio 2/3 : format portrait naturel pour les photos de profil.
   overflow:hidden : contient photo + badge sans débordement.
   text-decoration:none : nécessaire pour la variante <a>. */
.home-carte {
  position: relative;
  display: block;
  aspect-ratio: 2 / 3;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  text-decoration: none;
  transition: transform .3s ease, box-shadow .3s ease;
}
/* Élévation au survol — uniquement pour les membres connectés (cartes <a>) */
.home-carte:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(0,0,0,.45);
}

/* ── Wrap photo ──
   inset:0 = couvre toute la carte.
   position:relative sur .home-carte + position:absolute ici placent
   le wrap en fond total de la carte, laissant .home-carte-info s'y superposer. */
.home-carte-photo-wrap {
  position: absolute;
  inset: 0;
}

/* ── Photo principale ──
   width/height 100% + object-fit:cover : remplit le wrap sans déformation. */
.home-carte-photo {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}

/* ── Photo floutée (visiteurs non connectés) ──
   blur(10px) : flou suffisant pour masquer l'identité sans dégrader l'esthétique.
   brightness(.6) : assombrit légèrement pour contraste avec l'overlay.
   scale(1.12) : compense la perte de netteté sur les bords liée au blur. */
.home-carte-photo.flou {
  filter: blur(10px) brightness(.6);
  transform: scale(1.12);
}

/* ── Badge "En ligne" ──
   Point vert positionné en haut à droite de la carte.
   Visible uniquement pour les membres connectés (conditionnel PHP).
   Le caractère ● est injecté en PHP ; text-shadow simule un glow vert doux. */
.home-carte-online {
  position: absolute;
  top: 10px; right: 10px;
  font-size: 11px; line-height: 1;
  color: #4ade80;
  text-shadow: 0 0 8px rgba(74,222,128,.75);
}

/* ── Infos membre (prénom + ville) ──
   Overlay gradient en bas de la carte.
   gradient to top : noir opaque en bas → transparent vers le haut.
   Pour les visiteurs, PHP affiche "···" à la place des vraies valeurs. */
.home-carte-info {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 40px 14px 14px;
  background: linear-gradient(to top, rgba(0,0,0,.78) 0%, transparent 100%);
}
.home-carte-prenom {
  font-size: 14px; font-weight: 500;
  color: white; margin-bottom: 3px;
}
.home-carte-ville {
  font-size: 12px; font-weight: 300;
  color: rgba(255,255,255,.6);
}

/* ── Overlay visiteur ──
   Positionné en absolu sur .home-profils-outer (position:relative).
   Couvre la partie inférieure de la grille avec un dégradé vers --charcoal.
   Le dégradé commence transparent : les cartes du haut restent partiellement visibles,
   créant une frustration volontaire (donner envie de s'inscrire).
   display:flex + align-items:flex-end : le bloc CTA est ancré en bas. */
.home-profils-overlay {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 140px 24px 40px;
  background: linear-gradient(
    to top,
    var(--charcoal)        40%,
    rgba(28,28,28,.92)     65%,
    transparent            100%
  );
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

/* Bloc textuel centré dans l'overlay */
.home-overlay-content {
  text-align: center;
  max-width: 520px;
}

/* Message d'accroche — invitation à rejoindre la communauté */
.home-overlay-titre {
  font-size: 18px; font-weight: 500;
  color: white; line-height: 1.4;
  margin-bottom: 24px;
}

/* Groupe de boutons CTA — flex row centré, wrap sur mobile */
.home-overlay-btns {
  display: flex; gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* CTA principal : rose plein — appel à l'inscription */
.home-overlay-btn-principal {
  display: inline-block;
  padding: 14px 32px;
  background: var(--rose);
  color: white;
  border-radius: var(--radius-pill);
  text-decoration: none;
  font-size: 14px; font-weight: 500;
  transition: background .3s, transform .2s;
  box-shadow: 0 8px 28px rgba(201,79,109,.35);
}
.home-overlay-btn-principal:hover {
  background: #b8435f;
  transform: translateY(-2px);
}

/* CTA secondaire : contour blanc semi-transparent — lien de connexion */
.home-overlay-btn-secondaire {
  display: inline-block;
  padding: 13px 28px;
  background: transparent;
  color: rgba(255,255,255,.8);
  border: 1px solid rgba(255,255,255,.3);
  border-radius: var(--radius-pill);
  text-decoration: none;
  font-size: 14px; font-weight: 400;
  transition: border-color .3s, color .3s;
}
.home-overlay-btn-secondaire:hover {
  border-color: rgba(255,255,255,.75);
  color: white;
}

/* Lien "Voir tous les profils" — visible uniquement pour les membres connectés */
.membres-cta {
  font-size: 14px; color: rgba(255,255,255,.45);
  font-weight: 300; text-align: center;
  padding-top: 8px;
}
.membres-cta a { color: #F4A0B5; text-decoration: none; font-weight: 500; }
.membres-cta a:hover { text-decoration: underline; }

/* Message affiché si aucun membre validé en base (début de site ou BDD vide) */
.membres-vide {
  text-align: center; padding: 48px 24px;
  color: rgba(255,255,255,.35);
  font-size: 15px; font-weight: 300; font-style: italic;
}

/* ═══════════════ 11H. CTA FINAL ═══════════════ */

.cta-section {
  padding: 120px 24px;
  text-align: center; background: white;
}
.cta-section h2 {
  font-family: var(--font-serif);
  font-size: clamp(30px, 4vw, 52px);
  font-weight: 600; line-height: 1.2; margin-bottom: 20px;
}
.cta-section h2 em { font-style: italic; color: var(--rose); }
.cta-section p {
  font-size: 16px; color: var(--muted);
  font-weight: 300; margin-bottom: 36px;
}

/* Bouton d'appel à l'action principal */
.btn-cta {
  display: inline-block; padding: 16px 40px;
  background: var(--rose); color: white;
  border-radius: var(--radius-pill); text-decoration: none;
  font-size: 15px; font-weight: 500; transition: all .3s;
  box-shadow: 0 12px 36px rgba(201,79,109,.3);
}
.btn-cta:hover {
  background: #b8435f;
  transform: translateY(-2px);
  box-shadow: 0 16px 48px rgba(201,79,109,.4);
}
.cta-note { margin-top: 20px; font-size: 13px; color: var(--muted); font-weight: 300; }

/* ═══════════════ 11I. FOOTER HOME ═══════════════
   Footer propre à la home page (fond charcoal, liens légaux).
   Ne pas confondre avec wp_footer() qui est vide (footer.php minimal).
   ═══════════════════════════════════════════════ */

.footer {
  background: var(--charcoal);
  padding: 48px 80px;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 24px;
}
.footer-logo {
  font-family: var(--font-serif);
  font-size: 20px; font-weight: 600;
  color: white; text-decoration: none;
}
.footer-logo em { font-style: italic; color: #F4A0B5; }

.footer-links { display: flex; gap: 24px; flex-wrap: wrap; }
.footer-links a {
  font-size: 12px; color: rgba(255,255,255,.35);
  text-decoration: none; transition: color .2s;
}
.footer-links a:hover { color: rgba(255,255,255,.7); }

.footer-copy {
  font-size: 12px; color: rgba(255,255,255,.2);
  font-weight: 300; width: 100%; text-align: center; margin-top: 8px;
}

/* ═══════════════ 11J. ANIMATIONS HOME ═══════════════
   Utilisées par le hero (hero-eyebrow, h1, sous-titre, formulaire).
   Les @keyframes globaux (fadeUp, fadeIn, slideIn) sont en section 9.
   ═══════════════════════════════════════════════════ */

@keyframes fadeDown {
  from { opacity: 0; transform: translateY(-16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes slideIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ═══════════════ 11K. ADMIN-BAR — décalage nav home ═══════════════
   WordPress ajoute automatiquement margin-top sur <html> quand la barre
   d'administration est visible (administrateur connecté) :
     • Desktop (≥783px) : html { margin-top: 32px !important; }
     • Mobile  (<783px) : html { margin-top: 46px !important; }
   La nav home est position:fixed sur le viewport — elle ne suit pas ce
   margin-top automatique. Il faut donc décaler son top manuellement.
   ═══════════════════════════════════════════════════════════════════ */

body.admin-bar .nav {
  top: 32px; /* desktop : barre admin = 32px */
}
@media screen and (max-width: 782px) {
  body.admin-bar .nav {
    top: 46px; /* mobile : barre admin = 46px */
  }
}

/* ═══════════════ 11L. RESPONSIVE HOME ═══════════════
   3 breakpoints largeur : 900px (tablette), 768px (mobile), 480px (petit mobile)
   + 2 breakpoints hauteur : 800px, 680px (petits laptops / barre bookmarks)
   ═══════════════════════════════════════════════════ */

/* ── Tablette (≤900px) ── */
@media (max-width: 900px) {

  /* Navigation : le burger remplace les liens horizontaux.
     CORRECTION BUG : entre 768px et 900px, les liens étaient cachés mais le
     burger n'était pas affiché → navigation complètement invisible.
     Fix : on active le burger dès 900px (même logique que la nav standard à 768px). */
  .nav { padding: 0 24px; }
  .nav-burger  { display: flex; }           /* Burger visible dès 900px sur la home */
  .nav-links   { display: none; }           /* Liens horizontaux masqués */
  .nav-links.nav-open {                     /* Menu ouvert par le JS burger */
    display: flex;
    position: fixed;
    top: 72px; left: 0; right: 0;
    background: rgba(250, 247, 244, 0.98);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 0 16px;
    border-bottom: 1px solid rgba(0,0,0,0.08);
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    z-index: 999;
  }
  /* Liens en pleine largeur dans le menu ouvert */
  .nav-links.nav-open li a,
  .nav-links.nav-open a {
    display: block;
    padding: 14px 24px;
    font-size: 15px;
    color: var(--charcoal);
    border-bottom: 1px solid rgba(0,0,0,0.05);
    text-decoration: none;
  }

  /* Hero : padding réduit pour laisser de la place au contenu sur tablette */
  .hero-content { padding: 90px 24px 120px; }
  .hero-logo-wrap { padding: 14px 36px; }
  .hero-logo { width: 280px; }

  /* Philosophie : passage en colonne */
  .philosophie {
    grid-template-columns: 1fr;
    gap: 48px; padding: 64px 24px;
  }

  /* Grille membres : 4 colonnes + padding réduit */
  .membres-inner { padding: 0 24px 36px; }
  .home-profils-outer { padding: 0 24px 32px; }
  .home-profils-grille { grid-template-columns: repeat(4, 1fr); gap: 12px; }

  /* Footer : passage en colonne */
  .footer { padding: 48px 24px; flex-direction: column; align-items: flex-start; }
}

/* ── Mobile (≤768px) ── */
@media (max-width: 768px) {
  /* Hero : padding fortement réduit — le contenu (logo + titre + formulaire)
     doit tenir dans 100vh. Sur iPhone SE (667px), chaque pixel compte. */
  .hero-content  { padding: 70px 16px 90px; }
  .hero-logo-wrap { padding: 12px 28px; margin-bottom: 16px; }
  .hero-logo     { width: 240px; }
  .hero-content > p { margin-bottom: 20px; }
  .hero-form-wrap { max-width: 100%; }      /* Formulaire pleine largeur */
}

/* ── Petit mobile (≤480px) ── */
@media (max-width: 480px) {
  /* Hero : compact maximum */
  .hero-content  { padding: 60px 16px 70px; }
  .hero-logo-wrap { padding: 10px 20px; margin-bottom: 12px; }
  .hero-logo     { width: 190px; }

  /* Preuve sociale : espacement réduit, masquer items 4 et 5 */
  .hero-proof { gap: 16px; }
  .proof-item:nth-child(n+4) { display: none; }

  /* Grille membres : 3 colonnes compactes */
  .home-profils-outer { padding: 0 16px 28px; }
  .home-profils-grille { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .home-carte-prenom  { font-size: 12px; }
  .home-overlay-titre { font-size: 16px; }
}

/* ── Écrans en hauteur contrainte — 3 seuils ──────────────────────────────
   Le hero est en height:100vh + overflow:hidden + justify-content:center.
   Problème : quand hero-content est PLUS HAUT que 100vh, le flex center pousse
   le contenu VERS LE HAUT au-delà du hero div, et overflow:hidden coupe le logo
   derrière la nav fixe (68px).
   Solution : passer en justify-content:flex-start dès que la hauteur est ≤ 900px
   (ex : laptop HiDPI 1440×900 en DevTools) — l'overflow va vers le BAS,
   le logo reste toujours visible sous la nav.
   Les paddings et tailles de police sont réduits progressivement selon la hauteur. */

/* ── 900px : laptop HiDPI (1440×900 en simulation DevTools) ── */
@media (max-height: 900px) {
  /* Ancrage haut : overflow vers bas seulement → logo jamais caché derrière la nav */
  .hero             { justify-content: flex-start; }
  /* 90px top > 68px nav → gap visible de ~22px entre nav et logo */
  .hero-content     { padding-top: 90px; padding-bottom: 80px; }
  /* Réduction du h1 : 88px max → 72px pour gagner ~32px de hauteur */
  .hero-content h1  { font-size: clamp(40px, 5.5vw, 72px); }
  /* Réductions de marges pour compacter le contenu sans le dénaturer */
  .hero-logo-wrap   { margin-bottom: 16px; }
  .hero-content > p { margin-bottom: 20px; }
}

/* ── 800px : laptops 1366×768 (viewport réel ~618px avec barre navigateur) ── */
@media (max-height: 800px) {
  /* padding-top 80px > 68px nav (l'ancien 70px laissait 2px derrière la nav) */
  .hero-content { padding-top: 80px; padding-bottom: 70px; }
}

/* ── 700px : très petites hauteurs (landscape mobile, chrome custom, etc.) ── */
@media (max-height: 700px) {
  /* padding-top 75px : logo juste au-dessus de la nav (68px + 7px de marge) */
  .hero-content    { padding-top: 75px; padding-bottom: 60px; }
  .hero-logo-wrap  { padding: 10px 28px; margin-bottom: 12px; }
  .hero-logo       { width: 240px; }
  .hero-content > p { margin-bottom: 12px; font-size: 14px; }
}
/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║          12. PAGES PUBLIQUES — INSCRIPTION & CONNEXION                 ║
   ║  Page inscription  : rencontres-sinceres.com/inscription/              ║
   ║  Page connexion    : rencontres-sinceres.com/connexion/                ║
   ║  Template inscript.: templates/inscription.php                         ║
   ║  Template connexion: templates/login.php                               ║
   ║  Déplacé depuis inscription.php & login.php le 25 mai 2026             ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */


/* ═══════════════ VARIABLES CSS — états de formulaire ═══════════════
   Ces variables s'ajoutent à celles déjà définies en section 1.
   CSS autorise plusieurs blocs :root — ils se fusionnent.
   On ajoute ici uniquement les variables absentes de la section 1.
   ════════════════════════════════════════════════════════════════════ */
:root {
    /* --or : alias de --gold — utilisé dans les styles inline des PHP */
    /* Exemple : style="background:var(--or)" dans le badge "Le plus choisi" */
    --or:          #C4A882;

    /* Couleurs d'état formulaire — rouge pour les erreurs, vert pour la validation */
    /* Utilisées dans les messages d'erreur, bordures, fonds des encadrés d'alerte */
    --erreur:      #C62828;   /* rouge erreur — textes et bordures */
    --erreur-bg:   #FFEBEE;   /* fond rouge très clair — encadrés d'erreur */
    --erreur-bord: #FFCDD2;   /* bordure rose clair — contours d'erreur */
    --valide:      #2E7D32;   /* vert — champs validés, messages de confirmation */
    --valide-bg:   #E8F5E9;   /* fond vert très clair — feedback positif */
}


/* ═══════════════ 12A. WRAPPER DE PAGE — centrage de la carte ═══════════════
   .inscription-page et .connexion-page enveloppent toute la page
   (fond crème + carte blanche centrée) — flexbox pour le centrage.

   POURQUOI calc(100vh - 72px) et pas min-height: 100vh :
   Le header est fixe (position:fixed, height:72px). Le body a padding-top:72px.
   Si on utilise min-height:100vh, la div mesure 100vh + les 72px du body,
   soit plus que l'écran visible. Le centre flex se retrouve décalé hors écran.
   calc(100vh - 72px) donne exactement la hauteur visible sous le header.
   ═══════════════════════════════════════════════════════════════════════════ */
.inscription-page,
.connexion-page {
    width: 100%;                    /* force la pleine largeur même si le parent est flex */
    min-height: calc(100vh - 72px); /* hauteur visible = viewport - header fixe */
    background: var(--cream);       /* fond crème — même couleur que le reste du site */
    display: flex;                  /* active le centrage par flexbox */
    align-items: center;            /* centre la carte verticalement dans la zone */
    justify-content: center;        /* centre la carte horizontalement */
    padding: 60px 20px;             /* espace respirant autour de la carte */
    font-family: var(--font-sans);  /* DM Sans — police du site définie en section 1 */
    box-sizing: border-box;         /* le padding est inclus dans le width:100% */
}


/* ═══════════════ 12B. CHAMPS DE FORMULAIRE — partagés inscription & connexion ═══════════════
   Ces classes (.form-group, .form-label, .form-input…) sont communes aux deux formulaires.
   Scoped sous .inscription-page / .connexion-page pour éviter les conflits
   avec les styles globaux de formulaire de la section 9 (home page).
   ════════════════════════════════════════════════════════════════════════════════════════════ */

/* Groupe de champ : enveloppe le label + le champ + le message d'erreur */
/* margin-bottom crée l'espace vertical entre les champs du formulaire */
.inscription-page .form-group,
.connexion-page .form-group {
    margin-bottom: 18px;
    display: block; /* réinitialise le display:flex de la section 9 */
    gap: unset;
}

/* Label au-dessus de chaque champ */
/* display:block force le label à occuper toute la ligne — le champ est en dessous */
.inscription-page .form-label,
.connexion-page .form-label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--charcoal);
    margin-bottom: 6px; /* espace entre le label et le champ */
}

/* Astérisque rouge indiquant un champ obligatoire */
/* Affiché dans le label via <span class="obligatoire">*</span> */
.form-label .obligatoire {
    color: var(--rose);
    margin-left: 2px;
}

/* Mention "(optionnel)" en gris discret à côté du label */
.form-label .optionnel {
    color: var(--muted);
    font-weight: 400;
    font-size: 12px;
    margin-left: 4px;
}

/* Style de base appliqué à tous les champs : input, select et textarea */
/* width:100% + box-sizing:border-box = le champ prend toute la largeur disponible */
.inscription-page .form-input,
.connexion-page .form-input {
    width: 100%;
    padding: 12px 16px;
    border: 1.5px solid #E0D8D2; /* bordure gris-beige neutre au repos */
    border-radius: 10px;
    font-size: 14px;
    font-family: inherit;         /* hérite de la police définie sur le wrapper */
    color: var(--charcoal);
    background: white;
    outline: none;                /* on supprime le focus natif du navigateur */
    transition: border-color 0.2s, box-shadow 0.2s; /* animation fluide au focus */
    box-sizing: border-box;       /* le padding est inclus dans la largeur déclarée */
    appearance: auto;             /* réinitialise appearance:none de la section 9 */
}

/* Champ actif (cliqué) : anneau rose discret + bordure rose */
.inscription-page .form-input:focus,
.connexion-page .form-input:focus {
    border-color: var(--rose);
    box-shadow: 0 0 0 3px rgba(201,79,109,0.1);
}

/* Champ en erreur : bordure rouge + légère ombre rouge */
/* Classe ajoutée par JS (afficherErreur) quand la validation échoue */
.inscription-page .form-input.erreur,
.connexion-page .form-input.erreur {
    border-color: var(--erreur);
    box-shadow: 0 0 0 3px rgba(198,40,40,0.08);
}

/* Champ validé : bordure verte — feedback positif immédiat */
/* Classe ajoutée par JS (effacerErreur) quand la validation réussit */
.inscription-page .form-input.valide,
.connexion-page .form-input.valide {
    border-color: var(--valide);
}

/* Message d'erreur sous un champ */
/* Invisible par défaut — la classe .visible (ajoutée par JS) l'affiche */
.form-erreur {
    font-size: 12px;
    color: var(--erreur);
    margin-top: 5px;
    display: none;      /* caché par défaut */
    padding-left: 2px;
    line-height: 1.4;
}
.form-erreur.visible {
    display: block;     /* affiché par JS quand une erreur est détectée */
}

/* Grille 2 colonnes dans les formulaires (Prénom/Nom, Date/Genre) */
/* Surcharge la règle de la section 9 (.form-grid-2 gap:16px) */
/* On utilise 14px ici pour un résultat plus compact dans la carte formulaire */
.inscription-page .form-grid-2,
.connexion-page .form-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr; /* deux colonnes de taille égale */
    gap: 14px;
}

/* ── Select : chevron personnalisé ── */
/* appearance:none supprime la flèche native du navigateur */
/* On la remplace par un SVG inline encodé pour un look cohérent cross-browser */
.inscription-page select.form-input,
.connexion-page select.form-input {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236B6460' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px; /* espace réservé pour le chevron à droite */
}

/* ── Textarea : redimensionnable uniquement en hauteur ── */
/* resize:vertical bloque le redimensionnement horizontal qui casserait le layout */
.inscription-page textarea.form-input,
.connexion-page textarea.form-input {
    resize: vertical;
    min-height: 80px;
}

/* ── Wrapper pour les champs avec icône à droite (pseudo, email, mot de passe) ── */
/* position:relative est nécessaire pour que l'icône (position:absolute) se positionne */
/* par rapport au champ et non par rapport à la page entière */
.pseudo-wrap,
.mdp-wrap {
    position: relative;
}

/* Icône ou statut flottant à droite du champ (✅ ❌ ⏳ 👁) */
/* position:absolute + transform:translateY(-50%) centre l'icône verticalement dans le champ */
.pseudo-statut,
.mdp-oeil {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%); /* centrage vertical parfait quelle que soit la hauteur */
    font-size: 16px;
    color: var(--muted);
    user-select: none; /* l'icône ne peut pas être sélectionnée avec la souris */
}

/* L'œil du mot de passe est cliquable pour afficher/masquer le mot de passe */
.mdp-oeil {
    cursor: pointer;
    transition: color 0.2s;
}
.mdp-oeil:hover {
    color: var(--rose);
}

/* ── Barre de force du mot de passe ── */
/* Barre de progression colorée sous le champ mot de passe */
/* Sa largeur et sa couleur sont gérées par JS selon le nombre de critères remplis (0/4) */
.mdp-force-wrap {
    margin-top: 6px;
}
.mdp-force-barre {
    height: 4px;
    background: #E0D8D2;     /* gris clair = barre vide */
    border-radius: 100px;
    overflow: hidden;
    margin-bottom: 4px;
}
.mdp-force-fill {
    height: 100%;
    border-radius: 100px;
    transition: width 0.3s, background 0.3s; /* animation fluide quand la force change */
    width: 0%;               /* largeur initiale à 0 — JS la met à jour à chaque frappe */
}
.mdp-force-texte {
    font-size: 11px;
    /* couleur gérée inline par JS (rouge ou vert selon le score) */
}

/* ── Genre : boutons radio stylisés en cases cliquables ── */
/* Les vrais radio buttons sont invisibles (opacity:0) mais restent actifs */
/* Le style visible est appliqué sur le label adjacent via le sélecteur + */
.genre-options {
    display: flex;
    gap: 10px;
}
.genre-option {
    flex: 1;         /* chaque option (Homme/Femme/Autre) prend la même largeur */
    position: relative;
}
.genre-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0; /* radio button invisible mais fonctionnel au clic */
}
.genre-option label {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 8px;
    border: 1.5px solid #E0D8D2;
    border-radius: 10px;
    font-size: 13px;
    color: var(--muted);
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}
/* Quand le radio est coché, le label correspondant passe en rose */
.genre-option input[type="radio"]:checked + label {
    border-color: var(--rose);
    background: var(--rose-light);
    color: var(--rose);
    font-weight: 500;
}
/* Erreur genre : les labels passent en rouge si aucune option n'est choisie */
/* Classe ajoutée par JS sur .genre-options quand la validation échoue */
.genre-options.erreur-genre label {
    border-color: var(--erreur);
}

/* ── Niveaux d'abonnement — grandes cartes radio ── */
/* Même principe que le genre mais avec une carte plus détaillée (nom + desc + prix) */
.niveaux-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.niveau-option {
    position: relative;
}
.niveau-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
}
.niveau-label {
    display: flex;
    align-items: center;
    justify-content: space-between; /* description à gauche, prix à droite */
    padding: 14px 16px;
    border: 1.5px solid #E0D8D2;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
}
.niveau-option input[type="radio"]:checked + .niveau-label {
    border-color: var(--rose);
    background: var(--rose-light); /* fond rose clair quand sélectionné */
}
.niveau-info {
    flex: 1; /* la partie description prend tout l'espace disponible */
}
.niveau-nom {
    font-size: 14px;
    font-weight: 600;
    color: var(--charcoal);
    margin-bottom: 2px;
}
.niveau-desc {
    font-size: 12px;
    color: var(--muted);
    line-height: 1.4;
}
.niveau-prix {
    font-size: 15px;
    font-weight: 600;
    color: var(--rose);
    white-space: nowrap;  /* empêche le prix de se couper en deux lignes */
    margin-left: 12px;
}
.niveau-essai {
    font-size: 11px;
    color: var(--muted);
    font-weight: 400;
}

/* ── Cases à cocher (CGU, politique de confidentialité) ── */
/* align-items:flex-start aligne le haut de la case avec le haut du texte */
/* quand le texte du label est sur plusieurs lignes */
.checkbox-group {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
}
.checkbox-group input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-top: 2px;      /* décalage optique pour aligner la case avec la première ligne */
    flex-shrink: 0;       /* la case ne rétrécit pas si le label est long */
    accent-color: var(--rose); /* couleur de la coche native (CSS moderne, bien supporté) */
    cursor: pointer;
}
.checkbox-group label {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.5;
    cursor: pointer;
}
.checkbox-group label a {
    color: var(--rose);
    text-decoration: none;
}
.checkbox-group label a:hover {
    text-decoration: underline;
}

/* ── Boutons dans les pages publiques (inscription & connexion) ── */
/* .btn-primary est déjà défini en section 3 avec display:inline-block */
/* Pour les formulaires, on a besoin de boutons pleine largeur (width:100%) */
/* On surcharge uniquement dans le contexte de ces pages via des sélecteurs plus spécifiques */
/* pour ne pas affecter les boutons ailleurs sur le site (landing, home page...) */
.inscription-page .btn-primary,
.connexion-page .btn-primary {
    width: 100%;        /* pleine largeur dans la carte formulaire */
    display: block;     /* remplace inline-block de la section 3 */
    padding: 14px;
    border-radius: var(--radius-pill);
    font-size: 15px;
    font-weight: 500;
    margin-top: 8px;
    /* background, color, border, transition : hérités de .btn-primary en section 3 */
}

/* Bouton secondaire (retour à l'étape précédente dans l'inscription) */
/* Fond transparent avec bordure — moins proéminent que le bouton principal */
/* Surcharge le .btn-secondary global de la section 3 dans le contexte inscription */
.inscription-page .btn-secondary {
    width: 100%;
    padding: 12px;
    background: transparent;
    color: var(--muted);
    border: 1.5px solid #E0D8D2;
    border-radius: var(--radius-pill);
    font-size: 14px;
    font-family: var(--font-sans);
    cursor: pointer;
    transition: all 0.2s;
    margin-top: 8px;
    display: block;
}
.inscription-page .btn-secondary:hover {
    border-color: var(--rose);
    color: var(--rose);
}

/* ── Récapitulatif d'erreurs en haut du formulaire ── */
/* S'affiche quand le membre clique "Continuer" ou "Envoyer" avec des erreurs */
/* Donne une vue d'ensemble de tous les problèmes à corriger */
/* Caché par défaut — JS ajoute .visible pour le rendre visible */
.recap-erreurs {
    background: var(--erreur-bg);
    border: 1px solid var(--erreur-bord);
    border-left: 4px solid var(--erreur); /* barre rouge sur le côté gauche */
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 20px;
    display: none;
}
.recap-erreurs.visible {
    display: block;
}
.recap-erreurs-titre {
    font-size: 13px;
    font-weight: 600;
    color: var(--erreur);
    margin-bottom: 8px;
}
.recap-erreurs ul {
    margin: 0 0 0 16px;
    padding: 0;
    list-style: disc; /* liste à puces pour les erreurs */
}
.recap-erreurs ul li {
    font-size: 13px;
    color: var(--erreur);
    line-height: 1.7;
}

/* ── Autocomplétion ville ── */
/* Liste déroulante de suggestions affichée sous le champ Ville */
/* Alimentée en temps réel par l'API Adresse du gouvernement français */
/* (api-adresse.data.gouv.fr) — service gratuit, sans clé API */
.ville-wrap {
    position: relative; /* nécessaire pour que la liste se positionne sous le champ */
}
.ville-suggestions {
    display: none;             /* cachée par défaut */
    position: absolute;
    top: 100%;                 /* commence juste en dessous du champ */
    left: 0;
    right: 0;
    z-index: 100;              /* par-dessus les autres éléments du formulaire */
    background: white;
    border: 1.5px solid var(--rose); /* bordure rose cohérente avec le focus du champ */
    border-top: none;          /* pas de double bordure entre le champ et la liste */
    border-radius: 0 0 10px 10px;
    box-shadow: 0 8px 24px rgba(28,28,28,0.1);
    max-height: 200px;
    overflow-y: auto;          /* scrollable si plus de 6 résultats */
}
.ville-suggestions.visible {
    display: block;            /* JS ajoute .visible quand des résultats arrivent */
}
.ville-suggestion-item {
    padding: 10px 14px;
    font-size: 13px;
    color: var(--charcoal);
    cursor: pointer;
    border-bottom: 1px solid #F0E8E0;
    transition: background 0.15s;
}
.ville-suggestion-item:last-child {
    border-bottom: none; /* pas de bordure sur le dernier élément */
}
.ville-suggestion-item:hover {
    background: var(--rose-light);
    color: var(--rose);
}
/* Code postal affiché en plus petit à côté du nom de la ville */
.ville-suggestion-item .cp {
    color: var(--muted);
    font-size: 11px;
    margin-left: 6px;
}


/* ═══════════════ 12C. PAGE INSCRIPTION — éléments spécifiques ═══════════════ */

/* La carte blanche — boîte principale qui contient tout le formulaire */
/* overflow:hidden : les coins arrondis de la carte masquent les bords du header rose */
.inscription-carte {
    background: white;
    border-radius: 24px;
    box-shadow: 0 8px 48px rgba(28,28,28,0.08);
    width: 100%;
    max-width: 560px; /* formulaire d'inscription plus large (2 étapes, plus de champs) */
    overflow: hidden;
}

/* Bandeau rose en haut de la carte */
.inscription-header {
    background: var(--rose);
    padding: 32px 40px 28px;
    text-align: center;
}

/* "Sincères" en italique — reprise de la typographie de la landing page */
.inscription-logo {
    font-family: var(--font-serif); /* Playfair Display */
    font-size: 28px;
    color: white;
    font-style: italic;
    margin-bottom: 8px;
}

/* Sous-titre dans le header de la carte */
.inscription-titre {
    font-size: 14px;
    color: rgba(255,255,255,0.85); /* blanc légèrement transparent */
}

/* Indicateur d'étapes — la barre "1 → 2" en haut du formulaire */
/* flexbox pour aligner les bulles et la ligne entre elles */
.etapes-indicateur {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 40px 0;
}

/* Bulle numérotée (1 ou 2) */
/* Trois états gérés par JS via les classes : défaut (gris) / .active (rose) / .fait (rose clair) */
.etape-bulle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    border: 2px solid #CCCCCC;
    background: white;
    color: #CCCCCC;
    transition: all 0.3s;
    position: relative;
    z-index: 1; /* au-dessus de la ligne */
}
.etape-bulle.active {
    border-color: var(--rose);
    background: var(--rose);
    color: white; /* étape en cours : bulle rose pleine */
}
.etape-bulle.fait {
    border-color: var(--rose);
    background: var(--rose-light);
    color: var(--rose); /* étape passée : bulle rose clair */
}

/* Ligne horizontale entre les deux bulles */
.etape-ligne {
    flex: 1;
    height: 2px;
    background: #CCCCCC;
    transition: background 0.3s;
    max-width: 80px; /* longueur maximale de la ligne */
}
.etape-ligne.active {
    background: var(--rose); /* la ligne devient rose quand l'étape 2 est atteinte */
}

/* Texte optionnel sous chaque bulle (non utilisé actuellement mais prévu) */
.etape-label {
    font-size: 11px;
    color: var(--muted);
    text-align: center;
    width: 36px;
}
.etape-label.active {
    color: var(--rose);
    font-weight: 600;
}

/* Corps du formulaire — l'espace entre le header rose et la note de bas de page */
.inscription-corps {
    padding: 28px 40px 36px;
}

/* Note de bas de la carte (déjà membre ? · données protégées · 48h...) */
.inscription-note {
    text-align: center;
    font-size: 12px;
    color: var(--muted);
    margin-top: 20px;
    padding: 0 40px 24px;
    line-height: 1.6;
}
.inscription-note a {
    color: var(--rose);
    text-decoration: none;
}

/* ── Popup Premium ── */
/* S'ouvre quand le membre clique sur la carte "Premium" dans le formulaire */
/* Explique que ce niveau n'est pas disponible à l'inscription directe */

/* Fond semi-transparent qui bloque l'interaction avec le reste de la page */
/* inset:0 = top:0; right:0; bottom:0; left:0 — raccourci CSS moderne */
.popup-overlay {
    display: none;                  /* caché par défaut */
    position: fixed;
    inset: 0;                       /* couvre toute la fenêtre du navigateur */
    background: rgba(28,28,28,0.6);
    z-index: 1000;                  /* par-dessus la nav (z-index:1000) */
    align-items: center;            /* centrage vertical de la boîte */
    justify-content: center;        /* centrage horizontal de la boîte */
    padding: 20px;
}
.popup-overlay.visible {
    display: flex; /* JS ajoute .visible via ouvrirPopupPremium() */
}

/* La boîte blanche du popup */
.popup-boite {
    background: white;
    border-radius: 20px;
    padding: 32px;
    max-width: 480px;
    width: 100%;
    box-shadow: 0 24px 80px rgba(28,28,28,0.2);
    position: relative; /* pour positionner la croix de fermeture en absolu */
}

/* Croix × de fermeture — positionnée en haut à droite de la boîte */
.popup-fermer {
    position: absolute;
    top: 16px;
    right: 20px;
    font-size: 22px;
    cursor: pointer;
    color: var(--muted);
    line-height: 1;
}
.popup-fermer:hover {
    color: var(--rose);
}

/* Titre "✦ Le niveau Premium" */
.popup-titre {
    font-family: var(--font-serif);
    font-size: 20px;
    font-weight: 600;
    color: var(--charcoal);
    margin-bottom: 8px;
}

/* Sous-titre en rose */
.popup-sous-titre {
    font-size: 13px;
    color: var(--rose);
    font-weight: 500;
    margin-bottom: 16px;
}

/* Liste des avantages Premium */
.popup-liste {
    list-style: none;
    margin: 0 0 20px 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.popup-liste li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    color: var(--charcoal);
    line-height: 1.5;
}
/* Diamant ✦ en or avant chaque élément de la liste */
.popup-liste li::before {
    content: '✦';
    color: var(--gold); /* --gold défini en section 1 */
    font-size: 11px;
    margin-top: 2px;
    flex-shrink: 0;
}

/* Encadré rouge d'avertissement dans le popup */
.popup-alerte {
    background: var(--erreur-bg);
    border-left: 4px solid var(--erreur);
    border-radius: 0 8px 8px 0;
    padding: 12px 14px;
    font-size: 12px;
    color: var(--erreur);
    line-height: 1.5;
    margin-bottom: 20px;
    font-weight: 500;
}

/* Bouton principal du popup */
.popup-btn {
    width: 100%;
    padding: 13px;
    background: var(--rose);
    color: white;
    border: none;
    border-radius: var(--radius-pill);
    font-size: 14px;
    font-weight: 500;
    font-family: var(--font-sans);
    cursor: pointer;
    transition: background 0.2s;
}
.popup-btn:hover {
    background: var(--rose-dark);
}


/* ═══════════════ 12D. PAGE CONNEXION — éléments spécifiques ═══════════════ */

/* La carte blanche — plus étroite que l'inscription (formulaire plus simple) */
.connexion-carte {
    background: white;
    border-radius: 24px;
    box-shadow: 0 8px 48px rgba(28,28,28,0.08);
    width: 100%;
    max-width: 480px; /* 80px moins large que l'inscription — proportionnel au contenu */
    overflow: hidden;
}

/* Bandeau rose en haut de la carte de connexion */
.connexion-header {
    background: var(--rose);
    padding: 32px 40px 28px;
    text-align: center;
}

/* "Sincères" en italique — même style que l'inscription pour la cohérence */
.connexion-logo {
    font-family: var(--font-serif);
    font-size: 28px;
    color: white;
    font-style: italic;
    margin-bottom: 8px;
}

/* Sous-titre "Connexion à votre espace membre" */
.connexion-titre {
    font-size: 14px;
    color: rgba(255,255,255,0.85);
}

/* Corps du formulaire de connexion */
.connexion-corps {
    padding: 32px 40px 36px;
}

/* Message d'erreur global affiché en haut du formulaire de connexion */
/* Apparaît quand traitement_login.php renvoie une erreur (identifiants erronés, */
/* compte suspendu, etc.) — stocké en session par traitement_login.php */
.connexion-erreur {
    background: var(--erreur-bg);
    border: 1px solid var(--erreur-bord);
    border-left: 4px solid var(--erreur);
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 24px;
    font-size: 14px;
    color: var(--erreur);
    font-weight: 500;
    line-height: 1.5;
}

/* Lien "Mot de passe oublié ?" sous le champ mot de passe */
/* display:block + text-align:right le place à droite sous le champ */
.mdp-oublie {
    display: block;
    text-align: right;
    font-size: 12px;
    color: var(--muted);
    text-decoration: none;
    margin-top: 6px;
    transition: color 0.2s;
}
.mdp-oublie:hover {
    color: var(--rose);
}

/* Note de bas de la carte connexion (pas encore membre ? → Rejoindre Sincères) */
.connexion-note {
    text-align: center;
    font-size: 13px;
    color: var(--muted);
    margin-top: 20px;
    padding: 0 40px 28px;
    line-height: 1.7;
}
.connexion-note a {
    color: var(--rose);
    text-decoration: none;
    font-weight: 500;
}
.connexion-note a:hover {
    text-decoration: underline;
}


/* ═══════════════ 12E. RESPONSIVE — Inscription & Connexion (max-width: 600px) ═══════════════ */

@media (max-width: 600px) {

    /* Pas de padding latéral sur le wrapper de page sur mobile */
    /* La carte occupe toute la largeur de l'écran */
    .inscription-page,
    .connexion-page {
        padding: 20px 0;
    }

    /* Carte sans bords arrondis ni ombre sur mobile */
    /* Pleine largeur pour maximiser l'espace de saisie */
    .inscription-carte,
    .connexion-carte {
        border-radius: 0;
        box-shadow: none;
    }

    /* Header de carte : padding réduit sur mobile */
    .inscription-header,
    .connexion-header {
        padding: 24px 20px 20px;
    }

    /* Corps du formulaire : padding latéral réduit sur mobile */
    .inscription-corps,
    .connexion-corps {
        padding: 20px 20px 28px;
    }

    /* Indicateur d'étapes : padding adapté au format mobile */
    .etapes-indicateur {
        padding: 20px 20px 0;
    }

    /* Grille 2 colonnes → 1 colonne sur mobile */
    /* Les champs Prénom/Nom et Date/Genre s'empilent verticalement */
    .inscription-page .form-grid-2,
    .connexion-page .form-grid-2 {
        grid-template-columns: 1fr;
    }

    /* Notes de bas de carte : padding latéral réduit */
    .inscription-note,
    .connexion-note {
        padding: 0 20px 20px;
    }
}


/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  13. TROMBINOSCOPE                                                       ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */

.profils-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 24px;
}

.carte-membre {
  background: white;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid rgba(201,79,109,0.08);
  transition: transform var(--transition), box-shadow var(--transition);
  cursor: pointer;
}
.carte-membre:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.carte-photo {
  width: 100%;
  aspect-ratio: 4/3;
  background: var(--warm);
  overflow: hidden;
  position: relative;
}
.carte-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
}

/* Photo floutée pour non connectés */
.carte-photo img.flou {
  filter: blur(10px) brightness(0.7);
  transform: scale(1.08);
}

.carte-infos {
  padding: 16px 18px;
}
.carte-infos h3 {
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 4px;
}
.carte-infos p {
  font-size: 13px;
  color: var(--muted);
  margin: 0;
}

.carte-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--rose-light);
  color: var(--rose-dark);
  font-size: 11px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  margin-top: 8px;
}


/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║                         TROMBINOSCOPE                                  ║
   ║  Page : rencontres-sinceres.com/profils/                               ║
   ║  Template : templates/pages-membres/page-profils.php                   ║
   ║  Déplacé depuis page-profils.php le 23 mai 2026                        ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */

  /* ═══════════════ LAYOUT ═══════════════ */
  /* RENOMMÉ : .page → .profils-layout
     .page est une classe WordPress automatiquement ajoutée sur <body> sur toutes
     les pages statiques — l'utiliser ici créait un conflit : body devenait un
     flex container sur /connexion/ et /inscription/, empêchant le centrage.
     Le div wrapper dans page-profils.php a été renommé en conséquence. */
  .profils-layout {
    padding-top: 72px;
    display: flex;
    min-height: 100vh;
  }

  /* ═══════════════ SIDEBAR FILTRES ═══════════════ */
  /* RENOMMÉ : .sidebar → .profils-sidebar — évite le conflit avec .sidebar
     de la section 6 (espace membre) qui a un style différent.
     page-profils.php a été mis à jour en conséquence. */
  .profils-sidebar {
    position: sticky;
    top: var(--nav-h);
    width: 280px;
    min-width: 280px;
    height: calc(100vh - var(--nav-h));
    overflow-y: auto;
    padding: 24px 20px;
    border-right: 1px solid rgba(201,79,109,0.08);
    background: var(--white);
  }

  .profils-sidebar::-webkit-scrollbar { width: 4px; }
  .profils-sidebar::-webkit-scrollbar-track { background: transparent; }
  .profils-sidebar::-webkit-scrollbar-thumb { background: var(--rose-mid); border-radius: 4px; }

  .profils-sidebar .sidebar-title {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--muted-light);
    margin-bottom: 20px;
  }

  .filter-group {
    margin-bottom: 24px;
  }

  .filter-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--charcoal);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .filter-label .filter-icon { color: var(--rose); font-size: 14px; }

  /* Toggle genre */
  .genre-toggle {
    display: flex;
    gap: 6px;
  }
  .genre-btn {
    flex: 1;
    padding: 8px 0;
    border: 1.5px solid var(--cream-dark);
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    color: var(--muted);
    cursor: pointer;
    text-align: center;
    transition: all 0.2s;
    background: var(--white);
  }
  .genre-btn:hover { border-color: var(--rose-mid); color: var(--rose); }
  .genre-btn.active { border-color: var(--rose); background: var(--rose-light); color: var(--rose); font-weight: 600; }

  /* Slider âge */
  .age-range {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
  }
  .age-val {
    font-size: 13px;
    font-weight: 600;
    color: var(--rose);
    min-width: 28px;
    text-align: center;
  }

  /*
   * CURSEUR DE PLAGE D'ÂGE — sélecteur précis pour éviter un conflit de cascade
   *
   * Pourquoi "input[type="range"].slider" et pas juste ".slider" ?
   * ─────────────────────────────────────────────────────────────────
   * La home page utilise AUSSI une classe ".slider" (sur un <div>) pour le
   * slider d'images héro. Si on écrit juste ".slider" ici, CSS ne fait pas la
   * différence entre les deux : il applique ces styles (height:4px, background…)
   * au slider d'images aussi, ce qui casse le slider héro.
   *
   * La solution : cibler UNIQUEMENT les balises <input type="range"> qui portent
   * la classe .slider — ce que fait "input[type="range"].slider".
   *   • input        → la balise HTML du champ
   *   • [type="range"] → seulement si c'est un curseur (pas un texte, email, etc.)
   *   • .slider      → et seulement si la classe "slider" est présente
   * Résultat : le <div class="slider"> du hero n'est plus touché.
   *
   * "::-webkit-slider-thumb" cible la petite poignée ronde qu'on fait glisser
   * sur le curseur (le "thumb" = le bouton de déplacement).
   * C'est un pseudo-élément propriétaire Chrome/Safari (-webkit-).
   */
  input[type="range"].slider {
    flex: 1;                     /* Prend tout l'espace disponible dans .age-range */
    -webkit-appearance: none;    /* Supprime le style natif du navigateur */
    height: 4px;                 /* Hauteur de la barre du curseur */
    border-radius: 4px;
    background: linear-gradient(to right, var(--rose) 0%, var(--rose) 40%, var(--cream-dark) 40%);
    /* Dégradé bicolore : rose à gauche (valeur sélectionnée), crème à droite */
    outline: none;
  }
  input[type="range"].slider::-webkit-slider-thumb {
    /* Style de la poignée ronde qu'on glisse sur le curseur */
    -webkit-appearance: none;    /* Supprime le style natif du navigateur */
    width: 18px; height: 18px;
    border-radius: 50%;          /* Rond parfait */
    background: var(--rose);
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(201,79,109,0.3);
    transition: transform 0.15s;
  }
  input[type="range"].slider::-webkit-slider-thumb:hover { transform: scale(1.2); }
  /* Au survol : la poignée grossit légèrement (effet de feedback visuel) */

  /* Checkboxes */
  .check-list { display: flex; flex-direction: column; gap: 8px; }
  .check-item {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
  }
  .check-box {
    width: 18px; height: 18px;
    border: 2px solid var(--muted-light);
    border-radius: 5px;
    background: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    flex-shrink: 0;
  }
  .check-item:hover .check-box { border-color: var(--rose); }
  .check-item.active .check-box { background: var(--rose); border-color: var(--rose); }
  .check-item.active .check-box::after { content: '✓'; color: white; font-size: 11px; font-weight: 700; }
  .check-text { font-size: 13px; color: var(--charcoal); }

  /* Bouton appliquer filtres */
  .btn-appliquer {
    width: 100%;
    padding: 11px;
    border: none;
    border-radius: 9px;
    background: var(--rose);
    color: white;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    margin-top: 16px;
    box-shadow: 0 3px 12px rgba(201,79,109,0.25);
  }
  .btn-appliquer:hover { background: var(--rose-dark); }

  /* Filtres sauvegardés */
  .filtres-sauvegardes { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--cream-dark); }
  .filtres-sauvegardes-title {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--muted-light);
    margin-bottom: 10px;
  }
  .filtre-slot {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 9px;
    border: 1.5px solid var(--cream-dark);
    background: var(--white);
    margin-bottom: 6px;
    cursor: pointer;
    transition: all 0.2s;
  }
  .filtre-slot:hover { border-color: var(--rose-mid); background: var(--rose-light); }
  .filtre-slot.saved { border-color: var(--rose-mid); }
  .filtre-slot.active-slot { border-color: var(--rose); background: var(--rose-light); }
  .filtre-slot-icon { font-size: 14px; flex-shrink: 0; }
  .filtre-slot-info { flex: 1; min-width: 0; }
  .filtre-slot-nom { font-size: 12px; font-weight: 600; color: var(--charcoal); }
  .filtre-slot-detail { font-size: 10px; color: var(--muted-light); }
  .filtre-slot-actions { display: flex; gap: 4px; flex-shrink: 0; }
  .filtre-slot-btn {
    width: 24px; height: 24px;
    border-radius: 5px;
    border: 1px solid var(--cream-dark);
    background: var(--white);
    font-size: 11px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    color: var(--muted);
  }
  .filtre-slot-btn:hover { border-color: var(--rose); color: var(--rose); background: var(--rose-light); }
  .filtre-slot-btn.save { color: #2E7D32; }
  .filtre-slot-btn.save:hover { border-color: #2E7D32; background: #E8F5E9; }
  /* Bouton charger — bleu discret */
  .filtre-slot-btn.load { color: #1565C0; }
  .filtre-slot-btn.load:hover { border-color: #1565C0; background: #E3F2FD; }
  /* Bouton supprimer — rouge discret */
  .filtre-slot-btn.del  { color: #B71C1C; }
  .filtre-slot-btn.del:hover  { border-color: #B71C1C; background: #FFEBEE; }
  /* Nom de slot vide — grisé et non-gras */
  .filtre-slot-nom-empty { color: var(--muted-light); font-weight: 400 !important; }

  /* ═══════════════ FILTRES — CHAMPS TEXTE (recherche + point de départ) ═══ */
  /* Champ de saisie texte dans la sidebar — recherche par nom et ville de départ */
  .filtre-input-text {
    width: 100%;
    padding: 8px 11px;
    border: 1.5px solid var(--cream-dark);
    border-radius: 8px;
    font-size: 12px;
    font-family: inherit;
    color: var(--charcoal);
    background: var(--white);
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.2s;
  }
  .filtre-input-text:focus { border-color: var(--rose-mid); }
  .filtre-input-text::placeholder { color: var(--muted-light); }

  /* ═══════════════ FILTRES — TRANCHE D'ÂGE DOUBLE ═══════════════════════ */
  /* Deux inputs numériques inline pour saisir âge min et max directement */
  .age-range-dual {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
  }
  /* Input number pour l'âge — largeur fixe, centré */
  .age-input {
    width: 52px;
    padding: 6px 8px;
    border: 1.5px solid var(--cream-dark);
    border-radius: 7px;
    font-size: 13px;
    font-family: inherit;
    font-weight: 600;
    color: var(--charcoal);
    background: var(--white);
    text-align: center;
    outline: none;
    box-sizing: border-box;
    -moz-appearance: textfield;       /* Firefox : masquer les flèches */
    transition: border-color 0.2s;
  }
  .age-input::-webkit-inner-spin-button,
  .age-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
  .age-input:focus { border-color: var(--rose-mid); }
  .age-sep  { font-size: 14px; color: var(--muted); font-weight: 300; } /* tiret "—" entre min et max */
  .age-unit { font-size: 12px; color: var(--muted-light); }             /* texte "ans" */

  /* ═══════════════ FILTRES — POINT DE DÉPART ══════════════════════════════ */
  /* Conteneur relatif pour positionner la liste de suggestions en absolu */
  .depart-wrap { position: relative; }
  /* Message d'aide contextuel : s'affiche si ville sans coordonnées GPS */
  .depart-hint {
    font-size: 10px;
    color: var(--muted-light);
    margin-top: 5px;
    line-height: 1.4;
  }

  /* ═══════════════ FILTRES — DISTANCE MAX (boutons preset) ══════════════ */
  /* 5 boutons en 2 rangées : [50km][100km][200km] / [500km][Sans limite]
     flex: 1 1 30% force 3 boutons par ligne (3×30%=90% + 2×gap).
     Les 2 derniers passent à la ligne et se partagent la largeur (flex:1). */
  .distance-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  /* Chaque bouton de distance */
  .dist-btn {
    flex: 1 1 30%;       /* ~3 par ligne — dépasse 30% → passe à la ligne */
    padding: 8px 6px;
    border: 1.5px solid var(--cream-dark);
    border-radius: 7px;
    background: var(--white);
    color: var(--muted);
    font-size: 12px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    text-align: center;
    white-space: nowrap;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
  }
  .dist-btn:hover { border-color: var(--rose-mid); color: var(--rose); background: var(--rose-light); }
  /* Bouton actif — surligné rose */
  .dist-btn.active { border-color: var(--rose); background: var(--rose-light); color: var(--rose); font-weight: 700; }
  /* Hint sous les boutons distance — avertissement si pas de coordonnées GPS */
  .distance-hint {
    font-size: 11px;
    color: #B71C1C;
    margin-top: 5px;
    line-height: 1.4;
  }

  /* ═══════════════ MON-STATUT — GENRE (badge statique) ═══════════════════
     "♂ Homme" affiché en lecture seule à côté du badge abonnement.
     Aucune interaction — simple repère visuel sur le bandeau membre. */
  .genre-statut {
    display: inline-flex;
    align-items: center;
    margin-left: 4px;
    vertical-align: middle;
  }
  .genre-valeur {
    font-size: 12px;
    font-weight: 500;
    color: var(--muted);
  }

  /* ═══════════════ SIDEBAR GENRE — hover popup informatif ═════════════════
     Dans le filtre gauche, au-dessus de Disponibilité.
     Structure :
       .genre-sidebar-wrap    → zone de survol (position:relative pour le popup)
       .genre-recherche-popup → popup AU-DESSUS (bottom:100%, sans gap)
       .genre-popup-mail      → lien mailto dans le popup
     Le popup reste visible quand la souris passe du texte au popup (même parent).
     Disparaît dès que la souris quitte .genre-sidebar-wrap. Aucun JS. */

  /* Conteneur — zone de survol complète, curseur "help" pour indiquer l'info */
  .genre-sidebar-wrap {
    position: relative;       /* ancre le popup en absolu */
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--muted);
    cursor: help;             /* curseur point d'interrogation = info disponible */
    user-select: none;
    padding: 2px 0;
  }
  .genre-sidebar-wrap strong { color: var(--charcoal); font-weight: 600; }
  /* Popup — caché par défaut, affiché au survol de .genre-sidebar-wrap */
  .genre-recherche-popup {
    display: none;
    position: absolute;
    bottom: 100%;             /* au-dessus du texte, sans gap → pas de clignotement */
    left: 0;
    width: 250px;
    background: var(--white);
    border: 1px solid var(--cream-dark);
    border-radius: 10px;
    padding: 12px 14px 10px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.13);
    z-index: 200;
    font-size: 12px;
    color: var(--charcoal);
    line-height: 1.5;
    cursor: default;          /* curseur normal dans le popup */
    pointer-events: auto;
  }
  .genre-recherche-popup p { margin: 0 0 6px; }
  .genre-recherche-popup p:last-child { margin-bottom: 0; }
  /* Déclencher l'affichage au survol */
  .genre-sidebar-wrap:hover .genre-recherche-popup { display: block; }
  /* Lien mailto */
  .genre-popup-mail {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--rose);
    font-weight: 500;
    text-decoration: none;
    font-size: 12px;
    word-break: break-all;
  }
  .genre-popup-mail:hover { text-decoration: underline; }

  /* ═══════════════ FILTRES — BOUTONS APPLIQUER / RÉINITIALISER ══════════ */
  /* Conteneur des deux boutons — côte à côte */
  .filtre-actions {
    display: flex;
    gap: 8px;
    margin-top: 18px;
  }
  /* Bouton "Appliquer" — plein rose (déjà défini, on ajuste flex) */
  .filtre-actions .btn-appliquer { flex: 1; }
  /* Bouton "Tout effacer" — discret, secondaire */
  .btn-reset {
    flex: 0 0 auto;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1.5px solid var(--cream-dark);
    background: var(--white);
    color: var(--muted);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
  }
  .btn-reset:hover { border-color: var(--rose-mid); color: var(--rose); background: var(--rose-light); }

  /* ═══════════════ FILTRES — COMPTEUR DE RÉSULTATS ═══════════════════════ */
  /* Texte dynamique "X profils affichés sur cette page" — mis à jour par JS */
  .filtre-compte {
    font-size: 11px;
    color: var(--muted-light);
    text-align: center;
    margin-top: 8px;
    min-height: 16px; /* évite le saut de layout quand le texte apparaît */
  }

  /* ═══════════════ FILTRES — POPUP GENRE ══════════════════════════════════ */
  /* Bouton ℹ️ inline dans le label genre — petit, sans border visible */
  .filter-info-btn {
    background: none;
    border: none;
    padding: 0 2px;
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
    margin-left: 4px;
    opacity: 0.7;
    vertical-align: middle;
    transition: opacity 0.15s;
  }
  .filter-info-btn:hover { opacity: 1; }
  /* Popup informatif — apparaît sous le label au clic sur ℹ️ */
  .filter-info-popup {
    background: var(--cream);
    border: 1.5px solid var(--cream-dark);
    border-radius: 9px;
    padding: 12px 14px;
    margin-bottom: 10px;
    font-size: 11.5px;
    color: var(--charcoal);
    line-height: 1.5;
    position: relative;
  }
  .filter-info-popup p { margin: 0; }
  /* Bouton de fermeture du popup — croix en haut à droite */
  .popup-close {
    position: absolute;
    top: 7px;
    right: 9px;
    background: none;
    border: none;
    font-size: 12px;
    color: var(--muted);
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: color 0.15s;
  }
  .popup-close:hover { color: var(--rose); }

  /* Connexion status filter */
  .status-filter { display: flex; flex-direction: column; gap: 6px; }
  .status-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 9px;
    cursor: pointer;
    transition: all 0.2s;
    border: 1.5px solid transparent;
  }
  .status-btn:hover { background: var(--cream); }
  .status-btn.active { background: var(--rose-light); border-color: var(--rose-mid); }
  .status-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
  .status-dot.online { background: #22C55E; box-shadow: 0 0 0 3px rgba(34,197,94,0.2); }
  .status-dot.recent { background: #F59E0B; }
  .status-dot.all    { background: var(--muted-light); }
  .status-text { font-size: 12px; font-weight: 500; color: var(--charcoal); }
  .status-count { margin-left: auto; font-size: 11px; color: var(--muted-light); font-weight: 400; }

  /* ═══════════════ MAIN CONTENT ═══════════════ */
  .main {
    flex: 1;
    padding: 28px 32px;
    min-width: 0;
  }

  /* Header de section */
  .main-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
  }

  .main-title {
    font-family: 'Playfair Display', serif;
    font-size: 24px;
    font-weight: 600;
    color: var(--charcoal);
  }
  .main-title span { color: var(--rose); font-style: italic; }

  .main-meta {
    font-size: 13px;
    color: var(--muted-light);
    margin-top: 3px;
  }

  .sort-bar {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .sort-label { font-size: 12px; color: var(--muted); }
  .sort-select {
    padding: 7px 12px;
    border: 1.5px solid var(--cream-dark);
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    color: var(--charcoal);
    background: var(--white);
    cursor: pointer;
    outline: none;
    appearance: none;
    padding-right: 28px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236B6460' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
  }

  /* ═══════════════ GRILLE PROFILS ═══════════════ */
  .profils-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 32px;
  }

  /* ═══════════════ CARTE PROFIL ═══════════════ */
  .carte {
    background: var(--white);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(28,28,28,0.08);
    border: 1.5px solid rgba(201,79,109,0.08);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    cursor: pointer;
    position: relative;
  }
  .carte:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(28,28,28,0.14);
    border-color: rgba(201,79,109,0.2);
  }

  /* Photo — format portrait 3:4 (remplace height fixe 220px)
     aspect-ratio garantit la proportion quelle que soit la largeur de colonne.
     La photo occupe toute la carte ; les infos sont en overlay au-dessus. */
  .carte-photo {
    position: relative;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: var(--cream-dark);
  }
  .carte-photo img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center top; /* priorise le haut → visage */
    transition: transform 0.5s ease;
  }
  .carte:hover .carte-photo img { transform: scale(1.05); }

  /* Placeholder sans photo — emoji centré sur fond dégradé rose.
     Remplit le même ratio 3:4 que la photo réelle. */
  .photo-placeholder {
    width: 100%; height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 64px;
    background: linear-gradient(160deg, var(--rose-light) 0%, var(--cream-dark) 100%);
  }

  /* Badge connexion */
  .badge-connexion {
    position: absolute;
    top: 12px; right: 12px;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 600;
    backdrop-filter: blur(8px);
  }
  .badge-connexion.online {
    background: rgba(34,197,94,0.15);
    border: 1px solid rgba(34,197,94,0.3);
    color: #16A34A;
  }
  .badge-connexion.online::before {
    content: '';
    width: 7px; height: 7px;
    background: #22C55E;
    border-radius: 50%;
    animation: pulse-green 1.5s infinite;
  }
  .badge-connexion.recent {
    background: rgba(255,255,255,0.85);
    border: 1px solid rgba(245,158,11,0.3);
    color: #B45309;
  }
  .badge-connexion.recent::before {
    content: '';
    width: 7px; height: 7px;
    background: #F59E0B;
    border-radius: 50%;
  }
  @keyframes pulse-green {
    0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0.4); }
    50% { box-shadow: 0 0 0 4px rgba(34,197,94,0); }
  }

  /* Badge niveau abonnement */
  .badge-niveau {
    position: absolute;
    top: 12px; left: 12px;
    padding: 3px 9px;
    border-radius: 100px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
  }
  .badge-niveau.discret  { background: rgba(107,100,96,0.85); color: white; }
  .badge-niveau.classique{ background: rgba(201,79,109,0.85); color: white; }
  .badge-niveau.premium  { background: linear-gradient(135deg, #D4A800, #F5D020); color: #3D2200; box-shadow: 0 1px 6px rgba(212,168,0,0.5); font-weight: 700; }

  /* Dégradé sombre en bas de photo — fond pour la lisibilité du texte overlay.
     Couvre ~60% de la hauteur depuis le bas pour laisser le haut (visage) visible.
     pointer-events:none → le clic traverse jusqu'à .carte-lien. */
  .carte-photo::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 60%;
    background: linear-gradient(to top,
      rgba(10,10,10,0.88) 0%,
      rgba(10,10,10,0.55) 40%,
      transparent       100%);
    pointer-events: none;
    z-index: 0;
  }

  /* Overlay texte — positionné au-dessus du gradient (z-index:1).
     Contient prénom+âge, ville+relation, et activité si hors ligne.
     pointer-events:none → le clic traverse jusqu'à .carte-lien. */
  .carte-overlay {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 0 14px 14px;
    z-index: 1;
    pointer-events: none;
  }

  /* Prénom + âge — grande police blanche, Playfair pour élégance */
  .carte-overlay-nom {
    font-family: 'Playfair Display', serif;
    font-size: 19px;
    font-weight: 600;
    color: #fff;
    text-shadow: 0 1px 4px rgba(0,0,0,0.5);
    margin-bottom: 4px;
    line-height: 1.2;
    display: flex;
    align-items: baseline;
    gap: 5px;
  }

  /* Sigle de genre ♂ ♀ ⚧ dans l'overlay — légèrement plus petit que le nom */
  .carte-genre-sigle {
    font-size: 13px;
    font-weight: 400;
    color: rgba(255,255,255,0.85);
    font-family: Arial, sans-serif;
    flex-shrink: 0;
  }

  /* Ville + type de relation — ligne secondaire sous le nom */
  .carte-overlay-meta {
    font-size: 12px;
    color: rgba(255,255,255,0.88);
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
    line-height: 1.4;
  }
  .overlay-sep { color: rgba(255,255,255,0.5); }

  /*
   * Badge réactivité dans l'overlay de la carte trombinoscope.
   * Emoji inline (⚡ 🕐 🐢) sur le dégradé sombre — visible sans style lourd.
   * Les classes .carte-react-* permettent d'ajuster la couleur si besoin.
   */
  .carte-badge-react {
    font-size: 13px;
    line-height: 1;
  }

  /* Dernière activité (hors ligne uniquement) — sous la ville, plus discret */
  .carte-overlay-activite {
    font-size: 11px;
    color: rgba(255,255,255,0.65);
    margin-top: 3px;
  }

  /* Photo réelle du membre — object-position:top déjà sur .carte-photo img */
  .photo-membre { display: block; }

  /* Infos sous la carte — uniquement les boutons d'action (description retirée).
     Padding réduit : la carte est maintenant la photo, les infos sont dans l'overlay. */
  .carte-infos {
    padding: 10px 12px;
  }

  /* Actions */
  .carte-actions {
    display: flex;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--cream-dark);
  }

  .btn-action {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 8px 6px;
    border-radius: 9px;
    border: 1.5px solid var(--cream-dark);
    background: var(--white);
    font-size: 11px;
    font-weight: 600;
    color: var(--muted);
    cursor: pointer;
    transition: all 0.2s;
  }
  .btn-action:hover { border-color: var(--rose-mid); color: var(--rose); background: var(--rose-light); }
  .btn-action.active { border-color: var(--rose); color: var(--rose); background: var(--rose-light); }
  .btn-action .btn-icon { font-size: 14px; }

  .btn-action.coup-coeur:hover,
  .btn-action.coup-coeur.active { border-color: #E11D48; color: #E11D48; background: #FFF1F3; }
  .btn-action.favori:hover { border-color: #D97706; color: #D97706; background: #FFFBEB; }
  .btn-action.favori.active { border-color: #D97706; color: #D97706; background: #FFFBEB; }
  .btn-action.favori.active .btn-icon { color: #FBBF24; }
  .btn-action.ami:hover,
  .btn-action.ami.active { border-color: #2563EB; color: #2563EB; background: #EFF6FF; }

  /* ═══════════════ CARTE FLOUE (découverte) ═══════════════ */
  .carte.locked .carte-photo img,
  .carte.locked .photo-placeholder { filter: blur(8px); }
  .carte.locked::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    background: rgba(250,247,244,0.6);
    backdrop-filter: blur(2px);
    border-radius: var(--radius);
  }
  .carte.locked .lock-overlay {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
    padding: 20px;
  }
  .lock-icon { font-size: 28px; }
  .lock-text { font-size: 12px; font-weight: 600; color: var(--charcoal); }
  .lock-sub { font-size: 11px; color: var(--muted); }
  .lock-btn {
    margin-top: 6px;
    padding: 8px 16px;
    background: var(--rose);
    color: white;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: background 0.2s;
  }
  .lock-btn:hover { background: var(--rose-dark); }

  /* ═══════════════ MESSAGE "AUCUN PROFIL" ═══════════════ */
  /* Affiché quand la requête BDD ne retourne aucun résultat
     (cloisonnement strict, BDD vide, ou filtres trop restrictifs) */
  .profils-vide {
    grid-column: 1 / -1; /* occupe toute la largeur de la grille */
    text-align: center;
    padding: 60px 20px;
    color: var(--muted);
    font-size: 15px;
  }
  .profils-vide p:last-child {
    font-size: 13px;
    color: var(--muted-light);
    margin-top: 8px;
  }

  /* ═══════════════ PAGINATION ═══════════════ */
  .pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 0 16px;
  }

  .page-btn {
    width: 36px; height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border: 1.5px solid var(--cream-dark);
    background: var(--white);
    color: var(--muted);
    transition: all 0.2s;
  }
  .page-btn:hover { border-color: var(--rose-mid); color: var(--rose); }
  .page-btn.active { background: var(--rose); border-color: var(--rose); color: white; font-weight: 700; }
  .page-btn.arrow { font-size: 16px; }
  .page-btn:disabled { opacity: 0.3; cursor: default; }
  /* "…" entre les numéros de pages quand la séquence n'est pas continue */
  .page-dots {
    color: var(--muted-light);
    font-size: 13px;
    padding: 0 4px;
    line-height: 36px; /* aligne verticalement avec les boutons .page-btn */
  }
  /* "· page X / Y" dans le sous-titre du header — info de pagination discrète */
  .meta-pagination {
    font-size: 12px;
    color: var(--muted-light);
    margin-left: 4px;
  }

  /* ═══════════════ BANDEAU INFOS MEMBRE CONNECTÉ ═══════════════ */
  .mon-statut {
    background: var(--white);
    border: 1px solid rgba(201,79,109,0.12);
    border-radius: var(--radius);
    padding: 14px 16px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .mon-statut-avatar {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--rose-light);
    border: 2px solid var(--rose-mid);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
  }
  .mon-statut-infos { flex: 1; min-width: 0; }
  .mon-statut-nom { font-size: 13px; font-weight: 600; color: var(--charcoal); }
  .mon-statut-niveau {
    font-size: 11px;
    color: var(--muted);
    margin-top: 2px;
  }
  .mon-statut-badge {
    display: inline-block;
    padding: 2px 8px;
    background: var(--rose-light);
    color: var(--rose);
    border-radius: 100px;
    font-size: 10px;
    font-weight: 700;
    margin-left: 6px;
  }
  .mon-statut-essai {
    font-size: 11px;
    color: var(--muted-light);
    text-align: right;
    white-space: nowrap;
  }
  .mon-statut-essai strong { color: var(--rose); }

  /* ═══════════════ RESPONSIVE ═══════════════ */
  @media (max-width: 1100px) {
    .profils-grid { grid-template-columns: repeat(2, 1fr); }
    .profils-sidebar { width: 240px; min-width: 240px; }
  }
  @media (max-width: 768px) {
    .profils-sidebar { display: none; }
    .main { padding: 20px 16px; }
    .profils-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    nav { padding: 0 16px; }
    .nav-links { display: none; }
  }
  @media (max-width: 480px) {
    .profils-grid { grid-template-columns: 1fr; }
  }


/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  14. MESSAGERIE                                                          ║
   ║  Page : rencontres-sinceres.com/messagerie/                              ║
   ║  Template : templates/messagerie.php                                     ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */

/* ═══════════════ LAYOUT PRINCIPAL — 2 colonnes ═══════════════ */

/*
 * Wrapper global : flex-row, prend toute la hauteur de l'écran
 * moins la barre de navigation (70px).
 * Sur mobile, les deux colonnes s'alternent via .msg-conv-active.
 */
.msg-wrap {
  display: flex;
  height: calc(100vh - 70px);
  max-width: 1200px;
  margin: 0 auto;
  background: #fff;
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid rgba(201, 79, 109, 0.12);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.06);
}

/* ═══════════════ SIDEBAR GAUCHE — liste des conversations ═══════════════ */

/*
 * Colonne gauche fixe : 320px, fond légèrement crème.
 * Contient l'en-tête + la liste scrollable des conversations.
 */
.msg-sidebar {
  width: 320px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--warm);
  background: #FAFAF9;
}

/* En-tête de la sidebar : lien retour + titre "Messagerie" */
.msg-sidebar-header {
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--warm);
  background: #fff;
  flex-shrink: 0;
}

/* Lien "← Mon espace" au-dessus du titre */
.msg-retour-espace {
  display: inline-block;
  font-size: 12px;
  color: var(--muted);
  text-decoration: none;
  margin-bottom: 6px;
  transition: color 0.2s;
}
.msg-retour-espace:hover { color: var(--rose); }

/* Titre "💬 Messagerie" avec badge total non-lus */
.msg-titre {
  font-size: 18px;
  font-weight: 700;
  color: var(--charcoal);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Badge rouge : nombre total de messages non lus */
.msg-badge-total {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  background: var(--rose);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  border-radius: 10px;
}

/* Zone scrollable contenant tous les items de conversation */
.msg-conv-liste {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* ─── État vide (aucune conversation) ──── */
.msg-conv-vide {
  padding: 48px 20px;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
}
.msg-lien-profils {
  display: inline-block;
  margin-top: 14px;
  font-size: 13px;
  color: var(--rose);
  text-decoration: none;
  font-weight: 600;
}
.msg-lien-profils:hover { text-decoration: underline; }

/* ─── Item de conversation ──── */

/*
 * Chaque item est un <a> → on reset les styles de lien.
 * Flex horizontal : avatar à gauche, infos texte à droite.
 */
.msg-conv-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--warm);
  text-decoration: none;
  color: inherit;
  transition: background 0.15s;
  cursor: pointer;
}
.msg-conv-item:hover { background: rgba(201, 79, 109, 0.04); }

/* Conversation sélectionnée : bande rose à gauche + fond légèrement rosé */
.msg-conv-item.active {
  background: rgba(201, 79, 109, 0.08);
  border-left: 3px solid var(--rose);
  padding-left: 13px; /* compense la border-left de 3px */
}

/* Texte en gras si messages non lus */
.msg-conv-item.non-lu .msg-conv-prenom {
  font-weight: 700;
  color: var(--charcoal);
}
.msg-conv-item.non-lu .msg-conv-apercu {
  font-weight: 600;
  color: #555;
}

/* Avatar de l'interlocuteur */
.msg-conv-photo {
  position: relative;
  flex-shrink: 0;
  width: 46px;
  height: 46px;
}
.msg-conv-photo img {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
}

/* Placeholder si pas de photo */
.msg-conv-photo-ph {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--warm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}

/* Badge nombre de messages non lus sur l'avatar */
.msg-conv-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: var(--rose);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #FAFAF9; /* idem fond sidebar */
}

/* Bloc texte à droite de l'avatar */
.msg-conv-infos {
  flex: 1;
  min-width: 0; /* indispensable pour que text-overflow fonctionne */
}
.msg-conv-ligne-1 {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 3px;
}
.msg-conv-prenom {
  font-size: 14px;
  font-weight: 500;
  color: var(--charcoal);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.msg-conv-date {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  flex-shrink: 0;
}
.msg-conv-apercu {
  display: block;
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ═══════════════ COLONNE DROITE — conversation active ═══════════════ */

/*
 * flex:1 → occupe tout l'espace restant.
 * flex-direction: column → header en haut, fil au milieu, saisie en bas.
 */
.msg-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: #fff;
}

/* ─── En-tête de la conversation ──── */

.msg-main-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--warm);
  background: #fff;
  flex-shrink: 0;
}

/*
 * Bouton "← Retour" — caché sur desktop,
 * visible sur mobile via media query.
 */
.msg-retour-liste {
  display: none;
  background: none;
  border: none;
  font-size: 22px;
  cursor: pointer;
  color: var(--charcoal);
  padding: 4px 10px 4px 0;
  line-height: 1;
  flex-shrink: 0;
}

/* Photo de l'interlocuteur dans le header */
.msg-header-photo { flex-shrink: 0; }
.msg-header-photo img {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--rose-light);
  display: block;
}
.msg-header-photo-ph {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--warm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

/* Prénom + pseudo de l'interlocuteur */
.msg-header-infos {
  flex: 1;
  min-width: 0;
}
.msg-header-prenom {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--charcoal);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.msg-header-pseudo {
  display: block;
  font-size: 12px;
  color: var(--muted);
}

/* Boutons d'action à droite du header */
.msg-header-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
  flex-wrap: wrap;
}

/* Bouton "Voir le profil" */
.msg-btn-profil {
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 600;
  border-radius: var(--radius-sm);
  border: 1px solid var(--rose);
  color: var(--rose);
  background: transparent;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.msg-btn-profil:hover { background: var(--rose); color: #fff; }

/* Bouton "🚫 Bloquer" — rouge discret */
/* Bouton "⚠️ Signaler" dans le header de conversation
   Sobre et ambre — moins fort que le rouge du bouton Bloquer.
   Toujours visible, signale le dernier message reçu non encore signalé. */
.msg-btn-signaler-header {
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 600;
  border-radius: var(--radius-sm);
  border: 1px solid #FCD34D;
  color: #92400E;
  background: #FFFBEB;
  cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
}
.msg-btn-signaler-header:hover { background: #FEF3C7; }

.msg-btn-bloquer {
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 600;
  border-radius: var(--radius-sm);
  border: 1px solid #FCA5A5;
  color: #DC2626;
  background: #FEF2F2;
  cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
}
.msg-btn-bloquer:hover { background: #FEE2E2; }

/* Bouton "✓ Débloquer" — vert discret */
.msg-btn-debloquer {
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 600;
  border-radius: var(--radius-sm);
  border: 1px solid #6EE7B7;
  color: #065F46;
  background: #ECFDF5;
  cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
}
.msg-btn-debloquer:hover { background: #D1FAE5; }

/* ─── Fil des messages ──── */

/*
 * flex:1 + overflow-y:auto → prend tout l'espace vertical disponible
 * et défile verticalement. Les bulles s'empilent en colonne.
 */
.msg-fil {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: #F9F8F7; /* fond légèrement crème pour différencier de la saisie */
}

/* Séparateur de date entre messages de jours différents */
.msg-separateur-date {
  align-self: center;
  margin: 12px 0 8px;
  font-size: 11px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.85);
  padding: 3px 12px;
  border-radius: 10px;
  border: 1px solid var(--warm);
}

/*
 * Enveloppe de chaque bulle.
 * .envoi → aligné à droite (flex-direction: row-reverse)
 * .recu  → aligné à gauche (flex-direction: row)
 * Le bouton "signaler" et la bulle sont frères dans cet élément.
 */
.msg-bulle-wrap {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  margin-bottom: 4px;
  max-width: 100%;
}
.msg-bulle-wrap.recu  { flex-direction: row;         justify-content: flex-start; }
.msg-bulle-wrap.envoi { flex-direction: row-reverse;  justify-content: flex-start; }

/* La bulle elle-même */
.msg-bulle {
  max-width: 68%;
  padding: 10px 14px;
  line-height: 1.5;
  word-break: break-word;
  border-radius: 16px;
}

/* Bulle reçue : fond blanc, bordure légère, coin bas-gauche carré */
.msg-bulle-wrap.recu .msg-bulle {
  background: #fff;
  color: var(--charcoal);
  border: 1px solid var(--warm);
  border-bottom-left-radius: 4px;
}

/* Bulle envoyée : fond rose Sincères, texte blanc, coin bas-droit carré */
.msg-bulle-wrap.envoi .msg-bulle {
  background: var(--rose);
  color: #fff;
  border-bottom-right-radius: 4px;
}

/* Texte du message (nl2br côté PHP → les <br> sont déjà là) */
.msg-contenu { font-size: 14px; }

/* Heure + indicateur de lecture — alignés à droite de la bulle */
.msg-meta {
  display: flex;
  gap: 4px;
  align-items: center;
  margin-top: 4px;
  justify-content: flex-end;
}
.msg-heure {
  font-size: 10px;
  opacity: 0.6;
}
/* "Non lu" — texte blanc semi-transparent sur fond rose (bulle envoyée) */
.msg-envoye { font-size: 10px; opacity: 0.65; font-style: italic; }
/* "Lu" — texte vert clair bien visible sur fond rose (bulle envoyée) */
.msg-lu     { font-size: 10px; color: #A7F3D0; font-weight: 600; }

/* Sur bulle reçue, l'heure est sombre (fond blanc) */
.msg-bulle-wrap.recu .msg-heure { color: var(--muted); opacity: 1; }

/* ─── Statut Lu / Non lu dans la sidebar ─── */
/*
 * .msg-conv-ligne-2 : ligne aperçu + statut lu/non lu côte à côte.
 * L'aperçu prend tout l'espace disponible (flex:1 + min-width:0 pour
 * que le text-overflow fonctionne), le statut reste à droite (flex-shrink:0).
 */
.msg-conv-ligne-2 {
  display: flex;
  align-items: center;
  gap: 6px;
}
/* Aperçu dans la ligne 2 : doit pouvoir tronquer */
.msg-conv-ligne-2 .msg-conv-apercu {
  flex: 1;
  min-width: 0;
}
/* Texte de statut lu/non lu — fixe à droite, ne rétrécit pas */
.msg-conv-statut-lu {
  flex-shrink: 0;
  font-size: 10px;
  white-space: nowrap;
}
.msg-conv-statut-lu.lu     { color: #10B981; font-weight: 600; } /* vert : message lu */
.msg-conv-statut-lu.non-lu { color: var(--muted); font-style: italic; } /* gris : pas encore lu */

/*
 * Bouton signaler ⚑ — discret, rouge au survol.
 * Placé à droite de la bulle reçue (avant dans le DOM car row-reverse n'est pas utilisé ici,
 * mais comme .msg-bulle-wrap.recu est en row, le bouton suit la bulle à sa droite).
 */
.msg-btn-signaler {
  background: none;
  border: none;
  font-size: 14px;
  color: var(--muted);
  cursor: pointer;
  padding: 4px 2px;
  opacity: 0.35;
  transition: opacity 0.15s, color 0.15s;
  align-self: center;
  flex-shrink: 0;
  line-height: 1;
}
.msg-btn-signaler:hover { opacity: 1; color: #DC2626; }

/* Badge "⚑ Signalé" — affiché à la place du bouton après signalement */
.msg-signale-badge {
  font-size: 11px;
  color: #92400E;
  background: #FEF3C7;
  border: 1px solid #FCD34D;
  border-radius: 8px;
  padding: 2px 8px;
  align-self: center;
  flex-shrink: 0;
}

/* ═══════════════ BADGES OBLIGATION ET RÉACTIVITÉ (sidebar) ═══════════════ */

/*
 * Badge orange sur l'avatar : obligation de réponse douce.
 * Visible quand nb_obligation > 0 (message lu mais pas encore répondu/décliné).
 * Positionné en bas à droite de l'avatar, distinct du badge bleu non-lus.
 */
.msg-conv-badge-obligation {
  position: absolute;
  bottom: -3px;
  right: -3px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: #F97316; /* orange — distinct du rose des non-lus */
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #FAFAF9;
}

/*
 * Emoji de réactivité de l'interlocuteur — inline dans la ligne-1.
 * ⚡ rapide · 🕐 moyen · 🐢 lent
 * Taille réduite pour ne pas écraser le prénom.
 */
.msg-conv-badge-react {
  font-size: 12px;
  flex-shrink: 0;
  line-height: 1;
  /* Pas de style différent selon le type : l'emoji porte l'info visuelle */
}

/*
 * Ligne obligation entre ligne-1 (prénom/date) et ligne-2 (aperçu).
 * S'affiche uniquement quand nb_obligation > 0.
 * Layout flex : label à gauche, countdown à droite.
 */
.msg-conv-ligne-obligation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 2px;
}
/* Label "⏳ Réponse attendue" */
.msg-conv-obligation-label {
  font-size: 11px;
  color: #EA580C; /* orange foncé — lisible, sans agressivité */
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Countdown "Xj" avant déclin automatique */
.msg-conv-obligation-countdown {
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: #F97316;
  border-radius: 6px;
  padding: 1px 6px;
  flex-shrink: 0;
  white-space: nowrap;
}

/* ═══════════════ BOUTON DÉCLINER + BADGE DÉCLINÉ (fil messages) ═══════════════ */

/*
 * Bouton "💔 Décliner" — discret, visible seulement sur les messages reçus
 * et lus mais non encore répondus ni déclinés (obligation douce).
 * Même style que msg-btn-signaler mais couleur mauve/rose sur hover.
 */
.msg-btn-decliner {
  background: none;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: 12px;
  color: var(--muted);
  cursor: pointer;
  padding: 4px 8px;
  opacity: 0.5;
  transition: opacity 0.15s, color 0.15s, border-color 0.15s, background 0.15s;
  align-self: flex-end; /* aligne avec le bas de la bulle */
  flex-shrink: 0;
  line-height: 1.3;
  white-space: nowrap;
}
.msg-btn-decliner:hover {
  opacity: 1;
  color: #9333EA; /* violet — distinct du rouge signalement */
  border-color: #9333EA;
  background: #F5F3FF;
}

/* Badge "✗ Décliné" — affiché à la place du bouton après déclin */
.msg-decline-badge {
  font-size: 11px;
  color: #6B21A8; /* violet foncé */
  background: #F5F3FF;
  border: 1px solid #C4B5FD;
  border-radius: 8px;
  padding: 2px 8px;
  align-self: flex-end;
  flex-shrink: 0;
}

/* ═══════════════ MODALE DÉCLIN — aperçu du message automatique ═══════════════ */

/*
 * Bloc citation dans la modale de déclin poli.
 * Affiche en aperçu le message automatique qui sera envoyé.
 * Fond doux, bordure gauche violette pour signifier le caractère "automatique".
 */
.msg-modal-declin-preview {
  margin: 8px 0 4px;
  padding: 10px 14px;
  background: #F5F3FF;
  border-left: 3px solid #9333EA;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 13px;
  color: #4C1D95; /* violet foncé — ton posé, non agressif */
  font-style: italic;
  line-height: 1.5;
}

/* Texte "Début de la conversation" ou "Envoyez votre premier message" */
.msg-fil-debut {
  align-self: center;
  font-size: 12px;
  color: var(--muted);
  margin: 24px 0 12px;
  text-align: center;
  font-style: italic;
}

/* ─── Zone de saisie ──── */

.msg-saisie {
  flex-shrink: 0;
  border-top: 1px solid var(--warm);
  background: #fff;
  padding: 14px 20px;
}

/*
 * Bandeau d'information quand la conversation est bloquée.
 * Affiché à la place du formulaire de saisie.
 */
.msg-bloque-info {
  font-size: 13px;
  color: var(--muted);
  text-align: center;
  padding: 8px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* Bouton "Débloquer" inline dans la zone de saisie */
.msg-btn-debloquer-inline {
  font-size: 12px;
  font-weight: 600;
  color: var(--rose);
  background: none;
  border: 1px solid var(--rose);
  border-radius: var(--radius-sm);
  padding: 5px 12px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.msg-btn-debloquer-inline:hover { background: var(--rose); color: #fff; }

/* Formulaire de saisie */
.msg-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Textarea de saisie du message */
.msg-textarea {
  width: 100%;
  resize: none;
  border: 1px solid var(--warm);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  font-size: 14px;
  font-family: inherit;
  color: var(--charcoal);
  background: #FAFAF9;
  transition: border-color 0.2s, background 0.2s;
  box-sizing: border-box;
  line-height: 1.5;
}
.msg-textarea:focus {
  outline: none;
  border-color: var(--rose);
  background: #fff;
}
.msg-textarea::placeholder { color: var(--muted); }

/* Rangée basse : compteur de caractères + bouton envoyer */
.msg-form-bas {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.msg-compteur {
  font-size: 11px;
  color: var(--muted);
}

/* Bouton "Envoyer ↗" */
.msg-btn-envoyer {
  padding: 9px 22px;
  background: var(--rose);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
  letter-spacing: 0.02em;
}
.msg-btn-envoyer:hover   { background: #B8435F; }
.msg-btn-envoyer:active  { transform: scale(0.97); }
.msg-btn-envoyer:disabled { opacity: 0.5; cursor: wait; }

/* ═══════════════ ÉTAT ACCUEIL (aucune conv sélectionnée) ═══════════════ */

/*
 * Affiché sur desktop quand aucune conversation n'est ouverte.
 * Sur mobile cet état n'est pas visible (la sidebar prend tout l'écran).
 */
.msg-accueil {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: 40px 24px;
  text-align: center;
}
.msg-accueil-icone {
  font-size: 60px;
  margin-bottom: 18px;
  opacity: 0.45;
}
.msg-accueil-texte {
  font-size: 16px;
  color: var(--charcoal);
  margin: 0 0 8px;
}
.msg-accueil-sous {
  font-size: 13px;
  color: var(--muted);
  margin: 0 0 22px;
}
.msg-accueil-lien {
  display: inline-block;
  padding: 11px 24px;
  background: var(--rose);
  color: #fff;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s;
}
.msg-accueil-lien:hover { background: #B8435F; }

/* ═══════════════ MODALES (blocage / déblocage / signalement) ═══════════════ */

/*
 * Fond sombre semi-transparent.
 * Caché par défaut (display:none).
 * Le JS ouvre en appliquant style.display = 'flex' directement.
 */
.msg-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

/* Boîte de la modale */
.msg-modal {
  background: #fff;
  border-radius: var(--radius-xl);
  padding: 28px 32px;
  max-width: 440px;
  width: 100%;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.18);
}
.msg-modal-titre {
  font-size: 18px;
  font-weight: 700;
  color: var(--charcoal);
  margin: 0 0 12px;
}
.msg-modal-texte {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.6;
  margin: 0 0 18px;
}

/* Textarea motif (modale de signalement) */
.msg-modal-textarea {
  width: 100%;
  resize: vertical;
  border: 1px solid var(--warm);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 13px;
  font-family: inherit;
  color: var(--charcoal);
  background: #FAFAF9;
  margin-bottom: 18px;
  box-sizing: border-box;
  min-height: 90px;
  transition: border-color 0.2s;
}
.msg-modal-textarea:focus {
  outline: none;
  border-color: var(--rose);
  background: #fff;
}
/* État d'erreur : motif requis mais non rempli */
.msg-modal-textarea.msg-textarea-erreur {
  border-color: #DC2626;
  background: #FEF2F2;
}

/* Ligne de boutons de la modale */
.msg-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* Bouton Annuler */
.msg-modal-annuler {
  padding: 9px 18px;
  border: 1px solid var(--warm);
  background: #fff;
  color: var(--muted);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.msg-modal-annuler:hover { background: var(--warm); }

/* Bouton Confirmer — utilisé pour le déblocage (vert) */
.msg-modal-confirmer {
  padding: 9px 18px;
  border: none;
  background: #10B981;
  color: #fff;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s;
}
.msg-modal-confirmer:hover { background: #059669; }

/* Bouton Danger — utilisé pour le blocage et le signalement (rouge) */
.msg-modal-danger {
  padding: 9px 18px;
  border: none;
  background: #DC2626;
  color: #fff;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s;
}
.msg-modal-danger:hover   { background: #B91C1C; }
.msg-modal-danger:disabled { opacity: 0.6; cursor: wait; }

/* ═══════════════ BANDEAU OBLIGATION DE RÉPONSE ═══════════════ */

/*
 * Affiché en haut de la messagerie quand le membre arrive depuis une page
 * protégée qui a détecté des messages lus non répondus (?obligation=1).
 * Fond ambré pour attirer l'attention sans être agressif (différent du rouge
 * d'erreur ou du vert de succès).
 */
.msg-bandeau-obligation {
  display: flex;
  align-items: center;             /* Alignement centré icône / texte */
  gap: 12px;
  background: #FEF3C7;             /* Ambré clair */
  border: 1px solid #F59E0B;       /* Bordure ambré */
  border-radius: var(--radius-md);
  padding: 14px 20px;
  margin-bottom: 16px;
  font-size: 14px;
  color: #92400E;                  /* Texte ambré foncé pour le contraste */
  font-weight: 500;
}
.msg-bandeau-icone {
  font-size: 20px;
  flex-shrink: 0;                  /* L'icône ne rétrécit pas sur mobile */
}
.msg-bandeau-texte {
  line-height: 1.5;
}

/* ═══════════════ RESPONSIVE ═══════════════ */

/* ── Petit écran : 1024px ── */
@media (max-width: 1024px) {
  .msg-sidebar { width: 280px; }
  .msg-bulle   { max-width: 76%; }
}

/* ── Tablette : 768px — navigation séquentielle sidebar ↔ conversation ── */
@media (max-width: 768px) {
  .msg-wrap {
    height: calc(100vh - 60px);
    border-radius: 0;
    border: none;
    box-shadow: none;
  }

  /*
   * Par défaut : seule la sidebar est visible (prend 100% de la largeur).
   * Quand .msg-conv-active est ajouté par JS (clic sur une conv) :
   * la sidebar disparaît et msg-main prend toute la place.
   */
  .msg-sidebar {
    width: 100%;
    border-right: none;
  }
  .msg-main { display: none; }

  .msg-wrap.msg-conv-active .msg-sidebar { display: none; }
  .msg-wrap.msg-conv-active .msg-main    { display: flex; width: 100%; }

  /* Bouton retour ← visible uniquement sur mobile */
  .msg-retour-liste { display: block; }

  .msg-bulle { max-width: 80%; }
}

/* ── Mobile : 480px ── */
@media (max-width: 480px) {
  .msg-sidebar-header { padding: 12px 14px 10px; }

  .msg-main-header {
    padding: 10px 14px;
    gap: 8px;
  }
  .msg-header-prenom { font-size: 14px; }
  .msg-header-pseudo { font-size: 11px; }

  .msg-btn-profil,
  .msg-btn-signaler-header,
  .msg-btn-bloquer,
  .msg-btn-debloquer {
    font-size: 11px;
    padding: 5px 9px;
  }

  .msg-fil    { padding: 12px 12px; }
  .msg-saisie { padding: 10px 12px; }
  .msg-bulle  { max-width: 86%; padding: 9px 12px; }

  .msg-modal       { padding: 22px 18px; }
  .msg-modal-titre { font-size: 16px; }
}

/* ── Petite hauteur (paysage mobile) : max-height 600px ── */
@media (max-height: 600px) {
  .msg-wrap   { height: calc(100vh - 50px); }
  .msg-fil    { padding: 10px 16px; }
  .msg-saisie { padding: 8px 16px; }
}


/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  15. ESPACE MEMBRE — TABLEAU DE BORD                              ║
   ║  Page : rencontres-sinceres.com/espace-membre/                         ║
   ║  Template : templates/tableau-bord.php                                 ║
   ║  Déplacé depuis tableau-bord.php le 22 mai 2026                        ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */

/* ── Wrapper global ── */
.tb-wrap    { min-height: 100vh; }

/* ── Layout principal — contenu centré ── */
.tb-main {
    max-width: 900px;
    margin: 0 auto;
    padding: 40px 24px;
}

/* ── BLOC BIENVENUE ── */
.tb-bienvenue h1 {
    font-family: var(--font-serif);
    font-size: 26px;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--charcoal);
}

.tb-bienvenue > p {
    color: var(--muted);
    font-size: 15px;
    margin-bottom: 24px;
}

/* ── STATUT — ligne d'infos sous le prénom (niveau, essai, date inscription) ── */
.tb-statut {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

.tb-statut-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tb-statut-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--muted);
    font-weight: 500;
}

.tb-statut-valeur {
    font-size: 14px;
    color: var(--charcoal);
    font-weight: 500;
}

/* Couleur verte pour "Identité vérifiée" */
.tb-verifie { color: #2E7D32; }

/* ── BADGES NIVEAU — couleur différente selon le niveau d'abonnement ── */
.tb-badge {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 14px;
    border-radius: var(--radius-pill);
}
.tb-badge--decouverte { background: #F5F5F5;          color: var(--muted);     }
.tb-badge--discret    { background: var(--warm);       color: var(--charcoal);  }
.tb-badge--classique  { background: var(--rose-light); color: var(--rose-dark); }
.tb-badge--premium    { background: var(--gold);       color: white;            }

/* ── TITRE DE SECTION (MON ESPACE, Demandes d'amis, etc.) ── */
.tb-section-titre {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--muted);
    margin: 32px 0 16px 0;
}

/* Compteur à côté du titre (ex : "Demandes d'amis  2") */
.tb-section-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--rose);
    color: white;
    font-size: 11px;
    font-weight: 700;
    width: 20px; height: 20px;
    border-radius: 50%;
    letter-spacing: 0;
}

/* ═══════════════ EN-TÊTE DES PAGES DÉDIÉES (Mes amis, Mes matchs) ═══════════════ */

/* Lien retour ← Mon espace */
.tb-retour {
    display: inline-block;
    font-size: 13px;
    color: var(--muted);
    text-decoration: none;
    margin-bottom: 8px;
    transition: color var(--transition);
}
.tb-retour:hover { color: var(--rose); }

/* Titre de la page (h1) */
.tb-page-header { margin-bottom: 24px; }
.tb-page-titre  { font-size: 28px; font-weight: 700; color: var(--charcoal); margin: 0 0 4px; }
.tb-page-sous-titre { font-size: 14px; color: var(--muted); margin: 0; }

/* ═══════════════ ÉTAT VIDE (aucun ami / aucun match) ═══════════════ */
.tb-vide {
    text-align: center;
    padding: 60px 20px;
    background: var(--white);
    border-radius: var(--radius);
    border: 1px solid var(--cream-dark);
}
.tb-vide-icone      { font-size: 48px; margin-bottom: 16px; }
.tb-vide-texte      { font-size: 16px; font-weight: 600; color: var(--charcoal); margin: 0 0 8px; }
.tb-vide-sous-texte { font-size: 14px; color: var(--muted); margin: 0 0 20px; max-width: 360px; margin-inline: auto; }
.tb-vide-lien {
    display: inline-block;
    padding: 10px 22px;
    background: var(--rose);
    color: white;
    border-radius: 10px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    transition: background var(--transition);
}
.tb-vide-lien:hover { background: var(--rose-dark, #b5334f); }

/* Date "Amis depuis le…" / "Match le…" */
.tb-interaction-depuis {
    font-size: 11px;
    color: var(--muted);
    margin-top: 2px;
}

/* ═══════════════ BLOCS INTERACTIONS (Demandes, Matchs, Amis) ═══════════════ */

/* Liste des cartes d'interaction (une ligne par membre) */
.tb-interactions-liste {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 8px;
}

/* Carte d'interaction : photo + infos + boutons en ligne */
.tb-interaction-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: var(--white);
    border-radius: var(--radius);
    border: 1px solid var(--cream-dark);
    transition: box-shadow var(--transition);
}
.tb-interaction-card:hover {
    box-shadow: 0 4px 16px rgba(201,79,109,0.08);
}

/* Photo miniature ronde */
.tb-interaction-photo {
    flex-shrink: 0;
    width: 52px; height: 52px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--cream);
}
.tb-interaction-photo img {
    width: 100%; height: 100%;
    object-fit: cover;
}
.tb-interaction-photo-placeholder {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px;
    color: var(--muted);
}

/* Infos membre (prénom, pseudo, ville) */
.tb-interaction-infos {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0; /* permet le text-overflow sur les enfants */
}
.tb-interaction-prenom {
    font-size: 15px;
    font-weight: 600;
    color: var(--charcoal);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tb-interaction-pseudo {
    font-size: 12px;
    color: var(--muted);
}
.tb-interaction-ville {
    font-size: 12px;
    color: var(--muted);
}
.tb-interaction-voir {
    font-size: 12px;
    color: var(--rose);
    text-decoration: none;
    font-weight: 500;
    margin-top: 2px;
}
.tb-interaction-voir:hover { text-decoration: underline; }

/* Zone des boutons d'action */
.tb-interaction-actions {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Bouton Accepter — vert */
.tb-btn-accepter {
    padding: 7px 14px;
    background: #059669;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition);
}
.tb-btn-accepter:hover  { background: #047857; }
.tb-btn-accepter:disabled { opacity: 0.5; cursor: not-allowed; }

/* Bouton Refuser — gris neutre */
.tb-btn-refuser {
    padding: 7px 14px;
    background: var(--cream);
    color: var(--muted);
    border: 1px solid var(--cream-dark);
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition);
}
.tb-btn-refuser:hover  { background: #FEE2E2; color: #B91C1C; border-color: #FCA5A5; }
.tb-btn-refuser:disabled { opacity: 0.5; cursor: not-allowed; }

/* Bouton Voir le profil — contour rose */
.tb-btn-voir {
    padding: 7px 14px;
    background: transparent;
    color: var(--rose);
    border: 1.5px solid var(--rose);
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    text-align: center;
    transition: all var(--transition);
    display: block;
}
.tb-btn-voir:hover { background: var(--rose-light); }

/* Bouton Matcher — rose plein (action positive, comme un like en retour) */
.tb-btn-matcher {
    padding: 7px 14px;
    background: var(--rose);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition);
}
.tb-btn-matcher:hover    { background: var(--rose-dark, #b03060); }
.tb-btn-matcher:disabled { opacity: 0.5; cursor: not-allowed; }

/* Bouton Passer — gris neutre (action secondaire : ignorer sans matcher) */
.tb-btn-passer {
    padding: 7px 14px;
    background: var(--cream);
    color: var(--muted);
    border: 1px solid var(--cream-dark);
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition);
}
.tb-btn-passer:hover    { background: var(--cream-dark); color: var(--charcoal); }
.tb-btn-passer:disabled { opacity: 0.5; cursor: not-allowed; }

/* ═══════════════ BOUTONS AMI — états supplémentaires ═══════════════
   Les états .active et :hover existent déjà dans la section TROMBINOSCOPE.
   On ajoute ici .en-attente (demande envoyée) et .demande-recue (demande reçue). */
.btn-action.ami.en-attente {
    border-color: #F59E0B;
    color: #B45309;
    background: #FFFBEB;
    cursor: default; /* pas de clic — la demande est déjà envoyée */
}
.btn-action.ami.demande-recue {
    border-color: #7C3AED;
    color: #5B21B6;
    background: #F5F3FF;
}

/* ═══════════════ BOUTONS COUP DE CŒUR — états supplémentaires ═══════════════
   .active seul  → coup de cœur envoyé, pas encore de retour (rose clair bordure)
   .active.match → match mutuel confirmé (rose plein, rempli)
   .recu         → j'ai reçu un coup de cœur sans avoir répondu (violet) */

/* Match mutuel : fond rose intense, texte blanc → état fort */
.btn-action.coup-coeur.active.match {
    background:   #E11D48;
    border-color: #E11D48;
    color:        white;
}
.btn-action.coup-coeur.active.match:hover {
    background:   #BE123C;
    border-color: #BE123C;
    color:        white;
}
/* Icône ❤️ en blanc sur fond rose : filter brightness+invert efface la couleur
   native de l'emoji et le restitue en blanc pur */
.btn-action.coup-coeur.active.match .btn-icon {
    filter: brightness(0) invert(1);
}

/* Ami(e)s confirmé(e)s : fond bleu plein + icône et texte blancs
   (surcharge la règle du TROMBINOSCOPE : bordure bleue sur fond clair) */
.btn-action.ami.active {
    background:   #2563EB;
    border-color: #2563EB;
    color:        white;
}
.btn-action.ami.active:hover {
    background:   #1D4ED8;
    border-color: #1D4ED8;
    color:        white;
}
.btn-action.ami.active .btn-icon {
    filter: brightness(0) invert(1);
}

/* ═══════════════ BOUTON FAVORI — état actif ═══════════════
   Surcharge la règle du TROMBINOSCOPE (bordure or sur fond crème).
   Quand un profil est en favoris : fond or plein + icône et texte blancs,
   même logique visuelle que .btn-action.coup-coeur.active.match et .btn-action.ami.active */
.btn-action.favori.active {
    background:   #D97706;
    border-color: #D97706;
    color:        white;
}
.btn-action.favori.active:hover {
    background:   #B45309;
    border-color: #B45309;
    color:        white;
}
.btn-action.favori.active .btn-icon {
    filter: brightness(0) invert(1);
}

/* ═══════════════ BOUTON RETIRER — page Mes favoris ═══════════════
   Bouton secondaire neutre (même style que .tb-btn-passer)
   pour retirer un membre de ses favoris depuis la page /mes-favoris/ */
.tb-btn-retirer {
    padding:       7px 14px;
    background:    var(--cream);
    color:         var(--muted);
    border:        1px solid var(--cream-dark);
    border-radius: 8px;
    font-size:     12px;
    font-weight:   600;
    cursor:        pointer;
    transition:    background var(--transition);
}
.tb-btn-retirer:hover    { background: var(--cream-dark); color: var(--charcoal); }
.tb-btn-retirer:disabled { opacity: 0.5; cursor: not-allowed; }

/* Coup de cœur reçu sans réponse : violet doux → invite à matcher en retour */
.btn-action.coup-coeur.recu {
    border-color: #7C3AED;
    color:        #5B21B6;
    background:   #F5F3FF;
}
.btn-action.coup-coeur.recu:hover {
    background:   #EDE9FE;
    border-color: #6D28D9;
    color:        #4C1D95;
}

/* ── GRILLE ACCÈS RAPIDE — 4 cartes (Mon profil, Mes photos, Note RDV, Paramètres) ──
   auto-fit + minmax : s'adapte automatiquement selon la largeur disponible.
   Desktop → 4 colonnes, tablette → 2-3, mobile → 2. */
.tb-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 16px;
}

/* Cartes = liens <a> — on retire le soulignement par défaut */
.tb-card {
    text-decoration: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: transform var(--transition), box-shadow var(--transition);
    cursor: pointer;
}

.tb-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(201,79,109,0.1);
}

.tb-card-icon  { font-size: 28px; }

.tb-card-titre {
    font-size: 15px;
    font-weight: 600;
    color: var(--charcoal);
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Badge numérique sur les cartes de la grille Mon espace
   Miroir des badges du menu nav, mais intégré inline dans le titre de la carte.
   --ami   → bleu  (demandes d'amis en attente)
   --coeur → rouge (coups de cœur non traités) */
.tb-card-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    color: white;
    line-height: 1;
}
.tb-card-badge--ami     { background: #2563EB; } /* bleu — demandes amis */
.tb-card-badge--coeur   { background: #E11D48; } /* rouge — coups de cœur */
.tb-card-badge--message { background: var(--rose); } /* rose — messages non lus */

.tb-card-desc {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.5;
}

/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║              TABLEAU DE BORD MEMBRE — Responsive mobile                ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */

@media (max-width: 600px) {
    .tb-main   { padding: 24px 16px; }
    .tb-grid   { grid-template-columns: 1fr 1fr; } /* 2 colonnes sur mobile */
    .tb-statut { flex-direction: column; gap: 12px; }

    /* Cartes d'interaction : empiler les actions sous les infos sur petit écran */
    .tb-interaction-card {
        flex-wrap: wrap;
    }
    .tb-interaction-infos {
        flex: 1 0 0; /* prend toute la largeur restante à côté de la photo */
    }
    .tb-interaction-actions {
        flex-direction: row;
        width: 100%;
        margin-top: 8px;
        padding-top: 10px;
        border-top: 1px solid var(--cream-dark);
    }
    .tb-btn-accepter,
    .tb-btn-refuser,
    .tb-btn-voir,
    .tb-btn-matcher,
    .tb-btn-passer {
        flex: 1;
        text-align: center;
    }
}

/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  16. NOTE DE RENDEZ-VOUS                                                ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */

.note-rdv-card {
  background: var(--charcoal);
  border-radius: var(--radius-xl);
  padding: 28px;
  color: white;
  position: relative;
  overflow: hidden;
}
.note-rdv-card::before {
  content: '';
  position: absolute;
  top: -40px; right: -40px;
  width: 160px; height: 160px;
  background: radial-gradient(circle, rgba(201,79,109,0.3) 0%, transparent 70%);
}


/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  17. FOOTER                                                             ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */

.footer-sinceres {
  background: var(--charcoal);
  color: rgba(255,255,255,0.5);
  text-align: center;
  padding: 28px 48px;
  font-size: 13px;
  font-weight: 300;
}
.footer-sinceres a { color: var(--rose); }
.footer-sinceres a:hover { color: #F4A0B5; }


/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  18. MODAL CONFIRMATION                                                 ║
   ║  Commun à toutes les pages membres                                      ║
   ║  Déclenché par : déconnexion (header.php), suspension et suppression    ║
   ║  de compte (espace-membre-parametres.php)                               ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */

/* ═══════════════ Overlay (fond sombre) ═══════════════ */
/* Couvre toute la page en position fixed. Caché par défaut,
   affiché via la classe "actif" ajoutée par ouvrirModal() en JS. */
.sinceres-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;                           /* couvre top/right/bottom/left en une propriété */
  background: rgba(0,0,0,0.55);      /* fond sombre semi-transparent */
  z-index: 9999;                      /* au-dessus de tout (nav : z-index ~100) */
  align-items: center;
  justify-content: center;
  padding: 24px;
}
/* Passage en flex quand actif → centre le modal dans la page */
.sinceres-modal-overlay.actif { display: flex; }

/* ═══════════════ Boîte du modal ═══════════════ */
.sinceres-modal {
  background: #fff;
  border-radius: 16px;
  padding: 32px 28px 24px;
  max-width: 420px;
  width: 100%;
  box-shadow: 0 20px 60px rgba(0,0,0,0.18);
  animation: sinceres-modal-in 0.18s ease;  /* légère animation d'apparition */
}

/* Animation d'entrée : monte de 10px en fondu */
@keyframes sinceres-modal-in {
  from { opacity: 0; transform: translateY(10px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

/* ═══════════════ Contenu ═══════════════ */
/* Icône affichée au-dessus du titre (emoji injecté par JS) */
.sinceres-modal-icone { font-size: 28px; margin-bottom: 10px; }

/* Titre principal — texte court, gras */
.sinceres-modal-titre {
  font-size: 18px;
  font-weight: 700;
  color: var(--charcoal);
  margin: 0 0 10px 0;
}

/* Texte descriptif — plus petit, gris */
.sinceres-modal-texte {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.55;
  margin: 0 0 24px 0;
}

/* ═══════════════ Boutons ═══════════════ */
.sinceres-modal-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;         /* alignés à droite */
}

/* Bouton "Annuler" — neutre, discret */
.sinceres-modal-annuler {
  background: none;
  border: 1.5px solid #DDD6CE;
  border-radius: 8px;
  padding: 9px 18px;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.2s, color 0.2s;
}
.sinceres-modal-annuler:hover { border-color: var(--charcoal); color: var(--charcoal); }

/* Bouton "Confirmer" — rose par défaut (ex : déconnexion, action réversible) */
.sinceres-modal-confirmer {
  background: var(--rose);
  border: none;
  border-radius: 8px;
  padding: 9px 18px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.2s;
}
.sinceres-modal-confirmer:hover { background: #b03d5a; }

/* Variante rouge — actions irréversibles (suspendre, supprimer) */
.sinceres-modal-confirmer.danger { background: #B71C1C; }
.sinceres-modal-confirmer.danger:hover { background: #8B0000; }

/* ═══════════════ Responsive mobile ═══════════════ */
@media (max-width: 480px) {
  /* Sur mobile : boutons empilés, Confirmer en premier (plus accessible) */
  .sinceres-modal-actions { flex-direction: column-reverse; }
  .sinceres-modal-annuler,
  .sinceres-modal-confirmer { width: 100%; text-align: center; }
}


/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  18. PAGE PUBLIQUE MEMBRE                                               ║
   ║  Page    : rencontres-sinceres.com/espace-membre-page-public/          ║
   ║  Template : templates/espace-membre-page-public.php                    ║
   ║                                                                        ║
   ║  Affiche le profil complet d'un membre (photo, galerie, infos,         ║
   ║  description, statut en ligne, boutons interaction).                   ║
   ║  Sert aussi d'aperçu personnel depuis espace-membre-profil.php.        ║
   ║  Toutes les classes sont préfixées pp- (Page Publique).               ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */

/* ═══════════════ Wrapper principal ═══════════════ */

/* Conteneur central, mêmes contraintes de largeur que le reste du site */
.pp-wrap {
  max-width: 960px;
  margin: 0 auto;
  padding: 32px 24px 80px;
}


/* ═══════════════ Bannière aperçu ═══════════════ */

/* Bandeau rose pâle visible uniquement quand le membre regarde son propre profil.
   Affiche : icône + message + bouton "Modifier mon profil" */
.pp-banniere-apercu {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--rose-light);   /* rose très pâle — défini dans section 1 Variables */
  border: 1.5px solid var(--rose);
  border-radius: 10px;
  padding: 14px 20px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}

.pp-banniere-icone {
  font-size: 22px;
  flex-shrink: 0;
}

/* Zone de texte — occupe l'espace restant entre l'icône et le bouton */
.pp-banniere-texte {
  flex: 1;
  min-width: 160px;
}

.pp-banniere-texte strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--rose);
  margin-bottom: 2px;
}

.pp-banniere-texte span {
  font-size: 13px;
  color: var(--muted);
}

/* Bouton "Modifier mon profil" dans la bannière aperçu */
.pp-banniere-btn {
  background: var(--rose);
  color: white;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s;
}
.pp-banniere-btn:hover { background: #b03d5a; color: white; }


/* ═══════════════ Lien retour ═══════════════ */

/* Lien "← Retour aux profils" ou "← Retour à Mon Compte" */
.pp-retour {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--muted);
  text-decoration: none;
  margin-bottom: 28px;
  transition: color 0.2s;
}
.pp-retour:hover { color: var(--rose); }


/* ═══════════════ Layout 2 colonnes ═══════════════ */

/* Grille : colonne photos fixe à 340px | colonne infos flexible
   align-items: start → les deux colonnes ne s'étirent pas l'une l'autre */
.pp-layout {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 40px;
  align-items: start;
}


/* ═══════════════ Colonne photos ═══════════════ */

/* Cadre de la photo principale — carré, coins arrondis */
.pp-photo-principale-wrap {
  border-radius: 14px;
  overflow: hidden;
  background: var(--cream);
  aspect-ratio: 1 / 1;    /* carré parfait quelle que soit la largeur */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* La photo remplit le cadre carré en recadrant si nécessaire */
.pp-photo-principale {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 0.25s;   /* fondu lors du changement de photo via ppSwitchPhoto() */
}

/* Placeholder emoji quand aucune photo n'est disponible */
.pp-photo-placeholder {
  font-size: 80px;
  text-align: center;
  width: 100%;
  padding: 60px 0;
  line-height: 1;
}

/* Galerie de miniatures sous la photo principale */
.pp-galerie {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}

/* Chaque miniature est cliquable et change la photo principale */
.pp-galerie-thumb {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 8px;
  cursor: pointer;
  border: 2.5px solid transparent;
  opacity: 0.7;
  transition: border-color 0.2s, opacity 0.2s;
}

/* État hover et état actif (miniature sélectionnée) — bordure rose */
.pp-galerie-thumb:hover,
.pp-galerie-thumb.active {
  border-color: var(--rose);
  opacity: 1;
}


/* ═══════════════ Colonne infos ═══════════════ */

/* Prénom + âge — titre principal de la fiche */
.pp-nom {
  font-size: 28px;
  font-weight: 700;
  color: var(--charcoal);
  margin-bottom: 12px;
  font-family: 'Playfair Display', Georgia, serif;
  line-height: 1.2;
  display: flex;
  align-items: baseline;
  gap: 8px;
}

/* Sigle de genre Unicode : ♂ ♀ ⚧
   Légèrement plus petit que le prénom et en couleur atténuée —
   informatif sans dominer visuellement le nom.
   À terme ce sigle servira de base au filtre d'orientation (tâche 10.11). */
.pp-genre-sigle {
  font-size: 18px;
  font-weight: 400;
  color: var(--muted);
  font-family: Arial, sans-serif;   /* les symboles Unicode s'affichent mieux en sans-serif */
  flex-shrink: 0;
}

/* Ligne badge + statut en ligne — flex pour aligner horizontalement */
.pp-meta-ligne {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

/* Badge niveau d'abonnement — même style que dans le trombinoscope */
.pp-badge-abonnement {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 4px 12px;
  border-radius: 100px;
  color: white;
}
.pp-badge-abonnement.discret   { background: var(--muted); }
.pp-badge-abonnement.classique { background: var(--rose); }
.pp-badge-abonnement.premium   { background: var(--gold); color: var(--charcoal); }

/* Statut en ligne / hors ligne */
.pp-activite {
  font-size: 13px;
  color: var(--muted);
}
.pp-activite.online {
  color: #2E7D32;   /* vert foncé — cohérent avec les autres indicateurs online du site */
  font-weight: 600;
}

/*
 * Badge de réactivité sur la fiche profil public.
 * Plus explicite que dans le trombinoscope : affiche l'emoji + un libellé court.
 * Fond très léger pour rester lisible sans dominer la meta-ligne.
 */
.pp-badge-react {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 100px;
  background: var(--warm);
  color: var(--charcoal);
  border: 1px solid #E8E2DA;
}
/* Couleurs optionnelles par niveau — subtiles, pas nécessaires mais prêtes */
.pp-react-rapide { border-color: #FDE68A; background: #FFFBEB; color: #92400E; }
.pp-react-moyen  { border-color: #DDD6CE; }
.pp-react-lent   { border-color: #DDD6CE; color: var(--muted); }

/* Ville + type de relation recherchée */
.pp-meta {
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 24px;
  line-height: 1.6;
}

/* Séparateur · entre ville et relation */
.pp-sep { margin: 0 4px; }

/* Description complète du membre — interligne généreux pour la lisibilité */
.pp-description {
  font-size: 15px;
  color: var(--charcoal);
  line-height: 1.8;
  margin-bottom: 32px;
  white-space: pre-wrap;   /* conserve les retours à la ligne saisis par le membre */
}

/* Description vide — texte grisé en italique */
.pp-description-vide {
  color: var(--muted);
  font-style: italic;
  white-space: normal;
}


/* ═══════════════ Boutons d'interaction ═══════════════ */

/* Rangée de boutons : Coup de cœur | Demande d'ami | Favoris
   Le AJAX sera branché aux tâches 10.6, 10.7, 10.8 */
.pp-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 4px;
}

/* Style de base des boutons — outline coloré, fond blanc */
.pp-btn-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: 1.5px solid;
  background: white;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  font-family: inherit;
}

/*
 * Bouton "Abonnement requis" — cloisonnement actif.
 * Affiché à la place de "Lui écrire" quand l'abonnement ne permet pas
 * d'initier ce contact. Cursor:default car ce n'est pas cliquable.
 */
.pp-btn-message-bloque {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  border: 1.5px solid #DDD6CE;
  background: #F5F3F0;
  color: var(--muted);
  cursor: default;
  font-family: inherit;
}

/* Coup de cœur — rose */
.pp-btn-action.coup-coeur { color: var(--rose); border-color: var(--rose); }
.pp-btn-action.coup-coeur:hover { background: var(--rose); color: white; }

/* Demande d'ami — charbon */
.pp-btn-action.ami { color: var(--charcoal); border-color: #DDD6CE; }
.pp-btn-action.ami:hover { background: var(--charcoal); color: white; border-color: var(--charcoal); }

/* Favoris — doré */
.pp-btn-action.favori { color: var(--gold); border-color: var(--gold); }
.pp-btn-action.favori:hover { background: var(--gold); color: white; }

/* ═══════════════ États actifs — pp-btn-action (espace-membre-page-public.php) ═══════════════ */
/* Ces classes sont ajoutées par JS selon l'état de la relation avec le membre affiché.
   La logique est identique à celle du trombinoscope (btn-action), mais appliquée aux
   boutons de la page de profil individuelle (.pp-btn-action). */

/* Coup de cœur — Match mutuel (les deux se sont likés) : rose plein ❤️
   Priorité maximale — doit surclasser .active seul, d'où la double classe */
.pp-btn-action.coup-coeur.active.match {
  background: #E11D48;     /* rose vif — même couleur que --rose mais explicite pour la cascade */
  color: white;
  border-color: #E11D48;
}
.pp-btn-action.coup-coeur.active.match .btn-icon {
  filter: brightness(0) invert(1); /* rend l'emoji blanc sur fond rose */
}
.pp-btn-action.coup-coeur.active.match:hover { background: #BE123C; border-color: #BE123C; }

/* Coup de cœur — Like envoyé sans retour : identique au trombinoscope
   (fond rose très clair, bordure et texte rose vif, emoji garde sa couleur) */
.pp-btn-action.coup-coeur.active:not(.match) {
  background:   #FFF1F3;
  color:        #E11D48;
  border-color: #E11D48;
}
/* Pas de filter sur .btn-icon — l'emoji ❤️ garde sa couleur native (identique au trombinoscope) */
.pp-btn-action.coup-coeur.active:not(.match):hover {
  background:   #FFF1F3;
  border-color: #E11D48;
}

/* Coup de cœur — Like reçu sans réponse : violet subtil (invite à matcher) */
.pp-btn-action.coup-coeur.recu {
  background: #F5F3FF;
  color: #5B21B6;
  border-color: #7C3AED;
}
.pp-btn-action.coup-coeur.recu:hover { background: #EDE9FE; }

/* Ami(e) — Accepté : bleu plein */
.pp-btn-action.ami.active {
  background: #2563EB;
  color: white;
  border-color: #2563EB;
}
.pp-btn-action.ami.active .btn-icon {
  filter: brightness(0) invert(1);
}
.pp-btn-action.ami.active:hover { background: #1D4ED8; border-color: #1D4ED8; }

/* Ami(e) — Demande envoyée, en attente : amber/orange neutre */
.pp-btn-action.ami.en-attente {
  background: #FFFBEB;
  color: #92400E;
  border-color: #F59E0B;
  cursor: default; /* pas cliquable — annulation non supportée dans cette version */
}

/* Ami(e) — Demande reçue (l'autre a envoyé une demande) : violet informatif */
.pp-btn-action.ami.demande-recue {
  background: #F5F3FF;
  color: #5B21B6;
  border-color: #7C3AED;
}
.pp-btn-action.ami.demande-recue:hover { background: #EDE9FE; }

/* Favori — Actif : doré plein ⭐ */
.pp-btn-action.favori.active {
  background: #D97706;
  color: white;
  border-color: #D97706;
}
.pp-btn-action.favori.active .btn-icon {
  filter: brightness(0) invert(1);
}
.pp-btn-action.favori.active:hover { background: #B45309; border-color: #B45309; }

/* ─── Bouton "Écrire un message" — lien <a> stylé comme les autres pp-btn-action ─── */
/* La couleur rose Sincères correspond à l'action principale de la messagerie.        */
.pp-btn-action.pp-btn-message {
    color: var(--rose);
    border-color: var(--rose);
    text-decoration: none; /* c'est un <a>, pas un <button> */
    display: inline-flex;  /* même mise en page flex que les boutons */
}
.pp-btn-action.pp-btn-message:hover {
    background: var(--rose);
    color: white;
}


/* ═══════════════ Bouton "Aperçu de ma page" (espace-membre-profil.php) ═══════════════ */

/* Ligne du bas du formulaire Mon Compte : bouton Enregistrer + lien Aperçu côte à côte */
.mc-actions-bas {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* Bouton secondaire (outline rose) — utilisé pour l'aperçu dans espace-membre-profil.php
   NOTE : .btn-primaire (bouton plein rose) est défini dans espace-membre-profil.php
          Il devra être déplacé ici lors d'une prochaine session de refactoring CSS. */
.btn-secondaire {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--rose);
  border: 1.5px solid var(--rose);
  background: white;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
  font-family: inherit;
  cursor: pointer;
}
.btn-secondaire:hover { background: var(--rose); color: white; }


/* ═══════════════ Carte trombinoscope cliquable (page-profils.php) ═══════════════ */

/* Overlay invisible qui rend toute la carte .carte cliquable vers la page publique.
   TECHNIQUE : lien absolu couvrant toute la carte (inset:0), z-index:1.
   Les boutons .carte-actions ont z-index:2 pour rester accessibles au-dessus. */
.carte { position: relative; }   /* nécessaire pour positionner .carte-lien en absolu */

.carte-lien {
  position: absolute;
  inset: 0;            /* équivalent top:0; right:0; bottom:0; left:0 */
  z-index: 1;
  border-radius: inherit;
  text-decoration: none;
}

/* Les boutons d'action doivent rester au-dessus du lien overlay */
.carte-actions { position: relative; z-index: 2; }

/* ═══════════════ TEASER DÉCOUVERTE (trombinoscope) ═══════════════ */

/*
 * Affiché à la place des boutons d'interaction pour les membres Découverte.
 * S'affiche dans .carte-infos, en remplacement de .carte-actions.
 * Format horizontal compact pour ne pas agrandir la carte.
 */
.carte-teaser-decouverte {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 12px;
  background: var(--warm);          /* Fond crème doux, non intrusif */
  border-radius: var(--radius-sm);
  font-size: 12px;
}
.carte-teaser-icone {
  font-size: 14px;
  flex-shrink: 0;
}
/* Lien vers la page d'abonnement — style discret */
.carte-teaser-lien {
  color: var(--rose);
  text-decoration: none;
  font-weight: 600;
  font-size: 11px;
  line-height: 1.4;
  text-align: center;
}
.carte-teaser-lien:hover {
  text-decoration: underline;
}

/* ═══════════════ TEASER DÉCOUVERTE (page publique membre) ═══════════════ */

/*
 * Affiché sur la page profil public en mode aperçu pour les membres Découverte.
 * Remplace le bloc .pp-actions (boutons d'interaction).
 * Format plus grand que le teaser trombinoscope car la page a plus d'espace.
 */
.pp-decouverte-teaser {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 18px 20px;
  background: var(--warm);
  border: 1px solid #E8DDD5;
  border-radius: var(--radius-md);
  margin-top: 4px;
}
.pp-decouverte-icone {
  font-size: 24px;
}
.pp-decouverte-texte {
  margin: 0;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.5;
}
/* Bouton CTA vers la page abonnement */
.pp-decouverte-btn {
  display: inline-block;
  padding: 10px 20px;
  background: var(--rose);
  color: #fff;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.2s;
}
.pp-decouverte-btn:hover {
  background: #B8435F;
}

/* ═══════════════ Responsive ═══════════════ */

@media (max-width: 768px) {
  /* Sur tablette/mobile : les 2 colonnes passent en 1 colonne */
  .pp-layout {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .pp-nom { font-size: 22px; }
}

@media (max-width: 480px) {
  .pp-wrap { padding: 20px 16px 60px; }

  /* Miniatures un peu plus petites sur petit écran */
  .pp-galerie-thumb { width: 60px; height: 60px; }

  /* Boutons empilés verticalement sur mobile */
  .pp-actions { flex-direction: column; }
  .pp-btn-action { width: 100%; justify-content: center; }

  /* Bannière aperçu : disposition verticale sur très petit écran */
  .pp-banniere-apercu { flex-direction: column; align-items: flex-start; }
  .pp-banniere-btn { width: 100%; text-align: center; }

  /* Bouton aperçu dans Mon Compte : empilé sur mobile */
  .mc-actions-bas { flex-direction: column; align-items: stretch; }
  .btn-secondaire { text-align: center; justify-content: center; }
}