/* ============================================================
   app.css — Design system unique SPIITZ (refonte moderne)
   Style "Airbnb" : clair, cartes blanches arrondies, ombres
   douces, accent marque #ff385c, beaucoup d'espace.
   Objectif : remplacer progressivement tous les anciens CSS.
   ============================================================ */

/* ---------- 1. Tokens (variables) ---------- */
:root {
    /* Couleurs de marque */
    --brand: #ff385c;
    --brand-dark: #e11d48;
    --brand-soft: #ffe4ea;

    /* Neutres */
    --bg: #f7f7f8;
    --surface: #ffffff;
    --text: #1f2430;
    --text-soft: #6b7280;
    --text-muted: #9ca3af;
    --border: #ececf0;

    /* Accents secondaires */
    --gold: #fbbf24;
    --green: #10b981;
    --blue: #3b82f6;
    --purple: #8b5cf6;

    /* Rayons */
    --r-sm: 10px;
    --r-md: 16px;
    --r-lg: 22px;
    --r-pill: 999px;

    /* Ombres */
    --shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.06), 0 1px 2px rgba(16, 24, 40, 0.04);
    --shadow-md: 0 6px 20px rgba(16, 24, 40, 0.08);
    --shadow-lg: 0 16px 40px rgba(16, 24, 40, 0.12);

    /* Layout */
    --container: 1200px;
    --nav-h: 68px;

    --transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);

    --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    /* Avatars sans photo — couleur unie neutre */
    --ph-bg: #e8eaee;
    --ph-text: #9aa1ad;
}

html[data-theme="dark"] {
    --brand-soft: rgba(255, 56, 92, 0.16);
    --bg: #070709;
    --surface: #101014;
    --surface-2: #18181f;
    --surface-3: #22222a;
    --chrome-bg: #12121a;
    --text: #f5f5f5;
    --text-soft: #b0b0b0;
    --text-muted: #707070;
    --border: #2a2a35;
    --border-strong: #3a3a48;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.6);
    --shadow-md: 0 8px 28px rgba(0, 0, 0, 0.55);
    --shadow-lg: 0 24px 56px rgba(0, 0, 0, 0.65);
    --ph-bg: #222228;
    --ph-text: #888888;
    --footer-bg: #0c0c12;
}

/* ---------- 2. Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
    margin: 0;
    font-family: var(--font);
    color: var(--text);
    background: var(--bg);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
/* Leaflet : les tuiles ont une taille fixe (256px) — le max-width global les déforme */
.leaflet-container img,
.leaflet-container img.leaflet-tile,
.leaflet-container img.leaflet-marker-icon,
.leaflet-container img.leaflet-marker-shadow {
    max-width: none !important;
    max-height: none !important;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

h1, h2, h3, h4 { margin: 0; line-height: 1.2; font-weight: 700; letter-spacing: -0.02em; }
p { margin: 0; }

::selection { background: var(--brand-soft); color: var(--brand-dark); }

/* Scrollbar discrète */
*::-webkit-scrollbar { height: 8px; width: 8px; }
*::-webkit-scrollbar-thumb { background: #d7d7dd; border-radius: var(--r-pill); }

/* ---------- 3. Layout ---------- */
.homefix-container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 24px;
}

section { scroll-margin-top: calc(var(--nav-h) + 12px); }

/* ---------- 4. Navigation ---------- */
.app-nav {
    position: sticky;
    top: 0;
    z-index: 1000;
    min-height: var(--nav-h);
    padding-top: env(safe-area-inset-top, 0px);
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
}
.app-nav__inner {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    gap: 24px;
}
.app-nav__logo {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.04em;
    color: var(--brand);
    display: flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    overflow: visible;
    flex-shrink: 0;
    line-height: 0;
}
.app-nav__logo img,
.app-nav__logo .spiitz-brand-logo,
.app-nav__logo .app-nav__logo-img {
    height: 30px;
    max-width: 128px;
}
.spiitz-brand-logo-wrap {
    position: relative;
    display: inline-block;
    line-height: 0;
    vertical-align: middle;
}
.spiitz-brand-logo-wrap .spiitz-brand-logo,
.spiitz-brand-logo-wrap .spiitz-wordmark,
.spiitz-brand-logo-wrap .app-nav__logo-img,
.spiitz-brand-logo-wrap img {
    display: block;
    height: 30px;
    width: auto !important;
    max-width: 128px;
    object-fit: contain;
    object-position: left center;
}
/* Header : logo monochrome noir */
.app-nav__logo .spiitz-brand-logo-wrap img,
header.header .logo .spiitz-brand-logo-wrap img,
.desktop-nav-logo-link .spiitz-brand-logo-wrap img {
    filter: brightness(0);
}
.spiitz-brand-badge {
    position: absolute;
    top: -8px;
    right: -4px;
    z-index: 2;
    padding: 1px 4px;
    border-radius: 999px;
    font-size: 0.42rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.35;
    color: #fff;
    background: var(--brand);
    border: 1px solid var(--surface, #fff);
    box-shadow: 0 1px 4px rgba(255, 56, 92, 0.35);
    pointer-events: none;
    white-space: nowrap;
}
/* Logo SPIITZ 26 (SVG fond transparent) */
.spiitz-wordmark,
.spiitz-brand-logo,
.auth-logo-img,
.annonce-detail-modal__logo,
.site-footer__logo,
.error-page-logo,
.age-verification-logo {
    display: block;
    height: 40px;
    width: auto !important;
    max-width: 180px;
    object-fit: contain;
    transform: none !important;
    object-position: left center;
}
.spiitz-wordmark { object-position: center center; }
.spiitz-modal-header__left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}
.spiitz-modal-header__icon {
    width: 32px;
    height: 32px;
    object-fit: contain;
    flex-shrink: 0;
}
/* Bouton retour dans le header (pages détail) : mobile uniquement */
.app-nav__back {
    display: none;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--text);
    font-size: 1.05rem;
    cursor: pointer;
    flex-shrink: 0;
    margin-right: 2px;
    transition: background 0.2s ease;
}
.app-nav__back:active { background: var(--bg); }
.app-nav__links {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: 8px;
}
.app-nav__link {
    padding: 9px 14px;
    border-radius: var(--r-pill);
    font-weight: 600;
    font-size: 15px;
    color: var(--text-soft);
    transition: var(--transition);
}
.app-nav__link:hover { background: var(--bg); color: var(--text); }
.app-nav__link.active { color: var(--brand); }
.app-nav__spacer { flex: 1; }
.app-nav__actions { display: flex; align-items: center; gap: 10px; }
.app-nav__icon {
    position: relative;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition: var(--transition);
}
.app-nav__icon:hover { border-color: var(--brand); color: var(--brand); }
.app-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: var(--r-pill);
    background: var(--brand);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--surface);
}
.app-nav__avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--brand-soft);
    color: var(--brand);
    font-weight: 700;
    font-size: 0.9rem;
    border: 1px solid var(--border);
    flex-shrink: 0;
}
.app-nav__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }
.app-nav__avatar .app-nav__avatar-fallback {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    --ph-size: 0.72rem;
    letter-spacing: 0.02em;
}
.app-nav__avatar .app-nav__avatar-fallback[hidden] { display: none !important; }
.app-nav__avatar .app-nav__avatar-fallback:not([hidden]) { display: flex !important; }
/* Priorité sur les règles legacy #profile-toggle (ex-header.css) */
.app-nav #profile-toggle.app-nav__avatar {
    overflow: hidden !important;
    position: relative;
}
.app-nav #profile-toggle.app-nav__avatar .app-nav__avatar-fallback[hidden] {
    display: none !important;
}
.app-nav #profile-toggle.app-nav__avatar img {
    width: 100% !important;
    height: 100% !important;
    min-width: 0;
    min-height: 0;
    object-fit: cover;
    border-radius: 50%;
}

/* ---------- 5. Boutons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 20px;
    border-radius: var(--r-pill);
    border: 1px solid transparent;
    font-weight: 600;
    font-size: 15px;
    transition: var(--transition);
    white-space: nowrap;
}
.btn-primary { background: var(--brand); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--brand-dark); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--border); }
.btn-ghost:hover { border-color: var(--text-muted); background: var(--surface); }

/* ---------- 6. En-têtes de section ---------- */
.homefix-section-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 28px;
}
.homefix-section-title {
    font-size: clamp(1.4rem, 2.4vw, 2rem);
    color: var(--text);
}
.homefix-section-subtitle {
    margin-top: 8px;
    color: var(--text-soft);
    font-size: 1rem;
    max-width: 640px;
}
.homefix-featured-section,
.homefix-categories-section,
.homefix-annonces-section,
.homefix-seo-annonces-section,
.homefix-salons-section { padding: 56px 0; }
.homefix-categories-section,
.homefix-seo-annonces-section { background: var(--surface); }
.homefix-categories-section .homefix-section-title,
.homefix-seo-annonces-section .homefix-section-title { text-align: center; }
.homefix-categories-section .homefix-section-subtitle,
.homefix-seo-annonces-section .homefix-section-subtitle { margin: 8px auto 0; text-align: center; }

/* Contrôles de slider */
.homefix-slider-controls { display: contents; }
.homefix-slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: saturate(180%) blur(8px);
    -webkit-backdrop-filter: saturate(180%) blur(8px);
    box-shadow: var(--shadow-md);
    color: var(--text);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    box-shadow: var(--shadow-sm);
}
.homefix-slider-btn.prev { left: 8px; }
.homefix-slider-btn.next { right: 8px; }
.homefix-slider-btn:hover:not(:disabled) {
    border-color: var(--brand);
    color: var(--brand);
    background: #fff;
    transform: translateY(-50%) scale(1.08);
}
.homefix-slider-btn:disabled { opacity: 0; pointer-events: none; }
.homefix-slider-container { position: relative; }
/* Accueil desktop : lieux affichés par 3 (grille 3 colonnes) pour éviter les "trous" en fin de rangée */
@media (min-width: 769px) {
    #lieuxSlider.lieux-places-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- 7. Hero ---------- */
.homefix-hero-section {
    position: relative;
    padding: 80px 24px 64px;
    text-align: center;
    background:
        radial-gradient(1200px 400px at 50% -10%, var(--brand-soft), transparent 70%),
        var(--bg);
}
.homefix-hero-content { max-width: 820px; margin: 0 auto; }

.homefix-beta-banner {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    max-width: 640px;
    margin: 0 auto 28px;
    padding: 14px 16px 14px 14px;
    text-align: left;
    border-radius: var(--r-lg);
    border: 1px solid rgba(255, 56, 92, 0.16);
    background: linear-gradient(135deg, rgba(255, 56, 92, 0.09) 0%, rgba(255, 255, 255, 0.92) 58%, var(--surface) 100%);
    box-shadow: 0 10px 32px rgba(255, 56, 92, 0.08);
    overflow: hidden;
}

.homefix-beta-banner__tag {
    flex-shrink: 0;
    margin-top: 2px;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    line-height: 1;
    color: #fff;
    background: var(--brand);
    box-shadow: 0 2px 8px rgba(255, 56, 92, 0.28);
}

.homefix-beta-banner__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.homefix-beta-banner__title {
    display: block;
    font-size: 0.92rem;
    font-weight: 800;
    line-height: 1.3;
    color: var(--text);
    letter-spacing: -0.01em;
}

.homefix-beta-banner__text {
    margin: 0;
    font-size: 0.84rem;
    line-height: 1.5;
    color: var(--text-soft);
    font-weight: 500;
}

.homefix-beta-banner__icon {
    flex-shrink: 0;
    align-self: center;
    font-size: 1.35rem;
    color: rgba(255, 56, 92, 0.35);
    opacity: 0.9;
}

.homefix-hero-title {
    font-size: clamp(2rem, 5vw, 3.4rem);
    line-height: 1.08;
    letter-spacing: -0.03em;
}
.homefix-hero-subtitle {
    margin: 20px auto 0;
    max-width: 680px;
    font-size: 1.12rem;
    color: var(--text-soft);
}
.homefix-hero-search { margin-top: 28px; }

/* ---------- 8. Grille de lieux ---------- */
.lieux-places-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 22px;
}
.lieux-place-card {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    overflow: hidden;
    transition: var(--transition);
    box-shadow: var(--shadow-sm);
}
.lieux-place-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: transparent; }
.lieux-place-card.lieu-premium { border-color: var(--gold); }
.lieux-place-card.lieu-partenaire {
    border: 2px solid transparent;
    background:
        linear-gradient(var(--surface), var(--surface)) padding-box,
        linear-gradient(135deg, var(--brand), #7c3aed) border-box;
    box-shadow: 0 8px 24px rgba(255, 56, 92, 0.12);
}
.lieux-place-card.lieu-partenaire:hover {
    box-shadow: 0 14px 32px rgba(255, 56, 92, 0.2);
}

/* Vue liste compacte (toggle grille/liste) */
.lieux-places-grid.list-view {
    grid-template-columns: 1fr;
    gap: 14px;
}
.lieux-places-grid.list-view .lieux-place-card > a {
    display: grid;
    grid-template-columns: 150px 1fr;
    align-items: stretch;
}
.lieux-places-grid.list-view .lieux-place-image {
    aspect-ratio: auto;
    height: 100%;
    min-height: 120px;
    font-size: 1.8rem;
}
.lieux-places-grid.list-view .lieux-place-info-card { padding: 14px 16px; }
@media (max-width: 480px) {
    .lieux-places-grid.list-view .lieux-place-card > a { grid-template-columns: 110px 1fr; }
    .lieux-places-grid.list-view .lieux-place-image { min-height: 100px; }
}
.lieux-place-image {
    position: relative;
    aspect-ratio: 16 / 10;
    background: linear-gradient(135deg, #f3f4f6, #e5e7eb);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 2.4rem;
    overflow: hidden;
}
.lieux-place-image img { width: 100%; height: 100%; object-fit: cover; }
.lieux-place-image .spiitz-place-photo-fallback {
    font-size: 2.4rem;
    color: var(--text-muted);
}
.lieux-place-image .spiitz-place-photo-fallback[hidden] {
    display: none !important;
}
.lieux-place-type {
    position: absolute;
    bottom: 10px;
    left: 10px;
    z-index: 3;
    background: rgba(255, 255, 255, 0.92);
    color: var(--text);
    font-size: 12px;
    font-weight: 600;
    padding: 5px 10px;
    border-radius: var(--r-pill);
    backdrop-filter: blur(4px);
}
.lieux-place-card.lieu-premium .lieux-place-type {
    z-index: 4;
    box-shadow: var(--shadow-sm);
}
.lieux-place-card.lieu-partenaire .lieux-place-type {
    z-index: 4;
    background: linear-gradient(135deg, var(--brand), #7c3aed);
    color: #fff;
    box-shadow: 0 2px 8px rgba(255, 56, 92, 0.25);
}
.lieux-premium-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 5px;
    background: var(--gold);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 5px 10px;
    border-radius: var(--r-pill);
    box-shadow: var(--shadow-sm);
}
.lieux-partner-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 5px;
    background: linear-gradient(135deg, var(--brand), #7c3aed);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 5px 10px;
    border-radius: var(--r-pill);
    box-shadow: 0 4px 12px rgba(255, 56, 92, 0.35);
}
.lieux-place-info-card { padding: 16px; }
.lieux-place-name { font-size: 1.05rem; font-weight: 700; margin-bottom: 8px; }
.lieux-place-city,
.lieux-place-announcements {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-soft);
    font-size: 0.9rem;
    margin-bottom: 4px;
}
.lieux-place-city i, .lieux-place-announcements i { color: var(--brand); width: 14px; }
.lieux-place-rating-card {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 8px;
    font-weight: 600;
    font-size: 0.9rem;
}
/* Ligne titre : note (étoile) calée tout à droite de la card, au niveau du titre */
.lieux-place-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
}
.lieux-place-title-row .lieux-place-name { margin-bottom: 0; flex: 1; min-width: 0; }
.lieux-place-title-row .lieux-place-rating-card { margin-top: 0; flex-shrink: 0; }
/* Ligne meta : nombre d'annonces à gauche, distance calée tout à droite en face */
.lieux-place-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.lieux-place-meta-row .lieux-place-announcements { margin-bottom: 0; }
.lieux-place-meta-row .lieux-place-distance { margin-left: 0; flex-shrink: 0; }
.lieux-place-rating-card .star { color: var(--gold); }
.lieux-no-places, .annonces-no-places {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--text-muted);
    padding: 40px;
}

/* ---------- 9. Catégories ---------- */
.homefix-categories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
    margin-top: 36px;
}
.homefix-category-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    transition: var(--transition);
}
.homefix-category-card:hover { background: var(--surface); border-color: var(--brand); transform: translateY(-3px); box-shadow: var(--shadow-md); }
.homefix-category-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: var(--brand-soft);
    color: var(--brand);
    font-size: 1.3rem;
}
.homefix-category-name { font-size: 1rem; font-weight: 600; }
.homefix-categories-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
    margin-top: 36px;
}
.homefix-categories-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 24px;
    border-radius: var(--r-pill);
    font-weight: 600;
    transition: var(--transition);
    border: 1px solid var(--border);
    background: var(--surface);
}
.homefix-categories-btn.privatif { background: var(--brand); color: #fff; border-color: var(--brand); }
.homefix-categories-btn.privatif:hover { background: var(--brand-dark); }
.homefix-categories-btn.insolite:hover { border-color: var(--brand); color: var(--brand); }

/* ---------- 10. Cartes d'annonces ---------- */
.annonces-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 22px;
    padding-top: 12px;
    overflow: visible;
}
.annonce-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    transition: var(--transition);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    overflow: hidden;
}
.annonce-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: transparent; }
.annonce-content { padding: 16px; }
/* Hauteurs égales : index (home) + annonces.php — cartes identiques */
.page-home .homefix-annonces-section .annonces-grid,
.page-annonces .annonces-grid,
.page-lieu-detail .annonces-grid { align-items: stretch; }
.page-home .homefix-annonces-section .annonce-card,
.page-annonces .annonce-card,
.page-lieu-detail .annonce-card { display: flex; flex-direction: column; width: 100%; }
.page-home .homefix-annonces-section .annonce-content,
.page-annonces .annonce-content,
.page-lieu-detail .annonce-content { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.page-home .homefix-annonces-section .annonce-footer,
.page-annonces .annonce-footer,
.page-lieu-detail .annonce-footer { margin-top: auto; }
.annonce-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.annonce-author-header { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
/* Pseudo + adresse empilés à droite de l'avatar */
.annonce-author-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.annonce-author-location {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--text-soft);
    font-size: 0.76rem;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.annonce-author-location i { color: var(--brand); font-size: 0.68rem; flex-shrink: 0; }
.author-avatar { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.author-avatar-wrap {
    position: relative;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    line-height: 0;
    vertical-align: middle;
}
.author-avatar-wrap--sm { width: 32px; height: 32px; }
.author-avatar-wrap--md { width: 36px; height: 36px; }
.author-avatar-wrap--lg { width: 60px; height: 60px; }
.author-avatar-wrap .no-photo-placeholder {
    width: 100%;
    height: 100%;
    margin: 0;
}
.no-photo-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    flex-shrink: 0;
    --ph-size: 0.72rem;
}
.no-photo-placeholder--sm { width: 32px; height: 32px; --ph-size: 0.65rem; }
.author-name-header { font-weight: 600; font-size: 0.88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.annonce-actions { display: flex; gap: 4px; flex-shrink: 0; align-items: center; }
.action-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}
/* Cartes annonces : favori / signaler / partager plus discrets */
.annonce-card .annonce-actions .action-btn {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
}
.annonce-card .annonce-actions .action-btn.favorite-btn {
    --fav-size: 28px;
    --fav-icon: 0.72rem;
}
.annonce-card .annonce-actions .action-btn i {
    font-size: 0.72rem;
    line-height: 1;
}
.action-btn:hover:not(.favorite-btn) { border-color: var(--brand); color: var(--brand); }
.annonce-location, .annonce-lieu {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--text-soft);
    font-size: 0.82rem;
    margin-bottom: 8px;
}
.annonce-location i, .annonce-lieu i { color: var(--brand); }
/* "Homme cherche femme" : chip de marque, placé sous l'en-tête */
.annonce-search-info {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    max-width: 100%;
    background: var(--brand-soft);
    color: var(--brand);
    font-size: 0.74rem;
    font-weight: 600;
    line-height: 1;
    padding: 5px 10px;
    border-radius: var(--r-pill);
    margin: 0 0 10px;
}
.annonce-search-info i { color: var(--brand); font-size: 0.68rem; flex-shrink: 0; }
.annonce-search-info span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.annonce-description {
    color: var(--text);
    font-size: 0.88rem;
    line-height: 1.4;
    margin: 8px 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.annonce-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.annonce-card .tag {
    background: var(--bg);
    color: var(--text-soft);
    font-size: 0.74rem;
    font-weight: 500;
    padding: 3px 9px;
    border-radius: var(--r-pill);
    border: 1px solid var(--border);
}
.annonce-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}
.annonce-card .annonce-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: var(--r-pill);
    font-size: 0.76rem;
    font-weight: 600;
    background: var(--brand-soft);
    color: var(--brand-dark);
}
.annonce-badge.plan { background: #fff1ec; color: #ea580c; }
.annonce-badge.boire { background: #f3e8ff; color: var(--purple); }
.annonce-badge.sortie { background: #fef9c3; color: #ca8a04; }
.annonce-badge.peu-importe { background: var(--bg); color: var(--text-soft); }
.annonce-card .btn-repondre,
.annonce-card .btn-participate {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: var(--r-pill);
    background: var(--brand);
    color: #fff;
    border: none;
    font-weight: 600;
    font-size: 0.82rem;
    transition: var(--transition);
}
.annonce-card .btn-repondre:hover,
.annonce-card .btn-participate:hover { background: var(--brand-dark); transform: translateY(-1px); }
.premium-crown { color: var(--gold); margin-left: 4px; }

/* ---------- 11. Cartes SEO ---------- */
.homefix-seo-annonces-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
    margin-top: 36px;
}
.homefix-seo-annonce-card {
    display: flex;
    gap: 16px;
    padding: 22px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    transition: var(--transition);
}
.homefix-seo-annonce-card:hover { background: var(--surface); border-color: var(--brand); transform: translateY(-3px); box-shadow: var(--shadow-md); }
.homefix-seo-annonce-icon {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: var(--brand);
    color: #fff;
    font-size: 1.4rem;
}
.homefix-seo-annonce-title { font-size: 1.1rem; font-weight: 700; margin-bottom: 6px; }
.homefix-seo-annonce-description { color: var(--text-soft); font-size: 0.9rem; margin-bottom: 12px; }
.homefix-seo-annonce-meta { display: flex; align-items: center; justify-content: space-between; }
.homefix-seo-annonce-count { font-weight: 600; color: var(--brand); font-size: 0.85rem; }
.homefix-seo-annonce-arrow { color: var(--brand); font-size: 1.2rem; transition: var(--transition); }
.homefix-seo-annonce-card:hover .homefix-seo-annonce-arrow { transform: translateX(4px); }

/* ---------- 12. CTA ---------- */
.homefix-cta-section { padding: 64px 0; }
.homefix-cta-content {
    text-align: center;
    background: linear-gradient(135deg, var(--brand), var(--brand-dark));
    color: #fff;
    border-radius: var(--r-lg);
    padding: 56px 28px;
    box-shadow: var(--shadow-lg);
}
.homefix-cta-title { font-size: clamp(1.6rem, 3vw, 2.2rem); }
.homefix-cta-subtitle { margin-top: 10px; opacity: 0.92; font-size: 1.05rem; }
.homefix-cta-buttons { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 28px; }
.homefix-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 13px 26px;
    border-radius: var(--r-pill);
    font-weight: 600;
    border: none;
    transition: var(--transition);
}
.homefix-cta-btn.homefix-primary { background: #fff; color: var(--brand); }
.homefix-cta-btn.homefix-primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.homefix-cta-btn.homefix-secondary { background: rgba(255, 255, 255, 0.18); color: #fff; border: 1px solid rgba(255, 255, 255, 0.5); }
.homefix-cta-btn.homefix-secondary:hover { background: rgba(255, 255, 255, 0.28); }

/* ---------- 13. Salons ---------- */
.rooms-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.room-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 18px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    transition: var(--transition);
    box-shadow: var(--shadow-sm);
}
.room-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--brand); }
.room-card.boosted { border-color: var(--gold); background: linear-gradient(135deg, #fffbeb, var(--surface)); }
.room-left { display: flex; align-items: center; gap: 14px; min-width: 0; }
.room-media { position: relative; width: 52px; height: 52px; border-radius: 14px; background: var(--brand-soft); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; flex-shrink: 0; }
.room-lock-badge, .room-boost-badge {
    position: absolute;
    bottom: -4px;
    right: -4px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--surface);
}
.room-boost-badge { background: var(--gold); }
.room-title-row { display: flex; align-items: center; gap: 8px; }
.room-name { font-weight: 700; font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.room-name { margin: 0; }
.hot { color: #ef4444; }
.room-sub { color: var(--text-soft); font-size: 0.85rem; margin: 2px 0 0; }
.pill {
    display: inline-flex;
    align-items: center;
    padding: 6px 13px;
    border-radius: var(--r-pill);
    background: var(--brand-soft);
    color: var(--brand-dark);
    font-weight: 700;
    font-size: 0.85rem;
    flex-shrink: 0;
}

/* ---------- 14. Footer ---------- */
.site-footer {
    background: var(--footer-bg, var(--text));
    color: #cbd0da;
    padding: 56px 0 32px;
    margin-top: 40px;
    position: relative;
    z-index: 1;
    flex-shrink: 0;
}
.site-footer__inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 24px;
    display: grid;
    grid-template-columns: 1.5fr repeat(3, 1fr);
    gap: 32px;
}
.site-footer__brand { font-size: 22px; font-weight: 800; color: #fff; }
/* Logo wordmark en blanc (monochrome) dans le footer desktop */
.site-footer__logo {
    display: block;
    height: 36px;
    width: auto;
    max-width: 160px;
    object-fit: contain;
    object-position: left center;
    /* le SVG a des couleurs en dur -> on le force en blanc */
    filter: brightness(0) invert(1);
}
.site-footer__tagline { margin-top: 10px; color: #9aa1ad; font-size: 0.9rem; max-width: 280px; }
.site-footer__seo { margin-top: 8px; color: #9aa1ad; font-size: 0.82rem; line-height: 1.45; max-width: 280px; }
.site-footer h4 { color: #fff; font-size: 0.95rem; margin-bottom: 14px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 9px; }
.site-footer a { color: #cbd0da; font-size: 0.9rem; transition: var(--transition); }
.site-footer a:hover { color: var(--brand); }
.site-footer__bottom {
    max-width: var(--container);
    margin: 32px auto 0;
    padding: 22px 24px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
    color: #7c8492;
    font-size: 0.85rem;
    line-height: 1.5;
}

/* Barres fixes en bas — stabilisées au scroll (iOS / mobile) */
.spiitz-fixed-bottom-bar,
.app-bottom-nav,
.mobile-nav-custom,
.profil-mobile-actions,
.annonce-detail-mobile-actions {
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* ---------- 15. Navigation mobile (PWA app-like) ---------- */
/* Ancienne nav mobile (mobile-nav.php) : masquée sur la refonte (app-bottom-nav) */
body.app .mobile-nav { display: none !important; }

.app-bottom-nav { display: none; }

@media (max-width: 768px) {
    :root {
        --app-bottom-nav-h: 56px;
        --app-fab-gap: 14px;
    }
    .app-bottom-nav {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1100;
        display: flex;
        justify-content: space-around;
        align-items: stretch;
        min-height: calc(var(--app-bottom-nav-h, 64px) + env(safe-area-inset-bottom, 0px));
        background: rgba(255, 255, 255, 0.94);
        backdrop-filter: saturate(180%) blur(14px);
        -webkit-backdrop-filter: saturate(180%) blur(14px);
        border-top: 1px solid var(--border);
        padding-bottom: env(safe-area-inset-bottom, 0px);
        box-shadow: 0 -4px 20px rgba(16, 24, 40, 0.06);
    }
    .app-bottom-nav__item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0;
        padding: 10px 4px;
        color: var(--text-soft);
        font-size: 11px;
        font-weight: 600;
        transition: var(--transition);
        min-width: 0;
        overflow: hidden;
    }
    /* Temporaire : labels masqués, hauteur de barre conservée via min-height ci-dessus */
    .app-bottom-nav__item span {
        display: none;
    }
    .app-bottom-nav__item i {
        font-size: 19px;
        color: #4b5563;
    }
    .app-bottom-nav__item.active,
    .app-bottom-nav__item.active i,
    .app-bottom-nav__item.active span {
        color: var(--brand);
    }
    .app-bottom-nav__item:active { transform: scale(0.92); }

    /* Laisser la place à la barre du bas */
    body {
        padding-bottom: calc(var(--app-bottom-nav-h, 64px) + env(safe-area-inset-bottom, 0px));
        min-height: 100dvh;
    }

    /* Chat plein écran : pas de marge bas globale (sinon footer de saisie trop bas) */
    body.page-conversation,
    body.page-salon-chat {
        padding-bottom: 0 !important;
    }

    /* Pages avec barre d'action dédiée : masquer la nav globale du bas */
    .page-lieu-detail .app-bottom-nav,
    body.page-profil .app-bottom-nav { display: none !important; }
    body.page-profil { padding-bottom: 0; }

    /* Footer détaillé masqué sur mobile : feeling PWA (la nav du bas suffit) */
    .site-footer { display: none; }

    /* Retour salon actif — pas de marge extra : pill flottante discrète */
    body.has-active-salon-return:not(.page-salon-chat) {
        padding-bottom: calc(var(--app-bottom-nav-h, 64px) + env(safe-area-inset-bottom, 0px));
    }
    body.page-lieu-detail.has-active-salon-return,
    body.page-profil.has-active-salon-return {
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
}

/* ---------- Retour salon actif (mini-barre) ---------- */
.active-salon-return {
    position: fixed;
    z-index: 1110;
    display: none;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: linear-gradient(135deg, #111827 0%, #1f2937 52%, #111827 100%);
    box-shadow:
        0 10px 32px rgba(17, 24, 39, 0.28),
        0 0 0 1px rgba(255, 255, 255, 0.04) inset;
    transition: transform 0.22s ease, box-shadow 0.22s ease, opacity 0.22s ease;
    animation: activeSalonReturnIn 0.34s cubic-bezier(0.22, 1, 0.36, 1);
    overflow: hidden;
    max-width: calc(100vw - 24px);
}

.active-salon-return:hover {
    transform: translateY(-1px);
    box-shadow:
        0 14px 36px rgba(17, 24, 39, 0.34),
        0 0 0 1px rgba(255, 255, 255, 0.06) inset;
}

.active-salon-return:active { transform: translateY(0); }

.active-salon-return__pulse {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 0% 50%, rgba(255, 56, 92, 0.22), transparent 58%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.active-salon-return.has-news .active-salon-return__pulse { opacity: 1; }

.active-salon-return__icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 12px;
    background: rgba(255, 56, 92, 0.18);
    color: #ffb4c4;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
}

.active-salon-return.has-news .active-salon-return__icon {
    background: rgba(249, 115, 22, 0.22);
    color: #fdba74;
}

.active-salon-return__text {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.active-salon-return__label {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.58);
    line-height: 1.1;
}

.active-salon-return__name {
    font-size: 0.86rem;
    font-weight: 800;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.active-salon-return__meta {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding-left: 4px;
}

.active-salon-return__status {
    font-size: 0.72rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.72);
    white-space: nowrap;
}

.active-salon-return.has-news .active-salon-return__status {
    color: #fdba74;
}

.active-salon-return__chev {
    font-size: 0.68rem;
    opacity: 0.72;
}

.active-salon-return__dismiss {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    margin-left: 2px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.72);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.72rem;
    transition: background 0.15s ease, color 0.15s ease;
}

.active-salon-return__dismiss:hover {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
}

.app-bottom-nav__item.has-active-salon i {
    position: relative;
}

.app-bottom-nav__item.has-active-salon i::after {
    content: '';
    position: absolute;
    top: -1px;
    right: -5px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--brand);
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(255, 56, 92, 0.35);
}

.app-bottom-nav__item.has-active-salon-news i::after {
    background: #f97316;
    animation: activeSalonNavPulse 1.1s ease-in-out infinite;
}

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

@keyframes activeSalonNavPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.15); opacity: 0.75; }
}

@media (max-width: 768px) {
    .active-salon-return {
        left: 12px;
        right: auto;
        bottom: calc(var(--app-bottom-nav-h, 64px) + 10px + env(safe-area-inset-bottom, 0px));
        width: auto;
        max-width: min(168px, 52vw);
        padding: 5px 8px 5px 6px;
        gap: 7px;
        border-radius: 999px;
        background: rgba(17, 24, 39, 0.82);
        backdrop-filter: saturate(160%) blur(12px);
        -webkit-backdrop-filter: saturate(160%) blur(12px);
        border-color: rgba(255, 255, 255, 0.1);
        box-shadow: 0 6px 18px rgba(17, 24, 39, 0.22);
    }

    .active-salon-return__pulse { display: none; }

    .active-salon-return__icon {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        font-size: 0.82rem;
        position: relative;
    }

    .active-salon-return.has-news .active-salon-return__icon::after {
        content: '';
        position: absolute;
        top: -1px;
        right: -1px;
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: #f97316;
        border: 2px solid rgba(17, 24, 39, 0.9);
        box-shadow: 0 0 0 1px rgba(249, 115, 22, 0.35);
        animation: activeSalonNavPulse 1.1s ease-in-out infinite;
    }

    .active-salon-return__label,
    .active-salon-return__meta,
    .active-salon-return__dismiss {
        display: none !important;
    }

    .active-salon-return__text {
        flex: 1;
        min-width: 0;
    }

    .active-salon-return__name {
        font-size: 0.76rem;
        font-weight: 700;
        max-width: 108px;
    }

    body.page-lieu-detail .active-salon-return {
        bottom: calc(74px + 12px + env(safe-area-inset-bottom, 0px));
    }

    body.page-profil .active-salon-return {
        bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    }
}

@media (min-width: 769px) {
    .active-salon-return {
        top: 76px;
        right: 18px;
        left: auto;
        width: min(360px, calc(100vw - 36px));
        padding: 11px 12px 11px 14px;
        border-radius: 18px;
    }

    .active-salon-return__meta .active-salon-return__status { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .active-salon-return { animation: none; }
    .app-bottom-nav__item.has-active-salon-news i::after { animation: none; }
}

/* ---------- 16. Prompt d'installation PWA ---------- */
.pwa-install-prompt {
    position: fixed;
    z-index: 1200;
    left: 50%;
    bottom: calc(76px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    width: calc(100% - 24px);
    max-width: 360px;
    display: none;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-lg);
}
.pwa-install-prompt.is-visible,
.pwa-install-prompt:not([hidden]) {
    display: flex;
}
.pwa-install-prompt[hidden] { display: none !important; }
.pwa-install-close {
    position: absolute;
    top: 6px;
    right: 8px;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 13px;
    width: 24px;
    height: 24px;
    padding: 0;
    cursor: pointer;
}
.pwa-install-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--brand-soft);
    color: var(--brand);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}
.pwa-install-content { min-width: 0; flex: 1 1 auto; padding-right: 14px; }
.pwa-install-title {
    font-weight: 700;
    font-size: 0.8125rem;
    line-height: 1.25;
    color: var(--text);
}
.pwa-install-text,
.pwa-install-ios-hint {
    color: var(--text-soft);
    font-size: 0.75rem;
    line-height: 1.35;
    margin-top: 2px;
}
.pwa-install-ios-hint { margin-top: 4px; }
.pwa-install-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex-shrink: 0;
}
.pwa-install-btn {
    padding: 7px 12px;
    border-radius: var(--r-pill);
    background: var(--brand);
    color: #fff;
    border: none;
    font-weight: 600;
    font-size: 0.75rem;
    white-space: nowrap;
    cursor: pointer;
}
.pwa-later-btn {
    padding: 4px 8px;
    border-radius: var(--r-pill);
    background: transparent;
    color: var(--text-muted);
    border: none;
    font-weight: 600;
    font-size: 0.6875rem;
    white-space: nowrap;
    cursor: pointer;
}
@media (min-width: 769px) {
    .pwa-install-prompt {
        bottom: 24px;
        right: 24px;
        left: auto;
        transform: none;
    }
}

/* ============================================================
   PAGE LIEUX
   ============================================================ */
.lieux-main { padding: 24px 0 40px; min-height: 60vh; }
.lieux-content-wrapper { max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.lieux-search-section { margin-bottom: 0; }

/* Barre de filtres */
.lieux-filters-section { margin-bottom: 24px; }
.lieux-filters-top { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 16px; }
.lieux-mode-switch {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--r-pill);
}
.lieux-mode-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 16px;
    border: none;
    background: transparent;
    color: var(--text-soft);
    font-weight: 600;
    font-size: 0.9rem;
    border-radius: var(--r-pill);
    transition: var(--transition);
}
.lieux-mode-btn.active { background: var(--surface); color: var(--brand); box-shadow: var(--shadow-sm); }
/* ---------- Filtres UNIFIÉS (lieux / annonces / membres) ---------- */
.lieux-filters-container,
.annonces-filters-container,
.membres-filters-container {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
}
.lieux-filters-container::-webkit-scrollbar,
.annonces-filters-container::-webkit-scrollbar,
.membres-filters-container::-webkit-scrollbar { display: none; }
.lieux-view-toggle-btn,
.annonces-view-toggle-btn,
.membres-view-toggle-btn {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}
.lieux-view-toggle-btn:hover,
.annonces-view-toggle-btn:hover,
.membres-view-toggle-btn:hover { border-color: var(--brand); color: var(--brand); }
.lieux-filter-btn,
.annonces-filter-btn,
.annonces-type-tab,
.membres-filter-btn,
.salons-filter-btn,
.membres-modal-filters-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border-radius: var(--r-pill);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-soft);
    font-family: inherit;
    font-weight: 600;
    font-size: 0.82rem;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    transition: var(--transition);
    box-sizing: border-box;
    vertical-align: middle;
}
.lieux-filter-btn i,
.annonces-filter-btn i,
.annonces-type-tab i,
.membres-filter-btn i,
.salons-filter-btn i { font-size: 0.76rem; flex-shrink: 0; }
.lieux-filter-btn:hover,
.annonces-filter-btn:hover,
.annonces-type-tab:hover,
.membres-filter-btn:hover,
.salons-filter-btn:hover { border-color: var(--brand); color: var(--brand); }
.lieux-filter-btn.active,
.annonces-filter-btn.active,
.annonces-type-tab.active,
.membres-filter-btn.active,
.salons-filter-btn.active { background: var(--brand); color: #fff; border-color: var(--brand); }
.membres-modal-filters-btn { background: var(--brand); color: #fff; border-color: var(--brand); }
.membres-modal-filters-btn:hover { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; }
.lieux-filter-count,
.annonces-filter-count,
.annonces-type-tab__count,
.membres-filter-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--brand-soft);
    color: var(--brand-dark);
    padding: 1px 7px;
    border-radius: var(--r-pill);
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.2;
    flex-shrink: 0;
}
.lieux-filter-btn.active .lieux-filter-count,
.annonces-filter-btn.active .annonces-filter-count,
.annonces-type-tab.active .annonces-type-tab__count,
.membres-filter-btn.active .membres-filter-count { background: rgba(255, 255, 255, 0.28); color: #fff; }
.annonces-type-tab.active i { color: #fff; }
.lieux-place-distance {
    margin-left: 6px;
    padding: 1px 8px;
    border-radius: var(--r-pill);
    background: var(--brand-soft);
    color: var(--brand-dark);
    font-size: 0.75rem;
    font-weight: 600;
}

/* Vue carte */
.lieux-map-view { display: none; }
.lieux-map-shell {
    position: relative;
    border-radius: var(--r-md);
    overflow: hidden;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
}
#lieuxMap {
    height: 70vh;
    width: 100%;
    min-height: 280px;
}
#lieuxMap.leaflet-container {
    width: 100% !important;
    height: 100% !important;
    min-height: inherit;
}

/* Mode carte : pleine largeur ; desktop = carte plein écran + footer au scroll */
body.page-lieux--map-mode {
    overflow-x: hidden;
}
body.page-lieux--map-mode .lieux-main {
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 0;
    min-height: 0;
    overflow: hidden;
}
body.page-lieux--map-mode .lieux-content-wrapper {
    display: grid;
    grid-template-rows: auto auto 1fr;
    flex: 1;
    min-height: 0;
    min-width: 0;
    max-width: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
    overflow: hidden;
}
body.page-lieux--map-mode .lieux-search-section {
    flex-shrink: 0;
    padding: 8px 14px 0;
    margin-bottom: 0;
}
body.page-lieux--map-mode .lieux-filters-section {
    flex-shrink: 0;
    padding: 0 14px 8px;
    margin-bottom: 0;
}
body.page-lieux--map-mode .lieux-filters-top {
    margin-bottom: 8px;
}
body.page-lieux--map-mode .lieux-map-view {
    display: flex !important;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    min-width: 0;
    margin: 0;
    width: 100%;
    max-width: 100%;
    border: none;
    border-radius: 0;
    box-shadow: none;
    overflow: hidden;
}
body.page-lieux--map-mode .lieux-map-shell {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    min-width: 0;
    max-width: 100%;
    height: 100%;
    border: none;
    border-radius: 0;
    overflow: hidden;
}
body.page-lieux--map-mode #lieuxMap {
    flex: 1 1 auto;
    height: 100% !important;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 0 !important;
    overflow: hidden;
}
body.page-lieux--map-mode #lieuxMap.leaflet-container {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
}
@media (max-width: 768px) {
    body.page-lieux--map-mode #lieuxMap {
        min-height: 0 !important;
    }
    body.page-lieux--map-mode {
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: 100%;
        height: 100dvh;
        max-height: 100dvh;
        box-sizing: border-box;
        overflow: hidden;
        overflow-x: hidden;
    }
    body.page-lieux--map-mode .app-nav {
        flex-shrink: 0;
    }
    body.page-lieux--map-mode .lieux-main {
        flex: 1;
        min-height: 0;
        min-width: 0;
        max-width: 100%;
        width: 100%;
    }
    body.page-lieux--map-mode .lieux-search-section,
    body.page-lieux--map-mode .lieux-filters-section {
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
    }
    body.page-lieux--map-mode .lieux-filters-container {
        max-width: 100%;
    }
}
@media (min-width: 769px) {
    /* Page scrollable : carte plein écran, footer accessible en scrollant */
    body.page-lieux--map-mode {
        --lieux-map-desktop-chrome: 155px;
        display: block;
        height: auto;
        min-height: 0;
        overflow-x: hidden;
        overflow-y: auto;
    }
    body.page-lieux--map-mode .lieux-main {
        flex: none;
        min-height: 0;
        padding: 0;
        overflow: visible;
    }
    body.page-lieux--map-mode .lieux-content-wrapper {
        display: block;
        flex: none;
        min-height: 0;
        height: auto;
        overflow: visible;
    }
    body.page-lieux--map-mode .lieux-map-view {
        display: flex !important;
        flex-direction: column;
        height: calc(100dvh - var(--nav-h) - var(--lieux-map-desktop-chrome));
        min-height: calc(100dvh - var(--nav-h) - var(--lieux-map-desktop-chrome));
    }
    body.page-lieux--map-mode .lieux-map-shell {
        flex: 1;
        min-height: 100%;
        height: 100%;
    }
    body.page-lieux--map-mode #lieuxMap {
        flex: 1;
        height: 100% !important;
        min-height: 100% !important;
    }
    body.page-lieux--map-mode .site-footer {
        margin-top: 0;
    }
}

.lieux-map-recenter-btn {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 500;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: var(--r-pill);
    border: none;
    background: var(--brand);
    color: #fff;
    font-weight: 600;
    font-size: 0.85rem;
    box-shadow: var(--shadow-md);
}

/* ---------- Markers carte (épingles colorées par type) ---------- */
.custom-marker-container { background: transparent !important; border: none !important; }
.custom-marker {
    width: 38px;
    height: 38px;
    background: #6b7280;
    border: 3px solid #fff;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(16, 24, 40, 0.28);
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.custom-marker i {
    transform: rotate(45deg);
    color: #fff;
    font-size: 17px;
    line-height: 1;
}
.custom-marker:hover {
    transform: rotate(-45deg) scale(1.12);
    box-shadow: 0 7px 16px rgba(16, 24, 40, 0.34);
    z-index: 1000;
}

/* Couleur par type */
.custom-marker.club      { background: #e11d48; }
.custom-marker.sauna     { background: #db2777; }
.custom-marker.sexshop   { background: #c026d3; }
.custom-marker.toilettes { background: #0891b2; }
.custom-marker.foret     { background: #16a34a; }
.custom-marker.parc      { background: #65a30d; }
.custom-marker.plage     { background: #0ea5e9; }
.custom-marker.parking   { background: #ea580c; }
.custom-marker.rest-area { background: #f59e0b; }
.custom-marker.lake      { background: #0284c7; }
.custom-marker.city      { background: #6366f1; }
.custom-marker.other     { background: #6b7280; }

/* Premium : épingle dorée prioritaire */
.custom-marker.premium {
    background: linear-gradient(135deg, #fbbf24, #f59e0b) !important;
    border-color: #fff;
    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.5);
    width: 42px;
    height: 42px;
}
.custom-marker.premium i { font-size: 18px; }

/* Partenaire : épingle brand/violet */
.custom-marker.partner {
    background: linear-gradient(135deg, var(--brand, #ff385c), #7c3aed) !important;
    border-color: #fff;
    box-shadow: 0 4px 14px rgba(255, 56, 92, 0.45);
    width: 44px;
    height: 44px;
}
.custom-marker.partner i { font-size: 18px; }

/* ---------- Popup carte (carte moderne, entièrement cliquable) ---------- */
.custom-popup .leaflet-popup-content-wrapper {
    border-radius: 16px;
    padding: 0;
    overflow: hidden;
    box-shadow: 0 14px 36px rgba(16, 24, 40, 0.2);
    border: 1px solid var(--border, #ececf0);
}
.custom-popup .leaflet-popup-content {
    margin: 0;
    width: 264px !important;
}
.custom-popup .leaflet-popup-tip { box-shadow: 0 14px 36px rgba(16, 24, 40, 0.2); }
.custom-popup .leaflet-popup-close-button {
    width: 26px;
    height: 26px;
    top: 8px;
    right: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: #6b7280;
    font-size: 18px;
    line-height: 24px;
    text-align: center;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
    z-index: 2;
}
.custom-popup .leaflet-popup-close-button:hover { color: var(--brand, #ff385c); background: #fff; }

a.lieux-map-popup {
    display: block;
    text-decoration: none !important;
    color: var(--text, #1d1d22);
    padding: 14px 14px 12px;
    background: #fff;
    cursor: pointer;
    transition: background 0.15s ease;
}
a.lieux-map-popup:hover { background: #fafafb; }
.lieux-map-popup__top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; padding-right: 22px; }
.lieux-map-popup__icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 16px;
    background: #6b7280;
}
.lieux-map-popup__icon.club      { background: #e11d48; }
.lieux-map-popup__icon.sauna     { background: #db2777; }
.lieux-map-popup__icon.sexshop   { background: #c026d3; }
.lieux-map-popup__icon.toilettes { background: #0891b2; }
.lieux-map-popup__icon.foret     { background: #16a34a; }
.lieux-map-popup__icon.parc      { background: #65a30d; }
.lieux-map-popup__icon.plage     { background: #0ea5e9; }
.lieux-map-popup__icon.parking   { background: #ea580c; }
.lieux-map-popup__icon.rest-area { background: #f59e0b; }
.lieux-map-popup__icon.lake      { background: #0284c7; }
.lieux-map-popup__icon.city      { background: #6366f1; }
.lieux-map-popup__icon.premium   { background: linear-gradient(135deg, #fbbf24, #f59e0b); }
.lieux-map-popup__head { min-width: 0; flex: 1; }
.lieux-map-popup__title {
    margin: 0;
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--text, #1d1d22);
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.lieux-map-popup__type {
    font-size: 0.78rem;
    color: var(--text-soft, #717182);
    font-weight: 500;
}
.lieux-map-popup__premium {
    flex-shrink: 0;
    color: #f59e0b;
    font-size: 0.95rem;
}
.lieux-map-popup__meta {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
}
.lieux-map-popup__addr,
.lieux-map-popup__ads {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.82rem;
    color: var(--text-soft, #717182);
    min-width: 0;
}
.lieux-map-popup__addr i,
.lieux-map-popup__ads i { color: var(--brand, #ff385c); width: 14px; text-align: center; flex-shrink: 0; }
.lieux-map-popup__addr span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.lieux-map-popup__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 10px 14px;
    border-radius: 12px;
    background: var(--brand, #ff385c);
    color: #fff;
    font-weight: 600;
    font-size: 0.85rem;
    transition: background 0.15s ease;
}
a.lieux-map-popup:hover .lieux-map-popup__cta { background: var(--brand-dark, #e31c5f); }
.lieux-map-popup.premium .lieux-map-popup__cta {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}
.lieux-map-popup__icon.partner { background: linear-gradient(135deg, var(--brand, #ff385c), #7c3aed); }
.lieux-map-popup.partner { border-top: 3px solid transparent; border-image: linear-gradient(90deg, var(--brand, #ff385c), #7c3aed) 1; }
.lieux-map-popup__partner {
    flex-shrink: 0;
    color: var(--brand, #ff385c);
    font-size: 0.95rem;
}

/* ---------- Modale (générique overlay) ---------- */
.lieux-filters-modal,
.modal-propose {
    position: fixed;
    inset: 0;
    z-index: 1300;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.lieux-filters-modal.active,
.modal-propose.active { display: flex; }
.lieux-filters-modal-backdrop,
.modal-propose-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(16, 24, 40, 0.55);
    backdrop-filter: blur(2px);
}
.lieux-filters-modal-content,
.modal-propose-content {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 520px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}
.lieux-filters-modal-header {
    position: relative;
    padding: 20px 22px;
    border-bottom: 1px solid var(--border);
}
.lieux-filters-modal-header h3 { font-size: 1.2rem; }
.lieux-filters-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}
.lieux-filters-modal-close:hover { border-color: var(--brand); color: var(--brand); }
.lieux-filters-modal-body { padding: 22px; overflow-y: auto; }
.lieux-filters-modal-footer {
    display: flex;
    gap: 12px;
    padding: 18px 22px;
    border-top: 1px solid var(--border);
}
.lieux-filter-group { margin-bottom: 22px; }
.lieux-filter-group h4 { font-size: 0.95rem; margin-bottom: 12px; }
.lieux-filter-options { display: flex; flex-wrap: wrap; gap: 10px; }
.lieux-filter-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: 1px solid var(--border);
    border-radius: var(--r-pill);
    cursor: pointer;
    font-size: 0.9rem;
    transition: var(--transition);
}
.lieux-filter-checkbox:hover { border-color: var(--brand); }
.lieux-filter-checkbox input { accent-color: var(--brand); }
.lieux-filter-range { display: flex; align-items: center; gap: 14px; }
.lieux-filter-range input[type="range"] { flex: 1; accent-color: var(--brand); }
.lieux-btn-reset-filters,
.lieux-btn-apply-filters {
    flex: 1;
    padding: 12px;
    border-radius: var(--r-pill);
    font-weight: 600;
    border: 1px solid var(--border);
    transition: var(--transition);
}
.lieux-btn-reset-filters { background: var(--surface); color: var(--text); }
.lieux-btn-apply-filters { background: var(--brand); color: #fff; border-color: var(--brand); }

/* ---------- En-tête modal SPIITZ (harmonisé) ---------- */
.spiitz-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 13px 16px;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(135deg, #fff5f7 0%, #ffe8ee 55%, #fff 100%);
    flex-shrink: 0;
}
.spiitz-modal-header__brand {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    flex: 1 1 auto;
}
.spiitz-modal-eyebrow {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--brand);
}
.spiitz-modal-header h3,
.spiitz-modal-header__title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--text);
    line-height: 1.2;
}
.spiitz-modal-header__sub {
    margin: 1px 0 0;
    font-size: 0.76rem;
    font-weight: 500;
    color: var(--text-soft);
    line-height: 1.25;
}
.spiitz-modal-close {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-soft);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition);
    padding: 0;
    line-height: 1;
}
.spiitz-modal-close:hover {
    border-color: var(--brand);
    color: var(--brand);
    background: #fff;
}

/* ---------- Assistant "Proposer un lieu" ---------- */
.modal-propose-content { max-width: 560px; }
.modal-propose-progress {
    padding: 12px 20px 14px;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}
.modal-propose-steps { display: flex; align-items: center; gap: 8px; }
.modal-propose-step-circle {
    flex: 1;
    height: 6px;
    border-radius: var(--r-pill);
    background: var(--border);
    color: transparent;
    font-size: 0;
    transition: var(--transition);
}
.modal-propose-step-circle.active { background: var(--brand); }
.modal-propose-form { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.modal-propose-form-body { padding: 22px; overflow-y: auto; }
.modal-propose-step { display: none; }
.modal-propose-step.active { display: block; animation: fadeInStep 0.25s ease; }
@keyframes fadeInStep { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.modal-propose-form-group { margin-bottom: 18px; }
.modal-propose-form-group > label {
    display: block;
    margin-bottom: 7px;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text);
}
.modal-propose-form-group input[type="text"],
.modal-propose-form-group input[type="url"],
.modal-propose-form-group select,
.modal-propose-form-group textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    font-family: inherit;
    font-size: 0.95rem;
    color: var(--text);
    background: var(--surface);
    transition: var(--transition);
}
.modal-propose-form-group input:focus,
.modal-propose-form-group select:focus,
.modal-propose-form-group textarea:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-soft);
}
.modal-propose-radio-group { display: flex; gap: 10px; flex-wrap: wrap; }
.modal-propose-radio-item { flex: 1; min-width: 90px; }
.modal-propose-radio-item input { position: absolute; opacity: 0; }
.modal-propose-radio-item label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    cursor: pointer;
    font-weight: 600;
    font-size: 0.85rem;
    transition: var(--transition);
}
.modal-propose-radio-item label i { font-size: 1.3rem; color: var(--text-soft); }
.modal-propose-radio-item input:checked + label {
    border-color: var(--brand);
    background: var(--brand-soft);
    color: var(--brand-dark);
}
.modal-propose-radio-item input:checked + label i { color: var(--brand); }
.modal-propose-checkbox-group { display: flex; flex-direction: column; gap: 12px; }
.modal-propose-checkbox-item { display: flex; }
.modal-propose-checkbox-item input { position: absolute; opacity: 0; }
.modal-propose-checkbox-item label {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    cursor: pointer;
    width: 100%;
    transition: var(--transition);
}
.modal-propose-checkbox-item label i { color: var(--text-muted); font-size: 1.2rem; margin-top: 2px; }
.modal-propose-checkbox-item label div { display: flex; flex-direction: column; }
.modal-propose-checkbox-item label strong { font-size: 0.95rem; }
.modal-propose-checkbox-item label span { color: var(--text-soft); font-size: 0.83rem; }
.modal-propose-checkbox-item input:checked + label { border-color: var(--brand); background: var(--brand-soft); }
.modal-propose-checkbox-item input:checked + label i { color: var(--brand); }
.modal-propose-photo-upload {
    border: 2px dashed var(--border);
    border-radius: var(--r-md);
    padding: 32px 18px;
    text-align: center;
    cursor: pointer;
    transition: var(--transition);
}
.modal-propose-photo-upload:hover { border-color: var(--brand); background: var(--brand-soft); }
.modal-propose-photo-upload.dragover { border-color: var(--brand); background: var(--brand-soft); }
.modal-propose-photo-upload i {
    display: block;
    font-size: 2rem;
    color: var(--text-muted);
    margin-bottom: 0.75rem;
}
.modal-propose-photo-upload p {
    margin: 0;
    color: var(--text-soft);
    font-weight: 500;
    font-size: 0.9rem;
}
.modal-propose-photo-upload .modification-photo-upload__hint,
.place-modification-modal .modification-photo-upload__hint {
    margin-top: 0.5rem;
    color: var(--text-muted);
    font-weight: 400;
    font-size: 0.8rem;
}
.place-modification-modal .modification-photo-input {
    display: none;
}
.place-modification-modal .modification-photo-upload {
    margin-top: 4px;
}
.place-modification-modal .modification-photo-upload__note {
    margin: 0.5rem 0 0;
    color: var(--text-muted);
    font-size: 0.8rem;
}

/* --- SEO : titres de page listing --- */
.page-seo-heading {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.header-desktop-back-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
}

/* Lien crawlable sur les cartes annonces */
.annonce-card {
    position: relative;
}
.annonce-card__detail-link {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
}
.annonce-card .annonce-actions,
.annonce-card .annonce-footer-actions,
.annonce-card .annonce-boost-pin,
.annonce-card .status-badge {
    position: relative;
    z-index: 2;
}

/* Page contact */
.contact-main {
    max-width: 720px;
    margin: 0 auto;
    padding: 24px 16px 48px;
}
.contact-wrapper {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.contact-intro {
    margin: 0;
    color: var(--text-soft);
    line-height: 1.6;
}
.contact-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 20px;
}
.contact-card h2 {
    margin: 0 0 12px;
    font-size: 1.05rem;
}
.contact-card a {
    color: var(--brand);
    font-weight: 600;
}
.contact-note {
    margin: 12px 0 0;
    font-size: 0.875rem;
    color: var(--text-muted);
}
.contact-back a {
    color: var(--text-soft);
    font-size: 0.9rem;
}

/* ---------- Pages compte (notifications, alertes, confidentialité, blocages) ---------- */
.account-hub-main {
    max-width: 720px;
    margin: 0 auto;
    padding: 24px 16px calc(56px + env(safe-area-inset-bottom, 0px));
    min-height: 55vh;
}
.account-hub-wrapper {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.account-hub-header {
    padding: 8px 0 4px;
    background:
        radial-gradient(900px 280px at 50% -20%, var(--brand-soft), transparent 65%);
}
.account-hub-eyebrow {
    margin: 0;
    color: var(--brand);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.account-hub-title {
    margin: 10px 0 0;
    font-size: clamp(1.45rem, 3.2vw, 2rem);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.15;
    color: var(--text);
}
.account-hub-lead {
    margin: 10px 0 0;
    color: var(--text-soft);
    line-height: 1.6;
    font-size: 0.95rem;
    max-width: 36em;
}
.account-hub-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}
.account-hub-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.account-hub-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: var(--r-pill);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-soft);
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
    transition: var(--transition);
}
.account-hub-nav-link:hover {
    border-color: var(--brand);
    color: var(--brand);
}
.account-hub-nav-link.is-active {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}
.account-hub-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 20px;
    box-shadow: var(--shadow-sm);
}
.account-hub-card + .account-hub-card {
    margin-top: 0;
}
.account-hub-card h3 {
    margin: 0 0 8px;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text);
}
.account-hub-card-desc {
    margin: 0 0 16px;
    font-size: 0.875rem;
    color: var(--text-muted);
    line-height: 1.55;
}
.account-hub-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.account-hub-filter {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    border-radius: var(--r-pill);
    border: 1px solid var(--border);
    background: var(--bg-muted, #f3f4f6);
    color: var(--text-soft);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}
.account-hub-filter:hover {
    border-color: var(--brand);
    color: var(--brand);
}
.account-hub-filter.is-active {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}
.account-hub-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid var(--border);
}
.account-hub-toggle-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
.account-hub-toggle-label {
    flex: 1;
    min-width: 0;
}
.account-hub-toggle-label strong {
    display: block;
    font-size: 0.9375rem;
    color: var(--text);
}
.account-hub-toggle-label small {
    display: block;
    margin-top: 4px;
    font-size: 0.8125rem;
    color: var(--text-muted);
    line-height: 1.45;
}
.account-hub-meta {
    margin: 8px 0 0;
    font-size: 0.8125rem;
    color: var(--text-muted);
}
.account-hub-empty {
    text-align: center;
    padding: 48px 20px;
    background: var(--surface);
    border: 1px dashed var(--border);
    border-radius: var(--r-md);
    color: var(--text-muted);
}
.account-hub-empty i {
    display: block;
    font-size: 2rem;
    color: var(--brand);
    opacity: 0.55;
    margin-bottom: 12px;
}
.account-hub-empty p {
    margin: 0;
    font-size: 0.9375rem;
}
.account-hub-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.account-hub-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid var(--border);
}
.account-hub-list-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
.account-hub-list-item strong {
    font-size: 0.9375rem;
    color: var(--text);
}
.account-hub-premium-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    border-radius: var(--r-md);
    background: var(--brand-soft);
    border: 1px solid rgba(255, 56, 92, 0.22);
    color: var(--text);
    font-size: 0.9375rem;
    line-height: 1.5;
}
.account-hub-premium-banner a {
    color: var(--brand);
    font-weight: 700;
}
.account-hub-form-row {
    margin-bottom: 14px;
}
.account-hub-form-row label {
    display: block;
    margin-bottom: 6px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-soft);
}
.account-hub-form-row input[type="text"],
.account-hub-form-row textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--bg);
    color: var(--text);
    font: inherit;
    font-size: 0.9375rem;
}
.account-hub-form-row textarea {
    resize: vertical;
    min-height: 72px;
}
.account-hub-template-row {
    padding: 14px 0;
    border-bottom: 1px solid var(--border);
}
.account-hub-template-row:last-child {
    border-bottom: none;
}
.account-hub-check {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    cursor: pointer;
}
.account-hub-check input {
    margin-top: 3px;
    accent-color: var(--brand);
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}
.account-hub-check span {
    font-size: 0.9375rem;
    line-height: 1.45;
    color: var(--text);
}
.account-hub-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}
.account-hub-back {
    margin: 8px 0 0;
}
.account-hub-back a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text-soft);
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    transition: var(--transition);
}
.account-hub-back a:hover {
    color: var(--brand);
}
.account-hub-notifications .notification-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    margin-bottom: 10px;
    cursor: pointer;
    transition: var(--transition);
    box-shadow: var(--shadow-sm);
}
.account-hub-notifications .notification-item:hover {
    border-color: rgba(255, 56, 92, 0.35);
    box-shadow: var(--shadow-md);
}
.account-hub-notifications .notification-item.unread {
    border-left: 3px solid var(--brand);
    background: linear-gradient(90deg, var(--brand-soft) 0%, var(--surface) 28%);
}
.account-hub-notifications .notification-item-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--brand-soft);
    color: var(--brand);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.account-hub-notifications .notification-content {
    flex: 1;
    min-width: 0;
}
.account-hub-notifications .notification-title {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--text);
    margin-bottom: 4px;
}
.account-hub-notifications .notification-message {
    font-size: 0.8125rem;
    color: var(--text-soft);
    line-height: 1.45;
}
.account-hub-notifications .notification-time {
    margin-top: 6px;
    font-size: 0.75rem;
    color: var(--text-muted);
}
.account-hub-load-more {
    text-align: center;
    margin-top: 8px;
}
.account-hub-link-inline {
    margin: 0;
}
.account-hub-link-inline a {
    color: var(--brand);
    font-weight: 600;
    font-size: 0.9375rem;
}
.contact-faq-item {
    margin-bottom: 12px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 12px;
}
.contact-faq-item:last-child {
    margin-bottom: 0;
    border-bottom: none;
    padding-bottom: 0;
}
.contact-faq-item summary {
    cursor: pointer;
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--text);
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.contact-faq-item summary::-webkit-details-marker {
    display: none;
}
.contact-faq-item summary::after {
    content: '+';
    color: var(--brand);
    font-size: 1.1rem;
    font-weight: 700;
    flex-shrink: 0;
}
.contact-faq-item[open] summary::after {
    content: '−';
}
.contact-faq-item p {
    margin: 10px 0 0;
    font-size: 0.875rem;
    color: var(--text-soft);
    line-height: 1.55;
}
.contact-landing-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.contact-landing-links a {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    border-radius: var(--r-pill);
    border: 1px solid var(--border);
    background: var(--bg-muted, #f3f4f6);
    color: var(--text-soft);
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
    transition: var(--transition);
}
.contact-landing-links a:hover {
    border-color: var(--brand);
    color: var(--brand);
}
.landing-cta-card .account-hub-actions,
.landing-cta-actions {
    margin-top: 0;
}
.account-hub-card-desc a {
    color: var(--brand);
    font-weight: 600;
}
.account-hub-toolbar .btn,
.account-hub-actions .btn {
    font-size: 0.875rem;
}
.btn-sm {
    padding: 7px 14px;
    font-size: 0.8125rem;
}
html[data-theme="dark"] .account-hub-filter {
    background: var(--surface);
}
html[data-theme="dark"] .account-hub-notifications .notification-item.unread {
    background: linear-gradient(90deg, rgba(255, 56, 92, 0.12) 0%, var(--surface) 35%);
}
html[data-theme="dark"] .account-hub-premium-banner {
    background: rgba(255, 56, 92, 0.12);
    border-color: rgba(255, 56, 92, 0.28);
}

.modal-propose-photo-preview { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.modal-propose-photo-preview img { width: 72px; height: 72px; object-fit: cover; border-radius: var(--r-sm); }
.modal-propose-buttons {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 22px;
    border-top: 1px solid var(--border);
}
.modal-propose-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 22px;
    border-radius: var(--r-pill);
    font-weight: 600;
    font-size: 0.9rem;
    border: 1px solid var(--border);
    transition: var(--transition);
}
.modal-propose-btn-secondary { background: var(--surface); color: var(--text); }
.modal-propose-btn-secondary:hover { border-color: var(--text-muted); }
.modal-propose-btn-primary { background: var(--brand); color: #fff; border-color: var(--brand); }
.modal-propose-btn-primary:hover { background: var(--brand-dark); }

/* FAB mobile "Proposer un lieu" */
.lieux-fab-mobile {
    position: fixed;
    right: 16px;
    bottom: calc(64px + 14px + env(safe-area-inset-bottom, 0px));
    z-index: 1115;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: var(--brand);
    color: #fff;
    font-size: 1.05rem;
    box-shadow: var(--shadow-lg);
    cursor: pointer;
    transition: var(--transition);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.lieux-fab-mobile:hover { background: var(--brand-dark); transform: translateY(-2px); }
.lieux-fab-mobile:active { transform: scale(0.95); }
/* Desktop : pas de barre de navigation en bas -> FAB calé en bas à droite, un peu plus grand */
@media (min-width: 769px) {
    .lieux-fab-mobile {
        right: 32px;
        bottom: 32px;
        width: 60px;
        height: 60px;
        font-size: 1.45rem;
        box-shadow: 0 12px 28px rgba(255, 56, 92, 0.4);
    }
}
.mobile-only { display: none; }
@media (max-width: 768px) {
    .mobile-only { display: inline-flex; align-items: center; justify-content: center; }
    .lieux-fab-mobile { display: inline-flex; align-items: center; justify-content: center; }
    body:not(.page-lieux--map-mode) #lieuxMap { height: 64vh; }
}

/* ============================================================
   BARRE DE RECHERCHE GLOBALE (composant partagé, app.css)
   Activée via $use_app_css = true avant l'include search-bar.php
   ============================================================ */
.global-search-container {
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
}
.global-search-wrapper {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 6px 6px 6px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-pill);
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}
.global-search-wrapper:hover { box-shadow: var(--shadow-md); border-color: #dcdce2; }
.global-search-wrapper:focus-within { box-shadow: 0 0 0 3px var(--brand-soft), var(--shadow-md); border-color: var(--brand); }

.global-search-type-selector { flex-shrink: 0; position: relative; }
.global-search-type-select {
    appearance: none;
    -webkit-appearance: none;
    border: none;
    background: var(--bg);
    font-family: inherit;
    font-weight: 700;
    font-size: 0.88rem;
    color: var(--text);
    padding: 10px 30px 10px 16px;
    border-radius: var(--r-pill);
    cursor: pointer;
    outline: none;
    transition: var(--transition);
}
.global-search-type-select:hover { background: var(--brand-soft); color: var(--brand-dark); }
/* Chevron du sélecteur */
.global-search-type-selector::after {
    content: "\f078";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 0.62rem;
    color: var(--text-muted);
    position: absolute;
    right: 13px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

.global-search-input-container {
    flex: 1;
    display: flex;
    align-items: center;
    min-width: 0;
}
.global-search-icon { color: var(--text-muted); margin: 0 6px 0 12px; font-size: 0.95rem; }
.global-search-input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    padding: 11px 8px;
    font-family: inherit;
    font-size: 0.95rem;
    color: var(--text);
}
.global-search-input::placeholder { color: var(--text-muted); }
.global-search-reset-inline {
    display: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: var(--bg);
    color: var(--text-soft);
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    flex-shrink: 0;
}
.global-search-reset-inline.show { display: flex !important; }

.global-search-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.global-search-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: none;
    background: var(--brand);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    transition: var(--transition);
}
.global-search-btn:hover { background: var(--brand-dark); transform: scale(1.05); }

/* Suggestions de villes */
.global-city-suggestions-modal { display: none; }
.global-city-suggestions-content {
    z-index: 1400;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    max-height: 320px;
    overflow-y: auto;
}
.global-city-suggestion {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    cursor: pointer;
    transition: var(--transition);
}
.global-city-suggestion:hover,
.global-city-suggestion.active { background: var(--bg); }
.global-city-suggestion-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--brand-soft);
    color: var(--brand);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.global-city-suggestion-main { font-weight: 600; font-size: 0.92rem; }
.global-city-suggestion-secondary { color: var(--text-soft); font-size: 0.8rem; }

/* Modale de géolocalisation */
.global-location-modal {
    position: fixed;
    inset: 0;
    z-index: 1300;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(16, 24, 40, 0.55);
    backdrop-filter: blur(2px);
}
.global-location-modal.active { display: flex; }
.global-location-modal-content {
    width: 100%;
    max-width: 440px;
    background: var(--surface);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}
.global-location-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 22px;
    border-bottom: 1px solid var(--border);
}
.global-location-modal-header h3 { font-size: 1.15rem; }
.global-location-modal-close {
    background: none;
    border: none;
    color: var(--text-soft);
    font-size: 1.1rem;
    cursor: pointer;
}
.global-location-modal-body { padding: 22px; }
.global-location-modal-body h4 { font-size: 1rem; margin-bottom: 8px; }
.global-location-modal-body p { color: var(--text-soft); font-size: 0.92rem; }
.global-location-modal-footer {
    display: flex;
    gap: 12px;
    padding: 18px 22px;
    border-top: 1px solid var(--border);
}
.global-location-btn-cancel,
.global-location-btn-activate {
    flex: 1;
    padding: 12px;
    border-radius: var(--r-pill);
    font-weight: 600;
    border: 1px solid var(--border);
    transition: var(--transition);
}
.global-location-btn-cancel { background: var(--surface); color: var(--text); }
.global-location-btn-activate { background: var(--brand); color: #fff; border-color: var(--brand); }

@media (max-width: 768px) {
    .global-search-wrapper { padding: 4px; gap: 3px; }
    .global-search-type-select { padding: 6px 22px 6px 9px; font-size: 0.74rem; }
    .global-search-type-selector::after { right: 9px; font-size: 0.55rem; }
    .global-search-icon { font-size: 0.8rem; margin: 0 4px 0 8px; }
    .global-search-input { font-size: 0.8rem; padding: 7px 4px; }
    .global-search-reset-inline { width: 24px; height: 24px; font-size: 0.72rem; }
    .global-search-btn { width: 32px; height: 32px; font-size: 0.78rem; }
    .page-membres .global-search-container,
    .page-lieux .global-search-container,
    .page-annonces .global-search-container { margin: 4px auto 18px; }
}

/* ============================================================
   PAGE LIEU-DETAIL
   ============================================================ */
.lieu-detail-page-main { padding-bottom: 40px; }
.lieu-detail-page-content-wrapper { max-width: var(--container); margin: 0 auto; padding: 0 24px; }

/* Sous-header retour + actions */
.header-desktop-back { padding: 18px 0 6px; }
.header-desktop-back-content {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    gap: 16px;
}
.header-desktop-back-content h1,
.header-desktop-back-title { font-size: 1.1rem; font-weight: 700; flex: 1; margin: 0; }
.header-desktop-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: var(--r-pill);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font-weight: 600;
    font-size: 0.9rem;
    transition: var(--transition);
}
.header-desktop-back-btn:hover { border-color: var(--brand); color: var(--brand); }
.header-desktop-back-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.header-desktop-back-main-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: var(--r-pill);
    border: none;
    background: var(--brand);
    color: #fff;
    font-weight: 600;
    font-size: 0.88rem;
    transition: var(--transition);
}
.header-desktop-back-main-btn:hover { background: var(--brand-dark); }
.header-desktop-back-action-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-soft);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}
.header-desktop-back-action-btn:hover { border-color: var(--brand); color: var(--brand); }
.header-desktop-back-action-btn.disabled { opacity: 0.45; cursor: not-allowed; }

/* Hero */
.lieu-detail-page-hero {
    position: relative;
    height: 360px;
    border-radius: var(--r-lg);
    overflow: hidden;
    margin-top: 12px;
    background: linear-gradient(135deg, #f3f4f6, #e5e7eb);
}
.lieu-detail-page-hero-image { width: 100%; height: 100%; object-fit: cover; }
.lieu-detail-page-hero-icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 3rem;
    z-index: 1;
}
.lieu-detail-page-hero-icon i { font-size: 1em; line-height: 1; }
.lieu-detail-page-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.45), transparent 45%);
}
.lieu-detail-page-place-type {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 4;
    background: rgba(255, 255, 255, 0.92);
    color: var(--text);
    padding: 7px 14px;
    border-radius: var(--r-pill);
    font-weight: 600;
    font-size: 0.85rem;
    backdrop-filter: blur(4px);
}
.lieu-detail-page-rating-badge {
    position: absolute;
    top: 16px;
    left: auto;
    right: 16px;
    transform: none;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.92);
    color: var(--text);
    padding: 7px 14px;
    border-radius: var(--r-pill);
    font-weight: 700;
    font-size: 0.85rem;
    backdrop-filter: blur(4px);
}
.lieu-detail-page-rating-badge i { color: var(--gold); }
.lieu-detail-premium-badge {
    position: absolute;
    top: auto;
    bottom: 16px;
    left: 16px;
    right: auto;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--gold);
    color: #fff;
    padding: 7px 13px;
    border-radius: var(--r-pill);
    font-weight: 700;
    font-size: 0.8rem;
}
.lieu-detail-partner-badge {
    position: absolute;
    top: auto;
    bottom: 16px;
    left: 16px;
    right: auto;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, var(--brand), #7c3aed);
    color: #fff;
    padding: 7px 13px;
    border-radius: var(--r-pill);
    font-weight: 700;
    font-size: 0.8rem;
    box-shadow: 0 4px 14px rgba(255, 56, 92, 0.35);
}
.lieu-detail-page-action-buttons {
    position: absolute;
    bottom: 16px;
    right: 16px;
    z-index: 4;
    display: flex;
    gap: 10px;
}
.lieu-detail-page-action-btn-hero {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.92);
    color: var(--text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
    transition: var(--transition);
}
.lieu-detail-page-action-btn-hero:hover { background: #fff; color: var(--brand); transform: scale(1.05); }

/* Contenu 2 colonnes */
.lieu-detail-page-content {
    display: grid;
    grid-template-columns: 1fr 420px;
    gap: 32px;
    margin-top: 28px;
}
.lieu-detail-page-sidebar-mobile { display: none; }
.lieu-detail-page-title-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    flex-wrap: nowrap;
    width: 100%;
}
.lieu-detail-page-title {
    font-size: 1.8rem;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
}
.lieu-detail-page-orientation-badge {
    flex: 0 0 auto;
    margin-left: auto;
    align-self: center;
    padding: 5px 12px;
    border-radius: var(--r-pill);
    background: var(--brand-soft);
    color: var(--brand-dark);
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}
.lieu-detail-page-location { display: flex; align-items: center; gap: 7px; color: var(--text-soft); margin-top: 8px; }
.lieu-detail-page-location i { color: var(--brand); }
.lieu-detail-page-info-title { font-size: 1.15rem; font-weight: 700; margin-bottom: 12px; }
.lieu-detail-page-description { margin-top: 28px; }
.lieu-detail-page-description-text { color: var(--text); line-height: 1.7; }

/* Widget partenaire — section intégration site */
.lieu-partner-widget-embed {
    margin-top: 28px;
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}
.lieu-partner-widget-embed__intro {
    margin: 0 0 14px;
    color: var(--text-soft);
    font-size: 0.9rem;
    line-height: 1.5;
}
.lieu-partner-widget-embed__variants {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}
.lieu-partner-widget-embed__variant {
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-soft);
    font: inherit;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 5px 10px;
    border-radius: var(--r-pill);
    cursor: pointer;
    transition: var(--transition);
    line-height: 1.2;
}
.lieu-partner-widget-embed__variant.is-active,
.lieu-partner-widget-embed__variant:hover {
    border-color: var(--brand);
    color: var(--brand-dark);
    background: var(--brand-soft);
}
.lieu-partner-widget-embed__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
}
.lieu-partner-widget-embed__toolbar-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
}
.lieu-partner-widget-embed__themes {
    display: inline-flex;
    gap: 4px;
    padding: 3px;
    border-radius: var(--r-pill);
    background: var(--surface-2, #f3f4f6);
    border: 1px solid var(--border);
}
.lieu-partner-widget-embed__theme-btn {
    border: none;
    background: transparent;
    color: var(--text-soft);
    font: inherit;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 5px 10px;
    border-radius: var(--r-pill);
    cursor: pointer;
    transition: var(--transition);
    line-height: 1.2;
}
.lieu-partner-widget-embed__theme-btn.is-active {
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-sm);
}
.lieu-partner-widget-embed__tabs {
    display: inline-flex;
    gap: 6px;
    padding: 4px;
    border-radius: var(--r-pill);
    background: var(--surface-2, #f3f4f6);
}
.lieu-partner-widget-embed__tab {
    border: none;
    background: transparent;
    color: var(--text-soft);
    font: inherit;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 5px 10px;
    border-radius: var(--r-pill);
    cursor: pointer;
    transition: var(--transition);
    line-height: 1.2;
}
.lieu-partner-widget-embed__tab.is-active {
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-sm);
}
.lieu-partner-widget-embed__layout {
    display: grid;
    grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}
.lieu-partner-widget-embed__preview-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    margin-bottom: 10px;
    align-self: flex-start;
    width: 100%;
}
.lieu-partner-widget-embed__preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 18px 14px;
    border-radius: var(--r-md);
    background: linear-gradient(180deg, #f3f4f6 0%, #eceef2 100%);
    border: 1px solid var(--border);
}
.lieu-partner-widget-embed__preview iframe {
    width: 100%;
    border: 0;
    display: block;
    background: transparent;
    margin: 0 auto;
}
.lieu-partner-widget-embed__code-wrap {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}
.lieu-partner-widget-embed__code {
    width: 100%;
    min-height: 88px;
    max-height: 120px;
    resize: none;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--surface-2, #f8f9fb);
    color: var(--text-soft);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.62rem;
    line-height: 1.35;
    padding: 8px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    word-break: break-all;
}
.lieu-partner-widget-embed__code:not(.is-active) {
    display: none;
}
.lieu-partner-widget-embed__copy {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: none;
    border-radius: var(--r-pill);
    background: var(--brand);
    color: #fff;
    font: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 7px 12px;
    cursor: pointer;
    transition: var(--transition);
}
.lieu-partner-widget-embed__copy:hover {
    background: var(--brand-dark);
}
@media (max-width: 900px) {
    .lieu-partner-widget-embed__layout {
        grid-template-columns: 1fr;
    }
    .lieu-partner-widget-embed__preview {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}

.lieu-detail-page-photos-section { margin-top: 28px; }
.lieu-detail-page-photos-sidebar { display: none; margin-top: 0; }
.lieu-detail-page-map-infos-row { display: none; }
.lieu-detail-page-map-main { margin-top: 0; }
.lieu-detail-page-map-section .lieu-map-container { margin-top: 0; }
.lieu-detail-page-map-infos-row .lieu-detail-page-info-section--pratiques { margin-bottom: 0; }
.lieu-map-container {
    border: 1px solid var(--border);
    width: 100%;
    height: 220px;
    max-height: 220px;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    display: block;
    box-sizing: border-box;
}
.lieu-map-container.leaflet-container {
    width: 100% !important;
    height: 220px !important;
    max-height: 220px !important;
}
.lieu-detail-page-photos-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.lieu-detail-page-photos-grid img { border: 1px solid var(--border); transition: var(--transition); }
.lieu-detail-page-photos-grid img:hover { transform: scale(1.04); }
@media (min-width: 993px) {
    /*
     * Ligne 1 : description (gauche) + photos (droite).
     * Ligne 2 : localisation (large) + infos pratiques (étroit), côte à côte.
     */
    .lieu-detail-page-content {
        display: grid;
        grid-template-columns: minmax(0, 4fr) minmax(0, 2fr);
        grid-template-rows: auto auto;
        column-gap: 24px;
        row-gap: 20px;
        align-items: start;
    }
    .lieu-detail-page-main-content {
        grid-column: 1;
        grid-row: 1;
        min-width: 0;
    }
    .lieu-detail-page-sidebar-desktop {
        grid-column: 2;
        grid-row: 1;
        display: flex !important;
        flex-direction: column;
        align-self: start;
        min-width: 0;
        width: 100%;
        max-width: 100%;
    }
    .lieu-detail-page-map-infos-row {
        grid-column: 1 / -1;
        grid-row: 2;
        display: grid;
        grid-template-columns: subgrid;
        column-gap: 24px;
        align-items: start;
        min-width: 0;
        width: 100%;
    }
    @supports not (grid-template-columns: subgrid) {
        .lieu-detail-page-map-infos-row {
            grid-template-columns: minmax(0, 4fr) minmax(0, 2fr);
        }
    }
    .lieu-detail-page-map-main {
        grid-column: 1;
        display: flex;
        flex-direction: column;
        align-self: start;
        height: auto;
        min-width: 0;
        width: 100%;
        box-sizing: border-box;
    }
    .lieu-detail-page-map-main .lieu-map-container {
        flex: 0 0 auto;
        width: 100%;
        align-self: stretch;
        height: 220px !important;
        max-height: 220px !important;
        min-height: 0 !important;
    }
    .lieu-detail-page-map-infos-row .lieu-detail-page-info-section--pratiques {
        grid-column: 2;
        min-width: 0;
        align-self: start;
        display: flex;
        flex-direction: column;
        padding: 18px 16px;
        margin-bottom: 0;
        box-sizing: border-box;
    }
    .lieu-detail-page-map-infos-row .lieu-detail-page-info-section--pratiques .lieu-detail-page-info-title {
        font-size: 1.08rem;
        margin-bottom: 10px;
        flex-shrink: 0;
    }
    .lieu-detail-page-map-infos-row .lieu-detail-page-info-section--pratiques .lieu-detail-page-info-grid {
        flex: 1 1 auto;
        gap: 12px;
    }
    .lieu-detail-page-map-infos-row .lieu-detail-page-info-section--pratiques .lieu-detail-page-info-item {
        font-size: 0.86rem;
        gap: 7px;
    }
    .lieu-detail-page-map-infos-row .lieu-detail-page-infos-directions {
        margin-top: auto;
        padding-top: 12px;
        flex-shrink: 0;
        justify-content: stretch;
    }
    .lieu-detail-page-map-infos-row .lieu-detail-page-infos-directions .lieu-detail-page-directions-btn {
        width: 100%;
    }
    .lieu-detail-page-photos-sidebar {
        display: block;
        flex-shrink: 0;
    }
    .lieu-detail-page-photos-main { display: none; }
    .lieu-detail-page-photos-sidebar { display: block; }
    .lieu-detail-page-sidebar-desktop .lieu-detail-page-photos-section.lieu-detail-page-info-section {
        padding: 12px 14px;
        margin-bottom: 0;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    .lieu-detail-page-sidebar-desktop .lieu-detail-page-photos-body {
        position: relative;
        width: 100%;
        aspect-ratio: 1 / 1;
        min-height: 200px;
        overflow: hidden;
    }
    .lieu-detail-page-sidebar-desktop .lieu-detail-page-photos-grid--fixed {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(3, 1fr);
        gap: 5px;
        width: 100%;
        height: 100%;
        min-height: 0;
    }
    .lieu-detail-page-sidebar-desktop .lieu-detail-page-photos-grid--fixed img,
    .lieu-detail-page-sidebar-desktop .lieu-detail-page-photo-slot {
        width: 100%;
        height: 100%;
        min-height: 0;
        aspect-ratio: unset;
        object-fit: cover;
        border-radius: 6px;
        max-width: none;
        border: 1px solid var(--border);
    }
    .lieu-detail-page-sidebar-desktop .lieu-detail-page-photos-section .lieu-detail-page-info-title {
        font-size: 1.05rem;
        margin-bottom: 6px;
    }
    .lieu-detail-page-sidebar-desktop .lieu-detail-page-photos-grid--fixed img {
        cursor: pointer;
        transition: var(--transition);
    }
    .lieu-detail-page-sidebar-desktop .lieu-detail-page-photos-grid--fixed img:hover {
        transform: scale(1.04);
    }
    .lieu-detail-page-sidebar-desktop .lieu-detail-page-photo-slot {
        display: block;
        background: var(--bg);
        border: 1px dashed var(--border);
    }
    .lieu-detail-page-sidebar-desktop .lieu-detail-page-photos-empty-label {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        padding: 16px;
        text-align: center;
        font-size: 0.88rem;
        font-weight: 600;
        color: var(--text-soft);
        pointer-events: none;
    }
}

/* Sidebar (cartes infos) */
.lieu-detail-page-info-section {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 20px;
    box-shadow: var(--shadow-sm);
    margin-bottom: 20px;
}
.lieu-detail-page-info-grid { display: flex; flex-direction: column; gap: 14px; }
.lieu-detail-page-info-item { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 0.9rem; }
.lieu-detail-page-info-item i { color: var(--brand); width: 16px; }
.lieu-detail-page-info-label { color: var(--text-soft); font-weight: 600; }
.lieu-detail-page-info-value { color: var(--text); word-break: break-word; }
.lieu-map-info {
    margin-top: 10px;
    font-size: 0.88rem;
    color: var(--text-soft);
    line-height: 1.45;
}
.lieu-detail-page-map-actions {
    display: flex;
    justify-content: center;
    margin-top: 14px;
}
.lieu-detail-page-directions-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 22px;
    border-radius: var(--r-pill);
    border: 1px solid var(--brand);
    background: var(--brand-soft);
    color: var(--brand-dark);
    font-weight: 600;
    font-size: 0.88rem;
    transition: var(--transition);
    cursor: pointer;
}
.lieu-detail-page-directions-btn:hover { background: var(--brand); color: #fff; }

/* Section annonces */
.lieu-detail-page-annonces-full-section { max-width: var(--container); margin: 36px auto 0; padding: 0 24px; }
.lieu-detail-page-annonces-header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }

/* Onglets Tout / Annonces / Événements — alignés sur les filtres */
.annonces-type-tabs-wrap {
    width: 100%;
    margin: 0 0 18px;
}
.annonces-type-tabs {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
    flex-wrap: nowrap;
}
.annonces-type-tabs::-webkit-scrollbar { display: none; }
.annonces-type-tab i { color: var(--text-muted); }
.annonces-type-tab:hover i { color: var(--brand); }
.annonces-type-empty {
    text-align: center;
    padding: 28px 16px;
    color: var(--text-soft);
    font-size: 0.85rem;
    border: 1px dashed var(--border);
    border-radius: var(--r-md);
    background: var(--surface-2, #f8f9fb);
    margin-top: 4px;
}

.annonces-empty-state {
    grid-column: 1 / -1;
    text-align: center;
    padding: 36px 20px;
    border: 1px dashed var(--border);
    border-radius: var(--r-md);
    background: var(--surface-2, #f8f9fb);
}

.annonces-empty-state__icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: var(--brand-soft);
    color: var(--brand);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
}

.annonces-empty-state__title {
    margin: 0 0 6px;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1.35;
}

.annonces-empty-state__text {
    margin: 0 0 16px;
    font-size: 0.85rem;
    color: var(--text-soft);
    line-height: 1.45;
}

.annonces-empty-state__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border: none;
    border-radius: var(--r-pill);
    background: var(--brand);
    color: #fff;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: var(--transition);
}

.annonces-empty-state__btn:hover {
    background: var(--brand-dark);
    transform: translateY(-1px);
}
.page-annonces .annonces-type-tabs-wrap {
    margin: 0 0 18px;
}
.page-annonces .annonces-filters-section + .annonces-type-tabs-wrap {
    margin-top: -6px;
}
.lieu-detail-page-annonces-title { font-size: 1.4rem; }
.lieu-detail-page-annonces-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 10px;
    border-radius: var(--r-pill);
    background: var(--brand);
    color: #fff;
    font-weight: 700;
    font-size: 0.85rem;
}
.lieu-detail-page-voir-annonces { display: flex; flex-direction: column; align-items: center; margin-top: 28px; }
.lieu-detail-page-voir-annonces-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: var(--r-pill);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font-weight: 600;
    transition: var(--transition);
}
.lieu-detail-page-voir-annonces-btn:hover { border-color: var(--brand); color: var(--brand); }
.lieu-detail-page-post-btn { background: var(--brand); color: #fff; border-color: var(--brand); }
.lieu-detail-page-post-btn:hover { background: var(--brand-dark); color: #fff; }

/* Avertissement */
.lieu-detail-page-warning {
    max-width: var(--container);
    margin: 36px auto 0;
    padding: 0 24px;
}
.lieu-detail-page-warning-content {
    display: flex;
    gap: 18px;
    padding: 24px;
    border-radius: var(--r-lg);
    background: linear-gradient(135deg, var(--brand), var(--brand-dark));
    color: #fff;
    box-shadow: var(--shadow-md);
}
.lieu-detail-page-warning-icon {
    font-size: 1.8rem;
    flex-shrink: 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    line-height: 1;
    background: transparent;
    color: inherit;
}
.lieu-detail-page-warning-icon i {
    display: block;
    line-height: 1;
    color: inherit;
}
.lieu-detail-page-warning-text h4 { margin-bottom: 8px; }
.lieu-detail-page-warning-text ul { margin: 10px 0 0; padding-left: 18px; }
.lieu-detail-page-warning-text li { margin-bottom: 4px; }

/* FAB salon (desktop) */
.lieu-detail-fab-plus {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 1050;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: none;
    background: var(--brand);
    color: #fff;
    font-size: 1.3rem;
    box-shadow: var(--shadow-lg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
/* FAB « poster une annonce » — réutilise .annonces-fab-mobile, empilé au-dessus du chat sur desktop */
.page-lieu-detail .lieu-detail-fab-annonce {
    cursor: pointer;
}
@media (max-width: 1023px) {
    .page-lieu-detail .lieu-detail-fab-annonce {
        bottom: calc(74px + var(--app-fab-gap, 14px) + env(safe-area-inset-bottom, 0px));
        z-index: 1115;
    }
}
@media (min-width: 769px) {
    .page-lieu-detail:has(.lieu-detail-fab-plus) .lieu-detail-fab-annonce {
        bottom: 92px;
        right: 24px;
        width: 56px;
        height: 56px;
        font-size: 1.3rem;
    }
}
.lieuSalonCount {
    min-width: 20px;
    height: 18px;
    padding: 0 6px;
    border-radius: var(--r-pill);
    background: var(--text);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    align-items: center;
    justify-content: center;
}

/* Nav mobile custom (chat du lieu + menu) */
.mobile-nav-custom { display: none; }
.lieu-dropdown-content {
    display: none;
    position: absolute;
    bottom: 100%;
    right: 0;
    margin-bottom: 8px;
    min-width: 220px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}
.lieu-menu-dropdown.open .lieu-dropdown-content,
.lieu-dropdown-content.show { display: block; }
.lieu-dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 13px 16px;
    background: none;
    border: none;
    color: var(--text);
    font-size: 0.92rem;
    text-align: left;
    transition: var(--transition);
}
.lieu-dropdown-item:hover { background: var(--bg); }
.lieu-dropdown-item.disabled { opacity: 0.45; cursor: not-allowed; }

/* ---------- Modales lieu-detail ---------- */
.image-modal,
.place-modification-modal,
.place-rating-modal,
.place-reviews-modal {
    position: fixed;
    inset: 0;
    z-index: 1300;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(16, 24, 40, 0.6);
    backdrop-filter: blur(2px);
}
.place-modification-modal.active,
.place-rating-modal.active,
.place-reviews-modal.active { display: flex; }
.place-modification-modal-backdrop,
.place-rating-modal-backdrop,
.place-reviews-modal-backdrop { position: absolute; inset: 0; }
.image-modal-content,
.place-modification-modal-content,
.place-rating-modal-content,
.place-reviews-modal-content {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 560px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}
.image-modal-content { max-width: 92vw; background: transparent; box-shadow: none; align-items: center; }
.image-modal-img { max-width: 100%; max-height: 88vh; border-radius: var(--r-md); }
.image-modal-close { position: absolute; top: -6px; right: 4px; color: #fff; font-size: 2rem; cursor: pointer; }
/* En-têtes lieu-detail : voir .spiitz-modal-header */
.place-modification-modal-body,
.place-rating-modal-body,
.place-reviews-modal-body { padding: 22px; overflow-y: auto; }
.place-modification-modal-footer,
.place-rating-modal-footer { padding: 18px 22px; border-top: 1px solid var(--border); }

/* Champs de formulaire dans ces modales */
.place-modification-modal .form-group,
.place-rating-modal .form-group { margin-bottom: 18px; }
.place-modification-modal .form-group > label,
.place-rating-modal .form-group > label { display: block; margin-bottom: 7px; font-weight: 600; font-size: 0.9rem; }
.place-modification-modal input[type="text"],
.place-modification-modal input[type="url"],
.place-modification-modal select,
.place-modification-modal textarea,
.place-rating-modal textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    font-family: inherit;
    font-size: 0.95rem;
    background: var(--surface);
    color: var(--text);
    transition: var(--transition);
}
.place-modification-modal input:focus,
.place-modification-modal select:focus,
.place-modification-modal textarea:focus,
.place-rating-modal textarea:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-soft);
}
.modification-step { display: none; }
.modification-step.active { display: block; }
.modification-step h4 { margin-bottom: 16px; font-size: 1rem; }
.photos-preview { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.photos-preview img { width: 72px; height: 72px; object-fit: cover; border-radius: var(--r-sm); }
.address-suggestions {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    margin-top: 4px;
    overflow: hidden;
}
.address-suggestion-item {
    padding: 10px 12px;
    cursor: pointer;
    border-bottom: 1px solid var(--border);
    font-size: 0.875rem;
}
.address-suggestion-item:hover {
    background: var(--surface-2, rgba(0, 0, 0, 0.04));
}
.address-suggestion-item:last-child {
    border-bottom: none;
}
.modification-progress { margin-bottom: 14px; }
.progress-bar { height: 6px; background: var(--border); border-radius: var(--r-pill); overflow: hidden; }
.progress-fill { height: 100%; background: var(--brand); border-radius: var(--r-pill); transition: width 0.25s ease; }
.progress-text { display: block; margin-top: 6px; font-size: 0.8rem; color: var(--text-soft); }
.modification-actions { display: flex; gap: 10px; justify-content: flex-end; }
.modification-btn,
.rating-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 20px;
    border-radius: var(--r-pill);
    font-weight: 600;
    font-size: 0.9rem;
    border: 1px solid var(--border);
    transition: var(--transition);
}
.modification-btn.secondary,
.rating-btn.secondary { background: var(--surface); color: var(--text); }
.modification-btn.primary,
.modification-btn.submit,
.rating-btn.primary { background: var(--brand); color: #fff; border-color: var(--brand); }
.modification-btn.primary:hover,
.modification-btn.submit:hover,
.rating-btn.primary:hover { background: var(--brand-dark); }

/* Notation par étoiles */
.rating-stars { display: inline-flex; gap: 8px; }
.rating-input { display: none; }
.rating-star { color: #d1d5db; font-size: 1.8rem; cursor: pointer; transition: var(--transition); }
.rating-star:hover,
.rating-star.active,
.rating-star.selected,
.rating-star.hovered { color: var(--gold); transform: scale(1.1); }
.rating-text { margin-top: 8px; color: var(--text-soft); font-size: 0.9rem; }
.char-count { display: block; margin-top: 6px; color: var(--text-muted); font-size: 0.8rem; }
.place-rating-modal-footer { display: flex; gap: 12px; justify-content: flex-end; }

/* Statistiques d'avis (notation lieu) */
.place-rating-modal .rating-number { font-size: 2.6rem; font-weight: 800; line-height: 1; }

/* ---------- Modal avis lieu — design dédié ---------- */
.place-reviews-modal {
    padding: 16px;
    background: rgba(16, 24, 40, 0.55);
    backdrop-filter: blur(4px);
}
.place-reviews-modal.active { display: flex; }
.place-reviews-modal-content {
    max-width: 620px;
    border: 1px solid var(--border);
    transform: translateY(12px) scale(0.98);
    opacity: 0;
    transition: transform 0.28s ease, opacity 0.28s ease;
}
.place-reviews-modal.active .place-reviews-modal-content {
    transform: translateY(0) scale(1);
    opacity: 1;
}
.place-reviews-modal-body {
    padding: 18px 20px 22px;
    background: var(--bg, #f8fafc);
}
.place-reviews-modal .reviews-stats {
    display: grid;
    grid-template-columns: minmax(110px, 140px) minmax(0, 1fr);
    gap: 18px;
    align-items: center;
    padding: 16px;
    margin-bottom: 18px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-sm);
}
.place-reviews-modal .average-rating {
    text-align: center;
    padding-right: 12px;
    border-right: 1px solid var(--border);
}
.place-reviews-modal .rating-number {
    font-size: 2.4rem;
    font-weight: 900;
    line-height: 1;
    color: var(--text);
    letter-spacing: -0.02em;
}
.place-reviews-modal .rating-stars-display {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    margin: 8px 0 6px;
    color: var(--gold);
}
.place-reviews-modal .rating-stars-display i {
    font-size: 0.82rem;
}
.place-reviews-modal .total-ratings {
    color: var(--text-soft);
    font-size: 0.78rem;
    font-weight: 600;
}
.place-reviews-modal .rating-breakdown {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
.place-reviews-modal .rating-bar {
    display: grid;
    grid-template-columns: 52px 1fr 24px;
    align-items: center;
    gap: 8px;
    font-size: 0.72rem;
    color: var(--text-soft);
    font-weight: 600;
}
.place-reviews-modal .rating-bar-label__short { display: none; }
.place-reviews-modal .rating-bar > .rating-bar-label,
.place-reviews-modal .rating-bar > span:first-child {
    width: auto;
    white-space: nowrap;
}
.place-reviews-modal .bar-container {
    height: 6px;
    background: #eef2f7;
    border-radius: var(--r-pill);
}
.place-reviews-modal .bar-fill {
    background: linear-gradient(90deg, var(--brand) 0%, #ff6b8a 100%);
    border-radius: var(--r-pill);
    min-width: 0;
}
.place-reviews-modal .rating-bar .count {
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
}
.place-reviews-list-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    font-size: 0.82rem;
    font-weight: 800;
    color: var(--text);
    letter-spacing: 0.02em;
}
.place-reviews-modal .reviews-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: min(52vh, 420px);
    overflow-y: auto;
    padding-right: 2px;
    scrollbar-width: thin;
}
.place-reviews-modal .loading-reviews,
.place-reviews-modal .no-reviews,
.place-reviews-modal .error-reviews {
    text-align: center;
    color: var(--text-muted);
    padding: 28px 16px;
    background: var(--surface);
    border: 1px dashed var(--border);
    border-radius: var(--r-md);
    font-size: 0.88rem;
}
.place-reviews-modal .loading-reviews i {
    display: block;
    font-size: 1.4rem;
    margin-bottom: 8px;
    color: var(--brand);
}
.place-reviews-modal .review-item {
    padding: 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.place-reviews-modal .review-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 0;
}
.place-reviews-modal .review-author {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.place-reviews-modal .review-author-photo {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px var(--border);
    flex-shrink: 0;
}
.place-reviews-modal .review-author-initials {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brand) 0%, #ff6b8a 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    flex-shrink: 0;
}
.place-reviews-modal .review-author-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.place-reviews-modal .review-author-name {
    font-weight: 700;
    font-size: 0.88rem;
    color: var(--text);
    line-height: 1.2;
}
.place-reviews-modal .username-link {
    color: var(--text);
    text-decoration: none;
    transition: color 0.15s ease;
}
.place-reviews-modal .username-link:hover {
    color: var(--brand);
}
.place-reviews-modal .review-date {
    font-size: 0.74rem;
    color: var(--text-muted);
}
.place-reviews-modal .review-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    flex-shrink: 0;
}
.place-reviews-modal .review-rating {
    display: inline-flex;
    align-items: center;
    gap: 1px;
    padding: 3px 8px;
    border-radius: var(--r-pill);
    background: #fff8e6;
    border: 1px solid #fde68a;
}
.place-reviews-modal .review-rating i {
    font-size: 0.68rem;
}
.place-reviews-modal .review-action-buttons {
    display: flex;
    align-items: center;
    gap: 4px;
}
.place-reviews-modal .delete-rating-btn,
.place-reviews-modal .report-rating-btn {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--surface);
    color: var(--text-soft);
    font-size: 0.72rem;
    cursor: pointer;
    transition: var(--transition);
}
.place-reviews-modal .delete-rating-btn:hover {
    border-color: #fecaca;
    color: #dc2626;
    background: #fef2f2;
}
.place-reviews-modal .report-rating-btn:hover {
    border-color: #fed7aa;
    color: #ea580c;
    background: #fff7ed;
}
.place-reviews-modal .review-message {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
    color: var(--text);
    font-size: 0.88rem;
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
}
@media (max-width: 768px) {
    .place-reviews-modal {
        align-items: flex-end;
        padding: 0;
    }
    .place-reviews-modal-content {
        max-width: 100%;
        max-height: 92vh;
        border-radius: 20px 20px 0 0;
        border-left: none;
        border-right: none;
        border-bottom: none;
    }
    .place-reviews-modal.active .place-reviews-modal-content {
        transform: translateY(0);
    }
    .spiitz-modal-header {
        padding: 11px 14px 10px;
        padding-top: max(11px, calc(8px + env(safe-area-inset-top)));
    }
    .spiitz-modal-header__icon {
        width: 28px;
        height: 28px;
    }
    .modal-propose-progress {
        padding-left: 16px;
        padding-right: 16px;
    }
    .place-reviews-modal-body {
        padding: 14px 16px calc(18px + env(safe-area-inset-bottom));
    }
    .place-reviews-modal .reviews-stats {
        grid-template-columns: minmax(72px, 88px) minmax(0, 1fr);
        gap: 10px;
        padding: 12px;
        align-items: center;
    }
    .place-reviews-modal .average-rating {
        padding-right: 10px;
        padding-bottom: 0;
        border-right: 1px solid var(--border);
        border-bottom: none;
    }
    .place-reviews-modal .rating-number {
        font-size: 1.75rem;
    }
    .place-reviews-modal .rating-stars-display {
        margin: 4px 0 3px;
    }
    .place-reviews-modal .rating-stars-display i {
        font-size: 0.65rem;
    }
    .place-reviews-modal .total-ratings {
        font-size: 0.65rem;
        line-height: 1.2;
    }
    .place-reviews-modal .rating-breakdown {
        gap: 4px;
    }
    .place-reviews-modal .rating-bar {
        grid-template-columns: 26px 1fr 16px;
        gap: 4px;
        font-size: 0.62rem;
    }
    .place-reviews-modal .rating-bar-label__full { display: none; }
    .place-reviews-modal .rating-bar-label__short { display: inline; }
    .place-reviews-modal .bar-container {
        height: 5px;
    }
    .place-reviews-modal .reviews-list {
        max-height: min(48vh, 360px);
    }
}

/* ---------- Bouton participation (cartes annonces du lieu) ---------- */
.annonce-card .btn-participate {
    font-weight: 700;
    cursor: pointer;
}
.annonce-card .btn-participate:hover { filter: brightness(0.95); }
.annonce-card .btn-participate.participating { background: var(--text); }
.annonce-card .btn-participate.participating i { transform: rotate(45deg); }
.annonce-card .participants-count {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: var(--r-pill);
    margin-left: 2px;
}

/* ---------- Modale de confirmation (générique, harmonisée) ---------- */
.confirm-modal {
    position: fixed;
    inset: 0;
    z-index: 1400;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}
.confirm-modal.show { opacity: 1; pointer-events: auto; }
.confirm-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(16, 24, 40, 0.6);
    backdrop-filter: blur(2px);
}
.confirm-modal-content {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 420px;
    background: var(--surface);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
    transform: scale(0.94);
    transition: transform 0.2s ease;
}
.confirm-modal.show .confirm-modal-content { transform: scale(1); }
.confirm-modal-header { padding: 22px 22px 0; }
.confirm-modal-header h3 { margin: 0; font-size: 1.15rem; font-weight: 800; color: var(--text); }
.confirm-modal-body { padding: 12px 22px 4px; }
.confirm-modal-body p { margin: 0; color: var(--text-soft); line-height: 1.5; }
.confirm-modal-footer { padding: 18px 22px 22px; display: flex; gap: 10px; justify-content: flex-end; }
.confirm-btn {
    padding: 11px 20px;
    border: none;
    border-radius: var(--r-pill);
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
}
.confirm-btn.secondary { background: var(--bg); color: var(--text); }
.confirm-btn.secondary:hover { background: var(--border); }
.confirm-btn.primary { background: var(--brand); color: #fff; }
.confirm-btn.primary:hover { filter: brightness(0.95); transform: translateY(-1px); }

/* ---------- Outils staff (modale d'administration du lieu) ---------- */
.staff-lfab {
    position: fixed;
    right: 16px;
    bottom: 88px;
    z-index: 1450;
    border: none;
    border-radius: var(--r-pill);
    padding: 12px 14px;
    background: var(--text);
    color: #fff;
    font-weight: 800;
    box-shadow: var(--shadow-lg);
    cursor: pointer;
}
.staff-lmodal { position: fixed; inset: 0; display: none; z-index: 1460; }
.staff-lmodal.active { display: block; }
.staff-lbg { position: absolute; inset: 0; background: rgba(16, 24, 40, 0.58); backdrop-filter: blur(2px); }
.staff-lcard {
    position: relative;
    z-index: 1;
    width: min(94vw, 900px);
    max-height: 86vh;
    overflow: auto;
    margin: 6vh auto;
    background: var(--surface);
    border-radius: var(--r-lg);
    border: 1px solid var(--border);
}
.staff-lhead { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.staff-lhead h3 { margin: 0; font-size: 1rem; font-weight: 800; }
.staff-lclose { border: none; background: var(--bg); border-radius: 50%; width: 34px; height: 34px; cursor: pointer; }
.staff-ltab { padding: 14px 16px; }
.staff-lgrid { display: grid; gap: 10px; }
.staff-lgrid input, .staff-lgrid textarea, .staff-lgrid select {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 10px 12px;
    font-size: 0.88rem;
}
.staff-lactions { display: flex; gap: 8px; flex-wrap: wrap; }
.staff-lbtn { border: none; background: var(--text); color: #fff; border-radius: var(--r-pill); padding: 9px 14px; font-size: 0.8rem; font-weight: 800; cursor: pointer; }
.staff-lrow { border: 1px solid var(--border); border-radius: var(--r-md); padding: 10px; margin-bottom: 8px; }

@media (max-width: 992px) {
    .lieu-detail-page-content { grid-template-columns: 1fr; }
    .lieu-detail-page-sidebar-desktop { display: none; }
    .lieu-detail-page-sidebar-mobile { display: block; }
}
@media (max-width: 1023px) {
    .page-lieu-detail .lieu-detail-page-content-wrapper {
        padding-left: 0;
        padding-right: 0;
        max-width: none;
    }
    .page-lieu-detail .lieu-detail-page-hero {
        border-radius: 0;
        margin-top: 0;
        width: 100%;
    }
}
@media (max-width: 768px) {
    .page-lieu-detail .lieu-detail-page-main {
        padding-top: 0;
        padding-bottom: calc(74px + env(safe-area-inset-bottom, 0px));
    }
    .page-lieu-detail .lieu-detail-page-content-wrapper {
        padding: 0;
        max-width: none;
        margin: 0;
    }
    .page-lieu-detail .lieu-detail-page-hero {
        width: 100%;
        height: clamp(220px, 48vw, 340px);
        min-height: 220px;
        margin: 0;
        border-radius: 0;
    }
    .page-lieu-detail .lieu-detail-page-hero-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }
    .page-lieu-detail .lieu-detail-page-hero-icon {
        font-size: 2.25rem;
    }
    .page-lieu-detail .lieu-detail-page-place-type {
        top: 10px;
        left: 10px;
        right: auto;
        padding: 4px 10px;
        font-size: 0.7rem;
        font-weight: 600;
        max-width: calc(50% - 16px);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .page-lieu-detail .lieu-detail-page-rating-badge {
        top: 10px;
        left: auto;
        right: 10px;
        transform: none;
        padding: 4px 9px;
        font-size: 0.72rem;
        gap: 4px;
    }
    .page-lieu-detail .lieu-detail-page-rating-badge i {
        font-size: 0.68rem;
    }
    .page-lieu-detail .lieu-detail-premium-badge {
        top: auto;
        bottom: 12px;
        left: 10px;
        right: auto;
        padding: 4px 9px;
        font-size: 0.68rem;
        gap: 4px;
    }
    .page-lieu-detail .lieu-detail-premium-badge i {
        font-size: 0.7rem;
    }
    .page-lieu-detail .lieu-detail-page-action-buttons {
        bottom: 10px;
        right: 10px;
        gap: 6px;
    }
    .page-lieu-detail .lieu-detail-page-action-btn-hero {
        width: 34px;
        height: 34px;
        font-size: 0.82rem;
    }
    .page-lieu-detail .lieu-detail-page-action-btn-hero i {
        font-size: 0.78rem;
    }
    .page-lieu-detail .lieu-detail-page-content {
        padding: 22px 14px 24px;
        margin-top: 6px;
        border-radius: 16px 16px 0 0;
        background: var(--surface);
    }
    .page-lieu-detail .lieu-detail-page-title-section {
        padding-top: 2px;
    }
    .page-lieu-detail .lieu-detail-page-title-row {
        flex-wrap: nowrap;
        align-items: center;
        gap: 10px;
    }
    .page-lieu-detail .lieu-detail-page-title {
        flex: 1 1 auto;
        min-width: 0;
        font-size: 1.05rem;
        line-height: 1.25;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .page-lieu-detail .lieu-detail-page-orientation-badge {
        margin-left: auto;
        flex-shrink: 0;
        padding: 3px 8px;
        font-size: 0.68rem;
    }
    .page-lieu-detail .lieu-detail-page-location {
        font-size: 0.76rem;
        margin-top: 10px;
        gap: 5px;
    }
    .page-lieu-detail .lieu-detail-page-info-title {
        font-size: 0.9rem;
        margin-bottom: 8px;
    }
    .page-lieu-detail .lieu-detail-page-description {
        margin-top: 16px;
    }
    .page-lieu-detail .lieu-detail-page-description-text {
        font-size: 0.82rem;
        line-height: 1.5;
    }
    .page-lieu-detail .lieu-detail-page-photos-section {
        margin-top: 16px;
    }
    .page-lieu-detail .lieu-detail-page-photos-section > p {
        font-size: 0.8rem;
    }
    .page-lieu-detail .lieu-detail-page-info-section {
        padding: 14px;
        margin-bottom: 14px;
    }
    .page-lieu-detail .lieu-map-container {
        width: 100%;
        height: 200px;
        max-height: 200px;
        margin-top: 10px;
    }
    .page-lieu-detail .lieu-map-container.leaflet-container {
        height: 200px !important;
        max-height: 200px !important;
    }
    .page-lieu-detail .lieu-detail-page-info-grid {
        gap: 10px;
    }
    .page-lieu-detail .lieu-detail-page-info-item {
        font-size: 0.78rem;
        gap: 6px;
    }
    .page-lieu-detail .lieu-detail-page-info-item i {
        width: 14px;
        font-size: 0.72rem;
    }
    .page-lieu-detail .lieu-map-info {
        font-size: 0.74rem;
        margin-top: 8px;
        line-height: 1.4;
    }
    .page-lieu-detail .lieu-detail-page-directions-btn {
        padding: 8px 14px;
        font-size: 0.76rem;
        gap: 6px;
    }
    .page-lieu-detail .lieu-detail-page-warning {
        margin: 18px auto 0;
        padding: 0 12px;
    }
    .page-lieu-detail .lieu-detail-page-warning-content {
        gap: 10px;
        padding: 12px;
        border-radius: var(--r-md);
    }
    .page-lieu-detail .lieu-detail-page-warning-icon {
        font-size: 1rem;
    }
    .page-lieu-detail .lieu-detail-page-warning-text h4 {
        font-size: 0.8rem;
        margin-bottom: 4px;
        line-height: 1.3;
    }
    .page-lieu-detail .lieu-detail-page-warning-text p {
        font-size: 0.72rem;
        line-height: 1.4;
        margin-bottom: 6px;
    }
    .page-lieu-detail .lieu-detail-page-warning-text ul {
        margin: 4px 0 0;
        padding-left: 14px;
    }
    .page-lieu-detail .lieu-detail-page-warning-text li {
        font-size: 0.68rem;
        line-height: 1.35;
        margin-bottom: 2px;
    }
    .page-lieu-detail .lieu-detail-page-annonces-full-section {
        padding-left: 14px;
        padding-right: 14px;
        margin-top: 24px;
    }
    .page-lieu-detail .annonces-grid {
        overflow: visible;
        padding-top: 14px;
    }
    .page-lieu-detail .lieu-detail-page-annonces-title {
        font-size: 1rem;
    }
    .page-lieu-detail .lieu-detail-page-annonces-count {
        font-size: 0.72rem;
        padding: 3px 8px;
    }
    .page-lieu-detail .lieu-detail-page-voir-annonces {
        margin-top: 18px;
    }
    .page-lieu-detail .lieu-detail-page-voir-annonces-btn {
        padding: 8px 14px;
        font-size: 0.78rem;
    }
    .page-lieu-detail .lieu-detail-page-sidebar-mobile {
        margin-left: 14px;
        margin-right: 14px;
    }
    .header-desktop-back-content { padding: 0 16px; }
    .header-desktop-back-content h1,
    .header-desktop-back-content .header-desktop-back-title { display: none; }
    .page-lieu-detail .app-bottom-nav { display: none; }
    .lieu-detail-fab-plus { display: none; }
}

/* ---------- 17. Responsive ---------- */
@media (max-width: 900px) {
    .site-footer__inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
    .app-nav__links { display: none; }
    .app-nav__back { display: inline-flex; }
    /* Barre "retour" desktop masquée sur mobile : le bouton retour est dans le header (app-nav / header.php) */
    .header-desktop-back { display: none !important; }
    .homefix-section-header { flex-direction: column; align-items: flex-start; }
    .homefix-hero-section { padding: 56px 18px 40px; }
    .homefix-beta-banner {
        gap: 10px;
        margin-bottom: 22px;
        padding: 12px 12px 12px 11px;
    }
    .homefix-beta-banner__icon {
        display: none;
    }
    .homefix-beta-banner__title {
        font-size: 0.86rem;
    }
    .homefix-beta-banner__text {
        font-size: 0.8rem;
    }
    .homefix-featured-section,
    .homefix-categories-section,
    .homefix-annonces-section,
    .homefix-seo-annonces-section,
    .homefix-salons-section { padding: 40px 0; }
    /* Accueil : carrousels horizontaux (pilotés en JS) */
    .page-home .lieux-places-grid {
        display: flex;
        gap: 16px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        padding-bottom: 8px;
    }
    .page-home .lieux-place-card { flex: 0 0 82%; scroll-snap-align: start; }

    /* Index mobile : carrousel horizontal annonces (comme les lieux) */
    .page-home .homefix-annonces-section .homefix-slider-container {
        width: 100%;
        overflow: visible;
    }
    .page-home .homefix-annonces-section #annoncesSlider.annonces-grid,
    .page-home .homefix-annonces-section .annonces-grid {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 16px;
        overflow-x: auto;
        overflow-y: visible;
        scroll-snap-type: x mandatory;
        scroll-padding-left: 0;
        scroll-padding-right: 0;
        padding: 14px 0 8px;
        -webkit-overflow-scrolling: touch;
        width: 100%;
        max-width: 100%;
        align-items: stretch;
    }
    .page-home .homefix-annonces-section .annonce-card {
        flex: 0 0 100%;
        width: 100%;
        min-width: 100%;
        max-width: 100%;
        scroll-snap-align: start;
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
    }
    /* annonces.php : grille pleine largeur */
    .page-annonces .annonces-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
        width: 100%;
        overflow: visible;
        padding-top: 14px;
    }
    .page-annonces .annonce-card {
        flex: unset;
        width: 100%;
        min-width: 0;
        max-width: 100%;
        display: flex;
        flex-direction: column;
    }
    .page-home .homefix-annonces-section .annonce-content,
    .page-annonces .annonce-content {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-width: 0;
        padding: 16px;
    }
    .page-home .homefix-annonces-section .annonce-card.annonce-premium .annonce-content,
    .page-annonces .annonce-card.annonce-premium .annonce-content,
    .page-lieu-detail .annonce-card.annonce-premium .annonce-content {
        padding-top: 24px;
    }
    .page-home .homefix-annonces-section .annonce-footer,
    .page-annonces .annonce-footer,
    .page-lieu-detail .annonce-footer { margin-top: auto; }

    /* Accueil : catégories (Club libertin, Sex-shop, etc.) — 2 par ligne */
    .homefix-categories-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    .homefix-category-card {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 10px;
        padding: 14px 10px;
    }
    .homefix-category-icon {
        width: 40px;
        height: 40px;
        font-size: 1.1rem;
    }
    .homefix-category-name {
        font-size: 0.8rem;
        line-height: 1.25;
    }
    .homefix-categories-actions {
        flex-direction: column;
        align-items: stretch;
    }
    .homefix-categories-btn {
        justify-content: center;
        width: 100%;
    }

    /* Page Lieux (et listings) : cartes empilées à la suite, scroll vertical naturel */
    .page-lieux .lieux-places-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 14px;
        overflow: visible;
    }
    .page-lieux .lieux-place-card { width: 100%; }

    .site-footer__inner { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    .homefix-container { padding: 0 16px; }
}

/* Page détail : barre d'action (chat) alignée sur le breakpoint 1024 des composants
   (lieu-detail-inline-1.css) pour éviter un trou en tablette. */
@media (max-width: 1023px) {
    .page-lieu-detail .app-bottom-nav { display: none; }
    body.page-lieu-detail {
        padding-bottom: calc(74px + env(safe-area-inset-bottom, 0px));
    }
    /* Pas de footer site sous la barre « Rejoindre le chat » (tablette incluse) */
    body.page-lieu-detail .site-footer {
        display: none !important;
    }
    .page-lieu-detail .mobile-nav-custom {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1100;
        padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
        background: rgba(255, 255, 255, 0.96);
        backdrop-filter: saturate(180%) blur(12px);
        -webkit-backdrop-filter: saturate(180%) blur(12px);
        border-top: 1px solid var(--border);
        box-shadow: 0 -4px 20px rgba(16, 24, 40, 0.06);
    }
    .mobile-nav-container { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; max-width: 600px; margin: 0 auto; }
    .btn-deposer-annonce {
        flex: 1;
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 13px 16px;
        border-radius: var(--r-pill);
        border: none;
        background: var(--brand);
        color: #fff;
        font-weight: 700;
        font-size: 0.92rem;
        cursor: pointer;
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .lieu-btn-menu-dropdown {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        border: 1px solid var(--border);
        background: var(--surface);
        color: var(--text);
        flex-shrink: 0;
        cursor: pointer;
    }
    .lieuSalonCount--footer { position: absolute; top: -2px; right: 10px; }
}

/* ============================================================
   MOBILE — léger ajustement (logo grand, UI légèrement compacte)
   ============================================================ */
@media (max-width: 768px) {
    html { font-size: 15px; }

    /* Logo SPIITZ (SVG recadré) */
    .app-nav { min-height: 60px; }
    .app-nav__inner { padding: 0 10px; gap: 8px; min-width: 0; }
    .app-nav__logo { flex: 0 1 auto; min-width: 0; max-width: 46vw; height: 36px; overflow: visible; }
    .app-nav__logo img,
    .app-nav__logo .spiitz-brand-logo,
    .app-nav__logo .app-nav__logo-img,
    .app-nav__logo .spiitz-brand-logo-wrap .spiitz-brand-logo,
    .app-nav__logo .spiitz-brand-logo-wrap img {
        height: 26px;
        width: auto;
        max-width: 100%;
    }
    .app-nav__logo .spiitz-brand-badge {
        top: -7px;
        right: -3px;
        font-size: 0.38rem;
        padding: 1px 3px;
    }
    .app-nav__spacer { flex: 1; min-width: 4px; }
    .app-nav__actions { flex-shrink: 0; gap: 8px; }
    .app-nav__actions .btn {
        font-size: 0.74rem;
        padding: 7px 11px;
        white-space: nowrap;
        line-height: 1.2;
        font-weight: 600;
    }
    .app-nav .app-nav__actions .app-nav__icon,
    .app-nav .app-nav__actions .notification-bell-btn,
    .app-nav .app-nav__actions #messages-link {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        min-height: 28px !important;
        max-width: 28px !important;
        max-height: 28px !important;
        padding: 0 !important;
        margin: 0 !important;
        font-size: 0.72rem !important;
        border-width: 1px !important;
        flex-shrink: 0 !important;
        box-sizing: border-box !important;
    }
    .app-nav .app-nav__actions .app-nav__icon i,
    .app-nav .app-nav__actions #messages-link i {
        font-size: 0.72rem !important;
        line-height: 1 !important;
    }
    .app-nav .app-nav__actions .app-badge,
    .app-nav .app-nav__icon .app-badge {
        top: -2px !important;
        right: -2px !important;
        min-width: 14px !important;
        height: 14px !important;
        padding: 0 3px !important;
        font-size: 8px !important;
        border-width: 1px !important;
    }
    .app-nav .app-nav__avatar,
    .app-nav #profile-toggle.app-nav__avatar {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;
        margin-left: 6px !important;
        font-size: 0.78rem !important;
    }
    .app-nav .app-nav__avatar img,
    .app-nav .app-nav__avatar .app-nav__avatar-fallback,
    .app-nav .app-nav__avatar .no-photo-placeholder--header {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;
    }

    /* CTA « Prêt à découvrir de nouveaux lieux » */
    .homefix-cta-section { padding: 32px 0; }
    .homefix-cta-content { padding: 26px 18px; border-radius: var(--r-md); }
    .homefix-cta-title { font-size: 1.12rem; }
    .homefix-cta-subtitle { font-size: 0.84rem; margin-top: 6px; }
    .homefix-cta-buttons { margin-top: 14px; gap: 10px; }
    .homefix-cta-btn { padding: 9px 16px; font-size: 0.82rem; gap: 6px; }

    /* Titres & sections */
    .homefix-section-title { font-size: 1.25rem; }
    .homefix-section-subtitle { font-size: 0.88rem; }
    .homefix-hero-title { font-size: 1.85rem; }
    .homefix-hero-subtitle { font-size: 0.92rem; }

    /* Index — cartes SEO (Annonces Gay, Hétéro, etc.) */
    .homefix-seo-annonces-grid {
        grid-template-columns: 1fr;
        gap: 12px;
        margin-top: 24px;
    }
    .homefix-seo-annonce-card {
        gap: 12px;
        padding: 14px;
    }
    .homefix-seo-annonce-icon {
        width: 40px;
        height: 40px;
        border-radius: 11px;
        font-size: 1.05rem;
    }
    .homefix-seo-annonce-title {
        font-size: 0.92rem;
        margin-bottom: 4px;
    }
    .homefix-seo-annonce-description {
        font-size: 0.8rem;
        margin-bottom: 8px;
        line-height: 1.35;
    }
    .homefix-seo-annonce-count { font-size: 0.76rem; }
    .homefix-seo-annonce-arrow { font-size: 1rem; }

    /* Cartes lieux */
    .lieux-place-info-card { padding: 11px 13px; }
    .lieux-place-name { font-size: 0.94rem; }
    .lieux-place-city,
    .lieux-place-announcements { font-size: 0.82rem; }
    .lieux-place-type { font-size: 10px; padding: 4px 9px; }

    /* Filtres (listings) — légèrement plus petits que desktop */
    .lieux-filter-btn,
    .annonces-filter-btn,
    .membres-filter-btn,
    .salons-filter-btn,
    .membres-modal-filters-btn,
    .reset-filters-btn,
    .annonces-type-tab { font-size: 0.74rem; padding: 6px 11px; gap: 5px; }
    .lieux-filter-btn i,
    .annonces-filter-btn i,
    .membres-filter-btn i,
    .salons-filter-btn i,
    .annonces-type-tab i { font-size: 0.7rem; }
    .annonces-type-tab__count {
        min-width: 18px;
        height: 16px;
        font-size: 0.62rem;
        padding: 0 5px;
    }
    .lieux-mode-btn { font-size: 0.78rem; padding: 6px 12px; }
    .lieux-view-toggle-btn,
    .annonces-view-toggle-btn,
    .membres-view-toggle-btn { width: 32px; height: 32px; }
    .lieux-filter-count,
    .annonces-filter-count,
    .membres-filter-count { font-size: 0.62rem; }

    /* Boutons génériques */
    .btn,
    .btn-primary,
    .btn-ghost { font-size: 0.88rem; padding: 9px 16px; }

    /* Recherche globale — légèrement plus compacte */
    .global-search-wrapper { padding: 4px; gap: 3px; }
    .global-search-type-select { font-size: 0.74rem; padding: 6px 22px 6px 9px; }
    .global-search-type-selector::after { right: 9px; font-size: 0.55rem; }
    .global-search-icon { font-size: 0.8rem; margin: 0 4px 0 8px; }
    .global-search-input { font-size: 0.8rem; padding: 7px 4px; }
    .global-search-reset-inline { width: 24px; height: 24px; font-size: 0.72rem; }
    .global-search-btn { width: 32px; height: 32px; font-size: 0.78rem; }
    .page-membres .global-search-container,
    .page-lieux .global-search-container,
    .page-annonces .global-search-container { margin: 4px auto 18px; }

    /* Autres listes (membres, etc.) */
    .membres-member-name { font-size: 0.86rem; }
    .membres-member-info { font-size: 0.74rem; }

    /* Détail annonce + modal */
    .annonce-detail-mobile-respond-btn { padding: 11px 14px; font-size: 0.84rem; }
    .annonce-detail-modal__action-btn { min-height: 34px; font-size: 0.78rem; padding: 0 10px; }
    .annonce-detail-modal__action-link { width: 34px; min-height: 34px; }
    .annonce-detail-modal__logo { height: 20px; width: auto; max-width: 90px; }
    .annonces-fab-mobile,
    .lieux-fab-mobile,
    .salons-fab-mobile {
        width: 42px;
        height: 42px;
        font-size: 1rem;
        right: 14px;
        z-index: 1115;
        bottom: calc(var(--app-bottom-nav-h, 64px) + var(--app-fab-gap, 14px) + env(safe-area-inset-bottom, 0px));
    }

    /* Messages */
    .messages-tab { font-size: 0.7rem; padding: 8px 3px; white-space: nowrap; }
    .messages-filters .filter-btn { font-size: 0.74rem; padding: 6px 11px; }
    .conversation-name { font-size: 0.84rem; }
    .conversation-message { font-size: 0.78rem; }
}


/* ============================================================
   PAGE MEMBRES — design moderne (thème brand)
   ============================================================ */

/* ---------- Layout ---------- */
.membres-main {
    max-width: var(--container);
    margin: 0 auto;
    padding: 22px 24px calc(96px + env(safe-area-inset-bottom, 0px));
}
.membres-content-wrapper { width: 100%; }

/* La barre de recherche globale est partagée ; on gère juste l'espacement ici */
.page-membres .global-search-container,
.page-lieux .global-search-container,
.page-annonces .global-search-container { margin: 6px auto 26px; }
.membres-search-section { margin-bottom: 0; }

/* ---------- Salons boostés ---------- */
.membres-boosted-section { margin: 4px 0 18px; }
.membres-boosted-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.membres-boosted-head h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 8px;
    letter-spacing: -0.01em;
}
.membres-boosted-head h3 i { color: var(--gold); }
.membres-boosted-nav { display: flex; align-items: center; gap: 6px; }
.membres-boosted-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}
.membres-boosted-btn:hover { border-color: var(--brand); color: var(--brand); }
.membres-boosted-track { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.membres-boosted-track.is-slider {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
    scrollbar-width: none;
}
.membres-boosted-track.is-slider::-webkit-scrollbar { display: none; }
.membres-boosted-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 13px 14px;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    color: inherit;
    transition: var(--transition);
}
.membres-boosted-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: transparent; }
.membres-boosted-track.is-slider .membres-boosted-card { min-width: min(86vw, 320px); scroll-snap-align: start; }
.membres-boosted-left { min-width: 0; display: flex; align-items: center; gap: 12px; }
.membres-boosted-icon {
    width: 42px;
    height: 42px;
    border-radius: var(--r-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--brand), var(--brand-dark));
    color: #fff;
    flex: 0 0 auto;
    box-shadow: 0 6px 16px rgba(255, 56, 92, 0.25);
}
.membres-boosted-thumb {
    width: 42px;
    height: 42px;
    border-radius: var(--r-sm);
    flex: 0 0 auto;
    overflow: hidden;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}
.membres-boosted-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.membres-boosted-card.has-photo .membres-boosted-left { gap: 10px; }
.membres-boosted-name { margin: 0; font-size: 0.92rem; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.membres-boosted-sub { margin: 2px 0 0; color: var(--text-soft); font-size: 0.8rem; font-weight: 600; }
.membres-boosted-right { display: flex; align-items: center; gap: 6px; }
.membres-boosted-pill {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text-soft);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
}
.membres-boosted-pill.boost { border-color: var(--gold); background: #fffbeb; color: #d97706; }

/* Filtres : voir le bloc « Filtres UNIFIÉS » (lieux / annonces / membres) plus haut */
.membres-filters-section { margin-bottom: 18px; }
.membres-view-toggle-btn { display: none; }

/* ---------- Grille des membres ---------- */
.membres-section { margin-top: 4px; }
.membres-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 18px;
}

/* ---------- Carte membre (vue grille) ---------- */
.membres-member-card {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    display: flex;
    flex-direction: column;
}
.membres-member-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: transparent; }
.membres-member-card a { text-decoration: none; color: inherit; display: flex; flex-direction: column; height: 100%; }

.membres-member-image {
    position: relative;
    aspect-ratio: 1 / 1;
    max-height: 200px;
    background: linear-gradient(135deg, var(--brand), var(--brand-dark));
    overflow: hidden;
    flex-shrink: 0;
}
.membres-member-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    transition: transform 0.45s ease;
}
.membres-member-card:hover .membres-member-image img { transform: scale(1.06); }
.membres-no-photo-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ph-bg);
    color: var(--ph-text);
}
/* Message éclair — bandeau en bas de la photo (effet waou) */
.membres-flash-line {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5;
    margin: 0;
    padding: 28px 10px 10px;
    display: flex;
    align-items: flex-end;
    gap: 7px;
    border: none;
    border-radius: 0;
    background: linear-gradient(
        to top,
        rgba(17, 17, 17, 0.92) 0%,
        rgba(17, 17, 17, 0.55) 42%,
        transparent 100%
    );
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.32;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    pointer-events: none;
    overflow: hidden;
}
.membres-flash-line::after {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 55%;
    height: 100%;
    background: linear-gradient(
        105deg,
        transparent 0%,
        rgba(255, 255, 255, 0.22) 45%,
        transparent 100%
    );
    transition: left 0.65s ease;
    pointer-events: none;
}
.membres-member-card:hover .membres-flash-line::after {
    left: 130%;
}
.membres-flash-line i {
    flex-shrink: 0;
    color: #ffd60a;
    font-size: 0.78rem;
    margin-bottom: 1px;
    filter: drop-shadow(0 0 6px rgba(255, 214, 10, 0.75));
    animation: membres-flash-bolt 2s ease-in-out infinite;
}
.membres-flash-line span {
    flex: 1;
    min-width: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
@keyframes membres-flash-bolt {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.12); opacity: 0.88; }
}
.membres-member-message-badge,
.membres-member-message-badge-list { display: none !important; }

/* Infos */
.membres-member-info {
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1;
}
.membres-member-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.membres-member-pseudo {
    margin: 0;
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1.25;
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}
.membres-member-crown { color: var(--gold); font-size: 0.92rem; flex-shrink: 0; }
.membres-member-age {
    flex-shrink: 0;
    background: var(--bg);
    color: var(--text-soft);
    padding: 2px 9px;
    border-radius: var(--r-pill);
    font-size: 0.74rem;
    font-weight: 700;
    white-space: nowrap;
}
.membres-member-location {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.83rem;
    color: var(--text-soft);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.membres-member-location i { color: var(--brand); font-size: 0.78rem; flex-shrink: 0; }
.membres-member-location span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.membres-member-gender,
.membres-member-orientation {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.membres-member-gender i,
.membres-member-orientation i { color: var(--text-muted); font-size: 0.78rem; flex-shrink: 0; }
.membres-member-gender span,
.membres-member-orientation span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Vue grille : la ville est centrée et collée tout en bas de la carte */
.membres-grid:not(.list-view) .membres-member-location {
    margin-top: auto;
    justify-content: center;
    text-align: center;
}
.membres-grid:not(.list-view) .membres-member-location span { text-align: center; }

/* ---------- Vue liste (cartes horizontales) ---------- */
.membres-grid.list-view {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.membres-grid.list-view .membres-member-card { flex-direction: row; }
.membres-grid.list-view .membres-member-card a { flex-direction: row; width: 100%; }
.membres-grid.list-view .membres-member-image {
    width: 96px;
    max-height: 96px;
    aspect-ratio: 1 / 1;
    height: auto;
    align-self: center;
    flex-shrink: 0;
}
.membres-grid.list-view .membres-member-info { justify-content: center; padding: 12px 16px; }
.membres-grid.list-view .membres-flash-line {
    padding: 18px 8px 7px;
    font-size: 0.66rem;
    gap: 5px;
}
.membres-grid.list-view .membres-flash-line i { font-size: 0.68rem; }
/* ---------- Modale filtres avancés ---------- */
.membres-filters-modal {
    position: fixed;
    inset: 0;
    z-index: 1300;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.membres-filters-modal.active { display: flex; }
.membres-filters-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(16, 24, 40, 0.55);
    backdrop-filter: blur(2px);
}
.membres-filters-modal-content {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 520px;
    max-height: 86vh;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}
.membres-filters-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 22px;
    border-bottom: 1px solid var(--border);
}
.membres-filters-modal-header h3 { margin: 0; font-size: 1.15rem; font-weight: 800; }
.membres-filters-modal-close {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-soft);
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}
.membres-filters-modal-close:hover { border-color: var(--brand); color: var(--brand); }
.membres-filters-modal-body { padding: 22px; overflow-y: auto; }
.membres-filter-group { margin-bottom: 22px; }
.membres-filter-group h4 { font-size: 0.95rem; font-weight: 700; margin: 0 0 12px; }
.membres-filter-options { display: flex; flex-wrap: wrap; gap: 10px; }
.membres-filter-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 14px;
    border: 1px solid var(--border);
    border-radius: var(--r-pill);
    cursor: pointer;
    transition: var(--transition);
    font-size: 0.88rem;
    color: var(--text);
}
.membres-filter-checkbox:hover { border-color: var(--brand); }
.membres-filter-checkbox input { accent-color: var(--brand); width: 16px; height: 16px; }
.membres-filter-range { display: flex; align-items: center; gap: 14px; }
.membres-filter-range input[type="range"] { flex: 1; accent-color: var(--brand); }
.membres-filter-range span { font-size: 0.88rem; color: var(--text); font-weight: 600; min-width: 46px; text-align: right; }
.membres-filters-modal-footer {
    display: flex;
    gap: 12px;
    padding: 18px 22px;
    border-top: 1px solid var(--border);
}
.membres-btn-reset-filters,
.membres-btn-apply-filters {
    flex: 1;
    padding: 12px 20px;
    border-radius: var(--r-pill);
    font-family: inherit;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    transition: var(--transition);
}
.membres-btn-reset-filters { background: var(--surface); border: 1px solid var(--border); color: var(--text); }
.membres-btn-reset-filters:hover { border-color: var(--text-muted); }
.membres-btn-apply-filters { background: var(--brand); border: 1px solid var(--brand); color: #fff; }
.membres-btn-apply-filters:hover { background: var(--brand-dark); border-color: var(--brand-dark); }

/* ---------- Barre de recherche étendue (géoloc / rayon) ---------- */
.membres-search-input-wrapper { position: relative; display: flex; align-items: center; gap: 10px; }
.membres-search-type-select {
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--surface);
    font-size: 0.88rem;
    color: var(--text);
    cursor: pointer;
}
.membres-location-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: var(--brand);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}
.membres-location-btn:hover { background: var(--brand-dark); transform: scale(1.05); }
.membres-radius-selector {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--bg);
    border-radius: var(--r-md);
    border: 1px solid var(--border);
}
.membres-radius-selector label { font-size: 0.88rem; font-weight: 600; color: var(--text); }
.membres-radius-selector select {
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--surface);
    font-size: 0.88rem;
    color: var(--text);
    cursor: pointer;
}

/* ---------- Pagination / chargement ---------- */
.membres-pagination-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin-top: 36px;
    padding: 16px;
}
.loading-indicator { display: flex; align-items: center; gap: 12px; color: var(--text-soft); font-size: 0.9rem; }
.loading-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid var(--border);
    border-top-color: var(--brand);
    border-radius: 50%;
    animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.load-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 26px;
    border: none;
    border-radius: var(--r-pill);
    background: var(--brand);
    color: #fff;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
}
.load-more-btn:hover { background: var(--brand-dark); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.load-more-btn:disabled { background: var(--text-muted); cursor: not-allowed; transform: none; box-shadow: none; }
.error-message {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--brand-dark);
    font-size: 0.9rem;
    padding: 12px 20px;
    background: var(--brand-soft);
    border: 1px solid #fecdd3;
    border-radius: var(--r-pill);
}

/* ---------- Filtres messages (desktop) ---------- */
.messages-desktop-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid var(--border);
    border-radius: var(--r-pill);
    background: var(--surface);
    color: var(--text-soft);
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: var(--transition);
}
.messages-desktop-filter-btn:hover { border-color: var(--brand); color: var(--brand); }
.messages-desktop-filter-btn.active { background: var(--brand); color: #fff; border-color: var(--brand); }
.messages-desktop-filter-count { background: rgba(255, 255, 255, 0.28); padding: 1px 7px; border-radius: var(--r-pill); font-size: 0.72rem; font-weight: 700; }

/* ---------- Censure photos invités ---------- */
.membres-member-image img.censor-avatar:not(.uncensored) {
    filter: blur(12px) brightness(0.62) saturate(0.7) !important;
    transform: scale(1.08);
}

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
    .membres-main { padding: 16px 16px calc(96px + env(safe-area-inset-bottom, 0px)); }
    .membres-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .membres-view-toggle-btn { display: inline-flex; }
    .membres-member-info { padding: 10px 12px; gap: 4px; }
    .membres-member-pseudo { font-size: 0.9rem; }
    .membres-member-age { font-size: 0.68rem; padding: 2px 7px; }
    .membres-member-location,
    .membres-member-gender,
    .membres-member-orientation { font-size: 0.76rem; }
    .membres-boosted-head h3 { font-size: 0.92rem; }

    /* Vue liste plein large */
    .membres-grid.list-view .membres-member-card { min-height: 116px; }
    .membres-grid.list-view .membres-member-image { width: 104px; }
}
@media (max-width: 380px) {
    .membres-grid { gap: 10px; }
    .membres-member-pseudo { font-size: 0.84rem; }
}

/* ============================================================
   PAGE PROFIL (design brand — tokens app.css)
   ============================================================ */
/* Accès bloqué */
.blocked-access-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(900px 320px at 50% -8%, var(--brand-soft), transparent 72%),
        var(--bg);
    padding: 20px;
}

.blocked-access-content {
    background: var(--surface);
    border-radius: var(--r-lg);
    border: 1px solid var(--border);
    padding: 40px;
    text-align: center;
    max-width: 500px;
    box-shadow: var(--shadow-lg);
}

.blocked-access-icon {
    font-size: 4rem;
    color: var(--brand);
    margin-bottom: 20px;
}

.blocked-access-content h1 {
    color: var(--text);
    margin-bottom: 15px;
    font-size: 1.8rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.blocked-access-content p {
    color: var(--text-soft);
    margin-bottom: 30px;
    line-height: 1.6;
}

.blocked-access-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.blocked-access-btn {
    padding: 12px 24px;
    border: none;
    border-radius: var(--r-pill);
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: var(--transition);
}

.blocked-access-btn:not(.secondary) {
    background: var(--brand);
    color: #fff;
    box-shadow: 0 4px 14px rgba(255, 56, 92, 0.28);
}

.blocked-access-btn.secondary {
    background: var(--bg);
    color: var(--text);
    border: 1px solid var(--border);
}

.blocked-access-btn:hover {
    transform: translateY(-2px);
}

.blocked-access-btn:not(.secondary):hover {
    background: var(--brand-dark);
}

.blocked-access-btn.secondary:hover {
    background: var(--brand-soft);
    border-color: var(--brand-soft);
    color: var(--brand-dark);
}

/* Page profil — design brand (tokens app.css) */
body.page-profil {
    background:
        radial-gradient(900px 320px at 50% -6%, var(--brand-soft), transparent 72%),
        var(--bg);
}

/* Layout principal */
.profil-main {
    max-width: var(--container);
    margin: 0 auto;
    padding: 20px 20px calc(88px + env(safe-area-inset-bottom, 0px));
}

@media (min-width: 769px) {
    body.page-profil .profil-main {
        padding: 28px 24px 48px;
    }
}

/* Barre d'actions desktop */
body.page-profil .header-desktop-back {
    padding: 0 0 18px;
    margin-bottom: 0;
}

body.page-profil .header-desktop-back-content {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
}

body.page-profil .header-desktop-back-content h1 {
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--text);
    margin: 0;
    flex: 1;
    min-width: 120px;
}

body.page-profil .header-desktop-back-btn {
    border-radius: var(--r-pill);
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text);
    font-weight: 600;
    font-size: 0.88rem;
    padding: 8px 14px;
    transition: var(--transition);
}

body.page-profil .header-desktop-back-btn:hover {
    background: var(--brand-soft);
    border-color: var(--brand-soft);
    color: var(--brand-dark);
}

body.page-profil .header-desktop-back-main-btn {
    border-radius: var(--r-pill);
    background: var(--brand);
    border: 1px solid var(--brand);
    color: #fff;
    font-weight: 700;
    font-size: 0.88rem;
    padding: 9px 16px;
    box-shadow: 0 4px 14px rgba(255, 56, 92, 0.25);
    transition: var(--transition);
}

body.page-profil .header-desktop-back-main-btn:hover {
    background: var(--brand-dark);
    border-color: var(--brand-dark);
    transform: translateY(-1px);
}

body.page-profil .header-desktop-back-action-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-soft);
    transition: var(--transition);
}

body.page-profil .header-desktop-back-action-btn:hover {
    background: var(--brand-soft);
    border-color: var(--brand-soft);
    color: var(--brand);
}

.profil-content-wrapper {
    width: 100%;
}

/* Header du profil */
.profil-header {
    background: white;
    border-radius: 8px;
    padding: 12px 20px;
    margin-bottom: 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    border: 1px solid #e5e7eb;
}

.profil-header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.profil-back-btn {
    background: #f3f4f6;
    border: none;
    border-radius: 6px;
    padding: 6px 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #374151;
    font-weight: 500;
}

.profil-back-btn:hover {
    background: #e5e7eb;
}

.profil-header h1 {
    font-size: 18px;
    font-weight: 600;
    color: #111827;
    margin: 0;
}

.profil-header-actions {
    display: flex;
    gap: 8px;
}

.profil-action-btn {
    background: white;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    padding: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    color: #6b7280;
}

.profil-action-btn:hover {
    border-color: #ff385c;
    color: #ff385c;
}

/* Container principal */
body.page-profil {
    --profil-photo-aspect: 4 / 5;
    --profil-photo-max-height-mobile: 62vh;
    --profil-photo-max-height-desktop: 480px;
    --profil-photo-max-width: 300px;
}

.profil-container {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 20px;
    align-items: start;
    margin-top: 4px;
}

/* Section gauche - Photo et stats */
.profil-info-section {
    background: var(--surface);
    border-radius: var(--r-lg);
    padding: 22px;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border);
    position: sticky;
    top: 88px;
}

.profil-photo-container {
    position: relative;
    margin-bottom: 20px;
    text-align: center;
}

.profil-hero-back-btn {
    display: none;
}

.profil-photo {
    width: 100%;
    max-width: var(--profil-photo-max-width, 300px);
    aspect-ratio: var(--profil-photo-aspect, 4 / 5);
    height: auto;
    border-radius: var(--r-lg);
    object-fit: cover;
    object-position: top center;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    margin: 0 auto;
}

.profil-photo:hover {
    transform: scale(1.015);
    box-shadow: var(--shadow-md);
}

/* Placeholder sans photo de profil */
.profil-no-photo-placeholder {
    width: 100%;
    max-width: var(--profil-photo-max-width, 300px);
    aspect-ratio: var(--profil-photo-aspect, 4 / 5);
    height: auto;
    border-radius: var(--r-lg);
    margin: 0 auto;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    position: relative;
}

.profil-no-photo-placeholder::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background: rgba(0, 0, 0, 0.04);
    border-radius: 50%;
}

.profil-no-photo-placeholder span {
    position: relative;
    z-index: 1;
}

.profil-online-status {
    position: absolute;
    bottom: 8px;
    right: calc(50% - 140px + 8px);
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 3px solid var(--surface);
    background: var(--green);
    box-shadow: var(--shadow-sm);
}

.profil-online-status.online {
    background: #10b981;
}

.profil-online-status.offline {
    background: #6b7280;
}

.profil-premium-badge {
    position: absolute;
    top: 8px;
    right: 50%;
    transform: translateX(50%);
    background: #fbbf24;
    color: #333;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
}

.profil-details {
    text-align: center;
    margin-bottom: 20px;
}

.profil-name-section {
    margin-bottom: 12px;
}

.profil-pseudo {
    font-size: clamp(1.25rem, 2.5vw, 1.65rem);
    font-weight: 800;
    color: var(--text);
    letter-spacing: -0.02em;
    margin: 0 0 8px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}

.profil-age {
    background: var(--brand-soft);
    color: var(--brand-dark);
    padding: 4px 12px;
    border-radius: var(--r-pill);
    font-size: 0.8rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.profil-gender-symbol { color: var(--brand); }

.profil-location {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 14px;
    color: #6b7280;
    margin-bottom: 12px;
}

.profil-location i {
    color: #ff385c;
    font-size: 14px;
}

.profil-description {
    font-size: 0.9rem;
    color: var(--text-soft);
    line-height: 1.55;
    margin: 0;
    padding: 12px 14px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
}

/* Statistiques sous la photo */
.profil-stats-section {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    margin-top: 14px;
}

.profil-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.profil-stat-item {
    text-align: center;
    padding: 14px 8px;
    background: var(--surface);
    border-radius: var(--r-md);
    transition: var(--transition);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
}

.profil-stat-item:hover {
    border-color: var(--brand);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.profil-stat-item i {
    color: var(--brand);
    font-size: 1rem;
    margin-bottom: 4px;
    display: block;
}

.profil-stat-value {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--text);
    margin-bottom: 2px;
    display: block;
}

.profil-stat-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.profil-user-salon {
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-width: 0;
    padding: 10px 12px;
    border-radius: var(--r-pill);
    border: 1px solid var(--border);
    background: var(--bg);
    text-decoration: none;
    color: var(--text);
    transition: var(--transition);
}

.profil-user-salon:hover {
    border-color: var(--brand);
    background: var(--brand-soft);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.profil-user-salon-icon {
    color: #ff385c;
    flex: 0 0 auto;
}

.profil-user-salon-text {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 12px;
    font-weight: 600;
}

.profil-user-salon-lock {
    color: #6b7280;
    flex: 0 0 auto;
    font-size: 12px;
}

/* Section droite - Onglets */
.profil-tabs-section {
    background: var(--surface);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border);
}

.profil-tabs-header {
    display: flex;
    justify-content: center;
    gap: 4px;
    padding: 10px 12px;
    margin: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
}

.profil-tab-btn {
    flex: 0 1 auto;
    background: transparent;
    border: none;
    border-radius: var(--r-pill);
    padding: 9px 16px;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-soft);
}

.profil-tab-btn:hover {
    color: var(--text);
    background: rgba(255, 255, 255, 0.7);
}

.profil-tab-btn.active {
    background: var(--brand);
    color: #fff;
    font-weight: 700;
    box-shadow: 0 4px 14px rgba(255, 56, 92, 0.28);
}

.profil-tab-btn.active i {
    color: inherit;
}

.profil-tab-btn i {
    font-size: 1rem;
}

.profil-tabs-content {
    padding: 22px;
    background: var(--surface);
}

.profil-tab-pane {
    display: none;
}

.profil-tab-pane.active {
    display: block;
}

/* Section informations dans les onglets */
/* Dans un onglet, la section info est plate (pas de double carte) */
.profil-tab-pane .profil-info-section {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    position: static;
}

.profil-info-section h3,
.profil-temoignages-header h3 {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--text);
    margin: 0 0 16px 0;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
    letter-spacing: -0.02em;
}

.profil-info-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

.profil-info-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 16px;
    background: var(--bg);
    border-radius: var(--r-md);
    transition: var(--transition);
    border: 1px solid var(--border);
    width: 100%;
    box-sizing: border-box;
    min-width: 0;
    flex-shrink: 0;
}

.profil-info-item:hover {
    background: var(--surface);
    border-color: var(--brand);
    box-shadow: var(--shadow-sm);
}

.profil-info-item i {
    color: var(--brand);
    font-size: 0.95rem;
    width: 20px;
    text-align: center;
}

.profil-info-label {
    font-weight: 700;
    color: var(--text);
    min-width: 80px;
    font-size: 0.9rem;
}

.profil-info-value {
    color: var(--text-soft);
    font-weight: 500;
    flex: 1;
    min-width: 0;
    font-size: 0.9rem;
}

.profil-description-text {
    font-size: 0.92rem;
    color: var(--text-soft);
    line-height: 1.65;
    margin: 0;
    padding: 16px;
    background: var(--bg);
    border-radius: var(--r-md);
    border: 1px solid var(--border);
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* Onglet Photos */
.profil-photos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
}

.profil-photo-item {
    aspect-ratio: 1;
    border-radius: var(--r-md);
    overflow: hidden;
    transition: var(--transition);
    cursor: pointer;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
}

.profil-photo-item:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: transparent;
}

.profil-photo-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profil-photo-item--video .profil-video-thumb {
    position: relative;
    width: 100%;
    height: 100%;
    background: #111827;
}

.profil-photo-item--video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.profil-video-play-badge {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(to bottom, rgba(0,0,0,0.12), rgba(0,0,0,0.42));
    color: #fff;
    font-size: 1.35rem;
    pointer-events: none;
}

.profil-videos-count,
.profil-videos-limit {
    display: block;
    font-size: 0.82rem;
    color: var(--text-muted, #64748b);
}

.photo-modal-video {
    max-width: min(92vw, 960px);
    max-height: 78vh;
    width: 100%;
    border-radius: 12px;
    background: #000;
}

.pa-photo-item--video video,
.pa-viewer-photo--video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pa-photo-item--video,
.pa-viewer-photo--video {
    position: relative;
    background: #111827;
}

.pa-video-badge,
.pa-viewer-video-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    color: #fff;
    background: rgba(0,0,0,0.28);
}

.profil-private-albums {
    margin-bottom: 22px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--border);
}

.profil-private-albums-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.profil-private-albums-head h3 {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 1rem;
    font-weight: 800;
    color: var(--text);
}

.profil-private-albums-head h3 i {
    color: var(--brand);
}

.profil-private-albums-manage {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--brand);
    text-decoration: none;
}

.profil-private-albums-manage:hover {
    text-decoration: underline;
}

.profil-private-albums-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
}

.profil-private-album-card {
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    overflow: hidden;
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.profil-private-album-cover {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    background: var(--bg);
}

.profil-private-album-blur {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: blur(18px) saturate(0.85);
    transform: scale(1.12);
    opacity: 0.55;
}

.profil-private-album-blur--empty {
    background: linear-gradient(145deg, var(--brand-soft) 0%, var(--surface) 100%);
    filter: none;
    transform: none;
    opacity: 1;
}

.profil-private-album-lock {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(17, 24, 39, 0.28);
    color: #fff;
    font-size: 1.35rem;
}

.profil-private-album-meta {
    padding: 10px 12px 0;
    display: grid;
    gap: 2px;
}

.profil-private-album-meta strong {
    font-size: 0.88rem;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profil-private-album-meta span {
    font-size: 0.76rem;
    color: var(--text-soft);
}

.profil-private-album-action {
    padding: 10px 12px 12px;
}

.profil-private-album-btn {
    width: 100%;
    min-height: 36px;
    border: none;
    border-radius: var(--r-pill);
    background: var(--brand);
    color: #fff;
    font: inherit;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.profil-private-album-btn:hover {
    filter: brightness(1.05);
}

.profil-private-album-status {
    display: block;
    text-align: center;
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--text-soft);
}

.profil-private-album-card--granted .profil-private-album-lock {
    background: rgba(255, 56, 92, 0.22);
}

.profil-private-album-card--viewed .profil-private-album-lock,
.profil-private-album-card--locked .profil-private-album-lock {
    background: rgba(17, 24, 39, 0.38);
}

.profil-private-album-card--viewed .profil-private-album-status,
.profil-private-album-card--locked .profil-private-album-status {
    color: var(--text-muted);
}

/* Onglet Témoignages */
.profil-temoignages-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border, #ececf0);
}

.profil-temoignages-header h3 {
    margin: 0;
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--text, #222);
}

.profil-add-temoignage-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    background: var(--brand, #ff385c) !important;
    color: white !important;
    border: none !important;
    border-radius: 999px !important;
    padding: 9px 18px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    box-shadow: 0 6px 16px rgba(255, 56, 92, 0.3) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    visibility: visible !important;
    opacity: 1 !important;
}

@media (max-width: 768px) {
    .profil-add-temoignage-btn {
        display: none !important;
    }
}

.profil-add-temoignage-btn:hover {
    background: var(--brand-dark, #e11d48) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 10px 22px rgba(255, 56, 92, 0.4) !important;
}

.profil-temoignage-header {
    margin-bottom: 12px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}
.profil-temoignage-header .profil-temoignage-author { flex: 1; min-width: 0; }

.profil-temoignage-author .author-avatar-wrap {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
}

.profil-temoignage-author .author-avatar-wrap .no-photo-placeholder {
    --ph-size: 0.72rem !important;
}

.profil-temoignage-menu {
    position: relative;
    flex-shrink: 0;
}

.profil-temoignage-menu-btn {
    width: 34px;
    height: 34px;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--surface);
    color: var(--text-soft);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition);
    font-size: 0.85rem;
}

.profil-temoignage-menu-btn:hover,
.profil-temoignage-menu.open .profil-temoignage-menu-btn {
    border-color: var(--brand);
    color: var(--brand);
    background: var(--brand-soft);
}

.profil-temoignage-menu-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 190px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-lg);
    padding: 6px 0;
    z-index: 30;
    display: none;
}

.profil-temoignage-menu.open .profil-temoignage-menu-dropdown {
    display: block;
}

.profil-temoignage-menu-form {
    margin: 0;
    padding: 0;
}

.profil-temoignage-menu-item {
    width: 100%;
    border: none;
    background: none;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
    text-align: left;
    transition: background 0.15s ease, color 0.15s ease;
}

.profil-temoignage-menu-item:hover {
    background: var(--brand-soft);
    color: var(--brand-dark);
}

.profil-temoignage-menu-item i {
    width: 16px;
    text-align: center;
    color: var(--text-soft);
    flex-shrink: 0;
}

.profil-temoignage-menu-item--danger {
    color: #dc3545;
}

.profil-temoignage-menu-item--danger:hover {
    background: #fef2f2;
    color: #b91c1c;
}

.profil-temoignage-badge-hidden {
    font-size: 11px;
    font-weight: 800;
    color: #991b1b;
}

.profil-empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-muted);
}

.profil-empty-state i {
    font-size: 1.75rem;
    margin-bottom: 16px;
    color: var(--brand);
    opacity: 1;
    background: var(--brand-soft);
    width: 72px;
    height: 72px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.profil-empty-state p {
    font-size: 16px;
    margin: 0;
}

.profil-temoignages-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.profil-temoignage-item {
    background: var(--surface);
    border-radius: var(--r-lg);
    padding: 18px;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}

.profil-temoignage-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--brand);
}

.profil-temoignage-author {
    display: flex;
    align-items: center;
    gap: 12px;
}

.profil-temoignage-author .author-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

.profil-author-info {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.profil-author-name {
    font-weight: 700;
    color: var(--text, #222);
    font-size: 14px;
    margin-bottom: 2px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.profil-temoignage-date {
    font-size: 12px;
    color: var(--text-muted, #9ca3af);
}

.profil-temoignage-text {
    font-size: 14.5px;
    color: var(--text, #3a3a3a);
    line-height: 1.6;
    margin: 0;
    padding-top: 4px;
}

/* Responsive — mobile : colonne pleine largeur, propre */
@media (max-width: 1024px) {
    .profil-container {
        grid-template-columns: 1fr;
        gap: 14px;
        width: 100%;
    }

    .profil-container > .profil-info-section {
        position: static;
        width: 100%;
        max-width: none;
        margin: 0;
    }

    .profil-tabs-section {
        width: 100%;
        min-width: 0;
    }
}

@media (max-width: 768px) {
    body.page-profil {
        background: var(--bg);
        padding-top: 0;
    }

    body.page-profil .app-nav {
        display: none !important;
    }

    body.page-profil .profil-main {
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 0 0 calc(72px + env(safe-area-inset-bottom, 0px));
    }

    body.page-profil .profil-content-wrapper,
    body.page-profil .profil-container {
        width: 100%;
        min-width: 0;
        margin: 0;
        padding: 0;
        gap: 12px;
    }

    body.page-profil .header-desktop-back {
        display: none;
    }

    /* Photo hero — plein écran en haut (sans bande blanche) */
    body.page-profil .profil-container > .profil-info-section {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        width: 100%;
        margin: 0;
        padding: 0;
        border: none;
        border-radius: 0;
        box-shadow: none;
        background: var(--surface);
        overflow: hidden;
    }

    body.page-profil .profil-photo-container {
        position: relative;
        width: 100vw;
        max-width: 100vw;
        margin: calc(-1 * env(safe-area-inset-top, 0px)) calc(50% - 50vw) 0;
        text-align: center;
        overflow: hidden;
        aspect-ratio: var(--profil-photo-aspect, 4 / 5);
        max-height: var(--profil-photo-max-height-mobile, 62vh);
        min-height: 0;
        border-radius: 0;
        background: #0f172a;
    }

    body.page-profil .profil-photo-container.membres-member-image {
        aspect-ratio: var(--profil-photo-aspect, 4 / 5);
        max-height: var(--profil-photo-max-height-mobile, 62vh);
        background: #0f172a;
    }

    body.page-profil .profil-photo-container::before {
        content: '';
        position: absolute;
        inset: 0 0 auto 0;
        height: 120px;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.38) 0%, rgba(0, 0, 0, 0.08) 55%, transparent 100%);
        pointer-events: none;
        z-index: 2;
    }

    body.page-profil .profil-hero-back-btn {
        position: absolute;
        top: calc(10px + env(safe-area-inset-top, 0px));
        left: calc(12px + env(safe-area-inset-left, 0px));
        z-index: 15;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border: none;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.94);
        color: var(--text);
        font-size: 1rem;
        cursor: pointer;
        box-shadow: 0 4px 16px rgba(17, 24, 39, 0.18);
        transition: transform 0.15s ease, background 0.15s ease;
    }

    body.page-profil .profil-hero-back-btn:active {
        transform: scale(0.94);
        background: #fff;
    }

    body.page-profil .profil-photo,
    body.page-profil .profil-no-photo-placeholder {
        display: block;
        width: 100%;
        max-width: none;
        height: 100%;
        min-height: 100%;
        max-height: none;
        aspect-ratio: auto;
        margin: 0;
        padding: 0;
        border: none;
        border-radius: 0;
        box-shadow: none;
        object-fit: cover;
        object-position: top center;
        vertical-align: top;
    }

    body.page-profil .profil-photo:hover {
        transform: none;
        box-shadow: none;
    }

    body.page-profil .profil-no-photo-placeholder {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    body.page-profil .profil-online-status {
        display: none;
    }

    /* Message éclair — bas de la photo, éclair à côté du texte */
    body.page-profil .profil-photo-container .membres-flash-line {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 7px;
        bottom: 4px;
        padding: 18px 12px 10px;
    }

    body.page-profil .profil-photo-container .membres-flash-line i {
        margin-bottom: 0;
        align-self: center;
    }

    body.page-profil .profil-photo-container .membres-flash-line span {
        display: block;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal;
        line-height: 1.32;
    }

    body.page-profil .profil-message-section--desktop {
        display: none !important;
    }

    /* Infos sous la photo — layout profil d'origine */
    body.page-profil .profil-details {
        width: 100%;
        margin: 0;
        padding: 12px 14px 14px;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        box-sizing: border-box;
        background: var(--surface);
    }

    body.page-profil .profil-name-section {
        width: 100%;
        margin-bottom: 0;
    }

    body.page-profil .profil-pseudo {
        font-size: 1.2rem;
        justify-content: center;
    }

    body.page-profil .profil-age {
        background: var(--brand-soft);
        color: var(--brand-dark);
    }

    body.page-profil .profil-message-section--edit {
        width: 100%;
        max-width: 100%;
        margin: 4px 0 0;
        justify-content: center;
    }

    body.page-profil .profil-stats-section {
        width: 100%;
        margin-top: 10px;
        padding: 0;
    }

    body.page-profil .profil-stats-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px;
        width: 100%;
    }

    body.page-profil .profil-stat-item {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 5px;
        padding: 6px 8px;
        min-height: 0;
        background: var(--bg);
        border: 1px solid var(--border);
        border-radius: var(--r-sm);
        box-shadow: none;
    }

    body.page-profil .profil-stat-item i {
        font-size: 0.72rem;
        margin-bottom: 0;
        display: inline-block;
    }

    body.page-profil .profil-stat-value {
        font-size: 0.88rem;
        font-weight: 700;
        margin: 0;
        color: var(--text);
        line-height: 1;
    }

    body.page-profil .profil-stat-label {
        display: inline;
        font-size: 0.68rem;
        font-weight: 600;
        text-transform: none;
        letter-spacing: 0;
        color: var(--text-soft);
        line-height: 1;
    }

    body.page-profil .profil-user-salon {
        width: 100%;
        margin-top: 6px;
        padding: 7px 10px;
        font-size: 0.78rem;
    }

    body.page-profil .profil-user-salon-text {
        font-size: 0.78rem;
    }

    /* Onglets — pleine largeur en dessous */
    body.page-profil .profil-tabs-section {
        width: calc(100% - 24px);
        margin: 0 12px;
        border-radius: var(--r-lg);
        overflow: hidden;
        box-sizing: border-box;
    }

    body.page-profil .profil-tabs-header {
        display: flex;
        justify-content: stretch;
        gap: 4px;
        padding: 7px 10px;
        background: var(--bg);
        border-bottom: 1px solid var(--border);
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    body.page-profil .profil-tabs-header::-webkit-scrollbar {
        display: none;
    }

    body.page-profil .profil-tab-btn {
        flex: 1 1 0;
        min-width: 0;
        padding: 6px 6px;
        font-size: 0.72rem;
        gap: 4px;
        min-height: 34px;
        white-space: nowrap;
    }

    body.page-profil .profil-tab-btn i {
        font-size: 0.78rem;
        flex-shrink: 0;
    }

    body.page-profil .profil-tabs-content {
        width: 100%;
        padding: 10px 10px;
        box-sizing: border-box;
    }

    body.page-profil .profil-upload-photos-btn {
        padding: 8px 12px;
        font-size: 0.78rem;
        gap: 6px;
    }

    /* Contenu onglets — ne pas hériter du layout identité */
    body.page-profil .profil-tab-pane .profil-info-section {
        display: block;
        width: 100%;
        padding: 0;
        margin: 0;
        background: transparent;
        border: none;
        box-shadow: none;
    }

    body.page-profil .profil-info-section h3,
    body.page-profil .profil-temoignages-header h3 {
        font-size: 0.92rem;
        margin-bottom: 8px;
        padding-bottom: 6px;
    }

    body.page-profil .profil-tab-pane > .profil-info-section + .profil-info-section {
        margin-top: 14px;
    }

    body.page-profil .profil-info-grid {
        display: flex;
        flex-direction: column;
        gap: 5px;
        width: 100%;
    }

    body.page-profil .profil-info-item {
        width: 100%;
        padding: 7px 10px;
        min-height: 0;
        flex-direction: row;
        align-items: center;
        gap: 7px;
        border-radius: var(--r-sm);
    }

    body.page-profil .profil-info-item i {
        font-size: 0.74rem;
        width: 14px;
        flex-shrink: 0;
    }

    body.page-profil .profil-info-label {
        min-width: 0;
        flex-shrink: 0;
        font-size: 0.76rem;
        font-weight: 600;
    }

    body.page-profil .profil-info-value {
        font-size: 0.76rem;
        font-weight: 500;
        text-align: right;
        line-height: 1.25;
    }

    body.page-profil .profil-info-item .edit-input,
    body.page-profil .profil-info-item .edit-select,
    body.page-profil .profil-info-item .edit-textarea {
        min-height: 34px;
        padding: 6px 8px;
        font-size: 0.82rem;
        margin-top: 0;
    }

    body.page-profil .profil-description-text {
        padding: 9px 10px;
        font-size: 0.82rem;
        line-height: 1.5;
    }

    body.page-profil .profil-photos-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        width: 100%;
    }

    body.page-profil .profil-temoignages-list,
    body.page-profil .profil-temoignage-item {
        width: 100%;
    }

}

/* Desktop profil */
@media (min-width: 769px) {
    /* Photo rectangle pleine largeur, bas droit (barre statut), haut = coins carte */
    body.page-profil .profil-container > .profil-info-section {
        padding: 0 0 22px;
        overflow: hidden;
    }

    body.page-profil .profil-photo-container {
        margin-bottom: 0;
    }

    body.page-profil .profil-photo-container.membres-member-image {
        width: 100%;
        max-width: none;
        aspect-ratio: var(--profil-photo-aspect, 4 / 5);
        max-height: var(--profil-photo-max-height-desktop, 480px);
        margin: 0;
        overflow: hidden;
        border-radius: 0;
    }

    body.page-profil .profil-photo-container.membres-member-image.avatar-status::after {
        border-radius: 0;
    }

    body.page-profil .profil-photo,
    body.page-profil .profil-no-photo-placeholder {
        width: 100%;
        max-width: none;
        height: 100%;
        margin: 0;
        border: none;
        border-radius: 0;
        box-shadow: none;
        object-fit: cover;
        display: block;
    }

    body.page-profil .profil-photo:hover {
        transform: none;
    }

    body.page-profil .profil-photo-container .membres-flash-line {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 7px;
        bottom: 4px;
        padding: 18px 12px 10px;
    }

    body.page-profil .profil-details {
        padding: 18px 20px 0;
        margin-bottom: 0;
    }

    body.page-profil .profil-message-section--desktop {
        display: none !important;
    }

    /* Espacement entre blocs (Informations, Localisation, etc.) */
    body.page-profil .profil-tab-pane > .profil-info-section + .profil-info-section {
        margin-top: 28px;
        padding-top: 4px;
    }

    body.page-profil .profil-tab-pane .profil-info-section h3,
    body.page-profil .profil-temoignages-header h3,
    body.page-profil .profil-photos-edit-header h3 {
        margin-top: 0;
        margin-bottom: 14px;
        padding-top: 2px;
        padding-bottom: 10px;
    }

    body.page-profil .profil-temoignages-header {
        margin-top: 0;
    }

}

/* FAB message desktop — comme annonces-fab-mobile */
body.page-profil .profil-desktop-fab-message {
    display: none;
}

@media (min-width: 769px) {
    body.page-profil .profil-desktop-fab-message {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        right: 32px;
        bottom: 32px;
        z-index: 1090;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        border: none;
        background: var(--brand);
        color: #fff;
        font-size: 1.45rem;
        cursor: pointer;
        box-shadow: 0 12px 28px rgba(255, 56, 92, 0.4);
        transition: var(--transition);
    }

    body.page-profil .profil-desktop-fab-message:hover {
        background: var(--brand-dark);
        transform: translateY(-2px);
    }

    body.page-profil .profil-desktop-fab-message:active {
        transform: scale(0.95);
    }

    body.page-profil .profil-desktop-fab-message:disabled {
        opacity: 0.65;
        cursor: not-allowed;
        transform: none;
    }
}

@media (max-width: 480px) {
    body.page-profil .profil-details {
        padding: 10px 12px 12px;
    }

    body.page-profil .profil-tabs-section {
        width: calc(100% - 20px);
        margin: 0 10px;
    }

    body.page-profil .profil-tab-btn {
        font-size: 0;
        gap: 0;
        padding: 5px 4px;
        min-height: 30px;
    }

    body.page-profil .profil-tab-btn i {
        font-size: 14px;
        margin: 0;
    }

    body.page-profil .profil-tabs-content {
        padding: 8px 8px;
    }

    body.page-profil .profil-photos-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
    }

    body.page-profil .profil-info-item {
        padding: 6px 9px;
        gap: 6px;
    }

    body.page-profil .profil-info-label {
        font-size: 0.72rem;
    }

    body.page-profil .profil-info-value {
        font-size: 0.72rem;
    }

    body.page-profil .profil-stat-item {
        padding: 5px 6px;
        gap: 4px;
    }

    body.page-profil .profil-stat-value {
        font-size: 0.82rem;
    }

    body.page-profil .profil-stat-label {
        font-size: 0.64rem;
    }
}

/* Styles pour les champs d'édition intégrés */
.edit-input,
.edit-select,
.edit-textarea {
    background: #f8f9fa;
    border: 1px solid #d8dee7;
    border-radius: 10px;
    padding: 8px 10px;
    font-size: 0.9rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
    width: 100%;
    margin-top: 5px;
}

.edit-input:focus,
.edit-select:focus,
.edit-textarea:focus {
    outline: none;
    border-color: #ff385c;
    box-shadow: 0 0 0 3px rgba(255, 56, 92, 0.1);
    background: white;
}

.edit-textarea {
    resize: vertical;
    min-height: 60px;
    font-family: inherit;
}

.edit-age-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.edit-age-group .edit-input {
    width: 100%;
}

/* Amélioration de l'affichage des champs d'âge pour les couples */
.edit-age-group .partner-field {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #e5e7eb;
    position: relative;
}

.edit-age-group .partner-field::before {
    content: "♀ Partenaire";
    display: block;
    font-size: 0.8rem;
    color: #6b7280;
    margin-bottom: 4px;
    font-weight: 500;
}

.edit-age-group .edit-input:first-child {
    position: relative;
}

.edit-age-group .edit-input:first-child::before {
    content: "♂ Principal";
    display: block;
    font-size: 0.8rem;
    color: #6b7280;
    margin-bottom: 4px;
    font-weight: 500;
}

/* .partner-field -> mutualisé dans core.css */

/* .partner-field.show -> mutualisé dans core.css */

/* Responsive pour les champs d'édition */
@media (max-width: 768px) {
    .edit-age-group {
        flex-direction: column;
        gap: 12px;
    }
    
    .edit-age-group .partner-field {
        margin-top: 16px;
        padding-top: 16px;
        border-top: 2px solid #e5e7eb;
    }
    
    .edit-age-group .partner-field::before {
        font-size: 0.9rem;
        margin-bottom: 6px;
    }
    
    .edit-age-group .edit-input:first-child::before {
        font-size: 0.9rem;
        margin-bottom: 6px;
    }
    
    .edit-input,
    .edit-select,
    .edit-textarea {
        font-size: 15px; /* Évite le zoom sur iOS */
        padding: 10px 11px;
        border-radius: 8px;
    }
    
    .edit-input[type="date"] {
        min-height: 44px;
    }
}

/* Styles spécifiques pour très petits écrans */
@media (max-width: 480px) {
    .edit-age-group {
        gap: 16px;
    }
    
    .edit-age-group .partner-field {
        margin-top: 20px;
        padding-top: 20px;
    }
    
    .edit-age-group .partner-field::before,
    .edit-age-group .edit-input:first-child::before {
        font-size: 1rem;
        margin-bottom: 8px;
    }
    
    .edit-input,
    .edit-select,
    .edit-textarea {
        padding: 10px 11px;
        font-size: 15px;
    }
    
    .edit-input[type="date"] {
        min-height: 44px;
    }
}

/* Styles pour le bouton Modifier */
.header-desktop-back-action-btn[title="Modifier"] {
    background: #ff385c !important;
    color: white !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 8px 12px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    visibility: visible !important;
    opacity: 1 !important;
    min-width: 40px !important;
    min-height: 40px !important;
}

.header-desktop-back-action-btn[title="Modifier"]:hover {
    background: #e11d48 !important;
    transform: translateY(-1px) !important;
}

.header-desktop-back-action-btn[title="Modifier"] i {
    font-size: 16px !important;
}

/* Styles spécifiques pour le bouton modifier sur mobile */
@media (max-width: 768px) {
    .header-desktop-back-action-btn[title="Modifier"] {
        background: #ff385c !important;
        color: white !important;
        border: none !important;
        border-radius: 8px !important;
        padding: 10px 16px !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        cursor: pointer !important;
        transition: all 0.2s ease !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        visibility: visible !important;
        opacity: 1 !important;
        min-width: 50px !important;
        min-height: 50px !important;
        box-shadow: 0 2px 8px rgba(255, 56, 92, 0.3) !important;
    }
    
    .header-desktop-back-action-btn[title="Modifier"]:hover {
        background: #e11d48 !important;
        transform: translateY(-2px) !important;
        box-shadow: 0 4px 12px rgba(255, 56, 92, 0.4) !important;
    }
    
    .header-desktop-back-action-btn[title="Modifier"] i {
        font-size: 18px !important;
    }
}

@media (max-width: 480px) {
    .header-desktop-back-action-btn[title="Modifier"] {
        padding: 12px 18px !important;
        font-size: 16px !important;
        min-width: 60px !important;
        min-height: 60px !important;
        border-radius: 10px !important;
    }
    
    .header-desktop-back-action-btn[title="Modifier"] i {
        font-size: 20px !important;
    }
}

/* Styles pour la gestion des photos en mode édition */
.profil-photos-edit-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e5e7eb;
}

.profil-photos-edit-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #111827;
}

.profil-photos-info {
    display: flex;
    gap: 15px;
    align-items: center;
}

.profil-photos-count {
    background: #ff385c;
    color: white;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
}

.profil-photos-limit {
    color: #6b7280;
    font-size: 13px;
}

.profil-photos-upload {
    margin-bottom: 20px;
}

.profil-upload-photos-btn {
    background: #ff385c;
    color: white;
    border: none;
    border-radius: 6px;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.profil-upload-photos-btn:hover {
    background: #e11d48;
}

.profil-upload-photos-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.profil-photos-limit-reached {
    background: #fef3c7;
    border: 1px solid #f59e0b;
    color: #92400e;
    padding: 12px 16px;
    border-radius: 6px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

.profil-photos-limit-reached a {
    color: #ff385c;
    text-decoration: none;
    font-weight: 500;
}

.profil-photos-limit-reached a:hover {
    text-decoration: underline;
}

.profil-photo-item {
    position: relative;
    aspect-ratio: 1;
    border-radius: 6px;
    overflow: hidden;
    transition: all 0.2s ease;
    cursor: pointer;
    border: 1px solid #e5e7eb;
}

.profil-photo-item:hover {
    transform: scale(1.03);
}

.profil-photo-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profil-photo-actions {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    gap: 6px;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.profil-photo-item:hover .profil-photo-actions {
    opacity: 1;
}

.profil-photo-action-btn {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    backdrop-filter: blur(4px);
}

.set-profile-btn {
    background: rgba(34, 197, 94, 0.9);
    color: white;
}

.set-profile-btn:hover {
    background: rgba(34, 197, 94, 1);
    transform: scale(1.1);
}

.delete-photo-btn {
    background: rgba(239, 68, 68, 0.9);
    color: white;
}

.delete-photo-btn:hover {
    background: rgba(239, 68, 68, 1);
    transform: scale(1.1);
}

/* Responsive pour la gestion des photos */
@media (max-width: 768px) {
    .profil-photos-edit-header {
        flex-direction: column;
        gap: 10px;
        align-items: flex-start;
    }
    
    .profil-photos-info {
        gap: 10px;
    }
    
    .profil-photo-actions {
        opacity: 1;
        top: 4px;
        right: 4px;
    }
    
    .profil-photo-action-btn {
        width: 24px;
        height: 24px;
        font-size: 10px;
    }
}

/* Badge / bandeau Premium (profil édition) */
.profil-premium-lock {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid rgba(255, 56, 92, 0.14);
    background: linear-gradient(135deg, rgba(255, 56, 92, 0.07) 0%, rgba(255, 214, 10, 0.05) 100%);
    box-sizing: border-box;
    min-width: 0;
}

.profil-premium-lock__icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 56, 92, 0.12);
    color: var(--brand);
    font-size: 0.72rem;
}

.profil-premium-lock__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.profil-premium-lock__title {
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1.25;
}

.profil-premium-lock__text {
    font-size: 0.72rem;
    font-weight: 500;
    line-height: 1.35;
    color: var(--text-soft);
}

.profil-premium-lock__cta {
    flex-shrink: 0;
    align-self: center;
    border: none;
    border-radius: 999px;
    padding: 5px 10px;
    font-size: 0.68rem;
    font-weight: 700;
    color: #fff;
    background: var(--brand);
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
}

.profil-premium-lock__cta:hover {
    background: var(--brand-dark);
    transform: translateY(-1px);
}

.profil-premium-lock--banner {
    width: 100%;
}

.profil-premium-lock--inline {
    margin-top: 6px;
    width: 100%;
    padding: 6px 10px;
    gap: 8px;
}

.profil-premium-lock--inline .profil-premium-lock__icon {
    width: 24px;
    height: 24px;
    font-size: 0.65rem;
}

.profil-premium-lock--inline .profil-premium-lock__cta {
    font-size: 0.64rem;
    padding: 4px 8px;
}

.profil-premium-lock--chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px 3px 6px;
    border-radius: 999px;
    vertical-align: middle;
}

.profil-premium-lock--chip .profil-premium-lock__icon {
    width: auto;
    height: auto;
    background: none;
    font-size: 0.62rem;
    padding: 0;
}

.profil-premium-lock--chip .profil-premium-lock__body {
    flex-direction: row;
    align-items: center;
    flex: 0 1 auto;
}

.profil-premium-lock--chip .profil-premium-lock__text {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--text-soft);
}

.profil-message-section--locked {
    display: block;
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
    margin: 6px 0 0;
    width: 100%;
    max-width: 100%;
}

.profil-message-section--locked:hover {
    transform: none;
    box-shadow: none;
}

.profil-message-section--flash-locked {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    max-width: 100%;
    margin: 4px 0 0;
    padding: 7px 12px;
    box-sizing: border-box;
    background: var(--bg);
    border: 1px dashed var(--border);
    border-radius: var(--r-pill);
    box-shadow: none;
}

.profil-message-section--flash-locked:hover {
    transform: none;
    box-shadow: none;
}

.profil-message-section--flash-locked .profil-message-icon {
    animation: none;
    color: #94a3b8;
    opacity: 0.7;
    flex-shrink: 0;
}

.profil-flash-locked-hint {
    flex: 1;
    min-width: 0;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--text-soft);
    font-style: normal;
    text-align: left;
    line-height: 1.3;
}

.profil-flash-locked-cta {
    flex-shrink: 0;
    border: none;
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--brand);
    background: var(--brand-soft);
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
}

.profil-flash-locked-cta:hover {
    background: var(--brand);
    color: #fff;
}

.edit-age-locked {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0;
    flex: 1;
    min-width: 0;
}

@media (max-width: 768px) {
    .profil-premium-lock {
        gap: 8px;
        padding: 7px 10px;
    }

    .profil-premium-lock__cta {
        align-self: flex-start;
        margin-top: 2px;
    }

    .profil-premium-lock--inline {
        flex-wrap: wrap;
    }

    .profil-premium-lock--inline .profil-premium-lock__cta {
        width: 100%;
        text-align: center;
    }
}


/* Styles pour l'édition de la photo de profil principale */
.profil-photo-edit-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    border-radius: 8px;
    pointer-events: none;
}

.profil-photo-container:hover .profil-photo-edit-overlay {
    opacity: 1;
}

.profil-photo-edit-btn {
    background: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #374151;
    transition: all 0.2s ease;
    backdrop-filter: blur(4px);
    pointer-events: auto;
}

.profil-photo-edit-btn:hover {
    background: white;
    transform: scale(1.1);
    color: #ff385c;
}

.profil-photo-edit-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

/* Responsive pour l'édition de photo */
@media (max-width: 768px) {
    .profil-photo-edit-overlay {
        opacity: 1;
        background: rgba(0, 0, 0, 0.3);
    }
    
    .profil-photo-edit-btn {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    .profil-photo-edit-btn {
        width: 36px;
        height: 36px;
        font-size: 14px;
    }
}

/* Header mobile avec bouton modifier */
.profil-mobile-header {
    display: none;
    padding: 10px 20px;
    background: white;
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 0;
}

.profil-mobile-edit-btn {
    background: var(--brand);
    color: #fff;
    border: none;
    border-radius: var(--r-pill);
    padding: 8px 14px;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    gap: 4px;
    width: auto;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(255, 56, 92, 0.28);
}

.profil-mobile-edit-btn:hover {
    background: var(--brand-dark);
    transform: translateY(-1px);
}

.profil-mobile-edit-btn i {
    font-size: 14px;
}

/* Bouton sauvegarder mobile */
.profil-mobile-save-btn {
    background: #10b981;
    color: white;
    border: none;
    border-radius: 8px;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

.profil-mobile-save-btn:hover {
    background: #059669;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
}

.profil-mobile-save-btn i {
    font-size: 16px;
}

/* Bouton annuler mobile */
.profil-mobile-cancel-btn {
    background: var(--bg);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--r-pill);
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    justify-content: center;
    box-shadow: none;
}

.profil-mobile-cancel-btn:hover {
    background: var(--brand-soft);
    border-color: var(--brand-soft);
    color: var(--brand-dark);
}

.profil-mobile-cancel-btn i {
    font-size: 16px;
}

/* Container pour les boutons en mode édition */
.profil-mobile-edit-buttons {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

.profil-mobile-edit-buttons .profil-mobile-save-btn,
.profil-mobile-edit-buttons .profil-mobile-cancel-btn {
    flex: 1;
    width: auto;
}

/* Afficher le header mobile sur mobile */
@media (max-width: 768px) {
    .profil-mobile-header {
        display: none;
    }
    
    .profil-mobile-edit-btn {
        padding: 10px 14px;
        font-size: 13px;
    }
    
    .profil-mobile-edit-btn i {
        font-size: 15px;
    }
    
    .profil-mobile-save-btn,
    .profil-mobile-cancel-btn {
        padding: 12px 20px;
        font-size: 15px;
    }
    
    .profil-mobile-save-btn i,
    .profil-mobile-cancel-btn i {
        font-size: 18px;
    }
}

@media (max-width: 480px) {
    .profil-mobile-header {
        padding: 8px 16px;
    }
    
    .profil-mobile-edit-btn {
        padding: 12px 16px;
        font-size: 14px;
        border-radius: 8px;
    }
    
    .profil-mobile-edit-btn i {
        font-size: 16px;
    }
    
    .profil-mobile-save-btn,
    .profil-mobile-cancel-btn {
        padding: 14px 24px;
        font-size: 16px;
        border-radius: 10px;
    }
    
    .profil-mobile-save-btn i,
    .profil-mobile-cancel-btn i {
        font-size: 20px;
    }
}

/* Modal pour les témoignages */
.temoignage-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.temoignage-modal.show {
    opacity: 1;
    pointer-events: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.temoignage-modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.temoignage-modal-content {
    background: white;
    border-radius: 16px;
    width: 90%;
    max-width: 500px;
    max-height: 80vh;
    overflow-y: auto;
    position: relative;
    z-index: 1001;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    transform: translateY(20px);
    transition: transform 0.3s ease;
}

.temoignage-modal.show .temoignage-modal-content {
    transform: translateY(0);
}

.temoignage-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #e5e7eb;
}

.temoignage-modal-header h3 {
    font-size: 20px;
    font-weight: 600;
    color: #222222;
    margin: 0;
}

.temoignage-modal-close {
    background: none;
    border: none;
    font-size: 24px;
    color: #717171;
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    transition: background 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
}

.temoignage-modal-close:hover {
    background: #f3f4f6;
}

.temoignage-modal-body {
    padding: 24px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #374151;
    margin-bottom: 8px;
}

.form-group textarea {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    resize: vertical;
    min-height: 120px;
    transition: all 0.2s ease;
}

.form-group textarea:focus {
    outline: none;
    border-color: #ff385c;
    box-shadow: 0 0 0 3px rgba(255, 56, 92, 0.1);
}

.char-count {
    text-align: right;
    font-size: 12px;
    color: #9ca3af;
    margin-top: 4px;
}

.temoignage-modal-footer {
    display: flex;
    gap: 12px;
    padding: 20px 24px;
    border-top: 1px solid #e5e7eb;
    background: #f9fafb;
    border-radius: 0 0 16px 16px;
}

.temoignage-modal-btn {
    flex: 1;
    padding: 12px 20px;
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.temoignage-modal-btn.cancel {
    background: white;
    border: 1px solid #e5e7eb;
    color: #374151;
}

.temoignage-modal-btn.cancel:hover {
    background: #f3f4f6;
    border-color: #d1d5db;
}

.temoignage-modal-btn.submit {
    background: #ff385c;
    color: white;
}

.temoignage-modal-btn.submit:hover {
    background: #e11d48;
}

.temoignage-modal-btn.submit:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

/* Responsive pour le modal */
@media (max-width: 768px) {
    .temoignage-modal-content {
        width: 95%;
        margin: 20px;
    }
    
    .temoignage-modal-header,
    .temoignage-modal-body,
    .temoignage-modal-footer {
        padding: 16px 20px;
    }
    
    .temoignage-modal-header h3 {
        font-size: 18px;
    }
    
    .form-group textarea {
        font-size: 16px; /* Évite le zoom sur iOS */
    }
}


.report-modal-btn {
    flex: 1;
    padding: 12px 20px;
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}


/* Responsive pour le modal de signalement */
@media (max-width: 768px) {
    
    
    .form-group select,
    .form-group textarea {
        font-size: 16px; /* Évite le zoom sur iOS */
    }
}

/* Modal de confirmation */
.confirm-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.confirm-modal.show {
    opacity: 1;
    pointer-events: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.confirm-modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.confirm-modal-content {
    background: white;
    border-radius: 16px;
    width: 90%;
    max-width: 400px;
    position: relative;
    z-index: 1001;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    transform: translateY(20px);
    transition: transform 0.3s ease;
}

.confirm-modal.show .confirm-modal-content {
    transform: translateY(0);
}

.confirm-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #e5e7eb;
}

.confirm-modal-header h3 {
    font-size: 18px;
    font-weight: 600;
    color: #222222;
    margin: 0;
}

.confirm-modal-close {
    background: none;
    border: none;
    font-size: 20px;
    color: #717171;
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    transition: background 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
}

.confirm-modal-close:hover {
    background: #f3f4f6;
}

.confirm-modal-body {
    padding: 24px;
    text-align: center;
}

.confirm-modal-body p {
    font-size: 16px;
    color: #374151;
    margin: 0;
    line-height: 1.5;
}

.confirm-modal-footer {
    display: flex;
    gap: 12px;
    padding: 20px 24px;
    border-top: 1px solid #e5e7eb;
    background: #f9fafb;
    border-radius: 0 0 16px 16px;
}

.confirm-modal-btn {
    flex: 1;
    padding: 12px 20px;
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.confirm-modal-btn.cancel {
    background: white;
    border: 1px solid #e5e7eb;
    color: #374151;
}

.confirm-modal-btn.cancel:hover {
    background: #f3f4f6;
    border-color: #d1d5db;
}

.confirm-modal-btn.confirm {
    background: #ef4444;
    color: white;
}

.confirm-modal-btn.confirm:hover {
    background: #dc2626;
}

.confirm-modal-btn.confirm:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

/* Responsive pour le modal de confirmation */
@media (max-width: 768px) {
    .confirm-modal-content {
        width: 95%;
        margin: 20px;
    }
    
    .confirm-modal-header,
    .confirm-modal-body,
    .confirm-modal-footer {
        padding: 16px 20px;
    }
    
    .confirm-modal-header h3 {
        font-size: 16px;
    }
    
    .confirm-modal-body p {
        font-size: 15px;
    }
}

/* Modal Premium — voir bloc unifié en fin de fichier (.premium-modal) */

/* Boutons mobiles fixes pour le profil */
.profil-mobile-actions {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    align-items: center;
    gap: 10px;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--border);
    z-index: 1000;
    box-shadow: 0 -8px 24px rgba(16, 24, 40, 0.08);
}

.profil-mobile-message-btn {
    background: var(--brand);
    color: #fff;
    border: none;
    border-radius: var(--r-pill);
    padding: 12px 18px;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    transition: var(--transition);
    flex: 1;
    margin-right: 10px;
    box-shadow: 0 6px 18px rgba(255, 56, 92, 0.3);
}

.profil-mobile-message-btn:hover {
    background: var(--brand-dark);
    transform: translateY(-1px);
}

.profil-mobile-favorite-btn.favorite-btn {
    margin-right: 10px;
}

.profil-mobile-menu-dropdown {
    position: relative;
}

.profil-mobile-menu-btn {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 50%;
    width: 48px;
    height: 48px;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition);
    box-sizing: border-box;
    color: var(--text);
}

.profil-mobile-menu-btn:hover {
    border-color: var(--brand);
    color: var(--brand);
    background: var(--brand-soft);
}

.profil-mobile-dropdown-content {
    position: absolute;
    bottom: 100%;
    right: 0;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    min-width: 200px;
    z-index: 1001;
    display: none;
    margin-bottom: 10px;
}

.profil-mobile-dropdown-content.show {
    display: block;
}

.profil-mobile-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.2s ease;
    color: #374151;
}

.profil-mobile-dropdown-item:hover {
    background-color: #f8fafc;
}

.profil-mobile-dropdown-item:first-child {
    border-radius: 8px 8px 0 0;
}

.profil-mobile-dropdown-item:last-child {
    border-radius: 0 0 8px 8px;
}

/* Menu mobile déroulant */
.profil-mobile-menu {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 2000;
    height: 100vh;
}

.profil-mobile-menu.show {
    display: flex;
    align-items: flex-end;
}

/* Styles pour le menu mobile flottant */
.profil-mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.profil-mobile-menu-overlay.show {
    opacity: 1;
    visibility: visible;
}

.profil-mobile-menu-floating {
    position: fixed;
    bottom: 80px;
    right: 20px;
    background: var(--surface);
    border-radius: var(--r-lg);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    z-index: 9999;
    min-width: 200px;
    max-width: 280px;
    display: none;
    transform: scale(0.9) translateY(20px);
    opacity: 0;
    transition: all 0.3s ease;
    overflow: hidden;
}

.profil-mobile-menu-floating.show {
    display: block;
    transform: scale(1) translateY(0);
    opacity: 1;
}

.profil-mobile-menu-floating .profil-mobile-menu-content {
    padding: 8px 0;
}

.profil-mobile-menu-floating .profil-mobile-menu-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    width: 100%;
    padding: 12px 20px;
    min-height: 48px;
    background: none;
    border: none;
    border-radius: var(--r-md);
    color: var(--text);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    text-align: left;
    box-sizing: border-box;
}

.profil-mobile-menu-floating .profil-mobile-menu-item:hover {
    background: var(--brand-soft);
    color: var(--brand-dark);
}

.profil-mobile-menu-floating .profil-mobile-menu-item i {
    width: 18px;
    text-align: center;
    flex-shrink: 0;
    color: var(--brand);
    font-size: 0.9rem;
}

.profil-mobile-menu-floating .profil-mobile-menu-item span {
    flex: 1;
    text-align: left;
}

.profil-mobile-menu-floating .profil-mobile-menu-item.favorite-btn {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    padding: 12px 20px;
    min-height: 48px;
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    box-sizing: border-box;
}

/* Barre d'action profil mobile (remplace app-bottom-nav) */
@media (max-width: 768px) {
    body.page-profil .profil-mobile-actions {
        display: flex;
        align-items: center;
        z-index: 1200;
        gap: 8px;
        padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
    }

    body.page-profil .profil-mobile-message-btn {
        padding: 9px 14px;
        font-size: 0.82rem;
        margin-right: 6px;
        box-shadow: 0 4px 14px rgba(255, 56, 92, 0.24);
    }

    body.page-profil .profil-mobile-menu-btn {
        width: 40px;
        height: 40px;
        min-height: 40px;
        font-size: 0.92rem;
    }

    body.page-profil .profil-mobile-actions--edit {
        gap: 8px;
        padding-left: 12px;
        padding-right: 12px;
    }

    body.page-profil .profil-mobile-actions--edit .profil-mobile-save-btn,
    body.page-profil .profil-mobile-actions--edit .profil-mobile-cancel-btn {
        min-height: 40px;
        padding: 8px 12px;
        font-size: 0.82rem;
    }
}

/* Styles pour la validation d'âge */
.edit-age-validation {
    margin-top: 5px;
    font-size: 0.85rem;
    min-height: 20px;
}

.edit-age-validation span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.edit-input:invalid,
.edit-input.error {
    border-color: #dc2626 !important;
    box-shadow: 0 0 0 1px #dc2626;
}

.edit-input:valid {
    border-color: #10b981 !important;
    box-shadow: 0 0 0 1px #10b981;
}

/* Styles pour les options d'orientation dynamiques */
.edit-select {
    transition: all 0.3s ease;
}

.edit-select:focus {
    border-color: #ff385c;
    box-shadow: 0 0 0 2px rgba(255, 56, 92, 0.2);
}

/* Styles pour la géolocalisation */
.edit-city-group {
    width: 100%;
}

.edit-city-group .input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.edit-city-group .edit-input {
    flex: 1;
    padding-right: 50px;
}

.geolocation-button {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: #ff385c;
    color: white;
    border: none;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.geolocation-button:hover {
    background: #e11d48;
    transform: translateY(-50%) scale(1.1);
}

.ville-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    max-height: 200px;
    overflow-y: auto;
}

.ville-suggestion {
    padding: 10px 15px;
    cursor: pointer;
    border-bottom: 1px solid #f3f4f6;
    transition: background-color 0.2s ease;
}

.ville-suggestion:hover {
    background-color: #f9fafb;
}

.ville-suggestion:last-child {
    border-bottom: none;
}

.map-container {
    width: 100%;
    max-width: 100%;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #d1d5db;
    box-sizing: border-box;
}

/* Styles pour la carte de localisation du profil */
.profil-location-map-section {
    margin-top: 16px;
    width: 100%;
}

.profil-location-map-info {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    border-radius: 8px;
    margin-bottom: 12px;
    font-size: 13px;
    color: #0369a1;
}

.profil-location-map-info i {
    color: #0284c7;
    font-size: 14px;
}

.profil-location-map {
    height: 200px;
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
    background: #f9fafb;
}

/* Responsive pour la carte de localisation */
@media (max-width: 768px) {
    .profil-location-map {
        height: 180px;
    }
    
    .profil-location-map-info {
        font-size: 12px;
        padding: 10px 12px;
    }
}

.profil-message-section {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 12px auto 0;
    max-width: 100%;
    background: linear-gradient(135deg, var(--brand-soft), #ffe9ee);
    color: var(--brand-dark);
    padding: 8px 16px;
    border-radius: var(--r-pill);
    border: 1px solid #fecdd3;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}

.profil-message-section:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.profil-message-icon {
    color: var(--brand);
    font-size: 0.85rem;
    flex-shrink: 0;
    animation: pulse 2s infinite;
}

.profil-message-text {
    font-style: italic;
    color: var(--brand-dark);
    font-size: 0.85rem;
    font-weight: 600;
    margin: 0;
    padding: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Mobile : on garde un badge lisible (pas de rétrécissement extrême) */
@media (max-width: 768px) {
    .profil-message-section {
        padding: 7px 13px;
        gap: 6px;
    }
    .profil-message-icon { font-size: 0.8rem; }
    .profil-message-text { font-size: 0.8rem; }
}

/* Animation de pulsation pour l'icône éclair */
@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.8;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Styles pour les informations de champ en mode édition */
.edit-field-info {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    border-radius: 6px;
    margin: 8px 0;
    font-size: 12px;
    color: #0369a1;
}

.edit-field-info i {
    color: #0284c7;
    font-size: 13px;
    flex-shrink: 0;
}

.edit-field-info span {
    line-height: 1.4;
}

/* Responsive pour les informations de champ */
@media (max-width: 768px) {
    .edit-field-info {
        font-size: 11px;
        padding: 6px 10px;
    }
    
    .edit-field-info i {
        font-size: 12px;
    }
}

/* Modal pour les photos */
.photo-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.photo-modal.show {
    opacity: 1;
    visibility: visible;
}

.photo-modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.photo-modal-content {
    position: relative;
    width: 90%;
    height: 90%;
    max-width: 1200px;
    max-height: 800px;
    background: #000;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

.photo-modal.show .photo-modal-content {
    transform: scale(1);
}

.photo-modal-header {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 10;
    padding: 16px;
}

.photo-modal-close {
    background: rgba(0, 0, 0, 0.7);
    color: white;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 18px;
    transition: all 0.3s ease;
}

.photo-modal-close:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.1);
}

.photo-modal-body {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    overflow: hidden;
}

.photo-modal-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.photo-modal-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
}

.photo-modal-nav-btn {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border: none;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 16px;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.photo-modal-nav-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}

.photo-modal-nav-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.photo-modal-counter {
    color: white;
    font-size: 14px;
    font-weight: 500;
    background: rgba(0, 0, 0, 0.6);
    padding: 8px 16px;
    border-radius: 20px;
    backdrop-filter: blur(10px);
}

/* Responsive pour le modal des photos */
@media (max-width: 768px) {
    .photo-modal-content {
        width: 95%;
        height: 95%;
    }
    
    .photo-modal-header {
        padding: 12px;
    }
    
    .photo-modal-close {
        width: 36px;
        height: 36px;
        font-size: 16px;
    }
    
    .photo-modal-body {
        padding: 16px;
    }
    
    .photo-modal-footer {
        padding: 12px 16px;
    }
    
    .photo-modal-nav-btn {
        width: 40px;
        height: 40px;
        font-size: 14px;
    }
    
    .photo-modal-counter {
        font-size: 12px;
        padding: 6px 12px;
    }
}

@media (max-width: 480px) {
    .photo-modal-content {
        width: 100%;
        height: 100%;
        border-radius: 0;
    }
    
    .photo-modal-header {
        padding: 8px;
    }
    
    .photo-modal-close {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }
    
    .photo-modal-body {
        padding: 12px;
    }
    
    .photo-modal-footer {
        padding: 8px 12px;
    }
    
    .photo-modal-nav-btn {
        width: 36px;
        height: 36px;
        font-size: 12px;
    }
}

/* Styles pour les photos privées */
.profil-photos-upload-options {
    margin-bottom: 15px;
    padding: 15px;
    background: #f8fafc;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

.profil-photo-privacy-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
}

.profil-photo-privacy-toggle input[type="checkbox"] {
    display: none;
}

.toggle-slider {
    position: relative;
    width: 44px;
    height: 24px;
    background: #cbd5e1;
    border-radius: 12px;
    transition: background 0.3s ease;
}

.toggle-slider:before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: white;
    border-radius: 50%;
    transition: transform 0.3s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.profil-photo-privacy-toggle input[type="checkbox"]:checked + .toggle-slider {
    background: #ff385c;
}

.profil-photo-privacy-toggle input[type="checkbox"]:checked + .toggle-slider:before {
    transform: translateX(20px);
}

.toggle-label {
    font-weight: 500;
    color: #374151;
}

.profil-photo-privacy-info {
    margin-top: 10px;
    padding: 10px;
    background: #fef3c7;
    border: 1px solid #f59e0b;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #92400e;
}

.profil-photo-privacy-info i {
    color: #f59e0b;
}

/* Badge pour photos privées */
.profil-photo-private-badge {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: rgba(0,0,0,0.7);
    color: white;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 4px;
    z-index: 2;
}

.profil-photo-private-badge i {
    font-size: 10px;
}

/* Placeholder pour photos privées non accessibles */
.profil-photo-private-placeholder {
    width: 100%;
    height: 200px;
    border-radius: 12px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.profil-photo-private-placeholder:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Effet de photo floue en arrière-plan */
.profil-photo-blur-background {
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(circle at 30% 30%, #e2e8f0 0%, transparent 50%),
        radial-gradient(circle at 70% 70%, #cbd5e1 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, #f1f5f9 0%, transparent 70%);
    filter: blur(15px);
    opacity: 0.8;
}

/* Animation pour le placeholder */
.profil-photo-private-placeholder::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 56, 92, 0.1), transparent);
    transition: left 0.5s ease;
}

.profil-photo-private-placeholder:hover::before {
    left: 100%;
}



/* Responsive pour le placeholder */
@media (max-width: 768px) {
    .profil-photo-private-placeholder {
        height: 150px;
    }
    
    .profil-photo-private-overlay i {
        font-size: 2rem;
        margin-bottom: 8px;
    }
    
    .profil-photo-private-overlay span {
        font-size: 0.9rem;
    }
    
    .profil-photo-private-overlay small {
        font-size: 0.75rem;
    }
}

@media (max-width: 480px) {
    .profil-photo-private-placeholder {
        height: 120px;
    }
    
    .profil-photo-private-overlay i {
        font-size: 1.5rem;
        margin-bottom: 6px;
    }
    
    .profil-photo-private-overlay span {
        font-size: 0.8rem;
    }
    
    .profil-photo-private-overlay small {
        font-size: 0.7rem;
    }
}

/* Modal pour accorder des permissions - Style Airbnb */
.photo-permission-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(8px);
}

.photo-permission-modal.active {
    display: flex;
    animation: fadeIn 0.2s ease;
}

.photo-permission-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.photo-permission-content {
    background: white;
    border-radius: 12px;
    padding: 0;
    max-width: 400px;
    width: 90%;
    max-height: 80vh;
    overflow: hidden;
    position: relative;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    animation: slideIn 0.2s ease;
}

.photo-permission-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #f1f5f9;
    background: white;
}

.photo-permission-header h3 {
    margin: 0;
    color: #222222;
    font-size: 1.25rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.photo-permission-header h3::before {
    content: '🔒';
    font-size: 1rem;
}

.photo-permission-close {
    background: none;
    border: none;
    font-size: 1.1rem;
    color: #717171;
    cursor: pointer;
    padding: 6px;
    border-radius: 50%;
    transition: all 0.15s ease;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.photo-permission-close:hover {
    background: #f7f7f7;
    color: #222222;
}

.photo-permission-body {
    padding: 24px;
    max-height: 60vh;
    overflow-y: auto;
}

.photo-permission-body p {
    color: #222222;
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 20px;
    text-align: center;
    padding: 0;
    background: none;
    border-radius: 0;
    border-left: none;
}

.photo-access-info {
    background: #f7f7f7;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #222222;
}

.photo-permission-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.form-group label {
    font-weight: 500;
    color: #374151;
    font-size: 14px;
}

.form-group input,
.form-group select {
    padding: 10px 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 14px;
    transition: border-color 0.2s;
}

.form-group input:focus,
.form-group select:focus {
    outline: none;
    border-color: #ff385c;
    box-shadow: 0 0 0 3px rgba(255, 56, 92, 0.1);
}

.photo-permission-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    padding: 20px 30px;
    border-top: 1px solid #f1f5f9;
    background: #f8fafc;
}

.photo-permission-btn {
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    font-weight: 500;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 120px;
    justify-content: center;
}

.photo-permission-btn.primary {
    background: linear-gradient(135deg, #ff385c, #e11d48);
    color: white;
    box-shadow: 0 2px 8px rgba(255, 56, 92, 0.3);
}

.photo-permission-btn.primary:hover {
    background: linear-gradient(135deg, #e11d48, #e11d48);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 56, 92, 0.4);
}

.photo-permission-btn.secondary {
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #e2e8f0;
}

.photo-permission-btn.secondary:hover {
    background: #e2e8f0;
    color: #374151;
    transform: translateY(-1px);
}

.photo-permission-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
}

/* Styles pour les photos avec permissions */
.profil-photo-with-permission {
    position: relative;
}

.profil-photo-permission-info {
    position: absolute;
    bottom: 8px;
    left: 8px;
    background: rgba(34, 197, 94, 0.9);
    color: white;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 11px;
    display: flex;
    align-items: center;
    gap: 4px;
    z-index: 2;
}

.profil-photo-permission-info.expired {
    background: rgba(239, 68, 68, 0.9);
}

/* Animation pour le toggle */
@keyframes toggleOn {
    0% { transform: translateX(0); }
    100% { transform: translateX(20px); }
}

@keyframes toggleOff {
    0% { transform: translateX(20px); }
    100% { transform: translateX(0); }
}

.profil-photo-privacy-toggle input[type="checkbox"]:checked + .toggle-slider:before {
    animation: toggleOn 0.3s ease;
}

.profil-photo-privacy-toggle input[type="checkbox"]:not(:checked) + .toggle-slider:before {
    animation: toggleOff 0.3s ease;
}

/* Styles pour le bouton de permission */
.profil-photo-action-btn.permission-btn {
    background: #10b981;
    color: white;
}

.profil-photo-action-btn.permission-btn:hover {
    background: #059669;
}

/* Styles pour les photos privées dans la grille */
.profil-photo-item.profil-photo-with-permission {
    position: relative;
}

.profil-photo-item.profil-photo-with-permission::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, rgba(255, 56, 92, 0.1), rgba(225, 29, 72, 0.1));
    border-radius: 8px;
    pointer-events: none;
    z-index: 1;
}

/* Styles pour la prévisualisation des photos lors de l'upload */
.profil-photos-upload-area {
    margin-bottom: 20px;
}

.profil-photos-upload-dropzone {
    border: 2px dashed #ddd;
    border-radius: 8px;
    padding: 40px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    background: #f9f9f9;
}

.profil-photos-upload-dropzone:hover {
    border-color: #007bff;
    background: #f0f8ff;
}

.profil-photos-upload-dropzone i {
    font-size: 48px;
    color: #999;
    margin-bottom: 10px;
}

.profil-photos-upload-dropzone p {
    color: #666;
    margin: 0;
}

.profil-photos-preview {
    margin-top: 20px;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #e9ecef;
}

.profil-photos-preview h4 {
    margin: 0 0 15px 0;
    color: #333;
}

.profil-photos-preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 15px;
    margin-bottom: 20px;
}

.profil-photo-preview-item {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    background: white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.profil-photo-preview-item img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    display: block;
}

.profil-photo-preview-options {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,0.8);
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.profil-photo-preview-remove {
    background: #dc3545;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 5px 8px;
    cursor: pointer;
    font-size: 12px;
}

.profil-photo-preview-remove:hover {
    background: #c82333;
}

.profil-photos-upload-btn {
    background: #28a745;
    color: white;
    border: none;
    border-radius: 6px;
    padding: 12px 24px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: background 0.3s ease;
}

.profil-photos-upload-btn:hover {
    background: #218838;
}

.profil-photos-upload-btn i {
    margin-right: 8px;
}

/* Styles pour les options de modification des photos existantes */
.profil-photo-options {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.profil-photo-item:hover .profil-photo-options {
    opacity: 1;
}

.profil-photo-option-btn {
    background: rgba(0,0,0,0.8);
    color: white;
    border: none;
    border-radius: 4px;
    padding: 6px 10px;
    cursor: pointer;
    font-size: 11px;
    transition: background 0.3s ease;
    white-space: nowrap;
}

.profil-photo-option-btn:hover {
    background: rgba(0,0,0,0.9);
}

.profil-photo-option-btn i {
    margin-right: 4px;
}

/* Toggle de privacité pour la prévisualisation */
.profil-photo-privacy-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 11px;
    color: white;
}

.profil-photo-privacy-toggle input[type="checkbox"] {
    display: none;
}

.profil-photo-privacy-toggle .toggle-slider {
    width: 30px;
    height: 16px;
    background: #ccc;
    border-radius: 8px;
    position: relative;
    transition: background 0.3s ease;
}

.profil-photo-privacy-toggle .toggle-slider:before {
    content: '';
    position: absolute;
    width: 12px;
    height: 12px;
    background: white;
    border-radius: 50%;
    top: 2px;
    left: 2px;
    transition: transform 0.3s ease;
}

.profil-photo-privacy-toggle input[type="checkbox"]:checked + .toggle-slider {
    background: #007bff;
}

.profil-photo-privacy-toggle input[type="checkbox"]:checked + .toggle-slider:before {
    transform: translateX(14px);
}

.profil-photo-privacy-toggle .toggle-label {
    font-size: 10px;
    font-weight: 500;
}




.duration-selector {
    margin-top: 20px;
}

.duration-selector h4 {
    margin-bottom: 16px;
    color: #222222;
    font-size: 1rem;
    font-weight: 600;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 6px;
}

.duration-selector h4::before {
    content: '⏱️';
    font-size: 0.9rem;
}

.duration-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-bottom: 20px;
}

.duration-option {
    padding: 14px 12px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background: white;
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    text-align: left;
}

.duration-option:hover {
    border-color: #222222;
    background: #f7f7f7;
}

.duration-option.selected {
    border-color: #222222;
    background: #222222;
    color: white;
}

.duration-option i {
    font-size: 1rem;
    color: #717171;
    transition: color 0.15s ease;
}

.duration-option.selected i {
    color: white;
}

.duration-option span {
    font-weight: 500;
    font-size: 0.9rem;
}

.custom-duration {
    margin-top: 16px;
    padding: 16px;
    background: #f7f7f7;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
}

.custom-duration label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: #222222;
    font-size: 0.9rem;
}

.photo-permission-input {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    font-size: 0.95rem;
    transition: all 0.15s ease;
    background: white;
}

.photo-permission-input:focus {
    outline: none;
    border-color: #222222;
    box-shadow: 0 0 0 2px rgba(34, 34, 34, 0.1);
    background: white;
}

.photo-permission-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    padding: 20px 30px;
    border-top: 1px solid #f1f5f9;
    background: #f8fafc;
}

.photo-permission-btn {
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    font-weight: 500;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 120px;
    justify-content: center;
}

.photo-permission-btn.primary {
    background: linear-gradient(135deg, #ff385c, #e11d48);
    color: white;
    box-shadow: 0 2px 8px rgba(255, 56, 92, 0.3);
}

.photo-permission-btn.primary:hover {
    background: linear-gradient(135deg, #e11d48, #e11d48);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 56, 92, 0.4);
}

.photo-permission-btn.secondary {
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #e2e8f0;
}

.photo-permission-btn.secondary:hover {
    background: #e2e8f0;
    color: #374151;
    transform: translateY(-1px);
}

.photo-permission-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Responsive */
@media (max-width: 768px) {
    .photo-permission-content {
        width: 95%;
        margin: 20px;
    }
    
    .photo-permission-header {
        padding: 20px 24px 16px;
    }
    
    .photo-permission-header h3 {
        font-size: 1.2rem;
    }
    
    .photo-permission-body {
        padding: 24px;
    }
    
    .duration-options {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    
    .duration-option {
        padding: 16px 14px;
    }
    
    .photo-permission-actions {
        flex-direction: column;
        gap: 10px;
    }
    
    .photo-permission-btn {
        width: 100%;
        justify-content: center;
        padding: 14px 20px;
    }
}

@media (max-width: 480px) {
    .photo-permission-content {
        width: 98%;
        margin: 10px;
    }
    
    .photo-permission-header {
        padding: 16px 20px 12px;
    }
    
    .photo-permission-header h3 {
        font-size: 1.1rem;
    }
    
    .photo-permission-body {
        padding: 20px;
    }
    
    .duration-option {
        padding: 14px 12px;
    }
    
    .duration-option span {
        font-size: 0.9rem;
    }
    
    .custom-duration {
        padding: 16px;
    }
}

/* Masquer l'attribution OpenStreetMap sur mobile */
@media (max-width: 768px) {
    .leaflet-control-attribution {
        display: none !important;
    }
}

/* ===== FIXES PROFIL (édition ville / description / iPhone symboles) ===== */

/* 1) Description: toujours sous le titre (jamais à côté) */
.profil-description-section h3 {
    display: block;
    margin-bottom: 10px;
}
.profil-description-section .profil-description-text {
    display: block;
    width: 100%;
    margin: 0;
}

/* Réseaux (X, MYM, OnlyFans, Top4Fans) */
.profil-social-section h3 {
    display: block;
    margin-bottom: 10px;
}
.profil-social-hint {
    margin: 0 0 12px;
    font-size: 0.88rem;
    color: var(--text-soft);
    line-height: 1.45;
}
.profil-social-edit-grid {
    display: grid;
    gap: 12px;
}
.profil-social-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.profil-social-field-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text);
}
.profil-social-field-label i {
    width: 1.1em;
    text-align: center;
}
.profil-social-input {
    width: 100%;
}
.profil-social-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.profil-social-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    text-decoration: none;
    font-size: 0.9rem;
    line-height: 1.2;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.profil-social-link:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
}
.profil-social-link-label {
    font-weight: 700;
}
.profil-social-link-handle {
    color: var(--text-soft);
    font-size: 0.85rem;
}
.profil-social-link--x {
    border-color: var(--border);
}
.profil-social-link--x:hover {
    border-color: var(--text);
}
.profil-social-link--mym {
    border-color: rgba(217, 70, 239, 0.35);
    background: linear-gradient(135deg, rgba(217, 70, 239, 0.1) 0%, var(--surface) 100%);
}
.profil-social-link--mym:hover {
    border-color: #d946ef;
}
.profil-social-link--onlyfans {
    border-color: rgba(14, 165, 233, 0.35);
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.1) 0%, var(--surface) 100%);
}
.profil-social-link--onlyfans:hover {
    border-color: #0ea5e9;
}
.profil-social-link--top4fans {
    border-color: rgba(249, 115, 22, 0.35);
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.1) 0%, var(--surface) 100%);
}
.profil-social-link--top4fans:hover {
    border-color: #f97316;
}
@media (max-width: 640px) {
    .profil-social-link {
        width: 100%;
        justify-content: flex-start;
    }
}

/* 2) Âge couple: aligner ♂/♀ (notamment iPhone) */
.profil-age {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.profil-gender-symbol {
    display: inline-block;
    width: 1.05em;
    line-height: 1;
    vertical-align: baseline;
    position: relative;
    top: -0.12em;
    font-family: Arial, "Helvetica Neue", sans-serif;
    font-weight: 700;
}
@supports (-webkit-touch-callout: none) {
    .profil-gender-symbol {
        top: -0.16em;
    }
}

/* 3) UI ville en mode édition: même style que register/search-bar (sans include) */
.profil-edit-city-search .global-search-wrapper {
    display: flex;
    align-items: stretch;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 4px -1px rgba(0,0,0,0.1);
    position: relative;
    min-height: 48px;
}

.profil-info-item.profil-info-item-city {
    align-items: flex-start;
    flex-wrap: nowrap;
}

.profil-info-city-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
}

.profil-info-item.profil-info-item-city .edit-city-group {
    width: 100%;
}

.profil-info-item.profil-info-item-city .map-container {
    width: 100%;
    max-width: 100%;
    margin-top: 10px;
}

.profil-info-item.profil-info-item-city > i {
    margin-top: 2px;
}

.profil-city-inline {
    display: flex;
    align-items: baseline;
    gap: 6px;
    width: 100%;
    min-width: 0;
}

.profil-city-inline .profil-info-label {
    display: inline;
    min-width: 0;
    width: auto;
    white-space: nowrap;
    margin: 0;
}

.profil-city-inline .profil-info-value {
    display: inline;
    flex: 1;
    min-width: 0;
}

.profil-info-item.profil-info-item-city .profil-location-map-section {
    margin-top: 10px;
}

.profil-info-item.profil-info-item-city .profil-location-map-info,
.profil-info-item.profil-info-item-city .profil-location-map {
    width: 100%;
}

.profil-edit-city-search .global-search-input {
    padding-right: 2rem;
}

@media (max-width: 768px) {
    .profil-info-item.profil-info-item-city {
        flex-wrap: nowrap;
        align-items: flex-start !important;
        gap: 8px;
    }

    .profil-info-item.profil-info-item-city > i {
        margin-top: 2px;
        line-height: 1;
    }

    .profil-info-item.profil-info-item-city .profil-info-city-content {
        flex: 1 1 auto;
        width: auto;
    }

    .profil-info-item.profil-info-item-city > .profil-info-city-content > .profil-info-label {
        display: block;
        min-width: 0;
        width: 100%;
        margin-bottom: 2px;
    }

    .profil-info-item.profil-info-item-city .edit-city-group {
        width: 100%;
    }

    .profil-info-item.profil-info-item-city .map-container {
        width: calc(100% + 24px);
        max-width: calc(100% + 24px);
        margin-left: -12px;
        margin-right: -12px;
        border-left-width: 0;
        border-right-width: 0;
        border-radius: 0;
    }

    .profil-info-item.profil-info-item-city .profil-location-map-info,
    .profil-info-item.profil-info-item-city .profil-location-map {
        width: calc(100% + 24px);
        max-width: calc(100% + 24px);
        margin-left: -12px;
        margin-right: -12px;
        border-left-width: 0;
        border-right-width: 0;
        border-radius: 0;
    }

    .profil-info-item i {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
    }
}
.profil-edit-city-search .global-search-input-container {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
    padding: 0 0.75rem;
    min-width: 0;
    overflow: hidden;
}
.profil-edit-city-search .global-search-icon {
    color: #6b7280;
    font-size: 1rem;
    margin-right: 0.5rem;
}
.profil-edit-city-search .global-search-input {
    flex: 1;
    padding: 0.75rem 0;
    border: none;
    background: transparent;
    font-size: 0.9375rem;
    color: #1f2937;
    outline: none;
    font-weight: 500;
    min-width: 0;
    width: 100%;
}
.profil-edit-city-search .global-search-reset-inline {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    background: #f3f4f6;
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
    padding: 0;
    transition: background-color 0.2s ease;
    color: #6b7280;
    font-size: 0.875rem;
}
.profil-edit-city-search .global-search-reset-inline.show {
    display: flex !important;
}
.profil-edit-city-search .global-search-actions {
    display: flex;
    align-items: stretch;
    border-left: 1px solid #e2e8f0;
    flex-shrink: 0;
    min-width: 48px;
}
.profil-edit-city-search .global-search-btn {
    padding: 0.75rem 0.5rem;
    border: none;
    background: transparent;
    color: #374151;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    min-width: 48px;
    width: 48px;
    flex-shrink: 0;
    transition: all 0.2s ease;
}
.profil-edit-city-search .global-search-btn:hover {
    background: #f3f4f6;
}
.profil-edit-city-search .global-location-btn {
    color: #ff385c;
}
.profil-edit-city-search .global-city-suggestions-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: transparent;
    z-index: 99999;
    display: none;
    pointer-events: none;
}
.profil-edit-city-search .global-city-suggestions-content {
    background: white;
    border-radius: 12px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    max-height: 400px;
    overflow-y: auto;
    border: 1px solid #e5e7eb;
    pointer-events: auto;
}
.profil-edit-city-search .global-city-suggestion {
    display: flex;
    align-items: center;
    padding: 1rem 1.25rem;
    cursor: pointer;
    transition: all 0.2s ease;
    border-bottom: 1px solid #f3f4f6;
    background: white;
}
.profil-edit-city-search .global-city-suggestion:last-child {
    border-bottom: none;
}
.profil-edit-city-search .global-city-suggestion:hover {
    background: #f8fafc;
}
.profil-edit-city-search .global-city-suggestion-icon {
    margin-right: 1rem;
    color: #3b82f6;
    font-size: 1.125rem;
    width: 24px;
    text-align: center;
}
.profil-edit-city-search .global-city-suggestion-main {
    font-weight: 600;
    color: #1f2937;
    font-size: 0.9375rem;
    margin-bottom: 0.25rem;
}
.profil-edit-city-search .global-city-suggestion-secondary {
    font-size: 0.8125rem;
    color: #6b7280;
    font-weight: 500;
}

/* Actions fixes en bas en mode édition (mobile) */
.profil-mobile-actions--edit {
    gap: 10px;
    justify-content: center;
    /* ~90% de largeur totale, avec espace de chaque côté */
    padding-left: 5%;
    padding-right: 5%;
}
.profil-mobile-actions--edit .profil-mobile-save-btn,
.profil-mobile-actions--edit .profil-mobile-cancel-btn { 
    flex: 1;
    width: auto;
    min-height: 48px;
    padding: 11px 14px;
    font-size: 14px;
    white-space: nowrap;
}

/* Bouton "Modifier" (réduire la largeur) */
.header-desktop-back-action-btn[title="Modifier"] {
    padding: 8px 12px;
}
/* profil-inline-2.css — bloc 2 extrait de profil.php (Phase 4) */
/* Style pour le lien vers mes visiteurs */
.profil-visiteurs-link {
    margin-top: 15px;
    text-align: center;
}

.visiteurs-link-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: linear-gradient(135deg, #ff385c 0%, #e11d48 100%);
    color: white;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

.visiteurs-link-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 56, 92, 0.4);
    color: white;
    text-decoration: none;
}

.visiteurs-link-btn i {
    font-size: 1rem;
}

/* profil-inline-3.css — bloc 3 extrait de profil.php (Phase 4) */
.staff-pfab{position:fixed;right:16px;bottom:88px;z-index:10020;border:none;border-radius:999px;padding:12px 14px;background:#111827;color:#fff;font-weight:900;box-shadow:0 10px 24px rgba(0,0,0,.25);cursor:pointer}
.staff-pmodal{position:fixed;inset:0;display:none;z-index:10030}
.staff-pmodal.active{display:block}
.staff-pbg{position:absolute;inset:0;background:rgba(2,6,23,.58);backdrop-filter:blur(2px)}
.staff-pcard{position:relative;z-index:1;width:min(94vw,900px);max-height:86vh;overflow:auto;margin:6vh auto;background:#fff;border-radius:14px;border:1px solid #e5e7eb}
.staff-phead{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:1px solid #f1f5f9}
.staff-phead h3{margin:0;font-size:15px;font-weight:900}
.staff-pclose{border:none;background:#f3f4f6;border-radius:999px;width:32px;height:32px;cursor:pointer}
.staff-ptabs{display:flex;gap:6px;padding:10px 12px;border-bottom:1px solid #f1f5f9;flex-wrap:wrap}
.staff-ptab-btn{border:1px solid #d1d5db;background:#fff;color:#111827;border-radius:999px;padding:6px 10px;font-size:12px;font-weight:800;cursor:pointer}
.staff-ptab-btn.active{background:#111827;color:#fff;border-color:#111827}
.staff-ptab{display:none;padding:10px 12px}
.staff-ptab.active{display:block}
.staff-pgrid{display:grid;gap:10px}
.staff-pgrid input,.staff-pgrid textarea,.staff-pgrid select{width:100%;border:1px solid #d1d5db;border-radius:10px;padding:8px 10px;font-size:13px}
.staff-pactions{display:flex;gap:8px;flex-wrap:wrap}
.staff-pbtn{border:none;background:#111827;color:#fff;border-radius:10px;padding:8px 12px;font-size:12px;font-weight:900;cursor:pointer}
.staff-pbtn.warn{background:#92400e}
.staff-pbtn.danger{background:#991b1b}


/* ============================================================
   Feedback unifié — toasts, erreurs champ, checkbox, toggle
   (index, register, modals dépôt, etc.)
   ============================================================ */
.notification,
.auth-message {
    position: fixed;
    top: max(72px, calc(env(safe-area-inset-top) + 12px));
    right: max(12px, calc(env(safe-area-inset-right) + 12px));
    z-index: 100000;
    max-width: min(360px, calc(100vw - 24px));
    margin: 0;
    padding: 11px 13px;
    border-radius: var(--r-md);
    font-size: 0.84rem;
    font-weight: 500;
    line-height: 1.4;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    display: flex;
    align-items: flex-start;
    gap: 10px;
    word-wrap: break-word;
    animation: spiitzToastIn 0.28s ease-out;
}

.auth-message {
    transform: translateX(110%);
    opacity: 0;
    transition: transform 0.28s ease, opacity 0.28s ease;
}

.auth-message.show {
    transform: translateX(0);
    opacity: 1;
}

.notification-error,
.auth-message.error {
    border-color: rgba(225, 29, 72, 0.28);
    background: #fff;
    color: var(--text);
}

.notification-error > i,
.auth-message.error > i:first-child {
    color: var(--brand);
    font-size: 1rem;
    flex-shrink: 0;
    margin-top: 1px;
}

.notification-success,
.auth-message.success {
    border-color: rgba(16, 185, 129, 0.28);
    background: #fff;
    color: var(--text);
}

.notification-success > i,
.auth-message.success > i:first-child {
    color: var(--green);
    font-size: 1rem;
    flex-shrink: 0;
}

.notification-warning,
.auth-message.warning {
    border-color: rgba(251, 191, 36, 0.45);
    background: #fff;
    color: var(--text);
}

.notification-warning > i,
.auth-message.warning > i:first-child {
    color: var(--gold);
    font-size: 1rem;
    flex-shrink: 0;
}

.notification-info,
.auth-message:not(.error):not(.success):not(.warning) {
    border-color: rgba(255, 56, 92, 0.2);
    background: #fff;
}

.notification .spiitz-toast__title,
.auth-message .spiitz-toast__title {
    font-weight: 700;
    font-size: 0.84rem;
    margin-bottom: 2px;
    color: var(--text);
}

.notification .spiitz-toast__text,
.auth-message .message-text,
.auth-message .spiitz-toast__text {
    font-weight: 500;
    color: var(--text-soft);
    font-size: 0.8rem;
    line-height: 1.4;
}

.auth-message .message-close {
    margin-left: auto;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0;
    opacity: 1;
    transition: var(--transition);
}

.auth-message .message-close:hover {
    background: var(--bg);
    color: var(--text);
}

@keyframes spiitzToastIn {
    from { opacity: 0; transform: translateX(12px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes spiitzToastOut {
    from { opacity: 1; transform: translateX(0); }
    to   { opacity: 0; transform: translateX(12px); }
}

/* Erreurs de champ — discret */
.field-error {
    border-color: rgba(255, 56, 92, 0.55) !important;
    box-shadow: 0 0 0 2px rgba(255, 56, 92, 0.08) !important;
}

.field-error:focus {
    border-color: var(--brand) !important;
    box-shadow: 0 0 0 3px var(--brand-soft) !important;
}

.radio-group.field-error,
.mobility-options.field-error,
.tags-container.field-error,
.expiration-options.field-error {
    outline: 2px solid rgba(255, 56, 92, 0.3);
    outline-offset: 2px;
    border-radius: var(--r-md);
    padding: 0;
    background: transparent;
}

.field-error-message {
    display: block;
    margin-top: 8px;
    padding: 8px 12px;
    font-size: 0.78rem;
    font-weight: 500;
    line-height: 1.4;
    color: var(--brand-dark);
    background: var(--brand-soft);
    border-radius: var(--r-sm);
    border-left: 3px solid var(--brand);
    animation: spiitzToastIn 0.22s ease-out;
}

.field-success-message {
    display: block;
    margin-top: 8px;
    padding: 8px 12px;
    font-size: 0.78rem;
    font-weight: 500;
    line-height: 1.4;
    color: #047857;
    background: #ecfdf5;
    border-radius: var(--r-sm);
    border-left: 3px solid var(--green, #10b981);
}

.form-input.error {
    border-color: rgba(255, 56, 92, 0.55) !important;
    box-shadow: 0 0 0 2px rgba(255, 56, 92, 0.08) !important;
}


/* Validation inline — inscription (pseudo, etc.) */
.pseudo-status {
    display: block;
    margin-top: 8px;
    padding: 8px 12px;
    font-size: 0.78rem;
    font-weight: 500;
    line-height: 1.4;
    border-radius: var(--r-sm);
    text-align: left;
}
.pseudo-status:empty {
    display: none;
    padding: 0;
    margin: 0;
}
.pseudo-status i {
    margin-right: 6px;
}


/* ============================================================
   Modal dépôt annonce — source unique (add-annonce.php)
   ============================================================ */
/* ===== MODAL DÉPOSER UNE ANNONCE — coque (position / taille / forme inchangées) ===== */
.deposer-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
    display: none;
    align-items: flex-end;
    justify-content: center;
    touch-action: pan-y;
    font-family: var(--font, "Inter", -apple-system, BlinkMacSystemFont, sans-serif);
}

.deposer-modal.active {
    display: flex;
}

.deposer-modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(16, 24, 40, 0.45);
    backdrop-filter: blur(6px);
}

.deposer-modal-content {
    position: relative;
    background: var(--surface, #fff);
    border-radius: 20px 20px 0 0;
    width: 100%;
    max-width: 500px;
    max-height: min(88dvh, 720px);
    overflow-y: auto;
    box-shadow: 0 -10px 40px rgba(16, 24, 40, 0.18);
    animation: deposerModalSlideUp 0.4s ease-out;
    transform: translateY(100%);
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
}

.deposer-modal.active .deposer-modal-content {
    transform: translateY(0);
}

@keyframes deposerModalSlideUp {
    from { transform: translateY(100%); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}

.deposer-modal-content {
    scrollbar-width: none;
}
.deposer-modal-content::-webkit-scrollbar { width: 0; height: 0; }

/* ===== INTÉRIEUR — branding index / app.css ===== */
.deposer-modal-header {
    position: sticky;
    top: 0;
    z-index: 10;
}

.deposer-modal-close:hover {
    border-color: var(--brand, #ff385c);
    color: var(--brand, #ff385c);
    background: var(--brand-soft, #ffe4ea);
}

.deposer-progress {
    padding: 0.75rem 1.5rem 1rem;
    border-bottom: 1px solid var(--border, #ececf0);
    background: var(--surface, #fff);
}

.deposer-progress-bar {
    width: 100%;
    height: 5px;
    background: var(--bg, #f7f7f8);
    border-radius: var(--r-pill, 999px);
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.deposer-progress-fill {
    height: 100%;
    background: var(--brand, #ff385c);
    border-radius: var(--r-pill, 999px);
    transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    width: 25%;
}

.deposer-progress-text {
    text-align: center;
    font-size: 0.75rem;
    color: var(--text-soft, #6b7280);
    font-weight: 600;
}

.deposer-modal-body {
    padding: 1rem 1.5rem;
    padding-bottom: calc(5.5rem + env(safe-area-inset-bottom));
    flex: 1;
    user-select: text;
    -webkit-user-select: text;
}

.deposer-step {
    display: none;
    animation: deposerFadeIn 0.28s ease;
}

.deposer-step.active {
    display: block;
}

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

.deposer-step h4 {
    margin: 0 0 1rem;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text, #1f2430);
}

.deposer-step .step-description {
    margin: -0.35rem 0 1rem;
    font-size: 0.85rem;
    color: var(--text-soft, #6b7280);
    line-height: 1.45;
}

/* Champs formulaire */
.deposer-step .form-group {
    margin-bottom: 1.15rem;
}

.deposer-step .form-group > label:not(.radio-option) {
    display: block;
    margin-bottom: 0.45rem;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text, #1f2430);
}

.deposer-step .form-group input[type="text"],
.deposer-step .form-group input[type="date"],
.deposer-step .form-group textarea,
.deposer-step .form-group select,
.deposer-step #customTag {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border, #ececf0);
    border-radius: var(--r-sm, 10px);
    font-size: 16px;
    line-height: 1.35;
    font-family: inherit;
    color: var(--text, #1f2430);
    background: var(--surface, #fff);
    box-sizing: border-box;
    transition: var(--transition, 0.2s ease);
    -webkit-appearance: none;
    appearance: none;
}

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

.deposer-step .form-group input:focus,
.deposer-step .form-group textarea:focus,
.deposer-step .form-group select:focus,
.deposer-step #customTag:focus {
    outline: none;
    border-color: var(--brand, #ff385c);
    box-shadow: 0 0 0 3px rgba(255, 56, 92, 0.12);
}

.deposer-step .form-group small,
.deposer-modal .form-help {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 0.4rem;
    color: var(--text-muted, #9ca3af);
    font-size: 0.78rem;
}

.deposer-modal .form-help i {
    color: var(--brand, #ff385c);
    font-size: 0.85rem;
}

/* Cartes de choix (style homefix-category-card) */
.deposer-step .radio-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: min(52vh, 380px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.deposer-step .radio-group::-webkit-scrollbar { width: 0; height: 0; }

#step1 .radio-group {
    max-height: none;
    overflow: visible;
}

/* Mobilité — desktop : liste verticale */
.deposer-step .mobility-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 0;
}

#step4 .radio-group {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    max-height: none;
    overflow: visible;
}

.deposer-step .radio-option {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 14px 14px 16px;
    border: 1px solid var(--border, #ececf0);
    border-radius: var(--r-md, 16px);
    background: var(--bg, #f7f7f8);
    cursor: pointer;
    transition: var(--transition, 0.2s ease);
    margin: 0;
}

.deposer-step .radio-option:hover {
    border-color: var(--brand, #ff385c);
    background: var(--surface, #fff);
    box-shadow: var(--shadow-sm, 0 1px 3px rgba(16, 24, 40, 0.06));
}

.deposer-step .radio-option:has(input:checked) {
    border-color: var(--brand, #ff385c);
    background: var(--brand-soft, #ffe4ea);
    box-shadow: var(--shadow-md, 0 6px 20px rgba(255, 56, 92, 0.12));
}

.deposer-step .radio-option input[type="radio"],
.deposer-step .radio-option input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.deposer-step .radio-custom {
    display: none;
}

.deposer-step .radio-content {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    flex: 1;
    min-width: 0;
}

.deposer-step .radio-content i {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: var(--brand-soft, #ffe4ea);
    color: var(--brand, #ff385c);
    font-size: 1.1rem;
    transition: var(--transition, 0.2s ease);
}

.deposer-step .radio-option:has(input:checked) .radio-content i {
    background: var(--brand, #ff385c);
    color: #fff;
}

.deposer-step .radio-content span {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text, #1f2430);
    line-height: 1.3;
}

.deposer-step .radio-content small {
    display: block;
    margin-top: 2px;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-soft, #6b7280);
    line-height: 1.35;
}

/* Tags */
.deposer-step .tags-container {
    border: 1px solid var(--border, #ececf0);
    border-radius: var(--r-md, 16px);
    padding: 14px;
    background: var(--bg, #f7f7f8);
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    max-height: min(45vh, 320px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.deposer-step .tag-item {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 0.85rem;
    background: var(--surface, #fff);
    color: var(--text, #1f2430);
    border: 1px solid var(--border, #ececf0);
    border-radius: var(--r-pill, 999px);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition, 0.2s ease);
    user-select: none;
}

.deposer-step .tag-item:hover {
    border-color: var(--brand, #ff385c);
    color: var(--brand, #ff385c);
    background: var(--brand-soft, #ffe4ea);
}

.deposer-step .tag-item.selected {
    background: var(--brand, #ff385c);
    border-color: var(--brand, #ff385c);
    color: #fff;
    box-shadow: 0 4px 14px rgba(255, 56, 92, 0.25);
}

/* Checkboxes — styles harmonisés dans app.css (section Feedback unifié) */
.deposer-step .checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.deposer-step .checkbox-option {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    font-size: 0.82rem;
    color: var(--text-soft, #6b7280);
    line-height: 1.45;
}

.deposer-step .checkbox-option input[type="checkbox"] {
    display: none;
}

.deposer-step .checkbox-option a {
    color: var(--brand, #ff385c);
    font-weight: 600;
}

/* Blocs info */
.deposer-modal .fixed-location,
.deposer-modal .fixed-mobility,
.deposer-modal .expiration-info,
.deposer-modal .boost-info,
.deposer-modal #customDateGroup {
    padding: 14px 16px;
    background: var(--bg, #f7f7f8);
    border: 1px solid var(--border, #ececf0);
    border-radius: var(--r-md, 16px);
}

.deposer-modal .fixed-location .location-info,
.deposer-modal .mobility-info,
.deposer-modal .expiration-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.deposer-modal .fixed-location .location-info i,
.deposer-modal .mobility-info i,
.deposer-modal .expiration-info i,
.deposer-modal .boost-info > i {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--brand-soft, #ffe4ea);
    color: var(--brand, #ff385c);
    font-size: 1rem;
    flex-shrink: 0;
}

.deposer-modal .boost-info {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 1rem;
}

.deposer-modal .boost-text strong {
    display: block;
    font-size: 0.88rem;
    color: var(--text, #1f2430);
    margin-bottom: 4px;
}

.deposer-modal .boost-text p {
    margin: 0;
    font-size: 0.8rem;
    color: var(--text-soft, #6b7280);
    line-height: 1.4;
}

/* Recherche ville dans le modal */
.deposer-modal .deposer-city-search .global-search-input-container {
    border: 1px solid var(--border, #ececf0);
    border-radius: var(--r-sm, 10px);
    background: var(--surface, #fff);
}

.deposer-modal .deposer-city-search .global-search-input:focus {
    border-color: var(--brand, #ff385c);
    box-shadow: 0 0 0 3px rgba(255, 56, 92, 0.12);
}

.deposer-modal .global-search-btn.global-location-btn {
    background: var(--brand-soft, #ffe4ea);
    color: var(--brand, #ff385c);
    border: 1px solid transparent;
    border-radius: var(--r-sm, 10px);
}

.deposer-modal .global-search-btn.global-location-btn:hover {
    background: var(--brand, #ff385c);
    color: #fff;
}

/* Photos */
.deposer-modal .photos-upload-container {
    background: var(--bg, #f7f7f8);
    border: 2px dashed var(--border, #ececf0);
    border-radius: var(--r-md, 16px);
    padding: 18px;
    transition: var(--transition, 0.2s ease);
}

.deposer-modal .photos-upload-container:hover {
    border-color: var(--brand, #ff385c);
    background: var(--brand-soft, #ffe4ea);
}

.deposer-modal .photo-upload-btn {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 100px;
    min-height: 100px;
    padding: 14px;
    border: 2px dashed var(--brand, #ff385c);
    border-radius: var(--r-md, 16px);
    background: var(--surface, #fff);
    cursor: pointer;
    transition: var(--transition, 0.2s ease);
}

.deposer-modal .photo-upload-btn:hover {
    background: var(--brand-soft, #ffe4ea);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

.deposer-modal .photo-upload-btn i {
    font-size: 1.35rem;
    color: var(--brand, #ff385c);
}

.deposer-modal .photo-upload-btn span,
.deposer-modal .photo-upload-btn small {
    color: var(--text-soft, #6b7280);
    font-size: 0.75rem;
    font-weight: 600;
}

.deposer-modal .photo-preview-item {
    border-radius: var(--r-sm, 10px);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.deposer-modal .photo-remove-btn {
    background: var(--brand, #ff385c);
}

/* Limite d'annonces */
.deposer-modal .limit-error-container {
    text-align: center;
    padding: 1.5rem 0.5rem;
}

.deposer-modal .limit-error-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--brand-soft, #ffe4ea);
    color: var(--brand, #ff385c);
    font-size: 1.5rem;
}

.deposer-modal .limit-error-content h3 {
    color: var(--text, #1f2430);
    font-size: 1.1rem;
    font-weight: 800;
    margin-bottom: 8px;
}

.deposer-modal .limit-error-content p {
    color: var(--text-soft, #6b7280);
    font-size: 0.88rem;
}

.deposer-modal .limit-error-timer {
    background: var(--bg, #f7f7f8);
    border: 1px solid var(--border, #ececf0);
    border-radius: var(--r-md, 16px);
    padding: 12px;
}

.deposer-modal .timer-value {
    color: var(--brand, #ff385c);
    border-color: var(--brand-soft, #ffe4ea);
    background: var(--surface, #fff);
}

.deposer-modal .limit-error-premium {
    background: var(--brand-soft, #ffe4ea);
    border: 1px solid rgba(255, 56, 92, 0.2);
    border-radius: var(--r-md, 16px);
}

.deposer-modal .btn-upgrade-premium,
.deposer-modal .deposer-btn.deposer-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: var(--r-pill, 999px);
    background: var(--brand, #ff385c);
    color: #fff;
    font-weight: 700;
    font-size: 0.9rem;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: var(--transition, 0.2s ease);
    box-shadow: 0 6px 18px rgba(255, 56, 92, 0.28);
}

.deposer-modal .btn-upgrade-premium:hover,
.deposer-modal .deposer-btn.deposer-btn-primary:hover {
    background: var(--brand-dark, #e11d48);
}

.deposer-modal .deposer-btn.deposer-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: var(--r-pill, 999px);
    background: var(--surface, #fff);
    color: var(--text, #1f2430);
    font-weight: 600;
    border: 1px solid var(--border, #ececf0);
    cursor: pointer;
    transition: var(--transition, 0.2s ease);
}

.deposer-modal .deposer-btn.deposer-btn-secondary:hover {
    border-color: var(--text-soft, #6b7280);
    background: var(--bg, #f7f7f8);
}

/* Footer */
.deposer-modal-footer {
    display: flex;
    gap: 10px;
    padding: 1rem 1.5rem calc(1rem + env(safe-area-inset-bottom));
    border-top: 1px solid var(--border, #ececf0);
    background: var(--surface, #fff);
    position: sticky;
    bottom: 0;
    z-index: 10;
    box-shadow: 0 -4px 20px rgba(16, 24, 40, 0.06);
}

.deposer-modal-footer button {
    flex: 1;
    min-height: 48px;
    padding: 0 1.25rem;
    border-radius: var(--r-pill, 999px);
    font-size: 0.92rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: var(--transition, 0.2s ease);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: none;
}

.deposer-modal-footer .btn-prev-step {
    background: var(--surface, #fff);
    color: var(--text, #1f2430);
    border: 1px solid var(--border, #ececf0);
}

.deposer-modal-footer .btn-prev-step:hover {
    border-color: var(--text-soft, #6b7280);
    background: var(--bg, #f7f7f8);
}

.deposer-modal-footer .btn-next-step,
.deposer-modal-footer .btn-publier {
    background: var(--brand, #ff385c);
    color: #fff;
    box-shadow: 0 6px 18px rgba(255, 56, 92, 0.28);
}

.deposer-modal-footer .btn-next-step:hover,
.deposer-modal-footer .btn-publier:hover {
    background: var(--brand-dark, #e11d48);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md, 0 6px 20px rgba(255, 56, 92, 0.35));
}

/* Responsive intérieur */
@media (max-width: 768px) {
    .deposer-modal-content {
        max-height: 78dvh;
    }

    .deposer-modal-header,
    .deposer-modal-body,
    .deposer-modal-footer,
    .deposer-progress {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .deposer-progress {
        padding-top: 0.5rem;
        padding-bottom: 0.65rem;
    }

    .deposer-step h4 {
        margin-bottom: 0.75rem;
        font-size: 0.95rem;
    }

    /* Type de rencontre — mobile : 2 par 2 */
    #step1 .radio-group {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    #step1 .radio-option {
        flex-direction: column;
        align-items: stretch;
        padding: 10px 8px;
        gap: 0;
    }

    #step1 .radio-content {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        gap: 6px;
    }

    #step1 .radio-content i {
        width: 36px;
        height: 36px;
        font-size: 0.95rem;
        border-radius: 12px;
    }

    #step1 .radio-content span {
        font-size: 0.78rem;
        line-height: 1.25;
    }

    /* Mobilité — mobile : 3 colonnes */
    .deposer-step .mobility-options {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }

    .deposer-step .mobility-options .radio-option {
        flex-direction: column;
        align-items: stretch;
        padding: 10px 6px;
        gap: 0;
    }

    .deposer-step .mobility-options .radio-content {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 4px;
    }

    .deposer-step .mobility-options .radio-content i {
        width: 34px;
        height: 34px;
        font-size: 0.9rem;
        border-radius: 11px;
    }

    .deposer-step .mobility-options .radio-content span {
        font-size: 0.72rem;
        line-height: 1.2;
    }

    .deposer-step .mobility-options .radio-content small {
        display: none;
    }

    #step4 .radio-group {
        grid-template-columns: 1fr;
    }

    .deposer-modal-footer {
        flex-direction: column;
        padding-top: 0.75rem;
        padding-bottom: calc(0.75rem + env(safe-area-inset-bottom));
    }

    .deposer-modal-footer button {
        width: 100%;
        min-height: 44px;
    }

    .deposer-step .radio-content i {
        width: 34px;
        height: 34px;
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    .deposer-modal-header h3,
    .spiitz-modal-header h3,
    .spiitz-modal-header__title {
        font-size: 0.98rem;
    }

    .deposer-step h4 {
        font-size: 0.98rem;
    }

    .deposer-step .radio-option {
        padding: 12px;
    }
}
/* Checkbox harmonisée */
.auth-checkmark,
.deposer-step .checkbox-custom,
.spiitz-check {
    width: 18px;
    height: 18px;
    border: 1.5px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
    flex-shrink: 0;
    position: relative;
    transition: var(--transition);
    display: block;
}

.auth-form-checkbox:checked + .auth-checkmark,
.deposer-step .checkbox-option input[type="checkbox"]:checked + .checkbox-custom,
.spiitz-check-input:checked + .spiitz-check {
    background: var(--brand);
    border-color: var(--brand);
}

.auth-form-checkbox:checked + .auth-checkmark::after,
.deposer-step .checkbox-option input[type="checkbox"]:checked + .checkbox-custom::after,
.spiitz-check-input:checked + .spiitz-check::after {
    content: '';
    position: absolute;
    left: 6px;
    top: 3px;
    width: 4px;
    height: 8px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.auth-checkbox-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    font-size: 0.82rem;
    color: var(--text-soft);
    line-height: 1.45;
}

/* Toggle harmonisé (profil, modales) */
.profile-toggle-switch,
.profil-photo-privacy-toggle,
.spiitz-toggle {
    position: relative;
    display: inline-block;
    width: 42px;
    height: 24px;
    flex-shrink: 0;
}

.profile-toggle-switch input,
.profil-photo-privacy-toggle input,
.spiitz-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.profile-toggle-slider,
.profil-photo-privacy-toggle .toggle-slider,
.toggle-slider,
.spiitz-toggle__track {
    position: absolute;
    inset: 0;
    cursor: pointer;
    background: #e5e7eb;
    border-radius: var(--r-pill);
    transition: background 0.22s ease;
}

.profile-toggle-slider::before,
.profil-photo-privacy-toggle .toggle-slider::before,
.toggle-slider::before,
.spiitz-toggle__track::before {
    content: '';
    position: absolute;
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.12);
}

.profile-toggle-switch input:checked + .profile-toggle-slider,
.profil-photo-privacy-toggle input:checked + .toggle-slider,
.spiitz-toggle input:checked + .spiitz-toggle__track {
    background: var(--brand);
}

.profile-toggle-switch input:checked + .profile-toggle-slider::before,
.profil-photo-privacy-toggle input:checked + .toggle-slider::before,
.spiitz-toggle input:checked + .spiitz-toggle__track::before {
    transform: translateX(18px);
}

@media (max-width: 768px) {
    .notification,
    .auth-message {
        left: max(12px, calc(env(safe-area-inset-left) + 12px));
        right: max(12px, calc(env(safe-area-inset-right) + 12px));
        max-width: none;
    }
}


/* ============================================================
   PAGES AUTH (login / inscription) — re-skin thème brand
   Chargé APRÈS pages-styles.css : on ne reprend que l'habillage.
   ============================================================ */
.auth-body {
    background: var(--bg);
    font-family: var(--font);
    min-height: 100dvh;
}

.auth-container {
    width: 100%;
    max-width: 460px;
    margin: 0 auto;
    min-height: 100dvh;
    align-items: center;
    justify-content: center;
    padding: max(72px, calc(env(safe-area-inset-top) + 56px)) 16px max(24px, env(safe-area-inset-bottom));
}

/* Login, forgot-password, etc. — pas de modale âge */
body.auth-body:not(:has(.age-verification-overlay)) .auth-container,
html.age-already-verified .auth-container {
    display: flex;
}

.auth-form-container {
    width: 100%;
}

/* Layout auth (structure ex pages-styles.css) */
.auth-body .auth-form { width: 100%; }
.auth-body .form-step { width: 100%; }
.auth-body .form-group { margin-bottom: 1.5rem; }

.auth-body .progress-container { margin-bottom: 2rem; }
.auth-body .progress-bar {
    width: 100%;
    height: 4px;
    background: var(--border);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 0.5rem;
}
.auth-body .progress-fill {
    height: 100%;
    transition: width 0.3s ease;
    width: 16.66%;
}
.auth-body .progress-text {
    text-align: center;
    font-size: 0.8rem;
    color: var(--text-soft);
    font-weight: 500;
}

.auth-body .form-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 10px;
}
.auth-body .form-options .auth-checkbox-wrapper {
    font-size: 0.82rem;
}
.auth-body .form-options .forgot-password {
    font-size: 0.75rem;
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 2px;
    color: var(--brand);
    white-space: nowrap;
}

@media (max-width: 480px) {
    .auth-body .form-options {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .auth-body .form-options .auth-checkbox-wrapper {
        justify-content: center;
    }
}

.auth-body .auth-footer {
    text-align: center;
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border);
}
.auth-body .auth-footer p {
    margin: 0;
    color: var(--text-soft);
    font-size: 0.85rem;
}

.auth-body .auth-form-checkbox {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.auth-body .auth-radio-group {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.auth-body .auth-radio-option {
    position: relative;
    display: block;
    padding: 0.875rem;
    border: 1px solid var(--border);
    cursor: pointer;
    transition: var(--transition);
    background: var(--surface);
}
.auth-body .auth-radio-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}
.auth-body .auth-radio-custom {
    position: absolute;
    top: 50%;
    left: 0.875rem;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    border: 2px solid var(--border);
    border-radius: 50%;
    background: var(--surface);
    transition: var(--transition);
}
.auth-body .auth-radio-option input[type="radio"]:checked ~ .auth-radio-custom {
    border-color: var(--brand);
    background: var(--brand);
}
.auth-body .auth-radio-option input[type="radio"]:checked ~ .auth-radio-custom::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 6px;
    height: 6px;
    background: #fff;
    border-radius: 50%;
}
.auth-body .auth-radio-content {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-left: 2.5rem;
}
.auth-body .auth-radio-content span {
    font-weight: 500;
    color: var(--text);
    font-size: 0.9rem;
}

.auth-body .photo-upload-container {
    position: relative;
    width: 100%;
    max-width: 250px;
    margin: 0 auto;
}
.auth-body .photo-preview {
    width: 100%;
    height: 350px;
    border: 2px dashed var(--border);
    border-radius: var(--r-md);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition);
    background: var(--surface);
    position: relative;
    overflow: hidden;
}
.auth-body .photo-preview i {
    font-size: 2rem;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}
.auth-body .photo-preview span {
    color: var(--text-soft);
    font-size: 0.9rem;
    text-align: center;
}
.auth-body .photo-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}
.auth-body .photo-input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}

/* Register — carte (alignée profil / lieu-detail) */
.auth-body .register-map-wrap { margin-bottom: 8px; }
.auth-body .register-map-hint {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    background: var(--brand-soft);
    border: 1px solid rgba(255, 56, 92, 0.15);
    border-radius: var(--r-sm);
    margin-bottom: 12px;
    font-size: 0.82rem;
    color: var(--text-soft);
    line-height: 1.45;
}
.auth-body .register-map-hint i {
    color: var(--brand);
    margin-top: 2px;
    flex-shrink: 0;
}
.auth-body .register-map.map-container,
.auth-body #map.register-map {
    height: 220px;
    width: 100%;
    max-width: 100%;
    border-radius: var(--r-md);
    border: 1px solid var(--border);
    overflow: hidden;
    background: var(--bg);
    box-shadow: var(--shadow-sm);
    margin-bottom: 0;
    box-sizing: border-box;
}
.auth-body .register-map-wrap .leaflet-container {
    font-family: var(--font);
    background: var(--bg);
}
.auth-body .register-map-wrap .leaflet-control-zoom {
    border: none;
    box-shadow: var(--shadow-sm);
    border-radius: var(--r-sm);
    overflow: hidden;
}
.auth-body .register-map-wrap .leaflet-control-zoom a {
    width: 32px;
    height: 32px;
    line-height: 32px;
    font-size: 16px;
    background: var(--surface);
    color: var(--text);
    border-bottom: 1px solid var(--border);
}
.auth-body .register-map-wrap .leaflet-control-zoom a:last-child { border-bottom: none; }
.auth-body .register-map-wrap .leaflet-control-zoom a:hover {
    background: var(--brand-soft);
    color: var(--brand);
}

.auth-back-home {
    position: fixed;
    top: max(12px, env(safe-area-inset-top));
    left: max(12px, env(safe-area-inset-left));
    z-index: 100001;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: var(--r-pill);
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text-soft);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}
.auth-back-home:hover {
    color: var(--brand);
    border-color: rgba(255, 56, 92, 0.35);
    background: var(--brand-soft);
}
.auth-back-home i {
    font-size: 0.8rem;
}

/* Modal vérification d'âge (inscription) */
.age-verification-overlay {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.28s ease, visibility 0.28s ease;
}
.age-verification-overlay--dismissed {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
.age-verification-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(16, 24, 40, 0.52);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.age-verification-modal {
    position: relative;
    z-index: 1;
    width: min(100%, 420px);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    animation: ageModalIn 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes ageModalIn {
    from { opacity: 0; transform: translateY(18px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.age-verification-header {
    padding: 26px 24px 20px;
    text-align: center;
    background: linear-gradient(165deg, var(--brand-soft) 0%, var(--surface) 62%);
    border-bottom: 1px solid var(--border);
}
.age-verification-logo {
    height: 32px;
    width: auto;
    max-width: 140px;
    margin: 0 auto 14px;
    display: block;
    object-fit: contain;
}
.age-verification-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: var(--r-pill);
    background: var(--surface);
    border: 1px solid var(--border);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--brand);
    margin-bottom: 10px;
}
.age-verification-title {
    margin: 0 0 8px;
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -0.02em;
    line-height: 1.25;
}
.age-verification-text {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-soft);
    line-height: 1.55;
}
.age-verification-body {
    padding: 20px 24px 22px;
}
.age-verification-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.age-verification-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 14px 18px;
    border-radius: var(--r-md);
    font-size: 0.94rem;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
    border: none;
    font-family: inherit;
}
.age-verification-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
}
.age-verification-btn.confirm {
    background: var(--brand);
    color: #fff;
    box-shadow: 0 6px 18px rgba(255, 56, 92, 0.28);
}
.age-verification-btn.confirm:hover:not(:disabled) {
    background: var(--brand-dark);
    transform: translateY(-1px);
}
.age-verification-btn.deny {
    background: var(--surface);
    color: var(--text-soft);
    border: 1.5px solid var(--border);
}
.age-verification-btn.deny:hover:not(:disabled) {
    background: var(--bg);
    color: var(--text);
    border-color: var(--text-muted);
}
.age-verification-footer {
    margin-top: 16px;
    text-align: center;
}
.age-verification-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-soft);
    text-decoration: none;
    transition: var(--transition);
}
.age-verification-back:hover { color: var(--brand); }
.age-verification-deny-msg {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: var(--r-md);
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.2);
    color: #b91c1c;
    font-size: 0.88rem;
    font-weight: 600;
}
.age-verification-deny-msg[hidden] { display: none !important; }

/* Uniquement inscription : modal âge (pas login / mot de passe oublié) */
html:not(.age-already-verified) body.auth-body:has(.age-verification-overlay) {
    overflow: hidden;
}
html:not(.age-already-verified) body.auth-body:has(.age-verification-overlay) .auth-back-home {
    display: none;
}

html.age-already-verified .age-verification-overlay {
    display: none !important;
}
html.age-already-verified .auth-container {
    display: flex !important;
}
html.age-already-verified .auth-container.show {
    animation: fadeInUp 0.4s ease-out;
}
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 480px) {
    .age-verification-header { padding: 22px 18px 16px; }
    .age-verification-body { padding: 16px 18px 20px; }
    .age-verification-title { font-size: 1.15rem; }
    .age-verification-text { font-size: 0.86rem; }
    .age-verification-btn { padding: 13px 16px; font-size: 0.9rem; }
}

/* Pages standalone — 404 & accès interdit (même famille que auth) */
body.page-404,
body.page-acces-interdit {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}
.error-page-main {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 460px;
    margin: 0 auto;
    padding: max(72px, calc(env(safe-area-inset-top) + 56px)) 16px max(24px, env(safe-area-inset-bottom));
}
.error-page-card {
    width: 100%;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    text-align: center;
    animation: errorPageIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes errorPageIn {
    from { opacity: 0; transform: translateY(18px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.error-page-header {
    padding: 28px 24px 20px;
    background: linear-gradient(165deg, var(--brand-soft) 0%, var(--surface) 62%);
    border-bottom: 1px solid var(--border);
}
.error-page-logo-link {
    display: inline-block;
    margin-bottom: 14px;
    line-height: 0;
}
.error-page-logo {
    height: 48px;
    width: auto;
    max-width: 220px;
    display: block;
    object-fit: contain;
}
.error-page-code {
    display: block;
    font-size: 3.75rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--brand);
    margin-bottom: 6px;
}
.error-page-title {
    margin: 0 0 8px;
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -0.02em;
}
.error-page-text {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-soft);
    line-height: 1.55;
}
.error-page-body {
    padding: 22px 24px 26px;
}
.error-page-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.error-page-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 14px 18px;
    border-radius: var(--r-md);
    font-size: 0.94rem;
    font-weight: 700;
    text-decoration: none;
    transition: var(--transition);
    font-family: inherit;
    cursor: pointer;
}
.error-page-btn--primary {
    background: var(--brand);
    color: #fff;
    border: none;
    box-shadow: 0 6px 18px rgba(255, 56, 92, 0.28);
}
.error-page-btn--primary:hover {
    background: var(--brand-dark);
    transform: translateY(-1px);
    color: #fff;
}
.error-page-btn--secondary {
    background: var(--surface);
    color: var(--text-soft);
    border: 1.5px solid var(--border);
}
.error-page-btn--secondary:hover {
    background: var(--bg);
    color: var(--text);
    border-color: var(--text-muted);
}
.error-page-links {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
}
.error-page-links-label {
    margin: 0 0 12px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.error-page-links-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}
.error-page-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 12px;
    border-radius: var(--r-pill);
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text-soft);
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    transition: var(--transition);
}
.error-page-link:hover {
    color: var(--brand);
    border-color: rgba(255, 56, 92, 0.35);
    background: var(--brand-soft);
}
@media (max-width: 480px) {
    .error-page-header { padding: 22px 18px 16px; }
    .error-page-body { padding: 18px 18px 22px; }
    .error-page-code { font-size: 3rem; }
    .error-page-title { font-size: 1.15rem; }
    .error-page-text { font-size: 0.86rem; }
    .error-page-btn { padding: 13px 16px; font-size: 0.9rem; }
}

.auth-title {
    color: var(--text);
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0 0 0.5rem;
}
.auth-subtitle {
    color: var(--text-soft);
    font-size: 0.9rem;
    margin: 0;
    line-height: 1.5;
}
.auth-tagline { color: var(--text-soft); }
.auth-logo .spiitz-text { color: var(--text); }

/* Logo SPIITZ identique à l'index (🔥 + texte en marque) */
.auth-logo { text-align: center; margin-bottom: 1.5rem; }
.auth-brand {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--text);
    text-decoration: none;
}
.auth-brand i { color: var(--brand); }
.auth-brand:hover { color: var(--brand-dark); }
.auth-logo-img {
    height: 34px;
    width: auto;
    max-width: 150px;
    display: block;
    margin: 0 auto;
    object-fit: contain;
}
.auth-logo .auth-tagline { margin-top: 12px; font-size: 0.92rem; }
@media (max-width: 480px) { .auth-logo-img { height: 30px; max-width: 130px; } }

.auth-form-wrapper {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-md);
    padding: 28px 26px;
}
.auth-header {
    text-align: center;
    margin-bottom: 1.5rem;
}

.form-label { color: var(--text); font-weight: 600; }
.form-input {
    display: block;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--border) !important;
    border-radius: var(--r-sm) !important;
    background: var(--surface) !important;
    color: var(--text) !important;
    padding: 0.85rem 0.95rem !important;
    font-size: 16px;
    transition: var(--transition) !important;
}
.form-input:focus {
    border-color: var(--brand) !important;
    box-shadow: 0 0 0 3px var(--brand-soft) !important;
}
.form-input.error { border-color: var(--brand-dark) !important; }

.auth-button {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0.875rem 1.25rem;
    border: none;
    background: var(--brand);
    color: #fff;
    border-radius: var(--r-pill);
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    margin-bottom: 1rem;
    transition: var(--transition);
}
.auth-button:hover { background: var(--brand-dark); transform: translateY(-1px); }
.auth-button:active { transform: translateY(0); }
.auth-button.secondary {
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
}
.auth-button.secondary:hover { border-color: var(--text-muted); background: var(--bg); }

.progress-fill { background: linear-gradient(135deg, var(--brand), var(--brand-dark)) !important; }

.auth-radio-option { border-radius: var(--r-md); }
.auth-radio-option:hover { border-color: var(--brand); background: var(--brand-soft); }
.auth-radio-option input[type="radio"]:checked ~ .auth-radio-custom { border-color: var(--brand); }
.auth-radio-option input[type="radio"]:checked ~ .auth-radio-custom::after { background: var(--brand); }
.auth-radio-content i { color: var(--brand); }

.auth-link,
.forgot-password { color: var(--brand); font-weight: 600; }
.auth-link:hover,
.forgot-password:hover { color: var(--brand-dark); }

.checkbox-label a { color: var(--brand); }
.auth-body .terms-link {
    color: var(--brand-dark, #e11d48);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.auth-body .terms-link:hover {
    color: var(--brand, #ff385c);
}
.photo-preview:hover,
.photo-input:hover + .photo-preview { border-color: var(--brand); background: var(--brand-soft); }

/* Register — étape photo (recadrage profil 4/5) */
.auth-body .register-photo-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px 8px;
    margin: 0 0 0.85rem;
    padding: 8px 10px;
    border-radius: var(--r-sm);
    border: 1px solid var(--border);
    background: var(--surface);
    text-align: center;
}
.auth-body .register-photo-badge {
    display: inline-block;
    margin: 0;
    padding: 2px 7px;
    border-radius: var(--r-pill);
    background: var(--brand-soft);
    color: var(--brand-dark);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    line-height: 1.3;
}
.auth-body .register-photo-stats {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.78rem;
    line-height: 1.35;
}
.auth-body .register-photo-stats i {
    color: var(--brand);
    margin-right: 4px;
    font-size: 0.72rem;
}
.auth-body .register-photo-stats strong {
    color: var(--brand-dark);
    font-weight: 700;
}
.auth-body .register-photo-upload {
    max-width: var(--profil-photo-max-width, 300px);
}
.auth-body .register-photo-preview {
    width: 100%;
    height: auto;
    aspect-ratio: var(--profil-photo-aspect, 4 / 5);
    max-height: min(var(--profil-photo-max-height-mobile, 62vh), 420px);
    border-radius: var(--r-lg);
}
.auth-body .register-photo-preview.has-photo {
    border-style: solid;
    padding: 0;
}
.auth-body .register-photo-preview img.profil-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}
.auth-body .register-photo-change {
    display: block;
    width: 100%;
    max-width: var(--profil-photo-max-width, 300px);
    margin: 10px auto 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--brand);
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
}
.auth-body .register-photo-change:hover {
    color: var(--brand-dark);
    text-decoration: underline;
}
.auth-body .step-buttons {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 10px;
}
.auth-body .step-buttons .auth-button {
    flex: 1 1 0;
    min-width: 0;
    margin-bottom: 0;
}

/* Register — dates de naissance couple */
.auth-body .register-couple-dates-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
}
.auth-body .register-couple-dates-grid > div {
    min-width: 0;
}
.auth-body .form-group {
    min-width: 0;
    max-width: 100%;
}
.auth-body .input-wrapper {
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    position: relative;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}
.auth-body .input-wrapper > .form-input {
    grid-area: 1 / 1;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding-left: 2.75rem !important;
}
.auth-body .input-wrapper > .input-icon {
    grid-area: 1 / 1;
    align-self: center;
    justify-self: start;
    margin-left: 0.95rem;
    z-index: 2;
    color: var(--text-muted);
    font-size: 0.9rem;
    pointer-events: none;
    line-height: 1;
    width: 1em;
    text-align: center;
}
.auth-body .input-wrapper > .password-toggle {
    grid-area: 1 / 1;
    align-self: center;
    justify-self: end;
    margin-right: 0.75rem;
    z-index: 3;
    position: static;
    transform: none;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    line-height: 1;
}
.auth-body .input-wrapper > .password-toggle:hover {
    color: var(--brand);
}
.auth-body .input-wrapper > .pseudo-status {
    grid-area: 2 / 1;
    margin-top: 8px;
}
.auth-body .input-wrapper:has(> .password-toggle) > .form-input {
    padding-right: 2.75rem !important;
}
.auth-body .register-couple-dates-grid .input-wrapper {
    width: 100%;
    min-width: 0;
}
.auth-body .form-input[type="date"] {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding-right: 0.95rem !important;
    -webkit-appearance: none;
    appearance: none;
}
.auth-body .form-input[type="date"]::-webkit-date-and-time-value {
    text-align: left;
    min-width: 0;
}
.auth-body .form-input[type="date"]::-webkit-calendar-picker-indicator {
    margin: 0;
    padding: 0;
    cursor: pointer;
    flex-shrink: 0;
}

/* Alerte inline dans le formulaire (pas le toast fixe .auth-message) */
.auth-inline-alert {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 1.25rem;
    padding: 14px 16px;
    border-radius: var(--r-md);
    border: 1px solid var(--border);
    background: var(--surface);
    animation: spiitzToastIn 0.22s ease-out;
}
.auth-inline-alert__icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 0.9rem;
}
.auth-inline-alert__body { flex: 1; min-width: 0; }
.auth-inline-alert__title {
    display: block;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 4px;
}
.auth-inline-alert__text {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.45;
    color: var(--text-soft);
}
.auth-inline-alert__actions { margin-top: 10px; }
.auth-inline-alert__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--brand);
    text-decoration: none;
}
.auth-inline-alert__link:hover { color: var(--brand-dark); text-decoration: underline; }

.auth-inline-alert--error {
    border-color: rgba(255, 56, 92, 0.28);
    background: var(--brand-soft);
}
.auth-inline-alert--error .auth-inline-alert__icon {
    background: #fff;
    color: var(--brand);
}

.auth-inline-alert--success {
    border-color: rgba(16, 185, 129, 0.28);
    background: #ecfdf5;
}
.auth-inline-alert--success .auth-inline-alert__icon {
    background: #fff;
    color: var(--green, #10b981);
}
.auth-inline-alert--success .auth-inline-alert__text { color: #047857; }

.auth-inline-alert--ban {
    border-color: rgba(239, 68, 68, 0.3);
    background: #fef2f2;
}
.auth-inline-alert--ban .auth-inline-alert__icon {
    background: #fff;
    color: #dc2626;
}
.auth-inline-alert--ban .auth-inline-alert__text { color: #7f1d1d; }

.auth-hint {
    margin: 8px 0 0;
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.4;
}
.auth-hint i { color: var(--brand); margin-right: 4px; }

.auth-empty-state {
    text-align: center;
    padding: 8px 0 4px;
}
.auth-empty-state__icon {
    width: 52px;
    height: 52px;
    margin: 0 auto 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--brand-soft);
    color: var(--brand);
    font-size: 1.25rem;
}
.auth-empty-state p {
    margin: 0 0 14px;
    font-size: 0.88rem;
    color: var(--text-soft);
    line-height: 1.45;
}

.password-toggle {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    line-height: 1;
}
.password-toggle:hover { color: var(--brand); }
.auth-body .password-toggle {
    position: static;
    transform: none;
}
.input-wrapper:has(.password-toggle) .form-input:not([type="date"]) {
    padding-right: 2.75rem !important;
}
.auth-body .input-wrapper:has(> .password-toggle) .form-input:not([type="date"]) {
    padding-right: 2.75rem !important;
}

/* ============================================================
   PAGE ANNONCES — design unifié (corps + modales + composants)
   Remplace : annonces-inline-1.css / annonces-inline-2.css
   ============================================================ */
.annonces-main { padding: 26px 0 60px; }
.annonces-main .content-wrapper {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 24px;
}
.annonces-section { margin-top: 6px; }

/* États de fin de liste / chargement (annonces) */
.annonces-list-status {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 28px auto 12px;
    padding: 0 16px;
}
.annonces-list-status__card {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    max-width: 420px;
    text-align: center;
    padding: 22px 20px;
    border: 1px dashed var(--border);
    border-radius: var(--r-md);
    background: var(--surface-2, #f8f9fb);
    color: var(--text-soft);
}
.annonces-list-status__card.is-visible {
    display: flex;
}
.annonces-list-status__icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text-muted);
}
.annonces-list-status__card--hint .annonces-list-status__icon {
    background: var(--brand-soft);
    border-color: rgba(255, 56, 92, 0.2);
    color: var(--brand);
    animation: annonces-list-status-bounce 1.6s ease-in-out infinite;
}
.annonces-list-status__card--end .annonces-list-status__icon {
    background: rgba(16, 185, 129, 0.1);
    border-color: rgba(16, 185, 129, 0.25);
    color: #059669;
}
.annonces-list-status__text {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.45;
    font-weight: 600;
    color: var(--text-soft);
    max-width: 32ch;
}
.annonces-list-status__card--end .annonces-list-status__text {
    color: var(--text);
}
.annonces-list-status__spinner {
    width: 28px;
    height: 28px;
    border: 2px solid var(--border);
    border-top-color: var(--brand);
    border-radius: 50%;
    animation: spin 0.9s linear infinite;
}
@keyframes annonces-list-status-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(4px); }
}

/* Bandeau d'info recherche */
.annonces-search-message {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    padding: 12px 16px;
    background: var(--brand-soft);
    border: 1px solid #fecdd3;
    border-radius: var(--r-md);
    color: var(--brand-dark);
    font-size: 0.9rem;
}
.annonces-search-message i { color: var(--brand); }

/* État vide */
.annonces-no-results {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 20px;
    color: var(--text-soft);
    font-size: 1rem;
}
.annonces-no-results p { margin: 0; }

/* Section filtres */
.annonces-filters-section { margin: 0 0 18px; }
.annonces-filters-section + .annonces-filters-section { margin-top: -6px; }

.reset-filters-btn {
    background: var(--surface) !important;
    border-color: var(--border) !important;
    color: var(--text-soft) !important;
}
.reset-filters-btn:hover {
    border-color: var(--brand) !important;
    color: var(--brand) !important;
}

/* Footer de carte annonce */
.annonce-footer-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* Carte boostée — médaillon centré qui dépasse */
.annonce-card { position: relative; }
.annonce-card.annonce-premium,
.annonce-card.annonce-boost {
    overflow: visible;
    margin-top: 18px;
    border: 1px solid rgba(245, 158, 11, 0.34);
    background: linear-gradient(165deg, #ffffff 0%, #fffdf8 52%, #fff9ed 100%);
    box-shadow:
        0 10px 30px rgba(245, 158, 11, 0.1),
        0 2px 8px rgba(16, 24, 40, 0.04);
}
.annonce-card.annonce-premium:hover,
.annonce-card.annonce-boost:hover {
    transform: translateY(-5px);
    border-color: rgba(245, 158, 11, 0.5);
    box-shadow:
        0 16px 38px rgba(245, 158, 11, 0.15),
        0 4px 14px rgba(16, 24, 40, 0.06);
}
.annonce-card.annonce-premium .annonce-content,
.annonce-card.annonce-boost .annonce-content {
    padding-top: 24px;
    position: relative;
    z-index: 2;
}
.annonce-card .annonce-boost-pin {
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 6;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(145deg, #fff8e1 0%, #fbbf24 42%, #d97706 100%);
    border: 3px solid #fff;
    color: #fff;
    font-size: 1.02rem;
    line-height: 1;
    pointer-events: none;
    box-shadow:
        0 8px 22px rgba(217, 119, 6, 0.28),
        0 0 0 1px rgba(251, 191, 36, 0.28);
    animation: annonce-boost-pin-float 3.2s ease-in-out infinite;
}
.annonce-card .annonce-boost-pin i {
    display: block;
    transform: rotate(-24deg);
    filter: drop-shadow(0 1px 2px rgba(120, 53, 15, 0.22));
    animation: annonce-boost-rocket 3.2s ease-in-out infinite;
}
.annonce-card.annonce-premium .btn-repondre,
.annonce-card.annonce-premium .btn-participate,
.annonce-card.annonce-boost .btn-repondre,
.annonce-card.annonce-boost .btn-participate {
    background: linear-gradient(135deg, #fcd34d 0%, #f59e0b 48%, #d97706 100%);
    box-shadow: 0 4px 14px rgba(217, 119, 6, 0.26);
}
.annonce-card.annonce-premium .btn-repondre:hover,
.annonce-card.annonce-premium .btn-participate:hover,
.annonce-card.annonce-boost .btn-repondre:hover,
.annonce-card.annonce-boost .btn-participate:hover {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 48%, #b45309 100%);
    filter: none;
    transform: translateY(-1px);
}
@keyframes annonce-boost-pin-float {
    0%, 100% { transform: translate(-50%, -50%); }
    50% { transform: translate(-50%, calc(-50% - 5px)); }
}
@keyframes annonce-boost-rocket {
    0%, 100% { transform: rotate(-24deg) scale(1); }
    50% { transform: rotate(-14deg) scale(1.07); }
}
@media (prefers-reduced-motion: reduce) {
    .annonce-card .annonce-boost-pin,
    .annonce-card .annonce-boost-pin i { animation: none; }
}
.annonce-card .annonce-photo-count {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 7px;
    border-radius: var(--r-pill);
    background: var(--bg);
    color: var(--text-soft);
    font-size: 0.68rem;
    font-weight: 600;
}
.annonce-card .annonce-photo-count i { color: var(--brand); font-size: 0.65rem; }

/* Annonces expirées / masquées */
.annonce-card.hidden { display: none !important; }
.annonce-card.expired { opacity: 0.62; filter: grayscale(0.7); }
.annonce-card.expired::before {
    content: 'EXPIRÉ';
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 4;
    background: var(--brand-dark);
    color: #fff;
    padding: 4px 9px;
    border-radius: var(--r-pill);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
.annonce-card.expired .btn-repondre,
.annonce-card.expired .btn-participate,
.annonce-card.expired .favorite-btn,
.annonce-card.expired .action-btn:not(.btn-signaler) {
    opacity: 0.5;
    pointer-events: none;
}

/* Détail annonce expirée (modal + page) */
.annonce-detail-main.expired .annonce-detail-main-content {
    opacity: 0.58;
    filter: grayscale(0.82);
}

.annonce-detail-main.expired .annonce-detail-sidebar {
    opacity: 0.72;
    filter: grayscale(0.35);
}

.annonce-detail-main.expired::before {
    content: none !important;
    display: none !important;
}

.annonce-detail-expired-notice {
    display: none !important;
}

.annonce-detail-section--expired-media {
    margin-top: 0;
}

.annonce-detail-expired-photos {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 168px;
    padding: 28px 20px;
    border-radius: var(--r-md);
    border: 1px dashed var(--border);
    background: var(--bg);
    color: var(--text-soft);
    text-align: center;
}

.annonce-detail-expired-photos__badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border-radius: var(--r-pill);
    background: var(--surface-2, #f3f4f6);
    border: 1px solid var(--border);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-soft);
}

.annonce-detail-expired-photos__badge i {
    font-size: 0.78rem;
    opacity: 0.85;
}

.annonce-detail-expired-photos__text {
    margin: 0;
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--text-muted);
}

.annonce-detail-modal__action-btn--primary.is-reply-disabled,
.annonce-detail-modal__action-btn--primary.is-reply-disabled:disabled,
.annonce-detail-modal__action-btn--primary.is-expired-action,
.annonce-detail-modal__action-btn--primary.is-expired-action:disabled {
    flex: 1 1 auto;
    min-width: 0;
    display: inline-flex !important;
    background: var(--brand) !important;
    border-color: var(--brand) !important;
    color: #fff !important;
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
    box-shadow: none;
    filter: grayscale(0.2);
}

.annonce-detail-modal__actions .annonce-detail-modal__action-btn--primary.is-reply-disabled,
.annonce-detail-modal__actions .annonce-detail-modal__action-btn--primary.is-reply-disabled:disabled {
    flex: 1;
}

.annonce-detail-main.expired .annonce-detail-modal__action-btn--primary.is-reply-disabled,
.annonce-detail-main.expired .annonce-detail-modal__action-btn--primary.is-expired-action,
.annonce-detail-main.expired .annonce-detail-page__actions .annonce-detail-modal__action-btn--primary.is-reply-disabled,
.annonce-detail-main.expired .annonce-detail-page__actions .annonce-detail-modal__action-btn--primary.is-expired-action {
    display: inline-flex;
}

/* En-tête « annonces d'un lieu » */
.annonces-place-filter-info {
    position: relative;
    margin: 0 0 26px;
    padding: 20px 22px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    animation: slideInFromTop 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.annonces-place-filter-info::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--brand), var(--brand-dark));
}
.annonces-place-filter-content { display: flex; align-items: center; gap: 16px; }
.annonces-place-filter-icon {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border-radius: var(--r-md);
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--brand), var(--brand-dark));
    color: #fff;
    font-size: 1.1rem;
    box-shadow: var(--shadow-sm);
}
.annonces-place-filter-text { flex: 1; min-width: 0; }
.annonces-place-filter-text h3 { margin: 0 0 3px; font-size: 1.1rem; font-weight: 800; }
.annonces-place-filter-text p {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9rem;
    color: var(--text-soft);
}
.annonces-place-filter-remove {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: var(--transition);
}
.annonces-place-filter-remove:hover { border-color: var(--brand); color: var(--brand); }

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

/* FAB mobile « déposer une annonce » */
.annonces-fab-mobile {
    position: fixed;
    right: 16px;
    bottom: calc(64px + 14px + env(safe-area-inset-bottom, 0px));
    z-index: 1115;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: var(--brand);
    color: #fff;
    font-size: 1.05rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 22px rgba(255, 56, 92, 0.35);
    cursor: pointer;
    transition: var(--transition);
}
.annonces-fab-mobile:hover { background: var(--brand-dark); transform: translateY(-2px); }
.annonces-fab-mobile:active { transform: scale(0.95); }
body.deposer-modal-open .annonces-fab-mobile {
    display: none !important;
    pointer-events: none;
}
/* Desktop : pas de barre de navigation en bas -> FAB calé en bas à droite, un peu plus grand */
@media (min-width: 768px) {
    .annonces-fab-mobile {
        right: 32px;
        bottom: 32px;
        width: 60px;
        height: 60px;
        font-size: 1.45rem;
        box-shadow: 0 12px 28px rgba(255, 56, 92, 0.4);
    }
}

/* Visibilité responsive */
.desktop-only { display: inline-flex; }
.annonces-main .mobile-only { display: none; }
@media (max-width: 767px) {
    .desktop-only { display: none !important; }
    .annonces-main .mobile-only { display: inline-flex !important; }
}

/* CTA desktop « Déposer une annonce » / « Proposer un lieu »
   (le FAB rond reste pour le mobile, ce bouton est masqué sous 768px) */
.add-cta-row {
    display: flex;
    justify-content: flex-end;
    margin: 2px 0 16px;
}
.add-cta-desktop {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--brand);
    color: #fff;
    border: none;
    border-radius: var(--r-pill);
    padding: 11px 20px;
    font-size: 0.92rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(255, 56, 92, 0.32);
    transition: var(--transition);
    font-family: inherit;
}
.add-cta-desktop:hover { background: var(--brand-dark); transform: translateY(-1px); }
.add-cta-desktop i { font-size: 0.9rem; }
@media (max-width: 767px) {
    .add-cta-row { display: none !important; }
}

/* ---------- Modale filtres avancés ---------- */
.filters-modal {
    position: fixed;
    inset: 0;
    z-index: 1300;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.filters-modal.active { display: flex; }
.filters-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(16, 24, 40, 0.55);
    backdrop-filter: blur(2px);
}
.filters-modal-content {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 520px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}
.filters-modal-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 22px;
    border-bottom: 1px solid var(--border);
}
.filters-modal-header h3 { margin: 0; font-size: 1.2rem; font-weight: 800; }
.filters-modal-close {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition);
}
.filters-modal-close:hover { border-color: var(--brand); color: var(--brand); }
.filters-modal-body { padding: 22px; overflow-y: auto; }
.filters-modal-footer {
    display: flex;
    gap: 12px;
    padding: 18px 22px;
    border-top: 1px solid var(--border);
}
.filter-group { margin-bottom: 22px; }
.filter-group h4 { margin: 0 0 12px; font-size: 0.95rem; font-weight: 700; }
.filter-options { display: flex; flex-wrap: wrap; gap: 10px; }
.filter-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: 1px solid var(--border);
    border-radius: var(--r-pill);
    cursor: pointer;
    font-size: 0.9rem;
    transition: var(--transition);
}
.filter-checkbox:hover { border-color: var(--brand); }
.filter-checkbox input { accent-color: var(--brand); }
.filter-range { display: flex; align-items: center; gap: 14px; }
.filter-range input[type="range"] { flex: 1; accent-color: var(--brand); }
.btn-reset-filters,
.btn-apply-filters {
    flex: 1;
    padding: 12px;
    border-radius: var(--r-pill);
    font-weight: 700;
    border: 1px solid var(--border);
    cursor: pointer;
    transition: var(--transition);
}
.btn-reset-filters { background: var(--surface); color: var(--text); }
.btn-reset-filters:hover { border-color: var(--text-muted); }
.btn-apply-filters { background: var(--brand); color: #fff; border-color: var(--brand); }
.btn-apply-filters:hover { background: var(--brand-dark); }

/* ---------- Modales distance / date ---------- */
.filter-modal {
    position: fixed;
    inset: 0;
    z-index: 1300;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(16, 24, 40, 0.55);
}
.filter-modal[style*="flex"],
.filter-modal.active { display: flex; }
.filter-modal-content {
    width: 100%;
    max-width: 320px;
    background: var(--surface);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    animation: modalSlideIn 0.25s ease-out;
}
@keyframes modalSlideIn {
    from { opacity: 0; transform: translateY(-20px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.filter-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    border-bottom: 1px solid var(--border);
}
.filter-modal-header h3 { margin: 0; font-size: 1rem; font-weight: 700; }
.filter-modal-close {
    background: none;
    border: none;
    font-size: 1.1rem;
    color: var(--text-soft);
    cursor: pointer;
    padding: 6px;
    border-radius: var(--r-sm);
    transition: var(--transition);
}
.filter-modal-close:hover { background: var(--bg); color: var(--text); }
.filter-modal-body { padding: 16px 18px; }
.distance-options,
.date-options { display: flex; flex-direction: column; gap: 8px; }
.distance-option,
.date-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--surface);
    color: var(--text);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    width: 100%;
    text-align: left;
}
.distance-option:hover,
.date-option:hover { border-color: var(--brand); background: var(--brand-soft); }
.distance-option.active,
.date-option.active { border-color: var(--brand); background: var(--brand); color: #fff; }
.distance-option i,
.date-option i { width: 18px; text-align: center; }
.distance-option span,
.date-option span { flex: 1; }

/* ---------- Message premium requis ---------- */
.premium-required-message { text-align: center; padding: 2rem 1rem; }
.premium-required-icon {
    font-size: 2.6rem;
    color: #f5b301;
    margin-bottom: 1rem;
    animation: pulse 2s ease-in-out infinite;
}
.premium-required-message h4 { font-size: 1.3rem; font-weight: 800; margin: 0 0 0.6rem; }
.premium-required-message p { color: var(--text-soft); line-height: 1.6; margin: 0 0 1.4rem; }
.btn-upgrade-premium {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.8rem 1.4rem;
    border: none;
    border-radius: var(--r-pill);
    background: linear-gradient(135deg, #f5b301, #f59e0b);
    color: #1f2937;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.3);
    transition: var(--transition);
}
.btn-upgrade-premium:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(245, 158, 11, 0.4); }
.premium-indicator { font-size: 0.72rem; color: #f5b301; margin-left: 0.25rem; }

@media (max-width: 768px) {
    .annonces-main { padding: 16px 0 60px; }
    .annonces-main .content-wrapper { padding: 0 14px; }
    .annonces-place-filter-info { padding: 16px; margin-bottom: 18px; }
    .annonces-place-filter-text h3 { font-size: 1rem; }
    .annonces-search-message { font-size: 0.82rem; padding: 10px 13px; }
}

/* ============================================================
   PAGE MESSAGES — liste des conversations (mobile-first)
   Remplace : messages.css / messages-inline.css
   ============================================================ */
.main.messages {
    background: var(--bg);
    min-height: 100vh;
    padding: 18px 0 calc(80px + env(safe-area-inset-bottom));
}
.messages-container {
    max-width: 760px;
    margin: 0 auto;
    padding: 0 16px;
}

/* Onglets */
.messages-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 5px;
    margin: 8px 0 14px;
}
.messages-tab {
    border: none;
    background: transparent;
    color: var(--text-soft);
    border-radius: var(--r-sm);
    padding: 9px 10px;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    text-align: center;
    transition: var(--transition);
}
.messages-tab.active {
    background: var(--surface);
    color: var(--brand);
    box-shadow: var(--shadow-sm);
}

@media (max-width: 768px) {
    .main.messages {
        padding-top: 12px;
        padding-left: 0;
        padding-right: 0;
        background: var(--surface);
    }
    .messages-container {
        padding: 0;
        max-width: none;
    }
    .messages-tabs {
        gap: 4px;
        padding: 4px;
        margin-left: 12px;
        margin-right: 12px;
    }
    .messages-toolbar {
        padding: 0 12px;
        margin-bottom: 12px;
    }
    .messages-panel,
    .conversations-wrapper,
    .conversations-list {
        width: 100%;
    }
    .conversation-card {
        padding: 12px max(14px, env(safe-area-inset-right)) 12px max(14px, env(safe-area-inset-left));
    }
    .conversation-card::after {
        right: 0;
        left: calc(max(14px, env(safe-area-inset-left)) + 58px);
    }
    .messages-tab {
        font-size: 0.7rem;
        padding: 8px 3px;
        line-height: 1.15;
        white-space: nowrap;
        letter-spacing: -0.02em;
    }
}

@media (max-width: 380px) {
    .messages-tabs {
        margin-left: 10px;
        margin-right: 10px;
    }
    .messages-toolbar { padding: 0 10px; }
    .messages-tab {
        font-size: 0.64rem;
        padding: 7px 2px;
        letter-spacing: -0.03em;
    }
}

/* Barre d'outils : recherche + filtres */
.messages-toolbar {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 14px;
}

/* Filtres */
.messages-filters {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 2px 0;
    margin-bottom: 0;
    scrollbar-width: none;
}
.messages-filters::-webkit-scrollbar { display: none; }
.messages-filters .filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--surface);
    color: var(--text-soft);
    border: 1px solid var(--border);
    border-radius: var(--r-pill);
    padding: 7px 14px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: var(--transition);
}
.messages-filters .filter-btn:hover { border-color: var(--brand); color: var(--brand); }
.messages-filters .filter-btn.active {
    background: var(--brand);
    color: #fff;
    border-color: var(--brand);
}
.messages-filters .filter-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    border-radius: var(--r-pill);
    background: var(--brand-soft);
    color: var(--brand-dark);
    font-size: 0.68rem;
    font-weight: 700;
}
.messages-filters .filter-btn.active .filter-count {
    background: rgba(255, 255, 255, 0.28);
    color: #fff;
}

/* Recherche */
.messages-search { position: relative; margin-bottom: 0; flex: 1; }
.messages-search > i {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 0.9rem;
    pointer-events: none;
}
.messages-search-input {
    width: 100%;
    border: 1px solid var(--border);
    background: var(--surface);
    border-radius: var(--r-pill);
    padding: 11px 16px 11px 40px;
    font-size: 0.9rem;
    font-family: inherit;
    color: var(--text);
    outline: none;
    transition: var(--transition);
}
.messages-search-input::placeholder { color: var(--text-muted); }
.messages-search-input:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-soft);
}

/* Panneau liste : pas de cadre (mobile-first, liste à plat) */
.messages-panel {
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    overflow: visible;
}

/* État vide */
.messages-empty {
    text-align: center;
    padding: 48px 20px;
    color: var(--text-soft);
}
.messages-empty i { font-size: 2.2rem; color: var(--brand); margin-bottom: 12px; display: block; }
.messages-empty h3 { margin: 0 0 6px; font-size: 1.1rem; font-weight: 700; color: var(--text); }
.messages-empty p { margin: 0 0 16px; font-size: 0.9rem; }
.messages-empty-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: var(--r-pill);
    background: var(--brand);
    color: #fff;
    font-weight: 600;
    font-size: 0.88rem;
    transition: background 0.2s ease;
}
.messages-empty-btn:hover { background: var(--brand-dark); }

/* Liste */
.conversations-wrapper { margin-top: 0; }
.conversations-list { display: flex; flex-direction: column; }

/* Swipe pour supprimer une conversation (mobile) */
.conversation-swipe-item {
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}
.conversation-swipe-delete {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 84px;
    border: none;
    padding: 0 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background: #ef4444;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    cursor: pointer;
    z-index: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.15s ease, visibility 0.15s ease;
}
.conversation-swipe-item.is-open .conversation-swipe-delete,
.conversation-swipe-item.is-dragging .conversation-swipe-delete {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
@media (hover: hover) and (pointer: fine) {
    .conversation-swipe-delete { display: none !important; }
}
.conversation-swipe-delete i { font-size: 0.95rem; }
.conversation-swipe-item {
    width: 100%;
}
.conversation-swipe-item .conversation-card {
    position: relative;
    z-index: 1;
    background: var(--surface);
    transition: transform 0.22s ease;
    will-change: transform;
    touch-action: manipulation;
    width: 100%;
}
.conversation-swipe-item.is-open .conversation-card {
    transform: translateX(-84px);
}
.conversation-swipe-item.is-dragging .conversation-card {
    transition: none;
}

/* Carte conversation */
.conversation-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 8px;
    position: relative;
    cursor: pointer;
    border-radius: 0;
    transition: background 0.15s ease;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
.conversation-card:hover { background: var(--bg); }
@media (hover: none), (pointer: coarse) {
    .conversation-card:hover { background: transparent; }
    .conversation-card-premium-priority:hover { background: var(--brand-soft); }
    .conversation-card:hover .conversation-actions .favorite-btn:not(.favorited):not(.active) {
        display: none;
    }
}
.conversation-card::after {
    content: "";
    position: absolute;
    left: 62px;
    right: 8px;
    bottom: 0;
    height: 1px;
    background: var(--border);
}
.conversations-list .conversation-card:last-child::after { display: none; }
.conversation-card-premium-priority { background: var(--brand-soft); }

/* Statut en ligne — pas d’anneau global (pastille ou barre selon le conteneur) */
.avatar-status,
.avatar-status--online,
.avatar-status--away,
.avatar-status--offline {
    box-shadow: none;
}

/* Cartes membres + profil mobile : barre de statut en bas de la photo */
.membres-member-image.avatar-status,
body.page-profil .profil-photo-container.membres-member-image.avatar-status {
    box-shadow: none;
    border: none;
}
.membres-member-image.avatar-status::after,
body.page-profil .profil-photo-container.membres-member-image.avatar-status::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4px;
    z-index: 6;
    background: #cbd5e1;
    pointer-events: none;
    display: block;
}
.membres-member-image.avatar-status--online::after,
body.page-profil .profil-photo-container.membres-member-image.avatar-status--online::after {
    background: #10b981;
}
.membres-member-image.avatar-status--away::after,
body.page-profil .profil-photo-container.membres-member-image.avatar-status--away::after {
    background: #f59e0b;
}
.membres-member-image.avatar-status--offline::after,
body.page-profil .profil-photo-container.membres-member-image.avatar-status--offline::after {
    background: #cbd5e1;
}

/* Avatars ronds — garde média (anti-téléchargement) */
.author-avatar-wrap .spiitz-media-guard,
.annonce-detail-author-photo .spiitz-media-guard,
.conversation-avatar .spiitz-media-guard,
body.page-conversation .conversation-page-avatar .spiitz-media-guard,
.messages-sidebar-avatar .spiitz-media-guard {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    line-height: 0;
}
.author-avatar-wrap .spiitz-media-guard img,
.annonce-detail-author-photo .spiitz-media-guard img,
.conversation-avatar .spiitz-media-guard img,
body.page-conversation .conversation-page-avatar .spiitz-media-guard img,
.messages-sidebar-avatar .spiitz-media-guard img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 50%;
}

/* Pastille en ligne / absent / hors ligne — avatars ronds (coin bas-droit) */
.author-avatar-wrap.avatar-status,
.annonce-detail-author-photo.avatar-status,
.conversation-avatar.avatar-status,
body.page-conversation .conversation-page-avatar.avatar-status,
.messages-sidebar-avatar.avatar-status {
    box-shadow: none;
    overflow: visible;
}
.author-avatar-wrap.avatar-status::after,
.annonce-detail-author-photo.avatar-status::after,
.conversation-avatar.avatar-status::after,
body.page-conversation .conversation-page-avatar.avatar-status::after,
.messages-sidebar-avatar.avatar-status::after {
    content: "";
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid var(--surface, #fff);
    z-index: 6;
    pointer-events: none;
    box-sizing: border-box;
    display: block;
}
.author-avatar-wrap--sm.avatar-status::after,
.author-avatar-wrap--md.avatar-status::after {
    width: 10px;
    height: 10px;
}
.author-avatar-wrap.avatar-status--online::after,
.annonce-detail-author-photo.avatar-status--online::after,
.conversation-avatar.avatar-status--online::after,
body.page-conversation .conversation-page-avatar.avatar-status--online::after,
.messages-sidebar-avatar.avatar-status--online::after {
    background: #10b981;
}
.author-avatar-wrap.avatar-status--away::after,
.annonce-detail-author-photo.avatar-status--away::after,
.conversation-avatar.avatar-status--away::after,
body.page-conversation .conversation-page-avatar.avatar-status--away::after,
.messages-sidebar-avatar.avatar-status--away::after {
    background: #f59e0b;
}
.author-avatar-wrap.avatar-status--offline::after,
.annonce-detail-author-photo.avatar-status--offline::after,
.conversation-avatar.avatar-status--offline::after,
body.page-conversation .conversation-page-avatar.avatar-status--offline::after,
.messages-sidebar-avatar.avatar-status--offline::after {
    background: #94a3b8;
}

.status-dot,
.messages-sidebar-status,
.membres-member-status,
.conversation-page-online-dot,
.annonce-detail-author-status {
    display: none !important;
}

.conversation-avatar {
    position: relative;
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    border-radius: 50%;
    overflow: visible;
    background: var(--bg);
}
.conversation-avatar > img,
.conversation-avatar > .no-photo-placeholder {
    border-radius: 50%;
    overflow: hidden;
}
.conversation-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.conversation-avatar .no-photo-placeholder {
    width: 100% !important;
    height: 100% !important;
    --ph-size: 0.76rem;
}
.conversation-details { flex: 1; min-width: 0; }
.conversation-name {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.conversation-message {
    color: var(--text-soft);
    font-size: 0.84rem;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.conversation-message .media-message-indicator,
.conversation-message .media-message-indicator.compact {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--text-soft);
    font-weight: 600;
}
.conversation-message .media-message-indicator i { color: var(--brand); font-size: 0.9em; }
.own-message-indicator { color: var(--text-muted); font-weight: 700; }

.conversation-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}
/* Boutons cœur favoris — voir section PHASE 4 en fin de app.css */

.time-and-indicator {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}
.conversation-time { font-size: 0.72rem; font-weight: 600; color: var(--text-muted); white-space: nowrap; }
.new-message-indicator .unread-count {
    background: var(--brand);
    color: #fff;
    border-radius: var(--r-pill);
    height: 18px;
    min-width: 18px;
    padding: 0 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.68rem;
    font-weight: 800;
}

@media (min-width: 769px) {
    .main.messages { padding: 30px 0 60px; }
    .conversation-card { padding: 12px; }
    /* Barre d'outils en ligne : recherche à gauche, filtres à droite */
    .messages-toolbar {
        flex-direction: row;
        align-items: center;
        gap: 14px;
    }
    .messages-filters { flex: 0 0 auto; }
    /* Favori visible au survol de la carte (pas seulement si déjà favori) */
}


/* ============================================================
   PAGE CONVERSATION — migré dans app.css (remplace
   conversation-styles.css / conversation-inline-1.css / conversation-inline-2.css)
   ============================================================ */
/* Styles pour la page de conversation */

/* Header de la conversation */
.conversation-page-header {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--border);
    padding: 0.7rem 1.1rem;
    position: sticky;
    top: 0;
    z-index: 100;
} 

.conversation-page-header-content {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.conversation-page-back-btn {
    background: none;
    border: none;
    font-size: 1.05rem;
    color: var(--text-soft);
    cursor: pointer;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.2s ease, color 0.2s ease;
}

.conversation-page-back-btn:hover {
    background: var(--bg);
    color: var(--text);
}

.conversation-page-user-info {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    flex: 1;
    min-width: 0;
}

.conversation-page-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--border);
}

.conversation-page-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.conversation-page-avatar .no-photo-placeholder,
.conversation-page-avatar-bubble .no-photo-placeholder {
    width: 100%;
    height: 100%;
}

.conversation-page-details {
    flex: 1;
    min-width: 0;
}

.conversation-page-name {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.conversation-page-premium-badge {
    background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
    color: #1e293b;
    font-size: 0.7rem;
    font-weight: bold;
    padding: 0.2rem 0.5rem;
    border-radius: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.conversation-page-status {
    font-size: 0.82rem;
    color: var(--text-soft);
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.1rem;
}

.conversation-page-status i {
    font-size: 0.7rem;
}

/* Classes uniques pour le statut en ligne */
.conversation-page-status.status-online {
    color: #10b981 !important;
}

.conversation-page-status.status-online i {
    color: #10b981 !important;
    animation: convPulse 2s infinite;
}

.conversation-page-status.status-away {
    color: #f59e0b !important;
}

.conversation-page-status.status-away i {
    color: #f59e0b !important;
}

.conversation-page-status.status-offline {
    color: #ef4444 !important;
}

.conversation-page-status.status-offline i {
    color: #ef4444 !important;
}

@keyframes convPulse {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}

.conversation-page-actions {
    display: flex;
    gap: 0.5rem;
}

.conversation-page-action-btn {
    background: none;
    border: none;
    color: var(--text-soft);
    cursor: pointer;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.2s ease, color 0.2s ease;
    font-size: 1rem;
}

.conversation-page-action-btn:hover {
    background: var(--brand-soft);
    color: var(--brand);
}

/* Zone des messages */
.conversation-page-messages-area {
    flex: 1;
    overflow-y: auto;
    padding: 1.1rem 1rem;
    background: #f6f6f8;
    min-height: 0; /* Important pour le flex */
}

.conversation-page-messages-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Messages */
.conversation-page-message {
    display: flex;
    gap: 0.75rem;
    max-width: 85%;
    width: fit-content;
}

.conversation-page-message-mine {
    flex-direction: row-reverse;
    align-self: flex-end;
    max-width: 85%;
    width: fit-content;
}

.conversation-page-message:not(.conversation-page-message-mine) {
    max-width: 85%;
    width: fit-content;
}

.conversation-page-message-avatar {
    flex-shrink: 0;
}

.conversation-page-avatar-bubble {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    align-self: flex-end;
}

.conversation-page-avatar-bubble img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.conversation-page-avatar-bubble img:hover {
    transform: scale(1.1);
}

.conversation-page-message-content {
    flex: 1;
    min-width: 0;
}

.conversation-page-message-bubble {
    background: var(--surface);
    padding: 0.6rem 0.9rem;
    border-radius: 18px 18px 18px 5px;
    border: 1px solid var(--border);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
    word-wrap: break-word;
    font-size: 0.95rem;
    color: var(--text);
}

.conversation-page-message-mine .conversation-page-message-bubble {
    background: linear-gradient(135deg, #ff5a78, #e11d48);
    color: #fff;
    border: none;
    border-radius: 18px 18px 5px 18px;
    box-shadow: 0 6px 16px rgba(225, 29, 72, 0.25);
}

.conversation-page-message-bubble p {
    margin: 0;
    line-height: 1.45;
    word-wrap: break-word;
    white-space: pre-wrap;
}

.conversation-page-message-image {
    width: 200px;
    height: 150px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: transform 0.3s ease;
    position: relative;
    flex-shrink: 0;
}

.conversation-page-message-image:hover {
    transform: scale(1.02);
}

.conversation-page-message-image .message-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.conversation-page-message-video {
    width: 200px;
    height: 150px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    position: relative;
    flex-shrink: 0;
}

.conversation-page-message-video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.conversation-page-message-meta {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.2rem;
    padding: 0 0.3rem;
    font-size: 0.7rem;
    color: var(--text-muted);
}

.conversation-page-message-mine .conversation-page-message-meta {
    justify-content: flex-end;
}

.conversation-page-message .message-time {
    color: var(--text-muted);
}

.conversation-page-message-status {
    display: flex;
    align-items: center;
}

.conversation-page-message-status i {
    font-size: 0.7rem;
}

.conversation-page-message-status i.read {
    color: #ff385c;
}

/* Zone de saisie */
.conversation-page-input-area {
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-top: 1px solid var(--border);
    padding: 0.75rem 1rem calc(0.85rem + env(safe-area-inset-bottom, 0px));
    position: sticky;
    bottom: 0;
    z-index: 100;
    box-shadow: 0 -4px 24px rgba(16, 24, 40, 0.08);
}

.conversation-page-input-wrapper {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--bg);
    border-radius: var(--r-pill);
    padding: 0.35rem 0.4rem 0.35rem 0.6rem;
    border: 1px solid var(--border);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    max-width: 900px;
    margin: 0 auto;
}
.conversation-page-input-wrapper:focus-within {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(255, 56, 92, 0.12);
    background: var(--surface);
}

.conversation-page-attachment-btn {
    background: none;
    border: none;
    color: var(--text-soft);
    cursor: pointer;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.2s ease, color 0.2s ease;
    font-size: 1.1rem;
}

.conversation-page-attachment-btn:hover {
    background: var(--brand-soft);
    color: var(--brand);
}

.conversation-page-message-input {
    flex: 1;
    border: none;
    background: transparent;
    outline: none;
    font-size: 1rem;
    color: var(--text);
    resize: none;
    max-height: 100px;
    min-height: 22px;
    padding: 0.35rem 0;
}

.conversation-page-message-input::placeholder {
    color: var(--text-muted);
}

.conversation-page-send-btn {
    background: linear-gradient(135deg, #ff5a78, #e11d48);
    color: #fff;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 50%;
    transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
    font-size: 1rem;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(225, 29, 72, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
}

.conversation-page-send-btn:hover {
    transform: scale(1.06);
    box-shadow: 0 6px 18px rgba(225, 29, 72, 0.4);
}

.conversation-page-send-btn:disabled {
    background: var(--border);
    color: var(--text-muted);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.conversation-page-image-preview {
    position: relative;
    margin-bottom: 1rem;
    border-radius: 12px;
    overflow: hidden;
    max-width: 200px;
}

.conversation-page-image-preview img {
    width: 100%;
    height: auto;
    display: block;
}

.conversation-page-image-preview-remove {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.conversation-page-image-preview-remove:hover {
    background: rgba(0, 0, 0, 0.9);
}

.conversation-page-image-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.conversation-page-image-modal.active {
    display: flex;
}

.conversation-page-image-modal-content {
    position: relative;
    max-width: 90%;
    max-height: 90%;
}

.conversation-page-image-modal-content img {
    width: 100%;
    height: auto;
    max-height: 90vh;
    object-fit: contain;
}

.conversation-page-modal-close {
    position: fixed;
    top: calc(12px + env(safe-area-inset-top, 0px));
    right: calc(12px + env(safe-area-inset-right, 0px));
    z-index: 10055;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.58);
    color: #fff;
    font-size: 1.12rem;
    cursor: pointer;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.conversation-page-modal-close:hover {
    background: rgba(15, 23, 42, 0.78);
    color: #fff;
}

.conversation-page-loading-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.55);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10050;
}

.conversation-page-loading-modal.active {
    display: flex;
}

.conversation-page-loading-content {
    background: white;
    padding: 2rem;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 1.1rem;
    color: #1e293b;
}

.conversation-page-loading-content i {
    font-size: 1.5rem;
    color: #ff385c;
}

.conversation-page-media-upload-progress {
    flex-direction: column;
    align-items: stretch;
    min-width: min(92vw, 360px);
    max-width: 420px;
    gap: 0.85rem;
    padding: 1.5rem 1.35rem;
}

.conversation-page-media-upload-progress-icon {
    align-self: center;
    width: 3rem;
    height: 3rem;
    border-radius: 999px;
    background: rgba(255, 56, 92, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ff385c;
    font-size: 1.35rem;
}

.conversation-page-media-upload-progress-body {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.conversation-page-media-upload-progress-title {
    font-size: 1.05rem;
    color: #0f172a;
    text-align: center;
}

.conversation-page-media-upload-progress-stage {
    margin: 0;
    font-size: 0.92rem;
    color: #64748b;
    text-align: center;
    min-height: 1.35em;
}

.conversation-page-media-upload-progress-bar {
    width: 100%;
    height: 8px;
    border-radius: 999px;
    background: #e2e8f0;
    overflow: hidden;
}

.conversation-page-media-upload-progress-fill {
    width: 0%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #ff385c, #ff6b81);
    transition: width 0.25s ease;
}

.conversation-page-media-upload-progress-pct {
    align-self: center;
    font-size: 0.95rem;
    font-weight: 700;
    color: #ff385c;
    font-variant-numeric: tabular-nums;
}

.conversation-page-blocked-input,
.conversation-page-waiting-input {
    text-align: center;
    padding: 1rem;
    color: #64748b;
    background: #f8fafc;
    border-radius: 8px;
    font-style: italic;
}

/* Styles spécifiques pour le mode desktop */
.desktop-mode .conversation-page {
    height: 100vh;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    overflow: hidden;
    width: 100%;
    max-width: none;
}

.desktop-mode .conversation-page-container {
    height: 100vh;
    display: flex;
    flex-direction: column;
    margin: 0;
    max-width: none;
    width: 100%;
    position: relative;
    transform: none;
    left: auto;
    top: auto;
    padding: 0;
}

.desktop-mode .conversation-page-header {
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 10;
    border-radius: 0;
    width: 100%;
}

.desktop-mode .conversation-ad-banner,
.desktop-mode .conversation-page-blocked-banner {
    flex-shrink: 0;
    width: 100%;
}

.desktop-mode .conversation-page-messages-area {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    height: 100%;
    width: 100%;
    padding: 1rem 2rem; /* Plus de padding horizontal */
}

.desktop-mode .conversation-page-input-area {
    flex-shrink: 0;
    position: sticky;
    bottom: 0;
    z-index: 10;
    width: 100%;
    padding: 1rem 2rem; /* Plus de padding horizontal */
}

/* Correction des blocs de messages pour le mode desktop */
.desktop-mode .conversation-page-message {
    max-width: 80% !important; /* Augmenté pour utiliser plus d'espace */
    width: fit-content;
}

.desktop-mode .conversation-page-message-mine {
    max-width: 80% !important; /* Augmenté pour utiliser plus d'espace */
    width: fit-content;
}

.desktop-mode .conversation-page-message:not(.conversation-page-message-mine) {
    max-width: 80% !important; /* Augmenté pour utiliser plus d'espace */
    width: fit-content;
}

.desktop-mode .conversation-page-message-bubble {
    max-width: none !important;
    width: 100% !important;
}

.desktop-mode .conversation-page-message-image {
    width: 300px !important; /* Encore plus large */
    height: 200px !important; /* Encore plus haute */
}

.desktop-mode .conversation-page-message-video {
    width: 300px !important; /* Encore plus large */
    height: 200px !important; /* Encore plus haute */
}

/* Responsive */
@media (max-width: 768px) {
    .conversation-page-message {
        max-width: 85%;
    }
    
    .conversation-page-message:not(.conversation-page-message-mine) {
        max-width: 80%;
    }
    
    .conversation-page-message-image {
        max-width: 250px;
    }
    
    .conversation-page-name {
        font-size: 1rem;
    }
    
    .conversation-page-status {
        font-size: 0.8rem;
    }
}

@media (max-width: 480px) {
    .conversation-page-message {
        max-width: 90%;
    }
    
    .conversation-page-message:not(.conversation-page-message-mine) {
        max-width: 85%;
    }
    
    .conversation-page-message-image {
        max-width: 200px;
    }
    
    .conversation-page-input-wrapper {
        padding: 0.5rem;
    }
    
    .conversation-page-message-input {
        font-size: 1rem;
    }
}

/* Indicateur de lecture premium */
.read-status-indicator {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.read-status-indicator:hover {
    opacity: 0.8;
}

.read-status-premium {
    color: #ff385c;
    font-size: 0.8rem;
}

.read-status-locked {
    color: #6b7280;
    font-size: 0.6rem !important;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
}

.read-status-locked:hover {
    color: #ff385c;
    transform: scale(1.1);
}

.read-status-locked i {
    font-size: 0.6rem !important;
}

/* Notifications */
.conversation-page-notification {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    border-radius: 16px;
    padding: 2rem 2.5rem;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    gap: 1rem;
    z-index: 1001;
    max-width: 400px;
    width: 90%;
    animation: notificationSlideIn 0.3s ease-out;
    border: 1px solid #e5e7eb;
    text-align: center;
}

.conversation-page-notification.success {
    border-left: 6px solid #10b981;
}

.conversation-page-notification.error {
    border-left: 6px solid #ef4444;
}

.conversation-page-notification.info {
    border-left: 6px solid #3b82f6;
}

.conversation-page-notification-icon {
    font-size: 2.5rem;
    flex-shrink: 0;
}

.conversation-page-notification.success .conversation-page-notification-icon {
    color: #10b981;
}

.conversation-page-notification.error .conversation-page-notification-icon {
    color: #ef4444;
}

.conversation-page-notification.info .conversation-page-notification-icon {
    color: #3b82f6;
}

.conversation-page-notification-message {
    font-size: 1.1rem;
    color: #374151;
    line-height: 1.5;
    font-weight: 500;
    word-wrap: break-word;
    word-break: break-word;
}

@keyframes notificationSlideIn {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

@keyframes notificationSlideOut {
    from {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    to {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.9);
    }
} 

.conversation-page-avatar-bubble .no-photo-placeholder {
    --ph-size: 0.7rem;
    background: linear-gradient(135deg, #6b7280, #4b5563) !important;
}

.conversation-page-avatar .no-photo-placeholder,
.conversation-page-avatar .no-photo-placeholder--header {
    width: 100%;
    height: 100%;
    --ph-size: 0.78rem;
}

.no-photo-placeholder {
    transition: transform 0.2s ease;
}
.no-photo-placeholder:hover {
    transform: scale(1.05);
}

/* Icône de statut en haut de la photo */
.conversation-page-avatar {
    position: relative;
}

.conversation-page-status-indicator {
    position: absolute;
    top: -1px;
    right: -1px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid white;
    z-index: 10;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.conversation-page-status-indicator.status-online {
    background-color: #10b981;
}

.conversation-page-status-indicator.status-online i {
    color: #10b981;
    font-size: 7px;
}

.conversation-page-status-indicator.status-away {
    background-color: #f59e0b;
}

.conversation-page-status-indicator.status-away i {
    color: #f59e0b;
    font-size: 7px;
}

.conversation-page-status-indicator.status-offline {
    background-color: #6b7280;
}

.conversation-page-status-indicator.status-offline i {
    color: #6b7280;
    font-size: 7px;
}

/* Message éclair — sous le pseudo (header conversation) */
.conversation-page-flash {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: 4px 0 0;
    padding: 0;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--text-soft);
    max-width: 100%;
}
.conversation-page-flash i {
    color: var(--brand);
    font-size: 0.72rem;
    margin-top: 3px;
    flex-shrink: 0;
}
.conversation-page-flash span {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.conversation-page-message-badge { display: none !important; }
/* conversation-inline-2.css — bloc 2 extrait de conversation.php (Phase 4) */
    /* Conversation page specific styles */
    .conversation-page {
        height: 100vh;
        overflow: hidden;
    }

    .conversation-page-container {
        display: flex;
        flex-direction: column;
        height: 100vh;
        max-width: 800px;
        margin: 0 auto;
        background: white;
        position: fixed;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
        max-width: 800px;
        overflow: hidden;
        z-index: 1;
    }

    .conversation-page-header {
        background: white;
        border-bottom: 1px solid #e5e7eb;
        padding: 0.75rem 1rem;
        position: sticky;
        top: 0;
        z-index: 10;
        flex-shrink: 0;
        min-height: 60px;
    }

    .conversation-page-header-content {
        display: flex;
        align-items: center;
        gap: 1rem;
    }

    .conversation-page-back-btn {
        background: none;
        border: none;
        font-size: 1.2rem;
        color: #6b7280;
        cursor: pointer;
        padding: 0.5rem;
        border-radius: 50%;
        transition: background-color 0.2s;
    }

    .conversation-page-back-btn:hover {
        background-color: #f3f4f6;
    }

    .conversation-page-user-info {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        flex: 1;
    }

    .conversation-page-avatar {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        overflow: hidden;
        flex-shrink: 0;
    }

    .conversation-page-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .conversation-page-details {
        flex: 1;
        min-width: 0;
    }

    .conversation-page-name {
        font-size: 0.9rem;
        font-weight: 600;
        color: #111827;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .moderation-conversation .conversation-page-name {
        color: #b91c1c;
    }

    .conversation-page-avatar-bubble-moderation {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.9rem;
        box-shadow: 0 6px 16px rgba(185, 28, 28, 0.35);
    }

    .conversation-page-status {
        font-size: 0.75rem;
        color: #10b981;
        margin-top: 0.1rem;
    }

    .conversation-page-message-badge {
        max-width: 100%;
        min-width: 0;
    }

    .conversation-page-message-badge span {
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .conversation-page-actions {
        display: flex;
        gap: 0.5rem;
        flex-shrink: 0;
    }

    .conversation-page-action-btn {
        background: none;
        border: none;
        color: var(--text-soft);
        cursor: pointer;
        width: 36px;
        height: 36px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        transition: background 0.2s ease, color 0.2s ease;
        font-size: 0.95rem;
    }

    .conversation-page-action-btn:hover {
        background-color: var(--brand-soft);
        color: var(--brand);
    }

    /* Annonce banner */
    .conversation-page-annonce-banner {
        background: var(--brand-soft);
        color: var(--text);
        padding: 0.6rem 1rem;
        border: none;
        border-bottom: 1px solid var(--border);
        margin: 0;
        flex-shrink: 0;
        cursor: pointer;
        display: block;
        text-decoration: none;
    }

    .conversation-page-annonce-banner:hover {
        background: #ffd6e0;
    }

    .conversation-page-annonce-banner-content {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        width: 100%;
    }

    .conversation-page-annonce-banner-content > i {
        color: var(--brand);
        font-size: 0.9rem;
    }

    .conversation-page-annonce-info {
        flex: 1;
        min-width: 0;
    }

    .conversation-page-annonce-label {
        font-size: 0.8rem;
        font-weight: 700;
        letter-spacing: 0.2px;
        color: var(--text);
        display: block;
    }

    /* Blocked banner */
    .conversation-page-blocked-banner {
        background: #fef2f2;
        color: #dc2626;
        padding: 0.75rem 1rem;
        text-align: center;
        flex-shrink: 0;
        font-weight: 600;
    }

    .conversation-page-blocked-banner-content {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
    }

    /* Messages area */
    .conversation-page-messages-area {
        flex: 1;
        overflow-y: auto;
        overflow-x: hidden;
        padding: 1rem;
        background: var(--bg);
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
        padding-bottom: 200px;
    }

    .conversation-page-messages-list {
        display: flex;
        flex-direction: column;
        gap: 0.3rem;
    }

    .conversation-page-message {
        display: flex;
        gap: 0.75rem;
        max-width: 70%;
        margin-bottom: 0;
    }

    .conversation-page-message-mine {
        flex-direction: row-reverse;
        margin-left: auto;
    }

    .conversation-page-message-avatar {
        flex-shrink: 0;
    }

    .conversation-page-avatar-bubble {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        overflow: hidden;
        background: #e5e7eb;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.75rem;
        font-weight: 600;
        color: #6b7280;
    }

    .conversation-page-avatar-bubble img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .conversation-page-message-content {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 0.12rem;
    }

    .conversation-page-message-bubble {
        background: var(--surface);
        padding: 0.5rem 0.75rem;
        border-radius: 16px 16px 16px 5px;
        border: 1px solid var(--border);
        box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
        word-wrap: break-word;
        word-break: break-word;
        overflow-wrap: break-word;
        font-size: 0.92rem;
        color: var(--text);
        max-width: 100%;
        display: inline-block;
    }

    .conversation-page-message-mine .conversation-page-message-bubble {
        background: linear-gradient(135deg, #ff5a78, #e11d48);
        color: #fff;
        border: none;
        border-radius: 16px 16px 5px 16px;
        box-shadow: 0 4px 12px rgba(225, 29, 72, 0.22);
    }

    .conversation-page-message-image {
        width: min(420px, 100%);
        min-width: 180px;
    }

    .conversation-page-message-image img {
        width: 100%;
        height: clamp(150px, 32vw, 320px);
        border-radius: 12px;
        cursor: pointer;
        transition: transform 0.18s ease;
        object-fit: contain;
        background: #111827;
        display: block;
    }

    .conversation-page-message-image img:hover {
        transform: scale(1.01);
    }

    .conversation-page-message-video {
        width: min(420px, 100%);
    }

    .conversation-page-message-meta {
        display: flex;
        align-items: center;
        gap: 0.3rem;
        font-size: 0.65rem;
        color: #6b7280;
        margin-left: 0.2rem;
        line-height: 1;
        min-height: 0;
        margin-top: -1px;
    }

    .conversation-page-message-mine .conversation-page-message-meta {
        justify-content: flex-end;
        margin-right: 0.2rem;
        margin-top: -1px;
    }

    .conversation-page-message-status .read {
        color: #ff385c;
    }

    .conversation-page-message-status {
        display: inline-flex;
        align-items: center;
        line-height: 1;
        font-size: 0.68rem;
        margin-left: 0.12rem;
        transform: translateY(-1px);
    }

    .conversation-page-message .message-time {
        opacity: 0;
        max-width: 0;
        overflow: hidden;
        white-space: nowrap;
        transform: translateY(2px);
        transition: opacity 0.18s ease, max-width 0.18s ease, transform 0.18s ease;
        pointer-events: none;
    }

    .conversation-page-message.show-meta .message-time,
    .conversation-page-message:hover .message-time {
        opacity: 1;
        max-width: 72px;
        transform: translateY(0);
    }

    /* Message input area */
    .conversation-page-input-area {
        background: var(--surface);
        border-top: 1px solid var(--border);
        padding: 0.75rem 1rem;
        flex-shrink: 0;
        position: sticky;
        bottom: 0;
        z-index: 10;
    }

    .conversation-page-blocked-input,
    .conversation-page-waiting-input {
        text-align: center;
        padding: 0.62rem 0.8rem;
        color: #334155;
        background: linear-gradient(180deg, #ffffff, #f8fafc);
        border-radius: 0.75rem;
        border: 1px solid #dbe4ef;
        font-size: 0.84rem;
        box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
    }

    .conversation-page-footer-notice {
        margin-bottom: 0.55rem;
        background: transparent;
        border: none;
        box-shadow: none;
        padding: 0.15rem 0.1rem 0.35rem;
        border-radius: 0;
    }

    .conversation-page-footer-notice .conversation-page-waiting-content {
        font-size: 0.78rem;
        font-weight: 600;
        color: #64748b;
    }

    .conversation-page-footer-notice .conversation-page-waiting-content i {
        color: #94a3b8;
        font-size: 0.78rem;
    }

    .conversation-page-footer-notice.conversation-page-waiting-input-moderation .conversation-page-waiting-content {
        color: #b91c1c;
    }

    .conversation-page-footer-notice.conversation-page-waiting-input-moderation .conversation-page-waiting-content i,
    .conversation-page-footer-notice .conversation-page-blocked-content i {
        color: #dc2626;
    }

    .conversation-page-waiting-content {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.45rem;
        color: #334155;
        line-height: 1.25;
        font-weight: 600;
        min-width: 0;
    }

    .conversation-page-waiting-content span {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 0;
    }

    .conversation-page-waiting-content i {
        color: #64748b;
        font-size: 0.92rem;
    }

    .conversation-page-blocked-content i {
        color: #dc2626;
    }

    .conversation-page-waiting-input-moderation {
        border-color: #fecaca;
        background: linear-gradient(180deg, #fff1f2, #ffe4e6);
        color: #991b1b;
    }

    .conversation-page-waiting-input-moderation .conversation-page-waiting-content i {
        color: #b91c1c;
    }

    .moderation-conversation .conversation-page-message:not(.conversation-page-message-mine) .conversation-page-message-bubble {
        background: #fff1f2;
        border: 1px solid #fecaca;
        color: #991b1b;
    }

    .conversation-page-input-wrapper {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        background: var(--bg);
        border-radius: var(--r-pill);
        padding: 0.3rem 0.45rem;
        border: 1px solid var(--border);
        transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    }

    .conversation-page-input-wrapper:focus-within {
        border-color: var(--brand);
        box-shadow: 0 0 0 3px rgba(255, 56, 92, 0.12);
        background: var(--surface);
    }

    .conversation-page-input-wrapper.is-disabled {
        background: #f1f5f9;
        border-color: #dbe4ef;
        opacity: 0.85;
        filter: grayscale(0.15);
    }

    .conversation-page-input-wrapper.is-disabled .conversation-page-message-input {
        color: #94a3b8;
        cursor: not-allowed;
    }

    .conversation-page-input-wrapper.is-disabled .conversation-page-plus-btn,
    .conversation-page-input-wrapper.is-disabled .conversation-page-send-btn {
        background: #cbd5e1;
        color: #f8fafc;
        cursor: not-allowed;
        transform: none;
    }

    .conversation-page-input-wrapper.is-disabled .conversation-page-plus-dropdown {
        display: none !important;
    }

    /* Aperçu média avant envoi */
    .conversation-page-compose-preview,
    .conversation-page-image-preview {
        background: #fff;
        border: 1px solid #e5e7eb;
        border-radius: 14px;
        padding: 0;
        margin: 0 auto 0.75rem;
        max-width: 720px;
        overflow: hidden;
        box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
    }

    .conversation-page-compose-preview-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        padding: 0.75rem 0.85rem;
        border-bottom: 1px solid #eef2f7;
        background: #f8fafc;
    }

    .conversation-page-compose-preview-badges {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.45rem;
    }

    .conversation-page-compose-preview-badge {
        display: inline-flex;
        align-items: center;
        padding: 0.2rem 0.55rem;
        border-radius: 999px;
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.02em;
        text-transform: uppercase;
        background: #dbeafe;
        color: #1d4ed8;
    }

    .conversation-page-compose-preview-badge.is-video {
        background: #fce7f3;
        color: #be185d;
    }

    .conversation-page-compose-preview-view-once {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        padding: 0.2rem 0.55rem;
        border-radius: 999px;
        font-size: 0.72rem;
        font-weight: 700;
        background: #fff7ed;
        color: #c2410c;
    }

    .conversation-page-compose-preview-close {
        border: none;
        background: #fff;
        color: #64748b;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        cursor: pointer;
        box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
    }

    .conversation-page-compose-preview-body {
        display: grid;
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
        gap: 0.85rem;
        padding: 0.85rem;
    }

    @media (max-width: 640px) {
        .conversation-page-compose-preview-body {
            grid-template-columns: 1fr;
        }
    }

    .conversation-page-compose-preview-meta {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 0.35rem;
        min-width: 0;
    }

    .conversation-page-compose-preview-meta strong {
        font-size: 0.92rem;
        color: #0f172a;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .conversation-page-compose-preview-meta span {
        font-size: 0.82rem;
        color: #64748b;
    }

    .conversation-page-compose-preview-meta p {
        margin: 0.35rem 0 0;
        font-size: 0.82rem;
        line-height: 1.45;
        color: #475569;
    }

    .conversation-page-compose-preview-actions {
        display: flex;
        justify-content: flex-end;
        gap: 0.55rem;
        padding: 0.75rem 0.85rem 0.9rem;
        border-top: 1px solid #eef2f7;
        background: #fff;
    }

    .conversation-page-compose-preview-btn {
        border: none;
        border-radius: 999px;
        padding: 0.62rem 1rem;
        font-size: 0.88rem;
        font-weight: 700;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
    }

    .conversation-page-compose-preview-btn.secondary {
        background: #f1f5f9;
        color: #334155;
    }

    .conversation-page-compose-preview-btn.primary {
        background: #ff385c;
        color: #fff;
    }

    .conversation-page-compose-preview-btn:disabled {
        opacity: 0.55;
        cursor: not-allowed;
    }

    /* Image preview (legacy alias) */
    .conversation-page-image-preview {
        background: white;
        border: 1px solid #e5e7eb;
        border-radius: 0.5rem;
        padding: 0.6rem;
        margin-bottom: 0.75rem;
        position: relative;
        overflow: hidden;
    }

    .conversation-page-media-preview {
        position: relative;
        width: 100%;
        max-width: 420px;
        border-radius: 10px;
        overflow: hidden;
        background: #111827;
    }

    .conversation-page-media-preview img,
    .conversation-page-media-preview video {
        width: 100%;
        height: clamp(160px, 34vw, 260px);
        display: block;
        object-fit: contain;
    }

    .conversation-page-media-preview-play {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        pointer-events: none;
        background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.35));
    }

    .conversation-page-media-preview-play i {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: rgba(255,255,255,0.9);
        color: #111827;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        box-shadow: 0 6px 18px rgba(0,0,0,0.35);
    }

    .conversation-page-image-preview-remove {
        position: absolute;
        top: 8px;
        right: 8px;
        background: rgba(17, 24, 39, 0.8);
        color: white;
        border: none;
        border-radius: 50%;
        width: 30px;
        height: 30px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.75rem;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        z-index: 2;
    }

    .conversation-page-image-preview-remove:hover {
        background-color: rgba(17, 24, 39, 1);
    }

    /* Carte vidéo dans la conversation */
    .conversation-page-video-card {
        border: 1px solid #e5e7eb;
        background: #fff;
        border-radius: 12px;
        overflow: hidden;
        padding: 0;
        cursor: pointer;
        display: block;
        max-width: 320px;
        width: 100%;
        text-align: left;
    }
    .conversation-page-video-thumb {
        position: relative;
        background: #111827;
    }
    .conversation-page-video-thumb video {
        width: 100%;
        height: 180px;
        object-fit: cover;
        display: block;
        background: #111827;
    }
    .conversation-page-video-play {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(to bottom, rgba(0,0,0,0.15), rgba(0,0,0,0.45));
        pointer-events: none;
    }
    .conversation-page-video-play i {
        width: 52px;
        height: 52px;
        border-radius: 50%;
        background: rgba(255,255,255,0.9);
        color: #111827;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        box-shadow: 0 10px 24px rgba(0,0,0,0.35);
    }
    .conversation-page-video-meta {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
        padding: 0.65rem 0.75rem;
    }

    .conversation-page-video-view-once {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        font-size: 0.72rem;
        font-weight: 700;
        color: #c2410c;
    }

    .conversation-page-video-play-label {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        font-size: 0.82rem;
        color: #475569;
    }

    .conversation-page-video-thumb--locked {
        min-height: 180px;
    }

    .conversation-page-video-placeholder {
        width: 100%;
        height: 180px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, #1f2937, #111827);
        color: rgba(255, 255, 255, 0.72);
        font-size: 2rem;
    }

    .conversation-page-video-expired-card {
        display: flex;
        align-items: center;
        gap: 0.55rem;
        max-width: 320px;
        padding: 0.85rem 1rem;
        border-radius: 12px;
        border: 1px dashed #cbd5e1;
        background: #f8fafc;
        color: #64748b;
        font-size: 0.86rem;
    }

    .conversation-page-message-video--expired .conversation-page-video-expired-card i {
        color: #94a3b8;
    }

    .conversation-page-video-meta i {
        color: #6b7280;
        font-size: 0.9rem;
    }

    /* Modal vidéo */
    .conversation-page-video-modal {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.9);
        z-index: 10000;
        align-items: center;
        justify-content: center;
        padding: 1rem;
        box-sizing: border-box;
    }
    .conversation-page-video-modal.active {
        display: flex;
    }
    .conversation-page-video-modal-content {
        position: relative;
        width: min(900px, 100%);
        max-height: 90vh;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .conversation-page-video-modal-content video {
        width: 100%;
        max-height: 90vh;
        height: auto;
        border-radius: 12px;
        background: #000;
    }

    .conversation-page-attachment-btn {
        background: none;
        border: none;
        color: #6b7280;
        cursor: pointer;
        padding: 0.6rem;
        border-radius: 50%;
        transition: all 0.2s;
        font-size: 1.1rem;
    }

    .conversation-page-attachment-btn:hover {
        background-color: #e5e7eb;
        color: #374151;
    }

    /* Styles pour le bouton + et son menu */
    .conversation-page-plus-menu {
        position: relative;
    }

    .conversation-page-plus-btn {
        background: none;
        border: none;
        color: var(--text-soft);
        cursor: pointer;
        width: 38px;
        height: 38px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        transition: background 0.2s ease, color 0.2s ease;
        font-size: 1.1rem;
    }

    .conversation-page-plus-btn:hover {
        background-color: var(--brand-soft);
        color: var(--brand);
    }

    .conversation-page-plus-dropdown {
        position: absolute;
        bottom: 100%;
        left: 0;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--r-md);
        box-shadow: var(--shadow-lg);
        min-width: 210px;
        z-index: 1000;
        display: none;
        margin-bottom: 0.6rem;
        overflow: hidden;
        padding: 6px;
    }

    .conversation-page-plus-dropdown.active {
        display: block;
    }

    .conversation-page-plus-option {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.7rem 0.8rem;
        cursor: pointer;
        transition: background-color 0.15s ease;
        border-radius: var(--r-sm);
        border-bottom: none;
    }

    .conversation-page-plus-option:last-child {
        border-bottom: none;
    }

    .conversation-page-plus-option:hover {
        background-color: var(--bg);
    }

    .conversation-page-plus-option i {
        color: var(--brand);
        font-size: 1rem;
        width: 18px;
        text-align: center;
    }

    .conversation-page-plus-option span {
        color: var(--text);
        font-size: 0.9rem;
        font-weight: 500;
    }

    /* Styles pour le modal des médias récents */
    .conversation-page-recent-media-modal {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 10002;
        align-items: center;
        justify-content: center;
    }

    .conversation-page-recent-media-modal.active {
        display: flex;
    }

    .conversation-page-recent-media-content {
        background: white;
        border-radius: 0.75rem;
        width: 90%;
        max-width: 500px;
        max-height: 80vh;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    .conversation-page-recent-media-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1rem 1.5rem;
        border-bottom: 1px solid #e5e7eb;
        background: #f9fafb;
    }

    .conversation-page-recent-media-header h3 {
        margin: 0;
        font-size: 1.1rem;
        color: #111827;
        font-weight: 600;
    }

    .conversation-page-recent-media-close {
        background: none;
        border: none;
        color: #6b7280;
        cursor: pointer;
        padding: 0.5rem;
        border-radius: 50%;
        transition: all 0.2s;
        font-size: 1.1rem;
    }

    .conversation-page-recent-media-close:hover {
        background-color: #e5e7eb;
        color: #374151;
    }

    .conversation-page-recent-media-list {
        flex: 1;
        overflow-y: auto;
        padding: 1rem;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 0.75rem;
        max-height: 60vh;
    }

    .conversation-page-recent-media-item {
        position: relative;
        border-radius: 0.5rem;
        overflow: hidden;
        cursor: pointer;
        transition: transform 0.2s;
        aspect-ratio: 1;
    }

    .conversation-page-recent-media-item:hover {
        transform: scale(1.05);
    }

    .conversation-page-recent-media-item img,
    .conversation-page-recent-media-item video {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .conversation-page-recent-media-item .media-overlay {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
        color: white;
        padding: 0.5rem;
        font-size: 0.7rem;
    }

    .conversation-page-recent-media-item .media-type {
        position: absolute;
        top: 0.25rem;
        right: 0.25rem;
        background: rgba(0, 0, 0, 0.7);
        color: white;
        padding: 0.25rem 0.5rem;
        border-radius: 0.25rem;
        font-size: 0.6rem;
        font-weight: 600;
    }

    .conversation-page-recent-media-empty {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 2rem;
        color: #6b7280;
        text-align: center;
    }

    .conversation-page-recent-media-empty i {
        font-size: 3rem;
        margin-bottom: 1rem;
        opacity: 0.5;
    }

    .conversation-page-recent-media-empty p {
        margin: 0;
        font-size: 1rem;
    }

    .conversation-page-message-input {
        flex: 1;
        border: none;
        background: none;
        outline: none;
        font-size: 1rem;
        color: #111827;
    }

    .conversation-page-message-input::placeholder {
        color: #9ca3af;
        font-size: 0.9rem;
    }

    .conversation-page-send-btn {
        background: linear-gradient(135deg, #ff5a78, #e11d48);
        border: none;
        color: #fff;
        cursor: pointer;
        padding: 0.6rem;
        border-radius: 50%;
        transition: transform 0.15s ease, box-shadow 0.2s ease;
        font-size: 1rem;
        box-shadow: 0 4px 12px rgba(225, 29, 72, 0.3);
    }

    .conversation-page-send-btn:hover {
        transform: scale(1.05);
        box-shadow: 0 6px 18px rgba(225, 29, 72, 0.4);
    }

    /* Image modal */
    .conversation-page-image-modal {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.9);
        z-index: 10000;
        align-items: center;
        justify-content: center;
    }

    .conversation-page-image-modal-content {
        position: relative;
        max-width: 90%;
        max-height: 90%;
    }

    .conversation-page-image-modal-content img {
        width: 100%;
        height: auto;
        border-radius: 0.5rem;
    }

    .conversation-page-modal-close {
        top: calc(10px + env(safe-area-inset-top, 0px));
        right: calc(10px + env(safe-area-inset-right, 0px));
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }

    /* Loading modal */
    .conversation-page-loading-modal {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 10001;
        align-items: center;
        justify-content: center;
    }

    .conversation-page-loading-content {
        background: white;
        padding: 2rem;
        border-radius: 0.5rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }

    .conversation-page-loading-content i {
        font-size: 2rem;
        color: #ff385c;
    }

    /* Premium badge */
    .conversation-page-premium-badge {
        background: linear-gradient(135deg, #ff385c, #ec4899);
        color: white;
        padding: 0.125rem 0.375rem;
        border-radius: 8px;
        font-size: 0.65rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    /* Responsive */
    @media (max-width: 768px) {
        /* Empêcher le scroll de la page sur mobile */
        body.mobile-mode {
            overflow: hidden;
            position: fixed;
            width: 100%;
            height: 100%;
        }

        .conversation-page-container {
            height: 100vh;
            width: 100%;
            max-width: 100%;
            left: 0;
            transform: none;
            display: flex;
            flex-direction: column;
            position: fixed;
            top: 0;
            bottom: 0;
            overflow: hidden;
        }

        .conversation-page-message {
            max-width: 85%;
        }

        /* Bandeau annonce: compact et propre sur mobile */
        .conversation-page-annonce-banner {
            padding: 0.5rem 0.75rem;
        }

        .conversation-page-actions {
            gap: 0.25rem;
        }

        .conversation-page-action-btn {
            padding: 0.4rem;
            font-size: 1.0rem;
        }

        /* Empêcher le scroll de la page */
        .conversation-page {
            overflow: hidden;
            position: fixed;
            width: 100%;
            height: 100%;
        }

        /* Améliorer le scroll des messages sur mobile */
        .conversation-page-messages-area {
            -webkit-overflow-scrolling: touch;
            overscroll-behavior: contain;
            padding-bottom: 0;
            flex: 1;
            min-height: 0;
            overflow-y: auto;
            padding-bottom: 200px !important; /* Augmenté encore plus l'espace pour la zone de saisie */
            margin-bottom: 0 !important;
        }

        /* S'assurer que la zone de saisie est vraiment fixe */
        .conversation-page-input-area {
            position: fixed !important;
            bottom: 0 !important;
            left: 0 !important;
            right: 0 !important;
            background: rgba(255, 255, 255, 0.98) !important;
            backdrop-filter: saturate(180%) blur(16px) !important;
            -webkit-backdrop-filter: saturate(180%) blur(16px) !important;
            box-shadow: 0 -6px 28px rgba(16, 24, 40, 0.12) !important;
            flex-shrink: 0 !important;
            z-index: 100 !important;
            border-top: 1px solid var(--border, #ececf0) !important;
            padding: 0.75rem 1rem calc(0.85rem + env(safe-area-inset-bottom, 0px)) !important;
            width: 100% !important;
        }

        /* Réduire encore plus les tailles sur mobile */
        .conversation-page-name {
            font-size: 0.85rem;
        }

        .conversation-page-status {
            font-size: 0.7rem;
            margin-top: 0.05rem;
        }

        .conversation-page-message-bubble {
            font-size: 0.85rem;
            padding: 0.42rem 0.62rem;
            word-wrap: break-word;
            word-break: break-word;
            overflow-wrap: break-word;
            hyphens: auto;
        }

        .conversation-page-message-meta {
            font-size: 0.65rem;
            gap: 0.25rem;
        }

        .conversation-page-message-input {
            font-size: 1rem;
        }

        .conversation-page-message-input::placeholder {
            font-size: 0.9rem;
        }

        /* S'assurer que l'input wrapper est bien visible */
        .conversation-page-input-wrapper {
            background: var(--bg);
            border-radius: var(--r-pill);
            padding: 0.3rem 0.45rem;
            border: 1px solid var(--border);
        }

        /* Réduire le padding des inputs sur mobile */
        .conversation-page-blocked-input,
        .conversation-page-waiting-input {
            padding: 0.6rem;
        }

        /* Réduire la marge entre les messages sur mobile */
        .conversation-page-message {
            margin-bottom: 0.3rem;
        }
    }

    /* Desktop navigation adjustment */
    @media (min-width: 769px) {
        .conversation-page-container {
            position: relative;
            transform: none;
            left: auto;
            margin-top: 0; /* app-nav est sticky (dans le flux) : pas de marge */
        }

        .conversation-page {
            overflow: auto;
            position: static;
        }
    }

    /* Bandeau consignes conversation vide */
    .conversation-page-safety-banner {
        max-width: min(100%, 560px);
        margin: 20px auto 28px;
        background: linear-gradient(180deg, #fff 0%, #fff7f9 100%);
        border: 1px solid #fecdd3;
        border-radius: 14px;
        box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
        overflow: hidden;
    }

    .conversation-page-safety-banner-header {
        display: flex;
        align-items: flex-start;
        gap: 14px;
        padding: 18px 18px 14px;
        border-bottom: 1px solid #fce7f3;
        background: #fff1f2;
    }

    .conversation-page-safety-banner-icon {
        width: 44px;
        height: 44px;
        border-radius: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #fff;
        color: #ff385c;
        font-size: 1.15rem;
        box-shadow: 0 4px 14px rgba(255, 56, 92, 0.15);
        flex-shrink: 0;
    }

    .conversation-page-safety-banner-headline h3 {
        margin: 0 0 4px;
        font-size: 1.02rem;
        font-weight: 800;
        color: #111827;
    }

    .conversation-page-safety-banner-headline p {
        margin: 0;
        font-size: 0.86rem;
        line-height: 1.45;
        color: #64748b;
    }

    .conversation-page-safety-rules {
        list-style: none;
        margin: 0;
        padding: 12px 14px 6px;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .conversation-page-safety-rule {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        padding: 10px 12px;
        border-radius: 10px;
        background: #fff;
        border: 1px solid #e5e7eb;
        font-size: 0.84rem;
        line-height: 1.45;
        color: #475569;
    }

    .conversation-page-safety-rule-icon {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: #ffe4e6;
        color: #e11d48;
        font-size: 0.72rem;
        flex-shrink: 0;
        margin-top: 1px;
    }

    .conversation-page-safety-footer {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        margin: 8px 14px 14px;
        padding: 10px 12px;
        border-radius: 10px;
        background: #fffbeb;
        border: 1px solid #fde68a;
        font-size: 0.8rem;
        line-height: 1.45;
        color: #92400e;
    }

    .conversation-page-safety-footer i {
        color: #d97706;
        margin-top: 2px;
        flex-shrink: 0;
    }

    /* Message d'avertissement quand pas de messages (legacy) */
    .conversation-page-no-messages-warning {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 200px;
        padding: 2rem;
    }

    .conversation-page-warning-content {
        display: none;
    }

    .conversation-page-warning-note {
        display: none;
    }

    /* Notification styles améliorés */
    .conversation-page-notification {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: white;
        border-radius: 12px;
        padding: 1.5rem 2rem;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
        z-index: 10002;
        max-width: 300px;
        text-align: center;
        border: 1px solid #e5e7eb;
        animation: notificationSlideIn 0.3s ease-out;
    }

    .conversation-page-notification.success {
        border-left: 4px solid #10b981;
    }

    .conversation-page-notification.error {
        border-left: 4px solid #ef4444;
    }

    .conversation-page-notification.info {
        border-left: 4px solid #3b82f6;
    }

    .conversation-page-notification-icon {
        font-size: 2rem;
        margin-bottom: 0.75rem;
    }

    .conversation-page-notification.success .conversation-page-notification-icon {
        color: #10b981;
    }

    .conversation-page-notification.error .conversation-page-notification-icon {
        color: #ef4444;
    }

    .conversation-page-notification.info .conversation-page-notification-icon {
        color: #3b82f6;
    }

    .conversation-page-notification-message {
        font-size: 0.95rem;
        color: #374151;
        font-weight: 500;
        line-height: 1.4;
    }

    @keyframes notificationSlideIn {
        from {
            opacity: 0;
            transform: translate(-50%, -50%) scale(0.9);
        }
        to {
            opacity: 1;
            transform: translate(-50%, -50%) scale(1);
        }
    }

    /* Styles pour les modals de conversation */
    .conversation-modal {
        display: none;
        position: fixed;
        z-index: 10003;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(4px);
        animation: modalFadeIn 0.3s ease-out;
    }

    .conversation-modal.active {
        display: block;
    }

    .conversation-modal-content {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: white;
        border-radius: 16px;
        padding: 2rem;
        max-width: 400px;
        width: 90%;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
        border: 1px solid #e5e7eb;
        animation: modalSlideIn 0.3s ease-out;
    }

    .conversation-modal-close {
        position: absolute;
        top: 1rem;
        right: 1rem;
        background: none;
        border: none;
        font-size: 1.2rem;
        color: #6b7280;
        cursor: pointer;
        padding: 0.5rem;
        border-radius: 50%;
        transition: all 0.2s ease;
    }

    .conversation-modal-close:hover {
        background: #f3f4f6;
        color: #374151;
    }

    .conversation-modal-icon {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 1.5rem;
        font-size: 1.5rem;
        color: white;
    }

    .conversation-modal-icon.delete {
        background: linear-gradient(135deg, #ef4444, #dc2626);
    }

    .conversation-modal-icon.block {
        background: linear-gradient(135deg, #f59e0b, #d97706);
    }

    .conversation-modal-icon.unblock {
        background: linear-gradient(135deg, #10b981, #059669);
    }

    .conversation-modal-icon.report {
        background: linear-gradient(135deg, #ff385c, #e31c5f);
    }

    .conversation-modal-title {
        text-align: center;
        color: #111827;
        font-size: 1.25rem;
        font-weight: 600;
        margin: 0 0 1rem 0;
    }

    .conversation-modal-description {
        text-align: center;
        color: #6b7280;
        font-size: 0.95rem;
        line-height: 1.5;
        margin: 0 0 1.5rem 0;
    }

    .conversation-modal-form {
        margin-bottom: 1.5rem;
    }

    .conversation-modal-select {
        width: 100%;
        padding: 0.75rem;
        border: 1px solid #d1d5db;
        border-radius: 8px;
        font-size: 0.9rem;
        background: white;
        margin-bottom: 1rem;
        transition: border-color 0.2s ease;
    }

    .conversation-modal-select:focus {
        outline: none;
        border-color: #ff385c;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    }

    .conversation-modal-textarea {
        width: 100%;
        padding: 0.75rem;
        border: 1px solid #d1d5db;
        border-radius: 8px;
        font-size: 0.9rem;
        background: white;
        resize: vertical;
        min-height: 80px;
        font-family: inherit;
        transition: border-color 0.2s ease;
    }

    .conversation-modal-textarea:focus {
        outline: none;
        border-color: #ff385c;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    }

    .conversation-modal-actions {
        display: flex;
        gap: 0.75rem;
        justify-content: center;
    }

    .conversation-modal-btn {
        padding: 0.75rem 1.5rem;
        border: none;
        border-radius: 8px;
        font-size: 0.9rem;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s ease;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        min-width: 100px;
        justify-content: center;
    }

    .conversation-modal-btn.secondary {
        background: #f3f4f6;
        color: #374151;
    }

    .conversation-modal-btn.secondary:hover {
        background: #e5e7eb;
    }

    .conversation-modal-btn.danger {
        background: linear-gradient(135deg, #ef4444, #dc2626);
        color: white;
    }

    .conversation-modal-btn.danger:hover {
        background: linear-gradient(135deg, #dc2626, #b91c1c);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
    }

    .conversation-modal-btn.success {
        background: linear-gradient(135deg, #10b981, #059669);
        color: white;
    }

    .conversation-modal-btn.success:hover {
        background: linear-gradient(135deg, #059669, #047857);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
    }

    .conversation-modal-btn.warning {
        background: linear-gradient(135deg, #f59e0b, #d97706);
        color: white;
    }

    .conversation-modal-btn.warning:hover {
        background: linear-gradient(135deg, #d97706, #b45309);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
    }

    @keyframes modalFadeIn {
        from {
            opacity: 0;
        }
        to {
            opacity: 1;
        }
    }

    @keyframes modalSlideIn {
        from {
            opacity: 0;
            transform: translate(-50%, -50%) scale(0.9);
        }
        to {
            opacity: 1;
            transform: translate(-50%, -50%) scale(1);
        }
    }

    /* Responsive pour les modals */
    @media (max-width: 480px) {
        .conversation-modal-content {
            padding: 1.5rem;
            margin: 1rem;
        }

        .conversation-modal-actions {
            flex-direction: column;
        }

        .conversation-modal-btn {
            width: 100%;
        }
    }

    /* Styles pour l'indicateur de chargement des messages plus anciens */
    .conversation-page-loading-older {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 1rem;
        background: #f9fafb;
        border-radius: 8px;
        margin-bottom: 1rem;
        border: 1px solid #e5e7eb;
    }

    .conversation-page-loading-older-content {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        color: #6b7280;
        font-size: 0.9rem;
    }

    .conversation-page-loading-older-content i {
        color: #ff385c;
        font-size: 1rem;
    }

    /* Styles pour le modal d'autorisation des photos privées */
    .photo-permission-modal {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 10004;
        background: rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(4px);
    }

    .photo-permission-modal.active {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .photo-permission-backdrop {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        cursor: pointer;
    }

    .photo-permission-content {
        background: white;
        border-radius: 16px;
        max-width: 500px;
        width: 90%;
        max-height: 90vh;
        overflow-y: auto;
        position: relative;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
        border: 1px solid #e5e7eb;
        animation: modalSlideIn 0.3s ease-out;
    }

    .photo-permission-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1.5rem 1.5rem 0 1.5rem;
        border-bottom: 1px solid #e5e7eb;
    }

    .photo-permission-header h3 {
        margin: 0;
        color: #111827;
        font-size: 1.25rem;
        font-weight: 600;
    }

    .photo-permission-close {
        background: none;
        border: none;
        font-size: 1.2rem;
        color: #6b7280;
        cursor: pointer;
        padding: 0.5rem;
        border-radius: 50%;
        transition: all 0.2s ease;
    }

    .photo-permission-close:hover {
        background: #f3f4f6;
        color: #374151;
    }

    .photo-permission-body {
        padding: 1.5rem;
    }

    .photo-permission-body p {
        color: #6b7280;
        margin: 0 0 1rem 0;
        line-height: 1.5;
    }

    .photo-access-info {
        background: #f0f9ff;
        border: 1px solid #0ea5e9;
        border-radius: 8px;
        padding: 1rem;
        margin-bottom: 1rem;
    }

    .access-status {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        color: #0c4a6e;
        font-weight: 500;
        min-width: 0;
    }

    .access-status span {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 0;
    }

    .access-status i {
        color: #0ea5e9;
    }

    .duration-selector h4 {
        color: #374151;
        margin: 0 0 1rem 0;
        font-size: 1rem;
        font-weight: 600;
    }

    .duration-options {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        gap: 0.75rem;
        margin-bottom: 1rem;
    }

    .duration-option {
        background: #f9fafb;
        border: 2px solid #e5e7eb;
        border-radius: 8px;
        padding: 0.75rem;
        cursor: pointer;
        transition: all 0.2s ease;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
        text-align: center;
    }

    .duration-option:hover {
        border-color: #ff385c;
        background: #eff6ff;
    }

    .duration-option.selected {
        border-color: #ff385c;
        background: #dbeafe;
        color: #be123c;
    }

    .duration-option i {
        font-size: 1.2rem;
        color: #6b7280;
    }

    .duration-option.selected i {
        color: #ff385c;
    }

    .duration-option span {
        font-size: 0.85rem;
        font-weight: 500;
    }

    .custom-duration {
        margin-top: 1rem;
    }

    .custom-duration label {
        display: block;
        color: #374151;
        font-weight: 500;
        margin-bottom: 0.5rem;
        font-size: 0.9rem;
    }

    .photo-permission-input {
        width: 100%;
        padding: 0.75rem;
        border: 1px solid #d1d5db;
        border-radius: 8px;
        font-size: 0.9rem;
        background: white;
        transition: border-color 0.2s ease;
    }

    .photo-permission-input:focus {
        outline: none;
        border-color: #ff385c;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    }

    .photo-permission-actions {
        display: flex;
        gap: 0.75rem;
        padding: 1.5rem;
        border-top: 1px solid #e5e7eb;
        flex-wrap: wrap;
    }

    .photo-permission-btn {
        padding: 0.75rem 1.5rem;
        border: none;
        border-radius: 8px;
        font-size: 0.9rem;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s ease;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        min-width: 120px;
        justify-content: center;
        flex: 1;
    }

    .photo-permission-btn.primary {
        background: linear-gradient(135deg, #ff385c, #e31c5f);
        color: white;
    }

    .photo-permission-btn.primary:hover {
        background: linear-gradient(135deg, #e31c5f, #be123c);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
    }

    .photo-permission-btn.secondary {
        background: #f3f4f6;
        color: #374151;
    }

    .photo-permission-btn.secondary:hover {
        background: #e5e7eb;
        transform: translateY(-1px);
    }

    /* Responsive pour le modal des photos privées */
    @media (max-width: 480px) {
        .photo-permission-content {
            margin: 1rem;
            width: calc(100% - 2rem);
        }

        .photo-permission-actions {
            flex-direction: column;
        }

        .photo-permission-btn {
            width: 100%;
        }

        .duration-options {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    /* Messages système / modération → conversation.css */

    /* Placeholder avatar (initiales) */
    .no-photo-placeholder {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background: linear-gradient(135deg, #ff385c, #ff385c) !important;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        color: #ffffff;
        font-weight: 800;
        font-size: 14px;
        line-height: 1;
        letter-spacing: 0.2px;
        border: 1px solid rgba(99, 102, 241, 0.22);
        box-shadow: 0 2px 6px rgba(99, 102, 241, 0.12);
    }
    .no-photo-placeholder span {
        display: block;
        width: 100%;
        text-align: center;
        line-height: 1;
    }
    .no-photo-placeholder--mini {
        width: 32px;
        height: 32px;
        font-size: 12px;
    }
    .no-photo-placeholder--header {
        width: 42px;
        height: 42px;
        font-size: 13px;
    }

    /* Vocal */
    .conversation-page-message-voice audio {
        width: 260px;
        max-width: 100%;
        height: 34px;
        display: block;
    }

    /* Vocal style WhatsApp */
    .conversation-page-voice-bubble {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.24rem 0.4rem 0.24rem 0.28rem;
        border-radius: 14px;
        background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
        border: 1px solid #dbe4ef;
        width: min(390px, 100%);
        min-height: 38px;
        box-sizing: border-box;
        box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05);
    }
    .conversation-page-message-mine .conversation-page-voice-bubble {
        background: linear-gradient(180deg, rgba(59, 130, 246, 0.12) 0%, rgba(59, 130, 246, 0.08) 100%);
        border-color: rgba(59, 130, 246, 0.26);
    }
    .conversation-page-voice-bubble .voice-audio {
        display: none;
    }
    .voice-play-btn {
        width: 26px;
        height: 26px;
        border-radius: 50%;
        border: none;
        background: #111827;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        flex: 0 0 26px;
        font-size: 0.7rem;
        box-shadow: 0 1px 3px rgba(0,0,0,0.24);
    }
    .conversation-page-message-mine .voice-play-btn {
        background: #e31c5f;
    }
    .voice-wave {
        position: relative;
        height: 18px;
        flex: 1 1 auto;
        min-width: 170px;
        cursor: pointer;
        display: flex;
        align-items: flex-end;
        overflow: hidden;
        border-radius: 7px;
        background: rgba(148, 163, 184, 0.1);
    }
    .voice-wave-base,
    .voice-wave-fill {
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        display: grid;
        grid-template-columns: repeat(64, 1fr);
        gap: 1px;
        align-items: end;
        width: 100%;
        padding: 2px 1px;
        box-sizing: border-box;
    }
    .voice-wave-base .bar {
        background: rgba(17, 24, 39, 0.38);
        border-radius: 2px;
        width: 100%;
        align-self: end;
        transform-origin: center bottom;
    }
    .conversation-page-message-mine .voice-wave-base .bar {
        background: rgba(37, 99, 235, 0.25);
    }
    .voice-wave-fill {
        overflow: hidden;
        width: 0%;
    }
    .voice-wave-fill .bar {
        background: rgba(17, 24, 39, 0.98);
        border-radius: 2px;
        width: 100%;
        align-self: end;
        transform-origin: center bottom;
    }
    .conversation-page-message-mine .voice-wave-fill .bar {
        background: rgba(37, 99, 235, 0.9);
    }

    .conversation-page-message:not(.conversation-page-message-mine) .conversation-page-voice-bubble.playing .voice-wave-base .bar,
    .conversation-page-message:not(.conversation-page-message-mine) .conversation-page-voice-bubble.playing .voice-wave-fill .bar {
        animation: voiceListenWave var(--wave-duration, 1.2s) ease-in-out infinite;
        animation-delay: var(--wave-delay, 0s);
    }

    .conversation-page-message:not(.conversation-page-message-mine) .conversation-page-voice-bubble.wave-flash .voice-wave-base .bar,
    .conversation-page-message:not(.conversation-page-message-mine) .conversation-page-voice-bubble.wave-flash .voice-wave-fill .bar {
        animation: voiceListenWave var(--wave-duration, 1.2s) ease-in-out 2;
        animation-delay: var(--wave-delay, 0s);
    }

    @keyframes voiceListenWave {
        0%, 100% {
            transform: scaleY(0.35);
        }
        50% {
            transform: scaleY(1.2);
        }
    }

    .voice-time {
        font-size: 0.63rem;
        font-weight: 800;
        color: #374151;
        font-variant-numeric: tabular-nums;
        min-width: 52px;
        text-align: right;
        white-space: nowrap;
        opacity: 0.92;
    }

    .conversation-page-voice-preview {
        display: none;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        background: #fff;
        border: 1px solid #e5e7eb;
        border-radius: 0.5rem;
        padding: 0.6rem 0.75rem;
        margin-bottom: 0.75rem;
    }
    .conversation-page-voice-preview-content {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        color: #374151;
        font-size: 0.9rem;
        min-width: 0;
    }
    .conversation-page-voice-preview-content span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .conversation-page-voice-preview-remove {
        border: none;
        background: #f3f4f6;
        color: #374151;
        width: 28px;
        height: 28px;
        border-radius: 50%;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .conversation-page-voice-preview-remove:hover {
        background: #e5e7eb;
    }

    /* Modal enregistrement vocal */
    .conversation-page-voice-modal {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.55);
        z-index: 10005;
        align-items: center;
        justify-content: center;
        padding: 1rem;
        box-sizing: border-box;
    }
    .conversation-page-voice-modal.active {
        display: flex;
    }
    .conversation-page-voice-modal-content {
        background: #fff;
        width: min(520px, 100%);
        border-radius: 16px;
        overflow: hidden;
        border: 1px solid #e5e7eb;
        box-shadow: 0 20px 60px rgba(0,0,0,0.25);
    }
    .conversation-page-voice-modal-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.9rem 1rem;
        border-bottom: 1px solid #e5e7eb;
        background: #f9fafb;
    }
    .conversation-page-voice-modal-header h3 {
        margin: 0;
        font-size: 1rem;
        color: #111827;
        font-weight: 700;
    }
    .conversation-page-voice-modal-close {
        border: none;
        background: #fff;
        width: 34px;
        height: 34px;
        border-radius: 10px;
        cursor: pointer;
        color: #374151;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #e5e7eb;
    }
    .conversation-page-voice-modal-close:hover {
        background: #f3f4f6;
    }
    .conversation-page-voice-modal-body {
        padding: 1rem;
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        align-items: center;
    }
    .conversation-page-voice-status {
        color: #6b7280;
        font-size: 0.9rem;
        text-align: center;
    }
    .conversation-page-voice-timer {
        font-variant-numeric: tabular-nums;
        font-size: 1.25rem;
        font-weight: 800;
        color: #111827;
    }
    .conversation-page-voice-record-btn {
        width: 100%;
        border: none;
        cursor: pointer;
        border-radius: 14px;
        padding: 1rem;
        background: linear-gradient(135deg, #ef4444, #dc2626);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.65rem;
        font-weight: 800;
        font-size: 1rem;
        user-select: none;
        touch-action: none;
    }
    .conversation-page-voice-record-btn.recording {
        background: linear-gradient(135deg, #10b981, #059669);
    }
    .conversation-page-voice-preview-player {
        width: 100%;
        border: 1px solid #e5e7eb;
        border-radius: 12px;
        padding: 0.75rem;
        background: #fff;
    }
    .conversation-page-voice-preview-player audio {
        width: 100%;
    }
    .conversation-page-voice-modal-actions {
        display: flex;
        gap: 0.75rem;
        padding: 1rem;
        border-top: 1px solid #e5e7eb;
        background: #fff;
    }
    .conversation-page-voice-action {
        flex: 1;
        border: none;
        border-radius: 12px;
        padding: 0.85rem 1rem;
        font-weight: 800;
        cursor: pointer;
        font-size: 0.95rem;
    }
    .conversation-page-voice-action.secondary {
        background: #f3f4f6;
        color: #111827;
    }
    .conversation-page-voice-action.secondary:hover {
        background: #e5e7eb;
    }
    .conversation-page-voice-action.primary {
        background: #ff385c;
        color: #fff;
    }
    .conversation-page-voice-action.primary:hover {
        background: #e31c5f;
    }
    .conversation-page-voice-action.primary:disabled {
        opacity: 0.6;
        cursor: not-allowed;
    }

/* ---- Conversation : mode desktop (ex conversation-inline-1.css, scoped .desktop-mode) ---- */
body.desktop-mode { margin: 0; padding: 0; overflow: hidden; width: 100vw; max-width: none; }
body.desktop-mode .main { margin: 0 !important; padding: 0 !important; max-width: none !important; width: 100% !important; }
body.desktop-mode .conversation-page { height: 100vh; margin: 0; padding: 0; display: flex; flex-direction: column; width: 100vw; max-width: none; }
body.desktop-mode .conversation-page-container { height: 100vh; max-width: none; margin: 0; padding: 0; position: relative; transform: none; left: 0; right: 0; width: 100vw; display: flex; flex-direction: column; }
body.desktop-mode .conversation-page-header { border-radius: 0; flex-shrink: 0; position: sticky; top: 0; z-index: 10; width: 100%; max-width: none; }
body.desktop-mode .conversation-ad-banner { flex-shrink: 0; width: 100%; max-width: none; }
body.desktop-mode .conversation-page-blocked-banner { flex-shrink: 0; width: 100%; max-width: none; }
body.desktop-mode .conversation-page-messages-area { flex: 1; overflow-y: auto; overflow-x: hidden; width: 100%; max-width: none; }
body.desktop-mode .conversation-page-input-area { flex-shrink: 0; position: sticky; bottom: 0; z-index: 10; width: 100%; max-width: none; }
body.desktop-mode .conversation-page-message { max-width: 95% !important; width: fit-content !important; }
body.desktop-mode .conversation-page-message-mine { max-width: 95% !important; width: fit-content !important; }
body.desktop-mode .conversation-page-message:not(.conversation-page-message-mine) { max-width: 95% !important; width: fit-content !important; }
body.desktop-mode .conversation-page-message-bubble { max-width: none !important; width: 100% !important; }
body.desktop-mode .conversation-page-message-image { max-width: 380px !important; }
body.desktop-mode .conversation-page-message-video { max-width: 380px !important; }
body.desktop-mode .mobile-only { display: none !important; }

/* ---- Conversation : surcouche moderne (style index / rose) ---- */
body.page-conversation .main.conversation-page {
    padding: 0;
    background: var(--bg);
}
@media (max-width: 768px) {
    body.page-conversation .main.conversation-page,
    body.page-conversation .messages-two-pane {
        min-height: 100dvh;
    }
}
@media (min-width: 769px) {
    body.page-conversation .main.conversation-page,
    body.page-conversation .messages-two-pane {
        min-height: calc(100dvh - var(--nav-h, 68px));
    }
}
body.page-conversation .conversation-page-container {
    max-width: none;
    margin: 0;
    background: var(--surface);
    box-shadow: none;
}
.conversation-page-header {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--border);
}
.conversation-page-avatar { box-shadow: var(--shadow-sm); border-radius: 50%; }
.conversation-page-messages-area { background: var(--bg); }
/* Bulles conversation → conversation.css (body.page-conversation) */
.conversation-page-input-area {
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-top: 1px solid var(--border);
}
.conversation-page-input-wrapper {
    background: #f6f6f8;
    border: 1px solid #ececf0;
    border-radius: 26px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.conversation-page-input-wrapper:focus-within {
    border-color: #ff385c;
    box-shadow: 0 0 0 3px rgba(255, 56, 92, 0.12);
    background: #fff;
}
.conversation-page-send-btn {
    background: linear-gradient(135deg, #ff5a78, #e11d48);
    box-shadow: 0 4px 12px rgba(225, 29, 72, 0.3);
}
.conversation-page-send-btn:hover { transform: scale(1.06); box-shadow: 0 6px 18px rgba(225, 29, 72, 0.4); }

/* ============================================================
   Pages compte SPIITZ — layout partagé pa-*
   (photos-privees, modifier-compte, mes-visiteurs)
   ============================================================ */
.page-photos-privees,
.page-modifier-compte,
.page-mes-visiteurs,
.page-mon-lieu {
    overflow-x: hidden;
}

.pa-page {
    background: var(--bg);
    min-height: calc(100dvh - var(--nav-h));
}

.pa-wrap {
    width: 100%;
    max-width: 920px;
    margin: 0 auto;
    padding: 20px 20px calc(96px + env(safe-area-inset-bottom, 0px));
    overflow-x: hidden;
}

.pa-hero {
    text-align: center;
    padding: 28px 22px;
    margin-bottom: 18px;
    background: linear-gradient(145deg, var(--brand-soft) 0%, var(--surface) 58%);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
}

.pa-hero-icon {
    width: 54px;
    height: 54px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    box-shadow: 0 8px 20px rgba(255, 56, 92, 0.28);
}

.pa-hero h1 {
    margin: 0 0 8px;
    font-size: clamp(1.35rem, 2.8vw, 1.85rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--text);
}

.pa-hero p {
    margin: 0 auto;
    max-width: 560px;
    color: var(--text-soft);
    font-size: 0.94rem;
    line-height: 1.55;
}

.pa-hero-tags {
    list-style: none;
    margin: 16px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.pa-hero-tags li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: var(--r-pill);
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text-soft);
    font-size: 0.78rem;
    font-weight: 600;
}

.pa-hero-tags i {
    color: var(--brand);
    font-size: 0.72rem;
}

.pa-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    padding: 18px;
    margin-bottom: 16px;
}

.pa-panel-head {
    margin-bottom: 14px;
}

.pa-panel-head h2 {
    margin: 0 0 4px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--text);
}

.pa-panel-head h2 i {
    color: var(--brand);
}

.pa-panel-head p {
    margin: 0;
    color: var(--text-soft);
    font-size: 0.86rem;
    line-height: 1.45;
}

/* Page Aide & contact */
.page-contact .pa-contact-faq-list {
    display: grid;
    gap: 0;
}

.page-contact .pa-contact-faq {
    border-bottom: 1px solid var(--border);
    padding: 14px 0;
}

.page-contact .pa-contact-faq:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.page-contact .pa-contact-faq:first-child {
    padding-top: 0;
}

.page-contact .pa-contact-faq summary {
    cursor: pointer;
    font-weight: 700;
    font-size: 0.9375rem;
    color: var(--text);
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.page-contact .pa-contact-faq summary::-webkit-details-marker {
    display: none;
}

.page-contact .pa-contact-faq summary::after {
    content: '+';
    color: var(--brand);
    font-size: 1.1rem;
    font-weight: 700;
    flex-shrink: 0;
}

.page-contact .pa-contact-faq[open] summary::after {
    content: '−';
}

.page-contact .pa-contact-faq p {
    margin: 10px 0 0;
    font-size: 0.875rem;
    color: var(--text-soft);
    line-height: 1.55;
}

.page-contact .pa-contact-email {
    background: linear-gradient(135deg, var(--brand-soft) 0%, var(--surface) 55%);
    border-color: rgba(255, 56, 92, 0.15);
}

.page-contact .pa-contact-email-inner {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.page-contact .pa-contact-email-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    box-shadow: 0 6px 16px rgba(255, 56, 92, 0.25);
}

.page-contact .pa-contact-email-body h2 {
    margin: 0 0 8px;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--text);
}

.page-contact .pa-contact-email-body p {
    margin: 0 0 14px;
    font-size: 0.875rem;
    color: var(--text-soft);
    line-height: 1.5;
}

.page-contact .pa-contact-email-btn {
    width: auto;
    min-height: 42px;
    padding: 10px 18px;
    font-size: 0.875rem;
    text-decoration: none;
}

.page-contact .pa-contact-chips {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.page-contact .pa-contact-chips a {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    border-radius: var(--r-pill);
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text-soft);
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
    transition: var(--transition);
}

.page-contact .pa-contact-chips a:hover {
    border-color: var(--brand);
    color: var(--brand);
    background: var(--brand-soft);
}

.page-contact .pa-contact-back {
    text-align: center;
    margin: 8px 0 0;
}

.page-contact .pa-contact-back a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text-soft);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition: var(--transition);
}

.page-contact .pa-contact-back a:hover {
    color: var(--brand);
}

@media (max-width: 480px) {
    .page-contact .pa-contact-email-inner {
        flex-direction: column;
        align-items: stretch;
    }

    .page-contact .pa-contact-email-icon {
        margin: 0 auto;
    }

    .page-contact .pa-contact-email-body {
        text-align: center;
    }

    .page-contact .pa-contact-email-btn {
        width: 100%;
        justify-content: center;
    }
}

.pa-albums-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}

.pa-album-card {
    min-width: 0;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--bg);
}

.pa-album-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
    min-width: 0;
}

.pa-album-badge {
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    border-radius: var(--r-pill);
    background: var(--brand-soft);
    color: var(--brand-dark);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.pa-album-count {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-soft);
    white-space: nowrap;
}

.pa-album-count--muted {
    color: var(--text-muted);
    font-weight: 600;
}

.pa-album-form {
    display: grid;
    gap: 8px;
    margin-bottom: 12px;
    min-width: 0;
}

.pa-field-label {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-soft);
}

.pa-input {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: 16px;
}

.pa-input:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(255, 56, 92, 0.12);
}

.pa-save-btn {
    width: 100%;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.pa-album-photos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    min-width: 0;
}

.pa-photo-item {
    position: relative;
    aspect-ratio: 1;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--surface);
}

.pa-photo-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pa-photo-delete {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 50%;
    background: rgba(17, 24, 39, 0.72);
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.pa-photo-add {
    aspect-ratio: 1;
    border: 1px dashed var(--border);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: var(--text-soft);
    background: var(--surface);
    cursor: pointer;
    font-size: 0.78rem;
    font-weight: 600;
    transition: border-color var(--transition), color var(--transition), background var(--transition);
}

.pa-photo-add:hover {
    border-color: var(--brand);
    color: var(--brand);
    background: var(--brand-soft);
}

.pa-photo-add.is-disabled {
    opacity: 0.45;
    pointer-events: none;
}

.pa-photo-add input {
    display: none;
}

.pa-album-hint {
    margin: 10px 0 0;
    font-size: 0.82rem;
    color: var(--text-soft);
    line-height: 1.45;
}

.pa-album-limit-hint a {
    color: #b45309;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.pa-grants-list {
    display: grid;
    gap: 10px;
}

.pa-grant-card {
    min-width: 0;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--bg);
}

.pa-grant-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
    min-width: 0;
}

.pa-grant-user {
    font-size: 0.92rem;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pa-grant-status {
    flex-shrink: 0;
    padding: 4px 10px;
    border-radius: var(--r-pill);
    font-size: 0.72rem;
    font-weight: 800;
}

.pa-grant-status--pending {
    background: #eff6ff;
    color: #2563eb;
}

.pa-grant-status--done {
    background: #ecfdf5;
    color: #059669;
}

.pa-grant-status--revoked {
    background: #fef2f2;
    color: #dc2626;
}

.pa-grant-meta {
    display: grid;
    gap: 4px;
    font-size: 0.8rem;
    color: var(--text-soft);
    min-width: 0;
}

.pa-grant-meta span {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    overflow-wrap: anywhere;
}

.pa-grant-meta i {
    color: var(--brand);
    margin-top: 2px;
    flex-shrink: 0;
}

.pa-empty {
    text-align: center;
    padding: 28px 16px;
    color: var(--text-soft);
}

.pa-empty i {
    font-size: 1.8rem;
    color: var(--text-muted);
    margin-bottom: 10px;
}

.pa-empty h3 {
    margin: 0 0 6px;
    font-size: 1rem;
    color: var(--text);
}

.pa-empty p {
    margin: 0;
    font-size: 0.86rem;
    line-height: 1.45;
}

/* Alertes */
.pa-alert {
    display: flex;
    gap: 12px;
    padding: 14px 16px;
    margin-bottom: 16px;
    border-radius: var(--r-md);
    font-size: 0.9rem;
    line-height: 1.45;
}

.pa-alert i {
    margin-top: 2px;
    flex-shrink: 0;
}

.pa-alert ul {
    margin: 4px 0 0;
    padding-left: 18px;
}

.pa-alert--error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #dc2626;
}

.pa-alert--success {
    background: #ecfdf5;
    border: 1px solid #bbf7d0;
    color: #059669;
}

/* Onglets */
.pa-tabs {
    display: flex;
    flex-direction: row;
    gap: 6px;
    padding: 5px;
    margin-bottom: 16px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
}

.pa-tab-btn {
    flex: 1;
    border: none;
    background: transparent;
    color: var(--text-soft);
    border-radius: 10px;
    padding: 12px 8px;
    font: inherit;
    font-weight: 700;
    font-size: 0.82rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: background var(--transition), color var(--transition), box-shadow var(--transition);
    white-space: nowrap;
    min-width: 0;
}

.pa-tab-btn:hover {
    background: var(--brand-soft);
    color: var(--text);
}

.pa-tab-btn.active {
    background: var(--brand);
    color: #fff;
    box-shadow: 0 6px 16px rgba(255, 56, 92, 0.25);
}

.pa-tab-pane {
    display: none;
}

.pa-tab-pane.active {
    display: block;
}

.pa-tabs--wrap {
    flex-wrap: wrap;
}

@media (max-width: 767px) {
    .pa-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
    }

    .pa-tabs::-webkit-scrollbar {
        display: none;
    }

    .pa-tab-btn {
        flex: 0 0 auto;
        min-width: max-content;
    }
}

.pa-setting-list {
    display: grid;
    gap: 0;
    max-width: 640px;
}

.pa-setting-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid var(--border);
}

.pa-setting-row:last-child {
    border-bottom: none;
}

.pa-setting-label {
    flex: 1;
    min-width: 0;
}

.pa-setting-label strong {
    display: block;
    font-size: 0.9375rem;
    color: var(--text);
}

.pa-setting-label small {
    display: block;
    margin-top: 4px;
    font-size: 0.8125rem;
    color: var(--text-muted);
    line-height: 1.4;
}

.pa-check-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    cursor: pointer;
}

.pa-check-row input {
    margin-top: 3px;
    accent-color: var(--brand);
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.pa-check-row span {
    font-size: 0.9375rem;
    line-height: 1.45;
    color: var(--text);
}

.pa-check-row--stack span {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pa-check-hint {
    display: block;
    font-size: 0.8125rem;
    line-height: 1.4;
    font-weight: 400;
    color: var(--text-soft);
}

.pa-form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
}

.pa-panel-head--spaced {
    margin-top: 28px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
}

.pa-blocked-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.pa-blocked-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid var(--border);
}

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

.pa-blocked-info strong {
    display: block;
    font-size: 0.9375rem;
}

.pa-blocked-meta {
    display: block;
    font-size: 0.8125rem;
    color: var(--text-muted);
    margin-top: 2px;
}

.pa-panel .account-hub-template-row,
.pa-panel .account-hub-form-row {
    margin-bottom: 12px;
}

.pa-panel .account-hub-form-row label {
    display: block;
    margin-bottom: 6px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-soft);
}

.pa-panel .account-hub-form-row input,
.pa-panel .account-hub-form-row textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--bg);
    color: var(--text);
    font: inherit;
}

/* Formulaires compte */
.pa-form {
    display: grid;
    gap: 12px;
    max-width: 560px;
}

.pa-form-group {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.pa-form-group--icon .pa-input {
    padding-right: 42px;
}

.pa-form-group--icon .pa-input + .pa-input-icon {
    position: absolute;
    right: 12px;
    top: calc(1.35em + 6px + 22px);
    transform: translateY(-50%);
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.95rem;
}

.pa-form-group--icon {
    position: relative;
}

.pa-form-hint {
    font-size: 0.78rem;
    color: var(--text-muted);
}

.pa-input[readonly] {
    background: var(--bg);
    color: var(--text-soft);
}

.pa-btn {
    width: 100%;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 18px;
    border: none;
    border-radius: var(--r-pill);
    background: var(--brand);
    color: #fff;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(255, 56, 92, 0.28);
    transition: transform var(--transition), box-shadow var(--transition);
    text-decoration: none;
}

.pa-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(255, 56, 92, 0.36);
}

.pa-btn--sm {
    width: auto;
    min-height: 36px;
    padding: 0 14px;
    font-size: 0.82rem;
    box-shadow: 0 4px 12px rgba(255, 56, 92, 0.22);
}

.pa-btn--danger {
    background: #dc2626;
    box-shadow: 0 8px 20px rgba(220, 38, 38, 0.24);
}

.pa-btn--danger:hover {
    box-shadow: 0 12px 28px rgba(220, 38, 38, 0.32);
}

.pa-btn--ghost {
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    box-shadow: none;
}

.pa-btn--ghost:hover {
    background: var(--bg);
    box-shadow: none;
}

.pa-delete-info {
    margin-bottom: 1.25rem;
    padding: 14px 16px;
    border-radius: var(--r-md);
    border: 1px solid var(--border);
    background: var(--bg);
}

.pa-delete-info h3 {
    margin: 0 0 10px;
    font-size: 0.95rem;
}

.pa-delete-info ul {
    margin: 0 0 10px;
    padding-left: 1.1rem;
    color: var(--text-soft);
    font-size: 0.88rem;
    line-height: 1.5;
}

.pa-delete-info-note {
    margin: 0;
    font-size: 0.82rem;
    color: var(--text-muted);
}

.pa-delete-confirm {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 1rem;
    font-size: 0.88rem;
    line-height: 1.45;
    color: var(--text-soft);
    cursor: pointer;
}

.pa-delete-confirm input {
    margin-top: 3px;
    flex-shrink: 0;
}

.pa-delete-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 1.25rem;
}

.pa-panel--danger-zone {
    margin-top: 1.5rem;
    border-color: rgba(220, 38, 38, 0.2);
}

.pa-panel--danger-zone .pa-panel-head h2 {
    color: #b91c1c;
}

.pa-delete-footer {
    margin-top: 2rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border);
    text-align: center;
}

.pa-delete-trigger {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    font-size: 0.88rem;
    color: #b91c1c;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.pa-delete-trigger:hover {
    color: #dc2626;
}

.pa-delete-modal {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.pa-delete-modal.active {
    display: flex;
}

.pa-delete-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(2px);
}

.pa-delete-modal__panel {
    position: relative;
    width: 100%;
    max-width: 480px;
    max-height: min(90vh, 720px);
    display: flex;
    flex-direction: column;
    background: var(--surface);
    color: var(--text);
    border-radius: var(--r-lg, 16px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
    overflow: hidden;
    animation: paDeleteModalIn 0.2s ease;
}

@keyframes paDeleteModalIn {
    from { transform: translateY(12px) scale(0.98); opacity: 0; }
    to { transform: none; opacity: 1; }
}

.pa-delete-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--border);
}

.pa-delete-modal__header h2 {
    margin: 0;
    font-size: 1.05rem;
    color: #b91c1c;
    display: flex;
    align-items: center;
    gap: 8px;
}

.pa-delete-modal__close {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: var(--bg);
    color: var(--text-soft);
    cursor: pointer;
    flex-shrink: 0;
}

.pa-delete-modal__close:hover {
    color: var(--text);
}

.pa-delete-modal__body {
    padding: 18px 20px 20px;
    overflow-y: auto;
}

.pa-delete-modal__intro {
    margin: 0 0 1rem;
    font-size: 0.9rem;
    color: var(--text-soft);
    line-height: 1.45;
}

.pa-delete-modal__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 0.5rem;
}

.pa-delete-modal .pa-btn--danger {
    width: auto;
}

.pa-password-strength {
    margin-top: 8px;
}

.pa-strength-bar {
    height: 4px;
    background: var(--border);
    border-radius: var(--r-pill);
    overflow: hidden;
    margin-bottom: 6px;
}

.pa-strength-fill {
    height: 100%;
    width: 0;
    border-radius: var(--r-pill);
    transition: width 0.2s ease, background-color 0.2s ease;
}

.pa-strength-text {
    font-size: 0.76rem;
    color: var(--text-soft);
}

.pa-password-requirements {
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--bg);
}

.pa-password-requirements h4 {
    margin: 0 0 8px;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text);
}

.pa-password-requirements ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 6px;
}

.pa-requirement {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    color: var(--text-soft);
}

.pa-requirement i {
    font-size: 0.45rem;
    color: var(--text-muted);
}

.pa-requirement.valid {
    color: #059669;
}

.pa-requirement.valid i {
    color: #059669;
}

/* Stats visiteurs */
.pa-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.pa-stat-card {
    text-align: center;
    padding: 16px 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-sm);
}

.pa-stat-icon {
    font-size: 1.3rem;
    color: var(--brand);
    margin-bottom: 8px;
}

.pa-stat-value {
    font-size: clamp(1.35rem, 3vw, 1.75rem);
    font-weight: 800;
    color: var(--text);
    margin-bottom: 4px;
    letter-spacing: -0.02em;
}

.pa-stat-label {
    font-size: 0.78rem;
    color: var(--text-soft);
    font-weight: 600;
}

/* Liste visiteurs */
.pa-panel--flush {
    padding: 0;
    overflow: hidden;
}

.pa-panel--flush .pa-panel-head {
    padding: 18px 18px 0;
    margin-bottom: 0;
}

.pa-visitor-list {
    max-height: 520px;
    overflow-y: auto;
}

.pa-visitor-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-top: 1px solid var(--border);
    transition: background var(--transition);
}

.pa-visitor-item:hover {
    background: var(--bg);
}

.pa-visitor-photo {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--border);
    flex-shrink: 0;
}

.pa-visitor-no-photo {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--ph-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ph-text);
    font-weight: 700;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.pa-visitor-info {
    flex: 1;
    min-width: 0;
}

.pa-visitor-name {
    font-weight: 700;
    color: var(--text);
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 0.92rem;
}

.pa-visitor-details {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    color: var(--text-soft);
    font-size: 0.8rem;
}

.pa-visitor-detail {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.pa-visitor-detail i {
    color: var(--brand);
    font-size: 0.72rem;
}

.pa-visitor-actions {
    flex-shrink: 0;
}

.pa-visitor-profile-link {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-soft);
    text-decoration: none;
    transition: var(--transition);
}

.pa-visitor-profile-link:hover {
    border-color: var(--brand);
    color: var(--brand);
    background: var(--brand-soft);
}

.pa-visitor-profile-link i {
    font-size: 0.78rem;
}

.pa-loading {
    text-align: center;
    padding: 36px 16px;
    color: var(--text-soft);
}

.pa-loading i {
    font-size: 1.6rem;
    animation: spin 1s linear infinite;
    color: var(--brand);
    margin-bottom: 10px;
}

.pa-loading p {
    margin: 0;
    font-size: 0.86rem;
}

.pa-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border-top: 1px solid var(--border);
    background: var(--bg);
}

.pa-pagination-btn {
    padding: 8px 14px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    border-radius: 10px;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background var(--transition), border-color var(--transition);
}

.pa-pagination-btn:hover:not(:disabled) {
    background: var(--brand-soft);
    border-color: var(--brand);
}

.pa-pagination-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.pa-pagination-info {
    color: var(--text-soft);
    font-size: 0.8rem;
}

/* Toast notification */
.pa-toast {
    position: fixed;
    top: 20px;
    right: 20px;
    background: var(--surface);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border);
    padding: 14px 40px 14px 16px;
    z-index: 1000;
    transform: translateX(calc(100% + 24px));
    transition: transform 0.3s ease;
    max-width: min(400px, calc(100vw - 32px));
}

.pa-toast.show {
    transform: translateX(0);
}

.pa-toast--error {
    border-left: 4px solid #ef4444;
}

.pa-toast-content {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.88rem;
}

.pa-toast-content i {
    color: #ef4444;
}

.pa-toast-close {
    position: absolute;
    top: 8px;
    right: 8px;
    background: none;
    border: none;
    color: var(--text-soft);
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
}

.pa-toast-close:hover {
    background: var(--bg);
}

@media (min-width: 768px) {
    .pa-wrap {
        padding: 28px 24px calc(96px + env(safe-area-inset-bottom, 0px));
    }

    .pa-panel {
        padding: 22px;
    }

    .pa-albums-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }

    .pa-save-btn {
        width: auto;
        justify-self: start;
        padding-inline: 18px;
    }

    .pa-btn {
        width: auto;
    }

    .pa-album-photos {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
    }
}

@media (max-width: 767px) {
    .pa-wrap {
        padding: 14px 14px calc(92px + env(safe-area-inset-bottom, 0px));
    }

    .pa-hero {
        padding: 22px 16px;
        border-radius: var(--r-md);
    }

    .pa-hero-tags li {
        font-size: 0.72rem;
        padding: 6px 10px;
    }

    .pa-panel {
        padding: 14px;
        border-radius: var(--r-md);
    }

    .pa-grant-top {
        flex-wrap: wrap;
    }

    .pa-stats-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }

    .pa-stat-card {
        padding: 12px 6px;
    }

    .pa-stat-icon {
        font-size: 1rem;
        margin-bottom: 6px;
    }

    .pa-stat-value {
        font-size: clamp(1rem, 4.2vw, 1.25rem);
    }

    .pa-stat-label {
        font-size: 0.62rem;
        line-height: 1.25;
    }

    .pa-visitor-item {
        gap: 10px;
        padding: 12px 14px;
    }

    .pa-visitor-profile-link {
        width: 32px;
        height: 32px;
    }

    .pa-visitor-profile-link i {
        font-size: 0.72rem;
    }

    .pa-tab-btn {
        flex: 0 0 auto;
        min-width: max-content;
        padding: 10px 11px;
        font-size: 0.75rem;
        gap: 5px;
    }

    .pa-toast {
        top: auto;
        bottom: calc(80px + env(safe-area-inset-bottom, 0px));
        right: 14px;
        left: 14px;
        max-width: none;
    }
}

/* ============================================================
   Page: annonce-detail.php (migré depuis css/annonce-detail.css)
   Les classes génériques (.tag, .annonce-badge, .desktop-only,
   .lieux-place-btn, .page-boost-badge…) sont scopées sous
   .annonce-detail-main pour éviter toute fuite globale.
   ============================================================ */
body.page-annonce-detail { background: var(--bg); }

.annonce-detail-main {
    padding: 16px 16px calc(88px + env(safe-area-inset-bottom));
    max-width: 1200px;
    margin: 0 auto;
    min-height: 100vh;
    font-family: var(--font);
}

/* Page détail annonce — pleine largeur (pas le cadre modal) */
body.page-annonce-detail .annonce-detail-main--page {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0 0 calc(72px + env(safe-area-inset-bottom));
    min-height: auto;
}
body.page-annonce-detail .annonce-detail-main--page .annonce-detail-container {
    width: 100%;
    max-width: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
    background: transparent;
}
.annonce-detail-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 14px 16px;
    background: linear-gradient(135deg, #fff5f7 0%, #ffe8ee 55%, #fff 100%);
    border-bottom: 1px solid var(--border);
}
.annonce-detail-page-header__brand {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.annonce-detail-page-header__text {
    min-width: 0;
}
body.page-annonce-detail .annonce-detail-main--page .annonce-detail-content--modal {
    width: 100%;
    max-width: none;
    padding: 16px;
}
body.page-annonce-detail .annonce-detail-main--page .annonce-detail-main-content {
    gap: 20px;
}
body.page-annonce-detail .annonce-detail-main--page .annonce-detail-page-photo,
body.page-annonce-detail .annonce-detail-main--page .annonce-detail-photo-item img {
    cursor: zoom-in;
}
/* Lieu : pleine largeur de la colonne principale sur la page */
body.page-annonce-detail .annonce-detail-main--page .annonce-detail-place-wrap.lieux-places-grid {
    max-width: none;
    margin: 0;
    grid-template-columns: 1fr;
}
body.page-annonce-detail .annonce-detail-main--page .annonce-detail-place-wrap .lieux-place-card {
    max-width: none;
    width: 100%;
}
body.page-annonce-detail .annonce-detail-main--page .lieux-place-actions {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}
body.page-annonce-detail .annonce-detail-page__actions {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 120;
    width: 100%;
    max-width: none;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: var(--surface);
    border-top: 1px solid var(--border);
    border-radius: 0;
    box-shadow: 0 -4px 20px rgba(15, 23, 42, 0.08);
}
@media (min-width: 769px) {
    body.page-annonce-detail .annonce-detail-main--page .annonce-detail-content--modal {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 340px;
        gap: 28px;
        padding: 24px 28px 32px;
    }
    body.page-annonce-detail .annonce-detail-main--page .annonce-detail-sidebar {
        order: 0;
        margin-top: 0;
    }
    .annonce-detail-page-header {
        padding: 18px 28px;
    }
    body.page-annonce-detail .annonce-detail-page__actions {
        padding-left: 28px;
        padding-right: 28px;
    }
}

.annonce-detail-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.annonce-detail-topbar-title {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--text);
}
.annonce-detail-topbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}
.annonce-detail-respond-top {
    padding: 10px 18px;
    font-size: 0.88rem;
    font-weight: 700;
    border-radius: var(--r-pill);
    white-space: nowrap;
}
.annonce-detail-topbar-icon {
    width: 42px;
    height: 42px;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--surface);
    color: var(--text-soft);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}
.annonce-detail-topbar-icon:hover {
    border-color: var(--brand);
    color: var(--brand);
}

.annonce-detail-container {
    background: var(--surface);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border);
    overflow: hidden;
}

/* Carte lieu : même grille que lieux.php, une colonne */
.annonce-detail-place-wrap.lieux-places-grid {
    display: grid;
    grid-template-columns: minmax(0, 340px);
    gap: 0;
    margin: 0;
}
.annonce-detail-place-wrap .lieux-place-card {
    width: 100%;
    max-width: 340px;
}
.annonce-detail-place-wrap .lieux-place-card > a {
    display: block;
    text-decoration: none;
    color: inherit;
}
.annonce-detail-place-links {
    margin: 12px 0 0;
    font-size: 0.88rem;
    color: var(--text-soft);
}
.annonce-detail-place-link {
    color: var(--brand);
    font-weight: 600;
    text-decoration: none;
}
.annonce-detail-place-link:hover { color: var(--brand-dark); text-decoration: underline; }

.annonce-detail-content {
    display: grid;
    grid-template-columns: 1fr 350px;
    gap: 30px;
    padding: 30px;
}

.annonce-detail-main-content {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.annonce-detail-header-section {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
}

.annonce-detail-title-section {
    flex: 1;
}

.annonce-detail-title {
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--text, #222);
    margin: 0 0 15px 0;
    line-height: 1.2;
}

.annonce-detail-type-badge {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 8px;
}

.annonce-detail-main .desktop-only { display: block; }
.annonce-detail-main .mobile-only { display: none; }

.annonce-detail-meta {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.annonce-detail-meta span {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #64748b;
    font-size: 14px;
}

.annonce-detail-top-extras {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.annonce-detail-top-extras .annonce-tags {
    flex-basis: 100%;
}

.annonce-detail-main .annonce-tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: flex-start;
}

.annonce-detail-main .tag {
    background: #f1f5f9;
    color: #475569;
    border-radius: 20px;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.annonce-detail-main .tag:hover {
    background: #e2e8f0;
    transform: translateY(-1px);
}

.annonce-detail-main .annonce-badge {
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    color: white !important;
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
    min-width: fit-content;
}

.annonce-detail-main .annonce-badge * {
    display: inline !important;
    visibility: visible !important;
}

.annonce-detail-main .annonce-badge.rencontre {
    background: linear-gradient(135deg, var(--brand), var(--brand-dark));
}

.annonce-detail-main .annonce-badge.plan {
    background: linear-gradient(135deg, #ff6b6b, #ee5a24);
}

.annonce-detail-main .annonce-badge.boire {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
}

.annonce-detail-main .annonce-badge.sortie {
    background: linear-gradient(135deg, #af3a82, #ec4899);
}

.annonce-detail-main .annonce-badge.peu-importe {
    background: linear-gradient(135deg, var(--brand-soft), var(--brand));
    color: var(--brand-dark) !important;
}

.annonce-detail-main .annonce-search-info {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 6px 0;
    padding: 4px 8px;
    background: #f8f9fa;
    border-radius: 4px;
    font-size: 12px;
    color: #666;
}

.annonce-detail-main .annonce-search-info i {
    color: #ff385c;
    font-size: 10px;
}

.annonce-detail-main .annonce-search-info span {
    font-weight: 400;
}

.annonce-detail-date {
    flex-wrap: nowrap;
}
.annonce-detail-inline-sep {
    opacity: 0.7;
    margin: 0 2px;
}

.annonce-detail-meta i {
    color: #94a3b8;
    width: 14px;
}

.annonce-detail-quick-actions {
    display: flex;
    gap: 10px;
}

.annonce-detail-share-btn {
    background: var(--surface, #fff);
    border: 1px solid var(--border, #ececf0);
    border-radius: var(--r-md, 14px);
    padding: 0;
    cursor: pointer;
    transition: var(--transition);
    color: var(--text-soft, #717171);
    font-size: 1rem;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.annonce-detail-share-btn:hover {
    border-color: var(--brand, #ff385c);
    color: var(--brand, #ff385c);
    transform: translateY(-1px);
}

/* .annonce-detail-favorite-btn — voir PHASE 4 app.css */

.annonce-detail-section {
    background: #fff;
    border: 1px solid var(--border, #ececf0);
    border-radius: 16px;
    padding: 24px;
}

.annonce-detail-section-title {
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--text, #222);
    margin: 0 0 18px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.annonce-detail-section-title i {
    color: #ff385c;
    font-size: 18px;
}

.annonce-detail-description {
    color: var(--text-soft, #4a5568);
    line-height: 1.7;
    font-size: 0.98rem;
}

.annonce-detail-description p {
    margin: 0 0 15px 0;
}

.annonce-detail-description p:last-child {
    margin-bottom: 0;
}

.annonce-detail-photos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 15px;
}

.annonce-detail-photo-item {
    aspect-ratio: 1;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.2s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.annonce-detail-photo-item:hover {
    transform: scale(1.05);
}

.annonce-detail-photo-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.annonce-detail-sidebar {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.annonce-detail-author-card {
    background: #fff;
    border-radius: 16px;
    padding: 24px;
    border: 1px solid var(--border, #ececf0);
    box-shadow: 0 4px 16px rgba(16, 24, 40, 0.05);
}

.annonce-detail-author-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.annonce-detail-author-photo {
    position: relative;
    flex-shrink: 0;
    width: 60px;
    height: 60px;
}
.annonce-detail-author-photo .no-photo-placeholder {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brand), var(--brand-dark));
    color: #fff;
    font-weight: 700;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.annonce-detail-author-photo.avatar-status img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: none;
    box-shadow: none;
}
.annonce-detail-author-photo:not(.avatar-status) img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid white;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.annonce-detail-author-photo img[src=""] {
    display: none;
}

.annonce-detail-author-photo:has(img[src=""])::after {
    content: "ii";
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #e2e8f0;
    color: #94a3b8;
    font-size: 20px;
    font-weight: 300;
    border: 3px solid white;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.annonce-detail-author-status {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid white;
}

.annonce-detail-author-status.online {
    background: #10b981;
}

.annonce-detail-author-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.annonce-detail-author-name {
    font-size: 18px;
    font-weight: 800;
    color: var(--text, #222);
    margin: 0 0 5px 0;
}

.annonce-detail-author-age,
.annonce-detail-author-location {
    font-size: 14px;
    color: #64748b;
    margin: 0;
}

.annonce-detail-author-message-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, rgba(255, 56, 92, 0.96) 0%, rgba(227, 28, 95, 0.96) 100%);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 5px 11px;
    border-radius: 999px;
    border: none;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 6px 16px rgba(227, 28, 95, 0.3);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    margin-top: 0.2rem;
    margin-left: 0;
    max-width: 220px;
    animation: slideInFromRight 0.4s ease-out;
}

.annonce-detail-author-message-badge:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(227, 28, 95, 0.42);
}

.annonce-detail-author-message-badge i {
    color: #ffd60a;
    font-size: 0.7rem;
    flex-shrink: 0;
    animation: pulse 2s infinite;
    filter: drop-shadow(0 0 4px rgba(255, 214, 10, 0.6));
}

.annonce-detail-author-message-badge span {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
}

.annonce-detail-author-stats {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 10px;
    align-items: center;
}

.annonce-detail-stat {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #64748b;
    font-size: 14px;
}

.annonce-detail-stat i {
    color: #94a3b8;
    width: 14px;
}

.annonce-detail-view-profile-btn {
    width: 100%;
    background: #fff;
    color: #1f2430;
    border: 1px solid #ececf0;
    border-radius: 999px;
    padding: 12px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.annonce-detail-view-profile-btn:hover {
    border-color: #ff385c;
    color: #ff385c;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(16, 24, 40, 0.08);
}

.annonce-detail-contact-card {
    background: #fff;
    border-radius: 16px;
    padding: 24px;
    border: 1px solid var(--border, #ececf0);
    box-shadow: 0 4px 16px rgba(16, 24, 40, 0.05);
}

.annonce-detail-contact-title {
    font-size: 16px;
    font-weight: 800;
    color: var(--text, #222);
    margin: 0 0 15px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.annonce-detail-contact-title i {
    color: #ff385c;
}

.annonce-detail-contact-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.annonce-detail-contact-item--ref strong {
    font-weight: 800;
    letter-spacing: 0.03em;
    color: var(--text);
}

.annonce-detail-contact-item {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #4a5568;
    font-size: 14px;
}

.annonce-detail-contact-item i {
    color: #ff385c;
    width: 14px;
}

.annonce-detail-respond-btn {
    width: 100%;
    background: linear-gradient(135deg, #ff385c, #e11d48);
    color: white;
    border: none;
    border-radius: 999px;
    padding: 16px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 8px 20px rgba(255, 56, 92, 0.3);
}

.annonce-detail-respond-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(255, 56, 92, 0.4);
}

@media (max-width: 1024px) {
    .annonce-detail-content {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 20px;
    }
    .annonce-detail-sidebar {
        order: 2;
    }
}

@media (max-width: 768px) {
    .annonce-detail-main {
        padding: 10px;
        padding-bottom: 100px;
        margin-top: 40px;
    }
    .annonce-detail-content {
        padding: 15px;
    }
    .annonce-detail-main-content { order: 1; }
    .annonce-detail-sidebar { order: 2; }
    .annonce-detail-contact-card { order: 1; }
    .annonce-detail-author-card { order: 2; }
    .annonce-detail-author-header {
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        width: 100%;
        text-align: center;
        gap: 12px;
    }
    .annonce-detail-author-info {
        align-items: center;
        text-align: center;
        width: 100%;
        min-width: 0;
    }
    .annonce-detail-author-photo {
        width: 56px;
        height: 56px;
        flex-shrink: 0;
    }
    .annonce-detail-author-photo img {
        width: 56px;
        height: 56px;
    }
    .annonce-detail-author-message-badge {
        margin-left: auto;
        margin-right: auto;
        justify-content: center;
        text-align: center;
        max-width: 220px;
    }
    .annonce-detail-main .desktop-only { display: none; }
    .annonce-detail-main .mobile-only { display: block; }
    .annonce-detail-header-section {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "badge actions"
            "title title";
        column-gap: 10px;
        row-gap: 10px;
        align-items: start;
    }
    .annonce-detail-type-badge.mobile-only {
        grid-area: badge;
        margin: 0;
        align-self: start;
    }
    .annonce-detail-title-section {
        grid-area: title;
        min-width: 0;
    }
    .annonce-detail-quick-actions {
        grid-area: actions;
        width: auto;
        justify-content: flex-end;
        margin-left: 0;
        align-self: start;
        gap: 8px;
    }
    .annonce-detail-favorite-btn,
    .annonce-detail-share-btn {
        width: 40px;
        height: 40px;
        padding: 10px;
    }
    .annonce-detail-title {
        font-size: 20px;
    }
    .annonce-detail-type-badge {
        justify-content: flex-start;
        margin-bottom: 6px;
    }
    .annonce-detail-meta {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: 10px;
        row-gap: 6px;
        align-items: center;
    }
    .annonce-detail-meta span {
        font-size: 12px;
    }
    .annonce-detail-location {
        min-width: 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        grid-column: 1;
    }
    .annonce-detail-date,
    .annonce-detail-responses,
    .annonce-detail-views {
        white-space: nowrap;
        flex-shrink: 0;
    }
    .annonce-detail-date {
        grid-column: 1 / -1;
        justify-self: start;
        flex-wrap: nowrap;
    }
    .annonce-detail-participants {
        grid-column: 1 / -1;
    }
    .annonce-detail-top-extras .annonce-tags {
        flex-basis: auto;
        width: 100%;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .annonce-detail-top-extras .annonce-tags::-webkit-scrollbar {
        display: none;
    }
    .annonce-detail-top-extras .annonce-tags .tag {
        flex: 0 0 auto;
        white-space: nowrap;
    }
    .annonce-detail-section {
        padding: 20px;
    }
    .annonce-detail-section-title {
        font-size: 16px;
    }
    .annonce-detail-description {
        font-size: 14px;
    }
    .annonce-detail-photos-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 10px;
    }
    .annonce-detail-author-card,
    .annonce-detail-contact-card {
        padding: 20px;
    }
    .annonce-detail-author-name {
        font-size: 16px;
    }
    .annonce-detail-author-age,
    .annonce-detail-author-location {
        font-size: 12px;
    }
    .annonce-detail-author-message-badge {
        font-size: 0.6rem;
        padding: 0.25rem 0.4rem;
        max-width: 150px;
    }
    .annonce-detail-author-message-badge i {
        font-size: 0.6rem;
    }
    .annonce-detail-stat {
        font-size: 12px;
    }
    .annonce-detail-contact-title {
        font-size: 14px;
    }
    .annonce-detail-contact-item {
        font-size: 12px;
    }
    .annonce-detail-respond-btn {
        display: none;
    }
    .annonce-detail-main,
    .annonce-detail-container,
    .annonce-detail-content {
        max-width: 100%;
        width: 100%;
    }
    .annonce-detail-container {
        overflow-wrap: anywhere;
        word-break: break-word;
    }
    .annonce-detail-mobile-actions {
        width: 100%;
        box-sizing: border-box;
    }
}

@media (max-width: 768px) {
    .annonce-detail-mobile-actions {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: white;
        border-top: 1px solid #e2e8f0;
        padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
        display: flex;
        gap: 8px;
        z-index: 1100;
        box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
    }
    .annonce-detail-mobile-respond-btn {
        flex: 1;
        background: linear-gradient(135deg, #ff385c, #e11d48);
        color: white;
        border: none;
        border-radius: 999px;
        padding: 11px 14px;
        font-size: 0.84rem;
        font-weight: 700;
        cursor: pointer;
        transition: all 0.2s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        box-shadow: 0 5px 14px rgba(255, 56, 92, 0.3);
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .annonce-detail-mobile-respond-btn:hover {
        transform: translateY(-1px);
    }
    .annonce-detail-mobile-menu-btn {
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        border-radius: 10px;
        padding: 9px;
        cursor: pointer;
        transition: all 0.2s ease;
        color: #64748b;
        font-size: 0.85rem;
        width: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .annonce-detail-mobile-menu-btn:hover {
        background: #f1f5f9;
        border-color: #cbd5e1;
        color: #475569;
    }
}

@media (min-width: 769px) {
    .annonce-detail-mobile-actions {
        display: none;
    }
}

/* Modal détail annonce (listes : annonces, index, lieu-detail) */
.annonce-detail-modal {
    position: fixed;
    inset: 0;
    z-index: 10200;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.28s ease, visibility 0.28s ease;
}
.annonce-detail-modal.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.annonce-detail-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(16, 24, 40, 0.52);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.annonce-detail-modal__panel {
    position: relative;
    z-index: 1;
    width: min(100%, 920px);
    max-height: min(92dvh, 900px);
    display: flex;
    flex-direction: column;
    background: var(--bg);
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    border: 1px solid var(--border);
    border-bottom: none;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    transform: translateY(100%);
    transition: transform 0.34s cubic-bezier(0.16, 1, 0.3, 1);
}
.annonce-detail-modal.active .annonce-detail-modal__panel {
    transform: translateY(0);
}
.annonce-detail-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px 13px;
    background: linear-gradient(165deg, var(--brand-soft) 0%, var(--surface) 72%);
    border-bottom: 1px solid var(--border);
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    flex-shrink: 0;
}
.annonce-detail-modal__header-brand {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
    flex: 1;
}
.annonce-detail-modal__logo {
    height: 22px;
    width: auto;
    max-width: 100px;
    flex-shrink: 0;
    display: block;
    object-fit: contain;
    object-position: left center;
}
.annonce-detail-modal__header-text {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.annonce-detail-modal__eyebrow {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--brand);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.annonce-detail-modal__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -0.02em;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.annonce-detail-modal__header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.annonce-detail-modal__header-boost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 34px;
    padding: 0 12px;
    border-radius: var(--r-pill);
    border: 1px solid #d97706;
    background: linear-gradient(135deg, #fcd34d 0%, #f59e0b 48%, #d97706 100%);
    color: #fff;
    font-size: 0.76rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(217, 119, 6, 0.24);
    transition: var(--transition);
    white-space: nowrap;
}
.annonce-detail-modal__header-boost:hover {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 48%, #b45309 100%);
    border-color: #b45309;
}
.annonce-detail-modal__header-boost i {
    font-size: 0.72rem;
}
.annonce-detail-modal__panel--boost .annonce-detail-modal__header-boost {
    border-color: rgba(251, 191, 36, 0.65);
}
.annonce-detail-modal__close {
    width: 38px;
    height: 38px;
    border: 1px solid rgba(255, 255, 255, 0.85);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: var(--text-soft);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}
.annonce-detail-modal__close:hover {
    border-color: var(--brand);
    color: var(--brand);
    background: #fff;
}
.annonce-detail-modal__body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    overscroll-behavior: contain;
    padding: 0;
}
.annonce-detail-modal__loading,
.annonce-detail-modal__error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 220px;
    padding: 32px 20px;
    color: var(--text-soft);
    text-align: center;
}
.annonce-detail-modal__loading i { font-size: 1.5rem; color: var(--brand); }
.annonce-detail-modal__error i { font-size: 1.6rem; color: #dc2626; }
.annonce-detail-modal__error p { margin: 0; max-width: 320px; }

.annonce-detail-main--modal {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    padding: 0;
    max-width: none;
    margin: 0;
    overflow: hidden;
}

/* Modal détail — annonce boostée (header doré + fusée comme les cartes) */
.annonce-detail-modal__panel--boost {
    overflow: visible;
    border-color: rgba(245, 158, 11, 0.38);
    box-shadow:
        0 12px 34px rgba(245, 158, 11, 0.12),
        0 4px 14px rgba(16, 24, 40, 0.05);
}
.annonce-detail-modal__panel--boost .annonce-detail-modal__header {
    padding-top: 22px;
    background: linear-gradient(165deg, #fff9ed 0%, #fffdf8 48%, #fef3c7 100%);
    border-bottom-color: rgba(245, 158, 11, 0.24);
}
.annonce-detail-modal__panel--boost .annonce-detail-modal__eyebrow {
    color: #b45309;
}
.annonce-detail-modal__panel--boost .annonce-detail-modal__title {
    color: #78350f;
}
.annonce-detail-modal__panel--boost .annonce-detail-modal__close {
    border-color: rgba(251, 191, 36, 0.5);
    background: rgba(255, 255, 255, 0.96);
}
.annonce-detail-modal__panel--boost .annonce-detail-modal__close:hover {
    border-color: #d97706;
    color: #d97706;
    background: #fff;
}
.annonce-detail-modal__panel--boost .annonce-detail-modal__action-btn--primary,
.annonce-detail-main--modal.annonce-boost .annonce-detail-modal__action-btn--primary {
    background: linear-gradient(135deg, #fcd34d 0%, #f59e0b 48%, #d97706 100%);
    border-color: #d97706;
    color: #fff;
    box-shadow: 0 6px 18px rgba(217, 119, 6, 0.32);
}
.annonce-detail-modal__panel--boost .annonce-detail-modal__action-btn--primary:hover:not(:disabled),
.annonce-detail-main--modal.annonce-boost .annonce-detail-modal__action-btn--primary:hover:not(:disabled) {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 48%, #b45309 100%);
    border-color: #b45309;
}
.annonce-detail-modal__boost-pin {
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 12;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(145deg, #fff8e1 0%, #fbbf24 42%, #d97706 100%);
    border: 3px solid #fff;
    color: #fff;
    font-size: 1.02rem;
    line-height: 1;
    pointer-events: none;
    box-shadow:
        0 8px 22px rgba(217, 119, 6, 0.28),
        0 0 0 1px rgba(251, 191, 36, 0.28);
    animation: annonce-boost-pin-float 3.2s ease-in-out infinite;
}
.annonce-detail-modal__boost-pin[hidden] {
    display: none !important;
}
.annonce-detail-modal__boost-pin i {
    display: block;
    transform: rotate(-24deg);
    filter: drop-shadow(0 1px 2px rgba(120, 53, 15, 0.22));
    animation: annonce-boost-rocket 3.2s ease-in-out infinite;
}
.annonce-detail-main--modal.annonce-boost .annonce-detail-header-section--modal {
    padding-top: 12px;
}
@media (prefers-reduced-motion: reduce) {
    .annonce-detail-modal__boost-pin,
    .annonce-detail-modal__boost-pin i { animation: none; }
}
.annonce-detail-main--modal .annonce-detail-container {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    border: none;
    border-radius: 0;
    box-shadow: none;
}
.annonce-detail-content--modal {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 16px;
    grid-template-columns: none;
}
.annonce-detail-main--modal .annonce-detail-sidebar {
    order: 2;
    margin-top: 8px;
    gap: 12px;
}
.annonce-detail-main--modal .annonce-detail-sidebar-profile-row {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.annonce-detail-main--modal .annonce-detail-member-card {
    margin: 0;
}
.annonce-detail-main--modal .annonce-detail-member-card a {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.annonce-detail-main--modal .annonce-detail-member-card:hover {
    transform: none;
    box-shadow: var(--shadow-sm);
}
.annonce-detail-main--modal .annonce-detail-member-card .membres-member-image {
    max-height: 220px;
}
.annonce-detail-main--modal .annonce-detail-member-card .membres-member-info {
    padding: 10px 12px;
    align-items: center;
    text-align: center;
    flex: 1;
}
.annonce-detail-main--modal .annonce-detail-member-card .membres-member-header {
    justify-content: center;
    width: 100%;
    flex-wrap: wrap;
}
.annonce-detail-main--modal .annonce-detail-member-card .membres-member-pseudo {
    justify-content: center;
    flex: none;
    white-space: normal;
    text-align: center;
}
.annonce-detail-main--modal .annonce-detail-member-card .membres-member-gender,
.annonce-detail-main--modal .annonce-detail-member-card .membres-member-orientation,
.annonce-detail-main--modal .annonce-detail-member-card .membres-member-location {
    justify-content: center;
    width: 100%;
    text-align: center;
    white-space: normal;
}
.annonce-detail-main--modal .annonce-detail-member-card .membres-member-gender span,
.annonce-detail-main--modal .annonce-detail-member-card .membres-member-orientation span,
.annonce-detail-main--modal .annonce-detail-member-card .membres-member-location span {
    text-align: center;
    white-space: normal;
}
.annonce-detail-main--modal .annonce-detail-member-card .membres-member-location {
    margin-top: auto;
}
.annonce-detail-main--modal .annonce-detail-sidebar-profile-row .annonce-detail-contact-card {
    margin-bottom: 0;
}
.annonce-detail-main--modal .annonce-detail-title {
    font-size: 1.35rem;
}
.annonce-detail-main--modal .annonce-detail-photo-item img {
    cursor: zoom-in;
}
.annonce-detail-main--modal .annonce-detail-participants {
    cursor: pointer;
}
.annonce-detail-main--modal .annonce-detail-participants:hover {
    color: var(--brand);
}
.annonce-detail-main--modal .annonce-detail-participants-card {
    margin-top: 4px;
}
.annonce-detail-main.annonce-detail-main--modal .lieux-place-actions {
    margin-top: 12px;
    padding: 0;
}
/* Au-dessus de la modal détail annonce (z-index 10200) */
#participantsModal.modal {
    z-index: 10350;
}
.annonce-detail-modal__body .annonce-detail-modal__actions {
    position: relative;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: var(--surface, #fff);
    border-top: 1px solid var(--border);
    flex-shrink: 0;
    margin-top: 0;
    box-shadow: 0 -6px 20px rgba(15, 23, 42, 0.08);
}
/* Modal : le badge type lieu ne doit pas passer au-dessus du footer */
.annonce-detail-modal__body .lieux-place-type {
    z-index: 1;
}
.annonce-detail-modal__body .lieux-premium-badge {
    z-index: 2;
}
.annonce-detail-modal__body .lieux-place-card:hover {
    transform: none;
}
.annonce-detail-modal__action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 36px;
    padding: 0 12px;
    border-radius: var(--r-pill);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    text-decoration: none;
    font-family: inherit;
}
.annonce-detail-modal__action-btn--primary {
    flex: 1;
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
    box-shadow: 0 4px 14px rgba(255, 56, 92, 0.28);
}
.annonce-detail-modal__action-btn--primary:hover:not(:disabled) {
    background: var(--brand-dark);
}
.annonce-detail-modal__action-btn--boost {
    background: linear-gradient(135deg, #fcd34d 0%, #f59e0b 48%, #d97706 100%);
    border-color: #d97706;
    color: #fff;
    box-shadow: 0 4px 14px rgba(217, 119, 6, 0.28);
}
.annonce-detail-modal__action-btn--boost.annonce-detail-modal__action-btn--primary {
    flex: 1;
}
.annonce-detail-modal__action-btn--boost:hover:not(:disabled) {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 48%, #b45309 100%);
    border-color: #b45309;
    color: #fff;
}
.annonce-detail-modal__action-btn:hover:not(:disabled) {
    border-color: var(--brand);
    color: var(--brand);
}
.annonce-detail-modal__action-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
.annonce-detail-modal__action-link {
    width: 36px;
    min-height: 36px;
    padding: 0;
    flex-shrink: 0;
}
body.annonce-detail-modal-open .annonces-fab-mobile,
body.annonce-detail-modal-open .lieu-detail-fab-annonce {
    display: none !important;
}

.annonce-detail-photo-lightbox {
    position: fixed;
    inset: 0;
    z-index: 10300;
    background: rgba(0, 0, 0, 0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.annonce-detail-photo-lightbox[hidden] { display: none !important; }
.annonce-detail-photo-lightbox img {
    max-width: 100%;
    max-height: 90dvh;
    border-radius: var(--r-md);
    object-fit: contain;
}
.annonce-detail-photo-lightbox__close {
    position: absolute;
    top: max(16px, env(safe-area-inset-top));
    right: 16px;
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    font-size: 1.1rem;
    cursor: pointer;
}

/* Modal détail annonce — header contenu */
.annonce-detail-header-section--modal {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 0;
}
.annonce-detail-header-section--modal .annonce-detail-title-section {
    flex: none;
    width: 100%;
}
.annonce-detail-header-section--modal .annonce-detail-modal-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    margin-bottom: 8px;
}
.annonce-detail-modal-meta-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex-shrink: 0;
}
.annonce-detail-modal-participants-count {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.82rem;
    color: var(--text-soft);
    font-weight: 700;
    cursor: pointer;
    flex-shrink: 0;
}
.annonce-detail-modal-participants-count i {
    color: var(--brand);
    font-size: 0.78rem;
}
.annonce-detail-header-section--modal .annonce-detail-modal-meta-row .annonce-detail-date {
    font-size: 0.82rem;
    color: var(--text-soft);
    white-space: nowrap;
    flex-shrink: 0;
}
.annonce-detail-header-section--modal .annonce-detail-modal-meta-row .annonce-badge {
    flex-shrink: 0;
    margin-left: auto;
}
.annonce-detail-main.annonce-detail-main--modal .annonce-detail-section--place {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}
.annonce-detail-main.annonce-detail-main--modal .annonce-detail-section--place .annonce-detail-section-title {
    width: 100%;
}
.annonce-detail-main.annonce-detail-main--modal .annonce-detail-place-wrap.lieux-places-grid {
    width: 100%;
    max-width: 340px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    justify-items: stretch;
    gap: 0;
}
.annonce-detail-main.annonce-detail-main--modal .annonce-detail-place-wrap .lieux-place-card {
    width: 100%;
    max-width: 340px;
    margin: 0;
}
.annonce-detail-main.annonce-detail-main--modal .lieux-place-actions {
    width: 100%;
    max-width: 340px;
    margin: 12px auto 0;
    padding: 0;
    gap: 8px;
}
.annonce-detail-main.annonce-detail-main--modal .lieux-place-btn {
    padding: 9px 12px;
    min-height: 38px;
    font-size: 0.8rem;
    font-weight: 600;
    box-shadow: none;
    border-radius: var(--r-pill);
    background: var(--brand);
}
.annonce-detail-main.annonce-detail-main--modal .lieux-place-btn:not(.secondary) {
    box-shadow: 0 2px 8px rgba(255, 56, 92, 0.18);
}
.annonce-detail-main.annonce-detail-main--modal .lieux-place-btn.secondary {
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text) !important;
    box-shadow: none;
}
.annonce-detail-main.annonce-detail-main--modal .lieux-place-btn:hover {
    transform: none;
}
.annonce-detail-main.annonce-detail-main--modal .lieux-place-btn:not(.secondary):hover {
    background: var(--brand-dark);
    box-shadow: 0 3px 10px rgba(255, 56, 92, 0.22);
    color: white !important;
}
.annonce-detail-main.annonce-detail-main--modal .lieux-place-btn.secondary:hover {
    border-color: var(--brand);
    color: var(--brand) !important;
    background: var(--brand-soft, #ffe4ea);
}
.annonce-detail-main.annonce-detail-main--modal .lieux-place-btn i {
    font-size: 0.75rem;
}
.annonce-detail-header-section--modal .annonce-detail-title {
    margin: 0 0 4px;
}
.annonce-detail-modal-submeta {
    margin: 0 0 8px;
    font-size: 0.82rem;
    color: var(--text-soft);
}
.annonce-detail-modal-submeta .annonce-detail-participants {
    cursor: pointer;
}

.annonce-detail-participants-title-count {
    font-weight: 600;
    color: var(--text-soft);
    font-size: 0.9em;
}

/* Participants — grille avatar + pseudo (modal) */
.annonce-detail-main--modal .annonce-detail-participants-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 16px;
    margin-bottom: 0;
}
.annonce-detail-main--modal .annonce-detail-participants-title {
    margin: 0 0 12px;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 8px;
}
.annonce-detail-main--modal .annonce-detail-participants-info {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.participants-avatar-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px 8px;
}
.participants-avatar-grid__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    min-width: 0;
    text-decoration: none;
    color: inherit;
}
.participants-avatar-grid__item.participants-grid-item--hidden {
    display: none;
}
.participants-avatar-grid.is-expanded .participants-avatar-grid__item.participants-grid-item--hidden {
    display: flex;
}
.participants-avatar-grid__photo {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--brand), var(--brand-dark));
}
.participants-avatar-grid__photo img,
.participants-avatar-grid__photo .no-photo-placeholder {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 50%;
}
.participants-avatar-grid__name {
    width: 100%;
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--text);
    text-align: center;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.participants-avatar-grid__name .premium-badge-small {
    font-size: 0.58rem;
    margin-left: 2px;
}
.participants-avatar-grid__more-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--r-pill);
    background: var(--surface);
    color: var(--text-soft);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: var(--transition);
}
.participants-avatar-grid__more-btn:hover {
    border-color: var(--brand);
    color: var(--brand);
}
.annonce-detail-main--modal .annonce-detail-no-participants {
    text-align: center;
    padding: 24px 16px;
    color: var(--text-soft);
}
.annonce-detail-main--modal .annonce-detail-no-participants i {
    font-size: 1.4rem;
    margin-bottom: 8px;
    display: block;
    color: var(--text-muted, #9ca3af);
}
.annonce-detail-main--modal .annonce-detail-no-participants p {
    margin: 0;
    font-size: 0.85rem;
}

/* Modal détail annonce — mobile */
@media (max-width: 768px) {
    .annonce-detail-modal__header {
        padding: 12px 14px 11px;
    }
    .annonce-detail-modal__logo {
        height: 20px;
        width: auto;
        max-width: 90px;
    }
    .annonce-detail-modal__body .annonce-detail-modal__actions {
        padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
        gap: 6px;
    }
    .annonce-detail-modal__title {
        font-size: 0.9rem;
    }
    .annonce-detail-modal__close {
        width: 32px;
        height: 32px;
    }
    .annonce-detail-main--modal .annonce-detail-content--modal {
        padding: 20px 14px 14px;
    }
    .annonce-detail-header-section--modal {
        padding-top: 10px;
        margin-top: 2px;
    }
    .annonce-detail-main--modal .annonce-detail-section:has(.annonce-detail-photos-grid) {
        margin-top: 10px;
        padding-top: 4px;
    }
    body.page-annonce-detail .annonce-detail-page-header {
        padding-top: max(18px, calc(14px + env(safe-area-inset-top)));
    }
    body.page-annonce-detail .annonce-detail-main--page .annonce-detail-content--modal {
        padding-top: 20px;
    }
    body.page-annonce-detail .annonce-detail-header-section--modal {
        padding-top: 10px;
    }
    /* Contenu d'abord, profil + infos en bas */
    .annonce-detail-main--modal .annonce-detail-sidebar {
        order: 2;
        margin-top: 10px;
        margin-bottom: 0;
        gap: 12px;
    }
    .annonce-detail-main--modal .annonce-detail-main-content {
        order: 1;
    }
    /* Mobile : carte profil (membres) à gauche, infos à droite */
    .annonce-detail-main--modal .annonce-detail-sidebar-profile-row {
        flex-direction: row;
        align-items: stretch;
        gap: 10px;
    }
    .annonce-detail-main--modal .annonce-detail-member-card {
        flex: 0 0 46%;
        max-width: 48%;
        min-width: 0;
        align-self: flex-start;
    }
    .annonce-detail-main--modal .annonce-detail-member-card a {
        display: flex;
        flex-direction: column;
        height: auto;
    }
    .annonce-detail-main--modal .annonce-detail-member-card .membres-member-image {
        width: 100%;
        max-height: none;
        aspect-ratio: 1 / 1;
        height: auto;
        flex-shrink: 0;
    }
    .annonce-detail-main--modal .annonce-detail-member-card .membres-member-image img,
    .annonce-detail-main--modal .annonce-detail-member-card .membres-member-image .membres-no-photo-placeholder {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
        object-position: top center;
    }
    .annonce-detail-main--modal .annonce-detail-member-card .membres-member-info {
        padding: 9px 10px;
        gap: 4px;
        flex-shrink: 0;
        align-items: stretch;
        text-align: left;
    }
    .annonce-detail-main--modal .annonce-detail-member-card .membres-member-header {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 6px;
        width: 100%;
    }
    .annonce-detail-main--modal .annonce-detail-member-card .membres-member-pseudo {
        font-size: 0.86rem;
        line-height: 1.2;
        justify-content: flex-start;
        text-align: left;
        flex: 1;
        min-width: 0;
    }
    .annonce-detail-main--modal .annonce-detail-member-card .membres-member-age {
        font-size: 0.68rem;
        padding: 2px 7px;
        flex-shrink: 0;
    }
    .annonce-detail-main--modal .annonce-detail-member-card .membres-member-gender,
    .annonce-detail-main--modal .annonce-detail-member-card .membres-member-orientation {
        font-size: 0.74rem;
        justify-content: flex-start;
        text-align: left;
        width: 100%;
    }
    .annonce-detail-main--modal .annonce-detail-member-card .membres-member-gender span,
    .annonce-detail-main--modal .annonce-detail-member-card .membres-member-orientation span {
        text-align: left;
    }
    .annonce-detail-main--modal .annonce-detail-member-card .membres-member-location {
        font-size: 0.74rem;
        justify-content: center;
        text-align: center;
        width: 100%;
        margin-top: auto;
    }
    .annonce-detail-main--modal .annonce-detail-member-card .membres-member-location span {
        text-align: center;
    }
    .annonce-detail-main--modal .annonce-detail-member-card .membres-flash-line {
        padding: 20px 8px 8px;
        font-size: 0.62rem;
    }
    .annonce-detail-main--modal .annonce-detail-sidebar-profile-row .annonce-detail-contact-card {
        flex: 1;
        min-width: 0;
        padding: 12px;
        display: flex;
        flex-direction: column;
    }
    .annonce-detail-main--modal .annonce-detail-sidebar-profile-row .annonce-detail-contact-title {
        font-size: 0.82rem;
        margin-bottom: 8px;
    }
    .annonce-detail-main--modal .annonce-detail-sidebar-profile-row .annonce-detail-contact-list {
        gap: 8px;
    }
    .annonce-detail-main--modal .annonce-detail-sidebar-profile-row .annonce-detail-contact-item {
        font-size: 0.74rem;
        align-items: flex-start;
    }
    .annonce-detail-main--modal .annonce-detail-title {
        font-size: 1.1rem;
    }
    .annonce-detail-header-section--modal .annonce-detail-modal-meta-row .annonce-detail-date {
        font-size: 0.78rem;
    }

    .annonce-detail-main--modal .annonce-detail-participants-card {
        padding: 14px;
    }
}

@media (min-width: 769px) {
    .annonce-detail-modal {
        align-items: center;
        padding: 20px;
    }
    .annonce-detail-modal__panel {
        border-radius: var(--r-lg);
        border-bottom: 1px solid var(--border);
        max-height: min(88dvh, 860px);
    }
    .annonce-detail-content--modal {
        display: grid;
        grid-template-columns: 1fr 300px;
        gap: 20px;
        padding: 20px;
    }
    .annonce-detail-main--modal .annonce-detail-sidebar {
        order: 0;
        margin-top: 0;
    }
    .annonce-detail-main.annonce-detail-main--modal .lieux-place-actions {
        flex-direction: row;
        gap: 8px;
    }
    .annonce-detail-main.annonce-detail-main--modal .lieux-place-btn {
        padding: 8px 10px;
        min-height: 36px;
        font-size: 0.78rem;
    }
}

.annonce-detail-main .lieux-place-actions {
    display: flex;
    gap: 12px;
    margin-top: 16px;
    padding: 0 16px 16px;
}

.annonce-detail-main .lieux-place-btn {
    flex: 1;
    background: linear-gradient(135deg, #ff385c, #e11d48);
    color: white !important;
    border: none;
    border-radius: 999px;
    padding: 14px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 8px 20px rgba(255, 56, 92, 0.3);
    text-decoration: none;
    text-align: center;
}

.annonce-detail-main .lieux-place-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(255, 56, 92, 0.4);
    color: white !important;
    text-decoration: none;
}

.annonce-detail-main .lieux-place-btn.secondary {
    border-radius: 999px;
    background: white;
    border: 1px solid #e2e8f0;
    color: #333333 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.annonce-detail-main .lieux-place-btn.secondary:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
    color: #000000 !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.annonce-detail-main .lieux-place-btn i {
    font-size: 14px;
}

@media (max-width: 768px) {
    .annonce-detail-main .lieux-place-actions {
        flex-direction: column;
        gap: 8px;
        padding: 0 12px 12px;
    }
    .annonce-detail-main .lieux-place-btn {
        padding: 0.5rem 1rem;
        font-size: 0.8rem;
    }

    /* Modal annonce : boutons lieu côte à côte sur mobile */
    .annonce-detail-main.annonce-detail-main--modal .lieux-place-actions {
        flex-direction: row;
        gap: 8px;
        padding: 0;
    }
    .annonce-detail-main.annonce-detail-main--modal .lieux-place-btn {
        flex: 1;
        min-width: 0;
        padding: 10px 8px;
        font-size: 0.72rem;
        gap: 5px;
        white-space: nowrap;
        background: var(--brand);
        box-shadow: 0 2px 8px rgba(255, 56, 92, 0.18);
    }
    .annonce-detail-main.annonce-detail-main--modal .lieux-place-btn.secondary {
        background: var(--surface);
        box-shadow: none;
    }
    .annonce-detail-main.annonce-detail-main--modal .lieux-place-btn i {
        font-size: 0.72rem;
        flex-shrink: 0;
    }
}

.annonce-detail-main.annonce-detail-main--page.annonce-boost {
    position: relative;
    animation: pageBoostPulse 3s ease-in-out infinite;
}

.annonce-detail-main.annonce-detail-main--page.annonce-boost::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, rgba(255, 107, 53, 0.05), rgba(247, 147, 30, 0.05));
    pointer-events: none;
    z-index: 1;
    animation: pageBoostGlow 4s ease-in-out infinite;
}

.annonce-detail-main .page-boost-badge {
    position: fixed;
    top: 80px;
    right: 20px;
    background: linear-gradient(135deg, #ff6b35, #f7931e);
    color: white;
    padding: 8px 16px;
    border-radius: 25px;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 1000;
    box-shadow: 0 6px 20px rgba(255, 107, 53, 0.4);
    animation: pageBoostBadgeFloat 2s ease-in-out infinite;
}

.annonce-detail-main .page-boost-badge i {
    font-size: 16px;
    animation: pageRocketShake 1.5s ease-in-out infinite;
}

.annonce-detail-main .page-boost-badge span {
    font-size: 13px;
    font-weight: 700;
}

@keyframes pageBoostPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.005); }
}

@keyframes pageBoostGlow {
    0%, 100% { opacity: 0.05; }
    50% { opacity: 0.1; }
}

@keyframes pageBoostBadgeFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

@keyframes pageRocketShake {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-8deg); }
    75% { transform: rotate(8deg); }
}

.annonce-detail-main.annonce-detail-main--page.annonce-boost .annonce-detail-title {
    background: linear-gradient(135deg, #ff6b35, #f7931e);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: titleBoostGlow 2s ease-in-out infinite;
}

.annonce-detail-main.annonce-detail-main--page.annonce-boost .annonce-detail-respond-btn,
.annonce-detail-main.annonce-detail-main--page.annonce-boost .annonce-detail-mobile-respond-btn {
    background: linear-gradient(135deg, #fcd34d 0%, #f59e0b 48%, #d97706 100%);
    box-shadow: 0 6px 20px rgba(217, 119, 6, 0.34);
}

.annonce-detail-main.annonce-detail-main--page.annonce-boost .annonce-detail-respond-btn:hover,
.annonce-detail-main.annonce-detail-main--page.annonce-boost .annonce-detail-mobile-respond-btn:hover {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 48%, #b45309 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(217, 119, 6, 0.42);
}

@keyframes titleBoostGlow {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.1); }
}

@keyframes buttonBoostPulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 6px 20px rgba(255, 107, 53, 0.4);
    }
    50% {
        transform: scale(1.02);
        box-shadow: 0 8px 25px rgba(255, 107, 53, 0.6);
    }
}

@media (max-width: 768px) {
    .annonce-detail-main .page-boost-badge {
        top: 70px;
        right: 15px;
        padding: 6px 12px;
        font-size: 12px;
    }
    .annonce-detail-main .page-boost-badge i {
        font-size: 14px;
    }
    .annonce-detail-main .page-boost-badge span {
        font-size: 11px;
    }
}

.annonce-detail-main .annonce-boost-badge {
    position: absolute;
    top: -5px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #3b82f6, #ec4899);
    color: white;
    padding: 8px 20px;
    border-radius: 25px;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 100;
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4);
    animation: annonceBoostBadgeFloat 2s ease-in-out infinite;
}

.annonce-detail-main .annonce-boost-badge i {
    font-size: 16px;
    animation: annonceRocketShake 1.5s ease-in-out infinite;
}

.annonce-detail-main .annonce-boost-badge span {
    font-size: 13px;
    font-weight: 700;
}

@keyframes annonceBoostBadgeFloat {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(-5px); }
}

@keyframes annonceRocketShake {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-8deg); }
    75% { transform: rotate(8deg); }
}

@media (max-width: 768px) {
    .annonce-detail-main .annonce-boost-badge {
        top: -12px;
        padding: 6px 16px;
        font-size: 12px;
    }
    .annonce-detail-main .annonce-boost-badge i {
        font-size: 14px;
    }
    .annonce-detail-main .annonce-boost-badge span {
        font-size: 11px;
    }
}

/* ============================================================
   Page: edit_profil.php (migré depuis css/edit_profil.css)
   Tout scopé sous .edit-profil-main ; keyframe renommé
   editProfilFadeIn ; spin réutilisé.
   ============================================================ */
.edit-profil-main {
    min-height: 100vh;
    background: #f7f7f8;
    padding: 20px;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.edit-profil-content-wrapper {
    max-width: 1200px;
    margin: 0 auto;
}

.edit-profil-form {
    background: white;
    border-radius: 22px;
    box-shadow: 0 16px 40px rgba(16, 24, 40, 0.10);
    border: 1px solid #f0f1f4;
    overflow: hidden;
    margin-top: 20px;
}

.edit-profil-container {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 0;
    min-height: 600px;
}

.edit-profil-photos-section {
    background: #f8f9fa;
    padding: 30px;
    border-right: 1px solid #e9ecef;
}

.edit-profil-photos-section h3 {
    color: #333;
    font-size: 1.5rem;
    margin-bottom: 25px;
    font-weight: 600;
}

.edit-profil-main .current-profile-photo {
    margin-bottom: 30px;
}

.edit-profil-main .current-profile-photo h4 {
    color: #555;
    font-size: 1.1rem;
    margin-bottom: 15px;
    font-weight: 500;
}

.edit-profil-main .profile-photo-preview {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #ff385c;
    margin-bottom: 15px;
    cursor: pointer;
}

.edit-profil-main .no-photo-placeholder {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: #e9ecef;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
    border: 3px dashed #ccc;
}

.edit-profil-main .no-photo-placeholder i {
    font-size: 2rem;
    color: #999;
    margin-bottom: 5px;
}

.edit-profil-main .no-photo-placeholder span {
    color: #999;
    font-size: 0.9rem;
}

.edit-profil-main .photo-upload-input {
    display: none;
}

.edit-profil-main .upload-btn {
    background: linear-gradient(135deg, #ff385c, #e11d48);
    color: white;
    border: none;
    padding: 11px 22px;
    border-radius: 999px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 700;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 8px 20px rgba(255, 56, 92, 0.28);
}

.edit-profil-main .upload-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(255, 56, 92, 0.36);
}

.edit-profil-main .photos-gallery h4 {
    color: #555;
    font-size: 1.1rem;
    margin-bottom: 15px;
    font-weight: 500;
}

.edit-profil-main .photos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 10px;
    margin-bottom: 20px;
}

.edit-profil-main .photo-item {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.edit-profil-main .photo-item:hover {
    transform: scale(1.05);
}

.edit-profil-main .photo-item img {
    width: 100%;
    height: 100px;
    object-fit: cover;
}

.edit-profil-main .photo-actions {
    position: absolute;
    top: 5px;
    right: 5px;
    display: flex;
    gap: 5px;
}

.edit-profil-main .set-profile-btn,
.edit-profil-main .delete-photo-btn {
    width: 25px;
    height: 25px;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 0.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.edit-profil-main .set-profile-btn {
    background: #28a745;
    color: white;
}

.edit-profil-main .set-profile-btn:hover {
    background: #218838;
}

.edit-profil-main .delete-photo-btn {
    background: #dc3545;
    color: white;
}

.edit-profil-main .delete-photo-btn:hover {
    background: #c82333;
}

.edit-profil-info-section {
    padding: 30px;
    overflow-y: auto;
    max-height: 80vh;
}

.edit-profil-main .form-section {
    margin-bottom: 40px;
    animation: editProfilFadeIn 0.5s ease-out;
}

.edit-profil-main .form-section h3 {
    color: #1f2430;
    font-size: 1.3rem;
    margin-bottom: 20px;
    font-weight: 700;
    letter-spacing: -0.01em;
    border-bottom: 2px solid #ffe4ea;
    padding-bottom: 10px;
}

.edit-profil-main .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.edit-profil-main .form-group {
    margin-bottom: 20px;
}

.edit-profil-main .form-group label {
    display: block;
    margin-bottom: 8px;
    color: #555;
    font-weight: 500;
    font-size: 0.95rem;
}

.edit-profil-main .form-group input,
.edit-profil-main .form-group select,
.edit-profil-main .form-group textarea {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid #e9ecef;
    border-radius: 10px;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    background: white;
}

.edit-profil-main .form-group input:focus,
.edit-profil-main .form-group select:focus,
.edit-profil-main .form-group textarea:focus {
    outline: none;
    border-color: #ff385c;
    box-shadow: 0 0 0 3px rgba(255, 56, 92, 0.1);
}

.edit-profil-main .form-group textarea {
    resize: vertical;
    min-height: 80px;
}

.edit-profil-main .partner-field {
    display: none;
}

@media (max-width: 768px) {
    .edit-profil-container {
        grid-template-columns: 1fr;
    }
    .edit-profil-photos-section {
        border-right: none;
        border-bottom: 1px solid #e9ecef;
    }
    .edit-profil-main .form-row {
        grid-template-columns: 1fr;
    }
    .edit-profil-main .photos-grid {
        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    }
    .edit-profil-main .photo-item img {
        height: 80px;
    }
}

@media (max-width: 480px) {
    .edit-profil-main {
        padding: 10px;
    }
    .edit-profil-photos-section,
    .edit-profil-info-section {
        padding: 20px;
    }
    .edit-profil-main .profile-photo-preview,
    .edit-profil-main .no-photo-placeholder {
        width: 120px;
        height: 120px;
    }
}

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

.edit-profil-main .upload-btn:disabled,
.edit-profil-main .upload-btn.loading {
    opacity: 0.7;
    cursor: not-allowed;
}

.edit-profil-main .upload-btn.loading {
    position: relative;
}

.edit-profil-main .upload-btn.loading::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    border: 2px solid transparent;
    border-top: 2px solid white;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* ============================================================
   Page: mes-annonces.php (migré depuis css/mes-annonces.css)
   Contenu page scopé sous .mes-annonces-main ; contenu du modal
   de boost scopé sous .boost-modal ; toast & modale de confirmation
   renommés .ma-notification* / .ma-confirm-* (CSS + js/mes-annonces.js).
   ============================================================ */
.mes-annonces-main {
    padding: 26px 0 60px;
}
.mes-annonces-main .content-wrapper {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 24px;
}

.mes-annonces-main .page-header {
    text-align: center;
    margin-bottom: 30px;
}
.mes-annonces-main .page-header h1 {
    font-size: clamp(1.35rem, 2.5vw, 1.9rem);
    font-weight: 800;
    color: var(--text);
    letter-spacing: -0.02em;
    margin-bottom: 10px;
}
.mes-annonces-main .page-header p {
    color: var(--text-soft);
    font-size: 0.95rem;
}

.mes-annonces-main .annonces-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}
.mes-annonces-main .stat-card {
    background: linear-gradient(135deg, #ff385c 0%, #e11d48 100%);
    color: white;
    padding: 25px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    gap: 20px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}
.mes-annonces-main .stat-card:hover {
    transform: translateY(-5px);
}
.mes-annonces-main .stat-icon {
    font-size: 2.5rem;
    opacity: 0.9;
}
.mes-annonces-main .stat-content h3 {
    font-size: 2rem;
    margin: 0 0 5px 0;
    font-weight: bold;
}
.mes-annonces-main .stat-content p {
    margin: 0;
    opacity: 0.9;
    font-size: 0.9rem;
}

.page-mes-annonces .mes-annonces-main .annonces-filters-section {
    margin-bottom: 18px;
}
.page-mes-annonces .mes-annonces-main .annonces-grid {
    align-items: stretch;
}
.page-mes-annonces .mes-annonce-wrapper {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}
.page-mes-annonces .mes-annonce-wrapper .annonce-card {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    height: 100%;
    min-width: 0;
    overflow: hidden;
}
.page-mes-annonces .mes-annonce-wrapper .annonce-content {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}
.page-mes-annonces .annonce-footer-actions.mes-annonce-management {
    flex-shrink: 1;
    width: 100%;
    max-width: 100%;
}
.page-mes-annonces .mes-annonce-wrapper .annonce-footer {
    margin-top: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
}
.page-mes-annonces .mes-annonce-wrapper .annonce-badge {
    align-self: flex-start;
}
.page-mes-annonces .mes-annonce-wrapper .annonce-card {
    position: relative;
}
.page-mes-annonces .mes-annonce-wrapper .status-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 4;
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    padding: 5px 10px;
    border-radius: var(--r-pill);
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    box-shadow: var(--shadow-sm);
    pointer-events: none;
}
.page-mes-annonces .mes-annonce-wrapper .status-badge__label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.page-mes-annonces .mes-annonce-wrapper .status-badge__label i {
    font-size: 0.68rem;
}
.page-mes-annonces .mes-annonce-wrapper .status-badge.visible {
    background: #dcfce7;
    color: #166534;
}
.page-mes-annonces .mes-annonce-wrapper .status-badge.invisible {
    background: #fef2f2;
    color: #dc2626;
}
.page-mes-annonces .mes-annonce-wrapper .status-badge.boosted {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    color: #fff;
}
.page-mes-annonces .mes-annonce-wrapper .status-badge .boost-expiration {
    font-size: 0.62rem;
    font-weight: 500;
    opacity: 0.92;
    margin: 0;
    white-space: nowrap;
}
.page-mes-annonces .mes-annonce-wrapper .annonce-header {
    padding-right: 72px;
}
.page-mes-annonces .mes-annonce-wrapper.is-inactive .annonce-card {
    opacity: 0.72;
}
.page-mes-annonces .mes-annonce-management {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    min-width: 0;
    flex-shrink: 1;
}
.page-mes-annonces .mes-annonce-management button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 100%;
    box-sizing: border-box;
    padding: 7px 10px;
    border: none;
    border-radius: var(--r-pill);
    font-family: inherit;
    font-size: 0.76rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
    line-height: 1.2;
}
.page-mes-annonces .mes-annonce-management button i {
    font-size: 0.7rem;
    flex-shrink: 0;
}
.page-mes-annonces .btn-ma-boost {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    color: #fff;
}
.page-mes-annonces .btn-ma-boost:hover {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}
.page-mes-annonces .btn-ma-deactivate {
    background: #ef4444;
    color: #fff;
}
.page-mes-annonces .btn-ma-deactivate:hover {
    background: #dc2626;
}
.page-mes-annonces .btn-ma-activate {
    background: #10b981;
    color: #fff;
}
.page-mes-annonces .btn-ma-activate:hover {
    background: #059669;
}

.mes-annonces-main .no-annonces {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 20px;
    background: #f9fafb;
    border-radius: 15px;
    border: 2px dashed #d1d5db;
}
.mes-annonces-main .no-annonces-icon {
    font-size: 4rem;
    color: #9ca3af;
    margin-bottom: 20px;
}
.mes-annonces-main .no-annonces h3 {
    color: #374151;
    margin-bottom: 10px;
}
.mes-annonces-main .no-annonces p {
    color: #6b7280;
    margin-bottom: 30px;
}
.mes-annonces-main .btn-create-annonce {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, #ff385c 0%, #e11d48 100%);
    color: white;
    padding: 15px 30px;
    border-radius: 25px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}
.mes-annonces-main .btn-create-annonce:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.mes-annonces-main .annonce-item {
    background: white;
    border-radius: 15px;
    padding: 25px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    border: 1px solid #e5e7eb;
    transition: all 0.3s ease;
}
.mes-annonces-main .annonce-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}
.mes-annonces-main .annonce-item.boosted {
    border: 2px solid #f59e0b;
    background: linear-gradient(135deg, #fff7ed 0%, #fef3c7 100%);
}
.mes-annonces-main .annonce-item.invisible {
    opacity: 0.7;
    background: #f9fafb;
}

.mes-annonces-main .annonce-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
}
.mes-annonces-main .annonce-info h3 {
    color: #1f2937;
    margin: 0 0 10px 0;
    font-size: 1.3rem;
}
.mes-annonces-main .annonce-meta {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    font-size: 0.85rem;
    color: #6b7280;
}
.mes-annonces-main .annonce-meta span {
    display: flex;
    align-items: center;
    gap: 5px;
}

.mes-annonces-main .status-badge {
    padding: 8px 15px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}
.mes-annonces-main .status-badge.visible {
    background: #dcfce7;
    color: #166534;
}
.mes-annonces-main .status-badge.invisible {
    background: #fef2f2;
    color: #dc2626;
}
.mes-annonces-main .status-badge.boosted {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    color: white;
    position: relative;
}
.mes-annonces-main .boost-expiration {
    font-size: 0.7rem;
    opacity: 0.9;
    margin-top: 2px;
}

.mes-annonces-main .annonce-content {
    margin-bottom: 20px;
}
.mes-annonces-main .annonce-content p {
    color: #4b5563;
    line-height: 1.6;
    margin-bottom: 15px;
}
.mes-annonces-main .annonce-tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 15px;
}
.mes-annonces-main .tag {
    background: #f3f4f6;
    color: #374151;
    padding: 4px 12px;
    border-radius: 15px;
    font-size: 0.8rem;
}
.mes-annonces-main .annonce-place {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #6b7280;
    font-size: 0.9rem;
}

.mes-annonces-main .annonce-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.mes-annonces-main .btn-action {
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}
.mes-annonces-main .btn-edit {
    background: #ff385c;
    color: white;
}
.mes-annonces-main .btn-edit:hover {
    background: #e11d48;
}
.mes-annonces-main .btn-boost {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    color: white;
}
.mes-annonces-main .btn-boost:hover {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}
.mes-annonces-main .btn-deactivate {
    background: #ef4444;
    color: white;
}
.mes-annonces-main .btn-deactivate:hover {
    background: #dc2626;
}
.mes-annonces-main .btn-activate {
    background: #10b981;
    color: white;
}
.mes-annonces-main .btn-activate:hover {
    background: #059669;
}

/* mes-annonces : modale de boost (alignée cartes boost dorées) */
.boost-modal {
    position: fixed;
    inset: 0;
    z-index: 10250;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.28s ease, visibility 0.28s ease;
}
.boost-modal.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.boost-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(16, 24, 40, 0.52);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.boost-modal-content {
    position: relative;
    z-index: 1;
    width: min(100%, 420px);
    max-height: min(82dvh, 640px);
    display: flex;
    flex-direction: column;
    background: var(--bg);
    border: 1px solid rgba(245, 158, 11, 0.34);
    border-bottom: none;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    box-shadow: 0 12px 34px rgba(245, 158, 11, 0.12), 0 4px 14px rgba(16, 24, 40, 0.05);
    overflow: visible;
    transform: translateY(100%);
    transition: transform 0.34s cubic-bezier(0.16, 1, 0.3, 1);
}
.boost-modal.active .boost-modal-content {
    transform: translateY(0);
}
.boost-modal__header {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 18px 14px 12px;
    background: linear-gradient(165deg, #fff9ed 0%, #fffdf8 48%, #fef3c7 100%);
    border-bottom: 1px solid rgba(245, 158, 11, 0.24);
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    flex-shrink: 0;
}
.boost-modal__pin {
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 2;
    width: 38px;
    height: 38px;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(145deg, #fff8e1 0%, #fbbf24 42%, #d97706 100%);
    border: 2px solid #fff;
    color: #fff;
    font-size: 0.88rem;
    line-height: 1;
    pointer-events: none;
    box-shadow: 0 6px 16px rgba(217, 119, 6, 0.24), 0 0 0 1px rgba(251, 191, 36, 0.28);
}
.boost-modal__pin i {
    transform: rotate(-24deg);
    filter: drop-shadow(0 1px 2px rgba(120, 53, 15, 0.22));
}
.boost-modal__header-text {
    min-width: 0;
    flex: 1;
    padding-top: 6px;
}
.boost-modal__eyebrow {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    color: #b45309;
    line-height: 1.2;
}
.boost-modal__header-text h2 {
    margin: 2px 0 4px;
    font-size: 1.05rem;
    font-weight: 800;
    color: #78350f;
    line-height: 1.2;
}
.boost-modal__header-text p {
    margin: 0;
    font-size: 0.82rem;
    color: var(--text-soft);
    line-height: 1.35;
}
.boost-modal__stat {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
    padding: 10px 12px;
    border-radius: var(--r-md);
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.16), rgba(245, 158, 11, 0.05));
    border: 1px solid rgba(245, 158, 11, 0.28);
}
.boost-modal__stat-ring {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(145deg, #fbbf24 0%, #d97706 100%);
    box-shadow: 0 8px 22px rgba(217, 119, 6, 0.32);
    animation: boostStatPulse 2.4s ease-in-out infinite;
}
@keyframes boostStatPulse {
    0%, 100% { transform: scale(1); box-shadow: 0 8px 22px rgba(217, 119, 6, 0.32); }
    50% { transform: scale(1.04); box-shadow: 0 12px 28px rgba(217, 119, 6, 0.42); }
}
.boost-modal__stat-value {
    font-size: 0.78rem;
    font-weight: 900;
    color: #fff;
    line-height: 1;
    letter-spacing: -0.02em;
    text-align: center;
}
.boost-modal__stat-copy {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}
.boost-modal__stat-copy strong {
    font-size: 0.84rem;
    font-weight: 800;
    color: var(--text);
    line-height: 1.25;
}
.boost-modal__stat-copy span {
    font-size: 0.76rem;
    color: var(--text-muted);
    line-height: 1.35;
}
.boost-modal__footnote {
    margin: 0 0 8px;
    font-size: 0.68rem;
    line-height: 1.35;
    color: var(--text-muted);
    text-align: center;
}
.boost-modal__pitch {
    margin: 0 0 10px;
    padding: 10px 12px;
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--text-soft);
    text-align: center;
    border-radius: var(--r-md);
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.16);
}
.boost-modal-close {
    width: 34px;
    height: 34px;
    border: 1px solid rgba(251, 191, 36, 0.5);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.96);
    color: var(--text-soft);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: var(--transition);
}
.boost-modal-close:hover {
    border-color: #d97706;
    color: #d97706;
    background: #fff;
}
.boost-modal-body {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.boost-modal__premium-perks {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}
.boost-modal__premium-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #92400e;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border: 1px solid rgba(245, 158, 11, 0.35);
}
.boost-modal__premium-chip--discount {
    color: #78350f;
    background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
}
.boost-modal__price-panel {
    text-align: center;
    padding: 12px;
    border-radius: var(--r-md);
    border: 1px solid rgba(245, 158, 11, 0.28);
    background: linear-gradient(165deg, #ffffff 0%, #fffdf8 52%, #fff9ed 100%);
}
.boost-modal__price {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 6px;
    margin-bottom: 8px;
}
.boost-modal .price-amount {
    font-size: 1.65rem;
    font-weight: 800;
    color: #b45309;
    line-height: 1;
}
.boost-modal .price-period {
    font-size: 0.86rem;
    color: var(--text-soft);
    font-weight: 600;
}
.boost-modal__price-info {
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 0.78rem;
    color: var(--text-soft);
    line-height: 1.35;
}
.boost-modal__price-info i {
    color: #d97706;
    font-size: 0.72rem;
}
.boost-modal__benefits {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.boost-modal__benefits li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: var(--r-md);
    border: 1px solid var(--border);
    background: var(--surface);
}
.boost-modal__benefit-icon {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, #fcd34d 0%, #f59e0b 48%, #d97706 100%);
    color: #fff;
    font-size: 0.68rem;
}
.boost-modal__benefit-text {
    font-size: 0.76rem;
    color: var(--text);
    line-height: 1.3;
}
.boost-payment-section {
    padding: 0;
}
.boost-modal__payment-title {
    margin: 0 0 8px;
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--text);
}
.boost-modal #sumup-card {
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    overflow: hidden;
    min-height: 132px;
    background: var(--surface);
}
.boost-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px;
    background: var(--brand-soft);
    border-radius: var(--r-md);
    border: 1px solid var(--border);
    margin-top: 8px;
}
.boost-note i {
    color: var(--brand);
    font-size: 0.9rem;
    flex-shrink: 0;
    margin-top: 2px;
}
.boost-note p {
    margin: 0;
    font-size: 0.78rem;
    color: var(--text-soft);
    line-height: 1.4;
}
.boost-modal__debug {
    margin-top: 12px;
    padding: 12px;
    border: 1px dashed var(--border);
    border-radius: var(--r-md);
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.boost-modal__debug p {
    margin: 0;
    width: 100%;
    font-size: 0.78rem;
    color: var(--text-soft);
}
.boost-modal #sumup-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px 12px;
    color: var(--text-soft);
    text-align: center;
}
.boost-modal #sumup-loading p {
    margin: 10px 0 0;
    font-size: 0.82rem;
}
.boost-modal .loading-spinner {
    width: 30px;
    height: 30px;
    border: 3px solid rgba(251, 191, 36, 0.25);
    border-top-color: #d97706;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}
.boost-modal-footer {
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    background: var(--surface);
    border-top: 1px solid var(--border);
    flex-shrink: 0;
}
.boost-modal .btn-cancel {
    width: 100%;
    background: var(--surface);
    color: var(--text-soft);
    border: 1px solid var(--border);
    padding: 9px 16px;
    border-radius: var(--r-pill);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.boost-modal .btn-cancel:hover {
    border-color: var(--brand);
    color: var(--brand);
    background: #fff;
}
@media (min-width: 769px) {
    .boost-modal {
        align-items: center;
        padding: 20px;
    }
    .boost-modal-content {
        border-radius: var(--r-lg);
        border-bottom: 1px solid rgba(245, 158, 11, 0.34);
        max-height: min(80dvh, 600px);
    }
    .boost-modal-footer {
        border-radius: 0 0 var(--r-lg) var(--r-lg);
    }
}

.boost-modal .dynamic-pricing-info {
    margin-top: 12px;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    text-align: center;
}
.boost-modal .dynamic-pricing-info .pricing-message {
    margin: 4px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.boost-modal .price-normal {
    color: #10b981;
}
.boost-modal .price-low-demand {
    color: #f59e0b;
}
.boost-modal .price-medium-demand {
    color: #f97316;
}
.boost-modal .price-high-demand {
    color: #ef4444;
    animation: maPulsePrice 2s infinite;
}
@keyframes maPulsePrice {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.8; }
}
.boost-modal .price-amount.price-increased {
    color: #ef4444;
    font-weight: 800;
}
.boost-modal .price-amount.price-increased::before {
    content: "🔥 ";
}
.boost-modal .demand-indicator {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.boost-modal .demand-indicator.low {
    background: #dcfce7;
    color: #166534;
}
.boost-modal .demand-indicator.medium {
    background: #fef3c7;
    color: #92400e;
}
.boost-modal .demand-indicator.high {
    background: #fee2e2;
    color: #991b1b;
    animation: maPulseDemand 1.5s infinite;
}
@keyframes maPulseDemand {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}
.boost-modal .price-urgency {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    margin-top: 8px;
    animation: maPulseUrgency 2s infinite;
}
@keyframes maPulseUrgency {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.9; }
}
.boost-modal .btn-retry {
    background: #ff385c;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    margin-top: 10px;
    transition: background-color 0.2s ease;
}
.boost-modal .btn-retry:hover {
    background: #e11d48;
}
.boost-modal #sumup-loading p {
    color: #ef4444;
    font-weight: 500;
    margin: 10px 0;
}

/* mes-annonces : modale de confirmation (renommée .ma-confirm-*) */
.ma-confirm-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.ma-confirm-overlay.show {
    opacity: 1;
}
.ma-confirm-box {
    background: white;
    border-radius: 15px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    max-width: 500px;
    width: 90%;
    max-height: 90vh;
    overflow: hidden;
    transform: scale(0.9);
    transition: transform 0.3s ease;
}
.ma-confirm-overlay.show .ma-confirm-box {
    transform: scale(1);
}
.ma-confirm-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 25px 30px 20px;
    border-bottom: 1px solid #e5e7eb;
}
.ma-confirm-header h3 {
    margin: 0;
    font-size: 1.5rem;
    color: #1f2937;
    font-weight: 600;
}
.ma-confirm-close {
    background: none;
    border: none;
    font-size: 1.2rem;
    color: #6b7280;
    cursor: pointer;
    padding: 5px;
    border-radius: 5px;
    transition: all 0.2s ease;
}
.ma-confirm-close:hover {
    background: #f3f4f6;
    color: #374151;
}
.ma-confirm-body {
    padding: 25px 30px;
}
.ma-confirm-body p {
    margin: 0;
    font-size: 1.1rem;
    color: #4b5563;
    line-height: 1.6;
}
.ma-confirm-footer {
    display: flex;
    gap: 15px;
    padding: 20px 30px 25px;
    border-top: 1px solid #e5e7eb;
    justify-content: flex-end;
}
.ma-confirm-footer .btn {
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    display: inline-block;
    text-align: center;
}
.ma-confirm-footer .btn-secondary {
    background: #f3f4f6;
    color: #374151;
}
.ma-confirm-footer .btn-secondary:hover {
    background: #e5e7eb;
    color: #1f2937;
}
.ma-confirm-footer .btn-danger {
    background: #ef4444;
    color: white;
}
.ma-confirm-footer .btn-danger:hover {
    background: #dc2626;
}

/* mes-annonces : toast (renommé .ma-notification*) */
.ma-notification {
    position: fixed;
    top: 20px;
    right: 20px;
    background: white;
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    border-left: 4px solid;
    display: flex;
    align-items: center;
    gap: 12px;
    transform: translateX(100%);
    opacity: 0;
    animation: maNotifSlideIn 0.3s ease-out forwards;
    position: fixed;
    overflow: hidden;
    z-index: 9999;
    max-width: 400px;
}
.ma-notification::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transform: translateX(-100%);
    animation: maNotifShimmer 2s infinite;
}
@keyframes maNotifSlideIn {
    to { transform: translateX(0); opacity: 1; }
}
@keyframes maNotifSlideOut {
    to { transform: translateX(100%); opacity: 0; }
}
@keyframes maNotifShimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}
.ma-notification.success {
    border-left-color: #10b981;
    background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
}
.ma-notification.error {
    border-left-color: #ef4444;
    background: linear-gradient(135deg, #fef2f2 0%, #fef2f2 100%);
}
.ma-notification.warning {
    border-left-color: #f59e0b;
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
}
.ma-notification.info {
    border-left-color: #3b82f6;
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
}
.ma-notification-content {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
}
.ma-notification.success .ma-notification-content > i:first-child { color: #10b981; }
.ma-notification.error .ma-notification-content > i:first-child { color: #ef4444; }
.ma-notification.warning .ma-notification-content > i:first-child { color: #f59e0b; }
.ma-notification.info .ma-notification-content > i:first-child { color: #3b82f6; }
.ma-notification-close {
    background: none;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: all 0.2s ease;
    flex-shrink: 0;
}
.ma-notification-close:hover {
    background: rgba(0, 0, 0, 0.1);
    color: #64748b;
}
.ma-notification.slide-out {
    animation: maNotifSlideOut 0.3s ease-in forwards;
}

@media (max-width: 768px) {
    .mes-annonces-main {
        padding: 16px 0 calc(96px + env(safe-area-inset-bottom, 0px));
    }
    .mes-annonces-main .content-wrapper {
        padding: 0 14px;
    }
    .mes-annonces-main .page-header h1 {
        font-size: 1.5rem;
    }
    .mes-annonces-main .annonces-stats {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }
    .mes-annonces-main .stat-card {
        flex-direction: column;
        text-align: center;
        padding: 14px 8px;
        gap: 8px;
    }
    .mes-annonces-main .stat-icon {
        font-size: 1.25rem;
    }
    .mes-annonces-main .stat-content h3 {
        font-size: 1.15rem;
    }
    .mes-annonces-main .stat-content p {
        font-size: 0.65rem;
        line-height: 1.2;
    }
    .boost-modal-content {
        width: min(100%, 420px);
        max-height: min(82dvh, 640px);
        margin: 0;
    }
    .boost-modal-header {
        padding: 20px;
    }
    .boost-pricing-section,
    .boost-payment-section {
        padding: 20px;
    }
    .boost-modal-footer {
        padding: 16px 20px;
    }
    .boost-modal .price-amount {
        font-size: 1.5rem;
    }
    .boost-header-text h2 {
        font-size: 20px;
    }
    .ma-confirm-box {
        width: 95%;
        margin: 20px;
    }
    .ma-confirm-header {
        padding: 20px 25px 15px;
    }
    .ma-confirm-header h3 {
        font-size: 1.3rem;
    }
    .ma-confirm-body {
        padding: 20px 25px;
    }
    .ma-confirm-body p {
        font-size: 1rem;
    }
    .ma-confirm-footer {
        padding: 15px 25px 20px;
        flex-direction: column;
    }
    .ma-confirm-footer .btn {
        width: 100%;
    }
}


/* ============================================================
   Page: abonnement.php (migre depuis css/abonnement.css)
   Contenu page scope sous .main.abonnement ; modal sous
   #subscription-modal ; toast .notification (inline en JS) supprime ;
   keyframes renommes abo* / reutilises.
   ============================================================ */
.main.abonnement {
    max-width: var(--container);
    margin: 0 auto;
    padding: 22px 24px calc(96px + env(safe-area-inset-bottom, 0px));
    background: var(--bg);
    min-height: calc(100dvh - var(--nav-h));
}
.main.abonnement .content-wrapper {
    max-width: 1200px;
    margin: 0 auto;
}
.main.abonnement .page-header {
    text-align: center;
    margin-bottom: 24px;
}
.main.abonnement .page-header h1 {
    font-size: clamp(1.35rem, 2.5vw, 1.9rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--text);
    margin-bottom: 10px;
}
.main.abonnement .page-subtitle {
    font-size: 0.95rem;
    color: var(--text-soft);
    max-width: 520px;
    margin: 0 auto;
    line-height: 1.5;
}

/* Hero vendeur */
.main.abonnement .abo-hero {
    position: relative;
    overflow: hidden;
    margin-bottom: 22px;
    padding: 26px 20px 22px;
    border-radius: var(--r-lg);
    border: 1px solid rgba(255, 56, 92, 0.22);
    background:
        radial-gradient(120% 80% at 50% -20%, rgba(255, 56, 92, 0.18), transparent 55%),
        linear-gradient(145deg, var(--surface) 0%, var(--bg) 100%);
    box-shadow: 0 16px 40px rgba(255, 56, 92, 0.1);
    text-align: center;
}
.main.abonnement .abo-hero-glow {
    position: absolute;
    inset: -40% -20% auto;
    height: 70%;
    background: radial-gradient(circle, rgba(255, 56, 92, 0.14) 0%, transparent 68%);
    pointer-events: none;
}
.main.abonnement .abo-hero-top {
    position: relative;
    z-index: 1;
}
.main.abonnement .abo-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 12px;
    padding: 6px 14px;
    border-radius: var(--r-pill);
    background: var(--brand-soft);
    color: var(--brand-dark);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.main.abonnement .abo-hero-eyebrow i {
    color: var(--brand);
}
.main.abonnement .abo-hero h1 {
    margin: 0 0 10px;
    font-size: clamp(1.45rem, 4.5vw, 2rem);
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1.1;
    color: var(--text);
}
.main.abonnement .abo-hero-lead {
    margin: 0 auto 18px;
    max-width: 520px;
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--text-soft);
}
.main.abonnement .abo-hero-stat {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 0 auto 16px;
    padding: 14px 16px;
    max-width: 420px;
    border-radius: var(--r-md);
    background: linear-gradient(135deg, rgba(255, 56, 92, 0.12), rgba(255, 56, 92, 0.04));
    border: 1px solid rgba(255, 56, 92, 0.25);
    text-align: left;
}
.main.abonnement .abo-hero-stat-ring {
    flex-shrink: 0;
    width: 78px;
    height: 78px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brand), #e11d48);
    box-shadow: 0 8px 22px rgba(255, 56, 92, 0.35);
    animation: aboStatPulse 2.4s ease-in-out infinite;
}
@keyframes aboStatPulse {
    0%, 100% { transform: scale(1); box-shadow: 0 8px 22px rgba(255, 56, 92, 0.35); }
    50% { transform: scale(1.04); box-shadow: 0 12px 28px rgba(255, 56, 92, 0.45); }
}
.main.abonnement .abo-hero-stat-value {
    font-size: 0.95rem;
    font-weight: 900;
    color: #fff;
    line-height: 1;
    letter-spacing: -0.02em;
}
.main.abonnement .abo-hero-stat-copy {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}
.main.abonnement .abo-hero-stat-copy strong {
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--text);
    line-height: 1.25;
}
.main.abonnement .abo-hero-stat-copy span {
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.35;
}
.main.abonnement .abo-hero-pills {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 0 0 10px;
    padding: 0;
    list-style: none;
}
.main.abonnement .abo-hero-pills li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: var(--r-pill);
    background: var(--surface);
    border: 1px solid var(--border);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-soft);
}
.main.abonnement .abo-hero-pills li i {
    color: var(--brand);
    font-size: 0.72rem;
}
.main.abonnement .abo-hero-footnote {
    position: relative;
    z-index: 1;
    margin: 0;
    font-size: 0.68rem;
    color: var(--text-muted);
    line-height: 1.35;
}
.main.abonnement .abo-trust-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 16px;
    width: 100%;
    max-width: 560px;
    margin: 0 auto 14px;
}
.main.abonnement .abo-trust-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-soft);
}
.main.abonnement .abo-trust-item i {
    color: var(--brand);
}
.main.abonnement .abo-plan-hook {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 10px 0 0;
    padding: 0;
    background: none;
    border: none;
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--text-soft);
    font-style: italic;
    text-align: center;
}
.main.abonnement .abo-plan-hook i {
    color: var(--brand);
    flex-shrink: 0;
    font-style: normal;
}
.main.abonnement .pricing-popular-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 8px;
    padding: 4px 10px;
    border-radius: var(--r-pill);
    background: var(--brand);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.main.abonnement .plan-select-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.main.abonnement .pricing-option.popular {
    position: relative;
    box-shadow: 0 8px 24px rgba(255, 56, 92, 0.14);
}
@media (max-width: 520px) {
    .main.abonnement .abo-hero {
        padding: 22px 16px 18px;
    }
    .main.abonnement .abo-hero-stat {
        flex-direction: column;
        text-align: center;
        gap: 10px;
    }
    .main.abonnement .abo-hero-stat-copy {
        align-items: center;
    }
}

.main.abonnement .abo-status-expiry {
    font-size: 0.82rem;
    color: var(--text-soft);
    margin-top: 6px;
}
.main.abonnement .abo-feature-upgrade {
    color: var(--brand-dark);
    font-weight: 600;
}
.main.abonnement .abo-feature-upgrade i {
    color: var(--brand);
}
.main.abonnement .status-icon--premium {
    color: var(--brand);
}
.main.abonnement .icon-crown {
    color: var(--brand);
}
.main.abonnement .abo-badge-preview {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    margin-left: 6px;
    line-height: 1;
}
.main.abonnement .abo-badge-preview .premium-crown {
    margin-left: 0 !important;
}
.main.abonnement .feature-item__label .fa-bolt {
    color: var(--brand);
    margin-left: 3px;
    font-size: 0.85em;
}
.main.abonnement .gift-notification--flush {
    margin-top: 0;
    margin-bottom: 20px;
}
.main.abonnement .current-subscription {
    background: var(--surface);
    border-radius: var(--r-lg);
    padding: 20px 22px;
    margin-bottom: 24px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border);
}
.main.abonnement .subscription-status {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}
.main.abonnement .current-subscription.is-premium-user .subscription-status {
    margin-bottom: 0;
}
.main.abonnement .subscription-status i {
    font-size: 1.75rem;
    color: var(--brand);
    flex-shrink: 0;
}
.main.abonnement .status-info h3 {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -0.02em;
    margin-bottom: 4px;
}
.main.abonnement .status-info p {
    color: var(--text-soft);
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.45;
}
.main.abonnement .subscription-features {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.main.abonnement .subscription-features .feature-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    color: #64748b;
}
.main.abonnement .subscription-features .feature-item i {
    color: #10b981;
}
.main.abonnement .subscription-features .feature-item i.fa-times {
    color: #ef4444;
}
.main.abonnement .subscription-plans {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 28px;
}
.main.abonnement .plan-card {
    background: var(--surface);
    border-radius: var(--r-lg);
    padding: 28px 24px 24px;
    margin-top: 18px;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border);
    transition: var(--transition);
    position: relative;
    overflow: visible;
    width: 100%;
    max-width: 560px;
}
.main.abonnement .plan-card.featured {
    border-color: rgba(255, 56, 92, 0.35);
    box-shadow: 0 12px 32px rgba(255, 56, 92, 0.12);
}
.main.abonnement .plan-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
    border-color: rgba(255, 56, 92, 0.25);
}
.main.abonnement .plan-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    padding: 8px 18px;
    border-radius: var(--r-pill);
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    align-items: center;
    gap: 6px;
    z-index: 10;
    white-space: nowrap;
}
.main.abonnement .plan-badge.premium {
    background: var(--brand);
    color: #fff;
    box-shadow: 0 6px 18px rgba(255, 56, 92, 0.35);
}
.main.abonnement .plan-header {
    text-align: center;
    margin-bottom: 16px;
}
.main.abonnement .plan-header h3 {
    font-size: clamp(1.2rem, 2.2vw, 1.45rem);
    font-weight: 800;
    color: var(--text);
    letter-spacing: -0.02em;
    margin-bottom: 8px;
}
.main.abonnement .plan-description {
    color: var(--text-soft);
    font-size: 0.92rem;
    line-height: 1.5;
}
.main.abonnement .plan-card.featured .plan-header h3,
.main.abonnement .plan-card.featured .plan-description {
    color: inherit;
}
.main.abonnement .plan-features {
    margin-bottom: 20px;
}
.main.abonnement .feature-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.main.abonnement .feature-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.88rem;
    line-height: 1.4;
}
.main.abonnement .feature-item__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 0;
}
.main.abonnement .feature-item__label {
    font-weight: 600;
    color: var(--text);
}
.main.abonnement .feature-item__hint {
    display: block;
    font-size: 0.78rem;
    font-weight: 400;
    color: var(--text-soft);
    line-height: 1.35;
}
.main.abonnement .feature-item i {
    margin-top: 3px;
    flex-shrink: 0;
}
.main.abonnement .feature-item i.fa-check {
    color: #10b981;
    font-size: 0.82rem;
}
.main.abonnement .feature-item i.fa-times {
    color: #ef4444;
}
.main.abonnement .feature-item span {
    color: var(--text);
}
.main.abonnement .plan-card.featured .feature-item span {
    color: var(--text);
}
.main.abonnement .plan-pricing {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
@media (min-width: 769px) {
    .main.abonnement .plan-card {
        display: grid;
        grid-template-columns: minmax(240px, 1fr) minmax(300px, 1.15fr);
        grid-template-areas:
            "header header"
            "pricing features"
            "renewal renewal";
        gap: 20px 32px;
        max-width: 960px;
        padding: 32px 28px 24px;
        align-items: start;
    }
    .main.abonnement .plan-header {
        grid-area: header;
        margin-bottom: 4px;
    }
    .main.abonnement .plan-pricing {
        grid-area: pricing;
    }
    .main.abonnement .plan-features {
        grid-area: features;
        margin-bottom: 0;
    }
    .main.abonnement .plan-card .renewal-content {
        grid-area: renewal;
    }
}
.main.abonnement .pricing-option {
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 16px;
    text-align: center;
    transition: var(--transition);
    background: var(--bg);
}
.main.abonnement .pricing-option.popular {
    border-color: var(--brand);
    background: var(--brand-soft);
}
.main.abonnement .plan-card.featured .pricing-option {
    background: var(--bg);
    border-color: var(--border);
}
.main.abonnement .plan-card.featured .pricing-option.popular {
    background: var(--brand-soft);
    border-color: var(--brand);
}
.main.abonnement .pricing-option:hover {
    border-color: var(--brand);
    transform: translateY(-2px);
}
.main.abonnement .price {
    margin-bottom: 12px;
}
.main.abonnement .price-amount {
    font-size: 1.85rem;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -0.03em;
}
.main.abonnement .price-period {
    font-size: 0.95rem;
    color: var(--text-soft);
}
.main.abonnement .price-per-month {
    display: inline-block;
    font-size: 0.78rem;
    color: #059669;
    font-weight: 700;
    margin-top: 6px;
    background: #ecfdf5;
    padding: 4px 10px;
    border-radius: var(--r-pill);
}
.main.abonnement .price-original {
    display: block;
    font-size: 0.75rem;
    color: #6b7280;
    text-decoration: line-through;
    margin-top: 2px;
}
.main.abonnement .btn-primary {
    background: var(--brand);
    color: #fff;
    border: none;
    padding: 12px 22px;
    border-radius: var(--r-pill);
    font-size: 0.95rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: var(--transition);
    width: 100%;
    box-shadow: 0 6px 18px rgba(255, 56, 92, 0.28);
}
.main.abonnement .btn-primary:hover {
    background: var(--brand-dark);
    transform: translateY(-1px);
}
.main.abonnement .premium-redirect-notification {
    background: var(--brand-soft);
    border-radius: var(--r-lg);
    padding: 18px 20px;
    margin-bottom: 24px;
    color: var(--text);
    box-shadow: var(--shadow-sm);
    border: 1px solid rgba(255, 56, 92, 0.2);
}
.main.abonnement .premium-redirect-content {
    display: flex;
    align-items: center;
    gap: 15px;
}
.main.abonnement .premium-redirect-content i {
    font-size: 1.6rem;
    color: var(--brand);
}
.main.abonnement .premium-redirect-text h3 {
    margin: 0 0 6px 0;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--text);
}
.main.abonnement .premium-redirect-text p {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-soft);
    line-height: 1.45;
}
.main.abonnement .upgrade-section {
    background: linear-gradient(135deg, #ff385c, #e11d48);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 24px;
    text-align: center;
    color: white;
}
.main.abonnement .upgrade-content h3 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 8px;
}
.main.abonnement .upgrade-content p {
    font-size: 1.1rem;
    margin-bottom: 16px;
}
.main.abonnement .upgrade-example {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
}
.main.abonnement .example-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}
.main.abonnement .example-text {
    font-size: 0.95rem;
    font-weight: 500;
}
.main.abonnement .example-arrow {
    font-size: 1.2rem;
    font-weight: 700;
}
.main.abonnement .btn-upgrade {
    background: white;
    color: #ff385c;
    border: none;
    padding: 14px 28px;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.main.abonnement .btn-upgrade:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.main.abonnement .faq-section {
    background: var(--surface);
    border-radius: var(--r-lg);
    padding: 22px;
    margin-bottom: 24px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border);
}
.main.abonnement .faq-section h3 {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -0.02em;
    margin-bottom: 16px;
    text-align: center;
}
.main.abonnement .faq-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.main.abonnement .faq-item {
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    overflow: hidden;
}
.main.abonnement .faq-question {
    padding: 16px 18px;
    background: var(--bg);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    transition: var(--transition);
}
.main.abonnement .faq-question:hover {
    background: var(--brand-soft);
}
.main.abonnement .faq-question h4 {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text);
    margin: 0;
}
.main.abonnement .faq-question i {
    color: var(--brand);
    transition: transform 0.2s ease;
    flex-shrink: 0;
}
.main.abonnement .faq-item.active .faq-question i {
    transform: rotate(180deg);
}
.main.abonnement .faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}
.main.abonnement .faq-answer p {
    padding: 20px;
    margin: 0;
    color: #64748b;
    line-height: 1.6;
}
.main.abonnement .support-section {
    background: white;
    border-radius: 16px;
    padding: 24px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.main.abonnement .support-content h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 8px;
}
.main.abonnement .support-content p {
    color: #64748b;
    margin-bottom: 16px;
}
.main.abonnement .support-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}
.main.abonnement .btn-support {
    background: #f1f5f9;
    color: #374151;
    border: 1px solid #e2e8f0;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}
.main.abonnement .btn-support:hover {
    background: #e2e8f0;
    transform: translateY(-1px);
}
/* Modal paiement abonnement (.sub-pay-modal-shell) */
.sub-pay-modal-shell.sub-pay-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10240;
    align-items: flex-end;
    justify-content: center;
    padding: 0;
    background: rgba(16, 24, 40, 0.52);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.sub-pay-modal-shell .sub-pay-modal__panel {
    position: relative;
    z-index: 1;
    width: min(100%, 420px);
    max-height: min(86dvh, 680px);
    display: flex;
    flex-direction: column;
    background: var(--bg, #f7f7f8);
    border: 1px solid rgba(255, 56, 92, 0.22);
    border-bottom: none;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    box-shadow: 0 16px 40px rgba(255, 56, 92, 0.12), 0 8px 24px rgba(16, 24, 40, 0.08);
    overflow: visible;
    animation: subPaySlideUp 0.34s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes subPaySlideUp {
    from { transform: translateY(100%); opacity: 0.6; }
    to { transform: translateY(0); opacity: 1; }
}
.sub-pay-modal-shell .sub-pay-modal__header {
    position: relative;
    display: block;
    padding: 18px 48px 12px;
    background: linear-gradient(165deg, #fff5f7 0%, #fff 48%, #ffe4ea 100%);
    border-bottom: 1px solid rgba(255, 56, 92, 0.14);
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    flex-shrink: 0;
}
.sub-pay-modal-shell .sub-pay-modal__pin {
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 2;
    width: 38px;
    height: 38px;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(145deg, #ff8fa3 0%, var(--brand) 55%, var(--brand-dark) 100%);
    border: 2px solid #fff;
    color: #fff;
    font-size: 0.88rem;
    line-height: 1;
    pointer-events: none;
    box-shadow: 0 6px 18px rgba(255, 56, 92, 0.28);
}
.sub-pay-modal-shell .sub-pay-modal__header-text {
    width: 100%;
    padding-top: 6px;
    text-align: center;
}
.sub-pay-modal-shell .sub-pay-modal__eyebrow {
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--brand-dark);
    line-height: 1.2;
}
.sub-pay-modal-shell .sub-pay-modal__header-text h3 {
    margin: 3px 0 0;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--text);
    line-height: 1.2;
}
.sub-pay-modal-shell .sub-pay-modal__close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 3;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(255, 56, 92, 0.18);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.96);
    color: var(--text-soft);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: var(--transition);
}
.sub-pay-modal-shell .sub-pay-modal__close:hover {
    border-color: var(--brand);
    color: var(--brand);
    background: #fff;
}
.sub-pay-modal-shell .sub-pay-modal__body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 12px 14px 10px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.sub-pay-modal-shell .sub-pay-modal__plan {
    margin: 0;
    padding: 12px 14px;
    text-align: center;
    background: linear-gradient(165deg, #fff 0%, #fff5f7 100%);
    border-radius: var(--r-md);
    border: 1px solid rgba(255, 56, 92, 0.16);
}
.sub-pay-modal-shell .sub-pay-modal__plan-head h4 {
    margin: 0 0 4px;
    font-size: 1rem;
    font-weight: 800;
    color: var(--text);
}
.sub-pay-modal-shell .sub-pay-modal__price {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--brand-dark);
    line-height: 1.1;
}
.sub-pay-modal-shell .sub-pay-modal__features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 10px;
    margin-top: 10px;
    text-align: left;
}
.sub-pay-modal-shell .sub-pay-modal__features:empty {
    display: none;
}
.sub-pay-modal-shell #selected-plan-features .feature-item {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 0.72rem;
    color: var(--text-soft);
    margin: 0;
    line-height: 1.3;
}
.sub-pay-modal-shell #selected-plan-features .feature-item i.fa-check {
    color: var(--brand);
    font-size: 0.68rem;
    margin-top: 2px;
}
.sub-pay-modal-shell #selected-plan-features .feature-item i.fa-times {
    color: #ef4444;
    font-size: 0.68rem;
    margin-top: 2px;
}
.sub-pay-modal-shell .sub-pay-modal__promo {
    margin-top: 10px;
}
.sub-pay-modal-shell .promo-applied {
    background: var(--brand-soft);
    border: 1px solid rgba(255, 56, 92, 0.2);
    border-radius: 999px;
    padding: 6px 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.76rem;
    color: var(--brand-dark);
    font-weight: 600;
}
.sub-pay-modal-shell .sub-pay-modal__notices {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.sub-pay-modal-shell .sub-pay-modal__notice {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 9px 11px;
    border-radius: var(--r-md);
    border: 1px solid var(--border);
    background: var(--surface);
}
.sub-pay-modal-shell .sub-pay-modal__notice i {
    color: var(--brand);
    font-size: 0.82rem;
    margin-top: 1px;
    flex-shrink: 0;
}
.sub-pay-modal-shell .sub-pay-modal__notice p {
    margin: 0;
    font-size: 0.74rem;
    color: var(--text-soft);
    line-height: 1.35;
}
.sub-pay-modal-shell .sub-pay-modal__notice--soft {
    background: var(--bg);
}
.sub-pay-modal-shell .no-auto-renewal-content strong {
    display: block;
    font-size: 0.76rem;
    color: var(--text);
    font-weight: 700;
    margin-bottom: 2px;
}
.sub-pay-modal-shell .no-auto-renewal-content p {
    margin: 0;
    font-size: 0.72rem;
    color: var(--text-muted);
    line-height: 1.3;
}
.sub-pay-modal-shell .sub-pay-modal__pay {
    margin: 0;
}
.sub-pay-modal-shell .sub-pay-modal__pay-title {
    margin: 0 0 8px;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 6px;
}
.sub-pay-modal-shell .sub-pay-modal__pay-title i {
    color: var(--brand);
    font-size: 0.78rem;
}
.sub-pay-modal-shell #sumup-card-container {
    width: 100%;
    max-width: none;
    min-height: 128px;
    margin: 0;
    padding: 12px;
    box-sizing: border-box;
    background: var(--surface);
    border-radius: var(--r-md);
    border: 1px solid var(--border);
    position: relative;
}
.sub-pay-modal-shell #sumup-card-container * {
    box-sizing: border-box;
}
.sub-pay-modal-shell .sub-pay-modal__loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px 10px;
    color: var(--text-muted);
    text-align: center;
    gap: 8px;
}
.sub-pay-modal-shell .sub-pay-modal__loading p {
    margin: 0;
    font-size: 0.8rem;
    color: var(--text-soft);
}
.sub-pay-modal-shell .sub-pay-modal__loading small {
    font-size: 0.72rem;
    color: var(--text-muted);
}
.sub-pay-modal-shell .sub-pay-modal__spinner {
    width: 28px;
    height: 28px;
    border: 3px solid rgba(255, 56, 92, 0.15);
    border-top-color: var(--brand);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}
.sub-pay-modal-shell #sumup-card-container input,
.sub-pay-modal-shell #sumup-card-container select,
.sub-pay-modal-shell #sumup-card-container button {
    font-size: 14px !important;
    padding: 8px 12px !important;
    margin: 4px 0 !important;
    border-radius: 8px !important;
    border: 1px solid var(--border) !important;
    height: auto !important;
    line-height: 1.4 !important;
}
.sub-pay-modal-shell #sumup-card-container .form-group,
.sub-pay-modal-shell #sumup-card-container .form-row {
    margin-bottom: 8px !important;
}
.sub-pay-modal-shell #sumup-card-container label {
    font-size: 12px !important;
    margin-bottom: 4px !important;
    font-weight: 600 !important;
}
.sub-pay-modal-shell #sumup-card-container .btn-payment,
.sub-pay-modal-shell #sumup-card-container button[type="submit"] {
    padding: 10px 18px !important;
    font-size: 14px !important;
    height: auto !important;
    line-height: 1.4 !important;
    border-radius: var(--r-pill) !important;
    background: var(--brand) !important;
    border-color: var(--brand) !important;
}
.sub-pay-modal-shell .abo-terms-notice {
    margin-top: 10px;
}
.sub-pay-modal-shell .abo-terms-box {
    padding: 9px 11px;
    background: var(--bg);
    border-radius: var(--r-md);
    border: 1px solid var(--border);
    font-size: 0.72rem;
    color: var(--text-muted);
    line-height: 1.4;
}
.sub-pay-modal-shell .abo-terms-box i {
    color: var(--brand);
    margin-right: 6px;
    font-size: 0.76rem;
}
.sub-pay-modal-shell .abo-terms-box a {
    color: var(--brand);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.sub-pay-modal-shell .sub-pay-modal__footer {
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    background: var(--surface);
    border-top: 1px solid var(--border);
    flex-shrink: 0;
}
.sub-pay-modal-shell .sub-pay-modal__back {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: var(--r-pill);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-soft);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}
.sub-pay-modal-shell .sub-pay-modal__back:hover {
    border-color: var(--brand);
    color: var(--brand);
}
.sub-pay-modal-shell .btn-payment {
    background: var(--brand);
    color: #fff;
    border: none;
    padding: 11px 16px;
    border-radius: var(--r-pill);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 4px 12px rgba(255, 56, 92, 0.25);
    margin-top: 8px;
    width: 100%;
}
.sub-pay-modal-shell .btn-payment:hover {
    background: var(--brand-dark);
}
.sub-pay-modal-shell .btn-payment.btn-free {
    font-weight: 700;
}
@media (min-width: 769px) {
    .sub-pay-modal-shell.sub-pay-modal {
        align-items: center;
        padding: 20px;
    }
    .sub-pay-modal-shell .sub-pay-modal__panel {
        border-radius: var(--r-lg);
        border-bottom: 1px solid rgba(255, 56, 92, 0.22);
        max-height: min(82dvh, 640px);
        animation: subPayFadeIn 0.28s ease;
    }
    @keyframes subPayFadeIn {
        from { transform: translateY(12px) scale(0.98); opacity: 0; }
        to { transform: none; opacity: 1; }
    }
    .sub-pay-modal-shell .sub-pay-modal__footer {
        border-radius: 0 0 var(--r-lg) var(--r-lg);
    }
}
@media (max-width: 768px) {
    .sub-pay-modal-shell .sub-pay-modal__features {
        grid-template-columns: 1fr;
    }
    .sub-pay-modal-shell .sub-pay-modal__panel {
        width: 100%;
        max-height: min(88dvh, 720px);
    }
}
html[data-theme="dark"] .sub-pay-modal-shell .sub-pay-modal__panel {
    background: var(--surface, #0d0d0d);
    border-color: rgba(255, 56, 92, 0.28);
}
html[data-theme="dark"] .sub-pay-modal-shell .sub-pay-modal__header {
    background: linear-gradient(165deg, #1a1012 0%, #0d0d0d 55%, #1a0a0f 100%);
}
html[data-theme="dark"] .sub-pay-modal-shell .sub-pay-modal__plan {
    background: linear-gradient(165deg, #141414 0%, #1a1012 100%);
}
html[data-theme="dark"] .sub-pay-modal-shell .sub-pay-modal__close {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
    color: var(--text-soft);
}
html[data-theme="dark"] .sub-pay-modal-shell #sumup-card-container {
    background: var(--surface-2, #161616);
}

/* Modal upsell Premium (même coque que paiement abonnement) */
.premium-upsell-modal.sub-pay-modal-shell {
    cursor: pointer;
}
.premium-upsell-modal .sub-pay-modal__panel {
    cursor: default;
}
.premium-upsell-modal__body {
    text-align: center;
    padding: 12px 16px 12px !important;
}
.premium-upsell-modal__title {
    margin: 0 0 8px;
    font-size: 1.02rem;
    font-weight: 800;
    color: var(--text);
    line-height: 1.3;
}
.premium-upsell-modal__desc {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--text-soft);
}
.premium-upsell-modal__note {
    margin: 12px 0 0;
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--text-soft);
}
.premium-upsell-modal__note strong {
    color: var(--text);
}
.premium-upsell-modal__extras {
    margin-top: 14px;
    text-align: left;
}
.premium-upsell-modal__extras .premium-sell-box {
    margin: 0;
}
.premium-upsell-modal__footer {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.sub-pay-modal-shell.premium-upsell-modal .sub-pay-modal__cta {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    border-radius: var(--r-pill);
    border: none;
    background: var(--brand);
    color: #fff;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(255, 56, 92, 0.25);
    transition: var(--transition);
}
.sub-pay-modal-shell.premium-upsell-modal .sub-pay-modal__cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(255, 56, 92, 0.32);
}

.main.abonnement .promo-section {
    background: var(--surface);
    border-radius: var(--r-lg);
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border);
}
.main.abonnement .promo-header {
    text-align: center;
    margin-bottom: 20px;
}
.main.abonnement .promo-header h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.main.abonnement .promo-header p {
    color: #64748b;
    margin: 0;
}
.main.abonnement .promo-form {
    max-width: 400px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}
.main.abonnement .promo-input-group {
    display: flex;
    gap: 10px;
    width: 100%;
    min-width: 0;
    align-items: stretch;
}
.main.abonnement .promo-input {
    flex: 1 1 0;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 1rem;
    transition: border-color 0.2s ease;
}
.main.abonnement .promo-input:focus {
    outline: none;
    border-color: #ff385c;
    box-shadow: 0 0 0 3px rgba(255, 56, 92, 0.12);
}
.main.abonnement .btn-promo {
    flex: 0 0 auto;
    background: linear-gradient(135deg, #ff385c, #e11d48);
    color: white;
    border: none;
    padding: 12px 14px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    white-space: nowrap;
}
.main.abonnement .btn-promo:hover {
    background: linear-gradient(135deg, #e11d48, #be123c);
    transform: translateY(-1px);
}
.main.abonnement .promo-info {
    text-align: center;
    padding: 20px;
    background: var(--brand-soft);
    border-radius: 12px;
    border: 2px solid rgba(255, 56, 92, 0.2);
}
.main.abonnement .promo-info h4 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--brand-dark);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.main.abonnement .promo-details {
    margin-bottom: 16px;
}
.main.abonnement .promo-code {
    font-size: 1.2rem;
    font-weight: 700;
    color: #ff385c;
    margin-bottom: 4px;
}
.main.abonnement .promo-description {
    color: #64748b;
    font-size: 0.9rem;
}
.main.abonnement .price-breakdown {
    background: white;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
}
.main.abonnement .price-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}
.main.abonnement .price-row.total {
    border-top: 1px solid #e2e8f0;
    padding-top: 8px;
    margin-top: 8px;
    font-weight: 700;
    font-size: 1.1rem;
    color: #1e293b;
}
.main.abonnement .discount-badge {
    background: var(--brand);
    color: white;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 600;
    margin-right: 4px;
}
.main.abonnement .btn-remove-promo {
    background: #ef4444;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 auto;
}
.main.abonnement .btn-remove-promo:hover {
    background: #dc2626;
    transform: translateY(-1px);
}
.main.abonnement .promo-help {
    margin-top: 12px;
    padding: 8px 12px;
    background: #f8fafc;
    border-radius: 6px;
    font-size: 0.85rem;
    color: #64748b;
    display: flex;
    align-items: center;
    gap: 8px;
}
.main.abonnement .promo-help i {
    color: var(--brand);
    font-size: 0.9rem;
}
.main.abonnement .promo-applicable {
    margin-top: 8px;
    padding: 6px 10px;
    background: var(--brand-soft);
    border-radius: 4px;
    font-size: 0.85rem;
    color: var(--brand-dark);
    display: flex;
    align-items: center;
    gap: 6px;
}
.main.abonnement .promo-applicable i {
    color: var(--brand);
    font-size: 0.8rem;
}
@media (max-width: 520px) {
    .main.abonnement .promo-section {
        padding: 16px;
    }
    .main.abonnement .promo-input-group {
        flex-direction: column;
        gap: 10px;
    }
    .main.abonnement .btn-promo {
        width: 100%;
    }
}
.main.abonnement .free-subscription-info {
    text-align: center;
    padding: 20px;
    background: var(--brand-soft);
    border-radius: 12px;
    border: 2px solid rgba(255, 56, 92, 0.25);
    margin: 20px 0;
}
.main.abonnement .free-badge {
    background: var(--brand);
    color: white;
    padding: 12px 20px;
    border-radius: 25px;
    font-size: 1.2rem;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}
.main.abonnement .free-badge i {
    font-size: 1.4rem;
}
.main.abonnement .free-description {
    color: var(--text-soft);
    font-size: 1rem;
    margin: 15px 0;
    line-height: 1.5;
}
.main.abonnement .btn-activate-free {
    background: var(--brand);
    color: white;
    border: none;
    padding: 15px 30px;
    border-radius: var(--r-pill);
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 4px 15px rgba(255, 56, 92, 0.28);
}
.main.abonnement .btn-activate-free:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 56, 92, 0.35);
    background: var(--brand-dark);
}
.main.abonnement .btn-activate-free:active {
    transform: translateY(0);
}
.main.abonnement .alert {
    padding: 16px;
    border-radius: 8px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.main.abonnement .alert-danger {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #dc2626;
}
.main.abonnement .alert-success {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #166534;
}
.main.abonnement .renewal-info {
    background: var(--bg);
    border-radius: var(--r-md);
    padding: 16px;
    margin-top: 24px;
    border: 1px solid var(--border);
}
.main.abonnement .renewal-content {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text-soft);
}
.main.abonnement .renewal-content i {
    color: var(--brand);
    font-size: 0.85rem;
    flex-shrink: 0;
}
.main.abonnement .renewal-content p {
    margin: 0;
    font-size: 0.82rem;
    font-weight: 500;
    line-height: 1.4;
}
.main.abonnement .plan-card.featured .price {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 14px 0 10px 0;
    margin-bottom: 12px;
    box-shadow: none;
    transition: background 0.2s;
}
.main.abonnement .gift-notification {
    background: linear-gradient(135deg, #ff385c 0%, #e11d48 100%);
    color: white;
    padding: 16px 20px;
    border-radius: var(--r-lg);
    margin: 20px 0;
    box-shadow: 0 10px 40px rgba(255, 56, 92, 0.35);
    border: 2px solid rgba(255, 255, 255, 0.3);
    position: relative;
    overflow: hidden;
}
.main.abonnement .gift-notification::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%);
    animation: aboShine 2s infinite;
}
@keyframes aboShine {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}
.main.abonnement .gift-content {
    display: flex;
    align-items: center;
    gap: 15px;
    position: relative;
    z-index: 1;
}
.main.abonnement .gift-icon {
    font-size: 2.5rem;
    animation: aboBounce 2s infinite;
}
@keyframes aboBounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-10px); }
    60% { transform: translateY(-5px); }
}
.main.abonnement .gift-text h3 {
    margin: 0 0 6px 0;
    font-size: 1.2rem;
    font-weight: 700;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.main.abonnement .gift-text p {
    margin: 0 0 4px 0;
    font-size: 0.95rem;
    opacity: 0.95;
}
.main.abonnement .gift-action {
    font-weight: 600;
    color: #fff !important;
    font-size: 1rem !important;
    margin-top: 8px !important;
    opacity: 0.95;
}
.main.abonnement .btn-activate-gift {
    background: #fff;
    color: var(--brand-dark);
    border: none;
    border-radius: var(--r-pill);
    padding: 12px 24px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.12);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.main.abonnement .btn-activate-gift:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.16);
    background: #fff;
}
.main.abonnement .btn-activate-gift:active {
    transform: translateY(0);
}
.main.abonnement .activation-status {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 15px;
    padding: 10px 15px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.3);
}
.main.abonnement .activation-status i {
    color: #4ade80;
    font-size: 1.2rem;
    animation: aboPulse 2s infinite;
}
.main.abonnement .activation-status span {
    font-weight: 600;
    font-size: 0.95rem;
}
@keyframes aboPulse {
    0% { opacity: 1; }
    50% { opacity: 0.7; }
    100% { opacity: 1; }
}
@media (max-width: 768px) {
.main.abonnement {
        padding: 16px 16px calc(96px + env(safe-area-inset-bottom, 0px));
        margin-top: 0;
    }
.main.abonnement .page-header h1 {
        font-size: 2rem;
    }
.main.abonnement .subscription-plans {
        grid-template-columns: 1fr;
        gap: 20px;
    }
.main.abonnement .plan-card {
        padding: 24px;
    }
.main.abonnement .upgrade-section {
        padding: 24px;
    }
.main.abonnement .example-item {
        flex-direction: column;
        gap: 8px;
    }
    .main.abonnement .support-actions {
        flex-direction: column;
        align-items: center;
    }
    .main.abonnement .faq-question h4 {
        font-size: 0.8rem;
    }
.main.abonnement .faq-question {
        padding: 16px;
    }
.main.abonnement .faq-answer p {
        padding: 16px;
        font-size: 0.9rem;
    }
}

/* ============================================================
   Messagerie
   - messages.php : liste (mobile)
   - conversation.php : chat ; ≥1024px = sidebar + fil (une seule page, pas de « messages desktop »)
   ============================================================ */
.messages-sidebar { display: none; }

/* Mobile conversation : colonne flex (évite display:contents qui casse sticky + clics header) */
body.page-conversation .messages-two-pane {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    width: 100%;
    height: 100%;
}

/* Mobile conversation uniquement : pas de nav site (header chat + retour). */
@media (max-width: 768px) {
    body.page-conversation.has-two-pane .app-nav { display: none; }
}

@media (min-width: 1024px) {
    body.page-conversation.has-two-pane { overflow: hidden; }

    body.page-conversation.has-two-pane .main.conversation-page {
        padding: 0 !important;
        margin: 0 !important;
        max-width: none !important;
        height: calc(100dvh - var(--nav-h, 68px)) !important;
        max-height: calc(100dvh - var(--nav-h, 68px)) !important;
        overflow: hidden !important;
    }

    body.page-conversation.has-two-pane .messages-two-pane {
        display: flex;
        position: fixed;
        top: var(--nav-h, 68px);
        left: 0;
        right: 0;
        bottom: 0;
        height: auto !important;
        max-height: none !important;
        overflow: hidden;
        background: #fff;
        z-index: 1;
    }

    /* Sidebar : liste des conversations */
    .messages-sidebar {
        display: flex;
        flex-direction: column;
        width: 360px;
        flex-shrink: 0;
        height: 100%;
        background: #fff;
        border-right: 1px solid var(--border, #ececf0);
        overflow: hidden;
    }
    .messages-sidebar-head {
        display: flex; align-items: center; gap: 10px;
        padding: 16px 18px 10px;
    }
    .messages-sidebar-title { font-size: 1.35rem; font-weight: 800; margin: 0; color: var(--text, #222); }

    .messages-sidebar-tabs { display: flex; gap: 8px; padding: 0 18px 10px; }
    .messages-sidebar-tab {
        flex: 1; border: 1px solid var(--border, #ececf0); background: #fff; color: var(--text, #444);
        padding: 8px 10px; border-radius: 999px; font-size: 0.85rem; font-weight: 600; cursor: pointer;
        display: inline-flex; align-items: center; justify-content: center; gap: 6px; transition: all .15s ease;
    }
    .messages-sidebar-tab:hover { border-color: var(--brand, #e31c5f); color: var(--brand, #e31c5f); }
    .messages-sidebar-tab.active { background: var(--brand, #e31c5f); border-color: var(--brand, #e31c5f); color: #fff; }
    .messages-sidebar-tab-count { background: rgba(0,0,0,.08); padding: 1px 8px; border-radius: 999px; font-size: 0.72rem; font-weight: 700; }
    .messages-sidebar-tab.active .messages-sidebar-tab-count { background: rgba(255,255,255,.28); }

    .messages-sidebar-search { position: relative; padding: 0 18px 12px; }
    .messages-sidebar-search i { position: absolute; left: 32px; top: 50%; transform: translateY(-50%); color: var(--text-muted, #9ca3af); font-size: 0.85rem; pointer-events: none; }
    .messages-sidebar-search input {
        width: 100%; border: 1px solid var(--border, #ececf0); border-radius: 999px;
        padding: 10px 14px 10px 34px; font-size: 0.9rem; background: var(--bg, #f7f7f7); color: var(--text, #222);
        outline: none; transition: border-color .15s ease, box-shadow .15s ease;
    }
    .messages-sidebar-search input:focus { border-color: var(--brand, #e31c5f); background: #fff; box-shadow: 0 0 0 3px rgba(227,28,95,.12); }

    .messages-sidebar-list { flex: 1; overflow-y: auto; padding: 4px 8px 16px; }
    .messages-sidebar-empty { text-align: center; color: var(--text-muted, #9ca3af); padding: 40px 16px; }
    .messages-sidebar-empty i { font-size: 1.8rem; margin-bottom: 8px; display: block; }
    .messages-sidebar-empty p { margin: 0; font-size: 0.9rem; }

    .messages-sidebar-card {
        display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 14px;
        text-decoration: none; color: inherit; transition: background .15s ease;
    }
    .messages-sidebar-card:hover { background: var(--bg, #f7f7f7); }
    .messages-sidebar-card.active,
    .messages-sidebar-card.is-premium-priority { background: var(--brand-soft, #fdeaf1); }

    .messages-sidebar-avatar {
        position: relative; width: 50px; height: 50px; flex-shrink: 0;
        border-radius: 50%; overflow: visible;
    }
    .messages-sidebar-avatar img,
    .messages-sidebar-avatar-fallback {
        width: 50px; height: 50px; border-radius: 50%; object-fit: cover; display: block;
    }
    .messages-sidebar-avatar-fallback {
        display: flex; align-items: center; justify-content: center;
        background: linear-gradient(135deg, #ff385c, #e31c5f); color: #fff; font-weight: 700; font-size: 0.9rem;
    }

    .messages-sidebar-card-body { flex: 1; min-width: 0; }
    .messages-sidebar-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
    .messages-sidebar-name {
        font-weight: 700; font-size: 0.92rem; color: var(--text, #222);
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        display: inline-flex; align-items: center; gap: 6px;
    }
    .messages-sidebar-time { font-size: 0.72rem; color: var(--text-muted, #9ca3af); flex-shrink: 0; }
    .messages-sidebar-card-bottom { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 2px; }
    .messages-sidebar-preview {
        font-size: 0.83rem; color: var(--text-muted, #717171);
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0;
    }
    .messages-sidebar-preview strong { color: var(--text, #444); font-weight: 600; }
    .messages-sidebar-meta { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
    .messages-sidebar-badge {
        background: var(--brand, #e31c5f); color: #fff; min-width: 18px; height: 18px; padding: 0 5px;
        border-radius: 999px; font-size: 0.7rem; font-weight: 700;
        display: inline-flex; align-items: center; justify-content: center;
    }
    /* .messages-sidebar-fav — voir PHASE 4 app.css */

    /* Pane conversation : occupe le reste, positionnement statique */
    .messages-two-pane .conversation-page-container {
        position: static !important;
        transform: none !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        margin: 0 !important;
        width: auto !important;
        max-width: none !important;
        flex: 1;
        min-width: 0;
        min-height: 0;
        height: 100%;
        max-height: 100%;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        background: #fff;
    }
    .messages-two-pane .conversation-page-messages-area {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        padding-bottom: 0 !important;
    }
    .messages-two-pane .conversation-page-header {
        position: sticky;
        top: 0;
        z-index: 5;
        flex-shrink: 0;
    }
    .messages-two-pane .conversation-page-input-area {
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        flex-shrink: 0;
        z-index: 5;
    }
    .messages-two-pane .conversation-page-back-btn { display: none !important; }

    body.page-conversation.has-two-pane .app-bottom-nav { display: none; }
    body.page-conversation.has-two-pane { padding-bottom: 0; }

    /* Grand écran : panneau vide à droite tant qu’aucune conversation n’est choisie */
    body.page-conversation .messages-two-pane .messages-chat-pane {
        display: flex;
        flex: 1;
        flex-direction: column;
        min-width: 0;
        height: 100%;
        background: #fff;
    }
    body.page-conversation .messages-two-pane .messages-chat-empty {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 32px 24px;
        color: var(--text-muted, #9ca3af);
    }
    body.page-conversation .messages-two-pane .messages-chat-empty i {
        font-size: 2.5rem;
        margin-bottom: 12px;
        color: var(--border, #e5e7eb);
    }
    body.page-conversation .messages-two-pane .messages-chat-empty h3 {
        margin: 0 0 8px;
        font-size: 1.1rem;
        font-weight: 800;
        color: var(--text, #222);
    }
    body.page-conversation .messages-two-pane .messages-chat-empty p {
        margin: 0;
        font-size: 0.9rem;
        max-width: 280px;
    }
}

/* ============================================================
   AVATARS — Placeholders "sans photo" HARMONISÉS (toutes pages)
   - Style identique partout : initiales, même police, couleur unie neutre.
   - La FORME (rond / rectangle) est héritée du conteneur :
     ronds = header, messages, conversation, sidebar, témoignages profil.
     rectangulaires = cartes membres + photo principale du profil.
   ============================================================ */
.no-photo-placeholder,
.conversation-avatar .no-photo-placeholder,
.conversation-page-avatar .no-photo-placeholder,
.conversation-page-avatar-bubble .no-photo-placeholder,
.messages-sidebar-avatar-fallback,
.author-avatar-wrap .no-photo-placeholder,
.profile-modal-overlay .profile-modal-photo-fallback,
.annonce-detail-author-photo .no-photo-placeholder,
.membres-no-photo-placeholder,
.profil-no-photo-placeholder,
.visiteur-no-photo {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--ph-bg) !important;
    color: var(--ph-text) !important;
    font-family: var(--font) !important;
    font-size: var(--ph-size, 0.76rem) !important;
    font-weight: 700 !important;
    font-style: normal !important;
    text-transform: uppercase !important;
    letter-spacing: -0.04em !important;
    line-height: 1 !important;
    -webkit-font-smoothing: antialiased;
}

.no-photo-placeholder span,
.conversation-avatar .no-photo-placeholder span,
.conversation-page-avatar .no-photo-placeholder span,
.conversation-page-avatar-bubble .no-photo-placeholder span,
.membres-no-photo-placeholder span,
.profil-no-photo-placeholder span,
.profile-modal-overlay .profile-modal-photo-fallback span {
    font: inherit !important;
    letter-spacing: inherit !important;
    line-height: 1 !important;
}

/* Tailles par contexte (avatars ronds) */
.author-avatar-wrap--sm .no-photo-placeholder,
.no-photo-placeholder--sm { --ph-size: 0.65rem !important; }
.author-avatar-wrap--md .no-photo-placeholder { --ph-size: 0.72rem !important; }
.conversation-avatar .no-photo-placeholder { --ph-size: 0.76rem !important; }
.messages-sidebar-avatar-fallback { --ph-size: 0.8rem !important; }
.conversation-page-avatar .no-photo-placeholder,
.conversation-page-avatar .no-photo-placeholder--header { --ph-size: 0.78rem !important; }
.author-avatar-wrap--lg .no-photo-placeholder,
.annonce-detail-author-photo .no-photo-placeholder { --ph-size: 0.95rem !important; }
.profile-modal-overlay .profile-modal-photo-fallback { --ph-size: 1rem !important; }

/* Grands formats (membres carré, profil) */
.membres-no-photo-placeholder,
.membres-no-photo-placeholder span { --ph-size: clamp(1.45rem, 5.5vw, 2.15rem) !important; }
.profil-no-photo-placeholder,
.profil-no-photo-placeholder span { --ph-size: clamp(1.6rem, 6vw, 2.35rem) !important; }
.profil-no-photo-placeholder.small,
.profil-no-photo-placeholder.small span { --ph-size: 0.72rem !important; }

/* Classes genre conservées en HTML — couleur unie identique pour tous */
.is-male,
.is-female,
.is-trans,
.is-couple {
    background: var(--ph-bg) !important;
    color: var(--ph-text) !important;
}

/* ============================================================
   SALONS — Liste + chat (chrome app-nav / app.css)
   ============================================================ */
body.page-salons { background: var(--bg); }
body.page-salons:has(.modal-overlay.active) .salons-fab-mobile,
body.page-salon-chat .salons-fab-mobile { display: none !important; }

/* Chat salon : plein écran, pas de footer ni nav bas */
body.page-salon-chat {
    overflow: hidden;
    background: var(--bg);
    padding-bottom: 0 !important;
}
@media (max-width: 768px) {
    body.page-salon-chat .app-nav { display: none !important; }
}
body.page-salon-chat .site-footer { display: none !important; }

/* Modales salons : coins + ombre alignés sur le reste du site */
.page-salons .modal-card,
.page-salon-chat .modal-card {
    border-radius: var(--r-lg, 16px);
    border-color: var(--border);
    box-shadow: var(--shadow-lg);
}
.page-salons .modal-head:not(.spiitz-modal-header),
.page-salon-chat .modal-head:not(.spiitz-modal-header) {
    background: var(--surface);
    border-bottom-color: var(--border);
}
.page-salons .btn-secondary,
.page-salon-chat .btn-secondary {
    border-radius: var(--r-pill, 999px);
}

/* ============================================================
   PRIORITÉ MAX — header mobile (icônes compactes, avatar plus visible)
   ============================================================ */
@media (max-width: 768px) {
    .app-nav .app-nav__actions {
        gap: 8px !important;
    }
    .app-nav .app-nav__actions .app-nav__icon,
    .app-nav .app-nav__actions .notification-bell-btn,
    .app-nav .app-nav__actions #messages-link {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        min-height: 28px !important;
        max-width: 28px !important;
        max-height: 28px !important;
    }
    .app-nav .app-nav__actions .app-nav__icon i,
    .app-nav .app-nav__actions #messages-link i {
        font-size: 0.72rem !important;
    }
    .app-nav .app-nav__actions .app-badge {
        min-width: 14px !important;
        height: 14px !important;
        font-size: 8px !important;
    }
    .app-nav .app-nav__avatar,
    .app-nav #profile-toggle {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;
        margin-left: 6px !important;
    }
    .app-nav .app-nav__avatar img,
    .app-nav .app-nav__avatar .app-nav__avatar-fallback,
    .app-nav .app-nav__avatar .no-photo-placeholder--header {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;
    }
    .app-nav .app-nav__actions > .btn {
        font-size: 0.74rem !important;
        padding: 7px 11px !important;
        line-height: 1.2 !important;
        font-weight: 600 !important;
        min-height: 32px;
    }
}

/* Modales blocage / déblocage utilisateur (profil, conversation) */
.user-block-modal {
    position: fixed;
    inset: 0;
    z-index: 10380;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.28s ease, visibility 0.28s ease;
}
.user-block-modal.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.user-block-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(16, 24, 40, 0.52);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.user-block-modal__panel {
    position: relative;
    z-index: 1;
    width: min(100%, 440px);
    background: var(--surface, #fff);
    border: 1px solid var(--border, #ececf0);
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    padding: 22px 20px calc(20px + env(safe-area-inset-bottom));
    box-shadow: var(--shadow-lg);
    transform: translateY(100%);
    transition: transform 0.34s cubic-bezier(0.16, 1, 0.3, 1);
}
.user-block-modal.active .user-block-modal__panel {
    transform: translateY(0);
}
.user-block-modal__close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 36px;
    height: 36px;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--surface);
    color: var(--text-soft);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.user-block-modal__close:hover {
    border-color: var(--brand);
    color: var(--brand);
}
.user-block-modal__icon {
    width: 56px;
    height: 56px;
    margin: 4px auto 14px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.35rem;
}
.user-block-modal__icon--block {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    box-shadow: 0 8px 20px rgba(217, 119, 6, 0.28);
}
.user-block-modal__icon--unblock {
    background: linear-gradient(135deg, #34d399, #059669);
    box-shadow: 0 8px 20px rgba(5, 150, 105, 0.24);
}
.user-block-modal__title {
    margin: 0 0 8px;
    text-align: center;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -0.02em;
    line-height: 1.25;
}
.user-block-modal__lead {
    margin: 0 0 14px;
    text-align: center;
    font-size: 0.88rem;
    color: var(--text-soft);
    line-height: 1.45;
}
.user-block-modal__list {
    list-style: none;
    margin: 0 0 18px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.user-block-modal__list li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--r-md);
    background: var(--bg);
    border: 1px solid var(--border);
    font-size: 0.82rem;
    color: var(--text);
    line-height: 1.35;
}
.user-block-modal__list li i {
    color: var(--brand);
    width: 16px;
    text-align: center;
    flex-shrink: 0;
}
.user-block-modal__actions {
    display: flex;
    gap: 10px;
}
.user-block-modal__btn {
    flex: 1;
    min-height: 42px;
    border-radius: var(--r-pill);
    font-size: 0.88rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: var(--transition);
}
.user-block-modal__btn--secondary {
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
}
.user-block-modal__btn--secondary:hover {
    border-color: var(--brand);
    color: var(--brand);
}
.user-block-modal__btn--danger {
    border: none;
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: #fff;
    box-shadow: 0 6px 16px rgba(220, 38, 38, 0.28);
}
.user-block-modal__btn--danger:hover {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
}
.user-block-modal__btn--success {
    border: none;
    background: linear-gradient(135deg, #34d399, #059669);
    color: #fff;
    box-shadow: 0 6px 16px rgba(5, 150, 105, 0.24);
}
.user-block-modal__btn--success:hover {
    background: linear-gradient(135deg, #10b981, #047857);
}
body.page-profil .profil-mobile-menu-item--danger {
    color: #dc2626;
}
body.page-profil .profil-mobile-menu-item--danger i {
    color: #dc2626;
}
@media (min-width: 769px) {
    .user-block-modal {
        align-items: center;
        padding: 20px;
    }
    .user-block-modal__panel {
        border-radius: var(--r-lg);
        padding: 24px 22px;
        transform: translateY(16px) scale(0.98);
        opacity: 0;
    }
    .user-block-modal.active .user-block-modal__panel {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

/* Médias privés (cloud OVH via media.php) — anti-enregistrement */
.spiitz-media-guard {
    position: relative;
    display: inline-block;
    line-height: 0;
    max-width: 100%;
    -webkit-touch-callout: none;
}

.spiitz-media-shield {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: transparent;
    -webkit-touch-callout: none;
    touch-action: manipulation;
}

.spiitz-protected-media,
.spiitz-media-guard img,
.spiitz-media-guard video {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
    user-drag: none;
}

.spiitz-media-guard img,
.spiitz-media-guard video {
    pointer-events: none;
}

/* Avatars profil / membre / conversation / annonces — anti-sélection */
.header-profile-photo,
.desktop-nav-profile-photo,
.censor-avatar,
.conversation-page-avatar-bubble img,
.conversations-sidebar-avatar img,
.messages-conversation-avatar img,
.member-card-avatar img,
.review-author-photo,
.profil-photo,
.profil-photo-item img,
.photo-modal-image,
.message-image,
.conversation-page-message-image img,
.annonce-detail-modal-photo,
.annonce-detail-page-photo,
.annonce-detail-photo-lightbox img,
#annonceDetailPhotoLightboxImg,
#modalImage,
#photoModalImage,
.permission-avatar img,
.visiteur-photo,
.author-avatar {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
}

/* Lieux et images salon échangées : téléchargement autorisé */
.spiitz-public-media img,
.spiitz-public-media video {
    -webkit-touch-callout: default;
    -webkit-user-select: auto;
    user-select: auto;
    -webkit-user-drag: auto;
}

video.spiitz-protected-media,
audio.spiitz-protected-media {
    -webkit-touch-callout: none;
}

/* ---------- Recadrage photo profil ---------- */
body.profile-photo-crop-open {
    overflow: hidden;
}

body.profile-photo-crop-open .profile-photo-crop-modal {
    padding: 12px;
}

@media (max-width: 768px) {
    body.profile-photo-crop-open .profile-photo-crop-modal {
        padding: 0;
        align-items: stretch;
    }

    body.profile-photo-crop-open .profile-photo-crop-modal__card {
        width: 100%;
        max-width: none;
        min-height: 100dvh;
        max-height: 100dvh;
        border-radius: 0;
        border-left: none;
        border-right: none;
        display: flex;
        flex-direction: column;
    }

    body.profile-photo-crop-open .profile-photo-crop-modal__hint {
        flex: 0 0 auto;
    }

    body.profile-photo-crop-open .profile-photo-crop-zoom,
    body.profile-photo-crop-open .profile-photo-crop-modal__actions,
    body.profile-photo-crop-open .profile-photo-crop-modal__head {
        flex: 0 0 auto;
    }

    body.profile-photo-crop-open .profile-photo-crop-viewport-wrap {
        flex: 1 1 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 0;
        padding: 0 12px;
    }
}

.profile-photo-crop-viewport-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.profile-photo-crop-modal {
    position: fixed;
    inset: 0;
    z-index: 12050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.profile-photo-crop-modal[hidden] {
    display: none !important;
}

.profile-photo-crop-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(17, 24, 39, 0.62);
    backdrop-filter: blur(4px);
}

.profile-photo-crop-modal__card {
    position: relative;
    z-index: 1;
    width: min(420px, 100%);
    max-height: calc(100dvh - 24px);
    overflow: auto;
    background: var(--surface);
    border-radius: var(--r-lg);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    padding: 16px 16px 14px;
}

.profile-photo-crop-modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
}

.profile-photo-crop-modal__head h3 {
    font-size: 1.05rem;
    font-weight: 800;
}

.profile-photo-crop-modal__close {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: var(--bg);
    color: var(--text);
    cursor: pointer;
}

.profile-photo-crop-modal__hint {
    margin: 0 0 12px;
    font-size: 0.82rem;
    color: var(--text-soft);
}

.profile-photo-crop-viewport {
    position: relative;
    width: 100%;
    aspect-ratio: var(--profil-photo-aspect, 4 / 5);
    max-height: min(var(--profil-photo-max-height-mobile, 62vh), 540px);
    overflow: hidden;
    flex-shrink: 0;
    border-radius: var(--r-md);
    background: #111827;
    touch-action: none;
    cursor: grab;
}

.profile-photo-crop-viewport:active {
    cursor: grabbing;
}

.profile-photo-crop-viewport img {
    user-select: none;
    -webkit-user-drag: none;
}

.profile-photo-crop-frame {
    position: absolute;
    inset: 0;
    pointer-events: none;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.42);
    border: 2px solid rgba(255, 255, 255, 0.92);
    border-radius: var(--r-md);
}

.profile-photo-crop-zoom {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 12px 0 14px;
    color: var(--text-soft);
    font-size: 0.82rem;
}

.profile-photo-crop-zoom input[type="range"] {
    flex: 1;
    accent-color: var(--brand);
}

.profile-photo-crop-modal__actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.profile-photo-crop-modal__actions .btn {
    min-width: 110px;
}

/* ---------- Albums privés — modales & chat ---------- */
.album-share-modal,
.pa-viewer-modal,
.private-album-viewer-modal {
    position: fixed;
    inset: 0;
    z-index: 12040;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.album-share-modal {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.album-share-modal.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.pa-viewer-modal[hidden],
.private-album-viewer-modal[hidden] {
    display: none !important;
}

body.private-album-viewer-open {
    overflow: hidden;
}

body.private-album-viewer-open .photo-modal,
body.page-conversation.private-album-viewer-open .conversation-page-image-modal,
body.private-album-viewer-open .conversation-page-image-modal {
    z-index: 12060;
}

.album-share-backdrop,
.pa-viewer-backdrop,
.private-album-viewer-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(17, 24, 39, 0.62);
    backdrop-filter: blur(4px);
}

.album-share-content,
.pa-viewer-card,
.private-album-viewer-card {
    position: relative;
    z-index: 1;
    width: min(460px, 100%);
    max-height: calc(100dvh - 24px);
    overflow: auto;
    background: var(--surface);
    border-radius: var(--r-lg);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    padding: 16px;
}

.album-share-header,
.pa-viewer-head,
.private-album-viewer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.album-share-close,
.pa-viewer-close,
.private-album-viewer-head button {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: var(--bg);
    cursor: pointer;
}

.album-share-hint,
.pa-viewer-status,
.private-album-viewer-status {
    margin: 0 0 12px;
    font-size: 0.85rem;
    color: var(--text-soft);
}

.album-share-list {
    display: grid;
    gap: 10px;
}

.album-share-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    width: 100%;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--bg);
    cursor: pointer;
    text-align: left;
}

.album-share-item.is-disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.album-share-item-name {
    font-weight: 700;
}

.album-share-item-meta {
    font-size: 0.82rem;
    color: var(--text-soft);
}

.album-share-empty,
.pa-viewer-empty,
.pa-viewer-loading,
.private-album-viewer-empty,
.private-album-viewer-loading {
    text-align: center;
    padding: 24px 12px;
    color: var(--text-soft);
}

.conversation-album-grant-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid #dbeafe;
    background: linear-gradient(135deg, #eff6ff 0%, #fff 100%);
    max-width: min(320px, 100%);
    min-width: 0;
}

.conversation-album-grant-card.is-consumed {
    opacity: 0.72;
    border-color: var(--border);
    background: var(--bg);
}

.conversation-album-grant-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #dbeafe;
    color: #2563eb;
    flex-shrink: 0;
}

.conversation-album-grant-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.conversation-album-grant-body span {
    font-size: 0.8rem;
    color: var(--text-soft);
}

.conversation-album-grant-btn {
    margin-left: auto;
    border: none;
    border-radius: 999px;
    padding: 8px 12px;
    background: var(--brand);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
}

.conversation-album-grant-status {
    margin-left: auto;
    font-size: 0.78rem;
    color: var(--text-soft);
    white-space: nowrap;
    flex-shrink: 0;
}

.pa-viewer-grid,
.private-album-viewer-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.pa-viewer-photo,
.private-album-viewer-item {
    border: none;
    padding: 0;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    aspect-ratio: 1;
}

.pa-viewer-photo img,
.private-album-viewer-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (max-width: 767px) {
    .conversation-album-grant-card {
        flex-wrap: wrap;
    }

    .conversation-album-grant-btn,
    .conversation-album-grant-status {
        margin-left: 0;
        width: 100%;
        text-align: center;
    }
}

@media (min-width: 768px) {
    .pa-viewer-grid,
    .private-album-viewer-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* ============================================================
   Modal Premium — design unifié (en-tête doré, harmonisé SPIITZ)
   ============================================================ */
.spiitz-modal-header--premium {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 52%, #fffbeb 100%) !important;
    border-bottom: 1px solid rgba(245, 158, 11, 0.22);
}
.spiitz-modal-header--premium .spiitz-modal-eyebrow {
    color: #b45309;
}
.spiitz-modal-header--premium .spiitz-modal-close:hover {
    border-color: #f59e0b;
    color: #b45309;
    background: rgba(255, 255, 255, 0.92);
}

.premium-modal {
    position: fixed;
    inset: 0;
    z-index: 10051;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(16, 24, 40, 0.48);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s ease;
    font-family: var(--font, "Inter", sans-serif);
}
.premium-modal.show,
.premium-modal.active {
    display: flex;
    opacity: 1;
    pointer-events: auto;
}

.premium-modal-backdrop {
    position: absolute;
    inset: 0;
    cursor: pointer;
}

.premium-modal-content {
    position: relative;
    width: min(100%, 460px);
    max-height: 90dvh;
    overflow-y: auto;
    background: var(--surface, #fff);
    border-radius: var(--r-lg, 18px);
    border: 1px solid var(--border, #ececf0);
    box-shadow: var(--shadow-lg, 0 24px 48px rgba(16, 24, 40, 0.2));
    transform: scale(0.94) translateY(8px);
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
.premium-modal.show .premium-modal-content,
.premium-modal.active .premium-modal-content {
    transform: scale(1) translateY(0);
}

.premium-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 16px;
    border-bottom: 1px solid rgba(245, 158, 11, 0.18);
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 52%, #fffbeb 100%);
    border-radius: var(--r-lg, 18px) var(--r-lg, 18px) 0 0;
    flex-shrink: 0;
}
.premium-modal-header .spiitz-modal-header__left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1 1 auto;
}
.premium-modal-header .spiitz-modal-header__brand {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}
.premium-modal-header-badge {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--gold, #fbbf24), #f59e0b);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.82rem;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.32);
}
.premium-modal-header .spiitz-modal-eyebrow {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #b45309;
}
.premium-modal-header h3 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--text, #1f2430);
    line-height: 1.2;
}

.premium-modal-close {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border: 1px solid var(--border, #ececf0);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.88);
    color: var(--text-soft, #6b7280);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
    transition: var(--transition, 0.2s ease);
}
.premium-modal-close:hover {
    border-color: #f59e0b;
    color: #b45309;
    background: #fff;
}

.premium-modal-body {
    padding: 22px 20px;
    text-align: center;
}
.premium-modal-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--gold, #fbbf24), #f59e0b);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 12px 28px rgba(245, 158, 11, 0.28);
}
.premium-modal-icon i {
    font-size: 1.75rem;
    color: #fff;
}
.premium-modal-body h4,
.premium-modal-title {
    margin: 0 0 10px;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--text, #1f2430);
    line-height: 1.3;
}
.premium-modal-body p,
.premium-modal-description {
    margin: 0 0 12px;
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--text-soft, #6b7280);
}

.premium-note {
    margin-top: 14px;
    padding: 12px 14px;
    text-align: left;
    background: #fffbeb;
    border-radius: var(--r-md, 14px);
    border-left: 3px solid var(--gold, #fbbf24);
    font-size: 0.84rem;
    line-height: 1.45;
    color: var(--text-soft, #6b7280);
}
.premium-note strong {
    color: var(--text, #1f2430);
}

.premium-sell-box {
    margin-top: 14px;
    border: 1px solid rgba(251, 191, 36, 0.35);
    background: var(--bg, #f7f7f8);
    border-radius: var(--r-md, 14px);
    padding: 12px 14px;
    text-align: left;
}
.premium-sell-title {
    margin: 0 0 8px;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text, #1f2430);
}
.premium-sell-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.premium-sell-list li {
    display: flex;
    gap: 8px;
    font-size: 0.82rem;
    color: var(--text-soft, #6b7280);
    line-height: 1.4;
}
.premium-sell-list i {
    color: var(--gold, #fbbf24);
    margin-top: 2px;
    flex-shrink: 0;
}

.premium-modal-footer {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    padding: 0 20px 20px;
    flex-wrap: wrap;
}
.premium-modal-btn {
    padding: 11px 20px;
    border: none;
    border-radius: var(--r-pill, 999px);
    font-weight: 800;
    font-size: 0.88rem;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.premium-modal-btn.secondary {
    background: var(--bg, #f3f4f6);
    color: var(--text-soft, #6b7280);
}
.premium-modal-btn.secondary:hover {
    background: #e5e7eb;
}
.premium-modal-btn.primary,
.premium-modal-btn:not(.secondary) {
    background: linear-gradient(135deg, var(--gold, #fbbf24), #f59e0b);
    color: #1f2937;
    box-shadow: 0 8px 20px rgba(245, 158, 11, 0.28);
}
.premium-modal-btn.primary:hover,
.premium-modal-btn:not(.secondary):hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(245, 158, 11, 0.34);
}

@media (max-width: 520px) {
    .premium-modal-footer {
        flex-direction: column;
    }
    .premium-modal-btn {
        width: 100%;
    }
}


/* ============================================================
   PHASE 3 — CSS inline fusionnés
   ============================================================ */

/* --- HEADER MOBILE (ex-header.css) --- */
/* Styles pour la photo de profil dans le header */
.header-profile-photo {
    width: 46px !important;
    height: 46px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    aspect-ratio: 1 / 1 !important;
    flex-shrink: 0 !important;
}

/* Empêche l'écrasement du fallback initiales sur mobile (header legacy uniquement) */
header.header #profile-toggle {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;
    padding: 0 !important;
    margin-right: 0 !important;
    overflow: visible !important;
}
header.header #profile-toggle .no-photo-placeholder--header {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
    line-height: 1 !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
header.header #profile-toggle .no-photo-placeholder--header span {
    display: block !important;
    line-height: 1 !important;
}

/* Style pour le lien messages */
.login-btn[href] {
    text-decoration: none;
    width: 46px !important;
    height: 46px !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Style spécifique pour l'icône de messages */
#messages-link i {
    font-size: 16px !important;
}

/* Réduire la taille des boutons notification et messages */
.notification-bell-btn,
.notification-icon,
.login-btn {
    font-size: 13px !important;
    margin-right: 8px !important;
    width: 34px !important;
    height: 34px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    transition: all 0.3s ease !important;
}

/* Réduire la taille des badges de notification */
.notification-badge {
    font-size: 9px !important;
    min-width: 16px !important;
    height: 16px !important;
    padding: 2px 4px !important;
    border-radius: 8px !important;
    font-weight: bold !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
    top: -2px !important;
    right: -2px !important;
    background: #ef4444 !important;
    color: white !important;
    border: 1px solid white !important;
}

.notification-icon:hover,
.login-btn:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    transform: scale(1.1) !important;
}

/* Supprimer le fond pour les icônes de notification et messages */
.notification-bell-btn,
.notification-icon,
.login-btn[href*="messages.php"] {
    background: transparent !important;
}

/* Indicateur "salon actif" */
#active-salon-link{
    position: relative;
}
#active-salon-link::after{
    content:'';
    position:absolute;
    top:8px;
    right:6px;
    width:8px;
    height:8px;
    border-radius:50%;
    background:#f97316; /* orange discret */
    border:2px solid #fff;
    box-shadow:0 2px 6px rgba(0,0,0,0.15);
    display:none;
}
#active-salon-link.has-news::after{
    display:block;
    animation: salonNewsPulse 0.95s ease-in-out infinite;
}
@keyframes salonNewsPulse{
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.18); opacity: 0.7; }
}

/* Bouton flottant desktop: Revenir au salon */
#activeSalonFloat {
    position: fixed;
    right: 18px;
    top: 92px;
    z-index: 10050;
    display: none;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid #e5e7eb;
    background: #fff;
    color: #111827;
    font-weight: 900;
    font-size: 13px;
    text-decoration: none;
    box-shadow: 0 10px 26px rgba(17,24,39,0.12);
}
#activeSalonFloat:hover { background: #f9fafb; }
#activeSalonFloat i { font-size: 14px; }
#activeSalonFloat .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #f97316;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    display: none;
}
#activeSalonFloat.has-news .dot{
    display: inline-block;
    animation: salonNewsPulse 0.95s ease-in-out infinite;
}
@media (min-width: 769px) {
    #activeSalonFloat { display: none; } /* affiché via JS seulement */
}

.notification-bell-btn:hover,
.notification-icon:hover,
.login-btn[href*="messages.php"]:hover {
    background: transparent !important;
    transform: scale(1.1) !important;
}

/* Header fixe en haut de l'écran - MOBILE SEULEMENT (header.php legacy) */
header.header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1000 !important;
    background: white !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 60px;
    height: 60px !important;
}

/* Masquer le header legacy sur desktop */
@media (min-width: 769px) {
    header.header {
        display: none !important;
    }
}

/* Pas de padding-top sur desktop */
@media (min-width: 769px) {
    body:not(.auth-body) {
        padding-top: 0 !important;
    }
}

header.header .logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    line-height: 0;
}
header.header .logo .spiitz-brand-logo-wrap .spiitz-wordmark,
header.header .logo .spiitz-wordmark {
    display: block;
    height: 28px;
    width: auto;
    max-width: 140px;
    object-fit: contain;
    object-position: center center;
}
header.header .logo .spiitz-brand-badge {
    top: -8px;
    right: -4px;
    font-size: 0.4rem;
}

/* Badge Beta */
.beta-badge {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    font-size: 10px;
    font-weight: bold;
    padding: 2px 4px;
    border-radius: 8px;
    line-height: 1;
    display: inline-block;
    box-shadow: 0 2px 4px rgba(102, 126, 234, 0.3);
    transform: translateY(-8px);
}

/* Badge Alpha */
.alpha-badge {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    font-size: 10px;
    font-weight: bold;
    padding: 2px 4px;
    border-radius: 8px;
    line-height: 1;
    display: inline-block;
    box-shadow: 0 2px 4px rgba(16, 185, 129, 0.3);
    position: absolute;
    left: calc(100% + 4px);
    top: -6px;
    transform: none;
    margin-left: 0;
}

    /* Styles pour le bouton retour - NOUVELLE CLASSE */
.spiitz-back-button {
    background: transparent !important;
    border: none !important;
    color: black !important;
    font-size: 1rem !important;
    cursor: pointer !important;
    padding: 6px !important;
    border-radius: 50% !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    position: absolute !important;
    left: 15px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

.spiitz-back-button:hover {
    background: transparent !important;
    transform: translateY(-50%) scale(1.1) !important;
    color: #333 !important;
}

.spiitz-back-button:active {
    transform: translateY(-50%) scale(0.95) !important;
    color: #000 !important;
}

/* Règle globale pour la nouvelle classe */
    header.header .spiitz-back-button,
    button.spiitz-back-button,
    header.header .spiitz-back-button {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    background: transparent !important;
    border: none !important;
    color: black !important;
}

/* Grouper les boutons de gauche */
.header-left-buttons {
    position: absolute;
    left: 60px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Grouper les boutons de droite */
.header-right-buttons {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Responsive - MOBILE SEULEMENT */
@media (max-width: 768px) {
    header.header {
        padding: 0 50px;
        height: 55px !important;
    }

    /* Espace pour header legacy mobile uniquement (pas app-nav / body.app) */
    body:has(> header.header) {
        padding-top: 40px !important;
    }

    .spiitz-back-button {
        left: 10px;
        width: 28px;
        height: 28px;
        font-size: 0.9rem;
        display: flex !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .notification-bell-btn,
    .notification-icon,
    .login-btn {
        width: 30px !important;
        height: 30px !important;
        font-size: 12px !important;
        margin-right: 5px !important;
    }

    /* Taille spécifique pour l'icône de messages sur mobile */
    #messages-link i {
        font-size: 14px !important;
    }

    .header-profile-photo {
        width: 30px !important;
        height: 30px !important;
    }
    header.header #profile-toggle .header-profile-photo {
        width: 46px !important;
        height: 46px !important;
        min-width: 46px !important;
        min-height: 46px !important;
        aspect-ratio: 1 / 1 !important;
        border-radius: 50% !important;
        flex-shrink: 0 !important;
        display: block !important;
    }

    .notification-badge {
        font-size: 8px !important;
        min-width: 14px !important;
        height: 14px !important;
        padding: 1px 3px !important;
        top: -1px !important;
        right: -1px !important;
    }

    /* Position spécifique pour le badge de messages sur mobile */
    #messages-badge {
        top: 8px !important;
        right : 5px !important;
    }

    .header-left-buttons {
        left: 50px;
        gap: 6px;
    }

    .header-right-buttons {
        right: 10px;
        gap: 6px;
    }
}

/* --- DESKTOP NAV INLINE (ex-desktop-nav-inline.css) --- */
@media (min-width: 769px) {
    .desktop-nav-gap {
        height: 12px;
        width: 100%;
    }
}


/* Badge Beta pour la navigation desktop */
.beta-badge-desktop {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    font-size: 8px;
    font-weight: bold;
    padding: 1px 3px;
    border-radius: 6px;
    line-height: 1;
    display: inline-block;
    box-shadow: 0 1px 3px rgba(102, 126, 234, 0.3);
    transform: translateY(-12px);
    margin-left: 2px;
}

/* Badge Alpha pour la navigation desktop */
.alpha-badge-desktop {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    font-size: 8px;
    font-weight: bold;
    padding: 1px 3px;
    border-radius: 6px;
    line-height: 1;
    display: inline-block;
    box-shadow: 0 1px 3px rgba(16, 185, 129, 0.3);
    position: absolute;
    right: -14px;
    top: -8px;
    transform: none;
    margin-left: 0;
}

.desktop-nav-logo-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.desktop-nav-logo-link .spiitz-brand-logo-wrap .desktop-nav-wordmark,
.desktop-nav-wordmark {
    display: block;
    height: 34px;
    width: auto;
    max-width: 155px;
    object-fit: contain;
    object-position: center center;
}
.desktop-nav-logo-link .spiitz-brand-badge {
    top: -8px;
    right: -4px;
    font-size: 0.4rem;
}

.desktop-nav-profile-fallback{
    display:flex;
    align-items:center;
    justify-content:center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color:#fff;
    font-weight:700;
    font-size:12px;
    text-transform:uppercase;
    aspect-ratio: 1 / 1;
    line-height: 1;
    overflow: hidden;
    box-sizing: border-box;
}
.desktop-nav-profile-fallback span{
    display:block;
    line-height:1;
}

/* --- ANNONCE DETAIL — expirée + staff (ex-inline-2/4) --- */
/* Annonce expirée — boutons page détail */
.annonce-detail-main.expired .annonce-detail-respond-btn,
.annonce-detail-main.expired .annonce-detail-mobile-respond-btn,
.annonce-detail-main.expired .header-desktop-back-main-btn,
.annonce-detail-main.expired .favorite-btn,
.annonce-detail-main.expired .annonce-detail-share-btn,
.annonce-detail-main.expired .header-desktop-back-action-btn:not([onclick*="openAdvertisementReportModal"]) {
    opacity: 0.5;
    pointer-events: none;
    cursor: not-allowed;
}
.annonce-detail-main.expired .annonce-detail-respond-btn,
.annonce-detail-main.expired .annonce-detail-mobile-respond-btn,
.annonce-detail-main.expired .header-desktop-back-main-btn {
    display: inline-flex;
}

/* Modération staff */
.staff-fab{position:fixed;right:16px;bottom:88px;z-index:10020;border:none;border-radius:999px;padding:12px 14px;background:#111827;color:#fff;font-weight:900;box-shadow:0 10px 24px rgba(0,0,0,.25);cursor:pointer}
.staff-modal{position:fixed;inset:0;display:none;z-index:10030}
.staff-modal.active{display:block}
.staff-modal-bg{position:absolute;inset:0;background:rgba(2,6,23,.58);backdrop-filter:blur(2px)}
.staff-modal-card{position:relative;z-index:1;width:min(94vw,900px);max-height:86vh;overflow:auto;margin:6vh auto;background:#fff;border-radius:14px;border:1px solid #e5e7eb}
.staff-modal-head{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:1px solid #f1f5f9}
.staff-modal-head h3{margin:0;font-size:15px;font-weight:900}
.staff-modal-close{border:none;background:#f3f4f6;border-radius:999px;width:32px;height:32px;cursor:pointer}
.staff-tabs{display:flex;gap:6px;padding:10px 12px;border-bottom:1px solid #f1f5f9;flex-wrap:wrap}
.staff-tab-btn{border:1px solid #d1d5db;background:#fff;color:#111827;border-radius:999px;padding:6px 10px;font-size:12px;font-weight:800;cursor:pointer}
.staff-tab-btn.active{background:#111827;color:#fff;border-color:#111827}
.staff-tab{display:none;padding:10px 12px}
.staff-tab.active{display:block}
.staff-grid{display:grid;gap:10px}
.staff-grid input,.staff-grid textarea,.staff-grid select{width:100%;border:1px solid #d1d5db;border-radius:10px;padding:8px 10px;font-size:13px}
.staff-actions{display:flex;gap:8px;flex-wrap:wrap}
.staff-btn{border:none;background:#111827;color:#fff;border-radius:10px;padding:8px 12px;font-size:12px;font-weight:900;cursor:pointer}
.staff-btn.alt{background:#374151}
.staff-btn.warn{background:#92400e}
.staff-btn.danger{background:#991b1b}
.staff-photo-row{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid #e5e7eb;border-radius:10px;padding:8px}
.staff-photo-row img{width:54px;height:54px;object-fit:cover;border-radius:8px}

/* --- MEMBRES — modales premium/âge (ex-membres-inline.css) --- */
/* Styles pour l'icône premium */
.premium-indicator {
    color: #fbbf24;
    margin-left: 0.25rem;
    font-size: 0.75rem;
}

/* Modal premium */
.membres-premium-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    display: none;
}

.membres-premium-modal.active {
    display: flex;
}

.membres-premium-modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
}

.membres-premium-modal-content {
    position: relative;
    margin: auto;
    background: white;
    border-radius: 16px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    max-width: 400px;
    width: 90%;
    overflow: hidden;
    animation: modalSlideUp 0.3s ease-out;
}

.membres-premium-modal-header {
    padding: 1.5rem;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 52%, #fffbeb 100%);
    color: #1f2937;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(245, 158, 11, 0.22);
}

.membres-premium-modal-header h3 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 800;
    color: #1f2937;
}

.membres-premium-modal-close {
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid #ececf0;
    color: #6b7280;
    font-size: 1rem;
    cursor: pointer;
    padding: 0.35rem;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.membres-premium-modal-close:hover {
    background: #fff;
    border-color: #f59e0b;
    color: #b45309;
}

.membres-premium-modal-body {
    padding: 2rem;
}

.premium-required-message {
    text-align: center;
}

.premium-required-icon {
    margin-bottom: 1rem;
}

.premium-required-icon i {
    font-size: 3rem;
    color: #fbbf24;
    animation: pulse 2s infinite;
}

.premium-required-message h4 {
    margin: 0 0 1rem 0;
    color: #1f2937;
    font-size: 1.25rem;
    font-weight: 600;
}

.premium-required-message p {
    margin: 0 0 1.5rem 0;
    color: #6b7280;
    line-height: 1.5;
}

.btn-upgrade-premium {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: white;
    border: none;
    border-radius: 12px;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-upgrade-premium:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(251, 191, 36, 0.4);
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

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

/* Aide pour le filtre âge */
.membres-age-help {
    margin-top: 1rem;
    padding: 0.75rem;
    background: #f3f4f6;
    border-radius: 8px;
    font-size: 0.875rem;
    color: #6b7280;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.membres-age-help i {
    color: #3b82f6;
    font-size: 1rem;
}

/* Modal filtre par âge */
.membres-age-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    display: none;
}

.membres-age-modal.active {
    display: flex;
    align-items: center;
    justify-content: center;
}

.membres-age-modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
}

.membres-age-modal-content {
    position: relative;
    background: white;
    border-radius: 16px;
    max-width: 400px;
    width: 90%;
    max-height: 80vh;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    animation: modalSlideIn 0.3s ease;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.membres-age-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem;
    border-bottom: 1px solid #e5e7eb;
}

.membres-age-modal-header h3 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: #1f2937;
}

.membres-age-modal-close {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: #f3f4f6;
    color: #6b7280;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.membres-age-modal-close:hover {
    background: #e5e7eb;
    color: #374151;
}

.membres-age-modal-body {
    padding: 1.5rem;
}

.membres-age-range-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.membres-age-input-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.membres-age-input-group label {
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
}

.membres-age-input {
    width: 100%;
    padding: 0.75rem;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    font-size: 1rem;
    transition: border-color 0.2s ease;
}

.membres-age-input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.membres-age-modal-footer {
    display: flex;
    gap: 1rem;
    padding: 1.5rem;
    border-top: 1px solid #e5e7eb;
    background: #f9fafb;
}

.membres-btn-reset-age,
.membres-btn-apply-age {
    flex: 1;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

.membres-btn-reset-age {
    background: white;
    color: #6b7280;
    border: 2px solid #e5e7eb;
}

.membres-btn-reset-age:hover {
    background: #f3f4f6;
    border-color: #d1d5db;
}

.membres-btn-apply-age {
    background: #3b82f6;
    color: white;
}

.membres-btn-apply-age:hover {
    background: #2563eb;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.25);
}


/* ============================================================
   PHASE 4 — abonnement / accès / favoris (CSS fusionnés)
   ============================================================ */

/* --- Favoris : boutons cœur (ex-favorites.css + favorites-system.css) --- */
/* ---------- Base ---------- */
.favorite-btn,
.action-btn.favorite-btn,
.annonce-detail-favorite-btn.favorite-btn,
.messages-sidebar-fav,
.profil-mobile-favorite-btn.favorite-btn,
.profil-mobile-menu-item.favorite-btn,
.header-desktop-back-action-btn.favorite-btn,
.lieu-detail-page-action-btn-hero.favorite-btn {
--fav-size: 36px;
--fav-icon: 0.95rem;
width: var(--fav-size);
height: var(--fav-size);
min-width: var(--fav-size);
min-height: var(--fav-size);
padding: 0;
border-radius: 50%;
border: 1px solid var(--border, #ececf0);
background: var(--surface, #fff);
color: var(--text-muted, #9ca3af);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
line-height: 1;
transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
position: relative;
overflow: visible;
}

.favorite-btn i,
.messages-sidebar-fav i {
font-size: var(--fav-icon);
line-height: 1;
pointer-events: none;
transition: color 0.2s ease, transform 0.2s ease;
}

/* Non liké */
.favorite-btn:not(.favorited):not(.active),
.messages-sidebar-fav:not(.active) {
color: var(--text-muted, #9ca3af);
background: var(--surface, #fff);
border-color: var(--border, #ececf0);
}

.favorite-btn:not(.favorited):not(.active) .far.fa-heart,
.favorite-btn:not(.favorited):not(.active) i.far {
color: var(--text-soft, #717171);
}

.favorite-btn:not(.favorited):not(.active):hover,
.messages-sidebar-fav:not(.active):hover {
border-color: var(--brand, #ff385c);
background: var(--brand-soft, #ffe9ef);
color: var(--brand, #ff385c);
transform: scale(1.05);
}

.favorite-btn:not(.favorited):not(.active):hover i,
.messages-sidebar-fav:not(.active):hover i {
color: var(--brand, #ff385c);
}

/* Liké */
.favorite-btn.favorited,
.favorite-btn.active,
.messages-sidebar-fav.active,
.profil-mobile-favorite-btn.favorite-btn.favorited,
.profil-mobile-favorite-btn.favorite-btn.active {
border-color: var(--brand, #ff385c);
background: var(--brand-soft, #ffe9ef);
color: var(--brand, #ff385c);
box-shadow: 0 0 0 1px rgba(255, 56, 92, 0.12);
}

.favorite-btn.favorited i,
.favorite-btn.active i,
.favorite-btn.favorited .fas.fa-heart,
.favorite-btn.active .fas.fa-heart,
.messages-sidebar-fav.active i {
color: var(--brand, #ff385c);
}

.favorite-btn.favorited:hover,
.favorite-btn.active:hover,
.messages-sidebar-fav.active:hover {
background: var(--brand, #ff385c);
border-color: var(--brand, #ff385c);
color: #fff;
transform: scale(1.05);
}

.favorite-btn.favorited:hover i,
.favorite-btn.active:hover i,
.messages-sidebar-fav.active:hover i {
color: #fff;
}

/* Tailles */
.favorite-btn.small,
.action-btn.favorite-btn {
--fav-size: 34px;
--fav-icon: 0.88rem;
}

.favorite-btn.medium {
--fav-size: 40px;
--fav-icon: 1rem;
}

.favorite-btn.large {
--fav-size: 44px;
--fav-icon: 1.05rem;
}

/* Dans la barre d’actions annonce (à côté signaler / partager) */
.action-btn.favorite-btn {
border-radius: 50%;
}

/* Détail annonce : même look, légèrement plus grand */
.annonce-detail-favorite-btn.favorite-btn {
--fav-size: 44px;
--fav-icon: 1rem;
border-radius: var(--r-md, 14px);
}

/* Lieu détail : boutons ronds du hero */
.lieu-detail-page-action-btn-hero.favorite-btn {
--fav-size: 34px;
--fav-icon: 0.88rem;
border: none;
background: rgba(255, 255, 255, 0.92);
backdrop-filter: blur(4px);
color: var(--text-soft, #717171);
}

.lieu-detail-page-action-btn-hero.favorite-btn.favorited,
.lieu-detail-page-action-btn-hero.favorite-btn.active {
background: var(--brand-soft, #ffe9ef);
color: var(--brand, #ff385c);
box-shadow: 0 2px 10px rgba(255, 56, 92, 0.2);
}

.lieu-detail-page-action-btn-hero.favorite-btn.favorited:hover,
.lieu-detail-page-action-btn-hero.favorite-btn.active:hover {
background: var(--brand, #ff385c);
color: #fff;
}

/* Sidebar messages : petit cœur */
.messages-sidebar-fav {
--fav-size: 28px;
--fav-icon: 0.78rem;
width: var(--fav-size);
height: var(--fav-size);
min-width: var(--fav-size);
min-height: var(--fav-size);
border: none;
background: transparent;
padding: 0;
}

.messages-sidebar-fav:not(.active) {
color: #cbd5e1;
}

.messages-sidebar-fav.active {
background: transparent;
box-shadow: none;
}

/* Liste messages : bouton discret dans la ligne */
.conversation-actions .favorite-btn {
border: none;
background: transparent;
--fav-size: 26px;
--fav-icon: 0.72rem;
}

.conversation-actions .favorite-btn.favorited,
.conversation-actions .favorite-btn.active {
background: var(--brand-soft, #ffe9ef);
}

/* Visibilité au survol / favori (comportement conservé) */
.conversation-actions .favorite-btn:not(.favorited):not(.active) {
display: none;
}
.conversation-card.show-actions .conversation-actions .favorite-btn,
.conversation-card:hover .conversation-actions .favorite-btn,
.conversation-actions .favorite-btn.favorited,
.conversation-actions .favorite-btn.active {
display: inline-flex;
}

/* Profil mobile */
.profil-mobile-favorite-btn.favorite-btn {
--fav-size: 50px;
--fav-icon: 1.1rem;
border-radius: var(--r-md, 14px);
}

.profil-mobile-favorite-btn.favorite-btn.favorited,
.profil-mobile-favorite-btn.favorite-btn.active {
background: var(--brand, #ff385c);
border-color: var(--brand, #ff385c);
color: #fff;
}

.profil-mobile-favorite-btn.favorite-btn.favorited i,
.profil-mobile-favorite-btn.favorite-btn.active i {
color: #fff;
}

/* Désactivé / chargement */
.favorite-btn:disabled,
.favorite-btn.disabled,
.favorite-btn.loading {
opacity: 0.45;
cursor: not-allowed;
pointer-events: none;
transform: none !important;
}

.favorite-btn.loading i {
animation: spin 1s linear infinite;
}

/* Variantes héritées : neutralisées (même design) */
.favorite-btn.minimal,
.favorite-btn.floating,
.favorite-btn.with-text {
border: 1px solid var(--border, #ececf0);
background: var(--surface, #fff);
}

.favorite-btn.minimal.favorited,
.favorite-btn.floating.favorited,
.favorite-btn.minimal.active,
.favorite-btn.floating.active {
border-color: var(--brand, #ff385c);
background: var(--brand-soft, #ffe9ef);
color: var(--brand, #ff385c);
}

/* Notifications (toast favoris) */
.favorite-notification {
position: fixed;
top: 20px;
right: 20px;
padding: 12px 20px;
border-radius: var(--r-md, 14px);
color: #fff;
font-weight: 600;
font-family: var(--font, Inter, sans-serif);
z-index: 10000;
max-width: 300px;
box-shadow: var(--shadow-md, 0 12px 28px rgba(16, 24, 40, 0.15));
animation: slideInRight 0.3s ease-out;
}

.favorite-notification.success { background: #10b981; }
.favorite-notification.error { background: var(--brand-dark, #e11d48); }

@media (max-width: 768px) {
.favorite-notification {
top: 12px;
right: 12px;
left: 12px;
max-width: none;
}
}

.annonce-card .favorite-btn {
    position: relative;
    z-index: 2;
}

/* --- Page Mes favoris (ex-favoris.css) --- */
/* Styles spécifiques pour la page favoris */
.favoris-container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}

.favoris-header {
text-align: center;
margin-bottom: 40px;
}

.favoris-header h1 {
font-size: 2.5rem;
font-weight: 700;
color: #1a1a1a;
margin-bottom: 10px;
}

.favoris-header p {
font-size: 1.1rem;
color: #666;
margin-bottom: 20px;
}

.favoris-stats {
display: flex;
justify-content: center;
align-items: center;
gap: 30px;
margin-bottom: 30px;
flex-wrap: wrap;
}

.stat-card {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 20px;
border-radius: 16px;
text-align: center;
min-width: 120px;
box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
}

.stat-card.premium {
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
box-shadow: 0 8px 25px rgba(240, 147, 251, 0.3);
}

.stat-number {
font-size: 2rem;
font-weight: 700;
margin-bottom: 5px;
}

.stat-label {
font-size: 0.9rem;
opacity: 0.9;
}

.stat-limit {
font-size: 0.8rem;
opacity: 0.7;
margin-top: 5px;
}

.favoris-tabs {
display: flex;
justify-content: center;
margin-bottom: 40px;
border-bottom: 2px solid #f0f0f0;
}

.tab-button {
background: none;
border: none;
padding: 15px 30px;
font-size: 1.1rem;
font-weight: 600;
color: #666;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
border-radius: 8px 8px 0 0;
}

.tab-button:hover {
color: #667eea;
background: rgba(102, 126, 234, 0.1);
}

.tab-button.active {
color: #667eea;
background: white;
}

.tab-button.active::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
right: 0;
height: 2px;
background: #667eea;
}

.tab-count {
background: #667eea;
color: white;
padding: 2px 8px;
border-radius: 12px;
font-size: 0.8rem;
margin-left: 8px;
}

.tab-content {
display: none;
}

.tab-content.active {
display: block;
}

.favoris-list {
background: white;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
overflow: hidden;
margin-bottom: 30px;
}

.favori-item {
display: flex;
align-items: center;
padding: 16px;
border-bottom: 1px solid #f0f0f0;
transition: background-color 0.2s ease;
}

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

.favori-item:hover {
background-color: #fafafa;
}

.favori-image {
width: 60px;
height: 60px;
border-radius: 8px;
background: #f8f9fa;
display: flex;
align-items: center;
justify-content: center;
color: #ccc;
font-size: 1.5rem;
margin-right: 16px;
flex-shrink: 0;
overflow: hidden;
}

.favori-image img {
width: 100%;
height: 100%;
object-fit: cover;
}

.favori-image-placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: #ccc;
font-size: 1.5rem;
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

.favori-info {
flex: 1;
min-width: 0;
}

.favori-title {
font-size: 1.1rem;
font-weight: 600;
color: #333;
margin: 0 0 8px 0;
line-height: 1.3;
display: flex;
align-items: center;
gap: 8px;
}

.favori-location,
.favori-age,
.favori-user,
.favori-annonces-count {
display: flex;
align-items: center;
gap: 6px;
color: #666;
font-size: 0.9rem;
margin-bottom: 4px;
}

.favori-location i,
.favori-age i,
.favori-user i,
.favori-annonces-count i {
color: #999;
font-size: 0.8rem;
width: 14px;
}

.favori-actions {
margin-left: 16px;
}

.favori-remove-btn {
background: none;
border: none;
width: 36px;
height: 36px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s ease;
color: #e74c3c;
font-size: 1rem;
}

.favori-remove-btn:hover {
background: #e74c3c;
color: white;
transform: scale(1.1);
}

.favori-premium-badge {
background: #ffd700;
color: #333;
padding: 1px 4px;
border-radius: 3px;
font-size: 0.65rem;
font-weight: 400;
margin-left: 6px;
}

.empty-state {
text-align: center;
padding: 60px 20px;
color: #666;
}

.empty-state i {
font-size: 4rem;
color: #ddd;
margin-bottom: 20px;
}

.empty-state h3 {
font-size: 1.5rem;
margin-bottom: 10px;
color: #999;
}

.empty-state p {
font-size: 1rem;
margin-bottom: 20px;
}

.empty-state-btn {
background: #667eea;
color: white;
border: none;
padding: 12px 24px;
border-radius: 8px;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
}

.empty-state-btn:hover {
background: #5a6fd8;
transform: translateY(-2px);
}

/* Responsive */
@media (max-width: 768px) {
.favoris-container {
    padding: 15px;
}

.favoris-header h1 {
    font-size: 2rem;
}

.favoris-stats {
    gap: 15px;
}

.stat-card {
    min-width: 100px;
    padding: 15px;
}

.stat-number {
    font-size: 1.5rem;
}

.favoris-tabs {
    flex-wrap: wrap;
}

.tab-button {
    padding: 12px 20px;
    font-size: 1rem;
}

.favori-item {
    padding: 12px;
}

.favori-image {
    width: 50px;
    height: 50px;
    margin-right: 12px;
}

.favori-remove-btn {
    width: 32px;
    height: 32px;
    font-size: 0.9rem;
}
}

@media (max-width: 480px) {
.favoris-header h1 {
    font-size: 1.8rem;
}

.stat-card {
    min-width: 80px;
    padding: 12px;
}

.stat-number {
    font-size: 1.2rem;
}

.tab-button {
    padding: 10px 15px;
    font-size: 0.9rem;
}

.favori-item {
    padding: 10px;
}

.favori-image {
    width: 45px;
    height: 45px;
    margin-right: 10px;
}

.favori-image-placeholder {
    font-size: 1.2rem;
}

.favori-title {
    font-size: 1rem;
}

.favori-remove-btn {
    width: 28px;
    height: 28px;
    font-size: 0.8rem;
}
}



/* --- Abonnement promo (scopé — n'affecte pas login/register/app-nav) --- */
body.page-abonnement-promo {
    font-family: var(--font, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    margin: 0;
}

body.page-abonnement-promo .container {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    max-width: 500px;
    width: 100%;
}

body.page-abonnement-promo .header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    padding: 30px;
    text-align: center;
}

body.page-abonnement-promo .header h1 {
    font-size: 1.8rem;
    margin-bottom: 10px;
}

body.page-abonnement-promo .header p {
    opacity: 0.9;
    font-size: 0.95rem;
}

body.page-abonnement-promo .content {
    padding: 30px;
}

body.page-abonnement-promo .subscription-type {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 25px;
    text-align: center;
}

body.page-abonnement-promo .subscription-type h2 {
    color: #2c3e50;
    margin-bottom: 10px;
    font-size: 1.3rem;
}

body.page-abonnement-promo .subscription-badge {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 15px;
}

body.page-abonnement-promo .subscription-basique {
    background: #e8f5e8;
    color: #2e7d32;
}

body.page-abonnement-promo .subscription-premium {
    background: #fff3e0;
    color: #f57c00;
}

body.page-abonnement-promo .pricing-options {
    display: grid;
    gap: 15px;
    margin-bottom: 25px;
}

body.page-abonnement-promo .pricing-option {
    border: 2px solid #e9ecef;
    border-radius: 12px;
    padding: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

body.page-abonnement-promo .pricing-option:hover {
    border-color: #667eea;
    transform: translateY(-2px);
}

body.page-abonnement-promo .pricing-option.selected {
    border-color: #667eea;
    background: #f8f9ff;
}

body.page-abonnement-promo .pricing-option input[type="radio"] {
    position: absolute;
    opacity: 0;
}

body.page-abonnement-promo .pricing-option label {
    cursor: pointer;
    display: block;
}

body.page-abonnement-promo .pricing-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

body.page-abonnement-promo .pricing-title {
    font-weight: 600;
    color: #2c3e50;
}

body.page-abonnement-promo .pricing-price {
    font-size: 1.2rem;
    font-weight: 700;
    color: #667eea;
}

body.page-abonnement-promo .pricing-details {
    font-size: 0.9rem;
    color: #6c757d;
}

body.page-abonnement-promo .promo-section {
    margin-bottom: 25px;
}

body.page-abonnement-promo .promo-section h3 {
    color: #2c3e50;
    margin-bottom: 15px;
    font-size: 1.1rem;
}

body.page-abonnement-promo .promo-form {
    display: flex;
    gap: 10px;
    width: 100%;
    min-width: 0;
    align-items: stretch;
}

body.page-abonnement-promo .promo-input {
    flex: 1 1 0;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 12px;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    font-size: 14px;
    text-transform: uppercase;
}

body.page-abonnement-promo .promo-input:focus {
    outline: none;
    border-color: #667eea;
}

body.page-abonnement-promo .btn {
    padding: 12px 16px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-shrink: 0;
    white-space: nowrap;
}

body.page-abonnement-promo .btn-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
}

body.page-abonnement-promo .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

body.page-abonnement-promo .btn-success {
    background: #28a745;
    color: #fff;
}

body.page-abonnement-promo .btn-success:hover {
    background: #218838;
}

body.page-abonnement-promo .alert {
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
}

body.page-abonnement-promo .alert-success {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

body.page-abonnement-promo .alert-danger {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

body.page-abonnement-promo .promo-info {
    background: #e8f5e8;
    border: 1px solid #c3e6cb;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 25px;
}

body.page-abonnement-promo .promo-info h4 {
    color: #155724;
    margin-bottom: 15px;
    font-size: 1.1rem;
}

body.page-abonnement-promo .price-breakdown {
    display: grid;
    gap: 10px;
    margin-bottom: 20px;
}

body.page-abonnement-promo .price-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

body.page-abonnement-promo .price-row.total {
    border-top: 1px solid #c3e6cb;
    padding-top: 10px;
    font-weight: 700;
    font-size: 1.1rem;
    color: #155724;
}

body.page-abonnement-promo .discount-badge {
    background: #28a745;
    color: #fff;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
}

body.page-abonnement-promo .final-price {
    background: #28a745;
    color: #fff;
    padding: 20px;
    border-radius: 12px;
    text-align: center;
    margin-bottom: 25px;
}

body.page-abonnement-promo .final-price .amount {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 5px;
}

body.page-abonnement-promo .final-price .label {
    font-size: 0.9rem;
    opacity: 0.9;
}

body.page-abonnement-promo .proceed-btn {
    width: 100%;
    padding: 15px;
    font-size: 1.1rem;
}

@media (max-width: 480px) {
    body.page-abonnement-promo .container {
        margin: 10px;
        border-radius: 15px;
    }
    body.page-abonnement-promo .header {
        padding: 20px;
    }
    body.page-abonnement-promo .content {
        padding: 20px;
    }
    body.page-abonnement-promo .promo-form {
        flex-direction: column;
    }
    body.page-abonnement-promo .promo-form .btn {
        width: 100%;
    }
}

/* --- Abonnement success (scopé) --- */
body.page-abonnement-success {
    font-family: var(--font, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    margin: 0;
}

body.page-abonnement-success .success-container {
    background: #fff;
    border-radius: 20px;
    padding: 40px;
    max-width: 500px;
    width: 100%;
    text-align: center;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    animation: aboSuccessSlideUp 0.6s ease-out;
}

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

body.page-abonnement-success .success-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
    animation: aboSuccessBounce 0.6s ease-out 0.3s both;
}

@keyframes aboSuccessBounce {
    0%, 20%, 53%, 80%, 100% { transform: translateY(0); }
    40%, 43% { transform: translateY(-10px); }
    70% { transform: translateY(-5px); }
    90% { transform: translateY(-2px); }
}

body.page-abonnement-success .success-icon i {
    font-size: 2.5rem;
    color: #fff;
}

body.page-abonnement-success .success-title {
    font-size: 2rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 12px;
}

body.page-abonnement-success .success-subtitle {
    font-size: 1.1rem;
    color: #64748b;
    margin-bottom: 32px;
}

body.page-abonnement-success .subscription-details {
    background: #f8fafc;
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 32px;
    border: 1px solid #e2e8f0;
}

body.page-abonnement-success .subscription-type {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 16px;
}

body.page-abonnement-success .subscription-badge {
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

body.page-abonnement-success .subscription-badge.basique {
    background: #3b82f6;
    color: #fff;
}

body.page-abonnement-success .subscription-badge.premium {
    background: #f59e0b;
    color: #fff;
}

body.page-abonnement-success .subscription-info {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

body.page-abonnement-success .info-item {
    text-align: center;
}

body.page-abonnement-success .info-label {
    font-size: 0.8rem;
    color: #64748b;
    margin-bottom: 4px;
}

body.page-abonnement-success .info-value {
    font-size: 1.1rem;
    font-weight: 600;
    color: #1e293b;
}

body.page-abonnement-success .price-info {
    background: #fff;
    border-radius: 8px;
    padding: 16px;
    border: 1px solid #e2e8f0;
}

body.page-abonnement-success .price-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

body.page-abonnement-success .price-row.total {
    border-top: 1px solid #e2e8f0;
    padding-top: 8px;
    margin-top: 8px;
    font-weight: 700;
    font-size: 1.1rem;
}

body.page-abonnement-success .promo-info {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 8px;
    padding: 12px;
    margin-top: 12px;
}

body.page-abonnement-success .promo-info i {
    color: #10b981;
    margin-right: 8px;
}

body.page-abonnement-success .action-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

body.page-abonnement-success .btn {
    padding: 14px 24px;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s ease;
    border: none;
    cursor: pointer;
}

body.page-abonnement-success .btn-primary {
    background: #6366f1;
    color: #fff;
}

body.page-abonnement-success .btn-primary:hover {
    background: #5855eb;
    transform: translateY(-1px);
}

body.page-abonnement-success .btn-secondary {
    background: #f1f5f9;
    color: #374151;
    border: 1px solid #e2e8f0;
}

body.page-abonnement-success .btn-secondary:hover {
    background: #e2e8f0;
    transform: translateY(-1px);
}

body.page-abonnement-success .features-list {
    text-align: left;
    margin-top: 16px;
}

body.page-abonnement-success .feature-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 0.9rem;
    color: #374151;
}
body.page-abonnement-success .feature-item__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
body.page-abonnement-success .feature-item__label {
    font-weight: 600;
}
body.page-abonnement-success .feature-item__hint {
    font-size: 0.78rem;
    color: #64748b;
}

body.page-abonnement-success .feature-item i {
    color: #10b981;
    font-size: 0.8rem;
}

@media (max-width: 480px) {
    body.page-abonnement-success .success-container {
        padding: 24px;
    }
    body.page-abonnement-success .success-title {
        font-size: 1.5rem;
    }
    body.page-abonnement-success .subscription-info {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

/* --- Abonnement lieu (ex-abonnement-lieu.css) --- */
.abonnement-lieu-container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}

.abonnement-lieu-hero {
text-align: center;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 60px 20px;
border-radius: 20px;
margin-bottom: 40px;
}

.abonnement-lieu-hero h1 {
font-size: 2.5rem;
margin-bottom: 20px;
font-weight: 700;
}

.abonnement-lieu-hero p {
font-size: 1.2rem;
opacity: 0.9;
max-width: 600px;
margin: 0 auto;
}

.abonnement-lieu-features {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
margin-bottom: 50px;
}

.abonnement-lieu-feature {
background: white;
padding: 30px;
border-radius: 15px;
box-shadow: 0 5px 20px rgba(0,0,0,0.1);
border-left: 4px solid #f59e0b;
}

.abonnement-lieu-feature h3 {
color: #1f2937;
font-size: 1.3rem;
margin-bottom: 15px;
display: flex;
align-items: center;
gap: 10px;
}

.abonnement-lieu-feature p {
color: #6b7280;
line-height: 1.6;
}

.abonnement-lieu-feature .feature-icon {
font-size: 1.5rem;
color: #f59e0b;
}

.abonnement-lieu-pricing {
background: white;
border-radius: 20px;
padding: 40px;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
margin-bottom: 40px;
}

.abonnement-lieu-pricing h2 {
text-align: center;
color: #1f2937;
font-size: 2rem;
margin-bottom: 40px;
}

.pricing-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 30px;
}

.pricing-card {
border: 2px solid #e5e7eb;
border-radius: 15px;
padding: 30px;
text-align: center;
position: relative;
transition: all 0.3s ease;
}

.pricing-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

.pricing-card.popular {
border-color: #f59e0b;
background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
}

.pricing-card.popular::before {
content: "POPULAIRE";
position: absolute;
top: -12px;
left: 50%;
transform: translateX(-50%);
background: #f59e0b;
color: white;
padding: 5px 15px;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 600;
}

.pricing-duration {
font-size: 1.2rem;
font-weight: 600;
color: #1f2937;
margin-bottom: 10px;
}

.pricing-price {
font-size: 2.5rem;
font-weight: 700;
color: #1f2937;
margin-bottom: 5px;
}

.pricing-ht {
color: #6b7280;
font-size: 0.9rem;
margin-bottom: 20px;
}

.pricing-economy {
background: #10b981;
color: white;
padding: 8px 15px;
border-radius: 20px;
font-size: 0.9rem;
font-weight: 600;
margin-bottom: 20px;
display: inline-block;
}

.pricing-features {
list-style: none;
padding: 0;
margin: 20px 0;
}

.pricing-features li {
padding: 8px 0;
color: #6b7280;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}

.pricing-features li::before {
content: "✓";
color: #10b981;
font-weight: bold;
}

.pricing-btn {
width: 100%;
padding: 15px;
border: none;
border-radius: 10px;
font-weight: 600;
font-size: 1rem;
cursor: pointer;
transition: all 0.3s ease;
text-decoration: none;
display: inline-block;
text-align: center;
}

.pricing-btn.primary {
background: #f59e0b;
color: white;
}

.pricing-btn.primary:hover {
background: #d97706;
transform: translateY(-2px);
}

.pricing-btn.secondary {
background: #f3f4f6;
color: #374151;
}

.pricing-btn.secondary:hover {
background: #e5e7eb;
}

.abonnement-lieu-benefits {
background: #f8fafc;
border-radius: 20px;
padding: 40px;
margin-bottom: 40px;
}

.abonnement-lieu-benefits h2 {
text-align: center;
color: #1f2937;
font-size: 2rem;
margin-bottom: 30px;
}

.benefits-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}

.benefit-item {
display: flex;
align-items: center;
gap: 15px;
padding: 15px;
background: white;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.benefit-icon {
font-size: 1.5rem;
color: #f59e0b;
min-width: 30px;
}

.benefit-text {
color: #374151;
font-weight: 500;
}

.abonnement-lieu-cta {
text-align: center;
background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
color: white;
padding: 40px;
border-radius: 20px;
}

.abonnement-lieu-cta h2 {
font-size: 2rem;
margin-bottom: 20px;
}

.abonnement-lieu-cta p {
font-size: 1.1rem;
margin-bottom: 30px;
opacity: 0.9;
}

.cta-btn {
background: white;
color: #f59e0b;
padding: 15px 30px;
border: none;
border-radius: 10px;
font-weight: 600;
font-size: 1.1rem;
cursor: pointer;
transition: all 0.3s ease;
text-decoration: none;
display: inline-block;
}

.cta-btn:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

@media (max-width: 768px) {
.abonnement-lieu-hero h1 {
font-size: 2rem;
}

.pricing-grid {
grid-template-columns: 1fr;
}

.abonnement-lieu-features {
grid-template-columns: 1fr;
}
}

/* Bannières système, onboarding, landing, contact FAQ */
.spiitz-system-banner { position: sticky; top: 0; z-index: 10040; background: #fef3c7; color: #92400e; border-bottom: 1px solid #fcd34d; font-size: 0.875rem; }
.spiitz-system-banner__inner { max-width: 960px; margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center; }
.spiitz-system-banner__btn { background: #92400e; color: #fff; padding: 6px 12px; border-radius: 999px; text-decoration: none; font-weight: 600; font-size: 0.8rem; }

/* Page mon-lieu (espace propriétaire) — mobile-first compact */
.page-mon-lieu .mon-lieu-main {
    background: var(--bg);
    min-height: calc(100dvh - var(--nav-h, 56px));
}
.page-mon-lieu .mon-lieu-wrap {
    max-width: 880px;
    margin: 0 auto;
    padding: 8px 12px calc(88px + env(safe-area-inset-bottom, 0px));
    overflow-x: hidden;
}
.page-mon-lieu .mon-lieu-hero {
    margin-bottom: 10px;
}
.page-mon-lieu .mon-lieu-hero-card {
    padding: 12px;
    border-radius: var(--r-md);
    border: 1px solid var(--border);
    background: linear-gradient(145deg, rgba(124, 58, 237, 0.08) 0%, var(--surface) 55%);
    box-shadow: var(--shadow-sm);
}
.page-mon-lieu .mon-lieu-hero-top {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.page-mon-lieu .mon-lieu-hero-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: linear-gradient(135deg, #7c3aed, #a855f7);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.22);
}
.page-mon-lieu .mon-lieu-hero-text {
    flex: 1;
    min-width: 0;
}
.page-mon-lieu .mon-lieu-eyebrow {
    margin: 0 0 4px;
    font-size: 0.62rem;
    color: #7c3aed;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.page-mon-lieu .mon-lieu-eyebrow i {
    font-size: 0.58rem;
}
.page-mon-lieu .mon-lieu-hero h1 {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.3;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text);
    word-break: break-word;
}
.page-mon-lieu .mon-lieu-lead {
    margin: 8px 0 0;
    color: var(--text-soft);
    font-size: 0.75rem;
    line-height: 1.45;
}
.page-mon-lieu .mon-lieu-public-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    margin-top: 10px;
    min-height: 36px;
    padding: 7px 12px;
    font-size: 0.78rem;
    font-weight: 600;
}
.page-mon-lieu .mon-lieu-switcher {
    margin-bottom: 10px;
}
.page-mon-lieu .mon-lieu-switcher label {
    display: block;
    margin-bottom: 4px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-soft);
}
.page-mon-lieu .mon-lieu-switcher select {
    width: 100%;
    min-height: 36px;
    padding: 7px 10px;
    font-size: 16px;
    border-radius: var(--r-sm, 8px);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
}
.page-mon-lieu .mon-lieu-tabs {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    margin: 0 -12px 10px;
    padding: 0 12px 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
}
.page-mon-lieu .mon-lieu-tabs::-webkit-scrollbar {
    display: none;
}
.page-mon-lieu .mon-lieu-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    flex: 0 0 auto;
    padding: 7px 11px;
    min-height: 34px;
    border-radius: var(--r-pill);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-soft);
    text-decoration: none;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    transition: var(--transition);
}
.page-mon-lieu .mon-lieu-tab i {
    font-size: 0.7rem;
}
.page-mon-lieu .mon-lieu-tab.is-active {
    background: #7c3aed;
    border-color: #7c3aed;
    color: #fff;
    box-shadow: 0 2px 8px rgba(124, 58, 237, 0.22);
}
.page-mon-lieu .mon-lieu-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-sm);
    padding: 12px;
    margin-bottom: 10px;
}
.page-mon-lieu .mon-lieu-panel-head {
    margin-bottom: 10px;
}
.page-mon-lieu .mon-lieu-panel-head h2 {
    margin: 0 0 4px;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text);
}
.page-mon-lieu .mon-lieu-panel-head p {
    margin: 0;
    font-size: 0.74rem;
    line-height: 1.45;
    color: var(--text-soft);
}
.page-mon-lieu .mon-lieu-form-row {
    margin-bottom: 10px;
}
.page-mon-lieu .mon-lieu-form-row label {
    display: block;
    margin-bottom: 4px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-soft);
}
.page-mon-lieu .mon-lieu-form-row input[type="text"],
.page-mon-lieu .mon-lieu-form-row input[type="url"],
.page-mon-lieu .mon-lieu-form-row textarea,
.page-mon-lieu .mon-lieu-form-row select {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    font-size: 16px;
    border-radius: var(--r-sm, 8px);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
}
.page-mon-lieu .mon-lieu-form-row textarea {
    min-height: 96px;
    resize: vertical;
    line-height: 1.45;
}
.page-mon-lieu .mon-lieu-form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
}
.page-mon-lieu .mon-lieu-form-actions {
    margin-top: 4px;
    padding-top: 0;
}
.page-mon-lieu .mon-lieu-form-actions .btn {
    width: 100%;
    min-height: 38px;
    padding: 8px 14px;
    font-size: 0.82rem;
    font-weight: 600;
    justify-content: center;
}
.page-mon-lieu .mon-lieu-photo-upload {
    margin-bottom: 10px;
}
.page-mon-lieu .mon-lieu-upload-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    min-height: 38px;
    padding: 8px 12px;
    border-radius: var(--r-sm, 8px);
    border: 1px dashed #a855f7;
    background: #faf5ff;
    color: #6d28d9;
    font-weight: 600;
    font-size: 0.78rem;
    cursor: pointer;
    box-sizing: border-box;
}
.page-mon-lieu .mon-lieu-upload-btn i {
    font-size: 0.85rem;
}
.page-mon-lieu .mon-lieu-upload-btn.is-loading {
    opacity: 0.6;
    pointer-events: none;
}
.page-mon-lieu .mon-lieu-photos-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}
.page-mon-lieu .mon-lieu-photo-card {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--bg-muted, #f9fafb);
}
.page-mon-lieu .mon-lieu-photo-card.is-main {
    border-color: #a855f7;
    box-shadow: 0 0 0 1px rgba(168, 85, 247, 0.25);
}
.page-mon-lieu .mon-lieu-photo-card img {
    display: block;
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
}
.page-mon-lieu .mon-lieu-photo-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    padding: 6px;
}
.page-mon-lieu .mon-lieu-photo-btn {
    border: 0;
    background: var(--surface);
    color: var(--text);
    width: 32px;
    height: 32px;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    box-shadow: var(--shadow-sm);
}
.page-mon-lieu .mon-lieu-photo-btn--danger {
    color: #b91c1c;
}
.page-mon-lieu .mon-lieu-photo-main-badge {
    font-size: 0.65rem;
    font-weight: 700;
    color: #7c3aed;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.page-mon-lieu .mon-lieu-photo-main-badge i {
    font-size: 0.6rem;
}
.page-mon-lieu .mon-lieu-empty {
    grid-column: 1 / -1;
    margin: 0;
    padding: 18px 12px;
    text-align: center;
    color: var(--text-soft);
    font-size: 0.78rem;
    border: 1px dashed var(--border);
    border-radius: var(--r-sm, 8px);
    background: var(--bg-muted, #f9fafb);
}
.page-mon-lieu .mon-lieu-empty i {
    display: block;
    font-size: 1.1rem;
    margin-bottom: 6px;
    opacity: 0.5;
}
.page-mon-lieu .mon-lieu-toast {
    position: sticky;
    top: calc(var(--nav-h, 56px) + 6px);
    z-index: 30;
    margin-bottom: 8px;
    padding: 8px 10px;
    border-radius: var(--r-sm, 8px);
    background: #ecfdf5;
    color: #065f46;
    border: 1px solid #a7f3d0;
    font-weight: 600;
    font-size: 0.78rem;
    box-shadow: var(--shadow-sm);
}
.page-mon-lieu .mon-lieu-toast.is-error {
    background: #fef2f2;
    color: #991b1b;
    border-color: #fecaca;
}
.page-mon-lieu .mon-lieu-panel--widget .lieu-partner-widget-embed {
    margin-top: 0;
    padding: 0;
    border: 0;
    box-shadow: none;
    background: transparent;
}
.page-mon-lieu .lieu-partner-widget-embed__intro {
    font-size: 0.72rem;
    margin-bottom: 8px;
    line-height: 1.4;
}
.page-mon-lieu .lieu-partner-widget-embed__variant,
.page-mon-lieu .lieu-partner-widget-embed__tab,
.page-mon-lieu .lieu-partner-widget-embed__theme-btn {
    font-size: 0.68rem;
    padding: 4px 8px;
}
.page-mon-lieu .lieu-partner-widget-embed__toolbar {
    gap: 6px;
    margin-bottom: 8px;
}
.page-mon-lieu .lieu-partner-widget-embed__toolbar-row {
    gap: 6px;
}
.page-mon-lieu .lieu-partner-widget-embed__tabs,
.page-mon-lieu .lieu-partner-widget-embed__themes {
    padding: 2px;
}
.page-mon-lieu .lieu-partner-widget-embed__preview {
    padding: 10px 8px;
}
.page-mon-lieu .lieu-partner-widget-embed__preview-label {
    font-size: 0.62rem;
    margin-bottom: 6px;
}
.page-mon-lieu .lieu-partner-widget-embed__code {
    font-size: 0.58rem;
    line-height: 1.3;
    min-height: 64px;
    max-height: 96px;
    padding: 6px;
}
.page-mon-lieu .lieu-partner-widget-embed__copy {
    width: 100%;
    justify-content: center;
    min-height: 32px;
    padding: 6px 10px;
    font-size: 0.72rem;
}
@media (max-width: 640px) {
    .page-mon-lieu .lieu-partner-widget-embed__toolbar-row {
        flex-direction: column;
        align-items: stretch;
    }
    .page-mon-lieu .lieu-partner-widget-embed__tabs,
    .page-mon-lieu .lieu-partner-widget-embed__themes {
        width: 100%;
        justify-content: center;
    }
    .page-mon-lieu .mon-lieu-form-actions {
        position: sticky;
        bottom: calc(var(--app-bottom-nav-h, 64px) + env(safe-area-inset-bottom, 0px) + 6px);
        z-index: 20;
        margin: 10px -12px -12px;
        padding: 8px 12px;
        background: linear-gradient(to top, var(--surface) 75%, transparent);
        backdrop-filter: blur(4px);
    }
    .page-mon-lieu .mon-lieu-panel--widget {
        padding-bottom: 6px;
    }
}
@media (max-width: 380px) {
    .page-mon-lieu .mon-lieu-lead {
        display: none;
    }
    .page-mon-lieu .mon-lieu-tab i {
        display: none;
    }
    .page-mon-lieu .mon-lieu-tab {
        padding: 7px 10px;
    }
}
@media (min-width: 641px) {
    .page-mon-lieu .mon-lieu-wrap {
        padding: 20px 16px calc(96px + env(safe-area-inset-bottom, 0px));
    }
    .page-mon-lieu .mon-lieu-hero {
        margin-bottom: 14px;
    }
    .page-mon-lieu .mon-lieu-hero-card {
        padding: 18px 16px;
        border-radius: var(--r-lg);
    }
    .page-mon-lieu .mon-lieu-hero-top {
        gap: 14px;
    }
    .page-mon-lieu .mon-lieu-hero-icon {
        width: 52px;
        height: 52px;
        border-radius: 14px;
        font-size: 1.25rem;
    }
    .page-mon-lieu .mon-lieu-eyebrow {
        font-size: 0.72rem;
        margin-bottom: 6px;
    }
    .page-mon-lieu .mon-lieu-hero h1 {
        font-size: clamp(1.1rem, 2.5vw, 1.45rem);
        font-weight: 800;
    }
    .page-mon-lieu .mon-lieu-lead {
        margin-top: 12px;
        font-size: 0.88rem;
    }
    .page-mon-lieu .mon-lieu-public-btn {
        width: auto;
        margin-top: 14px;
        min-height: 40px;
        font-size: 0.85rem;
    }
    .page-mon-lieu .mon-lieu-tabs {
        margin-left: 0;
        margin-right: 0;
        margin-bottom: 14px;
        padding-left: 0;
        padding-right: 0;
        flex-wrap: wrap;
        overflow: visible;
        gap: 8px;
    }
    .page-mon-lieu .mon-lieu-tab {
        padding: 9px 14px;
        min-height: 38px;
        font-size: 0.84rem;
    }
    .page-mon-lieu .mon-lieu-panel {
        padding: 16px;
        border-radius: var(--r-lg);
        margin-bottom: 14px;
    }
    .page-mon-lieu .mon-lieu-panel-head {
        margin-bottom: 14px;
    }
    .page-mon-lieu .mon-lieu-panel-head h2 {
        font-size: 1rem;
    }
    .page-mon-lieu .mon-lieu-panel-head p {
        font-size: 0.84rem;
    }
    .page-mon-lieu .mon-lieu-form-row {
        margin-bottom: 14px;
    }
    .page-mon-lieu .mon-lieu-form-row label {
        font-size: 0.8rem;
    }
    .page-mon-lieu .mon-lieu-form-row input[type="text"],
    .page-mon-lieu .mon-lieu-form-row input[type="url"],
    .page-mon-lieu .mon-lieu-form-row textarea,
    .page-mon-lieu .mon-lieu-form-row select {
        padding: 10px 12px;
        border-radius: var(--r-md);
    }
    .page-mon-lieu .mon-lieu-form-row textarea {
        min-height: 120px;
    }
    .page-mon-lieu .mon-lieu-form-grid {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }
    .page-mon-lieu .mon-lieu-form-actions .btn {
        width: auto;
        min-width: 160px;
        min-height: 42px;
        font-size: 0.9rem;
    }
    .page-mon-lieu .mon-lieu-upload-btn {
        width: auto;
        min-height: 42px;
        font-size: 0.86rem;
    }
    .page-mon-lieu .mon-lieu-photos-grid {
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
        gap: 10px;
    }
    .page-mon-lieu .mon-lieu-photo-btn {
        width: 36px;
        height: 36px;
    }
    .page-mon-lieu .lieu-partner-widget-embed__toolbar-row {
        flex-direction: row;
        align-items: center;
    }
    .page-mon-lieu .lieu-partner-widget-embed__copy {
        width: auto;
        min-height: 40px;
    }
}
.onboarding-overlay { position: fixed; inset: 0; z-index: 10070; background: rgba(16,24,40,.55); display: flex; align-items: center; justify-content: center; padding: 16px; }
.onboarding-panel { background: var(--surface,#fff); border-radius: 16px; max-width: 420px; width: 100%; padding: 24px; position: relative; box-shadow: var(--shadow-lg,0 20px 40px rgba(0,0,0,.15)); }
.onboarding-close { position: absolute; top: 12px; right: 12px; border: none; background: transparent; font-size: 1.1rem; cursor: pointer; }
.onboarding-steps { padding-left: 1.2rem; } .onboarding-steps li { margin-bottom: 10px; } .onboarding-steps li.is-active { font-weight: 600; }
.landing-main { padding: 24px 16px 48px; } .landing-article { max-width: 720px; margin: 0 auto; } .landing-lead { line-height: 1.6; margin: 16px 0 24px; }
.spiitz-photo-blurred { filter: blur(10px); transform: scale(1.05); }