@charset "UTF-8";

/*
 * Sereines — sinceres.css  v6.35
 * 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
 * 18.  Landing page (templates/landing.php)
 *
 * ────────────────────────────────────────────────────────────────────────────
 */



/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║                                                                        ║
   ║   ██████╗  █████╗ ██████╗ ████████╗██╗███████╗     █████╗             ║
   ║   ██╔══██╗██╔══██╗██╔══██╗╚══██╔══╝██║██╔════╝    ██╔══██╗            ║
   ║   ██████╔╝███████║██████╔╝   ██║   ██║█████╗      ███████║            ║
   ║   ██╔═══╝ ██╔══██║██╔══██╗   ██║   ██║██╔══╝      ██╔══██║            ║
   ║   ██║     ██║  ██║██║  ██║   ██║   ██║███████╗    ██║  ██║            ║
   ║   ╚═╝     ╚═╝  ╚═╝╚═╝  ╚═╝   ╚═╝   ╚═╝╚══════╝    ╚═╝  ╚═╝            ║
   ║                                                                        ║
   ║   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;

  /* min-height au lieu de height fixe — évite la troncature du contenu sur certains écrans/zooms */
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1px 48px; /* padding haut/bas quasi nul : le logo agrandi (70px) remplit le menu sans le rendre trop épais */

  /* 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-rencontre-v2-header.svg (height: 70px) 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 70px, agrandi (avant : 48px). Le padding du menu
   a été réduit à 1px en même temps (voir .nav-sinceres et .nav) pour que
   le menu ne devienne pas trop épais malgré le logo plus grand. */
.nav-logo img,
.nav-logo-img {
  height: 70px;
  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;
}

/* ── Bouton Boîte à lettres dans la nav membre ──
   Positionné juste avant le pill prénom, à droite du menu principal.
   Ressemble visuellement à un lien de nav (même police, même couleur),
   mais c'est un <button> (ouvre une modale, pas une page).
   border:none + background:transparent = pas de style bouton natif du navigateur. */
.nav-boite-btn {
  background: transparent;
  border: none;
  color: var(--charcoal);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background var(--transition), color var(--transition);
}
.nav-boite-btn:hover {
  background: var(--rose-light);
  color: var(--rose);
}

/* ── CTA permanent "Débloquer tous les échanges" (membre Découverte) ──
   Chantier Découverte, Étape 7 — ajouté le 15/07/2026. Visible sur toutes
   les pages membre pour un Découverte, en plus des liens déjà présents
   ailleurs (trombinoscope, Mon espace...). Volontairement différent du
   bouton rose plein "Déconnexion" (dernier lien du menu, déjà stylé en CTA
   via .nav-cta) pour ne pas créer 2 pastilles roses identiques côte à côte
   qui porteraient à confusion — dégradé or/rose + léger effet de pulsation,
   discret mais qui attire l'œil sans être criard. */
.nav-upgrade-btn {
  display: inline-block;
  background: linear-gradient(135deg, var(--gold, #C4A882), var(--rose));
  color: white !important;
  font-weight: 600;
  font-size: 13px;
  padding: 8px 18px;
  border-radius: var(--radius-pill);
  text-decoration: none;
  white-space: nowrap;
  animation: navUpgradePulse 2.4s ease-in-out infinite;
  transition: transform var(--transition);
}
.nav-upgrade-btn:hover {
  color: white !important;
  transform: translateY(-1px);
}
@keyframes navUpgradePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201,79,109,.35); }
  50%      { box-shadow: 0 0 0 6px rgba(201,79,109,0); }
}
@media (max-width: 900px) {
  .nav-upgrade-btn { display: block; text-align: center; margin: 4px 0; }
}

/* ── 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; }

/* ── Sélecteurs date de naissance (Jour / Mois / Année) ─────────────────
   Remplace input[type=date] pour compatibilité Safari.
   3 selects côte à côte dans un flex-row. ──────────────────────────────── */
.form-date-selects {
  display: flex;
  gap: 8px;
  width: 100%;
}
/* Proportions : Jour 22% — Mois 44% — Année 30% */
.form-date-selects .form-date-select:nth-child(1) { flex: 0 0 22%; min-width: 0; }
.form-date-selects .form-date-select:nth-child(2) { flex: 1 1 44%; min-width: 0; }
.form-date-selects .form-date-select:nth-child(3) { flex: 0 0 30%; min-width: 0; }

/* 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; }
  /* Bouton boîte à lettres masqué sur mobile — accessible via le menu burger */
  .nav-boite-btn   { 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-sereines.fr/                                        ║
   ║  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;
  min-height: var(--nav-h); /* min-height au lieu de height fixe — évite la troncature sur certains écrans/zooms */
  z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1px 48px; /* padding haut/bas quasi nul : le logo agrandi (70px) remplit le menu sans le rendre trop épais */
  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 */
}

/* Logo image du menu accueil — passé en silhouette blanche pleine.
   Le fichier logo-rencontre-v2-header.svg est en noir + rose, fait pour
   un fond clair (les autres pages). Ici le menu est sombre et transparent
   (posé sur la photo), donc ce même logo serait invisible sans ce filtre :
   brightness(0) = toutes les couleurs deviennent noires,
   invert(1) = ce noir devient blanc → silhouette blanche, lisible sur fond sombre.
   Uniquement sur #mainNav (menu de la page d'accueil) — les autres pages
   gardent le logo en couleur d'origine sur leur fond clair. */
#mainNav .nav-logo-img {
  filter: brightness(0) invert(1);
}

/* 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 */
/* z-index relevé de 2 à 5 le 14/07/2026 : à l'étape 2 du formulaire (plus haute
   que l'étape 1), le bouton "Continuer" pouvait se retrouver caché derrière la
   barre .hero-proof (z-index 3) sur les écrans avec peu de hauteur disponible
   — bouton alors non cliquable, sans erreur visible. Le formulaire doit
   toujours rester au-dessus de cette barre, même en cas de chevauchement visuel. */
.hero-content {
  position: relative; z-index: 5;
  display: flex; flex-direction: column;
  align-items: center; width: 100%;
  padding: 65px 24px 180px; /* 65px top : bloc logo remonté, toujours sous la nav fixe (68px) grâce au centrage vertical du .hero */
}

/* ── Écrin pill du logo hero ──
   Le logo (SVG rencontres♥sereines) est posé sur la photo dans une pilule
   en verre dépoli (backdrop-filter), pour qu'il reste lisible quelle que
   soit la photo affichée par le slider derrière.
   background rgba(crème, 0.65) : assez opaque pour que le texte du logo
   (rose + noir) reste net sur une photo sombre, tout en gardant un effet
   de transparence (on devine encore la photo à travers).
   padding 57px en largeur : la pilule reste aussi large qu'avant malgré
   le logo réduit à 450px, pour garder la même marge autour de la petite
   phrase juste en dessous ("RENCONTRES SINCÈRES · SÉCURISÉES · RESPECTUEUSES").
   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.65);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: 100px;
  padding: 14px 57px;
  margin: 0 auto 16px;
  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: 450px;
  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: 520px; /* élargi 460→520 pour 4 cartes sur une ligne */
  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 : "Vous êtes") */
.form-options-row {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 8px; margin-bottom: 12px;
}
/* Variante 4 colonnes pour "Vous recherchez" — alignée sur la même largeur que les 3 colonnes */
.form-options-row--4col {
  grid-template-columns: repeat(4, 1fr);
}
.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); }

/* Label de section "Vous êtes :" / "Vous recherchez :" — plus visible */
.form-label {
  font-size: 13px; font-weight: 600;
  color: var(--charcoal); margin: 10px 0 8px;
}

/* ── Bouton retour du formulaire multi-étapes ────────────────────────────────
   CE QUE ça fait : affiche "← Retour" en haut du formulaire sur étapes 2 et 3.
   COMMENT : border-radius 20px 20px 0 0 pour suivre l'arrondi du .hero-form
     qui a overflow:hidden — sans ça le bouton est tronqué dans les coins.
   POURQUOI : placement en dehors des .form-step pour rester visible quelle que
     soit l'étape active, séparé par une bordure basse discrète. */
.form-back {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 16px;
  font-size: 13px; font-weight: 500; color: var(--charcoal);
  background: rgba(0,0,0,.03); border: none; cursor: pointer;
  border-bottom: 1px solid rgba(0,0,0,.08);
  border-radius: 20px 20px 0 0; /* suit l'arrondi du .hero-form pour éviter le clipping */
  width: 100%; text-align: left;
  transition: color .2s, background .2s;
}
.form-back:hover { color: var(--rose); background: rgba(201,79,109,.04); }

.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 */
}
/* Décale aussi la nav des pages intérieures quand la barre admin WordPress est visible.
   Sans cette règle, la barre admin (32px) masque le haut de .nav-sinceres (position:fixed top:0). */
body.admin-bar .nav-sinceres {
  top: 32px;
}
/* Compense la barre admin (32px) dans le padding-top du body.
   Sans cette règle, le contenu démarre à 72px du haut, mais la nav
   est à top:32px — ce qui ne laisse que 40px sous la nav (72-32=40).
   Avec 104px, le contenu commence bien 72px sous le bas de la nav (32+72=104). */
body.admin-bar {
  padding-top: 104px;
}
@media screen and (max-width: 782px) {
  body.admin-bar .nav {
    top: 46px; /* mobile : barre admin = 46px */
  }
  body.admin-bar .nav-sinceres {
    top: 46px;
  }
  /* Mobile : barre admin = 46px → padding-top ajusté en conséquence */
  body.admin-bar {
    padding-top: 118px; /* 72px nav + 46px barre admin mobile */
  }
}

/* ═══════════════ 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 */

  /* CORRECTION : spécificité ID (1-1-0) > admin.css .nav-links (0-1-0).
     admin.css est chargé APRÈS sinceres.css et a un .nav-links { display: flex; }
     global sans @media. Sans le #mainNav, admin.css écraserait ce display: none. */
  #mainNav .nav-links   { display: none; }           /* Liens horizontaux masqués */
  #mainNav .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 */
  #mainNav .nav-links.nav-open li a,
  #mainNav .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-sereines.fr/inscription/              ║
   ║  Page connexion    : rencontres-sereines.fr/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;
}

/* ── Tooltip Découverte — ajouté le 13 juillet 2026 ──────────────────────────
   CE QUE : petit texte explicatif qui apparaît au survol de la carte
            "Découverte" sur la page d'inscription, expliquant les droits
            de ce niveau (profils flous, aucune interaction).
   COMMENT : caché par défaut (display:none), affiché uniquement quand la
             souris survole .niveau-option grâce au sélecteur CSS :hover —
             aucun JavaScript nécessaire pour ce comportement.
   POURQUOI ce choix : un simple survol est plus léger qu'une fenêtre modale
             (comme celle du niveau Premium) pour un texte purement informatif,
             qui n'a pas besoin d'une confirmation de la part du visiteur. */
.niveau-decouverte-tooltip {
    display: none;
    position: absolute;
    bottom: calc(100% + 10px);
    left: 0;
    right: 0;
    background: var(--charcoal);
    color: #fff;
    font-size: 12px;
    line-height: 1.6;
    padding: 12px 16px;
    border-radius: 10px;
    z-index: 20;
    box-shadow: 0 4px 16px rgba(0,0,0,0.25);
}
/* Petite flèche pointant vers la carte, sous le tooltip */
.niveau-decouverte-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 24px;
    border: 6px solid transparent;
    border-top-color: var(--charcoal);
}
.niveau-option:hover .niveau-decouverte-tooltip {
    display: block;
}

/* Sur mobile/tablette, le survol (:hover) ne fonctionne pas de façon fiable
   au doigt — on affiche donc le texte en permanence, à la suite de la
   description, plutôt que de compter sur un survol impossible à déclencher. */
@media (max-width: 768px) {
    .niveau-decouverte-tooltip {
        display: block;
        position: static;
        margin-top: 8px;
        box-shadow: none;
    }
    .niveau-decouverte-tooltip::after {
        display: none;
    }
}

.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;
}

/* "Sereines" 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 */
}

/* Message d'erreur général en haut du formulaire d'inscription (ex : limite de
   tentatives Découverte dépassée) — ajouté le 14/07/2026, chantier Découverte
   Étape 6. Mêmes variables que .connexion-erreur pour rester cohérent. */
.inscription-erreur-generale {
    background: var(--erreur-bg);
    border: 1px solid var(--erreur-bord);
    border-left: 4px solid var(--erreur);
    border-radius: 10px;
    padding: 14px 16px;
    margin: 16px 40px 0;
    font-size: 14px;
    color: var(--erreur);
    font-weight: 500;
    line-height: 1.5;
}
@media (max-width: 480px) {
    .inscription-erreur-generale { margin: 16px 20px 0; }
}

/* 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;
}

/* "Sereines" 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 Sereines) */
.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-sereines.fr/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 de statut de connexion — affiché en haut à droite de la photo de carte.
     Deux états possibles, jamais affichés en même temps :
     - .online  : membre actif dans les 15 dernières minutes → fond sombre + texte blanc + point vert animé
     - .recent  : membre hors ligne mais déjà connecté → fond clair + texte ambre + point orange
     Le troisième état (.absent = jamais connecté) n'affiche rien du tout. */
  .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);
  }
  /* En ligne : fond sombre semi-transparent pour lisibilité sur photo, texte blanc, bordure verte */
  .badge-connexion.online {
    background: rgba(0,0,0,0.45);
    border: 1px solid rgba(34,197,94,0.5);
    color: white;
  }
  /* Point vert animé devant "En ligne · à l'instant" */
  .badge-connexion.online::before {
    content: '';
    width: 7px; height: 7px;
    background: #22C55E;
    border-radius: 50%;
    animation: pulse-green 1.5s infinite;
  }
  /* Hors ligne récent : fond blanc cassé, texte ambre, même position haut droite que .online */
  .badge-connexion.recent {
    background: rgba(255,255,255,0.85);
    border: 1px solid rgba(245,158,11,0.3);
    color: #B45309;
  }
  /* Point orange statique devant "Dernière activité : ..." */
  .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-sereines.fr/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 Sereines, 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: 10px 24px 16px;          /* Haut : 10px pour respirer sous la nav — Côtés : 24px — Bas : 16px avant msg-wrap */
  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-sereines.fr/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; }

/* ── BANDEAU EX-ABONNÉ RÉSILIÉ — "Mon espace" (12 juillet 2026) ─────────────
   CE QUE : bandeau très visible (fond rose plein, texte blanc) qui invite un
            membre repassé en Découverte après résiliation à se réabonner.
   COMMENT : fond --rose plein (contrairement à .pp-banniere-apercu qui est en
             rose pâle) pour que ce soit la première chose vue sur la page —
             c'est voulu, ce cas doit sauter aux yeux.
   POURQUOI ce choix : un membre qui a déjà payé ne doit pas rater le message
             qui lui permet de retrouver son accès complet. */
.tb-bandeau-decouverte {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--rose);
    border-radius: 12px;
    padding: 16px 22px;
    margin-bottom: 28px;
    flex-wrap: wrap;
}

.tb-bandeau-decouverte-icone {
    font-size: 24px;
    flex-shrink: 0;
}

.tb-bandeau-decouverte-texte {
    flex: 1;
    min-width: 200px;
}

.tb-bandeau-decouverte-texte strong {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 2px;
}

.tb-bandeau-decouverte-texte span {
    font-size: 13px;
    color: #fff;
    opacity: 0.9;
}

.tb-bandeau-decouverte-btn {
    flex-shrink: 0;
    background: #fff;
    color: var(--rose);
    font-size: 13px;
    font-weight: 700;
    padding: 10px 20px;
    border-radius: 8px;
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--transition);
}
.tb-bandeau-decouverte-btn:hover { background: var(--cream); }

/* ── 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; }

/* Message d'incitation — page "Mes visites" (12 juillet 2026)
   CE QUE : petit encart mis en avant dans la carte d'un visiteur, pour encourager
            le membre à faire le premier pas.
   COMMENT : fond rose très clair + liseré rose à gauche, comme les encadrés
             d'information déjà utilisés ailleurs sur le site.
   POURQUOI ce choix : rendre le message visible sans être agressif, cohérent
             avec le ton bienveillant du site (aucune notion de "pression"). */
.tb-interaction-incitation {
    font-size: 12px;
    font-style: italic;
    line-height: 1.5;
    color: var(--charcoal);
    background: var(--rose-light);
    border-left: 3px solid var(--rose);
    border-radius: 6px;
    padding: 6px 10px;
    margin: 4px 0 2px;
}

/* 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; }

    /* Bandeau ex-abonné résilié : empiler icône/texte/bouton sur petit écran
       plutôt que de les compresser sur une seule ligne trop étroite. */
    .tb-bandeau-decouverte {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }
    .tb-bandeau-decouverte-btn {
        width: 100%;
        text-align: center;
    }

    /* 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-sereines.fr/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: 100px 24px 80px; /* 72px nav fixe + 28px espace */
}


/* ═══════════════ 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() */
}

/* Curseur loupe sur la photo principale pour signaler l'agrandissement possible */
.pp-photo-zoomable { cursor: zoom-in; }

/* ── Lightbox photos ───────────────────────────────── */

/* Overlay sombre plein écran — caché par défaut, affiché avec .visible */
.pp-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.92);
  z-index: 9000;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.pp-lightbox.visible {
  display: flex;
}
/* Photo agrandie dans la lightbox — max 90% de la fenêtre */
.pp-lightbox img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.6);
}
/* Bouton × en haut à droite */
.pp-lightbox-fermer {
  position: fixed;
  top: 18px;
  right: 24px;
  background: none;
  border: none;
  color: #fff;
  font-size: 36px;
  line-height: 1;
  cursor: pointer;
  z-index: 9001;
  opacity: 0.85;
}
.pp-lightbox-fermer:hover { opacity: 1; }

/* Boutons précédent / suivant — centré verticalement sur les côtés */
.pp-lightbox-nav {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.25);
  color: #fff;
  font-size: 28px;
  line-height: 1;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 9001;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
.pp-lightbox-nav:hover { background: rgba(255,255,255,0.28); }
.pp-lightbox-prev { left: 20px; }
.pp-lightbox-next { right: 20px; }

/* Compteur "1 / 3" en bas au centre */
.pp-lightbox-compteur {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,0.7);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.5px;
  z-index: 9001;
}

@media (max-width: 480px) {
  .pp-lightbox-nav { width: 40px; height: 40px; font-size: 22px; }
  .pp-lightbox-prev { left: 8px; }
  .pp-lightbox-next { right: 8px; }
}

/* ── Carte membre — overlay nom + badge réactivité ────────────────────────────
   Styles communs à la carte du trombinoscope ET à la carte aperçu du profil membre.
   Source HTML unique : templates/carte-membre.php (inclus aux deux endroits).
   Structure de la ligne nom : genre + badge réactivité à gauche / prénom+âge à droite. */

/* Ligne nom : flex space-between
   Gauche (.carte-overlay-nom-gauche) : icône genre + badge réactivité
   Droite (.carte-overlay-nom-droite) : prénom + âge */
.carte-overlay-nom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.carte-overlay-nom-gauche {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}
.carte-overlay-nom-droite {
  text-align: right;
}
.badge-reactivite-carte {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 100px;
  white-space: nowrap;
  color: white; /* texte blanc pour lisibilité sur fond de photo */
}
/* Fond doré semi-transparent pour "Répond vite" */
.badge-react-rapide {
  background: rgba(180,83,9,0.55);
  border: 1px solid rgba(234,179,8,0.5);
}
/* Fond gris semi-transparent pour "Répond parfois" */
.badge-react-moyen {
  background: rgba(75,85,99,0.55);
  border: 1px solid rgba(156,163,175,0.4);
}
/* Fond gris foncé semi-transparent pour "Répond rarement" */
.badge-react-lent {
  background: rgba(55,65,81,0.55);
  border: 1px solid rgba(107,114,128,0.35);
}

/* ── Carte aperçu (mode aperçu uniquement) ────────── */

/* Bloc contenant la carte miniature sous les photos */
.pp-apercu-carte-bloc {
  margin-top: 20px;
}
.pp-apercu-carte-titre {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--muted);
  margin-bottom: 10px;
}
/* Carte aperçu — pleine largeur de la colonne photos (340px).
   pointer-events:none : non cliquable, c'est un aperçu visuel uniquement. */
.pp-apercu-carte {
  width: 100%;
  cursor: default;
  pointer-events: none;
}
/* Dans la carte aperçu, on désactive le hover (inutile sur un aperçu statique) */
.pp-apercu-carte.carte:hover {
  transform: none;
  box-shadow: 0 2px 12px rgba(28,28,28,0.08);
  border-color: rgba(201,79,109,0.08);
}

/* 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); }

/* Ancienne règle .pp-meta — conservée pour compatibilité ascendante */
.pp-meta { display: none; }
.pp-sep  { display: none; }

/* ═══════════════ LISTE D'INFOS (ville+région, relation) ═══════════════ */
/* CE QUE : remplace l'ancienne ligne .pp-meta par un bloc structuré
            avec une ligne par info (localisation / relation recherchée).
   COMMENT : flex column — chaque ligne = icône + valeur côte à côte.
   POURQUOI : plus lisible, plus élégant, permet d'ajouter des infos facilement. */

.pp-infos-liste {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 12px 0 4px;
}

/* Une ligne d'info : [icône] [texte] */
.pp-info-ligne {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 0.9rem;
    color: #374151;
    line-height: 1.4;
}

/* Icône — taille fixe pour aligner les textes */
.pp-info-icone {
    flex-shrink: 0;
    font-size: 0.95rem;
    width: 20px;
    text-align: center;
}

/* Zone valeur — contient le texte principal + éventuellement un label */
.pp-info-val {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0 6px;
}

/* Étiquette discrète avant la valeur (ex: "Recherche") */
.pp-info-label {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #9CA3AF;
}

/* Région — légèrement plus discrète que la ville, séparée par une virgule */
.pp-info-region {
    color: #9CA3AF;
    font-size: 0.85rem;
}
/* Affiche une virgule entre la ville et la région via pseudo-élément */
.pp-info-region::before { content: ', '; }

/* Lien "Modifier mes photos" sous la photo — visible uniquement en mode aperçu.
   Centré, discret, avec un léger espace au-dessus de la galerie. */
.pp-lien-photos {
    display: block;
    text-align: center;
    font-size: 0.82rem;
    color: var(--muted);
    text-decoration: none;
    padding: 8px 0 4px;
    transition: color 0.15s;
}
.pp-lien-photos:hover { color: var(--rose); }

/* ═══════════════ Sections structurées ═══════════════ */
/* Page : rencontres-sereines.fr/espace-membre-page-public/
   Template : templates/espace-membre-page-public.php

   QUE C'EST : chaque "section" regroupe un titre visible (ex. "À PROPOS",
   "CENTRES D'INTÉRÊT") et son contenu. Ce système remplace l'ancien affichage
   en vrac où tout s'enchaînait sans hiérarchie visuelle.

   COMMENT ÇA FONCTIONNE : une fine ligne rose sépare chaque section de la
   précédente, et un espace vide au-dessus donne de l'air entre les blocs.
   Le titre en petites majuscules indique clairement de quoi parle chaque section. */
.pp-section {
  border-top: 1px solid var(--rose-clair, #f0d0d8);
  padding-top: 20px;
  margin-top: 20px;
}

/* Titre de section — petit, en majuscules, couleur rose foncé.
   letter-spacing : espacement des lettres pour renforcer l'effet "label".
   margin-bottom : espace entre le titre et le contenu de la section. */
.pp-section-titre {
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--rose-fonce, #c0405a);
  margin: 0 0 18px 0;
}

/* ═══════════════ Description ═══════════════ */

/* Texte de présentation du membre.
   font-size 15px : lisible sans dominer la page.
   line-height 1.8 : confort de lecture pour un texte long.
   white-space pre-wrap : conserve les sauts de ligne saisis par le membre.
   margin-bottom : espace sous le texte avant le prochain élément. */
/* POURQUOI sans white-space:pre-wrap : nl2br() dans le PHP convertit déjà les
   sauts de ligne en <br> — pre-wrap les convertissait une 2e fois, créant
   un double interligne. On garde nl2br() côté PHP, pas de pre-wrap ici. */
.pp-description {
  font-size: 15px;
  color: var(--charcoal);
  line-height: 1.8;
  margin-bottom: 0;
}

/* Description vide — texte grisé en italique pour signaler l'absence */
.pp-description-vide {
  color: var(--muted);
  font-style: italic;
  font-size: 14px;
  white-space: normal;
  margin-bottom: 0;
}


/* ═══════════════ 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 Sereines 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;
  /* position:relative + z-index:2 — même traitement que .carte-actions
     (ligne ~6489) : sans ça, le lien invisible .carte-lien qui recouvre
     toute la carte (z-index:1) intercepte le clic à la place de ce lien,
     qui semblait cliquable mais ne menait jamais nulle part.
     Corrigé le 15/07/2026, chantier Découverte Étape 7. */
  position: relative;
  z-index: 2;
}
.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; }

  /* Sections : un peu moins d'espace vertical sur tablette */
  .pp-section {
    padding-top: 16px;
    margin-top: 16px;
  }
}

@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; }

  /* Sections : compact sur mobile */
  .pp-section {
    padding-top: 14px;
    margin-top: 14px;
  }
  .pp-section-titre { font-size: 13px; margin-bottom: 8px; }
  .pp-description { font-size: 14px; }

  /* 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; }
}




/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  18. LANDING PAGE                                                       ║
   ║  Page : rencontres-sereines.fr/landing-page/                           ║
   ║  Template : templates/landing.php                                       ║
   ║                                                                         ║
   ║  Tous les styles sont scopés sous .page-landing (classe body ajoutée    ║
   ║  via add_filter('body_class') dans le template PHP).                    ║
   ║  Préfixe CSS : .l- pour éviter tout conflit avec les autres sections.   ║
   ║                                                                         ║
   ║  Dépendances CSS réutilisées (section 3) : .btn-primary, .btn-secondary ║
   ║  Dépendances CSS réutilisées (section 9) : @keyframes fadeUp            ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */


/* ═══════════════ Reset général landing ═══════════════ */

/* Masquer la nav partagée (.nav-sinceres) sur la landing — remplacée par .nav#landingNav */
.page-landing .nav-sinceres {
  display: none !important;
}

/* Supprimer le padding-top que sinceres.css section 5 ajoute pour compenser la nav fixe.
   La landing gère son propre espacement via .l-hero (padding-top: 100px sur mobile). */
.page-landing {
  padding-top: 0 !important;
}

/* Défilement fluide entre les ancres (#valeurs, #securite, etc.) */
.page-landing html,
html:has(.page-landing) {
  scroll-behavior: smooth;
}


/* ═══════════════ Navigation landing (#landingNav) ═══════════════ */

/*
 * La landing réutilise la classe .nav de la home (section 11).
 * Problème : .nav est conçue pour un hero sombre (fond rgba(0,0,0,0.3), texte blanc).
 * Sur la landing, le fond est crème → on surcharge via l'ID #landingNav.
 * La spécificité d'un sélecteur ID (1-0-0) bat les sélecteurs de classe de section 11.
 *
 * Résultat : même structure HTML et JS que la home, look différent (clair).
 */

/* Fond crème à la place du noir semi-transparent de la home */
#landingNav {
  background: rgba(250, 247, 244, 0.92); /* --cream à 92% d'opacité */
  border-bottom: 1px solid rgba(201, 79, 109, 0.1);
}

/* Scrolled : renforcement du fond crème + ombre légère (pas de fond sombre comme home) */
#landingNav.scrolled {
  background: rgba(250, 247, 244, 0.98);
  box-shadow: 0 2px 20px rgba(28, 28, 28, 0.08);
}

/* Logo : couleur rose (à la place du blanc de la home) */
#landingNav .nav-logo {
  color: var(--rose);
}

/* Liens nav : texte sombre (à la place du blanc semi-transparent de la home) */
#landingNav .nav-links a {
  color: var(--muted);
  text-shadow: none; /* Annule le text-shadow blanc de #mainNav */
}

#landingNav .nav-links a:hover {
  color: var(--charcoal);
  text-shadow: none;
}

/* Séparateur entre ancres et liens WP.
   ATTENTION : les propriétés de mise en forme (width, height, align-self, margin)
   sont scopées à #mainNav dans section 11 — elles ne s'appliquent pas à #landingNav.
   On redéclare donc ici l'intégralité des règles du séparateur, avec une couleur sombre
   (à la place du blanc semi-transparent de la home). */
#landingNav .nav-links .nav-sep {
  width: 1px;
  height: 18px;
  background: rgba(28, 28, 28, 0.2);
  border-radius: 1px;
  align-self: center;
  margin: 0 4px;
  pointer-events: none;
}

/* Dernier lien du menu-principal = "S'inscrire" → style bouton CTA rose.
   NOTE : si le menu WP change d'ordre, ajuster ce sélecteur. */
#landingNav .nav-links li:last-child > a {
  background: var(--rose);
  color: white !important;
  padding: 9px 22px;
  border-radius: 100px;
  font-weight: 500;
  text-shadow: none !important;
  transition: background 0.2s, transform 0.15s;
}

#landingNav .nav-links li:last-child > a:hover {
  background: #8B2D45; /* --rose-dark */
  transform: scale(1.03);
}


/* ═══════════════ Hero ═══════════════ */

/* Section hero : pleine hauteur d'écran, centré verticalement.
   Halo rose décoratif en ::before (radial-gradient semi-transparent). */
.l-hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 120px 24px 80px;
  position: relative;
  overflow: hidden;
}

/* Halo rose décoratif en fond */
.l-hero::before {
  content: '';
  position: absolute;
  top: -100px;
  left: 50%;
  transform: translateX(-50%);
  width: 800px;
  height: 800px;
  background: radial-gradient(ellipse, rgba(201, 79, 109, 0.08) 0%, transparent 70%);
  pointer-events: none;
}

/* Pastille d'accroche — fond rose clair, texte rouge foncé, icône cœur en ::before */
.l-hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #F5E6EA; /* --rose-light */
  color: #8B2D45; /* --rose-dark */
  font-size: 13px;
  font-weight: 500;
  padding: 8px 18px;
  border-radius: 100px;
  margin-bottom: 32px;
  border: 1px solid rgba(201, 79, 109, 0.2);
  animation: fadeUp 0.6s ease both; /* fadeUp défini en section 9 */
}

/* Icône cœur avant le texte du tag */
.l-hero-tag::before {
  content: '♥';
  font-size: 11px;
}

/* Titre H1 : Playfair Display, taille fluide via clamp */
.l-hero-h1 {
  font-family: var(--font-serif);
  font-size: clamp(22px, 3vw, 38px);
  font-weight: 400;
  line-height: 1.2;
  color: var(--charcoal);
  max-width: 900px;
  margin-bottom: 24px;
  animation: fadeUp 0.6s 0.1s ease both;
}

/* Italique rose sur les <em> du titre hero */
.l-hero-h1 em {
  font-style: italic;
  color: var(--rose);
}

/* Sous-titres hero — texte muted, poids léger */
.l-hero-sub {
  font-size: clamp(16px, 2vw, 19px);
  color: var(--muted);
  line-height: 1.7;
  max-width: 580px;
  margin-bottom: 16px;
  font-weight: 300;
  animation: fadeUp 0.6s 0.2s ease both;
}

/* Variante plus petite (accroche secondaire) */
.l-hero-sub--sm {
  max-width: 460px;
  font-size: clamp(14px, 1.8vw, 17px);
}

/* Variante encore plus petite (mention du site) */
.l-hero-sub--xs {
  font-size: 14px;
  color: var(--muted);
}

/* Groupe de boutons CTA hero */
.l-hero-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 16px;
  margin-bottom: 0;
  animation: fadeUp 0.6s 0.3s ease both;
}

/* Preuve sociale : avatars + texte, en bas du hero */
.l-hero-proof {
  margin-top: 64px;
  display: flex;
  align-items: center;
  gap: 24px;
  animation: fadeUp 0.6s 0.4s ease both;
}

/* Groupe d'avatars : superposés avec margin négatif */
.l-proof-avatars {
  display: flex;
}

.l-proof-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid var(--cream);
  margin-left: -10px;
  background: #F0E8E0; /* --warm */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

/* Premier avatar : pas de marge gauche négative */
.l-proof-avatar:first-child {
  margin-left: 0;
}

/* Texte à côté des avatars */
.l-proof-text {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}

.l-proof-text strong {
  color: var(--charcoal);
  font-weight: 500;
}


/* ═══════════════ Rupture ═══════════════ */

/* Section fond sombre, texte blanc.
   Motif de hachures diagonal en ::before pour une texture subtile. */
/* v17 : fond rose clair + texte sombre (avant : charcoal + texte blanc) */
.l-rupture {
  background: var(--rose-light);
  color: var(--charcoal);
  padding: 100px 48px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* Texture hachures diagonale subtile */
.l-rupture::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 40px,
    rgba(255, 255, 255, 0.015) 40px,
    rgba(255, 255, 255, 0.015) 41px
  );
}

/* Wrapper centré */
.l-rupture-inner {
  max-width: 780px;
  margin: 0 auto;
  position: relative;
}

/* Étiquette uppercasse rose (v17 : rose au lieu de doré) */
.l-rupture-label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--rose);
  margin-bottom: 24px;
}

/* Titre H2 */
.l-rupture h2 {
  font-family: var(--font-serif);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 400;
  line-height: 1.3;
  margin-bottom: 32px;
  color: var(--charcoal);
}

/* <em> en rose (v17 : rose au lieu de doré) */
.l-rupture h2 em {
  font-style: italic;
  color: var(--rose);
}

/* Citation — texte muted sur fond clair */
.l-rupture-quote {
  font-size: clamp(15px, 2vw, 18px);
  color: var(--muted);
  line-height: 1.8;
  font-weight: 300;
  border-left: 2px solid var(--rose);
  padding-left: 24px;
  text-align: left;
  margin: 40px 0;
  font-style: normal;
}

/* Conclusion */
.l-rupture-conclusion {
  font-size: 18px;
  color: var(--charcoal);
  font-weight: 300;
}

.l-rupture-conclusion strong {
  color: var(--charcoal);
  font-weight: 500;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 20px;
}


/* ═══════════════ En-têtes de sections (réutilisé : valeurs, tarifs) ═══════════════ */

/* Wrapper centré pour le header de chaque section */
.l-section-header {
  text-align: center;
  margin-bottom: 64px;
}

/* Étiquette uppercasse rose */
.l-section-label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--rose);
  margin-bottom: 16px;
}

/* Titre H2 des sections */
.l-section-header h2,
.l-valeurs h2,
.l-securite-content h2,
.l-respect h2,
.l-tarifs h2 {
  font-family: var(--font-serif);
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 600;
  line-height: 1.2;
}

/* Paragraphe d'introduction sous le titre — texte explicatif muted */
.l-section-intro {
  font-size: 17px;
  color: var(--muted);
  line-height: 1.8;
  font-weight: 300;
  max-width: 620px;
  margin: 20px auto 0;
}

.l-section-intro strong {
  color: var(--charcoal);
  font-weight: 500;
}


/* ═══════════════ Valeurs ═══════════════ */

/* Conteneur centré avec padding vertical */
.l-valeurs {
  padding: 100px 48px;
  max-width: 1100px;
  margin: 0 auto;
}

/* Grille 3 colonnes adaptative — passe en 1 colonne sur mobile */
.l-valeurs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

/* Carte valeur — fond blanc, bordure rose légère.
   Effet hover : remonte de 4px + ombre rose.
   Ligne rose en haut animée au survol (::before scaleX 0→1). */
.l-valeur-card {
  background: white;
  border: 1px solid rgba(201, 79, 109, 0.1);
  border-radius: 20px;
  padding: 36px 32px;
  transition: transform 0.2s, box-shadow 0.2s;
  position: relative;
  overflow: hidden;
}

/* Ligne rose en haut de la carte — animée au hover */
.l-valeur-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--rose);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s;
}

.l-valeur-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(201, 79, 109, 0.1);
}

.l-valeur-card:hover::before {
  transform: scaleX(1);
}

/* Icône emoji en haut de la carte */
.l-valeur-icon {
  font-size: 32px;
  margin-bottom: 20px;
  display: block;
}

/* Titre de la carte — Playfair Display */
.l-valeur-card h3 {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 12px;
  color: var(--charcoal);
}

/* Texte de la carte */
.l-valeur-card p {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.7;
  font-weight: 300;
}


/* ═══════════════ Sécurité ═══════════════ */

/* Conteneur centré */
.l-securite {
  padding: 100px 48px;
  max-width: 1100px;
  margin: 0 auto;
}

/* Grille 2 colonnes : texte à gauche, visuel à droite */
.l-securite-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

/* Titre de la colonne texte */
.l-securite-content h2 {
  font-size: clamp(28px, 3.5vw, 40px);
  line-height: 1.2;
  margin-bottom: 24px;
}

/* Paragraphes de la colonne texte */
.l-securite-content p {
  font-size: 16px;
  color: var(--muted);
  line-height: 1.8;
  font-weight: 300;
  margin-bottom: 16px;
}

/* Liste verticale des 3 features de sécurité */
.l-securite-features {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 32px;
}

/* Chaque feature : icône à gauche + texte à droite */
.l-securite-feature {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

/* Icône carré arrondi fond rose clair */
.l-sec-icon {
  width: 44px;
  height: 44px;
  background: #F5E6EA; /* --rose-light */
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

/* Titre + texte à côté de l'icône */
.l-sec-text h4 {
  font-size: 15px;
  font-weight: 500;
  color: var(--charcoal);
  margin-bottom: 4px;
}

.l-sec-text p {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.6;
  margin: 0;
}

/* Visuel droite : fond sombre avec halo rose en ::before */
.l-securite-visual {
  background: var(--charcoal);
  border-radius: 24px;
  padding: 40px 32px;
  color: white;
  position: relative;
  overflow: hidden;
}

.l-securite-visual::before {
  content: '';
  position: absolute;
  top: -60px; right: -60px;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(201, 79, 109, 0.3) 0%, transparent 70%);
}

/* Label doré au-dessus du bloc note */
.l-note-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 12px;
}

/* Bloc simulant la note déposée sur le site */
.l-note-rdv {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 20px;
  position: relative;
}

/* Texte de la note */
.l-note-text {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.6;
  font-weight: 300;
  margin: 0;
}

/* Métadonnées (date, heure) */
.l-note-meta {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
  margin-top: 12px;
  margin-bottom: 0;
}

/* Badge "Membre identifié et informé" */
.l-note-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(201, 79, 109, 0.25);
  color: #F5A0B5;
  font-size: 12px;
  font-weight: 500;
  padding: 6px 14px;
  border-radius: 100px;
  margin-top: 16px;
}

/* Icône cadenas avant le badge */
.l-note-badge::before {
  content: '🔒';
  font-size: 11px;
}

/* Texte disclaimer sous le badge */
.l-note-disclaimer {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.45);
  margin-top: 20px;
  line-height: 1.6;
  font-weight: 300;
  margin-bottom: 0;
}


/* ═══════════════ Charte / Respect ═══════════════ */

/* Fond rose clair, centré */
.l-respect {
  background: #F5E6EA; /* --rose-light */
  padding: 80px 48px;
  text-align: center;
}

/* Wrapper max-width pour garder le texte lisible */
.l-respect-inner {
  max-width: 680px;
  margin: 0 auto;
}

/* Paragraphe intro */
.l-respect p {
  font-size: 17px;
  color: var(--muted);
  line-height: 1.8;
  font-weight: 300;
  margin-bottom: 40px;
}

/* Liste des règles de charte */
.l-charte-items {
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: left;
  margin-bottom: 40px;
}

/* Chaque règle : numéro rond rose + texte */
.l-charte-item {
  background: white;
  border-radius: 14px;
  padding: 20px 24px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  border: 1px solid rgba(201, 79, 109, 0.12);
}

/* Cercle numéroté rose */
.l-charte-num {
  width: 32px;
  height: 32px;
  background: var(--rose);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 500;
  flex-shrink: 0;
}

/* Titre et texte de chaque règle */
.l-charte-item h4 {
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 4px;
  color: var(--charcoal);
}

.l-charte-item p {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.6;
  margin: 0;
  font-size: 14px;
}

/* Bloc badges de réactivité — fond blanc, centré dans la section respect */
.l-badges-reactivite {
  background: white;
  border-radius: 14px;
  padding: 24px;
  border: 1px solid rgba(201, 79, 109, 0.12);
  text-align: center;
}

/* Texte d'explication au-dessus des badges */
.l-badge-reac-title {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 16px !important; /* Override .l-respect p margin-bottom */
  font-weight: 400;
  line-height: 1.5;
}

/* Groupe de badges en flex avec retour à la ligne sur mobile */
.l-badges-reac-list {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

/* Badge individuel : fond coloré selon la réactivité */
.l-badge-reac {
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
}

/* Vert = répond rapidement */
.l-badge-reac--rapide {
  background: #E8F5E9;
  color: #2E7D32;
}

/* Orange = répond en quelques jours */
.l-badge-reac--moyen {
  background: #FFF3E0;
  color: #E65100;
}

/* Gris = répond rarement */
.l-badge-reac--lent {
  background: #EEEEEE;
  color: #616161;
}


/* ═══════════════ Tarifs ═══════════════ */

/* Fond chaud (--warm), padding vertical */
.l-tarifs {
  background: #F0E8E0; /* --warm */
  padding: 100px 48px;
}

/* Conteneur max-width centré */
.l-tarifs-inner {
  max-width: 900px;
  margin: 0 auto;
}

/* Grille 3 colonnes adaptative */
.l-tarifs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  margin-top: 56px;
}

/* Carte tarif — fond blanc, transition hover */
.l-tarif-card {
  background: white;
  border-radius: 20px;
  padding: 40px 32px;
  border: 1px solid rgba(28, 28, 28, 0.08);
  position: relative;
  transition: transform 0.2s, box-shadow 0.2s;
}

.l-tarif-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08);
}

/* Variante featured : fond rose, texte blanc */
.l-tarif-card--featured {
  background: var(--rose);
  color: white;
  border-color: transparent;
  box-shadow: 0 8px 40px rgba(201, 79, 109, 0.3);
}

/* Badge "Le plus choisi" au-dessus de la carte featured */
.l-tarif-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--gold);
  color: white;
  font-size: 11px;
  font-weight: 500;
  padding: 4px 16px;
  border-radius: 100px;
  white-space: nowrap;
  letter-spacing: 0.5px;
}

/* Nom du plan (Découverte, Membre, etc.) */
.l-tarif-name {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}

.l-tarif-card--featured .l-tarif-name {
  color: rgba(255, 255, 255, 0.7);
}

/* Prix — grand, Playfair Display */
.l-tarif-price {
  font-family: var(--font-serif);
  font-size: 52px;
  font-weight: 600;
  line-height: 1;
  margin-bottom: 4px;
  color: var(--charcoal);
}

.l-tarif-card--featured .l-tarif-price {
  color: white;
}

/* Unité de prix (€, /mois) — police DM Sans, taille normale */
.l-tarif-price span {
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 300;
}

/* Description sous le prix */
.l-tarif-desc {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 28px;
  font-weight: 300;
}

.l-tarif-card--featured .l-tarif-desc {
  color: rgba(255, 255, 255, 0.7);
}

/* Bandeau essai gratuit — au-dessus de la grille de cartes */
.l-tarif-essai-banner {
  background: linear-gradient(135deg, var(--rose-light), #fff);
  border: 1px solid rgba(201, 79, 109, 0.25);
  border-radius: 14px;
  padding: 16px 24px;
  text-align: center;
  font-size: 15px;
  color: var(--charcoal);
  margin-bottom: 32px;
  line-height: 1.5;
}

/* Mention essai sous le prix — vert si inclus, gris si non */
.l-tarif-essai-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--valide);
  margin-bottom: 16px;
}
.l-tarif-card--featured .l-tarif-essai-label { color: rgba(255,255,255,0.9); }
.l-tarif-essai-non { color: var(--muted) !important; }

/* Séparateur horizontal */
.l-tarif-divider {
  height: 1px;
  background: rgba(28, 28, 28, 0.08);
  margin-bottom: 24px;
  border: none;
}

.l-tarif-card--featured .l-tarif-divider {
  background: rgba(255, 255, 255, 0.2);
}

/* Liste des features incluses */
.l-tarif-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 32px;
  padding: 0;
}

.l-tarif-features li {
  font-size: 14px;
  color: var(--muted);
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-weight: 300;
  line-height: 1.5;
}

.l-tarif-card--featured .l-tarif-features li {
  color: rgba(255, 255, 255, 0.85);
}

/* Icône checkmark rose avant chaque feature */
.l-tarif-features li::before {
  content: '✓';
  color: var(--rose);
  font-weight: 500;
  font-size: 14px;
  flex-shrink: 0;
  margin-top: 1px;
}

.l-tarif-card--featured .l-tarif-features li::before {
  color: var(--gold);
}

/* Bouton CTA de la carte tarif */
.l-tarif-btn {
  display: block;
  text-align: center;
  padding: 14px;
  border-radius: 100px;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s;
  border: 1.5px solid var(--rose);
  color: var(--rose);
}

.l-tarif-btn:hover {
  background: var(--rose);
  color: white;
}

.l-tarif-card--featured .l-tarif-btn {
  background: white;
  color: var(--rose);
  border-color: white;
}

.l-tarif-card--featured .l-tarif-btn:hover {
  background: #F5E6EA; /* --rose-light */
}

/* Mention égalité tarifaire sous les cartes */
.l-tarif-egalite {
  text-align: center;
  margin-top: 32px;
  font-size: 14px;
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.l-tarif-egalite strong {
  color: var(--charcoal);
  font-weight: 500;
}


/* ═══════════════ CTA final / formulaire pré-inscription ═══════════════ */

/* Section fond crème, centré, padding généreux.
   Halo rose décoratif en ::before (même logique que .l-hero). */
.l-cta-final {
  padding: 120px 48px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.l-cta-final::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 600px; height: 600px;
  background: radial-gradient(ellipse, rgba(201, 79, 109, 0.06) 0%, transparent 70%);
  pointer-events: none;
}

/* Titre H2 du CTA */
.l-cta-final h2 {
  font-family: var(--font-serif);
  font-size: clamp(32px, 5vw, 56px);
  font-weight: 600;
  line-height: 1.15;
  margin-bottom: 24px;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

/* Italique rose sur l'accroche */
.l-cta-final h2 em {
  font-style: italic;
  color: var(--rose);
}

/* Sous-titre du CTA */
.l-cta-sub {
  font-size: 17px;
  color: var(--muted);
  margin-bottom: 48px;
  font-weight: 300;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.7;
}

/* Formulaire — max-width centré */
.l-preinscription-form {
  max-width: 460px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative; /* Au-dessus du ::before halo */
}

/* Ligne prénom + âge : 2 colonnes égales */
.l-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

/* Champs de saisie du formulaire */
.l-form-input {
  padding: 16px 20px;
  border-radius: 14px;
  border: 1px solid rgba(28, 28, 28, 0.15);
  font-size: 15px;
  font-family: var(--font-sans);
  background: white;
  color: var(--charcoal);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  width: 100%;
}

/* Focus sur les champs — bordure rose + ombre légère */
.l-form-input:focus {
  border-color: var(--rose);
  box-shadow: 0 0 0 3px rgba(201, 79, 109, 0.1);
}

/* Select — couleur placeholder */
.l-form-select {
  color: var(--muted);
  cursor: pointer;
}

.l-form-select:has(option:not([value=""]):checked) {
  color: var(--charcoal);
}

/* Bouton de soumission */
.l-form-btn {
  padding: 18px;
  border-radius: 100px;
  background: var(--rose);
  color: white;
  border: none;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  font-family: var(--font-sans);
  transition: background 0.2s, transform 0.15s;
  width: 100%;
}

.l-form-btn:hover:not(:disabled) {
  background: #8B2D45; /* --rose-dark */
  transform: translateY(-1px);
}

.l-form-btn:disabled {
  cursor: default;
}

/* Note légale sous le bouton */
.l-form-note {
  font-size: 12px;
  color: var(--muted);
  text-align: center;
  line-height: 1.5;
}


/* ═══════════════ Footer landing ═══════════════ */

/* Fond charcoal, texte centré, semi-transparent */
.l-footer {
  background: var(--charcoal);
  color: rgba(255, 255, 255, 0.5);
  text-align: center;
  padding: 32px 48px;
  font-size: 13px;
  font-weight: 300;
}

/* Logo texte en Playfair Display, blanc légèrement atténué */
.l-footer-logo {
  font-family: var(--font-serif);
  color: rgba(255, 255, 255, 0.7);
  font-size: 16px;
  margin-bottom: 8px;
}

/* Liens du footer (légaux) — couleur rose */
.l-footer a {
  color: var(--rose);
  text-decoration: none;
  transition: color 0.2s;
}

.l-footer a:hover {
  color: #E8849A; /* Rose légèrement plus clair au hover */
}

/* Tagline "Un site fait avec ♥ en France..." */
.l-footer-tagline {
  margin-top: 8px;
}


/* ═══════════════ Badge voiture flottant (v17) ═══════════════ */

/* Lien fixed top-right vers #nos-cadeaux.
   Fond sombre dégradé + bordure or pour se détacher du fond crème.
   Masqué sur mobile (voir bloc @media 768px). */
.page-landing .l-offre-voiture {
  position: fixed;
  top: 90px;
  right: 20px;
  z-index: 99;
  background: linear-gradient(135deg, #1C1C1C 0%, #2d2d2d 100%);
  color: white;
  border-radius: 16px;
  padding: 12px 16px;
  text-align: center;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(196, 168, 130, 0.3);
  max-width: 148px;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  text-decoration: none;
  display: block;
}

.page-landing .l-offre-voiture:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(196, 168, 130, 0.5);
}

/* Image voiture dans le badge — arrondie, hauteur auto pour respecter le ratio 3:2 (1152×768).
   À 148px de large, la hauteur naturelle est ~99px — pas de crop, image entière visible. */
.page-landing .l-offre-voiture-img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  display: block;
  margin-bottom: 8px;
}

/* Étiquette "À gagner" en or */
.page-landing .l-offre-voiture-label {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 2px;
}

/* Nom du lot en Playfair */
.page-landing .l-offre-voiture-titre {
  font-family: var(--font-serif);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  color: white;
}

/* <em> rose dans le titre */
.page-landing .l-offre-voiture-titre em {
  font-style: italic;
  color: var(--rose);
}

/* Sous-titre valeur, gris discret */
.page-landing .l-offre-voiture-sub {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 4px;
  line-height: 1.4;
}


/* ═══════════════ Badge parrainage dans le hero (v17) ═══════════════ */

/* Pastille cliquable avant le tag hero, lien vers #nos-cadeaux.
   Fond rose très transparent + bordure rose.
   Même animation fadeUp que le reste du hero (défini section 9). */

/* Logo RS au-dessus du badge parrainage — 450px desktop, réduit sur mobile via max-width */
.page-landing .l-hero-logo {
  width: 450px;
  max-width: 80%;
  height: auto;
  display: block;
  margin: 0 auto 24px;
}

.page-landing .l-hero-parrainage {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, rgba(201, 79, 109, 0.1), rgba(201, 79, 109, 0.05));
  border: 1px solid rgba(201, 79, 109, 0.3);
  border-radius: 100px;
  padding: 10px 20px;
  margin-bottom: 20px;
  font-size: 14px;
  color: var(--charcoal);
  animation: fadeUp 0.6s 0.05s ease both;
  cursor: pointer;
  transition: background 0.2s;
  text-decoration: none;
}

.page-landing .l-hero-parrainage:hover {
  background: rgba(201, 79, 109, 0.12);
}

/* "Gagnez jusqu'à 500 €" en rose */
.page-landing .l-hero-parrainage strong {
  color: var(--rose);
  font-weight: 600;
}

/* Emoji cadeau légèrement plus grand */
.page-landing .l-hero-parrainage-icon {
  font-size: 18px;
}


/* ═══════════════ Section offres spéciales (#nos-cadeaux) (v17) ═══════════════ */

/* Fond sombre charcoal, ancre #nos-cadeaux.
   scroll-margin-top : compense la nav fixe lors du défilement depuis les badges. */
.page-landing .l-offres-speciales {
  background: var(--charcoal);
  padding: 72px 48px;
  scroll-margin-top: 80px;
}

/* En-tête centré — label or + titre blanc */
.page-landing .l-offres-header {
  text-align: center;
  margin-bottom: 48px;
}

/* Étiquette "Nos cadeaux membres" en or */
.page-landing .l-offres-label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 16px;
}

/* Titre blanc, <em> doré */
.page-landing .l-offres-header h2 {
  font-family: var(--font-serif);
  font-size: clamp(26px, 3.5vw, 38px);
  font-weight: 400;
  color: white;
  line-height: 1.3;
}

.page-landing .l-offres-header h2 em {
  font-style: italic;
  color: var(--gold);
}

/* ── Showcase voiture ─────────────── */

/* Image plein-cadre arrondie.
   L'image (.l-voiture-bg) est en position absolute sous l'overlay,
   le texte (.l-voiture-infos) est en z-index 2 par-dessus. */
.page-landing .l-voiture-showcase {
  max-width: 1000px;
  margin: 0 auto 48px;
  border-radius: 28px;
  overflow: hidden;
  position: relative;
  min-height: 420px;
  display: flex;
  align-items: flex-end;
}

/* Image de fond — couvre tout le conteneur */
.page-landing .l-voiture-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  z-index: 0;
}

/* Overlay : opaque à gauche (texte lisible), transparent à droite (voiture visible) */
.page-landing .l-voiture-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(12, 4, 8, 0.92) 0%,
    rgba(12, 4, 8, 0.75) 40%,
    rgba(12, 4, 8, 0.15) 70%,
    rgba(12, 4, 8, 0.05) 100%
  );
  z-index: 1;
}

/* Bloc texte gauche, par-dessus l'overlay */
.page-landing .l-voiture-infos {
  position: relative;
  z-index: 2;
  padding: 52px 48px;
  max-width: 480px;
}

/* "Tirage au sort" en or, précédé d'un trait horizontal */
.page-landing .l-voiture-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.page-landing .l-voiture-label::before {
  content: '';
  display: inline-block;
  width: 24px;
  height: 1px;
  background: var(--gold);
}

/* "Une Fiat 500 à gagner" en grand Playfair, "Fiat 500" en italique rose */
.page-landing .l-voiture-titre {
  font-family: var(--font-serif);
  font-size: clamp(30px, 3.5vw, 44px);
  font-weight: 400;
  color: white;
  line-height: 1.15;
  margin-bottom: 6px;
}

.page-landing .l-voiture-titre em {
  font-style: italic;
  color: var(--rose);
}

/* Modèle / valeur en très petit gris */
.page-landing .l-voiture-modele {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.38);
  margin-bottom: 24px;
  font-weight: 300;
  letter-spacing: 0.5px;
}

/* Texte de participation */
.page-landing .l-voiture-desc {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.62);
  line-height: 1.75;
  font-weight: 300;
  margin-bottom: 28px;
}

/* Encadré "Tirage public et vérifiable" */
.page-landing .l-voiture-detail {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  padding: 16px 20px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.65;
}

.page-landing .l-voiture-detail strong {
  color: white;
  font-weight: 500;
}

/* Badge "15 000 €" — absolute bottom-right, fond rose translucide + blur */
.page-landing .l-voiture-valeur {
  position: absolute;
  bottom: 28px;
  right: 28px;
  z-index: 2;
  background: rgba(201, 79, 109, 0.15);
  border: 1px solid rgba(201, 79, 109, 0.5);
  backdrop-filter: blur(16px);
  border-radius: 16px;
  padding: 16px 22px;
  text-align: center;
}

.page-landing .l-voiture-valeur-chiffre {
  font-family: var(--font-serif);
  font-size: 28px;
  font-weight: 600;
  color: white;
  line-height: 1;
}

.page-landing .l-voiture-valeur-label {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.5px;
  margin-top: 4px;
}

/* ── Carte parrainage ─────────────── */

/* Grille centrée — la carte parrainage seule occupe les 2 colonnes */
.page-landing .l-offres-speciales-inner {
  max-width: 900px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}

/* Carte de base — coins arrondis, overflow hidden (emoji décoratif) */
.page-landing .l-offre-card {
  border-radius: 20px;
  padding: 40px 36px;
  position: relative;
  overflow: hidden;
}

/* Variante parrainage — dégradé rose transparent + bordure, centrée en 2 colonnes */
.page-landing .l-offre-card--parrainage {
  background: linear-gradient(135deg, rgba(201, 79, 109, 0.2) 0%, rgba(201, 79, 109, 0.05) 100%);
  border: 1px solid rgba(201, 79, 109, 0.3);
  grid-column: 1 / -1;
  max-width: 600px;
  margin: 0 auto;
}

/* Grand emoji décoratif — absolute top-right, semi-transparent */
.page-landing .l-offre-big-icon {
  font-size: 48px;
  position: absolute;
  right: 28px;
  top: 28px;
  opacity: 0.25;
}

/* Étiquette uppercasse rose pâle */
.page-landing .l-offre-card-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #F5A0B5;
  margin-bottom: 16px;
}

/* Titre de la carte */
.page-landing .l-offre-card h3 {
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 600;
  color: white;
  margin-bottom: 12px;
  line-height: 1.2;
}

/* Texte descriptif — blanc à 60% */
.page-landing .l-offre-card p {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.7;
  font-weight: 300;
  margin-bottom: 24px;
}

/* Montant en blanc plein dans le texte */
.page-landing .l-offre-card p strong {
  color: white;
}

/* Bloc de détail bas de carte */
.page-landing .l-offre-card-detail {
  background: rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  padding: 14px 18px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.6;
}

.page-landing .l-offre-card-detail strong {
  color: white;
  font-weight: 500;
}


/* ═══════════════ Responsive — landing ═══════════════ */

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

  /* Nav landing : padding réduit sur mobile */
  #landingNav {
    padding: 0 20px;
  }

  /* Burger landing visible sur mobile.
     La règle globale section 11 (900px) affiche déjà .nav-burger,
     mais on le force ici pour être indépendant de la home. */
  #landingNav .nav-burger {
    display: flex;
  }

  /* Liens cachés par défaut — règle explicite, ne dépend plus de la section 11.
     Évite tout conflit si la home évolue indépendamment. */
  #nav-links-landing {
    display: none;
  }

  /* Menu ouvert — fond crème SOLIDE (pas de transparence, pas de blur).
     Sans backdrop-filter : évite le flou du contenu hero visible derrière.
     position: fixed pour couvrir le contenu sous la nav (top = hauteur nav). */
  #nav-links-landing.nav-open {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 68px;
    left: 0;
    right: 0;
    background: #FAF7F4; /* --cream en solide, 100% opaque */
    border-bottom: 1px solid rgba(201, 79, 109, 0.2);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    padding: 8px 0 16px;
    z-index: 999;
  }

  /* Liens en pleine largeur, texte sombre sur fond crème */
  #nav-links-landing.nav-open a {
    display: block;
    padding: 14px 24px;
    font-size: 15px;
    color: var(--muted);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    text-decoration: none;
    text-shadow: none;
  }

  #nav-links-landing.nav-open a:hover {
    color: var(--charcoal);
  }

  /* Séparateur vertical nav-sep : masqué en mobile.
     En desktop il sépare ancres et liens WP horizontalement.
     En colonne mobile il crée un gap vide visuellement parasite. */
  #landingNav .nav-links .nav-sep {
    display: none;
  }

  /* Dernier lien (S'inscrire) — centré et en pleine largeur */
  #landingNav .nav-links li:last-child > a {
    display: block;
    text-align: center;
    margin-top: 8px;
  }

  /* Hero : min-height réduit sur mobile pour éviter l'espace vide entre
     le badge voiture (hors hero) et le contenu centré dans le hero.
     auto laisse le contenu déterminer la hauteur naturellement. */
  .page-landing .l-hero {
    min-height: auto;
    padding: 32px 20px 60px;
  }

  /* Preuve sociale : passage en colonne centrée */
  .l-hero-proof {
    flex-direction: column;
    text-align: center;
    gap: 12px;
    margin-top: 40px;
  }

  /* Badge voiture mobile : dans le flux normal (plus de position fixed/absolute).
     Centré entre la nav et le hero, largeur généreuse pour voir la voiture et le texte.
     margin-bottom évite tout chevauchement avec le contenu suivant. */
  .page-landing .l-offre-voiture {
    position: static;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    margin: 72px auto 16px; /* 72px = hauteur nav, pour descendre sous la nav fixe */
    width: calc(100% - 32px);
    max-width: 320px;
    padding: 10px 14px;
    text-align: left;
  }

  /* Image rectangulaire, ratio respecté, taille lisible */
  .page-landing .l-offre-voiture-img {
    width: 90px;
    height: auto;
    margin-bottom: 0;
    flex-shrink: 0;
    border-radius: 8px;
  }

  /* Texte : tailles légèrement augmentées pour lisibilité */
  .page-landing .l-offre-voiture-label {
    font-size: 9px;
    margin-bottom: 2px;
  }

  .page-landing .l-offre-voiture-titre {
    font-size: 14px;
    line-height: 1.3;
  }

  .page-landing .l-offre-voiture-sub {
    font-size: 10px;
    margin-top: 3px;
  }

  /* Badge parrainage hero : texte et padding réduits */
  .page-landing .l-hero-parrainage {
    font-size: 13px;
    padding: 8px 16px;
    gap: 8px;
  }

  /* Rupture : padding réduit */
  .l-rupture {
    padding: 70px 24px;
  }

  /* Offres spéciales : padding réduit + 1 colonne */
  .page-landing .l-offres-speciales {
    padding: 56px 20px;
  }

  .page-landing .l-offres-speciales-inner {
    grid-template-columns: 1fr;
  }

  /* Showcase voiture : plus haute sur mobile + overlay vertical bas → haut
     (le texte se lit en bas, l'image reste visible en haut) */
  .page-landing .l-voiture-showcase {
    min-height: 520px;
    align-items: flex-end;
  }

  .page-landing .l-voiture-overlay {
    background: linear-gradient(
      to bottom,
      rgba(12, 4, 8, 0.3) 0%,
      rgba(12, 4, 8, 0.88) 55%,
      rgba(12, 4, 8, 0.95) 100%
    );
  }

  .page-landing .l-voiture-infos {
    padding: 36px 28px;
  }

  .page-landing .l-voiture-valeur {
    bottom: 16px;
    right: 16px;
  }

  /* Valeurs : padding réduit */
  .l-valeurs {
    padding: 70px 20px;
  }

  /* Sécurité : une seule colonne */
  .l-securite {
    padding: 70px 20px;
  }

  .l-securite-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  /* Respect : padding réduit */
  .l-respect {
    padding: 60px 20px;
  }

  /* Tarifs : padding réduit */
  .l-tarifs {
    padding: 70px 20px;
  }

  /* CTA final : padding réduit */
  .l-cta-final {
    padding: 80px 20px;
  }

  /* Footer : padding réduit */
  .l-footer {
    padding: 24px 20px;
  }

  /* Formulaire : colonne prénom + âge en 1 colonne */
  .l-form-row {
    grid-template-columns: 1fr;
  }

}

/* ── Mobile : max-width 480px ───────────────────────────────────────────── */
@media (max-width: 480px) {

  /* Hero : réduction du padding */
  .l-hero {
    padding: 90px 16px 50px;
  }

  /* Boutons CTA hero en colonne */
  .l-hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  /* Boutons pleine largeur sur très petit écran */
  .l-hero-actions .btn-primary,
  .l-hero-actions .btn-secondary {
    text-align: center;
  }

  /* Tarifs : une seule carte par ligne */
  .l-tarifs-grid {
    grid-template-columns: 1fr;
  }

  /* Valeurs : une seule carte par ligne */
  .l-valeurs-grid {
    grid-template-columns: 1fr;
  }

  /* Badges réactivité en colonne */
  .l-badges-reac-list {
    flex-direction: column;
    align-items: center;
  }

}

/* ── Petit écran : max-width 1024px ─────────────────────────────────────── */
@media (max-width: 1024px) {

  /* Nav landing : padding latéral réduit sur petit écran */
  #landingNav {
    padding: 0 32px;
  }

  /* Valeurs / Sécurité : max-width libéré */
  .l-valeurs,
  .l-securite {
    max-width: 100%;
    padding-left: 32px;
    padding-right: 32px;
  }

}

/* ── Petite hauteur d'écran (téléphones en paysage, etc.) ───────────────── */
@media (max-height: 650px) {

  /* Hero moins haut pour éviter le scroll dès le chargement */
  .l-hero {
    min-height: auto;
    padding-top: 90px;
    padding-bottom: 60px;
  }

}


/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  TARIFS PUBLIC                                                          ║
   ║  Page : rencontres-sereines.fr/tarifs-public/                         ║
   ║  Template : templates/tarifs-public.php                                ║
   ║  Préfixe CSS : tp-* (évite tout conflit avec les autres sections)      ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */

/* ═══════════════ Wrapper ═══════════════ */
/* Fond warm (beige) + padding — même ambiance que la landing */
.tp-page {
    background: var(--warm);
    padding-top: 72px; /* compense le header fixe */
}

.tp-section {
    padding: 80px 48px 100px;
}

.tp-inner {
    max-width: 960px;
    margin: 0 auto;
}

/* ═══════════════ En-tête ═══════════════ */
.tp-header {
    text-align: center;
    margin-bottom: 48px;
}

.tp-label {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--rose);
    margin-bottom: 16px;
}

.tp-titre {
    font-family: var(--font-serif);
    font-size: clamp(26px, 4vw, 38px);
    font-weight: 600;
    color: var(--charcoal);
    margin: 0 0 16px;
}

.tp-intro {
    font-size: 17px;
    color: var(--muted);
    font-weight: 300;
    line-height: 1.7;
    max-width: 560px;
    margin: 0 auto;
}

/* ═══════════════ Bandeau essai gratuit ═══════════════ */
.tp-essai-banner {
    background: linear-gradient(135deg, var(--rose-light), #fff);
    border: 1px solid rgba(201,79,109,0.25);
    border-radius: 14px;
    padding: 16px 24px;
    text-align: center;
    font-size: 15px;
    color: var(--charcoal);
    margin-bottom: 40px;
    line-height: 1.5;
}

/* ═══════════════ Grille des 3 cartes ═══════════════ */
.tp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
    margin-bottom: 32px;
}

/* ═══════════════ Carte offre ═══════════════ */
.tp-card {
    background: white;
    border-radius: 20px;
    padding: 40px 32px;
    border: 1px solid rgba(28,28,28,0.08);
    position: relative;
    transition: transform 0.2s, box-shadow 0.2s;
    display: flex;
    flex-direction: column;
}

.tp-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(0,0,0,0.08);
}

/* Carte vedette (Classique) — fond rose + ombre rose */
.tp-card--featured {
    background: var(--rose);
    color: white;
    border-color: transparent;
    box-shadow: 0 8px 40px rgba(201,79,109,0.3);
}

/* Badge "Le plus choisi" centré en haut de la carte vedette */
.tp-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--or);
    color: white;
    font-size: 11px;
    font-weight: 500;
    padding: 4px 16px;
    border-radius: 100px;
    white-space: nowrap;
    letter-spacing: 0.5px;
}

/* ═══════════════ Contenu carte ═══════════════ */
.tp-card-name {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 8px;
}
.tp-card--featured .tp-card-name { color: rgba(255,255,255,0.75); }

/* Prix affiché en grand — style Playfair comme sur la landing */
.tp-card-price {
    font-family: var(--font-serif);
    font-size: 52px;
    font-weight: 600;
    line-height: 1;
    margin-bottom: 4px;
    color: var(--charcoal);
}
.tp-card-price span {
    font-family: var(--font-sans);
    font-size: 18px;
    font-weight: 300;
}
.tp-card--featured .tp-card-price { color: white; }

/* Description : semestriel + sans engagement */
.tp-card-desc {
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 12px;
    font-weight: 300;
    line-height: 1.5;
}
.tp-card-desc span { font-size: 12px; }
.tp-card--featured .tp-card-desc { color: rgba(255,255,255,0.7); }

/* Mention essai */
.tp-card-essai {
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 20px;
}
.tp-essai-ok  { color: var(--valide); }
.tp-essai-non { color: var(--muted);  }
.tp-card--featured .tp-essai-ok { color: rgba(255,255,255,0.9); }

/* Séparateur */
.tp-divider {
    height: 1px;
    background: rgba(28,28,28,0.08);
    margin-bottom: 24px;
}
.tp-card--featured .tp-divider { background: rgba(255,255,255,0.2); }

/* Liste de features */
.tp-features {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 32px;
    flex: 1; /* pousse le bouton en bas même si les listes ont des hauteurs différentes */
}

.tp-features li {
    font-size: 14px;
    color: var(--muted);
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-weight: 300;
    line-height: 1.5;
}
.tp-card--featured .tp-features li { color: rgba(255,255,255,0.85); }

/* Coche devant chaque feature */
.tp-features li::before {
    content: '✓';
    color: var(--rose);
    font-weight: 500;
    font-size: 14px;
    flex-shrink: 0;
    margin-top: 1px;
}
.tp-card--featured .tp-features li::before { color: var(--or); }

/* Bouton CTA de la carte */
.tp-btn {
    display: block;
    text-align: center;
    padding: 14px;
    border-radius: 100px;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s;
    border: 1.5px solid var(--rose);
    color: var(--rose);
    margin-top: auto;
}
.tp-btn:hover { background: var(--rose); color: white; }

.tp-card--featured .tp-btn {
    background: white;
    color: var(--rose);
    border-color: white;
}
.tp-card--featured .tp-btn:hover { background: var(--rose-light); }

/* ═══════════════ Mention égalité ═══════════════ */
.tp-egalite {
    text-align: center;
    margin-top: 16px;
    font-size: 14px;
    color: var(--muted);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.tp-egalite strong { color: var(--charcoal); font-weight: 500; }

/* ═══════════════ Responsive ═══════════════ */
@media (max-width: 768px) {
    .tp-section { padding: 60px 20px 80px; }
    .tp-grid { grid-template-columns: 1fr; max-width: 420px; margin-left: auto; margin-right: auto; }
}

@media (max-width: 480px) {
    .tp-section { padding: 40px 16px 60px; }
    .tp-card { padding: 32px 24px; }
    .tp-card-price { font-size: 42px; }
}


/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  ABONNEMENT                                                              ║
   ║  Page : rencontres-sereines.fr/abonnement/                              ║
   ║  Template : templates/abonnement.php                                     ║
   ║  Préfixe CSS : ab- (évite tout conflit avec les autres sections)         ║
   ║  Ajouté le 10 juin 2026 — BLOC 3 Stripe                                 ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */

/* ═══════════════ Conteneur principal ═══════════════ */

/* Zone principale — centrage + espacement vertical */
.ab-main {
    max-width: 900px;
    margin: 0 auto;
    padding: 60px 24px 80px;
}

/* ═══════════════ En-tête de page ═══════════════ */

.ab-header {
    text-align: center;
    margin-bottom: 48px;
}

/* Titre principal h1 */
.ab-titre {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 32px;
    font-weight: 600;
    color: var(--charcoal);
    margin: 0 0 16px;
    line-height: 1.2;
}

/* Texte d'introduction sous le titre */
.ab-intro {
    font-size: 16px;
    color: var(--muted);
    line-height: 1.7;
    margin: 0;
}

/* ═══════════════ Grille des offres ═══════════════ */

/* Grille 5 colonnes — une par offre (2+2+1) */
/* Sur tablette : 2 colonnes, sur mobile : 1 colonne */
.ab-offres {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    margin-bottom: 40px;
}

/* ═══════════════ Carte d'offre ═══════════════ */

/* Label = carte cliquable — toute la carte est une zone de clic */
.ab-offre {
    position: relative;
    display: flex;
    flex-direction: column;
    border: 2px solid #E0D6D0;
    border-radius: 12px;
    padding: 20px 16px;
    cursor: pointer;
    background: #FFFFFF;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
    /* On cache le radio natif — on le remplace par le style de la carte */
}

.ab-offre:hover {
    border-color: var(--rose);
    box-shadow: 0 4px 16px rgba(201, 79, 109, 0.12);
    transform: translateY(-2px);
}

/* État sélectionné — bordure rose + ombre */
.ab-offre:has(input:checked) {
    border-color: var(--rose);
    box-shadow: 0 4px 20px rgba(201, 79, 109, 0.20);
    background: #FFF8FA;
}

/* Masquer le radio natif — remplacé par le style de la carte */
.ab-offre input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* Carte Premium — fond légèrement doré */
.ab-offre--premium {
    background: linear-gradient(135deg, #FFFDF5 0%, #FFF8E6 100%);
    border-color: #D4AF37;
}

.ab-offre--premium:hover {
    border-color: #B8960C;
    box-shadow: 0 4px 16px rgba(212, 175, 55, 0.20);
}

.ab-offre--premium:has(input:checked) {
    border-color: #B8960C;
    box-shadow: 0 4px 20px rgba(212, 175, 55, 0.25);
}

/* Carte Recommandée — tag et bordure rose plus marquée */
.ab-offre--featured {
    border-color: var(--rose);
}

/* Badge "Recommandé" en haut de la carte */
.ab-offre-tag {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--rose);
    color: #FFFFFF;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 3px 12px;
    border-radius: 20px;
    white-space: nowrap;
}

/* Corps de la carte (niveau, prix, features) */
.ab-offre-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Badge de niveau (Discret / Classique / Premium) */
.ab-offre-niveau {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 4px;
    display: inline-block;
    width: fit-content;
}

.ab-offre-niveau.discret  { background: #F0E8E0; color: var(--muted); }
.ab-offre-niveau.classique { background: #FCE8EF; color: var(--rose); }
.ab-offre-niveau.premium  { background: #FFF3CC; color: #A07C00; }

/* Prix principal */
.ab-offre-prix {
    font-size: 28px;
    font-weight: 700;
    color: var(--charcoal);
    line-height: 1;
    margin-top: 8px;
}

/* Unité "/mois" à côté du prix */
.ab-offre-unite {
    font-size: 14px;
    font-weight: 400;
    color: var(--muted);
}

/* Détail de facturation (6 mois / sans engagement) */
.ab-offre-detail {
    font-size: 12px;
    color: var(--muted);
    line-height: 1.4;
}

/* Liste des caractéristiques de l'offre */
.ab-offre-features {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ab-offre-features li {
    font-size: 12px;
    color: #4A4040;
    line-height: 1.4;
    padding-left: 0;
}

/* Badge économie (ex: "Économisez 42€ vs mensuel") */
.ab-offre-badge-eco {
    margin-top: 8px;
    font-size: 11px;
    font-weight: 600;
    color: #2E7D32;
    background: #E8F5E9;
    padding: 3px 8px;
    border-radius: 4px;
    display: inline-block;
    width: fit-content;
}

/* Coche de sélection en bas à droite — visible quand la carte est sélectionnée */
.ab-offre-check {
    display: none;
    position: absolute;
    bottom: 12px;
    right: 12px;
    width: 22px;
    height: 22px;
    background: var(--rose);
    color: #FFFFFF;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 700;
    align-items: center;
    justify-content: center;
}

/* Afficher la coche quand la carte est sélectionnée */
.ab-offre:has(input:checked) .ab-offre-check {
    display: flex;
}

/* ═══════════════ Formulaire de paiement ═══════════════ */

/* Bloc formulaire — card centrée */
.ab-paiement {
    max-width: 500px;
    margin: 0 auto;
    background: #FFFFFF;
    border: 1px solid #E0D6D0;
    border-radius: 16px;
    padding: 32px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.07);
}

/* Récapitulatif de l'offre sélectionnée */
.ab-paiement-recap {
    font-size: 15px;
    color: var(--charcoal);
    background: #F5F0EB;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 24px;
    line-height: 1.5;
}

/* Zone carte Stripe */
.ab-card-wrap {
    margin-bottom: 16px;
}

/* Label au-dessus du champ carte */
.ab-card-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--charcoal);
    margin-bottom: 8px;
}

/* Conteneur du Card Element Stripe — style semblable à un input */
.ab-card-element {
    border: 1.5px solid #C5B8B0;
    border-radius: 8px;
    padding: 14px 16px;
    background: #FFFFFF;
    transition: border-color 0.2s;
    /* min-height nécessaire car Stripe iframe est plus petit par défaut */
    min-height: 50px;
}

.ab-card-element.StripeElement--focus {
    border-color: var(--rose);
    box-shadow: 0 0 0 3px rgba(201, 79, 109, 0.12);
    outline: none;
}

.ab-card-element.StripeElement--invalid {
    border-color: #C94F6D;
}

/* Message d'erreur Stripe */
.ab-card-erreur {
    margin-top: 8px;
    padding: 10px 14px;
    background: #FFF0F3;
    border: 1px solid #F8C0CC;
    border-radius: 6px;
    color: #C94F6D;
    font-size: 13px;
    line-height: 1.5;
}

/* Note carte prépayée */
.ab-note-prepayee {
    font-size: 12px;
    color: var(--muted);
    margin: 12px 0 20px;
    line-height: 1.5;
}

/* Bouton de soumission */
.ab-btn-submit {
    display: block;
    width: 100%;
    padding: 16px 24px;
    background: var(--rose);
    color: #FFFFFF;
    border: none;
    border-radius: 10px;
    font-family: 'DM Sans', Arial, sans-serif;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    transition: background 0.2s, transform 0.15s;
    line-height: 1.3;
}

.ab-btn-submit:hover:not(:disabled) {
    background: #B8394F;
    transform: translateY(-1px);
}

/* État désactivé — grisé, non cliquable */
.ab-btn-submit:disabled {
    background: #D4C4C0;
    cursor: not-allowed;
    transform: none;
}

/* Spinner de chargement — affiché pendant le traitement */
.ab-spinner {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255,255,255,0.4);
    border-top-color: #FFFFFF;
    border-radius: 50%;
    animation: ab-spin 0.7s linear infinite;
    vertical-align: middle;
}

@keyframes ab-spin {
    to { transform: rotate(360deg); }
}

/* Mentions légales sous le bouton */
.ab-mentions {
    font-size: 11px;
    color: var(--muted);
    line-height: 1.6;
    margin: 16px 0 0;
    text-align: center;
}

.ab-mentions a {
    color: var(--rose);
    text-decoration: none;
}

.ab-mentions a:hover {
    text-decoration: underline;
}

/* ═══════════════ Message de succès ═══════════════ */

.ab-succes {
    max-width: 500px;
    margin: 60px auto;
    text-align: center;
    padding: 48px 32px;
    background: #FFFFFF;
    border: 1px solid #E0D6D0;
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.07);
}

/* Grande icône verte de validation */
.ab-succes-icone {
    width: 64px;
    height: 64px;
    background: #2E7D32;
    color: #FFFFFF;
    border-radius: 50%;
    font-size: 28px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
}

.ab-succes h2 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 26px;
    color: var(--charcoal);
    margin: 0 0 12px;
}

.ab-succes p {
    font-size: 15px;
    color: var(--muted);
    margin: 0 0 28px;
    line-height: 1.6;
}

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

/* Tablette — 3 colonnes puis 2 */
@media (max-width: 1024px) {
    .ab-offres { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
    .ab-main { padding: 40px 16px 60px; }
    .ab-titre { font-size: 26px; }
    .ab-offres { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .ab-paiement { padding: 24px 20px; }
}

/* Mobile — 1 colonne */
@media (max-width: 480px) {
    .ab-offres { grid-template-columns: 1fr; }
    .ab-titre { font-size: 22px; }
    .ab-offre-prix { font-size: 24px; }
}

/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  BACK-OFFICE ADMIN — BOUTON SUPPRIMER MEMBRE                           ║
   ║  Page : /admin-membre-detail/                                           ║
   ║  Template : templates/admin/admin-membre-detail.php                    ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */

/* Bouton rouge destructif — clairement distinct des autres actions admin.
   margin-top pour le séparer visuellement des boutons de statut. */
.btn-supprimer {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    background: #FEE2E2;
    color: #B91C1C;
    border: 1px solid #FCA5A5;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.btn-supprimer:hover {
    background: #FECACA;
    border-color: #F87171;
    color: #991B1B;
}

/* ═══════════════ BOUTON SUSPENSION ADMINISTRATIVE ═══════════════ */

/* Bouton violet foncé — visuellement distinct du Suspendre orange
   et du Supprimer rouge. La couleur violette signale une action
   d'autorité admin irréversible côté membre. */
.btn-suspendre-admin {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    background: #EDE7F6;          /* violet très pâle */
    color: #4A148C;               /* violet foncé */
    border: 1px solid #CE93D8;    /* violet moyen */
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.btn-suspendre-admin:hover {
    background: #D1C4E9;
    border-color: #AB47BC;
    color: #38006B;
}

/* ═══════════════ NOTE RGPD — délai de suppression ═══════════════ */

/* Texte informatif affiché sous les boutons d'action pour les comptes
   en suspension administrative. Rappelle la date de suppression automatique. */
.note-rgpd {
    margin-top: 16px;
    padding: 10px 14px;
    background: #F3E5F5;
    border-left: 3px solid #7B1FA2;
    border-radius: 4px;
    font-size: 13px;
    color: #4A148C;
    line-height: 1.5;
}

/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  PARAMÈTRES MEMBRE — BLOC MISE À JOUR CARTE BANCAIRE                   ║
   ║  Page : /espace-membre-parametres/                                     ║
   ║  Template : templates/espace-membre-parametres.php (BLOC 7)            ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */

/* ═══════════════ CARD ELEMENT STRIPE ═══════════════ */

/* Conteneur du champ carte — marque visuelle identique à un .form-input */
.pm-card-wrap {
    margin-bottom: 12px;
}

/* Cadre du Card Element Stripe — imite le style des autres champs de la page */
.pm-card-element {
    border: 1.5px solid #DDD6CE;
    border-radius: 8px;
    padding: 14px 16px;
    background: #FFFFFF;
    transition: border-color 0.2s;
    /* min-height nécessaire : l'iframe Stripe est plus petit que la zone par défaut */
    min-height: 50px;
}

/* Bordure rose quand le champ est actif — cohérent avec .form-input:focus */
.pm-card-element.StripeElement--focus {
    border-color: var(--rose);
    box-shadow: 0 0 0 3px rgba(201, 79, 109, 0.10);
    outline: none;
}

/* Bordure rose si la carte est invalide (numéro incorrect, date dépassée...) */
.pm-card-element.StripeElement--invalid {
    border-color: #C94F6D;
}

/* ═══════════════ NOTE CARTE PRÉPAYÉE ═══════════════ */

/* Avertissement discret affiché sous le champ carte */
.pm-card-note-prepayee {
    font-size: 12px;
    color: var(--muted);
    margin: 8px 0 16px;
    line-height: 1.5;
}

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

@media (max-width: 480px) {
    /* Sur mobile le Card Element garde le même rendu — pas de changement nécessaire */
    .pm-card-element { padding: 12px 14px; }
}


/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  CENTRES D'INTÉRÊT                                                      ║
   ║  Page    : rencontres-sereines.fr/espace-membre-profil/                ║
   ║  Template : templates/espace-membre-profil.php                          ║
   ║  Modale  : templates/centres-interets.php                               ║
   ║                                                                          ║
   ║  Toutes les classes sont préfixées ci- pour éviter les collisions.      ║
   ║  Version CSS : v6.36 (ajout section centres d'intérêt)                  ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */

/* ═══════════════ BOUTON D'OUVERTURE ═══════════════ */

/* Groupe contenant le bouton et la note explicative */
.ci-bouton-groupe {
    margin: 20px 0 8px;
}

/* Le bouton d'ouverture — style pointillé rappelant une zone à compléter */
.ci-btn-ouvrir {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 20px;
    border-radius: 10px;
    border: 2px dashed var(--rose);
    background: #FFF5F7;
    color: var(--rose);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.2s, border-style 0.2s, color 0.2s;
}

.ci-btn-ouvrir:hover {
    background: var(--rose);
    color: #fff;
    border-style: solid;
}

/* Variante "photos" du bouton — page : rencontres-sereines.fr/espace-membre-profil/
   Template : templates/espace-membre-profil.php

   QUE C'EST : le bouton "📷 Modifier mes photos" dans Mon Profil.
   Il a la même forme que le bouton "Centres d'intérêt" mais en bleu-gris
   pour le distinguer visuellement (les deux boutons sont côte à côte).

   POURQUOI text-decoration:none : c'est un lien <a> stylé en bouton —
   sans cette règle, le texte serait souligné comme un lien classique.
   POURQUOI les couleurs bleu-gris : le rose est réservé aux actions
   principales du site. Un bleu neutre signale un lien de navigation
   sans concurrencer visuellement le bouton CI rose. */
.ci-btn-ouvrir.ci-btn-photos {
    border-color: #6B8CAE;
    background: #F0F5FA;
    color: #3A5F80;
    text-decoration: none;   /* empêche le soulignement du texte (c'est un <a> stylé en bouton) */
}
/* Au survol : fond plein bleu, texte blanc — même comportement que le bouton CI au survol */
.ci-btn-ouvrir.ci-btn-photos:hover {
    background: #3A5F80;
    border-color: #3A5F80;
    color: #fff;
}

/* Badge chiffré indiquant le nombre de sélections enregistrées */
.ci-badge-count {
    background: var(--rose);
    color: #fff;
    border-radius: 50%;
    min-width: 22px;
    height: 22px;
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    line-height: 1;
}

.ci-btn-ouvrir:hover .ci-badge-count {
    background: #fff;
    color: var(--rose);
}

/* Petite note sous le bouton */
.ci-bouton-hint {
    font-size: 12px;
    color: var(--muted);
    margin: 6px 0 0;
}


/* ═══════════════ OVERLAY ═══════════════ */

/*
 * L'overlay couvre tout l'écran derrière la modale.
 * display est géré par JS (style.display = 'flex' / 'none').
 * POURQUOI ne pas utiliser display:none en CSS + classe : évite les
 * conflits avec les règles media qui pourraient modifier display.
 */
.ci-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9998;
    background: rgba(28, 28, 28, 0.62);
    align-items: center;
    justify-content: center;
    padding: 16px;
}


/* ═══════════════ MODALE ═══════════════ */

.ci-modale {
    background: #fff;
    border-radius: 14px;
    width: 100%;
    max-width: 700px;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.20);
    position: relative;
    z-index: 9999;
}

/* ── En-tête ── */
.ci-modale-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px 16px;
    border-bottom: 1px solid #EDE7DF;
    flex-shrink: 0;
}

.ci-modale-titre {
    font-size: 18px;
    font-weight: 700;
    color: var(--charcoal);
    margin: 0;
}

/* Bouton ✕ fermeture */
.ci-fermer {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    background: #F2EDE8;
    color: var(--muted);
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
}

.ci-fermer:hover {
    background: #E8DDD6;
    color: var(--charcoal);
}

/* ── Corps scrollable ── */
.ci-modale-body {
    flex: 1;
    overflow-y: auto;
    padding: 0 24px 12px;
    scrollbar-width: thin;
    scrollbar-color: var(--rose) #F5EFEA;
}

.ci-modale-body::-webkit-scrollbar {
    width: 4px;
}

.ci-modale-body::-webkit-scrollbar-thumb {
    background: var(--rose);
    border-radius: 4px;
}

/*
 * CE QUE : blocs d'information affichés en haut de la modale, avant les thèmes.
 * COMMENT : deux variantes de couleur (vert = encouragement, rose = philosophie site).
 * POURQUOI border-left : convention visuelle du site pour les blocs mis en avant.
 */
.ci-info-bloc {
    padding: 14px 18px;
    border-radius: 0 8px 8px 0;
    margin: 14px 0 10px;
    font-size: 13.5px;
    line-height: 1.6;
    border-left: 4px solid;
}

/* Bloc vert — message d'encouragement (affiché en premier) */
.ci-info-vert {
    background: #E8F5E9;
    border-color: #2E7D32;
    color: #1B5E20;
}

/* Bloc rose — philosophie du site (affiché en second) */
.ci-info-rose {
    background: #FFF0F3;
    border-color: var(--rose);
    color: var(--charcoal);
    font-style: italic;
}

/* Note introductive en italique */
.ci-intro {
    font-size: 13px;
    color: var(--muted);
    font-style: italic;
    margin: 16px 0 8px;
}

/* ── Pied de modale ── */
.ci-modale-footer {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 16px 24px;
    border-top: 1px solid #EDE7DF;
    flex-shrink: 0;
}

/* Message de succès temporaire (injection JS sous les boutons) */
.ci-feedback-succes {
    font-size: 13px;
    color: #2e7d32;
    font-weight: 600;
    flex-basis: 100%;
    margin: 4px 0 0;
}


/* ═══════════════ ACCORDÉON ═══════════════ */

/* Séparateur visuel entre les thèmes */
.ci-accordeon {
    border-bottom: 1px solid #F2EDE8;
}

/* Bouton en-tête de chaque thème */
.ci-accordeon-header {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px 0;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    color: var(--charcoal);
    transition: color 0.15s;
}

/* État survolé — retour visuel immédiat que l'en-tête est cliquable */
.ci-accordeon-header:hover {
    color: var(--rose);
}

/* Icône emoji du thème */
.ci-accordeon-icone {
    font-size: 19px;
    flex-shrink: 0;
    line-height: 1;
}

/* Nom du thème */
.ci-accordeon-label {
    font-size: 14px;
    font-weight: 600;
    flex: 1;
}

/* Badge mini "3 sél." affiché quand des options sont cochées */
.ci-accordeon-mini {
    font-size: 11px;
    font-weight: 700;
    color: var(--rose);
    background: #FFF0F3;
    padding: 2px 9px;
    border-radius: 12px;
    white-space: nowrap;
}

/* Flèche de dépliage — pivote à 90° via JS (classe 'ouvert' sur .ci-accordeon) */
.ci-accordeon-fleche {
    font-size: 20px;
    color: var(--muted);
    transition: transform 0.2s;
    display: inline-block;
    line-height: 1;
}

/* Flèche en position "ouverte" — JS ajoute la classe 'ouvert' sur .ci-accordeon */
.ci-accordeon.ouvert .ci-accordeon-fleche {
    transform: rotate(90deg);
}

/* Contenu déplié — caché par défaut, affiché si parent a la classe 'ouvert' */
.ci-accordeon-body {
    display: none;
    padding-bottom: 18px;
}

/* CE QUE : rend le corps visible quand l'accordéon est ouvert
   COMMENT : le sélecteur parent .ci-accordeon.ouvert est posé par ciToggleAccordeon() (JS) */
.ci-accordeon.ouvert .ci-accordeon-body {
    display: block;
}


/* ═══════════════ OPTIONS (CHECKBOXES) ═══════════════ */

/* Petite note contextuelle (ex : "Un seul choix possible.") */
.ci-mode-hint {
    font-size: 12px;
    color: var(--muted);
    font-style: italic;
    margin: 0 0 10px;
}

/* Ligne d'option — checkbox + libellé */
.ci-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 6px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    transition: background 0.1s;
}

/* Fond rosé léger au survol — signale que toute la ligne est cliquable (pas juste la case) */
.ci-option:hover {
    background: #FFF5F7;
}

/*
 * CE QUE : standardise la taille et la couleur de chaque case à cocher.
 * COMMENT : accent-color colore le tick natif du navigateur sans JS.
 * POURQUOI flex-shrink:0 : empêche la case de rétrécir dans les grilles étroites.
 * POURQUOI margin:0 : les navigateurs appliquent un margin natif aux inputs,
 * on le neutralise pour que le gap du flex parent contrôle seul l'espacement.
 */
.ci-option input[type="checkbox"] {
    width: 17px;
    height: 17px;
    accent-color: var(--rose);
    cursor: pointer;
    flex-shrink: 0;
    margin: 0;
}

/*
 * CE QUE : texte de l'option — occupe l'espace restant dans la ligne flex.
 * POURQUOI line-height:1.4 : certaines options sont longues et wrappent sur 2 lignes ;
 * un interligne légèrement agrandi améliore la lisibilité sans grossir les labels courts.
 */
.ci-option-label {
    color: var(--charcoal);
    line-height: 1.4;
}

/* Grille 2 colonnes pour les listes longues */
.ci-options-grille {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 16px;
}

/* Grille 3 colonnes pour les très longues listes (styles musique, genres films) */
.ci-grille-3 {
    grid-template-columns: 1fr 1fr 1fr;
}

/* Options en ligne (parentalité, singles courts) */
.ci-options-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 20px;
}

/* Titre de groupe au sein d'un accordéon (parentalité, etc.) */
.ci-groupe-titre {
    font-size: 12px;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0 8px;
}


/* ═══════════════ SOUS-LISTES CONDITIONNELLES ═══════════════ */

/*
 * La sous-liste est cachée par défaut.
 * Elle s'affiche quand JS ajoute la classe 'visible' (.ci-sous-liste.visible).
 * Le retrait avec bordure gauche rose signale visuellement le lien parent/enfant.
 */
.ci-sous-liste {
    display: none;
    margin: 10px 0 8px 16px;
    padding: 14px 16px;
    border-left: 3px solid var(--rose);
    background: #FFF8FA;
    border-radius: 0 8px 8px 0;
}

/* État visible — JS ajoute cette classe via classList.add('visible') quand la condition est remplie */
.ci-sous-liste.visible {
    display: block;
}

/* Titre interne de la sous-liste */
.ci-sous-titre {
    font-size: 11px;
    font-weight: 700;
    color: var(--rose);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 10px;
}


/* ═══════════════ ONGLETS (J'AIME / JE PRATIQUE) ═══════════════ */

/* Barre d'onglets */
.ci-onglets {
    display: flex;
    gap: 0;
    margin-bottom: 14px;
    border-bottom: 2px solid #EDE7DF;
}

/*
 * CE QUE : un bouton onglet (J'aime / Je pratique).
 * COMMENT : border-bottom:3px solid transparent réserve la place de la bordure active
 * même à l'état inactif — évite le saut de layout quand l'onglet s'active.
 * POURQUOI margin-bottom:-2px : chevauche la border-bottom de .ci-onglets (2px)
 * pour que la bordure active de l'onglet "colle" visuellement à la ligne de séparation.
 */
.ci-onglet {
    padding: 8px 18px;
    font-size: 13px;
    font-weight: 600;
    border: none;
    background: none;
    color: var(--muted);
    cursor: pointer;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    font-family: inherit;
    transition: color 0.15s, border-color 0.15s;
}

/* Onglet actif — JS ajoute la classe 'actif' au clic dans ciOnglets() */
.ci-onglet.actif {
    color: var(--rose);
    border-bottom-color: var(--rose);
}

/* Prévisualisation au survol — l'utilisateur voit à l'avance l'effet du clic */
.ci-onglet:hover {
    color: var(--rose);
}


/* ═══════════════ LANGUES — CASCADE ═══════════════ */

/* Zone liste des langues déjà ajoutées */
.ci-langues-liste {
    margin-bottom: 14px;
}

/* Formulaire d'ajout d'une langue */
.ci-langue-ajout {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-bottom: 8px;
}

/* Conteneur relatif pour positionner les suggestions en absolu sous l'input */
.ci-langue-wrap {
    flex: 1;
    min-width: 0;
    /* Pas de position:relative — les suggestions sont dans le flux normal */
}

/* Suggestions en flux normal (pas position:absolute) pour éviter le clipping
   par overflow-y:auto de .ci-modale-body. Apparaissent sous l'input et
   font scroller la modale naturellement. */
.ci-langue-suggestions {
    display: none;
    width: 100%;
    background: white;
    border: 1.5px solid var(--rose);
    border-top: none;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.10);
    margin-top: -2px; /* colle sous l'input */
}
.ci-langue-suggestions.visible { display: block; }

.ci-langue-sugg-item {
    padding: 9px 14px;
    font-size: 14px;
    cursor: pointer;
    border-bottom: 1px solid #f0e8ec;
    color: var(--charcoal);
}
.ci-langue-sugg-item:last-child { border-bottom: none; }
.ci-langue-sugg-item:hover { background: #F5E6EA; color: var(--rose); }

/*
 * CE QUE : champ texte de saisie du nom de la langue.
 * POURQUOI min-width:0 : dans un conteneur flex, les inputs ont un min-width
 * natif qui peut dépasser la largeur disponible — cette valeur force le retrait.
 */
.ci-langue-input {
    flex: 1;
    min-width: 0;
}

/* Bouton + Ajouter */
.ci-langue-btn-ajout {
    padding: 10px 18px;
    background: var(--rose);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
    white-space: nowrap;
    transition: background 0.18s;
}

/* État survolé — assombrit légèrement la teinte rose pour le feedback visuel */
.ci-langue-btn-ajout:hover {
    background: #b03860;
}

/* Une ligne de langue ajoutée */
.ci-langue-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #F2EDE8;
}

/* Nom de la langue */
.ci-langue-nom {
    font-weight: 700;
    font-size: 14px;
    min-width: 90px;
    padding-top: 5px;
    color: var(--charcoal);
}

/* Colonne des trois compétences */
.ci-langue-competences {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

/*
 * CE QUE : une ligne compétence (Parlée / Écrite / Lue) dans une entrée langue.
 * COMMENT : contient [checkbox] [libellé] [select niveau (affiché si coché)].
 * POURQUOI flex-wrap:wrap : quand le select de niveau apparaît, la ligne peut
 * dépasser la largeur disponible sur mobile — le wrap évite un débordement horizontal.
 */
.ci-langue-comp {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--charcoal);
    cursor: pointer;
    flex-wrap: wrap;
}

/* CE QUE : case à cocher native de la compétence — accent-color applique la couleur rose au tick */
.ci-langue-comp input {
    accent-color: var(--rose);
    margin: 0;
    cursor: pointer;
}

/* Select de niveau — révélé par JS quand la case est cochée */
.ci-niveau-select {
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 6px;
    border: 1.5px solid #DDD6CE;
    color: var(--charcoal);
    background: #fff;
    cursor: pointer;
    font-family: inherit;
}

/* Bouton de suppression d'une ligne langue */
.ci-langue-suppr {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    background: #F2EDE8;
    color: var(--muted);
    font-size: 13px;
    cursor: pointer;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
    transition: background 0.15s, color 0.15s;
}

/* Survol destructif — fond rouge pâle + texte rouge signalent clairement que c'est une suppression */
.ci-langue-suppr:hover {
    background: #FFEAEA;
    color: #c00;
}


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

@media (max-width: 1024px) {
    .ci-modale { max-width: 620px; }
}

@media (max-width: 768px) {
    /* Sur mobile/tablette, la modale monte depuis le bas */
    .ci-overlay {
        padding: 0;
        align-items: flex-end;
    }
    .ci-modale {
        max-width: 100%;
        max-height: 92vh;
        border-radius: 18px 18px 0 0;
    }
    /* Passer à 1 colonne pour les longues listes */
    .ci-options-grille { grid-template-columns: 1fr; }
    .ci-grille-3       { grid-template-columns: 1fr 1fr; }
    /* Onglets plus petits */
    .ci-onglet { padding: 8px 12px; font-size: 12px; }
}

@media (max-width: 480px) {
    .ci-modale-header { padding: 14px 16px 12px; }
    .ci-modale-body   { padding: 0 16px 8px; }
    .ci-modale-footer { padding: 12px 16px; flex-direction: column; }
    .ci-modale-titre  { font-size: 16px; }
    /* Boutons en pleine largeur sur petit écran */
    .ci-modale-footer .btn-primaire,
    .ci-modale-footer .btn-secondaire {
        width: 100%;
        text-align: center;
        justify-content: center;
    }
    /* 1 seule colonne partout */
    .ci-grille-3 { grid-template-columns: 1fr; }
    /* Ajout langue en colonne */
    .ci-langue-ajout    { flex-direction: column; }
    .ci-langue-btn-ajout { width: 100%; }
    /* Ligne langue empilée */
    .ci-langue-row  { flex-wrap: wrap; }
    .ci-langue-nom  { min-width: 100%; padding-top: 0; }
}

/* Petites hauteurs d'écran (ex: paysage mobile) */
@media (max-height: 600px) {
    .ci-modale { max-height: 95vh; }
}


/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  CENTRES D'INTÉRÊT — PROFIL PUBLIC                                      ║
   ║  Page : rencontres-sereines.fr/espace-membre-page-public/              ║
   ║  Template : templates/espace-membre-page-public.php                     ║
   ║                                                                          ║
   ║  CE QUE C'EST : bloc d'affichage des centres d'intérêt d'un membre      ║
   ║  sur sa page de profil public (vue par les autres membres).             ║
   ║  Les données viennent de la colonne membres.centres_interets (JSON).    ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */

/* ═══════════════ CONTENEUR GÉNÉRAL ═══════════════ */

/* Bloc qui englobe tous les thèmes de centres d'intérêt.
   margin-top : séparation visuelle après la description du membre.
   border-top : ligne de séparation discrète. */
.pp-ci-wrap {
    /* La bordure et le padding-top sont gérés par .pp-section parente —
       ici on ne remet pas de marge supplémentaire pour éviter le double espacement */
    margin-top: 0;
}

/* ═══════════════ GROUPE PAR THÈME ═══════════════ */

/* Un groupe = un thème (Alimentation, Sport…) avec son titre et ses tags.
   margin-bottom : espace entre les groupes. */
.pp-ci-groupe {
    margin-bottom: 24px;
}

/* Séparateur entre thèmes — trait discret rose clair + espace au-dessus.
   :not(:first-child) : pas de bordure sur le premier thème pour éviter
   un double trait avec la bordure de la section parente. */
.pp-ci-groupe + .pp-ci-groupe {
    border-top: 1px solid var(--rose-clair, #f0d0d8);
    padding-top: 20px;
}

/* Sous-label dans les thèmes sport/art_culture — sépare "J'aime regarder" de "Je pratique".
   Affiché dans .pp-ci-tags (flex wrap) donc width:100% force un retour à la ligne. */
.pp-ci-sous-label {
    width: 100%;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
    margin: 8px 0 4px;
}
.pp-ci-sous-label:first-child { margin-top: 0; }

/* Titre du thème : icône + nom (ex: "🥗 Alimentation").
   font-size légèrement réduit par rapport au texte courant.
   color var(--rose-fonce) : cohérence avec la charte graphique du site. */
.pp-ci-theme-titre {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--rose-fonce);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0 8px 0;
}

/* L'icône du thème — petite marge à droite pour l'espacer du texte. */
.pp-ci-icone {
    margin-right: 4px;
}

/* ═══════════════ LIGNE DE TAGS ═══════════════ */

/* Conteneur des tags — flex pour les aligner horizontalement
   et les passer à la ligne automatiquement (flex-wrap: wrap). */
.pp-ci-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* ═══════════════ TAG INDIVIDUEL ═══════════════ */

/* Un tag = une valeur cochée (ex: "Végan(e)", "Jazz", "Yoga").
   border-radius élevé : forme "pilule" arrondie.
   background var(--rose-pale) : teinte légère, non agressive.
   border : contour discret dans la couleur rose du site.
   font-size petit : pour ne pas surcharger visuellement la page profil. */
.pp-ci-tag {
    display: inline-block;
    padding: 4px 10px;
    background: var(--rose-pale, #fdf0f3);
    border: 1px solid var(--rose-clair, #f0c8d0);
    border-radius: 20px;
    font-size: 0.80rem;
    color: var(--texte, #333);
    line-height: 1.4;
}

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

/* Tablette (≤ 768px) : tags légèrement plus petits pour tenir sur l'écran. */
@media (max-width: 768px) {
    .pp-ci-tag {
        font-size: 0.78rem;
        padding: 3px 8px;
    }
    .pp-ci-theme-titre {
        font-size: 0.78rem;
    }
}

/* Mobile (≤ 480px) : les tags prennent toute la largeur disponible
   pour faciliter la lecture sur petit écran. */
@media (max-width: 480px) {
    .pp-ci-wrap {
        margin-top: 16px;
        padding-top: 14px;
    }
    .pp-ci-tags {
        gap: 5px;
    }
    .pp-ci-tag {
        font-size: 0.76rem;
    }
}


/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  MODALE MON PROFIL PERSO                                                ║
   ║  Page   : espace-membre-profil/                                         ║
   ║  Fichier: templates/profil-perso.php                                    ║
   ║                                                                         ║
   ║  CE QUE : Styles de la modale "Mon profil perso" — situation maritale,  ║
   ║           taille (slider), cigarette, alcool, spiritualité, parentalité.║
   ║  COMMENT: Préfixe .pp- pour éviter tout conflit avec .ci- (centres CI). ║
   ║           Reprend la même architecture overlay/modale que les CI.       ║
   ║  POURQUOI: Séparation visuelle et technique entre "profil de vie" et    ║
   ║            "centres d'intérêt" — deux modales indépendantes.            ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */


/* ═══════════════ OVERLAY ═══════════════ */

/* Fond semi-transparent qui recouvre toute la page quand la modale est ouverte.
   display:none par défaut — ppOuvrir() passe à display:flex.
   justify-content + align-items : centrage parfait de la modale. */
.pp-overlay {
    display: none;
    position: fixed;
    inset: 0;                                /* couvre tout l'écran */
    background: rgba(0, 0, 0, 0.55);        /* fond sombre semi-transparent */
    z-index: 1100;                           /* au-dessus de tout (nav = 100) */
    justify-content: center;
    align-items: flex-start;
    padding: 20px 16px;
    box-sizing: border-box;
    overflow-y: auto;                        /* scroll si modale très haute */
}


/* ═══════════════ MODALE ═══════════════ */

/* Boîte blanche de la modale — centrée dans l'overlay.
   max-height avec overflow-y pour que le corps soit scrollable
   sans que l'en-tête et le pied bougent. */
.pp-modale {
    background: white;
    border-radius: 16px;
    width: 100%;
    max-width: 640px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0,0,0,0.25);
    overflow: hidden;                        /* clips les coins arrondis */
    margin: auto;
}

/* En-tête fixe — titre + bouton fermer */
.pp-modale-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    border-bottom: 1px solid var(--bordure);
    flex-shrink: 0;                          /* ne rétrécit pas quand le corps défile */
}
.pp-modale-titre {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--texte);
    margin: 0;
}
.pp-fermer {
    background: none;
    border: none;
    font-size: 1.3rem;
    color: var(--muted);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    line-height: 1;
    transition: background 0.15s;
}
.pp-fermer:hover { background: var(--fond); }

/* Corps scrollable — contient tous les champs */
.pp-modale-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px 24px;
}

/* Pied fixe — bouton Enregistrer + Aperçu */
.pp-modale-footer {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 16px 24px;
    border-top: 1px solid var(--bordure);
    flex-shrink: 0;
}


/* ═══════════════ BLOCS D'INFO ═══════════════ */

/* Encart d'encouragement en haut de la modale */
.pp-info-bloc {
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 0.88rem;
    line-height: 1.5;
    margin-bottom: 16px;
}
.pp-info-vert {
    background: #F0FDF4;
    color: #166534;
    border: 1px solid #BBF7D0;
}
.pp-intro {
    font-size: 0.88rem;
    color: var(--muted);
    margin: 0 0 20px;
}


/* ═══════════════ BLOCS DE SECTION ═══════════════ */

/* Un bloc par question (situation maritale, taille, cigarette…).
   border-top : séparateur visuel entre les sections. */
.pp-section-bloc {
    margin-bottom: 28px;
    padding-top: 20px;
    border-top: 1px solid var(--bordure);
}
.pp-section-bloc:first-of-type {
    padding-top: 0;
    border-top: none;
}
/* Label de titre de section — gras, légèrement plus grand */
.pp-section-label {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--texte);
    margin: 0 0 14px;
}
/* Texte d'aide sous le titre de section (ex: "Vous pouvez en sélectionner plusieurs.") */
.pp-section-hint {
    font-size: 0.82rem;
    color: var(--muted);
    margin: -8px 0 12px;
}

/* Grille 2 colonnes pour les longues listes de checkboxes (valeurs, origines).
   auto-fill s'adapte à la largeur disponible — 2 colonnes sur desktop, 1 sur mobile. */
.pp-checkboxes {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.pp-checkboxes-grille {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px 12px;
}
@media (max-width: 480px) {
    .pp-checkboxes-grille { grid-template-columns: 1fr; }
}

/* Sous-question sous le titre (ex: "Combien mesurez-vous ?") */
.pp-slider-question {
    font-size: 0.88rem;
    color: var(--muted);
    margin: 0 0 14px;
}


/* ═══════════════ RADIOS PERSONNALISÉS ═══════════════ */

/* Chaque option (radio natif ou checkbox-single) est une ligne :
   [cercle] [texte] — le radio/checkbox HTML est masqué, le cercle custom l'imite.
   CE QUE : reproduit le design des screenshots fournis par le client.
   COMMENT : input masqué + :checked pour changer l'apparence du .pp-radio-cercle. */
.pp-radios {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.pp-options-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin-bottom: 8px;
}
.pp-radio-label {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    cursor: pointer;
    font-size: 0.95rem;
    color: var(--texte);
    border-bottom: 1px solid #F5F5F5;
    user-select: none;
}
.pp-radio-label:last-child { border-bottom: none; }
.pp-radio-label:hover .pp-radio-cercle {
    border-color: var(--rose);
}

/* Le vrai input est masqué — le cercle custom prend son rôle visuellement */
.pp-radio,
.pp-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

/* Cercle vide par défaut */
.pp-radio-cercle {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border: 2px solid #D1D5DB;
    border-radius: 50%;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.15s, background 0.15s;
    box-sizing: border-box;
}
/* Cercle rempli quand la case est cochée */
.pp-radio:checked  + .pp-radio-cercle,
.pp-input:checked  + .pp-radio-cercle {
    border-color: var(--rose);
    background: var(--rose);
    box-shadow: inset 0 0 0 4px white;  /* point blanc central */
}

/* "Pas de réponse" en rose pâle — option de retrait */
.pp-pas-reponse .pp-radio-texte { color: var(--rose); }

/* Texte de l'option */
.pp-radio-texte { flex: 1; line-height: 1.4; }


/* ═══════════════ SLIDER TAILLE ═══════════════ */

/* En-tête : "Taille" à gauche — "175 cm" en rose à droite */
.pp-taille-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 4px;
}
.pp-taille-valeur {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--rose);
}

/* Slider — personnalisation CSS du range input.
   On réinitialise l'apparence native puis on stylise track et thumb. */
.pp-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 4px;
    border-radius: 2px;
    /* Dégradé dynamique : la partie gauche (jusqu'au pouce) est rose,
       la droite est grise. Mis à jour par ppMajTaille() via CSS var. */
    background: linear-gradient(
        to right,
        var(--rose) 0%,
        var(--rose) var(--slider-pct, 50%),
        #E5E7EB    var(--slider-pct, 50%),
        #E5E7EB    100%
    );
    outline: none;
    cursor: pointer;
    margin: 8px 0 16px;
}
/* Pouce du slider */
.pp-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--rose);
    border: 3px solid white;
    box-shadow: 0 2px 6px rgba(0,0,0,0.18);
    cursor: pointer;
    transition: transform 0.1s;
}
.pp-slider::-webkit-slider-thumb:hover { transform: scale(1.15); }
.pp-slider::-moz-range-thumb {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--rose);
    border: 3px solid white;
    box-shadow: 0 2px 6px rgba(0,0,0,0.18);
    cursor: pointer;
}


/* ═══════════════ SOUS-LISTES PARENTALITÉ ═══════════════ */

/* Zone révélée si "J'ai des enfants → Oui" est coché.
   Même comportement que .ci-sous-liste dans les CI. */
.pp-sous-liste {
    margin-top: 12px;
    padding: 14px 16px;
    background: var(--fond);
    border-radius: 10px;
    border-left: 3px solid var(--rose-clair, #F9A8D4);
}
.pp-groupe-titre {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--muted);
    margin: 0 0 8px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}


/* ═══════════════ TEXTAREA SPIRITUALITÉ ═══════════════ */

/* Zone de texte libre sous les options de spiritualité */
.pp-textarea-bloc {
    margin-top: 14px;
}
.pp-textarea {
    width: 100%;
    min-height: 90px;
    padding: 12px 14px;
    border: 1px solid var(--bordure);
    border-radius: 8px;
    font-size: 0.9rem;
    font-family: inherit;
    color: var(--texte);
    resize: vertical;
    box-sizing: border-box;
    line-height: 1.5;
    transition: border-color 0.15s;
}
.pp-textarea:focus {
    outline: none;
    border-color: var(--rose);
}
.pp-compteur {
    font-size: 0.78rem;
    color: var(--muted);
    text-align: right;
    margin: 4px 0 0;
}


/* ═══════════════ MESSAGE DE RETOUR AJAX ═══════════════ */

/* Affiché sous la modale pendant 4s après l'enregistrement.
   Position fixed → toujours visible même si la modale est scrollée. */
.pp-feedback {
    display: none;
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    background: #1F2937;
    color: white;
    padding: 12px 24px;
    border-radius: 100px;
    font-size: 0.9rem;
    z-index: 1200;
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
    white-space: nowrap;
}


/* ═══════════════ RESPONSIVE — TABLETTE (≤ 768px) ═══════════════ */

@media (max-width: 768px) {
    .pp-modale {
        max-width: 100%;
        max-height: 95vh;
        border-radius: 12px;
    }
    .pp-modale-header,
    .pp-modale-body,
    .pp-modale-footer {
        padding-left: 16px;
        padding-right: 16px;
    }
    .pp-modale-footer {
        flex-direction: column;
    }
    .pp-modale-footer .btn-primaire,
    .pp-modale-footer .btn-secondaire {
        width: 100%;
        text-align: center;
    }
}


/* ═══════════════ RESPONSIVE — MOBILE (≤ 480px) ═══════════════ */

@media (max-width: 480px) {
    .pp-overlay {
        padding: 10px 8px;
    }
    .pp-modale {
        border-radius: 10px;
    }
    .pp-radio-label {
        font-size: 0.9rem;
        gap: 10px;
        padding: 9px 0;
    }
    .pp-radio-cercle {
        width: 20px;
        height: 20px;
    }
    .pp-taille-valeur {
        font-size: 1rem;
    }
    .pp-feedback {
        font-size: 0.82rem;
        padding: 10px 18px;
        bottom: 16px;
        max-width: 90vw;
        white-space: normal;
        text-align: center;
    }
}


/* ═══════════════ CHAMP TEXTE PROFIL PERSO (profession) ═══════════════ */

/* Champ texte générique dans la modale profil perso.
   Hérite de .form-input pour l'apparence, pleine largeur. */
.pp-champ-texte {
    width: 100%;
    box-sizing: border-box;
    margin-top: 6px;
}

/* Compteur de caractères sous le champ — discret, couleur grisée */
.pp-compteur-hint {
    font-size: 0.78rem;
    color: #9CA3AF;
    text-align: right;
    margin-top: 4px;
}

/* ═══════════════ AUTRES CENTRES D'INTÉRÊT (modale CI) ═══════════════ */

/* Bloc encadré "Mes autres centres d'intérêt" en haut de la modale CI.
   Fond légèrement rosé pour le distinguer des accordéons thématiques. */
.ci-bloc-autres {
    background: #FDF2F5;
    border: 1px solid #F3D0DA;
    border-radius: 10px;
    padding: 16px 18px;
    margin-bottom: 20px;
}

/* Titre du bloc — même style que les labels de section PP */
.ci-autres-label {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--texte-fonce);
    margin: 0 0 4px;
}

/* Hint — texte d'aide discret sous le titre */
.ci-autres-hint {
    font-size: 0.82rem;
    color: #6B7280;
    margin: 0 0 10px;
}

/* Textarea — pleine largeur, redimensionnable verticalement uniquement */
.ci-autres-texte {
    width: 100%;
    box-sizing: border-box;
    resize: vertical;
    min-height: 72px;
}

/* Compteur de caractères */
.ci-autres-compte {
    font-size: 0.78rem;
    color: #9CA3AF;
    text-align: right;
    margin: 4px 0 0;
}

@media (max-width: 480px) {
    .ci-bloc-autres { padding: 12px 14px; }
}

/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  PROFIL DE VIE — PAGE PUBLIQUE MEMBRE                                   ║
   ║  Page   : espace-membre-page-public/                                     ║
   ║  Fichier: templates/espace-membre-page-public.php                        ║
   ║                                                                          ║
   ║  CE QUE : Affiche les données de vie sous forme de chips élégantes       ║
   ║           (taille, situation, tabac, alcool, spiritualité) + un bloc     ║
   ║           structuré pour la parentalité.                                 ║
   ║  COMMENT: Chips pill-shape en flex-wrap → s'adaptent à la largeur.      ║
   ║           Parentalité : carte avec lignes groupées par catégorie.        ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */


/* ═══════════════ CHIPS PROFIL DE VIE ═══════════════ */

/* Conteneur des chips — flex wrap : les chips s'enroulent sur plusieurs lignes
   si elles sont trop nombreuses pour tenir sur une seule. */
.ppv-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

/* Une chip = icône + texte dans une pilule arrondie.
   CE QUE : affiche une info (ex: "📏 170 cm") de façon discrète mais lisible.
   POURQUOI pill-shape : design moderne des apps de rencontres (Hinge, Bumble…).
   COMMENT : border-radius élevé + padding horizontal généreux = forme pill. */
.ppv-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: #FAFAFA;
    border: 1px solid #E8E8E8;
    border-radius: 100px;             /* pill shape */
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;                   /* gris foncé neutre */
    line-height: 1.3;
    white-space: nowrap;
}

/* Icône dans la chip — légèrement plus grande que le texte */
.ppv-chip-icone {
    font-size: 1rem;
    flex-shrink: 0;
}


/* ═══════════════ TEXTE LIBRE SPIRITUALITÉ ═══════════════ */

/* Citation en italique sous les chips — présente le texte libre de la spiritualité.
   POURQUOI guillemets : rend le texte personnel plus intime et lisible. */
.ppv-spi-texte {
    font-size: 0.88rem;
    font-style: italic;
    color: #6B7280;
    margin: 0 0 14px;
    line-height: 1.6;
    padding-left: 4px;
    border-left: 2px solid #E5E7EB;  /* discret filet gauche */
}


/* ═══════════════ BLOC PARENTALITÉ ═══════════════ */

/* Carte parentalité — légèrement différenciée des chips par un fond doux.
   CE QUE : regroupe les infos parentalité en lignes lisibles par catégorie.
   COMMENT : fond ivoire clair + bord rose discret → reconnaissable sans être chargé. */
.ppv-parentalite {
    background: #FFF9FB;              /* fond rose très pâle, couleur du site */
    border: 1px solid #FCE7EF;
    border-radius: 12px;
    padding: 14px 18px;
    margin-top: 4px;
}

/* Titre du bloc parentalité */
.ppv-par-titre {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--rose);
    margin: 0 0 10px;
}

/* Chaque ligne d'info parentalité (ex: "A des enfants · 2 · En garde alternée") */
.ppv-par-ligne {
    font-size: 0.9rem;
    color: #374151;
    margin: 0 0 6px;
    line-height: 1.5;
    padding-left: 12px;
    position: relative;
}
/* Petit point rose avant chaque ligne */
.ppv-par-ligne::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--rose);
    opacity: 0.5;
}
.ppv-par-ligne:last-child { margin-bottom: 0; }

/* Blocs valeurs et origines — même structure que parentalité mais sans encadré.
   margin-top pour espacer du contenu précédent. */
.ppv-valeurs,
.ppv-origines {
    margin-top: 18px;
}

/* Titre du bloc (ex: "💎 Mes valeurs") — réutilise .ppv-par-titre mais sur div */
.ppv-valeurs .ppv-par-titre,
.ppv-origines .ppv-par-titre {
    margin-bottom: 10px;
}

/* Les chips valeurs/origines utilisent .ppv-chips + .ppv-chip déjà définis —
   .ppv-chips-valeurs et .ppv-chips-origines permettent des surcharges futures. */


/* ═══════════════ RESPONSIVE — TABLETTE (≤ 768px) ═══════════════ */

@media (max-width: 768px) {
    .ppv-chip { font-size: 0.84rem; padding: 5px 12px; }
}


/* ═══════════════ RESPONSIVE — MOBILE (≤ 480px) ═══════════════ */

@media (max-width: 480px) {
    .ppv-chips   { gap: 6px; }
    .ppv-chip    { font-size: 0.82rem; padding: 5px 10px; white-space: normal; }
    .ppv-parentalite { padding: 12px 14px; }
}


/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  BOÎTE À LETTRES                                                        ║
   ║  Bouton flottant + modale deux étapes (réclamation / suggestion)        ║
   ║  Incluse dans : home.php, mon-espace.php                                ║
   ║  Template : templates/boite-lettres-modale.php                          ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */

/* ═══════════════ Bouton flottant (home + espace membre) ═══════════════ */

/* Bouton fixe en bas à droite — home.php */
.boite-btn-flottant {
    display: none; /* Caché par défaut sur toutes les pages — affiché uniquement sur la home via body.home */
    position: fixed;
    bottom: 28px;
    right: 28px;
    z-index: 900;
    background: rgba(255, 255, 255, 0.15);
    color: white;
    border: 1.5px solid rgba(255, 255, 255, 0.45);
    border-radius: 100px;
    padding: 12px 22px;
    font-size: 0.95rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px); /* Safari */
    transition: transform 0.15s, background 0.15s, border-color 0.15s;
}

/* Affiché uniquement sur la home */
body.home .boite-btn-flottant {
    display: flex;
    align-items: center;
    gap: 8px;
}

.boite-btn-flottant:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.65);
    transform: translateY(-2px);
}

/* Bouton dans le bloc de bienvenue — mon-espace.php (ancien bouton, conservé pour référence) */
.boite-btn-espace {
    position: absolute;
    top: 16px;
    right: 16px;
    background: var(--rose);
    color: white;
    border: none;
    border-radius: 100px;
    padding: 8px 18px;
    font-size: 0.88rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s;
}

.boite-btn-espace:hover {
    background: #b03d5a;
}


/* ═══════════════ Overlay et modale ═══════════════ */

.boite-overlay {
    display: none; /* affiché via JS */
    position: fixed;
    inset: 0;
    background: rgba(28,28,28,0.55);
    z-index: 1100;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.boite-modale {
    background: var(--cream);
    border-radius: 16px;
    width: 100%;
    max-width: 520px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 12px 48px rgba(28,28,28,0.22);
}

/* ═══════════════ En-tête ═══════════════ */

.boite-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px 16px;
    border-bottom: 1px solid var(--warm);
}

.boite-titre {
    margin: 0;
    font-size: 1.15rem;
    color: var(--charcoal);
}

.boite-fermer {
    background: none;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    color: var(--muted);
    line-height: 1;
    padding: 4px 8px;
    border-radius: 6px;
    transition: background 0.15s;
}

.boite-fermer:hover { background: var(--warm); }


/* ═══════════════ Corps / étapes ═══════════════ */

.boite-etape {
    padding: 24px;
}

.boite-intro {
    font-size: 1rem;
    color: var(--charcoal);
    margin: 0 0 20px;
    text-align: center;
}

.boite-sous-titre {
    font-size: 1rem;
    font-weight: 700;
    color: var(--charcoal);
    margin: 0 0 16px;
}

.boite-retour {
    background: none;
    border: none;
    font-size: 0.88rem;
    color: var(--muted);
    cursor: pointer;
    padding: 0;
    margin-bottom: 16px;
    font-family: inherit;
    text-decoration: underline;
}

.boite-retour:hover { color: var(--charcoal); }


/* ═══════════════ Étape 1 — Choix du type ═══════════════ */

.boite-choix {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.boite-choix-btn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    background: white;
    border: 2px solid var(--warm);
    border-radius: 12px;
    padding: 18px 20px;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    transition: border-color 0.15s, background 0.15s;
}

.boite-choix-btn:hover {
    border-color: var(--rose);
    background: #fdf5f7;
}

.boite-choix-icone {
    font-size: 1.6rem;
    margin-bottom: 4px;
}

.boite-choix-label {
    font-size: 0.97rem;
    font-weight: 700;
    color: var(--charcoal);
}

.boite-choix-desc {
    font-size: 0.85rem;
    color: var(--muted);
}


/* ═══════════════ Étape 2 — Formulaires ═══════════════ */

.boite-champ-label {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--charcoal);
    margin: 0 0 8px;
}

.boite-obligatoire { color: var(--rose); }

/* Urgence — radios stylisés */
.boite-urgence-choix {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.boite-urgence-option {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: white;
    border: 2px solid var(--warm);
    border-radius: 10px;
    padding: 12px 14px;
    cursor: pointer;
    transition: border-color 0.15s;
}

.boite-urgence-option:has(input:checked) {
    border-color: var(--rose);
    background: #fdf5f7;
}

.boite-urgence-option input[type="radio"] {
    display: none; /* remplacé par .boite-urgence-cercle */
}

.boite-urgence-cercle {
    width: 18px;
    height: 18px;
    border: 2px solid var(--warm);
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 2px;
    transition: border-color 0.15s, background 0.15s;
}

.boite-urgence-option:has(input:checked) .boite-urgence-cercle {
    border-color: var(--rose);
    background: var(--rose);
}

.boite-urgence-option span strong {
    display: block;
    font-size: 0.9rem;
    color: var(--charcoal);
}

.boite-urgence-option span em {
    font-size: 0.82rem;
    color: var(--muted);
    font-style: normal;
}

/* Textarea */
.boite-textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 12px;
    border: 1px solid var(--warm);
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.9rem;
    resize: vertical;
    min-height: 120px;
    background: white;
    color: var(--charcoal);
}

.boite-textarea:focus {
    outline: none;
    border-color: var(--rose);
}

.boite-compteur {
    font-size: 0.8rem;
    color: var(--muted);
    margin: 4px 0 16px;
    text-align: right;
}

/* Bouton envoyer */
.boite-btn-envoyer {
    width: 100%;
    background: var(--rose);
    color: white;
    border: none;
    border-radius: 100px;
    padding: 13px 20px;
    font-size: 0.97rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s;
}

.boite-btn-envoyer:hover:not(:disabled) { background: #b03d5a; }
.boite-btn-envoyer:disabled { opacity: 0.6; cursor: not-allowed; }

/* Feedback */
.boite-feedback {
    margin-top: 12px;
    font-size: 0.88rem;
    font-weight: 600;
    padding: 10px 14px;
    border-radius: 8px;
    display: none;
}

.boite-feedback:not(:empty) { display: block; }

.boite-feedback--succes {
    background: #E8F5E9;
    color: #2E7D32;
    border-left: 4px solid #2E7D32;
}

.boite-feedback--erreur {
    background: #FFEBEE;
    color: #B71C1C;
    border-left: 4px solid #B71C1C;
}


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

@media (max-width: 480px) {
    .boite-btn-flottant { bottom: 16px; right: 16px; font-size: 0.85rem; padding: 10px 16px; }
    .boite-btn-espace   { position: static; display: block; width: 100%; margin-bottom: 16px; }
    .boite-modale       { border-radius: 12px; }
    .boite-etape        { padding: 16px; }
}


/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  CONFIRMATION INSCRIPTION DÉCOUVERTE                                    ║
   ║  Page : rencontres-sereines.fr/confirmer-inscription/                  ║
   ║  Template : templates/confirmer-inscription.php                        ║
   ║  Ajouté le 14/07/2026 — chantier Découverte, Étape 4 volet 4.1         ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */

/* ═══════════════ Page + carte ═══════════════ */

.cfi-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    background: var(--cream);
}

.cfi-carte {
    background: var(--white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    width: 100%;
    max-width: 520px;
    overflow: hidden;
    text-align: center;
}

.cfi-header {
    background: var(--rose);
    padding: 32px 40px 28px;
}

.cfi-logo {
    font-family: var(--font-serif);
    font-size: 24px;
    color: var(--white);
    font-style: italic;
    line-height: 1.3;
}

.cfi-corps {
    padding: 36px 40px 40px;
}

.cfi-icone {
    font-size: 48px;
    margin-bottom: 20px;
}

.cfi-titre {
    font-family: var(--font-serif);
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 16px;
}

/* Couleurs de statut — pas de variable globale pour succès/erreur dans le projet,
   mêmes teintes que .boite-feedback--succes / --erreur plus haut, pour rester cohérent */
.cfi-titre--succes { color: #2E7D32; }
.cfi-titre--erreur { color: #B71C1C; }

.cfi-texte {
    font-size: 15px;
    color: var(--muted);
    line-height: 1.7;
    margin-bottom: 12px;
}

.cfi-btn {
    display: inline-block;
    background: var(--rose);
    color: var(--white);
    padding: 14px 32px;
    border-radius: var(--radius-pill);
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    margin-top: 12px;
    transition: background var(--transition), transform 0.15s;
}

.cfi-btn:hover {
    background: var(--rose-dark);
    transform: translateY(-1px);
}

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

@media (max-width: 1024px) {
    .cfi-carte { max-width: 460px; }
}

@media (max-width: 768px) {
    .cfi-header { padding: 28px 32px 24px; }
    .cfi-corps  { padding: 30px 28px 34px; }
}

@media (max-width: 480px) {
    .cfi-page   { padding: 24px 16px; }
    .cfi-header { padding: 24px 24px 20px; }
    .cfi-corps  { padding: 28px 24px 32px; }
    .cfi-logo   { font-size: 20px; }
    .cfi-titre  { font-size: 20px; }
}

@media (max-height: 750px) {
    .cfi-page { align-items: flex-start; padding-top: 32px; }
}